/*
 * OPPOSTI-Anpassung für Klaro.
 *
 * Klaro kommt hell und grün daher — das ist auf einer dunklen Seite ein
 * Fremdkörper. Diese Datei setzt Klaros eigene Stellschrauben auf die Farben,
 * Schriften und Kanten des Hauses. `klaro.css` bleibt dabei unverändert; sie
 * ist die Datei des Herstellers und soll bei einem Versionswechsel einfach
 * ersetzt werden können.
 *
 * ALLE WERTE SIND GEMESSEN, nicht geschätzt — an der laufenden Produktivseite:
 *   Grund            #292929   (--grau aus style.css, der Seitenhintergrund)
 *   Gold             #DFB346   (--gold)
 *   Reservieren-Knopf gold mit WEISSER Schrift, BourtonLineBold, 18px,
 *                     Großbuchstaben, keine abgerundeten Ecken
 *   Menü             weiß, BourtonLineBold, 18px, Großbuchstaben
 *   Fließtext        Rajdhani, 16px
 *
 * Die Leiste steht in voller Breite unten. So stand auch der bisherige
 * Einwilligungsdialog auf den Produktivseiten (gemessen: position fixed,
 * left 0, right 0, bottom 0) — Klaros Vorgabe wäre ein schwebender Kasten
 * unten rechts gewesen.
 */

/*
 * Die Stellschrauben stehen auf `.klaro`, nicht auf `:root`.
 *
 * Grund: Namen wie `--dark1` oder `--green1` sind allgemein genug, dass sie
 * mit dem gekauften Theme oder einem seiner Zusatzskripte kollidieren
 * könnten. `.klaro` trägt sowohl der Hauptbehälter als auch jeder einzelne
 * Platzhalterkasten neben einem gesperrten Inhalt — damit erreichen die Werte
 * alles, was Klaro zeichnet, und nichts sonst.
 */
.klaro {
    --font-family: 'Rajdhani', sans-serif;
    --title-font-family: 'BourtonLineBold', sans-serif;
    --font-size: 16px;

    --dark1: #292929;   /* Grund: Leiste, Einstellungsfenster, Platzhalter */
    --dark2: #4a4a4a;   /* Trennlinien */
    --dark3: #3a3a3a;

    --light1: #f2f2f2;  /* Fließtext */
    --light2: #d8d8d8;
    --light3: #a8a8a8;  /* Nebensächliches, etwa die Dienstbeschreibungen */

    --green1: #dfb346;  /* Gold: Links, Hauptknopf, eingeschaltete Schalter */
    --green2: #c99f38;
    --green3: #b78f31;

    /* Die Schalter. `--white2` ist die Bahn im ausgeschalteten Zustand —
       Klaros Vorgabe #f2f2f2 leuchtet auf dunklem Grund wie eine Lampe und
       zog den Blick auf genau die Dienste, die AUS sind. `--white3` ist der
       Knopf darin; er bleibt hell, damit er auf der grauen wie auf der
       goldenen Bahn zu sehen ist. */
    --white2: #5a5a5a;
    --white3: #f5f5f5;

    --button-text-color: #fff;

    --border-radius: 0;
    --border-width: 1px;
    --border-style: solid;
    --box-shadow-color: rgba(0, 0, 0, .6);

    /* Volle Breite am unteren Rand statt schwebendem Kasten rechts. */
    --notice-position: fixed;
    --notice-left: 0;
    --notice-right: 0;
    --notice-bottom: 0;
    --notice-max-width: none;
}

/* ------------------------------------------------------------------ *
 * DIE LEISTE                                                          *
 * ------------------------------------------------------------------ */

.klaro .cookie-notice:not(.cookie-modal-notice) {
    border-top: 2px solid var(--green1);
    box-shadow: 0 -6px 28px rgba(0, 0, 0, .45);

    /* klaro.css färbt nur p, strong, h1, h2, ul und li ein. Alles andere
       erbte die Textfarbe des Themes — und die ist `color: #000` am body.
       Auf dem dunklen Grund wäre das unsichtbar. */
    color: var(--light1);

    /* Die Knöpfe sitzen ganz unten. Auf dem iPhone liegt dort Safaris eigene
       Leiste; `env(safe-area-inset-bottom)` ist der Abstand, den der Browser
       dafür meldet. Auf Geräten ohne Aussparung ist der Wert 0. */
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

/* Über die volle Breite gezogener Text ist auf einem breiten Bildschirm
   unlesbar. Der Inhalt bleibt deshalb mittig und begrenzt — die Leiste
   selbst reicht weiterhin von Rand zu Rand. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 20px 4px;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: .6em;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p strong {
    color: var(--green1);
    font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * KNÖPFE — im Stil des Reservieren-Knopfes                            *
 * ------------------------------------------------------------------ */

.klaro .cookie-notice .cm-btn,
.klaro .cookie-modal .cm-btn,
.klaro .context-notice .cm-btn {
    font-family: 'BourtonLineBold', sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 1.2;
    padding: 13px 22px;
    border: 2px solid transparent;
    border-radius: 0;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* „Alle akzeptieren" und „Speichern": gold mit weißer Schrift. */
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .context-notice .cm-btn.cm-btn-success {
    background-color: var(--green1);
    border-color: var(--green1);
    color: #fff;
}

.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .context-notice .cm-btn.cm-btn-success:hover {
    background-color: transparent;
    color: var(--green1);
}

/* „Auswahl speichern" trägt bei Klaro dieselbe Klasse wie „Alle akzeptieren"
   (cm-btn-success) und wäre damit ebenfalls goldgefüllt — zwei gleich laute
   Knöpfe nebeneinander, bei denen man erst lesen muss, welcher was tut. Der
   eigene Zusatz `cm-btn-info` unterscheidet ihn: goldene Kontur statt
   goldener Fläche. */
.klaro .cookie-modal .cm-btn.cm-btn-success.cm-btn-info {
    background-color: transparent;
    border-color: var(--green1);
    color: var(--green1);
}

.klaro .cookie-modal .cm-btn.cm-btn-success.cm-btn-info:hover {
    background-color: var(--green1);
    color: #fff;
}

/* „Alle ablehnen": zurückhaltend, aber gleichwertig erreichbar. Ein
   Ablehnen-Knopf, den man suchen muss, wäre keine echte Wahl. */
.klaro .cookie-notice .cm-btn.cm-btn-danger,
.klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cm-btn.cn-decline {
    background-color: transparent;
    border-color: #6f6f6f;
    color: #f2f2f2;
}

.klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
.klaro .cookie-modal .cm-btn.cm-btn-danger:hover,
.klaro .cookie-notice .cm-btn.cn-decline:hover {
    border-color: var(--green1);
    color: var(--green1);
}

.klaro .cookie-notice .cm-btn:focus-visible,
.klaro .cookie-modal .cm-btn:focus-visible {
    outline: 2px solid var(--green1);
    outline-offset: 2px;
}

/* „Einstellungen" ist ein Link, kein Knopf — im Menüstil des Hauses.
 *
 * `flex-grow: 0` ist wichtig: klaro.css dehnt den Link auf den ganzen freien
 * Platz (gemessen: 809 Pixel breit). Die Unterstreichung beim Überfahren zöge
 * sich sonst quer durch die halbe Leiste. `margin-right: auto` hält die
 * Knöpfe trotzdem am rechten Rand.
 */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
    font-family: 'BourtonLineBold', sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    color: var(--green1);
    border-bottom: 1px solid transparent;
    flex: 0 0 auto;
    margin-right: auto;
    align-self: center;
}

.klaro .cookie-notice .cn-learn-more:hover {
    border-bottom-color: var(--green1);
}

/* ------------------------------------------------------------------ *
 * DAS EINSTELLUNGSFENSTER                                             *
 * ------------------------------------------------------------------ */

.klaro .cookie-modal .cm-modal.cm-klaro {
    border: 1px solid #3f3f3f;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
}

.klaro .cookie-modal .cm-modal .cm-header h1 {
    font-family: 'BourtonLineBold', sans-serif;
    text-transform: uppercase;
    font-size: 1.4em;
    color: #fff;
}

.klaro .cookie-modal .cm-modal .cm-list-title {
    font-family: 'BourtonLineBold', sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    color: #fff;
}

.klaro .cookie-modal .cm-modal .cm-list-description {
    font-size: 15px;
    line-height: 1.45;
    color: var(--light3);
}

/* Das Schließen-Kreuz.
 *
 * ZUR RICHTIGSTELLUNG: Ich hatte es zwischendurch als „von Klaros Hintergrund
 * verdeckt" gemeldet. Das war falsch. Solange noch keine Entscheidung
 * gefallen ist, setzt Klaro es auf `display: none` — man soll dann einen der
 * drei Knöpfe unten nehmen und sich nicht am Kreuz vorbeimogeln. Gemessen
 * hatte ich lediglich ein Element ohne Ausdehnung, dessen Mittelpunkt bei
 * (0,0) lag und dort den Dunkelgrund traf.
 *
 * Die Regeln hier gelten also erst, wenn das Kreuz tatsächlich erscheint —
 * beim Öffnen über „Cookie-Einstellungen" nach einer Entscheidung. Sie geben
 * ihm etwas mehr Fläche zum Treffen. */
.klaro .cookie-modal .cm-modal .hide {
    z-index: 1002;
    padding: 8px;
    top: 12px;
    right: 12px;
    line-height: 0;
}

.klaro .cookie-modal .cm-modal .hide:hover svg {
    stroke: var(--green1);
}

/* „Immer aktiv" bei resmio — soll man sehen, ohne dass es schreit. */
.klaro .cookie-modal .cm-modal .cm-required {
    color: var(--light3);
    font-size: 13px;
}

/* ------------------------------------------------------------------ *
 * DIE PLATZHALTER vor gesperrten Inhalten (Elfsight, Eventim)         *
 * ------------------------------------------------------------------ */

/* Klaro gibt dem Platzhalter die Maße des gesperrten Inhalts — beim
   Ticketshop sind das 576 Pixel Höhe. Der Hinweis klebte dann oben in einer
   großen leeren Fläche. Mittig sieht er nach Absicht aus statt nach Fehler. */
.klaro.cm-as-context-notice {
    display: flex;
    align-items: center;
    justify-content: center;
}

.klaro.cm-as-context-notice .context-notice {
    background-color: var(--dark1);
    border: 1px dashed #4a4a4a;
    color: var(--light1);
    padding: 28px 20px;
    text-align: center;
    width: 100%;
}

.klaro.cm-as-context-notice .context-notice p {
    font-size: 16px;
    margin-bottom: 1em;
}

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

/* ------------------------------------------------------------------ *
 * DER IMMER ERREICHBARE EINSTIEG                                      *
 *                                                                     *
 * Nach einer Entscheidung verschwindet Klaros Leiste — und mit ihr    *
 * jeder sichtbare Weg zurück. Der Verweis im Fuß liegt auf der        *
 * Startseite 12 838 Pixel weit unten; wer eben abgelehnt hat und es   *
 * sich anders überlegt, findet ihn dort nicht. AdSimple hatte für     *
 * genau diesen Fall einen kleinen Knopf unten links.                  *
 *                                                                     *
 * `z-index: 500` liegt unter Klaros Leiste (999): Solange die Leiste  *
 * steht, ist der Knopf verdeckt; danach kommt er zum Vorschein.       *
 * ------------------------------------------------------------------ */
.klaro-oeffnen {
    position: fixed;
    left: 1%;
    bottom: 12px;
    z-index: 500;

    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 50%;
    line-height: 0;
    cursor: pointer;

    /* Der Kreis ist auf hellem wie dunklem Grund zu sehen; der Schatten hebt
       ihn vom Seitenhintergrund ab. */
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
    transition: transform .18s ease, box-shadow .18s ease;
}

.klaro-oeffnen svg {
    display: block;
    width: 50px;
    height: 50px;
}

.klaro-oeffnen:hover,
.klaro-oeffnen:focus-visible {
    transform: scale(1.06);
    box-shadow: 0 3px 14px rgba(0, 0, 0, .55);
}

.klaro-oeffnen:focus-visible {
    outline: 2px solid #dfb346;
    outline-offset: 3px;
}

/* Auf dem iPhone liegt der untere Rand unter Safaris Leiste. */
@supports (padding: env(safe-area-inset-bottom)) {
    .klaro-oeffnen { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}