/* ===================== FARBSCHEMA ===================== Standard ist das Systemthema: Wer nachts den Nachtmodus anhat, wird nicht geblendet – und nachts kommen die Alarme, die zählen. Manuell umschaltbar in den Einstellungen (data-thema auf ). Der Hell-Modus ist NICHT einfach invertiert: Notfallrot, Statusgrün und die Magnituden-Farbskala behalten ihre Signalwirkung. Sonst verliert man auf hellem Grund genau die Hinweise, die im Ernstfall zählen. */ :root, [data-thema="dunkel"] { --bg: #0d1117; --card: #161b22; --border: #30363d; --fg: #e6edf3; --muted: #8b949e; --accent: #e0562c; --accent2: #f0883e; --feld: #1c2128; --ok: #3fb950; --warn: #d29922; --err: #f85149; --ok-bg: linear-gradient(135deg, #1a2f1a, #14261a); --ok-bd: #2a4a2a; --not-bg: linear-gradient(135deg, #2d1214, #1f0f11); --not-bd: #5c2528; --not-fg: #c9a0a2; --kopf-bg: linear-gradient(135deg, #1a1006, #0d1117); --schatten: rgba(0,0,0,.4); --nav-bg: rgba(13,17,23,.86); /* durchscheinende App-Leiste */ } [data-thema="hell"] { --bg: #eef1f5; --card: #ffffff; --border: #d8dee4; --fg: #1f2328; --muted: #656d76; --accent: #d4491f; --accent2: #bc4c00; --feld: #f0f3f6; --ok: #1a7f37; --warn: #9a6700; --err: #cf222e; --ok-bg: linear-gradient(135deg, #dafbe1, #e6ffec); --ok-bd: #aceebb; --not-bg: linear-gradient(135deg, #ffebe9, #fff5f4); --not-bd: #ffcecb; --not-fg: #a40e26; --kopf-bg: linear-gradient(135deg, #fff1e5, #ffffff); --schatten: rgba(0,0,0,.08); --nav-bg: rgba(238,241,245,.9); } /* Sanfter Übergang beim Umschalten – aber nicht beim ersten Laden */ body.thema-bereit, body.thema-bereit .card, body.thema-bereit header { transition: background .2s, color .2s, border-color .2s; } * { box-sizing: border-box; } /* ---- App-Gefühl statt Webseite ---- Kein blaues Tipp-Aufblitzen, kein Gummiband-Weiss beim Überziehen, kein versehentliches Text-Markieren beim Wischen, kein Doppeltipp-Zoom. */ html { -webkit-tap-highlight-color: transparent; } /* Doppeltipp-Zoom global aus – der klassische "das ist eine Webseite"-Moment. touch-action wirkt über die Vorfahrenkette, body deckt also den gesamten Inhalt ab. WICHTIG: 'manipulation' lässt Wischen UND Pinch-Zoom zu (Barrierefreiheit!), nur der Doppeltipp-Zoom entfällt. Die Leaflet-Karte regelt ihre Gesten selbst und behält ihren eigenen Doppeltipp-Kartenzoom. */ body { overscroll-behavior-y: none; touch-action: manipulation; } button, .hauptnav, header, .seg, .thema-wahl, summary { -webkit-user-select: none; user-select: none; } button, select, input, a, summary { touch-action: manipulation; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; padding-bottom: 40px; } header { display: flex; align-items: center; gap: 10px; /* Ab Android 15 (targetSdk 35+) laeuft der Inhalt unter die Statusleiste (Edge-to-Edge ist nicht mehr abschaltbar). Der obere Sicherheitsabstand haelt den Header darunter frei. */ padding: calc(10px + env(safe-area-inset-top)) 16px 10px; /* Fest am oberen Rand – wie die Nav-Leiste unten: durchscheinend mit Blur. z-index unter Gate (200)? Nein: Gate/Modals liegen bei 200+/1000, der Header bei 150 – er bleibt also unter allen Overlays. */ position: sticky; top: 0; z-index: 150; background: var(--nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } /* KOPF KOMPAKT (14.08.2026): In der installierten App weiss der Nutzer, welche App er geoeffnet hat. Logo 52 -> 34, Titel einzeilig, Slogan raus: rund 40 px weniger, bevor der erste Inhalt kommt. */ .logo { width: 34px; height: 34px; border-radius: 9px; } h1 { margin: 0; font-size: 1.05rem; white-space: nowrap; } .sub { margin: 2px 0 0; color: var(--muted); font-size: .9rem; } main { max-width: 640px; margin: 0 auto; padding: 12px; } .card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-bottom: 14px; } h2 { font-size: 1.05rem; margin: 0 0 12px; } h3 { font-size: .98rem; margin: 0 0 6px; } label { display: block; font-size: .9rem; color: var(--muted); margin: 10px 0; } select, input { display: block; width: 100%; margin-top: 5px; padding: 12px 13px; background: var(--feld); color: var(--fg); border: 1px solid var(--border); border-radius: 10px; font-size: 1rem; /* 16px: verhindert iOS-Auto-Zoom */ min-height: 46px; } select:focus, input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } button { display: block; width: 100%; margin-top: 10px; padding: 13px; background: var(--accent); color: #fff; border: 0; border-radius: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; min-height: 48px; /* natives Tippziel */ transition: transform .08s ease, opacity .08s ease; } button:active { transform: scale(.97); opacity: .9; } /* fühlbarer Druck */ button.secondary { background: var(--feld); color: var(--fg); border: 1px solid var(--border); } button.danger { background: var(--err); color: #fff; } button:disabled { opacity: .5; } .channel { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; } .channel:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; } .muted { color: var(--muted); font-size: .85rem; } .hidden { display: none; } .ok { color: var(--ok); } .err { color: var(--err); } .ev { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); } .ev:last-child { border-bottom: 0; } /* Magnituden-Plaketten. Die Textfarbe richtet sich nach der HELLIGKEIT der Plakette, nicht nach dem Thema: Auf Gelb und Orange steht dunkler Text, auf Rot heller. So bleibt es in beiden Themen lesbar – vorher war weiße Schrift auf Gelb praktisch blind. Die Farbskala selbst ist absichtlich in beiden Themen gleich: Sie ist ein Signal, kein Dekor. */ .mag { min-width: 52px; text-align: center; font-weight: 700; padding: 7px 0; border-radius: 8px; background: #8b949e; color: #fff; /* unter M2: neutral */ } .mag.m2 { background: #c9a227; color: #2b2200; } /* gelb -> dunkler Text */ .mag.m3 { background: #f0883e; color: #331a00; } /* orange-> dunkler Text */ .mag.m4 { background: #e8590c; color: #fff; } /* kräftig orange */ .mag.m5 { background: #c62828; color: #fff; } .mag.m6 { background: #a01c23; color: #fff; } .ev .place { font-size: .92rem; } .ev .when { font-size: .8rem; color: var(--muted); } footer { text-align: center; padding: 18px 10px; } .head-main { flex: 1; } .langs { display: flex; gap: 4px; } .langs a { padding: 5px 9px; border-radius: 7px; font-size: .78rem; font-weight: 700; color: var(--muted); text-decoration: none; border: 1px solid transparent; } .langs a.active { color: var(--fg); background: var(--feld); border-color: var(--border); } .install-banner { border-color: var(--accent2); } .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; } .modal { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; max-width: 480px; width: 100%; max-height: 85vh; overflow-y: auto; } .modal h2 { margin-top: 0; } .modal p { font-size: .92rem; line-height: 1.5; color: var(--fg); } .modal-overlay.hidden { display: none; } /* VOLLFLAECHIGES MODAL (21.08.2026) .modal deckelt bei 480px Breite und 85vh Hoehe - als schwebende Karte in der Mitte. Fuer Anleitungen, die gelesen werden wollen, ist das zu klein: der Text scrollt in einem Fensterchen, und daneben blitzt die Seite durch. Diese Klasse macht daraus einen eigenen Bildschirm. 100dvh statt 100vh - vh ignoriert die eingeblendete Browserleiste auf Mobilgeraeten und rechnet zu gross. */ /* Ueber die App-Navileiste: .modal-overlay liegt bei z-index 100, die untere Leiste darueber - der Knopf verschwand dahinter. */ .modal-overlay.voll { padding: 0; align-items: stretch; z-index: 5000; } .modal-overlay.voll > .modal { max-width: none; max-height: none; height: 100dvh; border: 0; border-radius: 0; display: flex; flex-direction: column; padding: calc(20px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)); overflow: hidden; } /* Alles zwischen Ueberschrift und letztem Knopf scrollt, der Rest steht. */ .modal-overlay.voll > .modal > :not(h2):not(button):not(.modal-fuss) { overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-overlay.voll > .modal > .steps { flex: 1; min-height: 0; } .modal-overlay.voll > .modal > button { flex: 0 0 auto; margin-top: 14px; } /* Install-Banner als Bottom-Sheet */ .install-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; margin: 0; max-width: 640px; margin-inline: auto; border-radius: 16px 16px 0 0; border-bottom: 0; box-shadow: 0 -8px 30px rgba(0,0,0,.6); animation: sheet-up .35s ease-out; padding-bottom: calc(16px + env(safe-area-inset-bottom)); } @keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .sheet-close { position: absolute; top: 10px; right: 12px; width: auto; margin: 0; padding: 4px 10px; font-size: 1rem; background: var(--feld); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; } /* Schritt-für-Schritt-Anleitungen */ .steps { list-style: none; padding: 0; margin: 14px 0; } .steps li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border); font-size: .92rem; line-height: 1.45; } .steps li:first-child { border-top: 0; } .step-ico, .step-num { flex: 0 0 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--feld); border: 1px solid var(--accent); border-radius: 10px; color: var(--accent2); font-weight: 700; } /* Installierte App/PWA nach Einrichtung: nur Ereignisliste + Einstellungen-Button */ /* Die frühere "app-slim"-Logik (Karten aus- und einblenden, Einstellungen- Knopf) ist durch die echte Navigation ersetzt. Nur der Installationsbanner bleibt in der App ausgeblendet – sie IST ja die App. */ body.app-slim #installBanner, body.app-slim #apkCard { display: none !important; } /* "Estoy bien" gehoert auf die Hauptseite – im Ernstfall muss der Knopf sofort sichtbar sein, nicht zwei Klicks tief in den Einstellungen. In den Einstellungen wird die Karte deshalb ausgeblendet. */ body.app-slim.settings-open #wbCard { display: none !important; } body.app-slim.settings-open #btnSettings { display: none; } /* "Kritische Alarme" existiert nur in der nativen App (native-app-Klasse) */ body.app-slim.settings-open.native-app #dndCard { display: block !important; } /* Vollflächiges Gate vor der Einrichtung (Browser auf Mobilgeräten) */ .gate { position: fixed; inset: 0; z-index: 200; background: var(--bg); overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: calc(24px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom)); } .gate.hidden { display: none; } .gate-inner { width: 100%; max-width: 460px; text-align: center; } .gate-icon { width: 72px; height: 72px; border-radius: 18px; margin-bottom: 12px; } .gate-inner h1 { font-size: 1.4rem; margin: 0 0 20px; } .gate-inner h2 { margin-bottom: 6px; } .gate-inner .steps { text-align: left; } /* Vollflächiger Einrichtungsassistent */ #obModal .modal { max-width: 520px; width: 100%; min-height: 100vh; min-height: 100dvh; border-radius: 0; border: 0; display: flex; flex-direction: column; justify-content: center; padding: calc(28px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom)); } #obModal { align-items: stretch; justify-content: center; padding: 0; } /* VOLLE BREITE (22.08.2026) max-width:520px liess auf breiten Bildschirmen einen schmalen Streifen stehen, durch den die Seite dahinter schimmerte - auf dem Telefon nicht sichtbar, am Desktop unfertig. Der Assistent deckt jetzt IMMER die ganze Flaeche ab; nur der Inhalt bleibt auf 520 px begrenzt und mittig. Das loest zugleich das Querformat-Problem, weil kein Rand mehr uebrig bleibt, aus dem der Inhalt herausragen koennte. */ #obModal .modal { max-width: none; background: var(--bg); } #obModal .modal > * { max-width: 520px; width: 100%; margin-inline: auto; } /* Der Ueberspringen-Link liegt ausserhalb der Schrittbloecke und hat eigenes text-align:center - das zentrierte ihn INNERHALB seiner 520 px, die links standen. box-sizing plus auto-Rand holt ihn in die Mitte. */ #obModal .modal > p { text-align: center; } /* QUERFORMAT (22.08.2026) min-height:100dvh laesst das Panel bei langem Inhalt UEBER den Bildschirm hinauswachsen, und justify-content:center schiebt es dann oben und unten gleichmaessig heraus. Im Hochformat passt alles, im Querformat (rund 400 px Hoehe) sind Ueberschrift und Knoepfe nicht mehr erreichbar - der Assistent ist dort eine Sackgasse. Deshalb: Der Overlay-Container scrollt, und die Zentrierung faellt weg, sobald es eng wird. flex-start statt center heisst oben anfangen und nach unten scrollen - so bleibt jeder Schritt erreichbar. */ #obModal { overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Scrollsperre am Assistenten (22.08.2026): ob-offen wird von startOnboarding() gesetzt und von close() wieder entfernt - anders als gate-offen, das nur das Gate kennt und beim Sprachwechsel (Seitenneuladen) haengenblieb. */ body.ob-offen { overflow: hidden; height: 100dvh; } body.ob-offen header { display: none !important; } @media (max-height: 560px) { #obModal { align-items: flex-start; } #obModal .modal { min-height: 0; justify-content: flex-start; padding: calc(16px + env(safe-area-inset-top)) 20px calc(16px + env(safe-area-inset-bottom)); } #obModal .modal h2 { font-size: 1.15rem; margin-bottom: 4px; } #obModal .modal p { font-size: .88rem; } #obModal .modal button { margin-top: 8px; } } /* Erledigte Pflicht-Berechtigungen im Assistenten */ button.done, button.done:hover { background: var(--ok); border-color: var(--ok); color: #fff; } button:disabled { opacity: .45; cursor: not-allowed; } /* Umschalter Liste/Karte */ .seg { display: flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .seg button { background: transparent; color: var(--muted); border: 0; border-radius: 0; padding: 7px 14px; font-size: .85rem; width: auto; margin: 0; } .seg button.on { background: var(--card); color: var(--fg); font-weight: 600; } /* Beben-Karte */ #evMap { height: 380px; border-radius: 12px; border: 1px solid var(--border); margin-top: 12px; } #evMap.hidden, #evMapLegend.hidden { display: none; } .leaflet-container { background: #a5cbe0; font: inherit; } /* Meeresfarbe statt schwarz */ .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--card); color: var(--fg); border: 1px solid var(--border); } .leaflet-popup-content { margin: 10px 14px; font-size: .85rem; } @keyframes detPulse { 0% { opacity: 1; } 50% { opacity: .45; } 100% { opacity: 1; } } .det-marker { animation: detPulse 1.6s infinite; } /* Magnituden-Legende unter der Karte */ .mag-legend { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: .75rem; color: var(--muted); margin-top: 8px; } .mag-legend span { display: inline-flex; align-items: center; gap: 5px; } .mag-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } /* Ereignisliste: anklickbar, Farbe wie auf der Karte */ .ev-click { cursor: pointer; transition: background .12s; border-radius: 8px; } .ev-click:hover, .ev-click:focus { background: var(--feld); outline: none; } .ev-go { color: var(--muted); font-size: 1.05rem; padding-left: 6px; opacity: .7; } .ev-click:hover .ev-go { opacity: 1; } /* Teilen-Knopf in der Ereignisliste (31.08.2026). Etwas groesserer Tippbereich als das Kartensymbol daneben: Er liegt mitten in einer Zeile, die selbst anklickbar ist - ein Fehltipp fuehrt sonst auf die Karte. */ .ev-teilen { color: var(--muted); font-size: 1.15rem; padding: 6px 9px; opacity: .6; cursor: pointer; line-height: 1; } .ev-teilen:hover, .ev-teilen:active { opacity: 1; color: var(--accent); } /* Telegram: manueller Verbindungsweg (falls t.me blockiert/gestört) */ .tg-copy { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #12161c; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; } .tg-copy span { font-family: ui-monospace, monospace; font-size: .85rem; overflow-wrap: anywhere; } .tg-copy button { width: auto; padding: 4px 12px; font-size: .78rem; flex: 0 0 auto; } /* ===================== SCHUTZ-BANNER ===================== Die erste Frage nach einem Beben: "Bin ich überhaupt geschützt?" Deshalb ganz oben, eine Zeile, sofort erfassbar. */ .banner { background: var(--ok-bg); border: 1px solid var(--ok-bd); border-radius: 14px; padding: 16px; margin-bottom: 14px; } .banner-zeile { display: flex; align-items: center; gap: 11px; } /* Kreis um das Zustandssymbol (14.08.2026). Der Schutzstatus ist die Frage, mit der jeder die App oeffnet - er darf mehr Gewicht haben als eine Zeile Text. */ .banner-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ok-bd); color: var(--ok-fg, #5DCAA5); } .banner-icon .ic { width: 21px; height: 21px; } .banner.warnung .banner-icon { background: var(--not-bd); color: var(--not-fg, #EF9F27); } .banner-gross { font-size: 1.05rem; font-weight: 600; } .banner-klein { color: var(--muted); font-size: .8rem; margin-top: 3px; } .banner.warnung { background: var(--not-bg); border-color: var(--not-bd); } /* ===================== NOTFALL ===================== Immer sichtbar, aber ruhig – bis man ihn braucht. Kein Blinken, kein aufdringliches Rot: Wer in Panik ist, soll den Knopf finden, nicht erschrecken. */ .notfall { background: var(--not-bg); border: 1px solid var(--not-bd); border-radius: 14px; padding: 16px; margin-bottom: 14px; } [data-thema="dunkel"] .notfall { /* Im Dunkeln war der rötliche Hintergrund kaum vom Rest zu unterscheiden. Ein deutlicherer Rand macht klar: Das hier ist ein anderer Bereich. */ border-color: #7a3033; background: linear-gradient(135deg, #3a1518, #241012); } .notfall-h { font-size: .98rem; display: flex; align-items: center; gap: 7px; margin: 0 0 5px; } .notfall-warum { color: var(--not-fg); font-size: .8rem; line-height: 1.45; margin: 0 0 13px; } .notfall-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } /* Die beiden Notfallknöpfe tragen ihre Funktion in der Farbe – nicht erst, wenn sie aktiv sind. Wer in Panik aufs Display schaut, liest keine Labels: ROT = Hilferuf, GRÜN = Licht. Das muss auf den ersten Blick sitzen, in beiden Themen, bei jeder Helligkeit. */ .nbtn { border-radius: 11px; padding: 14px 8px; text-align: center; cursor: pointer; width: auto; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 2px solid transparent; transition: transform .1s, box-shadow .15s; color: #fff; } .nbtn:active { transform: scale(.97); } .nbtn-icon { font-size: 1.5rem; } .nbtn-lbl { font-size: .82rem; font-weight: 700; } .nbtn-sub { font-size: .7rem; opacity: .85; } /* SOS – immer rot. Das ist der Hilferuf. */ #btnSos { background: #c62828; border-color: #c62828; } #btnSos.aktiv { background: #8e1616; border-color: #ff5252; box-shadow: 0 0 0 3px rgba(255, 82, 82, .25); } /* Taschenlampe – neutral im Ruhezustand, warmgelb wenn sie leuchtet (14.08.2026). Vorher gruen: das war als "Licht, kein Notruf" gemeint, wurde neben dem roten SOS aber als Ampel gelesen - gruen heisst in dieser App "alles in Ordnung". Jetzt traegt die Farbe eine Information statt einer Zuschreibung: sie faerbt sich, WEIL das Licht an ist. */ #btnLampe { background: var(--feld); border-color: var(--border); color: var(--fg); } #btnLampe.aktiv { background: #8a6d1f; border-color: #ffd54f; color: #fff; box-shadow: 0 0 0 3px rgba(255, 213, 79, .25); } .notfall-hinweis { font-size: .78rem; margin: 11px 0 0; } /* ===================== THEMENWAHL ===================== */ .thema-wahl { display: flex; gap: 4px; margin-top: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 4px; } .thema-wahl button { flex: 1; background: transparent; border: 0; color: var(--muted); padding: 8px 6px; border-radius: 7px; font-size: .82rem; font-weight: 600; cursor: pointer; margin: 0; width: auto; } .thema-wahl button.an { background: var(--card); color: var(--fg); } /* ===================== SEITENZAHLEN ===================== Die Liste zeigte 30 Beben und hatte keinen Weg zu älteren. Seit die FUNVISIS-Kleinbeben ankommen, sind das keine zwei Tage mehr. */ .seiten { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; } .seite-btn { width: auto; min-width: 38px; margin: 0; padding: 8px 11px; background: var(--feld); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; font-size: .88rem; font-weight: 600; } .seite-btn.an { background: var(--accent); color: #fff; border-color: var(--accent); } .seite-btn:disabled { opacity: .35; cursor: default; } .seite-luecke { color: var(--muted); padding: 0 3px; } /* Schalter (Sensor mitmachen) */ .schalter { display: flex; align-items: center; gap: 11px; margin: 14px 0 6px; cursor: pointer; color: var(--fg); font-size: .95rem; font-weight: 600; } .schalter input { width: auto; margin: 0; flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--accent); } /* Schalter (Sensor-Teilnahme) */ .schalter { display: flex; align-items: center; gap: 10px; cursor: pointer; margin: 10px 0; color: var(--fg); font-size: .92rem; } .schalter input { width: auto; margin: 0; flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--accent); } /* ===================== NAVIGATION ===================== Feste Leiste unten – mit dem Daumen erreichbar, auch einhändig. Drei Bereiche: Start (was ist los?), Karte (wo?), Einstellungen (wie werde ich gewarnt?). Mehr braucht diese App nicht, und weniger wäre zu wenig. */ .hauptnav { display: flex; gap: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 5px; margin: 0 auto 16px; max-width: 720px; } /* Auf dem Telefon: feste Leiste am unteren Rand, mit dem Daumen erreichbar. Auf grösseren Bildschirmen bleibt sie oben im Fluss – dort gibt es keinen Daumen, der unten hängt, und eine fixierte Leiste würde nur Platz stehlen. */ @media (max-width: 700px) { .hauptnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; margin: 0; max-width: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--nav-bg); /* durchscheinend + Blur = App-Leiste */ -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } body { padding-bottom: 84px; } } @media (min-width: 701px) { body { padding-bottom: 0; } } /* Während der Einrichtung (Installations-Bildschirm, Assistent) hat die Navigation nichts zu suchen – dort gibt es nur einen Weg: vorwärts. */ body.gate-offen .hauptnav, body.ob-offen .hauptnav { display: none !important; } body.gate-offen { padding-bottom: 0; } /* Solange das Gate (Installations-Bildschirm) offen ist: die App dahinter KOMPLETT verstecken und den Body-Scroll sperren. Vorher war das Gate nur ein fixed-Overlay ueber der fertig gerenderten App – Wischgesten reichten an den Body durch, und beim Einklappen der Browser-Adressleiste blitzte die App (Startliste mit Beben) hinter dem Gate durch. */ body.gate-offen { overflow: hidden; height: 100dvh; } body.gate-offen main, body.gate-offen header { display: none !important; } .hauptnav button { flex: 1; margin: 0; padding: 6px 4px; width: auto; min-height: 52px; background: transparent; border: 0; border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-weight: 600; font-size: .7rem; transition: color .15s, background .15s, transform .08s; } .hauptnav button:active { transform: scale(.94); opacity: 1; } .hauptnav button.aktiv { color: var(--accent); background: var(--feld); } .nav-icon { line-height: 0; } .nav-icon svg { width: 24px; height: 24px; display: block; } .hauptnav button.aktiv .nav-icon svg { stroke-width: 2.5; } /* aktiver Tab "fetter" */ .nav-lbl { font-size: .69rem; letter-spacing: .01em; } main { padding-bottom: 16px; } /* Ansichten: immer nur eine sichtbar */ .ansicht { display: none; } .ansicht.aktiv { display: block; animation: einblenden .18s ease-out; } @keyframes einblenden { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ===================== AUFKLAPPBARE ABSCHNITTE ===================== Vier gleich aussehende Karten untereinander erschlagen den Blick. Als Abschnitte sieht man auf einen Blick, WAS es gibt – und öffnet nur, was man braucht. */ .abschnitt { background: var(--card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; } .abschnitt > summary { display: flex; align-items: center; gap: 11px; padding: 15px 16px; cursor: pointer; list-style: none; font-weight: 600; font-size: .95rem; user-select: none; } .abschnitt > summary::-webkit-details-marker { display: none; } .abschnitt > summary:hover { background: var(--feld); } .ab-icon { font-size: 1.15rem; flex: 0 0 auto; } .ab-titel { flex: 1; } .ab-pfeil { color: var(--muted); font-size: 1.3rem; line-height: 1; transition: transform .2s; flex: 0 0 auto; } .abschnitt[open] > summary { border-bottom: 1px solid var(--border); } .abschnitt[open] .ab-pfeil { transform: rotate(90deg); } .ab-inhalt { padding: 16px; } .ab-inhalt > :first-child { margin-top: 0; } /* In den Abschnitten keine doppelten Kartenrahmen */ .abschnitt .card { background: transparent; border: 0; padding: 0; margin: 0; } /* Karte im Vollbild-Bereich */ #mapFull { width: 100%; position: relative; isolation: isolate; z-index: 0; } /* isolation: Leaflet nutzt intern z-Indizes bis 700 – ohne eigenen Stacking-Context wuerden die Kartenebenen beim Scrollen ueber den sticky Header (z-index 150) laufen. */ /* Auf dem Telefon ragt die Karte sonst hinter die fixierte Navigations- leiste: 100vh ist auf iOS zu gross (Browser-UI zaehlt mit) und die 76px der Leiste fehlten in der Rechnung. dvh = tatsaechlich sichtbare Hoehe. */ @media (max-width: 700px) { #mapFull { height: calc(100vh - 308px) !important; /* Fallback */ height: calc(100dvh - 304px - env(safe-area-inset-bottom)) !important; } } /* ---- Handlungsanweisungen (Verhalten bei einem Erdbeben) ---- */ .anw-titel { color: var(--accent2); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 14px 0 8px; } .ab-inhalt .anw-titel:first-child { margin-top: 0; } .anw-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; } .anw-kachel { background: var(--feld); border: 1px solid var(--border); border-radius: 10px; padding: 10px 6px; text-align: center; } /* Symbol ueber dem Text, mittig (14.08.2026). Die alte Regel zielte auf und lief nach dem Wechsel auf SVG ins Leere - deshalb klebte das Symbol am Text. Akzentfarbe: das sind die dringlichsten Anweisungen der ganzen App, sie duerfen Gewicht haben. */ .anw-kachel span { display: block; font-size: 1.3rem; margin-bottom: 4px; } .anw-kachel .ic { display: block; margin: 0 auto 6px; width: 28px; height: 28px; color: var(--accent); } /* Symbol in der Klappenzeile (14.08.2026): akzentfarbig wie der Inhalt dahinter - die Klappe kuendigt an, was sie enthaelt. */ svg.ab-icon { color: var(--accent); } .anw-kachel b { font-size: .78rem; } .anw-gef { background: var(--not-bg); border: 1px solid var(--not-bd); border-radius: 10px; padding: 11px 12px; color: var(--not-fg); } /* ===================================================================== App-Anmutung Kleinigkeiten, die sonst verraten, dass ein Browser darunter steckt. Jede einzeln unscheinbar - zusammen machen sie den Unterschied zwischen "App" und "Webseite im Rahmen". ===================================================================== */ /* 1. Text ist nicht markierbar - ausser dort, wo man ihn wirklich kopieren will. In einer App wirkt eine blaue Markierung nach langem Tippen wie ein Fehler. Eingabefelder, Codeblöcke und ausgewählte Bereiche bleiben bewusst markierbar. */ body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; /* kein Kontextmenue beim langen Tippen */ } input, textarea, code, pre, .waehlbar, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } /* 2. Kein grauer Blitz beim Antippen. iOS und Android legen sonst eine Hervorhebung ueber das Element - Apps zeigen stattdessen ihre eigene Rueckmeldung. */ * { -webkit-tap-highlight-color: transparent; } /* 3. Sichtbare Rueckmeldung dafuer beim Druecken. Ohne sie fuehlt sich die Oberflaeche tot an - das ist der eigentliche Grund, warum Webseiten in Apps "billig" wirken. */ button:active, .btn:active, a.btn:active, .karte:active, [role="button"]:active { transform: scale(.975); transition: transform .06s ease; } @media (prefers-reduced-motion: reduce) { button:active, .btn:active, a.btn:active { transform: none; } } /* 4. Kein Ueberziehen am Listenende ("Gummiband"), aber Bereiche, die wirklich scrollen, behalten den Schwung. */ html, body { overscroll-behavior: none; } .scrollbar, .liste, main { -webkit-overflow-scrolling: touch; } /* 5. Schrift beim Drehen nicht neu skalieren. iOS vergroessert sonst Textbloecke im Querformat eigenmaechtig. */ body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* 6. Eingabefelder mindestens 16px. Alles darunter laesst iOS beim Fokussieren die ganze Seite heranzoomen - das ist der Sprung, den man als "hakelig" wahrnimmt. Sieht identisch aus, verhaelt sich aber ruhiger. */ input, select, textarea { font-size: max(16px, 1rem); } /* 7. Ziehen der ganzen Seite unterbinden. Ohne das laesst sich die Ansicht am Rand verschieben und darunter erscheint der Hintergrund. */ html { position: relative; overflow-x: hidden; } /* SOS-BESTAETIGUNGSBLATT (14.08.2026) -------------------------------------- Halbbildschirm von unten. Kein position:fixed-Vollbild mit eigener Scrollebene - das Blatt ist kurz genug, um immer zu passen. */ .sosblatt-hg{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.55); display:flex;align-items:flex-end;justify-content:center} .sosblatt-hg[hidden]{display:none} .sosblatt{width:100%;max-width:520px;background:var(--card,#161b22); border-top-left-radius:18px;border-top-right-radius:18px; padding:8px 18px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--border,#21262d)} .sosblatt-griff{width:34px;height:4px;border-radius:2px;background:#30363d;margin:0 auto 16px} .sosblatt-kopf{display:flex;align-items:center;gap:11px;margin-bottom:12px} .sosblatt-kopf h2{margin:0;font-size:1.15rem} .sosblatt-kreis{width:38px;height:38px;border-radius:50%;flex:0 0 auto; background:rgba(226,75,74,.15);display:flex;align-items:center;justify-content:center;font-size:1.1rem} .sosblatt-warum{margin:0 0 15px;font-size:.85rem;line-height:1.55;color:var(--muted,#8b949e)} .sosblatt-liste{background:var(--bg,#0d1117);border-radius:10px;padding:4px 14px;margin-bottom:16px} .sosblatt-z{display:flex;justify-content:space-between;align-items:center; padding:9px 0;font-size:.85rem} .sosblatt-z + .sosblatt-z{border-top:1px solid var(--border,#21262d)} .sosblatt-wert{color:var(--muted,#8b949e);font-size:.8rem} .sosblatt-wert.warn{color:#EF9F27} .sosblatt-wert.ok{color:#5DCAA5} .sosblatt-los{width:100%;background:#E24B4A;color:#fff;border:0;border-radius:10px; padding:15px;font-size:.95rem;font-weight:600;cursor:pointer} .sosblatt-ab{width:100%;background:none;border:0;color:var(--muted,#8b949e); padding:14px;font-size:.9rem;cursor:pointer;margin-top:4px} /* SYMBOLE (14.08.2026) ------------------------------------------------------ Ein Satz statt Emoji. currentColor sorgt dafuer, dass jedes Symbol die Farbe seines Umfelds annimmt - Knopftext, Ueberschrift, Navigation. */ .ic{width:1.15em;height:1.15em;vertical-align:-.18em;flex:0 0 auto; fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .ic-lg{width:1.5rem;height:1.5rem} .ic-xl{width:1.1rem;height:1.1rem} /* Symbol am Zeilenanfang der Verhaltensregeln (14.08.2026) */ .anw-ic{margin-right:8px;color:var(--accent2)} /* HELLES THEMA: WARNFARBE NUR FÜR WARNUNGEN (14.08.2026) ------------------- --not-bg ist im Dunklen ein kaum sichtbarer Rotstich (#2d1214), im Hellen aber deutliches Rosa (#ffebe9). Dieselben Regeln, zwei Wirkungen: der helle Bildschirm trug drei grosse Warnflaechen, obwohl nichts warnte. Hier bekommen Notfallblock und Verhaltensklappe eine neutrale Flaeche - Rot bleibt dem Schutzbanner ohne Abo und dem SOS-Knopf vorbehalten. */ [data-thema="hell"] .notfall { background: var(--card); border-color: var(--border); } [data-thema="hell"] .anw-gef { background: #fff5f4; border-color: var(--not-bd); } /* Taschenlampe: --feld (#eaeef2) auf weissem Grund ist fast unsichtbar. Ein kraeftigerer Rahmen macht sie als Knopf erkennbar, ohne sie in Konkurrenz zum SOS zu bringen. */ [data-thema="hell"] #btnLampe { background: var(--feld); border-color: #b8c0c8; } /* Helles Thema: Karten heben sich durch Schatten ab, nicht durch Rahmen. Der Rahmen bleibt als Rueckfall fuer Kontrasteinstellungen. */ [data-thema="hell"] .card, [data-thema="hell"] .abschnitt, [data-thema="hell"] .banner, [data-thema="hell"] .notfall { box-shadow: 0 1px 3px rgba(27,31,36,.06), 0 1px 2px rgba(27,31,36,.04); } /* JÜNGSTES BEBEN (14.08.2026) ---------------------------------------------- Der erste Eintrag trägt die Frage, mit der die meisten die Liste ansehen: was war gerade? Grosse Zahl statt Plakette – die Farbe kommt aus magColor(), also derselben Skala wie Karte und Plaketten. */ .ev-gross{cursor:pointer} .ev-gross-kopf{display:flex;align-items:center;gap:13px} .ev-gross-mag{min-width:46px;text-align:center;line-height:1} .ev-gross-mag b{display:block;font-size:1.7rem;font-weight:600} .ev-gross-mag small{display:block;font-size:.65rem;color:var(--muted);margin-top:3px} .ev-gross-trenn{width:1px;align-self:stretch;background:var(--border)} .ev-gross-ort{font-size:1.02rem;font-weight:500;line-height:1.3;margin-bottom:2px} .ev-gross:active{opacity:.7} /* Jüngstes Beben: eigene Fläche, damit es sich absetzt statt nur größer zu sein. Der Trennstrich brauchte eine Mindesthöhe – align-self:stretch kollabierte, weil die Zeile keine eigene Höhe vorgibt. */ .ev-gross{background:var(--feld);border-radius:10px;padding:14px 13px; margin-bottom:6px;border-bottom:0} .ev-gross-mag b{font-size:1.9rem} .ev-gross-mag small{color:var(--muted);font-size:.6rem;letter-spacing:.08em} .ev-gross-trenn{min-height:38px} /* Spürbarkeit am Standort (14.08.2026) */ .ev-felt{margin-top:12px;padding-top:11px;border-top:1px solid var(--border)} .ev-felt-t{font-size:.62rem;letter-spacing:.08em;color:var(--muted);margin-bottom:7px} .ev-felt-bar{display:flex;gap:3px;margin-bottom:6px} .ev-felt-bar span{flex:1;height:5px;border-radius:2px} .ev-felt-z{display:flex;justify-content:space-between;align-items:baseline} .ev-felt-z b{font-size:.85rem;font-weight:600} .ev-felt-z span{font-size:.75rem;color:var(--muted)} .ev-felt-hin{font-size:.75rem;color:var(--muted);line-height:1.45} /* KARTE "LETZTES BEBEN" (14.08.2026) */ .lb-kopf{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px} .lb-kopf span:first-child{font-size:.62rem;letter-spacing:.08em;color:var(--muted)} .lb-kopf span:last-child{font-size:.75rem;color:var(--muted)} .lb-zeile{display:flex;align-items:center;gap:12px;cursor:pointer} .lb-zeile:active{opacity:.7} .lb-mag{min-width:42px;text-align:center;line-height:1} .lb-mag b{display:block;font-size:1.55rem;font-weight:500} .lb-mag small{display:block;font-size:.6rem;color:var(--muted);margin-top:2px} .lb-trenn{width:1px;min-height:34px;background:var(--border)} .lb-ort{font-size:.95rem;font-weight:500;line-height:1.3;margin-bottom:2px} .lb-fuss{margin-top:12px;padding-top:11px;border-top:1px solid var(--border)} .lb-bar{display:flex;gap:3px;margin-bottom:6px} .lb-bar span{flex:1;height:5px;border-radius:2px} .lb-z{display:flex;justify-content:space-between;align-items:baseline} .lb-z b{font-size:.82rem;font-weight:500} .lb-z span{font-size:.75rem;color:var(--muted)} .lb-hin{font-size:.75rem;color:var(--muted);line-height:1.45} .lb-weiter{font-size:.72rem!important;letter-spacing:.08em;color:var(--muted);font-weight:500} /* Zeile unter dem Ortsnamen zurücknehmen: der Ort trägt die Information, Uhrzeit, Tiefe und Quelle sind Beiwerk. */ .lb-zeile .when{font-size:.76rem} /* KARTENANSICHT (14.08.2026) ------------------------------------------------ Vorher lag die Karte als weisses Rechteck in einer dunklen Karte - der Bruch war der eigentliche Grund, warum sie billig wirkte. Jetzt fuellt sie den Bereich; darunter eine Leiste mit Legende, damit die Ansicht mehr ist als nur eine Karte. */ #ansichtMap{padding:0} #mapFull{height:calc(100vh - 250px);min-height:340px;width:100%} .karte-leiste{padding:13px 16px calc(13px + env(safe-area-inset-bottom))} .karte-legende{display:flex;gap:13px;flex-wrap:wrap;align-items:center; margin-bottom:9px;font-size:.72rem;color:var(--muted)} .karte-legende i{font-style:normal;display:flex;align-items:center;gap:5px} .karte-legende b{width:11px;height:11px;border-radius:50%;display:inline-block} .karte-hin{font-size:.78rem;margin:0} .leaflet-control-attribution{font-size:.62rem!important;opacity:.75} /* Der Abstand kommt von main - die Kartenansicht hebt ihn per negativem Rand auf, ohne main fuer alle anderen Ansichten zu aendern. */ #ansichtMap{margin:-12px -12px 0} /* Karte macht Platz, sobald Details erscheinen - solange nichts gewaehlt ist, bleibt die volle Hoehe. */ #mapFull{transition:height .2s ease-out} /* Karte bei offenem Detail: 340 statt 420 px Abzug. Seit die Spuerbarkeits- frage nur noch eine Zeile belegt (aufklappbar seit 26.08.2026), braucht das Detail weniger Platz - und die Magnitudenlegende bleibt sichtbar. */ #ansichtMap.detail-offen #mapFull{height:calc(100vh - 340px);min-height:260px} /* Spuerbarkeitsfrage als aufklappbare Zeile */ .meldung-felt-frage{ display:flex;align-items:center;justify-content:space-between;gap:8px; width:100%;margin:0;padding:9px 0;background:none;border:0; color:var(--text);font:600 .86rem/1.3 inherit;text-align:left;cursor:pointer; } .meldung-felt-frage .felt-pfeil{ width:15px;height:15px;flex:none;color:var(--muted); transition:transform .18s ease-out; } .meldung-felt-frage.auf .felt-pfeil{transform:rotate(180deg)} .felt-stufen[hidden]{display:none} .karte-detail{background:var(--feld);border-radius:11px;padding:13px 14px;margin-bottom:11px} .karte-detail[hidden]{display:none} .kd-kopf{display:flex;align-items:center;gap:12px} .kd-mag{min-width:42px;text-align:center;line-height:1} .kd-mag b{display:block;font-size:1.45rem;font-weight:500} .kd-mag small{display:block;font-size:.58rem;color:var(--muted);margin-top:2px} .kd-trenn{width:1px;min-height:32px;background:var(--border)} .kd-ort{font-size:.92rem;font-weight:500;line-height:1.3;margin-bottom:2px} .kd-meta{font-size:.74rem;color:var(--muted)} .kd-zu{background:none;border:0;color:var(--muted);padding:6px;cursor:pointer; width:auto;margin:0;flex:0 0 auto} .kd-zu svg{width:17px;height:17px} /* FAMILIENBEREICH (14.08.2026) --------------------------------------------- */ .fam-titel{font-size:.62rem;letter-spacing:.08em;color:var(--muted);margin-bottom:4px} .fam-zeile{display:flex;align-items:center;gap:10px;padding:11px 0; border-bottom:1px solid var(--border)} .fam-zeile:last-child{border-bottom:0} .fam-av{width:32px;height:32px;border-radius:50%;background:var(--feld);flex:0 0 auto; display:flex;align-items:center;justify-content:center;font-size:.8rem; color:var(--muted);font-weight:600} .fam-nm{flex:1;font-size:.9rem} .fam-k{font-size:.6rem;padding:2px 7px;border-radius:4px} .fam-k.app{background:rgba(29,158,117,.16);color:#5DCAA5} .fam-k.tg{background:rgba(88,166,255,.14);color:#79b8ff} .fam-weg{background:transparent;border:0;color:var(--muted);width:30px;height:30px; padding:0;margin:0;font-size:1.2rem;line-height:1;cursor:pointer;flex:0 0 auto} .fam-warn{display:flex;gap:9px;align-items:flex-start;font-size:.73rem;line-height:1.45; background:rgba(239,159,39,.09);border:1px solid rgba(239,159,39,.28); border-radius:9px;padding:10px 12px;margin-top:12px;color:#EF9F27} .fam-haupt{width:100%;margin-top:14px;display:flex;align-items:center; justify-content:center;gap:8px} .fam-code{font-size:1.5rem;font-weight:800;letter-spacing:.15em;background:var(--feld); border:1px solid var(--border);border-radius:10px;padding:10px;text-align:center} .fam-details > summary{display:flex;align-items:center;gap:11px;padding:13px 15px; cursor:pointer;list-style:none;font-size:.88rem} .fam-details > summary::-webkit-details-marker{display:none} .fam-details + .fam-details{border-top:1px solid var(--border)} .fam-aktion{display:flex;gap:10px;margin-top:12px} .fam-sos,.fam-ok{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px; border:0;border-radius:12px;padding:15px 8px;color:#fff;font-size:.85rem; font-weight:600;margin:0;width:auto} .fam-sos{background:#c62828} .fam-ok{background:#2e7d32} .fam-sos .ic,.fam-ok .ic{width:21px;height:21px} /* Namensblock in der Familienkarte: abgesetzt, damit die Reihenfolge sichtbar ist - erst Name, dann verknuepfen. */ .fam-name{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)} /* Schalter für die Plattengrenzen in der Kartenleiste */ .karte-schalter{margin:0 0 10px;font-size:.8rem} /* MELDUNGSSTREIFEN (14.08.2026) -------------------------------------------- Vorher komplett inline gesetzt und ohne Symbol - das Muster einer Entwickler-Fehlermeldung, nicht einer App-Meldung. Jetzt dieselbe Sprache wie die Karten: Rundung, Schatten, Symbol im Kreis, Einblenden von oben. Der Vollbildalarm bleibt allein rot; hier zeigt die Farbe die Art an. */ /* BLATT VON UNTEN (02.09.2026) Vorher ein Kasten, der oben eingeblendet wurde und mit 86dvh fast den ganzen Schirm einnehmen konnte - dabei verdeckte er den SOS-Knopf. In einem Notfallsystem darf eine Nachricht ueber ein vergangenes Beben nie den Weg zum Notruf versperren. Jetzt wie das SOS-Blatt: von unten geschoben, mit Griff, wegwischbar. 45dvh laesst die untere Bildschirmhaelfte frei. */ .meldung{max-height:45dvh;overflow-y:auto;-webkit-overflow-scrolling:touch; position:fixed;left:0;right:0;bottom:0;z-index:4900; max-width:560px;margin:0 auto; border-top-left-radius:18px;border-top-right-radius:18px; padding:8px 16px calc(16px + env(safe-area-inset-bottom)); background:var(--card);border-top:1px solid var(--border); box-shadow:0 -10px 30px rgba(0,0,0,.45); animation:meldung-rein .3s cubic-bezier(.2,.8,.3,1)} @keyframes meldung-rein{from{transform:translateY(100%)}to{transform:none}} /* Der Selbsttest bleibt oben - eine Bestaetigung soll nicht unterbrechen. */ .meldung.oben{top:calc(10px + env(safe-area-inset-top));bottom:auto; left:10px;right:10px;border-radius:14px;max-height:86dvh; border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.45); animation:meldung-oben .22s ease-out} @keyframes meldung-oben{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}} /* Griff wie beim SOS-Blatt: zeigt, dass sich das Blatt wegwischen laesst. */ .meldung-griff{width:34px;height:4px;border-radius:2px;background:#30363d; margin:0 auto 14px;flex:0 0 auto} /* Magnitude gross statt als kleine Plakette - dieselben Farben wie in der Ereignisliste, damit nichts neu gelernt werden muss. */ .meldung-mag{min-width:64px;text-align:center;font-weight:700; font-size:1.5rem;padding:10px 8px;border-radius:10px; background:#8b949e;color:#fff;flex:0 0 auto} .meldung-mag.m2{background:#c9a227;color:#2b2200} .meldung-mag.m3{background:#f0883e;color:#331a00} .meldung-mag.m4{background:#e8590c;color:#fff} .meldung-mag.m5{background:#c62828;color:#fff} .meldung-mag.m6{background:#a01c23;color:#fff} .meldung-kopf{display:flex;align-items:flex-start;gap:11px} .meldung-kreis{width:34px;height:34px;border-radius:50%;flex:0 0 auto; display:flex;align-items:center;justify-content:center} .meldung-kreis .ic{width:18px;height:18px} .meldung-t{font-size:.92rem;font-weight:600;line-height:1.3;margin-bottom:2px} .meldung-b{font-size:.83rem;line-height:1.5;color:var(--muted);white-space:pre-line} /* Meldung: Karte, Spuerbarkeitsfrage, Scrollbereich (24.08.2026). Die Meldung kann mit Karte und vier Antwortzeilen laenger werden als der Schirm - deshalb scrollt der Inhalt, waehrend die Knoepfe unten stehen. */ .meldung-karte{width:100%;height:120px;object-fit:cover;border-radius:10px; margin-top:11px;border:1px solid var(--border);display:block} .meldung-felt-block{margin-top:13px;padding-top:12px; border-top:1px solid var(--border)} .meldung-felt-h{font-size:.86rem;font-weight:600;margin-bottom:9px} .meldung-felt-btn{display:flex;align-items:center;gap:10px;width:100%; margin:0 0 7px;padding:10px 12px;font-size:.85rem;text-align:left; background:var(--feld);color:var(--fg);border:1.5px solid var(--border); border-radius:10px;font-weight:500;min-height:44px} .meldung-felt-btn:hover{border-color:var(--stufe)} .meldung-felt-ic{flex:0 0 22px;display:flex;align-items:center} .meldung-felt-ic .ic{width:19px;height:19px} .meldung-knoepfe{display:flex;gap:8px;margin-top:12px} .meldung-knoepfe button{flex:1;margin:0;font-size:.82rem;padding:9px; display:flex;align-items:center;justify-content:center;gap:6px} /* Art: Bestaetigung (Selbsttest) gruen, Sachmeldung blau */ .meldung.ok .meldung-kreis{background:rgba(63,185,80,.16);color:#3fb950} .meldung.ok .meldung-t{color:#3fb950} .meldung.info .meldung-kreis{background:rgba(88,166,255,.15);color:#58a6ff} .meldung.info .meldung-t{color:#58a6ff} /* Meldung: Position je Art (14.08.2026) -------------------------------------- Selbsttest oben - eine Bestaetigung soll nicht unterbrechen. Bebenmeldung mittig mit Verdunklung: die will man lesen. */ .meldung.oben{top:calc(10px + env(safe-area-inset-top));left:10px;right:10px; transform:none;animation:meldung-oben .22s ease-out} /* BLATT VON UNTEN (02.09.2026) Diese Regel stand NACH der Grundregel und hat sie ueberschrieben - top:50% und ein transform setzten bottom:0 ausser Kraft, und das transform stoerte zusaetzlich das Wischen. Der Name "mitte" bleibt, weil ihn app.js setzt; er beschreibt nur noch die Herkunft, nicht mehr die Position. */ /* Offene Spuerbarkeitsfrage: mehr Platz, damit die vier Antwortzeilen sichtbar sind, ohne im Blatt zu scrollen. */ .meldung.weit{max-height:78dvh} /* Solange ein Blatt offen ist, bleibt die Seite dahinter stehen. */ body.blatt-offen{overflow:hidden} .meldung.mitte{top:auto;bottom:0;left:0;right:0;transform:none; animation:meldung-rein .3s cubic-bezier(.2,.8,.3,1)} @keyframes meldung-oben{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}} @keyframes meldung-mitte{from{opacity:0;transform:translateY(-50%) scale(.96)} to{opacity:1;transform:translateY(-50%) scale(1)}} /* HINTERGRUND (03.09.2026): Ohne ihn liess sich die Seite hinter dem Blatt scrollen - man verlor die Meldung aus dem Blick, waehrend sie noch offen war. Derselbe Aufbau wie beim SOS-Blatt. */ .meldung-hg{position:fixed;inset:0;z-index:4890;background:rgba(0,0,0,.55)} .meldung-z1{display:flex;align-items:baseline;gap:8px;margin-bottom:3px} /* Die kleine Plakette von hier ist entfallen (02.09.2026) - sie stand nach der grossen Fassung weiter oben und hat sie ueberschrieben. Die Magnitude ist die Angabe, auf die zuerst geschaut wird. */ .meldung-mag.m3{background:#f0883e;color:#331a00} .meldung-mag.m4{background:#e8590c;color:#fff} .meldung-mag.m5{background:#c62828;color:#fff} .meldung-mag.m6{background:#a01c23;color:#fff} .meldung-zeit{font-size:.72rem;color:var(--muted);margin-left:auto;white-space:nowrap} .meldung-felt{font-size:.8rem;font-weight:600;margin-top:4px} .meldung-balken{height:2px;border-radius:1px;background:var(--border); margin-top:12px;overflow:hidden} .meldung-balken i{display:block;height:100%;width:100%;border-radius:1px;background:#58a6ff} .meldung.ok .meldung-balken i{background:#3fb950} .meldung-knoepfe .haupt{background:rgba(88,166,255,.14); border-color:rgba(88,166,255,.4);color:#58a6ff} .meldung.ok .meldung-knoepfe .haupt{background:rgba(63,185,80,.14); border-color:rgba(63,185,80,.4);color:#3fb950} /* Willkommenstext: Leerzeilen aus i18n als Absaetze anzeigen, ohne HTML aus der Sprachdatei zu interpretieren. */ .ob-absaetze{white-space:pre-line;line-height:1.55}