/* Ratgeber-Artikel (/ratgeber/…): gemeinsames Layout für alle Ratgeber- und Rechnerseiten.
   Bausteine: .art-hero, .art-layout (Text + Inhaltsverzeichnis), .art-summary, .art-stats,
   .art-law, .art-example, .art-steps, .art-table, .art-cta, .art-faq, .art-sources, .art-note.
   Schriftgrößen und Farben nur über Tokens aus css/base.css (Text ≥ 16 px, AA-Kontrast). */

.art {
    --art-measure: 44rem;
    --art-text: 1.125rem;
    background: var(--ww-bg);
    color: var(--ww-text);
}

/* Kopf mit Brotkrumen, Titel, Einleitung und Bild */
.art-hero {
    background: var(--ww-bg-warm);
    border-bottom: 1px solid var(--ww-border);
    padding: clamp(1.5rem, 4vw, 3rem) 1.25rem clamp(2rem, 5vw, 3.5rem);
}

.art-hero-inner {
    max-width: 72rem;
    margin: 0 auto;
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
}

.art-breadcrumb ol {
    list-style: none;
    margin: -0.6rem 0 0.6rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    font-size: var(--ww-fs-min);
    color: var(--ww-text-light);
}

.art-breadcrumb li + li::before {
    content: '›';
    margin-right: 0.5rem;
    color: var(--ww-text-light);
}

.art-breadcrumb li { display: inline-flex; align-items: center; }

.art-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ww-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.art-eyebrow {
    font-size: var(--ww-fs-min);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ww-secondary);
    margin: 0 0 0.75rem;
}

.art-hero h1 {
    hyphens: manual;
    font-family: var(--ww-font-serif);
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ww-text);
    margin: 0 0 1rem;
    text-wrap: balance;
}

.art-lead {
    font-size: clamp(1.125rem, 1.6vw, 1.25rem);
    line-height: 1.6;
    color: var(--ww-text);
    margin: 0 0 1.25rem;
    max-width: 38rem;
}

.art-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--ww-fs-min);
    color: var(--ww-text-light);
}

.art-meta li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.art-meta svg { flex: none; color: var(--ww-secondary); }

.art-hero-media {
    margin: 0;
}

.art-hero-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--ww-radius-lg);
    box-shadow: var(--ww-shadow-md);
}

/* Inhalt + Inhaltsverzeichnis */
.art-layout {
    max-width: 72rem;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem) 1.25rem clamp(3rem, 6vw, 5rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.art-body {
    min-width: 0;
    max-width: var(--art-measure);
    font-size: var(--art-text);
    line-height: 1.7;
}

.art-body > * + * { margin-top: 1.25rem; }

.art-body h2 {
    hyphens: manual;
    font-family: var(--ww-font-serif);
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    line-height: 1.2;
    font-weight: 700;
    color: var(--ww-text);
    margin-top: 3.25rem;
    margin-bottom: 0;
    scroll-margin-top: 6.5rem;
    text-wrap: balance;
}

.art-body h3 {
    font-size: 1.25rem;
    line-height: 1.35;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0;
    scroll-margin-top: 6.5rem;
}

.art-body h2 + * { margin-top: 1rem; }
.art-body h3 + * { margin-top: 0.6rem; }

.art-body p { margin: 0; }
.art-body p + p { margin-top: 1rem; }

.art-body ul, .art-body ol {
    margin-bottom: 0;
    padding-left: 1.4rem;
    display: grid;
    gap: 0.6rem;
}

.art-body li { padding-left: 0.2rem; }
.art-body li::marker { color: var(--ww-secondary); }

.art-body a {
    color: var(--ww-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.art-body strong { font-weight: 700; }

.art-body abbr { text-decoration: none; }

/* Inhaltsverzeichnis */
.art-toc {
    position: sticky;
    top: 6rem;
    font-size: var(--ww-fs-min);
    border-left: 2px solid var(--ww-border);
    padding-left: 1.25rem;
}

.art-toc h2 {
    font-family: var(--ww-font-sans);
    font-size: var(--ww-fs-min);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ww-text-light);
    margin: 0 0 0.75rem;
}

.art-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.15rem;
}

.art-toc a {
    display: block;
    padding: 0.5rem 0;
    min-height: 44px;
    line-height: 1.4;
    color: var(--ww-text);
    text-decoration: none;
}

.art-toc a:hover { color: var(--ww-link); text-decoration: underline; }

.art-toc .art-toc-cta {
    display: block;
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    min-height: 44px;
    background: var(--ww-primary);
    color: var(--ww-text);
    font-weight: 600;
    border-radius: var(--ww-radius-md);
    text-align: center;
    text-decoration: none;
}

.art-toc .art-toc-cta:hover { background: var(--ww-primary-hover); text-decoration: none; }

/* Inhaltsverzeichnis auf schmalen Bildschirmen: aufklappbar über dem Text */
.art-toc-mobile { display: none; }

.art-toc-mobile summary {
    cursor: pointer;
    list-style: none;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    font-weight: 600;
    background: var(--ww-bg-alt);
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-md);
}

.art-toc-mobile summary::-webkit-details-marker { display: none; }
.art-toc-mobile summary::after { content: '+'; font-size: 1.4rem; line-height: 1; }
.art-toc-mobile[open] summary::after { content: '–'; }

.art-toc-mobile ol {
    margin: 0.5rem 0 0;
    padding: 0.5rem 1rem 0.5rem 2.25rem;
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-md);
    display: grid;
    gap: 0;
}

.art-toc-mobile a {
    display: block;
    padding: 0.55rem 0;
    min-height: 44px;
    color: var(--ww-text);
    text-decoration: none;
}

/* „Auf einen Blick“ */
.art-summary {
    background: var(--ww-secondary-light);
    border-radius: var(--ww-radius-lg);
    padding: 1.5rem 1.5rem 1.6rem;
}

.art-summary h2 {
    font-family: var(--ww-font-sans);
    font-size: var(--ww-fs-label);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
    color: var(--ww-secondary);
}

.art-summary ul { margin-top: 0.9rem; }

/* Zahlen mit Quelle */
.art-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
    gap: 1rem;
}

.art-stat {
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-lg);
    padding: 1.25rem;
    display: grid;
    gap: 0.4rem;
    align-content: start;
    background: var(--ww-bg);
}

.art-stat-value {
    font-family: var(--ww-font-serif);
    font-size: clamp(1.9rem, 3vw, 2.3rem);
    line-height: 1.1;
    font-weight: 700;
    color: var(--ww-secondary);
    font-variant-numeric: tabular-nums;
}

.art-stat-label { font-size: var(--ww-fs-min); line-height: 1.5; }

.art-stat-source {
    font-size: var(--ww-fs-min);
    line-height: 1.45;
    color: var(--ww-text-light);
}

/* Gesetzestext */
.art-law {
    margin-left: 0;
    margin-right: 0;
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-lg);
    padding: 1.25rem 1.5rem;
    background: var(--ww-bg-alt);
}

.art-law-label {
    display: inline-block;
    font-size: var(--ww-fs-badge);
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--ww-secondary);
    color: #fff;
}

.art-law blockquote {
    margin: 0.75rem 0 0;
    font-family: var(--ww-font-serif);
    font-size: 1.125rem;
    line-height: 1.6;
    font-style: italic;
}

.art-law p.art-law-link { margin-top: 0.4rem; font-size: var(--ww-fs-min); }
.art-law p.art-law-link a { display: inline-flex; align-items: center; min-height: 44px; }

/* Rechenbeispiel */
.art-example {
    border-radius: var(--ww-radius-lg);
    background: var(--ww-primary-light);
    border: 1px solid #f3e3a1;
    padding: 1.5rem;
}

.art-example h3 { margin-top: 0; }

.art-example-label {
    font-size: var(--ww-fs-min);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ww-warning-text);
}

/* Ablauf in Schritten */
.art-steps {
    list-style: none;
    padding: 0 !important;
    counter-reset: art-step;
    gap: 0 !important;
}

.art-steps li {
    counter-increment: art-step;
    position: relative;
    padding: 0 0 1.75rem 3.75rem !important;
}

.art-steps li::before {
    content: counter(art-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--ww-secondary);
    color: #fff;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.art-steps li::after {
    content: '';
    position: absolute;
    left: calc(1.25rem - 1px);
    top: 2.75rem;
    bottom: 0.4rem;
    width: 2px;
    background: var(--ww-border);
}

.art-steps li:last-child { padding-bottom: 0 !important; }
.art-steps li:last-child::after { display: none; }

.art-steps strong { display: block; font-size: 1.125rem; margin-bottom: 0.2rem; }

/* Tabellen */
.art-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-lg);
}

.art-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ww-fs-min);
    line-height: 1.5;
}

.art-table caption {
    text-align: left;
    font-weight: 700;
    padding: 0.9rem 1rem 0.25rem;
}

.art-table th, .art-table td {
    text-align: left;
    vertical-align: top;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--ww-border-light);
}

.art-table thead th {
    background: var(--ww-bg-alt);
    border-top: 0;
    font-weight: 700;
}

.art-table td.num, .art-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.art-table tr.art-total td, .art-table tr.art-total th { font-weight: 700; border-top: 2px solid var(--ww-border); }

.art-example .art-table-wrap { background: var(--ww-bg); }

/* Vergleichstabellen: auf dem Handy untereinander statt seitlich scrollen */
@media (max-width: 640px) {
    .art-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .art-table--stack, .art-table--stack tbody, .art-table--stack tr, .art-table--stack th, .art-table--stack td { display: block; }
    .art-table--stack caption { display: block; width: 100%; }
    .art-table--stack tbody th { background: var(--ww-bg-alt); border-top: 1px solid var(--ww-border-light); padding-bottom: 0.5rem; }
    .art-table--stack tbody td { border-top: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .art-table--stack tbody td::before { content: attr(data-label); display: block; font-weight: 700; }
}

/* Vor- und Nachteile */
.art-proscons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.art-proscons > div {
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-lg);
    padding: 1.25rem 1.25rem 1.4rem;
}

.art-proscons h3 { margin-top: 0; font-size: 1.125rem; display: flex; align-items: center; gap: 0.5rem; }
.art-pro h3 { color: var(--ww-success-text); }
.art-con h3 { color: var(--ww-danger-text); }
.art-proscons ul { margin-top: 0.75rem; font-size: var(--ww-fs-min); }

/* Hinweis */
.art-tip {
    border-left: 4px solid var(--ww-primary-dark);
    background: var(--ww-bg-warm);
    padding: 1rem 1.25rem;
    border-radius: 0 var(--ww-radius-md) var(--ww-radius-md) 0;
}

.art-tip p + p { margin-top: 0.5rem; }

/* Aufruf zum Assistenten */
.art-cta {
    background: var(--ww-secondary);
    color: #fff;
    border-radius: var(--ww-radius-xl);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    display: grid;
    gap: 0.9rem;
}

.art-cta h2, .art-body .art-cta h2 {
    color: #fff;
    margin: 0;
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
}

.art-cta p { margin: 0; color: #fff; }

.art-cta ul {
    margin: 0;
    padding-left: 1.25rem;
    gap: 0.35rem;
    font-size: var(--ww-fs-min);
}

.art-cta li::marker { color: var(--ww-primary); }

.art-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 0.4rem;
}

.art-body .art-cta a.art-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.8rem 1.4rem;
    border-radius: var(--ww-radius-md);
    background: var(--ww-primary);
    color: var(--ww-text);
    font-weight: 700;
    text-decoration: none;
}

.art-body .art-cta a.art-cta-btn:hover { background: var(--ww-primary-hover); }

.art-cta-fine { font-size: var(--ww-fs-min); color: #fff; }

/* Häufige Fragen */
.art-faq { display: grid; gap: 0.75rem; }

.art-faq details {
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-md);
    background: var(--ww-bg);
}

.art-faq summary {
    cursor: pointer;
    list-style: none;
    min-height: 48px;
    padding: 0.9rem 3rem 0.9rem 1.1rem;
    font-weight: 700;
    position: relative;
    line-height: 1.45;
}

.art-faq summary::-webkit-details-marker { display: none; }

.art-faq summary::after {
    content: '+';
    position: absolute;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--ww-secondary);
}

.art-faq details[open] summary::after { content: '–'; }

.art-faq details > div { padding: 0 1.1rem 1.1rem; }
.art-faq details > div p + p { margin-top: 0.75rem; }

/* Quellen und Hinweis */
.art-sources ol {
    font-size: var(--ww-fs-min);
    line-height: 1.55;
    gap: 0.45rem;
}

.art-sources a { word-break: break-word; }

.art-note {
    font-size: var(--ww-fs-min);
    color: var(--ww-text-light);
    border-top: 1px solid var(--ww-border);
    padding-top: 1.25rem;
    margin-top: 2.5rem !important;
}

/* Weiterlesen */
.art-related {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0 !important;
}

.art-related a {
    display: grid;
    gap: 0.3rem;
    height: 100%;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-lg);
    text-decoration: none !important;
    color: var(--ww-text) !important;
}

.art-related a:hover { border-color: var(--ww-secondary); }
.art-related strong { color: var(--ww-link); }
.art-related span { font-size: var(--ww-fs-min); color: var(--ww-text-light); }

/* Responsive */
@media (max-width: 1050px) {
    .art-layout { grid-template-columns: minmax(0, 1fr); }
    .art-toc { display: none; }
    .art-toc-mobile { display: block; }
    .art-body { max-width: none; }
}

@media (max-width: 760px) {
    .art-hero-inner { grid-template-columns: minmax(0, 1fr); }
    .art-hero-media { order: -1; }
    .art-hero { padding-left: 1rem; padding-right: 1rem; }
    .art-layout { padding-left: 1rem; padding-right: 1rem; }
    .art-summary, .art-example, .art-law { padding: 1.15rem; }
    .art-steps li { padding-left: 3.25rem !important; }
}

@media print {
    .art-toc, .art-toc-mobile, .art-cta, .header, .footer { display: none !important; }
    .art-layout { display: block; }
}

/* Rechner (.art-calc*): Erbschaft- und Schenkungsteuer-Rechner, js/rechner/erbschaftsteuer-ui.js */
.art-hero--compact { padding-top: clamp(1rem, 2.5vw, 1.75rem); padding-bottom: clamp(1.25rem, 3vw, 2rem); }
.art-hero--compact h1 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
.art-hero--compact .art-lead { margin-bottom: 0.9rem; }
.art-hero--compact .art-hero-inner { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.art-hero--compact .art-hero-media img { max-height: 13rem; }

.art-calc-section {
    max-width: calc(72rem + 2.5rem);
    margin: 0 auto;
    padding: clamp(1.25rem, 3vw, 2rem) 1.25rem 0;
}

.art-calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: start;
}

.art-calc[hidden] { display: none; }

.art-calc-form,
.art-calc-result {
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-xl);
    background: var(--ww-bg);
    box-shadow: var(--ww-shadow-md);
    padding: clamp(1.1rem, 3vw, 1.75rem);
}

.art-calc-form { display: grid; gap: 1.1rem; }

.art-calc-form h2,
.art-calc-result h2 {
    font-family: var(--ww-font-serif);
    font-size: 1.4rem;
    line-height: 1.25;
    margin: 0;
}

.art-calc-field > label,
.art-calc-legend {
    display: block;
    margin-bottom: 0.4rem;
    font-size: var(--ww-fs-label);
    font-weight: 600;
    line-height: 1.4;
}

.art-calc-field[hidden] { display: none; }
.art-calc fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.art-calc-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.art-calc-choice label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 52px;
    padding: 0.5rem 0.9rem;
    border: 2px solid #767676;
    border-radius: var(--ww-radius-md);
    background: var(--ww-bg);
    font-size: var(--ww-fs-label);
    font-weight: 600;
    cursor: pointer;
}

.art-calc-choice input {
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--ww-secondary);
    flex: none;
}

.art-calc-choice label:has(input:checked) {
    border-color: var(--ww-secondary);
    background: var(--ww-secondary-light);
}

.art-calc-choice label:has(input:focus-visible) {
    outline: 3px solid var(--ww-focus);
    outline-offset: 2px;
}

.art-calc .ww-input,
.art-calc .ww-select { min-height: 52px; font-size: var(--ww-fs-lead); }

.art-calc-hint {
    margin: 0.35rem 0 0;
    font-size: var(--ww-fs-min);
    line-height: 1.5;
    color: var(--ww-text-light);
}

.art-calc-result .art-table th,
.art-calc-result .art-table td { padding: 0.7rem 0.75rem; }

.art-calc-sub {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--ww-fs-min);
    font-weight: 400;
    line-height: 1.45;
    color: var(--ww-text);
}

.art-calc-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0.8rem 1.4rem;
    border: 0;
    border-radius: var(--ww-radius-md);
    background: var(--ww-secondary);
    color: #fff;
    font: inherit;
    font-size: var(--ww-fs-lead);
    font-weight: 700;
    cursor: pointer;
}

.art-calc-submit:hover { background: var(--ww-secondary-hover); }
.art-calc-submit:focus-visible { outline: 3px solid var(--ww-focus); outline-offset: 3px; }

.art-calc-result { background: var(--ww-bg-warm); font-size: var(--ww-fs-min); line-height: 1.6; }
.art-calc-result > * + * { margin-top: 1rem; }
.art-calc-result p { margin: 0; }
.art-calc-result h3 { margin: 1.25rem 0 0; font-size: 1.125rem; line-height: 1.35; }

.art-calc-placeholder { color: var(--ww-text); font-size: var(--ww-fs-lead); }

.art-calc-big {
    background: var(--ww-secondary);
    color: #fff;
    border-radius: var(--ww-radius-lg);
    padding: 1.1rem 1.25rem;
}

.art-calc-amount {
    font-family: var(--ww-font-serif);
    font-size: clamp(2rem, 5vw, 2.75rem);
    line-height: 1.1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.art-calc-amount-label { margin-top: 0.35rem !important; color: #fff; font-size: var(--ww-fs-lead); }

.art-calc-assume { list-style-type: disc; }
.art-calc-steps { list-style-type: decimal; }

.art-calc-facts {
    margin-top: 1.1rem !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 1.25rem;
    margin: 0;
}

.art-calc-facts dt { font-weight: 600; }
.art-calc-facts dd { margin: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.art-calc-steps,
.art-calc-assume {
    margin: 0.5rem 0 0;
    list-style-position: outside;
    padding-left: 1.4rem;
    display: grid;
    gap: 0.6rem;
}

.art-calc-steps li::marker,
.art-calc-assume li::marker { color: var(--ww-secondary); font-weight: 700; }

.art-calc-next {
    border-top: 1px solid var(--ww-border);
    padding-top: 1rem;
    margin-top: 1.25rem !important;
}

.art-calc-next p + p {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
}

.art-calc-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.7rem 1.25rem;
    border-radius: var(--ww-radius-md);
    background: var(--ww-primary);
    color: var(--ww-text);
    font-weight: 700;
    text-decoration: none;
}

.art-calc-link:hover { background: var(--ww-primary-hover); }

.art-calc-link--plain {
    background: none;
    padding: 0.7rem 0;
    color: var(--ww-link);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.art-calc-link--plain:hover { background: none; }

.art-calc-nojs { margin-top: 0; }

/* Hinweis im Rechnerergebnis (z. B. Wert über der Gebührentabelle) */
.art-calc-note {
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--ww-secondary);
    background: #fff;
    border-radius: 0 8px 8px 0;
}

@media (max-width: 900px) {
    .art-calc { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .art-hero--compact .art-hero-inner { grid-template-columns: minmax(0, 1fr); }
    /* Auf dem Handy steht der Rechner direkt unter der Einleitung; das Bild entfällt (lädt dank loading=lazy nicht) */
    .art-hero--compact .art-hero-media { display: none; }
    .art-calc-section { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 420px) {
    .art-calc-choice { grid-template-columns: minmax(0, 1fr); }
}

@media print {
    .art-calc-form { display: none; }
}

/* Mustertext als "Papier" (Ratgeber Berliner Testament Muster): Serifenschrift, großer Zeilenabstand,
   Platzhalter in <mark> mit dunklem Text auf hellgelbem Grund (Kontrast > 12:1). */
.art-muster {
    margin: 1.5rem 0;
    padding: 0;
}

.art-muster-label {
    display: inline-block;
    font-size: var(--ww-fs-min);
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.7rem;
    margin-bottom: 0.6rem;
    border-radius: var(--ww-radius-md);
    background: var(--ww-secondary);
    color: #fff;
}

.art-muster-paper {
    background: #fffef8;
    color: #1a1a1a;
    border: 1px solid #cfc8b0;
    border-radius: var(--ww-radius-md);
    box-shadow: var(--ww-shadow-md);
    padding: clamp(1.25rem, 4vw, 2.5rem);
    font-family: var(--ww-font-serif);
    font-size: 1.125rem;
    line-height: 1.85;
    overflow-wrap: break-word;
}

.art-muster-paper p {
    margin: 0 0 1rem;
    font-size: inherit;
    line-height: inherit;
}

.art-muster-title {
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 1.25rem !important;
    margin-bottom: 1.5rem !important;
}

.art-muster-par {
    font-weight: 700;
    margin: 1.5rem 0 0.25rem !important;
}

.art-muster-paper mark {
    background: #fff0a8;
    color: #1a1a1a;
    padding: 0.05em 0.3em;
    border-radius: 3px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.art-muster-sign {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 2rem;
    margin-top: 2rem;
}

.art-muster-sign p { margin: 0; }

.art-muster-sign .art-muster-line {
    border-bottom: 1px solid #1a1a1a;
    min-height: 2.5rem;
    margin-bottom: 0.4rem;
}

.art-muster-caption {
    margin: 0.75rem 0 0;
    font-size: var(--ww-fs-min);
    color: var(--ww-text);
}

.art-muster-warn {
    border: 2px solid var(--ww-warning);
    background: var(--ww-warning-light);
    border-radius: var(--ww-radius-md);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}

.art-muster-warn p { margin: 0; }
.art-muster-warn p + p { margin-top: 0.5rem; }

.art-baustein {
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-lg);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    background: var(--ww-bg);
}

.art-baustein > h3 { margin-top: 0; }
.art-baustein .art-muster { margin: 1rem 0; }

@media (max-width: 560px) {
    .art-muster-sign { grid-template-columns: minmax(0, 1fr); }
    .art-baustein { padding: 1rem; }
}

@media print {
    .art-muster-paper { box-shadow: none; }
}

/* Erbfolge-Rechner: Ergebnistabellen auf schmalen Bildschirmen als Karten, damit nichts abgeschnitten wird */
@media (max-width: 640px) {
    .art-calc-erben thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .art-calc-erben tr { display: block; padding: 0.5rem 0; border-bottom: 1px solid var(--ww-border); }
    .art-calc-erben th[scope="row"] { display: block; border: 0; padding-bottom: 0.25rem; }
    .art-calc-erben td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding-top: 0.2rem; padding-bottom: 0.2rem; text-align: right; white-space: nowrap; }
    .art-calc-erben td::before { content: attr(data-label); font-weight: 600; text-align: left; white-space: normal; }
}

/* Pflichtteilsrechner: viele Spalten in der schmalen Ergebnisspalte, deshalb immer als Karten */
.art-calc-erben--karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.art-calc-erben--karten tr { display: block; padding: 0.5rem 0; border-bottom: 1px solid var(--ww-border); }
.art-calc-erben--karten th[scope="row"] { display: block; border: 0; padding-bottom: 0.25rem; }
.art-calc-erben--karten td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding-top: 0.2rem; padding-bottom: 0.2rem; text-align: right; white-space: nowrap; }
.art-calc-erben--karten td::before { content: attr(data-label); font-weight: 600; text-align: left; white-space: normal; }