/* ==========================================================================
   DZSS Server Studio — dzss.eu
   Ein Stylesheet, keine Abhängigkeiten, keine externen Requests.
   Palette pixelgenau aus logo/dzss-olive-184.png.
   ========================================================================== */

:root {
  /* Marke */
  --olive:        #3E4632;
  --olive-light:  #5A6349;
  --cream:        #DED8C4;
  --lime:         #8FC24A;

  /* Flächen */
  --bg:           #151812;
  --bg-2:         #191D15;
  --panel:        #1E2219;
  --panel-2:      #232819;
  --line:         #2F3627;
  --line-strong:  #414A34;

  /* Schrift */
  --ink:          #DED8C4;
  --ink-dim:      #A8AE93;
  --ink-faint:    #7D8470;

  /* Maße */
  --radius:       10px;
  --radius-lg:    16px;
  --wrap:         1140px;
  --gap:          clamp(1rem, 2.5vw, 1.75rem);

  --font: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "JetBrains Mono", Consolas, "SFMono-Regular", ui-monospace, monospace;

  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -12px rgba(0, 0, 0, .65);
}

/* --------------------------------------------------------------- Grundlage */

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

html {
  scroll-behavior: smooth;
  /* Damit Sprungziele nicht unter der klebenden Kopfzeile landen. */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }
/* <picture> ist von Haus aus inline und saesse damit als Zeilenkasten in
   Figuren und Rastern, wo vorher direkt das Bild stand. Seit dem
   14.08.2026 liegen die Screenshots in <picture> mit WebP-Quelle und PNG
   als Rueckfall; alle Stilregeln greifen weiter ueber `.shot img` und die
   Klassen am <img> selbst. */
picture { display: block; }

/* Muss nach vorn: eigene display-Regeln (z. B. .hero__meta > *) wuerden das
   hidden-Attribut sonst aushebeln, und site.js blendet damit leere Werte aus. */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  line-height: 1.18;
  letter-spacing: -.018em;
  font-weight: 650;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.15rem); }
h3 { font-size: 1.075rem; font-weight: 620; }

p { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--lime); text-decoration-color: rgba(143, 194, 74, .38); text-underline-offset: .18em; }
a:hover { text-decoration-color: currentColor; }

code, kbd, samp {
  font-family: var(--mono);
  font-size: .875em;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .08em .38em;
  color: #C9D3B4;
  word-break: break-word;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(143, 194, 74, .28); color: #fff; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

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

.skip-link {
  position: absolute;
  left: 1rem; top: -100%;
  z-index: 100;
  background: var(--lime);
  color: #17200A;
  font-weight: 650;
  padding: .6rem 1rem;
  border-radius: var(--radius);
  text-decoration: none;
}
.skip-link:focus-visible { top: 1rem; }

/* --------------------------------------------------------------- Kopfzeile */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(21, 24, 18, .82);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 2rem);
  min-height: 64px;
  padding-block: .55rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-weight: 660;
  font-size: 1.01rem;
  letter-spacing: -.015em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.brand:hover { color: #fff; }
.brand__mark { width: 30px; height: 30px; border-radius: 7px; flex: none; }

.site-nav {
  display: flex;
  align-items: center;
  /* Umbrechen statt ueberlaufen: Die Eintraege selbst sind nowrap, und seit
     "Hinter dem Projekt" dazugekommen ist, wird die Zeile zwischen 640 px und
     etwa 900 px sonst breiter als die Kopfzeile. */
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: clamp(.5rem, 1.6vw, 1.4rem);
  margin-left: auto;
  font-size: .925rem;
}
.site-nav a {
  color: var(--ink-dim);
  text-decoration: none;
  padding: .3rem 0;
  border-bottom: 1.5px solid transparent;
  transition: color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--lime); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--olive-light); }

/* Sprachumschalter */
.lang {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  overflow: hidden;
  flex: none;
  background: var(--panel);
}
/* Seit dem SEO-Umbau am 14.08.2026 sind das Links auf die Schwesterseite
   (/handbuch.html <-> /en/handbuch.html) statt Knoepfe, die den Text im
   Browser austauschen. Die laufende Sprache traegt aria-current="page". */
.lang a {
  display: block;
  text-decoration: none;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  font-size: .78rem;
  font-weight: 640;
  letter-spacing: .06em;
  padding: .34rem .58rem;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lang a:hover { color: var(--ink); background: rgba(143, 194, 74, .1); }
.lang a[aria-current="page"] { background: var(--lime); color: #17200A; }

/* Kapitel-Verweis am Fuss einer Funktionskarte. Steht bewusst leise da: Der
   Absatz darueber traegt die Aussage, der Link nur den Weg ins Handbuch. */
.card__more {
  margin: .55rem 0 0;
  font-size: .86rem;
}
.card__more a {
  color: var(--lime);
  text-decoration: none;
  border-bottom: 1px solid rgba(143, 194, 74, .35);
  padding-bottom: 1px;
}
.card__more a:hover { border-bottom-color: var(--lime); }

/* ---------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font: inherit;
  font-weight: 620;
  line-height: 1.25;
  text-decoration: none;
  padding: .8rem 1.35rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

.btn--primary {
  background: var(--lime);
  color: #16200A;
  border-color: #A3D45D;
  box-shadow: 0 8px 22px -10px rgba(143, 194, 74, .75);
}
.btn--primary:hover { background: #9DCF57; color: #16200A; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--olive-light); background: rgba(222, 216, 196, .05); }

.btn--sm { padding: .5rem .9rem; font-size: .875rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-block: 1.5rem .9rem;
}
/* Eine Knopfleiste, die unter einem Bild in voller Breite steht, gehoert in
   die Mitte: Die Bildunterschrift darueber ist zentriert, ein linksbuendiger
   Knopf darunter sieht daneben aus wie vergessen. Nur dort einsetzen, wo der
   Knopf allein unter einem breiten Element steht, nicht in Textabschnitten. */
.btn-row--center { justify-content: center; }

/* ------------------------------------------------------------------- Hero */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

/* Höhenlinien — reines CSS, keine Bilddatei. Greift den Karten-Reiter auf. */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 150%;
  pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 14% 18%, transparent 0 41px, rgba(143, 194, 74, .052) 41px 42px),
    repeating-radial-gradient(circle at 82% 72%, transparent 0 53px, rgba(222, 216, 196, .038) 53px 54px),
    repeating-radial-gradient(circle at 52% 120%, transparent 0 76px, rgba(143, 194, 74, .03) 76px 77px);
  mask-image: radial-gradient(ellipse 90% 75% at 50% 32%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 32%, #000 30%, transparent 78%);
}
/* Zwei Verlaeufe in einer Ebene: das Licht oben links und - seit die
   Fakten-Leiste weg ist - der weiche Uebergang in den naechsten Abschnitt.
   Vorher trennte eine harte 1-px-Linie, und darunter begann uebergangslos eine
   andere Flaechenfarbe; das schnitt die Seite in Streifen. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 22% 0%, rgba(62, 70, 50, .55), transparent 62%),
    linear-gradient(to bottom, transparent 68%, var(--bg-2) 100%);
}

/* Der Abschnitt direkt unter dem Hero braucht seine obere Kante nicht mehr -
   der Verlauf oben macht die Trennung. */
.hero + .section--alt { border-top: 0; }

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3rem, 8vw, 5.75rem) clamp(3rem, 7vw, 5rem);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .775rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lime);
  background: rgba(143, 194, 74, .1);
  border: 1px solid rgba(143, 194, 74, .28);
  border-radius: 100px;
  padding: .3rem .75rem;
  margin-bottom: 1.25rem;
}

.hero__lead {
  font-size: clamp(1.03rem, 1.9vw, 1.175rem);
  color: var(--ink-dim);
  max-width: 34em;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .75rem;
  font-size: .84rem;
  color: var(--ink-faint);
  margin: 0;
}
.hero__meta > * { display: inline-flex; align-items: center; gap: .4rem; }
.hero__meta .sep { opacity: .45; }

/* Die drei Zusagen direkt unter dem Knopf: kostenlos, keine Registrierung,
   keine Cloud. Genau dort entscheidet sich, ob jemand klickt. */
.trust {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .9rem;
  font-size: .86rem;
  color: var(--ink-dim);
}
.trust svg { width: 15px; height: 15px; color: var(--lime); flex: none; }

/* Der Screenshot im Hero. Er bringt seine eigene Fensterleiste mit, deshalb
   gibt es hier keinen nachgebauten Rahmen - nur Kante und Schatten. ECKIG,
   ohne Rundung: Ein Anwendungsfenster hat gerade Ecken, eine abgerundete Kopie
   sieht aus wie ein Aufkleber. Die Aufnahme ist hell, die Seite dunkel: der
   weisse Grund verhindert ein Aufblitzen, solange sie laedt. width/height
   stehen am <img>, damit beim Laden nichts springt. */
.hero__figure { margin: 0; }

/* Rund ein Fuenftel mehr Bild, ohne die linke Kante zu verschieben.

   Ein breiterer Hero-Container waere der einfache Weg gewesen, verschiebt aber
   den Text gegen alle Abschnitte darunter - die Kante ist das Erste, dem das
   Auge folgt. Stattdessen waechst nur die Bildspalte nach rechts, um hoechstens
   120 px, und nur so weit, wie neben dem Inhalt tatsaechlich Platz ist.

   Die 24 px im Term sind der Sicherheitsabstand zur Scrollleiste: `100vw`
   zaehlt sie mit, und genau daran ist eine fruehere Fassung gescheitert - das
   Bild lief darunter und wurde von .hero (overflow:hidden) abgeschnitten.
   max(0px, ...) haelt den Wert bei schmalen Fenstern bei null. */
@media (min-width: 1000px) {
  .hero__inner { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .hero__figure {
    margin-right: calc(-1 * max(0px, min(120px, (100vw - var(--wrap)) / 2 - 24px)));
  }
}

/* Knopf statt Link: Er oeffnet ein Fenster auf derselben Seite, kein Ziel. */
.hero__zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  line-height: 0;
}

.hero__shot {
  width: 100%;
  height: auto;
  /* Untereinander (schmale Schirme) soll das Bild nicht die ganze Seite
     einnehmen. In zwei Spalten begrenzt ohnehin die Spalte. */
  max-width: 900px;
  margin-inline: auto;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  background: #fff;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.hero__zoom:hover .hero__shot,
.hero__zoom:focus-visible .hero__shot {
  border-color: rgba(211, 167, 91, .7);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 16px 40px -14px rgba(211, 167, 91, .45);
}

/* Beta-Emblem in der Ecke der Aufnahme (vom Nutzer geliefert, hier freigestellt:
   das Original hatte einen schwarzen Grund ohne Transparenz und 1,5 MB).
   Es sitzt bewusst ueber der Bildkante, damit es aufgesetzt wirkt wie ein
   Siegel. aria-hidden und leeres alt: "Beta" steht bereits in der Zeile ueber
   der Ueberschrift - vorgelesen waere es doppelt.
   Das Leuchten pulsiert per drop-shadow, nicht per box-shadow: Ein Kasten um
   ein freigestelltes Rund saehe man sofort. */
.shot-badge {
  position: absolute;
  top: -1.4rem;
  right: -1.4rem;
  z-index: 2;
  width: clamp(72px, 7vw, 104px);
  height: auto;
  pointer-events: none;
  animation: shot-badge-pulse 2.6s ease-in-out infinite;
}

@keyframes shot-badge-pulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(143, 194, 74, .45)) drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
  50%      { filter: drop-shadow(0 0 18px rgba(143, 194, 74, .9))  drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
}

/* Die Lupe sagt, dass da mehr ist. Sie liegt IM Bild, damit sie nicht die
   Bildunterschrift verschiebt, und traegt dieselbe Form wie die Symbolkacheln
   im Funktionsblock (.card__icon): abgerundetes Quadrat, getoenter Grund,
   feine Kante. Nur die Farbe ist eine andere - Bernstein statt Limette -,
   damit sie neben der gruenen Beta-Marke in derselben Ecke nicht untergeht. */
.hero__zoomHint {
  position: absolute;
  right: .8rem;
  bottom: .8rem;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  /* DECKEND, nicht getoent: Die Kachel liegt auf einer hellen Aufnahme. Mit
     16 % Deckkraft verschwand sie darin fast vollstaendig - der Nutzer hat sie
     schlicht nicht gefunden. Auf dunklem Grund haette der getoente Grund
     gereicht, hier nicht. */
  background: #D3A75B;
  border: 1px solid #E4BE7B;
  color: #241A06;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hero__zoom:hover .hero__zoomHint,
.hero__zoom:focus-visible .hero__zoomHint {
  background: #E8C784;
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(211, 167, 91, .5);
}
.hero__zoomHint svg { width: 23px; height: 23px; }

.hero__caption {
  margin-top: .65rem;
  text-align: center;
  font-size: .78rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------- Grossansicht ---- */

.lightbox {
  padding: 0;
  border: 0;
  background: none;
  max-width: 96vw;
  max-height: 96vh;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(8, 10, 6, .88); }

.lightbox img {
  display: block;
  max-width: 96vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  border: 1px solid var(--line-strong);
  background: #fff;
  box-shadow: 0 24px 70px -20px #000;
}

.lightbox__close {
  position: absolute;
  top: -.35rem;
  right: -.35rem;
  transform: translate(50%, -50%);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.lightbox__close:hover { background: var(--lime); color: #16200A; border-color: var(--lime); }
.lightbox__close svg { width: 18px; height: 18px; }

/* ----------------------------------------------------------- Abschnitte */

.section { padding-block: clamp(2.25rem, 4.6vw, 3.5rem); }
.section--alt { background: var(--bg-2); border-block: 1px solid var(--line); }

.section__head { max-width: 58ch; margin-bottom: clamp(1.15rem, 2.6vw, 1.75rem); }
.section__head p { color: var(--ink-dim); margin-bottom: 0; }

.kicker {
  font-size: .78rem;
  font-weight: 660;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--lime);
  margin: 0 0 .5rem;
}

/* --------------------------------------------------------- Problem/Loesung */

/* Vorher standen hier vier Aussagen ueber die App ("Mods: Auswaehlen, fertig").
   Jetzt steht oben, was der Besucher kennt, und darunter, was DZSS daraus macht.
   Dieselbe Information, aber in seiner Reihenfolge: erst der Aerger, dann die
   Abhilfe. */
.pains {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Zwei Spalten, nicht drei: vier Karten in drei Spalten lassen die vierte
     allein in einer zweiten Reihe stehen. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(.7rem, 1.4vw, 1rem);
}
.pain {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 1rem 1.1rem;
}
/* Ungerade Anzahl: Die letzte Karte staende sonst allein in ihrer Reihe und saehe
   aus wie vergessen. So nimmt sie die volle Breite — und bei einer Spalte
   (Telefon) aendert die Regel nichts, weil 1 / -1 dort dieselbe Spalte ist. */
.pain:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pain__q,
.pain__a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .55rem;
  margin: 0;
  font-size: .92rem;
}
.pain__q { color: var(--ink-faint); padding-bottom: .7rem; }
.pain__a { color: var(--ink); padding-top: .7rem; border-top: 1px solid var(--line); }

.pain__label {
  font-size: .62rem;
  font-weight: 690;
  letter-spacing: .085em;
  text-transform: uppercase;
  padding: .2rem .42rem;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  color: var(--ink-faint);
  white-space: nowrap;
  /* Auf die erste Zeile ausgerichtet, nicht auf die Mitte des Absatzes. */
  margin-top: .12em;
}
.pain__label--ok {
  color: var(--lime);
  border-color: rgba(143, 194, 74, .42);
  background: rgba(143, 194, 74, .1);
}

/* Ein Satz mit Herz - das Projekt entsteht fuer die Community, nicht fuer einen
   Markt. Steht bewusst nur an einer Stelle; zweimal waere Behauptung. */
.love {
  display: inline-flex;
  /* Bricht der Satz um, gehoert das Herz an die ERSTE Zeile - mittig ausgerichtet
     haengt es sonst im Leeren neben dem Text. */
  align-items: flex-start;
  text-align: left;
  gap: .5rem;
  margin: 0 0 1rem;
  padding: .45rem .95rem;
  border: 1px solid rgba(143, 194, 74, .28);
  border-radius: 999px;
  background: rgba(143, 194, 74, .09);
  color: var(--ink);
  font-size: .875rem;
}
/* Das einzige Rot der Seite - ein Herz in Limette waere keins. */
.love svg {
  width: 15px;
  height: 15px;
  color: #E1584E;
  flex: none;
  margin-top: .16em;
}

/* ------------------------------------------------------------- Funktionen */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: clamp(.7rem, 1.4vw, 1rem);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.05rem 1.1rem 1.15rem;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.card:hover {
  border-color: var(--line-strong);
  background: var(--panel-2);
  transform: translateY(-2px);
}

.card__icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(143, 194, 74, .11);
  border: 1px solid rgba(143, 194, 74, .24);
  color: var(--lime);
  margin-bottom: .65rem;
}
.card__icon svg { width: 16px; height: 16px; }

.card__head {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin-bottom: .4rem;
}
.card__head h3 { margin: 0; }

.card > p { color: var(--ink-dim); font-size: .885rem; margin-bottom: 0; }
.card__head h3 { font-size: 1.02rem; }

.card ul {
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
  font-size: .875rem;
  color: var(--ink-dim);
}
.card li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: .32rem;
}
.card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--olive-light);
}
.card li:last-child { margin-bottom: 0; }

.badge {
  display: inline-block;
  font-size: .66rem;
  font-weight: 680;
  letter-spacing: .085em;
  text-transform: uppercase;
  padding: .16rem .45rem;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  color: var(--ink-faint);
  white-space: nowrap;
}
.badge--new { color: var(--lime); border-color: rgba(143, 194, 74, .42); background: rgba(143, 194, 74, .1); }
.badge--todo { color: #D3A75B; border-color: rgba(211, 167, 91, .38); background: rgba(211, 167, 91, .09); }

/* ------------------------------------------------------------------ Schritte */

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-top: 3.1rem;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(143, 194, 74, .35);
  background: rgba(143, 194, 74, .1);
  color: var(--lime);
  font-weight: 680;
  font-size: 1rem;
}
.steps h3 { margin-bottom: .35rem; }
.steps p { color: var(--ink-dim); font-size: .92rem; }

/* --------------------------------------------------------- Voraussetzungen */

.reqs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .25rem var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.reqs li {
  display: flex;
  gap: .55rem;
  align-items: center;
  padding: .45rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .89rem;
}
.reqs svg { flex: none; width: 15px; height: 15px; color: var(--lime); }
.reqs b { color: var(--ink); font-weight: 620; }
.reqs span { color: var(--ink-dim); }

.note {
  margin-top: 1.5rem;
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--olive-light);
  background: var(--panel);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .89rem;
  color: var(--ink-dim);
}
/* Offener Punkt, der vor dem Livegang weg muss — bewusst in Bernstein, damit er
   niemandem durchgeht. */
.note--todo {
  border-left-color: #D3A75B;
  background: rgba(211, 167, 91, .08);
  color: #E2C68C;
}

/* ------------------------------------------------------------------- FAQ */

/* Reines <details> — kein Skript, funktioniert ohne JavaScript, und der Text
   steht auch zugeklappt im Dokument (fuer Suchmaschinen wie fuer die
   Seitensuche im Browser). */
/* Fruehere Fassung: `max-width: 84ch` ohne `margin-inline`. Der Block stand
   dadurch schmaler UND linksbuendig, waehrend .reqs, .cards und der Hinweis im
   Abschnitt darueber die ganze Breite von .wrap nutzen. Auf breiten Schirmen
   sah der Fragenblock deshalb aus, als waere er verrutscht: rechts blieb ein
   Drittel der Spalte leer. Jetzt fuellt er die Spalte wie alle anderen
   Bausteine; die Zeilenlaenge begrenzt die Antwort selbst (siehe unten). */
.faq { display: grid; gap: .6rem; }

.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--line-strong); }

.faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.05rem;
  cursor: pointer;
  font-weight: 620;
  color: var(--ink);
  list-style: none;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:hover { background: var(--panel-2); }
.faq__item > summary svg {
  width: 16px; height: 16px;
  flex: none;
  color: var(--ink-faint);
  transition: transform .18s ease;
}
.faq__item[open] > summary svg { transform: rotate(180deg); }

.faq__item > p {
  margin: 0;
  padding: 0 1.05rem 1rem;
  /* Der Kasten ist jetzt so breit wie die Spalte. Die ANTWORT bleibt trotzdem
     begrenzt: Zeilen ueber rund 90 Zeichen liest niemand gern, das Auge
     verliert beim Ruecksprung die Zeile. 90ch statt der frueheren 74ch, damit
     der Text im breiteren Kasten nicht verloren wirkt. */
  max-width: 90ch;
  color: var(--ink-dim);
  font-size: .92rem;
}

/* ------------------------------------------------------------------ Versionen */

/* Der Abschnitt "Versionen / Was sich geaendert hat" (#versionen in index.html)
   war vom 14. bis 15.08.2026 entfernt; dass dieser Block damals absichtlich
   stehen blieb, hat die Rueckkehr auf Markup und eine Zeichenfunktion verkuerzt.
   In Gebrauch sind derzeit .releases(--pair), .release(--current), .release__*
   und .releases__empty. Die eingeklappte Variante (details.release > summary,
   .release__chevron) bleibt ungenutzt stehen — sie traegt die Historie, sobald
   mehr als die neueste Fassung gezeigt werden soll. */

.releases { display: grid; gap: 1rem; }

/* Keine eigene Breite: die Karten laufen ueber die volle .wrap-Breite und sind
   damit genau so breit wie der Download-Kasten (.cta) darueber. Ein schmalerer
   Lesestreifen ist hier ausdruecklich NICHT gewollt — die beiden Bloecke stehen
   direkt uebereinander, unterschiedliche Kanten fielen sofort auf.

   Die aelteren Fassungen tragen nur .release (Kopfzeile mit Version und Datum,
   kein .release__body), die neueste zusaetzlich .release--current mit der
   Aenderungsliste. Nichts davon ist aufklappbar.

   Eine Karte ohne Koerper braucht auch keine Trennlinie unter dem Kopf — sonst
   steht die Linie direkt auf dem Kartenrand und sieht nach einem Fehler aus.
   Der ruhigere Grund haelt die aelteren Zeilen zugleich im Hintergrund. */
.release:not(.release--current) .release__head {
  border-bottom: 0;
  background: transparent;
}
.release:not(.release--current) .release__version {
  font-size: 1rem;
  font-weight: 620;
  color: var(--ink-dim);
}

.release {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  overflow: hidden;
}
.release--current { border-color: var(--line-strong); }

.release__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .85rem;
  padding: 1rem 1.35rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.release__version {
  font-size: 1.1rem;
  font-weight: 680;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.release__date { font-size: .85rem; color: var(--ink-faint); margin-left: auto; }

.release__body { padding: 1.15rem 1.35rem; }
.release__group + .release__group { margin-top: 1rem; }
.release__group h4 {
  margin: 0 0 .45rem;
  font-size: .74rem;
  font-weight: 670;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.release__group ul { margin: 0; padding-left: 1.1rem; font-size: .91rem; color: var(--ink-dim); }
.release__group li { margin-bottom: .28rem; }

/* Ältere Versionen eingeklappt */
details.release > summary {
  list-style: none;
  cursor: pointer;
}
details.release > summary::-webkit-details-marker { display: none; }
details.release > summary .release__head { margin: 0; }
details.release > summary .release__chevron {
  transition: transform .18s ease;
  color: var(--ink-faint);
  flex: none;
}
details.release[open] > summary .release__chevron { transform: rotate(90deg); }
details.release > summary:hover .release__head { background: #262C1D; }

.releases__empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  color: var(--ink-faint);
  font-size: .9rem;
}

/* ------------------------------------------------------------------- CTA */

.cta {
  text-align: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%, rgba(62, 70, 50, .75), transparent 70%),
    var(--panel);
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 4vw, 2.5rem);
}
.cta h2 { margin-bottom: .5rem; }
.cta p { color: var(--ink-dim); max-width: 52ch; margin-inline: auto; }
.cta .btn-row { justify-content: center; }

/* Der Rueckverweis am Fuss der Launcher-Seite. Zwei Abweichungen von den
   uebrigen CTA-Absaetzen, beide aus demselben Grund: In der 52-Zeichen-Spalte
   fiel der Umbruch mitten in den Produktnamen, sodass "DZSS" allein am
   Zeilenende stand und wie ein abgeschnittenes Wort aussah. Etwas mehr Breite,
   und der Link bleibt als Ganzes zusammen. Der Ankertext ist kurz genug, dass
   nowrap auch auf schmalen Schirmen nicht ueberlaeuft. */
.cta p.cta__back { max-width: 68ch; }
.cta p.cta__back a { white-space: nowrap; }

/* Solange keine Datei hinterlegt ist. Steht im Markup sichtbar und wird von
   site.js ausgeblendet, sobald releases.json eine Adresse nennt — nie
   umgekehrt: Ohne JavaScript soll die vorsichtige Aussage stehen bleiben. */
.pending {
  margin: .25rem auto 0;
  max-width: 54ch;
  padding: .65rem .95rem;
  border: 1px solid rgba(211, 167, 91, .3);
  border-radius: var(--radius);
  background: rgba(211, 167, 91, .07);
  color: var(--ink-dim);
  font-size: .88rem;
}
.pending a { color: var(--lime); }

.checksum {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--ink-faint);
  word-break: break-all;
}
.checksum b { color: var(--ink-dim); font-family: var(--font); font-weight: 620; }

/* Beide Produkte im CTA nebeneinander: links das Studio, rechts der Launcher.
   Jede Haelfte traegt ihre eigene Knopfzeile, Pending-Hinweis und Pruefsumme. */
.cta__products {
  display: grid;
  gap: 2rem;
  margin-top: 1.9rem;
}
.cta__product h3 { margin-bottom: .3rem; }
.cta__product > p { font-size: .95rem; margin-bottom: 1.1rem; }
@media (min-width: 800px) {
  .cta__products { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .cta__product + .cta__product { border-left: 1px solid var(--line); margin-left: -1.25rem; padding-left: 1.25rem; }
}

/* ------------------------------------------------------ Hinter dem Projekt */

.about { max-width: 68ch; margin-inline: auto; text-align: center; }

/* Das Portraet ueber dem Zitat. Die Bilddatei ist quadratisch, der Kreis
   entsteht erst hier — so bleibt die Datei fuer andere Zwecke brauchbar. */
.about__photo {
  display: block;
  width: 148px;
  height: 148px;
  margin: 1.2rem auto .4rem;
  border-radius: 50%;
  /* Leuchtend gruener Ring nach Vorlage des Betreibers: Rand in der
     Akzentfarbe, das Leuchten kommt vom weichen Schatten darunter. */
  border: 3px solid var(--lime);
  box-shadow: 0 0 18px rgba(143, 194, 74, .5), 0 0 4px rgba(143, 194, 74, .65);
  object-fit: cover;
  background: var(--panel-2);
}

.about blockquote {
  margin: 0 0 1.15rem;
  position: relative;
  font-size: clamp(1.02rem, 1.9vw, 1.2rem);
  line-height: 1.5;
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: pretty;
}
.about blockquote::before {
  content: "„";
  display: block;
  font-size: 2.4rem;
  line-height: .6;
  color: var(--lime);
  opacity: .5;
  margin-bottom: .25rem;
}
html[lang="en"] .about blockquote::before { content: "\201C"; }

.about__by {
  display: block;
  margin-top: 1rem;
  font-size: .85rem;
  font-style: normal;
  color: var(--ink-faint);
  letter-spacing: .01em;
}

/* Die drei Profile in ihren Hausfarben - die einzigen Fremdfarbtoene der Seite
   und deshalb bewusst nur hier, in genau einer Zeile. Die Logos liegen inline
   im Markup: Die Seite laedt grundsaetzlich nichts von fremden Servern. */
.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 0 0 1.5rem;
}
.social__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .38rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: .85rem;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
.social__btn svg { width: 15px; height: 15px; flex: none; }

.social__btn--linkedin { border-color: rgba(10, 102, 194, .38); background: rgba(10, 102, 194, .12); }
.social__btn--linkedin svg { color: #0A66C2; }
.social__btn--linkedin:hover,
.social__btn--linkedin:focus-visible { border-color: #0A66C2; background: rgba(10, 102, 194, .22); }

.social__btn--steam { border-color: rgba(102, 192, 244, .34); background: rgba(102, 192, 244, .1); }
.social__btn--steam svg { color: #66C0F4; }
.social__btn--steam:hover,
.social__btn--steam:focus-visible { border-color: #66C0F4; background: rgba(102, 192, 244, .2); }

.social__btn--discord { border-color: rgba(88, 101, 242, .38); background: rgba(88, 101, 242, .12); }
.social__btn--discord svg { color: #7A85FF; }
.social__btn--discord:hover,
.social__btn--discord:focus-visible { border-color: #5865F2; background: rgba(88, 101, 242, .22); }

/* Drei nachpruefbare Zusagen statt eines Werbesatzes - eine Zeile auf breiten
   Schirmen, untereinander auf dem Telefon. */
.privacy {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .65rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.privacy li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-dim);
  font-size: .84rem;
  text-align: left;
}
.privacy svg { width: 15px; height: 15px; color: var(--lime); flex: none; }

/* Die Trennlinie sitzt jetzt am Schild und nicht mehr am Schlussabsatz: Sonst
   stuenden Linie und Schild uebereinander und der Satz haette gleich zwei
   Trenner ueber sich. Die Regel gilt weiterhin nur fuer diese eine Stelle -
   fuer JEDEN direkten Absatz gedacht, haetten Kicker, Herz-Badge und
   LinkedIn-Knopf je eine Linie ueber sich. */
.about__shield {
  max-width: 58ch;
  margin: 0 auto .9rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.shield {
  display: inline-grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(143, 194, 74, .12);
  border: 1px solid rgba(143, 194, 74, .42);
  color: var(--lime);
  animation: shield-pulse 2.6s ease-in-out infinite;
}
.shield svg { width: 28px; height: 28px; }

/* Der Ring waechst nach aussen und verblasst, das Leuchten atmet mit. */
@keyframes shield-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(143, 194, 74, .5),  0 0 12px rgba(143, 194, 74, .35); }
  50%      { box-shadow: 0 0 0 13px rgba(143, 194, 74, 0), 0 0 28px rgba(143, 194, 74, .8); }
}

.about > p:last-child {
  color: var(--ink-dim);
  font-size: .92rem;
  max-width: 58ch;
  margin-inline: auto;
}

/* Der Rueckkanal unter dem persoenlichen Absatz. Steht vor dem Geld-Abschnitt:
   Mitreden kostet nichts. */
.callout {
  max-width: 68ch;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  padding: 1.25rem 1.35rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  text-align: center;
}
.callout h3 { margin-bottom: .35rem; }
.callout p { color: var(--ink-dim); font-size: .92rem; max-width: 56ch; margin-inline: auto; }
.callout .btn-row { justify-content: center; margin-bottom: 0; }

/* Dank an eine fremde Stelle: Abzeichen links, Text rechts. Der gewoehnliche
   Callout ist mittig gesetzt; neben einem Bild sieht zentrierter Text aus wie
   ein Umbruchfehler, deshalb hier ueberall linksbuendig zurueck. */
.callout--credit {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  flex-wrap: wrap;
  text-align: left;
}
.callout--credit p { margin-inline: 0; }
.callout--credit .btn-row { justify-content: flex-start; }
/* Hoehe vorgeben, Breite mitlaufen lassen: Die Datei ist 45x45, aber ein
   spaeterer Austausch muss nicht quadratisch sein und soll nicht verzerren.
   40px liegt unter der nativen Groesse, damit das Zeichen auf Bildschirmen mit
   hoher Punktdichte nicht weich wird. */
.credit__mark {
  width: auto;
  height: 40px;
  flex: none;
  border-radius: 8px;
}

/* ------------------------------------------------------------ Unterstützen */

.support {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(.7rem, 1.4vw, 1rem);
  margin-top: clamp(1.1rem, 2.4vw, 1.5rem);
}

.support__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: 1.1rem 1.2rem 1.2rem;
  transition: border-color .18s ease, background .18s ease;
}
.support__card:hover { border-color: var(--line-strong); background: var(--panel-2); }
.support__card--primary {
  border-color: rgba(143, 194, 74, .3);
  background:
    radial-gradient(ellipse 90% 130% at 0% 0%, rgba(143, 194, 74, .09), transparent 65%),
    var(--panel);
}

.support__icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(143, 194, 74, .11);
  border: 1px solid rgba(143, 194, 74, .24);
  color: var(--lime);
  margin-bottom: .35rem;
}
.support__icon svg { width: 19px; height: 19px; }

.support__card h3 { margin: 0; }
.support__card p { color: var(--ink-dim); font-size: .92rem; margin: 0; }
.support__card .btn { margin-top: auto; width: 100%; }
.support__card .btn-row { margin: .85rem 0 0; width: 100%; }

.support__note {
  font-size: .8rem;
  color: var(--ink-faint);
  margin-top: .55rem;
}

.support__thanks {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
  font-size: .89rem;
  color: var(--ink-faint);
}

/* ------------------------------------------------------ Unterstuetzer-Lauf

   Reines CSS, kein Skript: Die Liste steht zweimal im Markup, der Streifen
   wandert um genau EINE Listenbreite nach rechts und springt dann zurueck -
   fuer das Auge ein endloser Lauf. Der Abstand zwischen den Karten sitzt
   deshalb als margin-right AN der Karte und nicht als gap am Streifen: Bei
   einem gap waere die halbe Streifenbreite keine ganze Kartenbreite, und der
   Sprung wuerde sichtbar ruckeln. */
.donors { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.donors__title {
  text-align: center;
  font-size: .74rem;
  font-weight: 670;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .9rem;
}

.donors__viewport {
  overflow: hidden;
  /* Die Karten sollen an den Raendern verschwinden statt abgeschnitten zu enden. */
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.donors__track {
  display: flex;
  width: max-content;
  animation: donors-run 46s linear infinite;
}
/* Anhalten, sobald jemand hinsieht oder mit der Tastatur hineingeht. */
.donors:hover .donors__track,
.donors:focus-within .donors__track { animation-play-state: paused; }

.donors__group { display: flex; list-style: none; margin: 0; padding: 0; }

/* Lauf nach RECHTS: Start um eine Listenbreite nach links versetzt, Ende bei
   null. Die zweite Liste fuellt dabei die Luecke, die links entsteht. */
@keyframes donors-run {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.donor {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 15.5rem;
  margin-right: .75rem;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.donor__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 9px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #101409;
  /* Ring in der Grundfarbe: Das Ganze soll nach Spielerprofil aussehen, nicht
     nach Kontaktliste. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 0 0 2px var(--panel-2);
}
.donor__avatar--1 { background: linear-gradient(140deg, #8FC24A, #4E7A22); }
.donor__avatar--2 { background: linear-gradient(140deg, #D3A75B, #8A5E1E); }
.donor__avatar--3 { background: linear-gradient(140deg, #66C0F4, #2C6E93); }
.donor__avatar--4 { background: linear-gradient(140deg, #C7CBB4, #6E7458); color: #16200A; }
.donor__avatar--5 { background: linear-gradient(140deg, #E1584E, #8C2F28); color: #fff; }
.donor__avatar--6 { background: linear-gradient(140deg, #7A85FF, #3B45B4); color: #fff; }

.donor__name {
  flex: 1;
  min-width: 0;
  font-size: .88rem;
  font-weight: 620;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.donor__tier {
  flex: none;
  font-size: .62rem;
  font-weight: 690;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .2rem .45rem;
  border-radius: 5px;
  border: 1px solid rgba(143, 194, 74, .38);
  background: rgba(143, 194, 74, .1);
  color: var(--lime);
}


/* Link noch nicht hinterlegt: sichtbar, aber ohne Ziel. */
.btn.is-pending,
a.is-pending {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.55);
}
.btn.is-pending:active { transform: none; }

/* ---------------------------------------------------------------- Fußzeile */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
  font-size: .875rem;
  color: var(--ink-faint);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: var(--gap);
  margin-bottom: 2rem;
}
.site-footer__claim { margin: .65rem 0 0; max-width: 30ch; font-size: .84rem; }
.site-footer h3 {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: .6rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .3rem; }
.site-footer a { color: var(--ink-dim); text-decoration: none; }
.site-footer a:hover { color: var(--lime); }

.legal {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  display: grid;
  gap: .65rem;
  max-width: 88ch;
}
.legal p { margin: 0; font-size: .82rem; line-height: 1.6; }

/* ============================================================== Handbuch

   Das Handbuch liest sich wie ein Buch, nicht wie eine Oberflaeche: eine
   Spalte, Fliesstext, Ueberschriften. KEINE Karten, keine Rahmen, keine
   Kacheln. Farbe betont, sie umrandet nicht.

   Nur drei Dinge behalten einen sichtbaren Kasten, weil sie keiner sind:
     .cmd     ein Befehl, den man kopiert
     .result  was danach da sein soll
     .snag    was tun, wenn es klemmt
   Alles andere traegt Bedeutung ueber Groesse, Abstand und Farbe.

   Der Rahmen drumherum bleibt: Kopfzeile oben, Kapitelspalte links, Inhalt
   rechts, Navigationsleiste unten. Gescrollt wird nur der Inhalt. Umgesetzt von
   `initManualFlow` in site.js, scharfgeschaltet durch `js-flow` aus dem Skript
   im <head> von handbuch.html.

   OHNE JavaScript greift nichts davon: Dann ist es eine gewoehnliche Seite mit
   allen vierzehn Kapiteln untereinander und Fusszeile.
   ========================================================================== */

.page-doc {
  --wrap: 1320px;
  /* Die Lesespalte. Rund 84 Zeichen je Zeile bei 17 px: Darueber verliert das
     Auge beim Zeilensprung die Spur, darunter zerfaellt der Satz. Dass daneben
     Platz frei bleibt, ist kein Fehler, sondern der Grund, warum es sich wie
     ein Buch liest. */
  --measure: 50rem;
  /* Bilder duerfen breiter sein. Ein Anwendungsfenster auf 800 px erkennt
     niemand mehr. */
  --measure-wide: 64rem;
}

.doc {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(2.25rem, 5vw, 4rem);
}

html.js-flow body.page-doc {
  /* dvh statt vh: Auf dem Telefon zaehlt vh die eingeblendete Adressleiste mit,
     und der untere Rand der Leiste laege dann unter dem Bildschirmrand. */
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html.js-flow body.page-doc .site-header { flex: none; position: static; }

/* Die Fusszeile der Website gehoert nicht in eine Dokumentationsansicht: Sie
   waere nur erreichbar, indem man an jedem Kapitel vorbeiscrollt. Impressum und
   Datenschutz stehen dafuer im letzten Kapitel. */
html.js-flow body.page-doc .site-footer { display: none; }

html.js-flow .doc {
  flex: 1;
  /* Ohne min-height:0 waechst ein Flex-Kind mit seinem Inhalt und der innere
     Scrollbereich kommt nie zustande. */
  min-height: 0;
  max-width: none;
  width: 100%;
  padding: 0;
  gap: 0;
  grid-template-columns: clamp(240px, 19vw, 320px) minmax(0, 1fr);
  align-items: stretch;
}

/* --------------------------------------------------------- Seitenspalte */

.doc-nav {
  position: sticky;
  top: 5rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: 1.15rem 1rem 1.25rem;
}

/* In der Buehne wird aus der Karte eine Schiene: volle Hoehe, eine Kante nach
   rechts, eigener Scrollbereich. */
html.js-flow .doc-nav {
  position: static;
  height: 100%;
  max-height: none;
  border-width: 0 1px 0 0;
  border-radius: 0;
  background: var(--bg-2);
  padding: 1.25rem 1rem 1.5rem;
}

.doc-nav__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 .35rem .7rem;
}
.doc-nav__title {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.doc-nav__count {
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
  margin: 0;
}

/* Fortschritt als Segmente statt als gefuellter Balken: Eine Breite muesste je
   Kapitel gesetzt werden, und ein `style`-Attribut waere unter der
   Content-Security-Policy der Domain wirkungslos (style-src 'self'). Segmente
   brauchen nur eine Klasse. */
.doc-nav__rail {
  display: flex;
  gap: 3px;
  margin: 0 .35rem 1rem;
}
.doc-nav__rail i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--line-strong);
  transition: background .2s ease;
}
.doc-nav__rail i.is-done   { background: rgba(143, 194, 74, .45); }
.doc-nav__rail i.is-active { background: var(--lime); }

/* Der Umschalter erscheint nur auf schmalen Schirmen (Regel ganz unten). */
.doc-nav__toggle {
  display: none;
  width: 100%;
  align-items: center;
  gap: .7rem;
  padding: .7rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  text-align: left;
  cursor: pointer;
}
.doc-nav__toggle b { font-weight: 640; }
.doc-nav__toggle .doc-nav__toggleNum {
  font-size: .74rem;
  font-weight: 680;
  letter-spacing: .08em;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.doc-nav__toggle svg {
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex: none;
  color: var(--ink-faint);
  transition: transform .18s ease;
}
.doc-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.doc-nav ol { list-style: none; margin: 0; padding: 0; }
.doc-nav li + li { margin-top: 1px; }

/* Zwei Zeilen je Kapitel: die Nummer klein darueber, der Titel darunter. */
.doc-step {
  display: block;
  padding: .5rem .6rem .55rem;
  border-radius: 8px;
  border-left: 2px solid transparent;
  color: var(--ink-dim);
  text-decoration: none;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.doc-step__num {
  display: block;
  font-size: .66rem;
  font-weight: 680;
  letter-spacing: .12em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.doc-step__label {
  display: block;
  font-size: .89rem;
  line-height: 1.35;
}

.doc-step:hover { background: rgba(143, 194, 74, .07); color: var(--ink); }

.doc-step.is-active {
  background: rgba(143, 194, 74, .12);
  border-left-color: var(--lime);
  color: var(--ink);
}
.doc-step.is-active .doc-step__num   { color: var(--lime); }
.doc-step.is-active .doc-step__label { font-weight: 620; }

/* Gelesen: ein Haken statt der Nummer waere doppeldeutig (welche Nummer hatte
   es noch?), deshalb bleibt die Nummer und der Haken kommt dazu. */
.doc-step.is-done .doc-step__num::after {
  content: " \2713";
  color: var(--lime);
}
.doc-step.is-done .doc-step__label { color: var(--ink-faint); }

/* Noch gesperrt: sichtbar, aber nicht anklickbar. Wer sieht, was kommt, weiss
   auch, wofuer er bestaetigt. */
.doc-step.is-locked {
  opacity: .45;
  cursor: not-allowed;
}
.doc-step.is-locked:hover { background: none; color: var(--ink-dim); }
.doc-step.is-locked .doc-step__num::after {
  content: " \1F512";
  font-size: .9em;
}

/* ------------------------------------------------ Inhalt und Fussleiste */

.doc-body { max-width: none; }

html.js-flow .doc-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

html.js-flow .doc-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Am Ende des Kapitels soll nicht die Seite dahinter mitziehen. */
  overscroll-behavior: contain;
  padding: clamp(1.75rem, 3.5vw, 3.5rem) clamp(1.25rem, 3vw, 3rem) clamp(2rem, 4vw, 3.5rem);
}

.doc-foot { display: none; }

html.js-flow .doc-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: none;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding: .85rem clamp(1.25rem, 3vw, 3rem);
}
.doc-foot:empty { display: none !important; }

.doc-foot__count {
  margin: 0 auto;
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.doc-foot .btn { flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; padding: .6rem 1.1rem; }
.doc-foot .btn--primary { align-items: flex-end; text-align: right; }
.doc-foot__hint {
  display: block;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .72;
  font-weight: 640;
}

/* ------------------------------------------------------------- Kapitel */

/* DIE Lesespalte. Alles im Kapitel haengt daran. */
.chapter {
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: 0 clamp(2rem, 4vw, 3rem);
}
html.js-flow .chapter { padding-bottom: 0; }

/* Im Ablauf steht immer genau ein Kapitel. Ohne JavaScript greift keine dieser
   Regeln und alle vierzehn stehen untereinander, dann mit Trennlinie. */
html.js-flow .chapter { display: none; }
html.js-flow .chapter.is-current { display: block; }
html:not(.js-flow) .chapter { border-top: 1px solid var(--line); padding-top: clamp(2rem, 4vw, 3rem); }
html:not(.js-flow) .chapter:first-of-type { border-top: 0; padding-top: 0; }

.chapter__count {
  margin: 0 0 .8rem;
  font-size: .78rem;
  font-weight: 660;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.chapter__count b { color: var(--lime); font-weight: 680; }

.chapter__title {
  margin: 0 0 .6rem;
  font-size: clamp(1.95rem, 3.6vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-weight: 650;
  text-wrap: balance;
}
h1.chapter__title { font-size: clamp(2.1rem, 4.2vw, 3.1rem); }

.chapter__lead {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  font-size: 1.14rem;
  line-height: 1.62;
  color: var(--ink-dim);
  text-wrap: pretty;
}

/* Fliesstext: etwas groesser und luftiger als auf der Startseite. Ein Handbuch
   wird gelesen, nicht ueberflogen. */
.doc-body p,
.doc-body li {
  font-size: 1.055rem;
  line-height: 1.72;
}

.chapter h3 {
  font-size: 1.28rem;
  font-weight: 645;
  letter-spacing: -.015em;
  margin: clamp(2rem, 3.5vw, 2.5rem) 0 .85rem;
}
.chapter h3:first-child { margin-top: 0; }

/* ------------------------------------------------------------- Schritte

   Nummer, Titel, Text. Getrennt durch Luft und eine Haarlinie, nicht durch
   einen Kasten. Dasselbe Muster in Installation, Ersteinrichtung und
   Bedienung, damit man es einmal lernt und danach wiedererkennt. */
.steps-flow {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
}

.step,
.task {
  border: 0;
  background: none;
  padding: 0;
  border-radius: 0;
}
.step + .step,
.task + .task {
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  padding-top: clamp(2rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--line);
}

.step__num {
  margin: 0 0 .35rem;
  font-size: .72rem;
  font-weight: 690;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}

.step h3,
.step__title,
.task > h3 {
  margin: 0 0 .55rem;
  font-size: 1.28rem;
  font-weight: 645;
  letter-spacing: -.015em;
}
.step p { color: var(--ink-dim); margin-bottom: .8rem; }
.step p:last-child { margin-bottom: 0; }

.task__goal { color: var(--ink-dim); margin: 0 0 1.15rem; }

/* Die Schrittzahlen stehen in der Marge, damit die Folge auf einen Blick
   lesbar bleibt, ohne dass eine Zeile eingerueckt aussieht. */
.task__steps {
  list-style: none;
  counter-reset: tstep;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}
.task__steps li {
  counter-increment: tstep;
  position: relative;
  padding-left: 2.5rem;
}
.task__steps li::before {
  content: counter(tstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .05em;
  font-size: .78rem;
  font-weight: 690;
  letter-spacing: .06em;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
  padding-top: .3em;
}

/* ------------------------------------------------------------- Merkkasten

   Zwei getoente Flaechen ohne Rahmen, wie ein Hinweis in einem Notizbuch.
   Gruen: was danach da sein soll. Bernstein: der Ausweg, falls nicht. */
.result,
.snag {
  border: 0;
  border-radius: var(--radius);
  padding: 1.05rem 1.25rem 1.15rem;
  margin-top: 1.25rem;
  background: rgba(143, 194, 74, .075);
}
.snag { background: rgba(211, 167, 91, .07); margin-top: .7rem; }

.result__label,
.snag__label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .35rem;
  font-size: .7rem;
  font-weight: 690;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lime);
}
.snag__label { color: #D3A75B; }
.result__label svg { width: 14px; height: 14px; flex: none; }

.result p,
.snag p { margin: 0; color: var(--ink-dim); }

/* ------------------------------------------------------- Bilder im Text */

.shot { margin: 1.5rem 0; }

/* Breiter als der Text, aber NUR wenn daneben Platz ist: Ein Anwendungsfenster
   auf Textbreite erkennt niemand mehr. Als Rechnung mit min() geschrieben kippt
   das Vorzeichen, sobald das Fenster schmaler wird als die Lesespalte, und das
   Bild ruecke dann nach innen statt nach aussen. Eine Bedingung ist hier
   ehrlicher als eine clevere Formel. */
@media (min-width: 1500px) {
  .shot {
    width: var(--measure-wide);
    margin-inline: calc((var(--measure) - var(--measure-wide)) / 2);
  }
}
.shot img {
  width: 100%;
  height: auto;
  /* Eckig, wie ueberall auf der Seite: Ein Anwendungsfenster hat gerade Ecken. */
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.shot figcaption {
  margin-top: .65rem;
  font-size: .85rem;
  color: var(--ink-faint);
  text-align: center;
}
.shot--dark img { background: var(--panel); }

/* Drei Launcher-Aufnahmen auf der Startseite: das Hauptbild volle Breite, die
   beiden Detailbilder darunter nebeneinander. .shot bringt Rahmen und
   Unterschrift mit; Breite und Aussenabstand der Handbuch-Regel oben gelten im
   Raster nicht, weil dort das Raster die Masse vorgibt. */
.launcher-shots {
  display: grid;
  gap: 1.1rem 1.25rem;
  margin: 1.75rem 0;
}
.launcher-shots .shot { margin: 0; width: auto; }
@media (min-width: 720px) {
  .launcher-shots { grid-template-columns: 1fr 1fr; }
  .launcher-shots__main { grid-column: 1 / -1; }
}

/* ------------------------------------------------------- Befehl zum Kopieren

   Ein Befehl gehoert nicht in den Fliesstext: Man will ihn nicht lesen, man
   will ihn haben. Beschriftungen aus der OBERFLAECHE bleiben dagegen inline als
   <code> - die tippt niemand ab. */
.cmd {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1rem 0 1.25rem;
  padding: .55rem .6rem .55rem 1.05rem;
  border-radius: var(--radius);
  background: #12150E;
}
.cmd > code {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  font-size: .92rem;
  color: #C9D3B4;
  /* Ein Befehl darf nicht umbrechen: Ein Umbruch sieht aus wie zwei Befehle. */
  white-space: pre;
  overflow-x: auto;
  word-break: normal;
  scrollbar-width: thin;
}
.cmd__copy {
  flex: none;
  font: inherit;
  font-size: .8rem;
  font-weight: 620;
  padding: .45rem .85rem;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: var(--ink-dim);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cmd__copy:hover { background: var(--panel); color: var(--ink); border-color: var(--olive-light); }
.cmd__copy.is-done {
  background: rgba(143, 194, 74, .16);
  border-color: rgba(143, 194, 74, .5);
  color: var(--lime);
}

/* ------------------------------------------- Reiter innerhalb eines Kapitels

   In "Bedienung" stehen acht Anleitungen. Untereinander waeren sie wieder eine
   Rolle zum Scrollen, deshalb liegt je eine davon vorn. Ohne JavaScript sind es
   Sprungmarken auf Abschnitte, die alle dastehen. */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem 1.25rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0 0 .7rem;
  border-bottom: 1px solid var(--line);
}
.jump a {
  display: block;
  padding: .35rem 0;
  color: var(--ink-faint);
  text-decoration: none;
  font-size: .94rem;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.jump a:hover { color: var(--ink); }
.jump a.is-active {
  color: var(--lime);
  border-bottom-color: var(--lime);
  font-weight: 620;
}

/* Nur das gewaehlte Blatt steht vorn. Wieder ausschliesslich mit JavaScript. */
html.js-flow [data-subflow] .task { display: none; }
html.js-flow [data-subflow] .task.is-current { display: block; }
html.js-flow [data-subflow] .task { margin-top: 0; padding-top: 0; border-top: 0; }

/* ------------------------------------------------------ Hinweis und Beta

   Der einzige Ort mit einer sichtbaren Flaeche im Fliesstext: Ein Hinweis, den
   man bestaetigen muss, darf nicht aussehen wie ein Absatz. */
.gate {
  margin-top: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: rgba(211, 167, 91, .06);
  padding: clamp(1.35rem, 2.8vw, 2rem) clamp(1.35rem, 2.8vw, 2.25rem);
}

.gate__top {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.gate__icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: rgba(211, 167, 91, .16);
  color: #D3A75B;
}
.gate__icon svg { width: 19px; height: 19px; }
.gate__top h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -.015em;
}
.gate__lead { color: var(--ink-dim); }

.gate__grid { margin-top: 1.4rem; }
.gate__block { margin-top: 1.2rem; }
.gate__block:first-child { margin-top: 0; }
.gate__block h3 {
  margin: 0 0 .3rem;
  font-size: .72rem;
  font-weight: 680;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #D3A75B;
}
.gate__block p { color: var(--ink-dim); margin: 0; }
.gate__block p + p { margin-top: .5rem; }

/* Zwei Listen nebeneinander, ohne Kaesten. */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.5rem 2.5rem;
  margin-top: 1.75rem;
}
.split__col { border: 0; background: none; padding: 0; border-radius: 0; }
.split__col h3, .split__col h4 {
  margin: 0 0 .5rem;
  font-size: .72rem;
  font-weight: 680;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lime);
}
.split__col--yours h3, .split__col--yours h4 { color: #D3A75B; }
.split__col ul { list-style: none; margin: 0; padding: 0; color: var(--ink-dim); }
.split__col li { position: relative; padding-left: 1.15rem; margin-bottom: .4rem; }
.split__col li:last-child { margin-bottom: 0; }
.split__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime);
}
.split__col--yours li::before { background: #D3A75B; }

.gate__confirm { margin-top: 1.75rem; padding-top: 1.35rem; border-top: 1px solid rgba(211, 167, 91, .25); }

/* Ein Kaestchen je Zusage. Zwei Haken sind eine bewusste Handlung, ein Haken
   ist ein Reflex. */
.gate__check {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  cursor: pointer;
  color: var(--ink);
  padding: .4rem 0;
}
.gate__check input {
  width: 1.15rem;
  height: 1.15rem;
  margin: .28rem 0 0;
  flex: none;
  accent-color: var(--lime);
  cursor: pointer;
}
.gate__confirm .btn-row { margin: 1rem 0 0; }
.gate__hint { font-size: .85rem; color: var(--ink-faint); margin: .8rem 0 0; }

.gate__done {
  display: none;
  align-items: center;
  gap: .6rem;
  margin-top: 1.6rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(211, 167, 91, .25);
  color: var(--ink-dim);
}
.gate__done svg { width: 17px; height: 17px; color: var(--lime); flex: none; }
html.gate-js:not(.is-gated) .gate__confirm { display: none; }
html.gate-js:not(.is-gated) .gate__done    { display: flex; }

.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.5);
  box-shadow: none;
}
.btn:disabled:active { transform: none; }

/* HIER STAND: html.is-gated .doc-gated { display: none; }
   Entfernt beim SEO-Umbau am 14.08.2026. Die Regel blendete die Kapitel 3 bis
   14 aus, solange der Beta-Hinweis nicht bestaetigt war. Bestaetigt wird per
   localStorage, und den bringt kein Crawler mit: Fuer Suchmaschinen war das
   Handbuch damit dauerhaft zwoelf Kapitel kuerzer, als es ist.

   Der Hinweis selbst ist geblieben. Er steht sichtbar in Kapitel 2 und gibt
   nach wie vor erst nach zwei Haken den Weg zum Download frei; er versteckt
   nur keinen Text mehr. Die Klasse .doc-gated bleibt im Markup, damit die
   Gruppe der Kapitel benannt bleibt. */

/* Die feste Weiter-Zurueck-Leiste gehoert zum Blaetterer und wird von
   site.js befuellt. Laeuft der Blaetterer nicht, bliebe hier ein leerer
   Balken stehen. */
html:not(.js-flow) .doc-foot { display: none; }

/* ---------------------------------------- Bausteine der Startseite, entkastet

   .card, .support__card, .note, .callout, .cta und .faq sind fuer eine
   Kachelseite gebaut. Im Handbuch verlieren sie Rahmen, Grund und Symbol und
   werden zu dem, was sie hier sind: Ueberschrift und Absatz. */
.page-doc .cards { display: block; }
.page-doc .card {
  border: 0;
  background: none;
  padding: 0;
  border-radius: 0;
  display: block;
}
.page-doc .card:hover { transform: none; background: none; border-color: transparent; }
.page-doc .card + .card {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
/* Die Symbolkacheln sind Schmuck einer Kachelseite. Hier stoeren sie den Satz. */
.page-doc .card__icon,
.page-doc .support__icon { display: none; }
.page-doc .card__head { margin-bottom: .4rem; }
.page-doc .card__head h3 { font-size: 1.18rem; font-weight: 645; }
.page-doc .card > p { font-size: 1.055rem; color: var(--ink-dim); }
.page-doc .card ul { font-size: 1rem; margin-top: .5rem; }

.page-doc .note {
  border-left: 0;
  border-radius: var(--radius);
  background: rgba(222, 216, 196, .045);
  padding: 1.05rem 1.25rem;
  margin-top: 1.5rem;
  font-size: 1rem;
  color: var(--ink-dim);
  max-width: none;
}
.page-doc .note--todo { background: rgba(211, 167, 91, .08); color: #E2C68C; }

/* Ankreuzliste: eine Spalte, wie eine Liste im Buch. */
.page-doc .reqs { display: block; margin-bottom: 1.5rem; }
.page-doc .reqs li {
  border-bottom: 0;
  padding: .25rem 0;
  align-items: flex-start;
  font-size: 1.03rem;
}
.page-doc .reqs svg { margin-top: .45em; }

/* Aufklappbar, ohne Kasten: nur Zeile, Trennlinie und Zeichen. */
.page-doc .faq { display: block; max-width: none; }
.page-doc .faq__item {
  border: 0;
  border-radius: 0;
  background: none;
  border-bottom: 1px solid var(--line);
}
.page-doc .faq__item[open] { border-color: var(--line); }
.page-doc .faq__item > summary {
  padding: .95rem 0;
  font-size: 1.055rem;
  font-weight: 600;
}
.page-doc .faq__item > summary:hover { background: none; color: var(--lime); }
.page-doc .faq__item > p { padding: 0 0 1.1rem; font-size: 1.03rem; max-width: none; }

.page-doc .support { display: block; margin-top: 1.25rem; }
.page-doc .support__card {
  border: 0;
  background: none;
  padding: 0;
  border-radius: 0;
  display: block;
}
.page-doc .support__card:hover { background: none; border-color: transparent; }
.page-doc .support__card + .support__card {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.page-doc .support__card h3 { font-size: 1.18rem; font-weight: 645; margin-bottom: .3rem; }
.page-doc .support__card p { color: var(--ink-dim); }
.page-doc .support__card .btn { width: auto; }
.page-doc .support__card .btn-row { margin: .85rem 0 0; width: auto; }

.page-doc .callout {
  max-width: none;
  border: 0;
  border-radius: var(--radius);
  background: rgba(143, 194, 74, .07);
  padding: 1.25rem 1.35rem 1.35rem;
  text-align: left;
  margin-top: 1.75rem;
}
.page-doc .callout h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.page-doc .callout p { color: var(--ink-dim); max-width: none; margin-inline: 0; }
.page-doc .callout .btn-row { justify-content: flex-start; margin-bottom: 0; }

.page-doc .cta {
  border: 0;
  background: none;
  border-radius: 0;
  padding: 0;
  text-align: left;
  margin-top: 1.75rem;
}
.page-doc .cta h3 { font-size: 1.28rem; margin-bottom: .35rem; }
.page-doc .cta p { max-width: none; margin-inline: 0; color: var(--ink-dim); }
.page-doc .cta .btn-row { justify-content: flex-start; }
.page-doc .pending { margin-inline: 0; max-width: none; }

/* Der Blockzitat-Absatz in "Ueber mich" steht links, nicht mittig: Er ist Teil
   des Textes, kein Werbebanner. */
.page-doc .about { max-width: none; text-align: left; margin-inline: 0; }
.page-doc .about blockquote::before { margin-bottom: .1rem; }
.page-doc .about > p:last-child { max-width: none; margin-inline: 0; }
.page-doc .social { justify-content: flex-start; margin-top: 1.5rem; }

/* Unterstuetzer: eine Liste, keine Kaertchen. */
.patrons { list-style: none; margin: 1.25rem 0 0; padding: 0; display: block; }
.patrons .donor {
  width: auto;
  margin: 0;
  padding: .7rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.patrons .donor:last-child { border-bottom: 0; }
.patrons .donor__avatar {
  width: 30px;
  height: 30px;
  font-size: .66rem;
  box-shadow: none;
}
.patrons .donor__avatar--ph {
  background: none;
  border: 1px dashed rgba(211, 167, 91, .5);
  color: #D3A75B;
}

.badge--lock { color: #D3A75B; border-color: rgba(211, 167, 91, .42); background: rgba(211, 167, 91, .1); }

.chapter__head {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}

.placeholder { margin-top: 1.25rem; }

/* ==========================================================================
   Handbuch auf hellem Grund

   Ein Handbuch wird gelesen, nicht ueberflogen: Die Lesflaeche liegt deshalb
   auf Papier. Umgeschaltet wird ueber die VARIABLEN, die die Regeln oben
   ohnehin benutzen - sie stehen hier auf `.doc` und vererben sich an alles
   darin. Kopf- und Fusszeile stehen ausserhalb und bleiben dunkel wie auf der
   ganzen Seite.

   Der Rest dieses Blocks ist genau das, was oben FEST verdrahtet ist und
   deshalb nicht mitwandert: getoente Flaechen und der gruene Akzent. #8FC24A
   kommt auf Papier auf rund 2:1 und ist als Text unlesbar; als FLAECHE (Knopf,
   Fortschrittsschiene) bleibt das helle Gruen dagegen richtig. Ebenso das
   Bernstein #D3A75B, das auf Dunkel warnt und auf Papier verschwindet.

   Getoente Flaechen brauchen hier mehr Deckung als auf Dunkel: Was bei .07
   ueber Schwarz noch eine Flaeche ist, ist ueber Papier schlicht nicht da.

   Der Befehlskasten bleibt bewusst dunkel. Ein Terminal soll aussehen wie ein
   Terminal, und der Befehl hebt sich damit vom Fliesstext ab.
   ========================================================================== */

.page-doc .doc {
  --bg:          #F5F2E8;
  --bg-2:        #EFEAD9;
  --panel:       #FFFFFF;
  --panel-2:     #F1ECDD;
  --line:        #DFD8C4;
  --line-strong: #C6BCA1;
  --ink:         #23281C;
  --ink-dim:     #4E5442;
  /* Die dritte Stufe traegt hier mehr Text als auf Dunkel (Reiter, Bildunter-
     schriften, Zaehler). Auf Papier gerechnet: 5,1:1 gegen den Grund, 4,7:1
     gegen die Seitenspalte. Ein direktes Umrechnen des dunklen Werts landete
     bei 4,0:1 und damit unter der Schwelle. */
  --ink-faint:   #636956;
  --shadow: 0 1px 2px rgba(35, 40, 28, .06), 0 14px 34px -16px rgba(35, 40, 28, .25);

  /* Gruen und Bernstein, so dunkel, dass sie auf Papier tragen. */
  --accent:      #446E14;
  --accent-soft: rgba(68, 110, 20, .12);
  --amber:       #8A5A12;
  --amber-soft:  rgba(176, 124, 32, .13);

  background: var(--bg);
  color: var(--ink);
}

.page-doc .doc a { color: var(--accent); text-decoration-color: rgba(68, 110, 20, .4); }
.page-doc .doc :focus-visible { outline-color: var(--accent); }
.page-doc .doc ::selection { background: rgba(68, 110, 20, .18); color: var(--ink); }

/* Beschriftungen aus dem Programm im Fliesstext. Die zweite Regel holt den
   Befehlskasten zurueck: Er behaelt seinen dunklen Grund und braucht deshalb
   auch weiter die helle Schrift. */
.page-doc .doc code,
.page-doc .doc kbd,
.page-doc .doc samp { color: #33402A; }
.page-doc .doc .cmd > code { color: #C9D3B4; }

/* Seitenspalte */
.page-doc .doc .doc-step:hover { background: rgba(68, 110, 20, .08); }
.page-doc .doc .doc-step.is-active { background: var(--accent-soft); border-left-color: var(--accent); }
.page-doc .doc .doc-step.is-active .doc-step__num { color: var(--accent); }
.page-doc .doc .doc-step.is-done .doc-step__num::after { color: var(--accent); }
.page-doc .doc .doc-nav__rail i.is-done { background: rgba(68, 110, 20, .4); }
.page-doc .doc .doc-nav__rail i.is-active { background: var(--accent); }

/* Zaehler, Schrittzahlen, Reiter, Haken */
.page-doc .doc .chapter__count b,
.page-doc .doc .step__num,
.page-doc .doc .task__steps li::before,
.page-doc .doc .result__label,
.page-doc .doc .split__col h3,
.page-doc .doc .split__col h4,
.page-doc .doc .reqs svg,
.page-doc .doc .gate__done svg,
.page-doc .doc .doc-nav__toggleNum,
.page-doc .doc .pending a { color: var(--accent); }
.page-doc .doc .split__col li::before { background: var(--accent); }
.page-doc .doc .jump a.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.page-doc .doc .faq__item > summary:hover { color: var(--accent); }
.page-doc .doc .about blockquote::before { color: var(--accent); opacity: .4; }
.page-doc .doc .gate__check input { accent-color: var(--accent); }

/* Merkkaesten, Hinweis, Aufruf */
.page-doc .doc .result,
.page-doc .doc .callout { background: var(--accent-soft); }
.page-doc .doc .snag { background: var(--amber-soft); }
.page-doc .doc .note { background: rgba(35, 40, 28, .05); }
.page-doc .doc .note--todo { background: var(--amber-soft); color: var(--amber); }
.page-doc .doc .snag__label,
.page-doc .doc .gate__block h3,
.page-doc .doc .split__col--yours h3,
.page-doc .doc .split__col--yours h4 { color: var(--amber); }
.page-doc .doc .split__col--yours li::before { background: var(--amber); }

/* Hinweis und Bestaetigung */
.page-doc .doc .gate { background: rgba(176, 124, 32, .09); }
.page-doc .doc .gate__icon { background: rgba(176, 124, 32, .18); color: var(--amber); }
.page-doc .doc .gate__confirm,
.page-doc .doc .gate__done { border-top-color: rgba(176, 124, 32, .3); }

/* Knoepfe. Der Kopierknopf sitzt IM dunklen Befehlskasten und bleibt deshalb
   dunkel - er zoege sonst als weisse Flaeche allen Blick auf sich. Sein
   Zustand "kopiert" bleibt unangetastet: `--lime` ist hier nicht umdefiniert,
   und auf dem dunklen Grund traegt es. */
.page-doc .doc .btn--ghost:hover { background: rgba(35, 40, 28, .06); border-color: var(--line-strong); }
.page-doc .doc .cmd__copy {
  background: rgba(222, 216, 196, .1);
  border-color: rgba(222, 216, 196, .22);
  color: #C9D3B4;
}
.page-doc .doc .cmd__copy:hover {
  background: rgba(222, 216, 196, .18);
  border-color: rgba(222, 216, 196, .45);
  color: #EDEADE;
}

/* Platzhalter und Marken bleiben Bernstein, nur dunkler. */
.page-doc .doc .ph,
.page-doc .doc .badge--lock,
.page-doc .doc .badge--todo {
  color: var(--amber);
  background: rgba(176, 124, 32, .12);
  border-color: rgba(176, 124, 32, .45);
}
.page-doc .doc .pending { background: rgba(176, 124, 32, .1); border-color: rgba(176, 124, 32, .38); }
/* Der leere Platz in der Unterstuetzerliste bleibt ein gestrichelter Umriss
   ohne Fuellung - er markiert eine Luecke, keinen Eintrag. */
.page-doc .doc .patrons .donor__avatar--ph { color: var(--amber); border-color: rgba(176, 124, 32, .55); }

/* Die Schatten der klebenden Kapitelzeile sind fuer dunklen Grund gerechnet.
   Beide Regeln bleiben eng gefasst: Im Ablauf hat die Zeile bewusst KEINEN
   Schatten, sondern eine Kante, und eine breiter gefasste Regel haette ihr
   wieder einen gegeben. */
@media (max-width: 900px) {
  html:not(.js-flow) .page-doc .doc-nav { box-shadow: 0 10px 24px -18px rgba(35, 40, 28, .5); }
  html.js-flow .page-doc .doc-nav.is-open ol { box-shadow: 0 16px 30px -20px rgba(35, 40, 28, .5); }
}

/* -------------------------------------------------- Rechtstexte und 404 */

.legal-page { max-width: 76ch; padding-block: clamp(2rem, 5vw, 3.25rem); }
.legal-page > header { margin-bottom: 2rem; }
/* Ruhiger als auf der Startseite — hier wird gelesen, nicht geworben. */
.legal-page h1 { font-size: clamp(1.85rem, 4vw, 2.5rem); }
.legal-page h2 { font-size: 1.14rem; margin: 2.25rem 0 .5rem; }
.legal-page h2:first-of-type { margin-top: 1.5rem; }
.legal-page p { color: var(--ink-dim); font-size: .94rem; }
.legal-page > header p { font-size: 1rem; }
.legal-page address {
  font-style: normal;
  display: grid;
  gap: .2rem;
  margin: .25rem 0 0;
  color: var(--ink);
}
.legal-page dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .8rem; margin: .25rem 0 0; }
.legal-page dt { color: var(--ink-faint); font-size: .94rem; }
.legal-page dd { margin: 0; color: var(--ink); font-size: .94rem; }

/* Jeder Platzhalter faellt ins Auge und ist mit der Seitensuche auffindbar —
   nichts davon darf unbemerkt live gehen. */
.ph {
  color: #D3A75B;
  background: rgba(211, 167, 91, .1);
  border: 1px dashed rgba(211, 167, 91, .42);
  border-radius: 5px;
  padding: .04em .38em;
}

.notfound {
  max-width: 54ch;
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(3rem, 10vw, 6rem);
}
.notfound p { color: var(--ink-dim); }
/* Muss NACH .notfound p stehen: die Klasse allein hat weniger Gewicht als
   Elternklasse + Element und verlor sonst ihre Farbe. */
.notfound p.notfound__code {
  font-size: clamp(3.5rem, 13vw, 6.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--lime);
  margin: 0 0 .5rem;
}
.notfound .btn-row { justify-content: center; }

/* ----------------------------------------------------------------- Klein */

/* Der Hero bricht frueher um als das Handbuch: In einer schmalen Spalte zeigt
   ein ganzes Anwendungsfenster nichts mehr. */
@media (max-width: 999px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
}

/* Tablet: Die Seitenspalte wird schmaler, bleibt aber eine Spalte. Erst darunter
   wird aus ihr ein Umschalter. */
@media (max-width: 1100px) and (min-width: 901px) {
  .doc { grid-template-columns: 220px minmax(0, 1fr); gap: 2rem; }
}

/* Telefon und schmales Tablet: Aus der Spalte wird ein Auswahlfeld ueber dem
   Kapitel. Es klebt oben, damit man auch nach langem Scrollen weiss, wo man
   ist, und ohne zu scrollen umschalten kann. Der Abstand von 4.25rem ist die
   Hoehe der Kopfzeile - darunter, nicht darueber. */
@media (max-width: 900px) {
  .doc {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding-block: 1.25rem clamp(2rem, 6vw, 3rem);
  }
  .doc-nav {
    position: sticky;
    top: 4.25rem;
    z-index: 20;
    max-height: none;
    overflow: visible;
    padding: .7rem;
    /* Deckend, nicht durchscheinend: Darunter laeuft der Kapiteltext durch. */
    background: var(--panel-2);
    box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .9);
  }
  .doc-nav__head { display: none; }
  .doc-nav__rail { margin: .6rem .15rem 0; }
  .doc-nav__toggle { display: flex; }
  .doc-nav ol {
    display: none;
    margin-top: .6rem;
    max-height: 55vh;
    overflow-y: auto;
  }
  .doc-nav.is-open ol { display: block; }
  .doc-body { max-width: none; }

  /* In der Buehne wird aus der Spalte eine Zeile: Umschalter oben, Inhalt
     darunter, Leiste unten. Die aufgeklappte Liste legt sich DARUEBER, statt
     das Layout auseinanderzuschieben. */
  html.js-flow .doc {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  html.js-flow .doc-nav {
    position: relative;
    z-index: 20;
    height: auto;
    border-width: 0 0 1px;
    padding: .7rem;
    box-shadow: none;
  }
  html.js-flow .doc-nav.is-open ol {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    padding: .6rem .7rem .8rem;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line-strong);
    box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .95);
    max-height: 60vh;
  }
  html.js-flow .doc-scroll { padding: 1.5rem 1.15rem 2rem; }
  /* Der Umschalter direkt darueber zeigt dieselbe Angabe. Zweimal "01 / 14" im
     Abstand von zwei Zeilen liest niemand als Fortschritt, sondern als Fehler. */
  html.js-flow .chapter__count { display: none; }
  html.js-flow .doc-foot { padding: .7rem 1.15rem; gap: .6rem; }
  html.js-flow .doc-foot .btn { padding: .55rem .8rem; font-size: .9rem; }
}

@media (max-width: 640px) {
  /* Die Leiste bleibt EINE Zeile: Sie ist der feste untere Rand der Ansicht,
     und zwei Zeilen naehmen dem Kapitel die halbe Hoehe.
     `.btn { width: 100% }` weiter oben gilt fuer Knopfreihen im Fliesstext; hier
     wuerde es beide Knoepfe gegeneinanderdruecken, bis der Zaehler dazwischen
     auf drei Zeilen umbricht. */
  html.js-flow .doc-foot .btn { width: auto; flex: 0 1 auto; min-width: 0; }
  html.js-flow .doc-foot .btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
  /* Dieselbe Angabe steht oben im Umschalter. Zweimal auf einem Telefon ist
     einmal zu viel. Sie war aber auch der Abstandhalter zwischen den Knoepfen,
     deshalb schiebt sich "weiter" jetzt selbst nach rechts. */
  html.js-flow .doc-foot__count { display: none; }
  html.js-flow .doc-foot .btn--primary { margin-left: auto; }
}

@media (max-width: 640px) {
  .site-header__inner { flex-wrap: wrap; row-gap: .5rem; }
  /* Umbrechen statt seitlich scrollen: sonst liegt ausgerechnet "Download"
     ausserhalb des Bildschirms und muesste erst gewischt werden. */
  .site-nav { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; gap: .2rem .9rem; }
  .lang { margin-left: auto; }
  .release__date { margin-left: 0; width: 100%; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Leuchten darf sie, pulsieren nicht - die Regel oben wuerde die Marke sonst
     im Endzustand der Bewegung einfrieren (Ring auf 14 px, unsichtbar). */
  .shield {
    animation: none !important;
    box-shadow: 0 0 14px rgba(143, 194, 74, .5) !important;
  }
  .shot-badge {
    animation: none !important;
    filter: drop-shadow(0 0 12px rgba(143, 194, 74, .55)) drop-shadow(0 2px 6px rgba(0, 0, 0, .5)) !important;
  }
  /* Der Unterstuetzer-Lauf braucht eine eigene Regel: Die Zeile oben wuerde ihn
     nicht anhalten, sondern sofort ans Ende springen lassen. Stattdessen steht
     er still und laesst sich von Hand schieben. */
  .donors__track { animation: none !important; transform: none !important; }
  .donors__viewport { overflow-x: auto; }
}

@media print {
  .site-header, .site-footer, .lang, .btn-row, .hero::before, .hero::after { display: none !important; }
  body { background: #fff; color: #000; }
}