/*
 * therapie-os — Vertriebswebsite (v0.93.0)
 *
 * Eigenständiges Stylesheet für den Vertriebsmodus (therapie-os.com). Bewusst
 * ohne Abhängigkeit von website.css: Der Vertriebsmodus läuft ohne App-Boot und
 * ohne Datenbank, hier soll nichts mitgeschleppt werden, was Branding-Werte
 * einer Praxis erwartet.
 *
 * Die Farbwerte sind KEINE freie Wahl — sie stammen aus der kanonischen
 * Registry TherapieOS\Services\Site\CorporateDesign. Ein Guard-Test vergleicht
 * beides; wer hier eine Farbe ändert, muss sie dort ändern.
 *
 * (C) Jens Richter Agentur — Proprietary
 */

/* ── therapie-os Corporate Design (Quelle: Services\Site\CorporateDesign) ── */
:root {
  --tos-bg:          #faf8f4;
  --tos-surface:     #ffffff;
  --tos-surface-alt: #f1ece4;
  --tos-ink:         #21302e;
  --tos-ink-soft:    #4a5a57;
  --tos-muted:       #7c8a87;
  --tos-accent:      #2b7a78;
  --tos-accent-dark: #205c5a;
  --tos-accent-soft: #e3efee;
  --tos-line:        #e4ddd2;
  --tos-radius:      14px;
  --tos-radius-lg:   24px;
  --tos-font-body:   ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tos-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  --tv-maxw:       1120px;
  --tv-maxw-schmal: 720px;
}

* { box-sizing: border-box; }

body.tv {
  margin: 0;
  background: var(--tos-bg);
  color: var(--tos-ink);
  font-family: var(--tos-font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.tv-breite { width: 100%; max-width: var(--tv-maxw); margin: 0 auto; padding: 0 1.5rem; }

/* Textabschnitte behalten die Containerbreite (gleiche linke Kante wie alle
   anderen Abschnitte), begrenzt wird nur die ZEILENLÄNGE der Inhalte. Vorher
   war der schmale Container selbst zentriert — dadurch sprangen die
   Überschriften je Abschnitt nach rechts. */
.tv-schmal > * { max-width: var(--tv-maxw-schmal); }

.tv-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--tos-accent); color: #fff; padding: .6rem 1rem; z-index: 50;
}
.tv-skip:focus { left: 0; }

/* ── Kopf ───────────────────────────────────────────────────────────── */
.tv-kopf {
  background: var(--tos-surface);
  border-bottom: 1px solid var(--tos-line);
  position: sticky; top: 0; z-index: 20;
}
.tv-kopf__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 68px; flex-wrap: wrap;
}
.tv-marke {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--tos-accent); text-decoration: none;
}
.tv-marke__wort {
  font-family: var(--tos-font-display);
  font-size: 1.3rem; letter-spacing: .01em; color: var(--tos-ink);
}
.tv-nav { display: flex; flex-wrap: wrap; gap: .3rem; }
.tv-nav__link {
  color: var(--tos-ink-soft); text-decoration: none;
  padding: .45rem .8rem; border-radius: 999px; font-size: .96rem;
}
.tv-nav__link:hover { background: var(--tos-accent-soft); color: var(--tos-accent-dark); }
.tv-nav__link.is-aktiv { background: var(--tos-accent-soft); color: var(--tos-accent-dark); font-weight: 600; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.tv-hero {
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem);
  background:
    radial-gradient(120% 120% at 85% -10%, var(--tos-accent-soft) 0%, rgba(227,239,238,0) 55%),
    var(--tos-bg);
  border-bottom: 1px solid var(--tos-line);
}
.tv-kicker {
  margin: 0 0 .8rem; text-transform: uppercase; letter-spacing: .12em;
  font-size: .76rem; font-weight: 700; color: var(--tos-accent);
}
.tv-hero__titel {
  font-family: var(--tos-font-display);
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  line-height: 1.08; margin: 0 0 1.1rem; max-width: 16em;
}
.tv-hero__text { margin: 0; max-width: 40em; font-size: 1.12rem; color: var(--tos-ink-soft); }

.tv-aktionen { margin: 1.8rem 0 0; display: flex; flex-wrap: wrap; gap: .7rem; }
.tv-knopf {
  display: inline-block; text-decoration: none;
  background: var(--tos-accent); color: #fff;
  padding: .78rem 1.5rem; border-radius: 999px; font-weight: 600;
  border: 1px solid var(--tos-accent);
}
.tv-knopf:hover { background: var(--tos-accent-dark); border-color: var(--tos-accent-dark); }
.tv-knopf--leise { background: transparent; color: var(--tos-accent-dark); border-color: var(--tos-line); }
.tv-knopf--leise:hover { background: var(--tos-surface); border-color: var(--tos-accent); }

/* ── Abschnitte ─────────────────────────────────────────────────────── */
.tv-abschnitt { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.tv-abschnitt--flaeche { background: var(--tos-surface-alt); }
.tv-abschnitt h2 {
  font-family: var(--tos-font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.2; margin: 0 0 1rem;
}
.tv-abschnitt p { margin: 0 0 1rem; color: var(--tos-ink-soft); max-width: 44em; }

.tv-textlink { color: var(--tos-accent-dark); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--tos-accent-soft); }
.tv-textlink:hover { border-bottom-color: var(--tos-accent); }

.tv-raster {
  display: grid; gap: 1rem; margin-top: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.tv-karte {
  background: var(--tos-surface); border: 1px solid var(--tos-line);
  border-radius: var(--tos-radius); padding: 1.3rem 1.4rem;
}
.tv-karte h3 { margin: 0 0 .5rem; font-size: 1.06rem; }
.tv-karte p { margin: 0; font-size: .96rem; color: var(--tos-ink-soft); }

.tv-liste { margin: 1.2rem 0 0; padding: 0; list-style: none; }
.tv-liste li {
  position: relative; padding: .55rem 0 .55rem 1.7rem;
  border-bottom: 1px solid var(--tos-line); color: var(--tos-ink-soft);
}
.tv-liste li:last-child { border-bottom: 0; }
.tv-liste li::before {
  content: ""; position: absolute; left: .25rem; top: 1.15rem;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--tos-accent);
}

.tv-fahrplan { margin: 1.4rem 0 0; }
.tv-fahrplan dt { font-weight: 700; margin-top: 1.1rem; }
.tv-fahrplan dd { margin: .3rem 0 0; color: var(--tos-ink-soft); }

.tv-tabelle { width: 100%; border-collapse: collapse; margin-top: 1.2rem; background: var(--tos-surface); border-radius: var(--tos-radius); overflow: hidden; }
.tv-tabelle th, .tv-tabelle td { text-align: left; padding: .65rem .9rem; border-bottom: 1px solid var(--tos-line); font-size: .95rem; }
.tv-tabelle th { background: var(--tos-accent-soft); color: var(--tos-accent-dark); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.tv-tabelle tr:last-child td { border-bottom: 0; }
.tv-tabelle code { font-size: .92em; }

.tv-adresse { font-style: normal; color: var(--tos-ink-soft); margin-bottom: 1rem; }

.tv-recht h1 { font-family: var(--tos-font-display); font-size: clamp(1.9rem, 4vw, 2.5rem); margin: 0 0 1.4rem; }
.tv-recht h2 { font-size: 1.12rem; margin: 2rem 0 .5rem; }
/* Rechtstexte: Anschriftszeilen stehen als eigene Absätze — mit dem normalen
   Absatzabstand zerfällt die Adresse optisch. Enger setzen, Abstand macht die
   Überschrift. */
.tv-recht p { font-size: .98rem; margin: 0 0 .35rem; }
.tv-recht h2 + p { margin-top: .2rem; }

/* ── Fuß ────────────────────────────────────────────────────────────── */
.tv-fuss {
  background: var(--tos-ink); color: var(--tos-surface-alt);
  padding: 2.2rem 0; margin-top: 2rem;
}
.tv-fuss__inner { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.tv-fuss__marke { margin: 0; font-family: var(--tos-font-display); font-size: 1.05rem; }
.tv-fuss__nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.tv-fuss__nav a { color: var(--tos-surface-alt); text-decoration: none; font-size: .93rem; opacity: .85; }
.tv-fuss__nav a:hover { opacity: 1; text-decoration: underline; }
.tv-hinweis { margin-top: 1.4rem; font-size: .85rem; opacity: .75; }

@media (max-width: 640px) {
  .tv-kopf__inner { min-height: 0; padding-top: .7rem; padding-bottom: .7rem; }
  body.tv { font-size: 16px; }
}

/* v0.95 — Tarife & Checkout */
.tv-preise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}.tv-preis{position:relative;background:#fff;border:1px solid var(--tv-linie,#dce5e3);border-radius:24px;padding:30px;box-shadow:0 16px 45px rgba(15,40,35,.06);display:flex;flex-direction:column}.tv-preis.is-highlight{border-color:#087f73;box-shadow:0 24px 70px rgba(8,127,115,.16);transform:translateY(-8px)}.tv-preis__badge{position:absolute;right:22px;top:20px;padding:6px 10px;border-radius:999px;background:#e5f4f1;color:#065f57;font-size:12px;font-weight:800}.tv-preis h2{font-size:38px;margin:8px 0 6px}.tv-preis h2 small{font-size:14px;font-weight:600;color:#687774}.tv-preis__jahr{font-size:13px;color:#687774}.tv-preis .tv-liste{flex:1;margin-bottom:24px}.tv-buybox{background:#fff;border:1px solid var(--tv-linie,#dce5e3);border-radius:26px;padding:34px;box-shadow:0 18px 60px rgba(15,40,35,.08)}.tv-buygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0}.tv-buychoice{display:flex;flex-direction:column;gap:6px;text-decoration:none;border:1px solid #dce5e3;border-radius:16px;padding:20px;color:#17202a;background:#f8fbfa}.tv-buychoice:hover{border-color:#087f73;transform:translateY(-2px)}.tv-buychoice strong{font-size:18px}.tv-buychoice span{font-size:13px;color:#087f73;font-weight:700}.tv-hinweis{font-size:13px;color:#687774}@media(max-width:900px){.tv-preise,.tv-buygrid{grid-template-columns:1fr}.tv-preis.is-highlight{transform:none}}