/* ============================================================
   GoToSec v7 — „Das Fließbild"
   Die SAP-Landschaft als Verfahrensfließbild. Eine Berechtigung
   ist ein Ventil: Grün steht offen, Blau ist gesperrt. Die
   Funktionstrennung ist die Verriegelung, die Erkennung ist die
   Messstelle an der Leitung.
   Gezeichnet wird mit drei Linienstärken auf Papierweiß. Keine
   Rundungen, keine Schatten, keine Karten, keine Kacheln.
   ============================================================ */

:root{
  /* Blatt und Tusche */
  --papier:     #F2F3EF;
  --papier-lo:  #E9EAE4;   /* zweite Blattebene, Abschnittsband */
  --tusche:     #12171C;
  --tusche-mid: #46525A;   /* Fließtext zweiter Ordnung (7,21:1) */
  --tusche-lo:  #626D74;   /* Beschriftungen (4,76:1) */

  /* Zustände — aus dem Logo */
  --gruen:      #50B848;   /* offen, nur als Fläche */
  --gruen-hi:   #5FC756;
  /* Grün als Text auf Hell. NICHT #2d8a26 wie in PRODUCT.md notiert:
     der Wert schafft auf diesem Papierweiß nur 3,95:1 und selbst auf
     reinem Weiß nur 4,40:1 — beides unter den geforderten 4,5:1.
     #26721E ist derselbe Farbton, nur dunkler: 5,37:1 auf Papier,
     4,95:1 auf der zweiten Blattebene. */
  --gruen-text: #26721E;
  --gruen-ink:  #0C2409;   /* Text auf Grün (6,52:1) */
  --blau:       #2878B5;   /* gesperrt, nur als Fläche */
  --blau-text:  #1F5E8F;   /* Blau als Text auf Hell (WCAG AA) */

  /* Linien */
  --linie:      rgba(18,23,28,.24);
  --linie-fein: rgba(18,23,28,.11);
  --raster-fein:rgba(18,23,28,.045);
  --raster-grob:rgba(18,23,28,.075);

  /* Maße */
  --max-width: 1320px;
  --rand: clamp(10px, 1.3vw, 20px);   /* Zeichnungsrahmen */
  --band: 58px;                        /* Höhe der Symbolzeile */
  --strich: 3px;                       /* Hauptleitung */

  --f: "Archivo", "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;
  accent-color: var(--gruen-text);
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scrollbar-color: var(--tusche) var(--papier-lo);
}
body{
  font-family:var(--f);
  font-size:17px;
  line-height:1.6;
  color:var(--tusche);
  background-color:var(--papier);
  /* Millimeterraster: Feinkachel 4px, Grobkachel 24px.
     Fest verankert — beim Scrollen läuft die Zeichnung über das
     Raster hinweg, nicht mit ihm. */
  background-image:
    repeating-linear-gradient(90deg, var(--raster-grob) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(180deg, var(--raster-grob) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--raster-fein) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(180deg, var(--raster-fein) 0 1px, transparent 1px 4px);
  background-attachment: fixed;
  caret-color: var(--gruen-text);
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gruen);color:var(--gruen-ink)}
:focus-visible{outline:3px solid var(--gruen-text);outline-offset:3px}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--papier-lo)}
::-webkit-scrollbar-thumb{background:var(--tusche)}
::-webkit-scrollbar-thumb:hover{background:var(--blau)}

@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

.container{
  max-width:var(--max-width);
  margin-inline:auto;
  padding-inline:clamp(26px,5vw,64px);
}
.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--tusche);color:var(--papier);
  padding:.85rem 1.4rem;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;
}
.skip-link:focus{left:var(--rand);top:var(--rand)}

/* ---------- Zeichnungsrahmen ---------- */
.rahmen{
  position:fixed;inset:var(--rand);
  border:2px solid var(--tusche);
  pointer-events:none;z-index:30;
}
.rahmen__koord{
  position:absolute;display:flex;
  font-size:.6rem;font-weight:700;letter-spacing:.1em;
  color:var(--tusche-lo);
  font-variant-numeric:tabular-nums;
}
.rahmen__koord--links{
  left:3px;top:0;bottom:0;flex-direction:column;
  justify-content:space-around;align-items:flex-start;
}
.rahmen__koord--oben{
  top:3px;left:0;right:0;justify-content:space-around;align-items:flex-start;
}
@media (max-width: 767px){ .rahmen__koord{display:none} }

/* ---------- Typografie ---------- */
.display{
  text-transform:uppercase;
  font-weight:850;
  font-stretch:78%;
  font-size:clamp(2.5rem, 7.2vw, 6.6rem);
  line-height:.9;
  letter-spacing:-.02em;
  text-wrap:balance;
  overflow-wrap:break-word;
}
/* Etwas mehr Zeilenluft, sobald Umlaute in Versalien vorkommen:
   bei .9 stoßen die Punkte von Ö und Ä an die Zeile darüber. */
.display--md{font-size:clamp(1.9rem, 4.2vw, 3.4rem);line-height:.96}

/* Sprungziele halten Abstand zur festen Leiste */
section[id]{scroll-margin-top:104px}

.notiz{
  color:var(--tusche-mid);
  font-size:clamp(1rem,1.15vw,1.1rem);
  line-height:1.62;
  max-width:62ch;
}
.label,.knoten__name,.ventil__zustand,.mass__name,.pos,.erklaerung__titel,
.branchen__titel,.schriftfeld dt,.cta-zelle__marke,.leitung__hinweis{
  text-transform:uppercase;
  font-weight:700;
  font-size:.66rem;
  letter-spacing:.15em;
  color:var(--tusche-lo);
  line-height:1.35;
}
.mass__wert{
  font-weight:800;font-stretch:82%;
  font-variant-numeric:tabular-nums lining-nums;
  font-size:clamp(2rem,3.6vw,3.2rem);
  line-height:1;letter-spacing:-.02em;
}

/* ---------- Schaltflächen — gezeichnete Rechtecke ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  text-transform:uppercase;font-weight:700;
  font-size:.78rem;letter-spacing:.13em;
  padding:.85rem 1.45rem;
  background:var(--gruen);
  color:var(--gruen-ink);
  border:2px solid var(--tusche);
  transition:background .15s ease-out;
}
.btn:hover,.btn:focus-visible{background:var(--gruen-hi)}
.btn--sm{padding:.62rem 1.05rem;font-size:.7rem}
.btn--offen{
  background:transparent;color:var(--tusche);
  transition:color .15s ease-out, border-color .15s ease-out;
}
.btn--offen:hover,.btn--offen:focus-visible{
  background:transparent;color:var(--gruen-text);border-color:var(--gruen-text);
}
.pfeil{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:square;flex:0 0 auto}

/* ---------- Navigation ---------- */
.nav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.4rem);
  max-width:var(--max-width);margin-inline:auto;
  padding:calc(var(--rand) + 9px) clamp(26px,5vw,64px) 9px;
  background:var(--papier);
  border-bottom:1px solid var(--linie);
}
/* Die Wortmarke trägt feine Querstreifen und eine Claimzeile. Unter
   etwa 110px verschmieren beide zu Grau. */
.nav__logo img{width:clamp(96px,8vw,122px);height:auto}
.nav__links{display:flex;gap:clamp(1rem,2vw,2rem);margin-left:auto}
.nav__links a{
  text-transform:uppercase;font-weight:700;
  font-size:.68rem;letter-spacing:.15em;color:var(--tusche);
  padding-block:.35rem;
  border-bottom:2px solid transparent;
  transition:border-color .15s ease-out, color .15s ease-out;
}
.nav__links a:hover,.nav__links a:focus-visible{
  color:var(--gruen-text);border-bottom-color:var(--gruen);
}
.nav__toggle{display:none}
.nav__menu-cta{display:none}   /* nur im Vollbild-Menü sichtbar */

/* ---------- Die Achse (erster Blick) ---------- */
.achse{padding-block:clamp(1rem,2vw,1.7rem) clamp(2.6rem,5vw,4.2rem)}
.achse .display{margin-bottom:clamp(.9rem,1.4vw,1.2rem)}
.achse .notiz{margin-bottom:clamp(1.5rem,2.6vw,2.2rem);max-width:70ch}

.leitung-block{padding-inline:clamp(14px,2.4vw,34px)}
.leitung{display:flex;align-items:start;width:100%}

.knoten,.ventil-zelle,.cta-zelle,.rohr,.ende{
  display:grid;
  grid-template-rows:22px var(--band) minmax(38px,auto);
  align-items:center;justify-items:center;
  flex:0 0 auto;
}
.knoten__band,.ventil__band,.cta-zelle__band,.ende svg{grid-row:2}
.knoten__name,.cta-zelle__marke{grid-row:3;text-align:center;max-width:14ch}
.ventil__zustand{grid-row:1}

.leitung svg{
  fill:none;stroke:var(--tusche);stroke-width:1.6;
  stroke-linecap:square;stroke-linejoin:miter;
}
.knoten__sym{width:56px;height:38px}
.ende svg{width:20px;height:20px;stroke-width:1.8}
.ende{width:24px}

/* Rohr — Grundlinie plus wandernder Fluss */
.rohr{flex:1 1 auto;min-width:16px;position:relative}
.rohr::before,.rohr::after{
  content:'';grid-row:2;grid-column:1;width:100%;
}
.rohr::before{height:var(--strich);background:var(--tusche)}
.rohr::after{
  height:var(--strich);
  background-image:repeating-linear-gradient(90deg,
    var(--gruen) 0 12px, transparent 12px 26px);
  background-size:26px 100%;
  animation:fluss 900ms linear infinite;
}
/* Tote Leitung: kein Fluss, keine Fläche — nur eine gestrichelte Linie.
   Die Fläche muss weg, sonst füllt sie die Lücken des Strichs wieder auf. */
.rohr.ist-tot::before{
  height:0;background:none;
  border-top:3px dashed var(--tusche-lo);
}
.rohr.ist-tot::after{display:none}
@keyframes fluss{ to{ background-position-x:-26px } }

/* Ventil — der Knopf, an dem die Seite bedient wird */
.ventil{
  display:flex;align-items:center;justify-content:center;
  padding:6px;
  transition:transform .15s ease-out;
}
.ventil__sym{width:46px;height:34px}
.ventil[aria-checked="true"] .ventil__kegel{fill:var(--gruen)}
.ventil[aria-checked="false"] .ventil__kegel{fill:var(--blau)}
.ventil:hover{transform:translateY(-2px)}
.ventil__zustand{color:var(--gruen-text)}
.ventil-zelle:has([aria-checked="false"]) .ventil__zustand{color:var(--blau-text)}

/* Zeichenerklärungs-Symbole */
.ist-offen .ventil__kegel,.ventil__kegel.ist-offen{fill:var(--gruen)}
.ist-gesperrt .ventil__kegel{fill:var(--blau)}
.signal-linie{stroke-dasharray:5 4}

/* Die Schaltfläche sitzt als Bauteil in der Leitung */
.cta-zelle__band{display:flex;align-items:center}
.cta-zelle__marke{color:var(--gruen-text)}

/* Der Hinweis steht direkt unter den Ventilen, in normaler Schreibweise.
   Als gesperrte Kleinversalie weit unterhalb wurde er übersehen — und
   damit der einzige orchestrierte Moment der Seite. */
.leitung__hinweis{
  margin-top:.8rem;text-align:center;
  color:var(--tusche-mid);
  font-size:.88rem;letter-spacing:normal;text-transform:none;font-weight:400;
}
.nur-tippen{display:none}
@media (hover: none){
  .nur-zeigen{display:none}
  .nur-tippen{display:inline}
}

/* Maßkette — die Kennzahlen hängen an der Achse */
.masskette{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(1rem,3vw,2.5rem);
  margin-top:clamp(.5rem,1vw,.9rem);
}
.mass,.messstelle{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  text-align:center;position:relative;padding-top:64px;flex:1 1 0;
}
.mass::before,.messstelle::before{
  content:'';position:absolute;top:-6px;left:50%;width:1px;height:62px;
  background:var(--tusche);transform-origin:top;
}
.messstelle::before{
  background:none;border-left:1px dashed var(--tusche);width:0;
}
.mass::after,.messstelle::after{
  content:'';position:absolute;top:53px;left:calc(50% - 2.5px);
  width:5px;height:5px;background:var(--tusche);
}
.messstelle__kreis svg{
  width:40px;height:40px;fill:none;stroke:var(--tusche);stroke-width:1.6;
}
.messstelle__meldung{
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--blau-text);min-height:1.2em;
}
.messstelle.ist-alarm .messstelle__kreis{animation:ausschlag 600ms ease-out}
@keyframes ausschlag{
  0%  {transform:scale(1)}
  30% {transform:scale(1.22)}
  100%{transform:scale(1)}
}

/* Die Maßlinien zeichnen sich einmal, wenn die Achse steht.
   Als Animation mit `both`, nicht als Übergang: Eine Animation läuft von
   selbst zu Ende und bleibt dort stehen. Ein Übergang, dessen Auslöser
   verpasst wird, bleibt für immer auf halbem Weg. */
@media (prefers-reduced-motion: no-preference){
  .js .mass::before,.js .messstelle::before{
    animation:strich .5s cubic-bezier(.16,1,.3,1) both;
  }
  .js .masskette li:nth-child(2)::before{animation-delay:.07s}
  .js .masskette li:nth-child(3)::before{animation-delay:.14s}
  .js .masskette li:nth-child(4)::before{animation-delay:.21s}
  .js .masskette li:nth-child(5)::before{animation-delay:.28s}
}
@keyframes strich{ from{transform:scaleY(0)} to{transform:scaleY(1)} }

/* ---------- Abschnitte ---------- */
.abschnitt{padding-block:clamp(3.4rem,7vw,6.2rem)}
.abschnitt__kopf{margin-bottom:clamp(2rem,3.6vw,3rem)}
.abschnitt__kopf .display{margin-bottom:.9rem}

/* Stückliste — acht Leistungen als Ventile */
.stueckliste{border-top:1px solid var(--linie)}
.stueckliste li{border-bottom:1px solid var(--linie)}
.stueckliste a{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(40px,.7fr) auto;
  align-items:center;gap:clamp(.9rem,2.4vw,2rem);
  padding:clamp(1rem,1.8vw,1.4rem) 4px;
}
.pos{color:var(--tusche-lo);font-variant-numeric:tabular-nums}
.pos__text{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.pos__name{
  font-weight:800;font-stretch:88%;
  font-size:clamp(1.05rem,1.9vw,1.55rem);letter-spacing:-.01em;line-height:1.15;
}
.pos__tag{font-size:.86rem;color:var(--tusche-mid)}
.pos__rohr{
  position:relative;height:var(--strich);
  border-top:2px dashed var(--linie);
}
.pos__rohr::after{
  content:'';position:absolute;inset:-2px 0 auto 0;height:var(--strich);
  background-image:repeating-linear-gradient(90deg,
    var(--gruen) 0 12px, transparent 12px 26px);
  background-size:26px 100%;
  opacity:0;transition:opacity .15s ease-out;
}
.pos__ventil svg{width:38px;height:28px;fill:none;stroke:var(--tusche);
  stroke-width:1.6;stroke-linejoin:miter}
.pos__ventil .ventil__kegel{fill:var(--papier);transition:fill .15s ease-out}
.stueckliste a:hover,.stueckliste a:focus-visible{background:rgba(80,184,72,.07)}
.stueckliste a:hover .ventil__kegel,
.stueckliste a:focus-visible .ventil__kegel{fill:var(--gruen)}
.stueckliste a:hover .pos__rohr::after,
.stueckliste a:focus-visible .pos__rohr::after{
  opacity:1;animation:fluss 900ms linear infinite;
}
.stueckliste a:hover .pos__rohr,
.stueckliste a:focus-visible .pos__rohr{border-top-color:transparent}

/* Zeichenerklärung */
.erklaerung{
  margin-top:clamp(2rem,3.4vw,3rem);
  border:1px solid var(--linie);
  padding:clamp(1.1rem,2vw,1.6rem);
  max-width:640px;
}
.erklaerung__titel{margin-bottom:1rem}
.erklaerung li{
  display:flex;align-items:center;gap:1rem;
  padding-block:.5rem;font-size:.95rem;color:var(--tusche-mid);
}
.erklaerung li b{color:var(--tusche);font-weight:800}
.erklaerung__sym{flex:0 0 44px}
.erklaerung__sym svg{
  width:44px;height:32px;fill:none;stroke:var(--tusche);
  stroke-width:1.6;stroke-linejoin:miter;
}

/* Prinzip — zweite Blattebene */
.prinzip{
  background:var(--papier-lo);
  border-block:1px solid var(--linie);
  padding-block:clamp(3.4rem,7vw,6.2rem);
}
.prinzip .display{margin-bottom:.9rem}
.prinzip .notiz{margin-bottom:clamp(2rem,3.4vw,3rem)}
.kreislauf{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,3rem)}
.kreislauf__seite{border-top:2px solid var(--tusche);padding-top:1.4rem}
.kreislauf__sym svg{
  width:76px;height:50px;fill:none;stroke:var(--tusche);
  stroke-width:1.6;stroke-linejoin:miter;margin-bottom:1rem;
}
.kreislauf__seite h3{
  text-transform:uppercase;font-weight:800;font-stretch:84%;
  font-size:clamp(1.2rem,2.2vw,1.7rem);letter-spacing:-.005em;
  margin-bottom:.7rem;
}
.kreislauf__seite p{color:var(--tusche-mid);max-width:44ch}

/* Stimmen — beschriftete Felder auf dem Blatt */
.stimmen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.4vw,2rem)}
.stimme{
  position:relative;border:1px solid var(--linie);
  padding:clamp(1.4rem,2.6vw,2.2rem);
}
.stimme::before{
  content:'';position:absolute;top:-4px;left:-4px;
  width:8px;height:8px;background:var(--tusche);
}
.stimme blockquote{
  font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.55;
  margin-bottom:1.2rem;
}
.stimme cite{
  font-style:normal;text-transform:uppercase;font-weight:700;
  font-size:.7rem;letter-spacing:.15em;color:var(--gruen-text);
}

/* Schluss */
.schluss{
  padding-block:clamp(3.4rem,7vw,6.2rem);
  display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.schluss .display{margin-bottom:1rem}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.branchen__titel{margin-bottom:1.1rem}
.branchen__liste{border-top:1px solid var(--linie)}
.branchen__liste li{
  display:grid;grid-template-columns:3.4rem 1fr;gap:.6rem;
  padding-block:.72rem;border-bottom:1px solid var(--linie);
  font-size:.98rem;
}

/* Schriftfeld — die Fußzeile ist das Schriftfeld der Zeichnung */
.schriftfeld{padding-block:0 clamp(2.4rem,5vw,4rem)}
.schriftfeld__raster{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:2px solid var(--tusche);
}
.feld{padding:clamp(1rem,1.8vw,1.5rem);border-left:1px solid var(--linie)}
.feld:first-child{border-left:0}
.schriftfeld dt{margin-bottom:.6rem}
.schriftfeld dd{font-size:.95rem;line-height:1.5;color:var(--tusche-mid)}
.schriftfeld dd a{
  border-bottom:1px solid var(--linie);
  text-underline-offset:3px;
  transition:color .15s ease-out,border-color .15s ease-out;
}
.schriftfeld dd a:hover,.schriftfeld dd a:focus-visible{
  color:var(--gruen-text);border-bottom-color:var(--gruen-text);
}
.schriftfeld__fuss{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;
  padding-top:1rem;font-size:.78rem;color:var(--tusche-lo);
}
.schriftfeld__claim{
  text-transform:uppercase;font-weight:800;font-stretch:82%;
  letter-spacing:.16em;color:var(--tusche);
}

/* ---------- Haltepunkte ---------- */

/* Enger Satz der Achse, damit sie so weit wie möglich waagerecht bleibt */
@media (max-width: 1339px){
  .knoten__sym{width:44px;height:30px}
  .ventil__sym{width:34px;height:25px}
  .knoten__name,.ventil__zustand,.cta-zelle__marke{font-size:.58rem;letter-spacing:.1em}
  .knoten__name{max-width:11ch}
  .btn--achse{padding:.7rem .95rem;font-size:.7rem;gap:.45rem}
  .ventil{padding:4px}
  .ende{width:18px}
}

/* Die Achse stellt sich senkrecht, bevor sie beschnitten wird.
   `overflow-x: clip` am Körper heißt: Was nicht passt, ist nicht
   wegrollbar, sondern weg. Der Umbruch muss deshalb früher greifen
   als der Umbruch der Navigation. */
@media (max-width: 1219px){
  .leitung{flex-direction:column;align-items:center}
  .knoten,.ventil-zelle,.cta-zelle,.ende{
    grid-template-rows:auto;grid-auto-flow:row;row-gap:.3rem;
  }
  .knoten__band,.ventil__band,.cta-zelle__band,.ende svg{grid-row:auto}
  .knoten__name,.ventil__zustand,.cta-zelle__marke{grid-row:auto;max-width:26ch}
  .rohr{
    grid-template-rows:auto;width:var(--strich);height:28px;flex:0 0 auto;
  }
  .rohr::before,.rohr::after{grid-row:auto;width:var(--strich);height:100%}
  .rohr::after{
    background-image:repeating-linear-gradient(180deg,
      var(--gruen) 0 7px, transparent 7px 16px);
    background-size:100% 16px;
    animation-name:fluss-senkrecht;
  }
  .rohr.ist-tot::before{
    width:0;height:100%;border-top:0;background:none;
    border-left:3px dashed var(--tusche-lo);
  }
  .ende svg{transform:rotate(90deg)}
  .knoten__sym{width:46px;height:32px}
  .ventil__sym{width:38px;height:28px}
}
@keyframes fluss-senkrecht{ to{ background-position-y:16px } }

@media (max-width: 899px){
  /* Navigation wird zum Vollbild-Menü */
  .nav__cta{display:none}
  .nav__toggle{
    display:flex;align-items:center;justify-content:center;
    margin-left:auto;width:44px;height:44px;
  }
  .nav__toggle-box{display:grid;gap:5px;width:24px}
  .nav__toggle-line{height:2px;background:var(--tusche);transition:transform .2s ease-out,opacity .2s ease-out}
  .nav__toggle.is-open .nav__toggle-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__toggle.is-open .nav__toggle-line:nth-child(2){opacity:0}
  .nav__toggle.is-open .nav__toggle-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav__links{
    position:fixed;inset:0;z-index:25;
    display:none;flex-direction:column;justify-content:center;
    gap:1.6rem;padding:clamp(2rem,8vw,4rem);
    background:var(--papier);
  }
  .nav__links.is-open{display:flex}
  .nav__links a{font-size:1.5rem;letter-spacing:.1em;border-bottom:0}
  .menu-open{overflow:hidden}
  /* Der Schließen-Knopf und die Wortmarke müssen über dem Vollbild-Menü
     liegen. Sonst deckt das Menü den einzigen Weg zurück zu. */
  .nav__toggle,.nav__logo{position:relative;z-index:26}

  /* Die Handlung muss auch im Menü erreichbar sein */
  .nav__menu-cta{display:block;margin-top:1.4rem}
  .nav__menu-cta .btn{font-size:.8rem}

  /* Fest verankerte Hintergründe sind auf iOS unzuverlässig */
  body{background-attachment:scroll}

  .masskette{flex-wrap:wrap}
  .mass,.messstelle{flex:1 1 40%;padding-top:44px}
  .mass::before,.messstelle::before{top:0;height:36px}
  .mass::after,.messstelle::after{top:33px}
  .messstelle{flex-basis:100%;order:5}

  .kreislauf,.stimmen,.schluss{grid-template-columns:1fr}
  .schriftfeld__raster{grid-template-columns:1fr 1fr}
  .feld{border-top:1px solid var(--linie)}
  .feld:nth-child(-n+2){border-top:0}
  .feld:nth-child(odd){border-left:0}
}

@media (max-width: 599px){
  .stueckliste a{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:.8rem;
  }
  .pos__rohr{display:none}
  .display{font-size:clamp(2.1rem,10vw,3.2rem)}
  .masskette{gap:1.4rem 1rem}
  .mass__wert{font-size:2rem}
  .schriftfeld__raster{grid-template-columns:1fr}
  .feld{border-left:0;border-top:1px solid var(--linie)}
  .feld:first-child{border-top:0}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .rohr::after{
    background-image:repeating-linear-gradient(90deg,
      var(--gruen) 0 12px, transparent 12px 26px);
  }
}