/* Dirk Denzer Performing Arts */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marke */
  --nacht: #0D0C1D;
  --gold: #E9C98B;
  --gold-dunkel: #6D5A30;
  --gold-bogen: #8A6E3B;
  --creme: #F3EEE4;
  --sand: #E6DDCD;
  --creme-leise: #E4DED2;
  --lila-hell: #C9C3D3;
  --lila-leise: #A9A4B6;
  --text-tinte: #3E3B4A;
  --text-grau: #4A4757;
  --text-oliv: #6D6857;

  /* Nacht-Transparenzen fuer Bildverlaeufe */
  --nacht-00: rgba(13, 12, 29, 0);
  --nacht-10: rgba(13, 12, 29, .1);
  --nacht-20: rgba(13, 12, 29, .2);
  --nacht-25: rgba(13, 12, 29, .25);
  --nacht-28: rgba(13, 12, 29, .28);
  --nacht-35: rgba(13, 12, 29, .35);
  --nacht-40: rgba(13, 12, 29, .4);
  --nacht-55: rgba(13, 12, 29, .55);
  --nacht-60: rgba(13, 12, 29, .6);
  --nacht-82: rgba(13, 12, 29, .82);
  --nacht-88: rgba(13, 12, 29, .88);
  --nacht-90: rgba(13, 12, 29, .9);
  --nacht-92: rgba(13, 12, 29, .92);
  --nacht-95: rgba(13, 12, 29, .95);
  --creme-14: rgba(243, 238, 228, .14);
  --creme-35: rgba(243, 238, 228, .35);
  --glas-fuellung: rgba(13, 12, 29, .8);
  --glas-kante: rgba(243, 238, 228, .16);
  --glas-licht: inset 0 1px 0 rgba(243, 238, 228, .1), 0 10px 34px rgba(13, 12, 29, .22);

  /* Vertrag avui studio */
  --farbe-primaer: var(--nacht);
  --farbe-akzent: var(--gold);
  --farbe-text: var(--nacht);
  --farbe-text-leise: var(--text-grau);
  --farbe-hintergrund: var(--creme);
  --farbe-rahmen: var(--sand);
  --neutral-900: var(--nacht);
  --neutral-100: var(--sand);
  --white: var(--creme);
  --bg: var(--creme);
  --accent: var(--gold);
  --text-auf-dunkel: var(--creme-leise);
  --text-auf-dunkel-leise: var(--lila-hell);
  --radius: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --shadow-md: 0 6px 20px var(--nacht-28);
  --schatten-md: var(--shadow-md);
  --fs-meta: .875rem;

  /* Copy */
  --copy-gross: 1.125rem;
  --copy-klein: .9375rem;
  --copy-mikro: .75rem;
  --groesse-icon: 1.75rem;

  /* Ueberschriften */
  --stil-lead: 1.1875rem;
  --stil-h3: 1.5rem;
  --stil-h3-gross: clamp(1.75rem, 3vw, 2.5rem);
  --stil-satz: clamp(2.125rem, 4.6vw, 4.125rem);
  --stil-leicht: clamp(1.75rem, 8vw, 4.75rem);
  --stil-leicht-m: clamp(2.125rem, 4.6vw, 4.25rem);
  --stil-leicht-l: clamp(2.5rem, 5.6vw, 5.25rem);
  --stil-schwer: clamp(3rem, 15.5vw, 5.5rem);
  --stil-hero-leicht: clamp(2.25rem, min(6vw, 9svh), 5.75rem);
  --stil-hero-schwer: clamp(5rem, min(28vw, 22svh), 18.75rem);
  --stil-show: clamp(2.375rem, 13.2vw, 5.5rem);
  --stil-zahl: 6rem;
  --stil-kontakt: clamp(3rem, 14.5vw, 5.5rem);
  --stil-event: clamp(3.5rem, 17vw, 6rem);

  /* Raster */
  --seitenbreite: 86rem;
  --rand: 1.5rem;
  --kopfhoehe: 5.5rem;
  --stufe-m: 1rem;
  --stufe-l: 2rem;
  --stufe-xl: clamp(4rem, 8vw, 6.875rem);

  /* Bewegung */
  --kurve: cubic-bezier(.76, 0, .24, 1);
  --kurve-aus: cubic-bezier(.16, 1, .3, 1);
  --intro-start: .55s;
  --intro-oeffnen: .8s;
  --intro-verz: .75s;
  --z-kopf: 30;
  --z-drawer: 60;
  --z-intro: 100;

  }

@media (min-width: 768px) {
  :root { --stil-zahl: 4.75rem; }
}

@media (min-width: 1025px) {
  :root {
    --rand: 2rem;
    --stil-lead: 1.3125rem;
    --stil-leicht: clamp(2.125rem, 5vw, 4.75rem);
    --stil-schwer: clamp(5rem, 10vw, 9.375rem);
    --stil-hero-schwer: clamp(5rem, min(20vw, 31svh), 18.75rem);
    --stil-show: clamp(5rem, 9.5vw, 8.75rem);
    --stil-zahl: clamp(4.75rem, 8.8vw, 8.25rem);
    --stil-kontakt: clamp(6rem, 13vw, 12.5rem);
    --stil-event: clamp(6rem, 12vw, 11.5rem);
    --intro-start: .75s;
    --intro-oeffnen: .9s;
    --intro-verz: .95s;
  }
}

/* Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--kopfhoehe); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--nacht);
  color: var(--farbe-text);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--copy-gross);
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
main { background: var(--creme); }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
a, button { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip-link {
  position: fixed; left: var(--rand); top: -4rem; z-index: var(--z-intro);
  padding: .75rem 1.25rem; background: var(--creme); color: var(--nacht);
}
.skip-link:focus { top: 1rem; }

/* Abschnitts-Basis */
.container { width: 100%; max-width: var(--seitenbreite); margin: 0 auto; padding: 0 var(--rand); }
.section-padding { padding: var(--stufe-xl) 0; }
.section-head { margin-bottom: var(--stufe-l); }
.label {
  display: inline-block;
  font-stretch: 115%; font-weight: 600; font-size: var(--copy-mikro);
  letter-spacing: .28em; text-transform: uppercase; line-height: 1.5;
  color: var(--text-oliv);
}
.label-hell { color: var(--gold); }
.sektion-dunkel { background: var(--nacht); color: var(--creme); }
.sektion-dunkel h2, .sektion-dunkel h3 { color: var(--creme); }
.sektion-dunkel p { color: var(--text-auf-dunkel); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .875rem;
  min-height: 3.5rem; padding: 0 2.125rem;
  border-radius: var(--radius);
  font-stretch: 115%; font-weight: 600; font-size: var(--copy-mikro);
  letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  transition: background .25s ease, color .25s ease;
}
.btn svg { transition: transform .3s var(--kurve-aus); }
.btn:hover svg { transform: translateX(6px); }
.btn-primaer { background: var(--nacht); color: var(--creme); }
.btn-weiss { background: var(--creme); color: var(--nacht); }
.btn-weiss:hover { background: var(--gold); }

/* Textlink mit wachsender Linie */
.textlink {
  display: inline-block; padding-block: .75rem; width: fit-content;
  font-stretch: 115%; font-weight: 600; font-size: var(--copy-mikro);
  letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - .5rem) / 100% 1px no-repeat;
  transition: background-size .4s var(--kurve);
}
.textlink:hover { background-size: 35% 1px; }

/* Zweizeilige Ueberschrift */
.titel { line-height: .84; text-transform: uppercase; display: flex; flex-direction: column; }
.titel-leicht { font-stretch: 125%; font-weight: 200; font-size: var(--stil-leicht); }
.titel-schwer { font-stretch: 62%; font-weight: 800; font-size: var(--stil-schwer); white-space: nowrap; }
.kopfzeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; }
.kopfzeile-links { display: flex; flex-direction: column; gap: 1.375rem; }
.kopfzeile-text { flex: 0 1 25rem; }

.funkel { flex: none; animation: funkeln 3.2s ease-in-out infinite; }
.funkel:last-child { animation-delay: 1.6s; }
@keyframes funkeln {
  0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  50% { transform: scale(.55) rotate(45deg); opacity: .55; }
}

/* Header */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: var(--z-kopf);
  display: flex; align-items: center; gap: 1rem;
  padding: .875rem var(--rand);
  color: var(--creme); background: transparent;
  transition: background .3s, transform .4s var(--kurve);
}
.site-header .logo { margin-right: auto; display: block; line-height: 0; }
.site-header .logo img { height: 3.25rem; width: auto; }
.site-header .burger {
  display: none; width: 3rem; height: 3rem;
  background: none; border: 0; cursor: pointer; color: inherit;
  font-size: var(--groesse-icon);
}
.site-header.light {
  background: var(--glas-fuellung); color: var(--creme);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  border-bottom: 1px solid var(--glas-kante); box-shadow: var(--glas-licht);
}
.site-header.versteckt { transform: translateY(-100%); }

/* CMS-Menue-Grundstil */
.cms-menu { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.875rem; margin: 0; padding: 0; }
.cms-menu-item { margin: 0; padding: 0; }
.cms-has-children { position: relative; }
.cms-has-children > a { padding-bottom: 16px; }
.cms-has-children > a::after {
  content: ''; display: inline-block; width: 8px; height: 8px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin-left: 8px; margin-top: -4px; transition: transform .2s ease;
}
.cms-has-children:hover > a::after, .cms-has-children:focus-within > a::after { transform: rotate(225deg); margin-top: 2px; }
.cms-submenu {
  list-style: none; position: absolute; top: 100%; left: 0; min-width: 220px; margin: 0; padding: 8px 0;
  display: none; white-space: nowrap;
  background: var(--nacht); border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 10;
}
.cms-has-children:hover > .cms-submenu, .cms-has-children:focus-within > .cms-submenu { display: block; }
.cms-submenu .cms-menu-item { margin: 0; padding: 0; }
.cms-submenu a { display: block; padding: 10px 16px; color: inherit; text-decoration: none; font: inherit; }

.header-nav a { text-decoration: none; }
.header-nav a {
  position: relative; display: inline-block; padding-block: .5rem;
  font-stretch: 115%; font-weight: 600; font-size: var(--copy-mikro);
  letter-spacing: .16em; text-transform: uppercase;
}
.header-nav .cms-menu > .cms-menu-item > a::before {
  content: ''; position: absolute; left: 0; right: .16em; bottom: .25rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--kurve);
}
.header-nav .cms-menu > .cms-menu-item > a:hover::before,
.header-nav .cms-menu > .cms-menu-item > a.aktiv::before { transform: scaleX(1); transform-origin: left; }
.header-cta {
  min-height: 2.75rem; margin-left: 1.875rem; padding: 0 1.25rem; gap: .625rem;
  background: var(--gold); color: var(--nacht); letter-spacing: .16em;
}
.header-cta:hover { background: var(--creme); }
.header-cta svg { flex: none; }
.header-cta:hover svg { transform: none; }
@media (min-width: 1025px) {
  .site-header { padding-inline: max(3.5rem, calc((100% - var(--seitenbreite)) / 2 + var(--rand))); }
}

/* Mobile-Drawer, Inhalt fuellt das Studio bzw. site.js */
.mobile-nav {
  display: none; position: fixed; inset: 0; z-index: var(--z-drawer);
  background: var(--nacht); color: var(--creme);
  padding: 5.5rem var(--rand) 2rem; overflow: auto;
}
.mobile-nav.is-open { display: block; animation: drawerAuf .35s var(--kurve-aus) both; }
@keyframes drawerAuf { from { opacity: 0; transform: translateY(-12px); } }
.mobile-nav a, .mobile-nav summary {
  display: block; padding: .5rem 0;
  font-stretch: 62%; font-weight: 800; font-size: var(--stil-h3-gross); line-height: 1.15;
  text-transform: uppercase; color: inherit; text-decoration: none;
}
.mobile-nav details summary { list-style: none; cursor: pointer; position: relative; }
.mobile-nav details summary::-webkit-details-marker, .mobile-nav details summary::marker { display: none; content: ''; }
.mobile-nav details summary::after {
  content: '›'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: transform .2s ease;
}
.mobile-nav details[open] summary::after { transform: translateY(-50%) rotate(90deg); }
.mobile-nav details a { padding-left: 1rem; font-size: var(--copy-gross); opacity: .85; }
.mobile-nav .btn { display: inline-flex; margin-top: 2rem; padding: 0 2.125rem; background: var(--gold); color: var(--nacht); font-stretch: 115%; font-weight: 600; font-size: var(--copy-mikro); }
.mobile-nav .close {
  position: absolute; top: 1rem; right: var(--rand); width: 3rem; height: 3rem;
  background: none; border: 0; cursor: pointer; color: inherit; font-size: var(--groesse-icon);
}

@media (max-width: 1024px) {
  .header-nav, .header-cta { display: none; }
  .site-header .burger { display: block; }
  .site-header .logo img { height: 2.75rem; }
}

/* Intro: nur CSS, startet mit dem ersten Paint */
.intro { position: fixed; inset: 0; z-index: var(--z-intro); overflow: hidden; pointer-events: none; animation: introWeg 0s linear calc(var(--intro-start) + var(--intro-oeffnen)) forwards; }
.no-intro .intro { display: none; }
.intro-flaeche {
  position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--nacht);
  animation-duration: var(--intro-oeffnen); animation-timing-function: var(--kurve); animation-delay: var(--intro-start); animation-fill-mode: both;
}
.intro-links { left: 0; animation-name: flaecheLinks; }
.intro-rechts { right: 0; animation-name: flaecheRechts; }
.intro-logo {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: auto; height: 3.9375rem;
  animation: introLogo calc(var(--intro-start) + .25s) ease-out both;
}
@keyframes flaecheLinks { to { transform: translateX(-102%); } }
@keyframes flaecheRechts { to { transform: translateX(102%); } }
@keyframes introLogo { 0% { opacity: 0; transform: scale(.94); } 30%, 72% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes introWeg { to { visibility: hidden; } }

/* Hero-Einblendung, reine Keyframes */
@keyframes heroFade { from { opacity: 0; transform: translateY(14px); } }
@keyframes heroBild { from { transform: scale(1.16); } }
@keyframes heroLeicht { from { opacity: 0; letter-spacing: .85em; } }
@keyframes heroSchwer { from { font-stretch: 112%; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .intro { display: none; }
}

/* === Abschnitt: top START === */
#top { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; background: var(--nacht); color: var(--creme); overflow: hidden; }
#top .hero-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; animation: heroBild 2.2s var(--kurve-aus) var(--intro-verz) both; }
#top .hero-spot { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at var(--spot-x, 50%) var(--spot-y, 42%), var(--nacht-28) 0%, var(--nacht-60) 55%, var(--nacht-95) 100%); }
#top .hero-boden { position: absolute; inset: auto 0 0; height: 26rem; background: linear-gradient(180deg, var(--nacht-00) 0%, var(--nacht-90) 100%); }
#top .hero-inhalt { position: relative; width: 100%; max-width: var(--seitenbreite); margin: 0 auto; padding: 6rem var(--rand) 1.75rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(1rem, 2.6vh, 1.75rem); }
#top .hero-marke { display: flex; align-items: center; gap: .875rem; letter-spacing: .32em; animation: heroFade .7s ease-out calc(var(--intro-verz) + .45s) both; }
#top h1 { display: flex; flex-direction: column; align-items: center; line-height: .82; text-transform: uppercase; }
#top .hero-vorname { font-stretch: 125%; font-weight: 200; font-size: var(--stil-hero-leicht); letter-spacing: .32em; margin-right: -.32em; animation: heroLeicht 1.2s var(--kurve-aus) var(--intro-verz) both; }
#top .hero-nachname { font-stretch: 62%; font-weight: 800; font-size: var(--stil-hero-schwer); letter-spacing: -.01em; animation: heroSchwer 1.3s var(--kurve-aus) calc(var(--intro-verz) - .1s) both; }
#top .hero-lead { max-width: 38.75rem; font-size: var(--stil-lead); line-height: 1.45; color: var(--creme-leise); animation: heroFade .7s ease-out calc(var(--intro-verz) + .6s) both; }
#top .hero-logos { width: 100%; margin-top: clamp(1.75rem, 7vh, 4.25rem); display: flex; flex-direction: column; align-items: center; gap: 1rem; animation: heroFade .7s ease-out calc(var(--intro-verz) + .75s) both; }
#top .hero-logos .label { color: var(--lila-hell); letter-spacing: .24em; white-space: nowrap; }
#top .marken { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.375rem 1.5rem; align-items: center; justify-items: center; }
#top .marke { position: relative; display: block; line-height: 0; }
#top .marke img { width: auto; height: 1rem; max-width: 100%; object-fit: contain; filter: grayscale(1) brightness(0) invert(1) opacity(.62); transition: filter .35s ease, opacity .35s ease; }
#top .marke-gross img { height: 1.625rem; }
#top .marke:hover img { filter: none; }
#top .marke-weiss:hover img { filter: grayscale(1) brightness(0) invert(1); }
#top .marke-bmw .marke-farbe { position: absolute; inset: 0; filter: none; opacity: 0; }
#top .marke-bmw:hover .marke-farbe { opacity: 1; }
#top .marke-bmw:hover img:first-child { opacity: 0; }
@media (min-width: 1025px) {
  #top .hero-logos { flex-direction: row; justify-content: space-between; gap: 3rem; }
  #top .marken { flex: 1; display: flex; justify-content: space-between; gap: 2rem; padding-left: 3rem; border-left: 1px solid var(--creme-35); }
  #top .marke img { height: 1.1875rem; }
  #top .marke-gross img { height: 2rem; }
}
/* === Abschnitt: top ENDE === */

/* === Abschnitt: ouverture START === */
#ouverture { background: var(--creme); }
#ouverture .container { padding-block: clamp(6.5rem, 12vw, 10.5rem); display: flex; flex-direction: column; gap: 2rem; }
#ouverture .satz { font-weight: 300; font-size: var(--stil-satz); line-height: 1.14; letter-spacing: -.015em; }
#ouverture strong { font-weight: 700; }
#ouverture .nowrap { white-space: nowrap; }
#ouverture .punkt { display: inline-block; width: .86em; height: .86em; margin: 0 .14em 0 0; border-radius: 50%; overflow: hidden; vertical-align: -.1em; line-height: 0; }
#ouverture .punkt img { width: 100%; height: 100%; object-fit: cover; }
#ouverture .punkt-musik img { object-position: 40% 30%; }
#ouverture .punkt-magie img { object-position: 70% center; }
/* === Abschnitt: ouverture ENDE === */

/* === Abschnitt: shows START === */
#shows { background: var(--nacht); color: var(--creme); }
#shows .kopfzeile { padding-top: var(--stufe-xl); padding-bottom: 2rem; }
#shows .kopfzeile-text { font-size: var(--copy-gross); color: var(--lila-hell); }
#shows .show-liste { max-width: 88rem; margin: 0 auto; padding: 2.5rem 1rem var(--stufe-xl); display: flex; flex-direction: column; gap: 1rem; }
#shows .show { position: relative; display: block; height: 22rem; overflow: hidden; text-decoration: none; background: var(--nacht); will-change: transform; }
#shows .show-bild { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; transition: scale .9s var(--kurve-aus); }
#shows .show:hover .show-bild { scale: 1.05; }
#shows .show-ananda .show-bild { object-position: center 35%; }
#shows .show::after { content: ''; position: absolute; inset: 0; background: var(--nacht); opacity: var(--abblenden, 0); pointer-events: none; }
#shows .show-verlauf { position: absolute; inset: 0; background: linear-gradient(90deg, var(--nacht-88) 0%, var(--nacht-35) 55%, var(--nacht-10) 100%); }
#shows .show-rechts .show-verlauf { background: linear-gradient(270deg, var(--nacht-88) 0%, var(--nacht-35) 55%, var(--nacht-10) 100%); }
#shows .show-inhalt { position: relative; height: 100%; max-width: 45rem; padding: 1.75rem 1.5rem; display: flex; flex-direction: column; justify-content: space-between; }
#shows .show-rechts .show-inhalt { margin-left: auto; align-items: flex-end; text-align: right; }
#shows .show-meta { display: flex; align-items: center; gap: 1.25rem; font-stretch: 115%; font-weight: 600; font-size: var(--copy-mikro); letter-spacing: .24em; text-transform: uppercase; }
#shows .show-symbol { flex: none; width: 3.5rem; height: 3.5rem; }
#shows .show-unten { display: flex; flex-direction: column; gap: 1.125rem; }
#shows .show-rechts .show-unten { align-items: flex-end; }
#shows .show-name { font-stretch: 62%; font-weight: 800; font-size: var(--stil-show); line-height: .82; text-transform: uppercase; }
#shows .show-text { max-width: 35rem; font-size: var(--copy-gross); color: var(--creme-leise); }
@media (min-width: 1025px) {
  #shows .show { position: sticky; top: var(--kopfhoehe); }
  #shows .show-inhalt { padding: 2.25rem 2.75rem; }
}
/* === Abschnitt: shows ENDE === */

/* === Abschnitt: dirk START === */
#dirk { position: relative; background: var(--sand); color: var(--nacht); }
#dirk .container { padding-block: clamp(7.5rem, 13vw, 11.25rem); display: flex; flex-wrap: wrap; gap: 3.5rem 6rem; align-items: center; }
#dirk .dirk-bildblock { position: relative; flex: 1 1 28.75rem; min-width: 0; }
#dirk .dirk-bild { width: 100%; height: clamp(20rem, 42vw, 31.25rem); object-fit: cover; object-position: 40% center; }
#dirk .dirk-text { flex: 1 1 32.5rem; min-width: 0; display: flex; flex-direction: column; gap: 2rem; }
#dirk .label { color: var(--gold-dunkel); }
#dirk .titel { line-height: .88; }
#dirk .titel-leicht { font-size: var(--stil-leicht-m); }
#dirk p { max-width: 32.5rem; font-size: var(--copy-gross); color: var(--text-tinte); }
#dirk .textlink { color: var(--gold-dunkel); }
/* === Abschnitt: dirk ENDE === */

/* === Abschnitt: festivals START === */
#festivals { background: var(--creme); }
#festivals .container { padding-block: var(--stufe-xl) 7.5rem; display: flex; flex-direction: column; gap: 3.5rem; }
#festivals .kopfzeile-text { font-size: var(--copy-gross); color: var(--text-grau); }
#festivals .raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21.25rem), 1fr)); gap: 3rem 1.75rem; align-items: start; }
#festivals article { display: flex; flex-direction: column; gap: .875rem; }
#festivals .fest-bild { position: relative; margin-bottom: .5rem; height: 21.25rem; overflow: hidden; }
#festivals .fest-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--kurve-aus); }
#festivals article:hover .fest-bild img { transform: scale(1.05); }
#festivals .fest-verlauf { position: absolute; inset: 0; background: linear-gradient(0deg, var(--nacht-88) 0%, var(--nacht-40) 30%, var(--nacht-00) 60%); }
#festivals .fest-zahl { position: absolute; left: 1.75rem; bottom: 1.625rem; display: flex; align-items: baseline; gap: .625rem; font-size: var(--stil-zahl); line-height: .8; letter-spacing: -.02em; color: var(--creme); font-variant-numeric: tabular-nums; }
#festivals .fest-seit { font-stretch: 125%; font-weight: 200; font-size: .2em; letter-spacing: .1em; text-transform: uppercase; }
#festivals .fest-wert { font-stretch: 62%; font-weight: 800; }
#festivals .fest-chip { position: absolute; right: 1.125rem; top: 1.375rem; padding: .5rem .875rem; background: var(--nacht); color: var(--gold); font-stretch: 115%; font-weight: 600; font-size: var(--copy-mikro); letter-spacing: .2em; text-transform: uppercase; }
#festivals h3 { font-size: var(--stil-h3); line-height: 1.2; font-weight: 600; }
#festivals .fest-ort { font-stretch: 115%; font-weight: 600; font-size: var(--copy-mikro); letter-spacing: .2em; text-transform: uppercase; color: var(--text-oliv); }
@media (min-width: 768px) {
  #festivals .raster { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1025px) {
  #festivals .raster { gap: 6rem 1.75rem; }
  #festivals article:nth-child(2) { margin-top: 3rem; }
  #festivals article:nth-child(3) { margin-top: 6rem; }
}
/* === Abschnitt: festivals ENDE === */

/* === Abschnitt: firmenevents START === */
#firmenevents { position: relative; height: clamp(38rem, 100svh, 43.75rem); background: var(--nacht); color: var(--creme); overflow: hidden; }
#firmenevents .event-rahmen { position: absolute; inset: 0; overflow: hidden; }
#firmenevents .event-bild { width: 100%; height: 100%; object-fit: cover; }
#firmenevents .event-verlauf { position: absolute; inset: 0; background: linear-gradient(0deg, var(--nacht-92) 0%, var(--nacht-20) 60%, var(--nacht-40) 100%); }
#firmenevents .container { position: relative; height: 100%; padding-block: 3.5rem; display: flex; flex-direction: column; justify-content: space-between; }
#firmenevents .event-unten { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 2rem; }
#firmenevents .titel { line-height: .82; }
#firmenevents .titel-leicht { font-size: var(--stil-leicht-l); }
#firmenevents .titel-schwer { font-size: var(--stil-event); line-height: 1; padding-top: .14em; }
#firmenevents .event-text { flex: 0 1 25rem; display: flex; flex-direction: column; gap: 1.25rem; }
#firmenevents p { font-size: var(--copy-gross); color: var(--creme-leise); }
#firmenevents .textlink { color: var(--gold); }
/* === Abschnitt: firmenevents ENDE === */

/* === Abschnitt: news START === */
#news { background: var(--creme); }
#news .container { padding-block: clamp(5rem, 8vw, 6.25rem); display: flex; flex-direction: column; gap: 3rem; }
#news .news-raster { display: flex; flex-wrap: wrap; gap: 3rem 4rem; align-items: stretch; }
#news .news-gross { position: relative; flex: 1.5 1 35rem; min-width: 0; min-height: 26rem; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.5rem, 3vw, 2.5rem); color: var(--creme); text-decoration: none; overflow: hidden; }
#news .news-gross img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transition: transform .9s var(--kurve-aus); }
#news .news-gross:hover img { transform: scale(1.04); }
#news .news-verlauf { position: absolute; inset: 0; background: linear-gradient(0deg, var(--nacht-90) 0%, var(--nacht-25) 55%, var(--nacht-00) 100%); }
#news .news-datum { position: relative; font-stretch: 115%; font-weight: 600; font-size: var(--copy-mikro); letter-spacing: .2em; text-transform: uppercase; color: var(--text-oliv); }
#news .news-gross .news-datum { color: var(--gold); }
#news .news-titel-gross { position: relative; margin-top: .875rem; max-width: 35rem; font-weight: 300; font-size: var(--stil-h3-gross); line-height: 1.1; }
#news .news-klein-spalte { flex: 1 1 22.5rem; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; }
#news .news-klein { display: flex; flex-direction: column; gap: 1rem; text-decoration: none; }
#news .news-klein-bild { height: 10.625rem; overflow: hidden; }
#news .news-klein-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--kurve-aus); }
#news .news-klein:hover img { transform: scale(1.05); }
#news .news-titel { font-size: var(--stil-h3); line-height: 1.25; font-weight: 600; }
/* === Abschnitt: news ENDE === */

/* === Abschnitt: kontakt START === */
#kontakt { position: relative; min-height: 36.25rem; display: flex; background: var(--nacht); color: var(--creme); overflow: hidden; }
#kontakt .kontakt-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
#kontakt .kontakt-verlauf { position: absolute; inset: 0; background: linear-gradient(180deg, var(--nacht-55) 0%, var(--nacht-35) 40%, var(--nacht) 100%); }
#kontakt .container { position: relative; padding-block: 3.5rem 4rem; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; gap: 2.25rem; }
#kontakt .kontakt-marke { display: flex; align-items: center; gap: .875rem; letter-spacing: .32em; }
#kontakt .titel { align-items: center; }
#kontakt .kontakt-gruss { font-stretch: 125%; font-weight: 200; font-size: var(--stil-leicht-l); letter-spacing: .24em; margin-right: -.24em; }
#kontakt .titel-schwer { font-size: var(--stil-kontakt); line-height: 1; padding-top: .1em; }
@media (min-width: 1025px) {
  }
/* === Abschnitt: kontakt ENDE === */

/* Footer */
.site-footer { background: var(--nacht); color: var(--lila-hell); }
.site-footer .container { padding-block: 4rem 2rem; display: flex; flex-direction: column; gap: 3rem; }
.fuss-spalten { display: flex; flex-wrap: wrap; gap: 3rem 4rem; justify-content: space-between; }
.fuss-marke { flex: 1.4 1 18.75rem; display: flex; flex-direction: column; gap: 1.25rem; }
.fuss-marke img { height: 3.75rem; width: auto; align-self: flex-start; }
.fuss-marke p { max-width: 20rem; font-size: var(--copy-klein); line-height: 1.6; }
.fuss-spalte { flex: 1 1 10rem; display: flex; flex-direction: column; gap: .25rem; font-size: var(--copy-klein); }
.fuss-kopf { margin-bottom: .5rem; font-stretch: 115%; font-weight: 600; font-size: var(--copy-mikro); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.fuss-spalte a { display: block; padding-block: .625rem; width: fit-content; color: var(--creme); text-decoration: none; }
.fuss-spalte a:hover { color: var(--gold); }
.fuss-spalte .cms-menu { display: block; }
.fuss-direkt { margin-top: 1.125rem; }
.fuss-direkt a { position: relative; padding-block: .125rem; }
.fuss-direkt a::after { content: ''; position: absolute; inset: -.25rem 0; }
.fuss-liste { list-style: none; margin: 0; padding: 0; color: var(--creme); }
.fuss-liste li { padding-block: .625rem; }
.fuss-vorschau { font-stretch: 115%; font-weight: 600; font-size: var(--copy-mikro); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.fuss-unten { display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; align-items: center; padding-top: 1.75rem; border-top: 1px solid var(--creme-14); font-size: var(--copy-klein); color: var(--lila-leise); }

/* Cookie-Banner, nur Optik */
.cookie {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 50;
  display: flex; flex-direction: column; gap: .875rem; padding: 1.25rem;
  background: var(--glas-fuellung); color: var(--creme);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid var(--glas-kante); box-shadow: var(--glas-licht);
  animation: cookieRein .6s var(--kurve-aus) calc(var(--intro-verz) + 1s) both;
}
.cookie img { height: 2.25rem; width: auto; align-self: flex-start; }
.cookie p { font-size: var(--copy-klein); line-height: 1.5; color: var(--creme-leise); }
.cookie-knoepfe { display: flex; flex-wrap: wrap; gap: .625rem; }
.cookie .btn { flex: 1 1 auto; min-height: 2.75rem; padding: 0 .875rem; white-space: nowrap; border: 1px solid var(--gold); background: var(--gold); color: var(--nacht); letter-spacing: .1em; cursor: pointer; font-family: inherit; }
.cookie .btn:hover { background: var(--creme); border-color: var(--creme); }
.cookie .cookie-leise { background: transparent; border-color: var(--creme-35); color: var(--creme); }
.cookie .cookie-leise:hover { background: transparent; border-color: var(--creme); }
@keyframes cookieRein { from { opacity: 0; transform: translateY(24px); } }
@media (min-width: 768px) {
  .cookie { left: auto; right: 1.5rem; bottom: 1.5rem; width: 26.25rem; }
}

/* Rechtsseiten und 404 */
.rechtsseite { background: var(--creme); padding: 9rem 0 var(--stufe-xl); }
.rechtsseite .container { max-width: 50rem; display: flex; flex-direction: column; gap: 1rem; }
.rechtsseite h1 { font-stretch: 62%; font-weight: 800; font-size: var(--stil-schwer); line-height: .9; text-transform: uppercase; margin-bottom: 1.5rem; }
.rechtsseite h2 { margin-top: 1.5rem; font-size: var(--stil-h3); line-height: 1.2; font-weight: 600; }
.rechtsseite a { overflow-wrap: anywhere; }
.rechtsseite .stand { font-size: var(--copy-klein); color: var(--text-oliv); }