/*
 * Steuer-OS 5.33.0 — Shop im Rahmen der Website. Nur --cms-*-Variablen des Website-Bausteins:
 * Farben, Schrift und Rundungen kommen aus „Aussehen“ der Kanzlei-Website.
 */
.sos-shop__bereich { padding-block: calc(var(--cms-section, 4rem) * .5) var(--cms-section, 4rem); }
.sos-shop__leiste { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; font-size: .92rem; }
.sos-shop__pfad { display: flex; gap: .5rem; align-items: center; color: var(--cms-text-mute); min-width: 0; }
.sos-shop__pfad a { color: var(--cms-primary-text, var(--cms-primary)); text-decoration: none; }
.sos-shop__pfad a:hover { text-decoration: underline; }
.sos-shop__pfad span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sos-shop__korb { display: inline-flex; gap: .45rem; align-items: center; color: var(--cms-text); text-decoration: none; font-weight: 600; padding: .45rem .9rem; border: 1px solid var(--cms-border); border-radius: var(--cms-pill, 999px); background: var(--cms-surface, #fff); }
.sos-shop__korb:hover { border-color: var(--cms-primary); }
.sos-shop__korb svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sos-shop__zahl { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: var(--cms-primary); color: var(--cms-on-primary, #fff); font-size: .78rem; }

.sos-shop__meldung { margin: 0 0 1.25rem; padding: .85rem 1.1rem; border-radius: var(--cms-radius-sm, 6px); border: 1px solid var(--cms-border); background: var(--cms-surface, #fff); }
.sos-shop__meldung--success { background: var(--cms-primary-soft); color: var(--cms-primary-soft-text, var(--cms-text)); border-color: transparent; }
.sos-shop__meldung--error { background: var(--cms-fehler-bg, #fdecec); color: var(--cms-fehler, #a4161a); border-color: transparent; }
.sos-shop__meldung--warning { background: #fff6e0; color: #6b4a00; border-color: #f0dca8; }
.sos-shop__meldung .sos-shop__inline { display: inline-block; margin-left: .75rem; }

.sos-shop__titel { margin-bottom: 2rem; }
.sos-shop__titel .cms-lead { max-width: 48rem; margin-inline: 0; text-align: left; }
.sos-shop__filter { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.sos-shop__reiter { display: flex; flex-wrap: wrap; gap: .5rem; }
.sos-shop__reiter a { padding: .45rem 1rem; border-radius: var(--cms-pill, 999px); border: 1px solid var(--cms-border); color: var(--cms-text); text-decoration: none; font-size: .92rem; }
.sos-shop__reiter a:hover { border-color: var(--cms-primary); }
.sos-shop__reiter a.ist-aktiv { background: var(--cms-primary); border-color: var(--cms-primary); color: var(--cms-on-primary, #fff); }
.sos-shop__kat { display: flex; gap: .6rem; align-items: center; font-size: .92rem; }
.sos-shop__kat select { font: inherit; padding: .45rem .7rem; border: 1px solid var(--cms-border); border-radius: var(--cms-radius-sm, 6px); background: var(--cms-surface, #fff); color: var(--cms-text); }
.sos-shop__leer { color: var(--cms-text-mute); }

.sos-shop__raster { display: grid; gap: var(--cms-gap, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 640px) { .sos-shop__raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sos-shop__raster { grid-template-columns: repeat(3, 1fr); } }
.sos-shop-karte { border: 1px solid var(--cms-karte-rahmen, var(--cms-border)); border-radius: var(--cms-radius-lg, var(--cms-radius)); background: var(--cms-karte-bg, var(--cms-surface, #fff)); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.sos-shop-karte:hover { box-shadow: var(--cms-shadow-md); transform: translateY(-2px); }
.sos-shop-karte__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.sos-shop-karte__link:focus-visible { outline: 3px solid var(--cms-focus, var(--cms-primary)); outline-offset: -3px; }
.sos-shop-karte__bild { aspect-ratio: 4 / 3; background: var(--cms-bg-sand, #f4f1ea); display: grid; place-items: center; overflow: hidden; }
.sos-shop-karte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sos-shop-karte__bild--leer span { font-family: var(--cms-font-display); font-size: 3.2rem; color: var(--cms-primary-text, var(--cms-primary)); opacity: .55; }
.sos-shop-karte__text { display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem 1.25rem 1.35rem; flex: 1; }
.sos-shop-karte__art { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--cms-text-mute); }
.sos-shop-karte__titel { margin: 0; font-family: var(--cms-font-display); font-weight: var(--cms-weight-display, 600); font-size: 1.2rem; line-height: 1.3; color: var(--cms-text); }
.sos-shop-karte__kurz { margin: 0; color: var(--cms-text-soft, var(--cms-text)); font-size: .95rem; flex: 1; }
.sos-shop-karte__preis { margin: .4rem 0 0; font-weight: 700; color: var(--cms-primary-text, var(--cms-primary)); }

.sos-shop-artikel { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .sos-shop-artikel { grid-template-columns: 1.1fr 1fr; gap: 3rem; } }
.sos-shop-artikel__bild { border-radius: var(--cms-radius-lg, var(--cms-radius)); overflow: hidden; background: var(--cms-bg-sand, #f4f1ea); aspect-ratio: 4 / 3; display: grid; place-items: center; }
.sos-shop-artikel__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sos-shop-artikel__bild.sos-shop-karte__bild--leer span { font-family: var(--cms-font-display); font-size: 5rem; color: var(--cms-primary-text, var(--cms-primary)); opacity: .5; }
.sos-shop-artikel__kauf .cms-h2 { margin: .35rem 0 .75rem; }
.sos-shop-artikel__preis { margin: 1rem 0 .2rem; font-size: 1.8rem; font-weight: 700; color: var(--cms-primary-text, var(--cms-primary)); }
.sos-shop-artikel__ust { margin: 0 0 1.25rem; font-size: .88rem; color: var(--cms-text-mute); }
.sos-shop-artikel__form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: .75rem; }
.sos-shop-artikel__beschreibung { margin-top: 2.5rem; max-width: 52rem; }
.sos-shop-artikel__vereinbarung { margin-top: 1.5rem; max-width: 52rem; border: 1px solid var(--cms-border); border-radius: var(--cms-radius, 8px); padding: .9rem 1.2rem; background: var(--cms-surface, #fff); }
.sos-shop-artikel__vereinbarung summary { cursor: pointer; font-weight: 600; }
.sos-shop-artikel__vereinbarung .cms-prose { margin-top: .9rem; }

.sos-shop__menge { display: grid; gap: .3rem; font-size: .85rem; font-weight: 600; }
.sos-shop__menge input, .sos-shop__menge-feld { width: 5rem; font: inherit; padding: .55rem .6rem; border: 1px solid var(--cms-border-stark, var(--cms-border)); border-radius: var(--cms-radius-sm, 6px); background: var(--cms-surface, #fff); color: var(--cms-text); }
.sos-shop__klein { font-size: .88rem; color: var(--cms-text-mute); }
.sos-shop__klein a, .sos-shop__zustimmung a { color: var(--cms-primary-text, var(--cms-primary)); }
.sos-shop__hinweis { font-weight: 600; color: var(--cms-fehler, #a4161a); }

/* Formulare */
.sos-shop-anfrage { margin-top: 3rem; max-width: 52rem; padding: 2rem; border-radius: var(--cms-radius-lg, var(--cms-radius)); background: var(--cms-bg-creme, var(--cms-surface, #fff)); border: 1px solid var(--cms-border); scroll-margin-top: 6rem; }
.sos-shop-anfrage .cms-h3 { margin-top: 0; }
.sos-shop__formular, .sos-shop-kasse__daten { display: grid; gap: 1rem; }
.sos-shop__gruppe { border: 0; margin: 0; padding: 0; display: grid; gap: 1rem; }
.sos-shop__gruppe legend, .sos-shop__gruppe summary { font-weight: 700; font-size: 1.05rem; margin-bottom: .5rem; color: var(--cms-text); }
details.sos-shop__gruppe summary { cursor: pointer; }
.sos-shop__reihe { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .sos-shop__reihe { grid-template-columns: 1fr 1fr; } .sos-shop__reihe--3 { grid-template-columns: 1fr 1.4fr 1.4fr; } .sos-shop__reihe--anschrift { grid-template-columns: 2fr 1fr 1.6fr; } }
.sos-shop__feld { display: grid; gap: .35rem; min-width: 0; }
.sos-shop__feld > span { font-weight: 600; font-size: .9rem; color: var(--cms-text); }
.sos-shop__feld input, .sos-shop__feld select, .sos-shop__feld textarea { font: inherit; color: var(--cms-text); background: var(--cms-surface, #fff); width: 100%; box-sizing: border-box; border: 1px solid var(--cms-border-stark, var(--cms-border)); border-radius: var(--cms-radius-sm, 6px); padding: .65rem .8rem; }
.sos-shop__feld input:focus-visible, .sos-shop__feld select:focus-visible, .sos-shop__feld textarea:focus-visible, .sos-shop__zustimmung input:focus-visible, .sos-shop__zahlart input:focus-visible, .sos-shop__menge-feld:focus-visible { outline: 3px solid var(--cms-focus, var(--cms-primary)); outline-offset: 2px; }
.sos-shop__zustimmung, .sos-shop__zahlart { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--cms-text-soft, var(--cms-text)); }
.sos-shop__zustimmung input, .sos-shop__zahlart input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; flex: none; }
.sos-shop__zahlart { padding: .7rem .9rem; border: 1px solid var(--cms-border); border-radius: var(--cms-radius-sm, 6px); background: var(--cms-surface, #fff); font-weight: 600; color: var(--cms-text); }
.sos-shop__falle, .sos-shop__standard { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sos-shop__formular .cms-btn { justify-self: start; }

/* Kasse */
.sos-shop-kasse { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .sos-shop-kasse { grid-template-columns: 1.3fr 1fr; } .sos-shop-kasse__summe { position: sticky; top: 6rem; } }
.sos-shop-kasse__summe { display: grid; gap: 1rem; padding: 1.5rem; border-radius: var(--cms-radius-lg, var(--cms-radius)); border: 1px solid var(--cms-border); background: var(--cms-bg-creme, var(--cms-surface, #fff)); }
.sos-shop-kasse__summe .cms-h3 { margin: 0; }
.sos-shop__bestellen { width: 100%; justify-content: center; }

/* Positionen */
.sos-shop-tabelle { display: grid; gap: 0; margin: 1rem 0 1.5rem; }
.sos-shop-tabelle__kopf, .sos-shop-tabelle__zeile, .sos-shop-tabelle__summe { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem 1rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--cms-border-soft, var(--cms-border)); }
.sos-shop-tabelle__kopf { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cms-text-mute); padding-top: 0; }
.sos-shop-tabelle__titel { display: grid; gap: .15rem; min-width: 0; }
.sos-shop-tabelle__titel small { color: var(--cms-text-mute); font-size: .82rem; }
.sos-shop-tabelle__zeile [data-l="Menge"] { display: flex; gap: .6rem; align-items: center; }
.sos-shop-tabelle__zeile--neben { color: var(--cms-text-soft, var(--cms-text)); font-size: .95rem; }
.sos-shop-tabelle__summe { font-weight: 700; font-size: 1.1rem; border-bottom: 0; }
.sos-shop-tabelle__ust { font-size: .82rem; color: var(--cms-text-mute); }
.sos-shop-rechts { text-align: right; white-space: nowrap; }
.sos-shop__entfernen { font: inherit; font-size: .82rem; background: none; border: 0; padding: .2rem; color: var(--cms-text-mute); text-decoration: underline; cursor: pointer; }
.sos-shop__entfernen:hover { color: var(--cms-fehler, #a4161a); }
.sos-shop__aktionen { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; align-items: center; }
.sos-shop__aktionen .cms-btn--minimal { margin-right: auto; }
.sos-shop__status { display: inline-block; padding: .35rem .9rem; border-radius: 999px; background: var(--cms-primary-soft); color: var(--cms-primary-soft-text, var(--cms-text)); font-weight: 600; font-size: .9rem; }
.sos-shop__status--zahlung_offen, .sos-shop__status--abgebrochen, .sos-shop__status--storniert { background: #fff6e0; color: #6b4a00; }

@media (max-width: 560px) {
  .sos-shop-tabelle__kopf { display: none; }
  .sos-shop-tabelle__zeile { grid-template-columns: 1fr auto; }
  .sos-shop-tabelle__zeile .sos-shop-tabelle__titel { grid-column: 1 / -1; }
  .sos-shop-tabelle__summe { grid-template-columns: 1fr auto; }
  .sos-shop-tabelle__summe > span:nth-child(2) { display: none; }
  .sos-shop__aktionen { justify-content: stretch; }
  .sos-shop__aktionen .cms-btn { flex: 1 1 auto; justify-content: center; }
  .sos-shop-anfrage { padding: 1.25rem; }
}

/* Block „Shop-Artikel“ auf beliebigen Seiten */
.sos-cms-shop .sos-shop__raster { margin-top: 2rem; }
.sos-cms-shop__mehr { margin-top: 2rem; text-align: center; }