/* ============================================================================
   FS-CONSENT — Cookie-Banner + Einstellungs-Dialog im FOGSMOKE-Stil
   ----------------------------------------------------------------------------
   Auftrag Yunus 21.08.2026 an Sitzung HEADER: "den cookie banner bringst du
   auch auf unseren FOGSMOKE STIL".
   Vorarbeit Sitzung POP UP (Grundgeruest + Reihenfolge-Regel) uebernommen,
   Dateibesitz seither HEADER. Banner-Markup kommt aus JTL/Plugin —
   Plugin-Dateien bleiben UNANGETASTET, alles laeuft ueber diese CSS-Schicht.
   (Geprueft 21.08.: plugins/admorris_pro/frontend/css/custom-consent-manager.css
   wird gar nicht geladen; die Grundoptik kommt aus dem Theme, wir laden danach.)

   RECHTLICHE LEITPLANKE — unveraendert von POP UP uebernommen:
   "Alle akzeptieren", "Konfigurieren" und "Ablehnen" sind GLEICHWERTIG
   gestaltet: gleiche Groesse, gleiche Kante, gleiche Schrift, gleicher
   Hover. Eine auffaelligere Zustimmung neben blasser Ablehnung waere ein
   Dark Pattern und angreifbar. Der Markenauftritt kommt deshalb aus Karte,
   Kante und Anton-Ueberschrift — NICHT aus einem knalligen Ja-Knopf.
   Texte, Reihenfolge und Links werden NICHT veraendert.

   FORMENSPRACHE (angeglichen an 18+ Age-Gate und Rubbellos, 21.08.):
   Haarlinie 1px #e9e6ec + 3px Magenta-Oberkante · Radius 0 · Anton-Versalien ·
   Flaechen #f6f5f3 · Text #3d3d42 · CTA #c90f88 · weicher Schlagschatten.
   Schrift: "FS Anton" (fs-menu.css:200) und "FS Display" (fs-redesign.css:2264)
   zeigen BEIDE auf anton.woff2 — am 21.08. gegengeprueft. Kette bleibt.

   Rollback = Datei-Eintrag aus template.xml entfernen.
   ============================================================================ */

/* ---------------------------------------------------------------
   1. KARTE — harte Kante statt weicher Wolke
   --------------------------------------------------------------- */
/* VORSCHLAG A, Freigabe Yunus 21.08.: Haarlinie statt Panzerkante.
   Befund davor: der Cookie-Banner zog 2px #111114, waehrend Age-Gate und
   Rubbellos 1px ziehen. Gemessen ueber alle drei Dateien; der Banner war der
   einzige Ausreisser. Yunus: "das sieht nach RANDM aus, nicht nach FOGSMOKE".

   ZWEITER BEFUND, gleicher Durchgang: Der Banner hat ZWEI verschachtelte
   Kaesten. `#consent-banner` (aussen) trug noch die Theme-Grundoptik —
   weisser Grund, 1px #dddddd, Radius 3.75px, Polster 15px/30px — und lag als
   heller, RUNDER Rahmen um die harte Karte. Die alte Regel hier zielte auf
   `.consent-banner` (Klasse), das Element heisst aber `#consent-banner` (ID):
   der Selektor hat NIE gegriffen. Deshalb jetzt: Aussenkasten vollstaendig
   neutralisieren, die Karte ist allein `.consent-banner-body`. */
#consent-manager #consent-banner {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
#consent-manager .consent-banner-body,
#consent-settings .consent-modal-content {
    border-radius: 0 !important;
}
#consent-manager .consent-banner-body {
    background: #ffffff !important;
    /* Haarlinie + echte 3px-Oberkante, 1:1 wie .fogrl-modal in
       fs-rubbellos.css. Die Oberkante MUSS nach der Kurzform `border`
       stehen, sonst ueberschreibt diese sie wieder. */
    border: 1px solid var(--brand-haar) !important;
    border-top: 3px solid #e5169f !important;
    /* Der Innenschatten faellt weg — die Magenta-Linie ist jetzt eine echte
       Kante. Schlagschatten auf den Rubbellos-Wert, damit die Karte ohne
       harte Umrandung trotzdem traegt. */
    box-shadow: 0 18px 48px rgba(17, 17, 20, .28) !important;
    font-family: "FS Body", "DM Sans", system-ui, sans-serif !important;
    padding: 22px 24px !important;
}

/* ---------------------------------------------------------------
   2. UEBERSCHRIFT — Anton-Versalien mit Magenta-Strich darunter
   (dasselbe Motiv wie die Kategorie-Ueberschriften)
   --------------------------------------------------------------- */
#consent-manager .consent-display-2,
#consent-settings .consent-display-1 {
    display: block !important;
    position: relative;
    margin: 0 0 14px !important;
    padding-bottom: 10px !important;
    font-family: "FS Anton", "FS Display", sans-serif !important;
    font-weight: 400 !important;          /* Anton hat nur diesen Schnitt */
    font-synthesis: none;
    text-transform: uppercase !important;
    letter-spacing: .01em !important;
    font-size: 25px !important;
    line-height: 1.1 !important;
    color: #111114 !important;
}
#consent-manager .consent-display-2::after,
#consent-settings .consent-display-1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 3px;
    background: #e5169f;
}

/* ---------------------------------------------------------------
   3. FLIESSTEXT UND LINKS
   --------------------------------------------------------------- */
#consent-manager .consent-banner-body,
#consent-manager .consent-banner-body p,
#consent-manager .consent-banner-text,
#consent-settings .consent-modal-content p {
    color: #3d3d42 !important;       /* Neutralton des Systems, nicht #3a3640 */
    font-size: 13px !important;
    line-height: 1.55 !important;
}
#consent-manager .consent-banner-body a,
#consent-settings .consent-modal-content a {
    color: #111114 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
#consent-manager .consent-banner-body a:hover,
#consent-manager .consent-banner-body a:focus-visible,
#consent-settings .consent-modal-content a:hover {
    color: #c90f88 !important;
}
#consent-manager .consent-banner-body em,
#consent-manager .consent-banner-body i {
    font-style: normal;
    font-weight: 700;
    color: #111114 !important;
}

/* ---------------------------------------------------------------
   4. KNOEPFE — alle drei gleichwertig, V6-kantig
   Warum identisch: siehe Leitplanke oben. Zusaetzlich technisch
   erzwungen — die drei Knoepfe tragen im Markup dieselben Klassen
   (consent-btn consent-btn-outline-primary btn-block).
   --------------------------------------------------------------- */
#consent-manager .consent-btn,
#consent-settings .consent-btn {
    border-radius: 0 !important;
    background: #ffffff !important;
    border: 1px solid #111114 !important;   /* A: 2px -> 1px, wie Age-Gate/Rubbellos */
    color: #111114 !important;
    /* KNOPFSCHRIFT auf Anton 400 — siehe Begruendung in fs-agegate.css:
       die herausgehobenen CTAs des Shops fahren Anton 400/15px, gemessen.
       Anton hat nur einen Schnitt, deshalb 400 statt 700 und
       font-synthesis:none. Die Leitplanke bleibt gewahrt: die Aenderung
       trifft ALLE drei Knoepfe gleich, es entsteht keine Hervorhebung
       der Zustimmung. */
    font-family: "FS Display", "FS Body", sans-serif !important;
    font-weight: 400 !important;
    font-synthesis: none;
    /* Kanon-Leiter fs-kanon.css Abschnitt 10, Stufe L: 52px bei 15px Schrift.
       Vorher 48px/12,5px — damit war der Consent-Knopf der kleinste der drei
       Overlays. 52px erfuellt das 44px-Beruehrziel weiterhin mit Reserve. */
    font-size: 15px !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    padding: 13px 18px !important;
    min-height: 52px !important;
    box-shadow: none !important;
    transition: background .15s ease, color .15s ease;
}
#consent-manager .consent-btn:hover,
#consent-settings .consent-btn:hover {
    background: #111114 !important;
    border-color: #111114 !important;
    color: #ffffff !important;
}
#consent-manager .consent-btn:focus-visible,
#consent-settings .consent-btn:focus-visible {
    outline: 2px solid #e5169f !important;
    outline-offset: 2px !important;
}
/* Druckgeste wie .fogrl-btn und (seit 21.08.) das Age-Gate: 1px nachgeben.
   Gilt fuer alle drei Knoepfe gleich — die Leitplanke bleibt gewahrt. */
#consent-manager .consent-btn:active,
#consent-settings .consent-btn:active {
    transform: translateY(1px);
}
#consent-manager .consent-btn-helper {
    gap: 10px;
}

/* ---------------------------------------------------------------
   5. ICON — schwarzes Quadrat statt Kreis
   --------------------------------------------------------------- */
/* A: aus dem schwarzen Block wird ein helles Feld mit Haarlinie. Das
   Quadrat sitzt mittig AUF der linken Kartenkante (Grundregel des Themes:
   position:absolute; left:0; top:50%; translate(-50%,-50%)) — mit dem
   neutralisierten Aussenkasten liegt es jetzt auf der Kante der Karte
   statt frei im weissen Polster daneben.
   Grund NICHT `inherit` lassen: der Aussenkasten ist jetzt transparent. */
#consent-manager .consent-banner-icon,
#consent-settings .consent-modal-icon {
    background: #f6f5f3 !important;
    border: 1px solid var(--brand-haar) !important;
    border-radius: 0 !important;
    color: #111114 !important;
}
#consent-manager .consent-banner-icon svg path,
#consent-settings .consent-modal-icon svg path {
    stroke: none !important;
    fill: #111114 !important;
}

/* ---------------------------------------------------------------
   6. EINSTELLUNGS-DIALOG ("Konfigurieren")
   Gehoert zum selben Auftrag: wer dort landet, darf nicht in einem
   fremd aussehenden Fenster stehen.
   --------------------------------------------------------------- */
/* A: der harte versetzte Schatten (8px 8px 0 #830779) war die auffaelligste
   Fremdgeste im Consent-Bereich — kein Licht, sondern ein Stempel. Ersetzt
   durch Haarlinie + weichen Schatten wie beim Rubbellos-Modal.
   Bewusst OHNE Magenta-Oberkante: so war die Vorschau, die Yunus freigegeben
   hat. Wenn die Karte und der Dialog naeher zusammenruecken sollen, ist das
   eine Zeile (`border-top: 3px solid #e5169f`). */
#consent-settings .consent-modal-content {
    background: #ffffff !important;
    border: 1px solid var(--brand-haar) !important;
    box-shadow: 0 18px 48px rgba(17, 17, 20, .28) !important;
    padding: 24px !important;
}
#consent-settings .consent-modal-close {
    color: #111114 !important;
    opacity: 1 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
#consent-settings .consent-modal-close:hover {
    color: #c90f88 !important;
}
/* Abschnittsueberschriften der Dienstgruppen */
#consent-settings .consent-display-3 {
    font-family: "FS Body", "DM Sans", system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: #111114 !important;
}
#consent-settings .consent-label {
    color: #111114 !important;
    font-weight: 600 !important;
}
#consent-settings .consent-label-secondary,
#consent-settings .consent-info,
#consent-settings .consent-more-description {
    color: #6b6b70 !important;
    font-size: 12.5px !important;
}
/* Schalter: aus = Systemkante, an = CTA-Magenta.
   Selektorkette 1:1 wie im Plugin-CSS (dort ~Z. 67-73), damit wir
   denselben Zustand treffen und nicht daneben. */
#consent-manager .consent-switch .consent-input ~ .consent-label::before,
#consent-settings .consent-switch .consent-input ~ .consent-label::before {
    background-color: #d9d9de !important;
    border-radius: 999px !important;
}
#consent-manager .consent-switch .consent-input:checked ~ .consent-label::before,
#consent-settings .consent-switch .consent-input:checked ~ .consent-label::before {
    background-color: #c90f88 !important;
}
#consent-settings .consent-switch .consent-input:focus-visible ~ .consent-label::before {
    outline: 2px solid #e5169f !important;
    outline-offset: 2px !important;
}
/* Trennlinien zwischen den Dienstgruppen auf die Haarlinie */
#consent-settings .consent-btn-holder,
#consent-settings hr {
    border-color: #e4e4e7 !important;
}
#consent-settings .consent-show-more {
    color: #111114 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}
#consent-settings .consent-show-more:hover {
    color: #c90f88 !important;
}

/* ---------------------------------------------------------------
   7. MOBIL
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
    #consent-manager .consent-banner-body {
        padding: 18px 16px !important;
    }
    #consent-manager .consent-display-2,
    #consent-settings .consent-display-1 {
        font-size: 20px !important;
    }
    #consent-manager .consent-btn,
    #consent-settings .consent-btn {
        width: 100% !important;
        font-size: 12px !important;
    }
    /* Hinweis: der versetzte Schatten ist seit A ohnehin weg; die Regel
       bleibt, damit Mobil denselben Schattenwert wie die Karte traegt. */
    #consent-settings .consent-modal-content {
        box-shadow: 0 18px 48px rgba(17, 17, 20, .28) !important;
        padding: 18px 16px !important;
    }
}

/* ============================================================================
   REIHENFOLGE: Consent-Banner erst NACH dem Age-Gate
   ----------------------------------------------------------------------------
   UNVERAENDERT von Sitzung POP UP uebernommen und von HEADER gegengeprueft
   (21.08.: Gate offen -> Banner + Wrapper display:none; nach Bestaetigung
   Banner sichtbar UND alle drei Knoepfe im Hit-Test selbst getroffen).
   RECHTLICH RELEVANT — nicht entfernen.

   Gemessener Fehlstand vorher: Gate (z-index 20000) und Banner erschienen
   beide ab ~1,5 s, der Banner lag darunter und war NICHT bedienbar. Zwei
   gleichzeitige Dialoge, von denen der untere tot ist, sind keine freie
   Einwilligung.

   Das Gate setzt selbst `html.fs-ag-offen` (fs-agegate.js:85 add / :41
   remove) und nutzt den Haken intern schon fuer das Trusted-Shops-Badge.
   Wir LESEN ihn hier nur — kein Eingriff in Gate- oder Plugin-Dateien.
   display:none statt visibility:hidden, weil visibility beim gleichen
   Overlay-Muster nachweislich nicht reichte. Der aeussere Wrapper hat keine
   eigene Klasse, sonst bliebe eine 44px-Huelle stehen.
   ============================================================================ */

html.fs-ag-offen .consent-banner-body,
html.fs-ag-offen div:has(> .consent-banner-body) {
    display: none !important;
}

/* ============================================================================
   8. TRUSTED-SHOPS-SIEGEL WEG, SOLANGE DER BANNER OFFEN IST
   ----------------------------------------------------------------------------
   BEFUND HEADER 21.08. (mobil, 375px, gemessen): Das TS-Siegel schwebt unten
   links mit z-index 2147483647 und ueberdeckte den Knopf "ABLEHNEN" — der
   Hit-Test auf dessen linke Haelfte traf #minimized-trustbadge-… statt des
   Knopfes. Das ist nicht nur haesslich: Ablehnen muss genauso leicht
   erreichbar sein wie Zustimmen, sonst ist die Einwilligung angreifbar.

   Haken: Das Consent-Manager-Element traegt `active`, solange der Banner
   sichtbar ist — wir lesen ihn nur.
   ACHTUNG, TEURE STELLE (Fehler 21.08. beim ersten Wurf, sofort gefunden):
   `active` bleibt NACH der Entscheidung stehen, es kommt nur `mini` dazu
   (Zustand "active mini" = eingeklappter Fingerabdruck-Knopf). Ein Selektor
   auf `.active` allein blendet das Siegel deshalb DAUERHAFT aus. Richtig ist
   `.active:not(.mini)` — gemessen: Banner offen = "active", nach Klick auf
   Ablehnen/Akzeptieren = "active mini".
   display:none statt visibility:hidden, weil das Siegel ein iframe ist und
   visibility dort nachweislich zurueckgesetzt wird (gleicher Fund wie beim
   Age-Gate, fs-agegate.css:386).
   ============================================================================ */

body:has(#consent-manager.active:not(.mini)) div[id^="trustbadge-container-"],
body:has(#consent-manager.active:not(.mini)) [id^="minimized-trustbadge-"],
html.fs-ag-offen div[id^="trustbadge-container-"] {
    display: none !important;
}

/* ============================================================================
   9. EINGEKLAPPTER EINSTELLUNGS-KNOPF (#consent-settings-btn)
   ----------------------------------------------------------------------------
   FEHLER VON MIR, 21.08. — Meldung POP UP, Yunus hat es am Handy gesehen:
   ein grosser schwarzer Halbkreis am unteren Bildschirmrand.

   Ursache, gemessen: Dieser schwebende Knopf traegt dieselbe Klasse
   `consent-btn` wie die Dialog-Knoepfe und liegt in `#consent-manager` —
   meine Mobil-Regel `width:100%` hat ihn deshalb auf volle Fensterbreite
   gezogen (375px). Sein SVG hat WEDER width/height-Attribut NOCH eine
   CSS-Groesse; ein SVG ohne intrinsische Masse fuellt dann die
   Container-Breite: 375 - 2x18 Polster - 2x2 Kante = 335px. Genau das war
   der Halbkreis.

   Zwei Lehren:
   1. Eine Klasse heisst nicht, dass es dasselbe Bauteil ist. `consent-btn`
      traegt hier Dialog-Knoepfe UND einen schwebenden Icon-Knopf.
   2. Ein SVG ohne width/height ist eine Bombe mit Zeitzuender: Es faellt
      erst auf, wenn jemand die Container-Breite aendert.
   Deshalb hier BEIDES: Knopf aus der Breitenregel nehmen UND jedes
   Consent-SVG explizit bemassen.
   ============================================================================ */

#consent-manager #consent-settings-btn,
#consent-settings-btn {
    width: auto !important;
    min-width: 48px;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;          /* Notbremse, falls je wieder etwas ausbricht */
}

/* Jedes SVG im Consent-Bereich bekommt eine Groesse — nicht nur das eine,
   das gerade aufgefallen ist. */
#consent-manager svg,
#consent-settings svg {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 auto;
}
/* Ausnahme: das Fingerabdruck-Zeichen im Kartenkopf darf groesser bleiben */
#consent-manager .consent-banner-icon svg,
#consent-settings .consent-modal-icon svg {
    width: 26px !important;
    height: 26px !important;
}

/* ============================================================================
   10. SCHWEBENDER COOKIE-KNOPF UNTEN LINKS ABGESCHALTET
   ----------------------------------------------------------------------------
   Ansage Yunus, 21.08.: der mitscrollende Cookie-Fingerabdruck unten links
   soll weg. Basis-Regel steckt in myclean_crit.css:
       #consent-settings-btn{position:fixed;left:1rem;bottom:1rem;z-index:1050}
       .mini > #consent-settings-btn  -> sichtbar nach der Entscheidung
   Der Knopf ist also der eingeklappte Zustand des Consent-Managers.

   WICHTIG - der Knopf wird NUR versteckt, NICHT entfernt.
   Grund: Der Widerruf der Einwilligung muss so leicht erreichbar sein wie die
   Einwilligung selbst (DSGVO Art. 7 Abs. 3 / TTDSG). Ersatz ist der Link
   "Cookie-Einstellungen" in der Rechtsleiste des Footers; der ruft per
   .click() genau diesen Knopf auf. Wer das Element hier per display:none
   ersetzen will durch ein Entfernen im Template, killt damit den Footer-Link.
   Siehe layout/footer.tpl, Block layout-footer-copyright, .fsft-lg-consent.
   ============================================================================ */

#consent-settings-btn,
#consent-manager #consent-settings-btn,
#consent-manager.mini > #consent-settings-btn {
    display: none !important;
}

/* KEIN pointer-events:none auf #consent-manager.mini - der Einstellungs-Dialog
   (#consent-settings) ist ein KIND dieses Containers. Wer den Container
   stilllegt, macht damit auch den ueber den Footer-Link geoeffneten Dialog
   unklickbar. Gemessen und deshalb bewusst weggelassen.
   Der Container selbst hat im Zustand .mini ohnehin keine Flaeche, weil
   #consent-banner und #consent-settings-btn beide display:none tragen. */