/* ==========================================================================
   die-pro — Komponenten
   Videobühne, Masonry, Buttons, Cards, Navigation, Tags.
   Farben und Größen ausschließlich über Tokens.
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-demi);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.btn:hover { background-color: var(--color-accent-hover); color: var(--color-accent-contrast); transform: translateY(-0.0625rem); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn--ghost:hover { background-color: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }

.btn--solid { background-color: var(--color-text); color: var(--color-bg); }
.btn--solid:hover { background-color: var(--color-accent); color: var(--color-accent-contrast); }

.btn--lg { padding: var(--space-sm) var(--space-lg); font-size: var(--text-base); }

/* Pfeil wandert beim Hover — kleine Geste, kein Layoutsprung */
.btn__arrow { transition: transform var(--duration-base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(var(--space-3xs)); }

/* --- Tags ----------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3xs) var(--space-2xs);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
}
.tag:hover, .tag[aria-current="true"] {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* --- Videobühne: der Fullscreen-Trailer ----------------------------------- */

.stage {
  position: relative;
  min-height: 100svh;              /* svh: keine Sprünge durch mobile Browserleisten */
  display: grid;
  grid-template-areas: "stage";
  isolation: isolate;
  overflow: hidden;
  background-color: var(--dp-ink);
  /* Fest auf Weiß, nicht über eine Rolle: Die Bühne liegt immer auf Video
     oder abgedunkeltem Bild. Über --color-text-invert kippte die Schrift ins
     Dunkelgraue, sobald die Bühne selbst ein dunkles Bereichsthema trug —
     dunkle Schrift auf dunklem Grund, praktisch unlesbar. */
  color: var(--dp-white);
}
.stage .t-lead,
.stage .stage__meta { color: color-mix(in srgb, var(--dp-white) 74%, transparent); }
.stage .t-eyebrow { color: var(--dp-orange); }
.stage > * { grid-area: stage; }

.stage__media,
.stage__media video,
.stage__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: var(--z-media);
}

.stage__scrim {
  z-index: var(--z-scrim);
  background-image: var(--gradient-scrim-bottom);
  pointer-events: none;
}

.stage__content {
  position: relative;
  z-index: var(--z-content);
  align-self: end;
  width: 100%;
  max-width: var(--width-wide);
  margin-inline: auto;
  padding: var(--gutter);
  padding-bottom: clamp(var(--space-lg), 8vh, var(--space-2xl));
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.stage__title {
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-hero);
  font-weight: var(--weight-bold);
  max-width: 14ch;
  text-wrap: balance;
}
/* SplitText legt Zeilenmasken an. Ohne das hier schneidet die Maske
   Unterlängen ab, sobald die Zeile animiert wird. */
.stage__title .split-line { padding-bottom: 0.08em; }

.stage__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-text-invert-muted);
}

/* Ganze Bühne klickbar, ohne den Link über den Text zu legen */
.stage__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-content);
}

.stage--compact { min-height: 72svh; }

/* Tonschalter und Scroll-Hinweis */
.stage__controls {
  position: absolute;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: var(--z-overlay);
  display: flex;
  gap: var(--space-2xs);
}

.icon-btn {
  display: grid;
  place-items: center;
  inline-size: var(--space-lg);
  block-size: var(--space-lg);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--dp-ink) 45%, transparent);
  color: var(--dp-white);
  cursor: pointer;
  backdrop-filter: blur(0.5rem);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.icon-btn:hover { background-color: color-mix(in srgb, var(--dp-ink) 75%, transparent); }

/* --- Masonry --------------------------------------------------------------
   Spaltenfluss ueber CSS columns: echte Bildhoehen bestimmen den Fluss.
   Jedes Item bekommt sein gemessenes Seitenverhaeltnis als --ar, damit das
   Layout steht, bevor das erste Bild geladen ist.

   Die Spaltenzahl wird an EINER Stelle gesetzt — mobile first, aufsteigend.
   Vorher standen Varianten-Klassen hinter den Media Queries und haben sie
   ueberschrieben; auf dem Handy liefen dadurch drei Spalten statt einer.
   -------------------------------------------------------------------------- */

.masonry {
  --masonry-cols: 1;
  columns: var(--masonry-cols);
  column-gap: var(--masonry-gap);
}

/* Handy: ein Bild pro Zeile, randlos ueber die volle Breite. Ein Foto quer
   ueber das Display wirkt wie ein Filmbild — drei Spalten wirken wie
   Briefmarken. */
@media (max-width: 47.9375rem) {
  .masonry--case {
    margin-inline: calc(var(--gutter) * -1);
    --masonry-gap: var(--space-2xs);
  }
  .masonry--case .masonry__item { border-radius: var(--radius-none); }
  .masonry--case .masonry__break { padding-inline: var(--gutter); }
}

@media (min-width: 48rem)   { .masonry { --masonry-cols: 2; } }
@media (min-width: 75rem)   { .masonry { --masonry-cols: 3; } }

.masonry__item {
  break-inside: avoid;
  margin-bottom: var(--masonry-gap);
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-surface-raised);
}
.masonry__item img,
.masonry__item video {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar, auto);
  object-fit: cover;
}

.masonry__caption {
  padding: var(--space-2xs) var(--space-xs) var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Alternative: echtes Raster mit Spannweiten für kuratierte Strecken */
.mgrid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--masonry-gap);
}
.mgrid__item { grid-column: span var(--span, 4); border-radius: var(--radius-md); overflow: hidden; }
.mgrid__item img, .mgrid__item video { width: 100%; aspect-ratio: var(--ar, auto); object-fit: cover; }
@media (max-width: 60rem) { .mgrid { grid-template-columns: repeat(6, 1fr); } .mgrid__item { --span: 6; } }

/* --- Case-Karte ----------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  text-decoration: none;
  color: inherit;
}
.card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  aspect-ratio: var(--ar, 16 / 9);
}
.card__media img, .card__media video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-expo);
}
.card:hover .card__media img, .card:focus-visible .card__media img { transform: scale(1.04); }

.card__title { font-size: var(--text-lg); font-weight: var(--weight-demi); line-height: var(--leading-snug); }
.card__meta  { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Video-Vorschau, die beim Hover anspringt */
.card__preview {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}
.card:hover .card__preview, .card:focus-within .card__preview { opacity: 1; }

.card__link::after { content: ""; position: absolute; inset: 0; }

/* --- Kopfzeile ------------------------------------------------------------ */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  block-size: var(--header-height);
  display: flex;
  align-items: center;
  transition: background-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.site-header[data-scrolled="true"] {
  background-color: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(0.75rem);
  border-bottom: var(--border-hairline) solid var(--color-border);
}
.site-header[data-hidden="true"] { transform: translateY(-100%); }

.site-header__inner {
  inline-size: 100%;
  max-inline-size: var(--width-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.nav { display: flex; gap: var(--space-md); align-items: center; }
.nav a { font-size: var(--text-sm); font-weight: var(--weight-demi); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--color-accent); }

@media (max-width: 52rem) { .nav--main { display: none; } }

/* --- Fußzeile ------------------------------------------------------------- */

.site-footer {
  background-color: var(--color-bg-invert);
  color: var(--color-text-invert);
  padding-block: var(--space-2xl) var(--space-lg);
}
.site-footer a { color: var(--color-text-invert-muted); }
.site-footer a:hover { color: var(--color-accent); }

/* --- Styleguide-eigene Darstellung ---------------------------------------- */

.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-sm); }
.sg-swatch { border: var(--border-hairline) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.sg-swatch__chip { block-size: var(--space-2xl); }
.sg-swatch__label { padding: var(--space-2xs) var(--space-xs); font-size: var(--text-xs); }
.sg-swatch__label code { display: block; color: var(--color-text-muted); font-size: var(--text-2xs); }

.sg-row { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: var(--space-sm); align-items: baseline;
          padding-block: var(--space-xs); border-top: var(--border-hairline) solid var(--color-border); }
.sg-row__key { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }

.sg-space { background-color: var(--color-accent); block-size: var(--space-sm); border-radius: var(--radius-sm); }

.sg-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-sm); }
.sg-theme { padding: var(--space-md); border-radius: var(--radius-md); background-color: var(--color-bg); color: var(--color-text);
            border: var(--border-hairline) solid var(--color-border); }

/* --- Case-Detailseite ------------------------------------------------------ */

.stage__video {
  /* Vimeo liefert immer 16:9. Damit das Video die Bühne randlos füllt, wird
     es überskaliert und mittig beschnitten — wie object-fit: cover, das auf
     einem iframe nicht greift. Die Rechnung deckt beide Fälle ab: sehr breite
     Fenster (Höhe wächst mit) und sehr hohe (Breite wächst mit). */
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  width: max(100%, 177.7778vh);   /* 16/9 der Viewporthöhe */
  height: max(100%, 56.25vw);     /* 9/16 der Viewportbreite */
  border: 0;
  pointer-events: none;
}

/* Der Medienbereich klammert das überskalierte Video ein */
.stage__media {
  position: relative;
  overflow: hidden;
}
.stage__poster {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: 0;
}
.stage__video { z-index: 1; }

/* Scrollhinweis: eine ruhige Linie, die andeutet, dass es weitergeht */
.stage__cue {
  position: absolute;
  inset-block-end: var(--space-md);
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: var(--z-overlay);
  inline-size: var(--border-hairline);
  block-size: var(--space-lg);
  background: linear-gradient(to bottom, transparent, var(--dp-white));
  opacity: 0.7;
}
@media (prefers-reduced-motion: no-preference) {
  .stage__cue { animation: cue 2.4s var(--ease-inout) infinite; transform-origin: bottom; }
  @keyframes cue { 0%, 100% { scale: 1 0.4; opacity: 0.3; } 50% { scale: 1 1; opacity: 0.8; } }
}

.case-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  border-top: var(--border-hairline) solid var(--color-border);
}
.case-facts__item .rte { max-width: none; }

.credits {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3xs) var(--space-sm);
  font-size: var(--text-sm);
  margin: 0;
}
.credits dt { color: var(--color-text-muted); }
.credits dd { margin: 0; }

/* Text- und Videobloecke brechen im Spaltenfluss auf volle Breite aus */
.masonry__break {
  column-span: all;
  margin-block: var(--space-xl);
}
.masonry__break .wrap { padding-inline: 0; margin-inline: auto; }

.video-frame {
  position: relative;
  aspect-ratio: var(--ar, 16 / 9);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-bg-invert);
  max-width: var(--width-page);
  margin-inline: auto;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame--portrait { max-width: 26rem; }

/* --- Kartenraster ---------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-md);
}
@media (max-width: 34rem) { .card-grid { grid-template-columns: 1fr; } }

/* --- Startseite: Kompetenzfelder ------------------------------------------- */

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--border-hairline);
  background-color: var(--color-border);
  border-block: var(--border-hairline) solid var(--color-border);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-lg) var(--space-md);
  background-color: var(--color-bg);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--duration-base) var(--ease-out);
}
.field:hover { background-color: var(--color-bg-accent); }
.field__title { font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.field__text  { font-size: var(--text-sm); color: var(--color-text-muted); flex: 1; }
.field__more  { font-size: var(--text-xs); font-weight: var(--weight-demi);
                letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent); }

/* --- Hervorgehobener Block (frama.studio) ---------------------------------- */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
@media (max-width: 60rem) { .feature { grid-template-columns: 1fr; } }
.feature__text { --flow: var(--space-md); }
.feature__list { display: grid; gap: var(--space-2xs); padding: 0; list-style: none; }
.feature__list li {
  padding-left: var(--space-md);
  position: relative;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.feature__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  inline-size: var(--space-2xs); block-size: var(--border-thick);
  background-color: var(--color-accent);
}

/* --- Team ------------------------------------------------------------------ */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-md);
  padding: 0;
}
.team-card__photo {
  aspect-ratio: var(--ar, 3 / 4);
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  margin-bottom: var(--space-2xs);
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover;
                        filter: grayscale(1); transition: filter var(--duration-base) var(--ease-out); }
.team-card:hover .team-card__photo img { filter: grayscale(0); }
.team-card__name { font-weight: var(--weight-demi); }
.team-card__role { font-size: var(--text-sm); color: var(--color-text-muted); }

/* --- Listenzeile (Kompetenzen, Jobs) --------------------------------------- */

.kompetenz-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--space-md);
  border-top: var(--border-hairline) solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: padding-inline var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}
.kompetenz-row:last-child { border-bottom: var(--border-hairline) solid var(--color-border); }
.kompetenz-row:hover { padding-inline: var(--space-sm); color: var(--color-accent); }
.kompetenz-row__title { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.kompetenz-row__count { font-size: var(--text-sm); color: var(--color-text-muted); }

/* --- Zweispalter mit Bild --------------------------------------------------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
.split--flip .split__media { order: 2; }
@media (max-width: 60rem) { .split { grid-template-columns: 1fr; } .split--flip .split__media { order: 0; } }
.split__media { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: var(--ar, 4 / 3); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.section--alt { background-color: var(--color-bg-alt); }

/* --- Kontaktkarte, Hinweis --------------------------------------------------- */

.contact-card {
  padding: var(--space-md);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
}
.contact-card > * + * { margin-top: var(--space-2xs); }

.notice {
  padding: var(--space-sm) var(--space-md);
  border-left: var(--border-thick) solid var(--color-signal);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.stage__logo { max-height: var(--space-xl); width: auto; margin-bottom: var(--space-sm); }

/* --- Zitate ---------------------------------------------------------------- */

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--space-lg); }
.quote { margin: 0; padding: var(--space-md); border-left: var(--border-thick) solid var(--color-accent); }
.quote blockquote { margin: 0 0 var(--space-sm); }
.quote blockquote p { font-size: var(--text-lg); line-height: var(--leading-snug); }
.quote figcaption { font-size: var(--text-sm); }

/* --- Häufige Fragen -------------------------------------------------------- */

.faq { border-bottom: var(--border-hairline) solid var(--color-border); }
.faq summary {
  padding-block: var(--space-sm);
  font-size: var(--text-lg);
  font-weight: var(--weight-demi);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-accent); font-weight: var(--weight-bold); }
.faq[open] summary::after { content: "–"; }
.faq p { padding-bottom: var(--space-md); color: var(--color-text-muted); max-width: var(--measure); }

/* --- Markenbadge -----------------------------------------------------------
   Die Marken unterscheiden sich nicht mehr über eigene Farbwelten, sondern
   nur noch über dieses Label. Eine Gestaltung, ein Kennzeichen.
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background-color: var(--dp-beige);
  color: color-mix(in srgb, var(--dp-ink) 72%, transparent);
  white-space: nowrap;
}
.badge--quiet {
  background-color: transparent;
  color: var(--color-text-muted);
  border: var(--border-hairline) solid var(--color-border);
}

.btn__play { font-size: 0.8em; }

/* Trailer-Hinweis auf der Karte */
.card__badges {
  position: absolute;
  inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  z-index: var(--z-content);
  display: flex;
  gap: var(--space-3xs);
}

/* --- Menüknopf -------------------------------------------------------------
   Zwei Striche, die sich beim Öffnen zum Kreuz drehen. Der Zustand hängt am
   aria-expanded des Knopfes — eine Quelle für Technik und Hilfsmittel.
   -------------------------------------------------------------------------- */

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-demi);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.menu-toggle:hover { background-color: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }

.menu-toggle__icon {
  position: relative;
  inline-size: 1.125rem;
  block-size: 0.625rem;
}
.menu-toggle__icon span {
  position: absolute;
  inset-inline: 0;
  block-size: var(--border-thick);
  background-color: currentColor;
  transition: translate var(--duration-base) var(--ease-out),
              rotate var(--duration-base) var(--ease-out);
}
.menu-toggle__icon span:first-child { inset-block-start: 0; }
.menu-toggle__icon span:last-child  { inset-block-end: 0; }

.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:first-child { translate: 0 0.25rem; rotate: 45deg; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:last-child  { translate: 0 -0.25rem; rotate: -45deg; }

/* Beim geöffneten Menü sitzt der Knopf über dem Panel */
.menu-toggle[aria-expanded="true"] {
  color: var(--dp-white);
  border-color: color-mix(in srgb, var(--dp-white) 40%, transparent);
}
.menu-toggle[aria-expanded="true"]:hover { background-color: var(--dp-white); color: var(--dp-ink); }

@media (max-width: 34rem) {
  .site-header__kontakt { display: none; }
  .menu-toggle__label { display: none; }
  .menu-toggle { padding: var(--space-xs); }
}

/* --- Seitenmenü ------------------------------------------------------------ */

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  visibility: hidden;
  /* Beim Schließen erst am Ende der Bewegung unsichtbar schalten, beim
     Öffnen sofort — deshalb die Verzögerung nur in eine Richtung. */
  transition: visibility 0s linear var(--duration-slow);
}
.menu[data-open="true"] { visibility: visible; transition-delay: 0s; }

.menu__scrim {
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--dp-ink) 62%, transparent);
  backdrop-filter: blur(0.25rem);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}
.menu[data-open="true"] .menu__scrim { opacity: 1; }
.menu[data-open="true"] .menu__panel { transform: translateX(0); }

.menu__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(100%, 34rem);
  background-color: var(--color-bg);
  color: var(--color-text);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Das Panel fährt per CSS-Transition. GSAP fasst diese Eigenschaft nicht
     an — zwei Systeme auf derselben Transform führen sonst dazu, dass eines
     das andere überschreibt und das Panel stehen bleibt. */
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-expo);
  /* Weiche Kante zur Seite hin, damit das Panel nicht wie ein Kasten wirkt */
  box-shadow: var(--shadow-lg);
}

.menu__inner {
  min-block-size: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-xl);
  padding: calc(var(--header-height) + var(--space-xl)) var(--gutter) var(--space-xl);
}

.menu__list { display: flex; flex-direction: column; margin: 0; padding: 0; }

.menu__item a {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding-block: var(--space-xs);
  text-decoration: none;
  color: inherit;
  border-block-end: var(--border-hairline) solid var(--color-border);
  transition: color var(--duration-fast) var(--ease-out),
              padding-inline-start var(--duration-base) var(--ease-out);
}
.menu__item a:hover,
.menu__item a[aria-current="page"] {
  color: var(--color-accent);
  padding-inline-start: var(--space-xs);
}

.menu__index {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-faint);
}
.menu__label {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

.menu__meta {
  display: grid;
  gap: var(--space-md);
  font-size: var(--text-sm);
}
.menu__meta address { font-style: normal; color: var(--color-text-muted); }
.menu__rechtliches { display: flex; gap: var(--space-md); font-size: var(--text-xs); }

/* Kein JavaScript: Menü bleibt offen und lesbar statt unerreichbar */
.no-js .menu { position: static; visibility: visible; }
.no-js .menu__panel { position: static; inline-size: 100%; translate: none; box-shadow: none; }
.no-js .menu__scrim, .no-js .menu-toggle { display: none; }

/* Kopfzeile über der Videobühne: heller Grund liegt dort nicht vor, also
   muss die Schrift hell sein. Sobald gescrollt wird, legt sich der eigene
   Hintergrund darunter und die normalen Farbrollen greifen wieder. */
.site-header[data-over-media="true"][data-scrolled="false"] {
  color: var(--dp-white);
}
.site-header[data-over-media="true"][data-scrolled="false"] .btn--ghost,
.site-header[data-over-media="true"][data-scrolled="false"] .menu-toggle {
  color: var(--dp-white);
  border-color: color-mix(in srgb, var(--dp-white) 45%, transparent);
}
.site-header[data-over-media="true"][data-scrolled="false"] .btn--ghost:hover,
.site-header[data-over-media="true"][data-scrolled="false"] .menu-toggle:hover {
  background-color: var(--dp-white);
  color: var(--dp-ink);
  border-color: var(--dp-white);
}
.site-header__logo { text-decoration: none; font-size: var(--text-lg); }