/* Der KI-Check · Grossmann & Partners
   Alle Regeln sind auf .kicheck eingeschraenkt, damit weder das
   Thrive-Theme in den Check hineinwirkt noch umgekehrt.
   Texte stehen NICHT hier, sondern in ki-check.js.            */

/* Schriften liegen im Plugin, nicht bei Google. Damit laedt die Seite
   nichts von aussen — kein Kontakt zu Google-Servern, keine IP-Adresse
   des Besuchers, die das Haus verlaesst. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url('schriften/space-grotesk-latin-300-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url('schriften/space-grotesk-latin-ext-300-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('schriften/space-grotesk-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('schriften/space-grotesk-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('schriften/space-grotesk-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('schriften/space-grotesk-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:300;font-display:swap;src:url('schriften/work-sans-latin-300-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:300;font-display:swap;src:url('schriften/work-sans-latin-ext-300-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;src:url('schriften/work-sans-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;src:url('schriften/work-sans-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:500;font-display:swap;src:url('schriften/work-sans-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:500;font-display:swap;src:url('schriften/work-sans-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Work Sans';font-style:italic;font-weight:400;font-display:swap;src:url('schriften/work-sans-latin-400-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Work Sans';font-style:italic;font-weight:400;font-display:swap;src:url('schriften/work-sans-latin-ext-400-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Marken-Tokens ------------------------------------- */
:root{
  --petrol:#004F59;
  --petrol-tief:#00343B;
  --salbei:#6EB0AE;
  --salbei-hell:#CFE5E2;
  --ink:#545456;
  --ink-leise:#8C8A85;
  --grund:#FBFAF7;
  --flaeche:#FFFFFF;
  --linie:#E2DED4;
  --linie-stark:#C9C3B4;
  --display:"Space Grotesk","Work Sans",-apple-system,Segoe UI,sans-serif;
  --text:"Work Sans",-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  --masz:1120px;
}

/* Bewusst einfarbig hell: Das Produkt wird in eine helle Website
   eingebettet und folgt der Marke. Alle Farben sind explizit gesetzt,
   damit die Seite auf jedem Untergrund traegt. */

.kicheck, .kicheck *{box-sizing:border-box}
.kicheck{
  margin:0;background:var(--grund);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.kicheck p{margin:0}
.kicheck h1, .kicheck h2, .kicheck h3{margin:0;font-family:var(--display);font-weight:400;color:var(--petrol);text-wrap:balance}

/* Achtung beim Ändern: .start, .frage und .ergebnis liegen auf
   demselben Element wie .huelle. Dort deshalb nur padding-top
   setzen, sonst fällt der seitliche Rand auf dem Smartphone weg. */
.kicheck .huelle{max-width:var(--masz);margin:0 auto;padding:0 22px}
.kicheck .spalte{max-width:660px;margin-left:auto;margin-right:auto}

/* ---------- Kopfzeile ----------------------------------------- */
.kicheck .kopfleiste{
  border-bottom:1px solid var(--linie);background:var(--grund);
  position:sticky;top:0;z-index:5;
}
.kicheck .kopfleiste .innen{
  max-width:var(--masz);margin:0 auto;padding:15px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.kicheck .wortmarke{
  font-family:var(--display);font-size:13.5px;font-weight:500;
  color:var(--petrol);letter-spacing:.01em;
}
.kicheck .wortmarke span{color:var(--ink-leise);font-weight:400}
.kicheck .zaehler{
  font-family:var(--display);font-size:12.5px;color:var(--ink-leise);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.kicheck .balken{display:flex;gap:4px}
.kicheck .balken i{width:20px;height:3px;background:var(--linie);display:block;transition:background .25s ease}
.kicheck .balken i.voll{background:var(--salbei)}
.kicheck .balken i.hier{background:var(--petrol)}
.kicheck .zaehler{white-space:nowrap}
@media (max-width:560px){
  .kicheck .balken i{width:10px;gap:3px}
  .kicheck .wortmarke span{display:none}      /* Zusatz weg, damit nichts umbricht */
  .kicheck .kopfleiste .innen{gap:12px}
  .kicheck #fortschritt{gap:10px !important}
}

/* ---------- Bühne --------------------------------------------- */
.kicheck .buehne{padding:0 0 90px}
.kicheck .szene{display:none}
.kicheck .szene.aktiv{display:block;animation:auf .28s ease}
@keyframes auf{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .kicheck .szene.aktiv{animation:none} }

/* ---------- Start --------------------------------------------- */
/* Reihenfolge der Aufmerksamkeit: Überschrift → Absatz → Kernsatz →
   Erwartungsrahmen → Knopf → Transparenzzeile. Die Überschrift ist
   das einzige laute Element; alles darunter bleibt ruhig.            */
.kicheck .start{padding-top:56px}

/* Der Startscreen laeuft bewusst breiter als die Frage- und
   Ergebnisseiten, damit der erste Satz der Ueberschrift auf dem
   Desktop in eine Zeile passt. Gilt nur hier.                       */
.kicheck .start .spalte{max-width:900px}

/* Beide Saetze liegen auf derselben typografischen Ebene. Der Umbruch
   zwischen ihnen ist gesetzt, der Umbruch innerhalb responsiv.      */
.kicheck .start h1{
  font-size:clamp(34px,5.1vw,56px);line-height:1.1;font-weight:300;
  letter-spacing:-.02em;margin-bottom:24px;
  /* balance würde hier eine kurze Reststelle mitten im Satz erzeugen. */
  text-wrap:pretty;
}
.kicheck .start h1 .satz{display:block}
.kicheck .start .flies{font-size:17.5px;line-height:1.62;color:var(--ink);margin-bottom:0;max-width:62ch}
.kicheck .start .flies + .flies{margin-top:13px}
.kicheck .start .flies strong{font-weight:500;color:var(--petrol)}

/* Stärker als Fließtext, aber ausdrücklich keine zweite Überschrift:
   dieselbe Textschrift, nur Gewicht, Farbe und ein halber Punkt.     */
/* Bewusst ohne Breitenbegrenzung: Der Kernsatz soll auf dem Desktop
   in eine Zeile passen. Auf dem Smartphone bricht er zwangsläufig um. */
.kicheck .kernsatz{
  font-size:18.5px;line-height:1.55;font-weight:500;color:var(--petrol);
  margin-top:18px;
}
.kicheck .kernsatz span{display:block}
.kicheck .kernsatz span + span{margin-top:11px}

/* Erwartungsrahmen: die beiden Zeilen gehören zusammen und werden
   deshalb NICHT durch eine Linie getrennt.                          */
.kicheck .rahmen{
  margin:30px 0 28px;padding-top:15px;border-top:1px solid var(--linie);
}
.kicheck .eckdaten{
  font-family:var(--display);font-size:14px;color:var(--ink);
  letter-spacing:.01em;
}
.kicheck .eckdaten:has(+ .abgrenzung){margin-bottom:5px}
.kicheck .abgrenzung{
  font-family:var(--display);font-size:14px;color:var(--ink);line-height:1.45;
}
.kicheck .startknopf{margin-bottom:0}

/* Transparenz, kein zweites Verkaufsargument: klein, aber lesbar.
   Jeder Satz eine Zeile — deshalb keine Breitenbegrenzung.          */
.kicheck .transparenz{
  font-size:13.5px;line-height:1.55;color:var(--ink);margin-top:14px;
}
.kicheck .transparenz .satz{display:block}
.kicheck .kleingedruckt{font-size:14px;color:var(--ink-leise);line-height:1.5}

/* ---------- Knöpfe -------------------------------------------- */
.kicheck .knopf{
  display:inline-block;font-family:var(--display);font-size:16px;font-weight:500;
  color:#FFFFFF;background:var(--petrol);border:1px solid var(--petrol);
  padding:15px 30px;border-radius:3px;cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.kicheck .knopf:hover{background:var(--petrol-tief);border-color:var(--petrol-tief)}
.kicheck .knopf:disabled{background:var(--linie);border-color:var(--linie);color:#FFFFFF;cursor:not-allowed}
.kicheck .knopf.leise{
  background:transparent;color:var(--petrol);border-color:transparent;
  padding-left:0;padding-right:14px;font-weight:400;
}
.kicheck .knopf.leise:hover{background:transparent;color:var(--petrol-tief);text-decoration:underline;text-underline-offset:3px}
.kicheck :focus-visible{outline:2px solid var(--petrol);outline-offset:3px;border-radius:2px}

/* ---------- Frage --------------------------------------------- */
.kicheck .frage{padding-top:56px}
/* Die Position steht ausschliesslich in der Kopfzeile. Ueber der Frage
   stand sie ein zweites Mal — das ist bewusst entfernt. Die interne
   Bezeichnung des Bereichs (Sehen, Prozess …) sieht der Nutzer nie. */
.kicheck .frage h2{
  font-size:clamp(24px,3.4vw,38px);line-height:1.16;font-weight:300;
  letter-spacing:-.014em;margin-bottom:18px;
}
.kicheck .szenario{font-size:17px;line-height:1.6;color:var(--ink);max-width:54ch;margin-bottom:34px}

.kicheck fieldset.antworten{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.kicheck fieldset.antworten legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kicheck .wahl{position:relative;display:block}
.kicheck .wahl input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.kicheck .wahl .flaeche{
  display:grid;grid-template-columns:26px 1fr;gap:0 16px;align-items:start;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:4px;
  padding:19px 22px;cursor:pointer;
  transition:border-color .16s ease,background .16s ease;
}
.kicheck .wahl .flaeche:hover{border-color:var(--linie-stark)}
.kicheck .wahl .kuerzel{
  font-family:var(--display);font-size:13.5px;color:var(--ink-leise);
  padding-top:2px;letter-spacing:.04em;
}
.kicheck .wahl .satz{font-size:16.5px;line-height:1.5;color:var(--ink)}
.kicheck .wahl input:checked + .flaeche{
  border-color:var(--petrol);background:#FFFFFF;
  box-shadow:inset 3px 0 0 0 var(--petrol);
}
.kicheck .wahl input:checked + .flaeche .kuerzel{color:var(--petrol)}
.kicheck .wahl input:checked + .flaeche .satz{color:var(--petrol)}
.kicheck .wahl input:focus-visible + .flaeche{outline:2px solid var(--petrol);outline-offset:3px}

/* „Der Punkt" — wiederkehrendes Editorial-Element unter den Antworten.
   Kein Quiz-Feedback: Der Text ist für A, B und C identisch und sagt
   nie, ob eine Antwort richtig war.
   Der Block steht von Anfang an im Layout und ist nur unsichtbar.
   Dadurch springt beim Einblenden nichts. visibility:hidden statt
   opacity allein, damit Screenreader ihn vor der Auswahl nicht lesen. */
.kicheck .punkt{
  margin-top:30px;padding-top:18px;border-top:1px solid var(--linie);
  max-width:52ch;
  visibility:hidden;opacity:0;transition:opacity .32s ease;
}
.kicheck .punkt.sichtbar{visibility:visible;opacity:1}
.kicheck .punkt.leer{display:none}          /* Frage ohne Punkt: gar kein Raum */
.kicheck .punkt .marke{
  font-family:var(--display);font-size:13px;font-weight:500;
  letter-spacing:.02em;color:var(--petrol);margin-bottom:5px;
}
.kicheck .punkt .text{font-size:16px;line-height:1.55;color:var(--ink)}
@media (prefers-reduced-motion:reduce){ .kicheck .punkt{transition:none} }

/* Weiter steht rechts neben „Der Punkt", nicht unter allem. Dort ist
   der Blick ohnehin: Man liest den Punkt und geht weiter. Das Raster
   setzt den Knopf dorthin — den Knopf selbst gibt es nur einmal, auf
   dem Smartphone fällt er zurück in den Lesefluss.
   Der Fortschritt steht darunter links, statt oben in der Kopfleiste. */
.kicheck .weiterplatz{margin-top:30px}
.kicheck .fortschritt{display:flex;align-items:center;gap:14px;margin-top:30px}
@media (min-width:761px){
  .kicheck .frage .spalte{
    max-width:900px;                    /* bündig mit dem Startscreen */
    display:grid;grid-template-columns:660px auto;
    column-gap:30px;align-items:start;
  }
  .kicheck #frage-titel, .kicheck #frage-szenario, .kicheck #frage-antworten, .kicheck #frage-punkt, .kicheck .fortschritt, .kicheck .navreihe{grid-column:1}
  .kicheck .weiterplatz{
    grid-column:2;grid-row:4;           /* dieselbe Zeile wie „Der Punkt" */
    justify-self:start;margin-top:46px; /* auf die Höhe von „Der Punkt:" */
  }
}

.kicheck .navreihe{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:38px;padding-top:26px;border-top:1px solid var(--linie);
}
.kicheck .navreihe[hidden]{display:none}
@media (max-width:760px){
  .kicheck .weiterplatz .knopf{width:100%}
  .kicheck .navreihe{margin-top:24px;padding-top:22px}
  .kicheck .navreihe .knopf.leise{text-align:left;padding:4px 0}
}

/* ---------- Ergebnis ------------------------------------------ */
/* Die Auftaktzeile „Das ist der Punkt, bei dem ich bei euch anfangen
   würde." ist bewusst entfernt. Sie stand über dem Befund und nahm
   ihm den ersten Blick; „Dein Ergebnis" leistet dasselbe leiser. */
.kicheck .ergebnis{padding-top:64px}
.kicheck .hauptspalte, .kicheck .ergebniskopf{max-width:660px}
.kicheck .ergebnisgitter{display:block}
@media (min-width:981px){
  /* Name und Kernsatz laufen über die ganze Breite. Erst darunter
     teilt sich die Seite: links der Befund, rechts die Einladung.
     So beginnt der Kasten auf der Höhe des ersten Absatzes und nicht
     schon neben der Überschrift. */
  .kicheck .ergebnisgitter{
    display:grid;grid-template-columns:minmax(0,1fr) 336px;
    column-gap:72px;align-items:start;
  }
  .kicheck .ergebniskopf{grid-column:1 / -1;max-width:none}
  .kicheck .hauptspalte{max-width:none}
  /* Bewusst nicht klebend: Der Kasten ist fast so hoch wie der Befund
     und höher als ein Notebook-Fenster. Angeheftet stünde sein unteres
     Ende — Knopf und Einwilligung — dauerhaft ausserhalb des Bildes. */
  .kicheck .nebenspalte{align-self:start}
}
.kicheck .ergebnis .marke{
  font-family:var(--display);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--salbei);margin-bottom:14px;
}
.kicheck .ergebnis .vorzeile{font-size:17px;color:var(--ink);margin-bottom:10px}
.kicheck .ergebnis h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(30px,5.2vw,58px);line-height:1.06;letter-spacing:-.02em;
  color:var(--petrol);margin-bottom:20px;
}
/* Versalien nur für die starke C-Fassung: Dort ist der Name kurz und
   soll treffen. Die milderen B-Fassungen, „Es funktioniert. Noch."
   und das Sonderergebnis sind ganze Sätze und bleiben gemischt —
   sonst schriee die leisere Diagnose lauter als die deutliche. */
.kicheck .ergebnis h1.engpassname{text-transform:uppercase;letter-spacing:-.004em}
.kicheck .ergebnis .subline{
  font-family:var(--display);font-weight:300;
  font-size:clamp(19px,2.4vw,25px);line-height:1.34;color:var(--petrol);
  max-width:26ch;margin-bottom:40px;
}
.kicheck .block{padding-top:30px;margin-top:30px;border-top:1px solid var(--linie);max-width:600px}
.kicheck .block:first-of-type{border-top:0;margin-top:0;padding-top:0}
.kicheck .blocktitel{
  font-family:var(--display);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-leise);margin-bottom:16px;
}
.kicheck .block p{margin-bottom:14px;font-size:17px;line-height:1.62}
.kicheck .block p:last-child{margin-bottom:0}
.kicheck .block ul{margin:0 0 14px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.kicheck .block ul li{
  padding-left:20px;position:relative;font-size:17px;line-height:1.52;
}
.kicheck .block ul li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:1px;background:var(--salbei);
}
.kicheck .block .zitatzeile{
  font-family:var(--display);font-size:18px;line-height:1.5;color:var(--petrol);
  border-left:2px solid var(--salbei);padding:2px 0 2px 18px;margin:4px 0 16px;
}
.kicheck .block .nachsatz{color:var(--ink-leise)}

/* Die Handlung ist der Wert des Checks — sie steht abgesetzt auf
   heller Fläche, mit Überschrift im Satzbau statt als Mikro-Label. */
.kicheck .block.tat{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:4px;
  padding:28px 30px;margin-top:38px;border-top:1px solid var(--linie);
}
.kicheck .block.tat .blocktitel{
  font-family:var(--display);font-size:19px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--petrol);margin-bottom:16px;
}
@media (max-width:520px){ .kicheck .block.tat{padding:22px 20px} }

/* ---------- Opt-in -------------------------------------------- */
/* Die Schranke steht in der rechten Spalte und trägt deshalb eine
   eigene Fläche: sonst verliefe sie im Grund und wäre wieder das,
   was sie vorher war — leicht zu übersehen. Auf schmalen Schirmen
   rutscht sie unter den Befund und behält die Fläche. */
.kicheck .schranke{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:4px;
  padding:28px 28px 30px;margin-top:64px;max-width:600px;
}
.kicheck .schranke h2{font-size:23px;font-weight:300;line-height:1.25;margin-bottom:14px}
.kicheck .schranke .text{font-size:16px;line-height:1.6;color:var(--ink);margin-bottom:24px;max-width:52ch}
.kicheck .schranke .text span{display:block}
.kicheck .schranke .text span + span{margin-top:14px}
.kicheck .schranke .frage-zeile{
  font-family:var(--display);font-size:17px;line-height:1.4;
  color:var(--petrol);margin-bottom:18px;
}
.kicheck .feldreihe{display:flex;flex-direction:column;gap:14px;max-width:420px}
@media (min-width:981px){
  .kicheck .schranke{margin-top:0;max-width:none}
  .kicheck .schranke h2{font-size:22px}
  .kicheck .absender .knopf{width:100%;text-align:center;padding-left:18px;padding-right:18px}
}
.kicheck label.feld{display:flex;flex-direction:column;gap:6px}
.kicheck label.feld .bez{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.kicheck input[type=email], .kicheck .feldreihe .feld input[type=text]{
  font-family:var(--text);font-size:16px;color:var(--ink);
  padding:14px 2px;border:0;border-bottom:1px solid var(--linie-stark);
  border-radius:0;background:transparent;width:100%;
}
.kicheck input[type=email]::placeholder, .kicheck .feldreihe .feld input[type=text]::placeholder{color:var(--ink-leise)}
.kicheck input[type=email]:focus, .kicheck .feldreihe .feld input[type=text]:focus{
  outline:0;border-bottom-color:var(--petrol);box-shadow:0 1px 0 0 var(--petrol);
}
.kicheck .zustimmung{display:flex;gap:11px;align-items:flex-start;margin-top:4px}
.kicheck .zustimmung input{margin-top:4px;width:17px;height:17px;accent-color:var(--petrol);flex:0 0 auto}
.kicheck .zustimmung span{font-size:14.5px;line-height:1.5;color:var(--ink-leise)}
.kicheck .zustimmung a{color:var(--petrol)}
.kicheck .absender{margin-top:22px}
.kicheck .hinweis{margin-top:16px;font-size:14.5px;color:var(--ink-leise);min-height:1.4em}
.kicheck .hinweis.gut{color:var(--petrol)}

/* Sichtbar als Gerüst markiert — nichts hiervon ist fertiger Text. */
.kicheck .platzhalter{
  border:1px dashed var(--linie-stark);border-radius:4px;
  padding:22px 24px;margin:34px 0;max-width:600px;background:transparent;
}
.kicheck .platzhalter .pl-titel{
  font-family:var(--display);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-leise);margin-bottom:8px;
}
.kicheck .platzhalter .pl-text{font-size:16px;line-height:1.55;color:var(--ink-leise)}

.kicheck .person{margin-top:34px}
.kicheck .person .name{font-family:var(--display);font-size:15.5px;color:var(--petrol);line-height:1.35}
.kicheck .person .rolle{font-size:14px;color:var(--ink-leise);line-height:1.4}

.kicheck .neustart{margin-top:44px}

@media (max-width:520px){
  .kicheck .schranke{margin-top:68px}
  .kicheck .start{padding-top:38px}
  .kicheck .start h1{letter-spacing:-.015em}
  .kicheck .kernsatz{font-size:17.5px;margin-top:16px}
  .kicheck .rahmen{margin:26px 0 24px}
  /* Auf dem Smartphone passt der zweite Satz nicht in eine Zeile.
     Der gesetzte Umbruch ergaebe eine Restzeile mit einem Wort,
     deshalb hier wieder fortlaufender Text.                        */
  .kicheck .transparenz .satz{display:inline}
  .kicheck .frage, .kicheck .ergebnis{padding-top:38px}
  .kicheck .wahl .flaeche{padding:17px 18px;grid-template-columns:22px 1fr;gap:0 12px}
}
/* Fussleiste. Die Seite laeuft auf einer leeren Vorlage ohne Theme-Fuss —
   Impressum und Datenschutz muessen deshalb von hier kommen. */
.kicheck .fussleiste{border-top:1px solid var(--linie);padding:24px 0 30px;background:var(--grund)}
.kicheck .fussleiste .innen{
  max-width:var(--masz);margin:0 auto;padding:0 22px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:13.5px;color:var(--ink-leise);
}
.kicheck .fussleiste nav{display:flex;gap:22px}
.kicheck .fussleiste a{color:var(--ink-leise);text-decoration:none;border-bottom:1px solid var(--linie-stark)}
.kicheck .fussleiste a:hover{color:var(--petrol);border-bottom-color:var(--petrol)}

/* Wegwerf-Feld gegen Bots: fuer Menschen und Screenreader nicht da. */
.kicheck .honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Der Abschluss nach dem Absenden. Im Prototyp stehen dort gestrichelte
   Platzhalter; hier stehen zwei echte Karten. Die erste fuehrt zur
   Auswertung — sie darf deshalb ruhig ein Gewicht haben. Die zweite
   erklaert die Bestaetigungsmail und bleibt bewusst leiser: sie ist
   eine Bitte, keine Huerde. */
.kicheck .nachkarte{
  border:1px solid var(--linie);border-left:3px solid var(--linie-stark);
  padding:24px 26px;margin:30px 0;max-width:600px;background:#FFFFFF;
}
.kicheck .nachkarte.gross{border-left-color:var(--petrol);margin-top:34px}
.kicheck .nachkarte .nk-titel{
  font-family:var(--display);font-size:19px;font-weight:500;line-height:1.3;
  color:var(--petrol);margin-bottom:10px;
}
.kicheck .nachkarte .nk-text{font-size:16.5px;line-height:1.6;color:var(--ink);max-width:52ch}
.kicheck .nachkarte .nk-tat{margin-top:20px}
.kicheck .nachkarte .nk-leise{margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--ink-leise)}
.kicheck .nachkarte .nk-lage{margin-top:10px;font-size:14.5px;color:var(--petrol);min-height:1.3em}
.kicheck a.knopf{text-decoration:none}
.kicheck a.knopf:hover{color:#FFFFFF}
/* Ein Knopf, der wie ein Link aussieht: die Handlung ist klein, aber
   es ist eine Handlung — deshalb ein button und kein a. */
.kicheck .alslink{
  background:none;border:0;padding:0;font:inherit;color:var(--petrol);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.kicheck .alslink:hover{color:var(--petrol-tief)}
.kicheck .alslink[disabled]{color:var(--ink-leise);cursor:default;text-decoration:none}
@media (max-width:520px){
  .kicheck .nachkarte{padding:20px 18px}
  .kicheck .nachkarte .nk-tat .knopf{display:block;text-align:center}
}