/* Eigene Anpassungen an der Framer-Seite.
 *
 * Diese Datei wird von localize.py als letztes Stylesheet in den <head> jeder
 * Seite eingehängt und übersteht damit einen Rebuild.
 *
 * Framer erzeugt seine Überschriften-Styles pro Style-Preset und noch einmal je
 * Breakpoint, mit Klassen-Selektoren wie
 *
 *   .framer-4U4NA .framer-styles-preset-u7nhnr { --framer-font-family: … }
 *
 * Ein Selektor auf h2 ist schwächer als das. Deshalb !important — damit greift
 * die Regel auch in allen Media-Query-Varianten, ohne dass hier jeder
 * Preset-Hash einzeln nachgepflegt werden muss.
 *
 * Framer liest die Schrift über die Custom Property --framer-font-family;
 * font-family wird zusätzlich gesetzt, falls ein Element sie direkt nutzt.
 */

/* Cloister Black — Typographer Mediengestaltung 2001, vollständiger Zeichensatz
 * von Dieter Steffmann. Version 2.50.
 *
 * Lizenz: 1001Fonts Free For Commercial Use (FFC), Volltext in
 * assets/custom/fonts/LICENSE-CloisterBlack.txt. Erlaubt private und
 * kommerzielle Nutzung einschließlich Websites.
 *
 * Punkt 3 der Lizenz untersagt das Verändern der Schriftdatei. Deshalb wird
 * hier bewusst die unveränderte Original-TTF ausgeliefert und nicht nach woff2
 * konvertiert — eine Formatkonvertierung wäre eine Modifikation. TTF wird von
 * allen relevanten Browsern unterstützt (Chrome 4+, Safari 3.1+, Firefox 3.5+).
 */
@font-face {
  font-family: "Cloister Black";
  src: url("/assets/custom/fonts/CloisterBlack.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Startseite: Ensemble-Foto anstelle des Videos.
 *
 * Der Container .framer-qgxm3k-container kommt nur auf der Startseite vor — auf
 * /work läuft dasselbe Video in .framer-1uldnsn-container und bleibt unberührt.
 *
 * aspect-ratio ist nötig: die Höhe des Kastens kam vom <video> selbst
 * (der Container hat height:auto). Ohne würde er beim Ausblenden auf 0
 * zusammenfallen. 1366/720 ist das Seitenverhältnis des Videos, ergibt bei
 * 1356px Breite wieder 715px Höhe — die Seite bleibt also gleich hoch.
 *
 * Der 48px-Radius saß am <video> und wandert mit auf den Container.
 */
.framer-qgxm3k-container {
  /* Höhe des Holzbalkens am oberen Rand. Steht als Variable hier, weil der
   * Vorhang weiter unten genau darunter ansetzen muss — beide Werte dürfen
   * nicht auseinanderlaufen. Prozent bezieht sich in beiden Fällen auf die Höhe
   * dieses Kastens, die Grenzen halten den Balken auf kleinen Schirmen
   * sichtbar und auf großen schlank. */
  --balken: clamp(18px, 5.5%, 46px);

  aspect-ratio: 1366 / 720;
  /* Reihenfolge = Malreihenfolge, die erste Ebene liegt oben:
   *   1. Licht- und Schattenverlauf, gibt dem Balken Plastizität
   *   2. das Holz selbst
   *   3. Schlagschatten des Balkens auf das, was darunter liegt
   *   4. das Ensemble-Foto
   * Die Holztextur ist ein Ausschnitt der Bühnenverkleidung aus dem
   * Originalfoto (unterer Bildrand) — gleiches Holz, gleiches Licht. */
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0) 38%,
      rgba(0, 0, 0, 0.28) 76%,
      rgba(0, 0, 0, 0.6)
    ),
    url("/assets/custom/images/holzbalken.jpg"),
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)),
    url("/assets/custom/images/ensemble.jpg");
  background-size: 100% var(--balken), 100% var(--balken), 100% 18px, cover;
  background-position: top left, top left, left var(--balken), center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  border-radius: 48px;
  overflow: hidden;
}

.framer-qgxm3k-container video {
  display: none !important;
}

/* Theatervorhang über dem Ensemble-Foto.
 *
 * Zwei Hälften als ::before / ::after des Containers. Absichtlich
 * Pseudoelemente und keine echten DOM-Knoten: der Container gehört React, ein
 * eingefügtes <div> würde beim nächsten Rendern verschwinden. Pseudoelemente
 * kann React nicht anfassen.
 *
 * Geöffnet wird über html[data-vorhang="offen"] — das setzt custom.js, sobald
 * das Bild weit genug im Viewport steht (Schwelle ANTEIL in custom.js). Das Attribut sitzt am <html>, also
 * außerhalb des React-Baums.
 *
 * Jede Hälfte ist 52% breit, zusammen 104% — die Überlappung in der Mitte
 * verhindert einen Spalt, egal wie gerundet wird.
 */
.framer-qgxm3k-container::before,
.framer-qgxm3k-container::after {
  content: "";
  position: absolute;
  bottom: -1px;
  width: 52%;
  z-index: 2;
  pointer-events: none;
  background-color: #6d1119;
  /* Falten: harte Schattenkanten mit weichen Lichtkanten dazwischen, plus ein
   * großflächiger Verlauf, der zur Bühnenmitte hin abdunkelt. */
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.5) 0px,
      rgba(0, 0, 0, 0.12) 9px,
      rgba(255, 255, 255, 0.11) 19px,
      rgba(0, 0, 0, 0.14) 30px,
      rgba(0, 0, 0, 0.5) 40px
    );
  /* zweiter Schatten: der Balken wirft auf den Stoff darunter */
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, 0.55),
    inset 0 12px 14px -6px rgba(0, 0, 0, 0.8);
  transition: transform 1.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

/* Der Vorhang hängt unter dem Balken, statt ihn zu überdecken — deshalb setzt
 * er bei var(--balken) an und nicht am oberen Rand. */
.framer-qgxm3k-container::before {
  top: var(--balken);
  left: -1px;
  transform-origin: left center;
}

.framer-qgxm3k-container::after {
  top: var(--balken);
  right: -1px;
  transform-origin: right center;
}

/* Offen: zur Seite ziehen und dabei schmaler werden — der Stoff rafft sich
 * zusammen, statt bloß wegzurutschen. Die rechte Hälfte startet einen Hauch
 * später, damit es nicht mechanisch symmetrisch wirkt. */
html[data-vorhang="offen"] .framer-qgxm3k-container::before {
  transform: translateX(-78%) scaleX(0.82);
}

html[data-vorhang="offen"] .framer-qgxm3k-container::after {
  transform: translateX(78%) scaleX(0.82);
  transition-delay: 0.09s;
}

@media (prefers-reduced-motion: reduce) {
  .framer-qgxm3k-container::before,
  .framer-qgxm3k-container::after {
    transition: none;
  }
}

/* Nur h2 — h1 und h3 bleiben beim Website-Standard (Bebas Neue). */
h2,
h2 * {
  --framer-font-family: "Cloister Black", serif !important;
  font-family: "Cloister Black", serif !important;
  text-transform: none !important;
}

/* Blaue Abschnittsüberschriften auf hellen Flächen verwenden wieder die
 * reguläre schwarze Textfarbe. Weiße h2 in dunklen Bereichen bleiben weiß. */
h2[style*="--token-bfe62d85-2ae5-46af-b69f-6a52c3776753"],
h2[style*="rgb(0, 166, 255)"],
h2[style*="--token-bfe62d85-2ae5-46af-b69f-6a52c3776753"] *,
h2[style*="rgb(0, 166, 255)"] * {
  --framer-text-color: var(
    --token-f2a03c06-0455-4f93-8f1a-935e9ef65f7d,
    rgb(0, 0, 0)
  ) !important;
  color: var(
    --token-f2a03c06-0455-4f93-8f1a-935e9ef65f7d,
    rgb(0, 0, 0)
  ) !important;
}

/* Die bisher rein blaue Framer-Spacer-Fläche neben den Abschnittsüberschriften
 * verwendet jetzt das freigestellte Dommelstadl-Motiv. Größe und Platz des
 * bestehenden Spacers bleiben unverändert; nur sein visueller Inhalt wechselt. */
html [data-nce-sid="10c10s3"],
html .nce-symbol-spacer {
  background: transparent url("/assets/custom/images/dommelstadl-symbol-transparent.png") center / contain no-repeat !important;
}

/* Auf den Stückseiten gehört der abgerundete Außenbereich von „Stimmen aus
 * dem Publikum“ zum weißen Übergang. Dadurch bleibt an den oberen Ecken kein
 * blauer Rand sichtbar; der schwarze Inhaltscontainer bleibt unverändert. */
html [data-nce-sid="z40bju"],
html section[data-framer-name="Tab One"] {
  background: #fff !important;
}

/* Auf der Startseite sollen die Außenflächen der schwarzen FAQ- und
 * Publikumsstimmen-Sektionen ebenfalls schwarz sein. So scheinen an den
 * abgerundeten oberen Ecken keine weißen Keile durch. */
html [data-nce-sid="ywzi6s"],
html [data-nce-sid="1h2z446"],
html.nce-home section.framer-ekgrW,
html.nce-work section.framer-ekgrW,
html.nce-home section.framer-gz6mN[data-framer-name="Tab One"] {
  background: #050505 !important;
}

/* Auch die äußeren Framer-Wrapper der beiden Startseitenbereiche bleiben
 * schwarz. Das verhindert weiße Randkeile an den Rundungen auf Desktop,
 * Tablet und Mobile. */
html.nce-home .framer-1szkkiw-container,
html.nce-home .framer-a01x37-container,
html.nce-home .nce-audience-section,
html.nce-home .nce-audience-shell {
  background: #050505 !important;
}

/* Blaues, transparentes Ornament als verbindendes Element zwischen
 * Publikumsstimmen und häufigen Fragen. Es liegt auf der gemeinsamen Kante
 * und passt seine Größe an die jeweilige Bildschirmbreite an. */
html.nce-home section.framer-ekgrW {
  position: relative;
  z-index: 4;
  background: #050505 !important;
}

html.nce-home section.framer-ekgrW::before {
  content: "";
  position: absolute;
  z-index: 8;
  top: -30px;
  left: 50%;
  width: min(460px, 42vw);
  height: 60px;
  transform: translateX(-50%);
  pointer-events: none;
  background: transparent url("/assets/custom/images/dommelstadl-ornament-transparent.png") center / contain no-repeat;
}

@media (max-width: 1199px) {
  html.nce-home section.framer-ekgrW::before {
    top: -25px;
    width: min(380px, 60vw);
    height: 52px;
  }
}

@media (max-width: 809px) {
  html.nce-home section.framer-ekgrW::before {
    top: -19px;
    width: min(290px, 76vw);
    height: 42px;
  }
}

/* Weißer Übergang zwischen den beiden nun benachbarten Startseitenbereichen.
 * Das Motiv sitzt mittig auf der gemeinsamen Kante und bleibt unabhängig von
 * den internen Framer-Rundungen sichtbar. */
html .nce-performances-shell {
  position: relative;
  z-index: 2;
  background: #fff !important;
}

html .nce-performances-section {
  background: #fff !important;
}

/* CMS-Zustände für die vorhandenen Auftrittszeilen. Die Framer-Komponenten
 * bleiben bestehen; nur nicht veröffentlichte Plätze werden ausgeblendet und
 * ausverkaufte Termine erhalten die gewünschte X-Markierung. */
html .nce-performance-row-hidden {
  display: none !important;
}

/* Die obere, doppelte Anschrift wird nicht mehr gerendert. */
html footer .framer-9lztav {
  display: none !important;
}

/* Der untere Vereinsblock bleibt ohne Framer-Einblendanimation vollständig
 * sichtbar und wird in schmalen Footer-Varianten nicht abgeschnitten. */
html footer .nce-footer-identity,
html footer .nce-footer-identity-block {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transform: none !important;
}

html footer .nce-footer-identity {
  white-space: normal !important;
}

/* Die exportierte Beispiel-Tabelle bleibt unsichtbar, bis die veröffentlichten
 * Auftritte aus Supabase eingesetzt wurden. So erscheint beim Laden kein alter
 * Framer-Inhalt. Die belegte Tabelle wird anschließend sanft eingeblendet. */
html.nce-performance-cms-page [data-framer-name="Misc/Table"] {
  opacity: 0;
  transition: opacity .32s ease;
}

html.nce-performance-cms-page [data-framer-name="Misc/Table"][data-nce-performance-ready="true"] {
  opacity: 1;
}

html .nce-sponsor-tab-hidden {
  display: none !important;
}

html .nce-performance-row-sold-out {
  position: relative;
}

html .nce-performance-row-sold-out::before,
html .nce-performance-row-sold-out::after {
  content: "";
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 3%;
  width: 94%;
  height: 2px;
  pointer-events: none;
  background: currentColor;
  transform-origin: center;
}

html .nce-performance-row-sold-out::before {
  transform: rotate(3deg);
}

html .nce-performance-row-sold-out::after {
  transform: rotate(-3deg);
}

html a.nce-performance-sold-out {
  opacity: .54 !important;
}

html a.nce-performance-sold-out p {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

html .nce-performances-shell::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: -22px;
  left: 50%;
  width: min(360px, 32vw);
  height: 46px;
  transform: translateX(-50%);
  pointer-events: none;
  background: transparent url("/assets/custom/images/dommelstadl-ornament-transparent.png") center / contain no-repeat;
}

@media (max-width: 809px) {
  html .nce-performances-shell::before {
    top: -16px;
    width: min(280px, 62vw);
    height: 36px;
  }
}

/* Originalschrift des gelieferten Kartenbausteins. */
@font-face {
  font-family: "Space Grotesk";
  src: url("https://fonts.gstatic.com/s/spacegrotesk/v22/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7aUUsj.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

/* Schauspieler-Karten – Geometrie des gelieferten Framer-Exports.
 * Desktop: Jede Karte erhält einen eigenen, gleichmäßigen vertikalen
 * Scrollschritt. Horizontale Lage, Breite und Einflugrichtung wechseln weiter
 * frei, damit die wilde Collage des Originals erhalten bleibt.
 * Unter 992px laufen die Karten in ein flexibles Raster über. */
.nce-actors-section {
  --nce-actors-black: #000;
  --nce-actors-white: #fff;
  --nce-actors-accent: #fd6c01;
  --nce-actors-duration: .8s;
  --nce-actors-ease: cubic-bezier(.44, 0, .06, 1);
  width: 100%;
  padding: 100px 0;
  overflow-x: clip;
  background: var(--nce-actors-black);
}

.nce-actors-section,
.nce-actors-section * {
  box-sizing: border-box;
}

.nce-actors-stage {
  z-index: 5;
  width: 100%;
  max-width: 1640px;
  height: min-content;
  margin: 0 auto;
  padding: 0 35px;
  display: grid;
  grid-template-rows: repeat(var(--nce-actors-grid-rows, 3), minmax(0, 1fr));
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  justify-content: center;
  gap: 16px;
  position: relative;
  overflow: visible;
}

.nce-actor-card {
  grid-column: var(--nce-actor-column, auto);
  grid-row: var(--nce-actor-row, auto);
  width: 100%;
  min-width: 0;
  height: min-content;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 20px;
  place-self: start;
  position: relative;
  color: var(--nce-actors-black);
  opacity: 0;
  transform: rotate(var(--nce-actor-rotation, 0deg));
  transition:
    opacity var(--nce-actors-duration) var(--nce-actors-ease) var(--nce-actor-delay, 0s),
    transform var(--nce-actors-duration) var(--nce-actors-ease) var(--nce-actor-delay, 0s);
  transform-origin: center center;
  will-change: transform, opacity;
}

.nce-actor-card.is-visible {
  opacity: 1;
  transform: none;
}

.nce-actor-card--right,
.nce-actor-card--left,
.nce-actor-card--center-offset {
  height: 0;
  min-height: 0;
}

.nce-actor-card--right .nce-actor-shell,
.nce-actor-card--left .nce-actor-shell,
.nce-actor-card--center-offset .nce-actor-shell {
  position: absolute;
}

.nce-actor-card--right .nce-actor-shell {
  width: 350px;
  top: -120px;
  right: 0;
}

.nce-actor-card--left .nce-actor-shell {
  width: 100%;
  right: 0;
  bottom: 230px;
  left: 0;
}

.nce-actor-card--center-offset .nce-actor-shell {
  width: 392px;
  right: -110px;
  bottom: 0;
}

@media (min-width: 992px) {
  .nce-actors-stage {
    height: var(--nce-actors-stage-height, 760px);
    padding: 0 35px;
    display: block;
  }

  .nce-actor-card,
  .nce-actor-card--right,
  .nce-actor-card--left,
  .nce-actor-card--center-offset {
    width: var(--nce-actor-width, 32%);
    height: min-content;
    position: absolute;
    top: var(--nce-actor-top, 0);
    left: var(--nce-actor-left, 0);
    z-index: var(--nce-actor-layer, 1);
    transform: translate3d(var(--nce-actor-flight-x, 0), 120px, 0)
      rotate(var(--nce-actor-rotation, 0deg)) scale(.96);
  }

  .nce-actor-card--right .nce-actor-shell,
  .nce-actor-card--left .nce-actor-shell,
  .nce-actor-card--center-offset .nce-actor-shell,
  .nce-actor-card .nce-actor-shell {
    width: 100%;
    position: relative;
    inset: auto;
  }
}

.nce-actor-shell {
  width: 100%;
  height: min-content;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 0;
  position: relative;
}

.nce-actor-content {
  width: 100%;
  height: min-content;
  padding: 6px 6px 16px;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  overflow: visible;
  background: var(--nce-actors-white);
}

.nce-actor-image {
  width: 100%;
  height: auto;
  aspect-ratio: .868889;
  display: flex;
  place-content: center;
  align-items: center;
  position: relative;
  overflow: clip;
  background: linear-gradient(145deg, var(--nce-actors-accent), #111 78%);
}

.nce-actor-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.nce-actor-initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--nce-actors-white);
  font-family: "Space Grotesk", "Geist", sans-serif;
  font-size: clamp(72px, 8vw, 132px);
  font-weight: 500;
}

.nce-actor-plus {
  z-index: 1;
  width: 36px;
  height: 36px;
  display: block;
  position: absolute;
  right: 15px;
  bottom: 15px;
  overflow: clip;
  background: var(--nce-actors-white);
}

.nce-actor-plus-vertical,
.nce-actor-plus-horizontal {
  z-index: 1;
  position: absolute;
  display: block;
  overflow: clip;
  border-radius: 100px;
  background: var(--nce-actors-black);
}

.nce-actor-plus-vertical {
  width: 2px;
  height: 14px;
  top: calc(50% - 7px);
  left: calc(50% - 1px);
}

.nce-actor-plus-horizontal {
  width: 14px;
  height: 2px;
  top: calc(50% - 1px);
  left: calc(50% - 7px);
}

.nce-actor-info {
  width: 100%;
  height: min-content;
  padding: 0 10px;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  overflow: visible;
}

.nce-actor-name-roll {
  width: 100%;
  height: 30px;
  display: flex;
  flex-flow: column;
  place-content: flex-start;
  align-items: flex-start;
  gap: 0;
  overflow: clip;
}

.nce-actor-name {
  width: 100%;
  flex: none;
  margin: 0;
  font-family: "Cloister Black", serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .015em;
  line-height: 1.4;
  text-transform: none;
  transition: transform .45s var(--nce-actors-ease);
}

.nce-actor-name-accent { color: var(--nce-actors-accent); }

.nce-actor-card:hover .nce-actor-name,
.nce-actor-card:focus-within .nce-actor-name {
  transform: translateY(-100%);
}

.nce-actor-role {
  width: 100%;
  margin: 0;
  color: var(--nce-actors-accent);
  font-family: "Space Grotesk", "Geist", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.nce-actor-stripe {
  width: 100%;
  height: 15px;
  flex: none;
  position: relative;
  overflow: clip;
  background: url("https://mbmqlrtuxasxrjskllub.supabase.co/storage/v1/object/public/cms-images/uploads/dce81f30-b908-47da-a00b-fe88c65e8730.webp") center bottom / cover no-repeat;
}

.nce-actors-empty {
  width: calc(100% - 70px);
  max-width: 1570px;
  margin: 0 auto;
  padding: 28px 0;
  border-block: 1px solid rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .65);
  font-family: "Space Grotesk", "Geist", sans-serif;
  font-size: 14px;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}

@media (max-width: 1279.98px) {
  .nce-actor-name { font-size: 20px; }
}

@media (max-width: 991.98px) {
  .nce-actors-stage {
    padding: 60px 24px 0;
    display: flex;
    flex-flow: wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 30px 16px;
  }

  .nce-actor-card {
    grid-column: auto;
    grid-row: auto;
    align-self: unset;
    flex: 1 0 0;
    width: 1px;
    min-width: 280px;
    height: min-content;
  }

  .nce-actor-card--right,
  .nce-actor-card--left,
  .nce-actor-card--center-offset {
    height: min-content;
  }

  .nce-actor-card--right .nce-actor-shell,
  .nce-actor-card--left .nce-actor-shell,
  .nce-actor-card--center-offset .nce-actor-shell {
    width: 100%;
    position: relative;
    inset: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nce-actor-card,
  .nce-actor-name {
    transition: none;
  }

  .nce-actor-card {
    opacity: 1;
    transform: none;
  }
}
html.nce-work-detail:not(.nce-has-trailer) section[data-framer-name="Where to watch"],
html.nce-work-detail section[data-framer-name="Where to watch"] [data-framer-name="Watch on"] {
  display: none !important;
}

html.nce-about section.framer-iI3Dl {
  display: none !important;
}

/* Die Auftritte-Sektion hat oben abgerundete Ecken. Die äußere Framer-Fläche
 * muss ebenfalls weiß sein, damit an den Rundungen keine schwarzen Ränder
 * sichtbar bleiben. */
html.nce-about section.framer-TI4jo {
  background: #fff !important;
}

.nce-form-status {
  margin: 16px 0 0;
  color: #f4e409;
  font: inherit;
  line-height: 1.4;
}

.nce-form-status[data-state="error"] {
  color: #ffb5b5;
}

.nce-form-status[data-state="success"] {
  color: #c9f5c9;
}

/* Sichtbarer Seitenwechsel-Vorhang. Zwei Pseudo-Elemente reichen aus und sind
 * schon verfuegbar, bevor der Body des neuen Dokuments geparst wurde. Dadurch
 * kann zwischen Ausgangs- und Zielseite kein Framer-Zwischenstand aufblitzen. */
html.nce-navigation-cover {
  overflow: hidden !important;
}

html.nce-navigation-cover::before,
html.nce-navigation-cover::after {
  position: fixed;
  pointer-events: all;
  opacity: 1;
}

html.nce-navigation-cover::before {
  content: "";
  z-index: 2147483646;
  inset: 0;
  background: #fff;
  transform: translateX(0);
  transition: transform 480ms cubic-bezier(.76, 0, .24, 1);
}

html.nce-navigation-cover::after {
  content: attr(data-nce-navigation-label);
  z-index: 2147483647;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: min(84vw, 560px);
  height: clamp(270px, 42vw, 360px);
  padding: clamp(205px, 27vw, 248px) 18px 0;
  background: transparent url("/assets/framer/images/beuZEdm4VMe8qoAOJ9O8ZTsJiEo.png") center top / clamp(150px, 19vw, 205px) auto no-repeat;
  color: #000;
  font-family: "Cloister Black", serif;
  font-size: clamp(34px, 5.5vw, 66px);
  font-weight: 400;
  line-height: .78;
  text-align: center;
  white-space: pre-line;
  transform: translate(-50%, -50%);
  transition: transform 480ms cubic-bezier(.76, 0, .24, 1), opacity 260ms ease;
}

html.nce-navigation-cover-entering::before {
  animation: nce-navigation-panel-in 460ms cubic-bezier(.76, 0, .24, 1) both;
}

html.nce-navigation-cover-entering::after {
  animation: nce-navigation-content-in 400ms cubic-bezier(.22, .61, .36, 1) 90ms both;
}

html.nce-navigation-cover.nce-navigation-cover-leaving::before {
  transform: translateX(-100%);
  pointer-events: none;
}

html.nce-navigation-cover.nce-navigation-cover-leaving::after {
  opacity: 0;
  transform: translate(calc(-50% - 100vw), -50%);
  pointer-events: none;
}

@keyframes nce-navigation-panel-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes nce-navigation-content-in {
  from { opacity: 0; transform: translate(calc(-50% + 72px), -50%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Ein einziger stabiler Erst-Render: Framer darf seine statische Fassung und
 * die anschliessende Hydrierungsfassung nicht sichtbar hintereinander zeigen.
 * Die belegte Flaeche bleibt erhalten, daher gibt es weder einen Sprung noch
 * einen kuenstlichen Ladeplatzhalter. */
html.nce-initial-render-pending body main {
  visibility: hidden !important;
  opacity: 0 !important;
}

html.nce-initial-render-ready body main {
  animation: nce-initial-content-ready 220ms cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes nce-initial-content-ready {
  from { opacity: 0; }
  to { opacity: 1; }
}

html.nce-cms-pending section[data-framer-name="Featured works"] img:not([data-nce-cms-image="true"]),
html.nce-cms-pending.nce-about main section[data-framer-name="Hero"] img:not([data-nce-cms-image="true"]),
html.nce-cms-pending.nce-about main section[data-framer-name="Team Section"] img:not([data-nce-cms-image="true"]),
html.nce-cms-pending.nce-work-detail section[data-framer-name="Hero"] [data-framer-name="Gallery"] img:not([data-nce-cms-image="true"]),
html.nce-cms-pending.nce-work-detail section[data-framer-name="Work Index"] img:not([data-nce-cms-image="true"]),
html.nce-cms-pending section[data-framer-name="Tab One"] [data-framer-name="Link List"] img:not([data-nce-cms-image="true"]),
html.nce-cms-pending img[data-nce-cms-loaded="false"] {
  visibility: hidden !important;
  opacity: 0 !important;
}

img[data-nce-cms-image="true"] {
  transition: opacity 420ms cubic-bezier(.22, .61, .36, 1);
}

img[data-nce-cms-loaded="true"] {
  visibility: visible !important;
  opacity: 1 !important;
}

img[data-nce-cms-load-error="true"] {
  visibility: hidden !important;
  opacity: 0 !important;
}

@keyframes nce-cms-text-enter {
  from { opacity: .18; }
  to { opacity: 1; }
}

.nce-cms-text-enter {
  animation: nce-cms-text-enter 320ms cubic-bezier(.22, .61, .36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  img[data-nce-cms-image="true"] {
    transition: none !important;
  }

  .nce-cms-text-enter {
    animation: none !important;
  }

  html.nce-initial-render-ready body main {
    animation: none !important;
  }

  html.nce-navigation-cover-entering::before,
  html.nce-navigation-cover-entering::after {
    animation-duration: 1ms !important;
  }

}

/* Das breite Hero-Motiv darf auf kleinen Displays den 24px-Framer-Innenabstand
 * überragen. So nutzt das CMS-Bild die komplette Bildschirmbreite, während
 * Überschrift, Tags und Buttons ihre bisherige mobile Geometrie behalten. */
@media (max-width: 809px) {
  html.nce-home section[data-framer-name="Hero"] [data-framer-name="Heading"],
  html.nce-home section[data-framer-name="Hero"] [data-framer-name="Head Text Wrapper"] {
    overflow: visible;
  }

  html.nce-home section[data-framer-name="Hero"] [data-framer-name="Head Text PNG"] {
    flex: 0 0 calc(100% + 48px);
    width: calc(100% + 48px);
  }
}

/* -------------------------------------------------------------------------
 * Farbwelt „Bühnenabend & Naturpapier“
 *
 * Der bisherige reine Schwarz-Weiß-Wechsel war auf großen Flächen sehr hart.
 * Die neue Palette behält die klare Lesbarkeit und das vorhandene Blau, wirkt
 * durch Petrol, warmes Elfenbein und weichere Linien aber deutlich ruhiger.
 * Die Framer-Tokens werden zentral überschrieben; Layout und Typografie bleiben
 * dadurch vollständig unverändert.
 * ---------------------------------------------------------------------- */
:root {
  --nce-palette-ink: #233b40;
  --nce-palette-ink-raised: #2d4a50;
  --nce-palette-paper: #f1e7d8;
  --nce-palette-paper-raised: #faf5eb;
  --nce-palette-blue: #56a3bc;
  --nce-palette-blue-deep: #2f7185;
  --nce-palette-burgundy: #7b3945;
  --nce-palette-brass: #c39b5d;
  --nce-palette-line-light: rgba(241, 231, 216, .38);
  --nce-palette-line-dark: rgba(35, 59, 64, .28);
  --nce-palette-muted-light: #d1c5b4;
  --nce-palette-muted-dark: #62767a;
}

body {
  --token-2143646d-9db7-4dec-abcc-55614351a067: var(--nce-palette-ink) !important;
  --token-f2a03c06-0455-4f93-8f1a-935e9ef65f7d: var(--nce-palette-ink) !important;
  --token-ede42a44-f284-42e7-9990-6df6ce82f708: var(--nce-palette-ink-raised) !important;
  --token-09b2ecc0-efb6-4174-abcc-44492f11cf29: var(--nce-palette-ink) !important;
  --token-6b6bf28f-99e4-4c62-b35e-53079ee2e7b4: var(--nce-palette-paper-raised) !important;
  --token-59ae5d33-e36b-49c6-82d9-00ea556335b5: var(--nce-palette-paper) !important;
  --token-94870a38-5ee9-4d2b-9194-bd124bac36f9: var(--nce-palette-paper-raised) !important;
  --token-1111151d-0370-413f-bd62-0df428accc1c: var(--nce-palette-paper-raised) !important;
  --token-826e0864-882a-4da3-9f0a-28db9591e7cb: var(--nce-palette-paper) !important;
  --token-bfe62d85-2ae5-46af-b69f-6a52c3776753: var(--nce-palette-blue) !important;
  --token-1ad9a475-6549-45b7-9af9-74946ad38785: #b9d9e1 !important;
  --token-44375964-eb8a-4d23-a187-5559aa2bad0d: #b8aca0 !important;
  --token-ef217aa9-5a47-4495-beb5-666e5d2310bd: #938b82 !important;
  --token-14ea3038-ab0c-411f-9db0-fb4e4fd3d6ea: var(--nce-palette-paper-raised) !important;
  --token-503c7b9c-b5de-419b-8730-7ca417c724bb: var(--nce-palette-muted-light) !important;
  --token-2840f3e0-ab4a-44ed-a9f7-4254f7534ac4: #887f76 !important;
  --token-9b374927-ed87-4135-a788-549002107e4b: var(--nce-palette-line-dark) !important;
  --token-1ab08fb1-31c6-4e56-a3c1-a4dd3fd76715: var(--nce-palette-line-light) !important;
  --token-034cf30b-7fa5-4bef-865d-a52dda04945b: rgba(241, 231, 216, .16) !important;
  --token-30ee69d1-cae6-4a5c-9af2-db5c94a12e77: rgba(241, 231, 216, .07) !important;
  background: var(--nce-palette-paper) !important;
  color: var(--nce-palette-ink);
}

/* Große dunkle Framer-Flächen. */
html :is(
  [data-nce-sid="15acgcz"], [data-nce-sid="15oy482"],
  [data-nce-sid="18u3d1y"], [data-nce-sid="1902fcs"],
  [data-nce-sid="1c1rz8o"], [data-nce-sid="1fd7l4f"],
  [data-nce-sid="1mfklsk"], [data-nce-sid="1s0zwhf"],
  [data-nce-sid="1tam0a9"], [data-nce-sid="2m5f4m"],
  [data-nce-sid="3ktj8z"], [data-nce-sid="7pf6p7"],
  [data-nce-sid="arz0t3"], [data-nce-sid="bxnebj"],
  [data-nce-sid="mdnuza"], [data-nce-sid="q0n9ar"]
) {
  background-color: var(--nce-palette-ink) !important;
  background: var(--nce-palette-ink) !important;
}

/* Große helle Framer-Flächen und Karten. */
html :is(
  [data-nce-sid="12ldhlk"], [data-nce-sid="16ed37x"],
  [data-nce-sid="1ck47w3"], [data-nce-sid="1e9zn4v"],
  [data-nce-sid="1een8dt"], [data-nce-sid="1h2z446"],
  [data-nce-sid="1iqt6z6"], [data-nce-sid="2ifybz"],
  [data-nce-sid="apmi86"], [data-nce-sid="au3u67"],
  [data-nce-sid="fnjcw3"], [data-nce-sid="kpj26z"],
  [data-nce-sid="v0qp9g"], [data-nce-sid="wjeg42"],
  [data-nce-sid="ywzi6s"], [data-nce-sid="z40bju"]
) {
  background-color: var(--nce-palette-paper) !important;
  background: var(--nce-palette-paper) !important;
}

/* Das Markenblau bleibt erhalten, wird aber etwas gedeckter. */
html [data-nce-sid="1x2qi0n"] {
  background-color: var(--nce-palette-blue) !important;
  background: var(--nce-palette-blue) !important;
  border-color: var(--nce-palette-blue) !important;
}

html.nce-home section.framer-ekgrW,
html.nce-home section.framer-gz6mN[data-framer-name="Tab One"],
html.nce-home .framer-1szkkiw-container,
html.nce-home .framer-a01x37-container,
html.nce-home .nce-audience-section,
html.nce-home .nce-audience-shell {
  background: var(--nce-palette-ink) !important;
}

html .nce-performances-shell,
html .nce-performances-section,
html.nce-about section.framer-TI4jo,
html section[data-framer-name="Tab One"] {
  background: var(--nce-palette-paper) !important;
}

/* Eigene Inhaltsbausteine übernehmen dieselbe Farbwelt. */
.nce-actors-section {
  --nce-actors-black: var(--nce-palette-ink);
  --nce-actors-white: var(--nce-palette-paper-raised);
  --nce-actors-accent: var(--nce-palette-burgundy);
  background: var(--nce-palette-ink);
}

.nce-actor-image {
  background: linear-gradient(145deg, var(--nce-palette-burgundy), var(--nce-palette-ink-raised) 78%);
}

.nce-actors-empty {
  border-color: var(--nce-palette-line-light);
  color: var(--nce-palette-muted-light);
}

/* Seitenwechsel fügt sich nun in die Website ein, statt reinweiß aufzublitzen. */
html.nce-navigation-cover::before {
  background: var(--nce-palette-paper);
}

html.nce-navigation-cover::after {
  color: var(--nce-palette-ink);
}

/* Kartenreservierung: gedämpftes Blau, weiche Papierflächen und Petrolkontur. */
html .seat-picker {
  border-color: var(--nce-palette-ink);
  background: #78afbc;
  box-shadow: 8px 8px 0 var(--nce-palette-ink);
}

html .seat-picker-head h3,
html .step-kicker,
html .seat-legend,
html .seat-row > b,
html .stage,
html .seat-loading {
  color: var(--nce-palette-ink);
}

html .seat-picker-head strong,
html .seat-key,
html .seat,
html .seat-help {
  border-color: var(--nce-palette-ink);
  background: var(--nce-palette-paper-raised);
  color: var(--nce-palette-ink);
}

html .seat.is-selected,
html .seat-key.is-selected {
  border-color: var(--nce-palette-burgundy);
  background: var(--nce-palette-burgundy);
  color: var(--nce-palette-paper-raised);
}

html .seat.is-occupied,
html .seat-key.is-occupied {
  border-color: var(--nce-palette-muted-dark);
  background: var(--nce-palette-muted-dark);
  color: var(--nce-palette-paper-raised);
}

html .seat.is-blocked,
html .seat-key.is-blocked {
  border-color: var(--nce-palette-ink);
  background: repeating-linear-gradient(135deg, var(--nce-palette-ink) 0 4px, var(--nce-palette-paper) 4px 8px);
}

html .seat:hover:not(:disabled) {
  border-color: var(--nce-palette-ink);
  box-shadow: 0 4px 0 var(--nce-palette-ink);
}

/* Die eigenständige Suchseite war nicht Teil der Framer-Farb-Tokens. */
html .search-container input[type="search"],
html .result-item {
  border-color: #c8baa7;
  background: var(--nce-palette-paper-raised);
  color: var(--nce-palette-ink);
}

html .search-container input[type="search"]:focus {
  border-color: var(--nce-palette-blue-deep);
}

html .result-title {
  color: var(--nce-palette-blue-deep);
}

html .result-path,
html .result-excerpt,
html .count,
html .no-results {
  color: var(--nce-palette-muted-dark);
}

/* Die Karten-Seite besitzt zusätzlich eigene, kurze Farbnamen. */
html {
  --blue: var(--nce-palette-blue) !important;
  --black: var(--nce-palette-ink) !important;
  --panel: var(--nce-palette-ink-raised) !important;
  --field: #36565c !important;
  --white: var(--nce-palette-paper-raised) !important;
  --muted: var(--nce-palette-muted-light) !important;
  --line: #61767a !important;
}

html body,
html .framer-iI8DY {
  background: var(--nce-palette-paper) !important;
}

html .ticket-section {
  color: var(--nce-palette-paper-raised);
  background: var(--nce-palette-ink);
}

html .ticket-form,
html .season-card {
  border-color: #61767a;
  background: var(--nce-palette-ink-raised);
  box-shadow: 0 18px 46px rgba(17, 38, 42, .2);
}

html .intro-copy,
html .consent,
html .submit-note,
html .field-hint,
html .form-heading span,
html .season-meta,
html .summary-row,
html .cinema-booking .form-heading p {
  color: var(--nce-palette-muted-light);
}

html .field input,
html .field select,
html .field textarea {
  border-color: #61767a;
  color: var(--nce-palette-paper-raised);
  background: #36565c;
}

html .field input::placeholder,
html .field textarea::placeholder {
  color: #b7aa9a;
}

html .field input:focus,
html .field select:focus,
html .field textarea:focus {
  border-color: var(--nce-palette-blue);
  box-shadow: 0 0 0 3px rgba(86, 163, 188, .2);
}

html .submit-button {
  color: var(--nce-palette-ink);
  background: var(--nce-palette-paper-raised);
}

html .submit-button:hover {
  color: var(--nce-palette-paper-raised);
  background: var(--nce-palette-burgundy);
}

/* Exportierte Sonder-Wrapper, die keine Framer-Farb-Tokens verwenden. */
html .framer-1mn0zdp,
html .framer-footer-host,
html .framer-footer-frame {
  background: var(--nce-palette-paper) !important;
}
