/* ============================================================
   GoToSec v6 — „Die Jalousie"
   Die Welt kommt aus dem Logo: offener Ring, waagerechte Streifen
   quer durch die Buchstaben, Grün und Blau, fette geneigte Schrift.
   Eine Lamelle steht offen oder zu — genau wie eine Berechtigung.
   Grün heißt offen und erlaubt. Blau heißt geschlossen und geschützt.
   ============================================================ */

:root{
  /* Wand und Tinte */
  --wall:      #E6E9E5;
  --wall-lo:   #D8DDD9;
  --ink:       #16232B;
  --ink-mid:   #4A5A5F;
  --light:     #FFFFFF;

  /* Lamelle geschlossen — aus dem Logo-Blau abgeleitet */
  --navy:      #1B4F76;
  --navy-hi:   #2F6D9E;
  --navy-lo:   #143D5C;
  --blue:      #2878B5;

  /* Logo-Grün — offen, erlaubt, handelnd */
  --green:     #50B848;
  --green-hi:  #5FC756;
  --green-ink: #0C2409;   /* Text auf Grün (14,9:1) */
  --green-text:#2d8a26;   /* Grün als Text auf Hell (WCAG AA) */

  --line:      rgba(22,35,43,.18);
  --line-soft: rgba(22,35,43,.09);
  --line-dark: rgba(255,255,255,.16);

  --max-width: 1280px;
  --nav-h: 78px;
  --lamellen: 24;          /* Lamellen im Fenster */
  --logo-slats: 10;        /* Höhe des Zeichens auf dem Behang, in Lamellen */
  --logo-top: 7;           /* erste Lamelle, die eine Scheibe davon trägt */

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

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

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scrollbar-color: var(--navy) var(--wall-lo);
}
body{
  font-family:var(--f);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background-color:var(--wall);
  background-image:url('../../../media/v6/wand.webp');
  background-size:128px;
  background-blend-mode:soft-light;
  caret-color:var(--green-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(--green);color:var(--green-ink)}
:focus-visible{outline:3px solid var(--green-text);outline-offset:2px}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--wall-lo)}
::-webkit-scrollbar-thumb{background:var(--navy)}
::-webkit-scrollbar-thumb:hover{background:var(--blue)}

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

.container{
  max-width:var(--max-width);
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,52px);
}
.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* ---------- Typo ---------- */
.display{
  font-weight:900;font-style:italic;
  text-transform:uppercase;
  font-size:clamp(2.4rem,4.6vw,4.5rem);
  line-height:.94;
  letter-spacing:-.025em;
  text-wrap:balance;
  overflow-wrap:break-word;
  hyphens:auto;
}
.display--md{font-size:clamp(2rem,4.2vw,3.5rem)}
.display--sm{font-size:clamp(1.35rem,2.2vw,1.9rem)}

.label{
  font-weight:700;font-style:italic;
  text-transform:uppercase;
  font-size:.72rem;letter-spacing:.17em;
  color:var(--ink-mid);
}
.lead{font-size:clamp(1.02rem,1.3vw,1.16rem);line-height:1.62;max-width:52ch}
.zahl{font-weight:900;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em}

/* ---------- Schaltflächen — schlichte Rechtecke ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.65rem;
  font-weight:700;font-style:italic;
  text-transform:uppercase;
  font-size:.84rem;letter-spacing:.12em;
  padding:.95rem 1.6rem;
  background:var(--green);
  color:var(--green-ink);
  transition:background .15s ease-out;
}
.btn:hover{background:var(--green-hi)}
.btn svg{flex:0 0 auto}
.btn--ghost{
  background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .15s ease-out,color .15s ease-out;
}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--green-text);color:var(--green-text)}
.btn--light{background:var(--light);color:var(--ink)}
.btn--light:hover{background:#fff}

/* ---------- Navigation ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-inline:clamp(20px,4vw,52px);
  border-bottom:1px solid transparent;
  transition:background-color .22s ease-out,border-color .22s ease-out;
}
.nav.is-scrolled{background-color:var(--wall);border-bottom-color:var(--line-soft)}
.nav__logo img{height:40px;width:auto}
.nav__links{display:flex;gap:clamp(1.1rem,2.6vw,2.4rem)}
.nav__links a{
  font-weight:700;font-style:italic;
  text-transform:uppercase;font-size:.78rem;letter-spacing:.14em;
  color:var(--ink-mid);
  transition:color .15s ease-out;
}
.nav__links a:hover{color:var(--ink)}
.nav__cta{padding:.6rem 1.15rem;font-size:.75rem}
.nav__toggle{display:none}

@media (max-width: 899px){
  .nav__cta{display:none}
  .nav__toggle{
    display:grid;place-items:center;z-index:70;
    width:46px;height:46px;
    box-shadow:inset 0 0 0 1px var(--line);
  }
  .nav__toggle-box{display:grid;gap:5px;width:20px}
  .nav__toggle-line{height:2px;background:var(--ink);transition:transform .22s,opacity .16s}
  .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)}

  .js .nav__links{
    position:fixed;inset:0;z-index:65;
    background:var(--wall);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:.3rem;padding:5rem clamp(24px,8vw,64px) 4rem;
    opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;
  }
  .js .nav__links.is-open{opacity:1;visibility:visible}
  .js .nav__links a{font-size:clamp(2rem,9vw,3rem);letter-spacing:-.01em;color:var(--ink)}
  html.menu-open{overflow:hidden}
  html:not(.js) .nav{position:static;height:auto;flex-wrap:wrap;padding-block:1rem}
  html:not(.js) .nav__toggle{display:none}
  html:not(.js) .nav__links{width:100%;flex-wrap:wrap;gap:1rem;padding-block:.5rem}
}

.skip-link{
  position:fixed;top:12px;left:12px;z-index:100;
  transform:translateY(-320%);
  background:var(--green);color:var(--green-ink);
  font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:.78rem;letter-spacing:.12em;padding:.7rem 1.1rem;
  transition:transform .18s ease-out;
}
.skip-link:focus{transform:none}

/* ============================================================
   Die Bühne — links die Aussage, rechts das Fenster
   ============================================================ */
.buehne{
  padding-top:calc(var(--nav-h) + clamp(2rem,4vw,3.5rem));
  padding-bottom:clamp(3rem,6vw,5.5rem);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2.5rem,4vw,4rem);
  align-items:center;
}
/* Ab 860px, nicht erst ab 980px. Das Fenster ist 4:5 hoch — einspaltig
   wird es so hoch wie breit mal 1,25, und auf einem quer gehaltenen
   Tablet steht die Bühne dann als Turm über zwei Bildschirmhöhen. Bei
   860px bleiben der Textspalte 355px; „ENTSCHIEDEN." passt dort noch in
   eine Zeile, also ist das die Kante, an der zwei Spalten aufhören zu
   tragen. */
@media (min-width: 860px){
  .buehne{grid-template-columns:minmax(0,45fr) minmax(0,55fr)}
}
.buehne__text .lead{margin-top:1.5rem;color:var(--ink-mid)}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(1.6rem,2.6vw,2.2rem)}

/* Kennzahlen — zwei mal zwei, wie in der Comp.
   minmax(0,1fr) statt 1fr: sonst drückt „Sicherheitsvorfälle" unter 380px
   die rechte Spalte breiter und die beiden Spalten stehen nicht mehr
   auf einer Kante. */
.kennzahlen{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.4rem,2.4vw,2.2rem);
  margin-top:clamp(2.2rem,4vw,3.4rem);
  max-width:30rem;
  /* Damit die Sperrung unten auf die Zelle hören kann, nicht auf das
     Fenster. Siehe die Regel dort. */
  container-type:inline-size;
}
.kennzahlen dd{font-size:clamp(2.2rem,3.4vw,3.1rem);line-height:1}
.kennzahlen dt{
  font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:.68rem;letter-spacing:.16em;color:var(--ink-mid);margin-top:.4rem;
  overflow-wrap:break-word;hyphens:auto;
}
/* In einer schmalen Zelle trägt die Sperrung „SICHERHEITSVORFÄLLE" nicht
   mehr. Die Regel hört auf die Zelle, nicht auf das Fenster: Eine
   Bildschirmbreite ist hier nur ein Stellvertreter, und ein schlechter.
   Dieselbe schmale Zelle entsteht am 390px-Handy *und* auf einem 880px
   breiten Tablet, sobald die Bühne zweispaltig wird und die Zahlen in die
   45%-Spalte rücken. Eine `max-width`-Regel erwischt immer nur einen der
   beiden Fälle. */
@container (max-width: 23rem){
  .kennzahlen dt{letter-spacing:.1em}
}

/* ---------- Das Fenster ---------- */
.fenster-block{display:grid;grid-template-columns:1fr auto;gap:clamp(.8rem,1.6vw,1.4rem);align-items:stretch}

/* Einspaltig darf das Fenster nicht die ganze Spalte nehmen.
   Es ist 4:5 hoch: über die volle Breite einer Tabletspalte wird daraus
   ein Turm, der höher ist als der Bildschirm. Also bekommt der Block
   dasselbe Maß wie die Kennzahlen darüber (30rem) und dieselbe linke
   Kante. Damit steht die Bühne einspaltig als ein Stapel auf einer
   Achse, statt als Text neben einem Hochhaus.
   Kein `margin-inline:auto`: Mittig gestellt bräche das Fenster die
   linke Kante, an der Titel, Text, Schaltflächen und Zahlen hängen.
   Unter 30rem greift die Deckelung nicht — auf dem Handy ist volle
   Breite richtig, dort ist die Spalte selbst schmal genug. */
@media (max-width: 859px){
  .fenster-block{max-width:30rem}
}

.fenster{
  position:relative;
  aspect-ratio:4/5;
  /* Das Tageslicht hinter der Jalousie */
  background:linear-gradient(178deg,#FFFFFF 0%,#FBFDFF 40%,#EDF4FA 75%,#DFEAF3 100%);
  box-shadow:inset 0 0 0 clamp(8px,1.1vw,14px) var(--wall-lo),
             inset 0 0 0 clamp(9px,1.2vw,15px) var(--line-soft);
  overflow:hidden;
  /* Flach genug, dass die Lamellen nicht zu Trapezen verzerren. */
  perspective:2600px;
}
.lamellen{position:absolute;inset:clamp(8px,1.1vw,14px);transform-style:preserve-3d}
.lamelle{
  /* Oben zuerst offen, unten zuletzt: der Verlauf ist steil genug, dass
     das untere Drittel wirklich dicht schließt. */
  --t: clamp(0, calc(var(--open,.62) * 1.95 - var(--i) / var(--lamellen) * 1.35), 1);
  position:absolute;left:0;right:0;
  height:calc(100% / var(--lamellen));
  top:calc(var(--i) * (100% / var(--lamellen)));
  transform-origin:50% 50%;
  transform:rotateX(calc(var(--t) * 66deg));
  background:linear-gradient(180deg,var(--navy-hi) 0%,var(--navy) 38%,var(--navy-lo) 100%);
  transition:transform .12s linear;
}
.lamelle::after{
  /* Die Oberkante fängt das Licht. Kein 2px-Strich: gekippt bliebe davon
     nichts übrig, und genau diese Kante ist das Grün der Marke. */
  content:"";position:absolute;inset:0 0 auto 0;height:38%;
  background:linear-gradient(180deg,var(--green-hi) 0%,var(--green) 40%,rgba(80,184,72,0) 100%);
  opacity:var(--t);
  transition:opacity .12s linear;
}

/* Das Zeichen auf dem geschlossenen Behang.
   Ein Behang, der zu ist, ist eine durchgehende Fläche — und eine Fläche
   kann etwas tragen. Jede Lamelle bekommt genau ihre Scheibe des Zeichens:
   `background-size` macht das Bild zehn Lamellen hoch, `background-position`
   schiebt es je Lamelle um eine Scheibe weiter, sodass die erste Scheibe bei
   0 % und die letzte bei 100 % sitzt. Weil die Bezugsfläche die *ungedrehte*
   Lamelle ist, stimmt die Rechnung bei jedem Kippwinkel und in jeder
   Fenstergröße. Öffnet der Behang, kippen die Scheiben auseinander und das
   Zeichen zerfällt in Streifen — dieselbe Bewegung, die es zusammensetzt.
   Nur die zehn Lamellen der Mitte tragen die Ebene; die übrigen brauchen
   sie gar nicht erst.

   Es ist ein fertiges Bild, keine Maske. `mask-image` prüft die Herkunft:
   Unter file:// ist jede Datei eine eigene Herkunft, die Maske wird
   verworfen und das Zeichen fehlt spurlos — auf dem Server sah alles
   richtig aus. `background-image` prüft das nicht und trägt darum überall.
   Der Farbstoff steckt in der Datei: `media/v6/logo-druck.webp` ist das
   unveränderte Logo, einfarbig in Wandweiß, erzeugt von
   `tools/build-bilder.sh`. Ändert sich --wall, muss die Datei neu. */
.lamelle:nth-child(n+8):nth-child(-n+17)::before{
  content:"";position:absolute;inset:0;
  background-image:url('../../../media/v6/logo-druck.webp');
  background-repeat:no-repeat;
  background-size:auto calc(var(--logo-slats) * 100%);
  background-position:center calc((var(--i) - var(--logo-top)) / (var(--logo-slats) - 1) * 100%);
  /* Quadriert, nicht linear: linear stünde das Zeichen schon in der
     Ruhestellung als halber Wasserfleck da. Quadriert ist es dort ein
     Versprechen und kommt erst im letzten Drittel des Schließens ganz. */
  opacity:calc((1 - var(--t)) * (1 - var(--t)));
  transition:opacity .12s linear;
}

/* Der Zugstab */
.zug{
  display:flex;flex-direction:column;align-items:center;
  gap:.7rem;padding-block:clamp(8px,1.1vw,14px);
}
.zug__mark{
  font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:.62rem;letter-spacing:.16em;color:var(--ink-mid);
  writing-mode:vertical-rl;
}
/* 32px, nicht 22px: der Griff braucht seine eigene Breite, sonst ragt er
   10px über die Spalte hinaus. Nebenbei wird der Stab damit auf dem
   Handy sicher greifbar (WCAG 2.5.8 verlangt 24px). */
.zug input[type="range"]{
  -webkit-appearance:none;appearance:none;
  flex:1;
  writing-mode:vertical-lr;
  direction:rtl;
  width:32px;
  background:transparent;
  cursor:ns-resize;
  touch-action:none;
}
.zug input[type="range"]::-webkit-slider-runnable-track{
  width:2px;height:100%;background:var(--line);margin-inline:auto;
}
.zug input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:11px;background:var(--ink);border:0;
}
.zug input[type="range"]::-moz-range-track{width:2px;background:var(--line)}
.zug input[type="range"]::-moz-range-thumb{
  width:22px;height:11px;background:var(--ink);border:0;border-radius:0;
}

/* ============================================================
   Leistungen — acht Lamellenzeilen
   ============================================================ */
.section{padding-block:clamp(3.5rem,7vw,6.5rem)}
.section__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;
  padding-bottom:1.1rem;border-bottom:2px solid var(--ink);
  margin-bottom:clamp(1.6rem,3vw,2.6rem);
}
.section__note{color:var(--ink-mid);font-size:.95rem;max-width:42ch}

.zeilen{display:grid;gap:3px}
.zeilen a{
  display:grid;
  grid-template-columns:3rem minmax(0,1fr) auto;
  align-items:center;gap:1rem;
  padding:clamp(1rem,1.7vw,1.35rem) clamp(1rem,2vw,1.6rem);
  background:linear-gradient(180deg,var(--navy-hi) 0%,var(--navy) 42%,var(--navy-lo) 100%);
  color:var(--light);
  transition:background .18s ease-out,color .18s ease-out;
}
.zeilen .zl__key{
  font-weight:900;font-variant-numeric:tabular-nums lining-nums;
  font-size:.86rem;color:rgba(255,255,255,.62);
}
/* „Schwachstellenmanagement" ist ein Wort von 24 Zeichen. Ohne Trennung
   läuft es auf dem Handy über den Zustandspunkt und aus der Zeile heraus.
   hyphens:manual, nicht auto: die Automatik trennt „Schwachstellenma-
   nagement" — richtig, aber unschön. Die Trennstelle steht als ­ im
   HTML an der Fuge des Wortes. break-word ist nur das Netz darunter. */
.zeilen .zl__name{
  display:block;
  font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.02rem,1.6vw,1.3rem);letter-spacing:-.005em;line-height:1.15;
  overflow-wrap:break-word;hyphens:manual;
}
.zeilen .zl__tag{
  display:block;font-weight:400;font-style:normal;text-transform:none;
  font-size:.85rem;letter-spacing:0;color:rgba(255,255,255,.72);margin-top:.15rem;
  overflow-wrap:break-word;
}
.zeilen .zl__state{
  width:13px;height:13px;border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
  transition:background .18s ease-out,box-shadow .18s ease-out;
}
/* Die Zeile öffnet sich: Licht statt Blau.
   :active gehört dazu — auf dem Handy gibt es kein Hover, sonst bliebe
   jede Zeile dort für immer geschlossen. */
.zeilen a:hover,
.zeilen a:focus-visible,
.zeilen a:active{
  background:var(--light);
  color:var(--ink);
}
.zeilen a:hover .zl__key,
.zeilen a:focus-visible .zl__key,
.zeilen a:active .zl__key{color:var(--green-text)}
.zeilen a:hover .zl__tag,
.zeilen a:focus-visible .zl__tag,
.zeilen a:active .zl__tag{color:var(--ink-mid)}
.zeilen a:hover .zl__state,
.zeilen a:focus-visible .zl__state,
.zeilen a:active .zl__state{background:var(--green);box-shadow:inset 0 0 0 2px var(--green)}

/* Der Hinweis über der Liste muss sagen, was am Gerät wirklich geht. */
.nur-tippen{display:none}
@media (hover: none){
  .nur-zeigen{display:none}
  .nur-tippen{display:inline}
}

/* ============================================================
   Prinzip — dunkles Band
   ============================================================ */
.prinzip{
  background:var(--navy-lo);
  color:var(--light);
  padding-block:clamp(3.5rem,7vw,6.5rem);
}
.prinzip .lead{color:rgba(255,255,255,.82);margin-top:1.1rem}
.paar{
  display:grid;grid-template-columns:1fr;gap:3px;
  margin-top:clamp(2.2rem,4vw,3.4rem);
}
@media (min-width: 780px){.paar{grid-template-columns:1fr 1fr}}
.paar__seite{
  padding:clamp(1.6rem,3vw,2.6rem);
  background:rgba(255,255,255,.05);
  box-shadow:inset 4px 0 0 var(--green);
}
.paar__seite:last-child{box-shadow:inset 4px 0 0 var(--blue)}
.paar__seite h3{
  font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.2rem,2vw,1.7rem);line-height:1.1;
}
.paar__seite p{margin-top:.7rem;font-size:.96rem;color:rgba(255,255,255,.8)}

/* ============================================================
   Stimmen
   ============================================================ */
.stimmen{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,2.5rem)}
@media (min-width: 820px){.stimmen{grid-template-columns:1fr 1fr}}
.stimme{border-top:4px solid var(--green);padding-top:1.3rem}
.stimme blockquote{font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.55;max-width:44ch}
.stimme cite{
  display:block;margin-top:1.1rem;font-style:italic;font-weight:700;
  text-transform:uppercase;font-size:.74rem;letter-spacing:.15em;color:var(--green-text);
}

/* ============================================================
   Schluss
   ============================================================ */
.schluss{
  padding-block:clamp(4rem,8vw,7rem);
  border-top:2px solid var(--ink);
  display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem);
  align-items:start;
}
@media (min-width: 900px){.schluss{grid-template-columns:minmax(0,1fr) minmax(230px,320px)}}
.schluss .display{max-width:13ch}
.schluss p{margin-top:1.1rem;max-width:50ch;color:var(--ink-mid)}
.branchen-head{
  font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:.72rem;letter-spacing:.17em;color:var(--ink-mid);
  padding-bottom:.7rem;border-bottom:2px solid var(--ink);
}
.branchen li{
  padding-block:.7rem;border-bottom:1px solid var(--line-soft);
  font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:.9rem;letter-spacing:.03em;
}

/* ============================================================
   Fußzeile
   ============================================================ */
.fuss{padding-bottom:2.5rem}
/* Auch hier minmax(0,1fr): sonst zieht „40789 Monheim am Rhein" unter
   340px die linke Zelle breiter als die rechte. */
.fuss__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;
  background:var(--line-soft);
  box-shadow:0 0 0 1px var(--line-soft);
  border-top:3px solid var(--ink);
  margin-bottom:1.4rem;
}
@media (min-width: 720px){.fuss__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fuss__zelle{background:var(--wall);padding:1.1rem 1.2rem 1.3rem}
.fuss__zelle dt{
  font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:.64rem;letter-spacing:.17em;color:var(--ink-mid);margin-bottom:.5rem;
}
.fuss__zelle dd{font-size:.94rem;line-height:1.45;font-variant-numeric:tabular-nums}
/* inline-block plus Innenabstand: sonst ist der Mail-Verweis nur 18px
   hoch und auf dem Handy kaum zu treffen (WCAG 2.5.8 verlangt 24px). */
.fuss__zelle a{
  display:inline-block;padding-block:.3rem;
  overflow-wrap:break-word;
  text-decoration:underline;text-decoration-color:var(--line);
  text-underline-offset:.22em;transition:text-decoration-color .15s ease-out;
}
.fuss__zelle a:hover{text-decoration-color:var(--green-text)}
.fuss__legal{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:.68rem;letter-spacing:.14em;color:var(--ink-mid);
}

/* ============================================================
   Ohne JavaScript und bei reduzierter Bewegung: alles offen
   ============================================================ */
html:not(.js) .zug{display:none}
html:not(.js) .lamelle{--t:1}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}