/* ---------------------------------------------------------------
   Lockara - gemeinsames Stylesheet aller Seiten (Neuentwurf 26.10.2026).

   Leitbild: Eingangspost nach DIN 5008. Die Seite ist selbst ein Stapel
   Briefboegen auf dem Buerotisch - genau das, was Lockara durchsucht.
   Weisse Boegen mit Falz- und Lochmarke, Betreffzeilen, Bezugszeichen.

   Zwei Farben, zwei Aufgaben, sonst nichts:
     Stempelblau  - alles, was man anklicken kann, und der Stempel.
     Markergelb   - ausschliesslich Fundstellen (<mark>).
   Scans sind sichtbar anderes Papier: grau, leicht schief, koernig.

   Schriften: Archivo (variable Breite) fuer alles, Fragment Mono nur fuer
   Dateinamen, Aktenzeichen und Pfade - also echte Daten.

   Aufbau der Datei:
     1. Tokens (hell/dunkel)       6. Startseite: Themenboegen
     2. Grundlagen, Satz           7. Download, Hinweis, Telefon
     3. Kopf, Menue, Fuss          8. Fragen
     4. Bausteine (Knoepfe ...)    9. Unterseiten
     5. Startseite: Auftakt       10. Bewegung, Druck
   --------------------------------------------------------------- */

/* ========== 1. Tokens ========== */
:root {
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --tisch:        #e3e5e2;   /* Buerotisch, kuehles Grau */
  --tisch-tief:   #d6d9d5;
  --bogen:        #ffffff;   /* 80-g-Papier */
  --bogen-zart:   #f6f7f5;
  --scan:         #ecece7;   /* Kopiererpapier */
  --scan-tinte:   #3b3d40;
  --tinte:        #121418;
  --text:         #2a2e35;
  --leise:        #5a606a;
  --linie:        #d3d6d1;
  --linie-zart:   #e6e8e4;
  --stempel:      #2437c9;   /* Stempelfarbe ultramarin */
  --stempel-tief: #1a2898;
  --stempel-weich:#e7eafc;
  --auf-stempel:  #ffffff;
  --marker:       #ffe74a;   /* Textmarker - nur fuer Fundstellen */
  --auf-marker:   #121418;
  --auswahl:      #ffe74a;

  --schatten-bogen: 0 1px 1px rgba(20,24,30,.05), 0 2px 4px rgba(20,24,30,.04), 0 18px 40px -22px rgba(20,24,30,.28);
  --schatten-hoch:  0 1px 2px rgba(20,24,30,.08), 0 24px 60px -24px rgba(20,24,30,.42);

  --breite: 1180px;
  --rand: clamp(14px, 4vw, 40px);
  --innen: clamp(22px, 4.4vw, 56px);
  --aus: cubic-bezier(.16, 1, .3, 1);      /* exponentiell auslaufend */
  --feder: cubic-bezier(.3, 1.3, .5, 1);    /* leichtes Nachschwingen */

  --ebene-kopf: 20;
  --ebene-springen: 30;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tisch:        #0f1114;
    --tisch-tief:   #0a0b0d;
    --bogen:        #1a1d22;
    --bogen-zart:   #20242a;
    --scan:         #25272a;
    --scan-tinte:   #c9cbc6;
    --tinte:        #f1f2ef;
    --text:         #d4d6d3;
    --leise:        #9da2aa;
    --linie:        #30343b;
    --linie-zart:   #262a30;
    --stempel:      #9aa6ff;
    --stempel-tief: #b8c0ff;
    --stempel-weich:#1f2447;
    --auf-stempel:  #ffffff;
    --auswahl:      #5a5220;
    --schatten-bogen: 0 1px 2px rgba(0,0,0,.5), 0 18px 40px -22px rgba(0,0,0,.8);
    --schatten-hoch:  0 1px 2px rgba(0,0,0,.5), 0 24px 60px -24px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"] {
  --tisch:        #0f1114;
  --tisch-tief:   #0a0b0d;
  --bogen:        #1a1d22;
  --bogen-zart:   #20242a;
  --scan:         #25272a;
  --scan-tinte:   #c9cbc6;
  --tinte:        #f1f2ef;
  --text:         #d4d6d3;
  --leise:        #9da2aa;
  --linie:        #30343b;
  --linie-zart:   #262a30;
  --stempel:      #9aa6ff;
  --stempel-tief: #b8c0ff;
  --stempel-weich:#1f2447;
  --auf-stempel:  #ffffff;
  --auswahl:      #5a5220;
  --schatten-bogen: 0 1px 2px rgba(0,0,0,.5), 0 18px 40px -22px rgba(0,0,0,.8);
  --schatten-hoch:  0 1px 2px rgba(0,0,0,.5), 0 24px 60px -24px rgba(0,0,0,.9);
}

/* Knopfflaeche bleibt im Dunkeln kraeftig, damit weisse Schrift lesbar bleibt. */
:root { --knopf: #2437c9; --knopf-druck: #1a2898; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --knopf: #3f51e8; --knopf-druck: #3343d0; } }
:root[data-theme="dark"] { --knopf: #3f51e8; --knopf-druck: #3343d0; }

/* ========== 2. Grundlagen, Satz ========== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth; scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  interpolate-size: allow-keywords;   /* Aufklappen bis "auto" animierbar */
}
body {
  background: var(--tisch);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--auswahl); color: var(--tinte); }
:root { accent-color: var(--stempel); caret-color: var(--stempel); }
@supports (scrollbar-color: auto) { html { scrollbar-color: var(--tisch-tief) var(--tisch); } }

a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img, svg, picture { display: block; max-width: 100%; }

/* Keine automatische Silbentrennung: auf dem Telefon zerlegte sie fast
   jede Zeile. Lange Woerter brechen nur notfalls. Die langen Rechtstexte
   duerfen trennen. */
p, li, dd, td, th, figcaption, .antwort { text-wrap: pretty; overflow-wrap: break-word; hyphens: manual; }
.rechtstext p, .rechtstext li { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 5 5; }

h1, h2, h3 { color: var(--tinte); font-family: var(--sans); hyphens: manual; text-wrap: balance; }
h1 {
  font-size: clamp(2.2rem, 1rem + 2.7vw, 3.6rem);
  font-stretch: 116%; font-weight: 760;
  line-height: 1.0; letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.7rem);
  font-stretch: 112%; font-weight: 720;
  line-height: 1.06; letter-spacing: -0.022em;
}
h3 { font-size: 1.14rem; font-weight: 650; line-height: 1.3; letter-spacing: -0.005em; }
strong, b { color: var(--tinte); font-weight: 650; }

code, kbd, .mono { font-family: var(--mono); font-size: .86em; letter-spacing: -0.01em; }
code { color: var(--tinte); background: var(--bogen-zart); border: 1px solid var(--linie-zart); padding: .05em .35em; border-radius: 4px; white-space: nowrap; }
kbd {
  display: inline-block; min-width: 1.7em; text-align: center;
  padding: .05em .4em; border-radius: 5px;
  background: var(--bogen); color: var(--tinte);
  border: 1px solid var(--linie); box-shadow: 0 1.5px 0 var(--linie);
}

mark {
  background: linear-gradient(transparent 8%, var(--marker) 8%, var(--marker) 92%, transparent 92%);
  color: var(--auf-marker); padding: 0 .12em; margin: 0 -.06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Beschriftung im Stil der Bezugszeichenzeile: schmal, klein, gedaempft.
   Sie beschriftet Felder - nie eine Ueberschrift. */
.zeichen { font-size: .78rem; font-stretch: 78%; font-weight: 600; letter-spacing: .01em; color: var(--leise); line-height: 1.3; }

.bahn { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

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

.springen {
  position: absolute; left: 12px; top: -60px; z-index: var(--ebene-springen);
  background: var(--knopf); color: #fff; padding: 10px 16px; border-radius: 6px;
  font-weight: 600; text-decoration: none; transition: top .2s var(--aus);
}
.springen:focus { top: 12px; }

/* ========== 3. Kopf, Menue, Fuss ========== */
body > header {
  position: sticky; top: 0; z-index: var(--ebene-kopf);
  background: color-mix(in srgb, var(--tisch) 80%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  transition: box-shadow .3s var(--aus);
}
body > header.gerollt { box-shadow: 0 1px 0 var(--linie), 0 8px 24px -18px rgba(0,0,0,.3); }
@media (prefers-reduced-transparency: reduce) { body > header { background: var(--tisch); backdrop-filter: none; } }

.kopf-zeile { display: flex; align-items: center; gap: 20px; height: 64px; }
.marke {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--tinte); font-weight: 760; font-stretch: 112%; font-size: 1.16rem; letter-spacing: -0.02em;
}
.marke svg { width: 30px; height: 30px; flex: none; }
.haupt-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.haupt-nav a, .sprache {
  text-decoration: none; color: var(--text); font-size: .94rem; font-weight: 520;
  padding: 8px 12px; border-radius: 6px;
  transition: background-color .15s, color .15s;
}
.haupt-nav a:hover, .sprache:hover { background: var(--tisch-tief); color: var(--tinte); }
.haupt-nav a[aria-current="page"] { color: var(--tinte); font-weight: 650; }
.sprache { font-stretch: 80%; font-weight: 650; color: var(--leise); }
.kopf-zeile .knopf { padding: 9px 16px; font-size: .92rem; gap: 0; white-space: nowrap; }

.menue-knopf {
  display: none; align-items: center; gap: 8px;
  font: inherit; font-size: .94rem; font-weight: 600; color: var(--tinte);
  background: var(--bogen); border: 1px solid var(--linie); border-radius: 8px;
  padding: 8px 12px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .1s var(--aus), background-color .15s;
}
.menue-knopf:active { transform: scale(.96); background: var(--bogen-zart); }
.menue-knopf svg { width: 18px; height: 18px; }
.menue-knopf .zu { display: none; }
.menue-knopf[aria-expanded="true"] .auf { display: none; }
.menue-knopf[aria-expanded="true"] .zu { display: block; }

/* Das Menue klappt aus dem Knopf heraus und auf demselben Weg zurueck.
   Uebergaenge statt display: ein zweiter Tipp kehrt die Bewegung mitten im
   Lauf um. */
.menue {
  position: absolute; right: var(--rand); top: 60px;
  width: min(340px, calc(100vw - 2 * var(--rand)));
  background: var(--bogen); border-radius: 12px; box-shadow: var(--schatten-hoch);
  padding: 8px; display: grid;
  transform-origin: calc(100% - 40px) 0;
  opacity: 0; transform: translateY(-6px) scale(.96); visibility: hidden;
  transition: opacity .2s var(--aus), transform .32s var(--aus), visibility 0s .32s;
}
.menue.offen { opacity: 1; transform: none; visibility: visible; transition: opacity .2s var(--aus), transform .32s var(--aus), visibility 0s; }
.menue a {
  text-decoration: none; color: var(--tinte); font-weight: 560; font-size: 1.05rem;
  padding: 12px 14px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;
}
.menue a:active, .menue a:hover { background: var(--bogen-zart); }
.menue .menue-laden { margin-top: 6px; background: var(--knopf); color: #fff; justify-content: center; font-weight: 650; }
.menue .menue-laden:hover, .menue .menue-laden:active { background: var(--knopf-druck); }
.menue .menue-sprache { color: var(--leise); font-size: .95rem; }

@media (max-width: 880px) {
  .haupt-nav, .kopf-zeile > .sprache { display: none; }
  .menue-knopf { display: inline-flex; }
  .kopf-zeile { gap: 10px; height: 58px; }
  .kopf-zeile .knopf { margin-left: auto; }
}
@media (min-width: 881px) { .menue { display: none; } }
@media (max-width: 880px) { .kopf-zeile .knopf .lang { display: none; } .kopf-zeile .knopf { padding: 8px 14px; } }

/* Fuss: die Fusszeile eines Geschaeftsbriefs, in Spalten. */
footer { margin-top: clamp(56px, 9vw, 120px); padding: 36px 0 48px; border-top: 1px solid var(--linie); font-size: .9rem; color: var(--leise); }
.fuss { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px 48px; }
.fuss .marke { font-size: 1.05rem; margin-bottom: 10px; }
.fuss .marke svg { width: 26px; height: 26px; }
.fuss p { max-width: 44ch; }
.fuss a { color: var(--text); }
.fuss nav { display: grid; gap: 6px; align-content: start; }
.fuss nav a { text-decoration: none; }
.fuss nav a:hover { text-decoration: underline; }
.fuss .werkstatt { display: flex; gap: 16px; margin-top: 12px; }
.fuss .werkstatt a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.fuss .werkstatt svg { width: 16px; height: 16px; }
.fuss .ki-hinweis { grid-column: 1 / -1; font-size: .8rem; max-width: 80ch; padding-top: 20px; border-top: 1px solid var(--linie-zart); }
@media (max-width: 720px) { .fuss { grid-template-columns: 1fr 1fr; } .fuss > div:first-child { grid-column: 1 / -1; } }

/* ========== 4. Bausteine ========== */

/* Ein Bogen Papier auf dem Tisch. */
.bogen {
  position: relative; background: var(--bogen); border-radius: 3px;
  box-shadow: var(--schatten-bogen);
}
/* Falzmarken (105 und 210 mm von 297) und Lochmarke (Mitte), am linken Rand. */
.gefalzt::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; pointer-events: none;
  background:
    linear-gradient(var(--linie), var(--linie)) 0 35.4% / 9px 1px no-repeat,
    linear-gradient(var(--linie), var(--linie)) 0 50%   / 12px 1px no-repeat,
    linear-gradient(var(--linie), var(--linie)) 0 70.7% / 9px 1px no-repeat;
}

/* Knopf: ein sauberer Stempelabdruck. Rueckmeldung schon beim Druecken. */
.knopf {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--knopf); color: #fff; text-decoration: none;
  font: inherit; font-weight: 650; font-size: 1.05rem; letter-spacing: -0.005em;
  padding: 15px 24px; border-radius: 4px; border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 3px var(--knopf), inset 0 0 0 4.5px rgba(255,255,255,.55);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s var(--aus), background-color .15s, box-shadow .2s;
}
.knopf:hover { background: var(--knopf-druck); box-shadow: inset 0 0 0 3px var(--knopf-druck), inset 0 0 0 4.5px rgba(255,255,255,.55); text-decoration: none; }
.knopf:active { transform: scale(.97) translateY(1px); box-shadow: inset 0 0 0 3px var(--knopf-druck), inset 0 0 0 4.5px rgba(255,255,255,.55); }
.knopf svg { width: 20px; height: 20px; flex: none; }

.knopf-leise {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 600; color: var(--stempel);
  background: transparent; border: 1.5px solid currentColor; border-radius: 8px;
  padding: 13px 20px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .12s var(--aus), background-color .15s;
}
.knopf-leise:hover { background: var(--stempel-weich); }
.knopf-leise:active { transform: scale(.97); }

.textlink { color: var(--stempel); font-weight: 600; }

/* ========== 5. Startseite: Auftakt ========== */
.auftakt { padding: clamp(18px, 3vw, 40px) 0 clamp(28px, 5vw, 64px); }
.auftakt > .bahn {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr);
  gap: 0; align-items: center;
}

/* Der Briefbogen links */
.brief-kopf { padding: var(--innen); padding-right: calc(var(--innen) + 72px); }
.absender {
  font-size: .76rem; font-stretch: 85%; color: var(--leise);
  text-decoration: underline; text-decoration-color: var(--linie); text-underline-offset: .3em;
  margin-bottom: clamp(22px, 3vw, 36px);
}
.bezug {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 4px 28px;
  margin-bottom: clamp(26px, 3.4vw, 44px); padding-bottom: 14px; border-bottom: 1px solid var(--linie-zart);
}
.bezug div { display: grid; gap: 1px; }
.bezug dd { font-size: .92rem; color: var(--tinte); font-weight: 560; }
.betreff-hinweis { margin-bottom: 10px; }
.auftakt h1 { max-width: 15em; }
.vorspann { font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem); line-height: 1.55; max-width: 36em; margin-top: clamp(18px, 2.4vw, 28px); color: var(--text); }

.laden { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: clamp(24px, 3vw, 36px); }
.dabei { font-size: .9rem; color: var(--leise); line-height: 1.45; }
.dabei b { font-weight: 600; }

.zusage { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 22px; font-size: .95rem; color: var(--text); }
.zusage li { display: inline-flex; align-items: center; gap: 7px; }
.zusage svg { width: 17px; height: 17px; color: var(--stempel); }

.gruender {
  display: flex; align-items: center; gap: 12px; margin-top: clamp(28px, 3.4vw, 40px);
  padding-top: 18px; border-top: 1px solid var(--linie-zart);
  font-size: .9rem; color: var(--leise); text-decoration: none; max-width: 40em;
}
.gruender img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; filter: grayscale(.2); }
.gruender b { color: var(--tinte); }
.gruender:hover span { color: var(--text); }

/* Eingangsstempel: das Versprechen als Abdruck. Leicht schief, mit
   ungleichmaessiger Farbe - gestempelt, nicht gedruckt. */
.stempel {
  position: absolute; right: clamp(16px, 3vw, 40px); top: clamp(60px, 7vw, 92px);
  transform: rotate(-7deg);
  color: var(--stempel); border: 2.5px solid currentColor; border-radius: 10px;
  padding: 8px 14px 9px; text-align: center; line-height: 1.1;
  font-stretch: 80%; pointer-events: none; user-select: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  opacity: .9;
}
.stempel .gross { display: block; font-size: 1.7rem; font-weight: 820; letter-spacing: .06em; font-stretch: 100%; }
.stempel .datum-zeile { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; margin-bottom: 2px; font-family: var(--mono); }
.stempel .klein { display: block; font-size: .72rem; font-weight: 650; letter-spacing: .02em; margin-top: 3px; border-top: 1.5px solid currentColor; padding-top: 4px; }

/* Rechts: die Fundstelle. Suchfeld oben, darunter das gefundene Blatt. */
.fund { position: relative; margin-left: -72px; z-index: 2; padding: 24px 0; min-width: 0; }
.fund-suche {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  background: var(--bogen); border-radius: 14px; padding: 15px 16px 15px 18px;
  box-shadow: var(--schatten-hoch);
  font-size: 1.05rem; color: var(--tinte); min-height: 58px;
}
.fund-suche > svg { width: 20px; height: 20px; color: var(--leise); flex: none; }
.fund-suche .feld { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fund-suche .leer { color: var(--leise); }
.fund-suche .tasten { font-family: var(--mono); font-size: .78rem; color: var(--leise); border: 1px solid var(--linie); border-radius: 5px; padding: 2px 6px; }
.cursor { display: inline-block; width: 2px; height: 1.15em; background: var(--stempel); vertical-align: -0.18em; margin-left: 1px; animation: blinken 1s steps(1) infinite; }
@keyframes blinken { 50% { opacity: 0; } }

.blatt {
  position: relative; z-index: 2; margin: -10px 14px 0 26px;
  padding: 34px 28px 26px; min-height: 250px;
  background: var(--bogen); box-shadow: var(--schatten-bogen); border-radius: 2px;
  font-size: .95rem; line-height: 1.6; color: var(--text);
  transition: opacity .35s var(--aus), transform .55s var(--aus);
}
/* Scan: Kopiererpapier, Toner leicht verwaschen, ein wenig schief eingelegt. */
.blatt.ist-scan {
  background-color: var(--scan); color: var(--scan-tinte);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .3 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  transform: rotate(-1.1deg);
  text-shadow: 0 0 .5px currentColor;
}
.blatt.ist-scan::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.06), transparent 6%, transparent 94%, rgba(0,0,0,.05));
}
.blatt.ist-tabelle { font-family: var(--mono); font-size: .82rem; line-height: 1.75; }
.blatt .kopfzeile-blatt { font-size: .8rem; font-stretch: 85%; color: inherit; opacity: .75; margin-bottom: 14px; display: flex; justify-content: space-between; gap: 12px; }
.blatt .zeile-titel { font-weight: 700; font-stretch: 105%; color: inherit; margin: 6px 0; }
.blatt p + p { margin-top: 6px; }
.blatt table { border-collapse: collapse; width: 100%; }
.blatt td { padding: 2px 8px 2px 0; border-bottom: 1px solid var(--linie-zart); vertical-align: top; }
.blatt td:first-child { color: var(--leise); white-space: nowrap; }
.blatt mark { background-size: 0% 100%; background-repeat: no-repeat; background-image: linear-gradient(transparent 8%, var(--marker) 8%, var(--marker) 92%, transparent 92%); background-color: transparent; }
.blatt.angestrichen mark { background-size: 100% 100%; transition: background-size .5s var(--aus); }
.blatt.angestrichen mark:nth-of-type(2) { transition-delay: .35s; }
.blatt.wartet { opacity: .3; transition: opacity .25s var(--aus); }
.blatt.kommt { opacity: 0; transform: translateY(18px); transition: none; }

.treffer-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 16px 14px 0 26px; font-size: .88rem; color: var(--leise);
}
.treffer-zeile .datei { font-family: var(--mono); color: var(--tinte); font-size: .9rem; }
.treffer-zeile .art { font-size: .72rem; font-weight: 650; font-stretch: 80%; border: 1px solid var(--linie); border-radius: 4px; padding: 1px 6px; color: var(--text); }
.passt { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.passt i { position: relative; width: 74px; height: 5px; border-radius: 3px; background: var(--tisch-tief); overflow: hidden; display: block; }
.passt i b { position: absolute; inset: 0; background: var(--stempel); border-radius: 3px; transform-origin: left; transform: scaleX(var(--wert, .9)); transition: transform .9s var(--feder); }
.fund.leer-lauf .passt i b { transform: scaleX(0); transition: transform .15s; }

.beispiele { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 14px 0 26px; align-items: center; }
.beispiele .zeichen { margin-right: 4px; }
.beispiele button {
  font: inherit; font-size: .86rem; font-weight: 560; color: var(--text);
  background: var(--bogen); border: 1px solid var(--linie); border-radius: 999px;
  padding: 6px 13px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .1s var(--aus), background-color .15s, border-color .15s, color .15s;
}
.beispiele button:hover { border-color: var(--leise); }
.beispiele button:active { transform: scale(.95); }
.beispiele button[aria-pressed="true"] { background: var(--tinte); color: var(--bogen); border-color: var(--tinte); }
.fund-notiz { margin: 14px 14px 0 26px; font-size: .84rem; color: var(--leise); max-width: 46em; }

@media (max-width: 980px) {
  .auftakt > .bahn { grid-template-columns: minmax(0, 1fr); }
  .brief-kopf { padding-right: var(--innen); }
  .fund { margin: -18px 0 0; padding: 0 0 0 0; }
  .blatt, .treffer-zeile, .beispiele, .fund-notiz { margin-left: 10px; margin-right: 10px; }
  .fund-suche { margin: 0 6px; }
}
@media (max-width: 600px) {
  .stempel { position: static; display: inline-block; margin: 0 0 18px; transform: rotate(-4deg); }
  .bezug { grid-template-columns: repeat(2, auto); }
  .absender { display: none; }
  .blatt { padding: 26px 20px 20px; min-height: 16rem; }
  .laden .knopf { width: 100%; justify-content: center; }
}

/* ========== 6. Startseite: Themenboegen ==========
   Jedes Thema ist ein eigener Bogen mit Registerlasche. Auf dem grossen
   Bildschirm sind alle offen und die Lasche ist nur Beschriftung; bis
   880 px klappen sie zu (Steuerung in seite.js). */
.themen { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(64px, 7vw, 92px); padding-top: 40px; }
.thema { position: relative; }
.thema > summary { list-style: none; }
.thema > summary::-webkit-details-marker { display: none; }

.lasche {
  position: absolute; top: -34px; left: 0; height: 34px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 18px; background: var(--bogen); border-radius: 8px 8px 0 0;
  font-size: .86rem; font-stretch: 85%; font-weight: 650; color: var(--tinte);
  box-shadow: 0 -1px 3px rgba(20,24,30,.05);
}
.lasche .kurz, .lasche .pfeil { display: none; }
.thema-inhalt { padding: var(--innen); border-top-left-radius: 0; }

.abschnitt-kopf { max-width: 46em; margin-bottom: clamp(26px, 3.4vw, 44px); }
.abschnitt-kopf p { margin-top: 14px; font-size: 1.08rem; color: var(--text); }

@media (min-width: 881px) {
  .thema > summary { pointer-events: none; }
}
@media (max-width: 880px) {
  .themen { gap: 10px; padding-top: 10px; }
  .themen-kopf { margin-top: 8px; }
  .thema { background: var(--bogen); border-radius: 10px; box-shadow: var(--schatten-bogen); }
  .lasche {
    position: static; height: auto; width: 100%;
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px;
    padding: 16px 18px; background: transparent; box-shadow: none; border-radius: 10px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color .15s;
  }
  .lasche:active { background: var(--bogen-zart); }
  .lasche .titel { font-size: 1.12rem; font-stretch: 105%; font-weight: 700; }
  .lasche .kurz { display: block; grid-column: 1; font-size: .9rem; font-weight: 450; font-stretch: 100%; color: var(--leise); }
  .lasche .pfeil { display: block; grid-column: 2; grid-row: 1 / 3; width: 22px; height: 22px; color: var(--leise); transition: transform .35s var(--aus); }
  .thema[open] .lasche .pfeil { transform: rotate(180deg); }
  .thema-inhalt { box-shadow: none; background: transparent; padding: 4px 18px 26px; }
  .thema-inhalt.bogen { box-shadow: none; }
  .gefalzt::before { display: none; }
}

/* Aufklappen mit echter Hoehe; ein zweiter Tipp kehrt mitten im Lauf um. */
details::details-content {
  block-size: 0; overflow-y: clip;
  transition: block-size .42s var(--aus), content-visibility .42s allow-discrete;
}
details[open]::details-content { block-size: auto; }

.themen-kopf { display: none; }
@media (max-width: 880px) {
  .themen-kopf { display: block; padding-top: 6px; }
  .themen-kopf h2 { font-size: 1.5rem; }
  .themen-kopf p { color: var(--leise); font-size: .95rem; margin-top: 4px; }
}

/* --- Das Problem: ein Posteingangsbuch --- */
.eingangsbuch { width: 100%; border-collapse: collapse; font-size: 1rem; }
.eingangsbuch caption { caption-side: bottom; text-align: left; padding-top: 16px; font-size: .88rem; color: var(--leise); max-width: 60em; }
.eingangsbuch th { text-align: left; padding: 0 16px 10px 0; border-bottom: 2px solid var(--tinte); }
.eingangsbuch td { padding: 15px 16px 15px 0; border-bottom: 1px solid var(--linie); vertical-align: baseline; }
.eingangsbuch td:first-child { font-family: var(--mono); font-size: .9rem; color: var(--leise); width: 38%; }
.eingangsbuch td:last-child { color: var(--tinte); font-weight: 560; }
.eingangsbuch td small { display: block; font-weight: 400; color: var(--leise); font-size: .88rem; margin-top: 2px; }
.eingangsbuch .pfeil-zelle { width: 36px; color: var(--stempel); }
.eingangsbuch .pfeil-zelle svg { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .eingangsbuch thead { display: none; }
  .eingangsbuch tr { display: grid; grid-template-columns: 1fr; padding: 12px 0; border-bottom: 1px solid var(--linie); }
  .eingangsbuch td { border: 0; padding: 0; width: auto !important; }
  .eingangsbuch .pfeil-zelle { display: none; }
  .eingangsbuch td:first-child { font-size: .84rem; }
  .eingangsbuch td:first-child::after { content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 6px; vertical-align: -0.15em; background: var(--stempel); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
}

/* --- So geht's: drei Schritte --- */
.schritte { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: s; border-top: 2px solid var(--tinte); }
.schritte li { counter-increment: s; padding: 22px 26px 6px 0; }
.schritte li + li { padding-left: 26px; border-left: 1px solid var(--linie); }
.schritte li::before {
  content: counter(s); display: block; font-size: 3.2rem; font-weight: 300; font-stretch: 75%;
  line-height: 1; color: var(--tinte); margin-bottom: 14px; letter-spacing: -0.02em;
}
.schritte h3 { margin-bottom: 8px; }
.schritte p { font-size: .98rem; }
@media (max-width: 760px) {
  .schritte { grid-template-columns: 1fr; border-top: 0; }
  .schritte li, .schritte li + li { padding: 16px 0 16px 56px; border-left: 0; border-top: 1px solid var(--linie); position: relative; }
  .schritte li::before { position: absolute; left: 0; top: 14px; font-size: 2.4rem; }
}

/* --- Fuer wen: Registerkarten --- */
.gruppen { min-width: 0; }
.gruppen-wahl {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; padding: 4px 4px 0; margin: 0 -4px;
}
.gruppen-wahl::-webkit-scrollbar { display: none; }
.gruppen-wahl button {
  flex: none; scroll-snap-align: start;
  font: inherit; font-size: .92rem; font-weight: 600; font-stretch: 92%; color: var(--leise);
  background: var(--tisch); border: 0; border-radius: 8px 8px 0 0;
  padding: 11px 16px 10px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, color .15s;
}
.gruppen-wahl button:hover { color: var(--tinte); background: var(--tisch-tief); }
.gruppen-wahl button[aria-selected="true"] { background: var(--bogen-zart); color: var(--tinte); box-shadow: inset 0 2px 0 var(--stempel); }
.gruppe {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 52px);
  background: var(--bogen-zart); padding: clamp(22px, 3.4vw, 40px); border-radius: 0 8px 8px 8px;
}
.gruppe[hidden] { display: none; }
.gruppe.zeigt { animation: einblenden .35s var(--aus); }
@keyframes einblenden { from { opacity: 0; transform: translateY(6px); } }
.gruppe h3 { font-size: 1.35rem; font-stretch: 108%; font-weight: 700; margin-bottom: 10px; }
.beispiel { align-self: start; padding-top: 16px; border-top: 2px solid var(--tinte); }
.beispiel .zeichen { display: block; margin-bottom: 8px; }
.frage-zeile { font-weight: 600; color: var(--tinte); font-size: 1.05rem; }
.frage-zeile small { font-weight: 400; color: var(--leise); }
.antwort-zeile { margin-top: 8px; font-size: .95rem; color: var(--text); display: flex; gap: 8px; }
.antwort-zeile::before { content: ""; flex: none; width: 1em; height: 1em; margin-top: .25em; background: var(--stempel); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 760px) { .gruppe { grid-template-columns: minmax(0, 1fr); } }

.leiste { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 32px; margin-top: clamp(28px, 3.4vw, 40px); font-size: .95rem; }
.leiste li { padding-top: 14px; border-top: 1px solid var(--linie); }
.leiste b { display: block; margin-bottom: 2px; }
@media (max-width: 760px) { .leiste { grid-template-columns: 1fr; gap: 14px; } }

/* --- Wie es funktioniert: Text und ein Aktenvermerk --- */
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.fliess h2 { margin-bottom: 18px; }
.fliess p + p { margin-top: 14px; }
.grenze { padding: 16px 18px; background: var(--bogen-zart); border-radius: 8px; border: 1px dashed var(--linie); font-size: .97rem; }
.vermerk { border: 1px solid var(--linie); border-radius: 6px; }
.vermerk > div { display: grid; grid-template-columns: 8.5em 1fr; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--linie-zart); }
.vermerk > div:last-child { border-bottom: 0; }
.vermerk .zeichen { padding-top: 3px; }
.vermerk .wert { color: var(--tinte); }
.vermerk .wert.im-scan { font-family: var(--mono); font-size: .86rem; line-height: 1.7; color: var(--scan-tinte); background: var(--scan); padding: 8px 10px; border-radius: 3px; transform: rotate(-.4deg); }
.vermerk .ergebnis { background: var(--stempel-weich); }
.vermerk .schlicht { color: var(--text); }
@media (max-width: 880px) { .zwei { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .vermerk > div { grid-template-columns: 1fr; gap: 4px; padding: 12px 14px; } }

/* --- Ihre Daten --- */
.daten-gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px clamp(20px, 3vw, 40px); }
.daten-gitter > div { border-top: 2px solid var(--tinte); padding-top: 16px; }
.daten-gitter h3 { margin-bottom: 8px; }
.daten-gitter p { font-size: .98rem; }
@media (max-width: 760px) { .daten-gitter { grid-template-columns: 1fr; } }

/* --- Was enthalten ist: ein Lieferschein --- */
.lieferschein { width: 100%; border-collapse: collapse; font-size: .98rem; }
.lieferschein th { text-align: left; padding: 0 14px 10px 0; border-bottom: 2px solid var(--tinte); }
.lieferschein th:last-child, .lieferschein td:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.lieferschein td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.lieferschein td:first-child { font-family: var(--mono); font-size: .84rem; color: var(--leise); width: 3em; padding-top: 16px; }
.lieferschein td.posten { width: 12em; color: var(--tinte); font-weight: 650; }
.lieferschein td.betrag { font-family: var(--mono); font-size: .9rem; color: var(--tinte); font-variant-numeric: tabular-nums; }
.lieferschein tr.lizenz td { background: var(--bogen-zart); }
.lieferschein tr.lizenz td.betrag { font-family: var(--sans); font-size: .86rem; font-stretch: 85%; font-weight: 650; color: var(--stempel); }
.lieferschein tfoot td { border-bottom: 0; border-top: 2px solid var(--tinte); padding-top: 14px; font-weight: 700; color: var(--tinte); }
.lieferschein tfoot td.betrag { font-size: 1.15rem; }
@media (max-width: 680px) {
  .lieferschein thead { display: none; }
  .lieferschein tbody tr { display: grid; grid-template-columns: 2.4em 1fr auto; padding: 12px 0; border-bottom: 1px solid var(--linie); }
  .lieferschein tbody td { border: 0; padding: 0; width: auto !important; }
  .lieferschein tbody td:nth-child(3) { grid-column: 2 / -1; grid-row: 2; font-size: .94rem; margin-top: 4px; }
  .lieferschein tbody td:first-child { padding-top: 2px; }
  .lieferschein tfoot tr { display: grid; grid-template-columns: 1fr auto; }
  .lieferschein tfoot td:first-child { display: none; }
  .lieferschein tr.lizenz td { background: transparent; }
}

/* --- Wer das baut: ein Brief --- */
.brief { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.brief .betreff { font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); font-stretch: 108%; font-weight: 700; line-height: 1.2; color: var(--tinte); letter-spacing: -0.015em; margin: 8px 0 22px; max-width: 30ch; }
.brief .worte { max-width: 38em; }
.brief .worte p + p { margin-top: 14px; }
.gruss { margin-top: 26px; }
.gruss .name { font-weight: 700; color: var(--tinte); margin-top: 18px; }
.gruss .rolle { font-size: .92rem; color: var(--leise); }
.brief figure img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 3px; filter: grayscale(.15); }
.brief figcaption { font-size: .84rem; color: var(--leise); margin-top: 8px; }
@media (max-width: 760px) {
  .brief { grid-template-columns: 1fr; }
  .brief figure { order: -1; width: 112px; }
  .brief figcaption { display: none; }
}

/* ========== 7. Download, Hinweis, Telefon ========== */
.download-gitter { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4.4vw, 60px); align-items: start; }
.download-gitter h2 { margin-bottom: 14px; }
.windows { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--linie-zart); font-size: .95rem; }
.windows a, .gruppe a, .abschnitt-kopf a, .fliess a, .worte a, .antwort a, .fragen-kopf a, .lieferschein a { color: var(--stempel); }

.anlage {
  position: relative; background: var(--bogen-zart); border: 1px solid var(--linie-zart);
  border-radius: 6px; padding: clamp(20px, 3vw, 32px);
}
.anlage { margin-top: 30px; border-top-left-radius: 0; }
.anlage-lasche {
  position: absolute; left: -1px; top: -29px; height: 29px; display: inline-flex; align-items: center;
  padding: 0 14px; background: var(--bogen-zart); border: 1px solid var(--linie-zart); border-bottom: 0;
  border-radius: 7px 7px 0 0; font-size: .8rem; font-stretch: 85%; font-weight: 650; color: var(--tinte);
}
.anlage h3 { font-size: 1.2rem; font-stretch: 105%; font-weight: 700; margin-bottom: 10px; }
.anlage p { font-size: .97rem; }
.anlage p + p, .anlage .dialog + p { margin-top: 12px; }

.dialog {
  width: min(300px, 100%); margin: 18px auto; padding: 20px 18px 16px; text-align: center;
  background: #ececec; color: #1d1d1f; border-radius: 14px;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.2), 0 18px 40px -14px rgba(0,0,0,.35);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', var(--sans);
}
.dialog .zeichen-bild { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 12px; background: #f6c443; color: #1d1d1f; display: grid; place-items: center; }
.dialog .zeichen-bild svg { width: 26px; height: 26px; }
.dialog .titel { font-weight: 700; font-size: .92rem; margin-bottom: 6px; color: #1d1d1f; }
.dialog .text { font-size: .78rem; line-height: 1.4; color: #3a3a3c; }
.dialog .knopfleiste { display: grid; gap: 6px; margin-top: 14px; }
.dialog .knopfleiste span { display: block; padding: 6px; border-radius: 7px; background: #fff; font-size: .82rem; box-shadow: 0 .5px 1px rgba(0,0,0,.2); }
.dialog .knopfleiste .haupt { background: #0064e0; color: #fff; }

.schritte-gross { margin: 12px 0 0 1.3em; display: grid; gap: 8px; }
.schritte-gross li { padding-left: 4px; }
.schritte-gross li::marker { font-weight: 700; color: var(--tinte); }
.beruhigung { margin-top: 14px; }

.am-telefon { background: var(--bogen-zart); border: 1px solid var(--linie); border-radius: 10px; padding: 22px; margin-top: 22px; }
.am-telefon .zeichen { display: block; margin-bottom: 6px; }
.am-telefon h3 { font-size: 1.2rem; margin-bottom: 8px; }
.am-telefon .adresse { font-size: 1.6rem; font-weight: 760; font-stretch: 112%; color: var(--tinte); margin: 12px 0 16px; letter-spacing: -0.02em; }
.telefon-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.trotzdem { margin-top: 14px; font-size: .9rem; }
@media (max-width: 880px) { .download-gitter { grid-template-columns: 1fr; } }

/* ========== 8. Fragen ========== */
.fragen-gitter { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(24px, 4.4vw, 60px); align-items: start; }
.fragen-kopf p { margin-top: 14px; }
.fragen { border-top: 2px solid var(--tinte); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; align-items: center;
  padding: 18px 0; font-weight: 620; color: var(--tinte); font-size: 1.04rem;
  -webkit-tap-highlight-color: transparent; transition: color .15s;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary:hover { color: var(--stempel); }
.fragen summary svg { width: 20px; height: 20px; flex: none; color: var(--leise); transition: transform .35s var(--aus); }
.fragen details[open] summary svg { transform: rotate(45deg); }
.antwort { padding: 0 0 20px; max-width: 42em; }
.antwort p + p { margin-top: 10px; }
@media (max-width: 880px) { .fragen-gitter { grid-template-columns: 1fr; } .fragen-kopf h2 { display: none; } }

/* ========== 9. Unterseiten ========== */
.seite { padding-top: clamp(16px, 3vw, 36px); }
.seite > .bogen { max-width: 860px; margin: 0 auto; padding: var(--innen); }
.seite h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); margin-bottom: 8px; }
.stand { color: var(--leise); font-size: .95rem; margin-bottom: clamp(24px, 3vw, 36px); }

.rechtstext h2 { font-size: 1.25rem; font-stretch: 105%; margin: 32px 0 10px; letter-spacing: -0.01em; }
.rechtstext h3 { font-size: 1.05rem; margin: 20px 0 6px; }
.rechtstext p, .rechtstext li { max-width: 68ch; }
.rechtstext p + p { margin-top: 10px; }
.rechtstext ul, .rechtstext ol { margin: 10px 0 0 1.3em; display: grid; gap: 6px; }
.rechtstext a { color: var(--stempel); }

.verlauf h2 { font-size: 1.3rem; font-stretch: 105%; margin: 34px 0 6px; }
.fassung { padding: 22px 0; border-bottom: 1px solid var(--linie); }
.fassung:last-child { border-bottom: 0; }
.kopfzeile { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.nummer { font-family: var(--mono); font-size: .92rem; color: var(--tinte); background: var(--bogen-zart); border: 1px solid var(--linie); border-radius: 4px; padding: 1px 8px; }
.datum { font-size: .9rem; color: var(--leise); }
.fassung ul { margin-left: 1.2em; display: grid; gap: 8px; }
.fassung p { margin-top: 8px; }
.mehr a, .verlauf a { color: var(--stempel); }

.danke h1 { margin-bottom: 14px; }
.danke > p { max-width: 62ch; }
.danke > p + p { margin-top: 12px; }
.laeuft { display: grid; gap: 8px; margin: 26px 0; padding: 18px 20px; background: var(--bogen-zart); border-radius: 8px; border: 1px solid var(--linie-zart); }
.balken { display: block; height: 6px; border-radius: 3px; background: var(--tisch-tief); overflow: hidden; }
.balken i { display: block; height: 100%; width: 40%; background: var(--stempel); border-radius: 3px; animation: laden 1.6s var(--aus) infinite; }
@keyframes laden { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.laeuft .was { font-family: var(--mono); font-size: .9rem; color: var(--tinte); }
.laeuft .falls { font-size: .9rem; color: var(--leise); }
.laeuft a { color: var(--stempel); }
.zwischen { font-size: 1.3rem; font-stretch: 105%; font-weight: 700; color: var(--tinte); margin-top: 34px !important; line-height: 1.25; }
.weiter { padding-top: 16px; margin-top: 22px !important; border-top: 1px solid var(--linie-zart); font-size: .95rem; }
.weiter a { color: var(--stempel); }

.fehlerseite { text-align: left; }
.fehlerseite .zahl { font-family: var(--mono); font-size: .95rem; color: var(--leise); margin-bottom: 6px; }
.fehlerseite h1 { margin-bottom: 14px; }
.fehlerseite .laden { margin-top: 26px; }

/* ========== 10. Bewegung, Druck ========== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .blatt, .menue, .passt i b, details::details-content, .lasche .pfeil, .fragen summary svg { transition: opacity .15s !important; }
  .cursor { animation: none; }
  .balken i { animation: none; width: 100%; opacity: .5; }
}
@media (prefers-contrast: more) {
  :root { --linie: #8a8f97; --leise: #3f444c; }
  .bogen { box-shadow: 0 0 0 1px var(--tinte); }
}
@media print {
  body { background: #fff; }
  body > header, .menue, .beispiele, footer nav, .stempel { display: none; }
  .bogen { box-shadow: none; }
  details::details-content { block-size: auto; }
}

/* ========== Nachtraege ========== */
h1 .leiser, h2 .leiser { color: var(--leise); }
.treffer-zeile { transition: opacity .3s var(--aus); }
.fund.leer-lauf .treffer-zeile { opacity: .25; }
html:not(.js) .menue-knopf { display: none !important; }
.fuss nav .zeichen { margin-bottom: 4px; }
html.ohne-uebergang details::details-content, html.ohne-uebergang .lasche .pfeil { transition: none !important; }
@media (max-width: 600px) { code { white-space: normal; overflow-wrap: anywhere; } }