/* ===========================================================================
   pranavia.de — Landingpage Marktstart KFO (Basis: Stilblatt der Pionierseite)
   Ein Stilblatt, keine Abhängigkeiten. Keine externen Schriften, kein CDN,
   kein Tracker.
   ======================================================================== */

:root{
  /* Markenfarben, abgemessen von der Karte */
  --blau:#52A6DC;      /* Stefan  · Strategie   6,9:1  */
  --tuerkis:#0097B2;   /* Tanja   · Team        5,3:1  */
  --gruen:#7DB02D;     /* Anna    · Abläufe     7,1:1  */
  --pink:#E72174;      /* Paula   · Patienten   4,3:1 — nur Flächen */
  --pink-text:#F04B90; /* dieselbe Farbe für Text, 5,4:1              */
  --violett:#9A7FD6;   /* Ina     · Infrastruktur 5,6:1 */
  --orange:#DF6732;    /* Erik    · Erfolg      5,4:1  */
  --gold:#E0AB00;      /* Maike   · Marketing   8,4:1  */
  --navy:#24486A;      /* Säulenköpfe des Masterplans */

  --grund:#0E141D;
  --flaeche:#161F2B;
  --flaeche-hell:#1E2938;
  --linie:#2A3747;
  --text:#FFFFFF;
  --text2:#C8D2DD;
  --leise:#8FA0B3;

  /* Abstandsleiter, 4er-Raster */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --rand:20px;          /* Seitenrand auf dem Telefon */
  --bahn:1120px;        /* Satzbreite */
  --rund:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--grund);
  color:var(--text2);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.bahn{max-width:var(--bahn); margin:0 auto; padding:0 var(--rand)}
@media (min-width:720px){ :root{ --rand:32px } }
@media (min-width:1024px){ :root{ --rand:40px } }

h1,h2,h3{color:var(--text); line-height:1.15; margin:0 0 var(--s4); letter-spacing:-.01em}
h1{font-size:clamp(34px,7.5vw,60px); font-weight:800}
h2{font-size:clamp(26px,4.6vw,38px); font-weight:800}
h3{font-size:clamp(19px,2.4vw,22px); font-weight:700; margin-bottom:var(--s2)}
p{margin:0 0 var(--s4); max-width:68ch}
a{color:var(--blau)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--blau); outline-offset:3px; border-radius:4px;
}
img{max-width:100%; height:auto; display:block}

/* Der klebende Kopf darf keine Überschrift verdecken, wenn ein Anker
   angesprungen wird. */
[id]{scroll-margin-top:84px}

/* Sprungmarke für die Tastatur — sichtbar erst beim Fokus. */
.springen{
  position:absolute; left:-9999px; top:0; z-index:40;
  background:var(--text); color:var(--grund); padding:12px 20px;
  border-radius:0 0 10px 0; font-weight:800; text-decoration:none;
}
.springen:focus{left:0}

.abschnitt{padding:var(--s8) 0}
@media (min-width:720px){ .abschnitt{padding:var(--s9) 0} }
.abschnitt--flaeche{background:var(--flaeche)}
.dach{
  font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--leise); margin:0 0 var(--s3);
}
.unter{color:var(--leise); max-width:62ch; margin-bottom:var(--s7)}

/* -- Kopf ---------------------------------------------------------------- */
.kopf{
  position:sticky; top:0; z-index:20;
  background:rgba(14,20,29,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linie);
}
.kopf .bahn{display:flex; align-items:center; justify-content:space-between;
            gap:var(--s4); min-height:64px}
.kopf img{width:104px}
.kopf a.knopf{padding:10px 16px; font-size:15px}
@media (max-width:519px){ .kopf a.knopf{display:none} }

/* -- Knöpfe -------------------------------------------------------------- */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  background:var(--text); color:var(--grund);
  font:inherit; font-weight:800; font-size:17px;
  padding:16px 28px; border:0; border-radius:999px;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:transform .12s ease, background-color .12s ease;
}
.knopf:hover{background:#E8EFF6; transform:translateY(-1px)}
.knopf:active{transform:translateY(0)}
.knopf--rand{
  background:transparent; color:var(--text);
  box-shadow:inset 0 0 0 2px var(--linie);
}
.knopf--rand:hover{background:var(--flaeche-hell)}
.knopf--voll{width:100%}

/* -- Bühne --------------------------------------------------------------- */
.buehne{padding:var(--s8) 0 var(--s7); position:relative; overflow:hidden}
@media (min-width:720px){ .buehne{padding:var(--s9) 0 var(--s8)} }
.buehne .zahl{
  font-size:clamp(76px,20vw,150px); font-weight:800; color:var(--text);
  line-height:.86; letter-spacing:-.04em; margin:0 0 var(--s3);
}
.buehne .knall{font-size:clamp(24px,5.2vw,40px); font-weight:800; color:var(--text);
               line-height:1.1; margin:0 0 var(--s5)}
.buehne .fuehrung{font-size:clamp(18px,2.4vw,21px); color:var(--text2); max-width:56ch}
.buehne .tasten{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}
.buehne .tasten .knopf{flex:1 1 auto; min-width:min(100%,260px)}
@media (min-width:600px){ .buehne .tasten .knopf{flex:0 0 auto; min-width:0} }
.absender{
  margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--linie);
  color:var(--leise); font-size:15px;
}
.absender b{color:var(--text2)}

/* Farbleiste wie auf der Karte */
.leiste{display:grid; grid-template-columns:repeat(7,1fr); height:8px}
.leiste i:nth-child(1){background:var(--blau)}
.leiste i:nth-child(2){background:var(--tuerkis)}
.leiste i:nth-child(3){background:var(--gruen)}
.leiste i:nth-child(4){background:var(--violett)}
.leiste i:nth-child(5){background:var(--pink)}
.leiste i:nth-child(6){background:var(--gold)}
.leiste i:nth-child(7){background:var(--orange)}

/* -- Raster -------------------------------------------------------------- */
.raster{display:grid; gap:var(--s4)}
@media (min-width:640px){ .raster--2{grid-template-columns:repeat(2,1fr)} }
/* Drei Karten: nie 2+1, sondern gleich drei nebeneinander */
@media (min-width:820px){ .raster--3{grid-template-columns:repeat(3,1fr)} }

.karte{
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--rund); padding:var(--s5);
}
.abschnitt--flaeche .karte{background:var(--flaeche-hell)}

/* -- Die fünf KI-Mitarbeiter --------------------------------------------- */
.kollegen{display:grid; gap:var(--s4)}
@media (min-width:700px){ .kollegen{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1060px){ .kollegen{grid-template-columns:repeat(3,1fr)} }

.kollege{
  background:var(--flaeche); border:1px solid var(--linie);
  border-top:4px solid var(--farbe); border-radius:var(--rund);
  padding:var(--s5); display:flex; flex-direction:column;
}
.kollege .oben{display:flex; align-items:center; gap:var(--s4); margin-bottom:var(--s4)}
.kollege .bild{
  width:72px; height:72px; flex:none; border-radius:50%;
  border:3px solid var(--farbe); background:var(--flaeche-hell);
  object-fit:cover; display:grid; place-items:center;
  font-size:26px; font-weight:800; color:var(--farbe);
}
.kollege .name{font-size:24px; font-weight:800; color:var(--farbe); margin:0; line-height:1.1}
.kollege .rolle{font-size:12.5px; hyphens:auto; overflow-wrap:anywhere; font-weight:800; letter-spacing:.14em;
                text-transform:uppercase; color:var(--leise); margin:2px 0 0}
.kollege .anspruch{color:var(--text); font-weight:700; margin:0 0 var(--s4)}
.kollege ul{margin:0 0 var(--s4); padding:0; list-style:none}
.kollege li{padding:6px 0 6px 18px; position:relative; font-size:15.5px; color:var(--text2);
            border-bottom:1px solid var(--linie)}
.kollege li:last-child{border-bottom:0}
.kollege li::before{content:""; position:absolute; left:0; top:15px;
                    width:6px; height:6px; border-radius:50%; background:var(--farbe)}
.kollege .auftrag{
  margin:auto 0 0; padding:var(--s4); background:var(--grund);
  border-radius:10px; font-size:15px; color:var(--text2); font-style:italic;
}
.kollege .auftrag span{display:block; font-style:normal; font-size:12px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--leise); margin-bottom:6px}

.kollege--stefan{--farbe:var(--blau)}
.kollege--tanja{--farbe:var(--tuerkis)}
.kollege--anna{--farbe:var(--gruen)}
.kollege--maike{--farbe:var(--gold)}
.kollege--ina{--farbe:var(--violett)}
.kollege--paula{--farbe:var(--pink)}
.kollege--paula .name{color:var(--pink-text)}
.kollege--erik{--farbe:var(--orange)}
.kollege--zusammen{--farbe:var(--linie)}
@media (min-width:1060px){ .kollege--zusammen{grid-column:1/-1} }
.kollege--zusammen h3{color:var(--text)}
.kollege--zusammen p{font-size:15.5px}
.kollege--zusammen p:last-child{margin-bottom:0}
.kollege--zusammen b{color:var(--text)}

.stufe--1{--farbe:var(--tuerkis)}
.stufe--2{--farbe:var(--orange)}
.stufe--3{--farbe:var(--blau)}

.abstand-oben{margin-top:var(--s8)}
.unter--eng{margin-bottom:var(--s5)}
.hinweis--abstand{margin-top:var(--s4)}
.fussname{margin:0; color:var(--text2)}

/* -- Nutzen -------------------------------------------------------------- */
.nutzen{display:grid; gap:var(--s3); margin:0; padding:0; list-style:none}
@media (min-width:640px){ .nutzen{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .nutzen{grid-template-columns:repeat(3,1fr)} }
.nutzen li{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rund);
  padding:var(--s5); color:var(--text); font-weight:700;
}
.nutzen li b{display:block; color:var(--gruen); font-size:13px; letter-spacing:.14em;
             text-transform:uppercase; margin-bottom:var(--s2)}

/* -- Preise -------------------------------------------------------------- */
.preise{display:grid; gap:var(--s4)}
@media (min-width:860px){ .preise{grid-template-columns:1fr 1fr; align-items:start} }
.paket{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rund);
  padding:var(--s5); display:flex; flex-direction:column;
}
.paket--stark{box-shadow:inset 0 0 0 2px var(--blau); background:var(--flaeche-hell)}
.paket .marke{font-size:12.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blau); margin-bottom:var(--s3)}
.paket h3{margin-bottom:var(--s3)}
.paket .zahl{font-size:clamp(34px,6vw,46px); font-weight:800; color:var(--text);
             line-height:1; margin:0}
.paket .statt{color:var(--leise); font-size:15px; margin:var(--s2) 0 var(--s5)}
.paket .statt s{opacity:.75}
.paket ul{list-style:none; margin:0 0 var(--s5); padding:0}
.paket li{padding:9px 0; border-bottom:1px solid var(--linie); font-size:15.5px;
          display:flex; justify-content:space-between; gap:var(--s4)}
.paket li:last-child{border-bottom:0}
.paket li b{color:var(--text); white-space:nowrap}
.paket .fuss{margin:auto 0 0; padding-top:var(--s4); color:var(--leise); font-size:14px}

.stufen{display:grid; gap:var(--s3); margin-top:var(--s6)}
@media (min-width:760px){ .stufen{grid-template-columns:repeat(3,1fr)} }
.stufe{border-radius:var(--rund); padding:var(--s5); border:1px solid var(--linie);
       background:var(--flaeche)}
.stufe .kopfzahl{font-size:30px; font-weight:800; color:var(--text); line-height:1}
.stufe .wann{font-size:12.5px; font-weight:800; letter-spacing:.12em;
             text-transform:uppercase; color:var(--farbe); margin:0 0 var(--s3)}
.stufe p{font-size:15px; margin:var(--s3) 0 0; color:var(--text2)}

/* -- Fragen -------------------------------------------------------------- */
.frage{border-bottom:1px solid var(--linie)}
.frage summary{
  cursor:pointer; list-style:none; padding:var(--s5) 44px var(--s5) 0;
  font-weight:700; color:var(--text); font-size:17.5px; position:relative;
}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{
  content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:26px; font-weight:400; color:var(--blau); line-height:1;
}
.frage[open] summary::after{content:"–"}
.frage .antwort{padding:0 0 var(--s5)}
.frage .antwort p:last-child{margin-bottom:0}

/* -- Formular ------------------------------------------------------------ */
.formular{
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--rund); padding:var(--s5);
}
@media (min-width:720px){ .formular{padding:var(--s7)} }
fieldset{border:0; margin:0 0 var(--s6); padding:0}
legend{
  font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--leise); padding:0; margin-bottom:var(--s4);
}
.felder{display:grid; gap:var(--s4)}
@media (min-width:640px){ .felder--2{grid-template-columns:repeat(2,1fr)} }
.feld{display:flex; flex-direction:column; gap:6px}
.feld--breit{grid-column:1/-1}
label{font-size:15px; font-weight:700; color:var(--text2)}
label .pflicht{color:var(--pink-text)}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  font:inherit; font-size:16px;              /* 16px verhindert das Zoomen in iOS */
  background:var(--grund); color:var(--text);
  border:1px solid var(--linie); border-radius:10px;
  padding:13px 14px; width:100%;
}
textarea{min-height:120px; resize:vertical}
input::placeholder,textarea::placeholder{color:#6B7B8F}
input:hover,select:hover,textarea:hover{border-color:#3A4A5D}
.hinweis{font-size:13.5px; color:var(--leise); margin:0}

.wahl{display:grid; gap:var(--s3)}
@media (min-width:720px){ .wahl{grid-template-columns:repeat(2,1fr)} }
.wahl label{
  display:block; cursor:pointer; background:var(--grund);
  border:1px solid var(--linie); border-radius:12px; padding:var(--s4);
  font-weight:400; color:var(--text2);
}
.wahl label:hover{border-color:#3A4A5D}
.wahl input{position:absolute; opacity:0; width:0; height:0}
.wahl label b{display:block; color:var(--text); font-size:17px; margin-bottom:4px}
.wahl label .preis{display:block; color:var(--blau); font-weight:800; margin-top:var(--s2)}
.wahl input:checked + .inhalt{color:var(--text2)}
.wahl label:has(input:checked){
  border-color:var(--blau); box-shadow:inset 0 0 0 1px var(--blau); background:var(--flaeche-hell);
}
.wahl label:has(input:focus-visible){outline:3px solid var(--blau); outline-offset:3px}

.zustimmung{display:flex; gap:var(--s3); align-items:flex-start; margin-bottom:var(--s4)}
.zustimmung input{margin:3px 0 0; width:20px; height:20px; flex:none; accent-color:var(--blau)}
.zustimmung label{font-weight:400; font-size:15px; color:var(--text2)}

.falle{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.meldung{border-radius:var(--rund); padding:var(--s5); margin-bottom:var(--s6);
         border:1px solid var(--linie)}
.meldung--gut{background:rgba(125,176,45,.12); border-color:var(--gruen)}
.meldung--schlecht{background:rgba(231,33,116,.12); border-color:var(--pink)}
.meldung h3{margin-bottom:var(--s2)}
.meldung p:last-child{margin-bottom:0}
.meldung ul{margin:0; padding-left:1.2em}
.meldung li + li{margin-top:4px}
.meldung ul + p{margin-top:var(--s3)}
.meldung a{color:var(--text)}

/* Fehlende Pflichtangaben, markiert von seite.js vor dem Absenden */
input[aria-invalid=true],textarea[aria-invalid=true]{
  border-color:var(--pink); box-shadow:inset 0 0 0 1px var(--pink);
}
.wahl.fehlt label{border-color:var(--pink)}
.zustimmung.fehlt label{color:var(--pink-text)}

/* -- Fuß ----------------------------------------------------------------- */
.fuss{background:var(--flaeche); border-top:1px solid var(--linie); padding:var(--s7) 0}
.fuss .bahn{display:grid; gap:var(--s5)}
@media (min-width:760px){ .fuss .bahn{grid-template-columns:1fr auto; align-items:center} }
.fuss img{width:116px; margin-bottom:var(--s4)}
.fuss nav{display:flex; flex-wrap:wrap; gap:var(--s5)}
.fuss a{color:var(--text2); text-decoration:none; font-weight:700}
.fuss a:hover{color:var(--text); text-decoration:underline}
.fuss small{color:var(--leise); display:block; margin-top:var(--s3)}

/* -- Rechtstexte --------------------------------------------------------- */
.recht{padding:var(--s8) 0}
.recht h1{font-size:clamp(30px,5vw,42px); margin-bottom:var(--s5)}
.recht h2{font-size:clamp(20px,2.6vw,25px); margin-top:var(--s7)}
.recht h3{margin-top:var(--s5)}
.recht p,.recht li{max-width:72ch}
.recht ul{padding-left:20px}
.recht li{margin-bottom:var(--s2)}
.recht .zurueck{display:inline-block; margin-bottom:var(--s5); color:var(--blau);
                text-decoration:none; font-weight:700}
.recht dl{margin:0 0 var(--s5)}
.recht dt{font-weight:800; color:var(--text); margin-top:var(--s4)}
.recht dd{margin:4px 0 0}

.luecke{
  background:rgba(231,33,116,.10); border:1px dashed var(--pink);
  border-radius:10px; padding:var(--s4); margin:var(--s4) 0; color:var(--text);
}
.luecke b{color:var(--pink-text)}

.bahn--schmal{max-width:820px}
.bahn--eng{max-width:760px}
.stand{margin-top:var(--s8); color:var(--leise)}
.knopf-abstand{margin-top:var(--s7)}
.knopf-abstand--klein{margin-top:var(--s6)}

/* -- Druck --------------------------------------------------------------- */
@media print{
  .kopf,.buehne .tasten,.formular{display:none}
  body{background:#fff; color:#000}
  h1,h2,h3{color:#000}
}


/* ===========================================================================
   Stand 15.10.2026: Masterplan aus dem Flyer, PRANAVIA, sieben KI-Kollegen
   ======================================================================== */
.kopfnav{display:none; gap:var(--s5)}
.kopfnav a{color:var(--text2); text-decoration:none; font-weight:700; font-size:15px}
.kopfnav a:hover{color:var(--text)}
@media (min-width:960px){ .kopfnav{display:flex} }

.buehnemarke{margin:var(--s6) 0 0}
.buehnemarke img{width:min(300px,70vw)}
.leise{color:var(--leise)}
.klein{font-size:14px}
.abstand-oben-klein{margin-top:var(--s6)}
.raster--4{display:grid; gap:var(--s4)}
@media (min-width:640px){ .raster--4{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1060px){ .raster--4{grid-template-columns:repeat(4,1fr)} }
.karte ul.haken,.baustein ul{margin:0 0 var(--s3); padding:0; list-style:none}
ul.haken li,.baustein ul li{padding:6px 0 6px 22px; position:relative; font-size:15.5px; border-bottom:1px solid var(--linie)}
ul.haken li:last-child,.baustein ul li:last-child{border-bottom:0}
ul.haken li::before{content:"✓"; position:absolute; left:0; color:var(--gruen); font-weight:800}
.baustein ul.plus li::before{content:"+"; position:absolute; left:2px; color:var(--blau); font-weight:800}

/* Fünf Felder der Praxisentwicklung */
.felder5{list-style:none; margin:0; padding:0; display:grid; gap:var(--s3)}
@media (min-width:640px){ .felder5{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1060px){ .felder5{grid-template-columns:repeat(5,1fr)} }
.feld5{background:var(--flaeche); border:1px solid var(--linie); border-top:5px solid var(--farbe);
       border-radius:var(--rund); padding:var(--s5) var(--s4); min-width:0}
.feld5 .nr{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%;
           background:var(--farbe); color:var(--grund); font-weight:800; margin:0 0 var(--s3)}
.feld5 h3{color:var(--farbe); margin-bottom:4px}
.feld5 .kurz{font-weight:700; color:var(--text); font-size:15px; margin-bottom:var(--s3)}
.feld5 ul{margin:0; padding:0; list-style:none}
.feld5 li{font-size:15px; padding:5px 0 5px 16px; position:relative}
.feld5 li::before{content:""; position:absolute; left:0; top:13px; width:6px; height:6px; border-radius:50%; background:var(--farbe)}
.feld5--weg{--farbe:var(--blau)} .feld5--team{--farbe:var(--tuerkis)} .feld5--orga{--farbe:var(--gruen)}
.feld5--patienten{--farbe:var(--pink-text)} .feld5--erfolg{--farbe:var(--orange)}
.brueckentext{margin-top:var(--s6); color:var(--text2)}
.brueckentext b{color:var(--text)}

/* Masterplan: vier Phasen x drei Säulen */
.saeulenkopf{display:none}
@media (min-width:980px){
  .saeulenkopf{display:grid; grid-template-columns:200px repeat(3,1fr); gap:var(--s3); margin-bottom:var(--s3)}
  .sk{border-radius:12px 12px 0 0; padding:var(--s3) var(--s4); color:var(--text2); font-size:13px; text-align:center}
  .sk b{display:block; color:var(--text); font-size:17px}
  .sk--entw{background:var(--navy)} .sk--comp{background:#3D6E1E} .sk--ki{background:#1E6D86}
}
.phasen{display:grid; gap:var(--s4)}
.phase{display:grid; gap:var(--s3)}
@media (min-width:980px){ .phase{grid-template-columns:200px repeat(3,1fr)} }
.phasenname{margin:0; display:flex; align-items:center; gap:var(--s3); font-size:19px}
.phasenname span{display:inline-grid; place-items:center; width:34px; height:34px; flex:none; border-radius:50%;
                 background:var(--blau); color:var(--grund); font-weight:800}
.zelle{background:var(--flaeche-hell); border:1px solid var(--linie); border-left:4px solid var(--farbe);
       border-radius:10px; padding:var(--s4); min-width:0}
.zelle--entw{--farbe:#7FA6CC} .zelle--comp{--farbe:var(--gruen)} .zelle--ki{--farbe:var(--tuerkis)}
.zelle .saeule{font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--farbe); margin:0 0 6px}
@media (min-width:980px){ .zelle .saeule{display:none} }
.zelle h4{color:var(--text); font-size:16px; line-height:1.3; margin:0 0 var(--s2); hyphens:auto; overflow-wrap:break-word}
.zelle ul{margin:0; padding-left:18px}
.zelle li{font-size:14.5px; padding:2px 0}

/* Auszeichnungen */
.siegel{display:grid; gap:var(--s5); align-items:center; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.siegel figure{margin:0; text-align:center}
.siegel figure img{width:150px; margin:0 auto var(--s3)}
.siegel figcaption{font-weight:700; color:var(--text); font-size:15px; hyphens:auto; overflow-wrap:anywhere}
.siegeltext{grid-column:1/-1}
@media (min-width:1000px){ .siegel{grid-template-columns:repeat(3,1fr) 1.4fr} .siegeltext{grid-column:auto} }
.marke-klein{font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--blau); margin-bottom:var(--s2)}
.preiszeile{font-weight:800; color:var(--text); margin:0}

/* Pionierkreis */
.fuerwen > div{background:var(--grund); border:1px solid var(--linie); border-radius:var(--rund); padding:var(--s5); font-size:15.5px}
.fuerwen b{display:block; color:var(--text); margin-bottom:var(--s2)}
.zitat{margin:var(--s7) 0; padding:var(--s5) var(--s6); border-left:5px solid var(--blau); background:var(--flaeche-hell);
       border-radius:0 var(--rund) var(--rund) 0}
.zitat p{font-size:clamp(19px,2.6vw,24px); color:var(--text); font-weight:700; line-height:1.35}
.zitat footer{color:var(--leise); font-size:15px}

/* PRANAVIA */
.pranaviakopf{display:grid; gap:var(--s5); align-items:center; margin-bottom:var(--s6)}
.pranaviakopf img{width:min(360px,80vw)}
@media (min-width:900px){ .pranaviakopf{grid-template-columns:360px 1fr} }
.kollege--maike .name{color:var(--gold)}

/* Investition und Gewinnspirale */
.hebel{display:grid; gap:var(--s3)}
.hebelzeile{display:grid; gap:var(--s3); background:var(--flaeche-hell); border:1px solid var(--linie);
            border-left:5px solid var(--farbe); border-radius:10px; padding:var(--s4)}
@media (min-width:900px){ .hebelzeile{grid-template-columns:220px 1fr 1.2fr; align-items:start} }
.hebelzeile p{margin:0; font-size:15px}
.hebelname{color:var(--leise); font-size:14px}
.hebelname b{display:block; color:var(--farbe); font-size:20px}
.nachricht{font-style:italic; color:var(--text2); background:var(--grund); border-radius:8px; padding:var(--s3)}
.hebel--stefan{--farbe:var(--blau)} .hebel--tanja{--farbe:var(--tuerkis)} .hebel--anna{--farbe:var(--gruen)}
.hebel--ina{--farbe:var(--violett)} .hebel--paula{--farbe:var(--pink-text)} .hebel--maike{--farbe:var(--gold)} .hebel--erik{--farbe:var(--orange)}
.spirale{display:grid; gap:var(--s5); align-items:center; margin-top:var(--s7)}
@media (min-width:860px){ .spirale{grid-template-columns:1fr 1fr} }
.spiralbild{width:100%; max-width:420px}
.spiraltext p{color:var(--text2)}

/* Bausteine */
.bausteine{display:grid; gap:var(--s3)}
.baustein{display:grid; gap:var(--s4); background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rund); padding:var(--s5)}
@media (min-width:860px){ .baustein{grid-template-columns:1fr 220px} }
.baustein--stark{box-shadow:inset 0 0 0 2px var(--blau); background:var(--flaeche-hell)}
.baustein--alles{box-shadow:inset 0 0 0 2px var(--gruen)}
.baustein h3{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.inlinemarke{width:130px; height:auto}
.wunsch{color:var(--text); font-weight:700; margin-bottom:var(--s3)}
.zusatz{font-size:15px; margin:var(--s3) 0 0}
.zusatz b{color:var(--text)}
.betrag{display:flex; flex-direction:column; gap:2px; text-align:left}
@media (min-width:860px){ .betrag{text-align:right; border-left:1px solid var(--linie); padding-left:var(--s4)} }
.betrag b{font-size:clamp(28px,4vw,36px); color:var(--text); line-height:1.1}
.betrag b.plus,.betrag b.danach{font-size:22px; margin-top:var(--s3)}
.betrag span{color:var(--leise); font-size:14px}
.betrag s{color:var(--leise); font-size:14px}
.fussmarke{display:flex; align-items:center; gap:var(--s3); color:var(--leise); font-size:14px; margin:var(--s3) 0 0}
.fussmarke img{width:110px; margin:0}

h2{text-wrap:balance}
.feld5 h3,.karte h3,.raster--4 h3{hyphens:auto; overflow-wrap:break-word}

/* -- Geschichte der Seite (16.10.2026, nach Webseiten-Magic) -------------- */
.buehne .nutzenzeile{font-size:clamp(18px,2.4vw,21px); color:var(--text); font-weight:700; max-width:52ch; margin:0 0 var(--s4)}
.karte--frage{border-top:4px solid var(--pink)}
.karte--frage h3{margin-bottom:var(--s3)}
.weiter{margin-top:var(--s7); padding:var(--s5) var(--s6); border:1px solid var(--linie); border-left:5px solid var(--gold);
        border-radius:0 var(--rund) var(--rund) 0; background:var(--flaeche-hell)}
.abschnitt--flaeche .weiter{background:var(--grund)}
.weiter p{color:var(--text); font-weight:700; margin-bottom:var(--s4)}
.weiter .tasten,.tasten--mitte{display:flex; flex-wrap:wrap; gap:var(--s3)}
.weiter .tasten .knopf{flex:1 1 auto; min-width:min(100%,240px)}
@media (min-width:600px){ .weiter .tasten .knopf{flex:0 0 auto; min-width:0} }
.tasten--mitte{margin-top:var(--s6)}
.schritte{list-style:none; margin:0; padding:0; display:grid; gap:var(--s4); counter-reset:none}
@media (min-width:860px){ .schritte{grid-template-columns:repeat(3,1fr)} }
.schritte li{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rund); padding:var(--s5); position:relative}
.schritte .nr{font-size:44px; font-weight:800; color:var(--gold); line-height:1; margin:0 0 var(--s3)}
.zweiwege ul{margin:0; padding-left:1.1em}
.zweiwege li{margin-bottom:var(--s2)}
.karte--ziel{border-color:var(--gruen); box-shadow:inset 0 0 0 1px var(--gruen)}
.karte--ziel h3{color:var(--gruen)}
.ueber{display:grid; gap:var(--s6); align-items:start}
@media (min-width:760px){ .ueber{grid-template-columns:160px 1fr} }
.monogramm{width:140px; height:140px; border-radius:50%; display:grid; place-items:center;
           background:linear-gradient(135deg,var(--blau),var(--tuerkis)); color:var(--grund);
           font-size:48px; font-weight:800; letter-spacing:.02em}
.stimme{margin:0; border-left:5px solid var(--gold)}
.stimme p{color:var(--text); font-size:clamp(17px,2vw,19px); line-height:1.5}
.stimme footer{color:var(--leise); font-size:15px; font-weight:700}
@media (max-width:599px){ .weiter{padding:var(--s5) var(--s4)} }
@media print{ .weiter{display:none} }


/* ===========================================================================
   pranavia.de – Ergänzungen (06.11.2026)
   ======================================================================== */
.kopf img.kopfmarke{width:150px}
.fuss img{width:150px}
.dach--hell{color:#F7B267}

/* Bühne: geschlossener Theatervorhang (Bild), Text davor mit leichter Abdunklung. */
.vorhang{position:relative; overflow:hidden; min-height:680px; display:flex; align-items:center;
  padding:var(--s8) 0;
  background:#3A0004 url("bilder/vorhang.jpg") center bottom / cover no-repeat}
@media (min-width:900px){ .vorhang{min-height:780px} }
.vorhang-bild,.vorhang-links,.vorhang-rechts{display:none}
/* Abdunklung hinter dem Text, damit er auf dem Stoff gut lesbar bleibt */
.vorhang::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 50%, rgba(20,0,2,.55) 0, rgba(20,0,2,.25) 60%, rgba(20,0,2,0) 100%)}
.vorhang-inhalt{position:relative; z-index:3; width:100%; text-align:center}
.vorhang-inhalt > *{max-width:760px; margin-left:auto; margin-right:auto}
.vorhang .dach{color:#F7B267}
.vorhang h1{color:#FFFFFF; font-size:clamp(38px,6.4vw,64px); line-height:1.05; margin-bottom:var(--s5);
  text-shadow:0 2px 18px rgba(40,4,8,.6)}
.vorhang .fuehrung{color:#F7E3E0; font-size:clamp(18px,2.2vw,20px)}
.vorhang .tasten{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s3); margin-top:var(--s5)}
.vorhang .knopf--rand{color:#FFFFFF; box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.vorhang .knopf--rand:hover{background:rgba(255,255,255,.12)}
.countdown{justify-content:center}
.nurkfo{margin-top:var(--s5); font-size:15px; color:#F7E3E0}
.nurkfo b{color:#FFFFFF}


/* Bilder im Fluss */
.bildblock{margin:0 0 var(--s7)}
.bildblock img{width:100%; border-radius:var(--rund); border:1px solid var(--linie)}
.bildblock figcaption{margin-top:var(--s3); color:var(--leise); font-size:15px}
.bildblock--hell img{border-color:transparent}
.zwischen{margin:var(--s7) 0 var(--s5); font-size:clamp(22px,3vw,28px)}

/* Gegenüberstellung */
.gegenueber{display:grid; gap:var(--s4)}
.seite{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rund); padding:var(--s6)}
.seite--neu{border-color:#F7B267}
.seite--neu h3{color:#F7B267}
ul.haken--minus li::before{content:"–"; color:var(--leise); background:none}
.gegenueber ul{list-style:none; margin:0; padding:0}
.gegenueber li{position:relative; padding:8px 0 8px 26px; border-bottom:1px solid var(--linie)}
.gegenueber li:last-child{border-bottom:0}
.gegenueber li::before{position:absolute; left:0}
@media (min-width:1060px){ .kollegen .kollege--zusammen{grid-column:span 2; display:flex; flex-direction:column; justify-content:center} }
@media (min-width:1000px){ .gegenueber{grid-template-columns:1fr 1fr 1fr} }
.seite--frickel{border-color:#C2303A}
.seite--frickel h3{color:#F27A82}
ul.haken--warn li::before{content:"!"; color:#F27A82; font-weight:800; background:none}
.mentor{display:grid; gap:var(--s6); align-items:center}
@media (min-width:900px){ .mentor{grid-template-columns:1.4fr 1fr} }
.mentor-titel{color:var(--text); font-weight:700}
.mentor b{color:var(--text)}
.eisberg{margin:0}
.eisberg svg{width:100%; max-width:400px; height:auto; display:block; margin:0 auto; border-radius:var(--rund)}
.countdown{display:flex; gap:var(--s3); margin:var(--s5) 0 0}
.countdown div{background:rgba(42,10,14,.55); border:1px solid rgba(247,178,103,.45); border-radius:12px;
  padding:10px 16px; min-width:96px; text-align:center}
.countdown b{display:block; font-size:clamp(28px,4.4vw,40px); font-weight:800; color:#F7B267;
  font-variant-numeric:tabular-nums; line-height:1.1}
.countdown span{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#F7E3E0}
.vorhang .countdown{justify-content:center}
.vorhang .countdown{margin:var(--s5) auto 0}

/* Drei Wege: Überschrift in einer Zeile */
.gegenueber .seite h3{white-space:nowrap}
@media (max-width:380px){ .gegenueber .seite h3{white-space:normal} }

/* Abgrenzung am Ende von "KI angebaut" */
.abgrenzung{margin-top:var(--s6); font-size:clamp(22px,2.6vw,28px); font-weight:800; color:var(--akzent,#F7B267); text-align:center}

/* Symmetrie: Überschriften und Texte der Karten nebeneinander auf gleicher Höhe */
@media (min-width:820px){
  .raster--3{grid-auto-rows:auto}
  .raster--3 > .karte{display:grid; grid-row:span 2; grid-template-rows:subgrid; row-gap:var(--s2); align-content:start}
  .raster--3 > .karte > h3,.raster--3 > .karte > p{margin:0}
}

/* Versprechen-Karten in den Farben der zuständigen KI-Kollegen */
.karte--ina{--farbe:var(--violett)} .karte--tanja{--farbe:var(--tuerkis)} .karte--anna{--farbe:var(--gruen)}
.karte--ina,.karte--tanja,.karte--anna{border-top:4px solid var(--farbe)}
.karte--ina h3,.karte--tanja h3,.karte--anna h3{color:var(--farbe)}

/* Drei Wege: keine 2+1-Anordnung; nebeneinander stehen Überschriften und Punkte zeilengleich */
@media (min-width:1000px){
  .gegenueber > .seite{display:grid; grid-row:span 5; grid-template-rows:subgrid; row-gap:0}
  .gegenueber > .seite > ul{display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0}
}