/* ============================================================
   Weltenklänge – Design System
   Basis: SoulWorkout-Bausteine, Palette Teal/Gold.
   Vanilla, self-hosted, responsive, hover- & reduced-motion-sicher.
   ============================================================ */

/* ============================================================
   Selbst gehostete Fonts — Original-Schriften der Alt-Seite.
   Bewusst KEIN Google-Fonts-Link: die Seite soll beim Aufruf
   keinen Request an Dritte auslösen (DSGVO, Konzept §9.1).
   ============================================================ */
@font-face{font-family:'Lora';src:url('../Medien/Fonts/lora-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('../Medien/Fonts/lora-400-italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Lora';src:url('../Medien/Fonts/lora-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('../Medien/Fonts/lora-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('../Medien/Fonts/bricolage-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('../Medien/Fonts/bricolage-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('../Medien/Fonts/bricolage-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('../Medien/Fonts/bricolage-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* Farbwelt (dunkles Petrol/Teal + goldenes Licht) */
  --c-bg:#0b2926;
  --c-bg-deep:#071e1c;
  --c-surface:#103b36;
  --c-surface-2:#0e332f;
  --c-gold:#c9a227;
  --c-gold-light:#e7c766;
  --c-gold-soft:rgba(201,162,39,.14);
  --c-cream:#f4efe6;
  --c-muted:#aebfba;
  --c-line:rgba(231,199,102,.18);

  --font-heading:'Lora',Georgia,'Times New Roman',serif;
  --font-body:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;

  --radius:14px;
  --radius-lg:22px;
  --radius-pill:50px;
  --transition:all .3s ease;

  --section-pad:104px;
  --maxw:1180px;

  /* Glass / Schatten */
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  --glass-border:rgba(231,199,102,.16);
  --panel-highlight:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.20);
  --shadow-lift:0 22px 52px rgba(0,0,0,.38),0 6px 18px rgba(0,0,0,.28);
  --shadow-gold:0 8px 30px rgba(201,162,39,.28);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  color:var(--c-cream);
  background:var(--c-bg);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
ul{list-style:none}
/* WICHTIG: das HTML-Attribut hidden muss jeden display-Wert schlagen.
   Ohne diese Regel zeigt z.B. .modal{display:grid} das Modal trotz hidden an. */
[hidden]{display:none!important}

/* ---------- Typo ---------- */
h1,h2,h3{font-family:var(--font-heading);font-weight:600;line-height:1.12;letter-spacing:.01em}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.8rem)}
.eyebrow{font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--c-gold-light)}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--c-muted)}
p{margin:.6em 0 1em}

/* ---------- Layout ---------- */
.container{width:min(var(--maxw),92%);margin-inline:auto}
.section{position:relative;padding:var(--section-pad) 0;overflow:hidden}
.section--deep{background:var(--c-bg-deep)}
.section--surface{background:var(--c-surface-2)}
.text-center{text-align:center}
.stack>*+*{margin-top:1rem}

/* ---------- Ambient Glow Orbs (dezent, im Genre-Ton) ---------- */
.section--orb::after{content:'';position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,var(--c-gold-soft) 0%,transparent 70%);
  top:12%;right:-90px;pointer-events:none;z-index:0;
  animation:orbPulse 8s ease-in-out infinite,orbDrift 16s ease-in-out infinite}
.section--orb.orb-left::after{right:auto;left:-90px;top:40%}
@keyframes orbPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.1)}}
@keyframes orbDrift{0%,100%{transform:translate(0,0)}25%{transform:translate(14px,-20px)}
  50%{transform:translate(-10px,-12px)}75%{transform:translate(8px,10px)}}
.container{position:relative;z-index:1}

/* ---------- Topbar / Nav ---------- */
.topbar{position:fixed;inset:0 0 auto 0;z-index:1000;
  background:rgba(7,30,28,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--c-line)}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem 0;width:min(var(--maxw),92%);margin-inline:auto}
.brand{font-family:var(--font-heading);font-size:1.25rem;font-weight:600;color:var(--c-cream);
  display:flex;align-items:center;gap:.55rem;white-space:nowrap}
.brand b{color:var(--c-gold-light);font-weight:600}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{position:relative;font-size:.82rem;letter-spacing:.06em;color:var(--c-muted);padding-bottom:3px;
  transition:var(--transition)}
.nav a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:var(--c-gold);transition:width .3s ease}
.nav__actions{display:flex;align-items:center;gap:.6rem}
@media (hover:hover){.nav a:hover{color:var(--c-cream)}.nav a:hover::after{width:100%}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:13px 30px;border-radius:var(--radius-pill);
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:2px solid transparent;transition:var(--transition);white-space:nowrap}
.btn--primary{background:linear-gradient(135deg,var(--c-gold) 0%,#a8801a 100%);color:#1a1408;
  box-shadow:var(--shadow-gold)}
.btn--ghost{background:transparent;border-color:var(--c-line);color:var(--c-cream)}
.btn--sm{padding:9px 18px;font-size:.68rem}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{transform:translateY(-3px) scale(1.02);
    box-shadow:0 12px 36px rgba(201,162,39,.45),0 0 18px rgba(231,199,102,.3)}
  .btn--ghost:hover{transform:translateY(-2px);border-color:var(--c-gold);color:var(--c-gold-light)}
}

/* ---------- Cards ---------- */
.card{padding:28px 26px;border-radius:var(--radius-lg);background:var(--glass-bg);
  border:1px solid var(--glass-border);box-shadow:var(--panel-highlight),var(--shadow-lift);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-4px);border-color:rgba(231,199,102,.4);
    box-shadow:var(--panel-highlight),0 30px 64px rgba(0,0,0,.45),0 0 16px rgba(201,162,39,.12)}
}
.grid{display:grid;gap:1.4rem}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

/* ---------- Media (Bild-Zoom im Rahmen) ---------- */
.media{overflow:hidden;border-radius:var(--radius);border:1px solid var(--c-line)}
.media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
@media (hover:hover){.media:hover img,.media:focus-visible img{transform:scale(1.05)}}

/* ---------- Divider + Shimmer ---------- */
.divider{width:60px;height:3px;margin:1.3rem auto;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--c-gold),transparent);
  background-size:200% auto;animation:shimmerFlow 5s ease-in-out infinite}
.shimmer{background:linear-gradient(90deg,var(--c-gold) 0%,var(--c-gold-light) 40%,var(--c-gold) 70%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:shimmerText 6s ease-in-out infinite}
@keyframes shimmerFlow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes shimmerText{0%{background-position:-200% center}100%{background-position:200% center}}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;
  padding-top:120px;padding-bottom:80px}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,30,28,.55) 0%,rgba(7,30,28,.72) 55%,var(--c-bg) 100%)}
.hero__inner{position:relative;z-index:2;text-align:center;width:min(820px,92%);margin-inline:auto}
.hero h1{margin:.4rem 0 1rem;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.hero .lead{color:#e6ded0}
.hero__cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}

/* ---------- Scroll-Reveal ---------- */
.reveal{opacity:0;transform:translateY(28px) scale(.985);filter:blur(2px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),filter 1s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:none;filter:blur(0)}
.reveal-d1{transition-delay:.14s}.reveal-d2{transition-delay:.26s}.reveal-d3{transition-delay:.38s}

/* ---------- Footer ---------- */
.footer{background:var(--c-bg-deep);border-top:1px solid var(--c-line);padding:60px 0 40px}
.footer__grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.footer__social{display:flex;gap:1rem;margin-top:1rem}
.footer__social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--c-line);transition:var(--transition)}
@media (hover:hover){.footer__social a:hover{border-color:var(--c-gold);color:var(--c-gold-light);transform:translateY(-2px)}}
.footer__legal{margin-top:2rem;font-size:.78rem;color:var(--c-muted);display:flex;gap:1.2rem;flex-wrap:wrap}

/* ---------- Language toggle ---------- */
.lang-toggle{display:flex;border:1px solid var(--c-line);border-radius:var(--radius-pill);overflow:hidden}
.lang-toggle a{padding:5px 12px;font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--c-muted)}
.lang-toggle a.active{background:var(--c-gold);color:#1a1408}

/* ---------- Responsive ---------- */
@media (max-width:1024px){:root{--section-pad:80px}}
@media (max-width:860px){
  .grid--3,.grid--2{grid-template-columns:1fr}
  .nav{display:none}
  .topbar__inner{padding:.6rem 0}
}
@media (max-width:480px){:root{--section-pad:60px}
  .hero{min-height:88vh}
  .btn{padding:12px 24px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  .section--orb::after,.divider,.shimmer,.media img{animation:none;transition:none}
  .shimmer{-webkit-text-fill-color:var(--c-gold-light);color:var(--c-gold-light)}
}

/* ============================================================
   Teil 2 — Seitenspezifische Bausteine (Rebuild P-1)
   ============================================================ */

/* ---------- Skip-Link ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;padding:12px 20px;
  background:var(--c-gold);color:#1a1408;font-weight:700;border-radius:0 0 var(--radius) 0}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--c-gold-light);outline-offset:3px;border-radius:3px}

/* ---------- Topbar-Ergänzungen ---------- */
.brand__mark{border-radius:50%;flex:none}
.nav-toggle{display:none;width:42px;height:42px;background:transparent;border:1px solid var(--c-line);
  border-radius:10px;padding:0;place-items:center;gap:4px;flex-direction:column}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--c-cream);transition:var(--transition)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobilnav{display:flex;flex-direction:column;gap:.2rem;padding:.6rem 4% 1.1rem;
  background:rgba(7,30,28,.97);border-top:1px solid var(--c-line)}
.mobilnav a{padding:.7rem .4rem;font-size:.95rem;color:var(--c-cream);border-bottom:1px solid var(--c-line)}
.mobilnav a:last-child{border-bottom:none}
.lang-toggle a.is-soon{opacity:.45;cursor:default}

/* ---------- Abschnittsköpfe ---------- */
.sec-head{margin-bottom:2.4rem}
.sec-head h2{margin-top:.3rem}
.lead--narrow{max-width:62ch;margin-inline:auto}
.section--surface .lead--narrow,.section--deep .lead--narrow{color:var(--c-muted)}
h4,.footer__h{font-family:var(--font-body);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-gold-light);margin-bottom:.7rem}

/* ---------- Themenliste ---------- */
.themen{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  max-width:960px;margin-inline:auto}
.themen li{display:flex;align-items:flex-start;gap:.8rem;padding:1rem 1.15rem;
  background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);
  font-size:.98rem;line-height:1.45}
.themen__mark{flex:none;width:9px;height:9px;margin-top:.55rem;border-radius:50%;
  background:var(--c-gold);box-shadow:0 0 12px rgba(201,162,39,.7)}

/* ---------- Zweispalter (Release / Über mich / Coaching) ---------- */
.release{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:3rem;align-items:center}
.release--reverse{grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr)}
.release--reverse .release__media{order:2}
.release--reverse .release__body{order:1}
.release--tight{gap:2.2rem}
.release__body h2{margin-top:.4rem}
.release__body .lead{margin-bottom:1.2rem}
.media--cover{aspect-ratio:1;box-shadow:var(--shadow-lift),0 0 40px rgba(201,162,39,.14)}
.media--portrait{aspect-ratio:1;border-radius:var(--radius-lg)}
.logo-plate{width:min(320px,100%);margin-inline:auto;display:block;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.4))}

.badge-new{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-gold-light);background:var(--c-gold-soft);
  border:1px solid var(--c-line);border-radius:var(--radius-pill);padding:.3rem .85rem}

/* ---------- Ausstehende Medien (Videodateien fehlen) ---------- */
.media-pending{margin-top:3rem}
.pending{margin:0;display:flex;flex-direction:column;gap:.75rem}
.pending .media{position:relative}
.pending .media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,30,28,.15),rgba(7,30,28,.6))}
.pending figcaption{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem;color:var(--c-muted)}
.pending figcaption strong{color:var(--c-cream);font-size:.98rem}
.pending__note{align-self:flex-start;margin-top:.2rem;font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--c-gold-light);
  border:1px dashed var(--c-line);border-radius:var(--radius-pill);padding:.2rem .6rem}

/* ---------- Hinweisboxen ---------- */
.notice{margin-top:2.2rem;padding:1.4rem 1.6rem;border-radius:var(--radius-lg);
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-left:3px solid var(--c-gold);max-width:820px;margin-inline:auto}
.notice p{margin:0;color:var(--c-muted)}
.notice strong{color:var(--c-cream)}
.notice__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.notice--invite{text-align:center}
.notice--invite .notice__cta{justify-content:center}

/* ---------- Hörproben-Player ---------- */
.player{display:grid;gap:.8rem;max-width:760px;margin:0 auto}
.player:empty{display:none}
.track{display:flex;align-items:center;gap:1rem;padding:.9rem 1.1rem;
  background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius)}
.track__btn{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--c-line);
  background:var(--c-gold-soft);display:grid;place-items:center;color:var(--c-gold-light);
  transition:var(--transition)}
.track__btn::before{content:'';width:0;height:0;border-style:solid;
  border-width:8px 0 8px 13px;border-color:transparent transparent transparent currentColor;
  margin-left:3px}
.track[data-playing="true"] .track__btn::before{border-width:0;width:11px;height:13px;margin-left:0;
  border-left:4px solid currentColor;border-right:4px solid currentColor;background:transparent}
@media (hover:hover) and (pointer:fine){
  .track__btn:hover{background:var(--c-gold);color:#1a1408;transform:scale(1.06)}
}
.track__meta{min-width:0;flex:1}
.track__title{display:block;font-weight:600;color:var(--c-cream);font-size:.98rem}
.track__sub{display:block;font-size:.8rem;color:var(--c-muted)}
.track__time{font-size:.8rem;color:var(--c-muted);font-variant-numeric:tabular-nums}

/* ---------- Linklisten ---------- */
.linklist{display:flex;flex-direction:column;gap:.45rem;margin-top:1.2rem}
.linklist--tight{margin-top:0;gap:.35rem}
.linklist a{font-size:.9rem;color:var(--c-muted);transition:var(--transition);
  border-bottom:1px solid transparent;align-self:flex-start}
@media (hover:hover){.linklist a:hover{color:var(--c-gold-light);border-bottom-color:var(--c-gold)}}

/* ---------- Angebots-Karten ---------- */
.card--offer{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.card--offer p{flex:1}

/* ---------- Footer-Ergänzungen ---------- */
.footer__col{min-width:170px}
.footer__brand{font-family:var(--font-heading);font-size:1.3rem;color:var(--c-cream);margin-top:.7rem}
.footer__brand span{font-family:var(--font-body);font-size:.82rem;color:var(--c-muted)}
.footer__disclaimer{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--c-line);
  font-size:.78rem;line-height:1.6;color:var(--c-muted);max-width:78ch}
.footer__legal a{transition:var(--transition)}
@media (hover:hover){.footer__legal a:hover{color:var(--c-gold-light)}}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;padding:4%}
.modal__backdrop{position:absolute;inset:0;background:rgba(4,16,15,.86);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal__box{position:relative;width:min(920px,100%);max-height:90vh;overflow:auto;
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift)}
.modal__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.3rem;border-bottom:1px solid var(--c-line)}
.modal__head h3{font-size:1.1rem;margin:0}
.modal__close{background:transparent;border:0;color:var(--c-muted);font-size:1.9rem;line-height:1;
  padding:0 .3rem;transition:var(--transition)}
@media (hover:hover){.modal__close:hover{color:var(--c-gold-light)}}
.modal__body{aspect-ratio:16/9;background:#000}
.modal__body iframe,.modal__body video{width:100%;height:100%;border:0;display:block}
.modal__body--portrait{aspect-ratio:9/16;max-height:78vh;margin-inline:auto;width:auto}

/* ---------- Responsive (nach den Basisregeln, damit es greift) ---------- */
@media (max-width:960px){
  .release,.release--reverse{grid-template-columns:1fr;gap:2rem}
  .release--reverse .release__media,.release--reverse .release__body{order:initial}
  .media--cover,.media--portrait{max-width:420px;margin-inline:auto}
}
@media (max-width:860px){
  .nav-toggle{display:grid}
  .hide-sm{display:none}
  .themen{grid-template-columns:1fr}
  .sec-head{margin-bottom:1.8rem}
}
@media (min-width:861px){
  .mobilnav{display:none!important}
}
@media (max-width:480px){
  .notice{padding:1.1rem 1.2rem}
  .video-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}

/* ---------- Reduced motion (Ergänzung) ---------- */
@media (prefers-reduced-motion:reduce){
  .track__btn,.video-card__play,.video-card__btn,.nav-toggle span{transition:none}
}

/* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */
.legal{padding:150px 0 90px}
.legal__inner{width:min(78ch,92%);margin-inline:auto}
.legal h1{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:.4rem}
.legal .lead{margin-bottom:2.4rem}
.legal h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:2.6rem 0 .8rem;color:var(--c-cream)}
.legal h3{font-size:1.05rem;margin:1.6rem 0 .5rem;color:var(--c-gold-light)}
.legal p,.legal li{color:var(--c-muted);font-size:.95rem;line-height:1.75}
.legal ul,.legal ol{padding-left:1.3rem;display:grid;gap:.4rem;margin:.6rem 0 1.2rem}
.legal ul{list-style:disc}.legal ol{list-style:decimal}
.legal a{color:var(--c-gold-light);text-decoration:underline;text-underline-offset:2px}
.legal address{font-style:normal;color:var(--c-cream);line-height:1.8;margin:.4rem 0 1.2rem}
.legal .box{background:var(--glass-bg);border:1px solid var(--glass-border);
  border-left:3px solid var(--c-gold);border-radius:var(--radius);padding:1.2rem 1.4rem;margin:1.4rem 0}
.legal .box p:last-child{margin-bottom:0}
.legal__back{display:inline-block;margin-bottom:2rem;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--c-gold-light);text-decoration:none}
.legal table{width:100%;border-collapse:collapse;margin:1rem 0 1.6rem;font-size:.88rem}
.legal th,.legal td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--c-line);
  vertical-align:top;color:var(--c-muted)}
.legal th{color:var(--c-cream);font-weight:600}
.legal .tscroll{overflow-x:auto}

/* ============================================================
   Teil 3 — Video-Buttons, Karussell, Zitate
   ============================================================ */

/* ---------- Video-Vorschau-Button (Zwei-Klick) ---------- */
.vthumb{position:relative;display:block;width:100%;padding:0;background:transparent;border:0;
  border-radius:var(--radius);overflow:hidden;text-align:left;cursor:pointer;
  transition:transform .3s ease,box-shadow .3s ease}
.vthumb img{display:block;width:100%;height:auto;transition:transform .45s ease,opacity .3s ease;opacity:.9}
.vthumb__ph{display:block;width:100%;aspect-ratio:9/16;
  background:linear-gradient(160deg,#144b44 0%,#0a2624 60%,#071e1c 100%)}
.vthumb__play{position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:62px;height:62px;border-radius:50%;border:2px solid var(--c-gold);
  background:rgba(11,41,38,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:grid;place-items:center;transition:var(--transition);z-index:2}
.vthumb__play::before{content:'';width:0;height:0;border-style:solid;
  border-width:10px 0 10px 17px;border-color:transparent transparent transparent var(--c-gold-light);
  margin-left:5px}
.vthumb__cap{position:relative;display:flex;flex-direction:column;gap:.25rem;
  padding:.85rem .95rem 1rem;background:var(--glass-bg);border-top:1px solid var(--glass-border)}
.vthumb__cap strong{color:var(--c-cream);font-size:.98rem;line-height:1.3}
.vthumb__cap span{color:var(--c-muted);font-size:.85rem;line-height:1.45}
.vthumb__yt{font-size:.74rem!important;letter-spacing:.02em;color:var(--c-gold-light)!important;
  padding-top:.25rem;font-style:italic}
/* Bericht-Karte: Hochformat-Video (9:16) vollständig sichtbar, Text darunter.
   Entspricht der Alt-Seite; dort waren es 4 Spalten im Raster, hier ein Karussell. */
.vthumb--short{display:flex;flex-direction:column;height:100%;
  border:1px solid var(--c-line);background:var(--c-surface-2)}
.vthumb--short>img{aspect-ratio:9/16;object-fit:cover;flex:none}
.vthumb--short .vthumb__play{top:50%;translate:-50% -50%}
.vthumb--short .vthumb__cap{flex:1;background:var(--glass-bg);
  border-top:1px solid var(--glass-border)}
.vthumb--wide{border:1px solid var(--c-line)}
@media (hover:hover) and (pointer:fine){
  .vthumb:hover img{transform:scale(1.04);opacity:1}
  .vthumb:hover .vthumb__play{transform:scale(1.1);background:rgba(201,162,39,.34)}
  .vthumb:hover{box-shadow:var(--shadow-lift)}
}
.feature-video{margin-top:2.6rem;max-width:760px}
.feature-video--full{max-width:1000px;margin-inline:auto}
.section--tight{padding:0 0 var(--section-pad)}
.card--video{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card--video .vthumb{border-radius:0}
.card--video h3{margin:1.1rem 1.3rem .4rem}
.card--video p{margin:0 1.3rem 1.4rem;color:var(--c-muted);font-size:.92rem}

/* ---------- Unter-Überschriften ---------- */
.sub-head{font-family:var(--font-body);font-size:.74rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-gold-light);margin:0 0 1.1rem}
.sub-head--spaced{margin-top:3.4rem}

/* ---------- Karussell ---------- */
.carousel{position:relative;--slide-w:31.5%}
.carousel--hoch{--slide-w:23.5%}   /* 4 Hochformate wie im Original */
.carousel__viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:.4rem;border-radius:var(--radius)}
.carousel__viewport::-webkit-scrollbar{display:none}
.carousel__viewport:focus-visible{outline:2px solid var(--c-gold-light);outline-offset:4px}
.carousel__track{display:flex;gap:1.4rem;margin:0;padding:0;list-style:none;align-items:stretch}
.carousel__slide{flex:0 0 var(--slide-w);scroll-snap-align:start;display:flex}
.carousel__slide>*{width:100%}
.carousel__nav{position:absolute;top:42%;translate:0 -50%;z-index:5;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--c-line);
  background:rgba(7,30,28,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:grid;place-items:center;transition:var(--transition)}
.carousel__nav--prev{left:-10px}
.carousel__nav--next{right:-10px}
.carousel__nav::before{content:'';width:9px;height:9px;border-top:2px solid var(--c-gold-light);
  border-right:2px solid var(--c-gold-light)}
.carousel__nav--prev::before{rotate:225deg;margin-left:-3px}
.carousel__nav--next::before{rotate:45deg;margin-right:-3px}
.carousel__nav[disabled]{opacity:.3;cursor:default}
@media (hover:hover) and (pointer:fine){
  .carousel__nav:not([disabled]):hover{border-color:var(--c-gold);background:rgba(201,162,39,.24);
    transform:scale(1.07)}
}
.carousel__dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.2rem}
.carousel__dot{width:8px;height:8px;padding:0;border-radius:50%;border:1px solid var(--c-line);
  background:transparent;transition:var(--transition)}
.carousel__dot[aria-selected="true"]{background:var(--c-gold);border-color:var(--c-gold);
  transform:scale(1.25)}

/* ---------- Zitate im Karussell ---------- */
.quote{margin:0;display:flex;flex-direction:column}
.quote h3{color:var(--c-gold-light);font-size:1.2rem;margin-bottom:.7rem}
.quote p{font-size:.9rem;color:var(--c-muted)}
.quote footer{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--c-line);
  font-weight:600;color:var(--c-cream);font-size:.9rem}
.quote footer span{font-weight:400;color:var(--c-muted)}

/* ---------- Responsive Teil 3 ---------- */
@media (max-width:960px){
  .carousel{--slide-w:48%}
  .carousel--hoch{--slide-w:38%}
  .carousel__nav--prev{left:-6px}.carousel__nav--next{right:-6px}
}
@media (max-width:640px){
  .carousel{--slide-w:86%}
  .carousel--hoch{--slide-w:64%}
  .sub-head--spaced{margin-top:2.6rem}
  .card--video h3{margin:1rem 1.1rem .35rem}
  .card--video p{margin:0 1.1rem 1.2rem}
}
@media (max-width:480px){
  .vthumb__play{width:52px;height:52px}
}
@media (prefers-reduced-motion:reduce){
  .carousel__viewport{scroll-behavior:auto}
  .vthumb img,.vthumb__play,.carousel__nav,.carousel__dot{transition:none}
}

/* ============================================================
   Teil 4 — Sektionsfarben der Alt-Seite
   Farben am echten Screenshot ausgemessen
   (archive/.../screenshots/landing-page-full-stitched-clean.png).
   Helle Sektionen überschreiben die Text-Tokens lokal, damit
   alle Bausteine automatisch mitdrehen.
   ============================================================ */
.section--petrol    {background:#05323c}
.section--plum      {background:#5e3256}
.section--teal      {background:#3d87ab}
.section--navy      {background:#243a5f}
.section--navy-deep {background:#1a2948}
.section--indigo    {background:#3a3367}

/* Helles Band: Tokens umdefinieren statt Komponenten anzufassen */
.section--light{
  background:#f2f6f4;
  --c-cream:#10302b;
  --c-muted:#4c655f;
  --c-line:rgba(16,48,43,.16);
  --c-gold-light:#856110;
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.74));
  --glass-border:rgba(16,48,43,.13);
  --panel-highlight:inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-lift:0 18px 42px rgba(16,48,43,.10),0 5px 14px rgba(16,48,43,.06);
  color:var(--c-cream);
}
.section--light .eyebrow{color:#7a5a0d}
.section--light .lead,.section--light .lead--narrow{color:var(--c-muted)}
.section--light .divider{background:linear-gradient(90deg,transparent,#b8901f,transparent)}
.section--light .shimmer{-webkit-text-fill-color:#7a5a0d;color:#7a5a0d;animation:none;background:none}
.section--light::after{display:none}          /* keine Glow-Orbs auf hell */
.section--light .btn--ghost{border-color:rgba(16,48,43,.28)}
.section--light .carousel__nav{background:rgba(255,255,255,.92);border-color:rgba(16,48,43,.18)}
.section--light .carousel__nav::before{border-color:#7a5a0d}
.section--light .vthumb--wide,.section--light .vthumb--short{border-color:rgba(16,48,43,.14)}
.section--light .vthumb__play{background:rgba(255,255,255,.78);border-color:#b8901f}
.section--light .vthumb__play::before{border-left-color:#7a5a0d}
.section--light .themen li{background:rgba(255,255,255,.7)}

/* Helle Töne brauchen dunkleren Gold-Akzent auf dem Teal-Band */
.section--teal{--c-muted:#e8f1f5}
.section--teal .lead,.section--teal .lead--narrow{color:#e8f1f5}

/* ---------- Geschwungene Sektionsübergänge ----------
   Die Alt-Seite trennte Bänder mit SVG-Kurven (clip-path).
   Hier als eigenes Element am Sektionsanfang: die Kurve ist in
   der Farbe der VORHERIGEN Sektion und senkt sich zur Mitte. */
.curve{position:absolute;top:0;left:0;right:0;height:64px;z-index:1;pointer-events:none;
  line-height:0}
.curve svg{display:block;width:100%;height:100%}
.curve svg path{fill:currentColor}
.section{position:relative}
.section>.container{position:relative;z-index:2}
@media (max-width:640px){.curve{height:38px}}

/* ---------- Große Sektionsüberschrift (wie auf der Alt-Seite) ---------- */
.h2--gross{font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.04;margin-bottom:.5rem}

/* ---------- Textkarussell: lange Erfahrungsberichte ---------- */
.carousel--text{--slide-w:46%}
.carousel--text .quote{height:100%}
.carousel--text .quote p{font-size:.92rem;line-height:1.7}
@media (max-width:960px){.carousel--text{--slide-w:66%}}
@media (max-width:640px){.carousel--text{--slide-w:88%}}

/* ============================================================
   Teil 5 — Goshi-Begrüßungsfenster
   Zentriert, Text links / Bild rechts (Layout der Alt-Seite).
   ============================================================ */
.hello{position:fixed;inset:0;z-index:1400;display:grid;place-items:center;padding:4vh 4vw}
.hello__backdrop{position:absolute;inset:0;background:rgba(4,16,15,.72);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.hello__dialog{position:relative;width:min(860px,100%);max-height:88vh;overflow:auto;
  display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:0;
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lift);
  animation:helloIn .45s cubic-bezier(.16,1,.3,1) both}
@keyframes helloIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.hello__text{padding:2rem 1.6rem 2rem 2rem;display:flex;flex-direction:column;gap:.7rem}
.hello__text h2{font-size:clamp(1.5rem,3vw,2.05rem);margin:0;color:var(--c-cream)}
.hello__text p{margin:0;font-size:.95rem;color:var(--c-muted);line-height:1.6}
.hello__liste{display:grid;gap:.3rem;margin:.1rem 0 .2rem;padding-left:1.1rem;list-style:disc}
.hello__liste li{font-size:.95rem;color:var(--c-gold-light)}
.hello__text .btn{align-self:flex-start;margin-top:.5rem}
.hello__bild{padding:1.4rem 2rem 1.4rem 0;display:grid;place-items:center}
.hello__bild img{width:100%;max-width:300px;height:auto;border-radius:50%;
  box-shadow:0 14px 40px rgba(0,0,0,.4)}
.hello__close{position:absolute;top:.5rem;right:.7rem;z-index:2;
  width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.08);
  color:var(--c-cream);font-size:1.9rem;line-height:1;transition:var(--transition)}
@media (hover:hover){.hello__close:hover{background:rgba(201,162,39,.3);color:var(--c-gold-light)}}
@media (max-width:720px){
  .hello__dialog{grid-template-columns:1fr}
  .hello__bild{order:-1;padding:1.6rem 1.6rem 0;}
  .hello__bild img{max-width:170px}
  .hello__text{padding:1.2rem 1.6rem 1.8rem}
}
@media (prefers-reduced-motion:reduce){.hello__dialog{animation:none}}

/* Dialog-Titel: optisch Überschrift, aber kein h-Tag (Gliederung bleibt sauber) */
.modal__titel{font-family:var(--font-heading);font-size:1.1rem;font-weight:600;margin:0}
.hello__titel{font-family:var(--font-heading);font-size:clamp(1.5rem,3vw,2.05rem);
  font-weight:600;line-height:1.15;margin:0;color:var(--c-cream)}

/* ============================================================
   Teil 6 — Originaltreue-Bausteine + Mobil-Feinschliff
   ============================================================ */

/* ---------- Bausteine aus der Originaltreue-Korrektur ---------- */
/* Überschrift über den Kauf-Wegen in der Fotobeta-Sektion (Alt-Seite) */
.kauf-titel{font-family:var(--font-heading);font-size:1.05rem;font-weight:600;
  color:var(--c-cream);margin:1.5rem 0 .1rem}
/* Verlinktes Cover (die Alt-Seite verlinkte das Fotobeta-Cover in den Shop) */
.media__link{display:block;width:100%;height:100%}
/* Unterschrift "Navin" unter der Einladung, eigene Erfahrungen zu schicken */
.notice__sign{font-family:var(--font-heading);font-size:1.05rem;color:var(--c-gold-light);
  margin:.7rem 0 0}
.notice--invite .notice__sign{text-align:center}

/* ---------- Kein Querlauf auf dem Handy ----------
   Ursache: lange deutsche Komposita ("Bewusstseinsebenen",
   "Klangreiseberichte") sind in den Display-Größen breiter als ein
   360px-Viewport. Ohne Umbruchmöglichkeit schiebt das die Layout-
   Breite auf — die Seite wirkt dann "zu weit aufgezoomt" und man
   muss sie mit den Fingern zusammenschieben. */
html{overflow-x:hidden}
/* KEIN hyphens:auto in Überschriften. Die automatische Silbentrennung
   zerlegt sonst Wörter wie „höheren" mitten im Wort („höhe-ren") — in einer
   Display-Überschrift ist das falsch. overflow-wrap greift nur, wenn ein
   einzelnes Wort allein nicht in die Zeile passt, und setzt keinen
   Trennstrich. Stattdessen unter 600px kleinere Schriftstufen, damit die
   Wörter ganz bleiben. */
h1,h2,h3,.h2--gross,.hello__titel,.modal__titel,.footer__brand,.brand{
  overflow-wrap:break-word;hyphens:manual;text-wrap:balance}
p,li,blockquote,.lead,.track__title,.vthumb__cap{overflow-wrap:break-word}
/* Grid-/Flex-Kinder dürfen nicht über ihre Spalte hinauswachsen */
.grid>*,.themen>*,.footer__col,.carousel__slide>*{min-width:0}

@media (max-width:600px){
  h1{font-size:clamp(1.7rem,7.2vw,2.35rem);line-height:1.18}
  .h2--gross{font-size:clamp(1.7rem,7.2vw,2.35rem);line-height:1.14}
  h2{font-size:clamp(1.5rem,6.4vw,2.1rem)}
  h3{font-size:clamp(1.12rem,4.6vw,1.4rem)}
  /* Lange Button-Beschriftungen dürfen umbrechen statt zu überstehen */
  .btn{white-space:normal;text-align:center;padding:12px 20px}
  .footer__col{min-width:100%}
  .footer__grid{gap:1.6rem}
}

/* ============================================================
   Teil 7 — Einwilligung (js/consent.js) und Video-Vorschaltung
   Selbst gehostet, keine Fremdbibliothek. Palette und Schriften
   der Seite, damit der Kasten nicht wie ein Fremdkörper wirkt.
   ============================================================ */

/* ---------- Banner ---------- */
.cc{position:fixed;inset:auto 0 0 0;z-index:1600;display:grid;place-items:end center;
  padding:1rem;pointer-events:none}
.cc__box{pointer-events:auto;width:min(680px,100%);
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);padding:1.4rem 1.5rem}
.cc__titel{font-family:var(--font-heading);font-size:1.15rem;font-weight:600;
  color:var(--c-cream);margin:0 0 .5rem}
.cc__text{font-size:.88rem;line-height:1.6;color:var(--c-muted);margin:0}
.cc__knoepfe{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
/* Gleichwertige Schaltflächen: gleiche Farbe, gleiche Größe, kein Nudging. */
.cc__btn{flex:1 1 auto;min-width:150px;padding:11px 18px;border-radius:var(--radius-pill);
  font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;text-align:center;
  background:transparent;border:2px solid var(--c-gold);color:var(--c-gold-light);
  transition:var(--transition)}
@media (hover:hover) and (pointer:fine){
  .cc__btn:hover{background:var(--c-gold);color:#1a1408}
}
.cc__fuss{margin:.9rem 0 0;font-size:.8rem}
.cc__fuss a{color:var(--c-muted);border-bottom:1px solid var(--c-line)}
@media (hover:hover){.cc__fuss a:hover{color:var(--c-gold-light)}}

/* ---------- Einstellungsdialog ---------- */
.ccd{position:fixed;inset:0;z-index:1700;display:grid;place-items:center;padding:4vh 4vw}
.ccd__hg{position:absolute;inset:0;background:rgba(4,16,15,.8);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.ccd__box{position:relative;width:min(620px,100%);max-height:88vh;display:flex;
  flex-direction:column;background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lift);overflow:hidden}
.ccd__kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.3rem;border-bottom:1px solid var(--c-line)}
.ccd__titel{font-family:var(--font-heading);font-size:1.1rem;font-weight:600;
  color:var(--c-cream);margin:0}
.ccd__x{background:transparent;border:0;color:var(--c-muted);font-size:1.9rem;line-height:1;
  padding:0 .3rem;transition:var(--transition)}
@media (hover:hover){.ccd__x:hover{color:var(--c-gold-light)}}
.ccd__koerper{padding:1.2rem 1.3rem;overflow-y:auto;display:flex;flex-direction:column;gap:1.1rem}
.ccd__text{font-size:.86rem;line-height:1.6;color:var(--c-muted);margin:0}
.ccd__kat{padding:.95rem 1.05rem;border:1px solid var(--c-line);border-radius:var(--radius);
  background:var(--glass-bg)}
.ccd__kat--fest{opacity:.85}
.ccd__katTitel{font-family:var(--font-body);font-size:.95rem;font-weight:700;
  color:var(--c-cream);margin:0}
.ccd__katText{font-size:.82rem;line-height:1.55;color:var(--c-muted);margin:.45rem 0 0}
.ccd__fest{display:inline-block;margin-top:.55rem;font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--c-gold-light);
  background:var(--c-gold-soft);padding:.2rem .5rem;border-radius:4px}
/* Schalter */
.ccd__schalter{display:flex;align-items:center;gap:.7rem;cursor:pointer}
.ccd__schalter input{position:absolute;opacity:0;width:1px;height:1px}
.ccd__spur{flex:none;width:42px;height:24px;border-radius:12px;position:relative;
  background:var(--c-surface-2);border:1px solid var(--c-line);transition:var(--transition)}
.ccd__spur::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:50%;background:var(--c-muted);transition:var(--transition)}
.ccd__schalter input:checked + .ccd__spur{background:var(--c-gold-soft);border-color:var(--c-gold)}
.ccd__schalter input:checked + .ccd__spur::after{transform:translateX(18px);background:var(--c-gold)}
.ccd__schalter input:focus-visible + .ccd__spur{outline:2px solid var(--c-gold-light);outline-offset:2px}
.ccd__fuss{display:flex;flex-wrap:wrap;gap:.6rem;padding:1.1rem 1.3rem;
  border-top:1px solid var(--c-line)}

/* ---------- Video-Vorschaltung im Modal ---------- */
.vgate{padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.9rem;
  background:var(--c-surface)}
.vgate__titel{font-family:var(--font-heading);font-size:1.05rem;font-weight:600;
  color:var(--c-cream);margin:0}
.vgate__text{font-size:.87rem;line-height:1.6;color:var(--c-muted);margin:0}
.vgate__liste{margin:0;padding-left:1.15rem;display:grid;gap:.25rem;list-style:disc}
.vgate__liste li{font-size:.85rem;color:var(--c-muted)}
.vgate__knoepfe{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.3rem}
.vgate__fuss{font-size:.8rem;color:var(--c-muted);margin:0}
.vgate__fuss a{border-bottom:1px solid var(--c-line)}
@media (hover:hover){.vgate__fuss a:hover{color:var(--c-gold-light)}}

/* ---------- Chat-Vorschaltung ---------- */
.cgate{padding:1.2rem 1.25rem;display:flex;flex-direction:column;gap:.8rem;
  font-family:var(--font-body);color:#1f2937;background:#f8f9fa;flex:1;overflow-y:auto}
.cgate h4{margin:0;font-size:1rem;font-weight:700;color:#111827;
  letter-spacing:normal;text-transform:none;font-family:var(--font-body)}
.cgate p{margin:0;font-size:.86rem;line-height:1.55}
.cgate ul{margin:0;padding-left:1.15rem;display:grid;gap:.2rem}
.cgate li{font-size:.84rem}
.cgate__btn{align-self:flex-start;padding:10px 18px;border:none;border-radius:20px;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;
  font-size:.85rem;font-weight:600;cursor:pointer}
.cgate a{color:#4f5ff0;border-bottom:1px dashed rgba(79,95,240,.45)}

/* ---------- Mobil ---------- */
@media (max-width:600px){
  .cc{padding:.6rem}
  .cc__box{padding:1.15rem 1.1rem}
  .cc__btn{flex:1 1 100%;min-width:0}
  .ccd{padding:0}
  .ccd__box{width:100%;max-height:100vh;border-radius:0;border:0}
  .ccd__fuss .cc__btn{flex:1 1 100%}
}

/* Modal-Inhalt ohne 16:9-Korsett (Einwilligungs-Vorschaltung) */
.modal__body--frei{aspect-ratio:auto;background:var(--c-surface)}

/* ---------- Rechtlicher Hinweis am Blickfang ----------
   Muss sichtbar sein, nicht nur im Fußbereich: bei gesundheits-
   bezogenen Aussagen muss der aufklärende Hinweis am Blickfang
   teilnehmen. */
.hinweis{font-size:.82rem;line-height:1.6;color:var(--c-muted);
  border:1px solid var(--c-line);border-radius:var(--radius);
  padding:.85rem 1.05rem;background:rgba(0,0,0,.18)}
.hinweis strong{color:var(--c-cream);font-weight:600}
.hinweis--hero{max-width:62ch;margin:1.6rem auto 0;text-align:left}
.hinweis--sektion{max-width:76ch;margin:1.4rem auto 0;text-align:left}
.section--light .hinweis,.section--teal .hinweis{background:rgba(255,255,255,.55)}
@media (max-width:600px){.hinweis{font-size:.79rem;padding:.75rem .9rem}}

/* Kleiner Standshinweis in den Rechtstexten */
.hinweis-ds{font-size:.82rem;color:var(--c-muted);border-left:3px solid var(--c-line);
  padding-left:.9rem;margin:.9rem 0 1.6rem}

/* ============================================================
   Unterseiten — Katalog, Themen, Wissen, Künstler
   Erzeugt von controller/scripts/seiten_bauen.py.
   Bewusst wenige neue Bausteine: alles andere kommt aus dem
   bestehenden System (section, card, btn, media, reveal).
   ============================================================ */

/* Unterseiten haben keinen Hero — der Inhalt muss unter die
   feste Kopfleiste rutschen, sonst verdeckt sie die Brotkrümel. */
/* Höhe der festen Kopfleiste: Logo 34px + 2x12px Innenabstand + 1px Linie ≈ 59px.
   64px lässt Luft. NICHT im Browser geprüft — gehört in die Sichtprüfung (A3). */
:root{--topbar-h:64px}
body.unterseite{padding-top:var(--topbar-h)}
@media(max-width:520px){:root{--topbar-h:60px}}

.brotkruemel{padding:14px 0;font-size:.82rem;color:var(--c-muted);
  border-bottom:1px solid var(--c-line);background:var(--c-bg-deep)}
.brotkruemel a{color:var(--c-muted);text-decoration:none}
.brotkruemel a:hover,.brotkruemel a:focus-visible{color:var(--c-gold-light);text-decoration:underline}
.brotkruemel__sep{margin:0 .5rem;opacity:.6}
.brotkruemel [aria-current="page"]{color:var(--c-cream)}

.container--schmal{max-width:46rem}

/* Kachelraster: mobil eine Spalte, ab 640px zwei, ab 1000px drei.
   auto-fit statt fester Spaltenzahl — dann bleibt eine einzelne
   Kachel links stehen statt in der Mitte zu schwimmen. */
.kachelraster{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media(min-width:640px){.kachelraster{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.kachelraster{grid-template-columns:repeat(3,1fr)}}

.kachel{border-radius:var(--radius-lg);background:var(--glass-bg);border:1px solid var(--c-line);
  overflow:hidden;transition:transform .3s ease,border-color .3s ease}
.kachel:hover,.kachel:focus-within{transform:translateY(-4px);border-color:var(--c-gold-soft)}
.kachel__link{display:flex;flex-direction:column;gap:.7rem;padding:0 0 1.4rem;
  color:inherit;text-decoration:none;height:100%}
.kachel .media{border:0;border-radius:0;margin-bottom:.4rem}
.kachel__marke{margin:0 1.3rem;font-size:.72rem;letter-spacing:.06em;color:var(--c-gold-light)}
.kachel__titel{margin:0 1.3rem;font-size:1.12rem;line-height:1.3}
.kachel__kurz{margin:0 1.3rem;flex:1;color:var(--c-muted);font-size:.92rem}
.kachel__mehr{margin:0 1.3rem;font-size:.8rem;letter-spacing:.06em;color:var(--c-gold-light)}
.kachel__mehr::after{content:" →"}
.kachel--thema .kachel__link{padding-top:1.5rem}
.kachel__leer{aspect-ratio:1;background:var(--c-surface-2)}

/* Themen-Marken auf der Produktseite */
.marken{display:flex;flex-wrap:wrap;gap:.5rem;margin:.2rem 0 1rem}
.marke{display:inline-block;padding:5px 13px;border-radius:var(--radius-pill);
  border:1px solid var(--c-line);color:var(--c-muted);font-size:.76rem;text-decoration:none}
.marke:hover,.marke:focus-visible{color:var(--c-gold-light);border-color:var(--c-gold-soft)}

.hoerprobe{margin:1.6rem 0}
.hoerprobe audio{width:100%;max-width:34rem}

.kaufblock{margin-top:1.8rem}
.hero__cta--links{justify-content:flex-start}
.kaufblock__hinweis{margin-top:.8rem;font-size:.82rem;color:var(--c-muted)}

.hinweis-leer{margin-top:1.6rem;padding:1.1rem 1.3rem;border-radius:var(--radius);
  border:1px dashed var(--c-line);color:var(--c-muted);font-size:.92rem}

/* Sprungmarke für Tastaturnutzer — auf den Unterseiten Pflicht,
   weil vor dem Inhalt sechs Menüpunkte liegen. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 20px;
  background:var(--c-gold);color:#1a1408;border-radius:0 0 var(--radius) 0}
.skip:focus{left:0}