/* AdenFace · Grundgerüst für jede Seite.
   Farben, Schriften, Inhaltsbreite, Kopf, Fußzeile, Knöpfe, Überschriften.
   Jede Seite bindet diese Datei ein und dazu genau eine eigene (start.css, kaufen.css ...).
   Die Farben stammen aus dem Programm selbst, damit Seite und Programm dieselbe Sprache sprechen. */

/* ------------------------------------------------------------------ Schriften
   Geist ist auf die Zeichen einer deutschen Seite verkleinert (werkzeug/schrift.py),
   rund 19 kB je Datei statt 40. */
@font-face { font-family: "Geist"; src: url("/fonts/Geist-Regular.woff2?v=2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/Geist-Medium.woff2?v=2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/Geist-SemiBold.woff2?v=2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Regular.woff2?v=2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Medium.woff2?v=2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
/* Etiketten in Großbuchstaben (Kennung, Fußzeilen-Titel, Video-Knopf): nur A-Z, Ziffern,
   Satzzeichen, 7 kB. So lädt die ganze Mono-Schrift nur auf Seiten mit Code. */
@font-face { font-family: "Geist Etikett"; src: url("/fonts/GeistMono-Etikett.woff2?v=2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

/* Ersatzschriften mit angeglichenen Kennzahlen. Solange Geist lädt, zeichnet der Browser
   mit einer Systemschrift. Ohne Angleichung braucht sie anderen Platz, und beim Umschalten
   rutscht die Seite (Layout-Verschiebung). Die Werte rechnet werkzeug/schrift.py aus den
   Schriftdateien aus: size-adjust ist das Verhältnis der mittleren Zeichenbreite, die
   Overrides sind Ober- und Unterlänge von Geist, geteilt durch size-adjust. */
@font-face { font-family: "Geist Ersatz"; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Roboto");
  font-weight: 400 500; size-adjust: 106.26%; ascent-override: 86.58%; descent-override: 20.70%; line-gap-override: 9.41%; }
@font-face { font-family: "Geist Ersatz"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Liberation Sans Bold"), local("Roboto Bold");
  font-weight: 600 700; size-adjust: 102.90%; ascent-override: 89.40%; descent-override: 21.38%; line-gap-override: 9.72%; }
@font-face { font-family: "Geist Mono Ersatz"; src: local("Consolas"), local("Menlo"), local("DejaVu Sans Mono"), local("Liberation Mono"), local("Roboto Mono");
  size-adjust: 109.13%; ascent-override: 84.30%; descent-override: 20.16%; line-gap-override: 9.16%; }

/* ------------------------------------------------------------------ Werte */
:root {
  /* Farben aus dem Programm */
  --grund: #0b0e13;
  --grund-2: #141920;
  --grund-3: #1b222c;
  --rand: #262d38;
  --rand-hell: #3a4453;
  --text: #e8edf3;
  --text-2: #b9c3cf;      /* Fließtext auf dunklem Grund, 10,9:1 */
  --leise: #8e98a6;       /* Nebentext, 6,6:1 auf --grund */
  --akzent: #5cc8ff;
  --akzent-hell: #8ed9ff;
  --akzent-glanz: rgb(92 200 255 / 0.28);
  --akzent-hauch: rgb(92 200 255 / 0.08);

  /* Schrift */
  --schrift: "Geist", "Geist Ersatz", system-ui, sans-serif;
  --schrift-mono: "Geist Mono", "Geist Mono Ersatz", ui-monospace, monospace;       /* Code, Dateinamen */
  --schrift-etikett: "Geist Etikett", "Geist Mono Ersatz", ui-monospace, monospace;  /* nur GROSSBUCHSTABEN und Ziffern */

  /* Maße. --breite ist die EINE Inhaltsbreite der ganzen Seite, angewendet über .inhalt */
  --breite: 72rem;
  --seitenrand: clamp(1rem, 0.4rem + 2.8vw, 2.5rem);
  --kopf-hoehe: 4rem;
  --abstand-abschnitt: clamp(4.5rem, 2.5rem + 6.5vw, 8rem);
  --radius: 0.5rem;
  --radius-gross: 0.875rem;

  /* Bewegung */
  --dauer: 180ms;
  --kurve: cubic-bezier(0.2, 0.7, 0.2, 1);

  color-scheme: dark;
}

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

html {
  background: var(--grund);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, picture, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
p, ul, ol, figure { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; overflow-wrap: break-word; }
p { hyphens: auto; -webkit-hyphens: auto; }
button { font: inherit; color: inherit; }

/* hidden muss gewinnen, auch gegen display: flex einer Komponente */
[hidden] { display: none !important; }

::selection { background: var(--akzent-glanz); color: var(--text); }

/* ------------------------------------------------------------------ Fokus und Sprung
   Der Ring sitzt 3 px neben dem Element, also auf dem dunklen Grund: 10:1, auch neben
   dem hellblauen Hauptknopf sichtbar. */
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

.sprung {
  position: absolute; left: var(--seitenrand); top: 0.75rem; z-index: 100;
  padding: 0.75rem 1.125rem; border-radius: var(--radius);
  background: var(--akzent); color: var(--grund); font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.sprung:focus-visible { transform: none; }

.nur-vorleser {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------ Inhaltsbreite
   Jede Sektion trägt ihren Inhalt in genau einem .inhalt. Nichts anderes setzt eine
   Breite, sonst stehen die Kanten der Abschnitte nicht untereinander. */
.inhalt {
  width: min(100% - 2 * var(--seitenrand), var(--breite));
  margin-inline: auto;
}

/* ------------------------------------------------------------------ Bilder, die warten
   Bilder unterhalb des ersten Blicks tragen ihre Quellen als data-srcset und
   <picture data-spaeter>. start.js setzt sie erst nach dem Laden der Seite ein, damit
   sie nicht mit dem Heldbild und den Schriften um die Leitung kämpfen (gemessen: 0,23 s
   LCP auf dem Handy). Ohne Skript zeigt ein <noscript>-Bild dahinter dasselbe Motiv.
   Den Platz hält aspect-ratio am Bild, es verschiebt sich also nichts. */
picture[data-spaeter] img { visibility: hidden; }
@media (scripting: none) { picture[data-spaeter] { display: none; } }

/* ------------------------------------------------------------------ Überschriften */
.titel-1 {
  font-size: clamp(2.375rem, 1.5rem + 4.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.titel-2 {
  font-size: clamp(1.875rem, 1.3rem + 2.8vw, 3.375rem);
  line-height: 1.07;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.titel-3 {
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
}
.einleitung {
  font-size: clamp(1.0625rem, 0.98rem + 0.45vw, 1.3125rem);
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}
.leise { color: var(--leise); }
.klein { font-size: 0.875rem; line-height: 1.55; }

/* Kennung über einer Abschnittsüberschrift, wie die Tafel-Titel im Programm:
   kleines Quadrat, Mono, gesperrt. */
.kennung {
  display: inline-flex; align-items: center; gap: 0.625rem;
  margin-bottom: 1.25rem;
  font-family: var(--schrift-etikett); font-size: 0.75rem; line-height: 1;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--akzent);
}
.kennung::before {
  content: ""; width: 0.4375rem; height: 0.4375rem; background: currentColor;
  box-shadow: 0 0 12px var(--akzent-glanz);
}

/* ------------------------------------------------------------------ Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 3rem; padding: 0.75rem 1.375rem;
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--schrift); font-size: 1rem; font-weight: 600; line-height: 1.2;
  letter-spacing: -0.005em; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve),
    color var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}
.knopf--haupt {
  background: var(--akzent); color: var(--grund);
  box-shadow: 0 0 0 1px rgb(142 217 255 / 0.4) inset, 0 10px 32px -12px var(--akzent-glanz);
}
.knopf--haupt:hover { background: var(--akzent-hell); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.35) inset, 0 14px 40px -12px rgb(92 200 255 / 0.5); }
.knopf--zweit { border-color: var(--rand-hell); color: var(--text); background: rgb(20 25 32 / 0.55); }
.knopf--zweit:hover { border-color: var(--leise); background: var(--grund-3); }
.knopf:active { transform: translateY(1px); }
.knopf--klein { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.9375rem; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Verweis mit Pfeil. Der Pfeil ist Schmuck: "/ ''" gibt ihm keinen vorgelesenen Text. */
.verweis {
  color: var(--akzent); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em;
  text-decoration-color: rgb(92 200 255 / 0.45);
  transition: text-decoration-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve);
}
.verweis::after {
  content: "\2192" / ""; display: inline-block; margin-left: 0.4em; font-family: var(--schrift-etikett); font-weight: 400;
  transition: transform var(--dauer) var(--kurve);
}
.verweis:hover { color: var(--akzent-hell); text-decoration-color: currentColor; }
.verweis:hover::after { transform: translateX(3px); }

/* Platzhalter wie [Preis] bleiben sichtbar markiert, bis sie ersetzt sind. */
.platzhalter {
  padding: 0 0.2em; border-radius: 3px;
  background: var(--akzent-hauch); outline: 1px dashed rgb(92 200 255 / 0.5); outline-offset: -1px;
}

/* Eckwinkel wie an den Tafeln im Programm. Rein gezeichnet, kein Inhalt. */
.rahmen { position: relative; }
.rahmen::after {
  --l: 14px; --f: rgb(92 200 255 / 0.75);
  content: ""; position: absolute; inset: -7px; pointer-events: none;
  background:
    linear-gradient(var(--f), var(--f)) top left / var(--l) 1px,
    linear-gradient(var(--f), var(--f)) top left / 1px var(--l),
    linear-gradient(var(--f), var(--f)) top right / var(--l) 1px,
    linear-gradient(var(--f), var(--f)) top right / 1px var(--l),
    linear-gradient(var(--f), var(--f)) bottom left / var(--l) 1px,
    linear-gradient(var(--f), var(--f)) bottom left / 1px var(--l),
    linear-gradient(var(--f), var(--f)) bottom right / var(--l) 1px,
    linear-gradient(var(--f), var(--f)) bottom right / 1px var(--l);
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------------ Abschnitte */
.abschnitt { position: relative; padding-block: var(--abstand-abschnitt); }
.abschnitt__kopf { max-width: 46rem; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.abschnitt__kopf .einleitung { margin-top: 1.25rem; }

/* ------------------------------------------------------------------ Kopf */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgb(11 14 19 / 0.82);
  border-bottom: 1px solid rgb(38 45 56 / 0.7);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.kopf__zeile {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem;
  min-height: var(--kopf-hoehe);
}
.kopf__marke {
  display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem;
  font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none;
}
/* Adrians Logo, das grüne A (img/logo-zeichen.*). */
.kopf__marke::before {
  content: ""; width: 1.5rem; height: 1.5rem; flex: none; background: url("/img/logo-zeichen.png") center / contain no-repeat; background-image: image-set(url("/img/logo-zeichen.webp") type("image/webp"), url("/img/logo-zeichen.png") type("image/png"));
}
.kopf__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.75rem; }
.kopf__liste a:not(.knopf) {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--text-2); text-decoration: none; font-size: 0.9375rem;
  transition: color var(--dauer) var(--kurve);
}
.kopf__liste a:not(.knopf):hover { color: var(--text); }

/* Menü auf dem Handy: ein Popover, kein Skript nötig. Der Knopf öffnet es über
   popovertarget, Escape und ein Tipp daneben schließen es, der Browser meldet
   aufgeklappt/zugeklappt selbst. start.js tauscht nur die Beschriftung und schließt es
   nach einem Tipp auf einen Verweis. Kann ein Browser kein Popover, steht die
   Navigation einfach offen unter dem Namen. */
.kopf__menueknopf {
  display: inline-flex; align-items: center; gap: 0.625rem;
  min-height: 2.75rem; padding: 0 0.875rem;
  border: 1px solid var(--rand-hell); border-radius: var(--radius); background: transparent;
  font-size: 0.9375rem; cursor: pointer;
}
.kopf__menueknopf::before {
  content: ""; width: 1rem; height: 0.5625rem;
  border-block: 1.5px solid currentColor;
}
@supports not selector(:popover-open) { .kopf__menueknopf { display: none; } }

.kopf__nav { margin: 0; padding: 0; border: 0; background: none; color: inherit; }
.kopf__nav:popover-open {
  position: fixed; inset: var(--kopf-hoehe) 0 auto 0; width: auto; height: auto; margin: 0;
  padding: 0.5rem var(--seitenrand) 1.5rem;
  background: var(--grund-2); border-bottom: 1px solid var(--rand);
  box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.6);
}
.kopf__nav:popover-open .kopf__liste { flex-direction: column; align-items: stretch; gap: 0; }
.kopf__nav:popover-open .kopf__liste a:not(.knopf) {
  min-height: 3.25rem; width: 100%; font-size: 1.0625rem; border-bottom: 1px solid var(--rand);
}
.kopf__nav:popover-open .knopf { width: 100%; margin-top: 1.25rem; min-height: 3rem; }
/* Der Schleier beginnt unter dem Kopf: Name und "Menü schließen" bleiben hell und greifbar. */
.kopf__nav::backdrop { inset: var(--kopf-hoehe) 0 0 0; background: rgb(5 7 10 / 0.6); }

@media (min-width: 40rem) {
  .kopf__menueknopf { display: none; }
  .kopf__nav, .kopf__nav[popover] {
    display: block; position: static; inset: auto; width: auto; height: auto;
    overflow: visible; background: none; border: 0; padding: 0; margin: 0;
  }
}

/* ------------------------------------------------------------------ Fußzeile */
.fuss {
  border-top: 1px solid var(--rand);
  background: linear-gradient(180deg, var(--grund-2), var(--grund) 70%);
  padding-block: clamp(3.5rem, 2rem + 4vw, 5rem) 2rem;
  font-size: 0.9375rem;
}
.fuss__raster { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) { .fuss__raster { grid-template-columns: 2fr 1fr 1fr; } }
.fuss__titel {
  margin-bottom: 1rem;
  font-family: var(--schrift-etikett); font-size: 0.75rem; font-weight: 400; line-height: 1.4;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--leise);
}
.fuss__titel--marke {
  font-family: var(--schrift); font-size: 1.125rem; font-weight: 600;
  letter-spacing: -0.02em; text-transform: none; color: var(--text);
}
.fuss__text { max-width: 24rem; color: var(--text-2); }
.fuss__liste { list-style: none; margin: 0; padding: 0; }
.fuss__liste a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--text-2); text-decoration: none; transition: color var(--dauer) var(--kurve);
}
.fuss__liste a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.25em; }
.fuss__klein {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rand);
  font-size: 0.8125rem; line-height: 1.6; color: var(--leise);
}

/* ------------------------------------------------------------------ Weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}