/*
 * Gewollte Abweichungen vom urspruenglichen Paket.
 *
 * Diese Datei liegt bewusst NEBEN styles.css und nicht darin. styles.css
 * bleibt damit Byte fuer Byte die Datei des Bestands, und jede Abweichung
 * steht an einer Stelle, die man in einem Atemzug lesen kann.
 *
 * Sie wird NACH styles.css geladen und gewinnt darum bei gleicher
 * Spezifitaet. Jede Regel hier braucht einen Eintrag in
 * docs/abweichungen.md.
 */

/* --------------------------------------------------------------------------
 * 26.8.2026: Der Kopfbereich soll auf einem Laptop ganz sichtbar sein.
 *
 * DAS IST EIN GESTALTUNGSWUNSCH, KEIN FEHLER. Der Kopfbereich war im
 * Original genauso hoch. styles.css ist in beiden Staenden byteidentisch,
 * nachgeprueft, die Hoehe kann also nicht von dort kommen.
 *
 * (main.js weicht seit dem 27.8.2026 ab, siehe docs/abweichungen.md. Am
 * Kopfbereich aendert es nichts, es ruehrt ihn nicht an.)
 *
 * DIE URSACHE steckt in styles.css:
 *   clamp(72px, 12vw, 150px) oben, clamp(96px, 14vw, 176px) unten
 * Das Polster haengt an der BREITE des Fensters. Auf einem breiten, flachen
 * Laptop-Bildschirm wird es dadurch zu gross, obwohl gerade dort die Hoehe
 * knapp ist.
 *
 * DIE RECHNUNG, alles bei 1512 px Breite gemessen:
 *   Leiste und Menue     113 px   fest
 *   Inhalt des Kopfs     494 px   fest
 *   Summe                607 px
 * Was darueber hinausgeht, ist Polster. Bei 771 px Fensterhoehe bleiben also
 * 164 px, vorher waren es 326 px.
 *
 * Die Regeln hier binden das Polster an die HOEHE. Die Obergrenzen
 * entsprechen dem bisherigen Maximum, damit sich auf hohen Bildschirmen
 * nichts aendert.
 * ----------------------------------------------------------------------- */
.hero .wrap {
  padding-block: clamp(36px, 7vh, 150px) clamp(40px, 8vh, 176px);
}

/* Flache Fenster, etwa aeltere Laptops und Browser mit vielen Leisten.
   Ohne diese Stufe reicht der Kopfbereich dort weiterhin ueber die Kante:
   bei 700 px waeren es 712 px. */
@media (max-height: 740px) {
  .hero .wrap {
    padding-block: clamp(28px, 5vh, 60px) clamp(30px, 5.5vh, 66px);
  }
}


/* --------------------------------------------------------------------------
 * 26.8.2026: Die Ueberschriften im Fuss sind jetzt h3 statt h4.
 *
 * WARUM: Die Seiten sprangen von h2 direkt auf h4. Fuer eine Vorlesehilfe
 * ist das eine Luecke in der Gliederung, sie meldet eine fehlende Ebene.
 * Gemessen mit Lighthouse, Pruefpunkt "heading-order".
 *
 * OPTISCH AENDERT SICH NICHTS. styles.css formatiert ueber ".footer h4",
 * diese Regel nimmt h3 mit denselben Werten dazu. Kein Wort im Text
 * geaendert, nur die Ebene der Ueberschrift.
 * ----------------------------------------------------------------------- */
.footer h3 {
  color: #fff;
  font-family: var(--font-mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 500;
  margin: 0 0 1.2em;
}


/* ANFANG ERZEUGTER BLOCK: Gestaltung aus dem CMS. NICHT VON HAND AENDERN. */
/* Erzeugt von werkzeuge/gestaltung-bauen.mjs aus src/data/gestaltung.json.
   Die Zuordnung der Rollen zu den Variablen steht in src/lib/gestaltung.mjs. */
:root {
  --petrol-800: #0E313F;
  --petrol-900: #0A2530;
  --petrol-700: #12414F;
  --teal-600: #267287;
  --teal-400: #44B0D4;
  --red-500: #A8564E;
  --red-600: #8C4038;
  --ink: #171717;
  --ink-60: #4A555B;
  --paper: #F2F6F8;
  --line: #DDE7EB;
  --fehler: #A8564E;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Familjen Grotesk", "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --radius-lg: 10px;
  --radius: 4px;
  --wrap: 1200px;
  --shadow-sm: 0 1px 2px rgba(14,49,63,.06), 0 4px 16px rgba(14,49,63,.06);
  --shadow-md: 0 8px 30px rgba(14,49,63,.12);
}

body { font-size: 17px; }

.btn { padding: .85em 1.5em; }
.field input, .field select, .field textarea { background: #FFFFFF; border-width: 1.5px; }
.field label .req { color: var(--fehler); }

/* ENDE ERZEUGTER BLOCK */