/* KANO one-pager v4 */
:root{
  --g1:#0b7aa3;
  --g2:#14a58a;
  --ink:#0b2a3b;
  --paper: rgba(255,255,255,.92);
  --paper2: rgba(255,255,255,.97);
  --shadow: 0 22px 60px rgba(0,0,0,.20);
  --radius: 22px;
  --line: rgba(15,23,42,.12);
  --accent:#0a8b6a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background: linear-gradient(135deg, var(--g1), var(--g2));
}

a{color:inherit}
a:hover{opacity:.9}
.wrap{min-height:100%; display:grid; place-items:center; padding:2rem 1rem;}
.card{
  width:min(920px, 100%);
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:2.2rem 2rem 1.4rem;
  border:1px solid rgba(255,255,255,.35);
}
.logo{
  width:min(420px, 80%);
  height:auto;
  display:block;
  margin:0 auto 1.25rem;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.10));
}
.top{ text-align:center; padding-bottom:.4rem; }
.top h1{
  margin:.1rem 0 .95rem;
  font-size: clamp(2.05rem, 4.3vw, 2.95rem);
  line-height:1.06;
  letter-spacing:-0.02em;
}
.top .lead{
  margin:0 auto 1.35rem;
  max-width: 70ch;
  font-size: 1.12rem;
  line-height:1.7;
  color: rgba(11,42,59,.88);
}
.top .lead strong{font-weight:900}
.features{
  margin:0 auto 1.2rem;
  padding:0;
  list-style:none;
  display:grid;
  gap:.85rem;
  max-width: 52ch;
  text-align:left;
}
.features li{
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  font-weight:750;
  line-height:1.45;
  padding:.2rem 0;
}
.tick{
  width:22px; height:22px;
  flex:0 0 22px;
  margin-top:.05rem;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(10,139,106,.14);
  border: 1px solid rgba(10,139,106,.25);
}
.tick svg{
  width:14px; height:14px;
  fill:none; stroke: var(--accent);
  stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
}
.cta{
  margin: .4rem auto 0;
  font-weight: 900;
  font-size: 1.08rem;
  line-height: 1.35;
  color: rgba(7, 36, 92, .98);
  text-align: center;
}
.split{display:grid; grid-template-columns: 1fr 1fr; gap:1.2rem; margin-top:1.1rem;}
.panel{
  background:var(--paper2);
  border:1px solid var(--line);
  border-radius:18px;
  padding:1.25rem;
}
.panel h2{margin:.1rem 0 .75rem; font-size:1.15rem; letter-spacing:-.01em;}
.muted{color:rgba(15,23,42,.70)}
.small{font-size:.92rem}
.contactList{display:grid; gap:.75rem; margin-top:.95rem;}
.contactItem{
  display:grid;
  grid-template-columns: 44px 1fr;
  gap:.9rem;
  align-items:center;
  padding:.9rem .95rem;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  background: rgba(255,255,255,.78);
}
.icon{
  width:44px; height:44px;
  border-radius:14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(20,165,138,.18), rgba(11,122,163,.16));
  border:1px solid rgba(15,23,42,.08);
}
.icon svg{
  width:22px; height:22px;
  fill:none; stroke: rgba(11,42,59,.88);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.contactLabel{font-weight:900; font-size:.92rem; color: rgba(11,42,59,.70); margin-bottom:.2rem;}
.contactValue{font-weight:850; color: rgba(11,42,59,.92); line-height:1.25;}
.contactValue a{color: rgba(11,42,59,.92); text-decoration:none}
.contactValue a:hover{text-decoration:underline}
label{display:block; font-weight:850; margin:0 0 .35rem; color: rgba(11,42,59,.92);}
input, textarea{
  width:100%;
  padding:.78rem .9rem;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.16);
  font:inherit;
  outline:none;
  background:#fff;
}
input:focus, textarea:focus{
  border-color: rgba(11,122,163,.55);
  box-shadow: 0 0 0 4px rgba(11,122,163,.12);
}
.field--error input, .field--error textarea{
  border-color: rgba(239,68,68,.55);
  box-shadow: 0 0 0 4px rgba(239,68,68,.10);
}
.field__error{
  display:none;
  margin-top:.35rem;
  color:#991b1b;
  font-weight:850;
  font-size:.9rem;
}
.field--error .field__error{display:block}
.row{margin-bottom:.95rem}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.btn{
  width:100%;
  border:none;
  padding:.95rem 1rem;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
  color:#fff;
  background: linear-gradient(90deg, var(--g2), var(--g1));
  letter-spacing:.01em;
}
.btn:hover{filter:brightness(.98)}
.btn[disabled]{opacity:.7; cursor:not-allowed}
.checkbox{
  display:flex; gap:.65rem; align-items:flex-start;
  font-weight:650; color:rgba(11,42,59,.82);
}
.checkbox input{width:18px; height:18px; margin-top:.25rem}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.notice{
  display:none;
  border-radius:16px;
  padding:.9rem 1rem;
  margin-bottom:.95rem;
  border:1px solid var(--line);
  font-weight:750;
}
.notice--ok{display:block; background: rgba(10,139,106,.10); border-color: rgba(10,139,106,.25);}
.notice--err{display:block; background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.25);}
.footer{
  margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line);
  display:flex; gap:.8rem; justify-content:space-between; flex-wrap:wrap; align-items:center;
}
.footer a{text-decoration:none; font-weight:900;}
.footer a:hover{text-decoration:underline}
.modal{
  position:fixed; inset:0; display:none; place-items:center; padding:1.2rem;
  background: rgba(0,0,0,.35); backdrop-filter: blur(6px); z-index: 999;
}
.modal.is-open{display:grid}
.modal__dialog{
  width:min(980px, 100%); max-height:min(86vh, 920px); overflow:auto;
  background: rgba(255,255,255,.97); border-radius: 22px;
  border:1px solid rgba(255,255,255,.35); box-shadow: 0 26px 80px rgba(0,0,0,.35);
}
.modal__head{
  position:sticky; top:0;
  background: rgba(255,255,255,.96); border-bottom:1px solid var(--line);
  padding: .9rem 1.1rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.modal__brand{display:flex; align-items:center; gap:.9rem; min-width:0;}
.modal__brand img{height:34px; width:auto;}
.modal__title{font-weight:900; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.modal__close{
  border:1px solid var(--line); background:#fff; border-radius:999px;
  padding:.55rem .85rem; font-weight:900; cursor:pointer;
}
.modal__body{padding: 1.1rem 1.1rem 1.3rem;}
.modal__body p, .modal__body li{line-height:1.75; color:rgba(15,23,42,.86)}
.modal__body a{text-decoration:underline}
.legal__h1{margin:.1rem 0 1rem}
.legal__h2{margin:1.1rem 0 .55rem}
@media (max-width: 760px){
  .card{padding:1.7rem 1.2rem 1.2rem}
  .split{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .top{text-align:left}
  .logo{margin:0 0 1rem}
  .features{margin-left:0; margin-right:0}
}


/* --- v4 Topbereich (Word-Ziel-Layout) --- */
.top h1{
  color: rgba(7, 36, 92, .98);
  font-weight: 900;
}
.top .lead{
  color: rgba(7, 36, 92, .92);
}
.top .lead strong{
  font-weight: 900;
}

\.pyramid{
  margin: 0 auto 1.25rem;
  display: grid;
  gap: .85rem;
  justify-content: center;
  text-align: left;
  max-width: 60ch;
}
.pyramid__row{
  display: grid;
  grid-template-columns: 1.2em auto;
  align-items: center;
  column-gap: .65rem;
  font-weight: 800;
  color: rgba(7, 36, 92, .92);
  line-height: 1.35;
  width: fit-content;
  justify-self: center; /* centers each row under the slogan */
}
.pyramid__tick{
  color: #16a34a;
  font-weight: 900;
  font-size: 1.15rem;
  line-height: 1;
  transform: translateY(-1px);
}

/* Pyramiden-Staffelung: nur Einrückung (bleibt zentriert) */
.pyramid__row.r1{ padding-left: 36px; }
.pyramid__row.r2{ padding-left: 18px; }
.pyramid__row.r3{ padding-left: 0px; }


/* --- Topbereich: exakt mittig (wie Word-Screenshot) --- */
.top{
  text-align:center;
  padding-top:.2rem;
}
.logo{
  margin: 0 auto 1.05rem;
}
.top h1{
  margin: .25rem 0 .55rem;
  font-size: clamp(2.05rem, 4.2vw, 2.65rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.top .lead{
  margin: 0 auto .35rem;
  max-width: 72ch;
  font-size: 1.08rem;
  line-height: 1.65;
}
.top .lead strong{
  display:inline-block;
  margin-top: .2rem;
  font-weight: 900;
}

/* Centered bullets */
.bullets{
  margin: .95rem auto 1.05rem;
  display:grid;
  gap: .85rem;
  justify-content: center;
}
.bullets__row{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: .55rem;
  font-weight: 800;
  color: rgba(7, 36, 92, .92);
  line-height: 1.35;
  text-align:center;
}
.bullets__tick{
  color:#16a34a;
  font-weight:900;
  font-size: 1.1rem;
  line-height:1;
  transform: translateY(-1px);
}

.cta{
  margin: .4rem auto 0;
  font-weight: 900;
  font-size: 1.08rem;
  line-height: 1.35;
  color: rgba(7, 36, 92, .98);
  text-align: center;
}

/* Deaktiviert alte Pyramiden-Regeln (falls vorhanden) */
.pyramid, .pyramid__row, .pyramid__tick{ all: unset; }