/*
 * Windows2Linux – main.css  v2
 * Font: Inter (Sans-Serif) durchgehend für Body + Headings
 * Einheitliche Typografie, größere Basis, alle Abstände in rem/em
 */

/* ─── Reset & Box Model ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ─── Design-Tokens ──────────────────────────────────────────────────────── */
:root {
    /* Ein Font für alles: Inter (Sans-Serif) – klar, modern, hervorragend lesbar */
    --font-body:    'Inter', system-ui, sans-serif;
    --font-heading: 'Inter', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', 'Courier New', monospace;

    /*
     * Typografie-Skala – Basis bewusst größer (HD-tauglich).
     * page-hero__sub nutzte step-1 → das ist jetzt der Body-Maßstab.
     * clamp(min, preferred, max) – alles in rem/vw
     */
    --step--1: clamp(0.875rem,  0.825rem + 0.25vw,  1rem);
    --step-0:  clamp(1.0625rem, 1rem    + 0.3125vw,  1.25rem);   /* Body */
    --step-1:  clamp(1.25rem,   1.125rem + 0.625vw,  1.5rem);
    --step-2:  clamp(1.5rem,    1.3rem  + 0.875vw,   2rem);
    --step-3:  clamp(1.875rem,  1.6rem  + 1.25vw,    2.625rem);
    --step-4:  clamp(2.25rem,   1.875rem + 1.75vw,   3.25rem);
    --step-5:  clamp(2.75rem,   2.25rem + 2.5vw,     4.25rem);

    /* Abstände – alles rem */
    --space-3xs: 0.25rem;
    --space-2xs: 0.375rem;
    --space-xs:  0.625rem;
    --space-s:   0.9375rem;
    --space-m:   1.5rem;
    --space-l:   2rem;
    --space-xl:  3rem;
    --space-2xl: 4.5rem;
    --space-3xl: 7rem;

    /* Lesbare Zeilenlänge */
    --measure:      75ch;
    --measure-wide: 149ch;  /* 37 + 75 + 37 ch = min. Gesamtbreite */

    /* Radien – rem statt px */
    --radius-s: 0.25rem;
    --radius-m: 0.5rem;
    --radius-l: 1rem;

    /* Schatten */
    --shadow-s: 0 0.0625rem 0.1875rem rgba(0,0,0,.1),  0 0.0625rem 0.125rem rgba(0,0,0,.06);
    --shadow-m: 0 0.25rem   0.75rem   rgba(0,0,0,.12),  0 0.125rem  0.25rem  rgba(0,0,0,.08);
    --shadow-l: 0 0.625rem  1.875rem  rgba(0,0,0,.15),  0 0.25rem   0.5rem   rgba(0,0,0,.1);

    /* Übergänge */
    --trans-fast:   120ms ease;
    --trans-normal: 220ms ease;
    --trans-slow:   380ms ease;

    /* Nav-Höhe in rem */
    --nav-height: 4rem;
}

/* ─── Grundlayout ────────────────────────────────────────────────────────── */
body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.site-main { flex: 1; }
.container {
    width: min(var(--measure-wide), 100%);
    margin-inline: auto;
    padding-inline: var(--space-m);
}

/* ─── Skip-Link ──────────────────────────────────────────────────────────── */
.sr-only {
    position: absolute; width: 0.0625rem; height: 0.0625rem;
    padding: 0; margin: -0.0625rem; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: var(--space-s); top: -100%;
    padding: var(--space-2xs) var(--space-s);
    background: var(--color-primary); color: #fff;
    border-radius: var(--radius-s); font-weight: 600;
    z-index: 9999; transition: top var(--trans-fast);
    text-decoration: none; font-size: var(--step--1);
}
.skip-link:focus { top: var(--space-s); }

/* ─── Typografie ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    line-height: 1.25;
    font-weight: 700;
    text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); margin-block: var(--space-xl) var(--space-m); }
h3 { font-size: var(--step-2); margin-block: var(--space-l)  var(--space-s); }
h4 { font-size: var(--step-1); margin-block: var(--space-m)  var(--space-xs); }
h5, h6 { font-size: var(--step-0); font-weight: 700; margin-block: var(--space-s) var(--space-2xs); }

p { max-width: 75ch; margin-block-end: var(--space-s); }
.p { max-width: 75ch; }  /* Hilfsklasse: 75ch-Begrenzung für Nicht-p-Elemente */
p + p { margin-block-start: 0; }

/* ─── Links ──────────────────────────────────────────────────────────────── */
a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 0.0625rem;
    transition: color var(--trans-fast), text-decoration-color var(--trans-fast);
}
a:hover { color: var(--color-primary-dark); text-decoration-thickness: 0.125rem; }
a:focus-visible {
    outline: 0.125rem solid var(--color-primary);
    outline-offset: 0.1875rem; border-radius: 0.125rem;
}
.link-extern { display: inline-flex; align-items: baseline; gap: 0.2em; }
.ext-link-icon { font-size: 0.75em; opacity: 0.7; vertical-align: super; font-style: normal; }

/* ─── Site Header ────────────────────────────────────────────────────────── */
.site-header {
    position: sticky; top: 0; z-index: 1000;
    background: var(--color-nav-bg);
    border-bottom: 0.0625rem solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    height: var(--nav-height);
    box-shadow: 0 0.125rem 1.25rem rgba(0,0,0,.25);
}
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 100%; max-width: 87.5rem; margin-inline: auto;
    padding-inline: var(--space-m);
}

/* ─── Logo W2L ───────────────────────────────────────────────────────────── */
.site-logo {
    display: inline-flex; align-items: center;
    font-family: var(--font-heading);
    font-size: var(--step-2);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: -0.03em;
    gap: 0;
    /* Pill-Box: weißer Hintergrund, abgerundete Ecken */
    background: #ffffff;
    border-radius: 0.45em;
    padding: 0.08em 0.35em;
    line-height: 1.2;
    box-shadow: 0 0.0625rem 0.25rem rgba(0,0,0,.25);
}
.site-logo:focus-visible { outline: 0.125rem solid var(--color-nav-hover); outline-offset: 0.25rem; }
.site-logo__w { color: var(--color-win); }        /* Windows-Blau  auf Weiß: gut lesbar   */
.site-logo__2 { color: #555555; }                 /* Dunkelgrau    auf Weiß: neutral       */
.site-logo__l { color: #D06000; }                 /* Dunkles Orange (Tux-Familie) auf Weiß: Kontrast ~4.5:1 */
.site-logo--footer { font-size: var(--step-1); }

/* ─── Navigation (Desktop) ───────────────────────────────────────────────── */
.main-nav { display: flex; align-items: center; }
.nav-toggle__input { display: none; }
.nav-toggle__label { display: none; }

.nav-list {
    list-style: none;
    display: flex; align-items: stretch;
    margin: 0; padding: 0;
    height: var(--nav-height);
}
.nav-list__item { position: relative; display: flex; align-items: stretch; }

.nav-list__link {
    display: flex; align-items: center; gap: 0.3em;
    padding-inline: var(--space-s);
    color: var(--color-nav-text);
    text-decoration: none;
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.03em;
    white-space: nowrap;
    cursor: pointer;
    border: none; background: none;
    transition: background var(--trans-fast), color var(--trans-fast);
    user-select: none;
    /* Unterstrich-Indikator */
    border-bottom: 0.1875rem solid transparent;
}
.nav-list__link:hover {
    background: color-mix(in srgb, var(--color-nav-hover) 12%, transparent);
    color: var(--color-nav-hover);
    border-bottom-color: color-mix(in srgb, var(--color-nav-hover) 50%, transparent);
}

/* ── Aktive Seite: deutlich sichtbar ─────────────────────────────────────── */
.nav-list__item--active > .nav-list__link {
    color: #ffffff;
    background: var(--color-primary);
    border-bottom-color: var(--color-lin);
    font-weight: 700;
}
.nav-list__item--active > .nav-list__link:hover {
    background: var(--color-primary-dark);
}

.nav-list__link:focus-visible {
    outline: 0.125rem solid var(--color-nav-hover); outline-offset: -0.125rem;
}
.nav-arrow {
    font-size: 0.6em; opacity: 0.7;
    transition: transform var(--trans-fast);
    display: inline-block;
}

/* ─── Megamenü ───────────────────────────────────────────────────────────── */
.mega-toggle__input { display: none; }

.mega-menu {
    /* fixed statt absolute: Positionierung relativ zum Viewport, nicht zum Nav-Item.
       Verhindert Überlauf nach rechts bei Items am rechten Rand. */
    position: fixed;
    top: var(--nav-height);
    left: 50vw;
    transform: translateX(-50%);
    width: min(51.25rem, 90vw);
    background: var(--color-mega-bg);
    border: 0.0625rem solid var(--color-mega-border);
    border-top: 0.1875rem solid var(--color-nav-hover);
    border-radius: 0 0 var(--radius-m) var(--radius-m);
    box-shadow: var(--shadow-l);
    display: none;
    z-index: 900;
}
.mega-toggle__input:checked ~ .mega-menu { display: block; }
.mega-toggle__input:checked ~ .nav-list__link--parent .nav-arrow { transform: rotate(180deg); }

.mega-menu__inner {
    display: grid;
    grid-template-columns: 1fr 3fr;
}
.mega-menu__category {
    padding: var(--space-l);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    border-right: 0.0625rem solid var(--color-mega-border);
    display: flex; flex-direction: column;
}
.mega-menu__cat-link {
    display: flex; flex-direction: column; gap: var(--space-xs);
    text-decoration: none; color: var(--color-nav-text); height: 100%;
}
.mega-menu__cat-link:hover .mega-menu__cat-title { color: var(--color-nav-hover); }
.mega-menu__cat-title {
    font-family: var(--font-heading); font-size: var(--step-2);
    color: var(--color-nav-text); line-height: 1.2;
}
.mega-menu__cat-desc {
    font-size: var(--step--1); color: var(--color-footer-text);
    line-height: 1.5; flex: 1;
}
.mega-menu__cat-cta {
    font-size: var(--step--1); color: var(--color-nav-hover);
    font-weight: 600; margin-top: auto;
}
.mega-menu__content {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-s); padding: var(--space-l);
}
.mega-menu__group-label {
    display: flex; flex-direction: column; gap: 0.2em;
    margin-bottom: var(--space-xs);
    font-size: var(--step--1);
    color: var(--color-nav-hover);
    text-transform: uppercase; letter-spacing: 0.08em;
}
.mega-menu__group-desc {
    text-transform: none; letter-spacing: 0;
    color: var(--color-footer-text);
}
.mega-menu__items { list-style: none; display: flex; flex-direction: column; gap: 0.125rem; }
.mega-menu__item-link {
    display: flex; flex-direction: column;
    padding: var(--space-xs) var(--space-s);
    text-decoration: none; border-radius: var(--radius-s);
    transition: background var(--trans-fast);
}
.mega-menu__item-link:hover,
.mega-menu__item-link:focus-visible {
    background: color-mix(in srgb, var(--color-nav-hover) 15%, transparent); outline: none;
}
.mega-menu__item-label { font-weight: 600; font-size: var(--step--1); color: var(--color-nav-text); }
.mega-menu__item-desc  { font-size: 0.8em; color: var(--color-footer-text); line-height: 1.4; }

/* ─── Burger (Mobile) ────────────────────────────────────────────────────── */
/*
 * Touch-Target-Mindestgröße: 44×44 px (Apple HIG / WCAG 2.5.5)
 * = 2.75rem bei 16px-Basis
 * Alle Schaltflächen im mobilen Menü erfüllen diese Anforderung.
 */
@media (max-width: 51.25rem) {

    /* Burger-Button: 44×44 px Mindestfläche */
    .nav-toggle__label {
        display: flex; flex-direction: column; justify-content: center;
        gap: 0.375rem;
        width:  2.75rem;   /* 44 px */
        height: 2.75rem;   /* 44 px */
        cursor: pointer; z-index: 1001;
        /* Negative margin, damit der Button optisch nicht zu groß wirkt */
        margin-inline-end: -0.25rem;
    }
    .nav-toggle__bar {
        display: block; height: 0.125rem; width: 1.5rem; align-self: center;
        background: var(--color-nav-text); border-radius: 0.125rem;
        transition: transform var(--trans-normal), opacity var(--trans-normal);
    }
    #nav-toggle:checked ~ .nav-toggle__label .nav-toggle__bar:nth-child(1) { transform: translateY(0.5rem) rotate(45deg); }
    #nav-toggle:checked ~ .nav-toggle__label .nav-toggle__bar:nth-child(2) { opacity: 0; }
    #nav-toggle:checked ~ .nav-toggle__label .nav-toggle__bar:nth-child(3) { transform: translateY(-0.5rem) rotate(-45deg); }

    .main-nav { position: relative; }

    .nav-list {
        display: none; flex-direction: column; height: auto;
        position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0;
        background: var(--color-nav-bg);
        overflow-y: auto; padding-block: var(--space-2xs) 0;
        z-index: 999;
    }
    #nav-toggle:checked ~ .nav-list { display: flex; }

    .nav-list__item { flex-direction: column; align-items: stretch; }

    /* Haupt-Menüpunkte: mindestens 44 px hoch, großzügiges Padding */
    .nav-list__link {
        min-height: 2.75rem;             /* 44 px Touch-Target */
        padding-block: 0.75rem;
        padding-inline: var(--space-m);
        font-size: var(--step-0);        /* Größere Schrift als Desktop-Nav */
        font-weight: 600;
        border-bottom: 0.0625rem solid var(--color-mega-border);
        border-left: none;
    }

    /* Aktiv auf Mobile: linker Akzentbalken */
    .nav-list__item--active > .nav-list__link {
        border-left: 0.25rem solid var(--color-lin);
        padding-left: calc(var(--space-m) - 0.25rem);
        color: var(--color-nav-hover);
    }

    .mega-menu {
        position: static; transform: none;
        width: 100%; left: auto; top: auto;
        border: none; border-radius: 0; box-shadow: none;
        border-top: 0.0625rem solid var(--color-mega-border);
    }
    .mega-menu__inner { grid-template-columns: 1fr; }

    /* Kategorie-Übersichtslink: als auffälliger Block */
    .mega-menu__category {
        border-right: none;
        border-bottom: 0.0625rem solid var(--color-mega-border);
        padding: 0;
        background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    }
    .mega-menu__cat-link {
        min-height: 2.75rem;             /* 44 px Touch-Target */
        padding: 0.75rem var(--space-m);
        display: flex; align-items: center;
        font-size: var(--step-0);
        font-weight: 700;
    }
    .mega-menu__cat-title {
        font-size: var(--step-0);        /* Nicht zu groß auf Mobile */
    }
    .mega-menu__cat-desc,
    .mega-menu__cat-cta { display: none; }

    /* Untermenü-Gruppen-Labels */
    .mega-menu__group-label {
        padding-block: var(--space-xs);
        padding-inline: var(--space-m);
        font-size: var(--step--1);
        margin-bottom: 0;
    }

    /* Untermenü-Links: mindestens 44 px hoch */
    .mega-menu__item-link {
        min-height: 2.75rem;             /* 44 px Touch-Target */
        padding: 0.75rem var(--space-m);
        border-radius: 0;
        border-bottom: 0.0625rem solid
            color-mix(in srgb, var(--color-mega-border) 50%, transparent);
    }
    .mega-menu__item-label { font-size: var(--step-0); }
    .mega-menu__item-desc  { display: none; } /* Beschreibung auf Mobile weglassen */

    .mega-menu__content {
        grid-template-columns: 1fr;
        padding: var(--space-2xs) 0;     /* Kein seitliches Padding – Links fullwidth */
    }
    .mega-menu__items { gap: 0; }
}

/* ─── Page Hero ──────────────────────────────────────────────────────────── */
.page-hero {
    position: relative; overflow: hidden;
    min-height: clamp(11.25rem, 30vw, 20rem);
    display: flex; flex-direction: column; justify-content: flex-end;
    background: var(--color-nav-bg);
}
.page-hero__bg { position: absolute; inset: 0; overflow: hidden; }
.page-hero__bg svg { width: 100%; height: 100%; object-fit: cover; }
.page-hero__content {
    position: relative; z-index: 1;
    padding-block: var(--space-m) var(--space-l);
    /* Inhalt in der Mitte des Hero zentrieren – zwischen den Symbolen */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.page-hero__content .container {
    display: flex;
    flex-direction: column;
    align-items: center;  /* Titel + Untertitel zentrieren */
    width: 100%;
}
/* Breadcrumb im Hero: zentriert wie Titel und Untertitel */
.page-hero__content .container .breadcrumbs--top {
    align-self: center;
    text-align: center;
}
.page-hero__title {
    font-size: var(--step-4); color: #fff;
    text-shadow: 0 0.125rem 0.5rem rgba(0,0,0,.4);
    margin-block: var(--space-xs) 0;
}
.page-hero__sub {
    font-size: var(--step-1); color: rgba(255,255,255,.8);
    max-width: var(--measure); margin-top: var(--space-xs);
    font-weight: 400; font-style: italic;
}

/* ─── Breadcrumbs ────────────────────────────────────────────────────────── */
.breadcrumbs { padding-block: var(--space-xs); font-size: var(--step--1); }
.breadcrumbs--top  { color: rgba(255,255,255,.75); }
.breadcrumbs--bottom {
    color: var(--color-text-muted);
    border-top: 0.0625rem solid var(--color-border);
    margin-top: var(--space-xl);
}
.breadcrumbs__list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25em; }
.breadcrumbs__item { display: flex; align-items: center; gap: 0.25em; }
.breadcrumbs__item:not(:last-child)::after { content: '/'; opacity: 0.5; }
.breadcrumbs--top    .breadcrumbs__link { color: rgba(255,255,255,.85); text-decoration: none; }
.breadcrumbs--top    .breadcrumbs__link:hover { color: #fff; text-decoration: underline; }
.breadcrumbs--bottom .breadcrumbs__link { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs--bottom .breadcrumbs__link:hover { color: var(--color-primary); text-decoration: underline; }
.breadcrumbs__current { opacity: 0.7; }

/* ─── Content ────────────────────────────────────────────────────────────── */
.site-main { padding-block: var(--space-xl); }

/* ─── Prose ──────────────────────────────────────────────────────────────── */
.prose { max-width: 100%; }  /* Begrenzung durch Spaltenbreite (75ch) */
.prose > * + * { margin-top: var(--space-s); }
.prose h2 { margin-top: var(--space-xl); }
.prose h3 { margin-top: var(--space-l); }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose li + li { margin-top: var(--space-2xs); }
.prose blockquote {
    border-left: 0.25rem solid var(--color-primary);
    padding-left: var(--space-m);
    font-style: italic; color: var(--color-text-muted); margin-inline: 0;
}
.prose code {
    font-family: var(--font-mono); font-size: 0.88em;
    background: var(--color-code-bg); color: var(--color-code-text);
    padding: 0.15em 0.4em; border-radius: var(--radius-s);
}
.prose pre {
    background: var(--color-code-bg); color: var(--color-code-text);
    font-family: var(--font-mono); font-size: var(--step--1);
    padding: var(--space-m); border-radius: var(--radius-m);
    overflow-x: auto; margin-block: var(--space-m);
}
.prose pre code { background: none; padding: 0; font-size: inherit; }

/* ─── Float-Bilder ───────────────────────────────────────────────────────── */
figure { margin: 0; max-width: 100%; }
figure.float-left  { float: left;  margin: 0 var(--space-m) var(--space-m) 0; max-width: min(45%, 23.75rem); clear: left; }
figure.float-right { float: right; margin: 0 0 var(--space-m) var(--space-m); max-width: min(45%, 23.75rem); clear: right; }
figure img, figure picture { display: block; width: 100%; }
figcaption { font-size: var(--step--1); color: var(--color-text-muted); padding-top: var(--space-2xs); font-style: italic; line-height: 1.4; }
@media (max-width: 36.25rem) {
    figure.float-left, figure.float-right { float: none; max-width: 100%; margin: var(--space-m) 0; }
}

/* ─── Layout-Module ──────────────────────────────────────────────────────── */

/* Cards */
.cards-grid {
    display: grid;
    /* Standard: auto-fill, Minimum ~45ch (149ch ÷ 3 abzgl. Gaps) */
    grid-template-columns: repeat(auto-fill, minmax(min(45ch, 100%), 1fr));
    gap: var(--space-m);
}
/* 3 Spalten: exakt 3 gleichbreite Spalten – bei 149ch ca. 47ch je Spalte */
.cards-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* 4 Spalten: exakt 4 gleichbreite Spalten – bei 149ch ca. 35ch je Spalte */
.cards-grid--4 { grid-template-columns: repeat(4, 1fr); }

.cards-grid--no-gap { gap: 0; }

/* Responsiv: 3-Spalten → 2 (unter 62rem/992px), dann 1 (unter 38rem/608px) */
@media (max-width: 62rem) {
    .cards-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 38rem) {
    .cards-grid--3 { grid-template-columns: 1fr; }
}

/* Responsiv: 4-Spalten → 2 (unter 68rem/1088px), dann 1 (unter 38rem/608px) */
@media (max-width: 68rem) {
    .cards-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 38rem) {
    .cards-grid--4 { grid-template-columns: 1fr; }
}

.card {
    display: grid; grid-template-rows: subgrid; grid-row: span 4;
    background: var(--color-surface);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-m);
    overflow: hidden; box-shadow: var(--shadow-s);
    transition: box-shadow var(--trans-normal), transform var(--trans-normal);
}
.card:hover { box-shadow: var(--shadow-m); transform: translateY(-0.125rem); }
.card__image { aspect-ratio: 16/9; overflow: hidden; }
.card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__title {
    font-family: var(--font-heading); font-size: var(--step-1);
    color: var(--color-heading);
    padding: var(--space-m) var(--space-m) 0; align-self: start;
}
.card__content {
    padding: var(--space-xs) var(--space-m);
    color: var(--color-text); font-size: var(--step--1); align-self: start;
}
.card__footer { padding: 0 var(--space-m) var(--space-m); align-self: end; }
.card--no-image .card__image { display: none; }

@media (max-width: 30rem) {
    .cards-grid { grid-template-columns: 1fr; }
}

/* 2-Spalten-Text */
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l); }
@media (max-width: 62rem) { .cols-2 { grid-template-columns: 1fr; } }

/* Aside-Layout ¼ – ½ – ¼ */
.layout-aside {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-areas: "heading content aside";
    gap: var(--space-l); align-items: start;
}
.layout-aside__heading { grid-area: heading; }
.layout-aside__heading h1,
.layout-aside__heading h2,
.layout-aside__heading h3,
.layout-aside__heading h4,
.layout-aside__heading h5,
.layout-aside__heading h6 { margin-top: 0; }
.layout-aside__content h1,
.layout-aside__content h2,
.layout-aside__content h3,
.layout-aside__content h4,
.layout-aside__content h5,
.layout-aside__content h6 { margin-top: 0; }
.layout-aside__content { grid-area: content; }
.layout-aside__content p,
.layout-aside--no-aside .layout-aside__content :is(p,.p, li) { max-width: 75ch; }
.layout-aside .aside-col  { grid-area: aside; }
.layout-aside--no-aside {
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "heading content";
}
@media (max-width: 62rem) {
    .layout-aside, .layout-aside--no-aside {
        grid-template-columns: 1fr;
        grid-template-areas: "heading" "content" "aside";
    }
}

/* ─── Tabellen → Mobile Cards ────────────────────────────────────────────── */
.table-responsive { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
thead { background: var(--color-nav-bg); color: var(--color-nav-text); }
thead th {
    padding: var(--space-xs) var(--space-s);
    text-align: left; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85em;
}
tbody tr { border-bottom: 0.0625rem solid var(--color-border); }
tbody tr:hover { background: var(--color-bg-alt); }
tbody td { padding: var(--space-xs) var(--space-s); vertical-align: top; }

@media (max-width: 37.5rem) {
    .table-cards thead { display: none; }
    .table-cards tbody tr {
        display: block;
        background: var(--color-surface);
        border: 0.0625rem solid var(--color-border);
        border-radius: var(--radius-m);
        margin-block-end: var(--space-s);
        padding: var(--space-s);
        box-shadow: var(--shadow-s);
    }
    .table-cards tbody td {
        display: flex; gap: var(--space-xs); align-items: baseline;
        padding: var(--space-3xs) 0; border: none;
    }
    .table-cards tbody td::before {
        content: attr(data-label);
        font-weight: 700; min-width: 40%;
        color: var(--color-text-muted); font-size: 0.85em;
        text-transform: uppercase; letter-spacing: 0.04em;
    }
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
    padding: 0.6em 1.4em;
    font-family: var(--font-body); font-size: var(--step--1); font-weight: 700;
    border-radius: var(--radius-s);
    border: 0.125rem solid transparent;
    cursor: pointer; text-decoration: none;
    transition: background var(--trans-fast), border-color var(--trans-fast),
                color var(--trans-fast), transform var(--trans-fast);
    white-space: nowrap; letter-spacing: 0.02em;
}
.btn:focus-visible { outline: 0.1875rem solid var(--color-primary); outline-offset: 0.125rem; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.btn-accent  { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.btn-accent:hover  { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: #fff; }
.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; }
.btn-ghost   { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-ghost:hover   { background: var(--color-bg-alt); }

/* ─── Formulare ──────────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); }
@media (max-width: 33.75rem) { .form-grid { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; gap: var(--space-2xs); }
.form-group--full { grid-column: 1 / -1; }
.form-label { font-weight: 600; font-size: var(--step--1); color: var(--color-heading); }
.form-label .required { color: var(--color-accent); margin-left: 0.2em; }
.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: var(--space-xs) var(--space-s);
    font-family: var(--font-body); font-size: var(--step-0);
    color: var(--color-text); background: var(--color-surface);
    border: 0.09375rem solid var(--color-border);
    border-radius: var(--radius-s);
    transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
    appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.form-input.error, .form-select.error, .form-textarea.error { border-color: var(--color-error); }
.form-textarea { resize: vertical; min-height: 8.75rem; }
.form-hint  { font-size: var(--step--1); color: var(--color-text-muted); }
.form-error { font-size: var(--step--1); color: var(--color-error); font-weight: 600; }
.form-check { display: flex; align-items: flex-start; gap: var(--space-xs); }
.form-check input[type="checkbox"] { width: 1.1em; height: 1.1em; margin-top: 0.15em; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; }
.form-check label { font-size: var(--step--1); cursor: pointer; line-height: 1.5; }
.form-group--honeypot { display: none !important; }

/* ─── Alerts ─────────────────────────────────────────────────────────────── */
.alert {
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-s); border-left: 0.25rem solid;
    margin-block: var(--space-m); font-size: var(--step--1);
    max-width: 75ch;
}
.alert-success { background: color-mix(in srgb,var(--color-success) 10%,transparent); border-color: var(--color-success); color: var(--color-success); }
.alert-error   { background: color-mix(in srgb,var(--color-error)   10%,transparent); border-color: var(--color-error);   color: var(--color-error); }
.alert-warn    { background: color-mix(in srgb,var(--color-warn)    10%,transparent); border-color: var(--color-warn);    color: var(--color-warn); }

/* ─── Badges ─────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center;
    padding: 0.2em 0.6em; border-radius: 999px;
    font-size: 0.75em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.badge--green  { background: color-mix(in srgb,var(--color-success) 15%,transparent); color: var(--color-success); }
.badge--blue   { background: color-mix(in srgb,var(--color-primary) 15%,transparent); color: var(--color-primary); }
.badge--orange { background: color-mix(in srgb,var(--color-accent)  15%,transparent); color: var(--color-accent); }
.badge--muted  { background: var(--color-bg-alt); color: var(--color-text-muted); }

/* ─── Pros/Cons ──────────────────────────────────────────────────────────── */
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); }
@media (max-width: 38rem) { .pros-cons { grid-template-columns: 1fr; } }
.pros-cons__col { background: var(--color-surface); border: 0.0625rem solid var(--color-border); border-radius: var(--radius-m); overflow: hidden; }
.pros-cons__header { padding: var(--space-xs) var(--space-m); font-weight: 700; font-size: var(--step--1); letter-spacing: 0.04em; text-transform: uppercase; }
.pros-cons__col--pro .pros-cons__header { background: color-mix(in srgb,var(--color-success) 12%,transparent); color: var(--color-success); }
.pros-cons__col--con .pros-cons__header { background: color-mix(in srgb,var(--color-error)   12%,transparent); color: var(--color-error); }
.pros-cons__list { list-style: none; padding: var(--space-s) var(--space-m); }
.pros-cons__list li { padding: var(--space-2xs) 0; border-bottom: 0.0625rem solid var(--color-border); font-size: var(--step--1); }
.pros-cons__list li:last-child { border-bottom: none; }
.pros-cons__col--pro .pros-cons__list li::before { content: '✓ '; color: var(--color-success); font-weight: 700; }
.pros-cons__col--con .pros-cons__list li::before { content: '✗ '; color: var(--color-error);   font-weight: 700; }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
    background: var(--color-footer-bg); color: var(--color-footer-text);
    padding-block: var(--space-2xl) var(--space-l); margin-top: auto;
}
.footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-xl);
}
@media (max-width: 62rem) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-col--about { grid-column: 1 / -1; }
}
@media (max-width: 30rem) { .footer-grid { grid-template-columns: 1fr; } }

.footer-tagline { font-family: var(--font-heading); font-style: italic; font-size: var(--step-1); margin-block: var(--space-xs); color: var(--color-footer-text); }
.footer-about { font-size: var(--step--1); opacity: 0.75; max-width: 34ch; }
.footer-col__title { font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-nav-text); margin-block-end: var(--space-s); }
.footer-nav { list-style: none; }
.footer-nav li + li { margin-top: var(--space-2xs); }
.footer-nav a { font-size: var(--step--1); color: var(--color-footer-text); text-decoration: none; transition: color var(--trans-fast); }
.footer-nav a:hover { color: var(--color-nav-hover); }
.footer-dsgvo { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-s); }
.footer-bottom { margin-top: var(--space-xl); padding-top: var(--space-m); border-top: 0.0625rem solid color-mix(in srgb, var(--color-mega-border) 40%, transparent); display: flex; flex-direction: column; gap: var(--space-2xs); }
.footer-copy, .footer-build { font-size: var(--step--1); opacity: 0.6; }
.footer-copy a {
    color: var(--color-footer-text);
    text-decoration: none;
    border-bottom: 0.0625rem solid color-mix(in srgb, var(--color-footer-text) 40%, transparent);
}
.footer-copy a:hover {
    color: var(--color-nav-hover);
    border-bottom-color: var(--color-nav-hover);
}

/* ─── Utilities ──────────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-muted  { color: var(--color-text-muted); }
.mt-s  { margin-top: var(--space-s); }
.mt-m  { margin-top: var(--space-m); }
.mt-l  { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }
.mb-m  { margin-bottom: var(--space-m); }
.mb-l  { margin-bottom: var(--space-l); }
/* ─── Standard-Seitenlayout: 1/4 – 2/4 – 1/4 ───────────────────────────── */
/* Jede section ist ein 3-Spalten-Grid. Textinhalt landet automatisch in der  */
/* mittleren Spalte (min. 75ch). Breite Elemente brechen per CSS auf volle    */
/* Breite aus – keine PHP-Änderungen nötig.                                   */
.section {
    margin-block: var(--space-2xl);
    display: grid;
    grid-template-columns: minmax(0, 37ch) minmax(75ch, 1fr) minmax(0, 37ch);
    column-gap: var(--space-l);
    row-gap: 0;
}

/* Alle direkten Kinder → Mittelspalte */
.section > * {
    grid-column: 2;
}

/* Breite Elemente → volle Breite (span alle 3 Spalten) */
.section > .cards-grid,
.section > .layout-aside,
.section > .cols-2,
.section > .pros-cons,
.section > .table-responsive,
.section > .divider,
.section > .alert,
.section > figure,
.section > pre,
.section > .footer-grid,
.section > table {
    grid-column: 1 / -1;
}

/* layout-aside bekommt eigene Spaltenbreite (nicht nochmal 1fr/2fr/1fr schachteln) */
.section > .layout-aside {
    grid-column: 1 / -1;
}

/* Inline-gestylte Artikel (z.B. Neuigkeiten) bleiben in der Mittelspalte – 75ch reicht */
.section > article {
    grid-column: 2;
}

/* Responsiv: unterhalb 62rem (992px) → einspaltig */
@media (max-width: 62rem) {
    .section {
        grid-template-columns: 1fr;
    }
    .section > * {
        grid-column: 1;
    }
    .section > .cards-grid,
    .section > .layout-aside,
    .section > .cols-2,
    .section > .pros-cons,
    .section > .table-responsive {
        grid-column: 1;
    }
}

/* h2/h3 direkt in section: Mittelspalte auf Desktop, volle Breite auf Mobile */
.section > h2,
.section > h3 {
    grid-column: 2;
}
@media (max-width: 62rem) {
    .section > h2,
    .section > h3 {
        grid-column: 1;
    }
}

/* Trennlinie über volle Breite */
.section + .divider { grid-column: 1 / -1; }
.divider { border: none; border-top: 0.0625rem solid var(--color-border); margin-block: var(--space-xl); }
.stripe-win { border-left: 0.25rem solid var(--color-win); padding-left: var(--space-s); }
.stripe-lin { border-left: 0.25rem solid var(--color-lin); padding-left: var(--space-s); }

/* ─── Druck ───────────────────────────────────────────────────────────────── */
@media print {
    .site-header, .site-footer, .breadcrumbs, .btn, .main-nav { display: none !important; }
    body { font-size: 11pt; color: #000; background: #fff; }
    a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}