/* Ratgeber-Artikel (layouts/article.njk): Text links, rechts mitlaufendes Inhaltsverzeichnis + Fallprüfungs-Karte.
   Fließtext-Regeln stehen in :where() und haben damit Spezifität 0: Komponenten-Klassen (Rechner, Kästen, Tabellen)
   setzen sich immer durch, ohne Gegen-Selektoren. */

/* Raster */
.article-layout{max-width:1140px;margin:0 auto;padding:40px 24px 96px;display:grid;grid-template-columns:minmax(0,680px) 280px;justify-content:space-between;gap:64px;align-items:start}
.article-main{min-width:0}
.article-aside{position:sticky;top:100px;display:grid;gap:24px;padding-top:4px}

/* Kopf */
.article-head{padding-bottom:32px}
.article-head h1{margin-top:20px;max-width:760px;text-wrap:balance}
.breadcrumbs{font-size:14px;line-height:22px;color:var(--color-text-muted)}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.breadcrumbs li+li::before{content:"›";margin-right:6px;color:var(--color-icon-muted)}
.breadcrumbs a{text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.article-byline{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:20px;font-size:14px;line-height:22px;color:var(--color-text-muted)}
.article-byline a{color:var(--color-ink)}

/* Inhaltsverzeichnis rechts (aktiver Abschnitt per js/article.js) */
.toc .type-eyebrow{margin-bottom:12px}
.toc ol{list-style:none;display:grid;gap:2px;border-left:1px solid var(--color-border-default)}
.toc a{display:block;padding:6px 0 6px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;line-height:21px;color:var(--color-text-muted);text-decoration:none;transition:color .2s ease,border-color .2s ease}
.toc a:hover{color:var(--color-ink)}
.toc a.is-active{color:var(--color-ink);border-left-color:var(--color-accent-cta);font-weight:600}
.toc-mobile{display:none}

/* Fallprüfungs-Karte rechts */
.case-card{background:var(--color-surface-warm);border-radius:var(--radius-card);padding:24px}
.case-card__title{font:600 18px/26px var(--font-sans);letter-spacing:-.017em}
.case-card__text{margin-top:8px;font-size:14px;line-height:22px;color:var(--color-text-muted)}
.case-card .button{margin-top:16px;width:100%;font-size:15px}

/* Fließtext */
:where(.article-body > * + *){margin-top:20px}  /* zuerst: Überschriften-Abstände unten überschreiben ihn */
/* Abgesetzte Kästen (Erbright-Kasten, Quellen): oben und unten so viel Abstand wie vor einer H2 */
.article-body > :is(.cta-box,.sources),.article-body > :is(.cta-box,.sources) + *{margin-top:64px}
:where(.article-body) :where(h2){font:400 30px/40px var(--font-display);margin-top:64px;scroll-margin-top:100px;text-wrap:balance}
:where(.article-body) :where(h3){font:600 18px/26px var(--font-sans);letter-spacing:-.014em;margin-top:32px}
:where(.article-body) :where(p,li){font-size:17px;line-height:29px}
:where(.article-body) :where(ol,ul){padding-left:22px;display:grid;gap:8px}
:where(.article-body) :where(a){text-decoration-color:var(--color-icon-muted);text-underline-offset:3px}
.lead{font-weight:600}

/* Kurzantwort */
.summary-box{background:var(--color-surface-warm);border-radius:var(--radius-card);padding:24px 28px}
.summary-box .type-eyebrow{margin-bottom:8px}
.summary-box__text{font-size:17px;line-height:28px}

/* Tabellen */
.data-table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:15px;line-height:23px}
.data-table caption{text-align:left;font-size:14px;line-height:22px;color:var(--color-text-muted);padding-bottom:10px}
.data-table th,.data-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--color-border-subtle);vertical-align:top}
.data-table thead th{font-weight:600;background:var(--color-surface-subtle)}
.data-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.data-table tfoot td{font-weight:600;border-bottom:0}

/* Rechner */
.calculator{border:1px solid var(--color-border-default);border-radius:var(--radius-card-lg);padding:28px}
.calculator__fields{display:flex;flex-wrap:wrap;gap:20px 32px}
.calculator__label{display:block;font:600 16px/24px var(--font-sans);margin-bottom:10px}
.calculator__row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.calculator__input{height:48px;width:220px;padding:12px 20px;border-radius:var(--radius-pill);border:1px solid var(--color-border-default);font:400 16px/24px var(--font-sans);color:var(--color-ink)}
.calculator__input--short{width:120px}
.calculator__input:focus-visible{outline:2px solid var(--color-ink);outline-offset:2px}
.calculator__unit{color:var(--color-text-muted)}
.calculator .data-table{margin-top:24px}
.calculator__note{margin-top:14px;font-size:13px;line-height:20px;color:var(--color-text-muted)}

/* Erbright-Kasten im Text */
.cta-box{background:var(--color-ink);color:#fff;border-radius:var(--radius-card-lg);padding:32px}
.cta-box__title{font:400 26px/34px var(--font-display)}
.cta-box__text{margin-top:10px;color:rgba(255,255,255,.72);font-size:16px;line-height:26px}
.cta-box .button{margin-top:20px}

/* "Häufiger Irrtum" */
.myth-box{border-left:3px solid var(--color-accent-cta);padding:4px 0 4px 20px}
.myth-box .type-eyebrow{margin-bottom:6px}

/* FAQ (aus Front Matter, identisch mit FAQPage-Schema) */
.faq-list details{border-bottom:1px solid var(--color-border-subtle)}
.faq-list summary{list-style:none;cursor:pointer;padding:18px 32px 18px 0;position:relative;font:600 17px/26px var(--font-sans);letter-spacing:-.014em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:4px;top:16px;font:400 22px/26px var(--font-sans);color:var(--color-icon-muted)}
.faq-list details[open] summary::after{content:"–"}
.faq-list__answer{padding:0 0 18px;font-size:16px;line-height:27px;color:var(--color-text-muted)}

/* Quellen */
.sources{background:var(--color-surface-subtle);border-radius:var(--radius-card);padding:24px 28px}
.sources__list{list-style:none;padding:0;display:grid;gap:6px;font-size:14px;line-height:22px}
.sources__updated{margin-top:12px;font-size:13px;line-height:20px;color:var(--color-text-muted)}

/* Weiterlesen */
.related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.related__item{display:block;min-width:0;background:var(--color-surface-subtle);border-radius:var(--radius-card);padding:20px;text-decoration:none;transition:background-color .2s ease}
.related__item:hover{background:var(--color-border-subtle)}
.related__item .type-eyebrow{font-size:12px}
.related__title{display:block;margin-top:6px;font:400 19px/26px var(--font-display);hyphens:auto;overflow-wrap:break-word}  /* lange Rechtsbegriffe passen sonst nicht in die Karte */
.related__text{display:block;margin-top:8px;font-size:14px;line-height:22px;color:var(--color-text-muted)}

/* Ratgeber-Übersicht (/ratgeber): pro Thema ein Raster, der Überblicksartikel als dunkle Karte vorn */
.guide-index{display:grid;gap:56px}
.guide-index__title{font:400 30px/38px var(--font-display);text-wrap:balance}
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.guide-card{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:170px;padding:22px;border-radius:var(--radius-card);background:var(--color-surface-subtle);color:var(--color-ink);text-decoration:none;transition:background-color .2s ease}
.guide-card:hover{background:var(--color-border-subtle)}
.guide-card--hub{background:var(--color-ink);color:#fff}
.guide-card--hub:hover{background:#000}
.guide-card__eyebrow{font:600 11px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.guide-card__title{font:400 20px/27px var(--font-display);hyphens:auto;overflow-wrap:break-word}
.guide-card__text{font-size:14px;line-height:21px;color:var(--color-text-muted)}
.guide-card--hub .guide-card__text{color:rgba(255,255,255,.72)}
.guide-card__go{margin-top:auto;padding-top:10px;font-weight:600;font-size:14px}
.guide-card:hover .guide-card__go{text-decoration:underline;text-underline-offset:3px}

.article-figure{margin:32px 0 0}
.article-figure img{display:block;width:100%;max-width:680px;height:auto;border-radius:16px}
.article-figure figcaption{margin-top:12px;font-size:14px;line-height:22px;color:var(--color-text-muted)}
.article-disclaimer{font-size:13px;line-height:20px;color:var(--color-text-muted)}

@media (max-width:1000px){
  .article-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .article-aside{display:none}
  .toc-mobile{display:block;border:1px solid var(--color-border-default);border-radius:var(--radius-card);padding:0 20px}
  .toc-mobile summary{cursor:pointer;padding:14px 0;font:600 15px/22px var(--font-sans);list-style:none}
  .toc-mobile summary::-webkit-details-marker{display:none}
  .toc-mobile ol{padding:0 0 14px 20px;display:grid;gap:6px}
  .toc-mobile a{font-size:15px;text-decoration:none}
  .guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  :where(.article-body) :where(h2){font-size:25px;line-height:33px;margin-top:48px}
  .related{grid-template-columns:1fr}
  .guide-grid{grid-template-columns:1fr}
  .guide-card{min-height:0}
  .data-table{font-size:14px;line-height:21px}
  .data-table th,.data-table td{padding:10px 8px;hyphens:auto;overflow-wrap:anywhere}
  .data-table th:first-child,.data-table td:first-child{padding-left:0}
  .cta-box,.calculator{padding:24px 20px}
  .article-body > :is(.cta-box,.sources),.article-body > :is(.cta-box,.sources) + *{margin-top:48px}
  .calculator__fields > *{flex:1 1 100%}
  .calculator__row{flex-wrap:nowrap}
  .calculator__input,.calculator__input--short{width:auto;flex:1;min-width:0}
  .data-table--legal th:nth-child(2),.data-table--legal td:nth-child(2){display:none}
}