/* Ratgeber-Artikel (suchklar.de/ratgeber/…) – ergänzt die Grundstile der Unterseiten */
.art-hero{position:relative;padding:64px 0 8px;overflow:hidden}
.art-hero:before{content:"";position:absolute;width:560px;height:560px;right:-160px;top:-180px;border-radius:50%;filter:blur(70px);pointer-events:none;background:radial-gradient(closest-side,rgba(30,111,217,.16),transparent)}
.art-hero .wrap{position:relative}
.art-hero h1{max-width:22ch;font-size:clamp(2rem,4.4vw,3.1rem)}
.art-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.9rem;color:var(--muted);margin-top:18px}
.art-meta b{color:var(--ink);font-weight:600}

.art{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:64px;padding:40px 0 88px;align-items:start}
.art-body{max-width:72ch;font-size:1.05rem;min-width:0}
.art-body h2{font-size:clamp(1.4rem,2.4vw,1.8rem);max-width:none;margin:2.2em 0 .6em;scroll-margin-top:90px}
.art-body h2:first-child{margin-top:0}
.art-body h3{font-size:1.15rem;margin:1.6em 0 .4em}
.art-body p,.art-body li{color:#2e3b4a}
.art-body ul,.art-body ol{padding-left:1.3em;margin:0 0 1.2em}
.art-body li{margin:6px 0}
.art-body b,.art-body strong{color:var(--ink);font-weight:650}
.art-body a{text-decoration:underline;text-decoration-color:rgba(30,111,217,.35);text-underline-offset:3px}
.art-body a:hover{text-decoration-color:var(--blue)}
.art-body code{font-size:.9em;background:var(--soft);border-radius:6px;padding:2px 6px}
.art-body table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.95rem}
.art-body th{text-align:left;font-weight:700;border-bottom:2px solid var(--line);padding:9px 10px}
.art-body td{border-bottom:1px solid var(--line);padding:9px 10px;vertical-align:top;color:#2e3b4a}
.art-scroll{overflow-x:auto;margin:0 0 1.4em}
.art-scroll table{margin:0;min-width:540px}

/* Kurzfassung oben – zitierfähig, auch für KI-Antworten */
.tldr{border:1px solid var(--line);border-left:4px solid var(--teal);background:#fff;border-radius:0 var(--r) var(--r) 0;padding:20px 24px;margin:0 0 2em}
.tldr h2{font-size:1rem;margin:0 0 8px!important;text-transform:none}
.tldr ul{margin:0;padding-left:1.2em}

/* Hinweis- und Praxis-Kästen */
.box{border-radius:12px;padding:16px 18px;margin:1.4em 0;font-size:.98rem}
.box p:last-child,.box ul:last-child{margin-bottom:0}
.box-tip{background:var(--soft);border:1px solid #d7e3f2}
.box-warn{background:var(--amber-bg);border:1px solid #f0e3bd;color:var(--amber)}
.box-warn p,.box-warn li{color:var(--amber)}
.box h3{margin:0 0 6px;font-size:1rem}

/* Handlungsaufforderung im Text */
.art-cta{margin:2.4em 0;border-radius:16px;padding:26px 28px;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff}
.art-cta h2,.art-cta h3{color:#fff;margin:0 0 8px!important;font-size:1.3rem}
.art-cta p{color:rgba(255,255,255,.92);margin:0 0 16px}
.art-cta .btn{background:#fff;color:var(--ink);box-shadow:none}
.art-cta .btn-line{border:1.5px solid rgba(255,255,255,.7);color:#fff;background:transparent}
.art-cta .acts{display:flex;gap:10px;flex-wrap:wrap}

/* Seitenleiste: Inhaltsverzeichnis */
.toc{position:sticky;top:96px;font-size:.92rem}
.toc h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px;font-family:var(--body)}
.toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.toc li{margin:0}
.toc a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--muted);line-height:1.35}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);border-left-color:var(--teal);font-weight:600}
.toc .side-cta{margin-top:22px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff}
.toc .side-cta p{margin:0 0 10px;color:var(--muted);font-size:.88rem}
.toc .side-cta .btn{padding:10px 14px;font-size:.9rem;width:100%;justify-content:center;color:#fff;border-left:0;margin-left:0}
.toc .side-cta .btn:hover{color:#fff}

/* Weitere Artikel */
.related{border-top:1px solid var(--line);padding:56px 0 88px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.card{display:block;border:1px solid var(--line);border-radius:14px;background:#fff;padding:20px 22px;color:var(--ink);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,40,80,.08);border-color:#c5d2e3}
.card .k{font-size:.8rem;font-weight:600;color:var(--teal)}
.card h3{margin:6px 0 6px;font-size:1.05rem}
.card p{margin:0;color:var(--muted);font-size:.92rem}

@media (max-width:960px){
  .art{grid-template-columns:minmax(0,1fr);gap:0}
  .art-body{max-width:none}
  .tldr{padding:16px 18px}
  .toc{position:static;display:none}
  .cards{grid-template-columns:1fr}
}