.elementor-kit-2458{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-2458 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --primary-100:#97BAC4; --primary-200:#83ADB9; --primary-300:#6FA0AE; --primary-400:#62909D; --primary-500:#55808B; --primary-600:#48707A; --primary-700:#3B5F68; --primary-800:#304E55; --primary-900:#253D41; }
/* Start custom CSS *//* Zentrale, fehlertolerante Eingangsanimation.
   Ohne aktivierten Observer bleiben alle Inhalte sichtbar. */
.kuchinka-fi.kuchinka-fi-active {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s ease, transform .65s ease;
  will-change: opacity, transform;
}
.kuchinka-fi.kuchinka-fi-active.vis {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .kuchinka-fi {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
}

/* Wiederverwendbarer Rollenblock für Projektkarten */
/* Der Rollenblock bleibt innerhalb jeder Karte horizontal zentriert. */
.pts-role-component-instance {
  width: 100% !important;
  margin-inline: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45rem !important;
  overflow: visible !important;
}

/* Die Atomic-SVG-Widgets werden als echte Flex-Kreise zentriert; damit verschwindet der Baseline-Versatz. */
.pts-role-component-instance [id^="projekt-rolle-"] {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  box-sizing: border-box;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  overflow: visible !important;
  opacity: 1;
  color: rgba(59,95,104,.42) !important;
  background: rgba(255,255,255,.84) !important;
  box-shadow: 0 2px 8px rgba(37,61,65,.11);
  transition: transform 320ms cubic-bezier(.22,.61,.36,1), opacity 220ms ease, color 220ms ease;
}

/* Das eigentliche SVG sitzt unabhängig von Elementor-Line-Height exakt in der Kreismitte. */
.pts-role-component-instance [id^="projekt-rolle-"] svg {
  width: 13px !important;
  height: 13px !important;
  display: block !important;
  margin: 0 !important;
  fill: none !important;
  stroke: currentColor !important;
}

.pts-role-component-instance [id^="projekt-rolle-"] svg * {
  fill: none !important;
  stroke: currentColor !important;
}

/* Inaktive Icons werden beim Hover heller; der Tooltip behält volle Deckkraft. */
.pts-role-component-instance [id^="projekt-rolle-"]:hover,
.pts-role-component-instance [id^="projekt-rolle-"]:focus-visible {
  color: rgba(59,95,104,.62) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 2px 10px rgba(37,61,65,.13);
}

/* Nur die am jeweiligen Projekt gesetzten Rollen erhalten das aktive Design der HTML-Vorlage. */
.e-loop-item.rolle-schauspieler #projekt-loop-rollen-global #projekt-rolle-schauspiel,
.e-loop-item.rolle-regisseur #projekt-loop-rollen-global #projekt-rolle-regie,
.e-loop-item.rolle-autor #projekt-loop-rollen-global #projekt-rolle-autor,
.e-loop-item.rolle-musiker #projekt-loop-rollen-global #projekt-rolle-musik,
.elementor-location-single.rolle-schauspieler #projekt-meta-atomic #projekt-detail-rollen-global #projekt-rolle-schauspiel,
.elementor-location-single.rolle-regisseur #projekt-meta-atomic #projekt-detail-rollen-global #projekt-rolle-regie,
.elementor-location-single.rolle-autor #projekt-meta-atomic #projekt-detail-rollen-global #projekt-rolle-autor,
.elementor-location-single.rolle-musiker #projekt-meta-atomic #projekt-detail-rollen-global #projekt-rolle-musik {
  opacity: 1 !important;
  color: #3B5F68 !important;
  background: #FFFFFF !important;
}

/* Beim Karten-Hover bewegen sich alle Rollen-Icons wie in der HTML-Vorlage dezent nach oben. */
.e-loop-item:hover .pts-role-component-instance [id^="projekt-rolle-"] {
  transform: translateY(-2px);
}

/* Der globale Rollen-Embed bleibt kompakt in der Metazeile. */
#projekt-detail-rollen-global,
#projekt-detail-rollen-global .elementor-widget-container,
#projekt-loop-rollen-global,
#projekt-loop-rollen-global .elementor-widget-container {
  width: 100%;
  overflow: visible;
}

#projekt-detail-rollen-global {
  margin-inline-start: auto;
  flex: 0 0 auto;
  width: auto;
}

#projekt-detail-rollen-global .pts-role-component-instance {
  width: auto !important;
}

/* Tooltips bleiben Teil der wiederverwendbaren Komponente. */
.pts-role-component-instance [id^="projekt-rolle-"]::before,
.pts-role-component-instance [id^="projekt-rolle-"]::after {
  position: absolute;
  left: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 20;
}

.pts-role-component-instance [id^="projekt-rolle-"]::before {
  bottom: calc(100% + .65rem);
  transform: translate(-50%, .35rem) scale(.97);
  padding: .38rem .58rem;
  border-radius: .35rem;
  background: #253D41;
  color: #F7F4EF;
  box-shadow: 0 .45rem 1.2rem rgba(37,61,65,.16);
  font-family: "Inter", sans-serif;
  font-size: .72rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: opacity 220ms ease, transform 320ms cubic-bezier(.22,.61,.36,1);
}

.pts-role-component-instance [id^="projekt-rolle-"]::after {
  bottom: calc(100% + .35rem);
  width: 0;
  height: 0;
  border: .32rem solid transparent;
  border-top-color: #253D41;
  transform: translate(-50%, .15rem);
  transition: opacity 180ms ease, transform 300ms cubic-bezier(.22,.61,.36,1);
}

.pts-role-component-instance [id^="projekt-rolle-"]:hover::before,
.pts-role-component-instance [id^="projekt-rolle-"]:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.pts-role-component-instance [id^="projekt-rolle-"]:hover::after,
.pts-role-component-instance [id^="projekt-rolle-"]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Die Tooltip-Texte sind an die vier festen Rollen gebunden. */
.pts-role-component-instance [id="projekt-rolle-schauspiel"]::before { content: "Schauspiel"; }
.pts-role-component-instance [id="projekt-rolle-regie"]::before { content: "Regie"; }
.pts-role-component-instance [id="projekt-rolle-autor"]::before { content: "Autor"; }
.pts-role-component-instance [id="projekt-rolle-musik"]::before { content: "Musik"; }

@media (hover: none), (prefers-reduced-motion: reduce) {
  /* Touch und reduzierte Bewegung erhalten keine schwebenden Tooltips oder Icon-Bewegungen. */
  .pts-role-component-instance [id^="projekt-rolle-"] {
    transform: none !important;
  }
  .pts-role-component-instance [id^="projekt-rolle-"]::before,
  .pts-role-component-instance [id^="projekt-rolle-"]::after {
    display: none;
    transition: none !important;
  }
}

/* Dynamische Premiere-Card auf Projekt-Detailseiten */
/* Projekte ohne zukünftigen Termin zeigen keine leere Aufmerksamkeit-Card. */
#projekt-premiere-card:has(#projekt-premiere-datum:empty) {
  display: none !important;
}

/* Der CTA bleibt einzeilig; die optische Bewegung liegt weiterhin im Atomic-Hoverzustand. */
#projekt-premiere-button {
  white-space: nowrap;
  text-decoration: none;
}

#projekt-premiere-button:hover,
#projekt-premiere-button:focus-visible {
  color: #253D41;
  text-decoration: none;
}


/* Premiere-only Card */
/* Die Card bleibt unsichtbar, bis ein zukünftiger Termin mit dem Label „Premiere“ geladen wurde. */
#projekt-premiere-card {
  display: none !important;
}

#projekt-premiere-card[data-premiere-ready="1"] {
  display: flex !important;
}

/* Rollenlabels bleiben auf Desktop verborgen; dort übernehmen weiterhin die Tooltips. */
.pts-role-component-instance [id^="rollen-label-"] {
  display: none !important;
}

/* Desktop-Geometrie der Rollen-Wrapper */
@media (min-width: 768px) {
  /* Die zusätzlichen Label-Wrapper verändern auf Desktop weder Icon-Größe noch ursprünglichen Abstand. */
  .pts-role-component-instance [id^="rollen-gruppe-"] {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}


/* Mobile Rollenanzeige: vier Icons nebeneinander, Bezeichnungen direkt darunter */
@media (max-width: 767px) {
  /* Alle vier Rollen bleiben in einer einzigen kompakten Reihe. */
  .pts-role-component-instance {
    width: 100% !important;
    max-width: none !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: .25rem !important;
    overflow: visible !important;
    margin-bottom: .55rem !important;
  }

  .pts-role-component-instance [id^="rollen-gruppe-"] {
    display: flex !important;
    flex: 0 0 3.1rem !important;
    width: 3.1rem !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: .18rem !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Jede Bezeichnung sitzt mittig direkt unter ihrem Icon. */
  .pts-role-component-instance [id^="rollen-label-"] {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    color: rgba(59,95,104,.48) !important;
    font-family: "Inter", sans-serif !important;
    font-size: .55rem !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Aktive Rollen bleiben optisch kräftiger als inaktive Rollen. */
  .e-loop-item.rolle-schauspieler #rollen-label-schauspiel,
  .e-loop-item.rolle-regisseur #rollen-label-regie,
  .e-loop-item.rolle-autor #rollen-label-autor,
  .e-loop-item.rolle-musiker #rollen-label-musik,
  .elementor-location-single.rolle-schauspieler #rollen-label-schauspiel,
  .elementor-location-single.rolle-regisseur #rollen-label-regie,
  .elementor-location-single.rolle-autor #rollen-label-autor,
  .elementor-location-single.rolle-musiker #rollen-label-musik {
    color: #3B5F68 !important;
    font-weight: 700 !important;
  }
}/* End custom CSS */