/* ==========================================================================
   Rechtsanwalt Matthias Krach – Stylesheet
   Grundlage: Designsystem „Rechtsanwalt Matthias Krach“ und
   Design „Abmahnung Frommer Legal – Neugestaltung“.
   Keine neuen Farben, Schriften oder Bausteine ohne Rückfrage.
   ========================================================================== */

/* ---------- Schriften (lokal, keine Verbindung zu Google) ---------- */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/jost-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url("../fonts/source-sans-3-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url("../fonts/source-sans-3-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* Ersatzschriften mit angepassten Maßen: überbrücken die Ladezeit der Webschriften ohne Layout-Verschiebung (PageSpeed/CLS, 10.11.2026) */
@font-face { font-family: "Jost Ersatz"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"), local("Roboto");
  size-adjust: 97%; ascent-override: 110%; descent-override: 39%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans 3 Ersatz"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"), local("Roboto");
  size-adjust: 93.5%; ascent-override: 109.5%; descent-override: 42.8%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
  --brand: #2b6caa;
  --brand-strong: #1f5486;
  --brand-deep: #163d63;
  --brand-deep-raised: #1f4a75;   /* Kontakt-Karte auf brand-deep (aus dem Design) */
  --brand-line: #5b8cc0;          /* Trennlinie im blauen Menüeintrag (aus dem Design) */
  --tint: #e7eff7;
  --tint-soft: #f4f7fb;
  --success-tint: #e7f3ec;        /* Erfolgs-Etikett bei Urteilen (aus dem Design) */
  --surface: #ffffff;
  --black: #000000;
  --ink: #1d2125;
  --ink-muted: #545e69;
  --on-brand: #ffffff;
  --on-deep-muted: #b9cde2;
  --line: #d5dee8;
  --line-soft: #e3e9f0;
  --line-strong: #7d8995;
  --focus: var(--brand);
  --success: #1e7a46;
  --danger: #b42318;
  --deadline: #a15c00;

  --font-display: "Jost", "Jost Ersatz", "Century Gothic", Futura, sans-serif;
  --font-sans: "Source Sans 3", "Source Sans 3 Ersatz", "Segoe UI", Arial, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;

  --radius-sm: 4px; --radius-md: 6px; --radius-leaf: 28px;
  --leaf: 0 0 var(--radius-leaf) 0;
  --leaf-md: 0 0 20px 0;
  --shadow-card: 0 1px 2px rgba(22, 61, 99, .06), 0 8px 24px rgba(22, 61, 99, .08);

  --content-max: 1160px;
  --header-max: 1280px;
  --text-max: 68ch;
  --gutter: 24px;
  --section-y: var(--space-16);   /* 64px (vorher 96px, auf Wunsch verringert) */
}
@media (max-width: 720px) {
  :root { --gutter: 16px; --section-y: var(--space-12); }
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans);
  font-size: 18px; line-height: 29px; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, svg, video { max-width: 100%; }
img { height: auto; display: block; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); color: var(--black); }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-strong); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
strong { font-weight: 600; }
table { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 20px; background: var(--brand);
  color: var(--on-brand); font-weight: 600; border-radius: var(--radius-md); text-decoration: none; }
.skip-link:focus { top: 16px; color: var(--on-brand); }

/* ---------- Layout ---------- */
.section { padding: var(--section-y) var(--gutter); background: var(--surface); }
.section--alt { background: var(--tint-soft); }
.section--deep { background: var(--brand-deep); color: var(--on-brand); }
.section--hero { padding: 72px var(--gutter) 64px; }
.section--compact { padding-top: 64px; padding-bottom: 64px; }
.section--toc { padding: 64px var(--gutter) 0; }
.container { max-width: var(--content-max); margin: 0 auto; }
.container--narrow { max-width: 880px; margin: 0 auto; }
/* Reine Textabschnitte: mittige Spalte in Lesebreite, Text füllt die Spalte */
.container--text { max-width: 800px; margin: 0 auto; }
.container--text .prose, .container--text .max-760 { max-width: none; }
.stack { display: flex; flex-direction: column; }
.stack-4 { gap: 4px; } .stack-6 { gap: 6px; } .stack-8 { gap: 8px; } .stack-12 { gap: 12px; }
.stack-16 { gap: 16px; } .stack-20 { gap: 20px; } .stack-24 { gap: 24px; } .stack-32 { gap: 32px; }
.stack-40 { gap: 40px; } .stack-48 { gap: 48px; }
.row { display: flex; flex-wrap: wrap; }
.row-8 { gap: 8px; } .row-12 { gap: 12px; } .row-16 { gap: 16px; }
.row--between { justify-content: space-between; align-items: flex-end; gap: 16px 32px; }
.split { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.split--32 { gap: 32px; }
.split__main { flex: 999 1 520px; min-width: 0; }
.split__side { flex: 1 1 300px; min-width: 0; }
.split__main.prose { max-width: none; }
/* Fließtext, der um ein Bild läuft (Bild rechts) */
.flow { display: flow-root; }
.flow > * + * { margin-top: 20px; }
.flow > h3 { margin-top: 28px; }
.flow > .figure--float { float: right; width: 46%; margin: 6px 0 16px 32px; }
.flow > .figure--float + * { margin-top: 0; }
.flow .figure--float img { width: 100%; }
.flow > .figure--portrait { width: 34%; max-width: 280px; }
.figure--float figcaption { margin-top: 8px; }
@media (max-width: 640px) { .flow > .figure--float { float: none; width: 100%; margin: 0 0 20px; } }
/* Text mit Bild: zwei Spalten ab 900px, darunter Bild unter dem Text in voller Breite */
.split--media { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.split--media > .split__main, .split--media > .split__side { flex: none; min-width: 0; }
.split--media .figure { max-width: none; margin-top: 6px; }
.split--media .figure img { width: 100%; }
@media (max-width: 900px) { .split--media { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.split__side .figure { max-width: 420px; }
.split__half { flex: 1 1 340px; min-width: 0; }
.split__wide { flex: 1 1 420px; min-width: 0; }
.grid { display: grid; gap: 24px; }
.grid--250 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.grid--300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--320 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--wide-gap { gap: 24px 48px; }
.grid--tight { gap: 16px; }
.list-plain { list-style: none; margin: 0; padding: 0; }
.list { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 4px; }
.list--8 { gap: 8px; }
.list-ol { margin: 0; padding: 0 0 0 24px; display: flex; flex-direction: column; gap: 8px; }
.prose { max-width: var(--text-max); }

/* ---------- Typografie ---------- */
.eyebrow { font-family: var(--font-display); font-size: 14px; line-height: 20px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.section--deep .eyebrow { color: var(--on-deep-muted); }
.display { font-size: 52px; line-height: 60px; font-weight: 400; letter-spacing: .01em; }
.h2 { font-size: 36px; line-height: 44px; font-weight: 500; }
.h2--deep { font-size: 44px; line-height: 52px; font-weight: 400; color: var(--on-brand); }
.h2--form { font-size: 26px; line-height: 34px; font-weight: 500; }
.h3 { font-size: 22px; line-height: 30px; font-weight: 500; color: var(--ink); }
.h3--black { color: var(--black); }
.h3--lg { font-size: 24px; line-height: 32px; }
.h3--sm { font-size: 20px; line-height: 28px; }
.title-sm { font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 500; color: var(--black); }
.lead { font-size: 21px; line-height: 33px; }
.small { font-size: 15px; line-height: 24px; }
.muted { color: var(--ink-muted); }
.text-17 { font-size: 17px; line-height: 27px; }
.text-16 { font-size: 16px; line-height: 26px; }
.strong { font-weight: 600; }
.strong-brand { font-weight: 600; color: var(--brand-strong); }
.c-deadline { color: var(--deadline); }
.c-black { color: var(--black); }
.c-ink { color: var(--ink); }
.c-success { color: var(--success); }
.mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } .mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; }
.stars { color: var(--brand); letter-spacing: 2px; }
.stars--sm { font-size: 15px; }
.big-number { font-family: var(--font-display); font-size: 56px; line-height: 64px; color: var(--brand); }
.big-number--deep { font-size: 40px; line-height: 48px; color: var(--on-brand); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: var(--radius-md);
  background: var(--brand); border: 2px solid var(--brand); color: var(--on-brand); font: inherit;
  font-weight: 600; font-size: 17px; line-height: 24px; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s; }
.btn:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--on-brand); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--secondary { background: var(--surface); color: var(--brand); }
.btn--secondary:hover { background: var(--tint); color: var(--brand-strong); }
.btn--light { background: var(--surface); border-color: var(--surface); color: var(--brand-deep); }
.btn--light:hover { background: var(--tint); border-color: var(--tint); color: var(--brand-deep); }
.btn--ghost-light { background: transparent; border-color: var(--surface); color: var(--on-brand); }
.btn--ghost-light:hover { background: var(--surface); border-color: var(--surface); color: var(--brand-deep); }
.btn--sm { padding: 10px 20px; }
.section--deep :focus-visible, .card--deep :focus-visible, .site-footer :focus-visible { outline-color: var(--on-brand); }

/* ---------- Etiketten ---------- */
.badges { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-sm);
  background: var(--tint); color: var(--brand-strong); font-size: 15px; line-height: 24px; font-weight: 600; }
.badge--yes { background: var(--surface); border: 1px solid var(--success); color: var(--success); }
.badge--no { background: var(--surface); border: 1px solid var(--ink-muted); color: var(--ink-muted); }
.tag { align-self: flex-start; padding: 2px 10px; border-radius: var(--radius-sm); background: var(--tint);
  color: var(--brand-strong); font-size: 15px; line-height: 24px; font-weight: 600; }
.tag--success { background: var(--success-tint); color: var(--success); }
.tag--inline { display: inline-block; margin-left: 6px; padding: 0 8px; font-size: 14px; line-height: 24px; }

/* ---------- Karten und Flächen (Signatur-Ecke unten rechts) ---------- */
.card { padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--leaf); }
.card--plain { border-color: transparent; }
.card--soft { background: var(--tint-soft); border-color: transparent; }
.section--alt .card--soft { background: var(--surface); }
.card--tint { background: var(--tint); border-color: transparent; }
.card--brand { border: 2px solid var(--brand); }
.card--deep { background: var(--brand-deep); border-color: transparent; color: var(--on-brand); }
.card--deep .muted, .card--deep .on-deep-muted { color: var(--on-deep-muted); }
.card--sm { padding: 24px; border-radius: var(--leaf-md); }
.card--md { padding: 24px 28px; border-radius: var(--leaf-md); }
.card--lg { padding: 28px 32px; }
.card--article { padding: 24px 32px; }
.on-deep-muted { color: var(--on-deep-muted); }
.num { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: var(--brand);
  color: var(--on-brand); border-radius: 0 0 11px 0; font-family: var(--font-display); font-size: 22px; font-weight: 500; }
.num svg { width: 22px; height: 22px; }

/* Hinweis-Box */
.notice { display: flex; gap: 16px; padding: 24px; background: var(--tint); border-radius: var(--leaf); }
.notice > svg { flex: none; margin-top: 2px; width: 24px; height: 24px; }
.notice strong.notice__title { color: var(--black); }
.notice--deadline { background: var(--surface); border: 2px solid var(--deadline); }
.notice--compact { padding: 20px 24px; }
.cta-box { display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: center; justify-content: space-between;
  padding: 32px; background: var(--tint); border-radius: var(--leaf); }
.cta-box--deep { background: var(--brand-deep); color: var(--on-brand); }
.cta-box--deep .h3 { color: var(--on-brand); }
.cta-box__text { flex: 1 1 420px; min-width: 0; }

/* Check-Listen mit Icon */
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.checklist li { display: flex; gap: 12px; }
.checklist svg { flex: none; margin-top: 4px; }

/* Bilder */
.figure { margin: 0; }
.figure img { border-radius: var(--leaf); }
.figure figcaption { margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--ink-muted); }

/* ---------- Kopfbereich ---------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 30; }
.site-header__top { padding: 20px var(--gutter); }
.site-header__inner { max-width: var(--header-max); margin: 0 auto; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 16px 40px; }
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; min-width: 0; }
.brand__mark { width: 64px; height: 64px; flex: none; }
.brand__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 446px; }
.brand__name { width: 100%; max-width: 446px; height: auto; }
.brand__titles { font-size: 14px; line-height: 19px; color: var(--ink); }
.nav-toggle { display: none; }
.main-nav > ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; list-style: none; margin: 0; padding: 0;
  font-size: 18px; line-height: 26px; }
.main-nav > ul > li { position: relative; }
.main-nav a.main-nav__link, .main-nav button.main-nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0;
  color: var(--ink-muted); text-decoration: none; font: inherit; background: none; border: 0; cursor: pointer; }
.main-nav a.main-nav__link:hover, .main-nav button.main-nav__link:hover,
.main-nav .main-nav__link[aria-current="page"], .main-nav .is-current > .main-nav__link { color: var(--brand); }
.caret { width: 14px; height: 14px; flex: none; transition: transform .15s; }
[aria-expanded="true"] > .caret, [aria-expanded="true"] .caret { transform: rotate(180deg); }

/* Untermenüs (Desktop) */
.menu { display: none; position: absolute; left: 0; top: 100%; z-index: 40; min-width: 300px; margin: 0; padding: 8px 0;
  list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--leaf-md);
  box-shadow: var(--shadow-card); font-size: 17px; line-height: 24px; font-weight: 400; }
.menu--wide { min-width: 340px; }
.has-menu.is-open > .menu { display: block; }
@media (hover: hover) and (min-width: 1001px) {
  .has-menu:hover > .menu { display: block; }
}
.menu a { display: block; padding: 10px 20px; color: var(--ink); text-decoration: none; }
.menu a:hover { background: var(--tint); color: var(--brand-strong); }
.menu a[aria-current="page"] { background: var(--brand); color: var(--on-brand); }
.menu__group { padding: 10px 20px 4px; font-family: var(--font-display); font-size: 14px; line-height: 20px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.menu__split { display: flex; align-items: stretch; }
.menu__split > a { flex: 1 1 auto; padding-right: 8px; }
.menu__split:has(> a[aria-current="page"]) { background: var(--brand); }
.menu__split > a[aria-current="page"]:hover { background: var(--brand-strong); color: var(--on-brand); }
.menu__sub-toggle { flex: none; width: 44px; display: grid; place-items: center; background: transparent; border: 0;
  border-left: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.menu__split:has(> a[aria-current="page"]) .menu__sub-toggle { border-left-color: var(--brand-line); color: var(--on-brand); }
.submenu { list-style: none; margin: 0; padding: 4px 0; background: var(--tint-soft); border-bottom: 1px solid var(--line); }
.submenu[hidden] { display: none; }
.submenu a { padding: 8px 20px 8px 40px; }

/* Leiste „Verteidigung gegen Abmahnungen“ */
.topic-nav { background: var(--tint-soft); border-top: 1px solid var(--line); padding: 0 var(--gutter); }
.topic-nav__inner { max-width: var(--header-max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.topic-nav__label { flex: 1 0 100%; padding-top: 14px; }
.topic-nav__list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 0 4px;
  font-size: 17px; line-height: 24px; font-weight: 600; }
.topic-nav__list > li { position: relative; }
.topic-nav__link { display: inline-flex; align-items: center; gap: 8px; padding: 14px 16px; color: var(--ink);
  text-decoration: none; border: 0; border-bottom: 3px solid transparent; background: none; font: inherit; cursor: pointer; }
.topic-nav__link:hover { color: var(--brand-strong); }
.topic-nav__link svg.icon { width: 18px; height: 18px; flex: none; stroke: var(--brand); }
.topic-nav .is-current > .topic-nav__link, .topic-nav__link[aria-current="page"] { color: var(--brand-strong);
  background: var(--surface); border-bottom-color: var(--brand); }

/* Mobile Navigation */
@media (max-width: 1000px) {
  .site-header__top { padding: 12px var(--gutter); }
  .site-header__inner { flex-wrap: wrap; align-items: center; gap: 12px 16px; }
  .brand { flex: 1 1 200px; gap: 12px; }
  .brand__mark { width: 44px; height: 44px; }
  .brand__text { max-width: 260px; }
  .brand__titles { display: none; }
  .js .nav-toggle { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 10px 14px; min-height: 44px;
    font: inherit; font-size: 17px; font-weight: 600; color: var(--brand-strong); background: var(--surface);
    border: 2px solid var(--brand); border-radius: var(--radius-md); cursor: pointer; }
  .nav-toggle svg { width: 20px; height: 20px; }
  .main-nav { width: 100%; border-top: 1px solid var(--line); }
  .js .main-nav, .js .topic-nav { display: none; }
  .js .site-header.nav-open .main-nav, .js .site-header.nav-open .topic-nav { display: block; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav > ul > li { border-bottom: 1px solid var(--line); }
  .main-nav a.main-nav__link, .main-nav button.main-nav__link { width: 100%; justify-content: space-between; padding: 12px 0; color: var(--ink); font-weight: 600; }
  .main-nav .btn { margin: 16px 0 0; justify-content: center; width: 100%; }
  .main-nav > ul > li.main-nav__cta { border-bottom: 0; }
  .menu, .menu--wide { position: static; min-width: 0; border: 0; box-shadow: none; border-radius: 0; padding: 0 0 8px; background: transparent; }
  .menu a { padding: 10px 16px; }
  .submenu a { padding-left: 32px; }
  .topic-nav { border-top: 0; padding: 0 var(--gutter) 16px; background: var(--surface); }
  .topic-nav__inner { flex-direction: column; align-items: stretch; }
  .topic-nav__label { margin: 16px 0 4px; }
  .topic-nav__list { flex-direction: column; }
  .topic-nav__list > li { border-bottom: 1px solid var(--line); }
  .topic-nav__link { width: 100%; padding: 12px 0; border-bottom: 0; }
  .topic-nav__link .caret { margin-left: auto; }
  .topic-nav .is-current > .topic-nav__link { background: none; }
}

/* Fristen-Leiste */
.deadline-bar { background: var(--surface); border-bottom: 2px solid var(--deadline); padding: 12px var(--gutter); }
.deadline-bar p { max-width: var(--content-max); margin: 0 auto; display: flex; gap: 12px; align-items: flex-start;
  font-size: 17px; line-height: 27px; }
.deadline-bar svg { flex: none; margin-top: 3px; }
.deadline-bar strong { color: var(--deadline); }

/* ---------- Hero ---------- */
.hero__text { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 720px) {
  .display { font-size: 38px; line-height: 46px; }
  .h2 { font-size: 30px; line-height: 38px; }
  .h2--deep { font-size: 34px; line-height: 42px; }
  .lead { font-size: 19px; line-height: 30px; }
  .section--hero { padding-top: 40px; padding-bottom: 48px; }
  .card, .cta-box { padding: 24px; }
  h1, h2, h3, .lead { hyphens: auto; }
}

/* ---------- Formular ---------- */
.form-card { flex: 1 1 360px; min-width: 0; max-width: 460px; display: flex; flex-direction: column; gap: 16px;
  padding: 32px; background: var(--tint-soft); border: 1px solid var(--line); border-radius: var(--leaf); }
@media (max-width: 860px) { .form-card { max-width: none; } }
/* Formular im Kopfbereich: auf dem Desktop rechts neben dem Text, sofort sichtbar */
.section--hero .split { align-items: flex-start; }
.section--hero .form-card { flex: 1 1 420px; max-width: 520px; padding: 28px 28px 24px; gap: 12px; }
@media (max-width: 1000px) { .section--hero .form-card { max-width: none; } }
.wizard { text-align: center; }
.wizard .wizard__title { width: 100%; font-size: 28px; line-height: 36px; }
.wizard .eyebrow, .wizard .h2--form { text-align: center; }
.wizard .field, .wizard .input-icon, .wizard .check, .wizard__submit, .radio-row { text-align: left; }
.wizard .radio-row { justify-content: center; }
.wizard__step .choice, .wizard__step .field, .wizard__step .input-icon, .wizard__step .check, .wizard__step .radio-row, .wizard__submit, .wizard__nav { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
.wizard .choice__tile svg { width: 64px; height: 64px; }
.wizard .choice__tile { font-size: 17px; padding: 28px 12px 20px; }
.wizard .wizard__title { font-size: 24px; line-height: 32px; }
@media (max-width: 720px) { .section--hero .form-card { padding: 24px 16px; } .wizard .wizard__title { font-size: 22px; line-height: 30px; } }
.form-card__claim { font-size: 19px; line-height: 28px; font-weight: 600; }
.form-card__free { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--success); }
.seg { display: flex; border: 1px solid var(--line-strong); border-radius: var(--radius-md); overflow: hidden; }
.seg button { flex: 1 1 0; font: inherit; font-size: 15px; line-height: 22px; font-weight: 600; padding: 10px 8px; border: 0;
  cursor: pointer; background: var(--surface); color: var(--brand-strong); }
.seg button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }
.seg button:focus-visible { outline-offset: -4px; outline-color: var(--brand-deep); }
.seg button[aria-pressed="true"]:focus-visible { outline-color: var(--on-brand); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field[hidden] { display: none; }
.field label { font-weight: 600; font-size: 17px; line-height: 24px; }
.field input, .field textarea { font: inherit; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); width: 100%; }
.field textarea { resize: vertical; }
.field input[type="file"] { font-size: 16px; padding: 10px 12px; border-style: dashed; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--brand); }
.field__hint { font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--brand); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Mehrstufiges Formular ---------- */
.wizard fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.wizard__step { display: flex; flex-direction: column; gap: 16px; }
.wizard__step + .wizard__step { margin-top: 24px; }
.js .wizard__step + .wizard__step { margin-top: 0; }
.js .wizard__step[hidden] { display: none; }
.wizard__title { padding: 0; margin-bottom: 4px; font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 500; color: var(--brand); }
.wizard__title:focus { outline: none; }
.wizard__sub { font-size: 17px; line-height: 26px; color: var(--ink-muted); }
.choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 12px; }
.choice__tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 10px 16px;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--leaf-md); box-shadow: var(--shadow-card);
  text-align: center; font-weight: 600; font-size: 16px; line-height: 22px; color: var(--ink); cursor: pointer;
  transition: border-color .15s, background-color .15s; }
.choice__tile svg { width: 52px; height: 52px; color: var(--brand); }
.choice__tile:hover { border-color: var(--brand); }
.choice__tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__tile:has(input:checked) { border-color: var(--brand); background: var(--tint); }
.choice__tile:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.radio-row { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 17px; }
.radio-row label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.radio-row input, .wizard .check input { accent-color: var(--brand); width: 18px; height: 18px; }
.input-icon { display: flex; align-items: stretch; }
.input-icon__box { flex: none; width: 52px; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-icon__box svg { width: 22px; height: 22px; }
.input-icon input { flex: 1 1 auto; min-width: 0; font: inherit; padding: 12px 16px; border: 1px solid var(--line-strong); border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface); color: var(--ink); }
.input-icon input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--brand); }
.wizard textarea::placeholder, .input-icon input::placeholder { color: var(--ink-muted); opacity: 1; }
.wizard .check { font-size: 15px; line-height: 23px; color: var(--ink); }
.wizard__submit { justify-content: center; width: 100%; }
.wizard__nav { display: none; }
.js .wizard__nav { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.wizard__arrow { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: var(--radius-md);
  background: var(--brand); color: var(--on-brand); cursor: pointer; }
.wizard__arrow:hover:not([disabled]) { background: var(--brand-strong); }
.wizard__arrow svg { width: 22px; height: 22px; }
.wizard__arrow[disabled] { background: var(--line); color: var(--surface); cursor: default; }
.wizard__bar { flex: 1 1 auto; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.wizard__bar span { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 4px; transition: width .25s; }
.field__error { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--danger); }

/* ---------- Mandantenstimmen ---------- */
.review-widget { max-width: 100%; overflow-x: auto; }
.review-widget > div { max-width: 100%; }
.reviews__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; }
.reviews__score { display: flex; align-items: center; gap: 16px; padding: 16px 24px; background: var(--surface); border-radius: var(--leaf-md); }
.reviews__note { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--brand-deep); }
.reviews__score .stars { font-size: 20px; }
.reviews__count { font-size: 16px; line-height: 22px; color: var(--ink-muted); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.review { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--surface); border-radius: var(--leaf-md); }
.review strong { font-size: 18px; line-height: 26px; }
.review__date { margin-top: auto; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.reviews__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 32px; }
.reviews__hinweis { text-align: center; }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .reviews-grid { grid-template-columns: 1fr; grid-auto-rows: auto; } }

/* ---------- Inhaltsverzeichnis ---------- */
.toc { max-width: var(--content-max); margin: 0 auto; padding: 32px; border: 1px solid var(--line); border-radius: var(--leaf); }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; columns: 2; column-gap: 48px; }
.toc li { counter-increment: toc; break-inside: avoid; border-bottom: 1px solid var(--line); }
.toc a { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; color: var(--ink); text-decoration: none; font-size: 17px; line-height: 26px; }
.toc a::before { content: counter(toc); flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px;
  transform: translateY(-1px); border-radius: 50%; background: var(--tint); color: var(--brand-deep); font-size: 14px; font-weight: 600; line-height: 1; }
.toc a:hover { color: var(--brand); }
.toc a:hover span, .toc a:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .toc { padding: 24px; } .toc ol { columns: 1; } }

/* ---------- Tabellen ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--leaf); }
.table-wrap--brand { border: 2px solid var(--brand); }
.table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 26px; }
.table--wide { min-width: 640px; }
.table th, .table td { padding: 12px 24px; text-align: left; vertical-align: top; }
.table thead tr { background: var(--brand-deep); color: var(--on-brand); }
.table thead th { padding: 14px 24px; font-weight: 600; }
.table tbody tr { border-top: 1px solid var(--line); }
.table .num-col { text-align: right; }
.table td.num-col.strong { font-weight: 600; }
.table tr.table__group { background: var(--tint); border-top: 0; }
.table tr.table__group th { font-family: var(--font-display); font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500; color: var(--brand-strong); }
.table--price { font-size: 18px; line-height: 27px; }
.table--price thead tr { background: var(--tint); color: var(--ink); }
.table--price td { padding: 14px 24px; }
.table--price .price { text-align: right; font-family: var(--font-display); font-size: 24px; color: var(--black); white-space: nowrap; }
.table caption { caption-side: bottom; text-align: left; padding: 12px 24px; font-size: 15px; line-height: 24px; color: var(--ink-muted); }

/* Balkenvergleich */
.bars { display: flex; flex-direction: column; gap: 12px; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.bar__label { flex: 0 0 180px; }
.bar__track { flex: 1 1 200px; display: flex; height: 20px; }
.bar__fill { height: 20px; background: var(--line-strong); width: 100%; }
.bar__fill--brand { background: var(--brand); border-radius: 0 0 6px 0; }
.bar__value { flex: 0 0 110px; text-align: right; }
.bar__value--brand { color: var(--brand); }

/* ---------- Video (lädt erst nach Klick) ---------- */
.video { margin: 0; }
.video__frame { position: relative; aspect-ratio: 16 / 9; background: var(--brand-deep); border-radius: var(--leaf); overflow: hidden; }
.video__play { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; padding: 0;
  background: var(--brand-deep); border: 0; cursor: pointer; color: var(--on-brand); font: inherit; }
.video__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.video__icon { position: relative; width: 72px; height: 72px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; }
.video__icon svg { width: 28px; height: 28px; margin-left: 3px; }
.video__play:hover .video__icon { box-shadow: var(--shadow-card); transform: scale(1.05); }
.video__play:focus-visible { outline: 3px solid var(--on-brand); outline-offset: -6px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption { margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.video--center { max-width: 900px; width: 100%; align-self: center; }
.video--sm .video__icon { width: 64px; height: 64px; }
.video--sm .video__icon svg { width: 24px; height: 24px; }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-weight: 600; font-size: 19px;
  line-height: 28px; list-style: none; cursor: pointer; hyphens: auto; overflow-wrap: anywhere; }
.faq__q { flex: 1 1 auto; min-width: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand-strong); }
.faq__plus { display: block; width: 20px; height: 20px; margin-top: 4px; color: var(--brand); transition: transform .15s; flex: none; }
.faq__plus svg { display: block; }
.faq details[open] .faq__plus { transform: rotate(45deg); }
.faq__body { padding: 0 0 20px; display: flex; flex-direction: column; gap: 16px; }
.faq details > p { margin: 0 0 20px; }

/* ---------- Werke-Liste ---------- */
.search { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.search input { font: inherit; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.search input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--brand); }
.no-hits { padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--leaf-md); }
.no-hits[hidden] { display: none; }
.works { display: flex; flex-direction: column; gap: 40px; }
/* Titel einer Gruppe auf mehrere Spalten verteilt (Anzahl je nach Breite) */
.works ul { columns: 4 220px; column-gap: 32px; }
.works li { break-inside: avoid; }
.works__group[hidden] { display: none; }
.works h3 { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--line); font-size: 15px; line-height: 22px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--brand-strong); }
.works li { padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 16px; line-height: 24px; }
.works li[hidden] { display: none; }

/* ---------- Chronik ---------- */
.chronicle { list-style: none; margin: 0; padding: 0; max-width: 960px; border-top: 1px solid var(--line); }
.chronicle li { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.chronicle time { flex: 0 0 104px; font-weight: 600; color: var(--brand); }
.chronicle span { flex: 1 1 400px; min-width: 0; }

/* ---------- Kontakt-Abschnitt ---------- */
.contact-cta { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; align-items: center; text-align: center; }
.contact-cta .lead { color: var(--on-deep-muted); }
.contact-card { display: flex; gap: 20px; align-items: center; text-align: left; padding: 24px 32px; background: var(--brand-deep-raised); border-radius: var(--leaf); }
.contact-card__name { font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 500; }
.contact-card__meta { margin-top: 4px; font-size: 16px; line-height: 25px; color: var(--on-deep-muted); }
.contact-card img { width: 64px; height: 64px; flex: none; object-fit: cover; object-position: top; border-radius: 0 0 16px 0; }
.section--deep a:not(.btn) { color: var(--on-brand); }

/* ---------- Anwalt-Kurzprofil ---------- */
.profile { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; }
.profile__photo { width: 150px; height: 200px; object-fit: cover; object-position: top; border-radius: var(--leaf); flex: none; }
.profile__text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.profile__logo { width: 150px; height: auto; flex: none; }

/* ---------- Ratgeber-Kasten ---------- */
.guides { padding: 32px; border: 1px solid var(--line); border-radius: var(--leaf); }

/* ---------- Fußbereich ---------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: 40px var(--gutter); font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.site-footer__inner { max-width: var(--content-max); margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 4px 24px; list-style: none; margin: 0; padding: 0; }
.site-footer__rating { display: flex; gap: 8px; align-items: center; }

/* ---------- Druck ---------- */
@media print {
  .site-header, .topic-nav, .deadline-bar, .form-card, .video, .review-widget, .nav-toggle { display: none !important; }
  .section { padding: 24px 0; }
  a { color: inherit; }
}

/* ---------- Kleine Hilfsklassen aus der Vorlage ---------- */
.inline-row { display: flex; gap: 8px; align-items: center; }
.self-start { align-self: flex-start; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.max-760 { max-width: 760px; }
.card-title { font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 500; }
.bar__track--gray { height: 20px; background: var(--line-strong); }
.case-label { margin: 0 0 4px; font-family: var(--font-display); font-size: 15px; color: var(--brand); }
.quote-inline { margin: 4px 0; padding: 12px 20px; border-left: 3px solid var(--brand); background: var(--tint-soft); font-style: italic; }
.search label { font-weight: 600; font-size: 17px; line-height: 24px; }

/* Zwei Abschnitte mit gleichem Hintergrund direkt hintereinander: kein doppelter Abstand */
.section:not(.section--alt):not(.section--deep):not(.section--toc) + .section:not(.section--alt):not(.section--deep),
.section--alt + .section--alt { padding-top: 0; }

/* Fließtext in breiten Abschnitten (mit Karten) auf Lesebreite begrenzen */
.container:not(.container--text) > .flow { max-width: 800px; }
/* Bild als eigener Block im Fließtext (z. B. Auszug aus einer Abmahnung) */
.flow > .figure--block { clear: both; max-width: 640px; }
.flow > .figure--block img { width: 100%; }

/* Bewertungszeile im Kopfbereich */
.hero-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 17px; line-height: 26px; }
.hero-rating .stars { font-size: 18px; }
.hero-rating a { font-weight: 600; }

/* Bewertungen: auf dem Handy nur drei Karten */
@media (max-width: 720px) {
  .reviews-grid > .review:nth-child(n+4) { display: none; }
}

/* Formular im Kontaktabschnitt (dunkler Grund) */
.contact-cta .form-card { width: 100%; max-width: 760px; color: var(--ink); text-align: center; padding: 40px 48px; }
.section--deep .form-card a:not(.btn) { color: var(--brand); }
.section--deep .form-card :focus-visible { outline-color: var(--focus); }
.section--deep .form-card .eyebrow { color: var(--brand); }
@media (max-width: 720px) { .contact-cta .form-card { padding: 24px 16px; } }

/* Schnellkontakt-Leiste unten (nur Handy) */
.mobile-cta { display: none; }
@media (max-width: 720px) {
  .mobile-cta { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--brand-deep); border-top: 1px solid rgba(255,255,255,.18); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .mobile-cta a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 6px 4px;
    color: var(--on-brand); text-decoration: none; font-size: 14px; line-height: 18px; font-weight: 600; }
  .mobile-cta a + a { border-left: 1px solid rgba(255,255,255,.18); }
  .mobile-cta a:last-child { background: var(--brand); }
  .mobile-cta svg { width: 20px; height: 20px; }
  .mobile-cta a:focus-visible { outline: 2px solid var(--on-brand); outline-offset: -4px; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}
@media print { .mobile-cta { display: none !important; } }

/* ---------- Startseite ---------- */
.home-hero { padding-top: 56px; padding-bottom: 56px; }
.home-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.home-hero .display { font-size: 44px; line-height: 52px; }
@media (max-width: 1000px) { .home-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 720px) { .home-hero .display { font-size: 34px; line-height: 42px; } .home-hero { padding-top: 32px; } }
/* Hervorgehobene Karte „Filesharing“ */
.feature-card { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; padding: 32px; background: var(--brand-deep); color: var(--on-brand); border-radius: var(--leaf); }
.feature-card .eyebrow { color: var(--on-deep-muted); }
.feature-card__title { font-size: 30px; line-height: 38px; font-weight: 500; color: var(--on-brand); }
.feature-card__sub { margin-top: 4px; font-family: var(--font-display); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--on-deep-muted); }
.feature-card__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.feature-card__links a { color: var(--on-brand); font-weight: 600; text-underline-offset: 3px; }
.feature-card :focus-visible { outline-color: var(--on-brand); }
.feature-card .btn { margin-top: 8px; }
@media (max-width: 720px) { .feature-card { padding: 24px; } .feature-card__title { font-size: 24px; line-height: 32px; } }
/* Verweis-Chips */
.chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: var(--radius-sm); background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.28); color: var(--on-brand); font-size: 16px; line-height: 22px; font-weight: 600; text-decoration: none; }
.chip-list a:hover { background: var(--surface); color: var(--brand-deep); }
.chip-list--light a { background: var(--tint); border-color: transparent; color: var(--brand-strong); font-size: 15px; min-height: 32px; padding: 4px 10px; }
.chip-list--light a:hover { background: var(--brand); color: var(--on-brand); }
/* Leistungs-Karten mit Bild */
.service-card { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--leaf); overflow: hidden; }
.service-card > img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.service-card__body { display: flex; flex-direction: column; gap: 12px; padding: 24px 28px 28px; flex: 1; }
.service-card h3 a, .service-mini h3 a { color: inherit; text-decoration: none; }
.service-card h3 a:hover, .service-mini h3 a:hover { color: var(--brand); text-decoration: underline; }
.service-card__more { margin-top: auto; font-weight: 600; text-decoration: none; }
.service-mini { display: flex; gap: 16px; align-items: flex-start; }
.service-mini > div { display: flex; flex-direction: column; gap: 6px; }
/* Ratgeber-Verweise */
.guide-link { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-decoration: none; color: var(--ink); border: 1px solid var(--line); }
.guide-link:hover { border-color: var(--brand); box-shadow: var(--shadow-card); color: var(--brand-strong); }
.guide-link > span:last-child { color: var(--brand); font-size: 22px; }
/* Fortbildungen */
.chronicle--wide time { flex-basis: 210px; }
/* Kontakt auf der Startseite */
.home-contact__head { text-align: center; }
.home-contact { display: flex; justify-content: center; }
.home-contact .row { justify-content: center; }
.home-areas { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.home-areas__label { color: var(--brand); margin: 0; }
.feature-card__text { font-size: 17px; line-height: 27px; color: var(--on-brand); max-width: 60ch; }
.service-card__body > p:first-of-type { font-weight: 600; }

/* Startseite: Foto oben (wie auf der alten Seite), Text auf hellem Grund */
.home-banner { position: relative; background: var(--tint-soft); }
.home-banner__img { width: 100%; object-fit: cover; }
.home-banner__inner { position: relative; }
.home-banner__panel { display: flex; flex-direction: column; gap: 16px; color: var(--ink); }
.home-banner__panel .display { font-size: 40px; line-height: 48px; }
.home-banner__panel .lead { font-size: 19px; line-height: 30px; }
@media (max-width: 900px) {
  .home-banner__img { height: 280px; object-position: 70% 25%; }
  .home-banner__panel { padding: 28px var(--gutter) 40px; }
  .home-banner__panel .display { font-size: 32px; line-height: 40px; }
}
/* Filesharing über die ganze Breite */
.home-fs__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px 64px; align-items: start; }
.home-fs__text .feature-card__text { font-size: 18px; line-height: 29px; }
.home-fs .feature-card__sub { margin-top: 8px; }
@media (max-width: 900px) { .home-fs__grid { grid-template-columns: minmax(0, 1fr); } }
/* Desktop: Foto links (Person sichtbar), Text rechts daneben */
@media (min-width: 901px) {
  .home-banner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 600px; }
  .home-banner__img { height: 100%; min-height: 600px; object-position: 55% 22%; }
  .home-banner__inner { display: flex; align-items: center; padding: 48px max(var(--gutter), calc((100vw - var(--content-max)) / 2)) 48px 48px; }
  .home-banner__panel { max-width: 560px; }
}

/* ---------- Unterseiten: Kopfbereich mit Bild (Rechtsgebiete, Leistungen, Vita) ---------- */
.page-hero .split { align-items: center; }
.page-hero__media { flex: 1 1 380px; max-width: 540px; margin: 0; }
.page-hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--leaf); }
.page-hero--portrait .page-hero__media { flex: 0 1 340px; max-width: 340px; }
.page-hero--portrait .page-hero__media img { aspect-ratio: 3 / 4; object-position: top; }
@media (max-width: 900px) { .page-hero__media { max-width: none; } .page-hero--portrait .page-hero__media { max-width: 280px; } }
.norm-quote { margin: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--brand); font-size: 19px; line-height: 30px; }
.norm-quote__norm { font-weight: 600; color: var(--brand-deep); }
.check-title { display: flex; gap: 10px; align-items: flex-start; }
.check-title svg { flex: none; margin-top: 3px; }
.fee-list { margin: 0; display: flex; flex-direction: column; }
.fee-list > div { padding: 10px 0; border-top: 1px solid var(--line); }
.fee-list dt { font-weight: 600; color: var(--black); }
.fee-list dd { margin: 0; }

/* ---------- Kontaktseite ---------- */
.contact-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 48px 64px; align-items: start; }
.contact-page .profile__photo { width: 96px; height: 128px; }
.contact-list { font-style: normal; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.contact-list p { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.contact-list strong { flex: 0 0 96px; color: var(--black); }
.contact-page__form .form-card { width: 100%; }
@media (max-width: 900px) { .contact-page { grid-template-columns: minmax(0, 1fr); } }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .grid--2 { grid-template-columns: minmax(0, 1fr); } }
.checklist--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
@media (max-width: 720px) { .checklist--2 { grid-template-columns: minmax(0, 1fr); } }
/* Gesetzeszitat (z. B. DDG) */
.law-quote { margin: 0; padding: 24px 28px; background: var(--tint-soft); border-left: 3px solid var(--brand); border-radius: var(--leaf-md); }
.law-quote blockquote { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.law-quote figcaption { margin-top: 12px; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
@media (max-width: 640px) { .law-quote { padding: 20px; } }
.text-center { text-align: center; }
/* Inhaltsverzeichnis mit eigener Nummerierung der Überschriften (I., II. … / 1., 2. …) */
.toc .toc--eigene-nr a::before { content: attr(data-nr); }

/* ---------- Grafik „So funktioniert ein VPN“ ---------- */
.vpn-grafik { margin: 0; padding: 28px; display: flex; flex-direction: column; gap: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--leaf); }
.vpn-grafik__titel { font-family: var(--font-display); font-size: 22px; line-height: 30px; color: var(--black); }
.vpn-grafik__zeile { display: flex; flex-direction: column; gap: 12px; }
.vpn-grafik__zeile + .vpn-grafik__zeile { padding-top: 24px; border-top: 1px solid var(--line); }
.vpn-grafik__label { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.vpn-grafik__hinweis { font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.vpn-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; }
.vpn-node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px 12px; background: var(--tint-soft); border-radius: var(--leaf-md); height: 100%; justify-content: center; }
.vpn-node svg { width: 32px; height: 32px; fill: none; stroke: var(--brand-deep); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.vpn-node strong { font-size: 16px; line-height: 22px; color: var(--black); }
.vpn-node span { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.vpn-node--vpn { background: var(--tint); }
.vpn-ip { margin-top: 4px; padding: 2px 10px; border-radius: 999px; font-weight: 600; }
.vpn-node .vpn-ip--warn { color: var(--deadline); background: #fdf3e6; }
.vpn-node .vpn-ip--ok { color: #1e7a46; background: #e8f4ec; }
.vpn-pfeil { position: relative; height: 24px; display: grid; place-items: center; }
.vpn-pfeil > span { position: absolute; left: 6px; right: 10px; top: 50%; height: 2px; background: var(--ink-muted); }
.vpn-pfeil > span::after { content: ""; position: absolute; right: -8px; top: -5px; border: 6px solid transparent; border-left: 8px solid var(--ink-muted); }
.vpn-pfeil--tunnel > span { height: 8px; margin-top: -3px; background: var(--brand); border-radius: 4px; }
.vpn-pfeil--tunnel > span::after { top: -2px; border-left-color: var(--brand); }
.vpn-pfeil--tunnel svg { position: relative; width: 22px; height: 22px; padding: 3px; background: var(--surface); border-radius: 50%; fill: none; stroke: var(--brand-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: -30px; }
@media (max-width: 720px) {
  .vpn-grafik { padding: 20px 16px; }
  .vpn-flow { grid-template-columns: minmax(0, 1fr); }
  .vpn-pfeil { height: 36px; }
  .vpn-pfeil > span { left: 50%; right: auto; top: 4px; bottom: 10px; width: 2px; height: auto; }
  .vpn-pfeil > span::after { right: auto; top: auto; bottom: -8px; left: -5px; border: 6px solid transparent; border-top: 8px solid var(--ink-muted); }
  .vpn-pfeil--tunnel > span { width: 8px; margin: 0 0 0 -3px; height: auto; }
  .vpn-pfeil--tunnel > span::after { left: -2px; border-left-color: transparent; border-top-color: var(--brand); }
  .vpn-pfeil--tunnel svg { margin: 0 0 0 64px; }
}

/* Handy: oberes Formular ausblenden – Formular steht am Seitenende (Entscheidung 07.11.2026) */
@media (max-width: 900px) { .section--hero .split > .form-card { display: none; } }

/* Kopfbild: neben dem Text bis 721px Breite, darunter kompakt über die volle Breite (07.11.2026) */
@media (min-width: 721px) {
  .page-hero .split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: center; }
  .page-hero--portrait .split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr); }
  .page-hero .page-hero__media, .page-hero--portrait .page-hero__media { max-width: none; width: 100%; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .page-hero .split { gap: 32px; }
  .page-hero .page-hero__media img { aspect-ratio: 1 / 1; }
  .page-hero--portrait .page-hero__media img { aspect-ratio: 3 / 4; }
}
@media (max-width: 720px) {
  .page-hero .page-hero__media { max-width: none; width: 100%; }
  .page-hero .page-hero__media img { aspect-ratio: 16 / 9; }
  .page-hero--portrait .page-hero__media { max-width: 240px; }
  .page-hero--portrait .page-hero__media img { aspect-ratio: 3 / 4; }
}

/* ---------- Aktuelles ---------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.post-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--leaf); overflow: hidden; }
.post-card img, .post-card__ohne-bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.post-card__ohne-bild { background: linear-gradient(135deg, var(--tint), var(--tint-soft)); }
.post-card__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 20px 24px 24px; }
.post-card__datum { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.post-card h2 a { color: var(--black); text-decoration: none; }
.post-card h2 a::after { content: ""; position: absolute; inset: 0; }
.post-card:hover h2 a, .post-card h2 a:focus-visible { color: var(--brand); text-decoration: underline; }
.post-card p:not(.post-card__datum) { font-size: 16px; line-height: 26px; }
.post-card__mehr { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--brand); }

/* ---------- Rechtliche Seiten / Entwurfs-Markierungen ---------- */
.section--hero-schmal { padding-bottom: 16px; }
.legal h2 { margin-top: 40px; }
.legal h3 { margin-top: 24px; }
.entwurf-hinweis { padding: 16px 20px; background: #fff6d6; border-left: 4px solid var(--deadline); border-radius: var(--leaf-md); font-size: 16px; line-height: 26px; }
.entwurf { position: relative; margin: 16px 0; padding: 16px 20px; background: #fff6d6; border-left: 4px solid var(--deadline); border-radius: var(--leaf-md); }
.entwurf__label { display: inline-block; margin-bottom: 6px; padding: 1px 8px; border-radius: 999px; background: var(--deadline); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.entwurf__frage { font-size: 15px; line-height: 24px; color: var(--deadline); font-weight: 600; }
.entwurf-alt { margin: 8px 0 16px; padding: 10px 16px; border: 1px dashed var(--line); border-radius: var(--leaf-md); color: var(--ink-muted); font-size: 15px; line-height: 24px; }
.entwurf-alt summary { cursor: pointer; font-weight: 600; }
.entwurf-alt p { text-decoration: line-through; }
.post-card__ohne-bild { background: var(--tint) url("../img/logo-zeichen.svg") center / 64px no-repeat; }

/* ---------- Einwilligungs-Banner (Google Ads) ---------- */
.link-button { padding: 0; border: 0; background: none; font: inherit; color: var(--brand); text-decoration: underline; cursor: pointer; }
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; display: flex; justify-content: center; pointer-events: none; }
.consent__inner { pointer-events: auto; width: 100%; max-width: 760px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; padding: 20px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--leaf); box-shadow: 0 12px 40px rgba(22, 61, 99, .18); }
.consent__titel { flex: 1 0 100%; font-family: var(--font-display); font-size: 20px; line-height: 28px; color: var(--black); }
.consent__text { flex: 1 1 380px; font-size: 15px; line-height: 24px; color: var(--ink); }
.consent__knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }
.consent__knoepfe .btn { min-width: 150px; justify-content: center; }
@media (max-width: 900px) { .consent { left: 8px; right: 8px; bottom: 64px; } .consent__inner { padding: 16px; } .consent__knoepfe { width: 100%; } .consent__knoepfe .btn { flex: 1 1 0; min-width: 0; } }

/* ---------- Vollmacht unterschreiben ---------- */
.vollmacht { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.vollmacht__kopf { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.vollmacht__unter { font-size: 20px; line-height: 28px; }
.vollmacht__an, .vollmacht__sache { text-align: center; }
.vollmacht__sache span { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vollmacht__punkte { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.vollmacht .field { display: flex; flex-direction: column; gap: 6px; }
.vollmacht .field label, .vollmacht__label { font-weight: 600; color: var(--black); }
.vollmacht input[type="text"], .vollmacht input[type="date"] { font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); max-width: 100%; }
.signatur { position: relative; border: 2px dashed var(--line); border-radius: var(--leaf-md); background: #fff; }
.signatur__flaeche { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; }
.signatur__hinweis { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; color: var(--ink-muted); pointer-events: none; }
.vollmacht .link-button { align-self: flex-start; font-size: 15px; }
.vollmacht__fehler { padding: 10px 14px; border-radius: 8px; background: #fdf3e6; color: var(--deadline); font-weight: 600; }
.vollmacht__senden { align-self: stretch; justify-content: center; }
[hidden] { display: none !important; }