/* ==========================================================
   Verbseiten (E3) — freistehendes Paket vom 03.08.2026.
   KEINE EIGENEN WERTE: Tokens und .gtable stammen unveraendert aus
   src/styles.css, Kopfleiste und Knoepfe aus src/landing.css.
   Wer hier eine Farbe hart hinschreibt, hat denselben Fehler
   gemacht, den das Design-Gate in der App verbietet.
   ========================================================== */
:root{
  /* Flächen & Text */
  --bg:#faf6f0;          /* Cremeweiß, leicht warm */
  --bg-2:#f3ece1;        /* zweite Fläche (Leisten, Zebrastreifen) */
  --panel:#fffdfa;       /* Karten */
  --ink:#241f1b;         /* Text */
  --muted:#6e6257;       /* Sekundärtext (AA auf --bg) */
  --line:#e6dccd;        /* Linien */
  --chip:#f2eae0;        /* Chips, Füllungen, leere Balken */

  /* Markenzeichen (Davvero Logo-Konzepte, Variante 5c)
     Der Punkt ist laut Markenblatt der EINZIGE farbige Teil des Zeichens, und
     sein Ton ist festgelegt: Prozess-Cyan. Er steht deshalb als eigenes Token
     da und NICHT auf --it — das Zeichen gehört der Marke, nicht dem
     Farbschema der Sprachen. Nie Magenta dazunehmen (Regel im Markenblatt).
     Die Striche des Zeichens laufen über `currentColor` auf --ink mit und
     drehen im Dunkelmodus von selbst mit. */
  --mk-dot:#0088b0;      /* Prozess-Cyan, der Punkt im Zeichen */

  /* Sprachfarben */
  --it:#1b6e45;          /* Italien-Grün = Markenfarbe */
  --it-bright:#1f8a55;   /* Verlaufs-/Flächenvariante */
  --de:#a8501f;          /* Terracotta für Deutsch */

  /* Aktion */
  --accent:#5f6e31;      /* Oliv */
  --accent2:#48551f;     /* Oliv dunkel (Hover, Verläufe) */
  --on-accent:#fffdfa;   /* Text auf Akzentfläche */
  --ring:#7c8f3f;        /* Fokusring */

  /* Semantik */
  --good:#2c7a50;
  --warn:#9a6b12;
  --bad:#b3352c;

  /* Typografie-Skala (design §2.2) — eine Skala, keine Ad-hoc-Größen mehr. */
  /* Editorial-Skala. Die Serif-Grade sind gegenüber der ersten Fassung deutlich
     größer: Cormorant Garamond hat eine kleine x-Höhe und wirkt bei 34 px wie
     eine Sans bei 24 px — zu leise für eine Bühne. Serif darf groß sein, das ist
     der Charakter; die Sans-Grade der Bedienoberfläche bleiben ruhig. */
  --fs-display: clamp(40px, 5.2vw + 18px, 72px);  /* Bühne: Oggi, Onboarding, Abschluss */
  --fs-hero: clamp(31px, 2.6vw + 23px, 44px);     /* h1 */
  --fs-h2:   clamp(23px, 1.2vw + 19px, 28px);
  /* Lesegrad: italienischer Satz, den man LIEST statt überfliegt — Lesetext.
     Eigene Stufe, weil die Skala hier eine Lücke hatte: `--fs-h2` ist ein
     Überschriftengrad und wirkte im Fließtext übertrieben (Befund des Users,
     02.08.2026), `--fs-h3` fällt für einen ganzen Text zu klein aus. */
  --fs-read: clamp(20px, .7vw + 17px, 23px);
  --fs-h3:   19px;
  --fs-body: 18px;    /* italienischer Inhalt (Serif) */
  --fs-ui:   15px;    /* deutsche UI-Texte (Sans) */
  --fs-meta: 13px;    /* Metazeilen, Pills */
  --fs-micro:11.5px;  /* Uppercase-Labels, letter-spacing .06em */
  /* Optische Angleichung der Serif an die Sans (x-Höhe von SF Pro ≈ 0.52 em). */
  --disp-adjust:.52;
  /* Komponenten-Größe: die Zahl in .stat-tile (Serif, §4.2). */
  --fs-num:  24px;

  /* Raum-Skala (design §2.3) — ersetzt Ad-hoc-Pixel und Inline-Styles. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  /* Form */
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:20px;
  /* Zwei Stufen. Regel §2.4: Schatten NUR auf interaktiven Karten (hover-fähig)
     und Overlays. Statische Flächen bekommen eine Linie statt eines Schattens. */
  --shadow:0 1px 2px rgba(74,52,30,.07),0 10px 28px rgba(74,52,30,.07);
  --shadow-lg:0 2px 6px rgba(74,52,30,.09),0 22px 50px rgba(74,52,30,.12);

  /* Bewegung — kurz und weich, nie linear (§2.6) */
  --t-fast:120ms;
  --t:160ms;
  --t-slow:200ms;
  --t-page:140ms;                          /* der EINE Seitenübergang */
  --ease:cubic-bezier(.22,.61,.36,1);      /* sanftes Ausschwingen */
  --ease-soft:cubic-bezier(.34,.9,.34,1);  /* für Größenwechsel */

  /* Schrift */
  /* Display-Serif: Cormorant Garamond, von build.py als Base64-WOFF2 eingebettet
     (vendor/fonts/, OFL 1.1) — keine externe Ressource. Der Systemschriften-Stack
     bleibt als Rückfall dahinter: fehlt die Datei, sieht es aus wie vorher.
     Cormorant läuft klein und zart, deshalb hebt --disp-opt die optische Größe
     (font-size-adjust) auf das Niveau der UI-Sans. */
  --font-display:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,
                 "Palatino LT STD","Hoefler Text","Baskerville","Book Antiqua",Georgia,
                 "Times New Roman",serif;
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,
            "Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* Raster */
  --topbar-h:59px;   /* 10px + 38px + 10px + 1px Linie — Klebe-Offset der Reiter */
  --maxw:1060px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#16130f; --bg-2:#1c1813; --panel:#1e1a15; --ink:#efe7da; --muted:#a89a89;
    --line:#332c24; --chip:#282219;
    --it:#5fc98b; --it-bright:#79d9a0; --de:#e8a06a;
    --accent:#b7c77e; --accent2:#cddb99; --on-accent:#17140f; --ring:#cddb99;
    --good:#5fc98b; --warn:#d9ae57; --bad:#f0837a;
    /* Der Punkt wird im Dunkelmodus eine Spur heller, damit er auf der dunklen
       Fläche denselben Auftritt hat — das Markenblatt sieht dafür die
       Negativ-Fassung vor (weiße Striche, Punkt bleibt Cyan). */
    --mk-dot:#2ba6cc;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.38);
    --shadow-lg:0 2px 8px rgba(0,0,0,.45),0 24px 56px rgba(0,0,0,.5);
  }
}

/* Cormorant Garamond, OFL 1.1 (vendor/fonts/LICENSE-Cormorant.txt).
   Als Datei daneben, nicht als Base64 im Dokument: 219 Seiten × 62 KB wären
   13 MB, so sind es 46 KB, einmal geladen und dann geteilt. Kein CDN. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;
  font-display:swap;src:url(cormorant-400.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;
  font-display:swap;src:url(cormorant-600.woff2) format("woff2")}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-ui);font-size:var(--fs-ui);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto}
.lp-top{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);max-width:1080px;margin:0 auto;
}
.lp-brand{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--font-display);font-size:var(--fs-h2);
  color:var(--ink);text-decoration:none;letter-spacing:.01em;
}
.lp-brand .dot{
  width:.42em;height:.42em;border-radius:50%;background:var(--it);
  display:inline-block;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:0 var(--s5);height:44px;border-radius:var(--radius-sm);
  background:var(--accent);color:#fff;border:1px solid transparent;
  font:inherit;font-weight:600;text-decoration:none;cursor:pointer;
  transition:transform var(--t-fast) var(--ease),filter var(--t-fast) var(--ease);
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.btn.sm{height:36px;padding:0 var(--s4);font-size:var(--fs-meta)}
.btn.lg{height:52px;padding:0 var(--s6);font-size:var(--fs-h3)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--bg-2);filter:none}
.lp-accent{
  width:96px;height:3px;margin:0 auto var(--s5);border-radius:2px;
  background:linear-gradient(90deg,var(--it) 0 33.3%,var(--bg-2) 33.3% 66.6%,var(--de) 66.6% 100%);
}
/* Zahlen in Statistiken/Tabellen laufen nicht mehr auseinander. */
.stat-tile b,.counter,.oggi-big,.fc-label,.gtable td,.gtable th,
.rp-score,.meta,.pill{
  font-variant-numeric:tabular-nums;
}
.gtable-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);
  margin:var(--s3) 0;overscroll-behavior-x:contain;
}
.gtable caption{caption-side:top;text-align:left}
.gtable{border-collapse:collapse;width:100%;min-width:340px;font-size:var(--fs-ui)}
.gtable th,.gtable td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.gtable th{
  background:var(--bg-2);color:var(--muted);font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;position:sticky;top:0;
}
.gtable tr:last-child td{border-bottom:none}
.gtable tbody tr:hover td{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.gtable td.itcell{
  font-family:var(--font-display);color:var(--it);font-weight:600;font-size:16.5px;
  cursor:pointer;transition:background var(--t-fast) var(--ease);
}
.gtable td.itcell:hover{background:color-mix(in srgb,var(--it) 10%,transparent)}
.gtable td.wrap{white-space:normal;min-width:14ch;max-width:34ch;line-height:1.45}
/* Abdeckungs-Matrix: Kopfspalte, zentrierte Zellen, Summenzeile. */
.gtable th.c,.gtable td.c{text-align:center}
.gtable td.rowhead{font-weight:600;white-space:nowrap}
.gtable tr.sum td{font-weight:700;border-top:1px solid var(--line)}

/* --- Gerüst -------------------------------------------------------------- */
.vb-main{max-width:840px;margin:0 auto;padding:var(--s5) var(--s5) var(--s7)}
.vb-krume{font-size:var(--fs-meta);color:var(--muted);margin-bottom:var(--s5)}
.vb-krume a{color:var(--muted);text-decoration:none}
.vb-krume a:hover{color:var(--accent);text-decoration:underline}
.vb-krume span[aria-current]{color:var(--ink)}
.vb-sr{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* --- Kopf ---------------------------------------------------------------- */
.vb-kopf{margin-bottom:var(--s6)}
.vb-kopf-index{text-align:center}
.vb-h1{
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-display);
  line-height:1.12;color:var(--it);margin:0;letter-spacing:-.01em;
}
.vb-h1-de{
  font-family:var(--font-ui);font-size:var(--fs-h2);color:var(--muted);
  font-weight:400;letter-spacing:0;
}
.vb-lead{
  font-size:var(--fs-h3);line-height:1.5;color:var(--ink);
  max-width:38em;margin:var(--s4) 0 0;
}
.vb-kopf-index .vb-lead{margin-left:auto;margin-right:auto}

/* --- Faktenzeile: feste Spalten, keine Flex-Verteilung.
       Genau der Fehler, der am 31.07. die Tabellenspalte wandern liess. ---- */
.vb-fakten{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:var(--s3);margin:var(--s5) 0 0;padding:var(--s4);
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius);
}
.vb-fakt dt{
  font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:2px;
}
.vb-fakt dd{margin:0;font-size:var(--fs-ui);color:var(--ink)}
.vb-fakt dd.it{
  font-family:var(--font-display);font-size:var(--fs-body);color:var(--it);
}

.vb-mess{font-size:var(--fs-meta);color:var(--muted);margin:var(--s3) 0 0}
.vb-mess b{color:var(--ink)}
.vb-grenze{display:block;margin-top:2px}

/* --- Belegsatz ----------------------------------------------------------- */
.vb-beleg{
  margin:var(--s6) 0;padding:var(--s5);background:var(--panel);
  border:1px solid var(--line);border-left:3px solid var(--it);
  border-radius:var(--radius);
}
.vb-satz-it{
  font-family:var(--font-display);font-size:var(--fs-read);color:var(--it);
  margin:0;line-height:1.35;
}
.vb-satz-de{color:var(--muted);margin:var(--s2) 0 0;font-size:var(--fs-ui)}
.vb-quelle{font-size:var(--fs-meta);color:var(--muted);margin:var(--s3) 0 0}

/* --- Zeiten -------------------------------------------------------------- */
.vb-modus{margin:var(--s6) 0 0}
.vb-h2{
  font-family:var(--font-display);font-size:var(--fs-h2);font-weight:600;
  margin:0 0 var(--s4);color:var(--ink);
}
.vb-h3{
  font-family:var(--font-display);font-size:var(--fs-h3);font-weight:600;
  margin:0 0 var(--s2);color:var(--it);
}
.vb-de-klein{
  font-family:var(--font-ui);font-size:var(--fs-meta);color:var(--muted);
  font-weight:400;margin-left:var(--s2);letter-spacing:0;
}
.vb-zus{
  font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-left:var(--s2);
}
.vb-zeiten{display:grid;gap:var(--s5)}
.vb-zeit{margin-top:var(--s4)}
.vb-zeit .gtable{min-width:0}
.vb-zeit .gtable th[scope=row]{
  color:var(--muted);font-weight:500;width:38%;font-size:var(--fs-ui);
  text-transform:none;letter-spacing:0;
}
.vb-keine{color:var(--muted)}
.vb-leer{color:var(--muted);font-size:var(--fs-ui);margin:0}

/* --- Übe-Kasten ---------------------------------------------------------- */
.vb-cta{
  margin:var(--s7) 0 0;padding:var(--s6) var(--s5);text-align:center;
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius-lg);
}
.vb-cta p{max-width:40em;margin:0 auto;color:var(--ink)}
.vb-acts{margin-top:var(--s5)}
.vb-fine{font-size:var(--fs-meta);color:var(--muted);margin-top:var(--s4)}

/* --- Nachbarn und Blättern ----------------------------------------------- */
.vb-nachbarn{margin-top:var(--s7)}
.vb-liste,.vb-gitter{
  list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3);
}
.vb-liste a,.vb-kachel a{
  display:block;padding:var(--s3) var(--s4);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  text-decoration:none;
  transition:box-shadow var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.vb-liste a:hover,.vb-kachel a:hover{
  border-color:var(--accent);box-shadow:var(--shadow);
}
.vb-liste a:focus-visible,.vb-kachel a:focus-visible,
.vb-filter:focus-visible,.vb-blatt:focus-visible,
.vb-krume a:focus-visible,.vb-foot a:focus-visible,#q:focus-visible{
  outline:2px solid var(--ring);outline-offset:2px;
}
.vb-liste .it,.vb-kachel .it{
  display:block;font-family:var(--font-display);font-size:var(--fs-body);
  color:var(--it);
}
.vb-liste .vb-de-klein,.vb-kachel .vb-de-klein{display:block;margin-left:0}

.vb-blaettern{
  display:flex;justify-content:space-between;gap:var(--s4);
  margin-top:var(--s6);font-size:var(--fs-ui);
}
.vb-blatt{color:var(--muted);text-decoration:none}
.vb-blatt:hover{color:var(--accent)}
.vb-blatt .it{font-family:var(--font-display);color:var(--it)}
.vb-rechts{margin-left:auto;text-align:right}
.vb-pfeil{color:var(--muted)}

/* --- Übersicht ----------------------------------------------------------- */
.vb-werkzeug{margin:var(--s6) 0 var(--s5);text-align:center}
.vb-suchfeld{display:block;max-width:420px;margin:0 auto}
#q{
  width:100%;height:44px;padding:0 var(--s4);font:inherit;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.vb-filter-reihe{
  display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;
  margin-top:var(--s4);
}
.vb-filter{
  height:36px;padding:0 var(--s4);font:inherit;font-size:var(--fs-meta);
  color:var(--ink);background:var(--chip);border:1px solid transparent;
  border-radius:999px;cursor:pointer;
}
.vb-filter:hover{border-color:var(--line)}
.vb-filter.ist-an{background:var(--it);color:#fff}
.vb-zaehler{
  font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:var(--s4) 0 0;
}
.vb-noscript{list-style:none;padding:0;margin:var(--s4) 0 0;
  columns:2;font-size:var(--fs-ui)}

/* --- Fuß ----------------------------------------------------------------- */
.vb-foot{
  max-width:840px;margin:0 auto;padding:var(--s6) var(--s5) var(--s7);
  border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-meta);
}
.vb-foot a{color:var(--muted)}

@media (max-width:719px){
  .vb-main{padding:var(--s4)}
  .vb-h1{font-size:var(--fs-hero)}
  .vb-blaettern{flex-direction:column}
  .vb-rechts{margin-left:0;text-align:left}
  .vb-noscript{columns:1}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}