/* ============================================================================
   Klaro! – Anpassung an das Erscheinungsbild der Kammerlichtspiele
   WICHTIG: Muss NACH css/klaro.css eingebunden werden.

   Klaro referenziert seine Farben als var(--name, fallback). Die Variablen
   werden hier auf .klaro deklariert und von dort an alle Kindelemente vererbt.
   ========================================================================== */

.klaro {
  --font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  --title-font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  --font-size: 15px;

  --border-radius: 3px;
  --border-style: solid;
  --border-width: 1px;

  /* Zustimmen-Buttons in Hausfarbe statt Klaro-Grün.
     ACHTUNG: --dark1..3 / --light1..3 / --green3 / --button-text-color
     NICHT überschreiben – die setzt Klaro inline auf #klaro und invertiert
     sie je nach Theme. Eigene Werte hier würden das Light-Theme zerstören. */
  --green1: #b72126;
  --green2: #9c1c20;
}

/* Banner über Slider und Störer legen */
.klaro .cookie-modal,
.klaro .cookie-notice {
  z-index: 1000;
}

.klaro .cookie-notice a,
.klaro .cookie-modal a {
  color: #ff9a9d;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Click-to-Load Platzhalter (contextual consent)
   Steht anstelle von Ticketshop und Karte, solange keine Einwilligung vorliegt.
   -------------------------------------------------------------------------- */
.klaro .context-notice {
  padding: 40px 25px;
  text-align: center;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.klaro .context-notice p {
  font-size: 16px;
  line-height: 26px;
  color: #111111;
  font-weight: 300;
  margin: 0;
  max-width: 34em;
}

.klaro .context-notice p a {
  color: #b72126;
  font-weight: 600;
}

.klaro .context-notice p.cm-buttons {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* Buttons als Call-to-Action, nicht als Hürde */
.klaro .context-notice .cm-btn {
  border: 0;
  border-radius: 3px;
  padding: 12px 22px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.klaro .context-notice .cm-btn.cm-btn-success {
  background-color: #b72126;
  color: #ffffff;
}

.klaro .context-notice .cm-btn.cm-btn-success:hover {
  background-color: #9c1c20;
}

/* Ticketshop-Platzhalter hält grob die Höhe, damit der Aufbau nicht springt */
#kinoheld-eframe .klaro .context-notice {
  min-height: 240px;
}

@media screen and (max-width: 479px) {
  .klaro .context-notice {
    padding: 28px 16px;
  }
  .klaro .context-notice p {
    font-size: 15px;
    line-height: 23px;
  }
  .klaro .context-notice p.cm-buttons {
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------------------
   Eigener Click-to-Load Platzhalter für den kinoheld-Ticketshop
   (Klaro kann blockierte <script>-Tags nicht selbst ersetzen)
   -------------------------------------------------------------------------- */
.kls-platzhalter {
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  background-color: #fafafa;
  padding: 45px 25px;
  margin: 0 0 30px 0;
  text-align: center;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.kls-platzhalter[hidden] { display: none; }

.kls-platzhalter-text {
  font-size: 16px;
  line-height: 26px;
  color: #111111;
  font-weight: 300;
  margin: 0 auto;
  max-width: 34em;
}

.kls-platzhalter-btn {
  margin-top: 22px;
  background-color: #b72126;
  color: #ffffff;
  border: 0;
  border-radius: 3px;
  padding: 14px 28px;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.kls-platzhalter-btn:hover { background-color: #9c1c20; }

.kls-platzhalter-hinweis {
  margin: 16px 0 0 0;
  font-size: 14px;
}

.kls-platzhalter-hinweis a {
  color: #b72126;
  font-weight: 600;
}

@media screen and (max-width: 479px) {
  .kls-platzhalter { padding: 30px 16px; }
  .kls-platzhalter-text { font-size: 15px; line-height: 23px; }
  .kls-platzhalter-btn { width: 100%; font-size: 16px; }
}