/* =========================================================
   FAMILY & FRIENDS – MODERN V1
   Reines visuelles Theme. Bestehende Funktionen bleiben erhalten.
   ========================================================= */

body[data-page-key]{
  --modern-accent:#e8dcc0;
  --modern-accent-soft:rgba(232,220,192,.15);
  --modern-panel:rgba(12,14,18,.72);
  --modern-panel-strong:rgba(9,11,14,.88);
  --modern-border:rgba(255,255,255,.12);
  --modern-border-hover:rgba(232,220,192,.34);
  --modern-shadow:0 26px 80px rgba(0,0,0,.34);
  --modern-shadow-soft:0 16px 48px rgba(0,0,0,.24);
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at 50% -8%,rgba(232,220,192,.055),transparent 34%),
    #06070a;
}

/* --- HERO -------------------------------------------------- */
body[data-page-key] .hero{
  background:#050609;
  border-bottom:0;
}
body[data-page-key] .hero::before{
  filter:brightness(.72) saturate(.88) contrast(1.04);
}
body[data-page-key] .hero::after{
  background:
    radial-gradient(circle at 50% 8%,rgba(255,255,255,.10),transparent 24%),
    radial-gradient(circle at 50% 58%,rgba(232,220,192,.05),transparent 36%),
    linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.06) 48%,rgba(0,0,0,.44)),
    linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.12) 36%,rgba(2,3,5,.38) 61%,rgba(5,7,10,.96) 100%);
}

/* Social Icons als moderne Glas-Buttons */
body[data-page-key] .socials{
  gap:12px;
}
body[data-page-key] .socials a{
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(8,10,13,.26);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease;
}
body[data-page-key] .socials a:hover{
  transform:translateY(-3px);
  opacity:1;
  background:rgba(232,220,192,.13);
  border-color:rgba(232,220,192,.50);
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
body[data-page-key] .socials svg{
  width:20px;
  height:20px;
}

/* Logo */
body[data-page-key] .brand{
  font-weight:500;
  letter-spacing:.11em;
  text-shadow:
    0 3px 18px rgba(0,0,0,.48),
    0 0 38px rgba(255,255,255,.08);
}
body[data-page-key] .brand .clef{
  color:var(--modern-accent);
  filter:drop-shadow(0 0 18px rgba(232,220,192,.18));
}

/* Desktop-Navigation als schwebende Glasleiste */
@media(min-width:981px){
  body[data-page-key] .main-nav{
    width:max-content;
    max-width:calc(100% - 34px);
    gap:4px!important;
    padding:7px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:999px;
    background:rgba(7,9,12,.46);
    box-shadow:0 16px 50px rgba(0,0,0,.24);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  body[data-page-key] .main-nav a{
    padding:10px 11px;
    border-radius:999px;
    text-shadow:none;
    opacity:.82;
    transition:background .2s ease,color .2s ease,opacity .2s ease,transform .2s ease;
  }
  body[data-page-key] .main-nav a:hover{
    opacity:1;
    background:rgba(255,255,255,.08);
    transform:translateY(-1px);
  }
  body[data-page-key] .main-nav a.active{
    opacity:1;
    color:#111318;
    background:var(--modern-accent);
    box-shadow:0 5px 18px rgba(0,0,0,.18);
  }
}

/* --- INHALT ------------------------------------------------ */
body[data-page-key] main.content{
  background:
    radial-gradient(circle at 50% 2%,rgba(232,220,192,.045),transparent 32%),
    linear-gradient(180deg,rgba(5,7,10,0) 0%,rgba(6,8,11,.75) 24%,#07090c 56%,#06070a 100%);
}
body[data-page-key] .content-inner{
  position:relative;
}
body[data-page-key] .page-heading,
body[data-page-key] .content-title{
  color:#fff;
  text-wrap:balance;
}
body[data-page-key] .page-heading{
  font-weight:500;
  letter-spacing:.015em;
  text-shadow:none;
}
body[data-page-key] .rule{
  width:min(760px,88%);
  height:1px;
  margin-top:16px;
  margin-bottom:30px;
  background:linear-gradient(90deg,transparent,rgba(232,220,192,.64),transparent);
}

/* Home als elegante Glasfläche */
body[data-page-key="index"] .content.home-content .content-inner{
  max-width:1120px;
  padding:clamp(28px,4vw,52px);
  border:1px solid rgba(255,255,255,.11);
  border-radius:34px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.018)),
    rgba(7,9,12,.55);
  box-shadow:var(--modern-shadow);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
body[data-page-key="index"] .content-title{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  letter-spacing:.03em;
  line-height:1.16;
}
body[data-page-key="index"] .intro-copy{
  max-width:960px;
  color:rgba(255,255,255,.86);
  font-style:normal;
  font-weight:400;
  line-height:1.82;
  text-shadow:none;
}
body[data-page-key="index"] .intro-copy p{
  margin-bottom:1.45em;
}

/* Allgemeine Cards */
body[data-page-key] .panel,
body[data-page-key] .about-card,
body[data-page-key] .reference-item,
body[data-page-key] .contact-address,
body[data-page-key] .legal,
body[data-page-key] .contact-grid > *,
body[data-page-key] .track-list,
body[data-page-key] .video-card,
body[data-page-key] .demo-player-card{
  border:1px solid var(--modern-border);
  background:
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
    var(--modern-panel);
  box-shadow:var(--modern-shadow-soft);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
body[data-page-key] .panel,
body[data-page-key] .about-card,
body[data-page-key] .contact-address,
body[data-page-key] .legal,
body[data-page-key] .contact-grid > *{
  border-radius:28px;
}
body[data-page-key] .panel:hover,
body[data-page-key] .reference-item:hover,
body[data-page-key] .video-card:hover{
  border-color:var(--modern-border-hover);
}

/* Demos */
body[data-page-key="demos"] .demos-heading,
body[data-page-key="video"] .video-heading{
  margin-bottom:34px;
}
body[data-page-key="demos"] .demos-heading .page-heading,
body[data-page-key="video"] .video-heading .page-heading{
  font-size:clamp(36px,4vw,58px);
  font-weight:500;
}
body[data-page-key] .demo-player-card{
  border-radius:30px;
  padding:26px 28px;
}
body[data-page-key] .demo-main-play,
body[data-page-key] .play{
  border-color:rgba(232,220,192,.55);
  background:rgba(232,220,192,.09);
}
body[data-page-key] .demo-main-play:hover,
body[data-page-key] .play:hover{
  background:var(--modern-accent);
  color:#111318;
}
body[data-page-key] .demo-list,
body[data-page-key] .track-list{
  overflow:hidden;
  border-radius:26px;
}
body[data-page-key] .demo-row,
body[data-page-key] .track{
  transition:background .2s ease;
}
body[data-page-key] .demo-row:hover,
body[data-page-key] .track:hover{
  background:rgba(232,220,192,.055);
}

/* Videos */
body[data-page-key] .video-grid{
  gap:24px;
}
body[data-page-key] .video-card{
  border-radius:28px;
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}
body[data-page-key] .video-card:hover{
  transform:translateY(-5px);
  box-shadow:0 30px 75px rgba(0,0,0,.32);
}
body[data-page-key] .video-frame,
body[data-page-key] .video-preview-link{
  border-radius:27px 27px 0 0;
  overflow:hidden;
}
body[data-page-key] .video-preview-play{
  background:var(--modern-accent);
  color:#111318;
  box-shadow:0 18px 44px rgba(0,0,0,.34);
}

/* Referenzen */
body[data-page-key] .references-grid{
  gap:22px;
}
body[data-page-key] .reference-item{
  overflow:hidden;
  border-radius:26px;
  transition:transform .24s ease,border-color .24s ease;
}
body[data-page-key] .reference-item:hover{
  transform:translateY(-5px);
}
body[data-page-key] .reference-logo-link{
  background:rgba(255,255,255,.96);
}

/* Fotos */
body[data-page-key] .photo-grid{
  gap:20px;
}
body[data-page-key] .photo-grid img{
  border-radius:24px;
  border:1px solid var(--modern-border);
  box-shadow:var(--modern-shadow-soft);
  transition:transform .28s ease,filter .28s ease,box-shadow .28s ease;
}
body[data-page-key] .photo-grid img:hover{
  transform:translateY(-6px) scale(1.012);
  filter:brightness(1.04);
  box-shadow:0 26px 60px rgba(0,0,0,.30);
}

/* Kontakt */
body[data-page-key="kontakt"] .contact-grid{
  max-width:1040px;
  gap:24px;
}
body[data-page-key] .contact-form input,
body[data-page-key] .contact-form textarea{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(3,5,7,.48);
  border-radius:15px;
  box-shadow:none;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
body[data-page-key] .contact-form input:focus,
body[data-page-key] .contact-form textarea:focus{
  outline:none;
  border-color:rgba(232,220,192,.58);
  background:rgba(3,5,7,.68);
  box-shadow:0 0 0 4px rgba(232,220,192,.07);
}
body[data-page-key] .contact-form button,
body[data-page-key] .btn{
  border-radius:999px;
}

/* Über uns – bestehende Struktur modern rahmen */
body[data-page-key="ueber-uns"] .about-legacy-title{
  font-weight:500;
  letter-spacing:.02em;
}
body[data-page-key="ueber-uns"] .about-legacy-intro,
body[data-page-key="ueber-uns"] .about-legacy-profile{
  border:1px solid var(--modern-border);
  border-radius:30px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),
    rgba(8,10,13,.60);
  box-shadow:var(--modern-shadow-soft);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
body[data-page-key="ueber-uns"] .about-legacy-intro{
  padding:30px 34px;
}
body[data-page-key="ueber-uns"] .about-legacy-profile{
  padding:26px;
}
body[data-page-key="ueber-uns"] .about-legacy-photo{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 20px 48px rgba(0,0,0,.30);
}
body[data-page-key="ueber-uns"] .about-legacy-copy{
  color:rgba(255,255,255,.84);
  font-style:normal;
  font-weight:400;
  line-height:1.75;
}

/* SING A SONG */
body[data-page-key="sing-a-song"] .sing-legacy-content{
  max-width:1180px;
  margin:auto;
  padding:clamp(28px,4vw,48px);
  border:1px solid var(--modern-border);
  border-radius:34px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
    rgba(8,10,13,.62);
  box-shadow:var(--modern-shadow);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
body[data-page-key="sing-a-song"] .sing-legacy-title{
  font-weight:500;
}
body[data-page-key="sing-a-song"] .sing-legacy-copy,
body[data-page-key="sing-a-song"] .sing-legacy-highlight{
  color:rgba(255,255,255,.86);
  font-style:normal;
  font-weight:400;
  line-height:1.78;
}
body[data-page-key="sing-a-song"] .sing-legacy-highlight{
  color:var(--modern-accent);
}

/* Firebase Embeds */
body[data-page-key] .embed-frame{
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  box-shadow:var(--modern-shadow);
  overflow:hidden;
}
body[data-page-key] .embed-note{
  border-color:rgba(232,220,192,.18);
  background:rgba(232,220,192,.06);
}

/* Footer */
body[data-page-key] .footer{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px max(24px,calc((100vw - 1180px)/2));
  border-top:1px solid rgba(255,255,255,.09);
  background:rgba(5,7,9,.92);
  box-shadow:none;
}
body[data-page-key] .footer > div:first-child{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
body[data-page-key] .footer a{
  padding:7px 11px;
  border-radius:999px;
  color:rgba(255,255,255,.70);
  transition:background .2s ease,color .2s ease;
}
body[data-page-key] .footer a:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
}
body[data-page-key] .footer-credit{
  color:rgba(255,255,255,.48);
}

/* --- MOBILE ------------------------------------------------ */
@media(max-width:980px){
  body[data-page-key] .mobile-menu-btn{
    width:48px;
    height:48px;
    border-radius:50%;
    border-color:rgba(255,255,255,.20);
    background:rgba(7,9,12,.48);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }

  body[data-page-key] .mobile-nav,
  body.menu-open[data-page-key] .mobile-nav{
    background:
      linear-gradient(180deg,rgba(18,21,27,.98),rgba(8,10,13,.99))!important;
    border-right:1px solid rgba(255,255,255,.10)!important;
    box-shadow:18px 0 60px rgba(0,0,0,.45)!important;
  }
  body.menu-open[data-page-key] .mobile-nav::after{
    background:#0a0c10!important;
    border-top-color:rgba(255,255,255,.09)!important;
  }
  body[data-page-key] .mobile-nav a{
    min-height:46px!important;
    margin:2px 12px!important;
    padding:0 17px!important;
    border-radius:12px!important;
    color:rgba(255,255,255,.82);
    transition:background .18s ease,color .18s ease;
  }
  body[data-page-key] .mobile-nav a.active,
  body[data-page-key] .mobile-nav a:hover{
    color:#111318;
    background:var(--modern-accent)!important;
  }

  body[data-page-key="index"] .content.home-content .content-inner{
    padding:28px 22px;
    border-radius:26px;
  }

  body[data-page-key] .footer{
    flex-direction:column;
    align-items:flex-start;
    padding:24px 18px;
  }
}

@media(max-width:640px){
  body[data-page-key] .socials{
    gap:9px;
  }
  body[data-page-key] .socials a{
    width:38px;
    height:38px;
  }
  body[data-page-key] .socials svg{
    width:18px;
    height:18px;
  }

  body[data-page-key="index"] .content.home-content .content-inner,
  body[data-page-key="sing-a-song"] .sing-legacy-content{
    border-radius:22px;
  }

  body[data-page-key] .panel,
  body[data-page-key] .about-card,
  body[data-page-key] .contact-address,
  body[data-page-key] .legal,
  body[data-page-key] .contact-grid > *{
    border-radius:22px;
  }

  body[data-page-key] .page-heading{
    line-height:1.12;
  }

  body[data-page-key] .footer > div:first-child{
    gap:4px;
  }
  body[data-page-key] .footer a{
    padding:6px 8px;
  }
}

/* Bewegungen reduzieren, wenn das Betriebssystem dies wünscht */
@media(prefers-reduced-motion:reduce){
  body[data-page-key] *,
  body[data-page-key] *::before,
  body[data-page-key] *::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}


/* =========================================================
   MODERN V2 – leichte Navigation über dem Hintergrundbild
   ========================================================= */
@media(min-width:981px){
  body[data-page-key] .main-nav{
    width:auto!important;
    max-width:calc(100% - 36px)!important;
    gap:2px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    overflow:visible!important;
  }

  body[data-page-key] .main-nav a{
    position:relative;
    padding:9px 10px 11px!important;
    border-radius:10px!important;
    background:transparent!important;
    color:rgba(255,255,255,.84)!important;
    text-shadow:
      0 2px 8px rgba(0,0,0,.78),
      0 0 18px rgba(0,0,0,.36)!important;
    opacity:1!important;
    transition:
      color .2s ease,
      background .2s ease,
      transform .2s ease!important;
  }

  body[data-page-key] .main-nav a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:3px;
    width:0;
    height:1.5px;
    border-radius:999px;
    background:var(--modern-accent);
    transform:translateX(-50%);
    transition:width .22s ease;
    box-shadow:0 0 10px rgba(232,220,192,.20);
  }

  body[data-page-key] .main-nav a:hover{
    color:#fff!important;
    background:rgba(8,10,13,.18)!important;
    transform:translateY(-1px)!important;
  }

  body[data-page-key] .main-nav a:hover::after{
    width:42%;
  }

  body[data-page-key] .main-nav a.active{
    color:var(--modern-accent)!important;
    background:rgba(8,10,13,.10)!important;
    box-shadow:none!important;
  }

  body[data-page-key] .main-nav a.active::after{
    width:58%;
  }
}

/* Sehr breite Navigation etwas kompakter halten */
@media(min-width:981px) and (max-width:1320px){
  body[data-page-key] .main-nav a{
    padding-left:8px!important;
    padding-right:8px!important;
    font-size:calc(var(--nav-font-size,13px) * .94)!important;
  }
}


/* =========================================================
   MODERN V4 – CINEMATIC
   Neue Richtung: bildstark, editorial, minimal, ohne schwere Nav-Fläche.
   ========================================================= */

body[data-page-key]{
  --cinematic-gold:#eadfc5;
  --cinematic-gold-soft:rgba(234,223,197,.18);
  --cinematic-line:rgba(255,255,255,.13);
  --cinematic-text:rgba(255,255,255,.82);
  --cinematic-muted:rgba(255,255,255,.58);
  background:#050609;
}

/* Hero: Foto bleibt Hauptdarsteller */
body[data-page-key] .hero::before{
  filter:brightness(.82) saturate(.92) contrast(1.02)!important;
}
body[data-page-key] .hero::after{
  background:
    linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.06) 34%,rgba(0,0,0,.18) 58%,rgba(4,5,7,.72) 83%,#050609 100%),
    linear-gradient(90deg,rgba(0,0,0,.22),transparent 27%,transparent 73%,rgba(0,0,0,.20))!important;
}

/* Logo – feiner und zeitgemäßer */
body[data-page-key] .brand{
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
  letter-spacing:.085em!important;
  text-shadow:0 3px 24px rgba(0,0,0,.50)!important;
}
body[data-page-key] .brand .clef{
  color:var(--cinematic-gold)!important;
  opacity:.95;
}

/* Social: nur Linien, fast unsichtbar */
body[data-page-key] .socials a{
  width:37px!important;
  height:37px!important;
  border:1px solid rgba(255,255,255,.15)!important;
  background:rgba(0,0,0,.08)!important;
  box-shadow:none!important;
  backdrop-filter:blur(4px)!important;
  -webkit-backdrop-filter:blur(4px)!important;
}
body[data-page-key] .socials a:hover{
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(234,223,197,.45)!important;
  transform:translateY(-2px)!important;
}

/* Navigation: neue "Editorial Tabs"-Optik ohne Balken */
@media(min-width:981px){
  body[data-page-key] .main-nav{
    gap:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  body[data-page-key] .main-nav a{
    position:relative;
    margin:0 1px!important;
    padding:9px 9px 12px!important;
    border-radius:0!important;
    color:rgba(255,255,255,.76)!important;
    background:transparent!important;
    font-weight:600!important;
    letter-spacing:.065em!important;
    text-shadow:0 2px 12px rgba(0,0,0,.72)!important;
    opacity:1!important;
    transition:color .18s ease,transform .18s ease!important;
  }

  body[data-page-key] .main-nav a::before{
    content:"";
    position:absolute;
    left:50%;
    top:1px;
    width:3px;
    height:3px;
    border-radius:50%;
    background:transparent;
    transform:translateX(-50%);
    transition:background .18s ease,box-shadow .18s ease!important;
  }

  body[data-page-key] .main-nav a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:4px;
    width:0!important;
    height:1px!important;
    border-radius:999px;
    background:var(--cinematic-gold)!important;
    transform:translateX(-50%);
    transition:width .2s ease!important;
  }

  body[data-page-key] .main-nav a:hover{
    color:#fff!important;
    background:transparent!important;
    transform:translateY(-1px)!important;
  }

  body[data-page-key] .main-nav a:hover::after{
    width:36%!important;
  }

  body[data-page-key] .main-nav a.active{
    color:var(--cinematic-gold)!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  body[data-page-key] .main-nav a.active::before{
    background:var(--cinematic-gold)!important;
    box-shadow:0 0 10px rgba(234,223,197,.45)!important;
  }

  body[data-page-key] .main-nav a.active::after{
    width:52%!important;
  }
}

/* Inhalt: keine dunklen "Boxenlandschaften", sondern Editorial-Flächen */
body[data-page-key] main.content{
  background:
    radial-gradient(circle at 50% 0%,rgba(234,223,197,.035),transparent 32%),
    linear-gradient(180deg,#050609 0%,#07090c 44%,#050609 100%)!important;
}
body[data-page-key] .content-inner{
  max-width:1180px;
}

/* Überschriften – groß, elegant, aber nicht übertrieben */
body[data-page-key] .page-heading,
body[data-page-key] .content-title{
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
  letter-spacing:.012em!important;
  line-height:1.08!important;
  text-wrap:balance;
}
body[data-page-key] .page-heading{
  font-size:clamp(38px,4.2vw,62px)!important;
}
body[data-page-key] .rule{
  width:72px!important;
  height:1px!important;
  margin:17px auto 34px!important;
  background:linear-gradient(90deg,transparent,var(--cinematic-gold),transparent)!important;
  opacity:.85;
}

/* HOME: völlig neue Split-Komposition */
@media(min-width:900px){
  body[data-page-key="index"] .content.home-content .content-inner{
    max-width:1180px!important;
    display:grid!important;
    grid-template-columns:minmax(280px,.82fr) minmax(0,1.35fr)!important;
    column-gap:clamp(54px,7vw,110px)!important;
    align-items:start!important;
    padding:clamp(58px,7vw,100px) 28px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    text-align:left!important;
  }

  body[data-page-key="index"] .content-title{
    position:sticky;
    top:42px;
    margin:0!important;
    font-size:clamp(42px,4.1vw,64px)!important;
    line-height:1.03!important;
  }

  body[data-page-key="index"] .rule{
    display:none!important;
  }

  body[data-page-key="index"] .intro-copy{
    position:relative;
    max-width:none!important;
    margin:0!important;
    padding-left:42px;
    border-left:none;
    color:var(--cinematic-text)!important;
    font-style:normal!important;
    text-align:left!important;
    line-height:1.88!important;
  }

  body[data-page-key="index"] .intro-copy::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:2px;
    border-radius:999px;
    background:linear-gradient(180deg,rgba(244,236,214,.98) 0%,rgba(231,213,166,.7) 20%,rgba(234,223,197,.26) 58%,rgba(234,223,197,.08) 100%);
    box-shadow:0 0 18px rgba(228,208,158,.16);
  }
}
body[data-page-key="index"] .intro-copy p{
  margin:0 0 1.7em!important;
}
body[data-page-key="index"] .intro-copy p:last-child{
  margin-bottom:0!important;
}

/* Andere Seiten: Module als horizontale/editoriale Sektionen */
body[data-page-key] .panel,
body[data-page-key] .about-card,
body[data-page-key] .contact-address,
body[data-page-key] .legal,
body[data-page-key] .contact-grid > *,
body[data-page-key] .track-list,
body[data-page-key] .demo-player-card,
body[data-page-key] .video-card{
  background:rgba(255,255,255,.018)!important;
  border:1px solid rgba(255,255,255,.085)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Demos: Player + Liste ruhiger */
body[data-page-key="demos"] .demo-player-card{
  border-radius:18px!important;
  background:
    linear-gradient(135deg,rgba(234,223,197,.055),rgba(255,255,255,.015))!important;
}
body[data-page-key] .demo-list,
body[data-page-key] .track-list{
  border-radius:16px!important;
  overflow:hidden;
}
body[data-page-key] .demo-row,
body[data-page-key] .track{
  border-bottom-color:rgba(255,255,255,.055)!important;
}
body[data-page-key] .demo-row:hover,
body[data-page-key] .track:hover{
  background:rgba(234,223,197,.035)!important;
}

/* Videos: kinoartige Rahmen */
body[data-page-key] .video-grid{
  gap:30px!important;
}
body[data-page-key] .video-card{
  border-radius:15px!important;
  overflow:hidden;
  transition:transform .24s ease,border-color .24s ease!important;
}
body[data-page-key] .video-card:hover{
  transform:translateY(-5px)!important;
  border-color:rgba(234,223,197,.25)!important;
  box-shadow:none!important;
}
body[data-page-key] .video-frame,
body[data-page-key] .video-preview-link{
  border-radius:14px 14px 0 0!important;
}

/* Referenzen: fast wie Galerie */
body[data-page-key] .references-grid{
  gap:18px!important;
}
body[data-page-key] .reference-item{
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:none!important;
  transition:transform .22s ease,border-color .22s ease!important;
}
body[data-page-key] .reference-item:hover{
  transform:translateY(-4px)!important;
  border-color:rgba(234,223,197,.28)!important;
}

/* Fotos: rahmenlos / magazinartig */
body[data-page-key] .photo-grid{
  gap:12px!important;
}
body[data-page-key] .photo-grid img{
  border-radius:8px!important;
  border:0!important;
  box-shadow:none!important;
  filter:saturate(.94);
}
body[data-page-key] .photo-grid img:hover{
  transform:scale(1.018)!important;
  filter:saturate(1) brightness(1.04)!important;
  box-shadow:none!important;
}

/* Über uns: transparente Profilflächen */
body[data-page-key="ueber-uns"] .about-legacy-intro,
body[data-page-key="ueber-uns"] .about-legacy-profile{
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  background:rgba(255,255,255,.015)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body[data-page-key="ueber-uns"] .about-legacy-intro{
  padding:34px 38px!important;
}
body[data-page-key="ueber-uns"] .about-legacy-profile{
  padding:24px!important;
}
body[data-page-key="ueber-uns"] .about-legacy-photo{
  border-radius:10px!important;
  border:0!important;
  box-shadow:none!important;
}

/* Sing a Song */
body[data-page-key="sing-a-song"] .sing-legacy-content{
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  background:rgba(255,255,255,.015)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Kontaktfelder: ultraclean */
body[data-page-key] .contact-form input,
body[data-page-key] .contact-form textarea{
  border-radius:8px!important;
  border:1px solid rgba(255,255,255,.11)!important;
  background:rgba(255,255,255,.018)!important;
}
body[data-page-key] .contact-form input:focus,
body[data-page-key] .contact-form textarea:focus{
  border-color:rgba(234,223,197,.48)!important;
  box-shadow:0 0 0 3px rgba(234,223,197,.045)!important;
}

/* Iframes */
body[data-page-key] .embed-frame{
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  box-shadow:none!important;
}

/* Footer: nur eine feine Abschlusslinie */
body[data-page-key] .footer{
  min-height:78px;
  padding-top:22px!important;
  padding-bottom:22px!important;
  background:#050609!important;
  border-top:1px solid rgba(255,255,255,.055)!important;
  box-shadow:none!important;
}
body[data-page-key] .footer a{
  color:rgba(255,255,255,.52)!important;
  background:transparent!important;
}
body[data-page-key] .footer a:hover{
  color:var(--cinematic-gold)!important;
  background:transparent!important;
}

/* Mobile: neue dunkle Off-Canvas-Navigation */
@media(max-width:980px){
  body[data-page-key] .mobile-menu-btn{
    width:44px!important;
    height:44px!important;
    border-radius:50%!important;
    background:rgba(3,4,6,.22)!important;
    border:1px solid rgba(255,255,255,.16)!important;
    backdrop-filter:blur(8px)!important;
    -webkit-backdrop-filter:blur(8px)!important;
  }

  body[data-page-key] .mobile-nav,
  body.menu-open[data-page-key] .mobile-nav{
    background:#080a0d!important;
    border-right:1px solid rgba(255,255,255,.07)!important;
    box-shadow:22px 0 70px rgba(0,0,0,.52)!important;
  }

  body[data-page-key] .mobile-nav a{
    margin:2px 13px!important;
    padding:0 16px!important;
    min-height:46px!important;
    border-radius:7px!important;
    color:rgba(255,255,255,.76)!important;
    background:transparent!important;
  }

  body[data-page-key] .mobile-nav a:hover{
    color:#fff!important;
    background:rgba(255,255,255,.035)!important;
  }

  body[data-page-key] .mobile-nav a.active{
    color:var(--cinematic-gold)!important;
    background:rgba(234,223,197,.055)!important;
  }

  body[data-page-key="index"] .content.home-content .content-inner{
    padding:42px 22px!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  body[data-page-key="index"] .intro-copy{
    color:var(--cinematic-text)!important;
    font-style:normal!important;
    line-height:1.8!important;
  }
}

@media(max-width:640px){
  body[data-page-key] .page-heading{
    font-size:clamp(34px,10vw,47px)!important;
  }
  body[data-page-key="index"] .content-title{
    font-size:clamp(35px,10vw,49px)!important;
  }
}


/* =========================================================
   MODERN V5 – Demo-Konsistenz + Referenzen ohne weißen Rahmen
   ========================================================= */

/* REFERENZEN: keine große weiße Karte hinter den Logos */
body[data-page-key="referenzen"] .references-grid{
  max-width:940px!important;
  gap:28px!important;
}
body[data-page-key="referenzen"] .reference-logo-link{
  width:auto!important;
  max-width:100%!important;
  padding:0!important;
  margin:0 auto!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
body[data-page-key="referenzen"] .reference-logo-link:hover{
  transform:translateY(-4px)!important;
  filter:brightness(1.025)!important;
}
body[data-page-key="referenzen"] .reference-logo{
  display:block!important;
  width:auto!important;
  max-width:100%!important;
  max-height:260px!important;
  margin:0 auto!important;
  padding:0!important;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  box-shadow:0 14px 34px rgba(0,0,0,.24)!important;
}
body[data-page-key="referenzen"] .reference-name{
  margin-top:10px!important;
  color:rgba(255,255,255,.62)!important;
  font-size:13px!important;
  letter-spacing:.025em!important;
}

/* DEMOS: gleiche visuelle Sprache wie der Rest der V4-Seite */
body[data-page-key="demos"] .demos-content{
  background:
    radial-gradient(circle at 50% 0%,rgba(234,223,197,.035),transparent 32%),
    linear-gradient(180deg,#050609 0%,#07090c 44%,#050609 100%)!important;
}
body[data-page-key="demos"] .demos-inner{
  max-width:1040px!important;
}
body[data-page-key="demos"] .demos-heading{
  margin-bottom:34px!important;
  padding-bottom:22px!important;
  border-bottom:1px solid rgba(255,255,255,.065)!important;
}
body[data-page-key="demos"] .demos-heading .page-heading{
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(38px,4.2vw,62px)!important;
  font-weight:400!important;
  letter-spacing:.012em!important;
}
body[data-page-key="demos"] .demos-heading p{
  color:rgba(255,255,255,.62)!important;
  line-height:1.7!important;
}

body[data-page-key="demos"] .demo-player-card{
  position:relative!important;
  overflow:hidden!important;
  margin-bottom:20px!important;
  padding:26px 28px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.014)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body[data-page-key="demos"] .demo-player-card::before{
  content:"";
  position:absolute;
  left:0;
  top:20px;
  bottom:20px;
  width:2px;
  border-radius:999px;
  background:linear-gradient(180deg,transparent,var(--cinematic-gold),transparent);
  opacity:.75;
}
body[data-page-key="demos"] .demo-main-play{
  width:62px!important;
  height:62px!important;
  border:1px solid rgba(234,223,197,.48)!important;
  background:rgba(234,223,197,.045)!important;
  color:var(--cinematic-gold)!important;
  box-shadow:none!important;
}
body[data-page-key="demos"] .demo-main-play:hover{
  transform:scale(1.035)!important;
  background:rgba(234,223,197,.095)!important;
  color:#fff!important;
}
body[data-page-key="demos"] .demo-now-playing span{
  color:rgba(234,223,197,.56)!important;
}
body[data-page-key="demos"] .demo-now-playing strong{
  font-weight:400!important;
  letter-spacing:.01em!important;
}
body[data-page-key="demos"] .demo-now-playing small{
  color:rgba(255,255,255,.50)!important;
}
body[data-page-key="demos"] .demo-progress{
  height:3px!important;
  background:rgba(255,255,255,.10)!important;
}
body[data-page-key="demos"] .demo-progress span{
  background:var(--cinematic-gold)!important;
}

body[data-page-key="demos"] .demo-list{
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.010)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body[data-page-key="demos"] .demo-row{
  position:relative!important;
  min-height:64px!important;
  border-bottom:1px solid rgba(255,255,255,.05)!important;
  background:transparent!important;
  transition:background .18s ease,color .18s ease!important;
}
body[data-page-key="demos"] .demo-row:hover{
  background:rgba(255,255,255,.018)!important;
}
body[data-page-key="demos"] .demo-row.active{
  background:rgba(234,223,197,.018)!important;
  box-shadow:inset 2px 0 0 rgba(234,223,197,.72)!important;
}
body[data-page-key="demos"] .demo-number{
  color:rgba(255,255,255,.32)!important;
  font-weight:600!important;
}
body[data-page-key="demos"] .demo-play{
  border-color:rgba(255,255,255,.18)!important;
  background:transparent!important;
  color:rgba(255,255,255,.72)!important;
  transition:border-color .18s ease,color .18s ease,background .18s ease!important;
}
body[data-page-key="demos"] .demo-row:hover .demo-play{
  border-color:rgba(234,223,197,.34)!important;
  color:var(--cinematic-gold)!important;
}
body[data-page-key="demos"] .demo-row.active .demo-play{
  border-color:rgba(234,223,197,.52)!important;
  background:rgba(234,223,197,.055)!important;
  color:var(--cinematic-gold)!important;
}
body[data-page-key="demos"] .demo-info strong{
  font-weight:500!important;
  color:rgba(255,255,255,.88)!important;
}
body[data-page-key="demos"] .demo-info small,
body[data-page-key="demos"] .demo-duration,
body[data-page-key="demos"] .demo-time{
  color:rgba(255,255,255,.45)!important;
}
body[data-page-key="demos"] .demo-storage-note{
  color:rgba(255,255,255,.38)!important;
}

@media(max-width:760px){
  body[data-page-key="referenzen"] .references-grid{gap:22px!important;}
  body[data-page-key="referenzen"] .reference-logo{max-height:210px!important;}
  body[data-page-key="demos"] .demos-heading{
    padding-bottom:18px!important;
  }
  body[data-page-key="demos"] .demo-player-card{
    padding:20px 18px!important;
  }
}


/* =========================================================
   MODERN V6 – LIVE
   Feinschliff auf V5: Bewegung, Tiefe und kleine Premium-Details.
   ========================================================= */

/* Hero-Parallax: JS setzt nur eine minimale Verschiebung */
@media(min-width:981px){
  body[data-page-key] .hero::before{
    transform:translate3d(0,var(--ff-parallax-y,0px),0) scale(1.035)!important;
    will-change:transform;
  }
}

/* Scroll-Reveal – absichtlich dezent */
body[data-page-key] .ff-scroll-reveal{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:
    opacity .72s cubic-bezier(.2,.7,.2,1) var(--ff-reveal-delay,0ms),
    transform .72s cubic-bezier(.2,.7,.2,1) var(--ff-reveal-delay,0ms);
}
body[data-page-key] .ff-scroll-reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* Überschriften etwas ruhiger als Karten */
body[data-page-key] .page-heading.ff-scroll-reveal,
body[data-page-key] .content-title.ff-scroll-reveal{
  transform:translate3d(0,10px,0);
}
body[data-page-key] .page-heading.ff-scroll-reveal.is-visible,
body[data-page-key] .content-title.ff-scroll-reveal.is-visible{
  transform:none;
}

/* Dünne Fortschrittslinie am oberen Browserrand */
body[data-page-key] .ff-page-progress{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:2px;
  z-index:10050;
  pointer-events:none;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(234,223,197,.34),var(--cinematic-gold),rgba(234,223,197,.50));
  box-shadow:0 0 12px rgba(234,223,197,.18);
}

/* Navigation: noch etwas präziser, aber weiterhin frei über dem Foto */
@media(min-width:981px){
  body[data-page-key] .main-nav a{
    transition:
      color .18s ease,
      transform .18s ease,
      text-shadow .18s ease!important;
  }
  body[data-page-key] .main-nav a:hover{
    text-shadow:
      0 2px 12px rgba(0,0,0,.78),
      0 0 20px rgba(234,223,197,.12)!important;
  }
  body[data-page-key] .main-nav a.active::before{
    transform:translateX(-50%) scale(1.12)!important;
  }
}

/* HOME: Akzentlinie im Text bekommt eine subtile Lichtkante */
@media(min-width:900px){
  body[data-page-key="index"] .intro-copy{
    border-left-color:rgba(234,223,197,.22)!important;
  }
  body[data-page-key="index"] .intro-copy::before{
    box-shadow:0 0 22px rgba(234,223,197,.18);
  }
}

/* DEMOS: echter Now-Playing-Indikator */
body[data-page-key="demos"] .demo-now-playing{
  position:relative;
}
body[data-page-key="demos"] .ff-equalizer{
  display:inline-flex;
  align-items:flex-end;
  gap:2px;
  width:22px;
  height:15px;
  margin:0 9px -1px 0;
  opacity:.34;
}
body[data-page-key="demos"] .ff-equalizer i{
  display:block;
  width:3px;
  height:5px;
  border-radius:99px;
  background:var(--cinematic-gold);
  transform-origin:center bottom;
}
body[data-page-key="demos"] .demo-player-card.is-playing .ff-equalizer{
  opacity:.92;
}
body[data-page-key="demos"] .demo-player-card.is-playing .ff-equalizer i{
  animation:ffEq .72s ease-in-out infinite alternate;
}
body[data-page-key="demos"] .demo-player-card.is-playing .ff-equalizer i:nth-child(2){
  animation-duration:.48s;
  animation-delay:-.18s;
}
body[data-page-key="demos"] .demo-player-card.is-playing .ff-equalizer i:nth-child(3){
  animation-duration:.62s;
  animation-delay:-.32s;
}
body[data-page-key="demos"] .demo-player-card.is-playing .ff-equalizer i:nth-child(4){
  animation-duration:.54s;
  animation-delay:-.12s;
}
@keyframes ffEq{
  from{transform:scaleY(.55)}
  to{transform:scaleY(2.35)}
}

/* Fortschrittsbalken der Demo etwas hochwertiger */
body[data-page-key="demos"] .demo-progress{
  height:4px!important;
  background:rgba(255,255,255,.075)!important;
}
body[data-page-key="demos"] .demo-progress span{
  background:
    linear-gradient(90deg,rgba(234,223,197,.66),var(--cinematic-gold))!important;
  box-shadow:0 0 10px rgba(234,223,197,.20)!important;
}

/* Demo-Play-Kreise: sanftes Leuchten nur während Wiedergabe */
body[data-page-key="demos"] .demo-player-card.is-playing .demo-main-play{
  border-color:rgba(234,223,197,.68)!important;
  box-shadow:0 0 0 5px rgba(234,223,197,.035),0 0 24px rgba(234,223,197,.08)!important;
}

/* REFERENZEN: Bilder bleiben clean, reagieren aber hochwertiger */
body[data-page-key="referenzen"] .reference-logo{
  transition:
    transform .28s cubic-bezier(.2,.7,.2,1),
    filter .28s ease,
    box-shadow .28s ease!important;
  filter:saturate(.94) contrast(.99);
}
body[data-page-key="referenzen"] .reference-logo-link:hover .reference-logo{
  transform:translateY(-3px) scale(1.008);
  filter:saturate(1.03) contrast(1.01);
  box-shadow:0 20px 46px rgba(0,0,0,.30)!important;
}
body[data-page-key="referenzen"] .reference-logo-link:hover{
  transform:none!important;
}

/* FOTOS: etwas mehr Tiefe ohne neue Rahmen */
body[data-page-key] .photo-grid img{
  transition:
    transform .34s cubic-bezier(.2,.7,.2,1),
    filter .34s ease!important;
}
body[data-page-key] .photo-grid img:hover{
  transform:scale(1.022)!important;
  filter:saturate(1.04) brightness(1.035)!important;
}

/* VIDEO: Play-Kreis beim Hover minimal lebendig */
body[data-page-key] .video-preview-play{
  transition:transform .24s ease,box-shadow .24s ease!important;
}
body[data-page-key] .video-preview-link:hover .video-preview-play{
  transform:translate(-50%,-50%) scale(1.055)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.40)!important;
}

/* Karten/Module bekommen nur beim Hover eine sehr feine Lichtkante */
@media(hover:hover) and (pointer:fine){
  body[data-page-key] .demo-player-card,
  body[data-page-key] .video-card,
  body[data-page-key] .about-legacy-intro,
  body[data-page-key] .about-legacy-profile,
  body[data-page-key] .sing-legacy-content,
  body[data-page-key] .contact-grid > *{
    transition:border-color .24s ease,background .24s ease,transform .24s ease!important;
  }
  body[data-page-key] .demo-player-card:hover,
  body[data-page-key] .video-card:hover,
  body[data-page-key] .about-legacy-intro:hover,
  body[data-page-key] .about-legacy-profile:hover,
  body[data-page-key] .sing-legacy-content:hover,
  body[data-page-key] .contact-grid > *:hover{
    border-color:rgba(234,223,197,.16)!important;
  }
}

/* Mobile: keine Parallax-Bewegung, Reveal kürzer */
@media(max-width:980px){
  body[data-page-key] .hero::before{
    transform:scale(1.02)!important;
  }
  body[data-page-key] .ff-scroll-reveal{
    transform:translate3d(0,10px,0);
    transition-duration:.56s;
  }
  body[data-page-key] .ff-page-progress{
    height:1px;
  }
}

/* Barrierefreiheit / Energiesparen */
@media(prefers-reduced-motion:reduce){
  body[data-page-key] .ff-scroll-reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
  body[data-page-key] .demo-player-card.is-playing .ff-equalizer i{
    animation:none!important;
  }
  body[data-page-key] .hero::before{
    transform:scale(1.02)!important;
  }
}


/* =========================================================
   MODERN V7 – RECHTLICHE SEITEN
   Impressum und Datenschutz im gleichen aktuellen Layout.
   ========================================================= */

body[data-page-key="impressum"] .legal-page,
body[data-page-key="datenschutz"] .legal-page{
  padding-left:22px!important;
  padding-right:22px!important;
}

body[data-page-key="impressum"] .legal,
body[data-page-key="datenschutz"] .legal{
  width:min(100%,980px)!important;
  max-width:980px!important;
  margin:0 auto!important;
  padding:clamp(34px,5vw,62px)!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.015)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  color:rgba(255,255,255,.79)!important;
  line-height:1.78!important;
}

body[data-page-key="impressum"] .legal h2,
body[data-page-key="datenschutz"] .legal h2{
  margin:0 0 32px!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(38px,4.2vw,60px)!important;
  line-height:1.08!important;
  font-weight:400!important;
  letter-spacing:.012em!important;
  color:#fff!important;
}

body[data-page-key="impressum"] .legal h2::after,
body[data-page-key="datenschutz"] .legal h2::after{
  content:"";
  display:block;
  width:72px;
  height:1px;
  margin-top:18px;
  background:linear-gradient(90deg,var(--cinematic-gold),transparent);
  opacity:.82;
}

body[data-page-key="datenschutz"] .legal h3{
  margin:38px 0 12px!important;
  padding-top:4px;
  font-size:17px!important;
  line-height:1.35!important;
  font-weight:600!important;
  letter-spacing:.025em!important;
  color:var(--cinematic-gold)!important;
}

body[data-page-key="datenschutz"] .legal h3:not(:first-of-type){
  border-top:1px solid rgba(255,255,255,.055);
  padding-top:30px;
}

body[data-page-key="impressum"] .legal p,
body[data-page-key="datenschutz"] .legal p{
  margin:0 0 18px!important;
  color:rgba(255,255,255,.76)!important;
}

body[data-page-key="impressum"] .legal strong,
body[data-page-key="datenschutz"] .legal strong{
  color:rgba(255,255,255,.94)!important;
}

body[data-page-key="impressum"] .legal a,
body[data-page-key="datenschutz"] .legal a{
  color:var(--cinematic-gold)!important;
  text-decoration:none!important;
  border-bottom:1px solid rgba(234,223,197,.26);
  transition:border-color .18s ease,color .18s ease;
}

body[data-page-key="impressum"] .legal a:hover,
body[data-page-key="datenschutz"] .legal a:hover{
  color:#fff!important;
  border-bottom-color:rgba(255,255,255,.60);
}

@media(max-width:640px){
  body[data-page-key="impressum"] .legal-page,
  body[data-page-key="datenschutz"] .legal-page{
    padding-left:14px!important;
    padding-right:14px!important;
  }

  body[data-page-key="impressum"] .legal,
  body[data-page-key="datenschutz"] .legal{
    padding:28px 21px!important;
    border-radius:12px!important;
  }

  body[data-page-key="impressum"] .legal h2,
  body[data-page-key="datenschutz"] .legal h2{
    font-size:clamp(34px,10vw,46px)!important;
    margin-bottom:28px!important;
  }

  body[data-page-key="datenschutz"] .legal h3{
    margin-top:30px!important;
  }
}


/* =========================================================
   MODERN V8 – SMART NAV + CTA + MAGAZIN-FOTOS
   ========================================================= */

/* ---------------------------------------------------------
   SMART NAVIGATION
   Im Hero unverändert. Erst darunter schwebt sie oben.
   --------------------------------------------------------- */
@media(min-width:981px){
  body[data-page-key].ff-nav-floating .main-nav{
    position:fixed!important;
    left:50%!important;
    top:13px!important;
    bottom:auto!important;
    width:max-content!important;
    max-width:calc(100vw - 34px)!important;
    padding:5px 8px!important;
    gap:0!important;
    transform:translateX(-50%)!important;
    z-index:10020!important;
    opacity:1!important;
    animation:none!important;

    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:999px!important;
    background:rgba(6,8,11,.72)!important;
    box-shadow:
      0 12px 38px rgba(0,0,0,.27),
      inset 0 1px 0 rgba(255,255,255,.035)!important;
    backdrop-filter:blur(18px) saturate(1.08)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.08)!important;
  }

  body[data-page-key].ff-nav-floating .main-nav a{
    padding:8px 9px 9px!important;
    border-radius:999px!important;
    color:rgba(255,255,255,.72)!important;
    text-shadow:none!important;
  }

  body[data-page-key].ff-nav-floating .main-nav a::before{
    display:none!important;
  }

  body[data-page-key].ff-nav-floating .main-nav a::after{
    bottom:3px!important;
  }

  body[data-page-key].ff-nav-floating .main-nav a:hover{
    color:#fff!important;
    background:rgba(255,255,255,.045)!important;
  }

  body[data-page-key].ff-nav-floating .main-nav a.active{
    color:var(--cinematic-gold)!important;
    background:rgba(234,223,197,.055)!important;
  }

  /* weiches Erscheinen nur beim Umschalten */
  body[data-page-key].ff-nav-floating .main-nav{
    animation:ffFloatingNavIn .24s ease both!important;
  }

  @keyframes ffFloatingNavIn{
    from{opacity:0;transform:translate(-50%,-10px)}
    to{opacity:1;transform:translate(-50%,0)}
  }
}

/* ---------------------------------------------------------
   VERANSTALTUNG ANFRAGEN – bewusst klein und spät sichtbar
   --------------------------------------------------------- */
body[data-page-key] .ff-event-cta{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:9990;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0 8px 0 17px;
  border:1px solid rgba(234,223,197,.22);
  border-radius:999px;
  background:rgba(7,9,12,.78);
  color:rgba(255,255,255,.84);
  box-shadow:0 14px 40px rgba(0,0,0,.28);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  pointer-events:none;
  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s ease,
    border-color .2s ease,
    background .2s ease;
}

body[data-page-key].ff-show-event-cta .ff-event-cta{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}

body[data-page-key] .ff-event-cta-label{
  font-size:12px;
  line-height:1;
  font-weight:700;
  letter-spacing:.055em;
  text-transform:uppercase;
}

body[data-page-key] .ff-event-cta-arrow{
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border-radius:50%;
  background:var(--cinematic-gold);
  color:#111318;
  font-size:16px;
  transition:transform .2s ease;
}

body[data-page-key] .ff-event-cta:hover{
  color:#fff;
  border-color:rgba(234,223,197,.42);
  background:rgba(8,10,13,.90);
}

body[data-page-key] .ff-event-cta:hover .ff-event-cta-arrow{
  transform:rotate(8deg) scale(1.04);
}

body.menu-open[data-page-key] .ff-event-cta{
  opacity:0!important;
  pointer-events:none!important;
}

/* ---------------------------------------------------------
   FOTOSEITE – Magazin/Masonry statt starrem 4:3-Raster
   Die inline CSS-Regeln der alten Galerie werden bewusst
   mit !important überschrieben.
   --------------------------------------------------------- */
body[data-page-key="fotos"] .photo-grid.dynamic{
  display:block!important;
  grid-template-columns:none!important;
  column-count:3!important;
  column-gap:14px!important;
  width:100%;
}

body[data-page-key="fotos"] .photo-card{
  display:inline-block!important;
  position:relative!important;
  width:100%!important;
  height:auto!important;
  margin:0 0 14px!important;
  break-inside:avoid!important;
  -webkit-column-break-inside:avoid!important;

  overflow:hidden!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  box-shadow:none!important;
}

body[data-page-key="fotos"] .photo-card img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  border:0!important;
  border-radius:10px!important;
  box-shadow:none!important;
  filter:saturate(.95) brightness(.99);
  transition:
    transform .32s cubic-bezier(.2,.7,.2,1),
    filter .32s ease!important;
}

body[data-page-key="fotos"] .photo-card:hover img{
  transform:scale(1.018)!important;
  filter:saturate(1.03) brightness(1.035)!important;
}

body[data-page-key="fotos"] .photo-caption{
  padding:38px 14px 12px!important;
  background:linear-gradient(transparent,rgba(0,0,0,.78))!important;
}

body[data-page-key="fotos"] .gallery-status{
  margin-bottom:28px!important;
  color:rgba(255,255,255,.54)!important;
  text-align:center;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */
@media(max-width:980px){
  body[data-page-key] .ff-event-cta{
    right:14px;
    bottom:14px;
    min-height:42px;
    padding-left:14px;
  }

  body[data-page-key] .ff-event-cta-label{
    font-size:11px;
  }

  body[data-page-key="fotos"] .photo-grid.dynamic{
    column-count:2!important;
    column-gap:10px!important;
  }

  body[data-page-key="fotos"] .photo-card{
    margin-bottom:10px!important;
    border-radius:8px!important;
  }

  body[data-page-key="fotos"] .photo-card img{
    border-radius:8px!important;
  }
}

@media(max-width:560px){
  body[data-page-key] .ff-event-cta{
    right:12px;
    bottom:12px;
    gap:7px;
    min-height:40px;
  }

  body[data-page-key] .ff-event-cta-label{
    text-transform:none;
    letter-spacing:.025em;
  }

  body[data-page-key] .ff-event-cta-arrow{
    width:29px;
    height:29px;
  }

  body[data-page-key="fotos"] .photo-grid.dynamic{
    column-count:1!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-page-key].ff-nav-floating .main-nav{
    animation:none!important;
  }

  body[data-page-key] .ff-event-cta,
  body[data-page-key] .ff-event-cta-arrow{
    transition:none!important;
  }
}


/* =========================================================
   MODERN V9 – CTA + FOTO FIX
   ========================================================= */

/* Anfrage-Button unten mittig statt rechts */
body[data-page-key] .ff-event-cta{
  left:50%!important;
  right:auto!important;
  bottom:18px!important;
  transform:translate(-50%,10px)!important;
}

body[data-page-key].ff-show-event-cta .ff-event-cta{
  transform:translate(-50%,0)!important;
}

/* Sobald Footer sichtbar wird, Button ausblenden */
body[data-page-key].ff-cta-footer-visible .ff-event-cta{
  opacity:0!important;
  visibility:hidden!important;
  transform:translate(-50%,10px)!important;
  pointer-events:none!important;
}

/* Fotos zurück auf gleichmäßiges 4:3-Raster */
body[data-page-key="fotos"] .photo-grid.dynamic{
  display:grid!important;
  column-count:auto!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:stretch!important;
}

body[data-page-key="fotos"] .photo-card{
  display:block!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  break-inside:auto!important;
  overflow:hidden!important;
  border-radius:10px!important;
}

body[data-page-key="fotos"] .photo-card img{
  width:100%!important;
  height:100%!important;
  aspect-ratio:4/3!important;
  object-fit:cover!important;
  border-radius:10px!important;
}

@media(max-width:900px){
  body[data-page-key="fotos"] .photo-grid.dynamic{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:600px){
  body[data-page-key="fotos"] .photo-grid.dynamic{
    grid-template-columns:1fr!important;
  }

  body[data-page-key] .ff-event-cta{
    bottom:12px!important;
  }
}


/* =========================================================
   MODERN V11 – FIREBASE MODULES
   Termine / Repertoire / Gästebuch bewusster integrieren.
   ========================================================= */

body[data-page-key="termine"] .content-inner,
body[data-page-key="repertoire"] .content-inner,
body[data-page-key="gaestebuch"] .content-inner{
  max-width:1180px!important;
}

body[data-page-key] .ff-module-shell{
  position:relative;
  width:100%;
  margin:0 auto;
  padding:7px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.075);
  border-radius:18px;
  background:
    linear-gradient(145deg,rgba(234,223,197,.025),rgba(255,255,255,.008)),
    rgba(4,6,8,.72);
  box-shadow:
    0 22px 65px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.025);
}

body[data-page-key] .ff-module-shell::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
}

body[data-page-key] .ff-module-accent{
  position:absolute;
  left:8%;
  right:8%;
  top:0;
  height:1px;
  z-index:4;
  background:linear-gradient(90deg,transparent,var(--cinematic-gold),transparent);
  opacity:.52;
  pointer-events:none;
}

body[data-page-key] .ff-module-frame{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  border:0!important;
  border-radius:12px!important;
  background:#fff;
  box-shadow:none!important;
  overflow:hidden;
  filter:saturate(.97) contrast(.995);
}

/* Die drei Module brauchen nicht exakt dieselbe Höhe */
body[data-page-key="termine"] .ff-module-frame{
  height:1080px!important;
}
body[data-page-key="repertoire"] .ff-module-frame{
  height:1180px!important;
}
body[data-page-key="gaestebuch"] .ff-module-frame{
  height:1050px!important;
}

/* Ladefläche – verschwindet nach iframe load */
body[data-page-key] .ff-module-loading{
  position:absolute;
  inset:7px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  border-radius:12px;
  background:
    radial-gradient(circle at 50% 32%,rgba(234,223,197,.035),transparent 30%),
    #080a0d;
  color:rgba(255,255,255,.56);
  font-size:13px;
  letter-spacing:.025em;
  opacity:1;
  visibility:visible;
  transition:opacity .34s ease,visibility .34s ease;
  pointer-events:none;
}

body[data-page-key] .ff-module-shell.is-loaded .ff-module-loading{
  opacity:0;
  visibility:hidden;
}

body[data-page-key] .ff-module-loader{
  width:16px;
  height:16px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  border-top-color:var(--cinematic-gold);
  animation:ffModuleSpin .8s linear infinite;
}

@keyframes ffModuleSpin{
  to{transform:rotate(360deg)}
}

/* Unter dem Titel etwas mehr Ruhe vor den Modulen */
body[data-page-key="termine"] .rule,
body[data-page-key="repertoire"] .rule,
body[data-page-key="gaestebuch"] .rule{
  margin-bottom:30px!important;
}

/* Desktop: minimaler Schwebeeffekt */
@media(hover:hover) and (pointer:fine){
  body[data-page-key] .ff-module-shell{
    transition:border-color .24s ease,box-shadow .24s ease;
  }
  body[data-page-key] .ff-module-shell:hover{
    border-color:rgba(234,223,197,.13);
    box-shadow:
      0 25px 72px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.025);
  }
}

/* Tablet */
@media(max-width:980px){
  body[data-page-key] .ff-module-shell{
    padding:5px;
    border-radius:14px;
  }

  body[data-page-key] .ff-module-frame{
    border-radius:10px!important;
  }

  body[data-page-key] .ff-module-loading{
    inset:5px;
    border-radius:10px;
  }

  body[data-page-key="termine"] .ff-module-frame{
    height:980px!important;
  }
  body[data-page-key="repertoire"] .ff-module-frame{
    height:1050px!important;
  }
  body[data-page-key="gaestebuch"] .ff-module-frame{
    height:930px!important;
  }
}

/* Handy: fast bis an die Seitenkante, damit Firebase nicht wie ein Kasten im Kasten wirkt */
@media(max-width:640px){
  body[data-page-key="termine"] main.content,
  body[data-page-key="repertoire"] main.content,
  body[data-page-key="gaestebuch"] main.content{
    overflow:hidden;
  }

  body[data-page-key="termine"] .content-inner,
  body[data-page-key="repertoire"] .content-inner,
  body[data-page-key="gaestebuch"] .content-inner{
    width:100%!important;
    max-width:none!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  body[data-page-key] .ff-module-shell{
    padding:3px;
    border-radius:11px;
    border-color:rgba(255,255,255,.06);
    box-shadow:0 14px 42px rgba(0,0,0,.20);
  }

  body[data-page-key] .ff-module-frame{
    border-radius:8px!important;
    filter:none;
  }

  body[data-page-key] .ff-module-loading{
    inset:3px;
    border-radius:8px;
  }

  body[data-page-key="termine"] .ff-module-frame{
    height:900px!important;
  }
  body[data-page-key="repertoire"] .ff-module-frame{
    height:960px!important;
  }
  body[data-page-key="gaestebuch"] .ff-module-frame{
    height:850px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-page-key] .ff-module-loader{
    animation:none!important;
  }
  body[data-page-key] .ff-module-loading{
    transition:none!important;
  }
}


/* =========================================================
   MODERN V13 – KONTAKT + ÜBER UNS
   Feinschliff auf V12, ohne Funktionalität zu verändern.
   ========================================================= */

/* ---------------------------------------------------------
   ÜBER UNS
   --------------------------------------------------------- */
body[data-page-key="ueber-uns"] .about-legacy-shell{
  max-width:1220px!important;
}

body[data-page-key="ueber-uns"] .about-legacy-content{
  position:relative;
}

body[data-page-key="ueber-uns"] .about-legacy-title{
  margin-bottom:34px!important;
}

body[data-page-key="ueber-uns"] .about-legacy-intro{
  position:relative;
  margin-bottom:54px!important;
  padding:clamp(30px,4vw,46px)!important;
  overflow:hidden;
  border-radius:18px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  background:
    radial-gradient(circle at 88% 15%,rgba(234,223,197,.055),transparent 28%),
    rgba(255,255,255,.014)!important;
}

body[data-page-key="ueber-uns"] .about-legacy-intro::before{
  content:"";
  position:absolute;
  left:0;
  top:38px;
  bottom:38px;
  width:2px;
  background:linear-gradient(180deg,transparent,var(--cinematic-gold),transparent);
  opacity:.68;
}

body[data-page-key="ueber-uns"] .about-legacy-intro h3{
  max-width:980px;
  margin-bottom:22px!important;
  color:#fff!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(25px,2.3vw,36px)!important;
  line-height:1.15!important;
  font-weight:400!important;
  letter-spacing:.005em!important;
  text-transform:none!important;
}

body[data-page-key="ueber-uns"] .about-legacy-intro .about-legacy-copy{
  max-width:980px;
  color:rgba(255,255,255,.79)!important;
  font-size:clamp(15px,1.12vw,18px)!important;
  line-height:1.82!important;
}

/* Profile: mehr Editorial-Layout */
body[data-page-key="ueber-uns"] .about-legacy-profile{
  position:relative;
  grid-template-columns:minmax(250px,340px) minmax(0,1fr)!important;
  gap:clamp(34px,5vw,66px)!important;
  margin:0 0 28px!important;
  padding:clamp(22px,3vw,34px)!important;
  overflow:hidden;
  border-radius:18px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  background:
    linear-gradient(110deg,rgba(255,255,255,.022),rgba(255,255,255,.006))!important;
}

body[data-page-key="ueber-uns"] .about-legacy-profile::after{
  position:absolute;
  right:24px;
  top:13px;
  z-index:0;
  color:rgba(234,223,197,.055);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(68px,7vw,108px);
  line-height:1;
  pointer-events:none;
}

body[data-page-key="ueber-uns"] .about-legacy-profile-alex::after{
  content:"01";
}

body[data-page-key="ueber-uns"] .about-legacy-profile-maike::after{
  content:"02";
  left:24px;
  right:auto;
}

body[data-page-key="ueber-uns"] .about-legacy-profile-maike{
  grid-template-columns:minmax(0,1fr) minmax(220px,300px)!important;
}

body[data-page-key="ueber-uns"] .about-legacy-profile-maike .about-legacy-photo-wrap{
  grid-column:2;
  grid-row:1;
  justify-content:flex-end!important;
}

body[data-page-key="ueber-uns"] .about-legacy-profile-maike .about-legacy-profile-copy{
  grid-column:1;
  grid-row:1;
}

body[data-page-key="ueber-uns"] .about-legacy-photo-wrap,
body[data-page-key="ueber-uns"] .about-legacy-profile-copy{
  position:relative;
  z-index:1;
}

body[data-page-key="ueber-uns"] .about-legacy-photo{
  width:100%!important;
  max-width:100%!important;
  border-radius:12px!important;
  filter:grayscale(.18) saturate(.88) contrast(1.025)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.23)!important;
  transition:filter .3s ease,transform .3s ease!important;
}

body[data-page-key="ueber-uns"] .about-legacy-profile:hover .about-legacy-photo{
  filter:grayscale(0) saturate(.98) contrast(1.02)!important;
  transform:scale(1.008);
}

body[data-page-key="ueber-uns"] .about-legacy-profile-alex .about-legacy-photo{
  aspect-ratio:1.32/1!important;
  object-fit:cover!important;
}

body[data-page-key="ueber-uns"] .about-legacy-profile-maike .about-legacy-photo{
  max-width:270px!important;
  aspect-ratio:.77/1!important;
  object-fit:cover!important;
}

body[data-page-key="ueber-uns"] .about-legacy-profile-copy h3{
  position:relative;
  margin-bottom:22px!important;
  padding-bottom:15px;
  color:#fff!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(23px,2.1vw,33px)!important;
  line-height:1.12!important;
  font-weight:400!important;
  letter-spacing:.01em!important;
  text-transform:none!important;
}

body[data-page-key="ueber-uns"] .about-legacy-profile-copy h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:58px;
  height:1px;
  background:var(--cinematic-gold);
  opacity:.65;
}

body[data-page-key="ueber-uns"] .about-legacy-copy{
  color:rgba(255,255,255,.78)!important;
  font-style:normal!important;
  font-weight:400!important;
  font-size:clamp(15px,1.08vw,18px)!important;
  line-height:1.78!important;
}

/* ---------------------------------------------------------
   KONTAKT
   --------------------------------------------------------- */
body[data-page-key="kontakt"] .contact-page{
  position:relative;
}

body[data-page-key="kontakt"] .contact-page .content-inner{
  max-width:1120px!important;
}

body[data-page-key="kontakt"] .contact-intro{
  max-width:720px!important;
  margin-bottom:38px!important;
  color:rgba(255,255,255,.67)!important;
  font-size:16px;
  line-height:1.78!important;
}

body[data-page-key="kontakt"] .contact-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.45fr) minmax(260px,.65fr)!important;
  gap:24px!important;
  max-width:1080px!important;
  margin-top:28px!important;
  align-items:start!important;
}

body[data-page-key="kontakt"] .contact-card{
  border-radius:18px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.024),rgba(255,255,255,.008)),
    rgba(7,9,12,.52)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

body[data-page-key="kontakt"] #contactFormCard{
  position:relative;
  padding:clamp(24px,3vw,36px)!important;
  overflow:hidden;
}

body[data-page-key="kontakt"] #contactFormCard::before{
  content:"";
  position:absolute;
  left:36px;
  right:36px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--cinematic-gold),transparent);
  opacity:.52;
}

body[data-page-key="kontakt"] .contact-form{
  display:grid;
  gap:17px;
}

body[data-page-key="kontakt"] .contact-row{
  gap:14px!important;
}

body[data-page-key="kontakt"] .contact-form label{
  gap:8px!important;
  color:rgba(255,255,255,.62)!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:.075em;
  text-transform:uppercase;
}

body[data-page-key="kontakt"] .contact-form input,
body[data-page-key="kontakt"] .contact-form textarea{
  padding:14px 15px!important;
  border-radius:9px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.022)!important;
  color:#fff!important;
  font-family:inherit;
  font-size:15px;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease!important;
}

body[data-page-key="kontakt"] .contact-form input:hover,
body[data-page-key="kontakt"] .contact-form textarea:hover{
  border-color:rgba(255,255,255,.17)!important;
}

body[data-page-key="kontakt"] .contact-form input:focus,
body[data-page-key="kontakt"] .contact-form textarea:focus{
  border-color:rgba(234,223,197,.48)!important;
  background:rgba(255,255,255,.035)!important;
  box-shadow:0 0 0 3px rgba(234,223,197,.045)!important;
}

body[data-page-key="kontakt"] .contact-form textarea{
  min-height:190px!important;
  resize:vertical;
}

body[data-page-key="kontakt"] .send-btn{
  min-height:46px;
  padding:0 22px!important;
  border:1px solid rgba(234,223,197,.28)!important;
  border-radius:999px!important;
  background:var(--cinematic-gold)!important;
  color:#111318!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.055em!important;
  box-shadow:none!important;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease!important;
}

body[data-page-key="kontakt"] .send-btn:hover:not(:disabled){
  transform:translateY(-2px)!important;
  background:#f4ead3!important;
  box-shadow:0 12px 28px rgba(0,0,0,.18)!important;
}

body[data-page-key="kontakt"] .turnstile-wrap{
  padding-top:2px;
  border-top:1px solid rgba(255,255,255,.045);
}

body[data-page-key="kontakt"] .turnstile-note{
  color:rgba(255,255,255,.42)!important;
}

/* Kontaktdaten als kompakte Seitenkarte */
body[data-page-key="kontakt"] .contact-address{
  position:sticky;
  top:92px;
  padding:28px!important;
  color:rgba(255,255,255,.72)!important;
  line-height:1.78!important;
}

body[data-page-key="kontakt"] .contact-address::before{
  content:"";
  display:block;
  width:42px;
  height:1px;
  margin-bottom:22px;
  background:var(--cinematic-gold);
  opacity:.70;
}

body[data-page-key="kontakt"] .contact-address h3{
  margin-bottom:20px!important;
  color:#fff!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(26px,2.2vw,34px)!important;
  line-height:1.1!important;
  font-weight:400!important;
  letter-spacing:.012em!important;
}

body[data-page-key="kontakt"] .contact-address a{
  color:var(--cinematic-gold)!important;
  text-decoration:none!important;
  border-bottom:1px solid rgba(234,223,197,.22);
  transition:border-color .18s ease,color .18s ease;
}

body[data-page-key="kontakt"] .contact-address a:hover{
  color:#fff!important;
  border-bottom-color:rgba(255,255,255,.46);
}

body[data-page-key="kontakt"] .form-status{
  min-height:20px!important;
  padding-top:2px;
  line-height:1.45;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media(max-width:900px){
  body[data-page-key="ueber-uns"] .about-legacy-profile,
  body[data-page-key="ueber-uns"] .about-legacy-profile-maike{
    grid-template-columns:250px minmax(0,1fr)!important;
    gap:30px!important;
  }

  body[data-page-key="ueber-uns"] .about-legacy-profile-maike .about-legacy-photo-wrap{
    grid-column:1;
    grid-row:1;
    justify-content:center!important;
  }

  body[data-page-key="ueber-uns"] .about-legacy-profile-maike .about-legacy-profile-copy{
    grid-column:2;
    grid-row:1;
  }

  body[data-page-key="kontakt"] .contact-grid{
    grid-template-columns:1fr!important;
  }

  body[data-page-key="kontakt"] .contact-address{
    position:relative;
    top:auto;
  }
}

@media(max-width:640px){
  body[data-page-key="ueber-uns"] .about-legacy-intro{
    padding:26px 22px!important;
    margin-bottom:28px!important;
  }

  body[data-page-key="ueber-uns"] .about-legacy-intro::before{
    top:24px;
    bottom:24px;
  }

  body[data-page-key="ueber-uns"] .about-legacy-profile,
  body[data-page-key="ueber-uns"] .about-legacy-profile-maike{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:22px!important;
    padding:18px!important;
  }

  body[data-page-key="ueber-uns"] .about-legacy-profile .about-legacy-photo-wrap,
  body[data-page-key="ueber-uns"] .about-legacy-profile .about-legacy-profile-copy{
    grid-column:1!important;
  }

  body[data-page-key="ueber-uns"] .about-legacy-profile .about-legacy-photo-wrap{
    grid-row:1!important;
    justify-content:center!important;
  }

  body[data-page-key="ueber-uns"] .about-legacy-profile .about-legacy-profile-copy{
    grid-row:2!important;
  }

  body[data-page-key="ueber-uns"] .about-legacy-profile-alex .about-legacy-photo{
    max-width:360px!important;
  }

  body[data-page-key="ueber-uns"] .about-legacy-profile-maike .about-legacy-photo{
    max-width:230px!important;
  }

  body[data-page-key="ueber-uns"] .about-legacy-profile::after{
    font-size:72px;
    right:16px;
    top:10px;
  }

  body[data-page-key="ueber-uns"] .about-legacy-profile-maike::after{
    left:auto;
    right:16px;
  }

  body[data-page-key="kontakt"] .contact-grid{
    gap:16px!important;
  }

  body[data-page-key="kontakt"] #contactFormCard,
  body[data-page-key="kontakt"] .contact-address{
    padding:22px 18px!important;
    border-radius:13px!important;
  }

  body[data-page-key="kontakt"] .contact-row{
    grid-template-columns:1fr!important;
  }

  body[data-page-key="kontakt"] .send-btn{
    width:100%!important;
  }
}


/* =========================================================
   MODERN V15 – HANDY-MENÜ ROBUST
   Linkbereich und Social-Footer sind getrennt.
   Dadurch bleibt auch der letzte Menüpunkt immer erreichbar.
   ========================================================= */
@media(max-width:980px){
  :root{
    --ff-mobile-social-area:92px;
    --mobile-drawer-width:min(72vw,340px);
  }

  /* Alten Social-Footer des Nav-Elements vollständig abschalten. */
  body.menu-open[data-page-key] .mobile-nav::after{
    content:none!important;
    display:none!important;
  }

  /* Eigener fester Footer nur für Social Icons.
     Er überlagert keine Navigationslinks mehr. */
  body.menu-open[data-page-key]::after{
    content:"";
    position:fixed;
    z-index:1015;
    left:0;
    bottom:0;
    width:var(--mobile-drawer-width);
    height:calc(var(--ff-mobile-social-area) + env(safe-area-inset-bottom));
    background:#080a0d;
    border-top:1px solid rgba(255,255,255,.075);
    pointer-events:none;
  }

  /* Scrollbarer Linkbereich endet OBERHALB des Social-Footers. */
  body[data-page-key] .mobile-nav,
  body.menu-open[data-page-key] .mobile-nav{
    top:0!important;
    bottom:calc(var(--ff-mobile-social-area) + env(safe-area-inset-bottom))!important;
    left:0!important;
    right:auto!important;

    width:var(--mobile-drawer-width)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    padding:64px 0 14px!important;
    margin:0!important;

    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-padding-top:64px;
    scroll-padding-bottom:18px;

    background:#080a0d!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:22px 0 70px rgba(0,0,0,.52)!important;
  }

  body[data-page-key] .mobile-nav a{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;

    min-height:44px!important;
    margin:0 12px 2px!important;
    padding:0 16px!important;

    border:0!important;
    border-radius:7px!important;
    white-space:nowrap!important;
  }

  /* Der letzte Punkt bekommt bewusst noch Luft zum unteren Rand. */
  body[data-page-key] .mobile-nav a:last-child{
    margin-bottom:14px!important;
  }

  /* Social Icons bleiben in ihrem eigenen unteren Bereich. */
  body.menu-open[data-page-key] .socials,
  body.page-settings-active[data-page-key].menu-open .socials,
  body.custom-header-settings[data-page-key="custom"].menu-open .socials{
    position:fixed!important;
    z-index:1020!important;
    left:28px!important;
    right:auto!important;
    top:auto!important;
    bottom:calc(24px + env(safe-area-inset-bottom))!important;
    transform:none!important;
    display:flex!important;
    gap:22px!important;
    opacity:1!important;
    animation:none!important;
  }

  /* X bleibt sauber innerhalb der Seitenleiste. */
  body.menu-open[data-page-key] .mobile-menu-btn{
    left:calc(var(--mobile-drawer-width) - 58px)!important;
    right:auto!important;
    top:14px!important;
    z-index:1030!important;
  }
}

@media(max-width:640px){
  :root{
    --ff-mobile-social-area:86px;
    --mobile-drawer-width:min(82vw,320px);
  }

  body[data-page-key] .mobile-nav,
  body.menu-open[data-page-key] .mobile-nav{
    padding-top:62px!important;
    padding-bottom:12px!important;
  }

  body[data-page-key] .mobile-nav a{
    min-height:43px!important;
    margin:0 10px 1px!important;
    padding:0 16px!important;
  }

  body[data-page-key] .mobile-nav a:last-child{
    margin-bottom:12px!important;
  }

  body.menu-open[data-page-key] .socials,
  body.page-settings-active[data-page-key].menu-open .socials,
  body.custom-header-settings[data-page-key="custom"].menu-open .socials{
    left:24px!important;
    bottom:calc(21px + env(safe-area-inset-bottom))!important;
  }

  body.menu-open[data-page-key] .mobile-menu-btn{
    left:calc(var(--mobile-drawer-width) - 56px)!important;
  }
}

/* Sehr kleine Displays: Links bleiben trotzdem vollständig scrollbar. */
@media(max-width:380px){
  :root{
    --mobile-drawer-width:84vw;
  }

  body[data-page-key] .mobile-nav a{
    min-height:41px!important;
  }
}


/* =========================================================
   MODERN V16 – HANDY SOCIAL ICONS ROOT FIX
   Eigene Social-Leiste außerhalb des Hero-Stacking-Contexts.
   ========================================================= */
.ff-mobile-socials{
  display:none;
}

@media(max-width:980px){
  /* Die ursprünglichen Hero-Icons im geöffneten Menü ausblenden.
     Ihre Kopie unten im Drawer übernimmt. */
  body.menu-open[data-page-key] .hero .socials{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body[data-page-key] .ff-mobile-socials{
    position:fixed;
    z-index:1025;
    left:0;
    bottom:calc(20px + env(safe-area-inset-bottom));
    width:var(--mobile-drawer-width);
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(28px,7vw,48px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(6px);
    transition:opacity .20s ease,transform .20s ease,visibility .20s ease;
  }

  body.menu-open[data-page-key] .ff-mobile-socials{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }

  body[data-page-key] .ff-mobile-socials a{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    flex:0 0 42px;

    border:1px solid rgba(255,255,255,.16);
    border-radius:50%;
    background:rgba(5,7,10,.32);
    color:#fff;
    text-decoration:none;

    box-shadow:none;
    transition:
      border-color .18s ease,
      background .18s ease,
      transform .18s ease;
  }

  body[data-page-key] .ff-mobile-socials a:hover,
  body[data-page-key] .ff-mobile-socials a:focus-visible{
    border-color:rgba(234,223,197,.52);
    background:rgba(234,223,197,.08);
    transform:translateY(-2px);
    outline:none;
  }

  body[data-page-key] .ff-mobile-socials svg{
    width:22px;
    height:22px;
    fill:#fff;
    filter:none;
  }
}

@media(max-width:640px){
  body[data-page-key] .ff-mobile-socials{
    bottom:calc(18px + env(safe-area-inset-bottom));
    gap:clamp(26px,9vw,42px);
  }

  body[data-page-key] .ff-mobile-socials a{
    width:40px;
    height:40px;
    flex-basis:40px;
  }

  body[data-page-key] .ff-mobile-socials svg{
    width:21px;
    height:21px;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-page-key] .ff-mobile-socials{
    transition:none!important;
  }
}


/* =========================================================
   MODERN V17 – SCHNELLE EINSTELLUNGEN
   Cache-first: kein sichtbarer Standardzustand vor Firebase.
   ========================================================= */
body.ff-settings-cold[data-page-key] .brand,
body.ff-settings-cold[data-page-key] .socials,
body.ff-settings-cold[data-page-key] .main-nav,
body.ff-settings-cold[data-page-key] .mobile-menu-btn,
body.ff-settings-cold[data-page-key] main.content{
  visibility:hidden!important;
}

/* Hero-Foto bleibt sichtbar; dadurch entsteht keine weiße/leere Seite. */
body.ff-settings-cold[data-page-key] .hero{
  visibility:visible!important;
}

/* Kein zusätzlicher Fade – nur sofort sichtbar, sobald Werte angewendet sind. */
body.ff-settings-ready[data-page-key] .brand,
body.ff-settings-ready[data-page-key] .socials,
body.ff-settings-ready[data-page-key] .main-nav,
body.ff-settings-ready[data-page-key] .mobile-menu-btn,
body.ff-settings-ready[data-page-key] main.content{
  visibility:visible;
}

/* V27 – Bildseite je Bandmitglied frei wählbar (Über uns) */
body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-photo-left{
  grid-template-columns:minmax(250px,340px) minmax(0,1fr)!important;
}
body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-photo-right{
  grid-template-columns:minmax(0,1fr) minmax(220px,300px)!important;
}
body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-photo-left .about-legacy-photo-wrap{
  grid-column:1;grid-row:1;justify-content:flex-start!important;
}
body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-photo-left .about-legacy-profile-copy{
  grid-column:2;grid-row:1;
}
body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-photo-right .about-legacy-photo-wrap{
  grid-column:2;grid-row:1;justify-content:flex-end!important;
}
body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-photo-right .about-legacy-profile-copy{
  grid-column:1;grid-row:1;
}
body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-photo-right::after{
  content:attr(data-number);left:24px;right:auto;
}
body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-photo-left::after{
  content:attr(data-number);left:auto;right:24px;
}
body[data-page-key="ueber-uns"] .about-legacy-profile-extra .about-legacy-photo{
  max-width:270px!important;aspect-ratio:.77/1!important;object-fit:cover!important;
}
body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-without-photo{
  grid-template-columns:minmax(0,1fr)!important;
}
body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-without-photo .about-legacy-profile-copy{
  grid-column:1!important;grid-row:1!important;
}
@media(min-width:641px) and (max-width:900px){
  body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-photo-left{
    grid-template-columns:250px minmax(0,1fr)!important;
  }
  body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-photo-right{
    grid-template-columns:minmax(0,1fr) 250px!important;
  }
}
@media(max-width:640px){
  body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-photo-left,
  body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-photo-right{
    grid-template-columns:1fr!important;
  }
  body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-photo-left .about-legacy-photo-wrap,
  body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-photo-right .about-legacy-photo-wrap{
    grid-column:1!important;grid-row:1!important;justify-content:center!important;
  }
  body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-photo-left .about-legacy-profile-copy,
  body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-photo-right .about-legacy-profile-copy{
    grid-column:1!important;grid-row:2!important;
  }
  body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-without-photo .about-legacy-profile-copy{
    grid-row:1!important;
  }
  body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-photo-right::after,
  body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-photo-left::after{
    left:auto;right:16px;
  }
}

/* V28 – individuelle Schriftgestaltung der Bandmitglieder (Desktop / Handy getrennt).
   Standardwerte werden weiterhin aus dem Design bzw. den Seiten-Einstellungen bezogen. */
@media(min-width:641px){
  body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-heading-desktop .about-legacy-profile-copy h3{font-size:var(--ff-about-heading-desktop)!important}
  body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-text-desktop .about-legacy-copy{font-size:var(--ff-about-text-desktop)!important}
}
@media(max-width:640px){
  body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-heading-mobile .about-legacy-profile-copy h3{font-size:var(--ff-about-heading-mobile)!important}
  body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-text-mobile .about-legacy-copy{font-size:var(--ff-about-text-mobile)!important}
}
body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-heading-font .about-legacy-profile-copy h3{font-family:var(--ff-about-heading-font)!important}
body[data-page-key="ueber-uns"] .about-legacy-profile.ff-about-text-font .about-legacy-copy{font-family:var(--ff-about-text-font)!important}