/* VMKW – Gestaltung „Edition September 2026“ (entwickelt auf Branch preview, seit 22.9.2026 Stand von main/prod).
   Additive Schicht über clone.css/parity.css. Farben bleiben Schwarz, Bordeaux, Weiß; dazu ein gedämpftes Gold als
   einziger Akzent und eine Display-Serife (Lora, OFL, lokal in public/fonts) für Überschriften und Zitate.
   Grundidee: Theaterprogramm statt Web-Baukasten – große ruhige Typografie, Linien statt Kästen, ein Hero auf volle
   Höhe, farblich einheitlich gestimmte Fotos mit feinem Korn. Regeln für Änderungen: docs/STYLEGUIDE.md. */
@font-face{font-family:Lora;src:url('/fonts/lora-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Lora;src:url('/fonts/lora-italic-latin.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
:root{--gold:#d4b06a;--gold-soft:#d4b06a99;--gold-faint:#d4b06a40;--line:#ffffff1f;--ink-soft:#ffffffcc;--ink-mute:#ffffff99;--serif:Lora,Georgia,'Times New Roman',serif;--ease:cubic-bezier(.2,.7,.2,1)}

/* ---------- Grundton ---------- */
/* html trägt Bordeaux, body Schwarz: der Bereich außerhalb der Seite (Safari-Streifen an der Statusleiste beim Laden, Überscrollen) zeigt
   dann die Kopf-/Fußfarbe statt Schwarz. Die Seite selbst bleibt schwarz, weil body einen eigenen Hintergrund hat. */
html{background:#530011}
body{background:#000;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* iPhone (Dynamic Island / Notch): der Kopf reicht bis an den Bildschirmrand, damit kein Inhalt hinter der Statusleiste vorbeiläuft.
   Voraussetzung ist viewport-fit=cover im Meta-Viewport; auf Geräten ohne Aussparung sind die env()-Werte 0. */
.header{padding-top:env(safe-area-inset-top,0px)}
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
/* Safari 26 (iOS) zeichnet die Seite zusätzlich in den Streifen zwischen Statusleiste und Viewport-Oberkante (~62 px). Der
   gehört nicht zum Viewport: env(safe-area-inset-top) ist dort 0, ein Sticky-Header bei top:0 sitzt darunter, fixierte
   Elemente werden dort nicht gemalt – nur scrollender Inhalt. Darum klebt ein bordeauxroter Block mit top:-70px oberhalb
   des Viewports und deckt den Streifen ab, solange der Kopf klebt. Nimmt keinen Platz (negativer Rand). Er darf nicht höher sein als
   der Kopf (mobil ~79 px), sonst schaut er ungescrollt unter dem Kopf hervor – das war die „doppelte Unterkante“. */
body::before{content:'';display:block;position:sticky;top:-70px;z-index:29;height:70px;margin-bottom:-70px;background:#530011}
/* Kein seitliches Verschieben auf Mobilgeräten – clip (nicht hidden), damit der Sticky-Kopf funktioniert */
@supports(overflow:clip){html,body{overflow-x:clip}}
.consent{padding-bottom:env(safe-area-inset-bottom,0px)}
/* Feines Korn über allem: nimmt dem Schwarz die digitale Glätte (Overlay, nicht klickbar) */
body::after{content:'';position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.055;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;text-wrap:balance}
h3{letter-spacing:-.01em}
p{text-wrap:pretty}
/* Einheitliche Farbstimmung aller Fotohintergründe */
.panel>.scene{filter:saturate(.72) contrast(1.06) brightness(.92)}

/* Kicker: kleine Kapitälchenzeile über Überschriften */
.home-hero h1::before,.events-intro h2::before,.review-title h2::before,.about-teaser h2::before,.event-heading h1::before,.artists h1::before,.about-intro h1::before,.ticket-hero h1::before,.contact-hero h1::before,.history-title h2::before{
 content:'Vereinigung für Magische Kunst Wien · seit 1927';display:block;margin:0 auto 22px;font:600 12px/1.7 'Open Sans',Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.home-hero h1::before{content:'Im Dienste des Staunens seit 1927'}.events-intro h2::before{content:'Zaubershow & Magic Dinner'}.review-title h2::before{content:'Stimmen unserer Gäste'}.about-teaser h2::before{content:'Der Verein'}.event-heading h1::before{content:'Schönbrunner Stöckl · Wien'}.artists h1::before{content:'Unsere Künstler'}.ticket-hero h1::before{content:'Karten'}.contact-hero h1::before{content:'So erreichen Sie uns'}.history-title h2::before{content:'Seit 1927'}

/* ---------- Kopf: leise, präzise ---------- */
/* Der Vereinsname steht neben der Bildmarke (span.logo-text im Markup); die frühere schwarze Kopfzeile gibt es nicht mehr */
.logo{display:flex;align-items:center;gap:18px;color:#fff;text-decoration:none}
.logo-text{padding-left:18px;border-left:1px solid var(--gold-faint);font:600 11px/1.7 'Open Sans',Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.header{background:linear-gradient(180deg,#5a0013,#530011);box-shadow:0 12px 40px #00000059;transition:box-shadow .3s var(--ease),background .3s}
.header nav a:not(.light-button){position:relative;padding:8px 0;font:600 13px/1 'Open Sans',Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.header nav a:not(.light-button)::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.header nav a:not(.light-button):hover::after,.header nav a:not(.light-button):focus-visible::after,.header nav a.is-active::after{transform:scaleX(1)}
.header nav a.is-active{color:var(--gold)}
@media(min-width:769px){
 /* Beim Scrollen wird nur die Zeile flacher; das Logo behält seine Größe (eine animierte Breite ließ Chrome die SVG unscharf zwischenspeichern) */
 .header-inner{gap:64px;transition:min-height .3s var(--ease)}
 html.vmkw-scrolled .header-inner{min-height:104px}
 html.vmkw-scrolled .header{background:#530011}
}
@media(min-width:769px) and (max-width:1199px){.logo-text{display:none}}

/* ---------- Buttons: ein System, zwei Stufen ----------
   Primär (gold gefüllt, dunkle Schrift): .light-button, .vmkw-event-action – bestellen, absenden, zustimmen.
   Sekundär (goldene Kontur): .ghost-button, .consent-secondary, .contact-action, Lightbox-Schalter, „ausverkauft“-Status.
   Beide: gesperrte Versalien, 4 px Radius, 48 px Höhe, derselbe Hover (1 px heben, Ton heller). */
.light-button,.ghost-button,.vmkw-event-action,.vmkw-event-status,.consent-secondary,.contact-addresses .contact-action,.lightbox .lb-nav button,.lightbox form>button,.inquiry>.light-button,.about-teaser .light-button,.consent .light-button{
 display:inline-flex;justify-content:center;align-items:center;gap:8px;box-sizing:border-box;min-height:48px;padding:12px 26px;border-radius:4px;border:1px solid transparent;
 font:700 12px/1.3 Manrope,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;text-decoration:none;cursor:pointer;
 transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s,border-color .2s,color .2s}
.light-button,.vmkw-event-action,.consent .light-button,.inquiry>.light-button,.about-teaser .light-button{background:var(--gold);color:#1a0005;border-color:var(--gold);box-shadow:0 1px 2px #00000040,0 10px 30px #d4b06a2e}
.light-button:hover,.light-button:focus-visible,a.vmkw-event-action:hover,a.vmkw-event-action:focus-visible,.consent .light-button:hover,.inquiry>.light-button:hover{background:#e3c684;border-color:#e3c684;color:#1a0005;transform:translateY(-1px);box-shadow:0 2px 4px #00000040,0 16px 40px #d4b06a4d}
.ghost-button,.consent-secondary,.contact-addresses .contact-action,.lightbox .lb-nav button,.lightbox form>button,.vmkw-event--unavailable .vmkw-event-action,.vmkw-event-status{background:transparent;color:#fff;border-color:var(--gold-soft);box-shadow:none}
.ghost-button:hover,.ghost-button:focus-visible,.consent-secondary:hover,.consent-secondary:focus-visible,.contact-addresses .contact-action:hover,.lightbox .lb-nav button:hover,.lightbox form>button:hover{background:#d4b06a1a;border-color:var(--gold);color:#fff;transform:translateY(-1px)}
.light-button:active,.ghost-button:active,a.vmkw-event-action:active{transform:translateY(0)}
.vmkw-event-status{cursor:default;color:var(--ink-soft)}
/* Kopf: TICKETS gold gefüllt mit Pfeil; bei Hover deutlich: hellt zu Creme auf, Pfeil rückt vor, Goldschein */
.header .light-button{padding:6px 22px;min-width:0;min-height:44px;gap:10px;box-shadow:0 1px 2px #00000040}
.header .light-button::after{content:'→';font-size:15px;line-height:1;transition:transform .25s var(--ease)}
.header .light-button:hover,.header .light-button:focus-visible{background:#fff3d6;border-color:#fff3d6;color:#530011;transform:translateY(-1px);box-shadow:0 2px 4px #00000040,0 12px 32px #d4b06a66}
.header .light-button:hover::after,.header .light-button:focus-visible::after{transform:translateX(4px)}
/* Formular: gleiches Maß wie alle anderen, volle Breite */
.inquiry>.light-button{width:100%;min-height:52px}
.event-cta .light-button,.join .light-button,.events-intro>.wrap>.light-button,.not-found>.wrap>.light-button{min-height:52px}
.map-placeholder .light-button{background:#530011;color:#fff;border-color:#530011}

/* ---------- Startseite: Hero auf volle Höhe, Text links, Termine rechts ---------- */
.home-hero{display:grid;align-items:center;min-height:calc(100svh - 160px);padding:64px 0 40px;text-align:center}
.home-hero:has(>.scene):after{background:linear-gradient(180deg,#530011 0%,#530011cc 22%,#2b0009b3 60%,#000 100%)}
.home-hero .scene{object-position:center 40%}
.home-hero h1{font-size:clamp(40px,4.6vw,64px);line-height:1.04;font-weight:500;margin:0 auto 28px;max-width:18ch}
.home-hero .intro{font-size:19px;line-height:1.65;color:var(--ink-soft);max-width:640px;margin:0 auto}
.home-hero .intro p{text-wrap:pretty}
.dates-title{margin:72px auto 24px;font:600 12px/1.6 'Open Sans',Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.dates-title::after{content:'';display:block;width:40px;height:1px;margin:14px auto 0;background:var(--gold-soft)}
/* Der weiße Ticket-Button entfällt: jede Karte führt zum Formular, die Telefonbestellung steht dort oben. */
.home-hero>.wrap>.light-button{display:none}
.vmkw-event-cards{max-width:1000px;gap:12px}
.vmkw-event--featured{padding:30px 34px}
/* Terminkarten: Glas, Goldkante an der Hauptkarte */
.vmkw-event{border-radius:6px;background:#ffffff14;border-color:#ffffff29;backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);box-shadow:0 20px 50px #0000004d,inset 0 1px 0 #ffffff1f;transition:transform .25s var(--ease),background .2s,box-shadow .25s var(--ease),border-color .2s}
a.vmkw-event:hover,a.vmkw-event:focus-visible{background:#ffffff24;transform:translateY(-2px);border-color:#ffffff4d}
.vmkw-event--featured{background:linear-gradient(160deg,#6a001b,#3a000c);border:1px solid var(--gold-soft);box-shadow:0 30px 70px #00000073,inset 0 1px 0 #ffffff1f}
a.vmkw-event--featured:hover,a.vmkw-event--featured:focus-visible{background:linear-gradient(160deg,#75001e,#42000e);border-color:var(--gold)}
.vmkw-featured-copy small{color:var(--gold);letter-spacing:.24em;font-size:11px}
.vmkw-featured-copy time{font:500 40px/1.05 var(--serif);letter-spacing:-.01em}
.vmkw-featured-copy>span{color:var(--ink-soft)}
.vmkw-featured-location{color:var(--gold);font-weight:600}
.vmkw-featured-action,.vmkw-compact-action{font:700 12px/1 Manrope,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.vmkw-date-inline{font:500 20px/1.15 var(--serif)}
.vmkw-date-inline>span{font:600 11px/1.6 'Open Sans',Arial,sans-serif;letter-spacing:.18em;color:var(--gold)}

/* ---------- Partnerlogos: monochrom, leise ---------- */
/* Partnerlogos direkt unter den Terminkarten, ohne großen Abstand */
.partner-panel{padding:0 0 64px;background:#000}
.partners img{filter:grayscale(1) brightness(1.5);opacity:.7;transition:filter .3s,opacity .3s}
.partners>a:hover img{filter:none;opacity:1}

/* ---------- Abschnitte: Serifen-Titel, Haarlinien, Luft ---------- */
.events-intro,.review-title{position:relative}
.events-intro::before{content:'';position:absolute;left:50%;top:0;width:min(560px,80%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--gold-soft),transparent)}
.events-intro{padding:104px 0 64px}
.events-intro h2,.review-title h2,.about-teaser h2{font-size:clamp(34px,3.4vw,50px);line-height:1.08}
.events-intro>.wrap>p{font-size:19px;line-height:1.65;color:var(--ink-soft);max-width:760px}
.about-teaser .scene{filter:saturate(.7) brightness(.9)}
.about-teaser p{color:var(--ink-soft);font-size:19px;line-height:1.65}
.cinema h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:30px;letter-spacing:0}
.video{border-radius:6px;overflow:hidden;box-shadow:0 30px 80px #00000080;background:#000;isolation:isolate}
/* Der Vimeo-Player rundet bei Bruchpixel-Breiten und zeigt am Rand 1 px seines weißen Dokuments: ihn 1 px überlappen lassen und beschneiden */
.video iframe{display:block;width:calc(100% + 2px);height:calc(100% + 2px);margin:-1px;background:#000}

/* Fotoleiste */
.photo{border-radius:6px;overflow:hidden}
.photo img{transition:transform .8s var(--ease)}
.photo:hover img{transform:scale(1.04)}

/* ---------- Gästestimmen: Zitate als Typografie, Linien statt Kästen ---------- */
.review-title{padding-top:96px}
.review-panel{padding:40px 0 104px}
.reviews{gap:24px}
.review-panel{background:radial-gradient(70% 70% at 50% 0%,#33000b 0%,#000 75%)}
.reviews blockquote{border:1px solid #ffffff2e;border-radius:8px;padding:34px 32px 30px;background:linear-gradient(180deg,#ffffff1f,#ffffff0a);box-shadow:0 24px 60px #00000066,inset 0 1px 0 #ffffff1a;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .25s,transform .25s var(--ease)}
.reviews blockquote:hover{border-color:var(--gold-soft);transform:translateY(-2px)}
.reviews blockquote p{font:italic 400 21px/1.5 var(--serif);color:#fff;letter-spacing:0}
.stars{color:var(--gold);letter-spacing:4px;font-size:12px;margin-bottom:22px}
.review-person{margin-top:28px}
.review-photo{width:56px;height:56px;box-shadow:0 0 0 2px #000,0 0 0 3px var(--gold-soft)}
.reviews cite{font:600 12px/1.6 'Open Sans',Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- Anfahrt: Weißer Block als Karte, Google Maps in warmem Papierton (Stil in maps.js) ---------- */
.venue{padding:72px 0 64px;background:radial-gradient(60% 50% at 50% 100%,#2a0008,#000 70%)}
.venue p{white-space:normal}
.venue .wrap{border-radius:10px;box-shadow:0 40px 100px #00000080;overflow:hidden}
.venue-copy h2{font-family:var(--serif);font-weight:500;font-size:34px;line-height:1.15;margin-bottom:22px}
.venue-copy h2::before{content:'Anfahrt';display:block;margin-bottom:18px;font:600 12px/1.6 'Open Sans',Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#8a1a30}
.venue-address{font-weight:600;color:#191919}
.transport>span{background:#530011;border-radius:3px}
.map{filter:saturate(.95);min-height:620px}
@media(max-width:768px){.map{height:400px;min-height:400px}}
.google-venue-pin{width:22px;height:22px;border:2px solid #fff;background:#530011;box-shadow:0 0 0 3px var(--gold-soft),0 0 0 12px #53001122,0 6px 18px #00000059;animation:vmkw-pin 2.4s var(--ease) infinite}
@keyframes vmkw-pin{0%,100%{box-shadow:0 0 0 3px var(--gold-soft),0 0 0 10px #53001122,0 6px 18px #00000059}50%{box-shadow:0 0 0 3px var(--gold),0 0 0 18px #53001100,0 6px 18px #00000059}}
.gm-style .gm-style-iw-c{border-radius:6px;padding:14px 18px!important;font-family:'Open Sans',Arial,sans-serif}
.gm-style .gm-style-iw-d{overflow:hidden!important}
@media(prefers-reduced-motion:reduce){.google-venue-pin{animation:none}}

/* ---------- Fuß ---------- */
.footer{background:linear-gradient(180deg,#530011,#2a0008);border-top:1px solid var(--gold-faint)}
.footer img{width:120px}
.footer p{font:600 12px/1.6 'Open Sans',Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:18px 0 0}
.footer nav{margin-top:40px}
.footer nav{font-weight:600;letter-spacing:.06em}
.footer nav a{text-decoration-color:transparent;transition:text-decoration-color .2s}
.footer nav a:hover{text-decoration-color:var(--gold)}

/* ---------- Veranstaltungen ---------- */
.event-heading{background:linear-gradient(180deg,#5a0013,#530011);padding-top:88px}
.event-heading h1{font-size:clamp(36px,4.2vw,58px)}
.event-hero:has(>.scene):after{background:linear-gradient(180deg,#530011,#4a000fd9 35%,#0b0002 100%)}
.event-hero h2{font-family:var(--serif);font-weight:500;font-size:32px;text-align:center;margin-bottom:28px}
.event-hero .order-phone{display:flex;margin:0 auto 40px;width:max-content;max-width:100%}
.vmkw-event-list{gap:12px;max-width:1000px}
.vmkw-event--list{background:linear-gradient(180deg,#ffffff0f,#ffffff06);border:1px solid var(--line);border-radius:8px;padding:26px 30px;box-shadow:0 16px 40px #00000040;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .25s,background .25s}
.vmkw-event--list:hover{border-color:var(--gold-soft);background:linear-gradient(180deg,#ffffff16,#ffffff08)}
.vmkw-calendar{background:none;color:#fff;min-width:112px;padding:2px 26px 2px 0;border-right:1px solid var(--line);border-radius:0;box-shadow:none;text-align:left}
.vmkw-calendar strong{font:500 48px/1 var(--serif);letter-spacing:-.02em}
.vmkw-calendar span{color:var(--gold);letter-spacing:.2em;font-size:11px}
.vmkw-event-copy strong{font:500 26px/1.2 var(--serif);letter-spacing:-.01em}
.vmkw-event-copy>span{color:var(--ink-soft)}
.vmkw-event-copy small{color:var(--ink-mute)}
.vmkw-event-actions{min-width:260px}
.vmkw-event-action{box-shadow:0 6px 18px #d4b06a1f}
.vmkw-event-status{border-color:#ffffff40}
.event-description{margin-top:72px}
.event-description p{color:var(--ink-soft);font-size:17px;line-height:1.7;max-width:800px;margin-left:auto;margin-right:auto}

/* Terminseite */
.event-kicker{color:var(--gold);letter-spacing:.24em;font-size:12px;font-weight:600}
.event-detail h1{font-size:clamp(36px,4.4vw,60px);line-height:1.04}
.event-lead{font:500 26px/1.3 var(--serif);color:#fff}
.event-place{color:var(--ink-mute)}
.event-cover{box-shadow:0 30px 80px #00000080;border-radius:8px;filter:saturate(.85)}
.event-body p{font-size:18px;line-height:1.7;color:var(--ink-soft)}
.event-cta{background:linear-gradient(160deg,#6a001b,#3a000c);border:1px solid var(--gold-soft);border-radius:8px;box-shadow:0 30px 70px #00000073}
.event-cta .event-status{color:var(--gold)}
.event-cta .event-price{font-family:var(--serif);font-weight:500}
.event-detail h2{font-size:34px}
.event-notice{border-color:var(--gold-faint);background:#ffffff0a}

/* ---------- Künstler ---------- */
.artists{background:radial-gradient(70% 45% at 50% 0%,#3d000d 0%,#000 70%)}
.artists h1{font-size:clamp(36px,4.4vw,60px)}
.artists>.wrap>p{color:var(--ink-soft);font-size:19px;line-height:1.65}
/* Künstlerkarten: die Originalfotos (mit Vorhang und Rauch) in Farbe, dazu Goldkante und sanfter Zoom bei Hover/Fokus
   (auf Touch-Geräten übernimmt die Karte in der Bildmitte den Hover, siehe polish.js). */
.artist{border:1px solid var(--gold-faint);background:#000;border-radius:8px;box-shadow:0 20px 50px #00000059;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.artist:hover,.artist.is-lit,html.vmkw-motion .artist.is-in:hover,html.vmkw-motion .artist.is-in.is-lit{transform:translateY(-4px);box-shadow:0 30px 70px #00000080,0 0 0 1px var(--gold-soft);border-color:var(--gold)}
.portrait{background:#000}
.portrait-image{filter:saturate(.92);transition:transform .9s var(--ease),filter .5s;transform-origin:var(--x,50%) var(--y,20%)}
.artist:hover .portrait-image,.artist:focus-within .portrait-image,.artist.is-lit .portrait-image{transform:scale(1.06);filter:saturate(1)}
.caption{position:relative;text-align:center;padding:14px 16px 24px;min-height:0;background:linear-gradient(180deg,#1a0005,#000)}
.vmkw-magicians-grid{grid-auto-rows:auto}
.caption h2{text-wrap:balance}
.caption h2{font:500 21px/1.25 var(--serif)}
.caption p{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:6px;min-height:20px}
.caption .stage{font:italic 400 16px/1.3 var(--serif);color:var(--ink-soft);letter-spacing:0}
.caption .role{color:var(--gold);font:600 11px/1.5 'Open Sans',Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}

/* ---------- Über uns ---------- */
.about-hero:has(>.scene):after{background:linear-gradient(180deg,#00000080 0%,#000000b3 40%,#000 100%)}
.about-hero .scene{filter:saturate(.7) brightness(.85)}
.about-intro{text-shadow:0 1px 3px #000000cc,0 2px 24px #000000b3}
/* Der Vereinsname steht schon im Kopf; der Kicker auf dem Foto wird kurz, hell und mit Schatten gesetzt */
.about-intro h1::before{content:'Der Verein · seit 1927';text-shadow:0 1px 2px #000,0 2px 16px #000000cc}
.about-intro h1{font-size:clamp(40px,5vw,64px)}
.about-intro p{color:var(--ink-soft);font-size:19px;line-height:1.65}
.split h2,.join h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3vw,40px)}
.split img{box-shadow:0 30px 80px #00000073;border-radius:8px}
.join>.scene{display:none}
.join{background:radial-gradient(120% 90% at 20% 0%,#6a001b 0%,#530011 45%,#33000b 100%)}
.join:has(>.scene):after{background:none}
.join .split>img{border-radius:0;box-shadow:none;-webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 55%,transparent 100%);filter:saturate(.85) contrast(1.05)}
.history-title h2{font-size:clamp(36px,4.4vw,56px)}
.vmkw-timeline h3{font:500 32px/1.2 var(--serif)}
.vmkw-timeline li:before{background:#530011;border-color:var(--gold-soft);outline-color:transparent;transition:background .4s,border-color .4s}
.vmkw-timeline li.is-lit:before{background:var(--gold);border-color:#530011}
.vmkw-timeline:before{background:#ffffff26}
.vmkw-timeline:after{content:'';position:absolute;top:8px;left:50%;width:2px;height:var(--progress,0%);transform:translateX(-1px);background:linear-gradient(180deg,var(--gold-soft),var(--gold));transition:height .2s linear}
.vmkw-timeline li{scroll-margin-top:140px}
.vmkw-timeline li:before{top:12px;box-sizing:border-box;width:16px;height:16px}
.vmkw-timeline-images img{width:auto;max-width:100%;max-height:240px;border-radius:6px}
.vmkw-timeline-images img[src$='.png'],.vmkw-timeline-images img[src$='.svg']{max-height:96px;border-radius:0}
.vmkw-timeline h3{color:var(--gold)}
.vmkw-timeline p{color:var(--ink-soft)}
@media(max-width:768px){.vmkw-timeline:after{left:8px}}

/* ---------- Karten, Kontakt, Formulare ---------- */
.ticket-hero h1,.contact-hero h1{font-size:clamp(36px,4.4vw,60px)}
.ticket-hero{padding:88px 0 104px}
.ticket-hero:has(>.scene):after,.contact-hero:has(>.scene):after{background:linear-gradient(180deg,#530011 0%,#4a000fe6 35%,#1a0005f2 100%)}
.ticket-hero .wrap{max-width:780px}
.ticket-hero h1{margin-bottom:28px}
.ticket-hero p{font-size:17px;line-height:1.7;color:var(--ink-soft);max-width:680px;margin-left:auto;margin-right:auto}
.ticket-hero p+p{margin-top:14px}
.ticket-hero p a{color:#fff;text-decoration-color:var(--gold-soft);text-underline-offset:4px}
.ticket-hero .order-phone{margin-top:40px;background:#00000059}
.order-phone{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px;margin:36px auto 0;padding:18px 28px;border:1px solid var(--gold-soft);border-radius:8px;background:#00000040;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.order-phone>span{font:600 12px/1.6 'Open Sans',Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.order-phone .vmkw-phone{font:500 26px/1.1 var(--serif);color:#fff;text-decoration:none;letter-spacing:.01em}
.order-phone .vmkw-phone:hover{text-decoration:underline;text-decoration-color:var(--gold-soft);text-underline-offset:6px}
.form-panel{padding:72px 0 104px}
.form-panel .wrap{background:#00000033;border:1px solid var(--line);border-radius:10px;padding:52px 56px 48px;box-shadow:0 30px 80px #00000059}
.form-panel>.wrap>p{font-size:17px;line-height:1.7;color:var(--ink-soft);margin:0 0 14px}
.form-panel>.wrap>p+p{margin-top:0}
.form-panel>.wrap>p a{color:#fff;text-decoration-color:var(--gold-soft);text-underline-offset:4px}
.form-panel p+h2{margin:36px 0 8px;padding-top:32px;border-top:1px solid var(--line)}
.form-panel .wrap>h2:first-child{margin:0 0 18px}
.form-panel .inquiry{margin-top:8px}
@media(max-width:768px){.form-panel .wrap{padding:32px 20px 28px;width:calc(100% - 32px)}.order-phone{width:100%;padding:16px 18px}.order-phone .vmkw-phone{font-size:22px}}
.ticket-hero p,.contact-hero p{color:var(--ink-soft);font-size:18px;line-height:1.7}
.contact-hero{padding-bottom:96px}
.contact-addresses{grid-template-columns:1fr 1fr;gap:0;max-width:860px;margin:48px auto 0;border:1px solid var(--line);border-radius:10px;background:#00000059;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 30px 80px #00000066;overflow:hidden;text-align:left}
.contact-addresses>div{padding:30px 34px}
.contact-addresses>div+div{border-left:1px solid var(--line)}
.contact-addresses h3{margin:0 0 14px;font:600 12px/1.6 'Open Sans',Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.contact-addresses p{font:400 17px/1.6 'Open Sans',Arial,sans-serif;color:#fff;white-space:pre-line}
.contact-addresses .contact-action{margin-top:18px;min-height:44px;padding:10px 18px}
.contact-addresses .vmkw-phone{display:inline-block;margin-top:6px;font:inherit;color:#fff;text-decoration:none;border-bottom:1px solid var(--gold-soft);padding-bottom:1px}
.contact-addresses .vmkw-phone:hover{color:#fff;border-color:var(--gold)}
@media(max-width:768px){.contact-addresses{grid-template-columns:1fr}.contact-addresses>div+div{border-left:0;border-top:1px solid var(--line)}.contact-addresses>div{padding:24px 22px}.contact-addresses p{font-size:18px}}
/* Fotoleiste im Vollbild: Blättern */
.lightbox{padding:0;background:#0b0002;border-radius:8px;overflow:visible}
.lightbox img{max-height:82vh;max-width:92vw;border-radius:8px 8px 0 0}
.lightbox form{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;background:#0b0002}
.lightbox .lb-nav{display:flex;gap:8px}
.lightbox .lb-nav button,.lightbox form>button{min-height:44px;padding:10px 18px}
.lightbox .lb-count{font:600 12px/1.6 'Open Sans',Arial,sans-serif;letter-spacing:.14em;color:var(--ink-mute)}
.lightbox .lb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid #ffffff59;background:#000000a6;color:#fff;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s}
.lightbox .lb-arrow{border-color:var(--gold-soft)}.lightbox .lb-arrow:hover{background:#d4b06a1a;border-color:var(--gold)}
.lightbox .lb-prev{left:-70px}.lightbox .lb-next{right:-70px}
@media(max-width:900px){.lightbox .lb-prev{left:10px}.lightbox .lb-next{right:10px}.lightbox .lb-arrow{background:#000000cc}}
.form-panel{background:linear-gradient(180deg,#530011,#3a000c)}
.form-panel h2{font-size:clamp(32px,3.6vw,46px)}
.inquiry>label{font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-size:15px;letter-spacing:.02em;color:var(--ink-soft)}
.inquiry input,.inquiry select,.inquiry textarea{border-radius:4px;transition:background .2s,box-shadow .2s}
.inquiry input:focus,.inquiry select:focus,.inquiry textarea:focus{background:#ffffff1f;box-shadow:inset 0 0 0 1px var(--gold-soft)}
.form-status:not(:empty){border-left:2px solid var(--gold)}
.legal h1{font-size:clamp(34px,4vw,52px)}
.not-found h1{font-family:var(--serif)}.not-found .not-found-code{color:var(--gold-faint);font-family:var(--serif)}

/* ---------- Einblenden beim Scrollen ---------- */
html.vmkw-motion .vmkw-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:var(--d,0ms)}
html.vmkw-motion .vmkw-reveal.is-in{opacity:1;transform:none}
html.vmkw-motion .home-hero .scene{transform:translateY(var(--parallax,0px)) scale(1.08);transition:none;will-change:transform}
@media(prefers-reduced-motion:reduce){
 html.vmkw-motion .vmkw-reveal{opacity:1;transform:none;transition:none}
 .light-button,.ghost-button,.vmkw-event,.artist,.photo img,.portrait-image,.vmkw-event--list{transition:none}
}

/* ---------- Mobil ---------- */
@media(max-width:768px){
 .menu{background:transparent;border:1px solid var(--gold-soft);border-radius:4px;width:52px;height:52px;gap:7px;transition:border-color .2s,background .2s}
 .menu span{background:var(--gold);width:22px;height:1.5px;transition:transform .3s var(--ease),opacity .2s}
 .menu[aria-expanded=true]{border-color:var(--gold);background:#d4b06a14}
 .menu[aria-expanded=true] span:first-child{transform:translateY(4.25px) rotate(45deg)}
 .menu[aria-expanded=true] span:last-child{transform:translateY(-4.25px) rotate(-45deg)}
 /* Kopf kompakt: keine schwarze Zeile, kein Luftraum über dem Logo, die Zeile bleibt beim Scrollen geschlossen */
 .header{background:#530011;top:0}
 .header-inner{min-height:0;padding:14px 0 18px}
 .logo{gap:12px}.logo img{width:104px}
 .logo-text{padding-left:12px;font-size:10px;letter-spacing:.12em}
 @media(max-width:359px){.logo-text{display:none}}
 .header nav.open{margin-top:14px;padding:8px 0 24px;border-top:1px solid var(--line)}
 .header nav>a:not(.light-button){padding:16px 4px;border-bottom:1px solid #ffffff14;font-size:15px;letter-spacing:.14em;display:flex;justify-content:space-between;align-items:center}
 .header nav>a:not(.light-button)::before{content:'';display:none}
 .header nav>a:not(.light-button)::after{position:static;content:'→';width:auto;height:auto;background:none;transform:none;font-size:14px;color:var(--gold-soft)}
 .header nav>a.is-active::after{color:var(--gold)}
 .header nav .light-button{margin:18px 0 0;min-height:52px;justify-content:center}
 .home-hero{min-height:0;padding:40px 0 28px}
 .home-hero h1{font-size:36px;line-height:1.06}
 .home-hero .intro{font-size:17px}
 .home-hero>.wrap>.light-button{width:100%;justify-self:stretch}
 .dates-title{margin-top:48px}
 .events-intro{padding:72px 0 48px}.review-title{padding-top:72px}.review-panel{padding:24px 0 72px}
 .events-intro h2,.review-title h2,.about-teaser h2{font-size:32px}
 .events-intro>.wrap>p,.about-teaser p,.artists>.wrap>p,.about-intro p{font-size:17px}
 .home-hero h1::before,.events-intro h2::before,.review-title h2::before,.about-teaser h2::before,.event-heading h1::before,.artists h1::before,.about-intro h1::before,.ticket-hero h1::before,.contact-hero h1::before,.history-title h2::before{font-size:11px;line-height:1.8;letter-spacing:.16em;margin-bottom:16px}
 /* Über uns: Kicker liegt auf dem Foto – hellerer Ton, kräftiger Schatten */
 .about-intro h1::before{text-shadow:0 1px 3px #000,0 2px 18px #000}
 /* Fotoleiste: kleinere Bilder, damit mehrere auf einmal zu sehen sind */
 .photo-strip{gap:8px;margin-top:28px;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
 .photo{height:132px}
 .vmkw-event--list{padding:24px 0}
 .vmkw-calendar{display:none}
 .vmkw-event-copy strong{font-size:22px}
 .vmkw-event,.artist{box-shadow:0 12px 30px #00000059}
 .vmkw-magicians-grid{grid-template-columns:1fr 1fr;gap:12px;margin:40px 0 0}
 .caption{padding:2px 10px 18px}.caption h2{font-size:17px}.caption .stage{font-size:14px}.caption .role{font-size:10px;letter-spacing:.14em}
 .vmkw-event-cards{gap:10px}
 .vmkw-event--featured{padding:22px 20px}
 .vmkw-featured-copy time{font-size:28px;white-space:normal}
 .vmkw-featured-copy>span,.vmkw-featured-location{font-size:15px}
 .vmkw-event:not(.vmkw-event--featured){flex-direction:column;align-items:flex-start;gap:10px;padding:16px 14px}
 .vmkw-date-inline{font-size:18px}
 .vmkw-compact-action{align-self:flex-end}
 .footer nav{flex-wrap:wrap;justify-content:center;row-gap:4px;margin-top:32px}
 .footer p{margin-top:14px}
 .footer img{width:104px}
 .contact-hero{padding-bottom:64px}
 .venue{padding:56px 0 64px}
 html.vmkw-motion .home-hero .scene{transform:none}
}

/* ---------- Cookie-Hinweis: dunkles Glas mit Goldkante ---------- */
.consent{background:#0b0002f0;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--gold-soft);box-shadow:0 -20px 60px #00000099}
.consent h2{font:500 22px/1.2 var(--serif);letter-spacing:0}
.consent h2::before{content:'Datenschutz';display:block;margin-bottom:8px;font:600 11px/1.6 'Open Sans',Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.consent p{color:var(--ink-soft)}
.consent p a{text-decoration-color:var(--gold-soft);text-underline-offset:4px}
.consent p a:hover{text-decoration-color:var(--gold)}