/* ==========================================================================
   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)}
}