/* ============================================================
   Breathing Bones · Atme dich zurück
   Rahmen und Schriften wie der Rest der Homepage (dunkles Grün,
   Creme, Salbei). Das Hellblau der App kommt über die Screenshots,
   den Atemkreis und einzelne Akzente mit rein. Umgebaut 29.09.2026,
   weil die rein helle Fassung wie eine fremde Seite wirkte.
   ============================================================ */

.bb {
  --himmel: #CFE7F1;
  --himmel-hell: #EAF4F7;
  --kreis: #9FD4D8;
  --tuerkis: #3E9C9E;
}

/* ---------- Einstieg (dunkel wie die Homepage) ---------- */
.bb-einstieg {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 78% 45%, rgba(159, 212, 216, 0.22), rgba(159, 212, 216, 0) 70%),
    var(--deep);
  color: var(--on-deep);
  padding-block: clamp(56px, 9vw, 110px);
}
.bb-einstieg .wrap {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: center;
}
.bb-einstieg .eyebrow { color: var(--kreis); }
.bb-einstieg h1 {
  font-family: "Jost", sans-serif; font-weight: 300;
  font-size: clamp(2.5rem, 7vw, 4.2rem); letter-spacing: 0.01em; color: var(--on-deep);
}
.bb-einstieg .unterzeile {
  font-style: italic; font-size: clamp(1.6rem, 4vw, 2.3rem); color: var(--kreis); margin: 4px 0 22px;
}
.bb-einstieg .lead { font-size: clamp(1.2rem, 2.4vw, 1.4rem); max-width: 26em; margin: 0 0 30px; color: var(--on-deep); }
.bb-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }
.bb-einstieg .btn.line { color: var(--on-deep); border-color: var(--on-deep-muted); }
.bb-einstieg .btn.line:hover { background: rgba(241, 237, 226, 0.08); }

/* Vögel wie in der App */
.bb-voegel { position: absolute; z-index: 1; top: 12%; left: 46%; width: 150px; opacity: .5; }
.bb-voegel path { fill: none; stroke: var(--kreis); stroke-width: 1.3; stroke-linecap: round; }
.bb-voegel g { animation: bb-schweben 9s ease-in-out infinite; }
.bb-voegel g:nth-child(2) { animation-delay: -3s; }
.bb-voegel g:nth-child(3) { animation-delay: -6s; }
@keyframes bb-schweben { 50% { transform: translate(6px, -8px); } }

/* Handys mit echten Screenshots */
.bb-handys { position: relative; height: clamp(440px, 52vw, 560px); }
.bb-handy {
  position: absolute; width: clamp(190px, 21vw, 250px);
  border-radius: 34px; padding: 8px; background: #121a14;
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.bb-handy img { width: 100%; height: auto; border-radius: 27px; display: block; }
.bb-handys .vorne { right: 8%; top: 0; z-index: 2; }
.bb-handys .hinten { left: 4%; top: 70px; transform: rotate(-4deg); opacity: .92; }

/* Einzelnes Handy in Abschnitten */
.bb-handy.einzeln { position: relative; margin-inline: auto; width: min(260px, 70vw); background: #fff; box-shadow: var(--shadow), 0 0 0 1px var(--line); }

/* ---------- Himmel-Band (die helle App-Farbe als Akzent) ---------- */
.band.bb-himmel { background: linear-gradient(180deg, var(--himmel-hell) 0%, var(--bg) 100%); }

.bb-zwei { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 6vw, 64px); align-items: center; }
.bb-zwei.umgekehrt { grid-template-columns: 0.8fr 1.2fr; }
.bb h2 { font-weight: 300; font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 22px; }
.bb .prose { text-align: left; margin-inline: 0; }

/* Schritte */
.bb-schritte {
  list-style: none; padding: 0; margin: 34px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: schritt;
}
.bb-schritte li {
  background: var(--bg); border: 1px solid var(--line); padding: 26px 22px;
  counter-increment: schritt;
}
.bb-schritte li::before {
  content: counter(schritt);
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; margin-bottom: 14px;
  background: radial-gradient(circle, var(--kreis) 0%, rgba(159, 212, 216, 0.4) 70%);
  color: var(--deep); font-family: "Jost", sans-serif; font-size: 1.05rem;
}
.bb-schritte h3 { font-size: 1.35rem; margin-bottom: 8px; }
.bb-schritte p { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.5; }

/* Übungen */
.bb-bereiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.bb-bereich { background: var(--bg); border: 1px solid var(--line); padding: 18px 18px 12px; }
.bb-bereich h3 { font-family: "Jost", sans-serif; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.bb-bereich ul { list-style: none; padding: 0; margin: 0; }
.bb-bereich li { padding: 4px 0; border-top: 1px solid var(--line); font-size: 1.08rem; line-height: 1.35; }
.bb-bereich li:first-child { border-top: 0; }

.bb-merkmale { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.bb-merkmale li {
  font-family: "Jost", sans-serif; font-size: 0.85rem; letter-spacing: 0.02em;
  background: var(--himmel-hell); border: 1px solid rgba(62, 156, 158, 0.28); border-radius: 999px; padding: 6px 14px;
}

/* Karten */
.bb-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bb-karte { background: var(--bg); border: 1px solid var(--line); padding: 30px 28px; }
.bb-karte h2 { font-size: 1.7rem; margin-bottom: 16px; }
.bb-karte p:last-child { margin-bottom: 0; }

/* Über mich */
.bb-ueber img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }

/* Preis */
.bb-preis {
  max-width: 500px; margin: 0 auto; text-align: center;
  background: linear-gradient(180deg, var(--himmel) 0%, #F4FAFC 100%);
  color: #2B3E45; padding: 42px 30px 34px; border-radius: 4px;
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.6);
}
.bb-preis .eyebrow { color: var(--tuerkis); }
.bb-preis h2 { color: #2B3E45; margin-bottom: 0; font-size: 1.9rem; }
.bb-preis .betrag { font-family: "Jost", sans-serif; font-weight: 300; font-size: 3.4rem; line-height: 1; margin: 12px 0 10px; }
.bb-preis .danach { font-size: 1.05rem; color: #52666d; margin-bottom: 20px; }
.bb-preis ul { list-style: none; padding: 0; margin: 0 0 26px; font-size: 1.1rem; }
.bb-preis li { padding: 4px 0; }
.bb-preis .btn.solid { background: var(--deep); color: var(--on-deep); border-color: var(--deep); }
.bb-preis .btn.solid:hover { background: var(--deep-2); color: var(--on-deep); }
/* Bis zum Start: Knopf ohne Link, Countdown darunter (app.js) */
.bb-preis .btn.solid[aria-disabled="true"] { cursor: default; }
.bb-preis .btn.solid[aria-disabled="true"]:hover { background: var(--deep); }
.bb-countdown-zeile { font-family: "Jost", sans-serif; font-size: 1.05rem; color: #52666d; margin: 14px 0 0; min-height: 1.4em; }
.bb-versprechen { max-width: 520px; margin: 0 auto 30px; text-align: center; font-size: 1.2rem; font-style: italic; color: var(--on-deep); }
.bb-klein { max-width: 540px; margin: 22px auto 0; text-align: center; font-size: 0.85rem; line-height: 1.6; color: var(--on-deep-muted); }
.bb-klein a { color: var(--on-deep); }

/* FAQ */
.bb-faq details { border-bottom: 1px solid var(--line); }
.bb-faq summary {
  cursor: pointer; list-style: none; padding: 18px 36px 18px 0; position: relative; font-size: 1.3rem;
}
.bb-faq summary::-webkit-details-marker { display: none; }
.bb-faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: "Jost", sans-serif; font-weight: 300; font-size: 1.5rem; color: var(--accent);
}
.bb-faq details[open] summary::after { content: "–"; }
.bb-faq details p { color: var(--muted); font-size: 1.1rem; padding-right: 24px; }

/* ---------- Handy ---------- */
@media (max-width: 820px) {
  .bb-einstieg .wrap, .bb-zwei, .bb-zwei.umgekehrt, .bb-schritte, .bb-karten { grid-template-columns: 1fr; }
  .bb-einstieg { text-align: center; }
  .bb-einstieg .lead { margin-inline: auto; }
  .bb-knoepfe { justify-content: center; }
  .bb-handys { height: 440px; max-width: 360px; margin-inline: auto; width: 100%; }
  .bb-handy { width: 200px; }
  .bb-handys .vorne { right: 0; }
  .bb-handys .hinten { left: 0; top: 56px; }
  .bb-voegel { left: auto; right: 6%; top: 4%; width: 100px; }
  .bb-zwei .bb-handy.einzeln { order: 2; }
  .bb-ueber img { max-width: 340px; margin-inline: auto; display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-voegel g { animation: none; }
}
:root[data-bewegung="reduziert"] .bb-voegel g { animation: none; }

/* ---------- Dunkle Darstellung (wie der Rest der Seite) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bb { --himmel-hell: #1E2C2E; }
  :root:not([data-theme="light"]) .band.bb-himmel { background: linear-gradient(180deg, #1D2B2C 0%, var(--bg) 100%); }
  :root:not([data-theme="light"]) .bb-merkmale li { border-color: rgba(159, 212, 216, 0.3); }
  :root:not([data-theme="light"]) .bb-schritte li::before { color: #10160F; }
}
:root[data-theme="dark"] .bb { --himmel-hell: #1E2C2E; }
:root[data-theme="dark"] .band.bb-himmel { background: linear-gradient(180deg, #1D2B2C 0%, var(--bg) 100%); }
:root[data-theme="dark"] .bb-merkmale li { border-color: rgba(159, 212, 216, 0.3); }

/* Abstände */
.bb-karte p { margin: 0 0 1em; font-size: 1.1rem; line-height: 1.55; }
.bb .prose + .btn { margin-top: 18px; }

/* Überall dabei (29.09.2026, Mareikes Punkt) */
.bb-ueberall {
  max-width: 640px; margin: clamp(36px, 5vw, 56px) auto 0; text-align: center;
  padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line);
}
.bb-ueberall h3 { font-family: "Jost", sans-serif; font-weight: 400; font-size: clamp(1.3rem, 2.6vw, 1.6rem); margin: 0 0 10px; }
.bb-ueberall p { font-size: 1.1rem; margin: 0; }