/* ===================================================================
   reifennotdienst.de — gemeinsames Stylesheet
   Stadtseiten, Autobahn- und Bundesstrassenseiten, Uebersichten,
   Partner- und Rechtsseiten laden diese Datei.

   Farben aus dem Logo entnommen: dunkles Marineblau und Signalorange.
   Eine Aenderung hier wirkt auf alle Seiten gleichzeitig.
   =================================================================== */

:root{
  --ink:#03122B;        /* Grundflaeche, aus dem Logo */
  --ink-2:#002557;      /* zweite Ebene */
  --card:#0A2A5C;       /* Karten auf dunkel */
  --edge:#17407E;       /* Kantenlinie */
  --edge-2:#245099;     /* Kantenlinie heller */
  --fg:#fff;
  --fg-2:#A9BFD8;
  --fg-3:#6E8CB0;
  --signal:#FD5900;     /* Signalorange, aus dem Logo */
  --signal-lt:#FF8534;
  --signal-dk:#C03F00;  /* kontraststark auf hellem Grund */
  --paper:#F5F6F8;      /* helle Abschnitte */
  --ink-light:#002557;  /* Schrift auf hell */
  --mute-light:#4A5866;
  --line:#DCE1E7;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* Die Kopfzeile klebt oben. Ohne diesen Abstand landet ein
     Ankersprung dahinter und das Ziel ist verdeckt. */
  scroll-padding-top:88px}
body{
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--ink);color:var(--fg);line-height:1.55;font-size:17px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:76px;          /* Platz fuer die Sticky-Leiste */
}
@media(min-width:900px){body{padding-bottom:0}}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
a{color:inherit}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:3px}
h1,h2,h3{font-variation-settings:'wdth' 112;letter-spacing:-.025em;line-height:1.08}
p{max-width:66ch}

/* ------------------------------------------------ Kopfzeile */
/* Die Kopfzeile ist immer dunkelblau -- auch ueber hellen Abschnitten.
   Dadurch steht das Logo auf jeder Seite auf demselben Untergrund, fuer
   den es gemacht ist, und kippt beim Scrollen nicht in die Unlesbarkeit. */
.top{background:var(--ink);border-bottom:1px solid rgba(255,255,255,.1);
  position:sticky;top:0;z-index:60;
  box-shadow:0 2px 18px rgba(0,0,0,.35)}
@supports (backdrop-filter:blur(10px)){
  .top{background:rgba(3,18,43,.94);backdrop-filter:blur(10px)}}
.top .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:14px;min-height:80px;padding-top:12px;padding-bottom:12px}
.logo{display:block;line-height:0;flex:none}
.logo img{height:54px;width:auto;display:block}
@media(max-width:560px){
  .logo img{height:46px}
  .top .wrap{min-height:70px;gap:10px}
}
@media(max-width:360px){.logo img{height:40px}}
.topnav{display:flex;align-items:center;gap:18px;font-size:14.5px}
.topnav a{color:var(--fg-2);text-decoration:none}
.topnav a:hover{color:var(--signal-lt)}
.topnav .tel{font-weight:800;color:#fff;font-variation-settings:'wdth' 112;
  font-size:16px;white-space:nowrap}
.topnav .tel:hover{color:var(--signal-lt)}
@media(max-width:620px){.topnav .hide-s{display:none}}
@media(max-width:400px){.topnav .tel{font-size:14.5px}}

/* Alte Textmarke bleibt als Rueckfall, falls ein Bild fehlt. */
.brand{font-weight:800;font-size:19px;text-decoration:none;color:#fff;
  font-variation-settings:'wdth' 118;letter-spacing:-.02em}
.brand span{color:var(--signal)}

/* ------------------------------------------------ Brotkrumen */
.crumb{font-size:13.5px;color:var(--fg-3);padding:18px 0 0;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.zurueck{display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:7px 14px 7px 11px;border-radius:980px;text-decoration:none;
  background:var(--card);border:1px solid var(--edge);color:var(--fg-2);
  font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:border-color .2s ease,color .2s ease}
.zurueck:hover{border-color:var(--signal);color:#fff}
.zurueck svg{width:13px;height:13px;flex:none}
.crumb .pfad{min-width:0}
@media(max-width:560px){.crumb .pfad{font-size:12.5px}}
.crumb a{color:var(--fg-2);text-decoration:none}
.crumb a:hover{color:var(--signal-lt)}
.crumb span{color:var(--fg-3)}

/* ------------------------------------------------ Hero */
/* Unterer Hero-Abstand bewusst knapp: er addiert sich zur Polsterung des
   folgenden Abschnitts. Zusammen ergab das vorher ein zu grosses Loch
   unter dem Notrufblock. */
.hero{position:relative;overflow:hidden;isolation:isolate;padding:40px 0 34px}
@media(min-width:900px){.hero{padding:62px 0 44px}}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(85% 65% at 80% 12%, rgba(253,89,0,.2), transparent 60%),
    radial-gradient(70% 90% at 95% 78%, rgba(23,64,126,.48), transparent 62%),
    linear-gradient(165deg,#04172F 0%,#03122B 60%,#04172F 100%)}
.hero .emblem{position:absolute;right:-7%;top:50%;transform:translateY(-50%);
  width:54%;max-width:680px;aspect-ratio:339/231;z-index:-1;opacity:.12;
  background:url("/assets/mark-hell.png") right center/contain no-repeat;
  pointer-events:none}
@media(max-width:900px){.hero .emblem{right:-24%;width:108%;opacity:.07;top:42%}}
.hero h1{font-size:clamp(30px,5.4vw,56px);font-weight:800;max-width:21ch}
/* Einordnung des Ortes, direkt unter der Überschrift */
.rolle{margin-top:10px;font-size:13px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--signal-lt)}
.hero .lede{color:var(--fg-2);font-size:clamp(16.5px,2vw,20px);
  margin-top:16px;max-width:52ch}

/* ------------------------------------------------ Notrufblock */
.callbox{margin-top:30px;background:rgba(10,42,92,.62);border:1px solid var(--edge);
  border-radius:20px;padding:26px 26px 28px;max-width:620px;
  backdrop-filter:blur(6px)}
.callbox .lbl{font-size:12.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--signal-lt);margin-bottom:8px}
.number{display:block;font-size:clamp(34px,7.4vw,56px);font-weight:800;
  font-variation-settings:'wdth' 122;letter-spacing:-.035em;line-height:1;
  color:#fff;text-decoration:none;white-space:nowrap}
.number:hover{color:var(--signal-lt)}
.callbox .hint{color:var(--fg-2);font-size:15px;margin-top:14px;max-width:48ch}
.btnrow{display:flex;gap:11px;flex-wrap:wrap;margin-top:20px}
.btnrow.center{justify-content:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:17px 30px;border-radius:980px;font-weight:800;font-size:17px;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  font-family:inherit;line-height:1.2;text-align:center;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn-signal{background:var(--signal);color:#1A0800;box-shadow:0 13px 32px rgba(253,89,0,.3)}
.btn-signal:hover{background:var(--signal-lt)}
.btn-ghost{border-color:var(--edge-2);color:var(--fg);background:rgba(10,42,92,.5)}
.btn-ghost:hover{border-color:var(--signal);color:var(--signal-lt)}
.btn-ink{background:var(--ink-2);color:#fff}
.btn-ink:hover{background:var(--card)}
.btn.busy{opacity:.7;pointer-events:none}
@media(max-width:560px){.btn{width:100%;padding:17px 18px}}

/* Hinweis zur Standortfreigabe, wird per JS eingeblendet */
.loc-note{margin-top:13px;font-size:13.5px;color:var(--fg-3);max-width:44ch;
  display:none;line-height:1.55}
.loc-note.on{display:block}
.loc-note.err{color:#FFB38A}

/* ------------------------------------------------ Abdeckungszeile */
.cover{margin-top:22px;display:inline-flex;align-items:center;gap:10px;
  font-size:14.5px;padding:10px 18px;border-radius:980px;border:1px solid}
.cover::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.c-voll{color:#9FE6BE;border-color:rgba(60,200,130,.4);background:rgba(60,200,130,.1)}
.c-voll::before{background:#3CC882}
.c-teil{color:#FFD79F;border-color:rgba(253,160,0,.4);background:rgba(253,160,0,.1)}
.c-teil::before{background:#FDA000}
.c-keine{color:var(--fg-2);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05)}
.c-keine::before{background:var(--fg-3)}

/* ------------------------------------------------ Abschnitte */
section{padding:54px 0}
@media(min-width:900px){section{padding:78px 0}}
section h2{font-size:clamp(25px,3.7vw,38px);font-weight:800;max-width:22ch}
section > .wrap > p{color:var(--fg-2);margin-top:14px}
.eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--signal-lt);margin-bottom:12px}
.lede{color:var(--fg-2)}
.rh{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3);margin:26px 0 12px}

/* helle Abschnitte */
.light{background:var(--paper);color:var(--ink-light)}
.light h2,.light h3{color:var(--ink-light)}
.light .eyebrow{color:var(--signal-dk)}
.light p,.light .lede,.light > .wrap > p{color:var(--mute-light)}

/* ------------------------------------------------ Streckenschilder */
.hw{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.hwi{display:inline-flex;align-items:center;justify-content:center;
  min-width:62px;padding:11px 16px;border-radius:11px;text-decoration:none;
  background:var(--card);border:1px solid var(--edge);color:#fff;
  font-weight:800;font-size:15.5px;font-variation-settings:'wdth' 112;
  transition:border-color .2s ease,transform .2s ease,background .2s ease}
.hwi:hover{border-color:var(--signal);transform:translateY(-2px);background:var(--ink-2)}
.hwi b{font-weight:800}

/* ------------------------------------------------ Karten */
.cards{display:grid;gap:14px;grid-template-columns:1fr;margin-top:28px}
@media(min-width:620px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cards{grid-template-columns:repeat(4,1fr)}}
.cards.c3{grid-template-columns:1fr}
@media(min-width:620px){.cards.c3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cards.c3{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card);border:1px solid var(--edge);border-radius:16px;
  padding:23px 21px;transition:border-color .25s ease,transform .25s ease}
.card:hover{border-color:var(--signal);transform:translateY(-3px)}
.card h3{font-size:18.5px;font-weight:800;margin-bottom:8px}
.card p{font-size:15px;color:var(--fg-2);max-width:none}
.card.todo{border-style:dashed;border-color:var(--signal-dk);opacity:.85}
.light .card{background:#fff;border-color:var(--line)}
.light .card:hover{border-color:var(--signal)}
.light .card p{color:var(--mute-light)}

/* Icon in den Fahrzeugkarten */
.card .ic{width:42px;height:42px;margin-bottom:14px;display:block}
.card .tag{margin-top:12px;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--signal-lt)}
.light .card .tag{color:var(--signal-dk)}

/* ------------------------------------------------ Ablaufschritte */
.steps{counter-reset:s;display:grid;gap:1px;background:var(--edge);
  border:1px solid var(--edge);border-radius:16px;overflow:hidden;margin-top:30px}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}
.st{background:var(--ink-2);padding:25px 21px;counter-increment:s}
.st::before{content:counter(s);display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--signal);color:#1A0800;
  font-size:14px;font-weight:800;margin-bottom:14px}
.st h3{font-size:17px;font-weight:800;margin-bottom:7px}
.st p{font-size:14.5px;color:var(--fg-2);max-width:none}
.light .steps{background:var(--line);border-color:var(--line)}
.light .st{background:#fff}
.light .st p{color:var(--mute-light)}

/* ------------------------------------------------ Zweispalter */
.split{display:grid;gap:16px;grid-template-columns:1fr;margin-top:30px}
@media(min-width:820px){.split{grid-template-columns:1fr 1fr}}
.pane{background:var(--card);border:1px solid var(--edge);border-radius:16px;padding:28px}
.pane h3{font-size:21px;font-weight:800;margin-bottom:10px}
.pane p{font-size:16px;color:var(--fg-2);max-width:none}
.pane ul{margin:15px 0 21px;padding-left:19px;font-size:15.5px;color:var(--fg-2)}
.pane li{margin-bottom:7px}
.pane li::marker{color:var(--signal)}
.light .pane{background:#fff;border-color:var(--line)}
.light .pane p,.light .pane ul{color:var(--mute-light)}

/* ------------------------------------------------ Sicherheitsablauf */
.safe{background:linear-gradient(180deg,#04172F,#03122B)}
.safe ol{counter-reset:x;list-style:none;margin-top:26px;max-width:64ch}
.safe li{counter-increment:x;position:relative;padding-left:46px;
  margin-bottom:18px;color:var(--fg-2);font-size:16.5px}
.safe li::before{content:counter(x);position:absolute;left:0;top:-1px;
  width:30px;height:30px;border:1.5px solid var(--signal);color:var(--signal-lt);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800}
.safe li b{color:#fff;font-weight:700}
.safe .after{margin-top:24px;font-size:14.5px;color:var(--fg-3);
  border-left:2px solid var(--edge);padding-left:16px}

/* ------------------------------------------------ Fragen */
.faq{margin-top:26px;max-width:800px;border-top:1px solid var(--edge)}
.faq details{border-bottom:1px solid var(--edge)}
.faq summary{padding:18px 0;font-weight:700;font-size:17px;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:400;color:var(--signal-lt);
  flex:none;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:18px;font-size:16px;color:var(--fg-2)}
.light .faq{border-color:var(--line)}
.light .faq details{border-color:var(--line)}
.light .faq summary::after{color:var(--signal-dk)}
.light .faq details p{color:var(--mute-light)}

/* ------------------------------------------------ Ortsliste */
.near{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.near a{display:inline-block;padding:10px 17px;border-radius:980px;
  background:var(--card);border:1px solid var(--edge);color:var(--fg-2);
  text-decoration:none;font-size:15px;
  transition:border-color .2s ease,color .2s ease,transform .2s ease}
.near a:hover{border-color:var(--signal);color:#fff;transform:translateY(-2px)}
.light .near a{background:#fff;border-color:var(--line);color:var(--ink-light)}
.muted{color:var(--fg-3)}

/* ------------------------------------------------ Abschluss */
.final{background:linear-gradient(135deg,var(--signal) 0%,#D44C00 100%);
  color:#1A0800;text-align:center}
.final h2{margin:0 auto 12px;max-width:19ch;color:#1A0800}
.final p{margin:0 auto 20px;max-width:48ch;color:#3A1C00}
.final .number{color:#1A0800;margin:0 auto 18px}
.final .number:hover{color:#fff}
.final .loc-note{margin-left:auto;margin-right:auto;color:#3A1C00}
.final .loc-note.err{color:#5A2A00}

/* ------------------------------------------------ Fusszeile */
footer{background:var(--ink);color:var(--fg-3);font-size:14px;padding:40px 0;
  border-top:1px solid rgba(255,255,255,.08)}
footer a{color:var(--fg-2);text-decoration:none}
footer a:hover{color:var(--signal-lt)}
.fg{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.fg .flogo{height:54px;width:auto;margin-bottom:14px;display:block}
footer .note{max-width:68ch;margin-top:16px;font-size:12.5px;line-height:1.7}

/* ------------------------------------------------ Sticky-Leiste mobil */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;
  box-shadow:0 -10px 30px rgba(0,0,0,.45)}
@media(min-width:900px){.sticky{display:none}}
.sticky a{flex:1;text-align:center;padding:17px 8px;font-weight:800;font-size:16px;
  text-decoration:none;display:flex;align-items:center;justify-content:center}
.s-call{background:var(--signal);color:#1A0800}
.s-wa{background:var(--ink-2);color:#fff;flex:0 0 46%;
  border-left:1px solid rgba(255,255,255,.12)}

/* ------------------------------------------------ Einblenden beim Scrollen
   Nur wenn JavaScript laeuft (html.js). Ohne JavaScript -- abgeschaltet,
   blockiert, Skript fehlgeschlagen -- bleibt der Inhalt sichtbar, statt
   unsichtbar auf opacity:0 zu stehen. */
.js .rv{opacity:0;transform:translateY(22px)}
.js .rv.in{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,.8,.3,1),
             transform .7s cubic-bezier(.22,.8,.3,1)}
@media(prefers-reduced-motion:reduce){
  .js .rv,.js .rv.in{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ------------------------------------------------ Uebersichtsraster */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  margin-top:28px}
.gi{display:block;background:var(--card);border:1px solid var(--edge);
  border-radius:14px;padding:17px 19px;text-decoration:none;color:#fff;
  transition:border-color .22s ease,transform .22s ease}
.gi:hover{border-color:var(--signal);transform:translateY(-3px)}
.gi b{display:block;font-size:17px;font-weight:800;font-variation-settings:'wdth' 112}
.gi span{display:block;font-size:13px;color:var(--fg-3);margin-top:4px}
.light .gi{background:#fff;border-color:var(--line);color:var(--ink-light)}
.light .gi span{color:var(--mute-light)}

/* Textseiten (Impressum, AGB, Datenschutz) */
.doc{max-width:760px}
.doc h2{font-size:24px;margin:36px 0 12px}
.doc h3{font-size:18.5px;margin:26px 0 8px}
.doc p,.doc li{color:var(--fg-2);font-size:16.5px}
.doc ul,.doc ol{margin:14px 0 18px;padding-left:21px}
.doc li{margin-bottom:7px}
.doc li::marker{color:var(--signal)}
.doc .ph{background:rgba(253,89,0,.12);border:1px dashed var(--signal-dk);
  border-radius:11px;padding:16px 18px;margin:20px 0;font-size:15px;color:#FFD2B5}
.light .doc p,.light .doc li{color:var(--mute-light)}

/* ------------------------------------------------ Logo-Animation
   Die Buehne hat ein festes Seitenverhaeltnis, damit beim Laden
   nichts springt. --sbg steuert die Flaechen, die das SVG selbst
   ausspart (Profilrillen, Kontur der Lautmalerei). */
/* Kein Kasten und kein Rahmen: die Animation soll Teil des Abschnitts
   sein, nicht wie ein eingeklebtes Video wirken. --sbg muss exakt der
   Abschnittsfarbe entsprechen -- das SVG spart damit Profilrillen und
   die Kontur der Lautmalerei aus. */
.anim .stage{--sbg:#F5F6F8;background:transparent;border:0;
  aspect-ratio:16/10;max-width:900px;margin:22px auto 0;
  display:grid;place-items:center;overflow:visible;cursor:pointer}
.anim .stage svg{width:100%;height:auto;display:block;overflow:visible}
.anim .stage[data-playing]{cursor:default}
/* Die Strasse laeuft bis an den Rand, statt an einer Kante abzubrechen. */
.anim{overflow:hidden}
.anim .pss{font-family:'Archivo',system-ui,sans-serif;font-style:italic;
  font-weight:800;font-variation-settings:'wdth' 80}
.anim .ui{font-family:'Archivo',system-ui,sans-serif;font-weight:500}
.anim .ui.b{font-weight:700}

/* ------------------------------------------------ Europakarte
   Orange = Partnernetz vorhanden, Blaugrau = Nachbarland ohne Netz.
   Die beiden Stufen muessen klar unterscheidbar bleiben: gleiche Farbe
   waere eine Abdeckungsbehauptung, die nicht stimmt. */
.karte{background:var(--paper);color:var(--ink-light)}
.karte h2,.karte .lede b{color:var(--ink-light)}
.karte .eyebrow{color:var(--signal-dk)}
.karte .lede{color:var(--mute-light)}
.kgrid{display:grid;gap:28px;grid-template-columns:1fr;margin-top:26px;
  align-items:center}
@media(min-width:900px){.kgrid{grid-template-columns:1.05fr .95fr;gap:40px}}
.kmap{min-width:0}
.eu{width:100%;height:auto;display:block}
.eu .k{fill:#E3E7EC;stroke:var(--paper);stroke-width:1}
.eu .anfrage{fill:#C3D0E0;stroke:var(--paper);stroke-width:1.2;
  transition:fill .2s ease}
.eu .netz{fill:var(--signal);stroke:var(--paper);stroke-width:1.4;
  transition:fill .2s ease}
.eu a:hover .netz{fill:var(--signal-lt)}
.eu a:hover .anfrage{fill:#AFC0D4}
.eu a{cursor:pointer}
.legende{list-style:none;margin:22px 0 0;padding:0}
.legende li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;
  margin-bottom:16px;align-items:start}
.legende i{width:18px;height:18px;border-radius:5px;display:block;
  margin-top:3px;grid-row:span 2}
.legende .sw.netz{background:var(--signal)}
.legende .sw.anfrage{background:#C3D0E0}
.legende b{font-size:16px;font-weight:800;color:var(--ink-light)}
.legende span{font-size:15px;color:var(--mute-light)}
.kg{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-top:24px}
.karte .gi{background:#fff;border-color:var(--line);color:var(--ink-light)}
.karte .gi span{color:var(--mute-light)}

/* ------------------------------------------------ Verweis auf die
   Schwesterseite. Normaler Abschnitt, kein Werbebanner -- der Hinweis
   gehört zum Inhalt, nicht neben ihn. */
.vorort .lede p + p{margin-top:14px}
.vorort .lede a{color:var(--signal-dk);font-weight:700}
.vorort .lede a:hover{color:var(--signal)}

/* ------------------------------------------------ Sprachumschalter
   Reines <details> ohne JavaScript. Es wird nichts an Dritte gesendet,
   bevor der Besucher einen Eintrag anklickt. */
.spr{position:relative;flex:none}
.spr summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  list-style:none;padding:8px 12px;border-radius:980px;
  border:1px solid var(--edge-2);color:var(--fg-2);font-size:13.5px;
  transition:border-color .2s ease,color .2s ease}
.spr summary::-webkit-details-marker{display:none}
.spr summary:hover{border-color:var(--signal);color:#fff}
.spr summary svg{width:15px;height:15px;flex:none}
.spr summary b{font-weight:800;letter-spacing:.04em}
.sprbox{position:absolute;right:0;top:calc(100% + 10px);z-index:70;
  width:min(300px,86vw);background:var(--ink-2);
  border:1px solid var(--edge);border-radius:14px;padding:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.5)}
.sprhint{font-size:12.5px;color:var(--fg-3);line-height:1.5;margin-bottom:12px}
.sprbox ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:2px}
.sprbox a{display:block;padding:8px 10px;border-radius:8px;
  text-decoration:none;color:var(--fg-2);font-size:14px}
.sprbox a:hover{background:var(--card);color:#fff}
/* Auf schmalen Geräten breiter, aber weiterhin absolut positioniert.
   position:fixed geht hier NICHT: .top hat backdrop-filter, und das
   macht die Kopfzeile zum Bezugsrahmen für fixierte Kinder -- das Menü
   landete dann oberhalb des Bildschirms. */
@media(max-width:560px){
  .sprbox{width:calc(100vw - 24px);right:-12px;
    max-height:min(60vh,420px);overflow-y:auto}
  .sprbox ul{grid-template-columns:1fr 1fr}
}