/* =========================================================================
   simplifant — Digitalisierung. Einfach gemacht.
   Warmer Papiergrund, tiefes Ink, ein einziger Aktions-Akzent in Koralle,
   Mint als ruhige Flaeche. Runde Formen nach Brandboard. Alles lokal,
   keine Fremdanfragen.
   ========================================================================= */

/* ---------- Schrift (lokal) ----------
   Manrope traegt die ganze Oberflaeche, in vier Schnitten. Die Wortmarke im
   Kopf ist derselbe Schnitt in 700 — deshalb braucht das Logo keine
   Fremdschrift. Im abgebildeten Leistungsnachweis steht eine generische
   Schreibmaschinenschrift: dort ist Monospace die Schrift des Formulars,
   nicht die der Seite. */
@font-face { font-family:'Manrope'; src:url('../fonts/Manrope-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Manrope'; src:url('../fonts/Manrope-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Manrope'; src:url('../fonts/Manrope-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Manrope'; src:url('../fonts/Manrope-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ---------- Marken-Token ----------
   Erste Ebene: die verbindlichen simplifant-Token, unveraendert.
   Zweite Ebene: die Rollen, unter denen sie in dieser Seite arbeiten. Die
   Rollennamen sind absichtlich dieselben geblieben wie vorher, damit die
   Choreografie kein einziges Mal angefasst werden musste. */
:root {
  /* simplifant */
  --sf-ink:    #153236;
  --sf-coral:  #f06449;
  --sf-mint:   #cfe4de;
  --sf-paper:  #f6f2e9;
  --sf-slate:  #5e6f72;
  --sf-white:  #ffffff;

  /* Flaechen */
  --papier:       var(--sf-paper);
  --papier-hell:  var(--sf-white);
  --papier-tief:  #efe9dc;                 /* Paper eine Nuance tiefer, gleicher Ton */
  --mint-blass:   color-mix(in srgb, var(--sf-mint) 52%, var(--sf-paper));
  --mint-flaeche: color-mix(in srgb, var(--sf-mint) 78%, var(--sf-paper));

  /* Schriftfarben: drei Stufen, alle gemessen ueber 4.5:1 auf Papier.
     Die Hierarchie kommt aus Groesse, Versalien und Gewicht, nicht aus
     ausgewaschenem Grau. */
  --tinte:        var(--sf-ink);           /* 12.2:1 auf Papier */
  --tinte-weich:  var(--sf-slate);         /*  4.7:1 auf Papier */
  --tinte-leise:  var(--sf-ink);           /* Feldmarken tragen Ink, nicht Grau */

  /* Aktion. Koralle ist der einzige Akzent.
     --kuli-flaeche ist dieselbe Koralle, 10 % Richtung Papier gemischt:
     nur so traegt sie ein Ink-Label mit 4.8:1 statt 4.3:1. */
  --kuli:         var(--sf-coral);
  --kuli-flaeche: #f1735a;
  --kuli-tief:    var(--sf-ink);
  --kuli-blass:   color-mix(in srgb, var(--sf-coral) 16%, var(--sf-paper));
  --kuli-schein:  color-mix(in srgb, var(--sf-coral) 38%, transparent);
  --stempel:      var(--sf-coral);

  /* Linien */
  --raster:       color-mix(in srgb, var(--sf-ink) 15%, transparent);
  --raster-fein:  color-mix(in srgb, var(--sf-ink)  8%, transparent);

  /* Dunkle Platte */
  --nacht:        var(--sf-ink);
  --nacht-linie:  color-mix(in srgb, var(--sf-paper) 18%, var(--sf-ink));
  --nacht-weich:  color-mix(in srgb, var(--sf-mint) 84%, var(--sf-ink));

  --schrift: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schreibmaschine: ui-monospace, 'Cascadia Mono', 'Consolas', 'DejaVu Sans Mono', monospace;

  /* Form */
  --rund-sm:   .5rem;
  --rund-md:   1rem;
  --rund-lg:   1.5rem;
  --rund-voll: 999px;

  --kopf-h: 72px;
  --rand: clamp(1.25rem, 5vw, 5rem);
  --platte-rand: clamp(.75rem, 2.5vw, 2rem);   /* Einzug der eingelegten Platten */
  --spalte: 190px;
  --max: 1240px;
  --kurve: cubic-bezier(.22, 1, .36, 1);
  --takt-schnell: 140ms;
  --takt: 220ms;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--papier); }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

/* Sprungziele dürfen nicht unter der klebenden Kopfleiste landen */
:target,
main[id],
section[id] { scroll-margin-top: calc(var(--kopf-h) + 1.5rem); }

a { color: inherit; }

/* Fokus: der Ring selbst traegt Ink (12.2:1), die Koralle liegt als Schein
   darum. Koralle allein waere auf Papier nur 2.9:1 und damit zu leise. */
:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--kuli-schein);
  border-radius: var(--rund-sm);
}
.abschnitt-tinte :focus-visible { outline-color: var(--sf-paper); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--tinte);
  color: var(--sf-paper);
  padding: .8rem 1.35rem;
  font-size: .85rem;
  font-weight: 600;
  border-radius: 0 0 var(--rund-sm) 0;
}
.skip-link:focus { left: 0; }

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

/* ---------- Typografie ----------
   Eine Familie, vier Schnitte. Die Ueberschriften laufen im selben engen
   700er Duktus wie die Wortmarke; das ist der Punkt, an dem die Seite nach
   simplifant aussieht und nicht nach umgefaerbt. */
h1, h2, h3 {
  margin: 0;
  text-wrap: balance;
  font-weight: 700;
  letter-spacing: -.03em;
  /* Sicherheitsnetz für deutsche Komposita: greift nur, wenn ein Wort
     allein nicht in die Zeile passt. Sonst kein sichtbarer Unterschied. */
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(2.3rem, 4.8vw, 3.85rem);
  line-height: 1.04;
  letter-spacing: -.038em;
}

h2 {
  font-size: clamp(1.7rem, 3.1vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -.034em;
}

h3 {
  font-size: 1.1rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -.015em;
}

p { margin: 0; }

strong, b { font-weight: 600; }

.lead {
  font-size: clamp(1.05rem, 1.35vw, 1.24rem);
  line-height: 1.55;
  color: var(--tinte-weich);
  max-width: 46ch;
}

.gross {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.55;
  max-width: 56ch;
}

/* Feldmarke: das durchlaufende Motiv, eine Formular-Feldbezeichnung.
   Traegt jetzt Ink statt Grau — klein, versal, gesperrt reicht das als
   Nebenrolle voellig aus und ist dabei sauber lesbar. */
.feldmarke {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--tinte-leise);
}
.abschnitt-tinte .feldmarke { color: var(--nacht-weich); }

/* ---------- Knöpfe ----------
   Pille nach Brandboard. Ruhezustand Koralle mit Ink-Label (4.8:1),
   Hover kippt auf Ink mit Papier-Label. Kein Anheben, nur Farbe. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.55rem;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid var(--kuli-flaeche);
  border-radius: var(--rund-voll);
  background: var(--kuli-flaeche);
  color: var(--tinte);
  cursor: pointer;
  transition: background-color var(--takt) var(--kurve),
              color var(--takt) var(--kurve),
              border-color var(--takt) var(--kurve);
}
.btn:hover { background: var(--kuli-tief); border-color: var(--kuli-tief); color: var(--sf-paper); }

.btn-linie { background: transparent; color: var(--tinte); border-color: var(--raster); }
.btn-linie:hover { background: transparent; color: var(--tinte); border-color: var(--kuli); }

.btn-papier { background: var(--sf-paper); color: var(--tinte); border-color: var(--sf-paper); }
.btn-papier:hover { background: var(--kuli-flaeche); border-color: var(--kuli-flaeche); color: var(--tinte); }

.abschnitt-tinte .btn-linie { color: var(--sf-paper); border-color: color-mix(in srgb, var(--sf-paper) 35%, transparent); }
.abschnitt-tinte .btn-linie:hover { background: transparent; color: var(--sf-paper); border-color: var(--sf-paper); }

.btn-sm { padding: .7rem 1.2rem; font-size: .875rem; }
.btn-breit { width: 100%; }

/* ---------- Kopfleiste ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--papier);
  border-bottom: 1px solid transparent;
  transition: border-color var(--takt), background-color var(--takt);
}
.site-header.gescrollt {
  border-bottom-color: var(--raster);
  background: color-mix(in srgb, var(--sf-paper) 88%, transparent);
  backdrop-filter: blur(10px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--kopf-h);
  padding: 0 var(--rand);
  max-width: var(--max);
  margin: 0 auto;
}

/* Marke: Bildmarke inline, Wortmarke als echter Text in Manrope 700.
   Dadurch haengt das Logo an keiner fremden Schrift. */
.brand {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .6rem;
  line-height: 1.15;
}
.brand-mark { display: block; width: auto; height: 30px; flex: none; }
.brand-text { display: block; }
.brand-name {
  display: block;
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -.04em;
}
.brand-sub {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--tinte-weich);
  margin-top: .12rem;
}

.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.site-nav a:not(.btn) {
  text-decoration: none;
  font-size: .925rem;
  font-weight: 500;
  color: var(--tinte-weich);
  padding: .35rem 0;
  transition: color var(--takt-schnell) ease;
}
.site-nav a:not(.btn):hover { color: var(--tinte); }
.site-nav .nav-tel {
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
  white-space: nowrap;
}
.site-nav .nav-tel:hover { color: var(--tinte); text-decoration: underline; text-decoration-color: var(--kuli); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--raster);
  border-radius: var(--rund-voll);
  cursor: pointer;
  position: relative;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  position: absolute;
  left: 50%; margin-left: -9px;
  width: 18px; height: 1.5px;
  border-radius: 2px;
  background: var(--tinte);
  content: '';
}
.nav-toggle-bars { top: 50%; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

/* =========================================================================
   AKT-MECHANIK
   Grundzustand = vollständige, lesbare Seite ohne JS.
   .kino (setzt das Skript) macht daraus gepinnte Akte.
   ========================================================================= */
.akt { position: relative; }
.akt-spur { position: relative; }
.akt-buehne { position: relative; }

.kino .akt-spur { height: calc(var(--strecke, 500) * 1vh); }
.kino .akt-buehne {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  padding-top: var(--kopf-h);
}

/* =========================================================================
   AKT 1+2: DAS BLATT
   ========================================================================= */
#akt-blatt {
  /* Ruhezustand ohne Skript: alles sichtbar, Papierzustand */
  --b-auftakt: 0;
  --b-n1: 1; --b-n2: 1; --b-n3: 1; --b-n4: 1;
  --b-notiz-weg: 0;
  --b-lagen: 1; --b-lagen-weg: 0;
  --b-aufrichten: 1;
  --b-papierweg: 0;
  --b-scan: 0;
  --b-stempel: 0;
  --b-b-in: 1; --b-b-out: 0;
  --b-c: 1;
  /* Der Grund ist eine warme Tischplatte, kein Weiss: das Blatt soll heller
     sein als der Raum, in dem es liegt. */
  background:
    radial-gradient(120% 80% at 50% 6%, #fffdf7 0%, var(--papier) 52%, var(--papier-tief) 100%);
}

/* Ruhe-Layout (kein JS, reduzierte Bewegung) */
.szene {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(3rem, 7vw, 6rem) var(--rand);
  max-width: var(--max);
  margin: 0 auto;
}

.rede { max-width: 46rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; align-content: start; }
.rede > * { min-width: 0; }
.rede .feldmarke { margin-bottom: .2rem; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .4rem; }

.belegleiste {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--raster);
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(min(158px, 100%), 1fr));
  font-size: .88rem;
  color: var(--tinte-weich);
  max-width: 46rem;
}
.belegleiste li { display: grid; gap: .2rem; }
.belegleiste span {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte);
}

/* Die Statuszeile ist der erste Beleg dafuer, dass Mint der Ton nach der
   Umstellung ist: ruhige Flaeche, Ink-Text, ein Punkt in Koralle. */
.statuszeile {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
  border: 0;
  background: var(--mint-flaeche);
  padding: .6rem 1.05rem;
  border-radius: var(--rund-voll);
  width: fit-content;
}
.statuspunkt {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--kuli);
  flex: none;
}

/* Der Tisch mit dem Stapel */
.tisch {
  --blatt-h: min(64svh, 560px);
  perspective: 1500px;
  perspective-origin: 50% 42%;
  display: flex;
  justify-content: center;
  position: relative;
}

.stapel {
  position: relative;
  height: var(--blatt-h);
  aspect-ratio: 640 / 860;
  transform-style: preserve-3d;
  transform: rotateX(calc((1 - var(--b-aufrichten)) * 30deg))
             rotateZ(calc((1 - var(--b-aufrichten)) * -5deg));
  filter: drop-shadow(0 22px 44px rgba(21, 50, 54, .18));
}

.lage {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, #ffffff, #efece1);
  border: 1px solid #e3ded0;
  opacity: calc(var(--b-lagen) * (1 - var(--b-lagen-weg)));
  transform:
    translateZ(calc(var(--n) * -7px))
    translate(
      calc(var(--n) * 6px + var(--b-lagen-weg) * var(--n) * 34px),
      calc(var(--n) * 7px - var(--b-lagen-weg) * var(--n) * 46vh))
    rotate(calc(var(--n) * .85deg + var(--b-lagen-weg) * var(--n) * -7deg));
}
.lage::after {
  content: '';
  position: absolute;
  inset: 8% 6%;
  background:
    repeating-linear-gradient(to bottom, transparent 0 12px, #dcd7c8 12px 13px);
  opacity: .5;
}

.blatt { position: absolute; inset: 0; }
.blatt .lnw { display: block; width: 100%; height: 100%; }

/* Ebenen im Leistungsnachweis */
#g-durchschlag { opacity: calc(1 - var(--b-papierweg)); }
#g-raster, #g-druck { opacity: calc(1 - .5 * var(--b-papierweg)); }
#g-hand .hand-zeile,
#g-hand-zahl .hand-zeile {
  opacity: clamp(0, calc(1 - (var(--b-papierweg) * 12 - var(--i))), 1);
}
#g-maschine .masch-zeile {
  opacity: clamp(0, calc(var(--b-scan) * 11 - var(--i) * 1.08), 1);
}
#g-maschine .masch-status { opacity: clamp(0, calc(var(--b-scan) * 8 - 6.4), 1); }
#g-scan {
  opacity: clamp(0, min(calc(var(--b-scan) * 9), calc((1 - var(--b-scan)) * 9)), 1);
  transform: translateY(calc(var(--b-scan) * 292px));
}

/* Textmarker-Marken auf dem Blatt */
.marke {
  position: absolute;
  background: rgba(94, 111, 114, .75);
  mix-blend-mode: multiply;
  transform-origin: left center;
  pointer-events: none;
}
.marke-1 { left: 27%; top: 20.5%; width: 60%; height: 8%;  transform: scaleX(var(--b-n1)); }
.marke-2 { left: 27%; top: 32%;   width: 60%; height: 8%;  transform: scaleX(var(--b-n2)); }
.marke-3 { left: 86.6%; top: 17.8%; width: 9%; height: 34%; transform: scaleX(var(--b-n3)); }
.marke-4 { left: 4.4%; top: 53.8%; width: 91%; height: 14%; transform: scaleX(var(--b-n4)); }
.marke-1, .marke-2, .marke-3, .marke-4 { opacity: calc(1 - var(--b-notiz-weg)); }

/* Der Stempel */
.stempel {
  position: absolute;
  width: min(340px, 62%);
  left: 50%;
  top: 63%;
  z-index: 4;
  opacity: var(--b-stempel);
  transform: translate(-50%, -50%)
             rotate(-7deg)
             scale(calc(2.5 - 1.5 * var(--b-stempel)));
  pointer-events: none;
}

/* Randnotizen */
.notizen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.notiz {
  border-top: 0;
  border-radius: var(--rund-md);
  background: var(--sf-white);
  padding: 1.05rem 1.2rem 1.15rem;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--tinte-weich);
  box-shadow: 0 1px 0 var(--raster-fein), 0 10px 26px rgba(21, 50, 54, .06);
}
.notiz-marke {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte);
  margin-bottom: .4rem;
}

/* ---- Kino-Modus für Akt 1+2 ---- */
.kino #akt-blatt .szene {
  position: absolute;
  inset: var(--kopf-h) 0 0;
  display: block;
  padding: 0;
  max-width: none;
}
.kino #akt-blatt .rede {
  position: absolute;
  z-index: 5;
  gap: 1.05rem;
}
.kino #akt-blatt .rede-a {
  left: var(--rand);
  top: 50%;
  transform: translateY(calc(-50% - var(--b-auftakt) * 40px));
  width: min(43%, 33rem);
  opacity: calc(1 - var(--b-auftakt));
}
.kino #akt-blatt .rede-b,
.kino #akt-blatt .rede-c {
  left: var(--rand);
  top: 9%;
  width: min(30%, 25rem);
}
.kino #akt-blatt .rede-b { opacity: calc(var(--b-b-in) - var(--b-b-out)); }
.kino #akt-blatt .rede-c {
  opacity: var(--b-c);
  transform: translateY(calc((1 - var(--b-c)) * 26px));
}
/* Der Auftakt enthält Links; ausgeblendet gehört er aus der Tabreihenfolge.
   Die reinen Textblöcke bleiben für Screenreader lesbar, nur nicht anklickbar. */
.kino #akt-blatt .rede-a.aus { visibility: hidden; }
.kino #akt-blatt .rede-b.aus,
.kino #akt-blatt .rede-c.aus { pointer-events: none; }

.kino #akt-blatt .tisch {
  --blatt-h: min(64svh, 570px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform:
    translate(calc(-50% + (1 - var(--b-auftakt)) * 25%), -50%)
    scale(calc(.88 + var(--b-auftakt) * .12));
  display: block;
  z-index: 2;
}
.kino #akt-blatt .stapel { margin: 0 auto; }

.kino #akt-blatt .notizen {
  display: block;
  position: static;
}
.kino #akt-blatt .notiz {
  position: absolute;
  width: min(21rem, 26%);
  z-index: 6;
  background: var(--sf-white);
  box-shadow: 0 14px 34px rgba(21, 50, 54, .1);
  padding: .95rem 1.15rem 1.05rem;
}
/* Die Verbindung zum Blatt: eine kurze Koralle-Linie statt einer Ink-Kante */
.kino #akt-blatt .notiz::after {
  content: '';
  position: absolute;
  top: 1.35rem;
  height: 2px;
  width: 3.5rem;
  border-radius: 2px;
  background: var(--kuli);
}
.kino #akt-blatt .notiz-1,
.kino #akt-blatt .notiz-2 { left: 2.2%; }
.kino #akt-blatt .notiz-3,
.kino #akt-blatt .notiz-4 { right: 2.2%; }
.kino #akt-blatt .notiz-1 { top: 46%; }
.kino #akt-blatt .notiz-2 { top: 71%; }
.kino #akt-blatt .notiz-3 { top: 18%; }
.kino #akt-blatt .notiz-4 { top: 47%; }
.kino #akt-blatt .notiz-1::after,
.kino #akt-blatt .notiz-2::after { right: -3.5rem; }
.kino #akt-blatt .notiz-3::after,
.kino #akt-blatt .notiz-4::after { left: -3.5rem; }

.kino #akt-blatt .notiz-1 { opacity: calc(var(--b-n1) - var(--b-notiz-weg)); transform: translateX(calc((var(--b-n1) - 1) * 26px)); }
.kino #akt-blatt .notiz-2 { opacity: calc(var(--b-n2) - var(--b-notiz-weg)); transform: translateX(calc((var(--b-n2) - 1) * 26px)); }
.kino #akt-blatt .notiz-3 { opacity: calc(var(--b-n3) - var(--b-notiz-weg)); transform: translateX(calc((1 - var(--b-n3)) * 26px)); }
.kino #akt-blatt .notiz-4 { opacity: calc(var(--b-n4) - var(--b-notiz-weg)); transform: translateX(calc((1 - var(--b-n4)) * 26px)); }

/* Der Stempel liegt nur im Kino-Modus auf dem Blatt */
.stempel { display: none; }
.kino #akt-blatt .stempel { display: block; }

/* =========================================================================
   AKT 3: DER LAUFZETTEL
   ========================================================================= */
#leistungen {
  --b-p1: 1; --b-p2: 1; --b-p3: 1;
  --b-s1: 0; --b-s2: 0; --b-s3: 0;
  background: var(--papier);
  border-top: 1px solid var(--raster);
}

.szene-zettel { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); }
.zettel-kopfzeile { display: grid; gap: 1rem; max-width: 44rem; }
.zettel-kopfzeile p:last-child { color: var(--tinte-weich); max-width: 52ch; }

/* Der Laufzettel ist die erste grosse gerundete Flaeche: weisses Blatt auf
   warmem Grund, kein Rahmen, sondern ein weicher Schatten. */
.laufzettel {
  border: 0;
  background: var(--sf-white);
  border-radius: var(--rund-lg);
  box-shadow: 0 1px 0 var(--raster-fein), 0 18px 44px rgba(21, 50, 54, .07);
  overflow: hidden;
}

/* Die Reiterleiste ergibt nur im gepinnten Akt Sinn und ist reine Dekoration */
.reiter { display: none; }
.kino #leistungen .reiter { display: grid; }
.reiter {
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--raster-fein);
  background: var(--mint-blass);
}
.reiter li {
  position: relative;
  padding: .9rem 1.15rem 1rem;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.015em;
  border-right: 1px solid var(--raster-fein);
  color: var(--tinte-weich);
}
.reiter li:last-child { border-right: 0; }
/* Der aktive Reiter wird durch eine Unterlaengslinie markiert, nicht durch
   eine Farbflaeche. */
.reiter li::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--kuli);
  transform: scaleX(var(--aktiv, 0));
  transform-origin: left center;
}
.reiter li[data-reiter="1"] { --aktiv: var(--b-p1); color: color-mix(in srgb, var(--tinte) calc(var(--b-p1) * 100%), var(--tinte-weich)); }
.reiter li[data-reiter="2"] { --aktiv: var(--b-p2); color: color-mix(in srgb, var(--tinte) calc(var(--b-p2) * 100%), var(--tinte-weich)); }
.reiter li[data-reiter="3"] { --aktiv: var(--b-p3); color: color-mix(in srgb, var(--tinte) calc(var(--b-p3) * 100%), var(--tinte-weich)); }
.reiter li span {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-weich);
  margin-bottom: .2rem;
}
.reiter li::after {
  content: 'ERLEDIGT';
  position: absolute;
  right: .8rem;
  top: 50%;
  transform: translateY(-50%) rotate(-6deg) scale(var(--stempelchen, 1));
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--stempel);
  border: 1.5px solid var(--stempel);
  border-radius: var(--rund-sm);
  padding: .16rem .4rem;
  opacity: 0;
}
.reiter li[data-reiter="1"]::after { opacity: var(--b-s1); }
.reiter li[data-reiter="2"]::after { opacity: var(--b-s2); }
.reiter li[data-reiter="3"]::after { opacity: var(--b-s3); }

.zettel { position: relative; min-width: 0; }
.phase {
  padding: clamp(1.5rem, 3.2vw, 2.5rem);
  display: grid;
  gap: .9rem;
  align-content: start;
  border-bottom: 1px solid var(--raster-fein);
}
.phase:last-child { border-bottom: 0; }
.phase-nr {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte);
}
.phase h3 { font-size: clamp(1.35rem, 2.3vw, 1.9rem); font-weight: 700; letter-spacing: -.03em; }
.phase ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; max-width: 52ch; }
.phase ul li { position: relative; padding-left: 1.6rem; color: var(--tinte-weich); }
.phase ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .52em;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--kuli);
}
.phase-fuss {
  font-size: .82rem;
  font-weight: 500;
  color: var(--tinte-weich);
  border-top: 1px solid var(--raster-fein);
  padding-top: .8rem;
}

.kino #leistungen .szene-zettel {
  position: absolute;
  inset: var(--kopf-h) 0 0;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--rand);
  max-width: var(--max);
  margin: 0 auto;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.kino #leistungen .laufzettel { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 0; }
.kino #leistungen .zettel { min-height: 0; height: clamp(290px, 42svh, 430px); }
.kino #leistungen .phase {
  position: absolute;
  inset: 0;
  border-bottom: 0;
  overflow: auto;
}
.kino #leistungen .phase-1 { opacity: var(--b-p1); }
.kino #leistungen .phase-2 { opacity: var(--b-p2); }
.kino #leistungen .phase-3 { opacity: var(--b-p3); }
.kino #leistungen .phase.aus { pointer-events: none; }
.kino #leistungen .reiter li { transition: color .3s, background-color .3s; }

/* =========================================================================
   RUHIGE ABSCHNITTE (Formularabschnitte, keine Karten)
   ========================================================================= */
.abschnitt {
  display: grid;
  grid-template-columns: var(--spalte) minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 6.5rem) var(--rand);
  border-top: 1px solid var(--raster);
  position: relative;
}
.abschnitt + .abschnitt { border-top: 1px solid var(--raster); }
.spalte-marke { align-self: start; position: sticky; top: calc(var(--kopf-h) + 2rem); padding-top: .35rem; }
/* Die Spalte gibt die Breite vor, nicht ihr breitestes Kind. Ohne die
   Begrenzung spannt eine Tabelle oder Liste die Grid-Spalte auf und der
   ganze Abschnitt ragt auf schmalen Geräten aus dem Bild. */
.spalte-inhalt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.45rem; align-content: start; }
.spalte-inhalt > * { min-width: 0; }
.spalte-inhalt > p { color: var(--tinte-weich); max-width: 62ch; }
.spalte-inhalt > h2 { margin-bottom: .2rem; }

/* Die eingelegten Platten: dunkel (Rechner) und mint (Portraet). Sie liegen
   als gerundete Flaechen auf dem Papier, so wie die Flaechen im Brandboard.
   Der Inhalt bleibt trotz Einzug exakt im selben Raster wie die uebrigen
   Abschnitte. */
.abschnitt-tinte,
.portraet-akt {
  border-radius: var(--rund-lg);
  margin-inline: var(--platte-rand);
  padding-inline: calc(max(var(--rand), calc((100vw - var(--max)) / 2 + var(--rand))) - var(--platte-rand));
}

.abschnitt-tinte {
  background: var(--nacht);
  color: var(--sf-paper);
  max-width: none;
  border-top: 0;
}
.abschnitt-tinte > * { max-width: none; }
.abschnitt-tinte .spalte-inhalt > p { color: color-mix(in srgb, var(--sf-paper) 78%, var(--nacht)); }
.abschnitt-tinte { --raster: var(--nacht-linie); --raster-fein: var(--nacht-linie); }

/* Schritte */
.schritte {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: schritt;
}
.schritte li {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: .35rem 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--raster);
}
.schritte li:last-child { border-bottom: 1px solid var(--raster); }
.schritt-nr {
  grid-row: 1 / 3;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-weich);
  padding-top: .3rem;
}
.schritte h3 { grid-column: 2; }
.schritte p:not(.schritt-nr) { grid-column: 2; color: var(--tinte-weich); max-width: 58ch; }

/* Definitionsliste im Formularstil */
.tabellenliste { margin: .5rem 0 0; display: grid; gap: 0; }
.tabellenliste > div {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: .3rem 1.5rem;
  padding: 1.05rem 0;
  border-top: 1px solid var(--raster);
}
.tabellenliste > div:last-child { border-bottom: 1px solid var(--raster); }
.tabellenliste dt {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte);
  padding-top: .32rem;
}
.tabellenliste dd { margin: 0; color: var(--tinte-weich); }
.abschnitt-tinte .tabellenliste dd { color: color-mix(in srgb, var(--sf-paper) 80%, var(--nacht)); }

/* Der Hinweis liegt auf einer Mint-Flaeche statt an einer Linie */
.hinweiskasten {
  background: var(--mint-blass);
  border-radius: var(--rund-md);
  padding: 1rem 1.25rem;
  font-size: 1rem;
  color: var(--tinte-weich);
  max-width: 62ch;
}
.hinweiskasten strong { font-weight: 700; color: var(--tinte); }

/* =========================================================================
   FÖRDERRECHNER (Signature-Interaktion)
   ========================================================================= */
.rechner .spalte-inhalt { gap: 1.5rem; }
.rechner .btn-papier { justify-self: start; }

.rechner-feld {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 2.5rem;
  align-items: end;
  border-top: 1px solid var(--nacht-linie);
  border-bottom: 1px solid var(--nacht-linie);
  padding: 1.5rem 0;
}
.regler label, .zaehler label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nacht-weich);
  margin-bottom: .55rem;
}
.regler-wert {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--sf-paper);
  margin-bottom: .65rem;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  /* Der Reglerknopf ragt über die Bahn hinaus und erzeugt sonst
     zwei Pixel Querscrollen im Rechnerfeld. */
  width: calc(100% - 24px);
  margin-inline: 12px;
  height: 26px;
  background: transparent;
  cursor: pointer;
  display: block;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--sf-mint) 40%, var(--nacht));
}
input[type="range"]::-moz-range-track { height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--sf-mint) 40%, var(--nacht)); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  background: var(--kuli);
  border: 0; border-radius: 50%;
  margin-top: -9.5px;
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--kuli);
  border: 0; border-radius: 50%;
}
.regler-skala {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: var(--nacht-weich);
  margin-top: .55rem;
}

.stepper {
  display: flex;
  align-items: stretch;
  width: fit-content;
  border: 1px solid var(--nacht-linie);
  border-radius: var(--rund-voll);
  overflow: hidden;
}
.stepper button {
  width: 48px;
  background: transparent;
  border: 0;
  color: var(--sf-paper);
  font-size: 1.2rem;
  font-family: var(--schrift);
  cursor: pointer;
  transition: background-color var(--takt-schnell) ease, color var(--takt-schnell) ease;
}
.stepper button:hover { background: var(--kuli); color: var(--tinte); }
.stepper input {
  width: 62px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--nacht-linie);
  border-right: 1px solid var(--nacht-linie);
  color: var(--sf-paper);
  font-family: var(--schrift);
  font-size: 1.1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: .7rem 0;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.deckel { display: grid; gap: .6rem; }
.deckel-titel {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nacht-weich);
}
.deckel-bahn {
  position: relative;
  height: 44px;
  background: color-mix(in srgb, var(--sf-paper) 8%, var(--nacht));
  border: 1px solid var(--nacht-linie);
  border-radius: var(--rund-voll);
  overflow: hidden;
}
/* Die Bahn laeuft in Mint und schlaegt in Koralle um, sobald der Deckel
   greift. Die Warnfarbe ist damit dieselbe Farbe wie die Aktion — die Seite
   kommt mit genau einem Akzent aus. */
.deckel-fuellung {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: var(--rund-voll);
  background: var(--sf-mint);
  transform-origin: left center;
  transform: scaleX(var(--fuell, .4));
  transition: transform .28s var(--kurve), background-color .28s;
}
.deckel.anschlag .deckel-fuellung { background: var(--kuli); }
.deckel-marke {
  position: absolute;
  top: 0; bottom: 0;
  left: 80%;
  border-left: 1px dashed color-mix(in srgb, var(--sf-paper) 55%, transparent);
  pointer-events: none;
}
.deckel-marke span {
  position: absolute;
  left: .6rem; top: 50%;
  transform: translateY(-50%);
  font-size: .72rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--sf-paper) 75%, var(--nacht));
  white-space: nowrap;
}
.deckel-status {
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  color: var(--nacht-weich);
}
.deckel.anschlag .deckel-status { color: var(--sf-paper); }

.ergebnis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem 2.5rem;
  align-items: end;
  border-top: 1px solid var(--nacht-linie);
  padding-top: 1.5rem;
}
/* Die grosse Zahl ist der einzige Ort, an dem Koralle als Schrift auftritt:
   gross genug, dass 4.3:1 als Grosstext sicher traegt. */
.grosse-zahl {
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  color: var(--kuli);
  margin-top: .55rem;
}
.ergebnis-zeilen { margin: 0; display: grid; gap: .55rem; }
.ergebnis-zeilen > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--nacht-linie);
  padding-bottom: .5rem;
}
.ergebnis-zeilen dt { font-size: .9rem; color: var(--nacht-weich); }
.ergebnis-zeilen dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bescheide {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.bescheide li {
  font-size: .8rem;
  border: 1px solid var(--nacht-linie);
  border-radius: var(--rund-sm);
  padding: .55rem .8rem;
  display: grid;
  gap: .2rem;
  min-width: 8.5rem;
}
.bescheide li span { color: var(--nacht-weich); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.bescheide li b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* =========================================================================
   MUSTERPROJEKTE
   ========================================================================= */
/* Aus den Spalten sind gerundete Karten geworden: weisses Blatt auf Papier,
   kein Rahmen. Das ist die Form aus dem Brandboard. */
.akten {
  display: grid;
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  margin-top: .75rem;
}
.akte {
  position: relative;
  background: var(--sf-white);
  border-radius: var(--rund-md);
  padding: 1.4rem 1.5rem 1.6rem;
  box-shadow: 0 1px 0 var(--raster-fein), 0 12px 30px rgba(21, 50, 54, .05);
  display: grid;
  gap: .85rem;
  align-content: start;
}
.akte h3 { font-size: 1.05rem; }
.akte-reiter {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-weich);
}
.akte dl { margin: 0; display: grid; gap: .1rem; }
.akte dt {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte);
  margin-top: .55rem;
}
.akte dd { margin: 0; font-size: .93rem; color: var(--tinte-weich); }

/* =========================================================================
   PORTRÄT-AKT
   ========================================================================= */
/* Eine fertig komponierte Aufnahme auf einer Mint-Platte: der Studiogrund
   des Bildes ist auf denselben Papierton gezogen, es gibt keine
   Freistellkante, die auffallen koennte. */
.portraet-akt {
  position: relative;
  background: var(--mint-blass);
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.portraet-bild {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 400px;
}
.portraet-scharf { display: block; width: 100%; border-radius: var(--rund-md); }
.portraet-text { display: grid; gap: 1.2rem; align-content: center; }
.portraet-text p { color: var(--tinte-weich); max-width: 54ch; }
.stichworte {
  list-style: none;
  margin: .3rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.stichworte li {
  font-size: .78rem;
  font-weight: 500;
  color: var(--tinte);
  background: color-mix(in srgb, var(--sf-white) 70%, transparent);
  border-radius: var(--rund-voll);
  padding: .35rem .8rem;
}
.portraet-name { display: grid; gap: .15rem; border-top: 1px solid var(--raster); padding-top: 1rem; margin-top: .3rem; }
.portraet-name strong { font-weight: 700; color: var(--tinte); }
.portraet-name span { font-size: .82rem; color: var(--tinte-weich); }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq { border-top: 1px solid var(--raster); }
.faq details {
  border-bottom: 1px solid var(--raster);
  border-radius: var(--rund-md);
  padding-inline: 1.1rem;
  margin-inline: -1.1rem;
  transition: background-color var(--takt) ease;
}
.faq details[open] { background: var(--mint-blass); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.015em;
  transition: color var(--takt-schnell) ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  position: absolute;
  right: .5rem; top: 50%;
  width: 10px; height: 10px;
  margin-top: -7px;
  border-right: 2px solid var(--kuli);
  border-bottom: 2px solid var(--kuli);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform var(--takt) var(--kurve);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > div { padding: 0 3rem 1.3rem 0; color: var(--tinte-weich); max-width: 68ch; }
.faq summary:hover { color: var(--tinte); }

/* =========================================================================
   KONTAKT
   ========================================================================= */
.kontakt-gitter {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  margin-top: .5rem;
}
.kontakt-wege { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.kontakt-liste { width: 100%; }
.antwortfeld {
  margin-top: .5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--raster);
  display: grid;
  gap: .15rem;
  width: 100%;
  max-width: 26rem;
}
.antwortfeld span {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte);
  margin-bottom: .2rem;
}
.antwortfeld strong { font-size: 1.1rem; font-weight: 600; }
.antwortfeld em { font-style: normal; font-size: .88rem; color: var(--tinte-weich); }
.tel-gross {
  white-space: nowrap;
  font-size: clamp(1.35rem, 2.9vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
  text-decoration: none;
  border-bottom: 2px solid var(--kuli);
  padding-bottom: .35rem;
  justify-self: start;
  transition: border-color var(--takt-schnell) ease;
}
.tel-gross:hover { border-color: var(--tinte); }
.tel-hinweis { font-size: .92rem; color: var(--tinte-weich); max-width: 40ch; }
.kontakt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.kontakt-liste li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  overflow-wrap: anywhere;
  gap: 1rem;
  border-top: 1px solid var(--raster);
  padding: .85rem 0;
  font-size: .95rem;
  color: var(--tinte-weich);
}
.kontakt-liste li:last-child { border-bottom: 1px solid var(--raster); }
.kontakt-liste span {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte);
  padding-top: .28rem;
}
.kontakt-liste a {
  color: var(--tinte);
  text-decoration: underline;
  text-decoration-color: var(--kuli);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--takt-schnell) ease;
}
.kontakt-liste a:hover { text-decoration-color: var(--tinte); }

.formular {
  border: 0;
  background: var(--sf-white);
  border-radius: var(--rund-lg);
  box-shadow: 0 1px 0 var(--raster-fein), 0 16px 40px rgba(21, 50, 54, .06);
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
  display: grid;
  gap: 1rem;
  align-content: start;
}
.formular-kopf {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte);
  margin-bottom: .2rem;
}
.feld { display: grid; gap: .35rem; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.formular label {
  font-size: .82rem;
  font-weight: 500;
  color: var(--tinte-weich);
}
.formular input[type="text"],
.formular input[type="email"],
.formular input[type="tel"],
.formular input[type="number"],
.formular textarea {
  width: 100%;
  background: var(--papier);
  border: 1px solid var(--raster);
  border-radius: var(--rund-sm);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 1rem;
  padding: .6rem .75rem;
  transition: border-color var(--takt-schnell) ease, box-shadow var(--takt-schnell) ease;
}
.formular textarea { resize: vertical; }
.formular input:focus, .formular textarea:focus {
  border-color: var(--tinte);
  box-shadow: 0 0 0 4px var(--kuli-schein);
}
.feld-haken { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; margin-top: .3rem; }
.feld-haken input { width: 18px; height: 18px; accent-color: var(--kuli); margin-top: .15rem; }
.feld-haken label { font-size: .84rem; line-height: 1.5; }
.feld-haken a {
  color: var(--tinte);
  text-decoration: underline;
  text-decoration-color: var(--kuli);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.formular .btn { margin-top: .35rem; }
.formular-fussnote { font-size: .85rem; font-weight: 500; color: var(--tinte); }
.formular-fussnote:empty { display: none; }

/* =========================================================================
   FUSSZEILE
   ========================================================================= */
.site-footer {
  background: var(--papier);
  border-top: 1px solid var(--raster);
  padding: clamp(2.5rem, 5vw, 4rem) var(--rand) 2rem;
}
.footer-gitter, .footer-note {
  max-width: var(--max);
  margin: 0 auto;
}
.footer-gitter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
}
.footer-marke { display: flex; align-items: center; gap: .65rem; }
.footer-marke .brand-mark { height: 34px; }
.footer-brand { font-weight: 700; font-size: 1.5rem; letter-spacing: -.045em; }
.footer-claim { font-size: .92rem; color: var(--tinte-weich); margin-top: .55rem; max-width: 40ch; }
.site-footer address { font-style: normal; margin-top: 1rem; font-size: .92rem; color: var(--tinte-weich); line-height: 1.7; }
.site-footer address a { text-decoration: underline; text-decoration-color: var(--kuli); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.footer-heading {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte);
  margin-bottom: .7rem;
}
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .92rem; }
.site-footer nav a { text-decoration: none; color: var(--tinte-weich); transition: color var(--takt-schnell) ease; }
.site-footer nav a:hover { color: var(--tinte); }
.footer-note {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--raster);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: .78rem;
  color: var(--tinte-weich);
}
.footer-note p { max-width: 74ch; }
.copy { font-variant-numeric: tabular-nums; }

/* ---------- Mitlaufende Rufleiste ---------- */
.ruf-leiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: none;
  gap: .5rem;
  padding: .6rem;
  background: color-mix(in srgb, var(--sf-paper) 94%, transparent);
  border-top: 1px solid var(--raster);
  backdrop-filter: blur(10px);
  transform: translateY(110%);
  transition: transform .3s var(--kurve);
}
.ruf-leiste .btn { flex: 1; padding: .85rem .5rem; font-size: .9rem; }
.ruf-leiste.sichtbar { transform: translateY(0); }

/* =========================================================================
   RECHTSSEITEN
   ========================================================================= */
.legal {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--rand) 4rem;
}
.legal h1 { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 1.75rem; }
.legal h2 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.025em;
  margin: 2.5rem 0 .7rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--raster);
}
.legal h3 { margin: 1.6rem 0 .4rem; }
.legal p, .legal li { color: var(--tinte-weich); }
.legal p { margin: 0 0 .9rem; }
.legal ul { padding-left: 1.1rem; margin: 0 0 .9rem; }
.legal address { font-style: normal; margin-bottom: 1rem; }
/* Links tragen Ink und werden von der Koralle unterstrichen. Koralle als
   Schriftfarbe waere auf Papier nur 2.9:1. */
.legal a {
  color: var(--tinte);
  text-decoration: underline;
  text-decoration-color: var(--kuli);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.stand, .back {
  font-size: .82rem;
  text-transform: none;
  color: var(--tinte-weich);
}
.legal .back { display: inline-block; margin-bottom: 1.75rem; text-decoration: none; color: var(--tinte-weich); }
.legal .back:hover { color: var(--tinte); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--rand); }
.wrap.narrow { max-width: 46rem; }

/* =========================================================================
   ANPASSUNGEN
   ========================================================================= */
@media (max-width: 1180px) {
  .kino #akt-blatt .tisch { --blatt-h: min(62svh, 540px); }
  /* Auf schmalen Laptops und Tablets steht das Blatt in Ruhe weiter rechts,
     damit Überschrift, Fließtext und Knöpfe freie Bahn haben. Der Endpunkt
     der Bewegung (-50%, also mittig) bleibt unverändert. */
  .kino #akt-blatt .tisch {
    transform:
      translate(calc(-20% + (1 - var(--b-auftakt)) * 18%), -50%)
      scale(calc(.88 + var(--b-auftakt) * .12));
  }
  /* Die Unterzeile der Wortmarke bricht hier auf drei Zeilen und
     zieht die Kopfzeile auf. */
  .brand-sub { display: none; }
}

@media (max-width: 1010px) {
  /* Hier reicht die Kopfzeile nicht mehr für Marke, fünf Links, Nummer und
     Knopf; der Knopf würde rechts abgeschnitten. Die Nummer steht im Auftakt
     als eigener Knopf und ab 900 px in der festen Rufleiste. */
  .site-nav .nav-tel { display: none; }
  .kino #akt-blatt .notiz { width: min(18rem, 27%); font-size: .86rem; }
  .kino #akt-blatt .rede-b, .kino #akt-blatt .rede-c { width: min(34%, 22rem); }
}

@media (max-width: 900px) {
  :root { --spalte: 1fr; --kopf-h: 64px; }

  .brand-sub { display: none; }
  .brand-mark { height: 26px; }
  .brand-name { font-size: 1.22rem; }

  /* Nur die Hauptnavigation der Startseite klappt zusammen; die
     Rechtsseiten haben keinen Schalter und behalten ihren Knopf. */
  #hauptnavigation {
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--papier);
    border-bottom: 1px solid var(--raster);
    border-radius: 0 0 var(--rund-lg) var(--rund-lg);
    padding: .5rem var(--rand) 1.25rem;
    display: none;
  }
  #hauptnavigation.offen { display: flex; }
  .site-nav a { padding: .8rem 0; border-bottom: 1px solid var(--raster-fein); }
  .site-nav .btn { margin-top: .75rem; justify-content: center; border-bottom: 1px solid var(--kuli-flaeche); }
  .nav-toggle { display: block; }

  .abschnitt { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .spalte-marke { position: static; }
  .schritte li { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .schritt-nr { grid-row: auto; }
  .schritte h3, .schritte p:not(.schritt-nr) { grid-column: 1; }
  .tabellenliste > div { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .rechner-feld { grid-template-columns: minmax(0, 1fr); }
  .ergebnis { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .kontakt-gitter { grid-template-columns: minmax(0, 1fr); }
  .portraet-akt { grid-template-columns: minmax(0, 1fr); }
  .portraet-bild { max-width: 320px; }
  .footer-gitter { grid-template-columns: minmax(0, 1fr); }
  .reiter { display: none; }
  .ruf-leiste { display: flex; }
  .site-footer { padding-bottom: 5.5rem; }

  /* Akt 1+2 auf dem Telefon: Text oben, Blatt steigt von unten auf */
  .kino #akt-blatt .tisch {
    --blatt-h: min(42svh, 340px);
    left: 50%;
    top: calc(56% + (1 - var(--b-auftakt)) * 30%);
    transform: translate(-50%, -50%) scale(calc(.86 + var(--b-auftakt) * .3));
  }
  .kino #akt-blatt .rede-a {
    width: calc(100% - 2 * var(--rand));
    top: 4%;
    transform: translateY(calc(var(--b-auftakt) * -30px));
  }
  .kino #akt-blatt .rede-a h1 { font-size: clamp(1.65rem, 7vw, 2.35rem); }
  .kino #akt-blatt .rede-a .lead { font-size: .93rem; }
  .kino #akt-blatt .rede-a .belegleiste { display: none; }
  .kino #akt-blatt .rede-b, .kino #akt-blatt .rede-c {
    width: calc(100% - 2 * var(--rand));
    top: 3%;
  }
  .kino #akt-blatt .rede-b h2, .kino #akt-blatt .rede-c h2 { font-size: clamp(1.3rem, 5.4vw, 1.8rem); }
  .kino #akt-blatt .rede-b p, .kino #akt-blatt .rede-c p { font-size: .88rem; }
  .kino #akt-blatt .notiz {
    left: var(--rand);
    right: var(--rand);
    width: auto;
    top: auto;
    bottom: 11%;
    font-size: .84rem;
    transform: none;
  }
  /* Auf dem Telefon liegen alle Notizen im selben Fach, sie lösen sich ab */
  .kino #akt-blatt .notiz-1 { opacity: calc(var(--b-n1) - var(--b-n2)); }
  .kino #akt-blatt .notiz-2 { opacity: calc(var(--b-n2) - var(--b-n3)); }
  .kino #akt-blatt .notiz-3 { opacity: calc(var(--b-n3) - var(--b-n4)); }
  .kino #akt-blatt .notiz-4 { opacity: calc(var(--b-n4) - var(--b-notiz-weg)); }
  .kino #akt-blatt .notiz::after { display: none; }
  .kino #akt-blatt .stempel { width: min(240px, 78%); }

  .deckel-bahn { overflow: visible; margin-bottom: 1.2rem; }
  .deckel-fuellung { overflow: hidden; }
  .deckel-marke span { left: 0; top: calc(100% + .3rem); transform: translateX(-100%); }

  /* Der Laufzettel läuft auf dem Telefon ohne Pin, damit nichts abgeschnitten wird */
  .kino #leistungen .akt-spur { height: auto; }
  .kino #leistungen .akt-buehne { position: static; height: auto; overflow: visible; padding-top: 0; }
  .kino #leistungen .szene-zettel {
    position: static;
    inset: auto;
    display: grid;
    grid-template-rows: none;
    padding: clamp(3rem, 7vw, 5rem) var(--rand);
  }
  .kino #leistungen .zettel { height: auto; }
  .kino #leistungen .phase { position: static; inset: auto; overflow: visible; border-bottom: 1px solid var(--raster-fein); }
  .kino #leistungen .phase-1,
  .kino #leistungen .phase-2,
  .kino #leistungen .phase-3 { opacity: 1; }
  .kino #leistungen .phase.aus { visibility: visible; }
  .kino #leistungen .phase:last-child { border-bottom: 0; }

  /* Die Statuszeile würde auf dem Telefon auf dem Blatt liegen */
  .kino #akt-blatt .statuszeile { display: none; }
  .kino #akt-blatt .rede-b, .kino #akt-blatt .rede-c { top: 2%; }
}

@media (max-width: 480px) {
  /* "Digitalisierungszuschuss" ist breiter als die Spalte. Hier trennt der
     Browser nach deutschen Silbenregeln (html lang="de") statt zu überlaufen. */
  h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; }
}

@media (max-width: 620px) {
  .feld-paar { grid-template-columns: minmax(0, 1fr); }
  .akten { grid-template-columns: minmax(0, 1fr); }
  .knopfreihe .btn { width: 100%; }
  .kontakt-liste li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .deckel-marke span { font-size: .7rem; left: .3rem; }
}

/* Bewegung aus: keine Pins, alles im Ruhezustand sichtbar */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kino .akt-spur { height: auto; }
  .kino .akt-buehne { position: relative; height: auto; overflow: visible; padding-top: 0; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .site-header, .ruf-leiste, .notizen, .stempel { display: none; }
}

/* Die Rechtslinks trennt Abstand statt Mittelpunkt */
.footer-note .copy a + a, .copy a + a { margin-left: 1.15rem; }

/* Bot-Falle: fuer Menschen unsichtbar, Programme fuellen sie trotzdem aus */
.feld-firma { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }