/* =============================================================================
   SITE-NAV — gemeinsame Navigation fuer alle Seiten. Zwei getrennte Traeger:

     .pillnav   schwebende Pille: Marke · die WELTEN · Sprache · Aktion
     .dotrail   senkrechte Punkt-Schiene rechts: die ABSCHNITTE dieser Seite

   Warum getrennt: das sind zwei verschiedene Fragen. "Wo bin ich im Angebot?"
   gehoert in die Leiste und ist auf jeder Seite identisch. "Wo bin ich auf
   dieser Seite?" wechselt je Seite — kaeme es in dieselbe Zeile, waere die
   Leiste ueberall anders lang und nirgends kurz. Eine Pille lebt aber davon,
   kurz zu sein.

   Die Weltenpunkte sind bewusst EINWORTIG (Start · Websites · Shops · Software).
   Der Seitentitel darf "SaaS & individuelle Software" heissen, die Leiste nicht.

   Farben laufen ueber Fallback-Ketten, damit dieselbe Datei im dunklen System
   (Startseite, /software) und im hellen (/websites) funktioniert.
   ============================================================================= */

:root{
  /* 80px = derselbe Wert wie --header-h der Startseite. Gleiche Hoehe heisst:
     man merkt beim Seitenwechsel nichts. */
  --nav-hoehe:80px;
  --snav-frei:calc(var(--nav-hoehe) + 16px);
}
/* Kurzer Schirm (Handy im Querformat, flaches Browserfenster): 80px Leiste sind
   dort ein Fuenftel der Bildhoehe. 60px reichen — der Knopf ist 44px hoch, die
   Leiste bleibt damit die Leiste. */
@media(max-height:560px){
  :root{--nav-hoehe:60px}
}

/* ---------------------------------------------------------------- Leiste --- */
/* Buendig an der Oberkante, volle Breite, transparent — genau wie die Leiste
   der Startseite. Eine schwebende Pille war die erste Fassung und wurde
   verworfen: sie sitzt auf jeder Seite anders im Bild, sobald der Hero anders
   anfaengt, und bricht damit genau die Einheitlichkeit, um die es ging.
   Das Raster ist das der Startseite: Marke links, Navigation MITTIG, Aktionen
   rechts — nicht space-between, sonst wandert die Mitte mit der Textlaenge. */
.topnav{position:fixed;z-index:30;top:0;left:0;right:0;
  display:grid;grid-template-columns:minmax(120px,1fr) auto minmax(160px,1fr);
  align-items:center;gap:clamp(12px,2vw,32px);
  /* EIGENER Seitenrand, nicht der der Seite. Die Leiste steht beim Wechsel
     zwischen den Seiten still — sie ist das einzige Element, das der Besucher
     ueber den Wechsel hinweg im Blick behaelt, also darf sie sich als einzige
     nicht verschieben. Die Startseite rueckt ihren Inhalt mit
     clamp(24px,4.2vw,68px) ein, die Unterseiten mit clamp(22px,5vw,80px);
     gemessen sind das bei 1440px 60,5px gegen 72px — das Logo sprang bei jedem
     Wechsel um 12px zur Seite. Jetzt gilt fuer die Leiste ueberall die Kurve
     der Startseite. Preis: auf den Unterseiten steht das Logo ein Stueck
     weiter aussen als der Inhalt darunter. Ein stehendes Logo ist mehr wert
     als eine Kante, die ohnehin nur auf einer Breite exakt aufgeht. */
  height:var(--nav-hoehe);padding:0 var(--nav-page,clamp(24px,4.2vw,68px));
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .28s ease,border-color .28s ease,backdrop-filter .28s ease}
/* Erst wenn Inhalt darunter durchlaeuft, loest sich die Leiste sichtbar ab. */
.topnav.is-scrolled{background:var(--nav-bg,rgba(2,9,20,.94));
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--nav-linie,rgba(174,185,199,.16))}

.topnav__brand{display:inline-flex;align-items:center;width:clamp(104px,9vw,132px);justify-self:start}
/* Rueckfall WEISS auf dunklen Leisten (brightness(0) invert(1)).
   Vorgeschichte, damit das nicht im Kreis laeuft: hier stand zwischenzeitlich
   `none`, damit die Marke ueberall ihre Eigenfarben behaelt — Silberverlauf mit
   blauem Zug im X. Das Ziel dahinter war richtig (dieselbe Marke soll beim
   Seitenwechsel gleich aussehen), nur die Richtung ist eine andere: Basti hat
   den Verlauf in der Leiste am 26.07.2026 ausdruecklich verworfen
   („in blau sieht nicht so cool aus"). Also ueberall WEISS statt ueberall
   Eigenfarben — einheitlich bleibt es so oder so.
   Die hellen Seiten (websites.css, shops.css) setzen weiterhin bewusst
   --nav-logo:brightness(0) und legen die Marke geschlossen dunkel. */
.topnav__brand img{width:100%;height:auto;display:block;
  filter:var(--nav-logo,brightness(0) invert(1))}

.topnav__worlds{display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,2.4vw,38px);min-width:0}
.topnav__worlds a{position:relative;white-space:nowrap;text-decoration:none;padding:6px 0;
  font-size:.95rem;font-weight:560;color:var(--nav-ruhe,#9db0c4);transition:color .18s ease}
.topnav__worlds a:hover{color:var(--nav-hell,#f5f8fc)}
/* Unterstrich statt Fuellung: auf einer randlosen Leiste liest sich eine
   gefuellte Kachel wie ein Knopf — und daneben steht schon einer.
   Er folgt der Zeigerrichtung: --ul-ein ist die Seite, an der die Maus
   eintritt (dort waechst er los), --ul-aus die, an der sie hinausgeht (dorthin
   zieht er sich zusammen). Beide Werte setzt site-nav.js; ohne JS bleiben die
   Rueckfallwerte links/rechts, dann laeuft er wie frueher immer gleich.
   Uebernommen aus site.css der Startseite — gleiche Bedienung, gleiche Gefuehl. */
.topnav__worlds a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  border-radius:2px;background:var(--nav-akzent,#19bff4);
  transform:scaleX(0);transform-origin:var(--ul-aus,right) center;transition:transform .22s ease}
.topnav__worlds a:hover::after,.topnav__worlds a:focus-visible::after{transform:scaleX(1);
  transform-origin:var(--ul-ein,left) center}
.topnav__worlds a.is-current{color:var(--nav-hell,#f5f8fc)}
.topnav__worlds a.is-current::after{transform:scaleX(1);
  box-shadow:0 0 10px var(--nav-glow,rgba(25,191,244,.7))}

.topnav__actions{display:flex;align-items:center;justify-content:flex-end;
  gap:clamp(14px,1.6vw,24px);justify-self:end}
.topnav__lang{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  font:700 .72rem/1 "Geist Mono",monospace;letter-spacing:.08em}
.topnav__lang a{color:var(--nav-ruhe,#9db0c4);text-decoration:none;transition:color .15s}
.topnav__lang a:hover{color:var(--nav-hell,#f5f8fc)}
.topnav__lang a.is-current{color:var(--nav-akzent,#19bff4)}
.topnav__lang i{font-style:normal;opacity:.35}

.topnav__cta{display:inline-flex;align-items:center;flex:0 0 auto;height:44px;padding:0 22px;
  border-radius:999px;white-space:nowrap;text-decoration:none;
  background:var(--nav-akzent,#19bff4);color:var(--nav-akzent-text,#04222f);
  font-size:.9rem;font-weight:700;
  transition:color .15s ease,border-color .15s ease}
/* Uebernommen von der Startseite (.button--header in site.css, 26.07.):
   Zwei volle Cyan-Flaechen gleichzeitig konkurrieren — beide schreien gleich
   laut, also fuehrt keine. Der Knopf im Hero ist die gefuellte Flaeche, der in
   der Leiste ist deshalb dauerhaft der ruhigere: dunkel gefuellt, cyaner Rand,
   cyane Schrift. Der Grund ist DECKEND, nicht durchscheinend — sonst schiene
   der Glow, der dahinter liegt, mitten durch die Flaeche und wabert innen. */
/* Eckig, nicht als Pille: der Knopf der Startseite hat gar keinen Radius
   (.button in site.css deklariert keinen). Die Pille war die Erfindung der
   Unterseiten und genau der sichtbare Unterschied beim Seitenwechsel. */
/* Rand und Hover folgen dem Akzent der Seite, nicht fest Cyan: /shops faehrt
   Magenta (--nav-akzent), dort saehe ein cyaner Rand um magentafarbene Schrift
   nach Versehen aus. Die erste Zeile ist der Rueckfall fuer Browser ohne
   color-mix — sie bleiben beim Cyan von frueher, statt ganz ohne Rand
   dazustehen. */
.topnav__cta{height:48px;border-radius:0;
  background:var(--nav-cta-grund,#020914);color:var(--nav-akzent,#19bff4);
  border:1px solid rgba(25,191,244,.55);
  border-color:color-mix(in srgb,var(--nav-akzent,#19bff4) 55%,transparent)}
.topnav__cta:hover,.topnav__cta:focus-visible{color:#8fe3ff;
  color:color-mix(in srgb,var(--nav-akzent,#19bff4) 62%,#ffffff);
  border-color:var(--nav-akzent,#19bff4);
  /* KEIN Anheben per transform: transform erzeugt einen Stapelkontext, und dann
     malt der Glow (z-index:-1) ueber den Grund statt dahinter. Rueckmeldung
     tragen Rand und Schrift. */
  transform:none;background:var(--nav-cta-grund,#020914)}

/* Der Lichtimpuls um den Knopf — ebenfalls 1:1 von der Startseite.
   Zwei Ebenen hinter dem Knopf (z-index:-1), die nur 3px hervorstehen:
   sichtbar ist also allein der weichgezeichnete Saum. Die untere traegt den
   Farbkreis, die obere einen einzelnen hellen Bogen.
   Drei Farben, alle kalt — Magenta ist raus, damit der Saum nicht quer ueber
   den Farbkreis springt: #19bff4 Cyan, #0e3fb5 Deep Blue, #7c5cff Electric
   Purple. Erste und letzte Stufe gleich, sonst haette der Umlauf eine Naht.
   KREISEN statt SCHIEBEN: der Startwinkel des conic-gradient rotiert, das
   Licht laeuft also wirklich aussen herum. */
@property --cta-dreh{syntax:"<angle>";inherits:false;initial-value:0deg}
.topnav__cta::before,.topnav__cta::after{content:"";position:absolute;inset:-3px;z-index:-1;
  border-radius:inherit;filter:blur(8px);opacity:0;pointer-events:none}
.topnav__cta::before{
  background:conic-gradient(from var(--cta-dreh),#19bff4,#0e3fb5,#7c5cff,#19bff4,#0e3fb5,#7c5cff,#19bff4)}
.topnav__cta::after{
  background:conic-gradient(from var(--cta-dreh),
    rgba(124,92,255,0) 0deg,rgba(124,92,255,.85) 26deg,
    rgba(25,191,244,.9) 54deg,rgba(124,92,255,0) 88deg,
    rgba(124,92,255,0) 360deg)}
/* Gezuendet wird einmal, wenn der Abschluss ins Bild kommt — der Moment, in dem
   der Besucher am Ende ankommt. Bewusst dezent: nur der schmale Bogen (::after),
   kein dauerhaft leuchtender Vollring, kurze Lebensdauer statt Dauerschein.
   Die Klasse setzt site-nav.js; auf der Startseite macht das site-static.js zu
   ihrem eigenen Zeitpunkt. */
/* ---- Heller Kopf: der Chip dreht sich um -------------------------------
   Auf den hellen Seiten (/websites, /shops) war der dunkle Chip ein
   Fremdkoerper: eine navyblaue Insel auf weisser Leiste, direkt neben dem
   ebenfalls dunklen Logo — zwei dunkle Bloecke, von denen keiner mehr fuehrt.
   Ein blosser Umriss in Akzentfarbe waere die naheliegende Alternative und
   faellt aus: Cyan auf Weiss kommt auf 2,3:1, Schrift braucht 4,5:1.
   Deshalb gefuellt mit dem Akzent und dunkle Schrift darauf — dasselbe Prinzip
   wie auf Dunkel, nur andersherum: der Knopf ist die einzige volle Flaeche in
   der Leiste und bleibt damit das lauteste Element.
   Nachgemessen am fertigen Knopf, nicht geschaetzt:
     /websites  #00202e auf #19bff4  7,86:1   AA und AAA
     /shops     #2b0013 auf #ff2e88  5,39:1   AA (AAA verfehlt, 7:1 waere noetig)
     /software  #19bff4 auf #020914  9,32:1   AA und AAA (dunkle Fassung)
   Die 5,39 auf /shops reichen fuer eine Knopfbeschriftung; wer dort AAA will,
   muss --nav-akzent-text dunkler setzen — das ist eine Entscheidung in
   shops.css, nicht hier.
   Nach Klassen der Seiten geschnitten, nicht global: eine ungeschnittene Regel
   wuerde den hellen Knopf auf die dunklen Seiten ziehen. Wer eine neue helle
   Seite baut, setzt entweder body-Klasse oder ueberschreibt die drei Werte. */
body.web .topnav__cta,
body.shop .topnav__cta{
  background:var(--nav-akzent,#19bff4);
  color:var(--nav-akzent-text,#00202e);
  border-color:var(--nav-akzent,#19bff4)}
body.web .topnav__cta:hover,body.web .topnav__cta:focus-visible,
body.shop .topnav__cta:hover,body.shop .topnav__cta:focus-visible{
  background:var(--nav-akzent-hell,#43ccfb);
  color:var(--nav-akzent-text,#00202e);
  border-color:var(--nav-akzent-hell,#43ccfb)}
/* Kein Lichtsaum auf hellem Grund. Nachgemessen: er liegt hinter dem jetzt
   deckend gefuellten Knopf, ragt 3px hervor und ist weichgezeichnet — gegen
   eine fast weisse Leiste bleibt davon nichts uebrig, der Bildvergleich mit
   und ohne Impuls ist um den Knopf herum identisch. Ein Schein ist ein Mittel
   dunkler Oberflaechen; hier waere er zwei animierte Ebenen, die bei jedem
   Erreichen des Seitenendes umsonst gerechnet werden. */
body.web .topnav__cta::before,body.web .topnav__cta::after,
body.shop .topnav__cta::before,body.shop .topnav__cta::after{content:none}

.is-cta-glow .topnav__cta::after{filter:blur(5px);
  animation:ctaDreh 1.4s linear .8s 1.6,ctaGlowPulse 2.3s ease .8s forwards}
@keyframes ctaDreh{to{--cta-dreh:360deg}}
@keyframes ctaGlowPulse{0%{opacity:0}16%{opacity:.6}58%{opacity:.6}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .is-cta-glow .topnav__cta::after{animation:none}
}

/* Direkt oberhalb des Umschaltpunkts wurde es eng: bei 769px ragten die Welten
   GEMESSEN 15px in den Sprachumschalter hinein. Der Grund ist das Raster —
   die mittlere Spalte ist auto, die rechte bekommt den Rest und schiebt ihren
   Inhalt trotzdem nach links, wenn er nicht passt. Hier also alles eine Spur
   kompakter, bis wieder Luft da ist. */
@media(min-width:769px) and (max-width:900px){
  .topnav{padding:0 clamp(14px,2.4vw,80px);gap:12px}
  .topnav__brand{width:clamp(92px,8vw,132px)}
  .topnav__worlds{gap:16px}
  .topnav__worlds a{font-size:.9rem}
  .topnav__actions{gap:12px}
  .topnav__cta{height:40px;padding:0 16px;font-size:.85rem}
}

/* Mobil: Welten, Sprache und Knopf wandern ins Edge-Menue; in der Leiste bleibt
   die Marke. Der Burger liegt rechts aussen (edge-nav.css). */
@media(max-width:768px){
  :root{--nav-hoehe:64px}
  .topnav{grid-template-columns:auto 1fr}
  .topnav__worlds,.topnav__actions{display:none}
}
.is-edge-open .topnav{opacity:0;pointer-events:none;transition:opacity .2s ease}

/* ------------------------------------------------------- Punkt-Schiene --- */
.dotrail{position:fixed;z-index:28;right:clamp(8px,1.4vw,20px);top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-end;
  pointer-events:none}
.is-edge-open .dotrail{opacity:0;pointer-events:none;transition:opacity .2s ease}

.dotrail a{position:relative;display:flex;align-items:center;justify-content:flex-end;
  width:44px;height:42px;text-decoration:none;
  pointer-events:none;opacity:0;transform:translateX(12px);
  transition:opacity .32s ease,transform .44s cubic-bezier(.22,.7,.3,1)}
/* Jeder Punkt kommt, wenn SEIN Abschnitt erreicht ist — nicht alle nach einem
   Timer. Dadurch baut sich die Schiene mit dem Lesefortschritt auf und zeigt
   nebenbei, wie weit die Seite noch geht. Scrollt man zurueck, verschwinden
   sie in umgekehrter Reihenfolge, weil die Regel schlicht an der Scrollhoehe
   haengt. Die Klasse setzt site-nav.js. */
.dotrail a.is-da{pointer-events:auto;opacity:1;transform:none}

/* Groesse des Punktes als Variable, NICHT direkt im transform: die Welle
   animiert dieselbe Eigenschaft, und ohne die Variable wuerde sie den aktiven
   Punkt waehrend der Bewegung auf Normalgroesse zurueckziehen. */
.dotrail a{--sc:1}
.dotrail a:hover{--sc:1.25}
.dotrail a[aria-current="true"]{--sc:1.5}
/* --mx ist die Anziehung zum Zeiger (site-nav.js schreibt sie je Bild).
   Die Uebergangszeit fuer transform ist kuerzer als die der Farben: der Punkt
   soll dem Finger folgen, nicht hinterherschleifen. */
.dotrail a::after{content:"";width:7px;height:7px;border-radius:50%;margin-right:6px;
  background:var(--rail-ruhe,rgba(174,185,199,.34));
  transform:translateX(var(--mx,0px)) scale(var(--sc));
  transition:background-color .28s ease,box-shadow .28s ease,
             transform .18s cubic-bezier(.22,.7,.3,1)}
.dotrail a:hover::after{background:var(--rail-hell,#f5f8fc)}
.dotrail a[aria-current="true"]::after{background:var(--rail-akzent,#19bff4);
  box-shadow:0 0 12px var(--rail-glow,rgba(25,191,244,.85))}

/* Welle: die Punkte weichen wirklich aus, einer nach dem anderen — wie ein Ruck,
   der durch ein Seil laeuft. Statt eines einzelnen Ausschlags eine gedaempfte
   Schwingung (raus, zurueck, kleiner Nachschlag, Ruhe) — das liest sich als
   Bewegung mit Masse statt als Zucken.
   Die Anziehung --mx wird ADDIERT statt ueberschrieben, sonst wuerde ein Punkt
   unter dem Zeiger waehrend der Welle nach rechts zurueckspringen. */
@keyframes dotWelle{
  0%   {transform:translateX(calc(var(--mx,0px) + 0px))   scale(var(--sc))}
  26%  {transform:translateX(calc(var(--mx,0px) - 13px))  scale(var(--sc))}
  52%  {transform:translateX(calc(var(--mx,0px) + 2px))   scale(var(--sc))}
  74%  {transform:translateX(calc(var(--mx,0px) - 3.5px)) scale(var(--sc))}
  100% {transform:translateX(calc(var(--mx,0px) + 0px))   scale(var(--sc))}
}
.dotrail.is-welle a.is-da::after{
  animation:dotWelle .92s cubic-bezier(.25,.6,.3,1) calc(var(--i,0) * 95ms)}

/* Beschriftung faehrt beim Zeigen nach links aus — sie belegt keinen Platz,
   solange niemand sie braucht. */
.dotrail a b,.dotrail a span{position:absolute;right:20px;white-space:nowrap;
  opacity:0;transform:translateX(6px);pointer-events:none;
  transition:opacity .22s ease,transform .22s cubic-bezier(.22,.7,.3,1)}
.dotrail a b{display:none}
.dotrail a span{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;
  font-size:.8rem;font-weight:600;letter-spacing:.01em;
  color:var(--rail-hell,#f5f8fc);
  background:var(--rail-chip,rgba(7,17,31,.94));
  box-shadow:0 0 0 1px var(--pill-linie,rgba(174,185,199,.16)),0 10px 24px -12px rgba(0,0,0,.9)}
.dotrail a:hover span,.dotrail a:focus-visible span{opacity:1;transform:none}

/* Auf dem Handy entfaellt die Schiene ganz: die Abschnitte stehen dort im
   Menue, mit Namen und Nummer, und der aktive ist markiert. Zwei Anzeigen fuer
   dieselbe Sache am selben Rand — daneben noch der Menuegriff — waren eine
   Konkurrenz ohne Gewinn. Das JS laeuft weiter, es versorgt das Menue. */
@media(max-width:768px){
  .dotrail{display:none}

  /* Der Menuegriff sass bisher frei ueber dem Inhalt und wanderte beim Scrollen
     sogar UNTER die Leiste. Jetzt liegt er in der Leiste, senkrecht mittig auf
     deren Hoehe und buendig zur Seitenkante — dieselbe Achse wie das Logo. */
  .edge-handle,.nav-compact .edge-handle{
    top:calc(var(--nav-hoehe) / 2);
    right:var(--page,clamp(22px,5vw,80px));
    transform:translateY(-50%)}
  .is-edge-open .edge-handle{transform:translateY(-50%) translateX(-24px)}
}
/* Bei sehr flachen Fenstern (Querformat) waere die Schiene laenger als das
   Bild — dann lieber ganz weg als abgeschnitten. */
@media(max-height:520px){.dotrail{display:none}}

/* ------------------------------------------------ Mobilmenue: Ordnung --- */
/* Im Panel stehen zwei verschiedene Dinge: die Bereiche der Website und die
   Abschnitte DIESER Seite. Flach untereinander sahen sie gleichwertig aus.
   Getrennt wird ueber drei Mittel gleichzeitig — Zwischentitel, Haarlinie und
   Groesse. Die Groesse traegt die Hierarchie: Bereiche gross, Abschnitte klein
   mit Nummer. Damit ist der Unterschied auch ohne Lesen der Titel klar.

   Die Links bleiben DIREKTE Kinder von .edge-menu, sonst greifen die Regeln
   aus edge-nav.css (`.edge-menu>a`) nicht mehr — deshalb Zwischentitel als
   eigene Elemente dazwischen statt Gruppen-Container drumherum. */
@media(max-width:768px){
  /* safe center: bei kleinen Schirmen wird die Liste laenger als das Panel.
     Mit reinem `center` waere der Anfang dann nach oben aus dem scrollbaren
     Bereich geschoben und unerreichbar. */
  .edge-menu{justify-content:safe center;padding-bottom:96px}

  .edge-menu__gruppe{margin:0;padding:0 0 8px;
    font:700 .68rem/1 "Geist Mono",monospace;letter-spacing:.18em;text-transform:uppercase;
    /* Gemessen lag der Titel bei .5 nur bei 3,19:1 — als Text zu blass. */
    color:var(--menu-titel,rgba(174,185,199,.72));
    opacity:0;transform:translateX(18px);
    transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1)}
  .is-edge-open .edge-menu__gruppe{opacity:1;transform:none;transition-delay:.06s}
  .edge-menu__gruppe--zweit{margin-top:24px;padding-top:22px;
    border-top:1px solid var(--menu-linie,rgba(174,185,199,.16))}
  .is-edge-open .edge-menu__gruppe--zweit{transition-delay:.3s}

  /* Abschnitte: kleiner, mit derselben Nummer wie am Sektionskopf und in der
     Punkt-Schiene. Der aktive Abschnitt ist markiert — damit traegt das Menue
     dieselbe Information wie die Schiene auf dem Desktop. */
  /* Helligkeit: .72 war rechnerisch ausreichend, wirkte auf schwachen Displays
     aber wie ausgegraut. .88 haelt den Abstand zu den Seiten (volles Weiss)
     ueber Groesse und Gewicht, nicht ueber Blaesse — abgeblendete Schrift liest
     sich sonst als "nicht anklickbar". */
  .edge-menu>a.edge-menu__ab{display:flex;align-items:center;gap:13px;padding:9px 0;
    font-size:1.04rem;font-weight:600;letter-spacing:-.01em;
    color:var(--menu-ab,rgba(245,248,252,.88))}
  /* Die Nummer darf dunkler bleiben als die Beschriftung — aber nicht beliebig.
     Gemessen auf diesem Grund: .62 ergab 4,08:1 und lag damit unter den 4,5:1,
     ab denen kleiner Text als lesbar gilt. .74 bringt sie darueber. */
  .edge-menu>a.edge-menu__ab b{flex:0 0 auto;min-width:17px;
    font:700 .72rem/1 "Geist Mono",monospace;letter-spacing:.06em;
    color:var(--rail-akzent,#19bff4);opacity:.74;transition:opacity .2s ease}
  .edge-menu>a.edge-menu__ab[aria-current="true"]{color:var(--rail-akzent,#19bff4)}
  .edge-menu>a.edge-menu__ab[aria-current="true"] b{opacity:1}
}

/* Kurze Schirme (iPhone SE und Verwandte): gemessen lief die Liste dort um 30px
   ueber, der erste Zwischentitel wurde oben abgeschnitten und der Knopf landete
   auf dem Sprachumschalter. Scrollen allein loest das nicht — bei zentriertem
   Inhalt ist der ueberstehende Anfang nicht erreichbar. Also verdichten, bis
   alles hineinpasst: enger, nicht kleiner im Sinne von unlesbar. */
@media(max-width:768px) and (max-height:740px){
  .edge-menu{padding-bottom:34px}
  .edge-menu>a{padding:10px 0;font-size:1.32rem}
  .edge-menu>a.edge-menu__ab{padding:6px 0;font-size:.98rem}
  .edge-menu__gruppe{padding-bottom:6px}
  .edge-menu__gruppe--zweit{margin-top:14px;padding-top:14px}
  .edge-menu__cta{margin-top:18px}
  /* Der Sprachumschalter haengt sonst absolut am Panelboden — gemessen lag der
     Knopf dort 17px darueber. Auf kurzen Schirmen laeuft er einfach mit, dann
     kann sich nichts mehr ueberlagern. */
  .edge-menu__fuss{position:static;margin-top:20px;bottom:auto;left:auto}
}

.snav-an [id]{scroll-margin-top:var(--snav-frei)}

@media(prefers-reduced-motion:reduce){
  .topnav,.dotrail a,.dotrail a::after,.dotrail a span{transition:none}
  /* Keine Welle — die Punkte erscheinen weiterhin mit dem Scrollen, aber ohne
     Bewegung. Das Erscheinen selbst ist Information, kein Effekt. */
  .dotrail.is-welle a.is-da::after{animation:none}
}