/*
Theme Name: Maraton Musikverlag
Theme URI: https://www.maraton.de
Author: Maraton Musikverlag
Description: Maßgeschneidertes One-Page-Theme für den Maraton Musikverlag. Komponist:innen, Produktionen und Repertoire werden bequem im WordPress-Adminbereich gepflegt.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: maraton
*/



  :root{
    --paper:#FBFAF7;
    --paper-tint:#F4F1E9;
    --ink:#26221B;
    --ink-soft:#5C564A;
    --ink-faint:#948D7D;
    --gold:#9B8F6B;
    --gold-deep:#83774F;
    --gold-light:#C9C0A4;
    --hairline:rgba(38,34,27,0.12);
    --hairline-light:rgba(255,255,255,0.22);
    --maxw:1120px;
    --ease:cubic-bezier(.22,.61,.36,1);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Jost', sans-serif;
    font-weight:300;
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{ font-family:'Cormorant Garamond', serif; font-weight:500; margin:0; line-height:1.1; }
  p{ margin:0; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; margin:0; padding:0; }
  button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
  img{ max-width:100%; display:block; }

  ::selection{ background:var(--gold); color:#fff; }
  *:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }

  .container{ max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.4rem,5vw,3rem); }

  .label{
    font-weight:400; font-size:.72rem;
    letter-spacing:.42em; text-transform:uppercase;
    color:var(--gold-deep);
  }
  .italic{ font-style:italic; }

  /* ================= LOGO INTRO ================= */
  .intro{
    position:fixed; inset:0; z-index:200;
    background:#161310;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2.2rem;
    transition:opacity .9s var(--ease), visibility .9s;
    cursor:pointer;
  }
  .intro.done{ opacity:0; visibility:hidden; pointer-events:none; }
  .intro-mark{ position:relative; width:min(180px,40vw); aspect-ratio:1; }
  .intro-mark svg, .intro-mark img{ position:absolute; inset:0; width:100%; height:100%; }
  .intro-mark svg path{
    fill:none; stroke:var(--gold); stroke-width:7; stroke-linecap:round;
    stroke-dasharray:1; stroke-dashoffset:1;
    animation:drawarc 1.5s var(--ease) forwards;
  }
  .intro-mark svg path:nth-child(1){ animation-delay:.15s; }
  .intro-mark svg path:nth-child(2){ animation-delay:.3s; }
  .intro-mark svg path:nth-child(3){ animation-delay:.45s; }
  .intro-mark svg path:nth-child(4){ animation-delay:.6s; }
  .intro-mark svg path:nth-child(5){ animation-delay:.75s; }
  @keyframes drawarc{ to{ stroke-dashoffset:0; } }
  .intro-word{
    font-size:clamp(1.5rem,4vw,2.1rem); font-weight:300;
    letter-spacing:.62em; text-transform:lowercase; color:var(--paper);
    padding-left:.62em; /* optisch zentrieren wegen letter-spacing */
    opacity:0;
    animation:wordin 1.3s var(--ease) .9s forwards;
  }
  .intro-sub{
    font-size:.66rem; font-weight:400; letter-spacing:.5em; text-transform:uppercase;
    color:var(--gold-light); padding-left:.5em;
    opacity:0;
    animation:fadein 1s ease 1.5s forwards;
  }
  @keyframes wordin{
    from{ opacity:0; letter-spacing:.95em; }
    to{ opacity:1; letter-spacing:.62em; }
  }
  .intro-skip{
    position:absolute; bottom:2rem;
    font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
    color:rgba(251,250,247,.4);
    opacity:0; animation:fadein 1s ease 2s forwards;
  }

  /* ================= header ================= */
  header{
    position:fixed; top:0; left:0; right:0; z-index:80;
    height:88px;
    display:flex; align-items:center;
    transition:background .45s var(--ease), border-color .45s var(--ease), height .45s var(--ease), opacity .8s ease;
    border-bottom:1px solid transparent;
	  background:linear-gradient(to bottom, rgba(12,10,7,.42) 0%, rgba(12,10,7,0) 100%);
    opacity:0;
  }
  body.ready header{ opacity:1; }
  header.solid{
    background:rgba(251,250,247,.92);
    backdrop-filter:blur(12px);
    border-bottom-color:var(--hairline);
    height:72px;
  }
  .header-inner{
    width:100%; max-width:var(--maxw); margin-inline:auto;
    padding-inline:clamp(1.4rem,5vw,3rem);
    display:flex; align-items:center; justify-content:space-between;
  }
  .logo{ display:flex; align-items:center; gap:.85rem; }
  .logo .mark-svg{ width:38px; height:38px; color:var(--gold); transition:width .45s var(--ease), height .45s var(--ease); flex:none; }
  header.solid .logo .mark-svg{ width:32px; height:32px; }
  .logo-word{ display:flex; flex-direction:column; line-height:1.15; }
  .logo-name{
    font-weight:300; font-size:1.24rem; letter-spacing:.34em; text-transform:lowercase;
    color:#fff; transition:color .45s var(--ease);
  }
  .logo-claim{
    font-size:.56rem; font-weight:400; letter-spacing:.4em; text-transform:uppercase;
    color:rgba(255,255,255,.65); transition:color .45s var(--ease);
  }
  header.solid .logo-name{ color:var(--ink); }
  header.solid .logo-claim{ color:var(--ink-faint); }

  .main-nav ul{ display:flex; gap:clamp(1rem,2.4vw,2.2rem); }
  .main-nav a{
    font-size:.72rem; font-weight:400; letter-spacing:.24em; text-transform:uppercase;
    color:rgba(255,255,255,.82);
    padding-bottom:5px;
    border-bottom:1px solid transparent;
    transition:color .3s ease, border-color .3s ease;
  }
  .main-nav a:hover, .main-nav a.active{ color:#fff; border-bottom-color:var(--gold-light); }
  header.solid .main-nav a{ color:var(--ink-soft); }
  header.solid .main-nav a:hover, header.solid .main-nav a.active{ color:var(--ink); border-bottom-color:var(--gold); }

  .lang-toggle{
    font-family:'Jost', sans-serif; font-weight:400;
    font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
    color:rgba(255,255,255,.82);
    border:1px solid var(--hairline-light);
    border-radius:20px;
    padding:.45em 1em .45em 1.15em;
    margin-left:1.2rem;
    transition:color .3s ease, border-color .3s ease;
  }
  .lang-toggle:hover{ color:#fff; border-color:var(--gold-light); }
  header.solid .lang-toggle{ color:var(--ink-soft); border-color:var(--hairline); }
  header.solid .lang-toggle:hover{ color:var(--ink); border-color:var(--gold); }
  @media (max-width:920px){ .lang-toggle{ margin-left:auto; margin-right:1rem; } }

  .menu-toggle{ display:none; font-size:1.3rem; padding:.3em .55em; color:#fff; transition:color .45s var(--ease); }
  header.solid .menu-toggle{ color:var(--ink); }
  @media (max-width:920px){
    .main-nav{
      position:fixed; top:0; left:0; right:0;
      padding-top:88px;
      background:rgba(251,250,247,.98);
      border-bottom:1px solid var(--hairline);
      max-height:0; overflow:hidden; transition:max-height .4s var(--ease);
      z-index:-1;
    }
    .main-nav.open{ max-height:560px; }
    .main-nav ul{ flex-direction:column; gap:0; padding:.6rem clamp(1.4rem,5vw,3rem) 1.4rem; }
    .main-nav a{ display:block; padding:.9em 0; border-bottom:1px solid var(--hairline); color:var(--ink-soft) !important; }
    .menu-toggle{ display:inline-block; }
    .logo-claim{ display:none; }
  }

  /* ================= hero ================= */
  .hero{
    position:relative;
    height:100vh; height:100dvh; min-height:660px;
    display:flex; align-items:flex-end;
    overflow:hidden;
    color:#fff;
  }
  .hero-media{ position:absolute; inset:0; background:radial-gradient(ellipse 90% 70% at 50% 30%, #2A251C 0%, #16130E 70%); }
  #soundCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  .hero-media::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(18,15,11,.5) 0%, rgba(18,15,11,0) 40%);
    pointer-events:none;
  }

  .hero-content{
    position:relative; z-index:2;
    width:100%;
    max-width:var(--maxw); margin-inline:auto;
    padding:0 clamp(1.4rem,5vw,3rem) clamp(6rem,13vh,9rem);
  }
  .hero .label{ color:var(--gold-light); display:block; margin-bottom:1.4rem; }
  .line-mask{ overflow:hidden; display:block; }
  .line-mask > span{ display:block; transform:translateY(110%); }
  body.ready .line-mask > span{ animation:lineup 1.1s var(--ease) forwards; }
  body.ready .d0 > span{ animation-delay:.1s; }
  body.ready .d1 > span{ animation-delay:.25s; }
  body.ready .d2 > span{ animation-delay:.42s; }
  .hero h1{ font-size:clamp(3.2rem,9vw,7rem); font-weight:500; color:#fff; }
  .hero h1 .italic{ color:var(--gold-light); }
  .hero-sub{
    margin-top:1.8rem; max-width:46ch;
    font-size:clamp(.98rem,1.4vw,1.12rem);
    color:rgba(255,255,255,.88);
    opacity:0;
  }
  body.ready .hero-sub{ animation:fadein 1.2s ease 1s forwards; }
  @keyframes lineup{ to{ transform:translateY(0); } }
  @keyframes fadein{ to{ opacity:1; } }

  .text-link{
    font-size:.76rem; font-weight:400; letter-spacing:.3em; text-transform:uppercase;
    color:#fff;
    padding-bottom:.55em;
    border-bottom:1px solid var(--gold-light);
    transition:color .25s ease, letter-spacing .25s ease;
  }
  .text-link:hover{ color:var(--gold-light); letter-spacing:.36em; }
  .text-link.dark{ color:var(--ink); border-bottom-color:var(--gold); }
  .text-link.dark:hover{ color:var(--gold-deep); }


  .scroll-cue{
    position:absolute; left:50%; bottom:2rem; transform:translateX(-50%);
    z-index:3;
    width:1px; height:52px;
    background:rgba(255,255,255,.35);
    overflow:hidden;
  }
  .scroll-cue::after{
    content:''; position:absolute; left:0; top:-40%;
    width:100%; height:40%;
    background:#fff;
    animation:cuedrop 2.2s var(--ease) infinite;
  }
  @keyframes cuedrop{ 0%{ top:-40%; } 60%,100%{ top:110%; } }

  /* ================= sections ================= */
  section{ padding-block:clamp(5.5rem,11vw,9rem); }
  .tint{ background:var(--paper-tint); }

  .section-head{ text-align:center; max-width:66ch; margin-inline:auto; }
  .section-head .label{ display:block; margin-bottom:1.6rem; }
  .section-head h2{ font-size:clamp(2.3rem,4.8vw,3.6rem); }
  .lead{ margin-top:1.8rem; color:var(--ink-soft); font-size:1.02rem; max-width:58ch; margin-inline:auto; }

  .reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
  .reveal.in{ opacity:1; transform:none; }

  /* ================= chain ================= */
  .chain{
    margin-top:4.5rem;
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:clamp(2rem,4vw,3.5rem);
    text-align:center;
  }
  .chain-step{
    display:flex; flex-direction:column; align-items:center; gap:.9rem;
    opacity:0; transform:translateY(26px);
    transition:opacity .9s var(--ease), transform .9s var(--ease);
  }
  .chain.in .chain-step{ opacity:1; transform:none; }
  .chain.in .chain-step:nth-child(1){ transition-delay:.05s; }
  .chain.in .chain-step:nth-child(2){ transition-delay:.2s; }
  .chain.in .chain-step:nth-child(3){ transition-delay:.35s; }
  .chain.in .chain-step:nth-child(4){ transition-delay:.5s; }
  .chain-num{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.5rem; color:var(--gold); }
  .chain-step h3{ font-size:1.45rem; }
  .chain-step p{ color:var(--ink-soft); font-size:.94rem; max-width:26ch; }
  @media (max-width:860px){ .chain{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){ .chain{ grid-template-columns:1fr; } }

  /* ================= full-bleed band ================= */
  .band{
    position:relative;
    min-height:72vh;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    color:#fff;
    text-align:center;
    padding:clamp(5rem,12vh,8rem) clamp(1.4rem,5vw,3rem);
  }
  .band-media{ position:absolute; inset:-12% 0; background:#1a1712; will-change:transform; }
  .band-media img{ width:100%; height:100%; object-fit:cover; }
  .band-media::after{ content:''; position:absolute; inset:0; background:rgba(18,15,11,.5); }
  .band-content{ position:relative; z-index:2; max-width:760px; }
  .band .label{ color:var(--gold-light); display:block; margin-bottom:1.6rem; }
  .band-quote{
    font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400;
    font-size:clamp(1.7rem,4vw,2.9rem); line-height:1.35;
  }

  /* ================= zahlen (hell) ================= */
  .stats{
    display:flex; justify-content:center; gap:clamp(3rem,9vw,7rem); flex-wrap:wrap;
    margin-top:4rem;
  }
  .stat{ display:flex; flex-direction:column; gap:.5rem; text-align:center; }
  .stat-num{
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(3.2rem,6.5vw,5rem); font-weight:500; line-height:1;
    color:var(--ink);
  }
  .stat-num sup{ font-size:.45em; color:var(--gold-deep); }
  .stat-label{ font-size:.7rem; font-weight:400; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-faint); }

  /* ================= komponisten ================= */
  .composer-list{
    margin-top:4rem;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-auto-flow:column;
    grid-template-rows:repeat(var(--maraton-rows3, 5), auto);
    column-gap:clamp(2rem,5vw,4.5rem);
    max-width:960px; margin-inline:auto;
    text-align:center;
  }
  .composer-list li{
    display:flex; align-items:center; justify-content:center;
    min-height:3em;
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(1.4rem,2.3vw,1.7rem); font-weight:500;
    line-height:1.25;
    padding-block:.4em;
    transition:color .25s ease;
  }
  .composer-list li:hover{ color:var(--gold-deep); }
  @media (max-width:820px){ .composer-list{ grid-template-columns:repeat(2, 1fr); grid-template-rows:repeat(var(--maraton-rows2, 7), auto); } }
  @media (max-width:500px){ .composer-list{ grid-template-columns:1fr; grid-auto-flow:row; grid-template-rows:none; } .composer-list li{ min-height:2.4em; } }


  /* ================= produktions-slider ================= */
  .prod-slider{ margin-top:1rem; }
  .slides{
    position:relative;
    aspect-ratio:16/9;
    max-height:72vh;
    width:100%;
    overflow:hidden;
    background:#1a1712;
  }
  .slide{
    position:absolute; inset:0;
    opacity:0;
    transition:opacity .7s var(--ease);
    pointer-events:none;
  }
  .slide.active{ opacity:1; pointer-events:auto; }
  .slide > img{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
    transform:scale(1.05);
    transition:transform 3.5s linear;
  }
  .slide.active > img{ transform:scale(1.0); }
  .slide::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(18,15,11,.78) 0%, rgba(18,15,11,.15) 50%, rgba(18,15,11,.08) 100%);
  }
  .slide-content{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding:clamp(1.6rem,4vw,3rem);
    color:#fff;
  }
  .slide-content .label{ display:block; color:var(--gold-light); margin-bottom:.8rem; }
  .slide-content h3{
    font-size:clamp(1.8rem,4vw,3.2rem); font-weight:500;
    margin-bottom:.7rem; max-width:18ch;
  }
  .slide-content p{ color:rgba(255,255,255,.85); font-size:.95rem; max-width:52ch; }

  .slide-zone{
    position:absolute; top:0; bottom:0; width:38%;
    z-index:6;
    display:flex; align-items:center;
    background:none; border:none; color:#fff;
    cursor:pointer;
  }
  .slide-zone.left{ left:0; justify-content:flex-start; padding-left:clamp(1rem,3vw,2rem); }
  .slide-zone.right{ right:0; justify-content:flex-end; padding-right:clamp(1rem,3vw,2rem); }
  .slide-zone span{
    width:52px; height:52px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem;
    border:1px solid rgba(255,255,255,.4);
    background:rgba(18,15,11,.35);
    backdrop-filter:blur(6px);
    opacity:0; transform:scale(.85);
    transition:opacity .35s ease, transform .35s ease, border-color .25s ease;
  }
  .slide-zone:hover span, .slide-zone:focus-visible span{ opacity:1; transform:scale(1); }
  .slide-zone:hover span{ border-color:var(--gold-light); }
  @media (hover:none){ .slide-zone span{ opacity:.75; transform:none; } }
  .slider-counter{
    position:absolute; right:clamp(1.2rem,3vw,2rem); top:clamp(1rem,2.5vw,1.6rem);
    z-index:6;
    font-weight:400; font-size:.7rem; letter-spacing:.3em;
    color:rgba(255,255,255,.75);
  }
  .slider-counter #slideNow{ color:var(--gold-light); }

  @media (max-width:640px){
    .slides{ aspect-ratio:4/5; }
    .slide-content h3{ font-size:1.5rem; }
    .slide-content p{ display:none; }
  }

  /* ================= werkkatalog ================= */
  .filters{
    margin-top:3.2rem;
    display:flex; justify-content:center; flex-wrap:wrap;
    gap:clamp(1.4rem,3vw,2.8rem);
  }

  /* ---- dunkle Sektion (Werkkatalog als "Filmabspann") ---- */
  .dark-section{
    background:#16130E;
    color:var(--paper);
  }
  .dark-section .section-head h2{ color:var(--paper); }
  .dark-section .lead{ color:rgba(243,238,226,.7); }
  .dark-section .label{ color:var(--gold-light); }
  .dark-section .filter-btn{ color:rgba(243,238,226,.45); }
  .dark-section .filter-btn:hover{ color:var(--paper); }
  .dark-section .filter-btn.active{ color:var(--paper); border-bottom-color:var(--gold-light); }
  .dark-section .work{ border-bottom-color:rgba(243,238,226,.12); }
  .dark-section .work:first-child{ border-top-color:rgba(243,238,226,.12); }
  .dark-section .work-title{ color:var(--paper); }
  .dark-section .work-meta{ color:rgba(243,238,226,.45); }
  .dark-section .work-meta em{ color:var(--gold-light); }

  .filter-btn{
    font-size:.74rem; font-weight:400; letter-spacing:.28em; text-transform:uppercase;
    color:var(--ink-faint);
    padding-bottom:.5em;
    border-bottom:1px solid transparent;
    transition:color .25s ease, border-color .25s ease;
  }
  .filter-btn:hover{ color:var(--ink); }
  .filter-btn.active{ color:var(--ink); border-bottom-color:var(--gold); }

  .works{ margin:3.4rem auto 0; max-width:720px; }
  .work{
    display:flex; align-items:baseline; justify-content:space-between; gap:1.6rem;
    padding-block:1.02rem;
    border-bottom:1px solid var(--hairline);
  }
  .work:first-child{ border-top:1px solid var(--hairline); }
  .work-title{ font-family:'Cormorant Garamond', serif; font-size:1.32rem; font-weight:500; }
  .work-meta{
    font-size:.66rem; font-weight:400; letter-spacing:.3em; text-transform:uppercase;
    color:var(--ink-faint); white-space:nowrap;
  }
  .work-meta em{ font-style:normal; color:var(--gold-deep); }
  @media (max-width:560px){ .work{ flex-direction:column; gap:.25rem; } }

  /* ================= aktuelles ================= */

  /* ================= kontakt ================= */
  .contact{ text-align:center; }
  .mail-link{
    display:inline-block;
    margin-top:2.6rem;
    font-family:'Cormorant Garamond', serif; font-style:italic;
    font-size:clamp(2rem,5vw,3.2rem);
    color:var(--gold-deep);
    border-bottom:1px solid var(--gold);
    padding-bottom:.08em;
    transition:opacity .25s ease;
  }
  .mail-link:hover{ opacity:.65; }

  /* ================= footer ================= */
  footer{ background:#161310; padding-block:3.4rem; text-align:center; }
  .footer-brand{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; margin-bottom:2rem; }
  .footer-brand .mark-svg{ width:64px; height:64px; color:var(--gold); }
  .footer-name{
    font-size:1.35rem; font-weight:300; letter-spacing:.6em; text-transform:lowercase;
    color:var(--paper); padding-left:.6em; line-height:1;
  }
  .footer-sub{
    font-size:.6rem; font-weight:400; letter-spacing:.5em; text-transform:uppercase;
    color:var(--gold-light); padding-left:.5em;
  }
  .footer-links{ display:flex; justify-content:center; gap:2.4rem; margin-bottom:1.6rem; }
  .footer-links a{
    font-size:.68rem; font-weight:400; letter-spacing:.28em; text-transform:uppercase;
    color:rgba(251,250,247,.55);
    transition:color .25s ease;
  }
  .footer-links a:hover{ color:var(--paper); }
  .footer-copy{ font-size:.74rem; color:rgba(251,250,247,.4); }


  /* ---- nach oben ---- */
  #toTop{
    position:fixed; right:1.6rem; bottom:1.6rem; z-index:70;
    width:46px; height:46px; border-radius:50%;
    background:rgba(251,250,247,.92);
    border:1px solid var(--hairline);
    color:var(--gold-deep);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transform:translateY(8px);
    transition:opacity .35s ease, transform .35s ease, color .25s ease;
    backdrop-filter:blur(8px);
    box-shadow:0 4px 18px rgba(38,34,27,.10);
  }
  #toTop.show{ opacity:1; pointer-events:auto; transform:none; }
  #toTop:hover{ color:var(--ink); }

  /* ---- Kontakt: Ansprechpartner ---- */
 .contact-people{
  margin-top:4rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2.5rem clamp(1.5rem,4vw,3rem);
  max-width:1000px; margin-inline:auto;
}
.contact-people .person{
  flex:1 1 220px;
  max-width:280px;
}
  
  .person .label{ display:block; margin-bottom:.7rem; min-height:2.4em; line-height:1.2; }
  .person h3{ font-size:1.6rem; margin-bottom:.4rem; }
  .person-mail{
    font-size:.85rem; font-weight:400; letter-spacing:.06em;
    color:var(--gold-deep);
    border-bottom:1px solid var(--gold-soft, rgba(155,143,107,.4));
    padding-bottom:.15em;
    transition:opacity .25s ease;
  }
  .person-mail:hover{ opacity:.65; }
  .contact-details{
    margin-top:3rem;
    font-size:.82rem; letter-spacing:.06em;
    color:var(--ink-faint);
  }
  @media (max-width:640px){ .contact-people{ grid-template-columns:1fr; text-align:center; } }

  /* ---- Rechtstexte-Overlay ---- */
  .legal-overlay{
    position:fixed; inset:0; z-index:120;
    background:var(--paper);
    overflow-y:auto;
    opacity:0; visibility:hidden;
    transition:opacity .4s ease, visibility .4s;
  }
  .legal-overlay.open{ opacity:1; visibility:visible; }
  .legal-inner{ max-width:720px; margin-inline:auto; padding:6rem clamp(1.4rem,5vw,3rem) 5rem; }
  .legal-close{
    position:fixed; top:1.4rem; right:1.6rem;
    width:44px; height:44px; border-radius:50%;
    border:1px solid var(--hairline);
    background:rgba(251,250,247,.92);
    color:var(--ink); font-size:1.05rem;
    display:flex; align-items:center; justify-content:center;
  }
  .legal-close:hover{ color:var(--gold-deep); }
  .legal-inner h2{ font-size:clamp(1.9rem,4vw,2.6rem); margin:3.5rem 0 1.6rem; }
  .legal-inner h2:first-child{ margin-top:0; }
  .legal-inner h3{ font-size:1.15rem; margin:2.2rem 0 .6rem; }
  .legal-inner p{ margin-bottom:1rem; font-size:.94rem; color:var(--ink-soft); }
  .legal-inner ul{ list-style:disc; padding-left:1.4rem; margin-bottom:1rem; }
  .legal-inner li{ font-size:.94rem; color:var(--ink-soft); }
  .legal-inner a{ color:var(--gold-deep); border-bottom:1px solid rgba(155,143,107,.4); }
  body.legal-open{ overflow:hidden; }

  @media (prefers-reduced-motion: reduce){
    .intro{ display:none !important; }
    .scroll-cue{ display:none !important; }
    header, .hero-sub{ opacity:1 !important; animation:none !important; }
    .line-mask > span{ transform:none !important; animation:none !important; }
    .reveal, .chain-step{ opacity:1 !important; transform:none !important; transition:none !important; }
    .band-media{ transform:none !important; }
  }