/* =====================================================================
   Orangeshakers – Relaunch
   Retro-Soul/Funk Plakatstil – DSGVO-konform, ohne externe Tracker.
   ===================================================================== */

/* ---------- Self-hosted Webfonts (DSGVO-konform) -------------------- */
@font-face {
   font-family: "Oswald";
   src: url("../fonts/oswald-regular-webfont.woff2") format("woff2"),
        url("../fonts/oswald-regular-webfont.woff")  format("woff");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: "Raleway";
   src: url("../fonts/raleway-regular-webfont.woff2") format("woff2"),
        url("../fonts/raleway-regular-webfont.woff")  format("woff");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

/* ---------- Design-Tokens ------------------------------------------- */
:root {
   --orange:        #f07d00;
   --orange-dark:   #b85d00;
   --orange-light:  #ffb27a;
   --cream:         #fbe9c8;
   --cream-soft:    #fff5e1;
   --black:         #14110f;
   --ink:           #221b16;
   --paper:         #fff8ec;
   --magenta:       #b53574;
   --yellow:        #ffc93c;
   --teal:          #1f7a8c;

   --radius:        14px;
   --radius-sm:     8px;
   --shadow-card:   6px 6px 0 var(--black);
   --shadow-soft:   0 8px 24px rgba(20,17,15,.18);
   --maxw:          1180px;
   --gap:           clamp(1rem, 2vw, 1.75rem);
   --header-h:      72px;
}

/* ---------- Reset / Base -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
   margin: 0;
   font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
   color: var(--ink);
   background: var(--paper);
   line-height: 1.6;
   overflow-x: clip;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   /* Plakat-Hintergrund: feines Korn + Streifen */
   background-image:
      radial-gradient(rgba(20,17,15,.05) 1px, transparent 1px),
      linear-gradient(180deg, var(--paper) 0%, var(--cream-soft) 100%);
   background-size: 4px 4px, 100% 100%;
   min-height: 100vh;
}

img { max-width: 100%; display: block; height: auto; }
a   { color: var(--orange-dark); text-decoration: none; }
a:hover, a:focus-visible { color: var(--paper); text-decoration: underline; }

h1, h2, h3, h4 {
   font-family: "Oswald", "Anton", "Impact", sans-serif;
   text-transform: uppercase;
   letter-spacing: .02em;
   color: var(--black);
   line-height: 1.05;
   margin: 0 0 .4em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); }

p  { margin: 0 0 1em; }
hr {
   border: 0;
   height: 3px;
   background: repeating-linear-gradient(90deg, var(--black) 0 8px, transparent 8px 16px);
   margin: 1.4em 0;
}

::selection { background: var(--orange); color: var(--paper); }

/* ---------- Layout-Utilities ---------------------------------------- */
.container {
   width: min(100% - 2rem, var(--maxw));
   margin-inline: auto;
}

.section {
   padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.grid {
   display: grid;
   gap: var(--gap);
}

/* ---------- Header / Navigation ------------------------------------- */
.site-header {
   position: sticky;
   top: 0;
   z-index: 50;
   background: var(--black);
   color: var(--paper);
   border-bottom: 4px solid var(--orange);
}
.site-header__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: .6rem 1rem;
   max-width: var(--maxw);
   margin-inline: auto;
}
.brand {
   display: flex;
   align-items: center;
   gap: .6rem;
   color: var(--paper);
   font-family: "Oswald", sans-serif;
   font-size: 1.4rem;
   text-transform: uppercase;
   letter-spacing: .08em;
}
.brand img { height: 44px; width: auto; }
.brand:hover { text-decoration: none; color: var(--orange); }

.nav-toggle {
   display: none;
   background: var(--orange);
   color: var(--black);
   border: 0;
   font: inherit;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   font-size: 1rem;
   padding: .55rem .9rem;
   border-radius: var(--radius-sm);
   cursor: pointer;
}

.main-nav ul {
   display: flex;
   gap: .25rem;
   list-style: none;
   margin: 0; padding: 0;
}
.main-nav a {
   display: inline-block;
   padding: .55rem .9rem;
   color: var(--paper);
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .06em;
   border-radius: var(--radius-sm);
   transition: background .15s, color .15s, transform .15s;
}
.main-nav a:hover,
.main-nav a:focus-visible { background: var(--orange); color: var(--black); text-decoration: none; transform: translateY(-1px); }
.main-nav a[aria-current="page"] { background: var(--orange); color: var(--black); }

@media (max-width: 800px) {
   .nav-toggle { display: inline-block; }
   .main-nav {
      position: absolute;
      inset: 100% 0 auto 0;
      background: var(--black);
      border-bottom: 4px solid var(--orange);
      /* display wird vom Inline-Style mit ID-Selektor gesteuert */
   }
   .main-nav ul { flex-direction: column; padding: .5rem 1rem 1rem; gap: 0; }
   .main-nav a { padding: .9rem .5rem; border-bottom: 1px dashed rgba(255,255,255,.2); border-radius: 0; }
}

/* ---------- Hero / Page-Header -------------------------------------- */
.hero {
   position: relative;
   overflow: hidden;
   color: var(--paper);
   background: var(--black);
   padding: clamp(3rem, 9vw, 6rem) 0 clamp(3rem, 8vw, 5.5rem);
   isolation: isolate;
}
.hero::before {
   content: "";
   position: absolute; inset: 0;
   background:
      radial-gradient(circle at 80% 20%, rgba(255,106,0,.55), transparent 55%),
      radial-gradient(circle at 10% 90%, rgba(181,53,116,.45), transparent 50%),
      repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px);
   z-index: -1;
}
.hero h1 { color: var(--paper); margin-bottom: .25rem; }
.hero .hero-sub {
   display: block;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--orange);
   font-size: clamp(1rem, 1.8vw, 1.4rem);
   margin: 0 0 1rem;
   line-height: 1.2;
}
.hero .kicker { display: none; }
.hero p.lead { font-size: 1.15rem; max-width: 60ch; }
.hero .next-gig {
   margin-top: 1.5rem;
   display: inline-flex;
   gap: .8rem;
   align-items: center;
   background: var(--paper);
   color: var(--black);
   padding: .8rem 1.1rem;
   border: 3px solid var(--black);
   border-radius: var(--radius);
   box-shadow: var(--shadow-card);
   transform: rotate(-1deg);
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   text-decoration: none;
}
.hero .next-gig:hover {
   transform: rotate(0deg) translateY(-2px);
   text-decoration: none;
}
.hero .next-gig .badge {
   background: var(--orange);
   color: var(--black);
   padding: .15rem .5rem;
   border-radius: 999px;
   font-size: .85rem;
}

/* ---------- Buttons ------------------------------------------------- */
.btn {
   --btn-bg: var(--orange);
   --btn-fg: var(--black);
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .06em;
   padding: .75rem 1.2rem;
   background: var(--btn-bg);
   color: var(--btn-fg);
   border: 3px solid var(--black);
   border-radius: var(--radius);
   box-shadow: var(--shadow-card);
   cursor: pointer;
   text-decoration: none;
   transition: transform .15s, box-shadow .15s;
}
.btn:hover {
   transform: translate(-2px, -2px);
   box-shadow: 8px 8px 0 var(--black);
   text-decoration: none;
   color: var(--btn-fg);
}
.btn:active {
   transform: translate(2px, 2px);
   box-shadow: 2px 2px 0 var(--black);
}
.btn--ghost  { --btn-bg: transparent; --btn-fg: var(--paper); border-color: var(--paper); }
.btn--ghost:hover { --btn-bg: var(--paper); --btn-fg: var(--black); }
.btn--cream  { --btn-bg: var(--cream); }
.btn--small  { padding: .45rem .8rem; font-size: .9rem; }

/* ---------- Section-Headlines --------------------------------------- */
.section-head {
   text-align: center;
   margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.section-head .stamp { display: none; }
.section-head h2 { margin: 0; }
.section-head .sub {
   display: block;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: var(--orange-dark);
   font-size: clamp(.95rem, 1.6vw, 1.2rem);
   margin: .35rem auto 0;
   max-width: 60ch;
}
.section-head p  { color: var(--ink); opacity: .8; max-width: 60ch; margin: .3rem auto 0; }

/* ---------- Cards (allgemein) --------------------------------------- */
.card {
   background: var(--paper);
   border: 3px solid var(--black);
   border-radius: var(--radius);
   box-shadow: var(--shadow-card);
   padding: 1.2rem;
   transition: transform .2s, box-shadow .2s;
}
.card:hover {
   transform: translate(-2px, -2px);
   box-shadow: 8px 8px 0 var(--black);
}

/* ---------- Bandinfo (HEIM) ----------------------------------------- */
.facts {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 1rem;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.facts li {
   background: var(--paper);
   border: 3px solid var(--black);
   border-radius: var(--radius);
   padding: 1rem 1.1rem;
   box-shadow: var(--shadow-card);
   position: relative;
}
.facts li::before {
   content: counter(fact);
   counter-increment: fact;
   position: absolute;
   top: -14px; left: -14px;
   width: 36px; height: 36px;
   background: var(--orange);
   color: var(--black);
   border: 3px solid var(--black);
   border-radius: 50%;
   display: grid;
   place-items: center;
   font-family: "Oswald", sans-serif;
   font-size: 1.1rem;
}
.facts { counter-reset: fact; }
.hl { background: var(--yellow); padding: 0 .25em; border-radius: 4px; }
/* In FAQ-Antworten kein Block-Highlight — nur fett, gleiche Schriftfarbe */
.faq .hl { background: transparent !important; color: inherit !important; padding: 0; border-radius: 0; font-style: normal; font-weight: 700; }

/* ---------- DSGVO YouTube-Embed ------------------------------------- */
.yt-embed {
   position: relative;
   aspect-ratio: 16 / 9;
   width: 100%;
   max-width: 920px;
   margin: 1.5rem auto;
   border: 3px solid var(--black);
   border-radius: var(--radius);
   box-shadow: var(--shadow-card);
   overflow: hidden;
   background: var(--black);
}
.yt-embed img,
.yt-embed iframe {
   width: 100%; height: 100%;
   display: block;
   border: 0;
}
.yt-embed .yt-cover {
   position: absolute; inset: 0;
   background: var(--black);
   color: var(--paper);
   cursor: pointer;
   border: 0;
   padding: 0;
   font: inherit;
   text-align: left;
}
.yt-embed .yt-cover img {
   width: 100%; height: 100%; object-fit: cover; opacity: .65;
   transition: opacity .2s, transform .3s;
}
.yt-embed .yt-cover:hover img { opacity: .85; transform: scale(1.02); }
.yt-embed .yt-play {
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
}
.yt-embed .yt-play span {
   display: inline-block;
   width: 78px; height: 78px;
   background: var(--orange);
   border: 3px solid var(--black);
   border-radius: 50%;
   position: relative;
   box-shadow: 4px 4px 0 var(--black);
   transition: transform .15s;
}
.yt-embed .yt-cover:hover .yt-play span { transform: scale(1.07); }
.yt-embed .yt-play span::after {
   content: "";
   position: absolute;
   top: 50%; left: 56%;
   transform: translate(-50%, -50%);
   border: 16px solid transparent;
   border-left-color: var(--black);
   border-right: 0;
}
.yt-embed .yt-info {
   position: absolute;
   left: 0; right: 0; bottom: 0;
   padding: .9rem 1.1rem;
   background: linear-gradient(180deg, transparent, rgba(20,17,15,.85));
   color: var(--paper);
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .04em;
   display: flex;
   justify-content: space-between;
   gap: .6rem;
   align-items: end;
}
.yt-embed .yt-info small {
   font-family: "Raleway", sans-serif;
   text-transform: none;
   letter-spacing: 0;
   opacity: .8;
   font-size: .8rem;
}

/* ---------- Bandmitglieder (SEHEN) ---------------------------------- */
.members {
   display: grid;
   gap: var(--gap);
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.member {
   background: var(--paper);
   border: 3px solid var(--black);
   border-radius: var(--radius);
   box-shadow: var(--shadow-card);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transition: transform .2s, box-shadow .2s;
}
.member:hover {
   transform: translate(-2px, -3px) rotate(-.4deg);
   box-shadow: 9px 9px 0 var(--black);
}
.member__img {
   aspect-ratio: 1 / 1;
   background: var(--cream);
   overflow: hidden;
   border-bottom: 3px solid var(--black);
}
.member__img img {
   width: 100%; height: 100%;
   object-fit: cover;
   transition: transform .4s;
}
.member:hover .member__img img { transform: scale(1.05); }
.member__body { padding: 1rem 1.1rem 1.2rem; }
.member__role {
   display: inline-block;
   background: var(--orange);
   color: var(--black);
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   font-size: .9rem;
   padding: .15rem .55rem;
   border: 2px solid var(--black);
   border-radius: 4px;
   margin-bottom: .4rem;
}
.member__name { margin: 0 0 .2rem; }
.member__excerpt { font-size: .95rem; }
.member__more {
   display: inline-flex;
   align-items: center;
   gap: .4rem;
   margin-top: .6rem;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--orange-dark);
}
.member__more::after { content: "→"; transition: transform .2s; }
.member:hover .member__more::after { transform: translateX(4px); }

/* Modal-Detail (per :target) */
.member-modal {
   position: fixed;
   inset: 0;
   background: rgba(20,17,15,.7);
   display: none;
   align-items: center;
   justify-content: center;
   padding: 1rem;
   z-index: 100;
}
.member-modal:target,
.member-modal.is-open { display: flex; }
body.modal-open { overflow: hidden; }
.member-modal__inner {
   background: var(--paper);
   border: 4px solid var(--black);
   border-radius: var(--radius);
   max-width: 720px;
   width: 100%;
   max-height: 90vh;
   overflow: auto;
   box-shadow: 12px 12px 0 var(--orange);
   padding: 1.4rem 1.4rem 1.6rem;
   position: relative;
}
.member-modal__close {
   position: absolute;
   top: .6rem; right: .8rem;
   background: var(--black);
   color: var(--paper);
   width: 36px; height: 36px;
   display: grid; place-items: center;
   border-radius: 50%;
   font-size: 1.2rem;
   text-decoration: none;
}
.member-modal__close:hover { background: var(--orange); color: var(--black); }
.member-modal__head {
   display: grid;
   grid-template-columns: 140px 1fr;
   gap: 1rem;
   align-items: center;
   margin-bottom: 1rem;
}
.member-modal__head img {
   width: 140px; height: 140px;
   object-fit: cover;
   border: 3px solid var(--black);
   border-radius: var(--radius);
}
.member-modal__name { margin: 0; }
.member-modal__role { display: inline-block; background: var(--orange); color: var(--black); padding: .1rem .5rem; border: 2px solid var(--black); border-radius: 4px; font-family: "Oswald", sans-serif; text-transform: uppercase; }
.member-modal dl {
   display: grid;
   grid-template-columns: max-content 1fr;
   gap: .25rem 1rem;
   margin: 1rem 0 0;
}
.member-modal dt { font-family: "Oswald", sans-serif; text-transform: uppercase; color: var(--orange-dark); }
.member-modal dd { margin: 0; }

@media (max-width: 540px) {
   .member-modal__head { grid-template-columns: 1fr; text-align: center; justify-items: center; }
   .member-modal dl { grid-template-columns: 1fr; gap: 0 0; }
   .member-modal dd { margin-bottom: .6rem; }
}

/* ---------- Galerie ------------------------------------------------- */
.gallery {
   display: grid;
   gap: .7rem;
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.gallery a {
   display: block;
   border: 3px solid var(--black);
   border-radius: var(--radius-sm);
   overflow: hidden;
   box-shadow: 4px 4px 0 var(--black);
   transition: transform .2s, box-shadow .2s;
   background: var(--paper);
   position: relative;
}
.gallery a:nth-child(3n)   { transform: rotate(-.6deg); }
.gallery a:nth-child(3n+1) { transform: rotate(.4deg); }
.gallery a:nth-child(5n)   { transform: rotate(-.2deg); }
.gallery a:hover {
   transform: scale(1.04) rotate(0);
   box-shadow: 8px 8px 0 var(--orange);
   z-index: 2;
}
.gallery img {
   aspect-ratio: 4 / 3;
   width: 100%;
   object-fit: cover;
}

/* Lightbox (dialog-basiert) */
.lightbox {
   border: 0;
   padding: 0;
   background: transparent;
   max-width: 96vw;
   max-height: 96vh;
}
.lightbox::backdrop { background: rgba(20,17,15,.85); }
.lightbox img {
   max-width: 96vw;
   max-height: 80vh;
   object-fit: contain;
   border: 3px solid var(--paper);
   border-radius: var(--radius);
   background: var(--black);
}
.lightbox .lb-controls {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: .5rem;
   margin-top: .8rem;
   color: var(--paper);
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
}
.lightbox button {
   background: var(--orange);
   color: var(--black);
   border: 2px solid var(--paper);
   font: inherit;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   padding: .45rem .8rem;
   border-radius: var(--radius-sm);
   cursor: pointer;
}
.lightbox button:hover { background: var(--paper); color: var(--black); }

/* ---------- Termine (ERLEBEN) --------------------------------------- */
.gigs {
   display: grid;
   gap: var(--gap);
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.gig {
   background: var(--paper);
   border: 3px solid var(--black);
   border-radius: var(--radius);
   box-shadow: var(--shadow-card);
   padding: 1.1rem 1.2rem 1.3rem;
   display: grid;
   grid-template-columns: 90px 1fr;
   gap: 1rem;
   align-items: start;
   position: relative;
   transition: transform .2s, box-shadow .2s;
}
.gig:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--orange); }
.gig.is-past { opacity: .55; filter: grayscale(.5); }
.gig.is-past::after {
   content: "VORBEI";
   position: absolute;
   top: 12px; right: -10px;
   background: rgba(20,17,15,.85);
   color: var(--orange);
   font-family: "Oswald", sans-serif;
   padding: .15rem .55rem;
   border: 2px solid var(--orange);
   transform: rotate(8deg);
   font-size: .8rem;
   letter-spacing: .1em;
}
.gig__date {
   background: var(--black);
   color: var(--paper);
   border-radius: var(--radius-sm);
   text-align: center;
   padding: .5rem .4rem .6rem;
   border: 3px solid var(--black);
}
.gig__date .wd,
.gig__date .mon {
   display: block;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   font-size: .9rem;
   letter-spacing: .08em;
   color: var(--orange);
}
.gig__date .wd { margin-bottom: .15rem; }
.gig__date .mon { margin-top: .15rem; }
.gig__date .day {
   display: block;
   font-family: "Oswald", sans-serif;
   font-size: 2.4rem;
   line-height: 1;
   color: var(--paper);
}
.gig__date .yr {
   display: block;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   font-size: .8rem;
   letter-spacing: .12em;
   color: var(--orange);
   margin-top: .25rem;
   opacity: .85;
}
.gig__title { margin: 0 0 .25rem; font-size: 1.2rem; }
.gig__meta { font-size: .9rem; color: var(--ink); }
.gig__meta li { list-style: none; padding-left: 1.4rem; position: relative; margin-bottom: .15rem; }
.gig__meta li::before {
   content: "";
   position: absolute;
   left: 0; top: .55em;
   width: .9em; height: .9em;
   border-radius: 50%;
   background: var(--orange);
   border: 2px solid var(--black);
}
.gig__meta ul { padding: 0; margin: 0; }
.gig__cta {
   margin-top: .7rem;
   display: flex;
   gap: .5rem;
   flex-wrap: wrap;
}

/* Dezenter Kalender-Link – kein Button mehr, einfacher Textlink mit Plus-Icon */
.cal-link {
   display: inline-flex;
   align-items: center;
   gap: .25rem;
   font-family: "Raleway", sans-serif;
   font-size: .85rem;
   color: rgba(255,248,236,.6);
   text-decoration: none;
   border-bottom: 1px dotted rgba(255,255,255,.25);
   padding: 0;
   transition: color .15s, border-color .15s;
}
.cal-link:hover { color: var(--orange); border-bottom-color: var(--orange); text-decoration: none; }

.filter-bar {
   display: flex;
   gap: .5rem;
   justify-content: center;
   margin-bottom: 1.6rem;
   flex-wrap: wrap;
}
.filter-bar button {
   font: inherit;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   background: var(--paper);
   border: 3px solid var(--black);
   color: var(--black);
   padding: .45rem .9rem;
   border-radius: var(--radius-sm);
   cursor: pointer;
   box-shadow: 3px 3px 0 var(--black);
}
.filter-bar button[aria-pressed="true"] {
   background: var(--orange);
}

/* ---------- FAQ ----------------------------------------------------- */
.faq {
   display: grid;
   gap: 1rem;
   max-width: 820px;
   margin: 0 auto;
   counter-reset: faq-track;
}
.faq details {
   counter-increment: faq-track;
   position: relative;
   background:
      radial-gradient(ellipse at 18% 22%, rgba(140,100,40,.07) 0%, transparent 45%),
      radial-gradient(ellipse at 82% 78%, rgba(150,110,50,.06) 0%, transparent 50%),
      linear-gradient(180deg, #f7e9c2 0%, #ecdba0 100%);
   color: #1a1208;
   border: 1px solid rgba(80,50,20,.35);
   border-radius: 3px;
   box-shadow: 4px 4px 0 rgba(40,25,5,.25), 0 6px 14px rgba(0,0,0,.25);
   overflow: hidden;
   transition: transform .25s, box-shadow .25s;
}
.faq details:nth-child(odd)  { transform: rotate(-1deg); }
.faq details:nth-child(even) { transform: rotate(1deg); }
.faq details:hover {
   transform: rotate(0) translateY(-1px);
   box-shadow: 5px 5px 0 rgba(40,25,5,.3), 0 8px 18px rgba(0,0,0,.3);
}
.faq summary {
   list-style: none;
   cursor: pointer;
   padding: 1rem 1.2rem 1rem 4.6rem;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .06em;
   font-size: 1.05rem;
   color: #1a1208;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
   position: relative;
   transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }

/* Vinyl-Plattenlabel mit Track-Nummer links */
.faq summary::before {
   content: counter(faq-track, decimal-leading-zero);
   position: absolute;
   left: .9rem;
   top: 50%;
   transform: translateY(-50%);
   width: 38px; height: 38px;
   border-radius: 50%;
   background:
      repeating-radial-gradient(circle, rgba(255,255,255,.06) 0 1px, transparent 1px 3px),
      #1a1208;
   border: 1px solid rgba(40,25,5,.6);
   color: var(--orange);
   font-family: "Oswald", sans-serif;
   font-weight: 700;
   font-size: .9rem;
   line-height: 1;
   display: grid;
   place-items: center;
   text-align: center;
   transition: transform .4s ease;
}

.faq summary::after {
   content: "♪";
   font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols", "DejaVu Sans", Georgia, serif;
   font-size: 1.8rem;
   line-height: 1;
   color: var(--accent, #b04300);
   transition: transform .25s, color .25s;
   flex-shrink: 0;
}
.faq summary:hover::after { transform: rotate(15deg); color: var(--orange); }

/* Aktiv geöffnete Karte: sattes Orange-Banner mit dunkler Antwort */
.faq details[open] {
   transform: rotate(0) translateY(-2px);
   border: 2px solid var(--orange);
   box-shadow:
      0 0 0 1px rgba(240,125,0,.5),
      0 14px 30px rgba(0,0,0,.4);
}
.faq details[open] summary {
   background: var(--orange);
   font-size: 1.15rem;
   padding-top: 1.15rem;
   padding-bottom: 1.15rem;
}
.faq details[open] summary,
.faq details[open] summary * {
   color: var(--paper) !important;
}
.faq details[open] summary::before {
   background:
      repeating-radial-gradient(circle, rgba(255,255,255,.12) 0 1px, transparent 1px 3px),
      #1a1208;
   border-color: var(--paper);
   color: var(--paper);
}
.faq details[open] summary::after { display: none; }
.faq details[open] .faq-body {
   padding-top: 1.2rem;
   background:
      linear-gradient(180deg, rgba(20,17,15,.85), rgba(20,17,15,.7));
   color: var(--paper);
}

/* Antworttext: garantiert hell auf dunklem Hintergrund */
.faq .faq-body, .faq .faq-body p, .faq .faq-body * { color: var(--paper); }
.faq details[open] summary::before {
   animation: vinyl-spin 4s linear infinite;
   border-color: var(--orange);
}
.faq details[open] summary::after {
   content: "–";
   background: var(--paper);
   color: var(--orange);
   border-color: var(--paper);
   transform: rotate(180deg);
}
@keyframes vinyl-spin {
   to { transform: translateY(-50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
   .faq details[open] summary::before { animation: none; }
}
.faq .faq-body {
   padding: 0 1.2rem 1.2rem;
   font-size: 1rem;
}

/* FAQ-Intro und Quote-CTA: identischer Stil wie press-intro – zentrierte
   Oswald-Caps-Banner ohne Box, mit Pointe-Effekt */
.faq-intro,
.quote-cta {
   max-width: 60ch;
   margin: 1.6rem auto;
   padding: 0;
   text-align: center;
   background: transparent !important;
   border: 0 !important;
   border-left: 0 !important;
   border-radius: 0 !important;
   box-shadow: none !important;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .08em;
   font-size: clamp(1.05rem, 1.8vw, 1.35rem);
   line-height: 1.45;
   color: var(--paper);
}
.quote-cta p { margin: 0; }
.faq-intro strong, .quote-cta strong { color: var(--orange); font-weight: 700; }
.faq-intro em, .quote-cta em {
   font-family: "Raleway", sans-serif;
   text-transform: none;
   font-style: italic;
   letter-spacing: 0;
   font-size: 1.25em;
   font-weight: 600;
   display: inline-block;
   margin-top: .25em;
   color: var(--orange);
}
.faq .faq-search {
   margin: 0 auto 1.2rem;
   max-width: 520px;
   display: flex;
   gap: .5rem;
}
.faq .faq-search input {
   flex: 1;
   font: inherit;
   padding: .65rem .9rem;
   border: 3px solid var(--black);
   border-radius: var(--radius);
   background: var(--paper);
}
.faq .faq-search input:focus { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ---------- Audio --------------------------------------------------- */
.audio-list {
   display: grid;
   gap: 1rem;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.audio-card {
   background: var(--paper);
   border: 3px solid var(--black);
   border-radius: var(--radius);
   box-shadow: var(--shadow-card);
   padding: 1rem 1.1rem;
}
.audio-card h3 { margin: 0 0 .35rem; }
.audio-card audio { width: 100%; margin-top: .4rem; }

/* ---------- Footer -------------------------------------------------- */
.site-footer {
   margin-top: 4rem;
   background: var(--black);
   color: var(--paper);
   padding: 2.2rem 0 1.4rem;
   border-top: 6px solid var(--orange);
}
.site-footer .row {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 1.6rem;
   align-items: start;
}
.site-footer h4 {
   color: var(--orange);
   margin: 0 0 .6rem;
   font-size: 1.05rem;
}
.site-footer a { color: var(--paper); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--orange); text-decoration: none; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer .footer-bottom {
   margin-top: 1.4rem;
   border-top: 1px dashed rgba(255,255,255,.2);
   padding-top: 1rem;
   display: flex;
   justify-content: space-between;
   gap: .8rem;
   flex-wrap: wrap;
   font-size: .9rem;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .06em;
}
.site-footer .tag {
   background: var(--orange);
   color: var(--black);
   padding: .2rem .55rem;
   border-radius: 4px;
}

/* ---------- Forms (Kontakt) ----------------------------------------- */
.contact-grid {
   display: grid;
   gap: var(--gap);
   grid-template-columns: 1.1fr 1fr;
}
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-grid .card h3 { margin-top: 0; }
.form-row { display: grid; gap: .35rem; margin-bottom: .9rem; }
.form-row label { font-family: "Oswald", sans-serif; text-transform: uppercase; font-size: .9rem; }
.form-row input,
.form-row textarea {
   font: inherit;
   padding: .65rem .8rem;
   border: 3px solid var(--black);
   border-radius: var(--radius-sm);
   background: var(--paper);
}
.form-row input:focus,
.form-row textarea:focus { outline: 3px solid var(--orange); outline-offset: 2px; }
.form-note { font-size: .85rem; opacity: .8; }

/* ---------- Legal-Seiten ------------------------------------------- */
.legal {
   max-width: 880px;
   margin: 0 auto;
   background: var(--paper);
   border: 3px solid var(--black);
   border-radius: var(--radius);
   box-shadow: var(--shadow-card);
   padding: 1.6rem clamp(1rem, 3vw, 2rem);
}
.legal h2 { margin-top: 1.6em; font-size: 1.4rem; }
.legal h3 { margin-top: 1.2em; font-size: 1.1rem; }
.legal h4 { margin-top: 1em; font-size: 1rem; color: var(--orange-dark); }
.legal p, .legal li { font-size: .96rem; line-height: 1.6; }

/* ---------- Helpers ------------------------------------------------- */
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.6rem; }
.mt-4 { margin-top: 2.4rem; }
.sr-only {
   position: absolute !important;
   width: 1px; height: 1px;
   padding: 0; margin: -1px;
   overflow: hidden; clip: rect(0,0,0,0);
   white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
   * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   Mobile: Heim-Hintergrund in voller Breite (alle Musiker sichtbar)
   ===================================================================== */
/* (Mobile-Block für Heim wurde ans Ende des Stylesheets verschoben,
    damit er die spätere body.page-heim::before-Regel überschreibt.) */

/* =====================================================================
   ÜBERLAGERUNGEN – Plakat-Look mit Hintergrundbildern
   ===================================================================== */

/* Body-Hintergrundbilder pro Seite, abgesoftet via Overlay
   WICHTIG: html bekommt den dunklen Fallback, body bleibt transparent –
   sonst verdeckt der Body-Hintergrund die Pseudo-Element-Layer. */
html { background: var(--black); }
body.has-bg {
   background: transparent;
   color: var(--paper);
   position: relative;
   min-height: 100vh;
}
body.has-bg::before {
   content: "";
   position: fixed;
   inset: 0;
   z-index: -2;
   background-color: var(--black);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   /* background-attachment ist hier redundant (Element selbst ist fixed) –
      und 'fixed' verursacht auf vielen Geräten Scroll-Ruckeln. */
   /* leichteres Soft-Overlay – Bilder bleiben deutlich sichtbar */
   filter: brightness(.78) saturate(.95);
   will-change: transform;
}
body.has-bg::after {
   content: "";
   position: fixed;
   inset: 0;
   z-index: -1;
   background:
      radial-gradient(circle at 80% 0%, rgba(240,125,0,.10), transparent 60%),
      linear-gradient(180deg, rgba(20,17,15,.25), rgba(20,17,15,.45));
   pointer-events: none;
}
/* Page-Klassen mit festen Bildpfaden (relativ zum Stylesheet,
   also relauch/assets/css/ → ../img/) */
body.page-heim::before     {
   background-image: url('../img/home-page-2026.jpg');
   filter: brightness(.95) saturate(1.05);
   animation: stage-lightshow 7s ease-in-out infinite;
}
@keyframes stage-lightshow {
   0%, 100% { filter: brightness(.92) saturate(1.05) hue-rotate(0); }
   18%      { filter: brightness(1.08) saturate(1.22) hue-rotate(8deg); }
   38%      { filter: brightness(.88) saturate(1.0)  hue-rotate(-5deg); }
   60%      { filter: brightness(1.06) saturate(1.20) hue-rotate(14deg); }
   80%      { filter: brightness(.96) saturate(1.10) hue-rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
   body.page-heim::before { animation: none; }
}
body.page-sehen::before    { background-image: url('../img/bgTermine.jpg'); }
body.page-hoeren::before   { background-image: url('../img/bgHoeren.jpg'); }
body.page-erleben::before  { background-image: url('../img/bgSehen.jpg'); filter: brightness(.45) saturate(.7) blur(1px); }
body.page-fuehlen::before  { background-image: url('../img/bgfuehlen.jpg'); }
body.page-faq::before      { background-image: url('../img/bgFAQ.jpg'); }
body.page-impressum::before  { background-image: url('../img/bgImpressum.jpg'); }
body.page-datenschutz::before{ background-image: url('../img/bgImpressum.jpg'); }
body.has-bg p,
body.has-bg li,
body.has-bg dd,
body.has-bg blockquote { color: #efe6d6; }
body.has-bg h1, body.has-bg h2, body.has-bg h3, body.has-bg h4 { color: var(--paper); }
body.has-bg hr { background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 8px, transparent 8px 16px); }

/* Fixed Header – aus dem Document-Flow (verhindert Layout-Shift, wenn der
   Header beim Scrollen schmaler wird → kein Trackpad-Wackeln mehr). */
.site-header {
   position: fixed;
   top: 0; left: 0; right: 0;
   background: transparent;
   border-bottom: 0;
   z-index: 60;
   transition: background-color .2s ease;
   /* contain: layout paint; — entfernt, weil es das aufgeklappte Mobile-Menü
      abgeschnitten hat (Menü rendert per absolute top:100% außerhalb des Headers). */
}
body.has-bg .site-header { position: fixed; }
/* Inhalt unter dem fixierten Header – Hero-Pages haben ein transparentes
   Hintergrundbild, das durch den Header schimmert; das Padding sorgt nur dafür,
   dass der Hero-Text nicht vom Header überlagert wird. */
:root { --header-h: 120px; }
@media (max-width: 800px) { :root { --header-h: 78px; } }
main { padding-top: var(--header-h); }
html { scroll-padding-top: var(--header-h); }
body.has-bg .site-header.is-scrolled,
body:not(.has-bg) .site-header.is-scrolled {
   background: rgba(20,17,15,.82);
   /* backdrop-filter bewusst weggelassen – ruckelfreier Scroll wichtiger */
   border-bottom: 1px solid rgba(255,255,255,.08);
}
/* Sticky-Schrumpf: viel kompakter, Logo deutlich kleiner */
.site-header.is-scrolled .site-header__inner { padding: .25rem 1rem; gap: .2rem; }
.site-header.is-scrolled .brand img { height: 40px; }
.site-header.is-scrolled .main-nav a { padding: .35rem .7rem; font-size: .9rem; }
/* Mobile-Burger im Sticky-Modus zentriert mit dem (verkleinerten) Logo */
.site-header.is-scrolled .nav-toggle {
   padding: .3rem .65rem;
   font-size: .82rem;
   line-height: 1;
   align-self: center;
   margin: 0;
}
.site-header__inner {
   flex-direction: column;
   gap: .4rem;
   padding: 1.2rem 1rem .4rem;
}
.brand { color: var(--paper); flex-direction: column; gap: 0; text-align: center; }
.brand img { height: 96px; }
/* Glow läuft nur, wenn .is-glowing gesetzt ist – initial via JS + erneut beim Scroll-Top */
.brand img.is-glowing { animation: brand-glow 1.6s ease-out both; }
@keyframes brand-glow {
   0%   { filter: drop-shadow(0 0 0 transparent); }
   25%  { filter: drop-shadow(0 0 22px rgba(255,180,70,.9)) drop-shadow(0 0 8px rgba(255,200,120,.7)); }
   55%  { filter: drop-shadow(0 0 14px rgba(255,180,70,.55)); }
   100% { filter: drop-shadow(0 0 0 transparent); }
}
@media (prefers-reduced-motion: reduce) {
   .brand img { animation: none; }
}
.brand .brand-text { display: none; }       /* Schriftzug neben Logo aus */
.brand .brand-tagline { display: none; }    /* Slogan ist im Logo enthalten */
.main-nav a {
   color: var(--paper);
   text-shadow: 0 1px 3px rgba(0,0,0,.65);
}
.main-nav a:hover, .main-nav a:focus-visible,
.main-nav a[aria-current="page"] {
   background: transparent;
   color: var(--orange);
   text-decoration: none;
}
.main-nav a[aria-current="page"] {
   border-bottom: 3px solid var(--orange);
   border-radius: 0;
}
/* Auffälligerer Burger-Button */
.nav-toggle {
   position: absolute;
   top: 1rem; right: 1rem;
   background: var(--orange);
   color: var(--black);
   border: 2px solid var(--black);
   border-radius: 999px;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .12em;
   font-weight: 700;
   padding: .55rem 1rem;
   box-shadow: 0 4px 14px rgba(0,0,0,.4);
   display: none;
}
.nav-toggle:hover { background: var(--paper); }

@media (max-width: 800px) {
   /* Mobile: Logo links, Burger rechts – Burger flush oben am Header */
   .site-header__inner {
      flex-direction: row;
      align-items: flex-start;        /* alles oben anschlagen */
      justify-content: space-between;
      padding: .35rem .8rem .45rem;   /* knapp oben, etwas mehr unten */
      gap: .8rem;
   }
   .brand,
   .brand img { display: flex; align-items: flex-start; align-self: flex-start; }
   .brand img { height: 56px; display: block; }    /* Logo kleiner, kein Baseline-Gap */
   .nav-toggle {
      position: static;
      display: inline-flex !important;
      align-items: center;
      align-self: flex-start !important;
      margin: 4px 0 0 !important;     /* knapp am oberen Headerrand */
      line-height: 1;
      gap: .4rem;
   }
   .nav-toggle::before {
      content: "";
      width: 18px; height: 12px;
      background:
         linear-gradient(var(--black) 2px, transparent 2px) 0 0,
         linear-gradient(var(--black) 2px, transparent 2px) 0 50%,
         linear-gradient(var(--black) 2px, transparent 2px) 0 100%;
      background-size: 100% 2px;
      background-repeat: no-repeat;
   }
   /* Mobile-Menü Position/Style – display wird vom Inline-Style gesteuert */
   .main-nav {
      position: absolute;
      top: 100%; left: 0; right: 0;
      background: rgba(20,17,15,.96);
      border-bottom: 3px solid var(--orange);
   }
   .main-nav ul {
      flex-direction: column;
      padding: .5rem 1rem 1rem;
      gap: 0;
   }
   .main-nav a {
      padding: .9rem .5rem;
      border-bottom: 1px dashed rgba(255,255,255,.2);
      border-radius: 0;
   }
   /* Sticky-Mobile: Logo bleibt groß, Button per absolute Positionierung
      hart in die obere rechte Ecke des Headers gepinnt. */
   .site-header.is-scrolled {
      position: fixed;                  /* bleibt fixed wie zuvor */
   }
   .site-header.is-scrolled .site-header__inner {
      align-items: flex-start;
      padding: .15rem .8rem .35rem;
      position: relative;               /* Bezugssystem für den absolut platzierten Button */
   }
   .site-header.is-scrolled .brand,
   .site-header.is-scrolled .brand img {
      align-items: flex-start;
      align-self: flex-start;
   }
   .site-header.is-scrolled .brand img { height: 36px; }
   .site-header.is-scrolled .nav-toggle {
      position: absolute !important;
      top: 6px !important;
      right: .8rem !important;
      margin: 0 !important;
      padding: .5rem 1rem !important;
      font-size: .82rem !important;
      letter-spacing: .1em !important;
      line-height: 1 !important;
   }
}

/* Hero über Hintergrundbild – auf Heim ist hier nur das Ticket; auf anderen
   Seiten die Hero-Headline (siehe body.has-bg .hero h1 oben). */
/* Tablet im Hochformat (Portrait) braucht mehr Luft zwischen Header und Headline */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
   body.has-bg .hero {
      padding-top: clamp(6rem, 13vw, 9rem) !important;
   }
}

body.has-bg .hero {
   background: transparent;
   padding-top: clamp(4rem, 8vw, 6.5rem);
   padding-bottom: clamp(.8rem, 2vw, 1.6rem);
}
body.page-heim .hero {
   padding-top: clamp(5rem, 9vw, 7rem);
   padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
body.has-bg .hero::before { content: none; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
.hero .hero-sub { font-size: clamp(.9rem, 1.5vw, 1.15rem); }
.hero { text-align: center; }
.hero h1 {
   color: var(--paper);
   text-shadow: 0 2px 12px rgba(0,0,0,.55);
   font-weight: 400;
}
.hero .hero-sub {
   color: var(--paper);
   text-shadow: 0 1px 6px rgba(0,0,0,.55);
   letter-spacing: .25em;
   font-family: "Raleway", sans-serif;
}

/* Section-Headlines auf Bild-Hintergrund */
body.has-bg .section-head h2 {
   color: var(--paper);
   text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
body.has-bg .section-head .sub {
   color: var(--paper);
   opacity: .85;
   letter-spacing: .25em;
   font-family: "Raleway", sans-serif;
   text-transform: none;
}

/* Karten auf transparentem dunklem Glas-Look (statt Cremepapier mit dickem Rand) */
body.has-bg .card,
body.has-bg .gig,
body.has-bg .audio-card,
body.has-bg .legal,
body.has-bg .facts li {
   background: rgba(20,17,15,.55);
   color: var(--paper);
   border: 1px solid rgba(255,255,255,.18);
   box-shadow: 0 8px 24px rgba(0,0,0,.45);
   backdrop-filter: blur(2px);
}
body.has-bg .card:hover,
body.has-bg .gig:hover,
body.has-bg .audio-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 14px 30px rgba(0,0,0,.55);
}
body.has-bg .facts li::before {
   background: var(--orange);
   color: var(--black);
   border: 0;
}
body.has-bg .gig__date {
   background: transparent;
   border: 0;
   text-align: center;
}
body.has-bg .gig__date .day,
body.has-bg .gig__date .mon,
body.has-bg .gig__date .yr {
   color: var(--orange);
}
body.has-bg .gig__title { color: var(--paper); font-weight: 400; }
body.has-bg .gig__meta li::before { background: var(--orange); border: 0; }

/* FAQ Accordion-Styles werden weiter oben definiert – keine body.has-bg-Overrides */
body.has-bg .faq .faq-search input {
   background: rgba(20,17,15,.6);
   color: var(--paper);
   border: 1px solid rgba(255,255,255,.25);
}
body.has-bg .faq .faq-search input::placeholder { color: rgba(255,255,255,.55); }

/* Form-Felder dunkel */
body.has-bg .form-row input,
body.has-bg .form-row textarea {
   background: rgba(20,17,15,.6);
   color: var(--paper);
   border: 1px solid rgba(255,255,255,.25);
}

/* Hervorhebung in Body bleibt sichtbar */
body.has-bg .hl {
   background: var(--orange);
   color: var(--black);
   padding: 0 .25em;
   border-radius: 3px;
}

/* ----- Pseudo-Buttons differenzieren -----
   Role-Badges, Tag „Hauptsache es groovt“, DSGVO-Klick: kein Button-Look mehr,
   sondern dezente Schrägstreifen / Caption-Stil. */

.member__role {
   background: transparent;
   color: var(--orange);
   border: 0;
   padding: 0;
   font-size: .8rem;
   letter-spacing: .12em;
   margin-bottom: .35rem;
}
.member__role::before { content: "♬ "; opacity: .7; }

/* Die Mitgliederfotos im Originalstil:
   Name als Banner oben links, Rolle als Banner unten rechts – auf dem Foto. */
.member { position: relative; overflow: hidden; }
body.has-bg .member {
   background: transparent;
   border: 0;
   box-shadow: none;
   padding: 0;
   border-radius: 6px;
}
body.has-bg .member:hover { transform: translateY(-3px); }
body.has-bg .member__img { border: 0; aspect-ratio: 4/5; border-radius: 6px; }
body.has-bg .member__body {
   position: absolute;
   inset: 0;
   padding: 0;
   pointer-events: none;
   background: linear-gradient(180deg, rgba(0,0,0,.0) 60%, rgba(0,0,0,.65) 100%);
}
/* Excerpt + More-Link werden zur Lupe: dezenter Klick-Hinweis als Link
   (komplette Karte bleibt klickbar via __more) */
.member__more {
   position: absolute;
   inset: 0;
   display: block;
   text-indent: -9999px;
   pointer-events: auto;
}
body.has-bg .member__excerpt { display: none; }

/* Name-Banner oben links */
.member__name {
   position: absolute;
   top: 12px;
   left: 0;
   margin: 0;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .08em;
   font-size: 1rem;
   color: var(--paper);
   background: var(--orange);
   padding: .35rem .9rem .35rem .9rem;
   clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
}
/* Rolle-Banner unten rechts */
.member__role {
   position: absolute;
   bottom: 12px;
   right: 0;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .08em;
   font-size: .72rem;
   color: var(--paper);
   background: rgba(20,17,15,.85);
   padding: .3rem .9rem .3rem 1.1rem;
   clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%);
   border: 0;
   border-radius: 0;
   margin: 0;
}
.member__role::before { content: ""; }

.member-modal__role {
   background: transparent;
   color: var(--orange);
   border: 0;
   padding: 0;
   font-size: .85rem;
   letter-spacing: .12em;
}
.member-modal__role::before { content: ""; }

/* DSGVO-Klick-Tag: kein Button mehr, sondern Caption-Look */
.yt-info span[style*="background:var(--orange)"],
.yt-info span[style*="background:var(--paper)"] {
   background: transparent !important;
   border: 0 !important;
   color: var(--orange) !important;
   font-size: .75rem;
   letter-spacing: .15em;
   padding: 0 !important;
}
.yt-info span[style*="background:var(--orange)"]::before { content: "▸ "; }

/* Footer-Tag „Hauptsache es groovt“: kein Button-Tag, sondern Schwung-Schrift */
.site-footer .tag {
   background: transparent;
   color: var(--orange);
   padding: 0;
   font-style: italic;
   font-family: "Raleway", sans-serif;
   text-transform: none;
   letter-spacing: .04em;
}
.site-footer .tag::before { content: "» "; }
.site-footer .tag::after  { content: " «"; }

/* Heller, schlichter Footer (statt Volldunkel-Riegel auf abgesoftetem Bild) */
body.has-bg .site-footer {
   background: rgba(20,17,15,.85);
   border-top: 0;
   margin-top: 3rem;
}

/* Footer-Meta (Jahr + Orangeshakers) klein gesetzt, Trennstrich neutral */
.site-footer .footer-meta {
   font-size: .75rem;
   letter-spacing: .04em;
   opacity: .75;
   margin-right: .25rem;
}

/* =====================================================================
   Fühlen – vergilbtes Plakat mit Kontaktblock + Blondine-Foto
   Funktioniert auch als Druckvorlage / analoges Poster.
   ===================================================================== */
/* Stage-Wrapper: trägt Rotation + zentrale Positionierung. */
.contact-poster-stage {
   position: relative;
   max-width: 720px;
   margin: 1.5rem auto 2rem;
   transform: rotate(-.6deg);
   isolation: isolate;
}

/* "Gewölbt aufliegendes Papier": Combo aus zwei Effekten, damit der Curl auch
   auf dunklem Hintergrund sichtbar wird:
   1. starke, weit nach außen reichende Schatten unter den Plakatseiten
   2. dezente Innen-Schattierung auf dem Plakat selbst, die andeutet, dass die
      Seitenkanten leicht hochgebogen sind */
.contact-poster-stage::before,
.contact-poster-stage::after {
   content: "";
   position: absolute;
   z-index: -1;
   bottom: -10px;
   width: 50%;
   top: 55%;
   max-width: 380px;
   background: transparent;
   box-shadow: 0 38px 32px 4px rgba(0,0,0,.95);
}
.contact-poster-stage::before {
   left: -6px;
   transform: rotate(-5deg) skewX(-6deg);
}
.contact-poster-stage::after {
   right: -6px;
   transform: rotate(5deg) skewX(6deg);
}

.contact-poster {
   --paper-1: #f6e8c4;
   --paper-2: #e9d8a0;
   --ink: #2a1a08;
   --ink-soft: #5a3d1a;
   --accent: #b04300;

   position: relative;
   max-width: none;
   margin: 0;
   padding: clamp(2rem, 4vw, 3rem) clamp(1.6rem, 3vw, 2.4rem) clamp(1.8rem, 4vw, 2.8rem);
   color: var(--ink);
   border-radius: 2px;
   border: 1px solid rgba(80,50,20,.35);
   /* Mehrlagiger Hintergrund: Vignette, Flecken, Faserung, Verlauf
      + zwei dunkle Eck-Schattierungen, die die hochgebogenen Seitenkanten andeuten */
   background:
      /* Curl-Schatten unten links + unten rechts auf der Plakatfläche selbst */
      radial-gradient(ellipse 60% 18% at 0% 100%, rgba(40,20,5,.32) 0%, transparent 70%),
      radial-gradient(ellipse 60% 18% at 100% 100%, rgba(40,20,5,.32) 0%, transparent 70%),
      radial-gradient(ellipse at 22% 18%, rgba(120,75,25,.13) 0%, transparent 38%),
      radial-gradient(ellipse at 78% 82%, rgba(110,65,20,.13) 0%, transparent 42%),
      radial-gradient(circle at 12% 88%, rgba(80,40,10,.10) 0%, transparent 14%),
      radial-gradient(circle at 92% 22%, rgba(90,50,15,.10) 0%, transparent 12%),
      repeating-linear-gradient(45deg, transparent 0 3px, rgba(110,75,30,.025) 3px 4px),
      repeating-linear-gradient(135deg, transparent 0 2px, rgba(110,75,30,.02) 2px 3px),
      linear-gradient(180deg, var(--paper-1) 0%, var(--paper-2) 100%);
   box-shadow:
      0 2px 4px rgba(0,0,0,.2),
      0 16px 36px rgba(0,0,0,.45),
      inset 0 0 70px rgba(120,80,30,.18);
   /* Rotation liegt jetzt am .contact-poster-stage */
   transform: none;
   font-family: "Raleway", sans-serif;
   isolation: isolate;
}

.contact-poster p,
.contact-poster li,
.contact-poster strong,
.contact-poster a,
.contact-poster figcaption,
.contact-poster h2 { color: var(--ink) !important; }
.contact-poster a { color: var(--accent) !important; }
/* Telefon und E-Mail prominenter, ohne Unterstrich */
.contact-poster a[href^="tel:"],
.contact-poster a[href^="mailto:"] {
   font-family: "Oswald", sans-serif;
   font-size: 1.6em;
   font-weight: 700;
   text-decoration: none !important;
   letter-spacing: .02em;
   line-height: 1;
}

.contact-poster a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; }
.contact-poster a:hover { color: var(--orange-dark); }

/* Klebestreifen – zwei prägnante Gaffa-Tape-Streifen: oben mittig und unten mittig,
   leicht versetzt, leicht schräg, leicht gerissen. */
.contact-poster__tape {
   position: absolute;
   width: 260px; height: 56px;
   background:
      /* Subtile Längsfaser-Textur */
      repeating-linear-gradient(90deg, transparent 0 3px, rgba(255,255,255,.04) 3px 4px),
      /* Helle Reflexion in der Mitte */
      linear-gradient(180deg,
         #555 0%,
         #3e3e3e 25%,
         #5a5a5a 50%,
         #3e3e3e 75%,
         #4a4a4a 100%);
   border-top: 1px solid rgba(0,0,0,.55);
   border-bottom: 1px solid rgba(0,0,0,.55);
   box-shadow:
      0 4px 8px rgba(0,0,0,.4),
      inset 0 1px 0 rgba(255,255,255,.12);
   z-index: 3;
   transform-origin: center;
   /* Dezent unsauber abgeschnittene Enden (gerissenes Gaffa-Tape, aber sanft) */
   clip-path: polygon(
      1% 0%, 2% 50%, 0.5% 100%,
      99.5% 100%, 98% 50%, 99% 0%
   );
}
/* Oben: leicht links der Mitte, etwas nach links gekippt */
.contact-poster__tape--top {
   top: -28px;
   left: calc(50% - 190px);
   transform: rotate(-6deg);
}
/* Unten: leicht rechts der Mitte, anders gekippt */
.contact-poster__tape--bottom {
   bottom: -28px;
   left: calc(50% - 100px);
   transform: rotate(4deg);
}

/* Stempel über das Bild ragen lassen */
.contact-poster__stamp {
   position: absolute;
   top: 3.2rem;
   right: 1.4rem;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .2em;
   font-size: .85rem;
   padding: .4rem .9rem;
   color: var(--accent);
   border: 2px solid var(--accent);
   border-radius: 3px;
   transform: rotate(-8deg);
   opacity: .9;
   background: rgba(255,255,255,.2);
   z-index: 4;
   pointer-events: none;
}

/* Inhalt: 1-Spaltig, Bild floatet rechts beim Ansprechpartner-Text */
.contact-poster__inner {
   margin-top: .4rem;
}
.contact-poster__contact::after {
   content: "";
   display: block;
   clear: both;
}
@media (max-width: 720px) {
   .contact-poster__stamp { top: .6rem; right: .8rem; font-size: .7rem; }
}

.contact-poster__head {
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: var(--ink);
   font-size: clamp(1.8rem, 3.4vw, 2.4rem);
   line-height: 1;
   margin: 0 0 1rem;
   padding-bottom: .4rem;
   border-bottom: 3px double var(--ink-soft);
}

/* Kontakt-Zeilen mit Icon-Spalte */
.contact-poster .contact-line {
   display: grid;
   grid-template-columns: 1.7rem 1fr;
   gap: .6rem;
   align-items: start;
   margin: .55rem 0;
   line-height: 1.45;
}
.contact-line__label {
   font-size: 1.3rem;
   color: var(--accent);
   line-height: 1;
   padding-top: .1rem;
}

.contact-poster hr {
   border: 0;
   height: 1px;
   background: repeating-linear-gradient(90deg, var(--ink-soft) 0 5px, transparent 5px 10px);
   margin: 1.1rem 0;
   opacity: .7;
}

/* ---------- Ansprechpartner-Lead (etwas größer, headline-artig) ---------- */
.contact-poster__lead {
   font-family: "Oswald", sans-serif;
   font-size: clamp(1.25rem, 2.6vw, 1.55rem) !important;
   line-height: 1.25;
   margin: .2rem 0 1.2rem;
   color: var(--ink) !important;
}
.contact-poster__lead strong { font-weight: 700; }

/* ---------- Kontakt-Blöcke: Icon | Label + Wert -------------------------- */
.contact-poster .contact-block {
   display: grid;
   grid-template-columns: 44px 1fr;
   gap: .85rem;
   align-items: center;
   margin: .85rem 0;
   padding: .35rem 0;
}
.contact-block__icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 44px; height: 44px;
   border-radius: 50%;
   background: var(--accent);
   color: var(--paper-1);
   box-shadow: 2px 2px 0 rgba(80,50,20,.35);
}
.contact-block__icon svg { display: block; }
.contact-block__body {
   display: flex;
   flex-direction: column;
   gap: .35rem;
   min-width: 0;
}
.contact-block__label {
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .18em;
   font-size: .78rem;
   color: var(--ink-soft) !important;
   line-height: 1;
}
.contact-poster .contact-block__value {
   font-family: "Oswald", sans-serif;
   font-size: clamp(1.25rem, 3vw, 1.65rem);
   font-weight: 700;
   font-style: normal;
   line-height: 1.1;
   letter-spacing: .01em;
   color: var(--accent) !important;
   text-decoration: none !important;
   word-break: break-word;
}
.contact-poster a.contact-block__value:hover { color: var(--orange-dark) !important; }
.contact-poster .contact-block__value--address {
   font-size: clamp(1.05rem, 2.2vw, 1.25rem);
   font-weight: 600;
   color: var(--ink) !important;
}

/* ---------- Download-Bereich visuell abgrenzen ---------- */
.contact-poster__downloads-wrap {
   margin-top: 2.6rem;
   padding-top: 1.4rem;
   position: relative;
   /* dekorative gestempelte Trennlinie */
   border-top: 0;
   background:
      repeating-linear-gradient(90deg,
         var(--ink-soft) 0 12px,
         transparent 12px 22px) 0 0 / 100% 2px no-repeat;
}
.contact-poster__downloads-wrap::before {
   content: "DOWNLOADS";
   position: absolute;
   top: -.95rem;
   left: 50%;
   transform: translateX(-50%) rotate(-2.5deg);
   background: var(--paper-1);
   padding: .15rem 1rem .2rem;
   font-family: "Oswald", sans-serif;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .32em;
   font-size: 1.1rem;
   color: var(--accent);
   border: 2px solid var(--accent);
   border-radius: 3px;
   box-shadow: 0 2px 0 rgba(80,50,20,.2);
}
.contact-poster .downloads-intro {
   margin: .8rem 0 .5rem;
   font-size: .98rem;
}


/* Bandfoto-Button im Plakat-Stil */
.contact-poster .btn,
.contact-poster .btn--cream {
   background: var(--ink) !important;
   color: var(--paper-1) !important;
   border-color: var(--ink) !important;
   box-shadow: 4px 4px 0 var(--ink-soft);
   font-family: "Oswald", sans-serif;
}
.contact-poster .btn:hover,
.contact-poster .btn--cream:hover {
   background: var(--accent) !important;
   border-color: var(--accent) !important;
   color: var(--paper-1) !important;
}

/* Foto neben dem Ansprechpartner-Text gefloatet, im Polaroid-Style.
   Desktop: groß; Tablet: mittel; Mobile: gestackt unter dem Lead (siehe weiter unten). */
.contact-poster__photo {
   position: relative;
   float: right;
   width: 240px;
   margin: 0 0 1rem 1.4rem;
   padding: .4rem .4rem .7rem;
   background:
      radial-gradient(ellipse at 20% 25%, rgba(150,110,50,.15) 0%, transparent 45%),
      radial-gradient(ellipse at 80% 75%, rgba(140,95,40,.12) 0%, transparent 45%),
      linear-gradient(180deg, #f5e6b8 0%, #e9d59c 100%);
   border: 1px solid rgba(80,50,20,.4);
   transform: rotate(2deg);
   transition: transform .2s;
}
.contact-poster__photo:hover { transform: rotate(0); }
.contact-poster__photo img {
   width: 100%;
   aspect-ratio: 4/5;
   object-fit: cover;
   display: block;
   border: 1px solid rgba(80,50,20,.3);
}
/* Stempel auf das Foto – linke obere Ecke, ohne weißen Hintergrund */
.contact-poster__photo-stamp {
   position: absolute;
   top: -10px;
   left: -18px;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .15em;
   font-size: .7rem;
   padding: .3rem .65rem;
   color: var(--accent);
   border: 2px solid var(--accent);
   border-radius: 3px;
   transform: rotate(-8deg);
   background: transparent;
   z-index: 4;
   pointer-events: none;
}
/* Tablet: Foto etwas kleiner, bleibt aber gefloatet */
@media (max-width: 1024px) and (min-width: 721px) {
   .contact-poster__photo { width: 200px; margin: 0 0 1rem 1.2rem; }
}

/* Mobile: Inhalte vertikal stapeln (Lead → Foto → Kontakt-Blöcke → Downloads),
   damit lange Mail-Adresse / Telefonnummer nicht hässlich umbrechen */
@media (max-width: 720px) {
   .contact-poster__contact {
      display: flex;
      flex-direction: column;
   }
   .contact-poster__lead       { order: 1; }
   .contact-poster__photo      { order: 2; }
   .contact-poster .contact-block { order: 3; }
   .contact-poster__downloads-wrap { order: 4; }

   .contact-poster__photo {
      float: none;
      width: 220px;
      margin: .4rem auto 1.3rem;
      align-self: center;
   }

   .contact-poster .contact-block {
      grid-template-columns: 36px 1fr;
      gap: .65rem;
   }
   .contact-block__icon { width: 36px; height: 36px; }
   .contact-block__icon svg { width: 22px; height: 22px; }
   .contact-poster .contact-block__value {
      font-size: 1.05rem;
      letter-spacing: 0;
   }
   .contact-poster .contact-block__value--address {
      font-size: .95rem;
   }
}

/* "Coming soon"-Variante des Buttons – dezenter, gestrichelter Rand */
.contact-poster .btn.btn--soon {
   background: transparent !important;
   color: var(--ink-soft) !important;
   border: 2px dashed var(--ink-soft) !important;
   cursor: default;
   pointer-events: none;
   opacity: .82;
   line-height: 1.15;
   gap: .55rem;
}
.contact-poster .btn.btn--soon:hover { background: transparent !important; color: var(--ink-soft) !important; }
.contact-poster .btn.btn--soon .dl-icon { opacity: .65; }
.contact-poster .btn.btn--soon small {
   display: inline-block;
   font-family: "Raleway", sans-serif;
   font-weight: 500;
   font-size: .72em;
   font-style: italic;
   letter-spacing: 0;
   text-transform: none;
   opacity: .85;
}

/* Download-Buttons nebeneinander mit Icons */
.contact-poster__downloads {
   display: flex;
   flex-wrap: wrap;
   gap: .6rem .8rem;
   align-items: center;
}
.contact-poster__downloads .btn { line-height: 1.2; }
.dl-icon {
   display: inline-block;
   width: 1.5em;
   height: 1.5em;
   margin-right: .5rem;
   vertical-align: -.3em;
   color: currentColor;
}
.contact-poster__blondine figcaption {
   margin-top: .6rem;
   font-family: "Raleway", sans-serif;
   font-style: italic;
   font-size: .9rem;
   line-height: 1.35;
   text-align: center;
   color: var(--ink);
}
.contact-poster__blondine figcaption strong { color: var(--accent); }

/* Alte Blondine/Hint-Klassen deaktivieren */
.blondine-figure, .blondine-hint { display: none !important; }

/* Fühlen: Blondine-Hinweis auffälliger gestalten */
.blondine-hint {
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .06em;
   font-size: 1.1rem;
   color: var(--paper);
   background: rgba(240,125,0,.18);
   border-left: 4px solid var(--orange);
   padding: .8rem 1rem;
   border-radius: 4px;
   margin: 0 0 1rem;
   line-height: 1.4;
}
.blondine-hint strong { color: var(--orange); font-weight: 700; }
.blondine-hint em {
   color: var(--orange);
   font-style: italic;
   text-transform: none;
   letter-spacing: 0;
}

/* Fühlen: Blondine-Bild als Figure neben der Kontakt-Karte */
.blondine-figure {
   margin: 0;
   border: 3px solid var(--black);
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow-card);
   background: var(--black);
   display: flex;
   flex-direction: column;
   transform: rotate(.8deg);
   transition: transform .25s;
}
.blondine-figure:hover { transform: rotate(0); }
.blondine-figure img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   aspect-ratio: 4/5;
   display: block;
}
.blondine-figure figcaption {
   font-family: "Raleway", sans-serif;
   font-size: .95rem;
   line-height: 1.5;
   color: var(--paper);
   background: rgba(20,17,15,.85);
   padding: .8rem 1rem;
   text-align: left;
}
.blondine-figure figcaption strong { color: var(--orange); }
@media (max-width: 800px) {
   .blondine-figure { transform: none; max-width: 360px; margin-inline: auto; }
}

/* Lead-Paragraph zentriert wie im Original */
.hero p.lead { margin-inline: auto; }

/* Fakten-Liste über Bild: hellere Trennstriche */
body.has-bg hr { opacity: .5; }

/* =====================================================================
   Heim – Konzert-Ticket unter der Headline (witziger Termin-Hinweis)
   ===================================================================== */
.gig-ticket {
   --tk-paper: #fbe7b8;
   display: inline-flex;
   align-items: stretch;
   margin: 1.4rem auto 0;
   text-decoration: none;
   color: var(--ink);
   font-family: "Raleway", sans-serif;
   transform: rotate(-1.2deg);
   filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
   transition: transform .25s, filter .25s;
   animation: ticket-fade-in .7s cubic-bezier(.3,1.2,.5,1) both;
   max-width: 100%;
}
.gig-ticket:hover {
   transform: rotate(0) scale(1.04);
   filter: drop-shadow(0 10px 22px rgba(240,125,0,.55));
   text-decoration: none;
   color: var(--ink);
}

/* Stub-Teil (links) – stark transparent */
.gig-ticket__stub {
   --stub-bg: rgba(240,125,0,.55);
   color: var(--black);
   padding: .7rem 1rem;
   text-align: center;
   border-right: 2px dashed rgba(0,0,0,.45);
   background:
      radial-gradient(circle at 100% 0, transparent 7px, var(--stub-bg) 7.5px) top right / 16px 51% no-repeat,
      radial-gradient(circle at 100% 100%, transparent 7px, var(--stub-bg) 7.5px) bottom right / 16px 51% no-repeat,
      var(--stub-bg);
   display: flex;
   flex-direction: column;
   justify-content: center;
   min-width: 82px;
}
.gig-ticket__admit {
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   font-size: .92rem;
   letter-spacing: .12em;
   font-weight: 700;
   color: var(--black);
   margin-bottom: .35rem;
   padding-bottom: .25rem;
   border-bottom: 2px solid rgba(0,0,0,.4);
   text-shadow: 0 1px 0 rgba(255,255,255,.25);
   animation: ticket-admit-pulse 2.4s ease-in-out infinite;
}
@keyframes ticket-admit-pulse {
   0%, 100% { transform: scale(1); }
   50%      { transform: scale(1.06); }
}
.gig-ticket__day {
   font-family: "Oswald", sans-serif;
   font-size: 3rem;
   line-height: 1;
   font-weight: 400;
}
.gig-ticket__mon {
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   font-size: 1rem;
   letter-spacing: .12em;
}

/* Hauptteil (rechts) – stark transparent */
.gig-ticket__main {
   --main-bg-top:    rgba(255,245,217,.55);
   --main-bg-bottom: rgba(251,231,184,.52);
   padding: .75rem 1.2rem .8rem 1.4rem;
   text-align: left;
   display: flex;
   flex-direction: column;
   justify-content: center;
   background:
      radial-gradient(circle at 0 0, transparent 7px, var(--main-bg-top) 7.5px) top left / 16px 51% no-repeat,
      radial-gradient(circle at 0 100%, transparent 7px, var(--main-bg-bottom) 7.5px) bottom left / 16px 51% no-repeat,
      linear-gradient(180deg, var(--main-bg-top), var(--main-bg-bottom));
   min-width: 0;
}
.gig-ticket__kicker {
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   font-size: .7rem;
   letter-spacing: .2em;
   color: var(--orange-dark);
   margin-bottom: .15rem;
}
.gig-ticket__title {
   font-family: "Oswald", sans-serif;
   font-size: 1.45rem;
   line-height: 1;
   color: var(--black);
   margin-bottom: .15rem;
}
.gig-ticket__loc {
   font-size: .92rem;
   color: var(--ink);
}
.gig-ticket__time {
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   font-size: 1rem;
   letter-spacing: .1em;
   color: var(--orange-dark);
   margin-top: .45rem;
}

@keyframes ticket-fade-in {
   0%   { opacity: 0; transform: translateY(20px) rotate(2deg); }
   100% { opacity: 1; transform: translateY(0)   rotate(-1.2deg); }
}
@media (prefers-reduced-motion: reduce) {
   .gig-ticket { animation: none; }
}

@media (max-width: 480px) {
   .gig-ticket { transform: rotate(-1deg) scale(.9); transform-origin: center top; }
   .gig-ticket__title { font-size: 1.25rem; }
}

/* Auf Mobile (bis 900px) deckender, weil das Bandfoto nur oben endet und der
   Bereich unter dem Bild schwarz ist – transparentes Ticket wäre schlecht lesbar. */
@media (max-width: 900px) {
   .gig-ticket__stub { --stub-bg: rgba(240,125,0,.92); }
   .gig-ticket__main {
      --main-bg-top:    rgba(255,245,217,.92);
      --main-bg-bottom: rgba(251,231,184,.90);
   }
}

/* Alte Pinboard-Stile deaktivieren (nicht mehr verwendet) */
.hero-pinboard, .pinboard-title, .next-gig-banner { display: none !important; }

/* =====================================================================
   Heim – (alt: Hero-Grid) – nicht mehr verwendet
   ===================================================================== */
/* Hero: Headline horizontal in der Mitte (bündig zum Inhalt darunter),
   Pinboard absolut am rechten Rand. */
body.has-bg .hero { position: relative; }
.hero-grid {
   display: block;
   text-align: center;
   position: relative;
}
.hero-grid .hero-text { text-align: center; max-width: 68ch; margin-inline: auto; }
.hero-grid .hero-pinboard {
   position: fixed;
   top: clamp(4rem, 7vw, 5.5rem);
   right: clamp(.5rem, 2vw, 1.5rem);
   z-index: 50;          /* unter dem Header (60), aber über dem Inhalt */
   text-align: center;
   padding-top: .8rem;
   width: clamp(150px, 16vw, 190px);
}
/* Pinboard etwas kompakter */
.hero-grid .hero-pinboard .pinboard-title { font-size: clamp(.7rem, .9vw, .82rem); margin-bottom: .55rem; }
.hero-grid .hero-pinboard .next-gig-banner { max-width: 100%; padding: .9rem 1rem .8rem; }
.hero-grid .hero-pinboard .next-gig-banner .date { font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.hero-grid .hero-pinboard .next-gig-banner .loc { font-size: .85rem; }
.hero-grid .hero-pinboard .next-gig-banner .hint { font-size: .65rem; padding-top: .4rem; margin-top: .55rem; }
.pinboard-title {
   margin: 0 0 .9rem;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .2em;
   font-size: clamp(.78rem, 1.1vw, .92rem);
   color: var(--orange);
   text-shadow: 0 1px 4px rgba(0,0,0,.55);
   opacity: .95;
}
.pinboard-title::before,
.pinboard-title::after {
   content: " · ";
   opacity: .55;
}

/* Mobile: Pinboard wieder im Flow, kein fixed (würde stören) */
@media (max-width: 800px) {
   .hero-grid .hero-pinboard {
      position: static;
      transform: none;
      margin: 1.5rem auto 0;
      width: clamp(160px, 60vw, 220px);
   }
   .hero-grid .hero-text { text-align: center; }
}

/* =====================================================================
   Heim – Termin-Banner als angeheftete Notiz / Pinnwand-Zettel
   ===================================================================== */
.next-gig-banner {
   position: relative;
   display: inline-block;
   width: 100%;
   max-width: 240px;
   margin: 0 auto;
   padding: 1.1rem 1.2rem .9rem;
   background: linear-gradient(180deg, #fff5d9 0%, #ffe9b9 100%);
   color: var(--ink);
   text-decoration: none;
   text-align: center;
   font-family: "Raleway", sans-serif;
   border-radius: 2px;
   box-shadow:
      0 2px 4px rgba(0,0,0,.18),
      0 10px 22px rgba(0,0,0,.40),
      inset 0 0 22px rgba(255,180,90,.12);
   transform-origin: 50% 0;
   /* 1) Zettel erscheint zuerst – fade + scale + leichte Rotation
      2) später startet das Idle-Schaukeln */
   animation:
      ngb-appear .7s cubic-bezier(.3,1.2,.5,1) both,
      ngb-sway 6s ease-in-out 2.2s infinite;
   transition: transform .3s ease, box-shadow .3s ease;
   z-index: 1;
}
.next-gig-banner:hover {
   transform: rotate(0deg) scale(1.05);
   box-shadow:
      0 4px 8px rgba(0,0,0,.25),
      0 16px 36px rgba(0,0,0,.5);
   text-decoration: none;
   color: var(--ink);
   animation-play-state: paused;
}

/* Pinnnadel oben mittig – fliegt erst nach dem Zettel rein und „sticht" ihn fest */
.next-gig-banner .pin {
   position: absolute;
   top: -9px;
   left: 50%;
   width: 20px; height: 20px;
   background: radial-gradient(circle at 35% 30%, #ff9d4a 0%, #d44d00 70%, #8c2f00 100%);
   border-radius: 50%;
   box-shadow:
      inset 0 1px 0 rgba(255,255,255,.45),
      -2px 3px 5px rgba(0,0,0,.55);
   opacity: 0;
   transform: translateX(-50%) translateY(-50px) scale(2.2);
   animation: pin-stick .55s cubic-bezier(.4,1.7,.4,1) .8s forwards;
   z-index: 2;
}
.next-gig-banner .pin::after {
   content: "";
   position: absolute;
   top: 50%; left: 50%;
   width: 5px; height: 5px;
   background: rgba(255,255,255,.55);
   border-radius: 50%;
   transform: translate(-90%, -90%);
   filter: blur(.4px);
}

/* Klebestreifen-Detail (Pseudo) am unteren linken Eckchen */
.next-gig-banner::before {
   content: "";
   position: absolute;
   bottom: -6px; left: -10px;
   width: 38px; height: 14px;
   background: rgba(255,200,120,.55);
   border: 1px solid rgba(255,180,80,.5);
   transform: rotate(-15deg);
   z-index: 0;
}

.next-gig-banner .label {
   display: block;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .2em;
   font-size: .72rem;
   color: var(--orange-dark);
   margin-bottom: .3rem;
}
.next-gig-banner .date {
   display: block;
   font-family: "Oswald", sans-serif;
   font-size: clamp(1.4rem, 2.4vw, 1.75rem);
   line-height: 1;
   color: var(--black);
   letter-spacing: .02em;
   margin-bottom: .4rem;
}
.next-gig-banner .loc {
   display: block;
   font-size: .95rem;
   line-height: 1.35;
   color: var(--ink);
}
.next-gig-banner .loc strong {
   color: var(--orange-dark);
   font-weight: 700;
}
.next-gig-banner .hint {
   display: block;
   margin-top: .8rem;
   padding-top: .5rem;
   border-top: 1px dashed rgba(140,80,0,.35);
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   font-size: .72rem;
   letter-spacing: .14em;
   color: var(--orange-dark);
   opacity: .8;
}

/* Animations
   1) Zettel erscheint sanft (fade + scale + leichte Rotation in Endlage)
   2) Pin fliegt von oben rein und sticht ein – mit kurzem Bounce
   3) Zettel beginnt danach dezent zu schaukeln */
@keyframes ngb-appear {
   0%   { opacity: 0; transform: translateY(14px) scale(.92) rotate(-1deg); }
   60%  { opacity: 1; transform: translateY(-2px) scale(1.02) rotate(-3.6deg); }
   100% { opacity: 1; transform: translateY(0)    scale(1)    rotate(-2.6deg); }
}
@keyframes ngb-sway {
   0%, 100% { transform: rotate(-2.6deg); }
   50%      { transform: rotate(-1.2deg); }
}
@keyframes pin-stick {
   0%   { opacity: 0; transform: translateX(-50%) translateY(-50px) scale(2.2); }
   60%  { opacity: 1; transform: translateX(-50%) translateY(2px)   scale(.85); }
   80%  {              transform: translateX(-50%) translateY(0)    scale(1.08); }
   100% { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1); }
}
@media (prefers-reduced-motion: reduce) {
   .next-gig-banner { animation: none; transform: rotate(-2deg); }
   .next-gig-banner .pin { animation: none; opacity: 1; transform: translateX(-50%) scale(1); }
}

/* =====================================================================
   Heim – Bandinfo als Fließtext (keine Kacheln, keine Nummern)
   ===================================================================== */
.bandinfo-head {
   max-width: 68ch;
   margin: 0 auto 1.4rem;
   text-align: center;
}
.bandinfo-head h1 {
   color: var(--paper);
   text-shadow: 0 2px 14px rgba(0,0,0,.55);
   font-size: clamp(1.6rem, 3.5vw, 2.4rem);
   margin: 0 0 .25rem;
}
.bandinfo-head .hero-sub {
   color: var(--paper);
   text-shadow: 0 1px 6px rgba(0,0,0,.55);
}
.bandinfo-text {
   position: relative;
   max-width: 68ch;
   margin-inline: auto;
   font-size: clamp(1rem, 1.4vw, 1.1rem);
   line-height: 1.7;
   /* dezent hinterlegt mit Orange-Shaker-Bild unten bündig */
   background-color: rgba(20,17,15,.55);
   background-image:
      linear-gradient(180deg, rgba(20,17,15,.85) 0%, rgba(20,17,15,.3) 55%, rgba(20,17,15,.15) 100%),
      url('../img/bgOrangePR.jpg');
   background-size: cover, cover;
   background-position: center top, center bottom;
   background-repeat: no-repeat, no-repeat;
   color: var(--paper);
   border: 1px solid rgba(255,255,255,.18);
   border-radius: 8px;
   padding: clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2.2rem) clamp(8rem, 18vw, 12rem);
   box-shadow: 0 8px 24px rgba(0,0,0,.35);
   overflow: hidden;
}
.bandinfo-text p { margin: 0 0 1.1em; }
.bandinfo-text p:last-of-type {
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .08em;
   font-size: 1.2em;
   text-align: center;
   color: var(--orange);
   margin: 1.4em 0 0;
}
/* "Mitschütteln" – kurzes Percussion-Schütteln, getriggert beim Scroll-in */
.shake-word {
   display: inline-block;
   transform-origin: 50% 60%;
   color: var(--orange);
}
.shake-word.is-shaking {
   animation: word-shake 1.1s ease-in-out;
}
@keyframes word-shake {
   0%   { transform: translateX(0)    rotate(0); }
   8%   { transform: translateX(-3px) rotate(-4deg); }
   16%  { transform: translateX(3px)  rotate(4deg); }
   24%  { transform: translateX(-3px) rotate(-4deg); }
   32%  { transform: translateX(3px)  rotate(4deg); }
   40%  { transform: translateX(-2px) rotate(-3deg); }
   48%  { transform: translateX(2px)  rotate(3deg); }
   56%  { transform: translateX(-2px) rotate(-2deg); }
   64%  { transform: translateX(2px)  rotate(2deg); }
   72%  { transform: translateX(-1px) rotate(-1deg); }
   80%  { transform: translateX(1px)  rotate(1deg); }
   100% { transform: translateX(0)    rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
   .shake-word.is-shaking { animation: none; }
}

/* =====================================================================
   Hören – „Eigene Meinung bilden…" als auffälliger CTA über dem hr
   ===================================================================== */
.quote-cta {
   max-width: 720px;
   margin: 1.6rem auto .4rem;
   padding: 1rem 1.4rem;
   background: linear-gradient(90deg, rgba(240,125,0,.18), rgba(240,125,0,.05));
   border-left: 4px solid var(--orange);
   border-radius: 6px;
   text-align: center;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .06em;
   font-size: clamp(1rem, 1.6vw, 1.2rem);
   color: var(--paper);
   box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.quote-cta strong { color: var(--orange); }
.quote-cta p { margin: 0; }

/* Pressestimmen als Zeitungsausschnitte */
.press-clips {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: clamp(1.5rem, 3vw, 2.5rem);
   margin: 1.5rem 0 1rem;
   align-items: start;
}
.press-clip {
   margin: 0;
   padding: 1.2rem 1.4rem 1.4rem;
   background:
      /* Vergilbungs-Flecken */
      radial-gradient(ellipse at 15% 20%, rgba(150,110,50,.10) 0%, transparent 35%),
      radial-gradient(ellipse at 85% 80%, rgba(140,100,40,.09) 0%, transparent 40%),
      /* feine Papier-Faserung */
      repeating-linear-gradient(0deg, transparent 0 2px, rgba(120,90,50,.025) 2px 3px),
      /* Spaltentrennlinien (subtil) wie Zeitungsumbruch */
      repeating-linear-gradient(180deg, transparent 0 26px, rgba(80,50,15,.05) 26px 27px),
      linear-gradient(180deg, #f4e8c8 0%, #ecdcb0 100%);
   color: #1a1208 !important;
   border: 1px solid rgba(80,50,20,.3);
   box-shadow:
      0 2px 4px rgba(0,0,0,.15),
      0 8px 16px rgba(0,0,0,.35);
   /* Gerissene Kanten (unregelmäßiges Polygon) */
   clip-path: polygon(
      0% 1%, 4% 0, 9% 2%, 18% 0.5%, 27% 1.5%, 38% 0, 50% 1%, 62% 0.3%, 75% 1.8%, 88% 0, 96% 1.2%, 100% 0,
      100% 99%, 95% 100%, 87% 98%, 76% 99.5%, 65% 99%, 52% 100%, 41% 98.5%, 28% 100%, 17% 99%, 8% 99.7%, 1% 99%, 0 100%
   );
   transform: rotate(-1.5deg);
   font-family: Georgia, "Times New Roman", serif;
   font-size: 1rem;
   line-height: 1.55;
   transition: transform .25s;
}
.press-clip:hover { transform: rotate(0); }
.press-clip--tilt-right { transform: rotate(1.5deg); }
.press-clip--tilt-right:hover { transform: rotate(0); }

.press-clip p {
   margin: 0;
   color: #1a1208 !important;
   text-align: justify;
   hyphens: auto;
}
.press-clip strong { color: #1a1208 !important; font-weight: 700; }

.press-clip__head {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin: 0 0 .8rem;
   padding-bottom: .5rem;
   border-bottom: 2px solid #1a1208;
   font-family: Georgia, serif;
}
.press-clip__paper {
   font-family: Georgia, serif;
   font-weight: 700;
   font-variant: small-caps;
   font-size: 1.15rem;
   letter-spacing: .02em;
   color: #1a1208;
}
.press-clip__date {
   font-family: "Oswald", sans-serif;
   font-size: .75rem;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: #6a4815;
}

/* Hinweistext über den Bandmitgliedern */
.members-hint {
   text-align: center;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .12em;
   font-size: 1.05rem;
   color: var(--orange);
   margin: 0 0 1.6rem;
}
.members-hint::before,
.members-hint::after {
   content: "★";
   color: var(--orange);
   margin: 0 .55rem;
   opacity: .8;
}

/* Pressetext-Einleitung – mittig und auffälliger */
.press-intro {
   max-width: 60ch;
   margin: 1.4rem auto 1.6rem;
   text-align: center;
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .08em;
   font-size: clamp(1.05rem, 1.8vw, 1.35rem);
   line-height: 1.45;
   color: var(--paper);
}
.press-intro strong { color: var(--orange); }
.press-intro em {
   font-family: "Raleway", sans-serif;
   text-transform: none;
   font-style: italic;
   letter-spacing: 0;
   font-size: .82em;
   opacity: .8;
   display: inline-block;
   margin-top: .25em;
}

/* =====================================================================
   Members 3-spaltig (max), klare Klick-Auszeichnung
   ===================================================================== */
.members {
   grid-template-columns: repeat(3, 1fr);
   gap: 1.2rem;
   max-width: 980px;
   margin-inline: auto;
}
@media (max-width: 800px) { .members { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .members { grid-template-columns: 1fr; } }

/* Klick-Hint oben rechts (i-Badge mit Puls) */
.member::after {
   content: "i";
   position: absolute;
   top: 10px;
   right: 10px;
   width: 38px; height: 38px;
   border-radius: 50%;
   background: var(--orange);
   color: var(--black);
   display: grid;
   place-items: center;
   font-family: "Oswald", sans-serif;
   font-style: italic;
   font-weight: 700;
   font-size: 1.15rem;
   box-shadow: 0 0 0 0 rgba(240,125,0,.55), 0 6px 14px rgba(0,0,0,.45);
   transition: transform .2s, background .2s;
   pointer-events: none;
   z-index: 3;
   animation: member-info-pulse 2.4s ease-out infinite;
}
@keyframes member-info-pulse {
   0%   { box-shadow: 0 0 0 0    rgba(240,125,0,.65), 0 6px 14px rgba(0,0,0,.45); }
   70%  { box-shadow: 0 0 0 14px rgba(240,125,0,0),   0 6px 14px rgba(0,0,0,.45); }
   100% { box-shadow: 0 0 0 0    rgba(240,125,0,0),   0 6px 14px rgba(0,0,0,.45); }
}
.member:hover::after { transform: scale(1.15); background: var(--paper); animation-play-state: paused; }

/* Hover-Overlay: dunkles Banner mit "Mehr erfahren →" */
.member::before {
   content: "Mehr erfahren →";
   position: absolute;
   left: 0; right: 0; bottom: 0;
   padding: .9rem 1rem;
   background: linear-gradient(180deg, rgba(20,17,15,.0) 0%, rgba(240,125,0,.95) 100%);
   color: var(--paper);
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .12em;
   font-size: .95rem;
   text-align: center;
   z-index: 2;
   pointer-events: none;
   transform: translateY(100%);
   transition: transform .3s ease;
}
.member:hover::before { transform: translateY(0); }

/* Sichtbarer Cursor-Hint */
.member { cursor: pointer; }

/* =====================================================================
   Media-Row: Infotext (4) links + Medium (8) rechts — 4:8 Verhältnis
   wird auf der Seite SEHEN+HÖREN für Bilderreigen und Video verwendet
   ===================================================================== */
.media-row {
   display: grid;
   grid-template-columns: 4fr 8fr;
   gap: clamp(2rem, 5vw, 4rem);
   align-items: center;
}
.media-row + .media-row {
   margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
@media (max-width: 900px) {
   .media-row { grid-template-columns: 1fr; gap: 1.5rem; }
   /* Bei Mobil: Text bleibt oben, Medium darunter – auch für Video-Row gleich */
}

.media-row__text {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}
.media-row__title {
   display: flex;
   align-items: center;
   gap: .9rem;
   margin: 0;
   font-family: "Oswald", sans-serif;
   font-weight: 700;
   font-size: clamp(1.7rem, 3.2vw, 2.4rem);
   line-height: 1.05;
   letter-spacing: .01em;
   color: var(--paper);
   text-transform: uppercase;
}
.media-row__icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 54px; height: 54px;
   flex-shrink: 0;
   border-radius: 50%;
   background: var(--orange);
   color: #14110f;
   box-shadow: 0 4px 14px rgba(240,125,0,.35);
}
.media-row__icon svg { display: block; }
.media-row__lead {
   margin: 0;
   font-family: "Raleway", sans-serif;
   font-size: 1.05rem;
   line-height: 1.55;
   color: var(--paper);
   opacity: .92;
}
.media-row__small {
   display: inline-block;
   margin-top: .35rem;
   font-size: .92rem;
   opacity: .8;
}

/* =====================================================================
   Galerie als Slider (Filmstreifen-Optik) — wird im .media-row__media platziert
   ===================================================================== */
.media-row__media .slider-track,
.slider-track {
   position: relative;
   overflow: hidden;
   border-radius: 4px;
   aspect-ratio: 16 / 9;
   background: #0a0a0a;
   padding: 24px 0;
   box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
.media-row__media .slider-track::before,
.media-row__media .slider-track::after,
.slider-track::before,
.slider-track::after {
   content: "";
   position: absolute;
   left: 0; right: 0;
   height: 24px;
   background-color: #0a0a0a;
   background-image:
      radial-gradient(circle at 14px 50%, rgba(245,235,215,.92) 0 4.5px, transparent 5.5px);
   background-size: 28px 100%;
   background-repeat: repeat-x;
   background-position: 0 50%;
   z-index: 2;
   pointer-events: none;
   border-top: 1px solid rgba(255,255,255,.08);
   border-bottom: 1px solid rgba(255,255,255,.08);
}
.media-row__media .slider-track::before,
.slider-track::before { top: 0; border-top: 0; }
.media-row__media .slider-track::after,
.slider-track::after  { bottom: 0; border-bottom: 0; }

.slider-track .slide {
   position: absolute;
   inset: 24px 0;     /* zwischen den beiden Perforationsleisten */
   opacity: 0;
   transition: opacity .5s ease;
}
.slider-track .slide.is-active { opacity: 1; }
.slider-track .slide img {
   width: 100%; height: 100%;
   object-fit: contain;
   background: #0a0a0a;
}

/* Slider-Controls und Counter über den Perforationen */
.slider-track .slider-controls,
.slider-track .slider-counter { z-index: 3; }

/* YT-Embed-Vorschaubild: ganz zeigen, nicht beschneiden */
.media-row__media .yt-embed .yt-cover img { object-fit: contain; background: #0a0a0a; }
.slider-track .slider-controls {
   position: absolute;
   /* Vertikal mittig im Bildbereich (zwischen den 24-px-Perforationsleisten) */
   left: 0; right: 0;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   justify-content: space-between;
   padding: 0 .5rem;
   pointer-events: none;
}
.slider-track .slider-controls button {
   pointer-events: auto;
   width: 38px; height: 44px;
   padding: 0;
   border: 0;
   border-radius: 3px;
   background: rgba(245,235,215,.30);
   color: var(--paper);
   font-size: 1.7rem;
   font-weight: 400;
   line-height: 1;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   text-shadow: 0 1px 2px rgba(0,0,0,.6);
   transition: background .2s, color .2s;
   backdrop-filter: blur(2px);
}
.slider-track .slider-controls button:hover {
   background: rgba(245,235,215,.55);
   color: var(--orange);
}
.slider-track .slider-counter {
   position: absolute;
   top: .5rem; right: .5rem;
   background: rgba(20,17,15,.7);
   color: var(--paper);
   font-family: "Oswald", sans-serif;
   font-size: .85rem;
   padding: .15rem .55rem;
   border-radius: 999px;
}

/* =====================================================================
   Member-Detail (Modal): Großbild im Focus, Text überlappt
   ===================================================================== */
.member-modal__inner {
   max-width: 900px;
   width: 95%;
   max-height: 92vh;
   overflow: hidden;
   padding: 0;
   background: var(--black);
   border: 0;
   box-shadow: 0 20px 60px rgba(0,0,0,.7);
   display: grid;
   grid-template-columns: minmax(280px, 1.1fr) minmax(280px, 1fr);
   position: relative;
}
@media (max-width: 720px) {
   .member-modal__inner { grid-template-columns: 1fr; max-height: 95vh; overflow: auto; }
}
.member-modal__photo {
   position: relative;
   background-size: cover;
   background-position: center top;
   min-height: 480px;
}
@media (max-width: 720px) {
   .member-modal__photo { min-height: 320px; }
}
.member-modal__photo::after {
   content: "";
   position: absolute; inset: 0;
   background: linear-gradient(90deg, transparent 55%, var(--black) 100%),
               linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55) 100%);
}
@media (max-width: 720px) {
   .member-modal__photo::after {
      background: linear-gradient(180deg, transparent 50%, var(--black) 100%);
   }
}

.member-modal__content {
   padding: 4rem 1.4rem 1.6rem 0;
   color: var(--paper);
   overflow: auto;
   position: relative;
   z-index: 2;
   /* Text ragt leicht ins Bild rein */
   margin-left: -2rem;
}
@media (max-width: 720px) {
   .member-modal__content { padding: 4rem 1.2rem 1.2rem; margin-left: 0; }
}

.member-modal__head { display: block; margin: 0 0 .8rem; }
.member-modal__head img { display: none; }   /* das Bild liegt jetzt als Hintergrund */
.member-modal__name {
   font-size: clamp(1.8rem, 3vw, 2.4rem);
   color: var(--paper);
   margin: 0 0 .25rem;
   text-shadow: 0 2px 14px rgba(0,0,0,.7);
}
.member-modal__role {
   color: var(--orange);
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .12em;
   font-size: .9rem;
}
.member-modal__close {
   position: absolute;
   top: .6rem; right: .6rem;
   z-index: 5;
   background: var(--orange);
   color: var(--black);
   border: 2px solid var(--black);
   width: 40px; height: 40px;
   font-size: 1.4rem;
   font-weight: 700;
   line-height: 1;
   box-shadow: 0 3px 10px rgba(0,0,0,.5);
}
.member-modal__close:hover { background: var(--paper); color: var(--black); }
/* Backdrop selbst ist klickbar (schließt Modal via JS) */
.member-modal { cursor: pointer; }
.member-modal__inner { cursor: default; }
.member-modal__nav {
   position: absolute;
   left: 0; right: 0;
   top: .8rem;
   display: flex;
   justify-content: space-between;
   gap: .5rem;
   /* rechts mehr Platz, damit Next-Button nicht unter den Schließen-Button gerät */
   padding: 0 4rem 0 1rem;
   z-index: 3;
}
.member-modal__nav a {
   font-family: "Oswald", sans-serif;
   text-transform: uppercase;
   letter-spacing: .08em;
   font-size: .82rem;
   padding: .45rem .8rem;
   background: rgba(20,17,15,.7);
   color: var(--paper);
   border-radius: 999px;
   text-decoration: none;
}
.member-modal__nav a:hover { background: var(--orange); color: var(--black); }
.member-modal__nav a.is-disabled { opacity: .35; pointer-events: none; }

/* dl im Modal etwas dezenter über Bild lesbar */
.member-modal dl {
   margin-top: 1rem;
   color: var(--paper);
}
.member-modal dt { color: var(--orange); }

/* =====================================================================
   Heim auf Mobile/Tablet-Portrait – muss am Ende stehen, damit es die
   spätere body.page-heim::before-Regel oben im File überschreibt.
   ===================================================================== */
@media (max-width: 900px) {
   body.page-heim::before {
      background-image: url('../img/home-page-2026-mobil.jpg') !important;
      background-size: contain !important;
      background-position: top center !important;
      background-repeat: no-repeat !important;
      background-color: var(--black) !important;
      filter: brightness(.95) saturate(1.05);
   }
   body.page-heim::after {
      background:
         linear-gradient(180deg, transparent 0%, transparent 45%, rgba(20,17,15,.4) 60%, rgba(20,17,15,.85) 100%) !important;
   }
   body.page-heim .hero {
      padding-top: clamp(11rem, 56vw, 22rem);
   }
}