/* ==========================================================================
   REWE Party & Eventverleih - Frontend Styles (Shop / Buchungstool)
   Alle Styles fuer den Buchungs-Shop-Bereich gehoeren in diese Datei,
   damit style.css des Themes sauber bleibt.
   ========================================================================== */

/* Mietartikel- / Kaufartikel-Karte (JetEngine Listing Item) */
.add-card-available {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
	padding: 16px;
	margin-bottom: 16px;
	background: #ffffff;
	border: 1px solid #e3e3e3;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.add-card-available img {
	width: 96px;
	height: 96px;
	flex: 0 0 96px;
	object-fit: cover;
	border-radius: 8px;
	background: #f2f2f2;
}

.mietartikel-content {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 4px !important;
	flex: 1 1 auto;
}

.artikel-title {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

/* Tagessatz. Die Reihenfolge in der Karte kommt aus dem Markup, nicht mehr aus
   order-Werten - siehe rewe_render_mietartikel_karten(). */
.artikel-price {
	font-size: 15px;
	font-weight: 600;
	color: #1a1a1a;
}

.artikel-price-einheit {
	font-size: 13px;
	font-weight: 400;
	color: #777777;
}

.artikel-availability {
	font-size: 13px;
	color: #2e7d32;
}

/* Mengen-Stepper */
.qty-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	order: 2;
	margin-top: 8px;
}

.qty-btn {
	width: 30px;
	height: 30px;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	background: #f7f7f7;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.qty-btn:hover {
	background: #ececec;
}

.qty-wrapper input[type="number"] {
	width: 48px;
	height: 30px;
	text-align: center;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
}

/* Aufklappbare Artikel-Infos */
.artikel-info {
	margin-top: 2px;
}

.artikel-info summary {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	color: #555555;
}

/* Eigenes Dreieck statt des Browser-Markers: Der Marker laesst sich nicht
   drehen und sieht in jedem Browser anders aus. */
.artikel-info summary {
	list-style: none;
}

.artikel-info summary::-webkit-details-marker {
	display: none;
}

.artikel-info summary::marker {
	content: "";
}

/* Geschlossen zeigt das Dreieck nach unten, offen nach oben. currentColor,
   damit es die Schriftfarbe der Beschriftung uebernimmt. */
.artikel-info-pfeil {
	width: 0;
	height: 0;
	flex: 0 0 auto;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform 0.15s ease;
}

.artikel-info[open] .artikel-info-pfeil {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {

	.artikel-info-pfeil {
		transition: none;
	}
}

.artikel-info summary:hover {
	color: #1a1a1a;
}

.artikel-description {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: #666666;
}

.artikel-description p {
	margin: 0 0 8px;
}

.artikel-description p:last-child {
	margin-bottom: 0;
}

/* Klickflaeche fuer die (visuell versteckte) Checkbox pro Karte korrekt begrenzen */
.jet-form-builder__field-wrap.checkboxes-wrap.checkradio-wrap {
	position: relative;
	display: block;
	width: 100%;
}


/* ============================================================
   Zum-Warenkorb-hinzufuegen: unsichtbaren Checkbox-Overlay
   (JetFormBuilder Default-CSS) deaktivieren, damit Klicks auf
   Button und Mengen-Stepper wieder durchkommen.

   NUR innerhalb der Artikelkarten. Bis 23.09.2026 galt die Regel
   fuer jede Checkbox im Formular - dadurch war "Lieferadresse
   weicht von Rechnungsadresse ab" nicht anklickbar.
   ============================================================ */
.add-card-available .jet-form-builder__field-label.for-checkbox,
.rewe-kauf-karte .jet-form-builder__field-label.for-checkbox {
	pointer-events: none !important;
}

/* "Zum Warenkorb hinzufuegen" Button */
.add-to-cart-btn {
	order: 3;
	margin-top: 10px;
	padding: 10px 18px;
	background: #2e7d32;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.add-to-cart-btn:hover {
	background: #256428;
}

.add-to-cart-btn:disabled,
.add-to-cart-btn.is-loading {
	opacity: 0.65;
	cursor: default;
}

.add-to-cart-btn.is-added {
	background: #1b5e20;
}

.add-to-cart-btn.is-added::after {
	content: ' ✓';
}

.add-to-cart-btn.rewe-btn-error {
	background: #c62828;
}

/* ============================================================
   Warenkorb-Widget (gruppiert: Mietartikel / Zusatzartikel)
   ============================================================ */
.rewe-warenkorb-widget {
	width: 100%;
}

.rewe-warenkorb-toggle {
	border: 1px solid #e3e3e3;
	border-radius: 12px;
	background: #ffffff;
	margin-bottom: 20px;
	overflow: hidden;
}

.rewe-warenkorb-toggle > summary {
	list-style: none;
	cursor: pointer;
	padding: 14px 18px;
	font-size: 15px;
	font-weight: 600;
	display: flex;
	align-items: center;
	/* Kein justify-content mehr: space-between schob den alten zweiteiligen Titel
	   (Text + Zaehler) auseinander. Der neue Titel besteht aus Icon, Text und Pfeil und
	   soll laut Entwurf mittig stehen - das entscheidet die Gestaltung, nicht diese
	   Datei. */
}

.rewe-warenkorb-toggle > summary::-webkit-details-marker {
	display: none;
}

/* Die frueheren Zeichen-Pfeile (▾ / ▴) als ::after sind entfallen: Der Titel bringt
   jetzt ein echtes Chevron-SVG mit, das sich drehen und einfaerben laesst. Beides
   gleichzeitig waeren zwei Pfeile. */

.rewe-warenkorb-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	margin-left: 8px;
	background: #2e7d32;
	color: #ffffff;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.rewe-warenkorb-panel {
	padding: 0 18px 18px;
}

.rewe-warenkorb-gruppe {
	margin-top: 12px;
}

.rewe-warenkorb-gruppe-titel {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #666666;
	margin: 0 0 8px;
}

.rewe-warenkorb-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rewe-warenkorb-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	padding: 6px 0;
	border-bottom: 1px solid #f0f0f0;
}

/* Vorschaubild vor dem Titel. Feste Groesse, damit die Namen aller Zeilen auf
   derselben Kante beginnen - auch bei Platzhaltern.

   Die Groesse haengt an EINER Variable. --rewe-warenkorb-bild laesst sich von aussen
   setzen, etwa im :root der style.css, ohne diese Datei anzufassen; ohne Angabe gelten
   72px aus dem Entwurf.

   Die drei Werte muessen zusammen bleiben: In einer Flex-Zeile bestimmt flex-basis die
   Breite, width allein waere wirkungslos und das Bild wuerde verzerren. */
.rewe-warenkorb-item-bild {
	--bild: var(--rewe-warenkorb-bild, 72px);

	width: var(--bild);
	height: var(--bild);
	flex: 0 0 var(--bild);
	object-fit: cover;
	border-radius: 6px;
	background: #f2f2f2;
}

/* Bild | Textblock | Bedienelemente. Der Textblock stapelt Titel und Stueckzahl.

   min-width: 0 an beiden Stellen ist kein Zierwerk: Ohne das wachsen Flex-Elemente
   nicht unter ihre Inhaltsbreite, und ein langer Artikelname wuerde Stepper und
   Entfernen-Button aus der Zeile schieben. */
.rewe-warenkorb-item-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.rewe-warenkorb-item-name {
	min-width: 0;
}

.rewe-warenkorb-item-qty {
	color: #666666;
	white-space: nowrap;
}

.rewe-warenkorb-item-remove {
	background: none;
	border: none;
	color: #999999;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 4px;
}

.rewe-warenkorb-item-remove:hover {
	color: #c62828;
}

.rewe-warenkorb-empty {
	padding: 18px;
	color: #999999;
	font-size: 14px;
}


/* ==== Eigene Steps-Navigation (Buchungsformular, Ersatz fuer native JFB-Pagination) ==== */
.rewe-step {
	display: none;
}
.rewe-step.is-active {
	display: block;
}
.rewe-step-next,
.rewe-step-prev {
	cursor: pointer;
}
#jet_abaf_field.rewe-field-error {
	border-color: #d63638 !important;
	box-shadow: 0 0 0 1px #d63638;
}

/* ==== Zeitraumbezogene Verfuegbarkeit ==== */
/* Karte, die im gewaehlten Zeitraum komplett ausgebucht ist. Sie bleibt sichtbar,
   damit der Kunde den Artikel im Sortiment findet und ggf. den Zeitraum aendert. */
/* Ausgebucht im gewaehlten Zeitraum.

   Die gesamte Karte wurde hier frueher auf opacity: .55 gesetzt. Das ist entfallen:
   Der Hinweis, WARUM nicht gebucht werden kann, ist die wichtigste Information auf der
   Karte - halb durchsichtig waere er die am schlechtesten lesbare.

   Stueckzahl und Button verschwinden, der Hinweis nimmt ihren Platz ein. Beide Regeln
   sind auf .artikel-aktionen eingegrenzt, weil .qty-wrapper und .add-to-cart-btn auch
   von den Kaufartikel-Karten benutzt werden. */

.add-card-available.is-ausgebucht .artikel-bedienung {
	display: none;
}

.artikel-nicht-verfuegbar {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border: 1px solid #d63638;
	border-radius: 10px;
	color: #d63638;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.add-card-available.is-ausgebucht .artikel-nicht-verfuegbar {
	display: flex;
}

/* "i" im Kreis. currentColor, damit ein Farbwechsel am Hinweis genuegt. */
.artikel-nicht-verfuegbar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 12px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
}

.add-card-available.is-ausgebucht .artikel-availability {
	color: #d63638;
	font-weight: 600;
}

/* Kurze Rueckmeldung, wenn der Stepper an der Obergrenze der freien Stueck haengt. */
.qty-wrapper.qty-limit-reached {
	animation: rewe-qty-shake .35s ease;
}

.qty-wrapper.qty-limit-reached input[type="number"] {
	color: #d63638;
}

@keyframes rewe-qty-shake {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-3px); }
	75%      { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
	.qty-wrapper.qty-limit-reached {
		animation: none;
	}
}

/* ==== Warenkorb: "Auswahl bearbeiten" ==== */
/* Ausserhalb des Bearbeiten-Modus bleibt die Liste eine reine Leseliste:
   Stepper und Entfernen-Button sind ausgeblendet. */
.rewe-warenkorb-aktionen {
	display: flex;
	justify-content: flex-end;
	padding-top: 4px;
}

.rewe-warenkorb-edit-toggle {
	background: none;
	border: none;
	padding: 4px 0;
	font-size: 13px;
	font-weight: 600;
	color: #2e7d32;
	cursor: pointer;
	text-decoration: underline;
}

.rewe-warenkorb-edit-toggle:hover {
	color: #1b5e20;
}

.rewe-warenkorb-item-stepper,
.rewe-warenkorb-item-remove {
	display: none;
}

.rewe-warenkorb-panel.is-editing .rewe-warenkorb-item-stepper {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.rewe-warenkorb-panel.is-editing .rewe-warenkorb-item-remove {
	/* inline-flex statt inline-block: Im Button steckt jetzt ein SVG, das mittig
	   auf der Zeile sitzen soll. */
	display: inline-flex;
	align-items: center;
}

.rewe-warenkorb-qty-btn {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e3e3e3;
	border-radius: 6px;
	background: #ffffff;
	color: #333333;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

.rewe-warenkorb-qty-btn:hover {
	border-color: #2e7d32;
	color: #2e7d32;
}

.rewe-warenkorb-item-qty-zahl {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: #333333;
}

/* Obergrenze erreicht: aktuelle Menge + freie Einheiten im selben Zeitraum. */
.rewe-warenkorb-item.qty-limit-reached {
	animation: rewe-qty-shake .35s ease;
}

.rewe-warenkorb-item.qty-limit-reached .rewe-warenkorb-item-qty-zahl {
	color: #d63638;
}

@media (prefers-reduced-motion: reduce) {
	.rewe-warenkorb-item.qty-limit-reached {
		animation: none;
	}
}

/* ==== Inline-Meldungen (Ersatz fuer alert()) ==== */
/* Erscheinen direkt an der betroffenen Stelle: an der Artikelkarte, im Warenkorb
   oder unter der Datumsauswahl - statt als blockierender Browser-Dialog. */
.rewe-meldung {
	margin-top: 10px;
	padding: 9px 12px;
	border-radius: 8px;
	border: 1px solid #f5c2c7;
	background: #fdf2f2;
	color: #8a1f1f;
	font-size: 13px;
	line-height: 1.4;
}

.rewe-meldung[hidden] {
	display: none;
}

/* ==== Kaufartikel-Auswahl: nur Sichtbarkeitssteuerung ==== */
/* Die Gestaltung der Tabs und Karten kommt aus Bricks bzw. dem Theme-CSS.
   Hier steht bewusst nur, was zum Umschalten noetig ist. */
.rewe-kauf-panel {
	display: none;
}

.rewe-kauf-panel.is-active {
	display: block;
}

/* ==== Auswahl verwerfen ==== */
.rewe-warenkorb-aktionen {
	gap: 14px;
}

.rewe-warenkorb-reset {
	background: none;
	border: none;
	padding: 4px 0;
	font-size: 13px;
	color: #999999;
	cursor: pointer;
	text-decoration: underline;
}

.rewe-warenkorb-reset:hover {
	color: #c62828;
}

/* Zweite Stufe: erst dieser Klick loescht wirklich. */
.rewe-warenkorb-reset.is-confirming {
	color: #ffffff;
	background: #c62828;
	padding: 4px 10px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
}

/* ==== Storno-Seite ====
   Eigenstaendige Seite, die der Link aus der Eingangsbestaetigung aufruft. Sie liegt
   ausserhalb des Bricks-Layouts, deshalb bringt sie ihre eigene Breite und ihren
   eigenen Aussenabstand mit. */

.rewe-storno {
	max-width: 640px;
	margin: 0 auto;
	padding: 48px 20px 64px;
	font-size: 16px;
	line-height: 1.55;
}

.rewe-storno-titel {
	margin: 0 0 20px;
	font-size: 26px;
	line-height: 1.25;
}

.rewe-storno-uebersicht {
	margin: 28px 0;
	padding: 18px 20px;
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	background: #fafafa;
}

.rewe-storno-uebersicht p:first-child {
	margin-top: 0;
}

.rewe-storno-formular {
	margin-top: 28px;
}

.rewe-storno-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

.rewe-storno-label span {
	font-weight: 400;
	color: #777777;
}

.rewe-storno-grund {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #cccccc;
	border-radius: 8px;
	font: inherit;
	resize: vertical;
}

/* Rot, weil der Klick nicht zurueckzunehmen ist - der Kunde soll sehen, dass hier
   etwas endet, und nicht auf einen neutralen Weiter-Button klicken. */
.rewe-storno-button {
	display: inline-block;
	margin-top: 18px;
	padding: 12px 22px;
	border: 0;
	border-radius: 8px;
	background: #c62828;
	color: #ffffff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.rewe-storno-button:hover {
	background: #a71f1f;
}

.rewe-storno-abbruch {
	display: inline-block;
	margin: 18px 0 0 18px;
	color: #555555;
}

@media (max-width: 520px) {

	.rewe-storno-abbruch {
		display: block;
		margin-left: 0;
	}
}

/* ==== Anzeige des gewaehlten Zeitraums ====
   Absichtlich zurueckhaltend: Der Shortcode [rewe_zeitraum] liefert nur die Struktur,
   das Aussehen entsteht in Bricks. Hier steht nur, was ohne Gestaltung falsch aussehen
   wuerde - Abstaende und die Trennung von Beschriftung und Wert. */

.rewe-zeitraum {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}

.rewe-zeitraum-label {
	color: #777777;
}

.rewe-zeitraum-wert {
	font-weight: 600;
}

.rewe-zeitraum-tage::before {
	content: "(";
}

.rewe-zeitraum-tage::after {
	content: ")";
}

.rewe-zeitraum-tage {
	color: #777777;
}

/* ==== "neuen Zeitraum waehlen" - Rueckfrage ====
   Nur die zweite Stufe wird markiert. Das Aussehen des Buttons selbst entsteht in
   Bricks; hier steht ausschliesslich, was der Kunde sehen MUSS, damit die Rueckfrage
   nicht wie ein normaler Klick aussieht. */

.rewe-zeitraum-neu.is-confirming {
	outline: 2px solid #c62828;
	outline-offset: 3px;
}

/* ==== Aktionszeile der Mietartikel-Karte ====
   Stueckzahl und Warenkorb-Button in einer Zeile. Die order- und margin-Werte der
   beiden Elemente werden hier nur INNERHALB dieser Zeile neutralisiert - .qty-wrapper
   und .add-to-cart-btn werden auch von den Kaufartikel-Karten benutzt, deren Layout
   unveraendert bleiben soll. */

.artikel-aktionen {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 8px;
}

/* Stueckzahl und Button. Der Container ist es, der im Ausgebucht-Zustand
   verschwindet - siehe weiter unten. */
.artikel-bedienung {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.artikel-bedienung .qty-wrapper,
.artikel-bedienung .add-to-cart-btn {
	order: 0;
	margin-top: 0;
}

/* ==== Icons im Warenkorb ====
   Nur Struktur und Verhalten. Groesse, Farbe und Ausrichtung entstehen in Bricks bzw.
   in style.css - die Icons folgen ueber currentColor der Schriftfarbe, ein Farbwechsel
   am Text genuegt also. */

/* Groesse in em, damit die Icons jeder Schriftgroesse folgen. */
.rewe-warenkorb-titel-icon,
.rewe-warenkorb-titel-pfeil,
.rewe-warenkorb-aktion-icon {
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 auto;
}

/* Eigener Pfeil statt des Browser-Markers. */
.rewe-warenkorb-titel {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	list-style: none;
}

.rewe-warenkorb-titel::-webkit-details-marker {
	display: none;
}

.rewe-warenkorb-titel::marker {
	content: "";
}

/* Geschlossen zeigt der Pfeil nach unten, offen nach oben. */
.rewe-warenkorb-titel-pfeil {
	transition: transform 0.15s ease;
}

.rewe-warenkorb-toggle[open] .rewe-warenkorb-titel-pfeil {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {

	.rewe-warenkorb-titel-pfeil {
		transition: none;
	}
}

/* Icon und Text der Aktionen nebeneinander. */
.rewe-warenkorb-edit-toggle,
.rewe-warenkorb-reset {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* ==== Abholung oder Lieferung: zwei Auswahlkarten ====

   Aufbau des Markups (von JetFormBuilder, die Klassen mit "rewe-" kommen aus
   rewe-booking.js):

     fieldset.rewe-lieferart
       div.jet-form-builder__fields-group      <- das Raster der beiden Karten
         div.jet-form-builder__field-wrap
           label.rewe-lieferart-karte          <- die Karte
             svg.rewe-lieferart-icon
             input  (durchsichtig, liegt ueber der ganzen Karte)
             span.rewe-lieferart-text          <- Text, davor der runde Marker

   Zwei Eigenheiten von JetFormBuilder bestimmen den Aufbau:

   1. Das Eingabefeld ist auf opacity: 0 gestellt und liegt ueber der Karte. Der
      sichtbare Punkt ist in Wahrheit ein ::before am Span. Deshalb wird der Marker
      hier ueber den Span gesteuert und nicht ueber das Eingabefeld.
   2. JetFormBuilder schreibt die Einstellungen des Feldes als <style> in die Seite,
      also NACH dieser Datei. Bei gleicher Spezifitaet gewinnt dann JetFormBuilder.
      Die Regeln hier sind deshalb bewusst laenger, als sie aussehen muessten:
      "fieldset.rewe-lieferart ..." statt nur ".rewe-lieferart ...". */

/* Der Rahmen um die ganze Gruppe ist die Browser-Vorgabe fuer <fieldset>, nicht
   eingestellt - und mit den Karten doppelt gemoppelt. */
fieldset.rewe-lieferart {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

fieldset.rewe-lieferart .jet-form-builder__fields-group {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rewe-lieferart-abstand, 16px);
}

/* Der Kasten um die einzelne Karte. Bewusst nur das Noetigste: Dieselbe Stelle ist
   auch in deiner style.css gesetzt (align-items, justify-content, flex). Was dort
   steht, soll gelten - deshalb hier kein align-items. Die Karte fuellt den Kasten
   ueber ihre eigene Breite (siehe width: 100% unten) und nicht ueber den Kasten. */
fieldset.rewe-lieferart .jet-form-builder__field-wrap {
	display: flex;
	flex-direction: column;
}

fieldset.rewe-lieferart .rewe-lieferart-karte {
	/* Beide Karten gleich breit und gleich hoch, unabhaengig von der Textlaenge. */
	width: 100%;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: var(--rewe-lieferart-polster, 22px 16px);
	border: 1px solid var(--rewe-rahmen, #e3e5e8);
	border-radius: var(--rewe-radius, 12px);
	background: #fff;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

fieldset.rewe-lieferart .rewe-lieferart-karte:hover {
	border-color: var(--rewe-rot, #cc071e);
}

/* Gewaehlt: roter Rahmen, blasser roter Grund. Die Klasse setzt rewe-booking.js. */
fieldset.rewe-lieferart .rewe-lieferart-karte.is-gewaehlt {
	border-color: var(--rewe-rot, #cc071e);
	background: var(--rewe-rot-blass, #fdeef0);
}

/* Fokus ueber die Tastatur - das Eingabefeld selbst ist durchsichtig. */
fieldset.rewe-lieferart .rewe-lieferart-karte.is-fokus {
	border-color: var(--rewe-rot, #cc071e);
	box-shadow: 0 0 0 3px rgba(204, 7, 30, 0.2);
}

fieldset.rewe-lieferart .rewe-lieferart-icon {
	width: var(--rewe-lieferart-icon, 40px);
	height: var(--rewe-lieferart-icon, 40px);
	flex: 0 0 auto;
	color: var(--rewe-rot, #cc071e);
}

/* Text oben, Marker darunter: Der Marker ist das ::before des Spans und wandert
   ueber "order" hinter den Text. Der Text selbst ist ein blosser Textknoten und
   behaelt dabei order: 0. */
fieldset.rewe-lieferart .rewe-lieferart-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--rewe-text, #1d2327);
	font-weight: 700;
	line-height: 1.3;
}

fieldset.rewe-lieferart .rewe-lieferart-text::before {
	order: 2;
	margin: 0;
}

/* Gewaehlter Marker: roter Ring mit Punkt. Der innere weisse Ring entsteht ueber
   einen inneren Schatten, damit kein zusaetzliches Element noetig ist.
   Die Kette ist so lang, weil JetFormBuilder dieselbe Stelle mit seiner eigenen
   Farbe belegt (siehe Hinweis oben). */
fieldset.rewe-lieferart .jet-form-builder__field-wrap label.jet-form-builder__field-label input:checked + span::before {
	border-color: var(--rewe-rot, #cc071e);
	background-color: var(--rewe-rot, #cc071e);
	box-shadow: inset 0 0 0 3px #fff;
}

/* Nebeneinander wird zu untereinander, sobald es eng wird. */
@media (max-width: 520px) {

	fieldset.rewe-lieferart .jet-form-builder__fields-group {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {

	fieldset.rewe-lieferart .rewe-lieferart-karte {
		transition: none;
	}
}

/* Die Beschriftung vor den Lieferkosten wird ausgeblendet, wenn im Platzhalter statt
   eines Betrages ein Satz steht. Die Regel steht hier, weil hidden allein nichts
   ausrichtet, sobald dem Span in Bricks ein display zugewiesen wird. */
.rewe-lieferkosten-label[hidden] {
	display: none;
}

/* ==== Papierkorb im Warenkorb ====
   Groesse in em, damit das Icon der Schriftgroesse folgt. Farbe kommt ueber
   currentColor von .rewe-warenkorb-item-remove, der Hover-Wechsel dort wirkt also
   auch auf das Icon. */
.rewe-warenkorb-item-remove-icon {
	width: var(--rewe-warenkorb-trash, 1.15em);
	height: var(--rewe-warenkorb-trash, 1.15em);
	display: block;
}


/* ==== Lieferung nicht moeglich: Warnhinweis ====
   Derselbe Platzhalter wie fuer den Betrag, nur mit anderem Anstrich. Die Klasse
   setzt rewe-booking.js, sobald im Platzhalter ein Hinweis statt einer Zahl steht;
   die Beschriftung ("Lieferkosten") wird dabei ausgeblendet. */
.rewe-lieferkosten.is-meldung {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: var(--rewe-hinweis-polster, 10px 16px);
	border-radius: var(--rewe-radius, 12px);
	background: var(--rewe-rot, #cc071e);
	color: #fff;
	font-weight: 700;
	line-height: 1.3;
}

/* Ausrufezeichen im Kreis. Ueber ::before, damit das JavaScript nur Text setzt und
   kein Markup zusammenbauen muss. */
.rewe-lieferkosten.is-meldung::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	border: 2px solid currentColor;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

/* Meldung des Schrittwechsels in einer Formularzeile. Die allgemeine .rewe-meldung
   steht im Warenkorb und am Zeitraum; in einer Feldzeile soll sie schmaler wirken
   und direkt unter dem Feld sitzen. */
.jet-form-builder-row > .rewe-meldung {
	margin-top: 6px;
	font-size: 14px;
}

/* ==========================================================================
   Schritt 5: Bausteine der Uebersicht (inc/booking-uebersicht.php)

   Stellschrauben:
     --rewe-ue-bild      (60px)  Vorschaubild in der Artikelliste
     --rewe-ue-icon      (1.6em) Icon vor Kontakt / Rechnung / Lieferung
     --rewe-ue-menge     (7em)   Breite der Mengenspalte
   Farben und Radius aus den bestehenden --rewe-rot, --rewe-rahmen, --rewe-radius.
   ========================================================================== */

/* Waehrend des Ladens bleibt der alte Inhalt stehen, nur blasser - kein Springen. */
.rewe-uebersicht.is-laedt {
	opacity: .45;
	transition: opacity .2s;
}

.rewe-uebersicht.is-leer {
	display: none;
}

/* --- Kontakt, Rechnung, Lieferung/Abholung: Icon | Titel + Zeilen --- */
.rewe-ue-block {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 14px;
	align-items: start;
}

.rewe-ue-block-icon {
	display: inline-flex;
	color: var(--rewe-rot, #cc071e);
}

.rewe-ue-block-icon .rewe-icon {
	width: var(--rewe-ue-icon, 1.6em);
	height: var(--rewe-ue-icon, 1.6em);
}

.rewe-ue-block-titel {
	margin: 0 0 4px;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.3;
}

.rewe-ue-block-text {
	margin: 0;
	line-height: 1.6;
	overflow-wrap: anywhere; /* lange E-Mail-Adressen */
}

/* --- Artikelliste --- */
.rewe-ue-gruppe + .rewe-ue-gruppe {
	margin-top: 28px;
}

.rewe-ue-gruppe-titel {
	margin: 0 0 14px;
	font-size: 1.15em;
	font-weight: 700;
}

.rewe-ue-liste {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--rewe-rahmen, #e3e5e8);
	border-radius: var(--rewe-radius, 12px);
	overflow: hidden;
}

/* Bild | Name | Menge | Preis. Mengen- und Preisspalte fest, damit die Zahlen aller
   Zeilen untereinander stehen. */
.rewe-ue-zeile {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) var(--rewe-ue-menge, 7em) auto;
	align-items: center;
	column-gap: 20px;
	margin: 0;
	padding: 10px 16px 10px 10px;
}

.rewe-ue-liste.ohne-bild .rewe-ue-zeile {
	grid-template-columns: minmax(0, 1fr) var(--rewe-ue-menge, 7em) auto;
	padding-left: 16px;
}

.rewe-ue-zeile + .rewe-ue-zeile {
	border-top: 1px solid var(--rewe-rahmen, #e3e5e8);
}

.rewe-ue-bild {
	display: block;
	--rewe-warenkorb-bild: var(--rewe-ue-bild, 60px);
}

.rewe-ue-bild img {
	display: block;
}

.rewe-ue-name {
	font-weight: 700;
	font-size: 1.1em;
	overflow-wrap: anywhere;
}

.rewe-ue-menge {
	white-space: nowrap;
}

.rewe-ue-preis {
	white-space: nowrap;
	text-align: right;
}

.rewe-ue-leer {
	margin: 0;
}

/* Schmal: Bild links ueber zwei Zeilen, darunter Menge und Preis. */
@media (max-width: 560px) {
	.rewe-ue-zeile {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"bild name  name"
			"bild menge preis";
		row-gap: 2px;
	}

	.rewe-ue-liste.ohne-bild .rewe-ue-zeile {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name  name"
			"menge preis";
	}

	.rewe-ue-bild  { grid-area: bild; }
	.rewe-ue-name  { grid-area: name; }
	.rewe-ue-menge { grid-area: menge; }
	.rewe-ue-preis { grid-area: preis; }
}

/* --- Summen --- */
.rewe-ue-summen {
	margin: 0;
}

.rewe-ue-summe {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 0;
}

.rewe-ue-summe dt,
.rewe-ue-summe dd {
	margin: 0;
	font-weight: inherit;
}

.rewe-ue-summe dd {
	white-space: nowrap;
	text-align: right;
}

/* Trennlinie vor der Gesamtsumme. */
.rewe-ue-summe--gesamt {
	margin-top: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--rewe-rahmen, #e3e5e8);
	font-weight: 700;
	color: var(--rewe-rot, #cc071e);
}

.rewe-ue-summe--kaution {
	color: var(--rewe-rot, #cc071e);
}

/* --- Kaution einzeln ([rewe_kaution]) --- */
.rewe-kaution {
	white-space: nowrap;
}

/* Nur bei Mietartikeln sichtbar - z. B. die Kautions-Karte in Step 5. In Bricks die
   Klasse "rewe-nur-miete" an das Element haengen.

   Standard ist AUSGEBLENDET, bis die Uebersicht geladen ist und rewe-booking.js am body
   "rewe-hat-mietartikel" setzt. Andersherum wuerde die Karte bei reinen Kaufartikeln
   kurz aufblitzen. Nur im Frontend (body.bricks-is-frontend) - im Bricks-Builder
   bleibt das Element sichtbar und bearbeitbar. */
body.bricks-is-frontend:not(.rewe-hat-mietartikel) .rewe-nur-miete {
	display: none !important;
}

/* Icons aus der Optionsseite (inline SVG) - gleiche Groesse wie die eingebauten.
   Die Farbe kommt ueber currentColor aus .rewe-ue-block-icon (--rewe-rot). */
.rewe-ue-block-icon svg.rewe-icon,
.rewe-ue-block-icon img.rewe-icon-bild {
	display: block;
	width: var(--rewe-ue-icon, 1.6em);
	height: var(--rewe-ue-icon, 1.6em);
	object-fit: contain;
}

/* Mietzeitraum: Beschriftung und Datum. Die Beschriftung bekommt eine Mindestbreite,
   damit die Daten beider Zeilen untereinander stehen wie im Entwurf. */
.rewe-ue-zeitraum-label {
	display: inline-block;
	min-width: var(--rewe-ue-zeitraum-label, 5.2em);
}

/* Kautions-Karte ([rewe_kaution]): Icon und Titel in einer Zeile, darunter der Text
   ueber die volle Breite, der Betrag als eigene, hervorgehobene Zeile. */
.rewe-ue-kaution-kopf {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

.rewe-ue-kaution-kopf .rewe-ue-block-icon {
	color: var(--rewe-ue-kaution-icon-farbe, currentColor);
}

.rewe-ue-kaution-kopf .rewe-ue-block-titel {
	margin: 0;
}

.rewe-ue-kaution-text {
	margin: 0;
	line-height: 1.7;
}

.rewe-ue-kaution-text .rewe-kaution {
	display: block;
	margin: 2px 0;
	font-size: var(--rewe-ue-kaution-groesse, 1.4em);
	font-weight: 700;
	line-height: 1.3;
	color: var(--rewe-rot, #cc071e);
}

/* ==========================================================================
   Pfeile in den Schritt-Buttons

   Ueber CSS statt SVG im Button: Das Label des JetFormBuilder-Absendebuttons wird
   als Text ausgegeben, SVG-Code landet dort als sichtbarer Text oder wird entfernt.
   Ein Pseudo-Element funktioniert an JEDEM Button, egal wie er entstanden ist.

   - Zurueck: Pfeil VOR dem Wort (::before, gespiegelt)
   - Weiter und Absenden: Pfeil HINTER dem Wort (::after)
   - Buttons, die schon ein eigenes SVG enthalten (Step 1, "Weiter zum Zubehoer",
     "Neuen Zeitraum waehlen"), bekommen keinen zweiten Pfeil - :has(svg).
   - Farbe: background-color: currentColor + mask. Der Pfeil folgt damit der
     Schriftfarbe, auch beim Hover (weiss -> rot).

   Stellschrauben:
     --rewe-pfeil         das Icon als SVG-Data-URL (nach rechts zeigend)
     --rewe-pfeil-groesse Breite/Hoehe (1.1em)
     --rewe-pfeil-abstand Abstand zum Text (.5em)

   Nicht fuer den Pfeil gewuenscht? Klasse "ohne-pfeil" an den Button.
   ========================================================================== */
:root {
	--rewe-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M14 6l6 6-6 6'/%3E%3C/svg%3E");
}

.rewe-step :is(.rewe-step-prev, .rewe-step-next, .jet-form-builder__submit):not(:has(svg)):not(.ohne-pfeil) {
	display: inline-flex;
	align-items: center;
	gap: var(--rewe-pfeil-abstand, .5em);
}

.rewe-step :is(.rewe-step-next, .jet-form-builder__submit):not(:has(svg)):not(.ohne-pfeil)::after,
.rewe-step .rewe-step-prev:not(:has(svg)):not(.ohne-pfeil)::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: var(--rewe-pfeil-groesse, 1.1em);
	height: var(--rewe-pfeil-groesse, 1.1em);
	background-color: currentColor;
	-webkit-mask: var(--rewe-pfeil) center / contain no-repeat;
	mask: var(--rewe-pfeil) center / contain no-repeat;
}

/* Zurueck zeigt nach links: derselbe Pfeil, gespiegelt. */
.rewe-step .rewe-step-prev:not(:has(svg)):not(.ohne-pfeil)::before {
	transform: scaleX(-1);
}

/* Kleiner Schub in Pfeilrichtung beim Hover. */
@media (prefers-reduced-motion: no-preference) {
	.rewe-step :is(.rewe-step-next, .jet-form-builder__submit):not(:has(svg))::after,
	.rewe-step .rewe-step-prev:not(:has(svg))::before {
		transition: translate .15s ease;
	}

	.rewe-step :is(.rewe-step-next, .jet-form-builder__submit):not(:has(svg)):hover::after {
		translate: 3px 0;
	}

	.rewe-step .rewe-step-prev:not(:has(svg)):hover::before {
		translate: -3px 0;
	}
}

/* ==========================================================================
   Bricks-Inhalte nur in einem bestimmten Schritt zeigen

   Klasse "rewe-nur-step-1" (bis -5) an ein Bricks-Element ausserhalb des Formulars.
   rewe-booking.js setzt am body "rewe-step-aktiv-N"; in allen anderen Schritten ist
   das Element ausgeblendet. Mehrere Klassen gehen: "rewe-nur-step-1 rewe-nur-step-2"
   zeigt es in Step 1 UND 2.

   Step 1 ist bewusst sichtbar, solange das Skript noch nicht gelaufen ist - sonst
   fehlte der Inhalt beim Seitenaufbau kurz. Die anderen sind bis dahin aus.
   Im Bricks-Builder (kein .bricks-is-frontend) bleibt alles sichtbar.
   ========================================================================== */
/* Aktiver Schritt N: alles ausblenden, was an Schritte gebunden ist, aber NICHT an N.
   So funktionieren auch Elemente mit mehreren Klassen, ohne das display von Bricks
   (flex/grid) je anfassen zu muessen. Erste Zeile: Stand vor dem Skript = Step 1. */
body.bricks-is-frontend:not([class*="rewe-step-aktiv-"]) [class*="rewe-nur-step-"]:not(.rewe-nur-step-1),
body.bricks-is-frontend.rewe-step-aktiv-1 [class*="rewe-nur-step-"]:not(.rewe-nur-step-1),
body.bricks-is-frontend.rewe-step-aktiv-2 [class*="rewe-nur-step-"]:not(.rewe-nur-step-2),
body.bricks-is-frontend.rewe-step-aktiv-3 [class*="rewe-nur-step-"]:not(.rewe-nur-step-3),
body.bricks-is-frontend.rewe-step-aktiv-4 [class*="rewe-nur-step-"]:not(.rewe-nur-step-4),
body.bricks-is-frontend.rewe-step-aktiv-5 [class*="rewe-nur-step-"]:not(.rewe-nur-step-5) {
	display: none !important;
}


/* Telefonfeld (Step 4): kein Platzhalter.
   Das internationale Telefonfeld kommt aus einem Plugin, dessen Bibliothek eine
   Beispielnummer des gewaehlten Landes als Platzhalter einsetzt - bei jedem
   Laenderwechsel neu. rewe-booking.js entfernt das Attribut; diese Regel ist der
   Rueckhalt, falls das Skript zu frueh oder gar nicht laeuft.
   !important, weil JetFormBuilder seine Feldstile als <style> NACH dieser Datei in
   die Seite schreibt und bei gleicher Spezifitaet gewinnen wuerde.
   opacity zusaetzlich, weil Firefox Platzhalter mit eigener Deckkraft zeichnet. */
.jet-form-builder input[type="tel"]::placeholder,
.jet-form-builder input[name^="telefonnummer"]::placeholder,
.iti input::placeholder {
	color: transparent !important;
	opacity: 0 !important;
}


/* Kaufartikel ausverkauft: dieselbe Klasse wie bei den Mietartikeln (is-ausgebucht).
   Stueckzahl und Button verschwinden, der Hinweis "leider ausverkauft" nimmt ihren
   Platz ein. Farbe und Gestaltung der Karte: style.css / Bricks. */
.rewe-kauf-karte.is-ausgebucht .qty-wrapper,
.rewe-kauf-karte.is-ausgebucht .add-to-cart-btn {
	display: none;
}

.rewe-kauf-karte.is-ausgebucht .artikel-nicht-verfuegbar {
	display: flex;
}