/* TYT-App – Ruhe, Klarheit, Weniger, Vertrauen.
   Palette aus dem Logo (Bergblau/Welle). Keine roten Warnhinweise.

   Bernstein seit 2026-08-13 von #C99550 auf #946C2E vertieft: als sitweiter
   Fokus-Rahmen (:focus-visible) erreichte die ursprüngliche Farbe nur 2.66:1
   Kontrast gegen Weiß - unter den 3:1, die WCAG 1.4.11 für Nicht-Text-UI
   verlangt, und weit unter 4.5:1 dort, wo dieselbe Variable als Text dient
   (.me-badge). Der neue Wert erreicht 4.91:1 (WCAG-Formel exakt nachgerechnet). */

:root {
  --nebel: #F3F8FA;
  --tinte: #22303B;
  --blau: #1877D2;
  --blau-dunkel: #0E5CAB;
  --welle: #35AFD5;
  --welle-hell: #DFF2F7;
  --bernstein: #946C2E;
  --karte: #FFFFFF;
}

/* Tsuru (鶴, Geltungsraum JP): eigenes Rigging-System, siehe
   css/tsuru_rigging.css und app/assets/tsuru/*.svg. Die Fill-Farben leben
   dort als literale Hex-Werte in den einzelnen SVG-Dateien (eigener
   Dokumentkontext, CSS-Variablen von hier reichen nicht hinein) - deshalb
   keine Tsuru-Variablen in diesem :root, das wären totes CSS. */

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--tinte);
  background: var(--nebel);
  display: flex;
  flex-direction: column;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible { outline: 3px solid var(--bernstein); outline-offset: 2px; }

/* Skip-Link (WCAG 2.4.1): standardmäßig verborgen, erscheint bei Tastaturfokus. */
.skip-link {
  position: absolute; top: 0; left: -9999px; z-index: 1000;
  background: var(--karte); color: var(--blau-dunkel);
  padding: .6rem 1.1rem; border-radius: 0 0 8px 0;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Kopf ---------- */
.kopf {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  /* Dieselbe Ursache wie bei .aktionen, eine Ebene hoeher. Ohne
     `flex-wrap` teilen sich Marke und Knopfzeile zwingend EINE Reihe -
     auf 375 px blieben der Marke 65 px, und "じぶんの分身" brach Zeichen
     fuer Zeichen um: 297 px hoch. Auf Englisch faellt das nie auf, weil
     "Your twin" kuerzer ist und frueher passt. */
  flex-wrap: wrap;
  padding: .8rem 1rem;
  background: var(--karte);
  border-bottom: 1px solid var(--welle-hell);
}
.marke {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: inherit; border-radius: 8px;
  /* Die Marke schrumpft nie - lieber bricht die Knopfzeile darunter um. */
  flex: 0 0 auto;
}
.marke:hover strong { color: var(--blau-dunkel); }
.marke strong { display: block; font-size: 1.02rem; white-space: nowrap; }
.marke small { color: var(--blau); font-weight: 600; }
/* KORRIGIERT 25.08.2026 — der teuerste Layoutfehler des Projekts, und er
   war nur auf Japanisch sichtbar.
   Hier stand `display: flex; gap: .5rem;` ohne `flex-wrap`. Die Knoepfe
   standen damit zwingend in EINER Reihe und schrumpften stattdessen:
   Gemessen auf 424 px waren auf Japanisch ALLE Knoepfe exakt 41 px breit,
   und der Text brach Zeichen fuer Zeichen senkrecht um. Die Kopfzeile
   nahm 323 px ein - 35 % des Telefonbildschirms. Auf Englisch dieselbe
   Seite: 92 px, 7 %.
   Der Grund ist die Sprache selbst: "おぼえていること" ist ein Wort und
   acht Zeichen lang; "Memories" passt in eine Zeile. Ein Layout, das nur
   mit kurzen Beschriftungen geprueft wurde, faellt genau im Zielmarkt um.
   Lieber eine zweite Reihe als ein gequetschter Knopf. */
.aktionen {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.leise {
  border: 1px solid var(--welle); background: transparent; color: var(--blau-dunkel);
  border-radius: 8px; padding: .4rem .8rem; font: inherit; font-size: .85rem;
  font-weight: 600; cursor: pointer;
  /* Eine Beschriftung bricht nie mitten im Wort um. Japanisch kennt keine
     Leerzeichen - ohne diese Zeile zerlegt der Browser "すべて削除" in
     fuenf Zeilen mit je einem Zeichen. */
  white-space: nowrap;
}
.leise:hover { background: var(--welle-hell); }

/* ---------- Verlauf ---------- */
main {
  flex: 1; overflow-y: auto;
  padding: 1.2rem 1rem 2rem;
  display: flex; flex-direction: column; gap: .9rem;
  width: 100%; max-width: 760px; margin: 0 auto;
}
.begruessung {
  background: var(--karte);
  border: 1px solid var(--welle-hell);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  color: #37474F;
  text-align: center;
}
.begruessung-logo { width: 72px; height: auto; margin-bottom: .8rem; }
.begruessung .herzsatz, .begruessung p:not(.herzsatz) { text-align: left; }
.herzsatz {
  font-family: Georgia, "Iowan Old Style", Cambria, "Times New Roman", serif; font-style: italic;
  color: var(--blau); margin-bottom: .4rem;
}

.nachricht {
  max-width: 85%;
  padding: .8rem 1.05rem;
  border-radius: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.vom-menschen {
  align-self: flex-end;
  background: var(--blau);
  color: var(--nebel);
  border-bottom-right-radius: 4px;
}
.vom-zwilling {
  align-self: flex-start;
  background: var(--karte);
  border: 1px solid var(--welle-hell);
  border-bottom-left-radius: 4px;
}
.vom-zwilling.wartet { color: #55666E; font-style: italic; }

/* Das Licht: Transparenz je Antwort, ausklappbar */
.transparenz { margin-top: .6rem; font-size: .82rem; }
.transparenz summary {
  cursor: pointer; color: var(--blau); font-weight: 700;
  list-style: none;
}
.transparenz summary::before { content: "◦ "; color: var(--bernstein); }
.transparenz[open] summary::before { content: "• "; }
.transparenz div {
  margin-top: .4rem; padding: .5rem .7rem;
  background: var(--welle-hell); border-radius: 8px; color: #37474F;
}

/* ---------- Eingabe ---------- */
.eingabe {
  background: var(--karte);
  border-top: 1px solid var(--welle-hell);
  padding: .8rem 1rem 1rem;
}
#formular {
  display: flex; gap: .6rem; align-items: flex-end;
  width: 100%; max-width: 760px; margin: 0 auto;
}
#eingabeFeld {
  flex: 1; resize: none;
  font: inherit; line-height: 1.5;
  padding: .7rem .9rem;
  border: 1.5px solid var(--welle);
  border-radius: 12px;
  background: var(--nebel);
  max-height: 10rem;
}
#eingabeFeld:focus { border-color: var(--blau); outline: none; }
#btnSenden {
  /* --blau-dunkel statt --blau: heller Text auf --blau erreicht nur
     4.26:1. Gleiche Begruendung wie bei .modell-kopf .leise weiter
     unten - dort war es schon korrigiert, hier nicht. */
  border: none; background: var(--blau-dunkel); color: var(--nebel);
  font: inherit; font-weight: 700;
  padding: .7rem 1.2rem; border-radius: 12px; cursor: pointer;
}
#btnSenden:hover { background: #0A4A8C; }   /* eigener Ton, sonst kein Unterschied */
#btnSenden:disabled { background: var(--welle); cursor: wait; }
.fussnote {
  width: 100%; max-width: 760px; margin: .5rem auto 0;
  /* #6B7F86 kam bei 12 px auf 4.20:1 - knapp unter den noetigen 4.5.
     Dieselbe Korrektur wie beim Hilfeweg, gleicher Ton. */
  font-size: .75rem; color: #55666E; text-align: center;
}

/* ---------- Rechtslinks im Fussbereich (Geltungsraum JP, 21.08.2026) ----------
   In der installierten PWA gibt es keine Browser-Leiste - ohne diese Zeile
   haette der Mensch dort KEINEN Weg zur Datenschutzerklaerung. Bewusst leise
   gestaltet, damit sie nicht vom Gespraech ablenken, aber mit einer
   Trefferflaeche, die auf dem Telefon sicher zu treffen ist: das Padding hebt
   die Hoehe ueber die 24px, die WCAG 2.2 als Mindestmass nennt (ohne Padding
   waren es 21px). Farbe #5C6E75 = 5.4:1 auf dem hellen Grund, also AA. */
footer .rechtlich {
  width: 100%; max-width: 760px; margin: .1rem auto 0;
  text-align: center;
}
footer .rechtlich a {
  display: inline-block;
  padding: .4rem .5rem;
  font-size: .75rem;
  color: #5C6E75;
  text-decoration: none;
}
footer .rechtlich a:hover,
footer .rechtlich a:focus-visible {
  color: var(--blau-dunkel);
  text-decoration: underline;
}

/* ---------- Anbieten (Regime B): die behutsame Angebots-Karte ---------- */
.angebot-karte {
  background: var(--welle-hell);
  border: 1px solid var(--welle);
  border-radius: 12px;
  padding: .7rem .85rem;
  color: var(--tinte);
  margin: .2rem 0;
}
/* KEIN pre-wrap. `.nachricht` bewahrt Zeilenumbrüche, weil eine Antwort des
   Zwillings sie enthalten darf - eine Karte ist aber Markup, kein Text. Mit
   pre-wrap wurden die Einrückungen aus index.html zu SICHTBAREM Leerraum:
   gemessen am 22.08.2026 **149 px Nichts** in der Garten-Karte, drei leere
   Textknoten ("\n    ") zwischen den Kindern. Und weil das Panel dadurch an
   seine Höhengrenze stieß, schrumpfte der Flexbox-Ausgleich ausgerechnet
   das Bildfenster (240 → 192 px). Ein Leerzeichen im Quelltext hat die
   Postkarte kleiner gemacht. */
.angebot-karte { white-space: normal; }
.angebot-karte .a-zitat { font-style: italic; color: var(--blau-dunkel); margin-bottom: .35rem; }
.angebot-karte .a-frage { font-size: .9rem; margin-bottom: .55rem; }
.angebot-karte .a-knoepfe { display: flex; gap: .5rem; }
.angebot-karte .a-knoepfe button { font-size: .85rem; }

/* ==========================================================================
   Die beiden Panels: der Garten und der Spiegel        (Fund vom 22.08.2026)
   ==========================================================================
   BEFUND: `.modell-panel` wurde in index.html seit jeher benutzt und hatte
   in KEINER Stylesheet-Zeile eine Regel. Solange die App auf hellem Nebel
   stand, fiel das nicht auf — seit der japanischen Bühne stehen beide
   Panels ohne Hintergrund, ohne Rand, ohne Abstand DIREKT auf der Kulisse.
   Gemessen am laufenden Stand: position static · background rgba(0,0,0,0) ·
   padding 0 · border none · box-shadow none · z-index auto.
   Ergebnis für den Menschen: dunkler Text auf Abendrot, und der
   Schließen-Knopf war praktisch unsichtbar (Rückmeldung des
   Projekteigentümers aus dem Zehn-Besuche-Durchgang).

   HALTUNG DER LÖSUNG: kein neues Feature, keine Bühne über der Bühne. Eine
   ruhige Karte, die sich vor die Welt legt, ohne sie auszuschalten — die
   Kulisse bleibt weich sichtbar. Wer den Garten öffnet, soll nicht das
   Gefühl haben, die Welt verlassen zu haben. */
.modell-panel {
  position: fixed;
  z-index: 30;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 2rem));
  max-height: min(84vh, 46rem);
  overflow-y: auto;
  background: var(--karte);
  border: 1px solid var(--welle-hell);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(20, 34, 44, .30);
  padding: 1rem 1.15rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
/* MUSS bleiben: `display:flex` oben schlägt das `[hidden] {display:none}`
   des Browsers (Autorenregeln gewinnen gegen die Standardregeln). Ohne
   diese Zeile stünden beide Panels dauerhaft offen - der Fehler, der beim
   Bau dieses Abschnitts fast passiert wäre. Ein Test hält ihn fest. */
.modell-panel[hidden] { display: none; }
/* Der Schleier. Nicht schwarz und nicht undurchsichtig: Die Welt tritt
   zurück, verschwindet aber nicht. pointer-events bleiben aus - der
   Schleier ist Atmosphäre, kein Bedienelement, und ein versehentlicher
   Klick soll nichts schließen, was jemand gerade liest.

   EIGENES ELEMENT, nicht `.modell-panel::before` (korrigiert 22.08.2026).
   Der erste Entwurf war ein Pseudo-Element mit `z-index: -1`. Das malt
   aber INNERHALB des Panel-Stapels - und in der Malreihenfolge kommt ein
   negativer Kind-Stapel NACH dem eigenen Hintergrund des Elements. Der
   Schleier legte sich also über den weißen Grund des Panels: Der ganze
   Inhalt wirkte grau, nur der klebende Kopf blieb hell, weil der einen
   eigenen positiven z-index trägt. Gemessen wäre das nicht aufgefallen
   (`backgroundColor` meldete brav Weiß) - gesehen sofort. */
.panel-schleier {
  position: fixed;
  inset: 0;
  z-index: 29;                     /* unter dem Panel (30), über der Bühne */
  pointer-events: none;
  background: rgba(24, 36, 46, .38);
  backdrop-filter: blur(2px);
}
.panel-schleier[hidden] { display: none; }
/* Der Kopf bleibt beim Blättern stehen — der Schließen-Knopf ist damit
   IMMER erreichbar, auch in einer langen Erinnerungsliste. */
.modell-kopf {
  position: sticky;
  top: -1rem;
  z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--karte);
  margin: -1rem -1.15rem 0;
  padding: 1rem 1.15rem .6rem;
  border-bottom: 1px solid var(--welle-hell);
}
.modell-kopf strong { font-size: 1.05rem; }
/* Schließen ist der einzige gefüllte Knopf im Panel-Kopf. Bewusst so:
   Ein Ausgang, den man suchen muss, ist kein Ausgang. --blau-dunkel statt
   --blau, weil die Schrift klein und fett ist (WCAG 1.4.3 verlangt dort
   4.5:1; --blau erreicht gegen Weiß nur ~4.2:1, --blau-dunkel ~6.2:1).
   Trefferfläche über den 24 px aus WCAG 2.2. */
.modell-kopf .leise {
  background: var(--blau-dunkel);
  border-color: var(--blau-dunkel);
  color: #FFFFFF;
  padding: .45rem 1.05rem;
  min-height: 32px;
  flex: none;
}
.modell-kopf .leise:hover { background: #0A4A8C; border-color: #0A4A8C; }
.modell-hinweis { font-size: .85rem; color: #55666E; }
/* Im Panel teilen sich Bild und Karte dieselbe Breite. `.nachricht` ist auf
   85 % begrenzt, weil eine Sprechblase im Verlauf nicht die ganze Zeile
   füllen soll - hier stand die Karte dadurch schmaler als das Bild darüber
   und die Kanten liefen nicht zusammen. Harmonie ist meistens nur: dieselbe
   Kante. */
.modell-panel .angebot-karte { max-width: 100%; margin: 0; }
.modell-panel .angebot-karte .a-zitat { font-size: 1.02rem; line-height: 1.7; margin-bottom: .8rem; }
.modell-add { display: flex; gap: .5rem; }
.modell-add input {
  flex: 1; min-width: 0;
  font: inherit;
  padding: .55rem .75rem;
  border: 1.5px solid var(--welle);
  border-radius: 10px;
  background: var(--nebel);
  color: var(--tinte);
}
.modell-add input:focus { border-color: var(--blau); outline: none; }
.modell-add button {
  border: none; background: var(--blau); color: var(--nebel);
  font: inherit; font-weight: 700;
  padding: .55rem 1.05rem; border-radius: 10px; cursor: pointer;
}
.modell-add button:hover { background: var(--blau-dunkel); }
.modell-liste { display: flex; flex-direction: column; gap: .5rem; }
.modell-eintrag {
  background: var(--nebel);
  border: 1px solid var(--welle-hell);
  border-radius: 10px;
  padding: .6rem .75rem;
  font-size: .93rem;
  line-height: 1.5;
}
.me-meta { font-size: .78rem; color: #55666E; margin-top: .3rem; }
.modell-leer { color: #55666E; font-size: .9rem; font-style: italic; }
.modell-fuss {
  display: flex; gap: .5rem; justify-content: flex-end;
  border-top: 1px solid var(--welle-hell);
  padding-top: .7rem;
}
.leise.gefahr { border-color: #B4553F; color: #8E3D2A; }
.leise.gefahr:hover { background: #FBEFEC; }

/* ---------- Vergänglichkeit (Regime B): Durchsicht ---------- */
.modell-eintrag.faellig { border-color: var(--bernstein); background: #fbf4e9; }
.me-badge { color: var(--bernstein); font-weight: 600; }
.me-knoepfe { display: flex; gap: .4rem; margin-top: .45rem; }
.me-knoepfe button { margin-top: 0; }
.me-gilt { font-size: .8rem; padding: .2rem .55rem; }

/* Archivierte (ruhende) Einträge: sichtbar, aber zurückgenommen. */
.modell-eintrag.ruhend { opacity: .62; }

/* Die sechs Sichten (Turm): ruhige Gruppierung, keine neue Bühne. */
.sicht-gruppe { margin-top: .9rem; }
.sicht-gruppe:first-child { margin-top: 0; }
.sicht-titel {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--blau-dunkel);
  opacity: .75;
  margin: 0 0 .35rem;
}

/* ---------- Die Postkarte im Garten (js/postkarten.js, JP) --------------
   Seit dem 22.08.2026 ein SCHWEBENDES BILD statt eines Videos, und der
   Grund ist gemessen, nicht empfunden: Alle 35 Clips laufen mit vier
   Bildern je Sekunde (18 Bilder auf 4,5 s). Das ist eine Diaschau, kein
   Film - "angereihte Bilder", wie der Projekteigentümer es genannt hat,
   bevor die Zahl auf dem Tisch lag. Keine Abspielrate kann Bilder
   glätten, die es nicht gibt.

   Diese Bewegung dagegen läuft im Takt des Bildschirms, wird vom
   Compositor getragen (nur `transform`, kein Layout, kein Repaint) und
   hat KEINE Nahtstelle: `alternate` lässt sie am Ende einfach umkehren.
   Genau das, worum gebeten wurde - Harmonie und flüssige Übergänge.

   26 Sekunden für einen Weg, 9 % Weg. Der erste Versuch stand bei 42 s
   und 7 % - und war NICHT ZU SEHEN: nachgemessen bewegte sich das Bild
   in drei Sekunden um weniger als einen Hundertstel Maßstab. Eine
   Bewegung, die niemand bemerkt, ist keine Bewegung, sondern nur
   Rechenlast. Jetzt trägt sie, ohne zu drängen: langsam genug, dass man
   sie nicht verfolgt, deutlich genug, dass das Bild lebt. */
/* Ein FESTES Fenster, kein Bild, das seine Form mitbringt. Die 57 Fotos
   haben unterschiedliche Seitenverhältnisse (3:2 bis fast 3:1) - ohne feste
   Form sprang die Fenstergröße mit jedem Öffnen. 16:9 ist großzügig genug,
   dass das Bild der Hauptdarsteller bleibt, und immer gleich hoch.
   `flex: none`, damit der Höhenausgleich des Panels nie wieder ausgerechnet
   hier spart. */
.garten-postkarte {
  flex: none;
  margin: 0 0 .2rem;
  aspect-ratio: 16 / 9;
  max-height: 44vh;               /* auf flachen Fenstern nicht die Karte verdrängen */
  border-radius: 12px;
  border: 1px solid var(--welle-hell);
  overflow: hidden;               /* hält das wandernde Bild in der Rundung */
}
.garten-postkarte video,
.garten-postkarte img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.garten-postkarte video { transition: opacity .55s ease-in-out; }

@keyframes postkarte-schwebt {
  from { transform: scale(1.02); }
  to   { transform: scale(1.14); }
}
.garten-postkarte img.schwebt {
  animation: postkarte-schwebt 22s ease-in-out infinite alternate;
  will-change: transform;         /* eine eigene Ebene, 22 s lang - hier lohnt sie */
}
/* Vier Richtungen. Ein Bild, das immer in dieselbe Ecke zieht, wird beim
   fünften Besuch zur Bewegung, die man schon kennt (Regel 1 des
   Langzeit-Audits: keine Wiederholungs-Müdigkeit).

   Der NEGATIVE Vorlauf ist kein Feinschliff, sondern die Antwort auf
   „bewegen sich die Bilder überhaupt noch?" — `ease-in-out` beginnt fast
   im Stillstand, und genau in den ersten Sekunden schaut ein Mensch hin.
   Jede Richtung steigt deshalb an einer anderen Stelle der Kurve ein, wo
   die Bewegung schon trägt. */
.garten-postkarte img.schwebt-1 { transform-origin: 22% 30%; animation-delay: -5s; }
.garten-postkarte img.schwebt-2 { transform-origin: 78% 32%; animation-delay: -8s; }
.garten-postkarte img.schwebt-3 { transform-origin: 30% 72%; animation-delay: -11s; }
.garten-postkarte img.schwebt-4 { transform-origin: 70% 68%; animation-delay: -14s; }

/* Wer Bewegung abbestellt hat, bekommt dieselbe Postkarte ohne Wind -
   keine abgespeckte Fassung, nur still. */
@media (prefers-reduced-motion: reduce) {
  .garten-postkarte video { transition: none; }
  .garten-postkarte img.schwebt { animation: none; transform: none; }
}

/* ---------------------------------------------------------------------------
   Der Weg zu Menschen (23.08.2026)

   Zurueckhaltend mit Absicht: zugeklappt, in der Farbe der Fussnote, kein
   Warnrot, kein Ausrufezeichen. Wer ihn nicht braucht, soll ihn nicht
   bemerken; wer ihn braucht, findet ihn ohne Suchen - auch offline, auch
   wenn der Kern schweigt. Ein Notausgang wird nicht angestrahlt, er ist
   einfach immer da.
   --------------------------------------------------------------------------- */
.hilfe {
  margin: .5rem auto 0;
  max-width: 46rem;
  font-size: .82rem;
  color: #607D8B;
}
.hilfe > summary {
  cursor: pointer;
  list-style: none;
  padding: .3rem 0;
  color: #546E7A;
}
.hilfe > summary::-webkit-details-marker { display: none; }
.hilfe > summary::before {
  content: "›";
  display: inline-block;
  margin-inline-end: .45rem;
  transition: transform .18s ease;
}
.hilfe[open] > summary::before { transform: rotate(90deg); }
.hilfe > summary:focus-visible { outline: 2px solid #1877D2; outline-offset: 3px; }

.hilfe-liste {
  list-style: none;
  margin: .2rem 0 .1rem;
  padding: 0 0 0 1rem;
}
.hilfe-liste li {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .6rem;
  padding: .18rem 0;
}
.hilfe-liste a {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #1877D2;
  text-decoration: none;
  /* Trefferflaeche (WCAG 2.2, 2.5.8: 24x24). Gemessen am 25.08.2026
     waren die Nummern 83x21, die 119 sogar 22x21 - die wichtigsten Links
     der App waren die am schwersten zu treffenden. Negative
     Aussenabstaende halten das Layout genau dort, wo es vorher war: Die
     Flaeche waechst, die Zeile springt nicht. */
  display: inline-flex; align-items: center;
  min-height: 24px; min-width: 24px;
  padding: .15rem .3rem; margin: -.15rem -.3rem;
}
.hilfe-liste a:hover, .hilfe-liste a:focus-visible { text-decoration: underline; }
/* KORRIGIERT 25.08.2026. Hier stand #78909C - gemessen 3.35:1, noetig
   sind 4.5:1. Das waren die Beschreibungen der Notrufnummern
   ("24 Stunden, kostenlos", "wenn Lebensgefahr besteht") und damit der
   SCHLECHTESTE Kontrast der ganzen App, ausgerechnet auf dem einen Weg,
   der nie versagen darf. #55666E wird an drei anderen Stellen dieser
   Datei bereits benutzt und erreicht 5.9:1. */
.hilfe-liste span { color: #55666E; }

@media (prefers-reduced-motion: reduce) {
  .hilfe > summary::before { transition: none; }
}

/* ---------- Weitergabe von Hand (Abschlussphase, 25.08.2026) ----------
   Der QR-Code steht gross und zentriert, weil genau das der Vorgang ist:
   jemandem den Bildschirm hinhalten. Ein kleiner Code neben zwei Knoepfen
   waere ein Symbol - dieser hier ist das Bedienelement.

   Weiss hinterlegt und nicht transparent: Der Code traegt currentColor,
   damit er in hell UND dunkel funktioniert - aber ein Scanner braucht
   Kontrast in EINE Richtung. Der weisse Grund garantiert ihn, unabhaengig
   davon, was hinter dem Panel liegt. Der Rand (padding) ist die ruhige
   Zone: ohne sie erkennen viele Scanner den Code nicht. */
.teilen-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
}
.teilen-qr img {
  width: min(220px, 60vw);
  height: auto;
  padding: .7rem;
  background: #FFFFFF;
  border: 1px solid var(--welle-hell);
  border-radius: 12px;
  color: #101E26;                  /* currentColor des SVG */
}
.teilen-adresse {
  font-size: .9rem;
  color: #55666E;
  letter-spacing: .01em;
}
.teilen-knoepfe {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: center;
}
/* LINE traegt seine eigene Farbe - in Japan ist der gruene Knopf ein
   Wegweiser, kein Schmuck. Weisse Schrift auf #06C755 erreicht nur ~2.4:1
   und waere unlesbar; die dunklere Fassung #05A247 traegt weisse Schrift
   mit ~3.6:1 und die Schrift ist hier gross genug (WCAG 1.4.3 grosser
   Text: 3:1). Gemessen, nicht geschaetzt. */
.teilen-line {
  background: #05A247;
  border-color: #05A247;
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.teilen-line:hover, .teilen-line:focus-visible { background: #048C3D; border-color: #048C3D; }