/* AVD Utilities – Google Preferred Source */

.avdu-ps {
	--avdu-ps-accent: #156eff;
	--avdu-ps-radius: 16px;
	--avdu-ps-border: #e4e9f1;
	--avdu-ps-text: #16181d;
	--avdu-ps-muted: #6b7280;
	--avdu-ps-bg: #fff;

	position: relative;
	display: block;
	margin: 1.5em 0;
	line-height: 1.4;
}

.avdu-ps[hidden] { display: none; }

/* Der Wrapper bleibt immer sichtbar. Der Anker darin ist das, was der
   IntersectionObserver beobachtet – ein Element mit display:none
   existiert für ihn nicht. */
.avdu-ps-wrap { display: block; }

.avdu-ps__anchor {
	display: block;
	width: 100%;
	height: 1px;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

/* Sanft einblenden, sobald die Anzeigebedingung greift. */
.avdu-ps[data-avdu-ps-shown] {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .35s ease, transform .35s ease;
}

.avdu-ps[data-avdu-ps-shown].is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.avdu-ps[data-avdu-ps-shown] { transition: none; transform: none; }
}

/* Wegklicken */

/* Auch hier zwei Klassen: Das X ist ein <button>, und der Elementor-Kit
   verpasst jedem Button 16px/20px Innenabstand. In einem 22px-Kästchen
   bleibt dann kein Platz mehr für das Icon – es war schlicht weggedrückt. */
.avdu-ps .avdu-ps__close {
	position: absolute;
	top: -6px;
	right: -6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	color: var(--avdu-ps-muted);
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	opacity: .7;
	transition: opacity .15s, background .15s;
	-webkit-appearance: none;
	appearance: none;
	overflow: visible;
}

.avdu-ps .avdu-ps__close:hover,
.avdu-ps .avdu-ps__close:focus-visible {
	opacity: 1;
	background: rgba(16, 24, 40, .06);
}

.avdu-ps .avdu-ps__close svg {
	width: 14px;
	height: 14px;
	display: block;
	flex: 0 0 auto;
}

.avdu-ps--align-left .avdu-ps__close { right: auto; left: auto; position: static; margin-left: 6px; vertical-align: middle; }

.avdu-ps--align-center { text-align: center; }
.avdu-ps--align-right  { text-align: right; }

/* Zwei Klassen im Selektor, nicht eine.
   Der Elementor-Kit setzt für jeden Button der Seite eigene Größen
   (.elementor-kit-XXXXX button). Das ist spezifischer als eine einzelne
   Klasse und hat meine Werte überschrieben – der Button kam in
   Theme-Größe und ragte damit aus dem Kasten. */
.avdu-ps .avdu-ps__btn {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	margin: 0;
	padding: .55em .9em;
	border: 1px solid var(--avdu-ps-border);
	border-radius: var(--avdu-ps-radius);
	background: var(--avdu-ps-bg);
	color: var(--avdu-ps-text);
	font-family: inherit;
	font-size: .925rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	box-sizing: border-box;
	max-width: 100%;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
	transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
	-webkit-appearance: none;
	appearance: none;
}

.avdu-ps .avdu-ps__btn:hover,
.avdu-ps .avdu-ps__btn:focus-visible {
	border-color: var(--avdu-ps-accent);
	background: var(--avdu-ps-accent);
	color: #fff;
	box-shadow: 0 2px 10px rgba(16, 24, 40, .09);
}

.avdu-ps .avdu-ps__btn:focus-visible {
	outline: 2px solid var(--avdu-ps-accent);
	outline-offset: 2px;
}

.avdu-ps .avdu-ps__btn[disabled] { cursor: default; }

.avdu-ps__icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.avdu-ps__icon svg { width: 1.05em; height: 1.05em; display: block; }

.avdu-ps__icon svg path { transition: fill .15s; }

/* Auf gefülltem Grund wird das G einfarbig weiß. Bunt auf Blau erfüllt
   Googles Kontrastvorgaben nicht und sieht schmutzig aus. */
.avdu-ps__btn:hover .avdu-ps__icon svg path,
.avdu-ps__btn:focus-visible .avdu-ps__icon svg path,
.avdu-ps.is-done .avdu-ps__icon svg path {
	fill: #fff;
}

.avdu-ps .avdu-ps__note {
	margin: .5em 0 0;
	padding: 0;
	color: var(--avdu-ps-muted);
	font-family: inherit;
	font-size: .7rem;
	font-weight: 400;
	line-height: 1.45;
}

/* Zustände */

.avdu-ps.is-loading .avdu-ps__btn { opacity: .75; }

.avdu-ps.is-done .avdu-ps__btn {
	border-color: #0f7b3d;
	background: #0f7b3d;
	color: #fff;
	cursor: default;
}

.avdu-ps.is-done .avdu-ps__icon { color: #fff; }

/* Variante "bar" */

.avdu-ps.avdu-ps--bar .avdu-ps__btn {
	width: 100%;
	justify-content: center;
}

/* Ohne JavaScript */

.avdu-ps__fallback {
	display: inline-block;
	padding: .62em 1em;
	border: 1px solid var(--avdu-ps-border);
	border-radius: var(--avdu-ps-radius);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
}

/* Elementor-Flex-Container geben Widgets ohne Breite nur die Inhaltsbreite. */
.elementor-widget-avdu_preferred_source { width: 100%; max-width: 100%; }

@media (prefers-color-scheme: dark) {
	.avdu-ps {
		--avdu-ps-bg: #16181d;
		--avdu-ps-text: #eceef2;
		--avdu-ps-border: #2c3038;
		--avdu-ps-muted: #9aa2ae;
	}
}

@media (max-width: 767px) {
	.avdu-ps { --avdu-ps-radius: 12px; }
	.avdu-ps .avdu-ps__btn { font-size: .875rem; padding: .55em .8em; }
	.avdu-ps .avdu-ps__note { font-size: .65rem; }
}

@media print { .avdu-ps { display: none; } }

/* ---------- Mini-Toast unten in der Ecke ----------
   Bewusst klein und ohne Overlay. Google stuft bildschirmfüllende
   Einblendungen als aufdringlich ein und straft sie ab. */

.avdu-ps-wrap--toast { position: static; }

.avdu-ps--toast {
	position: fixed;
	z-index: 9998;
	bottom: 20px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: calc(100% - 40px);
	max-width: 390px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--avdu-ps-border);
	border-radius: var(--avdu-ps-radius);
	background: var(--avdu-ps-bg);
	box-shadow: 0 10px 30px rgba(16, 24, 40, .16);
}

.avdu-ps--toast.avdu-ps--pos-right  { right: 20px; }
.avdu-ps--toast.avdu-ps--pos-left   { left: 20px; }
.avdu-ps--toast.avdu-ps--pos-center { left: 50%; transform: translateX(-50%); }

.avdu-ps--toast .avdu-ps__icon { margin-top: 2px; }
.avdu-ps--toast .avdu-ps__icon svg { width: 18px; height: 18px; }

.avdu-ps__body { flex: 1 1 auto; min-width: 0; }

.avdu-ps .avdu-ps__toast-text {
	margin: 0 0 10px;
	padding: 0;
	color: var(--avdu-ps-text);
	font-family: inherit;
	font-size: .8rem;
	font-weight: 400;
	line-height: 1.45;
}

/* Der Minisatz gilt nur fürs Handy. */
.avdu-ps__toast-text--short { display: none; }

/* Zweite, kürzere Beschriftung – ebenfalls nur fürs Handy. */
.avdu-ps__label--kurz { display: none; }

/* Im Toast bleibt der Button klein – er soll nicht wie ein
   Formular-Absenden wirken, sondern wie ein Angebot.

   Kein nowrap: Bei einer langen Beschriftung stand der Button sonst über
   den Kastenrand hinaus. Umbrechen ist das kleinere Übel als überstehen,
   und mit dieser Schriftgröße bleibt der Text ohnehin einzeilig. */
.avdu-ps--toast .avdu-ps__btn--toast {
	width: auto;
	max-width: 100%;
	justify-content: center;
	padding: .42em .7em;
	border-radius: calc(var(--avdu-ps-radius) * .65);
	font-size: .825rem;
	line-height: 1.3;
	white-space: normal;
	text-align: center;
}

.avdu-ps.avdu-ps--toast .avdu-ps__close {
	position: static;
	flex: 0 0 auto;
	margin: -2px -4px 0 0;
}

/* Einblenden von unten */
.avdu-ps--toast[data-avdu-ps-shown] {
	opacity: 0;
	transform: translateY(14px);
}

.avdu-ps--toast.avdu-ps--pos-center[data-avdu-ps-shown] {
	transform: translateX(-50%) translateY(14px);
}

.avdu-ps--toast[data-avdu-ps-shown].is-visible {
	opacity: 1;
	transform: none;
}

.avdu-ps--toast.avdu-ps--pos-center[data-avdu-ps-shown].is-visible {
	transform: translateX(-50%);
}

/* Mobil: eine Zeile, mehr nicht.
   Der Erklärtext fällt weg – auf einem Handy zählt jeder Pixel, und die
   Aussage steckt schon im Button. Ergibt rund 48px Höhe statt 90. */

@media (max-width: 600px) {
	.avdu-ps--toast {
		right: 12px;
		left: 12px;
		bottom: 12px;
		width: auto;
		max-width: none;
		align-items: center;
		gap: 8px;
		padding: 8px 9px;
		border-radius: 12px;
	}

	.avdu-ps--toast.avdu-ps--pos-center { transform: none; }
	.avdu-ps--toast.avdu-ps--pos-center[data-avdu-ps-shown] { transform: translateY(14px); }
	.avdu-ps--toast.avdu-ps--pos-center[data-avdu-ps-shown].is-visible { transform: none; }

	/* Lange Erklärzeile weg, Minisatz rein */
	.avdu-ps--toast .avdu-ps__toast-text { display: none; }

	/* Der Satz darüber soll einzeilig bleiben. Wird er einmal zu lang,
	   endet er mit Auslassungspunkten statt umzubrechen – der Kasten
	   behält so immer dieselbe Höhe. */
	.avdu-ps--toast .avdu-ps__toast-text--short {
		display: block;
		margin: 0 0 6px;
		font-size: .68rem;
		line-height: 1.35;
		color: var(--avdu-ps-muted);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Kurzfassung der Beschriftung zeigen, lange ausblenden. */
	.avdu-ps--toast .avdu-ps__label--lang:not(:only-child) { display: none; }
	.avdu-ps--toast .avdu-ps__label--kurz { display: inline; }

	/* Das Google-G bleibt auch am Handy erkennbar. Bei 15px war es zwar
	   da, ging aber neben dem Text unter – es ist das Zeichen, an dem
	   Leser sofort sehen, worum es geht. */
	.avdu-ps--toast .avdu-ps__icon { margin-top: 0; }
	.avdu-ps--toast .avdu-ps__icon svg { width: 20px; height: 20px; }

	/* Knapp bemessen, damit die Beschriftung auch dann in eine Zeile passt,
	   wenn der Hinweis neben dem Cookie-Knopf eingekürzt wird. */
	.avdu-ps--toast .avdu-ps__btn--toast {
		padding: .38em .55em;
		border-radius: 9px;
		font-size: .78rem;
		line-height: 1.25;
	}

	.avdu-ps.avdu-ps--toast .avdu-ps__close {
		width: 22px;
		height: 22px;
		margin: 0;
	}

	.avdu-ps.avdu-ps--toast .avdu-ps__close svg { width: 13px; height: 13px; }
}

/* Sehr schmale Geräte: Button füllt die Zeile, Text darf umbrechen */
@media (max-width: 360px) {
	.avdu-ps--toast { gap: 7px; padding: 7px 9px; }
	.avdu-ps--toast .avdu-ps__icon svg { width: 18px; height: 18px; }
	.avdu-ps--toast .avdu-ps__toast-text--short { font-size: .64rem; margin-bottom: 5px; }
	.avdu-ps--toast .avdu-ps__btn--toast { font-size: .76rem; padding: .38em .55em; }
}