/* ── tailwind-statisch.css ── */
/* Genau die Regeln, die der Tailwind-Play-CDN fuer diese Seite erzeugt hat,
   im Browser ausgelesen und eingefroren. Kommen neue Utility-Klassen ins
   Markup, muessen sie hier ergaenzt werden. */
*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
*, ::after, ::before { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }
::after, ::before { --tw-content: ''; }
:host, html { line-height: 1.5; text-size-adjust: 100%; tab-size: 4; font-family: "Google Sans", system-ui, -apple-system, sans-serif; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; }
body { margin: 0px; line-height: inherit; }
hr { height: 0px; color: inherit; border-top-width: 1px; }
abbr:where([title]) { text-decoration: underline dotted; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
code, kbd, pre, samp { font-family: "Google Sans", system-ui, -apple-system, sans-serif; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
table { text-indent: 0px; border-color: inherit; border-collapse: collapse; }
button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0px; padding: 0px; }
button, select { text-transform: none; }
button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) { appearance: button; background-color: transparent; background-image: none; }
progress { vertical-align: baseline; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
[type="search"] { appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { appearance: none; }
::-webkit-file-upload-button { appearance: button; font: inherit; }
summary { display: list-item; }
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0px; }
fieldset { margin: 0px; padding: 0px; }
legend { padding: 0px; }
menu, ol, ul { list-style: none; margin: 0px; padding: 0px; }
dialog { padding: 0px; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1; color: rgb(156, 163, 175); }
[role="button"], button { cursor: pointer; }
:disabled { cursor: default; }
audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
[hidden]:where(:not([hidden="until-found"])) { display: none; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-3 { margin-top: 0.75rem; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.aspect-\[21\/10\] { aspect-ratio: 21 / 10; }
.h-10 { height: 2.5rem; }
.h-11 { height: 2.75rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-full { height: 100%; }
.w-10 { width: 2.5rem; }
.w-11 { width: 2.75rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-full { width: 100%; }
.max-w-\[1280px\] { max-width: 1280px; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); }
.overflow-hidden { overflow: hidden; }
.rounded-2xl { border-radius: 1rem; }
.bg-blue-50 { --tw-bg-opacity: 1; background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); }
.bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); }
.bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/15 { background-color: rgba(255, 255, 255, 0.15); }
.object-cover { object-fit: cover; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.pb-20 { padding-bottom: 5rem; }
.pt-32 { padding-top: 8rem; }
.text-\[1\.2rem\] { font-size: 1.2rem; }
.text-\[10px\] { font-size: 10px; }
.text-\[12px\] { font-size: 12px; }
.text-\[13px\] { font-size: 13px; }
.text-\[14px\] { font-size: 14px; }
.text-\[3rem\] { font-size: 3rem; }
.font-black { font-weight: 900; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }
.leading-\[1\.04\] { line-height: 1.04; }
.leading-relaxed { line-height: 1.625; }
.tracking-\[-0\.04em\] { letter-spacing: -0.04em; }
.tracking-\[0\.18em\] { letter-spacing: 0.18em; }
.text-\[\#167BFC\] { --tw-text-opacity: 1; color: rgb(22 123 252 / var(--tw-text-opacity, 1)); }
.text-\[\#5CA0FC\] { --tw-text-opacity: 1; color: rgb(92 160 252 / var(--tw-text-opacity, 1)); }
.text-gray-300 { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity, 1)); }
.text-gray-400 { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity, 1)); }
.text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity, 1)); }
.text-gray-600 { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); }
.text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); }
.shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
/* ── schriften.css ── */
/* Google Sans Flex, selbst gehostet (SIL Open Font License).
   Nur latin und latin-ext — die uebrigen 18 Zeichensaetze der
   Google-Fonts-Antwort braucht diese Seite nicht. */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_lx/fonts/google-sans-flex-latin-ext.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: 'Google Sans Flex';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_lx/fonts/google-sans-flex-latin.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;
}

/* ── inline 1 ── */
/* variable Fassung derselben Familie — Google Sans liefert nur 400/500/700,
   dadurch rendern alle 800/900-Stellen bisher als 700: kein Gewichtskontrast */
body.blog-skin.final-a, body.blog-skin.final-a * {
  font-family:"Google Sans Flex","Google Sans",system-ui,-apple-system,sans-serif !important}

/* ── inline 2 ── */

html { scroll-behavior: smooth; }
body { font-family: 'Google Sans', sans-serif; background: #F7F7F7; -webkit-font-smoothing: antialiased; }
.squircle-xl { border-radius: 48px; }   

.btn-ios { transition: transform 0.15s; } .btn-ios:active { transform: scale(0.97); }

/* === ARTICLE PROSE (1:1 aus blog-14) === */

.article-prose h2 { font-size: 1.85rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.12; margin: 3rem 0 0.9rem; color: #333132; scroll-margin-top: 1.5rem; }
.article-prose h3 { font-size: 1.2rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; margin: 1.3rem 0 0.55rem; color: #111827; }
.article-prose strong { color: #111827; font-weight: 900; }
.article-prose a { color: #167BFC; font-weight: 800; text-decoration: none; }

.article-prose .module { margin: 2rem 0; }

.article-prose ul { margin: 0; padding: 0; list-style: none; }
.article-prose li { color: #4b5563; font-size: 0.98rem; line-height: 1.55; }


.article-prose h2 { position: relative; padding-top: 2.15rem; border-top: 1px solid rgba(17,24,39,0.1); }

.article-prose .lead-panel { background: #ffffff; border: 1px solid rgba(255,255,255,0.9); box-shadow: 0 18px 55px rgba(15,23,42,0.06); border-radius: 36px; padding: 2rem; }

.article-prose .fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.5rem; }
.article-prose .fact-card { background: #f4f7fb; border: 1px solid rgba(17,24,39,0.06); border-radius: 22px; padding: 1rem; }
.article-prose .fact-card span { display: block; color: #167BFC; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.4rem; }
.article-prose .fact-card strong { display: block; font-size: 0.95rem; line-height: 1.18; letter-spacing: -0.02em; }
.article-prose .signal-strip { background: #111827; color: #fff; border-radius: 34px; padding: 1.65rem; display: grid; grid-template-columns: 1fr; gap: 1rem; }
.article-prose .signal-strip h3, .article-prose .signal-strip p { color: inherit; margin: 0; }
.article-prose .signal-strip h3 { font-size: 1.35rem; line-height: 1.05; letter-spacing: -0.035em; }

.article-prose .decision-note { background: linear-gradient(135deg, #167BFC 0%, #073fba 100%); color: white; border-radius: 32px; padding: 1.5rem; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.article-prose .decision-note p { color: rgba(255,255,255,0.86); margin: 0; font-size: 0.95rem; line-height: 1.55; }


.article-prose [data-blog-content="ablauf"] { position: relative; display: grid; grid-template-columns: 1fr; gap: 0.7rem; }
.article-prose [data-blog-content="ablauf"] > div { box-shadow: 0 12px 35px rgba(15,23,42,0.04); padding: 1.25rem; }
.article-prose [data-blog-content="ablauf"] h3 { font-size: 1rem; line-height: 1.18; margin: 0 0 0.55rem; }











/* CTA inline soll auch in der schmaleren Body-Spalte funktionieren */



/* === MARGINALIA LAYOUT ===
   Spalten-Summe 230+660+240+2×40 = 1210px ≤ 1216px Content-Box (max-w-1280 px-8).
   KEIN align-items:start — die Grid-Items müssen volle Zeilenhöhe haben, sonst klebt die sticky Rail nicht (vgl. blog-11). */
.layout-grid { display: grid; grid-template-columns: 230px minmax(0,660px) 240px; gap: 2.5rem; }

/* Schmaler Desktop: Rand-Notizen wandern als Kartensammlung unter den Artikel (aus blog-11 übernommen) */
@media (max-width: 1340px) {
  .layout-grid { grid-template-columns: 240px minmax(0, 1fr); }
  .margin-rail { position: static; grid-column: 2 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; min-height: 0 !important; margin-top: 1rem; }
  .margin-item { position: static !important; opacity: 1; transform: none; }
}
@media (max-width: 1020px) {
  .layout-grid { grid-template-columns: minmax(0, 1fr); }
  .margin-rail { grid-column: 1 / -1; }
  .toc-rail { position: static; }
}

.toc-rail { position: sticky; top: 7rem; align-self: start; }
.toc-rail nav { border-left: 2px solid rgba(17,24,39,0.08); }
.toc-rail a { display: block; padding: 0.5rem 0 0.5rem 1.1rem; margin-left: -1px; border-left: 2px solid transparent; font-size: 13px; font-weight: 600; color: #6b7280; line-height: 1.35; transition: color 0.15s, border-color 0.15s; }
.toc-rail a:hover { color: #111827; }
.toc-rail a.is-active { color: #167BFC; border-left-color: #167BFC; font-weight: 800; }
.toc-rail a.done:not(.is-active) { color: #b6bcc7; }

/* Lesefortschritt artikelrelativ (aus blog-11, ans 14er-Styling angepasst) */









.margin-rail { position: relative; }
.margin-item { position: absolute; left: 0; right: 0; transform: translateY(8px); transition: opacity 0.4s, transform 0.4s; }
.margin-item.is-visible { opacity: 1; transform: translateY(0); }
/* Erst wenn das Skript laeuft, wird eingeblendet — sonst waeren die
   Notizen ohne JavaScript dauerhaft unsichtbar. */
html.hat-js .margin-item { opacity: 0; }
html.hat-js .margin-item.is-visible { opacity: 1; }
.margin-note { background: #ffffff; border: 1px solid rgba(17,24,39,0.06); border-radius: 22px; padding: 1.1rem 1.15rem; box-shadow: 0 12px 40px rgba(15,23,42,0.05); }
.margin-note .label { display: inline-block; font-size: 9.5px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: #167BFC; background: #eef4ff; border: 1px solid rgba(0,82,255,0.12); border-radius: 999px; padding: 3px 8px; margin-bottom: 0.55rem; }

.margin-note p { font-size: 13px; line-height: 1.55; color: #4b5563; margin: 0; }
/* Notiz-Typen: keine eigenen Flächen mehr — Differenzierung nur über Label,
   Icon und (bei Statistik) die große Zahl. Siehe Style-Block „VARIANTE A". */
.margin-note a { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 900; color: #167BFC; margin-top: 0.55rem; }

.share-rail { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid rgba(17,24,39,0.08); }
.share-rail .row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }
.share-rail button { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #f4f7fb; color: #111827; transition: background 0.15s, color 0.15s; cursor: pointer; border: 0; }
.share-rail button:hover { background: #eef4ff; color: #167BFC; }
.share-rail button.copied { background: #dcfce7; color: #16a34a; }

.hero-title { text-wrap: balance; }

a:focus-visible, button:focus-visible { outline: 2px solid #167BFC; outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .margin-item, .toc-rail a, .share-rail button, .btn-ios { transition: none !important; }
  .margin-item { opacity: 1; transform: none; }
}

/* ---------- Meta-Zeile unter der Subline ---------- */
.article-meta {display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:0 0 34px}
.article-meta span {display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:#6b7280;
                   font-variant-numeric:tabular-nums}

.article-meta svg {width:16px;height:16px;flex:none;color:#9ca3af}
.article-meta span:first-child svg {color:#167BFC}
.article-meta .sep {width:3px;height:3px;border-radius:999px;background:rgba(17,24,39,.2);display:inline-block}

/* ---------- CTA im Fließtext ---------- */
.beitrag-cta {position:relative;margin:46px 0;padding:28px 32px 28px 36px;border:1px solid rgba(17,24,39,.12);
             border-radius:20px;background:#fff;box-shadow:0 6px 24px rgba(17,24,39,.05);
             display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;overflow:hidden}
.beitrag-cta::before {content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
                     background:linear-gradient(180deg,#167BFC,#5CA0FC)}

.beitrag-cta .kick {display:block;font-size:10.5px;font-weight:900;letter-spacing:.16em;
                   text-transform:uppercase;color:#167BFC;margin-bottom:9px}
.beitrag-cta h3 {font-size:20px;font-weight:800;letter-spacing:-.025em;color:#111827;line-height:1.25;margin:0}
.beitrag-cta p {font-size:14px;line-height:1.5;color:#6b7280;margin:8px 0 0;max-width:52ch}
.beitrag-cta .akt {display:flex;flex-direction:column;align-items:center;gap:10px;flex:none}


.beitrag-cta .tel {font-size:13px;font-weight:600;color:#6b7280;text-decoration:none;white-space:nowrap}
.beitrag-cta .tel:hover {color:#111827}
@media (max-width:820px) {
  .beitrag-cta {grid-template-columns:1fr;gap:18px;padding:22px 22px}
  .beitrag-cta .akt {align-items:stretch;flex-direction:row;justify-content:space-between}
  
}

/* ── blog-polish.css ── */
/*
  Blog quality layer.
  Purpose: clean spacing, reliable contrast, fewer decorative icons, no nested border stacks.
*/

/* Color-Theory-Tokens — Default-Akzent: Terracotta × Sand (komplementaer zu #167BFC) */
:root {
  --accent-deep: #F43F5E;
  --accent-warm: #FFF1F2;
  --text-primary: #0A0A0A;
  --text-muted: #5C5C66;
  --border-subtle: #E5E5EA;
  --border-strong: #C7C7CC;
}

body.blog-skin {
  --ink: #080a0f;
  --text: #111827;
  --muted: #566173;
  --soft: #f4f7fb;
  --panel: #ffffff;
  --line: rgba(17, 24, 39, 0.1);
  --accent: #167BFC;
  --dark: #0b0f19;
  background: #f5f7fb;
}

body.blog-skin h1,
body.blog-skin h2,
body.blog-skin h3,
body.blog-skin p,
body.blog-skin a,
body.blog-skin span,
body.blog-skin strong {
  letter-spacing: 0 !important;
}

body.blog-skin .article-prose {
  color: var(--text);
}

body.blog-skin .article-prose p,
body.blog-skin .article-prose li {
  color: var(--muted);
}

body.blog-skin .text-gray-400,
body.blog-skin .article-prose .text-gray-400 {
  color: #6b7280 !important;
}

body.blog-skin .article-prose .module {
  margin: 2.35rem 0;
  box-shadow: none !important;
}

body.blog-skin .article-prose [data-blog-content] :is(.w-10.h-10, .w-11.h-11):has(i[data-lucide]),
body.blog-skin .article-prose [data-blog-content] :is(.w-10.h-10, .w-11.h-11):has(svg[data-lucide]) {
  display: none !important;
}

body.blog-skin .article-prose [data-blog-content="gutachten-positionen"] > .flex:first-child,
body.blog-skin .article-prose [data-blog-content="fehler"] > .flex:first-child {
  display: block !important;
}

body.blog-skin .article-prose [data-blog-content="gutachten-positionen"] > .flex:first-child h3,
body.blog-skin .article-prose [data-blog-content="fehler"] > .flex:first-child h3 {
  margin: 0 0 1.2rem !important;
}

body.blog-skin .article-prose .lead-panel {
  background: var(--panel) !important;
  border: 0 !important;
  border-radius: 26px !important;
  padding: 2rem !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.055) !important;
}

body.blog-skin .article-prose .lead-panel .lead {
  color: #1f2937 !important;
}

body.blog-skin .article-prose .fact-grid {
  gap: 0.75rem !important;
}

body.blog-skin .article-prose .fact-card {
  background: var(--soft) !important;
  border: 0 !important;
  border-radius: 16px !important;
  padding: 1rem !important;
}

body.blog-skin .article-prose .fact-card span {
  color: var(--accent) !important;
}

body.blog-skin .article-prose .fact-card strong {
  color: var(--text) !important;
}

body.blog-skin .article-prose .signal-strip,
body.blog-skin .article-prose [data-blog-content="fehler"],
body.blog-skin .article-prose [data-blog-cta="inline"] {
  background: var(--dark) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 26px !important;
  padding: 1.8rem !important;
}

body.blog-skin .article-prose .signal-strip h3,
body.blog-skin .article-prose [data-blog-content="fehler"] h3,
body.blog-skin .article-prose [data-blog-cta="inline"] h3,
body.blog-skin .article-prose .signal-strip strong,
body.blog-skin .article-prose [data-blog-content="fehler"] strong,
body.blog-skin .article-prose [data-blog-cta="inline"] strong {
  color: #fff !important;
}

body.blog-skin .article-prose .signal-strip p,
body.blog-skin .article-prose [data-blog-content="fehler"] p,
body.blog-skin .article-prose [data-blog-cta="inline"] p {
  color: #d7deea !important;
}

body.blog-skin .article-prose [data-blog-cta="inline"] > a,
body.blog-skin .article-prose [data-blog-cta="inline"] a.bg-white,
body.blog-skin .article-prose + div .bg-black.text-white a {
  background: #fff !important;
  color: #333132 !important;
  border: 0 !important;
}

body.blog-skin .article-prose [data-blog-cta="inline"] > a span,
body.blog-skin .article-prose [data-blog-cta="inline"] a.bg-white span,
body.blog-skin .article-prose + div .bg-black.text-white a span {
  color: #333132 !important;
}

body.blog-skin .article-prose + div .bg-black.text-white {
  background: var(--dark) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 2.5rem !important;
}

body.blog-skin .article-prose + div .bg-black.text-white h3 {
  color: #fff !important;
}

body.blog-skin .article-prose + div .bg-black.text-white p {
  color: #d7deea !important;
}

body.blog-skin .article-prose [data-blog-content="entscheidung"] {
  display: block !important;
  background: #eef4ff !important;
  color: var(--text) !important;
  border: 0 !important;
  border-left: 5px solid var(--accent) !important;
  border-radius: 20px !important;
  padding: 1.45rem 1.65rem !important;
}

body.blog-skin .article-prose [data-blog-content="entscheidung"] p,
body.blog-skin .article-prose [data-blog-content="entscheidung"] strong {
  color: var(--text) !important;
}

body.blog-skin .article-prose [data-blog-content="vergleich"] > div {
  background: var(--panel) !important;
  border: 0 !important;
  border-radius: 22px !important;
  padding: 1.6rem !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045) !important;
}

body.blog-skin .article-prose [data-blog-content="vergleich"] h3,
body.blog-skin .article-prose [data-blog-content="gutachten-positionen"] h3,
body.blog-skin .article-prose [data-blog-content="ablauf"] h3 {
  color: var(--text) !important;
}

body.blog-skin .article-prose [data-blog-content="gutachten-positionen"] {
  background: var(--panel) !important;
  border: 0 !important;
  border-radius: 24px !important;
  padding: 1.75rem !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.045) !important;
}

body.blog-skin .article-prose [data-blog-content="gutachten-positionen"] .grid {
  gap: 1.25rem !important;
}

body.blog-skin .article-prose [data-blog-content="gutachten-positionen"] .grid > div {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

body.blog-skin .article-prose [data-blog-content="ablauf"] {
  gap: 0.9rem !important;
}

body.blog-skin .article-prose [data-blog-content="ablauf"] > div {
  background: var(--panel) !important;
  border: 0 !important;
  border-radius: 20px !important;
  padding: 1.3rem !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.045) !important;
}

body.blog-skin .article-prose [data-blog-content="quellen"] {
  background: #f0f5ff !important;
  border: 0 !important;
  border-radius: 20px !important;
  padding: 1.4rem !important;
}

body.blog-skin .article-prose [data-blog-content="quellen"] a {
  background: #fff !important;
  color: var(--accent) !important;
  border: 0 !important;
}

body.skin-editorial .article-prose .lead-panel {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 2rem 1.25rem !important;
  box-shadow: none !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}

body.skin-editorial .article-prose .fact-grid {
  display: flex !important;
  flex-wrap: wrap;
}

body.skin-editorial .article-prose .fact-card {
  border-radius: 999px !important;
  padding: 0.68rem 0.95rem !important;
}

body.skin-editorial .article-prose .fact-card span {
  display: none !important;
}

body.skin-editorial .article-prose [data-blog-content="vergleich"],
body.skin-editorial .article-prose [data-blog-content="gutachten-positionen"] {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 1.5rem 1.25rem !important;
}

body.skin-magazine main {
  background-image: linear-gradient(90deg, rgba(0, 82, 255, 0.055) 0 1px, transparent 1px);
  background-size: 25% 100%;
}

body.skin-magazine .article-prose .lead-panel {
  border-radius: 22px !important;
  box-shadow: 8px 8px 0 #111827 !important;
}

body.skin-minimal {
  background: #f7f8fa;
}

body.skin-minimal .article-prose .lead-panel,
body.skin-minimal .article-prose [data-blog-content="vergleich"] > div,
body.skin-minimal .article-prose [data-blog-content="gutachten-positionen"],
body.skin-minimal .article-prose [data-blog-content="ablauf"] > div,
body.skin-minimal .article-prose [data-blog-content="quellen"] {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

body.skin-minimal .article-prose .module {
  border-top: 1px solid var(--line) !important;
  padding: 1.35rem 1rem 1rem !important;
}

body.skin-minimal .article-prose .fact-grid,
body.skin-minimal .article-prose [data-blog-content="vergleich"],
body.skin-minimal .article-prose [data-blog-content="gutachten-positionen"] .grid,
body.skin-minimal .article-prose [data-blog-content="ablauf"] {
  display: block !important;
}

body.skin-minimal .article-prose .fact-card {
  background: transparent !important;
  padding: 0.65rem 0 !important;
}

body.skin-sidebar aside .sticky {
  background: #fff;
  border: 0;
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.055);
}

body.skin-sidebar .article-prose [data-blog-content="kurzantwort"],
body.skin-sidebar .article-prose [data-blog-content="gutachten-positionen"],
body.skin-sidebar .article-prose [data-blog-content="ablauf"] {
  border-left: 5px solid var(--accent) !important;
  padding: 1rem 1rem 1rem 1.25rem !important;
}

body.skin-longread .article-prose {
  max-width: 760px !important;
}

body.skin-longread .article-prose p {
  font-size: 1.16rem !important;
  line-height: 1.82 !important;
}

body.skin-longread .article-prose .lead-panel {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 0 1.2rem !important;
}

body.skin-card .article-prose [data-blog-content="vergleich"] > div,
body.skin-card .article-prose [data-blog-content="ablauf"] > div,
body.skin-card .article-prose [data-blog-content="gutachten-positionen"] {
  border-radius: 18px !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06) !important;
}

body.skin-visual .article-prose .lead-panel {
  background: var(--dark) !important;
}

body.skin-visual .article-prose .lead-panel p,
body.skin-visual .article-prose .lead-panel .lead,
body.skin-visual .article-prose .lead-panel strong,
body.skin-visual .article-prose .lead-panel span {
  color: #fff !important;
}

body.skin-visual .article-prose .fact-card {
  background: #1a2230 !important;
}

body.skin-visual .article-prose .fact-card span,
body.skin-visual .article-prose .fact-card strong {
  color: #fff !important;
}

body.skin-guide .article-prose [data-blog-content="ablauf"] {
  display: block !important;
  border-left: 3px solid var(--accent);
  margin-left: 0.8rem !important;
  padding: 1rem 1rem 1rem 1.25rem !important;
}

body.skin-guide .article-prose [data-blog-content="ablauf"] > div {
  position: relative;
  margin-bottom: 0.85rem;
}

body.skin-guide .article-prose [data-blog-content="ablauf"] > div::before {
  content: "";
  position: absolute;
  left: -1.78rem;
  top: 1.35rem;
  width: 0.76rem;
  height: 0.76rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px #eef4ff;
}

body.skin-quote .article-prose .lead-panel {
  position: relative;
  padding-top: 2.35rem !important;
}

body.skin-quote .article-prose .lead-panel::before {
  content: "“";
  position: absolute;
  top: -0.85rem;
  left: 1.25rem;
  font-size: 5rem;
  line-height: 1;
  color: rgba(0, 82, 255, 0.16);
  font-family: Georgia, "Times New Roman", serif;
}

/* Targeted cleanup after visual review: no nested border stacks, steady widths, clear contrast. */
body.skin-magazine .article-prose [data-blog-content="gutachten-positionen"] {
  background: #fff !important;
  border: 0 !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.045) !important;
  padding: 2rem !important;
}

body.skin-magazine .article-prose [data-blog-content="gutachten-positionen"] .grid {
  gap: 1.35rem 2rem !important;
}

body.skin-magazine .article-prose [data-blog-content="gutachten-positionen"] .grid > div {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.skin-magazine .article-prose [data-blog-content="gutachten-positionen"] .grid > div p:first-child {
  color: var(--accent) !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  margin-bottom: 0.4rem !important;
}

body.skin-magazine .article-prose [data-blog-content="gutachten-positionen"] .grid > div p:last-child {
  color: #465367 !important;
  font-size: 0.94rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

body.skin-minimal .article-prose [data-blog-cta="inline"] {
  background: var(--dark) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 22px !important;
  padding: 1.8rem !important;
}

body.skin-minimal .article-prose [data-blog-cta="inline"] h3 {
  color: #fff !important;
  margin: 0 0 0.55rem !important;
}

body.skin-minimal .article-prose [data-blog-cta="inline"] p {
  color: #d7deea !important;
}

body.skin-sidebar .article-prose [data-blog-content="vergleich"] {
  gap: 1.1rem !important;
}

body.skin-sidebar .article-prose [data-blog-content="vergleich"] > div {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.skin-sidebar .article-prose [data-blog-content="vergleich"] > div h3 {
  margin-top: 0 !important;
}

body.skin-sidebar .article-prose [data-blog-content="kurzantwort"],
body.skin-sidebar .article-prose [data-blog-content="gutachten-positionen"] {
  border-left: 0 !important;
}

body.skin-sidebar .article-prose [data-blog-content="kurzantwort"] {
  padding: 2rem !important;
}

body.skin-sidebar .article-prose [data-blog-content="gutachten-positionen"] {
  padding: 1.75rem !important;
}

body.skin-sidebar .article-prose [data-blog-content="entscheidung"] {
  background: #eef4ff !important;
  color: var(--text) !important;
  border: 0 !important;
  border-left: 5px solid var(--accent) !important;
  border-radius: 18px !important;
  padding: 1.45rem 1.65rem !important;
}

body.skin-sidebar .article-prose [data-blog-content="entscheidung"] p,
body.skin-sidebar .article-prose [data-blog-content="entscheidung"] strong {
  color: var(--text) !important;
}

body.skin-sidebar .article-prose [data-blog-cta="inline"] {
  background: var(--dark) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 22px !important;
  padding: 1.85rem !important;
}

body.skin-sidebar .article-prose [data-blog-cta="inline"] h3 {
  color: #fff !important;
}

body.skin-sidebar .article-prose [data-blog-cta="inline"] p {
  color: #d7deea !important;
}

body.skin-sidebar .article-prose [data-blog-content="ablauf"] {
  border-left: 0 !important;
  gap: 1.25rem 2rem !important;
  padding: 0 !important;
}

body.skin-sidebar .article-prose [data-blog-content="ablauf"] > div {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.skin-longread .article-prose,
body.skin-longread .article-prose .module,
body.skin-longread .article-prose [data-blog-content],
body.skin-longread .article-prose [data-blog-cta="inline"] {
  max-width: 760px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.skin-longread .article-prose .module,
body.skin-longread .article-prose [data-blog-content],
body.skin-longread .article-prose [data-blog-cta="inline"] {
  margin-left: auto !important;
  margin-right: auto !important;
}

body.skin-card .article-prose {
  max-width: 820px !important;
}

body.skin-card .article-prose .module,
body.skin-card .article-prose [data-blog-content],
body.skin-card .article-prose [data-blog-cta="inline"] {
  max-width: 820px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.skin-quote .article-prose .signal-strip,
body.skin-quote .article-prose [data-blog-cta="inline"] {
  padding-left: 2.55rem !important;
}

body.skin-quote .article-prose .signal-strip {
  gap: 1.45rem !important;
}

body.skin-quote .article-prose [data-blog-cta="inline"] {
  border-left: 0 !important;
}

@media (max-width: 900px) {
  body.blog-skin .article-prose [data-blog-content="vergleich"],
  body.blog-skin .article-prose [data-blog-content="gutachten-positionen"] .grid,
  body.blog-skin .article-prose .fact-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  body.blog-skin .article-prose .module {
    margin: 1.75rem 0;
  }

  body.blog-skin .article-prose .lead-panel,
  body.blog-skin .article-prose .signal-strip,
  body.blog-skin .article-prose [data-blog-content="fehler"],
  body.blog-skin .article-prose [data-blog-cta="inline"],
  body.blog-skin .article-prose [data-blog-content="entscheidung"],
  body.blog-skin .article-prose [data-blog-content="gutachten-positionen"],
  body.blog-skin .article-prose [data-blog-content="quellen"] {
    border-radius: 22px !important;
    padding: 1.25rem !important;
  }

  body.blog-skin .article-prose [data-blog-content="vergleich"] > div,
  body.blog-skin .article-prose [data-blog-content="ablauf"] > div {
    border-radius: 18px !important;
    padding: 1.15rem !important;
  }

  body.blog-skin .article-prose [data-blog-cta="inline"],
  body.blog-skin .article-prose + div .bg-black.text-white {
    flex-direction: column;
    align-items: stretch;
  }

  body.blog-skin .article-prose [data-blog-cta="inline"] > a,
  body.blog-skin .article-prose + div .bg-black.text-white a {
    width: 100%;
    justify-content: center;
  }

  body.skin-minimal .article-prose .lead-panel,
  body.skin-minimal .article-prose [data-blog-content="vergleich"] > div,
  body.skin-minimal .article-prose [data-blog-content="gutachten-positionen"],
  body.skin-minimal .article-prose [data-blog-content="ablauf"] > div,
  body.skin-minimal .article-prose [data-blog-content="quellen"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Subtile Akzente — Verteilung 60/40: warm dominant (häufiger, leiser), deep sparsam (Pop). */
.accent-maroon { background: var(--accent-deep,#F43F5E); color: #fff; }
.accent-brown { background: var(--accent-warm,#FFF1F2); color: var(--text-primary,#0A0A0A); }
body.blog-skin .article-prose .fact-card.accent-maroon { background: var(--accent-deep,#F43F5E) !important; }
body.blog-skin .article-prose .fact-card.accent-maroon span,
body.blog-skin .article-prose .fact-card.accent-maroon strong { color: #fff !important; }
body.blog-skin .article-prose [data-blog-content="quellen"].accent-brown { background: var(--accent-warm,#FFF1F2) !important; color: var(--text-primary,#0A0A0A) !important; }

/* ── inline 3 ── */

/* ================================================================
   VARIANTE A — „RUHIG-MONOCHROM"
   Ein einziges Modulsystem: weiße Karte, Radius 28px, EIN Schatten,
   dunkle Flächen einheitlich #111827, CTA schwarz/weiß/#1C3190.
   Akzentfarbe (--accent-deep) kommt in dieser Variante nicht vor.
   Der Block liegt bewusst NACH blog-polish.css — deshalb !important.
   ================================================================ */
body.final-a {
  --a-blue:#167BFC; --a-blue-2:#5CA0FC; --a-blue-3:#74adff;
  --a-tint:#eef4ff; --a-surface:#f4f7fb;
  --a-ink:#111827; --a-muted:#5b6675;
  --a-radius:28px; --a-shadow:0 16px 45px rgba(15,23,42,0.05);
}

/* ---------- Typo-Grundraster ---------- */

body.blog-skin.final-a .article-prose h2 {
  font-size:1.8rem !important; font-weight:900 !important; line-height:1.14 !important;
  letter-spacing:-.028em !important; color:var(--a-ink) !important;
  margin:3.1rem 0 .95rem !important; padding-top:2.2rem !important;
  border-top:1px solid rgba(17,24,39,.08) !important;
}
body.blog-skin.final-a .article-prose h2::before {
  color:var(--a-blue) !important; background:var(--a-tint) !important; border:0 !important;
  border-radius:999px !important; padding:5px 11px !important;
  font-size:10px !important; font-weight:900 !important; letter-spacing:.13em !important;
  margin-bottom:.9rem !important;
}
body.blog-skin.final-a .article-prose h3 {
  font-size:1.15rem !important; font-weight:900 !important; line-height:1.26 !important;
  letter-spacing:-.02em !important; margin:1.4rem 0 .6rem !important;
}
body.blog-skin.final-a .article-prose .module h3 {margin-top:0 !important;}


/* ---------- Micro-Label: ein Chip-System für alles ---------- */
body.blog-skin.final-a .mod-kick {
  display:block; font-size:10px !important; font-weight:900 !important;
  letter-spacing:.13em !important; text-transform:uppercase;
  color:var(--a-blue) !important; margin:0 0 .55rem !important; line-height:1;
}
body.blog-skin.final-a .article-prose .fact-card span {
  font-size:10px !important; font-weight:900 !important; letter-spacing:.13em !important;
  color:var(--a-blue) !important;
}
body.blog-skin.final-a .article-prose .signal-strip p.mod-kick,
body.blog-skin.final-a .article-prose [data-blog-content="fehler"] p.mod-kick {
  color:var(--a-blue-3) !important; font-size:10px !important; line-height:1 !important; margin:0 0 .6rem !important;
}

/* ---------- Modulsystem: ein Radius, ein Schatten ---------- */
body.blog-skin.final-a .article-prose .module {margin:2.4rem 0 !important;}
body.blog-skin.final-a .article-prose .lead-panel,
body.blog-skin.final-a .article-prose [data-blog-content="vergleich"] > div,
body.blog-skin.final-a .article-prose [data-blog-content="gutachten-positionen"],
body.blog-skin.final-a .article-prose [data-blog-content="ablauf"] > div,
body.blog-skin.final-a .article-prose .signal-strip,
body.blog-skin.final-a .article-prose [data-blog-content="fehler"] {
  border-radius:var(--a-radius) !important;
  box-shadow:var(--a-shadow) !important;
}
body.blog-skin.final-a .article-prose .lead-panel {background:#fff !important; border:0 !important; padding:2.1rem !important;}

body.blog-skin.final-a .article-prose .fact-card {background:var(--a-surface) !important; border:0 !important; border-radius:18px !important; padding:1rem 1.05rem !important;}


/* Dunkle Flächen: einheitlich #111827, kein Gradient-Mix */
body.blog-skin.final-a .article-prose .signal-strip,
body.blog-skin.final-a .article-prose [data-blog-content="fehler"] {
  background:var(--a-ink) !important; color:#fff !important; border:0 !important; padding:1.9rem 2rem !important;
}
body.blog-skin.final-a .article-prose .signal-strip h3,
body.blog-skin.final-a .article-prose [data-blog-content="fehler"] h3 {color:#fff !important;}
body.blog-skin.final-a .article-prose .signal-strip p,
body.blog-skin.final-a .article-prose [data-blog-content="fehler"] p {color:#c7d0de !important; font-size:14px !important; line-height:1.55 !important;}
body.blog-skin.final-a .article-prose .signal-strip strong,
body.blog-skin.final-a .article-prose [data-blog-content="fehler"] strong {color:#fff !important;}
body.blog-skin.final-a .article-prose .signal-strip {gap:1.15rem !important;}


/* Vergleich: beide Karten gleiche Bauart, Empfehlung nur über Blau markiert */
body.blog-skin.final-a .article-prose [data-blog-content="vergleich"] > div {background:#fff !important; border:0 !important; padding:1.7rem !important;}
body.blog-skin.final-a .article-prose [data-blog-content="vergleich"] > div:last-child {box-shadow:var(--a-shadow), inset 0 0 0 1px rgba(22,123,252,.22) !important;}
body.blog-skin.final-a .article-prose [data-blog-content="vergleich"] > div:last-child h3 {color:var(--a-blue) !important;}

/* Gutachten-Positionen */
body.blog-skin.final-a .article-prose [data-blog-content="gutachten-positionen"] {background:#fff !important; border:0 !important; padding:1.9rem 2rem !important;}

/* Ablauf-Schritte */
body.blog-skin.final-a .article-prose [data-blog-content="ablauf"] > div {background:#fff !important; border:0 !important; padding:1.4rem 1.5rem !important;}
body.blog-skin.final-a .article-prose [data-blog-content="ablauf"] .step-num {
  width:30px !important; height:30px !important; border-radius:999px !important;
  background:var(--a-tint) !important; color:var(--a-blue) !important;
  font-size:13px !important; font-weight:900 !important; margin-bottom:.85rem !important;
}

/* Entscheidungs-Hinweis: flache Tintfläche, kein Schatten */
body.blog-skin.final-a .article-prose [data-blog-content="entscheidung"] {
  background:var(--a-tint) !important; border:0 !important;
  border-left:3px solid var(--a-blue) !important;
  border-radius:var(--a-radius) !important; box-shadow:none !important;
  padding:1.6rem 1.8rem !important;
}

/* Quellen: helles Grau-Blau statt Beige, blaues Label */



/* ---------- Randnotizen: EINE Karte für alle Typen ---------- */
body.blog-skin.final-a .margin-note {
  background:#fff !important; border:1px solid rgba(17,24,39,.07) !important;
  border-radius:22px !important; padding:1.15rem 1.2rem !important;
  box-shadow:var(--a-shadow) !important;
}
body.blog-skin.final-a .margin-note .label {
  display:inline-flex !important; align-items:center; gap:5px;
  font-size:9.5px !important; font-weight:900 !important; letter-spacing:.14em !important;
  text-transform:uppercase; color:var(--a-blue) !important;
  background:var(--a-tint) !important; border:0 !important;
  border-radius:999px !important; padding:4px 9px !important; margin-bottom:.6rem !important;
  line-height:1;
}
body.blog-skin.final-a .margin-note .label svg {width:11px !important; height:11px !important; stroke-width:2.6; flex:none;}
body.blog-skin.final-a .margin-note h4 {
  font-size:13.5px !important; font-weight:900 !important; line-height:1.32 !important;
  letter-spacing:-.015em !important; color:var(--a-ink) !important; margin:0 0 .38rem !important;
}
body.blog-skin.final-a .margin-note p {font-size:12.5px !important; line-height:1.55 !important; color:var(--a-muted) !important; margin:0 !important;}
body.blog-skin.final-a .margin-note h4 + p {margin-top:.3rem !important;}
body.blog-skin.final-a .margin-note .stat-num {
  display:block; font-size:28px !important; font-weight:900 !important; line-height:1;
  letter-spacing:-.035em !important; color:var(--a-blue) !important; margin:0 0 .5rem !important;
}
body.blog-skin.final-a .margin-note .note-quote {border-left:3px solid var(--a-blue); padding-left:.9rem;}
body.blog-skin.final-a .margin-note .note-quote h4 {font-style:italic; font-weight:800 !important; font-size:13.5px !important; line-height:1.45 !important; margin:0 !important;}
body.blog-skin.final-a .margin-note a {color:var(--a-blue) !important; font-size:12px !important; font-weight:900 !important;}
body.blog-skin.final-a .margin-note a svg {width:12px; height:12px;}

/* ---------- CTA-Familie: schwarz, weiß, #1C3190 ---------- */
















/* Kleine Schwester: Inline-CTA im Kapitel 4 */












/* Kontakt-Karten im Fließtext: gleiches weißes Kartensystem */
body.blog-skin.final-a .beitrag-cta {
  margin:2.4rem 0 !important; padding:1.9rem 2rem !important;
  background:#fff !important; border:1px solid rgba(17,24,39,.07) !important;
  border-radius:var(--a-radius) !important; box-shadow:var(--a-shadow) !important;
}
body.blog-skin.final-a .beitrag-cta::before {display:none !important;}
body.blog-skin.final-a .beitrag-cta .kick {
  display:inline-block; font-size:9.5px !important; font-weight:900 !important;
  letter-spacing:.14em !important; text-transform:uppercase;
  color:var(--a-blue) !important; background:var(--a-tint); border-radius:999px;
  padding:4px 9px; margin-bottom:.8rem !important; line-height:1;
}
body.blog-skin.final-a .beitrag-cta h3 {margin:0 !important;}
body.blog-skin.final-a .beitrag-cta p {font-size:14px !important; line-height:1.55 !important; color:var(--a-muted) !important; margin:.55rem 0 0 !important;}



/* ---------- Rail: Chip-Tracking gegen den Polish-Reset ---------- */
body.blog-skin.final-a .toc-rail > p,
body.blog-skin.final-a .share-rail p {letter-spacing:.18em !important;}
body.blog-skin.final-a .toc-rail a.is-active {color:var(--a-blue) !important; border-left-color:var(--a-blue) !important;}





/* ═══════════ CI-Schicht · LexUp ═══════════
   Hell aussen, dunkel innen: Randnotizen bleiben weiss mit Akzent,
   die Navy-Flaechen liegen im Beitrag selbst.
   Ink #333132 · Blau #167BFC · Tiefblau #1C3190 · Orange #CC5500 · Navy #0F2542 */
body.blog-skin.final-a {
  --a-ink:#333132;          /* war #111827 — Tailwind-Grau */
  --a-muted:#6b6a6b;        /* war #5b6675 — Blaustich raus */
  --a-navy:#0F2542;
  --a-orange:#CC5500;
  --a-tief:#1C3190;
}

/* --- Grundton: Ink statt Reinschwarz und Tailwind-Grau --- */
body.blog-skin.final-a .bg-\[\#0A0A0A\] {background:var(--a-ink) !important}
body.blog-skin.final-a .article-prose,
body.blog-skin.final-a .article-prose p,
body.blog-skin.final-a .article-prose li,
body.blog-skin.final-a .article-prose h2,
body.blog-skin.final-a .article-prose h3,
body.blog-skin.final-a .hero-title {color:var(--a-ink)}


/* ═══ Randnotizen: hell, Akzent statt Flaeche ═══
   Kennzahl nach dem Muster fuer helle Kacheln: Zahl Ink, Einheit orange. */
body.blog-skin.final-a .margin-note.is-stat .stat-num {color:var(--a-ink) !important}
body.blog-skin.final-a .margin-note.is-stat .stat-num .einheit {
  font-style:normal; color:var(--a-orange)}
body.blog-skin.final-a .margin-note.is-stat .label {
  color:var(--a-orange) !important; background:#fff4ea !important;
  border-color:rgba(204,85,0,.22) !important}





/* ═══ Navy gehoert in den Beitrag — drei Blöcke, ueber den Text verteilt ═══ */
body.blog-skin.final-a .article-prose .signal-strip,
body.blog-skin.final-a .article-prose .module.decision-note,
body.blog-skin.final-a .article-prose [data-blog-content="fehler"] {
  background:var(--a-navy) !important; border-color:transparent !important}
body.blog-skin.final-a .article-prose .signal-strip,
body.blog-skin.final-a .article-prose .signal-strip p,
body.blog-skin.final-a .article-prose .signal-strip li,
body.blog-skin.final-a .article-prose .module.decision-note,
body.blog-skin.final-a .article-prose .module.decision-note p,
body.blog-skin.final-a .article-prose .module.decision-note li,
body.blog-skin.final-a .article-prose [data-blog-content="fehler"],
body.blog-skin.final-a .article-prose [data-blog-content="fehler"] p,
body.blog-skin.final-a .article-prose [data-blog-content="fehler"] li {
  color:rgba(255,255,255,.87) !important}
body.blog-skin.final-a .article-prose .signal-strip h3,
body.blog-skin.final-a .article-prose .signal-strip h4,
body.blog-skin.final-a .article-prose .signal-strip strong,
body.blog-skin.final-a .article-prose .module.decision-note h3,
body.blog-skin.final-a .article-prose .module.decision-note h4,
body.blog-skin.final-a .article-prose .module.decision-note strong,
body.blog-skin.final-a .article-prose [data-blog-content="fehler"] h3,
body.blog-skin.final-a .article-prose [data-blog-content="fehler"] h4,
body.blog-skin.final-a .article-prose [data-blog-content="fehler"] strong {color:#fff !important}
body.blog-skin.final-a .article-prose .signal-strip .mod-kick,
body.blog-skin.final-a .article-prose .module.decision-note .mod-kick,
body.blog-skin.final-a .article-prose [data-blog-content="fehler"] .mod-kick {
  color:var(--a-orange) !important}
body.blog-skin.final-a .article-prose .signal-strip svg,
body.blog-skin.final-a .article-prose .module.decision-note svg,
body.blog-skin.final-a .article-prose [data-blog-content="fehler"] svg {color:#fff !important; stroke:currentColor}
body.blog-skin.final-a .article-prose .signal-strip a,
body.blog-skin.final-a .article-prose .module.decision-note a,
body.blog-skin.final-a .article-prose [data-blog-content="fehler"] a {color:#93c0ff !important}


/* ═══ Ergebniswerte im Fliesstext: Zahl Ink, Einheit orange ═══ */
body.blog-skin.final-a .article-prose .wert {font-weight:800; color:var(--a-ink);
  font-variant-numeric:tabular-nums; white-space:nowrap}
body.blog-skin.final-a .article-prose .wert .einheit {color:var(--a-orange); font-weight:800}

/* ═══ Teilen-Leiste: helle Taste, Ink-Symbol, blauer Hover ═══ */
body.blog-skin.final-a .share-rail button {
  background:#fff !important; color:var(--a-ink) !important;
  border:1px solid rgba(51,49,50,.14) !important; box-shadow:none}
body.blog-skin.final-a .share-rail button svg {color:var(--a-ink); stroke:currentColor}
body.blog-skin.final-a .share-rail button:hover {
  background:var(--a-blue) !important; border-color:var(--a-blue) !important;
  color:#fff !important}
body.blog-skin.final-a .share-rail button:hover svg {color:#fff}

/* --- CTA im Text: Ink-Knopf, CI-Balken --- */


body.blog-skin.final-a .beitrag-cta::before {
  background:linear-gradient(180deg,var(--a-blue),var(--a-tief))}



/* --- Teilen: vier Symbole, ein Gewicht. Gefuellte Marken wirken schwerer als Striche. --- */
body.blog-skin.final-a .share-rail .row {gap:.55rem}
body.blog-skin.final-a .share-rail button {width:38px; height:38px}
body.blog-skin.final-a .share-rail button svg {width:15px !important; height:15px !important}
body.blog-skin.final-a .share-rail button svg[fill="currentColor"] {transform:scale(.88)}


/* --- ohne festen Kopf: der reservierte Abstand oben entfaellt --- */
body.blog-skin.final-a .pt-32 {padding-top:2.5rem !important}

/* 🔴 28.08.2026: Der Kopf IST fest (sticky, 78 px unter 1280, sonst 82 px).
   Mit top:2rem klebte die Spalte bei y=32 — Ueberschrift 'Inhalt' und der
   erste Kapitellink lagen dauerhaft hinter dem Kopf. 7rem = 112 px laesst
   30 px Luft darunter; die Hoehe unten zieht mit (siehe max-height). */
body.blog-skin.final-a .toc-rail {top:7rem}

/* Die Seitenspalte ist so hoch wie ihr Inhalt — bei zehn Kapiteln rund 865 px.
   Auf einem Laptop mit 700 px Fensterhöhe blieb der untere Teil samt Telefon-
   nummer dadurch unerreichbar: sticky klebt oben, gescrollt wird nur die Seite.
   Deshalb bekommt die Spalte eine eigene Höhe und scrollt bei Bedarf selbst.
   Nur ab 1021 px — darunter steht sie ohnehin im Lesefluss. */
@media (min-width:1021px){
  body.blog-skin.final-a .toc-rail{
    max-height:calc(100vh - 9rem);
    overflow-y:auto;
    /* NICHT 'contain': das fing Scrollgesten an der Spaltenkante ab,
       der Artikel schien festzuhaengen, sobald der Zeiger darueber stand. */
    overscroll-behavior:auto;
    padding-right:10px;
    scrollbar-width:thin;
    scrollbar-color:rgba(51,49,50,.22) transparent;
  }
  body.blog-skin.final-a .toc-rail::-webkit-scrollbar{width:6px}
  body.blog-skin.final-a .toc-rail::-webkit-scrollbar-track{background:transparent}
  body.blog-skin.final-a .toc-rail::-webkit-scrollbar-thumb{
    background:rgba(51,49,50,.18); border-radius:3px}
  body.blog-skin.final-a .toc-rail:hover::-webkit-scrollbar-thumb{
    background:rgba(51,49,50,.32)}
}

/* --- Knopf wie auf der Startseite: Navy, Tiefblau beim Ueberfahren,
       Stauchen beim Druecken (btn-ios). Farben sind der gesperrte CTA-Stand. --- */






/* --- Knopf exakt wie live im Kopf von lx-lx.de: der kleine Kreis waechst beim
       Ueberfahren auf das 16-fache und flutet den Knopf blau, die Pille wird
       weiss, der Pfeil fliegt. Werte 1:1 aus der Live-Seite uebernommen. --- */
body.blog-skin.final-a .beitrag-cta .cta {
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px;
  background:#000; color:#fff; font:700 .875rem/1 'Google Sans','Google Sans Flex',sans-serif;
  padding:12px 20px; border-radius:999px; text-decoration:none; white-space:nowrap;
  transition:transform .15s ease, opacity .15s ease}

body.blog-skin.final-a .beitrag-cta .cta .pill {
  position:relative; z-index:2; width:26px; height:26px; border-radius:99px;
  background:#1C3190; display:flex; align-items:center; justify-content:center;
  overflow:hidden; transition:background .35s ease, color .35s ease}
body.blog-skin.final-a .beitrag-cta .cta .morph {
  position:absolute; z-index:1; right:20px; top:50%; width:26px; height:26px;
  border-radius:99px; background:#167BFC; transform:translateY(-50%) scale(1);
  transition:transform .5s cubic-bezier(.65,0,.25,1)}
body.blog-skin.final-a .beitrag-cta .cta:hover .morph {transform:translateY(-50%) scale(16)}
body.blog-skin.final-a .beitrag-cta .cta:hover .pill {background:#fff; color:#167BFC}
body.blog-skin.final-a .beitrag-cta .cta:hover .pill i,
body.blog-skin.final-a .beitrag-cta .cta:hover .pill svg {
  animation:arrowFly .85s cubic-bezier(.5,0,.2,1) infinite}
body.blog-skin.final-a .beitrag-cta .cta:active {transform:scale(.97); opacity:.85}
@keyframes arrowFly {0%{transform:translateX(0)}40%{transform:translateX(16px)}
  41%{transform:translateX(-16px)}100%{transform:translateX(0)}}

/* --- derselbe Knopf auf dunklem Grund: invertiert, damit er nicht
       schwarz auf Navy steht. Flutung und Pfeilflug bleiben gleich. --- */









/* --- Der Knopf gilt ueberall gleich, nicht nur in .beitrag-cta. Vorher waren
       Form, Polster und Flutung an den Container gebunden — der Knopf im
       Navy-Block war dadurch 35 statt 50 px hoch und seine Pille eckig. --- */
body.blog-skin.final-a a.cta.btn-ios {
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px;
  background:#000; color:#fff; font:700 .875rem/1 'Google Sans','Google Sans Flex',sans-serif;
  padding:12px 20px !important; border-radius:999px !important; text-decoration:none;
  white-space:nowrap; align-self:flex-start; width:auto !important;
  transition:transform .15s ease, opacity .15s ease}

body.blog-skin.final-a a.cta.btn-ios .pill {
  position:relative; z-index:2; width:26px !important; height:26px !important;
  border-radius:99px !important; background:#1C3190; display:flex; align-items:center;
  justify-content:center; overflow:hidden; flex:none;
  transition:background .35s ease, color .35s ease}
body.blog-skin.final-a a.cta.btn-ios .pill i,
body.blog-skin.final-a a.cta.btn-ios .pill svg {color:#fff}
body.blog-skin.final-a a.cta.btn-ios .morph {
  position:absolute; z-index:1; right:20px; top:50%; width:26px; height:26px;
  border-radius:99px; background:#167BFC; transform:translateY(-50%) scale(1);
  transition:transform .5s cubic-bezier(.65,0,.25,1)}
body.blog-skin.final-a a.cta.btn-ios:hover .morph {transform:translateY(-50%) scale(16)}
body.blog-skin.final-a a.cta.btn-ios:hover .pill {background:#fff}
body.blog-skin.final-a a.cta.btn-ios:hover .pill i,
body.blog-skin.final-a a.cta.btn-ios:hover .pill svg {
  color:#167BFC; animation:arrowFly .85s cubic-bezier(.5,0,.2,1) infinite}
body.blog-skin.final-a a.cta.btn-ios:active {transform:scale(.97); opacity:.85}

/* auf dunklem Grund invertiert */







/* ── Vorlesen · direkt unter dem Inhaltsverzeichnis ── */
body.blog-skin.final-a .vorlesen {margin-top:1.2rem;padding-top:1.05rem;
  border-top:1px solid rgba(51,49,50,.12)}
body.blog-skin.final-a .vorlesen button {display:inline-flex;align-items:center;gap:9px;
  background:#fff;border:1px solid rgba(51,49,50,.14);color:#333132;
  font:600 13px/1 'Google Sans','Google Sans Flex',sans-serif;padding:10px 15px;
  border-radius:999px;cursor:pointer;transition:.15s;width:100%;justify-content:flex-start}
body.blog-skin.final-a .vorlesen button:hover {background:#167BFC;border-color:#167BFC;color:#fff}
body.blog-skin.final-a .vorlesen button svg {width:15px;height:15px;flex:none}
body.blog-skin.final-a .vorlesen .stand {display:block;margin-top:.5rem;font-size:11px;
  color:#8a8889;line-height:1.4;font-variant-numeric:tabular-nums}

/* ── Ansprechpartner · unterste Position der Leiste ── */
body.blog-skin.final-a .person {margin-top:1.4rem;padding-top:1.15rem;
  border-top:1px solid rgba(51,49,50,.12)}
body.blog-skin.final-a .person .lab {display:block;font-family:'Google Sans',system-ui,-apple-system,sans-serif;
  font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:#8a8889;margin-bottom:.75rem}
body.blog-skin.final-a .person .kopf {display:flex;align-items:center;gap:11px}

body.blog-skin.final-a .person .nam {font:800 13.5px/1.25 'Google Sans',sans-serif;color:#333132}
body.blog-skin.final-a .person .rol {display:block;font-size:11.5px;font-weight:500;
  color:#8a8889;margin-top:2px}
body.blog-skin.final-a .person .zeile {margin:.85rem 0 0;font-size:12.5px;line-height:1.5;
  color:#6b6a6b}
/* Tippflaeche: Breadcrumb und Telefonlink lagen bei 20 bzw. 38 px.
   Auf dem Handy sind 44 px die Untergrenze fuer sicheres Treffen. */
@media (max-width:1020px){
  body.blog-skin.final-a main a[href="index.html"],
  body.blog-skin.final-a a[href^="tel:"]{
    min-height:44px; display:inline-flex; align-items:center}
}
body.blog-skin.final-a .person .ruf {display:inline-flex;align-items:center;gap:7px;margin-top:.7rem;
  font:700 13px/1 'Google Sans',sans-serif;color:#167BFC;text-decoration:none}
body.blog-skin.final-a .person .ruf:hover {color:#1C3190}
body.blog-skin.final-a .person .ruf svg {width:14px;height:14px}

/* --- Byline: die Wortmarke als Absender, Angaben kraeftiger, Symbole in Orange --- */
body.blog-skin.final-a .article-meta {gap:10px 16px}
body.blog-skin.final-a .article-meta span {font-size:14px !important; font-weight:650 !important;
  color:#6b6a6b !important}
body.blog-skin.final-a .article-meta .marke em {font-style:italic; font-weight:900;
  font-size:20px; letter-spacing:-.055em; color:#333132; line-height:1}
body.blog-skin.final-a .article-meta .marke b {color:#167BFC; font-weight:900}
/* Byline traegt jetzt das echte Logo statt der nachgebauten Wortmarke (24.08.2026) */
body.blog-skin.final-a .article-meta .marke img {display:block; width:auto; height:20px}
@media (max-width:640px){ body.blog-skin.final-a .article-meta .marke img {height:18px} }

body.blog-skin.final-a .article-meta .sep {background:rgba(51,49,50,.24)}

/* --- Hero: Pille raus, Titel etwas groesser, Angaben in Schriftfarbe --- */
body.blog-skin.final-a .hero-title {font-size:3.4rem !important; line-height:1.02 !important;
  letter-spacing:-.042em !important; margin-top:.2rem}
body.blog-skin.final-a .article-meta span {color:#333132 !important}
body.blog-skin.final-a .article-meta svg {color:#CC5500 !important; stroke-width:2.8}
body.blog-skin.final-a .article-meta .sep {background:rgba(51,49,50,.3)}

/* --- Ansprechpartner: Navy-Karte statt loser Zeilen --- */
body.blog-skin.final-a .person {margin-top:1.5rem; padding:20px 18px 18px; border-top:0;
  background:#0F2542; border-radius:20px; color:#fff}
body.blog-skin.final-a .person .lab {color:rgba(255,255,255,.55); margin-bottom:.9rem}
body.blog-skin.final-a .person .kopf {gap:12px}

body.blog-skin.final-a .person .nam {color:#fff; font-size:14px}
body.blog-skin.final-a .person .rol {color:rgba(255,255,255,.6); font-size:11.5px}
body.blog-skin.final-a .person .zeile {color:rgba(255,255,255,.78); font-size:12.5px;
  margin-top:1rem; padding-top:.95rem; border-top:1px solid rgba(255,255,255,.14)}
body.blog-skin.final-a .person .ruf {color:#fff; font-size:14px; margin-top:.85rem;
  padding:9px 14px; background:rgba(255,255,255,.1); border-radius:999px;
  border:1px solid rgba(255,255,255,.16); transition:.15s}
body.blog-skin.final-a .person .ruf:hover {background:#fff; color:#0F2542; border-color:#fff}
body.blog-skin.final-a .person .ruf svg {color:#CC5500; stroke-width:2.6}
body.blog-skin.final-a .person .ruf:hover svg {color:#0F2542}

/* Rolle unter den Namen ziehen — neben dem Signet ist sie zu schmal und bricht im Wort */

body.blog-skin.final-a .person .nam {display:block; white-space:nowrap}
/* Firmenzeile darf umbrechen — sie ist laenger als ein Personenname (25.08.2026) */
body.blog-skin.final-a .person .nam {white-space:normal}
body.blog-skin.final-a .person .rol {white-space:nowrap; margin-top:3px}


/* --- Ansprechpartner: Wortmarke statt Initialen, Ruftaste weiss und ueber die volle Breite --- */
body.blog-skin.final-a .person .kopf {display:block}
body.blog-skin.final-a .person .marke-bild {display:block; width:96px; height:auto;
  margin:0 0 14px; opacity:1}
body.blog-skin.final-a .person .nam {font-size:14.5px}
body.blog-skin.final-a .person .ruf {display:flex; width:100%; justify-content:center;
  background:#fff !important; color:#0F2542 !important; border:1px solid #fff !important;
  font-weight:800; padding:11px 14px; margin-top:1rem}

body.blog-skin.final-a .person .ruf:hover {background:#167BFC !important; color:#fff !important;
  border-color:#167BFC !important}
body.blog-skin.final-a .person .ruf:hover svg {color:#fff !important}

/* ═══════════ Harmonie-Schicht ═══════════
   Umgesetzt sind die Punkte, in denen Kimi, Codex und ich übereinstimmten:
   ein Grau, Orange nur an Ergebniswerten, vier Radien, 8-px-Raster. */

/* ── 1 · eine Sekundärfarbe, eine Hervorhebung ── */
body.blog-skin.final-a .toc-rail a,
body.blog-skin.final-a .text-gray-600,
body.blog-skin.final-a .text-gray-500,
body.blog-skin.final-a .text-gray-400,
body.blog-skin.final-a figcaption {color:#6B6A6B !important}
body.blog-skin.final-a .toc-rail a:hover,
body.blog-skin.final-a .article-prose strong,
body.blog-skin.final-a .article-prose b {color:#333132 !important}


/* ── 2 · Orange trägt nur noch Ergebniswerte ── */
body.blog-skin.final-a .article-meta svg {color:#6B6A6B !important}
body.blog-skin.final-a .person .ruf svg {color:#0F2542 !important}
body.blog-skin.final-a .person .ruf:hover svg {color:#fff !important}
body.blog-skin.final-a .article-prose .signal-strip .mod-kick,
body.blog-skin.final-a .article-prose .module.decision-note .mod-kick,
body.blog-skin.final-a .article-prose [data-blog-content="fehler"] .mod-kick {
  color:rgba(255,255,255,.72) !important}          /* 10 px orange auf Navy = 2,3:1 */
body.blog-skin.final-a .margin-note.is-stat .label {
  color:#6B6A6B !important; background:#F4F6F8 !important;
  border-color:rgba(51,49,50,.12) !important}
body.blog-skin.final-a .margin-note.is-stat .label svg {color:#6B6A6B !important}
body.blog-skin.final-a .wert .einheit,
body.blog-skin.final-a .stat-num .einheit {color:#CC5500 !important}   /* der einzige Ort */

/* ── 3 · vier Radien statt zehn ── */
body.blog-skin.final-a .module,
body.blog-skin.final-a .article-prose figure > div,
body.blog-skin.final-a .squircle-xl,
body.blog-skin.final-a .signal-strip {border-radius:28px !important}
body.blog-skin.final-a .margin-note,
body.blog-skin.final-a .person,
body.blog-skin.final-a .beitrag-cta {border-radius:22px !important}
body.blog-skin.final-a .fact-card,
body.blog-skin.final-a .module .module,
body.blog-skin.final-a .lead-panel > div {border-radius:18px !important}
body.blog-skin.final-a .label,
body.blog-skin.final-a .share-rail button,
body.blog-skin.final-a .vorlesen button,
body.blog-skin.final-a a.cta.btn-ios,
body.blog-skin.final-a .person .ruf {border-radius:999px !important}

/* ── 4 · 8-px-Raster ── */
body.blog-skin.final-a .article-prose p {margin-bottom:24px}
body.blog-skin.final-a .article-prose .module,
body.blog-skin.final-a .article-prose .beitrag-cta {margin:40px 0}


body.blog-skin.final-a .article-meta {margin-bottom:32px}
body.blog-skin.final-a .margin-note {padding:18px}

body.blog-skin.final-a .share-rail,
body.blog-skin.final-a .vorlesen {margin-top:24px; padding-top:16px}
body.blog-skin.final-a .person {margin-top:24px; padding:20px 18px 18px}

/* ── Nachlese: die Stellen, die die erste Schicht nicht erreicht hat ── */
body.blog-skin.final-a .article-prose h3,
body.blog-skin.final-a .module h3 {color:#333132 !important}

body.blog-skin.final-a .signal-strip h3,
body.blog-skin.final-a .decision-note h3,
body.blog-skin.final-a [data-blog-content="fehler"] h3 {color:#fff !important}

/* Icon-Kaesten auf die innere Stufe, Pillen auf den einen Rund-Wert */
body.blog-skin.final-a .w-10.h-10,
body.blog-skin.final-a .w-11.h-11,
body.blog-skin.final-a .step-num {border-radius:18px !important}
body.blog-skin.final-a a.cta.btn-ios .pill,
body.blog-skin.final-a a.cta.btn-ios .morph {border-radius:999px !important}

/* Raster auch dort, wo Komponenten eigene rem-Werte mitbringen */





/* --- Ablauf als erkennbare Abfolge: kraeftige Schrittmarker mit Verbindungslinie.
       Einzige Stelle im Text, an der Reihenfolge zaehlt — hier arbeitet Farbe,
       statt zu dekorieren. Keine Karte wird eingefaerbt. --- */

body.blog-skin.final-a .article-prose [data-blog-content="ablauf"]::before {
  content:""; position:absolute; left:42px; top:44px; bottom:44px; width:2px;
  background:#167BFC; opacity:.22; border-radius:2px}
body.blog-skin.final-a .article-prose [data-blog-content="ablauf"] > div {
  position:relative; display:grid; grid-template-columns:44px 1fr;
  column-gap:18px; align-items:start; padding:20px 22px}
body.blog-skin.final-a .article-prose [data-blog-content="ablauf"] .step-num {
  grid-row:1 / span 2; width:44px !important; height:44px !important;
  border-radius:999px !important; background:#167BFC !important; color:#fff !important;
  font:800 19px/1 'Google Sans','Google Sans Flex',sans-serif !important;
  margin:0 !important; box-shadow:0 0 0 4px #fff, 0 2px 8px rgba(22,123,252,.28);
  position:relative; z-index:2}
body.blog-skin.final-a .article-prose [data-blog-content="ablauf"] h3 {
  grid-column:2; margin:2px 0 6px !important; align-self:center}
body.blog-skin.final-a .article-prose [data-blog-content="ablauf"] p {
  grid-column:2; margin:0 !important}

/* --- Kapitelnummern raus: die Kapitel tragen ihre Überschrift, keine Zählung --- */


/* ═══════════ Typo-Skala ═══════════
   Konsens aus beiden Analysen. Kernfehler war H3: lag 1,4 px über dem Fliesstext
   und war damit unsichtbar. Jetzt echte Gewichte, weil Google Sans Flex laedt. */
body.blog-skin.final-a .hero-title {font-size:54px !important; font-weight:800 !important;
  line-height:1.02 !important; letter-spacing:-.042em !important}
body.blog-skin.final-a .article-prose h2 {font-size:32px !important; font-weight:800 !important;
  line-height:1.12 !important; letter-spacing:-.032em !important;
  margin-top:96px !important; margin-bottom:16px !important}
body.blog-skin.final-a .article-prose h2:first-child {margin-top:0 !important}
body.blog-skin.final-a .article-prose h3 {font-size:22px !important; font-weight:700 !important;
  line-height:1.22 !important; letter-spacing:-.022em !important;
  margin-top:32px !important; margin-bottom:8px !important}
body.blog-skin.final-a .article-prose .lead,
body.blog-skin.final-a .lead-panel .lead {font-size:20px !important; font-weight:500 !important;
  line-height:1.5 !important; color:#333132 !important}
body.blog-skin.final-a .article-prose p,
body.blog-skin.final-a .article-prose li {font-size:17px !important; font-weight:400 !important;
  line-height:1.62 !important}

/* Kleinschriften auf zwei Stufen statt fuenf */
body.blog-skin.final-a .margin-note p,
body.blog-skin.final-a .fact-card,
body.blog-skin.final-a figcaption,
body.blog-skin.final-a .article-meta span,
body.blog-skin.final-a .person .zeile,
body.blog-skin.final-a .toc-rail a {font-size:13px !important}
body.blog-skin.final-a .label,
body.blog-skin.final-a .mod-kick,
body.blog-skin.final-a .share-rail p,
body.blog-skin.final-a .person .lab {font-size:11px !important}

/* Module in den Navy-Bloecken folgen derselben Stufung */
body.blog-skin.final-a .signal-strip h3,
body.blog-skin.final-a .decision-note h3,
body.blog-skin.final-a [data-blog-content="fehler"] h3 {font-size:22px !important}

/* ═══════════ Breitenkontrast ═══════════
   Bisher waren Fliesstext und Module beide 660 px breit — kein Unterschied.
   Der Text geht auf 62 Zeichen zurueck (war 78, ueber der Lesegrenze),
   Module und Bilder bleiben bei 660. Der Kontrast entsteht aus der Differenz,
   ohne eine einzige neue Farbflaeche. */
body.blog-skin.final-a .article-prose > p,
body.blog-skin.final-a .article-prose > ul,
body.blog-skin.final-a .article-prose > ol,
body.blog-skin.final-a .article-prose > h3 {max-width:588px !important}
body.blog-skin.final-a .article-prose > h2 {max-width:520px}   /* Ueberschrift bricht frueher */

/* Module, Bilder und dunkle Bloecke behalten die volle Spaltenbreite */
body.blog-skin.final-a .article-prose .module,
body.blog-skin.final-a .article-prose figure,
body.blog-skin.final-a .article-prose .beitrag-cta,
body.blog-skin.final-a .article-prose .signal-strip {max-width:none; width:100%}

/* Kapitelgruppen: nach je drei Kapiteln eine groessere Pause (Codex' Vorschlag) */
/* Groessere Pause zwischen Kapitelgruppen. Klasse am h2 setzen, nicht an
   feste Kapitel-IDs binden — die Kapitelzahl aendert sich je Beitrag. */
body.blog-skin.final-a .article-prose h2.kapitel-pause {margin-top:128px !important}

/* ═══════════ Kennzahl-Ausbruch ═══════════
   Navy-Band, das aus der 588er-Textspalte auf die volle Rasterbreite ausbricht.
   Traegt die einzige harte Zahl des Kapitels: weiss, Einheit orange bei 96 px —
   weit ueber der 24-px-Grenze fuer Orange auf Navy (3,57:1). */
body.blog-skin.final-a .kennzahl-band {
  position:relative; margin:64px 0; padding:40px 44px; border-radius:28px;
  background:#0F2542; color:#fff; max-width:none !important;
  width:calc(100% + 96px); margin-left:-48px;
  display:grid; grid-template-columns:minmax(0,auto) minmax(300px,1fr);
  align-items:center; gap:52px; overflow:hidden}
body.blog-skin.final-a .kennzahl-band::after {
  content:""; position:absolute; right:-60px; top:50%; transform:translateY(-50%);
  width:260px; height:260px; border-radius:999px;
  background:radial-gradient(circle, rgba(204,85,0,.22) 0%, rgba(204,85,0,0) 68%)}
body.blog-skin.final-a .kennzahl-band .zahl {
  font-size:58px; font-weight:900; line-height:.95; letter-spacing:-.05em;
  white-space:nowrap; font-variant-numeric:tabular-nums; position:relative; z-index:1}
body.blog-skin.final-a .kennzahl-band .zahl .eh {color:#CC5500; font-size:.5em;
  letter-spacing:-.02em; margin-left:6px}
body.blog-skin.final-a .kennzahl-band .txt {position:relative; z-index:1}
body.blog-skin.final-a .kennzahl-band .kick {
  display:block; font-size:11px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:#CC5500; margin-bottom:10px}
body.blog-skin.final-a .kennzahl-band p {
  font-size:17px !important; line-height:1.5 !important; color:rgba(255,255,255,.86) !important;
  margin:0 !important; max-width:42ch}
@media (max-width:1080px) {
  body.blog-skin.final-a .kennzahl-band {grid-template-columns:1fr; gap:20px;
    width:100%; margin-left:0; padding:32px}
  body.blog-skin.final-a .kennzahl-band .zahl {font-size:64px}
}

/* ── Feldueberschriften in hellen Modulen: waren 11-px-Kicker, jetzt echte
      Kleinueberschriften. In den Navy-Bloecken bleibt der Kicker ein Kicker. ── */
body.blog-skin.final-a .article-prose .module:not(.signal-strip):not(.decision-note):not([data-blog-content="fehler"]):not([data-blog-cta="inline"]) .mod-kick {
  font-size:15px !important; font-weight:800 !important; color:#333132 !important;
  letter-spacing:-.01em !important; text-transform:none !important;
  margin-bottom:6px !important}
body.blog-skin.final-a .fact-card .label,
body.blog-skin.final-a .margin-note h4 {font-weight:800 !important}
body.blog-skin.final-a .margin-note .label {font-weight:800 !important}

/* ── Das Band bleibt in der Spalte, bricht nur nach rechts aus ── */
body.blog-skin.final-a .kennzahl-band {
  width:100% !important; margin-left:0 !important; margin-right:0 !important}
/* ── kein Lichtschein im Hintergrund ── */
body.blog-skin.final-a .kennzahl-band::after {display:none !important}

/* ── Inhaltsverzeichnis: lange Titel werden gekuerzt statt in den Beitrag zu ragen ── */
body.blog-skin.final-a .toc-rail a {
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%}
body.blog-skin.final-a .toc-rail nav {overflow:hidden}

/* Zahl und Erklaerung untereinander — nebeneinander bleibt fuer beides zu wenig Platz */
body.blog-skin.final-a .kennzahl-band {
  display:block !important; padding:36px 44px !important}
body.blog-skin.final-a .kennzahl-band .zahl {
  font-size:64px !important; margin-bottom:18px; display:block}
body.blog-skin.final-a .kennzahl-band .txt {max-width:52ch}
body.blog-skin.final-a .kennzahl-band p {max-width:52ch}

/* ═══════════ Responsive-Schicht ═══════════
   Ausgangsmessung bei 390 px: Dokument 487 px breit. Verursacher war die
   Notiz-Leiste (462 px) — nicht das H1 (374 px, passt). Die Leiste blieb
   unter 1020 px zweispaltig; „Fahrzeugidentnummer" und
   „Wiederbeschaffungswert" haben das Raster aufgezogen. */

/* ── 0 · Grundschutz: kein Element darf breiter werden als sein Platz ── */
body.blog-skin.final-a .layout-grid > *,
body.blog-skin.final-a .fact-card,
body.blog-skin.final-a .beitrag-cta > *,
body.blog-skin.final-a .beitrag-cta .akt,
body.blog-skin.final-a .margin-item {min-width:0}
body.blog-skin.final-a .hero-title,
body.blog-skin.final-a .article-prose h2,
body.blog-skin.final-a .article-prose h3,
body.blog-skin.final-a .article-prose p,
body.blog-skin.final-a .article-prose li,
body.blog-skin.final-a .margin-note h4,
body.blog-skin.final-a .margin-note p,
body.blog-skin.final-a .fact-card {overflow-wrap:break-word; hyphens:auto}


/* ── 1 · ≤1340 px: die Leiste wird einspaltig ── */
@media (max-width:1340px) {
  body.blog-skin.final-a .margin-rail {grid-template-columns:minmax(0,1fr) !important}
}

/* Zwischen 1021 und 1340 px steht die Beitragsspalte auf 1fr — dort wurde ein
   Modul 904 px breit, waehrend der Text bei 588 blieb. Gleicher Deckel wie oben. */
@media (max-width:1340px) and (min-width:1021px) {
  body.blog-skin.final-a .layout-grid {
    grid-template-columns:240px minmax(0,660px); justify-content:center}
}

/* ── 2 · ≤1340 px: die Leiste löst sich auf — jede Notiz steht an ihrem Anker.
      Das Skript verschiebt sie dorthin; die drei Zitatkarten entfallen, weil
      sie den Fließtext wörtlich wiederholen. Hover-Tooltips scheiden aus:
      auf Touch gibt es kein Hover, sie wären unbedienbar. ── */
@media (max-width:1020px) {
  body.blog-skin.final-a .toc-rail {position:static !important}
  /* Der Beitrag bleibt zentriert und behaelt sein Zeilenmass — sonst laeuft
     der Text auf dem Tablet ueber ~95 Zeichen und wird unlesbar. */
  body.blog-skin.final-a .layout-grid {max-width:660px; margin-left:auto; margin-right:auto}
  body.blog-skin.final-a .article-prose > p,
  body.blog-skin.final-a .article-prose > ul,
  body.blog-skin.final-a .article-prose > ol,
  body.blog-skin.final-a .article-prose > h3 {max-width:min(100%,588px) !important}
  body.blog-skin.final-a .article-prose > h2 {max-width:min(100%,520px) !important}
}

body.blog-skin.final-a .margin-rail.ist-leer {display:none !important}

/* Notiz im Lesefluss: Akzentkante statt Karte — sie soll sich vom Text
   absetzen, aber nicht mit den Modulen um Aufmerksamkeit konkurrieren. */
body.blog-skin.final-a .margin-item.im-text {
  position:static !important; opacity:1 !important; transform:none !important;
  width:auto !important; max-width:100% !important; margin:26px 0 !important}
body.blog-skin.final-a .margin-item.im-text .margin-note {
  background:transparent !important; border:0 !important;
  border-left:3px solid #167BFC !important; border-radius:0 !important;
  padding:2px 0 2px 18px !important; box-shadow:none !important}
/* Im Lesefluss darf die Notiz nicht Randspalten-klein bleiben: 13 px neben
   17 px Fliesstext wirken wie ein Fussnoten-Rest. */
body.blog-skin.final-a .margin-item.im-text .margin-note p {font-size:15px !important;
  line-height:1.55 !important}
body.blog-skin.final-a .margin-item.im-text .margin-note h4 {font-size:16px !important;
  margin-bottom:4px !important}
body.blog-skin.final-a .margin-item.im-text .margin-note .label {
  background:transparent !important; border:0 !important; padding:0 !important;
  margin-bottom:6px !important}
body.blog-skin.final-a .margin-item.nur-zitat.im-text {display:none !important}

/* ── 3 · ≤720 px: alles einspaltig, Touch-Ziele auf 44 px ── */
@media (max-width:720px) {
  body.blog-skin.final-a .article-prose .fact-grid,
  body.blog-skin.final-a .article-prose [data-blog-content="vergleich"],
  body.blog-skin.final-a .article-prose .grid.grid-cols-2 {
    grid-template-columns:minmax(0,1fr) !important}
  body.blog-skin.final-a .beitrag-cta {grid-template-columns:minmax(0,1fr) !important}
  body.blog-skin.final-a .beitrag-cta .akt {
    flex-direction:column !important; align-items:stretch !important}
  
  body.blog-skin.final-a .beitrag-cta .tel {
    white-space:normal !important; text-align:center;
    min-height:44px; display:flex; align-items:center; justify-content:center}
  body.blog-skin.final-a .share-rail button {width:44px !important; height:44px !important}
  body.blog-skin.final-a div[class*="aspect-"] {aspect-ratio:16/10 !important}
}

/* ── 4 · ≤600 px: Typo- und Abstandsstufe ── */
@media (max-width:600px) {
  body.blog-skin.final-a .px-8 {padding-left:16px !important; padding-right:16px !important}
  body.blog-skin.final-a .hero-title {
    font-size:clamp(30px,8.4vw,54px) !important; letter-spacing:-.03em !important;
    line-height:1.06 !important}
  body.blog-skin.final-a .article-prose h2 {
    font-size:26px !important; margin-top:56px !important}
  body.blog-skin.final-a .article-prose h2.kapitel-pause {margin-top:72px !important}
  body.blog-skin.final-a .article-prose h3 {font-size:20px !important}
  body.blog-skin.final-a .article-prose .lead,
  body.blog-skin.final-a .lead-panel .lead {font-size:18px !important}
  body.blog-skin.final-a .article-prose .module,
  body.blog-skin.final-a .article-prose .beitrag-cta {
    padding:20px !important; margin:28px 0 !important; border-radius:20px !important}
  body.blog-skin.final-a .kennzahl-band {
    padding:24px 20px !important; border-radius:20px !important}
  body.blog-skin.final-a .kennzahl-band .zahl {
    font-size:clamp(38px,11.5vw,64px) !important; white-space:normal !important;
    margin-bottom:12px}
  body.blog-skin.final-a .article-prose [data-blog-content="ablauf"] > div {
    grid-template-columns:36px minmax(0,1fr) !important;
    column-gap:12px !important; padding:16px !important}
  body.blog-skin.final-a .article-prose [data-blog-content="ablauf"] .step-num {
    width:36px !important; height:36px !important; font-size:16px !important}
  body.blog-skin.final-a .article-prose [data-blog-content="ablauf"]::before {
    left:34px !important}
}

/* ── 5 · ≤400 px: letzte Verdichtung ── */
@media (max-width:400px) {
  body.blog-skin.final-a .article-prose h2 {font-size:24px !important}
  body.blog-skin.final-a .article-prose .module,
  body.blog-skin.final-a .article-prose .beitrag-cta,
  body.blog-skin.final-a .kennzahl-band {padding:18px !important}
}

/* ── 6 · Lesereihenfolge unter 1020 px ──
      Beitrag zuerst. Das Inhaltsverzeichnis sitzt als zugeklappter Aufklapper
      darüber, alles Übrige (Teilen, Vorlesen, Ansprechpartner) folgt danach —
      dort, wo es nach dem Lesen gebraucht wird. */
@media (max-width:1020px) {
  /* Die Leiste wird vom Skript wirklich hinter den Artikel gehaengt — order
     allein haette nur das Bild verschoben, Tastatur und Screenreader waeren
     weiter zuerst durch die Werkzeuge gelaufen. */
  body.blog-skin.final-a .layout-grid > .toc-rail {margin-top:48px}
  /* Nur wenn das Skript die Liste wirklich in den Aufklapper umgehaengt hat —
     ohne JavaScript bliebe hier sonst gar kein Inhaltsverzeichnis uebrig. */
  html.toc-umgehaengt body.blog-skin.final-a .toc-rail > p:first-child {display:none}
  html.toc-umgehaengt body.blog-skin.final-a .toc-rail nav {display:none}
}
@media not all and (max-width:1020px) {
  body.blog-skin.final-a .toc-mobil {display:none}
}

body.blog-skin.final-a .toc-mobil {
  border:1px solid rgba(51,49,50,.12); border-radius:14px;
  background:#fff; margin:0 0 32px; overflow:hidden}
/* Bei Beitraegen mit 1.300+ Woertern war das Verzeichnis nach dem ersten
   Bildschirm weg. Der geschlossene Kopf bleibt jetzt oben stehen, die
   geoeffnete Liste bekommt eine eigene Hoehe. */
body.blog-skin.final-a .toc-mobil {
  position:sticky !important; top:0 !important; z-index:30 !important;
  background:#F7F7F8 !important;}
body.blog-skin.final-a .toc-mobil[open] > nav,
body.blog-skin.final-a .toc-mobil[open] > ul {
  max-height:58vh !important; overflow-y:auto !important;}
body.blog-skin.final-a .toc-mobil > summary {
  list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:12px; min-height:48px; padding:0 16px;
  font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#333132}
body.blog-skin.final-a .toc-mobil > summary::-webkit-details-marker {display:none}
body.blog-skin.final-a .toc-mobil > summary::after {
  content:""; width:9px; height:9px; flex:none; margin-right:3px;
  border-right:2px solid #6B6A6B; border-bottom:2px solid #6B6A6B;
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s}
body.blog-skin.final-a .toc-mobil[open] > summary::after {
  transform:rotate(-135deg) translate(-3px,-3px)}
body.blog-skin.final-a .toc-mobil > summary .zahl-kap {
  margin-left:auto; font-weight:600; letter-spacing:0; text-transform:none;
  color:#6B6A6B}
body.blog-skin.final-a .toc-mobil nav {
  display:block !important; border-left:0 !important;
  padding:2px 16px 12px; border-top:1px solid rgba(51,49,50,.08)}
body.blog-skin.final-a .toc-mobil nav a {
  display:block; padding:11px 0; border-left:0 !important; margin-left:0;
  font-size:14px !important; min-height:44px; line-height:1.35}

/* ── 7 · Schlusscheck: Befunde von Kimi und Codex ── */

/* Die Rueckmeldung nach dem Kopieren war unsichtbar: die Grundfarben der
   Teilen-Knoepfe stehen mit !important spaeter in der Kaskade. */
body.blog-skin.final-a .share-rail button.copied{
  background:#167BFC !important; border-color:#167BFC !important; color:#fff !important}

/* Modulueberschrift des Schnelltests — war ein h3 vor dem ersten h2 und hat
   damit die Ueberschriftenebene uebersprungen. Optik unveraendert. */
body.blog-skin.final-a .article-prose .module p.mod-titel,
body.blog-skin.final-a .article-prose .signal-strip p.mod-titel,
body.blog-skin.final-a .article-prose p.mod-titel {
  font-size:22px !important; font-weight:700 !important; line-height:1.22 !important;
  letter-spacing:-.022em !important; margin:0 0 4px !important; color:inherit !important}
@media (max-width:600px) {
  body.blog-skin.final-a .article-prose .module p.mod-titel,
  body.blog-skin.final-a .article-prose .signal-strip p.mod-titel,
  body.blog-skin.final-a .article-prose p.mod-titel {font-size:20px !important}
}

/* Der Vorlese-Knopf lag bei ~35 px — unter dem 44-px-Touchziel. */
body.blog-skin.final-a .vorlesen button {min-height:44px}
body.blog-skin.final-a .share-rail button {min-width:38px}

/* Orange auf Navy erreicht bei 11 px nur 3,57:1 und ist ausserdem den
   Ergebniswerten vorbehalten — der Kicker wird weiss. */
body.blog-skin.final-a .kennzahl-band .kick {color:rgba(255,255,255,.72) !important}

/* Die Reduced-Motion-Regel liess die endlose Pfeilanimation weiterlaufen. */
@media (prefers-reduced-motion: reduce) {
  body.blog-skin.final-a *,
  body.blog-skin.final-a *::before,
  body.blog-skin.final-a *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* ═══════════ Tabellen und Aufzaehlungen im Fliesstext ═══════════
   Beides kommt in den Ratgeber-Texten vor, hatte aber keine Gestaltung:
   Tabellen standen im Browser-Standard und liefen auf dem Handy ueber
   (gemessen: bis 142 px), Aufzaehlungen hatten weder Punkt noch Einzug,
   weil die vorhandene Listenregel fuer die Module gedacht ist. */

/* Der Rahmen darf scrollen, die Seite nicht. */
body.blog-skin.final-a .article-prose .tabelle-rahmen{
  max-width:660px; margin:32px 0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid rgba(51,49,50,.12); border-radius:18px; background:#fff}
body.blog-skin.final-a .article-prose table{
  width:100%; border-collapse:collapse; font-size:15px; line-height:1.5;
  min-width:min(100%,460px)}
/* Ohne sichtbaren Hinweis blieben rechte Spalten auf 320 px unentdeckt:
   Verlauf am rechten Rand plus Tastaturfokus fuer den Scrollbereich. */
/* Deutsche Komposita sprengen schmale Geraete: „Schadenregulierungs-
   beauftragten" ist 326 px breit und passte auf 320 px nicht. hyphens:auto
   allein reicht nicht, weil das Wort keine Trennstellen im Woerterbuch hat. */
body.blog-skin.final-a .article-prose p,
body.blog-skin.final-a .article-prose li,
body.blog-skin.final-a .article-prose h1,
body.blog-skin.final-a .article-prose h2,
body.blog-skin.final-a .article-prose h3,
body.blog-skin.final-a .article-prose strong,
body.blog-skin.final-a .hero-title,
body.blog-skin.final-a .module p,
body.blog-skin.final-a .module h3,
body.blog-skin.final-a .body-col p,
body.blog-skin.final-a .body-col strong,
body.blog-skin.final-a .body-col li {overflow-wrap:break-word; word-break:normal}
@media (max-width:600px){
  /* Die aeussere .module-Regel polstert den Wrapper, obwohl die Karten darin
     schon Innenabstand haben — bei 320 px blieben nur 172 px Textbreite. */
  body.blog-skin.final-a .article-prose [data-blog-content="ablauf"],
  body.blog-skin.final-a .article-prose [data-blog-content="vergleich"]{
    padding-left:0 !important; padding-right:0 !important;
    background:transparent !important; box-shadow:none !important}
}
@media (max-width:400px){
  body.blog-skin.final-a .article-prose p,
  body.blog-skin.final-a .article-prose li,
  body.blog-skin.final-a .article-prose strong,
  body.blog-skin.final-a .body-col p,
  body.blog-skin.final-a .body-col strong {overflow-wrap:anywhere}
}

body.blog-skin.final-a .article-prose .tabelle-rahmen{
  position:relative;
  background-image:linear-gradient(to right, rgba(255,255,255,0) calc(100% - 34px), rgba(255,255,255,.96));
  background-repeat:no-repeat; background-attachment:local, scroll;}
body.blog-skin.final-a .article-prose .tabelle-rahmen:focus-visible{
  outline:2px solid #167BFC; outline-offset:2px}
body.blog-skin.final-a .article-prose thead th{
  text-align:left; font-weight:800; color:#333132; font-size:13px;
  letter-spacing:.02em; padding:14px 18px; background:#F4F6F8;
  border-bottom:1px solid rgba(51,49,50,.12); line-height:1.35}
body.blog-skin.final-a .article-prose tbody td{
  padding:13px 18px; color:#4b5563; vertical-align:top;
  border-bottom:1px solid rgba(51,49,50,.07)}
body.blog-skin.final-a .article-prose tbody tr:last-child td{border-bottom:0}
body.blog-skin.final-a .article-prose tbody td:first-child{
  color:#333132; font-weight:600}

/* Aufzaehlungen im Fliesstext — nicht in Modulen, dort gelten eigene Regeln. */
body.blog-skin.final-a .article-prose > ul,
body.blog-skin.final-a .article-prose > ol{
  max-width:588px; margin:20px 0; padding-left:24px}
body.blog-skin.final-a .article-prose > ul{list-style:disc}
body.blog-skin.final-a .article-prose > ol{list-style:decimal}
body.blog-skin.final-a .article-prose > ul > li,
body.blog-skin.final-a .article-prose > ol > li{
  font-size:17px !important; line-height:1.62 !important; color:#333132 !important;
  margin-bottom:8px; padding-left:4px}
body.blog-skin.final-a .article-prose > ul > li::marker,
body.blog-skin.final-a .article-prose > ol > li::marker{color:#167BFC}

@media (max-width:600px){
  body.blog-skin.final-a .article-prose .tabelle-rahmen{border-radius:14px; margin:24px 0}
  body.blog-skin.final-a .article-prose table{font-size:14px; min-width:460px}
  body.blog-skin.final-a .article-prose thead th{padding:12px 14px}
  body.blog-skin.final-a .article-prose tbody td{padding:11px 14px}
}

/* ═══════════ Zurückgeholt nach dem Entschlacken ═══════════
   Diese Regeln wirken erst im Zusammenspiel: eine Stapelreihenfolge ändert
   im Ruhezustand nichts, ein Bezugspunkt für absolute Kinder ebenso wenig.
   Meine Wirkungsmessung verglich Farben, Größen und Abstände — aber weder
   position noch z-index. Dadurch galten sie als folgenlos und flogen raus:
   die Knopfbeschriftung verschwand im Hover hinter dem wachsenden Kreis,
   die Randnotizen verloren ihren Bezugspunkt, und die Verbindungslinie
   zwischen den Ablauf-Schritten fehlte ganz. */
body.blog-skin.final-a .beitrag-cta .cta .lbl {position:relative; z-index:2}
body.blog-skin.final-a a.cta.btn-ios .lbl {position:relative; z-index:2; color:inherit !important}
body.blog-skin.final-a .margin-rail {position:relative}
body.blog-skin.final-a .article-prose [data-blog-content="ablauf"] {position:relative}
body.blog-skin.final-a .article-prose [data-blog-content="ablauf"]::before{
  content:""; position:absolute; left:42px; top:44px; bottom:44px; width:2px;
  background:#167BFC; opacity:.22; border-radius:2px}

/* ── Header-Spur ────────────────────────────────────────────────────────────
   Der Beitragscontainer hat `px-8` — konstant 32 px. Der Header nutzt
   32 / 22 / 16 px (siehe /_lx/lx-header.css, .bar-in). Ohne diese Regel
   springt die Kante beim Klick von der Übersicht in den Beitrag. */
@media (max-width:1180px){ .lx-rinne{padding-left:22px; padding-right:22px} }
@media (max-width:980px){ .lx-rinne{padding-left:16px; padding-right:16px} }

/* Der Rücklink „← Ratgeber" über dem Beitrag entfällt auf dem Handy.
   Dort führt das Menü in der Kopfleiste ohnehin zurück, und die Zeile
   kostet nur Platz oberhalb der Überschrift. */


/* ═══════════════════ Handy-Korrekturen 10.08. ═══════════════════ */

/* 1 · Beitragsbild — 🔴 der geteilte Blog-Skin erzwingt mit
   `div[class*="aspect-"]{aspect-ratio:16/10 !important}` ein Format, das nicht
   zu den Ratgeberbildern passt: die sind auf 21:10 zugeschnitten. Der Rahmen
   stand dadurch 54 px höher als das Bild — der Leerraum unter dem Foto.
   Gemessen vorher: img 358×170 im Rahmen 358×224. */
body.blog-skin.final-a div.aspect-\[21\/10\]{aspect-ratio:21/10 !important}

/* 2 · Inhaltsverzeichnis auf dem Handy: aufgeklappt statt zugeklappt.
   🔴 Es war `position:sticky !important` — als schmaler geschlossener Kopf
   sinnvoll, aufgeklappt verdeckt es mit 550 px den halben Bildschirm. Beides
   zusammen geht nicht; das Verzeichnis steht jetzt einmal am Anfang und
   scrollt mit. Die Sticky-Regel trägt `!important` bei Spezifität (0,3,1) —
   hier braucht es deshalb (0,3,3). */
@media (max-width:1020px){
  html body.blog-skin.final-a details.toc-mobil{
    position:static !important; max-height:none !important; overflow:visible !important;
    border:1px solid rgba(17,24,39,.10); border-radius:16px; background:#fff;
    padding:2px 2px 6px;
    /* Das Beitragsbild darüber trägt kein margin-bottom — eine Reset-Regel
       (`figure{margin:0}`) hebt die Tailwind-Klasse `mb-10` auf. Ohne diesen
       Abstand klebt das Verzeichnis direkt am Bild (gemessen: 0 px).
       28 px entspricht dem Rhythmus der Nachbarn (24/28 px). */
    margin:28px 0 22px !important;
  }
  html body.blog-skin.final-a details.toc-mobil[open] > nav{
    max-height:none !important; overflow:visible !important;
  }
  details.toc-mobil > summary::-webkit-details-marker{display:none}
  details.toc-mobil[open] > summary{border-bottom:1px solid rgba(17,24,39,.08)}
  details.toc-mobil #toc{padding:6px 6px 2px}
  details.toc-mobil #toc a{
    display:block; padding:11px 10px; font-size:14.5px; line-height:1.35;
    color:#374151; text-decoration:none; border-radius:10px;
  }
  details.toc-mobil #toc a + a{border-top:1px solid rgba(17,24,39,.06)}
  details.toc-mobil #toc a:active{background:rgba(17,24,39,.04)}

  /* „Beitrag vorlesen" steht jetzt direkt unter dem Verzeichnis (siehe
     ratgeber-seite.js) — vorher am Seitenende bei 93 % der Länge. */
  .vorlesen{margin:0 0 26px}
}

/* 3 · Kontaktkasten — die Abstände waren ungleich: 45 px zwischen Label und
   Überschrift, aber nur 18 px zwischen Text und Knopf; die Telefonzeile stand
   mittig, während alles andere linksbündig lief.
   🔴 Gegen `padding:18px !important` aus einer max-width:400px-Regel und
   `text-align:center` aus der 720er-Regel reicht (0,3,2) nicht — daher (0,3,4). */
@media (max-width:640px){
  html body.blog-skin.final-a .article-prose aside.beitrag-cta{padding:24px 22px !important; gap:20px !important}
  html body.blog-skin.final-a aside.beitrag-cta > .txt > .kick{margin-bottom:14px !important; display:inline-block}
  html body.blog-skin.final-a aside.beitrag-cta > .txt > h3{margin-top:0 !important}
  html body.blog-skin.final-a aside.beitrag-cta > .akt{flex-direction:column !important; align-items:flex-start !important; gap:14px !important}
  html body.blog-skin.final-a aside.beitrag-cta .tel{text-align:left !important; justify-content:flex-start !important; align-self:flex-start !important}
}

/* Assets kommen seit 10.08. aus dem mu-plugin lexup-ratgeber-assets.php —
   die Version entsteht aus filemtime(), eine Aenderung ist nach einem
   Cache-Purge sofort live. Kein Deploy der 70 Seiten mehr noetig. */

/* 02.09.2026 — Randnotizen vor der Positionierung nicht malen: bis das Skript
   `top` gesetzt hat, standen sie kurz oben in der Leiste und sprangen dann an
   den Anker (Layout-Verschiebung). `visibility:hidden` zaehlt nicht als
   Verschiebung; eingeblendet wird wie bisher ueber .is-visible. */
html.hat-js .margin-item:not(.is-visible) { visibility: hidden; }

/* ── 7 · Kein Layout-Sprung durch das Umhaengen (09.09.2026) ──
      Die Werkzeugleiste stand bis zum Skriptlauf ueber dem Beitrag und
      rutschte erst danach darunter: gemessen 847 px Versatz, CLS 0,859 auf
      /ratgeber/ab-wann-unfallwagen/, /ratgeber/kostenvoranschlag/ und
      /ratgeber/was-ist-mein-auto-wert/.
      `order` stellt das Bild schon im ersten Frame richtig. Das Skript haengt
      die Leiste danach unveraendert auch im DOM um -- Tastatur und
      Screenreader treffen den Beitrag also weiterhin zuerst. */
@media (max-width:1020px) {
  body.blog-skin.final-a .layout-grid > .toc-rail { order: 9; }
}