/**
 * @file        abo-info.css
 * @location    /section/abo-info/abo-info.css
 * @description Styles für die Erklärseite der Abo-Regeln. Prefix: abi__
 *              Wird als eigenständige CSS-Datei über config-nav-pages.php
 *              eingebunden (Seite /abo-info.html).
 *
 *              CSS-KLASSEN (Auszug):
 *                abi__section       — Seitencontainer (padding, font-family)
 *                abi__container     — max-width 920px, zentriert
 *                abi__head          — Kopfbereich (eyebrow, h1, lead)
 *                abi__h2            — Abschnittsüberschrift mit Icon + Border
 *                abi__table         — Vergleichs-/Preistabelle
 *                abi__table--prices — Preistabellen-Variant
 *                abi__note          — Info-Box (blauer Hintergrund)
 *                abi__example       — Konkretes Beispiel (Glühbirnen-Icon)
 *                abi__grid          — 2-Spalten-Grid für Optionskarten
 *                abi__card          — Optionskarte (Standard/Bis Jahresende etc.)
 *                abi__card-print    — Fußzeile der Karte mit Print-Hinweis
 *                abi__list          — Feature-Liste (✓ Icons)
 *                abi__cta           — Call-to-Action Bereich
 *                abi__btn           — CTA-Button (navy, WCAG-konform)
 *                abi__sr-only       — Screenreader-only (clip-Methode)
 *
 *              FARBEN (über globale Tokens aus global.css, alle ≥ 5:1):
 *                Fließtext  --color-ink  #1e2d3d / #fff        = 13.3:1 ✓
 *                Überschr.  --color-navy #07003D / #fff        = 17.4:1 ✓
 *                Sekundär   --color-ink-soft #3a4c5a / #fff   =  8.6:1 ✓
 *                Note-Box   #1e2d3d / #e8f0fb                 ≈ 12:1   ✓
 *                Button     #fff / #07003D                    = 17.4:1 ✓
 *
 *              VERBOTEN: opacity/rgba auf texttragenden Elementen.
 *              border-radius: max var(--radius-sm) (6px).
 *
 *              SETTINGS:
 *                Tokens aus global.css (--color-*, --radius-*, --shadow-*).
 *                Testdomäne: www.amtsblatt3.ki-cms.de
 *
 *              WCAG 2.2 Level AA:
 *                Alle Farbpaare ≥ 5:1 (Zielmindest), aufgeführt oben.
 *                abi__btn:focus-visible mit 3px outline (sichtbarer Fokus).
 *                prefers-reduced-motion: transition:none für abi__btn.
 *
 * @version     1.1.0
 * @changelog
 *   1.0.0  2026-06-23  Erstversion. Vergleichs-/Preistabellen, Options-Grid,
 *                      Note-/Beispiel-Boxen, CTA. WCAG-Kontraste über Tokens.
 *   1.1.0  2026-06-23  Vollständiger Docblock-Standard: CSS-Klassen, Farben,
 *                      SETTINGS, WCAG-Hinweise, Testdomäne. Keine Änderungen
 *                      an den CSS-Regeln selbst.
 */

/* ── Seite ────────────────────────────────────────────────────────────────── */
.abi__section {
    background: var(--color-page);
    padding: 48px 0 72px;
    font-family: 'Lato', sans-serif;
    color: var(--color-ink);
}
.abi__container {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 20px;
}
.abi__sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* ── Kopf ─────────────────────────────────────────────────────────────────── */
.abi__head { margin-bottom: 28px; }
.abi__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--color-blue); font-weight: 700; font-size: .85rem;
    text-transform: uppercase; letter-spacing: .5px; margin: 0 0 6px;
}
.abi__title {
    color: var(--color-navy);
    font-size: 2rem; font-weight: 800; line-height: 1.2; margin: 0 0 12px;
}
.abi__lead {
    color: var(--color-ink); font-size: 1.05rem; line-height: 1.6; margin: 0;
    max-width: 70ch;
}

/* ── Überschriften ────────────────────────────────────────────────────────── */
.abi__h2 {
    color: var(--color-navy);
    font-size: 1.35rem; font-weight: 700; line-height: 1.3;
    margin: 36px 0 14px; display: flex; align-items: center; gap: 8px;
    padding-bottom: 8px; border-bottom: 2px solid var(--color-border);
}
.abi__h2 i { color: var(--color-blue); }

/* ── Tabellen ─────────────────────────────────────────────────────────────── */
.abi__table-wrap { overflow-x: auto; }
.abi__table {
    width: 100%; border-collapse: collapse;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); overflow: hidden;
    font-size: .94rem;
}
.abi__table th, .abi__table td {
    padding: 11px 14px; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}
.abi__table thead th {
    background: var(--color-navy); color: var(--color-white);
    font-size: .9rem; font-weight: 700;
}
.abi__table thead th i { color: var(--color-on-dark); }
.abi__table tbody th[scope="row"] {
    background: var(--color-surface); color: var(--color-navy);
    font-weight: 700; width: 28%;
}
.abi__table tbody td { color: var(--color-ink); }
.abi__table tr:last-child th, .abi__table tr:last-child td { border-bottom: none; }
.abi__table--prices td:last-child, .abi__table--prices th[scope="row"] {
    font-variant-numeric: tabular-nums;
}

/* ── Note-/Beispiel-Boxen ─────────────────────────────────────────────────── */
.abi__note {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--color-blue-lt); border: 1px solid #c5d8f5;
    border-radius: var(--radius-sm); padding: 14px 16px; margin: 6px 0 14px;
}
.abi__note i { color: var(--color-blue); font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.abi__note p { margin: 0; color: var(--color-ink); line-height: 1.6; font-size: .95rem; }
.abi__example {
    display: flex; gap: 8px; align-items: flex-start;
    color: var(--color-ink-soft); font-size: .92rem; margin: 0 0 8px;
}
.abi__example i { color: var(--color-warning); font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.abi__muted { color: var(--color-ink-soft); font-size: .92rem; margin: 0 0 12px; }

/* ── Options-Grid ─────────────────────────────────────────────────────────── */
.abi__grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 4px;
}
.abi__card {
    background: var(--color-white); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); padding: 16px 18px;
}
.abi__card-title {
    color: var(--color-navy); font-size: 1.05rem; font-weight: 700;
    margin: 0 0 8px; display: flex; align-items: center; gap: 7px;
}
.abi__card-title i { color: var(--color-blue); }
.abi__card p { margin: 0 0 8px; color: var(--color-ink); font-size: .92rem; line-height: 1.55; }
.abi__card p:last-child { margin-bottom: 0; }
.abi__card-print {
    color: var(--color-ink-soft) !important; font-size: .86rem !important;
    border-top: 1px solid var(--color-border); padding-top: 8px;
}
.abi__card-print i { color: var(--color-blue); }

/* ── Liste ────────────────────────────────────────────────────────────────── */
.abi__list { list-style: none; padding: 0; margin: 0; }
.abi__list li {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 8px 0; color: var(--color-ink); font-size: .96rem; line-height: 1.55;
    border-bottom: 1px solid var(--color-border);
}
.abi__list li:last-child { border-bottom: none; }
.abi__list li i { color: var(--color-success); font-size: 1.15rem; flex-shrink: 0; margin-top: 1px; }

/* ── CTA ──────────────────────────────────────────────────────────────────── */
.abi__cta { margin-top: 32px; text-align: center; }
.abi__btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--color-navy); color: var(--color-white);
    text-decoration: none; font-weight: 600; font-size: 1.05rem;
    padding: 13px 30px; border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease;
}
.abi__btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--color-white); }
.abi__btn:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 3px; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
    .abi__grid { grid-template-columns: 1fr; }
    .abi__title { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
    .abi__btn { transition: none; }
}