/* =====================================================
   annatendera.com — One-Pager
   Basis: Struktur/Mechanik der Roxette-Seite (Filmstreifen, Lightbox,
   Ticker, Reveal, Formular, Custom Cursor), neu gestaltet in Rotgold.
   Schriften: Bodoni Moda (Headlines) + Jost (Text), siehe fonts.css
   ===================================================== */

:root {
  /* Grundtöne: warmes Schwarz */
  --black:#0E0B0A;
  --black-mid:#171210;
  --black-soft:#211915;

  /* Rotgold */
  --rg:#D9A07F;          /* Hauptakzent */
  --rg-light:#F3CDB5;    /* Highlights, Hover */
  --rg-deep:#9E5A42;     /* Tiefen, Verläufe */
  --wine:#4A1A1C;        /* dunkles Weinrot für Glow/Verläufe */

  --rg-gradient:linear-gradient(120deg, #F6D7C2 0%, #D9A07F 38%, #B5694F 72%, #E8B497 100%);

  --white:#FFFFFF;
  --off-white:#F5ECE6;
  --muted:#B8A69A;

  --radius:10px;
  --radius-lg:18px;
  --max-width:1180px;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--black);
  color:var(--off-white);
  font-family:var(--font-body);
  font-weight:300;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
h1,h2,h3{margin:0; font-family:var(--font-display); font-weight:400; line-height:1.1;}
p{margin:0;}
em{font-style:italic;}
::selection{background:var(--rg); color:var(--black);}

.container{max-width:var(--max-width); margin:0 auto; padding:0 28px;}
section{position:relative; padding:120px 0;}

/* Kursive Bodoni-Akzente in Headlines, mit Rotgold-Verlauf */
h1 em, h2 em, .footer-name em{
  font-family:var(--font-display); font-style:italic;
  background:var(--rg-gradient); -webkit-background-clip:text; background-clip:text;
  color:transparent;
  padding-right:.06em; /* Kursiv-Überhang nicht abschneiden */
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
  .ticker-track, .film-track, .ref-marquee-track{animation:none !important;}
}

/* ---------- Accessibility ---------- */
.skip-link{
  position:absolute; top:-60px; left:16px; z-index:3000;
  background:var(--rg); color:var(--black);
  padding:12px 20px; border-radius:8px; font-weight:500; font-size:14px;
  transition:top .2s ease;
}
.skip-link:focus{top:16px;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--rg-light); outline-offset:3px;
}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s ease;}
.reveal.is-visible{opacity:1; transform:none;}
.reveal-delay-1.is-visible{transition-delay:.12s;}
.reveal-delay-2.is-visible{transition-delay:.24s;}
.reveal-delay-3.is-visible{transition-delay:.36s;}

/* ---------- Section helpers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-body); font-size:12px; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--rg);
}
.eyebrow::before{content:''; width:34px; height:1px; background:var(--rg); display:inline-block;}

.section-head{max-width:680px; margin:0 auto 60px; text-align:center;}
.section-head .eyebrow{margin-bottom:18px;}
.section-head h2{font-size:clamp(36px,5.4vw,64px); color:var(--white);}
.section-head p{margin-top:20px; color:var(--muted); font-size:17px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 30px; border-radius:100px;
  font-family:var(--font-body); font-weight:500; font-size:13px; line-height:1;
  letter-spacing:.16em; text-transform:uppercase;
  border:1px solid transparent; cursor:pointer;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease, color .3s ease;
}
.btn svg{width:15px; height:15px;}
.btn:hover{transform:translateY(-2px);}
.btn-rg{
  background:var(--rg-gradient); background-size:200% 100%; background-position:0 0;
  color:var(--black);
  box-shadow:0 12px 30px -10px rgba(217,160,127,.55);
}
.btn-rg:hover{background-position:100% 0; box-shadow:0 16px 40px -8px rgba(217,160,127,.75);}
.btn-outline{background:transparent; color:var(--rg-light); border-color:rgba(217,160,127,.55);}
.btn-outline:hover{background:rgba(217,160,127,.1); border-color:var(--rg);}

/* ---------- Custom Cursor (aus Roxette, in Rotgold) ---------- */
@media (hover:hover) and (pointer:fine){
  body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button,
  body.has-custom-cursor .film-item, body.has-custom-cursor label{cursor:none;}
}
/* Achtelnote statt Punkt. Der Notenkopf sitzt an der Mausspitze:
   translate(-29%,-81%) verschiebt das Element so, dass der Kopf (unten links
   in der SVG) auf der Mausposition liegt. Größenänderungen über width/height
   behalten diesen Ankerpunkt bei. */
.custom-cursor{
  position:fixed; top:0; left:0; width:22px; height:29px;
  pointer-events:none; z-index:9999; opacity:0;
  filter:drop-shadow(0 0 6px rgba(217,160,127,.55)) drop-shadow(0 0 14px rgba(217,160,127,.25));
  transition:opacity .2s ease, width .22s ease, height .22s ease;
}
.custom-cursor svg{
  display:block; width:100%; height:100%;
  transform-origin:29% 81%;
  transition:transform .3s cubic-bezier(.3,1.6,.5,1);
}
.custom-cursor.is-visible{opacity:1;}
/* Fallback: ohne Noten-SVG (z. B. alte main.js im Cache) wieder als Punkt anzeigen */
.custom-cursor:empty{
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, var(--rg-light), var(--rg) 55%, var(--rg-deep) 100%);
}
.custom-cursor.is-hover{width:30px; height:40px;}
.custom-cursor.is-hover svg{transform:rotate(-14deg);}
.custom-cursor.is-down svg{transform:rotate(-14deg) scale(.82);}

/* ---------- Navigation ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1100;
  padding:22px 0; border-bottom:1px solid transparent;
  transition:padding .35s ease, border-color .35s ease;
}
/* Hintergrund + Blur auf ::before statt direkt auf .nav: backdrop-filter würde
   sonst das fixierte Mobile-Menü (ul.nav-links) auf die Höhe der Nav-Leiste
   einsperren (backdrop-filter erzeugt einen Containing Block für fixed). */
.nav::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:rgba(14,11,10,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  opacity:0; transition:opacity .35s ease;
}
.nav.is-scrolled::before{opacity:1;}
.nav.is-scrolled{border-bottom-color:rgba(217,160,127,.14); padding:12px 0;}
.nav .container{display:flex; align-items:center; justify-content:space-between; gap:24px;}

.logo-wrap{display:inline-flex; align-items:center;}
.logo-wrap img{height:48px; width:auto;}
.logo-wrap img.logo-broken{display:none;}
.logo-fallback{
  display:none; font-family:var(--font-display); font-style:italic; font-size:26px; color:var(--white); line-height:1;
}
.logo-fallback span{font-style:normal; font-size:11px; letter-spacing:.4em; text-transform:uppercase; font-family:var(--font-body); margin-left:6px; color:var(--rg);}
.logo-wrap img.logo-broken + .logo-fallback{display:inline-flex; align-items:baseline;}

.nav-links{display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0;}
.nav-links a{
  font-size:13px; font-weight:400; letter-spacing:.14em; text-transform:uppercase;
  color:var(--off-white); position:relative; padding:4px 0; white-space:nowrap;
  transition:color .25s ease;
}
.nav-links a::after{
  content:''; position:absolute; left:50%; bottom:-4px; width:0; height:1px;
  background:var(--rg); transition:width .3s ease, left .3s ease;
}
.nav-links a:hover, .nav-links a.is-active{color:var(--rg-light);}
.nav-links a:hover::after, .nav-links a.is-active::after{width:100%; left:0;}
.nav-cta{display:flex; align-items:center; gap:16px;}
.nav .btn{padding:12px 22px; font-size:11.5px;}
.nav-toggle{display:none; background:none; border:none; padding:6px;}
.nav-toggle .bar{display:block; width:24px; height:1.5px; margin:6px 0; background:var(--rg-light); transition:transform .3s ease, opacity .3s ease;}
.nav-toggle[aria-expanded="true"] .bar-1{transform:translateY(7.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .bar-2{opacity:0;}
.nav-toggle[aria-expanded="true"] .bar-3{transform:translateY(-7.5px) rotate(-45deg);}

/* ---------- Hero (Video) ---------- */
.hero{
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:140px 0 120px; overflow:hidden; background:var(--black);
}
.hero-media{position:absolute; inset:0; z-index:0;}
.hero-video{width:100%; height:100%; object-fit:cover; object-position:center;}
/* Dunkler Verlauf links (Lesbarkeit) + warmer Rotgold-Schimmer + weicher Übergang nach unten */
.hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(14,11,10,.88) 0%, rgba(14,11,10,.55) 45%, rgba(14,11,10,.15) 100%),
    linear-gradient(180deg, rgba(14,11,10,.35) 0%, rgba(14,11,10,0) 25%, rgba(14,11,10,0) 70%, var(--black) 100%);
}
.hero-glow{
  position:absolute; z-index:1; pointer-events:none;
  width:70vmax; height:70vmax; left:-20vmax; bottom:-30vmax; border-radius:50%;
  background:radial-gradient(circle, rgba(158,90,66,.35) 0%, rgba(74,26,28,.18) 40%, transparent 70%);
  mix-blend-mode:screen;
  animation:glowPulse 9s ease-in-out infinite;
}
@keyframes glowPulse{0%,100%{opacity:.7; transform:scale(1);} 50%{opacity:1; transform:scale(1.08);}}

.hero-content{position:relative; z-index:2; width:100%;}
.hero-kicker{
  font-size:13px; font-weight:400; letter-spacing:.42em; text-transform:uppercase; color:var(--rg-light);
  margin-bottom:26px;
}
.hero-kicker span{color:var(--rg); margin:0 .5em; font-size:.8em;}
.hero-title{color:var(--white); line-height:.86; margin-bottom:34px;}
.hero-first{
  display:block; font-style:italic; font-size:clamp(64px,11vw,168px);
  background:var(--rg-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-right:.08em;
}
.hero-last{
  display:block; font-size:clamp(46px,7.6vw,118px); letter-spacing:.14em; text-transform:uppercase;
  margin-left:.04em;
}
.hero-tagline{
  font-family:var(--font-display); font-size:clamp(20px,2.4vw,30px); color:var(--off-white); margin-bottom:44px;
}
.hero-tagline em{color:var(--rg-light);}
.hero-ctas{display:flex; flex-wrap:wrap; gap:16px;}

.hero-video-toggle{
  position:absolute; z-index:3; right:28px; bottom:36px;
  width:46px; height:46px; border-radius:50%;
  background:rgba(14,11,10,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(217,160,127,.5); color:var(--rg-light);
  display:flex; align-items:center; justify-content:center; transition:background .25s ease;
}
.hero-video-toggle[hidden]{display:none;}
.hero-video-toggle:hover{background:rgba(217,160,127,.25);}
.hero-video-toggle svg{width:16px; height:16px;}
.hero-video-toggle .icon-play{display:none;}
.hero-video-toggle[aria-pressed="true"] .icon-play{display:block;}
.hero-video-toggle[aria-pressed="true"] .icon-pause{display:none;}

.scroll-cue{
  position:absolute; z-index:3; left:50%; bottom:28px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted);
}
.scroll-line{width:1px; height:48px; background:linear-gradient(var(--rg), transparent); position:relative; overflow:hidden;}
.scroll-line::after{
  content:''; position:absolute; left:0; top:-50%; width:1px; height:50%; background:var(--rg-light);
  animation:scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{0%{top:-50%;} 100%{top:100%;}}

/* ---------- Ticker ---------- */
.ticker{overflow:hidden; padding:26px 0; border-top:1px solid rgba(217,160,127,.15); border-bottom:1px solid rgba(217,160,127,.15);}
.ticker-track{display:flex; width:max-content; animation:tickerScroll 34s linear infinite;}
.ticker-track span{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-family:var(--font-display); font-size:clamp(34px,4.6vw,68px); line-height:1;
  color:var(--off-white); padding:0 34px;
}
.ticker-track span:nth-child(even){font-style:italic; color:transparent; -webkit-text-stroke:1px var(--rg);}
.ticker-track span::after{content:'✦'; font-style:normal; font-size:.32em; color:var(--rg); margin-left:68px; -webkit-text-stroke:0;}
@keyframes tickerScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- Bild-Platzhalter (solange Fotos fehlen) ---------- */
.is-placeholder{
  background:
    radial-gradient(circle at 30% 25%, rgba(243,205,181,.22), transparent 55%),
    linear-gradient(135deg, var(--black-soft), var(--wine));
}
.is-placeholder img{opacity:0;}

/* ---------- About ---------- */
.about-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(40px,7vw,100px); align-items:center;}
.about-photo{margin:0; position:relative; aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden;}
.about-photo img{width:100%; height:100%; object-fit:cover;}
.about-photo::after{
  content:''; position:absolute; inset:14px; border:1px solid rgba(243,205,181,.35); border-radius:12px; pointer-events:none;
}
.about-photo-caption{
  position:absolute; left:30px; bottom:26px; z-index:1;
  font-family:var(--font-display); font-style:italic; font-size:24px; color:var(--white);
  text-shadow:0 2px 16px rgba(0,0,0,.6);
}
.about-copy .eyebrow{margin-bottom:20px;}
.about-copy h2{font-size:clamp(36px,4.6vw,58px); color:var(--white); margin-bottom:30px;}
.about-lead{font-family:var(--font-display); font-size:clamp(20px,2vw,24px); line-height:1.5; color:var(--off-white); margin-bottom:22px;}
.about-copy p:not(.eyebrow):not(.about-lead){color:var(--muted); margin-bottom:16px;}
.about-facts{list-style:none; margin:40px 0 0; padding:30px 0 0; border-top:1px solid rgba(217,160,127,.2); display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.about-facts li{display:flex; flex-direction:column; gap:6px;}
.about-facts strong{
  font-family:var(--font-display); font-weight:400; font-style:italic; font-size:clamp(34px,3.6vw,48px); line-height:1;
  background:var(--rg-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about-facts span{font-size:13px; line-height:1.45; color:var(--muted); letter-spacing:.02em;}

/* ---------- Ensembles ---------- */
.ensembles-section{background:linear-gradient(180deg, var(--black), var(--black-mid) 30%, var(--black-mid) 70%, var(--black));}
.ensemble-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px;}
.ensemble-card{
  position:relative; overflow:hidden;
  padding:46px 36px 40px; border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(217,160,127,.06), rgba(217,160,127,0)), var(--black-soft);
  border:1px solid rgba(217,160,127,.18);
  display:flex; flex-direction:column;
  transition:transform .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.ensemble-card:hover{transform:translateY(-6px); border-color:rgba(217,160,127,.6); box-shadow:0 30px 60px -30px rgba(217,160,127,.4);}
.ensemble-card--featured{border-color:rgba(217,160,127,.5);}
.ensemble-card h3{font-size:clamp(34px,3.4vw,44px); color:var(--white); margin-bottom:10px;}
.ensemble-sub{font-family:var(--font-display); font-style:italic; color:var(--rg-light); font-size:17px; margin-bottom:14px;}
.ensemble-card p:not(.ensemble-sub){color:var(--muted); font-size:16px; margin-bottom:30px;}
.ensemble-link{
  margin-top:auto; display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--rg);
}
.ensemble-link svg{width:15px; height:15px; transition:transform .3s ease;}
.ensemble-link:hover svg{transform:translateX(5px);}

/* ---------- Music ---------- */
.music-wrap{max-width:760px; margin:0 auto;}

.player{
  padding:36px; border-radius:var(--radius-lg);
  background:radial-gradient(circle at 100% 0%, rgba(158,90,66,.28), transparent 60%), var(--black-soft);
  border:1px solid rgba(217,160,127,.22);
}
.player-label{font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--rg); margin-bottom:8px;}
.player-now{font-family:var(--font-display); font-style:italic; font-size:clamp(26px,2.6vw,34px); color:var(--white); line-height:1.15; min-height:1.2em;}
.player-controls{display:flex; align-items:center; gap:18px; margin:28px 0 26px;}
.player-btn{
  flex:0 0 auto; width:62px; height:62px; border-radius:50%; border:none;
  background:var(--rg-gradient); color:var(--black);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px -10px rgba(217,160,127,.7); transition:transform .25s ease;
}
.player-btn:hover{transform:scale(1.06);}
.player-btn svg{width:22px; height:22px;}
.player-btn .icon-play{margin-left:3px;}
.player-btn .icon-pause{display:none;}
.player.is-playing .player-btn .icon-play{display:none;}
.player.is-playing .player-btn .icon-pause{display:block;}
.player-progress{flex:1 1 auto; min-width:0;}
.player-progress input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:3px; margin:0;
  background:linear-gradient(90deg, var(--rg) var(--progress,0%), rgba(245,236,230,.15) var(--progress,0%));
}
.player-progress input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; width:13px; height:13px; border-radius:50%; background:var(--rg-light); border:none;}
.player-progress input[type="range"]::-moz-range-thumb{width:13px; height:13px; border-radius:50%; background:var(--rg-light); border:none;}
.player-times{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-top:8px; font-variant-numeric:tabular-nums;}
.player-eq{display:flex; align-items:flex-end; gap:3px; height:22px; width:22px;}
.player-eq span{flex:1; background:var(--rg); height:20%; border-radius:1px; opacity:.4;}
.player.is-playing .player-eq span{opacity:1; animation:eq 1s ease-in-out infinite;}
.player.is-playing .player-eq span:nth-child(2){animation-delay:.2s;}
.player.is-playing .player-eq span:nth-child(3){animation-delay:.4s;}
.player.is-playing .player-eq span:nth-child(4){animation-delay:.1s;}
@keyframes eq{0%,100%{height:20%;} 50%{height:100%;}}

.tracklist{list-style:none; margin:0; padding:0; border-top:1px solid rgba(217,160,127,.15);}
.tracklist button{
  width:100%; display:flex; align-items:center; gap:16px; text-align:left;
  padding:15px 4px; background:none; border:none; border-bottom:1px solid rgba(217,160,127,.12);
  color:var(--off-white); font-size:16px; font-weight:300; transition:color .25s ease, padding .25s ease;
}
.tracklist button:hover{color:var(--rg-light); padding-left:10px;}
.tracklist button.is-current{color:var(--rg-light);}
.track-no{font-family:var(--font-display); font-style:italic; color:var(--rg); font-size:15px; width:24px;}
.track-title{flex:1 1 auto;}
.track-title em{color:var(--muted); font-size:.9em;}
.track-time{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums;}

/* ---------- Gallery: Filmstreifen + Lightbox (aus Roxette) ---------- */
.gallery-section{padding-bottom:100px;}
.film-gallery{display:flex; flex-direction:column; gap:16px;}
/* Ohne JavaScript: Fotos als einfaches Raster statt Filmstreifen */
.film-gallery:not(.is-built){display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:12px; padding:0 28px; max-width:var(--max-width); margin:0 auto;}
.film-gallery:not(.is-built) > img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:12px;}
.film-row{overflow:hidden; width:100%;}
.film-track{display:flex; align-items:stretch; gap:16px; width:max-content; animation:filmScroll 48s linear infinite;}
.film-row-2 .film-track{animation-duration:36s; animation-direction:reverse;}
.film-gallery:hover .film-track{animation-play-state:paused;}
@keyframes filmScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.film-item{
  position:relative; flex:0 0 auto; height:clamp(150px,21vw,250px); aspect-ratio:3/2;
  border-radius:12px; overflow:hidden; cursor:zoom-in;
  background:var(--black-soft); border:1px solid rgba(217,160,127,.18);
  transition:transform .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.film-item img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.9); transition:filter .45s ease, transform .6s ease;}
.film-item:hover{transform:translateY(-5px); border-color:rgba(217,160,127,.7); box-shadow:0 22px 40px -20px rgba(217,160,127,.5);}
.film-item:hover img{filter:saturate(1.05); transform:scale(1.04);}
.film-item--portrait{aspect-ratio:3/4;}
.film-item.is-placeholder{cursor:default;}

.lightbox{
  position:fixed; inset:0; z-index:2000;
  background:rgba(14,11,10,.95); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:40px;
}
.lightbox[hidden]{display:none;}
.lightbox-img{max-width:90vw; max-height:85vh; border-radius:12px; box-shadow:0 30px 80px -20px rgba(0,0,0,.8);}
.lightbox-close{
  position:absolute; top:24px; right:24px; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.05); border:1px solid rgba(217,160,127,.45); color:var(--rg-light);
  display:flex; align-items:center; justify-content:center; transition:background .2s ease, color .2s ease;
}
.lightbox-close:hover{background:var(--rg); color:var(--black);}
.lightbox-close svg{width:20px; height:20px;}

/* ---------- Musicians: Liner Notes ----------
   Namen als Fließtext wie auf einer Jazz-Plattenrückseite, Instrument
   hochgestellt. Filter-Leiste lässt die Musiker eines Instruments in
   Rotgold aufleuchten, alle anderen treten zurück. */
.musicians-section{background:var(--black-mid);}
.liner-filter{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 6px; margin:0 auto 46px;}
.liner-filter button{
  background:none; border:1px solid transparent; border-radius:100px;
  padding:8px 18px; color:var(--muted);
  font-family:var(--font-body); font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.liner-filter button:hover{color:var(--rg-light); border-color:rgba(217,160,127,.35);}
.liner-filter button.is-active{color:var(--black); background:var(--rg-gradient); border-color:transparent;}

.liner-notes{
  max-width:760px; margin:0 auto; text-align:center;
  font-family:var(--font-display); font-size:clamp(16px,1.3vw,18px); line-height:2;
  color:var(--off-white);
}
.liner-name{white-space:nowrap; transition:opacity .45s ease, color .45s ease, filter .45s ease;}
.liner-name a{color:inherit; transition:color .25s ease;}
.liner-name a::after{content:'↗'; font-family:var(--font-body); font-size:.42em; color:var(--rg); vertical-align:super; margin-left:2px;}
.liner-name a:hover{color:var(--rg-light);}
.liner-name sup{
  font-family:var(--font-display); font-style:italic; font-size:.62em; letter-spacing:.02em;
  color:var(--rg); margin-left:4px; vertical-align:super; line-height:0;
}
.liner-sep{color:var(--rg-deep); font-size:.4em; vertical-align:middle; margin:0 .7em; transition:opacity .45s ease;}
.liner-more{font-style:italic; color:var(--muted);}

/* Filter aktiv */
.liner-notes.is-filtering .liner-name{opacity:.18; filter:blur(.4px);}
.liner-notes.is-filtering .liner-sep, .liner-notes.is-filtering .liner-more{opacity:.18;}
.liner-notes.is-filtering .liner-name.is-lit{
  opacity:1; filter:none;
  background:var(--rg-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.liner-notes.is-filtering .liner-name.is-lit a::after{-webkit-text-fill-color:var(--rg);}
.liner-notes.is-filtering .liner-name.is-lit sup{-webkit-text-fill-color:var(--rg-light);}

/* ---------- References ---------- */
.references-section{padding-bottom:110px; overflow:hidden;}
/* Quelle für JS. Ohne JS bleibt sie als einfache Liste sichtbar (auch für
   Suchmaschinen), main.js blendet sie aus und baut Laufband + A–Z-Index. */
.ref-source{columns:3 220px; list-style:none; padding:0; margin:40px 0 0; color:var(--muted); font-size:15px;}
.ref-source[hidden]{display:none;}
.ref-toggle-wrap[hidden], .ref-index[hidden]{display:none;}

/* Laufband: 3 Reihen, abwechselnd gefüllt/Outline, gegenläufig */
.ref-marquee{display:flex; flex-direction:column; gap:10px; margin-bottom:64px; mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);}
.ref-marquee-row{overflow:hidden;}
.ref-marquee-track{display:flex; width:max-content; animation:tickerScroll 120s linear infinite;}
.ref-marquee-row:nth-child(2) .ref-marquee-track{animation-direction:reverse; animation-duration:110s;}
.ref-marquee-row:nth-child(3) .ref-marquee-track{animation-duration:150s;}
.ref-marquee-track span{
  font-family:var(--font-display); font-size:clamp(22px,2.6vw,36px); line-height:1.4;
  white-space:nowrap; padding:0 22px; color:rgba(245,236,230,.82);
}
.ref-marquee-track span:nth-child(3n+2){font-style:italic; color:var(--rg);}
.ref-marquee-track span:nth-child(3n){color:transparent; -webkit-text-stroke:1px rgba(245,236,230,.45);}
.ref-marquee-track span::after{content:'✦'; font-size:.4em; color:var(--rg-deep); margin-left:44px; vertical-align:middle; -webkit-text-stroke:0;}

/* Großer runder Aufklapp-Button */
.ref-toggle-wrap{display:flex; justify-content:center;}
.ref-toggle{
  position:relative; display:inline-flex; align-items:center; gap:22px;
  padding:16px 18px 16px 34px; border-radius:100px;
  background:transparent; border:1px solid rgba(217,160,127,.5); color:var(--off-white);
  font-size:13px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  transition:border-color .3s ease, background .3s ease;
}
.ref-toggle:hover{border-color:var(--rg); background:rgba(217,160,127,.06);}
.ref-toggle-az{font-family:var(--font-display); font-style:italic; font-size:22px; letter-spacing:0; text-transform:none; color:var(--rg-light);}
.ref-toggle-az i{font-style:normal; color:var(--rg); margin:0 4px;}
.ref-toggle-icon{
  width:48px; height:48px; padding:13px; border-radius:50%;
  background:var(--rg-gradient); color:var(--black);
  transition:transform .5s cubic-bezier(.6,.05,.3,1.3);
}
.ref-toggle[aria-expanded="true"] .ref-toggle-icon{transform:rotate(135deg);}

/* Aufklappen per Grid-Rows-Trick (0fr → 1fr), weich animiert */
.ref-index{display:grid; grid-template-rows:0fr; transition:grid-template-rows .8s cubic-bezier(.65,0,.35,1); margin-top:0;}
.ref-index.is-open{grid-template-rows:1fr; margin-top:56px;}
.ref-index-inner{overflow:hidden; min-height:0;}
.ref-index:not(.is-open) .ref-index-inner{visibility:hidden; transition:visibility 0s .8s;}

.ref-tools{
  position:sticky; top:72px; z-index:5;
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px;
  padding:18px 0 26px; margin-bottom:24px;
  background:linear-gradient(180deg, var(--black) 75%, rgba(14,11,10,0));
}
.ref-search{
  flex:0 1 280px; display:flex; align-items:center; gap:10px;
  border-bottom:1px solid rgba(217,160,127,.4); padding:6px 2px;
}
.ref-search svg{width:17px; height:17px; color:var(--rg); flex:0 0 auto;}
.ref-search input{
  width:100%; background:none; border:none; outline:none; color:var(--off-white);
  font-family:var(--font-display); font-style:italic; font-size:20px;
}
.ref-search input::placeholder{color:rgba(184,166,154,.6);}
.ref-search input::-webkit-search-cancel-button{filter:sepia(1) saturate(3) hue-rotate(-20deg);}
.ref-letters{display:flex; flex-wrap:wrap; gap:2px; flex:1 1 auto;}
.ref-letters button{
  width:30px; height:34px; background:none; border:none; border-radius:6px;
  font-family:var(--font-display); font-size:17px; color:var(--off-white);
  transition:background .2s ease, color .2s ease;
}
.ref-letters button:hover:not(:disabled){background:rgba(217,160,127,.15); color:var(--rg-light);}
.ref-letters button.is-active{color:var(--black); background:var(--rg);}
.ref-letters button:disabled{color:rgba(184,166,154,.25); cursor:default;}

.ref-groups{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,320px),1fr)); gap:10px 40px;}
.ref-group{
  display:grid; grid-template-columns:72px minmax(0,1fr); align-items:start;
  padding:22px 0; border-top:1px solid rgba(217,160,127,.14);
  scroll-margin-top:150px;
  opacity:0; transform:translateY(16px);
}
.ref-index.is-open .ref-group{animation:refIn .7s ease forwards; animation-delay:calc(var(--i,0) * 45ms + .25s);}
@keyframes refIn{to{opacity:1; transform:none;}}
.ref-group[hidden]{display:none;}
.ref-initial{
  font-family:var(--font-display); font-style:italic; font-size:58px; line-height:.9;
  background:var(--rg-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-right:.1em;
}
.ref-group ul{list-style:none; margin:0; padding:4px 0 0;}
.ref-group li{font-size:15.5px; line-height:1.4; padding:5px 0; color:var(--off-white); transition:color .2s ease, transform .2s ease;}
.ref-group li:hover{color:var(--rg-light); transform:translateX(4px);}
.ref-group li[hidden]{display:none;}
.ref-group mark{background:none; color:var(--rg-light); border-bottom:1px solid var(--rg);}
.ref-empty, .ref-closer{
  text-align:center; margin-top:48px;
  font-family:var(--font-display); font-size:clamp(24px,3vw,36px); color:var(--off-white);
}
.ref-empty em, .ref-closer em{color:var(--rg-light);}

/* ---------- Contact ---------- */
.contact-section{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(158,90,66,.3), transparent 60%),
    linear-gradient(180deg, var(--black), var(--black-mid));
}
.contact-wrap{max-width:820px; margin:0 auto;}
.booking-form{
  padding:clamp(28px,5vw,52px); border-radius:var(--radius-lg);
  background:rgba(33,25,21,.7); border:1px solid rgba(217,160,127,.25);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8);
}
.form-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; margin-bottom:22px;}
.field{display:flex; flex-direction:column; gap:9px; min-width:0;}
.field.full{grid-column:1/-1;}
.field label, .field-label{font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--rg-light);}
.req{color:var(--rg);}
.field input, .field select, .field textarea{
  width:100%; font-family:inherit; font-size:16px; font-weight:300; color:var(--off-white);
  background:rgba(14,11,10,.55); border:1px solid rgba(217,160,127,.22); border-radius:8px;
  padding:14px 16px; outline:none; transition:border-color .25s ease, background .25s ease;
}
.field input::placeholder, .field textarea::placeholder{color:rgba(184,166,154,.55);}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--rg); background:rgba(14,11,10,.8);}
.field textarea{resize:vertical; min-height:130px;}
.field input[type="date"]{-webkit-appearance:none; appearance:none; min-height:52px; color-scheme:dark;}
.field select{
  appearance:none; -webkit-appearance:none; padding-right:42px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9A07F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right 15px center; background-size:16px;
}
.field select option{background:var(--black-mid); color:var(--off-white);}
.field select:invalid{color:rgba(184,166,154,.7);}

.lineup-options{display:flex; flex-wrap:wrap; gap:10px;}
.lineup-chip{position:relative;}
.lineup-chip input{position:absolute; opacity:0; inset:0; margin:0;}
.lineup-chip span{
  display:inline-block; padding:11px 22px; border-radius:100px;
  border:1px solid rgba(217,160,127,.35); color:var(--off-white);
  font-family:var(--font-display); font-style:italic; font-size:17px;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.lineup-chip:hover span{border-color:var(--rg);}
.lineup-chip input:checked + span{background:var(--rg-gradient); color:var(--black); border-color:transparent;}
.lineup-chip input:focus-visible + span{outline:2px solid var(--rg-light); outline-offset:3px;}

.field-check{display:flex; align-items:flex-start; gap:12px; margin-top:6px;}
.field-check input{margin-top:5px; accent-color:var(--rg); width:16px; height:16px; flex:0 0 auto;}
.field-check label{font-size:14px; color:var(--muted);}
.field-check a{color:var(--rg-light); text-decoration:underline; text-underline-offset:3px;}

altcha-widget{
  --altcha-color-base:rgba(14,11,10,.55);
  --altcha-color-border:rgba(217,160,127,.22);
  --altcha-color-text:var(--off-white);
  --altcha-color-border-focus:var(--rg);
  --altcha-color-active:var(--rg);
  --altcha-border-radius:8px;
  display:block; margin-top:20px; max-width:100%;
}

.form-actions{margin-top:26px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.form-note{font-size:13px; color:var(--muted);}
.booking-form button[disabled]{opacity:.6; pointer-events:none;}
.form-success{
  display:none; margin-top:26px; padding:20px 22px; border-radius:var(--radius);
  background:rgba(217,160,127,.12); border:1px solid rgba(217,160,127,.45);
  color:var(--off-white); font-size:15px; align-items:center; gap:14px;
}
.form-success.is-visible{display:flex;}
.form-success svg{width:24px; height:24px; color:var(--rg); flex-shrink:0;}
.contact-direct{text-align:center; margin-top:34px; color:var(--muted);}
.contact-direct a{color:var(--rg-light); font-family:var(--font-display); font-style:italic; font-size:20px; margin-left:6px; border-bottom:1px solid rgba(217,160,127,.4);}

/* ---------- Footer ---------- */
.site-footer{background:var(--black); border-top:1px solid rgba(217,160,127,.14); padding:80px 0 0;}
.footer-inner{
  max-width:var(--max-width); margin:0 auto; padding:0 28px 56px;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;
}
.footer-name{font-family:var(--font-display); font-size:clamp(40px,5vw,60px); color:var(--white); line-height:1; margin-bottom:16px;}
.footer-tagline{font-family:var(--font-display); font-size:19px; color:var(--muted);}
.footer-tagline em{color:var(--rg-light);}
.footer-col h4{font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--rg); margin:0 0 18px;}
.footer-col a{display:block; font-size:15px; color:var(--off-white); margin-bottom:11px; transition:color .2s ease;}
.footer-col a:hover{color:var(--rg-light);}
.footer-bottom{
  border-top:1px solid rgba(217,160,127,.12); padding:24px 28px;
  display:flex; justify-content:center; gap:10px 34px; flex-wrap:wrap;
}
.footer-bottom p{font-size:13px; color:var(--muted);}
.footer-credit-link{color:var(--rg-light); border-bottom:1px solid rgba(217,160,127,.35); transition:color .2s ease;}
.footer-credit-link:hover{color:var(--white);}

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width:1080px){
  .nav-links{
    position:fixed; top:0; left:0; right:0; height:100vh; height:100dvh;
    background:rgba(14,11,10,.98);
    flex-direction:column; justify-content:center; gap:28px;
    transform:translateY(-100%); opacity:0; pointer-events:none;
    transition:transform .5s cubic-bezier(.65,0,.35,1), opacity .4s ease;
    z-index:-1;
  }
  .nav-links.is-open{transform:none; opacity:1; pointer-events:auto;}
  .nav-links a{font-family:var(--font-display); font-size:34px; letter-spacing:0; text-transform:none; font-style:italic;}
  .nav-toggle{display:block;}
}

@media (max-width:900px){
  section{padding:90px 0;}
  .about-grid{grid-template-columns:1fr;}
  .about-photo{max-width:480px;}
  .ensemble-grid{grid-template-columns:1fr; max-width:520px; margin:0 auto;}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1/-1;}
}

@media (max-width:640px){
  body{font-size:16px;}
  .container{padding:0 20px;}
  .hero{align-items:flex-end; padding-bottom:110px;}
  .hero-overlay{background:linear-gradient(180deg, rgba(14,11,10,.25) 0%, rgba(14,11,10,.35) 40%, rgba(14,11,10,.92) 85%, var(--black) 100%);}
  .hero-ctas .btn{flex:1 1 auto; justify-content:center;}
  .hero-video-toggle{right:20px; bottom:auto; top:96px;}
  .scroll-cue{display:none;}
  .nav .btn{display:none;}
  /* Fakten auf Mobile: feste Spalte für die Zahl, Text bündig daneben,
     feine Trennlinien zwischen den drei Zeilen */
  .about-facts{grid-template-columns:1fr; gap:0; padding-top:8px;}
  .about-facts li{
    display:grid; grid-template-columns:136px minmax(0,1fr); align-items:center; column-gap:14px;
    padding:16px 0; border-bottom:1px solid rgba(217,160,127,.14);
  }
  .about-facts li:last-child{border-bottom:none;}
  .about-facts strong{font-size:36px; padding-right:.12em; white-space:nowrap;}
  .about-facts span{font-size:14px; line-height:1.5;}
  .liner-notes{font-size:16px; line-height:1.95;}
  .liner-sep{margin:0 .45em;}
  .liner-filter button{padding:7px 13px; letter-spacing:.14em;}
  .form-row{grid-template-columns:1fr;}
  .player{padding:26px 22px;}
  .ref-tools{top:60px;}
  .ref-letters button{width:26px; height:30px; font-size:15px;}
  .ref-toggle{gap:14px; padding:12px 12px 12px 22px; font-size:11px;}
  .ref-toggle-az{display:none;}
  .footer-inner{grid-template-columns:1fr; padding:0 20px 40px;}
}

/* =====================================================
   Klaro (Consent-Banner + Einstellungen) in Rotgold
   "body .klaro …" für höhere Spezifität, da klaro.js sein eigenes CSS
   erst zur Laufzeit (nach main.css) einfügt.
   ===================================================== */
body .klaro .cookie-notice,
body .klaro .cookie-modal,
body .klaro .context-notice{
  --green1:#D9A07F;            /* Akzent: Accept, Links, Schalter */
  --green2:#F3CDB5;
  --green3:#9E5A42;
  --blue1:#D9A07F;
  --blue2:#F3CDB5;
  --blue3:#9E5A42;
  --dark1:#1B1512;             /* Hintergrund */
  --dark2:#2A201B;
  --dark3:#3A2C25;
  --light1:#F5ECE6;            /* Text */
  --light2:#E9DDD5;
  --light3:#B8A69A;
  --white1:#F5ECE6;
  --white2:#E9DDD5;
  --white3:#F5ECE6;
  --button-text-color:#0E0B0A;
  --border-radius:14px;
  --font-family:var(--font-body);
  --title-font-family:var(--font-display);
  --font-size:15px;
}

/* Banner */
body .klaro .cookie-notice:not(.cookie-modal-notice){
  background:#1B1512 !important;
  border:1px solid rgba(217,160,127,.35) !important;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 40px -12px rgba(217,160,127,.25);
}
body .klaro .cookie-notice:focus,
body .klaro .cookie-notice:focus-visible{outline:none;}
body .klaro .cookie-notice .cn-body p{color:#F5ECE6; font-weight:300; line-height:1.65;}
body .klaro .cookie-notice .cn-learn-more,
body .klaro .cookie-modal a{color:#F3CDB5; text-decoration:underline; text-underline-offset:3px;}

/* Buttons: Pill-Form wie auf der Seite */
body .klaro .cm-btn{
  border-radius:100px !important;
  padding:10px 22px !important;
  font-family:var(--font-body) !important;
  font-weight:500 !important;
  font-size:12px !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
/* Accept / Accept all */
body .klaro .cm-btn.cm-btn-success,
body .klaro .cm-btn.cm-btn-accept-all{
  background:linear-gradient(120deg, #F6D7C2 0%, #D9A07F 45%, #B5694F 100%) !important;
  color:#0E0B0A !important;
  border:none !important;
}
/* Decline + Auswahl speichern: Outline */
body .klaro .cm-btn.cm-btn-danger,
body .klaro .cm-btn.cn-decline,
body .klaro .cm-btn.cm-btn-decline,
body .klaro .cm-btn.cm-btn-accept,
body .klaro .cm-btn.cm-btn-info{
  background:transparent !important;
  color:#F3CDB5 !important;
  border:1px solid rgba(217,160,127,.55) !important;
}
body .klaro .cm-btn.cm-btn-danger:hover,
body .klaro .cm-btn.cn-decline:hover,
body .klaro .cm-btn.cm-btn-decline:hover,
body .klaro .cm-btn.cm-btn-accept:hover{background:rgba(217,160,127,.12) !important;}

/* Einstellungs-Fenster */
body .klaro .cookie-modal .cm-bg{background:rgba(14,11,10,.75);}
body .klaro .cookie-modal .cm-modal.cm-klaro{
  background:#1B1512; border:1px solid rgba(217,160,127,.3);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9);
}
body .klaro .cookie-modal .cm-header h1{font-family:var(--font-display); font-weight:400; font-style:italic; font-size:30px; color:#F5ECE6;}
body .klaro .cookie-modal .cm-header,
body .klaro .cookie-modal .cm-footer{border-color:rgba(217,160,127,.18);}
body .klaro .cookie-modal .cm-list-title{font-family:var(--font-display); font-size:18px; font-weight:400;}
body .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider{background-color:#D9A07F;}
body .klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider{background-color:#9E5A42;}
body .klaro .cookie-modal .cm-list-label .slider{background-color:#3A2C25;}
body .klaro .cookie-modal .cm-powered-by a{color:#B8A69A;}

/* =====================================================
   Rechtsseiten (imprint.html, privacy.html) — zweisprachig DE | EN
   ===================================================== */
.legal-back{padding:11px 20px; font-size:11.5px;}
.legal-section{padding:170px 0 110px;}
.legal-container .eyebrow{margin-bottom:18px;}
.legal-container h1{font-size:clamp(40px,6vw,72px); color:var(--white); margin-bottom:56px;}
.legal-container h1 em{font-size:.7em;}
.legal-cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(30px,6vw,90px);}
.legal-col{padding-top:24px; border-top:1px solid rgba(217,160,127,.3);}
.legal-lang{font-size:12px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--rg); margin-bottom:14px;}
.legal-intro{font-family:var(--font-display); font-style:italic; font-size:19px; line-height:1.5; color:var(--off-white); margin-bottom:34px;}
.legal-list{margin:0;}
.legal-list dt{font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--rg-light); margin-top:24px;}
.legal-list dt:first-child{margin-top:0;}
.legal-list dd{margin:6px 0 0; color:var(--off-white); font-size:16.5px; line-height:1.6;}
.legal-list a, .legal-text a{color:var(--rg-light); border-bottom:1px solid rgba(217,160,127,.4);}
.legal-text h2{font-size:clamp(24px,2.6vw,30px); color:var(--white); margin:40px 0 14px;}
.legal-text p{color:var(--muted); margin-bottom:14px;}
/* Markiert Platzhalter, die vor dem Launch ausgefüllt werden müssen */
.legal-flag{display:inline-block; padding:1px 8px; border:1px dashed var(--rg); border-radius:6px; background:rgba(217,160,127,.1); color:var(--rg-light); font-style:italic;}

.site-footer--slim{padding-top:0;}
.site-footer--slim .footer-bottom{border-top:none;}
.site-footer--slim .footer-bottom a{color:var(--muted); transition:color .2s ease;}
.site-footer--slim .footer-bottom a:hover{color:var(--rg-light);}

@media (max-width:800px){
  .legal-section{padding-top:130px;}
  .legal-cols{grid-template-columns:1fr; gap:50px;}
}

/* Datenschutz: Fließtext-Layout, Sprachsprung oben */
.legal-container--text{max-width:820px;}
.legal-langnav{display:flex; align-items:center; gap:14px; margin:-24px 0 56px; font-family:var(--font-display); font-style:italic; font-size:22px;}
.legal-langnav a{color:var(--rg-light); border-bottom:1px solid rgba(217,160,127,.4);}
.legal-langnav span{color:var(--rg-deep); font-size:.5em; font-style:normal;}
.legal-text{padding-top:26px; border-top:1px solid rgba(217,160,127,.3); scroll-margin-top:100px;}
.legal-text + .legal-text{margin-top:90px;}
.legal-text p, .legal-text li{color:var(--muted); font-size:16.5px; line-height:1.75;}
.legal-text ul{padding-left:20px; margin:0 0 14px;}
.legal-text li{margin-bottom:6px;}
.legal-text li::marker{color:var(--rg);}
.legal-text code{font-size:.9em; color:var(--rg-light); background:rgba(217,160,127,.1); padding:1px 6px; border-radius:4px;}
.legal-date{margin-top:36px; font-style:italic; font-family:var(--font-display);}