/* =========================================================================
   UmzugsfirmaFinden 2.0 – Design System v0.1 (Demo)
   Konzept „Wegweiser“: klare Leitsystem-Logik (Navy-Flächen, Teal-Wegmarken),
   Rechenwege als Belege (Ledger), Routenlinie aus dem Logo als Prozess-Motiv.
   Nur Light-Theme (bewusste Markenentscheidung), alle Farben als Token.
   ========================================================================= */
:root {
  color-scheme: light;
  /* Farbe – Kern */
  --navy-900: #0f2d43;   /* Text Überschriften, Footer, starke Flächen */
  --navy-700: #173b57;   /* Links, Sekundär-Buttons */
  --navy-500: #3d5d74;
  --ink: #1c2f3c;        /* Fließtext */
  --muted: #55656e;      /* Metatext (5.5:1 auf Weiß) */
  --teal: #28aaa7;       /* Marke, Linien, Grafiken (nicht für kleinen Text auf Weiß) */
  --teal-700: #17706d;   /* Teal für Text auf Weiß (5.9:1) */
  --teal-100: #e3f4f3;
  --teal-50: #f1f9f9;
  --coral: #f36f56;      /* Aktion: primärer Button (mit Navy-Text, 4.9:1) */
  --coral-600: #e2563c;
  --coral-700: #b8432c;  /* Warnungen: Text/Rand (5.4:1) */
  --coral-50: #fff2ee;
  --sun: #f5c451;        /* Datenmarkierung, Entrümpelung-Cluster */
  --ochre-700: #7a5200;  /* Text im Entrümpelung-Cluster (6.4:1 auf sun-50) */
  --sun-100: #fdecc0;
  --sun-50: #fff8e6;
  /* Neutrale (kühles Perlgrau statt Creme) */
  --bg: #ffffff;
  --pearl: #f3f6f7;
  --pearl-2: #e9eef0;
  --line: #d6dfe3;
  --line-strong: #b7c5cc;
  --on-dark: #ffffff;
  --on-dark-muted: #b9cad3;
  /* Cluster-Akzent (wird pro Seite überschrieben) */
  --cluster: var(--teal);
  --cluster-ink: var(--teal-700);
  --cluster-soft: var(--teal-50);

  /* Typografie */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --fs-xs: .8125rem;   /* 13 */
  --fs-sm: .9375rem;   /* 15 */
  --fs-base: 1.0625rem;/* 17 */
  --fs-lg: 1.1875rem;  /* 19 */
  --fs-h4: 1.0625rem;
  --fs-h3: 1.3125rem;  /* 21 */
  --fs-h2: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --fs-h1: clamp(2rem, 1.45rem + 2.2vw, 3rem);
  --fs-display: clamp(2.125rem, 1.5rem + 2.4vw, 3.125rem);

  /* Raster & Abstände */
  --max: 1100px;
  --read: 740px;
  --gutter: 24px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r-sm: 3px;
  --r: 6px;
  --r-lg: 10px;
  --focus: 0 0 0 3px #ffffff, 0 0 0 5px var(--navy-700);
  --shadow-pop: 0 10px 30px rgba(15, 45, 67, .14);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  font-optical-sizing: auto;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--navy-700); text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--navy-900); text-decoration-color: var(--coral); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
h1, h2, h3, h4 { color: var(--navy-900); text-wrap: balance; margin: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.012em; font-variation-settings: "SOFT" 0, "WONK" 0; }
h1 { font-size: var(--fs-h1); line-height: 1.08; }
h2 { font-size: var(--fs-h2); line-height: 1.18; }
h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 700; letter-spacing: -.005em; }
h4 { font-size: var(--fs-h4); font-weight: 700; }
p { margin: 0; }
.num, table, .ledger { font-variant-numeric: tabular-nums; }
.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.read { max-width: var(--read); }
.stack > * + * { margin-top: var(--s4); }
.stack-lg > * + * { margin-top: var(--s5); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s4); top: -60px; background: var(--navy-900); color: #fff; padding: 8px 14px; z-index: 100; border-radius: var(--r); }
.skip:focus { top: 8px; }
@media (max-width: 560px) { :root { --gutter: 16px; --fs-base: 1rem; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Kleine Typo-Bausteine ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--cluster-ink); }
.eyebrow::before { content: ""; width: 18px; height: 3px; background: var(--cluster); border-radius: 2px; }
.lead { font-size: var(--fs-lg); line-height: 1.6; color: #34495a; }
.meta { font-size: var(--fs-sm); color: var(--muted); }
.mark { background: linear-gradient(transparent 58%, var(--sun-100) 58%); padding-inline: 2px; }
.chip { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--r-sm); background: var(--pearl); color: var(--navy-700); border: 1px solid var(--line); }
.chip--teal { background: var(--teal-50); color: var(--teal-700); border-color: #bfe3e1; }
.chip--sun { background: var(--sun-50); color: var(--ochre-700); border-color: var(--sun-100); }
.chip--coral { background: var(--coral-50); color: var(--coral-700); border-color: #f7c9bd; }

/* ---------- Demo-Hinweisleiste ---------- */
.demo-bar { background: var(--navy-900); color: var(--on-dark-muted); font-size: var(--fs-xs); }
.demo-bar .wrap { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; justify-content: space-between; padding-block: 6px; }
.demo-bar strong { color: var(--sun); font-weight: 700; letter-spacing: .04em; }
.demo-bar a { color: #fff; text-decoration-color: var(--teal); }
.demo-bar code { color: #fff; font-size: .95em; }

/* ---------- Header & Navigation ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); }
.site-header__in { display: flex; align-items: center; gap: var(--s5); min-height: 72px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand svg { display: block; height: 40px; width: auto; }
.nav { margin-left: auto; }
.nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav__item { position: relative; }
.nav__btn { white-space: nowrap; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--navy-900); background: none; border: 0; padding: 10px 12px; border-radius: var(--r); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.nav__btn:hover, .nav__btn[aria-expanded="true"] { background: var(--pearl); }
.nav__btn svg { width: 10px; transition: transform .15s; }
.nav__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__btn.is-current { box-shadow: inset 0 -3px 0 var(--teal); border-radius: var(--r) var(--r) 0 0; }
.dropdown { position: absolute; top: calc(100% + 10px); left: -12px; width: 560px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: var(--s5); display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s5); }
.dropdown[hidden] { display: none; }
.nav__item:last-of-type .dropdown, .nav__item:nth-last-of-type(2) .dropdown { left: auto; right: -12px; }
.dropdown__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dropdown__links a { display: block; padding: 8px 10px; border-radius: var(--r); text-decoration: none; color: var(--navy-900); font-weight: 600; font-size: var(--fs-sm); line-height: 1.35; }
.dropdown__links a span { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }
.dropdown__links a:hover { background: var(--pearl); }
.dropdown__aside { background: var(--pearl); border-radius: var(--r); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); font-size: var(--fs-sm); }
.dropdown__aside strong { color: var(--navy-900); font-size: var(--fs-base); line-height: 1.3; }
.dropdown__aside .btn { margin-top: auto; align-self: flex-start; }
.header-cta { flex-shrink: 0; }
.menu-toggle { display: none; margin-left: auto; font: inherit; font-weight: 700; font-size: var(--fs-sm); color: var(--navy-900); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r); padding: 9px 12px; align-items: center; gap: 8px; cursor: pointer; min-height: 44px; }
.menu-toggle svg { width: 18px; }
.mobile-nav { border-top: 1px solid var(--line); background: #fff; max-height: calc(100vh - 72px); overflow-y: auto; }
.mobile-nav[hidden] { display: none; }
.mobile-nav details { border-bottom: 1px solid var(--line); }
.mobile-nav summary { list-style: none; cursor: pointer; padding: 14px 0; font-weight: 700; color: var(--navy-900); display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--teal-700); }
.mobile-nav details[open] summary::after { content: "–"; }
.mobile-nav ul { list-style: none; margin: 0 0 var(--s3); padding: 0; }
.mobile-nav li a { display: block; padding: 10px 12px; text-decoration: none; color: var(--navy-700); border-left: 2px solid var(--line); min-height: 44px; }
.mobile-nav__cta { padding-block: var(--s4) var(--s5); }
@media (max-width: 980px) {
  .nav, .site-header__in .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .brand svg { height: 34px; }
  .site-header__in { min-height: 62px; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: var(--fs-sm); font-weight: 700; line-height: 1.2; text-decoration: none; padding: 12px 18px; min-height: 46px; border-radius: var(--r); border: 1.5px solid transparent; cursor: pointer; transition: background .15s, border-color .15s; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--primary { background: var(--coral); color: var(--navy-900); }
.btn--primary:hover { background: var(--coral-600); color: var(--navy-900); }
.btn--secondary { background: #fff; color: var(--navy-900); border-color: var(--navy-700); }
.btn--secondary:hover { background: var(--pearl); color: var(--navy-900); }
.btn--dark { background: var(--navy-900); color: #fff; }
.btn--dark:hover { background: var(--navy-700); color: #fff; }
.btn--ghost { background: transparent; color: var(--navy-700); padding-inline: 4px; min-height: 40px; text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 4px; }
.btn--on-dark { background: #fff; color: var(--navy-900); }
.btn--sm { min-height: 38px; padding: 8px 12px; font-size: var(--fs-xs); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.link-arrow { font-weight: 700; color: var(--navy-700); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.link-arrow::after { content: "→"; color: var(--teal-700); transition: transform .15s; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- Seitenkopf / Hero ---------- */
.page-head { border-bottom: 1px solid var(--line); background: var(--bg); position: relative; }
.page-head::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--cluster); }
.page-head__in { padding-block: var(--s6) var(--s6); display: grid; gap: var(--s4); }
.page-head h1 { max-width: 24ch; }
.page-head .lead { max-width: 62ch; }
.page-head--tool { background: var(--pearl); }
.breadcrumbs { font-size: var(--fs-xs); color: var(--muted); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "›"; margin-right: 4px; color: var(--line-strong); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--navy-900); text-decoration: underline; }
.byline { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: var(--fs-sm); color: var(--muted); }
.byline img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.byline__who { display: inline-flex; gap: 10px; align-items: center; color: var(--ink); }
.byline__who a { font-weight: 700; }

/* Stand-Stempel */
.stamp { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--teal-700); border: 1.5px solid var(--teal); padding: 3px 8px; border-radius: var(--r-sm); }
.stamp svg { width: 14px; height: 14px; }

/* Home-Hero */
.hero { background: var(--navy-900); color: var(--on-dark); }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s7); align-items: center; padding-block: var(--s7); }
.hero h1 { color: #fff; font-size: var(--fs-display); line-height: 1.06; max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--sun); }
.hero .lead { color: var(--on-dark-muted); max-width: 46ch; margin-top: var(--s4); }
.hero .eyebrow { color: var(--teal); }
.hero__facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: var(--s5); font-size: var(--fs-sm); color: #dbe6ec; list-style: none; padding: 0; }
.hero__facts li { display: inline-flex; gap: 8px; align-items: center; }
.hero__facts svg { width: 16px; color: var(--teal); }
@media (max-width: 900px) { .hero__in { grid-template-columns: 1fr; gap: var(--s6); padding-block: var(--s6); } }

/* ---------- Sektionen ---------- */
.section { padding-block: var(--s8); }
.section--pearl { background: var(--pearl); }
.section--tight { padding-block: var(--s7); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s3) var(--s5); margin-bottom: var(--s6); }
.section-head > div { max-width: 640px; display: grid; gap: var(--s2); }
.section-head p { color: var(--muted); }
@media (max-width: 560px) { .section { padding-block: var(--s7); } }

/* ---------- Karten ---------- */
.grid { display: grid; gap: var(--s5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* Aufgaben-Karte (Cluster-Einstieg) – gleich hohe Spalten, keine Schatten */
.task { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); border: 1px solid var(--line); border-top: 4px solid var(--task-color, var(--teal)); border-radius: var(--r); background: #fff; min-width: 0; }
.task h3 { font-size: 1.1875rem; }
.task p { font-size: var(--fs-sm); color: var(--muted); }
.task ul { list-style: none; margin: auto 0 0; padding: var(--s3) 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.task li a { font-size: var(--fs-sm); font-weight: 600; text-decoration: none; display: flex; justify-content: space-between; gap: 8px; }
.task li a::after { content: "→"; color: var(--teal-700); }
.task li a:hover { text-decoration: underline; }
.task--sun { --task-color: var(--sun); }
.task--coral { --task-color: var(--coral); }
.task--navy { --task-color: var(--navy-700); }

/* Werkzeug-Karte */
.tool-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s3); padding: var(--s5); border-radius: var(--r); background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; min-width: 0; }
.tool-card:hover { border-color: var(--navy-700); }
.tool-card__icon { width: 40px; height: 40px; border-radius: var(--r); background: var(--teal-50); color: var(--teal-700); display: grid; place-items: center; }
.tool-card__icon svg { width: 22px; height: 22px; }
.tool-card h3 { font-size: 1.125rem; color: var(--navy-900); }
.tool-card p { font-size: var(--fs-sm); color: var(--muted); }
.tool-card__foot { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-xs); color: var(--muted); padding-top: var(--s3); border-top: 1px dashed var(--line); }
.tool-card__foot span:last-child { color: var(--navy-700); font-weight: 700; }

/* Artikel-Karte (für Related) */
.article-card { display: grid; gap: var(--s2); padding-block: var(--s4); border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.article-card:hover h3 { text-decoration: underline; text-decoration-color: var(--teal); }
.article-card h3 { font-size: 1.0625rem; color: var(--navy-900); }
.article-card p { font-size: var(--fs-sm); color: var(--muted); }

/* Link-Liste kompakt (statt Karten-Flut) */
.link-list { list-style: none; margin: 0; padding: 0; display: grid; }
.link-list li { border-top: 1px solid var(--line); }
.link-list li:last-child { border-bottom: 1px solid var(--line); }
.link-list a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 2px; text-decoration: none; color: var(--navy-900); font-weight: 700; }
.link-list a span { grid-column: 1; font-weight: 400; color: var(--muted); font-size: var(--fs-sm); }
.link-list a::after { content: "→"; grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--teal-700); }
.link-list a:hover { background: var(--pearl); }

/* ---------- Artikel-Layout ---------- */
.layout { display: grid; grid-template-columns: minmax(0, var(--read)) minmax(0, 1fr); gap: var(--s7); padding-block: var(--s7) var(--s8); }
.layout--full { grid-template-columns: minmax(0, 1fr); }
.sidebar { position: sticky; top: 96px; align-self: start; display: grid; gap: var(--s5); }
@media (max-width: 980px) { .layout { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } .sidebar { position: static; } }

.prose { min-width: 0; }
.prose > * + * { margin-top: var(--s4); }
.prose > h2 { margin-top: var(--s7); padding-top: var(--s2); }
.prose > h3 { margin-top: var(--s6); }
.prose > h2 + *, .prose > h3 + * { margin-top: var(--s3); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--teal-700); }
.prose strong { color: var(--navy-900); }

/* Figur / Bildplatz */
.figure { margin: 0; }
.figure__img { aspect-ratio: 16 / 9; width: 100%; max-width: 100%; border-radius: var(--r); background: repeating-linear-gradient(135deg, var(--pearl) 0 12px, var(--pearl-2) 12px 24px); display: grid; place-items: center; color: var(--navy-500); font-size: var(--fs-sm); text-align: center; padding: var(--s4); border: 1px solid var(--line); }
.figure__img strong { display: block; color: var(--navy-900); }
.figure figcaption { font-size: var(--fs-xs); color: var(--muted); margin-top: 8px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.figure--wide { margin-block: var(--s5); }

/* TOC */
.toc { border-left: 3px solid var(--cluster); padding: var(--s2) 0 var(--s2) var(--s4); }
.toc__title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: grid; grid-template-columns: 22px 1fr; text-decoration: none; font-size: var(--fs-sm); color: var(--navy-700); padding: 4px 0; line-height: 1.4; }
.toc a::before { content: counter(toc); color: var(--muted); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--navy-900); text-decoration: underline; }
.toc-mobile { display: none; border: 1px solid var(--line); border-radius: var(--r); padding: 0 var(--s4); }
.toc-mobile summary { padding: 12px 0; font-weight: 700; cursor: pointer; color: var(--navy-900); min-height: 44px; }
.toc-mobile .toc { border: 0; padding: 0 0 var(--s3); }
@media (max-width: 980px) { .toc-mobile { display: block; } .sidebar .toc { display: none; } }

/* ---------- Hinweise, Warnungen, Einordnung ---------- */
.answer { border: 1.5px solid var(--navy-900); border-radius: var(--r); padding: var(--s4) var(--s5); background: #fff; position: relative; }
.answer__label { position: absolute; top: -11px; left: 16px; background: var(--navy-900); color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-sm); }
.answer p { font-size: var(--fs-base); }
.note { display: grid; grid-template-columns: 22px 1fr; gap: var(--s3); background: var(--teal-50); border: 1px solid #c9e8e6; border-radius: var(--r); padding: var(--s4); font-size: var(--fs-sm); }
.note svg { width: 22px; height: 22px; color: var(--teal-700); }
.note strong { color: var(--navy-900); }
.warn { display: grid; grid-template-columns: 22px 1fr; gap: var(--s3); background: var(--coral-50); border: 1px solid #f4c6b9; border-left: 4px solid var(--coral-700); border-radius: var(--r); padding: var(--s4); font-size: var(--fs-sm); }
.warn svg { width: 22px; height: 22px; color: var(--coral-700); }
.warn strong { color: var(--coral-700); }
.callout { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s5) 0; display: grid; grid-template-columns: 56px 1fr; gap: var(--s4); }
.callout img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.callout__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-700); }
.callout blockquote { margin: 6px 0 0; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.45; color: var(--navy-900); font-weight: 500; }
.callout cite { display: block; margin-top: 8px; font-style: normal; font-size: var(--fs-sm); color: var(--muted); }

/* Kennzahlen-Leiste (nur wo Zahlen der Punkt sind) */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.facts > div { padding: var(--s4); border-right: 1px solid var(--line); }
.facts > div:last-child { border-right: 0; }
.facts dt { font-size: var(--fs-xs); color: var(--muted); }
.facts dd { margin: 4px 0 0; font-weight: 700; font-size: 1.25rem; color: var(--navy-900); font-variant-numeric: tabular-nums; line-height: 1.25; }
.facts dd small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 560px) { .facts > div { border-right: 0; border-bottom: 1px solid var(--line); } .facts > div:last-child { border-bottom: 0; } }

/* ---------- Tabellen ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table caption { text-align: left; padding: var(--s3) var(--s4); font-size: var(--fs-xs); color: var(--muted); caption-side: bottom; border-top: 1px solid var(--line); }
.table th, .table td { padding: 11px var(--s4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table thead th { background: var(--pearl); color: var(--navy-900); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1.5px solid var(--navy-900); white-space: nowrap; }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table tbody th { font-weight: 700; color: var(--navy-900); }
.table .r { text-align: right; white-space: nowrap; }
.table .hl td, .table .hl th { background: var(--sun-50); }
.table--stack td::before { content: none; }
@media (max-width: 600px) {
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack th, .table--stack td { display: block; width: 100%; }
  .table--stack tr { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
  .table--stack tr:last-child { border-bottom: 0; }
  .table--stack th, .table--stack td { border: 0; padding: 3px 0; }
  .table--stack td { display: flex; justify-content: space-between; gap: 12px; }
  .table--stack td::before { content: attr(data-label); color: var(--muted); font-size: var(--fs-xs); }
  .table--stack .r { text-align: right; }
}

/* ---------- Quellen, Autor, Stand ---------- */
.sources { border-top: 1.5px solid var(--navy-900); padding-top: var(--s4); }
.sources h2 { font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.sources ol { margin: var(--s3) 0 0; padding-left: 1.3em; font-size: var(--fs-sm); color: var(--muted); display: grid; gap: 6px; }
.sources a { color: var(--navy-700); }
.author { display: grid; grid-template-columns: 88px 1fr; gap: var(--s4); padding: var(--s5); background: var(--pearl); border-radius: var(--r); align-items: start; }
.author img { width: 88px; height: 88px; border-radius: var(--r); object-fit: cover; }
.author h3 { font-size: 1.125rem; }
.author p { font-size: var(--fs-sm); color: #3d4f5b; margin-top: 4px; }
.author .meta { margin-top: 8px; }
@media (max-width: 480px) { .author { grid-template-columns: 64px 1fr; padding: var(--s4); } .author img { width: 64px; height: 64px; } }

/* ---------- Werkzeug-Gehäuse ---------- */
.tool { border: 1.5px solid var(--navy-900); border-radius: var(--r-lg); background: #fff; color: var(--ink); overflow: hidden; min-width: 0; }
.tool__head { background: var(--navy-900); color: #fff; padding: var(--s4) var(--s5); display: flex; justify-content: space-between; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.tool__head h2, .tool__head h3 { color: #fff; font-family: var(--font-body); font-size: 1.125rem; font-weight: 700; letter-spacing: 0; }
.tool__head .meta { color: var(--on-dark-muted); font-size: var(--fs-xs); }
.tool__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tool__form { padding: var(--s5); display: grid; gap: var(--s4); align-content: start; }
.tool__result { padding: var(--s5); background: var(--pearl); border-left: 1px solid var(--line); display: grid; gap: var(--s4); align-content: start; }
.tool--stacked .tool__body { grid-template-columns: 1fr; }
.tool--stacked .tool__result { border-left: 0; border-top: 1px solid var(--line); }
.tool__foot { padding: var(--s3) var(--s5); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
@media (max-width: 760px) { .tool__body { grid-template-columns: 1fr; } .tool__result { border-left: 0; border-top: 1px solid var(--line); } }
.tool--on-dark { border-color: rgba(255,255,255,.18); }

/* Schrittanzeige im Tool */
.tool-steps { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--on-dark-muted); }
.tool-steps li { display: flex; align-items: center; gap: 6px; }
.tool-steps li + li::before { content: ""; width: 20px; height: 1.5px; background: rgba(255,255,255,.3); margin-inline: 8px; }
.tool-steps .is-on { color: #fff; }
.tool-steps b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; font-size: 11px; }

/* ---------- Formulare ---------- */
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .field > legend, .fieldset > legend { font-size: var(--fs-sm); font-weight: 700; color: var(--navy-900); padding: 0; }
.field .hint { font-size: var(--fs-xs); color: var(--muted); }
.input, .select { width: 100%; font: inherit; font-size: var(--fs-base); color: var(--ink); background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--r); padding: 10px 12px; min-height: 46px; }
.input:hover, .select:hover { border-color: var(--navy-500); }
.input:focus-visible, .select:focus-visible { border-color: var(--navy-700); box-shadow: 0 0 0 3px #cfe0ea; border-radius: var(--r); }
.input[aria-invalid="true"] { border-color: var(--coral-700); background: var(--coral-50); }
.error { font-size: var(--fs-xs); color: var(--coral-700); font-weight: 700; display: flex; gap: 6px; align-items: center; }
.unit { position: relative; }
.unit .input { padding-right: 52px; }
.unit span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: var(--fs-sm); pointer-events: none; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 420px) { .row-2 { grid-template-columns: 1fr; } }
.fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1.5px solid var(--line-strong); border-radius: var(--r); overflow: hidden; }
.segmented label { position: relative; text-align: center; font-size: var(--fs-sm); font-weight: 600; padding: 10px 8px; cursor: pointer; color: var(--navy-700); min-height: 44px; display: grid; place-items: center; line-height: 1.2; }
.segmented label + label { border-left: 1.5px solid var(--line-strong); }
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented input:checked + span { color: #fff; }
.segmented label:has(input:checked) { background: var(--navy-900); color: #fff; }
.segmented label:has(input:focus-visible) { box-shadow: inset 0 0 0 3px var(--coral); }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: var(--fs-sm); cursor: pointer; padding: 6px 0; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--navy-900); }
.check small { display: block; color: var(--muted); font-size: var(--fs-xs); }

/* ---------- Ergebnis / Rechenweg (Beleg) ---------- */
.result__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.result__value { font-family: var(--font-display); font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); line-height: 1.05; color: var(--navy-900); font-weight: 600; font-variant-numeric: tabular-nums; }
.result__sub { font-size: var(--fs-sm); color: var(--muted); }
.range { position: relative; height: 10px; background: var(--pearl-2); border-radius: 5px; margin-top: 4px; }
.range__band { position: absolute; top: 0; bottom: 0; background: var(--teal); border-radius: 5px; }
.range__mid { position: absolute; top: -4px; width: 3px; height: 18px; background: var(--navy-900); border-radius: 2px; }
.range-scale { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); }
.ledger { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); display: grid; gap: 7px; }
.ledger li { display: flex; align-items: baseline; gap: 8px; }
.ledger li span:first-child { flex: none; max-width: 70%; }
.ledger li::after { content: none; }
.ledger .dots { flex: 1; border-bottom: 1.5px dotted var(--line-strong); transform: translateY(-4px); min-width: 12px; }
.ledger li span:last-child { flex: none; font-weight: 700; color: var(--navy-900); }
.ledger .total { border-top: 1.5px solid var(--navy-900); padding-top: 8px; margin-top: 4px; font-weight: 700; }
.ledger .total span:first-child { color: var(--navy-900); }
.result__note { font-size: var(--fs-xs); color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--s3); }

/* ---------- Vergleichsblock ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.compare > div { padding: var(--s5); display: grid; gap: var(--s3); align-content: start; }
.compare > div + div { border-left: 1px solid var(--line); }
.compare h3 { font-size: 1.0625rem; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.compare h3 span { font-family: var(--font-display); font-size: 1.5rem; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.compare ul { margin: 0; padding-left: 1.1em; font-size: var(--fs-sm); display: grid; gap: 4px; }
.compare__head { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; } .compare > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* ---------- Checkliste ---------- */
.checklist { border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.checklist__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.checklist__head strong { color: var(--navy-900); }
.progress { width: 140px; height: 6px; background: var(--pearl-2); border-radius: 3px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--teal); width: 0; transition: width .2s; }
.checklist ul { list-style: none; margin: 0; padding: var(--s2) var(--s4); }
.checklist li { border-bottom: 1px solid var(--pearl-2); }
.checklist li:last-child { border-bottom: 0; }
.checklist label { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; padding: 10px 0; cursor: pointer; font-size: var(--fs-sm); align-items: start; }
.checklist input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--teal-700); }
.checklist label:has(input:checked) .task-text { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--teal); }
.checklist .task-text small { display: block; color: var(--muted); font-size: var(--fs-xs); text-decoration: none; }
.checklist .due { font-size: var(--fs-xs); font-weight: 700; color: var(--navy-700); white-space: nowrap; }

/* ---------- Schritte (Routenlinie aus dem Logo) ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: var(--s4); position: relative; padding-bottom: var(--s5); }
.steps li::before { content: ""; position: absolute; left: 16px; top: 30px; bottom: 0; width: 3px; background: var(--navy-900); border-radius: 2px; }
.steps li:last-child::before { display: none; }
.steps li:last-child { padding-bottom: 0; }
.steps__dot { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--coral); background: #fff; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); color: var(--navy-900); z-index: 1; }
.steps li:last-child .steps__dot { border-color: var(--teal); background: var(--teal); color: #fff; }
.steps h3 { font-size: 1.0625rem; padding-top: 4px; }
.steps p { font-size: var(--fs-sm); color: #3d4f5b; margin-top: 4px; }

/* Routen-Band (Start ●────⌂ Ziel) */
.route-line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s4); }
.route-line__end { display: grid; gap: 2px; }
.route-line__end strong { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); color: var(--navy-900); line-height: 1.05; }
.route-line__end span { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.route-line__end--to { text-align: right; }
.route-line__track { position: relative; height: 34px; }
.route-line__track::before { content: ""; position: absolute; left: 10px; right: 14px; top: 50%; height: 4px; transform: translateY(-50%); background: var(--navy-900); border-radius: 2px; }
.route-line__track i { position: absolute; left: 0; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); border-radius: 50%; border: 4px solid var(--coral); background: #fff; }
.route-line__track b { position: absolute; right: 0; top: 50%; transform: translateY(-58%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 14px solid var(--teal); }
.route-line__track em { position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%); font-style: normal; font-weight: 700; font-size: var(--fs-sm); color: var(--navy-900); background: #fff; padding: 0 8px; white-space: nowrap; }
@media (max-width: 560px) { .route-line { grid-template-columns: 1fr 1fr; } .route-line__track { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Firmen-Eintrag (lokal, verifiziert – ohne Ranking) ---------- */
.firm { border: 1px solid var(--line); border-radius: var(--r); background: #fff; display: grid; grid-template-columns: minmax(0, 1fr) 220px; }
.firm__main { padding: var(--s5); display: grid; gap: var(--s3); }
.firm__main h3 { font-size: 1.125rem; }
.firm__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.firm__aside { padding: var(--s5); border-left: 1px solid var(--line); background: var(--pearl); font-size: var(--fs-xs); display: grid; gap: 8px; align-content: start; }
.firm__aside dt { color: var(--muted); }
.firm__aside dd { margin: 0; font-weight: 700; color: var(--navy-900); }
.firm--placeholder { border-style: dashed; }
@media (max-width: 680px) { .firm { grid-template-columns: 1fr; } .firm__aside { border-left: 0; border-top: 1px solid var(--line); } }

/* ---------- Angebots-Check ---------- */
.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.offer { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); display: grid; gap: var(--s3); align-content: start; background: #fff; min-width: 0; }
.offer__title { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.offer__title strong { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.offer--empty { border-style: dashed; background: var(--pearl); place-content: center; text-align: center; min-height: 200px; }
@media (max-width: 860px) { .offers { grid-template-columns: 1fr; } }
.matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.matrix th, .matrix td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.matrix thead th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--navy-900); border-bottom: 1.5px solid var(--navy-900); background: var(--pearl); }
.matrix tbody th { font-weight: 600; color: var(--navy-900); width: 34%; }
.matrix td { white-space: nowrap; }
.st { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-xs); }
.st::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.st--ok { color: var(--teal-700); } .st--ok::before { background: var(--teal); }
.st--miss { color: var(--coral-700); } .st--miss::before { background: transparent; border: 2px solid var(--coral-700); width: 8px; height: 8px; }
.st--warn { color: var(--ochre-700); } .st--warn::before { background: var(--sun); border-radius: 2px; transform: rotate(45deg); }
.verdict { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.verdict > div { border-top: 4px solid var(--line); padding-top: var(--s3); display: grid; gap: 6px; align-content: start; }
.verdict .is-ok { border-top-color: var(--teal); }
.verdict .is-warn { border-top-color: var(--sun); }
.verdict .is-bad { border-top-color: var(--coral-700); }
.verdict h3 { font-size: 1rem; }
.verdict ul { margin: 0; padding-left: 1.1em; font-size: var(--fs-sm); display: grid; gap: 4px; }
@media (max-width: 860px) { .verdict { grid-template-columns: 1fr; } }
.questions { counter-reset: q; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.questions li { counter-increment: q; display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: var(--fs-sm); background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.questions li::before { content: counter(q); width: 24px; height: 24px; border-radius: 50%; background: var(--navy-900); color: #fff; font-size: var(--fs-xs); font-weight: 700; display: grid; place-items: center; }

/* ---------- Nächster Schritt ---------- */
.next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4) var(--s6); align-items: center; padding: var(--s5) var(--s6); border-radius: var(--r-lg); background: var(--navy-900); color: #fff; }
.next__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--teal); }
.next h2, .next h3 { color: #fff; font-size: 1.375rem; margin-top: 4px; font-family: var(--font-display); }
.next p { color: var(--on-dark-muted); font-size: var(--fs-sm); margin-top: 6px; }
@media (max-width: 640px) { .next { grid-template-columns: 1fr; padding: var(--s5); } }

/* ---------- Cluster-Navigation (Pfeiler) ---------- */
.cluster-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.cluster-nav a { padding: var(--s4); text-decoration: none; color: var(--navy-900); font-weight: 700; font-size: var(--fs-sm); border-right: 1px solid var(--line); display: grid; gap: 4px; }
.cluster-nav a:last-child { border-right: 0; }
.cluster-nav a span { font-weight: 400; color: var(--muted); font-size: var(--fs-xs); }
.cluster-nav a[aria-current="page"] { background: var(--cluster-soft); box-shadow: inset 0 3px 0 var(--cluster); }
.cluster-nav a:hover { background: var(--pearl); }
@media (max-width: 760px) { .cluster-nav { grid-template-columns: 1fr 1fr; } .cluster-nav a:nth-child(2) { border-right: 0; } .cluster-nav a:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

/* ---------- Cluster-Varianten ---------- */
.c-entruempelung { --cluster: var(--sun); --cluster-ink: var(--ochre-700); --cluster-soft: var(--sun-50); }
.c-entruempelung .page-head { background: var(--sun-50); }
.c-entruempelung .tool { border-color: var(--navy-900); }
.c-entruempelung .range__band { background: var(--sun); }
.c-entruempelung .steps__dot { border-color: var(--sun); }
.c-vertrauen { --cluster: var(--navy-700); --cluster-ink: var(--navy-700); --cluster-soft: var(--pearl); }
.c-firmen { --cluster: var(--coral); --cluster-ink: var(--coral-700); --cluster-soft: var(--coral-50); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: var(--on-dark-muted); font-size: var(--fs-sm); margin-top: 0; }
.site-footer__top { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: var(--s6); padding-block: var(--s7) var(--s6); }
.site-footer h2 { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #fff; margin-bottom: var(--s3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-footer a { color: var(--on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--teal); }
.site-footer__brand p { margin-top: var(--s4); max-width: 34ch; }
.site-footer__brand svg { height: 38px; width: auto; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.14); padding-block: var(--s4); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); font-size: var(--fs-xs); }
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.independence { display: inline-flex; gap: 8px; align-items: center; color: #fff; font-weight: 700; font-size: var(--fs-xs); border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-sm); padding: 4px 8px; margin-top: var(--s4); }
.independence svg { width: 14px; color: var(--teal); }
@media (max-width: 900px) { .site-footer__top { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .site-footer__top { grid-template-columns: 1fr; } }

/* ---------- Hilfsklassen ---------- */
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
.split--wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 900px) { .split, .split--wide { grid-template-columns: 1fr; gap: var(--s6); } }
.is-missing { cursor: help; }
.hero__facts--ink { color: var(--ink); }
.section--sun { background: var(--sun-50); }
.tool__result--plain { border: 0; }
.nw { white-space: nowrap; }

/* =========================================================================
   v0.2 – Ergänzungen (werden für die Produktion in die Basisregeln zusammengeführt)
   ========================================================================= */

/* Foto-Rahmen: Layout unabhängig von der Bildauflösung (später srcset) */
.photo { display: inline-block; flex: none; width: var(--photo, 40px); aspect-ratio: 1 / 1; max-width: 100%; overflow: hidden; border-radius: 50%; background: var(--pearl-2); vertical-align: middle; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo--xs { --photo: 32px; }
.photo--sm { --photo: 56px; }
.photo--md { --photo: 96px; border-radius: var(--r); }
.photo--lg { --photo: 168px; border-radius: var(--r); }
.author { grid-template-columns: auto minmax(0, 1fr); }
.callout { grid-template-columns: auto minmax(0, 1fr); }
@media (max-width: 480px) { .photo--md { --photo: 72px; } .photo--lg { --photo: 120px; } }

/* Demo-Kennzeichnung für alle nicht validierten Wirtschaftsparameter */
.demo-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--coral-700); background: #fff; border: 1px dashed var(--coral-700); padding: 1px 6px; border-radius: var(--r-sm); white-space: nowrap; vertical-align: middle; line-height: 1.6; }
.hero .demo-flag { background: transparent; }

/* Werkzeug-Gehäuse leichter: Werkzeuge sollen die Marke nicht dominieren */
.tool { border: 1px solid var(--line-strong); border-top: 3px solid var(--navy-900); }
.tool__head { background: #fff; color: var(--navy-900); border-bottom: 1px solid var(--line); }
.tool__head h2, .tool__head h3 { color: var(--navy-900); }
.tool__head .meta { color: var(--muted); }
.tool-steps { color: var(--muted); }
.tool-steps .is-on { color: var(--navy-900); }
.tool-steps li + li::before { background: var(--line-strong); }
.tool--on-dark { border-color: transparent; border-top-color: var(--coral); }

/* Meldungen: Info, Erfolg, Hinweis, Fehler */
.msg { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s3); padding: 14px var(--s4); border-radius: var(--r); border: 1px solid; font-size: var(--fs-sm); }
.msg svg { width: 22px; height: 22px; }
.msg strong { color: var(--navy-900); }
.msg--info { background: var(--teal-50); border-color: #c9e8e6; }
.msg--info svg { color: var(--teal-700); }
.msg--success { background: #eef8f1; border-color: #bfe2cb; border-left: 4px solid #1f7a45; }
.msg--success svg, .msg--success strong { color: #1d6a3e; }
.msg--warning { background: var(--sun-50); border-color: var(--sun-100); border-left: 4px solid var(--sun); }
.msg--warning svg, .msg--warning strong { color: var(--ochre-700); }
.msg--error { background: var(--coral-50); border-color: #f4c6b9; border-left: 4px solid var(--coral-700); }
.msg--error svg, .msg--error strong { color: var(--coral-700); }
.msg ul { margin: 6px 0 0; padding-left: 1.1em; display: grid; gap: 2px; }

/* Button-Zustände (die .is-*-Klassen dienen nur der Darstellung im Styleguide) */
.btn--primary.is-hover { background: var(--coral-600); }
.btn--secondary.is-hover, .btn--secondary-dark.is-hover { background: var(--pearl); color: var(--navy-900); }
.btn--dark.is-hover { background: var(--navy-700); }
.btn.is-focus { box-shadow: var(--focus); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: uf-spin .8s linear infinite; }
@keyframes uf-spin { to { transform: rotate(360deg); } }
.btn--secondary-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--secondary-dark:hover { background: rgba(255,255,255,.08); color: #fff; }
.on-dark :focus-visible, .on-dark .is-focus { box-shadow: 0 0 0 3px var(--navy-900), 0 0 0 5px var(--sun); }

/* Formular-Zustände */
.input.is-focus { border-color: var(--navy-700); box-shadow: 0 0 0 3px #cfe0ea; }
.input.is-valid { border-color: #1f7a45; }
.input:disabled, .select:disabled { background: var(--pearl); color: var(--muted); cursor: not-allowed; border-color: var(--line); }
.valid-text { font-size: var(--fs-xs); color: #1d6a3e; font-weight: 700; }

/* Heller „Nächster Schritt“ (nicht jede Seite endet in Navy) */
.next--light { background: var(--pearl); color: var(--ink); border: 1px solid var(--line); }
.next--light h2, .next--light h3 { color: var(--navy-900); }
.next--light p { color: var(--muted); }
.next--light .next__label { color: var(--teal-700); }

/* Home: redaktioneller Themen-Index */
.topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.topic { border-top: 2px solid var(--navy-900); padding-top: var(--s4); display: grid; gap: 8px; align-content: start; min-width: 0; }
.topic .eyebrow { color: var(--cluster-ink); }
.topic .eyebrow::before { background: var(--cluster); }
.topic h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.4375rem; }
.topic h3 a { text-decoration: none; color: var(--navy-900); }
.topic h3 a:hover { text-decoration: underline; text-decoration-color: var(--teal); }
.topic p { font-size: var(--fs-sm); color: var(--muted); }
.topic ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: var(--fs-sm); }
.topic li a { text-decoration: none; color: var(--navy-700); display: inline-block; padding: 3px 0; }
.topic li a:hover { text-decoration: underline; text-decoration-color: var(--teal); }
@media (max-width: 900px) { .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .topics { grid-template-columns: 1fr; gap: var(--s5); } }

/* Home: „Im Fokus“ – Leitartikel + Schlagzeilen */
.feature { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
.story { display: grid; gap: var(--s3); text-decoration: none; color: inherit; }
.story .figure__img { aspect-ratio: 3 / 2; }
.story h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; color: var(--navy-900); }
.story p { color: #3d4f5b; }
.story:hover h3 { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; }
.headlines { list-style: none; margin: 0; padding: 0; display: grid; }
.headlines li { border-top: 1px solid var(--line); }
.headlines li:last-child { border-bottom: 1px solid var(--line); }
.headlines a { display: grid; gap: 6px; padding: var(--s4) 0; text-decoration: none; color: inherit; }
.headlines strong { font-size: 1.125rem; color: var(--navy-900); line-height: 1.3; }
.headlines a:hover strong { text-decoration: underline; text-decoration-color: var(--teal); }
.headlines span.meta { font-size: var(--fs-xs); }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; gap: var(--s5); } }

/* Home: Werkzeug-Leiste (statt großer Werkzeug-Karten) */
.toolstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toolstrip a { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 12px; padding: var(--s4) var(--s4) var(--s4) 0; text-decoration: none; color: var(--navy-900); }
.toolstrip a + a { border-left: 1px solid var(--line); padding-left: var(--s4); }
.toolstrip svg { grid-row: 1 / span 2; width: 28px; height: 28px; color: var(--teal-700); }
.toolstrip strong { font-size: var(--fs-sm); }
.toolstrip span { font-size: var(--fs-xs); color: var(--muted); }
.toolstrip a:hover strong { text-decoration: underline; text-decoration-color: var(--teal); }
@media (max-width: 900px) { .toolstrip { grid-template-columns: 1fr 1fr; } .toolstrip a:nth-child(3) { border-left: 0; padding-left: 0; } .toolstrip a:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 560px) { .toolstrip { grid-template-columns: 1fr; } .toolstrip a, .toolstrip a + a { border-left: 0; padding-left: 0; border-bottom: 1px solid var(--line); } .toolstrip a:last-child { border-bottom: 0; } }

/* Pfeiler: getönter Kopf mit Bereichs-Reitern */
.page-head--pillar { background: var(--cluster-soft); }
.page-head--pillar .page-head__in { padding-bottom: 0; }
.cluster-tabs { display: flex; gap: 0; overflow-x: auto; margin-top: var(--s4); border-top: 1px solid rgba(15,45,67,.12); }
.cluster-tabs a { padding: 14px 18px 12px 0; margin-right: 18px; text-decoration: none; color: var(--navy-700); font-weight: 600; font-size: var(--fs-sm); border-bottom: 3px solid transparent; white-space: nowrap; }
.cluster-tabs a[aria-current="page"] { border-bottom-color: var(--cluster); color: var(--navy-900); }
.cluster-tabs a:hover { color: var(--navy-900); }
.overview { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
@media (max-width: 900px) { .overview { grid-template-columns: 1fr; } }

/* Artikel: weißer Kopf, breites Beitragsbild, schmale Lesespalte */
.page-head--article::before { height: 2px; }
.page-head--article .page-head__in { padding-bottom: var(--s5); }
.page-head--article h1 { max-width: 22ch; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.25rem); }
.article-hero { margin-top: var(--s6); }
.article-hero .figure__img { aspect-ratio: 21 / 9; }
@media (max-width: 600px) { .article-hero .figure__img { aspect-ratio: 4 / 3; } }

/* Route: Tagesablauf als Zeitleiste */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.timeline::before { content: ""; position: absolute; left: 10px; right: 10px; top: 16px; height: 3px; background: var(--navy-900); border-radius: 2px; }
.timeline li { position: relative; padding: 44px var(--s4) 0 0; display: grid; gap: 4px; align-content: start; }
.timeline li::before { content: ""; position: absolute; top: 6px; left: 0; width: 22px; height: 22px; border-radius: 50%; border: 4px solid var(--coral); background: #fff; }
.timeline li:last-child::before { background: var(--teal); border-color: var(--teal); }
.timeline time { font-weight: 700; color: var(--navy-900); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.timeline strong { color: var(--navy-900); }
.timeline p { font-size: var(--fs-sm); color: #3d4f5b; }
@media (max-width: 760px) {
  .timeline { grid-template-columns: 1fr; }
  .timeline::before { left: 10px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  .timeline li { padding: 0 0 var(--s5) 40px; }
  .timeline li::before { top: 0; }
}
.reverse { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4); align-items: center; padding: var(--s4) var(--s5); border: 1px dashed var(--line-strong); border-radius: var(--r); }
.reverse svg { width: 28px; height: 28px; color: var(--teal-700); }

/* Stadt: sachlicher Kurzüberblick */
.citybox { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--navy-900); border-bottom: 1px solid var(--line); }
.citybox > div { padding: var(--s4) var(--s4) var(--s4) 0; display: grid; gap: 4px; }
.citybox > div + div { border-left: 1px solid var(--line); padding-left: var(--s4); }
.citybox dt { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.citybox dd { margin: 0; font-size: var(--fs-sm); color: var(--navy-900); }
@media (max-width: 680px) { .citybox { grid-template-columns: 1fr; } .citybox > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } }

/* Vertrauen: Personen- und Prinzipienblöcke */
.person { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s5); align-items: center; padding-block: var(--s5); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.person h2 { font-size: 1.5rem; }
.person p { color: #3d4f5b; margin-top: 6px; }
.principles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.principles li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--line); }
.principles li:last-child { border-bottom: 1px solid var(--line); }
.principles strong { color: var(--navy-900); }
@media (max-width: 600px) { .principles li { grid-template-columns: 1fr; gap: 4px; } .person { grid-template-columns: 1fr; } }

/* Angebots-Check v0.2 */
.price-slot { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); }
.st--check { color: var(--ochre-700); }
.st--check::before { background: var(--sun); border-radius: 2px; transform: rotate(45deg); }
.st--na { color: var(--muted); }
.st--na::before { background: var(--line-strong); }
.verdict .is-open { border-top-color: var(--sun); }
.offer select.select { min-height: 44px; }

/* Hell/Dunkel-Beispiele im Styleguide */
.on-dark { background: var(--navy-900); color: #fff; padding: var(--s5); border-radius: var(--r); display: grid; gap: var(--s4); }
.on-dark .meta { color: var(--on-dark-muted); }
.on-dark a:not(.btn) { color: #fff; text-decoration-color: var(--teal); }
.stack > .link-list { margin-top: var(--s5); }
.independence svg { width: 14px; height: 14px; flex: none; }
.article-hero .figure__img { aspect-ratio: 3 / 1; }
@media (max-width: 600px) { .article-hero .figure__img { aspect-ratio: 16 / 9; } }
.page-head--article h1 { max-width: 26ch; font-size: clamp(2rem, 1.45rem + 2.2vw, 2.875rem); }
.prose .principles { padding-left: 0; }
.prose .principles li + li { margin-top: 0; }
.prose .principles li::marker { content: none; }
.tool--stacked .tool__body, .tool__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tool--stacked .tool__body { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) { .tool__body { grid-template-columns: minmax(0, 1fr); } }
fieldset.offer { min-width: 0; min-inline-size: 0; }
.tool__form h3 { overflow-wrap: anywhere; }

/* Methodik 1.0 – Fehlerkorrektur: lange Bezeichnungen im Ledger umbrechen statt überlaufen */
.ledger li span:first-child { flex: 0 1 auto; min-width: 0; }
.ledger li small { font-weight: 400; color: var(--muted); }

/* Bloque 1 (Produktion): echte Fotos und Grafiken im bestehenden Bildrahmen.
   Keine Designänderung – .figure__img bleibt der Rahmen, nur Platzhalter-Innenabstand und -Hintergrund entfallen. */
.figure__img--photo { display: block; padding: 0; overflow: hidden; background: var(--pearl-2); }
.figure__img--photo picture, .figure__img--photo img { display: block; width: 100%; height: 100%; }
.figure__img--photo img { object-fit: cover; }
.figure__img--doc { display: block; aspect-ratio: auto; padding: 0; background: #fff; }
.figure__img--doc img { display: block; width: 100%; height: auto; }
.figure figcaption a { color: inherit; }
/* Fehlerkorrektur: In gestapelten Tabellen (Mobil) blieb die Tabellenunterschrift eine schmale Tabellenspalte. */
@media (max-width: 600px) { .table--stack caption { display: block; width: 100%; } }
/* Bloque 1 (cierre): Quellenvergleich Entrümpelung – nur bestehende Bausteine (.tool, .segmented, .table--stack), keine Designänderung. */
.src-panel { display: grid; gap: var(--s3); }
.src-panel[hidden] { display: none; }
.src-panel__title { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; color: var(--navy-900); letter-spacing: 0; }
.src-panel .table td, .src-panel .table th { font-size: var(--fs-sm); vertical-align: top; }
.src-statement { border-top: 1px solid var(--line); padding-top: var(--s3); color: var(--navy-900); }
/* Bloque 2 (Produktion): Werkzeuge der Kernseiten. Nur Ergänzungen mit bestehenden Tokens – keine Änderung am Design v0.2. */
/* Rechner: Schritte, Inventar, getrennte Ergebnisblöcke */
.step-nav { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between; align-items: center; padding-top: var(--s3); border-top: 1px solid var(--line); }
.tool-steps button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tool-steps button:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; border-radius: 4px; }
[data-step][hidden] { display: none; }
.step-panel { display: grid; gap: var(--s4); align-content: start; }
.step-panel h3 { font-size: 1.0625rem; }
.inv-table td, .inv-table th { vertical-align: middle; }
.qty { display: inline-flex; align-items: center; gap: 6px; }
.qty output { min-width: 2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.qty__btn { width: 32px; height: 32px; border-radius: var(--r-sm); border: 1.5px solid var(--line-strong); background: #fff; font: inherit; font-weight: 700; color: var(--navy-900); cursor: pointer; line-height: 1; }
.qty__btn:hover { border-color: var(--navy-700); }
.qty__btn:focus-visible { outline: 3px solid var(--coral); outline-offset: 1px; }
.inv-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: end; }
.inv-sum { font-size: var(--fs-sm); padding: var(--s3) var(--s4); background: var(--pearl); border-radius: var(--r); }
.calc-block { display: grid; gap: var(--s3); border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: var(--s4); }
.calc-block__kind { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-900); border-bottom: 1.5px solid var(--navy-900); padding-bottom: 6px; }
.calc-sep { font-size: var(--fs-sm); color: var(--navy-900); background: var(--sun-50); border-left: 4px solid var(--sun); padding: var(--s3) var(--s4); border-radius: var(--r); }
.transparency details { border-top: 1px solid var(--line); padding: var(--s3) 0; }
.transparency summary { font-weight: 700; color: var(--navy-900); cursor: pointer; min-height: 32px; }
.transparency ul { margin: var(--s3) 0 0; padding-left: 1.2em; font-size: var(--fs-sm); display: grid; gap: 4px; }
.transparency h3 { font-size: var(--fs-sm); margin-top: var(--s3); }
.transparency .ledger { margin-top: var(--s3); }
@media (max-width: 600px) { .inv-add { grid-template-columns: 1fr; } }
/* Angebots-Check (mehrere Angebote) */
.offers--v2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.offer__group { border-top: 1px solid var(--line); padding-top: var(--s3); display: grid; gap: var(--s3); }
.offer__group summary { font-weight: 700; color: var(--navy-900); cursor: pointer; font-size: var(--fs-sm); }
.offer__group[open] summary { margin-bottom: var(--s2); }
.offer textarea.input { min-height: 64px; resize: vertical; }
.matrix--offers td { white-space: normal; min-width: 150px; }
.matrix--offers .cell-val { display: block; margin-bottom: 2px; }
.matrix--offers tr.is-diff th { box-shadow: inset 4px 0 0 var(--sun); }
.status-row { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: var(--fs-xs); }
.diff-list { margin: var(--s3) 0 0; padding-left: 1.2em; font-size: var(--fs-sm); display: grid; gap: 6px; }
.qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s5); }
.qblock { display: grid; gap: var(--s3); align-content: start; }
.qblock__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.qblock__head h4 { font-size: 1rem; color: var(--navy-900); }
/* Firmen-Check: drei Zustände je Punkt */
.fc-list { list-style: none; margin: 0; padding: 0; display: grid; }
.fc-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3) var(--s4); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--pearl-2); }
.fc-item:last-child { border-bottom: 0; }
.fc-item__text { font-size: var(--fs-sm); color: var(--navy-900); font-weight: 600; }
.fc-item__text small { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }
.fc-item .segmented { min-width: 270px; }
.fc-item .segmented label { min-height: 40px; padding: 6px 8px; font-size: var(--fs-xs); }
@media (max-width: 640px) { .fc-item { grid-template-columns: 1fr; } .fc-item .segmented { min-width: 0; } }
/* Selbst oder Firma */
.verdict--decide > div { min-width: 0; }
/* Kosten-Tabelle mit drei Entfernungsbändern */
.table--corridor td strong { display: block; font-variant-numeric: tabular-nums; color: var(--navy-900); }
.table--corridor .cell-sub { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.table--corridor .th-sub { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.src-details { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); background: #fff; }
.src-details summary { font-weight: 700; color: var(--navy-900); cursor: pointer; font-size: var(--fs-sm); }
.src-details ul { margin: var(--s3) 0 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: var(--fs-sm); }
.mr-auto { margin-right: auto; }
.tool__body > * { min-width: 0; }
.tool__result > * { min-width: 0; max-width: 100%; }
[data-rechner] .tool-steps { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 600px) { [data-rechner] .tool-steps li + li::before { width: 10px; margin-inline: 4px; } }
.transparency .ledger li { flex-wrap: wrap; }
.transparency .ledger li span:last-child { flex: 0 1 auto; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.st--unklar { color: var(--ochre-700); }
.st--unklar::before { background: transparent; border: 2px dashed var(--ochre-700); width: 8px; height: 8px; }
.verdict--stack { grid-template-columns: 1fr; }
.verdict--stack details summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); color: var(--navy-700); }
.verdict--stack details ul { margin-top: var(--s3); }
@media (max-width: 600px) {
  .inv-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s3); align-items: center; padding: var(--s2) var(--s3); }
  .inv-table th { grid-column: 1; }
  .inv-table td { display: block; width: auto; padding: 0; }
  .inv-table td::before { content: none; }
  .inv-table td:nth-of-type(1) { display: none; }
  .inv-table td:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 2; }
  .inv-table td:nth-of-type(3) { grid-column: 1; grid-row: 2; font-size: var(--fs-xs); color: var(--muted); text-align: left; }
  .inv-table td:nth-of-type(4) { grid-column: 1 / -1; text-align: left; }
  .inv-table td:nth-of-type(4) .btn { min-height: 28px; padding: 0; }
  .matrix--offers td { min-width: 130px; }
}
.swipe-hint { display: none; font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 600px) { .swipe-hint { display: block; } }

/* Home visual cards */
.home-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.home-card{display:grid;grid-template-columns:180px minmax(0,1fr);min-height:148px;border:1px solid var(--line,#d7e0e5);border-radius:16px;overflow:hidden;background:#fff;color:inherit;text-decoration:none;box-shadow:0 8px 24px rgba(15,45,67,.06);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.home-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(15,45,67,.11);border-color:#b7cbd5}
.home-card>img{width:100%;height:100%;min-height:148px;object-fit:cover;background:#eef4f5}
.home-card__body{display:flex;flex-direction:column;gap:8px;padding:20px}
.home-card__body strong{display:block;font-size:1.08rem;line-height:1.25;color:var(--navy,#0f2d43)}
.home-card__body span{display:block;color:var(--muted,#526879);line-height:1.48}
@media(max-width:860px){.home-card-grid{grid-template-columns:1fr}.home-card{grid-template-columns:160px minmax(0,1fr)}}
@media(max-width:520px){.home-card{grid-template-columns:1fr}.home-card>img{height:190px}.home-card__body{padding:18px}}

/* Home cluster compacto v2 — sustituye visual cards grandes */
.home-card-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.home-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  border:1px solid var(--line,#d7e0e5);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  color:inherit;
  text-decoration:none;
  box-shadow:none;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.home-card:hover{
  transform:translateY(-2px);
  border-color:#9fbcc8;
  box-shadow:0 8px 18px rgba(15,45,67,.08);
}
.home-card>img{
  display:block;
  width:100%;
  height:116px;
  min-height:116px;
  max-height:116px;
  object-fit:cover;
  background:#eef4f5;
  flex:none;
}
.home-card__body{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 14px 16px;
  min-width:0;
  flex:1;
}
.home-card__body strong{
  display:block;
  font-size:1rem;
  line-height:1.22;
  color:var(--navy-900,#0f2d43);
  overflow-wrap:anywhere;
}
.home-card__body span{
  display:block;
  font-size:.88rem;
  line-height:1.4;
  color:var(--muted,#526879);
  overflow-wrap:anywhere;
}
@media(max-width:980px){
  .home-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .home-card>img{height:130px;min-height:130px;max-height:130px}
}
@media(max-width:560px){
  .home-card-grid{grid-template-columns:1fr;gap:12px}
  .home-card{display:grid;grid-template-columns:112px minmax(0,1fr)}
  .home-card>img{width:112px;height:100%;min-height:112px;max-height:none}
  .home-card__body{padding:13px}
}