/*
 * Kaufen (Schritt 5), zweiter Teil – für alle Designs dasselbe: das Blatt »Dieses Foto bestellen«, die Zeilen mit Mengen,
 * Warenkorb, Sparpakete, Wunschliste bestellen, Kasse, Bestätigung. Was eine Galerie schon im ersten Bild zeigt
 * (Warenkorb im Kopf, »Bestellen · ab …«, Sparpaket-Hinweis, Wählmodus), steht in css/shop.css.
 *
 * Geladen von shop/rahmen: auf den Kaufseiten sofort; in Galerie, Wunschliste und Fotoseite NACHRANGIG (media="print",
 * public/js/shop.js schaltet auf »all«) – das Blatt braucht diese Regeln erst nach einem Tipp, und im langsamen Netz teilt
 * sich die Datei sonst die Leitung mit dem ersten Foto (Tempo-Ziel: erstes Foto am Handy unter 1,5 s).
 */
/* ── Das Blatt (über Galerie oder Großansicht) ── */
.blatt-offen { overflow: hidden; }
.blatt-ebene { position: fixed; inset: 0; z-index: 80; display: grid; align-items: end; justify-items: center; }
.blatt-grund { position: absolute; inset: 0; background: rgba(13, 14, 16, 0.5); opacity: 0; transition: opacity 240ms ease-out; }
.blatt-traeger {
    position: relative; width: 100%; max-width: 640px; max-height: calc(100svh - 28px); overflow-y: auto; overscroll-behavior: contain;
    border-radius: 20px 20px 0 0; background: var(--papier); box-shadow: var(--schatten-schwebt);
    transform: translateY(100%); transition: transform 240ms var(--kurve);
}
.blatt-ebene.offen .blatt-grund { opacity: 1; }
.blatt-ebene.offen .blatt-traeger { transform: translateY(0); }
@media (min-width: 700px) { .blatt-ebene { align-items: center; padding: 24px; } .blatt-traeger { max-height: calc(100svh - 48px); border-radius: 20px; transform: translateY(32px); opacity: 0; transition: transform 240ms var(--kurve), opacity 200ms; } .blatt-ebene.offen .blatt-traeger { opacity: 1; } }

.kaufen-blatt { max-width: 640px; margin: 0 auto; width: 100%; }
.blatt { display: flex; flex-direction: column; min-height: 100%; }
/* Der Kopf mit dem X bleibt beim Scrollen im Blatt oben (Rolle Kunde 2, B2) – deckend, nichts scheint durch. */
.blatt-kopf { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 56px minmax(0, 1fr) 48px; align-items: center; gap: 12px; padding: 14px 12px 10px 16px; background: var(--papier); box-shadow: 0 1px 0 var(--linie); }
.kaufen-blatt .blatt-kopf { position: static; box-shadow: none; }
.blatt-bild { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; display: block; }
.blatt-titel h2 { font-size: 20px; }
/* Der Fokus springt beim Öffnen auf die Überschrift (für Vorleseprogramme) – sichtbar braucht es ihn dort nicht. */
.blatt-titel h2:focus { outline: none; }
.blatt-titel p { font-size: 13px; color: var(--neben); }
.blatt-zu { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--tinte); }
.blatt-zu:hover { color: var(--tinte); background: rgba(22, 23, 26, 0.06); }
.blatt-zu .sym { width: 22px; height: 22px; }
.kaufen-blatt .blatt-zu { display: none; }
.blatt-meldung { margin: 2px 16px 8px; padding: 10px 14px; border-radius: 12px; background: var(--akzent-hell); color: var(--tinte); font-size: 14px; line-height: 1.4; animation: einblenden 260ms var(--kurve); }
.blatt-fehler { background: var(--warn-hell); color: var(--warn-text); }
@keyframes einblenden { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.blatt-paket-offen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 2px 16px 10px; padding: 10px 10px 10px 14px; border-radius: 14px; background: var(--flaeche); box-shadow: var(--schatten-fein); font-size: 14px; }
/* Die Reiter brechen um, statt rechts angeschnitten zu werden (Rolle Kunde 2, C4). */
/* Bildschutz (Plan 2.7): ein stiller Satz oben im Blatt, nur in Galerien mit Wasserzeichen. */
.blatt-mehrwert { margin: 14px 16px 6px; font-size: 14px; line-height: 1.4; color: var(--neben); }
.blatt-sprung { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 6px; }
.blatt-sprung a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte); font-size: 13px; font-weight: 600; text-decoration: none; }
.blatt-abschnitte { padding: 0 16px; display: grid; gap: 18px; }
.blatt-abschnitt { scroll-margin-top: 96px; }
.blatt-abschnitt h3:focus { outline: none; }
.blatt-abschnitt h3 { font-size: 13px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--neben); margin: 6px 0 2px; }
.blatt-staffel { font-size: 14px; color: var(--text); margin-bottom: 4px; }
.blatt-leer { color: var(--neben); }
.blatt-klein { margin: 14px 16px 0; font-size: 12px; color: var(--neben); }
.blatt-probe { color: var(--warn-text); }
.blatt-fuss {
    position: sticky; bottom: 0; z-index: 2; margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    padding: 12px 16px max(14px, env(safe-area-inset-bottom)); background: var(--papier); box-shadow: 0 -1px 0 var(--linie);
}
.blatt-summe { flex: 1 1 auto; font-size: 15px; }
.blatt-summe b { font-weight: 700; }
.blatt-korb { font-size: 14px; }
.knopf-fuss { width: auto; flex: 1 1 100%; min-height: 54px; }
.knopf-fuss-still { flex: 0 0 auto; }
/* Nach der ersten Auswahl: »Weiterschauen« links, die Hauptaktion rechts – beide im Daumenbereich (Rolle Kunde 2, B2). */
.blatt-taten { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 10px; }
.blatt-taten .knopf-fuss { flex: none; min-width: 0; }
.knopf-fuss-neben { min-height: 54px; min-width: 0; padding: 0 12px; }
@media (min-width: 520px) { .knopf-fuss { flex: 0 1 auto; min-width: 220px; } .blatt-taten { display: flex; justify-content: flex-end; } .blatt-taten .knopf-fuss { min-width: 220px; } }
.schalter-laden { text-decoration: none; }
.schalter-laden:hover { color: var(--tinte); }

/* Eine Zeile: Format · Text · Mengenwähler */
.kz-liste { list-style: none; padding: 0; margin: 0; border-radius: 16px; background: var(--flaeche); box-shadow: var(--schatten-fein); }
.kz { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; padding: 12px 12px 12px 14px; }
.kz + .kz { border-top: 1px solid var(--linie); }
.kz-format { display: grid; place-items: center; width: 38px; min-height: 44px; color: var(--neben); }
.kz-format svg { display: block; overflow: visible; }
.kz-format rect { fill: #FFFFFF; stroke: var(--tinte); stroke-width: 1.5; }
.kz-symbol .sym { width: 24px; height: 24px; color: var(--neben); }
.kz-text { min-width: 0; padding-top: 2px; display: grid; gap: 2px; }
.kz-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 10px; font-size: 16px; line-height: 1.35; }
.kz-name { font-weight: 600; }
.blatt .kz-kopf { display: grid; justify-content: start; gap: 0; }
.blatt .kz-paket .kz-kopf, .blatt .kz-download .kz-kopf, .blatt .kz-alle .kz-kopf { display: flex; justify-content: space-between; }
.kz-preis { font-weight: 600; white-space: nowrap; }
.kz-zusatz { font-size: 13px; line-height: 1.4; color: var(--akzent); font-weight: 500; }
.kz-auf, .kz-unter, .kz-naechstes, .kz-still { font-size: 13px; color: var(--neben); line-height: 1.45; }
.kz-naechstes { color: var(--text); }
.kz-satz { font-size: 13px; color: var(--text); line-height: 1.45; margin-top: 2px; }
.kz-spart { font-size: 13px; color: var(--tinte); font-weight: 600; }
.kz-warn, .kz-hinweis { font-size: 13px; line-height: 1.45; }
.kz-warn { color: var(--warn-text); }
.kz-hinweis { color: var(--neben); }
.kz-hinweis .verweis-knopf { min-height: 44px; margin: -12px 0; font-size: 13px; }
.kz-tat { align-self: center; margin: 0; }
.kz-paket .kz-tat, .kz-download .kz-tat, .kz-alle .kz-tat { grid-column: 2 / -1; justify-self: start; }
@media (min-width: 460px) { .kz-paket .kz-tat, .kz-download .kz-tat, .kz-alle .kz-tat { grid-column: auto; justify-self: end; } }
.zuschnitt { margin: 8px 0 4px; display: grid; gap: 6px; }
.zuschnitt svg { display: block; width: 100%; max-width: 360px; height: auto; border-radius: 8px; background: var(--linie); }
.zuschnitt figcaption { font-size: 12px; color: var(--neben); }
/* Verwürfelte Kacheln: das Foto als Canvas, der Rahmen als SVG genau darüber (beide in derselben Zelle). */
.zuschnitt-bild, .zuschnitt .zuschnitt-ueber { grid-area: 1 / 1; width: 100%; max-width: 360px; border-radius: 8px; }
.zuschnitt-bild { display: block; height: auto; background: var(--linie); }
.zuschnitt .zuschnitt-ueber { height: 100%; background: transparent; }
.zuschnitt figcaption { grid-row: 2; }

.menge { display: flex; align-items: center; gap: 2px; margin: 0; border-radius: 999px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
.menge-knopf { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tinte); cursor: pointer; transition: background-color 120ms, transform 120ms var(--kurve); }
.menge-knopf:hover { background: rgba(22, 23, 26, 0.06); }
.menge-knopf:active { transform: scale(0.9); }
.menge-knopf[disabled] { color: #C4C5C1; cursor: default; background: none; }
.menge-knopf .sym { width: 18px; height: 18px; stroke-width: 2; }
.menge-zahl { min-width: 22px; text-align: center; font-size: 16px; font-weight: 700; }
.menge.rechnet .menge-zahl { color: var(--akzent); }
.schalter-knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--tinte); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color 140ms, color 140ms, border-color 140ms; }
.schalter-knopf:hover { border-color: var(--tinte); }
.schalter-knopf[aria-pressed='true'] { background: var(--tinte); border-color: var(--tinte); color: #FFFFFF; }
.schalter-knopf .sym { width: 16px; height: 16px; stroke-width: 2.2; }

/* ── Seiten: Warenkorb, Paket, Sparpakete, Wunschliste bestellen, Kasse, Bestätigung ── */
.kaufen { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 var(--rand); }
.kaufen-titel { padding: 18px 0 14px; }
.kaufen-titel h1 { margin-top: 6px; font-size: clamp(32px, 8.4vw, 44px); }
.kaufen-titel .titel-unter { margin-top: 10px; }
.kaufen-hinweis { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--akzent-hell); color: var(--tinte); font-size: 14px; line-height: 1.45; }
.kaufen-fehler { background: var(--warn-hell); color: var(--warn-text); }
.kaufen-leer { margin-top: 24px; }
.korb { display: grid; gap: 12px; }
.korb-block { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px 14px; padding: 12px; border-radius: 16px; background: var(--flaeche); box-shadow: var(--schatten-fein); }
/* Familienkorb (Feste Gruppe): je Kind und gemeinsamer Galerie eine ruhige Überschrift; »Fotos von Ben dazulegen« als stiller Verweis. */
.korb-gruppe { margin: 10px 2px -4px; font-size: 15px; font-weight: 600; color: var(--text); }
.korb-gruppe:first-child { margin-top: 0; }
.kasse-gruppe { list-style: none; margin: 12px 0 2px; font-size: 14px; font-weight: 600; color: var(--text); }
.kasse-gruppe:first-child { margin-top: 0; }
.korb-dazulegen { margin: 2px 2px 0; font-size: 14px; }
.korb-dazulegen a { display: inline-block; padding: 8px 0; color: var(--akzent); cursor: pointer; }
.korb-ohne-bild { grid-template-columns: 38px minmax(0, 1fr); padding-left: 16px; }
.korb-bild { display: block; width: 76px; }
.korb-bild :is(img, canvas) { display: block; width: 76px; height: 76px; object-fit: cover; border-radius: 10px; }
.korb-zeilen { min-width: 0; display: grid; gap: 10px; }
.korb-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; }
.korb-zeile + .korb-zeile { padding-top: 10px; border-top: 1px solid var(--linie); }
.korb-text { min-width: 0; display: grid; gap: 2px; }
@media (max-width: 459px) { .korb-zeile { grid-template-columns: minmax(0, 1fr); } .korb-zeile .menge, .korb-zeile .kz-tat { justify-self: start; } }
/* Der Vorschlag »Mit Datei: 6,30 € mehr · [Datei dazu]« – eine stille Zeile ohne Farbfläche (Optik 9, B1). */
.korb-vorschlag { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0; padding-top: 10px; border-top: 1px solid var(--linie); font-size: 14px; line-height: 1.45; color: var(--text); }
.korb-paket { grid-template-columns: minmax(0, 1fr); padding: 14px; }
.paket-kopf { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 12px; }
.plaetze { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.platz { display: grid; gap: 4px; justify-items: start; font-size: 12px; color: var(--neben); }
.platz form { margin: 0; }
.platz .verweis-knopf { min-height: 44px; font-size: 13px; }
.platz-bild, .platz-rahmen { display: grid; place-items: center; width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; object-fit: cover; }
.platz-rahmen { border: 1.5px dashed var(--linie-stark); color: var(--akzent); background: var(--papier); text-decoration: none; }
a.platz-rahmen:hover { border-color: var(--akzent); color: var(--akzent); }
.platz-rahmen .sym { width: 22px; height: 22px; }
.platz-alle, .platz-ohne { border-style: solid; color: var(--neben); }
.platz-name { line-height: 1.3; }
.paket-satz { font-size: 14px; color: var(--text); line-height: 1.45; }
.paket-taten { display: flex; flex-wrap: wrap; gap: 0 20px; }
.paket-taten form { margin: 0; }
.pakete { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.paket-angebot { grid-template-columns: 38px minmax(0, 1fr); padding-left: 16px; }
.paket-angebot .kz-tat { grid-column: 2; justify-self: start; }

/* Unter der Liste: Steuer, Lieferung, Sätze – im Fluss. Fest unten nur die schlanke Leiste »Summe · Zur Kasse« (offene Wünsche 14). */
.korb-fuss { margin: 18px 0 0; display: grid; gap: 8px; }
.korb-fuss form { margin: 0; justify-self: center; }
.korb-summe { display: grid; gap: 2px; text-align: right; }
.korb-summe .still { font-size: 13px; }
.korb-leiste {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px calc(-1 * var(--rand)) 0;
    padding: 10px var(--rand) max(12px, env(safe-area-inset-bottom)); background: var(--papier); box-shadow: 0 -1px 0 var(--linie);
}
.korb-leiste-haftet { position: sticky; bottom: 0; z-index: 5; }
.korb-leiste-summe { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 15px; color: var(--text); white-space: nowrap; }
.korb-leiste-summe b { font-size: 20px; color: var(--tinte); }
.korb-leiste .knopf-haupt { flex: 0 1 auto; min-width: 150px; min-height: 48px; }
@media (min-width: 720px) { .korb-leiste { margin-inline: 0; padding-inline: 0; } }
.korb-satz { font-size: 14px; color: var(--text); line-height: 1.45; }
.korb-entfernen { color: var(--neben); font-weight: 500; }

/* Das Geschenk (Schritt 9): eine Zeile wie die anderen. »geschenkt« steht wie ein Preis – in Textfarbe, fett, in Korb, Kasse
   und Bestätigung gleich (Optik 9, C3) –, damit es nicht wie ein Verweis aussieht. »Anderes Foto« still unter dem Namen (B2). */
.korb-geschenk { box-shadow: inset 0 0 0 1px var(--akzent-hell), var(--schatten-fein); }
.kz-geschenkt { color: var(--tinte); font-weight: 700; }
.kz-anderes { margin-top: -4px; }
.kz-anderes .verweis-knopf { font-size: 14px; font-weight: 500; }
@media (pointer: fine) { .kz-anderes .verweis-knopf { min-height: 30px; } }
.korb-naechstes { padding: 10px 12px; border-radius: 12px; background: var(--akzent-hell); }
.geschenk-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin: 0; }
.geschenk-foto { display: block; padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer; transition: box-shadow 140ms, transform 140ms var(--kurve); }
.geschenk-foto :is(img, canvas) { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.geschenk-foto:hover { transform: translateY(-1px); }
.geschenk-foto[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--akzent); }
.geschenk-foto:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--akzent), 0 0 0 6px var(--akzent-hell); }

.wahl-form { display: grid; gap: 12px; }
.wahl { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.wahl legend { font-size: 13px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--neben); margin-bottom: 4px; }
.wahl-je { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--text); margin-bottom: 4px; }
.wahl-je-knopf { display: grid; place-items: center; min-width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--tinte); font-weight: 600; text-decoration: none; }
.wahl-je-knopf[aria-current='true'] { background: var(--tinte); border-color: var(--tinte); color: #FFFFFF; }
.wahl-zeile { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-radius: 14px; background: var(--flaeche); box-shadow: var(--schatten-fein); cursor: pointer; transition: box-shadow 140ms; }
.wahl-zeile:has(input:checked) { box-shadow: 0 0 0 2px var(--akzent), var(--schatten-fein); }
.wahl-zeile:has(input:disabled) { opacity: 0.55; cursor: default; }
.wahl-zeile input { width: 20px; height: 20px; margin: 0; accent-color: var(--akzent); }
.wahl-text { display: grid; gap: 2px; min-width: 0; }
.wahl-text small { font-size: 13px; color: var(--neben); }
.wahl-satz { font-size: 13px; }
.wahl-oder { font-size: 15px; color: var(--text); }

/* Kasse */
.probe-band { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--warn-hell); color: var(--warn-text); font-size: 14px; font-weight: 600; line-height: 1.4; }
.probe-band .sym { width: 18px; height: 18px; margin-top: 1px; }
.kasse-form { display: grid; gap: 14px; }
.kasse-abschnitt { display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: var(--flaeche); box-shadow: var(--schatten-fein); }
.kasse-abschnitt h2 { font-size: 18px; }
.feld { display: grid; gap: 6px; min-width: 0; }
.feld label { font-size: 14px; font-weight: 600; }
.feld-paar { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 520px) { .feld-paar { grid-template-columns: 1fr 1fr; } .feld-plz { grid-template-columns: 120px 1fr; } }
.eingabe { width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--linie-stark); border-radius: 12px; background: var(--flaeche); color: var(--tinte); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; transition: border-color 140ms, box-shadow 140ms; }
.eingabe:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-hell); }
.eingabe[aria-invalid='true'] { border-color: var(--gefahr); }
.feld-hilfe { font-size: 13px; color: var(--neben); }
.feld-fehler { font-size: 14px; color: var(--gefahr); }
.lieferwahl { display: grid; gap: 8px; }
.lieferwahl .wahl-zeile { box-shadow: inset 0 0 0 1px var(--linie); }
.lieferwahl .wahl-zeile:has(input:checked) { box-shadow: inset 0 0 0 2px var(--akzent); }
.adresse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 260ms var(--kurve), opacity 200ms; }
.adresse-innen { min-height: 0; overflow: hidden; display: grid; gap: 12px; padding: 2px; }
.kasse-form:has(.lieferwahl input:checked):not(:has(.lieferwahl .braucht-adresse:checked)) .adresse { grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows 260ms var(--kurve), opacity 200ms, visibility 0s 260ms; }
.kasse-zeilen { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kasse-zeile { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.kasse-bild { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--papier); color: var(--neben); }
.kasse-symbol .sym { width: 22px; height: 22px; }
.kasse-text { display: grid; gap: 2px; min-width: 0; font-size: 15px; }
.kasse-text small { font-size: 13px; color: var(--neben); line-height: 1.4; }
.kasse-summen { padding-top: 12px; border-top: 1px solid var(--linie); }
.kasse-summe { display: none; gap: 4px; }
.kasse-summe p { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.kasse-summe p.still { display: block; font-size: 13px; }
.kasse-gesamt { font-size: 18px !important; font-weight: 700; }

.kasse-summe-immer { display: grid; }
.kasse-form:has(.lieferwahl-1:checked) .summe-lieferart-1, .kasse-form:has(.lieferwahl-2:checked) .summe-lieferart-2,
.kasse-form:has(.lieferwahl-3:checked) .summe-lieferart-3, .kasse-form:has(.lieferwahl-4:checked) .summe-lieferart-4 { display: grid; }
.kasse-form:not(:has(.lieferwahl input:checked)) .summe-lieferart-1 { display: grid; }
.erklaerungen { font-size: 14px; line-height: 1.5; color: var(--text); }
.erklaerung-hinweis { padding-left: 12px; border-left: 3px solid var(--linie-stark); }
.kaestchen { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border-radius: 12px; background: var(--papier); cursor: pointer; }
.kaestchen input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--akzent); }
.kaestchen:has(input[aria-invalid='true']) { box-shadow: inset 0 0 0 2px var(--gefahr); }
/* Der Knopf steht am Ende des Formulars – keine feste Leiste (offene Wünsche 14, Vorbild Shopify). */
.kasse-knopf { display: grid; gap: 8px; justify-items: stretch; padding: 4px 0 max(24px, env(safe-area-inset-bottom)); }
.kasse-knopf .knopf-haupt { width: 100%; min-height: 54px; font-size: 17px; }
.kasse-knopf > .still { text-align: center; }

/* Bestätigung */
.kaufen-bestaetigung .kaufen { padding: 0; }
.bestaetigung-schritte { margin: 0 0 16px; }
.schritt-fertig { background: var(--akzent); border-color: var(--akzent); color: #FFFFFF; }
.schritt-fertig .sym { width: 16px; height: 16px; stroke-width: 2.4; }
.bestaetigung-fuss { position: static; margin: 18px 0 0; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.seite-bestaetigung .kasse-abschnitt + .kasse-abschnitt { margin-top: 12px; }
/* Zahlung (Schritt 11): ein Satz, »Jetzt bezahlen«; bei Überweisung GiroCode neben der Bankverbindung. */
.zahlung-abschnitt .knopf-haupt { justify-self: start; }
.ueberweisung { display: grid; gap: 16px; align-items: start; }
@media (min-width: 560px) { .ueberweisung { grid-template-columns: auto 1fr; } }
.girocode { margin: 0; display: grid; gap: 6px; justify-items: center; }
.girocode svg { display: block; width: 240px; height: 240px; border-radius: 8px; }
/* Bankdaten (Wunsch Dominik, 17.10.): Werte in Vierergruppen gut lesbar, je Feld »Kopieren« – ohne Skript bleibt nur der Wert. */
.bankdaten dd.bank-kopierbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.bank-wert { font-size: 17px; letter-spacing: 0.03em; white-space: nowrap; }
.bank-kopieren { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--linie-stark); border-radius: 999px; background: var(--flaeche); color: var(--tinte); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.bank-kopieren .sym { width: 16px; height: 16px; }
.bank-kopieren[data-kopiert] { border-color: var(--akzent); color: var(--akzent); }
@media (scripting: none) { .bank-kopieren { display: none; } }
.bankdaten { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.bankdaten dt { color: var(--nebentext, #5E6168); font-size: 14px; }
.bankdaten dd { margin: 0; overflow-wrap: anywhere; }
.kasse-zahlung-satz { margin: 0; }

@media (min-width: 900px) {
    .kaufen-titel { padding-top: 32px; }
    .korb-block { grid-template-columns: 96px minmax(0, 1fr); padding: 14px; }
    .korb-bild, .korb-bild :is(img, canvas) { width: 96px; height: 96px; }
    .korb-ohne-bild, .paket-angebot { grid-template-columns: 38px minmax(0, 1fr); }
    .korb-paket { grid-template-columns: minmax(0, 1fr); }
}


/* ── Herunterladen (Schritt 5b): Übersicht, ZIP im Entstehen, Dateien einer Bestellung ── */
.laden-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.laden-zeile { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; padding: 12px; border-radius: 16px; background: var(--flaeche); box-shadow: var(--schatten-fein); }
.laden-zeile-alle { grid-template-columns: 56px minmax(0, 1fr); padding: 14px; }
.laden-zeile-alle .laden-knopf { grid-column: 1 / -1; }
/* Je Zeile ein Foto (Titelbild bzw. erstes Foto des Abschnitts) – woran man den Tag erkennt, nicht ein Symbol. */
.laden-bild { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; object-fit: cover; color: var(--akzent); }
.laden-symbol { background: var(--akzent-hell); }
.laden-symbol .sym { width: 24px; height: 24px; }
.laden-text { display: grid; gap: 2px; min-width: 0; }
.laden-text b { font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.laden-text small { font-size: 13px; color: var(--neben); }
.laden-knopf .sym { width: 20px; height: 20px; }
/* Abschnitte: Die ganze Zeile ist das Ziel – der Verweis spannt sich über sie; rechts am Rechner mit Wort, am Handy nur das Zeichen. */
.laden-zeile-ziel { transition: box-shadow 160ms; }
.laden-zeile-ziel:hover { box-shadow: var(--schatten-schwebt); }
.laden-zeile-ziel:has(.laden-zeilenknopf:active) { transform: scale(0.99); }
.laden-zeilenknopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--linie-stark); color: var(--tinte); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.laden-zeilenknopf::after { content: ''; position: absolute; inset: 0; border-radius: 16px; }
.laden-zeilenknopf:hover { color: var(--tinte); }
.laden-zeilenknopf .sym { width: 20px; height: 20px; }
.laden-zeilenknopf:focus-visible { outline: none; }
.laden-zeilenknopf:focus-visible::after { outline: 2px solid var(--akzent); outline-offset: 2px; }
.laden-symbolknopf { min-height: 44px; padding: 0 16px 0 12px; font-size: 14px; }
.laden-symbolknopf .sym { width: 20px; height: 20px; }
@media (max-width: 559px) {
    .laden-zeilenknopf, .laden-symbolknopf { width: 48px; min-height: 48px; padding: 0; }
    .laden-zeilenknopf span, .laden-symbolknopf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.laden-hinweis { margin: 16px 0 0; font-size: 14px; color: var(--neben); }

/* Die ZIP-Seite: ein Streifen der ersten Fotos, der Stand, der Weg zurück */
.laden-streifen { list-style: none; margin: 0 0 14px; padding: 0; display: flex; gap: 6px; overflow: hidden; }
.laden-streifen li { flex: 0 0 auto; }
.laden-streifen :is(img, canvas), .laden-streifen span { display: block; width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
@media (min-width: 560px) { .laden-streifen img { width: 84px; height: 84px; } }
.laden-stand { display: grid; gap: 10px; }
.laden-ios { font-size: 14px; }
.laden-heim { margin: 0 0 24px; }
.laden-heim .knopf-haupt { width: 100%; }
.laden-fortschritt { width: 100%; height: 10px; border: 0; border-radius: 999px; overflow: hidden; background: var(--akzent-hell); color: var(--akzent); -webkit-appearance: none; appearance: none; }
.laden-fortschritt::-webkit-progress-bar { background: var(--akzent-hell); border-radius: 999px; }
.laden-fortschritt::-webkit-progress-value { background: var(--akzent); border-radius: 999px; transition: width 300ms ease-out; }
.laden-fortschritt::-moz-progress-bar { background: var(--akzent); border-radius: 999px; }
/* Noch kein Foto drin (oder wartet auf den Bauplatz): Der Balken läuft unbestimmt – ein sanftes Band zieht durch, damit niemand
   »steht still« liest. Mit »weniger Bewegung« ein ruhiges, halbes Band ohne Lauf. */
.laden-fortschritt:indeterminate { background: linear-gradient(90deg, var(--akzent-hell) 0%, var(--akzent-hell) 30%, var(--akzent) 50%, var(--akzent-hell) 70%, var(--akzent-hell) 100%); background-size: 300% 100%; background-position: 50% 0; }
.laden-fortschritt:indeterminate::-webkit-progress-bar { background: transparent; }
.laden-fortschritt:indeterminate::-moz-progress-bar { background: transparent; }
@media (prefers-reduced-motion: no-preference) {
    .laden-fortschritt:indeterminate { animation: laden-band 1.8s ease-in-out infinite; }
}
@keyframes laden-band { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.laden-zahl { font-variant-numeric: tabular-nums; font-weight: 600; }
.laden-teile { display: grid; gap: 10px; margin-top: 4px; }
.laden-teile .sym { width: 20px; height: 20px; }
.laden-teile .knopf { justify-self: start; }
.laden-dateien .kasse-zeile { grid-template-columns: 48px minmax(0, 1fr) auto; }
.laden-dateien .kasse-text { display: grid; gap: 2px; min-width: 0; }
.laden-dateien .kasse-text small { font-size: 13px; color: var(--neben); }
.laden-alle .sym { width: 20px; height: 20px; }
.laden-alle small { font-size: 13px; font-weight: 500; opacity: 0.8; }
.laden-alle.knopf { justify-self: start; }
.seite-bestaetigung .laden-dateien { margin-bottom: 12px; }
/* Bestätigung (Optik gesamt Kauf, B2): »Herunterladen« immer mit Wort. Eine einzige Datei: der Hauptknopf über die volle Breite unter der
   Zeile; mehrere: am Handy unter dem Namen statt eines Symbols ohne Wort. */
.laden-wortknopf { gap: 8px; min-height: 44px; padding: 0 16px 0 12px; font-size: 15px; }
.laden-wortknopf .sym { width: 20px; height: 20px; }
.laden-wortknopf.knopf-haupt { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; font-size: 16px; text-decoration: none; }
.laden-einzeln .laden-wortknopf { grid-column: 1 / -1; margin-top: 6px; }
.laden-alle-oben { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 12px; text-decoration: none; }
@media (max-width: 559px) {
    .laden-dateien .laden-posten:not(.laden-einzeln) .laden-wortknopf { grid-column: 2 / -1; justify-self: start; }
}
.bestaetigung-zurueck { justify-self: center; }

/* Schlichte Seiten (Bestätigung, abgelaufener Link): Inhalt und Zeichen des Studios auf derselben Kante. */
.schlicht:has(> .kaufen) { max-width: calc(720px + 2 * var(--rand)); }
.schlicht > .kaufen { padding: 0; }

/* Schritt 11: eine Bestellung dieses Geräts wartet noch auf die Zahlung – oben im Warenkorb, mit »Jetzt bezahlen«. */
/* Offene Zahlung nach einem Abbruch (Optik gesamt Kauf, A2): Korb unverändert → eine neutrale Karte (weiß mit Linie, nicht das Hellblau des
   Geschenk-Satzes) mit dem Hauptknopf; sonst eine stille Zeile. */
.offene-karte { display: grid; gap: 6px; margin: 0 0 14px; padding: 16px; border: 1px solid var(--linie); border-radius: 14px; background: var(--flaeche); }
.offene-karte h2 { margin: 0; font-size: 18px; }
.offene-karte p { margin: 0; }
.offene-karte .knopf-haupt { margin-top: 6px; }
.offene-zeile { margin: 0 0 12px; font-size: 14px; }
.korb-kasse-still { justify-self: center; }

/* Kasse: gesetzliche Gewährleistung – umrandet und hervorgehoben; die Mitteilung klappt weich auf (shop.js, data-klappt). Ohne Skript
   steht statt des Knopfs der Verweis auf die Seite, und die Klappe bleibt zu. */
.gewaehr-kasten { box-shadow: inset 0 0 0 2px var(--akzent); background: var(--flaeche); }
.gewaehr-kasten p { font-size: 15px; color: var(--text); }
.gewaehr-verweise { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; }
/* Oben und unten gleich viel Luft (Optik gesamt Kauf, C4): Die 44 px hohen Verweise und die zugeklappte Mitteilung trugen unten auf. */
.gewaehr-kasten:not(:has([aria-expanded='true'])) .gewaehr-verweise { margin-bottom: -10px; }
.gewaehr-verweise a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; }
.gewaehr-auf { gap: 6px; }
.gewaehr-auf .sym { width: 16px; height: 16px; transition: transform 260ms var(--kurve); }
.gewaehr-auf[aria-expanded='true'] .sym { transform: rotate(180deg); }
.gewaehr-seite { display: none !important; }
@media (scripting: none) { .gewaehr-auf, .gewaehr-klappe { display: none !important; } .gewaehr-seite { display: inline-flex !important; } }
.gewaehr-klappe { align-self: start; }
.gewaehr-klappe .gewaehr-bild { padding-top: 4px; }
/* Lieferzeit unmittelbar über dem Knopf – je gewählter Lieferart, wie die Summen. */
.kasse-lieferzeit { display: grid; gap: 2px; justify-items: center; font-size: 13px; color: var(--neben); text-align: center; }
.kasse-lieferzeit p { display: none; }
.kasse-lieferzeit .lieferzeit-immer { display: block; }
.kasse-form:has(.lieferwahl-1:checked) .lieferzeit-lieferart-1, .kasse-form:has(.lieferwahl-2:checked) .lieferzeit-lieferart-2,
.kasse-form:has(.lieferwahl-3:checked) .lieferzeit-lieferart-3, .kasse-form:has(.lieferwahl-4:checked) .lieferzeit-lieferart-4 { display: block; }
.kasse-form:not(:has(.lieferwahl input:checked)) .lieferzeit-lieferart-1 { display: block; }
/* Der Betrag über dem Knopf (Optik gesamt Kauf, B5): der der gewählten Lieferart. */
.knopf-betrag-zeile { margin: 0; font-size: 15px; color: var(--text); }
.knopf-betrag-zeile b { color: var(--tinte); }
.knopf-betrag { display: none; white-space: nowrap; }
.knopf-betrag.betrag-immer, .kasse-form:not(:has(.lieferwahl input:checked)) .betrag-lieferart-1,
.kasse-form:has(.lieferwahl-1:checked) .betrag-lieferart-1, .kasse-form:has(.lieferwahl-2:checked) .betrag-lieferart-2,
.kasse-form:has(.lieferwahl-3:checked) .betrag-lieferart-3, .kasse-form:has(.lieferwahl-4:checked) .betrag-lieferart-4 { display: inline; }
/* Warenkorb: die Zahlungsarten als eine stille Zeile unter »Zur Kasse«. */
.korb-zahlung { font-size: 13px; text-align: center; }
/* Zu: die leere Klappe soll keinen Rasterabstand unter den Verweisen lassen. */
@media (scripting: enabled) { .gewaehr-klappe { transition: grid-template-rows 260ms var(--kurve), opacity 200ms, margin-top 260ms var(--kurve); } .gewaehr-klappe:not(.offen) { margin-top: -12px; transition: grid-template-rows 260ms var(--kurve), opacity 200ms, margin-top 260ms var(--kurve), visibility 0s 260ms; } }
/* Q8: »Für welches Kind?« – nur bei »Abholung in der Einrichtung«, weich auf wie die Anschrift. */
.kind-feld { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows 260ms var(--kurve), opacity 200ms, visibility 0s 260ms; }
.kind-innen { min-height: 0; overflow: hidden; padding: 2px; }
/* Rolle Kunde 3, B4: mehrere Kinder – wählen, bei welchem die Tüte abgegeben wird. */
.kind-wahl { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.kind-wahl legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.kind-wahl .wahl-zeile { box-shadow: inset 0 0 0 1px var(--linie); }
.kind-wahl .wahl-zeile:has(input:checked) { box-shadow: inset 0 0 0 2px var(--akzent); }
.kasse-form:has(.lieferwahl .braucht-kind:checked) .kind-feld { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows 260ms var(--kurve), opacity 200ms; }

/* ── Kasse in zwei Spalten (offene Wünsche 14, Vorbild Shopify) ──
   Handy: »Bestellung ansehen · Summe« oben, die Bestellung darunter eingeklappt (weich, kasse.js); über dem Knopf die Zeilen in Kurzform.
   Rechner (ab 900 px): links die Angaben bis zum Knopf, rechts die Bestellung, die beim Scrollen mitläuft. */
.kasse-angaben { display: grid; gap: 14px; min-width: 0; }
.kasse-ansehen {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 0 16px;
    border: 0; border-radius: 16px; background: var(--flaeche); box-shadow: var(--schatten-fein); color: var(--tinte); font: inherit; font-size: 15px; cursor: pointer;
}
.kasse-ansehen-wort { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--akzent); }
.kasse-ansehen-wort .sym { width: 18px; height: 18px; }
.kasse-ansehen-wort .sym:last-child { width: 16px; height: 16px; transition: transform 260ms var(--kurve); }
.kasse-ansehen[aria-expanded='true'] .kasse-ansehen-wort .sym:last-child { transform: rotate(180deg); }
.kasse-ansehen-betrag b { font-size: 17px; font-weight: 700; }
.kasse-uebersicht { display: grid; grid-template-rows: 1fr; min-width: 0; align-self: start; transition: grid-template-rows 260ms var(--kurve), opacity 200ms, margin-top 260ms var(--kurve); }
.kasse-uebersicht-innen { min-height: 0; overflow: hidden; }
@media (max-width: 899px) and (scripting: enabled) {
    .kasse-uebersicht:not(.offen) { grid-template-rows: 0fr; opacity: 0; visibility: hidden; margin-top: -14px; transition: grid-template-rows 260ms var(--kurve), opacity 200ms, margin-top 260ms var(--kurve), visibility 0s 260ms; }
}
@media (scripting: none) { .kasse-ansehen { display: none; } }
/* Die Zeilen in Kurzform über dem Knopf – nur am Handy (am Rechner steht die Bestellung daneben). */
.kasse-pruefen { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--flaeche); box-shadow: var(--schatten-fein); }
.pruefen-zeilen { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; color: var(--text); }
.pruefen-zeilen li { display: flex; justify-content: space-between; gap: 12px; }
.pruefen-zeilen .kz-preis { white-space: nowrap; }
.kasse-pruefen .kasse-summe { padding-top: 10px; border-top: 1px solid var(--linie); }
/* »Noch 3 Angaben« – still am Knopf, geht weich, sobald alles da ist. */
.kasse-noch { display: grid; grid-template-rows: 1fr; justify-items: center; margin: -2px 0 0; font-size: 14px; color: var(--neben); transition: grid-template-rows 220ms var(--kurve), opacity 200ms; }
.kasse-noch span { min-height: 0; overflow: hidden; }
.kasse-noch:has(span:empty) { grid-template-rows: 0fr; opacity: 0; }
/* Ein roter Satz, den kasse.js setzt, kommt weich. */
.feld-fehler { animation: einblenden 220ms var(--kurve); }
.kaestchen + .feld-fehler { margin: -4px 0 0 2px; }
@media (max-width: 899px) {
    .knopf-betrag-zeile { display: none; }
    .kasse-lieferzeit { font-size: 13px; line-height: 1.35; }
}
@media (min-width: 900px) {
    .kaufen.kasse { max-width: 1080px; }
    .kasse-form { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); grid-template-areas: 'angaben uebersicht'; align-items: start; column-gap: 32px; }
    .kasse-angaben { grid-area: angaben; }
    .kasse-uebersicht { grid-area: uebersicht; position: sticky; top: 20px; }
    .kasse-ansehen, .kasse-pruefen { display: none; }
    /* Viele Zeilen scrollen in der Spalte – die Summe bleibt im Bild. */
    .kasse-uebersicht .kasse-zeilen { max-height: calc(100vh - 240px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
    .kasse-knopf .knopf-haupt { justify-self: start; width: auto; min-width: 280px; }
    .kasse-lieferzeit, .knopf-betrag-zeile, .kasse-noch { justify-items: start; text-align: left; }
    .kasse-knopf > .still { text-align: left; }
}

/* ── Gutschein und Rabatt (gutscheine-plan.md): eine Zeile über der Summe, darunter still der Code oder »Gutschein einlösen« ── */
.korb-nachlass { display: grid; gap: 6px; }
.korb-nachlass-zeile, .kasse-nachlass { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; color: var(--tinte); }
.korb-nachlass-zeile small { color: var(--neben); font-size: 13px; }
.korb-nachlass-zeile b, .kasse-nachlass b { white-space: nowrap; }
.kasse-nachlass { margin: 10px 0 0; }
.kasse-gutschein { margin: 8px 0 0; font-size: 13px; }
.korb-gutschein-da { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; justify-self: start !important; font-size: 14px; color: var(--neben); }
.korb-gutschein-auf { justify-self: start; }
.korb-fuss .korb-gutschein-form { display: flex; gap: 8px; justify-self: stretch; max-width: 420px; padding-top: 4px; }
.korb-gutschein-form .eingabe { height: 44px; text-transform: uppercase; letter-spacing: 0.04em; }
.korb-gutschein-form .knopf { flex: none; }