/* acribic.css: beim Ausliefern erzeugt aus den acht Quellen durch baue-css.sh.
   NICHT von Hand bearbeiten. Zum Aendern die jeweilige Quelldatei bearbeiten. */

/* ================================ style.css ================================ */
/* ==========================================================================
   Acribic, Landingpage
   Schrift und Farbe unverändert übernommen. Struktur und Komponenten neu.
   ========================================================================== */

:root {
  --paper:       #FFFFFF;   /* Grund: neutral weiß, kein Beige mehr */
  --surface:     #F4F4F5;   /* abgesetzte Bänder: neutrales Hellgrau   */
  --buehne:      #FAFAFA;   /* Bühne der Produktansichten, kaum sichtbar */
  --ink:         #1A1A1A;
  --ink-2:       #55555A;
  --rule:        #E3E3E5;
  --rule-strong: #A0A0A6;
  --accent:      #1A3F64;
  --ok:          #15935A;   /* erledigt, als Fläche          */
  --ok-tief:     #0F7A4A;   /* erledigt, als Text 5,38 : 1   */
  --ok-flaeche:  #E3F3EB;   /* erledigt, als helle Fläche    */
  --tief:        #0F2740;   /* Marineblau, dunkel: grosse Felder   */
  --akzent-hell: #2B6BAC;   /* Marineblau, hell: Karte darin, 5,1:1 */
  --fehler:      #B3261E;   /* falsche Eingabe, Linie und Text, 6,5 : 1 */
  --invert-rule: rgba(255,255,255,0.24);
  --invert-ink2: rgba(255,255,255,0.74);
  --radius:      6px;       /* eine Rundung für alle Bauteile */

  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --fs-hero:  clamp(2.5rem, 1.72rem + 3.3vw, 4.25rem);    /*  40 → 68 */
  --fs-h2:    clamp(2.00rem, 1.50rem + 2.1vw, 3.25rem);   /*  32 → 52 */
  --fs-h3:    clamp(1.25rem, 1.14rem + 0.47vw, 1.50rem);  /*  20 → 24 */
  --fs-intro: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);/* 18 → 21 */
  --fs-body:  1.0625rem;   /* 17 */
  --fs-small: 0.9375rem;   /* 15 */
  --fs-mono:  0.8125rem;   /* 13 */
  --fs-zahl:  clamp(4rem, 2.6rem + 5.9vw, 7rem);          /*  64 → 112 */

  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px; --s6: 32px;  --s7: 48px;  --s8: 64px;
  --s9: 96px; --s10:128px; --s11:160px; --s12:192px;
  --tap: 44px;

  --w-page: 1440px;
  --w-lese: 660px;
  --w-kopf: 820px;
  --h-nav:  72px;
  --pad:    var(--s5);
}
@media (min-width: 768px)  { :root { --pad: var(--s7); } }
@media (min-width: 1280px) { :root { --pad: var(--s8); } }

/* Inter als Variable Font: eine Datei deckt 100 bis 900 ab, dadurch ein Request
   statt drei und 45 KB weniger als die drei Plex-Schnitte. */
@font-face{font-family:"Inter";src:url("fonts/Inter-Variable-Latin1.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2");font-weight:400;font-display:swap}

/* ── Grundlage ─────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 var(--fs-body)/1.62 var(--font-sans);
  hyphens:auto;text-wrap:pretty;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure,fieldset,legend,table{margin:0}
ol,ul{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

h1,h2,h3{hyphens:manual;text-wrap:balance}
h1{font-size:var(--fs-hero);font-weight:600;letter-spacing:-0.038em;line-height:1.0}
h2{font-size:var(--fs-h2);font-weight:600;letter-spacing:-0.025em;line-height:1.08}
h3{font-size:var(--fs-h3);font-weight:500;letter-spacing:-0.012em;line-height:1.28}
h4{font-size:var(--fs-body);font-weight:500;line-height:1.4}

.wrap{max-width:var(--w-page);margin-inline:auto;padding-inline:var(--pad)}

.eyebrow{
  font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:var(--s5);
}
.intro{font-size:var(--fs-intro);line-height:1.5;color:var(--ink-2)}
.klein{font-size:var(--fs-small);line-height:1.6;color:var(--ink-2)}
.ph{border-bottom:1px dashed var(--rule-strong);color:var(--ink-2)}

.skip{position:absolute;left:-9999px;background:var(--accent);color:var(--paper);padding:var(--s3) var(--s4);z-index:40}
.skip:focus{left:var(--s4);top:var(--s4)}

/* ── Navigation ────────────────────────────────────────────────────────── */

.nav{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--rule)}
.nav__in{
  max-width:var(--w-page);margin-inline:auto;padding-inline:var(--pad);
  height:var(--h-nav);display:flex;align-items:center;gap:var(--s7);
}
.nav__mark{font-size:1.3125rem;font-weight:600;letter-spacing:-0.025em;text-decoration:none}
/* Wie bei Uplane: Marke links, danach die Punkte, der Knopf allein rechts. */
.nav__links{display:flex;gap:var(--s6);margin-left:var(--s7)}
.nav__links a{
  font-size:var(--fs-small);color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
}
.nav__links a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.nav__ctas{display:flex;gap:var(--s3);margin-left:auto}
@media (max-width:1023px){.nav__links{display:none}.nav__ctas{margin-left:auto}}

/* ── Sicherheit ────────────────────────────────────────────────────────────
   Kein klebender Kopf mehr. Der Block laeuft ruhig durch: zentrierte
   Ueberschrift, darunter das Laufband der Nachweise, darunter drei Punkte
   nebeneinander, die beim Hereinscrollen einmal aufziehen.               */

.nachweise{margin-top:0}
/* Das Band steht jetzt oben unter der Vorstellung, nicht mehr im
   Sicherheitsblock. Deshalb traegt es seinen Abstand selbst. */
.nachweisband{padding-block:0 var(--s9)}
.nachweise__lead{color:var(--ink-2);font-size:var(--fs-small);
  margin-inline:auto;margin-top:var(--s7);text-align:center;text-wrap:nowrap}
@media (max-width:900px){.nachweise__lead{text-wrap:pretty;max-width:var(--w-lese)}}

/* Das Laufband nach dem Vorbild von IONOS Cloud: eine Spur, die den Satz
   zweimal traegt und um genau eine Satzlaenge wandert, deshalb schliesst die
   Schleife ohne Sprung. Bewusst Textzeichen statt fremder Logos. */
.laufband{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.laufband__spur{display:flex;align-items:center;width:max-content;list-style:none;margin:0;padding:var(--s2) 0}
/* Nur die Zeichen, keine Unterschriften, und farbig wie bei IONOS. */
.nachweis{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--s6)}
.nachweis img{display:block;width:auto;height:80px}
@media (prefers-reduced-motion: no-preference){
  .laufband__spur{animation:laufband 42s linear infinite}
}
@keyframes laufband{to{transform:translateX(-25%)}}

.sicher{display:grid;gap:var(--s7);grid-template-columns:1fr;margin-top:var(--s7);list-style:none;padding:0}
@media (min-width:900px){.sicher{grid-template-columns:repeat(3,1fr);column-gap:var(--s8)}}
.sicher>li{padding-top:var(--s2)}
.sicher h3{font-size:var(--fs-intro);font-weight:500;letter-spacing:-0.015em;line-height:1.3;
  margin-bottom:var(--s3);min-height:calc(2 * 1.3em);display:flex;align-items:flex-end}
.sicher p{color:var(--ink-2);font-size:var(--fs-small);line-height:1.6}

/* Einmaliges Aufziehen beim Hereinscrollen. Haengt an der Klasse takt, die
   script.js setzt: ohne Skript steht alles sofort sichtbar da. */
@media (prefers-reduced-motion: no-preference){
  .takt [data-zeigt]{opacity:0;transform:translateY(14px);
    transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
  .takt [data-zeigt].zeigt{opacity:1;transform:none}
  .takt .sicher>li:nth-child(2){transition-delay:.09s}
  .takt .sicher>li:nth-child(3){transition-delay:.18s}
}

/* ── Die Lage ─────────────────────────────────────────────────────────────
   Fassung C aus /werkstatt/lage/, gewaehlt am 09.09.2026. Zwei ungleiche
   Spalten, links die Zahl als Randnotiz, rechts die drei Punkte als Liste
   mit Trennlinien. Keine gefuellte Farbflaeche: Weiss, Haarlinien, Text.

   Die Entwurfsseite /werkstatt/lage/ traegt ihre eigene Kopie im Dokument
   und haengt bewusst nicht an diesen Regeln hier, damit die Entwuerfe nicht
   verschwinden, wenn diese Datei ueberschrieben wird.                      */
.lg{--lg-linie:var(--rule)}
.lg h2{font-size:clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);font-weight:600;
  letter-spacing:-0.03em;line-height:1.1}
.lg__kicker{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:0.1em;
  color:var(--ink-2)}
.lg h3{font-size:var(--fs-intro);font-weight:500;letter-spacing:-0.015em;line-height:1.3}
.lg p.lg__txt{color:var(--ink-2);font-size:var(--fs-small);line-height:1.6}

.lgc__raster{display:grid;grid-template-columns:1fr;gap:var(--s8)}
@media (min-width:900px){
  /* Ueberschrift und Zahl stehen auf der Mitte der Liste, nicht an ihrem
     oberen Rand: die Liste ist deutlich hoeher, oben buendig sah es aus,
     als haenge die linke Spalte. */
  .lgc__raster{grid-template-columns:0.85fr 1.15fr;gap:var(--s10);align-items:center}
}
.lgc h2{margin-bottom:var(--s6)}
.lgc__wert{display:block;font-size:clamp(3.5rem, 2.4rem + 4.4vw, 5.5rem);font-weight:500;
  letter-spacing:-0.05em;line-height:0.9;font-variant-numeric:tabular-nums}
.lgc__bu{display:block;margin-top:var(--s4);max-width:30ch;
  font-size:var(--fs-body);line-height:1.5;color:var(--ink-2)}
.lgc__liste{list-style:none;margin:0;padding:0}
.lgc__liste>li{padding-block:var(--s6);border-top:1px solid var(--lg-linie);
  display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:baseline}
.lgc__liste>li:first-child{border-top:0;padding-top:0}
.lgc__liste>li:last-child{padding-bottom:0}
.lgc__liste h3{margin-bottom:var(--s3)}

/* ── Warum Acribic ────────────────────────────────────────────────────────
   Nach dem Muster von Uplanes why-us: eine nummerierte Inventur dessen, was
   heute schiefgeht, jeweils mit dem, was an seine Stelle tritt, und daneben
   eine Ansicht, die genau das zeigt. Uplane laesst die Ansichten laufen, hier
   stehen sie still: es geht um den Beleg, nicht um die Bewegung.

   Die Ansichten benutzen bewusst nicht die .mock-Maschinerie des
   Plattformblocks. Die traegt Animationen und Zeitachsen mit sich, die hier
   niemand braucht. Gleich sind Buehne, weisse Karte, Schatten und die Regel,
   dass Mono nur Fundstellen und Marken traegt.                             */

.saetze{list-style:none;margin:0;padding:0}
.satz{border-top:1px solid var(--rule);padding-block:var(--s8)}
.satz:first-child{border-top:0;padding-top:0}

.satz__in{display:grid;grid-template-columns:1fr;gap:var(--s7)}
@media (min-width:960px){
  .satz__in{grid-template-columns:1fr 1fr;gap:var(--s9);align-items:center}
  /* Jede zweite Zeile gespiegelt, sonst laeuft die Seite in einer Spur. */
  .satz--gedreht .satz__text{order:2}
}

/* Die Ziffer traegt Inter, nicht Mono: sie ist hier ein Bauteil und keine
   Fundstelle. Gross und hell, damit sie ordnet, ohne zu rufen. */
.satz__nr{font-size:clamp(2.5rem, 1.9rem + 2.6vw, 4rem);font-weight:600;
  letter-spacing:-0.04em;line-height:1;color:var(--rule);
  font-variant-numeric:tabular-nums;margin-bottom:var(--s4)}
.satz__zitat{font-size:clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);font-weight:500;
  letter-spacing:-0.02em;line-height:1.25;margin-bottom:var(--s6);max-width:24ch}
.satz__paar{display:grid;gap:var(--s4)}
.satz__seite{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:baseline}
.satz__label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.satz__seite p{font-size:var(--fs-small);line-height:1.6;color:var(--ink-2)}
.satz__seite--neu{border-top:1px solid var(--rule);padding-top:var(--s4)}
.satz__seite--neu .satz__label{color:var(--accent)}
.satz__seite--neu p{color:var(--ink)}

/* ── Die Ansichten ─────────────────────────────────────────────────────── */
.wa-ansicht{background:var(--buehne);border:1px solid var(--rule);border-radius:20px;
  padding:var(--s6);display:grid;gap:var(--s4);align-content:center;min-height:260px;
  --schatten-b:0 1px 2px rgba(20,24,29,.04),0 10px 28px -14px rgba(20,24,29,.16)}
.wa-karte{background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  box-shadow:var(--schatten-b);overflow:hidden}
.wa-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule)}
.wa-tit{font-size:var(--fs-small);font-weight:500;letter-spacing:-0.01em}
.wa-chip{font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.wa-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
.wa-zeilen{list-style:none;margin:0;padding:0}
.wa-zeilen li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:9px var(--s4);border-top:1px solid var(--rule);font-size:13px;line-height:1.4}
.wa-zeilen li:first-child{border-top:0}
.wa-zeilen b{font-weight:400;color:var(--ink)}
.wa-q{font-family:var(--font-mono);font-size:10px;color:var(--ink-2);white-space:nowrap}
.wa-zeilen li.ist-neu{background:var(--surface)}
.wa-zeilen li.ist-neu b{font-weight:500}
.wa-zeilen li.ist-neu .wa-q{color:var(--accent)}
.wa-fuss{padding:var(--s3) var(--s4);border-top:1px solid var(--rule);
  font-size:12px;line-height:1.45;color:var(--ink-2)}

/* Zwei Karten nebeneinander, dazwischen der Uebergang. */
.wa-zwei{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s3);align-items:center}
.wa-pfeil{color:var(--rule-strong);font-size:18px;line-height:1}
.wa-zwei .wa-karte{min-width:0}

/* Ein Treffer aus der Wissensbasis: Kriterium oben, gefundene Antwort darunter. */
.wa-treffer{padding:var(--s4);border-top:1px solid var(--rule)}
.wa-treffer p{font-size:13px;line-height:1.5;color:var(--ink)}
.wa-marke{display:inline-block;margin-top:var(--s3);font-family:var(--font-mono);
  font-size:10px;letter-spacing:0.08em;color:var(--ink-2);
  border:1px solid var(--rule);border-radius:4px;padding:2px 7px}

/* Ein Urteil am Fuss der Karte. */
.wa-urteil{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);
  border-top:1px solid var(--rule);font-size:13px;font-weight:500;color:var(--ink)}
.wa-urteil::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--accent);flex:0 0 auto}

/* Drei Haken, fuer den Punkt zur Nachpruefbarkeit. */
.wa-haken{list-style:none;margin:0;padding:0}
.wa-haken li{display:flex;align-items:baseline;gap:var(--s3);padding:7px var(--s4);
  border-top:1px solid var(--rule);font-size:12px;color:var(--ink-2)}
.wa-haken li::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--rule-strong);flex:0 0 auto;transform:translateY(-2px)}

/* ── Arbeitsteilung ────────────────────────────────────────────────────── */

.tabelle{overflow-x:auto;max-width:1000px;margin-inline:auto}
.tabelle table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.tabelle th,.tabelle td{text-align:left;vertical-align:top;padding:var(--s4) var(--s5);border-bottom:1px solid var(--rule)}
.tabelle thead th{
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:0.08em;text-transform:uppercase;
  font-weight:400;color:var(--ink-2);border-bottom:1px solid var(--rule-strong);
}
.tabelle thead th:nth-of-type(2){color:var(--ink)}
.tabelle tbody th{font-weight:400;width:38%;color:var(--ink-2)}
/* Beim Überfliegen muss sichtbar sein, wo die Arbeit liegt:
   unsere Spalte trägt volle Textfarbe, die des Kunden bleibt zurückgenommen. */
.tabelle tbody td:nth-of-type(1){color:var(--ink);font-weight:500}
.tabelle tbody td:nth-of-type(2){color:var(--ink-2)}
.tabelle__note{max-width:var(--w-lese);margin:var(--s7) auto 0;text-align:center;color:var(--ink-2)}
@media (max-width:767px){
  .tabelle table,.tabelle thead,.tabelle tbody,.tabelle tr,.tabelle th,.tabelle td{display:block}
  .tabelle thead{position:absolute;left:-9999px}
  .tabelle tbody tr{border-bottom:1px solid var(--rule);padding:var(--s5) 0}
  .tabelle tbody th{width:auto;font-weight:500;color:var(--ink);padding:0 0 var(--s3);border:0}
  .tabelle tbody td{padding:0 0 var(--s2);border:0}
  .tabelle tbody td::before{content:attr(data-label) " ";font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:0.08em;color:var(--ink-2)}
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.faq{max-width:var(--w-kopf);margin-inline:auto;border-bottom:1px solid var(--rule)}
.faq details{border-top:1px solid var(--rule)}
.faq summary{font-size:var(--fs-body);font-weight:500;letter-spacing:-0.012em;padding:var(--s5) var(--s7) var(--s5) 0;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:"";position:absolute;right:var(--s2);top:calc(var(--s5) + 0.55em);width:9px;height:9px;border-right:1px solid var(--ink-2);border-bottom:1px solid var(--ink-2);transform:rotate(45deg)}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq__a{padding-bottom:var(--s6)}
.faq__a p{color:var(--ink-2);max-width:var(--w-lese)}

/* ── Kontakt: Bildband mit einer Zeile ─────────────────────────────────────
   Nach dem Vorbild von Uplane: ein Bild, ein Satz, ein Knopf. Das Gespraech
   selbst liegt auf einer eigenen Seite unter /gespraech/.               */

.band--bild{position:relative;overflow:hidden;isolation:isolate;color:var(--paper);
  /* 520 px wie bei Uplane gemessen, ueber die Mindesthoehe statt ueber Polster,
     damit die Zeile mittig steht und nicht nach oben wandert. */
  min-height:520px;display:flex;align-items:center;padding-block:var(--s9)}
.cta__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);z-index:-2}
.band--bild::after{content:"";position:absolute;inset:0;background:rgba(26,26,26,0.62);z-index:-1}
.cta__inhalt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s7)}
.cta__zeile{font-size:var(--fs-h2);font-weight:500;letter-spacing:-0.03em;line-height:1.05;
  max-width:18ch;text-wrap:balance}
.btn--hell{background:var(--paper);color:var(--ink)}
.btn--hell:hover{background:var(--ink);color:var(--paper)}
.btn--hell:focus-visible{outline-color:var(--paper)}

/* ── Gesprächsseite ────────────────────────────────────────────────────── */

.gespraech{padding-block:var(--s10) var(--s9);min-height:70vh}
.gespraech .wrap{display:flex;justify-content:center}

/* Ein Bildschirm, eine Frage, nach dem Vorbild von Uplane. Am Fensterrand der
   Fortschritt, in der Spalte die Marke, die Frage, der Hilfssatz, die Antworten. */
.gform{width:100%;max-width:620px}
.gform--breit{max-width:1000px}
@media (prefers-reduced-motion: no-preference){
  .gform{transition:max-width .45s cubic-bezier(.2,.7,.3,1)}
}
.gform__balken{position:fixed;inset:0 0 auto;z-index:6;
  height:4px;background:var(--rule);overflow:hidden}
.gform__balken i{display:block;height:100%;background:var(--accent);
  transform-origin:left;transform:scaleX(0)}
@media (prefers-reduced-motion: no-preference){
  .gform__balken i{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
}
/* Die Marke steht ueber den Fragen, sonst traegt die Seite kein Zeichen. */
.gform__marke{display:inline-flex;align-items:center;margin-bottom:var(--s6)}
.gform__marke img{height:20px;width:auto;display:block}

.gs{padding-top:var(--s9)}
.gs__frage{font-size:var(--fs-h2);font-weight:600;letter-spacing:-0.03em;
  line-height:1.05;margin-bottom:var(--s4)}
.gs__hilfe{color:var(--ink-2);font-size:var(--fs-small);line-height:1.6;margin-bottom:var(--s7)}

.gs__wahl{display:flex;flex-direction:column;gap:var(--s3)}
.wahl{display:flex;align-items:baseline;gap:var(--s4);width:100%;text-align:left;
  padding:var(--s4) var(--s5);border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--paper);cursor:pointer;font:inherit;color:var(--ink)}
.wahl__nr{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--ink-2);
  flex:0 0 auto;line-height:1.5}
.wahl__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.wahl__txt b{font-weight:500;line-height:1.4}
.wahl__txt span{font-size:var(--fs-small);color:var(--ink-2);line-height:1.5}
.wahl:hover{border-color:var(--ink)}
.wahl.ist-gewaehlt{border-color:var(--accent);background:var(--surface)}
@media (prefers-reduced-motion: no-preference){
  .wahl{transition:border-color .15s linear,background-color .15s linear}
}

.gs__felder{display:flex;flex-direction:column;gap:var(--s4)}
.gform__feld{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.gs__felder input{min-height:60px;padding:var(--s4) var(--s5)}

/* Beschriftung nur fuer Screenreader: sichtbar steht sie im Platzhalter. */
.nur-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.gform input,.gform textarea{
  font:400 var(--fs-body)/1.45 var(--font-sans);color:var(--ink);
  padding:var(--s3) var(--s4);min-height:var(--tap);
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);width:100%}
.gform textarea{min-height:0;resize:vertical}
.gform input::placeholder,.gform textarea::placeholder{color:var(--rule-strong)}
.gform input:hover,.gform textarea:hover{border-color:var(--rule-strong)}
.gform input:focus-visible,.gform textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
@media (prefers-reduced-motion: no-preference){
  .gform input,.gform textarea{transition:border-color .15s linear}
}
.gform input.ist-fehler{border-color:var(--fehler)}
.gform input.ist-fehler:focus-visible{outline-color:var(--fehler);border-color:var(--fehler)}
.gform__fehler{color:var(--fehler);font-size:var(--fs-small);line-height:1.5}
.gform__fehler[hidden]{display:none}

/* Zurueck unten links, Weiter unten rechts. Auf den Auswahlfragen bleibt die
   rechte Seite leer, dort geht es mit dem Klick auf eine Antwort weiter. */
.navi{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s5);margin-top:var(--s9);min-height:var(--tap)}
.navi__zurueck{display:inline-flex;align-items:center;gap:var(--s2);
  background:none;border:0;padding:0;cursor:pointer;
  font:400 var(--fs-small)/1.4 var(--font-sans);color:var(--ink-2)}
.navi__zurueck:hover{color:var(--ink)}
.navi__vor{display:inline-flex;align-items:center;gap:var(--s5);margin-left:auto}
.navi__vor .btn{width:auto;gap:var(--s2)}
.navi__enter{font-size:var(--fs-small);color:var(--ink-2)}
.navi__enter b{font-weight:500;color:var(--ink)}
.navi__zurueck[hidden],.navi__vor[hidden]{display:none}
@media (max-width:520px){.navi__enter{display:none}}
@media (prefers-reduced-motion: no-preference){
  .navi__zurueck{transition:color .15s linear}
}
.gs__abschluss{margin-top:var(--s5)}

.cal{border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);
  min-height:280px;display:flex;align-items:center;justify-content:center;padding:var(--s6)}
.cal__platz{text-align:center;max-width:380px}
.cal.is-geladen{display:block;padding:0;min-height:0;border:0}
.cal iframe{display:block;width:100%;height:640px;border:0;border-radius:var(--radius)}

/* ── Fuß ───────────────────────────────────────────────────────────────────
   Vier Spalten nach dem Vorbild von Uplane, aber ohne deren Trennlinien.
   Der Fuß steht wortgleich auf allen Seiten, alle Pfade sind absolut.     */

.fuss{border-top:1px solid var(--rule);padding-block:var(--s9) var(--s7);
  font-size:var(--fs-small);color:var(--ink-2)}
.fuss__raster{display:grid;gap:var(--s8);grid-template-columns:1fr}
@media (min-width:640px){.fuss__raster{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){
  .fuss__raster{grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:var(--s7)}
}
.fuss__marke img{display:block;height:22px;width:auto}
.fuss__marke p{margin-top:var(--s4);max-width:26ch;line-height:1.5}
.fuss__spalte{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.fuss__spalte h2,.fuss__spalte .fuss__titel{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;font-weight:400;color:var(--ink);margin-bottom:var(--s2)}
.fuss__spalte a{text-decoration:none;color:var(--ink-2);border-bottom:1px solid transparent;padding-bottom:1px}
.fuss__spalte a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.fuss__unten{margin-top:var(--s9);color:var(--ink-2)}
@media (prefers-reduced-motion: no-preference){
  .fuss__spalte a{transition:color .15s linear,border-color .15s linear}
}

/* ── Rechtsseiten ──────────────────────────────────────────────────────────
   Fliesstext-Spalte fuer Impressum, Datenschutz und AGB. Der Reset oben nimmt
   Absaetzen und Listen ihre Abstaende, hier bekommen sie sie zurueck. Gleiche
   Tokens wie die Startseite, keine eigenen Farben. */

.recht{padding-block:var(--s9) var(--s10)}
.recht__kopf{max-width:var(--w-kopf);margin-bottom:var(--s8)}
.recht__kopf h1{font-size:var(--fs-h2);margin-bottom:var(--s4)}
.recht__stand{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-2)}

.recht__text{max-width:var(--w-lese)}
.recht__text h2{font-size:var(--fs-h3);font-weight:600;margin-top:var(--s8);margin-bottom:var(--s3);
  padding-top:var(--s5);border-top:1px solid var(--rule)}
.recht__text h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.recht__text h3{font-size:var(--fs-body);font-weight:600;margin-top:var(--s5);margin-bottom:var(--s2)}
.recht__text p{margin-bottom:var(--s4);line-height:1.65}
.recht__text ul{margin:0 0 var(--s4);padding-left:var(--s5);list-style:disc}
.recht__text ul li{margin-bottom:var(--s2);line-height:1.6}
.recht__text dl{margin-bottom:var(--s4)}
.recht__text dt{font-weight:500;margin-top:var(--s3)}
.recht__text dd{color:var(--ink-2);line-height:1.6}
.recht__text a{text-decoration:underline;text-underline-offset:3px}
.recht__text a:hover{color:var(--accent)}
.recht__hinweis{margin-bottom:var(--s7);padding-left:var(--s4);border-left:2px solid var(--rule-strong)}

/* ── Wort-Bild-Marke ───────────────────────────────────────────────────────
   Original ist weiss auf transparent, fuer die hellen Flaechen liegt die
   dunkle Ableitung daneben (img/acribic-logo.png). Hoehe steuert die Groesse,
   die width/height-Attribute im HTML halten den Platz vor dem Laden frei. */
.nav__mark{display:inline-flex;align-items:center}
.nav__mark img{height:22px;width:auto;display:block}
.fuss__mark img{height:20px;width:auto;display:block}

/* ── Ablauf-Unterseiten ────────────────────────────────────────────────── */
.unterseite{max-width:var(--w-kopf);border-top:1px solid var(--rule)}
.unterseite .punkt{border-left:0;border-bottom:1px solid var(--rule);padding:var(--s6) 0;margin-top:0}
.unterseite .punkt::before{display:none}
.unterseite h2{font-size:var(--fs-h3);font-weight:500;letter-spacing:-0.012em;margin-bottom:var(--s2)}
.unterseite p{color:var(--ink-2);max-width:var(--w-lese);font-size:var(--fs-body)}
.unterseite + .klein{margin-top:var(--s7)}

@media (max-width:600px){.nav__ctas .btn--ghost{display:none}}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font:500 var(--fs-body)/1.2 var(--font-sans);
  padding:var(--s3) var(--s5);min-height:var(--tap);
  border-radius:var(--radius);text-decoration:none;cursor:pointer;white-space:nowrap;
  border:1px solid transparent;
}
.btn--sm{font-size:var(--fs-small);padding:var(--s2) var(--s4);min-height:40px}
.btn--pri{background:var(--accent);color:var(--paper)}
.btn--pri:hover{background:var(--ink)}
.btn--pri:focus-visible{outline-color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
@media (prefers-reduced-motion: no-preference){
  .btn,.nav__links a{transition:background-color .15s linear,color .15s linear,border-color .15s linear}
}
@media (max-width:520px){.btn{width:100%}}

/* ── Bänder ────────────────────────────────────────────────────────────── */

.band{padding-block:var(--s9)}
#fragen{padding-top:var(--s7)}
@media (min-width:768px){.band{padding-block:var(--s10)}}
#ablauf{padding-top:var(--s7);padding-bottom:var(--s8)}
#ablauf{padding-top:var(--s7)}
.band--dunkel{background:var(--accent);color:var(--paper)}
.band--dunkel .eyebrow,.band--dunkel .intro{color:var(--invert-ink2)}
.band--dunkel a{color:var(--paper)}
.band--dunkel :focus-visible{outline-color:var(--paper)}

.kopf{margin-bottom:var(--s8)}
.kopf--zentriert{max-width:var(--w-kopf);margin-inline:auto;text-align:center}
/* Eine Aussage, kein zweiter Titelkampf: eine Stufe unter h2. */
.kopf__klein{font-size:var(--fs-h3);font-weight:500;letter-spacing:-0.02em}
.kopf .intro{margin-top:var(--s6);font-size:var(--fs-body);line-height:1.6}
.kopf--zentriert .intro{max-width:var(--w-lese);margin-inline:auto}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero{padding-block:var(--s8) var(--s9)}
/* Der Hero soll den ersten Bildschirm fuellen, deshalb unten mehr Luft. */
@media (min-width:768px){.hero{padding-block:var(--s9)}}
.hero h1{margin-bottom:var(--s7)}
/* Breit genug, dass "Es gibt keinen 2. Platz" in eine Zeile passt, und
   schmal genug, dass rechts ein gutes Drittel frei bleibt. */
@media (min-width:1024px){.hero__txt{max-width:min(830px,63%)}}
.hero__sub{font-size:var(--fs-intro);line-height:1.5;color:var(--ink-2);max-width:var(--w-lese);margin-bottom:var(--s8)}
/* Die Fangbox im Hero, an Uplane vermessen: 1 px Rand, Radius 16, Polster
   5/5/5/14, links das Feld, rechts der Knopf. Der Radius weicht bewusst von
   --radius ab, die Pillenform ist der ganze Sinn dieser Bauform. */
.fang{display:inline-flex;align-items:center;gap:var(--s2);width:min(440px,100%);
  border:1px solid color-mix(in srgb, var(--ink) 26%, transparent);
  border-radius:11px;padding:5px 5px 5px 16px;background:transparent}
.fang input{flex:1 1 280px;min-width:0;border:0;background:transparent;
  font:400 var(--fs-small)/1.2 var(--font-sans);color:var(--ink);padding:8px 0;
  appearance:none;-webkit-appearance:none}
.fang input::placeholder{color:var(--ink-2)}
.fang input:focus{outline:none}
.fang:focus-within{border-color:var(--accent)}
.fang .btn{flex:0 0 auto}
@media (prefers-reduced-motion: no-preference){.fang{transition:border-color .18s linear}}
@media (max-width:520px){
  .fang{width:100%;flex-wrap:wrap;border-radius:12px;padding:var(--s3)}
  .fang input{flex:1 1 100%;padding:var(--s2) 0}
  .fang .btn{width:100%}
}
/* Auf 320 px passt "Termin wählen, 30 Minuten" mit den Innenabständen nicht mehr
   in eine Zeile neben den Seitenrand. Dort volle Breite statt Querscroll. */
@media (max-width:400px){
  .hero .btns{flex-direction:column;align-items:stretch}
  .hero .btns .btn{white-space:normal}
  /* "Ausschreibungen" ist bei 40 px breiter als die Textspalte auf 320 px.
     Trennung nach deutschen Regeln statt Querscroll, lang="de" steht im html. */
  .hero h1{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
}

/* ── Bildkarten ────────────────────────────────────────────────────────── */

.karten{display:grid;gap:var(--s4);grid-template-columns:1fr}
/* Ab Tablet eine Reihe aus Flex-Spalten, damit die angefasste Karte breiter
   werden kann und die anderen Platz machen, wie bei AutogenAI. Die Hoehe der
   Reihe steht fest, sonst wuerde die 3:4-Bildhoehe bei jeder Breitenaenderung
   mitwandern und die Reihe waehrend der Bewegung springen. */
@media (min-width:768px){
  .karten{display:flex;gap:var(--s5);align-items:stretch}
  .karte{flex:1 1 0;min-width:0;height:clamp(380px,34vw,540px)}
  .karte img{aspect-ratio:auto;height:100%}
}
.karte{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--ink);color:var(--paper)}
.karte img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1)}
.karte::after{content:"";position:absolute;inset:0;background:rgba(26,26,26,0.50);pointer-events:none}
.karte__txt{position:absolute;z-index:1;left:var(--s5);right:var(--s5);bottom:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.karte__tit{font-size:var(--fs-h3);font-weight:500;letter-spacing:-0.012em;line-height:1.25;
  /* Zwei Zeilen sind fest reserviert, der Text sitzt unten im Kasten. Nur so
     stehen die drei Titel auf jeder Breite auf einer Hoehe, und bei einem
     einzeiligen Titel klafft trotzdem keine Luecke zur Unterzeile. */
  min-height:calc(2 * 1.25em);display:flex;align-items:flex-end}
/* Auf schmalen Karten braucht der laengste Titel sonst eine dritte Zeile. */
@media (min-width:768px) and (max-width:1099px){.karte__tit{font-size:var(--fs-body)}}
.karte__mehr{font-size:var(--fs-small);line-height:1.5;color:var(--invert-ink2);
  max-height:0;opacity:0;overflow:hidden}
/* Auf einer Spalte gibt es kein Hover, dort steht der Text immer da. */
@media (max-width:767px){.karte__mehr{max-height:none;opacity:1;margin-top:var(--s3)}}
.karte__sub{font-size:var(--fs-small);line-height:1.45;color:var(--invert-ink2);
  /* Zwei Zeilen sind fest reserviert und mehr werden es nie. Nur dadurch stehen
     die drei Titel auf jeder Breite auf derselben Hoehe. */
  min-height:calc(2 * 1.45em);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* Hover nach dem Vorbild von AutogenAI: die angefasste Karte zieht auf, die
   beiden anderen geben Platz. Das Verhaeltnis ist dort rund 2,3 zu 1, hier
   1,6 zu 0,7, also 2,29 zu 1. */
@media (prefers-reduced-motion: no-preference) and (min-width:768px){
  .karte{transition:flex-grow .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s linear}
  .karten:hover .karte{flex-grow:0.7}
  .karten .karte:hover{flex-grow:1.6;box-shadow:0 24px 60px -26px rgba(20,24,29,.5)}
  /* Der Textblock haengt unten, deshalb waechst er beim Aufziehen nach oben. */
  .karte__mehr{transition:max-height .45s cubic-bezier(.2,.7,.3,1),opacity .3s linear,margin-top .45s}
  .karte:hover .karte__mehr{max-height:11em;opacity:1;margin-top:var(--s3)}
}

/* ── Zahlenband ────────────────────────────────────────────────────────── */

.zahlen{display:grid;gap:var(--s9);grid-template-columns:1fr;max-width:960px;margin-inline:auto}
@media (min-width:768px){.zahlen{grid-template-columns:repeat(2,1fr);gap:var(--s8)}}
.zahlen>li{display:flex;flex-direction:column;gap:var(--s3);border-top:1px solid var(--invert-rule);padding-top:var(--s5)}
.zahl{font-size:var(--fs-zahl);font-weight:600;letter-spacing:-0.045em;line-height:0.95;font-variant-numeric:tabular-nums}
.zahl__tit{font-size:var(--fs-intro);line-height:1.35}
.zahl__q{font-family:var(--font-mono);font-size:var(--fs-mono);line-height:1.55;color:var(--invert-ink2)}
.band__text{max-width:var(--w-lese);margin:var(--s9) auto 0;text-align:center}
.band__text p{color:var(--invert-ink2);margin-bottom:var(--s4)}
.band__text p:last-child{color:var(--paper);font-size:var(--fs-intro);margin-bottom:0}

/* ── Ablauf, nach Tendium-Muster ───────────────────────────────────────────
   Links scrollt die Spalte, aber Kopf und Karte kleben beide.
   Nur die Unterpunkte laufen dazwischen durch.                             */

/* Der naechste Abschnitt darf erst auftauchen, wenn der letzte Punkt dieses
   Abschnitts gelesen werden konnte. Dafuer braucht es unten mehr als eine
   Bildschirmhaelfte Luft. Die klebende Produktansicht fuellt sie. */
.flow__grp{padding-block:var(--s7) calc(var(--s12) + var(--s10));position:relative}
.flow__kopf h3{font-size:var(--fs-h2);font-weight:600;letter-spacing:-0.03em;line-height:1;margin-bottom:var(--s5)}
.flow__lead{font-size:var(--fs-body);line-height:1.55;color:var(--ink-2);margin-bottom:var(--s5)}
/* Zwischen den Punkten steht ein kurzes senkrechtes Stück, keine durchgehende
   Kante, so wie bei Tendium. Der Zwischenraum trägt die Linie, nicht der Block. */
/* Die Linie steht im leeren Zwischenraum UNTER dem Text, leicht eingerückt,
   und ist lang genug, dass immer nur ein Punkt im Blick ist. */
.punkt{position:relative;padding:0}
.punkt + .punkt{margin-top:var(--s12)}
.punkt + .punkt::before{
  content:"";position:absolute;left:var(--s5);top:calc(-1 * var(--s12) + var(--s5));
  width:1px;height:calc(var(--s12) - var(--s8));background:var(--rule);
}
.flow__punkte{position:relative;margin-top:var(--s10)}
.flow__punkte::before{
  content:"";position:absolute;left:var(--s5);top:calc(-1 * var(--s10) + var(--s4));
  width:1px;height:calc(var(--s10) - var(--s7));background:var(--rule);
}
.punkt h4{margin-bottom:var(--s2)}
.punkt p{color:var(--ink-2);font-size:var(--fs-small);line-height:1.6}

@media (min-width:1024px){
  .flow__grp{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);column-gap:var(--s9);align-items:start}
  .flow__kopf{
    position:sticky;top:var(--h-nav);z-index:2;
    margin-top:calc(-1 * var(--s7));padding-top:var(--s7);
    padding-bottom:var(--s10);
    background:linear-gradient(var(--paper) calc(100% - var(--s9)), color-mix(in srgb, var(--paper) 55%, transparent) calc(100% - var(--s5)), transparent);
    backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
    -webkit-mask-image:linear-gradient(#000 calc(100% - var(--s9)), rgba(0,0,0,.55) calc(100% - var(--s5)), transparent);
    mask-image:linear-gradient(#000 calc(100% - var(--s9)), rgba(0,0,0,.55) calc(100% - var(--s5)), transparent);
  }
  .flow__punkte{margin-top:var(--s9)}
  .flow__bild{position:sticky;top:calc(var(--h-nav) + var(--s7))}
}
@media (prefers-reduced-motion: reduce){.flow__kopf,.flow__bild{position:static}}
@media (max-width:1023px){.flow__bild{margin-top:var(--s7)}}

/* ── Die Produktansichten ─────────────────────────────────────────────────
   Aufbau nach Tendium: eine helle Bühne, darauf wenige große Elemente, die
   eine kurze Geschichte erzählen. Alles HTML und CSS, kein Bild, kein Video.
   Ein Takt von 12 s. Kein Element trägt eine Verzögerung: jeder Zustand steht
   in absoluten Prozenten desselben Takts, damit die Schleife an jeder Stelle
   sauber schließt und beim Neustart nichts mehr an falscher Stelle liegt.  */

.mock{position:relative;background:var(--buehne);border-radius:24px;overflow:hidden;
  aspect-ratio:5/4;max-width:750px;margin-left:auto;
  font-size:13px;line-height:1.35;color:var(--ink);
  --schatten:0 1px 2px rgba(20,24,29,.04),0 10px 28px -14px rgba(20,24,29,.14);
  --m-haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.7 9 10 3.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --m-kreuz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.mock b{font-weight:500}
.mock ul{list-style:none;margin:0;padding:0}
.mock p{margin:0}
.szene{position:absolute;inset:var(--rand);max-width:560px;margin-inline:auto;--rand:var(--s7);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s4)}

/* Sichten und Schreiben tragen weniger Inhalt als die anderen beiden und
   lassen die Bühne halb leer. Beide laufen deshalb eine Stufe größer.
   Die Breite wird so gedeckelt, dass die vergrößerte Szene in jeder
   Bühnengröße innerhalb der Ränder bleibt: sichtbare Breite ist max-width
   mal --z. Der Maßstab liegt auf "scale" und nicht auf "transform", sonst
   würde ihn die Einblend-Animation überschreiben. */
.mock--sichten .szene,.mock--schreiben .szene,.mock--pruefen .szene{--z:1.14;scale:var(--z)}
.mock--sichten .szene,.mock--pruefen .szene{max-width:min(570px,calc((100% - 2 * var(--rand)) / var(--z)))}

/* Kopfzeile: links ein Label in Mono, rechts ein Stand */
.cap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:24px}
.cap__l{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.cap__r{font-size:12px;color:var(--ink-2);justify-self:end}

/* Wechselnde Texte liegen übereinander, genau eine Fassung ist sichtbar */
.wechsel{display:inline-grid;justify-items:end}
.wechsel>*{grid-area:1/1;white-space:nowrap;opacity:0}
.wechsel>:last-child{opacity:1}
.sp__kopf .wechsel{justify-items:center}

.chip{font-size:11px;font-weight:500;color:var(--ink-2);background:var(--surface);border-radius:99px;padding:4px 10px;white-space:nowrap}
.chip--an{background:var(--accent);color:var(--paper)}
.chip--ok{background:var(--ok-flaeche);color:var(--ok-tief)}
.tag{font-size:11px;font-weight:500;padding:4px 9px;border-radius:99px;background:var(--surface);color:var(--ink-2);white-space:nowrap}
.tag--ok{background:var(--ok-flaeche);color:var(--ok-tief)}

/* Frage, Verarbeitung, Antwort mit Auswahl. Nach Tendium: die Frage erscheint,
   ein Lichtstreifen läuft durch, darunter wächst eine Linie, dann steht die
   Antwort und der Haken wählt sich selbst. Kein Rahmen, nur Flächen.        */
.dialog,.fund{display:flex;flex-direction:column;gap:8px}
.frage,.antw{position:relative;display:flex;align-items:center;gap:10px;background:var(--paper);
  border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.4;box-shadow:var(--schatten)}
.frage__ico{width:18px;height:18px;border-radius:5px;background:url("img/favicon.svg") center/cover no-repeat;flex:0 0 auto}
.antw{overflow:hidden}
.antw__txt{flex:1;color:var(--ink)}
.antw__btns{display:flex;gap:6px;flex:0 0 auto}
.antw__btns b,.antw__btns i{width:28px;height:24px;border-radius:6px;background:var(--surface);position:relative;display:block}
.antw__btns b::after,.antw__btns i::after{content:"";position:absolute;inset:0;background:var(--ink-2);
  -webkit-mask:var(--m-haken) center/12px 12px no-repeat;mask:var(--m-haken) center/12px 12px no-repeat}
.antw__btns i::after{-webkit-mask-image:var(--m-kreuz);mask-image:var(--m-kreuz)}
.antw::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(26,63,100,.10),transparent);transform:translateX(-100%)}
.antw::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left;opacity:0}

/* 01 Sichten: Liste neuer Verfahren, dann die Kurzfassung des ersten */
.vl{position:relative;display:flex;flex-direction:column;gap:12px}
.vl__r{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;height:64px;padding:0 14px;
  background:var(--paper);border-radius:10px;box-shadow:var(--schatten)}
.vl__ico{width:30px;height:30px;border-radius:8px;background:var(--surface);position:relative;flex:0 0 auto}
.vl__ico::before{content:"";position:absolute;left:8px;right:8px;top:9px;height:2px;border-radius:1px;background:var(--rule-strong);
  box-shadow:0 5px 0 var(--rule-strong),0 10px 0 var(--rule-strong)}
.vl__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.vl__txt b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vl__txt small{font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scan{position:absolute;left:-6px;right:-6px;top:-48px;height:48px;border-radius:8px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(26,63,100,.10) 60%,transparent);
  border-bottom:1px solid rgba(26,63,100,.35)}
.ms{background:var(--paper);border-radius:12px;padding:16px 18px;box-shadow:var(--schatten)}
.ms__kopf{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.ms__liste li{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:12.5px}
.ms__ok,.ms__hinweis{width:18px;height:18px;border-radius:50%;flex:0 0 auto;position:relative}
.ms__ok{background:var(--ok)}
.ms__ok::after{content:"";position:absolute;inset:0;background:var(--paper);
  -webkit-mask:var(--m-haken) center/10px 10px no-repeat;mask:var(--m-haken) center/10px 10px no-repeat}
.ms__hinweis{background:var(--accent)}
.ms__hinweis::after{content:"!";position:absolute;inset:0;display:grid;place-items:center;color:var(--paper);font:600 11px/1 var(--font-sans)}

/* 02 Planen: ein Board, das über den Rand der Bühne hinausläuft. Die Hand
   holt die Karte, hebt sie an, trägt sie in die nächste Spalte und legt sie
   in die vorgezeichnete Lücke. Zeiger und Karte sind ein Element, deshalb
   können sie nicht auseinanderlaufen.                                       */
.mock--planen .board{position:absolute;left:var(--s6);top:var(--s6);right:-56px;bottom:-40px;
  background:var(--paper);border-radius:12px;border:1px solid var(--rule);
  box-shadow:0 1px 2px rgba(20,24,29,.04),0 18px 44px -18px rgba(20,24,29,.16);
  display:grid;grid-template-columns:repeat(3,1fr)}
.mock--planen .board{--sp-pad:16px}
.spalte{padding:var(--sp-pad);min-width:0}
.spalte+.spalte{border-left:1px solid var(--rule)}
.sp__kopf{display:flex;align-items:center;justify-content:space-between;height:22px;margin-bottom:12px;font-size:12px;font-weight:500}
.sp__kopf em{font-style:normal;font-weight:500;font-size:11px;color:var(--ink-2);background:var(--surface);border-radius:6px;padding:2px 7px;min-width:24px;text-align:center}
.kk{position:relative;height:84px;background:var(--surface);border-radius:8px;padding:12px;margin-bottom:10px}
.kk b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kk span{display:block;font-size:11px;color:var(--ink-2);margin-top:3px;
  /* Eine Zeile. Bricht sie um, rutscht sie in den Fortschrittsbalken. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kk i{position:absolute;left:12px;right:12px;bottom:12px;height:3px;border-radius:2px;background:var(--rule)}
.kk i::after{content:"";display:block;height:100%;border-radius:2px;background:var(--ok);width:calc(var(--f)*100%);transform-origin:left}
.kk--ziel{background:transparent;border:1.5px dashed var(--rule-strong);opacity:0}
.kk--zieht{z-index:3}
.zeiger{position:absolute;left:58%;top:44%;width:16px;height:18px;opacity:0;
  background:url("img/zeiger.svg") no-repeat;background-size:16px 18px;transform-origin:5px 2px}

/* 03 Schreiben: Katalog links, die Antwort tippt sich rechts, mit Quelle */
.editor{display:grid;grid-template-columns:1fr 1.25fr;gap:12px;align-items:stretch}
.mock--schreiben .szene{--z:1.12;max-width:calc((100% - 2 * var(--rand)) / var(--z))}
.krit,.antwort{background:var(--paper);border-radius:12px;box-shadow:var(--schatten)}
/* .mock ul setzt padding:0 und ist spezifischer als eine einzelne Klasse.
   Deshalb stehen die Innenabstände der beiden Listenkarten auf .mock .krit
   und .mock .pl. Ohne das liegen Haken und Zahlen auf der Kartenkante. */
.mock .krit{padding:8px}
.krit li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;font-size:12.5px}
.krit li+li{margin-top:2px}
.krit__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.krit b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.krit small{font-size:11px;color:var(--ink-2);white-space:nowrap}
.krit i,.pl i{width:16px;height:16px;border-radius:50%;background:var(--rule);position:relative;flex:0 0 auto}
.krit i::after,.pl i::after{content:"";position:absolute;inset:0;background:var(--paper);opacity:0;
  -webkit-mask:var(--m-haken) center/9px 9px no-repeat;mask:var(--m-haken) center/9px 9px no-repeat}
.antwort{position:relative;padding:16px 18px;display:grid;min-height:250px}
.aw{grid-area:1/1;display:flex;flex-direction:column;gap:10px;opacity:0}
.aw:last-child{opacity:1}
.aw__kopf{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.aw p{font-size:12.5px;line-height:1.55}
.tz{display:block;width:max-content;max-width:100%;white-space:nowrap;overflow:hidden;border-right:1.5px solid transparent}
.aw__quelle{margin-top:auto;font-size:11px;color:var(--accent);display:flex;align-items:center;gap:8px}
.aw__quelle::before{content:"Quelle";font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}

/* 04 Prüfen: Prüfliste, ein Fund, der Vorschlag, die Freigabe */
.mock .pl{background:var(--paper);border-radius:12px;padding:4px 16px;box-shadow:var(--schatten)}
.pl li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--rule);font-size:12.5px}
.pl li:first-child{border-top:0}
.pl span{font-size:11.5px;color:var(--ink-2)}
.pl i{width:18px;height:18px}
.pl i::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--rule);border-top-color:var(--accent);opacity:0}
.pl .s3 i::before{content:"!";display:grid;place-items:center;color:transparent;font:600 11px/1 var(--font-sans)}
.pl .s3 .w1{color:var(--ink);font-weight:500}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.paar__s{display:flex;flex-direction:column;justify-content:space-between;gap:3px;background:var(--paper);border-radius:10px;padding:10px 14px;box-shadow:var(--schatten)}
.paar__s small{font-size:11px;color:var(--ink-2)}
.paar__s b{font-size:14px}
.paar__s:last-child b{color:var(--ok-tief)}

/* ══ Der Takt ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference){
  .mock *,.mock ::before,.mock ::after{animation-duration:12s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.4,0,.2,1)}

  /* Die Schleife steht still, bis die Karte im Blick ist. Sonst kommt man
     beim Scrollen mitten im Ablauf an und sieht das Ende statt des Anfangs.
     script.js setzt "takt" an das Wurzelelement und "an" an die Karte, die
     gerade zu sehen ist. Ohne Skript fehlt "takt" und alles läuft durch. */
  .takt .mock *,.takt .mock ::before,.takt .mock ::after{animation-play-state:paused}
  .takt .mock.an *,.takt .mock.an ::before,.takt .mock.an ::after{animation-play-state:running}
  .szene,.mock--planen .board{animation-name:buehne}
  @keyframes buehne{0%{opacity:0;transform:translateY(10px)}5%,94%{opacity:1;transform:none}100%{opacity:0;transform:none}}

  /* 01 Sichten */
  .sz-a{animation-name:si-a}
  @keyframes si-a{0%{opacity:0;transform:translateY(10px)}4%,37%{opacity:1;transform:none}41%,100%{opacity:0;transform:translateY(-10px)}}
  .sz-b{animation-name:si-b}
  @keyframes si-b{0%,42%{opacity:0;transform:translateY(14px)}46%,94%{opacity:1;transform:none}100%{opacity:0;transform:none}}
  .vl .r1{animation-name:si-r1}.vl .r2{animation-name:si-r2}.vl .r3{animation-name:si-r3}.vl .r4{animation-name:si-r4}
  @keyframes si-r1{0%,2.5%{opacity:0;transform:translateX(-18px)}8%,100%{opacity:1;transform:none}}
  @keyframes si-r2{0%,3.5%{opacity:0;transform:translateX(-18px)}9%,100%{opacity:1;transform:none}}
  @keyframes si-r3{0%,4.5%{opacity:0;transform:translateX(-18px)}10%,24.5%{opacity:1;transform:none}27%,100%{opacity:.5;transform:none}}
  @keyframes si-r4{0%,5.5%{opacity:0;transform:translateX(-18px)}11%,25.5%{opacity:1;transform:none}28%,100%{opacity:.5;transform:none}}
  .scan{animation-name:si-scan;animation-timing-function:linear}
  @keyframes si-scan{0%,11%{opacity:0;top:-48px}12.5%{opacity:1}21%{opacity:1;top:100%}22.5%,100%{opacity:0;top:100%}}
  .vl .tag{animation-timing-function:cubic-bezier(.2,.9,.3,1.25)}
  .r1 .tag{animation-name:si-t1}.r2 .tag{animation-name:si-t2}.r3 .tag{animation-name:si-t3}.r4 .tag{animation-name:si-t4}
  @keyframes si-t1{0%,21.5%{opacity:0;transform:scale(.7)}24%,100%{opacity:1;transform:none}}
  @keyframes si-t2{0%,22.5%{opacity:0;transform:scale(.7)}25%,100%{opacity:1;transform:none}}
  @keyframes si-t3{0%,23.5%{opacity:0;transform:scale(.7)}26%,100%{opacity:1;transform:none}}
  @keyframes si-t4{0%,24.5%{opacity:0;transform:scale(.7)}27%,100%{opacity:1;transform:none}}
  .mock--sichten .cap .w1{animation-name:si-c1}.mock--sichten .cap .w2{animation-name:si-c2}
  @keyframes si-c1{0%,26%{opacity:1}27.5%,100%{opacity:0}}
  @keyframes si-c2{0%,26.5%{opacity:0;transform:translateY(5px)}29.5%,100%{opacity:1;transform:none}}
  .ms__liste .m1{animation-name:si-m1}.ms__liste .m2{animation-name:si-m2}.ms__liste .m3{animation-name:si-m3}
  @keyframes si-m1{0%,47%{opacity:0;transform:translateX(-10px)}50%,100%{opacity:1;transform:none}}
  @keyframes si-m2{0%,49%{opacity:0;transform:translateX(-10px)}52%,100%{opacity:1;transform:none}}
  @keyframes si-m3{0%,51%{opacity:0;transform:translateX(-10px)}54%,100%{opacity:1;transform:none}}
  .mock--sichten .frage{animation-name:si-frage}
  @keyframes si-frage{0%,56%{opacity:0;transform:translateY(8px)}59%,100%{opacity:1;transform:none}}
  .mock--sichten .antw{animation-name:si-antw}
  @keyframes si-antw{0%,60%{opacity:0;transform:translateY(8px)}63%,100%{opacity:1;transform:none}}
  .mock--sichten .antw::before{animation-name:si-streifen;animation-timing-function:linear}
  @keyframes si-streifen{0%,63%{transform:translateX(-100%)}70%,100%{transform:translateX(100%)}}
  .mock--sichten .antw::after{animation-name:si-linie;animation-timing-function:linear}
  @keyframes si-linie{0%,63%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}72%,100%{transform:scaleX(1);opacity:0}}
  .mock--sichten .antw__btns b{animation-name:si-knopf}
  @keyframes si-knopf{0%,71.5%{background:var(--surface);transform:none}72.5%{transform:scale(.86)}74%,100%{background:var(--ok-flaeche);transform:none}}
  .mock--sichten .antw__btns b::after{animation-name:si-haken;animation-timing-function:steps(1)}
  @keyframes si-haken{0%,72.5%{background:var(--ink-2)}73%,100%{background:var(--ok-tief)}}
  .mock--sichten .antw__txt{animation-name:si-txt;animation-timing-function:steps(1)}
  @keyframes si-txt{0%,73%{color:var(--ink)}74%,100%{color:var(--ok-tief)}}

  /* 02 Planen */
  .kk i::after{animation-name:balken}
  @keyframes balken{0%,8%{transform:scaleX(0)}20%,100%{transform:scaleX(1)}}
  .kk--zieht i::after{animation-name:balken-spaet}
  @keyframes balken-spaet{0%,52%{transform:scaleX(0)}60%,100%{transform:scaleX(1)}}
  .kk--zieht{animation-name:pl-karte}
  @keyframes pl-karte{
    0%,27%{transform:none;background:var(--surface);box-shadow:none}
    30%{transform:scale(1.04) rotate(1.5deg);background:var(--paper);box-shadow:0 14px 30px -10px rgba(20,24,29,.3);
        animation-timing-function:cubic-bezier(.65,.05,.3,1)}
    46%{transform:translate(calc(100% + 2 * var(--sp-pad) + 1px),-94px) scale(1.04) rotate(1.5deg);background:var(--paper);box-shadow:0 14px 30px -10px rgba(20,24,29,.3)}
    49%,100%{transform:translate(calc(100% + 2 * var(--sp-pad) + 1px),-94px);background:var(--surface);box-shadow:none}}
  .zeiger{animation-name:pl-zeiger}
  @keyframes pl-zeiger{
    0%,16%{opacity:0;transform:translate(150px,120px)}
    20%{opacity:1}
    26%{opacity:1;transform:none}
    27.5%{transform:scale(.86)}
    29%,49.5%{opacity:1;transform:none}
    56%,100%{opacity:0;transform:translate(90px,80px)}}
  .kk--rueckt{animation-name:pl-rueckt;animation-timing-function:cubic-bezier(.5,0,.2,1)}
  @keyframes pl-rueckt{0%,47%{transform:none}50%,100%{transform:translateY(-94px)}}
  .kk--ziel{animation-name:pl-ziel}
  @keyframes pl-ziel{0%,30%{opacity:0}33%,47%{opacity:1}49%,100%{opacity:0}}
  .sp__kopf .w1{animation-name:pl-z1;animation-timing-function:steps(1)}
  @keyframes pl-z1{0%,48.5%{opacity:1}49%,100%{opacity:0}}
  .sp__kopf .w2{animation-name:pl-z2;animation-timing-function:cubic-bezier(.2,.9,.3,1.3)}
  @keyframes pl-z2{0%,48.5%{opacity:0;transform:scale(.6)}49%{opacity:1}51.5%,100%{opacity:1;transform:none}}

  /* 03 Schreiben: vier Kriterien in vier gleich langen Takten von 20,5 %.
     Sie beginnen bei 10 %, 30,5 %, 51 % und 71,5 %. In jedem Takt derselbe
     Ablauf: das Kriterium wird gewählt, die Antwort blendet auf, drei Zeilen
     tippen sich, die Quelle erscheint, Haken und Zähler ziehen nach. Danach
     steht das fertige Bild, bis die Bühne bei 94 % ausblendet. */
  .krit .k1{animation-name:sc-k1}.krit .k2{animation-name:sc-k2}.krit .k3{animation-name:sc-k3}.krit .k4{animation-name:sc-k4}
  @keyframes sc-k1{0%,2.5%{opacity:0;transform:translateX(-14px);background:transparent}7.5%{opacity:1;transform:none}
    10%{background:transparent}11%,29.5%{background:var(--surface)}30.5%,100%{background:transparent;opacity:1;transform:none}}
  @keyframes sc-k2{0%,3.5%{opacity:0;transform:translateX(-14px);background:transparent}8.5%{opacity:1;transform:none}
    30.5%{background:transparent}31.5%,50%{background:var(--surface)}51%,100%{background:transparent;opacity:1;transform:none}}
  @keyframes sc-k3{0%,4.5%{opacity:0;transform:translateX(-14px);background:transparent}9.5%{opacity:1;transform:none}
    51%{background:transparent}52%,70.5%{background:var(--surface)}71.5%,100%{background:transparent;opacity:1;transform:none}}
  @keyframes sc-k4{0%,5.5%{opacity:0;transform:translateX(-14px);background:transparent}10.5%{opacity:1;transform:none}
    71.5%{background:transparent}72.5%,100%{background:var(--surface);opacity:1;transform:none}}
  .krit i{animation-timing-function:steps(1)}
  .krit .k1 i{animation-name:sc-i1}.krit .k2 i{animation-name:sc-i2}.krit .k3 i{animation-name:sc-i3}.krit .k4 i{animation-name:sc-i4}
  @keyframes sc-i1{0%,26%{background:var(--rule)}26.5%,100%{background:var(--ok)}}
  @keyframes sc-i2{0%,46.5%{background:var(--rule)}47%,100%{background:var(--ok)}}
  @keyframes sc-i3{0%,67%{background:var(--rule)}67.5%,100%{background:var(--ok)}}
  @keyframes sc-i4{0%,87.5%{background:var(--rule)}88%,100%{background:var(--ok)}}
  .krit .k1 i::after{animation-name:sc-h1}.krit .k2 i::after{animation-name:sc-h2}
  .krit .k3 i::after{animation-name:sc-h3}.krit .k4 i::after{animation-name:sc-h4}
  @keyframes sc-h1{0%,26.5%{opacity:0;transform:scale(.5)}28%,100%{opacity:1;transform:none}}
  @keyframes sc-h2{0%,47%{opacity:0;transform:scale(.5)}48.5%,100%{opacity:1;transform:none}}
  @keyframes sc-h3{0%,67.5%{opacity:0;transform:scale(.5)}69%,100%{opacity:1;transform:none}}
  @keyframes sc-h4{0%,88%{opacity:0;transform:scale(.5)}89.5%,100%{opacity:1;transform:none}}
  .mock--schreiben .cap .wechsel>*{animation-timing-function:steps(1)}
  .mock--schreiben .cap .w1{animation-name:sc-c1}.mock--schreiben .cap .w2{animation-name:sc-c2}
  .mock--schreiben .cap .w3{animation-name:sc-c3}.mock--schreiben .cap .w4{animation-name:sc-c4}
  .mock--schreiben .cap .w5{animation-name:sc-c5}
  @keyframes sc-c1{0%,26.5%{opacity:1}27%,100%{opacity:0}}
  @keyframes sc-c2{0%,26.5%{opacity:0}27%,47%{opacity:1}47.5%,100%{opacity:0}}
  @keyframes sc-c3{0%,47%{opacity:0}47.5%,67.5%{opacity:1}68%,100%{opacity:0}}
  @keyframes sc-c4{0%,67.5%{opacity:0}68%,88%{opacity:1}88.5%,100%{opacity:0}}
  @keyframes sc-c5{0%,88%{opacity:0}88.5%,100%{opacity:1}}
  .aw--1{animation-name:sc-aw1}.aw--2{animation-name:sc-aw2}.aw--3{animation-name:sc-aw3}.aw--4{animation-name:sc-aw4}
  @keyframes sc-aw1{0%,11%{opacity:0;transform:translateY(6px)}12.5%,29.5%{opacity:1;transform:none}30.5%,100%{opacity:0;transform:none}}
  @keyframes sc-aw2{0%,31.5%{opacity:0;transform:translateY(6px)}33%,50%{opacity:1;transform:none}51%,100%{opacity:0;transform:none}}
  @keyframes sc-aw3{0%,52%{opacity:0;transform:translateY(6px)}53.5%,70.5%{opacity:1;transform:none}71.5%,100%{opacity:0;transform:none}}
  @keyframes sc-aw4{0%,72.5%{opacity:0;transform:translateY(6px)}74%,100%{opacity:1;transform:none}}
  .tz{animation-timing-function:steps(38,end)}
  .aw--1 .tz:nth-child(1){animation-name:sc-t1}.aw--1 .tz:nth-child(2){animation-name:sc-t2}.aw--1 .tz:nth-child(3){animation-name:sc-t3}
  .aw--2 .tz:nth-child(1){animation-name:sc-t4}.aw--2 .tz:nth-child(2){animation-name:sc-t5}.aw--2 .tz:nth-child(3){animation-name:sc-t6}
  .aw--3 .tz:nth-child(1){animation-name:sc-t7}.aw--3 .tz:nth-child(2){animation-name:sc-t8}.aw--3 .tz:nth-child(3){animation-name:sc-t9}
  .aw--4 .tz:nth-child(1){animation-name:sc-t10}.aw--4 .tz:nth-child(2){animation-name:sc-t11}.aw--4 .tz:nth-child(3){animation-name:sc-t12}
  @keyframes sc-t1{0%,12.5%{max-width:0;border-color:transparent}12.6%{max-width:0;border-color:var(--ink)}16.5%{max-width:100%;border-color:var(--ink)}17%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t2{0%,16.5%{max-width:0;border-color:transparent}16.6%{max-width:0;border-color:var(--ink)}20.5%{max-width:100%;border-color:var(--ink)}21%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t3{0%,20.5%{max-width:0;border-color:transparent}20.6%{max-width:0;border-color:var(--ink)}24.5%{max-width:100%;border-color:var(--ink)}25%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t4{0%,33%{max-width:0;border-color:transparent}33.1%{max-width:0;border-color:var(--ink)}37%{max-width:100%;border-color:var(--ink)}37.5%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t5{0%,37%{max-width:0;border-color:transparent}37.1%{max-width:0;border-color:var(--ink)}41%{max-width:100%;border-color:var(--ink)}41.5%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t6{0%,41%{max-width:0;border-color:transparent}41.1%{max-width:0;border-color:var(--ink)}45%{max-width:100%;border-color:var(--ink)}45.5%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t7{0%,53.5%{max-width:0;border-color:transparent}53.6%{max-width:0;border-color:var(--ink)}57.5%{max-width:100%;border-color:var(--ink)}58%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t8{0%,57.5%{max-width:0;border-color:transparent}57.6%{max-width:0;border-color:var(--ink)}61.5%{max-width:100%;border-color:var(--ink)}62%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t9{0%,61.5%{max-width:0;border-color:transparent}61.6%{max-width:0;border-color:var(--ink)}65.5%{max-width:100%;border-color:var(--ink)}66%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t10{0%,74%{max-width:0;border-color:transparent}74.1%{max-width:0;border-color:var(--ink)}78%{max-width:100%;border-color:var(--ink)}78.5%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t11{0%,78%{max-width:0;border-color:transparent}78.1%{max-width:0;border-color:var(--ink)}82%{max-width:100%;border-color:var(--ink)}82.5%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t12{0%,82%{max-width:0;border-color:transparent}82.1%{max-width:0;border-color:var(--ink)}86%{max-width:100%;border-color:var(--ink)}86.5%,100%{max-width:100%;border-color:transparent}}
  .aw--1 .aw__quelle{animation-name:sc-q1}.aw--2 .aw__quelle{animation-name:sc-q2}
  .aw--3 .aw__quelle{animation-name:sc-q3}.aw--4 .aw__quelle{animation-name:sc-q4}
  @keyframes sc-q1{0%,24.5%{opacity:0;transform:translateY(4px)}26.5%,100%{opacity:1;transform:none}}
  @keyframes sc-q2{0%,45%{opacity:0;transform:translateY(4px)}47%,100%{opacity:1;transform:none}}
  @keyframes sc-q3{0%,65.5%{opacity:0;transform:translateY(4px)}67.5%,100%{opacity:1;transform:none}}
  @keyframes sc-q4{0%,86%{opacity:0;transform:translateY(4px)}88%,100%{opacity:1;transform:none}}

  /* 04 Prüfen */
  .pl .s1{animation-name:pr-s1}.pl .s2{animation-name:pr-s2}.pl .s3{animation-name:pr-s3}.pl .s4{animation-name:pr-s4}
  @keyframes pr-s1{0%,2.5%{opacity:0;transform:translateX(-14px)}7.5%,100%{opacity:1;transform:none}}
  @keyframes pr-s2{0%,3.5%{opacity:0;transform:translateX(-14px)}8.5%,100%{opacity:1;transform:none}}
  @keyframes pr-s3{0%,4.5%{opacity:0;transform:translateX(-14px)}9.5%,100%{opacity:1;transform:none}}
  @keyframes pr-s4{0%,5.5%{opacity:0;transform:translateX(-14px)}10.5%,100%{opacity:1;transform:none}}
  .pl i{animation-timing-function:steps(1)}
  .pl i::before{animation-duration:.9s,12s;animation-iteration-count:infinite,infinite;animation-timing-function:linear,steps(1)}
  @keyframes drehen{to{transform:rotate(360deg)}}
  .pl .s1 i{animation-name:pr-i1}.pl .s2 i{animation-name:pr-i2}.pl .s3 i{animation-name:pr-i3}.pl .s4 i{animation-name:pr-i4}
  @keyframes pr-i1{0%,14%{background:var(--rule)}14.5%,100%{background:var(--ok)}}
  @keyframes pr-i2{0%,19%{background:var(--rule)}19.5%,100%{background:var(--ok)}}
  @keyframes pr-i3{0%,26.9%{background:var(--rule)}27%,64.5%{background:var(--accent)}65%,100%{background:var(--ok)}}
  @keyframes pr-i4{0%,29%{background:var(--rule)}29.5%,100%{background:var(--ok)}}
  .pl .s1 i::before{animation-name:drehen,pr-r1}.pl .s2 i::before{animation-name:drehen,pr-r2}
  .pl .s3 i::before{animation-name:drehen,pr-r3}.pl .s4 i::before{animation-name:drehen,pr-r4}
  @keyframes pr-r1{0%,10%{opacity:0}10.5%,14%{opacity:1}14.5%,100%{opacity:0}}
  @keyframes pr-r2{0%,15%{opacity:0}15.5%,19%{opacity:1}19.5%,100%{opacity:0}}
  /* Der dritte Punkt braucht länger, weil er etwas findet. Der Ring dreht
     im Tempo der anderen drei, verschwindet erst danach, und das Ausrufe-
     zeichen wächst an seiner Stelle auf, statt hart umzuspringen. */
  @keyframes pr-r3{0%,20%{opacity:0;border-color:var(--rule);border-top-color:var(--accent);color:transparent}
    20.5%,26.9%{opacity:1;border-color:var(--rule);border-top-color:var(--accent);color:transparent}
    27%,64.5%{opacity:1;border-color:transparent;color:var(--paper)}
    65%,100%{opacity:0;border-color:transparent;color:transparent}}
  @keyframes pr-r4{0%,25%{opacity:0}25.5%,29%{opacity:1}29.5%,100%{opacity:0}}
  .pl .s3 i::before{animation-name:pr-r3-still,pr-r3;animation-duration:12s,12s;animation-timing-function:linear,steps(1)}
  @keyframes pr-r3-still{0%,20.5%{transform:rotate(0) scale(1)}
    26.9%{transform:rotate(355deg) scale(1)}
    27%{transform:rotate(360deg) scale(.5);animation-timing-function:cubic-bezier(.2,.9,.3,1.3)}
    28.5%,100%{transform:rotate(360deg) scale(1)}}
  .pl .s1 i::after{animation-name:pr-h1}.pl .s2 i::after{animation-name:pr-h2}.pl .s3 i::after{animation-name:pr-h3}.pl .s4 i::after{animation-name:pr-h4}
  @keyframes pr-h1{0%,14.5%{opacity:0;transform:scale(.5)}16%,100%{opacity:1;transform:none}}
  @keyframes pr-h2{0%,19.5%{opacity:0;transform:scale(.5)}21%,100%{opacity:1;transform:none}}
  @keyframes pr-h3{0%,65%{opacity:0;transform:scale(.5)}66.5%,100%{opacity:1;transform:none}}
  @keyframes pr-h4{0%,29.5%{opacity:0;transform:scale(.5)}31%,100%{opacity:1;transform:none}}
  .pl .s1>span{animation-name:pr-sp1}.pl .s2>span{animation-name:pr-sp2}.pl .s4>span{animation-name:pr-sp4}
  @keyframes pr-sp1{0%,14.5%{opacity:0}17%,100%{opacity:1}}
  @keyframes pr-sp2{0%,19.5%{opacity:0}22%,100%{opacity:1}}
  @keyframes pr-sp4{0%,29.5%{opacity:0}32%,100%{opacity:1}}
  .pl .s3 .w1{animation-name:pr-w1}.pl .s3 .w2{animation-name:pr-w2}
  @keyframes pr-w1{0%,27%{opacity:0;transform:translateY(4px)}29.5%,64.5%{opacity:1;transform:none}65%,100%{opacity:0;transform:none}}
  @keyframes pr-w2{0%,65%{opacity:0;transform:translateY(4px)}67.5%,100%{opacity:1;transform:none}}
  .mock--pruefen .cap .w1{animation-name:pr-c1;animation-timing-function:steps(1)}
  .mock--pruefen .cap .w2{animation-name:pr-c2}
  @keyframes pr-c1{0%,71.5%{opacity:1}72%,100%{opacity:0}}
  @keyframes pr-c2{0%,71.5%{opacity:0;transform:scale(.85)}74%,100%{opacity:1;transform:none}}
  .mock--pruefen .frage{animation-name:pr-frage}
  @keyframes pr-frage{0%,32%{opacity:0;transform:translateY(8px)}35%,100%{opacity:1;transform:none}}
  .paar{animation-name:pr-paar}
  @keyframes pr-paar{0%,36%{opacity:0;transform:translateY(8px)}39%,100%{opacity:1;transform:none}}
  .mock--pruefen .antw{animation-name:pr-antw}
  @keyframes pr-antw{0%,40%{opacity:0;transform:translateY(8px)}43%,100%{opacity:1;transform:none}}
  .mock--pruefen .antw::before{animation-name:pr-streifen;animation-timing-function:linear}
  @keyframes pr-streifen{0%,43.5%{transform:translateX(-100%)}50.5%,100%{transform:translateX(100%)}}
  .mock--pruefen .antw::after{animation-name:pr-linie;animation-timing-function:linear}
  @keyframes pr-linie{0%,43.5%{transform:scaleX(0);opacity:1}50.5%{transform:scaleX(1);opacity:1}52.5%,100%{transform:scaleX(1);opacity:0}}
  .mock--pruefen .antw__btns b{animation-name:pr-knopf}
  @keyframes pr-knopf{0%,52%{background:var(--surface);transform:none}53%{transform:scale(.86)}54.5%,100%{background:var(--ok-flaeche);transform:none}}
  .mock--pruefen .antw__btns b::after{animation-name:pr-haken;animation-timing-function:steps(1)}
  @keyframes pr-haken{0%,53%{background:var(--ink-2)}53.5%,100%{background:var(--ok-tief)}}
  .mock--pruefen .antw__txt{animation-name:pr-txt;animation-timing-function:steps(1)}
  @keyframes pr-txt{0%,53.5%{color:var(--ink)}54.5%,100%{color:var(--ok-tief)}}
}

/* Ohne Bewegung steht jede Karte in ihrem Endbild */
@media (prefers-reduced-motion: reduce){
  .sz-a{display:none}
  .mock--sichten .antw__btns b,.mock--pruefen .antw__btns b{background:var(--ok-flaeche)}
  .mock--sichten .antw__btns b::after,.mock--pruefen .antw__btns b::after{background:var(--ok-tief)}
  .krit i,.pl i{background:var(--ok)}
  .krit i::after,.pl i::after{opacity:1}
  .pl .s3 .w1{display:none}
}

/* Enge Bühnen: die Regeln hängen an der Breite der Karte, nicht am Viewport.
   Unter 620 px stapelt sich der Editor, unter 520 px wird alles kompakter.   */
.flow__bild{container-type:inline-size}
/* Die Vergrößerung lohnt nur auf einer breiten Bühne. Darunter wird der
   Inhalt höher als die Bühne und läuft oben und unten heraus. */
@container (max-width:660px){
  .mock .szene{--z:1}
}
@container (max-width:620px){
  .editor{grid-template-columns:1fr}
  .antwort{min-height:0}
  .mock .krit{padding:6px}
  .krit li{padding:6px 8px}
  .aw p{font-size:12px}
}
@container (max-width:520px){
  .mock{aspect-ratio:4/5;font-size:12px}
  .szene{--rand:var(--s5);gap:var(--s3)}
  .cap__l{font-size:10px;letter-spacing:.08em}
  .cap__r{font-size:11px}
  .vl{gap:8px}
  .vl__r{height:auto;padding:8px 12px;gap:10px}
  .vl__txt b{font-size:12px;white-space:normal;line-height:1.3}
  .vl__ico{width:26px;height:26px}
  .vl__ico::before{left:7px;right:7px;top:8px;box-shadow:0 4px 0 var(--rule-strong),0 8px 0 var(--rule-strong)}
  .tag{font-size:10px;padding:3px 7px}
  .ms{padding:12px 14px}
  .frage,.antw{padding:10px 12px;font-size:12px}
  .antwort{padding:12px 14px}
  .mock .pl{padding:2px 12px}
  .pl li{padding:8px 0;font-size:12px}
  .paar__s{padding:8px 10px}
  .paar__s small{font-size:10px}
  .paar__s b{font-size:13px}
  .mock--planen .board{left:var(--s4);top:var(--s4);right:var(--s4);grid-template-columns:1fr 1fr;--sp-pad:12px}
  .board .spalte:last-child{display:none}
  .kk{padding:10px}
  .kk b{font-size:12px}
  .kk i{left:10px;right:10px;bottom:10px}
}

/* Auf sehr schmalen Bühnen brechen die Zeilen um und der Inhalt wird höher,
   als 4:5 hergibt. Dann wird die Bühne hochkant, sonst schneidet sie oben und
   unten ab. Die Werte sind an den Inhalten gemessen, nicht geschätzt. */
@container (max-width:360px){
  .mock{aspect-ratio:1/1.55}
}
@container (max-width:300px){
  .mock{aspect-ratio:1/2.05}
}

/* ── Werkstatt ─────────────────────────────────────────────────────────────
   Nur fuer werkstatt/, steht auf noindex und wird vor dem Live-Gang geloescht.
   Alle Bewegungen hier sind reines CSS in einem Takt, gleiche Bauart wie die
   Produktansichten im Plattform-Block.                                   */

.wk{padding-block:var(--s9) var(--s10)}
.wk__intro{max-width:var(--w-kopf);margin-bottom:var(--s10)}
.wk__intro h1{font-size:var(--fs-h2);font-weight:600;letter-spacing:-0.03em;margin-bottom:var(--s5)}
.wk__intro p{color:var(--ink-2);line-height:1.6;margin-bottom:var(--s4)}
.wk__kopf{border-top:1px solid var(--rule-strong);padding-top:var(--s5);margin-top:var(--s10)}
.wk__nr{font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--s2)}
.wk__titel{font-size:var(--fs-h3);font-weight:500;letter-spacing:-0.015em;margin-bottom:var(--s2)}
.wk__notiz{color:var(--ink-2);font-size:var(--fs-small);max-width:var(--w-lese);line-height:1.6}

.wk__probe{margin-top:var(--s7);border-radius:14px;padding:var(--s9) var(--s8);
  position:relative;overflow:hidden}
.wk__probe--hell{background:var(--paper);border:1px solid var(--rule)}
.wk__probe--dunkel{background:#101418;color:var(--paper);isolation:isolate}
.wk__gross{font-size:var(--fs-hero);font-weight:500;letter-spacing:-0.035em;
  line-height:1.03;margin-bottom:var(--s5)}
.wk__sub{font-size:var(--fs-body);line-height:1.55;max-width:46ch;margin-bottom:var(--s7);color:var(--ink-2)}
.wk__probe--dunkel .wk__sub{color:var(--invert-ink2)}
.wk__mitte{text-align:center;max-width:920px;margin-inline:auto;position:relative;z-index:1}
.wk__mitte .wk__sub{margin-inline:auto}
.wk__zwei{display:grid;gap:var(--s8);grid-template-columns:1fr;align-items:center}
@media (min-width:1024px){.wk__zwei{grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr)}}
.wk__zwei .wk__gross{font-size:var(--fs-h2)}

/* Die Fangbox auf dunklem Grund */
.fang--hell{border-color:rgba(255,255,255,0.5)}
.fang--hell input{color:var(--paper)}
.fang--hell input::placeholder{color:var(--invert-ink2)}
.fang--hell:focus-within{border-color:var(--paper)}

/* A · Rangliste: fuenf Raenge laufen ein, dann bleibt einer uebrig */
.rangliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rl__z{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:var(--s4);
  background:var(--surface);border-radius:8px;padding:14px var(--s4)}
.rl__z span{font-family:var(--font-mono);font-size:12px;color:var(--ink-2)}
.rl__z i{height:6px;border-radius:3px;background:var(--rule-strong)}
.rl__z em{font-style:normal;font-size:12px;font-weight:500;color:var(--ok-tief);
  background:var(--ok-flaeche);border-radius:99px;padding:3px 10px;opacity:0}
.rl__z--eins{background:var(--paper);box-shadow:0 1px 2px rgba(20,24,29,.05),0 14px 34px -18px rgba(20,24,29,.3)}
.rl__z--eins i{background:var(--accent)}
@media (prefers-reduced-motion: no-preference){
  .rangliste .rl__z{animation:rl-rein 6s cubic-bezier(.2,.7,.3,1) infinite}
  .rangliste .rl__z:nth-child(2){animation-name:rl-weg2}
  .rangliste .rl__z:nth-child(3){animation-name:rl-weg3}
  .rangliste .rl__z:nth-child(4){animation-name:rl-weg4}
  .rangliste .rl__z:nth-child(5){animation-name:rl-weg5}
  .rangliste .rl__z:nth-child(6){animation-name:rl-weg6}
  .rl__z--eins em{animation:rl-marke 6s cubic-bezier(.2,.9,.3,1.2) infinite}
}
@keyframes rl-rein{0%{opacity:0;transform:translateX(-14px)}8%,100%{opacity:1;transform:none}}
@keyframes rl-weg2{0%{opacity:0;transform:translateX(-14px)}10%,44%{opacity:1;transform:none}
  56%,100%{opacity:.16;transform:translateX(10px)}}
@keyframes rl-weg3{0%{opacity:0;transform:translateX(-14px)}12%,46%{opacity:1;transform:none}
  58%,100%{opacity:.16;transform:translateX(10px)}}
@keyframes rl-weg4{0%{opacity:0;transform:translateX(-14px)}14%,48%{opacity:1;transform:none}
  60%,100%{opacity:.16;transform:translateX(10px)}}
@keyframes rl-weg5{0%{opacity:0;transform:translateX(-14px)}16%,50%{opacity:1;transform:none}
  62%,100%{opacity:.16;transform:translateX(10px)}}
@keyframes rl-weg6{0%{opacity:0;transform:translateX(-14px)}18%,52%{opacity:1;transform:none}
  64%,100%{opacity:.16;transform:translateX(10px)}}
@keyframes rl-marke{0%,58%{opacity:0;transform:scale(.7)}66%,100%{opacity:1;transform:none}}

/* B · Die Bewertungsmatrix fuellt sich */
.matrix{position:absolute;inset:0;z-index:0;display:grid;overflow:hidden;
  grid-template-columns:repeat(auto-fill,minmax(26px,1fr));grid-auto-rows:26px;
  gap:5px;padding:var(--s5);opacity:.75;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 50%,#000 30%,transparent 78%);
  mask-image:radial-gradient(120% 100% at 50% 50%,#000 30%,transparent 78%)}
.matrix i{display:block;border-radius:3px;background:rgba(255,255,255,.05)}
@media (prefers-reduced-motion: no-preference){
  .matrix i{animation:mx 7s linear infinite}
  .matrix i:nth-child(3n){animation-delay:-1.4s}
  .matrix i:nth-child(3n+1){animation-delay:-3.1s}
  .matrix i:nth-child(5n){animation-delay:-5.2s}
}
@keyframes mx{0%,30%{background:rgba(255,255,255,.06)}
  40%,80%{background:color-mix(in srgb, var(--accent) calc(var(--v) * 26%), rgba(255,255,255,.06))}
  92%,100%{background:rgba(255,255,255,.06)}}

/* C · Der Fristenlauf */
.frist{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:stretch}
.frist__linie{position:relative;width:2px;background:var(--rule);border-radius:1px}
.frist__marke{position:absolute;left:-4px;width:10px;height:10px;border-radius:50%;
  background:var(--accent);top:0}
.frist__punkte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  justify-content:space-between;gap:var(--s5);min-height:230px}
.frist__punkte li{display:flex;flex-direction:column;gap:2px}
.frist__punkte b{font-size:var(--fs-small);font-weight:500}
.frist__punkte span{font-family:var(--font-mono);font-size:11px;color:var(--ink-2)}
@media (prefers-reduced-motion: no-preference){
  .frist__marke{animation:fr-marke 8s cubic-bezier(.5,0,.5,1) infinite}
  .frist__punkte li{animation:fr-hell 8s steps(1) infinite;opacity:.35}
  .frist__punkte li:nth-child(1){animation-name:fr-h1}
  .frist__punkte li:nth-child(2){animation-name:fr-h2}
  .frist__punkte li:nth-child(3){animation-name:fr-h3}
  .frist__punkte li:nth-child(4){animation-name:fr-h4}
}
@keyframes fr-marke{0%{top:0}92%,100%{top:calc(100% - 10px)}}
@keyframes fr-h1{0%,22%{opacity:1}23%,100%{opacity:.35}}
@keyframes fr-h2{0%,22%{opacity:.35}23%,52%{opacity:1}53%,100%{opacity:.35}}
@keyframes fr-h3{0%,52%{opacity:.35}53%,80%{opacity:1}81%,100%{opacity:.35}}
@keyframes fr-h4{0%,80%{opacity:.35}81%,100%{opacity:1}}

/* D · dunkel mit wanderndem Verlauf */
.wk__probe--verlauf::before{content:"";position:absolute;inset:-40%;z-index:0;
  background:radial-gradient(38% 44% at 30% 40%, rgba(26,63,100,.85), transparent 70%),
             radial-gradient(32% 38% at 72% 62%, rgba(21,147,90,.32), transparent 72%);
  filter:blur(10px)}
@media (prefers-reduced-motion: no-preference){
  .wk__probe--verlauf::before{animation:verlauf 26s ease-in-out infinite alternate}
}
@keyframes verlauf{0%{transform:translate3d(-4%,-3%,0) scale(1)}100%{transform:translate3d(5%,4%,0) scale(1.12)}}

/* E · Der Dokumentenstapel */
.stapel{position:relative;height:300px}
.st__b{position:absolute;left:0;right:0;top:0;background:var(--paper);border-radius:10px;
  border:1px solid var(--rule);padding:var(--s4) var(--s5);
  box-shadow:0 1px 2px rgba(20,24,29,.04),0 14px 34px -20px rgba(20,24,29,.3)}
.st__b b{display:block;font-size:var(--fs-small);font-weight:500;margin-bottom:10px}
.st__b i{display:block;height:5px;border-radius:3px;background:var(--surface);margin-bottom:6px}
.st__b i:nth-of-type(2){width:78%}
.st__b i:nth-of-type(3){width:52%}
.st__b em{position:absolute;right:var(--s5);top:var(--s4);font-style:normal;font-size:11px;
  font-weight:500;color:var(--ok-tief);background:var(--ok-flaeche);border-radius:99px;
  padding:3px 10px;opacity:0}
@media (prefers-reduced-motion: no-preference){
  .st__b{animation:st 9s cubic-bezier(.2,.7,.3,1) infinite}
  .st__b--1{animation-name:st1}.st__b--2{animation-name:st2}
  .st__b--3{animation-name:st3}.st__b--4{animation-name:st4}
  .st__b--4 em{animation:st-marke 9s cubic-bezier(.2,.9,.3,1.2) infinite}
}
@keyframes st1{0%,10%{transform:translateY(0) scale(.94);opacity:.5}
  26%,100%{transform:translateY(0) scale(.94);opacity:.5}}
@keyframes st2{0%,10%{transform:translateY(0) scale(.96);opacity:.65}
  26%,100%{transform:translateY(22px) scale(.96);opacity:.65}}
@keyframes st3{0%,10%{transform:translateY(0) scale(.98);opacity:.8}
  26%,100%{transform:translateY(44px) scale(.98);opacity:.8}}
@keyframes st4{0%,10%{transform:translateY(0)}
  26%,44%{transform:translateY(66px)}
  56%,100%{transform:translateY(150px) scale(1.02)}}
@keyframes st-marke{0%,58%{opacity:0;transform:scale(.7)}66%,100%{opacity:1;transform:none}}

/* Uplane-Bauform: feste Buehne links, Akkordeon rechts */
.hiw{display:grid;gap:var(--s8);grid-template-columns:1fr;align-items:start}
@media (max-width:1023px){.hiw__liste{order:1}.hiw__buehne{order:2}}
@media (min-width:1024px){.hiw{grid-template-columns:minmax(0,1fr) minmax(0,0.92fr);column-gap:var(--s8)}}
.hiw__buehne{position:relative}
.hiw__bild{container-type:inline-size}
.hiw__bild .mock{margin-left:0;max-width:none}
.hiw__liste h2{font-size:var(--fs-h2);font-weight:600;letter-spacing:-0.03em;
  line-height:1.06;margin:0 0 var(--s5);text-wrap:balance}
.hiw__lead{color:var(--ink-2);line-height:1.6;margin-bottom:var(--s7)}
.hiw__schritte{display:flex;flex-direction:column}
.hiw__schritt{display:block;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:0;position:relative;
  padding:var(--s2) 0 var(--s2) var(--s5);font:inherit;color:inherit}
/* Der graue Stab reicht von Polster zu Polster: bei geschlossenen Stufen ist
   er dadurch kurz, bei der offenen lang, und dazwischen bleiben Luecken. */
.hiw__schritt::after{content:"";position:absolute;left:0;top:var(--s2);bottom:var(--s2);
  width:3px;border-radius:99px;background:var(--rule)}
.hiw__zeile{display:flex;align-items:baseline;gap:var(--s4)}
.hiw__idx{display:none}
.hiw__idx{font-family:var(--font-mono);font-size:11px;color:var(--ink-2)}
.hiw__name{font-size:var(--fs-intro);font-weight:500;letter-spacing:-0.015em}
.hiw__schritt:not(.ist-offen) .hiw__name{color:var(--ink-2)}
.hiw__text{display:block;color:var(--ink-2);font-size:var(--fs-small);line-height:1.6;
  overflow:hidden;max-height:0;opacity:0}
.hiw__schritt.ist-offen .hiw__text{max-height:8em;opacity:1;margin-top:var(--s3)}
@media (prefers-reduced-motion: no-preference){
  .hiw__schritt,.hiw__text{transition:max-height .55s cubic-bezier(.33,0,.2,1),
    opacity .45s cubic-bezier(.33,0,.2,1),margin-top .55s cubic-bezier(.33,0,.2,1),color .35s linear}
}

/* ── Fokusmodus im Plattform-Block ─────────────────────────────────────────
   Haengt allein an der Klasse "fokus" am Wurzelelement, die script.js setzt.
   Ohne sie ist alles wie zuvor sichtbar, das ist der Rueckweg.
   Der Stand davor: .vorher/plattform-alle-punkte-sichtbar/                */

@media (min-width:1024px){
  .fokus .flow__punkte .punkt{opacity:.2}
  .fokus .flow__punkte .punkt.ist-da{opacity:1}
}
@media (min-width:1024px) and (prefers-reduced-motion: no-preference){
  .fokus .flow__punkte .punkt{transition:opacity .45s cubic-bezier(.2,.7,.3,1)}
}

/* ── Inhaltsseiten ─────────────────────────────────────────────────────────
   Gemeinsames Geruest fuer Leistungen, Warum Acribic, Ressourcen, Ueber uns,
   Presse, Playbook und Blog. Gleiche Sprache wie der Plattform-Block.     */

.ik{padding-block:var(--s10) var(--s8)}
.ik h1{font-size:var(--fs-hero);font-weight:600;letter-spacing:-0.035em;line-height:1.02;
  margin-block:var(--s4) var(--s6);max-width:18ch}
.ik__intro{font-size:var(--fs-intro);line-height:1.5;color:var(--ink-2);max-width:var(--w-lese)}
.ik-seite .band{padding-block:var(--s8)}
.ik-seite .band:last-of-type{padding-bottom:var(--s10)}

.wege{display:grid;gap:var(--s7);grid-template-columns:1fr}
@media (min-width:900px){.wege{grid-template-columns:1fr 1fr;column-gap:var(--s8)}}
.weg{border-top:1px solid var(--rule-strong);padding-top:var(--s5)}
.weg__nr{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--ink-2);margin-bottom:var(--s4)}
.weg h2{font-size:var(--fs-h3);font-weight:500;letter-spacing:-0.015em;margin-bottom:var(--s3)}
.weg__lead{color:var(--ink);line-height:1.55;margin-bottom:var(--s6)}
.weg__liste{margin:0}
.weg__liste dt{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s2)}
.weg__liste dd{margin:0 0 var(--s5);color:var(--ink-2);font-size:var(--fs-small);line-height:1.6}
.weg__liste dd:last-child{margin-bottom:0}

.gruende{display:grid;gap:var(--s7);grid-template-columns:1fr}
@media (min-width:900px){.gruende{grid-template-columns:1fr 1fr;column-gap:var(--s9);row-gap:var(--s8)}}
.grund{border-top:1px solid var(--rule);padding-top:var(--s5)}
.grund__nr{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--ink-2);margin-bottom:var(--s4)}
.grund h2{font-size:var(--fs-intro);font-weight:500;letter-spacing:-0.015em;margin-bottom:var(--s3)}
.grund p{color:var(--ink-2);font-size:var(--fs-small);line-height:1.6}

.grenze{max-width:var(--w-kopf);margin-inline:auto}
.grenze h2{font-size:var(--fs-h2);font-weight:600;letter-spacing:-0.03em;margin-bottom:var(--s5)}
.grenze p{color:var(--ink-2);line-height:1.65;margin-bottom:var(--s5)}
.grenze p:last-child{margin-bottom:0}

.res{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media (min-width:900px){.res{grid-template-columns:repeat(3,1fr)}}
.res__karte{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--rule);border-radius:12px;padding:var(--s6);background:var(--paper)}
.res__nr{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--s4)}
.res__karte h2{font-size:var(--fs-intro);font-weight:500;letter-spacing:-0.015em;margin-bottom:var(--s3)}
.res__karte p{color:var(--ink-2);font-size:var(--fs-small);line-height:1.6;margin-bottom:var(--s6)}
.res__mehr{margin-top:auto;font-size:var(--fs-small);color:var(--accent)}
.res__karte:hover{border-color:var(--ink)}
@media (prefers-reduced-motion: no-preference){
  .res__karte{transition:border-color .18s linear,transform .3s cubic-bezier(.2,.7,.3,1)}
  .res__karte:hover{transform:translateY(-3px)}
}

/* Die Tabelle in der FAQ muss kompakter sein als im eigenen Abschnitt,
   sonst sprengt sie das Aufklapp-Format. */
.faq .tabelle{max-width:100%}
.faq .tabelle table{font-size:var(--fs-mono)}
.faq .tabelle th,.faq .tabelle td{padding:var(--s2) var(--s3);line-height:1.4}
.faq .tabelle thead th{font-size:10px}
.faq .tabelle__note{margin-top:var(--s5);text-align:left;font-size:var(--fs-small)}

/* Hero-Knopf in der Groesse von Uplane: klein, kompakt, farbige Flaeche, kein
   Rahmen. Die Rundung bleibt bei --radius, weil eine Rundung fuer alles gilt. */
.btn--hero{font-size:var(--fs-small);font-weight:500;padding:11px 22px;min-height:0}

/* Der Zwei-Wege-Block hat zwei Karten statt drei, die Reihe darf flacher sein. */
@media (min-width:768px){
  .karten--zwei .karte{height:clamp(320px,26vw,420px)}
}
.karten__mehr{margin-top:var(--s7);text-align:center}

/* ── Ausgangslage ──────────────────────────────────────────────────────────
   Drei Situationen statt drei Kundentypen. Jede traegt links eine senkrechte
   Akzentkante, wie der offene Schritt bei Uplane, und zieht beim
   Hereinscrollen einmal auf.                                             */

/* Die drei Punkte als eine Tafel mit drei Feldern. Vorher standen sie frei
   untereinander, dadurch kam nach der Ueberschrift des Bandes gleich die
   naechste Reihe Ueberschriften. Als Tafel ist es ein Block statt drei. */
.pruefung{display:grid;grid-template-columns:1fr;list-style:none;margin:0;padding:0;
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.pruefung>li{padding:var(--s6);border-top:1px solid var(--rule)}
.pruefung>li:first-child{border-top:0}
@media (min-width:860px){
  .pruefung{grid-template-columns:repeat(3,1fr)}
  .pruefung>li{border-top:0;border-left:1px solid var(--rule)}
  .pruefung>li:first-child{border-left:0}
}
.pruefung h3{font-size:var(--fs-intro);font-weight:500;letter-spacing:-0.015em;
  line-height:1.3;margin-bottom:var(--s3)}
.pruefung p{color:var(--ink-2);font-size:var(--fs-small);line-height:1.6}

/* ── Die Lage ─────────────────────────────────────────────────────────────
   Nachgebaut nach dem Block von Scalera, die Masse dort nachgemessen und auf
   unsere Groesse heruntergerechnet:

     dunkles Feld   Rundung 24, Innenabstand 20      -> hier 20 / 20
     blaue Karte    Rundung 16, Innenabstand 57      -> hier 14 / 40
     Spaltenabstand 60                               -> hier 44
     Zahl           164 px, Gewicht 500              -> hier bis 120, 500
     Abstand Ueberschrift zum Feld 77                -> hier 48

   Es ist eine Karte mit drei Spalten, nicht drei Karten. Der grosse
   Spaltenabstand laesst sie wie drei aussehen, das ist im Original so.

   Dass der Block bei uns trotzdem knapper baut, liegt nicht an kleineren
   Bauteilen, sondern daran, dass bei Scalera ueber der Zahl eine hohe
   Bildflaeche liegt, die wir nicht haben.                                 */
.band--knapp{padding-block:var(--s4)}
.lage__titel{text-align:center;max-width:26ch;margin:0 auto var(--s7);text-wrap:balance;
  font-size:clamp(2rem, 1.5rem + 2.3vw, 3rem);line-height:1.05;letter-spacing:-0.03em}

.lage{background:var(--tief);color:var(--paper);border-radius:20px;padding:var(--s4)}
@media (min-width:820px){.lage{padding:var(--s5) var(--s5) var(--s4)}}

.lage__zahl{text-align:center;margin-bottom:var(--s6)}
.lage__wert{display:block;font-size:clamp(4rem, 2.6rem + 6vw, 7.5rem);font-weight:500;
  letter-spacing:-0.045em;line-height:0.95;font-variant-numeric:tabular-nums}
.lage__bu{display:block;max-width:48ch;margin:var(--s3) auto 0;
  font-size:var(--fs-intro);line-height:1.35;color:var(--paper)}

.lage__karte{display:grid;gap:var(--s6);grid-template-columns:1fr;list-style:none;margin:0;
  padding:var(--s6) var(--s5);background:var(--akzent-hell);color:var(--paper);border-radius:14px}
@media (min-width:900px){
  .lage__karte{grid-template-columns:repeat(3,1fr);column-gap:44px;padding:var(--s7) 40px}
}
.lage__karte h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-0.015em;
  line-height:1.25;margin-bottom:var(--s3)}
.lage__karte p{color:rgba(255,255,255,0.88);font-size:var(--fs-body);line-height:1.6}

/* ── Arbeitsteilung ────────────────────────────────────────────────────── */

.tabelle{overflow-x:auto;max-width:1000px;margin-inline:auto}
.tabelle table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.tabelle th,.tabelle td{text-align:left;vertical-align:top;padding:var(--s4) var(--s5);border-bottom:1px solid var(--rule)}
.tabelle thead th{
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:0.08em;text-transform:uppercase;
  font-weight:400;color:var(--ink-2);border-bottom:1px solid var(--rule-strong);
}
.tabelle thead th:nth-of-type(2){color:var(--ink)}
.tabelle tbody th{font-weight:400;width:38%;color:var(--ink-2)}
/* Beim Überfliegen muss sichtbar sein, wo die Arbeit liegt:
   unsere Spalte trägt volle Textfarbe, die des Kunden bleibt zurückgenommen. */
.tabelle tbody td:nth-of-type(1){color:var(--ink);font-weight:500}
.tabelle tbody td:nth-of-type(2){color:var(--ink-2)}
.tabelle__note{max-width:var(--w-lese);margin:var(--s7) auto 0;text-align:center;color:var(--ink-2)}
@media (max-width:767px){
  .tabelle table,.tabelle thead,.tabelle tbody,.tabelle tr,.tabelle th,.tabelle td{display:block}
  .tabelle thead{position:absolute;left:-9999px}
  .tabelle tbody tr{border-bottom:1px solid var(--rule);padding:var(--s5) 0}
  .tabelle tbody th{width:auto;font-weight:500;color:var(--ink);padding:0 0 var(--s3);border:0}
  .tabelle tbody td{padding:0 0 var(--s2);border:0}
  .tabelle tbody td::before{content:attr(data-label) " ";font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:0.08em;color:var(--ink-2)}
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.faq{max-width:var(--w-kopf);margin-inline:auto;border-bottom:1px solid var(--rule)}
.faq details{border-top:1px solid var(--rule)}
.faq summary{font-size:var(--fs-body);font-weight:500;letter-spacing:-0.012em;padding:var(--s5) var(--s7) var(--s5) 0;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:"";position:absolute;right:var(--s2);top:calc(var(--s5) + 0.55em);width:9px;height:9px;border-right:1px solid var(--ink-2);border-bottom:1px solid var(--ink-2);transform:rotate(45deg)}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq__a{padding-bottom:var(--s6)}
.faq__a p{color:var(--ink-2);max-width:var(--w-lese)}

/* ── Kontakt: Bildband mit einer Zeile ─────────────────────────────────────
   Nach dem Vorbild von Uplane: ein Bild, ein Satz, ein Knopf. Das Gespraech
   selbst liegt auf einer eigenen Seite unter /gespraech/.               */

.band--bild{position:relative;overflow:hidden;isolation:isolate;color:var(--paper);
  /* 520 px wie bei Uplane gemessen, ueber die Mindesthoehe statt ueber Polster,
     damit die Zeile mittig steht und nicht nach oben wandert. */
  min-height:520px;display:flex;align-items:center;padding-block:var(--s9)}
.cta__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);z-index:-2}
.band--bild::after{content:"";position:absolute;inset:0;background:rgba(26,26,26,0.62);z-index:-1}
.cta__inhalt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s7)}
.cta__zeile{font-size:var(--fs-h2);font-weight:500;letter-spacing:-0.03em;line-height:1.05;
  max-width:18ch;text-wrap:balance}
.btn--hell{background:var(--paper);color:var(--ink)}
.btn--hell:hover{background:var(--ink);color:var(--paper)}
.btn--hell:focus-visible{outline-color:var(--paper)}

/* ── Gesprächsseite ────────────────────────────────────────────────────── */

.gespraech{padding-block:var(--s10) var(--s9);min-height:70vh}
.gespraech .wrap{display:flex;justify-content:center}

/* Ein Bildschirm, eine Frage, nach dem Vorbild von Uplane. Am Fensterrand der
   Fortschritt, in der Spalte die Marke, die Frage, der Hilfssatz, die Antworten. */
.gform{width:100%;max-width:620px}
.gform--breit{max-width:1000px}
@media (prefers-reduced-motion: no-preference){
  .gform{transition:max-width .45s cubic-bezier(.2,.7,.3,1)}
}
.gform__balken{position:fixed;inset:0 0 auto;z-index:6;
  height:4px;background:var(--rule);overflow:hidden}
.gform__balken i{display:block;height:100%;background:var(--accent);
  transform-origin:left;transform:scaleX(0)}
@media (prefers-reduced-motion: no-preference){
  .gform__balken i{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
}
/* Die Marke steht ueber den Fragen, sonst traegt die Seite kein Zeichen. */
.gform__marke{display:inline-flex;align-items:center;margin-bottom:var(--s6)}
.gform__marke img{height:20px;width:auto;display:block}

.gs{padding-top:var(--s9)}
.gs__frage{font-size:var(--fs-h2);font-weight:600;letter-spacing:-0.03em;
  line-height:1.05;margin-bottom:var(--s4)}
.gs__hilfe{color:var(--ink-2);font-size:var(--fs-small);line-height:1.6;margin-bottom:var(--s7)}

.gs__wahl{display:flex;flex-direction:column;gap:var(--s3)}
.wahl{display:flex;align-items:baseline;gap:var(--s4);width:100%;text-align:left;
  padding:var(--s4) var(--s5);border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--paper);cursor:pointer;font:inherit;color:var(--ink)}
.wahl__nr{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--ink-2);
  flex:0 0 auto;line-height:1.5}
.wahl__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.wahl__txt b{font-weight:500;line-height:1.4}
.wahl__txt span{font-size:var(--fs-small);color:var(--ink-2);line-height:1.5}
.wahl:hover{border-color:var(--ink)}
.wahl.ist-gewaehlt{border-color:var(--accent);background:var(--surface)}
@media (prefers-reduced-motion: no-preference){
  .wahl{transition:border-color .15s linear,background-color .15s linear}
}

.gs__felder{display:flex;flex-direction:column;gap:var(--s4)}
.gform__feld{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.gs__felder input{min-height:60px;padding:var(--s4) var(--s5)}

/* Beschriftung nur fuer Screenreader: sichtbar steht sie im Platzhalter. */
.nur-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.gform input,.gform textarea{
  font:400 var(--fs-body)/1.45 var(--font-sans);color:var(--ink);
  padding:var(--s3) var(--s4);min-height:var(--tap);
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);width:100%}
.gform textarea{min-height:0;resize:vertical}
.gform input::placeholder,.gform textarea::placeholder{color:var(--rule-strong)}
.gform input:hover,.gform textarea:hover{border-color:var(--rule-strong)}
.gform input:focus-visible,.gform textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
@media (prefers-reduced-motion: no-preference){
  .gform input,.gform textarea{transition:border-color .15s linear}
}
.gform input.ist-fehler{border-color:var(--fehler)}
.gform input.ist-fehler:focus-visible{outline-color:var(--fehler);border-color:var(--fehler)}
.gform__fehler{color:var(--fehler);font-size:var(--fs-small);line-height:1.5}
.gform__fehler[hidden]{display:none}

/* Zurueck unten links, Weiter unten rechts. Auf den Auswahlfragen bleibt die
   rechte Seite leer, dort geht es mit dem Klick auf eine Antwort weiter. */
.navi{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s5);margin-top:var(--s9);min-height:var(--tap)}
.navi__zurueck{display:inline-flex;align-items:center;gap:var(--s2);
  background:none;border:0;padding:0;cursor:pointer;
  font:400 var(--fs-small)/1.4 var(--font-sans);color:var(--ink-2)}
.navi__zurueck:hover{color:var(--ink)}
.navi__vor{display:inline-flex;align-items:center;gap:var(--s5);margin-left:auto}
.navi__vor .btn{width:auto;gap:var(--s2)}
.navi__enter{font-size:var(--fs-small);color:var(--ink-2)}
.navi__enter b{font-weight:500;color:var(--ink)}
.navi__zurueck[hidden],.navi__vor[hidden]{display:none}
@media (max-width:520px){.navi__enter{display:none}}
@media (prefers-reduced-motion: no-preference){
  .navi__zurueck{transition:color .15s linear}
}
.gs__abschluss{margin-top:var(--s5)}

.cal{border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);
  min-height:280px;display:flex;align-items:center;justify-content:center;padding:var(--s6)}
.cal__platz{text-align:center;max-width:380px}
.cal.is-geladen{display:block;padding:0;min-height:0;border:0}
.cal iframe{display:block;width:100%;height:640px;border:0;border-radius:var(--radius)}

/* ── Fuß ───────────────────────────────────────────────────────────────────
   Vier Spalten nach dem Vorbild von Uplane, aber ohne deren Trennlinien.
   Der Fuß steht wortgleich auf allen Seiten, alle Pfade sind absolut.     */

.fuss{border-top:1px solid var(--rule);padding-block:var(--s9) var(--s7);
  font-size:var(--fs-small);color:var(--ink-2)}
.fuss__raster{display:grid;gap:var(--s8);grid-template-columns:1fr}
@media (min-width:640px){.fuss__raster{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){
  .fuss__raster{grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:var(--s7)}
}
.fuss__marke img{display:block;height:22px;width:auto}
.fuss__marke p{margin-top:var(--s4);max-width:26ch;line-height:1.5}
.fuss__spalte{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.fuss__spalte h2,.fuss__spalte .fuss__titel{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;font-weight:400;color:var(--ink);margin-bottom:var(--s2)}
.fuss__spalte a{text-decoration:none;color:var(--ink-2);border-bottom:1px solid transparent;padding-bottom:1px}
.fuss__spalte a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.fuss__unten{margin-top:var(--s9);color:var(--ink-2)}
@media (prefers-reduced-motion: no-preference){
  .fuss__spalte a{transition:color .15s linear,border-color .15s linear}
}

/* ── Rechtsseiten ──────────────────────────────────────────────────────────
   Fliesstext-Spalte fuer Impressum, Datenschutz und AGB. Der Reset oben nimmt
   Absaetzen und Listen ihre Abstaende, hier bekommen sie sie zurueck. Gleiche
   Tokens wie die Startseite, keine eigenen Farben. */

.recht{padding-block:var(--s9) var(--s10)}
.recht__kopf{max-width:var(--w-kopf);margin-bottom:var(--s8)}
.recht__kopf h1{font-size:var(--fs-h2);margin-bottom:var(--s4)}
.recht__stand{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-2)}

.recht__text{max-width:var(--w-lese)}
.recht__text h2{font-size:var(--fs-h3);font-weight:600;margin-top:var(--s8);margin-bottom:var(--s3);
  padding-top:var(--s5);border-top:1px solid var(--rule)}
.recht__text h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.recht__text h3{font-size:var(--fs-body);font-weight:600;margin-top:var(--s5);margin-bottom:var(--s2)}
.recht__text p{margin-bottom:var(--s4);line-height:1.65}
.recht__text ul{margin:0 0 var(--s4);padding-left:var(--s5);list-style:disc}
.recht__text ul li{margin-bottom:var(--s2);line-height:1.6}
.recht__text dl{margin-bottom:var(--s4)}
.recht__text dt{font-weight:500;margin-top:var(--s3)}
.recht__text dd{color:var(--ink-2);line-height:1.6}
.recht__text a{text-decoration:underline;text-underline-offset:3px}
.recht__text a:hover{color:var(--accent)}
.recht__hinweis{margin-bottom:var(--s7);padding-left:var(--s4);border-left:2px solid var(--rule-strong)}

/* ── Wort-Bild-Marke ───────────────────────────────────────────────────────
   Original ist weiss auf transparent, fuer die hellen Flaechen liegt die
   dunkle Ableitung daneben (img/acribic-logo.png). Hoehe steuert die Groesse,
   die width/height-Attribute im HTML halten den Platz vor dem Laden frei. */
.nav__mark{display:inline-flex;align-items:center}
.nav__mark img{height:22px;width:auto;display:block}
.fuss__mark img{height:20px;width:auto;display:block}

/* ── Ablauf-Unterseiten ────────────────────────────────────────────────── */
.unterseite{max-width:var(--w-kopf);border-top:1px solid var(--rule)}
.unterseite .punkt{border-left:0;border-bottom:1px solid var(--rule);padding:var(--s6) 0;margin-top:0}
.unterseite .punkt::before{display:none}
.unterseite h2{font-size:var(--fs-h3);font-weight:500;letter-spacing:-0.012em;margin-bottom:var(--s2)}
.unterseite p{color:var(--ink-2);max-width:var(--w-lese);font-size:var(--fs-body)}
.unterseite + .klein{margin-top:var(--s7)}

@media (max-width:600px){.nav__ctas .btn--ghost{display:none}}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font:500 var(--fs-body)/1.2 var(--font-sans);
  padding:var(--s3) var(--s5);min-height:var(--tap);
  border-radius:var(--radius);text-decoration:none;cursor:pointer;white-space:nowrap;
  border:1px solid transparent;
}
.btn--sm{font-size:var(--fs-small);padding:var(--s2) var(--s4);min-height:40px}
.btn--pri{background:var(--accent);color:var(--paper)}
.btn--pri:hover{background:var(--ink)}
.btn--pri:focus-visible{outline-color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
@media (prefers-reduced-motion: no-preference){
  .btn,.nav__links a{transition:background-color .15s linear,color .15s linear,border-color .15s linear}
}
@media (max-width:520px){.btn{width:100%}}

/* ── Bänder ────────────────────────────────────────────────────────────── */

.band{padding-block:var(--s9)}
#fragen{padding-top:var(--s7)}
@media (min-width:768px){.band{padding-block:var(--s10)}}

/* Die Arbeitsteilung schliesst direkt an die Lage an: dort steht der Engpass,
   hier steht, wer ihn traegt. Der volle Bandabstand reisst die beiden
   auseinander, oben deshalb die Haelfte. Steht bewusst hinter der
   Medienregel von .band, sonst gewinnt die ueber die Reihenfolge. */
.band--anschluss{padding-top:var(--s7)}
@media (min-width: 768px){.band--anschluss{padding-top:var(--s8)}}
#ablauf{padding-top:var(--s7);padding-bottom:var(--s8)}
#ablauf{padding-top:var(--s7)}
.band--dunkel{background:var(--accent);color:var(--paper)}
.band--dunkel .eyebrow,.band--dunkel .intro{color:var(--invert-ink2)}
.band--dunkel a{color:var(--paper)}
.band--dunkel :focus-visible{outline-color:var(--paper)}

.kopf{margin-bottom:var(--s8)}
.kopf--zentriert{max-width:var(--w-kopf);margin-inline:auto;text-align:center}
/* Eine Aussage, kein zweiter Titelkampf: eine Stufe unter h2. */
.kopf__klein{font-size:var(--fs-h3);font-weight:500;letter-spacing:-0.02em}
.kopf .intro{margin-top:var(--s6);font-size:var(--fs-body);line-height:1.6}
.kopf--zentriert .intro{max-width:var(--w-lese);margin-inline:auto}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero{padding-block:var(--s8) var(--s9)}
/* Der Hero soll den ersten Bildschirm fuellen, deshalb unten mehr Luft. */
@media (min-width:768px){.hero{padding-block:var(--s9)}}
.hero h1{margin-bottom:var(--s7)}
/* Breit genug, dass "Es gibt keinen 2. Platz" in eine Zeile passt, und
   schmal genug, dass rechts ein gutes Drittel frei bleibt. */
@media (min-width:1024px){.hero__txt{max-width:min(830px,63%)}}
.hero__sub{font-size:var(--fs-intro);line-height:1.5;color:var(--ink-2);max-width:var(--w-lese);margin-bottom:var(--s8)}
/* Die Fangbox im Hero, an Uplane vermessen: 1 px Rand, Radius 16, Polster
   5/5/5/14, links das Feld, rechts der Knopf. Der Radius weicht bewusst von
   --radius ab, die Pillenform ist der ganze Sinn dieser Bauform. */
.fang{display:inline-flex;align-items:center;gap:var(--s2);width:min(440px,100%);
  border:1px solid color-mix(in srgb, var(--ink) 26%, transparent);
  border-radius:11px;padding:5px 5px 5px 16px;background:transparent}
.fang input{flex:1 1 280px;min-width:0;border:0;background:transparent;
  font:400 var(--fs-small)/1.2 var(--font-sans);color:var(--ink);padding:8px 0;
  appearance:none;-webkit-appearance:none}
.fang input::placeholder{color:var(--ink-2)}
.fang input:focus{outline:none}
.fang:focus-within{border-color:var(--accent)}
.fang .btn{flex:0 0 auto}
@media (prefers-reduced-motion: no-preference){.fang{transition:border-color .18s linear}}
@media (max-width:520px){
  .fang{width:100%;flex-wrap:wrap;border-radius:12px;padding:var(--s3)}
  .fang input{flex:1 1 100%;padding:var(--s2) 0}
  .fang .btn{width:100%}
}
/* Auf 320 px passt "Termin wählen, 30 Minuten" mit den Innenabständen nicht mehr
   in eine Zeile neben den Seitenrand. Dort volle Breite statt Querscroll. */
@media (max-width:400px){
  .hero .btns{flex-direction:column;align-items:stretch}
  .hero .btns .btn{white-space:normal}
  /* "Ausschreibungen" ist bei 40 px breiter als die Textspalte auf 320 px.
     Trennung nach deutschen Regeln statt Querscroll, lang="de" steht im html. */
  .hero h1{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
}

/* ── Bildkarten ────────────────────────────────────────────────────────── */

.karten{display:grid;gap:var(--s4);grid-template-columns:1fr}
/* Ab Tablet eine Reihe aus Flex-Spalten, damit die angefasste Karte breiter
   werden kann und die anderen Platz machen, wie bei AutogenAI. Die Hoehe der
   Reihe steht fest, sonst wuerde die 3:4-Bildhoehe bei jeder Breitenaenderung
   mitwandern und die Reihe waehrend der Bewegung springen. */
@media (min-width:768px){
  .karten{display:flex;gap:var(--s5);align-items:stretch}
  .karte{flex:1 1 0;min-width:0;height:clamp(380px,34vw,540px)}
  .karte img{aspect-ratio:auto;height:100%}
}
.karte{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--ink);color:var(--paper)}
.karte img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1)}
.karte::after{content:"";position:absolute;inset:0;background:rgba(26,26,26,0.50);pointer-events:none}
.karte__txt{position:absolute;z-index:1;left:var(--s5);right:var(--s5);bottom:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.karte__tit{font-size:var(--fs-h3);font-weight:500;letter-spacing:-0.012em;line-height:1.25;
  /* Zwei Zeilen sind fest reserviert, der Text sitzt unten im Kasten. Nur so
     stehen die drei Titel auf jeder Breite auf einer Hoehe, und bei einem
     einzeiligen Titel klafft trotzdem keine Luecke zur Unterzeile. */
  min-height:calc(2 * 1.25em);display:flex;align-items:flex-end}
/* Auf schmalen Karten braucht der laengste Titel sonst eine dritte Zeile. */
@media (min-width:768px) and (max-width:1099px){.karte__tit{font-size:var(--fs-body)}}
.karte__mehr{font-size:var(--fs-small);line-height:1.5;color:var(--invert-ink2);
  max-height:0;opacity:0;overflow:hidden}
/* Auf einer Spalte gibt es kein Hover, dort steht der Text immer da. */
@media (max-width:767px){.karte__mehr{max-height:none;opacity:1;margin-top:var(--s3)}}
.karte__sub{font-size:var(--fs-small);line-height:1.45;color:var(--invert-ink2);
  /* Zwei Zeilen sind fest reserviert und mehr werden es nie. Nur dadurch stehen
     die drei Titel auf jeder Breite auf derselben Hoehe. */
  min-height:calc(2 * 1.45em);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* Hover nach dem Vorbild von AutogenAI: die angefasste Karte zieht auf, die
   beiden anderen geben Platz. Das Verhaeltnis ist dort rund 2,3 zu 1, hier
   1,6 zu 0,7, also 2,29 zu 1. */
@media (prefers-reduced-motion: no-preference) and (min-width:768px){
  .karte{transition:flex-grow .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s linear}
  .karten:hover .karte{flex-grow:0.7}
  .karten .karte:hover{flex-grow:1.6;box-shadow:0 24px 60px -26px rgba(20,24,29,.5)}
  /* Der Textblock haengt unten, deshalb waechst er beim Aufziehen nach oben. */
  .karte__mehr{transition:max-height .45s cubic-bezier(.2,.7,.3,1),opacity .3s linear,margin-top .45s}
  .karte:hover .karte__mehr{max-height:11em;opacity:1;margin-top:var(--s3)}
}

/* ── Zahlenband ────────────────────────────────────────────────────────── */

.zahlen{display:grid;gap:var(--s9);grid-template-columns:1fr;max-width:960px;margin-inline:auto}
@media (min-width:768px){.zahlen{grid-template-columns:repeat(2,1fr);gap:var(--s8)}}
.zahlen>li{display:flex;flex-direction:column;gap:var(--s3);border-top:1px solid var(--invert-rule);padding-top:var(--s5)}
.zahl{font-size:var(--fs-zahl);font-weight:600;letter-spacing:-0.045em;line-height:0.95;font-variant-numeric:tabular-nums}
.zahl__tit{font-size:var(--fs-intro);line-height:1.35}
.zahl__q{font-family:var(--font-mono);font-size:var(--fs-mono);line-height:1.55;color:var(--invert-ink2)}
.band__text{max-width:var(--w-lese);margin:var(--s9) auto 0;text-align:center}
.band__text p{color:var(--invert-ink2);margin-bottom:var(--s4)}
.band__text p:last-child{color:var(--paper);font-size:var(--fs-intro);margin-bottom:0}

/* ── Ablauf, nach Tendium-Muster ───────────────────────────────────────────
   Links scrollt die Spalte, aber Kopf und Karte kleben beide.
   Nur die Unterpunkte laufen dazwischen durch.                             */

/* Der naechste Abschnitt darf erst auftauchen, wenn der letzte Punkt dieses
   Abschnitts gelesen werden konnte. Dafuer braucht es unten mehr als eine
   Bildschirmhaelfte Luft. Die klebende Produktansicht fuellt sie. */
.flow__grp{padding-block:var(--s7) calc(var(--s12) + var(--s10));position:relative}
.flow__kopf h3{font-size:var(--fs-h2);font-weight:600;letter-spacing:-0.03em;line-height:1;margin-bottom:var(--s5)}
.flow__lead{font-size:var(--fs-body);line-height:1.55;color:var(--ink-2);margin-bottom:var(--s5)}
/* Zwischen den Punkten steht ein kurzes senkrechtes Stück, keine durchgehende
   Kante, so wie bei Tendium. Der Zwischenraum trägt die Linie, nicht der Block. */
/* Die Linie steht im leeren Zwischenraum UNTER dem Text, leicht eingerückt,
   und ist lang genug, dass immer nur ein Punkt im Blick ist. */
.punkt{position:relative;padding:0}
.punkt + .punkt{margin-top:var(--s12)}
.punkt + .punkt::before{
  content:"";position:absolute;left:var(--s5);top:calc(-1 * var(--s12) + var(--s5));
  width:1px;height:calc(var(--s12) - var(--s8));background:var(--rule);
}
.flow__punkte{position:relative;margin-top:var(--s10)}
.flow__punkte::before{
  content:"";position:absolute;left:var(--s5);top:calc(-1 * var(--s10) + var(--s4));
  width:1px;height:calc(var(--s10) - var(--s7));background:var(--rule);
}
.punkt h4{margin-bottom:var(--s2)}
.punkt p{color:var(--ink-2);font-size:var(--fs-small);line-height:1.6}

@media (min-width:1024px){
  .flow__grp{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);column-gap:var(--s9);align-items:start}
  .flow__kopf{
    position:sticky;top:var(--h-nav);z-index:2;
    margin-top:calc(-1 * var(--s7));padding-top:var(--s7);
    padding-bottom:var(--s10);
    background:linear-gradient(var(--paper) calc(100% - var(--s9)), color-mix(in srgb, var(--paper) 55%, transparent) calc(100% - var(--s5)), transparent);
    backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
    -webkit-mask-image:linear-gradient(#000 calc(100% - var(--s9)), rgba(0,0,0,.55) calc(100% - var(--s5)), transparent);
    mask-image:linear-gradient(#000 calc(100% - var(--s9)), rgba(0,0,0,.55) calc(100% - var(--s5)), transparent);
  }
  .flow__punkte{margin-top:var(--s9)}
  .flow__bild{position:sticky;top:calc(var(--h-nav) + var(--s7))}
}
@media (prefers-reduced-motion: reduce){.flow__kopf,.flow__bild{position:static}}
@media (max-width:1023px){.flow__bild{margin-top:var(--s7)}}

/* ── Die Produktansichten ─────────────────────────────────────────────────
   Aufbau nach Tendium: eine helle Bühne, darauf wenige große Elemente, die
   eine kurze Geschichte erzählen. Alles HTML und CSS, kein Bild, kein Video.
   Ein Takt von 12 s. Kein Element trägt eine Verzögerung: jeder Zustand steht
   in absoluten Prozenten desselben Takts, damit die Schleife an jeder Stelle
   sauber schließt und beim Neustart nichts mehr an falscher Stelle liegt.  */

.mock{position:relative;background:var(--buehne);border-radius:24px;overflow:hidden;
  aspect-ratio:5/4;max-width:750px;margin-left:auto;
  font-size:13px;line-height:1.35;color:var(--ink);
  --schatten:0 1px 2px rgba(20,24,29,.04),0 10px 28px -14px rgba(20,24,29,.14);
  --m-haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.7 9 10 3.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --m-kreuz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.mock b{font-weight:500}
.mock ul{list-style:none;margin:0;padding:0}
.mock p{margin:0}
.szene{position:absolute;inset:var(--rand);max-width:560px;margin-inline:auto;--rand:var(--s7);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s4)}

/* Sichten und Schreiben tragen weniger Inhalt als die anderen beiden und
   lassen die Bühne halb leer. Beide laufen deshalb eine Stufe größer.
   Die Breite wird so gedeckelt, dass die vergrößerte Szene in jeder
   Bühnengröße innerhalb der Ränder bleibt: sichtbare Breite ist max-width
   mal --z. Der Maßstab liegt auf "scale" und nicht auf "transform", sonst
   würde ihn die Einblend-Animation überschreiben. */
.mock--sichten .szene,.mock--schreiben .szene,.mock--pruefen .szene{--z:1.14;scale:var(--z)}
.mock--sichten .szene,.mock--pruefen .szene{max-width:min(570px,calc((100% - 2 * var(--rand)) / var(--z)))}

/* Kopfzeile: links ein Label in Mono, rechts ein Stand */
.cap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:24px}
.cap__l{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.cap__r{font-size:12px;color:var(--ink-2);justify-self:end}

/* Wechselnde Texte liegen übereinander, genau eine Fassung ist sichtbar */
.wechsel{display:inline-grid;justify-items:end}
.wechsel>*{grid-area:1/1;white-space:nowrap;opacity:0}
.wechsel>:last-child{opacity:1}
.sp__kopf .wechsel{justify-items:center}

.chip{font-size:11px;font-weight:500;color:var(--ink-2);background:var(--surface);border-radius:99px;padding:4px 10px;white-space:nowrap}
.chip--an{background:var(--accent);color:var(--paper)}
.chip--ok{background:var(--ok-flaeche);color:var(--ok-tief)}
.tag{font-size:11px;font-weight:500;padding:4px 9px;border-radius:99px;background:var(--surface);color:var(--ink-2);white-space:nowrap}
.tag--ok{background:var(--ok-flaeche);color:var(--ok-tief)}

/* Frage, Verarbeitung, Antwort mit Auswahl. Nach Tendium: die Frage erscheint,
   ein Lichtstreifen läuft durch, darunter wächst eine Linie, dann steht die
   Antwort und der Haken wählt sich selbst. Kein Rahmen, nur Flächen.        */
.dialog,.fund{display:flex;flex-direction:column;gap:8px}
.frage,.antw{position:relative;display:flex;align-items:center;gap:10px;background:var(--paper);
  border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.4;box-shadow:var(--schatten)}
.frage__ico{width:18px;height:18px;border-radius:5px;background:url("img/favicon.svg") center/cover no-repeat;flex:0 0 auto}
.antw{overflow:hidden}
.antw__txt{flex:1;color:var(--ink)}
.antw__btns{display:flex;gap:6px;flex:0 0 auto}
.antw__btns b,.antw__btns i{width:28px;height:24px;border-radius:6px;background:var(--surface);position:relative;display:block}
.antw__btns b::after,.antw__btns i::after{content:"";position:absolute;inset:0;background:var(--ink-2);
  -webkit-mask:var(--m-haken) center/12px 12px no-repeat;mask:var(--m-haken) center/12px 12px no-repeat}
.antw__btns i::after{-webkit-mask-image:var(--m-kreuz);mask-image:var(--m-kreuz)}
.antw::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(26,63,100,.10),transparent);transform:translateX(-100%)}
.antw::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left;opacity:0}

/* 01 Sichten: Liste neuer Verfahren, dann die Kurzfassung des ersten */
.vl{position:relative;display:flex;flex-direction:column;gap:12px}
.vl__r{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;height:64px;padding:0 14px;
  background:var(--paper);border-radius:10px;box-shadow:var(--schatten)}
.vl__ico{width:30px;height:30px;border-radius:8px;background:var(--surface);position:relative;flex:0 0 auto}
.vl__ico::before{content:"";position:absolute;left:8px;right:8px;top:9px;height:2px;border-radius:1px;background:var(--rule-strong);
  box-shadow:0 5px 0 var(--rule-strong),0 10px 0 var(--rule-strong)}
.vl__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.vl__txt b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vl__txt small{font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scan{position:absolute;left:-6px;right:-6px;top:-48px;height:48px;border-radius:8px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(26,63,100,.10) 60%,transparent);
  border-bottom:1px solid rgba(26,63,100,.35)}
.ms{background:var(--paper);border-radius:12px;padding:16px 18px;box-shadow:var(--schatten)}
.ms__kopf{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.ms__liste li{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:12.5px}
.ms__ok,.ms__hinweis{width:18px;height:18px;border-radius:50%;flex:0 0 auto;position:relative}
.ms__ok{background:var(--ok)}
.ms__ok::after{content:"";position:absolute;inset:0;background:var(--paper);
  -webkit-mask:var(--m-haken) center/10px 10px no-repeat;mask:var(--m-haken) center/10px 10px no-repeat}
.ms__hinweis{background:var(--accent)}
.ms__hinweis::after{content:"!";position:absolute;inset:0;display:grid;place-items:center;color:var(--paper);font:600 11px/1 var(--font-sans)}

/* 02 Planen: ein Board, das über den Rand der Bühne hinausläuft. Die Hand
   holt die Karte, hebt sie an, trägt sie in die nächste Spalte und legt sie
   in die vorgezeichnete Lücke. Zeiger und Karte sind ein Element, deshalb
   können sie nicht auseinanderlaufen.                                       */
.mock--planen .board{position:absolute;left:var(--s6);top:var(--s6);right:-56px;bottom:-40px;
  background:var(--paper);border-radius:12px;border:1px solid var(--rule);
  box-shadow:0 1px 2px rgba(20,24,29,.04),0 18px 44px -18px rgba(20,24,29,.16);
  display:grid;grid-template-columns:repeat(3,1fr)}
.mock--planen .board{--sp-pad:16px}
.spalte{padding:var(--sp-pad);min-width:0}
.spalte+.spalte{border-left:1px solid var(--rule)}
.sp__kopf{display:flex;align-items:center;justify-content:space-between;height:22px;margin-bottom:12px;font-size:12px;font-weight:500}
.sp__kopf em{font-style:normal;font-weight:500;font-size:11px;color:var(--ink-2);background:var(--surface);border-radius:6px;padding:2px 7px;min-width:24px;text-align:center}
.kk{position:relative;height:84px;background:var(--surface);border-radius:8px;padding:12px;margin-bottom:10px}
.kk b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kk span{display:block;font-size:11px;color:var(--ink-2);margin-top:3px;
  /* Eine Zeile. Bricht sie um, rutscht sie in den Fortschrittsbalken. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kk i{position:absolute;left:12px;right:12px;bottom:12px;height:3px;border-radius:2px;background:var(--rule)}
.kk i::after{content:"";display:block;height:100%;border-radius:2px;background:var(--ok);width:calc(var(--f)*100%);transform-origin:left}
.kk--ziel{background:transparent;border:1.5px dashed var(--rule-strong);opacity:0}
.kk--zieht{z-index:3}
.zeiger{position:absolute;left:58%;top:44%;width:16px;height:18px;opacity:0;
  background:url("img/zeiger.svg") no-repeat;background-size:16px 18px;transform-origin:5px 2px}

/* 03 Schreiben: Katalog links, die Antwort tippt sich rechts, mit Quelle */
.editor{display:grid;grid-template-columns:1fr 1.25fr;gap:12px;align-items:stretch}
.mock--schreiben .szene{--z:1.12;max-width:calc((100% - 2 * var(--rand)) / var(--z))}
.krit,.antwort{background:var(--paper);border-radius:12px;box-shadow:var(--schatten)}
/* .mock ul setzt padding:0 und ist spezifischer als eine einzelne Klasse.
   Deshalb stehen die Innenabstände der beiden Listenkarten auf .mock .krit
   und .mock .pl. Ohne das liegen Haken und Zahlen auf der Kartenkante. */
.mock .krit{padding:8px}
.krit li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;font-size:12.5px}
.krit li+li{margin-top:2px}
.krit__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.krit b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.krit small{font-size:11px;color:var(--ink-2);white-space:nowrap}
.krit i,.pl i{width:16px;height:16px;border-radius:50%;background:var(--rule);position:relative;flex:0 0 auto}
.krit i::after,.pl i::after{content:"";position:absolute;inset:0;background:var(--paper);opacity:0;
  -webkit-mask:var(--m-haken) center/9px 9px no-repeat;mask:var(--m-haken) center/9px 9px no-repeat}
.antwort{position:relative;padding:16px 18px;display:grid;min-height:250px}
.aw{grid-area:1/1;display:flex;flex-direction:column;gap:10px;opacity:0}
.aw:last-child{opacity:1}
.aw__kopf{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.aw p{font-size:12.5px;line-height:1.55}
.tz{display:block;width:max-content;max-width:100%;white-space:nowrap;overflow:hidden;border-right:1.5px solid transparent}
.aw__quelle{margin-top:auto;font-size:11px;color:var(--accent);display:flex;align-items:center;gap:8px}
.aw__quelle::before{content:"Quelle";font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}

/* 04 Prüfen: Prüfliste, ein Fund, der Vorschlag, die Freigabe */
.mock .pl{background:var(--paper);border-radius:12px;padding:4px 16px;box-shadow:var(--schatten)}
.pl li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--rule);font-size:12.5px}
.pl li:first-child{border-top:0}
.pl span{font-size:11.5px;color:var(--ink-2)}
.pl i{width:18px;height:18px}
.pl i::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--rule);border-top-color:var(--accent);opacity:0}
.pl .s3 i::before{content:"!";display:grid;place-items:center;color:transparent;font:600 11px/1 var(--font-sans)}
.pl .s3 .w1{color:var(--ink);font-weight:500}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.paar__s{display:flex;flex-direction:column;justify-content:space-between;gap:3px;background:var(--paper);border-radius:10px;padding:10px 14px;box-shadow:var(--schatten)}
.paar__s small{font-size:11px;color:var(--ink-2)}
.paar__s b{font-size:14px}
.paar__s:last-child b{color:var(--ok-tief)}

/* ══ Der Takt ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference){
  .mock *,.mock ::before,.mock ::after{animation-duration:12s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.4,0,.2,1)}

  /* Die Schleife steht still, bis die Karte im Blick ist. Sonst kommt man
     beim Scrollen mitten im Ablauf an und sieht das Ende statt des Anfangs.
     script.js setzt "takt" an das Wurzelelement und "an" an die Karte, die
     gerade zu sehen ist. Ohne Skript fehlt "takt" und alles läuft durch. */
  .takt .mock *,.takt .mock ::before,.takt .mock ::after{animation-play-state:paused}
  .takt .mock.an *,.takt .mock.an ::before,.takt .mock.an ::after{animation-play-state:running}
  .szene,.mock--planen .board{animation-name:buehne}
  @keyframes buehne{0%{opacity:0;transform:translateY(10px)}5%,94%{opacity:1;transform:none}100%{opacity:0;transform:none}}

  /* 01 Sichten */
  .sz-a{animation-name:si-a}
  @keyframes si-a{0%{opacity:0;transform:translateY(10px)}4%,37%{opacity:1;transform:none}41%,100%{opacity:0;transform:translateY(-10px)}}
  .sz-b{animation-name:si-b}
  @keyframes si-b{0%,42%{opacity:0;transform:translateY(14px)}46%,94%{opacity:1;transform:none}100%{opacity:0;transform:none}}
  .vl .r1{animation-name:si-r1}.vl .r2{animation-name:si-r2}.vl .r3{animation-name:si-r3}.vl .r4{animation-name:si-r4}
  @keyframes si-r1{0%,2.5%{opacity:0;transform:translateX(-18px)}8%,100%{opacity:1;transform:none}}
  @keyframes si-r2{0%,3.5%{opacity:0;transform:translateX(-18px)}9%,100%{opacity:1;transform:none}}
  @keyframes si-r3{0%,4.5%{opacity:0;transform:translateX(-18px)}10%,24.5%{opacity:1;transform:none}27%,100%{opacity:.5;transform:none}}
  @keyframes si-r4{0%,5.5%{opacity:0;transform:translateX(-18px)}11%,25.5%{opacity:1;transform:none}28%,100%{opacity:.5;transform:none}}
  .scan{animation-name:si-scan;animation-timing-function:linear}
  @keyframes si-scan{0%,11%{opacity:0;top:-48px}12.5%{opacity:1}21%{opacity:1;top:100%}22.5%,100%{opacity:0;top:100%}}
  .vl .tag{animation-timing-function:cubic-bezier(.2,.9,.3,1.25)}
  .r1 .tag{animation-name:si-t1}.r2 .tag{animation-name:si-t2}.r3 .tag{animation-name:si-t3}.r4 .tag{animation-name:si-t4}
  @keyframes si-t1{0%,21.5%{opacity:0;transform:scale(.7)}24%,100%{opacity:1;transform:none}}
  @keyframes si-t2{0%,22.5%{opacity:0;transform:scale(.7)}25%,100%{opacity:1;transform:none}}
  @keyframes si-t3{0%,23.5%{opacity:0;transform:scale(.7)}26%,100%{opacity:1;transform:none}}
  @keyframes si-t4{0%,24.5%{opacity:0;transform:scale(.7)}27%,100%{opacity:1;transform:none}}
  .mock--sichten .cap .w1{animation-name:si-c1}.mock--sichten .cap .w2{animation-name:si-c2}
  @keyframes si-c1{0%,26%{opacity:1}27.5%,100%{opacity:0}}
  @keyframes si-c2{0%,26.5%{opacity:0;transform:translateY(5px)}29.5%,100%{opacity:1;transform:none}}
  .ms__liste .m1{animation-name:si-m1}.ms__liste .m2{animation-name:si-m2}.ms__liste .m3{animation-name:si-m3}
  @keyframes si-m1{0%,47%{opacity:0;transform:translateX(-10px)}50%,100%{opacity:1;transform:none}}
  @keyframes si-m2{0%,49%{opacity:0;transform:translateX(-10px)}52%,100%{opacity:1;transform:none}}
  @keyframes si-m3{0%,51%{opacity:0;transform:translateX(-10px)}54%,100%{opacity:1;transform:none}}
  .mock--sichten .frage{animation-name:si-frage}
  @keyframes si-frage{0%,56%{opacity:0;transform:translateY(8px)}59%,100%{opacity:1;transform:none}}
  .mock--sichten .antw{animation-name:si-antw}
  @keyframes si-antw{0%,60%{opacity:0;transform:translateY(8px)}63%,100%{opacity:1;transform:none}}
  .mock--sichten .antw::before{animation-name:si-streifen;animation-timing-function:linear}
  @keyframes si-streifen{0%,63%{transform:translateX(-100%)}70%,100%{transform:translateX(100%)}}
  .mock--sichten .antw::after{animation-name:si-linie;animation-timing-function:linear}
  @keyframes si-linie{0%,63%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}72%,100%{transform:scaleX(1);opacity:0}}
  .mock--sichten .antw__btns b{animation-name:si-knopf}
  @keyframes si-knopf{0%,71.5%{background:var(--surface);transform:none}72.5%{transform:scale(.86)}74%,100%{background:var(--ok-flaeche);transform:none}}
  .mock--sichten .antw__btns b::after{animation-name:si-haken;animation-timing-function:steps(1)}
  @keyframes si-haken{0%,72.5%{background:var(--ink-2)}73%,100%{background:var(--ok-tief)}}
  .mock--sichten .antw__txt{animation-name:si-txt;animation-timing-function:steps(1)}
  @keyframes si-txt{0%,73%{color:var(--ink)}74%,100%{color:var(--ok-tief)}}

  /* 02 Planen */
  .kk i::after{animation-name:balken}
  @keyframes balken{0%,8%{transform:scaleX(0)}20%,100%{transform:scaleX(1)}}
  .kk--zieht i::after{animation-name:balken-spaet}
  @keyframes balken-spaet{0%,52%{transform:scaleX(0)}60%,100%{transform:scaleX(1)}}
  .kk--zieht{animation-name:pl-karte}
  @keyframes pl-karte{
    0%,27%{transform:none;background:var(--surface);box-shadow:none}
    30%{transform:scale(1.04) rotate(1.5deg);background:var(--paper);box-shadow:0 14px 30px -10px rgba(20,24,29,.3);
        animation-timing-function:cubic-bezier(.65,.05,.3,1)}
    46%{transform:translate(calc(100% + 2 * var(--sp-pad) + 1px),-94px) scale(1.04) rotate(1.5deg);background:var(--paper);box-shadow:0 14px 30px -10px rgba(20,24,29,.3)}
    49%,100%{transform:translate(calc(100% + 2 * var(--sp-pad) + 1px),-94px);background:var(--surface);box-shadow:none}}
  .zeiger{animation-name:pl-zeiger}
  @keyframes pl-zeiger{
    0%,16%{opacity:0;transform:translate(150px,120px)}
    20%{opacity:1}
    26%{opacity:1;transform:none}
    27.5%{transform:scale(.86)}
    29%,49.5%{opacity:1;transform:none}
    56%,100%{opacity:0;transform:translate(90px,80px)}}
  .kk--rueckt{animation-name:pl-rueckt;animation-timing-function:cubic-bezier(.5,0,.2,1)}
  @keyframes pl-rueckt{0%,47%{transform:none}50%,100%{transform:translateY(-94px)}}
  .kk--ziel{animation-name:pl-ziel}
  @keyframes pl-ziel{0%,30%{opacity:0}33%,47%{opacity:1}49%,100%{opacity:0}}
  .sp__kopf .w1{animation-name:pl-z1;animation-timing-function:steps(1)}
  @keyframes pl-z1{0%,48.5%{opacity:1}49%,100%{opacity:0}}
  .sp__kopf .w2{animation-name:pl-z2;animation-timing-function:cubic-bezier(.2,.9,.3,1.3)}
  @keyframes pl-z2{0%,48.5%{opacity:0;transform:scale(.6)}49%{opacity:1}51.5%,100%{opacity:1;transform:none}}

  /* 03 Schreiben: vier Kriterien in vier gleich langen Takten von 20,5 %.
     Sie beginnen bei 10 %, 30,5 %, 51 % und 71,5 %. In jedem Takt derselbe
     Ablauf: das Kriterium wird gewählt, die Antwort blendet auf, drei Zeilen
     tippen sich, die Quelle erscheint, Haken und Zähler ziehen nach. Danach
     steht das fertige Bild, bis die Bühne bei 94 % ausblendet. */
  .krit .k1{animation-name:sc-k1}.krit .k2{animation-name:sc-k2}.krit .k3{animation-name:sc-k3}.krit .k4{animation-name:sc-k4}
  @keyframes sc-k1{0%,2.5%{opacity:0;transform:translateX(-14px);background:transparent}7.5%{opacity:1;transform:none}
    10%{background:transparent}11%,29.5%{background:var(--surface)}30.5%,100%{background:transparent;opacity:1;transform:none}}
  @keyframes sc-k2{0%,3.5%{opacity:0;transform:translateX(-14px);background:transparent}8.5%{opacity:1;transform:none}
    30.5%{background:transparent}31.5%,50%{background:var(--surface)}51%,100%{background:transparent;opacity:1;transform:none}}
  @keyframes sc-k3{0%,4.5%{opacity:0;transform:translateX(-14px);background:transparent}9.5%{opacity:1;transform:none}
    51%{background:transparent}52%,70.5%{background:var(--surface)}71.5%,100%{background:transparent;opacity:1;transform:none}}
  @keyframes sc-k4{0%,5.5%{opacity:0;transform:translateX(-14px);background:transparent}10.5%{opacity:1;transform:none}
    71.5%{background:transparent}72.5%,100%{background:var(--surface);opacity:1;transform:none}}
  .krit i{animation-timing-function:steps(1)}
  .krit .k1 i{animation-name:sc-i1}.krit .k2 i{animation-name:sc-i2}.krit .k3 i{animation-name:sc-i3}.krit .k4 i{animation-name:sc-i4}
  @keyframes sc-i1{0%,26%{background:var(--rule)}26.5%,100%{background:var(--ok)}}
  @keyframes sc-i2{0%,46.5%{background:var(--rule)}47%,100%{background:var(--ok)}}
  @keyframes sc-i3{0%,67%{background:var(--rule)}67.5%,100%{background:var(--ok)}}
  @keyframes sc-i4{0%,87.5%{background:var(--rule)}88%,100%{background:var(--ok)}}
  .krit .k1 i::after{animation-name:sc-h1}.krit .k2 i::after{animation-name:sc-h2}
  .krit .k3 i::after{animation-name:sc-h3}.krit .k4 i::after{animation-name:sc-h4}
  @keyframes sc-h1{0%,26.5%{opacity:0;transform:scale(.5)}28%,100%{opacity:1;transform:none}}
  @keyframes sc-h2{0%,47%{opacity:0;transform:scale(.5)}48.5%,100%{opacity:1;transform:none}}
  @keyframes sc-h3{0%,67.5%{opacity:0;transform:scale(.5)}69%,100%{opacity:1;transform:none}}
  @keyframes sc-h4{0%,88%{opacity:0;transform:scale(.5)}89.5%,100%{opacity:1;transform:none}}
  .mock--schreiben .cap .wechsel>*{animation-timing-function:steps(1)}
  .mock--schreiben .cap .w1{animation-name:sc-c1}.mock--schreiben .cap .w2{animation-name:sc-c2}
  .mock--schreiben .cap .w3{animation-name:sc-c3}.mock--schreiben .cap .w4{animation-name:sc-c4}
  .mock--schreiben .cap .w5{animation-name:sc-c5}
  @keyframes sc-c1{0%,26.5%{opacity:1}27%,100%{opacity:0}}
  @keyframes sc-c2{0%,26.5%{opacity:0}27%,47%{opacity:1}47.5%,100%{opacity:0}}
  @keyframes sc-c3{0%,47%{opacity:0}47.5%,67.5%{opacity:1}68%,100%{opacity:0}}
  @keyframes sc-c4{0%,67.5%{opacity:0}68%,88%{opacity:1}88.5%,100%{opacity:0}}
  @keyframes sc-c5{0%,88%{opacity:0}88.5%,100%{opacity:1}}
  .aw--1{animation-name:sc-aw1}.aw--2{animation-name:sc-aw2}.aw--3{animation-name:sc-aw3}.aw--4{animation-name:sc-aw4}
  @keyframes sc-aw1{0%,11%{opacity:0;transform:translateY(6px)}12.5%,29.5%{opacity:1;transform:none}30.5%,100%{opacity:0;transform:none}}
  @keyframes sc-aw2{0%,31.5%{opacity:0;transform:translateY(6px)}33%,50%{opacity:1;transform:none}51%,100%{opacity:0;transform:none}}
  @keyframes sc-aw3{0%,52%{opacity:0;transform:translateY(6px)}53.5%,70.5%{opacity:1;transform:none}71.5%,100%{opacity:0;transform:none}}
  @keyframes sc-aw4{0%,72.5%{opacity:0;transform:translateY(6px)}74%,100%{opacity:1;transform:none}}
  .tz{animation-timing-function:steps(38,end)}
  .aw--1 .tz:nth-child(1){animation-name:sc-t1}.aw--1 .tz:nth-child(2){animation-name:sc-t2}.aw--1 .tz:nth-child(3){animation-name:sc-t3}
  .aw--2 .tz:nth-child(1){animation-name:sc-t4}.aw--2 .tz:nth-child(2){animation-name:sc-t5}.aw--2 .tz:nth-child(3){animation-name:sc-t6}
  .aw--3 .tz:nth-child(1){animation-name:sc-t7}.aw--3 .tz:nth-child(2){animation-name:sc-t8}.aw--3 .tz:nth-child(3){animation-name:sc-t9}
  .aw--4 .tz:nth-child(1){animation-name:sc-t10}.aw--4 .tz:nth-child(2){animation-name:sc-t11}.aw--4 .tz:nth-child(3){animation-name:sc-t12}
  @keyframes sc-t1{0%,12.5%{max-width:0;border-color:transparent}12.6%{max-width:0;border-color:var(--ink)}16.5%{max-width:100%;border-color:var(--ink)}17%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t2{0%,16.5%{max-width:0;border-color:transparent}16.6%{max-width:0;border-color:var(--ink)}20.5%{max-width:100%;border-color:var(--ink)}21%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t3{0%,20.5%{max-width:0;border-color:transparent}20.6%{max-width:0;border-color:var(--ink)}24.5%{max-width:100%;border-color:var(--ink)}25%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t4{0%,33%{max-width:0;border-color:transparent}33.1%{max-width:0;border-color:var(--ink)}37%{max-width:100%;border-color:var(--ink)}37.5%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t5{0%,37%{max-width:0;border-color:transparent}37.1%{max-width:0;border-color:var(--ink)}41%{max-width:100%;border-color:var(--ink)}41.5%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t6{0%,41%{max-width:0;border-color:transparent}41.1%{max-width:0;border-color:var(--ink)}45%{max-width:100%;border-color:var(--ink)}45.5%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t7{0%,53.5%{max-width:0;border-color:transparent}53.6%{max-width:0;border-color:var(--ink)}57.5%{max-width:100%;border-color:var(--ink)}58%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t8{0%,57.5%{max-width:0;border-color:transparent}57.6%{max-width:0;border-color:var(--ink)}61.5%{max-width:100%;border-color:var(--ink)}62%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t9{0%,61.5%{max-width:0;border-color:transparent}61.6%{max-width:0;border-color:var(--ink)}65.5%{max-width:100%;border-color:var(--ink)}66%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t10{0%,74%{max-width:0;border-color:transparent}74.1%{max-width:0;border-color:var(--ink)}78%{max-width:100%;border-color:var(--ink)}78.5%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t11{0%,78%{max-width:0;border-color:transparent}78.1%{max-width:0;border-color:var(--ink)}82%{max-width:100%;border-color:var(--ink)}82.5%,100%{max-width:100%;border-color:transparent}}
  @keyframes sc-t12{0%,82%{max-width:0;border-color:transparent}82.1%{max-width:0;border-color:var(--ink)}86%{max-width:100%;border-color:var(--ink)}86.5%,100%{max-width:100%;border-color:transparent}}
  .aw--1 .aw__quelle{animation-name:sc-q1}.aw--2 .aw__quelle{animation-name:sc-q2}
  .aw--3 .aw__quelle{animation-name:sc-q3}.aw--4 .aw__quelle{animation-name:sc-q4}
  @keyframes sc-q1{0%,24.5%{opacity:0;transform:translateY(4px)}26.5%,100%{opacity:1;transform:none}}
  @keyframes sc-q2{0%,45%{opacity:0;transform:translateY(4px)}47%,100%{opacity:1;transform:none}}
  @keyframes sc-q3{0%,65.5%{opacity:0;transform:translateY(4px)}67.5%,100%{opacity:1;transform:none}}
  @keyframes sc-q4{0%,86%{opacity:0;transform:translateY(4px)}88%,100%{opacity:1;transform:none}}

  /* 04 Prüfen */
  .pl .s1{animation-name:pr-s1}.pl .s2{animation-name:pr-s2}.pl .s3{animation-name:pr-s3}.pl .s4{animation-name:pr-s4}
  @keyframes pr-s1{0%,2.5%{opacity:0;transform:translateX(-14px)}7.5%,100%{opacity:1;transform:none}}
  @keyframes pr-s2{0%,3.5%{opacity:0;transform:translateX(-14px)}8.5%,100%{opacity:1;transform:none}}
  @keyframes pr-s3{0%,4.5%{opacity:0;transform:translateX(-14px)}9.5%,100%{opacity:1;transform:none}}
  @keyframes pr-s4{0%,5.5%{opacity:0;transform:translateX(-14px)}10.5%,100%{opacity:1;transform:none}}
  .pl i{animation-timing-function:steps(1)}
  .pl i::before{animation-duration:.9s,12s;animation-iteration-count:infinite,infinite;animation-timing-function:linear,steps(1)}
  @keyframes drehen{to{transform:rotate(360deg)}}
  .pl .s1 i{animation-name:pr-i1}.pl .s2 i{animation-name:pr-i2}.pl .s3 i{animation-name:pr-i3}.pl .s4 i{animation-name:pr-i4}
  @keyframes pr-i1{0%,14%{background:var(--rule)}14.5%,100%{background:var(--ok)}}
  @keyframes pr-i2{0%,19%{background:var(--rule)}19.5%,100%{background:var(--ok)}}
  @keyframes pr-i3{0%,26.9%{background:var(--rule)}27%,64.5%{background:var(--accent)}65%,100%{background:var(--ok)}}
  @keyframes pr-i4{0%,29%{background:var(--rule)}29.5%,100%{background:var(--ok)}}
  .pl .s1 i::before{animation-name:drehen,pr-r1}.pl .s2 i::before{animation-name:drehen,pr-r2}
  .pl .s3 i::before{animation-name:drehen,pr-r3}.pl .s4 i::before{animation-name:drehen,pr-r4}
  @keyframes pr-r1{0%,10%{opacity:0}10.5%,14%{opacity:1}14.5%,100%{opacity:0}}
  @keyframes pr-r2{0%,15%{opacity:0}15.5%,19%{opacity:1}19.5%,100%{opacity:0}}
  /* Der dritte Punkt braucht länger, weil er etwas findet. Der Ring dreht
     im Tempo der anderen drei, verschwindet erst danach, und das Ausrufe-
     zeichen wächst an seiner Stelle auf, statt hart umzuspringen. */
  @keyframes pr-r3{0%,20%{opacity:0;border-color:var(--rule);border-top-color:var(--accent);color:transparent}
    20.5%,26.9%{opacity:1;border-color:var(--rule);border-top-color:var(--accent);color:transparent}
    27%,64.5%{opacity:1;border-color:transparent;color:var(--paper)}
    65%,100%{opacity:0;border-color:transparent;color:transparent}}
  @keyframes pr-r4{0%,25%{opacity:0}25.5%,29%{opacity:1}29.5%,100%{opacity:0}}
  .pl .s3 i::before{animation-name:pr-r3-still,pr-r3;animation-duration:12s,12s;animation-timing-function:linear,steps(1)}
  @keyframes pr-r3-still{0%,20.5%{transform:rotate(0) scale(1)}
    26.9%{transform:rotate(355deg) scale(1)}
    27%{transform:rotate(360deg) scale(.5);animation-timing-function:cubic-bezier(.2,.9,.3,1.3)}
    28.5%,100%{transform:rotate(360deg) scale(1)}}
  .pl .s1 i::after{animation-name:pr-h1}.pl .s2 i::after{animation-name:pr-h2}.pl .s3 i::after{animation-name:pr-h3}.pl .s4 i::after{animation-name:pr-h4}
  @keyframes pr-h1{0%,14.5%{opacity:0;transform:scale(.5)}16%,100%{opacity:1;transform:none}}
  @keyframes pr-h2{0%,19.5%{opacity:0;transform:scale(.5)}21%,100%{opacity:1;transform:none}}
  @keyframes pr-h3{0%,65%{opacity:0;transform:scale(.5)}66.5%,100%{opacity:1;transform:none}}
  @keyframes pr-h4{0%,29.5%{opacity:0;transform:scale(.5)}31%,100%{opacity:1;transform:none}}
  .pl .s1>span{animation-name:pr-sp1}.pl .s2>span{animation-name:pr-sp2}.pl .s4>span{animation-name:pr-sp4}
  @keyframes pr-sp1{0%,14.5%{opacity:0}17%,100%{opacity:1}}
  @keyframes pr-sp2{0%,19.5%{opacity:0}22%,100%{opacity:1}}
  @keyframes pr-sp4{0%,29.5%{opacity:0}32%,100%{opacity:1}}
  .pl .s3 .w1{animation-name:pr-w1}.pl .s3 .w2{animation-name:pr-w2}
  @keyframes pr-w1{0%,27%{opacity:0;transform:translateY(4px)}29.5%,64.5%{opacity:1;transform:none}65%,100%{opacity:0;transform:none}}
  @keyframes pr-w2{0%,65%{opacity:0;transform:translateY(4px)}67.5%,100%{opacity:1;transform:none}}
  .mock--pruefen .cap .w1{animation-name:pr-c1;animation-timing-function:steps(1)}
  .mock--pruefen .cap .w2{animation-name:pr-c2}
  @keyframes pr-c1{0%,71.5%{opacity:1}72%,100%{opacity:0}}
  @keyframes pr-c2{0%,71.5%{opacity:0;transform:scale(.85)}74%,100%{opacity:1;transform:none}}
  .mock--pruefen .frage{animation-name:pr-frage}
  @keyframes pr-frage{0%,32%{opacity:0;transform:translateY(8px)}35%,100%{opacity:1;transform:none}}
  .paar{animation-name:pr-paar}
  @keyframes pr-paar{0%,36%{opacity:0;transform:translateY(8px)}39%,100%{opacity:1;transform:none}}
  .mock--pruefen .antw{animation-name:pr-antw}
  @keyframes pr-antw{0%,40%{opacity:0;transform:translateY(8px)}43%,100%{opacity:1;transform:none}}
  .mock--pruefen .antw::before{animation-name:pr-streifen;animation-timing-function:linear}
  @keyframes pr-streifen{0%,43.5%{transform:translateX(-100%)}50.5%,100%{transform:translateX(100%)}}
  .mock--pruefen .antw::after{animation-name:pr-linie;animation-timing-function:linear}
  @keyframes pr-linie{0%,43.5%{transform:scaleX(0);opacity:1}50.5%{transform:scaleX(1);opacity:1}52.5%,100%{transform:scaleX(1);opacity:0}}
  .mock--pruefen .antw__btns b{animation-name:pr-knopf}
  @keyframes pr-knopf{0%,52%{background:var(--surface);transform:none}53%{transform:scale(.86)}54.5%,100%{background:var(--ok-flaeche);transform:none}}
  .mock--pruefen .antw__btns b::after{animation-name:pr-haken;animation-timing-function:steps(1)}
  @keyframes pr-haken{0%,53%{background:var(--ink-2)}53.5%,100%{background:var(--ok-tief)}}
  .mock--pruefen .antw__txt{animation-name:pr-txt;animation-timing-function:steps(1)}
  @keyframes pr-txt{0%,53.5%{color:var(--ink)}54.5%,100%{color:var(--ok-tief)}}
}

/* Ohne Bewegung steht jede Karte in ihrem Endbild */
@media (prefers-reduced-motion: reduce){
  .sz-a{display:none}
  .mock--sichten .antw__btns b,.mock--pruefen .antw__btns b{background:var(--ok-flaeche)}
  .mock--sichten .antw__btns b::after,.mock--pruefen .antw__btns b::after{background:var(--ok-tief)}
  .krit i,.pl i{background:var(--ok)}
  .krit i::after,.pl i::after{opacity:1}
  .pl .s3 .w1{display:none}
}

/* Enge Bühnen: die Regeln hängen an der Breite der Karte, nicht am Viewport.
   Unter 620 px stapelt sich der Editor, unter 520 px wird alles kompakter.   */
.flow__bild{container-type:inline-size}
/* Die Vergrößerung lohnt nur auf einer breiten Bühne. Darunter wird der
   Inhalt höher als die Bühne und läuft oben und unten heraus. */
@container (max-width:660px){
  .mock .szene{--z:1}
}
@container (max-width:620px){
  .editor{grid-template-columns:1fr}
  .antwort{min-height:0}
  .mock .krit{padding:6px}
  .krit li{padding:6px 8px}
  .aw p{font-size:12px}
}
@container (max-width:520px){
  .mock{aspect-ratio:4/5;font-size:12px}
  .szene{--rand:var(--s5);gap:var(--s3)}
  .cap__l{font-size:10px;letter-spacing:.08em}
  .cap__r{font-size:11px}
  .vl{gap:8px}
  .vl__r{height:auto;padding:8px 12px;gap:10px}
  .vl__txt b{font-size:12px;white-space:normal;line-height:1.3}
  .vl__ico{width:26px;height:26px}
  .vl__ico::before{left:7px;right:7px;top:8px;box-shadow:0 4px 0 var(--rule-strong),0 8px 0 var(--rule-strong)}
  .tag{font-size:10px;padding:3px 7px}
  .ms{padding:12px 14px}
  .frage,.antw{padding:10px 12px;font-size:12px}
  .antwort{padding:12px 14px}
  .mock .pl{padding:2px 12px}
  .pl li{padding:8px 0;font-size:12px}
  .paar__s{padding:8px 10px}
  .paar__s small{font-size:10px}
  .paar__s b{font-size:13px}
  .mock--planen .board{left:var(--s4);top:var(--s4);right:var(--s4);grid-template-columns:1fr 1fr;--sp-pad:12px}
  .board .spalte:last-child{display:none}
  .kk{padding:10px}
  .kk b{font-size:12px}
  .kk i{left:10px;right:10px;bottom:10px}
}

/* Auf sehr schmalen Bühnen brechen die Zeilen um und der Inhalt wird höher,
   als 4:5 hergibt. Dann wird die Bühne hochkant, sonst schneidet sie oben und
   unten ab. Die Werte sind an den Inhalten gemessen, nicht geschätzt. */
@container (max-width:360px){
  .mock{aspect-ratio:1/1.55}
}
@container (max-width:300px){
  .mock{aspect-ratio:1/2.05}
}

/* ── Werkstatt ─────────────────────────────────────────────────────────────
   Nur fuer werkstatt/, steht auf noindex und wird vor dem Live-Gang geloescht.
   Alle Bewegungen hier sind reines CSS in einem Takt, gleiche Bauart wie die
   Produktansichten im Plattform-Block.                                   */

.wk{padding-block:var(--s9) var(--s10)}
.wk__intro{max-width:var(--w-kopf);margin-bottom:var(--s10)}
.wk__intro h1{font-size:var(--fs-h2);font-weight:600;letter-spacing:-0.03em;margin-bottom:var(--s5)}
.wk__intro p{color:var(--ink-2);line-height:1.6;margin-bottom:var(--s4)}
.wk__kopf{border-top:1px solid var(--rule-strong);padding-top:var(--s5);margin-top:var(--s10)}
.wk__nr{font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--s2)}
.wk__titel{font-size:var(--fs-h3);font-weight:500;letter-spacing:-0.015em;margin-bottom:var(--s2)}
.wk__notiz{color:var(--ink-2);font-size:var(--fs-small);max-width:var(--w-lese);line-height:1.6}

.wk__probe{margin-top:var(--s7);border-radius:14px;padding:var(--s9) var(--s8);
  position:relative;overflow:hidden}
.wk__probe--hell{background:var(--paper);border:1px solid var(--rule)}
.wk__probe--dunkel{background:#101418;color:var(--paper);isolation:isolate}
.wk__gross{font-size:var(--fs-hero);font-weight:500;letter-spacing:-0.035em;
  line-height:1.03;margin-bottom:var(--s5)}
.wk__sub{font-size:var(--fs-body);line-height:1.55;max-width:46ch;margin-bottom:var(--s7);color:var(--ink-2)}
.wk__probe--dunkel .wk__sub{color:var(--invert-ink2)}
.wk__mitte{text-align:center;max-width:920px;margin-inline:auto;position:relative;z-index:1}
.wk__mitte .wk__sub{margin-inline:auto}
.wk__zwei{display:grid;gap:var(--s8);grid-template-columns:1fr;align-items:center}
@media (min-width:1024px){.wk__zwei{grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr)}}
.wk__zwei .wk__gross{font-size:var(--fs-h2)}

/* Die Fangbox auf dunklem Grund */
.fang--hell{border-color:rgba(255,255,255,0.5)}
.fang--hell input{color:var(--paper)}
.fang--hell input::placeholder{color:var(--invert-ink2)}
.fang--hell:focus-within{border-color:var(--paper)}

/* A · Rangliste: fuenf Raenge laufen ein, dann bleibt einer uebrig */
.rangliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rl__z{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:var(--s4);
  background:var(--surface);border-radius:8px;padding:14px var(--s4)}
.rl__z span{font-family:var(--font-mono);font-size:12px;color:var(--ink-2)}
.rl__z i{height:6px;border-radius:3px;background:var(--rule-strong)}
.rl__z em{font-style:normal;font-size:12px;font-weight:500;color:var(--ok-tief);
  background:var(--ok-flaeche);border-radius:99px;padding:3px 10px;opacity:0}
.rl__z--eins{background:var(--paper);box-shadow:0 1px 2px rgba(20,24,29,.05),0 14px 34px -18px rgba(20,24,29,.3)}
.rl__z--eins i{background:var(--accent)}
@media (prefers-reduced-motion: no-preference){
  .rangliste .rl__z{animation:rl-rein 6s cubic-bezier(.2,.7,.3,1) infinite}
  .rangliste .rl__z:nth-child(2){animation-name:rl-weg2}
  .rangliste .rl__z:nth-child(3){animation-name:rl-weg3}
  .rangliste .rl__z:nth-child(4){animation-name:rl-weg4}
  .rangliste .rl__z:nth-child(5){animation-name:rl-weg5}
  .rangliste .rl__z:nth-child(6){animation-name:rl-weg6}
  .rl__z--eins em{animation:rl-marke 6s cubic-bezier(.2,.9,.3,1.2) infinite}
}
@keyframes rl-rein{0%{opacity:0;transform:translateX(-14px)}8%,100%{opacity:1;transform:none}}
@keyframes rl-weg2{0%{opacity:0;transform:translateX(-14px)}10%,44%{opacity:1;transform:none}
  56%,100%{opacity:.16;transform:translateX(10px)}}
@keyframes rl-weg3{0%{opacity:0;transform:translateX(-14px)}12%,46%{opacity:1;transform:none}
  58%,100%{opacity:.16;transform:translateX(10px)}}
@keyframes rl-weg4{0%{opacity:0;transform:translateX(-14px)}14%,48%{opacity:1;transform:none}
  60%,100%{opacity:.16;transform:translateX(10px)}}
@keyframes rl-weg5{0%{opacity:0;transform:translateX(-14px)}16%,50%{opacity:1;transform:none}
  62%,100%{opacity:.16;transform:translateX(10px)}}
@keyframes rl-weg6{0%{opacity:0;transform:translateX(-14px)}18%,52%{opacity:1;transform:none}
  64%,100%{opacity:.16;transform:translateX(10px)}}
@keyframes rl-marke{0%,58%{opacity:0;transform:scale(.7)}66%,100%{opacity:1;transform:none}}

/* B · Die Bewertungsmatrix fuellt sich */
.matrix{position:absolute;inset:0;z-index:0;display:grid;overflow:hidden;
  grid-template-columns:repeat(auto-fill,minmax(26px,1fr));grid-auto-rows:26px;
  gap:5px;padding:var(--s5);opacity:.75;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 50%,#000 30%,transparent 78%);
  mask-image:radial-gradient(120% 100% at 50% 50%,#000 30%,transparent 78%)}
.matrix i{display:block;border-radius:3px;background:rgba(255,255,255,.05)}
@media (prefers-reduced-motion: no-preference){
  .matrix i{animation:mx 7s linear infinite}
  .matrix i:nth-child(3n){animation-delay:-1.4s}
  .matrix i:nth-child(3n+1){animation-delay:-3.1s}
  .matrix i:nth-child(5n){animation-delay:-5.2s}
}
@keyframes mx{0%,30%{background:rgba(255,255,255,.06)}
  40%,80%{background:color-mix(in srgb, var(--accent) calc(var(--v) * 26%), rgba(255,255,255,.06))}
  92%,100%{background:rgba(255,255,255,.06)}}

/* C · Der Fristenlauf */
.frist{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:stretch}
.frist__linie{position:relative;width:2px;background:var(--rule);border-radius:1px}
.frist__marke{position:absolute;left:-4px;width:10px;height:10px;border-radius:50%;
  background:var(--accent);top:0}
.frist__punkte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  justify-content:space-between;gap:var(--s5);min-height:230px}
.frist__punkte li{display:flex;flex-direction:column;gap:2px}
.frist__punkte b{font-size:var(--fs-small);font-weight:500}
.frist__punkte span{font-family:var(--font-mono);font-size:11px;color:var(--ink-2)}
@media (prefers-reduced-motion: no-preference){
  .frist__marke{animation:fr-marke 8s cubic-bezier(.5,0,.5,1) infinite}
  .frist__punkte li{animation:fr-hell 8s steps(1) infinite;opacity:.35}
  .frist__punkte li:nth-child(1){animation-name:fr-h1}
  .frist__punkte li:nth-child(2){animation-name:fr-h2}
  .frist__punkte li:nth-child(3){animation-name:fr-h3}
  .frist__punkte li:nth-child(4){animation-name:fr-h4}
}
@keyframes fr-marke{0%{top:0}92%,100%{top:calc(100% - 10px)}}
@keyframes fr-h1{0%,22%{opacity:1}23%,100%{opacity:.35}}
@keyframes fr-h2{0%,22%{opacity:.35}23%,52%{opacity:1}53%,100%{opacity:.35}}
@keyframes fr-h3{0%,52%{opacity:.35}53%,80%{opacity:1}81%,100%{opacity:.35}}
@keyframes fr-h4{0%,80%{opacity:.35}81%,100%{opacity:1}}

/* D · dunkel mit wanderndem Verlauf */
.wk__probe--verlauf::before{content:"";position:absolute;inset:-40%;z-index:0;
  background:radial-gradient(38% 44% at 30% 40%, rgba(26,63,100,.85), transparent 70%),
             radial-gradient(32% 38% at 72% 62%, rgba(21,147,90,.32), transparent 72%);
  filter:blur(10px)}
@media (prefers-reduced-motion: no-preference){
  .wk__probe--verlauf::before{animation:verlauf 26s ease-in-out infinite alternate}
}
@keyframes verlauf{0%{transform:translate3d(-4%,-3%,0) scale(1)}100%{transform:translate3d(5%,4%,0) scale(1.12)}}

/* E · Der Dokumentenstapel */
.stapel{position:relative;height:300px}
.st__b{position:absolute;left:0;right:0;top:0;background:var(--paper);border-radius:10px;
  border:1px solid var(--rule);padding:var(--s4) var(--s5);
  box-shadow:0 1px 2px rgba(20,24,29,.04),0 14px 34px -20px rgba(20,24,29,.3)}
.st__b b{display:block;font-size:var(--fs-small);font-weight:500;margin-bottom:10px}
.st__b i{display:block;height:5px;border-radius:3px;background:var(--surface);margin-bottom:6px}
.st__b i:nth-of-type(2){width:78%}
.st__b i:nth-of-type(3){width:52%}
.st__b em{position:absolute;right:var(--s5);top:var(--s4);font-style:normal;font-size:11px;
  font-weight:500;color:var(--ok-tief);background:var(--ok-flaeche);border-radius:99px;
  padding:3px 10px;opacity:0}
@media (prefers-reduced-motion: no-preference){
  .st__b{animation:st 9s cubic-bezier(.2,.7,.3,1) infinite}
  .st__b--1{animation-name:st1}.st__b--2{animation-name:st2}
  .st__b--3{animation-name:st3}.st__b--4{animation-name:st4}
  .st__b--4 em{animation:st-marke 9s cubic-bezier(.2,.9,.3,1.2) infinite}
}
@keyframes st1{0%,10%{transform:translateY(0) scale(.94);opacity:.5}
  26%,100%{transform:translateY(0) scale(.94);opacity:.5}}
@keyframes st2{0%,10%{transform:translateY(0) scale(.96);opacity:.65}
  26%,100%{transform:translateY(22px) scale(.96);opacity:.65}}
@keyframes st3{0%,10%{transform:translateY(0) scale(.98);opacity:.8}
  26%,100%{transform:translateY(44px) scale(.98);opacity:.8}}
@keyframes st4{0%,10%{transform:translateY(0)}
  26%,44%{transform:translateY(66px)}
  56%,100%{transform:translateY(150px) scale(1.02)}}
@keyframes st-marke{0%,58%{opacity:0;transform:scale(.7)}66%,100%{opacity:1;transform:none}}

/* Uplane-Bauform: feste Buehne links, Akkordeon rechts */
.hiw{display:grid;gap:var(--s8);grid-template-columns:1fr;align-items:start}
@media (max-width:1023px){.hiw__liste{order:1}.hiw__buehne{order:2}}
@media (min-width:1024px){.hiw{grid-template-columns:minmax(0,1fr) minmax(0,0.92fr);column-gap:var(--s8)}}
.hiw__buehne{position:relative}
.hiw__bild{container-type:inline-size}
.hiw__bild .mock{margin-left:0;max-width:none}
.hiw__liste h2{font-size:var(--fs-h2);font-weight:600;letter-spacing:-0.03em;
  line-height:1.06;margin:0 0 var(--s5);text-wrap:balance}
.hiw__lead{color:var(--ink-2);line-height:1.6;margin-bottom:var(--s7)}
.hiw__schritte{display:flex;flex-direction:column}
.hiw__schritt{display:block;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:0;position:relative;
  padding:var(--s2) 0 var(--s2) var(--s5);font:inherit;color:inherit}
/* Der graue Stab reicht von Polster zu Polster: bei geschlossenen Stufen ist
   er dadurch kurz, bei der offenen lang, und dazwischen bleiben Luecken. */
.hiw__schritt::after{content:"";position:absolute;left:0;top:var(--s2);bottom:var(--s2);
  width:3px;border-radius:99px;background:var(--rule)}
.hiw__zeile{display:flex;align-items:baseline;gap:var(--s4)}
.hiw__idx{display:none}
.hiw__idx{font-family:var(--font-mono);font-size:11px;color:var(--ink-2)}
.hiw__name{font-size:var(--fs-intro);font-weight:500;letter-spacing:-0.015em}
.hiw__schritt:not(.ist-offen) .hiw__name{color:var(--ink-2)}
.hiw__text{display:block;color:var(--ink-2);font-size:var(--fs-small);line-height:1.6;
  overflow:hidden;max-height:0;opacity:0}
.hiw__schritt.ist-offen .hiw__text{max-height:8em;opacity:1;margin-top:var(--s3)}
@media (prefers-reduced-motion: no-preference){
  .hiw__schritt,.hiw__text{transition:max-height .55s cubic-bezier(.33,0,.2,1),
    opacity .45s cubic-bezier(.33,0,.2,1),margin-top .55s cubic-bezier(.33,0,.2,1),color .35s linear}
}

/* ── Arbeitsteilung ───────────────────────────────────────────────────────
   Zwei Spalten, eine Zeile je Aufgabe. Kein Bild und keine Karte: an dieser
   Stelle zaehlt nur, wer was macht.                                       */
.teilung{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media (min-width:820px){.teilung{grid-template-columns:1fr 1fr}}
.teilung__seite{border:1px solid var(--rule);border-radius:12px;
  box-shadow:0 1px 2px rgba(20,24,29,.03),0 16px 40px -28px rgba(20,24,29,.25);
  padding:var(--s6);background:var(--paper)}
/* Keine graue Fuellung mehr: nebeneinander wirkte sie wie ein Farbstich.
   Die beiden Seiten unterscheiden sich jetzt am Punkt und an der Zeile. */
.teilung__seite--sie{background:var(--paper)}
.teilung__seite--sie .teilung__wer{color:var(--ink-2)}
.teilung__wer{font-size:var(--fs-intro);font-weight:500;letter-spacing:-0.015em;
  text-transform:uppercase;color:var(--ink-2);font-weight:400;margin-bottom:var(--s5)}
.teilung__seite ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s4)}
.teilung__seite li{position:relative;padding-left:var(--s5);
  font-size:var(--fs-small);line-height:1.55}
.teilung__seite li::before{content:"";position:absolute;left:0;top:0.35em;bottom:0.35em;border-radius:99px;
  width:6px;height:6px;border-radius:50%;background:var(--accent)}
.teilung__seite--sie li::before{background:var(--rule-strong)}
.teilung__schluss{margin-top:var(--s7);text-align:center;font-size:var(--fs-intro);
  line-height:1.5;max-width:var(--w-lese);margin-inline:auto}

/* ── Werkstatt, Nachtrag: zwei Muster aus dem 21st-Katalog ────────────────
   Beide sind neu geschrieben, nicht uebernommen: der Katalog liefert React
   und Tailwind, diese Seite laeuft ohne Build.                           */

.wk__probe--tief{padding-bottom:0;overflow:hidden}

/* F · weicher Schein hinter der Schrift, Produktansicht angeschnitten */
.wk__probe--schein::before{content:"";position:absolute;left:50%;top:-10%;
  width:min(900px,110%);aspect-ratio:1.6;transform:translateX(-50%);z-index:0;
  background:radial-gradient(50% 50% at 50% 50%, rgba(26,63,100,.75), transparent 72%);
  filter:blur(6px);pointer-events:none}
.anschnitt{position:relative;z-index:1;margin-top:var(--s8);
  max-width:620px;margin-inline:auto}
.anschnitt__karte{background:var(--buehne);border-radius:16px 16px 0 0;
  padding:var(--s6) var(--s6) var(--s8);text-align:left;
  box-shadow:0 -1px 0 rgba(255,255,255,.10),0 -30px 70px -30px rgba(0,0,0,.6);
  font-size:13px;line-height:1.35;color:var(--ink);
  --schatten:0 1px 2px rgba(20,24,29,.04),0 10px 28px -14px rgba(20,24,29,.14);
  --m-haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.7 9 10 3.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.anschnitt__karte .pl i{background:var(--ok)}
.anschnitt__karte .pl i::after{opacity:1}

/* G · der Faecher */
.faecher{position:relative;z-index:1;height:260px;margin-top:var(--s8);
  display:flex;justify-content:center;align-items:flex-start}
.fa__b{position:relative;width:186px;background:var(--paper);border:1px solid var(--rule);
  border-radius:12px;padding:var(--s4) var(--s5);text-align:left;
  box-shadow:0 1px 2px rgba(20,24,29,.04),0 20px 44px -24px rgba(20,24,29,.4);
  transform-origin:50% 120%}
.fa__b + .fa__b{margin-left:-58px}
.fa__b:nth-child(1){transform:rotate(-9deg) translateY(16px)}
.fa__b:nth-child(2){transform:rotate(-4.5deg) translateY(4px)}
.fa__b:nth-child(3){transform:rotate(0deg);z-index:3}
.fa__b:nth-child(4){transform:rotate(4.5deg) translateY(4px)}
.fa__b:nth-child(5){transform:rotate(9deg) translateY(16px)}
.fa__b b{display:block;font-size:var(--fs-small);font-weight:500;margin-bottom:10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fa__b i{display:block;height:5px;border-radius:3px;background:var(--surface);margin-bottom:6px}
.fa__b i:nth-of-type(3){width:74%}
.fa__b i:nth-of-type(4){width:48%}
.fa__b--mitte{border-color:var(--accent)}
.fa__b em{display:inline-block;margin-top:var(--s3);font-style:normal;font-size:11px;
  font-weight:500;color:var(--paper);background:var(--accent);border-radius:99px;padding:3px 9px}
@media (prefers-reduced-motion: no-preference){
  .fa__b{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
  .faecher:hover .fa__b:nth-child(1){transform:rotate(-15deg) translate(-26px,26px)}
  .faecher:hover .fa__b:nth-child(2){transform:rotate(-7.5deg) translate(-13px,8px)}
  .faecher:hover .fa__b:nth-child(3){transform:translateY(-10px) scale(1.03)}
  .faecher:hover .fa__b:nth-child(4){transform:rotate(7.5deg) translate(13px,8px)}
  .faecher:hover .fa__b:nth-child(5){transform:rotate(15deg) translate(26px,26px)}
}
@media (max-width:640px){.faecher{height:210px}.fa__b{width:140px}.fa__b + .fa__b{margin-left:-64px}}

/* ── Werkstatt, dritte Runde: zeigen statt dekorieren ─────────────────────
   Leitgedanke: In der Vergabe kann Innovation nicht dekoriert werden, sonst
   liest sie sich als Startup ohne Auftraege. Sie muss vorgefuehrt werden, an
   echter Facharbeit. Seriositaet kommt umgekehrt aus Fachtiefe, nicht aus
   Zurueckhaltung. Deshalb zeigen alle drei Entwuerfe Vergabearbeit.       */

/* H · Die Maschine liest mit */
.lesen{display:grid;grid-template-columns:1fr;gap:var(--s5)}
@media (min-width:640px){.lesen{grid-template-columns:1.05fr 0.95fr;align-items:start}}
.lesen__seite{position:relative;overflow:hidden;background:var(--paper);border-radius:10px;
  padding:var(--s5);box-shadow:0 20px 50px -26px rgba(0,0,0,.7)}
.lesen__kopf{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s4)}
.lz{display:block;height:5px;width:var(--w);border-radius:3px;background:var(--surface);margin-bottom:7px}
.lesen__scan{position:absolute;left:0;right:0;height:64px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(26,63,100,.16) 62%,transparent);
  border-bottom:1px solid rgba(26,63,100,.5);top:-64px}
.lesen__funde{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lesen__funde li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  background:rgba(255,255,255,.05);border-left:2px solid var(--accent);
  border-radius:0 8px 8px 0;padding:10px var(--s4);opacity:0}
.lesen__funde b{font-size:13px;font-weight:500;color:var(--paper)}
.lesen__funde span{font-family:var(--font-mono);font-size:11px;color:var(--invert-ink2);white-space:nowrap}
@media (prefers-reduced-motion: no-preference){
  .lesen__scan{animation:le-scan 9s linear infinite}
  .lesen__funde li{animation:le-fund 9s cubic-bezier(.2,.7,.3,1) infinite}
  .lesen__funde li:nth-child(1){animation-name:le-f1}
  .lesen__funde li:nth-child(2){animation-name:le-f2}
  .lesen__funde li:nth-child(3){animation-name:le-f3}
  .lesen__funde li:nth-child(4){animation-name:le-f4}
}
@keyframes le-scan{0%{top:-64px;opacity:0}4%{opacity:1}86%{top:100%;opacity:1}90%,100%{opacity:0;top:100%}}
@keyframes le-f1{0%,16%{opacity:0;transform:translateX(-10px)}22%,100%{opacity:1;transform:none}}
@keyframes le-f2{0%,34%{opacity:0;transform:translateX(-10px)}40%,100%{opacity:1;transform:none}}
@keyframes le-f3{0%,54%{opacity:0;transform:translateX(-10px)}60%,100%{opacity:1;transform:none}}
@keyframes le-f4{0%,74%{opacity:0;transform:translateX(-10px)}80%,100%{opacity:1;transform:none}}

/* I · Der Zuschlag */
.wertung{background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  padding:var(--s5);box-shadow:0 1px 2px rgba(20,24,29,.04),0 22px 50px -28px rgba(20,24,29,.4)}
.wertung__kopf{display:flex;justify-content:space-between;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  padding-bottom:var(--s3);border-bottom:1px solid var(--rule);margin-bottom:var(--s3)}
.wertung ol{list-style:none;margin:0;padding:0}
.zs{position:relative;display:grid;grid-template-columns:20px 88px 1fr auto;align-items:center;
  gap:var(--s4);padding:12px 10px;border-radius:8px;font-size:13px}
.zs__r{font-family:var(--font-mono);font-size:11px;color:var(--ink-2)}
.zs b{font-weight:500}
.zs i{display:block;height:6px;border-radius:3px;background:var(--surface);position:relative;overflow:hidden}
.zs i::after{content:"";position:absolute;inset:0;transform-origin:left;border-radius:3px;
  background:var(--rule-strong);transform:scaleX(var(--p,0))}
.zs em{font-style:normal;font-family:var(--font-mono);font-size:13px;font-weight:500}
.zs u{position:absolute;right:10px;top:-9px;text-decoration:none;font-size:10px;font-weight:500;
  color:var(--paper);background:var(--accent);border-radius:99px;padding:2px 8px;opacity:0}
.zs--eins{background:var(--surface)}
.zs--eins i::after{background:var(--accent)}
@media (prefers-reduced-motion: no-preference){
  .zs i::after{animation:zs-bal 7s cubic-bezier(.3,0,.2,1) infinite}
  .zs:nth-child(1) i::after{--p:.92}
  .zs:nth-child(2) i::after{--p:.84}
  .zs:nth-child(3) i::after{--p:.79}
  .zs:nth-child(4) i::after{--p:.71}
  .zs:nth-child(n+2){animation:zs-weg 7s cubic-bezier(.2,.7,.3,1) infinite}
  .zs--eins u{animation:zs-marke 7s cubic-bezier(.2,.9,.3,1.3) infinite}
}
@keyframes zs-bal{0%,6%{transform:scaleX(0)}40%,100%{transform:scaleX(var(--p))}}
@keyframes zs-weg{0%,52%{opacity:1}66%,100%{opacity:.3}}
@keyframes zs-marke{0%,56%{opacity:0;transform:scale(.7)}64%,100%{opacity:1;transform:none}}

/* J · Der Beleg */
.beleg{background:rgba(255,255,255,.05);border-radius:12px;padding:var(--s6);
  border:1px solid rgba(255,255,255,.10)}
.beleg__krit{font-size:13px;color:var(--paper);margin-bottom:var(--s5);display:flex;
  align-items:center;gap:var(--s3)}
.beleg__krit span{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--invert-ink2);border:1px solid rgba(255,255,255,.18);
  border-radius:99px;padding:3px 9px}
.beleg__text{font-size:14px;line-height:1.7;color:var(--paper);margin-bottom:var(--s5)}
.beleg__text .tz{display:block;width:max-content;max-width:100%;white-space:nowrap;
  overflow:hidden;border-right:1.5px solid transparent}
.beleg__quelle{display:flex;align-items:center;gap:var(--s3);font-size:12px;
  color:var(--invert-ink2);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.12);opacity:0}
.beleg__marke{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--paper);background:var(--accent);border-radius:99px;padding:3px 9px}
@media (prefers-reduced-motion: no-preference){
  .beleg__text .tz{animation-duration:8s;animation-iteration-count:infinite;animation-timing-function:steps(38,end)}
  .beleg__text .tz:nth-child(1){animation-name:bl-t1}
  .beleg__text .tz:nth-child(2){animation-name:bl-t2}
  .beleg__text .tz:nth-child(3){animation-name:bl-t3}
  .beleg__quelle{animation:bl-q 8s cubic-bezier(.2,.9,.3,1.25) infinite}
}
@keyframes bl-t1{0%,6%{max-width:0;border-color:var(--paper)}24%{max-width:100%;border-color:var(--paper)}25%,100%{max-width:100%;border-color:transparent}}
@keyframes bl-t2{0%,24%{max-width:0;border-color:transparent}25%{max-width:0;border-color:var(--paper)}43%{max-width:100%;border-color:var(--paper)}44%,100%{max-width:100%;border-color:transparent}}
@keyframes bl-t3{0%,43%{max-width:0;border-color:transparent}44%{max-width:0;border-color:var(--paper)}62%{max-width:100%;border-color:var(--paper)}63%,100%{max-width:100%;border-color:transparent}}
@keyframes bl-q{0%,66%{opacity:0;transform:translateY(8px)}74%,100%{opacity:1;transform:none}}

/* ── Werkstatt, vierte Runde ──────────────────────────────────────────────
   K Ticker, L Bento, M Editorial mit Trennkante. Angehaengt, damit oben
   nichts verrutscht, waehrend Ole die vorherigen ansieht.                */

/* K · Bekanntmachungs-Ticker */
.ticker{position:relative;z-index:1;margin-top:var(--s8);
  border-top:1px solid rgba(255,255,255,.12);padding-top:var(--s5)}
.ticker__kopf{display:flex;align-items:center;gap:var(--s3);justify-content:center;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--invert-ink2);margin-bottom:var(--s5)}
.ticker__punkt{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.ticker__fenster{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker__spur{display:flex;width:max-content;gap:var(--s5);list-style:none;margin:0;padding:0 0 var(--s7)}
.tick{display:flex;align-items:baseline;gap:var(--s4);white-space:nowrap;flex:0 0 auto;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  border-radius:10px;padding:12px var(--s5)}
.tick b{font-size:13px;font-weight:500;color:var(--paper)}
.tick span{font-size:12px;color:var(--invert-ink2)}
.tick em{font-style:normal;font-family:var(--font-mono);font-size:11px;color:var(--paper);
  border-left:1px solid rgba(255,255,255,.18);padding-left:var(--s4)}
@media (prefers-reduced-motion: no-preference){
  .ticker__spur{animation:tick-lauf 34s linear infinite}
  .ticker__punkt{animation:tick-puls 2.4s ease-in-out infinite}
}
@keyframes tick-lauf{to{transform:translateX(calc(-50% - var(--s5) / 2))}}
@keyframes tick-puls{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(21,147,90,.5)}50%{opacity:.55;box-shadow:0 0 0 6px rgba(21,147,90,0)}}

/* L · Bento */
.bento{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:900px){
  .bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(120px,auto)}
  .bt--gross{grid-column:span 4;grid-row:span 2}
}
@media (min-width:1200px){
  .bt--gross{grid-column:span 2;grid-row:span 2}
}
.bt{border:1px solid var(--rule);border-radius:14px;padding:var(--s5);background:var(--paper);
  display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s2)}
.bt--gross{justify-content:center;padding:var(--s8);gap:0}
.bt--gross h3{font-size:var(--fs-h2);font-weight:500;letter-spacing:-0.03em;line-height:1.05;
  margin-bottom:var(--s5)}
.bt__l{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:auto}
.bt b{font-size:34px;font-weight:500;letter-spacing:-0.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.bt span{font-size:var(--fs-small);color:var(--ink-2)}
.bt--dunkel{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.bt--dunkel .bt__l,.bt--dunkel span{color:var(--invert-ink2)}
.bt__ok{width:26px;height:26px;border-radius:50%;background:var(--ok);position:relative;display:block}
.bt__ok::after{content:"";position:absolute;inset:0;background:var(--paper);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.7 9 10 3.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.7 9 10 3.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat}
.bt__bal{display:block;height:4px;border-radius:2px;background:var(--surface);position:relative;overflow:hidden;margin-top:var(--s3)}
.bt__bal::after{content:"";position:absolute;inset:0;background:var(--accent);border-radius:2px;transform-origin:left;transform:scaleX(0)}
@media (prefers-reduced-motion: no-preference){
  .bt__bal::after{animation:bt-bal 6s cubic-bezier(.3,0,.2,1) infinite}
  .bt--punkte b,.bt--lesen b{animation:bt-zahl 6s steps(1) infinite}
}
@keyframes bt-bal{0%,8%{transform:scaleX(0)}62%,100%{transform:scaleX(1)}}
@keyframes bt-zahl{0%,10%{opacity:.25}22%,100%{opacity:1}}

/* M · Editorial mit Trennkante */
.wk__probe--kante{padding:0;background:var(--paper);border:1px solid var(--rule);overflow:hidden}
.kante{display:grid;grid-template-columns:1fr}
@media (min-width:1024px){.kante{grid-template-columns:1.02fr 0.98fr}}
.kante__text{padding:var(--s9) var(--s8);display:flex;flex-direction:column;justify-content:center}
.kante__label{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s5)}
.kante__text h3{font-size:var(--fs-h2);font-weight:500;letter-spacing:-0.035em;
  line-height:1.02;margin-bottom:var(--s5);text-wrap:balance}
.kante__feld{background:#101418;padding:var(--s8);display:flex;align-items:center;
  border-left:1px solid var(--rule)}
.kante__karte{background:var(--buehne);border-radius:14px;padding:var(--s5);width:100%;
  font-size:13px;line-height:1.35;color:var(--ink);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8);
  --schatten:0 1px 2px rgba(20,24,29,.04),0 10px 28px -14px rgba(20,24,29,.14);
  --m-haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.7 9 10 3.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.kante__karte .krit{padding:0;box-shadow:none;background:transparent;margin-top:var(--s4)}
.kante__karte .krit i{background:var(--ok)}
.kante__karte .krit i::after{opacity:1}

/* ── Lesen, die fuenfte Stufe ─────────────────────────────────────────────
   Aus Hero H uebernommen, aber hell: die Funde sind runde weisse Kaesten
   ohne Akzentkante, damit sie auf der hellen Buehne ruhig stehen.        */

.mock--lesen .szene{max-width:none}
.lgr{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@container (min-width:520px){.lgr{grid-template-columns:0.92fr 1.08fr;align-items:start}}
.lseite{position:relative;overflow:hidden;background:var(--paper);border-radius:12px;
  padding:var(--s5);box-shadow:var(--schatten)}
.lz{display:block;height:5px;width:var(--w);border-radius:3px;background:var(--surface);margin-bottom:7px}
.lz:last-of-type{margin-bottom:0}
.lscan{position:absolute;left:0;right:0;height:56px;pointer-events:none;top:-56px;
  background:linear-gradient(180deg,transparent,rgba(26,63,100,.10) 62%,transparent);
  border-bottom:1px solid rgba(26,63,100,.35)}
.lfund{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}
.lfund li{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  background:var(--paper);border-radius:99px;padding:11px var(--s5);
  box-shadow:var(--schatten);opacity:0}
.lfund b{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lfund span{font-family:var(--font-mono);font-size:11px;color:var(--ink-2);white-space:nowrap}

@media (prefers-reduced-motion: no-preference){
  .lscan{animation-name:ls-scan;animation-timing-function:linear}
  .lfund li{animation-timing-function:cubic-bezier(.2,.9,.3,1.2)}
  .lfund li:nth-child(1){animation-name:ls-f1}
  .lfund li:nth-child(2){animation-name:ls-f2}
  .lfund li:nth-child(3){animation-name:ls-f3}
  .lfund li:nth-child(4){animation-name:ls-f4}
  .mock--lesen .cap .w1{animation-name:ls-c1;animation-timing-function:steps(1)}
  .mock--lesen .cap .w2{animation-name:ls-c2}
}
@keyframes ls-scan{0%,3%{top:-56px;opacity:0}5%{opacity:1}52%{top:100%;opacity:1}54%,100%{opacity:0;top:100%}}
@keyframes ls-f1{0%,12%{opacity:0;transform:scale(.94) translateY(6px)}17%,100%{opacity:1;transform:none}}
@keyframes ls-f2{0%,24%{opacity:0;transform:scale(.94) translateY(6px)}29%,100%{opacity:1;transform:none}}
@keyframes ls-f3{0%,36%{opacity:0;transform:scale(.94) translateY(6px)}41%,100%{opacity:1;transform:none}}
@keyframes ls-f4{0%,48%{opacity:0;transform:scale(.94) translateY(6px)}53%,100%{opacity:1;transform:none}}
@keyframes ls-c1{0%,53%{opacity:1}54%,100%{opacity:0}}
@keyframes ls-c2{0%,53.5%{opacity:0;transform:translateY(5px)}57%,100%{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.lfund li{opacity:1}}

/* Der Balken links laeuft mit der Zeit mit, wie bei Uplane: man sieht, wann
   umgeschaltet wird. Die Dauer muss zu dem Takt in script.js passen. */
/* Die Fuellung laeuft ueber die Hoehe statt ueber scaleY, sonst wuerde der
   runde Abschluss oben und unten mitgestaucht. */
.hiw__schritt::before{content:"";position:absolute;left:0;top:var(--s2);width:3px;height:0;
  border-radius:99px;background:var(--accent);z-index:1}
@media (prefers-reduced-motion: no-preference){
  .hiw__schritt.ist-offen::before{animation:hiw-lauf 8s linear forwards}
}
@media (prefers-reduced-motion: reduce){
  .hiw__schritt.ist-offen::before{height:calc(100% - 2 * var(--s2))}
}
@keyframes hiw-lauf{from{height:0}to{height:calc(100% - 2 * var(--s2))}}

/* Gespiegelte Bauform: Texte links, Buehne rechts. Nur die Reihenfolge
   der beiden Spalten dreht sich, sonst nichts. */
@media (min-width:1024px){
  .hiw--gedreht{grid-template-columns:minmax(0,0.92fr) minmax(0,1fr)}
  .hiw--gedreht .hiw__buehne{order:2}
  .hiw--gedreht .hiw__liste{order:1}
}


/* ── Zusammenarbeit, Feinschliff ──────────────────────────────────────────
   Die Akzentseite ist die linke: dort steht, was wir abnehmen. Sie traegt
   den Akzentpunkt, die rechte den grauen.                                */
.teilung__seite .teilung__wer{color:var(--accent)}
.teilung__schluss{max-width:var(--w-lese);margin-inline:auto}
.teilung__knopf{margin-top:var(--s6);text-align:center}

/* ── Plattform: Buehne vom Grund abheben und auf Texthoehe bringen ────────
   Vorher war die Buehne #FAFAFA auf weissem Grund, also praktisch unsichtbar,
   und halb so hoch wie die Spalte daneben.                               */
@media (min-width:1024px){
  .hiw{align-items:stretch}
  /* :not([hidden]), sonst schlaegt display:flex das hidden der ausgeblendeten
     Buehnen und alle fuenf liegen untereinander. */
  .hiw__bild:not([hidden]){height:100%;display:flex;align-items:center}
  /* height statt aspect-ratio: sonst ist die Box nur breite mal 0,8 hoch
     und damit kuerzer als die Textspalte daneben. */
  .hiw__bild .mock{width:100%;height:100%;aspect-ratio:auto}
}
/* Die Buehne bleibt kleiner als die Spalte und steht mittig darin, ohne
   zusaetzliche Kante. Der Ton hebt sie genug vom weissen Grund ab. */
/* Weniger Grau: fast weiss, dafuer ein weicher Schatten als Abgrenzung.
   Vorher --surface (#F4F4F5), das war zu kraeftig. */
.hiw__bild .mock{background:var(--buehne)}

/* ── Zusammenarbeit, in der Sprache des Plattform-Blocks ──────────────────
   Kein Mono, keine runden Punkte: die Zeilen tragen denselben schlanken,
   abgerundeten Stab wie die Stufen im Plattform-Block. Die runden Kaesten
   bleiben.                                                              */
.teilung__wer{font-size:var(--fs-intro);font-weight:500;letter-spacing:-0.015em;
  text-transform:none;color:var(--ink);margin-bottom:var(--s5)}
.teilung__seite .teilung__wer{color:var(--ink)}
.teilung__seite--sie .teilung__wer{color:var(--ink)}
.teilung__seite li{position:relative;padding-left:var(--s5);color:var(--ink-2);
  font-size:var(--fs-small);line-height:1.6}
/* Feste Laenge: vorher lief der Strich ueber die ganze Zeile, dadurch waren
   die Striche je nach Textlaenge unterschiedlich lang. */
.teilung__seite li::before{content:"";position:absolute;left:0;top:0.32em;bottom:auto;
  width:3px;height:1.05em;border-radius:99px;background:var(--accent)}
.teilung__seite--sie li::before{background:var(--rule-strong)}
.teilung__seite ul{gap:var(--s5)}

/* Die Buehne blendet beim Wechsel auf, statt hart umzuspringen. Das hidden
   der ausgeblendeten Buehnen bleibt, die eingeblendete zieht kurz an. */

@keyframes buehne-rein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Plattform-Bühne: ein bleibender Rahmen ───────────────────────────────
   Vorher trug jede der fuenf Stufen ihre eigene Box. Beim Umschalten
   verschwand die eine und die naechste erschien, das war das Ruckeln.
   Jetzt gibt es genau einen Rahmen, der stehen bleibt, und nur die Ansicht
   darin wechselt. Masse nach Uplane vermessen: Radius 16, kein Schatten. */

.hiw__rahmen{position:relative;background:var(--buehne);border-radius:16px;overflow:hidden;
  border:1px solid var(--rule);
  min-height:clamp(420px,44vw,620px);height:100%}
.hiw__rahmen .hiw__bild{position:absolute;inset:0;container-type:inline-size}
.hiw__rahmen .mock{background:transparent;border:0;border-radius:0;box-shadow:none;
  width:100%;height:100%;max-width:none;aspect-ratio:auto;margin:0}

/* Die Stufen: Stab 3 px, Radius 999, kollabiert rund 23 px hoch, 16 px Luecke.
   Dafuer muss die Titelzeile eng gesetzt sein, sonst wird die Zeile zu hoch
   und die Staebe wirken gedraengt. */
.hiw__name{line-height:1.15}
.hiw__schritt::after{background:rgba(26,26,26,.12)}

@media (prefers-reduced-motion: no-preference){
  /* Nur die Ansicht blendet, der Rahmen bleibt ruhig stehen. */
  .hiw__rahmen .hiw__bild:not([hidden]){animation:szene-rein .45s cubic-bezier(.33,0,.2,1)}
}
@keyframes szene-rein{from{opacity:0}to{opacity:1}}

/* anflug:start */
/* ── Hero, der Anflug ──────────────────────────────────────────────────────
   Zwoelf Dokumente fliegen herein und legen sich auf die zwoelf Quadrate der
   Acribic-Bildmarke, dann leuchten sie navy auf. Der Start des Farbwechsels
   haengt zur Haelfte am eigenen Anflug jedes Dokuments, nicht an einer festen
   Uhrzeit. Dadurch wartet kein Dokument lange grau, die zwoelf werden aber
   trotzdem dicht beieinander blau. Der Farbwechsel selbst bleibt mit 1100 ms
   langsam. Der Ablauf laeuft einmal und
   bleibt stehen. Koordinaten unveraendert aus img/favicon.svg: Kante 11.14,
   Radius 3.12, Rasterschritt 14.2857.

   Zwei bewusste Abweichungen von den Regeln oben in dieser Datei: der Radius
   der Quadrate (13.9 px) kommt aus der Marke und nicht aus
   --radius, und waehrend des Anflugs liegt eine Unschaerfe auf den
   Dokumenten. Beides gehoert zur Marke bzw. zur Bewegung, nicht zur Flaeche.

   Der weiche Rahmen .anflug blendet zu allen Seiten auf null ab, damit die
   Dokumente sich aufloesen statt an einer Kante abgeschnitten zu werden. Der
   deckende Kern liegt bei 70 Prozent des Radius, es bleiben also immer rund
   30 Prozent fuer den Auslauf. Unter 1240 px wird die Marke auf 80 Prozent
   verkleinert, sonst fuellt sie die Spalte so weit aus, dass fuer den Auslauf
   kein Platz mehr bleibt. */

@media (min-width:1000px){
  .hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:var(--s7);align-items:center}
  .hero__grid .hero__txt{max-width:none}
  /* Gemessen: "Es gibt keinen zweiten" braucht 9,94 px Breite je 1 px
     Schriftgroesse. Die Textspalte ist (100vw - 144px) / 2 breit, bei einer
     Seitenbreite ueber 1440 px bleibt sie bei 632 px stehen. Beide Grenzen
     stehen hier, damit die Zeile auf jeder Breite umbruchfrei bleibt und die
     Ueberschrift zweizeilig steht. */
  .hero__grid h1{font-size:min(var(--fs-hero), calc(4.85vw - 8px), 62px)}
  .hero__platz{position:relative;min-height:520px}
}
/* Unter 1000 px steht die Marke einspaltig unter dem Text und wird kleiner,
   damit sie samt weichem Auslauf in die Spalte passt. Die Stufen sind so
   gewaehlt, dass die halbe Markenbreite immer unter dem deckenden Kern der
   Maske bleibt (70 Prozent des Radius). */
@media (max-width:999px){
  .hero__platz{position:relative;min-height:320px;margin-top:var(--s7)}
}
/* Der Hero klemmt waagerecht ab, weil der weiche Rahmen ueber die Spalte
   hinausreicht. Sonst entsteht auf schmalen Fenstern eine Querleiste. */
.hero{overflow-x:clip}

.anflug{position:absolute;inset:-64px -48px;overflow:hidden;display:flex;
  align-items:center;justify-content:center;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,
    #000 0 70%, rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,
    #000 0 70%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.anflug__marke{position:relative;width:430px;height:240px}
@media (max-width:1239px){.anflug__marke{transform:scale(.8)}}
@media (max-width:999px){.anflug__marke{transform:scale(.72)}}
@media (max-width:768px){.anflug__marke{transform:scale(.62)}
  .hero__platz{min-height:280px}}
@media (max-width:480px){.anflug__marke{transform:scale(.5)}
  .hero__platz{min-height:230px}}
/* Ruhezustand ist die fertige Marke, damit bei reduzierter Bewegung das
   Zeichen steht statt einer leeren Flaeche. */
.anflug__marke i{position:absolute;left:var(--l);top:var(--o);
  width:49.45px;height:49.45px;border-radius:13.85px;
  background:var(--accent);border:1px solid var(--accent)}
.anflug__marke i b{position:absolute;left:16%;right:16%;top:18%;bottom:18%;
  opacity:0;background:repeating-linear-gradient(to bottom,
    var(--rule) 0 1.4px, transparent 1.4px 5.2px)}

@media (prefers-reduced-motion: no-preference){
  .anflug__marke i{animation:
    anflug 2600ms var(--d) cubic-bezier(.32,.58,.25,1) both,
    anflug-leuchtet 1100ms calc(2880ms + var(--d) * 0.5 + var(--g)) ease-out both}
  .anflug__marke i b{animation:anflug-zeilen 2600ms var(--d) linear both}
}
@keyframes anflug{
  0%{opacity:0;filter:blur(9px);border-radius:3px;
    transform:translate(var(--fx),var(--fy)) rotate(var(--dr)) scale(var(--sx),var(--sy))}
  38%{opacity:1}
  52%{filter:blur(0)}
  100%{opacity:1;filter:blur(0);border-radius:13.85px;
    transform:translate(0,0) rotate(0deg) scale(1,1)}
}
@keyframes anflug-zeilen{0%{opacity:0}22%,60%{opacity:.85}88%,100%{opacity:0}}
@keyframes anflug-leuchtet{
  0%{background:var(--paper);border-color:var(--rule);
    box-shadow:0 1px 2px rgba(26,26,26,.05),0 10px 26px rgba(26,26,26,.09)}
  34%{background:var(--accent);border-color:var(--accent);
    box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 26%, transparent),
      0 0 34px color-mix(in srgb, var(--accent) 62%, transparent)}
  100%{background:var(--accent);border-color:var(--accent);
    box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent),
      0 8px 22px rgba(26,26,26,.10)}
}
/* anflug:end */

/* ── Lesen füllt den Rahmen ───────────────────────────────────────────────
   Die Ansicht sass mit 312 px in einer 524 px hohen Flaeche. Jetzt waechst
   das Raster mit, die Seite fuellt ihre Spalte, die Funde stehen mittig
   daneben.                                                              */
/* Das Dokument bleibt bei seiner natuerlichen Hoehe, sonst wirkt es
   aufgeblasen. Beide Spalten beginnen oben, damit die erkannten Anforderungen
   auf derselben Linie anfangen wie die Seite. */
.mock--lesen .szene{justify-content:flex-start}
.mock--lesen .lgr{align-items:start}
.mock--lesen .lfund{justify-content:flex-start}

/* ── Hero und Nachweisband auf eine Bildschirmhöhe ────────────────────────
   Oben auf der Seite sollen die Zeichen zu sehen sein, der Satz darunter
   aber erst nach dem Scrollen. Weil das von der Fensterhöhe abhängt, wächst
   der Hero mit: er nimmt, was nach Navigation, Bandabstand und Bandhöhe
   übrig bleibt. 156 px sind Bandpolster (48) plus Bandhöhe (96) plus etwas
   Luft (12). Der Inhalt steht mittig darin, sonst klaffte unten eine Lücke. */
@media (min-width:768px){
  .hero{padding-block:var(--s7);
    /* Rechnung: Navigation 73 + Hero + Bandabstand 24 + Bandhoehe 96 muss
       unter die Kante passen, der Satz darunter (+48) aber darueber liegen.
       Daraus folgt ein Fenster von H-241 bis H-201 fuer die Hero-Hoehe,
       220 liegt sauber darin. */
    min-height:calc(100svh - 220px);
    display:flex;align-items:center}
  .hero > .wrap{width:100%}
}
.nachweisband{padding-block:var(--s5) var(--s9)}

/* Hinweisstreifen der Entwurfskopie unter /entwurf/. */
.entwurfsband{position:sticky;top:var(--h-nav);z-index:40;margin:0;
  background:var(--accent);color:var(--paper);text-align:center;
  padding:10px var(--s5);font-size:var(--fs-small)}
.entwurfsband a{color:var(--paper)}

/* ── Nur für den Entwurf unter /entwurf/ ──────────────────────────────────
   Zwei Muster von Uplane, auf uns übertragen: das Kartenpaar aus "Two ways
   to work with us" und der Ressourcen-Block mit einem Hauptstück und einer
   Liste daneben. Alle Klassen mit ew- vorangestellt, damit sie der
   Startseite nicht in die Quere kommen.                                  */

.ew-paar{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media (min-width:900px){.ew-paar{grid-template-columns:1fr 1fr;gap:var(--s6)}}
.ew-karte{border:1px solid var(--rule);border-radius:16px;padding:var(--s7);
  background:var(--paper);display:flex;flex-direction:column}
.ew-karte__oben{display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:var(--s6);font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-2)}
.ew-karte__oben em{font-style:normal;color:var(--accent)}
.ew-karte h3{font-size:var(--fs-h3);font-weight:500;letter-spacing:-0.02em;
  line-height:1.2;margin-bottom:var(--s4)}
.ew-karte__lead{color:var(--ink-2);line-height:1.6;margin-bottom:var(--s6)}
.ew-karte ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s4)}
.ew-karte li{position:relative;padding-left:var(--s5);font-size:var(--fs-small);
  line-height:1.55;color:var(--ink-2)}
.ew-karte li::before{content:"";position:absolute;left:0;top:0.38em;width:3px;height:1.05em;
  border-radius:99px;background:var(--accent)}
.ew-karte--sie li::before{background:var(--rule-strong)}
.ew-karte--sie .ew-karte__oben em{color:var(--ink-2)}

.ew-lesestoff{display:grid;gap:var(--s6);grid-template-columns:1fr}
.ew-haupt{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--rule);border-radius:16px;padding:var(--s7);background:var(--buehne)}
.ew-haupt__marke{font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--s5)}
.ew-haupt h3{font-size:var(--fs-h3);font-weight:500;letter-spacing:-0.02em;margin-bottom:var(--s4)}
.ew-haupt p{color:var(--ink-2);line-height:1.6;margin-bottom:var(--s6)}
.ew-mehr{font-size:var(--fs-small);color:var(--accent)}
/* Uplane setzt ueber den Text ein Titelbild. Wir haben keines und wollen auch
   kein Symbolbild erfinden, deshalb bleibt die obere Haelfte des Feldes leer und
   der Text sitzt unten, wie bei den Karten in "Wo wir arbeiten".            */
@media (min-width:960px){
  .ew-lesestoff{grid-template-columns:0.95fr 1.05fr;gap:var(--s8)}
  .ew-haupt{justify-content:flex-end}
}
.ew-liste{list-style:none;margin:0;padding:0}
.ew-liste>li{border-top:1px solid var(--rule)}
.ew-liste>li:first-child{border-top:0}
.ew-liste a{display:block;text-decoration:none;color:inherit;padding-block:var(--s5)}
.ew-liste__marke{display:block;font-family:var(--font-mono);font-size:11px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s2)}
.ew-liste b{display:block;font-size:var(--fs-intro);font-weight:500;letter-spacing:-0.015em;
  line-height:1.25;margin-bottom:var(--s2)}
.ew-liste__txt{display:block;color:var(--ink-2);font-size:var(--fs-small);line-height:1.55}
.ew-liste__alle a{color:var(--accent);font-size:var(--fs-small)}
@media (prefers-reduced-motion: no-preference){
  .ew-haupt,.ew-liste a{transition:border-color .18s linear,transform .3s cubic-bezier(.2,.7,.3,1)}
  .ew-haupt:hover{border-color:var(--ink);transform:translateY(-3px)}
  .ew-liste a:hover b{color:var(--accent)}
}

/* ================================ entwurf.css ================================ */
/* entwurf.css: Aufsatz fuer die Entwurfsseite /entwurf/.
   Wird nach /style.css geladen und ueberschreibt nur, was der Entwurf anders
   macht. style.css bleibt unangetastet, die Startseite aendert sich nicht.
   Runde 1: Tokens und Schrift, Knoepfe, Hero-Endfarbe, "Fuer wen" und der
   Engpass auf dunklem Grund. */

/* ── Tokens ──────────────────────────────────────────────────────────────
   --tief, --akzent-hell, --schatten und --m-haken kommen aus style.css und
   werden hier nicht neu gesetzt. Hex-Werte stehen nur in der :root-Zeile. */
/* Die Buehne hinter den Produktbildern, drei feste Stufen von oben links nach
   unten rechts. Erste und zweite Stufe sind die Marken-Toene aus style.css
   (--tief und --accent), die dritte gibt der unteren Ecke Licht.
     160deg
       0 %   #0F2740   tiefes Navy, identisch mit --tief
      55 %   #1A3F64   Markenblau, identisch mit --accent
     100 %   #2B6BAC   helles Blau
   Einzeln benannt, damit die Stufen zitierbar sind (Rahmen, Schatten, Icons)
   und niemand den Verlauf irgendwo per Hand nachbaut. */
:root{--warm:#F4F1EA;--warm-rule:#E4DFD4;
  --buehne-1:#122F4C; --buehne-2:#1A3F64; --buehne-3:#2B6BAC;
  --buehne-tief:linear-gradient(160deg, var(--buehne-1) 0%, var(--buehne-2) 55%, var(--buehne-3) 100%);
  /* --marke-verlauf bekommt einen eigenen Wert statt des Alias auf --buehne-tief:
     dessen erste 55 Prozent liegen zwischen zwei fast gleichen Navytoenen, ueber
     zwoelf kleine, getrennte Kacheln bleibt davon kaum Unterschied sichtbar.
     Reine Enden und eine steilere Mitte machen den Verlauf ueber die Kacheln
     hinweg lesbar. --buehne-tief bleibt bei 0/55/100, weil Baender und Schluss
     unveraendert daran haengen. */
  --marke-verlauf:linear-gradient(160deg,
    var(--buehne-1) 0%, var(--buehne-1) 12%,
    var(--buehne-2) 50%,
    var(--buehne-3) 88%, var(--buehne-3) 100%);
  --font-display:"Instrument Serif", Georgia, serif}

/* ── Schrift ─────────────────────────────────────────────────────────────
   Instrument Serif fuer H1, H2 und die grossen Zahlen. Die Datei
   /fonts/Instrument-Serif-Regular.woff2 liegt noch nicht im Repo, und aus
   dem Google-Fonts-CDN wird sie nicht geladen (CLAUDE.md, Datenschutz).
   Das ist Absicht: solange die Datei fehlt, faellt der Browser auf Georgia
   zurueck. Sobald jemand die woff2 dorthin legt, greift sie ohne weitere
   Aenderung an dieser Datei. */
@font-face{font-family:"Instrument Serif";src:url("/fonts/Instrument-Serif-Regular.woff2") format("woff2");font-weight:400;font-display:swap}

h1,h2{font-family:var(--font-display);font-weight:400;letter-spacing:-0.01em;line-height:1.05}
/* style.css setzt fuer .lg h2 und .hiw__liste h2 Gewicht 600 mit hoeherer
   Spezifitaet. Ohne diese Zeile wuerde die Serif dort kuenstlich fett
   gerechnet. Die Groessen bleiben die aus style.css. */
.lg h2,.hiw__liste h2{font-weight:400;letter-spacing:-0.01em;line-height:1.05}
.lgc__wert{font-family:var(--font-display)}

/* ── Knoepfe ─────────────────────────────────────────────────────────────
   Kein Navy mehr auf Knoepfen: Primaer ist Schwarz, beim Darueberfahren
   Tief. Auf dunklem Grund (.band--tief) ist er Weiss mit Text in Tief und
   bleibt beim Darueberfahren so, sonst verschwaende er im Grund. */
.btn--pri{background-color:var(--buehne-2);background-image:var(--buehne-tief);color:var(--paper);
  border:0;
  transition:filter .2s ease}
.btn--pri:hover{background-color:var(--buehne-2);background-image:var(--buehne-tief);filter:brightness(1.22)}
.btn--pri:active{filter:brightness(0.96)}
.band--tief .btn--pri,.band--tief .btn--pri:hover{background:var(--paper);color:var(--tief);border:0}

/* Der Hero steht fuer sich: er nimmt die Bildschirmhoehe abzueglich der
   Navigation ein und zentriert seinen Inhalt darin. Grid statt Flex, damit
   .wrap seine volle Breite behaelt. Auf kleinen Schirmen waechst er ueber die
   Mindesthoehe hinaus, der Inhalt wird also nie beschnitten. */
.hero{display:grid;align-content:center;min-height:calc(100svh - var(--h-nav));
  padding-block:var(--s9)}

/* Der Hero liefert die Luft darueber schon (min-height und eigenes Polster),
   --s12 hier obendrauf war ein doppeltes Polster. --s8 haelt weiterhin Abstand
   zum Hero, ohne ihn zu verdoppeln. style.css setzt hier --s7 (48 px). */
#ablauf{padding-top:var(--s8)}

/* ── Hero-Endfarbe ───────────────────────────────────────────────────────
   Die zwoelf Kacheln enden in --marke-verlauf statt in Schwarz: ein
   Verlauf ueber die ganze Marke (430 x 240px), nicht zwoelfmal derselbe
   kleine Verlauf. background-size traegt deshalb die volle Markengroesse,
   background-position verschiebt je Kachel um ihre eigene Position aus
   --l/--o, sodass alle zwoelf Fenster in dasselbe grosse Bild zusammen
   ein durchgehendes Ganzes ergeben. Dieselben Keyframes wie in style.css,
   die spaetere Definition hier gewinnt. Die Zwischenfarbe im Flug (Weiss
   mit hellem Rahmen bei 0 %, Akzent-Blitz bei 34 %) bleibt unveraendert. */
.anflug__marke i{background-image:var(--marke-verlauf);background-size:430px 240px;
  background-position:calc(-1 * var(--l)) calc(-1 * var(--o));border-color:var(--ink)}
/* Im Flug bleiben es weisse Dokumente, daran aendert sich nichts. Erst beim
   Ankommen leuchtet die Kachel auf, und zwar im Marken-Verlauf statt im frueheren
   Kobaltblau (--akzent-hell): dieselben drei Stufen, nur kurz heller gedreht und
   mit einem Schein in der hellsten Stufe. Danach steht sie im Verlauf. */
/* Nachgetragen am 11.09.2026: das Aufleuchten wirkte eckig, sprunghaft und
   zu grell. Drei Ursachen, drei Aenderungen:
   - Eckig: die Haelfte des Scheins war ein harter Ring (0 0 0 6px, ohne
     Unschaerfe). Der zeichnet die Kachelkontur nur groesser nach, das liest
     sich als helles Viereck. Jetzt nur noch weiche Schatten mit negativer
     Streuung: die Form wird vor dem Weichzeichnen verkleinert, dadurch wird
     der Schein rund statt kachelfoermig.
   - Sprunghaft: ease-out gilt je Keyframe-Abschnitt, der Schein fiel also
     direkt nach dem Hoehepunkt am schnellsten ab. Jetzt laeuft jeder
     Abschnitt weich an und weich aus, das Ganze 1,4 s statt 1,1 s.
   - Zu grell: brightness 1,5 auf 1,15, der Schein von 62 % auf 34 %.
   In allen drei Stufen stehen gleich viele Schattenebenen (zwei), sonst
   springen die Schatten beim Uebergang, statt zu gleiten. */
@keyframes anflug-leuchtet{
  0%{background:var(--paper);border-color:var(--rule);filter:brightness(1);
    box-shadow:0 1px 2px rgba(26,26,26,.05),0 10px 26px rgba(26,26,26,.09)}
  40%{background-image:var(--marke-verlauf);background-size:430px 240px;
    background-position:calc(-1 * var(--l)) calc(-1 * var(--o));
    border-color:color-mix(in srgb, var(--buehne-3) 45%, var(--ink));
    filter:brightness(1.15) saturate(1.03);
    box-shadow:0 0 34px -6px color-mix(in srgb, var(--buehne-3) 34%, transparent),
      0 0 64px -14px color-mix(in srgb, var(--buehne-3) 18%, transparent)}
  100%{background-image:var(--marke-verlauf);background-size:430px 240px;
    background-position:calc(-1 * var(--l)) calc(-1 * var(--o));
    border-color:var(--ink);filter:brightness(1);
    box-shadow:0 0 34px -6px color-mix(in srgb, var(--buehne-3) 0%, transparent),
      0 8px 22px rgba(26,26,26,.10)}
}
@media (prefers-reduced-motion: no-preference){
  .anflug__marke i{animation:
    anflug 2600ms var(--d) cubic-bezier(.32,.58,.25,1) both,
    anflug-leuchtet 1400ms calc(2880ms + var(--d) * 0.5 + var(--g)) cubic-bezier(.45,0,.55,1) both}
}

/* ── Engpass auf dunklem Grund ───────────────────────────────────────────
   Volle Breite in Tief, der Inhalt haelt .wrap. Oben eine harte Kante
   Weiss auf Tief, kein Verlauf. Die Zahl steht, sie zaehlt nicht hoch; die
   drei Punkte behalten ihr data-zeigt aus style.css und script.js. */
/* Alle blauen Flaechen tragen den Verlauf, nicht mehr die flache Farbe. Als
   Rueckfall bleibt --buehne-2 als background-color stehen, falls ein Browser
   das Verlaufsbild nicht laedt. */
.band--tief{background-color:var(--buehne-2);background-image:var(--buehne-tief);
  color:var(--paper);padding-block:var(--s10)}
.band--tief h2,.band--tief h3,.band--tief .lgc__wert{color:var(--paper)}
.band--tief .lg__kicker,.band--tief .lg p.lg__txt,.band--tief .lgc__bu,.band--tief .lgc__quelle{color:var(--invert-ink2)}
.band--tief .lg{--lg-linie:var(--invert-rule)}
.band--tief .lgc__wert{font-size:var(--fs-zahl)}
.lgc__quelle{font-family:var(--font-mono);font-size:12px;line-height:1.5;margin-top:var(--s3)}

/* ── Engpass, gestaffelt ─────────────────────────────────────────────────
   Analog zu .sicher>li in style.css: die drei Punkte ziehen beim
   Hereinscrollen nicht gleichzeitig auf, sondern nacheinander. */
@media (prefers-reduced-motion: no-preference){
  .takt [data-zeigt]{transform:translateY(24px);transition-duration:.5s}
  .takt .lgc__liste>li:nth-child(2){transition-delay:.08s}
  .takt .lgc__liste>li:nth-child(3){transition-delay:.16s}
}

/* ── Fragen, zwei Spalten ────────────────────────────────────────────────
   Bricht das Muster "zentrierter Kopf plus Liste darunter", das die Seite
   sonst dreimal wiederholt: Ab 900 px steht die Frage links und bleibt
   beim Scrollen stehen, rechts liegen die sechs Aufklapper. Darunter
   untereinander, ohne sticky. */
.faq__layout{display:grid;grid-template-columns:1fr;gap:var(--s8)}
.faq__kopf .intro{margin-top:var(--s6)}
@media (min-width:900px){
  .faq__layout{grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);gap:var(--s8)}
  .faq__kopf{position:sticky;top:var(--s9);align-self:start}
}

/* ── Sicherheit, Tafel 2 × 2 ─────────────────────────────────────────────
   Vier Punkte aus /sicherheit/index.html, als Tafel mit Haarlinien statt
   als Kartenpaar. Kopf linksbuendig, damit die Seite nicht ein drittes Mal
   dieselbe zentrierte Silhouette zeigt. Keine Kaesten, keine Rahmen aussen
   herum, nur die Trennlinien zwischen den Zellen. */
.tafel{display:grid;grid-template-columns:1fr;margin-top:var(--s8)}
.tafel__zelle{padding-block:var(--s6);border-top:1px solid var(--rule)}
.tafel__zelle:first-child{border-top:0;padding-top:0}
.tafel__nr{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:0.1em;
  color:var(--ink-2);margin-bottom:var(--s4)}
.tafel__zelle h3{font-size:var(--fs-intro);font-weight:500;letter-spacing:-0.015em;
  line-height:1.3;margin-bottom:var(--s3)}
.tafel__zelle p{color:var(--ink-2);font-size:var(--fs-small);line-height:1.6}
@media (min-width:700px){
  .tafel{grid-template-columns:1fr 1fr}
  .tafel__zelle{padding:var(--s6)}
  .tafel__zelle:nth-child(-n+2){padding-top:0;border-top:0}
  .tafel__zelle:nth-child(n+3){border-top:1px solid var(--rule)}
  .tafel__zelle:nth-child(odd){padding-left:0;border-left:0}
  .tafel__zelle:nth-child(even){padding-right:0;border-left:1px solid var(--rule)}
}
/* ── Siegel linksbuendig, ohne Umlauf ──────────────────────────────────────
   Der Auftraggeber will die Zertifizierungsbilder ruhig stehen sehen statt in
   einem laufenden Band: eine Reihe, in Farbe, am linken Rand ausgerichtet.
   Loest .siegelband/.siegelband__lauf, die Maske und @keyframes siegel-lauf
   ab, dazu die doppelte Liste fuer den nahtlosen Umlauf. */
.tafel__siegel{list-style:none;margin:var(--s8) 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--s6)}
/* Groesser und in Farbe: die Siegel sind der Beleg, sie sollen gesehen werden.
   Vorher 78 px in Graustufen mit 75 Prozent Deckung, das las sich wie ein
   Fussnoten-Streifen. */
.tafel__siegel img{height:104px;width:auto;filter:none}
@media (max-width:600px){.tafel__siegel img{height:84px}}

/* Mehr Luft nach oben, seit die Siegel nicht mehr in einem schmalen Band
   laufen, sondern als offene Reihe direkt darueber stehen. */
.tafel__hinweis{font-family:var(--font-mono);font-size:var(--fs-mono);
  color:var(--ink-2);margin-top:var(--s6)}
.tafel__mehr{margin-top:var(--s7)}

.band--warm{background:var(--warm);padding-block:var(--s10)}

/* ── Schluss auf tief, ohne Foto ─────────────────────────────────────────
   Ersetzt das Platzhalter-Foto in #kontakt. Das Hintergrundmuster baut die
   zwoelf Kacheln der Bildmarke nach (Geometrie aus img/favicon.svg, auf
   900 px Breite skaliert: Kante 103,51 px, Radius 28,99 px, Rasterschritt
   132,78 px), sitzt rechts unten an und wird vom Schnitt der Sektion
   angeschnitten. Der Text steht in einem eigenen Stapelkontext darueber. */
/* Helle Stufe kommt frueher: mit --buehne-tief (0/55/100) blieb der groesste
   Teil der Flaeche dunkles Navy. Eigene Stufen 0/38/100 ziehen --buehne-3
   weiter herein, dieselben drei Marken-Farben, nur anders verteilt. */
#kontakt{position:relative;overflow:hidden;background-color:var(--buehne-2);
  background-image:linear-gradient(160deg, var(--buehne-1) 0%,
    var(--buehne-2) 38%, var(--buehne-3) 100%);
  min-height:520px;display:flex;align-items:center;padding-block:var(--s9)}
.schluss__muster{position:absolute;z-index:0;right:-60px;bottom:-40px;
  width:900px;height:502px;pointer-events:none}
.schluss__muster i{position:absolute;display:block;
  width:103.51px;height:103.51px;border-radius:28.99px;
  background:var(--akzent-hell);opacity:.14}
.schluss__muster i:nth-child(1){left:398.24px;top:0}
.schluss__muster i:nth-child(2){left:265.47px;top:132.78px}
.schluss__muster i:nth-child(3){left:398.24px;top:132.78px}
.schluss__muster i:nth-child(4){left:530.93px;top:132.78px}
.schluss__muster i:nth-child(5){left:132.78px;top:265.47px}
.schluss__muster i:nth-child(6){left:265.47px;top:265.47px}
.schluss__muster i:nth-child(7){left:530.93px;top:265.47px}
.schluss__muster i:nth-child(8){left:663.71px;top:265.47px}
.schluss__muster i:nth-child(9){left:0;top:398.24px}
.schluss__muster i:nth-child(10){left:132.78px;top:398.24px}
.schluss__muster i:nth-child(11){left:663.71px;top:398.24px}
.schluss__muster i:nth-child(12){left:796.49px;top:398.24px}
#kontakt .cta__inhalt{position:relative;z-index:1}
.schluss__satz{color:var(--invert-ink2);font-size:var(--fs-intro);
  line-height:1.5;max-width:40ch}

/* ── Was sich aendert, Panels randlos ────────────────────────────────────
   .panels und .panel kommen aus panel.css. Alle drei Panels tragen hier
   panel--weiss statt des Wechsels mit panel--warm, und die Sektion selbst
   hat keinen eigenen Grund mehr. border:none, border-radius:0 und
   padding-inline:0 nehmen ihnen deshalb die Kartenform aus panel.css: sie
   stehen randlos und ohne Rundung im weissen Seitengrund.
   Die Seitenverteilung der Kachel laeuft hier ueber die Position im
   Raster und nicht ueber die Farbklasse. panel--weiss muss auf allen drei
   Panels bleiben, weil sie bei Panel 2 den blauen Verlauf auf die Kachel
   legt, aber panel.css setzt ab 960px fuer jedes panel--weiss-Panel die
   Regel .panel__kachel{order:-1}. Ohne eine Gegenregel staenden dadurch
   alle drei Kacheln links, weil alle drei Panels dieselbe Farbklasse
   tragen. Panel 1 und Panel 3 setzen order deshalb hier gezielt auf den
   Normalwert zurueck, der Anker #aenderung liefert dafuer mit einer ID
   mehr Spezifitaet als die Klassenregel aus panel.css. Unterhalb von
   960px greift die Regel aus panel.css nicht, dort bleibt die Reihenfolge
   unveraendert. */
/* background:transparent ergaenzt: panel--weiss (aus panel.css) gibt den drei
   Panels sonst ihr eigenes Weiss, dann stehen sie als weisse Bloecke auf der
   grauen Flaeche statt sie zu bilden. Die Klasse bleibt im Markup, sie steuert
   in Panel 02 weiterhin die dunkle Kachel (.panel--weiss .ez--zwei in
   panel.css), nur ihr eigener Hintergrund faellt hier weg. */
#aenderung .panel{border:none;border-radius:0;padding-inline:0;background:transparent}
#aenderung .panel:nth-child(2) .panel__kachel{order:-1}
#aenderung .panel:nth-child(1) .panel__kachel,
#aenderung .panel:nth-child(3) .panel__kachel{order:0}

/* Fliesstext statt Heute/Mit-Acribic-Paar: ein Absatz unter dem Zitat,
   gleiche Behandlung wie .tafel__zelle p in der Sicherheits-Tafel weiter
   unten (kleiner, gedaempft), damit beide Sektionen denselben Ton fuer
   Fliesstext unter einer Ueberschrift zeigen. */
.panel__lauftext{font-size:var(--fs-small);line-height:1.6;color:var(--ink-2)}

/* Abstand zum Knopf ein zweites Mal verringert, --s5 auf --s3, derselbe
   Zug wie beim Kopfabstand oben. */
.aend__mehr{text-align:center;margin-top:var(--s3)}

/* ── Kopfabstand und Auslauf am Blockende verringert ─────────────────────
   Panel 01 sass zu tief unter dem Kopf: padding-top kam bislang unveraendert
   aus panel.css (--s9) und sinkt hier wie der Bodenwert auf --s7.
   Beim Auslauf stapelten sich nach dem dritten Panel drei Polster zu einem
   zu langen Weg: das Bodenpolster von .panels, der margin-top von
   .aend__mehr und das Bodenpolster von .band selbst. Hier sinkt nur der
   jeweils untere Wert auf die halbe Sprosse der Token-Skala, der Abstand
   zwischen den Panels (.panels gap) bleibt unberuehrt. */
#aenderung .panels{padding-top:var(--s7);padding-bottom:var(--s7)}

/* 15.09.2026, korrigiert: "ein gutes Stueck hoeher, da ist gerade deutlich zu
   viel White Space" (Ole). Der erste Anlauf hatte den Block hoeher GEBAUT
   (--s11/--s9), gemeint war hoeher GERUECKT, also weniger Leerraum. Jetzt
   --s9/--s8, also 96 oben und 64 unten statt der urspruenglichen 128/64.
   Dazu faellt das Bodenpolster von .panels weg und die Panels selbst geben
   je eine Sprosse ab (siehe unten). Zusammen rund 240px weniger Leerraum. */
/* Der ganze Block rueckt weiter nach oben, naeher an den Hinweis unter den
   Siegeln: Kopfpolster von 64 auf 32. Dazu gibt #sicherheit unten eine Sprosse
   ab (sicherheit-wissen.css), zusammen stehen zwischen dem Hinweis und dieser
   Ueberschrift 128 statt 192px. */
#aenderung{padding-block:var(--s6) var(--s8)}
#aenderung .panels{padding-bottom:0}

/* Der Abstand vom Kopf zur Kachel von Panel 01 steht in abschnitte.css, die
   spaeter laedt und ihn dort schon einmal gesetzt hat. Zwei Regeln fuer
   denselben Wert waeren genau die Falle, in die ich hier gelaufen bin. */

/* Die Panels lagen bei --s8 Polster oben und unten; zwischen zwei Panels
   standen damit 64 + 48 Abstand + 64 = 176px Leerraum. Mit --s7 waren es 144,
   Ole am 15.09.2026: "nochmal ein Stueck hoeher, zu viel Whitespace
   dazwischen". Mit --s6 sind es 112. Das Sektionspolster faellt im selben Zug
   von 96 auf 64 oben. Nur ab 768px: darunter gelten die kleineren Polster aus
   panel.css und die Mobile-Regeln aus mobil.css, die bleiben unberuehrt. */
@media (min-width:768px){
  #aenderung .panel{padding-block:var(--s6)}
}

/* ── Ganze Sektion grau ────────────────────────────────────────────────────
   Vorher lag das Grau auf .panels: sichtbar wurde es nur in den schmalen
   Nahtstellen zwischen den weissen Panel-Kacheln (Kopf- und Fusspolster von
   .panels, die beiden Luecken zwischen den drei Panels), also vier duenne
   Streifen statt einer Flaeche. Jetzt traegt die Sektion selbst das Grau,
   ueber die volle Breite und auch links und rechts von .wrap, wo vorher
   Weiss stand. Loest #aenderung .panels{background;border-radius} ab. */
#aenderung{background:var(--paper)}



/* ── Referenzen ────────────────────────────────────────────────────────────
   Aufbau nach uplane.com: links das Bild im Verhaeltnis 4:3, rechts Marke,
   Zitat und Person, darunter die beiden Pfeile. Kein Schleier mehr noetig, der
   Text steht neben dem Bild statt darauf.

   Kein Wischen und kein Ziehen mit der Maus: es gibt keinen Scroll-Container,
   die drei Blaetter liegen uebereinander in derselben Rasterzelle und werden
   ein- und ausgeblendet. Weiter kommt man nur ueber die Pfeile, die Pfeiltasten
   oder von allein (siehe entwurf.js).

   ACHTUNG: Zitate und Namen sind Platzhalter, die Fotos sind Stockbilder.
   Vor dem Live-Gang durch echte, freigegebene ersetzen. */

/* Weisser Grund wie die Ablauf-Sektion darueber, ohne trennende Linie: die
   Referenzen sollen als Fortsetzung wirken, nicht als neuer Kasten. */

.ref__raster{display:grid;gap:var(--s6);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){
  .ref__raster{grid-template-columns:minmax(0,0.85fr) minmax(0,1fr);gap:var(--s9)}
}

/* Buehne: alle Bilder in einer Rasterzelle, dadurch keine absolute Positionierung
   und die Hoehe ergibt sich aus dem Verhaeltnis. */
/* clip statt hidden: hidden liesse sich per Skript noch verschieben, clip nicht.
   Fuer aeltere Browser bleibt hidden als Rueckfallwert davor stehen. */
.ref__buehne{display:grid;aspect-ratio:4/3;border-radius:var(--radius);
  overflow:hidden;overflow:clip;background:var(--surface)}
.ref__bild{grid-area:1/1;width:100%;height:100%;object-fit:cover;opacity:0}
.ref__bild[data-aktiv]{opacity:1}

.ref__spalte{display:flex;flex-direction:column;gap:var(--s6);align-items:flex-start}
.ref__blaetter{display:grid;width:100%}
.ref__blatt{grid-area:1/1;margin:0;opacity:0;pointer-events:none}
.ref__blatt[data-aktiv]{opacity:1;pointer-events:auto}

/* Kundenlogo. Die drei haben sehr unterschiedliche Verhaeltnisse (Cledion ist ein
   breiter Schriftzug, Product Studio CODE steht dreizeilig), deshalb begrenzen
   Hoehe UND Breite, statt eine feste Groesse zu erzwingen. */
.ref__marke{margin:0 0 var(--s5);display:flex;align-items:center;min-height:58px}
.ref__marke img{max-height:56px;max-width:200px;width:auto;height:auto;object-fit:contain}
.ref__zitat{font-family:var(--font-display);font-size:var(--fs-h2);line-height:1.18;
  letter-spacing:-0.02em;color:var(--ink);margin:0 0 var(--s5)}
.ref__wer{font-size:var(--fs-small);line-height:1.5;color:var(--ink-2)}

/* Pfeile ohne Kasten: nur das Symbol. Die Flaeche von 44 px bleibt als
   Trefferflaeche stehen (Finger, Maus), sichtbar ist nur der Pfeil. Die Reihe
   haengt 12 px nach links, damit die Pfeilspitze auf der Textkante steht und
   nicht um das halbe Innenpolster eingerueckt wirkt. */
.ref__steuer{display:flex;align-items:center;gap:var(--s2);margin-left:-12px}
.ref__pfeil{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--ink);transition:color .2s ease,transform .2s ease}
.ref__pfeil svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.ref__pfeil:hover:not(:disabled){color:var(--accent)}
.ref__pfeil[data-ref="weiter"]:hover:not(:disabled){transform:translateX(3px)}
.ref__pfeil[data-ref="zurueck"]:hover:not(:disabled){transform:translateX(-3px)}
.ref__pfeil:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius)}
.ref__pfeil:disabled{opacity:.3;cursor:default}

/* Wechsel: Bild blendet ueber und zoomt eine Spur heraus, der Text zieht leicht
   nach. Nur opacity und transform. */
@media (prefers-reduced-motion: no-preference){
  .ref__bild{transform:scale(1.04);
    transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform 1.4s cubic-bezier(.2,.7,.3,1)}
  .ref__bild[data-aktiv]{transform:none}
  .ref__blatt{transform:translateY(8px);
    transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1)}
  .ref__blatt[data-aktiv]{transform:none}
}


/* ── Sprungmarken und ruhiges Akkordeon ───────────────────────────────────
   Nachgetragen am 10.09.2026.

   1. Die Navigation klebt oben und ist 73 px hoch. Ohne scroll-margin-top
      landet eine Sprungmarke unter der Leiste und die Ueberschrift ist weg. */
:target,#ablauf,#referenzen,#sicherheit,#fragen,#kontakt{scroll-margin-top:calc(var(--h-nav) + var(--s5))}

/* 2. Umschalten wie bei Uplane, dort nachgemessen am 11.09.2026: die
      Beschreibung klappt ueber ihre echte Hoehe auf, 0,56 s mit
      cubic-bezier(.65,0,.35,1), die alte klappt im selben Takt zu, der
      Titel wechselt die Farbe in 0,42 s.
      Vorher lief das ueber max-height bis 8em, also auf eine feste
      Obergrenze statt auf die echte Hoehe. Die Bewegung setzte dadurch zu
      schnell ein und endete abrupt, das war das "komische Umspringen".

      Die echte Hoehe laeuft ueber die Rasterzeilen (0fr auf 1fr), ohne
      Skript. Der innere Span traegt die Mindesthoehe von drei Zeilen, damit
      jede Stufe am Ende gleich hoch ist und nichts darunter verrutscht; er
      sitzt innen, damit die Mindesthoehe beim Zuklappen nicht auf einen
      Schlag wegfaellt. Die ::before- und ::after-Linien sind absolut
      positioniert und belegen deshalb keine Rasterzeile. */
.hiw__schritt{display:grid;grid-template-rows:auto 0fr}
.hiw__schritt.ist-offen{grid-template-rows:auto 1fr}
.hiw__text,.hiw__schritt.ist-offen .hiw__text{max-height:none;min-height:0;margin-top:0;overflow:hidden}
.hiw__text-in{display:block;padding-top:var(--s3);min-height:calc(var(--s3) + 3 * 24px)}
@supports (height:1lh){.hiw__text-in{min-height:calc(var(--s3) + 3lh)}}
/* 16.09.2026: "Planen" hat einen zweiten Satz zu Bieterfragen bekommen und
   braucht unter 1280px vier Zeilen, auf dem Handy fuenf. Mit drei reservierten
   Zeilen wuchs die Liste jedes Mal, wenn "Planen" aufklappte, und alles darunter
   rutschte um eine Zeile. Die Reservierung folgt deshalb dem laengsten Schritt.
   Ab 1280px passen alle fuenf Texte weiter in drei Zeilen, nachgemessen bei
   1280 und 1440. */
@media (max-width:1279.98px){
  .hiw__text-in{min-height:calc(var(--s3) + 4 * 24px)}
  @supports (height:1lh){.hiw__text-in{min-height:calc(var(--s3) + 4lh)}}
}
@media (max-width:767.98px){
  .hiw__text-in{min-height:calc(var(--s3) + 5 * 24px)}
  @supports (height:1lh){.hiw__text-in{min-height:calc(var(--s3) + 5lh)}}
}
@media (prefers-reduced-motion: no-preference){
  .hiw__schritt{transition:grid-template-rows .56s cubic-bezier(.65,0,.35,1)}
  .hiw__text{transition:opacity .42s cubic-bezier(.33,0,.2,1)}
  .hiw__name{transition:color .42s cubic-bezier(.33,0,.2,1)}
}

/* 3. Die Buehne blendet ueber, wie bei Uplane. Dort bleibt die Karte stehen
      und nur ihr Inhalt wechselt, mit Blende und kurzer Bewegung, 0,42 s mit
      cubic-bezier(.16,1,.3,1). Bei uns lagen die fuenf Ansichten schon
      uebereinander im Rahmen, aber die ausgehende verschwand per hidden
      sofort, waehrend die neue erst einblendete: dazwischen blitzte der
      leere Rahmen. Jetzt bleibt die ausgehende sichtbar, bis sie
      ausgeblendet ist, und die beiden ueberlagern sich.

      script.js setzt weiter hidden, daran aendert sich nichts. Das Attribut
      ist hier nur noch der Zustand, nicht mehr display:none. visibility
      springt erst nach der Blende um, damit die ausgeblendete Ansicht danach
      weder angesagt noch anklickbar ist. */
.hiw__rahmen .hiw__bild[hidden]{display:block;opacity:0;visibility:hidden;
  pointer-events:none;transform:translateY(6px)}
.hiw__rahmen .hiw__bild:not([hidden]){opacity:1;visibility:visible;transform:none}
@media (min-width:1024px){
  .hiw__rahmen .hiw__bild[hidden]{display:flex;align-items:center;height:100%}
}
@media (prefers-reduced-motion: no-preference){
  .hiw__rahmen .hiw__bild:not([hidden]){animation:none;
    transition:opacity .42s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1),visibility 0s}
  .hiw__rahmen .hiw__bild[hidden]{
    transition:opacity .42s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1),visibility 0s linear .42s}
}

/* 4. Menue: die Links optisch auf die Wortmarke gesetzt, nachgemessen am
      11.09.2026. Die Wortmarke ist 22 px hoch, die Versalien der Links 11 px.
      Nach der Grundlinie sassen die Links 6,5 px zu hoch, nach der Mitte der
      Umrissbox nur 0,9 px; bei so ungleichen Groessen ist beides der falsche
      Massstab. Massgeblich ist die Mitte der x-Hoehe, weil "Acribic"
      ueberwiegend aus Kleinbuchstaben besteht: "c" und "r" beginnen bei
      29,7 px, die Mitte der x-Hoehe liegt bei 38,0 px, die der Links bei
      35,8 px. Also 2 px tiefer, als ganze Zahl, damit die Schrift scharf
      bleibt. top statt transform, damit sich am Layout nichts verschiebt. */
.nav__links{position:relative;top:2px}

/* ================================ panel.css ================================ */
/* panel.css: Aufsatz fuer den Entwurf /entwurf/warum-acribic/.
   Wird nach /style.css und /entwurf/entwurf.css geladen. Token-Quelle sind
   ausschliesslich style.css (--paper, --tief, --rule, --invert-ink2, ...)
   und entwurf.css (--warm, --warm-rule, --buehne-tief, --font-display).
   Hier stehen keine eigenen Hex-Werte, nur var(--…). */

/* ── Kopf auf dunklem Grund ──────────────────────────────────────────────
   .band--tief liefert Grund, Textfarbe und Polster (--s10) schon aus
   entwurf.css. Eyebrow und Intro haben dort aber noch keine helle Fassung,
   weil sie auf dieser Flaeche bisher nicht vorkamen: ohne die naechste
   Zeile waere Eyebrow/Intro dunkelgrau auf dunkelblau. */
.band--tief .eyebrow,.band--tief .intro{color:var(--invert-ink2)}
.band--tief .btn--ghost{border-color:var(--paper);color:var(--paper)}
.band--tief .btn--ghost:hover{background:var(--paper);color:var(--tief)}

.kopf{position:relative;overflow:hidden}
.kopf .wrap{position:relative;z-index:1}
.kopf__text{max-width:var(--w-kopf)}
.kopf__text .intro{margin-top:var(--s5);margin-bottom:var(--s7)}
.kopf__ctas{display:flex;flex-wrap:wrap;gap:var(--s4)}

/* ── Bildmarken-Muster, Kopf und Schluss ─────────────────────────────────
   Zwoelf gerundete Quadrate aus img/favicon.svg, auf ~700px Breite
   skaliert (siehe Auftrag fuer die Rechnung). Nur Flaeche, kein Verlauf,
   rein dekorativ und deshalb aria-hidden. */
.muster{position:absolute;z-index:0;opacity:.14;pointer-events:none}
.muster rect{fill:var(--akzent-hell)}
.kopf__muster{top:50%;right:0;width:min(700px,60vw);height:auto;transform:translate(50%,-50%)}
.schluss__muster{bottom:0;right:0;width:min(700px,60vw);height:auto;transform:translate(35%,35%)}

/* ── Die sieben Panels ────────────────────────────────────────────────────
   #saetze traegt keinen eigenen Grund: Zwischen den Karten und an den
   Raendern zum Kopf/zu den Zusagen bleibt die Seite weiss, die Karten
   selbst wechseln warm/weiss. So stehen nie zwei gleiche Flaechen direkt
   aufeinander. */
.panels{padding-block:var(--s9);display:grid;gap:var(--s7)}

.panel{border-radius:24px;padding:var(--s8)}
/* Bei schmalen Fensterbreiten frisst --s8 (64px) zu viel Platz vom Inhalt der Kacheln.
   Ab 700px sinkt das Polster auf --s5 (24px), ab 480px auf --s4 (16px). Der Radius
   bleibt in jeder Breite bei 24px. */
@media (max-width:700px){.panel{padding:var(--s5)}}
@media (max-width:480px){.panel{padding:var(--s4)}}
.panel--warm{background:var(--buehne)}
.panel--weiss{background:var(--paper)}

.panel__in{display:grid;grid-template-columns:1fr;gap:var(--s7)}
@media (min-width:960px){
  .panel__in{grid-template-columns:1fr 1fr;gap:var(--s9);align-items:center}
  .panel--weiss .panel__kachel{order:-1}
}

.panel__nr{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--ink-2);margin-bottom:var(--s4)}
.panel__zitat{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:400;
  line-height:1.15;letter-spacing:-0.01em;margin-bottom:var(--s6)}
.panel__absatz{font-size:var(--fs-small);line-height:1.6;color:var(--ink-2)}

/* Statuszeile oberhalb der Kachel, analog zur .cap im Plattform-Block:
   Mono, gleiche Groesse wie die Panel-Nummer, aber Bauteil der Kachel und
   deshalb daneben statt darueber im Grid platziert. */
.panel__cap{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--ink-2);
  margin-bottom:var(--s3)}

/* Kachel auf warmem Panel bleibt weiss: .wa-ansicht faellt sonst auf das
   fast identische --buehne zurueck, hier ausdruecklich --paper. */
.panel--warm .wa-ansicht{background:var(--paper)}

/* Kachel auf weissem Panel: Panel und Kachel duerfen nie denselben Grund
   haben, also wird die Kachel dunkel (--buehne-tief) und ihr Inhalt hell.
   Die vorhandenen .wa-Klassen liefern dafuer keine eigene Fassung, sie sind
   fuer Text auf hellem Grund gebaut: jede Zeile hier ersetzt genau die
   Farbe, die auf --buehne-tief sonst unlesbar waere. */
.panel--weiss .wa-ansicht{background:var(--buehne-tief);border-color:var(--invert-rule)}
.panel--weiss .wa-karte{background:var(--tief);border-color:var(--invert-rule);box-shadow:none}
.panel--weiss .wa-tit{color:var(--paper)}
.panel--weiss .wa-chip{color:var(--invert-ink2)}
.panel--weiss .wa-chip::before{background:var(--akzent-hell)}
.panel--weiss .wa-zeilen li{border-top-color:var(--invert-rule)}
.panel--weiss .wa-zeilen b{color:var(--paper)}
.panel--weiss .wa-q{color:var(--invert-ink2)}
.panel--weiss .wa-zeilen li.ist-neu{background:var(--invert-rule)}
.panel--weiss .wa-zeilen li.ist-neu .wa-q{color:var(--akzent-hell)}
.panel--weiss .wa-fuss{color:var(--invert-ink2);border-top-color:var(--invert-rule)}
.panel--weiss .wa-zwei .wa-pfeil{color:var(--invert-ink2)}
.panel--weiss .wa-treffer{border-top-color:var(--invert-rule)}
.panel--weiss .wa-treffer p{color:var(--paper)}
.panel--weiss .wa-marke{color:var(--invert-ink2);border-color:var(--invert-rule)}
.panel--weiss .wa-urteil{border-top-color:var(--invert-rule);color:var(--paper)}
.panel--weiss .wa-urteil::before{background:var(--akzent-hell)}
.panel--weiss .wa-haken li{border-top-color:var(--invert-rule);color:var(--invert-ink2)}
.panel--weiss .wa-haken li::before{background:var(--invert-ink2)}

/* Kacheln ez2--fuenf und ez2--sieben auf warmem Panel: beide fallen ohne
   eigene Kachelfarbe auf --buehne zurueck, das ist von --warm kaum zu
   unterscheiden. Deshalb hier ausdruecklich --paper plus ein Schatten,
   sonst verschwimmen die Flaechen. */
.panel--warm .ez2--fuenf,.panel--warm .ez2--sieben{background:var(--paper);box-shadow:var(--schatten)}

/* Kachel ez--zwei auf weissem Panel: Panel und Kachel duerfen nie denselben
   Grund haben, also wird die Karte dunkel (--tief) und ihr Inhalt hell,
   analog zu den .wa-Umfaerbungen oben. Suchfeld (.ez-such) und Fundkasten
   (.ez-treffer) bringen ihren eigenen hellen Grund mit und bleiben deshalb
   unangetastet, nur ihr Text, der sonst faelschlich Weiss von .ez-karte
   erben wuerde, geht zurueck auf dunkel. */
.panel--weiss .ez--zwei{background:var(--buehne-tief)}
/* Karte flach statt im Verlauf: Karte und Grund trugen beide --buehne-tief,
   dadurch verschwand die Kante zwischen beiden. Jetzt traegt nur der Grund
   den Verlauf, die Karte eine flache Stufe plus Haarlinie, das macht die
   Kante sichtbar. Loest die Verlauf-Karte von Piet (10.09.) ab. */
.panel--weiss .ez--zwei .ez-karte{background-color:var(--buehne-1);background-image:none;
  border:1px solid color-mix(in srgb, var(--buehne-3) 42%, transparent);color:var(--paper);box-shadow:none}
.panel--weiss .ez--zwei .ez-kicker{color:var(--invert-ink2)}
.panel--weiss .ez--zwei .ez-tipp{color:var(--ink)}
.panel--weiss .ez--zwei .ez-treffer p{color:var(--ink)}

/* Sprungziel des Ghost-Knopfs im Kopf: ohne das laege der erste Satz unter
   der sticky Navigation. */
#saetze{scroll-margin-top:var(--h-nav)}

/* ── Vier Zusagen ─────────────────────────────────────────────────────────
   .band liefert das Polster, .gruende/.grund/.grund__nr aus style.css
   liefern die 2x2-Tafel mit Haarlinien bereits fertig (keine Kaesten). */
.zusagen{background:var(--paper)}
.zusagen h2{margin-bottom:var(--s8)}

/* ── Schluss auf dunklem Grund ────────────────────────────────────────────
   .band--tief liefert Grund/Textfarbe/Knopffarbe, hier nur das abweichende
   Polster (--s11 statt --s10) und die Zentrierung. */
.schluss{position:relative;overflow:hidden;padding-block:var(--s11);text-align:center}
.schluss .wrap{position:relative;z-index:1}
.schluss__inner{max-width:var(--w-kopf);margin-inline:auto;display:grid;justify-items:center;gap:var(--s5)}
.schluss__zeile{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:400;
  line-height:1.15;letter-spacing:-0.01em;color:var(--paper)}
.schluss__sub{font-size:var(--fs-intro);line-height:1.5;color:var(--invert-ink2)}

/* ================================ szenen.css ================================ */
/* ==========================================================================
   Szenen: drei bewegte Produktkacheln, reines CSS.
   Gerüst je Kachel: <div class="mock ez ez--eins" aria-hidden="true">
   Ein Takt: 8 s, unendlich, 1 s = 12,5 %. Jeder Zustand steht als absoluter
   Prozentwert im Keyframe-Block, Versatz nie über eine Verzögerung. Pseudoelemente
   bekommen die Dauer ausdrücklich, weil ".mock *" sie nicht trifft.
   Farben nur über var(). Die Tokens --warm, --warm-rule und --buehne-tief
   kommen aus entwurf/entwurf.css.
   ========================================================================== */

/* ── Gemeinsames ─────────────────────────────────────────────────────── */
.mock.ez{aspect-ratio:4/3;container-type:inline-size}
.ez-szene{position:absolute;inset:var(--ez-rand);--ez-rand:var(--s6);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s4)}
.ez-mono{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;color:var(--ink-2)}
/* .mock ul setzt padding:0 und schlägt eine einzelne Klasse, daher .mock .ez-liste */
.mock .ez-liste{list-style:none;margin:0;padding:0}
.ez-chip{display:inline-block;font-size:11px;font-weight:500;line-height:1;color:var(--ink-2);
  background:var(--surface);border-radius:99px;padding:6px 10px;white-space:nowrap}
.ez-chip--ok{background:var(--ok-flaeche);color:var(--ok-tief)}
.ez-chip--quelle{background:var(--paper);color:var(--accent)}
.ez-haken{position:relative;display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.ez-haken::after{content:"";position:absolute;inset:0;background:var(--paper);
  -webkit-mask:var(--m-haken) center/9px 9px no-repeat;mask:var(--m-haken) center/9px 9px no-repeat}

/* ── Eins: Lesen mit Fundstellen ─────────────────────────────────────── */
.ez--eins{background:var(--buehne-tief);color:var(--paper)}
.ez--eins .ez-szene{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:var(--s6)}
.ez-lese{display:flex;flex-direction:column;gap:var(--s4);padding-top:14px}
.ez-stapel{position:relative;width:min(100%,160px);aspect-ratio:4/5;margin-inline:auto}
.ez-blatt{position:absolute;inset:0;background:var(--paper);border-radius:6px;box-shadow:var(--schatten)}
.ez-blatt:nth-child(1){transform:translate(12px,-12px) rotate(2.5deg)}
.ez-blatt:nth-child(2){transform:translate(6px,-6px) rotate(1.2deg)}
.ez-blatt:nth-child(3){padding:16px 14px}
.ez-blatt__titel{display:block;width:56%;height:5px;border-radius:3px;background:var(--rule-strong);margin-bottom:12px}
.ez-blatt__text{display:block;height:calc(100% - 17px);
  background:repeating-linear-gradient(to bottom,var(--rule) 0 3px,transparent 3px 11px)}
.ez-lesen{display:flex;flex-direction:column;gap:6px}
.ez-lese .ez-mono{color:var(--invert-ink2)}
.ez-balken{position:relative;height:4px;border-radius:2px;background:var(--invert-rule);overflow:hidden}
.ez-balken::after{content:"";position:absolute;inset:0;border-radius:2px;background:var(--paper);transform:scaleX(0);transform-origin:left}
.ez-funde{background:var(--paper);border-radius:12px;box-shadow:var(--schatten);color:var(--ink);padding:4px 16px 14px}
.ez-fund{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--rule);opacity:0}
.ez-fund:first-child{border-top:0}
.ez-fund::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.ez-fund b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ez-funde__fuss{padding-top:12px;border-top:1px solid var(--rule)}
.ez--eins .ez-funde__fuss{opacity:0}

/* ── Zwei: Suche in früheren Antworten ───────────────────────────────── */
.ez--zwei{background:var(--warm)}
.ez--zwei .ez-szene{justify-content:flex-start;top:calc(var(--ez-rand) + 56px)}
.ez-karte{background:var(--paper);border-radius:14px;box-shadow:var(--schatten);padding:20px 22px;color:var(--ink)}
.ez-kicker{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.ez-frage{font-size:15px;font-weight:500;line-height:1.3;margin-top:4px}
.ez-such{display:flex;align-items:center;gap:10px;height:38px;margin-top:14px;padding:0 12px;border-radius:8px;background:var(--surface)}
.ez-lupe{position:relative;width:14px;height:14px;flex:0 0 auto}
.ez-lupe::before{content:"";position:absolute;left:0;top:0;width:10px;height:10px;border:1.5px solid var(--ink-2);border-radius:50%}
.ez-lupe::after{content:"";position:absolute;left:9px;top:9px;width:6px;height:1.5px;background:var(--ink-2);transform:rotate(45deg);transform-origin:0 50%}
.ez-such__feld{display:grid;align-items:center;flex:1;min-width:0}
.ez-such__feld>*{grid-area:1/1}
.ez-such__platz{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Tippen wie .tz in style.css: max-width in Schritten, der Cursor ist der rechte Rand.
   Mono-Schrift, damit 1ch genau ein Zeichen ist und die acht Schritte auf die
   acht Zeichen von "VDE 0105" fallen. */
.ez-tipp{justify-self:start;width:max-content;max-width:0;overflow:hidden;white-space:nowrap;
  font-family:var(--font-mono);font-size:13px;line-height:1.3;border-right:1.5px solid transparent}
.ez-klapp{display:grid;grid-template-rows:0fr}
.ez-klapp__in{min-height:0;overflow:hidden}
.ez-treffer{margin-top:12px;background:var(--warm);border-radius:10px;padding:12px 14px;opacity:0}
.ez-treffer p{font-size:12.5px;line-height:1.55}
.ez-treffer__fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--warm-rule)}
.ez-uebernahme{display:inline-flex;align-items:center;gap:6px;opacity:0}
.ez-uebernahme .ez-mono{color:var(--ok-tief)}

/* ── Drei: Gewichte werden zu Kriterien ──────────────────────────────── */
.ez--drei{background:var(--buehne-tief);color:var(--paper)}
.ez-zaehler{display:grid;justify-items:start;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--paper)}
.ez-zaehler>*{grid-area:1/1;white-space:nowrap}
.ez-zaehler>:last-child{opacity:0}
.ez-matrix{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--ez-luecke);align-items:start;
  --ez-luecke:var(--s5);--ez-zeile:40px;--ez-krit:26px;
  min-height:calc(var(--ez-zeile) + 6 * var(--ez-krit) + 20px)}
.ez-gewichte{background:var(--paper);border-radius:12px;box-shadow:var(--schatten);color:var(--ink)}
.mock .ez-gewichte{padding:6px}
.ez-gewicht{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--ez-zeile);padding:0 12px;border-radius:8px}
.ez-gewicht--platz{background:transparent;border:1.5px dashed var(--rule-strong);opacity:0}
.ez-ziel{position:absolute;right:6px;top:6px;width:calc(50% - var(--ez-luecke) / 2 - 12px);min-height:var(--ez-zeile);
  border:1.5px dashed var(--invert-rule);border-radius:8px;opacity:0}
/* Zeiger und gezogene Zeile sind ein Element: .ez-zeiger liegt in .ez-zieht.
   Der Weg ist die eigene Breite plus beide Kartenpolster plus die Lücke. */
.ez-zieht{position:absolute;left:6px;top:6px;width:calc(50% - var(--ez-luecke) / 2 - 12px);z-index:2;
  background:var(--paper);border-radius:8px;color:var(--ink);
  --ez-weg:calc(100% + 12px + var(--ez-luecke));
  --ez-schatten-hoch:0 14px 30px -10px color-mix(in srgb,var(--ink) 32%,transparent)}
.ez-zieht__kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--ez-zeile);padding:0 12px}
.ez-falt{display:grid;grid-template-rows:0fr}
.mock .ez-kriterien{min-height:0;overflow:hidden;padding:0 12px}
.ez-kriterium{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--ez-krit);
  font-size:12px;border-top:1px solid var(--rule);opacity:0}
.ez-kriterium:last-child{margin-bottom:8px}
.ez-zeiger{position:absolute;left:58%;top:14px;width:16px;height:18px;opacity:0;z-index:3;
  background:url("/img/zeiger.svg") no-repeat;background-size:16px 18px;transform-origin:5px 2px}

/* ── Enge Kacheln: die Regeln hängen an der Breite der Kachel selbst ─── */
@container (max-width:520px){
  .ez-szene{--ez-rand:20px}
  .ez--eins .ez-szene{gap:var(--s4);grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
  .ez-lese{padding-top:10px}
  .ez-stapel{width:min(100%,104px)}
  .ez-blatt:nth-child(3){padding:12px 10px}
  .ez-fund{padding:8px 0}
  .ez-funde{padding:4px 12px 12px}
  .ez--zwei .ez-szene{top:calc(var(--ez-rand) + 12px)}
  .ez-karte{padding:14px 16px}
  .ez-frage{font-size:14px}
  .ez-such{height:32px;margin-top:10px}
  .ez-treffer{padding:10px 12px}
  .ez-treffer p{font-size:12px;line-height:1.45}
  .ez-matrix{--ez-luecke:var(--s4);--ez-zeile:34px;--ez-krit:23px}
  .ez-gewicht,.ez-zieht__kopf{padding:0 10px}
  .mock .ez-kriterien{padding:0 10px}
  .ez-kriterium{font-size:11.5px}
  .ez-zeiger{top:11px}
}

/* ══ Der Takt: 8 s, 1 s = 12,5 % ═══════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference){
  /* Spezifischer als ".mock *" aus style.css, sonst kämen 12 s an. */
  .mock.ez *,.mock.ez ::before,.mock.ez ::after{animation-duration:8s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.4,0,.2,1)}

  /* Eins: 0 bis 12,5 Ruhe, Balken 12,5 bis 62,5, Zeilen bei 25, 37,5 und 50,
     Chip bei 62,5, ab 92 zurück auf Anfang. Der Balken muss die volle Breite
     erreichen, bevor der Chip sichtbar wird, deshalb endet sein Lauf genau auf
     dem Prozentwert, bei dem der Chip zu erscheinen beginnt. */
  .ez--eins .ez-balken::after{animation-name:ez-e-balken}
  @keyframes ez-e-balken{
    0%,12.5%{transform:scaleX(0);opacity:1;animation-timing-function:linear}
    62.5%,92%{transform:scaleX(1);opacity:1}
    96%{transform:scaleX(1);opacity:0}
    96.5%,100%{transform:scaleX(0);opacity:0}}
  .ez-fund--1{animation-name:ez-e-fund1}
  .ez-fund--2{animation-name:ez-e-fund2}
  .ez-fund--3{animation-name:ez-e-fund3}
  @keyframes ez-e-fund1{0%,25%{opacity:0;transform:translateY(6px)}28.5%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
  @keyframes ez-e-fund2{0%,37.5%{opacity:0;transform:translateY(6px)}41%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
  @keyframes ez-e-fund3{0%,50%{opacity:0;transform:translateY(6px)}53.5%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
  .ez--eins .ez-funde__fuss{animation-name:ez-e-chip}
  @keyframes ez-e-chip{0%,62.5%{opacity:0;transform:translateY(4px)}65.5%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}

  /* Zwei: Tippen 12,5 bis 37,5, Treffer klappt auf 37,5 bis 50, Haken bei 62,5. */
  .ez--zwei .ez-such__platz{animation-name:ez-z-platz}
  @keyframes ez-z-platz{0%,12.5%{opacity:1}12.6%,96%{opacity:0}100%{opacity:1}}
  .ez--zwei .ez-tipp{animation-name:ez-z-tipp}
  @keyframes ez-z-tipp{
    0%,12.5%{max-width:0;border-color:transparent;opacity:1}
    12.6%{max-width:0;border-color:var(--ink);animation-timing-function:steps(8,end)}
    37.5%{max-width:8ch;border-color:var(--ink)}
    38.5%,92%{max-width:8ch;border-color:transparent;opacity:1}
    96%{max-width:8ch;border-color:transparent;opacity:0}
    96.5%,100%{max-width:0;border-color:transparent;opacity:0}}
  .ez--zwei .ez-klapp{animation-name:ez-z-klapp}
  @keyframes ez-z-klapp{0%,37.5%{grid-template-rows:0fr}50%,96%{grid-template-rows:1fr}96.5%,100%{grid-template-rows:0fr}}
  .ez--zwei .ez-treffer{animation-name:ez-z-treffer}
  @keyframes ez-z-treffer{0%,39%{opacity:0}48%,92%{opacity:1}96%,100%{opacity:0}}
  .ez--zwei .ez-uebernahme{animation-name:ez-z-haken}
  @keyframes ez-z-haken{0%,62.5%{opacity:0;transform:scale(.6)}65.5%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}

  /* Drei: Zeiger heran 12,5 bis 25, zieht 25 bis 43,75, Kriterien 43,75 bis 68,75,
     Zähler bei 50. */
  .ez--drei .ez-zeiger{animation-name:ez-d-zeiger}
  @keyframes ez-d-zeiger{
    0%,12.5%{opacity:0;transform:translate(150px,120px)}
    16%{opacity:1}
    25%{opacity:1;transform:none}
    26.5%{transform:scale(.86)}
    28%,46%{opacity:1;transform:none}
    52%,100%{opacity:0;transform:translate(90px,80px)}}
  .ez--drei .ez-zieht{animation-name:ez-d-zieht}
  @keyframes ez-d-zieht{
    0%,25%{opacity:1;transform:translateX(0) scale(1);box-shadow:none}
    27%{transform:translateX(0) scale(1.03);box-shadow:var(--ez-schatten-hoch);animation-timing-function:cubic-bezier(.65,.05,.3,1)}
    43.75%{transform:translateX(var(--ez-weg)) scale(1.03);box-shadow:var(--ez-schatten-hoch)}
    46%,92%{opacity:1;transform:translateX(var(--ez-weg)) scale(1);box-shadow:var(--schatten)}
    96%{opacity:0;transform:translateX(var(--ez-weg)) scale(1);box-shadow:var(--schatten)}
    96.5%{opacity:0;transform:translateX(0) scale(1);box-shadow:none}
    100%{opacity:1;transform:translateX(0) scale(1);box-shadow:none}}
  .ez--drei .ez-gewicht--platz{animation-name:ez-d-platz}
  @keyframes ez-d-platz{0%,26%{opacity:0}30%,92%{opacity:1}96%,100%{opacity:0}}
  .ez--drei .ez-ziel{animation-name:ez-d-ziel}
  @keyframes ez-d-ziel{0%,28%{opacity:0}31%,42%{opacity:1}44.5%,100%{opacity:0}}
  .ez--drei .ez-falt{animation-name:ez-d-falt}
  @keyframes ez-d-falt{0%,43.75%{grid-template-rows:0fr;animation-timing-function:linear}68.75%,96%{grid-template-rows:1fr}96.5%,100%{grid-template-rows:0fr}}
  .ez-kriterium:nth-child(1){animation-name:ez-d-k1}
  .ez-kriterium:nth-child(2){animation-name:ez-d-k2}
  .ez-kriterium:nth-child(3){animation-name:ez-d-k3}
  .ez-kriterium:nth-child(4){animation-name:ez-d-k4}
  .ez-kriterium:nth-child(5){animation-name:ez-d-k5}
  .ez-kriterium:nth-child(6){animation-name:ez-d-k6}
  @keyframes ez-d-k1{0%,43.75%{opacity:0}47.9%,92%{opacity:1}96%,100%{opacity:0}}
  @keyframes ez-d-k2{0%,47.9%{opacity:0}52.1%,92%{opacity:1}96%,100%{opacity:0}}
  @keyframes ez-d-k3{0%,52.1%{opacity:0}56.25%,92%{opacity:1}96%,100%{opacity:0}}
  @keyframes ez-d-k4{0%,56.25%{opacity:0}60.4%,92%{opacity:1}96%,100%{opacity:0}}
  @keyframes ez-d-k5{0%,60.4%{opacity:0}64.6%,92%{opacity:1}96%,100%{opacity:0}}
  @keyframes ez-d-k6{0%,64.6%{opacity:0}68.75%,92%{opacity:1}96%,100%{opacity:0}}
  .ez-zaehler>:first-child{animation-name:ez-d-zaehler-a}
  .ez-zaehler>:last-child{animation-name:ez-d-zaehler-b}
  @keyframes ez-d-zaehler-a{0%,50%{opacity:1}50.2%,96%{opacity:0}100%{opacity:1}}
  @keyframes ez-d-zaehler-b{0%,50%{opacity:0}50.2%,92%{opacity:1}96%,100%{opacity:0}}
}

/* ── Reduzierte Bewegung: je Kachel das Endbild ──────────────────────── */
@media (prefers-reduced-motion: reduce){
  .ez--eins .ez-balken::after{transform:none}
  .ez--eins .ez-fund,.ez--eins .ez-funde__fuss{opacity:1}
  .ez--zwei .ez-such__platz{opacity:0}
  .ez--zwei .ez-tipp{max-width:8ch}
  .ez--zwei .ez-klapp{grid-template-rows:1fr}
  .ez--zwei .ez-treffer,.ez--zwei .ez-uebernahme{opacity:1}
  .ez--drei .ez-zieht{transform:translateX(var(--ez-weg));box-shadow:var(--schatten)}
  .ez--drei .ez-gewicht--platz{opacity:1}
  .ez--drei .ez-falt{grid-template-rows:1fr}
  .ez--drei .ez-kriterium{opacity:1}
  .ez--drei .ez-zaehler>:first-child{opacity:0}
  .ez--drei .ez-zaehler>:last-child{opacity:1}
}

/* ── Frist: drei Verfahren, eine Woche ────────────────────────────────────
   Ersetzt am 10.09.2026 die Kachel "Eins" in Panel 01 der Seite
   /entwurf/warum-acribic/. Die alte zeigte das Lesen der Unterlagen mit
   Fundstellen, also die Loesung, und dazu dasselbe Motiv wie der
   Ablauf-Block. Das Zitat des Panels handelt aber von Kapazitaet, nicht von
   Genauigkeit. Diese hier zeigt den Engpass selbst.

   Takt wie ueberall 8 s. Vier Beats:
     0,0 s   drei Verfahren stehen offen
     1,2 s   das erste geht in Arbeit, die Kapazitaet laeuft voll
     2,6 s   die anderen beiden fallen auf "kein Platz"
     4,4 s   Acribic uebernimmt das Lesen, die Kapazitaet faellt zurueck
     5,4 s   alle drei laufen
   Keine Blaetter, keine Fundstellen, keine Seitenzahlen: das haben der
   Ablauf-Block und die Kacheln 06 und 07 schon.                          */
.ez--frist{background-color:var(--buehne-2);background-image:var(--buehne-tief);color:var(--paper)}
.ez--frist .ez-szene{gap:var(--s5)}
.ez--frist .ez-mono{color:var(--invert-ink2)}

.ez-fr__liste{display:flex;flex-direction:column;gap:8px}
.ez-fr__z{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  column-gap:10px;row-gap:2px;background:rgba(255,255,255,.07);border-radius:10px;
  padding:10px 12px;opacity:0}
.ez-fr__z b{font-weight:500;font-size:13px;line-height:1.25;min-width:0}
.ez-fr__frist{grid-column:1;font-size:11px}
.ez-fr__st{grid-column:2;grid-row:1 / span 2;display:grid;justify-items:end}
.ez-fr__chip{grid-area:1 / 1;font-size:10px;font-weight:500;line-height:1;white-space:nowrap;
  border-radius:99px;padding:5px 9px;opacity:0}
.ez-fr__chip--offen{background:rgba(255,255,255,.12);color:var(--invert-ink2)}
.ez-fr__chip--eng{background:rgba(255,255,255,.06);color:var(--invert-ink2);
  box-shadow:inset 0 0 0 1px var(--invert-rule)}
.ez-fr__chip--los{background:var(--paper);color:var(--accent)}

.ez-fr__kap{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px}
.ez-fr__bar{grid-column:1 / -1;position:relative;height:5px;border-radius:3px;
  background:var(--invert-rule);overflow:hidden}
.ez-fr__bar::after{content:"";position:absolute;inset:0;border-radius:3px;
  background:var(--paper);transform:scaleX(0);transform-origin:left}
.ez-fr__wert{font-size:11px;text-align:right}
.ez-fr__ueb{display:flex;align-items:center;gap:8px;opacity:0}
.ez-fr__ueb::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--paper);flex:0 0 auto}

@media (prefers-reduced-motion: no-preference){
  .ez--frist .ez-fr__z--1{animation:ez-fr-zeile1 8s linear infinite}
  .ez--frist .ez-fr__z--2{animation:ez-fr-zeile2 8s linear infinite}
  .ez--frist .ez-fr__z--3{animation:ez-fr-zeile3 8s linear infinite}
  .ez--frist .ez-fr__z--1 .ez-fr__chip--offen{animation:ez-fr-offen1 8s linear infinite}
  .ez--frist .ez-fr__z--2 .ez-fr__chip--offen,
  .ez--frist .ez-fr__z--3 .ez-fr__chip--offen{animation:ez-fr-offen23 8s linear infinite}
  .ez--frist .ez-fr__z--1 .ez-fr__chip--los{animation:ez-fr-los1 8s linear infinite}
  .ez--frist .ez-fr__z--2 .ez-fr__chip--eng,
  .ez--frist .ez-fr__z--3 .ez-fr__chip--eng{animation:ez-fr-eng 8s linear infinite}
  .ez--frist .ez-fr__z--2 .ez-fr__chip--los{animation:ez-fr-los2 8s linear infinite}
  .ez--frist .ez-fr__z--3 .ez-fr__chip--los{animation:ez-fr-los3 8s linear infinite}
  .ez--frist .ez-fr__bar::after{animation:ez-fr-bar 8s linear infinite}
  .ez--frist .ez-fr__wert{animation:ez-fr-wert 8s linear infinite}
  .ez--frist .ez-fr__ueb{animation:ez-fr-ueb 8s linear infinite}

  @keyframes ez-fr-zeile1{0%{opacity:0;transform:translateY(6px)}4%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
  @keyframes ez-fr-zeile2{0%,3%{opacity:0;transform:translateY(6px)}7%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
  @keyframes ez-fr-zeile3{0%,6%{opacity:0;transform:translateY(6px)}10%,94%{opacity:1;transform:none}98%,100%{opacity:0}}

  @keyframes ez-fr-offen1{0%,4%{opacity:0}6%,13%{opacity:1}16%,100%{opacity:0}}
  @keyframes ez-fr-offen23{0%,7%{opacity:0}10%,30%{opacity:1}33%,100%{opacity:0}}
  @keyframes ez-fr-los1{0%,13%{opacity:0}16%,94%{opacity:1}98%,100%{opacity:0}}
  @keyframes ez-fr-eng{0%,30%{opacity:0}33%,63%{opacity:1}66%,100%{opacity:0}}
  @keyframes ez-fr-los2{0%,66%{opacity:0}69%,94%{opacity:1}98%,100%{opacity:0}}
  @keyframes ez-fr-los3{0%,70%{opacity:0}73%,94%{opacity:1}98%,100%{opacity:0}}

  @keyframes ez-fr-bar{0%,13%{transform:scaleX(0)}30%,55%{transform:scaleX(1)}
    66%,94%{transform:scaleX(.34)}98%,100%{transform:scaleX(0)}}
  @keyframes ez-fr-wert{0%,29%{opacity:0}32%,54%{opacity:1}58%,100%{opacity:0}}
  @keyframes ez-fr-ueb{0%,55%{opacity:0}59%,94%{opacity:1}98%,100%{opacity:0}}
}

/* ================================ szenen2.css ================================ */
/* ==========================================================================
   Szenen zwei: vier weitere bewegte Produktkacheln, reines CSS.
   Gerüst je Kachel: <div class="mock ez2 ez2--vier" aria-hidden="true">
   Ein Takt: 8 s, unendlich, 1 s = 12,5 %. Jeder Zustand steht als absoluter
   Prozentwert im Keyframe-Block, Versatz nie über eine Verzögerung. Pseudoelemente
   bekommen die Dauer ausdrücklich, weil ".mock *" sie nicht trifft.
   Farben nur über var(). Die Tokens --buehne-tief und --warm kommen aus
   entwurf/entwurf.css, --schatten und --m-haken aus style.css (".mock" setzt
   sie lokal). Machart wie entwurf/szenen.css, eigenes Klassenpräfix ez2-,
   damit beide Dateien unabhängig bleiben.
   ========================================================================== */

/* ── Gemeinsames ─────────────────────────────────────────────────────── */
.mock.ez2{aspect-ratio:4/3}
.ez2-szene{position:absolute;inset:var(--ez2-rand);--ez2-rand:var(--s6);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s4)}
.ez2-cap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:22px}
.ez2-cap__l{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.ez2-cap__r{font-size:12px;color:var(--ink-2)}
/* Wechselnde Texte liegen übereinander, genau eine Fassung ist sichtbar.
   Jedes Kind startet unsichtbar, jede Szene weist ihre eigenen Zeitpunkte zu. */
.ez2-wechsel{display:inline-grid;justify-items:end}
.ez2-wechsel>*{grid-area:1/1;white-space:nowrap;opacity:0}
.ez2-mono{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;color:var(--ink-2)}
/* .mock ul setzt padding:0 und schlägt eine einzelne Klasse, daher .mock .ez2-liste */
.mock .ez2-liste{list-style:none;margin:0;padding:0}
.ez2-karte{background:var(--paper);border-radius:12px;box-shadow:var(--schatten);color:var(--ink);padding:16px 18px}
.ez2-chip{display:inline-block;font-size:11px;font-weight:500;line-height:1;color:var(--ink-2);
  background:var(--surface);border-radius:99px;padding:4px 10px;white-space:nowrap}
.ez2-chip--passt{background:var(--ok-flaeche);color:var(--ok-tief)}
.ez2-haken{position:relative;display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.ez2-haken::after{content:"";position:absolute;inset:0;background:var(--paper);
  -webkit-mask:var(--m-haken) center/9px 9px no-repeat;mask:var(--m-haken) center/9px 9px no-repeat}

/* ── Vier: Änderungen im Verfahren ────────────────────────────────────── */
.ez2--vier{background:var(--buehne-tief);color:var(--paper)}
.ez2--vier .ez2-cap__l,.ez2--vier .ez2-cap__r{color:var(--invert-ink2)}
.ez2-vier__karten{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s5);align-items:start}
.ez2-zeit{display:flex;flex-direction:column;gap:10px}
.ez2-zeit__zeile{display:flex;gap:10px;align-items:baseline;font-size:12.5px}
.ez2-zeit__zeile--neu{display:grid;grid-template-rows:0fr;opacity:0}
.ez2-zeit__zeile--neu .ez2-klapp__in{min-height:0;overflow:hidden;display:flex;gap:10px;align-items:baseline;
  background:color-mix(in srgb,var(--accent) 8%,transparent);border-radius:6px;padding:4px 8px;margin:0 -8px}
.ez2-punkte{display:flex;flex-direction:column;gap:9px}
.ez2-punkt{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px}
.ez2-punkt__re{display:inline-flex;align-items:center;gap:6px}
.ez2--vier .ez2-punkt--reaktion .ez2-haken{opacity:0}

/* ── Fünf: Erstsichtung ───────────────────────────────────────────────── */
.ez2-sicht__liste{position:relative}
.ez2-sicht__zeile{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-top:1px solid var(--rule)}
.ez2-sicht__zeile:first-child{border-top:0}
.ez2-sicht__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ez2-sicht__txt b{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ez2-sicht__txt small{font-size:11px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ez2-sicht__balken{position:absolute;left:0;right:0;height:38px;border-radius:8px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 14%,transparent) 55%,transparent);
  border-bottom:1.5px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.ez2--fuenf .ez2-chip--passt{opacity:0}
.ez2-sicht__fazit{display:flex;align-items:center;gap:8px;margin-top:11px;padding-top:11px;
  border-top:1px solid var(--rule);font-size:13px;opacity:0}

/* ── Sechs: Prüflauf ──────────────────────────────────────────────────── */
.ez2--sechs{background:var(--buehne-tief);color:var(--paper)}
.ez2--sechs .ez2-cap__l,.ez2--sechs .ez2-cap__r{color:var(--invert-ink2)}
.ez2-pruef__zeile{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-top:1px solid var(--rule);font-size:13px}
.ez2-pruef__zeile:first-child{border-top:0}
.ez2-fund__beleg{display:inline-flex;align-items:center;gap:8px;opacity:0;white-space:nowrap}

/* ── Sieben: Entwurf ──────────────────────────────────────────────────── */
.ez2-entwurf{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s5)}
.ez2-krit{border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:2px}
.mock .ez2-krit{padding-right:var(--s5)}
.ez2-krit__zeile{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;border-radius:8px;font-size:12.5px;color:var(--ink-2)}
.ez2--sieben .ez2-krit__zeile--wahl .ez2-haken{opacity:0}
.ez2-antwort{padding-left:var(--s5);display:flex;flex-direction:column;justify-content:center;min-width:0}
.ez2-antwort__txt{font-size:13px;line-height:1.6;color:var(--ink)}
.ez2-tz{display:block;width:max-content;max-width:0;overflow:hidden;white-space:nowrap;
  border-right:1.5px solid transparent}
.ez2-quelle{margin-top:10px;opacity:0}

/* ══ Der Takt: 8 s, 1 s = 12,5 % ═══════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference){
  /* Spezifischer als ".mock *" aus style.css, sonst kämen 12 s an. */
  .mock.ez2 *,.mock.ez2 ::before,.mock.ez2 ::after{animation-duration:8s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.4,0,.2,1)}

  /* Vier: Ruhe bis 25, dritter Eintrag schiebt sich 25 bis 37,5 ein, Zähler
     springt bei 37,5, Wert springt bei 43,75, Haken bei 50, Ruhe bis 92. */
  .ez2-zeit__zeile--neu{animation-name:ez2-v-neu}
  @keyframes ez2-v-neu{
    0%,25%{grid-template-rows:0fr;opacity:0}
    35.5%{opacity:1}
    37.5%,92%{grid-template-rows:1fr;opacity:1}
    96%,100%{grid-template-rows:0fr;opacity:0}}
  .ez2--vier .ez2-cap__r>:first-child{animation-name:ez2-v-status-a}
  .ez2--vier .ez2-cap__r>:last-child{animation-name:ez2-v-status-b}
  @keyframes ez2-v-status-a{0%,37.5%{opacity:1}37.7%,96%{opacity:0}100%{opacity:1}}
  @keyframes ez2-v-status-b{0%,37.5%{opacity:0}37.7%,92%{opacity:1}96%,100%{opacity:0}}
  .ez2--vier .ez2-punkt--reaktion .ez2-wechsel>:first-child{animation-name:ez2-v-wert-a}
  .ez2--vier .ez2-punkt--reaktion .ez2-wechsel>:last-child{animation-name:ez2-v-wert-b}
  @keyframes ez2-v-wert-a{0%,43.75%{opacity:1}43.95%,96%{opacity:0}100%{opacity:1}}
  @keyframes ez2-v-wert-b{0%,43.75%{opacity:0}43.95%,92%{opacity:1}96%,100%{opacity:0}}
  .ez2--vier .ez2-punkt--reaktion .ez2-haken{animation-name:ez2-v-haken}
  @keyframes ez2-v-haken{0%,50%{opacity:0;transform:scale(.6)}53%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}

  /* Fünf: Balken 12,5 bis 43,75 fährt durch die Liste, Etiketten und
     Rückzug bei 50, Einschätzung bei 62,5, Ruhe bis 92. */
  .ez2-sicht__balken{animation-name:ez2-f-balken;animation-timing-function:linear}
  @keyframes ez2-f-balken{0%,12.5%{opacity:0;top:-38px}14%{opacity:1}42%{opacity:1;top:100%}43.75%,100%{opacity:0;top:100%}}
  .ez2-sicht__zeile--ab{animation-name:ez2-f-ab}
  @keyframes ez2-f-ab{0%,50%{opacity:1}53%,92%{opacity:.45}96%,100%{opacity:1}}
  .ez2--fuenf .ez2-chip--passt{animation-name:ez2-f-passt}
  @keyframes ez2-f-passt{0%,50%{opacity:0;transform:scale(.85)}53.5%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
  .ez2-sicht__fazit{animation-name:ez2-f-fazit}
  @keyframes ez2-f-fazit{0%,62.5%{opacity:0;transform:translateY(6px)}66%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
  .ez2--fuenf .ez2-cap__r>:first-child{animation-name:ez2-f-status-a}
  .ez2--fuenf .ez2-cap__r>:last-child{animation-name:ez2-f-status-b}
  @keyframes ez2-f-status-a{0%,50%{opacity:1}50.2%,96%{opacity:0}100%{opacity:1}}
  @keyframes ez2-f-status-b{0%,50%{opacity:0}50.2%,92%{opacity:1}96%,100%{opacity:0}}

  /* Sechs: vier Fundstellen bei 18,75 / 31,25 / 43,75 / 56,25, Zähler
     springt bei 31,25 auf zwei und bei 56,25 auf vier, Ruhe bis 92. */
  .ez2-pruef__zeile:nth-child(1) .ez2-fund__beleg{animation-name:ez2-s-f1}
  .ez2-pruef__zeile:nth-child(2) .ez2-fund__beleg{animation-name:ez2-s-f2}
  .ez2-pruef__zeile:nth-child(3) .ez2-fund__beleg{animation-name:ez2-s-f3}
  .ez2-pruef__zeile:nth-child(4) .ez2-fund__beleg{animation-name:ez2-s-f4}
  @keyframes ez2-s-f1{0%,18.75%{opacity:0;transform:translateY(6px)}22.25%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
  @keyframes ez2-s-f2{0%,31.25%{opacity:0;transform:translateY(6px)}34.75%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
  @keyframes ez2-s-f3{0%,43.75%{opacity:0;transform:translateY(6px)}47.25%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
  @keyframes ez2-s-f4{0%,56.25%{opacity:0;transform:translateY(6px)}59.75%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
  .ez2--sechs .ez2-cap__r>:nth-child(1){animation-name:ez2-s-status-a}
  .ez2--sechs .ez2-cap__r>:nth-child(2){animation-name:ez2-s-status-b}
  .ez2--sechs .ez2-cap__r>:nth-child(3){animation-name:ez2-s-status-c}
  @keyframes ez2-s-status-a{0%,31.25%{opacity:1}31.45%,96%{opacity:0}100%{opacity:1}}
  @keyframes ez2-s-status-b{0%,31.25%{opacity:0}31.45%,56.25%{opacity:1}56.45%,100%{opacity:0}}
  @keyframes ez2-s-status-c{0%,56.25%{opacity:0}56.45%,92%{opacity:1}96%,100%{opacity:0}}

  /* Sieben: Auswahl bei 12,5, Tippen 18,75 bis 50 über zwei Zeilen, Quelle
     bei 56,25, Haken bei 62,5, Ruhe bis 92. */
  .ez2--sieben .ez2-krit__zeile--wahl{animation-name:ez2-g-wahl}
  @keyframes ez2-g-wahl{0%,12.5%{background-color:transparent;color:var(--ink-2)}15%,92%{background-color:var(--surface);color:var(--ink)}96%,100%{background-color:transparent;color:var(--ink-2)}}
  .ez2--sieben .ez2-krit__zeile--wahl .ez2-haken{animation-name:ez2-g-haken}
  @keyframes ez2-g-haken{0%,62.5%{opacity:0;transform:scale(.6)}65.5%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
  .ez2-antwort__txt .ez2-tz:nth-child(1){animation-name:ez2-g-tz1}
  .ez2-antwort__txt .ez2-tz:nth-child(2){animation-name:ez2-g-tz2}
  @keyframes ez2-g-tz1{
    0%,18.75%{max-width:0;border-color:transparent;opacity:1}
    18.95%{border-color:var(--ink);animation-timing-function:steps(39,end)}
    34%{max-width:100%;border-color:var(--ink)}
    34.5%,92%{max-width:100%;border-color:transparent;opacity:1}
    96%{max-width:100%;border-color:transparent;opacity:0}
    96.5%,100%{max-width:0;border-color:transparent;opacity:0}}
  @keyframes ez2-g-tz2{
    0%,34%{max-width:0;border-color:transparent;opacity:1}
    34.2%{border-color:var(--ink);animation-timing-function:steps(39,end)}
    50%{max-width:100%;border-color:var(--ink)}
    50.5%,92%{max-width:100%;border-color:transparent;opacity:1}
    96%{max-width:100%;border-color:transparent;opacity:0}
    96.5%,100%{max-width:0;border-color:transparent;opacity:0}}
  .ez2-quelle{animation-name:ez2-g-quelle}
  @keyframes ez2-g-quelle{0%,56.25%{opacity:0;transform:translateY(4px)}59.5%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
}

/* ── Reduzierte Bewegung: je Kachel das Endbild ──────────────────────── */
@media (prefers-reduced-motion: reduce){
  .ez2-wechsel>:last-child{opacity:1}

  .ez2-zeit__zeile--neu{grid-template-rows:1fr;opacity:1}
  .ez2--vier .ez2-punkt--reaktion .ez2-haken{opacity:1}

  .ez2-sicht__zeile--ab{opacity:.45}
  .ez2--fuenf .ez2-chip--passt{opacity:1}
  .ez2-sicht__fazit{opacity:1}

  .ez2-fund__beleg{opacity:1}

  .ez2--sieben .ez2-krit__zeile--wahl{background-color:var(--surface);color:var(--ink)}
  .ez2--sieben .ez2-krit__zeile--wahl .ez2-haken{opacity:1}
  .ez2-tz{max-width:100%;border-color:transparent}
  .ez2-quelle{opacity:1}
}

/* ================================ abschnitte.css ================================ */
/* entwurf/abschnitte.css: Aufsatz fuer /entwurf/, angelegt am 11.09.2026.
   Zwei Chats arbeiten gleichzeitig am selben Entwurf, die Schreibwache
   (.vorher/wache.py) sperrt dabei ganze Dateien. Damit sich die Chats nicht
   gegenseitig blockieren, stehen hier die Regeln fuer diese Abschnitte:
   #referenzen, #aenderung ("Drei Probleme weniger pro Verfahren"), dazu seit
   dem 11.09.2026 zusaetzlich #ablauf (Buehne im Marken-Verlauf, Szenen im
   Takt des Akkordeons), #fragen (der mitlaufende Kopf steht still) und
   #kontakt (kleiner, strahlender Knopf). #ausgangslage (der 20-Prozent-Block)
   ist seit heute entfernt, ihre Regeln standen bis dahin hier. Die
   Hero-Unterzeile p.hero__sub aendert sich seit heute ebenfalls,
   dort aber nur der Text in index.html, ohne eigene Regel hier.
   Seit dem 13.09.2026 zusaetzlich: .vertrauen, der neue Logostreifen
   direkt unter dem Hero, dazu die daran angepasste Hoehe von .hero und
   .hero__platz (bisher allein in entwurf.css bzw. style.css geregelt).
   #referenzen ist seit demselben Tag in index.html per Kommentar
   stillgelegt, die vier Kundenzitate sind nicht freigegeben. Die Regeln
   fuer #referenzen hier bleiben unveraendert liegen, falls der Abschnitt
   zurueckkommt.
   Wer diese Abschnitte aendert, tut es in dieser Datei, nicht in
   entwurf.css.
   Wird als letztes Stylesheet geladen (nach szenen2.css) und ueberschreibt
   dort, wo es noetig ist, Regeln aus entwurf.css/szenen2.css: jede
   Ueberschreibung hier steht mit mindestens derselben Spezifitaet und in
   derselben Media-Query wie die Regel, die sie schlagen soll.
   Beim Uebernehmen des Entwurfs in die Live-Fassung gehoert der Inhalt
   dieser Datei nach entwurf.css, dieselbe Datei loest sich dann auf. */

:root{
  /* Nur fuers Leuchten im Schlussblock (#kontakt), nicht Teil des
     Marken-Verlaufs: --buehne-3/--akzent-hell (#2B6BAC, hsl 210 60% 42%)
     sind fuer ein Strahlen zu gedeckt. Gleicher Farbton, satter und
     heller (hsl 210 85% 58%). */
  --strahl:#3994EF;
}


/* ── #referenzen: Textspalte an die Bildhoehe, Bild breiter ─────────────
   Bisher: Bildspalte 0.85fr, Textspalte 1fr, dazu align-items:center auf
   dem Raster. Die Textspalte war damit schmaler als das Bild UND durch das
   grosse Zitat (--fs-h2) deutlich hoeher, center haengte sie deshalb mittig
   ueber die Bildkanten hinaus. Jetzt kehrt sich das Verhaeltnis um: die
   Bildspalte wird die breitere (6fr gegen 5fr, also klar "mindestens so
   breit" wie gefordert), und Zitat, Marke und Pfeile schrumpfen, damit die
   Textspalte in die dadurch groessere Bildhoehe passt. */
@media (min-width:900px){
  #referenzen .ref__raster{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}

  /* .ref__buehne behaelt ihr eigenes Seitenverhaeltnis (align-self:start
     statt der geerbten center-Stretchgefahr), .ref__spalte dehnt sich auf
     die Zeilenhoehe der Raster-Zeile, die jetzt das Bild vorgibt. Darin
     schiebt justify-content:space-between die Marke an die Bild-Oberkante
     und die Pfeile an die Bild-Unterkante, der Rest verteilt sich dazwischen.
     Das ist die technische Loesung fuer "nichts ragt ueber oder unter das
     Bild": keine feste Hoehe, sondern zwei Ankerpunkte mit flexiblem Raum
     dazwischen. */
  #referenzen .ref__buehne{align-self:start}
  #referenzen .ref__spalte{align-self:stretch;justify-content:space-between}
}

/* Zitatschrift wieder vergroessert: die vorige Verkleinerung liess zwischen
   .ref__wer und .ref__steuer eine Luecke von rund 194px (1280px) bzw. 256px
   (1440px), die Spalte wirkte oben schwer und in der Mitte hohl. Die neue
   Rampe ist auf die beiden Pruefbreiten hin gerechnet, nicht geschaetzt: sie
   liefert exakt 41px bei 1280px und 50px bei 1440px, nachgemessen mit der
   manuellen Trennung weiter unten in dieser Datei aktiv. Damit liegt die
   Luecke bei allen vier Blaettern zwischen 48px und 160px. line-height,
   Farbe und Schriftfamilie bleiben aus entwurf.css, dort nicht neu gesetzt. */
#referenzen .ref__zitat{font-size:clamp(1.375rem, -1.9375rem + 5.625vw, 3.125rem);margin:0 0 var(--s4)}
/* Marke ohne die alte Mindesthoehe (58px war fuer die grosse Zitatschrift
   bemessen) und mit kleinerem Platzbedarf fuer das Logo selbst. */
#referenzen .ref__marke{min-height:0;margin:0 0 var(--s4)}
#referenzen .ref__marke img{max-height:34px}
/* Klickflaeche haelt die vorgeschriebene Untergrenze von 40x40px genau ein,
   das Pfeilsymbol schrumpft im selben Verhaeltnis mit. */
#referenzen .ref__pfeil{width:40px;height:40px}
#referenzen .ref__pfeil svg{width:18px;height:18px}

/* Stellschraube fuer "Mehr zur Sicherheit" bis Bild-Oberkante: #referenzen
   erbt sonst 128px (--s10) padding-top aus der allgemeinen .band-Regel.
   #sicherheit bleibt unangetastet, wie im Auftrag verlangt, deshalb sinkt
   ausschliesslich die obere Seite von #referenzen; padding-bottom bleibt
   die geerbte --s10. Gleiche Media-Query wie die .band-Regel, damit die
   Ueberschreibung ab derselben Breite greift. */
@media (min-width:768px){
  #referenzen{padding-top:var(--s6)}
}


/* ── #aenderung: Abstand Kopf zu Panel 01 ────────────────────────────────
   Bisher stapelten sich drei Polster zwischen Kopf und der Kachel von
   Panel 01: .kopf margin-bottom (--s8, 64px) + #aenderung .panels
   padding-top (--s7, 48px) + das eigene padding-top von Panel 01 (--s8,
   64px, Teil von .panel{padding:var(--s8)} aus panel.css) macht 176px.
   Die ersten beiden Polster fallen hier weg. Das dritte bleibt unangetastet:
   .panel{padding:var(--s8)} traegt an allen drei Panels gleich zur
   Kartenmitte bei und damit auch zum Abstand ZWISCHEN Panel 01 und Panel 02
   (dessen padding-bottom + .panels gap + Panel 02 padding-top). Würde
   dieser Wert hier ebenfalls geaendert, veraenderte das den
   Panel-zu-Panel-Abstand, den der Auftrag ausdruecklich unveraendert
   verlangt. Die verbleibenden 64px liegen innerhalb der Zielspanne von
   56 bis 80px, ohne dass .panel selbst angefasst wird.

   15.09.2026: das dritte Polster ist inzwischen doch kleiner geworden, .panel
   traegt in #aenderung ab 768px nur noch --s6 (32px, entwurf.css), weil Ole
   den Abstand ZWISCHEN den Panels enger wollte. Damit fielen die 64px auf 32
   und die Ueberschrift klebte an der Kachel ("das ist zu nah an diesem blauen
   Block"). Der Kopf bekommt deshalb hier --s7 zurueck: 48 + 32 = 80px, das
   obere Ende derselben Zielspanne, und der Panel-zu-Panel-Abstand bleibt
   davon unberuehrt. */
#aenderung .kopf{margin-bottom:var(--s7)}
#aenderung .panels{padding-top:0}

/* Panel 03: der Span .ez2-cap__l ("Pruef lauf") ist aus index.html entfernt
   (Archiv am Dateiende), der verbleibende Zaehler .ez2-cap__r soll seinen
   Platz nicht einfach nach links nachruecken. .ez2-cap steht in szenen2.css
   auf justify-content:space-between, mit nur einem Kind darin liefe das auf
   flex-start hinaus, also links; flex-end schiebt ihn stattdessen an die
   rechte Kante der Kachel. */
#aenderung .ez2-cap{justify-content:flex-end}

/* ── #aenderung: Kachel-Takt von 8s auf 12s ───────────────────────────────
   szenen.css/szenen2.css setzen die drei Kacheln (.mock.ez, .mock.ez2) fest
   auf 8s, Ole: zu schnell, wie beim Ablauf-Block. Per grep auf
   "animation-duration" in beiden Dateien geprueft: keine der drei Kacheln
   nutzt daneben eine zweite, feste Dauer (Kreisel o.ae.), darum genuegt eine
   einzige Ueberschreibung der Basis. #aenderung als ID schlaegt die
   Klassenpaare .mock.ez/.mock.ez2 an Spezifitaet, ohne dass szenen.css oder
   szenen2.css angefasst werden. */
@media (prefers-reduced-motion: no-preference){
  #aenderung .mock *,#aenderung .mock ::before,#aenderung .mock ::after{animation-duration:12s}
}

/* ── #aenderung Panel 03: Zaehler in fuenf Schritten ──────────────────────
   ".ez2-cap__r" sprang bisher direkt von 0 auf 2 auf 4 (drei Spans in
   szenen2.css). Jetzt fuenf Spans in index.html (0 bis 4), jeder Wechsel
   liegt exakt auf dem Startzeitpunkt der zugehoerigen Fundstellen-Animation
   in szenen2.css (ez2-s-f1 bis f4: 18.75/31.25/43.75/56.25%), also genau
   dann, wenn die jeweilige Zeile ihren Haken bekommt. Der Uebergang ist eine
   weiche Ueberblendung mit 4px Versatz beim Erscheinen (Vorbild: die
   Fundstellen-Animationen dort, die mit 6px), das Verschwinden bleibt ohne
   Versatz, aus demselben Grund wie dort: die ganze Szene blendet ohnehin am
   Taktende ab. Hoehere Spezifitaet als die drei alten nth-child-Regeln in
   szenen2.css durch die ID #aenderung. */
@media (prefers-reduced-motion: no-preference){
  #aenderung .ez2--sechs .ez2-cap__r>:nth-child(1){animation-name:ez2-s-z0}
  #aenderung .ez2--sechs .ez2-cap__r>:nth-child(2){animation-name:ez2-s-z1}
  #aenderung .ez2--sechs .ez2-cap__r>:nth-child(3){animation-name:ez2-s-z2}
  #aenderung .ez2--sechs .ez2-cap__r>:nth-child(4){animation-name:ez2-s-z3}
  #aenderung .ez2--sechs .ez2-cap__r>:nth-child(5){animation-name:ez2-s-z4}
  @keyframes ez2-s-z0{
    0%,18.75%{opacity:1;transform:none}
    22.25%,100%{opacity:0;transform:none}}
  @keyframes ez2-s-z1{
    0%,18.75%{opacity:0;transform:translateY(4px)}
    22.25%,31.25%{opacity:1;transform:none}
    34.75%,96%{opacity:0;transform:none}
    100%{opacity:0;transform:translateY(4px)}}
  @keyframes ez2-s-z2{
    0%,31.25%{opacity:0;transform:translateY(4px)}
    34.75%,43.75%{opacity:1;transform:none}
    47.25%,96%{opacity:0;transform:none}
    100%{opacity:0;transform:translateY(4px)}}
  @keyframes ez2-s-z3{
    0%,43.75%{opacity:0;transform:translateY(4px)}
    47.25%,56.25%{opacity:1;transform:none}
    59.75%,96%{opacity:0;transform:none}
    100%{opacity:0;transform:translateY(4px)}}
  @keyframes ez2-s-z4{
    0%,56.25%{opacity:0;transform:translateY(4px)}
    59.75%,92%{opacity:1;transform:none}
    96%,100%{opacity:0;transform:none}}
}


/* ── Manuelle Trennung in den grossen Zitaten ─────────────────────────
   body{hyphens:auto} in style.css trennt Fliesstext automatisch und trifft
   damit auch die grossen Displayschriften hier: "gegenueber" wurde im
   dritten Panel zu "gegen-ueber", "entscheiden" im Cledion-Zitat zu
   "entschei-den". Fuer normalen Fliesstext bleibt die automatische Trennung
   richtig, nur diese beiden grossformatigen Elemente schalten sie ab.
   text-wrap:balance ist eine reine Verbesserung fuer Browser, die es kennen,
   und faellt sonst folgenlos auf den normalen Zeilenumbruch zurueck.
   (Der dritte Fall, #ausgangslage .chance__bu, ist mit dem Abschnitt am
   11.09.2026 entfernt worden, Archiv am Ende von index.html.) */
#referenzen .ref__zitat, #aenderung .panel__zitat{
  -webkit-hyphens:manual;hyphens:manual;text-wrap:balance
}


/* ── Schrift: keine Serife in Ueberschriften ──────────────────────────────
   Ole mag die Instrument-Serif-Ueberschriften aus entwurf.css nicht mehr,
   er will die Schrift von "Reden wir ueber Ihr naechstes Verfahren"
   (.cta__zeile in style.css: Inter 500, letter-spacing -0.03em). a) Der
   Umweg ueber die Variable trifft alles, was entwurf.css/panel.css bereits
   mit font-family:var(--font-display) setzt (h1, h2, .ref__zitat,
   .panel__zitat), ohne diese Dateien anzufassen. b) Gewicht und
   Laufweite stehen dort als feste Werte, nicht ueber die Variable, darum
   eigene Regeln dafuer, mit derselben Spezifitaet wie h1,h2 in entwurf.css
   und ladeordnungsbedingt danach. Die Groessenregel der Hero-h1
   (h1{font-size:var(--fs-hero)} in style.css) bleibt unangetastet. c) Die
   grossen Zitate werden mit dem Variablentausch ebenfalls zu Inter, ihre
   eigene Laufweite (-0.02em) passt zur neuen Schrift besser als die alten
   -0.01em aus panel.css. */
:root{--font-display:var(--font-sans)}
h1,h2{font-weight:500;letter-spacing:-0.03em}
/* style.css setzt die Plattform-Ueberschrift mit .hiw__liste h2 auf 600; sie soll
   dasselbe Gewicht haben wie alle anderen Ueberschriften. */
#ablauf .hiw__liste h2{font-weight:500;letter-spacing:-0.03em}
.panel__zitat,.ref__zitat{font-weight:500;letter-spacing:-0.02em}


/* ── #fragen: Kopf ohne Scroll-Mitlauf ────────────────────────────────────
   entwurf.css macht .faq__kopf ab 900px sticky (bleibt beim Scrollen stehen).
   Der Auftraggeber will diesen Effekt nicht mehr, der Kopf soll normal mit
   der Seite mitscrollen wie jeder andere Absatz. Gleiche Media-Query wie
   die Regel, die das hier zurücknimmt. */
@media (min-width:900px){
  #fragen .faq__kopf{position:static}
}

/* ── #fragen: Abstand zwischen zwei Absaetzen einer Antwort ───────────────
   .faq__a p (style.css) setzt Farbe und Lesebreite, aber keinen Abstand, weil
   bis zum 15.09.2026 jede Antwort aus genau einem Absatz bestand. Die Antwort
   auf "Was muessen wir beisteuern?" hat zwei, seit die Tabelle ausgebaut ist,
   und die beiden klebten aneinander. */
#fragen .faq__a p + p{margin-top:var(--s5)}


/* ── #kontakt: kleiner statt hoch, strahlend statt blass ─────────────────
   a) Hoehe: min-height:520px aus entwurf.css plus --s9-Polster machten die
   Sektion hoeher, als der kurze Inhalt (eine Zeile, ein Knopf) braucht.
   Ohne min-height richtet sich die Hoehe nach Inhalt plus Polster. Die
   Zwischenstufe --s8 war Ole danach zu knapp, --s9 wieder wie urspruenglich,
   Ziel rund 400px bei 1280px.
   15.09.2026: "vertikal ein kleines Stueck groesser" (Ole). Naechste Sprosse
   der Skala, --s9 auf --s10, damit rund 470px statt 400px. Kein min-height,
   die Hoehe bleibt Inhalt plus Polster. */
#kontakt{min-height:auto;padding-block:var(--s10)}

/* b) Strahlen: der bisherige Verlauf (--buehne-1/2/3, Stufen 0/38/100)
   bleibt als Basis, aber seine hellste Stufe (--buehne-3/--akzent-hell,
   hsl 210 60% 42%) ist fuer ein Strahlen zu gedeckt. Ein radialer Schein in
   --strahl von unten rechts liegt als eigene Ebene darueber; die --buehne-2-
   Stufe wandert von 38% auf 45%, damit unter dem Schein mehr von der
   helleren Flaeche liegt statt noch dunklem Navy. Ellipse, Position und der
   Transparent-Stopp sind gegenueber der ersten Naeherung (70% 90% at 85%
   110%, Stopp 62%) nachgemessen angepasst: am Zielpunkt (90%/90%, 10%
   eingerueckt von unten rechts) lieferte die erste Fassung nur Saettigung
   63% statt der geforderten 70%. Groessere Ellipse, Mitte etwas hoeher und
   ein spaeterer Transparent-Stopp heben das an, ohne die Kontrastflaeche
   hinter der Ueberschrift merklich heller zu machen (Kontrast bleibt bei
   rund 10,8:1 gegen Weiss, siehe Bericht). */
#kontakt{background-color:var(--buehne-2);
  background-image:radial-gradient(ellipse 75% 95% at 85% 100%, var(--strahl) 0%, transparent 70%),
    linear-gradient(160deg, var(--buehne-1) 0%, var(--buehne-1) 30%, var(--buehne-2) 72%, var(--buehne-3) 100%)}

/* Nachtrag 13.09.2026: die untere linke Ecke war zu hell. Bei 160 Grad laeuft
   die Verlaufsachse von oben links nach unten rechts; die Ecke unten links
   liegt auf 46 Prozent dieser Achse und lag damit schon hinter dem alten
   Mittelstopp bei 45 Prozent, also bereits im Aufhellen zu --buehne-3. Mit
   dem dunklen Halt bis 30 Prozent und dem Mittelstopp bei 72 Prozent faellt
   sie auf 39 Prozent zwischen --buehne-1 und --buehne-2 und wird von
   rgb(26,64,102) auf rund rgb(21,53,85) dunkler. Die helle Ecke unten rechts
   (100 Prozent) und der Schein darueber bleiben unberuehrt, der Kontrast zum
   Schein nimmt dadurch sogar zu. */

/* Das Kachelmuster (zwoelf Quadrate, opacity .14) hat die Flaeche bisher
   sichtbar eingetruebt. Unter dem neuen Schein bleibt nur ein sehr leiser
   Rest stehen, damit die Flaeche hell und satt wirkt statt grau ueberlagert;
   ganz weg soll die Bildmarken-Anspielung nicht sein. */
#kontakt .schluss__muster i{opacity:.06}

/* c) Knopf: eigene, in sich geschlossene Regeln nur fuer #kontakt, damit
   der Knopf unabhaengig davon bleibt, was entwurf.css (zweiter Chat
   arbeitet dort parallel an .btn--pri/.band--tief) gerade setzt. Die
   ID-Spezifitaet gewinnt in jedem Fall gegen die Klassenregeln dort. */
#kontakt .btn--pri.btn--pfeil{background:var(--paper);color:var(--ink);
  font:500 1.0625rem/1.2 var(--font-sans);letter-spacing:-0.01em;
  padding:var(--s4) var(--s6);border-radius:8px;gap:10px}
#kontakt .btn--pri.btn--pfeil:hover{background:var(--paper);color:var(--ink)}
#kontakt .btn--pri.btn--pfeil:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
#kontakt .btn__pfeil{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
/* Der Pfeil wandert nur bei Bewegungsfreigabe nach rechts, sonst bleibt er
   stehen (kein Unterschied zwischen Hover und Ruhezustand ausser Bewegung). */
@media (prefers-reduced-motion: no-preference){
  #kontakt .btn__pfeil{transition:transform .2s}
  #kontakt .btn--pri.btn--pfeil:hover .btn__pfeil{transform:translateX(3px)}
}


/* ── #ablauf: Buehne im Marken-Verlauf ────────────────────────────────────
   Die Buehne (.hiw__rahmen) war fast weiss (--buehne aus style.css). Jetzt
   derselbe Marken-Verlauf wie die Kacheln in "Drei Probleme weniger pro
   Verfahren", Versuch des Auftraggebers, die Plattform nicht heller als den
   Rest der Seite wirken zu lassen. */
#ablauf .hiw__rahmen{background-color:var(--buehne-2);background-image:var(--buehne-tief)}

/* Alle Karten der fuenf Szenen (.frage, .antw, .ms, .vl__r, .board, .krit,
   .antwort, .paar__s, .lseite, .lfund li, .pl) tragen ihr eigenes
   background:var(--paper) und bleiben dadurch unveraendert weiss mit
   dunkler Schrift. Einzig die Kopfzeile jeder Szene (.cap__l/.cap__r) steht
   ohne eigene Karte direkt auf der jetzt dunklen Buehne und braucht helle
   statt dunkler Schrift, wie ueberall sonst auf --buehne-tief (vgl.
   .band--tief in entwurf.css). */
#ablauf .cap__l,#ablauf .cap__r{color:var(--invert-ink2)}

/* ── #ablauf: Szenen im neuen Takt des Akkordeons ─────────────────────────
   Der Akkordeon-Takt ist in entwurf/script.js kein fester Wert mehr fuer
   alle fuenf Schritte: Ole fand vor allem "Sichten" (Schritt 1) zu schnell,
   der laeuft jetzt 14s (data-takt="14000" am Schritt in index.html), die
   uebrigen vier per Vorgabe "sonst 12000" im Skript. Die 12s sind bereits
   die Basis aus style.css (".mock *,.mock ::before,.mock ::after"), dafuer
   ist hier keine Ueberschreibung noetig, auch nicht fuer die zwei .pl-
   Ausnahmen (Pruefen-Icons), die dort schon auf .9s/12s bzw. 12s/12s stehen.
   Nur Schritt 1 (mock--sichten) braucht eine eigene Regel auf 14s: per grep
   geprueft, dort gibt es keine kommagetrennte Mehrfachdauer wie beim .pl,
   eine einzige Ueberschreibung der Basis genuegt. Alle Keyframes stehen in
   Prozent eines Takts, ohne animation-delay, darum reicht das Umtakten der
   Dauer. Die Kacheln in #aenderung (.mock.ez) haben in szenen.css eine
   eigene Regel und aendern sich hier nicht mit. */
@media (prefers-reduced-motion: no-preference){
  #ablauf .hiw__bild[data-schritt="1"] .mock *,
  #ablauf .hiw__bild[data-schritt="1"] .mock ::before,
  #ablauf .hiw__bild[data-schritt="1"] .mock ::after{animation-duration:14s}

  /* Fortschrittsbalken (hiw-lauf in style.css, dort fest auf 8s fuer den
     alten Takt): 12s als neuer Regelfall, Schritt 1 eigens auf 14s, jeweils
     mit mindestens derselben Spezifitaet wie die 8s-Basis dort. */
  #ablauf .hiw__schritt.ist-offen::before{animation-duration:12s}
  #ablauf .hiw__schritt[data-ziel="1"].ist-offen::before{animation-duration:14s}
}

/* Die Hero-Unterzeile bricht ohne Silbentrennung um; "An-gebot" mitten im
   ersten Satz der Seite wirkte zerstueckelt. */
.hero__sub{-webkit-hyphens:manual;hyphens:manual;text-wrap:pretty}


/* ── Hero: 104px Hoehe an den neuen Streifen "Trusted by" abgeben ─────────
   entwurf.css setzt .hero auf min-height:calc(100svh - var(--h-nav)) und
   padding-block:var(--s9), ohne eigene Media-Query. Direkt darunter sitzt
   jetzt .vertrauen (104px inklusive Polster, siehe unten). Ziel: bei
   1280x800, 1440x900 und 1512x982 liegt die Unterkante des Streifens noch
   im Fenster, ohne zu scrollen. Die Mindesthoehe des Hero sinkt darum um
   genau die Streifenhoehe, das eigene Polster von --s9 (96px) auf --s7
   (48px), damit der Hero-Inhalt bei 800px Fensterhoehe innerhalb der
   kleineren Mindesthoehe bleibt. Gleiche Spezifitaet (eine Klasse) und
   keine Media-Query wie die Regel in entwurf.css, die sie schlaegt. */
/* Die Navigation traegt unter --h-nav noch eine 1-px-Linie; ohne sie ragte der
   Streifen an jeder Fenstergroesse genau 1 px unter die Kante. */
.hero{min-height:calc(100svh - var(--h-nav) - 138px);padding-block:var(--s7)}

/* Bei der kleineren Hero-Mindesthoehe braucht die Markenflaeche im Hero ab
   1000px ebenfalls weniger eigene Mindesthoehe, sonst sprengt sie die neue,
   kleinere Mindesthoehe wieder. style.css setzt hier 520px innerhalb
   @media(min-width:1000px), gleiche Media-Query und Spezifitaet (eine
   Klasse) hier. */
@media (min-width:1000px){
  .hero__platz{min-height:460px}
}


/* ── .vertrauen: Streifen "Trusted by" zwischen Hero und #ablauf ──────────
   Ole will die drei Kundenlogos ohne Scrollen sehen, direkt unter dem Hero.
   Nur Logos, keine Zitate: die vier Kundenzitate in #referenzen sind nicht
   freigegeben, siehe den Stillgelegt-Kommentar dort in index.html. Eigene,
   schmale Klasse statt .band: dessen Polster (--s9 bzw. --s10 aus style.css)
   sind fuer eine reine Logozeile zu hoch und wuerden die 104px-Zielhoehe
   sprengen, auf die .hero oben abgestimmt ist. */
/* Unten mehr Polster als oben (--s7 gegen --s5): dadurch sitzt der ganze
   Streifen hoeher im Bild, wie gefordert, ohne dass der Kasten selbst die
   Falz verlaesst. Neue Gesamthoehe 24 + 13 + 24 + 28 + 48 = 137px, plus die
   1px-Linie unter der Navigation ergibt die 138px, die .hero oben abzieht.
   Wer eines der fuenf Masse aendert, muss die 138px mitrechnen. */
.vertrauen{text-align:center;padding-top:var(--s4);padding-bottom:var(--s7)}

/* 13px statt 11px und --ink statt --ink-2: die Zeile war zu leise ("deutlich
   sichtbarer", Ole 13.09.2026). Abstand zur Logozeile auf --s5, vorher 17px. */
.vertrauen__label{font-family:var(--font-mono);font-size:13px;line-height:1;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  margin:0 0 var(--s6)}
  /* Oberes Polster --s4 statt --s5 und Abstand nach unten --s6 statt --s5:
     die Zeile ruecht dadurch 8px hoch, die Logozeile bleibt, wo sie war, und
     die Gesamthoehe von 137px bleibt unveraendert (Ole, 13.09.2026). */

/* flex-wrap:wrap ohne eigenen Breakpoint: die drei Logos bei 28px Hoehe
   plus zwei Luecken (--s9) brauchen rechnerisch rund 627px Breite (reine
   Geometrie aus den Bildmassen 195x50/500x98/300x46, nicht im Browser
   nachgemessen). Das passt bei 700px Fensterbreite noch in die .wrap-Breite
   (Polster --pad dort 24px je Seite), erst schmaler greift der Umbruch von
   selbst, wie gefordert ("unter 700px duerfen die Logos umbrechen"). */
/* Drei gleich breite Spalten (flex:1 1 0), nicht drei natuerliche Breiten.
   Sonst liegt die Mitte der Reihe nicht auf der Mitte des mittleren Logos:
   Gleiskraft ist bei 28px Hoehe rund 109px breit, Kopfkunst 183px, die
   Differenz von 74px verschob Cledion um 37px gegen die zentrierte
   Kopfzeile. Mit gleichen Spalten faellt die Mitte der mittleren Spalte mit
   der Mitte des Streifens zusammen, Cledion steht damit genau unter
   "Trusted by teams at" (Ole 13.09.2026). Der Deckel von 720px haelt die
   Spalten beieinander, sonst zoege 1fr sie ueber die ganze .wrap-Breite.
   flex-wrap bleibt: unterhalb der natuerlichen Breiten bricht die Reihe
   weiter von selbst um, flex:1 1 0 schrumpft nicht unter den Bildinhalt. */
.vertrauen__logos{list-style:none;margin:0 auto;padding:0;max-width:720px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:76px}

.vertrauen__logos li{display:flex;align-items:center}
.vertrauen__logos li:nth-child(1){flex:1 1 0;justify-content:flex-end}
.vertrauen__logos li:nth-child(2){flex:0 0 auto}
.vertrauen__logos li:nth-child(3){flex:1 1 0;justify-content:flex-start}

/* Graustufen mit 70 Prozent Deckung statt Farbe: dieselbe Behandlung, die
   .tafel__siegel vor dem 10.09.2026 fuer die Zertifizierungsbilder hatte
   (Kommentar dazu in entwurf/entwurf.css), hier fuer Logos, die beilaeufig
   Vertrauen stiften sollen, ohne selbst der Beleg zu sein wie dort. */
.vertrauen__logos img{height:28px;width:auto;filter:brightness(0);opacity:.58}
/* Gleiskraft eine Spur groesser als die anderen (Piet 17.09.2026), optisch abgeglichen. */
.vertrauen__logos li:first-child img{height:30px}

/* ── Gleiche Sektionsabstaende (Piet, 17.09.2026) ─────────────────────────
   Referenz ist der Abstand #ablauf -> #sicherheit (192px). Die anderen
   Uebergaenge waren kleiner, deshalb hier die Oberseiten angehoben, damit
   ueberall derselbe Mittelabstand steht. Nur Desktop; auf dem Handy gilt
   mobil.css. Gemessen am gerenderten Layout, nicht aus den Tokens gerechnet. */
@media (min-width:768px){
  #ablauf{padding-top:144px}     /* Logos -> Workflow: 112 -> 192 */
  #aenderung{padding-top:96px}   /* Nachpruefbar -> Drei Probleme: 128 -> 192 */
  #fragen{padding-top:128px}     /* Drei Probleme -> Fragen: 112 -> 192 */
}

/* ================================ sicherheit-wissen.css ================================ */
/* ==========================================================================
   sicherheit-wissen.css
   Fuer zwei Stellen der Startseite: die Kachel ".ez--wissen" in Panel 02 von
   #aenderung, und den Beleg-Block im Sicherheitsblock #sicherheit. Angelegt
   11.09.2026, eigene Datei, weil an entwurf/index.html an diesem Tag
   mehrere Arbeiter parallel bauen und jede Datei nur einer Person gehoeren
   soll, damit sich niemand gegenseitig ueberschreibt. Beim Uebernehmen des
   Entwurfs gehoert dieser Inhalt nach entwurf.css, diese Datei faellt dann
   weg.
   Zweite Runde, noch am 11.09.2026: Ole verwarf die vier Symbol-Karten in
   #sicherheit ("viel zu vibecoded AI slop") und das ueberlappende,
   gedrehte Kartenpaar in der Kachel (das Konzept blieb, die Umsetzung
   nicht). Beide Stellen sind unten komplett neu gefasst.
   Dritte Runde, 13.09.2026: #sicherheit von zwei Spalten auf einen
   mittigen, einspaltigen Aufbau umgestellt (drei Zeilen Ueberschrift,
   umbrechende Siegel und unvollstaendige Trennlinien im Screenshot), die
   Kachel bekommt inhaltsgrosse statt gestreckte Karten, einen mittigen
   Chip und einen Flug ohne Zwischenschritt/Skalierung. Details je an Ort
   und Stelle unten.
   Farben ausschliesslich ueber Tokens aus style.css, entwurf/entwurf.css
   und entwurf/abschnitte.css (dort --strahl), keine eigenen Hex-Werte.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════
   #aenderung, Panel 02: Kachel ".ez--wissen"
   Zweite Fassung. Das Konzept (die Antwort aus dem alten Angebot findet
   von selbst in die neue Frage) blieb, der Auftraggeber wollte aber zwei
   gleich grosse, aufrechte Dokumente nebeneinander statt einer
   ueberlappenden, gedrehten Karte im Hintergrund, und einen Flug ohne
   Ueberschwingen. Die erste Fassung (.ezw-alt hinten gedreht, .ezw-neu
   vorne, Flug mit Ueberschwingen bei 48 %) steht woertlich im Archiv am
   Dateiende von entwurf/index.html.
   ══════════════════════════════════════════════════════════════════════ */

/* Grund der Kachel: derselbe Marken-Verlauf wie ez2--sechs in Panel 03,
   damit beide "Beweis"-Kacheln als zusammengehoeriges Paar wirken. */
.ez--wissen{background:var(--buehne-tief);color:var(--paper)}

/* Groessen-Container nur fuer diese Kachel: macht cqw/cqh fuer Start- und
   Zielkoordinaten des Absatz-Stuecks unten verfuegbar, im selben
   Bezugsrahmen wie das Flex-Layout der beiden Dokumente, damit Start,
   Ziel und Landung bei jeder Kachelbreite zueinander passen. */
.ez--wissen .ez-szene{container-type:size}

/* Takt 12 s statt der 8 s aus szenen.css (".mock.ez *"): eigener,
   spezifischerer Selektor noetig, eine ID schlaegt dort zwei Klassen, weil
   Ole ausdruecklich nur diese eine Kachel langsamer wollte ("langsamer ist
   gut"), ohne den Takt der anderen Kacheln in #aenderung anzufassen.
   ease-in-out statt der cubic-bezier aus szenen.css, weil der Flug des
   Absatz-Stuecks gleichmaessig beschleunigen und wieder abbremsen soll. */
#aenderung .ez--wissen *,
#aenderung .ez--wissen ::before,
#aenderung .ez--wissen ::after{
  animation-duration:12s;animation-iteration-count:infinite;
  animation-timing-function:ease-in-out}

/* ── Die zwei Dokumente: gleich gross, aufrecht, nebeneinander ─────────── */

/* .ezw-paar traegt das Paar und legt die Anordnung fest: Flexbox statt
   absoluter Positionierung wie in der ersten Fassung, damit "gleich gross"
   und "gleicher Abstand" ohne einzeln nachgemessene Breiten gelten, bei
   jeder Kachelbreite. Basis (unter 440 px Containerbreite): gestapelt, alt
   oben, neu unten, wie vorgegeben.
   Dritte Fassung, 13.09.2026: kein position:absolute/inset:0 mehr. Damit
   fuellte das Paar immer die volle Hoehe der Szene und beide Karten wurden
   per align-items:stretch auf diese Hoehe gestreckt ("zu gross, unten
   bleibt viel leere Flaeche"). Jetzt ist .ezw-paar ein normales Flex-Kind
   von .ez-szene, dessen eigene Regel (szenen.css) display:flex;
   justify-content:center bereits mitbringt. Das Paar bekommt dadurch seine
   Inhaltshoehe und steht senkrecht mittig, ohne dass hier etwas Eigenes
   fuer die Zentrierung noetig waere. */
.ezw-paar{display:flex;flex-direction:column;gap:4cqh}

/* Ab 440 px Containerbreite nebeneinander statt gestapelt. Schwelle wie in
   der ersten Fassung (480 px Kachelbreite minus 2x20px --ez-rand unterhalb
   von 520 px, siehe szenen.css), passt weiterhin zur ez-rand-Stufe dort.
   flex:1 1 0 auf beiden Karten macht sie gleich breit.
   align-items:center statt der Standardausrichtung stretch (13.09.2026):
   stretch machte beide Karten so hoch wie die Szene, jetzt behaelt jede
   Karte ihre Inhaltshoehe und beide stehen auf einer gemeinsamen
   Mittellinie. "Gleich gross" gilt damit fuer die Breite, die Hoehe darf
   sich unterscheiden (Alt und Neu haben unterschiedlich viel Inhalt). */
@container (min-width:440px){
  .ezw-paar{flex-direction:row;gap:6cqw;align-items:center}
  .ezw-alt,.ezw-neu{flex:1 1 0}
}

/* ── Alte Karte: "Angebot 2025-114" ─────────────────────────────────────
   Keine Drehung, kein Hinten/Vorne mehr: eine von zwei gleichwertigen
   Karten, Position und Groesse kommen aus .ezw-paar. */
.ezw-alt{background:var(--paper);color:var(--ink);border-radius:12px;
  box-shadow:var(--schatten);padding:14px 16px}

.ezw-alt__zeilen{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.ezw-alt__zeile{display:block;height:7px;border-radius:2px;background:var(--rule-strong)}
  /* Abstrakte graue Balken statt echtem Text, gleiche Machart wie
     ez-blatt__text: die Karte zeigt ein Dokument, kein Zitat. */
.ezw-alt__zeile:nth-child(1){width:92%}
.ezw-alt__zeile:nth-child(2){width:100%}
.ezw-alt__zeile:nth-child(3){width:78%}
.ezw-alt__zeile:nth-child(4){width:86%}

/* ── Neue Karte: "Frage 4.2 · Qualifikation des Personals" ─────────────── */
.ezw-neu{background:var(--paper);color:var(--ink);border-radius:12px;
  box-shadow:var(--schatten);padding:16px 18px}
  /* Gleicher Radius wie .ezw-alt (12px statt vorher 10px/12px getrennt):
     "gleich gross" gilt fuer die ganze Karte, nicht nur die Flaeche. */

.ezw-neu__kopf{margin:0;font-size:13px;font-weight:500;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* white-space:nowrap erzwingt eine Zeile unabhaengig von der
     Kachelbreite. 13px Schrift x 1.3 Zeilenhoehe ergibt exakt 16.9px,
     Grundlage der Zielberechnung fuer das Absatz-Stueck weiter unten. */

.ezw-feld{display:grid;margin-top:10px;min-height:58px}
.ezw-feld>*{grid-area:1/1;align-self:start}
.ezw-platzhalter{display:flex;flex-direction:column;gap:8px;padding-top:2px;opacity:0}
.ezw-platz{display:block;height:8px;border-radius:2px;border:1.5px dashed var(--rule-strong)}
.ezw-platz:nth-child(1){width:100%}
.ezw-platz:nth-child(2){width:68%}
.ezw-feld__text{margin:0;font-size:13px;line-height:1.5;color:var(--ink);opacity:0}
  /* Platzhalter und echter Text uebereinander (grid-area:1/1), damit der
     Wechsel keinen Sprung in der Kartenhoehe ausloest. */

.ezw-chip{display:flex;width:fit-content;margin-inline:auto;align-items:center;
  gap:6px;margin-top:12px;opacity:0}
  /* .ez-chip liefert Pillenform, Grund und Radius bereits (szenen.css).
     display:flex statt inline-flex, plus width:fit-content: erst dadurch
     greift margin-inline:auto, ein inline-flex-Element ignoriert
     Auto-Raender fuer die eigene Position, ein block-level Flex-Element mit
     Inhaltsbreite nicht. So steht der Chip waagerecht mittig in der Karte,
     wie vorgegeben, ohne text-align auf .ezw-neu zu setzen (das wuerde
     auch Kopfzeile und Feldtext zentrieren, beide bleiben linksbuendig). */

/* ── Das Absatz-Stueck: loest sich von der Treffer-Zeile, landet exakt am
   Feldanfang ───────────────────────────────────────────────────────────
   Kein Ueberschwingen mehr (die erste Fassung ueberschoss bei 48 % um 8 %
   des Zielvektors): die Keyframes naehern sich dem Ziel monoton.
   --ezw-dx/--ezw-dy sind der Versatz von der Ruheposition (deckungsgleich
   mit der Treffer-Zeile) zur linken oberen Ecke von .ezw-feld.
   left/top hier sind die Basiswerte vor jeder Breakpoint-Ueberschreibung.
   Seit 13.09.2026 (Zentrierung, siehe .ezw-paar oben) setzen beide
   Container-Anfragen unten links wie oben explizit neu, diese Basiswerte
   werden also nie sichtbar, stehen aber fuer die Herleitung. */
.ezw-stueck{position:absolute;left:16px;top:66.85px;width:80px;height:8px;
  border-radius:4px;background:var(--akzent-hell);box-shadow:var(--schatten);
  opacity:0;--ezw-dx:2px;--ezw-dy:calc(87.9px + 4cqh)}
  /* Ruheposition deckt die Treffer-Zeile ab: links = Innenabstand von
     .ezw-alt (16px), oben = 14px Kartenpolster + 14.85px Zeilenhoehe des
     Labels .ez-mono (11px Schrift x 1.35 geerbte Zeilenhoehe von .mock)
     + 10px Abstand der Zeilenliste + zwei vorangehende Zeilen a 7px mit
     7px Abstand (2 x 14px) = 66.85px. Die Basiswerte von --ezw-dx/--ezw-dy
     gelten fuer die gestapelte Anordnung, siehe Bericht fuer die Rechnung. */

/* ══ Der Takt: Namen und Keyframes, Dauer/Timing kommen von oben ══ */
@media (prefers-reduced-motion: no-preference){
  /* Treffer-Zeile: faerbt sich 10 bis 18 % blau ein (das "Finden" der
     Antwort), haelt bis 86 %, faellt 86 bis 92 % zurueck auf Grau. */
  .ezw-alt__zeile--treffer{animation-name:ezw-treffer}
  @keyframes ezw-treffer{
    0%,10%{background-color:var(--rule-strong)}
    18%,86%{background-color:var(--akzent-hell)}
    92%,100%{background-color:var(--rule-strong)}}

  /* Absatz-Stueck: erscheint bei 22 %, haelt auf der Treffer-Zeile bis
     29 %, fliegt dann in einem einzigen Abschnitt (29 bis 38 %, neun
     Prozent des Takts) ohne Zwischenpunkt und ohne Skalierung zum Feld,
     mit einer eigenen weichen Kurve (cubic-bezier(.4,0,.2,1) statt dem
     ease-in-out der Regel oben, nur fuer dieses Stueck der Bahn gesetzt).
     Der alte Zwischenschritt bei 30 % (scale(1.08) auf 0,6 der Strecke)
     bremste und beschleunigte sichtbar mitten im Flug, deshalb raus.
     Landet bei 38 % exakt auf dem Zielwert, verschwindet an Ort und Stelle
     (38 bis 39 %), bevor die Position 39 bis 40 % lautlos zurueckspringt,
     waehrend opacity bereits 0 ist. 38/39/40 % bleiben unveraendert, damit
     .ezw-platzhalter/.ezw-feld__text/.ezw-chip weiter im Takt bleiben. */
  .ezw-stueck{animation-name:ezw-stueck}
  @keyframes ezw-stueck{
    0%,22%{opacity:0;transform:translate(0,0)}
    24%{opacity:1;transform:translate(0,0)}
    29%{opacity:1;transform:translate(0,0);animation-timing-function:cubic-bezier(.4,0,.2,1)}
    38%{opacity:1;transform:translate(var(--ezw-dx),var(--ezw-dy))}
    39%{opacity:0;transform:translate(var(--ezw-dx),var(--ezw-dy))}
    40%,100%{opacity:0;transform:translate(0,0)}}

  /* Platzhalter: sichtbar bis das Stueck gelandet ist, weg 38 bis 44 %,
     kommt 92 bis 98 % fuer die naechste Runde zurueck. */
  .ezw-platzhalter{animation-name:ezw-platzhalter}
  @keyframes ezw-platzhalter{
    0%,38%{opacity:1}
    44%,92%{opacity:0}
    98%,100%{opacity:1}}

  /* Echter Text: erscheint 38 bis 44 % anstelle des Platzhalters, bleibt
     bis 86 % sichtbar, blendet mit der Treffer-Zeile 86 bis 92 % aus. */
  .ezw-feld__text{animation-name:ezw-text}
  @keyframes ezw-text{
    0%,38%{opacity:0}
    44%,86%{opacity:1}
    92%,100%{opacity:0}}

  /* Chip: erscheint 44 bis 50 %, nach dem Text wie vorgegeben, bleibt bis
     86 %, blendet 86 bis 92 % aus. */
  .ezw-chip{animation-name:ezw-chip}
  @keyframes ezw-chip{
    0%,44%{opacity:0;transform:scale(.85)}
    50%,86%{opacity:1;transform:none}
    92%,100%{opacity:0;transform:none}}
}

/* ── Reduzierte Bewegung: Endbild steht still ──────────────────────────
   Beide Dokumente stehen ohnehin fest (keine Animation auf .ezw-alt/
   .ezw-neu, anders als die erste Fassung). Nur der Zielzustand: die
   Antwort ist bereits geliefert, Treffer-Zeile blau, Stueck unsichtbar,
   Text und Chip sichtbar. */
@media (prefers-reduced-motion: reduce){
  .ezw-alt__zeile--treffer{background-color:var(--akzent-hell)}
  .ezw-stueck{opacity:0}
  .ezw-platzhalter{opacity:0}
  .ezw-feld__text{opacity:1}
  .ezw-chip{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════════════════
   #sicherheit: mittig und einspaltig statt zweispaltig
   Dritte Fassung, 13.09.2026. Ole sah am Bildschirm: die Ueberschrift auf
   drei Zeilen, die Siegel links auf zwei Zeilen umgebrochen, dazu graue
   Trennlinien in der blauen Flaeche, die "nicht vollstaendig und komisch"
   wirkten. Ursache der Linien: das zweispaltige Aussen-Grid (5fr/7fr)
   streckte .beleg__flaeche per align-self:stretch auf die Hoehe der
   linken Spalte (Kopf plus Siegel plus Hinweis), die fuer die vier Punkte
   noetige Hoehe war kleiner, die Trennlinien liefen deshalb nur bis zum
   Ende ihres eigenen Inhalts und liessen darunter sichtbar leeres Blau.
   Neu: kein Aussen-Grid mehr. .beleg bleibt in jeder Breite
   display:contents, Kopf, Flaeche, Siegel und Hinweis stehen als normale,
   volle Bloecke in der vorgegebenen Reihenfolge in .wrap, jeder fuer sich
   mittig. Kopf, Flaeche, Siegel und Hinweis standen schon in der zweiten
   Fassung in dieser Reihenfolge im Markup, es aendert sich nur das CSS,
   deshalb kein Eintrag im Archiv noetig. */

/* .beleg bleibt in jeder Breite display:contents: Kopf, Flaeche, Siegel und
   Hinweis sind normale Bloecke im Fluss von .wrap, in der Reihenfolge, die
   auch angezeigt wird. Kein Grid mehr, weil nichts mehr nebeneinander
   steht, alles steht zentriert untereinander. */
.beleg{display:contents}

/* Ueberschrift in voller --fs-h2-Groesse wie jede andere h2 der Seite. Der
   fruehere eigene Deckel von 34px fiel sofort als zu klein auf (Ole,
   13.09.2026). Einzeilig bleibt sie trotzdem, sie braucht dafuer nur mehr
   Platz als die 820px von .kopf--zentriert, deshalb hier max-width:none auf
   dem Kopf. Im Browser nachgemessen (Canvas, Inter, Schnitt 500): der Satz
   ist 844px breit bei 52px Schrift und 696px bei den 42.9px, die die Kurve
   an der 900px-Schwelle liefert. Der Innenraum von .wrap liegt dort bei
   852px und ab rund 1322px Fenster bei 1274px, beides reicht. Der Vorspann
   bleibt ueber .kopf--zentriert .intro (style.css) auf Lesebreite. */
@media (min-width:900px){
  #sicherheit .kopf{max-width:none}
  #sicherheit h2{font-size:var(--fs-h2);white-space:nowrap}
}

/* ── Die Flaeche: ueber die volle Breite von .wrap ─────────────────────── */
/* Vierte Fassung, 15.09.2026. Ole sah am Bildschirm: "gequetscht und komisch",
   nicht so clean wie die uebrigen Bloecke. Gemessen war die Flaeche 1312 breit
   und 259 hoch, ein Verhaeltnis von 5:1, waehrend die Panels in #aenderung bei
   1312 auf 584 stehen. Dazu hingen die fuenf Siegel und ihr Hinweis frei unter
   der Flaeche, in 64px Hoehe, also genau wieder als der "Fussnoten-Streifen",
   den entwurf.css beim Vergroessern auf 104px schon einmal abgeschafft hatte.
   Drei Aenderungen, kein Bestandteil faellt weg:
   a) Das Polster sitzt nicht mehr auf der Flaeche, sondern auf der Liste der
      vier Punkte. Nur so laeuft der helle Nachweis-Streifen unten bis an die
      Kanten der Flaeche. overflow:hidden haelt ihn in der Rundung.
   b) Ab 900px steigt das Polster ueber und unter den Punkten von 48 auf 96,
      seitlich bleibt es bei 48: die vier Spalten behalten ihre 268px Breite,
      kein Titel bricht anders um als vorher.
   c) Siegel und Hinweis stehen jetzt in der Flaeche, auf hellem Grund. */
.beleg__flaeche{margin-top:var(--s8);background:var(--buehne-tief);
  color:var(--paper);border-radius:24px;padding:0}
  /* Polster von --s8 (64px) auf --s6 (32px): "deutlich flacher", die vier
     Punkte stehen jetzt in einer Reihe statt im 2x2-Raster und brauchen
     die Hoehe nicht mehr. Radius unveraendert (24px, wie .mock/.panel).
     margin-top gilt jetzt bei jeder Breite, es gibt kein Aussen-Grid mehr,
     das den Abstand ab 900px selbst uebernehmen wuerde. */

.beleg__liste{display:grid;grid-template-columns:1fr;row-gap:var(--s6);
  padding:var(--s7)}
  /* Unter 600 px: eine Spalte, wie vorgegeben. */

  /* Keine Trennlinien mehr zwischen den Punkten, weder waagerecht noch
     senkrecht ("die grauen linien raus", Ole 13.09.2026). Die Trennung
     tragen jetzt row-gap und column-gap allein. */

@media (min-width:600px) and (max-width:899.98px){
  .beleg__liste{grid-template-columns:1fr 1fr;column-gap:var(--s7)}
    /* 600 bis 899 px: zwei Spalten, wie vorgegeben. */
}

@media (min-width:900px){
  .beleg__liste{grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto auto;
    column-gap:var(--s7);row-gap:0;padding:var(--s9) var(--s7)}
    /* Ab 900 px: eine Reihe mit vier Spalten. Der Spaltenabstand steigt von
       --s6 auf --s7 (48px), weil er die Trennung ohne die entfernten
       senkrechten Linien allein tragen muss. */
  .beleg__punkt{display:grid;grid-template-rows:subgrid;grid-row:span 3}
    /* Nummer, Titel und Text liegen damit in drei Reihen des aeusseren
       Rasters statt in vier unabhaengigen Kaesten. Alle vier Texte starten
       dadurch auf derselben Hoehe, egal ob ein Titel zwei, drei oder vier
       Zeilen braucht (Ole 13.09.2026). Ohne subgrid stimmte die Hoehe nur
       zufaellig: bei 1024px nahm "Ihre Unterlagen bleiben in Deutschland"
       drei Zeilen und schob seinen Text 26px tiefer als die anderen,
       gemessen im Browser. Die drei Kinder muessen drei bleiben. */
}

/* Der <br> in Punkt 01 wirkt nur, solange die Punkte nebeneinander stehen.
   Gestapelt ist die Spalte breit genug, dort waere ein erzwungener Umbruch
   in "Jede Angabe mit Fundstelle" willkuerlich. */
.beleg__punkt h3 br{display:none}
@media (min-width:900px){
  .beleg__punkt h3 br{display:inline}
}

.beleg__nr{font-family:var(--font-mono);font-size:var(--fs-mono);
  color:var(--strahl);margin-bottom:var(--s5)}
  /* 15.09.2026: --s4 auf --s5, und der Titel gibt unten --s3 auf --s4 ab.
     Zusammen mit dem groesseren Polster nimmt das den Punkten das Gedraengte,
     ohne dass eine Spalte schmaler wird. */
  /* Ersetzt Symbol in blauem Kaestchen: Nummer in Mono und --strahl statt
     Icon, wie vorgegeben. Groesse/Abstand wie .panel__nr auf derselben
     Seite (panel.css), gleiche Rolle als nummerierter Vorspann. */

/* 1.125rem bis 1.25rem statt fest 1.25rem: groesser, wie gefordert, aber in
   den schmalen Spalten unter 1280px nicht so gross, dass jeder Titel drei
   oder vier Zeilen braucht. Untere Grenze ist die Groesse von vorher. */
.beleg__punkt h3{color:var(--paper);font-size:clamp(1.125rem,0.66rem + 0.83vw,1.25rem);font-weight:500;
  line-height:1.3;margin:0 0 var(--s4);hyphens:manual}
  /* Weiss auf dem Marken-Verlauf, wie vorgegeben. Groesse/Gewicht wie
     zuvor bei .zusage__karte h3. hyphens:manual verhindert haessliche
     Trennungen in den kurzen Titeln. */

.beleg__punkt p{margin:0;color:var(--invert-ink2);
  font-size:clamp(0.9375rem,0.77rem + 0.29vw,1rem);line-height:1.55}
  /* --invert-ink2 wie vorgegeben, Groesse/Zeilenhoehe wie zuvor bei
     .zusage__karte p. */

/* ── Die fuenf Siegel: heller Streifen im Fuss der Flaeche ─────────────── */
/* 15.09.2026: Siegel und Hinweis standen frei unter der blauen Flaeche und
   fielen dort auseinander, die Flaeche endete abrupt. Jetzt tragen sie
   gemeinsam den Fuss der Flaeche, auf hellem Grund, weil die Siegel dunkle
   Schrift auf durchsichtigem Grund haben und auf Navy nicht lesbar waeren.
   Der Streifen laeuft bis an die Kanten, die Rundung kommt aus overflow:hidden
   der Flaeche. */
/* 15.09.2026, zweiter Anlauf: der Streifen ist wieder raus. Ole sah ihn am
   Bildschirm und entschied, dass es nur einen blauen Block geben soll, rundum
   abgerundet, mit oben und unten gleich viel Blau, und die Siegel darunter
   ohne Kasten und ohne eigenen Grund. Die Flaeche traegt deshalb nur noch die
   vier Punkte; ihr Polster von 96 oben und unten (in .beleg__liste) bleibt,
   das war die Groesse, die Ole behalten wollte. */
#sicherheit .tafel__siegel{justify-content:center;margin:var(--s8) auto 0;
  max-width:280px}
  /* justify-content:center statt der geerbten flex-start (entwurf.css):
     die Siegel stehen jetzt mittig unter der Flaeche statt am linken Rand
     der frueheren Spalte. margin-inline:auto zentriert die Liste selbst.
     max-width:235px erzwingt den Umbruch unter 900px unabhaengig von der
     verfuegbaren Breite (die Flaeche ist jetzt die volle .wrap-Breite,
     ohne Deckel wuerden alle fuenf Siegel schon auf dem Handy in eine
     Reihe passen). Drei Siegel plus zwei Abstaende (--s6, 32px) brauchen
     197.5px, vier plus drei 274px, 235px liegt sicher dazwischen: Umbruch
     nach drei, wie beim vorherigen Zweispalten-Deckel (dort 250px bei
     76px Hoehe), hier nur an die neue, kleinere Hoehe angepasst.
     15.09.2026 auf 280px nachgezogen: bei 88px Hoehe ist ein Siegel 61.2px
     breit, drei plus zwei Abstaende brauchen 247.6px, vier plus drei 340.8px.
     235px haetten jetzt schon nach zwei Siegeln umgebrochen. */
#sicherheit .tafel__siegel img{height:88px}
  /* Ueberschreibt die 104px/84px aus entwurf/entwurf.css (dort nicht
     angefasst, mehrere Arbeiter teilen sich index.html/entwurf.css heute).
     15.09.2026 von 64px auf 88px: entwurf.css hat die Siegel einmal von 78px
     auf 104px vergroessert, weil sie sich sonst "wie ein Fussnoten-Streifen"
     lasen. Genau dahin waren die 64px zurueckgefallen. Bei 88px Hoehe und dem
     Seitenverhaeltnis 89:128 aus den Bild-Attributen ist ein Siegel
     rechnerisch 61.2px breit, fuenf Siegel plus vier Abstaende brauchen
     434px, das passt ab 900px sicher in den Streifen. */
@media (min-width:900px){
  #sicherheit .tafel__siegel{max-width:none}
    /* Ab 900px kein Deckel mehr: alle fuenf passen in einer Reihe
       (350.5px, siehe oben), wie vorgegeben, Umbruch erst darunter. */
}

#sicherheit .tafel__hinweis{text-align:center}

/* 15.09.2026: der Abstand vom Hinweis unter den Siegeln bis zur Ueberschrift
   "Drei Probleme weniger pro Verfahren" war zu gross (128 Bodenpolster hier
   plus 64 Kopfpolster dort). Hier faellt eine Sprosse weg, dort zwei; die
   Sektion behaelt oben ihre 128, nur unten schliesst sie enger an. */
#sicherheit{padding-bottom:var(--s9)}
  /* Mittig statt der geerbten Standardausrichtung, wie vorgegeben. */

/* ══════════════════════════════════════════════════════════════════════
   Kein Silbentrennen in kurzen Saetzen (Kartentext #sicherheit, Antwort-
   text der Kachel in #aenderung)
   ══════════════════════════════════════════════════════════════════════ */

/* Fix 11.09.2026: body{hyphens:auto} in style.css trennt Fliesstext
   automatisch, sichtbar als "Speiche-rung" und "freigege-ben" in den
   Beleg-Punkten sowie "jaehr-lich" im Antworttext der Kachel. Bei diesen
   kurzen Ein-Satz-Texten faellt jede Trennung sofort auf, deshalb hier
   hyphens:manual (kein automatisches Trennen ohne weiches Trennzeichen im
   Text). text-wrap:pretty verhindert zusaetzlich einzelne kurze Wortreste
   als letzte Zeile. */
#sicherheit .beleg__punkt p, #aenderung .ezw-feld__text{
  -webkit-hyphens:manual;hyphens:manual;text-wrap:pretty}

/* ── Kachel 02: gleich breite Dokumente, exakte Landung (Planer, 11.09.2026) ──
   Ohne min-width:0 erzwang die nicht umbrechende Kopfzeile rechts eine breitere
   Karte (bei 1280: 159 zu 277 px), die Flugbahn rechnet aber mit zwei gleich
   breiten Karten; das Stueck landete 4 bis 9 px daneben. */
.ezw-alt,.ezw-neu{min-width:0}
/* Untereinander: beide Karten in ihrer natuerlichen Hoehe und fester Abstand,
   dann ist der Weg vom Treffer ins Feld eine feste Strecke. */
@container (max-width:439.98px){
  .ezw-paar{gap:10px}
  .ezw-alt,.ezw-neu{flex:0 0 auto}
  .ezw-stueck{left:16px;top:66.85px;--ezw-dx:2px;--ezw-dy:87.9px}
    /* --ezw-dy unveraendert (87.9px): Alt und Neu ruecken beim Zentrieren
       gemeinsam als Paar, der Abstand zwischen Treffer und Feldanfang
       aendert sich dadurch nicht (Rechnung im Bericht). top dagegen schon:
       vorher stand das Paar per inset:0 fest bei Y 0 der Szene, jetzt ist
       es nur 268.75px hoch (101.85 Alt + 10 Luecke + 156.9 Neu) und steht
       mittig in der Szene, die Paar-Mitte liegt bei 50% der Szenenhoehe.
       Treffer sitzt 66.85px ab der (jetzt selbst mittig stehenden)
       Paar-Oberkante, das sind 134.375 - 66.85 = 67.525px oberhalb der
       Paar-Mitte, also top:calc(50% - 67.525px). */
}
/* Nebeneinander: gleiche Innenabstaende und gleich hohe Kopfzeilen (zwei
   Zeilen), damit die lange Frage umbrechen darf und Treffer wie Feld in
   beiden Karten auf festen Hoehen sitzen.
   13.09.2026, wegen align-items:center oben (Kachel kleiner, mittig): Alt
   (125px Inhaltshoehe: 16 Polster + 34 Kopf + 10 Abstand + 49 vier Zeilen +
   16 Polster) und Neu (174px: 16 + 34 + 10 + 58 Feld + 12 Abstand + 28 Chip
   + 16) stehen nicht mehr auf einer Oberkante, sondern zentriert
   zueinander: Neu, die hoehere, an der Paar-Oberkante, Alt um
   (174 - 125) / 2 = 24.5px tiefer. Treffer liegt 88px ab Alt-Oberkante,
   also 112.5px ab der Paar-Oberkante; Feldanfang liegt 60px ab
   Neu-Oberkante, also ebenfalls 60px ab der Paar-Oberkante. --ezw-dy ist
   die Differenz: 60 - 112.5 = -52.5px. Das Paar selbst steht mittig in der
   Szene (Paar-Hoehe 174px), die Paar-Mitte liegt bei 50% der Szenenhoehe,
   Treffer sitzt 112.5 - 87 = 25.5px darunter, also top:calc(50% + 25.5px).
   --ezw-dx bleibt 53cqw, die Breite der Karten aendert sich durch die
   Zentrierung nicht. */
@container (min-width:440px){
  .ezw-alt,.ezw-neu{padding:16px 18px}
  .ezw-alt .ez-mono,.ezw-neu__kopf{height:34px;margin:0;overflow:hidden}
  .ezw-neu__kopf{white-space:normal;text-overflow:clip}
  .ezw-stueck{left:18px;top:88px;--ezw-dx:53cqw;--ezw-dy:-28px}
}
/* Auf schmalen Schirmen passt das untereinander stehende Paar nicht in 4:3;
   quadratisch hat es Platz. */
@media (max-width:700px){#aenderung .ez--wissen{aspect-ratio:1/1}}
/* Einleitung im Sicherheitsblock ohne Silbentrennung ("Nachfra-ge"). */
#sicherheit .intro{-webkit-hyphens:manual;hyphens:manual;text-wrap:pretty}

/* Karten oben buendig statt jede fuer sich mittig (Planer, 13.09.2026): mittig
   haengt der senkrechte Versatz an den Kartenhoehen, und die aendern sich, sobald
   der Antworttext anders umbricht; die Landung lag dadurch 10 px daneben. Oben
   buendig ist der Versatz konstant: Feldanfang 60 px, Trefferzeile 88 px, also -28 px.
   Das Paar selbst bleibt senkrecht mittig in der Szene. */
@container (min-width:440px){
  .ezw-paar{align-items:flex-start}
}

/* Das Stueck ist jetzt ein Kind der linken Karte: sein Start liegt fest auf der
   Trefferzeile, egal wo das mittig gesetzte Paar steht. Vorher hing er an der
   Szenenmitte und damit an der Hoehe der hoeheren Karte (Planer, 13.09.2026). */
.ezw-alt{position:relative;z-index:2}
.ezw-neu{position:relative;z-index:1}

/* Wird die Karte schmal, fuellt der Chip ihre Breite und sein Inhalt stand links
   (bei 1280 acht Pixel neben der Mitte). Inhalt zusaetzlich mittig setzen. */
.ezw-chip{justify-content:center;text-align:center;max-width:100%}
/* Der Chip war bei schmalen Karten breiter als der Platz (199 gegen 182 px bei
   1280), lief rechts ueber und bekam dadurch einen negativen Aussenabstand. Er
   darf jetzt umbrechen statt ueberzulaufen. */
.ezw-chip .ez-mono{white-space:normal}

/* ================================ mobil.css ================================ */
/* ============================================================================
   mobil.css - alle Handy-Anpassungen der Startseite an einem Ort.
   Wird als LETZTE Stylesheet geladen, gewinnt also bei gleicher Spezifitaet.
   Greift nur unter 768px, die Desktop-Ansicht bleibt unberuehrt.
   ========================================================================= */

@media (max-width: 767px){

  /* 1. Nav-Insel flacher, Logo dominanter, Demo-Knopf eine Spur kleiner. */
  .nav__in{padding-top:9px; padding-bottom:9px}
  .nav__mark img{height:23px}
  .nav__ctas .btn--sm{font-size:13px; padding:7px 15px; min-height:0}

  /* 2. HERO: E-Mail-Feld und Demo-Knopf raus (Demo steht im Header). */
  .hero .fang{display:none}
  /* Die Subline trug 64px Abstand nach unten, gedacht als Luft zum Feld. Ohne
     Feld steht danach nichts mehr und der Abstand blieb als Loch stehen.
     Gehoert zur Zeile darueber: kommt das Feld auf dem Handy zurueck, gehen
     beide Zeilen zusammen wieder raus. */
  .hero .hero__sub{margin-bottom:0}

  /* 3. HERO neu geordnet: die Animation ueber die Ueberschrift, mittig und kompakt.
        Der Hero fuellt nicht den ganzen Screen, damit Trusted-by ins erste Bild rueckt. */
  /* 15.09.2026, min-height raus: die Hoehe war auf einen Hero mit E-Mail-Feld
     gerechnet. Ohne das Feld blieben auf 375x812 rund 215px uebrig, die
     .hero{align-content:center} je zur Haelfte ueber und unter den Inhalt
     legte; unter der Subline standen 156px Leere, die wie ein Ladefehler aussah.
     Ohne Mindesthoehe ist der Hero so hoch wie sein Inhalt, rund 420px, und es
     kann kein Rest mehr verteilt werden. Das Polster bleibt, wie es war, und
     Trusted-by rueckt dadurch noch weiter ins erste Bild. */
  .hero{min-height:auto; padding-block:var(--s5) var(--s6)}
  .hero__grid{display:flex; flex-direction:column; gap:var(--s3)}
  .hero__platz{order:-1; min-height:180px; margin-top:0; margin-bottom:var(--s6)}
  /* Die Marke exakt mittig: die 430px breite Buehne im Container zentrieren,
     sonst sitzt das skalierte Endbild rechts der Mitte. */
  .anflug{inset:0; justify-content:center; align-items:center}
  .anflug__marke{transform:translateX(-19px) scale(.44)}
  .hero h1{font-size:clamp(1.95rem, 8.4vw, 2.55rem); line-height:1.06; margin-bottom:0}
  .hero__sub{font-size:var(--fs-small); line-height:1.5; margin-top:var(--s4)}

  /* 4. Trusted-by soll das Unterste im ersten Bild sein, mit Weissraum darunter,
        aber ohne dass das blaue Band schon durchblitzt. */
  .vertrauen{padding-top:var(--s3); padding-bottom:var(--s5)}

  /* Logo-Zeile auf dem Handy: natuerliche Breiten, sauber umbrechen (2+1).
     Die Desktop-Zentrierung (flex:1 fuer Cledion mittig) wuerde hier die
     aeusseren Logos an den Rand quetschen, deshalb zurueckgesetzt. */
  .vertrauen__logos{gap:24px 44px}
  .vertrauen__logos li,
  .vertrauen__logos li:nth-child(1),
  .vertrauen__logos li:nth-child(2),
  .vertrauen__logos li:nth-child(3){flex:0 0 auto; justify-content:center}

  /* 5. ABLAUF: erst die Ueberschrift und die Schritte, dann die Animation.
        (Das ist das Standardverhalten aus style.css, keine eigene Umkehr noetig.) */

  /* 6. DREI PROBLEME: erst der Problemtext, direkt darunter seine Animation.
        Damit ist klar, welcher Text zu welcher Animation gehoert. Keine order-Regel,
        die HTML-Reihenfolge (Text, dann Kachel) passt bereits. Mehr Luft nach der
        Ueberschrift und zwischen den Karten. */
  #aenderung .kopf{margin-bottom:var(--s8)}
  /* Panel 2 hat auf Desktop die Kachel links (order -1); auf dem Handy soll
     auch hier erst der Text, dann die Animation kommen wie bei 1 und 3. */
  #aenderung .panel:nth-child(2) .panel__kachel{order:0}
  #aenderung .panels{gap:var(--s9)}
  .panel__in{gap:var(--s4)}

  /* 9. Kontakt-Knopf unten eine Spur kleiner. */
  #kontakt .btn--pri.btn--pfeil{font-size:14px; padding:10px 20px}

  /* Das Band selbst wieder flacher. abschnitte.css hat es am 15.09.2026 auf
     --s10 vergroessert, das galt dem Desktop; auf dem Handy nahm es damit 415
     von 812px, also den halben Bildschirm, fuer eine Zeile und einen Knopf.
     Mit --s8 sind es rund 287px. Der Desktop behaelt seine --s10. */
  #kontakt{padding-block:var(--s8)}

  /* 10. Footer kompakter, weniger Weissraum zwischen den Spalten. */
  .fuss__marke{display:none}
  .fuss{padding-block:var(--s6)}
  .fuss__raster{gap:var(--s5)}
  .fuss__spalte{margin-bottom:0}
}

/* ============================================================================
   Drei-Probleme-Mockups: auf dem Handy ist die 4:3-Kachel schmal, die festen
   Schriftgroessen der Produktnachbildung passen sonst nicht rein (Text bricht,
   Inhalt laeuft unten raus, v.a. Karte 1 und 3). Etwas mehr Hoehe und der
   Szeneninhalt eine Spur kleiner, damit alles vollstaendig sichtbar ist.
   zoom statt transform, damit die Ablauf-Animationen (transform) unberuehrt bleiben.
   ========================================================================= */
@media (max-width: 767px){
  .panel__kachel .mock.ez, .panel__kachel .mock.ez2{aspect-ratio:1/1}
  .panel__kachel .ez-szene, .panel__kachel .ez2-szene{zoom:.82}
}