/* kostenvoranschlag-sofort.de: Ratgeber im Erscheinungsbild der Startseite (Theme C Navy/Gold/Orange).
   Stand 09.10.2026. Wird NUR von /ratgeber/*.html geladen (Link direkt vor </head>).
   Rueckbau: Link-Zeile aus den Ratgeber-Seiten entfernen oder diese Datei leeren. styles.css bleibt unveraendert. */

:root{
  --kv-bg:#0E1726;--kv-fg:#EEF1F6;--kv-card:#16233A;--kv-muted:#111C2E;--kv-muted-fg:#A9B4C6;--kv-text:#C9D1DE;
  --kv-border:#24344F;--kv-border-2:#3A4D6C;--kv-primary:#C2410C;--kv-primary-2:#A8380A;--kv-hi:#E3C68A;--kv-gold:#C9A45C;
  --kv-ok:#5FD3A0;--kv-warn:#F2A48F;--kv-foot:#0A111D;--kv-r:22px;--kv-r-sm:14px;
  /* Variablen aus styles.css auf dunkel umstellen */
  --ink:#EEF1F6;--ink-soft:#C9D1DE;--paper:#0E1726;--paper-2:#111C2E;--white:#16233A;--line:#24344F;
  --brass:#C2410C;--brass-soft:rgba(227,198,138,.45);--muted:#A9B4C6;--seal-green:#5FD3A0;--red:#E0705C;
  /* Variablen, die ksheader.css und Inline-Bloecke erwarten */
  --bg:#0E1726;--fg:#EEF1F6;--card:#16233A;--muted-fg:#A9B4C6;--border:#24344F;--primary:#C2410C;--primary-2:#A8380A;--primary-fg:#fff;--hi:#E3C68A
}
html,body{background:var(--kv-bg);color:var(--kv-fg)}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:-.011em;line-height:1.6}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;color:var(--kv-fg)}
::selection{background:rgba(227,198,138,.35);color:#fff}

/* ---------- Kopf wie Startseite (nav.ksnav dunkel) ---------- */
nav.ksnav{background:rgba(14,23,38,.9);border-bottom-color:var(--kv-border)}
nav.ksnav .kslogo{color:var(--kv-fg)}
nav.ksnav .kslogo small{color:var(--kv-muted-fg)}
nav.ksnav .kslinks a,nav.ksnav .ksdropbtn{color:var(--kv-muted-fg)}
nav.ksnav .kslinks a:hover,nav.ksnav .ksdropbtn:hover,nav.ksnav .ksdrop.open .ksdropbtn{color:var(--kv-fg)}
nav.ksnav .ksdropmenu{background:var(--kv-card);border-color:var(--kv-border)}
nav.ksnav .ksdropmenu a{color:var(--kv-fg)}
nav.ksnav .ksdropmenu a:hover{background:var(--kv-muted);color:var(--kv-fg)}
nav.ksnav .ksdropmenu a small{color:var(--kv-muted-fg)}
nav.ksnav .kscta{background:var(--kv-primary);color:#fff;box-shadow:none}
nav.ksnav .kscta:hover{background:var(--kv-primary-2)}
nav.ksnav .ksburger{color:var(--kv-fg)}
@media(max-width:900px){nav.ksnav .kslinks{background:var(--kv-card);border-bottom-color:var(--kv-border)}nav.ksnav .kslinks>li>a,nav.ksnav .ksdropbtn{border-bottom-color:var(--kv-border)}}
.vs-mark rect[style*="#14243B"]{fill:#E9EEF6!important}

/* ---------- Seitenrahmen ---------- */
.article-page,.grounding-page,.ratgeber-hub{background:var(--kv-bg);padding:56px 26px 80px}
.article-content{max-width:780px;font-size:17px;line-height:1.75;color:var(--kv-text)}
.article-content h1{font-size:clamp(30px,4.2vw,46px);line-height:1.13;color:var(--kv-fg);margin-bottom:16px}
.article-content h2{font-size:clamp(23px,2.6vw,29px);line-height:1.2;color:var(--kv-fg);margin:46px 0 14px;padding-bottom:12px;border-bottom:1px solid var(--kv-border)}
.article-content h3{font-size:19px;line-height:1.3;color:var(--kv-fg);margin:30px 0 10px}
.article-content strong,.article-content b{color:var(--kv-fg);font-weight:700}
.article-content em{color:var(--kv-fg)}
.article-content p.lead,.article-content .lead{font-size:19px;line-height:1.65;color:var(--kv-fg)}
.article-meta{color:var(--kv-muted-fg);border-bottom-color:var(--kv-border)}
.article-content li::marker{color:var(--kv-gold)}
.article-content hr{border:0;border-top:1px solid var(--kv-border);margin:32px 0}

/* Links im Text: Gold wie auf der Startseite */
.article-content a,.ratgeber-hub-header a{color:var(--kv-hi);font-weight:600;border-bottom:1px solid rgba(227,198,138,.4);text-decoration:none}
.article-content a:hover,.ratgeber-hub-header a:hover{color:#fff;border-bottom-color:#fff}

/* Brotkrumen */
.breadcrumbs,.breadcrumb{color:var(--kv-muted-fg);font-size:13.5px}
.breadcrumbs a,.breadcrumb a,.article-content .breadcrumbs a{color:var(--kv-muted-fg);border-bottom:0;font-weight:500}
.breadcrumbs a:hover,.breadcrumb a:hover,.article-content .breadcrumbs a:hover{color:var(--kv-hi)}
.breadcrumbs span,.breadcrumb span{color:var(--kv-border-2)}

/* ---------- Knoepfe wie Startseite (Pille, Orange) ---------- */
.btn-primary,.error-btn-primary,.article-content a.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--kv-primary);border:1.5px solid var(--kv-primary);color:#fff!important;font-weight:700;font-size:15px;padding:14px 24px;border-radius:999px;box-shadow:0 10px 24px -12px rgba(0,0,0,.6);text-align:center;line-height:1.3}
.btn-primary:hover,.error-btn-primary:hover,.article-content a.btn-primary:hover{background:var(--kv-primary-2);border-color:var(--kv-primary-2);color:#fff!important;transform:translateY(-1px)}

/* ---------- Bilder ---------- */
.article-content figure,.ratgeber-hub-header figure{border-radius:var(--kv-r-sm)!important;box-shadow:0 20px 50px -22px rgba(0,0,0,.7)!important;border:1px solid var(--kv-border);background:var(--kv-card)}
.article-content figure img{border-radius:0!important}
.article-content figcaption{color:var(--kv-muted-fg)!important;padding:10px 14px 12px!important;font-size:.86rem}
.article-content img{max-width:100%;height:auto}

/* ---------- Tabellen ---------- */
.article-content table{background:var(--kv-card);border:1px solid var(--kv-border);border-radius:var(--kv-r-sm);border-collapse:separate!important;border-spacing:0;overflow:hidden;color:var(--kv-text)}
.article-content th{background:var(--kv-muted)!important;color:var(--kv-fg)!important;font-weight:700;border:0!important;border-bottom:1px solid var(--kv-border-2)!important}
.article-content td{background:transparent!important;color:var(--kv-text);border:0!important;border-bottom:1px solid var(--kv-border)!important}
.article-content tr:last-child td{border-bottom:0!important}
.article-content tr[style*="background"]{background:rgba(227,198,138,.07)!important}
.article-content tbody tr:hover td{background:rgba(255,255,255,.02)!important}
.article-content [style*="overflow-x:auto"]{border-radius:var(--kv-r-sm);-webkit-overflow-scrolling:touch}
.article-content [style*="overflow-x:auto"]>table{margin:10px 0}

/* ---------- Info-Kaesten ---------- */
.article-info,.article-warning,.article-success,.fact-box,.summary-box,.author-box,.article-cta-box{background:var(--kv-card);border:1px solid var(--kv-border);color:var(--kv-text);border-radius:var(--kv-r-sm)}
.article-info{border-left:4px solid var(--kv-gold);border-radius:0 var(--kv-r-sm) var(--kv-r-sm) 0}
.article-warning{border-left:4px solid var(--red);background:linear-gradient(90deg,rgba(224,112,92,.10),rgba(224,112,92,.03)) ,var(--kv-card);border-radius:0 var(--kv-r-sm) var(--kv-r-sm) 0}
.article-success{border-left:4px solid var(--kv-ok);background:linear-gradient(90deg,rgba(95,211,160,.10),rgba(95,211,160,.03)),var(--kv-card);border-radius:0 var(--kv-r-sm) var(--kv-r-sm) 0}
.article-info strong:first-child,.article-warning strong:first-child,.article-success strong:first-child{display:block;margin-bottom:6px;color:var(--kv-fg)}
.article-info p:last-child,.article-warning p:last-child,.article-success p:last-child{margin-bottom:0}

/* Inline-gestaltete Kaesten der Altvorlage (helle Hintergruende) auf dunkel umstellen */
.article-content [style*="background:#f0f6ff"],.article-content [style*="background:#eef6ff"],.article-content [style*="background:#f6f9ff"]{background:var(--kv-card)!important;border-color:var(--kv-border)!important;border-left-color:var(--kv-gold)!important;color:var(--kv-text)!important}
.article-content [style*="background:#fff8e6"],.article-content [style*="background:#fdf6e7"],.article-content [style*="background:#fff4e5"],.article-content [style*="background:rgba(150,120,50"]{background:rgba(201,164,92,.10)!important;border-color:rgba(201,164,92,.45)!important;color:var(--kv-text)!important}
.article-content [style*="background:rgba(150,120,50"]{border-left-color:var(--kv-gold)!important}
.article-content [style*="background:#fff;"],.article-content [style*="background:#fff "]{background:var(--kv-muted)!important;border-color:var(--kv-border)!important;color:var(--kv-text)!important}
.article-content [style*="border:1px solid #e7e7ee"]{border-color:var(--kv-border)!important;background:var(--kv-card)}
.article-content [style*="color:#7a5c00"],.article-content [style*="color:#8a5a00"]{color:var(--kv-hi)!important}
.article-content [style*="color:#555"],.article-content [style*="color:#444"],.article-content [style*="color:#666"],.article-content [style*="color:#6b6b6b"]{color:var(--kv-muted-fg)!important}
.article-content [style*="border-bottom:1px solid #eee"],.article-content [style*="border-bottom:2px solid #e2e8f0"],.article-content [style*="border:1px solid #d6e4ff"]{border-color:var(--kv-border)!important}
.article-content [style*="background:#f4f7fb"]{background:var(--kv-muted)!important}
/* Inline-Knoepfe (alt: Messing #b8860b oder Lila #7033ff) -> Orange-Pille */
.article-content a[style*="background:#b8860b"],.article-content a[style*="background:#7033ff"],.article-content button[style*="background:#7033ff"]{background:var(--kv-primary)!important;color:#fff!important;border:0!important;border-radius:999px!important;padding:13px 22px!important;font-weight:700!important;box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.article-content a[style*="background:#b8860b"]:hover,.article-content a[style*="background:#7033ff"]:hover,.article-content button[style*="background:#7033ff"]:hover{background:var(--kv-primary-2)!important}
/* Zeitwert-Pruefer (nur zeitwert-berechnen-elektronik) */
.article-content .lauf-rechner,#zw-rechner{background:var(--kv-card)!important;border:1px solid var(--kv-border)!important;border-top:3px solid var(--kv-gold)!important;border-radius:var(--kv-r-sm)!important;color:var(--kv-text)}
#zw-rechner label{color:var(--kv-fg);font-weight:600;font-size:15px}
#zw-rechner input,#zw-rechner select,.article-content input,.article-content select,.article-content textarea{background:#0F1A2C!important;color:var(--kv-fg)!important;border:1px solid var(--kv-border-2)!important}
#zw-rechner select option{background:var(--kv-card);color:var(--kv-fg)}
#zw-rechner input:focus,#zw-rechner select:focus{border-color:var(--kv-hi)!important;outline:none}
#zw-rechner #zwSchritte li::before{border-color:var(--kv-gold)}
#zw-rechner #zwSchritte li.an::before{background:var(--kv-gold)}

/* Hinweiskasten Reparatur, Kontextlinks */
.repair-hint{background:var(--kv-card)!important;border-color:var(--kv-border)!important;color:var(--kv-text)}
p.kontextlinks,.article-related.kontextlinks{border-left-color:var(--kv-gold);background:rgba(255,255,255,.03)}
p.kontextlinks a{color:var(--kv-hi)}

/* Frist-Kasten (bereits dunkel) vom Grund abheben */
.frist-box{background:var(--kv-card)!important;border:1px solid var(--kv-border);border-left:4px solid var(--kv-primary)!important;border-radius:var(--kv-r-sm)!important}
.article-content .frist-box a.fb-btn{border-radius:999px;color:#fff!important;border-bottom:0!important}
.frist-box p{color:var(--kv-text)!important}

/* ---------- CTA im Artikel wie Bestellbereich der Startseite ---------- */
.article-cta{background:linear-gradient(160deg,#0A111D,#16233A);border:1px solid var(--kv-border);border-top:3px solid var(--kv-gold);color:var(--kv-fg);border-radius:var(--kv-r);box-shadow:0 20px 50px -22px rgba(0,0,0,.7);padding:40px 34px}
.article-cta h2,.article-cta h3{color:var(--kv-fg)!important;font-size:clamp(22px,2.6vw,28px)}
.article-cta p{color:var(--kv-text)}
.article-cta .btn-primary,.article-cta a.btn-primary{background:var(--kv-primary);border-color:var(--kv-primary);color:#fff!important;white-space:normal}
.article-cta .btn-primary:hover,.article-cta a.btn-primary:hover{background:var(--kv-primary-2);color:#fff!important}
.cta-trust,.article-cta .cta-trust{color:var(--kv-muted-fg)!important;font-size:13px}
.article-cta-box{border-top:3px solid var(--kv-gold)}

/* ---------- Verwandte Ratgeber ---------- */
.article-related{border-top-color:var(--kv-border)}
.article-related h3{color:var(--kv-fg)}
.article-related ul{list-style:none;padding-left:0;display:grid;gap:10px}
.article-related li{margin:0}
.article-related li a{display:block;background:var(--kv-card);border:1px solid var(--kv-border)!important;border-radius:var(--kv-r-sm);padding:14px 18px;color:var(--kv-fg)!important;font-weight:600;transition:.18s}
.article-related li a:hover{border-color:var(--kv-gold)!important;color:var(--kv-hi)!important;transform:translateY(-1px)}

/* ---------- FAQ (details.qa wie Startseite, faq-item als Karte) ---------- */
.faq,.lauf-faq{max-width:780px}
.article-content details.qa{background:var(--kv-card);border:1px solid var(--kv-border);border-radius:var(--kv-r-sm);overflow:hidden;margin:0 0 11px}
.article-content details.qa summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:700;font-size:16px;color:var(--kv-fg);display:flex;justify-content:space-between;align-items:center;gap:14px}
.article-content details.qa summary::-webkit-details-marker{display:none}
.article-content details.qa .pm{color:var(--kv-hi);font-size:22px;font-weight:600;transition:.2s;flex:none}
.article-content details.qa[open] .pm{transform:rotate(45deg)}
.article-content details.qa .ans{padding:0 22px 20px;color:var(--kv-text);font-size:15.5px}
.article-content details:not(.qa){background:var(--kv-card);border:1px solid var(--kv-border);border-radius:var(--kv-r-sm);padding:14px 18px;margin:0 0 11px}
.article-content details:not(.qa) summary{color:var(--kv-fg)}
.faq-item{background:var(--kv-card);border:1px solid var(--kv-border);border-radius:var(--kv-r-sm);padding:18px 22px;margin:0 0 11px}
.faq-item h3{margin:0 0 8px!important;font-size:17px}
.faq-item p{margin:0;color:var(--kv-text);font-size:15.5px}

/* ---------- Muster-KVA bleibt Papier (wie Beispielkarte der Startseite) ---------- */
.muster-card,.muster-table{--ink:#0a0a0b;--ink-soft:#525252;--white:#fff;--line:#e7e7ee;--paper-2:#f5f5f5;--red:#b23b34;--brass:#8A6A2F;
  background:#fff!important;color:#0a0a0b;border-color:#e7e7ee;box-shadow:0 34px 90px -24px rgba(0,0,0,.75)}
.muster-card *,.muster-table *{color:inherit}
.muster-card strong,.muster-card b,.muster-table strong{color:#0a0a0b}
.muster-row-totalloss{color:#b23b34!important}

/* ---------- Ratgeber-Uebersicht ---------- */
.ratgeber-hub-header{max-width:1140px}
.ratgeber-hub-header h1{font-size:clamp(32px,4.6vw,52px);line-height:1.1;color:var(--kv-fg)}
.ratgeber-hub-header p{color:var(--kv-text);font-size:18px}
.ratgeber-hub-header figure{max-width:1140px}
.ratgeber-category{color:var(--kv-hi)}
.ratgeber-category h2{color:var(--kv-fg);font-size:clamp(22px,2.6vw,30px);margin:46px auto 18px;max-width:1140px;letter-spacing:-.03em}
.ratgeber-card{background:var(--kv-card);border:1px solid var(--kv-border);border-radius:var(--kv-r-sm);color:var(--kv-fg)}
.ratgeber-card:hover{border-color:var(--kv-gold);box-shadow:0 12px 30px -18px rgba(0,0,0,.6)}
.ratgeber-card::after{background:var(--kv-gold)}
.ratgeber-card h3{color:var(--kv-fg);font-weight:700;letter-spacing:-.02em}
.ratgeber-card p{color:var(--kv-muted-fg)}

/* ---------- Fuss wie Startseite ---------- */
footer{background:var(--kv-foot);border-top:1px solid var(--kv-border);color:#b9b6c9}
.footer-col h4{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.07em;color:#fff}
.footer-col a{color:#b9b6c9}
.footer-col a:hover,.footer-legal a:hover{color:#fff}
.logo-dot{color:var(--kv-hi)}
.footer-bottom{border-top-color:rgba(255,255,255,.12)}

/* ---------- Schritt 2 (09.10.2026): Topbar + Fuss im Markup der Startseite ----------
   Werte 1:1 aus dem Inline-CSS der Startseite (Grundregeln + kva-theme-c). Greift nur bei neuem Markup
   (.topbar, footer > .wrap); alte Fuesse (.footer-grid) bleiben bis zur Umstellung unberuehrt. */
nav.ksnav{display:block;height:auto;padding:0}/* styles.css-Regel nav{flex;70px;padding 0 28px} machte den Kopf schmaler als auf der Startseite */
.topbar{background:#05080d;color:var(--kv-muted-fg);font-size:13px}
.topbar .wrap,footer>.wrap{max-width:1160px;margin:0 auto;padding:0 26px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:18px;padding-top:7px;padding-bottom:7px}
.topbar a{color:var(--kv-fg);font-weight:600;opacity:.95}
footer:has(>.wrap){padding:56px 0 28px;background:var(--kv-foot);border-top:1px solid var(--kv-border);color:#b9b6c9}
footer>.wrap{--brass-soft:#E3C68A}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:34px}
footer .foot-h{color:#fff;font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:15px;font-weight:600}
.foot-grid a,.foot-bottom a{display:block;color:#b9b6c9;font-size:14px;padding:4px 0}
.foot-grid a:hover,.foot-bottom a:hover{color:#fff}
.foot-brand a.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;letter-spacing:-.03em;color:#fff;margin-bottom:13px;line-height:1.6}
.foot-brand .logo .mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.foot-brand .logo small{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:#8f8aa6;margin-top:1px}
.foot-brand p{font-size:14px;opacity:.8;max-width:330px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:10px 22px;font-size:13px;opacity:.78}
.foot-bottom .credit{flex-basis:100%;order:9;margin-top:8px;font-size:10.5px;opacity:.72;letter-spacing:0}
.foot-bottom .credit a{display:inline;color:inherit;text-decoration:none}
.foot-bottom .credit:hover{opacity:.7}.foot-bottom .credit a:hover{text-decoration:underline}
@media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
/* 6 Artikel schliessen <section class="article-page"> nicht, der Fuss liegt dort im Abschnitt: Innenabstand aufheben, volle Breite */
section.article-page>footer{margin:0 -26px -80px}
@media(max-width:640px){section.article-page>footer{margin:0 -18px -70px}}
/* styles.css erzwingt bis 640 px .foot-grid einspaltig (!important); die Startseite zeigt dort zwei Spalten */
@media(max-width:640px){footer .foot-grid{grid-template-columns:1fr 1fr!important;gap:40px!important}}
@media(max-width:600px){footer .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}.foot-brand{grid-column:1/-1}}

/* ---------- Mobile Kaufleiste ---------- */
.sticky-cta{background:var(--kv-primary)!important;color:#fff!important;border-radius:12px}

/* ---------- Mobil: nichts darf ueberlaufen ---------- */
.article-content p,.article-content li,.article-content td,.article-content th,.article-content h1,.article-content h2,.article-content h3,.ratgeber-card h3{overflow-wrap:break-word}
@media(max-width:640px){
  .article-page,.grounding-page,.ratgeber-hub{padding:32px 18px 70px}
  .article-content{font-size:16.5px}
  .article-cta{padding:30px 20px}
  .article-content details.qa summary{padding:16px 18px;font-size:15.5px}
  .article-content details.qa .ans{padding:0 18px 18px}
  .article-content table{font-size:14px}
  .article-content th,.article-content td{padding:9px 10px!important}
  .ratgeber-category h2{margin-top:34px}
}