/* ============================================================================
   Versicherungsrecht — Stil

   SCHRIFT: EB Garamond für Überschriften, Inter für den Fließtext. Beide
   OFL-lizenziert, selbst gehostet, auf Latin subsettet — zusammen 132 KB.

   Selbst gehostet ist keine Bequemlichkeitsfrage: Eine Schrift von einem
   fremden Server überträgt die IP-Adresse des Besuchers dorthin. Für eine
   Seite, auf der Menschen ein Rechtsproblem schildern, ist das die falsche
   Voreinstellung — und es macht ein Einwilligungsbanner nötig, das vor dem
   Formular steht und Besucher kostet.

   EB Garamond ist eine Renaissance-Antiqua nach Claude Garamond. Sie sieht aus
   wie gedruckte Rechtsliteratur, ohne altbacken zu wirken. Inter darunter
   sorgt dafür, dass Formulare und Zahlen modern und klar bleiben.

   FARBE: Terrakotta auf warmem Papierweiß. Bewusst weit weg vom dunklen
   Türkis des Arbeitsrechts-Funnels — beide Angebote sollen sich nicht wie
   dieselbe Seite anfühlen.
   ============================================================================ */

@font-face{
  font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('/schrift/ebgaramond-400.woff2') format('woff2');
}
@font-face{
  font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('/schrift/ebgaramond-400i.woff2') format('woff2');
}
@font-face{
  font-family:'InterLP';font-style:normal;font-weight:400;font-display:swap;
  src:url('/schrift/inter-400.woff2') format('woff2');
}
@font-face{
  font-family:'InterLP';font-style:normal;font-weight:500;font-display:swap;
  src:url('/schrift/inter-500.woff2') format('woff2');
}
@font-face{
  font-family:'InterLP';font-style:normal;font-weight:600;font-display:swap;
  src:url('/schrift/inter-600.woff2') format('woff2');
}

:root{
  --pap:   #fcf9f5;
  --pap2:  #f5eee5;
  --pap3:  #e8dbcc;
  --tinte: #1f1712;
  --tinte2:#584739;
  --mut:   #8b7767;

  --acc:   #b03f11;
  --acc2:  #8a2f08;
  --accW:  #fdf1ea;
  --gold:  #9a6114;
  --gruen: #17693b;
  --gruenW:#ecf5ef;
  --warn:  #a8551a;
  --warnW: #fdf4e9;

  /* Nur Regular und Kursiv — siehe Kommentar oben. Kein synthetisches Fett:
     font-synthesis:none verhindert, dass der Browser eines errechnet. */
  --serif:   'EB Garamond',Georgia,'Iowan Old Style','Palatino Linotype',serif;
  --schrift: 'InterLP',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--schrift);
  background:var(--pap);
  color:var(--tinte);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'kern' 1,'liga' 1;
  font-synthesis:none;
}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}

/* Zahlen in Tabellenziffern — sonst springen die Spalten beim Rechnen. */
.num,.resGrid .v,table.vgl td,.result .lbl{font-variant-numeric:tabular-nums}

/* ── Kopf ─────────────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:50;background:rgba(252,249,245,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--pap3)}
header .wrap{display:flex;align-items:center;justify-content:space-between;padding:15px 24px;gap:16px}
.logo{font-family:var(--serif);font-weight:400;font-size:1.12rem;color:var(--tinte);text-decoration:none;letter-spacing:.01em}
.logo span{color:var(--acc)}
.logo .fb{display:block;font-family:var(--schrift);font-size:.68rem;font-weight:500;color:var(--mut);letter-spacing:.09em;text-transform:uppercase;margin-top:1px}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--acc);color:#fff;
  font-family:var(--schrift);font-weight:600;font-size:1rem;
  padding:15px 28px;border:none;border-radius:3px;
  cursor:pointer;text-decoration:none;
  transition:background .14s,box-shadow .14s;
  box-shadow:0 1px 2px rgba(31,23,18,.14);
}
.btn:hover{background:var(--acc2);box-shadow:0 3px 10px rgba(138,47,8,.22)}
.btn.small{padding:10px 18px;font-size:.92rem}
.btn.block{width:100%;justify-content:center}
.btn.ghost{background:none;color:var(--acc);border:1.5px solid var(--acc);box-shadow:none}
.btn.ghost:hover{background:var(--accW);box-shadow:none}
.btn svg{width:17px;height:17px;flex:none}

/* ── Kopfbereich ──────────────────────────────────────────────────────── */
.hero{padding:60px 0 52px}
.hero h1{
  font-family:var(--serif);
  font-size:clamp(2.1rem,4.9vw,3.4rem);
  line-height:1.14;font-weight:400;letter-spacing:-.005em;
  max-width:20ch;
}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero .sub{margin:22px 0 0;font-size:1.16rem;color:var(--tinte2);max-width:60ch}

/* Vertrauenszeilen mit Häkchen-Icon */
.zeilen{
  display:flex;flex-wrap:wrap;gap:0;margin-top:32px;
  border-top:1px solid var(--pap3);border-bottom:1px solid var(--pap3);
}
.zeilen div{
  flex:1 1 230px;padding:17px 22px 17px 0;
  font-size:.96rem;color:var(--tinte2);
  display:flex;align-items:center;gap:11px;
}
.zeilen div + div{border-left:1px solid var(--pap3);padding-left:22px}
.zeilen svg{width:19px;height:19px;flex:none;color:var(--acc)}

/* ── Kanzleiblock ─────────────────────────────────────────────────────── */
.kanzlei{
  background:var(--pap2);border:1px solid var(--pap3);border-radius:4px;
  padding:20px 24px;margin-top:26px;
  display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:baseline;
}
.kanzlei .lbl{grid-column:1/-1;font-size:.72rem;color:var(--mut);text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.kanzlei .nam{font-family:var(--serif);font-size:1.28rem;font-weight:400;color:var(--tinte)}
.kanzlei .ort{color:var(--acc);font-weight:600}
.kanzlei .det{grid-column:1/-1;color:var(--tinte2);font-size:.95rem}
.kanzlei .tel{grid-column:1/-1;color:var(--tinte);font-weight:600;font-variant-numeric:tabular-nums}

/* ── Grafik ───────────────────────────────────────────────────────────── */
.grafik{margin:34px 0 0;display:flex;justify-content:center}
.grafik svg{width:100%;max-width:600px;height:auto}
.heroBild{margin-top:34px;border-radius:5px;overflow:hidden;border:1px solid var(--pap3)}
.heroBild img{width:100%;height:auto;display:block}

/* ── Blöcke ───────────────────────────────────────────────────────────── */
section{padding:58px 0}
section.band{background:var(--pap2);border-top:1px solid var(--pap3);border-bottom:1px solid var(--pap3)}
h2.sec{font-family:var(--serif);font-size:1.95rem;font-weight:400;margin-bottom:10px;letter-spacing:-.003em}
h2.sec em{font-style:normal;color:var(--acc)}
.lead-in{color:var(--tinte2);max-width:66ch;margin-bottom:8px}

/* ── Werkzeug ─────────────────────────────────────────────────────────── */
.werkzeug{
  background:#fff;border:1px solid var(--pap3);
  border-top:3px solid var(--acc);
  border-radius:4px;padding:32px;
  box-shadow:0 1px 3px rgba(31,23,18,.05),0 8px 24px rgba(31,23,18,.04);
}
.werkzeug h2{font-family:var(--serif);font-size:1.5rem;margin-bottom:5px;display:flex;align-items:center;gap:11px}
.werkzeug h2 svg{width:23px;height:23px;color:var(--acc);flex:none}
.werkzeug .hint{color:var(--tinte2);font-size:.96rem;margin-bottom:24px}
.werkzeug-oben{margin-top:30px}
.werkzeug-oben .werkzeug{margin-top:0}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:640px){.grid,.grid3{grid-template-columns:1fr}}

label,.frage .q{display:block;font-weight:600;font-size:.93rem;margin-bottom:8px;color:var(--tinte)}
input,select,textarea{
  width:100%;padding:14px 15px;
  border:1.5px solid var(--pap3);border-radius:3px;
  font-size:1rem;font-family:var(--schrift);
  background:#fff;color:var(--tinte);
  transition:border-color .12s,box-shadow .12s;
}
input::placeholder,textarea::placeholder{color:#b09c8b}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--accW)}

.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt{
  padding:11px 17px;border:1.5px solid var(--pap3);border-radius:3px;
  background:#fff;color:var(--tinte);font-size:.95rem;font-family:var(--schrift);
  cursor:pointer;transition:border-color .12s,background .12s;text-align:left;
}
.opt:hover{border-color:var(--mut)}
.opt[aria-pressed="true"]{border-color:var(--acc);background:var(--accW);font-weight:600;color:var(--acc2)}

/* ── Ergebnis ─────────────────────────────────────────────────────────── */
.result{margin-top:26px;padding:26px;border-radius:3px;background:var(--accW);border-left:4px solid var(--acc);display:none}
.result.show{display:block}
.result .lbl{color:var(--tinte2);font-size:.96rem}
.result .num{font-family:var(--serif);font-size:2.9rem;font-weight:400;color:var(--acc2);letter-spacing:-.02em;line-height:1.08}
.result h3{font-family:var(--serif);font-size:1.28rem;margin-bottom:14px;color:var(--acc2)}

.resGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:20px;border-top:1px solid rgba(176,63,17,.2)}
@media(max-width:640px){.resGrid{grid-template-columns:1fr}}
.resGrid div{padding:15px 20px 15px 0}
.resGrid div + div{border-left:1px solid rgba(176,63,17,.2);padding-left:20px}
.resGrid .k{font-size:.73rem;color:var(--mut);text-transform:uppercase;letter-spacing:.11em;font-weight:600}
.resGrid .v{font-family:var(--serif);font-size:1.5rem;font-weight:400;color:var(--tinte);margin-top:2px}
.einordnung{margin-top:20px;padding-top:18px;border-top:1px solid rgba(176,63,17,.2);color:var(--tinte)}

.befund{display:flex;gap:13px;align-items:flex-start;margin-bottom:13px}
.befund .p{flex:none;width:8px;height:8px;border-radius:50%;margin-top:10px}
.befund .p.gruen{background:var(--gruen)}
.befund .p.gelb{background:var(--warn)}
.befund .p.grau{background:var(--mut)}

.disclaimer{font-size:.83rem;color:var(--mut);margin-top:22px;padding-top:18px;border-top:1px solid var(--pap3);line-height:1.6}

/* ── Drei Schritte ────────────────────────────────────────────────────── */
.schritte{margin-top:32px}
.schritt{display:flex;gap:24px;padding:24px 0;border-bottom:1px solid var(--pap3)}
.schritt:last-child{border-bottom:none}
.schritt .n{
  flex:none;width:46px;height:46px;border-radius:50%;
  border:1.5px solid var(--acc);color:var(--acc);background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.schritt .n svg{width:22px;height:22px}
.schritt b{display:block;font-family:var(--serif);font-size:1.18rem;margin-bottom:4px;font-weight:400}
.schritt p{color:var(--tinte2);font-size:.99rem}

/* ── Hinweiskasten ────────────────────────────────────────────────────── */
.hinweis{
  background:var(--warnW);border-left:4px solid var(--warn);
  border-radius:3px;padding:22px 26px;margin-top:34px;
  display:flex;gap:16px;align-items:flex-start;
}
.hinweis > svg{width:24px;height:24px;flex:none;color:var(--warn);margin-top:2px}
.hinweis b{color:var(--warn);font-family:var(--serif);font-weight:400;font-size:1.15rem}
.hinweis p{color:var(--tinte)}

/* ── Wissensblöcke ────────────────────────────────────────────────────── */
.wissen{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:32px}
@media(max-width:760px){.wissen{grid-template-columns:1fr}}
.wissen > div{border-left:2px solid var(--pap3);padding-left:22px}
.wissen b{font-family:var(--serif);font-size:1.16rem;color:var(--acc2);display:block;margin-bottom:7px;font-weight:400}
.wissen p{color:var(--tinte2);font-size:.98rem}

/* ── Drei Wege (Seite 2) ──────────────────────────────────────────────── */
.wege{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:34px;border:1px solid var(--pap3);border-radius:4px;overflow:hidden;background:#fff}
@media(max-width:700px){.wege{grid-template-columns:1fr}}
.wege > div{padding:24px}
.wege > div + div{border-left:1px solid var(--pap3)}
@media(max-width:700px){.wege > div + div{border-left:none;border-top:1px solid var(--pap3)}}
.wege h3{font-family:var(--serif);font-weight:400;font-size:1.22rem;margin-bottom:9px;display:flex;align-items:center;gap:10px}
.wege h3 svg{width:20px;height:20px;flex:none}
.wege .w1 h3{color:var(--gruen)}
.wege .w2 h3{color:var(--mut)}
.wege .w3 h3{color:var(--acc)}
.wege p{font-size:.96rem;color:var(--tinte2)}

/* ── Tabelle ──────────────────────────────────────────────────────────── */
.tblWrap{overflow-x:auto;margin-top:30px;border:1px solid var(--pap3);border-radius:4px;background:#fff}
table.vgl{width:100%;border-collapse:collapse;font-size:.97rem}
table.vgl th,table.vgl td{padding:15px 19px;text-align:left;border-bottom:1px solid var(--pap3)}
table.vgl thead th{background:var(--pap2);font-size:.73rem;text-transform:uppercase;letter-spacing:.11em;color:var(--mut);font-weight:600}
table.vgl thead th:nth-child(4){color:var(--acc)}
table.vgl tbody th{font-weight:600;width:27%;color:var(--tinte)}
table.vgl td{color:var(--tinte2)}
table.vgl tr:last-child th,table.vgl tr:last-child td{border-bottom:none}
@media(max-width:700px){table.vgl{min-width:640px}}

/* ── Formular ─────────────────────────────────────────────────────────── */
form.lead{background:#fff;border:1px solid var(--pap3);border-top:3px solid var(--acc);border-radius:4px;padding:34px;margin-top:36px;box-shadow:0 1px 3px rgba(31,23,18,.05)}
form.lead h2{font-family:var(--serif);font-size:1.55rem}
form.lead .subt{color:var(--tinte2);font-size:.96rem;margin:6px 0 28px}
.row{margin-bottom:18px}
.consent{display:flex;gap:13px;align-items:flex-start;font-size:.89rem;color:var(--tinte2);line-height:1.58}
.consent input{width:auto;margin-top:4px;accent-color:var(--acc);flex:none}
.consent a{color:var(--acc)}
.consent + .consent{margin-top:15px;padding-top:15px;border-top:1px solid var(--pap3)}
.ok-msg,.err-msg{display:none;padding:15px 18px;border-radius:3px;margin-top:16px;font-weight:600}
.ok-msg{background:var(--gruenW);border-left:4px solid var(--gruen);color:var(--gruen)}
.err-msg{background:var(--warnW);border-left:4px solid var(--warn);color:var(--warn)}
#jahrHinweis{display:none;margin:-6px 0 18px;font-size:.96rem;padding:14px 17px;border-radius:3px;background:var(--pap2);border-left:4px solid var(--mut)}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq details{border-bottom:1px solid var(--pap3);padding:21px 0}
.faq details:first-of-type{border-top:1px solid var(--pap3)}
.faq summary{font-family:var(--serif);font-weight:400;cursor:pointer;list-style:none;position:relative;padding-right:34px;font-size:1.14rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;margin-top:-7px;border-right:1.5px solid var(--acc);border-bottom:1.5px solid var(--acc);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq p{margin-top:12px;color:var(--tinte2);max-width:72ch}
.faq a{color:var(--acc)}

/* ── Fuß ──────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--pap3);padding:34px 0 50px;font-size:.92rem;color:var(--tinte2);background:var(--pap2)}
footer a{color:var(--tinte);text-decoration:underline;text-underline-offset:3px;margin-right:22px}
footer a:hover{color:var(--acc)}
.fussMarke{font-family:var(--serif);font-size:1.05rem;color:var(--tinte);margin-bottom:12px;display:block}
.fussMarke b{color:var(--acc)}
.fineprint{margin-top:14px;font-size:.84rem;color:var(--mut);max-width:78ch;line-height:1.6}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Illustration statt Foto: keine Lizenzfrage, keine Stockfoto-Anmutung,
   4 KB statt 200 — und die Farben stimmen mit der Seite ueberein. */
.motiv{margin-top:38px;border:1px solid var(--pap3);border-radius:4px;overflow:hidden;line-height:0}
.motiv svg{width:100%;height:auto;display:block}