/* Bestellformular – ergänzt die Formulargestaltung des Themes (.formular, .feld, .ganz, .wahl, .hinweis)
   um Bücherliste, Übersicht, Fehler- und Dankesanzeige. Farben aus dem Theme, mit Ersatzwerten. */
.bestellformular fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.bestellformular legend { padding: 0; }
.bestellformular legend h3 { margin: 24px 0 10px; }
.bestellformular .sb-buecher legend h3 { margin-top: 0; }

.sb-posten { display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linie, #e0dede); }
.sb-posten label { display: grid; gap: 2px; }
.sb-titel { font-family: var(--schrift-titel, "Roboto Condensed", Arial, sans-serif); font-size: 18px; line-height: 1.3; }
.sb-preis, .sb-klein { font-size: 13px; color: var(--leise, #5f5f5f); }
.bestellformular .sb-posten input[type=number] { width: 70px; }

.sb-weitere > summary { cursor: pointer; padding: 10px 0; border-top: 1px solid var(--linie, #e0dede); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.sb-weitere > summary:hover { color: var(--lila, #cbbcdb); }
.sb-weitere[open] > summary { margin-bottom: 0; }

.sb-summe { background: var(--feld, #f4f4f4); padding: 16px 20px; margin-top: 14px; }
.sb-summe h3 { margin: 0 0 6px; }
.sb-summe-tabelle { width: 100%; border-collapse: collapse; }
.sb-summe-tabelle td { padding: 7px 0; border-top: 1px solid var(--linie, #e0dede); vertical-align: top; }
.sb-summe-tabelle td:last-child { text-align: right; white-space: nowrap; padding-left: 16px; }
.sb-summe-tabelle .sb-gesamt td { border-top: 2px solid var(--schwarz, #000); font-family: var(--schrift-titel, "Roboto Condensed", Arial, sans-serif); font-size: 18px; }
.sb-summe .hinweis, .sb-danke .hinweis { margin: 6px 0 0; }

/* Der Knopf trägt den gesetzlich verlangten Text „Zahlungspflichtig bestellen“. In 15 px füllte er auf
   320-px-Handys den Knopf bis an den Rand (205 von 205 px) und endete dort je nach Browser mit „…“.
   14 px = 191 px Text: passt überall ganz hinein (Christoph, 13.10.2026). */
.bestellformular .sb-absenden { font-size: 14px; }
.bestellformular .sb-absenden:disabled { opacity: .6; cursor: wait; }

.sb-fehler { border-left: 3px solid #b00020; background: #fbe9e9; padding: 12px 16px; }
.sb-fehler p { margin: 0 0 6px; }
.sb-fehler ul { margin: 0; padding-left: 18px; }
.sb-fehler:focus { outline: none; }
.sb-feldfehler { display: block; color: #b00020; font-size: 13px; }
.bestellformular [aria-invalid="true"] { box-shadow: inset 0 0 0 2px #b00020; }

.sb-danke { background: var(--feld, #f4f4f4); padding: 20px 24px; }
.sb-danke:focus { outline: none; }
.sb-danke h3 { margin: 0 0 10px; }
.sb-danke p { margin: 0 0 12px; }
.sb-danke .sb-nr { font-family: var(--schrift-titel, "Roboto Condensed", Arial, sans-serif); font-size: 20px; font-weight: 400; }

/* Versandart, die fürs Gewicht nicht reicht */
.bestellformular .sb-nicht-moeglich { color: var(--leise, #5f5f5f); }
.sb-summe-tabelle .sb-versandhinweis td { border-top: 0; padding-top: 0; font-size: 12px; color: var(--leise, #5f5f5f); }

/* Zahlung, Lieferung, Widerrufsrecht – aufklappbar über dem Knopf */
.sb-info { font-size: 13px; line-height: 1.5; }
.sb-info > summary { cursor: pointer; padding: 10px 0; border-top: 1px solid var(--linie, #e0dede); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.sb-info > summary:hover { color: var(--lila, #cbbcdb); }
.sb-info p { margin: 0 0 10px; color: var(--leise, #5f5f5f); }
.sb-info[open] { padding-bottom: 6px; border-bottom: 1px solid var(--linie, #e0dede); }

/* Widerruf: „Angaben ändern“ als schlichter Link unter dem Knopf */
.sb-widerruf .sb-zurueck { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; color: inherit; }
.sb-widerruf .sb-zurueck:hover { color: var(--lila, #cbbcdb); }
.sb-widerruf .sb-absenden-zeile p { margin: 10px 0 0; }

/* Newsletter abonnieren – Kästchen unter der Nachricht. Zwei Spalten, damit der Hinweis genau unter der
   Beschriftung steht, gleich welchen Rand der Browser dem Kästchen gibt. */
.sb-newsletter { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 4px; align-items: start; margin-top: 6px; }
.formular .sb-newsletter input[type=checkbox] { margin: 3px 0 0; }
.sb-newsletter label { font-size: 15px; cursor: pointer; }
.sb-newsletter .hinweis { grid-column: 2; }