/* =============================================================================================================
   Kasse: Online-Kauf (Kaufen & abholen / liefern), Bestellseite, Widerruf, Hervorhebungen, Konto-Bereiche.
   Ergänzt das Design-System (ebd.css); nur Klassen mit Präfix ebd-kasse.
   ============================================================================================================= */

/* Zwei Spalten: Inhalt links, Übersicht rechts; auf dem Handy steht die Übersicht oben */
.ebd-kasse { display: grid; gap: var(--ebd-a5); align-items: start; padding-bottom: var(--ebd-a6); }
@media (min-width: 1000px) {
	.ebd-kasse { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--ebd-a6); }
	.ebd-kasse__haupt { grid-column: 1; grid-row: 1; }
	.ebd-kasse__neben { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--ebd-kopfhoehe) + 16px); }
}
.ebd-kasse-schritte { max-width: 640px; }
.ebd-kasse-titel { font-size: var(--ebd-fs-l); font-weight: 900; margin: 0 0 var(--ebd-a3); display: flex; align-items: center; gap: 8px; }
.ebd-kasse-titel .ebd-icon { width: 20px; height: 20px; }
legend.ebd-kasse-titel { padding: 0; }
.ebd-kasse-legende { display: block; font-size: var(--ebd-fs-l); font-weight: 900; color: var(--ebd-schwarz); margin-bottom: 4px; }

/* Übersicht (Seitenleiste) */
.ebd-kasse-uebersicht { display: grid; gap: var(--ebd-a3); padding: var(--ebd-a4); }
.ebd-kasse-uebersicht__rad { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--ebd-a3); align-items: center; }
.ebd-kasse-uebersicht__rad .ebd-bild { border-radius: var(--ebd-r); }
@media (min-width: 1000px) {
	.ebd-kasse-uebersicht__rad { grid-template-columns: 1fr; }
	.ebd-kasse-uebersicht__rad .ebd-bild { aspect-ratio: 16 / 10; }
}
.ebd-kasse-uebersicht__weg { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: var(--ebd-fs-xs); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--ebd-gruen-text); }
.ebd-kasse-uebersicht__weg .ebd-icon { width: 15px; height: 15px; }
.ebd-kasse-uebersicht__titel { font-size: var(--ebd-fs-l); font-weight: 900; line-height: 1.25; margin: 0 0 2px; color: var(--ebd-schwarz); }
.ebd-kasse-uebersicht__haendler { display: flex; gap: 10px; align-items: flex-start; padding-top: var(--ebd-a3); border-top: 1px solid var(--ebd-linie); }
.ebd-kasse-uebersicht__haendler > .ebd-icon { margin-top: 2px; color: var(--ebd-grau); }

/* Summen (Preis, Versand, Gesamt) */
.ebd-kasse-summen { margin: 0; display: grid; gap: 0; font-size: var(--ebd-fs-s); }
.ebd-kasse-summen > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ebd-a3); padding: 8px 0; border-bottom: 1px solid var(--ebd-linie); }
.ebd-kasse-summen dt { margin: 0; color: var(--ebd-text-2); min-width: 0; }
.ebd-kasse-summen dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.ebd-kasse-summen > .ebd-kasse-summen__gesamt { border-bottom: 0; border-top: 2px solid var(--ebd-schwarz); margin-top: -1px; padding-top: 10px; }
.ebd-kasse-summen__gesamt dt { color: var(--ebd-schwarz); font-weight: 900; }
.ebd-kasse-summen__gesamt dd { font-size: var(--ebd-fs-xl); font-weight: 900; color: var(--ebd-schwarz); }

/* Formular Schritt 1 */
.ebd-kasse-formular { gap: var(--ebd-a5); }
.ebd-kasse-formular .ebd-gruppe { gap: var(--ebd-a3); }
.ebd-kasse-lieferadresse { display: grid; gap: var(--ebd-a3); padding: var(--ebd-a4); border-radius: var(--ebd-r); background: var(--ebd-flaeche); }
.ebd-kasse-lieferadresse[hidden] { display: none; }
.ebd-kasse-weiter { display: grid; gap: var(--ebd-a2); justify-items: start; }
@media (max-width: 599px) { .ebd-kasse-weiter .ebd-btn { width: 100%; } }

/* Abschluss mit Gesamtpreis und Knopf (direkt über dem Knopf, § 312j BGB) */
.ebd-kasse-abschluss { display: grid; gap: var(--ebd-a4); padding: var(--ebd-a5); border: 2px solid var(--ebd-schwarz); border-radius: var(--ebd-r-l); background: #fff; scroll-margin-top: calc(var(--ebd-kopfhoehe) + 16px); }
.ebd-kasse-abschluss .ebd-kasse-titel { margin: 0; }
.ebd-kasse-abschluss .ebd-btn--block { white-space: normal; }
.ebd-kasse-abschluss .ebd-tabelle-daten th { width: 36%; }

/* Widerrufsbelehrung */
.ebd-kasse-belehrung { font-size: var(--ebd-fs-s); line-height: 1.6; }
.ebd-kasse-belehrung h3 { font-size: var(--ebd-fs-m); margin: var(--ebd-a4) 0 var(--ebd-a2); }
.ebd-kasse-belehrung h3:first-child { margin-top: 0; }
.ebd-kasse-belehrung__muster { padding: var(--ebd-a3); border-left: 4px solid var(--ebd-gruen); background: var(--ebd-flaeche); border-radius: 0 var(--ebd-r) var(--ebd-r) 0; }

/* Testzahlung */
.ebd-kasse-test { display: grid; gap: var(--ebd-a3); border: 2px dashed #f1dca2; background: #fffdf5; }
.ebd-kasse-test .ebd-kasse-titel { margin: 0; }
.ebd-kasse-test__knoepfe { margin-top: var(--ebd-a2); }
@media (max-width: 599px) { .ebd-kasse-test__knoepfe .ebd-btn { width: 100%; } }

/* Kleinteile */
.ebd-kasse-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; background: var(--ebd-flaeche); padding: 2px 6px; border-radius: 4px; word-break: break-all; }
.ebd-kasse-liste { margin: 0; padding-left: 1.3em; display: grid; gap: var(--ebd-a2); }
.ebd-kasse-liste li { padding-left: 2px; }
.ebd-kasse-aktion form + p, .ebd-kasse-aktion p + form { margin-top: var(--ebd-a2); }
.ebd-kasse-teilbetrag { display: grid; gap: var(--ebd-a3); padding: var(--ebd-a3); border-radius: var(--ebd-r); background: var(--ebd-flaeche); }
.ebd-kasse-teilbetrag[hidden] { display: none; }
.ebd-kasse-tabelle td { vertical-align: top; }
.ebd-kasse-tabelle .ebd-icon { width: 14px; height: 14px; }
/* Tabellen auf schmalen Bildschirmen als Karten; die role-Attribute im Markup erhalten die Tabellensemantik */
@media (max-width: 699px) {
	.ebd-kasse-tabelle thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
	.ebd-kasse-tabelle, .ebd-kasse-tabelle tbody, .ebd-kasse-tabelle tr, .ebd-kasse-tabelle td { display: block; width: 100%; }
	.ebd-kasse-tabelle tr { padding: 12px 14px; border-bottom: 1px solid var(--ebd-linie); }
	.ebd-kasse-tabelle tbody tr:last-child { border-bottom: 0; }
	.ebd-kasse-tabelle td { padding: 2px 0; border: 0; text-align: left !important; white-space: normal; }
	.ebd-kasse-tabelle td[data-titel]::before { content: attr(data-titel) ": "; color: var(--ebd-grau); font-size: var(--ebd-fs-xs); font-weight: 700; }
	.ebd-kasse-tabelle td:empty { display: none; }
	.ebd-kasse-tabelle td .ebd-btn { margin-top: 8px; }
	.ebd-tabelle-huelle:has(> .ebd-kasse-tabelle) { overflow: visible; }
}
.ebd-kasse-status p { margin-top: var(--ebd-a3); }

/* Bestellungen im Kundenkonto */
.ebd-kasse-kundenkarte__titel { font-size: var(--ebd-fs-m); font-weight: 900; margin: 0 0 2px; }
.ebd-kasse-kundenkarte__titel a { color: var(--ebd-schwarz); text-decoration: none; }
.ebd-kasse-kundenkarte__titel a:hover { text-decoration: underline; }
.ebd-kasse-kundenkarte__status { text-align: right; }
@media (max-width: 599px) { .ebd-kasse-kundenkarte__status { text-align: left; } }

/* Hervorhebungen */
.ebd-kasse-inserat { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--ebd-a4); align-items: center; padding: var(--ebd-a4); }
@media (min-width: 600px) { .ebd-kasse-inserat { grid-template-columns: 180px minmax(0, 1fr); } }
.ebd-kasse-inserat__bild { border-radius: var(--ebd-r); }
.ebd-kasse-wahl { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--ebd-a3); }
.ebd-kasse-wahl .ebd-wahl__karte { align-content: start; gap: 6px; padding: var(--ebd-a4); }
.ebd-kasse-wahl .ebd-wahl__titel { display: inline-flex; align-items: center; gap: 8px; }
.ebd-kasse-wahl .ebd-wahl__titel .ebd-icon { width: 20px; height: 20px; color: var(--ebd-gruen-text); }
.ebd-kasse-wahl .ebd-wahl__text { font-size: var(--ebd-fs-s); color: var(--ebd-text-2); }
.ebd-kasse-wahl .ebd-badge { justify-self: start; }
.ebd-kasse-wahl__preis { font-size: var(--ebd-fs-xl); font-weight: 900; color: var(--ebd-schwarz); line-height: 1.1; }

@media print {
	.ebd-kasse__neben { position: static; }
	.ebd-kasse-abschluss form, .ebd-akkordeon summary::after { display: none !important; }
}