/* ==========================================================
   Puddelrüh – Variante im Stil von aya.nl, Palette „köbi Warmweiß“
   Warmweiß als Grund, Orange als Leuchtfarbe, Türkis/Pistazie/Petrol als Flächen.
   Große Pillen und runde Karten, Farbflächen mit Wellen.
   Titan One (Display) + Jost (Text), beide lokal, OFL.
   ========================================================== */

@font-face { font-family: "Titan One"; src: url("../fonts/titanone.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  --orange: #FA6400;     /* Leuchtfarbe; auf Warmweiß nur fürs Logo (2,8:1), Texte in --ink */
  --paper: #F7F4EF;      /* Grund (Warmweiß) */
  --ink: #1F1F1F;        /* Text */
  --turq: #41BBCA;
  --pistachio: #DBE283;
  --petrol: #3F5F5C;
  --salbei: #A3B094;
  --white: #FFFFFF;
  --gutter: clamp(12px, 3vw, 32px);
  --spotify: #1ED760;
  --r-xl: clamp(28px, 4vw, 56px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
/* Fünf Farbkombis rund ums Orange – beim Laden wählt ein kleines Skript im <head> eine davon.
   Rollen: paper = Grund, ink = Text, turq/pistachio = helle Akzente, petrol = dunkle Fläche, salbei = Kartenton */
:root[data-palette="nachtblau"] { --paper: #F6EFE2; --ink: #14213D; --turq: #8EC5F5; --pistachio: #EFD9B4; --petrol: #14213D; --salbei: #B8C9DE; }
:root[data-palette="veilchen"]  { --paper: #F6F2FF; --ink: #1E1730; --turq: #C3B5F9; --pistachio: #E4FC51; --petrol: #3A1C71; --salbei: #DCD3FB; }
:root[data-palette="wald"]      { --paper: #F6EFE2; --ink: #15241E; --turq: #A8EBD0; --pistachio: #D6E6A6; --petrol: #0F3D2E; --salbei: #B5CDBF; }
:root[data-palette="sahne"]     { --paper: #FFF1DD; --ink: #3B2416; --turq: #FFC85C; --pistachio: #F7D6B0; --petrol: #5A3A26; --salbei: #E8C79E; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Jost", system-ui, sans-serif; font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); line-height: 1.6;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.center { text-align: center; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 99px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.display { font-family: "Titan One", "Jost", sans-serif; font-weight: 400; text-transform: uppercase; line-height: 1; letter-spacing: .01em; }
.display-lg { font-size: clamp(2.2rem, 1.4rem + 4vw, 5rem); }
.display-xl { font-size: clamp(2.4rem, 1.2rem + 6vw, 7rem); }

.wordmark {
  display: block; aspect-ratio: 1323 / 221; background-color: currentColor;
  -webkit-mask: url("../img/wordmark.png") center / contain no-repeat;
          mask: url("../img/wordmark.png") center / contain no-repeat;
}

/* Pillen */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0;
  font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .25s var(--ease), background-color .25s, color .25s;
}
.pill:hover { transform: scale(1.04); }
.pill-dark { background: var(--ink); color: var(--white); }
.pill-cream { background: var(--white); color: var(--ink); }
.pill-orange { background: var(--orange); color: var(--ink); }
.pill-lg { min-height: 56px; padding: 0 28px; font-size: 1rem; }
.tag {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--white); color: var(--ink);
}
.tag-orange { background: var(--orange); }
.tag-pistachio { background: var(--pistachio); }
.tag-turq { background: var(--turq); }

/* Kopfzeile */
.bar {
  position: fixed; inset: 12px var(--gutter) auto; z-index: 50;
  display: flex; justify-content: space-between; align-items: center; pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar-right { display: flex; gap: 8px; }
.pill-logo { background: var(--white); padding: 0 18px; }
.pill-logo .wordmark { width: 92px; color: var(--ink); }
.bar i { display: inline-block; width: 16px; height: 10px; background: linear-gradient(currentColor 0 2px, transparent 2px 4px, currentColor 4px 6px, transparent 6px 8px, currentColor 8px 10px); }
@media (max-width: 479px) { .bar-cta { display: none; } }
/* über orangen Flächen wird die Anfragen-Pille nachtblau */
.bar[data-on="orange"] .bar-cta { background: var(--ink); color: var(--white); }

/* Menü */
.menu {
  position: fixed; inset: 0; z-index: 100; background: var(--orange); color: var(--ink);
  display: grid; align-content: center; justify-items: center; gap: 24px; padding: 80px 20px;
  clip-path: circle(0% at calc(100% - 60px) 34px); transition: clip-path .6s var(--ease);
}
.menu.is-open { clip-path: circle(150% at calc(100% - 60px) 34px); }
.menu-close { position: absolute; top: 12px; right: var(--gutter); }
.menu-links { display: grid; gap: 4px; text-align: center; }
.menu-links a { font-family: "Titan One", sans-serif; text-transform: uppercase; font-size: clamp(2.4rem, 1.6rem + 5vw, 5.5rem); line-height: 1.05; text-decoration: none; }
.menu-links a:hover { color: var(--white); }

/* Hero: Schriftzug mit Unterzeile oben links über dem 16:9-Foto */
.hero { position: relative; padding: 76px var(--gutter) 0; }
.hero-title { position: relative; z-index: 2; padding: 8px 4px clamp(20px, 2.5vw, 36px); color: var(--orange); will-change: transform; }
.hero-wordmark { width: min(100%, 860px); }
.hero-sub {
  margin-top: clamp(8px, 1.2vw, 18px); color: var(--ink);
  font-family: "Titan One", sans-serif; text-transform: uppercase; line-height: 1.1;
  font-size: clamp(1rem, .7rem + 1.6vw, 2.1rem);
}
.hero-card {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  aspect-ratio: 16 / 9; color: var(--white);
  transform-origin: 50% 0;
  transform: scale(calc(1 - var(--p, 0) * .06));
  will-change: transform;
}
.hero-img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  transform-origin: 50% 100%;
  transform: scale(calc(1.12 - var(--p, 0) * .12)) translateY(calc(var(--p, 0) * 3%));
  will-change: transform;
}
.hero-cta { position: absolute; right: clamp(12px, 2.5vw, 36px); bottom: clamp(12px, 2.5vw, 36px); z-index: 2; }
@media (max-width: 599px) { .hero-cta { min-height: 44px; padding: 0 18px; font-size: .85rem; } }

/* Pillen-Reihen */
.rows { display: grid; gap: 12px; padding: 12px var(--gutter) clamp(48px, 8vw, 120px); }
.row { display: grid; gap: 12px; }
.row-pill {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--white); color: var(--ink); border-radius: var(--r-xl); padding: clamp(20px, 3vw, 36px) clamp(22px, 3.5vw, 48px);
}
.tone-turq { background: var(--turq); }
.tone-pist { background: var(--pistachio); }
.tone-white { background: var(--white); }
.row-pill { flex-wrap: wrap; }
.row-pill > div { min-width: 0; flex: 1 1 220px; }
.row-pill .display { font-size: clamp(1.5rem, 1rem + 2.6vw, 3.4rem); margin-top: 10px; overflow-wrap: break-word; hyphens: manual; }
.row-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-xl); }
/* quadratische Single-Cover statt Foto */
.row-cover { aspect-ratio: 1 / 1; height: auto; object-fit: cover; }
@media (min-width: 900px) {
  .row .row-cover { aspect-ratio: 1 / 1; height: auto; min-height: 0; align-self: start; }
}
@media (min-width: 900px) {
  .row { grid-template-columns: 2fr 1fr; }
  .row-flip { grid-template-columns: 1fr 2fr; }
  .row-flip .row-photo { order: -1; }
  .row-photo { aspect-ratio: auto; height: 100%; min-height: 200px; }
}

/* Farbflächen mit Wellen */
.blob { position: relative; padding: clamp(80px, 10vw, 150px) 0; }
.wave { position: absolute; left: 0; bottom: 100%; width: 100%; height: clamp(50px, 9vw, 150px); display: block; margin-bottom: -1px; }
.blob-turq { background: var(--turq); color: var(--ink); } .blob-turq .wave path { fill: var(--turq); }
.blob-orange { background: var(--orange); color: var(--ink); } .blob-orange .wave path { fill: var(--orange); }
.blob-pist { background: var(--pistachio); color: var(--ink); } .blob-pist .wave path { fill: var(--pistachio); }
.blob-petrol { background: var(--petrol); color: var(--paper); } .blob-petrol .wave path { fill: var(--petrol); }

.statement { display: grid; justify-items: center; gap: 28px; text-align: center; }
.statement-text { max-width: 36em; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }

/* Termine */
.sub { margin: 12px 0 36px; font-weight: 600; }
.agenda { display: grid; gap: 10px; align-content: start; margin-bottom: 28px; }
.gigs-pager { display: flex; justify-content: center; align-items: center; gap: 16px; margin: -8px 0 32px; }
.gigs-page { min-width: 9em; text-align: center; font-weight: 700; }
.gigs-pager .round:disabled { opacity: .35; cursor: default; transform: none; }
/* mobil: eine Creme-Karte pro Termin */
.gig {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 6px 10px; align-items: center;
  background: var(--white); border-radius: 28px; padding: 16px 20px;
}
.gig .g-title { grid-column: 1 / -1; overflow-wrap: anywhere; }
.gig > span { font-size: .92rem; font-weight: 600; line-height: 1.3; }
.gig .g-date { font-weight: 700; }
.gig .g-place { justify-self: end; text-align: right; opacity: .75; }
.gig .g-title { font-family: "Titan One", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1.1rem; }
/* ab Tablet: einzelne Pillen nebeneinander wie bei aya */
@media (min-width: 900px) {
  .gig { display: flex; flex-wrap: wrap; gap: 6px; background: none; padding: 0; border-radius: 0; }
  .gig > span {
    display: inline-flex; align-items: center; min-height: 48px; padding: 8px 18px; border-radius: 999px;
    background: var(--white); font-size: .9rem;
  }
  .gig .g-place { opacity: 1; }
  .gig .g-title { flex: 1 1 260px; font-size: 1.05rem; grid-column: auto; }
}
.link { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; text-underline-offset: 5px; }
.gigs-empty { margin-bottom: 32px; font-size: 1.1rem; font-weight: 600; }

/* Band-Karussell */
.band-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 28px; }
.arrows { display: flex; gap: 8px; }
.round { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--white); font-size: 1.3rem; cursor: pointer; transition: transform .25s var(--ease); }
.round:hover { transform: scale(1.08); }
.carousel {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 0 var(--gutter) 8px; scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.person {
  position: relative; flex: none; width: min(72vw, 320px); aspect-ratio: 3 / 4;
  border-radius: var(--r-xl); overflow: hidden; scroll-snap-align: start;
  display: grid; place-items: center;
}
.person-initial { font-family: "Titan One", sans-serif; font-size: clamp(7rem, 5rem + 8vw, 11rem); line-height: 1; }
/* Freigestellte Porträts auf der Kartenfarbe, Namenspille vorne */
.person-cut {
  position: absolute; z-index: 1; bottom: 0; left: 50%;
  width: 96%; height: auto; max-width: none;
  transform: translateX(-50%); transform-origin: 50% 100%;
  transition: transform .4s var(--ease);
  clip-path: inset(2% 0 0 0); /* blendet Reste am oberen Bildrand aus; dort ist sonst nur Transparenz */
}
/* 2:3-Porträt (statt 3:4): etwas tiefer setzen, damit der Kopf auf Höhe der anderen sitzt */
.person-cut-tall { bottom: -4%; }
.person:hover .person-cut { transform: translateX(-50%) scale(1.03); }
.person-pill { z-index: 2; }
.person-orange { background: var(--orange); color: var(--ink); }
.person-white { background: var(--white); color: var(--orange); }
.person-petrol { background: var(--petrol); color: var(--paper); }
.person-turq { background: var(--turq); color: var(--ink); }
.person-salbei { background: var(--salbei); color: var(--ink); }
.person-ink { background: var(--ink); color: var(--orange); }
.person-pill {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: grid; background: var(--white); color: var(--ink); border-radius: 28px; padding: 12px 18px; font-size: .95rem; line-height: 1.3;
}
.person-pill strong { font-size: 1.02rem; }
.note { margin-top: 18px; font-size: .9rem; opacity: .75; }

/* Wortliste */
.words { padding-top: clamp(64px, 8vw, 120px); }
.sub-dark { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 20px; color: var(--orange); }
.words .display-lg { color: var(--paper); }
.word-list { display: grid; justify-items: center; gap: 4px; }
.word-list details { text-align: center; max-width: 100%; }
.word-list .display-lg { font-size: clamp(1.7rem, .9rem + 5vw, 5rem); }
.word-list summary { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; list-style: none; }
.word-list summary::-webkit-details-marker { display: none; }
.word-list summary i {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--orange); color: var(--ink); font-style: normal; font-weight: 700; font-size: 1.4rem; transition: transform .3s var(--ease);
}
.word-list details[open] summary i { transform: rotate(45deg); }
.word-list p { max-width: 28em; margin: 8px auto 18px; font-weight: 500; }

/* Anfrage: links Infos und Kontaktwege, rechts schlankes Formular (Vorbild tk-eefelkank.de) */
.ask {
  background: var(--white); color: var(--ink); border-radius: var(--r-xl); padding: clamp(28px, 5vw, 72px);
  display: grid; gap: clamp(28px, 4vw, 56px); align-items: start;
}
@media (min-width: 960px) { .ask { grid-template-columns: 1fr 1.25fr; } }
.ask-info { display: grid; gap: 18px; }
.ask-info p { max-width: 30em; }
.ask-contacts { display: grid; gap: 14px; margin-top: 6px; }
.ask-contacts li { display: grid; gap: 2px; }
.ask-contacts span { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }
.ask-contacts a { font-weight: 600; font-size: 1.1rem; text-decoration: none; }
.ask-contacts a:hover { color: var(--orange); }
.ask-agency { display: grid; gap: 10px; justify-items: start; margin-top: 12px; text-decoration: none; }
.ask-agency span { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }
.ask-agency img { width: 200px; height: auto; transition: transform .25s var(--ease); }
.ask-agency:hover img { transform: scale(1.03); }

/* Kontaktformular */
.form { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.form-grid { display: grid; gap: 24px 20px; }
/* Desktop: Formular so hoch wie die Infospalte, das Nachrichtenfeld nimmt den Rest */
@media (min-width: 960px) {
  .ask { align-items: stretch; }
  .form label:has(> textarea) { flex: 1; display: flex; flex-direction: column; }
  .form label > textarea { flex: 1; }
}
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form label { display: block; font-weight: 600; font-size: .95rem; }
.form label > input, .form label > select, .form label > textarea { display: block; margin-top: 6px; }
.opt { font-weight: 400; opacity: .65; }
.form input, .form select, .form textarea {
  width: 100%; min-height: 52px; padding: 12px 20px;
  font: inherit; font-weight: 400; color: var(--ink);
  background: var(--paper); border: 2px solid transparent; border-radius: 999px;
  transition: border-color .2s, background-color .2s;
}
.form select { appearance: none; padding-right: 44px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 24px) 50%, calc(100% - 18px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.form textarea { border-radius: 28px; min-height: 200px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--orange); background: var(--white); }
.form [aria-invalid="true"] { border-color: #C8341B; }
.form-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.form-note { font-size: .88rem; opacity: .7; max-width: 34em; }
.form-error { font-weight: 700; color: #B2290F; }

/* Footer */
.foot { background: var(--ink); color: var(--paper); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: clamp(48px, 6vw, 80px) 0 32px; margin-top: -40px; position: relative; }
.foot-grid { display: grid; gap: 28px; justify-items: center; text-align: center; }
.foot-wordmark { width: min(80vw, 520px); color: var(--orange); }
.foot-links { display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; max-width: 100%; }
@media (max-width: 479px) { .foot-links { gap: 4px; } .foot-links .pill { min-height: 40px; padding: 0 clamp(8px, 2.4vw, 12px); font-size: clamp(.66rem, .5rem + .8vw, .78rem); letter-spacing: 0; } }
.foot-legal { font-size: .92rem; opacity: .75; }
.foot-legal a { color: inherit; text-decoration: none; }
.foot-legal a:hover { color: var(--orange); }
main > .blob:last-child { padding-bottom: calc(clamp(80px, 10vw, 150px) + 40px); } /* Footer überlappt um 40px */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
/* Einwilligung */
.form-check { display: flex !important; gap: 12px; align-items: flex-start; font-weight: 400 !important; font-size: .92rem !important; line-height: 1.45; }
.form .form-check input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; padding: 0; flex: none; border-radius: 6px; accent-color: var(--orange); }
.form-check a { color: inherit; text-underline-offset: 3px; }

/* Live-Galerie unter „Wir spielen auf Eurer …“ */
.live-gallery {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: clamp(40px, 6vw, 80px);
}
.live-gallery a { display: block; overflow: hidden; border-radius: clamp(18px, 2.4vw, 32px); }
.live-gallery img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s var(--ease); }
.live-gallery a:hover img { transform: scale(1.04); }
.live-gallery .live-big { grid-column: span 2; }
@media (min-width: 900px) {
  .live-gallery { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .live-gallery .live-big { grid-column: auto; }
}
.live-gallery a { transition: opacity .3s; }
.live-gallery a.is-swapping { opacity: 0; }
.live-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: clamp(16px, 2vw, 24px); }
.live-more svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.live-more.is-spinning svg { animation: spin .6s var(--ease); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(94vw, 1400px); max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgba(31, 31, 31, .88); }
.lightbox img { max-height: 86vh; width: auto; border-radius: 24px; }
.lightbox-figure { position: relative; margin: 0; }
.lightbox-credit {
  position: absolute; right: 14px; bottom: 14px; padding: 4px 12px; border-radius: 999px;
  background: rgba(31, 31, 31, .55); color: var(--white); font-size: .78rem; font-weight: 500; letter-spacing: .02em;
}
.lightbox-close { position: fixed; top: 16px; right: 16px; }

/* Drehregler-Player der Singles: Mitte = Play/Pause, Drehen = Lautstärke (Skala), dünner Ring = Fortschritt */
.player, .row-pill > .player { display: grid; justify-items: center; gap: 16px; flex: none; position: relative; }
.knob { position: relative; width: clamp(156px, 13vw, 188px); aspect-ratio: 1; }
.knob-dial { position: absolute; inset: 0; border-radius: 50%; cursor: grab; touch-action: none; }
.knob-dial:active { cursor: grabbing; }
.knob-dial:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.knob-scale { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.knob-ticks line { stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; opacity: .22; transition: opacity .12s; }
.knob-ticks line.is-major { stroke-width: 2.8; }
.knob-ticks line.is-on { opacity: 1; }
.knob-label { fill: currentColor; font: 700 15px "Jost", sans-serif; text-anchor: middle; }
.knob-track, .knob-progress { fill: none; stroke-width: 3; }
.knob-track { stroke: rgba(31, 31, 31, .14); }
.knob-progress { stroke: var(--orange); stroke-linecap: round; opacity: 0; stroke-dasharray: var(--prog, 0) 100; transition: stroke-dasharray .25s linear; }
.knob-progress.has-progress { opacity: 1; }
.knob-cap {
  position: absolute; inset: 20%; border-radius: 50%; background: var(--ink);
  transform: rotate(var(--rot, 81deg));
  transition: transform .08s linear;
}
.knob-notch { position: absolute; left: 50%; top: 7%; width: 4px; height: 17%; margin-left: -2px; border-radius: 2px; background: var(--orange); }
.knob-play {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 32%; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0;
  background: var(--white); cursor: pointer; transition: transform .2s var(--ease);
}
.knob-play:hover { transform: translate(-50%, -50%) scale(1.08); }
.knob-play:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.knob-icon { width: 34%; aspect-ratio: 1; margin-left: 8%; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.is-playing .knob-icon { margin-left: 0; clip-path: none; background: linear-gradient(90deg, var(--ink) 0 34%, transparent 34% 66%, var(--ink) 66% 100%); }
.spotify { padding-left: 12px; gap: 10px; }
.spotify-icon { width: 24px; height: 24px; flex: none; fill: var(--spotify); }
.knob-hint {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; width: max-content; max-width: 220px;
  padding: 8px 14px; border-radius: 16px; background: var(--ink); color: var(--white);
  font-size: .82rem; font-weight: 600; line-height: 1.35; text-align: center;
}
@media (max-width: 639px) { .knob-hint { left: 0; right: auto; } }
/* Single-Felder: links Tag + Titel als Block, rechts der Regler (beide vertikal mittig), Spotify-Button unten rechts */
.row-single { --pad-y: clamp(20px, 3vw, 36px); --pad-x: clamp(22px, 3.5vw, 48px); position: relative; }
.row-single > div:first-child { min-width: 0; }
.row-single .display { max-width: none; line-height: .95; text-wrap: balance; font-size: clamp(2.2rem, 1rem + 5vw, 6rem); } /* Feinabstimmung per Skript: längstes Wort = volle Breite */
@media (max-width: 639px) {
  .row-single { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 20px; }
  .row-single > div:first-child { flex: none; }
  .row-single > .player { gap: 20px; }
  .row-single .knob-hint { top: auto; bottom: 60px; left: 50%; right: auto; transform: translateX(-50%); }
}
@media (min-width: 640px) {
  .row-single {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--pad-x);
    --knob: clamp(140px, 14vw, 196px);
    min-height: calc(var(--knob) + 2 * var(--pad-y) + 112px); /* mittiger Regler bleibt frei vom Button unten */
  }
  .row-single > .player { display: contents; }
  .row-single .knob { width: var(--knob); }
  .row-single .spotify { position: absolute; right: var(--pad-x); bottom: var(--pad-y); }
  .row-single .knob-hint { top: auto; left: auto; right: var(--pad-x); bottom: calc(var(--pad-y) + 56px); }
}

/* Unterseite „Geschichte“ */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.story-head { padding: 104px 0 clamp(96px, 12vw, 180px); }
.story-head h1 { margin: 16px 0 clamp(28px, 4vw, 56px); max-width: 14ch; text-wrap: balance; }
.story-intro { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
.story-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-xl); }
.story-text { display: grid; gap: 18px; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); max-width: 34em; }
@media (min-width: 900px) { .story-intro { grid-template-columns: 1.1fr 1fr; } }

.chronik { display: grid; gap: 12px; margin-top: clamp(32px, 5vw, 64px); }
@media (min-width: 900px) { .chronik { grid-template-columns: 1fr 1fr; gap: 14px; } }
.chronik-item { display: grid; align-content: start; gap: 10px; background: var(--white); border-radius: 28px; padding: clamp(22px, 3vw, 36px); }
.chronik-year { font-family: "Titan One", sans-serif; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1; color: var(--orange); }
.chronik-item h3 { margin: 0; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.25; text-wrap: balance; }
.chronik-item p { margin: 0; }

.songs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.song { display: grid; align-content: start; justify-items: start; gap: 12px; background: var(--white); border-radius: 28px; padding: 14px 14px 20px; }
.song img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 18px; }
.song .tag { margin: 4px 0 0 4px; }
.song h3 { margin: 0 4px; font-family: "Titan One", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1.15rem; line-height: 1.15; }
.song .spotify { margin: auto 0 0 4px; }
.story-cta { padding-bottom: calc(clamp(80px, 10vw, 150px) + 40px); }

/* Kontakt & Veranstalter (kontakt.php) */
.page-top { padding-top: clamp(104px, 11vw, 150px); }
.downloads { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.dl { display: grid; grid-template-rows: auto auto 1fr auto auto; justify-items: start; gap: 10px; background: var(--white); border-radius: 28px; padding: 14px 14px 22px; }
.dl > :not(.dl-preview) { margin-inline: 6px; }
.dl-preview { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; background: var(--paper); }
.dl-preview-logo { object-fit: contain; padding: 12% 10%; }
.dl-preview-type { display: grid; place-items: center; font-family: "Titan One", sans-serif; font-size: clamp(2.4rem, 2rem + 2vw, 3.4rem); color: var(--orange); }
@media (max-width: 599px) { .dl-preview-type { aspect-ratio: 3 / 1; } }
.dl h3 { margin-top: 6px; margin-bottom: 0; font-family: "Titan One", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1.2rem; line-height: 1.15; }
.dl p { margin: 0; font-size: .98rem; }
.dl .dl-meta { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }
.dl.is-folgt .dl-meta { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .9rem; }
.dl.is-folgt .dl-preview-type { color: var(--ink); opacity: .25; }
.dl .pill { margin-top: 4px; }
.foot-service { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* Instagram (Startseite) */
.insta-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.insta-head .tag { margin-bottom: 14px; }
.insta-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.insta-icon .insta-dot { fill: currentColor; stroke: none; }
.insta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 900px) { .insta-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.insta-grid a { display: block; overflow: hidden; border-radius: clamp(18px, 2.4vw, 32px); }
.insta-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s var(--ease); }
.insta-grid a:hover img { transform: scale(1.04); }
/* 3 Kacheln für Storys und Reels: Hochformat, auf dem Handy seitlich wischen */
.insta-grid.is-reels { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(72vw, 320px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.insta-grid.is-reels::-webkit-scrollbar { display: none; }
.insta-grid.is-reels li { scroll-snap-align: start; }
@media (min-width: 760px) { .insta-grid.is-reels { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; gap: 14px; } }
.insta-grid.is-reels a { position: relative; }
.insta-grid.is-reels img { aspect-ratio: 4 / 5; }   /* wie im Zyff-Widget eingestellt */
.insta-art { position: absolute; left: 14px; top: 14px; }
.insta-play { position: absolute; right: 14px; bottom: 14px; width: 48px; height: 48px; border-radius: 50%; background: var(--white); }
.insta-play::after { content: ""; position: absolute; left: 19px; top: 15px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--ink); }

/* Startseite: Buttons unter der Wortliste */
.feiern-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(28px, 4vw, 48px); }

/* Kontaktseite: Einstieg mit Highlightzahlen */
.booking-head h1 { margin: 16px 0 20px; max-width: 16ch; text-wrap: balance; font-size: clamp(1.9rem, .4rem + 7vw, 6rem); }
.booking-text { max-width: 36em; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
.highlights { display: grid; gap: 14px; margin-top: clamp(32px, 5vw, 64px); }
@media (min-width: 760px) { .highlights { grid-template-columns: repeat(3, 1fr); } }
.highlight { display: grid; align-content: start; gap: 10px; background: var(--white); border-radius: 28px; padding: clamp(24px, 3vw, 40px); }
.highlight strong { font-family: "Titan One", sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(2.6rem, 1.8rem + 3vw, 4.4rem); line-height: 1; }
.highlight strong::after { content: ""; display: block; width: 48px; height: 6px; margin-top: 16px; border-radius: 3px; background: var(--orange); }
.highlight p { margin: 0; }

/* Impressum, Datenschutz, Grounding Page: Titel wie auf den Unterseiten, Text in einer weißen Karte */
.legal { padding: clamp(104px, 11vw, 150px) 0 calc(clamp(56px, 7vw, 100px) + 40px); } /* Footer überlappt um 40px */
.legal-wrap { max-width: 1000px; }
.legal-head h1 { margin: 16px 0 clamp(24px, 3.5vw, 48px); text-wrap: balance; }
.legal-card {
  display: grid; gap: 12px; align-content: start;
  background: var(--white); color: var(--ink); border-radius: var(--r-xl);
  padding: clamp(24px, 5vw, 64px);
}
.legal-card h2 {
  margin-top: clamp(18px, 2.4vw, 30px);
  font-family: "Titan One", "Jost", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height: 1.15; letter-spacing: .01em; text-wrap: balance;
}
.legal-card > h2:first-child, .legal-note + h2 { margin-top: 0; }
.legal-card p, .legal-card li { max-width: 42em; }
.legal-card ul { display: grid; gap: 6px; list-style: none; }
.legal-card li { position: relative; padding-left: 22px; }
.legal-card li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.legal-card a { text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-card a:hover { color: var(--orange); }
.legal-note { background: var(--paper); border-radius: 22px; padding: 16px 22px; font-weight: 500; margin-bottom: clamp(8px, 1.5vw, 18px); max-width: none !important; }
.todo { background: var(--orange); color: var(--ink); padding: 0 6px; border-radius: 6px; font-weight: 600; }
.legal-back { display: flex; justify-content: center; margin-top: clamp(24px, 3.5vw, 44px); }