/* ============================================================
19. Bonner Weihnachtscircus — Design-System "Abendvorstellung"
Nachtblau (Zelt bei Nacht) · Samtrot · gealtertes Gold · Programmheft-Creme
Display: Bodoni Moda · Text: Alegreya Sans (beide selbst gehostet)
============================================================ */
/* ---------- Fonts ---------- */
@font-face {
font-family: "Bodoni Moda"; font-style: normal; font-weight: 700; font-display: swap;
src: url("../fonts/bodoni-moda-v28-latin-700.woff2") format("woff2");
}
@font-face {
font-family: "Bodoni Moda"; font-style: normal; font-weight: 900; font-display: swap;
src: url("../fonts/bodoni-moda-v28-latin-900.woff2") format("woff2");
}
@font-face {
font-family: "Bodoni Moda"; font-style: italic; font-weight: 400; font-display: swap;
src: url("../fonts/bodoni-moda-v28-latin-italic.woff2") format("woff2");
}
@font-face {
font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap;
src: url("../fonts/alegreya-sans-v28-latin-regular.woff2") format("woff2");
}
@font-face {
font-family: "Alegreya Sans"; font-style: normal; font-weight: 500; font-display: swap;
src: url("../fonts/alegreya-sans-v28-latin-500.woff2") format("woff2");
}
@font-face {
font-family: "Alegreya Sans"; font-style: normal; font-weight: 700; font-display: swap;
src: url("../fonts/alegreya-sans-v28-latin-700.woff2") format("woff2");
}
/* ---------- Tokens ---------- */
:root {
--nacht: #131022;
--nacht-2: #1b1730;
--nacht-3: #241e3e;
--samt: #8e1f2f;
--samt-tief: #5a141f;
--gold: #d2a84b;
--gold-hell: #f0ce7e;
--creme: #f5edda;
--creme-tief: #eadfc4;
--tinte: #2b2135;
--tinte-60: rgba(43, 33, 53, .68);
--weiss-85: rgba(245, 237, 218, .85);
--weiss-60: rgba(245, 237, 218, .72);
--linie-gold: rgba(210, 168, 75, .45);
--display: "Bodoni Moda", "Didot", Georgia, serif;
--text: "Alegreya Sans", "Avenir Next", system-ui, sans-serif;
--w-inhalt: 1120px;
--w-schmal: 760px;
--radius: 10px;
--schatten: 0 18px 50px rgba(0, 0, 0, .35);
}
/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
margin: 0;
font-family: var(--text);
font-size: 1.0625rem;
line-height: 1.65;
color: var(--weiss-85);
background: var(--nacht);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-hell); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold-hell); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; line-height: 1.08; margin: 0 0 .5em; color: var(--creme); }
h1 { font-size: clamp(2.4rem, 6.5vw, 4.6rem); letter-spacing: .01em; }
h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 700; }
p { margin: 0 0 1em; }
.inhalt { max-width: var(--w-inhalt); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.schmal { max-width: var(--w-schmal); }
/* Eyebrow: kleine Programmzeile über Überschriften */
.zeile {
display: inline-flex; align-items: center; gap: .7rem;
font-weight: 700; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
color: var(--gold);
margin-bottom: 1rem;
}
.zeile::before, .zeile.mittig::after { content: ""; width: 2.2rem; height: 1px; background: var(--linie-gold); }
/* ---------- Skip-Link ---------- */
.skip { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--nacht); padding: .6rem 1rem; z-index: 100; font-weight: 700; }
.skip:focus { left: .5rem; top: .5rem; }
/* ---------- Navigation ---------- */
.nav {
position: sticky; top: 0; z-index: 50;
background: rgba(19, 16, 34, .92);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(210, 168, 75, .22);
}
.nav-innen {
max-width: var(--w-inhalt); margin-inline: auto;
padding: .55rem clamp(1.1rem, 4vw, 2rem);
display: flex; align-items: center; gap: 1.2rem;
}
.nav-marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.nav-marke img { height: 46px; width: auto; }
.nav-marke span {
font-family: var(--display); font-weight: 700; color: var(--creme);
font-size: 1.05rem; line-height: 1.15; letter-spacing: .02em;
}
.nav-links { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
display: block; padding: .55rem .75rem; text-decoration: none;
color: var(--weiss-85); font-weight: 500; font-size: .98rem; border-radius: 6px;
}
.nav-links a:hover { color: var(--gold-hell); }
.nav-links a[aria-current="page"] { color: var(--gold-hell); }
.nav-links a.knopf-gold { margin-left: .5rem; }
.nav-toggle {
display: none; background: none; border: 1px solid var(--linie-gold); border-radius: 8px;
color: var(--creme); padding: .45rem .7rem; font: inherit; cursor: pointer;
}
@media (max-width: 900px) {
.nav-toggle { display: block; margin-left: auto; }
.nav-marke { margin-right: 0; }
.nav-innen { flex-wrap: wrap; }
.nav-links {
display: none; width: 100%; flex-direction: column; align-items: stretch;
padding: .6rem 0 1rem; gap: .1rem;
}
.nav-links.offen { display: flex; }
.nav-links a { padding: .7rem .4rem; font-size: 1.05rem; }
.nav-links a.knopf-gold { margin: .6rem 0 0; text-align: center; }
}
/* ---------- Knöpfe ---------- */
.knopf-gold, .knopf-rand {
display: inline-block; text-decoration: none; font-weight: 700; font-size: 1rem;
padding: .85rem 1.7rem; border-radius: 999px; letter-spacing: .02em;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.knopf-gold {
background: linear-gradient(160deg, var(--gold-hell), var(--gold) 60%);
color: #35240a;
box-shadow: 0 6px 22px rgba(210, 168, 75, .35);
}
.knopf-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(210, 168, 75, .45); }
.knopf-rand { border: 1.5px solid var(--linie-gold); color: var(--creme); }
.knopf-rand:hover { border-color: var(--gold-hell); color: var(--gold-hell); }
.nav .knopf-gold { padding: .55rem 1.2rem; font-size: .95rem; }
/* ---------- Hero ---------- */
.held {
position: relative; overflow: hidden;
text-align: center;
padding: clamp(3.5rem, 9vh, 6.5rem) 0 clamp(3rem, 8vh, 5.5rem);
background:
radial-gradient(ellipse 60% 48% at 50% -6%, rgba(240, 206, 126, .32), transparent 62%),
radial-gradient(ellipse 90% 60% at 50% 118%, rgba(142, 31, 47, .38), transparent 70%),
linear-gradient(180deg, #0e0b1c 0%, var(--nacht) 45%, #170f26 100%);
}
/* Spotlight-Kegel */
.held::before, .held::after {
content: ""; position: absolute; top: -12%; height: 130%; width: 34%;
background: linear-gradient(190deg, rgba(240, 206, 126, .14), transparent 68%);
pointer-events: none;
}
.held::before { left: -4%; transform: skewX(14deg); }
.held::after { right: -4%; transform: skewX(-14deg); background: linear-gradient(170deg, rgba(240, 206, 126, .14), transparent 68%); }
.held-logo { width: min(520px, 78vw); margin: 0 auto 1.6rem; filter: drop-shadow(0 14px 40px rgba(0,0,0,.55)); }
.held .zeile { justify-content: center; }
.held-datum {
font-family: var(--display); font-weight: 700; font-style: normal;
color: var(--gold-hell); font-size: clamp(1.2rem, 2.6vw, 1.7rem);
margin: .2rem 0 .4rem;
}
/* Die Zeile steht auf dem Kopfbild, nicht auf glattem Nachtblau — dort war sie
sichtbar blasser als gedacht. Eine Stufe heller, damit sie sicher traegt. */
.held-ort { color: var(--weiss-85); margin-bottom: 1.8rem; }
.held-knoepfe { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.4rem; }
/* Countdown */
.countdown { display: flex; gap: clamp(.6rem, 2vw, 1.4rem); justify-content: center; }
.countdown div {
min-width: 4.6rem; padding: .7rem .5rem .55rem;
border: 1px solid rgba(210, 168, 75, .3); border-radius: var(--radius);
background: rgba(19, 16, 34, .55);
}
.countdown b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: var(--creme); line-height: 1; }
.countdown span { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
/* ---------- Fakten-Band ---------- */
.fakten { border-block: 1px solid rgba(210, 168, 75, .22); background: var(--nacht-2); }
.fakten-innen {
max-width: var(--w-inhalt); margin-inline: auto; padding: 1.4rem clamp(1.1rem, 4vw, 2rem);
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center;
}
.fakten b { display: block; font-family: var(--display); font-weight: 900; font-size: 1.7rem; color: var(--gold-hell); }
.fakten span { font-size: .92rem; color: var(--weiss-60); }
@media (max-width: 720px) { .fakten-innen { grid-template-columns: repeat(2, 1fr); row-gap: 1.4rem; } }
/* ---------- Abschnitte ---------- */
.abschnitt { padding: clamp(3.5rem, 9vh, 6rem) 0; }
.abschnitt-kopf { max-width: var(--w-schmal); margin-inline: auto; text-align: center; margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.abschnitt-kopf .zeile { justify-content: center; }
.abschnitt-kopf p { color: var(--weiss-60); }
/* Programmheft: helle "Papier"-Abschnitte */
.papier { background: linear-gradient(180deg, var(--creme) 0%, var(--creme-tief) 100%); color: var(--tinte); }
.papier h2, .papier h3 { color: var(--tinte); }
.papier .abschnitt-kopf p, .papier p { color: var(--tinte-60); }
.papier .zeile { color: var(--samt); }
.papier .zeile::before, .papier .zeile.mittig::after { background: rgba(142, 31, 47, .4); }
.papier a { color: var(--samt); }
/* ---------- Programm (Signatur-Element) ---------- */
.programm { display: grid; gap: clamp(2.2rem, 6vh, 4rem); }
.akt {
display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.4rem, 4vw, 3rem);
align-items: center;
}
.akt:nth-child(even) .akt-bild { order: 2; }
.akt-bild { position: relative; }
.akt-bild img {
border-radius: var(--radius);
box-shadow: 0 14px 38px rgba(43, 33, 53, .28);
aspect-ratio: 4 / 5; object-fit: cover; width: 100%;
}
.akt-nr {
font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 5vw, 3.6rem);
color: var(--samt); line-height: 1; margin-bottom: .2rem;
}
.akt-nr small { display: block; font-family: var(--text); font-weight: 700; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--samt); margin-bottom: .3rem; }
.akt h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 900; }
.akt-kuenstler { font-style: italic; font-family: var(--display); font-weight: 400; font-size: 1.1rem; color: var(--samt-tief); margin-bottom: .8rem; }
@media (max-width: 780px) {
.akt { grid-template-columns: 1fr; }
.akt:nth-child(even) .akt-bild { order: 0; }
.akt-bild img { aspect-ratio: 4 / 3; }
}
/* Kompakte Act-Karten (Startseite) */
.akt-karten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.akt-karte { position: relative; border-radius: var(--radius); overflow: hidden; text-decoration: none; }
.akt-karte img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; transition: transform .35s ease; }
.akt-karte:hover img { transform: scale(1.045); }
.akt-karte figcaption {
position: absolute; inset: auto 0 0 0; padding: 2.2rem .9rem .8rem;
background: linear-gradient(180deg, transparent, rgba(14, 11, 28, .88) 62%);
color: var(--creme); font-weight: 700; font-size: .98rem; line-height: 1.3;
}
.akt-karte figcaption small { display: block; font-weight: 400; color: var(--weiss-60); font-size: .82rem; }
@media (max-width: 900px) { .akt-karten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
.akt-karte figcaption { font-size: .85rem; padding: 1.4rem .7rem .65rem; }
.akt-karte figcaption small { font-size: .74rem; }
}
/* ---------- Spielplan ---------- */
.plan-monat { margin-bottom: 2.2rem; }
.plan-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.plan-tag {
border: 1px solid rgba(43, 33, 53, .14); border-radius: var(--radius);
background: rgba(255, 255, 255, .55); padding: .8rem .8rem .9rem;
}
.plan-tag.besonders { border-color: rgba(142, 31, 47, .45); background: #fdf6ec; }
.plan-tag b { display: block; font-family: var(--display); font-weight: 900; font-size: 1.25rem; color: var(--tinte); }
.plan-tag em { display: block; font-style: normal; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-60); margin-bottom: .5rem; }
.plan-zeiten { display: flex; flex-wrap: wrap; gap: .35rem; }
.plan-zeiten a {
text-decoration: none; font-weight: 700; font-size: .92rem;
padding: .22rem .6rem; border-radius: 999px;
background: var(--nacht); color: var(--gold-hell);
}
.plan-zeiten a:hover { background: var(--samt); color: var(--creme); }
.plan-hinweis { display: block; margin-top: .5rem; font-size: .8rem; color: var(--samt); font-weight: 700; }
/* ---------- Tabellen (Preise) ---------- */
.tab-huelle { overflow-x: auto; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(43,33,53,.12); }
table.preise { width: 100%; border-collapse: collapse; background: #fffdf7; min-width: 480px; }
.preise caption { caption-side: top; text-align: left; font-family: var(--display); font-weight: 900; font-size: 1.3rem; color: var(--tinte); padding: 0 0 .6rem; }
.preise th, .preise td { padding: .65rem .9rem; text-align: left; border-bottom: 1px solid rgba(43,33,53,.1); }
.preise th { background: var(--samt); color: var(--creme); font-weight: 700; letter-spacing: .04em; }
.preise tr:nth-child(even) td { background: rgba(234, 223, 196, .35); }
.preise td:nth-child(2), .preise td:nth-child(3), .preise th:nth-child(2), .preise th:nth-child(3) { text-align: right; white-space: nowrap; }
.fussnote { font-size: .88rem; color: var(--tinte-60); margin-top: .8rem; }
/* ---------- Karten (Specials) ---------- */
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.karte {
background: var(--nacht-2); border: 1px solid rgba(210, 168, 75, .2);
border-radius: var(--radius); padding: 1.6rem 1.5rem; display: flex; flex-direction: column;
}
.karte h3 { color: var(--gold-hell); }
.karte p { color: var(--weiss-60); flex: 1; }
.karte .knopf-rand { align-self: flex-start; margin-top: .8rem; padding: .6rem 1.2rem; font-size: .95rem; }
@media (max-width: 860px) { .karten { grid-template-columns: 1fr; } }
/* ---------- FAQ ---------- */
.faq { border-top: 1px solid rgba(43, 33, 53, .14); }
.faq details { border-bottom: 1px solid rgba(43, 33, 53, .14); }
.faq summary {
cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem;
padding: 1.05rem .2rem; font-weight: 700; font-size: 1.08rem; color: var(--tinte);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--display); font-size: 1.4rem; color: var(--samt); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details div { padding: 0 .2rem 1.2rem; color: var(--tinte-60); }
/* ---------- Sitzplan ---------- */
/* Die linke Spalte (Plan + Infokasten + Knopf) ist deutlich hoeher als der Text
rechts. Mit align-items:start klebte der Text oben und darunter klaffte ein Loch —
zentriert stehen beide Spalten optisch im Gleichgewicht. */
.sitzplan { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.sitzplan img { border-radius: var(--radius); box-shadow: 0 10px 30px rgba(43,33,53,.15); background: #fff; }
@media (max-width: 820px) { .sitzplan { grid-template-columns: 1fr; } }
/* ---------- CTA-Banner ---------- */
.cta-banner {
text-align: center;
background:
radial-gradient(ellipse 55% 70% at 50% 0%, rgba(240, 206, 126, .18), transparent 65%),
linear-gradient(180deg, var(--samt-tief), #470f18);
border-block: 1px solid rgba(210, 168, 75, .3);
}
.cta-banner h2 { color: var(--creme); }
.cta-banner p { color: rgba(245, 237, 218, .75); }
/* ---------- Footer ---------- */
.fuss { background: #0d0a1a; border-top: 1px solid rgba(210, 168, 75, .2); padding: 3rem 0 2rem; font-size: .95rem; }
.fuss-gitter { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.fuss h3 { font-size: 1.05rem; color: var(--gold); font-family: var(--text); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .45rem; }
/* Auf dem Handy waren die Fusszeilen-Links nur 18 px hoch — mit dem Daumen
kaum zu treffen. Das Polster hebt sie auf ~40 px, ohne das Raster zu sprengen. */
.fuss a { color: var(--weiss-60); text-decoration: none; display: inline-block; padding-block: .3rem; }
.fuss-einwilligung { padding-block: .3rem; }
.fuss a:hover { color: var(--gold-hell); }
.fuss-unten { border-top: 1px solid rgba(245, 237, 218, .12); padding-top: 1.4rem; color: var(--weiss-60); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 820px) { .fuss-gitter { grid-template-columns: 1fr 1fr; } }
/* ---------- Scroll-Reveal ---------- */
/* Nur aktiv, wenn JS läuft (html.js) — ohne JS bleibt alles sichtbar */
html.js .zeigen { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
html.js .zeigen.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .zeigen { opacity: 1; transform: none; } }
/* Sicherheitsnetz: Solange main.js nicht gemeldet hat, dass es das Einblenden
uebernimmt, macht diese Regel den Inhalt nach vier Sekunden von selbst sichtbar.
Faellt das Skript aus, waere sonst die halbe Seite dauerhaft unsichtbar. */
@keyframes reveal-notaus { to { opacity: 1; transform: none; } }
html.js:not(.reveal-an) .zeigen { animation: reveal-notaus .4s ease 4s forwards; }
/* ---------- Kleinkram ---------- */
.hinweis-band { background: var(--nacht-3); border: 1px solid var(--linie-gold); border-radius: var(--radius); padding: 1rem 1.3rem; }
.text-gold { color: var(--gold-hell); }
.mitte { text-align: center; }
.abstand-oben { margin-top: 2rem; }
/* ============================================================
LUXUS-SCHICHT: Seitenübergänge, Fortschritt, Entrance,
Parallax, Stagger, Laufband, Lichtbox, Schnee, Micro-Motion
============================================================ */
/* Sanfte Übergänge zwischen Seiten (moderne Browser, sonst ignoriert) */
@view-transition { navigation: auto; }
/* ---------- Scroll-Fortschritt ---------- */
.fortschritt {
position: fixed; top: 0; left: 0; height: 3px; width: 100%;
transform-origin: left; transform: scaleX(var(--fortschritt, 0));
background: linear-gradient(90deg, var(--gold), var(--gold-hell));
z-index: 60; pointer-events: none;
}
/* ---------- Nav-Verdichtung beim Scrollen ---------- */
.nav { transition: background .3s ease, box-shadow .3s ease; }
.nav-marke img, .nav-innen { transition: height .3s ease, padding .3s ease; }
.nav.klein { box-shadow: 0 8px 30px rgba(0, 0, 0, .45); background: rgba(15, 12, 28, .97); }
.nav.klein .nav-innen { padding-block: .3rem; }
.nav.klein .nav-marke img { height: 36px; }
/* ---------- Hero-Entrance (nur mit JS) ---------- */
@keyframes auftritt {
from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: none; }
}
@keyframes logo-auftritt {
from { opacity: 0; transform: scale(.93); filter: blur(6px); }
to { opacity: 1; transform: none; filter: blur(0); }
}
html.js .held .logo-buehne { animation: logo-auftritt 1.1s cubic-bezier(.2, .7, .2, 1) both; }
html.js .held .zeile { animation: auftritt .8s ease .35s both; }
html.js .held-datum { animation: auftritt .8s ease .5s both; }
html.js .held-ort { animation: auftritt .8s ease .62s both; }
html.js .held-knoepfe { animation: auftritt .8s ease .74s both; }
html.js .countdown { animation: auftritt .8s ease .88s both; }
html.js .held h1 { animation: auftritt .9s cubic-bezier(.2, .7, .2, 1) .15s both; }
/* ---------- Logo-Bühne: Glanz + Puls-Glut ---------- */
.logo-buehne { position: relative; display: inline-block; margin-bottom: 1.4rem; will-change: transform; }
.logo-buehne .held-logo { margin-bottom: 0; position: relative; z-index: 1; }
.logo-buehne::before {
content: ""; position: absolute; inset: -18%;
background: radial-gradient(ellipse 50% 50% at 50% 52%, rgba(240, 206, 126, .32), transparent 70%);
animation: glut 5.5s ease-in-out infinite;
z-index: 0;
}
@keyframes glut {
0%, 100% { opacity: .55; transform: scale(.96); }
50% { opacity: 1; transform: scale(1.04); }
}
.held-logo { width: min(640px, 86vw); margin-inline: auto; filter: drop-shadow(0 16px 46px rgba(0, 0, 0, .6)); }
/* ---------- Parallax-Träger ---------- */
[data-parallax] { will-change: transform; }
/* ---------- Gestaffelte Reveals (Kinder folgen dem Elternteil) ---------- */
html.js .zeigen.karten > *, html.js .zeigen.akt-karten > *, html.js .zeigen.plan-gitter > * {
opacity: 0; transform: translateY(16px);
transition: opacity .55s ease, transform .55s ease;
}
html.js .zeigen.sichtbar.karten > *, html.js .zeigen.sichtbar.akt-karten > *, html.js .zeigen.sichtbar.plan-gitter > * {
opacity: 1; transform: none;
}
html.js .zeigen.sichtbar > *:nth-child(2) { transition-delay: .1s; }
html.js .zeigen.sichtbar > *:nth-child(3) { transition-delay: .2s; }
html.js .zeigen.sichtbar > *:nth-child(4) { transition-delay: .3s; }
html.js .zeigen.sichtbar > *:nth-child(5) { transition-delay: .38s; }
html.js .zeigen.sichtbar > *:nth-child(6) { transition-delay: .46s; }
@media (prefers-reduced-motion: reduce) {
html.js .zeigen > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* ---------- Countdown-Tick ---------- */
@keyframes zahl-tick {
0% { transform: translateY(-.35em); opacity: 0; }
100% { transform: none; opacity: 1; }
}
.countdown b.tick { animation: zahl-tick .4s ease; }
/* ---------- Laufband ---------- */
.laufband {
overflow: hidden; white-space: nowrap;
border-block: 1px solid rgba(210, 168, 75, .3);
background: #0d0a1a;
padding: .85rem 0;
}
.laufband-spur {
display: inline-flex; gap: 2.6rem; padding-right: 2.6rem;
animation: laufband 30s linear infinite;
font-family: var(--display); font-weight: 700; font-size: 1.05rem;
color: var(--gold); letter-spacing: .06em;
}
.laufband:hover .laufband-spur { animation-play-state: paused; }
.laufband-spur .stern { color: var(--samt); }
@keyframes laufband { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .laufband-spur { animation: none; } }
/* ---------- Schnee ---------- */
.schnee { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.held > .inhalt { position: relative; z-index: 3; }
/* ---------- Lichtbox ---------- */
.akt-bild img, .impression img { cursor: zoom-in; }
.lichtbox {
position: fixed; inset: 0; z-index: 90;
display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .9rem;
background: rgba(10, 8, 20, .93); backdrop-filter: blur(8px);
opacity: 0; pointer-events: none; transition: opacity .3s ease;
padding: 2.5rem 1rem 1.5rem;
}
.lichtbox.offen { opacity: 1; pointer-events: auto; }
.lichtbox img {
max-width: min(92vw, 1000px); max-height: 78vh; width: auto; height: auto;
border-radius: var(--radius); box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
border: 1px solid rgba(210, 168, 75, .35);
}
.lichtbox figcaption { color: var(--weiss-85); font-size: .98rem; text-align: center; max-width: 46rem; }
.lichtbox-zu {
position: absolute; top: 1rem; right: 1.2rem;
background: none; border: 1px solid var(--linie-gold); color: var(--creme);
border-radius: 999px; width: 2.7rem; height: 2.7rem; font-size: 1.3rem; cursor: pointer;
}
.lichtbox-zu:hover { border-color: var(--gold-hell); color: var(--gold-hell); }
body.fixiert { overflow: hidden; }
/* ---------- Micro-Motion ---------- */
.akt-bild { overflow: hidden; border-radius: var(--radius); }
.akt-bild img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.akt-bild:hover img { transform: scale(1.035); }
.karte { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.karte:hover { transform: translateY(-5px); border-color: rgba(210, 168, 75, .55); box-shadow: 0 18px 44px rgba(0, 0, 0, .35); }
.plan-tag { transition: transform .25s ease, box-shadow .25s ease; }
.plan-tag:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(43, 33, 53, .18); }
.fuss a, .nav-links a { transition: color .2s ease; }
/* ---------- Impressionen-Galerie (Koblenz u. a.) ---------- */
.impressionen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.impression { border-radius: var(--radius); overflow: hidden; margin: 0; }
.impression img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.impression:hover img { transform: scale(1.05); }
@media (max-width: 800px) { .impressionen { grid-template-columns: repeat(2, 1fr); } }
/* ============================================================
FUN-SCHICHT: Vorhang, Wimpel, Lichterkette, Tilt,
Spotlight-Cursor, Button-Glanz, FAQ-Animation
============================================================ */
/* ---------- Vorhang-Opening (einmal pro Session) ---------- */
.vorhang { position: fixed; inset: 0; z-index: 200; pointer-events: none; display: flex; }
.vorhang span {
flex: 1; height: 100%;
background:
repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 26px, rgba(255,255,255,.05) 26px 34px, rgba(0,0,0,.14) 34px 64px),
linear-gradient(180deg, #6e1826, #4a0f19 70%, #3a0b13);
box-shadow: inset 0 -40px 80px rgba(0, 0, 0, .5);
transition: transform 1.1s cubic-bezier(.65, 0, .3, 1);
}
.vorhang span:first-child { border-right: 6px solid var(--gold); }
.vorhang.auf span:first-child { transform: translateX(-102%); }
.vorhang.auf span:last-child { transform: translateX(102%); }
@media (prefers-reduced-motion: reduce) { .vorhang { display: none; } }
/* ---------- Lichterkette über dem Laufband ---------- */
.lichterkette {
display: flex; justify-content: space-between; align-items: center;
padding: .55rem clamp(.8rem, 3vw, 2rem) .2rem;
background: #0d0a1a;
border-top: 1px solid rgba(210, 168, 75, .18);
}
.lichterkette i {
width: 9px; height: 9px; border-radius: 50%;
background: var(--gold-hell);
box-shadow: 0 0 10px 2px rgba(240, 206, 126, .65);
animation: funkeln 2.6s ease-in-out infinite;
}
.lichterkette i:nth-child(3n) { animation-delay: .9s; background: #f6dfa9; }
.lichterkette i:nth-child(3n+1) { animation-delay: 1.7s; }
.lichterkette i:nth-child(5n) { background: var(--samt); box-shadow: 0 0 10px 2px rgba(142, 31, 47, .7); }
@keyframes funkeln { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .lichterkette i { animation: none; } }
/* ---------- 3D-Tilt ---------- */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt.aktiv { transition: none; }
.tilt:not(.aktiv) { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
/* (Cursor-Spotlight entfernt — Ein-/Ausblenden an Hover-Grenzen wirkte wie Flackern) */
/* ---------- Gold-Knopf: periodischer Glanz ---------- */
.knopf-gold { position: relative; overflow: hidden; }
.knopf-gold::after {
content: ""; position: absolute; top: -20%; bottom: -20%; width: 34%;
left: -50%; transform: skewX(-18deg);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
animation: glanz 4.2s ease-in-out infinite;
}
@keyframes glanz { 0%, 62% { left: -50%; } 88%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .knopf-gold::after { animation: none; } }
/* ---------- FAQ: weiches Öffnen ---------- */
.faq details div { overflow: hidden; }
/* ---------- Count-up-Fakten ---------- */
.fakten b { font-variant-numeric: tabular-nums; }
/* ============================================================
REVIEW-FIXES + LEBENDIGKEIT
============================================================ */
/* Fix: Stagger-Delay nach dem Reveal zurücksetzen,
sonst reagieren Hover-Effekte auf späten Karten verzögert */
html.js .zeigen.fertig > * { transition-delay: 0s !important; }
/* Fix: Countdown-Ziffern zappeln nicht mehr horizontal */
.countdown b { font-variant-numeric: tabular-nums; }
/* Fix: Laufband-Naht — exakt gleiche Gruppen statt durchgehender Gaps */
.laufband-spur { gap: 0; padding-right: 0; }
.laufband-gruppe { display: inline-flex; gap: 2.6rem; padding-right: 2.6rem; }
/* Lebendig: die Spotlight-Kegel atmen langsam */
@keyframes atmen { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.held::before { animation: atmen 7s ease-in-out infinite; }
.held::after { animation: atmen 7s ease-in-out 3.5s infinite; }
/* (Logo-Hover-Wobble entfernt — kollidierte mit der Schwebe-Animation) */
/* Lebendig: Programmnummern werden "gestempelt" */
@keyframes stempel {
0% { opacity: 0; transform: scale(1.7) rotate(-4deg); }
65% { opacity: 1; transform: scale(.94); }
100% { opacity: 1; transform: none; }
}
html.js .akt.zeigen.sichtbar .akt-nr { animation: stempel .6s cubic-bezier(.2, .7, .3, 1.15) .15s both; }
/* ============================================================
MOBILE-QA-PASS
============================================================ */
/* Fix: Anker-Ziele landen nicht mehr unter der Sticky-Nav */
[id] { scroll-margin-top: 92px; }
/* Fix: iOS braucht das Webkit-Prefix für den Nav-Blur */
.nav { -webkit-backdrop-filter: blur(10px); }
/* Fix: iOS-Trägheitsscrollen für Preistabellen */
.tab-huelle { -webkit-overflow-scrolling: touch; }
/* Kompakte Darstellung auf schmalen Geräten */
@media (max-width: 430px) {
.nav-marke img { height: 38px; }
.nav-marke span { font-size: .9rem; }
.countdown { width: 100%; max-width: 340px; margin-inline: auto; gap: .5rem; }
.countdown div { min-width: 0; flex: 1; padding: .55rem .25rem .45rem; }
.countdown b { font-size: 1.5rem; }
.held-knoepfe { flex-direction: column; align-items: center; gap: .7rem; }
.held-knoepfe a { width: min(100%, 300px); text-align: center; }
.fakten b { font-size: 1.45rem; }
.laufband-spur { font-size: .92rem; }
.abschnitt { padding: 3rem 0; }
}
/* Fix: Preistabellen passen mobil komplett in den Viewport (alle 3 Spalten) */
@media (max-width: 520px) {
table.preise { min-width: 0; }
.preise th, .preise td { padding: .5rem .55rem; font-size: .9rem; }
.preise caption { font-size: 1.15rem; }
}
/* ============================================================
SEKTIONS-UPGRADE: Wort-Reveals, Ticket-Karten, Feuerwerk,
Logo-Schweben, Linien-Wachstum, Sterne, Polaroids
============================================================ */
/* Überschriften bauen sich Wort für Wort auf */
html.js .zeigen h2 .wort {
display: inline-block; opacity: 0;
transform: translateY(.5em) rotate(1.2deg);
transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
html.js .zeigen.sichtbar h2 .wort { opacity: 1; transform: none; }
/* Eyebrow-Goldlinien wachsen beim Reveal */
html.js .zeigen .zeile::before, html.js .zeigen .zeile.mittig::after {
transform: scaleX(0); transition: transform .7s cubic-bezier(.2, .7, .2, 1) .25s;
}
html.js .zeigen.sichtbar .zeile::before, html.js .zeigen.sichtbar .zeile.mittig::after { transform: scaleX(1); }
/* Dunkle Karten werden zu Eintrittskarten: Perforation + Stanz-Kerben */
.karte {
border-style: dashed;
border-color: rgba(210, 168, 75, .38);
}
.karte::before, .karte::after {
content: ""; position: absolute; top: 50%; width: 20px; height: 20px;
border-radius: 50%; background: var(--nacht);
border: 1px dashed rgba(210, 168, 75, .38);
transform: translateY(-50%);
}
/* Auf hellem Grund muessen die Kerben die Papierfarbe haben, nicht Nachtblau. */
.papier .karte::before, .papier .karte::after { background: var(--creme); }
.karte { position: relative; }
.karte::before { left: -11px; }
.karte::after { right: -11px; }
/* Hero-Logo schwebt nach dem Auftritt sanft weiter */
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
html.js .held .logo-buehne {
animation: logo-auftritt 1.1s cubic-bezier(.2, .7, .2, 1) both,
schweben 6.5s ease-in-out 1.6s infinite;
}
/* CTA-Banner: funkelnde Sterne */
.cta-banner { position: relative; overflow: hidden; }
.cta-banner .inhalt { position: relative; z-index: 1; }
.cta-banner::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(1.5px 1.5px at 12% 30%, rgba(240,206,126,.9), transparent 60%),
radial-gradient(1.5px 1.5px at 84% 22%, rgba(245,237,218,.8), transparent 60%),
radial-gradient(2px 2px at 68% 74%, rgba(240,206,126,.7), transparent 60%),
radial-gradient(1.5px 1.5px at 30% 82%, rgba(245,237,218,.7), transparent 60%),
radial-gradient(2px 2px at 46% 18%, rgba(240,206,126,.8), transparent 60%),
radial-gradient(1.5px 1.5px at 92% 62%, rgba(245,237,218,.75), transparent 60%);
animation: funkeln 3.2s ease-in-out infinite;
}
/* Feuerwerk-Leinwand (Silvester-Sektionen) */
[data-feuerwerk] { position: relative; overflow: hidden; }
[data-feuerwerk] > .inhalt { position: relative; z-index: 1; }
.feuerwerk { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* Impressionen: Polaroid-Drehung, Hover richtet gerade */
.impression:nth-child(odd) { transform: rotate(.9deg); }
.impression:nth-child(even) { transform: rotate(-.9deg); }
.impression { transition: transform .45s cubic-bezier(.2, .7, .2, 1); box-shadow: 0 10px 26px rgba(43, 33, 53, .18); }
.impression:hover { transform: rotate(0deg) scale(1.02); z-index: 1; }
/* ============================================================
BILD-MOSAIK (Startseite): die Seite lebt von den Artistenfotos
============================================================ */
.mosaik {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 215px;
gap: 1rem;
}
.mosaik .akt-karte { height: 100%; }
.mosaik .akt-karte img { height: 100%; width: 100%; aspect-ratio: auto; object-fit: cover; }
.mosaik .gross { grid-column: span 2; grid-row: span 2; }
.mosaik .breit { grid-column: span 2; }
.mosaik .akt-karte figcaption { font-size: 1.05rem; }
.mosaik .gross figcaption { font-size: 1.35rem; padding-bottom: 1.1rem; }
@media (max-width: 800px) {
.mosaik { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
.mosaik .gross { grid-column: span 2; grid-row: span 2; }
.mosaik .breit { grid-column: span 2; }
}
/* ============================================================
MOBIL: Programm-Mosaik wird zur wischbaren Vollbild-Galerie
============================================================ */
@media (max-width: 800px) {
.mosaik {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: .9rem;
/* randlos über die volle Gerätebreite */
margin-inline: calc(-1 * clamp(1.1rem, 4vw, 2rem));
padding-inline: clamp(1.1rem, 4vw, 2rem);
padding-bottom: .5rem;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.mosaik::-webkit-scrollbar { display: none; }
.mosaik .akt-karte,
.mosaik .gross,
.mosaik .breit {
flex: 0 0 78vw;
height: min(104vw, 470px);
grid-column: auto; grid-row: auto;
scroll-snap-align: center;
}
.mosaik .akt-karte figcaption { font-size: 1.15rem; padding: 2.4rem 1rem 1rem; }
.mosaik .gross figcaption { font-size: 1.15rem; padding-bottom: 1rem; }
.wisch-hinweis { display: block; }
}
.wisch-hinweis {
display: none;
text-align: center;
font-size: .85rem; letter-spacing: .16em; text-transform: uppercase;
color: var(--samt); font-weight: 700;
margin-top: .4rem;
}
.wisch-hinweis::before { content: "‹ "; }
.wisch-hinweis::after { content: " ›"; }
/* ============================================================
HERO-LICHT 2.0 — weg mit den harten Skew-Kegeln,
stattdessen weiche, kantenlose Bühnenbeleuchtung
============================================================ */
.held::after { content: none; }
.held {
background:
radial-gradient(ellipse 75% 60% at 50% -12%, rgba(240, 206, 126, .26), transparent 58%),
radial-gradient(ellipse 45% 38% at 12% 8%, rgba(120, 110, 190, .14), transparent 70%),
radial-gradient(ellipse 45% 38% at 88% 8%, rgba(120, 110, 190, .14), transparent 70%),
radial-gradient(ellipse 120% 70% at 50% 120%, rgba(142, 31, 47, .30), transparent 66%),
linear-gradient(180deg, #0e0b1c 0%, var(--nacht) 48%, #170f26 100%);
}
/* sanftes Atmen des Hauptlichts statt der Kegel */
@keyframes buehnenlicht {
0%, 100% { opacity: .7; }
50% { opacity: 1; }
}
.held::before {
content: ""; position: absolute; inset: 0; top: 0; left: 0; height: 100%; width: 100%;
transform: none;
background: radial-gradient(ellipse 55% 45% at 50% 0%, rgba(240, 206, 126, .13), transparent 60%);
animation: buehnenlicht 8s ease-in-out infinite;
}
/* Logo-Glut dezenter */
@keyframes glut {
0%, 100% { opacity: .35; transform: scale(.97); }
50% { opacity: .65; transform: scale(1.03); }
}
/* ============================================================
FOTO-HERO: Artistenbild als Bühne hinter dem Emblem
============================================================ */
.held-foto {
position: absolute; inset: -6%;
background-position: center 22%;
background-size: cover;
opacity: .24;
filter: blur(5px) saturate(.9) brightness(.8);
z-index: 0;
animation: kenburns 28s ease-in-out infinite alternate;
}
@keyframes kenburns {
from { transform: scale(1); }
to { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) { .held-foto { animation: none; } }
/* Verlaufs-Schleier: hält Ränder dunkel, Mitte lesbar */
.held-foto::after {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(ellipse 90% 80% at 50% 45%, transparent 30%, rgba(14, 11, 28, .82) 100%),
linear-gradient(180deg, rgba(14, 11, 28, .6) 0%, rgba(19, 16, 34, .15) 42%, rgba(19, 16, 34, .92) 100%);
}
.held::before { z-index: 1; }
/* ============================================================
AUDIT-FIXES (Code-, SEO- und Design-Audit 16.08.)
============================================================ */
/* Fix H2: Countdown verschwindet bei Ablauf wirklich */
.countdown[hidden] { display: none; }
/* Fix H3: Wisch-Hinweis — Media-Query muss NACH der Basisregel kommen */
@media (max-width: 800px) { .wisch-hinweis { display: block; } }
/* Fix M1/M2: Stagger nur bis zum Reveal-Ende, danach gelten die Hover-Transitions */
html.js .zeigen.karten > *, html.js .zeigen.mosaik > *, html.js .zeigen.plan-gitter > * {
transition: opacity .55s ease, transform .55s ease;
}
html.js .zeigen.fertig.karten > *, html.js .zeigen.fertig.mosaik > *, html.js .zeigen.fertig.plan-gitter > * {
transition: revert-layer;
}
html.js .zeigen:not(.sichtbar).karten > *, html.js .zeigen:not(.sichtbar).mosaik > *, html.js .zeigen:not(.sichtbar).plan-gitter > * {
opacity: 0; transform: translateY(16px);
}
html.js .zeigen.fertig.karten > .karte { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
html.js .tilt.aktiv { transition: none !important; }
/* Fix N2: Zoom-Cursor überall, wo die Lichtbox aufgeht */
.mosaik img, .sitzplan img { cursor: zoom-in; }
/* Fix M4b: Lichtbox über dem Skip-Link */
.lichtbox { z-index: 120; }
/* Fix N3: Reduced Motion — Glut ruhig statt heller, Goldlinien sichtbar */
@media (prefers-reduced-motion: reduce) {
.logo-buehne::before { animation: none; opacity: .45; }
html.js .zeigen .zeile::before, html.js .zeigen .zeile.mittig::after { transform: scaleX(1); transition: none; }
}
/* SEO H1: nur für Screenreader sichtbare Überschrift */
.sr-nur {
position: absolute; width: 1px; height: 1px; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Design M3: Text+Bild-Split gegen tote Flächen (Specials) */
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; max-width: var(--w-inhalt); }
.split img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; box-shadow: var(--schatten); }
@media (max-width: 780px) { .split { grid-template-columns: 1fr; } }
html.js .zeigen.fertig.plan-gitter > .plan-tag { transition: transform .25s ease, box-shadow .25s ease; }
/* Fix: Logo-Bühne ist immer eine eigene Zeile (inline-block konnte neben die
inline-flex-Eyebrow rutschen, sobald beide zusammen in die Breite passten) */
.logo-buehne { display: table; margin-inline: auto; }
/* Lenis übernimmt das Smooth Scrolling — natives smooth abschalten, sonst Doppel-Animation */
html.sanftscroll { scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
/* ============================================================
DRUCK: Spielplan & Preise sauber auf Papier
============================================================ */
@media print {
.nav, .fuss, .laufband, .lichterkette, .fortschritt, .cta-banner,
.held-knoepfe, .countdown, .schnee, .vorhang, .wisch-hinweis,
.akt-sprung, .ticket-leiste, .vorverkauf-hinweis { display: none !important; }
body, .abschnitt, .held { background: #fff !important; color: #000 !important; }
h1, h2, h3, .held-datum, .zeile { color: #000 !important; }
.plan-tag, .karte { border: 1px solid #999 !important; background: #fff !important; break-inside: avoid; }
.plan-zeiten a { background: #eee !important; color: #000 !important; text-decoration: none; }
.preise th { background: #ddd !important; color: #000 !important; }
html.js .zeigen, html.js .zeigen > *, html.js .zeigen h2 .wort { opacity: 1 !important; transform: none !important; }
/* Diese Elemente setzen ihre Farbe selbst und erbten das Schwarz oben nicht —
auf weissem Papier standen sie mit ~1,1:1 praktisch unsichtbar da. */
.karte p, .held-ort, .abschnitt-kopf p, .fakten span, .presse-neben,
.presse-zitat p, .presse-zitat cite, .cta-hinweis, .cta-zweitweg,
.akt-karte figcaption, .akt-karte figcaption small { color: #000 !important; }
.held-foto, .logo-buehne::before { display: none !important; }
a[href^="http"]::after { content: ""; }
}
/* ============================================================
RUNDE-2-UPGRADES: Sprungnav, SDA-Progress, PhotoSwipe
============================================================ */
/* Sprungnavigation auf der Showacts-Seite */
.akt-sprung {
position: sticky; top: 58px; z-index: 40;
background: rgba(19, 16, 34, .94);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(210, 168, 75, .22);
}
.akt-sprung-innen { display: flex; gap: .15rem; overflow-x: auto; padding-block: .45rem; scrollbar-width: none; }
.akt-sprung-innen::-webkit-scrollbar { display: none; }
.akt-sprung a {
font-family: var(--display); font-weight: 700; font-size: .95rem;
color: var(--weiss-60); text-decoration: none;
padding: .25rem .55rem; border-radius: 6px; flex: 0 0 auto;
}
.akt-sprung a:hover { color: var(--gold-hell); }
.akt .akt-nr { scroll-margin-top: 130px; }
article.akt[id] { scroll-margin-top: 120px; }
/* Scroll-Fortschritt per CSS Scroll-Driven Animation (0 JS, wo unterstützt) */
@supports (animation-timeline: scroll()) {
@keyframes fortschritt-wachsen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fortschritt.sda {
animation: fortschritt-wachsen linear both;
animation-timeline: scroll(root);
}
}
/* PhotoSwipe: Beschriftung + Markenanpassung */
.pswp-beschriftung {
position: absolute; left: 0; right: 0; bottom: 12px;
text-align: center; color: var(--creme); font-family: var(--text);
font-size: .95rem; padding-inline: 1rem; pointer-events: none;
text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
.pswp__icn { filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
/* ============================================================
INTERAKTIVER SITZPLAN
============================================================ */
.sitz-halter { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
.sitz-svg { width: 100%; height: auto; }
.sitz-segment { cursor: pointer; stroke: #fffdf7; stroke-width: 1; transition: fill-opacity .2s ease, stroke .2s ease; outline: none; }
.sitz-segment:hover { fill-opacity: 1; stroke: var(--gold); stroke-width: 1.6; }
/* Fokus muss sich von Hover unterscheiden UND auf jeder Fuellfarbe sichtbar sein —
ein goldener Strich auf gelbem Segment kam auf 1,1:1. */
.sitz-segment:focus-visible { fill-opacity: 1; outline: 3px solid var(--nacht); outline-offset: 2px; }
.sitz-segment.gewaehlt { fill-opacity: 1; stroke: var(--samt); stroke-width: 2; }
.sitz-label { text-anchor: middle; dominant-baseline: middle; fill: #fff; font-family: var(--text); font-weight: 700; pointer-events: none; paint-order: stroke; stroke: rgba(0,0,0,.35); stroke-width: 2px; }
.sitz-info {
background: #fffdf7; border: 1px dashed rgba(142, 31, 47, .35); border-radius: var(--radius);
padding: .9rem 1.1rem; min-height: 5.6rem; display: flex; flex-direction: column; gap: .15rem;
color: var(--tinte); font-size: .98rem;
}
.sitz-info b { font-family: var(--display); font-size: 1.15rem; }
.sitz-info .sitz-silvester { color: var(--samt); font-weight: 700; }
.sitz-halter .knopf-gold { align-self: flex-start; }
/* ============================================================
ILLUSTRATIONS-EBENE: Ornamente, Icons, Zelt-Line-Art
============================================================ */
/* Goldener Barock-Trenner unter jeder Sektionsüberschrift */
.abschnitt-kopf::after {
content: ""; display: block; width: 150px; height: 18px;
margin: 1rem auto 0;
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
/* Line-Art-Icons in den Ticket-Karten */
.karte-icon {
width: 1.7rem; height: 1.7rem; display: block; margin-bottom: .6rem;
stroke: var(--gold); fill: none; stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
}
/* Zelt-Illustration (Anfahrt) */
.zelt-illu { width: min(340px, 80%); margin-inline: auto; display: block; opacity: .92; }
.zelt-illu path, .zelt-illu circle { stroke: var(--samt); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.zelt-illu .gold { stroke: var(--gold); }
.zelt-illu .stern { fill: var(--gold); stroke: none; }
/* ============================================================
SOCIAL-LINKS IN DER FUSSZEILE
============================================================ */
.fuss-sozial { display: flex; gap: .6rem; margin-top: 1rem; }
.fuss-sozial a {
display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
border: 1px solid var(--linie-gold); border-radius: 50%;
transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.fuss-sozial a:hover { border-color: var(--gold-hell); background: rgba(210, 168, 75, .12); transform: translateY(-2px); }
.fuss-sozial svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--gold); stroke-width: 1.6; }
.fuss-sozial a:hover svg { stroke: var(--gold-hell); }
/* Facebook-Glyphe ist eine Fläche, kein Strich */
.fuss-sozial svg path { fill: var(--gold); stroke: none; }
.fuss-sozial a:hover svg path { fill: var(--gold-hell); }
.fuss-sozial svg .voll { fill: var(--gold); stroke: none; }
.fuss-sozial a:hover svg .voll { fill: var(--gold-hell); }
/* Das Zelt erwacht: Fahne weht, Sterne funkeln, aus dem Eingang fällt warmes Licht */
.zelt-illu .zelt-fahne { fill: var(--gold); stroke: var(--gold); stroke-width: 1.5; }
.zelt-illu .zelt-licht { fill: var(--gold); stroke: none; opacity: .2; }
@keyframes zelt-wehen {
0%, 100% { transform: scaleX(1) skewY(0deg); }
35% { transform: scaleX(.82) skewY(3.5deg); }
70% { transform: scaleX(.95) skewY(-2deg); }
}
@keyframes zelt-blinken { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
@keyframes zelt-leuchten {
0%, 100% { opacity: .14; transform: scaleX(.9); }
50% { opacity: .26; transform: scaleX(1.08); }
}
html.js .zelt-illu .zelt-fahne {
transform-box: fill-box; transform-origin: 0% 50%;
animation: zelt-wehen 3.6s ease-in-out infinite;
}
html.js .zelt-illu .zelt-stern { animation: zelt-blinken 2.8s ease-in-out infinite; }
html.js .zelt-illu .zelt-stern:last-of-type { animation-delay: 1.3s; animation-duration: 3.4s; }
html.js .zelt-illu .zelt-licht {
transform-box: fill-box; transform-origin: 50% 100%;
animation: zelt-leuchten 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
html.js .zelt-illu .zelt-fahne, html.js .zelt-illu .zelt-stern,
html.js .zelt-illu .zelt-licht { animation: none; }
}
/* ============================================================
MAXIMAL-RUNDE (17.08.): Mobiler Ticket-CTA, Presse-Band,
Scrollspy, Touch-Ziele, Countdown-Titel, Geschenkkarte
============================================================ */
/* Typografie: keine Waisenwörter in Headlines, schönere Absatz-Umbrüche */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
/* Ticket-Knopf bleibt mobil immer in der Kopfzeile sichtbar.
Wichtig: Marke + Tickets + Menü MÜSSEN in eine Zeile passen —
sonst bricht der Menü-Knopf um und der Header sieht kaputt aus. */
.nav .nav-ticket-mobil { display: none; }
@media (max-width: 900px) {
.nav-innen { column-gap: .6rem; }
.nav-marke { min-width: 0; }
.nav .nav-ticket-mobil {
display: inline-block; margin-left: auto;
padding: .45rem .9rem; font-size: .88rem; white-space: nowrap;
}
/* 44 px Mindesthoehe: darunter trifft man den Knopf mit dem Daumen schlecht. */
.nav-toggle { margin-left: 0; padding: .4rem .7rem; min-height: 44px; }
}
@media (max-width: 430px) {
.nav-marke { gap: .5rem; }
.nav-marke span { font-size: .8rem; }
.nav .nav-ticket-mobil { padding: .4rem .75rem; font-size: .8rem; }
.nav-toggle { font-size: .95rem; padding: .38rem .5rem; }
}
@media (max-width: 340px) {
/* Uralt-Geräte: nur das Logo, Text weglassen */
.nav-marke span { display: none; }
}
@media (max-width: 900px) {
/* Kein doppelter Tickets-Knopf: die Kopfzeile hat ihn schon */
.nav-links a.knopf-gold { display: none; }
}
/* Sprungnav: kein Sehschlitz unter der geschrumpften Nav,
größere Touch-Ziele, Überlauf-Fade rechts
(kein eigener Ticket-Link — der klebt permanent in der Kopfzeile) */
.akt-sprung { top: 45px; }
.akt-sprung-innen { align-items: center; }
@media (max-width: 900px) {
.akt-sprung a { padding: .5rem .7rem; }
.akt-sprung::after {
content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2.4rem;
background: linear-gradient(90deg, transparent, rgba(19, 16, 34, .94));
pointer-events: none;
}
}
/* Scrollspy: aktive Nummer bekommt Gold + Unterstrich */
.akt-sprung a { position: relative; }
.akt-sprung a.aktiv { color: var(--gold-hell); }
.akt-sprung a::after {
content: ""; position: absolute; left: .55rem; right: .55rem; bottom: .15rem;
height: 2px; background: var(--gold); border-radius: 2px;
transform: scaleX(0); transform-origin: center; transition: transform .25s ease;
}
.akt-sprung a.aktiv::after { transform: scaleX(1); }
/* Spielplan-Zeitchips: volle Touch-Größe auf Mobil */
@media (max-width: 600px) {
.plan-zeiten { gap: .5rem; }
.plan-zeiten a { padding: .5rem 1rem; font-size: 1rem; }
}
/* Vertrauenszeile unter Ticket-Knöpfen */
.cta-hinweis {
font-size: .85rem; color: var(--weiss-60);
letter-spacing: .02em; margin: .2rem 0 0;
}
.held .cta-hinweis { margin: -1.5rem 0 2rem; }
html.js .held .cta-hinweis { animation: auftritt .8s ease .82s both; }
.cta-banner .cta-hinweis { margin-top: 1.1rem; }
.papier .cta-hinweis { color: var(--tinte-60); }
/* Countdown-Titel (JS setzt ihn, sobald die Spielzeit läuft) */
.countdown-titel {
font-weight: 700; font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--gold); margin: 0 0 .7rem;
}
.countdown-titel[hidden] { display: none; }
/* Presse-Band: eine große Stimme statt vieler kleiner */
.presse {
background: var(--nacht-2);
border-block: 1px solid rgba(210, 168, 75, .18);
padding: clamp(3rem, 7vh, 4.5rem) 0;
}
.presse-zitat { margin: 0; position: relative; padding-top: 3rem; }
.presse-zitat::before {
/* „-Glyphe tintet am unteren Rand ihrer Box — Box so hoch schieben,
dass die Zeichen ÜBER dem Zitat schweben statt hineinzuragen */
content: "„"; position: absolute; top: -4.9rem; left: 50%; transform: translateX(-50%);
font-family: var(--display); font-weight: 900; font-size: 7rem; line-height: 1;
color: var(--gold); opacity: .35; pointer-events: none;
}
.presse-zitat p {
font-family: var(--display); font-style: italic; font-weight: 400;
font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.4;
color: var(--creme); margin-bottom: .9rem;
}
.presse-zitat cite {
font-style: normal; font-weight: 700; font-size: .8rem;
letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.presse-neben { color: var(--weiss-60); margin: 1.4rem 0 0; font-size: .98rem; }
/* Zwischen-CTA (Showacts): kompakter als der große Schluss-Banner */
.zwischen-cta { padding: clamp(2.6rem, 6vh, 4rem) 0; }
/* Hero-Foto: kleine Bildvariante auf schmalen Geräten
(Custom Properties kommen aus dem Inline-Style des Markups) */
.held-foto { background-image: var(--held-bild); }
@media (max-width: 800px) {
.held-foto { background-image: var(--held-bild-klein, var(--held-bild)); }
}
/* ============================================================
SILVESTERGALA: anstoßende Champagnergläser (reines CSS)
Die Gläser neigen sich zueinander, treffen sich mit einem
Funken und lassen dabei Perlen aufsteigen.
============================================================ */
.gala-anstoss { text-align: center; margin: -.5rem 0 2.6rem; }
.gala-illu { width: min(260px, 60%); height: auto; margin-inline: auto; overflow: visible; }
.gala-illu .gala-fuss, .gala-illu .gala-stiel,
.gala-illu .gala-kelch, .gala-illu .gala-rand {
fill: none; stroke: var(--gold); stroke-width: 2.6;
stroke-linecap: round; stroke-linejoin: round;
}
.gala-illu .gala-fuellung { fill: rgba(240, 206, 126, .5); stroke: none; }
.gala-illu .gala-blase { fill: var(--gold-hell); opacity: 0; }
.gala-illu .gala-stern { fill: var(--gold-hell); }
.gala-illu .gala-splitter { fill: var(--gold); }
/* Anstoßen — Anlauf, Berührung, kurzes Nachfedern */
@keyframes gala-anstossen {
0%, 26% { transform: rotate(6deg); }
44% { transform: rotate(16deg); }
50% { transform: rotate(13.8deg); }
56% { transform: rotate(16deg); }
74%, 100% { transform: rotate(6deg); }
}
html.js .gala-glas {
transform-box: fill-box; transform-origin: 50% 100%;
animation: gala-anstossen 5.5s cubic-bezier(.4, 0, .3, 1) infinite;
}
/* Ohne JS (und damit ohne Reveal) stehen die Gläser einfach angeneigt da */
.gala-glas { transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(6deg); }
/* Perlen steigen im Kelch auf */
@keyframes gala-perle {
0% { transform: translateY(0); opacity: 0; }
18% { opacity: .95; }
80% { opacity: .55; }
100% { transform: translateY(-19px); opacity: 0; }
}
.gala-illu .gala-blase { animation: gala-perle 3.4s ease-in infinite; }
.gala-illu .gala-blase:nth-child(2) { animation-delay: .85s; animation-duration: 3.9s; }
.gala-illu .gala-blase:nth-child(3) { animation-delay: 1.7s; animation-duration: 3.1s; }
.gala-illu .gala-blase:nth-child(4) { animation-delay: 2.5s; animation-duration: 4.2s; }
.gala-glas-rechts .gala-blase { animation-delay: .4s; }
.gala-glas-rechts .gala-blase:nth-child(2) { animation-delay: 1.5s; }
.gala-glas-rechts .gala-blase:nth-child(3) { animation-delay: 2.2s; }
.gala-glas-rechts .gala-blase:nth-child(4) { animation-delay: 3s; }
/* Funke genau im Moment der Berührung */
@keyframes gala-funkeln {
0%, 40% { opacity: 0; transform: scale(.3) rotate(0deg); }
47% { opacity: 1; transform: scale(1.15) rotate(18deg); }
58% { opacity: .8; transform: scale(.95) rotate(30deg); }
72%, 100% { opacity: 0; transform: scale(.55) rotate(44deg); }
}
@keyframes gala-splittern {
0%, 42% { opacity: 0; transform: scale(.2); }
52% { opacity: .95; transform: scale(1); }
70%, 100% { opacity: 0; transform: scale(1.5); }
}
.gala-funke { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
html.js .gala-funke { animation: gala-funkeln 5.5s ease-out infinite; }
html.js .gala-splitter { animation: gala-splittern 5.5s ease-out infinite; }
.gala-prost {
font-family: var(--display); font-style: italic; font-weight: 400;
font-size: clamp(1.05rem, 2.2vw, 1.35rem);
color: var(--gold-hell); margin: .6rem 0 0;
}
@media (prefers-reduced-motion: reduce) {
html.js .gala-glas, html.js .gala-funke, html.js .gala-splitter,
.gala-illu .gala-blase { animation: none; }
.gala-illu .gala-blase { opacity: .8; }
html.js .gala-funke { opacity: .9; }
}
@media print { .gala-anstoss { display: none; } }
/* ============================================================
GESCHENKKARTE (/geschenk): Eintrittskarten-Look zum Ausdrucken
============================================================ */
.geschenk-buehne { max-width: 760px; margin-inline: auto; }
.geschenk-buehne h1 { font-size: clamp(1.8rem, 4vw, 2.9rem); }
.geschenkkarte {
position: relative; background: linear-gradient(165deg, #fffdf7, var(--creme) 70%);
color: var(--tinte); border: 2px dashed rgba(142, 31, 47, .5);
border-radius: var(--radius); padding: clamp(1.6rem, 5vw, 3rem);
text-align: center; box-shadow: var(--schatten);
}
.geschenkkarte::before, .geschenkkarte::after {
content: ""; position: absolute; top: 50%; width: 26px; height: 26px; border-radius: 50%;
background: var(--nacht); border: 2px dashed rgba(142, 31, 47, .5); transform: translateY(-50%);
}
.geschenkkarte::before { left: -15px; }
.geschenkkarte::after { right: -15px; }
.geschenkkarte .zeile { color: var(--samt); }
.geschenkkarte .zeile::before, .geschenkkarte .zeile.mittig::after { background: rgba(142, 31, 47, .4); }
.geschenk-titel {
font-family: var(--display); font-weight: 900; line-height: 1.1;
font-size: clamp(2rem, 6vw, 3.2rem); color: var(--tinte); margin: 0 0 .35em;
}
.geschenk-titel em { font-style: italic; color: var(--samt); }
.geschenk-untertitel { color: var(--tinte-60); margin-bottom: 1.6rem; }
.geschenk-felder { display: grid; gap: 1.5rem; margin: 2.2rem 0 1.6rem; text-align: left; }
.geschenk-feld { border-bottom: 1.5px solid rgba(43, 33, 53, .35); padding-bottom: .4rem; }
.geschenk-feld span {
display: block; font-size: .72rem; font-weight: 700; letter-spacing: .2em;
text-transform: uppercase; color: var(--samt); margin-bottom: 1.7rem;
}
@media (min-width: 560px) {
.geschenk-felder { grid-template-columns: 1fr 1fr; }
.geschenk-feld.breit { grid-column: 1 / -1; }
}
.geschenk-fuss { font-size: .85rem; color: var(--tinte-60); margin: 0; }
button.knopf-gold { border: 0; cursor: pointer; font-family: var(--text); }
@media print {
/* visibility:hidden nimmt die Elemente nicht aus dem Layout — Navigation,
Hero und Fusszeile erzeugten weiter Seitenhoehe und damit leere Folgeblaetter. */
body.geschenk-seite .nav, body.geschenk-seite .fuss, body.geschenk-seite .laufband,
body.geschenk-seite .ticket-leiste, body.geschenk-seite .vorverkauf-hinweis,
body.geschenk-seite .held, body.geschenk-seite .geschenk-fuss,
body.geschenk-seite button.knopf-gold { display: none !important; }
body.geschenk-seite { padding-bottom: 0 !important; }
body.geschenk-seite .geschenkkarte {
margin: 0 auto; box-shadow: none;
background: #fff !important; border-color: #8e1f2f;
}
body.geschenk-seite .geschenkkarte::before, body.geschenk-seite .geschenkkarte::after { display: none; }
body.geschenk-seite .geschenk-titel, body.geschenk-seite .geschenkkarte .zeile { color: #8e1f2f !important; }
}
/* ============================================================
EINWILLIGUNG — Cookie-/Messungs-Banner
Sitzt unten, nimmt nur so viel Platz wie noetig und blockiert die Seite
nicht: Wer nichts anklickt, bekommt auch kein Google-Skript geladen.
Beide Knoepfe sind gleich gross und gleich sichtbar — Ablehnen muss
genauso leicht sein wie Zustimmen.
============================================================ */
.einwilligung {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 200;
padding: 1rem;
background: var(--nacht-2);
border-top: 1px solid var(--linie-gold);
box-shadow: 0 -12px 40px rgba(0, 0, 0, .45);
transform: translateY(110%);
transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.einwilligung.sichtbar { transform: translateY(0); }
.einwilligung-innen {
max-width: 62rem;
margin: 0 auto;
display: flex;
align-items: center;
gap: 1.4rem;
flex-wrap: wrap;
}
.einwilligung-text { flex: 1 1 22rem; }
.einwilligung-text h2 {
margin: 0 0 .25rem;
font-size: 1.05rem;
color: var(--gold-hell);
letter-spacing: .01em;
}
.einwilligung-text p {
margin: 0;
font-size: .9rem;
line-height: 1.55;
color: var(--weiss-85);
text-wrap: pretty;
}
.einwilligung-text a { color: var(--gold); text-underline-offset: .2em; }
.einwilligung-knoepfe {
display: flex;
gap: .6rem;
flex: 0 0 auto;
}
/* .knopf-gold/.knopf-rand sind fuer gebaut. Ein