/* 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;
  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;
}
.marke:hover strong { color: var(--blau-dunkel); }
.marke strong { display: block; font-size: 1.02rem; }
.marke small { color: var(--blau); font-weight: 600; }
.aktionen { display: flex; gap: .5rem; }
.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;
}
.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: #6B7F86; 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 {
  border: none; background: var(--blau); color: var(--nebel);
  font: inherit; font-weight: 700;
  padding: .7rem 1.2rem; border-radius: 12px; cursor: pointer;
}
#btnSenden:hover { background: var(--blau-dunkel); }
#btnSenden:disabled { background: var(--welle); cursor: wait; }
.fussnote {
  width: 100%; max-width: 760px; margin: .5rem auto 0;
  font-size: .75rem; color: #6B7F86; 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;
}
.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; }

/* ---------- 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;
}

/* ---------- Lebende Postkarte im Garten (js/postkarten.js, JP) ---------- */
.garten-postkarte { margin: 0 0 .8rem; }
.garten-postkarte video,
.garten-postkarte img {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--welle-hell);
}