/* MPE Keys, Produktseite.
   Angelegt am 2026-09-02.

   ── Was hier absichtlich GLEICH ist ────────────────────────────────────────
   Dieselbe Huelle wie _Website/MPEDrift/css/site.css und, ueber sie,
   _Website/MPEInsight/css/site.css. Die Begruendung steht drueben und gilt
   hier unveraendert: eine Familie wird an den MASSEN erkennbar und nicht an
   der Absicht. Wert fuer Wert uebernommen:

     Kopfzeile      fest, 72 px hoch, Innenbreite 1560, erst beim Scrollen
                    Hintergrund und Unschaerfe
     Wortmarke      Inter 600, 14 px, Laufweite 0,12em, Bild mit 5 px Radius
                    ⚠ NICHT die Serifenschrift
     Knoepfe        Radius 8, Inter 600 / 14 px, Fuellung steigt beim
                    Ueberfahren von UNTEN auf
     Radien         genau drei Stufen: 8 Bedienelement, 12 Karte, 16 Tafel
     Spalte         1240 px                     (--max)
     Kurven         --e-soft fuer Ankuenfte, --e-swift fuer Zeiger
     Korn           dieselbe fractalNoise-Flaeche, 9 s in 6 Stufen
     Schiene        linke Haarlinie mit Stationen, unter 1240 px weg
     Ankunft        ein [data-rv] mit denselben Spielarten und Zeiten
     Auswahl/Fokus  gleiche Mechanik, eigene Farbe

   ── Was hier absichtlich ANDERS ist: DIE SEITE IST HELL ────────────────────
   Die beiden Schwesterseiten stehen auf Schwarz, diese steht auf Weiss, und
   das ist keine Laune, sondern am Logo GEMESSEN.

   Das MPE-Keys-Zeichen (scripts/gen-keys-logo.py) kennt genau zwei Farben:
   weisse Tasten #ffffff und schwarze Tasten #141414 (WHITE_KEY/BLACK_KEY,
   Zeile 56 folgende), auf dem Grund #fafaf9 (BG). Der Schlagschatten liegt im
   Alphakanal, er traegt also auf jeden Untergrund mit.

   Auf dem Familien-Schwarz #040609 verschwinden die schwarzen Tasten
   vollstaendig - nachgestellt und angesehen am 2026-09-02, nicht geschaetzt.
   Uebrig bleibt ein weisser Strahlenkranz; die Klaviatur, also die ganze
   Aussage des Zeichens, ist weg. Auf Weiss lesen beide Tastenfarben, und der
   Schatten gibt den weissen Staeben ihre Kante. Deshalb ist der Seitengrund
   #fafaf9 - der Grund des Logos selbst und keine zweite Meinung darueber.

   Folge davon, und sie ist der Grund fuer fast jede Abweichung weiter unten:
   jeder Wert, der drueben "hell auf dunkel" heisst, heisst hier "dunkel auf
   hell". Umgedreht sind nur die ROLLEN, nicht die Masse.

   ── Woher die Farben kommen ────────────────────────────────────────────────
   1. --brand ist #141414, die schwarze Taste des Logos. MPE Insight fuehrt
      Gruen, MPE Drift Rot, MPE Keys fuehrt Tinte: das Zeichen hat keine
      dritte Farbe, und eine dazuerfundene waere eine Behauptung ueber ein
      Produkt, das schwarzweiss ist.
   2. Die fuenf Signalfarben sind die echten Vorgabefarben der beiden Module,
      aus src/js/00-core.js (Zeile 643 folgende):

        pressHigh   #00fffb   Druck faerbt die Taste
        ringHigh    #d400ff   der Bend-Ring um die Taste
        splitHigh   #ffaa3c   die linke Hand jenseits des Splitpunkts
        pbColor     #6688ff   das Pitchbend-Rad
        mwColor     #44ffbb   das Modulationsrad

      Alle fuenf sind fuer einen SCHWARZEN Grund entworfen und stehen auf
      #fafaf9 bei 1,2 bis 3,8 zu 1, sind dort also unbrauchbar. Umgerechnet
      ist nach derselben Regel, die drueben schon die Grundleiter traegt:
      Farbton und Saettigung bleiben, die Helligkeit faellt, bis 4,5 zu 1 auf
      dem Seitengrund erreicht ist. Gerechnet, nicht nach Auge:

        #00fffb  H 179,1 → #00817f   4,52:1
        #d400ff  H 289,9 → #c100e9   4,52:1
        #ffaa3c  H  33,8 → #ac6100   4,50:1
        #6688ff  H 226,7 → #3864ff   4,53:1
        #44ffbb  H 158,2 → #008454   4,54:1

      ⚠ Diese fuenf gelten auf --bg-app und --bg-card. Auf --bg-panel
        (#f2f1ee, also .band und die Fusszeile) fallen sie auf 4,16 bis 4,20
        und duerfen dort NICHT als Text stehen. Als Punkt (.legend i) und als
        2-px-Kante (.lane) ist das gleichgueltig, fuer eine Flaeche gilt 3 zu 1.
   3. --accent ist der Bend-Ring in seiner unteren Stellung, #508cff aus
      cfg.ringLow, auf denselben Weg gebracht: Farbton 219,4 bleibt, die
      Helligkeit faellt auf 42 Prozent. Ergebnis #004ad6, 6,81 zu 1 auf dem
      Seitengrund. Das laesst Luft fuer einen dunkleren Hover (#0a3fae,
      8,61 zu 1), den ein Wert direkt an der Schwelle nicht haette.

   Rollenteilung, wie drueben drei Faecher: --brand traegt jede Handlung,
   --accent jede Auskunft, die fuenf Modulfarben sind ausschliesslich Legende.

   ── Textleiter, gemessen ───────────────────────────────────────────────────
   Drei Stufen, alle drei bestehen AA auf jedem der drei Gruende:

     --text        #17171a   17,13 / 17,89 / 15,84 zu 1
     --text-dim    #4e4e56    7,89 /  8,24 /  7,30 zu 1
     --text-faint  #6f6f78    4,76 /  4,98 /  4,40 zu 1

   ⚠ Die dritte Stufe ist bewusst STAERKER als drueben (dort #4a5170 mit
     2,61 zu 1). Sie traegt in .aside einen ganzen Absatz Fliesstext, und auf
     Weiss faellt zu wenig Kontrast sofort auf. Wer sie zurueckdreht, macht
     den technischen Nachsatz unlesbar.

   Schriften wie drueben, lokal gehostet: Fraunces fuer Ueberschriften, Inter
   fuer Text und Bedienelemente, IBM Plex Mono fuer Etiketten und Zahlen. */

/* ── 1 · Marken und Masse ─────────────────────────────────────────────────── */
:root {
  /* Der Seitengrund IST der Logogrund, siehe oben. Die Karten sind reines
     Weiss: auf einer Seite ueber ein Instrument aus weissen und schwarzen
     Tasten ist eine weisse Platte auf leicht warmem Grund die naheliegende
     Staffelung und keine erfundene. */
  --bg-app:      #fafaf9;
  --bg-panel:    #f2f1ee;
  --bg-card:     #ffffff;
  --bg-raised:   #ffffff;
  --bg-hover:    #f6f5f2;
  --bg-active:   #eceae5;

  --border:      #d6d3cc;
  --border-soft: #e2dfd8;
  --border-faint:#eae7e0;
  --grid:        #e4e1da;

  --text:        #17171a;
  --text-dim:    #4e4e56;
  --text-faint:  #6f6f78;
  --field-text:  #26262c;

  --accent:      #004ad6;
  --accent-rgb:  0, 74, 214;
  --accent-lift: #0a3fae;

  /* Die fuenf Modulfarben, umgerechnet. Namen wie im Programm, damit die
     Legende auf der Seite und der Regler in der App dasselbe Wort tragen. */
  --press:       #00817f;
  --bend:        #c100e9;
  --hand:        #ac6100;
  --pb:          #3864ff;
  --mod:         #008454;

  /* Die Markenfarbe: die schwarze Taste des Logos, unveraendert.
     Weiss darauf steht bei 18,42 zu 1, die Knopfschrift ist deshalb hell.
     --brand-lift ist die Fuellung, die beim Ueberfahren von unten aufsteigt;
     sie ist HELLER als die Marke, weil ein Schwarz nicht dunkler werden kann
     und ein aufsteigendes Grau die Bewegung zeigt, die drueben das hellere
     Rot zeigt. */
  --brand:       #141414;
  --brand-lift:  #2e2e2e;
  --brand-rgb:   20, 20, 20;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Genau drei Radien, wie drueben: Bedienelement, Karte, Tafel. Eine vierte
     Stufe faellt sofort als Fremdkoerper auf. */
  --r-ctl:   8px;
  --r-card:  12px;
  --r-panel: 16px;

  --max: 1240px;
  --gap: 24px;

  --e-soft:  cubic-bezier(0.16, 1, 0.3, 1);
  --e-swift: cubic-bezier(0.22, 1, 0.36, 1);

  /* Wie weit die Ankunfts-Maske ueber den Rahmen ihres Elements hinausgreift.
     Die Herleitung steht bei [data-rv="mask"]; in em, damit sie mit der
     Schriftgroesse mitwaechst. */
  --mask-bleed: 0.2em;

  /* Der eine Wert, den die dunklen Schwesterseiten nicht brauchen. Dort hebt
     sich eine Karte vom Grund ab, indem sie HELLER wird; auf Weiss geht das
     nicht, eine weisse Platte auf fast weissem Grund braucht einen Schatten,
     sonst schwimmt sie. Bewusst eine einzige, sehr flache Stufe: zwei
     Schattenstufen waeren eine vierte Radienstufe in Grau. */
  --lift: 0 1px 2px rgba(20, 20, 20, .04), 0 8px 22px rgba(20, 20, 20, .045);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Lenis fuehrt beim sanften Rollen selbst Buch und braucht das eigene
   Scrollverhalten des Browsers nicht. Gleiche Zeile wie drueben. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ⚠ color: var(--text) und nicht #fff. Drueben steht Weiss, weil dort die
   Schrift hell ist; hier waere Weiss auf einem 25-Prozent-Blau die eine
   Stelle der Seite, an der markierter Text schlechter lesbar ist als
   unmarkierter. */
::selection { background: rgba(var(--accent-rgb), .18); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ── 2 · Korn ─────────────────────────────────────────────────────────────
   Dieselbe Rauschflaeche, dieselbe Frequenz, dieselbe Taktung wie auf beiden
   Schwesterseiten. Auf Schwarz nimmt sie dem Feld das Digitale; auf Weiss
   liest sie sich als Papier, und das passt einem Instrument aus Elfenbein
   und Ebenholz besser als jede Alternative. Deckung bleibt .035: das ist der
   Familienwert, und dunkles Korn auf Weiss traegt bei gleicher Deckung
   genauso weit wie helles auf Schwarz. */
.grain {
  position: fixed;
  inset: -10%;
  width: 120%;
  height: 120%;
  pointer-events: none;
  z-index: 2000;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  animation: grain-shift 9s steps(6) infinite;
}
@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2%, 2%); }
  40% { transform: translate(2%, -1%); }
  60% { transform: translate(-1%, -2%); }
  80% { transform: translate(1%, 2%); }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* Die feste Flaeche hinter der Seite. Drueben ist es ein Quadratraster und
   zitiert das Stroemungsfeld des Plugins; hier stehen NUR die senkrechten
   Linien, in gleichem Abstand, und zitieren damit die einzige Geometrie, die
   dieses Produkt hat: die Kanten einer Klaviatur von oben. Gleicher Abstand
   (64 px), gleiche Deckung, gleiche Maske wie drueben - nur die waagerechte
   Schar faellt weg, denn eine Tastatur hat keine Querlinien. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 75%);
}

main, header, footer { position: relative; z-index: 1; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-lift); }

img, svg { max-width: 100%; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 32px; }

/* ── 3 · Schrift ──────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(40px, 7vw, 76px); letter-spacing: -.02em; line-height: 1.02; }
h2 { font-size: clamp(28px, 3.8vw, 44px); letter-spacing: -.01em; line-height: 1.05; }
h3 { font-size: 19px; letter-spacing: -.005em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
}
.eyebrow.warm { color: var(--brand); }

/* Der Punkt vor dem Etikett pulst, wie auf beiden Schwesterseiten: die Seite
   zeigt damit, dass sie an einem laufenden Signal haengt.
   ⚠ box-shadow ist hier .28 statt voll deckend. Ein Leuchthof um einen
     dunklen Punkt auf Weiss ist kein Licht, sondern ein Schatten; voll
     gesetzt sieht er nach Druckfehler aus. */
.eyebrow.live { position: relative; padding-left: 16px; }
.eyebrow.live::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px rgba(var(--accent-rgb), .28);
  animation: kick-pulse 2.6s ease-in-out infinite;
}
@keyframes kick-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .eyebrow.live::before { animation: none; } }

.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--text-dim); max-width: 62ch; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; }

/* ── 4 · Knoepfe ──────────────────────────────────────────────────────────
   Die Fuellung steigt beim Ueberfahren von UNTEN auf, nicht als Farbwechsel:
   background-position links unten, background-size von 100% 0% auf 100% 100%.
   Genau daran erkennt man die drei Seiten als eine. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
  padding: 12px 24px;
  border-radius: var(--r-ctl);
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0%;
  transition: border-color .25s, background-color .25s,
              background-size .3s var(--e-swift), color .25s;
}
.btn:hover { background-size: 100% 100%; }
.btn-lg { padding: 15px 30px; font-size: 15px; }

/* Schwarzer Knopf, weisse Schrift: die einzige Stelle der Seite, an der die
   Tinte flaechig steht. Drueben ist es umgekehrt (helle Marke, dunkle
   Schrift), die Rolle ist dieselbe. */
.btn-primary {
  background-color: var(--brand);
  background-image: linear-gradient(var(--brand-lift), var(--brand-lift));
  color: #ffffff;
}
.btn-ghost {
  background-color: var(--bg-card);
  background-image: linear-gradient(rgba(var(--accent-rgb), .07), rgba(var(--accent-rgb), .07));
  border-color: var(--border-soft);
  border-left: 2px solid rgba(var(--accent-rgb), .55);
  color: var(--text);
}

/* ── 5 · Kopfzeile ────────────────────────────────────────────────────────
   Fest und zunaechst durchsichtig; Hintergrund und Unschaerfe kommen erst,
   wenn gescrollt wurde. js/site.js setzt dafuer .scrolled. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  border-bottom: 1px solid transparent;
  transition: background .4s, border-color .4s, backdrop-filter .4s;
}
.nav.scrolled {
  background: rgba(250, 250, 249, .78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color: var(--border-faint);
}
.nav-inner {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 48px);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ⚠ Die Wortmarke laeuft in der LAUFSCHRIFT, nicht in der Serifenschrift.
   Das ist auf beiden Schwesterseiten so und es ist der auffaelligste
   einzelne Unterschied, wenn man ihn falsch macht: eine Serifen-Wortmarke
   neben zwei Inter-Wortmarken liest sich sofort als anderes Haus. */
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--text);
}
.wordmark:hover { color: var(--text); }
/* ⚠ Kein Radius auf dem Zeichen, und das ist der eine Punkt, an dem diese
   Seite von den Schwestern abweichen MUSS. Drueben liegt das Logo als
   deckende Kachel und braucht die 5 px, damit die Kachel nicht als Rechteck
   im Kopf steht. Hier ist die Datei durchsichtig, der Faecher endet frei im
   Nichts - ein Radius haette nichts zu runden und wuerde nur die Spitzen der
   aeussersten Strahlen abschneiden. */
/* ⚠ flex: none, sonst schrumpft das Zeichen. Es ist ein Flex-Element in
   .wordmark und gibt bei engem Kopf als erstes nach; am 2026-09-02
   gemessen, 60 px kamen mit 54 an. Bei 30 px fiel das nie auf. */
.wordmark img { border-radius: 0; flex: none; }
/* Der zweizeilige Markenblock im Kopf: das Familienwort klein ueber dem
   Produktwort, beide in derselben Farbe. Dieselbe Setzung wie im Kopf der
   App (styles.css, .title). Die Fusszeile bleibt einzeilig. */
.wordmark-stack .wm-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.04;
}
.wordmark-stack .wm-fam { font-size: 9px; letter-spacing: .2em; }
.wordmark-stack .wm-prod { font-size: 16px; letter-spacing: .1em; }
.wordmark-tag {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
}

.nav-links { display: flex; gap: 4px; }
.nav-links a {
  font-size: 13.5px;
  color: var(--text-dim);
  padding: 8px 13px;
  border-radius: 6px;
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--text); background: rgba(20, 20, 20, .05); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-cta { padding: 10px 20px; font-size: 13px; }

.nav-burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 950;
}
.nav-burger span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--text);
  transition: transform .3s var(--e-swift), opacity .3s;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 890;
  background: rgba(250, 250, 249, .97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 96px 36px 48px;
  gap: 36px;
  overflow-y: auto;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a {
  font-family: var(--serif);
  font-size: clamp(26px, 7vw, 36px);
  font-weight: 600;
  color: var(--text-dim);
  padding: 12px 0;
  border-bottom: 1px solid var(--border-faint);
  transition: color .2s, padding-left .25s var(--e-swift);
}
.mobile-menu nav a:hover { color: var(--text); padding-left: 10px; }


/* ── Produktwechsler ──────────────────────────────────────────────────────
   Die Pille in der Kopfzeile, die auf ein anderes Produkt des Hauses zeigt,
   mit dessen Logo. Sie steht auf allen drei Seiten an derselben Stelle und
   sieht ueberall gleich aus; nur Ziel, Logo und Name drehen sich. Der Wechsel
   soll sich anfuehlen wie ein Reiter INNERHALB eines Hauses.

   Radius ist bewusst --r-ctl und keine Pille: die Seite kennt genau drei
   Radien, eine vierte Stufe faellt als Fremdkoerper auf.

   Sie bleibt bis ins schmalste Fenster in der Kopfzeile stehen, nur enger
   gesetzt; im Klappmenue steht sie zusaetzlich in der breiten Fassung.
   ───────────────────────────────────────────────────────────────────────── */
.prod-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 11px 6px 7px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-ctl);
  background: var(--bg-card);
  color: var(--text-dim);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .22s, border-color .22s, background .22s, box-shadow .22s;
}
/* ⚠ HIER bleibt der Radius. Die beiden Schwesterlogos sind deckende Kacheln
   mit eigenem Grund, anders als das durchsichtige Zeichen dieser Seite. */
.prod-switch img { border-radius: 5px; display: block; }
.prod-switch svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .45;
  transition: transform .25s var(--e-swift), opacity .22s;
}
.prod-switch:hover {
  color: var(--text);
  border-color: var(--border);
  background: var(--bg-raised);
  box-shadow: var(--lift);
}
.prod-switch:hover svg { transform: translateX(2px); opacity: 1; }

/* Die breite Fassung fuers Klappmenue: gleiche Teile, volle Zeile. */
.prod-switch.is-wide {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  padding: 14px 16px;
  font-size: 15px;
}
.prod-switch.is-wide svg { margin-left: auto; width: 16px; height: 16px; }

/* Sobald der Menueknopf da ist, wird die Pille schmal. Sie gibt in dieser
   Reihenfolge nach: zuerst der Pfeil, denn auf dem Telefon gibt es kein
   Hover, das er beantworten koennte, dann Zeichen, Schrift und Innenabstand.
   Der Name selbst wird nie gekuerzt. Dieselbe Staffel wie drueben. */
@media (max-width: 1000px) {
  .nav-inner { gap: 14px; }
  .nav-right { gap: 10px; }
  .nav-right .prod-switch {
    gap: 7px;
    padding: 5px 9px 5px 5px;
    font-size: 12px;
  }
  .nav-right .prod-switch img { width: 18px; height: 18px; }
  .nav-right .prod-switch svg { display: none; }
}

/* ── 6 · Die Schiene ──────────────────────────────────────────────────────
   Eine feste Haarlinie am linken Rand, die sich beim Scrollen fuellt; jeder
   Abschnitt ist eine Station darauf. Aufbau, Masse und die Sichtlinie 0,34
   sind die der Schwesterseiten.

   Der Verlauf ist der einzige eigene Teil, und er ist die Rechnung dieser
   Seite: das Logo hat keinen Farbverlauf, es hat zwei Toene. Also faellt die
   Schiene von der weissen zur schwarzen Taste - sie fuellt sich mit Tinte.
   Auf schmalen Fenstern ist das Deko, also verschwindet sie ganz. */
.rail {
  position: fixed;
  left: clamp(16px, 2vw, 30px);
  top: 0; bottom: 0;
  width: 12px;
  z-index: 860;
  pointer-events: none;
}
.rail-track, .rail-fill {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  margin-left: -.5px;
}
.rail-track {
  background: linear-gradient(180deg,
    transparent 0%, rgba(20, 20, 20, .14) 9%,
    rgba(20, 20, 20, .14) 91%, transparent 100%);
}
.rail-fill {
  background: linear-gradient(180deg, #c9c7c1 0%, #8a8880 38%, #3d3d3f 70%, #141414 100%);
  transform-origin: top;
  transform: scaleY(var(--sp, 0));
  opacity: .9;
}
.rail-node {
  position: absolute;
  left: 0;
  width: 12px; height: 12px;
  margin-top: -6px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.rail-node::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--border);
  transition: background .4s ease, box-shadow .4s ease, transform .4s var(--e-swift);
}
.rail-node.is-past::before { background: var(--brand); }
.rail-node.is-here::before {
  transform: scale(2);
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14);
}
.rail-node span {
  position: absolute;
  left: 20px; top: 50%;
  transform: translateY(-50%) translateX(-6px);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s ease, transform .4s var(--e-swift);
}
/* Die Beschriftung ist nur ein Angebot beim Ueberfahren. Dauerhaft offen an
   der aktuellen Station liest sie sich als Text, der im Rand herumsteht. */
.rail-node:hover span,
.rail-node:focus-visible span { opacity: 1; transform: translateY(-50%) translateX(0); }
.rail-node:focus-visible { outline: none; }
.rail-node:focus-visible::before { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .4); }

@media (max-width: 1240px) { .rail { display: none; } }

/* ── 7 · Ankunft ──────────────────────────────────────────────────────────
   Ein Attribut, ein paar Spielarten, ein Verzoegerungs-Token. Jede Ankunft
   auf der Seite laeuft hierdurch, damit das ganze Dokument EIN Tempo hat.
   Werte unveraendert aus der Familie. */
@media (prefers-reduced-motion: no-preference) {
  [data-rv] {
    opacity: 0;
    transition:
      opacity .85s var(--e-soft) var(--rvd, 0s),
      translate 1.05s var(--e-soft) var(--rvd, 0s),
      scale 1.05s var(--e-soft) var(--rvd, 0s),
      clip-path 1.15s var(--e-soft) var(--rvd, 0s),
      filter .9s var(--e-soft) var(--rvd, 0s);
  }
  [data-rv="up"]    { translate: 0 30px; }
  [data-rv="rise"]  { translate: 0 68px; }
  [data-rv="left"]  { translate: -26px 0; }
  [data-rv="right"] { translate: 26px 0; }
  [data-rv="scale"] { translate: 0 30px; scale: .955; }
  /* ⚠ Die Maske greift oben und unten UEBER den Rahmen hinaus, und das ist
     kein Spielraum, sondern die Reparatur eines Fehlers.

     clip-path schneidet am RAHMEN des Elements ab. Die Ueberschriften laufen
     aber mit line-height 1,02 bis 1,15, also enger als der natuerliche
     Zeilenkasten der Fraunces: der Text steht oben und unten ueber den Rahmen
     hinaus. Am 2026-09-02 an jeder maskierten Ueberschrift beider Seiten
     nachgemessen, in em der jeweiligen Schriftgroesse:

       oben    0,088 bis 0,113 em ueber dem Rahmen
       unten   0,079 bis 0,097 em

     Mit inset(0) blieb davon nichts stehen. Aufgefallen ist es am y von
     "key" in "Four things happen on one key." (PO-Befund); betroffen ist
     immer nur die LETZTE Zeile unten und die ERSTE oben, weil dazwischen der
     naechste Zeilenkasten den Ueberstand deckt. Genau deshalb sieht man es
     nur an Ueberschriften, deren Schlusszeile eine Unterlaenge hat.

     --mask-bleed ist mit 0,2 em knapp das Doppelte des groessten gemessenen
     Ueberstands. Im versteckten Zustand kommt derselbe Betrag auf die 101
     Prozent obendrauf, sonst blitzt vor dem Start eine Zeile hervor.

     ⚠ ZWEITENS, und es hing an derselben Zeile: clip-path stand vorher im
     GEMEINSAMEN Ankunfts-Zustand und lag damit auf JEDEM [data-rv], nicht nur
     auf den Masken. Ein clip-path schneidet auch Schlagschatten ab, und
     genau das ist passiert - der Leuchthof des mittleren Kettenglieds
     (.chain-step.is-mid) und der des Ereignispunkts (.eyebrow.live::before)
     waren nach ihrer Ankunft weg. Der clip-path steht deshalb jetzt
     ausschliesslich an den beiden Masken-Regeln; alles andere kommt ohne aus. */
  [data-rv="mask"] {
    clip-path: inset(calc(var(--mask-bleed) * -1) 0 calc(101% + var(--mask-bleed)) 0);
    translate: 0 12px;
  }
  [data-rv="soft"]  { filter: blur(16px); scale: 1.03; }

  [data-rv].rv-in {
    opacity: 1;
    translate: none;
    scale: none;
    filter: none;
  }
  [data-rv="mask"].rv-in { clip-path: inset(calc(var(--mask-bleed) * -1) 0); }
}

/* ── 8 · Abschnitte ───────────────────────────────────────────────────────── */
section { padding: clamp(72px, 10vw, 128px) 0; border-top: 1px solid var(--border-faint); }
section:first-of-type { border-top: none; }
.sec-head { max-width: 68ch; margin-bottom: 48px; }

/* ── 9 · Aufmacher ────────────────────────────────────────────────────────
   Volle Fensterhoehe und mittig, wie drueben; svh statt vh, damit die
   Adressleiste auf dem Telefon nicht hineinragt. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 0 96px;
  overflow: hidden;
}
/* Drueben verdunkelt dieser Schleier den Kopf und legt unten einen
   Markenschein hin. Hier ist beides gespiegelt: oben eine Aufhellung, damit
   die Kopfzeile auf hellem Grund steht, unten der Uebergang zurueck auf den
   Seitengrund und ein sehr flacher Tintenhauch. Ein LEUCHTEN gibt es nicht:
   Schwarz leuchtet nicht, es faellt. */
.hero-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .75) 0%, transparent 26%, transparent 62%, var(--bg-app) 100%),
    radial-gradient(ellipse 120% 80% at 50% 110%, rgba(var(--brand-rgb), .05), transparent 55%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero .lead { margin-top: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-note { margin-top: 22px; color: var(--text-dim); }

/* Die Signalfarben einmal als Legende unter dem Aufmacher, damit die Seite
   ihre Zeichenerklaerung mitbringt, bevor sie die Farben benutzt. */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--border-faint);
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--accent)); }

/* ── 9b · Kette, Anspruch, Bruecke, Nachsatz ─────────────────────────────── */

/* Die Kette. Mono und in Kaesten, weil sie eine Leitung zeigt und keinen
   Satz. Der mittlere Kasten ist das Produkt und traegt als einziger Farbe. */
.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 44px;
}
.chain-step {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-ctl);
  padding: 9px 14px;
  background: var(--bg-card);
}
/* Drueben markiert ein Leuchthof den mittleren Kasten. Auf Weiss macht das
   ein DECKENDES Feld: der Kasten wird zur schwarzen Taste. */
.chain-step.is-mid {
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand);
}
.chain-arrow { color: var(--text-faint); font-size: 15px; line-height: 1; }

/* Der eine Satz, den der Besucher mitnehmen soll. Er darf groesser sein als
   die uebrigen Ueberschriften, sonst ist er nur eine weitere davon. */
.claim { font-size: clamp(32px, 5vw, 58px); max-width: 16ch; margin-bottom: 20px; }

/* Die Bruecke unter einer Kartenreihe: was sie zusammen ergeben. Die
   Markenkante links macht sie zur Folgerung und nicht zu noch einem Absatz. */
.bridge {
  margin-top: 40px;
  padding-left: 20px;
  border-left: 2px solid var(--brand);
  max-width: 56ch;
}

/* Der leise Nachsatz. Technik, die der versierte Kaeufer sucht und die den
   anderen den Blick nicht wegziehen soll. */
.aside {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--border-faint);
  color: var(--text-faint);
  max-width: 74ch;
  line-height: 1.9;
}

/* Die Ueberschrift ueber der Technik. Klein und in Mono, weil ab hier nichts
   mehr verkauft wird, sondern nur noch Auskunft gegeben. */
.aside-label {
  color: var(--text-faint);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 10.5px;
  margin: 0 0 16px;
}

/* Der Nutzensatz im Aufmacher: WARUM man das will. Er steht zwischen Text und
   Knoepfen, weil er dort gelesen wird, bevor entschieden wird. Nicht in der
   gedimmten Farbe des Leads - er ist die staerkste Zeile nach der
   Ueberschrift. */
.hero-use {
  margin-top: 18px;
  max-width: 62ch;
  font-size: clamp(15px, 1.3vw, 17.5px);
  color: var(--text);
}
.hero-use strong { font-weight: 600; color: var(--brand); }

/* ── 9c · Die Basics ──────────────────────────────────────────────────────
   Drei Felder unter der Idee. Die Rahmenoptik ist dieselbe wie bei der
   Faktentafel: eine Tafel, deren Trennlinien aus dem 1px-Abstand vor dem
   Randfarbton entstehen. Gleiches Bauteil, gleiche Sprache.

   Drei Felder, also drei Spalten oder eine, nie zwei: bei zwei stuende das
   dritte allein in der zweiten Reihe und die Luecke daneben liese sich als
   Fehler. Dieselbe Teilbarkeitsregel wie bei .cards-4 und .facts. */
.basics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  background: var(--border-faint);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-panel);
  overflow: hidden;
  box-shadow: var(--lift);
}
.basic {
  background: var(--bg-card);
  padding: 30px 26px 32px;
  transition: background .3s var(--e-swift);
}
.basic:hover { background: var(--bg-hover); }
.basic-kicker {
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.basic h3 { margin-bottom: 10px; }
.basic p { color: var(--text-dim); font-size: 15px; }
@media (max-width: 860px) { .basics { grid-template-columns: 1fr; } }

/* ── 9d · Die Aussagebahn ─────────────────────────────────────────────────
   Ein Abschnitt, der nur einen Satz traegt. Er bekommt einen eigenen Grund,
   damit er beim Durchscrollen als Zaesur wirkt und nicht als weitere
   Ueberschrift. */
.band { background: var(--bg-panel); }
.statement {
  font-size: clamp(34px, 5.6vw, 66px);
  max-width: 18ch;
  margin-bottom: 24px;
}

/* ── 10 · Karten ──────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--gap); }
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-card);
  padding: 26px 24px;
  box-shadow: var(--lift);
  transition: border-color .3s var(--e-swift), background .3s var(--e-swift),
              transform .3s var(--e-swift);
}
.card:hover { border-color: var(--border-soft); transform: translateY(-2px); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-dim); font-size: 15px; }

/* Vier Karten brauchen 4, 2 oder 1 Spalte und nie 3, sonst steht die vierte
   allein in der zweiten Reihe und die Luecke daneben liest sich als Fehler.
   auto-fit kann das nicht entscheiden: es fuellt nach Platz und nicht nach
   Teilbarkeit, und genau deshalb steht hier eine feste Zahl. */
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px)  { .cards-2 { grid-template-columns: 1fr; } }
@media (max-width: 900px)  { .cards-3 { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cards-4 { grid-template-columns: 1fr; } }

/* Die Spur traegt ihre Farbe als Kante links, nicht als Flaeche: die Farbe
   bleibt Legende und wird nicht zum Hintergrund. */
.lane { border-left: 2px solid var(--c, var(--accent)); }
/* Der Selektor heisst absichtlich .card p.lane-name und nicht .lane-name:
   .card p oben ist eine Klasse plus ein Element und schlaegt eine Klasse
   allein. Wer das kuerzt, macht die Legende blind. */
.card p.lane-name {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c, var(--accent));
  margin-bottom: 10px;
}

/* ── 11 · Die Bildstrecke der Designs ─────────────────────────────────────
   Der eine Bauteil, den es auf den Schwesterseiten so nicht gibt, und der
   Grund dafuer steht im Markup: dieses Produkt ist heute schon zu sehen,
   weil sein Modul in MPE Insight laeuft. Die Aufnahmen sind 2560 x 430
   gross, also sehr breite Streifen; genau so sollen sie auch stehen, denn
   eine Klaviatur IST ein breiter Streifen.

   ⚠ Die Bilder sind DUNKEL und die Seite ist hell. Deshalb bekommt jede
     Aufnahme einen eigenen dunklen Rahmen aus ihrem eigenen Grund heraus
     (der Rand ist die Fensterfarbe der App) statt der hellen Kartenkante:
     eine helle 1-px-Linie um ein schwarzes Bild liest sich als Schnittkante,
     ein dunkler Rahmen als Geraet.
   ⚠ aspect-ratio steht am Behaelter und nicht am Bild. Ohne sie hat die
     Zelle bis zur Ankunft des Bildes keine Hoehe, die Seite springt, und die
     Schiene misst waehrend des Sprungs falsch: sie rechnet ihre
     Knotenpositionen aus scrollHeight (js/site.js, placeRail). */
.shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
.shot {
  margin: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  background: #0d0f18;
  border: 1px solid #1d2130;
  box-shadow: var(--lift);
  transition: transform .3s var(--e-swift), box-shadow .3s var(--e-swift);
}
.shot:hover { transform: translateY(-2px); }
.shot-frame { display: block; aspect-ratio: 256 / 43; }
.shot-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px 14px;
  border-top: 1px solid #1d2130;
}
.shot-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
  color: #e6e6ec;
}
.shot-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: #8b90a4;
}

@media (max-width: 900px) { .shots { grid-template-columns: 1fr; } }

/* Die beiden hochformatigen Aufnahmen des PB/Mod-Moduls. Gleiches Bauteil,
   anderes Seitenverhaeltnis - deshalb eine eigene Klasse und kein
   Ueberschreiben von .shot-frame per Elternselektor. */
.shot-frame.is-square { aspect-ratio: 1076 / 1013; }
.shots.is-pair { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
@media (max-width: 720px) { .shots.is-pair { grid-template-columns: 1fr; } }

/* ── 12 · Listen mit Begriff und Erklaerung ───────────────────────────────── */
.modes { border-top: 1px solid var(--border-faint); margin: 0; }
.mode {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px 28px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--border-faint);
  transition: background .3s var(--e-swift);
}
.mode:hover { background: rgba(20, 20, 20, .022); }
.mode dt {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
}
.mode dd { margin: 0; color: var(--text-dim); font-size: 15px; }

/* ── 13 · Faktentafel ─────────────────────────────────────────────────────── */
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0;
  background: var(--border-faint);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-panel);
  overflow: hidden;
  box-shadow: var(--lift);
}
.fact { background: var(--bg-card); padding: 22px 24px; }
.fact dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.fact dd { margin: 0; font-size: 15.5px; color: var(--field-text); }

/* Dieselbe Teilbarkeitsregel wie bei .cards-4: vier Felder, also 4 oder 2. */
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } }

/* ── 14 · Nachricht bei Erscheinen ────────────────────────────────────────── */
.notify { max-width: 560px; }
.notify-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.notify-form input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  padding: 12px 16px;
  border-radius: var(--r-ctl);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  transition: border-color .25s;
}
.notify-form input[type="email"]::placeholder { color: var(--text-faint); }
.notify-form input[type="email"]:focus { outline: none; border-color: var(--accent); }
.notify-fine { margin-top: 14px; font-size: 13px; color: var(--text-dim); }
.notify-msg { margin-top: 16px; font-size: 14.5px; }
.notify-msg[hidden] { display: none; }
/* ⚠ Diese beiden stehen auf dem Grund von .band, also auf --bg-panel. Die
   umgerechneten Modulfarben verfehlen dort 4,5 (siehe Kopf), deshalb tragen
   Erfolg und Fehlschlag hier eigene, dunklere Toene und nicht --mod/--hand. */
.notify-msg.ok { color: #0a6b48; }
.notify-msg.err { color: #a33a12; }

/* ── 15 · Fusszeile ───────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--border-faint); padding: 64px 0 40px; background: var(--bg-panel); }
.footer-row { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; }
.footer-tag { color: var(--text-dim); margin-top: 10px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-links a { color: var(--text-dim); font-size: 14.5px; }
.footer-links a:hover { color: var(--text); }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  justify-content: space-between;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--border-faint);
  color: var(--text-dim);
  font-size: 13px;
}

/* Das Impressum steht in der Fusszeile und nicht in einem Fenster, das erst
   Javascript oeffnet: es muss ohne Skript zu finden sein. */
.imprint { margin-top: 32px; }
.imprint summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.imprint summary:hover { color: var(--text); }
.imprint-body { margin-top: 14px; font-size: 14px; color: var(--text-dim); line-height: 1.8; }

/* ── 16 · Einwilligungsleiste ─────────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 2100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  box-shadow: 0 18px 48px rgba(20, 20, 20, .16);
}
.cookie-banner[hidden] { display: none; }
.cookie-text { flex: 1 1 320px; margin: 0; font-size: 13.5px; color: var(--text-dim); }
.cookie-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: flex; gap: 10px; }
.cookie-actions .btn { padding: 9px 18px; font-size: 13px; }

/* ── 17 · Schmale Fenster ─────────────────────────────────────────────────── */
/* Die Kopfzeile raeumt gestuft ab, jede Stufe an der Stelle, an der die Reihe
   sonst ueber den rechten Rand liefe: erst die Reiter, dann der Knopf,
   zuletzt die Plakette. Die Produktpille ueberlebt alle Stufen, sie ist der
   einzige sichtbare Weg zu den Schwesterprodukten. */
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}
@media (max-width: 900px) {
  .wrap { padding: 0 24px; }
}
@media (max-width: 720px) {
  .mode { grid-template-columns: 1fr; gap: 4px; }
  .footer-row { flex-direction: column; }
  .nav-cta { display: none; }
}
@media (max-width: 560px) {
  /* Der Entwicklungsstand steht gleich darunter in der ersten Zeile des
     Aufmachers; hier gehoert der Platz den beiden Produktnamen. */
  .wordmark-tag { display: none; }
}