/* SOS-App: was NUR diese App braucht.
   Alles Gemeinsame steht in /app/basis.css und wird davor geladen: Farbtokens,
   Raster, Kopfzeile, Umschalter, Karten, Knoepfe, Werbebanner, Begruessung,
   Fusszeile, Bewegung. */

:root {
  /* Der Notfallton. Eigener Name, damit er nichts aus der Basis ueberschreibt.
     Bewusst NICHT --warn aus der Basis: der markiert dort veraltete Daten, und
     ein Ton, der zwei Dinge sagt, sagt keines davon deutlich. */
  --sos-rot:      #c02626;
  --auf-sos-rot:  #ffffff;
  /* Der Ton fuer "es hat geklappt": Standort gefunden, Adresse kopiert. */
  --sos-gut:      #17864a;
  /* Flaeche der Standortkarte. Etwas kraeftiger als eine normale Karte, weil
     sie die einzige ist, die immer sichtbar bleibt. */
  --sos-feld:     #eaf6fb;
  --sos-feld-rand:#b6e0f0;

  /* Abgedunkeltes PIG-Blau fuer kleine Schrift und gefuellte Pillen.
     GEMESSEN, nicht geschaetzt: Weiss auf #0091c8 kommt auf 3,57:1 und die
     Rufnummer in #0091c8 auf Weiss ebenfalls. Beides liegt unter dem Minimum
     von 4,5:1 fuer Text unter 18,66 px. Dieselbe Rechnung steht in
     app/basis.css bei .btn-stand, dort geloest mit einer dunklen Auflage.
     Hier ist es derselbe Ton als eigenes Merkmal: 6,5:1 statt 3,6:1. */
  --sos-blau-satt: #00648c;
  --sos-nummer:    #00648c;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* PAARWEISE mitziehen. @media erhoeht die Spezifitaet nicht: wer nur den
       Hellwert setzt, hat den Dunkelmodus kaputtgemacht und merkt es nachts am
       Standstreifen, also genau dann, wenn es zaehlt. */
    --sos-rot:      #e5484d;
    /* Im Dunkeln ist das Rot ein helles Lachsrot, darauf ist Weiss unlesbar
       (gemessen 3,91:1, und der Untertitel steht bei 12,5 px). Deshalb wandert
       die Schriftfarbe mit, genau wie bei --warn in der Basis: dunkel auf hell
       ergibt 4,8:1. */
    --auf-sos-rot:  #10131a;
    --sos-gut:      #3ddc84;
    --sos-feld:     #12212a;
    --sos-feld-rand:#1d3d4d;

    /* Die Pille bleibt satt (Weiss darauf 6,5:1), die Rufnummer wird hell:
       #00648c waere auf dunklem Grund selbst zu dunkel. */
    --sos-blau-satt: #00648c;
    --sos-nummer:    #38bdf8;
  }
}

/* Kopf, Sperre, Standort, Teilen, Bereichswahl, Minifilter, Liste, Banner, Fuss.
   Die Zahl der Zeilen muss zur Zahl der Kinder passen, sonst entsteht eine
   Zusatzzeile und der Fuss rutscht aus dem Bild. Die Liste bekommt den Rest. */
.app { grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto; }

/* ---------- Kurze Rueckmeldung ----------

   Fuer Dinge, die sonst unsichtbar passieren (Manni, 30.07.2026: beim
   Aktualisieren "hab nicht das Gefuehl, dass etwas passiert"). Bewusst kurz und
   bewusst OBEN: unten liegen die Rufnummern, und nichts darf sich davorlegen.
   Sie faengt auch keine Tipps ab, pointer-events ist aus. */

.toast {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 90;
  max-width: calc(100% - 32px);
  padding: 8px 16px;
  border-radius: 999px;
  background: #10131a;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .38);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.toast.da { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-color-scheme: dark) {
  .toast { background: #f2f4f7; color: #10131a; }
}

/* ---------- Anrufsperre ----------

   Schuetzt vor dem versehentlichen Notruf. Sie erbt Form und Verhalten von
   .kippzeile aus app/basis.css, nur die Farbe ist eigen: ZU ist rot, denn das
   ist der Zustand, in dem ein Tipp auf eine Nummer nichts tut, und das muss man
   sofort sehen. Auf ist gruen, weil Gruen in dieser Familie ueberall "geht"
   heisst. */

.sperre { min-height: 42px; padding: 0 12px; gap: 10px; }
.sperre .kz-titel { font-size: 15px; }
.sperre .kz-unter { font-size: 12px; }
/* Dasselbe Zeichen wie an jeder gesperrten Nummer in der Liste. Der
   Wiedererkennungswert ist der Zweck: wer unten auf ein Schloss tippt, sucht
   oben nach demselben Zeichen. */
.sp-schloss { flex: none; font-size: 19px; line-height: 1; }

/* ZU: roter Rahmen, roter Schalter. */
.sperre[aria-checked="false"] { border-color: var(--sos-rot); }
.sperre[aria-checked="false"] .kz-titel { color: var(--sos-rot); }
.sperre[aria-checked="false"] .kippe { background: var(--sos-rot); }

/* AUF: gruen. Der Knopf im Schalter wandert nach rechts, das erledigt die Basis
   ueber [aria-checked="true"]. */
.sperre[aria-checked="true"] { border-color: var(--sos-gut); }
.sperre[aria-checked="true"] .kz-titel { color: var(--sos-gut); }
.sperre[aria-checked="true"] .kippe { background: var(--sos-gut); }

/* ---------- Standort ----------

   DIE WICHTIGSTE FLAECHE DER APP (Manni, 30.07.2026: "muss viel praesenter zu
   sehen sein"). Sie beantwortet die erste Frage und liefert das, was man am
   Telefon sagt.

   REIHENFOLGE IST DER KERN DER AENDERUNG: oben die ADRESSE im Klartext, darunter
   Ort, darunter erst die Koordinaten. Vorher standen die Koordinaten gross oben,
   und das war falsch herum: "Weiherstraße 44" versteht eine Leitstelle sofort,
   "49.37620 N" muss man buchstabieren. Die Koordinaten bleiben aber sichtbar,
   denn auf der Autobahn oder im Wald gibt es keine Hausnummer. */

.ort {
  padding: 9px 13px 10px;
  border-radius: 16px;
  background: var(--sos-feld);
  border: 2px solid var(--sos-feld-rand);
  min-width: 0;
}

/* Ueberschriftzeile: Ansage links, Aktualisieren rechts. */
.ort-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
}

/* Die Ansage. Kurz und in Versalien: sie sagt, was gleich kommt. */
.ort-frage {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--sos-nummer);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Standort neu bestimmen. Klein, aber mit ausreichender Trefferflaeche: 28 px
   hoch plus die Luft der Zeile daneben. */
.ort-neu {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 10px;
  border: 2px solid var(--sos-feld-rand);
  border-radius: 999px;
  background: var(--karte);
  color: var(--sos-nummer);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.on-zeichen { font-size: 14px; line-height: 1; }

/* Waehrend gesucht wird, dreht sich das Zeichen. Das ist die einzige Bewegung
   auf diesem Bildschirm ausser dem Werbebanner, und sie sagt etwas: es laeuft. */
@keyframes sosDrehen { to { transform: rotate(360deg); } }
.ort-neu.laeuft .on-zeichen {
  display: inline-block;
  animation: sosDrehen 1s linear infinite;
}
.ort-neu:disabled { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .ort-neu.laeuft .on-zeichen { animation: none; }
}

/* ---------- Das Adressfeld ----------

   Eigener Rahmen in kraeftigem Gelb, mit laufendem Lichtstreifen (Manni,
   30.07.2026). Das Gelb ist das der Holding (#FFD200) und kommt sonst nirgends
   in dieser App vor, es kann also mit nichts verwechselt werden.

   Der Schimmer ist dieselbe Bewegung wie auf der Werbeflaeche in app/basis.css,
   nur schwaecher und langsamer. In einer Notfall-App darf sich sonst nichts von
   selbst bewegen, das lenkt ab. Dieses eine Feld darf, weil es die Aufmerksamkeit
   genau dorthin zieht, wo sie hingehoert. Wer Bewegung abgeschaltet hat, bekommt
   den Rahmen ohne Streifen, siehe ganz unten. */
.ort-feld {
  position: relative;
  overflow: hidden;
  margin-top: 3px;
  padding: 6px 11px 7px;
  border: 3px solid #ffd200;
  border-radius: 12px;
  background: #fffbe6;
  /* Ein warmer Schein nach aussen, damit das Feld auch bei Sonne auffaellt. */
  box-shadow: 0 2px 12px rgba(255, 210, 0, .35);
}
@media (prefers-color-scheme: dark) {
  /* Der Rahmen bleibt gelb, die Flaeche wird dunkel: helles Gelb als Flaeche
     waere nachts im Auto eine Blendung. */
  .ort-feld { background: #221f0c; box-shadow: 0 2px 14px rgba(255, 210, 0, .22); }
}

.ort-feld::before {
  content: '';
  position: absolute;
  top: -60%;
  left: -60%;
  width: 40%;
  height: 220%;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(18deg);
  animation: sosSchimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  /* Im Dunkeln reicht ein Hauch, sonst ueberstrahlt der Streifen die Schrift. */
  .ort-feld::before {
    background: linear-gradient(90deg,
      rgba(255, 210, 0, 0) 0%, rgba(255, 210, 0, .22) 50%, rgba(255, 210, 0, 0) 100%);
  }
}
@keyframes sosSchimmer {
  0%   { left: -60%; }
  45%  { left: 130%; }
  100% { left: 130%; }
}
/* Der Inhalt liegt ueber dem Streifen, nicht darunter. */
.ort-feld > * { position: relative; z-index: 1; }

/* Die Adresse. Das mit Abstand Groesste auf dem Bildschirm (Manni, 30.07.2026:
   "ganz gross die Adresse einblenden"). clamp, damit ein langer Strassenname auf
   einem 320 px breiten Geraet nicht in drei Zeilen ausufert.
   user-select bleibt AN, anders als bei den Bedienelementen: hier soll man mit
   dem Finger markieren und kopieren koennen. */
.ort-adresse {
  font-size: clamp(27px, 9vw, 36px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.5px;
  -webkit-user-select: text;
  user-select: text;
  /* Ein langer Strassenname darf umbrechen, aber nicht drei Zeilen fuellen. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Postleitzahl und Ort, eine Stufe kleiner. */
.ort-ort {
  margin-top: 1px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  -webkit-user-select: text;
  user-select: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ort-ort:empty { display: none; }

/* Die Zeile mit der Bundesland-Pille. Sie steht seit 30.07.2026 DIREKT unter der
   Adresse und nicht mehr am Ende der Karte: Manni mag die Pille, und dort gehoert
   sie auch hin, denn sie vervollstaendigt die Ortsangabe. Genauigkeit und
   Uhrzeit laufen rechts daneben mit, statt eine eigene Zeile zu kosten. */
.ort-unter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--leise);
}

/* Die Koordinaten ganz unten, jetzt deutlich untergeordnet. Ziffernbreite kommt
   aus der Basis (tabular-nums), damit beim Nachfuehren der Ortung nichts
   springt. */
.ort-koord {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 700;
  color: var(--leise);
  letter-spacing: .2px;
  -webkit-user-select: text;
  user-select: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ort-koord:empty { display: none; }
/* Die Pille. Manni mag sie, deshalb ist sie seit 30.07.2026 etwas kraeftiger
   und steht direkt unter der Adresse. */
.ort-land {
  padding: 2px 11px;
  border-radius: 999px;
  /* Nicht --blau: Weiss darauf kommt bei 13 px nur auf 3,57:1, siehe die
     Messung oben bei --sos-blau-satt. */
  background: var(--sos-blau-satt);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
}
/* Genauigkeit und Uhrzeit als eigene Pille (Manni, 30.07.2026: "damit man
   besser ein Auge drauf hat"). Vorher lief beides als leiser Fliesstext neben
   dem Bundesland mit und ging dort unter, obwohl es die Angabe ist, die
   entscheidet, ob man dem Rest ueberhaupt trauen darf.

   ORANGE ist der Akzentton der Marke und in dieser Familie nirgends "gut" oder
   "schlecht", sondern "sieh her". Genau das soll die Pille sagen.
   Schrift DUNKEL und nicht weiss: Weiss auf #FF7D0F kommt auf 2,56:1 und ist
   damit weit unter dem Minimum, Anthrazit darauf auf 7,2:1. Der Wert gilt in
   beiden Modi, weil die Pille ihren Grund selbst mitbringt. */
.ort-genau {
  padding: 2px 10px;
  border-radius: 999px;
  background: #ff7d0f;
  color: #10131a;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}

/* Ungenau heisst ungenau. Ab hier ist die Angabe fuer eine Pannenhilfe nicht
   mehr brauchbar, und dann kippt die Pille auf Rot, statt eine Zahl
   vorzutaeuschen. Weiss auf dem hellen Rot des Dunkelmodus waere wieder zu
   schwach, deshalb dieselbe dunkle Schrift wie oben. */
.ort-genau.grob { background: var(--sos-rot); color: #fff; }
@media (prefers-color-scheme: dark) {
  .ort-genau.grob { color: #10131a; }
}

/* Waehrend gesucht wird und wenn nichts geht: kleiner gesetzt, weil dort ein
   Satz steht und keine Adresse. */
.ort.sucht .ort-adresse, .ort.aus .ort-adresse {
  font-size: 18px;
  font-weight: 700;
  color: var(--leise);
  letter-spacing: 0;
}
.ort.aus { background: var(--karte); border-color: var(--linie); }

/* Solange die Adresse noch geholt wird, steht dort ein leises Wort statt einer
   leeren Zeile. Ohne das springt die Karte, sobald die Adresse eintrifft. */
.ort-adresse.laedt { color: var(--gedimmt); font-weight: 700; font-size: 18px; }

/* ---------- Teilen ----------

   Zwei Knoepfe nebeneinander: weitergeben und selbst ansehen. Das Verhaeltnis
   2:1 ist Absicht, Teilen ist der haeufigere Griff. */

.teilen { display: grid; grid-template-columns: 2fr 1fr; gap: 6px; }

.t-haupt {
  min-height: 54px;
  border: 2px solid var(--blau);
  border-radius: 14px;
  background: var(--blau);
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 8px;
  overflow: hidden;
}
.t-haupt:disabled { opacity: .5; }
.t-zeichen { flex: none; font-size: 20px; line-height: 1; }
.t-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.t-gross { font-size: 19px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
/* Eigenes Feld auf dem Knopf, nicht bloss hellere Schrift. Weiss direkt auf
   PIG-Blau kommt bei dieser Groesse nur auf 3,57:1, gemessen, und das ist unter
   dem Minimum. Dieselbe Loesung wie .btn-stand in app/basis.css. */
.t-klein {
  margin-top: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
/* Kurze Rueckmeldung nach dem Kopieren. Gruen heisst in dieser Familie ueberall
   "hat geklappt". */
.t-haupt.gut { background: var(--sos-gut); border-color: var(--sos-gut); }

.t-karte {
  min-height: 54px;
  border: 2px solid var(--blau);
  border-radius: 14px;
  background: var(--karte);
  color: var(--blau);
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.t-karte[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ---------- Minifilter ----------

   Die zweite Ebene unter Notruf, Panne und Diebstahl (Manni, 30.07.2026).
   Vorher standen alle Gruppen eines Bereichs untereinander, bis zu 35 Zeilen,
   und man scrollte in einem Kasten herum. Jetzt zeigt die Liste immer nur EINE
   Gruppe. Die Reihe wischt seitlich, wenn sie nicht in die Breite passt, wie
   die Mengen-Auswahl in der Öl-App. */

/* UMBRUCH STATT WISCHEN (Manni, 30.07.2026). Die Reihe lief vorher seitlich aus
   dem Bild, und dann sieht man die hinteren Filter gar nicht: bei "Notruf"
   blieben "Reden" und "Nicht sprechen" unsichtbar, obwohl daneben Platz frei
   war. Ein Filter, den man erst finden muss, ist keiner.

   flex-wrap und NICHT ein festes Raster mit drei Spalten: die Beschriftungen
   sind unterschiedlich lang, und bei gleich breiten Zellen bestimmt die
   laengste ("Lebensgefahr") die Breite aller. Gemessen brauchte das eine Reihe
   mehr als der Umbruch nach natuerlicher Breite. */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-content: flex-start;
}

.fbtn {
  flex: none;
  min-height: 34px;
  padding: 0 11px;
  border: 2px solid var(--linie);
  border-radius: 11px;
  background: var(--karte);
  color: var(--leise);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
/* Nicht --blau: Weiss darauf kommt bei 15 px nur auf 3,57:1, gemessen, und das
   ist unter dem Minimum von 4,5:1. Mit dem satteren Ton sind es 6,5:1. Dieselbe
   Rechnung wie bei der Bundesland-Pille, siehe --sos-blau-satt oben.
   Der grosse Umschalter darueber darf beim hellen Blau bleiben: seine Schrift
   ist 22 px fett und zaehlt damit als grosser Text, dort genuegen 3:1. */
.fbtn[aria-pressed="true"] {
  background: var(--sos-blau-satt);
  border-color: var(--sos-blau-satt);
  color: #fff;
  font-weight: 800;
}

/* ---------- Liste ----------

   Ueberschrift, dann Eintraege. Anders als bei den Geschwister-Apps ist ein
   Eintrag hier fast immer ein KNOPF (waehlen, oeffnen, suchen) und nicht eine
   Auskunft. Deshalb sieht er auch so aus: voller Rahmen, kraeftiger Pfeil. */

/* minmax(0, 1fr) IST HIER PFLICHT, nicht Kosmetik.
   .liste aus app/basis.css ist ein Raster ohne angegebene Spalte. Eine
   automatische Spalte wird so breit wie ihr breitester Inhalt, und weil
   .eintrag width:100% traegt, wurde daraus die Breite ALLER Zeilen. Gemessen
   bei 375 px: unter "Pannenhilfe" wuchs die Liste auf 455 px, weil
   "+49 711 530 34 35 36" nicht neben den Namen passte. Man konnte in der Liste
   seitwaerts wischen, und das sah aus wie ein Fehler. Dieselbe Loesung wie in
   .app in der Basis. */
.liste { gap: 5px; grid-template-columns: minmax(0, 1fr); }

/* Abblendkante, wenn unten noch etwas kommt (Manni, 30.07.2026: "das Inframe
   Fenster ist nicht gut geworden"). Eine hart abgeschnittene letzte Zeile sieht
   nach einem Fehler aus, eine ausblendende sagt "hier geht es weiter". Die
   Klasse setzt app.js beim Zeichnen und beim Scrollen, sie verschwindet also am
   Ende der Liste wieder. */
.liste.mehr {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
}

/* Die Gruppenueberschrift ist weggefallen: das ist jetzt der gedrueckte
   Minifilter darueber. Was bleibt, ist die Erklaerung, wo eine noetig ist. */
.gruppe-hinweis {
  margin: 0 2px;
  font-size: 12.5px;
  line-height: 1.35;
  /* --leise und NICHT --gedimmt: gemessen kommt --gedimmt bei dieser Groesse
     auf 3,1:1 im Hellen und 4,1:1 im Dunkeln, beides unter dem Minimum. */
  color: var(--leise);
}

/* Flacher als vorher (Manni, 30.07.2026: "die Felder sind zu gross").
   58 px Mindesthoehe mal bis zu 35 Zeilen war der Grund, warum man in der Liste
   herumscrollte. Die Trefferflaeche bleibt trotzdem ueber den empfohlenen
   44 px, gekuerzt wurde an Polster und Rahmen, nicht an der Bedienbarkeit. */
.eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 5px 11px;
  border: 2px solid var(--linie);
  border-radius: 13px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.e-text { flex: 1; min-width: 0; }
.e-name { font-size: 17px; font-weight: 800; line-height: 1.2; }
.e-unter {
  margin-top: 1px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--leise);
}
/* Die Nummer rechts. Sie ist der Beweis, dass der Knopf tut, was er sagt:
   man sieht vor dem Tippen, was gewaehlt wird. */
.e-nummer {
  flex: none;
  font-size: 16px;
  font-weight: 800;
  /* Nicht --blau: bei 16 px ist #0091c8 auf Weiss nur 3,57:1, siehe oben. */
  color: var(--sos-nummer);
  white-space: nowrap;
  /* Notbremse fuer die laengsten Nummern ("+49 711 530 34 35 36"): lieber eine
     Nummer eine Spur kleiner als eine Zeile, die aus der Karte laeuft. */
  max-width: 52%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.e-pfeil { flex: none; font-size: 22px; font-weight: 700; color: var(--sos-nummer); line-height: 1; }

/* Die wichtigsten je Gruppe: hoeher, Nummer gross daneben. Wer in Panik auf den
   Bildschirm sieht, findet sie ohne Lesen. */
.eintrag.gross { min-height: 62px; border-width: 3px; border-color: var(--blau); }
.eintrag.gross .e-name { font-size: 20px; }
.eintrag.gross .e-nummer { font-size: 27px; }

/* Der eine Knopf, der Leben rettet, sieht aus wie kein anderer: vollflaechig
   rot. In dieser Familie ist eine gefuellte Flaeche immer eine Handlung, und
   Rot kommt sonst nirgends vor. */
.eintrag.rot {
  background: var(--sos-rot);
  border-color: var(--sos-rot);
  color: var(--auf-sos-rot);
}
.eintrag.rot .e-unter,
.eintrag.rot .e-nummer,
.eintrag.rot .e-pfeil { color: var(--auf-sos-rot); }
.eintrag.rot .e-unter { opacity: .9; }

/* ---------- Gesperrte Rufnummer ----------

   Solange die Sperre oben zu ist, ist eine Nummer LESBAR, aber nicht waehlbar.
   Bewusst nicht ausgegraut: man soll sie vorlesen koennen, ohne zu entsperren.
   Was sich aendert, ist das Zeichen rechts, und das ist das ehrlichste Signal:
   wo sonst die Nummer zum Tippen einlaedt, haengt jetzt ein Schloss. */

.eintrag.zu .e-nummer { color: var(--leise); }
.e-schloss { flex: none; font-size: 15px; line-height: 1; opacity: .75; }

/* Ein Tipp auf eine gesperrte Nummer waehlt nicht, sondern wackelt kurz. Ohne
   diese Rueckmeldung haelt man die App fuer kaputt. */
@keyframes sosWackeln {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}
.eintrag.wackelt, .sperre.wackelt { animation: sosWackeln .32s ease; }

@media (prefers-reduced-motion: reduce) {
  .eintrag.wackelt, .sperre.wackelt { animation: none; }
  /* Der Rahmen bleibt, nur der Lichtstreifen faellt weg. */
  .ort-feld::before { animation: none; opacity: 0; }
  .toast { transition: none; }
}

/* Reine Auskunft, kein Knopf. Flach und ohne Pfeil, wie die Karten in den
   Listen der Geschwister-Apps: nichts soll zum Tippen einladen, was nichts tut. */
.eintrag.info {
  border-width: 1px;
  border-color: var(--linie);
  background: transparent;
  cursor: default;
  align-items: flex-start;
}
.eintrag.info .e-name { font-size: 15px; }
.eintrag.info .e-unter { font-size: 13px; margin-top: 3px; }

/* Der Hinweis beantwortet "kostet mich das etwas" und "geht das rund um die
   Uhr", bevor man tippt. Er steht seit 30.07.2026 IN der Karte und nicht mehr
   als eigener Absatz darunter: als Absatz kostete er je Eintrag zusaetzlich
   Abstand, Polster und eine Rasterzeile, und genau daraus wurde die Liste, in
   der man scrollen musste. */
.e-hinweis {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--leise);
}
.eintrag.rot .e-hinweis { color: var(--auf-sos-rot); opacity: .85; }

/* ---------- Anleitung mit Schritten ----------

   Fuer die Starthilfe (Manni, 30.07.2026). Anders als alles andere in dieser
   Liste ist das kein Knopf, sondern etwas zum Lesen und Abarbeiten, und bei
   Starthilfe zaehlt die REIHENFOLGE: falsch geklemmt gibt es Funken direkt
   ueber der Batterie, und dort steht Knallgas. Deshalb nummeriert, deutlich
   getrennt in Anklemmen und Abklemmen, und nicht als Fliesstext. */

.schritte {
  border: 2px solid var(--linie);
  border-radius: 13px;
  background: var(--karte);
  padding: 8px 11px 9px;
}
/* Die Warnung sieht anders aus als die Anleitung: kraeftiger Rand links, damit
   sie beim Ueberfliegen nicht als weiterer Schritt durchgeht. */
.schritte.achtung {
  border-color: var(--sos-rot);
  border-left-width: 5px;
}

.schritte-titel { font-size: 15px; font-weight: 800; line-height: 1.2; }
.schritte-unter {
  margin-top: 1px;
  font-size: 12px;
  font-weight: 600;
  color: var(--leise);
  line-height: 1.3;
}

.schritte ol {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}
.schritte li {
  position: relative;
  counter-increment: schritt;
  padding-left: 26px;
  margin-bottom: 5px;
  font-size: 13px;
  line-height: 1.4;
}
.schritte li:last-child { margin-bottom: 0; }
.schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 1px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  /* Der satte Ton, weil Weiss auf dem hellen PIG-Blau bei 11,5 px nur auf
     3,57:1 kaeme. Dieselbe Rechnung wie ueberall sonst in dieser Datei. */
  background: var(--sos-blau-satt);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 19px;
  text-align: center;
}
/* Das Wichtigste im Schritt darf hervorstechen, ohne dass der Satz zerfaellt. */
.schritte li b { font-weight: 800; }

/* Eine Warnung wird nicht gezaehlt, sie gilt fuer alles. */
.schritte.achtung ol { counter-reset: none; }
.schritte.achtung li::before { content: '!'; background: var(--sos-rot); color: var(--auf-sos-rot); }

/* "In der Nähe": kleiner gesetzt, weil es Kartensuchen sind und keine Anrufe. */
.eintrag.nahe { min-height: 48px; }
.eintrag.nahe .e-name { font-size: 16px; }
/* Ohne Standort kann die Kartensuche nichts zentrieren. Dann ist der Knopf da,
   aber sichtbar taub, statt in eine leere Karte zu fuehren. */
.eintrag.nahe[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.e-zeichen { flex: none; font-size: 22px; line-height: 1; width: 26px; text-align: center; }

/* ---------- Kleine Bildschirme ---------- */

/* Unter 700 px Hoehe wird es eng. Gekuerzt wird an Luft und Schriftgroesse,
   nie an der Trefferflaeche der Eintraege: wer zittert, trifft schlechter. */
@media (max-height: 700px) {
  /* Ein Pixel je Zeilenabstand, neunmal. Das ist der billigste Platz auf dem
     Bildschirm: niemand sieht ihn, und er entscheidet darueber, ob die 110
     unter der 112 noch ganz ins Bild passt oder angeschnitten wird. */
  .app { gap: 4px; }
  .ort { padding: 7px 11px 8px; }
  /* Die Adresse bleibt hier bewusst gross: sie ist der Grund, warum die Karte
     ueberhaupt so viel Platz bekommt. Gespart wird ringsum. */
  .ort-adresse { font-size: clamp(23px, 7.4vw, 28px); }
  .ort-ort { font-size: 15px; }
  .ort-kopf { min-height: 25px; }
  .ort-neu { min-height: 25px; font-size: 12px; padding: 0 8px; }
  .sperre { min-height: 38px; }
  .t-haupt, .t-karte { min-height: 46px; }
  .t-gross { font-size: 18px; }

  /* DER SATZ UNTER DEM APP-NAMEN FAELLT WEG. "Standort teilen und die richtige
     Nummer finden" erklaert die App beim ersten Besuch, und danach nie wieder
     etwas. Er kostet 14 px, und die entscheiden bei 375 x 640 darueber, ob die
     110 unter der 112 noch ganz ins Bild passt. Auf hohen Geraeten bleibt er. */
  .kopf-was { display: none; }

  /* Das Adressfeld bleibt auffaellig, wird aber knapper gefasst. */
  .ort-feld { padding: 4px 9px 5px; border-width: 2px; }
  .werbe-banner { min-height: 32px; }
  .ort-kopf, .ort-neu { min-height: 22px; }
  /* Ein Pixel Polster je Zeile und einer Abstand. Zusammen mit dem Rest reicht
     es, damit unter "Lebensgefahr" die 112 UND die 110 vollstaendig im Bild
     stehen. Das ist die eine Ansicht, bei der es wirklich zaehlt. */
  .eintrag { padding: 4px 11px; }
  .liste { gap: 4px; }
  /* Mit Sperre, Ortskarte, Teilen-Zeile und zwei Filterreihen bleiben der Liste
     sonst nur noch gut 100 px. Der grosse Umschalter gibt hier 12 px her, ohne
     unter die empfohlene Trefferflaeche von 44 px zu fallen. */
  .umschalter.gross .segment { min-height: 44px; font-size: 19px; }

  /* Die Koordinatenzeile faellt weg, und das ist gefahrlos: sie erscheint
     ueberhaupt nur, WENN eine Adresse darueber steht. Gibt es keine, traegt die
     grosse Zeile selbst die Koordinate, und die bleibt sichtbar. Weitergegeben
     wird sie in beiden Faellen, sie steht in der Nachricht zum Teilen.
     Gemessen bei 375 x 640 mit echter Adresse: die Liste stieg von 108 auf
     129 px, und damit passen die beiden grossen Knoepfe 112 und 110 zusammen
     ins Bild. Genau darauf kommt es an. */
  .ort-koord { display: none; }
  /* Die Filter duerfen enger werden, aber NICHT wieder in eine wischbare Reihe:
     lieber schmalere Knoepfe als unsichtbare. */
  .fbtn { min-height: 32px; font-size: 13px; padding: 0 9px; }
  .eintrag.gross { min-height: 56px; }
  .eintrag.gross .e-nummer { font-size: 25px; }
}

/* Noch enger: dann gibt auch die Ortszeile nach. Die Postleitzahl steht in der
   Nachricht zum Teilen, und die Strasse allein reicht, um sie vorzulesen. */
@media (max-height: 600px) {
  .ort-unter { font-size: 12px; }
  .ort-ort { font-size: 14px; }
  .werbe-banner { min-height: 32px; font-size: 16px; }
}