/*
 * Steuer-OS 5.32.0 — Fachblöcke für den Website-Baustein (Kontaktformular, Leitspruch, Preistabelle, Stimmen)
 * und Produktseiten im Rahmen der Website. Nur --cms-*-Variablen des Bausteins; Farben kommen aus „Aussehen“.
 * Schreibschrift: Dancing Script (SIL Open Font License, public/fonts/LIZENZ-dancing-script-OFL.txt), lokal.
 */
@font-face { font-family: "Dancing Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dancing-script-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Dancing Script"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/dancing-script-latin-600-normal.woff2") format("woff2"); }

.sos-cms-zentriert { text-align: center; }
.sos-cms-zentriert .cms-lead { margin-inline: auto; max-width: 46rem; }

/* ── Leitspruch ─────────────────────────────────────────────── */
.sos-cms-leitspruch { padding-block: calc(var(--cms-section) * .35); }
.sos-cms-leitspruch__text {
  margin: 0; font-family: "Dancing Script", "Segoe Script", "Brush Script MT", cursive; font-weight: 600;
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); line-height: 1.2; transform: rotate(-2deg);
}
.sos-cms-leitspruch--gross .sos-cms-leitspruch__text { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.6rem); }
.sos-cms-leitspruch--mitte { text-align: center; }
.sos-cms-leitspruch--rechts { text-align: right; }
.sos-cms-leitspruch--haupt .sos-cms-leitspruch__text { color: var(--cms-primary-text, var(--cms-primary)); }
.sos-cms-leitspruch--akzent .sos-cms-leitspruch__text { color: var(--cms-secondary-text, var(--cms-secondary)); }
.sos-cms-leitspruch--text .sos-cms-leitspruch__text { color: var(--cms-text); }

/* ── Kontaktformular ───────────────────────────────────────── */
.sos-cms-kontakt__form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.sos-cms-kontakt__reihe { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .sos-cms-kontakt__reihe { grid-template-columns: 1fr 1fr; } }
.sos-cms-kontakt__feld { display: grid; gap: .35rem; }
.sos-cms-kontakt__feld label { font-weight: 600; font-size: .92rem; color: var(--cms-text); }
.sos-cms-kontakt__feld input, .sos-cms-kontakt__feld select, .sos-cms-kontakt__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); padding: .7rem .85rem;
}
.sos-cms-kontakt__feld textarea { min-height: 9rem; resize: vertical; }
.sos-cms-kontakt__feld input:focus-visible, .sos-cms-kontakt__feld select:focus-visible, .sos-cms-kontakt__feld textarea:focus-visible,
.sos-cms-kontakt__zustimmung input:focus-visible { outline: 3px solid var(--cms-focus, var(--cms-primary)); outline-offset: 2px; }
.sos-cms-kontakt__zustimmung { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: var(--cms-text-soft, var(--cms-text)); }
.sos-cms-kontakt__zustimmung input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; flex: none; }
.sos-cms-kontakt__zustimmung a { color: var(--cms-primary-text, var(--cms-primary)); }
.sos-cms-kontakt__form .cms-btn { justify-self: start; }
.sos-cms-kontakt__falle { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sos-cms-kontakt__meldung { margin: 1.25rem 0 0; padding: .9rem 1.1rem; border-radius: var(--cms-radius-sm); font-weight: 500; }
.sos-cms-kontakt__meldung--ok { background: var(--cms-primary-soft); color: var(--cms-primary-soft-text, var(--cms-text)); }
.sos-cms-kontakt__meldung--fehler { background: var(--cms-fehler-bg, #fdecec); color: var(--cms-fehler, #a4161a); }

/* ── Preistabelle ──────────────────────────────────────────── */
.sos-cms-preise__raster { display: grid; gap: var(--cms-gap, 1.5rem); grid-template-columns: 1fr; margin-top: 2rem; align-items: stretch; }
@media (min-width: 720px) { .sos-cms-preise__raster--2, .sos-cms-preise__raster--3, .sos-cms-preise__raster--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sos-cms-preise__raster--3 { grid-template-columns: repeat(3, 1fr); } .sos-cms-preise__raster--4 { grid-template-columns: repeat(4, 1fr); } }
.sos-cms-paket {
  display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem 1.5rem; border-radius: var(--cms-radius-lg, var(--cms-radius));
  background: var(--cms-karte-bg, var(--cms-surface, #fff)); border: 1px solid var(--cms-karte-rahmen, var(--cms-border)); box-shadow: var(--cms-karte-schatten, none);
}
.sos-cms-paket--hervor { border: 2px solid var(--cms-primary); box-shadow: var(--cms-shadow-md); }
.sos-cms-paket__name { margin: 0; font-family: var(--cms-font-display); font-size: 1.25rem; }
.sos-cms-paket__preis { margin: 0; font-size: 1.7rem; font-weight: 700; color: var(--cms-primary-text, var(--cms-primary)); }
.sos-cms-paket__preis span { font-size: .9rem; font-weight: 500; color: var(--cms-text-mute); }
.sos-cms-paket__text { margin: 0; color: var(--cms-text-soft, var(--cms-text)); }
.sos-cms-paket__liste { margin: .25rem 0 0; padding: 0; list-style: none; display: grid; gap: .45rem; flex: 1; }
.sos-cms-paket__liste li { padding-left: 1.5rem; position: relative; }
.sos-cms-paket__liste li::before { content: ""; position: absolute; left: .15rem; top: .45rem; width: .55rem; height: .3rem; border-left: 2px solid var(--cms-primary); border-bottom: 2px solid var(--cms-primary); transform: rotate(-45deg); }
.sos-cms-paket .cms-btn { align-self: flex-start; margin-top: .5rem; }
.sos-cms-preise__hinweis { margin: 1.25rem 0 0; font-size: .88rem; color: var(--cms-text-mute); text-align: center; }

/* ── Stimmen ───────────────────────────────────────────────── */
.sos-cms-stimmen__raster { display: grid; gap: var(--cms-gap, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); margin-top: 2rem; }
.sos-cms-stimme { margin: 0; padding: 1.5rem; border-radius: var(--cms-radius); background: var(--cms-bg-creme, var(--cms-surface)); border-left: 4px solid var(--cms-primary); }
.sos-cms-stimme blockquote { margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.6; }
.sos-cms-stimme figcaption { display: grid; gap: .15rem; font-size: .9rem; }
.sos-cms-stimme figcaption span { color: var(--cms-text-mute); }

/* ── Produktseiten im Rahmen (Passwort vergessen/zurücksetzen) ─ */
.sos-cms-produktseite { padding-block: 2rem; }
.sos-cms-produktseite .sos-container { max-width: var(--cms-container-narrow, 46rem); }
