/* ===========================================================================
   DIE FUNKTIONSSEITEN - /funktionen/<slug> (v2.924.0)
   ===========================================================================
   Gehoert zu templates/funktion_seite.html; Inhalt und Begruendung stehen in
   funktion_seiten.py. Neue Datei, also nach DESIGN_SYSTEM.md §9 Regel 2:
   keine feste Farbe, nur das Woerterbuch (static/css/design-tokens.css).

   DAS AUSSEHEN FOLGT /funktionen: derselbe Kicker in Markenblau, dieselbe
   grosse Ueberschrift, dieselbe Aufnahme im Rahmen. Wer von der Uebersicht
   auf eine Funktion klickt, soll nicht das Gefuehl haben, auf einer anderen
   Seite zu landen.

   VERBUNDEN MIT: templates/funktion_seite.html, static/css/design-tokens.css,
   static/css/kopf-oeffentlich.css (setzt --gap und den klebenden Kopf),
   qa/unit/test_seiten_grundstand.py, qa/unit/test_design_system.py
   =========================================================================== */

/* ---- DER GRUNDSTAND DER SEITE ---------------------------------------------
   Diese Seite laedt design-tokens.css, aber nicht index.css - und das
   Woerterbuch DEFINIERT die Schrift nur, es wendet sie nicht an. Ohne die
   Zeilen hier stuende die Seite in der Serifenschrift des Browsers, ohne dass
   ein Test rot wird (ausfuehrlich in fach-thema.css, bewacht von
   qa/unit/test_seiten_grundstand.py). Der Link-Grundstand gehoert dazu,
   sonst sind Kopfmenue und Fuss unterstrichen. */
:root{--gap:var(--s-5);}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;background:var(--card);color:var(--ink);
  font-family:var(--font);font-size:var(--fs-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}

/* Die Symbole aus teile/thema-icons.html tragen keine Groesse - ohne diese
   Regel waere jedes 300 x 150 px gross (Voreinstellung fuer ein <svg>). */
.fs-seite .ti-ic{width:18px;height:18px;flex:none;}

.fs-seite{max-width:1120px;margin:0 auto;padding:var(--s-5) var(--gap) var(--s-8);}

/* ---- Pfad: wo bin ich ------------------------------------------------------ */
.fs-weg{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  font-size:var(--fs-sm);color:var(--muted);}
.fs-weg a{color:var(--muted);border-bottom:1px solid transparent;}
.fs-weg a:hover{color:var(--brand);border-bottom-color:var(--brand);}
.fs-weg [aria-current]{color:var(--sub);font-weight:600;}

/* ---- Kopf: Text links, Aufnahme rechts --------------------------------------- */
.fs-kopf{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--s-7);align-items:center;padding:var(--s-6) 0 var(--s-7);}
.fs-kicker{margin:0 0 var(--s-3);font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--brand);}
.fs-kopf h1{margin:0;font-size:clamp(28px,4vw,42px);line-height:1.12;
  font-weight:850;letter-spacing:-.025em;}
.fs-lead{margin:var(--s-4) 0 0;font-size:var(--fs-lg);line-height:1.6;color:var(--sub);}

.fs-knoepfe{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6);}
.fs-btn{display:inline-flex;align-items:center;justify-content:center;
  padding:var(--s-3) var(--s-5);border:1px solid transparent;border-radius:var(--r-control);
  font-size:var(--fs-md);font-weight:700;line-height:1.3;
  transition:background .15s,border-color .15s,color .15s;}
.fs-btn-p{background:var(--brand);color:var(--on-brand);box-shadow:var(--e-2);}
.fs-btn-p:hover{background:var(--brand-dk);}
.fs-btn-g{background:var(--card);color:var(--ink);border-color:var(--line);}
.fs-btn-g:hover{border-color:var(--brand);color:var(--brand);}

/* DIE AUFNAHME. Zwei davon sind Hochformat (Aufgaben 1263 x 1952, Kurs
   1445 x 2218) - in voller Hoehe waeren sie neben der Ueberschrift fast
   einen Meter lang. Deshalb begrenzt und von OBEN angeschnitten: oben steht
   in jeder Aufnahme das, was sie zeigen soll. Breite und Hoehe stehen als
   Attribut am <img>, damit der Browser den Platz vor dem Laden kennt. */
.fs-bild{margin:0;border:1px solid var(--line);border-radius:var(--r-panel);
  overflow:hidden;background:var(--surface-subtle);box-shadow:var(--e-2);}
.fs-bild img{display:block;width:100%;height:auto;max-height:520px;
  object-fit:cover;object-position:top left;}
.fs-bild figcaption{padding:var(--s-2) var(--s-4);border-top:1px solid var(--hair);
  background:var(--card);font-size:var(--fs-xs);color:var(--muted);}

/* ---- Gemeinsame Ueberschriften der Abschnitte ------------------------------- */
.fs-seite h2{margin:0 0 var(--s-4);font-size:clamp(22px,2.6vw,28px);line-height:1.2;
  font-weight:800;letter-spacing:-.02em;}

/* ---- Schritte ------------------------------------------------------------- */
.fs-schritte{padding:var(--s-7) 0;border-top:1px solid var(--hair);}
.fs-schritte ol{list-style:none;margin:0;padding:0;counter-reset:fs-schritt;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-4);}
.fs-schritte li{counter-increment:fs-schritt;padding:var(--s-5);
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface-subtle);}
.fs-schritte li::before{content:counter(fs-schritt);display:inline-flex;align-items:center;
  justify-content:center;width:30px;height:30px;margin-bottom:var(--s-3);border-radius:var(--r-pill);
  background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:var(--fs-sm);}
.fs-schritte h3{margin:0 0 var(--s-2);font-size:var(--fs-md);font-weight:800;}
.fs-schritte p{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--sub);}

/* ---- Abschnitte: Fliesstext in Lesebreite ---------------------------------- */
.fs-abschnitt{padding:var(--s-6) 0;border-top:1px solid var(--hair);max-width:760px;}
.fs-abschnitt h2{display:flex;align-items:center;gap:var(--s-3);}
.fs-abschnitt-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:var(--r-control);background:var(--brand-soft);color:var(--brand);}
.fs-abschnitt p{margin:0 0 var(--s-3);color:var(--sub);line-height:1.7;}
.fs-punkte{list-style:none;margin:var(--s-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-2);}
.fs-punkte li{display:flex;gap:var(--s-2);align-items:flex-start;color:var(--sub);}
.fs-punkte .ti-ic{width:16px;height:16px;margin-top:5px;color:var(--ok);}

/* ---- Haeufige Fragen ------------------------------------------------------- */
.fs-fragen{padding:var(--s-7) 0 var(--s-6);border-top:1px solid var(--hair);max-width:760px;}
.fs-fragen details{border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--card);margin-bottom:var(--s-3);}
.fs-fragen summary{cursor:pointer;padding:var(--s-4) var(--s-5);font-weight:700;}
.fs-fragen summary:hover{color:var(--brand);}
.fs-fragen details p{margin:0;padding:0 var(--s-5) var(--s-4);color:var(--sub);line-height:1.7;}
.fs-fragen-mehr{margin:var(--s-4) 0 0;font-size:var(--fs-sm);color:var(--muted);}
.fs-fragen-mehr a{color:var(--brand);font-weight:600;}
.fs-fragen-mehr a:hover{text-decoration:underline;}

/* ---- Weitere Funktionen ---------------------------------------------------- */
.fs-weiter{padding:var(--s-7) 0;border-top:1px solid var(--hair);}
.fs-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s-3);}
.fs-karte{display:flex;gap:var(--s-3);align-items:center;padding:var(--s-4);
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);
  transition:border-color .15s,box-shadow .15s;}
.fs-karte:hover{border-color:var(--brand);box-shadow:var(--e-1);}
.fs-karte-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:var(--r-control);background:var(--brand-soft);color:var(--brand);}
.fs-karte b{display:block;font-size:var(--fs-md);}
.fs-karte small{display:block;font-size:var(--fs-sm);color:var(--muted);}

/* ---- Schluss --------------------------------------------------------------- */
.fs-schluss{margin-top:var(--s-6);padding:var(--s-7) var(--s-5);text-align:center;
  border-radius:var(--r-panel);background:var(--surface-subtle);border:1px solid var(--line);}
.fs-schluss h2{margin-bottom:var(--s-2);}
.fs-schluss p{margin:0;color:var(--sub);}
.fs-schluss .fs-knoepfe{justify-content:center;}

/* ---- Schmaler: Aufnahme unter den Text ------------------------------------- */
@media(max-width:860px){
  .fs-kopf{grid-template-columns:1fr;gap:var(--s-6);padding-top:var(--s-5);}
  .fs-bild img{max-height:420px;}
}
@media(max-width:640px){
  .fs-seite{padding:var(--s-4) var(--s-4) var(--s-7);}
  .fs-lead{font-size:var(--fs-base);}
  .fs-knoepfe{flex-direction:column;}
  .fs-btn{width:100%;}
  .fs-bild img{max-height:340px;}
  .fs-schluss{padding:var(--s-6) var(--s-4);}
}