/* Warenkorb, Kasse, Bestellbestätigung und Shop-Rechtsseiten (seit 15.10.2026).
 *
 * Aufbau nach dem Muster des In-Your-Corner-Shops: eine einzige Kassenseite,
 * oben die aufklappbare Bestellübersicht mit dem Betrag, darunter Express,
 * Kontakt, Lieferung, Versand, Zahlung und der Bestellknopf. Mobil zuerst
 * (360/390 px), ab 1000 px steht die Übersicht als Spalte rechts.
 * Farben und Schrift sind die der Website (Papier, Espresso, Gold).
 */

/* ---------------------------------------------------------- Kopf & Fuß */

.kasse-kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 243, 234, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.kasse-kopf-innen {
  width: min(1120px, 100% - 2rem);
  margin-inline: auto;
  min-height: 4rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.kasse-kopf .brand { font-size: 1.15rem; margin-right: auto; }
.kasse-kopf .brand .logo-mark { width: 42px; height: 19px; }
.kasse-sicher {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.kasse-sicher svg { width: 1rem; height: 1rem; color: var(--gold); }
.kasse-korb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.kasse-korb:hover { background: var(--paper-3); color: var(--gold); border-color: var(--gold); }
.kasse-korb svg { width: 1.2rem; height: 1.2rem; }

.kasse-fuss {
  border-top: 1px solid var(--line);
  padding: 1.6rem 1rem 2.4rem;
}
.kasse-fuss nav {
  width: min(1120px, 100%);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  font-size: 0.92rem;
}
.kasse-fuss a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kasse-fuss a:hover { color: var(--gold); }

/* ---------------------------------------------------------- Grundgerüst */

.kasse { padding-bottom: 2rem; }
.kasse-raster {
  width: min(1120px, 100% - 2rem);
  margin-inline: auto;
}
.kasse-form { padding-top: 1.4rem; min-width: 0; }
.kasse-inhalt { display: flex; flex-direction: column; gap: 2rem; }
.kasse-block { display: flex; flex-direction: column; gap: 0.75rem; }
.kasse-h2 {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.15rem;
}
.kasse-h2--mitte { text-align: center; font-size: 1rem; font-weight: 600; color: var(--ink-soft); }

.kasse-laedt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 0;
  color: var(--ink-soft);
  font-size: 1rem;
}
.kasse-spinner {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 2.5px solid var(--paper-3);
  border-top-color: var(--gold);
  animation: kasse-dreh 0.8s linear infinite;
  flex: none;
}
@keyframes kasse-dreh { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------- Bestellübersicht */

.kasse-zusammen-leiste {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.kasse-aufklapper {
  width: min(1120px, 100% - 2rem);
  margin-inline: auto;
  min-height: 3.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.kasse-aufklapper:hover { color: var(--gold); }
.kasse-chevron { width: 1.1rem; height: 1.1rem; transition: transform 0.2s var(--ease-out); flex: none; }
.kasse-aufklapper[aria-expanded="true"] .kasse-chevron { transform: rotate(180deg); }
.kasse-aufklapper-summe { margin-left: auto; font-size: 1.15rem; font-weight: 700; color: var(--ink); }

.kasse-seite {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s var(--ease-out);
  background: var(--paper-2);
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}
.kasse-seite.ist-offen { grid-template-rows: 1fr; border-bottom: 1px solid var(--line); }
.kasse-seite-innen { overflow: hidden; min-height: 0; }
.kasse-seite.ist-offen .kasse-seite-innen { padding: 1.2rem 0 1.4rem; }

.kasse-posten { display: flex; flex-direction: column; gap: 1rem; }
.kasse-posten li { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.kasse-bild {
  position: relative;
  flex: none;
  width: 3.6rem;
  height: 4.8rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kasse-bild img { width: 100%; height: 100%; object-fit: contain; border-radius: 7px; }
.kasse-menge {
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--ink-soft);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35rem;
  text-align: center;
}
.kasse-posten-text { min-width: 0; flex: 1; }
.kasse-posten-titel { display: block; font-weight: 600; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.kasse-posten-meta { display: block; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.35; }
.kasse-vorbestellt {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--gold-pale);
  color: #8a5d12;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}
.kasse-posten-preis { font-weight: 600; white-space: nowrap; }

.kasse-summen {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem 0;
  margin-top: 1.2rem;
  font-size: 0.98rem;
}
.kasse-summen dt { color: var(--ink-soft); }
.kasse-summen dd { text-align: right; font-weight: 500; padding-left: 1rem; }
.kasse-summen .gesamt { font-size: 1.15rem; font-weight: 700; color: var(--ink); padding-top: 0.5rem; border-top: 1px solid var(--line); margin-top: 0.3rem; }
.kasse-summen dd.gesamt { font-size: 1.3rem; }
.kasse-summen .steuer { grid-column: 1 / -1; text-align: right; font-size: 0.86rem; color: var(--ink-faint); margin-top: -0.3rem; }

.kasse-bearbeiten {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.kasse-bearbeiten:hover { color: var(--ink); }

/* ---------------------------------------------------------- Felder */

.feld { position: relative; min-width: 0; }
.feld input,
.feld textarea {
  width: 100%;
  min-height: 3.4rem;
  padding: 1.45rem 0.95rem 0.45rem;
  border: 1px solid #d9cfbe;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 16px; /* darunter zoomt iOS beim Tippen hinein */
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.feld textarea { min-height: 6rem; resize: vertical; line-height: 1.45; }
.feld label {
  position: absolute;
  left: 0.95rem;
  top: 1.05rem;
  font-size: 1rem;
  color: var(--ink-faint);
  pointer-events: none;
  transition: transform 0.15s var(--ease-out), font-size 0.15s, top 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 1.9rem);
}
.feld input:focus,
.feld textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(192, 138, 40, 0.18); }
.feld input:focus + label,
.feld input:not(:placeholder-shown) + label,
.feld textarea:focus + label,
.feld textarea:not(:placeholder-shown) + label {
  top: 0.45rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.feld.ist-fehler input { border-color: #c2412d; box-shadow: 0 0 0 3px rgba(194, 65, 45, 0.12); }
.feld-meldung { font-size: 0.86rem; color: #b3261e; margin-top: 0.3rem; }

.feld-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.feld-raster--plz { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); }
@media (max-width: 359px) {
  .feld-raster:not(.feld-raster--plz) { grid-template-columns: 1fr; }
}

/* Auswahl (Land): eigener Baustein statt des nativen Auswahlfelds */
.auswahl { position: relative; }
.auswahl-knopf {
  width: 100%;
  min-height: 3.4rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.5rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid #d9cfbe;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auswahl-knopf:hover { border-color: var(--ink-faint); }
.auswahl-knopf:focus-visible,
.auswahl.ist-offen .auswahl-knopf { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(192, 138, 40, 0.18); }
.auswahl-label { grid-column: 1; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.2; }
.auswahl-wert { grid-column: 1; font-size: 1rem; color: var(--ink); line-height: 1.35; }
.auswahl-knopf .kasse-chevron { grid-column: 2; grid-row: 1 / span 2; color: var(--ink-soft); }
.auswahl.ist-offen .kasse-chevron { transform: rotate(180deg); }
.auswahl-liste {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 0.35rem);
  max-height: 18rem;
  overflow-y: auto;
  padding: 0.35rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 40px -16px rgba(24, 20, 16, 0.35);
  animation: kasse-auf 0.16s var(--ease-out);
}
.auswahl-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
}
.auswahl-liste li:hover,
.auswahl-liste li.ist-markiert { background: #f4f4f5; }
.auswahl-liste li[aria-selected="true"] { font-weight: 600; }
.auswahl-liste li[aria-selected="true"]::after {
  content: "";
  width: 1rem;
  height: 1rem;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c08a28' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
@keyframes kasse-auf { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Häkchen als eigener Baustein */
.haken {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0.2rem 0;
}
.haken-box {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.05rem;
  border: 1.5px solid #c9bda8;
  border-radius: 6px;
  background: #fff;
  transition: background 0.15s, border-color 0.15s;
  display: grid;
  place-items: center;
}
.haken:hover .haken-box { border-color: var(--gold); }
.haken[aria-checked="true"] .haken-box {
  background: var(--gold) no-repeat center / 0.9rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  border-color: var(--gold);
}
.haken:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* ---------------------------------------------------------- Versand & Zahlung */

.kasse-versand { display: flex; flex-direction: column; gap: 0.6rem; }
.versandart {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.95rem 1rem;
  border: 1px solid #d9cfbe;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.versandart[aria-checked="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(192, 138, 40, 0.18); background: #fffdf8; }
.versandart-punkt {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 1.5px solid #c9bda8;
  display: grid;
  place-items: center;
}
.versandart[aria-checked="true"] .versandart-punkt { border-color: var(--gold); }
.versandart[aria-checked="true"] .versandart-punkt::after { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--gold); }
.versandart-text { flex: 1; min-width: 0; }
.versandart-name { font-weight: 600; display: block; }
.versandart-zeit { font-size: 0.9rem; color: var(--ink-soft); display: block; }
.versandart-preis { font-weight: 700; white-space: nowrap; }
.versand-hinweis {
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background: var(--gold-pale);
  color: #6f4b0e;
  font-size: 0.93rem;
  line-height: 1.45;
}
.versand-leer { padding: 0.9rem 1rem; border-radius: 12px; background: var(--paper-2); color: var(--ink-soft); font-size: 0.95rem; }

.kasse-zahlung {
  min-height: 5rem;
  padding: 0.25rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kasse-zahlung > .kasse-spinner { align-self: center; }
.kasse-rechnung { display: flex; flex-direction: column; gap: 0.75rem; animation: kasse-auf 0.2s var(--ease-out); }

.kasse-express { display: flex; flex-direction: column; gap: 0.75rem; }
.kasse-oder {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--ink-faint);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.kasse-oder::before,
.kasse-oder::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------------------------------------------------------- Abschluss */

.kasse-abschluss {
  padding: 1.2rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}
.kasse-posten--knapp li { gap: 0.7rem; }
.kasse-posten--knapp .kasse-bild { width: 2.8rem; height: 3.7rem; }
.kasse-summen--abschluss { margin-top: 0.9rem; }
.kasse-cta {
  width: 100%;
  min-height: 3.4rem;
  justify-content: center;
  font-size: 1.08rem;
  margin-top: 0.4rem;
  cursor: pointer;
}
.kasse-cta:hover { transform: none; }
.kasse-cta[disabled] { opacity: 0.6; cursor: progress; }
.kasse-recht { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; text-align: center; }
.kasse-recht a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.kasse-recht a:hover { color: var(--gold); }

.form-fehler {
  padding: 0.75rem 0.95rem;
  border-radius: 12px;
  border: 1px solid rgba(194, 65, 45, 0.35);
  background: #fdf1ee;
  color: #a5301f;
  font-size: 0.95rem;
  line-height: 1.45;
}
.form-ok {
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: var(--gold-pale);
  color: #5d3f0c;
  font-size: 1rem;
}

.kasse-schleier {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: rgba(248, 243, 234, 0.82);
  backdrop-filter: blur(3px);
  animation: kasse-ein 0.2s ease-out;
}
.kasse-schleier > div { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; font-weight: 600; font-size: 1.05rem; }
.kasse-schleier .kasse-spinner { width: 2.2rem; height: 2.2rem; border-width: 3px; }
@keyframes kasse-ein { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------- Desktop */

@media (min-width: 1000px) {
  .kasse-zusammen-leiste { display: none; }
  .kasse-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 3.5rem;
    align-items: start;
  }
  .kasse-form { grid-column: 1; grid-row: 1; padding-top: 2.4rem; max-width: 600px; justify-self: end; width: 100%; }
  .kasse-seite {
    grid-column: 2;
    grid-row: 1;
    grid-template-rows: 1fr;
    position: sticky;
    top: 5rem;
    margin: 2.4rem 0 0;
    padding: 0;
    background: transparent;
  }
  .kasse-seite-innen,
  .kasse-seite.ist-offen .kasse-seite-innen {
    padding: 1.5rem;
    border-radius: 16px;
    background: var(--paper-2);
    border: 1px solid var(--line);
  }
  .kasse-posten--knapp { display: none; }
  .kasse-abschluss { padding: 1.4rem; }
}

/* ---------------------------------------------------------- Warenkorb-Seite */

.warenkorb-seite { padding-top: clamp(6.5rem, 12vh, 9rem); }
.warenkorb-wrap { max-width: 1040px; }
.warenkorb-titel { margin-bottom: 1.6rem; }
.warenkorb-raster { display: flex; flex-direction: column; gap: 1.6rem; }
.warenkorb-posten { display: flex; flex-direction: column; }
.warenkorb-posten > li {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
.warenkorb-posten > li:first-child { border-top: 1px solid var(--line); }
.warenkorb-bild { width: 5.2rem; height: 7rem; border-radius: 8px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.warenkorb-bild img { width: 100%; height: 100%; object-fit: contain; border-radius: 7px; }
.warenkorb-text { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.warenkorb-titelzeile { display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline; }
.warenkorb-name { font-weight: 600; font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.warenkorb-name a:hover { color: var(--gold); }
.warenkorb-preis { font-weight: 700; white-space: nowrap; }
.warenkorb-stueck { font-size: 0.9rem; color: var(--ink-soft); }
.warenkorb-aktionen { display: flex; align-items: center; gap: 1rem; margin-top: 0.4rem; flex-wrap: wrap; }
.menge {
  display: inline-flex;
  align-items: center;
  height: 2.75rem;
  border: 1px solid #d9cfbe;
  border-radius: 999px;
  background: #fff;
}
.menge button { width: 2.6rem; height: 100%; font-size: 1.2rem; cursor: pointer; color: var(--ink); border-radius: 999px; transition: color 0.15s, background 0.15s; }
.menge button:hover { color: var(--gold); background: var(--paper-2); }
.menge span { min-width: 1.8rem; text-align: center; font-weight: 600; }
.warenkorb-entfernen { font-size: 0.92rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.warenkorb-entfernen:hover { color: #b3261e; }
.warenkorb-box {
  padding: 1.3rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.warenkorb-box .kasse-summen { margin-top: 0; margin-bottom: 0.4rem; }
.warenkorb-weiter { text-align: center; font-weight: 600; color: var(--ink-soft); padding: 0.4rem; cursor: pointer; }
.warenkorb-weiter:hover { color: var(--gold); }
.warenkorb-leer { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; font-size: 1.1rem; color: var(--ink-soft); padding: 1rem 0 2rem; }
.warenkorb-posten.ist-beschaeftigt { opacity: 0.6; pointer-events: none; transition: opacity 0.15s; }

@media (min-width: 900px) {
  .warenkorb-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 3rem; align-items: start; }
  .warenkorb-box { position: sticky; top: 6rem; }
}

/* ---------------------------------------------------------- Bestellbestätigung */

.bestellung-seite { padding-top: clamp(6.5rem, 12vh, 9rem); }
.bestellung-wrap { max-width: 960px; }
.bestellung-kopf { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin-bottom: 2.2rem; }
.bestellung-haken { width: 3.6rem; height: 3.6rem; color: var(--gold); animation: kasse-ein 0.4s ease-out; }
.bestellung-nr { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; color: var(--gold); }
.bestellung-kopf .lead { margin-inline: auto; }
.bestellung-raster { display: grid; gap: 1.2rem; }
.bestellung-karte { padding: 1.3rem; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06); }
.bestellung-karte .kasse-h2 { margin-bottom: 1rem; }
.bestellung-karte address { font-style: normal; line-height: 1.6; margin-top: 0.6rem; }
.bestellung-versand { margin-top: 1rem; font-size: 0.95rem; color: var(--ink-soft); }
.bestellung-aktionen { display: flex; justify-content: center; margin-top: 2rem; }
@media (min-width: 800px) { .bestellung-raster { grid-template-columns: 1.4fr 1fr; align-items: start; } }

/* ---------------------------------------------------------- Bewertung */

.bewerten-wrap { max-width: 640px; display: flex; flex-direction: column; gap: 1rem; }
.bewerten-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.6rem; }
.sterne-wahl { display: flex; gap: 0.2rem; }
.sterne-wahl button { font-size: 2.6rem; line-height: 1; color: #d8cfbe; cursor: pointer; padding: 0.1rem; transition: color 0.15s; }
.sterne-wahl button.ist-an { color: var(--gold); }
.sterne-wahl button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* ---------------------------------------------------------- Shop-Rechtsseiten */

.shop-recht section + section { margin-top: 0.6rem; }
.shop-recht ol { margin: 0 0 1.2rem 1.3rem; list-style: decimal; }
.shop-recht ol li { color: var(--ink-soft); margin-bottom: 0.7rem; }
.shop-recht address { font-style: normal; color: var(--ink-soft); line-height: 1.6; margin-bottom: 1rem; }
.shop-recht table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.shop-recht th { text-align: left; font-weight: 600; padding: 0.6rem 0.8rem 0.6rem 0; border-bottom: 1px solid var(--line); }
.shop-recht td { padding: 0.75rem 0.8rem 0.75rem 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: top; }
.recht-tabelle { overflow-x: auto; margin-bottom: 1.4rem; }
.recht-liste { list-style: none !important; margin: 0 0 1.4rem !important; }
.recht-liste li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.recht-liste li span:first-child { font-weight: 600; color: var(--ink); }
.recht-liste li span:last-child { text-align: right; }
.widerruf-form { display: flex; flex-direction: column; gap: 0.8rem; margin: 1rem 0 1.6rem; padding: 1.3rem; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.widerruf-form .feld-raster { grid-template-columns: 1fr; }
@media (min-width: 640px) { .widerruf-form .feld-raster { grid-template-columns: 1fr 1fr; } }
.legal-body .widerruf-form .kasse-cta { color: #fff; border: 0; }

/* hidden muss gewinnen, auch gegen display:flex/grid der Bausteine */
[hidden] { display: none !important; }