@font-face {
    font-family: 'Vereinsserif';
    src: url("../fonts/vereinsserif.woff") format("woff");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Vereinssans';
    src: url("../fonts/vereinssans-400.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Vereinssans';
    src: url("../fonts/vereinssans-500.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Vereinssans';
    src: url("../fonts/vereinssans-700.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Vereinscond';
    src: url("../fonts/vereinscond-400.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Vereinscond';
    src: url("../fonts/vereinscond-700.woff") format("woff");
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
  }

  :root{
    --burgundy: #6B1220;
    --burgundy-deep: #430B14;
    --burgundy-soft: #8A1E2C;
    --gold: #C9A227;
    --gold-light: #E4C767;
    --slate: #4E6B66;
    --cream: #F7F3EA;
    --cream-2: #EFE8D8;
    --ink: #241012;
    --ink-soft: #4A3438;
    --max: 1120px;
    --radius: 2px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }

  body{
    font-family:'Vereinssans', Arial, sans-serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3{font-family:'Vereinsserif', Georgia, serif; font-weight:600; line-height:1.08; letter-spacing:-0.01em;}

  .eyebrow{
    font-family:'Vereinscond', 'Arial Narrow', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.16em;
    font-size:1.05rem;
    font-weight:700;
    color:var(--gold);
    display:flex;
    align-items:center;
    gap:0.7em;
  }
  .eyebrow::before{
    content:'';
    display:inline-block;
    width:40px;
    height:2px;
    background:var(--gold);
  }
  section.on-cream .eyebrow{color:var(--burgundy);}
  section.on-cream .eyebrow::before{background:var(--burgundy);}

  a{color:inherit;}
  img,svg{display:block; max-width:100%;}

  .skip-link{
    position:absolute; left:-999px; top:0; background:var(--gold); color:var(--ink); padding:0.8em 1.2em; z-index:200; font-family:'Vereinscond', 'Arial Narrow', sans-serif; text-transform:uppercase; font-size:0.85rem; letter-spacing:0.08em;
  }
  .skip-link:focus{left:1rem; top:1rem;}

  :focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

  .wrap{max-width:var(--max); margin:0 auto; padding:0 1.5rem;}


  .badge-img{
    background-image:url("../wappen-verein.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    display:block;
  }

  /* ---------- HEADER ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(67,11,20,0.0);
    backdrop-filter:none;
    transition:background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
    padding:1.4rem 0;
  }
  header.scrolled{
    background:rgba(67,11,20,0.94);
    backdrop-filter:blur(6px);
    box-shadow:0 4px 24px rgba(0,0,0,0.25);
    padding:0.8rem 0;
  }
  header .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem;}
  .brand{display:flex; align-items:center; gap:0.7rem; text-decoration:none; color:var(--cream);}
  .brand svg, .brand .badge-img{width:36px; height:36px; flex-shrink:0;}
  .brand-text{font-family:'Vereinscond', 'Arial Narrow', sans-serif; text-transform:uppercase; letter-spacing:0.05em; font-size:0.92rem; line-height:1.15;}
  .brand-text strong{display:block; font-size:1rem; letter-spacing:0.03em;}
  .brand-text span{color:var(--gold-light); font-size:0.72rem; letter-spacing:0.12em;}

  nav.primary{display:flex; align-items:center; gap:1.6rem;}
  /* Auf mittleren Breiten rücken die sechs Punkte enger zusammen,
     damit die Kopfzeile nicht umbricht. */
  @media (min-width: 861px) and (max-width: 1120px){
    nav.primary{gap:1.1rem;}
    nav.primary a{font-size:0.78rem; letter-spacing:0.05em;}
    .nav-cta{padding:0.6rem 1.7rem;}
    .brand-text strong{font-size:0.92rem;}
  }
  nav.primary a{
    font-family:'Vereinscond', 'Arial Narrow', sans-serif; text-transform:uppercase; font-size:0.82rem; letter-spacing:0.08em; color:var(--cream); text-decoration:none; opacity:0.88; position:relative; padding:0.3rem 0;
  }
  nav.primary a:hover{opacity:1;}
  nav.primary a::after{
    content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform 0.25s ease;
  }
  nav.primary a:hover::after{transform:scaleX(1);}
  .nav-cta{
    font-family:'Vereinscond', 'Arial Narrow', sans-serif; text-transform:uppercase; font-size:0.78rem; letter-spacing:0.08em; color:var(--ink); background:var(--gold); padding:0.6rem 2.6rem; text-decoration:none; border-radius:var(--radius); transition:background 0.2s ease; display:inline-block; text-align:center;
  }
  .nav-cta:hover{background:var(--gold-light);}

  .menu-toggle{display:none; background:none; border:none; color:var(--cream); cursor:pointer; padding:0.4rem;}
  .menu-toggle svg{width:26px; height:26px;}

  @media (max-width: 860px){
    nav.primary{
      position:fixed; inset:0 0 0 auto; width:min(78vw, 320px); height:100vh; background:var(--burgundy-deep);
      flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6rem; padding:2rem 2.4rem;
      transform:translateX(100%); transition:transform 0.35s ease; box-shadow:-8px 0 30px rgba(0,0,0,0.4);
    }
    nav.primary.open{transform:translateX(0);}
    nav.primary a{font-size:1.1rem;}
    .menu-toggle{display:block; z-index:110;}
    .nav-cta{margin-top:0.5rem;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    background:
      radial-gradient(ellipse at 85% 15%, rgba(228,199,103,0.10), transparent 55%),
      linear-gradient(165deg, var(--burgundy) 0%, var(--burgundy-deep) 78%);
    color:var(--cream);
    overflow:hidden;
    padding:8rem 0 5rem;
  }
  .hero-grid{
    display:grid; grid-template-columns:1.15fr 0.85fr; gap:3rem; align-items:center; position:relative; z-index:2;
  }
  .hero .eyebrow{color:var(--gold-light); margin-bottom:1.3rem;}
  .hero h1{font-size:clamp(2.4rem, 5.2vw, 4.1rem); color:#fff;}
  .hero h1 em{font-style:normal; color:var(--gold-light);}
  .hero p.lede{font-family:'Vereinssans', Arial, sans-serif; font-size:1.08rem; max-width:46ch; color:#EADFD9; margin-top:1.3rem;}
  .hero-ctas{display:flex; gap:1rem; margin-top:2.3rem; flex-wrap:wrap;}
  .btn{
    font-family:'Vereinscond', 'Arial Narrow', sans-serif; text-transform:uppercase; font-size:0.82rem; letter-spacing:0.08em; padding:0.9rem 1.6rem; text-decoration:none; border-radius:var(--radius); transition:all 0.2s ease; display:inline-flex; align-items:center; justify-content:center; gap:0.5em; text-align:center;
  }
  .btn-primary{background:var(--gold); color:var(--ink);}
  .btn-primary:hover{background:var(--gold-light); transform:translateY(-1px);}
  .btn-ghost{border:1px solid rgba(247,243,234,0.4); color:var(--cream);}
  .btn-ghost:hover{border-color:var(--gold-light); color:var(--gold-light);}

  .hero-badge-wrap{display:flex; justify-content:center; align-items:center; position:relative;}
  .hero-badge-wrap::before{
    content:''; position:absolute; width:78%; aspect-ratio:1; border-radius:50%;
    background:radial-gradient(circle, rgba(228,199,103,0.16) 0%, rgba(228,199,103,0) 70%);
    z-index:0;
  }
  .hero-badge-wrap svg, .hero-badge-wrap .badge-img{width:min(340px, 82%); aspect-ratio:1; position:relative; z-index:1; filter:drop-shadow(0 18px 34px rgba(0,0,0,0.35));}

  .staff-decor{
    position:absolute; left:0; right:0; bottom:2.5rem; opacity:0.5; z-index:1;
  }
  .staff-decor svg{width:100%; height:auto;}
  .staff-decor path.staff-line{
    stroke:rgba(247,243,234,0.22); stroke-width:1; fill:none;
  }
  .note{
    opacity:0; transform:translateY(6px);
    animation:noteIn 0.7s ease forwards;
  }
  @media (prefers-reduced-motion: reduce){ .note{opacity:1; transform:none; animation:none;} }
  @keyframes noteIn{ to{opacity:1; transform:translateY(0);} }

  .scroll-cue{
    position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); z-index:2;
    font-family:'Vereinscond', 'Arial Narrow', sans-serif; font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:rgba(247,243,234,0.55);
    display:flex; flex-direction:column; align-items:center; gap:0.4rem;
  }
  .scroll-cue span.line{width:1px; height:26px; background:rgba(247,243,234,0.4); animation:pulseLine 1.8s ease-in-out infinite;}
  @keyframes pulseLine{0%,100%{transform:scaleY(1); opacity:0.4;} 50%{transform:scaleY(0.5); opacity:0.9;}}
  @media (prefers-reduced-motion: reduce){ .scroll-cue span.line{animation:none;} }

  @media (max-width:860px){
    .hero-grid{grid-template-columns:1fr; text-align:left;}
    .hero-badge-wrap{order:-1; margin-bottom:1rem;}
    .hero-badge-wrap svg, .hero-badge-wrap .badge-img{width:min(220px, 60vw);}
  }

  /* ---------- REVEAL ---------- */
  .reveal{opacity:0; transform:translateY(22px); transition:opacity 0.7s ease, transform 0.7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }

  /* ---------- SECTION GENERIC ---------- */
  section{padding:6.5rem 0;}
  section.on-cream{background:var(--cream);}
  section.on-cream-2{background:var(--cream-2);}
  .section-head{max-width:640px; margin-bottom:3rem;}
  .section-head h2{font-size:clamp(1.9rem, 3.4vw, 2.6rem); margin-top:0.7rem; color:var(--burgundy);}
  .section-head p{margin-top:1rem; color:var(--ink-soft); font-size:1.02rem; max-width:56ch;}

  /* ---------- ÜBER UNS ---------- */
  .about-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:3.5rem; align-items:start;}
  .about-text p{margin-bottom:1.1rem; color:var(--ink-soft); max-width:58ch;}
  .about-text p strong{color:var(--ink); font-weight:600;}

  .values{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:0.5rem;}
  @media (max-width:520px){ .values{grid-template-columns:1fr;} }
  .value-card{
    background:#fff; border:1px solid rgba(107,18,32,0.1); border-left:3px solid var(--burgundy); padding:1.5rem 1.6rem; border-radius:var(--radius);
  }
  .value-card h3{font-size:1.05rem; color:var(--burgundy); margin-bottom:0.4rem; font-weight:600;}
  .value-card p{font-size:0.94rem; color:var(--ink-soft);}

  .instrument-line{margin-top:2.5rem; opacity:0.85;}
  .instrument-line svg{width:100%; max-width:420px; color:var(--gold);}

  /* ---------- TERMINE ---------- */
  section.termine{
    background:var(--burgundy); color:var(--cream); position:relative; overflow:hidden;
  }
  section.termine::before{
    content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 10% 90%, rgba(201,162,39,0.08), transparent 50%);
  }
  section.termine .section-head p{color:#E7D9D3;}
  section.termine .section-head h2{color:#fff;}
  section.termine .eyebrow{color:var(--gold-light);}
  section.termine .eyebrow::before{background:var(--gold-light);}

  .musiktage-teaser{
    position:relative; z-index:1; display:flex; gap:2rem; align-items:center;
    background:rgba(247,243,234,0.06); border:1px solid rgba(247,243,234,0.16);
    border-radius:var(--radius); padding:2rem 2.2rem;
  }
  .musiktage-datum{
    flex-shrink:0; text-align:center; font-family:'Vereinsserif', Georgia, serif;
    color:#fff; line-height:1; padding-right:2rem; border-right:1px solid rgba(247,243,234,0.2);
  }
  .musiktage-datum .tag-zahl{font-size:2.6rem; font-weight:600;}
  .musiktage-datum .bis{font-size:1.3rem; color:var(--gold-light); margin:0 0.1rem;}
  .musiktage-datum .monat{
    display:block; margin-top:0.5rem; font-family:'Vereinscond', 'Arial Narrow', sans-serif;
    text-transform:uppercase; letter-spacing:0.1em; font-size:0.85rem; color:var(--gold-light);
  }
  .musiktage-text h3{font-size:1.35rem; color:#fff; margin-bottom:0.5rem;}
  .musiktage-text p{font-size:0.98rem; color:#E7D9D3; max-width:56ch; margin-bottom:1.2rem;}
  @media (max-width:680px){
    .musiktage-teaser{flex-direction:column; align-items:flex-start; text-align:left; padding:1.8rem;}
    .musiktage-datum{border-right:none; border-bottom:1px solid rgba(247,243,234,0.2); padding-right:0; padding-bottom:1.2rem; width:100%; text-align:left;}
  }

  .probe-note{
    margin-top:2.5rem; padding:1.3rem 1.6rem; border:1px dashed rgba(247,243,234,0.3); border-radius:var(--radius); font-size:0.92rem; color:#E7D9D3; position:relative; z-index:1;
  }
  .probe-note strong{color:var(--gold-light);}

  /* ---------- LIVE-TERMINE (ICS) ---------- */
  .ics-block{margin-top:3.5rem; position:relative; z-index:1;}
  .ics-header{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.8rem; margin-bottom:1.2rem; border-top:1px solid rgba(247,243,234,0.18); padding-top:2.2rem;}
  .ics-header h3{font-family:'Vereinsserif', Georgia, serif; font-size:1.35rem; color:#fff; font-weight:600;}
  .ics-status{font-family:'Vereinscond', 'Arial Narrow', sans-serif; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(247,243,234,0.55); display:flex; align-items:center; gap:0.5em;}
  .ics-status .dot{width:7px; height:7px; border-radius:50%; background:var(--gold-light); display:inline-block;}
  .ics-status.is-error .dot{background:#D96C5A;}

  .ics-list{list-style:none; display:grid; gap:0.6rem;}
  .ics-event{
    display:grid; grid-template-columns:64px 1fr auto; gap:1.1rem; align-items:center;
    background:rgba(247,243,234,0.05); border:1px solid rgba(247,243,234,0.1); border-radius:var(--radius);
    padding:0.9rem 1.1rem; text-decoration:none; color:inherit; transition:background 0.2s ease, border-color 0.2s ease;
  }
  a.ics-event:hover{background:rgba(247,243,234,0.1); border-color:rgba(228,199,103,0.4);}
  .ics-date-badge{
    text-align:center; font-family:'Vereinscond', 'Arial Narrow', sans-serif; color:var(--gold-light); line-height:1.05; border-right:1px solid rgba(247,243,234,0.15); padding-right:0.9rem;
  }
  .ics-date-badge .day{display:block; font-family:'Vereinsserif', Georgia, serif; font-size:1.5rem; color:#fff;}
  .ics-date-badge .month{display:block; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; margin-top:0.15rem;}
  .ics-event-main .title{font-weight:600; font-size:0.98rem; color:#fff;}
  .ics-event-main .meta{font-size:0.84rem; color:#D8C6C0; margin-top:0.2rem; display:flex; gap:0.9rem; flex-wrap:wrap;}
  .ics-event-main .meta svg{width:13px; height:13px; margin-right:0.3em; vertical-align:-2px;}
  .ics-event-arrow{color:var(--gold-light); font-size:1.1rem; opacity:0.6;}

  .ics-empty, .ics-error-msg{
    font-size:0.92rem; color:#E7D9D3; padding:1.3rem 1.6rem; border:1px dashed rgba(247,243,234,0.3); border-radius:var(--radius);
  }
  .ics-error-msg strong{color:var(--gold-light); display:block; margin-bottom:0.3rem;}
  .ics-skeleton{display:grid; gap:0.6rem;}
  .ics-skeleton .bar{height:58px; border-radius:var(--radius); background:linear-gradient(90deg, rgba(247,243,234,0.05) 25%, rgba(247,243,234,0.12) 37%, rgba(247,243,234,0.05) 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite;}
  @keyframes shimmer{0%{background-position:100% 0;} 100%{background-position:0 0;}}
  @media (prefers-reduced-motion: reduce){ .ics-skeleton .bar{animation:none;} }

  .ics-more{margin-top:1rem; font-size:0.85rem; color:#D8C6C0;}

  /* ---------- JUGEND / MUSIKALISCHER PFAD ---------- */
  .pfad{
    list-style:none; margin:0; padding:0;
    display:grid; gap:1.6rem; position:relative;
  }
  .pfad-stufe{
    position:relative; display:grid; grid-template-columns:auto 1fr; gap:1.3rem;
    background:#fff; border:1px solid rgba(107,18,32,0.1);
    border-radius:var(--radius); padding:1.5rem 1.6rem;
  }
  .pfad-nr{
    width:52px; height:52px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    border:2px solid var(--burgundy); border-radius:50%;
    font-family:'Vereinsserif', Georgia, serif; font-size:1.5rem; font-weight:600;
    color:var(--burgundy); background:var(--cream);
  }
  .pfad-text h3{
    font-family:'Vereinsserif', Georgia, serif; font-size:1.2rem; color:var(--burgundy);
    font-weight:600; margin-bottom:0.2rem;
  }
  .pfad-alter{
    font-family:'Vereinscond', 'Arial Narrow', sans-serif; text-transform:uppercase;
    font-size:0.74rem; letter-spacing:0.09em; color:var(--gold); margin-bottom:0.7rem;
  }
  .pfad-fakten{
    list-style:none; margin:0 0 0.7rem; padding:0;
    display:flex; flex-wrap:wrap; gap:0.4rem;
  }
  .pfad-fakten li{
    font-size:0.83rem; color:var(--ink-soft);
    background:var(--cream-2); border-radius:var(--radius);
    padding:0.28rem 0.7rem;
  }
  .pfad-text > p:last-child{font-size:0.94rem; color:var(--ink-soft); max-width:60ch;}

  /* Ab 860px als aufsteigende Bahn mit Verbindungslinie */
  @media (min-width: 860px){
    .pfad{
      grid-template-columns:repeat(4, 1fr); gap:1rem; align-items:stretch;
    }
    .pfad-stufe{
      grid-template-columns:1fr; gap:0.9rem; padding:1.6rem 1.3rem;
    }
    /* Jede Stufe etwas höher als die vorige */
    .pfad-stufe:nth-child(1){margin-top:4.5rem;}
    .pfad-stufe:nth-child(2){margin-top:3rem;}
    .pfad-stufe:nth-child(3){margin-top:1.5rem;}
    .pfad-stufe:nth-child(4){margin-top:0;}
    /* Verbindungslinie zwischen den Nummern */
    .pfad-stufe:not(:last-child)::after{
      content:''; position:absolute; top:2.2rem; right:-1rem; width:1rem;
      border-top:2px dashed rgba(107,18,32,0.25);
    }
  }

  .jugend-cta{
    margin-top:2.2rem; padding:1.7rem 1.9rem; border-radius:var(--radius);
    background:var(--burgundy); color:var(--cream);
    display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  }
  .jugend-cta h3{
    font-family:'Vereinsserif', Georgia, serif; font-size:1.25rem; color:#fff;
    font-weight:600; margin-bottom:0.25rem;
  }
  .jugend-cta p{font-size:0.92rem; color:#E7D9D3;}

  /* ---------- BEITRITTSFORMULAR ---------- */
  .beitritt{
    background:#fff; border:1px solid rgba(107,18,32,0.12); border-radius:var(--radius);
    padding:2.2rem;
  }
  @media (max-width:560px){ .beitritt{padding:1.5rem 1.2rem;} }
  .honeypot{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden;}

  .beitritt fieldset{border:none; margin:0 0 2.2rem;}
  .beitritt fieldset:last-of-type{margin-bottom:0;}
  .beitritt legend{
    font-family:'Vereinsserif', Georgia, serif; font-size:1.12rem; color:var(--burgundy);
    font-weight:600; padding-bottom:0.6rem; margin-bottom:1.1rem;
    border-bottom:1px solid rgba(107,18,32,0.12); width:100%;
  }

  .tarife{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
  @media (max-width:600px){ .tarife{grid-template-columns:1fr;} }
  .tarif input{position:absolute; opacity:0; pointer-events:none;}
  .tarif label{
    display:block; height:100%; cursor:pointer; padding:1.2rem 1.3rem;
    border:2px solid rgba(107,18,32,0.18); border-radius:var(--radius);
    transition:border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  }
  .tarif label:hover{border-color:var(--burgundy-soft); background:var(--cream);}
  .tarif input:checked + label{
    border-color:var(--burgundy); background:var(--cream);
    box-shadow:0 0 0 3px rgba(107,18,32,0.08);
  }
  .tarif input:focus-visible + label{outline:2px solid var(--gold); outline-offset:2px;}
  .tarif-name{display:block; font-family:'Vereinsserif', Georgia, serif; font-size:1.08rem; font-weight:600; color:var(--burgundy);}
  .tarif-preis{display:block; font-family:'Vereinsserif', Georgia, serif; font-size:1.65rem; color:var(--ink); margin:0.25rem 0 0.15rem;}
  .tarif-preis small{font-size:0.8rem; color:var(--ink-soft); font-family:'Vereinssans', Arial, sans-serif;}
  .tarif-info{display:block; font-size:0.85rem; color:var(--ink-soft);}

  .beitritt .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
  .beitritt .grid-plz{display:grid; grid-template-columns:0.55fr 1.45fr; gap:1rem;}
  @media (max-width:600px){
    .beitritt .grid-2, .beitritt .grid-plz{grid-template-columns:1fr;}
  }
  .beitritt .form-row{display:grid; gap:0.35rem; margin-bottom:1rem;}
  .beitritt label{
    font-family:'Vereinscond', 'Arial Narrow', sans-serif; font-size:0.75rem;
    text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft);
  }
  .beitritt input[type="text"], .beitritt input[type="email"], .beitritt input[type="tel"],
  .beitritt input[type="date"], .beitritt textarea{
    font-family:'Vereinssans', Arial, sans-serif; font-size:0.98rem; padding:0.75rem 0.9rem;
    border:1px solid rgba(36,16,18,0.2); border-radius:var(--radius);
    background:var(--cream); color:var(--ink); width:100%;
  }
  .beitritt input:focus, .beitritt textarea:focus{outline:none; border-color:var(--burgundy);}
  .pflicht{color:var(--burgundy); font-weight:700;}

  .wunsch{display:grid; gap:0.55rem; margin-top:0.2rem;}
  .check{
    display:flex; gap:0.7rem; align-items:flex-start; cursor:pointer;
    font-family:'Vereinssans', Arial, sans-serif; font-size:0.94rem;
    text-transform:none; letter-spacing:0; color:var(--ink);
  }
  .check input{margin-top:0.2rem; width:17px; height:17px; accent-color:var(--burgundy); flex-shrink:0;}

  .bedingt{
    border-left:3px solid var(--gold); background:var(--cream);
    padding:1.1rem 1.2rem 0.3rem; border-radius:var(--radius); margin-bottom:1.2rem;
  }
  .bedingt-titel{
    font-family:'Vereinscond', 'Arial Narrow', sans-serif; font-size:0.72rem;
    text-transform:uppercase; letter-spacing:0.09em; color:var(--gold); font-weight:700;
    margin-bottom:0.7rem;
  }

  .sepa-info{
    background:var(--cream); border:1px dashed rgba(107,18,32,0.3); border-radius:var(--radius);
    padding:1.1rem 1.2rem; font-size:0.9rem; color:var(--ink-soft); margin-bottom:1.3rem;
  }
  .sepa-info strong{color:var(--ink);}
  .datenschutz-check{margin-bottom:1.4rem;}
  .datenschutz-check a{color:var(--burgundy); text-decoration:underline; cursor:pointer;}
  .recaptcha-wrap{margin-bottom:1.4rem;}
  .recaptcha-wrap iframe{max-width:100%;}
  .beitritt-submit{
    font-family:'Vereinscond', 'Arial Narrow', sans-serif; text-transform:uppercase;
    letter-spacing:0.08em; font-size:0.88rem; background:var(--burgundy); color:#fff;
    border:none; padding:0.95rem 2rem; border-radius:var(--radius); cursor:pointer;
    transition:background 0.2s ease; text-align:center;
  }
  .beitritt-submit:hover{background:var(--burgundy-soft);}

  /* ---------- ANFAHRT / KARTE ---------- */
  .anfahrt{margin-top:3.5rem;}
  .anfahrt-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:1.2rem;
    flex-wrap:wrap; margin-bottom:1.1rem;
  }
  .anfahrt-head h3{
    font-family:'Vereinsserif', Georgia, serif; font-size:1.25rem; color:var(--burgundy);
    font-weight:600; margin-bottom:0.2rem;
  }
  .anfahrt-head p{font-size:0.94rem; color:var(--ink-soft);}
  .btn-outline{
    border:1px solid var(--burgundy); color:var(--burgundy); background:transparent;
  }
  .btn-outline:hover{background:var(--burgundy); color:#fff;}

  .map-consent, .map-frame{
    border-radius:var(--radius); overflow:hidden; border:1px solid rgba(107,18,32,0.15);
    height:340px; width:100%;
  }
  .map-consent{
    background:
      repeating-linear-gradient(45deg, rgba(107,18,32,0.03) 0 12px, transparent 12px 24px),
      var(--cream-2);
    display:flex; align-items:center; justify-content:center; text-align:center; padding:1.5rem;
  }
  .map-consent-inner{max-width:44ch; display:flex; flex-direction:column; align-items:center; gap:0.9rem;}
  .map-consent-inner svg{width:34px; height:34px; color:var(--burgundy); opacity:0.7;}
  .map-consent-inner p{font-size:0.9rem; color:var(--ink-soft);}
  .map-frame{border:0; display:block;}
  .map-frame iframe{width:100%; height:100%; border:0; display:block;}
  .map-hint{margin-top:0.6rem; font-size:0.8rem; color:var(--ink-soft); opacity:0.8;}
  @media (max-width:560px){
    .map-consent, .map-frame{height:280px;}
  }

  /* ---------- CHRONIK ---------- */
  .chronik{
    list-style:none; position:relative; margin:0; padding:0 0 0 1.2rem;
    border-left:2px solid rgba(107,18,32,0.18);
  }
  .chronik-item{
    position:relative; padding:0 0 2.2rem 1.6rem;
  }
  .chronik-item:last-child{padding-bottom:0;}
  .chronik-item::before{
    content:''; position:absolute; left:-1.75rem; top:0.35rem;
    width:11px; height:11px; border-radius:50%;
    background:var(--burgundy); border:2px solid var(--cream-2);
  }
  .chronik-item .jahr{
    display:inline-block; font-family:'Vereinscond', 'Arial Narrow', sans-serif;
    font-size:0.95rem; letter-spacing:0.1em; color:var(--gold);
    background:var(--burgundy); padding:0.15rem 0.7rem; border-radius:var(--radius);
    margin-bottom:0.5rem;
  }
  .chronik-item h3{
    font-family:'Vereinsserif', Georgia, serif; font-size:1.12rem; color:var(--burgundy);
    font-weight:600; margin-bottom:0.35rem;
  }
  .chronik-item p{font-size:0.94rem; color:var(--ink-soft); max-width:62ch;}
  .chronik-item p a{color:var(--burgundy); text-decoration:underline; text-decoration-color:rgba(107,18,32,0.35); text-underline-offset:0.15em;}
  .chronik-item p a:hover{text-decoration-color:var(--burgundy);}
  .chronik-item em{font-style:italic;}

  @media (min-width: 760px){
    .chronik{padding-left:6.5rem;}
    .chronik-item{padding-left:2rem;}
    .chronik-item .jahr{
      position:absolute; left:-8.5rem; top:0.1rem; width:5.2rem; text-align:center; margin:0;
    }
    .chronik-item::before{left:-2.15rem;}
  }

  /* ---------- VORSTAND ---------- */
  /* ---------- HAUPTORCHESTER ---------- */
  .ho-grid{display:grid; grid-template-columns:1.3fr 0.9fr; gap:3.2rem; align-items:start;}
  @media (max-width:820px){ .ho-grid{grid-template-columns:1fr; gap:2rem;} }

  .ho-text .eyebrow{color:var(--burgundy);}
  .ho-text .eyebrow::before{background:var(--burgundy);}
  .ho-text h2{font-size:clamp(1.8rem, 3.2vw, 2.4rem); color:var(--burgundy); margin-bottom:1.1rem;}
  .ho-text p{font-size:1rem; color:var(--ink-soft); max-width:62ch; margin-bottom:1.1rem;}
  .ho-text strong{color:var(--ink);}
  .btn-link{
    display:inline-flex; align-items:center; gap:0.5em; margin-top:0.6rem;
    font-family:'Vereinscond', 'Arial Narrow', sans-serif; text-transform:uppercase;
    font-size:0.85rem; letter-spacing:0.07em; color:var(--burgundy); text-decoration:none;
    border-bottom:2px solid var(--gold); padding-bottom:0.2rem; transition:color 0.2s ease;
  }
  .btn-link:hover{color:var(--burgundy-soft);}

  .ho-fakten{display:flex; flex-direction:column; gap:2rem;}

  /* Große Kennzahl als Blickfang */
  .ho-stat{
    display:flex; align-items:baseline; gap:1.1rem;
    border-bottom:2px solid var(--gold); padding-bottom:1.4rem;
  }
  .ho-stat-zahl{
    font-family:'Vereinsserif', Georgia, serif; font-size:4.2rem; line-height:1;
    color:var(--burgundy); font-weight:600;
  }
  .ho-stat-text{
    font-family:'Vereinscond', 'Arial Narrow', sans-serif; text-transform:uppercase;
    letter-spacing:0.05em; font-size:0.95rem; color:var(--ink-soft); line-height:1.35;
  }

  /* Kompakte Liste mit Icons statt gleichförmiger Karten */
  .ho-liste{list-style:none; display:grid; gap:1.4rem;}
  .ho-liste li{display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start;}
  .ho-liste svg{
    width:22px; height:22px; color:var(--gold); flex-shrink:0; margin-top:0.15rem;
  }
  .ho-l-label{
    display:block; font-family:'Vereinscond', 'Arial Narrow', sans-serif; text-transform:uppercase;
    font-size:0.7rem; letter-spacing:0.1em; color:var(--gold); margin-bottom:0.2rem;
  }
  .ho-l-wert{font-size:1.02rem; color:var(--ink);}
  .ho-l-wert em{font-style:normal; display:block; font-size:0.85rem; color:var(--ink-soft); margin-top:0.1rem;}

  /* ---------- VEREINSMARSCH ---------- */
  .marsch-box{
    margin-top:2.8rem; padding-top:2.4rem; border-top:1px solid rgba(107,18,32,0.14);
    display:grid; grid-template-columns:1.2fr 1fr; gap:2.4rem; align-items:center;
  }
  @media (max-width:820px){ .marsch-box{grid-template-columns:1fr; gap:1.6rem;} }

  .marsch-label{
    display:block; font-family:'Vereinscond', 'Arial Narrow', sans-serif; text-transform:uppercase;
    font-size:0.72rem; letter-spacing:0.1em; color:var(--gold); margin-bottom:0.4rem;
  }
  .marsch-text h3{font-family:'Vereinsserif', Georgia, serif; font-size:1.3rem; color:var(--burgundy); margin-bottom:0.6rem;}
  .marsch-text p{font-size:0.94rem; color:var(--ink-soft); max-width:56ch; margin:0;}
  .marsch-text p a{color:var(--burgundy); text-decoration:underline; text-decoration-color:rgba(107,18,32,0.35);}
  .marsch-text p a:hover{text-decoration-color:var(--burgundy);}

  .marsch-links{display:grid; gap:0.7rem;}
  .marsch-noten-row{display:grid; grid-template-columns:1fr 1fr; gap:0.7rem;}
  @media (max-width:480px){ .marsch-noten-row{grid-template-columns:1fr;} }

  .marsch-link{
    display:flex; align-items:center; gap:0.8rem;
    background:#fff; border:1px solid rgba(107,18,32,0.12); border-radius:var(--radius);
    padding:0.8rem 1.1rem; text-decoration:none; color:var(--ink);
    font-family:'Vereinscond', 'Arial Narrow', sans-serif; text-transform:uppercase;
    font-size:0.82rem; letter-spacing:0.04em; transition:border-color 0.18s ease, background 0.18s ease;
  }
  .marsch-link:hover{border-color:var(--gold); background:var(--cream);}
  .marsch-link svg{width:19px; height:19px; color:var(--gold); flex-shrink:0;}
  .marsch-link span{
    font-family:'Vereinssans', Arial, sans-serif; text-transform:none; letter-spacing:0;
    font-size:0.8rem; color:var(--ink-soft); margin-left:auto; padding-left:0.6rem; text-align:right;
  }

  /* Schmalere Noten-Kacheln: Beschriftung untereinander statt nebeneinander */
  .marsch-link-noten{justify-content:flex-start;}
  .marsch-link-text{display:flex; flex-direction:column; line-height:1.3;}
  .marsch-link-text span{
    font-family:'Vereinssans', Arial, sans-serif; text-transform:none; letter-spacing:0;
    font-size:0.76rem; color:var(--ink-soft); margin:0.1rem 0 0; padding:0; text-align:left;
  }

  /* Streaming-Reihe: dunkle Pillen-Badges mit farbigem Icon-Kreis je Plattform */
  .marsch-anhoeren-label{
    font-family:'Vereinscond', 'Arial Narrow', sans-serif; text-transform:uppercase;
    font-size:0.72rem; letter-spacing:0.1em; color:var(--gold); margin-bottom:0.6rem;
  }
  .marsch-streaming-row{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:0.65rem; margin-bottom:1.1rem;
  }
  @media (max-width:420px){ .marsch-streaming-row{grid-template-columns:1fr;} }

  .badge-stream{
    display:flex; align-items:center; gap:0.65rem;
    background:var(--ink); border-radius:999px; padding:0.5rem 1rem 0.5rem 0.5rem;
    text-decoration:none; transition:transform 0.15s ease, box-shadow 0.15s ease;
  }
  .badge-stream:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(36,16,18,0.28);}
  .badge-icon{
    width:30px; height:30px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .badge-icon svg{width:100%; height:100%;}
  .badge-text{display:flex; flex-direction:column; line-height:1.2; min-width:0;}
  .badge-text span{
    font-family:'Vereinssans', Arial, sans-serif; font-size:0.66rem; color:rgba(247,243,234,0.6);
  }
  .badge-text strong{
    font-family:'Vereinssans', Arial, sans-serif; font-weight:700; font-size:0.86rem; color:#fff;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  /* Markenfarben je Icon-Kreis */
  .badge-spotify .badge-icon{color:#1DB954;}
  .badge-applemusic .badge-icon{color:#FA233B;}
  .badge-amazonmusic .badge-icon{color:#25D1DA;}
  .badge-youtubemusic .badge-icon{color:#FF0000;}

  .vorstand-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1rem;
  }
  .vorstand-card{
    background:#fff; border:1px solid rgba(107,18,32,0.1); border-left:3px solid var(--burgundy);
    padding:1.1rem 1.3rem; border-radius:var(--radius);
    display:flex; flex-direction:column; gap:0.25rem;
  }
  .vorstand-card .amt, .vorstand-beisitzer .amt{
    font-family:'Vereinscond', 'Arial Narrow', sans-serif; text-transform:uppercase;
    font-size:0.72rem; letter-spacing:0.1em; color:var(--burgundy);
  }
  .vorstand-card .name{
    font-family:'Vereinsserif', Georgia, serif; font-size:1.08rem; color:var(--ink); font-weight:600;
  }
  .vorstand-card .name em{font-style:normal; font-weight:400; font-size:0.85rem; color:var(--ink-soft); margin-left:0.4em;}
  .vorstand-beisitzer{
    margin-top:1rem; padding:1.1rem 1.3rem; border-radius:var(--radius);
    background:#fff; border:1px solid rgba(107,18,32,0.1); border-left:3px solid var(--burgundy);
    display:flex; flex-direction:column; gap:0.25rem;
  }
  .vorstand-beisitzer .name{font-size:1rem; color:var(--ink-soft);}
  .vorstand-hinweis{
    margin-top:1.6rem; font-size:0.9rem; color:var(--ink-soft);
  }
  .vorstand-hinweis a{color:var(--burgundy); text-decoration:underline; text-decoration-color:rgba(107,18,32,0.35);}

  /* ---------- KALENDER ABONNIEREN ---------- */
  .ics-subscribe{
    margin-top:2.5rem; padding:1.6rem 1.8rem; position:relative; z-index:1;
    border:1px solid rgba(228,199,103,0.35); border-radius:var(--radius);
    background:rgba(247,243,234,0.04);
    display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  }
  .ics-subscribe h4{
    font-family:'Vereinsserif', Georgia, serif; font-size:1.1rem; color:#fff; font-weight:600; margin-bottom:0.3rem;
  }
  .ics-subscribe p{font-size:0.88rem; color:#D8C6C0; max-width:46ch;}
  .ics-subscribe-actions{display:flex; gap:0.7rem; flex-wrap:wrap; align-items:center;}
  .ics-subscribe .btn svg{width:16px; height:16px;}
  .ics-subscribe .btn-ghost{cursor:pointer; font-family:'Vereinscond', 'Arial Narrow', sans-serif; background:transparent;}
  .ics-copy-feedback{font-size:0.82rem; color:var(--gold-light); align-self:center;}

  /* Zunächst ausgeblendete Termine: bleiben im Dokument (für Suchmaschinen),
     werden aber erst nach Klick auf den Button sichtbar. */
  .ics-list li.ics-hidden{display:none;}
  .ics-list li.ics-hidden.ics-revealed{display:block; animation:icsFadeIn 0.3s ease;}
  @keyframes icsFadeIn{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);}}
  @media (prefers-reduced-motion: reduce){ .ics-list li.ics-hidden.ics-revealed{animation:none;} }

  .ics-toggle{
    margin-top:1.1rem; font-family:'Vereinscond', 'Arial Narrow', sans-serif; text-transform:uppercase;
    font-size:0.8rem; letter-spacing:0.1em; color:var(--gold-light);
    background:transparent; border:1px solid rgba(228,199,103,0.45); border-radius:var(--radius);
    padding:0.75rem 1.5rem; cursor:pointer; transition:background 0.2s ease, border-color 0.2s ease;
    text-align:center;
  }
  .ics-toggle:hover{background:rgba(228,199,103,0.12); border-color:var(--gold-light);}
  @media (max-width:560px){
    .ics-event{grid-template-columns:52px 1fr; }
    .ics-event-arrow{display:none;}
  }

  /* ---------- KONTAKT ---------- */
  .contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:3.5rem;}
  .contact-info dl{display:grid; gap:1.5rem;}
  .contact-info dt{font-family:'Vereinscond', 'Arial Narrow', sans-serif; text-transform:uppercase; font-size:0.75rem; letter-spacing:0.1em; color:var(--burgundy); margin-bottom:0.3rem;}
  .contact-info dd a{text-decoration:none; border-bottom:1px solid transparent; transition:border-color 0.2s ease;}
  .contact-info dd a:hover{border-color:var(--burgundy);}
  .socials{display:flex; gap:0.9rem; margin-top:2rem;}
  .socials a{
    width:38px; height:38px; border-radius:50%; border:1px solid rgba(107,18,32,0.25); display:flex; align-items:center; justify-content:center; color:var(--burgundy); text-decoration:none; transition:all 0.2s ease;
  }
  .socials a:hover{background:var(--burgundy); color:#fff;}
  .socials svg{width:17px; height:17px;}

  form.contact-form{display:grid; gap:1.2rem; background:#fff; padding:2.2rem; border-radius:var(--radius); border:1px solid rgba(107,18,32,0.12);}
  .form-row{display:grid; gap:0.4rem;}
  .form-row label{font-family:'Vereinscond', 'Arial Narrow', sans-serif; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft);}
  .form-row input, .form-row textarea{
    font-family:'Vereinssans', Arial, sans-serif; font-size:0.98rem; padding:0.8rem 0.9rem; border:1px solid rgba(36,16,18,0.18); border-radius:var(--radius); background:var(--cream); color:var(--ink);
  }
  .form-row input:focus, .form-row textarea:focus{border-color:var(--burgundy);}
  form.contact-form button{
    justify-self:start; font-family:'Vereinscond', 'Arial Narrow', sans-serif; text-transform:uppercase; letter-spacing:0.08em; font-size:0.85rem; background:var(--burgundy); color:#fff; border:none; padding:0.9rem 1.8rem; border-radius:var(--radius); cursor:pointer; transition:background 0.2s ease;
  }
  form.contact-form button:hover{background:var(--burgundy-soft);}
  .form-hint{font-size:0.8rem; color:var(--ink-soft); opacity:0.75;}

  @media (max-width:860px){
    .about-grid, .contact-grid{grid-template-columns:1fr;}
  }

  /* ---------- FOOTER ---------- */
  footer{background:var(--ink); color:rgba(247,243,234,0.65); padding:2.6rem 0;}
  footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;}
  footer .foot-brand{display:flex; align-items:center; gap:0.6rem; font-family:'Vereinscond', 'Arial Narrow', sans-serif; text-transform:uppercase; font-size:0.78rem; letter-spacing:0.06em; color:rgba(247,243,234,0.85);}
  footer .foot-brand svg, footer .foot-brand .badge-img{width:24px; height:24px;}
  footer .foot-links{display:flex; gap:1.5rem; font-size:0.82rem;}
  footer .foot-links a{text-decoration:none; color:inherit; cursor:pointer; background:none; border:none; font:inherit; padding:0;}
  footer .foot-links a:hover{color:var(--gold-light);}

  /* ---------- ORTE-LAUFBAND ---------- */
  .orte-band{
    background:var(--burgundy-deep); color:var(--cream);
    padding:2.6rem 0 2.9rem; overflow:hidden;
  }
  .orte-eyebrow{color:var(--gold-light); margin-bottom:1.3rem;}
  .orte-eyebrow::before{background:var(--gold-light);}

  /* Unter 900px ist das Band horizontal wischbar - mit Einrasten,
     Schwung und ausgeblendeter Scrollleiste, wie auf dem Smartphone gewohnt. */
  .marquee{
    position:relative;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -ms-overflow-style:none;
    overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    cursor:grab;
  }
  .marquee::-webkit-scrollbar{display:none;}
  .marquee-track{
    display:flex; align-items:center; gap:2.4rem; width:max-content;
    padding-inline:42vw;
  }
  .marquee-item{scroll-snap-align:center;}

  @media (prefers-reduced-motion: reduce){
    .marquee{overflow-x:visible; scroll-snap-type:none; mask-image:none; -webkit-mask-image:none;}
    .marquee-track{flex-wrap:wrap; width:auto; justify-content:center; gap:1.2rem 2rem; padding-inline:0;}
  }

  /* Ab 900px passen alle vier Orte nebeneinander: dann kein Wischen mehr,
     sondern eine ruhige, zentrierte Reihe ohne Wiederholungen. */
  @media (min-width: 900px){
    .marquee{overflow-x:visible; scroll-snap-type:none; cursor:auto;
      mask-image:none; -webkit-mask-image:none;}
    .marquee-track{
      width:auto; justify-content:center; gap:3.5rem; padding-inline:0;
    }
    .marquee-track > .marquee-sep:last-child{display:none;}
  }

  .marquee-item{
    white-space:nowrap; font-size:0.85rem; color:#D8C6C0;
    display:inline-flex; flex-direction:column; align-items:center; gap:0.55em;
    text-align:center; text-decoration:none; transition:color 0.2s ease;
  }
  a.marquee-item:hover{color:#fff;}
  a.marquee-item:hover strong{color:var(--gold-light);}
  .marquee-item strong{
    font-family:'Vereinsserif', Georgia, serif; font-size:1.15rem; font-weight:600; color:#fff; letter-spacing:-0.01em;
    transition:color 0.2s ease; display:block; margin-bottom:0.15em;
  }
  .ort-text{display:flex; flex-direction:column; align-items:center; line-height:1.25;}
  .marquee-sep{color:var(--gold); font-size:1.1rem; opacity:0.8; align-self:center;}


  .wappen{
    width:52px; height:58px; flex-shrink:0;
    background-size:contain; background-repeat:no-repeat; background-position:center;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,0.4));
    transition:transform 0.2s ease;
  }
  a.marquee-item:hover .wappen{transform:translateY(-2px) scale(1.06);}
  .wappen-bietzen{background-image:url("../wappen-bietzen.png");}
  .wappen-harlingen{background-image:url("../wappen-harlingen.png");}
  .wappen-menningen{background-image:url("../wappen-menningen.png");}
  .wappen-merzig{background-image:url("../wappen-merzig.png");}

  /* ---------- LEGAL MODALS (Impressum / Datenschutz) ---------- */
  .modal-overlay{
    position:fixed; inset:0; z-index:300; background:rgba(36,16,18,0.72); backdrop-filter:blur(3px);
    display:flex; align-items:flex-start; justify-content:center; padding:5vh 1.2rem;
    opacity:0; pointer-events:none; transition:opacity 0.25s ease;
  }
  .modal-overlay.open{opacity:1; pointer-events:auto;}
  .modal-box{
    background:var(--cream); color:var(--ink); max-width:720px; width:100%; max-height:88vh; overflow-y:auto;
    border-radius:var(--radius); box-shadow:0 30px 70px rgba(0,0,0,0.4);
    transform:translateY(14px); transition:transform 0.25s ease;
  }
  .modal-overlay.open .modal-box{transform:translateY(0);}
  .modal-head{
    position:sticky; top:0; background:var(--burgundy); color:#fff; padding:1.3rem 1.6rem;
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
  }
  .modal-head h2{font-size:1.3rem; color:#fff;}
  .modal-close{
    background:rgba(247,243,234,0.12); border:none; color:#fff; width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background 0.2s ease;
  }
  .modal-close:hover{background:rgba(247,243,234,0.24);}
  .modal-close svg{width:16px; height:16px;}
  .modal-body{padding:1.8rem 1.8rem 2.2rem;}
  .modal-body h3{font-family:'Vereinsserif', Georgia, serif; font-size:1.08rem; color:var(--burgundy); margin:1.5rem 0 0.5rem;}
  .modal-body h3:first-child{margin-top:0;}
  .modal-body p{font-size:0.92rem; color:var(--ink-soft); margin-bottom:0.9rem;}
  .modal-body ul{margin:0 0 0.9rem 1.2rem; font-size:0.92rem; color:var(--ink-soft);}
  .modal-body li{margin-bottom:0.3rem;}
  .modal-body a{color:var(--burgundy); text-decoration:underline; text-decoration-color:rgba(107,18,32,0.35);}
  .modal-body strong{color:var(--ink);}
  .modal-body .legal-meta{font-size:0.92rem; color:var(--ink-soft); line-height:1.7;}

  ::selection{background:var(--gold); color:var(--ink);}