/* ============================================================
   inkomplett.de — Stylesheet

   VORLÄUFIG. Angelegt am 13.09.2026 zusammen mit dem Projektgerüst,
   erweitert am 14.09.2026 für die Übergangsseite. Enthält bewusst nur
   das Nötigste.

   Sobald feststeht, was inkomplett.de wird, entsteht hier ein eigenes
   Token-System — wie bei den Schwesterprojekten. Bis dahin gilt nur die
   Markenklammer aus CLAUDE.md: Petrol und IBM Plex Sans.

   Alle clamp()-Werte tragen einen rem-Anteil im Mittelterm. Ohne ihn
   wirkt der Zoom des Lesers nur auf den Text, nicht auf den Raum
   (Vorgabe: Skill `web-layout`).
   ============================================================ */

/* Die Schrift liegt lokal im Projekt, kein externer Request — weder zu
   Google noch sonst wohin (`web-layout` B2). Variable Font, deutscher
   Subset, 41 KB, deckt 100–700 in einer Datei ab. */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/schriften/ibm-plex-sans-de.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* Metrisch angepasster Ersatz: Bis die Webschrift geladen ist, rendert
   der Browser mit einer Systemschrift — weichen deren Maße ab, springt
   beim Umschalten das Layout. Die Werte gleichen Arial an IBM Plex Sans
   an; sie stammen aus dem Schwesterprojekt, wo sie gemessen wurden. */
@font-face {
  font-family: 'Plex Ersatz';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  /* Markenklammer — gilt projektübergreifend, siehe CLAUDE.md */
  --farbe-petrol:       #135E63;  /* auf Grund 7,10:1 · AAA */
  --farbe-petrol-tief:  #0E4A4F;  /* auf Grund 9,45:1 · AAA */

  /* Neutrale Töne, vorläufig */
  --farbe-grund:        #FAFAFA;
  --farbe-tinte:        #1C1C1C;  /* auf Grund 15,9:1 · AAA */
  --farbe-tinte-leise:  #4E4E4E;  /* auf Grund  8,2:1 · AAA */
  /* Die Haarlinie über dem Fuß misst gegen den Grund nur 1,30:1 und
     verfehlt die 3:1 für Grafikobjekte deutlich. Sie darf trotzdem so
     hell bleiben, weil sie nichts trägt: Der Fuß ist bereits durch
     --raum-xl (44–64 px) abgesetzt, die Linie bestätigt diese Trennung
     nur. Ein Wert mit 3:1 läge bei etwa #949494 — das wäre keine
     Haarlinie mehr, sondern ein Balken. Wird die Linie eines Tages zum
     einzigen Trennmittel, muss sie nachgerechnet werden. */
  --farbe-linie:        #DDDDDD;  /* auf Grund 1,30:1 · rein dekorativ */

  --schrift:            'IBM Plex Sans', 'Plex Ersatz', system-ui,
                        -apple-system, 'Segoe UI', Arial, sans-serif;

  --text:               clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);  /* 17 → 18 px */
  --text-klein:         clamp(0.9375rem, 0.92rem + 0.08vw, 0.975rem);  /* 15 → 15,6 px */
  --text-lead:          clamp(1.2rem, 1.15rem + 0.3vw, 1.35rem);
  --text-h2:            clamp(1.35rem, 1.26rem + 0.4vw, 1.6rem);
  --text-h1:            clamp(2.1rem, 1.8rem + 1.3vw, 2.75rem);

  --raum-s:             clamp(0.75rem, 0.6033rem + 0.6522vw, 1.125rem);  /* 12 → 18 px */
  --raum-m:             clamp(1rem, 0.8043rem + 0.8696vw, 1.5rem);       /* 16 → 24 px */
  --raum-l:             clamp(1.75rem, 1.4565rem + 1.3043vw, 2.5rem);    /* 28 → 40 px */
  --raum-xl:            clamp(2.75rem, 2.2565rem + 2.1739vw, 4rem);      /* 44 → 64 px */
  --raum-rand:          clamp(1.25rem, 0.663rem + 2.6087vw, 2.75rem);    /* 20 → 44 px */

  /* NICHT auf 60ch zurückdrehen. "ch" ist die Breite der Ziffer Null und
     damit breiter als das Durchschnittszeichen — eine in ch gesetzte
     Spalte wird immer breiter, als die Zahl verspricht. Erlaubt sind 75
     Zeichen je Zeile (`web-layout` B4). Zeichenweise nachgezählt bei
     1440 px, längste Absatzzeile:

         60ch → 85 Zeichen      47ch → 71 Zeichen
         50ch → 76 Zeichen      46ch → 71 Zeichen
         48ch → 69 Zeichen  ← gewählt

     Nicht monoton, weil der Umbruch in Sprüngen fällt: 48ch liefert die
     kürzeste Zeile UND die breiteste Spalte. Wer Schrift oder Text
     ändert, zählt neu — rechnen hilft hier nicht. */
  --breite-text:        48ch;
  --klickziel:          44px;
}

* { box-sizing: border-box; }

/* Die Satzbreite wird EINMAL hier gesetzt, nicht je Element.
   Grund: "ch" rechnet mit der Schriftgröße des Elements, in dem es steht.
   Stand die Breite an main und footer getrennt, säßen sie nicht auf einer
   Linie — der kleiner gesetzte Fuß rückte um 57 px ein (gemessen bei
   1000 px Fensterbreite). Was untereinander steht, sitzt auf einer Kante. */
body {
  margin-inline: auto;
  max-width: calc(var(--breite-text) + 2 * var(--raum-rand));
  padding: var(--raum-l) var(--raum-rand);
  background: var(--farbe-grund);
  color: var(--farbe-tinte);
  font-family: var(--schrift);
  font-size: var(--text);
  line-height: 1.6;
}

main {
  padding-block: var(--raum-l);
}

h1 {
  font-size: var(--text-h1);
  line-height: 1.15;
  color: var(--farbe-petrol);
  margin: 0 0 var(--raum-s);
  text-wrap: balance;
  hyphens: auto;
}

/* Überschrift oben deutlich mehr Luft als unten — sie gehört zu dem,
   was ihr folgt, nicht zu dem, was über ihr steht (`web-layout` B4). */
h2 {
  font-size: var(--text-h2);
  line-height: 1.2;
  font-weight: 600;
  color: var(--farbe-petrol);
  margin: var(--raum-xl) 0 var(--raum-s);
  text-wrap: balance;
}

.vorspann {
  font-size: var(--text-lead);
  line-height: 1.4;
  color: var(--farbe-tinte-leise);
  margin: 0 0 var(--raum-l);
  text-wrap: pretty;
}

p {
  margin: 0 0 var(--raum-m);
  text-wrap: pretty;
  hyphens: auto;
}

.marke {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--farbe-tinte-leise);
  border-bottom: 2px solid var(--farbe-petrol);
  padding-bottom: 0.2em;
  margin-bottom: var(--raum-m);
}

/* Die drei Leitfragen. Kein Aufzählungspunkt, sondern ein Petrolstrich
   an der Kante: Die Liste ist hier kein Nebenher, sondern der Inhalt. */
.fragen {
  list-style: none;
  margin: 0 0 var(--raum-m);
  padding: 0;
}

.fragen li {
  border-left: 3px solid var(--farbe-petrol);
  padding-left: var(--raum-m);
  margin-bottom: var(--raum-s);
}

.fragen li:last-child { margin-bottom: 0; }

footer {
  margin-top: var(--raum-xl);
  padding-top: var(--raum-m);
  border-top: 1px solid var(--farbe-linie);
  font-size: var(--text-klein);
  line-height: 1.5;
  color: var(--farbe-tinte-leise);
}

/* Im Fuß sind die Überschriften Kleintext-Etiketten, keine Ränge im
   Textfluss — deshalb hier kleiner und ohne den großen Vorlauf. */
footer h2 {
  font-size: var(--text-klein);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--farbe-tinte-leise);
  margin: var(--raum-m) 0 var(--raum-s);
}

footer p { margin-bottom: var(--raum-s); }
footer p:last-child { margin-bottom: 0; }

a {
  color: var(--farbe-petrol);
  text-underline-offset: 3px;
}
a:hover { color: var(--farbe-petrol-tief); }

/* Fokus sichtbar auf jedem bedienbaren Element (WCAG 2.2 AA) */
:focus-visible {
  outline: 3px solid var(--farbe-petrol);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}