/* Einwilligungsdialog nach Consent-Standard 1.0 (13.10.2026, EHiP-Website#455; Quelle: dev/ocg/marken-bausteine/consent/,
   01 Abschnitt 4 und 5, 06 `brands`). Vorher: Fassung vom 14.08./23.08./13.09./04.10.2026.

   MARKENWERTE sind Variablen --consent-*. Drei davon setzt der Wrapper als style-Attribut aus brands.<marke> der Standarddatei:
     --consent-entscheidung-flaeche   Fuellung der beiden Entscheidungsknoepfe (decisionBackground)
     --consent-entscheidung-schrift   Schriftfarbe darauf (decisionText)
     --consent-akzent                 Kante oben, Schalter (accent)
   Alle weiteren setzt die Marke in ihrem eigenen CSS an :root (MARKENBINDUNGEN.md):
     --consent-text, --consent-text-leise, --consent-link, --consent-fokus, --consent-linie, --consent-flaeche (Tonflaeche der
     Unterbloecke), --consent-dialog-flaeche (Flaeche des Dialogs, der Leiste und der Knoepfe im Wechselzustand),
     --consent-schalter-aus, --consent-platzhalter-rand   Text-, Link-, Fokus-, Linien- und Flaechenfarben
     --consent-schleier, --consent-schatten, --consent-schatten-leise   Abdunklung hinter dem Dialog und beide Schatten
     --consent-schrift-text, --consent-schrift-titel      Schriftfamilien (Fliesstext, Ueberschriften und Knoepfe)
   Fehlt eine Variable, gelten die EHiP-Werte hier als Rueckfall. Alles andere in dieser Datei ist die gemeinsame
   Gestaltung: Aenderungen an Abstaenden, Massen und Reihenfolge gehoeren in den Baustein, nicht in die Marke.

   WARUM DIESE FASSUNG DAS BEDIENPAAR SO BAUT (Standard 1.0, Abschnitt 4):
     · Ablehnen und Akzeptieren: gleiche Zeile, gleiche Breite, gleiche Hoehe, gleiche Fuellung, gleiche Schrift, gleicher
       Rahmen. Es gibt EINE Regel fuer beide Knoepfe, keine fuer den einen und eine fuer den anderen. Unterschiede entstehen
       nur durch den Text. Ob die Anordnung selbst das Verhalten lenkt, ist ein Erfahrungswert aus der Literatur und bei uns
       nicht gemessen; hier steht deshalb nur, dass sie symmetrisch ist.
     · Keine Obergrenze wie 55svh mehr (bis 13.10.2026 gab es sie unter 640 px). Der Dialog ist so hoch wie sein Inhalt, hoechstens
       die sichtbare Hoehe minus Rand, und scrollt darin. Die Entscheidungsflaeche ist nie aus dem Bild geschnitten.
     · Hell bleibt hell (Karte), der Hintergrund dunkelt neutral ab, ohne Animation. Kein Marken-Gruen im Schleier. */

/* Markenwerte als Variablen mit EHiP-Rueckfall. Die Variablen stehen an :root UND am Wrapper: Widerrufsknopf, Platzhalter und
   Dienstetabelle liegen ausserhalb des Wrappers und brauchen sie ebenfalls. Am Wrapper werden sie neu aufgeloest, damit
   die vom Wrapper gesetzten --consent-entscheidung-* und --consent-akzent greifen. Eine Marke setzt nur --consent-*; kein
   Farb- und kein Schriftwert steht weiter unten fest in der Datei (Wächter #455 K3). */
:root,
#ehip-consent{
    --ehip-text: var(--consent-text, #06281A);
    --ehip-text-leise: var(--consent-text-leise, #4A5A52);
    --ehip-linie: var(--consent-linie, #DBE6E1);
    --ehip-flaeche: var(--consent-flaeche, #F7FBF9);
    --ehip-gruen: var(--consent-link, #007550);
    --ehip-fokus: var(--consent-fokus, #06281A);
    --ehip-schalter-aus: var(--consent-schalter-aus, #8A9A92);
    --ehip-platzhalter-rand: var(--consent-platzhalter-rand, #A9BDB4);
    --ehip-mint: var(--consent-akzent, #52C38A);
    --ehip-knopf: var(--consent-entscheidung-flaeche, #52C38A);
    --ehip-knopf-schrift: var(--consent-entscheidung-schrift, #06281A);
    --ehip-schrift-text: var(--consent-schrift-text, 'Source Sans Pro', sans-serif);
    --ehip-schrift-titel: var(--consent-schrift-titel, 'Barlow Semi Condensed', sans-serif);
    --ehip-dialog-flaeche: var(--consent-dialog-flaeche, #FFF);
    --ehip-schleier: var(--consent-schleier, rgba(17, 17, 17, 0.6));
    --ehip-schatten: var(--consent-schatten, rgba(0, 0, 0, 0.30));
    --ehip-schatten-leise: var(--consent-schatten-leise, rgba(6, 40, 26, 0.12));
}

#ehip-consent{
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

#ehip-consent[hidden]{
    display: none;
}

/* Die Bestandsseite gibt Knoepfen ein eigenes display, das das hidden-Attribut ueberstimmt (Befund 14.08.2026). Gilt fuer
   alles im Banner, nicht nur fuer Knoepfe. */
#ehip-consent [hidden]{
    display: none !important;
}

/* Hintergrund: neutral dunkel, ohne Bewegung. Ein Klick darauf ist keine Entscheidung (kein Handler in ehip-consent.js). */
.ehip-consent__schleier{
    position: absolute;
    inset: 0;
    background: var(--ehip-schleier);
}

.ehip-consent__dialog{
    position: relative;
    background: var(--ehip-dialog-flaeche);
    color: var(--ehip-text);
    max-width: 780px;
    width: calc(100% - 48px);
    /* vh als Rueckfall fuer Browser ohne dvh. dvh folgt der sichtbaren Hoehe (Adressleiste, Tastatur). */
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow: auto;
    overscroll-behavior: contain;
    margin: 24px;
    padding: 32px;
    border-top: 4px solid var(--ehip-mint);
    border-radius: 12px;
    box-shadow: 0 14px 44px var(--ehip-schatten);
    font-family: var(--ehip-schrift-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.ehip-consent__kicker{
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ehip-gruen);
}

.ehip-consent__dialog .ehip-consent__titel{
    margin: 0 0 14px;
    font-family: var(--ehip-schrift-titel);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--ehip-text);
}

/* Beim Oeffnen bekommt die Ueberschrift programmatisch den Fokus, damit Screenreader zuerst die Frage lesen. Sie ist nicht
   antabbbar, ein Fokusrahmen um den Text waere nur Stoerung (Befund 23.08.2026). Die Knoepfe behalten ihren Rahmen. */
.ehip-consent__dialog:focus,
.ehip-consent__dialog:focus-visible,
.ehip-consent__titel:focus,
.ehip-consent__titel:focus-visible{
    outline: none !important;
}

.ehip-consent__dialog p{
    margin: 0 0 10px;
}

.ehip-consent__dialog a{
    color: var(--ehip-gruen);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ehip-consent__text p{
    margin: 0 0 10px;
}

/* Ebene 2: Kopfzeile mit Schliessen-Knopf rechts (kein Entscheidungsknopf, keine Fuellung). */
.ehip-consent__kopf{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ehip-consent__kopf .ehip-consent__titel{
    flex: 1 1 auto;
    min-width: 0;
}

.ehip-consent__schliessen{
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: -6px -8px 0 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    font-size: 28px;
    line-height: 1;
    color: var(--ehip-text-leise);
    cursor: pointer;
}

.ehip-consent__schliessen:hover{
    color: var(--ehip-text);
}

/* Transparenzzeile: Verantwortlicher und Zahl der weiteren Verantwortlichen. Pflichtangabe, deshalb nicht kleiner als 14 px. */
.ehip-consent__transparenz{
    margin: 4px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--ehip-linie);
    font-size: 14px;
    color: var(--ehip-text-leise);
}

.ehip-consent__transparenz p{
    margin: 0 0 4px;
}

/* Datenschutz und Impressum: Pflichtwege, aber keine Handlungsaufforderung. */
.ehip-consent__rechtliches{
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--ehip-text-leise);
}

/* ---- Ebene 2: vier kompakte Bereiche ---- */

.ehip-consent__bereiche{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0 0;
}

.ehip-consent__bereich{
    background: var(--ehip-flaeche);
    border: 1px solid var(--ehip-linie);
    border-radius: 12px;
    padding: 14px 16px;
}

.ehip-consent__bereichkopf{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ehip-consent__bereichtitel{
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--ehip-text);
}

.ehip-consent__status{
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--ehip-text-leise);
}

.ehip-consent__beschreibung{
    margin: 6px 0 0 !important;
    font-size: 14px;
    color: var(--ehip-text-leise);
}

.ehip-consent__teilweise{
    margin: 6px 0 0 !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--ehip-gruen);
}

/* Wahlschalter: das echte Eingabefeld, nur anders gezeichnet. Tippflaeche 48 x 44, auch per Tastatur (Leertaste) bedienbar. */
.ehip-consent__schalter{
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    min-height: 44px;
    cursor: pointer;
}

.ehip-consent__schalter input[type="checkbox"]{
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 48px;
    height: 28px;
    margin: 0;
    border-radius: 14px;
    background: var(--ehip-schalter-aus);
    cursor: pointer;
    transition: none;
}

.ehip-consent__schalter input[type="checkbox"]::before{
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ehip-dialog-flaeche);
}

.ehip-consent__schalter input[type="checkbox"]:checked{
    background: var(--ehip-gruen);
}

.ehip-consent__schalter input[type="checkbox"]:checked::before{
    left: 23px;
}

.ehip-consent__schalter input[type="checkbox"]:focus-visible{
    outline: 3px solid var(--ehip-fokus);
    outline-offset: 2px;
}

.ehip-consent__schalterzeichen{
    display: none;
}

/* Einzelheiten je Bereich: eingeklappt, bis jemand sie oeffnet. */
.ehip-consent__einzelheiten{
    margin: 8px 0 0;
    font-size: 14px;
}

.ehip-consent__einzelheiten > summary{
    min-height: 44px;
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--ehip-gruen);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

.ehip-consent__einzelheiten > summary:focus-visible{
    outline: 3px solid var(--ehip-fokus);
    outline-offset: 2px;
}

.ehip-consent__dienste{
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    font-size: 14px;
}

.ehip-consent__dienste li{
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid var(--ehip-linie);
    color: var(--ehip-text-leise);
    overflow-wrap: anywhere;
}

.ehip-consent__dienste li strong{
    color: var(--ehip-text);
}

.ehip-consent__weiteres{
    margin: 6px 0 0 !important;
    font-size: 14px;
    color: var(--ehip-text-leise);
}

/* ---- Das Bedienpaar. EINE Regel fuer beide Knoepfe (Standard 1.0, Abschnitt 4). ---- */

.ehip-consent__aktionen{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 18px 0 0;
}

/* Erste Ebene: Das Paar bleibt beim Scrollen im Dialog sichtbar. Die Reihenfolge im Dokument bleibt die am Schirm. */
.ehip-consent__ebene[data-consent-ebene="1"] .ehip-consent__aktionen{
    position: sticky;
    bottom: -32px;
    margin-bottom: 0;
    padding: 14px 0 12px;
    background: var(--ehip-dialog-flaeche);
    border-top: 1px solid var(--ehip-linie);
}

.ehip-consent__aktionen button,
.ehip-consent__speichern button{
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 12px 16px;
    font-family: var(--ehip-schrift-titel);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    border: 2px solid var(--ehip-knopf);
    border-radius: 4px;
    background: var(--ehip-knopf);
    color: var(--ehip-knopf-schrift);
    cursor: pointer;
    box-shadow: none;
}

.ehip-consent__aktionen button:hover,
.ehip-consent__speichern button:hover{
    background: var(--ehip-dialog-flaeche);
    color: var(--ehip-knopf-schrift);
    border-color: var(--ehip-knopf-schrift);
}

.ehip-consent__aktionen button:focus-visible,
.ehip-consent__speichern button:focus-visible{
    outline: 3px solid var(--ehip-fokus);
    outline-offset: 2px;
}

.ehip-consent__aktionen button:disabled,
.ehip-consent__speichern button:disabled{
    cursor: wait;
    opacity: .6;
}

/* "Auswahl speichern" steht unter dem Paar, volle Breite, dieselbe Gestalt (kein Knopf zweiter Klasse, aber auch kein
   dritter Gleichrangiger: er ist die Bestaetigung der sichtbaren Auswahl). */
.ehip-consent__speichern{
    margin: 12px 0 0 !important;
}

.ehip-consent__speichern button{
    width: 100%;
    flex: none;
}

/* Unter 360 px reicht der Platz fuer zwei Spalten nicht: untereinander, Ablehnen zuerst (Dokumentreihenfolge, kein row-reverse). */
@media (max-width: 359px){
    .ehip-consent__aktionen button{
        flex: 1 1 100%;
    }
}

/* "Individuell einstellen", "Anbieter und Details", "Alle Einwilligungen widerrufen": Wege, keine Entscheidungen, deshalb als
   Link gestaltet. Tippflaeche mindestens 44 px. */
.ehip-consent__unterzeile{
    margin: 8px 0 0 !important;
}

.ehip-consent__linkknopf{
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--ehip-schrift-text);
    font-size: 16px;
    font-weight: 600;
    color: var(--ehip-gruen);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

.ehip-consent__transparenz .ehip-consent__linkknopf{
    min-height: 0;
    font-size: 14px;
}

.ehip-consent__linkknopf:hover{
    color: var(--ehip-text);
}

.ehip-consent__linkknopf:focus-visible{
    outline: 3px solid var(--ehip-fokus);
    outline-offset: 2px;
}

/* Fehler beim Speichern: Der Dialog bleibt offen und sagt, was nicht geklappt hat. */
.ehip-consent__fehler{
    margin: 16px 0 0 !important;
    padding: 12px 14px;
    border: 1px solid var(--ehip-text);
    border-radius: 8px;
    background: var(--ehip-flaeche);
    font-size: 15px;
}

@media (max-width: 640px){
    .ehip-consent__dialog{
        width: calc(100% - 24px);
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        margin: 12px;
        padding: 20px;
    }

    .ehip-consent__ebene[data-consent-ebene="1"] .ehip-consent__aktionen{
        bottom: -20px;
    }

    .ehip-consent__dialog .ehip-consent__titel{
        font-size: 24px;
    }

    /* Zwei Spalten ab 360 px: Der Text darf in der Schmalspalte umbrechen, ohne dass die Knoepfe unterschiedlich hoch werden
       (beide Knoepfe stehen in einer Zeile, die Zeile streckt sie auf dieselbe Hoehe). */
    .ehip-consent__aktionen button,
    .ehip-consent__speichern button{
        padding: 10px 6px;
        font-size: 16px;
    }
}

/* --- Weg zurueck zur eigenen Entscheidung ---
   Steht auf jeder Seite, sobald eine Entscheidung vorliegt. Art. 7 Abs. 3
   DSGVO: Der Widerruf muss so einfach sein wie die Zustimmung. Bewusst klein
   und ruhig — auffindbar, nicht aufdringlich. Die Form ist die der Chips auf
   der Startseite: weisse Pille auf hellgrauer Linie. Liegt ausserhalb von
   #ehip-consent, deshalb feste Werte statt Variablen. */

.ehip-consent-widerruf{
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 9999;
    margin: 0;
    padding: 8px 14px;
    font-family: var(--ehip-schrift-text);
    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 600;
    border: 1px solid var(--ehip-linie);
    border-radius: 999px;
    background: var(--ehip-dialog-flaeche);
    color: var(--ehip-text-leise);
    cursor: pointer;
    opacity: .8;
    box-shadow: 0 2px 8px var(--ehip-schatten-leise);
}

.ehip-consent-widerruf[hidden]{
    display: none !important;
}

/* BEFUND 23.08.2026, beim Funktionstest gemessen: Der Knopf war NIE sichtbar.
   Nach der Entscheidung nimmt ehip-consent.js zwar das hidden-Attribut weg,
   eine Regel im zusammengefassten Theme-Bundle (reset/bootstrap/mmenu) setzte
   ihn danach aber weiterhin auf display:none — welche genau, laesst sich in
   der minifizierten Datei nicht sauber zuordnen, und die Ursache liegt
   ausserhalb dieses Bausteins. Deshalb hier der ausdrueckliche Gegenzug.

   Das ist nicht kosmetisch: Ohne diesen Knopf gibt es keinen Weg zurueck zur
   eigenen Entscheidung — Art. 7 Abs. 3 DSGVO verlangt, dass der Widerruf so
   einfach ist wie die Zustimmung. */
.ehip-consent-widerruf:not([hidden]){
    display: inline-block !important;
}

.ehip-consent-widerruf:hover,
.ehip-consent-widerruf:focus-visible{
    opacity: 1;
    border-color: var(--ehip-mint);
    color: var(--ehip-gruen);
    background: var(--ehip-dialog-flaeche);
}

.ehip-consent-widerruf:focus-visible{
    outline: 3px solid var(--ehip-fokus);
    outline-offset: 2px;
}

@media (max-width: 600px){
    .ehip-consent-widerruf{
        left: 8px;
        bottom: 8px;
        padding: 7px 12px;
        font-size: 11.5px;
    }
}

/* --- Zwei-Klick-Platzhalter ---
   Steht mitten im Seiteninhalt, also ausserhalb von #ehip-consent — die
   Variablen von oben greifen hier nicht, die Werte stehen deshalb direkt.
   Flaeche und Rahmen sind die der Karten auf den Produktseiten; die
   gestrichelte Linie bleibt, sie sagt "hier fehlt etwas, das erst auf deinen
   Klick laedt". */

.ehip-consent-platzhalter{
    background: var(--ehip-flaeche);
    border: 1px dashed var(--ehip-platzhalter-rand);
    border-radius: 12px;
    padding: 26px 20px;
    text-align: center;
    font-family: var(--ehip-schrift-text);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ehip-text);
}

.ehip-consent-platzhalter button{
    margin: 12px 0 0;
    padding: 11px 20px;
    font-family: var(--ehip-schrift-titel);
    font-size: 16px;
    font-weight: 500;
    border: 3px solid var(--ehip-knopf);
    border-radius: 0;
    background: var(--ehip-knopf);
    color: var(--ehip-knopf-schrift);
    cursor: pointer;
}

.ehip-consent-platzhalter button:hover{
    background: none;
    color: var(--ehip-gruen);
}

.ehip-consent-platzhalter button:focus-visible{
    outline: 3px solid var(--ehip-fokus);
    outline-offset: 2px;
}

/* Blockierte iframes einklappen, solange der Platzhalter steht */
iframe[data-consent-versteckt]{
    display: none;
}

/* --- Dienstetabelle in der Datenschutzerklaerung ({{ehip_dienste}}) --- */

.ehip-dienste h3{
    margin: 28px 0 8px;
}

.ehip-dienste__tabelle{
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 8px;
}

.ehip-dienste__tabelle th,
.ehip-dienste__tabelle td{
    border: 1px solid var(--ehip-linie);
    padding: 9px 11px;
    text-align: left;
    vertical-align: top;
}

.ehip-dienste__tabelle th{
    background: var(--ehip-flaeche);
    font-weight: 700;
}

/* Auf schmalen Bildschirmen wird aus jeder Zeile ein kleiner Block —
   eine vierspaltige Tabelle ist auf dem Telefon nicht lesbar.
   Grenze 900 statt 640 px (Browser-Abnahme Lauf 1, 01.10.2026, A11): Bei 767 px stand die Tabelle in der
   schmaleren Textspalte 647 px breit und weitete /datenschutz/ auf 817 px (50 px waagerechter Ueberlauf). */
@media (max-width: 900px){
    .ehip-dienste__tabelle,
    .ehip-dienste__tabelle tbody,
    .ehip-dienste__tabelle tr,
    .ehip-dienste__tabelle td{
        display: block;
        width: 100%;
    }

    .ehip-dienste__tabelle thead{
        display: none;
    }

    .ehip-dienste__tabelle tr{
        border: 1px solid var(--ehip-linie);
        border-radius: 6px;
        margin-bottom: 10px;
        padding: 4px 0;
    }

    .ehip-dienste__tabelle td{
        border: 0;
        padding: 4px 10px;
    }

    .ehip-dienste__tabelle td:first-child{
        font-weight: 700;
    }
}