/* Webseite schadenlotse.app — Systemschriften, Hell/Dunkel, keine Fremdquellen. */
:root {
  --pr: #1B4F8A; --pr-2: #153F6F; --pr-hell: #E8F0FA; --auf-pr: #FFFFFF;
  --hg: #F6F7F9; --fl: #FFFFFF; --fl-2: #EEF1F5; --tx: #16191D; --tx2: #4B525B; --rand: #D9DDE3;
  --ok: #1F7A4D; --warn-hg: #FFF4D6; --warn-tx: #6B4E00; --warn-rand: #E8C766; --rot: #B3261E;
  --schatten: 0 1px 2px rgb(16 24 40 / .06), 0 8px 24px rgb(16 24 40 / .08);
  --radius: 14px; --breite: 72rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --pr: #A6C8F0; --pr-2: #C7DCF6; --pr-hell: #1A2A3D; --auf-pr: #0E1B2B;
    --hg: #0F1216; --fl: #171B21; --fl-2: #1E232A; --tx: #E8EAED; --tx2: #A9B0B9; --rand: #2C323A;
    --ok: #6FD3A0; --warn-hg: #3A2F12; --warn-tx: #F3D891; --warn-rand: #6B5520; --rot: #F2B8B5;
    --schatten: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .35);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--hg); color: var(--tx);
  font: 17px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pr); text-underline-offset: .15em; }
a:hover { color: var(--pr-2); }
:focus-visible { outline: 3px solid var(--pr); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.uebersprung { position: absolute; left: -999px; top: 0; background: var(--fl); padding: .5rem 1rem; z-index: 10; }
.uebersprung:focus { left: 1rem; top: 1rem; }
.mitte { max-width: var(--breite); margin: 0 auto; padding: 0 1.25rem; }
.schmal { max-width: 46rem; }
.klein { font-size: .9rem; color: var(--tx2); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--hg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--rand); }
.kopf .mitte { display: flex; align-items: center; gap: 1.25rem; min-height: 4rem; }
.marke { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.15rem; color: var(--tx); text-decoration: none; white-space: nowrap; }
.marke img { width: 32px; height: 32px; border-radius: 8px; }
.nav { display: flex; gap: .25rem; margin-left: auto; align-items: center; overflow-x: auto; scrollbar-width: none; }
.nav a { color: var(--tx2); text-decoration: none; padding: .45rem .7rem; border-radius: 8px; white-space: nowrap; font-size: .97rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--tx); background: var(--fl-2); }
.nav a.knopf { color: var(--auf-pr); background: var(--pr); margin-left: .35rem; }
@media (max-width: 760px) {
  .kopf .mitte { flex-wrap: wrap; gap: 0; padding-top: .5rem; }
  .nav { margin: 0 -1.25rem; padding: .25rem 1rem .5rem; width: calc(100% + 2.5rem); }
  .nav a.knopf { margin-left: auto; }
}

/* Knöpfe */
.knopf, button.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .7rem 1.3rem;
  border-radius: 12px; border: 1px solid transparent; background: var(--pr); color: var(--auf-pr); font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.knopf:hover { background: var(--pr-2); color: var(--auf-pr); }
.knopf.zweit { background: transparent; color: var(--pr); border-color: var(--rand); }
.knopf.zweit:hover { background: var(--fl-2); color: var(--pr-2); }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* Abschnitte */
.abschnitt { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.abschnitt.flaeche { background: var(--fl); border-block: 1px solid var(--rand); }
.vorspann { font-size: 1.15rem; color: var(--tx2); max-width: 44rem; }
.marker { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pr); margin-bottom: .6rem; }

/* Hero */
.hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 6vw, 4rem); }
.hero .mitte { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.hero p.vorspann { font-size: 1.25rem; }
.hero .fakten { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .4rem; color: var(--tx2); }
.hero .fakten li::before { content: "✓"; color: var(--ok); font-weight: 700; margin-right: .5rem; }
.telefone { display: flex; justify-content: center; align-items: flex-start; gap: 1rem; }
.telefone .telefon:nth-child(2) { margin-top: 3rem; }
@media (max-width: 900px) {
  .hero .mitte { grid-template-columns: 1fr; }
  .telefone .telefon { width: 46%; }
}

.telefon { width: 250px; border: 9px solid #101318; border-radius: 40px; overflow: hidden; background: #101318; box-shadow: var(--schatten); flex: none; }
.telefon img { border-radius: 31px; }
.telefon.klein { width: 200px; border-width: 7px; border-radius: 32px; }
.telefon.klein img { border-radius: 25px; }

/* Raster und Karten */
.raster { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.raster-2 { display: grid; gap: 2.5rem; grid-template-columns: 1fr 1fr; align-items: center; }
@media (max-width: 860px) { .raster-2 { grid-template-columns: 1fr; } }
.karte { background: var(--fl); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.4rem; }
.flaeche .karte { background: var(--hg); }
.karte h3 { margin-bottom: .4rem; }
.karte p:last-child { margin-bottom: 0; }
.symbol { width: 44px; height: 44px; border-radius: 12px; background: var(--pr-hell); color: var(--pr); display: grid; place-items: center; font-size: 1.35rem; margin-bottom: .9rem; }
.hinweis-zeile { font-size: .88rem; color: var(--tx2); margin-top: .6rem; }

.funktion { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: center; padding: 2.5rem 0; border-top: 1px solid var(--rand); }
.funktion:first-of-type { border-top: 0; }
.funktion.umgekehrt { grid-template-columns: auto minmax(0, 1fr); }
.funktion.breit { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.funktion figure.hochkant { width: 260px; }
.funktion.umgekehrt .text { order: 2; }
.funktion ul { padding-left: 1.2rem; margin: 0; }
.funktion li { margin: .25rem 0; }
@media (max-width: 760px) {
  .funktion, .funktion.umgekehrt, .funktion.breit { grid-template-columns: 1fr; gap: 1.5rem; }
  .funktion figure.hochkant { margin: 0 auto; }
  .funktion.umgekehrt .text { order: 0; }
  .funktion .telefon { margin: 0 auto; }
}

.bild { border-radius: var(--radius); border: 1px solid var(--rand); box-shadow: var(--schatten); background: var(--fl); overflow: hidden; }
figure { margin: 0; }
figcaption { font-size: .9rem; color: var(--tx2); margin-top: .6rem; }

/* Ablauf */
.schritte { counter-reset: schritt; list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.schritte li { counter-increment: schritt; background: var(--fl); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.4rem; }
.schritte li::before { content: counter(schritt); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--pr); color: var(--auf-pr); font-weight: 700; margin-bottom: .8rem; }

/* Portal-Einblick */
.galerie { display: grid; gap: 1.5rem; grid-template-columns: 1.4fr 1fr; margin-top: 2rem; }
.galerie figure:first-child { grid-row: span 2; }
@media (max-width: 860px) { .galerie { grid-template-columns: 1fr; } .galerie figure:first-child { grid-row: auto; } }

/* Preise */
.umschalter { display: inline-flex; border: 1px solid var(--rand); border-radius: 999px; padding: 4px; background: var(--fl); margin: 1rem 0 2rem; }
.umschalter button { font: inherit; border: 0; background: transparent; color: var(--tx2); padding: .45rem 1.1rem; border-radius: 999px; cursor: pointer; min-height: 40px; }
.umschalter button[aria-pressed="true"] { background: var(--pr); color: var(--auf-pr); font-weight: 600; }
.pakete { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-items: stretch; }
.paket { display: flex; flex-direction: column; background: var(--fl); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.6rem; position: relative; }
.paket.empfohlen { border: 2px solid var(--pr); }
.paket .abzeichen { position: absolute; top: -.8rem; left: 1.4rem; background: var(--pr); color: var(--auf-pr); font-size: .78rem; font-weight: 700; padding: .2rem .7rem; border-radius: 999px; }
.paket .preis { font-size: 2.2rem; font-weight: 700; margin: .4rem 0 0; }
.paket .preis small { font-size: .95rem; font-weight: 400; color: var(--tx2); }
.paket ul { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: grid; gap: .35rem; }
.paket li::before { content: "✓"; color: var(--ok); font-weight: 700; margin-right: .5rem; }
.paket .knopf { margin-top: auto; }
[data-intervall="jahr"] .nur-monat, [data-intervall="monat"] .nur-jahr { display: none; }
.preis-hinweis { margin-top: 1.25rem; }

table { width: 100%; border-collapse: collapse; }
.tabelle { overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--fl); }
th, td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--rand); vertical-align: top; }
thead th { background: var(--fl-2); font-size: .92rem; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
td.ja { color: var(--ok); font-weight: 700; }
td.nein { color: var(--tx2); }

/* FAQ */
.faq details { background: var(--fl); border: 1px solid var(--rand); border-radius: 12px; padding: 0 1.2rem; margin-bottom: .75rem; }
.faq summary { cursor: pointer; font-weight: 600; padding: 1rem 0; list-style-position: outside; }
.faq details[open] summary { border-bottom: 1px solid var(--rand); margin-bottom: .8rem; }
.faq details p:last-child { margin-bottom: 1rem; }

/* CTA */
.cta { background: var(--pr); color: var(--auf-pr); border-radius: 20px; padding: clamp(2rem, 5vw, 3.5rem); display: grid; gap: 1.5rem; grid-template-columns: 1fr auto; align-items: center; }
.cta p { color: color-mix(in srgb, var(--auf-pr) 85%, transparent); margin: 0; }
.cta .knopf { background: var(--auf-pr); color: var(--pr); }
.cta .knopf.zweit { background: transparent; color: var(--auf-pr); border-color: color-mix(in srgb, var(--auf-pr) 50%, transparent); }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; } }

/* Formulare */
form .gruppe { border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.25rem 1.4rem 1.4rem; margin: 0 0 1.25rem; background: var(--fl); }
form legend { font-weight: 700; padding: 0 .4rem; }
.felder { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.felder .breit { grid-column: 1 / -1; }
@media (max-width: 640px) { .felder { grid-template-columns: 1fr; } }
.feld label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .3rem; }
.feld .hilfe { font-size: .85rem; color: var(--tx2); margin-top: .3rem; }
input[type="text"], input[type="email"], input[type="tel"], select {
  width: 100%; font: inherit; color: var(--tx); background: var(--hg); border: 1px solid var(--rand); border-radius: 10px; padding: .65rem .8rem; min-height: 48px;
}
input:focus, select:focus { outline: 2px solid var(--pr); outline-offset: 1px; }
input[aria-invalid="true"] { border-color: var(--rot); }
.feld .fehler-text { color: var(--rot); font-size: .88rem; margin-top: .3rem; }
.check { display: flex; gap: .7rem; align-items: flex-start; margin: .6rem 0; }
.check input { width: 22px; height: 22px; margin-top: .15rem; flex: none; accent-color: var(--pr); }
.wahl { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.wahl label { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--rand); border-radius: 12px; padding: .9rem 1rem; cursor: pointer; background: var(--hg); }
.wahl label:has(input:checked) { border-color: var(--pr); box-shadow: 0 0 0 1px var(--pr); }
.wahl input { accent-color: var(--pr); margin-top: .3rem; }
.wahl strong { display: block; }
.kurzname-status { font-size: .88rem; margin-top: .3rem; min-height: 1.3em; }
.kurzname-status.frei { color: var(--ok); }
.kurzname-status.belegt { color: var(--rot); }
.kauf { display: grid; gap: 2rem; grid-template-columns: 1fr 20rem; align-items: start; }
.kauf aside { position: sticky; top: 5.5rem; }
@media (max-width: 900px) { .kauf { grid-template-columns: 1fr; } .kauf aside { position: static; } }
.summe dl { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; margin: 0; }
.summe dt { color: var(--tx2); }
.summe dd { margin: 0; text-align: right; font-weight: 600; }

.meldung { border-radius: 12px; padding: 1rem 1.2rem; margin: 1rem 0; border: 1px solid var(--rand); background: var(--fl); }
.meldung.fehler { border-color: var(--rot); color: var(--rot); }
.meldung.warnung, .entwurf { background: var(--warn-hg); color: var(--warn-tx); border: 1px solid var(--warn-rand); border-radius: 12px; padding: 1rem 1.2rem; margin: 0 0 1.5rem; }
.demo-banner { background: repeating-linear-gradient(-45deg, #FFE08A, #FFE08A 14px, #FFD24D 14px, #FFD24D 28px); color: #3A2A00; text-align: center; font-weight: 800; letter-spacing: .04em; padding: .9rem 1rem; font-size: 1.1rem; border-bottom: 2px solid #C99A00; }
.link-kasten { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; background: var(--hg); border: 1px dashed var(--rand); border-radius: 12px; padding: .8rem 1rem; word-break: break-all; }
.link-kasten code { flex: 1 1 18rem; font-size: .9rem; }
.code-gross { white-space: nowrap; font: 600 1.5rem/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; }
.versteckt { display: none !important; }

/* Rechtstexte */
.recht h2 { font-size: 1.35rem; margin-top: 2rem; }
.recht h3 { font-size: 1.1rem; margin-top: 1.4rem; }
.recht address { font-style: normal; margin-bottom: 1em; }

/* Fuß */
.fuss { border-top: 1px solid var(--rand); background: var(--fl); padding: 2.5rem 0 2rem; margin-top: 3rem; font-size: .95rem; }
.fuss .mitte { display: grid; gap: 2rem; grid-template-columns: 2fr 1fr 1fr 1fr; }
.fuss h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tx2); margin-bottom: .6rem; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.fuss a { color: var(--tx); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss .unten { grid-column: 1 / -1; border-top: 1px solid var(--rand); padding-top: 1.25rem; color: var(--tx2); font-size: .85rem; }
@media (max-width: 760px) { .fuss .mitte { grid-template-columns: 1fr 1fr; } .fuss .mitte > div:first-child { grid-column: 1 / -1; } }

.fehlerseite { text-align: center; padding: 5rem 0; }

/* Hilfsklassen (keine Inline-Styles wegen CSP) */
.abstand-oben { margin-top: 2rem; }
.abstand-oben-gross { margin-top: 3rem; }
.abstand-oben-klein { margin-top: 1rem; }
.ohne-abstand { margin: 0; }
.zentriert { justify-content: center; }
.h-klein { font-size: 1.25rem; }