/* Eine Datei für alle Seiten. Keine fremden Schriften und keine fremden
   Server: Eine Datenschutzerklärung, die zum Anzeigen erst irgendwo anders
   anfragt, widerspricht sich selbst. */
*, *::before, *::after { box-sizing: border-box; }

:root {
  color-scheme: light dark;
  --grund: #f7f8fa;
  --karte: #ffffff;
  --text: #16202e;
  --leise: #5a6675;
  --linie: #dfe3e9;
  --akzent: #0b62d6;
  --marke: #16243a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0d141f;
    --karte: #141d2b;
    --text: #e8ecf2;
    --leise: #9aa6b6;
    --linie: #263247;
    --akzent: #6aa9ff;
    --marke: #e8ecf2;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0 20px 80px;
  background: var(--grund);
  color: var(--text);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.blatt { max-width: 46rem; margin: 0 auto; }
header { padding: 56px 0 8px; }
.marke {
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; letter-spacing: -0.01em; color: var(--marke);
  font-size: 1.05rem; text-decoration: none;
}
.marke .zeichen {
  /* Dasselbe Symbol wie die App, nicht eine zweite Erfindung daneben. */
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: block; object-fit: cover;
}
h1 {
  font-size: clamp(1.9rem, 5vw, 2.5rem); line-height: 1.15;
  letter-spacing: -0.02em; margin: 24px 0 6px; text-wrap: balance;
}
.stand { color: var(--leise); font-size: 0.94rem; margin: 0 0 36px; }
h2 {
  font-size: 1.22rem; letter-spacing: -0.01em; margin: 40px 0 10px;
  padding-top: 20px; border-top: 1px solid var(--linie); text-wrap: balance;
}
h2:first-of-type { border-top: 0; padding-top: 0; }
h3 { font-size: 1.02rem; margin: 24px 0 6px; }
p, li { color: var(--text); }
p { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 1.25rem; }
li { margin-bottom: 7px; }
a { color: var(--akzent); text-underline-offset: 2px; }
.kasten {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: 14px; padding: 20px 22px; margin: 0 0 32px;
}
.kasten p:last-child { margin-bottom: 0; }
.kasten strong { font-weight: 650; }
@media (prefers-color-scheme: dark) {
  }
dl { margin: 0 0 14px; }
dt { font-weight: 650; margin-top: 14px; }
dd { margin: 2px 0 0; color: var(--leise); }
footer {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--linie);
  color: var(--leise); font-size: 0.9rem;
}
footer a { color: var(--leise); }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em; background: var(--karte);
  border: 1px solid var(--linie); border-radius: 5px; padding: 1px 5px;
}

/* Anleitungen: Adress-Tabellen. Auf dem Telefon scrollt die Tabelle für
   sich, nicht die Seite. */
.tabelle { overflow-x: auto; margin: 0 0 18px; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; vertical-align: top; padding: 8px 10px;
         border-bottom: 1px solid var(--linie); }
th { font-weight: 650; white-space: nowrap; }
td code { white-space: nowrap; }
/* Schmal: jede Zeile eine Karte, Spaltenname vor dem Wert. */
@media (max-width: 640px) {
  .tabelle thead { display: none; }
  .tabelle tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--linie); }
  .tabelle td { display: flex; gap: 10px; border: 0; padding: 2px 0; }
  .tabelle td::before { content: attr(data-label); flex: 0 0 7.5rem; color: var(--leise); }
  .tabelle td:first-child { font-weight: 650; }
  .tabelle td:first-child::before { content: none; }
  td code { white-space: normal; word-break: break-all; }
}
.schritte { padding-left: 1.4rem; }
.schritte li { margin-bottom: 10px; }
.weiter { list-style: none; padding: 0; }
.weiter li { margin-bottom: 14px; }
.weiter a { font-weight: 650; }
.weiter span { display: block; color: var(--leise); }
.quellen li { margin-bottom: 14px; overflow-wrap: anywhere; }
.quellen cite { font-style: italic; }
.quellen span { display: block; margin-top: 2px; }
.quellen span:first-of-type { color: var(--leise); }

/* --- Präsentationsseite ---------------------------------------------- */

:root {
  --schrift-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --schrift-breit: "Big Shoulders", "Arial Narrow", sans-serif;
  --live: #33c56a;
  /* Eigene Markenfarbe, absichtlich unabhängig vom Theme: Anders als der
     Text der Wortmarke (--marke, die im Dunklen hell werden muss, um lesbar
     zu bleiben) ist das hier eine Fläche – die App-Symbol-Farbe selbst, die
     in beiden Erscheinungsbildern dieselbe bleibt. */
  --marke-tief: #101a2c;
  --marke-tief-hell: #223458;
}

.stamm {
  margin: 0;
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--grund);
  color: var(--text);
}
/* Diese Seite hat kein umschließendes Werkzeug, das das hier für uns
   erledigt – also selbst dafür sorgen, dass kein Bild breiter wird als
   sein Rahmen und schmale Bildschirme keinen Seitwärts-Scrollbalken
   bekommen. */
img, svg { max-width: 100%; }
.kopf { flex-wrap: wrap; row-gap: 10px; }
.kopf nav { flex-wrap: wrap; row-gap: 6px; gap: 16px; }
@media (max-width: 480px) {
  .kopf { flex-direction: column; align-items: flex-start; }
}

.blatt-breit { max-width: 74rem; margin: 0 auto; padding: 0 20px; }

/* Kopfzeile über der ganzen Seite */
.kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px 0;
}
.kopf nav { display: flex; gap: 22px; font-size: 0.92rem; }
.kopf nav a { color: var(--leise); font-weight: 600; }
.kopf nav a:hover { color: var(--text); }

/* Hero: die Wand als Bild-in-Bild-Konzept, nicht als Metapher */
.hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px;
  align-items: center; padding: 28px 0 56px;
}
/* Der klassische Grid-Sprengsatz: Ein Bild ohne eigene Breite lässt seine
   Spalte auf seine natürliche Pixelgröße wachsen, weil eine Grid-Spalte
   ohne diese Angabe nie schmaler wird als der Inhalt, den sie trägt – auch
   wenn das Bild selbst per `max-width` längst gehorchen würde. */
.hero > * { min-width: 0; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; padding-top: 8px; } }

.eyebrow {
  font-family: var(--schrift-mono); font-size: 0.78rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--akzent); display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px;
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 25%, transparent);
}

.hero h1 {
  font-family: var(--schrift-breit); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.6rem, 5.4vw, 4rem); line-height: 0.98; letter-spacing: -0.01em;
  margin: 0 0 20px; text-wrap: balance; color: var(--marke);
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--akzent), #63a9ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lede {
  font-size: 1.14rem; line-height: 1.6; color: var(--leise); max-width: 34rem; margin: 0 0 28px;
}
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

.badge-appstore {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--marke-tief); color: #fff; text-decoration: none;
  padding: 12px 20px; border-radius: 12px; font-weight: 700; font-size: 0.98rem;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--marke) 70%, transparent);
}
.badge-appstore svg { width: 20px; height: 20px; flex: none; }
.badge-appstore:hover { filter: brightness(1.12); }
/* `hidden` muss gegen `display: inline-flex` oben gewinnen. */
.badge-appstore[hidden] { display: none; }
.hero-note { font-family: var(--schrift-mono); font-size: 0.78rem; color: var(--leise); }

/* Die Bildschirm-Kachel: dasselbe Vokabular wie die App selbst */
.monitor {
  position: relative; border-radius: 14px; overflow: hidden;
  background: #05070c; border: 1px solid var(--linie);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.55);
}
.monitor img { display: block; width: 100%; height: auto; }
/* Merkmale: kurze, faktentreue Karten – keine erfundenen Zahlen */
.merkmale {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px; margin: 0 0 60px;
}
.merkmal {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 14px;
  padding: 22px 22px 20px;
}
.merkmal .kennziffer {
  font-family: var(--schrift-mono); font-size: 0.72rem; color: var(--akzent);
  letter-spacing: 0.06em; margin: 0 0 10px;
}
.merkmal h3 { margin: 0 0 8px; font-size: 1.05rem; letter-spacing: -0.005em; }
.merkmal p { margin: 0; color: var(--leise); font-size: 0.94rem; line-height: 1.55; }

/* Bildschirmfoto-Reihe */
.schirme-titel { text-align: center; margin: 0 0 8px; }
.schirme-titel h2 { font-family: var(--schrift-breit); text-transform: uppercase; font-size: clamp(1.6rem,3vw,2.1rem); margin:0 0 6px; }
.schirme-titel p { color: var(--leise); margin: 0 0 34px; }
.schirme {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0 0 60px;
  align-items: end;
}
.schirme > figure { min-width: 0; }
@media (max-width: 860px) {
  .schirme { grid-template-columns: 1fr; }
  /* Einspaltig ist die Kachel so breit wie die Seite: feste Höhen würden
     hier erst recht beschneiden. */
  .schirme .monitor { height: auto; }
  .schirme .monitor img { height: auto; object-fit: contain; }
  .schirme .monitor.hoch { height: auto; max-width: 320px; margin: 0 auto; }
}
.schirme figure { margin: 0; }
/* iPad und Fernseher behalten ihr Seitenverhältnis: Eine feste Höhe mit
   `cover` schnitt beim 4:3-iPad unten die letzte Kachelreihe samt Leiste ab.
   Die Reihe richtet die Kacheln unten aus (`align-items: end`), so stehen
   unterschiedlich hohe Bilder trotzdem auf einer Linie. */
.schirme .monitor img { width: 100%; height: auto; }
/* Das Telefon steht hochkant. `cover` schnitt davon alles unterhalb der
   ersten Kamera ab – `contain` zeigt den ganzen Bildschirm, der dunkle
   Rahmen dahinter trägt die schmalen Ränder. */
.schirme .monitor.hoch { height: 360px; }
.schirme .monitor.hoch img { height: 100%; object-fit: contain; object-position: center; }
.schirme figcaption {
  font-family: var(--schrift-mono); font-size: 0.76rem; color: var(--leise);
  margin-top: 10px; text-align: center;
}

/* Abschließender Aufruf */
.abschluss {
  text-align: center; padding: 52px 24px; margin: 0 0 60px; border-radius: 20px;
  background: linear-gradient(160deg, var(--marke-tief), var(--marke-tief-hell));
  color: #fff;
}
.abschluss h2 { font-family: var(--schrift-breit); text-transform: uppercase; font-size: clamp(1.7rem,3.4vw,2.3rem); margin: 0 0 12px; }
.abschluss p { color: #c3cede; max-width: 34rem; margin: 0 auto 26px; }
.abschluss .badge-appstore { background: #fff; color: var(--marke-tief); }

.fuss-seite {
  border-top: 1px solid var(--linie); padding: 30px 0 50px;
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
  color: var(--leise); font-size: 0.9rem;
}
.fuss-seite .spalten { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.fuss-seite a { color: var(--leise); }
.fuss-seite a:hover { color: var(--text); }

/* Sprachmenü: <details> klappt ohne JavaScript auf; lang.js merkt sich nur
   die Wahl. Die Liste liegt über dem Inhalt, damit der Kopf nicht springt. */
.sprache { position: relative; font-size: 0.92rem; }
.sprache summary {
  list-style: none; cursor: pointer; color: var(--leise); font-weight: 600;
}
.sprache summary::-webkit-details-marker { display: none; }
.sprache summary::after { content: " ▾"; font-size: 0.8em; }
.sprache summary:hover, .sprache[open] summary { color: var(--text); }
.sprache ul {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 10;
  margin: 0; padding: 6px; list-style: none; min-width: 160px;
  background: var(--karte); border: 1px solid var(--linie); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.sprache li a {
  display: block; padding: 6px 10px; border-radius: 6px;
  color: var(--text); font-weight: 500; text-decoration: none;
}
.sprache li a:hover { background: var(--grund); }
.sprache li a[aria-current="page"] { color: var(--akzent); font-weight: 700; }
@media (max-width: 480px) { .sprache ul { right: auto; left: 0; } }

/* --- Breathe Balloon Go ------------------------------------------------ */

/* Farben aus der App: Himmelblau, Pfirsich, Creme und das Dunkelblau der
   Phasenanweisung. Im Dunklen bleibt es beim gemeinsamen Muster oben. */
:root {
  --grund: #fbf7ef;
  --karte: #ffffff;
  --text: #13263d;
  --leise: #556578;
  --linie: #e7dfd0;
  --akzent: #2f74b5;
  --marke: #13304f;
  --live: #6fb48f;
  --marke-tief: #1d4f80;
  --marke-tief-hell: #3d84c4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0e1724;
    --karte: #152234;
    --text: #e9eef4;
    --leise: #9fb0c3;
    --linie: #26364c;
    --akzent: #7db8ec;
    --marke: #e9eef4;
  }
}
/* Ein Hauch der App-Landschaft hinter dem Hero, ohne Bilddatei. */
.stamm {
  background:
    linear-gradient(180deg, color-mix(in srgb, #bfdcf2 55%, var(--grund)) 0,
                    color-mix(in srgb, #fde3c4 45%, var(--grund)) 520px,
                    var(--grund) 900px) no-repeat;
}
.hero h1 em { background: linear-gradient(135deg, var(--akzent), #e98a5c); -webkit-background-clip: text; background-clip: text; }
/* Bildschirmfotos haben einen hellen Himmel: heller Rahmen statt Schwarz. */
.monitor { background: #dbe9f5; border-radius: 22px; }
.marke .zeichen { border-radius: 8px; }

/* Wie QR Workshop: hochkant stehendes iPhone, schmal halten. */
.hero-bild { max-width: 300px; justify-self: center; width: 100%; }
@media (max-width: 860px) { .hero-bild { max-width: 260px; } }
.schirme .monitor.hoch { height: 460px; }
@media (max-width: 860px) { .schirme .monitor.hoch { height: auto; } }
/* Ohne Store-Link ist das Abzeichen ein Hinweis, kein Knopf. */
span.badge-appstore { cursor: default; }
span.badge-appstore:hover { filter: none; }
/* Sechs Karten: drei je Reihe statt vier plus zwei Waisen. */
.merkmale { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* Sieben Übungen wie in der App: „Individuelle Atmung“ oben über die ganze
   Breite, darunter paarweise (Box/Verlängert, Kohärent/Resonanz,
   4-7-8/Entschleunigt). Schmal einspaltig in derselben Reihenfolge. */
.uebungen {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
  max-width: 56rem; margin: 0 auto 60px;
}
.uebungen .uebung-gross { grid-column: 1 / -1; }
@media (max-width: 620px) { .uebungen { grid-template-columns: 1fr; } }

/* Story-led Dream presentation; the other pages keep their existing styling. */
body.stamm { color-scheme: light; --text:#292c38; --leise:#4e5260; --akzent:#275c78; --linie:#d6cbd0; --marke:#292c38; background: #f5e8df; color:var(--text); padding-bottom:40px; }
/* Fixed layer instead of background-attachment: fixed, which iOS Safari ignores and would stretch over the whole page. */
body.stamm::before { content:""; position:fixed; inset:0; z-index:-1; background: url("assets/dream-background.jpg") center top / cover no-repeat; pointer-events:none; }
.stamm .blatt-breit { max-width: 78rem; }
.stamm .kopf { background:rgba(255,252,248,.9); border-radius:0 0 20px 20px; padding:18px 24px; }
.story-hero { padding: clamp(5rem,12vw,10rem) clamp(1rem,5vw,4rem) 4rem; max-width: 54rem; }
.story-kicker { text-transform:uppercase; letter-spacing:.18em; font-weight:700; font-size:.85rem; }
.stamm .story-hero h1 { font-family: Georgia,serif; font-size:clamp(3rem,8vw,6.5rem); font-weight:400; line-height:1.02; margin: 0 0 1.5rem; }
.story-hero p:last-of-type { font-size:1.2rem; }
.story-section { margin:0 0 24px; padding:clamp(1.5rem,5vw,4rem); border:1px solid rgba(255,255,255,.8); border-radius:28px; background:rgba(255,252,248,.94); }
.story-copy { max-width:48rem; }
.stamm .story-section h2, .stamm .story-ending h2 { font-family:Georgia,serif; font-size:clamp(2rem,4vw,3.3rem); font-weight:400; line-height:1.12; letter-spacing:-.02em; margin:0 0 1rem; padding:0; border:0; text-transform:none; }
.stamm .story-section h3 { font-family:Georgia,serif; font-size:1.35rem; margin:1.6rem 0 .8rem; }
.stamm .story-section h4 { margin:1.4rem 0 .25rem; font-size:1rem; }
.story-section p { line-height:1.8; }
.story-first { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px, .8fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.painting { margin:0; position:sticky; top:1rem; }
.painting img { width:100%; height:auto; display:block; border-radius:12px; }
.painting figcaption { color:var(--leise); line-height:1.5; font-size:.9rem; margin-top:.8rem; }
.app-section { background:rgba(238,248,247,.96); }
.app-gallery { margin-top:2rem; }
/* Galerie (IND-2037): vier iPhone-Bilder hochkant, danach das breite iPhone Duo
   und die kleine Apple Watch. Jede Abbildung hat eine eigene Breite, damit die
   Formate nebeneinander passen; auf schmalen Bildschirmen zwei iPhones je Zeile. */
.gallery-images { display:flex; gap:1.5rem 1rem; flex-wrap:wrap; align-items:flex-start; }
.gallery-images figure { margin:0; width:min(13rem,calc(50% - .5rem)); }
.gallery-images figure.gallery-duo { width:min(32rem,100%); }
.gallery-images figure.gallery-watch { width:min(11rem,calc(50% - .5rem)); }
.gallery-images img { display:block; width:100%; height:auto; border-radius:1rem; box-shadow:0 8px 28px #35495633; }
.gallery-images .gallery-watch img { border-radius:22%/18.5%; }
.gallery-images figcaption { color:var(--leise); font-size:.9rem; line-height:1.4; margin-top:.6rem; }
.story-ending { background:rgba(255,252,248,.94); border-radius:28px; padding:clamp(1.5rem,5vw,4rem); }
.stamm .fuss-seite { background:rgba(255,252,248,.94); border:0; border-radius:20px; padding:22px; }
@media (max-width:700px) { .story-first { grid-template-columns:1fr; } .painting { position:static; max-width:34rem; } .stamm .kopf { padding:14px; } .story-hero { padding:4rem 1rem 3rem; } }
@media (max-width:480px) { body.stamm { padding-left:10px; padding-right:10px; } .stamm .blatt-breit { padding:0; } .story-section, .story-ending { padding:1.75rem 1.25rem; border-radius:22px; } }

/* Unterseiten Hilfe, Datenschutz, Impressum im Design der Startseite (IND-2015):
   body.stamm liefert Dream-Hintergrund, Farben und Schrift, .kopf und
   .fuss-seite sind dieselben wie oben. Der Text steht in einer hellen Karte
   (.story-section) mit derselben Lesebreite (.story-copy); die Überschriften
   sind kleiner als auf der Startseite, weil lange Texte viele davon haben. */
.kopf nav a[aria-current="page"] { color: var(--text); }
.seiten-kopf { padding: clamp(3rem,8vw,6rem) clamp(1rem,5vw,4rem) 2.5rem; max-width: 54rem; }
.unterseite .seiten-kopf h1 { font-family: Georgia,serif; font-weight:400; font-size: clamp(2.6rem,6vw,4.5rem); line-height:1.05; letter-spacing:-.02em; margin: 0 0 1rem; color: var(--marke); }
.unterseite .stand { color: var(--leise); font-size: .95rem; margin: 0; }
.unterseite .seiten-text h2 { font-family: Georgia,serif; font-weight:400; font-size: clamp(1.6rem,3vw,2.2rem); line-height:1.15; letter-spacing:-.01em; margin: 2.6rem 0 .9rem; padding:0; border:0; }
.unterseite .seiten-text .story-copy > :first-child { margin-top: 0; }
.seiten-text li, .seiten-text dd { line-height: 1.7; }
.unterseite .kasten { background: rgba(238,248,247,.96); border: 1px solid rgba(39,92,120,.18); border-radius: 20px; padding: 1.25rem 1.5rem; margin: 0 0 2rem; }
.unterseite code { background: rgba(255,255,255,.75); border-color: var(--linie); }
@media (max-width:700px) { .seiten-kopf { padding: 2.5rem 1rem 2rem; } }
@media (max-width:480px) { .unterseite .kasten { padding: 1rem 1.1rem; } }
/* Die Kopfzeile steht schmal zentriert, das Sprachmenü ganz rechts darin:
   rechtsbündig aufklappen, sonst ragt die Liste über den Bildschirmrand. */
@media (max-width:480px) { .stamm .sprache ul { left:auto; right:0; } }
/* Lange deutsche Wörter („Verbraucherstreitbeilegung“) in großen Überschriften
   trennen statt seitlich überstehen zu lassen. */
.unterseite h1, .unterseite .seiten-text h2, .unterseite .seiten-text h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* Angebotskacheln (IND-2033): nebeneinander, auf schmalen Bildschirmen untereinander */
.offer-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; margin-top:1.5rem; }
.offer-tile { padding:1.5rem 1.5rem 1.25rem; border:1px solid rgba(53,73,86,.14); border-radius:20px; background:rgba(238,248,247,.96); }
.stamm .offer-tile h3 { margin:0 0 .6rem; font-size:1.25rem; line-height:1.3; overflow-wrap:anywhere; hyphens:auto; }
.offer-tile p { margin:0; line-height:1.7; }
@media (max-width:700px) { .offer-tiles { grid-template-columns:1fr; } }

/* Sprachauswahl im Dream-Stil der Startseite (IND-2016): Auslöser und
   aufgeklappte Liste übernehmen Cremeflächen, Petrol, runde Karten und die
   Abstände der übrigen Seite. Markup, Sprachen und Sprachwechsel bleiben
   unverändert; die gemeinsame Kopfzeile gilt damit auf allen Seiten. */
.stamm .sprache { font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size:.92rem; line-height:1.5; }
.stamm .sprache summary {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:38px; padding:8px 13px; border:1px solid transparent;
  border-radius:999px; color:var(--leise); font-weight:600; line-height:1.5;
  -webkit-tap-highlight-color:transparent;
}
.stamm .sprache summary::after {
  content:""; width:6px; height:6px; flex:none; margin:0 1px 0 0;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.stamm .sprache summary:hover, .stamm .sprache[open] summary {
  color:var(--text); background:rgba(255,252,248,.86);
  border-color:rgba(39,92,120,.18);
}
.stamm .sprache[open] summary::after { transform:translateY(1px) rotate(225deg); }
/* Kopfzeile auf einer Textlinie (IND-2277): Der Sprach-Auslöser ist ein 38 px
   hoher Knopf, die Links sind es nicht. Ohne Mittenausrichtung dehnt flex sie
   auf dieselbe Höhe, die Links sitzen oben und „Deutsch“ wirkt nach unten
   versetzt. Gleiche Zeilenhöhe, damit die Textmitten exakt zusammenfallen. */
.stamm .kopf nav { align-items:center; }
.stamm .kopf nav > a { line-height:1.5; }
.stamm .sprache ul {
  top:calc(100% + 10px); z-index:20; min-width:176px; padding:8px;
  display:flex; flex-direction:column; gap:2px;
  background:rgba(255,252,248,.98); border:1px solid rgba(39,92,120,.18);
  border-radius:16px; box-shadow:0 12px 32px rgba(53,73,86,.16);
}
.stamm .sprache li { margin:0; }
.stamm .sprache li a {
  display:flex; align-items:center; min-height:42px; padding:9px 12px;
  border-radius:10px; color:var(--text); font-family:inherit; font-size:.92rem;
  font-weight:600; line-height:1.5; text-decoration:none;
}
.stamm .sprache li a:hover { background:rgba(238,248,247,.96); color:var(--text); }
.stamm .sprache li a[aria-current="page"] {
  color:var(--akzent); background:rgba(39,92,120,.08); font-weight:700;
}
.stamm .sprache summary:focus-visible, .stamm .sprache li a:focus-visible {
  outline:2px solid var(--akzent); outline-offset:2px;
}
/* Schmal hängt die Liste am ganzen Kopfzeilen-Kasten statt am Auslöser:
   Ob die Sprache neben oder unter den Links umbricht, hängt von der Schrift
   ab. So bleibt sie in beiden Fällen rechtsbündig im Bildschirm. */
@media (max-width:480px) {
  .stamm .kopf { position:relative; }
  .stamm .sprache { position:static; }
  .stamm .sprache ul { top:calc(100% + 8px); left:auto; right:14px; }
}

/* AGB (IND-2094): lange Klauseltexte. Gliederungspunkte wie „5.1“ als kleine
   Überschrift, Trenner vor dem Fuß; Anschrift und E-Mail umbrechen statt
   seitlich zu scrollen. */
.unterseite .seiten-text h3 { font-family: Georgia,serif; font-weight:400; font-size:1.2rem; line-height:1.3; margin: 1.8rem 0 .5rem; }
.unterseite .seiten-text hr { border:0; border-top:1px solid var(--linie); margin: 2.4rem 0 1.6rem; }
.unterseite .seiten-text p { overflow-wrap: break-word; }

/* Rund um die App (IND-2336): eine Unterseite aus mehreren Karten statt einer.
   Kopf mit Einleitung, darunter Sprungmarken als Chips; die sieben Übungen als
   Kacheln wie in der App (individuelle Atmung über die ganze Breite, dann
   paarweise), Musik in zwei Spalten und häufige Fragen zum Aufklappen. */
.seiten-lede { font-size: clamp(1.1rem,2.2vw,1.3rem); line-height: 1.6; color: var(--text); max-width: 40rem; margin: 0 0 1.1rem; }
.sprungmarken { display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 24px; padding:0 clamp(1rem,5vw,4rem); }
.sprungmarken a {
  display:inline-flex; align-items:center; min-height:40px; padding:7px 15px;
  border-radius:999px; background:rgba(255,252,248,.92); border:1px solid rgba(39,92,120,.18);
  color:var(--text); font-weight:600; font-size:.94rem; line-height:1.4; text-decoration:none;
}
.sprungmarken a:hover { background:rgba(238,248,247,.98); color:var(--akzent); }
.sprungmarken a:focus-visible, .fragen summary:focus-visible { outline:2px solid var(--akzent); outline-offset:2px; }
.unterseite .story-section[id], .unterseite h3[id] { scroll-margin-top: 1rem; }
.uebung-kacheln { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; margin:1.5rem 0 .5rem; }
.uebung-kachel { padding:1.4rem 1.5rem 1.3rem; border:1px solid rgba(53,73,86,.14); border-radius:20px; background:rgba(238,248,247,.96); }
.uebung-kachel.breit { grid-column:1 / -1; }
.unterseite .seiten-text .uebung-kachel h3 { margin:0 0 .3rem; font-size:1.3rem; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; }
.uebung-kachel .rhythmus { margin:0 0 .7rem; color:var(--akzent); font-weight:700; letter-spacing:.02em; }
.uebung-kachel > p:last-of-type { margin:0; line-height:1.7; }
/* Quellen je Übung zum Aufklappen, Zuordnung wie in der App (IND-2408). */
.uebung-quellen { margin-top:1rem; border-top:1px solid rgba(53,73,86,.14); }
.uebung-quellen summary {
  cursor:pointer; list-style:none; position:relative; padding:12px 2rem 2px 0; min-height:44px; box-sizing:border-box;
  color:var(--akzent); font-weight:650; line-height:1.5; -webkit-tap-highlight-color:transparent;
}
.uebung-quellen summary::-webkit-details-marker { display:none; }
.uebung-quellen summary::after {
  content:""; position:absolute; right:.5rem; top:1.2rem; width:8px; height:8px;
  border-right:2px solid var(--akzent); border-bottom:2px solid var(--akzent); transform:rotate(45deg);
}
.uebung-quellen[open] summary::after { transform:translateY(4px) rotate(225deg); }
.uebung-quellen summary:focus-visible { outline:2px solid var(--akzent); outline-offset:2px; border-radius:4px; }
.uebung-quellen .quellen { margin:.5rem 0 0; padding-left:1.1rem; font-size:.94rem; }
.uebung-quellen .quellen li { line-height:1.55; margin-bottom:12px; }
.uebung-quellen .quellen li:last-child { margin-bottom:0; }
.zwei-spalten { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 2rem; }
.zwei-spalten h4 { hyphens:auto; -webkit-hyphens:auto; }
.fragen details { border-top:1px solid var(--linie); }
.fragen details:last-child { border-bottom:1px solid var(--linie); }
.fragen summary {
  cursor:pointer; list-style:none; position:relative; padding:14px 2.2rem 14px 0;
  font-weight:650; line-height:1.5; -webkit-tap-highlight-color:transparent;
}
.fragen summary::-webkit-details-marker { display:none; }
.fragen summary::after {
  content:""; position:absolute; right:.5rem; top:1.25rem; width:8px; height:8px;
  border-right:2px solid var(--akzent); border-bottom:2px solid var(--akzent); transform:rotate(45deg);
}
.fragen details[open] summary::after { transform:translateY(4px) rotate(225deg); }
.fragen details p { margin:0 0 16px; }
.unterseite .seiten-text[id] .story-copy > h3 { font-size:1.45rem; line-height:1.25; margin:2.2rem 0 .6rem; }
.unterseite .seiten-text .uebung-kacheln + .story-copy { margin-top:2.2rem; }
.unterseite .seiten-text .uebung-kacheln + .story-copy > h3:first-child { margin-top:0; }
@media (max-width:700px) { .uebung-kacheln, .zwei-spalten { grid-template-columns:1fr; } .sprungmarken { padding:0 1rem; } }
@media (max-width:480px) { .uebung-kachel { padding:1.1rem 1.1rem 1rem; } .sprungmarken { padding:0; gap:.45rem; } .sprungmarken a { font-size:.88rem; padding:6px 12px; } }

/* App-Store-Badge (IND-3373): offizielles Apple-Badge in DE/EN, Grafik
   unverändert, 50 px hoch (Apple: mindestens 40 px), Freiraum ringsum, kein
   Filter und kein Schatten. Im Hero und am Ende des Abschnitts „Offline“. */
.store-badges { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:1.75rem 0 0; }
.badge-offiziell { display:inline-block; line-height:0; border-radius:9px; }
.badge-offiziell img { display:block; height:50px; width:auto; }
.badge-offiziell:focus-visible { outline:3px solid var(--akzent); outline-offset:4px; }

.unterseite .seiten-text p.terms-separator { font-size:0; line-height:0; width:4rem; border-top:1px solid var(--linie); margin:2rem 0; }