/* Variable Geologica (100–900), nur die Buchstaben von „Coverband München:“ – für den Buchstaben-Magneten im Hero. OFL. */
@font-face { font-family: 'Geologica ZX'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/geologica-variabel-hero.woff2) format('woff2'); }

/* =====================================================================
   Zanadu · Home-Entwurf Relaunch 2026
   Alle Regeln hängen an .zx (Klasse der Sections dieser Seite) – nichts
   davon greift auf anderen Seiten. Schriften: nur die des Themes
   (Geologica 800/900, Source Sans 3 400/500), keine neuen Dateien.
   Farblogik (Farbkonzept 02.10.2026): Die Startseite ist blau, dazu Weiß und Schwarz. Andere Farben
   stehen nur dort, wo es in ihren Bereich geht: Gelb = Hochzeit, Rot = Kontakt und Anfrage.
   ===================================================================== */
.zx {
  --zx-blue: #049DD9;
  --zx-blue-deep: #0A6FB2;
  --zx-yellow: #F2CB05;
  --zx-red: #F23847;
  --zx-ink: #1d1d1d;
  --zx-pad: clamp(20px, 4.6vw, 88px);
  --zx-display: Geologica, sans-serif;
  --zx-ease: cubic-bezier(.2, .7, .2, 1);
}
.zx .uk-container { max-width: none; padding-left: var(--zx-pad); padding-right: var(--zx-pad); }
.zx, .zx * { hyphens: manual; }

/* ---------- Gemeinsame Typo ---------- */
.zx .zx-h2 { margin: 0 !important; font: 800 clamp(2.3rem, 5.6vw, 6rem)/1.02 var(--zx-display); letter-spacing: -.02em; text-transform: uppercase; color: var(--zx-ink); }
.zx.uk-section-muted .zx-h2, .zx.uk-section-secondary .zx-h2 { color: #fff; }
/* lange Überschriften eine Stufe kleiner, damit sie in drei bis vier Zeilen bleiben */
.zx .zx-h2.zx-h2-long { font-size: clamp(2rem, 4.3vw, 4.6rem); }
.zx .zx-h3 { margin: 0 !important; font: 800 clamp(1.3rem, 1.9vw, 1.9rem)/1.1 var(--zx-display); text-transform: uppercase; color: inherit; }
.zx .zx-body { margin: 0 !important; font-size: clamp(1.06rem, 1.3vw, 1.3rem); line-height: 1.5; }
.zx .zx-body p { margin: 0 0 .8em; }
.zx .zx-body p:last-child { margin-bottom: 0; }
.zx .zx-lead { margin: 0 !important; font-size: clamp(1.2rem, 1.75vw, 1.75rem); line-height: 1.35; font-weight: 400; }
.zx .zx-small { margin: 0 !important; font-size: .95rem; line-height: 1.45; }
/* Google-Bewertung (GoogleBewertung.astro): eine Zeile in der Größe von .zx-small, Link aufs Profil */
.zx .zx-google { margin: 14px 0 0 !important; font: 400 .95rem/1.45 var(--t-text, 'Source Sans 3', sans-serif); }
.zx .zx-google a { color: inherit !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.zx .zx-google strong { font-weight: 700; }
.zx .zx-google-sterne { margin-right: 2px; letter-spacing: .08em; text-decoration: none; }
.zx .zx-claim { margin: 0 !important; font: 800 clamp(1.6rem, 3vw, 3.2rem)/1 var(--zx-display); letter-spacing: -.01em; text-transform: uppercase; color: inherit; }

/* ---------- Anfrage-Button: rote Pille (Rot = Kontakt), auf Farbflächen weiß mit roter Schrift ---------- */
.zx .zx-cta { margin: 0 !important; }
.zx .zx-cta .uk-button-primary { display: inline-flex; align-items: center; gap: .7em; padding: 0 2.1em; height: 64px; border-radius: 999px; background: var(--zx-red) !important; color: #fff !important; font: 800 1.05rem/1 var(--zx-display); text-transform: uppercase; letter-spacing: 0; animation: none; transition: transform .25s var(--zx-ease), background-color .2s, color .2s; }
.zx .zx-cta .uk-button-primary::before, .zx .zx-cta .uk-button-primary::after { display: none !important; }
.zx.uk-section-muted .zx-cta .uk-button-primary, .zx.uk-section-secondary .zx-cta .uk-button-primary { background: #fff !important; color: var(--zx-red) !important; }
.zx .zx-cta .uk-button-primary:hover, .zx .zx-cta .uk-button-primary:focus-visible, .zx.uk-section-muted .zx-cta .uk-button-primary:hover, .zx.uk-section-secondary .zx-cta .uk-button-primary:hover { transform: translateY(-3px); background: var(--zx-ink) !important; color: #fff !important; }
.zx .zx-cta .uk-button-text { padding: 0; font: 800 1.05rem/1 var(--zx-display); text-transform: uppercase; color: inherit !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.zx .zx-cta .uk-button-text::before { display: none !important; }

/* =====================================================================
   01 · Hero – das Foto trägt, die Zeile liegt wie beim heutigen Hero über der Band
   ===================================================================== */
/* Höhe und Ausrichtung setzt die Section nativ (Viewport, unten); die drei Angaben hier sichern das nur ab */
.zx-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 100vh; min-height: 100svh; padding-top: 0 !important; padding-bottom: 0 !important; background: #0a6fb2; }
.zx-hero > * { flex: 1 1 0; min-width: 0; }
.zx-hero .uk-container { padding-bottom: clamp(28px, 4.2vw, 68px); }
.zx-hero .zx-hero-img { position: absolute; inset: -20% 0 0 0; margin: 0 !important; }
/* Zeile über die volle Breite, darunter Subline links und Beweis rechts */
.zx-hero .zx-hero-col { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: clamp(24px, 4vw, 72px); }
.zx-hero .zx-hero-col > * { flex: 0 0 100%; }
.zx-hero .zx-hero-col > .zx-hero-lead { flex: 1 1 18em; }
.zx-hero .zx-hero-col > .zx-hero-proof { flex: 0 0 auto; margin-left: auto !important; }
.zx-hero .zx-hero-img picture { display: block; width: 100%; height: 100%; }
.zx-hero .zx-hero-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 20% 100%; }
.zx-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 62%; background: linear-gradient(to top, rgba(0, 38, 66, .82) 0%, rgba(0, 38, 66, .45) 42%, rgba(0, 38, 66, 0) 100%); pointer-events: none; }
.zx-hero .zx-hero-title, .zx-hero .zx-hero-lead, .zx-hero .zx-hero-proof { position: relative; z-index: 2; }
.zx-hero .zx-hero-title { margin: 0 !important; font: 800 14.6vw/.86 var(--zx-display); letter-spacing: -.03em; text-transform: uppercase; color: #fff; }
.zx-hero .zx-hero-lead { margin: clamp(14px, 1.6vw, 26px) 0 0 !important; max-width: 27em; font-size: clamp(1.15rem, 1.75vw, 1.75rem); line-height: 1.3; color: #fff; }
.zx-hero .zx-hero-proof { margin: clamp(12px, 1.2vw, 18px) 0 0 !important; padding-left: 14px; border-left: 3px solid var(--zx-yellow); font-size: clamp(.98rem, 1.1vw, 1.1rem); line-height: 1.35; color: #fff; }
/* Der Claim sitzt als Aufkleber im freien Blau – Aufkleber sind Zanadus eigene Bildsprache.
   Er schwebt leicht, wird unter dem Zeiger größer und zieht ihm ein Stück nach (--zx-mx/--zx-my setzt das Skript). */
.zx-hero .zx-sticker { position: absolute; right: 0; bottom: calc(100% + 5vh); display: grid; place-items: center; width: clamp(128px, 15.5vw, 250px); aspect-ratio: 1; padding: 0 .9em; box-sizing: border-box; border-radius: 50%; background: var(--zx-yellow); color: var(--zx-ink); font: 800 clamp(.92rem, 1.72vw, 1.75rem)/.98 var(--zx-display); letter-spacing: -.01em; text-align: center; white-space: normal; rotate: -9deg; transform: translate(var(--zx-mx, 0px), var(--zx-my, 0px)); box-shadow: 0 14px 34px rgba(0, 20, 40, .3); transition: scale .55s cubic-bezier(.3, 1.8, .5, 1), box-shadow .3s; }
.zx-hero .zx-sticker:hover { scale: 1.14; box-shadow: 0 24px 48px rgba(0, 20, 40, .4); }
/* Buchstaben der Zeile: das Skript dehnt sie unter dem Zeiger */
.zx-hero .zx-hero-title .zx-w { display: inline-block; white-space: nowrap; }
/* Die Überschrift nutzt die eingebettete variable Geologica („Geologica ZX“, steht vor diesem CSS): am Zeiger werden die
   Buchstaben dünn und schmal. Fehlt sie, greift die normale Geologica des Themes – dann werden sie nur schmal. */
.zx-hero .zx-hero-title { font-family: 'Geologica ZX', Geologica, sans-serif; font-weight: 800; }
.zx-hero .zx-hero-title .zx-ch { display: inline-block; transform-origin: 50% 50%; will-change: transform, font-weight; }
@media (min-width: 960px) {
  .zx-hero .zx-hero-title { font-size: 7.28vw; white-space: nowrap; }
  .zx-hero .zx-sticker { right: 3vw; bottom: calc(100% + 9vh); }
}
@media (prefers-reduced-motion: no-preference) {
  .zx-hero .zx-hero-title { animation: zx-rise .9s var(--zx-ease) both; }
  .zx-hero .zx-hero-lead { animation: zx-rise .9s .12s var(--zx-ease) both; }
  .zx-hero .zx-hero-proof { animation: zx-rise .9s .2s var(--zx-ease) both; }
  .zx-hero .zx-sticker { animation: zx-stick .7s .55s cubic-bezier(.3, 1.6, .5, 1) backwards, zx-float 7s 1.4s ease-in-out infinite; }
}
@keyframes zx-rise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes zx-stick { from { opacity: 0; scale: .4; rotate: 14deg; } }
@keyframes zx-float { 0%, 100% { translate: 0 0; rotate: -9deg; } 33% { translate: 5px -10px; rotate: -5.5deg; } 66% { translate: -4px 6px; rotate: -12deg; } }

/* =====================================================================
   01 B · Hero als Schriftbild (Alternative zum Foto-Hero): blaue Fläche, „Coverband“ links oben,
   „München“ rechts unten, dazwischen die Subline in Kursiv. Beim Bewegen der Maus zieht man die
   Künstler der Setliste als Pillen hinter sich her (setzt das Skript, Klasse zx-trail).
   Alle Maße hängen an --zx-fs (Schriftgröße der zwei Wörter).
   ===================================================================== */
.zx-hero.zx-cover { --zx-fs: 14.4vw; --zx-gap: calc(var(--zx-fs) * .95); display: block; background-color: var(--zx-blue); background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(25% - 1px), rgba(255, 255, 255, .17) calc(25% - 1px), rgba(255, 255, 255, .17) 25%); }
.zx-hero.zx-cover::after { display: none; }
.zx-hero.zx-cover .uk-container { padding-bottom: 0; }
.zx-cover .zx-cover-col { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto 1fr auto; min-height: 100vh; min-height: 100svh; padding-top: 110px; padding-bottom: clamp(22px, 2.6vw, 44px); box-sizing: border-box; }
.zx-cover .zx-cover-col > * { grid-column: 1; grid-row: 1; }
.zx-hero.zx-cover .zx-hero-title { grid-row: 2; align-self: start; position: relative; z-index: 2; margin: 0 !important; font-size: var(--zx-fs); line-height: .86; white-space: normal; animation: none; }
.zx-cover .zx-line { display: block; }
.zx-cover .zx-line-r { margin-top: var(--zx-gap); text-align: right; }
/* Subline: der kursive Teil sitzt genau in der Lücke zwischen den zwei Wörtern, der Rest links neben „München“ */
.zx-cover .zx-cover-lead { grid-row: 2; align-self: start; position: relative; z-index: 2; margin: 0 !important; padding-top: calc(var(--zx-fs) * .86); color: #fff; pointer-events: none; }
.zx-cover .zx-cover-lead p { margin: 0; }
.zx-cover .zx-serif { display: flex; align-items: center; height: var(--zx-gap); padding-left: 11%; font: italic 400 calc(var(--zx-fs) * .255)/1 Georgia, "Times New Roman", serif; letter-spacing: -.01em; white-space: nowrap; }
.zx-cover .zx-rest { display: flex; align-items: flex-end; height: calc(var(--zx-fs) * .76); max-width: 16em; font-size: clamp(1.1rem, 1.55vw, 1.7rem); line-height: 1.3; }
.zx-hero.zx-cover .zx-sticker { right: 1.5%; top: calc(var(--zx-fs) * -.5); bottom: auto; }
.zx-cover .zx-cover-foot { grid-row: 4; display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); position: relative; z-index: 2; margin: 0 !important; font-size: clamp(.98rem, 1.1vw, 1.1rem); line-height: 1.35; color: #fff; }
.zx-cover .zx-cover-foot p { margin: 0; }
.zx-cover .zx-cover-foot::after { content: ""; flex: 1; height: 2px; background: rgba(255, 255, 255, .5); }
/* gezogene Künstler-Pillen: liegen hinter Überschrift, Subline, Aufkleber und Fußzeile (die haben z-index 2) */
.zx-cover .zx-trail { position: absolute; z-index: 1; padding: .34em .9em; border-radius: 999px; background: var(--zx-red); color: #fff; font: 800 clamp(1rem, 1.9vw, 2rem)/1.2 var(--zx-display); text-transform: uppercase; white-space: nowrap; pointer-events: none; rotate: var(--zx-r, 0deg); translate: -50% -50%; animation: zx-trail 1.6s var(--zx-ease) forwards; }
/* keine weißen Pillen: hinter der weißen Schrift würden sie mit den Buchstaben verschmelzen */
.zx-cover .zx-trail-b { background: var(--zx-yellow); color: var(--zx-ink); }
.zx-cover .zx-trail-c { background: var(--zx-ink); color: #fff; }
@keyframes zx-trail { 0% { opacity: 0; scale: .4; } 14% { opacity: 1; scale: 1; } 62% { opacity: 1; scale: 1; translate: calc(-50% + var(--zx-dx, 0px) * .6) calc(-50% + var(--zx-dy, 0px) * .6); } 100% { opacity: 0; scale: .8; translate: calc(-50% + var(--zx-dx, 0px)) calc(-50% + var(--zx-dy, 0px) + 46px); } }
@media (min-width: 960px) {
  .zx-hero.zx-cover { --zx-fs: 10.6vw; --zx-gap: calc(var(--zx-fs) * .52); }
}
@media (max-width: 959px) {
  .zx-cover .zx-serif { align-items: flex-start; padding: calc(var(--zx-fs) * .22) 0 0; font-size: calc(var(--zx-fs) * .34); white-space: normal; }
  .zx-cover .zx-rest { height: auto; max-width: none; margin-top: calc(var(--zx-fs) * .86 + 18px); }
  .zx-hero.zx-cover .zx-sticker { right: 0; top: auto; bottom: calc(100% + 26px); }
}
@media (prefers-reduced-motion: no-preference) {
  /* Auftritt zeilenweise; danach weichen die zwei Wörter dem Zeiger leicht gegeneinander aus (--zx-px setzt das Skript) */
  .zx-cover .zx-line { animation: zx-rise .9s var(--zx-ease) both; translate: calc(var(--zx-px, 0) * -16px) 0; transition: translate .9s var(--zx-ease); }
  .zx-cover .zx-line-r { animation-delay: .16s; translate: calc(var(--zx-px, 0) * 16px) 0; }
  .zx-cover .zx-cover-lead { animation: zx-rise .9s .3s var(--zx-ease) both; }
  .zx-cover .zx-cover-foot { animation: zx-rise .9s .42s var(--zx-ease) both; }
}

/* =====================================================================
   01 C · Schriftbild über dem abgedunkelten Sonnenbrillen-Foto (zx-cover-foto, zusätzlich zu zx-cover).
   Die Gesichter stehen frei im oberen Teil, die zwei Wörter liegen darunter über Sakkos und T-Shirts.
   ===================================================================== */
.zx-hero.zx-cover.zx-cover-foto { --zx-fs: 14.4vw; background-color: #071c30; background-image: none; }
.zx-hero.zx-cover.zx-cover-foto::after { display: block; inset: 0; height: auto; background: linear-gradient(to top, rgba(4, 20, 36, .92) 0%, rgba(4, 20, 36, .74) 30%, rgba(4, 20, 36, .4) 58%, rgba(4, 20, 36, .34) 100%); }
.zx-hero.zx-cover-foto .zx-hero-img { inset: -16% 0 0 0; }
.zx-hero.zx-cover-foto .zx-hero-img img { object-position: 50% 100%; }
.zx-cover.zx-cover-foto .zx-cover-col { grid-template-rows: 1fr auto; padding-bottom: clamp(34px, 6vh, 72px); }
.zx-cover.zx-cover-foto .zx-cover-foot { grid-row: 3; margin-top: clamp(20px, 2.4vw, 36px) !important; }
.zx-hero.zx-cover.zx-cover-foto .zx-sticker { top: auto; right: 3vw; bottom: calc(100% + 7vh); }
/* Farben: die Startseite ist blau – Aufkleber und gezogene Pillen hier nur in Blau und Schwarz.
   Die ausgeschalteten Fassungen 01 A und 01 B behalten ihre bisherigen Farben. */
.zx-hero.zx-cover.zx-cover-foto .zx-sticker { background: var(--zx-blue); color: #fff; }
.zx-cover.zx-cover-foto .zx-trail { background: var(--zx-blue); color: #fff; }
.zx-cover.zx-cover-foto .zx-trail-b { background: var(--zx-blue-deep); color: #fff; }
.zx-cover.zx-cover-foto .zx-trail-c { background: var(--zx-ink); color: #fff; }
@media (min-width: 960px) {
  .zx-hero.zx-cover.zx-cover-foto { --zx-fs: 9.6vw; --zx-gap: calc(var(--zx-fs) * .52); }
}
@media (max-width: 959px) {
  /* Hochformat: das Foto füllt die oberen zwei Drittel (drei Gesichter), darunter läuft es ins Dunkel aus */
  .zx-hero.zx-cover-foto .zx-hero-img { inset: 0 0 36% 0; }
  .zx-hero.zx-cover-foto .zx-hero-img img { object-position: 43% 50%; }
  .zx-hero.zx-cover.zx-cover-foto::after { background: linear-gradient(to top, #071c30 0%, #071c30 36%, rgba(7, 28, 48, .5) 54%, rgba(7, 28, 48, .3) 100%); }
  .zx-hero.zx-cover.zx-cover-foto .zx-sticker { right: 0; bottom: calc(100% + 18px); width: 112px; font-size: .8rem; }
}

/* =====================================================================
   02 · Weiche – Auftakt mit Weißraum, darunter zwei Kacheln randlos; die Farbe kommt aus dem Foto
   ===================================================================== */
.zx-anlass { padding-top: clamp(84px, 11.5vw, 210px) !important; padding-bottom: 0 !important; }
.zx-anlass .zx-intro .zx-lead { max-width: 24em; color: var(--zx-ink); }
/* Luca 02.11.: Hochzeit/Firmenfeier als zwei Karten mit denselben Ecken wie die übrige Seite, kleiner Abstand dazwischen und zum Rand */
.zx-anlass .zx-tiles { --zx-tg: clamp(10px, 1.2vw, 20px); gap: var(--zx-tg); margin: clamp(72px, 10vw, 180px) calc((var(--zx-pad) - var(--zx-tg)) * -1) 0 !important; }
.zx-anlass .zx-tiles > .zx-tile { border-radius: clamp(20px, 2.2vw, 40px); overflow: hidden; }
@media (min-width: 960px) { .zx-anlass .zx-tiles > .zx-tile { width: calc(50% - var(--zx-tg) / 2) !important; } }
.zx-anlass .zx-tile { position: relative; display: flex; flex-direction: column; padding-left: 0 !important; margin-top: 0 !important; }
.zx-anlass .zx-tile .uk-panel { position: static; }
.zx-anlass .zx-tile-hz { background: var(--zx-yellow); color: var(--zx-ink); }
.zx-anlass .zx-tile-ff { background: var(--zx-blue); color: #fff; }
.zx-anlass .zx-tile-img { margin: 0 !important; aspect-ratio: 16 / 10; overflow: hidden; }
.zx-anlass .zx-tile-img picture { display: block; width: 100%; height: 100%; }
.zx-anlass .zx-tile-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1s var(--zx-ease); }
.zx-anlass .zx-tile-hz .zx-tile-img img { object-position: 50% 30%; }
.zx-anlass .zx-tile:hover .zx-tile-img img { transform: scale(1.05); }
.zx-anlass .zx-tile-title { margin: 0 !important; padding: clamp(26px, 3.4vw, 58px) var(--zx-pad) 0; font: 800 clamp(1.75rem, 3.15vw, 3.5rem)/1 var(--zx-display); letter-spacing: -.015em; text-transform: uppercase; color: inherit !important; }
.zx-anlass .zx-tile-text { margin: clamp(14px, 1.4vw, 22px) 0 0 !important; padding: 0 var(--zx-pad); max-width: 36em; font-size: clamp(1.06rem, 1.3vw, 1.3rem); line-height: 1.45; color: inherit !important; }
.zx-anlass .zx-tile-text p { margin: 0 0 .7em; }
.zx-anlass .zx-tile-text strong { font-weight: 500; }
.zx-anlass .zx-tile-link { margin: auto 0 0 !important; padding: clamp(20px, 2.2vw, 34px) var(--zx-pad) clamp(28px, 3.4vw, 58px); }
.zx-anlass .zx-tile-link a { display: inline-flex; align-items: center; gap: .8em; font: 800 clamp(.98rem, 1.15vw, 1.15rem)/1.2 var(--zx-display); text-transform: uppercase; text-decoration: none; color: inherit !important; }
.zx-anlass .zx-tile-link a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.zx-anlass .zx-tile-link a::after { content: "→"; flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 2px solid currentColor; font-size: 1.2rem; transition: transform .35s var(--zx-ease); }
.zx-anlass .zx-tile:hover .zx-tile-link a::after { transform: translateX(8px); }
/* Links im Fließtext (SEO 29.10.: Trauung, Bayern) liegen über der klickbaren Kachel; der Text selbst lässt Klicks zur Kachel durch */
.zx-anlass .zx-tile-text { position: relative; z-index: 2; pointer-events: none; }
.zx-anlass .zx-tile-text a { pointer-events: auto; }
.zx-anlass .zx-tile-text a, .zx-anlass .zx-intro .zx-lead a { position: relative; z-index: 2; color: inherit !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.zx-anlass .zx-tile-text a:hover, .zx-anlass .zx-intro .zx-lead a:hover { text-decoration-color: var(--zx-red); }

/* =====================================================================
   03 · Auf einen Blick – der Absatz als drei Karten in Blau, Dunkelblau und Schwarz (ein Satz je Karte), die wie Aufkleber
   leicht schief liegen. Sie klatschen beim Hineinscrollen nacheinander auf, richten sich unter dem
   Zeiger auf und neigen sich ihm zu. Darunter die Logos.
   ===================================================================== */
.zx-blick .zx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 32px); margin: clamp(48px, 6vw, 100px) 0 0 !important; }
.zx-blick .zx-cards > .zx-card { position: relative; width: auto !important; min-height: clamp(300px, 27vw, 480px); margin: 0 !important; padding: clamp(24px, 2.7vw, 48px) !important; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; border-radius: clamp(20px, 2.2vw, 40px); color: #fff; box-shadow: 0 10px 30px rgba(0, 20, 40, .12); transition: translate .45s var(--zx-ease), opacity .4s, box-shadow .45s var(--zx-ease); }
/* 3.11. (Luca: „Panels buggen, schief, verzerrt“): Karten stehen immer gerade – keine Schrägstellung je Karte mehr (vorher
   rotate -2,2° / 1,4° / -1,2°), keine 3D-Neigung zum Zeiger (rotateX/Y mit Perspektive verbog den Text), kein Skalieren. */
.zx-blick .zx-card-a { background: var(--zx-blue); }
.zx-blick .zx-card-b { background: var(--zx-blue-deep); }
.zx-blick .zx-card-c { background: var(--zx-ink); }
/* Lichtkante, die beim Überfahren einmal über die Karte läuft */
.zx-blick .zx-cards > .zx-card::after { content: ""; position: absolute; inset: -40% -60%; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, 0) 58%); translate: -70% 0; pointer-events: none; }
/* Anheben nur mit Zeiger: am Handy bliebe eine angetippte Karte sonst über dem Stapel hängen.
   Seit 2.11. per Klasse is-hot statt :hover (setzt zanadu.js nach der festen Lage der Karte): Mit :hover rutschte die
   angehobene und geneigte Karte unter dem Zeiger weg, fiel zurück, wurde wieder getroffen – sie flackerte am Rand. */
@media (hover: hover) {
  .zx-blick .zx-cards > .zx-card.is-hot { translate: 0 -8px; z-index: 2; box-shadow: 0 26px 56px rgba(0, 20, 40, .24); }
  .zx-blick .zx-cards > .zx-card.is-hot::after { translate: 70% 0; transition: translate .9s var(--zx-ease); }
}
.zx-blick .zx-card-text { margin: 0 !important; font-size: clamp(1.06rem, 1.3vw, 1.3rem); line-height: 1.45; color: #fff; }
.zx-blick .zx-card-text p { margin: 0; }
.zx-blick .zx-card-text strong { font-weight: 500; white-space: nowrap; }
.zx-blick .zx-card-lead { display: block; margin-bottom: .7em; font: 800 clamp(1.5rem, 2.35vw, 2.6rem)/1.04 var(--zx-display); letter-spacing: -.01em; text-transform: uppercase; }
.zx-blick .zx-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0 !important; padding: clamp(18px, 2vw, 30px) 0 0; }
.zx-blick .zx-facts > li { margin: 0 !important; padding: .42em .95em; border-radius: 999px; background: var(--zx-blue); font: 800 clamp(.82rem, .95vw, .98rem)/1.2 var(--zx-display); text-transform: uppercase; color: var(--zx-ink); transition: scale .5s cubic-bezier(.3, 1.8, .5, 1), opacity .3s; }
.zx-blick .zx-card-text a { color: inherit !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.zx-blick .zx-facts a { color: inherit !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Auftritt: nur wenn das Skript die Reihe „scharf“ gestellt hat (zx-arm) – ohne Skript liegen die Karten einfach da */
.zx-blick .zx-cards.zx-arm:not(.is-in) > .zx-card { opacity: 0; translate: 0 60px; }
.zx-blick .zx-cards.zx-arm:not(.is-in) .zx-facts > li { opacity: 0; scale: .4; }
.zx-blick .zx-cards.zx-arm > .zx-card:nth-child(2) { transition-delay: .12s; }
.zx-blick .zx-cards.zx-arm > .zx-card:nth-child(3) { transition-delay: .24s; }
.zx-blick .zx-cards.zx-arm.is-done > .zx-card { transition-delay: 0s; }
.zx-blick .zx-cards.zx-arm .zx-facts > li:nth-child(1) { transition-delay: .7s; }
.zx-blick .zx-cards.zx-arm .zx-facts > li:nth-child(2) { transition-delay: .8s; }
.zx-blick .zx-cards.zx-arm .zx-facts > li:nth-child(3) { transition-delay: .9s; }
.zx-blick .zx-cards.zx-arm .zx-facts > li:nth-child(4) { transition-delay: 1s; }
.zx .zx-logos { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: clamp(8px, 2vw, 40px); margin: 0; }
.zx .zx-logos img { display: block; width: 100%; max-width: 190px; height: auto; margin: 0 auto; }

/* =====================================================================
   Termin-Check – rotes Band (Rot = Kontakt), weiter unten als der Hero; unten noch einmal als weiße Karte
   ===================================================================== */
.zx-check { padding-top: clamp(40px, 4.6vw, 76px) !important; padding-bottom: clamp(40px, 4.6vw, 76px) !important; color: #fff; }
.zx-check .zx-claim { color: #fff; }
.zx .zx-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: clamp(12px, 1.6vw, 28px); margin: 0; color: var(--zx-ink); }
.zx .zx-form label { display: block; margin: 0 0 4px; font-size: 1rem; font-weight: 500; line-height: 1.3; color: var(--zx-ink); }
.zx .zx-form input, .zx .zx-form select { display: block; width: 100%; height: 60px; margin: 0; padding: 0 2px; box-sizing: border-box; border: 0; border-bottom: 4px solid var(--zx-ink); border-radius: 0; background: transparent; font: 800 clamp(1.05rem, 1.35vw, 1.3rem)/1 var(--zx-display); text-transform: uppercase; color: var(--zx-ink); -webkit-appearance: none; appearance: none; }
.zx .zx-form select { padding-right: 30px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%231d1d1d' stroke-width='3'/%3E%3C/svg%3E") no-repeat right 4px center; cursor: pointer; }
.zx .zx-form input:focus-visible, .zx .zx-form select:focus-visible, .zx .zx-form button:focus-visible { outline: 3px solid var(--zx-ink); outline-offset: 4px; }
.zx .zx-form button { height: 64px; padding: 0 2.1em; border: 0; border-radius: 999px; background: var(--zx-red); color: #fff; font: 800 1.05rem/1 var(--zx-display); text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: transform .25s var(--zx-ease), background-color .2s, color .2s; }
.zx .zx-form button:hover { transform: translateY(-3px); background: var(--zx-ink); color: #fff; }
.zx .zx-form .zx-form-note { grid-column: 1 / -1; margin: 0; font-size: .98rem; line-height: 1.4; color: var(--zx-ink); }
.zx .zx-form .zx-form-note a { color: inherit !important; text-decoration: underline; text-underline-offset: 3px; }
.zx .zx-form.zx-form-card { grid-template-columns: 1fr 1fr; padding: clamp(20px, 2.4vw, 38px); background: #fff; }
.zx .zx-form.zx-form-card button { grid-column: 1 / -1; }
/* im roten Band steht das Formular direkt auf der Farbe: alles weiß, der Button weiß mit roter Schrift */
.zx-check .zx-form, .zx-check .zx-form label, .zx-check .zx-form .zx-form-note { color: #fff; }
.zx-check .zx-form input, .zx-check .zx-form select { border-bottom-color: #fff; color: #fff; }
.zx-check .zx-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23ffffff' stroke-width='3'/%3E%3C/svg%3E"); }
.zx-check .zx-form select option { color: var(--zx-ink); }
.zx-check .zx-form input::-webkit-calendar-picker-indicator { filter: invert(1); }
.zx-check .zx-form input:focus-visible, .zx-check .zx-form select:focus-visible, .zx-check .zx-form button:focus-visible { outline-color: #fff; }
.zx-check .zx-form button { background: #fff; color: var(--zx-red); }
.zx-check .zx-form button:hover { background: var(--zx-ink); color: #fff; }

/* =====================================================================
   04 · Hören – weiße Fläche; die Zeile macht den Wechsel selbst vor: erst leise, dann laut (in Blau).
   Zwei Stimmen ziehen sich durch den Abschnitt: leise = dünn oder kursiv, laut = fette Versalien in Blau.
   Der Abend steht als drei Stationen nebeneinander (zwei Videos, der DJ als Karte), die Pointe als Schriftbild.
   ===================================================================== */
.zx-hoeren { color: var(--zx-ink); }
.zx-hoeren .zx-lead { margin-top: clamp(22px, 2.6vw, 44px) !important; max-width: 34em; color: var(--zx-ink); }
/* drei Stationen: eigenes Raster statt der Grid-Spalten, damit die DJ-Karte schmal bleiben kann */
.zx-hoeren .zx-acts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(215px, 1.15fr); align-items: start; gap: clamp(22px, 2.8vw, 52px); margin: clamp(48px, 5.8vw, 98px) 0 0 !important; }
.zx-hoeren .zx-acts > .zx-act { position: relative; width: auto !important; margin: 0 !important; padding: 0 !important; }
/* dritte Station: der DJ als schwarze Karte, wie die Karten in „Auf einen Blick“ */
.zx-hoeren .zx-dj { margin: 0 !important; padding: clamp(22px, 2.2vw, 38px); border-radius: clamp(20px, 2.2vw, 40px); background: var(--zx-ink); color: #fff; font-size: clamp(1.06rem, 1.25vw, 1.25rem); line-height: 1.45; rotate: 2deg; box-shadow: 0 10px 30px rgba(0, 20, 40, .14); }
.zx-hoeren .zx-dj p { margin: 0; }
.zx-hoeren .zx-next { display: block; margin-bottom: .6em; font: 800 clamp(1.5rem, 2.2vw, 2.4rem)/1.02 var(--zx-display); letter-spacing: -.01em; text-transform: uppercase; }
.zx-hoeren .zx-video { margin: 0 !important; }
.zx-hoeren .zx-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.zx-hoeren .zx-small { margin-top: 10px !important; color: #555; }
.zx-hoeren .zx-h3 { margin-top: clamp(18px, 2vw, 30px) !important; color: var(--zx-ink); }
.zx-hoeren .zx-body { margin-top: 10px !important; color: var(--zx-ink); }
.zx-hoeren .zx-outro { margin-top: clamp(44px, 5.6vw, 96px) !important; }
.zx-hoeren .zx-cta { margin-top: clamp(20px, 2.2vw, 34px) !important; }

/* =====================================================================
   05 · Repertoire – blaue Fläche, die Platte aus dem eigenen Foto dreht sich
   ===================================================================== */
.zx-repertoire { overflow: hidden; color: #fff; }
.zx-repertoire .zx-body { margin-top: clamp(22px, 2.6vw, 44px) !important; max-width: 33em; color: #fff; }
.zx-repertoire .zx-body strong { font: 800 .86em/1 var(--zx-display); text-transform: uppercase; }
.zx-repertoire .zx-vinyl { rotate: var(--zx-turn, 0deg); position: relative; margin: 0 calc(var(--zx-pad) * -1.6) 0 0 !important; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 30, 60, .45); }
.zx-repertoire .zx-vinyl picture { display: block; }
/* Ausschnitt genau auf die Schallplatte: Mitte bei 59,4 % / 65,1 % des Fotos, Durchmesser knapp 30 % der Breite */
.zx-repertoire .zx-vinyl img { position: absolute; left: -150.6%; top: -96.8%; width: 338%; max-width: none; height: auto; }
@media (prefers-reduced-motion: no-preference) { .zx-repertoire .zx-vinyl { animation: zx-spin 22s linear infinite; } }
@keyframes zx-spin { to { transform: rotate(360deg); } }
.zx-repertoire .zx-setrow { margin-top: clamp(44px, 5.6vw, 96px) !important; }
.zx-repertoire .zx-h3big { margin: 0 !important; font: 800 clamp(1.6rem, 3vw, 3.2rem)/1 var(--zx-display); letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.zx-repertoire .zx-lead { margin-top: 14px !important; color: #fff; }
.zx-repertoire .zx-setlist { display: flex; flex-wrap: wrap; gap: clamp(8px, .9vw, 14px); margin: clamp(22px, 2.6vw, 40px) 0 0 !important; padding: 0; }
.zx-repertoire .zx-setlist > li { margin: 0 !important; padding: .32em .95em; border: 3px solid #fff; border-radius: 999px; font: 800 clamp(1rem, 1.75vw, 1.8rem)/1.2 var(--zx-display); text-transform: uppercase; color: #fff; transition: background-color .2s, color .2s, transform .3s var(--zx-ease); }
.zx-repertoire .zx-setlist > li:hover { background: #fff; color: var(--zx-blue); transform: rotate(-2deg) scale(1.04); }
.zx-repertoire .zx-setlist > li:nth-child(even):hover { transform: rotate(2deg) scale(1.04); }
.zx-repertoire .zx-setflow { display: grid; gap: clamp(8px, .9vw, 14px); margin: clamp(22px, 2.6vw, 40px) 0 0; }
.zx-repertoire .zx-setflow .zx-setlist { flex-wrap: nowrap; width: max-content; margin: 0 !important; will-change: transform; }
.zx-repertoire .zx-setflow .zx-setlist > li { flex: none; border-width: 4px; font-size: clamp(1.3rem, 2.5vw, 2.7rem); white-space: nowrap; }
.zx-repertoire .zx-cta { margin-top: clamp(28px, 3vw, 48px) !important; }

/* =====================================================================
   06 · Region – Karte links, die acht Orte als Fahrplan mit Entfernung
   ===================================================================== */
.zx-region .zx-maprow { margin-top: clamp(36px, 4.6vw, 76px) !important; }
/* Karte (Modul der Live-Seite, hier nur überschrieben): Format so, dass im Startausschnitt alle acht Orte liegen;
   Punkte und Namen sofort sichtbar und größer; der Hinweis „Interaktive Karte“ rückt klein nach unten */
.zx-region .zux { --zux-h: auto; }
.zx-region .zux .zux__viewport { height: auto; aspect-ratio: 6 / 5; }
.zx-region .zux.is-imgloaded .zux__m { opacity: 1; }
.zx-region .zux .zux__cover { align-items: flex-start; justify-content: flex-start; padding: 14px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.zx-region .zux .zux__coverbtn { transform: scale(.8); transform-origin: 0 0; }
.zx-region .zux .zux__cover:hover .zux__coverbtn { transform: scale(.84); }
.zx-region .zux .zux__m--gig .zux__hit { width: 56px; height: 56px; }
.zx-region .zux .zux__m--gig .zux__halo { width: 58px; height: 58px; }
.zx-region .zux .zux__m--gig .zux__ring { width: 30px; height: 30px; }
.zx-region .zux .zux__m--gig .zux__core { width: 19px; height: 19px; border-width: 2.5px; }
.zx-region .zux .zux__m--gig .zux__name { left: 44px; top: 8px; font-size: 16px; font-weight: 700; }
.zx-region .zux .zux__m--gig.zux--unten .zux__name { left: 50%; top: 42px; }
.zx-region .zux .zux__m--home .zux__hit { width: 64px; height: 64px; }
.zx-region .zux .zux__m--home .zux__glow { width: 104px; height: 104px; }
.zx-region .zux .zux__m--home .zux__pulse { width: 54px; height: 54px; }
.zx-region .zux .zux__m--home .zux__ring { width: 38px; height: 38px; }
.zx-region .zux .zux__m--home .zux__core { width: 24px; height: 24px; border-width: 3px; }
.zx-region .zux .zux__m--home .zux__name { left: 46px; top: 22px; font-size: 19px; }
/* im Startausschnitt nur Straßennetz und die acht Orte: Autobahnschilder und Seenamen kommen erst beim Hineinzoomen */
.zx-region .zux:not(.is-z2):not(.is-z3) .zux__m--shield, .zx-region .zux:not(.is-z2):not(.is-z3) .zux__m--lake { opacity: 0 !important; }
.zx-region .zux .zux__m--gig[data-name="Rosenheim"] .zux__name { left: auto; right: 44px; }
/* Stadtfoto am Zeiger (hängt am body, deshalb ohne .zx davor) */
.zx-peek { position: fixed; left: 0; top: 0; z-index: 50; width: 300px; overflow: hidden; border-radius: 18px; background: #1d1d1d; box-shadow: 0 24px 60px rgba(0, 20, 40, .32); pointer-events: none; opacity: 0; scale: .86; transition: opacity .25s, scale .4s cubic-bezier(.2, .7, .2, 1); }
.zx-peek.is-on { opacity: 1; scale: 1; }
.zx-peek img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.zx-peek span { display: block; padding: 6px 12px 7px; font: 400 11px/1.3 'Source Sans 3', sans-serif; color: #fff; }
.zx-region .zx-body { max-width: 32em; color: var(--zx-ink); }
.zx-region .zx-small { margin-top: 10px !important; color: #555; }
.zx-region .zx-routes { margin: clamp(26px, 3vw, 48px) 0 0 !important; }
.zx-region .zx-routes ul { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; border-bottom: 2px solid var(--zx-ink); }
.zx-region .zx-routes li { margin: 0; border-top: 2px solid var(--zx-ink); }
.zx-region .zx-routes a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; font: 800 clamp(1.02rem, 1.4vw, 1.4rem)/1.2 var(--zx-display); text-transform: uppercase; text-decoration: none; color: var(--zx-ink) !important; transition: background-color .2s, padding .3s var(--zx-ease); }
.zx-region .zx-routes a span { flex: none; font: 400 1rem/1.2 'Source Sans 3', sans-serif; text-transform: none; color: #555; }
/* die acht Orte führen auf Hochzeitsseiten: unter dem Zeiger gelb, wie die Punkte in der Karte;
   am Handy setzt das Skript is-hot auf die Zeile in der Bildmitte */
.zx-region .zx-routes a:hover, .zx-region .zx-routes a.is-hot { padding-left: 12px; padding-right: 12px; background: var(--zx-yellow); }
.zx-region .zx-claim { margin-top: clamp(30px, 3.4vw, 54px) !important; font-size: clamp(1.3rem, 2vw, 2.1rem); color: var(--zx-ink); }
.zx-region .zx-cta { margin-top: 20px !important; }

/* =====================================================================
   07 · Abschluss – rote Fläche (Rot = Kontakt), der kleine Termin-Check als weiße Karte, daneben die drei bei der Arbeit
   ===================================================================== */
.zx-final { color: #fff; }
.zx-final .zx-lead { margin-top: clamp(20px, 2.2vw, 36px) !important; max-width: 30em; color: #fff; }
.zx-final .zx-lead .uk-text-lead { font-size: inherit; }
.zx-final .zx-formwrap { margin: clamp(28px, 3.2vw, 52px) 0 0 !important; max-width: 720px; }
.zx-final .zx-direct { margin: clamp(22px, 2.4vw, 36px) 0 0 !important; font-size: clamp(1.06rem, 1.3vw, 1.3rem); color: #fff; }
.zx-final .zx-direct p { margin: 0 !important; font-size: inherit !important; }
.zx-final .zx-direct a { color: #fff !important; font-weight: 500; white-space: nowrap; }
/* Rechte Spalte endet auf derselben Linie wie die linke: das Foto füllt die Höhe */
.zx-final .zx-final-side { display: flex; flex-direction: column; }
.zx-final .zx-final-img { position: relative; flex: 1 1 340px; min-height: 340px; margin: 0 !important; overflow: hidden; border-radius: clamp(20px, 2.2vw, 40px); }
.zx-final .zx-final-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 58% 40%; }
.zx-final .zx-small { margin-top: 8px !important; color: #fff; opacity: .85; }

/* =====================================================================
   Schmale Breiten
   ===================================================================== */
@media (max-width: 959px) {
  /* Hochformat: das Foto füllt die oberen zwei Drittel, darunter läuft es ins Sakko-Blau aus – so bleiben zwei Gesichter ganz im Bild */
  .zx-hero { background: #0b2c4e; }
  .zx-hero .zx-hero-title { line-height: .97; }
  .zx-hero .zx-hero-img { inset: 0 0 34% 0; }
  .zx-hero .zx-hero-img img { object-position: 20% 50%; }
  .zx-hero::after { height: 72%; background: linear-gradient(to top, #0b2c4e 0%, #0b2c4e 46%, rgba(11, 44, 78, 0) 100%); }
  .zx-hero .zx-hero-col > .zx-hero-lead, .zx-hero .zx-hero-col > .zx-hero-proof { flex: 0 0 100%; margin-left: 0 !important; }
  .zx-anlass .zx-intro .zx-lead { margin-top: 22px !important; }
  /* Der Aufkleber dreht sich beim Scrollen ein Stück mit (--zx-spin setzt das Skript) */
  .zx-hero.zx-cover.zx-cover-foto .zx-sticker { transform: translate(var(--zx-mx, 0px), var(--zx-my, 0px)) rotate(var(--zx-spin, 0deg)); }
  /* Auf einen Blick als Aufkleber-Stapel: jede Karte bleibt oben haften, die nächste schiebt sich darüber.
     Flex statt Grid, weil eine haftende Karte im Grid ihre eigene Zeile nicht verlassen kann. */
  .zx-blick .zx-cards { display: flex; flex-direction: column; }
  .zx-blick .zx-cards > .zx-card { position: sticky; top: 22px; min-height: 0; }
  .zx-blick .zx-cards > .zx-card:nth-child(2) { top: 40px; }
  .zx-blick .zx-cards > .zx-card:nth-child(3) { top: 58px; }
  .zx .zx-logos { grid-template-columns: repeat(3, 1fr); row-gap: 8px; margin-top: 16px; }
  .zx .zx-form, .zx .zx-form.zx-form-card { grid-template-columns: 1fr; }
  .zx-check .zx-form { margin-top: 22px; }
  /* Hören: die drei Stationen liegen nebeneinander und werden gewischt; die nächste schaut am Rand hervor */
  .zx-hoeren .zx-acts { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 16px; margin: 30px calc(var(--zx-pad) * -1) 0 !important; padding: 22px var(--zx-pad) 26px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--zx-pad); scrollbar-width: none; }
  .zx-hoeren .zx-acts::-webkit-scrollbar { display: none; }
  .zx-hoeren .zx-acts > .zx-act { flex: 0 0 84%; scroll-snap-align: start; }
  .zx-hoeren .zx-acts > .zx-act-dj { flex-basis: 76%; }
  .zx-hoeren .zx-dj { min-height: 47vw; }
  .zx-hoeren .zx-outro { margin-top: 26px !important; }
  /* die Platte groß und rechts angeschnitten, wie am Desktop */
  .zx-repertoire .zx-vinyl { width: 104%; margin: 34px -34% 0 auto !important; }
  .zx-region .zux .zux__m--gig .zux__ring { width: 24px; height: 24px; }
  .zx-region .zux .zux__m--gig .zux__core { width: 15px; height: 15px; }
  .zx-region .zux .zux__m--gig .zux__name { left: 36px; top: 12px; font-size: 13.5px; }
  .zx-region .zux .zux__m--gig.zux--unten .zux__name { left: 50%; top: -14px; }
  .zx-region .zux .zux__m--gig[data-name="Rosenheim"] .zux__name, .zx-region .zux .zux__m--gig[data-name="Starnberg"] .zux__name { left: auto; right: 36px; }
  .zx-region .zux .zux__m--home .zux__name { font-size: 16px; }
  /* schmal: Bedienknöpfe erst nach dem Antippen, der Hinweis nur als Symbol – sonst verdecken sie Orte */
  .zx-region .zux:not(.is-active) .zux__ctrl, .zx-region .zux:not(.is-active) .zux__ctrls { display: none; }
  .zx-region .zux .zux__covertxt { display: none; }
  .zx-region .zux .zux__coverbtn { padding: 10px; }
  .zx-region .zx-h2 { margin-top: 30px !important; }
}
@media (max-width: 1199px) {
  .zx .zx-form input, .zx .zx-form select { font-size: 1rem; }
}
@media (max-width: 639px) {
  .zx .zx-form button, .zx .zx-cta .uk-button-primary { width: 100%; justify-content: center; }
}


/* =====================================================================
   Überarbeitung 16.10.2026 (Feedback Philipp)
   ===================================================================== */

/* ---------- 02 · Firmenfeier-Kachel: Foto der drei in Blau (Gesichter oben im Bild) ---------- */
.zx-anlass .zx-tile-ff .zx-tile-img img { object-position: 50% 22%; }
.zx-anlass .zx-tile-ff:hover .zx-tile-img img { transform: scale(1.05); }

/* ---------- 03 · Karten: unten je ein eigenes Element ---------- */
.zx-blick .zx-card > .uk-panel.zx-card-text { flex: 0 0 auto; }
/* Karte A · die drei als runde Aufkleber; unter dem Zeiger springt einer vor */
.zx-blick .zx-trio { display: flex; margin: auto 0 0; padding-top: clamp(22px, 2.4vw, 40px); }
.zx-blick .zx-face { position: relative; flex: 0 0 auto; width: clamp(84px, 8.6vw, 150px); margin: 0 0 0 -14px; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .4s; }
.zx-blick .zx-face:first-child { margin-left: 0; }
.zx-blick .zx-face img { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--zx-blue); object-fit: cover; background: var(--zx-blue-deep); }
.zx-blick .zx-face-1 img { object-position: 56% 14%; object-fit: cover; }
.zx-blick .zx-face-2 img { object-position: 46% 14%; }
.zx-blick .zx-face-3 img { object-position: 52% 20%; }
.zx-blick .zx-face-1 { rotate: -6deg; } .zx-blick .zx-face-2 { rotate: 4deg; z-index: 1; } .zx-blick .zx-face-3 { rotate: -3deg; z-index: 2; }
.zx-blick .zx-face figcaption { position: absolute; left: 50%; bottom: -6px; translate: -50% 0; padding: .3em .7em; border-radius: 999px; background: #fff; color: var(--zx-ink); font: 800 .68rem/1.1 var(--zx-display); text-transform: uppercase; white-space: nowrap; opacity: 0; scale: .6; transition: opacity .25s, scale .35s cubic-bezier(.3, 1.8, .5, 1); }
@media (hover: hover) {
  .zx-blick .zx-face:hover { transform: translateY(-12px) scale(1.12); z-index: 3; }
  .zx-blick .zx-face:hover figcaption { opacity: 1; scale: 1; }
}
/* ohne Zeiger keine Beschriftung: die drei Pillen überlappen sich schmal */
/* die Bildmarke ist kein Personen-Bild mit Zuordnung im Text: Namen stehen im Satz darüber */
.zx-blick .zx-cards.zx-arm:not(.is-in) .zx-face { opacity: 0; transform: translateY(40px) scale(.5); }
.zx-blick .zx-cards.zx-arm .zx-face-1 { transition-delay: .55s; } .zx-blick .zx-cards.zx-arm .zx-face-2 { transition-delay: .68s; } .zx-blick .zx-cards.zx-arm .zx-face-3 { transition-delay: .81s; }
.zx-blick .zx-cards.zx-arm.is-done .zx-face { transition-delay: 0s; }

/* Karte B · der Abend als Fahrplan: von leise (kleiner Punkt) bis laut (großer Punkt); ein Lichtpunkt läuft immer wieder durch */
.zx-blick .zx-abend { position: relative; display: grid; gap: clamp(8px, .8vw, 12px); margin: auto 0 0; padding: clamp(22px, 2.4vw, 40px) 0 0 34px; list-style: none; }
.zx-blick .zx-abend::before { content: ""; position: absolute; left: 11px; top: calc(clamp(22px, 2.4vw, 40px) + 10px); bottom: 10px; width: 2px; background: rgba(255, 255, 255, .35); }
.zx-blick .zx-abend li { position: relative; margin: 0; font: 800 calc(.92rem + var(--n) * .16rem)/1.1 var(--zx-display); text-transform: uppercase; color: rgba(255, 255, 255, .55); animation: zx-abend-text 5s calc(var(--n) * .7s) infinite; }
.zx-blick .zx-abend li::before { content: ""; position: absolute; left: -23px; top: 50%; width: calc(8px + var(--n) * 2.5px); height: calc(8px + var(--n) * 2.5px); translate: -50% -50%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); animation: zx-abend-dot 5s calc(var(--n) * .7s) infinite; }
@keyframes zx-abend-text { 0%, 28%, 100% { color: rgba(255, 255, 255, .55); } 6%, 18% { color: #fff; } }
@keyframes zx-abend-dot { 0%, 30%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); background: rgba(255, 255, 255, .7); } 8% { box-shadow: 0 0 0 9px rgba(255, 255, 255, .22); background: #fff; } }

/* Karte C · Kabel und Steckdose: beim Hineinscrollen steckt der Stecker ein, die Dose leuchtet */
.zx-blick .zx-plug { margin: clamp(18px, 2vw, 30px) 0 0; }
.zx-blick .zx-plug svg { display: block; width: 100%; max-width: 340px; height: auto; overflow: visible; }
.zx-blick .zx-plug-cable { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 4; stroke-linecap: round; }
.zx-blick .zx-plug-head rect { fill: #fff; }
.zx-blick .zx-plug-head .zx-plug-pin { fill: rgba(255, 255, 255, .85); }
.zx-blick .zx-plug-socket circle { fill: none; stroke: #fff; stroke-width: 4; transition: fill .3s .9s, stroke .3s .9s; }
.zx-blick .zx-plug-socket .zx-plug-hole { fill: #fff; stroke: none; }
.zx-blick .zx-plug-head { transition: transform .7s .6s cubic-bezier(.3, 1.4, .5, 1); }
.zx-blick .zx-cards.zx-arm:not(.is-in) .zx-plug-head { transform: translateX(-46px); }
.zx-blick .zx-cards.is-in .zx-plug-socket circle:first-child { fill: var(--zx-blue); stroke: var(--zx-blue); }
@media (hover: hover) { .zx-blick .zx-card-c.is-hot .zx-plug-head { transform: translateX(-10px); transition-delay: 0s; } }
.zx-blick .zx-facts { padding-top: clamp(14px, 1.6vw, 22px); }

/* ---------- 03 b · Referenzen als Scroll-Band: steht, die Logos ziehen von links nach rechts durch ---------- */
.zx-logoband { position: relative; height: 320vh; padding: 0 !important; background: #fff; }
.zx-logoband .zx-lb-pin { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; height: 100vh; height: 100svh; overflow: hidden; }
.zx-logoband .zx-lb-head { position: relative; z-index: 1; padding: 0 var(--zx-pad); text-align: center; transform: translateY(var(--zx-lb-up, 0px)) scale(var(--zx-lb-s, 1)); transform-origin: 50% 0; will-change: transform; }
.zx-logoband .zx-lb-title { margin: 0; text-wrap: balance; font: 800 clamp(2.3rem, 5.6vw, 6rem)/1.02 var(--zx-display); letter-spacing: -.02em; text-transform: uppercase; color: var(--zx-ink); }
.zx-logoband .zx-lb-link { display: inline-block; margin-top: clamp(14px, 1.4vw, 22px); font: 800 clamp(.95rem, 1.1vw, 1.1rem)/1 var(--zx-display); text-transform: uppercase; color: var(--zx-ink) !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.zx-logoband .zx-lb-track { position: absolute; left: 0; top: 50%; display: flex; align-items: center; gap: clamp(30px, 5vw, 110px); width: max-content; margin: 0; padding: 0; list-style: none; translate: 0 -30%; transform: translate3d(var(--zx-lb-x, -100%), 0, 0); will-change: transform; }
.zx-logoband .zx-lb-track li { flex: none; margin: 0; }
.zx-logoband .zx-lb-track img { display: block; width: auto; height: clamp(110px, 24vh, 260px); max-width: none; }
/* ohne Skript oder bei „Bewegung reduzieren“: normale Logo-Fläche */
.zx-logoband:not(.is-live) { height: auto; padding: clamp(60px, 7vw, 120px) 0 !important; }
.zx-logoband:not(.is-live) .zx-lb-pin { position: static; height: auto; overflow: visible; }
.zx-logoband:not(.is-live) .zx-lb-track { position: static; flex-wrap: wrap; justify-content: center; width: auto; margin: clamp(30px, 4vw, 60px) var(--zx-pad) 0; translate: none; transform: none; }
.zx-logoband:not(.is-live) .zx-lb-track img { height: clamp(70px, 8vw, 110px); }
@media (max-width: 959px) {
  .zx-logoband { height: 260vh; }
  .zx-logoband .zx-lb-track img { height: clamp(90px, 18vh, 150px); }
}

/* ---------- 04 · Hören aufgeräumt: nur Geologica (Überschriften) und Source Sans (Text), drei Größen ---------- */
.zx-hoeren .zx-hybrid { margin: 0 !important; font: 800 clamp(2.3rem, 5.6vw, 6rem)/1 var(--zx-display); letter-spacing: -.02em; text-transform: uppercase; color: var(--zx-ink); }
.zx-hoeren .zx-eyebrow { display: block; margin-bottom: clamp(18px, 2vw, 32px); font: 800 clamp(.95rem, 1.1vw, 1.15rem)/1.2 var(--zx-display); letter-spacing: .02em; color: var(--zx-blue); }
/* leise: dieselbe Schrift, nur zurückgenommen – laut: groß, blau, wächst beim Scrollen */
.zx-hoeren .zx-dezent { display: block; color: rgba(29, 29, 29, .32); }
.zx-hoeren .zx-druckvoll { display: block; margin-left: -.04em; transform-origin: 0 100%; transform: scale(calc(.46 + .54 * var(--zx-in, 1))); font-weight: 900; font-size: clamp(2.9rem, 9.9vw, 13rem); line-height: .9; letter-spacing: -.04em; white-space: nowrap; color: var(--zx-blue); }
.zx-hoeren .zx-lead strong { font-weight: 500; color: var(--zx-ink); }
/* „Dezent“ / „Druckvoll“: zwei gleich gebaute Aufkleber, nur die Farbe unterscheidet */
.zx-hoeren .zx-tag { position: absolute; z-index: 2; top: -14px; left: -10px; padding: .45em .9em; border-radius: 999px; font: 800 clamp(.85rem, 1vw, 1rem)/1 var(--zx-display); text-transform: uppercase; white-space: nowrap; rotate: -4deg; box-shadow: 0 8px 22px rgba(0, 20, 40, .2); }
.zx-hoeren .zx-tag-leise { background: #fff; color: var(--zx-ink); }
.zx-hoeren .zx-tag-laut { background: var(--zx-blue); color: #fff; rotate: 3deg; }
/* Pointe und Abschluss */
.zx-hoeren .zx-pointe { margin: 0; font: 800 clamp(1.6rem, 3vw, 3.2rem)/1.05 var(--zx-display); letter-spacing: -.01em; text-transform: uppercase; color: var(--zx-ink); }
.zx-hoeren .zx-pointe em { font-style: normal; color: var(--zx-blue); }
.zx-hoeren .zx-outro-text { margin: 0; font-size: clamp(1.2rem, 1.75vw, 1.75rem); line-height: 1.35; color: var(--zx-ink); }
@media (max-width: 639px) { .zx-hoeren .zx-druckvoll { white-space: normal; font-size: 15.2vw; } }

/* ---------- 05 · Schallplatte mit Zanadu-Etikett (dreht mit) ---------- */
.zx-repertoire .zx-vinyl-label { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 42%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--zx-blue); box-shadow: inset 0 0 0 6px var(--zx-blue-deep), inset 0 0 0 9px rgba(255, 255, 255, .5); }
.zx-repertoire .zx-vinyl-label img { position: absolute; left: 50%; top: 15%; width: 26%; height: auto; max-width: none; translate: -50% 0; filter: brightness(0) invert(1); }
.zx-repertoire .zx-vinyl-label b { position: absolute; left: 0; right: 0; top: 60%; font: 800 clamp(.9rem, 1.6vw, 1.7rem)/1 var(--zx-display); text-transform: uppercase; letter-spacing: .02em; text-align: center; color: #fff; }
.zx-repertoire .zx-vinyl-label i { position: absolute; left: 0; right: 0; top: 75%; font: 800 clamp(.5rem, .62vw, .66rem)/1 var(--zx-display); font-style: normal; text-transform: uppercase; letter-spacing: .12em; text-align: center; color: rgba(255, 255, 255, .8); }
.zx-repertoire .zx-vinyl-label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #111; }

/* =====================================================================
   Gemeinsam für alle Seiten (16.10.2026): Header-Button, Handy-Leiste
   ===================================================================== */
/* Header: „Termin anfragen“ als rote Pille vor dem Menü-Knopf (nur Desktop) */
.tm-header .zx-navcta { min-height: 0; height: 48px; margin-right: 18px; padding: 0 1.5em; border-radius: 999px; background: #F23847; color: #fff !important; font: 800 .92rem/1 Geologica, sans-serif; text-transform: uppercase; transition: transform .25s cubic-bezier(.2, .7, .2, 1), background-color .2s; }
.tm-header .zx-navcta:hover { transform: translateY(-2px); background: #1d1d1d; }
/* Handy: Telefon + Anfrage, erscheint nach dem ersten Screen */
.zx-mobilbar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 975; display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; padding: 8px; border-radius: 999px; background: #fff; box-shadow: 0 12px 34px rgba(0, 20, 40, .28); transform: translateY(140%); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.zx-bar-on .zx-mobilbar { transform: none; }
.zx-mobilbar a { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 999px; font: 800 .9rem/1 Geologica, sans-serif; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.zx-mobilbar-tel { color: #1d1d1d !important; box-shadow: inset 0 0 0 2px #1d1d1d; }
.zx-mobilbar-cta { background: #F23847; color: #fff !important; }
/* „Wunschtermin anfragen“ (3.11.) ist länger als „Termin anfragen“: auf schmalen Handys etwas kleiner, mit Innenabstand */
.zx-mobilbar a { padding: 0 10px; font-size: clamp(.78rem, 3.4vw, .9rem); }
/* unter 375 px passt er nicht in eine Zeile (320 px abgeschnitten): zweizeilig, Leiste bleibt 48 px hoch */
@media (max-width: 374px) { .zx-mobilbar a.zx-mobilbar-cta { white-space: normal; text-align: center; line-height: 1.1; } }
/* die Tagesleiste der Hochzeitsseite rückt über die Handy-Leiste */
@media (max-width: 959px) { .zx-bar-on .zh-rail { bottom: calc(80px + env(safe-area-inset-bottom)); } }
@media print { .zx-mobilbar, .tm-header .zx-navcta { display: none; } }
/* auf der roten Kontaktseite: Header-Button weiß mit roter Schrift (nie Rot auf Rot) */
.seite-kontakt .tm-header .zx-navcta { background: #fff; color: #F23847 !important; }
.seite-kontakt .tm-header .zx-navcta:hover { background: #1d1d1d; color: #fff !important; }

/* Kopf beim Scrollen (Luca 02.11.): immer durchsichtig – kein Balken, keine Linie, kein Blur. Beim Runterscrollen
   verschwindet er (uk-sticky show-on-up), beim Hochscrollen kommt er durchsichtig zurück. Logo hell/dunkel schaltet
   uk-inverse am <header> je nach Fläche darunter. Absicherung gegen Theme-Hintergrund nicht-transparenter Leisten: */
.tm-header .uk-navbar-container, .tm-header-mobile .uk-navbar-container {
  background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}