/* Cookie-Einwilligung — Banner und Dialog im GMG-Stil.
   Gescopet auf die .gdpr-*-Klassen von uncode-privacy; das Plugin steuert die
   Sichtbarkeit selbst (inline display:none + fadeIn), deshalb hier NIE
   display/visibility setzen. */

:root {
	--gmg-consent-red: #E30613;
	--gmg-consent-ink: #1A1A1A;
	--gmg-consent-bg: #FFFFFF;
}

.gdpr.gdpr-privacy-bar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 10000;
	background: var(--gmg-consent-bg);
	color: var(--gmg-consent-ink);
	box-shadow: 0 -2px 24px rgba(0, 0, 0, .18);
	font-size: 15px;
	line-height: 1.55;
}

/* Platz unter der Leiste reservieren, solange sie steht.
   ------------------------------------------------------------------------
   Die Leiste ist `position: fixed` mit `z-index: 10000` und liegt damit über
   allem. Ohne Gegenmaßnahme sind die untersten Bildschirmpixel für den
   Seiteninhalt tot: gemessen auf /contact-business/ (500x727, frischer
   Kontext) landete ein Klick auf den Kalender der Terminbuchung auf „Alle
   akzeptieren". Eine niedrigere Leiste verkleinert diese Fläche nur, sie
   beseitigt sie nicht — deshalb bekommt das Dokument zusätzlich genau so
   viel Bodenfreiheit, wie die Leiste hoch ist. Jedes Element lässt sich
   dadurch über die Leiste hinausscrollen, auch das letzte im Footer.

   Die Höhe kommt aus `--gmg-consent-bar-h`, das consent.js an jeder
   Größenänderung neu misst (der Text bricht je nach Breite anders um, eine
   feste Zahl läge zwangsläufig daneben). Solange die Leiste vom Plugin auf
   `display: none` steht, ist der Wert 0px und die Klasse fehlt.

   Warum `.box-container` und nicht `body`: der Body-Hintergrund dieser
   Installation ist rot (#DD3333, Uncode-Demo-Erbe). Ein Innenabstand am Body
   selbst wäre ein roter Streifen. `.box-container` ist Uncodes äußerster
   Inhalts-Wrapper (auf allen sieben Seiten vorhanden, per curl geprüft); der
   reservierte Streifen liegt dort im transparenten Bereich und wird von der
   Leiste, die genau so hoch ist, vollständig abgedeckt.

   `scroll-padding-bottom` an der Wurzel sorgt dafür, dass auch der Browser
   selbst die Leiste kennt: Sprungmarken und das automatische Scrollen beim
   Tabben halten dadurch Abstand, statt das fokussierte Element hinter die
   Leiste zu schieben. */
html {
	scroll-padding-bottom: var(--gmg-consent-bar-h, 0px);
}

body.gmg-consent-bar-visible .box-container {
	padding-bottom: var(--gmg-consent-bar-h, 0px);
}

/* Fallback für ein Layout ohne `.box-container` (heute gibt es keins). Fällt
   ersatzlos weg, wo `:has()` fehlt — dann bleibt es beim Verhalten von vorher. */
body.gmg-consent-bar-visible:not(:has(.box-container)) {
	padding-bottom: var(--gmg-consent-bar-h, 0px);
}

.gdpr.gdpr-privacy-bar .gdpr-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	max-width: 1200px;
	margin-inline: auto;
	padding: 20px 24px;
}

.gdpr.gdpr-privacy-bar .gdpr-content {
	flex: 1 1 320px;
}

/* Der Fließtext ist der größte Posten an der Höhe der Leiste (bei 375px acht
   Zeilen). `line-height: 1.5` statt der 1.75, die das Parent-Theme jedem `p`
   gibt, nimmt rund ein Sechstel davon weg, ohne den Text zu kürzen oder
   kleiner zu setzen. Die Schriftgröße bleibt bei den 13px des Plugins
   (`.gdpr-privacy-bar .gdpr-wrapper p`, Spezifität 0-2-1); unsere 0-3-1
   gewinnt hier nur für die Zeilenhöhe, weil sie sonst nichts überschreibt.
   `hyphens` packt die langen deutschen Komposita enger. */
.gdpr.gdpr-privacy-bar .gdpr-content p {
	margin: 0;
	line-height: 1.5;
	hyphens: auto;
}

/* Hinweis nach einer abgelaufenen Entscheidung (consent.js setzt ihn ein).
   Spezifität 0-4-1 gegen die 0-3-1 der Regel darüber — deshalb kein
   `!important` für den Abstand nötig. */
.gdpr.gdpr-privacy-bar .gdpr-content p.gmg-consent-note {
	margin: 0 0 10px;
	font-weight: 600;
	color: var(--gmg-consent-red);
}

.gdpr.gdpr-privacy-bar .gdpr-right {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.gdpr.gdpr-privacy-bar .gdpr-bar-buttons {
	display: flex;
	gap: 12px;
}

/* Kein horizontaler Überlauf, wenn der Platz eng wird: die beiden
   Schaltflächen dürfen schrumpfen statt aus der Leiste zu laufen. Sie tun das
   gemeinsam und in gleichem Maß — die Gleichrangigkeit bleibt. */
.gdpr.gdpr-privacy-bar .gdpr-bar-buttons > * {
	min-width: 0;
}

/* Gleichrangigkeit: identische Geometrie und Typografie für Zustimmung und
   Ablehnung. Unterschiedlich ist nur die Fläche, nicht das Gewicht.
   !important auf Farbe/Hintergrund/Rahmen: beide Buttons erben von uncode-privacy
   die Klasse .btn-accent, und das Parent-Theme setzt
   `.btn-accent { color/background-color/border-color: … !important; }` mit dem
   generischen Uncode-Demo-Rot #ef0940 (uncode/library/css/style-custom.css:314) —
   ohne eigenes !important würde unser Marken-Rot #E30613 dort nie ankommen und
   Ablehnen/Akzeptieren blieben ununterscheidbar rot-auf-rot.
   !important auch auf font-size/-weight: uncode-privacy selbst setzt
   `.gdpr input[type="submit"], .gdpr button { font-size: 12px !important;
   font-weight: 600 !important; … }` (assets/css/uncode-privacy-public.css) —
   ohne Gegen-!important bliebe die Schrift beim Plugin-Wert von 12px. */
.gdpr.gdpr-privacy-bar .gdpr-agreement,
.gdpr.gdpr-privacy-bar .gdpr-reject {
	min-height: 46px;
	padding: 12px 22px;
	border: 2px solid var(--gmg-consent-red) !important;
	border-radius: 2px;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2;
	letter-spacing: .01em;
	cursor: pointer;
}

.gdpr.gdpr-privacy-bar .gdpr-agreement {
	background: var(--gmg-consent-red) !important;
	color: #FFF !important;
}

.gdpr.gdpr-privacy-bar .gdpr-reject {
	background: #FFF !important;
	color: var(--gmg-consent-red) !important;
}

/* uncode-privacy setzt hier `background-color: transparent !important; color:
   #fff !important;` (assets/css/uncode-privacy-public.css:80-84) — weisser Text
   war für den dunklen Demo-Banner gedacht, macht den Button auf unserem weissen
   Banner aber unsichtbar (weiss auf weiss). Ohne eigenes !important bliebe
   "Ihre Auswahl" nicht lesbar. */
.gdpr.gdpr-privacy-bar .gdpr-preferences {
	min-height: 46px;
	padding: 12px 4px;
	background: none !important;
	border: 0;
	color: var(--gmg-consent-ink) !important;
	font-size: 15px !important;
	text-decoration: underline;
	cursor: pointer;
}

/* Ohne !important gewinnt hier dieselbe Parent-Theme-Regel wie bei den
   Schaltflächen: der Link zur Datenschutzerklärung kam in Uncodes Demo-Rot
   #EF0940 heraus (im Browser nachgemessen) statt im Marken-Rot. Das ist nicht
   nur die falsche Farbe, sondern mit 4,39:1 auf Weiß auch unter den 4,5:1,
   die für diese Leiste gefordert sind; #E30613 liefert 4,88:1. Die
   Unterstreichung kommt dazu, damit der Link nicht allein an der Farbe
   erkennbar ist. */
.gdpr.gdpr-privacy-bar a {
	color: var(--gmg-consent-red) !important;
	text-decoration: underline;
}

/* Parent-Theme entfernt den Fokusring standardmässig:
   `body:not(.uncode-accessible) :focus, body:not(.uncode-accessible) button
   { outline: 0px; }` (uncode/library/css/style.css) — beide ohne !important,
   aber mit einem Element-Selektor (body/button) mehr Spezifität als unsere
   Klassen-Selektoren, daher gewinnen sie ohne Gegen-!important. */
.gdpr :focus-visible,
.gdpr-preferences:focus-visible {
	outline: 3px solid var(--gmg-consent-red) !important;
	outline-offset: 2px !important;
}

/* Dialog */
.gdpr.gdpr-privacy-preferences .gdpr-wrapper {
	max-width: 680px;
	max-height: 86vh;
	overflow-y: auto;
	background: var(--gmg-consent-bg);
	color: var(--gmg-consent-ink);
	padding: 28px;
	border-radius: 2px;
}

.gdpr.gdpr-privacy-preferences .gdpr-box-title h3 {
	margin: 0 0 4px;
	font-size: 22px;
}

.gdpr.gdpr-privacy-preferences .gdpr-cookies-used {
	padding: 16px 0;
	border-top: 1px solid rgba(0, 0, 0, .12);
}

.gdpr.gdpr-privacy-preferences .gdpr-cookie-title {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}

.gdpr.gdpr-privacy-preferences .gdpr-cookie-title p {
	margin: 0;
	font-weight: 600;
}

.gdpr.gdpr-privacy-preferences .gdpr-always-active {
	color: #4A4A4A;
	font-size: 13px;
}

/* Der tatsächliche Speichern-Button im Dialog ist ein <input type="submit">, kein
   <button> — verifiziert in views/public/privacy-preferences-modal.php:61. Beide
   Selektoren stehen daher hier; wie oben trägt das Element .btn-accent vom
   Plugin-Markup und braucht !important gegen dessen Parent-Theme-Farbe. */
.gdpr.gdpr-privacy-preferences .gdpr-privacy-preferences-frm button[type="submit"],
.gdpr.gdpr-privacy-preferences .gdpr-privacy-preferences-frm input[type="submit"] {
	min-height: 46px;
	margin-top: 20px;
	padding: 12px 22px;
	background: var(--gmg-consent-red) !important;
	border: 2px solid var(--gmg-consent-red) !important;
	border-radius: 2px;
	color: #FFF !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	cursor: pointer;
}

/* uncode-privacy setzt `.gdpr-privacy-preferences .gdpr-close { color: #fff; }`
   (assets/css/uncode-privacy-public.css:211-218) — für einen dunklen Dialog
   gedacht; auf unserem weissen Dialog ist das Schliesskreuz (Icon-Font-Glyph
   im :before) sonst weiss auf weiss und unsichtbar. */
.gdpr.gdpr-privacy-preferences .gdpr-close {
	width: 44px;
	height: 44px;
	color: var(--gmg-consent-ink);
	cursor: pointer;
}

@media (max-width: 640px) {
	.gdpr.gdpr-privacy-bar .gdpr-wrapper {
		gap: 12px;
		padding: 14px 16px;
	}

	.gdpr.gdpr-privacy-bar .gdpr-right {
		width: 100%;
	}

	/* Vorher `width: 100%`, also immer eine eigene Zeile für das Button-Paar
	   und eine zweite für „Ihre Auswahl". Mit einer Flex-Basis von 260px
	   teilen sich beide eine Zeile, sobald der Platz reicht (ab rund 430px
	   Viewport), und brechen darunter wie bisher um. Das spart eine volle
	   Zeile samt Abstand — 58px —, ohne dass ein Bedienelement kleiner oder
	   unauffälliger wird. */
	.gdpr.gdpr-privacy-bar .gdpr-bar-buttons {
		flex: 1 1 260px;
	}

	/* Schmaleres Innenmaß: bei 375px passte „Alle akzeptieren" sonst nicht in
	   eine Zeile und beide Schaltflächen wuchsen auf 64px. Beide bekommen
	   denselben Wert, die Flächen bleiben identisch. */
	.gdpr.gdpr-privacy-bar .gdpr-agreement,
	.gdpr.gdpr-privacy-bar .gdpr-reject {
		flex: 1 1 0;
		padding: 12px 14px;
	}
}

/* Notbremse für sehr flache Viewports (Telefon im Querformat, ~375x400):
   dort wäre selbst die kompakte Leiste fast der ganze Bildschirm. Nur der
   Textteil bekommt dann eine Höhengrenze und scrollt; die drei Aktionen
   bleiben immer sichtbar und unverändert gleichrangig. Bei den üblichen
   Hochformaten greift die Regel nicht. */
@media (max-height: 560px) {
	.gdpr.gdpr-privacy-bar .gdpr-content {
		max-height: 30vh;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gdpr * {
		transition: none !important;
		animation: none !important;
	}
}