/* Drawer Embeds — Rahmen um den eingebetteten Shop.
   Alle Maße kommen je Eintrag als CSS-Variablen aus dem Plugin. */

.dre-drawer {
	--dre-w: 34rem;      /* Breite */
	--dre-h: 85dvh;      /* Höhe (nur „unten" und „mitte") */
	--dre-r: 0px;        /* Eckenradius */
	--dre-bg: #ffffff;   /* Hintergrundfarbe */
	--dre-fg: #111111;   /* daraus abgeleitete Schriftfarbe */
	--dre-p: 0px;        /* Innenabstand */
	--dre-m: 0px;        /* Außenabstand zum Fensterrand */
	--dre-x: 2.75rem;    /* Kantenlänge des Schließen-Knopfs */
	--dre-blase-r: 75px; /* Abstand der abgelegten Blase zum rechten Rand */
	--dre-blase-u: 1.25rem; /* ... und nach unten */
	--dre-xgap: .7rem;   /* Abstand des Knopfs zu Oberkante und rechtem Rand */

	/* Kopfzeilenhöhe so bemessen, dass der Knopf oben und rechts denselben
	   Abstand hat: Knopfgröße plus zweimal der Abstand. */
	--dre-bar: calc(var(--dre-x) + 2 * var(--dre-xgap));
	--dre-kurve: cubic-bezier(.32, .72, 0, 1);

	box-sizing: border-box;
	max-width: none;
	max-height: none;
	width: min(var(--dre-w), calc(100vw - 2 * var(--dre-m)));
	padding: var(--dre-p);
	border: 0;
	overflow: hidden;
	background: var(--dre-bg);
	color: var(--dre-fg);
	border-radius: var(--dre-r);
	box-shadow: 0 0 3rem rgba(0, 0, 0, .3);
}

/* Ohne Titel und ohne Schließen-Knopf entfällt die Kopfzeile ganz. */
.dre-drawer[data-bar="0"] {
	--dre-bar: 0px;
}

/* Vorgabe — je Eintrag überschreibt das Plugin diese Regel. */
.dre-drawer::backdrop {
	background: rgba(0, 0, 0, .55);
}

/* Hintergrund-Scroll sperren, solange ein Drawer offen ist.
   Bewusst ans [open]-Attribut gekoppelt statt per JS im close-Event:
   fällt ein Event aus, bliebe die Seite sonst dauerhaft gesperrt. */
html:has(.dre-drawer[open]:not([data-pos="push"]):not(.is-min)) {
	overflow: hidden;
}

/* ---------- Kein fremder Fokusring ---------- */

/* Der blaue Rahmen kam weder vom Browser allein noch aus dieser Datei, sondern
   vom Theme (button:focus / :active) — plus dem Ring, den Chrome auf den
   <dialog> selbst legt, weil beim Öffnen der Dialog den Fokus bekommt.
   Beides wird hier abgeräumt. Rückmeldung bei Tastaturbedienung gibt es
   weiterhin, nur über Deckkraft und Hintergrund statt über einen Rahmen. */
.dre-drawer:focus,
.dre-drawer:focus-visible,
.dre-min-blase:focus,
.dre-min-blase:focus-visible,
.dre-min-blase:active,
.dre-drawer__close:focus,
.dre-drawer__close:focus-visible,
.dre-drawer__close:active,
.dre-drawer__min:focus,
.dre-drawer__min:focus-visible,
.dre-drawer__min:active,
.dre-merker:focus,
.dre-merker:focus-visible,
.dre-merker:active {
	outline: 0;
	-webkit-tap-highlight-color: transparent;
}

/* Die Knöpfe tragen keinen eigenen Schatten — dort darf er ersatzlos weg.
   Die gemerkte Blase lebt von ihrem Schatten, deshalb steht sie nicht dabei. */
.dre-min-blase:focus,
.dre-min-blase:active,
.dre-drawer__close:focus,
.dre-drawer__close:active,
.dre-drawer__min:focus,
.dre-drawer__min:active {
	box-shadow: none;
}

.dre-merker:focus,
.dre-merker:active {
	box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
}

/* ---------- Positionen ---------- */

.dre-drawer[data-pos="right"] {
	margin: var(--dre-m) var(--dre-m) var(--dre-m) auto;
	height: calc(100dvh - 2 * var(--dre-m));
}

.dre-drawer[data-pos="left"] {
	margin: var(--dre-m) auto var(--dre-m) var(--dre-m);
	height: calc(100dvh - 2 * var(--dre-m));
}

/* Waagerecht zentriert: mit festen Seitenrändern würde das Sheet bei
   gesetztem Außenabstand am linken Rand kleben. Die Breite ist ohnehin
   schon auf 100vw minus zweimal Außenabstand gedeckelt. */
.dre-drawer[data-pos="bottom"] {
	margin: auto auto var(--dre-m);
	height: min(var(--dre-h), calc(100dvh - 2 * var(--dre-m)));
}

.dre-drawer[data-pos="center"] {
	margin: auto;
	height: min(var(--dre-h), calc(100dvh - 2 * var(--dre-m)));
}

/* Schiebe-Modus: nicht-modal. Der Drawer legt sich an den rechten Rand und
   schiebt den Seiteninhalt zur Seite, statt ihn zu überdecken. Die Seite
   bleibt bedienbar, lesbar und scrollbar. */
.dre-drawer[data-pos="push"] {
	position: fixed;
	top: 0;
	left: auto;
	/* Echtes fixed am Fensterrand — deshalb steht am <html> bewusst KEIN
	   Transform. Ein Transform dort würde <html> zum Bezugsrahmen machen und
	   damit aus jedem position:fixed faktisch ein absolute: klebende
	   Kopfzeilen würden beim Scrollen weglaufen, und auf Seiten mit breitem
	   Inhalt springt die Darstellung weg. */
	right: 0;
	margin: 0;
	width: min(var(--dre-w), 100vw);
	height: 100dvh;
	box-shadow: -.5rem 0 2rem rgba(0, 0, 0, .18);

	/* Ein nicht-modaler <dialog> landet NICHT in der Top-Layer — anders als
	   showModal(). Er steht also im normalen Stapel und würde von Theme-
	   Elementen mit hohem z-index verdeckt. */
	z-index: 2147483000;
}

/* Verschoben wird <html>, nicht <body>.

   Entscheidend ist der Transform: er ist optisch wirkungslos, macht <html>
   aber zum Bezugsrahmen für alle position:fixed-Elemente der Seite. Nur so
   wandern klebende Kopfzeilen, Cookie-Leisten und Zurück-nach-oben-Knöpfe
   mit — mit margin-right allein bleiben sie am Viewport kleben und stehen. */
/* Der Inhalt wird per translateX verschoben (siehe dre-drawer.js), nicht
   gestaucht. Hier bleibt nur das Wegschneiden dessen, was dabei links aus dem
   Fenster läuft. */
html:has(.dre-drawer.is-entering[data-pos="push"]) {
	overflow-x: hidden;
}

/* Vom Skript angefasste fixierte Elemente — sie sollen mitgleiten statt zu
   springen. */
.dre-shifted {
	transition: transform .34s var(--dre-kurve);
}

/* ---------- Bewegung ---------- */

@media (prefers-reduced-motion: no-preference) {
	.dre-drawer.is-entering {
		animation: dre-in .34s var(--dre-kurve);
	}

	.dre-drawer.is-entering[data-pos="right"]  { animation-name: dre-from-right }
	.dre-drawer.is-entering[data-pos="left"]   { animation-name: dre-from-left }
	.dre-drawer.is-entering[data-pos="bottom"] { animation-name: dre-from-bottom }
	.dre-drawer.is-entering[data-pos="push"]   { animation-name: dre-from-right }
	.dre-drawer.is-entering[data-pos="center"] { animation-name: dre-in }

	.dre-drawer.is-entering::backdrop {
		animation: dre-fade .28s ease;
	}

	/* Ausfahren: läuft gleichzeitig mit dem Zurückgleiten des Inhalts. */
	.dre-drawer[data-pos="push"].is-closing {
		animation: dre-to-right .34s var(--dre-kurve) forwards;
	}

	@keyframes dre-to-right    { from { transform: none } to { transform: translateX(110%) } }
	@keyframes dre-from-right  { from { transform: translateX(110%) }  to { transform: none } }
	@keyframes dre-from-left   { from { transform: translateX(-110%) } to { transform: none } }
	@keyframes dre-from-bottom { from { transform: translateY(110%) }  to { transform: none } }
	@keyframes dre-in          { from { opacity: 0; transform: scale(.97) } to { opacity: 1; transform: none } }
	@keyframes dre-fade        { from { opacity: 0 } to { opacity: 1 } }
}

/* ---------- Innenleben ---------- */

.dre-drawer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	height: var(--dre-bar);
	padding: 0 var(--dre-xgap) 0 1.15rem;
	box-sizing: border-box;
}

/* Bewusst ohne Typografie: Schriftart, -größe und -schnitt kommen aus dem
   Theme. Nur das Abschneiden bleibt, damit ein langer Titel die Kopfzeile
   nicht sprengt. */
.dre-drawer__title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Ohne Titel rutscht der Schließen-Knopf nach rechts. */
.dre-drawer__bar:not(:has(.dre-drawer__title)) {
	justify-content: flex-end;
}

.dre-drawer__close {
	flex: 0 0 auto;
	width: var(--dre-x);
	height: var(--dre-x);
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 1.35em;
	line-height: 1;
	cursor: pointer;
	opacity: .5;
	transition: opacity .15s ease;
}

.dre-drawer__close:hover,
.dre-drawer__close:focus-visible {
	opacity: 1;
}

.dre-drawer__body {
	position: relative;
	height: calc(100% - var(--dre-bar));
}

.dre-drawer__body iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	/* Innenradius: nur sichtbar, wenn ein Innenabstand gesetzt ist —
	   ohne Abstand beschneidet bereits das overflow:hidden des Drawers. */
	border-radius: max(0px, calc(var(--dre-r) - var(--dre-p)));
}

.dre-drawer[data-bar="1"] .dre-drawer__body iframe {
	border-radius: 0 0
		max(0px, calc(var(--dre-r) - var(--dre-p)))
		max(0px, calc(var(--dre-r) - var(--dre-p)));
}

.dre-drawer__status {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	text-align: center;
	background: var(--dre-bg);
	color: var(--dre-fg);
}

/* ---------- Zur Seite gelegt ---------- */

.dre-drawer__min {
	flex: 0 0 auto;
	/* Schiebt sich selbst nach rechts, damit Minimieren und Schließen
	   beieinander stehen statt in der Mitte zu hängen. */
	margin-left: auto;
	width: var(--dre-x);
	height: var(--dre-x);
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 1.35em;
	line-height: 1;
	cursor: pointer;
	opacity: .5;
	transition: opacity .15s ease;

	/* Rückt den Schließen-Knopf näher heran. */
	margin-right: -.4rem;
}

.dre-drawer__min:hover,
.dre-drawer__min:focus-visible {
	opacity: 1;
}

/* Die Blase ersetzt im abgelegten Zustand den ganzen Drawer. */
.dre-min-blase {
	display: none;
	align-items: center;
	gap: .6em;
	width: auto;
	height: 100%;
	padding: 0 1.25em;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-align: left;
}

.dre-min-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
}

.dre-min-anzahl:not(:empty) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6em;
	height: 1.6em;
	padding: 0 .4em;
	border-radius: 1em;
	background: var(--dre-fg);
	color: var(--dre-bg);
	font-size: .85em;
}

.dre-min-zeit:not(:empty) {
	margin-left: auto;
	opacity: .6;
	font-variant-numeric: tabular-nums;
}

/* Der abgelegte Drawer: kleine Leiste unten rechts. Position und Größe sind
   bewusst fest und nicht von den Maßen des Drawers abgeleitet — die Blase soll
   überall gleich unauffällig sein. */
.dre-drawer.is-min {
	/* Ein nicht-modaler <dialog> ist absolut positioniert — ohne fixed und
	   ohne zurückgesetzte Ränder landet die Blase irgendwo am Dokumentende
	   statt in der Fensterecke. */
	position: fixed;
	margin: 0;
	inset: auto var(--dre-blase-r) var(--dre-blase-u) auto;

	/* Im abgelegten Zustand ist der Dialog nicht mehr modal und damit nicht
	   mehr in der Top-Layer — ohne z-index verschwindet die Blase hinter dem
	   Seiteninhalt. */
	z-index: 2147483000;

	/* So breit wie der Inhalt, nicht breiter — vorher stand die Blase auf
	   einer festen Breite und hatte rechts Luft. */
	width: auto;
	max-width: calc(100vw - 2.5rem);
	height: 3.5rem;
	max-height: none;
	padding: 0;
	overflow: hidden;
	border-radius: 999px;
	box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
}

.dre-drawer.is-min .dre-drawer__bar,
.dre-drawer.is-min .dre-drawer__body,
.dre-drawer.is-min .dre-confirm {
	display: none;
}

.dre-drawer.is-min .dre-min-blase {
	display: flex;
}

/* Während des Übergangs zwischen groß und Blase übernimmt das Skript die
   Animation (siehe ueberblenden()). Die Ein-/Ausfahr-Keyframes müssen dabei
   schweigen, sonst überlagern sich zwei Bewegungen. */
.dre-drawer.is-flip {
	animation: none !important;
}

/* Während der Überblendung läuft bewusst nur EINE Animation auf dem Dialog
   selbst. Früher lagen Inhalt und Blase gleichzeitig übereinander und wurden
   gegeneinander geblendet — das ergab drei Bewegungen auf einmal und flackerte
   sichtbar. Der Wechsel des Inhalts versteckt sich jetzt im Verblassen. */

/* Blase nach einem Seitenwechsel — sieht aus wie der abgelegte Drawer, ist
   aber nur ein Knopf: der iframe entsteht erst beim Klick. */
.dre-merker {
	--dre-blase-r: 75px;
	--dre-blase-u: 1.25rem;
	position: fixed;
	inset: auto var(--dre-blase-r) var(--dre-blase-u) auto;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	gap: .6em;
	height: 3.5rem;
	padding: 0 1.25em;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font: inherit;
	cursor: pointer;
	box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
}

.dre-merker .dre-min-anzahl {
	background: #111;
	color: #fff;
}

/* ---------- Vorgeschalteter Warenkorb ---------- */

/* Der Warenkorb trägt seine Überschrift fett — beim Drawer bleibt sie, wie das
   Theme sie setzt, dort steht ja fremder Inhalt darunter. */
.dre-pc .dre-drawer__title {
	font-weight: 700;
}

/* Höhe aus dem Inhalt statt volle Fensterhöhe. Bewusst über eine höhere
   Spezifität statt !important, damit die Blase (.is-min) weiter gewinnt. */
.dre-drawer.dre-pc:not(.is-min) {
	height: auto;
	max-height: calc(100dvh - 2 * var(--dre-m));

	/* Unten rechts verankert, dort wo auch die Blase sitzt. Der Browser
	   verankert modale Dialoge oben UND unten (inset: 0); mit beidem verankert
	   würde height:auto auf volle Höhe gestreckt — also oben lösen. */
	top: auto;
	bottom: var(--dre-m);
	margin: 0 var(--dre-m) 0 auto;
}

/* Der Warenkorb fährt nicht von rechts ein wie der Drawer, sondern wächst an
   Ort und Stelle auf — er sitzt ja schon dort, wo die Blase liegt. */
@media (prefers-reduced-motion: no-preference) {
	.dre-drawer.dre-pc.is-entering:not(.is-min) {
		animation: dre-pc-rein .34s var(--dre-kurve);
	}

	@keyframes dre-pc-rein {
		from { opacity: 0; transform: translateY(1rem) scale(.98) }
		to   { opacity: 1; transform: none }
	}
}

.dre-drawer.dre-pc:not(.is-min) .dre-drawer__body {
	height: auto;
	max-height: none;
}

.dre-pc__body {
	display: flex;
	flex-direction: column;
	padding: 1.25rem;
	overflow-y: auto;
	box-sizing: border-box;
}

.dre-pc__leer[hidden],
.dre-pc__summe[hidden] {
	display: none;
}

.dre-pc__leer {
	margin: 2rem 0;
	text-align: center;
	opacity: .6;
}

.dre-pc__zeile {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 1rem;
	padding: .75rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--dre-fg) 12%, transparent);
}

.dre-pc__menge {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.dre-pc__knopf {
	width: 2rem;
	height: 2rem;
	border: 1px solid color-mix(in srgb, var(--dre-fg) 30%, transparent);
	border-radius: 50%;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.dre-pc__knopf:hover {
	background: color-mix(in srgb, var(--dre-fg) 10%, transparent);
}

.dre-pc__zahl {
	min-width: 1.5em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.dre-pc__preis {
	min-width: 5em;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Vorschlag für ein Zusatzticket. Sitzt zwischen Liste und Summe, damit klar
   ist: gehört zur Auswahl, ist aber noch nicht Teil davon. */
/* Eigener Kasten, damit der Vorschlag als Angebot lesbar ist und nicht als
   weitere Zeile der Auswahl. Kein Trennstrich oben: die letzte Zeile der Liste
   bringt schon einen mit, und zwei Linien übereinander sahen aus wie ein
   Fehler. */
.dre-pc__zusatz {
	margin-top: 1rem;
	padding: 1rem 1.1rem .85rem;
	border: 1px solid color-mix(in srgb, var(--dre-fg) 10%, transparent);
	border-radius: .9rem;
	background: color-mix(in srgb, var(--dre-fg) 3%, transparent);
	box-shadow: 0 .4rem 1.4rem color-mix(in srgb, var(--dre-fg) 8%, transparent);
}

/* Steht sonst nichts im Warenkorb, gibt es auch nichts abzusetzen — dann ist
   der Vorschlag der Inhalt und braucht keinen Rahmen um sich selbst. */
.dre-pc__zusatz--pur {
	margin-top: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* Und dann auch keinen Werbetext: „zu einem bereits gebuchten Stellplatz"
   erklärt ein Ticket, das schon im Korb liegt. Übrig bleibt die Zeile, die
   sich wie jede andere der Liste verhält. */
.dre-pc__zusatz--pur .dre-pc__zusatz-titel,
.dre-pc__zusatz--pur .dre-pc__zusatz-text,
.dre-pc__zusatz--pur .dre-pc__zusatz-klein {
	display: none;
}

.dre-pc__zusatz--pur .dre-pc__zeile--zusatz {
	padding-bottom: .75rem;
	border-bottom: 1px solid color-mix(in srgb, var(--dre-fg) 12%, transparent);
}

.dre-pc__zusatz[hidden] {
	display: none;
}

/* Enge Zeilenhöhe: der Abstand zum Text kam nicht vom Rand, sondern vom
   Durchschuss der Überschrift — das Theme setzt reichlich davon. */
.dre-pc__zusatz-titel {
	margin: 0 0 .15rem;
	line-height: 1.3;
	font-weight: 600;
}

.dre-pc__zusatz-text {
	margin: 0;
	font-size: .9em;
	line-height: 1.45;
	opacity: .75;
}

/* Kleingedrucktes — eigener Absatz, bewusst kleiner als der Fließtext. */
.dre-pc__zusatz-klein {
	margin: .5rem 0 0;
	font-size: 12px;
	line-height: 1.4;
	opacity: .6;
}

.dre-pc__zusatz-klein[hidden] {
	display: none;
}

/* Die Vorschlagszeile steht allein im Kasten — ohne Trennstrich und ohne den
   unteren Abstand, den die Zeilen der Liste voneinander brauchen. */
.dre-pc__zeile--zusatz {
	padding-bottom: 0;
	border-bottom: 0;
}

.dre-pc__summe {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: .5rem;
	padding-top: .75rem;
	font-weight: 600;
}

.dre-pc__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;

	/* Die Knöpfe wachsen nicht mehr über die ganze Breite, also müssen sie
	   irgendwo andocken — rechts, auf der Seite der Summe. */
	justify-content: flex-end;
	padding-top: 1.25rem;
}

.dre-pc__kasse,
.dre-pc__mehr {
	/* So breit wie die Beschriftung, nicht so breit wie die Zeile. */
	flex: 0 1 auto;

	/* Ein Maß für alle Knöpfe im Warenkorb und in den Rückfragen. */
	padding: .35em .9em;
	font-size: .9em;
	border: 1px solid currentColor;
	border-radius: .35em;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.dre-pc__kasse {
	background: var(--dre-fg);
	color: var(--dre-bg);
}

.dre-pc__kasse[disabled] {
	opacity: .4;
	cursor: default;
}

/* ---------- Hinweis beim Verlassen der Seite ---------- */

/* Ein eigener Dialog statt einer Ebene im Drawer: der Hinweis muss auch dann
   sichtbar sein, wenn der Drawer gerade als Blase in der Ecke liegt — und dort
   ist der Inhalt ausgeblendet. Aussehen kommt über die Instanz-Variablen aus
   demselben Regelsatz wie der Drawer. */
.dre-drawer.dre-leave {
	margin: auto;
	width: min(30rem, calc(100vw - 2rem));

	/* fit-content statt auto: der Browser verankert modale Dialoge oben UND
	   unten (inset: 0), und mit beidem verankert streckt sich eine Höhe „auto"
	   über das ganze Fenster. Mit fit-content bleibt die Höhe am Inhalt, und
	   die automatischen Ränder zentrieren. */
	height: fit-content;
	max-height: calc(100dvh - 2rem);
	overflow: auto;
	padding: 1.75rem;
	border-radius: max(var(--dre-r), .5rem);
}

.dre-leave__box {
	text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
	.dre-drawer.dre-leave[open] {
		animation: dre-leave-rein .22s var(--dre-kurve);
	}

	@keyframes dre-leave-rein {
		from { opacity: 0; transform: scale(.96) }
		to   { opacity: 1; transform: none }
	}
}

/* ---------- Rückfrage vor dem Schließen ---------- */

.dre-confirm {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: var(--dre-bg);
	color: var(--dre-fg);
}

.dre-confirm[hidden] {
	display: none;
}

.dre-confirm__box {
	max-width: 24rem;
	text-align: center;
}

/* Auch hier keine Typografie — Größe und Schnitt kommen aus dem Theme. */
.dre-confirm__text {
	margin: 0 0 1.25rem;
}

.dre-confirm__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
}

/* Die Knöpfe erben Schrift und Farbe; nur Rahmen und Fläche sind gesetzt,
   damit sie ohne Theme-Styles überhaupt als Knöpfe erkennbar sind. */
.dre-confirm__btn {
	padding: .35em .9em;
	font-size: .9em;
	border: 1px solid currentColor;
	border-radius: .35em;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.dre-confirm__yes {
	opacity: .65;
}

.dre-confirm__yes:hover,
.dre-confirm__yes:focus-visible {
	opacity: 1;
}

.dre-confirm__no {
	background: currentColor;
}

/* Der Text im gefüllten Knopf braucht die Gegenfarbe. */
.dre-confirm__no {
	color: var(--dre-bg);
	border-color: var(--dre-fg);
	background: var(--dre-fg);
}

.dre-drawer.is-ready:not(.is-filling) .dre-drawer__status {
	display: none;
}

.dre-status__box {
	width: min(18rem, 100%);
	text-align: center;
}

.dre-status__text {
	margin: 0 0 1rem;
}

.dre-status__leiste {
	height: .35rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--dre-fg) 15%, transparent);
	overflow: hidden;
}

.dre-status__balken {
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--dre-fg);
	transition: width .25s ease;
}

.dre-status__zahl {
	margin: .6rem 0 0;
	opacity: .6;
	font-variant-numeric: tabular-nums;
}

/* Auf kleinen Schirmen ist jede Variante ein Vollbild — 30rem Shop-Breite
   passen sonst nicht neben den Rand. Außenabstand und Radius entfallen. */
@media (max-width: 640px) {
	/* Zum Schieben ist kein Platz — der Drawer wird Vollbild, der Versatz
	   entfällt. */


	.dre-drawer[data-pos]:not(.is-min) {
		--dre-m: 0px;
		margin: auto auto 0;
		width: 100vw;
		height: 100dvh;
		border-radius: 0;
	}

	/* Der abgelegte Zustand darf hier NICHT Vollbild werden — genau das tat er,
	   weil die Regel oben gleich stark ist und später steht. Auf dem Handy
	   bleibt nur Symbol, Anzahl und Restzeit. */
	.dre-drawer.is-min {
		inset: auto .75rem .75rem auto;
		width: auto;
		min-width: 3.5rem;
		max-width: calc(100vw - 1.5rem);
		height: 3.5rem;
	}

	.dre-drawer.is-min .dre-min-blase {
		gap: .5em;
		padding: 0 1em;
	}

	.dre-drawer.is-min .dre-min-text {
		display: none;
	}

	.dre-merker .dre-min-text {
		display: none;
	}
}