/*
  CurveGuard Live — Angehoerigenseite.

  GELESEN WIRD DAS AUF EINEM TELEFON, VON JEMANDEM, DER GERADE
  ERSCHROCKEN IST. Daraus folgt jede Entscheidung hier:

    * Grundschrift 18px, nicht 16. Ueberschrift 28px.
    * Knoepfe mindestens 60px hoch -- eine zittrige Hand trifft keine
      44px-Flaeche.
    * Kontrast durchweg ueber 7:1 gegen den Untergrund.
    * Systemschriften. KEINE Web-Schrift: eine Schrift, die aus dem Netz
      nachgeladen wird, ist ein fremder Empfaenger und im Funkloch
      ausserdem eine leere Seite.

  Hell und dunkel ueber prefers-color-scheme. Die Farben sind dieselben
  wie in der App (Terracotta #D1614A fuer den Notfall, Sand #F5DEB8),
  damit jemand, der beides sieht, es als dasselbe System erkennt.
*/

:root {
  --grund: #15151A;
  --flaeche: #1F1F26;
  --schrift: #F5DEB8;
  --schrift-leise: #D4B892;
  --linie: #3A3A44;
  --notfall: #D1614A;
  --gut: #7FB069;
  --auf-notfall: #FFFFFF;
}

@media (prefers-color-scheme: light) {
  :root {
    --grund: #FBF7EF;
    --flaeche: #FFFFFF;
    --schrift: #1A1A1A;
    --schrift-leise: #4A4A4A;
    --linie: #D8D0C0;
    --notfall: #A8341C;   /* dunkler als in der App: auf Weiss braucht */
    --gut: #2E6B1F;       /* Terracotta mehr Tiefe fuer 7:1 */
    --auf-notfall: #FFFFFF;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--grund);
  color: var(--schrift);
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.45;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/*
  Solange das Modul-Skript nicht gelaufen ist, ist nur die Alt-Tafel da.
  Umgekehrt: sobald es gelaufen ist, verschwindet die Tafel und die Seite
  steht sofort mit "Wird geladen ..." -- nie ein leerer Bildschirm
  dazwischen.
*/
html.js-an #alt { display: none; }
html.js-aus #seite,
html.js-aus #weg,
html.js-aus #stoerung { display: none; }

h1 { font-size: 28px; line-height: 1.2; margin: 0 0 12px; }
h2 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--schrift-leise);
  margin: 0 0 8px;
  font-weight: 600;
}

main { max-width: 40rem; margin: 0 auto; padding: 16px; }

/* ------------------------------------------------------------- Kopf */

.kopf {
  padding: 16px;
  border-radius: 14px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  margin-bottom: 14px;
}

.kopf.notfall {
  background: color-mix(in srgb, var(--notfall) 16%, var(--flaeche));
  border-color: var(--notfall);
  border-width: 3px;
}

.lage {
  margin: 0 0 6px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--schrift-leise);
}
.kopf.notfall .lage { color: var(--notfall); }

.wer  { font-size: 28px; margin: 0; }
.wann { margin: 6px 0 0; color: var(--schrift-leise); }

/* ---------------------------------------------------------- Knoepfe */

.handlungen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 2px solid var(--linie);
  background: var(--flaeche);
  color: var(--schrift);
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.knopf:focus-visible { outline: 3px solid var(--schrift); outline-offset: 2px; }
.knopf[disabled] { opacity: 0.55; cursor: default; }

.knopf-notruf {
  background: var(--notfall);
  border-color: var(--notfall);
  color: var(--auf-notfall);
  font-size: 20px;
}

.knopf-anruf   { border-color: var(--schrift); }
.knopf-kuemmern{ border-color: var(--gut); color: var(--gut); }

.knopf-still {
  min-height: 48px;
  font-weight: 500;
  font-size: 16px;
}

/* ----------------------------------------------------------- Karte */

.karte-huelle { margin-bottom: 14px; }

.karte {
  height: 44vh;
  min-height: 220px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--flaeche);
  border: 1px solid var(--linie);
}

/* Faellt die Karte aus, verschwindet auch ihr Platz -- eine leere graue
   Flaeche sieht aus wie ein Fehler, den man wegtippen koennte. */
.karte-huelle.ohne .karte { display: none; }

/* ------------------------------------------------------ Koordinaten */

.ort { margin-bottom: 14px; }

.koordinaten {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px;
  margin: 0 0 10px;
  user-select: all;
  -webkit-user-select: all;
  word-break: break-word;
}

/* ------------------------------------------------------------ Fahrt */

.fahrt { margin-bottom: 14px; }
.fahrt dl { margin: 0; }
.fahrt dt {
  font-size: 15px;
  color: var(--schrift-leise);
  margin-top: 10px;
}
.fahrt dd { margin: 2px 0 0; font-weight: 600; }

/* ---------------------------------------------------------- Hinweise */

.hinweis {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--schrift-leise);
}

.hinweis-gut {
  border-color: var(--gut);
  color: var(--gut);
  font-weight: 700;
}

/* ------------------------------------------------------------ Tafeln */

.tafel {
  max-width: 40rem;
  margin: 0 auto;
  padding: 24px 16px;
}

.tafel p { margin: 0 0 14px; }
.gross { font-size: 22px; }
.klein { font-size: 15px; color: var(--schrift-leise); }

/* -------------------------------------------------------------- Fuss */

.fuss {
  border-top: 1px solid var(--linie);
  padding-top: 12px;
  font-size: 15px;
  color: var(--schrift-leise);
}
.fuss a { color: var(--schrift-leise); }
.stand { margin: 0 0 8px; }

/* --------------------------------------------------------- Bewegung */

/*
  Der Notfallpunkt pulst. Wer die Systemeinstellung "weniger Bewegung"
  gesetzt hat, bekommt ihn statisch -- Bewegung ist hier Betonung, nicht
  Information, und Betonung darf man abschalten duerfen.
*/
@keyframes puls {
  0%   { transform: scale(1);    opacity: 1; }
  70%  { transform: scale(2.4);  opacity: 0; }
  100% { transform: scale(2.4);  opacity: 0; }
}

.punkt {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--schrift);
  border: 3px solid var(--grund);
  position: relative;
}

.punkt.notfall { background: var(--notfall); }

.punkt.notfall::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--notfall);
  animation: puls 1.8s ease-out infinite;
  z-index: -1;
}

.punkt-ziel {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: transparent;
  border: 3px solid var(--schrift-leise);
}

@media (prefers-reduced-motion: reduce) {
  .punkt.notfall::after { animation: none; opacity: 0.35; transform: scale(1.6); }
}