@charset "utf-8";
/* ==========================================================================
   LUMORA AUTOMATION — Stylesheet
   --------------------------------------------------------------------------
   Gestalterische Welt: "Leitstand".
   Lumora baut Abläufe, die überwacht laufen und sich melden, wenn ein Mensch
   entscheiden muss. Die Seite ist danach gebaut: eine helle, präzise
   Arbeitsfläche für alles, was der Kunde liest, und eine dunkle
   Instrumentenbahn für den Ablauf, der weiterläuft, wenn niemand hinsieht.

   Zwei Signalfarben, beide tragen Information, keine Dekoration:
     Blau   — Lumora, Verweise, Handlung
     Bernst — die Stelle, an der ein Mensch entscheiden muss

   Schreibmaschinenschrift steht ausschließlich für Messbares: Uhrzeiten,
   Anlagennummern, Zustände, Dauer. Nie als Kostüm für "technisch".
   ========================================================================== */

@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(geist-latin.woff2)format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(geist-latin-ext.woff2)format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --- Marken- und Systemwerte --------------------------------------------- */
:root{
  --paper:#fbfbfc;
  --paper-2:#f1f2f6;
  --card:#ffffff;
  --ink:#101319;
  --ink-2:#494f60;
  --ink-3:#6a7080;
  --rule:#e4e6ec;
  --rule-2:#ccd0da;

  --blue:#1135ea;
  --blue-dark:#0e2bc4;
  --blue-wash:#eef1fe;

  /* Bernstein steht für genau einen Zustand: hier entscheidet ein Mensch. */
  --signal:#a35a06;
  --signal-wash:#fdf4e6;
  --signal-rule:#e6c495;

  --night:#0c0f16;
  --night-2:#141822;
  --night-ink:#e9ebf1;
  --night-ink-2:#949bad;
  --night-rule:#252b37;
  --night-blue:#7f95ff;

  --font:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --wrap:70rem;
  /* Der breite Satzspiegel: Auftakt und Werkzeugband teilen ihn sich, damit
     das Etikett auf der Kante der Überschrift beginnt und das Band exakt
     dort endet, wo das Video endet. */
  --wrap-wide:82rem;
  --measure:36rem;
  --rail:10.5rem;
  --gutter:clamp(1.25rem,5cqw,3rem);
  --gap-sec:clamp(4rem,8cqw,7rem);

  --logo-ink:#101319;
  --logo-blue:#1135ea;

  --r:5px;
  --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* --- Grundlagen ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
body{margin:0;background:var(--paper);font-family:var(--font)}

.site{
  container-type:inline-size;container-name:site;
  background:var(--paper);color:var(--ink);
  font-size:1.0625rem;line-height:1.6;letter-spacing:-.003em;font-weight:400;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:600;text-wrap:balance;overflow-wrap:break-word}
h1{font-size:clamp(2.375rem,5.4cqw,3.75rem);line-height:1.03;letter-spacing:-.035em}
h2{font-size:clamp(1.75rem,3.4cqw,2.375rem);line-height:1.12;letter-spacing:-.027em}
h3{font-size:1.1875rem;line-height:1.32;letter-spacing:-.014em}
h4{font-size:1.0625rem;line-height:1.35;letter-spacing:-.01em}
p{margin:0;text-wrap:pretty;overflow-wrap:break-word}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
svg{display:block;max-width:100%}
strong{font-weight:600;color:var(--ink)}
hr{border:0;border-top:1px solid var(--rule);margin:0}

/* Die Flächen, die der Browser stellt, gehören auch zur Gestaltung. */
::selection{background:var(--blue-wash);color:var(--ink)}
:where(a,button,summary,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}
:root{scrollbar-color:var(--rule-2) transparent}

.wrap{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:max(var(--gutter),env(safe-area-inset-left))
                 max(var(--gutter),env(safe-area-inset-right));
}
.skip{
  position:absolute;left:var(--gutter);top:1rem;z-index:60;
  transform:translateY(-250%);background:var(--blue);color:#fff;
  padding:.65rem 1.1rem;border-radius:var(--r);font-size:.9375rem;font-weight:500;
  transition:transform .18s var(--ease);
}
.skip:focus-visible{transform:none;text-decoration:none}

/* Auszeichnung für Messbares: Zeiten, Kennungen, Zustände, Dauer. */
.label{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;
}
.mono{font-family:var(--mono);font-size:.8125rem;letter-spacing:.01em;color:var(--ink-3)}

/* display:block ist noetig: als Inline-Bild sitzt das Logo auf der
   Schriftlinie, darunter bleibt Platz fuer Unterlaengen und es steht
   dadurch zu hoch im Kopf. */
.logo{display:block;width:9rem;height:auto;aspect-ratio:5/2}

/* Auszufüllende Stelle. Rot, aber zurückhaltend: eine Zeile, kein Kasten.
   Vor dem Livegang alle Hinweise entfernen, zu finden mit
   grep -rn 'class="todo' *.html — danach kann auch dieser Block weg. */
.todo{
  font-family:var(--mono);font-size:.75rem;line-height:1.55;
  color:#c81e2b;letter-spacing:.005em;
}
.todo::before{content:"Fehlt noch: ";font-weight:600}
.todo-block{display:block;margin:.85rem 0;max-width:42rem}
@media print{
  /* Auf Papier gibt es nichts zum Aufklappen. */
  .fragen details .antwort{display:block}
  .fragen .zeichen{display:none}.todo{display:none}}

/* --- Knöpfe und Verweise -------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:2.75rem;padding:.5rem 1.25rem;border:1px solid transparent;border-radius:var(--r);
  background:var(--blue);color:#fff;font:inherit;font-size:.9375rem;font-weight:500;
  letter-spacing:-.006em;cursor:pointer;text-decoration:none;text-align:center;
  transition:background .14s var(--ease),transform .14s var(--ease);
}
.btn:hover{background:var(--blue-dark);text-decoration:none;color:#fff}
.btn:active{transform:translateY(1px)}
.btn--lg{min-height:3.25rem;padding:.6rem 1.75rem;font-size:1.0625rem}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn--ghost:hover{background:var(--paper-2);color:var(--ink)}
/* Weiß: der zweite Weg neben dem blauen Knopf. Auf dem getönten Grund des
   Kontaktblocks hebt sich Weiß ab, ohne mit Blau um Aufmerksamkeit zu
   streiten. */
.btn--weiss{
  background:var(--card);color:var(--ink);border-color:var(--rule-2);
  box-shadow:0 1px 2px rgba(16,19,25,.05);
}
.btn--weiss:hover{background:var(--card);color:var(--ink);border-color:var(--ink-3)}
.btn--weiss .ico{width:1.05em;height:1.05em;color:var(--ink-2);stroke-width:1.7}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}

.tlink{display:inline-flex;align-items:center;gap:.4rem;font-size:1rem;font-weight:500}
.tlink svg{width:1em;height:1em;stroke:currentColor;stroke-width:1.75;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--ease)}
.tlink:hover svg{transform:translateX(3px)}

/* --- Kopfleiste ----------------------------------------------------------- */
.head{
  position:sticky;top:0;z-index:40;background:rgba(251,251,252,.88);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
.head .wrap{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:1.5rem;min-height:4.25rem;
  /* Randlos: Logo und Knopf sitzen am Seitenrand, nicht an der Kante der
     Textspalte. „none" ist noetig, weil .wrap sonst auf 70rem begrenzt. */
  max-width:none;
}
.head .wrap > a:first-of-type{justify-self:start}
.nav{display:flex;gap:.25rem;justify-self:center}
.nav a{
  display:flex;align-items:center;min-height:2.25rem;padding:.4rem .7rem;border-radius:var(--r);
  font-size:.9375rem;color:var(--ink-2);font-weight:450;
  transition:background .12s var(--ease),color .12s var(--ease);
}
.nav a:hover{background:var(--paper-2);color:var(--ink);text-decoration:none}

/* --- Klappmenü unter Leistungen ------------------------------------------
   Kein JavaScript: Es öffnet bei :hover und bei :focus-within, damit auch
   die Tastatur hineinkommt. Auf dem Telefon gibt es kein Klappmenü, dort
   stehen die Unterpunkte eingerückt im Menü. Ohne Zeigegerät führt der
   Hauptpunkt auf die Überblicksseite, dort stehen alle 3 Felder.
   -------------------------------------------------------------------------- */
.nav-klapp{position:relative;display:flex}
.nav-menu{
  position:absolute;top:100%;left:0;z-index:60;min-width:12.5rem;
  display:flex;flex-direction:column;padding:.4rem;margin-top:.15rem;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:0 8px 24px rgba(16,19,25,.1),0 1px 2px rgba(16,19,25,.06);
  opacity:0;visibility:hidden;transform:translateY(-.25rem);
  transition:opacity .14s var(--ease),transform .14s var(--ease),visibility .14s;
}
.nav-klapp:hover .nav-menu,
.nav-klapp:focus-within .nav-menu{opacity:1;visibility:visible;transform:none}
/* Die Lücke zwischen Punkt und Klappe überbrücken, sonst schliesst sie,
   sobald der Zeiger die Lücke quert. */
.nav-klapp::after{content:"";position:absolute;top:100%;left:0;right:0;height:.4rem}
.nav-menu a{white-space:nowrap;font-size:.9375rem}
.nav-menu a[aria-current="page"]{color:var(--blue);background:var(--blue-wash)}
/* Auf einer der 3 Feldseiten ist der Hauptpunkt nicht die aktuelle Seite,
   soll aber zeigen, in welchem Abschnitt man ist. */
.nav-klapp:has(.nav-menu a[aria-current="page"]) > a{color:var(--ink);background:var(--paper-2)}
/* Der Hauptpunkt zeigt an, dass darunter mehr liegt. */
.nav-klapp > a::after{
  content:"";display:inline-block;width:.3rem;height:.3rem;margin-left:.45rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-.1em) rotate(45deg);transition:transform .14s var(--ease);
}
.nav-klapp:hover > a::after,.nav-klapp:focus-within > a::after{
  transform:translateY(.05em) rotate(-135deg)}

/* Die Unterpunkte stehen mittig wie alle anderen, nur kleiner und leiser.
   Einrückung und Strich davor waren für eine linksbündige Liste gedacht. */
.mobilnav .unter a{font-size:.9375rem;color:var(--ink-2)}

.nav a[aria-current="page"]{color:var(--ink);background:var(--paper-2)}
.head .btn{justify-self:end}
.burger{
  display:none;margin-left:auto;width:2.75rem;height:2.75rem;padding:0;
  align-items:center;justify-content:center;background:transparent;
  border:1px solid var(--rule-2);border-radius:var(--r);cursor:pointer;color:var(--ink);
}
.burger:hover{background:var(--paper-2)}
.burger svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round}
.burger .close,.burger[aria-expanded="true"] .open{display:none}
.burger[aria-expanded="true"] .close{display:block}

/* Das Telefonmenü deckt den ganzen Schirm. Es liegt deshalb im Dokument
   ausserhalb von .site: der Container macht sich sonst zum Bezugsrahmen
   für position:fixed, und das Menü klebte am Kasten statt am Fenster.
   "margin:auto" zentriert die Punkte in beiden Richtungen und bleibt dabei
   scrollbar, wenn die Liste einmal höher ist als der Schirm; place-items
   würde in dem Fall oben abschneiden. */
.mobilnav{
  display:none;position:fixed;inset:0;z-index:60;
  background:var(--paper);
  overflow-y:auto;overscroll-behavior:contain;
}
.mobilnav.open{display:flex}
/* Die Liste fuellt den Schirm; der freie Platz wird ueber drei automatische
   Abstaende gleich verteilt: ueber der Liste, ueber dem Knopf und unter dem
   Knopf. Damit steht der Knopf mittig in der weissen Flaeche unter der
   Liste, ohne dass irgendwo eine feste Zahl noetig waere. */
.mobilnav ul{
  margin:0 auto;width:100%;max-width:20rem;text-align:center;
  padding:5.5rem var(--gutter) 0;
  min-height:100%;display:flex;flex-direction:column;
}
.mobilnav li:first-of-type{margin-top:auto}
.mobilnav li:last-of-type{margin-block:auto}
/* Logo oben mittig, unabhaengig von der zentrierten Liste darunter. */
.mobilnav-marke{
  position:absolute;top:1.1rem;left:50%;translate:-50% 0;
  display:block;line-height:0;
}
.mobilnav-marke .logo{width:7.5rem}
.mobilnav-zu{
  position:absolute;top:.75rem;
  right:max(var(--gutter),env(safe-area-inset-right));
  width:2.75rem;height:2.75rem;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--rule-2);border-radius:var(--r);
  color:var(--ink);cursor:pointer;
}
.mobilnav-zu:hover{background:var(--paper-2)}
.mobilnav-zu svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.75;
  fill:none;stroke-linecap:round}
.mobilnav a:not(.btn):not(.mobilnav-marke){
  display:block;padding:.8rem 0;border-bottom:1px solid var(--rule);
  color:var(--ink);font-size:1.0625rem;font-weight:450;
}
.mobilnav a:not(.btn):not(.mobilnav-marke):hover{text-decoration:none;color:var(--blue)}
.mobilnav a[aria-current="page"]{color:var(--blue)}
/* Letzter Listeneintrag ist der Knopf, der keine Linie hat. Die Linie unter
   dem vorletzten Punkt haenge sonst frei in der Flaeche darunter. */
.mobilnav li:nth-last-of-type(2) a:not(.btn){border-bottom:0}
/* Der Knopf haengt unten fest, im selben Abstand wie das Logo oben. Die
   Liste dazwischen bleibt mittig. Das untere Polster der Liste haelt den
   Platz frei, damit sie nie unter den Knopf laeuft. */
.mobilnav .btn{display:flex;width:100%;margin-top:0}

/* --- Seitenkopf ----------------------------------------------------------- */
.top{padding:clamp(3rem,7cqw,5.5rem) 0 clamp(2rem,4cqw,3rem)}
.top h1{max-width:20ch}
.top .lede{
  font-size:clamp(1.125rem,2cqw,1.375rem);line-height:1.45;letter-spacing:-.015em;
  color:var(--ink-2);max-width:34rem;margin-top:1.5rem;text-wrap:balance;
}
.top .actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:2.25rem}
.top .fine{margin-top:1.5rem;font-size:.9375rem;color:var(--ink-3)}
.top--sub{padding-bottom:clamp(1.5rem,3cqw,2.25rem);border-bottom:1px solid var(--rule)}
.top--sub h1{font-size:clamp(2.125rem,4.4cqw,3rem)}

/* --- Abschnitt mit Marginalspalte ---------------------------------------- */
.sec{padding-top:var(--gap-sec)}
.sec > .wrap{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:2.5rem}
.sec .rail{padding-top:.5rem}
.sec .rail > div{position:sticky;top:6rem}
.sec .rail .label{display:block}
.sec .rail hr{border-top:1px solid var(--rule-2);margin:.9rem 3rem 0 0}
.sec h2 + p,.sec h2 + .lead-p,.sec h2 + .prose{margin-top:1.25rem}
/* Eigenstaendige Bloecke mit eigener Innenpolsterung brauchen eine Stufe
   mehr, sonst klebt die Linie an der Zeile darueber. */
.sec h2 + .steps,.sec h2 + .qa,.sec h2 + .note,.sec h2 + .pull{margin-top:2rem}
.sec h2 + .with-shot{margin-top:1.25rem}
/* Absatzgruppe nach laufendem Text, ersetzt frueher gestreute Inline-Werte. */
.prose.absatz{margin-top:1.5rem}
.prose{max-width:var(--measure)}
.prose p{font-size:1.0625rem;color:var(--ink-2)}
.prose p + p{margin-top:1rem}
.lead-p{font-size:1.1875rem;line-height:1.5;letter-spacing:-.012em;color:var(--ink-2);max-width:var(--measure)}

/* Der eine Satz, der hängen bleiben soll. */
.pull{
  margin-top:2.5rem;padding-left:1.5rem;border-left:1px solid var(--blue);
  font-size:clamp(1.25rem,2.6cqw,1.5rem);line-height:1.32;letter-spacing:-.02em;
  color:var(--ink);font-weight:500;max-width:32ch;
}

/* --- Die Kette: Eingang → Ablauf → Übersicht -----------------------------
   Lumoras drei Säulen sind keine drei gleichwertigen Kacheln, sondern die
   drei Glieder eines Systems. Deshalb stehen sie in einer Reihe und sind
   durch eine Linie verbunden, die auf schmalen Schirmen kippt statt zu
   verschwinden. ------------------------------------------------------------ */
.chain{margin-top:2.5rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.chain > li{position:relative;padding:1.75rem 1.5rem 1.75rem 0}
.chain > li + li{padding-left:1.5rem;border-left:1px solid var(--rule)}
.chain .step{
  display:flex;align-items:baseline;gap:.5em;margin-bottom:.9rem;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue);
}
.chain .step::after{content:"";height:1px;flex:1;background:var(--rule-2)}
.chain h3{margin-bottom:.5rem}
.chain p{font-size:1rem;color:var(--ink-2)}
/* Aufzählung statt Plaketten: das Symbol ist das Aufzählungszeichen.
   Der hängende Einzug hält mehrzeilige Einträge auf einer Kante. */
.chain .what{margin-top:1.1rem}
.chain .what li{
  font-family:var(--mono);font-size:.75rem;color:var(--ink-3);
  padding-left:1.5em;text-indent:-1.5em;margin-bottom:.5em;
}
.chain .what li:last-child{margin-bottom:0}
.chain .what li .ico{margin-right:.55em;stroke-width:2;color:var(--ink-3)}

/* --- Zeilen statt Kacheln ------------------------------------------------- */
/* Spaltenkoepfe. Sie muessen exakt auf dem Raster der Zeilen sitzen,
   deshalb dieselben Spalten, derselbe Abstand, derselbe Innenrand. */
.rows-kopf{
  margin-top:2.5rem;
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:.5rem 2.5rem;
  padding:0 1rem .6rem;margin-inline:-1rem;
}
.rows-kopf span{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.rows-kopf + .rows{margin-top:0}
.rows{margin-top:2.5rem;border-top:1px solid var(--rule)}
.rows > li{
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:.5rem 2.5rem;
  align-items:center;
  padding:1.5rem 1rem;border-bottom:1px solid var(--rule);
  margin-inline:-1rem;transition:background .16s var(--ease);
}
.rows > li:hover{background:var(--card)}
.rows h3{font-size:1rem;letter-spacing:-.014em}
.rows p{font-size:1rem;color:var(--ink-2);max-width:38rem}
/* Symbol und Text nebeneinander: so beginnt der graue Untertitel unter der
   Überschrift und nicht unter dem Symbol. Das Symbol steht mittig zum
   ganzen Block und ist so hoch wie er. Feste Größe, damit alle gleich sind. */
.rows .rk{display:grid;grid-template-columns:2.75rem minmax(0,1fr);
  gap:.8rem;align-items:center}
.rows .rk > .ico{
  width:2.75rem;height:2.75rem;color:var(--blue);
  stroke-width:1.25;vertical-align:baseline;margin-bottom:0;
}
/* Die kleine graue Zeile bleibt einzeilig. Alle Texte sind darauf gekürzt;
   nowrap sichert es auch bei grösserer Schrifteinstellung des Besuchers ab,
   und die Auslassung verhindert, dass dabei etwas aus dem Kasten läuft. */
.rows .mono{display:block;margin-top:.3rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- Ablaufschritte. Nummeriert, weil die Reihenfolge Information trägt. -- */
.steps{margin-top:2.5rem;counter-reset:s}
.steps > li{
  position:relative;display:grid;grid-template-columns:3.5rem minmax(0,1fr);
  gap:1.5rem;padding-bottom:2.25rem;
}
.steps > li::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--mono);font-size:.8125rem;color:var(--blue);
  padding-top:.3rem;letter-spacing:.02em;
}
.steps > li::after{
  content:"";position:absolute;left:.6rem;top:1.9rem;bottom:.25rem;width:1px;
  background:var(--rule-2);
}
.steps > li:last-child{padding-bottom:0}
.steps > li:last-child::after{display:none}
.steps .when{display:block;font-family:var(--mono);font-size:.75rem;color:var(--ink-3);
  margin-top:.3rem;letter-spacing:.02em}
.steps p{font-size:1rem;color:var(--ink-2);margin-top:.5rem;max-width:34rem}
.steps p + p{margin-top:.75rem}

/* --- Der Lauf ------------------------------------------------------------
   Kein nachgebautes Produktfenster. Ein Protokoll, gesetzt wie eines: links
   die Uhrzeit, in der Mitte was geschah, rechts woher. Die eine Zeile in
   Bernstein ist die Stelle, an der ein Mensch entscheidet — der Punkt, an
   dem selbstgebaute Lösungen üblicherweise abbrechen.
   ------------------------------------------------------------------------ */
/* Dunkelblau aus dem Auftaktvideo (#00082c), fuer die Flaeche leicht aufgehellt.
   Die Linien erben ueber die lokalen Token denselben Farbton statt Grau. */
.run{
  --night-rule:#1d2a52;--night-ink-2:#98a3c4;
  background:#061033;color:var(--night-ink);
  border-radius:calc(var(--r) + 3px);
  padding:clamp(1.5rem,3.5cqw,2.5rem);
  box-shadow:0 24px 50px -30px rgba(6,16,51,.6),0 2px 4px rgba(6,16,51,.16);
}
.run-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.5rem 1.5rem;padding-bottom:1.25rem;border-bottom:1px solid var(--night-rule);
}
.run-head .label{display:block;margin-bottom:.2rem;color:var(--night-ink-2)}
.run-head strong{color:var(--night-ink);font-size:1.0625rem;font-weight:600;letter-spacing:-.01em}
.run-head .id{font-family:var(--mono);font-size:.75rem;color:var(--night-ink-2);letter-spacing:.04em}
.run-spalten{
  display:grid;grid-template-columns:4.25rem minmax(0,1fr) auto;
  gap:.35rem 1.25rem;padding:1rem 0 .55rem;
}
.run-spalten span{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--night-ink-2);
}
.run-spalten span:last-child{text-align:right}
.run-spalten + ol{margin-top:0}
.run ol{margin-top:.25rem}
.run li{
  display:grid;grid-template-columns:4.25rem minmax(0,1fr) auto;
  gap:.35rem 1.25rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--night-rule);
}
.run li:last-child{border-bottom:0}
.run .t{font-family:var(--mono);font-size:.8125rem;color:var(--night-ink-2);letter-spacing:.02em}
.run .ev{color:var(--night-ink);font-size:.9375rem;line-height:1.5}
.run .src{font-family:var(--mono);font-size:.75rem;color:var(--night-ink-2);text-align:right}
.run li.hand .t{color:#f0b45e}
.run li.hand .ev{color:#fff}
.run li.hand .ev b{font-weight:600;color:#f5c583}
.run .out{
  margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--night-rule);
  color:var(--night-ink-2);font-size:.9375rem;line-height:1.55;max-width:44rem;
}
.run .out strong{color:var(--night-ink)}

/* Der einzige gestaltete Bewegungsmoment der Seite: das Protokoll läuft
   einmal durch, so wie ein echter Lauf durchläuft. Zeile für Zeile, von
   oben, und dann steht es still. */
.js-run .run[data-play] li{opacity:0;transform:translateY(6px)}
.js-run .run[data-play].is-running li{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(var(--i,0) * 260ms);
}
.js-run .run[data-play] .out{opacity:0;transition:opacity .6s var(--ease)}
.js-run .run[data-play].is-running .out{opacity:1;transition-delay:calc(var(--n,6) * 260ms)}

/* --- Der Weg eines Falls: der Film ---------------------------------------
   Hier stand einmal die Szene als Markup nachgebaut, mit Portal und drei
   Telefonen. Das macht jetzt ein Film. Er läuft in Schleife und ohne Ton,
   die Bedienleiste bleibt, damit man ihn anhalten kann.
   ------------------------------------------------------------------------ */
.film{margin:2.5rem 0 0}
.film video{
  display:block;width:100%;height:auto;aspect-ratio:16/9;
  border-radius:var(--r);border:1px solid var(--rule);
  /* Bild und Rahmen sind beide exakt 16:9. Trotzdem bleibt bei krummen
     Breiten ein halber Bildpunkt Rest, und ein dunkler Grund würde dort als
     schwarzer Strich am Rand auftauchen. Deshalb füllt das Bild den Rahmen
     aus, und was darunter liegt, hat die Farbe der Seite statt Schwarz. */
  object-fit:cover;
  background:var(--paper-2);
  box-shadow:0 1px 2px rgba(16,19,25,.05),0 18px 44px -22px rgba(16,19,25,.28);
}
.film figcaption{
  margin-top:.9rem;font-size:.9375rem;line-height:1.6;
  color:var(--ink-3);max-width:42rem;
}


/* --- Video im Auftakt -----------------------------------------------------
   Der Auftakt wird zweispaltig: links der Satz, rechts der Film. preload="none"
   heißt, dass vor dem Klick kein einziges Byte geladen wird — bei dieser
   Dateigröße ist das nicht optional.
   ------------------------------------------------------------------------ */
/* Der Auftakt laeuft breiter als die Textspalte. Grund: Der Film soll so hoch
   sein wie der Textblock und dabei vollstaendig zu sehen bleiben. Bei 70rem
   ginge das nur mit rund einem Drittel Beschnitt — und dabei faellt der halbe
   Satz im Bild weg. Die zusaetzliche Breite kauft die fehlende Hoehe.
   Die Spalten sind so geteilt, dass die 16:9-Hoehe des Films ungefaehr der
   Hoehe des Textblocks entspricht; align-items:center faengt den Rest ab. */
/* Der Film steht oben und unten bündig zum Textblock daneben. Von selbst
   passt das nie: sein Seitenverhältnis ist fest, die Texthöhe haengt an der
   Zeilenzahl. Gemessen war der Film bei 1000 px 89 Pixel kuerzer und bei
   1440 px 4 Pixel hoeher. Deshalb fuellt der Rahmen die Zeilenhoehe, und das
   Bild wird darin eingepasst statt zugeschnitten. Zuschneiden hatte bei
   diesem Film Text am Rand abgeschnitten. */
.top--split .wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.22fr);
  gap:clamp(2rem,4cqw,3.5rem);align-items:stretch;max-width:var(--wrap-wide);
}
.top--split > .wrap > div:first-child{align-self:center}
/* Der Rahmen selbst hat keine Eigenhoehe, sonst wuerde der Film die
   Zeilenhoehe wieder nach oben treiben. Er bekommt sie vom Textblock und
   das Bild sitzt absolut darin. */
.top--split .video{position:relative;min-width:0}
.top--split .video video{
  position:absolute;inset:0;width:100%;height:100%;
  aspect-ratio:auto;object-fit:contain;
}
.top--split h1{font-size:clamp(2.125rem,3.5cqw,3rem);max-width:none}
.top--split .lede{font-size:clamp(1.0625rem,1.55cqw,1.1875rem);max-width:none;margin-top:1.5rem}
.top--split .actions{margin-top:1.75rem;gap:.9rem 1.5rem}
.top--split .fine{margin-top:1.1rem}

.video{margin:0}
.video video{
  display:block;width:100%;height:auto;aspect-ratio:16/9;
  background:var(--night);border-radius:calc(var(--r) + 3px);
  box-shadow:0 24px 50px -30px rgba(12,15,22,.5),0 2px 4px rgba(12,15,22,.1);
}

/* --- Symbole -------------------------------------------------------------
   Ein gezeichneter Satz, eine Strichstärke, runde Enden. Sie stehen nie
   allein für eine Aussage — die Überschrift trägt sie — sondern geben dem
   Auge einen Halt beim Überfliegen.
   ------------------------------------------------------------------------ */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Symbolgröße = Versalhöhe der Schrift daneben.
   Geist hat eine Versalhöhe von 0,71 em (gemessen, in allen Schnitten gleich).
   Die Zeichnungen füllen rund 75 % des 24er-Rasters, der Kasten muss also
   0,71 / 0,75 = 0,95 em groß sein, damit die Zeichnung selbst 0,71 em misst.
   vertical-align rückt den Kasten so, dass die Zeichnung unten auf der
   Grundlinie steht und oben die Versalhöhe erreicht — wie ein Großbuchstabe.
   Weil alles in em gerechnet ist, stimmt es bei jeder Schriftgröße von selbst. */
.ico{
  display:inline-block;
  width:.95em;height:.95em;vertical-align:-.12em;flex:0 0 auto;
  stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Die alten Größenklassen bleiben im Markup, ändern aber nichts mehr an der
   Größe — nur die Strichstärke, damit größere Schrift nicht fett wirkt. */
.ico--lg{stroke-width:1.6}
.ico--xl{stroke-width:1.5}

/* Symbol in einer runden Fläche: für die Stellen, an denen es Kopf einer
   Gruppe ist und nicht Beiwerk. */
/* Symbol über einer Zeile statt daneben — dort gibt es keinen Buchstaben,
   an dem es sich ausrichten könnte. */
.ico-oben{display:block;margin-bottom:.7rem;color:var(--blue)}
.ico-oben .ico{width:1.4rem;height:1.4rem;vertical-align:baseline}

/* In Flex-Zeilen greift vertical-align nicht. Dort richtet align-items:baseline
   die Unterkante des Kastens auf die Grundlinie aus — der negative Rand rückt
   die Zeichnung von der Kastenunterkante auf die Grundlinie. */
/* Symbol und Versalschrift auf eine Mittelachse.
   Auf der Grundlinie ausgerichtet sitzt ein quadratisches Symbol immer zu
   hoch: seine Mitte liegt eine halbe Symbolhöhe über der Grundlinie, die
   Mitte der Versalien aber nur eine halbe Versalhöhe. Bei 0.95em Symbol und
   0.73em Versalhöhe sind das genau 0.11em Unterschied. Ein margin hilft hier
   nichts, weil es die ganze Zeile mitverschiebt — es muss ein Versatz sein. */
.chain .step{align-items:baseline}
.chain .step .ico{position:relative;top:.11em}

/* --- Bildstrecke: drei Tafeln, die eine Geschichte erzählen --------------
   Die Türgeschichte ist das stärkste Bild im ganzen Briefing. Sie verdient
   eine Zeichnung, keinen weiteren Absatz. -------------------------------- */
.panels{
  margin-top:2.5rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;
}
.panels > figure{margin:0;background:var(--card);padding:1.5rem}
/* Bildfläche statt Zeichnung: die drei Tafeln warten auf Material.
   Sobald ein <img> eingesetzt wird, fällt der Platzhalter ersatzlos weg. */
.panels img{display:block;width:100%;height:auto;border-radius:3px}
.panels .slot{padding:.9rem;gap:.2rem}
.panels .slot strong{font-size:.875rem}
.panels figcaption{margin-top:1.1rem}
.panels .when{display:block;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.panels h3{margin-top:.45rem;margin-bottom:.5rem;font-size:1.0625rem}
.panels p{margin-top:.45rem;font-size:.9375rem;color:var(--ink-2)}

/* --- Dashboard-Nachbau ---------------------------------------------------
   Kein Bildschirmfoto, sondern gebautes Markup: auf jedem Schirm scharf,
   durchsuchbar, und es lädt nichts nach. -------------------------------- */
.dash{
  margin-top:2.5rem;background:var(--card);border:1px solid var(--rule);
  border-radius:calc(var(--r) + 3px);overflow:hidden;
  box-shadow:0 18px 40px -28px rgba(16,19,25,.35),0 1px 2px rgba(16,19,25,.05);
}
.dash-bar{
  display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;
  background:var(--paper-2);border-bottom:1px solid var(--rule);
}
.dash-bar i{width:9px;height:9px;border-radius:50%;background:var(--rule-2);
  display:block;flex:0 0 auto}
.dash-bar span{
  margin-left:.4rem;font-family:var(--mono);font-size:.75rem;color:var(--ink-3);
  letter-spacing:.02em;
}
/* Zwei Spalten wie im echten Portal: links die schmale Symbolleiste, rechts
   der Inhalt. Wie in der App stehen dort nur Symbole, keine Beschriftungen —
   den Namen trägt jede Schaltfläche als aria-label und als Kurzhinweis beim
   Überfahren. */
.dash-body{display:grid;grid-template-columns:2.9rem minmax(0,1fr)}
.dash-nav{
  background:var(--card);border-right:1px solid var(--rule);
  padding:.5rem .3rem;
  display:flex;flex-direction:column;align-items:center;
}
.dash-nav .pt-aus{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  width:2.2rem;height:2.2rem;color:var(--ink-2);
  margin-bottom:.45rem;
}
.dash-nav .pt-aus .ico{width:1.15rem;height:1.15rem;stroke-width:1.8}
/* Die Schaltflächen nehmen den Platz zwischen Aufklapper und Profil ein
   und sitzen darin mittig — der Rahmen ist so hoch wie die höchste
   Ansicht, sonst klebten sie oben und darunter wäre nur Leere. */
.dash-nav ul{flex:1 1 auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.1rem;width:100%}
.dash-nav li{display:block}
.dash-nav button{
  display:flex;align-items:center;justify-content:center;
  width:2.2rem;height:2.2rem;padding:0;border:0;background:none;
  border-radius:9px;color:var(--ink-2);cursor:pointer;
  transition:background .12s var(--ease),color .12s var(--ease);
}
.dash-nav button .ico{width:1.2rem;height:1.2rem;stroke-width:1.8}
.dash-nav button:hover{background:var(--paper-2);color:var(--ink)}
.dash-nav button[aria-selected="true"]{background:var(--blue-wash);color:var(--blue)}
.dash-nav button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
/* Das Profilzeichen sitzt wie in der App ganz unten. Kein Anfangsbuchstabe:
   auf einer öffentlichen Seite steht dort niemand Bestimmtes. */
/* Derselbe Platzbedarf wie der Aufklapper oben (2,2 rem plus 0,9 rem Abstand).
   Nur wenn beide gleich viel wegnehmen, landen die Schaltflächen dazwischen
   auch wirklich in der Mitte der Leiste. */
.dash-nav .pt-nutzer{
  display:flex;align-items:center;justify-content:center;
  width:2.2rem;height:2.2rem;flex:0 0 auto;color:var(--ink-3);
  margin-top:.45rem;
}
.dash-nav .pt-nutzer .ico{width:1.35rem;height:1.35rem;stroke-width:1.8}

/* ---- Die Ansichten dahinter -------------------------------------------
   Ein Nachbau, kein Bildschirmfoto. Alle Namen, Adressen und Zahlen sind
   erfunden: aus den Vorlagen des Betriebs dürfen weder Kundenadressen noch
   Telefonnummern auf eine öffentliche Seite. ---------------------------- */
.dash-view{grid-area:1 / 1;display:flex;flex-direction:column;min-width:0}
/* Die verborgenen Ansichten bleiben im Fluss — sonst bestimmte wieder nur die
   sichtbare die Höhe. visibility statt display: unsichtbar, nicht anklickbar,
   nicht fokussierbar und von Vorleseprogrammen übersprungen. */
.dash-view[hidden]{display:flex;visibility:hidden;pointer-events:none}
.dash-view:focus{outline:none}
/* Kurze Ansichten wie Formulare und der Chat stehen in der Mitte, statt oben
   zu kleben und darunter Leere zu lassen. */
.dash-view--mitte{justify-content:center}
.pt-kopf{margin-bottom:.85rem}
.pt-kopf h3{font-size:1.0625rem;letter-spacing:-.014em}
.pt-kopf .sub{margin-top:.2rem;font-size:.8125rem;color:var(--ink-3)}
.pt-unter{margin:1rem 0 .55rem;font-family:var(--mono);font-size:.625rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Werkzeugleiste über den Listen */
.pt-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.7rem 0}
.pt-leiste .suche{flex:1 1 9rem;min-width:0}
.pt-knopf{
  display:inline-flex;align-items:center;gap:.35em;white-space:nowrap;
  border:1px solid var(--rule);border-radius:5px;padding:.3em .7em;
  font-size:.6875rem;color:var(--ink-2);background:var(--card);
}
.pt-knopf .ico{width:.8rem;height:.8rem}
.pt-knopf--blau{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:500}
.pt-knopf--voll{display:flex;justify-content:center;width:100%;padding:.6em 1em;
  font-size:.8125rem;margin-top:.9rem}

/* Tabelle. Auf schmalen Schirmen schiebt sie sich seitlich, statt die Seite
   auseinanderzudrücken. */
.pt-tabelle{border:1px solid var(--rule);border-radius:var(--r);
  background:var(--card);overflow-x:auto;overscroll-behavior-x:contain}
.pt-tabelle table{border-collapse:collapse;width:100%;min-width:44rem;font-size:.75rem}
.pt-tabelle th,.pt-tabelle td{
  text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
.pt-tabelle tbody tr:last-child td{border-bottom:0}
.pt-tabelle th{font-family:var(--mono);font-size:.5625rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;background:var(--paper)}
.pt-tabelle td{color:var(--ink-2)}
.pt-tabelle .pt-num,.pt-tabelle .pt-zeit{font-variant-numeric:tabular-nums;color:var(--ink-3)}

/* Spalten nach Monteur */
/* Die Filter tragen die Farben der Abzeichen, die sie filtern -- keine
   zweite Farbsprache. Hoehe 1.2rem, das ist genau die Zeilenhoehe der
   Beschriftung "Status" daneben. */
.pt-filter{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:.8rem}
.pt-filter .pt-name{margin:0}
.pt-filter .chip{height:1.2rem;padding-block:0}
.pt-spalten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.pt-spalte{background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r);padding:.6rem .55rem}
.pt-spalte-kopf{display:flex;align-items:center;gap:.4rem;margin-bottom:.55rem;
  font-size:.8125rem;font-weight:600;color:var(--ink)}
.pt-spalte-kopf span{background:var(--paper-2);border-radius:var(--r-pill);
  padding:.05em .5em;font-size:.625rem;font-weight:500;color:var(--ink-3)}
.pt-karte{background:var(--card);border:1px solid var(--rule);border-radius:5px;
  padding:.55rem .6rem;margin-bottom:.45rem}
.pt-karte:last-child{margin-bottom:0}
.pt-karte-k{display:block;font-family:var(--mono);font-size:.5625rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
.pt-karte strong{display:block;margin:.15rem 0 .25rem;font-size:.75rem;font-weight:500;color:var(--ink)}
.pt-karte .pt-zeit{font-size:.625rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* Formulare: leere Felder, nichts ist ausfüllbar — es ist ein Schaubild. */
/* Alle Karten in der Mitte gleich breit. max-width allein reicht nicht:
   "margin-inline:auto" nimmt einem Flex-Kind das Strecken, es faellt auf
   seine Inhaltsbreite zurueck. Deshalb eine feste Breite statt einer Grenze. */
.pt-formular,.pt-chat{width:min(30rem,100%);margin-inline:auto}
.pt-formular{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:1.1rem 1.15rem}
.pt-formular h3{font-size:1.0625rem;letter-spacing:-.014em;margin-bottom:.9rem}
.pt-hinweis{font-size:.75rem;line-height:1.55;color:var(--ink-3);
  padding-bottom:.85rem;margin-bottom:.2rem;border-bottom:1px solid var(--rule)}
.pt-feld{display:block;margin-top:.75rem}
.pt-name{display:block;font-size:.75rem;color:var(--ink-2);margin-bottom:.25rem}
.pt-name span{color:var(--ink-3)}
.pt-eingabe,.pt-flaeche,.pt-wahl,.pt-upload{
  display:block;background:var(--paper-2);border:1px solid var(--rule);
  border-radius:5px;font-size:.75rem;color:var(--ink-3);
}
.pt-eingabe{padding:.55rem .6rem;min-height:2.1rem}
.pt-flaeche{height:3.4rem}
.pt-wahl{display:flex;align-items:center;justify-content:space-between;padding:.55rem .6rem}
/* Ein gezeichneter Winkel statt eines Symbols: ein gedrehtes Plus liest sich
   als „schließen", nicht als „aufklappen". */
.pt-pfeil{width:.5rem;height:.5rem;flex:0 0 auto;
  border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  rotate:45deg;translate:0 -.12rem}
.pt-upload{display:flex;align-items:center;justify-content:center;gap:.4rem;
  height:3.2rem;border-style:dashed}
.pt-upload .ico{width:.9rem;height:.9rem}
.pt-eingabe--rund{border-radius:var(--r-pill);margin-top:.7rem}
.pt-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.pt-wahlreihe{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.2rem}
.pt-feld--schalter{display:flex;align-items:center;gap:.55rem;margin-top:.9rem}
.pt-feld--schalter .pt-name{margin:0}
.pt-regler{width:1.9rem;height:1.05rem;border-radius:var(--r-pill);flex:0 0 auto;
  background:var(--paper-2);border:1px solid var(--rule-2);position:relative}
.pt-regler::after{content:"";position:absolute;top:50%;left:.15rem;translate:0 -50%;
  width:.7rem;height:.7rem;border-radius:50%;background:var(--ink-3)}

/* Der Assistent */
.pt-chat{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:0 0 .9rem;overflow:hidden}
.pt-chat-kopf{display:flex;align-items:center;gap:.6rem;padding:.8rem .9rem;
  background:var(--blue-wash);border-bottom:1px solid var(--rule)}
.pt-chat-kopf .ico{width:1.1rem;height:1.1rem;color:var(--blue);flex:0 0 auto}
.pt-chat-kopf strong{display:block;font-size:.8125rem;color:var(--ink)}
.pt-chat-kopf span{display:block;font-size:.6875rem;color:var(--ink-3)}
.pt-chat-lauf{display:flex;flex-direction:column;gap:.45rem;padding:.9rem}
.pt-blase{max-width:88%;background:var(--paper-2);border-radius:var(--r) var(--r) var(--r) 4px;
  padding:.5rem .65rem;font-size:.75rem;line-height:1.5;color:var(--ink-2)}
.pt-blase--ich{align-self:flex-end;background:var(--blue-wash);color:var(--ink);
  border-radius:var(--r) var(--r) 4px var(--r)}
.pt-chat .pt-eingabe{margin-inline:.9rem}

/* Meine Aufträge */
.pt-auftraege{display:flex;flex-direction:column;gap:.5rem}
.pt-auftrag,.pt-thema{background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);padding:.7rem .85rem}
.pt-auftrag .zeile,.pt-thema .zeile{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:.4rem .75rem}
.pt-auftrag .zeile{padding-bottom:.6rem;margin-bottom:.6rem;border-bottom:1px solid var(--rule)}
.pt-auftrag .who,.pt-thema .who{font-size:.8125rem;font-weight:500;color:var(--ink)}
.pt-auftrag dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.15rem .75rem}
.pt-auftrag dt{grid-row:1;font-family:var(--mono);font-size:.5625rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
/* Ohne margin:0 setzt der Browser die Werte um 40px ein, sie stehen
   dann nicht mehr unter ihrer Beschriftung. */
.pt-auftrag dd{grid-row:2;margin:0;font-size:.75rem;color:var(--ink-2)}

/* Forum */
.pt-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.pt-kachel{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:.75rem .85rem}
.pt-kachel strong{display:block;font-size:.8125rem;color:var(--ink)}
.pt-kachel span{display:block;margin-top:.15rem;font-size:.75rem;color:var(--ink-3)}
.pt-themen{display:flex;flex-direction:column;gap:.5rem}
.pt-thema .pt-zeit{margin-top:.35rem;font-size:.6875rem;color:var(--ink-3)}
/* Alle Ansichten liegen übereinander in derselben Rasterzelle. Dadurch ist
   der Rahmen immer so hoch wie die höchste Ansicht und springt beim
   Umschalten nicht — im echten Portal bleibt das Fenster ja auch stehen. */
.dash-main{
  padding:clamp(1rem,2.2cqw,1.4rem);background:var(--paper-2);min-width:0;
  display:grid;grid-template-columns:minmax(0,1fr);
}
/* Begruessung wie im Portal: getoente Flaeche, Datum, Anrede. */
.dash-hello{
  background:var(--blue-wash);border:1px solid var(--rule);border-radius:var(--r);
  padding:.95rem 1.1rem;margin-bottom:.7rem;
}
.dash-hello .tag{display:flex;align-items:center;gap:.35em;font-family:var(--mono);
  font-size:.6875rem;letter-spacing:.06em;color:var(--blue)}
.dash-hello .tag .ico{width:.85rem;height:.85rem}
.dash-hello h3{margin-top:.4rem;font-size:1.0625rem}
.dash-hello .sub{margin-top:.25rem;font-size:.8125rem;color:var(--ink-3)}

/* Vier Kennzahlkarten, wie im Portal, mit Zeitstempel darunter. */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.tiles > div{background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);padding:.8rem .9rem}
/* "Bearbeitung" ist als einzelnes Wort breiter als eine Kachel auf dem
   Telefon. Trennen statt ueberstehen lassen. */
.tiles .k{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.35;
  overflow-wrap:break-word;hyphens:auto}
.tiles .v{display:block;margin-top:.35rem;font-size:1.5rem;font-weight:600;
  letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.tiles .ts{display:block;margin-top:.25rem;font-family:var(--mono);
  font-size:.5625rem;letter-spacing:.05em;color:var(--ink-3)}
.tiles .hand .v{color:var(--signal)}

/* Die beiden Kreise. Als SVG gezeichnet, nicht als conic-gradient: dessen
   harte Farbstopps rendert der Browser ohne Kantenglaettung, die Segment-
   kanten werden treppig. Die Anteile stehen als stroke-dasharray im Markup,
   pathLength="100" macht die Zahlen dort zu Prozenten. */
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-top:.7rem}
.chart{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:.9rem 1rem}
.chart .cap{font-family:var(--mono);font-size:.625rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
.ring{
  --s1:var(--blue);--s2:#7cc48c;--s3:#e2a63f;
  display:block;width:6.5rem;height:6.5rem;margin:.9rem auto;
}
.legende{display:flex;flex-wrap:wrap;gap:.3rem .9rem;justify-content:center;
  font-size:.6875rem;color:var(--ink-3)}
.legende li{display:flex;align-items:center;gap:.35em}
.legende b{color:var(--ink-2);font-weight:500;font-variant-numeric:tabular-nums}
.legende i{width:.5rem;height:.5rem;border-radius:2px;flex:0 0 auto}
.legende .s1{background:var(--blue)}
.legende .s2{background:#7cc48c}
.legende .s3{background:#e2a63f}

/* Letzte Meldungen: im Portal Karten, keine Tabellenzeilen. */
.feed{margin-top:.7rem;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);padding:.9rem 1rem}
.feed-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:.6rem 1rem;margin-bottom:.8rem}
.feed-head h4{font-size:.9375rem}
.feed-head .sub{margin-top:.15rem;font-size:.75rem;color:var(--ink-3)}
.feed-tools{display:flex;flex-wrap:wrap;gap:.4rem}
/* Marken und Suchfeld werden auch außerhalb der Meldungsliste gebraucht,
   deshalb stehen sie für sich und nicht unter .feed-tools. */
.chip,.suche{
  display:inline-flex;align-items:center;gap:.3em;border:1px solid var(--rule);
  border-radius:5px;padding:.25em .6em;font-size:.6875rem;color:var(--ink-3);
  background:var(--paper-2);white-space:nowrap;
}
/* Statusfarben. Muessen NACH der .chip-Grundregel stehen, sonst
   ueberschreibt deren Hintergrund sie bei gleicher Spezifitaet. */
.chip--arbeit{background:#fdf3e3;color:#8a5a12;border-color:#e8cfa4}
.chip--fertig{background:#e7f4ec;color:#1c6b3c;border-color:#bcdfc9}
.chip--eskaliert{background:var(--signal-wash);color:var(--signal);border-color:var(--signal-rule)}
.suche .ico{width:.75rem;height:.75rem}
.feed > ul > li{border:1px solid var(--rule);border-radius:var(--r);
  padding:.7rem .85rem;margin-bottom:.5rem}
.feed > ul > li:last-child{margin-bottom:0}
.feed .zeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.4rem .75rem;padding-bottom:.6rem;margin-bottom:.6rem;
  border-bottom:1px solid var(--rule)}
.feed .who{font-size:.8125rem;font-weight:500;color:var(--ink)}
.feed dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.15rem .75rem}
.feed dt{grid-row:1;font-family:var(--mono);font-size:.5625rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
.feed dd{grid-row:2;margin:0;font-size:.75rem;color:var(--ink-2)}
.feed .tag-m{display:inline-block;background:var(--paper-2);border:1px solid var(--rule);
  border-radius:4px;padding:.1em .45em;font-size:.6875rem}

/* Die Zustandsmarken des Portals: Bernstein fuer „in Arbeit", Gruen fuer
   „erledigt" — dieselbe Bedeutung wie dort. */
.pill{display:inline-block;font-size:.6875rem;font-weight:500;letter-spacing:-.004em;
  border-radius:4px;padding:.2em .55em;white-space:nowrap;
  background:var(--paper-2);color:var(--ink-3);border:1px solid var(--rule)}
/* Alle Statusfelder gleich breit. In der Tabelle ist die Spalte ohnehin so
   breit wie das laengste Feld, deshalb genuegt 100 % -- kein fester Wert.
   In der Auftragsliste gibt es keine Spalte, dort richtet sich die Breite
   nach dem laengsten Wort ("Abgeschlossen"). */
.pt-tabelle td .pill{display:block;width:100%;text-align:center}
.pt-auftrag .zeile .pill{min-width:8.4em;text-align:center}
.pill--arbeit{background:#fdf3e3;color:#8a5a12;border-color:#e8cfa4}
.pill--fertig{background:#e7f4ec;color:#1c6b3c;border-color:#bcdfc9}
.pill--eskaliert{background:var(--signal-wash);color:var(--signal);border-color:var(--signal-rule)}

/* --- Aufklappbare Fragen --------------------------------------------------
   Gebaut mit <details>, nicht mit JavaScript. Das bringt Tastaturbedienung,
   Vorleseprogramme und die Suchfunktion des Browsers von Haus aus mit, und
   es funktioniert auch, wenn ein Skript nicht lädt. Beim Aufklappen fährt
   die Antwort kurz ein; das Zuklappen ist ohne Skript nicht zu animieren.
   -------------------------------------------------------------------------- */
.fragen{margin-top:1.75rem;max-width:46rem}
.fragen > li{margin-bottom:.6rem}
.fragen > li:last-child{margin-bottom:0}
.fragen details{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.fragen details[open]{border-color:var(--rule-2);box-shadow:0 1px 3px rgba(16,19,25,.05)}
.fragen summary{
  display:flex;align-items:baseline;gap:.6rem;
  padding:1.05rem 1.15rem;cursor:pointer;
  font-size:1.0625rem;font-weight:600;letter-spacing:-.012em;color:var(--ink);
  list-style:none;                 /* Standardpfeil weg, wir zeichnen selbst */
}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary:hover{color:var(--blue)}
.fragen summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r)}
.fragen summary > span{flex:1;min-width:0}
.fragen summary .ico{color:var(--blue);flex:0 0 auto;margin-bottom:-.13em}

/* Das Pluszeichen dreht sich beim Aufklappen zum Minus. */
.fragen .zeichen{
  position:relative;width:.85rem;height:.85rem;flex:0 0 auto;
  align-self:center;margin-left:.35rem;
}
.fragen .zeichen::before,.fragen .zeichen::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--ink-3);
  transform:translate(-50%,-50%);transition:transform .2s var(--ease),opacity .2s var(--ease);
}
.fragen .zeichen::before{width:.85rem;height:1.5px}
.fragen .zeichen::after{width:1.5px;height:.85rem}
.fragen details[open] .zeichen::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.fragen summary:hover .zeichen::before,.fragen summary:hover .zeichen::after{background:var(--blue)}

.fragen .antwort{padding:0 1.15rem 1.15rem;max-width:42rem}
.fragen .antwort p{font-size:1rem;color:var(--ink-2)}
.fragen .antwort p + p{margin-top:.85rem}
/* Der Rand trennt Frage und Antwort, sitzt aber nur im geöffneten Zustand. */
.fragen details[open] .antwort{
  border-top:1px solid var(--rule);padding-top:1rem;margin-top:-.15rem;
  animation:antwortEin .26s var(--ease);
}
@keyframes antwortEin{from{opacity:0;transform:translateY(-.3rem)}}

@container site (max-width: 44rem){
  .fragen summary{padding:.9rem 1rem;font-size:1rem}
  .fragen .antwort{padding:0 1rem 1rem}
  .fragen details[open] .antwort{padding-top:.9rem}
}

/* --- Fotoflächen ---------------------------------------------------------
   Bis das Bildmaterial da ist, sitzt hier eine bewusst gestaltete Fläche mit
   Bildauftrag — kein kaputtes Bildsymbol. Sobald ein <img> eingesetzt wird,
   fällt sie ersatzlos weg. ------------------------------------------------ */
/* Der Rahmen selbst ist unsichtbar: kein Grund, keine Kante. Sonst stünde
   die Bildunterschrift auf einer grauen Fläche statt auf der Seite.
   Die Rundung sitzt deshalb am Bild und nicht am Rahmen. */
.shot{margin:0}
.shot img{display:block;width:100%;height:auto;border-radius:var(--r)}
.slot{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  gap:.35rem;aspect-ratio:4/3;padding:1.25rem;
  background:
    repeating-linear-gradient(-45deg,transparent 0 9px,rgba(16,19,25,.028) 9px 18px),
    var(--paper-2);
  border:1px dashed var(--rule-2);border-radius:var(--r);color:var(--ink-3);
}
.slot .label{color:var(--ink-3)}
.slot strong{font-size:.9375rem;font-weight:500;color:var(--ink-2);
  letter-spacing:-.008em}
.slot p{font-size:.8125rem;color:var(--ink-3);max-width:26rem}
.shot figcaption{margin-top:.75rem;font-size:.875rem;color:var(--ink-3)}
/* Text und Bild nebeneinander: umfliessen lassen wuerde die Textspalte auf
   rund dreissig Zeichen druecken. */
.with-shot{display:grid;grid-template-columns:minmax(0,1fr) 16rem;
  gap:2.5rem;align-items:start}
.with-shot .prose{max-width:none}
@container site (max-width:52rem){
  .with-shot{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .with-shot .shot{max-width:15rem}
}
.shot--wide .slot{aspect-ratio:16/9}

/* Zwei Flächen nebeneinander: heute und danach. */
.split{margin-top:2.5rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem}

/* --- Abwechselnde Gründe -------------------------------------------------
   Damit das Scrollen einen Takt bekommt, statt eine durchgehende weiße Bahn
   zu sein. ---------------------------------------------------------------- */
.sec--tint{background:var(--paper-2);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding-bottom:var(--gap-sec);margin-top:var(--gap-sec)}
.sec--tint{padding-top:var(--gap-sec)}
.sec--tint .note,.sec--tint .dash,.sec--tint .panels > figure{background:var(--card)}

/* --- Zeile mit Symbol ---------------------------------------------------- */
/* Überschrift mit Symbol: bewusst KEIN Flex. Im Fließsatz richtet
   vertical-align das Symbol von allein auf die Grundlinie aus, und bei
   zweizeiligen Überschriften steht es dort, wo es hingehört — an der ersten
   Zeile, nicht zwischen beiden. */
.rows h3.with-ico .ico,.qa h3.with-ico .ico,.note h3.with-ico .ico{
  margin-right:.45em;color:var(--blue);
}
.qa h3.with-ico .ico{color:var(--ink-3)}

/* --- Bänder --------------------------------------------------------------- */
.band{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:1.5rem 0;background:var(--paper-2);margin-top:var(--gap-sec)}
.band .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem 2rem}
.band--tools .wrap{column-gap:1.5rem}
.band .label{flex:0 0 auto}
.band ul{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.band li{font-size:.9375rem;color:var(--ink-2);font-weight:450}

/* --- Werkzeug-Wortmarken -------------------------------------------------
   Alle in einem Grau (#6A7080 — derselbe Ton wie die Kleinschrift daneben),
   damit das Band Beleg bleibt und nicht mit dem Auftakt um Blicke kämpft.
   Die Höhen sind einzeln gesetzt, nicht einheitlich: Marken mit Ober- und
   Unterlängen brauchen mehr Kastenhöhe als solche, die fast nur aus
   x-Höhe bestehen — sonst wirkt „n8n“ doppelt so groß wie „sipgate“.
   ------------------------------------------------------------------------ */
/* Das Band liegt auf demselben Satzspiegel wie der Auftakt darüber: Das
   Etikett beginnt auf der Kante der Überschrift, und die Marken werden genau
   dort eingeblendet, wo das Video endet. */
.band--tools .wrap{align-items:center;max-width:var(--wrap-wide)}
.band--tools li{display:flex;align-items:center}
.band--tools li.spacer{flex:0 0 0;width:0;padding:0;margin:0}
.band--tools img{display:block;width:auto;height:var(--th,1.25rem)}

/* --- Laufband -------------------------------------------------------------
   Die Marken laufen mit festem Abstand endlos durch, statt sich ueber die
   Fensterbreite zu verteilen. Der Satz steht zweimal im Markup; verschoben
   wird um genau eine Satzbreite, dadurch schliesst der Lauf nahtlos.
   Der zweite Satz ist fuer Vorleseprogramme ausgeblendet.
   ------------------------------------------------------------------------ */
.marquee{
  flex:1;min-width:0;overflow:hidden;
  /* Weiche Kanten, damit die Marken nicht abgeschnitten auftauchen. */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 2rem,
                     #000 calc(100% - 2rem),transparent);
  mask-image:linear-gradient(to right,transparent,#000 2rem,
             #000 calc(100% - 2rem),transparent);
}
.marquee-inner{
  display:flex;width:400%;                    /* vier Saetze nebeneinander */
  animation:marquee var(--dur,38s) linear infinite;
}
/* Ein Satz ist genau so breit wie das Laufband (25 % von 400 %). Dadurch sind
   immer alle sechs Marken gleichzeitig zu sehen, und beim Umlauf entsteht
   keine Luecke. Zwei Klassen, damit die Regel gegen ".band ul" gewinnt. */
.band--tools .marquee-set{
  flex:0 0 25%;display:flex;flex-wrap:nowrap;align-items:center;
  /* space-between setzt keine Abstaende an die Enden: die erste Marke beginnt
     buendig am linken Rand. Damit die Naht trotzdem so breit wird wie jede
     andere Luecke, steht am Satzende ein leerer Platzhalter ohne Breite —
     er belegt die letzte Position, schiebt aber nichts. */
  justify-content:space-between;gap:0;padding-right:0;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-25%)}}

/* Wer lesen will, haelt an. */
.marquee:hover .marquee-inner{animation-play-state:paused}

.t-notion  {--th:1.35rem}
.t-n8n     {--th:1.32rem}  /* feine Linien, braucht Höhe um mitzuhalten */
.t-sipgate {--th:1.26rem}
.t-whatsapp{--th:1.26rem}
.t-gmail   {--th:1.18rem}
.t-make    {--th:1.01rem}  /* fetter Schnitt, wirkt sonst doppelt so laut */

/* --- Karten mit Rahmen, nur wo eine Karte etwas bedeutet ------------------ */
.note{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(1.25rem,3cqw,1.75rem);
  box-shadow:0 1px 2px rgba(16,19,25,.04);
}
.note > .label{display:block;margin-bottom:.9rem}
.note h3{margin-bottom:.5rem}
.note p{font-size:1rem;color:var(--ink-2)}

/* Bernstein trägt hier dieselbe Bedeutung wie im Protokoll: hier ist der
   Mensch am Zug. */
.note--hand{background:var(--signal-wash);border-color:var(--signal-rule)}
.note--hand > .label{color:var(--signal)}

/* --- Frage und Antwort ---------------------------------------------------- */
.qa{margin-top:2.5rem;border-top:1px solid var(--rule);max-width:44rem}
.qa > li{border-bottom:1px solid var(--rule)}
.qa h3{padding:1.4rem 0 .5rem;font-size:1.125rem}
.qa p{padding-bottom:1.4rem;font-size:1rem;color:var(--ink-2)}
.qa p + p{padding-bottom:1.4rem;margin-top:-.6rem}

/* --- Aufzählung mit Haarstrich ------------------------------------------- */
.dashed li{position:relative;padding-left:1.1rem;font-size:.9375rem;color:var(--ink-2);
  margin-bottom:.55rem}
.dashed li::before{content:"";position:absolute;left:0;top:.7em;width:.4rem;height:1px;
  background:var(--ink-3)}
.dashed li:last-child{margin-bottom:0}

/* --- Grenzen -------------------------------------------------------------- */
.limits{margin-top:2rem;display:grid;gap:1.75rem;max-width:44rem}
.limits > div{padding-left:1.25rem;border-left:1px solid var(--rule-2)}
.limits h3{font-size:1.0625rem;margin-bottom:.5rem}
.limits p{font-size:1rem;color:var(--ink-2)}

/* --- Seitenwechsel: der Verweis auf die nächste Unterseite ---------------- */
.next{margin-top:var(--gap-sec);border-top:1px solid var(--rule)}
.next .wrap{padding-block:clamp(2.5rem,5cqw,3.5rem)}
.next-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.next-grid a{
  display:block;background:var(--paper);padding:1.5rem;color:var(--ink);
  transition:background .14s var(--ease);
}
.next-grid a:hover{background:var(--card);text-decoration:none}
.next-grid .label{display:block;margin-bottom:.5rem}
.next-grid strong{display:block;font-size:1.125rem;font-weight:600;letter-spacing:-.015em}
.next-grid p{margin-top:.35rem;font-size:.9375rem;color:var(--ink-2)}

/* --- Kontaktabschnitt ----------------------------------------------------- */
.contact{margin-top:var(--gap-sec);background:var(--paper-2);border-top:1px solid var(--rule)}
/* Folgt der Kontaktblock direkt auf die Weiterlesen-Leiste, bringt er seinen
   eigenen Außenabstand mit — die Karten säßen dann oben in ihrem Band statt
   mittig. Der Abstand der Leiste reicht allein. */
.next + .contact{margin-top:0}
.contact .wrap{padding-block:clamp(3rem,6cqw,4.5rem) clamp(3.5rem,7cqw,5.5rem)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);
  gap:2.5rem 4rem;align-items:center}
.contact h2{max-width:16ch}
.contact .lead-p{margin-top:1.25rem}
.contact .actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:2rem}

.person{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:1.5rem}
.person .portrait{
  width:4.5rem;height:4.5rem;border-radius:var(--r-pill);background:var(--paper-2);
  border:1px dashed var(--rule-2);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.625rem;color:var(--ink-3);text-align:center;line-height:1.2;
}
.person .portrait-img{
  width:4.5rem;height:4.5rem;border-radius:var(--r-pill);object-fit:cover;
  background:var(--paper-2);
}
.person h3{margin-top:1rem;font-size:1.0625rem}
.person .role{font-size:.9375rem;color:var(--ink-3);margin-top:.3rem}
.person .dashed{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--rule)}

/* --- Direktkontakt -------------------------------------------------------- */
.direct{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;grid-template-columns:repeat(2,minmax(0,1fr))}
.direct > a,.direct > div{background:var(--card);padding:1.25rem 1.5rem;color:var(--ink)}
.direct .ico-oben{margin-bottom:.6rem}
.note > .label + h3.with-ico{margin-top:.15rem;margin-bottom:.5rem}
.note h3 + .dashed{margin-top:.5rem}
/* Absatz nach Absatz oder nach einer Liste im Kasten: ein Wert. */
.note p + p,.note ul + p{margin-top:1rem}
.direct > a:hover{background:var(--paper-2);text-decoration:none}
.direct .label{display:block;margin-bottom:.4rem}
.direct strong{font-size:1.0625rem;font-weight:500;letter-spacing:-.01em}
.direct p{font-size:.875rem;color:var(--ink-3);margin-top:.2rem}

/* --- Formular ------------------------------------------------------------
   Das Formular einer Automatisierungsfirma sollte selbst ein sauberer Ablauf
   sein: es prüft, es meldet zurück, es sagt was passiert ist.
   ------------------------------------------------------------------------ */
.form{margin-top:2.5rem;max-width:38rem}
.field{margin-bottom:1.25rem}
.field label{display:block;font-size:.9375rem;font-weight:500;color:var(--ink);margin-bottom:.4rem}
.field .hint{font-weight:400;color:var(--ink-3);font-size:.875rem}
.field input,.field textarea,.field select{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--card);border:1px solid var(--rule-2);border-radius:var(--r);
  padding:.7rem .85rem;min-height:2.875rem;
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease);
}
.field textarea{min-height:9rem;resize:vertical;line-height:1.55}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 1.05rem) 1.25rem,calc(100% - .75rem) 1.25rem;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.5rem}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:.75}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:0}
.field-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.25rem}

.check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:start;
  margin-bottom:1.5rem}
.check input{width:1.15rem;height:1.15rem;min-height:0;margin:.25rem 0 0;accent-color:var(--blue);
  cursor:pointer}
.check label{font-size:.9375rem;font-weight:400;color:var(--ink-2);margin:0;line-height:1.5}

/* Fehler benennen das Problem und den nächsten Schritt, nicht den Zustand. */
.err{display:none;margin-top:.4rem;font-size:.875rem;color:#a3120c}
.field.is-bad input,.field.is-bad textarea,.field.is-bad select{border-color:#c4362f}
.field.is-bad .err,.check.is-bad .err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.form-note{font-size:.875rem;color:var(--ink-3);max-width:21rem}
.form-state{margin-top:1.5rem;display:none;border-radius:var(--r);padding:1.1rem 1.25rem;
  font-size:.9375rem;line-height:1.55}
.form-state.is-on{display:block}
.form-state[data-state="ok"]{background:var(--blue-wash);border:1px solid #c3cdfb;color:var(--ink)}
.form-state[data-state="bad"]{background:#fdf0ef;border:1px solid #f0c4c1;color:#7d1510}
.form-state strong{display:block;margin-bottom:.2rem}

/* --- Rechtstexte ---------------------------------------------------------- */
.legal{max-width:44rem;padding-top:2.5rem}
.legal h2{font-size:1.375rem;margin-top:2.5rem;letter-spacing:-.018em}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1.0625rem;margin-top:1.5rem}
.legal p,.legal li{font-size:1rem;color:var(--ink-2)}
.legal p{margin-top:.75rem}
.legal h2 + p,.legal h3 + p,.legal h2 + .dashed,.legal h3 + .dashed,
.legal h2 + dl,.legal h3 + dl{margin-top:.6rem}
.legal .dashed{margin-top:.75rem}
.legal dl{margin:1rem 0 0;display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:.5rem 1.5rem}
/* "Unternehmensgegenstand" ist breiter als die Spalte. Trennen statt
   ueberstehen lassen, sonst laeuft das Wort in den Wert hinein. */
.legal dt{font-size:.9375rem;color:var(--ink-3);hyphens:auto;overflow-wrap:break-word}
.legal dd{margin:0;font-size:1rem;color:var(--ink)}

/* --- Fußzeile ------------------------------------------------------------- */
/* Abschnitte haben oben Abstand, aber keinen unten. Folgt die Fusszeile
   unmittelbar auf </main>, klebt der letzte Text sonst an der Linie. Dann
   bekommt sie denselben Abstand, den die Abschnitte nach oben haben.
   Steht ein getönter Block davor (Kontakt), bringt der seinen eigenen mit. */
.foot{border-top:1px solid var(--rule);padding:3rem 0 3.5rem;background:var(--paper);margin-top:0}
main + .foot{margin-top:var(--gap-sec)}
/* Die 3 Linkspalten stehen mit dem Textblock links auf einer Unterkante.
   Mittig ausgerichtet wirkt es nicht mittig, weil Logo und Absatz eigene
   Leerräume mitbringen. Eine gemeinsame Kante liest sich als Absicht. */
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:2rem;align-items:end}
.foot .logo{width:7.75rem}
.foot-grid > div > p{font-size:.9375rem;color:var(--ink-3);margin-top:.6rem;max-width:24rem}
/* Telefon und E-Mail unter dem Absatz. Enger gesetzt als die Linkspalten:
   das sind zwei zusammengehörige Angaben, keine Aufzählung. */
.foot-grid .foot-kontakt{list-style:none;margin:1.15rem 0 0;padding:0}
.foot-grid .foot-kontakt li{margin-bottom:.3rem}
.foot-grid .foot-kontakt li:last-child{margin-bottom:0}
.foot h3{font-size:.6875rem;font-family:var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;margin-bottom:.9rem}
.foot-grid li{margin-bottom:.82rem}
.foot-grid li:last-child{margin-bottom:0}
.foot-grid a{font-size:.9375rem;color:var(--ink-2)}
.foot-grid a:hover{color:var(--blue)}
/* Schlusszeile: nur noch der Rechtsträger. Telefon und E-Mail stehen jetzt
   oben im linken Block, doppelt braucht sie niemand. */
.foot-legal{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.5rem 1.5rem;margin-top:2.5rem;padding-top:1.5rem;
  border-top:1px solid var(--rule);font-size:.875rem;color:var(--ink-3);
}
.foot-legal a{color:var(--ink-3)}
.foot-legal a:hover{color:var(--blue)}

/* ==========================================================================
   EINWILLIGUNG — der Riegel für die erste Begegnung
   --------------------------------------------------------------------------
   Zurückhaltend wie der Rest der Seite: helle Karte, feine Kante, ruhiger
   Schatten. Blau kommt nur einmal vor, auf dem Knopf, der die Handlung
   trägt. Auffallen soll die Karte durch ihre Lage und ihren Schatten, nicht
   durch Farbe.

   „Alle akzeptieren" und „Nur notwendige" sind gleich groß und gleich
   erreichbar. Das ist keine Geschmacksfrage: eine Ablehnung darf nicht
   schwerer zu finden sein als eine Zustimmung.
   ========================================================================== */
.cc{
  position:fixed;z-index:200;
  right:max(1.25rem,env(safe-area-inset-right));
  bottom:max(1.25rem,env(safe-area-inset-bottom));
  left:auto;width:min(26rem,calc(100vw - 2.5rem));
  max-height:calc(100vh - 2.5rem);overflow-y:auto;overscroll-behavior:contain;
  background:var(--card);color:var(--ink);
  border:1px solid var(--rule);border-radius:calc(var(--r) * 2);
  box-shadow:0 1px 2px rgba(16,19,25,.06),0 24px 56px -16px rgba(16,19,25,.28);
  font-size:.9375rem;line-height:1.6;
}
.cc[hidden]{display:none}
.cc-kopf{padding:1.35rem 1.4rem 1.1rem}
.cc h2{font-size:1.0625rem;font-weight:600;letter-spacing:-.014em;color:var(--ink);margin:0 0 .4rem}
.cc-kopf > p{color:var(--ink-2);margin:0}
.cc a{color:var(--blue)}

/* Die Knopfzeile. Beide Entscheidungen wiegen gleich viel, deshalb dieselbe
   Grundfläche; nur die Füllung unterscheidet sie. */
.cc-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding:0 1.4rem 1.25rem}
.cc-knoepfe .btn{min-height:2.75rem;padding:.5rem 1rem;flex:1 1 8.5rem}
.cc-hell{background:var(--blue);color:#fff;border-color:transparent}
.cc-hell:hover{background:var(--blue-dark);color:#fff}
.cc-dunkel{background:var(--card);color:var(--ink);border-color:var(--rule-2)}
.cc-dunkel:hover{background:var(--paper-2);color:var(--ink);border-color:var(--ink-3)}
/* „Einstellungen" ist bewusst kein Knopf: es entscheidet nichts, es öffnet nur. */
.cc-mehr{
  flex:1 0 100%;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:2.5rem;padding:0 .25rem;background:none;border:0;
  font:inherit;font-size:.9375rem;color:var(--ink-3);cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:.2em;
}
.cc-mehr:hover{color:var(--ink);text-decoration-color:var(--ink-3)}
.cc-mehr svg{width:.85em;height:.85em;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--ease)}
.cc-mehr[aria-expanded="true"] svg{transform:rotate(180deg)}

/* --- Die Schalter --------------------------------------------------------- */
.cc-wahl{border-top:1px solid var(--rule);padding:.25rem 1.4rem 1.25rem}
.cc-wahl[hidden]{display:none}
.cc-wahl ul{list-style:none;margin:0;padding:0}
.cc-wahl li{border-bottom:1px solid var(--rule)}
.cc-wahl li:last-child{border-bottom:0}

/* Das ganze Feld ist die Schaltfläche, nicht nur der kleine Regler. */
.cc-zeile{
  display:grid;grid-template-columns:minmax(0,1fr) 2.75rem;gap:.3rem 1rem;
  align-items:center;padding:.9rem 0;cursor:pointer;
}
.cc-zeile strong{display:block;font-size:.9375rem;font-weight:600;color:var(--ink);letter-spacing:-.008em}
.cc-zeile span{display:block;color:var(--ink-3);font-size:.875rem;line-height:1.5}
.cc-zeile input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.cc-regler{
  grid-column:2;grid-row:1/span 2;align-self:center;
  width:2.75rem;height:1.5rem;border-radius:var(--r-pill);
  background:var(--paper-2);border:1px solid var(--rule-2);
  position:relative;flex:none;
  transition:background .16s var(--ease),border-color .16s var(--ease);
}
.cc-regler::after{
  content:"";position:absolute;top:50%;left:.1875rem;translate:0 -50%;
  width:1.0625rem;height:1.0625rem;border-radius:50%;background:var(--ink-3);
  transition:translate .16s var(--ease),background .16s var(--ease);
}
.cc-zeile:hover .cc-regler{border-color:var(--ink-3)}
input:checked + .cc-regler{background:var(--blue);border-color:var(--blue)}
input:checked + .cc-regler::after{translate:1.1875rem -50%;background:#fff}
/* Notwendig lässt sich nicht abwählen. Das zeigt der Schalter auch. */
input:disabled + .cc-regler{background:var(--rule-2);border-color:var(--rule-2)}
input:disabled + .cc-regler::after{translate:1.1875rem -50%;background:var(--card)}
.cc-zeile:has(input:disabled){cursor:default}
input:focus-visible + .cc-regler{outline:2px solid var(--blue);outline-offset:2px}

.cc-fuss{display:flex;padding-top:1.1rem}
.cc-fuss .btn{min-height:2.75rem;padding:.5rem 1rem;width:100%}

/* Der Auftritt: aus der Ecke herein, ein einziges Mal. */
@media (prefers-reduced-motion:no-preference){
  .cc{animation:cc-herein .32s var(--ease) both}
}
@keyframes cc-herein{from{opacity:0;translate:0 .9rem}to{opacity:1;translate:0}}

/* Schmal: die Karte sitzt ohnehin schon an beiden Rändern, weil ihre Breite
   auf die Fensterbreite gedeckelt ist. Hier geht es nur noch um die Innenränder.
   Fensterabfrage statt Containerabfrage: der Riegel hängt bewusst außerhalb
   von .site, damit die Tastatur zuerst bei ihm landet. */
@media (max-width:26rem){
  .cc{
    right:max(.75rem,env(safe-area-inset-right));
    bottom:max(.75rem,env(safe-area-inset-bottom));
    width:calc(100vw - 1.5rem);max-height:calc(100vh - 1.5rem);
  }
  .cc-kopf,.cc-knoepfe,.cc-wahl{padding-inline:1.15rem}
}

/* Der Riegel gehört auf den Schirm, nicht aufs Papier. */

@media print{.cc,.cc-oeffner,.fl-trenn{display:none !important}}

/* Der Weg zurück: in der Schlusszeile, damit man die Wahl jederzeit ändern kann. */
.cc-oeffner{
  background:none;border:0;padding:0;font:inherit;font-size:inherit;
  color:var(--ink-3);cursor:pointer;text-decoration:underline;
  text-underline-offset:.18em;text-decoration-color:var(--rule-2);
}
.cc-oeffner:hover{color:var(--blue);text-decoration-color:currentColor}
.fl-trenn{color:var(--rule-2);padding-inline:.5rem;user-select:none}
@media (pointer:coarse){.cc-oeffner{display:inline-flex;align-items:center;min-height:2.75rem}}

/* ==========================================================================
   BREITEN — Container, nicht Fenster.
   Vier Stufen, aus dem Inhalt abgeleitet statt aus Gerätenamen.

     über 66rem    volle Anlage: Marginalspalte 10.5rem, Navigation gesetzt
     bis 66rem     gedrängt: Marginalspalte 6.5rem, kompakte Kopfleiste
     bis 58rem     Menü statt Navigation, Inhalt weiter zweispaltig
     bis 44rem     eine Spalte; die Marginalie wird zur Zeile
     bis 36rem     Telefon: gestapelt, Trennung erlaubt
   ========================================================================== */

@container site (max-width:66rem){
  .head .wrap{gap:1rem}
  .logo{width:8rem}
  .nav{gap:0}
  .nav a{padding:.4rem .5rem;font-size:.875rem}
  .head .btn{min-height:2.375rem;padding:.4rem .875rem;font-size:.875rem}
  .sec > .wrap{grid-template-columns:6.5rem minmax(0,1fr);gap:2rem}
  .sec .rail hr{margin-right:1.25rem}
  .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,17rem);gap:2.5rem}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 1.5rem}
  .foot-grid > div:first-child{grid-column:1/-1}
  .foot-grid > div:first-child > p{max-width:34rem}
  .legal dl{grid-template-columns:minmax(0,9rem) minmax(0,1fr)}
}

/* Unter 62rem steht der Film unter dem Satz — nebeneinander wären beide zu
   schmal, um zu wirken. */
@container site (max-width:62rem){
  .top--split .wrap{grid-template-columns:minmax(0,1fr);gap:2.25rem;align-items:start}
  /* Untereinander gibt es keine Zeilenhoehe zum Fuellen. */
  .top--split .video{position:static}
  .top--split .video video{position:static;height:auto;aspect-ratio:16/9;object-fit:fill}
  .top--split h1{font-size:clamp(2.375rem,5.4cqw,3.75rem);max-width:20ch}
  .top--split .lede{max-width:34rem}
  /* Gestapelt füllt der Film die Spalte: so endet er auch hier auf derselben
     Kante wie das Werkzeugband darunter. */
  .video{max-width:none}
}

@container site (max-width:58rem){
  .nav{display:none}
  .head .btn{display:none}
  .head .wrap{grid-template-columns:1fr auto}
  .burger{display:inline-flex}
  /* Die Kette bricht auf zwei plus eins, bevor die Spalten zu eng werden. */
  .chain{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chain > li{padding-right:1.5rem}
  .chain > li:nth-child(odd){padding-left:0;border-left:0}
  .chain > li:nth-child(even){padding-left:1.5rem;border-left:1px solid var(--rule)}
  .chain > li:nth-child(n+3){border-top:1px solid var(--rule)}
}

@container site (max-width:52rem){
  /* Ab hier legt sich die Symbolleiste quer über den Inhalt, statt ihm die
     Breite wegzunehmen. Ausblenden ginge nicht: sie ist das Bedienelement. */
  .dash-body{grid-template-columns:minmax(0,1fr)}
  .dash-nav{
    flex-direction:row;align-items:center;
    border-right:0;border-bottom:1px solid var(--rule);padding:.35rem .4rem;
  }
  .dash-nav .pt-aus{display:none}
  .dash-nav ul{
    flex-direction:row;width:auto;gap:.15rem;
    overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .dash-nav ul::-webkit-scrollbar{display:none}
  .dash-nav li{flex:0 0 auto}
  .dash-nav .pt-nutzer{margin:0 0 0 auto}
}

@container site (max-width:44rem){
  .sec > .wrap{grid-template-columns:minmax(0,1fr);gap:1.25rem}
  .sec .rail{padding-top:0}
  .sec .rail > div{position:static;display:flex;align-items:center;gap:.7rem}
  .sec .rail > div::after{content:"";height:1px;flex:1;max-width:7rem;background:var(--rule-2)}
  .sec .rail hr{display:none}
  /* Die Kette kippt in die Senkrechte: die Linie führt jetzt von oben nach
     unten, die Verbindung bleibt sichtbar. */
  .chain{grid-template-columns:minmax(0,1fr)}
  .chain > li,.chain > li:nth-child(odd),.chain > li:nth-child(even){
    padding:1.5rem 0 1.5rem 1.5rem;border-left:1px solid var(--rule);border-top:0}
  .chain > li:first-child{padding-top:.5rem}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .person{max-width:26rem}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Der Weg eines Falls kippt in die Senkrechte: die Schiene läuft jetzt
     von oben nach unten, die Knoten sitzen links daneben. */
  .flow-track{padding:0 0 0 1.75rem}
  .flow-rail{left:5px;right:auto;top:.9rem;bottom:2.5rem;width:2px;height:auto}
  .flow-fill{transform:scaleY(var(--p,0));transform-origin:center top}
  .flow-steps{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .flow-steps > li{padding:0}
  .flow-steps .dot{top:.35rem;left:-1.75rem;transform:none}
  .flow-steps .t{margin-top:0}
  .flow-steps p{max-width:none}
  .no-js-flow .flow-fill{transform:scaleY(1)}
  .next-grid{grid-template-columns:minmax(0,1fr)}
  .direct{grid-template-columns:minmax(0,1fr)}
  /* Die Bildstrecke stapelt: drei Tafeln untereinander lesen sich als
     Abfolge, drei Streifen nebeneinander wären zu schmal. */
  .panels{grid-template-columns:minmax(0,1fr)}
  .panels .slot{aspect-ratio:16/9}
  .split{grid-template-columns:minmax(0,1fr);gap:1.25rem}
  .legal dl{grid-template-columns:minmax(0,1fr);gap:.15rem}
  .legal dt{margin-top:.6rem}
}

@container site (max-width:36rem){
  .head .wrap{min-height:3.75rem}
  .rows > li{grid-template-columns:minmax(0,1fr);gap:.35rem}
  .steps > li{grid-template-columns:2.5rem minmax(0,1fr);gap:1rem;padding-bottom:2rem}
  .steps > li::after{left:.55rem}
  .top .actions{gap:.75rem}
  .top .actions .btn{width:100%}
  .contact .actions{gap:.75rem}
  .contact .actions .btn{width:100%}
  .field-2{grid-template-columns:minmax(0,1fr)}
  .form-foot .btn{width:100%}
  /* Das Protokoll verliert die dritte Spalte: die Quelle rutscht unter das
     Ereignis, statt auf 90 Pixel zusammengequetscht zu werden. */
  .rows-kopf,.run-spalten{display:none}
  .run li{grid-template-columns:3.75rem minmax(0,1fr)}
  .run .src{grid-column:2;text-align:left;margin-top:.15rem}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .charts{grid-template-columns:minmax(0,1fr)}
  /* Die Spalten nach Monteur schieben sich seitlich, statt auf Fingerbreite
     zusammenzuschrumpfen. */
  .pt-spalten{grid-auto-flow:column;grid-auto-columns:13rem;grid-template-columns:none;
    overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:.3rem}
  .pt-kacheln{grid-template-columns:minmax(0,1fr)}
  .pt-zwei{grid-template-columns:minmax(0,1fr)}
  /* Zwei Spalten reichten nicht: dt und dd sind auf Zeile 1 und 2 gepinnt,
     dadurch legte das Raster eine dritte Spalte an und die Werte liefen
     ineinander. Auf dem Telefon deshalb untereinander, wie bei .feed. */
  .pt-auftrag dl{grid-template-columns:minmax(0,1fr)}
  .pt-auftrag dt{grid-row:auto}
  .pt-auftrag dd{grid-row:auto;margin-bottom:.35rem}
  .pt-auftrag dd:last-child{margin-bottom:0}
  .ring{width:5.5rem;height:5.5rem}
  .feed-tools{display:none}
  .feed dl{grid-template-columns:minmax(0,1fr)}
  .feed dt{grid-row:auto}
  .feed dd{grid-row:auto;margin-bottom:.35rem}
  .feed dd:last-child{margin-bottom:0}
  /* Auf dem Telefon laeuft das Band weiter, nur ist ein Satz doppelt so
     breit wie das sichtbare Fenster: dadurch stehen nie mehr als etwa drei
     Marken gleichzeitig im Bild, der Rest laeuft nach. Das Etikett rueckt
     darueber, sonst stellt es sich neben das schmale Band.
     (.marquee-set bleibt bei 25 % — von 800 % sind das 200 % der Bandbreite.) */
  .band--tools .wrap{flex-direction:column;align-items:center;gap:.9rem}
  .band--tools .label{text-align:center}
  .marquee{flex:none;width:100%}
  .marquee-inner{width:800%}
  .prose p,.lead-p,.rows p,.steps p,.limits p,.chain p,.qa p,.legal p,
  .note p,.dashed li,.run .ev,.run .out{
    hyphens:auto;
    -webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;
    hyphenate-limit-chars:6 3 3;
  }
  .foot-grid > div:first-child{grid-column:1/-1}
  /* Nebeneinander wird es hier zu eng: alles untereinander, linksbündig. */
  .foot-legal{gap:.9rem;margin-top:2rem}
}

/* --- Eingabeart statt Bildschirmbreite ------------------------------------ */
@media (pointer:coarse){
  .tlink{min-height:2.75rem}
  .foot-grid a,.foot-legal a{display:inline-flex;align-items:center;min-height:2.75rem}
  .foot-grid li{margin-bottom:0}
  .foot-grid .foot-kontakt li{margin-bottom:0}
}
@media (hover:none){
  .rows > li:hover{background:transparent}
  .nav a:hover{background:transparent;color:var(--ink-2)}
  .btn:hover{background:var(--blue)}
  .btn--ghost:hover{background:transparent}
  .next-grid a:hover{background:var(--paper)}
  a:hover{text-decoration:none}
  .tlink:hover svg{transform:none}
}

/* Auf kurzen Schirmen (iPhone SE, iPhone 8, jedes Telefon im Querformat)
   passt die Liste sonst nicht auf einmal hin. Das Menue bleibt scrollbar,
   aber Scrollen im Menue soll die Ausnahme sein, nicht die Regel. */
@media (max-height:44rem){
  .mobilnav ul{padding:3.5rem var(--gutter) 0}
  .mobilnav a:not(.btn):not(.mobilnav-marke){padding:.55rem 0}
  .mobilnav-marke{top:.8rem}
  .mobilnav-marke .logo{width:6.25rem}
}

@media (max-height:34rem){
  .mobilnav li:first-of-type,.mobilnav li:last-of-type{margin-block:0}
  .mobilnav ul{padding-bottom:1.5rem}
  .mobilnav .btn{margin-top:.9rem}
}

/* --- Telefon quer --------------------------------------------------------- */
@media (orientation:landscape) and (max-height:30rem){
  .head .wrap{min-height:3.25rem}
  .top{padding-block:2.25rem 1.75rem}
}

/* --- Bewegung nur, wenn erwünscht ----------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .nav-menu{transition:none}
  .nav-klapp > a::after{transition:none}
  .fragen details[open] .antwort{animation:none}
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  /* Ohne Bewegung steht das Band still: ein Satz, umbrechend, alles lesbar. */
  .marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .marquee-inner{width:100%;animation:none !important}
  .band--tools .marquee-set{flex:0 0 auto;width:100%;flex-wrap:wrap;
    justify-content:flex-start;gap:1rem 2.5rem;padding-right:0}
  .band--tools .marquee-set[aria-hidden="true"]{display:none}
  .js-run .run[data-play] li,.js-run .run[data-play] .out{opacity:1 !important;transform:none !important}
}

/* --- Papier --------------------------------------------------------------- */
@media print{
  /* Auf Papier gibt es nichts zum Aufklappen. */
  .fragen details .antwort{display:block}
  .fragen .zeichen{display:none}
  html,body,.site{background:#fff;color:#000}
  .skip,.head,.mobilnav,.burger,.next,.form-foot,.form-state{display:none !important}
  .marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .marquee-inner{width:100%;animation:none !important}
  .band--tools .marquee-set{flex:0 0 auto;width:100%;flex-wrap:wrap;
    justify-content:flex-start;gap:.5rem 1.5rem;padding-right:0}
  .band--tools .marquee-set[aria-hidden="true"]{display:none}
  .site{font-size:10.5pt;line-height:1.45}
  .js-run .run[data-play] li,.js-run .run[data-play] .out{opacity:1 !important;transform:none !important}
  .run{background:#fff;color:#000;border:1px solid #999;box-shadow:none}
  .run .t,.run .src,.run .out,.run-head .label,.run-head .id{color:#444}
  .run .ev,.run li.hand .ev,.run li.hand .ev b,.run-head strong{color:#000}
  .run li,.run-head,.run .out{border-color:#ccc}
  .sec{padding-top:1.75rem}
  .sec > .wrap{grid-template-columns:minmax(0,1fr);gap:.75rem}
  .sec .rail > div{position:static;display:flex;align-items:center;gap:.7rem}
  .sec .rail hr{display:none}
  .sec,.steps > li,.limits > div,.note,.person,.chain > li,.qa > li{break-inside:avoid}
  .prose,.lead-p,.rows p,.steps p{max-width:none}
  a{color:inherit;text-decoration:none}
  .contact{margin-top:2rem;background:#fff}
  .foot{padding-block:1.5rem}
}