/* ============================================================
   CUSTOM FONTS — Buckwheat TC Rough (Tom Chalky)
============================================================ */
@font-face{
  font-family:'Buckwheat TC Rough';
  src:url('../fonts/Buckwheat TC Rough.otf') format('opentype');
  font-weight:normal;font-style:normal;font-display:swap}
@font-face{
  font-family:'Buckwheat TC Script Rough';
  src:url('../fonts/Buckwheat TC Script Rough.otf') format('opentype');
  font-weight:normal;font-style:normal;font-display:swap}
@font-face{
  font-family:'Buckwheat TC Sans Rough';
  src:url('../fonts/Buckwheat TC Sans Rough.otf') format('opentype');
  font-weight:normal;font-style:normal;font-display:swap}
@font-face{
  font-family:'Frankentype';
  src:url('../fonts/Frankentype.otf') format('opentype');
  font-weight:normal;font-style:normal;font-display:swap}

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

:root{
  /* DARK */
  --navy:#0d1b2a;
  --navy-d:#070f1a;
  --navy-l:#172a40;
  --navy-2:#1a2c44;
  --navy-3:#243b58;

  /* BLUE accent */
  --blue:#4ba3d4;
  --blue-d:#3185b8;
  --blue-l:#7fc4e7;
  --blue-paint:#3a8cc4;

  /* CREAM */
  --cream:#f0ebe2;
  --cream-2:#e6dfd0;
  --cream-3:#dcd2bd;

  /* TEXT */
  --t-light:#f5f0e6;
  --t-light-dim:rgba(245,240,230,.7);
  --t-light-faint:rgba(245,240,230,.5);
  --t-dark:#0d1b2a;
  --t-dark-2:#1a2c44;
  --t-dark-dim:#4a5566;
  --t-dark-faint:#7a8390;

  /* RULES */
  --rule-light:rgba(245,240,230,.12);
  --rule-dark:rgba(13,27,42,.15);

  --sh-card:0 12px 30px rgba(13,27,42,.18);
  --sh-dark:0 16px 40px rgba(0,0,0,.4);

  /* CRACK MASK — washed-out blotchy noise: big & small particles mixed */
  --m-crack:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 300' preserveAspectRatio='none'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.022 0.038' numOctaves='5' seed='14'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 4.5 0 0 0 -1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  /* BRUSH MASK — horizontal streaks for brush stroke effect */
  --m-brush:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 300' preserveAspectRatio='none'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5 0.025' numOctaves='2' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 10 0 0 0 -2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
}

html{scroll-behavior:smooth;background:var(--navy)}
body{background:var(--navy);color:var(--t-light);
  font-family:'Manrope',sans-serif;font-size:16px;line-height:1.6;font-weight:400;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
::selection{background:var(--blue);color:var(--navy)}

/* ========== TYPOGRAPHY HELPERS ========== */
.display{font-family:'Big Shoulders Display',sans-serif;font-weight:900;
  text-transform:uppercase;line-height:.88;letter-spacing:-.005em}
.display-i{font-family:'Big Shoulders Display',sans-serif;font-style:italic;font-weight:800;
  text-transform:none;line-height:.88;letter-spacing:.005em;color:var(--blue)}
.eyebrow{font-family:'Manrope',sans-serif;font-weight:600;font-size:.78rem;
  letter-spacing:.32em;text-transform:uppercase;color:var(--blue);
  display:inline-block;position:relative;padding-bottom:.6rem;margin-bottom:1.2rem}
.eyebrow::after{content:'';position:absolute;bottom:0;left:0;width:40px;height:2px;background:var(--blue)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* GRUNGE — washed-out, ink-spot texture for display text */
.grunge{
  filter:url(#grunge);
  -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 180' preserveAspectRatio='none'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.06' numOctaves='3' seed='8'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 14 0 0 0 -3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 180' preserveAspectRatio='none'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.06' numOctaves='3' seed='8'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 14 0 0 0 -3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat
}
.grunge-strong{
  filter:url(#grungeStrong);
  -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 260' preserveAspectRatio='none'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.028 0.05' numOctaves='3' seed='17'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 10 0 0 0 -2.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 260' preserveAspectRatio='none'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.028 0.05' numOctaves='3' seed='17'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 10 0 0 0 -2.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat
}

/* ========== BUTTONS ========== */
.btn{display:inline-flex;align-items:center;gap:.65rem;
  padding:.85rem 1.6rem;font-family:'Big Shoulders Display',sans-serif;font-weight:800;
  font-size:.92rem;letter-spacing:.16em;text-transform:uppercase;
  transition:.25s;position:relative;overflow:hidden;border:2px solid transparent;cursor:pointer}
.btn svg{width:14px;height:14px;flex-shrink:0;position:relative;z-index:1}
.btn span{position:relative;z-index:1}

.btn-blue{background:var(--blue);color:var(--navy);border-color:var(--blue)}
.btn-blue:hover{background:var(--blue-l);border-color:var(--blue-l);transform:translateY(-1px)}

.btn-outline-light{background:transparent;color:var(--t-light);border-color:var(--rule-light)}
.btn-outline-light:hover{border-color:var(--blue);color:var(--blue)}

.btn-outline-dark{background:transparent;color:var(--t-dark);border-color:var(--rule-dark)}
.btn-outline-dark:hover{border-color:var(--navy);background:var(--navy);color:var(--cream)}

/* ============================================================
   NAV
============================================================ */
.nav{position:absolute;top:0;left:0;right:0;z-index:50;background:transparent;padding:0;
  transition:background .3s ease}
.nav-inner{max-width:1280px;margin:0 auto;padding:1.4rem 2rem;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;transition:padding .3s ease}

/* Sticky-Zustand beim Scrollen: nur Logo + Menü, schwarzer Schleier dahinter */
.nav.scrolled{position:fixed;background:rgba(7,15,26,.93);
  box-shadow:0 6px 22px rgba(0,0,0,.34);animation:nav-drop .35s ease}
@keyframes nav-drop{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.nav.scrolled .nav-inner{padding-top:.45rem;padding-bottom:.45rem}
.nav.scrolled .nav-socials{display:none}
.nav.scrolled .nav-menu{margin-top:0}
.nav.scrolled .brand-logo{height:62px}

/* Veranstalter: halbtransparenter schwarzer Schleier hinter Logo + Menü (Bild liegt darunter) */
.page-veranstalter .nav:not(.scrolled),
.page-kontakt .nav:not(.scrolled){
  background:linear-gradient(to bottom,rgba(7,15,26,.82) 0%,rgba(7,15,26,.6) 55%,rgba(7,15,26,0) 100%)}

.brand{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0}
.brand-logo{display:block;height:124px;width:auto;max-width:100%;transition:height .3s ease}
.ft-brand .brand-logo{height:86px}

.nav-right{display:flex;flex-direction:column;align-items:flex-end;gap:.85rem}

.nav-socials{display:flex;gap:1.35rem;align-items:center}
.nav-socials a{color:var(--t-light-dim);transition:.2s;display:flex;align-items:center;justify-content:center}
.nav-socials a:hover{color:var(--blue)}
.nav-socials svg{width:25px;height:25px}

.nav-menu{display:flex;list-style:none;gap:1.85rem;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:30px}
.nav-menu a{font-family:'Big Shoulders Display',sans-serif;font-weight:700;
  font-size:1.2rem;letter-spacing:.22em;color:var(--t-light-dim);text-transform:uppercase;
  padding:.4rem 0;transition:.2s;position:relative}
.nav-menu a:hover{color:var(--t-light)}
.nav-menu a.active{color:var(--t-light)}
.nav-menu a.active::after{content:'';position:absolute;left:50%;bottom:-3px;
  width:22px;height:2px;background:var(--blue);transform:translateX(-50%)}
.nav-menu a.nav-cta{color:var(--t-light);background:var(--blue);
  padding:.55rem 1.25rem;border-radius:999px;transition:background .2s,transform .2s}
.nav-menu a.nav-cta:hover{background:var(--blue-l);transform:translateY(-1px)}
.nav-menu a.nav-cta.active::after,.nav-menu a.nav-cta::after{display:none}

/* ============================================================
   HERO — full-bleed wide band photo, text overlay left
============================================================ */
.hero{position:relative;background:var(--navy);overflow:hidden;
  /* Volle Viewport-Breite, Höhe folgt Bild-Aspect + 100px (Bild nach unten erweitert) */
  width:100%;height:clamp(560px,calc(40vw + 100px),900px);
  display:flex;align-items:center;padding:0}

/* Full-bleed background photo */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;
  filter:contrast(1.05) saturate(1.05)}

/* Driftende Wolken — Tiefen-Effekt (von hinten nach vorne) */
.hero-clouds{position:absolute;top:0;left:0;right:0;height:62%;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 74%);
          mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 74%)}
.hero-clouds::before,.hero-clouds::after{content:'';position:absolute;inset:-8%;
  background-image:url(../img/hero-clouds.png);
  background-repeat:repeat-x;background-size:auto 62%;background-position:center top;
  transform-origin:50% 38%;will-change:transform,opacity;
  animation:cloud-approach 40s linear infinite}
.hero-clouds::after{animation-delay:-20s}
@keyframes cloud-approach{
  0%{transform:scale(1);opacity:0}
  16%{opacity:.85}
  84%{opacity:.85}
  100%{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .hero-clouds::before,.hero-clouds::after{animation:none;opacity:.6;transform:scale(1.25)}}

/* Gradient overlay — readable text on left, photo bright over band area */
.hero-bg::after{content:'';position:absolute;inset:0;
  background:
    /* Spotlight: hellt den Band-Bereich auf */
    radial-gradient(ellipse 45% 60% at 55% 58%,rgba(255,245,220,.14) 0%,rgba(255,245,220,.06) 35%,transparent 70%),
    /* Horizontal: Dunkelheit nur links für Text, Band-Bereich klar */
    linear-gradient(90deg,rgba(13,27,42,.85) 0%,rgba(13,27,42,.65) 16%,rgba(13,27,42,.28) 30%,transparent 44%,transparent 82%,rgba(13,27,42,.12) 100%),
    /* Vertikal: oben leichte Abdunklung, unten weicher Verlauf bis voll Navy → nahtloser Übergang zur About-Sektion */
    linear-gradient(180deg,rgba(13,27,42,.35) 0%,transparent 22%,transparent 52%,rgba(13,27,42,.55) 78%,rgba(13,27,42,.92) 92%,#0d1b2a 100%);
  pointer-events:none}

.hero-inner{position:relative;z-index:5;max-width:1280px;margin:0 auto;padding:8rem 2rem 3rem;width:100%;
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}

.hero-left{padding-top:1rem;max-width:620px;flex:0 1 auto}

/* YouTube-Video in der About-Sektion (rechte Spalte neben dem Text) */
.about-video{width:100%;aspect-ratio:16/9;
  background:#000;border-radius:6px;overflow:hidden;
  box-shadow:0 18px 50px rgba(13,27,42,.3),0 4px 12px rgba(13,27,42,.18);
  border:1px solid rgba(13,27,42,.1)}
.about-video iframe{width:100%;height:100%;border:0;display:block}
.video-poster{display:block;position:relative;cursor:pointer}
.video-poster img{width:100%;height:100%;object-fit:cover;display:block}
.video-poster::after{content:'';position:absolute;inset:0;background:rgba(7,15,26,.18);
  transition:background .25s ease}
.video-poster:hover::after{background:rgba(7,15,26,.05)}
.video-poster-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:84px;height:84px;border-radius:50%;background:rgba(13,27,42,.78);
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 8px 26px rgba(0,0,0,.4);transition:transform .25s ease,background .25s ease;z-index:1}
.video-poster:hover .video-poster-play{transform:translate(-50%,-50%) scale(1.08);background:var(--blue-d)}
.video-poster-play svg{width:38px;height:38px;margin-left:4px}
.about-actions{display:none}  /* nur in der Mobile-Version sichtbar */

.hero-badge-img{display:block;position:relative;z-index:-1;
  width:clamp(210px,22vw,290px);height:auto;
  margin:0 auto clamp(-92px,-7vw,-67px);transform:rotate(-1.5deg);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 86%);
          mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 86%);
  filter:drop-shadow(0 9px 20px rgba(0,0,0,.55))}

.hero-headline{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:clamp(4.5rem,10vw,9.5rem);line-height:.9;letter-spacing:.005em;
  text-transform:uppercase;color:var(--t-light);margin-bottom:1.4rem}
.hero-headline-art{display:block}
.hero-eyebrow{color:var(--blue-l)}
.hero-headline .l1{display:block;width:fit-content;position:relative;z-index:0;
  font-size:.85em;margin-bottom:-.15em;
  color:var(--t-light);text-shadow:0 6px 28px rgba(0,0,0,.5)}
.hero-headline .l2{display:inline-block;
  font-family:'Frankentype','Buckwheat TC Script Rough','Permanent Marker',cursive;font-weight:normal;
  color:var(--blue);text-transform:none;
  font-size:1em;line-height:1;letter-spacing:0;
  margin-top:.05em;
  text-shadow:0 6px 24px rgba(0,0,0,.4)}

.hero-sub{display:inline-block;margin-bottom:.4rem;line-height:1.05}
.hero-sub-l1{display:block;
  font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:clamp(1.6rem,2.6vw,2.4rem);
  letter-spacing:.02em;text-transform:uppercase;color:var(--t-light);
  text-shadow:0 4px 18px rgba(0,0,0,.45)}
.hero-sub-l2{display:block;
  font-family:'Frankentype','Buckwheat TC Script Rough','Permanent Marker',cursive;
  font-weight:normal;font-style:normal;
  font-size:clamp(1.8rem,3vw,2.8rem);
  color:var(--blue);text-transform:none;letter-spacing:0;
  line-height:.95;margin-top:.1em;
  text-shadow:0 4px 18px rgba(0,0,0,.4)}

.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:5.5rem}
.hero-actions .btn{padding:1.15rem 2.2rem;font-size:1.12rem;gap:.8rem}
.hero-actions .btn svg{width:18px;height:18px}


/* ============================================================
   ABOUT — cream section with antler emblem
============================================================ */
.about{color:var(--t-light);background:var(--navy);
  padding:0 0 7rem;position:relative;overflow:hidden}
/* Paper texture */
.about::before{content:'';position:absolute;inset:0;opacity:.06;mix-blend-mode:multiply;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}

.about-inner{max-width:1280px;margin:0 auto;padding:0 2rem;
  display:grid;grid-template-columns:1fr 1.6fr;gap:3rem;align-items:center;position:relative;z-index:2}

.about-text{}
.about-text .eyebrow{color:var(--blue-l)}
.about-text .eyebrow::after{background:var(--blue-l)}
.about-text h2{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:clamp(2.5rem,5vw,4rem);line-height:.95;letter-spacing:.005em;
  text-transform:uppercase;color:var(--t-light);margin-bottom:1.4rem}
.about-text h2 em{font-family:'Frankentype','Buckwheat TC Script Rough','Permanent Marker',cursive;
  font-style:normal;font-weight:normal;color:var(--blue-l);
  display:block;margin-top:.05em;text-transform:none;font-size:1em;line-height:1;letter-spacing:0}
.about-text p{color:var(--t-light-dim);line-height:1.65;margin-bottom:2rem;font-size:1.02rem;max-width:420px}

/* ============================================================
   MUSIC — dark section, 3 albums + concert photo
============================================================ */
.music{background:var(--navy);color:var(--t-light);padding:6rem 0 7rem;position:relative;overflow:hidden}
.music::before{content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 20% 30%,rgba(75,163,212,.1) 0%,transparent 50%),
    radial-gradient(ellipse at 90% 80%,rgba(75,163,212,.06) 0%,transparent 50%);
  pointer-events:none}

.music-inner{max-width:1280px;margin:0 auto;padding:0 2rem;
  display:grid;grid-template-columns:.95fr 1.05fr;gap:4rem;align-items:center;position:relative;z-index:2}

.music-left{order:2}
.music-left h2{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:clamp(2.5rem,5vw,4rem);line-height:.95;letter-spacing:.005em;
  text-transform:uppercase;color:var(--t-light);margin-bottom:2.2rem}
.music-left h2 em{font-family:'Frankentype','Buckwheat TC Script Rough','Permanent Marker',cursive;
  font-style:normal;font-weight:normal;color:var(--blue);
  display:block;margin-top:.05em;text-transform:none;font-size:1em;line-height:1;letter-spacing:0}

.albums{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem}
.album{position:relative;aspect-ratio:1;overflow:hidden;cursor:pointer;
  border:1px solid var(--rule-light);transition:.3s}
.album:hover{transform:translateY(-4px);border-color:var(--blue)}
.album img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.02) contrast(1.05)}

.music-right{position:relative;order:1}
.music-photo{position:relative;aspect-ratio:1.1/1;overflow:hidden;
  /* Brush mask for organic edges */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M3 5 Q1 4 2 8 L1 12 Q3 14 2 18 L3 22 Q1 26 3 30 L2 35 Q4 38 2 42 L3 48 Q1 52 3 56 L2 62 Q4 66 2 72 L3 78 Q1 82 4 86 L2 92 Q5 95 3 98 Q8 96 14 97 L20 96 Q26 98 32 96 L38 97 Q44 95 50 97 L56 96 Q62 98 68 96 L74 97 Q80 95 86 97 L92 96 Q96 98 98 95 Q97 92 98 88 L97 82 Q99 78 97 72 L98 66 Q96 62 98 56 L97 52 Q99 48 97 42 L98 38 Q96 32 98 28 L97 22 Q99 18 97 12 L98 6 Q96 3 92 4 L86 3 Q82 5 78 3 L72 4 Q66 2 60 4 L54 3 Q48 5 42 3 L36 4 Q30 2 24 4 L18 3 Q12 5 6 3 Q3 4 3 5 Z' fill='white'/%3E%3C/svg%3E");
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M3 5 Q1 4 2 8 L1 12 Q3 14 2 18 L3 22 Q1 26 3 30 L2 35 Q4 38 2 42 L3 48 Q1 52 3 56 L2 62 Q4 66 2 72 L3 78 Q1 82 4 86 L2 92 Q5 95 3 98 Q8 96 14 97 L20 96 Q26 98 32 96 L38 97 Q44 95 50 97 L56 96 Q62 98 68 96 L74 97 Q80 95 86 97 L92 96 Q96 98 98 95 Q97 92 98 88 L97 82 Q99 78 97 72 L98 66 Q96 62 98 56 L97 52 Q99 48 97 42 L98 38 Q96 32 98 28 L97 22 Q99 18 97 12 L98 6 Q96 3 92 4 L86 3 Q82 5 78 3 L72 4 Q66 2 60 4 L54 3 Q48 5 42 3 L36 4 Q30 2 24 4 L18 3 Q12 5 6 3 Q3 4 3 5 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
.music-photo img{width:100%;height:100%;object-fit:cover;
  filter:contrast(1.1) saturate(1.05);transition:opacity .25s ease}
.music-photo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,27,42,.2) 0%,rgba(13,27,42,.55) 100%);pointer-events:none}

/* ============================================================
   STORY — Markenstory mit nummerierten Feature-Blöcken
============================================================ */
.story{background:var(--cream-2);color:var(--t-dark);
  padding:6rem 2rem 6.5rem;position:relative;overflow:hidden}
.story::before{content:'';position:absolute;inset:0;opacity:.05;mix-blend-mode:multiply;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
.story::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 18% 12%,rgba(75,163,212,.08) 0%,transparent 55%),
    radial-gradient(ellipse at 88% 92%,rgba(58,140,196,.06) 0%,transparent 55%)}

.story-inner{max-width:1180px;margin:0 auto;position:relative;z-index:2}

.story-head{text-align:center;max-width:820px;margin:0 auto 4rem}
.story-head .eyebrow{color:var(--blue-d);display:inline-block;margin-bottom:.8rem}
.story-head .eyebrow::after{background:var(--blue-d);left:50%;transform:translateX(-50%)}
.story-head h2{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:clamp(2.4rem,5vw,3.8rem);line-height:.95;letter-spacing:.005em;
  text-transform:uppercase;color:var(--t-dark);margin-bottom:1.6rem}
.story-head h2 em{font-family:'Frankentype','Buckwheat TC Script Rough','Permanent Marker',cursive;
  font-style:normal;font-weight:normal;color:var(--blue-d);
  display:block;margin-top:.1em;text-transform:none;font-size:1em;line-height:1;letter-spacing:0}
.story-lead{color:var(--t-dark-dim);font-size:1.12rem;line-height:1.65;max-width:720px;margin:0 auto}

.story-features{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;margin-top:3.5rem;
  position:relative}
.story-features::before{content:'';position:absolute;left:0;right:0;top:-1.5rem;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(13,27,42,.15) 50%,transparent 100%)}

.story-feature{position:relative;background:rgba(245,240,230,.55);
  padding:2.2rem 1.8rem 2rem;border:1px solid rgba(13,27,42,.08);
  transition:transform .25s ease,box-shadow .25s ease}
.story-feature:hover{transform:translateY(-3px);box-shadow:var(--sh-card)}

.story-feature-num{font-family:'Buckwheat TC Rough','Anton',sans-serif;
  font-size:3.4rem;line-height:1;color:var(--blue);opacity:.45;
  letter-spacing:.02em;margin-bottom:.4rem}

.story-feature h3{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:1.55rem;line-height:1;letter-spacing:.01em;
  text-transform:uppercase;color:var(--t-dark);margin:0 0 1rem}

.story-feature p{color:var(--t-dark-dim);line-height:1.6;font-size:.98rem;margin:0}

.story-closer{margin:3.5rem auto 0;max-width:820px;text-align:center;
  font-family:'Frankentype','Permanent Marker',cursive;font-style:normal;
  font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.45;color:var(--t-dark);
  padding-top:2.5rem;border-top:1px solid rgba(13,27,42,.12)}

/* Statement-Abschluss (Veranstalter-Seite) — in den hellen Abschnitt integriert */
.host-statement{margin:3.8rem auto 0;max-width:900px;text-align:center;position:relative;
  padding-top:2.8rem}
.host-statement::before{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:58px;height:3px;background:var(--blue-d)}
.host-statement-pillars{margin:0;display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:.7rem 1.9rem}
.host-statement-pillars span{position:relative;font-family:'Big Shoulders Display',sans-serif;
  font-weight:800;text-transform:uppercase;letter-spacing:.05em;line-height:1.05;
  font-size:clamp(1.25rem,2.6vw,1.85rem);color:var(--t-dark)}
.host-statement-pillars span:not(:last-child)::after{content:'·';position:absolute;
  right:-1.05rem;top:50%;transform:translate(50%,-50%);color:var(--blue-d);opacity:.55;font-weight:400}
.host-statement-sub{margin:1.15rem 0 0;font-family:'Frankentype','Permanent Marker',cursive;
  font-style:normal;font-size:clamp(1.4rem,2.8vw,2rem);line-height:1;color:var(--blue-d)}

@media (max-width:560px){
  .host-statement-pillars{gap:.45rem}
  .host-statement-pillars span:not(:last-child)::after{display:none}
}

@media (max-width:900px){
  .story-features{grid-template-columns:1fr;gap:1.5rem}
  .story-head{margin-bottom:2.5rem}
}

/* ============================================================
   LIVE — cream section with stage icons
============================================================ */
.live{background:var(--cream);color:var(--t-dark);padding:5rem 3rem 5.5rem;position:relative;overflow:hidden}
.live::before{content:'';position:absolute;inset:0;opacity:.06;mix-blend-mode:multiply;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}

.live-inner{max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.4fr;gap:4rem;align-items:center;position:relative;z-index:2}

.live-left .eyebrow{color:var(--blue-d)}
.live-left .eyebrow::after{background:var(--blue-d)}
.live-left h2{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:clamp(2rem,4vw,3.2rem);line-height:1;letter-spacing:.005em;
  text-transform:uppercase;color:var(--t-dark);margin-bottom:1.4rem}
.live-left p{color:var(--t-dark-dim);font-size:1rem;line-height:1.6;margin-bottom:2rem;max-width:380px}

.live-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.licon{text-align:center}
.licon-img{width:72px;height:72px;margin:0 auto 1rem;color:var(--blue-d);
  display:flex;align-items:center;justify-content:center}
.licon-img svg{width:100%;height:100%}
.licon h3{font-family:'Big Shoulders Display',sans-serif;font-weight:900;
  font-size:1.1rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t-dark);margin-bottom:.5rem;line-height:1}
.licon p{font-size:.88rem;color:var(--t-dark-dim);line-height:1.45;margin:0}

/* ============================================================
   FOOTER — dark
============================================================ */
footer{background:var(--navy-d);color:var(--t-light);padding:4rem 3rem 1.5rem;position:relative}
.ft{max-width:1280px;margin:0 auto}
.ft-grid{display:grid;grid-template-columns:1.2fr 1fr 1.2fr 1fr;gap:3rem;
  padding-bottom:2.5rem;border-bottom:1px solid var(--rule-light)}

.ft-brand{display:flex;flex-direction:column;gap:.8rem}
.ft-brand .brand{align-items:center}

.ft-col h4{font-family:'Big Shoulders Display',sans-serif;font-weight:900;
  font-size:.92rem;letter-spacing:.24em;text-transform:uppercase;color:var(--blue);margin-bottom:1.2rem}
.ft-col ul{list-style:none}
.ft-col li{margin-bottom:.6rem}
.ft-col a,.ft-col span{font-size:.92rem;color:var(--t-light-dim);transition:.2s;display:flex;align-items:flex-start;gap:.6rem;line-height:1.45}
.ft-col a:hover{color:var(--t-light)}
.ft-col svg{width:15px;height:15px;color:var(--blue);flex-shrink:0;margin-top:.2rem}

.ft-grid-nav{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}

.ft-socials{display:flex;gap:.6rem;flex-wrap:wrap}
.ft-socials .ft-soc{width:38px;height:38px;border-radius:50%;background:var(--navy-l);
  display:flex;align-items:center;justify-content:center;
  color:var(--t-light-dim);transition:.25s;padding:0;gap:0}
.ft-socials .ft-soc:hover{background:var(--blue);color:var(--navy);transform:translateY(-2px)}
.ft-socials .ft-soc svg{width:15px;height:15px;margin:0;flex-shrink:0;color:inherit}

.ft-bot{display:flex;justify-content:center;align-items:center;
  padding-top:1.5rem;font-size:.78rem;color:var(--t-light-faint);text-align:center;gap:.7rem;flex-wrap:wrap}
.ft-bot a{color:var(--t-light-faint);transition:.2s;margin:0 .3rem}
.ft-bot a:hover{color:var(--t-light)}
.ft-bot .sep{color:var(--rule-light)}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:1100px){
  .hero-inner{padding:0 2rem}
  .hero-left{max-width:100%}
  .about-inner,.music-inner,.live-inner{grid-template-columns:1fr;gap:2.5rem}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav-inner{padding:1rem 1.2rem;align-items:center}
  .nav-right{gap:.5rem}
  .nav-menu{gap:1rem;font-size:.85rem}
  .nav-menu a{font-size:.78rem;letter-spacing:.15em}
}
/* ============================================================
   NAV-TOGGLE (Hamburger) — nur Mobile sichtbar
============================================================ */
.nav-toggle{display:none;background:transparent;border:0;cursor:pointer;
  width:44px;height:44px;padding:10px;
  flex-direction:column;justify-content:space-between;align-items:center;
  color:var(--t-light);z-index:60}
.nav-toggle span{display:block;width:24px;height:2px;background:currentColor;
  transition:transform .25s ease,opacity .2s ease;transform-origin:center}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:760px){
  /* ===== NAV: Hamburger + Vollbild-Overlay ===== */
  .nav-inner{padding:.7rem 1rem;align-items:center;gap:.6rem}
  .nav-toggle{display:flex}
  .brand-logo{height:64px}
  .ft-brand .brand-logo{height:58px}

  .nav-right{position:fixed;inset:0;
    background:rgba(7,15,26,.97);
    flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;
    padding:5rem 2rem 2rem;
    transform:translateX(100%);transition:transform .35s ease;
    z-index:55}
  .nav-right.is-open{transform:translateX(0)}
  .nav-menu{display:flex !important;flex-direction:column;gap:1.2rem;margin-top:0;text-align:center}
  .nav-menu a{font-size:1.5rem;letter-spacing:.18em;padding:.4rem 0}
  .nav-menu a.active::after{bottom:-6px;left:50%;transform:translateX(-50%)}
  .nav-socials{order:2;flex-direction:row;gap:1.8rem;margin-top:1rem}
  .nav-socials svg{width:30px;height:30px}
  /* Sticky-Zustand: Socials im Overlay bleiben sichtbar */
  .nav.scrolled .nav-socials{display:flex}
  .nav.scrolled .brand-logo{height:54px}
  .nav.scrolled .nav-inner{padding-top:.4rem;padding-bottom:.4rem}

  /* ===== HERO (mobil = reines Bild-Banner) ===== */
  .hero{padding:0;height:auto;min-height:clamp(360px,85vw,540px)}
  .hero-bg img{object-position:74% 30%}   /* Bild weiter nach links → Personen rechts sichtbar */
  /* Dunklen Text-Overlay mobil entfernen — nur sanfter Verlauf unten zum Übergang */
  .hero-bg::after{background:linear-gradient(180deg,
    transparent 0%,transparent 68%,rgba(13,27,42,.45) 88%,#0d1b2a 100%)}
  .hero-inner{padding:0 1.2rem}
  /* Grafik + Eyebrow mobil ausblenden (reines Bild-Banner); H1-Text bleibt unsichtbar im DOM für SEO */
  .hero-headline{margin:0}
  .hero-headline-art{display:none}
  .hero-eyebrow{display:none}

  /* ===== SECTIONS ===== */
  .about-inner,.music-inner,.live,footer{padding-left:1.2rem;padding-right:1.2rem}
  /* Reihenfolge mobil: Video → Buttons → About-Text */
  .hero-actions{display:none}                /* Header-Buttons mobil ausblenden */
  .about-video{order:1}
  .about-actions{order:2;display:flex;flex-direction:column;width:100%;gap:.7rem;margin-top:.2rem}
  .about-actions .btn{width:100%;justify-content:center;
    padding:1.05rem 1.2rem;font-size:1.05rem;gap:.6rem}
  .about-actions .btn svg{width:18px;height:18px;flex-shrink:0}
  .about-text{order:3}
  .about{padding-top:0;padding-bottom:4rem}
  .about-text h2{font-size:clamp(2rem,8vw,2.6rem)}
  .albums{grid-template-columns:1fr;gap:1rem}

  /* Story-Sektion kompakter + bündig wie der Rest */
  .story{padding:3.5rem 1.2rem 4rem}
  .story-head{margin-bottom:2rem}
  .story-feature{padding:1.8rem 1.4rem}

  /* Live-Icons: 3 nebeneinander statt untereinander */
  .live{padding:3rem 1.2rem 4rem}   /* Seiten-Padding behalten, sonst klebt der Inhalt am Rand */
  .live-inner{grid-template-columns:1fr;gap:2rem}
  .live-icons{grid-template-columns:repeat(3,1fr);gap:.6rem}
  .licon h3{font-size:1rem;letter-spacing:.04em}
  .licon p{font-size:.78rem;line-height:1.3}
  .licon-img{width:54px;height:54px;margin:0 auto .6rem}
  .licon-img svg{width:100%;height:100%}

  /* Gallery-Teaser + Sektionen knapper */
  .gallery-teaser{padding:3rem 0 4rem}
  .gallery-teaser-head h2{font-size:clamp(1.8rem,7vw,2.4rem)}
  .cta-band{padding:3.5rem 0 4rem}
  .cta-band h2{font-size:clamp(2rem,8vw,2.8rem)}
  /* (Member-Mobil-Layout steht weiter unten, NACH der Basis-Definition — sonst überschreibt das Desktop-Grid) */

  /* Media-Galerie kompakter, kleinere Lightbox-Buttons */
  .media-gallery{padding:2rem 0 4rem}
  .media-thumbs{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.35rem}

  /* News-Cards 1 Spalte */
  .news-grid{padding:2rem 0 4rem}
  .news-list{grid-template-columns:1fr}

  /* Kontakt + Veranstalter */
  .kontakt-section{padding:3rem 0 4rem}
  .downloads{padding:3rem 0 4rem}
  .contact-form{padding:3rem 0 4rem}

  /* Veranstalter-Banner mobil: bündig + reingezoomt (volle Höhe, seitlich beschnitten) */
  .vh-banner-inner{padding:0}
  .vh-banner img{height:clamp(380px,108vw,560px);object-fit:cover;object-position:50% 28%}
  .page-hero.is-after-banner{padding-top:2rem}

  /* Kontakt mobil: ganzes Bild zeigen, Schrift UNTER das Bild statt darüber */
  /* Bild unter Logo + Burger-Menü schieben (Nav-Höhe ~86px), sonst verdeckt das Logo die Personen */
  .page-kontakt .vh-banner{padding-top:88px}
  .page-kontakt .vh-banner img{height:auto;object-fit:contain;
    -webkit-mask-image:none;mask-image:none}
  .page-kontakt .vh-banner-caption{position:static;background:none;text-align:center;
    padding:1.4rem 1.2rem 0}
  .page-kontakt .page-hero.is-after-banner{padding-top:1.4rem}

  /* Veranstalter mobil: Schrift UNTER das Bild + stärker auf die Personen in der Mitte gezoomt */
  .page-veranstalter .vh-banner img{height:clamp(330px,94vw,480px);object-position:50% 46%}
  .page-veranstalter .vh-banner-inner::after{display:none}
  .page-veranstalter .vh-banner-caption{position:static;background:none;text-align:center;
    padding:1.4rem 1.2rem 0}
  .page-veranstalter .page-hero.is-after-banner{padding-top:1.4rem}

  /* Page-Hero kompakter */
  .page-hero{padding:8rem 0 2.5rem}
  .page-hero h1{font-size:clamp(2.4rem,9vw,3.6rem)}
  .page-hero p.lead{font-size:.98rem}

  /* Footer */
  .ft-grid{grid-template-columns:1fr;gap:2rem;text-align:center}
  .ft-col a,.ft-col span{justify-content:center}
  .ft-socials{justify-content:center}
  .ft-brand{display:flex;justify-content:center}
}

/* Sehr kleine Geräte (<400px) */
@media (max-width:400px){
  .live-icons{grid-template-columns:repeat(3,1fr);gap:.4rem}
  .licon-img{width:46px;height:46px}
  .licon h3{font-size:.92rem}
  .licon p{font-size:.72rem}
  .media-thumbs{grid-template-columns:repeat(2,1fr)}
  .video-grid{grid-template-columns:1fr}
}

/* ============================================================
   PAGE HERO — schlanker Header für Unterseiten (ohne Foto)
============================================================ */
/* Veranstalter — Hero-Bild-Banner oben (Bild enthält bereits Text) */
.vh-banner{background:var(--navy);padding-top:0}
.vh-banner-inner{max-width:none;margin:0;padding:0;line-height:0}
.vh-banner img{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.page-hero.is-after-banner{padding-top:2.8rem}

/* Veranstalter: Überschrift unten ins Hero-Bild gelegt (Stil wie .page-hero) */
.vh-banner-inner{position:relative}
/* Seitliche Vignette: Musiker in der Mitte rücken in den Fokus */
.page-veranstalter .vh-banner-inner::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to right,rgba(7,15,26,.88) 0%,rgba(7,15,26,0) 24%),
             linear-gradient(to left,rgba(7,15,26,.88) 0%,rgba(7,15,26,0) 24%);
  opacity:0;animation:vh-vignette 4.8s ease 1s forwards}
@keyframes vh-vignette{to{opacity:1}}
.vh-banner-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;line-height:normal;
  margin:0;padding:clamp(2.5rem,7vw,5rem) 2rem clamp(1.6rem,4vw,3.4rem);text-align:center;
  background:linear-gradient(to top,rgba(7,15,26,.88) 0%,rgba(7,15,26,.62) 50%,rgba(7,15,26,0) 100%)}
.vh-banner-caption .eyebrow{color:var(--blue-l);margin-bottom:.7rem;display:inline-block;
  text-shadow:0 2px 14px rgba(7,15,26,.55)}
.vh-banner-caption .eyebrow::after{background:var(--blue-l);left:50%;transform:translateX(-50%)}
.vh-banner-caption h1{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:clamp(3rem,7vw,5.5rem);line-height:1;letter-spacing:.02em;
  text-transform:uppercase;color:var(--t-light);margin:0;text-shadow:0 3px 22px rgba(7,15,26,.6)}
.vh-banner-caption h1 em{font-family:'Frankentype','Buckwheat TC Script Rough','Permanent Marker',cursive;
  font-style:normal;font-weight:normal;color:var(--blue-l);text-transform:none;
  font-size:1em;letter-spacing:0;margin-left:.25em}

.page-hero{background:var(--navy);color:var(--t-light);
  padding:11rem 0 4rem;text-align:center;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 20% 30%,rgba(75,163,212,.12) 0%,transparent 55%),
             radial-gradient(ellipse at 80% 70%,rgba(75,163,212,.08) 0%,transparent 50%)}
.page-hero-inner{max-width:1280px;margin:0 auto;padding:0 2rem;position:relative;z-index:2}
.page-hero .eyebrow{color:var(--blue-l);margin-bottom:.7rem;display:inline-block}
.page-hero .eyebrow::after{background:var(--blue-l);left:50%;transform:translateX(-50%)}
.page-hero h1{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:clamp(3rem,7vw,5.5rem);line-height:1;letter-spacing:.02em;
  text-transform:uppercase;color:var(--t-light);margin-bottom:.6rem}
.page-hero h1 em{font-family:'Frankentype','Buckwheat TC Script Rough','Permanent Marker',cursive;
  font-style:normal;font-weight:normal;color:var(--blue-l);text-transform:none;
  font-size:1em;letter-spacing:0;margin-left:.25em}
.page-hero p.lead{color:var(--t-light-dim);font-size:1.1rem;max-width:680px;margin:0 auto;line-height:1.6}

/* ============================================================
   BAND-MITGLIEDER (band.php)
============================================================ */
.members{background:var(--navy);color:var(--t-light);padding:4rem 0 6rem}
.members-inner{max-width:1280px;margin:0 auto;padding:0 2rem}
.members-head{text-align:center;margin-bottom:2.5rem}
.members-head h2{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:clamp(2rem,4vw,3rem);line-height:1;letter-spacing:.02em;
  text-transform:uppercase;color:var(--t-light);margin-bottom:.4rem}
.members-grid{display:flex;flex-direction:column;gap:3rem;margin-top:1rem;max-width:960px;margin-left:auto;margin-right:auto}
.member{display:grid;grid-template-columns:260px 1fr;gap:2.4rem;align-items:center;text-align:left;max-width:none;width:100%}
.member:nth-child(even){grid-template-columns:1fr 260px}
.member:nth-child(even) .member-photo{order:2}
.member-info{min-width:0}
.member-photo{aspect-ratio:3/4;overflow:hidden;border-radius:4px;margin-bottom:0;
  border:1px solid var(--rule-light)}
.member-photo img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.02) contrast(1.05)}
.member h3{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:2rem;letter-spacing:.04em;text-transform:uppercase;color:var(--t-light);margin-bottom:.4rem}
.member .role{display:block;font-family:'Big Shoulders Display',sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-l);margin-bottom:.9rem}
.member p{color:var(--t-light-dim);line-height:1.65;font-size:1.02rem;max-width:none;margin:0}

/* ============================================================
   KONTAKT-SEITE
============================================================ */
.kontakt-section{background:var(--navy);color:var(--t-light);padding:4rem 0 6rem}
.kontakt-inner{max-width:1100px;margin:0 auto;padding:0 2rem;
  display:grid;grid-template-columns:1fr 1fr;gap:4rem}
.kontakt-block h3{font-family:'Big Shoulders Display',sans-serif;font-weight:900;
  font-size:1.1rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-l);margin-bottom:1rem}
.kontakt-block p{color:var(--t-light-dim);line-height:1.75;font-size:1.02rem;margin-bottom:1rem}
.kontakt-block a{color:var(--t-light);text-decoration:none;border-bottom:1px solid rgba(245,240,230,.25);transition:.2s}
.kontakt-block a:hover{color:var(--blue);border-color:var(--blue)}
.kontakt-block strong{color:var(--t-light);font-weight:600}

/* ============================================================
   VERANSTALTER-SEITE — Downloads
============================================================ */
.downloads{background:var(--navy);color:var(--t-light);padding:4rem 0 6rem}
.downloads-inner{max-width:1280px;margin:0 auto;padding:0 2rem}
.downloads-intro{max-width:780px;margin:0 auto 3rem;text-align:center;
  color:var(--t-light-dim);line-height:1.7;font-size:1.05rem}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem}
.dl-card{background:var(--navy-l);border:1px solid var(--rule-light);padding:1.6rem 1.4rem;
  display:flex;flex-direction:column;gap:.6rem;transition:.25s;text-decoration:none}
.dl-card:hover{border-color:var(--blue);transform:translateY(-3px)}
.dl-card h4{font-family:'Big Shoulders Display',sans-serif;font-weight:900;
  font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;color:var(--t-light)}
.dl-card p{color:var(--t-light-dim);font-size:.92rem;line-height:1.55;flex-grow:1}
.dl-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--blue);font-weight:700;
  font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;margin-top:.4rem}
.dl-card:hover .dl-link{color:var(--blue-l)}
.dl-link svg{width:14px;height:14px}

/* ============================================================
   BUCHUNGS-ABLAUF & PREISFAKTOREN (Veranstalter)
============================================================ */
.booking-flow{background:var(--navy-d);color:var(--t-light);padding:5rem 0 6rem}
.booking-flow-inner{max-width:1280px;margin:0 auto;padding:0 2rem}
.booking-flow .story-head{margin-bottom:3rem}
.booking-steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.6rem;margin:0 0 3.5rem;padding:0;counter-reset:none}
.booking-steps li{background:var(--navy-l);border:1px solid var(--rule-light);
  padding:2rem 1.5rem 1.6rem;position:relative}
.booking-step-num{display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;border-radius:50%;background:var(--blue);color:var(--navy);
  font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:1.3rem;margin-bottom:1rem}
.booking-steps h3{font-family:'Big Shoulders Display',sans-serif;font-weight:900;
  font-size:1.15rem;letter-spacing:.06em;text-transform:uppercase;color:var(--t-light);margin-bottom:.5rem}
.booking-steps p{color:var(--t-light-dim);font-size:.95rem;line-height:1.6}
.price-factors{max-width:780px;margin:0 auto;text-align:center}
.price-factors h3{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:clamp(1.6rem,3vw,2.2rem);text-transform:uppercase;color:var(--blue-l);margin-bottom:1rem}
.price-factors p{color:var(--t-light-dim);line-height:1.7}
.price-factors ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.7rem;margin:1.4rem 0;padding:0}
.price-factors li{background:var(--navy-l);border:1px solid var(--rule-light);
  padding:.55rem 1.1rem;border-radius:999px;font-size:.92rem;color:var(--t-light)}
.price-factors-note{margin-top:1.4rem;font-style:italic}

/* ============================================================
   NEWS-PLATZHALTER
============================================================ */
.coming-soon{background:var(--navy);color:var(--t-light);padding:5rem 0 7rem;text-align:center}
.coming-soon-inner{max-width:680px;margin:0 auto;padding:0 2rem}
.coming-soon h2{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:clamp(2rem,4vw,3rem);text-transform:uppercase;color:var(--blue-l);margin-bottom:1.2rem}
.coming-soon p{color:var(--t-light-dim);font-size:1.1rem;line-height:1.7}

@media (max-width:760px){
  /* Band-Mitglieder mobil: Foto über Text, zentriert, untereinander */
  .members{padding:3rem 0 4rem}
  .members-grid{display:flex;flex-direction:column;gap:2.6rem;max-width:380px}
  .member,.member:nth-child(even){display:block;grid-template-columns:none;text-align:center}
  .member-photo{aspect-ratio:4/5;max-width:300px;margin:0 auto 1.1rem}
  .member:nth-child(even) .member-photo{order:0}
  .member-info p{max-width:340px;margin:0 auto}

  .kontakt-inner{grid-template-columns:1fr;gap:2.5rem}
  .page-hero{padding:9rem 0 3rem}
}

/* ============================================================
   HOME — Galerie-Teaser & Booking-CTA
============================================================ */
.gallery-teaser{background:var(--navy);color:var(--t-light);padding:5rem 0 6rem;position:relative}
.gallery-teaser-inner{max-width:1280px;margin:0 auto;padding:0 2rem;position:relative;z-index:2}
.gallery-teaser-head{text-align:center;margin-bottom:2.4rem}
.gallery-teaser-head h2{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:clamp(2.2rem,4.5vw,3.4rem);line-height:1;letter-spacing:.02em;
  text-transform:uppercase;color:var(--t-light);margin-bottom:.3rem}
.gallery-teaser-head h2 em{font-family:'Frankentype','Buckwheat TC Script Rough','Permanent Marker',cursive;
  font-style:normal;font-weight:normal;color:var(--blue-l);text-transform:none;
  font-size:1em;letter-spacing:0;margin-left:.25em}
.gallery-teaser-cta{text-align:center;margin-top:2rem}

.cta-band{background:var(--navy-d);color:var(--t-light);padding:5rem 0 5.5rem;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 30% 50%,rgba(75,163,212,.15) 0%,transparent 55%),
             radial-gradient(ellipse at 75% 60%,rgba(75,163,212,.1) 0%,transparent 50%)}
.cta-band-inner{max-width:760px;margin:0 auto;padding:0 2rem;position:relative;z-index:2}
.cta-band h2{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:clamp(2.4rem,5vw,3.8rem);line-height:1;letter-spacing:.02em;
  text-transform:uppercase;color:var(--t-light);margin-bottom:.5rem}
.cta-band h2 em{font-family:'Frankentype','Buckwheat TC Script Rough','Permanent Marker',cursive;
  font-style:normal;font-weight:normal;color:var(--blue-l);text-transform:none;
  font-size:1em;letter-spacing:0;margin-left:.25em}
.cta-band p{color:var(--t-light-dim);font-size:1.1rem;line-height:1.65;max-width:560px;margin:0 auto 1.8rem}
.cta-band-actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* ============================================================
   SOCIAL PROOF (Startseite)
============================================================ */
.proof{background:var(--navy);color:var(--t-light);padding:5rem 0 5.5rem}
.proof-inner{max-width:1080px;margin:0 auto;padding:0 2rem;text-align:center}
.proof-head{margin-bottom:3rem}
.proof-head .eyebrow::after{left:50%;transform:translateX(-50%)}
.proof-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.6rem;margin-bottom:3.5rem}
.proof-stat{background:var(--navy-l);border:1px solid var(--rule-light);padding:2.2rem 1.5rem;display:flex;flex-direction:column;gap:.7rem}
.proof-num{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;font-size:clamp(2.6rem,6vw,3.6rem);line-height:1;color:var(--blue-l)}
.proof-label{color:var(--t-light-dim);font-size:.95rem;line-height:1.5}
.proof-quote{max-width:700px;margin:0 auto;border:0;padding:0}
.proof-quote p{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;font-size:clamp(1.5rem,3.5vw,2.2rem);line-height:1.25;color:var(--t-light);text-transform:none}
.proof-quote cite{display:block;margin-top:1rem;font-style:normal;color:var(--t-light-dim);font-size:.95rem;letter-spacing:.04em}
.proof-link{margin-top:2.2rem}
.proof-link a{color:var(--blue);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.85rem}
.proof-link a:hover{color:var(--blue-l)}

/* ============================================================
   NEWS — Übersicht (news.php)
============================================================ */
.news-grid{background:var(--navy);color:var(--t-light);padding:3rem 0 6rem}
.news-grid-inner{max-width:1280px;margin:0 auto;padding:0 2rem}
.news-note{text-align:center;color:var(--t-light-dim);font-size:.92rem;margin-bottom:2.5rem;
  line-height:1.5;max-width:680px;margin-left:auto;margin-right:auto}
.news-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.6rem}
.news-card{background:var(--navy-l);border:1px solid var(--rule-light);overflow:hidden;
  display:flex;flex-direction:column;transition:.25s;text-decoration:none;color:inherit}
.news-card:hover{border-color:var(--blue);transform:translateY(-3px)}
.news-card-img{aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--navy)}
.news-card-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease}
.news-card:hover .news-card-img img{transform:scale(1.04)}
.news-card-body{padding:1.15rem 1.2rem 1.3rem;flex-grow:1;display:flex;flex-direction:column;gap:.7rem}
.news-card h3{font-family:'Big Shoulders Display',sans-serif;font-weight:900;
  font-size:1rem;letter-spacing:.03em;text-transform:uppercase;color:var(--t-light);
  line-height:1.3;margin:0}
.news-card-link{display:inline-flex;align-items:center;gap:.45rem;color:var(--blue);font-weight:700;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;margin-top:auto}
.news-card:hover .news-card-link{color:var(--blue-l)}
.news-card-link svg{width:12px;height:12px}

/* ============================================================
   MEDIA — Galerie + Lightbox
============================================================ */
.media-gallery{background:var(--navy);color:var(--t-light);padding:3rem 0 6rem}
.media-gallery-inner{max-width:1280px;margin:0 auto;padding:0 2rem}
.media-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.55rem}
.media-thumb{aspect-ratio:1;overflow:hidden;border:1px solid var(--rule-light);cursor:pointer;
  transition:.22s;background:var(--navy-l);position:relative;display:block}
.media-thumb:hover{border-color:var(--blue);transform:translateY(-2px)}
.media-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.media-thumb:hover img{transform:scale(1.06)}

/* Media-Videos */
.media-videos{background:var(--navy-d);color:var(--t-light);padding:0 0 6rem}
.media-videos-inner{max-width:1280px;margin:0 auto;padding:0 2rem}
.media-videos h2{font-family:'Big Shoulders Display','Anton',sans-serif;font-weight:700;
  font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:.01em;margin:0 0 .4rem}
.media-videos-lead{color:var(--t-light-dim);max-width:60ch;margin:0 0 1.8rem}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.media-video{aspect-ratio:16/9;overflow:hidden;border:1px solid var(--rule-light);
  background:var(--navy-l);transition:.22s}
.media-video:hover{border-color:var(--blue);transform:translateY(-2px)}
.media-video-title{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.6rem .9rem .7rem;font-family:'Big Shoulders Display','Anton',sans-serif;
  font-weight:600;font-size:1rem;line-height:1.15;color:#fff;
  background:linear-gradient(to top,rgba(7,15,26,.85),rgba(7,15,26,0))}

/* Lightbox */
.video-modal{position:fixed;inset:0;background:rgba(7,15,26,.94);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:2rem;
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.video-modal.is-open{opacity:1;visibility:visible}
.video-modal-frame{position:relative;width:min(90vw,1100px);aspect-ratio:16/9;
  box-shadow:0 18px 60px rgba(0,0,0,.6);border-radius:4px;overflow:hidden;background:#000}
.video-modal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-modal-close{position:fixed;top:1rem;right:1.2rem;background:transparent;border:0;
  color:var(--t-light);cursor:pointer;padding:.8rem;line-height:0;transition:color .2s}
.video-modal-close:hover{color:var(--blue)}
.video-modal-close svg{width:30px;height:30px}

.lightbox{position:fixed;inset:0;background:rgba(7,15,26,.94);z-index:200;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox-img{max-width:92vw;max-height:88vh;object-fit:contain;
  box-shadow:0 18px 60px rgba(0,0,0,.6);border-radius:3px;
  transition:opacity .2s ease}
.lightbox-close,.lightbox-nav{position:fixed;background:transparent;border:0;
  color:var(--t-light);cursor:pointer;padding:.8rem;line-height:0;transition:color .2s}
.lightbox-close:hover,.lightbox-nav:hover{color:var(--blue)}
.lightbox-close{top:1rem;right:1.2rem}
.lightbox-close svg{width:30px;height:30px}
.lightbox-nav{top:50%;transform:translateY(-50%)}
.lightbox-nav svg{width:34px;height:34px}
.lightbox-prev{left:.6rem}
.lightbox-next{right:.6rem}
.lightbox-counter{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);
  color:var(--t-light-dim);font-family:'Big Shoulders Display',sans-serif;font-weight:700;
  font-size:.85rem;letter-spacing:.18em;text-transform:uppercase}
@media (max-width:760px){
  .lightbox-nav svg{width:26px;height:26px}
  .media-thumbs{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.4rem}
}

/* ============================================================
   KONTAKT — Formular
============================================================ */
.contact-form{background:var(--navy-d);color:var(--t-light);padding:4rem 0 6rem;position:relative;overflow:hidden}
.contact-form::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 70% 30%,rgba(75,163,212,.10) 0%,transparent 55%)}
.contact-form-inner{max-width:760px;margin:0 auto;padding:0 2rem;position:relative;z-index:2}
.contact-form-head{text-align:center;margin-bottom:2.2rem}
.contact-form-head h2{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:clamp(2rem,4vw,3rem);line-height:1;letter-spacing:.02em;
  text-transform:uppercase;color:var(--t-light);margin-bottom:.4rem}
.contact-form-head h2 em{font-family:'Frankentype','Buckwheat TC Script Rough','Permanent Marker',cursive;
  font-style:normal;font-weight:normal;color:var(--blue-l);text-transform:none;
  font-size:1em;letter-spacing:0;margin-left:.25em}
.contact-form-head p{color:var(--t-light-dim);font-size:1.02rem;line-height:1.6;max-width:560px;margin:0 auto}

.contact-form form{display:flex;flex-direction:column;gap:1.1rem;margin-top:.8rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form-row-3{grid-template-columns:1fr 1fr 1fr}
.contact-form label{display:flex;flex-direction:column;gap:.4rem;
  font-family:'Big Shoulders Display',sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t-light-dim)}
.contact-form input[type=text],.contact-form input[type=email],.contact-form textarea{
  background:rgba(255,255,255,.04);border:1px solid var(--rule-light);
  color:var(--t-light);padding:.85rem 1rem;
  font-family:'Manrope',sans-serif;font-size:1rem;font-weight:400;
  letter-spacing:0;text-transform:none;line-height:1.5;
  transition:border-color .2s ease,background .2s ease;border-radius:3px;width:100%}
.contact-form input:focus,.contact-form textarea:focus{outline:0;border-color:var(--blue);
  background:rgba(255,255,255,.07)}
.contact-form textarea{resize:vertical;min-height:160px}
.contact-form .form-hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.form-consent{display:flex;align-items:flex-start;gap:.7rem;font-family:'Manrope',sans-serif;
  font-size:.88rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--t-light-dim);line-height:1.5}
.form-consent input[type=checkbox]{margin-top:.2rem;flex-shrink:0;
  accent-color:var(--blue);width:16px;height:16px;cursor:pointer}
.form-consent a{color:var(--blue-l);text-decoration:underline;text-underline-offset:2px}
.form-consent a:hover{color:var(--blue)}
.contact-form button.btn{align-self:flex-start;margin-top:.5rem;cursor:pointer}

.form-msg{padding:1rem 1.2rem;border-left:3px solid;margin-bottom:1.4rem;line-height:1.5;
  font-size:.96rem;font-family:'Manrope',sans-serif;border-radius:0 3px 3px 0;
  background:rgba(255,255,255,.04)}
.form-msg-success{border-color:var(--blue);color:var(--t-light)}
.form-msg-error{border-color:#dc6a6a;color:var(--t-light)}
.form-msg strong{color:var(--blue-l)}

@media (max-width:600px){.form-row{grid-template-columns:1fr}}
@media (max-width:760px){.form-row-3{grid-template-columns:1fr}}

/* ============================================================
   LEGAL — Impressum & Datenschutz
============================================================ */
.legal{background:var(--navy);color:var(--t-light);padding:3rem 0 6rem}
.legal-inner{max-width:820px;margin:0 auto;padding:0 2rem;line-height:1.7}
.legal h2{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:1.7rem;text-transform:uppercase;letter-spacing:.02em;
  color:var(--blue-l);margin-top:2.6rem;margin-bottom:.8rem;line-height:1.2}
.legal h2:first-child{margin-top:0}
.legal h3{font-family:'Big Shoulders Display',sans-serif;font-weight:900;
  font-size:1rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-light);margin-top:1.7rem;margin-bottom:.5rem}
.legal h4{font-family:'Big Shoulders Display',sans-serif;font-weight:700;
  font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-l);margin-top:1.2rem;margin-bottom:.4rem}
.legal p{color:var(--t-light-dim);margin-bottom:1rem;font-size:1rem}
.legal ul{margin:0 0 1.2rem 1.4rem;color:var(--t-light-dim)}
.legal li{margin-bottom:.3rem}
.legal a{color:var(--blue-l);border-bottom:1px solid rgba(127,196,231,.3);transition:.2s;word-break:break-word}
.legal a:hover{color:var(--blue);border-color:var(--blue)}
.legal strong{color:var(--t-light)}
.legal address{font-style:normal;color:var(--t-light);margin-bottom:1rem;line-height:1.6}
.legal hr{border:0;border-top:1px solid var(--rule-light);margin:2rem 0}

/* ============================================================
   REGION-SEITEN (oktoberfestband-[ort])
============================================================ */
.region-body{background:var(--navy);color:var(--t-light);padding:3rem 0 6rem}
.region-body-inner{max-width:880px;margin:0 auto;padding:0 2rem;line-height:1.75}
.region-text h2{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:clamp(1.7rem,3.5vw,2.4rem);text-transform:uppercase;letter-spacing:.02em;
  color:var(--blue-l);margin:2.4rem 0 .9rem;line-height:1.15}
.region-text h2:first-child{margin-top:0}
.region-text h3{font-family:'Big Shoulders Display',sans-serif;font-weight:900;
  font-size:1.05rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--t-light);margin:1.6rem 0 .5rem}
.region-text p{color:var(--t-light-dim);margin-bottom:1.1rem;font-size:1.04rem}
.region-text a{color:var(--blue-l);border-bottom:1px solid rgba(127,196,231,.3);transition:.2s}
.region-text a:hover{color:var(--blue);border-color:var(--blue)}
.region-text strong{color:var(--t-light)}
.region-text p.vollgas-cta{background:var(--navy-l);border-left:3px solid var(--blue);
  padding:1rem 1.2rem;color:var(--t-light);font-size:1.04rem}
.region-text p.vollgas-cta strong{color:var(--blue-l)}
.local-photo{margin:0 auto;max-width:1080px;padding:2.5rem 2rem 0}
.local-photo img{display:block;width:100%;height:auto;border:1px solid var(--rule-light);
  border-radius:4px}
@media (max-width:760px){.local-photo{padding:1.6rem 1rem 0}}
.region-text ul{margin:0 0 1.2rem 1.4rem;color:var(--t-light-dim)}

.region-cities-block{margin-top:3rem;padding-top:2.4rem;border-top:1px solid var(--rule-light)}
.region-cities-block h2{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:clamp(1.5rem,3vw,2rem);text-transform:uppercase;letter-spacing:.02em;
  color:var(--t-light);margin-bottom:1.2rem}
.region-cities{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;padding:0}
.region-cities li{margin:0}
.region-cities a{display:inline-block;padding:.55rem 1rem;
  background:var(--navy-l);border:1px solid var(--rule-light);
  font-family:'Big Shoulders Display',sans-serif;font-weight:700;font-size:.92rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--t-light);
  border-radius:3px;transition:.2s;text-decoration:none}
.region-cities a:hover{border-color:var(--blue);color:var(--blue-l);background:var(--navy-2)}

.region-back-link{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule-light);
  color:var(--t-light-dim);font-size:.95rem}
.region-back-link a{color:var(--blue-l);border-bottom:1px solid rgba(127,196,231,.3)}
.region-back-link a:hover{color:var(--blue)}

.region-cta{margin-top:3rem;padding:2rem;background:var(--navy-l);
  border-left:3px solid var(--blue);text-align:center}
.region-cta h3{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:1.6rem;text-transform:uppercase;letter-spacing:.02em;
  color:var(--t-light);margin-bottom:.5rem}
.region-cta p{color:var(--t-light-dim);margin-bottom:1.2rem;font-size:1rem}

/* Regionen-Hub */
.regions-overview{background:var(--navy);color:var(--t-light);padding:3rem 0 6rem}
.regions-overview-inner{max-width:1100px;margin:0 auto;padding:0 2rem}
.region-block{margin-bottom:2.6rem;padding-bottom:2rem;border-bottom:1px solid var(--rule-light)}
.region-block:last-child{border-bottom:0;margin-bottom:0}
.region-block h2{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:clamp(1.5rem,3vw,2rem);text-transform:uppercase;letter-spacing:.02em;
  margin-bottom:1rem;line-height:1.2}
.region-block h2 a{color:var(--t-light);transition:.2s}
.region-block h2 a:hover{color:var(--blue-l)}
.region-cities-flat{display:flex;flex-wrap:wrap;gap:.5rem}

/* ============================================================
   FAQ-Sektion (Lokationsseiten)
============================================================ */
.region-faq{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--rule-light)}
.region-faq > h2{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:clamp(1.5rem,3vw,2rem);text-transform:uppercase;letter-spacing:.02em;
  color:var(--t-light);margin-bottom:1.4rem}
.faq-item{background:var(--navy-l);border:1px solid var(--rule-light);
  margin-bottom:.7rem;border-radius:3px;overflow:hidden}
.faq-item summary{padding:1rem 1.2rem;cursor:pointer;
  font-family:'Big Shoulders Display',sans-serif;font-weight:700;
  font-size:.98rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--t-light);list-style:none;transition:.2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';float:right;font-size:1.4rem;line-height:1;
  color:var(--blue-l);transition:transform .25s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{background:var(--navy-2);color:var(--blue-l)}
.faq-item[open] summary{background:var(--navy-2);color:var(--blue-l)}
.faq-item p{padding:0 1.2rem 1.2rem;color:var(--t-light-dim);line-height:1.65;
  font-size:.98rem;margin:0}

/* ============================================================
   NEWS-DETAILSEITE
============================================================ */
.news-article-wrap{background:var(--navy);color:var(--t-light);padding:0 0 6rem}
.news-article-inner{max-width:880px;margin:0 auto;padding:0 2rem}
.news-article-hero{margin:-2rem 0 2.5rem;border-radius:4px;overflow:hidden;
  border:1px solid var(--rule-light);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.news-article-hero img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.news-article{line-height:1.75;font-size:1.05rem}
.news-article h2{font-family:'Buckwheat TC Rough','Anton',sans-serif;font-weight:normal;
  font-size:clamp(1.5rem,3vw,2rem);text-transform:uppercase;letter-spacing:.02em;
  color:var(--blue-l);margin:2.4rem 0 .9rem;line-height:1.2}
.news-article p{color:var(--t-light-dim);margin-bottom:1.2rem}
.news-article strong{color:var(--t-light)}
.news-article em{font-style:italic;color:var(--t-light)}
.news-article a{color:var(--blue-l);border-bottom:1px solid rgba(127,196,231,.3)}
.news-article a:hover{color:var(--blue);border-color:var(--blue)}

.news-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--rule-light)}
.news-nav-link{display:flex;flex-direction:column;gap:.4rem;padding:1rem 1.2rem;
  background:var(--navy-l);border:1px solid var(--rule-light);
  transition:.25s;text-decoration:none}
.news-nav-link:hover{border-color:var(--blue);background:var(--navy-2)}
.news-nav-prev{text-align:left}
.news-nav-next{text-align:right;grid-column:2}
.news-nav-label{font-family:'Big Shoulders Display',sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-l)}
.news-nav-title{font-family:'Big Shoulders Display',sans-serif;font-weight:900;
  font-size:.96rem;color:var(--t-light);line-height:1.3}

.news-back-cta{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;
  margin-top:3rem;padding-top:2rem;border-top:1px solid var(--rule-light)}

.news-card-date{display:block;font-family:'Big Shoulders Display',sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-l)}

@media (max-width:600px){
  .news-nav{grid-template-columns:1fr}
  .news-nav-next{grid-column:1;text-align:left}
}

/* ============================================================
   Hero-Tagline rechts unten (über Hero-Bild)
============================================================ */