/* ==========================================================================
   funnel.css — Aussehen des Anfrage-Funnels
   --------------------------------------------------------------------------
   Farben, Schriften, Radien und die Spaltenbreite stehen NICHT hier, sondern
   in funnel.config.js unter `theme`. Sie kommen als CSS-Variablen herein,
   bevor die Seite gezeichnet wird. Die Werte unten sind nur Rückfall-
   positionen, falls das Skript einmal nicht lädt.

   ---------------------------------------------------------------------------
   DIE VIER REGELN, NACH DENEN DIESE DATEI GEBAUT IST
   ---------------------------------------------------------------------------
   1. EIN Bildschirm, EINE Hauptsache.
      Pro Schritt ist genau ein Text die Überschrift: die Frage. Alles
      andere ordnet sich unter. Deshalb steht die Seitenüberschrift
      standardmäßig nur im Browsertab (header.show in der Config).

   2. Eine Zustandsänderung ändert EINE Eigenschaft, nicht vier.
      Was beim Überfahren heller wird UND sich hebt UND einen Schatten
      bekommt UND den Rahmen färbt, wirkt nicht aufwendig, sondern unruhig.

   3. Flächen bleiben durchsichtig, Struktur kommt aus Abständen.
      Kein Kasten im Kasten. Die einzigen gerahmten Dinge sind die, die
      man anfasst: Antwortzeilen und Eingabefelder.

   4. Abstände kommen aus der Leiter unten (--s1 … --s5), nie aus
      Einzelwerten. Gleichartige Dinge bekommen denselben Abstand —
      genau daran erkennt das Auge eine Ordnung.
   ========================================================================== */

:root{
  color-scheme: dark;

  --ground:#06090F; --ground-2:#090D15;
  --line:rgba(216,228,244,.10); --line-2:rgba(216,228,244,.22);
  --text:#EEF2F8; --text-2:#C4D0DE; --text-3:#97A6B8;
  --copper:#E09455; --copper-2:#F6BA86; --copper-3:#FFD6AE;
  --copper-dim:rgba(224,148,85,.12); --copper-line:rgba(224,148,85,.32);
  --copper-fill:rgba(224,148,85,.07);
  --ok:#54C08A; --err:#F08A7A; --err-line:rgba(240,138,122,.45);
  --btn-1:#F6BA86; --btn-2:#E09455; --btn-fg:#2A1608;

  --sans:"Schibsted Grotesk",ui-sans-serif,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Newsreader",ui-serif,Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --r-xs:5px; --r-sm:6px; --r-md:8px; --r-pill:100px;
  --t-fast:.2s; --t-mid:.4s; --ease:cubic-bezier(.16,1,.3,1);

  --col:560px;
  --ls-lab:.16em;

  /* ---- Die Abstandsleiter --------------------------------------------
     s1  zusammengehörig  (Überschrift → Hilfstext, Beschriftung → Feld)
     s2  eng              (Zeile zu Zeile, Block dicht am Fragekopf)
     s3  Standard         (Block zu Block innerhalb eines Schritts)
     s4  Absatz           (Inhalt → Handlungsknopf)
     s5  Kapitel          (Seitenrand oben/unten)                       */
  --s1:6px;
  --s2:10px;
  --s3:22px;
  --s4:32px;
  --s5:clamp(26px, 3.4vw, 42px);
}

*,*::before,*::after{ box-sizing:border-box; }
*{ -webkit-text-size-adjust:100%; }
html{ color-scheme:dark; }

/* Der Grund des Dokuments trägt die FUSSZEILEN-Farbe, Kopf und Inhalt
   legen ihre eigene darüber. Dadurch schließt das dunklere Band der
   Fußzeile nahtlos bis zum unteren Fensterrand an — die Fußzeile muss
   nicht mehr an den Boden geheftet werden und rückt direkt unter den
   Knopf. Auf kurzen Schritten verschwindet damit die große Lücke, ohne
   dass unten eine fremde Fläche stehen bleibt.                        */
body{
  margin:0; background:var(--ground-2); color:var(--text);
  font-family:var(--sans); font-size:1.04rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  min-height:100dvh; display:flex; flex-direction:column;
}


.f-nav, .f-main{ background:var(--ground); }
img,svg,video{ max-width:100%; }
svg{ display:block; }
h1,h2{ margin:0; font-weight:700; letter-spacing:-.03em; line-height:1.15; text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
[hidden]{ display:none !important; }
/* Der Fokusring folgt der Rundung des Elements, das er umschließt.
   Deshalb wird hier KEIN border-radius gesetzt: sonst bekäme jedes Feld
   beim Anspringen mit der Tastatur kurz eine andere Ecke als im Ruhe-
   zustand. Nur Verweise haben keine eigene Rundung — sie bekommen die
   kleinste aus dem System.                                            */
:focus-visible{ outline:2px solid var(--copper); outline-offset:3px; }
a:focus-visible{ border-radius:var(--r-xs); }

.wrap{ width:100%; margin-inline:auto; padding-inline:24px; }
.f-col{ max-width:calc(var(--col) + 48px); }

/* Das Lockfeld für Bots. Bewusst NICHT display:none — das erkennen viele
   Bots und lassen das Feld dann leer. Aus dem Bild geschoben wirkt es für
   ein Skript wie ein ganz normales Pflichtfeld.                          */
.f-hp{ position:absolute; left:-9999px; top:auto;
       width:1px; height:1px; overflow:hidden; }

/* Nur für Screenreader */
.vh,
.f-head--quiet{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ==========================================================================
   Kopfzeile — auf allen drei Schritten identisch
   --------------------------------------------------------------------------
   Marke links, Ansprechpartner rechts. Sie ändert sich nie: der Besucher
   soll auf jedem Schritt sehen, dass er bei derselben Person ist.
   ========================================================================== */
.f-nav{ position:sticky; top:0; z-index:40; background:rgba(6,9,15,.92);
        border-bottom:1px solid var(--line); }
@supports (backdrop-filter:blur(8px)){
  .f-nav{ backdrop-filter:saturate(140%) blur(10px); }
}
.f-nav__in{ display:flex; align-items:center; justify-content:space-between;
            gap:16px; height:68px; max-width:1180px; }

/* Die Unterstreichung hängt absolut UNTER dem Schriftzug und zählt deshalb
   nicht zur Höhe. Ohne Ausgleich säße die Marke optisch zu hoch. Das
   Polster unten macht die Box so hoch, wie die Marke wirklich aussieht —
   dadurch zentriert flexbox den ganzen Schriftzug samt Strich.          */
.brand{ display:flex; align-items:center; min-height:44px;
        padding-bottom:.5em; flex:0 1 auto; min-width:0; }

/* Wird es eng, schrumpft der Schriftzug — er wird NICHT gekürzt.
   Die Kurve ist gemessen, nicht geschätzt: der Schriftzug belegt 11,93 px
   Breite je 1 px Schriftgröße, dazu mobil 0,3 em für den Überstand des
   Unterstrichs. Neben dem Ansprechpartner bleibt (Fensterbreite − 192 px)
   übrig; geteilt durch 12,23 ergibt das die größtmögliche Schrift.     */
.brand__name{ position:relative; font-weight:700;
              font-size:clamp(.6rem, calc(7.7vw - 15px), 1rem);
              letter-spacing:-.03em; margin-right:.85em; white-space:nowrap; }
.brand__name span{ color:var(--text-3); font-weight:500; }
.brand__ul{ position:absolute; overflow:visible; left:0; top:100%;
            width:106.45%; height:.954em; margin-top:-.182em; }
.brand__ul path{ fill:none; stroke:var(--copper); stroke-width:1.3;
                 stroke-linecap:round; stroke-linejoin:round; }
.brand__dot{ fill:var(--copper-2); stroke:none; }

/* Der Ansprechpartner. Kein Rahmen, keine Fläche.
   flex:none ist wichtig: mit min-width:0 würde der Flex-Algorithmus den
   Block schrumpfen, der nowrap-Text aber trotzdem in voller Länge
   herauslaufen. Der Platz kommt stattdessen von der Marke.             */
.f-who{ display:flex; align-items:center; gap:11px; flex:none; }
/* Kein overflow:hidden — sonst würde der Punkt unten rechts abgeschnitten.
   Stattdessen rundet das Bild sich selbst.                              */
.f-who__ph{ position:relative; flex:none; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; background:var(--copper-dim);
  border:1px solid var(--copper-line); color:var(--copper-2);
  font-weight:600; font-size:.82rem; letter-spacing:.01em; }
.f-who__ph img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.f-who--dot .f-who__ph::after{ content:""; position:absolute;
  right:0; bottom:0; width:12px; height:12px; border-radius:50%;
  background:var(--ok); border:2.5px solid var(--ground);
  box-shadow:0 0 0 1px rgba(6,9,15,.6); }

.f-who__txt{ min-width:0; display:block; }
.f-who__name{ display:block; font-weight:600; font-size:.94rem;
              letter-spacing:-.015em; line-height:1.3; white-space:nowrap; }
.f-who__meta{ display:flex; align-items:center; gap:9px; margin-top:1px;
              font-size:.8rem; color:var(--text-3); line-height:1.35;
              white-space:nowrap; }
.f-who__meta:empty{ display:none; }
.f-who__on{ display:inline-flex; align-items:center; gap:6px; color:var(--ok); }
.f-who__on i{ width:6px; height:6px; border-radius:50%; background:var(--ok);
              box-shadow:0 0 0 3px rgba(84,192,138,.16); flex:none; }

@media (max-width:760px){
  .f-nav__in{ height:60px; gap:10px; }
  .brand__name{ margin-right:.3em; }
  .f-who{ gap:10px; }
  .f-who__ph{ width:40px; height:40px; }
  .f-who__name{ font-size:.88rem; }
  .f-who__meta{ font-size:.75rem; }
  .f-who--dot .f-who__ph::after{ width:11px; height:11px; border-width:2px; }
}
@media (max-width:520px){
  .wrap{ padding-inline:16px; }
  .f-nav__in{ gap:8px; }
  .f-who{ gap:9px; }
  .f-who__ph{ width:38px; height:38px; }
  .f-who__name{ font-size:.85rem; }
  .f-who__meta{ font-size:.72rem; }
}
/* Erst unter 340 px zwei Zeilen — dort müsste der Schriftzug sonst unter
   10 px fallen. Beides winzig zu machen wäre die schlechteste Lösung. */
@media (max-width:339px){
  .f-nav__in{ flex-wrap:wrap; height:auto; padding-block:9px; gap:2px 10px; }
  .brand{ flex:1 0 100%; padding-bottom:.7em; min-height:0; }
  .f-who{ flex:1 0 100%; }
  .brand__name{ font-size:1rem; margin-right:.85em; }
}

/* Die orangene Linie: der einzige Fortschrittsbalken der Seite. */
.f-prog{ position:absolute; left:0; right:0; bottom:-1px; height:2px; }
.f-prog__bar{ height:100%; width:0%; background:var(--copper);
  transition:width var(--t-mid) var(--ease); }

/* ==========================================================================
   Seite
   ========================================================================== */
.f-main{ flex:0 1 auto; padding-block:var(--s5) clamp(26px,3.4vw,42px); }

/* Auf hohen Desktop-Fenstern rutscht der Inhalt etwas nach unten, damit er
   optisch in der Mitte sitzt statt oben zu kleben und darunter eine große
   Leere zu lassen. Bewusst als Polster und nicht als Zentrierung: Polster
   kann Inhalt nie abschneiden, eine Zentrierung bei zu hohem Inhalt schon. */
@media (min-width:700px) and (min-height:820px){
  .f-main{ padding-block-start:clamp(42px, 11vh, 104px); }
}

@media (max-width:760px) {
        .f-main {
          min-height: calc(-180px + 100vh);
          min-height: calc(-180px + 100dvh); margin-bottom: 30px;
}
}

@media (min-width:761px) {
        .f-main { 
          min-height: calc(-127px + 100vh);
          min-height: calc(-127px + 100dvh);
}
}
/* Der Seitenkopf ist standardmäßig unsichtbar (siehe .f-head--quiet oben).
   Wer ihn in der Config einschaltet, bekommt diese Gestaltung.          */
.f-head{ margin-bottom:var(--s4); }
.f-head h1{ font-size:clamp(1.6rem,3vw,1.95rem); }
.f-head .f-lead{ margin-top:var(--s1); font-size:1rem; line-height:1.5;
                 color:var(--text-3); max-width:46ch; }

.f-card{ position:relative; }

/* ---- Fortschritt: 01 / 03 -----------------------------------------------
   Nur die Zahlen. Der Balken dazu stand direkt unter der orangenen Linie
   der Kopfzeile und zeigte dieselbe Information ein zweites Mal.       */
.f-meter{ font-family:var(--mono); font-size:.7rem; letter-spacing:var(--ls-lab);
  text-transform:uppercase; color:var(--text-3); line-height:1;
  margin-bottom:var(--s4); }
.f-meter b{ color:var(--copper); font-weight:500; }

/* ---- Ein Schritt --------------------------------------------------------
   flex + gap statt Einzelmargen: dadurch haben Frage, Zusagen und
   Antworten IMMER denselben Abstand, egal welcher Block vorkommt.     */
.f-step{ display:none; }
.f-step.is-active{ display:flex; flex-direction:column; gap:var(--s3);
                   animation:stepIn .34s var(--ease) both; }
@keyframes stepIn{ from{ opacity:0; transform:translate3d(0,8px,0); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .f-step.is-active{ animation:none; }
  *,*::before,*::after{ transition-duration:.001ms !important; }
}

/* Die Frage IST die Überschrift des Bildschirms — das stärkste Element. */
.f-step__head{ display:flex; flex-direction:column; gap:var(--s1); }
.f-step__title{ font-size:clamp(1.32rem,3.4vw,1.6rem); font-weight:600;
                letter-spacing:-.025em; line-height:1.25; color:var(--text); }
.f-step__hint{ font-size:.95rem; color:var(--text-3); line-height:1.5;
               max-width:44ch; text-wrap:pretty; }

/* ==========================================================================
   Zusagen — eine Zeile, kein Kasten
   --------------------------------------------------------------------------
   Vorher ein gerahmtes Dreierraster. Das war ein Kasten zu viel auf einem
   Bildschirm, der schon Antwortzeilen und Felder trägt.
   ========================================================================== */
.f-trust{ display:flex; flex-wrap:wrap; gap:4px 16px; }
.f-trust li{ display:flex; align-items:center; gap:6px;
  font-size:.8rem; color:var(--text-3); line-height:1.35; white-space:nowrap; }
.f-trust svg{ flex:none; width:11px; height:11px; }

/* Die Zusagen gehören zur Erklärung, nicht zum Formular. Deshalb rücken
   sie dicht an den Fragekopf heran (s2 statt s3) — der volle Abstand
   bleibt für den Sprung zu den Eingabefeldern reserviert. So liest sich
   Schritt 2 als zwei Blöcke statt als drei.                            */
.f-step__head + .f-trust{ margin-top:calc(var(--s2) - var(--s3)); }
.f-trust svg path{ fill:none; stroke:var(--copper); stroke-width:2.4;
                   stroke-linecap:round; stroke-linejoin:round; }

/* ==========================================================================
   Antwortzeilen
   --------------------------------------------------------------------------
   Die ganze Zeile ist der Knopf (es ist ein <label>). Keine Füllung im
   Ruhezustand, nur eine Haarlinie; die Markierung sitzt rechts, weit vom
   Text weg. Ausgewählt: kupferner Rahmen, ein Hauch Fläche, gefüllter
   Punkt. Überfahren ändert nur die Rahmenfarbe.
   ========================================================================== */
.f-opts{ display:grid; gap:9px; }
.f-opts[data-cols="2"]{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:620px){ .f-opts[data-cols="2"]{ grid-template-columns:1fr; } }

.f-opt{ position:relative; display:flex; align-items:center; gap:18px;
  justify-content:space-between; padding:13px 18px; min-height:52px;
  cursor:pointer; background:transparent;
  border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .13s ease-in-out, background-color .13s ease-in-out; }
.f-opt:hover{ border-color:var(--line-2); }
.f-opt input{ position:absolute; opacity:0; width:1px; height:1px; }

.f-opt__txt{ min-width:0; }
.f-opt__label{ display:block; font-weight:500; letter-spacing:-.012em;
               line-height:1.35; font-size:1rem; color:var(--text); }
.f-opt__desc{ display:block; margin-top:2px; font-size:.88rem;
              line-height:1.45; color:var(--text-3); font-weight:400; }

.f-opt__mark{ position:relative; flex:none; width:20px; height:20px;
  display:grid; place-items:center;
  border:1px solid var(--line-2); background:transparent;
  transition:border-color .13s ease-in-out, background-color .13s ease-in-out; }
.f-opt--single .f-opt__mark{ border-radius:50%; }
.f-opt--multi  .f-opt__mark{ border-radius:var(--r-xs); }
.f-opt:hover .f-opt__mark{ border-color:rgba(216,228,244,.34); }

/* Einfachauswahl = Radio: ein gefüllter Punkt, kein Haken.
   Das ist das Zeichen, das jeder für „genau eine Antwort" gelernt hat. */
.f-opt--single .f-opt__mark svg{ display:none; }
.f-opt--single .f-opt__mark::after{ content:""; width:9px; height:9px;
  border-radius:50%; background:var(--copper-2);
  transform:scale(0); transition:transform .15s var(--ease); }
.f-opt--single:has(input:checked) .f-opt__mark{ border-color:var(--copper); }
.f-opt--single:has(input:checked) .f-opt__mark::after{ transform:scale(1); }

/* Mehrfachauswahl = Haken im gefüllten Kästchen */
.f-opt--multi .f-opt__mark svg{ width:11px; height:11px; opacity:0;
  transition:opacity .13s ease-in-out; }
.f-opt--multi .f-opt__mark svg path{ stroke:var(--btn-fg); stroke-width:2.8;
  stroke-linecap:round; stroke-linejoin:round; fill:none; }
.f-opt--multi:has(input:checked) .f-opt__mark{
  background:var(--copper-2); border-color:var(--copper-2); }
.f-opt--multi:has(input:checked) .f-opt__mark svg{ opacity:1; }

.f-opt:has(input:checked){ border-color:var(--copper); background:var(--copper-fill); }
.f-opt:has(input:focus-visible){ outline:2px solid var(--copper); outline-offset:3px; }

/* ==========================================================================
   Skala (bleibt für eigene Schritte verfügbar)
   ========================================================================== */
.f-scale{ display:grid; gap:9px; }
@media (min-width:560px){
  .f-scale{ grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); }
}
.f-scale__opt{ position:relative; display:flex; flex-direction:column; gap:4px;
  justify-content:center; padding:14px 16px; min-height:62px; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .13s ease-in-out, background-color .13s ease-in-out; }
@media (min-width:560px){ .f-scale__opt{ align-items:center; text-align:center; } }
.f-scale__opt:hover{ border-color:var(--line-2); }
.f-scale__opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.f-scale__short{ display:block; font-family:var(--mono); font-size:.66rem;
  letter-spacing:var(--ls-lab); text-transform:uppercase; color:var(--text-3);
  transition:color .13s ease-in-out; }
.f-scale__label{ display:block; font-weight:500; letter-spacing:-.012em;
  line-height:1.35; font-size:1rem; color:var(--text); text-wrap:balance; }
.f-scale__opt:has(input:checked){ border-color:var(--copper); background:var(--copper-fill); }
.f-scale__opt:has(input:checked) .f-scale__short{ color:var(--copper); }
.f-scale__opt:has(input:focus-visible){ outline:2px solid var(--copper); outline-offset:3px; }

/* ==========================================================================
   Eingabefelder
   --------------------------------------------------------------------------
   Das Feld ist HELLER als der Grund, nicht dunkler: ein dunkleres Feld
   liest sich als Loch, eine hellere Fläche als etwas, in das man schreibt.
   ========================================================================== */
.f-fields{ display:grid; gap:var(--s3); grid-template-columns:repeat(2,minmax(0,1fr)); }
.f-field{ grid-column:span 2; }
@media (min-width:560px){ .f-field--half{ grid-column:span 1; } }
@media (max-width:559px){ .f-fields{ grid-template-columns:1fr; } .f-field{ grid-column:auto; } }

/* Beschriftung und Feld sind EIN Ding, keine zwei. Deshalb der engste
   Schritt der Leiter (s1) — derselbe Abstand wie zwischen Überschrift
   und Hilfstext. Der nächstgrößere Sprung (s3) trennt dann Feld von
   Feld; erst dadurch liest sich eine Feldreihe als Reihe.            */
.f-field__label{ display:flex; align-items:baseline; gap:7px; margin-bottom:var(--s1);
  font-size:.9rem; font-weight:500; color:var(--text-2); }
.f-field__opt{ font-size:.8rem; color:var(--text-3); font-weight:400; }

.f-input,.f-select,.f-textarea{
  width:100%; min-height:52px; padding:13px 15px;
  background:rgba(216,228,244,.05); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .13s ease-in-out, background-color .13s ease-in-out;
  font-size:1rem; line-height:1.4; }
.f-textarea{ min-height:112px; resize:vertical; line-height:1.6; }
.f-input::placeholder,.f-textarea::placeholder{ color:var(--text-3); opacity:.7; }
.f-input:hover,.f-select:hover,.f-textarea:hover{
  border-color:var(--line-2); background:rgba(216,228,244,.068); }
.f-input:focus,.f-select:focus,.f-textarea:focus{
  outline:none; border-color:var(--copper); background:rgba(216,228,244,.075); }

.f-select{ appearance:none; cursor:pointer; padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2397A6B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:12px 8px; }
/* Nur die Farbe ändern, sonst verschwindet der Pfeil beim Überfahren. */
.f-select:hover,.f-select:focus{ background-color:rgba(216,228,244,.068); }
.f-select option{ background:#0D121C; color:#EEF2F8; }

.f-tel{ display:flex; gap:9px; }
.f-tel .f-select{ flex:0 0 106px; min-width:0; padding-right:32px;
  background-position:right 11px center; font-family:var(--mono); font-size:.88rem; }
.f-tel .f-input{ flex:1 1 auto; min-width:0; }

.f-field__help{ margin-top:6px; font-size:.82rem; line-height:1.45; color:var(--text-3); }

/* ---- Zustimmung: der eine Kasten, der bleibt ----------------------------
   Sie ist rechtlich das Gewichtigste auf dem Bildschirm und steht direkt
   über dem Absende-Knopf. Der eigene Rahmen macht sichtbar, worauf sich
   das Häkchen bezieht, und trennt sie von den Feldern darüber.

   Form und Verhalten sind dieselben wie bei den Antwortzeilen: keine
   Füllung, eine Haarlinie, beim Überfahren ändert sich nur deren Farbe,
   angehakt wird der Rahmen kupfern. Ein Kasten mehr — aber kein neues
   Formvokabular.
   ---------------------------------------------------------------------- */
.f-consent{ display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  padding:15px 17px; background:transparent;
  border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .13s ease-in-out, background-color .13s ease-in-out; }
.f-consent:hover{ border-color:var(--line-2); }
.f-consent input{ position:absolute; opacity:0; width:1px; height:1px; }
.f-consent__mark{ flex:none; width:20px; height:20px; margin-top:1px;
  display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:var(--r-xs); background:transparent;
  transition:border-color .13s ease-in-out, background-color .13s ease-in-out; }
.f-consent__mark svg{ width:11px; height:11px; opacity:0; transition:opacity .13s ease-in-out; }
.f-consent__mark svg path{ stroke:var(--btn-fg); stroke-width:2.8;
  stroke-linecap:round; stroke-linejoin:round; fill:none; }
.f-consent:has(input:checked){ border-color:var(--copper); background:var(--copper-fill); }
.f-consent:has(input:checked) .f-consent__mark{ background:var(--copper-2); border-color:var(--copper-2); }
.f-consent:has(input:checked) .f-consent__mark svg{ opacity:1; }
.f-consent:has(input:focus-visible){ outline:2px solid var(--copper); outline-offset:3px; }
/* text-wrap:pretty verhindert, dass am Ende ein einzelnes Wort allein in
   der letzten Zeile steht („… zu.") — das liest sich wie ein Versehen.  */
.f-consent__txt{ font-size:.88rem; line-height:1.5; color:var(--text-3);
                 text-wrap:pretty; }
.f-consent__txt a{ color:var(--copper-2); text-decoration:underline; text-underline-offset:2px; }

/* Fehler — färbt den Rahmen, flutet nicht die Fläche */
.f-err{ display:flex; align-items:flex-start; gap:7px; margin-top:7px;
  font-size:.86rem; line-height:1.4; color:var(--err); }
.f-err svg{ flex:none; width:14px; height:14px; margin-top:3px; }
.f-err svg circle{ stroke:currentColor; stroke-width:1.5; fill:none; }
.f-err svg path{ stroke:currentColor; stroke-width:1.7; stroke-linecap:round; fill:none; }
.is-invalid .f-input,.is-invalid .f-select,.is-invalid .f-textarea{
  border-color:var(--err-line); }
.is-invalid .f-consent{ border-color:var(--err-line); }
.is-invalid .f-consent__mark{ border-color:var(--err-line); }

/* ==========================================================================
   Automatisch ausgefüllte Felder
   --------------------------------------------------------------------------
   Safari und Chrome legen beim Autofill eine eigene, helle Fläche über das
   Feld. Auf dunklem Grund sieht das aus, als wäre etwas kaputtgegangen.
   Abschalten lässt sie sich nicht — aber sie wird eingeblendet, und ein
   Übergang von 100000s blendet sie praktisch nie ein. Sichtbar bleibt
   unsere eigene Fläche.

   Schriftfarbe und Schreibmarke brauchen eigene Zeilen: die überschreibt
   der Browser beim Autofill zusätzlich, und zwar über -webkit-text-fill-
   color, nicht über color.

   Die beiden Schreibweisen stehen absichtlich in getrennten Regeln. In
   einer gemeinsamen Liste würde ein Browser, der eine davon nicht kennt,
   die ganze Regel verwerfen.

   Preis dieses Kniffs: in einem automatisch ausgefüllten Feld hellt sich
   die Fläche beim Anklicken nicht mehr auf — der Übergang ist ja ange-
   halten. Der Rahmen wird trotzdem kupfern, das Feld zeigt also weiter,
   dass es dran ist. Das ist der bessere Tausch: die helle Autofill-
   Fläche fällt sofort auf, die fehlende Aufhellung bemerkt niemand.
   ========================================================================== */
.f-input:-webkit-autofill, .f-input:-webkit-autofill:hover,
.f-input:-webkit-autofill:focus, .f-input:-webkit-autofill:active,
.f-select:-webkit-autofill, .f-textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
  transition:background-color 100000s ease-in-out 0s,
             border-color .13s ease-in-out; }
.f-input:autofill, .f-select:autofill, .f-textarea:autofill{
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
  transition:background-color 100000s ease-in-out 0s,
             border-color .13s ease-in-out; }

.f-step__err{ margin-bottom:var(--s3); padding:13px 15px; border-radius:var(--r-sm);
  border:1px solid var(--err-line); color:var(--err);
  font-size:.92rem; line-height:1.5; }

/* ==========================================================================
   Handlungsknopf
   --------------------------------------------------------------------------
   Ein Knopf, darunter der Weg zurück. Keine Trennlinie: der Abstand
   trennt bereits, und eine weitere Linie wäre die dritte auf dem Schirm.
   ========================================================================== */
.f-actions{ display:flex; flex-direction:column; align-items:stretch; gap:2px;
            margin-top:var(--s4); }
.f-actions .btn--quiet{ align-self:center; }

/* Auf dem Handy läuft der Knopf über die volle Breite — ein Daumen trifft
   eine Leiste sicherer als eine Insel. Auf dem Desktop wäre dieselbe
   Leiste über 560 px hinweg ein oranger Balken: prominent ja, aber
   überdimensioniert. Dort bekommt er seine natürliche Breite und steht
   an derselben linken Kante wie Frage, Antworten und Felder. Eine Kante
   für alles — das ist der ruhigste Aufbau, den eine Spalte haben kann. */
@media (min-width:600px){
  .f-actions{ align-items:flex-start; gap:6px; }
  .f-actions .btn--primary{ width:auto; min-width:250px; }
  .f-actions .btn--quiet{ align-self:flex-start; margin-left:-.8em; }
}

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--sans); font-size:1rem; font-weight:600; letter-spacing:-.01em;
  padding:.85em 1.8em; border:1px solid transparent; border-radius:var(--r-pill);
  cursor:pointer; min-height:54px; width:100%; background:none;
  transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
             opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.btn svg{ width:16px; height:16px; }
.btn svg path{ fill:none; stroke:currentColor; stroke-width:2;
               stroke-linecap:round; stroke-linejoin:round; }

.btn--primary{ background:linear-gradient(168deg,var(--btn-1),var(--btn-2)); color:var(--btn-fg);
  box-shadow:0 10px 26px -18px rgba(224,148,85,.7); }
.btn--primary:hover:not(:disabled){ transform:translateY(-1px);
  box-shadow:0 16px 36px -18px rgba(224,148,85,.85); }

.btn--ghost{ border-color:var(--line-2); color:var(--text); width:auto; }
.btn--ghost:hover:not(:disabled){ border-color:var(--copper-line); color:var(--copper-2); }

/* „Zurück" — nur Text und Pfeil */
.btn--quiet{ padding:.6em .8em; min-height:44px; width:auto; color:var(--text-3);
             border-color:transparent; font-weight:500; font-size:.94rem; }
.btn--quiet:hover:not(:disabled){ color:var(--text); }
.btn--quiet svg{ width:14px; height:14px; }

.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

.btn__spin{ width:17px; height:17px; border-radius:50%;
  border:2px solid rgba(42,22,8,.28); border-top-color:var(--btn-fg);
  animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ==========================================================================
   Danke-Bildschirm
   ========================================================================== */
.f-done{ display:flex; flex-direction:column; align-items:flex-start;
         gap:var(--s3); padding-block:4px; }
.f-done__ic{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--copper-line); background:var(--copper-dim); }
.f-done__ic svg{ width:23px; height:23px; }
.f-done__ic svg path{ stroke:var(--copper-2); stroke-width:2.2; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  animation:draw .7s var(--ease) .12s both; }
/* Anfang UND Ende stehen in den Keyframes. Wird die Animation unterdrückt,
   ist der Haken trotzdem gezeichnet — er ist dann nur sofort da.        */
@keyframes draw{
  from{ stroke-dasharray:30; stroke-dashoffset:30; }
  to  { stroke-dasharray:30; stroke-dashoffset:0; }
}
@media (prefers-reduced-motion:reduce){ .f-done__ic svg path{ animation:none; } }
.f-done h2{ font-size:clamp(1.45rem,3.2vw,1.85rem); }
.f-done__lead{ font-size:1rem; line-height:1.6; color:var(--text-2); max-width:46ch;
               margin-top:calc(var(--s3) * -1 + var(--s2)); }
.f-done__pts{ display:grid; gap:10px; }
.f-done__pts li{ display:flex; align-items:flex-start; gap:11px;
  font-size:.94rem; line-height:1.5; color:var(--text-2); }
.f-done__pts svg{ flex:none; width:14px; height:14px; margin-top:4px; }
.f-done__pts svg path{ stroke:var(--copper); stroke-width:2.4; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }
.f-done .btn{ width:auto; margin-top:var(--s2); }

/* ==========================================================================
   Fußzeile
   --------------------------------------------------------------------------
   Hierher sind Telefon und E-Mail gewandert. Erreichbar für den, der sie
   sucht — unsichtbar für den, der gerade ausfüllt.
   ========================================================================== */
/* Ein eigenes, eine Spur dunkleres Band. Der Farbwechsel sagt dem Auge
   „hier endet der Funnel" deutlicher als jeder Abstand — und er kostet
   keine einzige Pixelhöhe. Alles darin ist kleiner und stiller als der
   kleinste Text im Funnel, damit nichts von hier unten mit dem Knopf
   darüber konkurriert.                                                  */
.f-foot{ flex:none; background:var(--ground-2);
  border-top:1px solid var(--line); padding-block:15px;
  font-size:.78rem; color:var(--text-3); }
.f-foot__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content: center; gap:6px 20px;
             max-width:1180px; }
.f-foot a{ display:inline-flex; align-items:center; gap:5px; min-height:26px;
  color:var(--text-3); transition:color var(--t-fast) var(--ease); }
.f-foot a:hover{ color:var(--text-2); }
.f-foot__nav{ display:flex; flex-wrap:wrap; gap:2px 16px; }
.f-foot__cts{ display:flex; flex-wrap:wrap; align-items:center; justify-content: center; gap:2px 12px; }
.f-foot__cts svg{ width:11px; height:11px; opacity:.75; }
.f-foot__cts svg path{ fill:none; stroke:var(--copper); stroke-linecap:round;
                       stroke-linejoin:round; }
.f-foot__sep{ color:var(--line-2); }
/* Die Firmierung ist Pflichtangabe, keine Information, die jemand sucht. */
.f-foot__c{ margin-left:auto; font-size:.73rem; opacity:.8; }
.f-foot__note{ display:flex; align-items:flex-start; gap:7px; flex:1 0 100%;
               font-size:.75rem; line-height:1.5; opacity:.85; }
.f-foot__note svg{ flex:none; width:12px; height:12px; margin-top:3px; }
.f-foot__note svg path{ stroke:var(--text-3); fill:none;
                        stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:760px){
  .f-foot{ padding-block:14px; }
  .f-foot__c{ margin-left:0; flex:1 0 100%; }
  .f-foot__sep{ display:none; }
  .f-foot__cts{ flex:1 0 100%; gap:2px 14px; }
}

.f-nojs{ padding:20px; border:1px solid var(--copper-line); border-radius:var(--r-sm);
  line-height:1.6; margin-bottom:var(--s4); }
.f-nojs a{ color:var(--copper-2); text-decoration:underline; text-underline-offset:2px; }