/* ===========================================================================
   Schrift: Archivo, variabel, selbst gehostet
   ---------------------------------------------------------------------------
   Selbst gehostet und nicht ueber Google eingebunden: eine Einbindung von
   fonts.googleapis.com uebertraegt die IP des Besuchers in die USA und ist
   ohne Einwilligung abmahnfaehig. Zwei Dateien, zusammen 171 KB, dafuer keine
   Fremdanfrage beim Aufruf.

   Warum eine variable Schrift: sie bringt eine Breitenachse mit. Ueberschriften
   laufen breiter, Fliesstext normal. Das gibt der Seite einen Klang zwischen
   Werkstattschild und Formular, ohne dass eine zweite Schriftdatei noetig ist.

   Archivo, Omnibus-Type, SIL Open Font License 1.1, siehe schriften/OFL.txt
   =========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("/schriften/archivo-variabel.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  src: url("/schriften/archivo-variabel-ext.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===========================================================================
   Werkbrett — gemeinsames Stylesheet für alle Seiten
   Designsprache: modules/werkstatt-tracking/design-brief.md im Agentur-OS
   Heller Modus ist Standard. Dunkel nur über den Schalter, nie über die
   Systemeinstellung des Betrachters.
   =========================================================================== */

:root {
  --papier:       #FAF9F5;
  --papier-tief:  #F0EEE7;
  /* Zwei weitere Gruende. Der Abstand ist bewusst deutlich: --papier und
     --papier-tief liegen nur zwei Prozent auseinander, das sieht niemand. */
  --sand:         #E9E1D2;
  --sand-kante:   #DBD1BE;
  --tiefgrund:    #101720;
  --tiefgrund-auf:#F3F1EA;
  --tinte:        #0B1017;
  --tinte-leise:  #4A5361;
  /* Auf Papier kam #6B7484 auf 4.47:1 und auf Sand nur auf 3.63:1, beides
     unter der Norm von 4.5:1. Nachgemessen im Browser, nicht geschaetzt. */
  --tinte-still:  #59616E;
  --primaer:      #0F172A;
  --primaer-auf:  #F8FAFC;
  --signal:       #B3261E;
  --signal-feld:  rgba(179, 38, 30, 0.06);
  --marker:       #FFD23F;
  --glas:         rgba(255, 255, 255, 0.78);
  --glas-fest:    rgba(255, 255, 255, 0.94);
  --glas-rand:    rgba(255, 255, 255, 0.85);
  --kante:        rgba(11, 16, 23, 0.15);
  --schatten:     0 1px 2px rgba(11,16,23,.06), 0 12px 28px -14px rgba(11,16,23,.30);
  --schatten-hoch:0 2px 5px rgba(11,16,23,.07), 0 36px 70px -30px rgba(11,16,23,.42);
  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)'/%3E%3C/svg%3E");
}


* { box-sizing: border-box; }

/* Das hidden-Attribut muss gewinnen.
   Der Browser bringt dafuer `[hidden] { display: none }` mit, aber jede
   Autorenregel schlaegt die Vorgabe des Browsers, unabhaengig von
   Spezifitaet. `form { display: grid }` weiter unten hat deshalb am
   31.08.2026 das versteckte Netlify-Formular sichtbar unter den Fuss der
   Startseite gestellt. Diese Zeile ist die Absicherung, nicht die
   Behebung eines Einzelfalls: sie gilt fuer jedes kuenftige hidden. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background-color: var(--papier);
  background-image:
    radial-gradient(64% 46% at 8% -6%,   rgba(255,214,150,.17) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(56% 42% at 94% 2%,   rgba(160,200,255,.15) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(80% 56% at 52% 106%, rgba(190,220,200,.13) 0%, rgba(255,255,255,0) 66%);
  background-attachment: fixed;
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  position: relative;
}
body::after {
  content: ""; position: fixed; inset: 0;
  background-image: var(--korn); opacity: .28;
  mix-blend-mode: multiply; pointer-events: none; z-index: 0;
}

.bahn { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding-inline: 24px; }
.schmal { max-width: 760px; }

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--primaer); outline-offset: 3px; border-radius: 6px;
}
.sprungmarke {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  background: var(--primaer); color: var(--primaer-auf); padding: 14px 20px; border-radius: 0 0 12px 0;
}
.sprungmarke:focus { left: 0; }

/* --- Glas ----------------------------------------------------------------- */
.glas {
  position: relative;
  background: linear-gradient(158deg, var(--glas-fest) 0%, var(--glas) 58%, var(--glas) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--schatten);
}
.glas::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(146deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.30) 30%,
    rgba(255,255,255,0) 58%, rgba(255,255,255,.45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none; z-index: 3;
}

/* --- Kopfleiste ------------------------------------------------------------ */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--papier) 84%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--kante);
}
.kopf .bahn { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 76px; }
.marke { display: flex; flex-direction: column; gap: 1px; text-decoration: none; flex-shrink: 0; }
.marke .name { font-size: 21px; font-weight: 700; letter-spacing: -.02em; font-stretch: 112%; }
.marke .zusatz { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--tinte-still); font-weight: 600; }
.kopf nav { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.kopf nav::-webkit-scrollbar { display: none; }
.kopf nav a.punkt {
  text-decoration: none; font-size: 16px; font-weight: 580; color: var(--tinte-leise);
  padding: 10px 13px; border-radius: 999px; white-space: nowrap;
}
.kopf nav a.punkt:hover { color: var(--tinte); background: var(--papier-tief); }
.kopf nav a.punkt[aria-current="page"] { color: var(--tinte); background: var(--papier-tief); }
@media (max-width: 900px) { .kopf nav a.punkt { display: none; } }

/* Untermenü für schmale Bildschirme, damit Navigation nicht verschwindet */
.kopf-mobil { display: none; border-top: 1px solid var(--kante); }
@media (max-width: 900px) { .kopf-mobil { display: block; } }
.kopf-mobil .bahn { display: flex; gap: 4px; overflow-x: auto; padding-block: 8px; scrollbar-width: none; }
.kopf-mobil .bahn::-webkit-scrollbar { display: none; }
.kopf-mobil a {
  text-decoration: none; font-size: 15.5px; font-weight: 600; color: var(--tinte-leise);
  padding: 9px 14px; border-radius: 999px; white-space: nowrap;
}
.kopf-mobil a[aria-current="page"] { color: var(--tinte); background: var(--papier-tief); }

/* --- Tasten --------------------------------------------------------------- */
.taste {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 30px; border-radius: 999px;
  border: 1px solid var(--kante); background: transparent; color: var(--tinte);
  font: inherit; font-size: 17px; font-weight: 640; text-decoration: none; cursor: pointer;
}
.taste:hover { background: var(--papier-tief); }
.taste.fuehrend {
  background: var(--primaer); border-color: var(--primaer); color: var(--primaer-auf);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.taste.fuehrend:hover { opacity: .9; }
.taste.klein { min-height: 48px; padding: 0 20px; font-size: 16px; }

/* --- Abschnitte ------------------------------------------------------------ */
section { padding-block: clamp(60px, 8vw, 108px); }
section + section { border-top: 1px solid var(--kante); }
.kennung { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinte-leise); font-weight: 700; }
h1 { margin: 14px 0 0; font-size: clamp(38px, 6.6vw, 72px); line-height: 1.02; letter-spacing: -.032em; font-weight: 700; font-stretch: 112%; text-wrap: balance; }
h2 { margin: 12px 0 0; font-size: clamp(29px, 4.2vw, 44px); line-height: 1.1; letter-spacing: -.024em; font-weight: 700; font-stretch: 108%; text-wrap: balance; max-width: 22ch; }
h3 { margin: 0; font-size: 21px; font-weight: 620; letter-spacing: -.012em; font-stretch: 104%; }
.fliess { margin: 18px 0 0; font-size: 19px; color: var(--tinte-leise); max-width: 62ch; }
.fliess + .fliess { margin-top: 14px; }
.seitenkopf { padding-block: clamp(56px, 8vw, 92px) clamp(32px, 4vw, 48px); }
.seitenkopf .fliess { font-size: 20px; }

/* --- Vertrauensband -------------------------------------------------------- */
/* Entweder alle drei nebeneinander oder alle drei untereinander, nie zwei und
   einer darunter. Mit flex-wrap entstand genau das, und ein abgerissener
   dritter Punkt sieht aus wie ein Versehen. */
.band { display: grid; grid-template-columns: 1fr; gap: 10px 28px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--kante); }
/* Bewusst einspaltig, auch auf breiten Schirmen: die drei Belege lesen sich
   untereinander als Liste, nebeneinander als Dekoration. */
.band span { font-size: 16px; color: var(--tinte-leise); display: inline-flex; align-items: center; gap: 9px; }
.band span::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--tinte-still); }

/* --- Kacheln ---------------------------------------------------------------- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); gap: 18px; margin-top: 42px; }
/* Vier Kacheln laufen bei auto-fit je nach Breite auf drei plus eine hinaus.
   Zwei mal zwei ist ruhiger und bleibt es in jeder Breite. */
.kacheln.zweispaltig { grid-template-columns: 1fr; }
@media (min-width: 760px) { .kacheln.zweispaltig { grid-template-columns: repeat(2, 1fr); } }
.kachel { border-radius: 24px; padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.kachel > * { position: relative; z-index: 1; }
.kachel p { margin: 0; color: var(--tinte-leise); font-size: 16.5px; }
.kachel .wer { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-still); font-weight: 700; }
.kachel .weiter { margin-top: auto; padding-top: 8px; font-size: 16px; font-weight: 620; text-decoration: none; }
.kachel .weiter:hover { text-decoration: underline; }

/* --- Zahlen ------------------------------------------------------------------ */
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)); gap: 18px; margin-top: 42px; }
.zahl { border-radius: 22px; padding: 26px 28px; display: flex; flex-direction: column; gap: 6px; }
.zahl > * { position: relative; z-index: 1; }
.zahl .gross { font-size: 40px; font-weight: 740; letter-spacing: -.04em; line-height: 1; }
.zahl .text { font-size: 16px; color: var(--tinte-leise); }
.quelle { margin-top: 16px; font-size: 15px; color: var(--tinte-still); max-width: 60ch; }

/* --- Das Regal ---------------------------------------------------------------- */
.schaukasten { margin-top: 44px; border-radius: 30px; overflow: hidden; box-shadow: var(--schatten-hoch); }
.schaukasten-kopf { position: relative; z-index: 1; padding: 24px 28px 20px; border-bottom: 1px solid var(--kante);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.schaukasten-kopf .lage { font-size: clamp(21px, 2.6vw, 28px); font-weight: 700; letter-spacing: -.03em; }
.schaukasten-kopf .lage em { font-style: normal; color: var(--signal); }
.schaukasten-kopf .rolle { font-size: 15px; color: var(--tinte-leise); }
.regal { position: relative; z-index: 1; display: flex; gap: 16px; padding: 22px 28px 30px; overflow-x: auto; }
.fach { flex: 0 0 216px; display: flex; flex-direction: column; gap: 14px; }
.fach-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 9px; position: relative; }
.fach-kopf .n { font-size: 16px; font-weight: 680; letter-spacing: -.018em; }
.fach-kopf .z { font-size: 14px; color: var(--tinte-leise); font-weight: 600; }
.fach-kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--tinte) 0%, var(--kante) 100%); }
.karten { display: flex; flex-direction: column; gap: 10px; }
.karte { border-radius: 18px; padding: 15px 16px; display: flex; flex-direction: column; gap: 6px; min-height: 92px; }
.karte > * { position: relative; z-index: 1; }
.karte .kunde { font-size: 16px; font-weight: 640; letter-spacing: -.016em; line-height: 1.2; }
.karte .geb { font-size: 13.5px; color: var(--tinte-still); }
.karte .tage { margin-top: auto; font-size: 13.5px; color: var(--tinte-leise); }
.karte.klemmt { border-color: rgba(179,38,30,.30); box-shadow: var(--schatten), inset 4px 0 0 var(--signal); }
.karte.klemmt .tage { color: var(--signal); font-weight: 700; }
.karte.ruht { background: transparent; border: 2px dashed var(--kante); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.karte.ruht::before { display: none; }
.karte.ruht .kunde { color: var(--tinte-leise); }
.karte.ruht .tage { font-style: italic; }
.eilig {
  display: inline; background: linear-gradient(180deg, transparent 14%, var(--marker) 14%, var(--marker) 86%, transparent 86%);
  padding: 0 5px; border-radius: 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinte); margin-left: 3px;
}
.bildunterschrift { margin-top: 16px; font-size: 15px; color: var(--tinte-still); text-wrap: pretty; }

/* --- Punkteliste --------------------------------------------------------------- */
.punkte { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.punkte li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.punkte .haken { width: 26px; height: 26px; border-radius: 50%; background: var(--primaer); color: var(--primaer-auf);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex-shrink: 0; margin-top: 2px; }
.punkte strong { display: block; font-size: 17.5px; font-weight: 660; }
.punkte .erklaer { color: var(--tinte-leise); font-size: 16.5px; }

/* --- Der Laufzettel ------------------------------------------------------------- */
.zettel { position: relative; background: #FFF; color: #0B1017; border: 1px solid rgba(11,16,23,.09);
  border-radius: 24px; padding: 34px 36px; box-shadow: var(--schatten-hoch); }
.zettel::after { content: ""; position: absolute; inset: 0; border-radius: 24px; background-image: var(--korn);
  opacity: .32; mix-blend-mode: multiply; pointer-events: none; }
.zettel > * { position: relative; z-index: 1; }
.zettel .titel { font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
.zettel .sub { font-size: 15px; color: #4A5361; margin-top: 2px; }
.zettel ul { list-style: none; margin: 24px 0 0; padding: 0; }
.zettel li { display: grid; grid-template-columns: 1fr auto 4.5ch; gap: 14px; align-items: baseline; padding: 11px 0; }
.zettel li + li { border-top: 1px solid rgba(11,16,23,.12); }
.zettel .was { font-size: 16px; font-weight: 620; }
.zettel .wann, .zettel .wer { font-size: 15px; color: #4A5361; }
.zettel .wer { text-align: right; font-weight: 640; }
.zettel .grund { grid-column: 1 / -1; font-size: 14px; color: #6B7484; }
.zettel li.blass .was { color: #6B7484; font-weight: 520; }

/* --- Zweispalter ---------------------------------------------------------------- */
.paar { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; margin-top: 42px; }
@media (min-width: 900px) { .paar { grid-template-columns: 1.05fr .95fr; gap: 56px; } }

/* --- Erzählschritte -------------------------------------------------------------- */
.kapitel { display: flex; flex-direction: column; gap: 52px; margin-top: 44px; }
.kapitel > article { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 68ch; }
@media (min-width: 860px) { .kapitel > article { grid-template-columns: 160px 1fr; gap: 32px; max-width: none; } }
.kapitel .marke-zeit { font-size: 14px; letter-spacing: .13em; text-transform: uppercase; color: var(--tinte-still); font-weight: 700; padding-top: 5px; }
.kapitel h3 { font-size: 25px; letter-spacing: -.026em; }
.kapitel p { margin: 10px 0 0; color: var(--tinte-leise); font-size: 17.5px; max-width: 62ch; }
.kapitel .zitat { margin-top: 16px; padding-left: 18px; border-left: 3px solid var(--kante); font-size: 18px; color: var(--tinte); }

/* --- Ablauf ------------------------------------------------------------------------ */
/* Eine Abfolge liest sich von oben nach unten. Nebeneinander gestellt sah sie
   aus wie drei gleichrangige Angebote, und bei drei Kacheln in einer schmalen
   Bahn wurde daraus zwei plus eine. */
.ablauf { list-style: none; margin: 42px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.ablauf li { border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.ablauf li > * { position: relative; z-index: 1; }
.ablauf .schritt { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-still); font-weight: 700; }
.ablauf p { margin: 0; color: var(--tinte-leise); font-size: 16.5px; }

/* --- Gegenueberstellung ----------------------------------------------------
   Links der Befund, rechts die Antwort.

   Der Unterschied wird ueber Erhebung gemacht, nicht ueber Farbe: links liegt
   flach auf dem Papier, rechts steht als Glaskarte mit Schatten. Die
   Signalfarbe kommt nur als schmale Kante vor. Sie bleibt fuer das
   reserviert, was in der Anwendung wirklich meldet, siehe Entscheidung 0008.  */
.gegenueber { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 42px; align-items: start; }
@media (min-width: 860px) { .gegenueber { grid-template-columns: 1fr 1fr; column-gap: 22px; row-gap: 20px; align-items: stretch; } }

.gegenueber .seite { border-radius: 22px; padding: 26px 28px; }
.gegenueber .seite > * { position: relative; z-index: 1; }
.gegenueber .marke {
  display: block; margin-bottom: 20px; font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.gegenueber ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.gegenueber .gross { display: block; font-size: 34px; font-weight: 740; letter-spacing: -.04em; line-height: 1.05; }
.gegenueber .text { display: block; margin-top: 5px; font-size: 16px; }

.gegenueber .ohne { border-left: 3px solid var(--signal); border-radius: 4px 22px 22px 4px; background: transparent; }
.gegenueber .ohne .marke { color: var(--signal); }
.gegenueber .ohne .gross { color: var(--tinte-leise); font-weight: 640; }
.gegenueber .ohne .text  { color: var(--tinte-still); }

.gegenueber .mit .marke { color: var(--tinte-still); }
.gegenueber .mit .gross { color: var(--tinte); }
.gegenueber .mit .text  { color: var(--tinte-leise); }

/* Beide Seiten laufen ueber dieselben Zeilen des aeusseren Rasters. Nur so
   steht der Wert links und sein Gegenstueck rechts auf einer Hoehe, auch
   wenn ein Text laenger umbricht als der andere. Ohne subgrid stapeln sich
   die Werte wie zuvor, nur ohne gemeinsame Grundlinie: das ist der
   Rueckfall, kein Fehler. */
@media (min-width: 860px) {
  @supports (grid-template-rows: subgrid) {
    .gegenueber { grid-template-rows: auto repeat(3, auto); }
    .gegenueber .seite { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
    .gegenueber .marke { margin-bottom: 0; }
    .gegenueber ul { grid-row: span 3; grid-template-rows: subgrid; }
  }
}

/* --- Preise --------------------------------------------------------------------------- */
.preise { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; margin-top: 42px; align-items: stretch; }
.paket { border-radius: 26px; padding: 34px 34px 36px; display: flex; flex-direction: column; gap: 8px; }
.paket > * { position: relative; z-index: 1; }
.paket .name { font-size: 15px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--tinte-still); }
.paket .preis { font-size: 48px; font-weight: 760; letter-spacing: -.045em; line-height: 1.05; }
.paket .preis small { font-size: 17px; font-weight: 560; color: var(--tinte-leise); letter-spacing: 0; }
.paket .fuer { color: var(--tinte-leise); font-size: 16.5px; margin: 4px 0 18px; }
.paket ul { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.paket li { display: grid; grid-template-columns: auto 1fr; gap: 11px; font-size: 16.5px; align-items: start; }
.paket li::before { content: "+"; font-weight: 800; color: var(--tinte-still); line-height: 1.5; }
.paket .taste { margin-top: auto; }
.hinweis-klein { margin-top: 22px; font-size: 15.5px; color: var(--tinte-still); max-width: 62ch; }

/* --- Fragen ------------------------------------------------------------------------------ */
.fragen { margin-top: 38px; display: flex; flex-direction: column; gap: 12px; max-width: 76ch; }
details { border-radius: 20px; overflow: hidden; }
details > * { position: relative; z-index: 1; }
summary { cursor: pointer; list-style: none; padding: 22px 26px; font-size: 18px; font-weight: 640;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 24px; font-weight: 500; color: var(--tinte-still); line-height: 1; }
details[open] summary::after { content: "−"; }
details .antwort { padding: 0 26px 24px; color: var(--tinte-leise); font-size: 16.5px; max-width: 68ch; }
details .antwort p { margin: 0 0 12px; }
details .antwort p:last-child { margin-bottom: 0; }

/* --- Formular ------------------------------------------------------------------------------- */
.kontakt { border-radius: 30px; padding: clamp(32px, 5vw, 54px); margin-top: 42px; }
.kontakt > * { position: relative; z-index: 1; }
form { display: grid; gap: 16px; margin-top: 28px; max-width: 620px; }
.feld { display: flex; flex-direction: column; gap: 7px; }
.feld label { font-size: 15.5px; font-weight: 620; }
.feld input, .feld textarea {
  font: inherit; font-size: 17px; color: var(--tinte);
  background: color-mix(in srgb, var(--papier) 55%, #FFF);
  border: 1px solid var(--kante); border-radius: 14px; padding: 15px 16px; min-height: 56px;
}
.feld textarea { min-height: 130px; resize: vertical; }
.zweispaltig { display: grid; gap: 16px; }
@media (min-width: 640px) { .zweispaltig { grid-template-columns: 1fr 1fr; } }
.einwilligung { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 15.5px; color: var(--tinte-leise); }
.einwilligung input { width: 24px; height: 24px; margin-top: 2px; }
.honig { position: absolute; left: -9999px; }

/* --- Abschluss-Aufruf --------------------------------------------------------------------------- */
.abschluss { text-align: left; }
.abschluss .tasten { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

/* --- Fuß --------------------------------------------------------------------------------------- */
footer { border-top: 1px solid var(--kante); padding-block: 44px 56px; }
footer .bahn { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; align-items: flex-start; }
footer nav { display: flex; flex-direction: column; gap: 9px; }
footer nav .titel { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-still); font-weight: 700; margin-bottom: 3px; }
footer a { color: var(--tinte-leise); text-decoration: none; font-size: 16px; }
footer a:hover { color: var(--tinte); text-decoration: underline; }
.fussnote { font-size: 15px; color: var(--tinte-still); max-width: 44ch; margin: 12px 0 0; }

/* --- Rechtsseiten ------------------------------------------------------------------------------- */
.rechtstext h2 { margin: 40px 0 10px; font-size: 21px; font-weight: 680; max-width: none; }
.rechtstext p, .rechtstext ul { color: var(--tinte-leise); max-width: 66ch; }
.rechtstext ul { padding-left: 22px; }
.rechtstext li { margin-bottom: 7px; }
/* Der Vorlauf einer Rechtsseite. Die eine Aussage, die die meisten Besucher
   suchen, bevor sie zu lesen anfangen: setzt die Seite Cookies oder nicht.
   Steht deshalb ueber und nicht in der Gliederung. */
.rechtstext .vorlauf {
  color: var(--tinte); font-size: 18px; line-height: 1.62; max-width: 62ch;
  border-left: 3px solid var(--kante); padding-left: 20px; margin: 24px 0 34px;
}
.rechtstext .fussnote { margin-top: 44px; }

.warnung { border: 2px dashed var(--signal); border-radius: 18px; padding: 22px 24px; margin: 26px 0 36px; }
.warnung p { color: var(--tinte); margin: 0; }
.warnung strong { color: var(--signal); }
code { background: color-mix(in srgb, var(--tinte) 7%, transparent); padding: 2px 6px; border-radius: 5px; font-size: .92em; }

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

/* --- Roadmap ---------------------------------------------------------------
   Drei Zustaende, unterschieden ueber Form und Wortlaut, nicht ueber Farbe
   allein. Dieselbe Regel wie in der Anwendung: die Signalfarbe bleibt fuer
   das eine reserviert, was wirklich meldet. */
.spur { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.spur > li {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 18px;
  align-items: baseline;
  padding: 18px 20px; border-radius: 18px;
}
.spur > li.da     { background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--schatten); }
.spur > li.arbeit { background: transparent; border: 1px solid var(--kante); }
.spur > li.spaeter{ background: transparent; border: 1px dashed var(--kante); }

.spur .stand {
  grid-row: 1; align-self: center;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  white-space: nowrap; padding: 5px 12px; border-radius: 999px;
}
.spur li.da     .stand { background: var(--primaer); color: var(--primaer-auf); }
.spur li.arbeit .stand { background: var(--papier-tief); color: var(--tinte); }
.spur li.spaeter .stand{ background: transparent; color: var(--tinte-still); border: 1px solid var(--kante); padding-inline: 11px; }

.spur h3 { grid-column: 2; grid-row: 1; }
.spur p  { grid-column: 2; grid-row: 2; margin: 0; color: var(--tinte-leise); font-size: 17px; max-width: 62ch; }

@media (max-width: 620px) {
  .spur > li { grid-template-columns: 1fr; }
  .spur .stand { grid-column: 1; justify-self: start; margin-bottom: 6px; }
  .spur h3, .spur p { grid-column: 1; }
  .spur h3 { grid-row: auto; }
  .spur p  { grid-row: auto; }
}

/* --- Hintergrundwechsel -----------------------------------------------------
   Ein Papiergrund ueber sieben Abschnitte hinweg wird eintoenig, und ein
   Unterschied von zwei Prozent Helligkeit ist keiner. Deshalb drei Gruende mit
   echtem Abstand, in einer festen Reihenfolge eingesetzt:

     Papier   der Grund, auf dem gelesen wird
     Sand     ein Abschnitt, der sich als eigener Block liest
     Tiefe    einmal je Seite, dort wo es zur Sache geht

   Jeder Wechsel bekommt oben eine Regalkante: dieselbe Linie, die in der
   Anwendung ueber jedem Fach liegt. Damit sieht ein Abschnittswechsel nicht
   nach Farbwechsel aus, sondern nach einem neuen Brett im Regal. */

.grund-sand,
.grund-tiefe { position: relative; }

.grund-sand::before,
.grund-tiefe::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--tinte) 0%, transparent 78%);
  opacity: .5;
}

.grund-sand {
  background: var(--sand);
  border-bottom: 1px solid var(--sand-kante);
}

.grund-tiefe {
  background: var(--tiefgrund);
  color: var(--tiefgrund-auf);
  /* Glas ist im Hellen eine weisse Milchscheibe. Auf dunklem Grund wuerde
     daraus eine helle Karte, auf der heller Text steht: gemessen unlesbar.
     Innerhalb dieses Abschnitts gelten deshalb dieselben Glaswerte wie im
     dunklen Modus. Ein Token-Wechsel statt einer Sonderregel je Bauteil. */
  --glas: rgba(255,255,255,.055);
  --glas-fest: rgba(255,255,255,.085);
  --glas-rand: rgba(255,255,255,.14);
  --kante: rgba(240,238,231,.16);
  --papier-tief: rgba(255,255,255,.08);
  --tinte: var(--tiefgrund-auf);
  --tinte-leise: color-mix(in srgb, var(--tiefgrund-auf) 78%, transparent);
  --tinte-still: color-mix(in srgb, var(--tiefgrund-auf) 58%, transparent);
}
.grund-tiefe::before {
  background: linear-gradient(90deg, var(--marker) 0%, transparent 62%);
  opacity: .8;
}
.grund-tiefe .kennung { color: color-mix(in srgb, var(--tiefgrund-auf) 58%, transparent); }
.grund-tiefe .fliess  { color: color-mix(in srgb, var(--tiefgrund-auf) 78%, transparent); }
.grund-tiefe h2, .grund-tiefe h3 { color: var(--tiefgrund-auf); }
.grund-tiefe .kachel {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}
.grund-tiefe .kachel p { color: color-mix(in srgb, var(--tiefgrund-auf) 74%, transparent); }
.grund-tiefe .taste {
  border-color: rgba(255,255,255,.28);
  color: var(--tiefgrund-auf);
}
.grund-tiefe .taste:hover { background: rgba(255,255,255,.08); }
.grund-tiefe .taste.fuehrend {
  background: var(--tiefgrund-auf); color: var(--tiefgrund); border-color: transparent;
}
.grund-tiefe .band { border-top-color: rgba(255,255,255,.18); }
.grund-tiefe .band span { color: color-mix(in srgb, var(--tiefgrund-auf) 66%, transparent); }
.grund-tiefe .spur > li.spaeter,
.grund-tiefe .spur > li.arbeit { border-color: rgba(255,255,255,.18); }
.grund-tiefe .spur p { color: color-mix(in srgb, var(--tiefgrund-auf) 74%, transparent); }

/* Auf Sand steht Glas zu blass da, es braucht etwas mehr Weiss unter sich. */
.grund-sand .glas,
.grund-sand .kachel { background: rgba(255,255,255,.72); }

/* --- Bild im Aufmacher ------------------------------------------------------
   Ein gerahmter Kasten mit einem Bildschirmfoto drin macht aus einer Startseite
   einen Prospekt. Stattdessen liegt das Bild hinter dem Text und laeuft nach
   links und unten aus, bis nur noch Papier da ist: man sieht, dass es die
   Anwendung ist, ohne dass sie um Aufmerksamkeit kaempft.

   Zwei Masken uebereinander, eine nach links und eine nach unten. Auf
   schmalen Geraeten faellt das Bild weg: dort waere es entweder unlesbar
   klein oder im Weg. */

.aufmacher { position: relative; overflow: hidden; }
.aufmacher > .bahn { position: relative; z-index: 1; }
.aufmacher .bahn > * { max-width: 46rem; }

.hintergrundbild {
  position: absolute;
  top: 96px;
  right: -8%;
  width: 68%;
  min-width: 720px;
  margin: 0;
  pointer-events: none;
  user-select: none;
  opacity: .40;
  -webkit-mask-image:
    linear-gradient(to left, #000 26%, transparent 88%),
    linear-gradient(to top, transparent 2%, #000 58%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to left, #000 26%, transparent 88%),
    linear-gradient(to top, transparent 2%, #000 58%);
  mask-composite: intersect;
}

/* Im dunklen Modus liegt ein helles Bildschirmfoto viel schwerer auf als im
   hellen. Gleiche Deckkraft waere hier ein leuchtender Block neben dem Text. */
.hintergrundbild img { display: block; width: 100%; height: auto; }

@media (max-width: 1100px) {
  .hintergrundbild { display: none; }
  .aufmacher .bahn > * { max-width: none; }
}

/* --- Kopfleiste auf schmalen Geraeten ---------------------------------------
   Bei 390px schob die Marke samt Zusatz den Knopf "Demo anfragen" aus dem
   Bild. Der Zusatz steht ohnehin gleich darunter im Aufmacher, also weicht er
   zuerst. Gefunden beim Nachsehen mit einem echten Browser am 20.08.2026. */
@media (max-width: 560px) {
  .kopf .bahn { gap: 10px; min-height: 64px; }
  .marke .zusatz { display: none; }
  .kopf .taste.klein { min-height: 44px; padding: 0 16px; font-size: 15px; }
}