/* Öffentliche Kundenseiten (Kasse, Widerruf, Gewährleistung): gestaltet nach dem Umschlag des Buchs, große Bedienelemente, kein Skript. */

/* Libre Baskerville, die Schrift des Buchs, vom eigenen Server (SIL Open Font License 1.1, /schrift/OFL.txt). */
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 400; font-display: swap; src: url("../schrift/libre-baskerville-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap; src: url("../schrift/libre-baskerville-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap; src: url("../schrift/libre-baskerville-latin-700-normal.woff2") format("woff2"); }

/* Alle Farben an einer Stelle, abgeleitet vom Umschlag: Bordeaux des Etiketts „DDR 2.0“ (auch die Kopfzeile),
   Gold der Autorenzeile, das dunkle Braun des Titels und das Creme des Werkdruckpapiers. */
:root {
    --wein: #6b1d2a;
    --wein-dunkel: #4a131c;
    --banner: #651b29;
    --gold: #c9a45c;
    --gold-hell: #ebc56e;
    --gold-tief: #8f6d2f;
    --tinte: #2d2924;
    --leise: #5c5145;
    --papier: #fffcf6;
    --creme: #f7f0e2;
    --grund: #ebe1cf;
    --linie: #ddcfb5;
    --fehler: #8a1c1c;
    --fehler-grund: #fdeceb;
    --ok-text: #1f4d24;
    --ok-grund: #eef6ee;
    --hinweis-text: #5b3a07;
    --hinweis-grund: #fdf6e6;
    --fokus: #b45309;
    --schrift-titel: "Libre Baskerville", Georgia, "Times New Roman", serif;
    --schrift-text: system-ui, -apple-system, "Segoe UI", sans-serif;
    --seite: 860px;
}
.breit { --seite: 1140px; }

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0 12px;
    background: var(--grund);
    color: var(--tinte);
    font: 18px/1.6 var(--schrift-text);
}

a { color: var(--wein); text-underline-offset: 3px; }
a:hover { color: var(--wein-dunkel); }
img { max-width: 100%; height: auto; }
picture { display: block; }

h1, h2, h3 { font-family: var(--schrift-titel); font-weight: 400; line-height: 1.25; color: var(--wein); }
h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 4px 0 16px; }
h2 { font-size: 1.35rem; margin: 32px 0 12px; }
h3 { font-size: 1.15rem; margin: 16px 0 8px; }

.unsichtbar { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Kopf: Bordeaux wie das Etikett auf dem Umschlag, Buchtitel in der Schrift des Buchs. */
.seitenkopf {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "marke menue" "unter menue";
    align-items: center;
    column-gap: 24px;
    max-width: var(--seite);
    margin: 18px auto 0;
    padding: 14px clamp(16px, 4vw, 40px) 14px;
    background: var(--banner);
    color: #fff8ee;
    border-bottom: 3px solid var(--gold);
    border-radius: 4px 4px 0 0;
}
.seitenkopf .marke { grid-area: marke; display: inline-flex; flex-direction: column; justify-content: center; min-height: 48px; color: #fff8ee; text-decoration: none; }
.seitenkopf .marke:hover { color: #ffffff; }
.marke-reihe { color: var(--gold-hell); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; }
.marke-titel { font-family: var(--schrift-titel); font-size: 1.25rem; line-height: 1.3; }
.seitenkopf .unterzeile { grid-area: unter; display: block; color: #eaded8; font-size: 0.9rem; }

.karte {
    max-width: var(--seite);
    margin: 0 auto;
    padding: 24px clamp(16px, 4vw, 40px) 36px;
    background: var(--papier);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 8px 28px #3e222014;
}

.knopf-gross {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 12px 28px;
    border: 2px solid var(--wein);
    border-radius: 4px;
    background: var(--wein);
    color: #ffffff;
    font: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.knopf-gross:hover { background: var(--wein-dunkel); border-color: var(--wein-dunkel); color: #ffffff; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.knopfzeile { margin: 20px 0; }

.feld { display: flex; flex-direction: column; gap: 6px; max-width: 560px; margin: 0 0 20px; }
.feld label { font-weight: 700; }
.feld input {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 2px solid #8c7f72;
    border-radius: 4px;
    background: #ffffff;
    color: var(--tinte);
    font: inherit;
}
.feld input[aria-invalid="true"] { border-color: var(--fehler); }
.hinweis { margin: 0; color: var(--leise); font-size: 0.95rem; }
.feldfehler { margin: 0; color: var(--fehler); font-weight: 700; }

.fehlerkasten { margin: 0 0 20px; padding: 12px 18px; border: 2px solid var(--fehler); border-radius: 4px; background: var(--fehler-grund); }
.fehlerkasten h2 { margin-top: 4px; color: var(--fehler); font-size: 1.2rem; }
.fehlerkasten li a { display: inline-flex; align-items: center; min-height: 48px; }
.erfolg { padding: 12px 18px; border: 2px solid #4c8a52; border-radius: 4px; background: var(--ok-grund); color: var(--ok-text); font-weight: 700; }
.erklaerung { padding: 8px 14px; border-left: 4px solid var(--gold); background: #ffffff; }

.angaben { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.angaben dt { font-weight: 700; }
.angaben dd { margin: 0; overflow-wrap: anywhere; }

.mitteilung { margin: 16px 0; }
.mitteilung img { display: block; width: 100%; max-width: 640px; height: auto; border: 1px solid var(--linie); }
.mitteilung figcaption { margin-top: 8px; color: var(--leise); font-size: 0.9rem; overflow-wrap: anywhere; }
.textfassung { padding: 4px 20px 8px; border: 1px solid var(--linie); border-radius: 4px; background: #ffffff; }

/* Fuß: ruhig wie ein Impressum im Buch, alle Pflichtlinks in einer Reihe. */
.seitenfuss { max-width: var(--seite); margin: 0 auto 32px; padding: 24px 16px 16px; text-align: center; color: var(--leise); font-size: 0.95rem; }
.seitenfuss::before { content: ""; display: block; width: 96px; margin: 0 auto 12px; border-top: 1px solid var(--gold-tief); }
.seitenfuss nav { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 4px; }
.seitenfuss nav a, .seitenfuss nav span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; }
.seitenfuss nav span { color: var(--tinte); font-weight: 700; }
.seitenfuss p { margin: 4px 0; }
.seitenfuss p a { display: inline-flex; align-items: center; min-height: 48px; }
.seitenfuss p > span { white-space: nowrap; }
.seitenfuss .trenner { padding: 0 6px; }

@media (max-width: 520px) {
    body { padding: 0 8px; }
    .seitenkopf { margin-top: 8px; padding: 12px 16px; }
    .angaben { grid-template-columns: 1fr; gap: 2px; }
    .angaben dd { margin-bottom: 10px; }
    .knopf-gross { width: 100%; }
}

/* Kasse: Menü, Prämien, Warenkorb, Formular und Übersicht. */
.shopmenue { grid-area: menue; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.shopmenue a, .shopmenue span { display: inline-flex; align-items: center; min-height: 48px; color: #fff8ee; font-weight: 700; }
.shopmenue a:hover { color: var(--gold-hell); }
.shopmenue span { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; }
.testbetrieb { margin: 0 0 14px; padding: 6px 12px; border: 1px dashed var(--gold-tief); border-radius: 4px; background: var(--hinweis-grund); color: var(--hinweis-text); font-size: 0.85rem; }
.produkte, .korb { list-style: none; margin: 0; padding: 0; }
.produkt, .korb > li { margin: 0 0 18px; padding: 16px 20px; border: 1px solid var(--linie); border-radius: 4px; background: #ffffff; }
.produkt h2, .korb h2 { margin-top: 0; }
.preis { margin: 8px 0; font-size: 1.3rem; font-weight: 700; color: var(--wein); }
.preis .hinweis { display: block; font-size: 0.95rem; font-weight: 400; }
.ausverkauft { color: var(--fehler); font-weight: 700; }
.angabe { margin: 2px 0; color: var(--leise); overflow-wrap: anywhere; }
.summe { font-size: 1.25rem; font-weight: 700; }
.summe .hinweis { display: block; font-weight: 400; }
.knopf {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 18px;
    border: 2px solid var(--wein); border-radius: 4px; background: #ffffff; color: var(--wein); font: inherit; font-weight: 700; cursor: pointer;
}
.knopf:hover { background: var(--creme); }
.knopf-leise { border-color: #8c7f72; color: var(--tinte); }
.mengenzeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 8px 0; }
.mengenzeile .feld { margin: 0; }
.feld-kurz { max-width: 200px; }
.feld textarea, .feld select {
    width: 100%; min-height: 48px; padding: 10px 12px; border: 2px solid #8c7f72; border-radius: 4px; background: #ffffff; color: var(--tinte); font: inherit;
}
.feld textarea[aria-invalid="true"], .feld select[aria-invalid="true"] { border-color: var(--fehler); }
.feld-haken { flex-direction: row; align-items: center; gap: 12px; margin: 0 0 8px; }
.feld-haken input { width: 28px; height: 28px; min-height: 28px; margin: 0; flex: none; accent-color: var(--wein); }
.feld-haken label { display: inline-flex; align-items: center; min-height: 48px; }
.feld-haken input:disabled + label { color: var(--leise); font-weight: 400; }
.feld-einzug { margin-left: 40px; }
select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.zahlarten { margin: 0 0 20px; padding: 8px 16px 12px; border: 1px solid var(--linie); border-radius: 4px; background: #ffffff; }
.zahlarten legend { padding: 0 6px; font-weight: 700; }
.rechnungsadresse { margin: 0 0 20px; }
.rechnungsadresse summary { display: flex; align-items: center; min-height: 48px; color: var(--wein); font-weight: 700; cursor: pointer; }
.liste { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
.liste caption { text-align: left; font-family: var(--schrift-titel); color: var(--wein); padding-bottom: 8px; }
.liste th { font-size: 0.95rem; color: var(--leise); font-weight: 700; }
.liste th, .liste td { padding: 10px 8px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.liste td:last-child, .liste th:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.liste .gesamt td { font-size: 1.15rem; font-weight: 700; color: var(--wein); border-top: 2px solid var(--wein); border-bottom: 3px double var(--wein); }
.knopfzeile-zwei { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.kurzliste { margin: 0 0 8px; }
.rechtstext { white-space: pre-line; overflow-wrap: anywhere; max-width: 72ch; margin: 0 0 24px; padding: 16px 0 0; border-top: 1px solid var(--linie); }

/* Schrittanzeige (nur Anzeige, keine Links). */
.schritte { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 20px; padding: 0 0 12px; list-style: none; border-bottom: 1px solid var(--linie); color: var(--leise); font-size: 0.95rem; }
.schritte li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; }
.schritt-nr { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--leise); border-radius: 50%; font-size: 0.85rem; }
.schritte .erledigt .schritt-nr { border-color: var(--gold-tief); background: var(--creme); }
.schritte [aria-current="step"] { color: var(--wein); font-weight: 700; }
.schritte [aria-current="step"] .schritt-nr { border-color: var(--wein); background: var(--wein); color: #ffffff; }

/* Übersicht /buch: Einstieg mit Umschlag, darunter die Prämien als Karten. */
.zier { display: flex; align-items: center; gap: 18px; margin: 44px 0 20px; text-align: center; }
.zier::before, .zier::after { content: ""; flex: 1; border-top: 1px solid var(--gold-tief); }
.auftakt { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 48px; align-items: center; margin: 12px 0 8px; }
.auftakt-bild img { display: block; width: 100%; box-shadow: 0 16px 32px #3b221833, 0 2px 6px #3b221826; }
.auftakt h1 { margin: 0 0 18px; color: var(--tinte); }
.auftakt h1 .reihe { display: inline-block; margin-bottom: 14px; padding: 3px 14px; background: var(--banner); color: var(--gold-hell); font-size: 1rem; letter-spacing: 0.12em; }
.auftakt h1 .titel { display: block; font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.15; }
.autor { margin: 0 0 18px; font-family: var(--schrift-titel); font-style: italic; font-size: 1.3rem; color: var(--wein); }
.ausstattung { margin: 0 0 8px; padding-top: 14px; border-top: 1px solid var(--linie); color: var(--leise); letter-spacing: 0.02em; }
.termin { display: inline-block; margin: 8px 0 0; padding: 8px 16px; border: 1px solid var(--gold-tief); color: var(--wein); font-weight: 700; }
.praemien { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.praemie { display: flex; flex-direction: column; border: 1px solid var(--linie); border-radius: 4px; background: #ffffff; overflow: hidden; }
.praemie-bild img { display: block; width: 100%; }
.praemie-text { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 20px; }
.praemie h3 { margin: 0 0 6px; font-size: 1.25rem; }
.praemie-kurz { margin: 8px 0 16px; }
.praemie-knopf { margin: auto 0 0; }
.praemie-knopf .knopf-gross { width: 100%; }
.versand .liste { max-width: 560px; }
.versand .hinweis { max-width: 72ch; }

/* Produktseite: Galerie ohne Skript neben Name, Preis und Lieferung; darunter Text, Eigenschaften und Bestellung. */
.zurueck { margin: 0 0 8px; }
.zurueck a { display: inline-flex; align-items: center; min-height: 48px; }
.produktkopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.galerie-gross { display: block; }
.galerie-gross img { display: block; width: 100%; border: 1px solid var(--linie); }
.galerie-weitere { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.galerie-weitere a { display: block; }
.galerie-weitere img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--linie); }
.galerie a:hover img { border-color: var(--gold-tief); }
.produktangaben h1 { margin-top: 0; }
.preis-gross { margin: 4px 0 8px; font-family: var(--schrift-titel); font-size: 2rem; font-weight: 400; }
.lieferung { margin: 14px 0; }
.versandhinweis { margin: 16px 0; padding: 12px 16px; border-left: 4px solid var(--gold-tief); background: var(--creme); font-weight: 700; }
.beschreibung { max-width: 72ch; margin-top: 28px; }
.beschreibung p > strong:first-child { font-family: var(--schrift-titel); color: var(--wein); }
.bestellbox { max-width: 760px; margin: 36px 0 8px; padding: 8px clamp(16px, 3vw, 28px) 24px; border: 1px solid var(--linie); border-top: 3px solid var(--wein); border-radius: 4px; background: var(--creme); }
.bestellbox > h2 { margin-top: 16px; }
.ringwahl, .widmungswahl { border: 2px solid var(--wein); padding: 10px 18px 14px; }
.ringwahl legend, .widmungswahl legend { padding: 0 8px; font-family: var(--schrift-titel); font-size: 1.15rem; font-weight: 700; color: var(--wein); }

@media (max-width: 1000px) {
    .praemien { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
}
@media (max-width: 860px) {
    .auftakt { grid-template-columns: 1fr; gap: 24px; justify-items: center; text-align: center; }
    .auftakt-bild { width: min(70vw, 300px); }
    .produktkopf { grid-template-columns: 1fr; gap: 24px; }
    .galerie { max-width: 520px; }
}
@media (max-width: 640px) {
    .seitenkopf { grid-template-columns: 1fr; grid-template-areas: "marke" "unter" "menue"; }
    .marke-titel { font-size: 1.1rem; }
}
@media (max-width: 520px) {
    .uebersicht th:nth-child(3), .uebersicht td:nth-child(3) { display: none; }
    .uebersicht th { white-space: nowrap; }
    .uebersicht .angabe { font-size: 0.9rem; }
    .liste th, .liste td { padding: 8px 4px; }
    .knopf { width: 100%; }
    .feld-einzug { margin-left: 20px; }
    .schritte { display: grid; grid-template-columns: 1fr 1fr; }
    .zier { margin-top: 32px; }
}