/* =====================================================================
   Feinschliff nach Lucas Korrekturen (Notiz „Korrekturen Zanadu“, 23.10.2026)
   Wird auf jeder Seite nach den Seiten-Stilen geladen und überschreibt sie gezielt.
   ===================================================================== */

/* ---------- Offene Punkte für die Band: stehen im Code, nicht mehr auf der Seite ---------- */
.zx-todo, .zb-todo, .zd-todo, .zf-offen, .zh-todo, .zk-todo, .zm-todo, .zq-todo { display: none !important; }

/* ---------- Knöpfe im Abschluss statt Termin-Check: Anfrage + Anruf ---------- */
.zx .zx-final-cta, .zx .zh-final-cta, .zx .zf-final-cta, .zx .zh-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 3.2vw, 52px) !important; }
.zx .zx-cta .zx-btn-tel, .zx .zx-cta .zh-btn-tel, .zx.zf-final .zx-cta .zf-btn-line {
  display: inline-flex; align-items: center; height: 64px; padding: 0 2.1em; box-sizing: border-box; border: 3px solid #fff; border-radius: 999px;
  background: transparent; color: #fff !important; font: 800 1.05rem/1 var(--zx-display); text-transform: uppercase; text-decoration: none;
  transition: transform .25s var(--zx-ease), background-color .2s, color .2s;
}
.zx .zx-cta .zx-btn-tel::before, .zx .zx-cta .zx-btn-tel::after, .zx .zx-cta .zh-btn-tel::before, .zx .zx-cta .zh-btn-tel::after,
.zx.zf-final .zx-cta .zf-btn-line::before, .zx.zf-final .zx-cta .zf-btn-line::after { display: none !important; }
.zx .zx-cta .zx-btn-tel:hover, .zx .zx-cta .zh-btn-tel:hover, .zx.zf-final .zx-cta .zf-btn-line:hover { transform: translateY(-3px); background: #fff; color: var(--zx-ink) !important; }
.zx.zh-hero .zh-hero-cta .uk-button-primary { background: var(--zx-ink) !important; color: #fff !important; }
@media (max-width: 639px) { .zx .zx-cta .zx-btn-tel, .zx .zx-cta .zh-btn-tel, .zx.zf-final .zx-cta .zf-btn-line { width: 100%; justify-content: center; } }

/* ---------- Start · Schallplatte: nur das Logo groß in der Mitte, mit der Maus drehbar ---------- */
.zx-repertoire .zx-vinyl {
  rotate: calc(var(--zx-turn, 0deg) + var(--zx-dj, 0deg));
  background:
    radial-gradient(circle at 50% 50%, transparent 0 21.5%, rgba(255, 255, 255, .06) 21.5% 22%, transparent 22%),
    repeating-radial-gradient(circle at 50% 50%, #111 0 2px, #1d1d1d 2px 3px, #0c0c0c 3px 5px),
    #111;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.zx-repertoire .zx-vinyl::after { /* Lichtkante wie auf echtem Vinyl */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 20deg, transparent 0 10%, rgba(255, 255, 255, .13) 14%, transparent 20% 52%, rgba(255, 255, 255, .1) 58%, transparent 64%);
}
.zx-repertoire .zx-vinyl.is-dj { cursor: grabbing; animation-play-state: paused; }
.zx-repertoire .zx-vinyl-label img { top: 50%; width: 56%; translate: -50% -50%; filter: brightness(0) invert(1); pointer-events: none; }
.zx-repertoire .zx-vinyl-label::after { display: none; }
.zx-repertoire .zx-vinyl-label { pointer-events: none; }

/* ---------- Hochzeit ---------- */
.zh-h1-key { line-height: 1.04 !important; }                           /* „Hochzeitsband / München“: mehr Luft zwischen den Zeilen */
.zh-split-oben .zh-head { margin-bottom: clamp(20px, 2.4vw, 40px); }    /* Video steht oben bündig mit dem Titel */
.zh-split-oben .zh-head .zx-h2 { font-size: clamp(1.9rem, 3.3vw, 3.6rem) !important; }
@media (min-width: 960px) { .zx .zh-split.zh-split-oben { margin-top: 0; } }
/* „Was spielt ihr?“: Zitatkarte nach oben, die Setliste darunter über die volle Breite */
.zh-setrow { grid-template-columns: minmax(0, 1fr) !important; }
.zh-setrow > .zh-quote { order: -1; justify-self: end; max-width: 640px; }
.zh-setlist-wrap .zx-lead { max-width: 46em; }
/* Haken: Kästchen erscheint, dann knallt der Haken hinein */
.zh-haken { width: clamp(80px, 10vw, 160px); }
.zh-haken-box { fill: none; stroke: #fff; stroke-width: 7; opacity: .9; }
.zh-haken.zh-arm .zh-haken-box { opacity: 0; scale: .6; transform-origin: 42px 58px; transition: opacity .3s, scale .45s cubic-bezier(.3, 1.6, .5, 1); }
.zh-haken.zh-arm.is-in .zh-haken-box { opacity: .9; scale: 1; }
.zh-haken.zh-arm path { transition: stroke-dashoffset .28s .5s cubic-bezier(.7, 0, .9, .4) !important; }
.zh-haken.zh-arm.is-in { animation: zh-wumms .5s .74s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes zh-wumms { 0% { scale: 1; } 30% { scale: 1.18; rotate: -4deg; } 100% { scale: 1; rotate: 0deg; } }
@media (prefers-reduced-motion: reduce) { .zh-haken.zh-arm.is-in { animation: none; } }

/* ---------- Media: Player bleibt beim Durchblättern der Liste stehen ---------- */
@media (min-width: 960px) {
  .zm-stage { align-items: start; }
  .zm-stage .zm-stage-main { position: sticky; top: 110px; }
}

/* ---------- Kopf: „Termin anfragen“ und Menü-Icon auf einer Linie ---------- */
.uk-navbar-right:has(> .zx-navcta) { align-items: center; }
.uk-navbar-right > .zx-navcta { align-self: center; margin-top: 0 !important; margin-bottom: 0 !important; }

/* ---------- Firmenfeier: Hero-Foto (Hochformat) oben ansetzen, damit die Köpfe im Bild bleiben ---------- */
.zf-hero-media img { object-position: 50% 12% !important; }

/* ---------- Media: Aufkleber „Videos & Fotos“ mit mehr Abstand zur Schrift ---------- */
@media (min-width: 640px) { .zm-h1 .zm-h1-claim { margin-left: clamp(28px, 3.4vw, 60px); translate: 0 -12%; } }

/* ---------- Abschluss-Fotos: Bildmitte nach oben, damit die Köpfe nicht angeschnitten sind ---------- */
.zx-final .zx-final-img img { object-position: 50% 12%; }

/* ---------- Band · „Wo ihr uns hört“: etwas mehr Luft ---------- */
.zx.zb-hoeren { padding-top: calc(var(--zx-sec, 110px) + 30px); }
.zb-hoeren .zx-h2 { margin-bottom: clamp(36px, 3.6vw, 64px) !important; }
.zb-hoeren .uk-grid { row-gap: clamp(28px, 3vw, 52px); }

/* ---------- Start · „Gebucht von Unternehmen wie“: Zeile oben statt in der Bildmitte (weniger Weißraum),
   Logos laufen darunter durch und überdecken die Schrift nicht ---------- */
.zx-logoband.is-live { height: 260vh; }
/* Luca 23.10., 2. Runde („zu viel Abstand“): Zeile und Logos als eine Gruppe mittig, Logos direkt unter dem Link */
.zx-logoband.is-live .zx-lb-pin { justify-content: center; padding-top: 80px; box-sizing: border-box; }
.zx-logoband.is-live .zx-lb-track { position: relative; top: auto; align-self: flex-start; margin-top: 0; translate: none; /* Logo-Bilder haben eigenen Weißraum */ }
.zx-logoband.is-live .zx-lb-track img { height: clamp(100px, 20vh, 220px); }
@media (max-width: 959px) { .zx-logoband.is-live .zx-lb-pin { padding-top: 64px; } .zx-logoband.is-live .zx-lb-track img { height: clamp(80px, 15vh, 130px); } }

/* ---------- Start · Karte: Weiter/Zurück statt nur Scrollen ---------- */
.zk-schritte { display: flex; gap: 10px; margin: 18px 0 6px; }
.zk-schritt { height: 46px; padding: 0 1.2em; border: 3px solid var(--zx-ink); border-radius: 999px; background: #fff; color: var(--zx-ink);
  font: 800 .9rem/1 var(--zx-display); text-transform: uppercase; cursor: pointer; transition: background-color .2s, color .2s, transform .2s; }
.zk-schritt:hover:not(:disabled) { background: var(--zx-ink); color: #fff; transform: translateY(-2px); }
.zk-schritt:disabled { opacity: .35; cursor: default; }
.zk.zk-an .zk-fenster { position: relative; z-index: 2; }
.zk.zk-an .zk-fenster .zk-schritte { position: absolute; left: 50%; bottom: clamp(10px, 3vh, 28px); margin: 0; transform: translateX(-50%); pointer-events: auto; }
.zk.zk-an .zk-fenster .zk-schritt { border-color: #fff; box-shadow: 0 6px 22px rgba(0, 20, 50, .3); }
.zk.zk-an .zk-fenster .zk-schritt:disabled { opacity: .5; }
.zk.zk-an .zk-fenster .zk-schritte { white-space: nowrap; }
@media (max-width: 860px) { .zk.zk-an .zk-fenster .zk-schritte { bottom: 40px; } .zk.zk-an .zk-fenster .zk-schritt { height: 40px; font-size: .8rem; } }
/* Überblick am Ende: alle Orte gelb hervorgehoben wie der aktive Halt */
.zk.ist-ueberblick .zk-marke:not(.zk-marke--heim) i { transform: scale(1.35); box-shadow: 0 0 0 6px rgba(242, 203, 5, .25), 0 0 24px rgba(242, 203, 5, .7); }
.zk.ist-ueberblick .zk-marke:not(.zk-marke--heim) b { padding: 7px 10px 6px; background: var(--zk-gelb); color: var(--zk-ink); text-shadow: none; box-shadow: 0 6px 22px rgba(0, 20, 50, .3); }

/* =====================================================================
   Typografie (Luca 23.10.: „zu viele Schriften“): zwei Schriften, eine Größenleiter
   Geologica 800 versal für Überschriften und Etiketten, Source Sans 3 (400) für Text.
   ===================================================================== */
:root {
  /* Zeilenabstand aller großen Versal-Überschriften (Geologica 800): unter 1,15 berühren Umlaut-Punkte die Zeile darüber.
     Bausteine mit eigener Überschrift (Bühne, Kurz gefragt …) nehmen diesen Wert, nie einen eigenen kleineren. */
  --zx-lh-display: 1.18;
  --t-h2: clamp(2.1rem, 4.2vw, 4.4rem);
  --t-h3: clamp(1.2rem, 1.6vw, 1.6rem);
  --t-claim: clamp(1.45rem, 2.3vw, 2.4rem);
  --t-lead: clamp(1.15rem, 1.3vw, 1.35rem);
  --t-body: 1.0625rem;
  --t-label: .8rem;
  --t-text: 'Source Sans 3', sans-serif;
}
/* Überschriften */
body .zx .zx-h2, body .zx-logoband .zx-lb-title, body .zx-repertoire .zx-h3big { font-size: var(--t-h2) !important; line-height: 1.02 !important; font-weight: 800 !important; }
body .zx .zx-h3, body .zx .zh-h3, body .zf-card-title, body .zf-q-title, body .zq-q, body .zq-q a, body .zx .zx-tile-title, body .zh-mod-title, body .zb-card h3 {
  font-size: var(--t-h3) !important; line-height: 1.12 !important; font-weight: 800 !important; letter-spacing: 0 !important; }
body .zx .zx-claim, body .zx-pointe, body .zf-pointe b, body .zk-claim { font-size: var(--t-claim) !important; line-height: 1.05 !important; font-weight: 800 !important; }
/* Text */
body .zx .zx-lead, body .zx .zx-lead p, body .zh-ctaline-s, body .zx-outro-text, body .zk-lead, body .zf-sub, body .zx-final .zx-lead { font: 400 var(--t-lead)/1.45 var(--t-text) !important; }
body .zx .zx-body, body .zx .zx-body p, body .zx-card-text p, body .zx-tile-text p, body .zf-card > p, body .zh-mod-text, body .zf-q p, body .zf-pointe, body .zf-styles-text, body .zf-hoer-text p, body .zh-sorgen p {
  font: 400 var(--t-body)/1.55 var(--t-text) !important; }
body .zx .zx-small, body .zx-form-note, body .zf-micro, body .zx-final .zx-direct, body .zx-final .zx-direct p { font: 400 .95rem/1.45 var(--t-text) !important; }
body .zx-card-text .zx-card-lead, body .zx-repertoire .zx-body strong { font: inherit !important; font-weight: 700 !important; text-transform: none !important; }
/* Etiketten: eine Größe, ein Stil */
body .zx-eyebrow, body .zh-eyebrow, body .zf-label, body .zf-proof-label, body .zh-station, body .zf-tag, body .zx-tag, body .zh-mod-num, body .zh-label,
body .zf-vtag, body .zh-pills li, body .zx-facts li, body .zx-facts .el-content, body .zb-job small, body .zf-direct-label, body .zh-next-title, body .zm-more-lead {
  font-family: var(--zx-display) !important; font-size: var(--t-label) !important; font-weight: 800 !important; letter-spacing: .04em !important; text-transform: uppercase !important; }
body .zx-tag, body .zf-tag, body .zh-station { font-size: inherit !important; }
/* keine dritte Schrift, keine Zwischenstärken */
.zx-cover .zx-serif { font-family: var(--t-text) !important; font-style: normal !important; font-weight: 400 !important; letter-spacing: 0 !important; }
.zx .zh-voice blockquote, .zx .zh-change { font-weight: 400 !important; }
.zh-quote::before, .zf-steps li::before, .zb-weg-jahr, .zb-xz-word, .zb-zahl b, .zq-num, .zq-ja, .zk-card-num, .zk-step-num, .zs-hero .zs-km b, .zs-final .zs-steps li::before { font-weight: 800 !important; }
/* Bildunterschriften zu den Videos nur noch auf der Media-Seite (dort stehen die Titel in der Liste) */
.zx-act > .zx-small, .zh-video figcaption, .zf-video figcaption { display: none !important; }

/* ---------- Start · „Erst dezent, dann druckvoll“ (Luca: „designtechnisch nicht schön“):
   Titel und Text nebeneinander wie bei den anderen Sektionen, beide Zeilen gleich groß, nur die Farbe wechselt ---------- */
.zx-hoeren .zx-hybrid .zx-eyebrow { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.zx-hoeren .zx-hybrid { font-size: var(--t-h2) !important; line-height: 1.02 !important; }
.zx-hoeren .zx-druckvoll { font-size: inherit !important; font-weight: 800 !important; line-height: inherit !important; letter-spacing: -.02em !important; margin-left: 0 !important;
  transform: scale(calc(.9 + .1 * var(--zx-in, 1))) !important; white-space: normal !important; }
.zx-hoeren .zx-dezent { color: rgba(29, 29, 29, .38) !important; }
@media (min-width: 960px) {
  .zx-hoeren .zx-buehne-grund + .uk-grid > .uk-width-1-1 { /* 29.10.: Wrapper der Bühne dazwischen */ display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: clamp(40px, 5vw, 100px); align-items: end; }
  .zx-hoeren .zx-lead { margin-top: 0 !important; }
}
.zx-hoeren .zx-lead strong { font-weight: 700 !important; }

/* ---------- Start · Kacheln: Bildmitte oben (Firmenfeier-Foto schnitt die Köpfe ab) ---------- */
.zx-tile .zx-tile-img img { object-position: 50% 8% !important; }

/* ---------- Start · „Eure Coverband für jeden Anlass“: Auftritt seit 29.10. in src/scripts/start/teile/2-intro.* ---------- */

/* ---------- Band · Hero (Luca: „unaufgeräumt, unruhig“): nur Name, ein Satz, Knöpfe ---------- */
.zx .zb-sub { max-width: 26em; font-weight: 400 !important; }
/* „Erfahrung klingt so“ (Luca: „unruhig“): Zanadu-Wort in Textgröße, weniger Elemente */
.zx .zb-xz { font: 400 var(--t-body)/1.55 var(--t-text) !important; }
.zb-xz-word { font-size: var(--t-h3) !important; font-weight: 800 !important; }
.zb-geschichte .zx-cta { margin-top: clamp(28px, 3vw, 48px) !important; }

/* ---------- Media · Panels statt Sprungknöpfe: leise und laut auf einen Blick ---------- */
.zm-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: clamp(22px, 2.4vw, 36px); }
.zm-panel { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 170px; padding: 22px 22px 20px; border-radius: 22px; text-decoration: none !important;
  color: var(--zx-ink) !important; background: #fff; box-shadow: 0 14px 34px rgba(0, 30, 60, .18); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s; }
.zm-panel-laut { background: var(--zx-ink); color: #fff !important; rotate: 1.2deg; }
.zm-panel-leise { rotate: -1.2deg; }
.zm-panel:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 22px 46px rgba(0, 30, 60, .28); }
.zm-panel-titel { font: 800 var(--t-h3)/1.05 var(--zx-display); text-transform: uppercase; }
.zm-panel-text { font: 400 .98rem/1.35 var(--t-text); opacity: .85; }
.zm-panel-zahl { margin-top: auto; font: 800 var(--t-label)/1 var(--zx-display); letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.zm-panel-pegel { display: flex; align-items: flex-end; gap: 4px; height: 38px; margin-bottom: 6px; }
.zm-panel-pegel i { width: 8px; border-radius: 3px; background: currentColor; opacity: .18; }
.zm-panel-pegel i:nth-child(1) { height: 20%; } .zm-panel-pegel i:nth-child(2) { height: 38%; } .zm-panel-pegel i:nth-child(3) { height: 56%; }
.zm-panel-pegel i:nth-child(4) { height: 76%; } .zm-panel-pegel i:nth-child(5) { height: 100%; }
.zm-panel-leise .zm-panel-pegel i:nth-child(-n+2) { opacity: 1; background: var(--zx-blue); }
.zm-panel-laut .zm-panel-pegel i { opacity: 1; background: var(--zx-red); }
@media (prefers-reduced-motion: no-preference) {
  .zm-panel-leise .zm-panel-pegel i:nth-child(-n+2) { animation: zm-wipp 1.6s ease-in-out infinite alternate; }
  .zm-panel-laut .zm-panel-pegel i { animation: zm-wipp .5s ease-in-out infinite alternate; }
  .zm-panel-pegel i:nth-child(2) { animation-delay: .15s !important; } .zm-panel-pegel i:nth-child(3) { animation-delay: .3s !important; }
  .zm-panel-pegel i:nth-child(4) { animation-delay: .1s !important; } .zm-panel-pegel i:nth-child(5) { animation-delay: .25s !important; }
}
@keyframes zm-wipp { to { transform: scaleY(.55); } }
.zm-panel-pegel i { transform-origin: 50% 100%; }
.zm-panel-fotos { grid-column: 1 / -1; justify-self: start; font: 800 var(--t-label)/1 var(--zx-display); letter-spacing: .04em; text-transform: uppercase; color: #fff !important; text-decoration: underline !important; text-underline-offset: 4px; }
@media (max-width: 479px) { .zm-panels { grid-template-columns: 1fr; } }

/* ---------- FAQ · die drei Themen als Panels unter dem Einstieg ---------- */
.zq-themen { padding-top: clamp(48px, 5vw, 90px) !important; }
.zq-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); }
.zq-panel { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 220px; padding: clamp(22px, 2.2vw, 34px); overflow: hidden; border-radius: 24px;
  background: var(--zx-ink); color: #fff !important; text-decoration: none !important; box-shadow: 0 16px 40px rgba(0, 30, 60, .16);
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s; }
.zq-panel-blau { background: var(--zx-blue); }
.zq-panel-gelb { background: var(--zx-yellow, #f2c200); color: var(--zx-ink) !important; }
.zq-panel:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 26px 54px rgba(0, 30, 60, .26); }
.zq-panel-num { font: 800 clamp(3rem, 5vw, 5.2rem)/.85 var(--zx-display); letter-spacing: -.03em; opacity: .35; }
.zq-panel-titel { margin-top: auto; font: 800 var(--t-h3)/1.1 var(--zx-display); text-transform: uppercase; }
.zq-panel-text { font: 400 1rem/1.4 var(--t-text); opacity: .85; }
.zq-panel::after { content: "↓"; position: absolute; right: 24px; top: 20px; font: 800 1.6rem/1 var(--zx-display); transition: transform .3s; }
.zq-panel:hover::after { transform: translateY(5px); }
.zq-themen .zq-b2b { margin-top: clamp(18px, 2vw, 30px) !important; }
@media (max-width: 959px) { .zq-panels { grid-template-columns: 1fr; } .zq-panel { min-height: 150px; } }

/* =====================================================================================================
   Philipps Korrekturen (Notiz „Änderungen Zanadu Website“, 25.10.2026)
   ===================================================================================================== */

/* ---------- Start · „Gebucht von Unternehmen wie“: weniger Weißraum davor, Zeile oben im Bild ---------- */
/* Die Gruppe (Zeile + Logos) ist nur so hoch wie ihr Inhalt und bleibt in der Bildmitte stehen – kein leerer
   Bildschirm mehr, bevor die Zeile auftaucht */
.zx-blick.uk-section-large-bottom { padding-bottom: clamp(40px, 4vw, 70px) !important; }
.zx-logoband.is-live { height: 200vh; }
.zx-logoband.is-live .zx-lb-pin { --lb-h: calc(clamp(100px, 20vh, 220px) + clamp(140px, 16vw, 230px)); height: auto; top: max(30px, calc(50svh - var(--lb-h) / 2 - 60px));
  justify-content: flex-start; padding: 60px 0 clamp(20px, 3vh, 40px); /* Luft oben: die Zeile rückt per Skript etwas hoch und würde sonst abgeschnitten */ }
.zx-logoband.is-live .zx-lb-track { margin-top: clamp(10px, 2.4vh, 32px); }
@media (max-width: 959px) { .zx-logoband.is-live .zx-lb-pin { --lb-h: calc(clamp(80px, 15vh, 130px) + 150px); padding-top: 60px; } }

/* Start · Erika und Manfred: siehe „Startseite · Repertoire“ weiter unten */

/* ---------- Start · Karte: Pfeil nach unten statt Weiter/Zurück ---------- */
.zk-runter { display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: var(--zx-ink); color: #fff; cursor: pointer;
  box-shadow: 0 8px 26px rgba(0, 20, 50, .35); transition: background-color .2s, color .2s, transform .25s; }
.zk-runter:hover, .zk-runter:focus-visible { background: #fff; color: var(--zx-ink); transform: translateY(3px); }
@media (prefers-reduced-motion: no-preference) { .zk-runter svg { animation: zk-wipp 1.6s ease-in-out infinite; } }
@keyframes zk-wipp { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
@media (max-width: 860px) { .zk-runter { width: 54px; height: 54px; } }

/* ---------- Hochzeit · Hero: Aufkleber „Vom Jawort bis zur Party!“ verdeckt niemanden mehr (Philipp 25.10.):
   Mittelpunkt sitzt außerhalb der Fotoecke, im Bild liegt nur noch die leere Ecke ---------- */
.zh-hero-side { --zh-st: clamp(104px, 11vw, 180px); }
.zh-hero-side .zh-sticker { width: var(--zh-st); left: auto; right: calc(var(--zh-st) * -.18); top: calc(var(--zh-st) * -.62); }
@media (min-width: 960px) {
  .zh-hero-side .zh-sticker { right: auto; left: calc(var(--zh-st) * -.6); top: calc(var(--zh-st) * -.6); }
}

/* ---------- Firmenfeier · Anlässe: KI-Bild „kompakte Bühne“ statt Büro-Set (Philipp 25.10.) ---------- */
.zf-card-foto img { object-position: 50% 50%; }

/* ---------- Media · Ziel der Panels leuchtet nach dem weichen Scrollen kurz auf (Philipp 25.10.) ---------- */
.zm-set, .zm-fotos { position: relative; }
.zm-set::after, .zm-fotos::after { content: ""; position: absolute; inset: 0; border: 6px solid var(--zx-yellow, #f2c200); opacity: 0; pointer-events: none; }
.zm-set.zm-ziel::after, .zm-fotos.zm-ziel::after { animation: zm-ziel 1.6s ease-out; }
.zm-set.zm-ziel .zx-h2, .zm-fotos.zm-ziel .zx-h2 { animation: zm-ziel-h 1.6s ease-out; }
@keyframes zm-ziel { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
@keyframes zm-ziel-h { 0% { transform: none; } 20% { transform: translateX(14px); } 100% { transform: none; } }

/* ---------- FAQ · nur ein Knopf je Section; der untere bekommt die Vorzeile (Philipp 25.10.) ---------- */
.zx .zq-ask.zq-end { padding-top: 0; border-top: 0; }

/* ---------- Media und FAQ · Abschluss: weiterführende Links untereinander statt in einer Zeile (Philipp 25.10.) ---------- */
.zx.zm-final .zm-more, .zx .zq-explore { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: clamp(22px, 2.4vw, 34px) 0 0 !important; padding: 0; list-style: none; }
.zx.zm-final .zm-more li, .zx .zq-explore li { margin: 0; }
.zx .zq-explore .zq-explore-lead { font-weight: 500; }
.zx .zq-explore a { font: 800 1rem/1.4 var(--zx-display); text-transform: uppercase; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ---------- Stadtseiten (Philipp 25.10.): Banner nur mit einem Anfrage-Knopf, Bild zur Anreise, Locations als
   Backstage-Pässe (keine Links, andere Form als die runden CTA-Knöpfe) mit Auftrittsbild, Anfrage ohne Formular ---------- */
.zs-hero .zs-hero-cta { margin: clamp(22px, 3.2vh, 38px) 0 0 !important; }
/* Bilder, Locations und Raster im Abschnitt „Vor Ort“: seit 26.10. gebündelt in stadt.css */
.zs-final .zx-final-cta { margin-top: clamp(26px, 3vw, 44px) !important; }

/* ---------- Kontakt · einstufiges Formular, schwarzer Knopf „Anfrage absenden“ (Philipp 25.10.) ---------- */
.zx .zk-form .zk-btn { background: var(--zx-ink); }
.zx .zk-form .zk-btn:hover { background: var(--zx-red); }
.zx .zk-form .ic-formular__absenden { background: var(--zx-ink); }
.zx .zk-form .ic-formular__absenden:hover:not(:disabled) { background: var(--zx-red); }
.zx .zk-form .zk-step + .zk-step { margin-top: 0; }
.zx .zk-form .zk-anlass { margin-bottom: clamp(16px, 1.6vw, 24px); }

/* =====================================================================
   Lucas Korrekturen 26.10. (Notiz „Korrekturen zanadu neu“)
   ===================================================================== */
/* H2: Zeilenabstand etwas größer, damit Komma und Umlaut-Punkte zweier Zeilen nicht ineinanderlaufen
   („Kompakt, autark …“ / „für“); Größen der Leiter bleiben */
body .zx .zx-h2, body .zx-logoband .zx-lb-title, body .zx-repertoire .zx-h3big, .zx-hoeren .zx-hybrid { line-height: 1.1 !important; }
/* Logo im Kopf weiß, wenn die Fläche darunter schwarz ist (UIkit liest --uk-inverse der Sektion unter dem Kopf) */
.zx.zh-night, .zx.zs-locs { --uk-inverse: light; }
/* Kopf-Knopf negativ über roter Fläche (zx-kopf-rot setzt zanadu.js) */
.zx-kopf-rot .tm-header .zx-navcta { background: #fff; color: #F23847 !important; }
.zx-kopf-rot .tm-header .zx-navcta:hover { background: #1d1d1d; color: #fff !important; }
/* KI-Kennzeichnung am Bild (Liste src/lib/ki.ts): klein, unten links, lesbar auf jedem Grund */
.zx-ki { position: absolute; left: 10px; bottom: 10px; z-index: 3; padding: .38em .75em; border-radius: 999px; background: rgba(20, 20, 20, .62); color: #fff; font: 500 .72rem/1 'Source Sans 3', sans-serif; letter-spacing: .02em; pointer-events: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.zh-hero-photo, .zh-dj-photo, .zx-final-img, .zf-card-foto, .zs-hero-photo { position: relative; }
.zs-hero-photo .zx-ki { left: auto; right: 10px; }
/* „Mit KI bearbeitet“ (30.10.): Startseiten-Hero rechts unten (links steht die Headline), FAQ-Foto rechts (links der ?-Aufkleber) */
.zx-hero-img .zx-ki { left: auto; right: 14px; bottom: 14px; }
.zg-bild .zx-ki { left: auto; right: 22px; bottom: 22px; }
/* Startseite: „Gebucht von Unternehmen wie“ größer und 1 cm tiefer */
body .zx-logoband .zx-lb-title { font-size: clamp(2.5rem, 6.2vw, 6.6rem) !important; }
.zx-logoband .zx-lb-head { margin-top: 1cm; }
/* Telefon-Foto vor Rot nirgends anschneiden: Rahmen im Seitenverhältnis des Bildes (1087 × 1600) */
.zx-final .zx-final-img:has(img[src$="kontakt-band-rot-telefon.jpg"]), .zf-final-foto { flex: none; min-height: 0; aspect-ratio: 1087 / 1600; }
.zx-final .zx-final-img img[src$="kontakt-band-rot-telefon.jpg"], .zf-final-foto img { object-position: 50% 0; }
.zx-final .zx-final-img:has(img[src$="kontakt-band-rot-telefon.jpg"]) { max-height: none; }
/* Polaroids vor Rot (Kontakt, FAQ): Rahmen auch unten, FAQ-Foto etwas kleiner */
.zk-polaroid, .zq-polaroid { padding-bottom: clamp(34px, 3.4vw, 52px) !important; }
.zq-polaroid { max-width: 400px; margin-left: auto !important; }
/* Firmenfeier · Anlass-Karten: KI-Bild ganz zeigen (Personen nicht anschneiden), Blau des Bildes füllt die Karte */
.zf-card-foto { background: #079ae0; }
.zf-card-foto img, .zf-card-foto img[src] { object-fit: contain; object-position: 50% 100%; }
/* Firmenfeier · Logo-Wand ohne 1860: 18 Logos + Kachel „Außerdem“ über zwei Spalten = volle Reihen */
.zf-tile.zf-tile-more { --zf-r: -2deg; grid-column: span 2; aspect-ratio: auto; }
@media (max-width: 959px) { .zf-tile.zf-tile-more { grid-column: span 3; } }
@media (max-width: 639px) { .zf-tile.zf-tile-more { grid-column: span 2; } }
/* Videos & Fotos · Galerie: zwischen den Bildreihen überall derselbe Abstand */
.zm-grid + .zm-grid { margin-top: clamp(10px, 1.2vw, 20px); }
/* Luca 26.10., 15:22: Erika und Manfred VIEL kleiner, nur auf dem Blau, nie über der Platte. „Layla“ ist statisch
   durchgestrichen. Philipp 26.10., 16:02: Das Bild illustriert den Text, also eine Gruppe: Erika und Manfred stehen
   direkt unter dem Absatz, der sie nennt (darüber Platz für den Aufkleber, darunter ein Abstandsschritt bis zur Wendung „Aber jetzt mal im Ernst“), Text und Bild zusammen mittig neben der Platte – kein Text oben
   angeklebt, keine Leerfläche dazwischen. Tablet/Handy: Text, dann das Bild, dann die Platte. */
/* Startseite · Repertoire (Luca 26.10. nachmittags: „radikal“, Rentner links unten unter den Text, Text wie vorher):
   links oben Überschrift und drei Absätze, rechts die Platte groß und weit über den Rand, links unten Erika und Manfred
   groß im Liegestuhl – sie ragen vor die Platte. Handy: Platte hinter den beiden. */
.zx-repertoire .zx-rep-top { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy platte"; column-gap: clamp(24px, 3vw, 60px); }
.zx-repertoire .zx-rep-copy { grid-area: copy; align-self: center; position: relative; z-index: 3; }
.zx-repertoire .zx-rep-copy .zx-body { max-width: 31em; }
.zx-repertoire .zx-rep-layla { position: relative; white-space: nowrap; }
/* Luca 28.10.: „Layla“ nicht mehr durchstreichen */
.zx-repertoire .zx-rep-platte { grid-area: platte; align-self: center; position: relative; z-index: 1; margin-right: calc(var(--zx-pad) * -1); }
.zx-repertoire .zx-rep-platte .zx-vinyl { width: 132%; max-width: none; margin: 0 !important; translate: 2% 9%; }
.zx-repertoire .zx-erika { position: relative; z-index: 2; width: min(86%, 460px); max-width: none; margin: clamp(40px, 3.4vw, 56px) 0 clamp(30px, 2.8vw, 44px) !important; }
.zx-repertoire .zx-erika img { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 22px rgba(0, 25, 50, .34)); }
/* Bodenschatten: Stühle und Kühlbox stehen auf etwas */
.zx-repertoire .zx-erika::before { content: ""; position: absolute; left: 4%; right: 0; bottom: -4%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 25, 55, .4), rgba(0, 25, 55, 0)); }
.zx-repertoire .zx-erika figcaption { position: absolute; left: 9%; top: -2%; z-index: 3; rotate: -6deg; padding: .55em 1em; border-radius: 999px; background: var(--zx-yellow, #f2c200); color: var(--zx-ink);
  font: 800 var(--t-label, .9rem)/1 var(--zx-display); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 10px 24px rgba(0, 25, 50, .25); }
.zx-repertoire .zx-erika figcaption::after { content: ""; position: absolute; left: 22%; bottom: -9px; border: 10px solid transparent; border-bottom: 0; border-top-color: var(--zx-yellow, #f2c200); }
@media (max-width: 959px) {
  .zx-repertoire .zx-rep-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "platte"; }
  .zx-repertoire .zx-rep-platte { align-self: start; justify-self: end; width: 86%; margin: 10px calc(var(--zx-pad) * -1) 0 0; }
  .zx-repertoire .zx-rep-platte .zx-vinyl { width: 100%; translate: 22% 0; }
  .zx-repertoire .zx-erika { width: min(78%, 420px); margin: 48px 0 32px !important; }
  .zx-repertoire .zx-erika figcaption { top: -12%; left: 6%; font-size: .72rem; }
}

/* =====================================================================
   Lucas Korrekturen 26.10. nachmittags (Screenshots 14:32–14:42)
   ===================================================================== */
/* Display-Überschriften: Zeilenabstand 1,18 auf allen Seiten und Breiten. Geologica 800: Umlaut-Punkte reichen bis
   0,95 em über die Grundlinie, ein Komma 0,19 em darunter – erst ab 1,15 berühren sich zwei Zeilen nirgends mehr. */
body .zx .zx-h2, body .zx-logoband .zx-lb-title, body .zx-repertoire .zx-h3big, .zx-hoeren .zx-hybrid,
body .zx .zx-claim, body .zx-pointe, body .zf-pointe b, body .zk-claim,
.zf-h1-key, .zh-h1-key, .zh-morgen, .zx-footer-claim, .zx-footer-claim p, .zs-claim, .zs-loc-name, .zs-ring p, .zk-wohin, .zd-h3,
.zk-card-q, .zk-steps b, .zh-quote blockquote p,
.zq-h1, .zq-h1-claim, .zk-h1, .zk-h1-claim { line-height: var(--zx-lh-display) !important; } /* FAQ-/Kontakt-H1 seit 3.11. (am Handy mehrzeilig, vorher 0,9) */

/* Start · CTA „Zanadu ist größer …“ als eigene dunkle Fläche, klar abgesetzt von den Videos darüber.
   29.10. (Luca): randlos über die ganze Breite und bündig bis zum Repertoire – vorher blieb um den dunklen Kasten ein
   weißer Streifen zwischen der blauen Bühne und dem blauen Repertoire. Steht die Bühne (Desktop mit Skript), schließt
   das Band direkt an ihr Blau an. */
.zx-hoeren { padding-bottom: 0 !important; }
.zx-hoeren .zx-outro-band { position: relative; margin: clamp(64px, 8vw, 140px) calc(var(--zx-pad) * -1) 0; padding: clamp(56px, 6.4vw, 120px) var(--zx-pad); background: var(--zx-ink); color: #fff; --uk-inverse: light; }
.zx-hoeren.ist-buehne .zx-outro-band { margin-top: 0; }
.zx-hoeren .zx-outro-band .zx-outro { margin-top: 0 !important; }
.zx-hoeren .zx-outro-band .zx-pointe { color: #fff; }
body .zx-hoeren .zx-outro-band .zx-outro-text { color: rgba(255, 255, 255, .78); }
.zx-hoeren .zx-outro-band .zx-cta .uk-button-primary:hover, .zx-hoeren .zx-outro-band .zx-cta .uk-button-primary:focus-visible { background: #fff !important; color: var(--zx-ink) !important; }
.zx-hoeren .zx-outro-band .zx-cta .uk-button-text:hover { color: var(--zx-yellow) !important; }

/* ---------- 28.10.2026 · Kontaktformular: Hinweis bei Fehler oder fehlendem Formular-Ziel, Knopf beim Senden ---------- */
.zx .zk-hinweis { margin: 0 0 18px; padding: 14px 16px; border-left: 5px solid var(--zx-blue); background: #eef8fd; font: 400 1.02rem/1.45 'Source Sans 3', sans-serif; color: var(--zx-ink); }
.zx .zk-hinweis[data-art="fehler"], .zx .zk-hinweis[data-art="zu-oft"] { border-left-color: var(--zk-err); background: #fff5f5; }
.zx .zk-hinweis[hidden] { display: none; }
.zx .zk-hinweis:focus { outline: none; }
.zx .zk-hinweis p { margin: 0; }
.zx .zk-hinweis .zk-hinweis-wege { margin-top: 12px; }
.zx .zk-hinweis a { color: var(--zx-ink) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.zx .zk-hinweis a.zk-hinweis-btn { display: inline-block; margin: 0 .4em .3em 0; padding: .7em 1.3em; border-radius: 999px; background: var(--zx-ink); color: #fff !important; font: 800 .9rem/1 var(--zx-display); text-transform: uppercase; text-decoration: none; }
.zx .zk-hinweis a.zk-hinweis-btn:hover { background: var(--zx-red); }
.zx .zk-form .zk-btn[disabled] { cursor: progress; opacity: .7; transform: none; }

/* ---------- Start · Karte (Luca 28.10.): mittig „Weiter“ zum nächsten Ort, der Pfeil nach unten rechts in der Ecke ---------- */
.zk:not(.zk-an) .zk-weiter { display: none; }
.zk.zk-an .zk-fenster .zk-schritte { left: 0; right: 0; justify-content: center; transform: none; pointer-events: none; }
.zk.zk-an .zk-fenster .zk-schritte > * { pointer-events: auto; }
.zk.zk-an .zk-fenster .zk-weiter { height: 52px; padding: 0 1.6em; }
.zk.zk-an .zk-fenster .zk-runter { position: absolute; right: clamp(12px, 2vw, 28px); bottom: 0; width: 52px; height: 52px; }
@media (max-width: 860px) { .zk.zk-an .zk-fenster .zk-weiter { height: 44px; } .zk.zk-an .zk-fenster .zk-runter { width: 44px; height: 44px; right: 12px; } }

/* ---------- Hochzeit · Modul 3 (Luca 28.10.: „sehr wild, Ruhe und Bewusstheit rein“): Titel in zwei klaren Stufen,
   Schlagwort ohne Trennstrich-Umbruch; Karten gerade, gleich hoch, ruhiger Schatten ---------- */
.zh-dj .zh-dj-h2 { max-width: none; }
.zh-dj .zh-dj-kick { display: block; margin-bottom: .45em; font: 800 var(--t-h3, clamp(1.2rem, 1.6vw, 1.6rem))/1.2 var(--zx-display); letter-spacing: .01em; color: var(--zh-y, #F2CB05); }
.zh-dj .zh-dj-main { display: block; }
.zh-dj .zh-nobr { white-space: nowrap; }
@media (max-width: 639px) { .zh-dj .zh-nobr { white-space: normal; hyphens: manual; } }
.zh-dj .zh-cards { align-items: stretch; }
.zh-dj .zh-card-y, .zh-dj .zh-card-w { rotate: 0deg; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
@media (hover: hover) { .zh-dj .zh-card:hover { rotate: 0deg; translate: 0 -4px; } }

/* ---------- Korrekturen Luca 2.11.2026 (Screenshots + Figma) ---------- */
/* Firmenfeier · Anlass-Etiketten (Messestand & Standparty …): Text in der Pille mittig, auch zweizeilig */
.zf-tag { width: fit-content; max-width: 100%; text-align: center; text-wrap: balance; padding: .5em .95em !important; }
/* Firmenfeier · Hero: weicher Übergang links kürzer (Figma: deckend → durchsichtig auf ca. 57 px) */
@media (min-width: 960px) {
  .zf-hero-media::before { background: linear-gradient(to right, #049dd9 0, rgba(4, 157, 217, 0) 57px) !important; }
}
/* Telefon-Foto vor Rot (Polaroids Hochzeit/Kontakt): ganzes Bild im eigenen Seitenverhältnis, Köpfe und Kappe mit Luft */
.zh-final-photo img[src$="kontakt-band-rot-telefon.jpg"], .zk-polaroid img[src$="kontakt-band-rot-telefon.jpg"] {
  aspect-ratio: 1087 / 1600 !important; object-position: 50% 0 !important; }
/* Start · „Eure Coverband für jeden Anlass“: Überschrift und Text oben bündig auf einer Linie */
@media (min-width: 960px) {
  .zx-anlass .zx-intro-achse { align-items: start !important; }
  .zx-anlass .zx-intro-achse .zx-h2 { grid-column: 1 !important; grid-row: 1 !important; }
  .zx-anlass .zx-intro-achse .zx-lead { grid-column: 2 !important; grid-row: 1 !important; margin-top: 0 !important; }
}
/* Hochzeit · „Was Brautpaare über Zanadu sagen“: Foto wie in Figma – nicht mehr randabfallend, weißer Rand (6 px), runde Ecken */
.zh-voices-photo { margin: 0 !important; }
.zh-voices-photo img { box-sizing: border-box; border: 6px solid #fff; border-radius: clamp(24px, 2.8vw, 40px); }
/* … und wie die Zitat-Karten daneben (Luca 3.11.): leicht schräg, Schatten, beim Darüberfahren gerade und angehoben.
   Schatten als drop-shadow, damit er dem Bild auch während der Foto-Tür (clip-path am img) folgt. */
.zh-voices-photo { rotate: 1.3deg; filter: drop-shadow(0 14px 38px rgba(40, 30, 0, .16)); transition: rotate .6s var(--zh-pop), translate .6s var(--zh-pop), filter .4s; }
@media (hover: hover) {
  .zh-voices-photo:hover { rotate: 0deg; translate: 0 -8px; filter: drop-shadow(0 26px 60px rgba(40, 30, 0, .24)); }
}
/* Hochzeit · „Kurz gefragt“: KI-Hinweis im Bild halten (Bild steht dort bündig am rechten Rand) */
#fragen .zg-bild { margin-right: 0; }