/* =============================================================================
   ZZ FUSS — Stil des Fussleisten-Bausteins.

   Diese Datei setzt KEINE eigene Farbwelt. Sie rechnet ausschliesslich mit den
   Marken-Merkmalen aus `/zz.css` (`--zz-*`) und leitet daraus die wenigen
   Fuss-eigenen Groessen ab. Wer hier ein Farbliteral einsetzt, hat die Marke
   verlassen (R30).

   ANKER (R3). Auf diesen Seiten gibt es GENAU EINEN Behaelter: `.wrap`. Er
   traegt `--f-max` und `--f-pad-x`. Kopfzeile, Spalten, Baender, Rechtszeile
   messen dieselbe Kante — sonst sieht die Fussleiste zufaellig aus.

   TELEFON ZUERST (R6). Der Grundsatz steht ohne Medienabfrage und ist bei
   360 px vollstaendig bedienbar. Erweitert wird ausschliesslich mit
   `min-width`. Die drei Stufen 640 / 900 / 1280 stehen als Zahl in der
   Abfrage, weil eine Medienabfrage keine Variable lesen kann — das ist der
   einzige Ort, an dem eine Zahl ohne Merkmal steht.

   SCHRIFTGROESSEN (R4). Verweise laufen auf 1rem (16 px), auch in der dichten
   Bauform. Dichte entsteht dort ueber die Zahl der Spalten, nicht ueber
   kleinere Schrift — eine Fussleiste, die man nicht lesen kann, spart nichts.
   Beschriftungen liegen bei 0.875rem (14 px), das ist die Untergrenze.
   ============================================================================= */

:root{
  /* --- Behaelter. Ein Deckel, ein Rand, fuer alles auf dieser Seite. --- */
  --f-max:1440px;
  --f-pad-x:var(--zz-s-5);          /* 24 */

  /* --- Senkrechter Rhythmus. Nur Vielfache der Haus-Skala. --- */
  --f-luft-s:var(--zz-s-6);         /* 32 */
  --f-luft-m:var(--zz-s-7);         /* 48 */
  --f-luft-l:var(--zz-s-8);         /* 64 */

  /* --- Zeilenabstand in den Verweislisten. Traegt die Beruehrflaeche. --- */
  --f-zeile-y:var(--zz-s-3);        /* 12 -> 46 px hohe Flaeche bei 1rem/1.45 */

  /* --- Flaechen. Abgeleitet, nie neu erfunden. --- */
  --f-grund:var(--zz-bg-deep);
  --f-flaeche:var(--zz-panel);
  --f-linie:var(--zz-line);
  --f-linie-stark:var(--zz-line-strong);

  /* --- Schrift --- */
  --f-verweis:1rem;                 /* 16 px, Untergrenze fuer Verweise */
  --f-klein:0.875rem;               /* 14 px, Untergrenze fuer Beschriftungen */
  --f-ziffer:0.75rem;               /* Ziffern sind Marken, kein Lesetext */

  /* --- Hoehe der klebenden Werkstatt-Leiste. Jedes Sprungziel rechnet gegen
         diesen Wert, damit der Fokus nie darunter liegt (R67). Gemessen, nicht
         geschaetzt: zwei Reihen zu 44 px plus je 8 px Luft und zwei Linien. --- */
  --f-leiste:106px;

  /* --- Text AUF dem Akzent. Die erste Fassung lief mit 78 % Deckkraft und
         ergab 4,38:1 — knapp UNTER der Schwelle fuer Fliesstext. Gemessen,
         nicht geschaetzt: bei 90 % traegt auch 12-px-Text. --- */
  --f-auf-akzent:var(--zz-cta-ink);
  --f-auf-akzent-still:rgb(255 250 218 / .90);
  --f-auf-akzent-linie:rgb(255 250 218 / .32);
}

@media (min-width:640px){ :root{ --f-pad-x:var(--zz-s-6); } }
@media (min-width:900px){ :root{ --f-pad-x:var(--zz-s-7); } }
@media (min-width:1280px){ :root{ --f-pad-x:var(--zz-s-8); } }

/* ----------------------------------------------------------------- Anker */
.wrap{ max-width:var(--f-max); margin-inline:auto; padding-inline:var(--f-pad-x); }

/* ------------------------------------------------------------ Werkstatt
   Kopfzeile und Wechsler gehoeren NICHT zur Fussleiste. Sie stehen darueber,
   damit dieselbe Datenlage in fuenf Bauformen verglichen werden kann. */
.fleiste{ position:sticky; top:0; z-index:10;
  background:var(--zz-bg); border-block-end:1px solid var(--f-linie); }
.fleiste-oben{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--zz-s-4); padding-block:var(--zz-s-2);
  border-block-end:1px solid var(--f-linie); }
.fmono{ display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; color:var(--zz-ink); text-decoration:none; }
.ftonbtn{ display:inline-flex; align-items:center; gap:var(--zz-s-2);
  min-height:44px; padding-inline:var(--zz-s-4); border-radius:var(--zz-r-pill);
  border:1px solid var(--f-linie); background:none; color:var(--zz-ink);
  font-family:var(--zz-sans); font-size:var(--f-klein); white-space:nowrap;
  cursor:pointer; transition:border-color var(--zz-t-fast) var(--zz-ease); }
.ftonbtn:hover{ border-color:var(--zz-accent); }
.fwechsel-in{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--zz-s-2);
  padding-block:var(--zz-s-3); }
.fwechsel .wl{ font-size:var(--f-klein); letter-spacing:.14em; text-transform:uppercase;
  color:var(--zz-ink-dim); margin-inline-end:var(--zz-s-3); }
.fwechsel a{ display:inline-flex; align-items:center; gap:var(--zz-s-2);
  min-height:44px; padding-inline:var(--zz-s-4); border-radius:var(--zz-r-pill);
  border:1px solid var(--f-linie); color:var(--zz-ink); font-size:var(--f-klein);
  transition:border-color var(--zz-t-fast) var(--zz-ease), background var(--zz-t-fast) var(--zz-ease); }
.fwechsel a:hover{ border-color:var(--zz-accent); color:var(--zz-ink); }
.fwechsel a[aria-current="page"]{ background:var(--zz-accent); border-color:var(--zz-accent);
  color:var(--zz-cta-ink); }
.fwechsel .wn{ font-variant-numeric:tabular-nums; opacity:.7; }
.fwechsel .wsp{ margin-inline-start:auto; }

.fkopf{ padding-block:var(--f-luft-m) var(--f-luft-s); }
.fh1{ font-family:var(--zz-display); font-weight:200; letter-spacing:-.04em;
  line-height:1.05; font-size:clamp(2.5rem,7vw,4.5rem); text-wrap:balance;
  color:var(--zz-ink); margin:0; }
.fsub{ margin:var(--zz-s-3) 0 0; max-width:52ch; color:var(--zz-ink-dim);
  text-wrap:pretty; }

/* Die Ziffer ist eine Marke, kein Lesetext — deshalb darf sie unter 14 px
   liegen. Sie steht nie allein: neben ihr steht immer der Klartext. */
.fnr{ display:inline-block; font-size:var(--f-ziffer); letter-spacing:.18em;
  font-variant-numeric:tabular-nums; color:var(--zz-ink-dim); margin:0 0 var(--zz-s-2); }

/* --------------------------------------------------------------- Fuss-Rumpf */
.fuss{ background:var(--f-grund); border-block-start:1px solid var(--f-linie-stark);
  padding-block-start:var(--f-luft-m); margin-block-start:var(--f-luft-m); }

/* Monogramm (01-CI.md Lockup 04). Die negative Laufweite von -.2em zieht auch
   HINTER dem letzten Z Raum ab — ohne den Ausgleich nach rechts steht das
   Zeichen sichtbar aus der Mitte. Deshalb gehoert `padding-right` zur Marke
   und ist keine Kosmetik. Mindestmass 24 px, das Zeichen steht allein. */
.zz{ font-family:var(--zz-logo); font-weight:700; letter-spacing:-.2em;
  padding-right:.2em; text-transform:uppercase; font-size:max(24px,1.5rem);
  color:var(--zz-ink); }

.fmarke{ display:flex; flex-direction:column; gap:var(--zz-s-2); }
.fwm{ font-size:clamp(1.75rem,5vw,2.75rem); }
.flinie{ font-size:var(--f-klein); letter-spacing:.16em; text-transform:uppercase;
  color:var(--zz-ink-dim); }

.fsh{ font-family:var(--zz-display); font-weight:400; letter-spacing:-.02em;
  font-size:1.5rem; line-height:1.15; margin:0 0 var(--zz-s-4); color:var(--zz-ink);
  text-wrap:balance; }
.fgh{ font-size:var(--f-klein); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--zz-ink-dim); margin:0 0 var(--zz-s-2);
  display:flex; align-items:baseline; gap:var(--zz-s-2); }
.fgh .fnr{ margin:0; }
.fgr + .fgr{ margin-block-start:var(--zz-s-5); }
.fah{ font-family:var(--zz-display); font-weight:400; letter-spacing:-.03em;
  font-size:clamp(1.75rem,4vw,2.5rem); line-height:1.1; margin:0; color:var(--zz-ink);
  text-wrap:balance; }
.fak{ margin-block-end:var(--zz-s-4); }
.fzweck{ margin:var(--zz-s-3) 0 0; max-width:56ch; color:var(--zz-ink-dim);
  font-size:var(--f-klein); text-wrap:pretty; }

/* --------------------------------------------------------------- Verweise
   Ruhezustand traegt die volle Textfarbe, nicht den Akzent: Terra auf dem
   dunklen Grund liegt knapp ueber 4:1 und ist fuer eine Liste aus 200 Zeilen
   zu schwach. Der Akzent uebernimmt beim Zeigen und beim Fokus. */
.fliste{ list-style:none; margin:0; padding:0; }
.fliste a{ display:flex; align-items:center; gap:var(--zz-s-2);
  padding-block:var(--f-zeile-y); color:var(--zz-ink); font-size:var(--f-verweis);
  line-height:1.45; text-decoration:none; hyphens:auto;
  transition:color var(--zz-t-fast) var(--zz-ease); }
.fliste a:hover{ color:var(--zz-accent-hi); }
.fliste a:hover .ft{ text-decoration:underline; text-underline-offset:.22em; }
.fliste .fs{ display:block; font-size:var(--f-klein); color:var(--zz-ink-dim); }
.fliste-sinn a{ flex-direction:column; align-items:flex-start; gap:var(--zz-s-1); }
.fliste-flach{ display:flex; flex-wrap:wrap; column-gap:var(--zz-s-5); }
.fliste-dicht a{ padding-block:var(--f-zeile-y); }

.fico{ display:inline-flex; width:20px; height:20px; flex:0 0 auto; }
.fico svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; }

/* ------------------------------------------------------------------ Brief */
.fbrief{ background:var(--f-flaeche); border:1px solid var(--f-linie);
  border-radius:var(--zz-r-lg); padding:var(--zz-s-5); }
.fbk{ font-size:var(--f-klein); letter-spacing:.14em; text-transform:uppercase;
  color:var(--zz-ink-dim); margin:0 0 var(--zz-s-2); }
.fbh{ font-family:var(--zz-display); font-weight:400; letter-spacing:-.03em;
  font-size:clamp(1.75rem,4vw,2.25rem); line-height:1.1; margin:0; color:var(--zz-ink);
  text-wrap:balance; }
.fbp{ margin:var(--zz-s-3) 0 0; color:var(--zz-ink-dim); max-width:44ch; text-wrap:pretty; }
.fbf{ display:flex; flex-wrap:wrap; gap:var(--zz-s-2); margin-block-start:var(--zz-s-4); }
.fbf input{ flex:1 1 14rem; min-height:44px; padding:var(--zz-s-3) var(--zz-s-4);
  background:var(--zz-bg-deep); color:var(--zz-ink); font-size:var(--f-verweis);
  border:1px solid var(--f-linie-stark); border-radius:var(--zz-r-sm); }
.fbf input::placeholder{ color:var(--zz-ink-dim); }
.fbtn{ display:inline-flex; align-items:center; gap:var(--zz-s-2); white-space:nowrap;
  min-height:44px; padding-inline:var(--zz-s-5); border:0; border-radius:var(--zz-r-sm);
  background:var(--zz-accent); color:var(--zz-cta-ink); font-family:var(--zz-sans);
  font-weight:600; font-size:0.9375rem; cursor:pointer;
  transition:background var(--zz-t-fast) var(--zz-ease); }
.fbtn:hover{ background:var(--zz-accent-hi); }
.fbfein{ margin:var(--zz-s-3) 0 0; font-size:var(--f-klein); color:var(--zz-ink-dim);
  text-wrap:pretty; }
.fnursr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  white-space:nowrap; }

/* ------------------------------------------------------------- Stufenleiter */
.fstufen{ list-style:none; margin:var(--zz-s-5) 0 0; padding:0;
  display:grid; gap:var(--zz-s-3); }
.fstufen li{ display:grid; grid-template-columns:auto 1fr; column-gap:var(--zz-s-4);
  align-items:baseline; padding-block:var(--zz-s-3);
  border-block-start:1px solid var(--f-linie); }
.fsn{ font-family:var(--zz-display); font-weight:700; font-size:1.5rem; line-height:1;
  color:var(--zz-accent); font-variant-numeric:tabular-nums; }
.fst{ font-size:var(--f-verweis); font-weight:600; color:var(--zz-ink); }
.fss{ grid-column:2; font-size:var(--f-klein); color:var(--zz-ink-dim); }
/* Vier feste Spalten zerlegten den Beisatz in der schmalen Heldenspalte in
   drei Zeilen zu je einem Wort. Die Leiter nimmt sich, was da ist: unter
   9 rem je Stufe wird umgebrochen statt gequetscht (R7). */
@media (min-width:640px){ .fstufen{ grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); } }

/* --------------------------------------------------------- Sozial + Fussrand */
.fk-fuss{ display:flex; flex-wrap:wrap; gap:var(--zz-s-5); align-items:center;
  justify-content:space-between; padding-block:var(--f-luft-s);
  border-block-start:1px solid var(--f-linie); margin-block-start:var(--f-luft-s); }
.fsoz{ display:flex; gap:var(--zz-s-2); }
.fsoz a{ display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--zz-r-pill);
  border:1px solid var(--f-linie); color:var(--zz-ink);
  transition:border-color var(--zz-t-fast) var(--zz-ease), color var(--zz-t-fast) var(--zz-ease); }
.fsoz a:hover{ border-color:var(--zz-accent); color:var(--zz-accent-hi); }
.feinst{ display:flex; flex-wrap:wrap; gap:var(--zz-s-2); }
.feinst a{ display:inline-flex; align-items:center; min-height:44px;
  padding-inline:var(--zz-s-4); border-radius:var(--zz-r-pill);
  border:1px solid var(--f-linie); color:var(--zz-ink); font-size:var(--f-klein); }
.feinst a:hover{ border-color:var(--zz-accent); }

.frecht{ border-block-start:1px solid var(--f-linie-stark); }
.frecht-in{ display:flex; flex-wrap:wrap; gap:var(--zz-s-3) var(--zz-s-5);
  align-items:center; padding-block:var(--zz-s-5); font-size:var(--f-klein);
  color:var(--zz-ink-dim); }
.frl{ display:flex; flex-wrap:wrap; gap:var(--zz-s-4); }
.frecht a{ display:inline-flex; align-items:center; min-height:44px;
  color:var(--zz-ink-dim); }
.frecht a:hover{ color:var(--zz-ink); }
.fhaus{ margin-inline-start:auto; letter-spacing:.1em; text-transform:uppercase; }

/* ======================================================== 1 · KOLONNADE ==== */
.fk-kopf{ display:grid; gap:var(--f-luft-s); padding-block-end:var(--f-luft-m); }
.fk-marke{ display:grid; gap:var(--zz-s-5); align-content:start; }
@media (min-width:900px){
  .fk-kopf{ grid-template-columns:1fr minmax(20rem,26rem); align-items:start;
    gap:var(--zz-s-8); }
}
/* Stack, don't squish (R7): die Spalten fallen 1 -> 2 -> 3 -> 5, sie werden
   nie schmaler als 12rem. */
.fk-spalten{ display:grid; gap:var(--f-luft-s); padding-block-end:var(--f-luft-m); }
@media (min-width:640px){ .fk-spalten{ grid-template-columns:repeat(2,minmax(12rem,1fr)); } }
@media (min-width:900px){ .fk-spalten{ grid-template-columns:repeat(3,minmax(12rem,1fr)); } }
@media (min-width:1280px){ .fk-spalten{ grid-template-columns:repeat(5,minmax(12rem,1fr));
  gap:var(--zz-s-6); } }

.fk-earn{ background:var(--f-flaeche); border-block:1px solid var(--f-linie); }
.fk-earn-in{ display:grid; gap:var(--f-luft-s); padding-block:var(--f-luft-m); }
@media (min-width:900px){ .fk-earn-in{ grid-template-columns:minmax(0,26rem) 1fr;
  gap:var(--zz-s-8); align-items:start; } }
.fk-earn-gruppen{ display:grid; gap:var(--zz-s-5); }
@media (min-width:640px){ .fk-earn-gruppen{
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); } }

/* ======================================================== 2 · AKKORDEON ==== */
.fa-kopf{ padding-block-end:var(--f-luft-s); }
.fa-reihe{ display:grid; }
.fa-brief{ padding-block:var(--f-luft-s); }
.fklappe{ border-block-start:1px solid var(--f-linie); }
.fa-reihe > .fklappe:last-child{ border-block-end:1px solid var(--f-linie); }
.fksum{ display:flex; align-items:center; gap:var(--zz-s-3); min-height:56px;
  padding-block:var(--zz-s-3); cursor:pointer; list-style:none;
  color:var(--zz-ink); }
.fksum::-webkit-details-marker{ display:none; }
.fkh{ font-family:var(--zz-display); font-weight:400; letter-spacing:-.02em;
  font-size:1.5rem; line-height:1.15; }
.fksum .fnr{ margin:0; }
.fksum .fico{ margin-inline-start:auto; transition:transform var(--zz-t-base) var(--zz-ease); }
.fklappe[open] .fksum .fico{ transform:rotate(45deg); }
.fkbody{ padding-block:var(--zz-s-2) var(--zz-s-5); display:grid; gap:var(--zz-s-5); }
@media (min-width:640px){ .fkbody{ grid-template-columns:repeat(2,minmax(12rem,1fr)); } }

/* Ab 900 px sind die Klappen keine Klappen mehr: sie stehen offen als Spalten.
   Das `open`-Merkmal setzt zz-fuss.js ueber dieselbe Breite — NICHT dieses
   Stylesheet. Ein per CSS aufgezwungenes `display` laesst eine geschlossene
   Klappe offen AUSSEHEN, ihr Inhalt bleibt aber unerreichbar fuer die
   Tastatur. Hier steht deshalb nur noch die Anordnung. */
@media (min-width:900px){
  .fa-reihe{ grid-template-columns:repeat(2,minmax(14rem,1fr)); gap:0 var(--zz-s-7); }
  .fklappe > .fkbody{ grid-template-columns:1fr; }
  .fksum{ pointer-events:none; }
  .fksum .fico{ display:none; }
}
@media (min-width:1280px){
  .fa-haupt{ grid-template-columns:repeat(4,minmax(12rem,1fr)); }
  .fa-rest{ grid-template-columns:repeat(5,minmax(11rem,1fr)); }
}

/* ============================================================= 3 · BAND ==== */
.fb-kopf{ display:grid; gap:var(--f-luft-s); padding-block-end:var(--f-luft-m); }
/* Oben buendig, nicht unten: mit `end` stand die Wortmarke am Fuss einer
   hohen Briefkarte und darueber blieb eine leere Flaeche von Kartenhoehe. */
@media (min-width:900px){ .fb-kopf{ grid-template-columns:1fr minmax(20rem,26rem);
  align-items:start; gap:var(--zz-s-8); } }
.fband{ border-block-start:1px solid var(--f-linie); }
.fband-in{ display:grid; gap:var(--f-luft-s); padding-block:var(--f-luft-m); }
@media (min-width:900px){ .fband-in{ grid-template-columns:minmax(0,18rem) 1fr;
  gap:var(--zz-s-8); align-items:start; } }
.fbandh{ font-family:var(--zz-display); font-weight:200; letter-spacing:-.045em;
  line-height:1; font-size:clamp(2.5rem,7vw,4.5rem); margin:0; color:var(--zz-ink);
  text-wrap:balance; }
.fband-inhalt{ display:grid; gap:var(--f-luft-s); }
@media (min-width:640px){ .fband-inhalt{ grid-template-columns:repeat(2,minmax(12rem,1fr)); } }
@media (min-width:1280px){ .fband-inhalt{ grid-template-columns:repeat(3,minmax(12rem,1fr)); } }
.fbgh{ font-size:var(--f-klein); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--zz-ink-dim); margin:0 0 var(--zz-s-2); }

/* Das Geld-Band kehrt den Ton um. Es ist das EINZIGE, das das darf — sonst
   verliert die Umkehrung ihre Aussage. */
.fband-geld{ background:var(--zz-accent); }
.fband-geld .fbandh,
.fband-geld .fst,
.fband-geld .fliste a{ color:var(--zz-cta-ink); }
.fband-geld .fnr,
.fband-geld .fbgh,
.fband-geld .fzweck,
.fband-geld .fss{ color:var(--f-auf-akzent-still); }
.fband-geld .fsn{ color:var(--zz-cta-ink); }
.fband-geld .fstufen li{ border-block-start-color:var(--f-auf-akzent-linie); }
.fband-geld .fliste a:hover{ color:var(--zz-cta-ink); }
.fband-geld .fliste a:hover .ft{ text-decoration:underline; }
.fband-geld :focus-visible{ outline-color:var(--f-auf-akzent); }

/* ====================================================== 4 · ERDGESCHOSS ==== */
.fe-kopf{ display:grid; gap:var(--zz-s-4); padding-block-end:var(--f-luft-m); }
.fe-sagt{ margin:0; max-width:60ch; color:var(--zz-ink-dim); font-size:var(--f-klein);
  text-wrap:pretty; }
.fe-brief{ padding-block:var(--f-luft-m); }
.fe-raster{ display:grid; gap:var(--f-luft-s); }
@media (min-width:640px){ .fe-raster{ grid-template-columns:repeat(2,minmax(13rem,1fr)); } }
@media (min-width:1280px){
  .fe-raster{ grid-template-columns:repeat(3,minmax(13rem,1fr)); gap:var(--zz-s-7); }
  .ffeld-breit{ grid-column:span 1; }
}
.ffeld{ border-block-start:1px solid var(--f-linie); padding-block-start:var(--zz-s-5); }
.ffeld-in{ display:grid; gap:var(--zz-s-5); }
.ffeld .fah{ font-size:1.5rem; }

/* ======================================================== 5 · VERDIENEN ==== */
.fv-hero{ background:var(--zz-accent); color:var(--zz-cta-ink); }
.fv-hero-in{ display:grid; gap:var(--f-luft-s); padding-block:var(--f-luft-l); }
@media (min-width:900px){ .fv-hero-in{ grid-template-columns:minmax(0,26rem) 1fr;
  gap:var(--zz-s-8); align-items:start; } }
.fvh{ font-family:var(--zz-display); font-weight:200; letter-spacing:-.045em;
  line-height:.98; font-size:clamp(3rem,9vw,6rem); margin:0; color:var(--zz-cta-ink);
  text-wrap:balance; }
.fv-hero .fnr,
.fv-hero .fzweck,
.fv-hero .fss{ color:var(--f-auf-akzent-still); }
.fv-hero .fsn,
.fv-hero .fst{ color:var(--zz-cta-ink); }
.fv-hero .fstufen li{ border-block-start-color:var(--f-auf-akzent-linie); }
.fv-hero :focus-visible{ outline-color:var(--f-auf-akzent); }
.fv-karten{ display:grid; gap:var(--zz-s-5); }
@media (min-width:640px){ .fv-karten{ grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); } }
.fvkarte{ background:rgb(22 20 15 / .22); border:1px solid var(--f-auf-akzent-linie);
  border-radius:var(--zz-r-lg); padding:var(--zz-s-5); }
.fvkarte .fgh{ color:var(--f-auf-akzent-still); }
.fvkarte .fliste a{ color:var(--zz-cta-ink); }
.fvkarte .fliste .fs{ color:var(--f-auf-akzent-still); }
.fv-brief{ padding-block:var(--f-luft-m); }
.fv-rest{ display:grid; gap:var(--f-luft-s); padding-block-end:var(--f-luft-m); }
@media (min-width:640px){ .fv-rest{ grid-template-columns:repeat(2,minmax(12rem,1fr)); } }
@media (min-width:1280px){ .fv-rest{ grid-template-columns:repeat(4,minmax(11rem,1fr)); } }
.fv-marke{ padding-block:var(--f-luft-s); border-block-start:1px solid var(--f-linie); }

/* --------------------------------------------------- Zustaende (R16) ------
   Das Geruest hat die Form des Ergebnisses, damit beim Austausch nichts
   springt. Kein Kreisel. */
.sk{ display:block; border-radius:var(--zz-r-xs); background:var(--f-flaeche); }
.sk-h{ height:1.5rem; width:60%; margin-block-end:var(--zz-s-4); }
.sk-z{ height:var(--f-verweis); width:80%; margin-block:var(--f-zeile-y); }
.sk-z:nth-child(3n){ width:65%; }
.sk-z:nth-child(4n){ width:72%; }
@media (prefers-reduced-motion:no-preference){
  .sk{ animation:fpuls 1.6s ease-in-out infinite; }
  @keyframes fpuls{ 0%,100%{ opacity:.55 } 50%{ opacity:.9 } }
}
.fmeldung{ padding-block:var(--f-luft-m); }
.fmeldung-h{ margin:0; font-size:var(--f-verweis); color:var(--zz-ink); max-width:60ch;
  text-wrap:pretty; }
.fmeldung-t{ margin:var(--zz-s-3) 0 0; font-size:var(--f-klein); color:var(--zz-ink-dim);
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }

/* ------------------------------------------------------------- Fussnote --- */
.fquelle{ padding-block:var(--f-luft-s); font-size:var(--f-klein);
  color:var(--zz-ink-dim); text-wrap:pretty; }

/* ------------------------------------------------------------- Fokus (R68)
   2 px, umschliesst die ganze Bedienflaeche, in beiden Toenen ueber 3:1. Der
   Versatz haelt ihn von der Nachbarzeile frei. */
:focus-visible{ outline:2px solid var(--zz-accent); outline-offset:3px;
  border-radius:var(--zz-r-xs); }

/* Sprungmarke fuer die Tastatur — sie ist der erste Halt und wird sichtbar,
   sobald sie den Fokus hat. */
.fsprung{ position:absolute; inset-block-start:var(--zz-s-2); inset-inline-start:var(--zz-s-2);
  z-index:20; padding:var(--zz-s-3) var(--zz-s-4); background:var(--zz-accent);
  color:var(--zz-cta-ink); border-radius:var(--zz-r-sm); transform:translateY(-200%); }
.fsprung:focus{ transform:none; }

/* Klebende Leiste: fokussierte Elemente duerfen nicht darunter liegen (R67). */
:target,
.fklappe,
.ffeld,
.fband{ scroll-margin-block-start:calc(var(--f-leiste) + var(--zz-s-5)); }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}