:root{
    --ink:#141210;
    --ink-soft:#1f1c19;
    --paper:#f2ead9;
    --paper-dim:#e6dcc6;
    --red:#c31e2c;
    --red-dark:#8f1620;
    --magenta:#c81457;
    --amber:#e8a33d;
    --slate:#4b5768;
    --line: rgba(242,234,217,0.14);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ink);
    color:var(--paper);
    font-family:'Barlow', sans-serif;
    font-weight:500;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

  h1,h2,h3{font-family:'Anton', sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:0.5px; line-height:0.92;}

  .eyebrow{
    font-family:'Barlow', sans-serif; font-weight:700;
    font-size:13px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--amber);
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{content:""; width:22px; height:2px; background:var(--amber);}

  a{color:inherit;}

  /* ===== torn paper divider ===== */
  .torn{
    height:34px;
    width:100%;
    background:var(--ink);
    clip-path: polygon(0% 100%,3% 30%,7% 90%,11% 20%,15% 75%,19% 10%,23% 60%,27% 5%,31% 85%,35% 25%,39% 70%,43% 15%,47% 95%,51% 35%,55% 80%,59% 10%,63% 65%,67% 5%,71% 90%,75% 30%,79% 75%,83% 15%,87% 60%,91% 5%,95% 85%,100% 40%,100% 100%);
  }
  .torn.flip{transform:rotate(180deg);}
  .torn.on-paper{background:var(--paper);}

  /* ===== header ===== */
  header{
    position:fixed; top:5px; left:0; right:0; z-index:100;
    /* Kein flächiger Balken: weicher Verlauf von oben, unten komplett transparent.
       Scheinwerfer bleiben sichtbar, Nav bleibt über hellem Inhalt lesbar. */
    background:linear-gradient(180deg, rgba(20,18,16,0.92) 0%, rgba(20,18,16,0.75) 55%, rgba(20,18,16,0) 100%);
    border-bottom:none;
    pointer-events:none;
  }
  header .wrap > *{pointer-events:auto;}
  header .wrap{display:flex; align-items:center; justify-content:space-between; height:88px;}
  .logo-mark{
    display:flex; align-items:center; text-decoration:none; color:var(--paper);
  }
  .wordmark-img{height:72px; width:auto; display:block;}

  /* ===== hero stamp badge =====
     Zwei Ebenen aus eurem echten Logo extrahiert (aus dem GIF):
     - stamp-ring-img: nur der Zacken-Kranz, rotiert endlos
     - stamp-core-img: Kreis + Banderole + Text, bleibt fest stehen */
  .stamp{
    position:absolute; top:360px; right:6%;
    width:360px; height:360px;
  }
  .stamp-gif{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:contain;
    filter:drop-shadow(0 6px 18px rgba(0,0,0,0.45));
  }
  /* Ring-Rotation ist an den Scroll-Fortschritt gekoppelt (siehe JS), keine CSS-Endlosanimation mehr,
     da diese auf manchen iOS-Browsern nicht zuverlässig lief. */
  nav ul{list-style:none; display:flex; gap:34px;}
  nav a{
    text-decoration:none; font-family:'Barlow', sans-serif; font-weight:700; font-size:13px;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--paper);
    padding-bottom:4px; border-bottom:2px solid transparent; transition:border-color .2s;
  }
  nav a:hover{border-color:var(--red);}
  .nav-cta{
    background:var(--red); color:var(--paper) !important; padding:10px 18px;
    border-bottom:none !important; font-weight:700;
  }
  .nav-toggle{display:none;}

  /* ===== hero ===== */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex; align-items:flex-end;
    padding-top:76px;
    background:var(--ink);
    overflow:hidden;
  }
  .hero-bg{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center 38%;
  }
  .hero-scrim{
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(200,20,87,0.22), transparent 55%),
      linear-gradient(180deg, rgba(20,18,16,0.55) 0%, rgba(20,18,16,0.5) 40%, var(--ink) 96%);
  }
  /* ===== warm duotone treatment for photos (keeps mixed photo sources consistent) ===== */
  .photo-duotone{
    filter:sepia(0.45) saturate(1.6) hue-rotate(-12deg) brightness(0.92) contrast(1.08);
  }
  .stamp .yr{font-family:'Anton'; font-size:20px; color:var(--amber);}

  /* ===== stage spotlights (hero) ===== */
  .spotlights{position:absolute; inset:0; overflow:hidden; z-index:1; pointer-events:none;}
  .beam{
    position:absolute; top:-6%; width:26vw; max-width:340px; height:150%;
    transform-origin:top center;
    clip-path:polygon(46% 0%, 54% 0%, 100% 100%, 0% 100%);
    mix-blend-mode:screen;
    opacity:0.55;
    animation:sway 7s ease-in-out infinite;
  }
  .beam.b1{left:2%;  background:linear-gradient(180deg, rgba(232,163,61,0.85), rgba(232,163,61,0) 75%); animation-duration:8.5s;}
  .beam.b2{left:24%; background:linear-gradient(180deg, rgba(200,20,87,0.75), rgba(200,20,87,0) 75%); animation-duration:6.5s; animation-delay:-2s;}
  .beam.b3{right:24%;background:linear-gradient(180deg, rgba(243,238,224,0.55), rgba(243,238,224,0) 75%); animation-duration:9.5s; animation-delay:-4s;}
  .beam.b4{right:2%; background:linear-gradient(180deg, rgba(195,30,44,0.75), rgba(195,30,44,0) 75%); animation-duration:7.5s; animation-delay:-1s;}
  @keyframes sway{
    0%,100%{ transform:rotate(-16deg); }
    50%{ transform:rotate(14deg); }
  }
  @media (prefers-reduced-motion: reduce){ .beam{animation:none; transform:rotate(-4deg);} }

  /* ===== string lights (Lichterkette) divider =====
     Kabel + Lampen werden per JS passend zur Bildschirmbreite erzeugt,
     damit die Bögen überall gleich proportioniert sind und die Lampen rund bleiben. */
  .lichterkette{position:relative; height:72px; background:var(--ink); overflow:hidden;}
  .lichterkette .wire{position:absolute; inset:0; width:100%; height:100%;}
  .lichterkette .bulb{
    position:absolute; width:11px; height:15px;
    border-radius:50% 50% 52% 52% / 42% 42% 58% 58%;
    transform:translate(-50%, 0);
    animation:flicker 2.8s ease-in-out infinite;
  }
  /* Fassung: kleines Käppchen zwischen Kabel und Lampe */
  .lichterkette .bulb::before{
    content:""; position:absolute; left:50%; top:-5px; transform:translateX(-50%);
    width:5px; height:6px; border-radius:2px 2px 1px 1px;
    background:#5a5245;
  }
  /* Glanzlicht auf dem Glas */
  .lichterkette .bulb::after{
    content:""; position:absolute; left:26%; top:26%;
    width:3px; height:4px; border-radius:50%;
    background:rgba(255,255,255,0.55);
  }
  .lichterkette .bulb.amber  {background:#e8a33d; box-shadow:0 0 10px 2px rgba(232,163,61,0.55);}
  .lichterkette .bulb.red    {background:#c31e2c; box-shadow:0 0 10px 2px rgba(195,30,44,0.5);}
  .lichterkette .bulb.magenta{background:#c81457; box-shadow:0 0 10px 2px rgba(200,20,87,0.5);}
  .lichterkette .bulb:nth-child(3n){animation-delay:-0.7s;}
  .lichterkette .bulb:nth-child(4n){animation-delay:-1.5s;}
  .lichterkette .bulb:nth-child(5n){animation-delay:-2.1s;}
  @keyframes flicker{
    0%,100%{ opacity:1; }
    50%{ opacity:0.62; }
  }
  @media (prefers-reduced-motion: reduce){ .lichterkette .bulb{animation:none;} }

  /* ===== scroll-progress string lights bar (oben) =====
     Echte kleine Lampen an einem Kabel statt gestreckter Balken. */
  .scroll-lights{
    position:fixed; top:0; left:0; right:0; height:13px; z-index:200;
    display:flex; align-items:flex-start; justify-content:space-between;
    padding:0 6px; pointer-events:none;
    background:linear-gradient(180deg, rgba(20,18,16,0.9) 0%, rgba(20,18,16,0.0) 100%);
  }
  /* das Kabel */
  .scroll-lights::before{
    content:""; position:absolute; left:0; right:0; top:3px; height:1px;
    background:rgba(120,110,95,0.75);
  }
  .scroll-lights i{
    position:relative; width:6px; height:8px; margin-top:4px; flex:0 0 auto;
    border-radius:50% 50% 52% 52% / 42% 42% 58% 58%;
    background:rgba(242,234,217,0.13);
    transition:background .2s ease, box-shadow .2s ease;
  }
  .scroll-lights i::before{
    content:""; position:absolute; left:50%; top:-3px; transform:translateX(-50%);
    width:3px; height:3px; border-radius:1px; background:#5a5245;
  }
  .scroll-lights i.lit{background:var(--amber); box-shadow:0 0 7px 1.5px rgba(232,163,61,0.85);}
  .scroll-lights i.lit:nth-child(3n){background:var(--magenta); box-shadow:0 0 7px 1.5px rgba(200,20,87,0.85);}
  .scroll-lights i.lit:nth-child(5n){background:var(--red); box-shadow:0 0 7px 1.5px rgba(195,30,44,0.85);}

  .hero-content{position:relative; z-index:2; padding-bottom:64px; width:100%;}
  .hero-content .eyebrow{margin-bottom:18px;}
  .hero h1{
    font-size:clamp(56px, 11vw, 148px);
    color:var(--paper);
  }
  .hero h1 span{color:var(--red);}
  .hero .sub{
    display:flex; flex-wrap:wrap; gap:10px 28px; align-items:center;
    margin-top:22px; font-family:'Barlow', sans-serif; font-weight:700; font-size:15px; letter-spacing:.04em;
    color:var(--paper-dim);
  }
  .hero .sub b{color:var(--paper); font-weight:700;}
  .countdown{
    display:inline-flex; align-items:baseline; gap:10px;
    margin-top:24px; padding:10px 18px;
    background:rgba(232,163,61,0.1); border:1px solid rgba(232,163,61,0.4);
  }
  .countdown .cd-num{font-family:'Anton', sans-serif; font-size:30px; color:var(--amber); line-height:1;}
  .countdown .cd-label{
    font-family:'Barlow', sans-serif; font-weight:700; font-size:12px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--paper-dim);
  }
  .hero-actions{display:flex; gap:16px; margin-top:26px; flex-wrap:wrap;}
  .btn{
    font-family:'Barlow', sans-serif; font-weight:700; font-size:14px; letter-spacing:.08em; text-transform:uppercase;
    padding:16px 30px; text-decoration:none; display:inline-block; font-weight:700;
    border:2px solid transparent; transition:transform .15s;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{
    background:var(--red); color:var(--paper);
    position:relative;
    background-image:
      radial-gradient(circle at 0 50%, transparent 6px, var(--red) 6.5px),
      radial-gradient(circle at 100% 50%, transparent 6px, var(--red) 6.5px);
    background-repeat:no-repeat;
    background-position:left center, right center;
    background-size:14px 100%, 14px 100%;
    padding-left:34px; padding-right:34px;
  }
  .btn-ghost{border-color:var(--paper); color:var(--paper);}

  /* ===== values strip ===== */
  .values{background:var(--ink-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .values ul{
    display:grid; grid-template-columns:repeat(5,1fr);
    list-style:none; padding:34px 0;
  }
  .values li{
    text-align:center; padding:0 14px; border-left:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:32px;
  }
  .values li:first-child{border-left:none;}
  .values .ic{width:30px; height:30px; color:var(--amber);}
  .values .ic svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
  .values .t{font-family:'Anton'; font-size:16px; letter-spacing:.02em; color:var(--paper);}

  /* ===== Ehrenamt-CTA ===== */
  .volunteer-cta{background:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .volunteer-cta .wrap{
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    flex-wrap:wrap; padding:28px 0;
  }
  .volunteer-cta .vc-text{display:flex; align-items:center; gap:16px; max-width:640px;}
  .volunteer-cta .ic{width:34px; height:34px; color:var(--red); flex:0 0 auto;}
  .volunteer-cta .ic svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
  .volunteer-cta h3{font-size:19px; margin-bottom:4px;}
  .volunteer-cta p{margin:0; font-size:14px; color:var(--paper-dim);}
  @media (max-width:640px){
    .volunteer-cta .wrap{flex-direction:column; align-items:flex-start;}
  }

  /* ===== section shell ===== */
  section{padding:100px 0;}
  .section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:52px; flex-wrap:wrap; gap:18px;}
  .section-head h2{font-size:clamp(34px,5vw,58px);}
  .section-head .desc{max-width:340px; color:var(--paper-dim); font-size:15px; line-height:1.5;}

  /* ===== lineup ===== */
  .lineup-days{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
  .day-card{
    background:var(--ink-soft); border:1px solid var(--line); padding:32px;
    position:relative; overflow:hidden; transition:transform .25s ease, border-color .25s ease;
  }
  .day-card:hover{transform:translateY(-4px) rotate(0.5deg); border-color:rgba(242,234,217,0.3);}
  .day-card::after{
    content:"";
    position:absolute; top:0; right:0; width:0; height:0;
    background:linear-gradient(135deg, transparent 50%, rgba(242,234,217,0.12) 50%);
    transition:width .25s ease, height .25s ease;
  }
  .day-card:hover::after{width:30px; height:30px;}
  .day-card::before{
    content:""; position:absolute; top:0; left:0; width:6px; height:100%; background:var(--magenta);
  }
  .day-card.fr::before{background:var(--amber);}
  .day-card .day-label{font-family:'Barlow', sans-serif; font-weight:700; font-size:12px; letter-spacing:.14em; color:var(--paper-dim); text-transform:uppercase;}
  .day-card .day-date{font-family:'Anton'; font-size:30px; margin:4px 0 26px;}
  .band-row{
    display:flex; align-items:baseline; justify-content:space-between;
    padding:14px 0; border-top:1px solid var(--line);
  }
  .band-row:first-of-type{border-top:none;}
  .band-row .name{font-family:'Anton'; font-size:22px; letter-spacing:.02em;}
  .band-row.headliner .name{font-size:34px; color:var(--red);}
  .band-row .time{font-family:'Barlow', sans-serif; font-weight:700; font-size:13px; color:var(--paper-dim);}

  /* ===== news ===== */
  .news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .news-card{
    background:var(--paper); color:var(--ink); position:relative;
    overflow:hidden; transition:transform .25s ease;
  }
  .news-card::after{
    content:"";
    position:absolute; top:0; right:0; width:0; height:0;
    background:linear-gradient(135deg, transparent 50%, rgba(20,18,16,0.18) 50%);
    transition:width .25s ease, height .25s ease;
  }
  .news-card:hover{transform:translateY(-4px) rotate(-0.6deg);}
  .news-card:hover::after{width:34px; height:34px;}
  .news-card .thumb{
    aspect-ratio:4/3; overflow:hidden;
    background:repeating-linear-gradient(135deg, #d8ccae 0 2px, #e6dcc6 2px 4px);
    display:flex; align-items:center; justify-content:center;
    font-family:'Barlow', sans-serif; font-weight:700; font-size:11px; color:#a89c7c; letter-spacing:.12em; text-transform:uppercase;
  }
  .news-card .thumb img{width:100%; height:100%; object-fit:cover; display:block;
    filter:sepia(0.45) saturate(1.6) hue-rotate(-12deg) brightness(0.92) contrast(1.08);
  }
  .news-card .body{padding:22px;}
  .news-card .tag{font-family:'Barlow', sans-serif; font-weight:700; font-size:11px; color:var(--red-dark); letter-spacing:.1em; text-transform:uppercase;}
  .news-card h3{font-size:22px; margin:10px 0 10px; font-family:'Anton';}
  .news-card p{font-size:14px; line-height:1.55; color:#4a443a;}

  /* ===== camp ===== */
  .camp{background:var(--paper); color:var(--ink); position:relative; overflow:hidden;}
  .camp::before{
    content:"";
    position:absolute; inset:0; pointer-events:none; opacity:0.05; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }
  .camp .wrap{position:relative; z-index:1;}
  .camp-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
  .camp .eyebrow{color:var(--red-dark);}
  .camp .eyebrow::before{background:var(--red-dark);}
  .camp h2{color:var(--ink);}
  .camp p{margin:20px 0 28px; color:#4a443a; line-height:1.6; max-width:460px;}
  .camp-photo{
    aspect-ratio:1/1; overflow:hidden;
  }
  .camp-photo img{width:100%; height:100%; object-fit:cover; display:block;
    border:10px solid var(--ink);
    filter:sepia(0.45) saturate(1.6) hue-rotate(-12deg) brightness(0.92) contrast(1.08);
  }

  .camp-person{
    display:flex; align-items:center; gap:14px;
    margin:22px 0 26px; padding:12px 16px;
    background:rgba(20,18,16,0.05); border:1px solid rgba(20,18,16,0.15);
  }
  .camp-person img{
    width:64px; height:64px; border-radius:50%; object-fit:cover;
    flex:0 0 auto; border:2px solid var(--red);
  }
  .camp-person .role{font-family:'Barlow', sans-serif; font-weight:700; font-size:11px; letter-spacing:.1em; color:var(--red); text-transform:uppercase; display:block; margin-bottom:2px;}
  .camp-person p{margin:0; font-size:14px; color:rgba(20,18,16,0.72);}

  /* ===== Impressionen-Galerie ===== */
  .gallery{background:var(--ink-soft); border-top:1px solid var(--line);}
  .gallery-grid{
    margin-top:32px;
    display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:160px;
    gap:12px;
  }
  .gallery-item{
    position:relative; display:block; overflow:hidden; grid-row:span 1;
  }
  .gallery-item.g-tall{grid-row:span 2;}
  .gallery-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease;}
  .gallery-item::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 60%, rgba(20,18,16,0.55) 100%);
    opacity:0; transition:opacity .25s ease;
  }
  .gallery-item:hover img{transform:scale(1.06);}
  .gallery-item:hover::after{opacity:1;}
  @media (max-width:640px){
    .gallery-grid{grid-template-columns:repeat(2, 1fr); grid-auto-rows:130px; gap:8px;}
  }

  /* ===== Herz von Tarmstedt: Luftaufnahme mit Herzform-Hinweis ===== */
  .heart-section{position:relative; background:var(--ink); overflow:hidden;}
  .heart-section .wrap{
    display:grid; grid-template-columns:1fr; gap:0;
    padding-top:0; padding-bottom:0;
  }
  .heart-photo-frame{position:relative; aspect-ratio:16/10; overflow:hidden;}
  .heart-photo-frame img{width:100%; height:100%; object-fit:cover; display:block;}
  .heart-photo-frame::after{
    content:"";
    position:absolute; inset:0;
    /* Dunkel bleibt jetzt über den ganzen Bereich stehen, in dem die Caption liegt
       (Foto ist an dieser Stelle oft hell/sandig — Text sonst kaum lesbar),
       fadet erst weiter oben zum Foto hin aus. */
    background:linear-gradient(0deg, rgba(20,18,16,0.95) 0%, rgba(20,18,16,0.88) 42%, transparent 78%);
  }
  .heart-caption{
    position:relative; z-index:1;
    margin-top:-90px; padding:0 24px 32px;
    max-width:640px;
  }
  .heart-caption .eyebrow{color:var(--red); margin-bottom:8px;}
  .heart-caption h2{margin-bottom:10px; text-shadow:0 2px 10px rgba(0,0,0,0.5);}
  .heart-caption .heart-mark{color:var(--red);}
  .heart-caption p{color:rgba(242,234,217,0.85); max-width:52ch; text-shadow:0 1px 6px rgba(0,0,0,0.6);}
  @media (min-width:820px){
    .heart-caption{padding:0 48px 44px;}
  }

  /* ===== sponsors ===== */
  .sponsors{text-align:center;}
  .sponsors .eyebrow{justify-content:center;}
  .sponsors .eyebrow::before{display:none;}
  .sponsor-row{
    display:flex; justify-content:center; align-items:center; gap:52px;
    margin-top:44px; flex-wrap:wrap;
  }
  .sponsor-row .s-item{
    width:140px; height:56px; border:1px dashed rgba(242,234,217,0.35);
    background:rgba(242,234,217,0.04);
    display:flex; align-items:center; justify-content:center;
    font-family:'Barlow', sans-serif; font-weight:700; font-size:11px; color:var(--paper-dim); letter-spacing:.08em;
  }

  /* ===== FAQ ===== */
  .faq{background:var(--paper); color:var(--ink);}
  .faq .wrap{max-width:820px;}
  .faq-list{margin-top:20px;}
  .faq-item{border-bottom:1px solid rgba(20,18,16,0.15);}
  .faq-item summary{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:20px 4px; cursor:pointer; list-style:none;
    font-family:'Anton'; font-size:18px; letter-spacing:.01em;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:"+"; font-family:'Barlow', sans-serif; font-weight:700; font-size:22px; color:var(--red);
    flex:0 0 auto; transition:transform .2s ease;
  }
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item p{margin:0 4px 22px; color:rgba(20,18,16,0.72); max-width:64ch;}

  /* ===== footer ===== */
  footer{background:var(--ink-soft); border-top:1px solid var(--line); padding:60px 0 30px;}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:50px;}
  footer h4{font-family:'Barlow', sans-serif; font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); margin-bottom:18px;}
  footer ul{list-style:none;}
  footer li{margin-bottom:10px;}
  footer a{text-decoration:none; color:var(--paper-dim); font-size:14px;}
  footer a:hover{color:var(--paper);}
  .foot-bottom{
    display:flex; justify-content:space-between; padding-top:24px; border-top:1px solid var(--line);
    font-family:'Barlow', sans-serif; font-weight:700; font-size:12px; color:var(--paper-dim); flex-wrap:wrap; gap:10px;
  }

  @media (max-width:860px){
    nav ul{display:none;}
    .values ul{grid-template-columns:repeat(2,1fr);}
    .values li:nth-child(3){border-left:none;}
    .lineup-days{grid-template-columns:1fr;}
    .news-grid{grid-template-columns:1fr;}
    .camp-grid{grid-template-columns:1fr; gap:30px;}
    .foot-grid{grid-template-columns:1fr; gap:28px;}
    .stamp{width:110px; height:110px; top:167px; right:20px;}
    .stamp .inner{width:88px; height:88px;}

    /* Logo auf Mobile mittig, Header dafür etwas niedriger als auf Desktop */
    header .wrap{height:76px; justify-content:flex-end;}
    .logo-mark{
      position:absolute; left:50%; top:calc(50% + 10px); transform:translate(-50%, -50%);
      width:max-content;
    }
    .wordmark-img{height:56px;}

    /* ===== mobiles Hamburger-Menü ===== */
    .nav-toggle{
      display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px;
      width:44px; height:44px; padding:0; border:none; background:none; cursor:pointer;
      position:relative; z-index:210;
    }
    .nav-toggle span{
      display:block; width:26px; height:2px; background:var(--paper);
      transition:transform .25s ease, opacity .2s ease;
    }
    .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg);}
    .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
    .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}

    #siteNav.is-open{
      position:fixed; left:0; right:0; bottom:0; z-index:150;
      /* top wird per JS exakt auf die Unterkante des Headers gesetzt */
    }
    #siteNav ul{
      display:none;
      flex-direction:column; align-items:stretch; gap:0;
      background:var(--ink); border-top:1px solid var(--line);
      padding:8px 28px 40px; overflow-y:auto; height:100%;
    }
    #siteNav.is-open ul{display:flex;}
    #siteNav ul li{border-bottom:1px solid var(--line);}
    #siteNav ul li a{display:block; padding:18px 2px; font-size:17px;}
    #siteNav ul li:last-child{border-bottom:none; margin-top:16px;}
    #siteNav .nav-cta{display:inline-block; padding:14px 22px;}

    /* Lämpchen der oberen Scroll-Lichterkette größer, damit sie mehr auffallen */
    .scroll-lights{height:20px;}
    .scroll-lights::before{top:5px;}
    .scroll-lights i{width:11px; height:14px; margin-top:6px;}
    .scroll-lights i::before{width:5px; height:5px; top:-4px;}
  }

  /* ===== Galerie-Seite (WordPress-Kern-Galerie-Block) ===== */
  .gallery-page{background:var(--ink); color:var(--paper); padding:150px 0 90px;}
  .gallery-page h1{margin-bottom:24px;}
  .gallery-page-intro > p{color:var(--paper-dim); max-width:70ch; font-size:16px; line-height:1.6;}
  .gallery-page-intro > h2{
    margin-top:56px; margin-bottom:20px; color:var(--paper);
    padding-top:20px; border-top:1px solid var(--line);
  }
  .gallery-page-intro > h2:first-of-type{border-top:none; padding-top:0;}
  .gallery-page-intro figure.wp-block-gallery{margin:0 0 8px;}
  .gallery-page-intro figure.wp-block-gallery img{transition:transform .3s ease;}
  .gallery-page-intro figure.wp-block-gallery figure:hover img{transform:scale(1.04);}
  .gallery-page-intro figure.wp-block-gallery figure{overflow:hidden;}
  .gallery-more{margin-top:28px; display:inline-block;}