/* server/cloud/server/t/seite.css — der Stil der Live-Seite. QS3: vorher
   inline in index.html, von der CSP (style-src 'self') gesperrt. */


/* Inter, selbst ausgeliefert. Keine fremde Herkunft, kein Nachladen. */
@font-face{font-family:'Inter';src:url('/vendor/Inter-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/vendor/Inter-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/vendor/Inter-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/vendor/Inter-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#1A1B17;
  /* Inter laeuft schmaler als die Vorlagenschrift; grosse Groessen
     brauchen etwas engere Laufweite, damit die Wirkung bleibt. */
  --surface:#26241C;
  --line:#332F26;
  --ink:#E8E8DC;
  --ink-dim:#C4C4B8;
  --taupe:#D4B892;
  --taupe-deep:#8C7355;
  --sand:#F5DEB8;
  --sage:#9DC9AC;
  --alarm:#D1614A;

  --display:'Inter',system-ui,sans-serif;
  --data:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--display);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
#app{height:100dvh;display:grid;grid-template-rows:auto 1fr auto auto}

/* ---------- Kopf ---------- */
.head{
  padding:calc(14px + env(safe-area-inset-top)) 20px 14px;
  border-bottom:1px solid var(--line);
  transition:background .5s ease;
}
.head[data-state="emergency"]{background:rgba(209,97,74,.14)}

.brand{
  display:flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--taupe-deep);font-weight:600;margin-bottom:14px;
}
.brand b{color:var(--taupe);font-weight:600}

.beat{display:flex;align-items:center;gap:18px}

/* Signatur: der Ring schlaegt bei jeder eintreffenden Position */
.ring{position:relative;flex:0 0 auto;width:52px;height:52px}
.ring i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--sage);opacity:.28}
.ring b{position:absolute;inset:18px;border-radius:50%;background:var(--sage);display:block;transition:background .4s ease}
.ring.hit i{animation:ping 1.6s cubic-bezier(.2,.7,.3,1)}
.ring.hit b{animation:thump .5s ease}
@keyframes ping{0%{transform:scale(.62);opacity:.85}100%{transform:scale(1.25);opacity:0}}
@keyframes thump{0%{transform:scale(1)}35%{transform:scale(1.42)}100%{transform:scale(1)}}
.head[data-state="stale"] .ring i{border-color:var(--taupe-deep)}
.head[data-state="stale"] .ring b{background:var(--taupe-deep)}
.head[data-state="ended"] .ring i{border-color:var(--taupe-deep)}
.head[data-state="ended"] .ring b{background:var(--taupe-deep)}
.head[data-state="emergency"] .ring i{border-color:var(--alarm);animation:ping 1.1s cubic-bezier(.2,.7,.3,1) infinite}
.head[data-state="emergency"] .ring b{background:var(--alarm)}

.say{font-weight:700;letter-spacing:-.02em;min-width:0;flex:1}
.status{letter-spacing:-.015em;font-size:clamp(20px,5.8vw,26px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:5px}
.since{font-family:var(--data);font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink-dim);font-variant-numeric:tabular-nums}

/* Weg von ... nach ... mit Fortschritt.
   Ersetzt den frueheren Pfeil - dieselbe Zeile, mehr Aussage.  */
.leg{
  display:none;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line);
}
.leg.show{display:block}
.legnames{
  display:flex;align-items:baseline;gap:10px;
  font-size:13px;color:var(--ink-dim);margin-bottom:9px;
}
.legnames span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legnames .to{color:var(--ink);margin-left:auto;text-align:right}

.track{position:relative;height:3px;border-radius:2px;background:var(--line)}
.track i{
  position:absolute;left:0;top:0;bottom:0;border-radius:2px;
  background:var(--taupe-deep);transition:width .8s ease;
}
.track b{
  position:absolute;top:50%;width:9px;height:9px;border-radius:50%;
  background:var(--sand);border:2px solid var(--bg);
  transform:translate(-50%,-50%);transition:left .8s ease;
}

.legfoot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:9px;
}
.legfoot em{
  font-family:var(--data);font-variant-numeric:tabular-nums;font-style:normal;font-size:11px;
  color:var(--taupe-deep);font-variant-numeric:tabular-nums;
}
.legfoot button{
  background:none;border:0;cursor:pointer;padding:2px 0;
  font-family:var(--data);font-variant-numeric:tabular-nums;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--taupe-deep);
  display:flex;align-items:center;gap:5px;
}
.legfoot button:hover{color:var(--taupe)}
.legfoot svg{width:11px;height:11px;transition:transform .25s ease}
.leg.open .legfoot svg{transform:rotate(180deg)}

.legmore{display:none;margin-top:14px}
.leg.open .legmore{display:block}
.offroute{
  font-size:13px;color:var(--ink-dim);margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
}
.offroute i{
  width:7px;height:7px;border-radius:50%;background:var(--sage);
  flex:0 0 auto;display:block;
}
.offroute.far i{background:var(--taupe)}

.note{
  margin-top:16px;padding:11px 14px;
  border-left:2px solid var(--alarm);background:rgba(209,97,74,.1);
  font-size:14px;line-height:1.45;display:none;
}
.head[data-state="emergency"] .note{display:block}

/* Im Notfall braucht der Rettungsdienst die Koordinate zum Vorlesen */
.coords{
  display:none;margin-top:10px;
  border:1px solid rgba(209,97,74,.4);border-radius:6px;
  overflow:hidden;
}
.head[data-state="emergency"] .coords{display:block}
.coords button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;background:rgba(209,97,74,.06);border:0;cursor:pointer;
  font-family:var(--data);font-variant-numeric:tabular-nums;font-size:15px;color:var(--ink);
  font-variant-numeric:tabular-nums;text-align:left;
}
.coords small{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--alarm);font-weight:600;flex:0 0 auto;
}

.battery{color:var(--taupe-deep)}
.battery.low{color:var(--alarm)}

.moving{
  display:none;margin-top:10px;padding:10px 14px;
  border-left:2px solid var(--sage);background:rgba(157,201,172,.1);
  font-size:14px;line-height:1.45;color:var(--ink);
}
.moving.show{display:block}


/* Anrufknopf - der erste Impuls des Empfaengers ist anzurufen */
.callrow{display:none;margin-top:14px}
.callrow.show{display:block}
.callrow a{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 14px;border-radius:6px;text-decoration:none;
  border:1px solid var(--line);background:var(--surface);
  color:var(--sand);font-size:15px;font-weight:600;
}
.head[data-state="emergency"] .callrow a{
  background:var(--alarm);border-color:var(--alarm);color:#1A1B17;
}
.callrow svg{width:17px;height:17px}

/* Was tun bei Funkstille - Ratlosigkeit ist hier das Problem */
.advice{
  display:none;margin-top:12px;padding:11px 14px;
  border-left:2px solid var(--taupe-deep);background:rgba(140,115,85,.12);
  font-size:13.5px;line-height:1.5;color:var(--ink-dim);
}
.head[data-state="stale"] .advice{display:block}

/* Tempoverlauf der letzten Minuten */
.spark{display:none;align-items:center;gap:10px}
.spark.show{display:flex}
.spark svg{flex:1;height:26px;overflow:visible}
.spark span{
  font-family:var(--data);font-variant-numeric:tabular-nums;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--taupe-deep);flex:0 0 auto;
}

/* Mehrere Fahrer: Umschaltleiste */
.riders{display:none;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.riders.show{display:flex}
.riders button{
  padding:6px 12px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line);background:none;color:var(--ink-dim);
  font-family:var(--display);font-size:13px;
}
.riders button.on{border-color:var(--taupe);color:var(--sand)}
.riders button i{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--sage);margin-right:6px;vertical-align:middle;
}
.riders button.alarm i{background:var(--alarm)}
.riders button.quiet i{background:var(--taupe-deep)}

/* Benachrichtigung erlauben */
.notify{
  background:none;border:0;cursor:pointer;margin-left:auto;
  font-family:var(--data);font-variant-numeric:tabular-nums;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--taupe-deep);
  text-decoration:underline;text-underline-offset:3px;padding:2px;
}
.notify:hover{color:var(--taupe)}
.notify[disabled]{text-decoration:none;cursor:default}

/* ---------- Karte ---------- */
/* Rueckfall fuer alte Browser und abgeschaltetes JavaScript */
.fallback{
  position:fixed;inset:0;z-index:60;background:var(--bg);
  display:none;place-items:center;padding:32px;text-align:center;
}
.fallback.show{display:grid}
.fallback h1{font-size:22px;font-weight:800;margin-bottom:10px}
.fallback p{color:var(--ink-dim);font-size:15px;line-height:1.55;max-width:34ch;margin:0 auto}
.fallback .mark{font-family:var(--data);font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--taupe-deep);margin-bottom:24px}
.fallback .lastpos{
  font-family:var(--data);font-variant-numeric:tabular-nums;font-size:15px;color:var(--sand);
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
}
noscript .fallback{display:grid}

.map-wrap{position:relative;background:var(--bg);min-height:34dvh}
#map{position:absolute;inset:0}
.maplibregl-ctrl-attrib{font-size:11px}

/* Kartenknoepfe: Norden und Zurueck-zum-Fahrer, untereinander */
.mapbtns{
  position:absolute;right:14px;bottom:14px;
  display:flex;flex-direction:column;gap:10px;
}
.mapbtn{
  width:46px;height:46px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);color:var(--taupe);
  display:none;place-items:center;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.45);
  padding:0;
}
.mapbtn.show{display:grid}
.mapbtn svg{width:22px;height:22px}
.mapbtn:hover{border-color:var(--taupe-deep)}
/* Die Nadel dreht sich mit der Karte und zeigt weiter nach Norden */
#compass svg{transition:transform .25s ease}
#recenter{color:var(--sand)}

.mapless{
  position:absolute;inset:0;display:grid;place-content:center;
  gap:6px;text-align:center;padding:24px;
}
.mapless p{color:var(--ink-dim);font-size:15px}
.mapless span{font-family:var(--data);font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe-deep)}

/* ---------- Rechtliches ---------- */
.legal{
  display:flex;justify-content:center;gap:14px;
  padding:9px 16px calc(9px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--bg);
}
.legal button{
  background:none;border:0;cursor:pointer;
  font-family:var(--data);font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:.08em;
  color:var(--taupe-deep);text-decoration:underline;
  text-underline-offset:3px;padding:4px 2px;
}
.legal button:hover,.legal button:focus-visible{color:var(--taupe)}

.sheet{
  position:fixed;inset:0;z-index:40;background:var(--bg);
  display:none;overflow-y:auto;
  padding:calc(22px + env(safe-area-inset-top)) 22px calc(40px + env(safe-area-inset-bottom));
}
.sheet.show{display:block}
.sheet .inner{max-width:52ch;margin:0 auto}
.sheet h1{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:22px}
.sheet h2{
  font-family:var(--data);font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--taupe);font-weight:600;margin:26px 0 8px;
}
.sheet p{font-size:15px;line-height:1.6;color:var(--ink-dim);margin-bottom:9px}
.sheet p b{color:var(--ink);font-weight:600}
.sheet a{color:var(--taupe);text-underline-offset:3px}
.close{
  position:sticky;top:0;float:right;
  width:40px;height:40px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-dim);
  display:grid;place-items:center;cursor:pointer;margin-bottom:4px;
}
.close svg{width:18px;height:18px}

.puck svg{width:26px;height:26px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.7));transition:transform .5s ease}
.pin{display:grid;place-items:center;filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}
.pin svg{width:22px;height:22px}

/* ---------- Ablesezeile ---------- */
.readout{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  border-top:1px solid var(--line);background:var(--surface);
}
.cell{padding:14px 10px 15px;text-align:center;border-left:1px solid var(--line)}
.cell:first-child{border-left:0}
.cell dt{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--taupe-deep);font-weight:600;margin-bottom:5px}
.cell dd{font-family:var(--data);font-variant-numeric:tabular-nums;font-weight:500;font-size:clamp(16px,4.6vw,20px);color:var(--sand);font-variant-numeric:tabular-nums}
.cell dd small{font-size:.6em;color:var(--ink-dim);margin-left:2px;font-weight:400}
.readout:empty{display:none}

/* ---------- Ganzseitige Zustaende ---------- */
.screen{position:fixed;inset:0;z-index:20;background:var(--bg);display:none;place-items:center;padding:32px;text-align:center}
.screen.show{display:grid}
.screen h1{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.screen p{color:var(--ink-dim);font-size:15px;line-height:1.55;max-width:34ch;margin:0 auto}
.screen .mark{font-family:var(--data);font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe-deep);margin-bottom:26px}
.spin{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--taupe);margin:0 auto 20px;animation:turn .9s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}

/* ---------- Breite Bildschirme ----------
   Am Telefon steht alles untereinander. Ab Tabletbreite wandert
   die Information in eine Spalte links, die Karte bekommt den Rest -
   sonst schwimmen fuenf Zahlen ueber zwei Meter Bildschirm.        */
@media (min-width:900px){
  #app{
    grid-template-columns:minmax(340px,410px) 1fr;
    grid-template-rows:auto 1fr auto;
  }
  .head{
    grid-column:1;grid-row:1;
    border-right:1px solid var(--line);
    padding-top:26px;
  }
  .readout{
    grid-column:1;grid-row:2;
    align-content:start;
    border-right:1px solid var(--line);
  }
  .cell{padding:16px 12px 17px}
  .legal{
    grid-column:1;grid-row:3;
    border-right:1px solid var(--line);
  }
  .map-wrap{grid-column:2;grid-row:1 / -1;border-left:0}
  .status{font-size:26px}
}

/* Kleine Telefone: Kopf und Ablesezeile gedraengter, damit die
   Karte nicht auf einen Streifen zusammenschrumpft.            */
@media (max-height:820px){
  .head{padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:12px}
  .brand{margin-bottom:11px}
  .ring{width:44px;height:44px}
  .ring b{inset:15px}
  .beat{gap:14px}
  .status{font-size:clamp(18px,5.2vw,22px)}
  .leg{margin-top:12px;padding-top:11px}
  .callrow{margin-top:10px}
  .callrow a{padding:10px 14px;font-size:14px}
  .cell{padding:10px 8px 11px}
  .cell dd{font-size:clamp(15px,4.2vw,18px)}
  .map-wrap{min-height:38dvh}
}

@media (prefers-reduced-motion:reduce){
  .ring.hit i,.ring.hit b,.head[data-state="emergency"] .ring i{animation:none}
  .spin{animation-duration:2.4s}
  .puck svg{transition:none}
}

/* ====================================================================
   STURZSEITE — der Baum fuer ?p=lat,lon
   ====================================================================

   Vorlage: docs/design/artboards/SturzSeite.dc.html, Zustand A.

   EIN EIGENER BAUM, NICHT DIE LIVE-ANSICHT MIT ANDEREN TEXTEN. Die
   Live-Seite ist um einen Datenstrom herum gebaut — Ring, der bei jeder
   Position schlaegt, Fortschrittsbalken, Etappenzeile. Hier gibt es
   keinen Datenstrom, und ein Ring, der nie schlaegt, ist eine Anzeige,
   die luegt. Die Vorlage hat deshalb eine andere Ordnung: Marke, Lage,
   Ort, Karte, Stand, Tun, Fuss.

   Die Karte teilen sich beide: derselbe #map-Behaelter wird in den
   Kartenbereich dieses Baums umgehaengt, damit es nicht zwei
   MapLibre-Instanzen gibt.
   ==================================================================== */
/* z-index 30: ueber dem Live-Baum (2 und 20), aber UNTER den Blaettern
   fuer Impressum und Datenschutz (40). Gleiche Ebene haette nur
   zufaellig funktioniert — dann entscheidet die Reihenfolge im
   Dokument, und die aendert sich beim naechsten Einfuegen. */
#sturz{display:none;position:fixed;inset:0;z-index:30;
  background:var(--bg);color:var(--ink);
  flex-direction:column;overscroll-behavior:none}
#sturz.show{display:flex}

/* F1b · T-06 „ENTWARNT" (Paket 8i). Salbei, nie Terrakotta; ohne Karte
   und ohne Position. Hell/dunkel nach System -- nur dieser Baum: die
   Live- und die Sturzansicht kennen bis heute nur dunkel. Werte aus
   docs/design/vorschlag/web/Angehoerige(.hell).dc.html, Rahmen T-06T. */
#entwarnt{display:none;position:fixed;inset:0;z-index:31;overflow:auto;
  --ew-bg:#1A1B17;--ew-ink:#E8E8DC;--ew-titel:#F5DEB8;--ew-dim:#C4C4B8;
  --ew-leise:#8B8878;--ew-karte:#26271F;--ew-linie:#33342A;--ew-punkt:#9DC9AC;
  background:var(--ew-bg);color:var(--ew-ink);
  padding:calc(14px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom))}
#entwarnt.show{display:block}
@media (prefers-color-scheme: light){
  #entwarnt{--ew-bg:#F2EEE4;--ew-ink:#1A1B17;--ew-titel:#1A1B17;--ew-dim:#4A4B3E;
    --ew-leise:#6B6A5E;--ew-karte:#FFFFFF;--ew-linie:#D9D3C4;--ew-punkt:#4F8A63}
}
.ew-innen{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.ew-marke{font-size:11px;letter-spacing:.16em;color:var(--ew-leise);font-weight:600}
.ew-kopf{display:flex;align-items:center;gap:12px;margin-top:14px}
.ew-punkt{width:14px;height:14px;border-radius:7px;background:var(--ew-punkt);flex:none}
.ew-titel{font-size:28px;font-weight:800;line-height:1.15;letter-spacing:-.015em;color:var(--ew-titel)}
.ew-lead{font-size:17px;color:var(--ew-dim);line-height:1.55;margin:-6px 0 4px}
.ew-karte{background:var(--ew-karte);border:1px solid var(--ew-linie);border-radius:18px;
  padding:22px;color:var(--ew-dim);line-height:1.5}
.ew-satz{color:var(--ew-dim);line-height:1.5}
.ew-en{color:var(--ew-leise);font-size:14px;border-top:1px solid var(--ew-linie);
  padding-top:10px;line-height:1.5}
.ew-fuss{color:var(--ew-leise);font-size:13px;margin-top:8px}
.ew-fuss button{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;
  min-height:44px;padding:0 4px;cursor:pointer}

.st-marke{flex:none;padding:calc(14px + env(safe-area-inset-top)) 18px 0;
  font-size:11px;letter-spacing:.16em;color:var(--taupe-deep);font-weight:600}
.st-lage{flex:none;padding:14px 18px 0}
/* R3g E9 (NF9b): der Beispiel-Notruf aus der App (&beispiel=1). Sand,
   nie Terrakotta -- es ist ausdruecklich KEIN Alarm. */
.st-beispiel{flex:none;margin:10px 18px 0;padding:9px 12px;border-radius:8px;
  border:1px solid #D9BE8C;background:rgba(217,190,140,.14);color:#D9BE8C;
  font-size:13px;font-weight:700;letter-spacing:.08em;line-height:1.35}
.st-beispiel[hidden]{display:none}
.st-art{font-size:26px;font-weight:700;line-height:1.15;color:var(--alarm)}
/* TERRAKOTTA NUR, WENN DIE MELDUNG EIN ALARM IST.
   Eine ausgebliebene Ankunft ist keiner, und die SMS unterscheidet das
   selbst: "CurveGuard NOTFALL: ..." gegen "CurveGuard: ... ist nicht wie
   angekuendigt angekommen". CLAUDE.md haelt Terrakotta fuer Alarm und
   Notfall frei -- wer sie hier auch fuer eine Beobachtung nimmt, nimmt
   ihr genau die Bedeutung, wegen der sie reserviert ist. */
#sturz[data-art="overdue"] .st-art{color:var(--ink)}
.st-wer{font-size:15px;color:var(--ink-dim);margin-top:6px}
/* Nur bei der Erinnerung: der Satz, den die SMS an dieser Stelle traegt.
   Ohne ihn waere die Seite fuer 'reminder' zeichengleich mit der fuer
   'emergency' -- und die Erinnerung sagt eine Sache mehr. */
.st-nachfass{font-size:15px;color:var(--ink);margin-top:8px;line-height:1.35}

.st-ort{flex:none;padding:16px 18px 0}
.st-cap{font-size:11px;letter-spacing:.14em;color:var(--taupe-deep);margin-bottom:5px}
/* Die Adresse ist der wichtigste Text der Seite — wer 112 waehlt, muss
   sagen koennen wohin. Sie darf umbrechen, aber nie ueberlaufen. */
.st-adr{font-size:19px;line-height:1.3;overflow-wrap:anywhere}
/* KONTRAST: diese Zahlen liest jemand der 112 vor, oft in schlechtem
   Licht und mit zitternder Hand. Gemessen gegen den Grund #1A1B17:
   --taupe-deep #8C7355 gibt 3,87:1 und liegt damit unter den 4,5:1, die
   WCAG AA fuer diese Schriftgroesse verlangt; --ink-dim #C4C4B8 gibt
   9,84:1. Die Vorlage schreibt hier #8B8878 (4,86:1) -- gerade eben
   darueber, und knapper, als es diese eine Zeile verdient.
   (Gerechnet, nicht geschaetzt: relative Leuchtdichte nach WCAG 2.1,
   der Rechenweg steht im Bericht ⑨-D.) */
.st-koord{font-size:14px;color:var(--ink-dim);margin-top:5px;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
/* SOLANGE KEINE ADRESSE DA IST, SIND DIE KOORDINATEN DER HAUPTTEXT.
   Leer bleibt hier nichts: faellt die Rueckwaertssuche aus, wachsen die
   Zahlen auf Adressgroesse, statt dass eine Zeile fehlt. */
#sturz[data-adresse="nein"] .st-adr{display:none}
#sturz[data-adresse="nein"] .st-koord{font-size:21px;color:var(--ink);margin-top:0}
/* R3a E1: Vorlage T-01T -- 15px, fett, Farbe der Koordinatenzeile. */
.st-bewegung{font-size:15px;font-weight:700;color:var(--ink-dim);margin-top:4px;
  font-variant-numeric:tabular-nums}

.st-karte{flex:1;min-height:0;margin:14px 0 0;position:relative;
  background:#22231C;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);overflow:hidden}
/* KEINE EIGENE OSM-ZEILE HIER. Sie stand bis 10.09. daneben und
   ueberlagerte sich mit MapLibres AttributionControl (unten rechts,
   angelegt bei der Karteneinrichtung). Die eingebaute ist die
   lizenzrechtlich richtige -- sie nennt zusaetzlich die Quellen des
   Stils -- und sie wandert mit dem Kartenbehaelter hierher. */

.st-stand{flex:none;padding:12px 18px 0;display:flex;align-items:flex-start;
  gap:8px;font-size:13px;color:var(--taupe-deep);line-height:1.45}
.st-punkt{width:8px;height:8px;border-radius:999px;flex:none;margin-top:5px;
  background:#6E6C60}

.st-tun{flex:none;padding:14px 18px calc(10px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:10px}
.st-knopf{display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;border-radius:14px;font-size:17px;font-weight:600;
  text-decoration:none;-webkit-tap-highlight-color:transparent}
/* ZUERST DIE PERSON, DANN DER NOTRUF (Vorlage, 10.09.2026).
   Der 112-Knopf ist nicht mehr die Hauptaktion. Er bleibt gross und mit
   vollem Tippziel -- nur leise: Rahmen statt Flaeche. Wer ihn braucht,
   findet ihn; wer zuerst anrufen sollte, wird nicht dorthin gezogen. */
.st-notruf{background:var(--alarm);color:#1A1B17}
.st-notruf.leise{background:none;border:1px solid #4A4B3E;
  color:var(--ink-dim);font-weight:500}
/* Der Platz des Rufknopfs der Vorlage, gefuellt mit einem Satz.
   Warum kein Knopf: die Seite kennt die Rufnummer nicht (siehe den
   Kommentar in .st-tun). Ein Satz, der wie ein Knopf aussieht und
   keiner ist, waere schlimmer als beides. */
.st-ruf{font-size:16px;line-height:1.35;color:var(--ink);
  background:rgba(217,190,140,.10);border-left:3px solid #D9BE8C;
  border-radius:6px;padding:12px 14px}
.st-hinw{text-align:center;font-size:13px;color:var(--ink-dim);
  margin:2px 0 -2px}
.st-zweit{border:1px solid #4A4B3E;color:var(--ink-dim);font-size:16px;
  font-weight:500;min-height:50px}
/* R3g E5 (T-01T/T-01D, Kanzlei N10): "Ich kuemmere mich" unter den
   Knoepfen -- Satz VOR dem Tippen, Knopf mit Rand, nie Terrakotta. Nur mit
   &c= (Code dieses Kontakts) und nur, wenn der Server den Alarm kennt. */
.st-kuemmern{border-top:1px solid var(--line);padding-top:12px;margin-top:2px;
  display:flex;flex-direction:column;gap:10px}
.st-kuemmern[hidden]{display:none}
.st-kuemmern-satz{font-size:14px;line-height:1.45;color:var(--ink-dim)}
.st-kuemmern button{width:100%;background:none;font-family:inherit;cursor:pointer}
.st-kuemmern button[disabled]{opacity:.6;cursor:default}
.st-kuemmern [hidden]{display:none}
.st-kuemmern-stand{font-size:16px;font-weight:600;color:var(--ink);line-height:1.35}

/* MASSSTAB UND RING -- Punkt 5.
   Der Marker der Vorlage ist zwei Kreise: r=26 mit 14% Deckung aussen,
   r=8 voll innen. Auf 64x64 uebertragen sitzt er masshaltig; .pin
   deckelt svg auf 22px und traegt den Ring deshalb nicht. */
.st-pin{display:grid;place-items:center;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}
.st-pin svg{width:64px;height:64px}

/* MAPLIBRES EIGENE BEDIENELEMENTE SIND FUER HELLEN GRUND GEBAUT.
   maplibre-gl.css gibt der Zuschreibung `hsla(0,0%,100%,.5)` und dem
   Massstab `hsla(0,0%,100%,.75)` mit `2px solid #333` — auf #1A1B17
   sind das zwei weisse Kaesten. Die Vorlage zeigt beides als leisen
   Text ohne Flaeche.

   NUR UNTER `#stKarte`, NICHT GLOBAL: derselbe `#map` steckt in der
   Live-Ansicht, und die traegt den weissen Zuschreibungskasten heute
   schon. Ihn dort mitzuaendern waere eine Aenderung, die ⑨-D nicht
   beauftragt hat — sie steht als Befund im Bericht. */
#stKarte .maplibregl-ctrl-attrib{background:none;color:#6E6C60;
  font-size:10px;padding:0 7px 5px 0}
#stKarte .maplibregl-ctrl-attrib a{color:#6E6C60}
#stKarte .maplibregl-ctrl-scale{background:rgba(26,27,23,.55);
  border:1px solid #6E6C60;border-top:none;color:var(--ink-dim);
  font-size:11px;font-variant-numeric:tabular-nums;
  margin:0 0 8px 10px;padding:1px 6px 2px}

.st-fuss{flex:none;text-align:center;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  font-size:11px;color:#6E6C60}
.st-fuss a{color:#6E6C60;text-decoration:none}

/* Grosse Systemschrift darf nichts abschneiden: die Karte gibt nach,
   die Knoepfe nie. */
@media (max-height:700px){
  .st-art{font-size:22px}
  .st-adr{font-size:17px}
  .st-karte{margin-top:10px}
}

/* QS3: vorher style-Attribute in index.html (von der CSP gesperrt) */
#icoAll{display:none}
.legal.legal-tot{border:0;background:none;margin-top:28px}