/* MOST Markenportal
   Die Werte in :root sind die Tokens des MOST Design Systems, Release A.1.
   Wer hier etwas ändert, ändert die Marke, nicht nur diese Seite.
   Bewusst ohne Inline-Styles im HTML: die Seite läuft mit style-src 'self'. */

@font-face{font-family:'Archivo';src:url('../fonts/archivo-variabel-latin.woff2') format('woff2');
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+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:'Archivo';src:url('../fonts/archivo-variabel-latin-ext.woff2') format('woff2');
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';src:url('../fonts/ibm-plex-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../fonts/ibm-plex-sans-400-kursiv.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../fonts/ibm-plex-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../fonts/ibm-plex-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  /* Marke */
  --most-red:#c11412; --most-signal:#ff2214;
  /* Text und Fläche */
  --ink:#060606; --canvas:#f4f4f2; --surface:#fbfbf9; --rule:#d2d2ce; --muted:#676464;
  /* dunkle Flächen */
  --ink-2:#141414; --ink-rule:#2b2a2a; --ink-muted:#a3a1a1;
  /* Diagramm: eine Rampe aus einem Farbton, Rot ist nie eine Stufe */
  --chart-1:#b4b0b0; --chart-2:#908b8b; --chart-3:#676464; --chart-4:#413e3e; --chart-5:#1a1818;
  /* Schrift */
  --display:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --data:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --office:Arial,Helvetica,sans-serif;
  /* Raster und Bewegung */
  --nav-w:296px; --pad:clamp(16px,4.4vw,60px);
  --fast:150ms; --slow:220ms; --ease:cubic-bezier(.25,1,.5,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--body);font-weight:400;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit;text-decoration-color:var(--muted);text-decoration-thickness:1px;text-underline-offset:3px;
  transition:text-decoration-color var(--fast) var(--ease)}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:2px solid var(--most-red);outline-offset:3px}
.nav :focus-visible,.board :focus-visible,.dark :focus-visible{outline-color:var(--most-signal)}
button{font:inherit;color:inherit}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--ink);color:#fff;padding:10px 16px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Schriftrollen ---------------------------------------------------- */
.etikett,.eyebrow{font-family:var(--data);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0;font-weight:400}
h1,h2,h3{font-family:var(--display);margin:0}
h2{font-variation-settings:'wdth' 120;font-stretch:120%;font-weight:750;text-transform:uppercase;
  font-size:clamp(25px,3vw,36px);line-height:1.04;letter-spacing:-.012em;text-wrap:balance}
h3{font-variation-settings:'wdth' 112;font-stretch:112%;font-weight:650;font-size:20px;line-height:1.25;
  margin:56px 0 12px;letter-spacing:-.005em;scroll-margin-top:24px}
h4{font-family:var(--body);font-size:15px;font-weight:600;margin:28px 0 6px}
p{margin:0 0 16px;max-width:68ch}
.lead{font-size:18px;line-height:1.55;max-width:62ch;margin-bottom:28px}
ul,ol{max-width:68ch;padding-left:20px;margin:0 0 18px}
li{margin-bottom:6px}
strong,b{font-weight:600}
code,kbd{font-family:var(--data);font-size:.86em;background:#e9e9e5;padding:1px 5px}
.num{font-family:var(--data);font-size:13px;font-variant-numeric:tabular-nums}

/* ---------- Grundgerüst -------------------------------------------------------- */
.layout{display:flex;align-items:flex-start}
.main{flex:1;min-width:0}
.sheet{padding:0 var(--pad) 120px;max-width:1080px}

/* ---------- Seitenleiste: die Kapitel als Laufweg -------------------------------
   Gelesen ist gefüllt, das aktuelle Kapitel ist Signalrot, was kommt ist offen.
   Das ist der Lesestand, über Form codiert, so wie das System es verlangt. */
.nav{width:var(--nav-w);flex:0 0 var(--nav-w);height:100vh;position:sticky;top:0;background:var(--ink);
  color:#fff;display:flex;flex-direction:column;overflow:hidden}
.nav__brand{padding:26px 26px 22px;border-bottom:1px solid var(--ink-rule)}
.nav__brand img{width:132px;height:auto;display:block}
.nav__brand span{display:block;margin-top:14px;font-family:var(--data);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-muted)}
.nav__scroll{flex:1;overflow-y:auto;padding:22px 0 26px;scrollbar-width:thin;scrollbar-color:var(--ink-rule) transparent}
.nav__group{position:relative}
/* senkrechter Verbinder zur nächsten Station */
.nav__group::before{content:"";position:absolute;left:31px;top:24px;bottom:-12px;width:1px;background:#3a3939}
.nav__group:last-child::before{display:none}
.nav__group.is-done::before{background:#fff}
.nav__top{position:relative;display:flex;align-items:baseline;gap:10px;padding:8px 22px 8px 54px;
  color:#d2d2d2;font-size:14.5px;font-weight:500;text-decoration:none;transition:color var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.nav__top::before{content:"";position:absolute;left:26px;top:13px;width:11px;height:11px;border-radius:50%;
  border:1.5px solid #6e6c6c;background:var(--ink)}
.nav__top:hover{color:#fff;background:var(--ink-2)}
.nav__group.is-done .nav__top::before{background:#fff;border-color:#fff}
.nav__group.is-current .nav__top{color:#fff}
.nav__group.is-current .nav__top::before{background:var(--most-signal);border-color:var(--most-signal);
  box-shadow:0 0 0 4px rgba(255,34,20,.22)}
.nav__num{font-family:var(--data);font-size:10.5px;color:var(--ink-muted);flex:0 0 auto;letter-spacing:.04em}
.nav__sub{list-style:none;margin:0;padding:2px 0 10px;max-width:none}
.nav__sub li{margin:0}
.nav__sub a{display:block;padding:5px 22px 5px 82px;color:var(--ink-muted);font-size:13.5px;text-decoration:none;
  transition:color var(--fast) var(--ease)}
.nav__sub a:hover{color:#fff}
.nav__sub a.is-active{color:#fff}
/* Mit Skript klappen nur die Unterpunkte des aktuellen Kapitels auf. Ohne Skript stehen alle da. */
.js .nav__group:not(.is-current) .nav__sub{display:none}
.nav__foot{padding:16px 26px 18px;border-top:1px solid var(--ink-rule);font-family:var(--data);font-size:10.5px;
  line-height:1.8;letter-spacing:.06em;color:var(--ink-muted)}

.navbar{display:none}

/* ---------- Das Brett: dunkler Kopf ------------------------------------------------ */
.board{background:var(--ink);color:#fff;padding:54px var(--pad) 48px}
.board__in{max-width:960px}
.board h1{font-variation-settings:'wdth' 122;font-stretch:122%;font-weight:800;text-transform:uppercase;
  font-size:clamp(32px,5.4vw,62px);line-height:.94;letter-spacing:-.015em;margin:14px 0 0}
.board__sum{font-family:var(--data);font-size:12px;color:var(--ink-muted);letter-spacing:.03em;margin:18px 0 0;max-width:none}
.board__sum b{color:#fff;font-weight:500}
.board__lead{font-size:18px;line-height:1.55;color:#d2d2d2;max-width:60ch;margin:26px 0 0}
.board .etikett{color:var(--ink-muted)}
.board__route{margin:40px 0 0;padding:22px 0 24px;border-top:1px solid var(--ink-rule);border-bottom:1px solid var(--ink-rule)}
.board__route .etikett{margin-bottom:18px}
.board__acts{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:30px}
.board__acts a.quiet{font-family:var(--data);font-size:12px;letter-spacing:.04em;color:#d2d2d2;text-decoration-color:#6e6c6c}
.board__acts a.quiet:hover{color:#fff;text-decoration-color:var(--most-signal)}

/* ---------- Der Laufweg -------------------------------------------------------------- */
.route{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr) max-content;max-width:none}
.stop{position:relative;padding-top:20px;min-width:0;margin:0}
.stop__mark{position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;border:1.5px solid #6e6c6c;background:transparent}
.stop::before{content:"";position:absolute;top:5px;left:13px;right:2px;height:1px;background:#3a3939;
  transform:scaleX(0);transform-origin:left center;animation:draw .5s var(--ease) forwards}
.stop:last-child::before{display:none}
.stop__label{font-family:var(--data);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-muted);
  display:block;padding-right:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stop.is-done .stop__mark{background:#fff;border-color:#fff}
.stop.is-done::before{background:#fff}
.stop.is-done .stop__label{color:#d2d2d2}
.stop.is-now .stop__mark{background:var(--most-signal);border-color:var(--most-signal);box-shadow:0 0 0 4px rgba(255,34,20,.22)}
.stop.is-now .stop__label{color:#fff}
.stop.is-wait .stop__mark{border-color:var(--most-signal);border-style:dashed}
.stop.is-wait .stop__label{color:var(--most-signal)}
.stop.is-wait::before{background:none;border-top:1px dashed #5a5858;height:0}
@keyframes draw{to{transform:scaleX(1)}}
.route--4{grid-template-columns:repeat(3,1fr) max-content}

.tour{display:grid;grid-template-columns:minmax(170px,1fr) minmax(280px,2.1fr) minmax(130px,.8fr);gap:24px;align-items:center;
  padding:18px 0;border-top:1px solid var(--ink-rule)}
.tour:last-child{border-bottom:1px solid var(--ink-rule)}
.tour__name{font-family:var(--display);font-variation-settings:'wdth' 112;font-stretch:112%;font-weight:600;font-size:16px;margin:0 0 2px}
.tour__sub{font-family:var(--data);font-size:11px;color:var(--ink-muted)}
.tour__state{font-family:var(--data);font-size:11px;text-align:right;color:var(--ink-muted);margin:0;max-width:none}
.tour__state b{display:block;font-weight:500;color:#fff;font-size:12px}
.tour--blocked .tour__state b{color:var(--most-signal)}
/* im Kasten: mehr Platz für die Strecke, keine doppelten Randlinien */
.box .tour{grid-template-columns:minmax(150px,.8fr) minmax(330px,2.8fr) minmax(120px,.7fr)}
.box .tour:first-child{border-top:0;padding-top:0}
.box .tour:last-child{border-bottom:0;padding-bottom:0}

/* ---------- Kapitelkopf ----------------------------------------------------------------- */
section[id]{padding-top:88px;scroll-margin-top:8px}
.sec-head{margin-bottom:30px;position:relative;padding-bottom:33px}
.sec-head .etikett{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:14px}
/* die Linie unter dem Kapiteltitel ist ein Stück Laufweg: Station, dann Strecke */
.sec-head::before{content:"";position:absolute;left:0;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--ink)}
.sec-head::after{content:"";position:absolute;left:15px;right:0;bottom:5px;height:1px;background:var(--ink)}

/* ---------- Status über Form ---------------------------------------------------------------- */
.status{display:inline-flex;align-items:center;gap:7px;font-family:var(--data);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:400;vertical-align:middle;white-space:nowrap}
.status::before{content:"";width:9px;height:9px;flex:none;border:1.5px solid var(--ink)}
.status--fest::before{background:var(--ink)}
.status--entwurf::before{border-style:dashed;border-color:var(--muted)}
.status--entwurf{white-space:normal}
h2 .status,h3 .status{margin-left:12px;letter-spacing:.1em}
.dark .status{color:var(--ink-muted)}
.dark .status::before{border-color:#fff}
.dark .status--fest::before{background:#fff}

/* ---------- Bausteine --------------------------------------------------------------------------- */
.grid{display:grid;gap:20px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gap-top{margin-top:26px}
.flush{margin:0}

.box{background:var(--surface);border:1px solid var(--rule);padding:24px}
.box > :first-child{margin-top:0}
.box > :last-child{margin-bottom:0}
.box--dark{background:var(--ink);border-color:var(--ink);color:#d2d2d2}
.box--dark strong,.box--dark b,.box--dark h4{color:#fff}

/* Hinweis: Haarlinie oben und unten, Etikett davor. Keine farbige Seitenkante. */
.hinweis{border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);padding:16px 0 18px;margin:28px 0;
  display:grid;grid-template-columns:118px minmax(0,1fr);gap:8px 24px}
.hinweis > .etikett{padding-top:4px;color:var(--ink)}
.hinweis p{margin:0;max-width:64ch}
.hinweis p + p{margin-top:10px}

.stage{background:var(--surface);border:1px solid var(--rule);padding:48px 56px;display:flex;align-items:center;justify-content:center;min-height:150px}
.stage img{width:100%;max-width:460px;height:auto;display:block}
.stage--ink{background:var(--ink);border-color:var(--ink)}
.stage--red{background:var(--most-red);border-color:var(--most-red)}
.stage--paper{background:var(--canvas)}
.stage--tight{padding:30px 34px}
.stage--sig img{max-width:120px}
.stage--wide img{max-width:640px}
.stage--lockup img{max-width:502px}
/* Schutzraum: die Maße beschriftet die Seite, nicht die Grafik (siehe build/logo-varianten.py) */
.schutz{position:relative;width:100%;max-width:640px;container-type:inline-size}
.schutz img{max-width:none;width:100%}
.schutz span{position:absolute;font-family:var(--data);font-size:clamp(8px,1.9cqw,12px);color:var(--muted);line-height:1;white-space:nowrap}
.schutz__a{left:1.4%;top:3.4%}
.schutz__b{left:6.4%;top:19.6%}
.schutz__h{left:95.4%;top:46.5%}
.caption{font-size:13.5px;line-height:1.5;color:var(--muted);margin:10px 0 0;max-width:56ch}
.caption b{font-family:var(--data);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);font-weight:500;margin-right:6px}

/* Steckbrief: Werte in einer Reihe, keine Kachelwand */
.brief{margin:0;border-top:1px solid var(--ink)}
.brief div{display:grid;grid-template-columns:150px minmax(0,190px) minmax(0,1fr);gap:6px 24px;padding:13px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.brief dt{font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.brief dd{margin:0}
.brief dd.wert{font-family:var(--data);font-size:15px;font-weight:500;overflow-wrap:anywhere}
.brief dd.sinn{font-size:14.5px;color:var(--muted)}

/* Regeltafeln */
.rules{list-style:none;padding:0;margin:16px 0 0;max-width:none;border-top:1px solid var(--ink)}
.rules li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;padding:13px 0;border-bottom:1px solid var(--rule);margin:0}
.rules .ico{margin-top:3px;color:var(--ink);line-height:0}
.rules b{display:block}
.rules li > span:last-child{color:var(--muted);font-size:15px;max-width:72ch}
.rules li > span:last-child b{color:var(--ink);font-size:16px}

/* Tabellen */
.tbl-scroll{overflow-x:auto;margin:12px 0 6px;border:1px solid var(--rule);background:var(--surface)}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{text-align:left;font-family:var(--data);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:400;padding:11px 16px;border-bottom:1px solid var(--rule);vertical-align:bottom;white-space:nowrap}
.tbl td{padding:11px 16px;border-bottom:1px solid #e6e6e2;vertical-align:top;color:var(--muted)}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{color:var(--ink);font-weight:500}
.tbl td.num,.tbl th.num{white-space:nowrap}
.tbl td.num{color:var(--ink)}
.tbl .r{text-align:right}
.tbl td strong{color:var(--ink)}
.tbl--hover tbody tr{transition:background-color var(--fast) var(--ease)}
.tbl--hover tbody tr:hover{background:var(--canvas)}
.tbl__foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--data);font-size:11.5px;color:var(--muted);margin:8px 0 0;max-width:none}
.sortbtn{background:none;border:0;padding:0;display:inline-flex;align-items:center;gap:6px;font:inherit;letter-spacing:inherit;
  text-transform:inherit;color:inherit;cursor:pointer}
.sortbtn:hover{color:var(--ink)}
.sortbtn svg{flex:none}
.farbpunkt{display:inline-block;width:11px;height:11px;border:1px solid var(--rule);vertical-align:-1px;margin-right:8px}

/* Farbfelder. Jede Zeile ist ein Knopf, der ihren Wert kopiert. */
.sw{border:1px solid var(--rule);background:var(--surface);display:flex;flex-direction:column;min-width:0}
.sw__chip{height:104px;border:0;border-bottom:1px solid var(--rule);cursor:pointer;display:block;width:100%;padding:0}
.sw__body{padding:14px 16px 8px}
.sw__body b{display:block;font-size:15.5px}
.sw__body p{font-size:13.5px;color:var(--muted);margin:4px 0 0;max-width:none;line-height:1.45}
.sw__vals{list-style:none;margin:6px 0 0;padding:0 0 8px;max-width:none}
.sw__vals li{margin:0}
.copy{width:100%;display:grid;grid-template-columns:50px minmax(0,1fr);gap:8px;align-items:baseline;text-align:left;background:none;border:0;
  padding:5px 16px;cursor:pointer;font-family:var(--data);font-size:12px;transition:background-color var(--fast) var(--ease)}
.copy:hover{background:var(--canvas)}
.copy i{font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.copy span{overflow-wrap:anywhere}
.copy.is-copied i{color:var(--ink)}
.c-rot{background:#c11412}.c-signal{background:#ff2214}.c-ink{background:#060606}.c-papier{background:#f4f4f2}
.c-surface{background:#fbfbf9}.c-rule{background:#d2d2ce}.c-muted{background:#676464}.c-weiss{background:#fff}
.c-ink2{background:#141414}.c-inkrule{background:#2b2a2a}.c-inkmuted{background:#a3a1a1}
.c-webpapier{background:#f4f4f4}.c-weblinie{background:#d2d2d2}.c-webrot{background:#c00303}
.c-g1{background:var(--chart-1)}.c-g2{background:var(--chart-2)}.c-g3{background:var(--chart-3)}.c-g4{background:var(--chart-4)}.c-g5{background:var(--chart-5)}

/* Säulen: geordnete Klassen, hell nach dunkel, Rot nur als Eskalation */
.bars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:end;height:190px;margin:0;padding:0;list-style:none;max-width:none;
  border-bottom:1px solid var(--ink)}
.bars li{margin:0;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.bars i{display:block}
.bars b{font-family:var(--data);font-size:11.5px;font-weight:500;margin-bottom:5px}
.bar-h1{height:72%}.bar-h2{height:44%}.bar-h3{height:26%}.bar-h4{height:15%}.bar-h5{height:32%}
.bars__x{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:8px 0 0;padding:0;list-style:none;max-width:none;
  font-family:var(--data);font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
.bars__x li{margin:0}
.bars__x .esk{color:var(--most-red)}

/* Schriftmuster */
.spec{border-top:1px solid var(--rule);padding:20px 0;display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:26px;align-items:baseline}
.spec:first-of-type{border-top-color:var(--ink)}
.spec:last-of-type{border-bottom:1px solid var(--rule)}
.spec .meta{font-family:var(--data);font-size:11px;letter-spacing:.05em;color:var(--muted);line-height:1.7}
.spec > :first-child{min-width:0;overflow-wrap:anywhere}
.t-seitentitel{font-family:var(--display);font-variation-settings:'wdth' 122;font-stretch:122%;font-weight:800;text-transform:uppercase;font-size:clamp(28px,3.4vw,40px);line-height:1.02;letter-spacing:-.015em}
.t-abschnitt{font-family:var(--display);font-variation-settings:'wdth' 116;font-stretch:116%;font-weight:700;text-transform:uppercase;font-size:19px;letter-spacing:.01em}
.t-objekt{font-family:var(--display);font-variation-settings:'wdth' 112;font-stretch:112%;font-weight:600;font-size:17px}
.t-text{font-size:15px;line-height:1.5}
.t-lese{font-size:16px;line-height:1.6}
.t-daten{font-family:var(--data);font-size:12px;font-variant-numeric:tabular-nums}
.t-kennzahl{font-family:var(--data);font-size:24px;font-weight:500;font-variant-numeric:tabular-nums}
.t-office{font-family:var(--office);font-size:14.5px;line-height:1.45}
.glyphen{font-size:30px;line-height:1.2;margin:10px 0 12px;overflow-wrap:anywhere}
.glyphen--display{font-family:var(--display);font-variation-settings:'wdth' 122;font-stretch:122%;font-weight:800;text-transform:uppercase}
.glyphen--data{font-family:var(--data);font-size:24px}
.glyphen--office{font-family:var(--office);font-weight:700}
.achse{display:grid;gap:4px;margin:14px 0 0}
.achse span{font-family:var(--display);font-weight:700;font-size:22px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w100{font-variation-settings:'wdth' 100;font-stretch:100%}.w112{font-variation-settings:'wdth' 112;font-stretch:112%}
.w118{font-variation-settings:'wdth' 118;font-stretch:118%}.w122{font-variation-settings:'wdth' 122;font-stretch:122%}

/* Raster */
.raster{list-style:none;padding:0;margin:14px 0 0;max-width:none;display:grid;gap:8px}
.raster li{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:14px;margin:0;font-family:var(--data);font-size:12px}
.raster i{display:block;height:14px;background:var(--ink)}
.r4{width:4px}.r8{width:8px}.r12{width:12px}.r16{width:16px}.r24{width:24px}.r32{width:32px}.r48{width:48px}

/* Seitenleiste als Muster */
.mini-nav{background:var(--ink);padding:14px 12px 18px;max-width:270px}
.mini-nav .etikett{padding:0 12px;margin:14px 0 6px;color:var(--ink-muted)}
.mini-nav a{display:flex;align-items:center;gap:10px;border-left:2px solid transparent;padding:8px 12px;font-size:14px;color:#d2d2d2;text-decoration:none;
  transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.mini-nav a:hover{background:var(--ink-2);color:#fff}
.mini-nav a[aria-current]{border-left-color:var(--most-red);background:#1a1a1a;color:#fff;font-weight:500}
.mini-nav svg{flex:none}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border:1px solid var(--ink);
  background:var(--ink);color:#fff;font-family:var(--body);font-size:14.5px;font-weight:500;text-decoration:none;cursor:pointer;
  transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.btn:hover{background:#2b2a2a}
.btn:active{transform:translateY(1px)}
.btn--red{background:var(--most-red);border-color:var(--most-red)}
.btn--red:hover{background:#a3100f;border-color:#a3100f}
.btn--quiet{background:var(--surface);color:var(--ink);border-color:var(--rule)}
.btn--quiet:hover{background:var(--surface);border-color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Beleg und Kennzahl */
.kennzahl{border:1px solid var(--rule);background:#fff;padding:20px;max-width:340px}
.kennzahl .etikett{letter-spacing:.1em}
.kennzahl__wert{font-family:var(--data);font-size:24px;font-weight:500;font-variant-numeric:tabular-nums;margin:8px 0 0}
.kennzahl__zusatz{font-size:14px;color:var(--muted);margin:2px 0 0}
.beleg{margin-top:12px;border-top:1px solid var(--rule);padding-top:8px}
.beleg summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font-family:var(--data);font-size:11.5px;color:var(--muted);
  transition:color var(--fast) var(--ease)}
.beleg summary::-webkit-details-marker{display:none}
.beleg summary:hover{color:var(--ink)}
.beleg summary svg{transition:transform var(--fast) var(--ease);flex:none}
.beleg[open] summary svg{transform:rotate(90deg)}
.beleg ul{list-style:none;margin:8px 0 0;padding:0;max-width:none}
.beleg li{display:flex;justify-content:space-between;gap:16px;font-family:var(--data);font-size:11.5px;color:var(--muted);margin:0 0 4px}
.beleg li span:last-child{color:var(--ink);font-variant-numeric:tabular-nums}
.beleg p{font-family:var(--data);font-size:11.5px;line-height:1.6;color:var(--muted);margin:8px 0 0}

/* Formen-Legende */
.formen{list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:12px}
.formen li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:baseline;margin:0}
.formen small{display:block;font-family:var(--data);font-size:11.5px;color:var(--muted)}
.form{display:inline-block;width:11px;height:11px;border:1.5px solid var(--ink)}
.form--rund{border-radius:50%}
.form--voll{background:var(--ink)}
.form--wartet{border-style:dashed;border-color:var(--muted)}
.form--jetzt{background:var(--most-red);border-color:var(--most-red);box-shadow:0 0 0 3px rgba(193,20,18,.18)}

/* Bewegung */
.motion{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start}
.motion__panel{border:1px solid var(--rule);background:#fff;padding:16px 18px;font-size:14.5px;opacity:0;transform:translateY(6px);
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease);visibility:hidden}
.motion__panel.is-open{opacity:1;transform:none;visibility:visible}
.motion__panel p{margin:0}

/* So nicht: die verbotenen Muster als Anschauung, gestrichelt gerahmt wie alles, was nicht gilt */
.nein{border:1.5px dashed var(--muted);padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.nein .etikett{display:flex;align-items:center;gap:8px}
.nein__demo{min-height:70px;display:flex;align-items:center}
.x-verlauf{font-family:var(--display);font-weight:800;font-size:26px;background:linear-gradient(90deg,#c11412,#ff8a14);-webkit-background-clip:text;background-clip:text;color:transparent}
.x-streifen{border-left:8px solid var(--most-red);background:#fff;padding:10px 14px;font-size:14px;width:100%}
.x-karte{border:1px solid var(--rule);background:#fff;padding:10px;width:100%}
.x-karte .x-karte{background:var(--canvas);font-size:13px}
.x-karte .x-karte .x-karte{background:#fff}
.x-inaktiv{display:inline-flex;min-height:36px;align-items:center;padding:0 14px;background:#e9b8b7;color:#fff;font-size:14px}
.nein p{font-size:13.5px;color:var(--muted);margin:0}

/* Anwendungen: Geschäftsbogen als gebautes Muster */
.bogen{background:#fff;border:1px solid var(--rule);font-family:var(--office);color:#111;position:relative;padding:34px 38px 0;font-size:12.5px;line-height:1.5}
.bogen__kopf{display:flex;align-items:center;gap:16px;margin-bottom:34px}
.bogen__kopf img{width:min(250px,80%);height:auto;display:block}
.bogen h5{font-family:var(--office);font-size:15px;font-weight:700;margin:0 0 6px;display:grid;grid-template-columns:30px 1fr;padding-bottom:6px;border-bottom:1px solid var(--most-red)}
.bogen__zeile{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:0 8px;padding:6px 0}
.bogen__zeile span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.bogen__luft{height:18px}
.bogen__fuss{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;font-size:8.5px;line-height:1.45;color:#333;margin-top:30px;padding-bottom:12px}
.bogen__balken{background:var(--most-red);color:#fff;text-align:center;font-size:10px;padding:5px 0;margin:0 -38px}
.kachel{position:relative;background:#2b2a2a;min-height:210px;display:flex;align-items:flex-end;padding:18px;color:#d2d2d2;font-family:var(--data);font-size:11px;letter-spacing:.06em}
.kachel img{position:absolute;left:18px;top:0;width:52px;height:52px;display:block}
.sig{font-family:var(--office);font-size:13px;line-height:1.5;color:#222;background:#fff;border:1px solid var(--rule);padding:22px 24px}
.sig b{font-size:14px}
.sig img{width:96px;height:auto;display:block;margin:14px 0 10px}
.sig .fein{font-size:11px;color:#555;margin-top:8px;display:block}
.sp-leiste{background:#060606;color:#fff;display:flex;align-items:center;gap:16px;padding:0 16px;height:48px;font-size:13px}
.sp-leiste img{height:13px;width:auto;display:block}
.sp-leiste span{border-left:1px solid var(--ink-rule);padding-left:16px}
.sp-leiste em{font-style:normal;margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--most-red);display:grid;place-items:center;font-family:var(--data);font-size:10px}

/* Downloads: eine Liste mit Strecke, keine Kachelwand */
.dl{list-style:none;margin:20px 0 0;padding:0;max-width:none;border-top:1px solid var(--ink)}
.dl li{margin:0;border-bottom:1px solid var(--rule)}
.dl a{display:grid;grid-template-columns:minmax(0,1fr) auto 22px;gap:6px 24px;align-items:center;padding:18px 0;text-decoration:none;
  transition:background-color var(--fast) var(--ease)}
.dl a:hover{background:var(--surface)}
.dl a:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.dl b{font-family:var(--display);font-variation-settings:'wdth' 112;font-stretch:112%;font-weight:650;font-size:17px;display:block}
.dl span{font-size:14.5px;color:var(--muted);display:block;max-width:62ch}
.dl em{font-style:normal;font-family:var(--data);font-size:11px;letter-spacing:.06em;color:var(--muted);white-space:nowrap;text-align:right}
.dl svg{justify-self:end}

.changelog{list-style:none;padding:0;max-width:none;margin:14px 0 0;border-top:1px solid var(--ink)}
.changelog li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;padding:13px 0;border-bottom:1px solid var(--rule);margin:0}
.changelog time{font-family:var(--data);font-size:12px;color:var(--muted)}

.footer{margin-top:100px;padding-top:24px;border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px;
  font-size:13.5px;color:var(--muted)}
.footer img{width:96px;height:auto;display:block;margin-bottom:12px}
.footer p{margin:0;max-width:none}
.footer .etikett{margin-bottom:6px}

/* ---------- Schmale Fenster ----------------------------------------------------------------------- */
@media (max-width:1080px){
  .layout{display:block}
  .nav{position:fixed;inset:0 auto 0 0;z-index:50;transform:translateX(-100%);transition:transform var(--slow) var(--ease);max-width:88vw;visibility:hidden}
  .nav.is-open{transform:none;visibility:visible}
  .navbar{display:flex;position:sticky;top:0;z-index:40;align-items:center;gap:14px;background:var(--ink);padding:0 var(--pad);height:54px;
    border-bottom:1px solid var(--ink-rule)}
  .navbar img{width:96px;height:auto;display:block}
  .navbar button{margin-left:auto;background:none;border:1px solid var(--ink-rule);color:#fff;padding:0 12px;height:36px;font-size:14px;cursor:pointer;
    display:flex;align-items:center;gap:8px}
  .scrim{position:fixed;inset:0;background:rgba(6,6,6,.6);z-index:45;border:0;padding:0}
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  section[id]{padding-top:68px;scroll-margin-top:60px}
  h3{scroll-margin-top:72px}
}
@media (max-width:760px){
  .tour,.box .tour{grid-template-columns:1fr;gap:14px}
  .tour__state{text-align:left}
  .stop__label{font-size:0}
  .stop.is-now .stop__label,.stop.is-wait .stop__label{font-size:10px;overflow:visible}
  .spec{grid-template-columns:1fr;gap:10px}
  .brief div{grid-template-columns:1fr;gap:2px}
  .hinweis{grid-template-columns:1fr}
  .footer{grid-template-columns:1fr}
  .motion{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .stage{padding:30px 22px}
  .board{padding:38px var(--pad) 36px}
  .changelog li{grid-template-columns:1fr;gap:2px}
  .dl a{grid-template-columns:minmax(0,1fr) 22px}
  .dl em{grid-column:1;text-align:left;white-space:normal}
  .dl svg{grid-row:1;grid-column:2}
  .bogen{padding:24px 20px 0}
  .bogen__balken{margin:0 -20px}
  .bogen__fuss{grid-template-columns:repeat(2,minmax(0,1fr))}
  h2 .status,h3 .status{margin-left:0;display:flex;margin-top:8px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .stop::before{transform:none}
}

/* Druck: die Seite selbst ist kein Druckstück, dafür gibt es die Guideline als PDF. */
@media print{
  .nav,.navbar,.scrim,.board__acts{display:none!important}
  body{background:#fff;font-size:10.5pt}
  .sheet{padding:0;max-width:none}
  h2,h3,h4{break-after:avoid}
  .box,.hinweis,.sw,.stage,.rules li,.spec,.kennzahl,.nein,.bogen,.tour{break-inside:avoid}
  .tbl tr{break-inside:avoid}
  .tbl thead{display:table-header-group}
  p,li{orphans:3;widows:3}
}