/* ═══════════════════════════════════════════════════════════════════
   Pojana v2 — Fundament
   Richtung d „So sieht sauber aus." · docs/design-spec.md Abschnitt 2–4

   Hier steht nur das System: Schriften, Farbtokens, Raster, Grundsatz.
   Komponenten liegen in css/komponenten.css, Seiteninhalt nirgends —
   der kommt ab Schritt 2 der Baureihenfolge (Spec Abschnitt 11).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Schriften (Spec 3) ─────────────────────────────────────────────
   Selbst gehostet, weil ein Aufruf zu fonts.gstatic.com die IP des
   Besuchers ohne Einwilligung an Google gibt. Die unicode-range-Teilung
   ist die von fonts/README.md: deutscher Text liegt vollständig im
   latin-Bereich, die -ext-Dateien werden dabei nie geladen.
   Vorgeladen wird im HTML nur archivo-variable-latin.woff2 — sie trägt
   die H1 und damit den LCP.                                          */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Farbtokens (Spec 2) ────────────────────────────────────────────
   Farbwelt „tinte": Tintenblau und Messing. Board-Entscheidung
   2026-11-05 (GRE-210), Werte aus docs/farben/studie.md Abschnitt 2;
   bis dahin stand hier die Petrol-Fassung, die damit abgelöst ist.
   Die Werte sind gerechnet, nicht geschätzt. Wer eine Farbe erfindet,
   rechnet ihren Kontrast neu nach — das ist in Runde 2 zweimal
   schiefgegangen.

     --cream auf --ink      16,0:1   alles
     --aqua  auf --ink      10,9:1   alles (und umgekehrt)
     --sun   auf --ink      12,2:1   alles
     --mute  auf --ink       7,9:1   alles
     --mute  auf --deep      7,1:1   alles
     --fuss  auf --ink       6,2:1   alles
     --mute-hell auf --cream 6,4:1   alles (helle Fassung)
     --aqua-d auf --cream    5,9:1   alles (helle Fassung)
     --wortmarke auf --ink   3,9:1   nur ab 24 px fett

   Zu den Namen: --aqua und --aqua-d stammen aus der Petrol-Fassung, in
   der das Signal Türkis war. Heute tragen sie Messing. Umbenannt sind
   sie nicht, weil jede Komponente, der Shader in js/wisch.js und die
   Kundenvorschau sie beim Namen lesen; die Rolle ist dieselbe.

   Regeln, die das Farbsystem tragen:
   · --aqua markiert das Freigelegte und das Handlungsangebot. Sonst nichts.
   · --sun genau einmal je Seite: die große Telefonnummer im Kontaktbereich.
     In dieser Farbwelt ist sie der kühle Gegenton zum warmen Messing.
   · Kein Verlauf als Farbträger; Verläufe nur als Schleier aus --ink.
     Wo eine Markenfarbe mit Deckung gebraucht wird, steht sie als
     color-mix() aus dem Token, nie als ausgeschriebenes rgba().
   · Halbtransparenter Text ist verboten. Abstufungen laufen über eigene
     Farbwerte und Schriftgewicht, nie über opacity.                   */

:root {
  /* Grund und Flächen */
  --ink:      #0a1230;   /* Seitengrund, Tintenblau */
  --deep:     #121c41;   /* abgesetzte Flächen: Register, Anfrage */
  --haze:     #242e5c;   /* Kanten, Trennlinien, Feldrahmen */

  /* Signatur */
  --aqua:     #e9c27d;   /* Messing: das Freigelegte und das Handlungsangebot */
  --aqua-d:   #7a5410;   /* Messing auf hellem Grund (Rechtstextseiten) */

  /* Schrift */
  --cream:    #f2efe6;   /* Lesetext und Überschriften, warmes Papierweiß */
  --mute:     #a3a8c6;   /* Nebenschrift — nur auf dunklem Grund */
  --mute-hell:#4d5280;   /* Nebenschrift auf --cream (Rechtstextseiten) */
  --fuss:     #8e94b8;   /* kleinste Fußzeilenangaben */
  --wortmarke:#6a70a6;   /* der riesige Schriftzug im Fuß */

  /* zweiter Akzent */
  --sun:      #a9d8ff;   /* nur die Telefonnummer im Kontaktbereich */

  /* Rahmen auf dunklem Grund (Knopf umrandet, Kopf-Pille, Chips) */
  --rand:     rgba(242, 239, 230, .3);

  /* Rollen — was die Komponenten benutzen. Auf der dunklen Seite sind es
     die Tokens von oben; .hell dreht sie um (Spec 2, Rechtstextseiten). */
  --grund:    var(--ink);
  --schrift:  var(--cream);
  --signal:   var(--aqua);
  --neben:    var(--mute);
}

/* Helle Fassung — Impressum und Datenschutz. Langer Fließtext auf --ink
   ist zermürbend; diese beiden Seiten laufen umgedreht: dieselbe Marke,
   heller Grund. Die Klasse gehört an <html>, damit auch der
   Überscrollbereich hell ist.

   Nebenschrift steht in --mute-hell (6,4:1 auf --cream) und nicht in
   --ink. --mute selbst ist hier verboten: auf --cream reicht es nicht.
   Damit hat die helle Fassung genau drei Schriftfarben — --ink,
   --mute-hell, --aqua-d — und kein viertes Grau (Spec 2).

   --mute-hell und --aqua-d liegen mit 1,09:1 zueinander so dicht
   beieinander, dass die Helligkeit allein sie nicht unterscheidet. Wo
   beide nebeneinander stehen, trägt der Akzent zusätzlich Unterstreichung
   oder Gewicht — siehe css/recht.css.                                 */
.hell {
  --grund:    var(--cream);
  --schrift:  var(--ink);
  --signal:   var(--aqua-d);
  --neben:    var(--mute-hell);
  --rand:     rgba(10, 18, 48, .28);
}

/* ── Typografie-Skala (Spec 3) ──────────────────────────────────────
   Alle Anzeigegrößen sind clamp() und bei 390 px und 1440 px geprüft.
   Die Breitenachse (wdth) ist Gestaltungsmittel: enger Satz 86–88 % für
   große Überschriften, 100–110 % für kleine Auszeichnungen. Nichts
   dazwischen. Kein Versalsatz — Etiketten unterscheiden sich über
   Gewicht, Sperrung und --signal, nicht über text-transform.          */

:root {
  --disp: "Archivo", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;

  --t-haupt:     clamp(3.3rem, 13.5vw, 11.5rem);  /* h1 Startseite */
  --t-unter:     clamp(2.6rem, 9vw, 6.5rem);      /* h1 Unterseite */
  --t-abschnitt: clamp(2.2rem, 7vw, 5rem);        /* h2 Abschnitt */
  --t-register:  clamp(2.1rem, 7vw, 4.6rem);      /* h2 Registereintrag */
  --t-tafel:     clamp(1.6rem, 3.4vw, 2.3rem);    /* h3 Tafel */
  --t-band:      clamp(1.5rem, 3.6vw, 3rem);      /* Großzitat / Band */
  --t-satz:      clamp(1.45rem, 4.6vw, 2.6rem);   /* Anfragesatz */
  --t-marke:     1.02rem;                         /* Marke / Nav */
  --t-etikett:   .78rem;                          /* Leistungsname, Kapitelmarke */
  --t-lese:      clamp(1rem, .95rem + .25vw, 1.08rem);
  --t-vorspann:  clamp(1rem, .95rem + .4vw, 1.22rem);
}

/* ── Raster, Abstand, Breakpoints (Spec 4) ──────────────────────────
     < 48rem   Handy: eine Spalte, alles gestapelt, Daumenleiste sichtbar
    >= 48rem   Tablet: Formularfelder und Fußzeile zweispaltig
    >= 62rem   Desktop: Pin-Abschnitte, WebGL, Lenis, Zeiger; Daumen weg

   Volle Breite ist die Voreinstellung. Ein Abschnitt, der nur eine
   Spalte mittig setzt, muss begründet sein.                          */

:root {
  --pad:  clamp(1.15rem, 4.2vw, 5rem);   /* seitlicher Randabstand, überall */
  --ease: cubic-bezier(.22, 1, .36, 1);  /* die eine Kurve der Seite */

  --luft:   clamp(3.5rem, 11vh, 8rem);   /* zwischen Abschnitten */
  --raum-1: 1rem;                        /* innerhalb eines Abschnitts: */
  --raum-2: 1.6rem;                      /* diese drei Werte, keine anderen */
  --raum-3: 2.4rem;

  /* Lesespalte: höchstens 70 Zeichen */
  --spalte:      34rem;
  --spalte-text: 38rem;                  /* Rechtstextseiten */

  /* Bildslots (Spec 7) — feste Verhältnisse, damit ein neues Foto nie
     ein Layout verschiebt. Ab Schritt 2 im Einsatz. */
  --ar-hero:     16 / 9;
  --ar-register: 5 / 4;                  /* Desktop: volle Höhe, siehe Spec 7 */
  --ar-tafel:    3 / 4;
  --ar-breit:    16 / 10;

  /* Farbgrading nur per Token, nie ins Bild eingebrannt. In tinte
     dürfen die Fotos ihre Wärme behalten: wenig Entsättigung und ein
     leichtes sepia(), das die Restfarbe auf die Messingachse zieht
     (docs/farben/studie.md Abschnitt 2, Bild-Gradings). */
  --grade-ruhig: grayscale(.26) sepia(.10) contrast(1.14) brightness(.86);
  --grade-stark: grayscale(.30) sepia(.12) contrast(1.14) brightness(.82);
  --grade-hell:  grayscale(0)   sepia(.06) contrast(1.05) brightness(.98);
  /* Der stumpfe Zustand des Wischs (Spec 6.2). Er steht hier bei den
     anderen Graden, weil er einer ist: wird der Look später geändert,
     reicht auch hier ein Token. sepia() macht das Grau warm — Schmutz
     ist grau, nicht blau. Sichtbar nur unter 62 rem; darüber rechnet
     der Shader dieselbe Stufe selbst. */
  --grade-stumpf: grayscale(.68) sepia(.32) brightness(.40) contrast(.82);

  /* Höhe der Daumenleiste. Unter 62 rem setzt komponenten.css den echten
     Wert; darüber ist die Leiste weg und die Reserve damit null. */
  --daumen-h: 0px;
}

@media (min-width: 62rem) {
  :root {
    --t-haupt:    clamp(6rem, 11.5vw, 13rem);
    --t-register: clamp(2.8rem, 4.6vw, 5.4rem);
    --t-satz:     clamp(2.2rem, 3.4vw, 3.4rem);
  }
}

/* ── Grundsatz ──────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--grund);
  /* Scrollverhalten bleibt nativ; das Weiche macht ab Schritt 3 Lenis,
     und nur ab 62rem mit feinem Zeiger. */
  scroll-behavior: auto;
  /* Die allgemeine Absicherung gegen seitwärts: nichts auf dieser Seite
     darf die Seite waagerecht scrollbar machen. Sie steht hier und
     nicht auf dem Body: der Wurzelwert gilt dem Viewport verlässlich,
     der Body-Wert wird nur weitergegeben, solange die Wurzel `visible`
     ist — und `clip` kam auf diesem Weg in Chromium nicht an (die
     gefahrene Querfahrt war dadurch seitwärts scrollbar).
     `clip` und nicht `hidden`: so entsteht kein Scrollcontainer, den
     ein Skript oder ein Sprungziel doch noch verschieben könnte. Wer
     etwas absichtlich über den Rand legt, klemmt es selbst ab. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font-family: var(--body);
  font-size: var(--t-lese);
  line-height: 1.55;
  /* sonst rechnet der Browser falsche Zwischengewichte */
  font-synthesis-weight: none;
  /* Die Daumenleiste liegt fest am unteren Rand — der Body braucht ihre
     Höhe als Reserve, sonst verdeckt sie die letzte Zeile (Spec 5.2). */
  padding-bottom: var(--daumen-h);
}

a { color: inherit; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

/* Überschriften tragen die Anzeigeschrift. Voreinstellung ist die
   Unterseiten-Größe; die Startseite hebt ihre H1 über .h-haupt an. */
h1, h2, h3 {
  font-family: var(--disp);
  font-weight: 700;
  text-transform: none;
}
h1 {
  margin: 0 0 var(--raum-2);
  font-size: var(--t-unter);
  font-stretch: 88%;
  line-height: .9;
  letter-spacing: -.04em;
}
h2 {
  margin: 0 0 var(--raum-1);
  font-size: var(--t-abschnitt);
  font-stretch: 88%;
  line-height: .95;
  letter-spacing: -.04em;
}
h3 {
  margin: 0 0 var(--raum-1);
  font-size: var(--t-tafel);
  font-stretch: 88%;
  line-height: .96;
  letter-spacing: -.035em;
}

/* Die H1 der Startseite — die einzige Stelle, die so groß wird. */
.h-haupt {
  font-size: var(--t-haupt);
  font-stretch: 86%;
  line-height: .85;
  letter-spacing: -.045em;
}

/* Etikett: Leistungsname, Kapitelmarke. In --signal, weil es benennt, was
   gerade offenliegt — nicht als Dekoration. */
.etikett {
  margin: 0 0 .5rem;
  font-family: var(--disp);
  font-size: var(--t-etikett);
  font-weight: 700;
  font-stretch: 104%;
  letter-spacing: .06em;
  color: var(--signal);
}
.etikett--neben { color: var(--neben); }

/* Vorspann und Lesetext. Zeilenlänge höchstens 70 Zeichen. */
.vorspann { font-size: var(--t-vorspann); line-height: 1.55; }
.vorspann, .lese { max-width: var(--spalte); }
.lese { font-size: var(--t-lese); line-height: 1.55; }
.hell .lese, .hell .vorspann { max-width: var(--spalte-text); }

/* Großzitat / Band. Leichtes Gewicht, breiter Satz, große Größe. */
.band-satz {
  margin: 0;
  max-width: 44ch;
  font-family: var(--disp);
  font-size: var(--t-band);
  font-weight: 400;
  font-stretch: 94%;
  line-height: 1.16;
  letter-spacing: -.025em;
}

/* ── Zugänglichkeit (Spec 9) ────────────────────────────────────────── */

/* Fokusring: 2 px --signal, 3 px Abstand. Nie entfernen. Der Ring folgt
   dem border-radius des Elements — hier deshalb keinen setzen, sonst
   verliert die Knopfpille ihre Form, sobald sie den Fokus bekommt. */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* Sprungmarke auf den Kontakt. Sichtbar, sobald sie den Fokus hat. */
.skip {
  position: absolute;
  left: -9999px;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--signal);
  color: var(--grund);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { left: 1rem; top: 1rem; }

/* Nur für Bildschirmleser — ohne aus der Tastaturreihenfolge zu fallen. */
.nur-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Zeilenmaske ────────────────────────────────────────────────────
   Das Gerüst für die Einblendchoreografie ab Schritt 3. Ohne
   JavaScript ist sie ein reiner Block und kostet nichts — die Bewegung
   ist die Schicht obendrauf, nicht der Träger. */
.mask { display: block; overflow: hidden; }
.mask > span { display: block; }