/* =====================================================================
* consent.css — Click-to-Load-Fassaden
*
* Gehoert zu mu-plugins/tierpark-consent.php (dort wird diese Datei auch
* eingebunden). Ersetzt zusammen mit js/consent.js die ~73 KB / 5 Requests
* des CookieYes-Plugins.
*
* Verbindliche Grundlage: design-mocks/DESIGN-RAHMEN.md
* Regel 2 nur CI-Gruens + neutrale Text-Grautoene, keine Grau-Flaechen
* Regel 5 Radius NUR 6px (Buttons/Felder) und 11px (Karten/Bilder)
* Regel 7 gefuellte Buttons Flaeche+Rahmen #557000, weiss, Hover #3f5300
* Regel 8 nur Mikro-Effekte, prefers-reduced-motion respektieren
* Regel 10 Icons gruen, geometrische SVG-Familie, KEINE Emojis
* Regel 12 Fokus = Rahmen #719130 + 3px Halo rgba(113,145,48,.22)
* Regel 14 .vplay Quadrat 52-54px / Radius 6px / rgba(255,255,255,.94) /
* Play-Dreieck 24px in #557000; Thumb-Platzhalter #eff7e8;
* Medientyp = Icon 17px + Versal-Label + 1px-Strich
*
* Alle Farben kommen aus den :root-Tokens in tpw-theme/style.css
* (Abschnitt 1) — hier werden KEINE neuen Farbwerte eingefuehrt.
*
* Inhalt
* 1. Fassade — Karte und Bildflaeche
* 2. Fassade — Play-/Medien-Marke
* 3. Fassade — Scrim-Overlay (Provider-Label, Hinweis, CTA)
* 4. Fassade — Zustaende (Hover, Fokus, geladen)
* 5. Optionen-Zeile unter der Karte
* 6. Widerrufs-Zeile
* 7. Status-/Widerrufsbereich auf der Datenschutz-Seite
* 8. Bewegungsreduktion
*
* HIER STAND BIS 2026-08-06 ABSCHNITT 6 „HINWEIS-LEISTE" (der schmale
* Cookie-Banner am Seitenfuss). Er ist mit der Leiste selbst entfernt —
* Begruendung im Kopf von Abschnitt 3 in mu-plugins/tierpark-consent.php.
* Die Abschnitte danach sind entsprechend neu durchnummeriert.
* ===================================================================== */
/* =====================================================================
* 1. FASSADE — KARTE UND BILDFLAECHE
*
* REDESIGN 2026-08-04 (User-Feedback "Videos schauen hässlich aus"):
* Vorher zwei gestapelte Bloecke — Bild plus ein fast gleich hoher
* Info-Block in Hellgruen. Jetzt EINE kompakte Karte im
* Embed-Seitenverhaeltnis; Hinweis und Aktion liegen als schlankes
* Scrim-Overlay am unteren Rand der Bildflaeche (Abschnitt 3).
*
* DUNKLE RUHEFLAECHE als Bildersatz: Wo es kein geeignetes lokales
* Vorschaubild gibt (Regel in mu-plugins/tierpark-consent.php,
* tpw_consent_vorschau_id), steht statt der hellen Flaeche #eff7e8 das
* dunkle CI-Gruen #3f5300 (--tpw-gruen-tief). Begruendung:
* - Die Flaeche ERSETZT ein Videobild, sie ist kein Deko-Streifen; das
* Scrim-Overlay darauf braucht ohnehin einen dunklen Grund, damit
* weisser Text traegt (Rahmen 1: heller Text auf dunklem CI-Gruen).
* - #3f5300 statt #557000, weil darauf auch Fliesstext-Groessen AAA
* erreichen (Weiss 8,6 : 1 nach der Kontrasttabelle des CI-Guide).
* - Keine neue Farbe: #3f5300 ist ein gesetzter Wert (Rahmen 1/7).
* ===================================================================== */
/* Haken-Motiv fuer die Merk-Checkbox (Abschnitt 5). Steht hier oben, weil es
ein lokales Token ist — die Familie selbst liegt in mu-plugins/tierpark-icons.php,
dort aber nur als Inline-SVG, nicht als Maske. */
.tpw-consent-fassade,
.tpw-consent-widerruf,
.tpw-consent-ds {
--tpw-consent-ic-haken: url("data:image/svg+xml;utf8,");
}
/* DIE RATIO-BOX (rev. 2026-08-04b).
`aspect-ratio` sitzt auf DIESEM Element — und zwar im Fassaden- UND im
geladenen Zustand (Abschnitt 4). Damit ist die Hoehe vor und nach der
Einwilligung per Konstruktion identisch, es gibt keinen Layout-Sprung.
Vorher trug die Ratio ein inneres Element, ein Massgeber liess die Karte
wachsen und die Optionen-Zeile stand darunter: die Karten-Fassade auf
/kontakt/ war nachgemessen 330x369, die geladene Karte 330x220.
`box-sizing:border-box` (Theme-Reset) heisst: die Ratio gilt inklusive
Rahmen — Rahmen, Radius und Schatten koennen darum hier bleiben und in
beiden Zustaenden gleich aussehen. */
.tpw-consent-fassade {
--tpw-consent-ratio: 16 / 9;
position: relative;
/* Groessenkontext fuer die Container-Queries in Abschnitt 3: abgefragt wird
die Breite DER KARTE, nicht die des Viewports. `inline-size` laesst die
Hoehe frei — das aspect-ratio bleibt also wirksam. */
container: tpwFassade / inline-size;
aspect-ratio: var(--tpw-consent-ratio);
margin: 0 0 1.5em; /* wie .wp-block-embed in poseidon/style.css */
max-width: 100%;
border: 1px solid var(--tpw-linie-zart);
border-radius: var(--r-card);
background: var(--tpw-gruen-tief);
box-shadow: var(--tpw-shadow-soft);
transition: transform .3s ease;
}
/* Die GANZE Karte ist EINE Schaltflaeche: ein Tab-Stop, grosses Klickziel.
Sie liegt unsichtbar unter dem Overlay, damit Klicks auf Hinweis und CTA
hier landen — der CTA sieht wie ein Knopf aus, ist aber kein eigenes
interaktives Element. */
.tpw-consent-schalter {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
border-radius: inherit;
background: none;
font-family: inherit;
cursor: pointer;
}
.tpw-consent-bild {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
margin: 0;
max-width: none;
/* 1px weniger als die Karte, damit der Rahmen nicht ueberdeckt wird. */
border-radius: calc(var(--r-card) - 1px);
}
/* Overlay ueber dem Klickziel. `pointer-events:none`, damit Klicks
durchfallen; nur die Optionen-Zeile schaltet sie wieder ein.
Zwei Grid-Reihen: die Marke zentriert in der freien Flaeche, das Scrim
darunter — so koennen sie sich auch auf kurzen Karten nie ueberlagern. */
.tpw-consent-overlay {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
/* minmax(0,1fr), NICHT 1fr: `1fr` ist `minmax(auto,1fr)`, und das
auto-Minimum macht die Spalte mindestens min-content breit. Mit den
nowrap-Teilen im Scrim (CTA, Ortsangabe) lief die Spalte damit aus der
Karte heraus — nachgemessen 473px Scrim in einer 330px breiten Karte,
Text rechts abgeschnitten. */
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 1fr auto;
pointer-events: none;
overflow: hidden;
border-radius: calc(var(--r-card) - 1px);
}
.tpw-consent-mitte {
grid-row: 1;
grid-column: 1;
display: grid;
place-items: center;
min-height: 0;
}
/* =====================================================================
* 2. FASSADE — PLAY-/MEDIEN-MARKE (Rahmen 14)
*
* Quadrat, NICHT rund: runde Form bleibt ausschliesslich Tierportraits
* (Rahmen 6).
* ===================================================================== */
.tpw-consent-fassade .vplay {
position: relative;
z-index: 2;
width: 54px;
height: 54px;
border-radius: var(--r-btn);
background: rgba(255, 255, 255, .94);
display: grid;
place-items: center;
color: var(--tpw-gruen-dunkel);
transition: background .25s ease;
}
.tpw-consent-fassade .vplay .tpw-ic {
width: 24px;
height: 24px;
}
/* Das Play-Dreieck ist gefuellt, nicht gestrichelt — deshalb hier explizit
fill/stroke, weil .tpw-ic in style.css fill:none setzt. */
.tpw-consent-fassade .tpw-consent-dreieck {
fill: currentColor;
stroke: none;
}
/* =====================================================================
* 3. FASSADE — SCRIM-OVERLAY
*
* Ersetzt den frueheren Info-Block. Der Verlauf laeuft nach oben aus, damit
* das Vorschaubild nicht abgeschnitten wirkt. Grundton ist --tpw-ink
* (#2b3120) — die eigene Textfarbe der CI, keine Graufarbe und kein neuer
* Wert. Weiss darauf liegt bei ueber 12 : 1 (WCAG AAA).
* ===================================================================== */
/* WARUM CONTAINER-QUERIES UND NICHT MEDIA-QUERIES:
Entscheidend ist die Breite der KARTE, nicht die des Viewports. Die Karte auf
/kontakt/ ist nur 330px breit, obwohl der Viewport 1180px hat — eine
Viewport-Abfrage haette ihr die Desktop-Masze gegeben und das Overlay waere
aus der Ratio-Box gelaufen. Die kompakten Werte sind darum der DEFAULT (sie
passen immer), und `@container` vergroessert erst ab 520px Kartenbreite.
Ohne Container-Query-Unterstuetzung bleibt es bei der kompakten Fassung. */
.tpw-consent-scrim {
grid-row: 2;
grid-column: 1;
position: relative;
z-index: 2;
/* Der obere Teil des Verlaufs ist reines Padding — dort steht kein Text,
der Uebergang zum Bild bleibt weich. */
padding: 18px 13px 10px;
background: linear-gradient(
to top,
rgba(43, 49, 32, .94) 0%,
rgba(43, 49, 32, .78) 55%,
rgba(43, 49, 32, 0) 100%
);
}
.tpw-consent-scrim-innen {
display: flex;
align-items: center;
gap: 12px;
max-width: 900px;
}
.tpw-consent-text {
flex: 1 1 auto;
min-width: 0;
}
/* Kopfzeile des Scrims: Provider-Label links, die weitergehende Option rechts.
Bricht bei sehr schmalen Karten um (dann steht die Option darunter). */
.tpw-consent-kopf {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
/* 8px, nicht 12: nachgemessen fehlten auf der schmalsten Karte (16:9 bei
340px, Kopfzeile 312px breit) genau 13px, damit Provider-Label und Option
auf EINE Zeile passen. Bricht die Zeile um, wuchs das Overlay auf 132 von
191px und die Play-Marke klebte an der Oberkante. */
gap: 2px 8px;
margin-bottom: 4px;
}
/* Provider-Label klein: EIN Icon + Versal-Label + Haarstrich + Anbieter
(Rahmen 14 — kein Badge-Wildwuchs). Auf der dunklen Flaeche ist das Icon
Hellgruen (#a1c160, dort nur fuer Linien/Deko zugelassen), das Versal-Label
#eff7e8 (Rahmen 1: heller Text auf dunklem Grund = Weiss oder #eff7e8). */
.tpw-consent-meta {
display: flex;
align-items: center;
gap: 7px;
}
.tpw-consent-meta .tpw-ic {
width: 14px;
height: 14px;
color: var(--tpw-gruen-hell);
flex: none;
}
.tpw-consent-typ {
font-size: .64rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--tpw-gruen-flaeche);
}
.tpw-consent-bar {
width: 1px;
height: 11px;
background: rgba(255, 255, 255, .45);
flex: none;
}
.tpw-consent-quelle {
font-size: .7rem;
font-weight: 600;
color: var(--tpw-gruen-flaeche);
}
/* Statische Ortsangabe der Karte.
Auf SCHMALEN Karten ausgeblendet (Default) und erst ab 520px Kartenbreite
sichtbar: auf /kontakt/ ist die Karte nur 330x220 gross, dort kostete die
umbrechende Adresse 36px und die Play-Marke haette im Overlay gelegen.
Es geht nichts verloren — Anschrift UND GPS stehen auf derselben Seite als
Datenzeilen unmittelbar neben der Karte; genau darauf beruft sich auch
Kapitel 4 der Datenschutzerklaerung ("Karten sind nicht erforderlich, um uns
zu finden"). */
.tpw-consent-ersatz {
display: none;
margin-bottom: 2px;
font-size: .78rem;
line-height: 1.35;
font-weight: 700;
color: #fff;
}
/* Die eine Hinweiszeile. Weiss, nicht abgesenkt — abgesenkte Deckkraft traegt
auf dunklem Grund keinen Fliesstext (Rahmen 1). */
.tpw-consent-hinweis {
display: block;
font-size: .78rem;
line-height: 1.4;
font-weight: 500;
color: #fff;
}
/* Sieht aus wie ein Button, ist aber Teil der umgebenden Schaltflaeche.
Weisse Flaeche mit #557000-Text: auf der dunklen Medienflaeche ist das die
Umkehrung nach dem Vorbild der Play-Marke (Rahmen 14: weisse Flaeche,
#557000 Inhalt, mittig ueber dem Thumb). Ein gefuellter #557000-Button haette
auf dem Scrim knapp 1,5 : 1 Flaechenkontrast und wuerde darin verschwinden.
Textkontrast #557000 auf Weiss: 5,7 : 1 (AA). */
.tpw-consent-cta {
flex: none;
display: inline-block;
padding: 8px 13px;
border: 1px solid #fff;
border-radius: var(--r-btn);
background: #fff;
color: var(--tpw-gruen-dunkel);
font-size: .8rem;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
transition: background .25s ease, border-color .25s ease, color .25s ease;
}
/* =====================================================================
* 4. FASSADE — ZUSTAENDE
* ===================================================================== */
/* Mikro-Effekt: 2px-Lift, nichts kippt oder springt (Rahmen 8). Der Lift sitzt
auf der Karte, nicht auf dem Klickziel — `transform` aendert die Layout-Hoehe
nicht, der Sprung-freie Zustand bleibt also erhalten.
`:has()` waere hier eleganter, aber nicht noetig: Hover auf der Karte und
Hover auf dem randlosen Klickziel darin sind deckungsgleich. */
.tpw-consent-fassade:hover {
transform: translateY(-2px);
}
.tpw-consent-fassade:hover .vplay {
background: #fff;
}
.tpw-consent-fassade:hover .tpw-consent-cta {
background: var(--tpw-gruen-flaeche);
border-color: var(--tpw-gruen-flaeche);
color: var(--tpw-gruen-tief);
}
/* Das Klickziel MUSS in jedem Zustand durchsichtig bleiben — es liegt mit
z-index 1 ueber Bild und Overlay, eine Flaeche darauf verdeckt die ganze
Fassade. `background: none` steht aber nur in der Grundregel (0,1,0) und
verliert gegen `button:hover/:focus/:active` des Parent-Themes (0,1,1),
das dort --button-hover-color (#557000) einsetzt. Dieselbe Ursache wie beim
unlesbaren Leisten-Knopf, siehe die Notiz in Abschnitt 6. */
.tpw-consent-schalter:hover,
.tpw-consent-schalter:focus,
.tpw-consent-schalter:active {
background: none;
}
/* Fokus nach Rahmen 12: Rahmen #719130 PLUS 3px Halo. Weil das Klickziel
randlos in der Karte liegt, wird der Rahmen als INSET-Ring gezeichnet — der
Halo bleibt der aeussere 3px-Schein wie ueberall. `outline:none` ist nur
zulaessig, weil beide gesetzt sind. */
.tpw-consent-schalter:focus-visible {
outline: none;
box-shadow:
inset 0 0 0 1.5px var(--tpw-gruen),
var(--tpw-fokus-halo);
}
/* Nach dem Klick: das eingesetzte iframe fuellt genau dieselbe Box. Ratio,
Rahmen, Radius und Schatten stehen bereits in der Grundregel (Abschnitt 1) —
hier kommt nur das Clipping fuer das iframe hinzu. Die Hoehe der Fassade und
die des Embeds sind damit identisch: nachgemessen /kontakt/ 330x220 vorher
und nachher. */
.tpw-consent-fassade.is-geladen {
overflow: hidden;
}
.tpw-consent-fassade.is-geladen > iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* Breite Karten: eine Stufe groesser. Abgefragt wird die KARTENbreite
(Container-Query, Begruendung oben) — nicht der Viewport. */
@container tpwFassade (min-width: 520px) {
.tpw-consent-scrim {
padding: 30px 18px 14px;
}
.tpw-consent-scrim-innen {
gap: 16px;
}
.tpw-consent-meta {
gap: 8px;
margin-bottom: 5px;
}
.tpw-consent-meta .tpw-ic {
width: 15px;
height: 15px;
}
.tpw-consent-typ {
font-size: .68rem;
}
.tpw-consent-quelle {
font-size: .74rem;
}
.tpw-consent-hinweis {
font-size: .84rem;
line-height: 1.45;
}
.tpw-consent-ersatz {
display: block;
font-size: .84rem;
}
.tpw-consent-cta {
padding: 11px 20px;
font-size: .92rem;
}
.tpw-consent-optionen {
margin-top: 11px;
font-size: .82rem;
}
.tpw-consent-alle-knopf {
font-size: .82rem;
}
}
/* =====================================================================
* 5. OPTIONEN IM SCRIM
*
* "Für diesen Besuch merken" (sessionStorage, endet mit dem Tab) in der
* Fusszeile des Scrims; "Alle externen Inhalte immer laden" (localStorage,
* 6 Monate) rechts in der Kopfzeile. Beide bewusst als ruhige Textelemente
* ohne Flaeche — erreichbar, aber nicht der Sog.
*
* Sie liegen seit rev. 2026-08-04b IM Scrim, nicht unter der Karte: darunter
* kosteten sie 64px Hoehe, die das geladene Embed nicht hat — das war eine der
* drei Ursachen des Layout-Sprungs auf /kontakt/. Es sind die einzigen Teile
* des Overlays, die `pointer-events` wieder annehmen, denn hier stehen die
* beiden ECHTEN Bedienelemente. Sie liegen dadurch NICHT im grossen Klickziel
* darunter — keine verschachtelten interaktiven Elemente.
* ===================================================================== */
.tpw-consent-optionen {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 3px 12px;
margin: 6px 0 0;
font-size: .72rem;
color: #fff;
pointer-events: auto;
}
/* Textknopf ohne Flaeche. Auf dem dunklen Scrim in #eff7e8 (Rahmen 1: heller
Text auf dunklem Grund = Weiss oder #eff7e8), Hover auf reines Weiss.
Bewusst eine Stufe leiser als die Merk-Option daneben (600 statt 700): die
weitergehende Entscheidung darf nicht der optische Sog sein. */
.tpw-consent-alle-knopf {
pointer-events: auto;
flex: none;
padding: 2px 2px;
border: 0;
border-radius: var(--r-btn);
background: none;
font-family: inherit;
font-size: .68rem;
font-weight: 600;
color: var(--tpw-gruen-flaeche);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
/* Auch hier `background: none` mitfuehren: die Grundregel (0,1,0) verliert
gegen `button:hover/:focus` des Parent-Themes (0,1,1), das eine Flaeche
einsetzt — auf dem dunklen Scrim waere das ein grauer Kasten mitten im Bild.
Ursache: `button:hover/:focus` im Parent-Theme (poseidon/style.css Zeile
631 ff.) setzt `color: var(--button-hover-text-color)` = #fff und eine eigene
Flaeche; was eine Zustands-Regel hier nicht SELBST erklaert, bleibt darauf
stehen. Spezifitaet (0,1,1) gegen (0,2,0) — die Klasse gewinnt nur fuer ihre
eigenen Deklarationen. */
.tpw-consent-alle-knopf:hover,
.tpw-consent-alle-knopf:focus,
.tpw-consent-alle-knopf:active {
background: none;
}
.tpw-consent-alle-knopf:hover,
.tpw-consent-alle-knopf:focus,
.tpw-consent-alle-knopf:focus-visible {
color: #fff;
}
/* Auf dem dunklen Grund traegt der gruene Halo nicht — hier ein weisser Ring
in derselben Staerke (3px), damit der Fokus sichtbar bleibt (Rahmen 12). */
.tpw-consent-alle-knopf:focus-visible,
.tpw-consent-optionen input[type="checkbox"]:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .55);
}
.tpw-consent-merken label {
display: inline-flex;
align-items: center;
gap: 7px;
cursor: pointer;
font-weight: 700;
color: #fff;
}
/* Feld-Grundform nach Rahmen 12: Radius 6px, 1.5px Rahmen, Flaeche weiss.
`appearance:none` ist hier NOETIG: an einer nativen Checkbox ignoriert der
Browser border und border-radius (nachgemessen: borderRadius 0px), die
Rahmen-12-Form waere also nicht erreichbar. Das Element bleibt ein echtes
— Semantik, Tastatur und Screenreader unveraendert. */
.tpw-consent-merken input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
margin: 0;
/* Auf dem dunklen Scrim ist der Feldrahmen weiss statt gruen — der gruene
Rahmen aus Rahmen 12 waere dort nicht sichtbar. Form (Radius 6px,
1.5px) bleibt unveraendert. */
border: 1.5px solid rgba(255, 255, 255, .7);
border-radius: var(--r-btn);
background: none;
flex: none;
cursor: pointer;
display: grid;
place-items: center;
transition: background-color .2s ease, border-color .2s ease;
}
/* Haken aus derselben geometrischen Familie (Strichstaerke 1.7, runde Enden,
Rahmen 10) — als Maske, damit er die Farbe annimmt. */
.tpw-consent-merken input[type="checkbox"]::before {
content: "";
width: 11px;
height: 11px;
background: var(--tpw-gruen-dunkel);
transform: scale(0);
transition: transform .15s ease;
-webkit-mask: var(--tpw-consent-ic-haken) center / contain no-repeat;
mask: var(--tpw-consent-ic-haken) center / contain no-repeat;
}
/* Angehakt: weisse Flaeche mit #557000-Haken — dieselbe Umkehrung wie beim
CTA und bei der Play-Marke (Rahmen 14). */
.tpw-consent-merken input[type="checkbox"]:checked {
background: #fff;
border-color: #fff;
}
.tpw-consent-merken input[type="checkbox"]:checked::before {
transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
.tpw-consent-merken input[type="checkbox"],
.tpw-consent-merken input[type="checkbox"]::before {
transition: none;
}
}
/* =====================================================================
* 6. WIDERRUFS-ZEILE
*
* Erscheint nur, wenn in dieser Sitzung etwas gemerkt wurde. Damit ist der
* Widerruf so einfach wie die Erteilung (DSGVO Art. 7 Abs 3) — beim alten
* Banner gab es ueberhaupt keinen Weg zurueck (showagain_tab: false).
* ===================================================================== */
.tpw-consent-widerruf {
padding: 13px 18px;
background: var(--tpw-surface-2);
border-top: 1px solid var(--tpw-linie);
text-align: center;
}
.tpw-consent-widerruf[hidden] {
display: none;
}
.tpw-consent-widerruf p {
margin: 0;
font-size: .86rem;
color: var(--tpw-ink-soft);
}
/* Textknopf, keine Flaeche — die Zeile soll ruhig bleiben. */
.tpw-consent-widerruf-knopf {
padding: 2px 4px;
border: 0;
border-radius: var(--r-btn);
background: none;
font-family: inherit;
font-size: inherit;
font-weight: 700;
color: var(--tpw-gruen-dunkel);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.tpw-consent-widerruf-knopf:hover {
color: var(--tpw-gruen-tief);
}
/* Textknopf ohne Flaeche — und er soll auch im Hover/Fokus keine bekommen.
`background: none` steht nur in der Grundregel (0,1,0) und verliert gegen
`button:hover/:focus` des Parents (0,1,1), das dort #404040 einsetzt: ohne
diese Zeile erschien beim Ueberfahren ein dunkelgrauer Kasten. */
.tpw-consent-widerruf-knopf:hover,
.tpw-consent-widerruf-knopf:focus,
.tpw-consent-widerruf-knopf:active {
background: none;
}
.tpw-consent-widerruf-knopf:focus,
.tpw-consent-widerruf-knopf:focus-visible {
color: var(--tpw-gruen-tief);
}
.tpw-consent-widerruf-knopf:focus-visible {
outline: none;
box-shadow: var(--tpw-fokus-halo);
}
/* =====================================================================
* 7. STATUS-/WIDERRUFSBEREICH AUF DER DATENSCHUTZ-SEITE
*
* Wird per the_content-Filter in das Embed-Kapitel eingehaengt
* (mu-plugins/tierpark-consent.php, Abschnitt 3b) — der post_content der
* rechtlich abgenommenen Seite bleibt unberuehrt.
*
* Form wie die Infobox in rahmen-textseite.html: helle Flaeche --surface-2,
* Haarlinie, Radius 11px. Keine Grauflaeche, keine neue Farbe.
* ===================================================================== */
.tpw-consent-ds {
margin: 1.8em 0;
padding: 20px 22px;
background: var(--tpw-surface-2);
border: 1px solid var(--tpw-linie-stark);
border-radius: var(--r-card);
}
.tpw-consent-ds-titel {
margin: 0 0 9px;
font-size: 1rem;
font-weight: 700;
color: var(--tpw-ink);
}
.tpw-consent-ds-status {
margin: 0 0 4px;
font-size: .95rem;
color: var(--tpw-ink);
}
.tpw-consent-ds-wert {
font-weight: 700;
color: var(--tpw-gruen-dunkel);
}
/* Ohne JavaScript sind die Schaltflaechen wirkungslos — sie erscheinen darum
erst, wenn js/consent.js `is-aktiv` gesetzt hat. Der Status im Markup ist
der Default-Zustand (deny) und stimmt auch ohne Skript. */
.tpw-consent-ds-aktionen {
display: none;
flex-wrap: wrap;
gap: 10px;
margin: 14px 0 0;
}
.tpw-consent-ds.is-aktiv .tpw-consent-ds-aktionen {
display: flex;
}
/* Outline-Button nach Rahmen 7. */
.tpw-consent-ds-alle,
.tpw-consent-ds-widerruf {
padding: 12px 20px;
border: 1.5px solid var(--tpw-gruen);
border-radius: var(--r-btn);
background: #fff;
color: var(--tpw-gruen-dunkel);
font-family: inherit;
font-size: .92rem;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
transition: background .25s ease;
}
/* `color` mit erklaert — Ursache ist das Parent-Theme: `button:hover/:focus`
in poseidon/style.css (Zeile 631 ff.) setzt `color:
var(--button-hover-text-color)` = #fff. Spezifitaet (0,1,1) gegen (0,2,0):
die Klasse gewinnt, aber nur fuer das, was sie SELBST erklaert — ohne die
eigene Schriftfarbe bliebe Weiss auf #eff7e8 stehen (1,1 : 1). */
.tpw-consent-ds-alle:hover,
.tpw-consent-ds-widerruf:hover {
background: var(--tpw-gruen-flaeche);
color: var(--tpw-gruen-dunkel);
}
.tpw-consent-ds-alle:focus,
.tpw-consent-ds-widerruf:focus,
.tpw-consent-ds-alle:focus-visible,
.tpw-consent-ds-widerruf:focus-visible {
background: #fff;
color: var(--tpw-gruen-dunkel);
}
.tpw-consent-ds-alle:hover:focus,
.tpw-consent-ds-widerruf:hover:focus {
background: var(--tpw-gruen-flaeche);
}
.tpw-consent-ds-alle:focus-visible,
.tpw-consent-ds-widerruf:focus-visible {
outline: none;
box-shadow: var(--tpw-fokus-halo);
}
.tpw-consent-ds-alle[hidden],
.tpw-consent-ds-widerruf[hidden] {
display: none;
}
.tpw-consent-ds-fuss {
margin: 12px 0 0;
font-size: .84rem;
line-height: 1.55;
color: var(--tpw-ink-soft);
}
.tpw-consent-ds-fuss code {
font-size: .82rem;
background: none;
padding: 0;
color: var(--tpw-gruen-dunkel);
}
/* =====================================================================
* 8. BEWEGUNGSREDUKTION (Rahmen 8)
* ===================================================================== */
@media (prefers-reduced-motion: reduce) {
.tpw-consent-fassade,
.tpw-consent-cta,
.tpw-consent-ds-alle,
.tpw-consent-ds-widerruf,
.tpw-consent-fassade .vplay {
transition: none;
}
/* Der Lift sitzt seit rev. 2026-08-04b auf der Karte, nicht auf dem
Klickziel darin. */
.tpw-consent-fassade:hover {
transform: none;
}
}