/* Public pages (landing, legal texts). Same tokens as the dashboard (src/styles/app.css)
   and today's legal pages on sentimonk.com. No inline styles: the CSP forbids them. */

:root {
  --bg: #f4faf9; --fg: #0a1a17; --kachel: #fff; --rand: #e2ebe9; --matt: #5b7772;
  --akzent: #0c9078; --akzent-fg: #ffffff; --akzent-matt: #e6f6f2;
  --stop-fg: #991b1b; --stop-bg: #fef2f2;
  --schatten: 0 10px 30px rgba(10, 26, 23, .08);
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1a17; --fg: #f1f7f5; --kachel: #12241f; --rand: #24403a; --matt: #9bb3ac;
    --akzent: #12b394; --akzent-fg: #052b23; --akzent-matt: #0f3b32;
    --stop-fg: #fca5a5; --stop-bg: #331013;
    --schatten: 0 10px 30px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font: 16px/1.6 var(--schrift); }
a { color: var(--akzent); }
img { max-width: 100%; }

.spalte { width: 100%; max-width: 48rem; margin: 0 auto; padding: 2rem 16px 3rem; }
.marke { font-weight: 800; font-size: 1.05rem; margin: 0 0 1.2rem; }
.marke a { color: var(--fg); text-decoration: none; }

/* ── Legal texts ─────────────────────────────────────────────── */
.recht { font-size: 15px; }
.doc { background: var(--kachel); border: 1px solid var(--rand); border-radius: 12px; padding: 1.2rem 1.35rem 1.5rem; overflow-wrap: break-word; }
.doc h1 { font-size: 1.5rem; margin: 0 0 1rem; }
.doc h2 { font-size: 1.1rem; margin: 1.9rem 0 .6rem; padding-bottom: .35rem; border-bottom: 1px solid var(--rand); }
.doc h3 { font-size: .98rem; margin: 1.4rem 0 .45rem; }
.doc h4 { font-size: .9rem; margin: 1.1rem 0 .35rem; color: var(--matt); }
.doc p { margin: 0 0 .85rem; }
.doc ul, .doc ol { margin: 0 0 .9rem 1.3rem; padding: 0; }
.doc li { margin-bottom: .35rem; }
.doc table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.doc th, .doc td { border: 1px solid var(--rand); padding: .4rem .5rem; text-align: left; vertical-align: top; }
.fehlt { color: var(--stop-fg); background: var(--stop-bg); border-radius: 4px; padding: 0 .25rem; }
.fuss-recht { margin-top: 1.4rem; font-size: .88rem; color: var(--matt); }
.fuss-recht nav { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.fuss-recht a[aria-current="page"] { color: var(--fg); font-weight: 600; text-decoration: none; }
.fuss-recht p { margin: .6rem 0 0; }

/* ── Landing ─────────────────────────────────────────────────── */
.breit { width: 100%; max-width: 68rem; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.schmal { max-width: 48rem; }
.klein { font-size: .88rem; color: var(--matt); }

.knopf { display: inline-block; font: inherit; font-weight: 600; padding: .75rem 1.15rem; border-radius: 10px; border: 1px solid var(--rand); background: var(--kachel); color: var(--fg); text-decoration: none; }
.knopf-haupt { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-fg); }
.knopf:hover { filter: brightness(1.05); }
.knopf:focus-visible, .kopfnav a:focus-visible, .frage summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.kopfleiste { border-bottom: 1px solid var(--rand); background: var(--kachel); }
.kopfleiste-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-top: .7rem; padding-bottom: .7rem; }
.logo { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.1rem; color: var(--fg); text-decoration: none; }
.kopfnav { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; font-size: .95rem; }
.kopfnav a { color: var(--fg); text-decoration: none; }
.kopfnav a:hover { color: var(--akzent); }

.held { padding-top: 4.5rem; padding-bottom: 3.5rem; text-align: center; }
.held h1 { font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1.15; margin: 0 auto 1rem; max-width: 46rem; letter-spacing: -.01em; }
.held h1 em { font-style: normal; color: var(--akzent); }
.held-text { font-size: 1.15rem; color: var(--matt); max-width: 40rem; margin: 0 auto 1.6rem; }
.held-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.held-klein { font-size: .9rem; color: var(--matt); margin: 1rem 0 0; }

.abschnitt { padding-top: 3rem; padding-bottom: 1rem; }
.abschnitt h2, .abschluss h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 1.4rem; text-align: center; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.kachel { background: var(--kachel); border: 1px solid var(--rand); border-radius: 14px; padding: 1.2rem 1.3rem; }
.kachel h3 { margin: 0 0 .45rem; font-size: 1.08rem; }
.kachel p { margin: 0; color: var(--matt); }

.gruender { display: grid; gap: 1rem; }
.gruender .kachel p { color: var(--fg); margin: 0 0 .8rem; }

.preise { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; max-width: 46rem; margin: 0 auto; }
.preis { display: flex; flex-direction: column; gap: .6rem; }
.preis-pro { border: 2px solid var(--akzent); box-shadow: var(--schatten); }
.preis-zahl { font-size: 1.6rem; font-weight: 800; color: var(--fg) !important; margin: 0 !important; }
.preis-zahl span { font-size: .95rem; font-weight: 500; color: var(--matt); }
.preis-offen { font-size: 1.2rem; color: var(--matt) !important; }
.preis ul { margin: .3rem 0 .4rem 1.1rem; padding: 0; }
.preis li { margin-bottom: .3rem; }
.preis .knopf { align-self: flex-start; margin-top: auto; }
#preise .klein { text-align: center; }

.frage { background: var(--kachel); border: 1px solid var(--rand); border-radius: 12px; padding: .2rem 1.1rem; margin-bottom: .6rem; }
.frage summary { cursor: pointer; font-weight: 600; padding: .75rem 0; }
.frage p { margin: 0 0 .9rem; color: var(--matt); }

.abschluss { text-align: center; padding-top: 3rem; padding-bottom: 3rem; }
.fuss { border-top: 1px solid var(--rand); padding-top: 1.4rem; padding-bottom: 2rem; font-size: .88rem; color: var(--matt); }
.fuss nav { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.fuss p { margin: .7rem 0 0; }