/* ==========================================================================
   bibletunes.com — site.css
   Produktions-Umsetzung des Claude-Design-Handoffs (V5 „Kombiniert").
   Eine Website, Sprachen als Unterseiten (/de, /fr, /fa, /ar).
   ========================================================================== */

/* ---------- 1. Webfonts ---------- */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../design-system/fonts/Geist-Variable.woff2") format("woff2-variations"),
       url("../design-system/fonts/Geist-Variable.woff2") format("woff2");
}
@font-face { font-family: "Geist"; font-weight: 300; font-style: normal; font-display: swap; src: url("../design-system/fonts/Geist-Light.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 400; font-style: normal; font-display: swap; src: url("../design-system/fonts/Geist-Regular.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 500; font-style: normal; font-display: swap; src: url("../design-system/fonts/Geist-Medium.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 600; font-style: normal; font-display: swap; src: url("../design-system/fonts/Geist-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 700; font-style: normal; font-display: swap; src: url("../design-system/fonts/Geist-Bold.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 800; font-style: normal; font-display: swap; src: url("../design-system/fonts/Geist-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 900; font-style: normal; font-display: swap; src: url("../design-system/fonts/Geist-Black.woff2") format("woff2"); }

@font-face { font-family: "Noto Sans Arabic"; font-weight: 400; font-style: normal; font-display: swap; src: url("../design-system/fonts/NotoSansArabic-Regular.ttf") format("truetype"); }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 500; font-style: normal; font-display: swap; src: url("../design-system/fonts/NotoSansArabic-Medium.ttf") format("truetype"); }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 700; font-style: normal; font-display: swap; src: url("../design-system/fonts/NotoSansArabic-Bold.ttf") format("truetype"); }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 900; font-style: normal; font-display: swap; src: url("../design-system/fonts/NotoSansArabic-Black.ttf") format("truetype"); }

@font-face { font-family: "Vazirmatn"; font-weight: 400; font-style: normal; font-display: swap; src: url("../design-system/fonts/Vazirmatn-Regular.ttf") format("truetype"); }
@font-face { font-family: "Vazirmatn"; font-weight: 500; font-style: normal; font-display: swap; src: url("../design-system/fonts/Vazirmatn-Medium.ttf") format("truetype"); }
@font-face { font-family: "Vazirmatn"; font-weight: 700; font-style: normal; font-display: swap; src: url("../design-system/fonts/Vazirmatn-Bold.ttf") format("truetype"); }
@font-face { font-family: "Vazirmatn"; font-weight: 900; font-style: normal; font-display: swap; src: url("../design-system/fonts/Vazirmatn-Black.ttf") format("truetype"); }

/* ---------- 2. Design-Tokens ---------- */

:root {
  --bt-black: #000000;
  --bt-white: #FFFFFF;

  --bt-grey-50:  #F7F6F8;
  --bt-grey-100: #EDEBEF;
  --bt-grey-200: #DAD6DD;
  --bt-grey-400: #A29CA8;
  --bt-grey-600: #5E5862;
  --bt-grey-800: #2A262E;

  /* Markenfarben pro Sprache */
  --bt-de-purple: #602184;
  --bt-de-teal:   #0099A9;
  --bt-fr-amber:   #DB8E15;
  --bt-fr-saffron: #AB241D;
  --bt-fa-forest: #0A4942;
  --bt-fa-olive:  #97912D;
  --bt-ar-date: #5D371E;
  --bt-ar-kaki: #E85F2D;

  --bt-color-primary:   var(--bt-de-purple);
  --bt-color-secondary: var(--bt-de-teal);

  --bt-bg: var(--bt-white);
  --bt-fg: var(--bt-black);
  --bt-fg-muted: var(--bt-grey-600);
  --bt-border: var(--bt-grey-200);
  --bt-link: var(--bt-color-primary);
  --bt-focus-ring: var(--bt-color-secondary);

  --bt-font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --bt-font-ar:   "Noto Sans Arabic", "Geist", system-ui, sans-serif;
  --bt-font-fa:   "Vazirmatn", "Geist", system-ui, sans-serif;
  --bt-font-body: var(--bt-font-sans);

  --bt-radius-pill: 9999px;

  --bt-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --bt-dur-fast: 140ms;
  --bt-dur-base: 220ms;

  /* Layout / Mechanik */
  --nav-h: 92px;
  --sheet-radius: 40px;
  --sheet-peek: 28px;
  --hero-size: 560px; /* Ruheposition des Sheets auf Unterseiten (pro Seite überschrieben) */
  --hero-layers: linear-gradient(180deg, var(--bt-color-secondary) 0%, var(--bt-color-primary) 100%);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}

html[lang="de"] { --bt-color-primary: var(--bt-de-purple); --bt-color-secondary: var(--bt-de-teal); }
/* en vorläufig in den bibletunes-Hauptfarben — eigene en-Farbwelt folgt mit dem Launch */
html[lang="en"] { --bt-color-primary: var(--bt-de-purple); --bt-color-secondary: var(--bt-de-teal); }
html[lang="fr"] { --bt-color-primary: var(--bt-fr-saffron); --bt-color-secondary: var(--bt-fr-amber); }
html[lang="fa"] { --bt-color-primary: var(--bt-fa-forest); --bt-color-secondary: var(--bt-fa-olive); --bt-font-body: var(--bt-font-fa); }
html[lang="ar"] { --bt-color-primary: var(--bt-ar-date); --bt-color-secondary: var(--bt-ar-kaki); --bt-font-body: var(--bt-font-ar); }

/* Unterseiten-Hero nutzt 160°-Verlauf (Startseite 180°) */
body.is-sub { --hero-layers: linear-gradient(160deg, var(--bt-color-secondary) 0%, var(--bt-color-primary) 100%); }
body.hero-dark { --hero-layers: linear-gradient(0deg, #000 0%, #000 100%); }

/* ---------- 3. Basis ---------- */

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  font: 400 16px/1.55 var(--bt-font-body);
  color: var(--bt-fg);
  background: var(--bt-color-primary);
}

h1, h2, h3, h4, p { margin: 0; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--bt-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

img { max-width: 100%; }

.v4-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* Korn-Textur (Overlay) */
.bt-grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain);
  background-size: 220px 220px;
  mix-blend-mode: overlay;
  opacity: 0.85;
}
body.hero-nograin .bt-hero .bt-grain { display: none; }

/* ==========================================================================
   4. Hero + Sheet-Mechanik
   Hero liegt fest im Hintergrund; das weiße Sheet scrollt (nativ) darüber
   und verschwindet unter der Kopfzeile. Ein fixer „Cover"-Streifen in
   Hero-Optik + zwei Invers-Ecken erzeugen die geclippte runde Kante.
   ========================================================================== */

.bt-hero {
  position: fixed; inset: 0;
  height: 100vh; height: 100svh;
  z-index: 0;
  color: #fff;
  overflow: hidden;
  background-image: var(--hero-layers);
  display: flex; flex-direction: column;
}

.bt-hero__inner {
  position: relative; flex: 1;
  display: flex; flex-direction: column;
  width: 100%;
}

/* Cover-Streifen: verdeckt das Sheet oberhalb der Clip-Kante.
   Form (Streifen + zwei Invers-Ecken für die runde Kante) kommt aus EINER
   Maske auf EINEM Element. Früher waren die Ecken separate Elemente mit
   background-attachment: fixed — das riss in Safari beim Pull-to-Refresh
   (Overscroll) sichtbar vom Hero ab. Ein element-verankertes Element
   bewegt sich dagegen synchron mit dem Hero. */
.bt-cover {
  position: fixed; top: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + var(--sheet-radius));
  z-index: 15; pointer-events: none;
  isolation: isolate;
  -webkit-mask:
    linear-gradient(#000, #000) 0 0 / 100% var(--nav-h) no-repeat,
    radial-gradient(circle var(--sheet-radius) at 100% 100%, transparent calc(var(--sheet-radius) - 0.5px), #000 var(--sheet-radius)) left var(--nav-h) / var(--sheet-radius) var(--sheet-radius) no-repeat,
    radial-gradient(circle var(--sheet-radius) at 0% 100%, transparent calc(var(--sheet-radius) - 0.5px), #000 var(--sheet-radius)) right var(--nav-h) / var(--sheet-radius) var(--sheet-radius) no-repeat;
  mask:
    linear-gradient(#000, #000) 0 0 / 100% var(--nav-h) no-repeat,
    radial-gradient(circle var(--sheet-radius) at 100% 100%, transparent calc(var(--sheet-radius) - 0.5px), #000 var(--sheet-radius)) left var(--nav-h) / var(--sheet-radius) var(--sheet-radius) no-repeat,
    radial-gradient(circle var(--sheet-radius) at 0% 100%, transparent calc(var(--sheet-radius) - 0.5px), #000 var(--sheet-radius)) right var(--nav-h) / var(--sheet-radius) var(--sheet-radius) no-repeat;
}
.bt-cover::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--hero-layers);
  background-size: 100% 100vh; background-size: 100% 100svh;
  background-repeat: no-repeat;
}
.bt-cover::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain);
  background-size: 220px 220px;
  mix-blend-mode: overlay;
  opacity: 0.85;
}
body.hero-nograin .bt-cover::after { display: none; }

/* Sheet — scrollt nativ über den Hero */
.bt-sheet {
  position: relative; z-index: 10;
  margin-top: calc(100vh - var(--sheet-peek));
  margin-top: calc(100svh - var(--sheet-peek));
  background: #fff;
  color: #000;
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  box-shadow: 0 -24px 64px -16px rgba(0, 0, 0, 0.35);
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
}
body.is-sub .bt-sheet {
  margin-top: min(var(--hero-size), calc(100vh - 96px));
  margin-top: min(var(--hero-size), calc(100svh - 96px));
}

/* Anker-Ziele: unter der Kopfzeile andocken */
[data-anchor] { scroll-margin-top: calc(var(--nav-h) + 8px); }

/* Scroll-Hinweis ↓ */
.bt-scrollhint {
  position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%);
  font-size: 12px; opacity: 0.6; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600;
}

/* Hero-Badge („Coming autumn 2026" o. Ä.) — nur wenn content hero.badge setzt */
.bt-herobadge {
  display: inline-flex; align-items: center;
  padding: 9px 16px; border-radius: 9999px; margin-bottom: 26px;
  background: color-mix(in srgb, #fff 16%, transparent);
  border: 1px solid color-mix(in srgb, #fff 30%, transparent);
  backdrop-filter: none;
  font: 700 13px/1 var(--bt-font-sans); letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------- 5. Kopfzeile ---------- */

.bt-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 20; color: #fff;
}
.bt-header nav {
  display: flex; align-items: center;
  padding: 26px 0; width: 100%;
}
.bt-header .side { flex: 1 1 0; display: flex; align-items: center; gap: 10px; }
.bt-header .side--end { justify-content: flex-end; }

.bt-header__logo { height: 36px; display: block; }
.bt-header__logo--dock {
  opacity: 0; transform: translateY(-18px);
  transition: opacity 420ms var(--bt-ease), transform 420ms var(--bt-ease);
  pointer-events: none;
}
body.is-docked .bt-header__logo--dock { opacity: 1; transform: none; pointer-events: auto; }

.v5-anchorlinks { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; flex: 0 0 auto; }
.v5-anchorlinks a {
  color: #fff; font: 500 15px/1.3 inherit; padding: 2px 0;
  border-bottom: 1px solid transparent; transition: border-color 140ms;
}
.v5-anchorlinks a:hover { border-bottom-color: currentColor; }

/* Sprach-Bubble — zeigt eingeklappt nur die aktive Sprache */
.v5-lang {
  display: inline-flex; align-items: center; padding: 4px; border-radius: 9999px;
  background: color-mix(in srgb, #fff 20%, transparent);
  border: 1px solid color-mix(in srgb, #fff 28%, transparent);
  /* Kein backdrop-filter: der Blur erzeugte in Safari beim Pull-to-Refresh
     (Overscroll) ein zusätzliches „Masken"-Flackern über dem Sprach-Button. */
}
.v5-lang a {
  display: inline-block; color: #fff; cursor: pointer;
  font: 700 12px/1 var(--bt-font-sans); letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 9999px; padding: 8px 12px; max-width: 72px; opacity: 0.95;
  overflow: hidden; white-space: nowrap;
  transition: max-width 0.34s var(--bt-ease), opacity 0.2s ease, padding 0.34s var(--bt-ease);
}
.v5-lang a.act { background: #fff; color: var(--bt-color-primary); opacity: 1; }
.v5-lang:not(:hover):not(:focus-within):not(.open) a:not(.act) { max-width: 0; padding-inline: 0; opacity: 0; }
.v5-lang a:hover:not(.act) { background: color-mix(in srgb, #fff 14%, transparent); opacity: 1; }
.v5-lang a[data-font="fa"] { font-family: var(--bt-font-fa); }
.v5-lang a[data-font="ar"] { font-family: var(--bt-font-ar); }

/* Buttons */
.bt-btn {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: var(--bt-radius-pill);
  font: 600 16px/1.55 inherit;
  transition: filter var(--bt-dur-fast) var(--bt-ease);
  text-decoration: none;
}
.bt-btn:hover { filter: brightness(0.94); }
.bt-btn--sm { padding: 9px 16px; font-size: 14px; }
.bt-btn--onhero { background: #fff; color: var(--bt-color-primary); white-space: nowrap; }

/* Burger (mobil) */
.bt-burger {
  appearance: none; cursor: pointer; border: 0; background: transparent;
  padding: 8px; display: none; flex-direction: column; gap: 5px;
  align-items: center; justify-content: center;
}
.bt-burger span {
  width: 22px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform 220ms var(--bt-ease);
}
body.menu-open .bt-burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
body.menu-open .bt-burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.bt-mobilemenu {
  position: fixed; top: var(--nav-h); left: 20px; right: 20px; z-index: 25;
  background: color-mix(in srgb, #000 38%, transparent);
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-radius: 24px; padding: 10px 22px 18px; color: #fff;
  display: none;
}
body.menu-open .bt-mobilemenu { display: block; }
.bt-mobilemenu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bt-mobilemenu li { border-bottom: 1px solid color-mix(in srgb, #fff 14%, transparent); }
.bt-mobilemenu li a {
  display: block; color: #fff; font: 600 17px/1.3 inherit;
  padding: 14px 0; text-align: start;
}
.bt-mobilemenu .langs { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.bt-mobilemenu .langs a {
  border-radius: 9999px; padding: 8px 16px;
  border: 1px solid color-mix(in srgb, #fff 30%, transparent);
  color: #fff; font: 700 13px/1 var(--bt-font-sans);
}
.bt-mobilemenu .langs a.act { background: #fff; color: var(--bt-color-primary); }
.bt-mobilemenu .langs a[data-font="fa"] { font-family: var(--bt-font-fa); }
.bt-mobilemenu .langs a[data-font="ar"] { font-family: var(--bt-font-ar); }

/* ---------- 6. Hero-Inhalt ---------- */

.bt-hero__content {
  flex: 1; display: flex; align-items: center;
  padding: calc(var(--nav-h) + 8px) 40px 64px;
  width: 100%; max-width: 1200px; margin: 0 auto;
  position: relative; z-index: 1; /* über dem b+ Logo (relevant bei RTL) */
}
.bt-hero__content > div { max-width: 780px; }

.v4-h1 { font-weight: 900; letter-spacing: -0.04em; line-height: 0.9; margin: 0; }
.bt-hero__title { font-size: 108px; }
.bt-hero__sub { margin-top: 24px; font-size: 20px; line-height: 1.55; opacity: 0.9; max-width: 520px; }
.bt-hero__ctas { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.bt-hero__now { margin-top: 32px; }

[dir="rtl"] .v4-h1 { line-height: 1.12; letter-spacing: 0; }

/* b+ Logo unten rechts (physisch rechts, auch bei RTL) */
.bt-hero__biglogo {
  position: absolute; right: 48px; bottom: 60px; height: 168px;
  pointer-events: none; transform-origin: 100% 100%;
  will-change: transform, opacity;
}

/* Store-Pills */
.v4-stores { display: flex; gap: 10px; flex-wrap: wrap; }
.v4-store {
  display: inline-flex; align-items: center; gap: 10px;
  background: #000; color: #fff; border-radius: 9999px;
  padding: 12px 22px 12px 16px; text-decoration: none;
  transition: transform 140ms var(--bt-ease);
}
.v4-store:hover { transform: translateY(-4px); }
.v4-store .lbl { display: flex; flex-direction: column; line-height: 1.1; }
.v4-store .lbl small { font-size: 9.5px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.06em; }
.v4-store .lbl strong { font-size: 15px; font-weight: 600; }

/* Now-Pill („Neueste Folge") */
.bt-now-pill {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 10px 20px 10px 12px;
  background: color-mix(in srgb, #fff 14%, transparent);
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  border-radius: 9999px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.bt-now-pill__btn {
  appearance: none; border: 0; cursor: pointer; padding: 0;
  position: relative; width: 32px; height: 32px; border-radius: 9999px;
  background: color-mix(in srgb, #fff 22%, transparent); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bt-now-pill__txt { display: flex; flex-direction: column; line-height: 1.15; }
.bt-now-pill__label {
  font-size: 11px; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
}
.bt-now-pill__title { font-size: 14px; font-weight: 600; }

@keyframes bt-pulse-ring { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes bt-bars { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
.bt-now-pill-bars { display: inline-flex; gap: 2px; align-items: end; height: 14px; }
.bt-now-pill-bars span {
  width: 2.5px; height: 100%; background: currentColor; border-radius: 2px;
  transform-origin: bottom; animation: bt-bars 1s ease-in-out infinite;
}
.bt-now-pill-bars span:nth-child(2) { animation-delay: 0.15s; }
.bt-now-pill-bars span:nth-child(3) { animation-delay: 0.3s; }
.bt-now-pill-bars span:nth-child(4) { animation-delay: 0.45s; }
.bt-play-ring {
  position: absolute; inset: 0; border-radius: 9999px; border: 2px solid currentColor;
  animation: bt-pulse-ring 2.4s ease-out infinite;
}
.bt-now-pill__btn.is-playing .bt-play-ring { display: none; }

/* ---------- 7. Reveal-Animationen ---------- */

@keyframes v4-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
html.js .v4-reveal { opacity: 0; }
html.js .v4-reveal.is-in { animation: v4-up 640ms var(--bt-ease) both; }
html.js .v4-reveal[data-d="1"].is-in { animation-delay: 70ms; }
html.js .v4-reveal[data-d="2"].is-in { animation-delay: 140ms; }
html.js .v4-reveal[data-d="3"].is-in { animation-delay: 210ms; }
html.js .v4-reveal[data-d="4"].is-in { animation-delay: 280ms; }

/* ---------- 8. Typo-Bausteine ---------- */

.v4-h2 { font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; margin: 0; }
[dir="rtl"] .v4-h2 { line-height: 1.2; letter-spacing: 0; }
.v4-eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.v4-num { font-size: 12px; font-weight: 600; color: var(--bt-grey-400); letter-spacing: 0.08em; }

.v4-sechead { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }
.v4-sechead .lbl { display: flex; gap: 12px; align-items: baseline; }
.v4-sechead h2 { font-size: 56px; }
.v4-sechead .txt { max-width: 720px; }
.v4-sechead .sub { margin-top: 16px; font-size: 18px; line-height: 1.55; color: var(--bt-grey-600); max-width: 560px; }

.v4-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: inherit; cursor: pointer; }
.v4-arrow .g { display: inline-block; transition: transform 140ms var(--bt-ease); }
.v4-arrow:hover .g { transform: translate(2px, -2px); }

/* ---------- 9. Karten ---------- */

.v4-card {
  border-radius: 36px; overflow: hidden; position: relative;
  transition: transform 220ms var(--bt-ease), box-shadow 220ms;
}
.v4-card--hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(0,0,0,0.25); }

.v4-grad-de { background: linear-gradient(160deg, #0099A9 0%, #602184 100%); }
.v4-grad-fr { background: linear-gradient(160deg, #DB8E15 0%, #AB241D 100%); }
.v4-grad-fa { background: linear-gradient(160deg, #97912D 0%, #0A4942 100%); }
.v4-grad-ar { background: linear-gradient(160deg, #E85F2D 0%, #5D371E 100%); }

/* Episoden-Karten */
.v4-ep {
  border: 1px solid var(--bt-grey-200); border-radius: 24px; overflow: hidden; background: #fff;
  transition: transform 220ms var(--bt-ease), box-shadow 220ms;
  cursor: pointer;
}
.v4-ep:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -16px rgba(0,0,0,0.2); }
.v4-ep .art { aspect-ratio: 1/1; overflow: hidden; position: relative; }
.v4-ep .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v4-ep .art .pl {
  position: absolute; inset-inline-end: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 9999px;
  background: rgba(0,0,0,0.5); color: #fff; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.v4-ep .info { padding: 14px 16px 18px; }
.v4-ep .book { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bt-color-secondary); }
.v4-ep .title { font-weight: 700; font-size: 15px; margin-top: 4px; letter-spacing: -0.01em; }
.v4-ep .meta { font-size: 12px; color: var(--bt-grey-400); margin-top: 6px; }

.bt-epgrid { display: grid; grid-template-columns: repeat(var(--ep-cols, 5), 1fr); gap: 20px; margin-top: 56px; }

/* Sektionen */
.bt-section { }
.bt-section--line { border-top: 1px solid var(--bt-grey-200); }
.bt-section .v4-container { padding: 88px 40px; }
.bt-section--first .v4-container { padding-top: 88px; }

/* Projekt-Grid (nur /de) */
.bt-projgrid {
  display: grid; grid-template-columns: 1.25fr 1fr 1fr;
  grid-auto-rows: 252px; gap: 20px; margin-top: 56px;
}
.bt-projgrid .main { grid-row: span 2; color: #fff; display: flex; flex-direction: column; padding: 32px; text-decoration: none; }
.bt-projgrid .card { padding: 32px; display: flex; flex-direction: column; text-decoration: none; }
.bt-projgrid .head { display: flex; justify-content: space-between; align-items: start; gap: 16px; position: relative; }
.bt-projgrid .one { font-size: 15px; line-height: 1.5; opacity: 0.85; margin-top: auto; }
.bt-projgrid .main .one { margin-top: 12px; max-width: 300px; }
.bt-projgrid .covers { display: flex; gap: 8px; margin-top: 20px; }
.bt-projgrid .covers img { width: 68px; height: 68px; border-radius: 14px; object-fit: cover; }

/* Pillars (nicht-deutsche Sprachen) */
.bt-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.bt-pillars article {
  background: var(--bt-grey-50); border: 1px solid var(--bt-grey-200);
  padding: 32px; border-radius: 28px; min-height: 240px;
  display: flex; flex-direction: column; gap: 10px;
}
.bt-pillars h3 { font-weight: 800; font-size: 24px; letter-spacing: -0.015em; margin: 6px 0 0; }
.bt-pillars p { font-size: 15px; line-height: 1.55; color: var(--bt-grey-600); margin-top: auto; }

/* Vorstellung („about" — aktuell nur /fr: Texte + Porträt + Intro-Video) */
.bt-about { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; margin-top: 56px; }
.bt-about__text p { font-size: 16.5px; line-height: 1.7; color: var(--bt-grey-800); }
.bt-about__text p + p { margin-top: 16px; }
.bt-about__portrait { margin: 0; }
.bt-about__portrait img { width: 100%; border-radius: 28px; display: block; }
.bt-about__portrait figcaption { font-size: 13px; color: var(--bt-grey-400); margin-top: 12px; }
.bt-about__video { margin-top: 48px; text-align: center; }
.bt-about__video .v4-eyebrow { display: block; margin-bottom: 14px; }
.bt-about__video .frame {
  aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden;
  background: var(--bt-grey-100); max-width: 860px;
  margin-inline: auto; /* mittig — linksbündig wirkte verloren (Joshua, 29.08.) */
}
.bt-about__video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Plattform-Links unter den Episoden (wenn content.episodes.platforms gesetzt) */
.bt-platforms { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: baseline; font-size: 16px; }
.bt-platforms .lbl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bt-grey-400); }
.bt-platforms a { color: #000; }

/* Partner-Streifen vor dem Footer (wenn content.partner gesetzt) */
.bt-partner { padding: 64px 0 72px; text-align: center; }
.bt-partner .lbl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bt-grey-400); margin-bottom: 28px; }
.bt-partner .logos { display: flex; align-items: center; justify-content: center; gap: 36px; flex-wrap: wrap; }
.bt-partner .logos img { height: 44px; width: auto; display: block; }
.bt-partner .logos img.tall { height: 56px; }
.bt-partner .amp { font-size: 22px; font-weight: 300; color: var(--bt-grey-400); }

/* Sprecher (nur /de) */
.bt-speakers { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; margin-top: 56px; }
.bt-speakers .sp { text-align: center; }
.bt-speakers .ava {
  width: 96px; height: 96px; border-radius: 9999px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 26px; letter-spacing: -0.02em;
}
.bt-speakers .nm { font-weight: 700; font-size: 14px; margin-top: 12px; letter-spacing: -0.01em; }
.bt-speakers .rl { font-size: 12px; color: var(--bt-grey-400); margin-top: 3px; }

/* Newsletter */
.bt-news { padding: 44px 40px 88px; }
.bt-news__card { color: #fff; padding: 64px; border-radius: 36px; position: relative; overflow: hidden; }
.bt-news__grad { position: absolute; inset: 0; background: linear-gradient(160deg, var(--bt-color-secondary) 0%, var(--bt-color-primary) 100%); }
.bt-news__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.bt-news h2 { font-size: 52px; margin-top: 16px; }
.bt-news .sub { margin-top: 16px; font-size: 17px; line-height: 1.55; opacity: 0.85; max-width: 400px; }
.bt-news form { display: flex; flex-direction: column; gap: 18px; }
.v4-input {
  width: 100%; appearance: none; background: transparent; border: 0;
  border-bottom: 1.5px solid rgba(255,255,255,0.45); color: #fff;
  font: 500 16px/1.4 inherit; padding: 12px 2px; outline: none;
  transition: border-color 140ms; border-radius: 0;
}
.v4-input::placeholder { color: rgba(255,255,255,0.65); }
.v4-input:focus { border-bottom-color: #fff; }
.bt-news label.chk { display: flex; gap: 10px; align-items: start; font-size: 12.5px; line-height: 1.5; opacity: 0.85; cursor: pointer; }
.bt-news label.chk input { margin-top: 2px; accent-color: #fff; }

/* Spenden */
.bt-donate__form {
  margin-top: 56px; background: var(--bt-grey-50); border: 1px solid var(--bt-grey-200);
  border-radius: 36px; padding: 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;
}
.bt-donate__label {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--bt-grey-400); display: block; margin-bottom: 12px;
}
.v5-donate-seg { display: inline-flex; padding: 4px; border-radius: 9999px; background: var(--bt-grey-100); border: 1px solid var(--bt-grey-200); }
.v5-donate-seg button {
  appearance: none; border: 0; cursor: pointer; background: transparent; color: var(--bt-grey-600);
  font: 600 13px/1 inherit; border-radius: 9999px; padding: 9px 18px;
  transition: background 140ms, color 140ms;
}
.v5-donate-seg button.act { background: #000; color: #fff; }
.bt-donate__amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.v5-donate-pill {
  appearance: none; cursor: pointer; border-radius: 16px; padding: 14px 10px;
  border: 1.5px solid var(--bt-grey-200); background: #fff; color: #000;
  font: 700 17px/1 var(--bt-font-sans); letter-spacing: -0.01em; text-align: center;
  transition: border-color 140ms, background 140ms, color 140ms;
}
.v5-donate-pill:hover { border-color: #000; }
.v5-donate-pill.act { background: #000; border-color: #000; color: #fff; }
.v5-donate-select {
  width: 100%; appearance: none; cursor: pointer; background: #fff; color: #000;
  border: 1.5px solid var(--bt-grey-200); border-radius: 16px; padding: 14px 18px;
  font: 600 15px/1.3 inherit; outline: none; transition: border-color 140ms;
}
.v5-donate-select:hover, .v5-donate-select:focus { border-color: #000; }
.v5-donate-input {
  width: 100%; appearance: none; background: #fff; color: #000; box-sizing: border-box;
  border: 1.5px solid var(--bt-grey-200); border-radius: 16px; padding: 14px 18px;
  font: 600 15px/1.3 inherit; outline: none; transition: border-color 140ms;
}
.v5-donate-input:focus { border-color: #000; }
.v5-donate-input::placeholder { color: var(--bt-grey-400); font-weight: 500; }
.bt-donate__selectwrap { position: relative; }
.bt-donate__selectwrap .caret {
  position: absolute; inset-inline-end: 18px; top: 50%; transform: translateY(-50%);
  pointer-events: none; font-size: 12px; color: var(--bt-grey-400);
}
.bt-donate__receipt label { display: flex; gap: 10px; align-items: start; font-size: 14px; line-height: 1.5; cursor: pointer; font-weight: 600; }
.bt-donate__receipt input[type="checkbox"] { margin-top: 3px; accent-color: #000; }
.bt-donate__receipt .note { margin: 10px 0 0 26px; font-size: 12.5px; line-height: 1.55; color: var(--bt-grey-400); }
[dir="rtl"] .bt-donate__receipt .note { margin: 10px 26px 0 0; }
.bt-donate__receipt .fields { display: grid; gap: 10px; margin-top: 14px; }
.bt-donate__receipt .fields.hidden, .bt-donate__receipt .note.hidden { display: none; }
.bt-donate__note { margin: 14px 0 0; font-size: 12.5px; color: var(--bt-grey-400); }

/* Hinweiskasten im transferOnly-Modus (Online-Spende noch nicht verfügbar) */
.bt-donate__notice {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 24px; margin: 36px 0 0; padding: 16px 22px;
  border-radius: 20px; background: var(--bt-grey-50); border: 1px solid var(--bt-grey-100);
  font-size: 14.5px; color: var(--bt-grey-800);
}
.bt-donate__notice span { max-width: 640px; }
.bt-donate__notice a { color: var(--bt-color-primary); font-weight: 600; white-space: nowrap; }

/* Statisches Konten-Panel (transferOnly): direkt sichtbar, beide Währungen */
.bt-banks--static { margin-top: 24px; max-width: 760px; }
.bt-banks .addr { color: var(--bt-grey-600); font-weight: 400; }

/* ---------- 10. Footer ---------- */

.bt-footer { border-top: 1px solid var(--bt-grey-200); background: #fff; }
.bt-footer .v4-container { padding: 64px 40px 48px; }
.bt-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.bt-footer__brand img { height: 30px; }
.bt-footer__brand p { font-size: 13.5px; line-height: 1.6; color: var(--bt-grey-600); margin-top: 14px; max-width: 260px; }
.bt-footer h4 {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--bt-grey-400); margin: 0 0 14px;
}
.bt-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.bt-footer ul a { color: #000; }
.bt-footer ul a:hover { text-decoration: underline; }
.bt-footer .ext { font-size: 11px; opacity: 0.55; margin-inline-start: 5px; }

.bt-footer__langs {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--bt-grey-200);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.bt-footer__langs a {
  border: 1px solid var(--bt-grey-200); background: #fff; color: var(--bt-grey-600);
  font-weight: 600; font-size: 13px; padding: 7px 16px; border-radius: 9999px;
}
.bt-footer__langs a.act { border: 1.5px solid #000; color: #000; }
.bt-footer__langs a span { opacity: 0.5; font-weight: 500; }
.bt-footer__langs a[data-font="fa"] { font-family: var(--bt-font-fa); }
.bt-footer__langs a[data-font="ar"] { font-family: var(--bt-font-ar); }

.v4-social { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 32px; }
.v4-social a { font-weight: 700; font-size: 18px; color: #000; letter-spacing: -0.01em; }

.bt-footer__base {
  margin-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; font-size: 12.5px; color: var(--bt-grey-400);
}
.bt-footer__base .links { display: flex; gap: 18px; }
.bt-footer__base .links a { color: var(--bt-grey-600); }
.bt-footer__license { font-size: 12px; line-height: 1.6; color: var(--bt-grey-400); margin-top: 18px; max-width: 720px; }

/* ---------- 11. Unterseiten ---------- */

.bt-subhero {
  position: relative;
  padding: calc(var(--nav-h) + 22px) 40px 0;
  max-width: 1200px; margin: 0 auto; width: 100%;
}
.v5sub-back {
  display: inline-flex; align-items: center; gap: 8px; color: #fff; opacity: 0.75;
  font: 600 13px/1 inherit; text-decoration: none; letter-spacing: 0.02em;
  transition: opacity 140ms;
}
.v5sub-back:hover { opacity: 1; }
.bt-subhero .kicker { color: rgba(255,255,255,0.75); margin-top: 26px; }
.bt-subhero h1 { font-size: 76px; margin-top: 14px; max-width: 900px; }
.bt-subhero .intro { margin-top: 22px; font-size: 19px; line-height: 1.55; opacity: 0.9; max-width: 560px; }
.bt-subhero .extra { margin-top: 32px; }
.bt-subhero .herologo { display: block; height: 56px; margin: 28px 0 0; }

/* Nummern-Karten (Podcast-Schritte, Youth-Elemente) */
.bt-stepgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.bt-stepgrid article {
  background: var(--bt-grey-50); border: 1px solid var(--bt-grey-200);
  padding: 32px; border-radius: 28px; min-height: 220px;
  display: flex; flex-direction: column;
}
.bt-stepgrid .num { font-weight: 900; font-size: 40px; letter-spacing: -0.04em; color: var(--bt-color-secondary); }
.bt-stepgrid h3 { font-weight: 800; font-size: 22px; letter-spacing: -0.015em; margin: 18px 0 0; }
.bt-stepgrid p { font-size: 15px; line-height: 1.55; color: var(--bt-grey-600); margin-top: 10px; }

.bt-youthgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 56px; }
.bt-youthgrid article {
  background: #000; color: #fff; border-radius: 28px; padding: 32px;
  display: flex; flex-direction: column; min-height: 210px;
}
.bt-youthgrid .num { font-weight: 900; font-size: 40px; letter-spacing: -0.04em; color: rgba(255,255,255,0.35); }
.bt-youthgrid h3 { font-weight: 800; font-size: 24px; letter-spacing: -0.015em; margin: 18px 0 0; }
.bt-youthgrid p { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.7); margin-top: 10px; }

/* Reihen-Grid (Podcast) */
.bt-seriesgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; margin-top: 56px; }
.bt-seriesgrid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 18px; display: block; }
.bt-seriesgrid .bk { font-weight: 700; font-size: 13.5px; margin-top: 10px; letter-spacing: -0.01em; }
.bt-seriesgrid .mt { font-size: 12px; color: var(--bt-grey-400); margin-top: 2px; }

/* Kids-Kategorien */
.bt-kidsgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.bt-kidsgrid article { padding: 32px; border-radius: 28px; min-height: 250px; display: flex; flex-direction: column; }
.bt-kidsgrid h3 { font-weight: 900; font-size: 26px; letter-spacing: -0.02em; margin: 0; }
.bt-kidsgrid .n { font-size: 13px; font-weight: 700; margin-top: 6px; }
.bt-kidsgrid p { font-size: 15px; line-height: 1.55; color: var(--bt-grey-600); margin-top: auto; }

/* Team-Karten */
.bt-teamgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.bt-teamgrid .p {
  background: var(--bt-grey-50); border: 1px solid var(--bt-grey-200);
  border-radius: 28px; padding: 28px; display: flex; align-items: center; gap: 18px;
}
.bt-teamgrid .ava {
  width: 72px; height: 72px; border-radius: 9999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 22px; letter-spacing: -0.02em;
}
.bt-teamgrid .nm { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.bt-teamgrid .rl { font-size: 13.5px; color: var(--bt-grey-400); margin-top: 3px; }

/* Orgs / Impressum-Karten */
.bt-orggrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.bt-orggrid .org { border-radius: 28px; padding: 32px; }
.bt-orggrid .org--primary { border: 1.5px solid #000; }
.bt-orggrid .org--soft { border: 1px solid var(--bt-grey-200); background: var(--bt-grey-50); }
.bt-orggrid h3 { font-weight: 800; font-size: 24px; letter-spacing: -0.015em; margin: 12px 0 0; }
.bt-orggrid p { font-size: 15px; line-height: 1.65; color: var(--bt-grey-600); margin-top: 10px; }

/* Downloads (Presse) */
.bt-dl { list-style: none; margin: 48px 0 0; padding: 0; display: flex; flex-direction: column; }
.bt-dl li { border-bottom: 1px solid var(--bt-grey-200); }
.bt-dl li:first-child { border-top: 1px solid var(--bt-grey-200); }
.bt-dl a {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 4px; color: #000; text-decoration: none;
}
.bt-dl .t { font-weight: 800; font-size: 22px; letter-spacing: -0.015em; display: block; }
.bt-dl .m { font-size: 14px; color: var(--bt-grey-400); margin-top: 4px; display: block; }
.bt-dl .arr { font-size: 22px; }

/* FAQ */
.v5sub-faq { border-bottom: 1px solid var(--bt-grey-200); }
.v5sub-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: 24px; padding: 22px 0; font: 700 19px/1.35 inherit; letter-spacing: -0.01em;
}
.v5sub-faq summary::-webkit-details-marker { display: none; }
.v5sub-faq summary .ind {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 9999px; border: 1.5px solid var(--bt-grey-200);
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500;
  transition: transform 220ms var(--bt-ease), background 140ms, color 140ms;
}
.v5sub-faq[open] summary .ind { transform: rotate(45deg); background: #000; border-color: #000; color: #fff; }
.v5sub-faq p { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: var(--bt-grey-600); max-width: 640px; }

/* Rechtstexte */
.v5sub-legal h3 { font: 800 22px/1.3 inherit; letter-spacing: -0.015em; margin: 36px 0 10px; }
.v5sub-legal h3:first-child { margin-top: 0; }
.v5sub-legal p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: var(--bt-grey-600); max-width: 640px; }

.bt-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 9999px;
  background: var(--bt-grey-50); border: 1px solid var(--bt-grey-200);
  font-size: 13px; font-weight: 600; color: var(--bt-grey-600); margin-bottom: 40px;
}

/* Kontakt */
.bt-contactgrid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; }
.bt-contactgrid form { display: flex; flex-direction: column; gap: 14px; }
.bt-contactgrid textarea.v5-donate-input { min-height: 160px; resize: vertical; }
.bt-contactgrid h4 {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--bt-grey-400); margin: 0 0 10px;
}
.bt-contactgrid .addr p { font-size: 15px; line-height: 1.6; color: var(--bt-grey-600); }
.bt-contactgrid .side { display: flex; flex-direction: column; gap: 28px; }
.bt-bigmail { font-weight: 800; letter-spacing: -0.015em; color: #000; direction: ltr; display: inline-block; unicode-bidi: embed; }

/* CTA-Panel (Unterseiten) */
.bt-subcta { padding: 24px 40px 88px; }
.bt-subcta__card { color: #fff; padding: 64px; border-radius: 36px; position: relative; overflow: hidden; }
.bt-subcta__grad { position: absolute; inset: 0; background: linear-gradient(160deg, var(--bt-color-secondary) 0%, var(--bt-color-primary) 100%); }
.bt-subcta__row { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.bt-subcta h2 { font-size: 44px; }
.bt-subcta .sub { margin-top: 12px; font-size: 17px; opacity: 0.85; max-width: 440px; line-height: 1.55; }

/* ---------- 12. Player ---------- */

.v5p-desc { font-size: 14.5px; line-height: 1.6; color: var(--bt-grey-600); margin: 0; }
.v5p-desc.clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v5p-morebtn {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 0; margin-top: 6px;
  font: 600 13px/1 inherit; color: #000; border-bottom: 1px solid currentColor;
}
.v5p-skip {
  appearance: none; cursor: pointer; background: #fff; border: 1.5px solid var(--bt-grey-200); color: #000;
  width: 48px; height: 48px; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  font: 700 12.5px/1 var(--bt-font-sans); letter-spacing: -0.02em; gap: 1px; transition: border-color 140ms;
}
.v5p-skip:hover { border-color: #000; }
.v5p-skip .ic { display: flex; flex-direction: column; align-items: center; line-height: 1; direction: ltr; }
.v5p-skip .ic .a { font-size: 13px; }
.v5p-skip .ic .n { font-size: 9.5px; margin-top: 1px; }
.v5p-play {
  appearance: none; cursor: pointer; border: 0; background: #000; color: #fff; width: 64px; height: 64px;
  border-radius: 9999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform 140ms var(--bt-ease);
}
.v5p-play:hover { transform: scale(1.05); }
.v5p-bar { position: relative; height: 16px; display: flex; align-items: center; cursor: pointer; }
.v5p-bar .track { width: 100%; height: 4px; border-radius: 9999px; background: var(--bt-grey-200); overflow: hidden; }
.v5p-bar .fill { height: 100%; border-radius: 9999px; background: #000; width: 0%; }
.v5p-times { display: flex; justify-content: space-between; font-size: 12px; color: var(--bt-grey-400); font-variant-numeric: tabular-nums; }
.v5p-times span { direction: ltr; unicode-bidi: embed; }
.v5p-close {
  appearance: none; cursor: pointer; border: 0; background: var(--bt-grey-50); color: #000; width: 36px; height: 36px;
  border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background 140ms;
}
.v5p-close:hover { background: var(--bt-grey-200); }

@keyframes v5p-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes v5p-fade { from { opacity: 0; } to { opacity: 1; } }
/* Wichtig: translateX(-50%) (horizontale Zentrierung, s. .v5p-mini) muss in
   BEIDEN Keyframes stehen — `both` lässt den End-Keyframe dauerhaft gelten,
   ein `transform: none` würde die Zentrierung überschreiben (Player hinge
   dann um seine halbe Breite nach rechts versetzt). */
@keyframes v5p-mini { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translateX(-50%); } }

.v5p-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 40px;
  animation: v5p-fade 240ms ease both;
}
.v5p-card {
  background: #fff; color: #000; border-radius: 36px; width: 460px; max-width: 100%;
  padding: 36px; box-shadow: 0 32px 80px -24px rgba(0,0,0,0.5); box-sizing: border-box;
  animation: v5p-in 320ms var(--bt-ease) both;
}
.v5p-card .top { display: flex; justify-content: flex-end; }
.v5p-card .hd { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 4px; }
.v5p-card .hd img { width: 176px; height: 176px; border-radius: 24px; object-fit: cover; box-shadow: 0 16px 40px -12px rgba(0,0,0,0.35); }
.v5p-card .kicker { color: var(--bt-color-secondary); margin-top: 22px; }
.v5p-card h3 { font-weight: 800; font-size: 24px; letter-spacing: -0.02em; margin: 8px 0 0; line-height: 1.2; }
.v5p-card .sp { font-size: 14px; color: var(--bt-grey-400); margin-top: 6px; }
.v5p-card .desc { margin-top: 18px; }
.v5p-card .barwrap { margin-top: 22px; }
.v5p-card .controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 14px; }

.v5p-mini {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 30; width: 420px; max-width: calc(100% - 40px); box-sizing: border-box;
  animation: v5p-mini 280ms var(--bt-ease) both;
}
.v5p-mini .row {
  position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: #fff; color: #000; border-radius: 20px; padding: 10px 12px;
  box-shadow: 0 16px 48px -12px rgba(0,0,0,0.4); overflow: hidden;
}
.v5p-mini img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.v5p-mini .tx { flex: 1; min-width: 0; }
.v5p-mini .k {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--bt-color-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v5p-mini .t {
  font-weight: 700; font-size: 13.5px; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.v5p-mini .v5p-play { width: 40px; height: 40px; }
.v5p-mini .v5p-close { width: 32px; height: 32px; font-size: 13px; }
.v5p-mini .prog { position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px; background: var(--bt-grey-200); overflow: hidden; }
.v5p-mini .prog .fill { height: 100%; width: 0%; background: #000; border-radius: 3px; }

[hidden] { display: none !important; }

/* ---------- 12b. App-Sektion (Startseite) + /de/app ---------- */

/* Teaser auf der Startseite: Punkte links, Hand-Mockup rechts.
   Die Sektion hat unten KEIN Padding (#app-Regel): Das Mockup sitzt bündig
   auf der Trennlinie zur nächsten Sektion, der angeschnittene Arm
   „verschwindet" hinter der Linie statt frei im Raum zu enden.
   Den Weißraum bringt stattdessen die Textspalte (.txt) mit. */
#app .v4-container { padding-bottom: 0; }
.bt-appteaser { display: grid; grid-template-columns: 1fr 470px; gap: 72px; align-items: end; }
.bt-appteaser .txt { padding-bottom: 88px; }
.bt-appteaser .points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; }
.bt-appteaser .points li { border-inline-start: 3px solid var(--bt-color-secondary); padding-inline-start: 16px; }
.bt-appteaser .points h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 6px; }
.bt-appteaser .points p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--bt-grey-600); }
.bt-appteaser .ctas { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 40px; }
.bt-appteaser .ctas .morelink { color: #000; font-size: 17px; }
.bt-appteaser .mock img { width: 100%; height: auto; display: block; }

/* Hero-Statistiken auf /de/app (stehen auf dem Verlauf → erben Weiß) */
.bt-appstats { display: flex; gap: 44px; flex-wrap: wrap; margin-top: 36px; }
.bt-appstats .n { display: block; font-size: 34px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
.bt-appstats .l { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.75; margin-top: 4px; }

/* Funktionen: Mockup links, Karten rechts (Karten-Optik wie .bt-stepgrid) */
.bt-appfeat { display: grid; grid-template-columns: 400px 1fr; gap: 64px; align-items: center; margin-top: 56px; }
.bt-appfeat .mock img { width: 100%; height: auto; display: block; }
.bt-appfeat .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bt-appfeat .cards article {
  background: var(--bt-grey-50); border: 1px solid var(--bt-grey-200);
  padding: 28px; border-radius: 28px;
}
.bt-appfeat .cards .num { font-weight: 900; font-size: 28px; letter-spacing: -0.04em; color: var(--bt-color-secondary); }
.bt-appfeat .cards h3 { font-weight: 800; font-size: 19px; letter-spacing: -0.015em; margin: 12px 0 0; }
.bt-appfeat .cards p { font-size: 14.5px; line-height: 1.55; color: var(--bt-grey-600); margin-top: 8px; }

/* App-Screens in Phone-Rahmen */
.bt-phonerow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 56px; }
.bt-phone { margin: 0; }
.bt-phone .frame {
  border-radius: 40px; border: 8px solid #0b0b0e; background: #0b0b0e;
  overflow: hidden; box-shadow: 0 24px 56px -24px rgba(0, 0, 0, 0.4);
}
.bt-phone .frame img { display: block; width: 100%; height: auto; }
.bt-phone figcaption { text-align: center; margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--bt-grey-600); padding: 0 8px; }

/* Schritt-Raster in 4er-Variante (mobil greift die generische 1-Spalten-Regel) */
.bt-stepgrid--4 { grid-template-columns: repeat(4, 1fr); }

/* Hörerstimmen */
.bt-quotegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.bt-quotegrid figure { margin: 0; background: var(--bt-grey-50); border: 1px solid var(--bt-grey-200); border-radius: 28px; padding: 32px 28px; display: flex; flex-direction: column; }
.bt-quotegrid blockquote { margin: 0; font-size: 16.5px; line-height: 1.6; }
.bt-quotegrid blockquote::before { content: "„"; display: block; font-size: 48px; font-weight: 900; line-height: 0.5; color: var(--bt-color-secondary); margin-bottom: 14px; }
.bt-quotegrid figcaption { font-size: 14px; color: var(--bt-grey-600); margin-top: 18px; }

@media (max-width: 900px) {
  .bt-appteaser { grid-template-columns: 1fr; gap: 48px; }
  .bt-appteaser .txt { padding-bottom: 0; } /* Abstand kommt gestapelt vom gap */
  .bt-appteaser .mock img { max-width: 400px; margin: 0 auto; }
  .bt-appfeat { grid-template-columns: 1fr; gap: 48px; margin-top: 28px; }
  .bt-appfeat .mock img { max-width: 400px; margin: 0 auto; }
  .bt-phonerow { grid-template-columns: 1fr 1fr; margin-top: 28px; }
  .bt-stepgrid--4 { grid-template-columns: 1fr 1fr; }
  .bt-quotegrid { grid-template-columns: 1fr; margin-top: 28px; gap: 14px; }
}
@media (max-width: 820px) {
  .bt-appteaser .points { grid-template-columns: 1fr; gap: 20px; }
  .bt-appteaser .ctas { margin-top: 28px; }
  .bt-appfeat .cards { grid-template-columns: 1fr; gap: 14px; }
  .bt-appstats { gap: 28px; }
  .bt-appstats .n { font-size: 28px; }
}

/* Spenden: Betrag-Zeile mit Währungsumschalter (€/CHF — TWINT braucht CHF) */
.bt-donate__amountrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v5-donate-seg--cur { flex: 0 0 auto; }
.v5-donate-seg--cur button { padding: 7px 13px; font-size: 13px; }

/* ---------- 12c. Shop, Bibelwerkstatt, Sprecherseite ---------- */

/* Produktkarten (/de/shop) */
.bt-shopgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 56px; }
.bt-product { display: flex; flex-direction: column; border: 1px solid var(--bt-grey-200); }
.bt-product .ph { aspect-ratio: 16 / 10; background: var(--bt-grey-50); border-bottom: 1px solid var(--bt-grey-200); }
.bt-product .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-product .bd { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.bt-product .mt { font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bt-color-secondary); }
.bt-product h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.015em; margin: 8px 0 0; }
.bt-product p { font-size: 15px; line-height: 1.55; color: var(--bt-grey-600); margin-top: 10px; }
.bt-product .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 22px; }
.bt-product .pr { font-size: 20px; font-weight: 800; }
.bt-product .variant { margin-top: 16px; width: 100%; cursor: pointer; }

/* Bibelwerkstatt-Teaser im Shop (dunkle Karte, passend zum Logo) */
.bt-werkteaser { position: relative; background: #0b0b0e; color: #fff; margin-top: 56px; }
.bt-werkteaser .in { position: relative; display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: center; padding: 48px; }
.bt-werkteaser .lg { width: 100%; height: auto; display: block; }
.bt-werkteaser p { margin: 0; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.bt-werkteaser .pr { margin-top: 14px; font-weight: 700; color: #f2e71d; }
.bt-werkteaser .lnk { display: inline-block; margin-top: 20px; color: #fff; font-size: 17px; }

/* Kurskarten (/de/bibelwerkstatt) */
.bt-coursegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.bt-coursegrid article {
  display: flex; flex-direction: column;
  background: var(--bt-grey-50); border: 1px solid var(--bt-grey-200);
  border-radius: 28px; padding: 28px;
}
.bt-coursegrid .bt-badge { align-self: flex-start; }
.bt-coursegrid h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.015em; margin: 16px 0 0; }
.bt-coursegrid .mt { font-size: 13px; color: var(--bt-grey-400); margin-top: 6px; }
.bt-coursegrid p { font-size: 15px; line-height: 1.55; color: var(--bt-grey-600); margin-top: 12px; }
.bt-coursegrid .lnk { margin-top: auto; padding-top: 18px; color: #000; font-size: 16px; }

/* Breites Hero-Logo (z. B. Bibelwerkstatt-Wortmarke) */
.bt-subhero .herologo--wide { height: 120px; }

/* Bio-Layout + Zitatkarte (Sprecherseite) */
.bt-biogrid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; margin-top: 56px; }
.bt-biogrid .txt p { font-size: 17px; line-height: 1.65; margin: 0 0 18px; }
.bt-quotecard { background: var(--bt-grey-50); border: 1px solid var(--bt-grey-200); padding: 36px; margin: 0; }
.bt-quotecard blockquote { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.45; }
.bt-quotecard blockquote::before { content: "„"; display: block; font-size: 52px; font-weight: 900; line-height: 0.5; color: var(--bt-color-secondary); margin-bottom: 16px; }
.bt-quotecard figcaption { margin-top: 18px; font-size: 14px; color: var(--bt-grey-600); }

/* Terminliste (Sprecherseite) */
.bt-datelist { display: flex; flex-direction: column; gap: 14px; margin-top: 56px; max-width: 720px; }
.bt-datelist .row { display: flex; align-items: center; gap: 24px; padding: 18px 24px; background: #fff; border: 1px solid var(--bt-grey-200); border-radius: 20px; }
.bt-datelist .cal { min-width: 84px; text-align: center; background: var(--bt-grey-50); border-radius: 14px; padding: 10px 12px; }
.bt-datelist .cal .d { display: block; font-size: 26px; font-weight: 900; line-height: 1; }
.bt-datelist .cal .m { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bt-grey-600); margin-top: 4px; }
.bt-datelist .t { font-weight: 700; font-size: 16.5px; }
.bt-datelist .l { font-size: 14px; color: var(--bt-grey-600); margin-top: 2px; }

/* Bankverbindungs-Panel (Spenden per Überweisung) */
.bt-banks {
  margin-top: 20px; background: var(--bt-grey-50);
  border: 1px solid var(--bt-grey-200); border-radius: 28px; padding: 32px;
}
.bt-banks h3 { font-size: 20px; font-weight: 800; margin: 0; }
.bt-banks .info { font-size: 15.5px; line-height: 1.6; color: var(--bt-grey-600); margin: 10px 0 0; }
.bt-banks .monthly {
  font-size: 14.5px; line-height: 1.55; margin: 14px 0 0; padding: 12px 16px;
  background: color-mix(in srgb, var(--bt-color-secondary) 10%, #fff);
  border-inline-start: 3px solid var(--bt-color-secondary); border-radius: 10px;
}
.bt-banks .acct { margin-top: 20px; }
.bt-banks .acct .lbl { font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bt-color-secondary); margin-bottom: 6px; }
.bt-banks table { width: 100%; border-collapse: collapse; font-size: 15px; }
.bt-banks td { padding: 9px 0; border-bottom: 1px solid var(--bt-grey-200); vertical-align: top; }
.bt-banks td:first-child { color: var(--bt-grey-600); padding-inline-end: 20px; white-space: nowrap; width: 1%; }
.bt-banks [data-copy-text] { font-weight: 700; }
.bt-banks .cp {
  margin-inline-start: 10px; padding: 3px 10px; border-radius: 9999px; cursor: pointer;
  border: 1px solid var(--bt-grey-200); background: #fff; font-size: 12.5px; font-weight: 600;
}
.bt-banks .cp:hover { border-color: var(--bt-grey-400); }

/* Bildergalerie (Shop): Pfeile erscheinen beim Überfahren, nur bei >1 Bild */
.bt-gal { position: relative; width: 100%; height: 100%; }
.bt-gal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-gal .g-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.78); color: #000;
  font-size: 24px; line-height: 1; padding: 0 0 3px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  opacity: 0; transition: opacity 160ms ease;
}
.bt-gal .g-prev { inset-inline-start: 12px; }
.bt-gal .g-next { inset-inline-end: 12px; }
.bt-gal:hover .g-btn, .bt-gal .g-btn:focus-visible { opacity: 1; }
@media (hover: none) { .bt-gal .g-btn { opacity: 1; } } /* Touch: immer sichtbar */
.bt-gal .g-count {
  position: absolute; inset-inline-end: 12px; bottom: 10px;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 9999px;
}

/* Produktkarte: Titel-Link + Detail-Link */
.bt-product h3 a { color: inherit; }
.bt-product h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bt-product .dlink { margin-top: 12px; font-size: 15px; color: #000; align-self: flex-start; }

/* Produkt-Detailseite */
.bt-productdetail { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.bt-productdetail .left { position: sticky; top: calc(var(--nav-h) + 20px); }
.bt-gal--detail { aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; background: var(--bt-grey-50); border: 1px solid var(--bt-grey-200); }
.bt-gal--detail img { object-fit: contain; } /* Produktfotos nicht beschneiden */
.bt-productdetail .info .mt { font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bt-color-secondary); }
.bt-productdetail .info .pr { font-size: 26px; font-weight: 800; margin-top: 8px; }
.bt-productdetail .info p { font-size: 16px; line-height: 1.65; margin: 16px 0 0; }
.bt-productdetail .info ul { margin: 16px 0 0; padding-inline-start: 20px; }
.bt-productdetail .info li { font-size: 15.5px; line-height: 1.65; }
.bt-productdetail .info .variant { margin-top: 20px; max-width: 320px; }
.bt-productdetail .buyrow { margin-top: 24px; }
.bt-productdetail .factshead { font-size: 16px; font-weight: 800; margin: 36px 0 6px; }
.bt-facts { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.bt-facts td { padding: 9px 0; border-bottom: 1px solid var(--bt-grey-200); vertical-align: top; }
.bt-facts td:first-child { color: var(--bt-grey-600); padding-inline-end: 24px; white-space: nowrap; }

/* Geschützte Kursseite: Videoliste */
.bt-course__status { font-size: 17px; line-height: 1.6; color: var(--bt-grey-600); max-width: 560px; margin: 0; }
.bt-courselist { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 860px; }
.bt-video { margin: 0; }
.bt-video .frame { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #0b0b0e; box-shadow: 0 20px 48px -20px rgba(0, 0, 0, 0.35); }
.bt-video .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bt-video figcaption { margin-top: 12px; font-weight: 700; font-size: 16px; }

@media (max-width: 900px) {
  .bt-shopgrid { grid-template-columns: 1fr; margin-top: 28px; gap: 14px; }
  .bt-productdetail { grid-template-columns: 1fr; gap: 32px; }
  .bt-productdetail .left { position: static; }
  .bt-werkteaser .in { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
  .bt-werkteaser .lg { max-width: 260px; }
  .bt-coursegrid { grid-template-columns: 1fr; margin-top: 28px; gap: 14px; }
  .bt-biogrid { grid-template-columns: 1fr; gap: 32px; margin-top: 28px; }
  .bt-subhero .herologo--wide { height: 84px; }
  .bt-datelist { margin-top: 28px; }
}

/* ---------- 13. RTL-Feinheiten ---------- */

[dir="rtl"] .bt-hero__title,
[dir="rtl"] .bt-subhero h1 { letter-spacing: 0; }

/* Bei RTL steht der Inhalt rechts — das b+ Logo weicht nach unten links aus,
   damit es die „Neueste Folge"-Pill nicht überdeckt (spiegelbildlich zu LTR). */
[dir="rtl"] .bt-hero__biglogo { right: auto; left: 48px; transform-origin: 0% 100%; }

/* ---------- 14. Responsive ---------- */

@media (max-width: 900px) {
  .v4-sechead { grid-template-columns: 1fr; gap: 12px; }
  .bt-projgrid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .bt-projgrid .main { min-height: 320px; grid-column: 1 / -1; grid-row: auto; }
  .bt-seriesgrid { grid-template-columns: repeat(4, 1fr); }
  .bt-contactgrid { grid-template-columns: 1fr; gap: 40px; }
  .bt-subhero h1 { font-size: 56px; }
}

@media (max-width: 820px) {
  :root { --nav-h: 72px; }

  .v4-container { padding: 0 20px; }
  body { font-size: 15px; }

  .bt-header nav { padding: 16px 20px; }
  .bt-header .v5-anchorlinks, .bt-header .v5-lang { display: none; }
  .bt-burger { display: flex; }
  .bt-header__logo { height: 28px; }

  .bt-hero__content { padding: calc(var(--nav-h) + 8px) 20px 120px; }
  .bt-hero__title { font-size: 54px; }
  .bt-hero__sub { font-size: 16px; }
  .bt-hero__ctas { margin-top: 28px; }
  .bt-hero__now { margin-top: 22px; }
  .bt-hero__biglogo { right: 20px; bottom: 44px; height: 96px; }
  [dir="rtl"] .bt-hero__biglogo { right: auto; left: 20px; }

  .bt-section .v4-container { padding: 48px 20px; }
  .v4-sechead h2 { font-size: 34px; }
  .v4-sechead .sub { font-size: 15px; }

  .bt-epgrid { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
  .bt-epgrid .v4-ep:nth-child(n+5) { display: none; }
  .v4-ep .info { padding: 12px 14px 14px; }
  .v4-ep .title { font-size: 14px; }

  .bt-projgrid { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .bt-projgrid .main { min-height: 320px; }
  .bt-projgrid .card { min-height: 180px; padding: 24px; }
  .bt-projgrid .covers img { width: 56px; height: 56px; }

  .bt-pillars { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .bt-about { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
  .bt-about__portrait { max-width: 420px; }
  .bt-about__video { margin-top: 32px; }
  .bt-about__video .frame { border-radius: 20px; }
  .bt-partner { padding: 44px 0 52px; }
  .bt-partner .logos { gap: 22px; }
  .bt-partner .logos img { height: 34px; }
  .bt-partner .logos img.tall { height: 44px; }
  .bt-pillars article { padding: 24px; min-height: 0; }
  .bt-pillars h3 { font-size: 20px; }
  .bt-pillars p { font-size: 14px; }

  .bt-speakers { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
  .bt-speakers .ava { width: 72px; height: 72px; font-size: 20px; }
  .bt-speakers .nm { font-size: 12.5px; }
  .bt-speakers .rl { font-size: 11px; }

  .bt-news { padding: 24px 20px 48px; }
  .bt-news__card { padding: 36px 24px; }
  .bt-news__grid { grid-template-columns: 1fr; gap: 28px; }
  .bt-news h2 { font-size: 32px; }
  .bt-news .sub { font-size: 14.5px; }

  .bt-donate__form { grid-template-columns: 1fr; gap: 28px; padding: 24px; margin-top: 28px; }

  .bt-footer .v4-container { padding: 40px 20px 32px; }
  .bt-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .bt-footer__brand { grid-column: 1 / -1; }
  .bt-footer__langs { margin-top: 28px; }
  .v4-social { gap: 20px; margin-top: 24px; }
  .v4-social a { font-size: 15px; }
  .bt-footer__base { flex-direction: column; gap: 12px; align-items: flex-start; }

  .bt-subhero { padding: calc(var(--nav-h) + 16px) 20px 0; }
  .bt-subhero h1 { font-size: 40px; }
  .bt-subhero .intro { font-size: 16px; }
  .bt-subhero .herologo { height: 44px; }

  .bt-stepgrid, .bt-kidsgrid, .bt-youthgrid, .bt-teamgrid, .bt-orggrid { grid-template-columns: 1fr; margin-top: 28px; gap: 14px; }
  .bt-seriesgrid { grid-template-columns: repeat(3, 1fr); margin-top: 28px; }
  .bt-dl .t { font-size: 18px; }

  .bt-subcta { padding: 12px 20px 48px; }
  .bt-subcta__card { padding: 36px 24px; }
  .bt-subcta h2 { font-size: 30px; }

  .v5p-backdrop { padding: 0; align-items: flex-end; }
  .v5p-card { width: 100%; border-radius: 32px 32px 0 0; padding: 24px 24px 32px; }
  .v5p-card .hd img { width: 148px; height: 148px; }
  .v5p-card h3 { font-size: 21px; }
  .v5p-mini { bottom: 14px; width: calc(100% - 28px); }
}

/* ---------- 15. Reduzierte Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .v4-reveal, html.js .v4-reveal.is-in { animation: none !important; opacity: 1 !important; transform: none !important; }
  .bt-now-pill-bars span, .bt-play-ring { animation: none !important; }
  .v5p-card, .v5p-backdrop, .v5p-mini { animation: none; }
  .v5-lang a { transition: none; }
  .bt-hero__biglogo { transition: none; }
}