/* ==============================================================
   basis.css  ·  Besitzer: P0 Fundament  ·  v4 „Passer“ (24.09.2026)
   K01 Tokens + Basis: Plan Abschnitt 6 (Typografie) und 7 (Raster).
   Laedt direkt nach tokens.css und VOR allen Komponenten-Dateien.

   Inhalt:
     1 Schriften (@font-face, unveraendert aus v3)
     2 Boden, Fokus
     3 Typo-Rollen (H1/H2/H3, Mega, Gross, Lead, Kicker, Daten ...)
     4 Flaechen (.f-papier .f-licht .f-wash .schild), Kapitel, 12er-Raster
     5 Knoepfe (.btn .btn-1 .btn-2 .pfeil)
     6 Filmkorn + .ohne-deko (zweiter axe-Lauf, Plan 15)
     7 Reveal .zeigen (kern.js), globaler Bewegungs-Stopp
     8 Altbestand, den noch nicht umgebaute Seiten brauchen
       (.wrap .sect .sub .fliess .brotkrumen .hero .micro ...)

   Regeln (Plan 6): Achsen NUR ueber font-weight/font-stretch, nie
   font-variation-settings. Tracking groessenabhaengig, nie auf body/*.
   Keine sichtbare Schrift unter 14 px. Mono nur fuer echte Daten.
   ============================================================== */

/* ---- 1 Schriften --------------------------------------------- */
/* ===== Schriften: selbst gehostet (DSGVO) ===================== */
/* Variable Fonts statt fester Foundry-Schnitte (19.09.2026).
   Vorher: 5 Dateien mit 4 festen Gewichten (71,9 KB).
   Jetzt:  2 Dateien mit stufenlosen Achsen (77,7 KB) + Plex Mono.
   +5,8 KB fuer drei Dinge, die vorher nicht gingen:
     - jede Rolle bekommt ihren eigenen Achsenwert statt 600/700
     - Saira traegt zusaetzlich die Breitenachse (wdth) — die
       Ueberschriften laufen leicht schmaler als der Standard und
       sehen damit aus, wie es kein zweiter Bezug dieser Schrift tut
     - drei Anfragen weniger
   Achsen bewusst beschnitten (wght 400-800 / wdth 88-100 bzw.
   wght 350-700): der ungekuerzte Saira-Bezug waere 472 KB.
   Die Achsenwerte je Rolle stehen unten bei den Bauteilen. */
@font-face{font-family:"Saira";src:url("/assets/fonts/saira-var.woff2") format("woff2");font-weight:400 800;font-stretch:88% 100%;font-style:normal;font-display:swap}

@font-face{font-family:"Asap";src:url("/assets/fonts/asap-var.woff2") format("woff2");font-weight:350 700;font-style:normal;font-display:swap}

@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/plexmono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---- 2 Boden ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
.ik-sprite{position:absolute}   /* Symbol-Vorrat (ikons.php) ohne style-Attribut, fix2 */
body{
  margin:0;background-color:var(--bg);color:var(--text);
  font-family:var(--schrift-lauf);
  font-size:clamp(1.0625rem, 1rem + .2vw, 1.125rem);   /* Fliesstext 17-18 px */
  line-height:1.65;
  font-weight:405;          /* Achse statt fester Schnitt; font-weight, nie font-variation-settings */
  overflow-x:hidden;
}
p,li,dd,blockquote,figcaption{text-wrap:pretty}
/* hyphens nur im Fliesstext schmaler Spalten, nie H1/H2/Knoepfe (Plan 6) */
@media (max-width:40rem){ p,li,dd,blockquote{hyphens:auto} }
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-text)}
a:hover{text-decoration-thickness:2px}
/* Fokus: EIN Token je Buehne (tokens.css), 3 px, 2 px Abstand. */
:focus-visible{outline:3px solid var(--fokus);outline-offset:2px;border-radius:2px}
/* Helle Schrift auf Schwarz wirkt fetter: eine Spur zurueck. */
.schild p,.schild li,.schild dd,.schild blockquote{font-weight:380}

/* ---- 3 Typo-Rollen (Plan 6) -------------------------------------- */
h1{
  font-family:var(--schrift-titel);font-weight:780;font-stretch:88%;
  font-size:clamp(2rem, 1.35rem + 2.2vw, 3rem);          /* 32 / 44 / 48 px bei 390 / 1024 / 1440 */
  line-height:1.06;letter-spacing:-.012em;
  margin:0 0 1rem;max-width:22ch;text-wrap:balance;
}
h2{
  font-family:var(--schrift-titel);font-weight:720;font-stretch:92%;
  font-size:clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem);       /* 25,6 / 32,5 / 35,2 px - nie groesser als H1 */
  line-height:1.1;letter-spacing:-.008em;
  margin:0 0 .6rem;text-wrap:balance;
}
h3{
  font-family:var(--schrift-titel);font-weight:660;font-stretch:96%;
  font-size:clamp(1.2rem, 1.05rem + .5vw, 1.45rem);
  line-height:1.2;letter-spacing:0;text-wrap:balance;
}
/* Betonung (Entscheidung 3): leicht und breit gegen schmal und fett,
   Wortlaut unveraendert, im Redaktionsfeld per *...* (kh_betont()). */
h1 b,h2 b{font-weight:470;font-stretch:100%;letter-spacing:0;color:var(--accent-text)}

/* Mega: 2008, Ortsnamen, Riesenwort, km.  Gross: 4,9 und Telefon. */
.t-mega{
  font-family:var(--schrift-titel);font-weight:800;font-stretch:88%;
  font-size:clamp(4.25rem, 2.4rem + 8.2vw, 10.5rem);line-height:.8;letter-spacing:-.035em;
  margin:0;   /* sonst waere der Standardabstand 1em = bis 168 px */
}
.t-gross{
  font-family:var(--schrift-titel);font-weight:780;font-stretch:88%;
  font-size:clamp(2.4rem, 1.6rem + 3.4vw, 4.75rem);line-height:.95;letter-spacing:-.02em;
  margin:0;
}
.lead{
  font-family:var(--schrift-lauf);font-size:clamp(1.125rem, 1.05rem + .35vw, 1.3rem);
  line-height:1.55;color:var(--muted);max-width:60ch;
}
.fliesstext{max-width:66ch}
/* Kicker/Etikett: Saira-Versalien, 14 px Untergrenze, Fehlregister-Strich
   (Cyan-Balken 28x3, Magenta 2 px versetzt). Kicker, die noch das alte
   Passer-Symbol tragen (Altseiten), bekommen keinen zweiten Strich. */
.kicker,.etikett{
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;
  font-size:.875rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);
}
.kicker{display:flex;align-items:center;gap:.75rem;margin:0 0 1.2rem}
.kicker:not(:has(.passer))::before{
  content:"";flex:0 0 auto;width:28px;height:3px;
  background:var(--platte);box-shadow:2px 2px 0 var(--haar);
}
/* Mono nur fuer echte Daten: Formatlisten, Datenzeilen, km, Zeiten, Zaehler */
.daten{font-family:var(--schrift-mono);font-size:clamp(.875rem, .85rem + .1vw, 1rem);line-height:1.45;font-variant-numeric:tabular-nums}
.bildangabe{font-family:var(--schrift-lauf);font-size:.875rem;line-height:1.4;color:var(--muted)}

/* ---- 4 Flaechen, Kapitel, Raster (Plan 7) --------------------------
   Keine Haarlinien zwischen Sektionen: die Grenze ist der Flaechenwechsel
   Papier -> Leuchtkasten-Weiss -> Wash -> Ladenschild. .schild setzt den
   dunklen Token-Satz (tokens.css), EINE Inhaltsbuehne je Seite. */
.f-papier{background-color:var(--flaeche-papier);color:var(--text)}
.f-licht {background-color:var(--flaeche-licht);color:var(--text)}
.f-wash  {background-color:var(--flaeche-wash);color:var(--text)}
.schild  {background-color:var(--bg);color:var(--text)}
.kapitel     {padding-block:var(--abstand)}
.kapitel-eng {padding-block:var(--abstand-klein)}
/* 12-Spalten-Raster (Bento, Medien-Reihen). Unter 48rem eine Spalte.
   Kinder spannen ab 48rem per Voreinstellung alle 12 Spalten; das
   Bauteil setzt seine eigene Spanne (z. B. span 7 / span 5). */
.raster-12{display:grid;gap:var(--gut);grid-template-columns:minmax(0,1fr)}
.raster-12 > *{min-width:0}
@media (min-width:48rem){
  .raster-12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .raster-12 > *{grid-column:span 12}
}

/* ---- 5 Knoepfe (Plan 9.4) -----------------------------------------
   Primaer: Knopf-Flaeche der Buehne (Privat Cyan/#04222E, Gewerbe
   #80004C/Weiss, Schild Cyan). Hover (nur Maus): hebt 3 px, harter
   Passer-Schatten in der Gegenfarbe, Pfeil rueckt 4 px. Touch: :active
   scale .97. Bewegung ueber translate/scale, nie transform. */
.cta-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:48px;padding:.8rem 1.35rem;
  font-family:var(--schrift-titel);font-weight:640;font-stretch:96%;font-size:1rem;line-height:1.2;
  text-decoration:none;cursor:pointer;
  border:2px solid transparent;border-radius:var(--r-knopf);
  transition:translate var(--t-kurz) var(--ease),scale var(--t-kurz) var(--ease),
             box-shadow var(--t-kurz) var(--ease),background-color var(--t-kurz) var(--ease);
}
.btn-1{background-color:var(--knopf-fill);color:var(--on-knopf)}
.btn-2{background-color:transparent;border-color:var(--border-feld);color:var(--text)}
.btn .pfeil{display:inline-block;transition:translate var(--t-kurz) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .btn-1:hover{translate:0 -3px;box-shadow:var(--sh-passer)}
  .btn-2:hover{background-color:var(--wash)}
  .btn:hover .pfeil{translate:4px 0}
}
.btn:active{scale:.97}
.btn-klein{min-height:44px;font-size:.92rem;padding:.55rem 1.05rem}

/* ---- 6 Filmkorn (Plan 5.6) ----------------------------------------
   feTurbulence als data-URI (CSP img-src data: vorhanden), Deckkraft
   .035, multiply, hinter allem Inhalt: sichtbar nur dort, wo keine
   eigene Flaeche liegt (Papier). Keine Bewegung.
   .ohne-deko auf <html> schaltet Korn, Platten und Haarlinien ab - fuer
   den zweiten axe-Lauf (Kontrast "incomplete" wegen Deko, Plan 15). */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  opacity:.035;mix-blend-mode:multiply;
}
.ohne-deko body::after{display:none}

/* ---- 7 Reveal + Bewegungs-Stopp (Plan 9.1, 9.3) --------------------
   .zeigen setzt NUR kern.js - ohne JS ist alles sichtbar. Animiert wird
   translate, nie transform (transform gehoert Hover und WAAPI).
   Touch: nur Deckkraft. Gestaffelt ueber --verz (kern.js). */
@media (prefers-reduced-motion:no-preference){
  .zeigen{
    opacity:0;translate:0 26px;
    transition:opacity .6s var(--ease) var(--verz,0ms),translate .6s var(--ease) var(--verz,0ms);
  }
  .zeigen.ist-da{opacity:1;translate:none}
}
@media (prefers-reduced-motion:no-preference) and (hover:none){
  .zeigen{translate:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0s!important;
  }
}

/* ---- 8 Altbestand v3 (noch genutzt; Rueckbau durch die Seiten-Pakete) --- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{
  position:absolute;left:var(--gut);top:-4rem;z-index:100;
  background:var(--accent-fill);color:var(--on-accent);
  padding:.7rem 1.2rem;border-radius:4px;text-decoration:none;font-weight:600;
  transition:top .2s var(--ease);
}
.skip:focus{top:.7rem}
.hero{padding-block:clamp(2.6rem,6vw,4.6rem) clamp(2rem,5vw,3.4rem)}
.hero-lead{font-size:clamp(1.03rem,1.8vw,1.22rem);color:var(--muted);max-width:60ch;margin:0 0 2.2rem}
.micro{font-size:.92rem;color:var(--muted);margin:.9rem 0 0;max-width:56ch}
/* .sect: Haarlinie zwischen Sektionen entfaellt laut Plan 8.8 mit dem
   Flaechenwechsel - bleibt, bis die Seiten-Pakete umgestellt sind. */
.sect{padding-block:var(--sect);border-top:1px solid var(--line)}
.sect-head{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.6rem}
.sect-head .txt{min-width:0}
.sub{color:var(--muted);max-width:62ch;margin:0}
.fliess{max-width:62ch;margin:0 0 1.1rem;color:var(--muted)}
.fliess:last-child{margin-bottom:0}
.intro-text{max-width:66ch}
.brotkrumen{padding-block:0 .4rem}
/* Brotkrumen laufen in Saira-Versalien wie Kicker/Etikett, 14 px (Plan 6:
   Mono nur fuer echte Daten, nichts unter 14 px - auch auf dem Desktop). */
.brotkrumen ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;margin:0;padding:0;
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;font-size:.875rem;line-height:1.3;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.brotkrumen li+li::before{content:"/";margin-right:.5rem;color:var(--line-2)}
.brotkrumen a{color:var(--muted)}
/* Tap-Ziel >= 24 px auf allen Zeigerarten (WCAG 2.5.8; QA 25.09.2026: 22 px) */
.brotkrumen a{display:inline-flex;align-items:center;min-height:24px}
.brotkrumen a:hover{color:var(--accent-text)}
.ik{width:30px;height:30px;color:var(--accent-text);flex:0 0 auto}
.entwurf-hinweis{
  margin:0 0 1rem;padding:.55rem .85rem;border-radius:3px;font-size:.875rem;font-weight:600;
  background:#FFF4D6;color:#6B4700;border:1px dashed #B98A1E;max-width:60ch;
}

.entwurf-marke{display:inline-block;vertical-align:middle;margin-left:.4rem;padding:.05rem .45rem;border-radius:999px;
  font-family:var(--schrift-mono);font-size:.875rem;font-weight:400;background:#FFF4D6;color:#6B4700;border:1px dashed #B98A1E}
.ki-hinweis{display:inline-block;font-family:var(--schrift-mono);font-size:.875rem;line-height:1.3;color:var(--muted)}
:target{scroll-margin-top:1rem}

@media (max-width:47.99rem){
  :root{
    --gut:  1.25rem;
    --sect: clamp(2.4rem, 8vw, 3.4rem);
  }
  figcaption{font-size:.84rem;line-height:1.55}
  .hero-lead{font-size:1.08rem}
  .sect{padding-block:var(--sect)}
}
@media (pointer:coarse){
  .brotkrumen a{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:22rem){
  :root{--gut:1rem}
}