/* =====================================================================
   TERMINSEITE — mehrstufiges Formular
   Nutzt die Tokens aus styles.css. Nur was hier eigen ist, steht hier.
   ===================================================================== */

.terminseite{min-height:100svh;display:flex;flex-direction:column}

/* --- Schmale Kopfzeile: kein volles Menue, das lenkt im Formular ab --- */
/* Nur das Logo, mittig. Kein Zurueck-Link, kein Menue — im Formular soll
   nichts vom Ausfuellen ablenken. Das Logo bleibt als Ausweg. */
.tkopf{
  position:relative;z-index:2;flex:none;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,2vw,24px) clamp(18px,3vw,40px) clamp(8px,1.4vw,16px);
}
.tkopf__marke img{height:20px;width:auto;display:block;opacity:.9}

/* --- Buehne --- */
.tmain{
  position:relative;flex:1;
  display:grid;place-items:center;
  padding:clamp(12px,2vw,32px) clamp(18px,4vw,40px) clamp(48px,7vw,90px);
}
.dotfield--termin{
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 35%,transparent 100%);
          mask-image:radial-gradient(120% 90% at 50% 40%,#000 35%,transparent 100%);
}

/* --- Die Karte --- */
.tkarte{
  position:relative;z-index:1;width:min(100%,620px);
  border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,44px);
  background-color:var(--surface);
  background-image:radial-gradient(rgba(20,18,15,.05) 1px,transparent 1px);
  background-size:16px 16px;
  border:1px solid rgba(var(--accent-rgb),.30);
  box-shadow:0 34px 70px -46px rgba(80,60,20,.55);
}

/* --- Fortschritt --- */
.tfortschritt{display:flex;align-items:center;gap:14px;margin-bottom:clamp(24px,3vw,34px)}
.tfortschritt__bahn{
  flex:1;height:3px;border-radius:2px;overflow:hidden;
  background:rgba(20,18,15,.08);
}
.tfortschritt__bahn i{
  display:block;height:100%;width:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--accent-light),var(--accent-deep));
  transform-origin:left center;scale:0 1;
  transition:scale .45s var(--ease);
}
.tfortschritt__zahl{
  color:var(--ink-faint);font-size:12.5px;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.tfortschritt__zahl b{color:var(--accent-ink);font-weight:600}

/* --- Schritte ---------------------------------------------------------
 * Bewusst einfach gehalten: es ist immer genau EIN Schritt im Fluss.
 * Der alte blendet aus, wird ausgehaengt, der neue kommt herein. Kein
 * Uebereinanderlegen, keine Richtungslogik — nur Deckkraft und ein
 * kleiner Hub nach oben. Was dabei bleibt, ist die Hoehenfuehrung der
 * Karte (siehe js/termin.js): ohne sie springt die Karte im Moment des
 * Wechsels, und genau das laesst ein Formular hakelig wirken.
 *
 * Die Zeiten hier und die Konstanten in termin.js gehoeren zusammen:
 * AUS = 150ms (Deckkraft raus), EIN = 280ms (Hub + Hoehe).
 */
.tschritt{
  display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);
  opacity:0;translate:0 10px;
  transition:opacity .15s linear,translate .28s var(--ease);
}
.tschritt.ist-aktiv{opacity:1;translate:0 0}
/* `hidden` allein reicht nicht: die eigenen display-Regeln unten haben
   mehr Gewicht als die Voreinstellung des Browsers. */
.tschritt[hidden],#tform[hidden],.tfortschritt[hidden]{display:none}

/* Waehrend die Karte ihre Hoehe nachfuehrt, ist der neue Schritt schon
   in voller Laenge da. Ohne diese Klammer haengt er unten aus der Karte
   heraus — bei den langen Fragen um ueber 100px. Die 6px Luft sorgen
   dafuer, dass dabei die abgesetzte Outline des Buttons (4px) nicht
   angeschnitten wird. */
#tform{padding-bottom:6px}
#tform.fuehrt{overflow:hidden}

/* Der Inhalt darf notfalls fuer sich scrollen — die Navigation bleibt
   dabei unten stehen und ist immer erreichbar. */
.tschritt__inhalt{
  display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);
  min-height:0;
}

.tschritt__titel{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(23px,2.7vw,31px);line-height:1.18;letter-spacing:-.02em;
  color:var(--ink);margin:0;
  /* `balance` gleicht die Zeilenlaengen an — bei "Welche Herausforderungen
     stehen Ihrem Wachstum im Weg?" zog es "Wachstum" in die naechste
     Zeile, obwohl 150px frei waren. `pretty` fuellt die Zeilen normal
     und verhindert nur einzelne Schlusswoerter. */
  text-wrap:pretty;
}
.tschritt__titel em{
  font-family:var(--font-accent);font-style:italic;font-weight:400;
  color:var(--accent-ink);font-size:1.06em;
}
.tschritt__lede{
  margin:-6px 0 0;color:var(--ink-soft);font-size:15.5px;line-height:1.55;
}
/* Fragenzaehler ueber der Ueberschrift */
.tfrage{
  margin:0 0 -8px;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);
}

/* Nur fuer Screenreader — Beschriftungen, die sichtbar in der
   Ueberschrift stehen und darunter nicht doppelt erscheinen sollen. */
.tversteckt{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- Felder --- */
.tfeld{display:grid;gap:8px;border:0;padding:0;margin:0;min-width:0}
.tlabel{
  font-size:14px;font-weight:500;color:var(--ink);
  letter-spacing:-.01em;padding:0;
}
.tpflicht{color:var(--accent-ink)}
.thinweis{margin:0;color:var(--ink-faint);font-size:13px;line-height:1.45}

.teingabe{
  width:100%;padding:14px 16px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--bg);
  font:inherit;font-size:16px;color:var(--ink);
  transition:border-color .3s var(--ease),background .3s var(--ease),
             box-shadow .3s var(--ease);
}
.teingabe::placeholder{color:var(--ink-faint);opacity:.75}
.teingabe:hover{border-color:rgba(var(--accent-rgb),.4)}
.teingabe:focus{
  outline:0;background:var(--surface);
  border-color:rgba(var(--accent-rgb),.7);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14);
}
.tfliess{resize:vertical;min-height:118px;line-height:1.5}

/* Betragsfeld mit nachgestelltem Euro-Zeichen */
.tgeld{position:relative}
.tgeld .teingabe{padding-right:42px}
.tgeld__einheit{
  position:absolute;right:16px;top:50%;translate:0 -50%;
  color:var(--ink-faint);font-size:16px;pointer-events:none;
}

/* --- Auswahl als Chips: schneller zu treffen als ein Aufklappmenue --- */
.twahl{display:flex;flex-wrap:wrap;gap:10px}
.tchip{position:relative;cursor:pointer}
.tchip input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.tchip span{
  display:block;padding:12px 24px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--bg);
  font-size:15.5px;color:var(--ink-soft);
  transition:border-color .3s var(--ease),background .3s var(--ease),
             color .3s var(--ease);
}
.tchip:hover span{border-color:rgba(var(--accent-rgb),.45);color:var(--ink)}
.tchip input:focus-visible + span{
  outline:2px solid rgba(var(--accent-rgb),.6);outline-offset:3px;
}
.tchip input:checked + span{
  background:rgba(var(--accent-rgb),.16);
  border-color:rgba(var(--accent-rgb),.65);
  color:var(--accent-ink);font-weight:500;
}

/* --- Antwortlisten -----------------------------------------------------
 * Ganze Zeilen als Klickflaeche: auf dem Handy trifft man die viel
 * sicherer als einen kleinen Radiopunkt.                              */
.tliste{display:grid;gap:9px}
.tliste--eng{gap:7px}
.topt{
  position:relative;display:flex;align-items:center;gap:13px;
  padding:13px 16px;border-radius:14px;cursor:pointer;
  border:1px solid var(--line);background:var(--bg);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.topt input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.topt__mark{
  flex:none;width:19px;height:19px;border-radius:50%;
  border:1.5px solid rgba(20,18,15,.22);background:var(--surface);
  display:grid;place-items:center;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
/* Der Punkt im Inneren wird nur aufgezogen, nicht ein- und ausgeblendet —
   das laeuft ruhiger und braucht keine zweite Ebene. */
.topt__mark::after{
  content:"";width:9px;height:9px;border-radius:50%;
  background:var(--accent-deep);scale:0;
  transition:scale .25s cubic-bezier(.34,1.4,.5,1);
}
.topt--mehr .topt__mark{border-radius:6px}
.topt--mehr .topt__mark::after{border-radius:2px;width:9px;height:9px}
.topt__text{font-size:15.5px;line-height:1.35;color:var(--ink-soft)}

.topt:hover{border-color:rgba(var(--accent-rgb),.45);background:var(--surface)}
.topt:hover .topt__mark{border-color:rgba(var(--accent-rgb),.6)}
.topt input:focus-visible ~ .topt__mark{
  outline:2px solid rgba(var(--accent-rgb),.6);outline-offset:3px;
}
.topt:has(input:checked){
  background:rgba(var(--accent-rgb),.13);
  border-color:rgba(var(--accent-rgb),.6);
}
.topt input:checked ~ .topt__mark{border-color:var(--accent-deep)}
.topt input:checked ~ .topt__mark::after{scale:1}
.topt input:checked ~ .topt__text{color:var(--ink);font-weight:500}

/* --- Fehlermeldungen: erscheinen weich, statt zu springen --- */
.tfehler{
  margin:0;color:var(--warn);font-size:13px;line-height:1.4;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .3s var(--ease),opacity .3s var(--ease);
}
.tfehler.ist-da{max-height:48px;opacity:1}
.teingabe.ist-falsch{border-color:rgba(var(--warn-rgb),.7);
  box-shadow:0 0 0 4px rgba(var(--warn-rgb),.12)}

/* --- Navigation -------------------------------------------------------
 * Die Buttons sind exakt die der Startseite: gefuellte Goldflaeche mit
 * der abgesetzten Outline (.btn) bzw. die helle Variante (.btn--ghost).
 * Deshalb steht hier nichts, was ihr Aussehen aendert — nur die
 * Anordnung in der Zeile.                                             */
.tnav{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  flex:none;margin-top:clamp(8px,1.2vw,14px);
}

@media(prefers-reduced-motion:reduce){
  .tschritt,.tfehler,.tfortschritt__bahn i,.topt__mark::after{transition:none}
}

/* --- Schmale Bildschirme: alles ohne Scrollen -------------------------
 * Die Seite bekommt genau die Hoehe des sichtbaren Bereichs (`dvh`,
 * damit die Browserleisten mitgerechnet werden). Die Karte fuellt den
 * Rest, die Navigation steht unten fest. Nur wenn ein Schritt wirklich
 * zu lang wird — Frage 3 hat acht Antworten — scrollt sein Inhalt fuer
 * sich; die Seite selbst nie.                                          */
@media(max-width:640px){
  .terminseite{height:100dvh;overflow:hidden}
  .tmain{
    padding:0 14px 14px;place-items:stretch;
    min-height:0;                      /* sonst waechst das Raster mit */
    /* Die Rasterzeile darf ebenfalls nicht mitwachsen: `1fr` allein hat
       als Untergrenze die Inhaltshoehe, `minmax(0,1fr)` nicht. */
    grid-template-rows:minmax(0,1fr);
  }
  .tkarte{
    width:100%;height:100%;
    /* Rasterelemente haben von Haus aus `min-height:auto` — damit war die
       Karte immer mindestens so hoch wie ihr Inhalt und `height:100%`
       blieb wirkungslos. Genau daran scheiterte die Klammer bei Frage 3. */
    min-height:0;
    display:flex;flex-direction:column;
    padding:20px 18px;border-radius:20px;
  }
  #tform{flex:1;min-height:0;display:flex}
  .tschritt{width:100%}
  .tschritt.ist-aktiv{flex:1;min-height:0}
  /* Der Inhalt nimmt den freien Platz, die Navigation rutscht damit an
     den unteren Rand — dort ist sie mit dem Daumen erreichbar und sitzt
     bei jedem Schritt an derselben Stelle. */
  .tschritt__inhalt{flex:1;min-height:0;overflow-y:auto;
    -webkit-overflow-scrolling:touch}

  .tfortschritt{margin-bottom:18px}
  .tschritt__titel{font-size:24px}
  .tschritt__lede{font-size:14.5px;line-height:1.45}
  .tfeld{gap:6px}
  .teingabe{padding:12px 14px}
  .tchip span{padding:11px 22px}
  .topt{padding:11px 14px;gap:11px}
  .topt__text{font-size:15px}
}

/* Sehr flache Fenster (Handy quer, kleine Geraete): noch enger. */
@media(max-width:640px) and (max-height:700px){
  .tschritt__titel{font-size:21px}
  .tschritt__lede{font-size:13.5px}
  .tschritt,.tschritt__inhalt{gap:12px}
  .teingabe{padding:10px 14px}
  .tchip span{padding:9px 20px}
  .tliste{gap:7px}
  .tliste--eng{gap:6px}
  .topt{padding:9px 13px}
  .tkarte{padding:16px 16px}
}