/*!
 * Steganos Cookie Consent — portable core styles, v1.1.2
 *
 * Everything is prefixed .cb-* and themed through the custom properties below,
 * so a host site can restyle it without touching this file:
 *
 *   :root { --cb-primary: #14883d; --cb-bar-bg: rgba(51, 59, 71, .95); }
 *
 * Colour choices follow the Steganos look of the previous (commercial) bar, but
 * the green is the darker brand tone #14883d: the lighter #14a733 only reaches
 * 3.2:1 against white text and would fail WCAG AA / BFSG.
 *
 * @copyright  (C) Steganos
 * @license    GNU General Public License version 2 or later
 */

:root {
    --cb-bar-bg: rgba(51, 59, 71, .95);
    --cb-bar-fg: #f1f1f3;
    --cb-bar-link: #ffffff;

    --cb-primary: #14883d;
    --cb-primary-hover: #0f6e31;
    --cb-secondary: #6f6f6f;
    --cb-secondary-hover: #5a5a5a;

    --cb-surface: #ffffff;
    --cb-text: #333333;
    --cb-heading: #222222;
    --cb-muted: #666666;
    --cb-line: #e0e0e0;
    --cb-tab-bg: #ececec;
    --cb-tab-bg-active: #cfcfcf;
    --cb-foot-bg: #f5f5f5;
    /* Gleiche Abdunklung wie die Produktseiten-Lightbox (.lightbox in
       scripts/carousel/carousel.css). */
    --cb-overlay: rgba(0, 0, 0, .75);

    --cb-radius: 10px;
    --cb-focus: #0060dc;
    --cb-font: inherit;
    --cb-z: 99999;
}

.cb-bar,
.cb-overlay,
.cb-placeholder,
.cb-declaration {
    font-family: var(--cb-font);
    box-sizing: border-box;
}

.cb-bar *,
.cb-overlay *,
.cb-placeholder *,
.cb-declaration * {
    box-sizing: border-box;
}

/* ------------------------------------------------------------------ layer 1 */

.cb-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--cb-z);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 22px;
    background: var(--cb-bar-bg);
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: var(--cb-bar-fg);
    font-size: 15px;
    line-height: 1.5;
    animation: cb-slide-up .25s ease-out;
}

.cb-bar:focus {
    outline: none;
}

.cb-bar__text {
    flex: 1 1 auto;
    margin: 0;
    color: var(--cb-bar-fg);
}

/* Seit 2026-08-12 stehen die Links IM Satz (siehe buildBar in consent.js), nicht
   mehr als eigenes Flex-Element rechts neben den Knoepfen.
   `white-space:nowrap` haelt "Datenschutz · Impressum" zusammen, damit der
   Mittelpunkt nicht allein auf einer Zeile landet.

   Getrennt wird allein ueber den Abstand, ohne Trennzeichen (Nutzerentscheid
   2026-08-12): der Satz endet auf einen Punkt, ein zusaetzliches Zeichen davor
   waere eine dritte Interpunktionsebene neben dem Halbgeviertstrich im Satz und
   dem Mittelpunkt in der Gruppe. Die 20px sind nicht geraten, sondern der
   Blockabstand, den `.cb-bar` oben schon zwischen Text und Knopfgruppe benutzt.
   ⚠️ buildBar setzt bewusst KEIN Leerzeichen vor die Gruppe — sonst waere der
   sichtbare Abstand 20px plus Wortleerzeichen, und der Wert hier waere eine
   Halbwahrheit. Wer das Leerzeichen wieder einfuehrt, muss hier auf 16px. */
.cb-bar__links {
    margin-left: 20px;
    white-space: nowrap;
}

/* Bringt die Sprache ein Vorwort mit (`links.more`, de: "Mehr:"), setzt buildBar
   diese Klasse und der Vorabstand muss weg: das Wort trennt dann, und der Satz
   laeuft als normaler Text weiter. Mit beidem stuende eine unmotivierte Luecke
   zwischen "Mehr:" und dem ersten Link. */
.cb-bar__links--labelled {
    margin-left: 0;
}

.cb-bar__links a {
    color: var(--cb-bar-link);
    text-decoration: underline;
    white-space: nowrap;
}

.cb-bar__actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@keyframes cb-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@media (max-width: 860px) {
    .cb-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        max-height: 70vh;
        overflow-y: auto;
    }

    /* Auf schmalen Schirmen darf "Datenschutz · Impressum" umbrechen — sonst
       schiebt der zusammengehaltene Block den Satz in die Breite.

       Hier traegt die Gruppe eine eigene Zeile statt eines Vorabstands: bricht
       die Zeile ohnehin, wuerde `margin-left` die Links nur um 20px einruecken,
       und ein Einzug mitten im Flattersatz liest sich wie ein Versehen. Die 6px
       sind der halbe Blockabstand der schmalen Leiste (`gap:12px`). */
    .cb-bar__links {
        display: block;
        margin: 6px 0 0;
        white-space: normal;
    }

    /* Mit Vorwort bleibt die Gruppe im Textfluss. Eine eigene Zeile wuerde
       "Mehr:" allein am Ende der Textzeile zuruecklassen. */
    .cb-bar__links--labelled {
        display: inline;
        margin: 0;
    }

    .cb-bar__actions .cb-btn {
        flex: 1 1 auto;
    }
}

/* ------------------------------------------------------------------ buttons */

.cb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border: 0;
    border-radius: var(--cb-radius);
    background: var(--cb-secondary);
    color: #fff;
    font: inherit;
    font-size: 15px;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease;
}

.cb-btn:hover {
    background: var(--cb-secondary-hover);
}

.cb-btn--primary {
    background: var(--cb-primary);
}

.cb-btn--primary:hover {
    background: var(--cb-primary-hover);
}

.cb-btn:focus-visible {
    outline: 2px solid var(--cb-focus);
    outline-offset: 2px;
}

/* Accept and reject must stay visually equivalent (DSK guidance): same size,
   same colour, same weight. Only the third action may differ. */
.cb-modal__foot .cb-btn {
    min-width: 210px;
    padding: 12px 22px;
}

/* ------------------------------------------------------------------ layer 2 */

.cb-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--cb-z) + 1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--cb-overlay);
}

.cb-overlay[hidden] {
    display: none;
}

.cb-locked {
    overflow: hidden;
}

.cb-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 880px;
    max-height: min(86vh, 760px);
    background: var(--cb-surface);
    /* Gleiche Rundung wie die Produktseiten-Lightbox (.lb-inner in
       scripts/carousel/carousel.css) und wie die Buttons. */
    border-radius: 10px;
    /* Sonst stehen die eckigen Ecken der grauen Fussleiste ueber die Rundung. */
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
    color: var(--cb-text);
    font-size: 15px;
    line-height: 1.55;
    animation: cb-pop .2s ease-out;
}

@keyframes cb-pop {
    from { transform: scale(.97); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.cb-modal__head {
    position: relative;
    flex: 0 0 auto;
    padding: 24px 60px 20px 28px;
}

.cb-modal__head h2 {
    margin: 0;
    color: var(--cb-heading);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}

.cb-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: #c0c0c0;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease;
}

.cb-modal__close:hover {
    color: #888;
}

.cb-modal__close:focus-visible {
    outline: 2px solid var(--cb-focus);
    outline-offset: 2px;
}

.cb-modal__body {
    flex: 1 1 auto;
    display: flex;
    gap: 24px;
    min-height: 0;
    padding: 0 28px 8px;
}

.cb-tabs {
    flex: 0 0 236px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 24px;
    border-right: 1px solid var(--cb-line);
    overflow-y: auto;
}

.cb-tab {
    padding: 14px 16px;
    border: 0;
    border-radius: 2px;
    background: var(--cb-tab-bg);
    color: var(--cb-text);
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease;
}

.cb-tab:hover {
    background: #e0e0e0;
}

.cb-tab[aria-selected="true"] {
    background: var(--cb-tab-bg-active);
    font-weight: 700;
}

.cb-tab:focus-visible {
    outline: 2px solid var(--cb-focus);
    outline-offset: -2px;
}

.cb-panels {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.cb-panel:focus-visible {
    outline: 2px solid var(--cb-focus);
    outline-offset: 4px;
}

.cb-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.cb-panel__head h3 {
    margin: 0;
    color: var(--cb-heading);
    font-size: 17px;
    font-weight: 700;
}

.cb-panel__desc {
    margin: 0 0 18px;
}

.cb-modal__foot {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 18px;
    border-top: 1px solid #e5e5e5;
    background: var(--cb-foot-bg);
}

@media (max-width: 720px) {
    .cb-modal__body {
        flex-direction: column;
        gap: 14px;
    }

    .cb-tabs {
        flex: 0 0 auto;
        flex-direction: row;
        flex-wrap: wrap;
        padding-right: 0;
        padding-bottom: 14px;
        border-right: 0;
        border-bottom: 1px solid var(--cb-line);
    }

    .cb-tab {
        flex: 1 1 auto;
        padding: 10px 12px;
        font-size: 14px;
    }

    .cb-modal__foot .cb-btn {
        min-width: 0;
        flex: 1 1 100%;
    }
}

/* ------------------------------------------------------------------- switch */

.cb-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--cb-muted);
    cursor: pointer;
}

.cb-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.cb-switch__track {
    position: relative;
    display: block;
    width: 46px;
    height: 26px;
    border-radius: 13px;
    background: #bdbdbd;
    transition: background-color .15s ease;
}

.cb-switch__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .15s ease;
}

.cb-switch input:checked + .cb-switch__track {
    background: var(--cb-primary);
}

.cb-switch input:checked + .cb-switch__track::after {
    transform: translateX(20px);
}

.cb-switch input:disabled + .cb-switch__track {
    opacity: .55;
    cursor: not-allowed;
}

.cb-switch input:focus-visible + .cb-switch__track {
    outline: 2px solid var(--cb-focus);
    outline-offset: 3px;
}

/* -------------------------------------------------------------------- table */

.cb-table-wrap {
    overflow-x: auto;
    margin-bottom: 8px;
}

.cb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.45;
}

.cb-table th,
.cb-table td {
    padding: 8px 10px;
    border: 1px solid var(--cb-line);
    text-align: left;
    vertical-align: top;
}

.cb-table th {
    background: #f7f7f7;
    color: var(--cb-heading);
    font-weight: 700;
    white-space: nowrap;
}

.cb-table code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    word-break: break-all;
}

/* Cookie declaration rendered into <div data-cc-table> on the privacy page. */
.cb-declaration h3 {
    margin: 28px 0 6px;
}

.cb-declaration h3:first-child {
    margin-top: 0;
}

/* ---------------------------------------------------- floating reopen button */

/* Groesse und Abstaende wie Cassiopeias "Nach oben"-Schaltflaeche unten rechts
   (.back-to-top-link: bottom/inset-inline-end 1rem, gemessen 30x30 px), damit die
   beiden schwebenden Elemente als Paar wirken. Sichtbar erst, wenn eine
   Entscheidung gespeichert ist. */
.cb-fab {
    position: fixed;
    bottom: 1rem;
    z-index: calc(var(--cb-z) - 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
    transition: background-color .15s ease;
}

.cb-fab[hidden] {
    display: none;
}

.cb-fab--bottom-left {
    left: 1rem;
}

.cb-fab--bottom-right {
    right: 1rem;
}

.cb-fab:focus-visible {
    outline: 2px solid var(--cb-focus);
    outline-offset: 4px;
    border-radius: 6px;
}

/* Bild-Variante: greift, sobald `reopenIcon` eine Bild-URL enthaelt (empfohlen
   sind 60x60 Pixel) — bewusst ohne eigenen Hintergrund. Ohne `reopenIcon`
   rendert der Kern stattdessen die eingebaute Cookie-Glyphe, siehe
   .cb-fab--glyph darunter. */
.cb-fab--image img {
    display: block;
    width: 30px;
    height: 30px;
}

/* Fallback ohne konfiguriertes Bild: Cookie-Glyphe auf dunklem Kreis. */
.cb-fab--glyph {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--cb-bar-bg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}

.cb-fab--glyph:hover {
    background: #3f4855;
}

/* -------------------------------------------------------------- placeholder */

.cb-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 180px;
    padding: 24px;
    border: 1px dashed #c4c4c4;
    border-radius: 4px;
    background: #f7f7f7;
    color: var(--cb-text);
    text-align: center;
}

.cb-placeholder p {
    margin: 0;
    font-size: 14px;
}

/* ------------------------------------------------------------- preferences */

@media (prefers-reduced-motion: reduce) {
    .cb-bar,
    .cb-modal {
        animation: none;
    }

    .cb-btn,
    .cb-tab,
    .cb-switch__track,
    .cb-switch__track::after,
    .cb-modal__close {
        transition: none;
    }
}

@media (forced-colors: active) {
    .cb-btn,
    .cb-tab,
    .cb-switch__track {
        border: 1px solid ButtonText;
    }
}