/* TrustYourTwin – Website
   Palette (aus dem Logo): Nebel #F3F8FA · Tinte #22303B · Bergblau #1877D2 · Welle #35AFD5 · Bernstein #946C2E (nur das Herz)
   Regeln aus 05_UX_Design: Ruhe, Klarheit, Weniger, Vertrauen.
   Keine roten Warnhinweise. Keine Unruhe.

   Bernstein seit 2026-08-13 von #C99550 auf #946C2E vertieft: die ursprüngliche
   Farbe erreichte als Fokus-Rahmen (:focus-visible, sitweit) 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) und bleibt derselbe Gold-Ton. */

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

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

html { scroll-behavior: smooth; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--tinte);
  background: var(--nebel);
}

h1, h2, h3, blockquote {
  font-family: Georgia, "Iowan Old Style", Cambria, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.2;
}

/* ---------- Kopf ---------- */
.top {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 1.1rem 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--tinte);
  font-weight: 700; letter-spacing: .01em;
}
.top nav { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.top nav a {
  color: var(--blau-dunkel); text-decoration: none; font-weight: 600; font-size: .95rem;
  border-bottom: 2px solid transparent;
  /* Trefferflaeche mindestens 24x24 (WCAG 2.2, 2.5.8). Japanische
     Navigationspunkte sind oft EIN Zeichen - "心" war 15 px breit und
     damit auf dem Telefon kaum zu treffen. Lateinische Beschriftungen
     verdecken dieses Problem, weil sie ohnehin breiter sind. */
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; min-height: 24px;
  padding: .25rem .3rem 2px;
}
.top nav a:hover, .top nav a:focus-visible { border-bottom-color: var(--welle); }
/* Bugfix: ".top nav a" (Spezifität 0,1,2) überschrieb sonst die weiße Knopf-
   Textfarbe von ".knopf" (0,1,0) mit dem blauen Link-Blau - Text und
   Hintergrund wurden identisch blau, der Knopftext war unlesbar/unsichtbar. */
.top nav a.knopf { color: var(--nebel); border-bottom: none; padding-bottom: 0; }
.lang {
  border: 1.5px solid var(--blau-dunkel); background: transparent; color: var(--blau-dunkel);
  border-radius: 999px; padding: .25rem .8rem; font: inherit; font-weight: 700;
  cursor: pointer;
}
.lang:hover { background: var(--welle-hell); }

: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; }

/* ---------- Hero ---------- */
.hero {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 4.5rem 1.4rem 3rem;
  text-align: center;
}
.eyebrow {
  text-transform: uppercase; letter-spacing: .18em; font-size: .78rem;
  font-weight: 700; color: var(--blau-dunkel);
}
.hero-logo { width: 190px; max-width: 50vw; height: auto; margin-bottom: 1.6rem; }
.hero h1 { font-size: clamp(2.3rem, 6vw, 4rem); margin: .8rem 0 1.2rem; }
.lede { max-width: 46rem; margin: 0 auto; color: #3A4C53; }

/* Signaturelement: die Herzlinie – sie atmet, sie hetzt nicht */
.herzlinie { max-width: 56rem; margin: 3rem auto 0; }
.herzlinie svg { width: 100%; height: 90px; display: block; }
.herzlinie .linie {
  fill: none; stroke: var(--bernstein); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  animation: atmen 7s ease-in-out infinite;
}
.herzlinie .punkt { fill: var(--bernstein); animation: atmen 7s ease-in-out infinite; }
@keyframes atmen {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .herzlinie .linie, .herzlinie .punkt { animation: none; opacity: .85; }
  html { scroll-behavior: auto; }
}
.herzsatz {
  margin-top: .6rem;
  font-family: Georgia, "Iowan Old Style", Cambria, "Times New Roman", serif;
  font-style: italic; color: var(--blau-dunkel);
}

/* ---------- Zitat-Band ---------- */
.band {
  background: var(--blau-dunkel);
  color: var(--nebel);
  padding: 3.5rem 1.4rem;
}
.band blockquote { max-width: 44rem; margin: 0 auto; text-align: center; }
.band p { font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-style: italic; }
.band cite {
  display: block; margin-top: 1.2rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-style: normal;
  font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--welle);
}

/* ---------- Blöcke ---------- */
.block { max-width: var(--breite); margin: 0 auto; padding: 4rem 1.4rem; }
.block h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 1rem; }
.intro { max-width: 46rem; color: #3A4C53; margin-bottom: 2.2rem; }

/* ---------- Handbuch: schmale Zusätze zu den bestehenden Block-Klassen ---------- */
.hb-zentriert { margin-left: auto; margin-right: auto; text-align: center; }
.hb-cta { text-align: center; }
.hb-cta .intro { margin-left: auto; margin-right: auto; }

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}
.raster article {
  background: var(--karte);
  border: 1px solid var(--welle-hell);
  border-top: 3px solid var(--welle);
  border-radius: 10px;
  padding: 1.4rem 1.5rem;
}
.raster h3 { font-size: 1.25rem; margin-bottom: .5rem; color: var(--blau-dunkel); }
.raster p { font-size: .98rem; color: #37474F; }

.alt { background: var(--welle-hell); max-width: none; }
.alt > * { max-width: var(--breite); margin-left: auto; margin-right: auto; }
.alt h2 { padding-top: 0; }

.liste { list-style: none; padding: 0; display: grid; gap: .9rem; max-width: 52rem; }
.liste li { padding-left: 1.4rem; position: relative; }
.liste li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .55em; height: .55em; border-radius: 50%;
  background: var(--blau);
}
.hinweis {
  margin-top: 2rem; max-width: 52rem;
  border-left: 3px solid var(--bernstein);
  padding: .6rem 0 .6rem 1rem;
  color: #3A4C53; font-size: .95rem;
}

.zwei { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.5rem; align-items: start; }
@media (max-width: 760px) { .zwei { grid-template-columns: 1fr; } }
.nogos { list-style: none; padding: 0; display: grid; gap: .6rem; }
.nogos li { padding-left: 1.6rem; position: relative; font-weight: 600; color: var(--blau-dunkel); }
.nogos li::before {
  content: "—"; position: absolute; left: 0; color: var(--bernstein); font-weight: 700;
}

/* ---------- Fuß ---------- */
footer {
  background: var(--tinte); color: #B9C9C4;
  padding: 2.4rem 1.4rem; text-align: center; font-size: .92rem;
}
footer p { max-width: 46rem; margin: 0 auto; }

/* ==================================================================
   Ergänzungen v1.1 – Sprachauswahl, App-Installation, Recht, RTL
   ================================================================== */

/* ---------- Sprachauswahl (ersetzt den EN/DE-Knopf) ---------- */
select.lang {
  -webkit-appearance: none; appearance: none;
  border: 1.5px solid var(--blau-dunkel); background: transparent; color: var(--blau-dunkel);
  border-radius: 999px; padding: .3rem 2rem .3rem .9rem; font: inherit; font-weight: 700;
  cursor: pointer; line-height: 1.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231877D2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center;
}
select.lang:hover { background-color: var(--welle-hell); }
html[dir="rtl"] select.lang {
  padding: .3rem .9rem .3rem 2rem;
  background-position: left .7rem center;
}

/* ---------- Knöpfe (Installation & App öffnen) ---------- */
.knopf {
  display: inline-block; text-decoration: none;
  border: none; background: var(--blau-dunkel); color: var(--nebel);
  font: inherit; font-weight: 700; cursor: pointer;
  padding: .7rem 1.4rem; border-radius: 12px;
}
/* Der Knopf traegt jetzt selbst --blau-dunkel (Kontrast, siehe :root).
   Hover braucht deshalb einen eigenen, noch dunkleren Wert - sonst
   passiert beim Zeigen sichtbar nichts. Derselbe Ton wie in der App
   (css/app.css, .modell-kopf .leise:hover). */
.knopf:hover, .knopf:focus-visible { background: #0A4A8C; }
.knopf.gross { padding: .85rem 1.8rem; font-size: 1.05rem; }
/* Im Kopf: derselbe Knopf, kompakter - immer sichtbar, kein Scrollen bis zum
   #app-Abschnitt nötig, um den Zwilling zu öffnen. */
.knopf-kopf { padding: .45rem 1.1rem; font-size: .92rem; }

/* ---------- App-Installations-Abschnitt ---------- */
.install { }
.install-karte {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: stretch;
}
@media (max-width: 800px) { .install-karte { grid-template-columns: 1fr; } }

.install-text h2 { margin-bottom: 1rem; }
.anleitung { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .7rem; max-width: 46rem; }
.anleitung li {
  padding-left: 1.4rem; position: relative; color: #37474F; font-size: .97rem;
}
.anleitung li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .55em; height: .55em; border-radius: 50%; background: var(--welle);
}
html[dir="rtl"] .anleitung li { padding-left: 0; padding-right: 1.4rem; }
html[dir="rtl"] .anleitung li::before { left: auto; right: 0; }

.app-oeffnen {
  background: var(--karte);
  border: 1px solid var(--welle-hell);
  border-top: 3px solid var(--bernstein);
  border-radius: 12px; padding: 1.6rem;
  display: flex; flex-direction: column; gap: .8rem; align-items: flex-start;
  justify-content: center;
}
.app-oeffnen h3 { font-size: 1.3rem; color: var(--blau-dunkel); }
.app-oeffnen p { font-size: .96rem; color: #37474F; }

/* ---------- Fuß: rechtliche Links ---------- */
.footer-satz { max-width: 46rem; margin: 0 auto; }
.rechtlich {
  margin-top: 1.4rem; display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap;
}
.rechtlich a {
  color: var(--welle); text-decoration: none; font-weight: 600; font-size: .9rem;
  /* 21.08.2026: display+padding heben die Trefferflaeche ueber die 24px, die
     WCAG 2.2 als Mindestmass nennt - vorher war die Zeile nur 21px hoch und
     auf dem Telefon schwer zu treffen. Rein additiv, das Aussehen bleibt. */
  display: inline-block; padding: .35rem .3rem;
}
.rechtlich a:hover { color: #FFFFFF; text-decoration: underline; }
.rechtlich-jp { margin-top: .6rem; } /* eigene Gruppe, Geltungsraum JP, getrennt vom DE-Archiv oben */
.copyright { margin-top: 1rem; font-size: .82rem; color: #8FA3A0; }

/* ---------- RTL-Grundausrichtung ---------- */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .hero, html[dir="rtl"] .band blockquote { text-align: center; }
html[dir="rtl"] .liste li { padding-left: 0; padding-right: 1.4rem; }
html[dir="rtl"] .liste li::before { left: auto; right: 0; }
html[dir="rtl"] .nogos li { padding-left: 0; padding-right: 1.6rem; }
html[dir="rtl"] .nogos li::before { left: auto; right: 0; }
html[dir="rtl"] .hinweis { border-left: none; border-right: 3px solid var(--bernstein); padding: .6rem 1rem .6rem 0; }

/* ==================================================================
   Rechtliche Seiten (impressum / datenschutz / nutzung)
   ================================================================== */
.rechtsseite {
  max-width: 46rem; margin: 0 auto; padding: 3rem 1.4rem 4rem;
}
.rechtsseite .zurueck { display: inline-block; margin-bottom: 1.6rem; color: var(--blau-dunkel); text-decoration: none; font-weight: 600; }
.rechtsseite .zurueck:hover { text-decoration: underline; }
.rechtsseite h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: .4rem; }
.rechtsseite h2 { font-size: 1.35rem; margin: 2rem 0 .6rem; color: var(--blau-dunkel); }
.rechtsseite p, .rechtsseite li { color: #37474F; }
.rechtsseite ul { padding-left: 1.3rem; display: grid; gap: .4rem; margin: .4rem 0; }
.rechtsseite .platzhalter {
  background: var(--welle-hell); border-radius: 8px; padding: .1rem .4rem;
  font-weight: 700; color: var(--blau-dunkel);
}
.rechtsseite .stand { margin-top: 2.5rem; font-size: .85rem; color: #5C6E75; } /* war #6B7F86 = 4.20:1, unter AA; jetzt 5.48:1 */
.rechtsseite .notruf {
  border-left: 3px solid var(--bernstein); padding: .8rem 1rem; margin: 1.4rem 0;
  background: var(--karte); border-radius: 0 8px 8px 0;
}


/* ---------- Das Fenster nach Japan (js/japan_fenster.js) ---------- */
.japan-fenster { overflow: hidden; position: relative; }
.japan-fenster img {
  display: block;
  width: 100%;
  height: clamp(240px, 42vw, 460px);
  object-fit: cover;
  /* Bild-Anker oben statt mittig (19.08.2026, Baumeister-Befund): bei sehr
     breiten Fenstern beschneidet cover das Bild stark - mittig verankert
     verlor der Kranich den KOPF. 22% haelt den Kopf in allen drei Szenen
     sichtbar (per Zuschnitt-Simulation aller drei Anker geprueft);
     geopfert wird stattdessen unten Ufer/Boden. */
  object-position: 50% 22%;
  animation: fenster-atmet 46s ease-in-out infinite alternate;
  transition: filter 2s ease;
}
.japan-fenster[data-tageszeit="nacht"] img { filter: brightness(.52) saturate(.8) hue-rotate(12deg); }
.japan-fenster[data-tageszeit="morgen"] img { filter: brightness(1.04); }
/* Die Zeile unter dem Fenster nach Japan (neu gefasst 25.08.2026).
   Vorher stand hier eine Ortsangabe ("Gerade jetzt in Japan - die Buehne
   deines Begleiters"). Sie beschrieb das Bild, statt etwas zu sagen.
   Der Tancho steht in Japan fuer lebenslange Treue - er bleibt bei
   einem Partner, ein Leben lang, und ziert deshalb Kimonos und frueher
   auch Geldscheine. Die Zeile spricht jetzt aus dieser Bedeutung heraus.
   Groesser gesetzt, weil sie nicht mehr Beschriftung ist, sondern der
   Satz, den man mitnimmt. */
.fenster-zeile {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 3rem 1.2rem 1.5rem;
  text-align: center;
  font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: .02em;
  color: #FFFFFF;
  /* Der Verlauf reicht jetzt hoeher und dunkler: Der Satz steht auf einem
     Foto, dessen Helligkeit wir nicht kennen (drei Tageszeiten). Lesbar
     bleiben muss er in allen dreien. */
  background: linear-gradient(180deg,
              rgba(14, 33, 54, 0) 0%,
              rgba(14, 33, 54, .30) 45%,
              rgba(14, 33, 54, .78) 100%);
  text-shadow: 0 1px 12px rgba(9, 20, 34, .55);
}

/* Sanfte Bewegung, passend zum Atem-Zoom des Bildes daneben - kein
   Effekt um seiner selbst willen: Der Satz kommt einmal herauf und atmet
   dann kaum merklich weiter. Wer Bewegung abgestellt hat, sieht ihn
   still und vollstaendig. */
@media (prefers-reduced-motion: no-preference) {
  .fenster-zeile {
    animation: fenster-auf 1.4s cubic-bezier(.22,.8,.3,1) .35s backwards,
               fenster-atem 11s ease-in-out 1.8s infinite;
  }
}
@keyframes fenster-auf {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fenster-atem {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
/* Auf dem Telefon ist der Bildausschnitt nur ~240 px hoch. Der volle
   Verlauf nimmt dort die halbe Bildhoehe ein und deckt den Kranich zu -
   also schmaler ansetzen. Gemessen: 51 % -> 33 %. */
@media (max-width: 34rem) {
  .fenster-zeile { padding: 1.6rem .9rem 1rem; }
}
@keyframes fenster-atmet {
  from { transform: scale(1); }
  to   { transform: scale(1.055); }
}
@media (prefers-reduced-motion: reduce) {
  .japan-fenster img { animation: none; }
}