/* ============================================================
   Intermodal Sitepackage — main.css
   Lightweight, BFSG/WCAG 2.2 AA, system fonts, no external CDN
   Target: < 12 KB minified
   ============================================================ */

/* --- Design Tokens (Light / Dark) ----------------------------- */
:root {
    color-scheme: light;

    --color-bg: #ffffff;
    --color-bg-soft: #f5f7fa;
    --color-bg-elev: #ffffff;
    --color-text: #0f172a;
    --color-text-muted: #475569;
    --color-border: #e2e8f0;
    --color-link: #1d4ed8;
    --color-link-hover: #1e3a8a;
    --color-accent: #0f766e;
    --color-accent-soft: #ccfbf1;
    --color-focus: #2563eb;
    --color-warning: #b45309;

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-serif: "Charter", "Bitstream Charter", "Sitka Text", Cambria, "PT Serif", Georgia, serif;

    /* Editorial category accent colors — used as eyebrow stripes & badges */
    --cat-markets:    #b91c1c;   /* finance red */
    --cat-knowledge:  #1d4ed8;   /* knowledge blue */
    --cat-insights:   #c2410c;   /* briefings amber */
    --cat-regulation: #6d28d9;   /* policy purple */
    --cat-tech:       #0f766e;   /* engineering teal (== brand accent) */
    --cat-default:    var(--color-text);

    --fs-base: 1rem;
    --lh-base: 1.65;
    --lh-headline: 1.15;
    --measure: 64ch;
    --measure-narrow: 56ch;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,.08);

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;

    --container-max: 76rem;
    --header-h: 3.5rem;
    --tap-min: 44px;
}

@media (min-width: 48rem) {
    :root { --header-h: 4rem; }
}

/* OS dark scheme is not applied: site.css chrome stays light.
   Auto-dark previously flipped --color-text to #e2e8f0 on a white header
   (weiß auf weiß). Explicit [data-theme="dark"] remains available. */

[data-theme="light"] {
    --color-bg: #ffffff;
    --color-bg-soft: #f5f7fa;
    --color-text: #0f172a;
    --color-text-muted: #475569;
    --color-border: #e2e8f0;
    --color-link: #1d4ed8;
}
[data-theme="dark"] {
    --color-bg: #0b1220;
    --color-bg-soft: #111a2e;
    --color-text: #e2e8f0;
    --color-text-muted: #94a3b8;
    --color-border: #1f2a44;
    --color-link: #93c5fd;
}

/* --- Reset & Base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font: var(--fs-base)/var(--lh-base) var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 8 4 4;
}
/* Don't hyphenate short labels and headlines — those should break on word boundaries */
h1, h2, h3, h4, h5, h6,
.eyebrow, .breadcrumb, .lang-switcher, .site-nav, .section-nav, .article-meta {
    hyphens: manual;
    -webkit-hyphens: manual;
}

img, svg, video { max-width: 100%; height: auto; }
img { font-style: italic; }

/* <picture> behaves like an inline-block; ensure responsive sizing matches its <img> child */
picture { display: contents; }

a {
    color: var(--color-link);
    text-underline-offset: .15em;
}
a:hover { color: var(--color-link-hover); }

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

::selection { background: var(--color-accent-soft); color: var(--color-text); }

/* --- A11y helpers --------------------------------------------- */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute;
    top: -40px; left: var(--space-3);
    background: var(--color-text);
    color: var(--color-bg);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    z-index: 1000;
    text-decoration: none;
}
.skip-link:focus { top: var(--space-3); }

/* --- Layout primitives ---------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-3);
}
@media (min-width: 30rem) { .container { padding-inline: var(--space-4); } }

.main {
    min-height: calc(100dvh - var(--header-h) - 8rem);
    padding-block: var(--space-5) var(--space-8);
}
.main:focus { outline: none; }
@media (min-width: 48rem) {
    .main { padding-block: var(--space-6) var(--space-10); }
}

/* --- Typography (editorial / financial-news idiom) ------------- */
h1, h2, h3, h4 {
    line-height: var(--lh-headline);
    font-weight: 700;
    margin: 0 0 var(--space-4);
    text-wrap: balance;
    letter-spacing: -0.01em;
    font-family: var(--font-serif);
}
h1 {
    font-size: clamp(1.85rem, 1.3rem + 1.8vw, 2.65rem);
    letter-spacing: -0.015em;
    line-height: 1.12;
}
h2 {
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
    margin-top: var(--space-7);
    line-height: 1.22;
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.005em;
}
h3 {
    font-size: clamp(1.1rem, 1rem + .4vw, 1.25rem);
    margin-top: var(--space-5);
    font-weight: 600;
    font-family: var(--font-sans);
}
h4 { font-size: 1.05rem; font-weight: 600; }

p, li, dd { max-width: var(--measure); }
p, ul, ol, dl, blockquote, figure, table, pre { margin: 0 0 var(--space-4); }

.lead {
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem);
    line-height: 1.45;
    color: var(--color-text);
    max-width: var(--measure);
    font-weight: 400;
}

/* Subtle drop-cap on long-form articles only — opt-in via .has-dropcap */
.has-dropcap > p:first-of-type::first-letter {
    font-family: var(--font-serif);
    float: left;
    font-size: 3.2em;
    line-height: 0.9;
    padding: .25rem .4rem 0 0;
    color: var(--color-accent);
    font-weight: 700;
}

/* "Eyebrow" — small caps category label above headline */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--cat-default);
    margin: 0 0 var(--space-2);
}
.eyebrow::before {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 2px;
    background: currentColor;
}
.eyebrow--markets    { color: var(--cat-markets); }
.eyebrow--knowledge  { color: var(--cat-knowledge); }
.eyebrow--insights   { color: var(--cat-insights); }
.eyebrow--regulation { color: var(--cat-regulation); }
.eyebrow--tech       { color: var(--cat-tech); }

/* Article meta strip — date + reading time + category */
.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
    margin: var(--space-3) 0 var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--color-text-muted);
    letter-spacing: .02em;
}
.article-meta time { font-variant-numeric: tabular-nums; }

blockquote {
    border-inline-start: 4px solid var(--color-accent);
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-soft);
    border-radius: var(--radius-sm);
}

code, pre, kbd, samp { font-family: var(--font-mono); font-size: .95em; }
pre {
    overflow: auto;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* Tables overflow horizontally inside a scrollable wrapper on narrow screens.
   The wrapper is added by JS (see main.js) for any table that exceeds its
   container so that we don't break table semantics globally. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--space-5) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.table-scroll table { margin: 0; min-width: 36rem; }

table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-5) 0;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}
th, td {
    text-align: start;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
    line-height: 1.4;
}
th {
    background: var(--color-bg-soft);
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-text);
    font-family: var(--font-sans);
}
tbody tr:hover { background: color-mix(in srgb, var(--color-accent-soft) 30%, transparent); }
/* numeric / monospace cells: any td that contains only digits, fragments,
   or common units gets right-aligned via util class .num */
td.num, th.num,
td.numeric, th.numeric { text-align: end; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- Header (Editorial / financial-news idiom) ---------------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--color-bg) 96%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.site-header__title {
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: -.01em;
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--header-h);
}
@media (min-width: 48rem) {
    .site-header__inner { gap: var(--space-4); }
    .site-header__title { font-size: 1.05rem; }
}
.site-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 700;
    min-width: 0;
    flex: 1 1 auto;
}
.site-header__logo { color: var(--color-accent); display: inline-flex; flex-shrink: 0; }
.site-header__menu-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    color: var(--color-text);
    cursor: pointer;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    order: 3;
}
.site-header__menu-icon--close { display: none; }
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon--bars { display: none; }
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon--close { display: inline-block; }

/* --- Main Navigation (Top-bar, top-level only) ---------------- */
.site-nav { margin-inline-start: auto; }
.site-nav__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
.site-nav__link {
    display: inline-block;
    position: relative;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: .92rem;
    transition: color .15s ease;
}
.site-nav__link:hover { color: var(--color-text); }
.site-nav__item--active > .site-nav__link,
.site-nav__item--current > .site-nav__link { color: var(--color-text); }
/* Active section: subtle underline that slides up */
.site-nav__item--active > .site-nav__link::after,
.site-nav__item--current > .site-nav__link::after {
    content: "";
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: 4px;
    height: 2px;
    background: var(--color-accent);
    border-radius: 1px;
}

@media (max-width: 47.99rem) {
    .site-header__menu-toggle { display: inline-flex; }
    .site-nav {
        position: fixed;
        inset: var(--header-h) 0 0 0;
        margin: 0;
        padding: var(--space-3) var(--space-4) var(--space-6);
        background: var(--color-bg);
        border-top: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 60;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity .15s ease, transform .15s ease, visibility .15s;
    }
    .site-nav__list { flex-direction: column; gap: 0; }
    .site-nav__link {
        padding: var(--space-3) var(--space-2);
        border-bottom: 1px solid var(--color-border);
        display: flex;
        align-items: center;
        min-height: var(--tap-min);
        font-size: 1rem;
    }
    .site-nav__item:last-child .site-nav__link { border-bottom: 0; }
    .site-nav__item--active > .site-nav__link::after,
    .site-nav__item--current > .site-nav__link::after { display: none; }
    .site-nav__item--active > .site-nav__link,
    .site-nav__item--current > .site-nav__link { color: var(--color-accent); font-weight: 600; }
    .site-header[data-nav-open="true"] .site-nav {
        visibility: visible;
        opacity: 1;
        transform: none;
    }
    .site-header__menu-toggle[aria-expanded="true"] { background: var(--color-bg-soft); }

    /* Backdrop behind drawer */
    .site-nav__backdrop {
        position: fixed;
        inset: var(--header-h) 0 0 0;
        background: rgba(11, 18, 32, .35);
        z-index: 55;
        opacity: 0;
        visibility: hidden;
        transition: opacity .15s ease, visibility .15s;
    }
    .site-header[data-nav-open="true"] ~ .site-nav__backdrop,
    body.is-nav-open .site-nav__backdrop {
        opacity: 1;
        visibility: visible;
    }
    body.is-nav-open { overflow: hidden; }
}

/* --- Section Navigation (Context-Bar below header) ------------ */
.section-nav {
    background: var(--color-bg-soft);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: var(--header-h);
    z-index: 40;
    /* horizontal scroll on narrow screens — scrollbar hidden, edge fade hint */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent 100%);
            mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent 100%);
}
.section-nav::-webkit-scrollbar { display: none; }
@media (min-width: 60rem) {
    /* enough room — kill mask once content fits without scroll */
    .section-nav { -webkit-mask-image: none; mask-image: none; }
}
.section-nav__inner {
    padding-block: var(--space-2);
    display: flex;
    align-items: center;
    min-width: max-content;
}
.section-nav__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    gap: var(--space-1);
    flex-wrap: nowrap;
    width: 100%;
}
.section-nav__item { scroll-snap-align: start; }
.section-nav__link {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    min-height: 36px;
    border-radius: 999px;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
    border: 1px solid transparent;
}
.section-nav__link:hover {
    color: var(--color-text);
    background: var(--color-bg-elev);
}
.section-nav__item--current > .section-nav__link {
    color: var(--color-bg);
    background: var(--color-accent);
    border-color: var(--color-accent);
}
.section-nav__item--active:not(.section-nav__item--current) > .section-nav__link {
    color: var(--color-text);
    background: var(--color-bg-elev);
    border-color: var(--color-border);
}

/* --- Language switcher with flags ----------------------------- */
.lang-switcher { flex-shrink: 0; order: 2; }
.lang-switcher__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    gap: 2px;
    background: var(--color-bg-soft);
    padding: 3px;
    border-radius: 999px;
}
.lang-switcher__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 6px 10px 6px 6px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background .15s ease, color .15s ease;
    line-height: 1;
    min-height: 30px;
}
@media (max-width: 30rem) {
    .lang-switcher__link { padding: 6px; gap: 0; }
    .lang-switcher__code { display: none; }
}
.lang-switcher__link:hover {
    background: var(--color-bg-elev);
    color: var(--color-text);
}
.lang-switcher__item--active .lang-switcher__link {
    color: var(--color-text);
    background: var(--color-bg-elev);
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
    cursor: default;
}
.lang-switcher__flag {
    display: inline-flex;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06);
    flex-shrink: 0;
}
.lang-switcher__flag svg {
    display: block;
    width: 100%;
    height: 100%;
}
.lang-switcher__code { font-variant-numeric: tabular-nums; }

/* --- Breadcrumb ----------------------------------------------- */
.breadcrumb { margin-bottom: var(--space-5); }
.breadcrumb__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    font-size: .9rem;
    color: var(--color-text-muted);
}
.breadcrumb__item + .breadcrumb__item::before {
    content: "›";
    margin-inline: var(--space-2);
    color: var(--color-text-muted);
}

/* --- Page header / lead --------------------------------------- */
.page-header {
    margin: 0 0 var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.page-header h1 {
    margin: 0 0 var(--space-2);
    /* On phones, no artificial line-length cap — give the headline the full
       reading width. From tablet (48rem) up, balance line breaks. */
    max-width: none;
}
@media (min-width: 48rem) {
    .page-header h1 { max-width: 30ch; }
}
.page-header .lead { margin-bottom: 0; max-width: var(--measure); }

/* --- Article ---------------------------------------------------
   Single centered column for cleaner reading rhythm. The optional
   sidebar slot is only shown when actually populated — empty
   sidebars no longer leave a hole on the right. */
.article {
    display: block;
    max-width: none;
}
.article__header,
.article__body {
    max-width: var(--measure);
    margin-inline: auto;
}
.article__sidebar:empty,
.article__sidebar:not(:has(*)) {
    display: none;
}
.article__sidebar {
    max-width: var(--measure);
    margin: var(--space-6) auto 0;
    padding: var(--space-4);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}
.article__meta { color: var(--color-text-muted); font-size: .9rem; }

/* --- Hero / teaser grid (Home) -------------------------------- */
.hero {
    padding: var(--space-8) 0;
    text-align: start;
}
.hero-image {
    /* Full-bleed: image goes to the browser edges */
    margin-inline: calc(50% - 50vw);
    margin-block: 0 var(--space-6);
    position: relative;
    max-width: 100vw;
    overflow: hidden;
    background: #0b1220;
}
.hero-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 12rem;
    object-fit: cover;
    background: #0b1220;
    border-radius: 0;
    filter: none;
}
/* Title sits in the panel below the photo — no gradient wash. */
.hero-image::after { content: none; }
.hero-image figcaption {
    max-width: var(--container-max);
    margin: var(--space-2) auto 0;
    padding-inline: var(--space-4);
    font-size: .8rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    letter-spacing: .02em;
    text-transform: uppercase;
}
@media (max-width: 36rem) {
    .hero-image img { aspect-ratio: 4 / 3; min-height: 14rem; }
}
@media (max-width: 23.5rem) {
    /* very small phones (≤ 375px / iPhone SE) */
    .hero-image img { min-height: 12rem; }
}

/* Stacked hero: photo, then solid slate panel. White text never sits on the image. */
.hero-overlay {
    position: relative;
    margin-inline: calc(50% - 50vw);
    margin-top: 0;
    margin-bottom: var(--space-8);
    padding: var(--space-6) var(--space-4) var(--space-8);
    color: #f8fafc;
    background: #0f172a;
    z-index: 2;
}
.hero-overlay__inner {
    max-width: var(--container-max);
    margin-inline: auto;
}
.hero-overlay .eyebrow {
    color: #5eead4;
}
.hero-overlay h1 {
    color: #ffffff;
    text-shadow: none;
    margin: 0 0 var(--space-3);
    max-width: 28ch;
}
.hero-overlay .lead {
    color: #cbd5e1;
    max-width: 52ch;
    margin: 0;
}
@media (max-width: 36rem) {
    .hero-overlay { padding: var(--space-5) var(--space-4) var(--space-6); }
    .hero-overlay h1 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 1.85rem); }
    .hero-overlay .lead { font-size: 1.05rem; }
}

/* --- Article figures (photos + SVG schemata) ------------------ */
figure {
    margin: var(--space-5) 0;
}
figure img,
figure svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 56rem;
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
}
figure figcaption {
    margin-top: var(--space-2);
    font-size: .85rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Inline article figures (formerly floated right/left) are now ALWAYS
   stacked below their preceding paragraph, centered within the body
   column. The legacy class names stay so existing content keeps working. */
figure.figure-right,
figure.figure-left {
    float: none;
    clear: both;
    max-width: 100%;
    margin: var(--space-5) auto;
    text-align: center;
}
/* Photos (raster) — enforce 16/10 with cover for consistent rhythm */
figure.figure-right img:not([src$=".svg"]),
figure.figure-left  img:not([src$=".svg"]) {
    max-width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    margin-inline: auto;
}
/* SVGs (via <img> or inline <svg>) — keep their natural viewBox ratio so
   labels at top/bottom of schemata don't get cropped */
figure.figure-right img[src$=".svg"],
figure.figure-left  img[src$=".svg"],
figure.figure-right svg,
figure.figure-left  svg {
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    margin-inline: auto;
}
figure.figure-right figcaption,
figure.figure-left figcaption {
    text-align: center;
    max-width: 56ch;
    margin-inline: auto;
}

/* Two-column figure pair for symmetric Bilder-rechts-und-links Layout.
   Stacked on phones and small tablets (<48rem) — two cramped 220px columns
   are uglier than one full-width image. */
.figure-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin: var(--space-5) 0;
}
.figure-pair figure { margin: 0; max-width: none; }
.figure-pair img { aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 48rem) {
    .figure-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Lead block with content + sidebar image */
.lead-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
    gap: var(--space-6);
    align-items: start;
    margin: var(--space-5) 0;
}
.lead-grid figure { margin: 0; max-width: none; }
@media (max-width: 60rem) {
    .lead-grid { grid-template-columns: 1fr; }
}

/* Article body needs to clear floats at section breaks */
.article__body h2,
.article__body h3,
.article__body section { clear: both; }
.teaser-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin-top: var(--space-6);
}
@media (min-width: 48rem) {
    .teaser-grid { gap: var(--space-5); margin-top: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

/* --- FAQ ------------------------------------------------------ */
.faq__list details {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-2);
    background: var(--color-bg-elev);
}
.faq__list details[open] { background: var(--color-bg-soft); }
.faq__list summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::before {
    content: "+";
    display: inline-block;
    width: 1.2em;
    color: var(--color-accent);
}
.faq__list details[open] summary::before { content: "−"; }

/* --- Glossary ------------------------------------------------- */
.glossary__alphabet {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: var(--space-2);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
    gap: 4px;
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
}
@media (min-width: 48rem) {
    .glossary__alphabet {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1);
        padding: var(--space-3);
    }
}
.glossary__alphabet a,
.glossary__alphabet-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    text-align: center;
    padding: var(--space-1) var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    font-family: inherit;
}
.glossary__alphabet a:hover,
.glossary__alphabet-link:hover:not([disabled]) {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}
.glossary__alphabet-link.is-active {
    background: var(--color-accent);
    color: var(--color-bg);
    border-color: var(--color-accent);
}
.glossary__alphabet-link--empty,
.glossary__alphabet-link[disabled] {
    color: var(--color-text-muted);
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}
.glossary__count {
    color: var(--color-text-muted);
    font-size: .9rem;
    margin: var(--space-1) 0 var(--space-4);
}
.glossary__empty {
    margin: var(--space-6) 0;
    padding: var(--space-4);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
}
.glossary__empty .link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--color-link);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}
.glossary-term[hidden] { display: none !important; }

.glossary__entries dl { display: grid; gap: var(--space-2); }
.glossary__entries dt {
    font-weight: 700;
    color: var(--color-accent);
    margin-top: var(--space-4);
}
.glossary__entries dd { margin: 0; }

/* --- Footer --------------------------------------------------- */
.site-footer {
    margin-top: var(--space-10);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-size: .9rem;
}
.site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding-block: var(--space-5);
}
@media (min-width: 48rem) {
    .site-footer__inner {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-4);
    }
}
.site-footer__legal {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
}
.site-footer__legal a {
    color: var(--color-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}
.site-footer__legal a:hover { color: var(--color-link-hover); text-decoration: underline; }
.site-footer__copyright { margin: 0; }
@media (min-width: 48rem) {
    .site-footer__copyright { margin-inline-start: auto; }
}
.site-footer__credits {
    flex-basis: 100%;
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: .8rem;
    color: var(--color-text-muted);
}
.site-footer__credits a { color: var(--color-text-muted); text-decoration: underline; }
.site-footer__credits a:hover { color: var(--color-link-hover); }
.theme-toggle {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-3);
    font-size: 1rem;
}

/* --- Content Block: faq-item ---------------------------------- */
.faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    background: var(--color-bg-elev);
}
@media (min-width: 48rem) {
    .faq-item { padding: var(--space-3) var(--space-4); }
}
.faq-item[open] { background: var(--color-bg-soft); }
.faq-item__summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-height: var(--tap-min);
    padding-block: var(--space-2);
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary::before {
    content: "+";
    color: var(--color-accent);
    font-weight: 700;
    width: 1em;
    flex-shrink: 0;
}
.faq-item[open] .faq-item__summary::before { content: "−"; }
.faq-item__question {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}
.faq-item__answer { padding-top: var(--space-2); }
.faq-item__answer > div { max-width: var(--measure); }

/* --- Content Block: glossary-term ----------------------------- */
.glossary-term {
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
}
.glossary-term:first-of-type { border-top: 0; }
.glossary-term__head { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline; margin-bottom: var(--space-2); }
.glossary-term__name {
    margin: 0;
    color: var(--color-accent);
    font-size: 1.15rem;
}
.glossary-term__aliases {
    margin: 0;
    color: var(--color-text-muted);
    font-size: .9rem;
    font-style: italic;
}
.glossary-term__aliases span + span::before { content: ""; }
.glossary-term__definition { max-width: var(--measure); }
.glossary-term__source { color: var(--color-text-muted); font-size: .85rem; margin-top: var(--space-1); }

/* --- Content Block: market-snapshot --------------------------- */
.market-snapshot {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    background: var(--color-bg-elev);
    margin-bottom: var(--space-5);
}
.market-snapshot__head { margin-bottom: var(--space-4); }
.market-snapshot__ticker {
    display: inline-block;
    background: var(--color-text);
    color: var(--color-bg);
    padding: .15rem .5rem;
    border-radius: 3px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
}
.market-snapshot__headline {
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0 0 var(--space-2);
    text-wrap: balance;
}
.market-snapshot__subhead {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    margin: 0;
    max-width: var(--measure);
}
.market-snapshot__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin: var(--space-4) 0;
    padding: 0;
}
@media (min-width: 36rem) {
    .market-snapshot__kpis { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}
.market-snapshot__kpis .kpi {
    background: var(--color-bg-elev);
    padding: var(--space-3) var(--space-4);
}
.kpi__label {
    font-size: .8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: var(--space-1);
}
.kpi__value {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    font-family: var(--font-mono);
}
.kpi__number { font-size: 1.4rem; font-weight: 700; color: var(--color-text); }
.kpi__unit { font-size: .85rem; color: var(--color-text-muted); }
.kpi__trend { margin-inline-start: auto; font-weight: 700; }
.kpi--up   .kpi__trend { color: #16a34a; }
.kpi--down .kpi__trend { color: #dc2626; }
.kpi--neutral .kpi__trend { color: var(--color-text-muted); }

.market-snapshot__body { max-width: var(--measure); margin: var(--space-4) 0; }
.market-snapshot__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    color: var(--color-text-muted);
    font-size: .85rem;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
}

/* --- Content Block: pull-quote (editorial) -------------------- */
.pull-quote {
    margin: var(--space-6) 0;
    position: relative;
    padding: 0;
    border-block: 1px solid var(--color-border);
}
@media (min-width: 48rem) {
    .pull-quote { margin: var(--space-8) 0; }
}
.pull-quote::before {
    content: "\201C";   /* opening curly quote */
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(3.5rem, 8vw, 5rem);
    line-height: .85;
    color: var(--color-accent);
    margin-top: -.4em;
    margin-bottom: var(--space-2);
    text-align: center;
}
.pull-quote__quote {
    margin: 0;
    border: 0;
    padding: 0 var(--space-4) var(--space-4);
    background: transparent;
    text-align: center;
}
.pull-quote__quote p {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 1.1rem + .9vw, 1.85rem);
    line-height: 1.32;
    font-weight: 400;
    color: var(--color-text);
    max-width: 32ch;
    margin: 0 auto;
    border: 0;
    padding: 0;
}
.pull-quote__cite {
    margin-top: var(--space-3);
    padding: 0;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-style: normal;
    text-align: center;
}
.pull-quote__role { color: var(--color-text-muted); display: block; margin-top: var(--space-1); text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: .85rem; }

/* --- Content Block: data-card (financial-news idiom) ---------- */
.data-card {
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-accent);
    border-radius: 2px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-elev);
    max-width: none;
    transition: transform .15s ease, box-shadow .15s ease;
    position: relative;
}
@media (min-width: 48rem) {
    .data-card { padding: var(--space-4) var(--space-5); }
}
.data-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.data-card__figure {
    margin: 0;
    font-family: var(--font-mono);
    font-size: clamp(1.8rem, 1.3rem + 1.2vw, 2.6rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.05;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.data-card__caption {
    margin: var(--space-1) 0 0;
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.3;
}
.data-card__detail {
    margin: var(--space-2) 0 0;
    font-size: .88rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}
.data-card__source {
    margin: var(--space-3) 0 0;
    padding-top: var(--space-2);
    border-top: 1px dashed var(--color-border);
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.investor-briefing {
    margin: var(--space-8) 0;
    padding-top: var(--space-6);
    border-top: 3px solid var(--cat-markets, #b91c1c);
    color: #0f172a;
}
.investor-briefing > h2 { margin-top: 0; color: #0f172a; }
.investor-briefing .market-snapshot { margin: var(--space-5) 0; }
.investor-briefing .market-snapshot__kpis {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin: var(--space-4) 0;
}
@media (min-width: 48rem) {
    .investor-briefing .market-snapshot__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Forms (sane defaults for a11y) --------------------------- */
input, select, textarea, button {
    font: inherit;
}
label { display: block; font-weight: 500; margin-bottom: var(--space-1); }
input[type="text"], input[type="email"], input[type="search"], textarea, select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    background: var(--color-bg-elev);
    color: var(--color-text);
    border-radius: var(--radius-sm);
}
input:invalid, textarea:invalid { border-color: var(--color-warning); }

/* --- Editorial helpers ---------------------------------------- */

/* Section divider: thin rule with a small color-stroke center */
hr,
.section-divider {
    border: 0;
    height: 1px;
    background: var(--color-border);
    margin: var(--space-8) 0;
    position: relative;
}
hr::before,
.section-divider::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 4rem;
    height: 3px;
    background: var(--color-accent);
}

/* Article body — narrower for better reading rhythm */
.article__body { max-width: var(--measure); }
.article__body h2 {
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.article__body h3 {
    margin-top: var(--space-6);
    color: var(--color-text);
}
.article__body p,
.article__body li,
.article__body dd { line-height: 1.7; }
.article__body strong { color: var(--color-text); font-weight: 700; }
.article__body figure { max-width: none; }

/* Definition list — used in glossary entries within articles */
.article__body dl { display: grid; gap: var(--space-2); }
.article__body dt {
    font-weight: 700;
    color: var(--color-accent);
    font-family: var(--font-serif);
    font-size: 1.05rem;
}
.article__body dd { margin: 0 0 var(--space-3); }

/* Pull-Quote inside article body needs a bit more vertical air */
.article__body .pull-quote { margin-block: var(--space-10); }

/* Lists with editorial accent */
.article__body ul,
.article__body ol { padding-inline-start: var(--space-5); }
.article__body ul li::marker { color: var(--color-accent); }
.article__body ol li::marker { color: var(--color-accent); font-weight: 700; }

/* Links inside article body — underline by default, accent on hover */
.article__body a:not(.btn) {
    color: var(--color-link);
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--color-link) 50%, transparent);
}
.article__body a:not(.btn):hover {
    text-decoration-color: var(--color-link);
}

/* Lead-Grid: side image + lead text */
.lead-grid { gap: var(--space-8); }

/* Refined breadcrumb */
.breadcrumb {
    margin-top: -var(--space-2);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
}
.breadcrumb__list { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; }
.breadcrumb__item a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb__item a:hover { color: var(--color-link); }

/* Better visual rhythm in main-nav */
.site-nav__link { font-family: var(--font-sans); font-size: .92rem; letter-spacing: .01em; }
.site-nav__sub a { font-size: .9rem; }

/* "Why this matters" Bloomberg-style block on home */
.why-matters {
    margin: var(--space-8) 0;
    padding: var(--space-5) var(--space-4);
    border-top: 3px solid var(--color-accent);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    border-radius: 0;
}
@media (min-width: 48rem) {
    .why-matters { margin: var(--space-10) 0; padding: var(--space-6) var(--space-5); }
}
.why-matters h2 {
    margin-top: 0;
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
    border: 0;
    padding: 0;
}
.why-matters h2::before { display: none; }
.why-matters .lead { font-size: 1.2rem; margin-bottom: var(--space-4); }
.why-matters__cta {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Intro narrative on subpages — same tonality, lighter footprint */
.intro-narrative {
    margin: 0 0 var(--space-8);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}
.intro-narrative .lead {
    font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem);
    line-height: 1.45;
    margin-bottom: var(--space-3);
}

/* Market-Snapshot — sharper editorial look */
.market-snapshot {
    border-top: 3px solid var(--cat-markets);
    border-radius: 2px;
}
.market-snapshot__headline {
    font-family: var(--font-serif);
    letter-spacing: -.015em;
}
.market-snapshot__ticker {
    background: var(--cat-markets);
    color: #fff;
}

/* Glossary term head — refined */
.glossary-term__name {
    font-family: var(--font-serif);
    color: var(--color-text);
    border-bottom: 2px solid var(--color-accent);
    display: inline-block;
    padding-bottom: 2px;
}

/* FAQ-Item — sharper Bloomberg-cards-style */
.faq-item {
    border-radius: 2px;
    border-left: 3px solid var(--color-accent);
    background: var(--color-bg-elev);
}
.faq-item__question {
    font-family: var(--font-serif);
    font-weight: 700;
}

/* Teaser-grid → Bloomberg-news-cards on home */
.teaser-grid {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-4);
}

/* --- Print ---------------------------------------------------- */
@media print {
    .site-header, .site-footer, .skip-link, .lang-switcher { display: none; }
    a { color: black; text-decoration: underline; }
    body { background: white; color: black; }
}


/* --- TypoUno chrome: light, contrast, mobile-first ----------- */
html, body { background: #ffffff; color: #0f172a; }
.page-title { display: none; }
h1, h2, h3, .hero-overlay h1, .page-title {
    font-family: var(--font-serif, Charter, Georgia, serif);
}
.site-header {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    color: #0f172a;
}
.header-row {
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.brand {
    letter-spacing: 0;
    text-transform: none;
    font-family: var(--font-serif, Charter, Georgia, serif);
    font-weight: 700;
    font-size: 1.05rem;
    color: #0f172a;
}
.brand:hover, .brand:focus { color: #0f766e; text-decoration: none; }
.brand-logo { height: 36px; width: auto; display: block; }
.nav-toggle {
    color: #0f172a;
    border: 1.5px solid #0f172a;
    background: #ffffff;
    min-height: 44px;
    min-width: 44px;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after { background: #0f172a; }
.nav a {
    color: #0f172a;
    font-weight: 600;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.nav a:hover, .nav a:focus { color: #0f766e; text-decoration: underline; }
.nav a[aria-current="page"] { color: #0f766e; font-weight: 700; }
.nav a[href$="/kontakt"] {
    background: #0f766e;
    color: #ffffff;
    font-weight: 700;
}
.nav a[href$="/kontakt"]:hover,
.nav a[href$="/kontakt"]:focus { color: #ffffff; filter: brightness(1.08); }
.lang-switch a, .lang-switch span { color: #0f172a; }
.hero-image figcaption {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.teaser {
    display: block;
    padding: var(--space-5, 1.5rem);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md, 8px);
    background: #ffffff;
    text-decoration: none;
    color: #0f172a;
}
.teaser:hover, .teaser:focus { border-color: #0f766e; text-decoration: none; color: #0f172a; }
.teaser h2 { margin: 0 0 .5rem; font-size: 1.25rem; color: #0f172a; }
.teaser p { color: #334155; }
.data-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.article__body, .article-body, .prose { max-width: 64ch; color: #0f172a; }
.article__body img, .prose img { max-width: 100%; height: auto; }

/* site.css (Atlas/rail-assets) paints every .frame:has(h1) as a dark full-bleed
   hero. Intermodal already has .hero + .hero-overlay; the article CE also
   contains an h1, so why-matters sat light-on-light (weiß auf weiß). */
.content .frame:has(h1) {
    position: static;
    width: auto;
    max-width: none;
    margin: 0 0 2rem;
    margin-left: 0;
    padding: 0;
    border-radius: 0;
    color: #0f172a;
    overflow: visible;
    text-align: left;
    background: none;
}
.content .frame:has(h1)::before { content: none; display: none; }
.content .frame:has(h1) > * { position: static; }
.content .frame:has(h1) h1,
.content .frame:has(h1) h2,
.content .frame:has(h1) h3 {
    color: #0f172a;
    font-size: revert;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 0.75rem;
    max-width: none;
}
.content .frame:has(h1) p,
.content .frame:has(h1) li,
.content .frame:has(h1) dd {
    color: #334155;
    font-size: inherit;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
.content .frame:has(h1) a { color: #1d4ed8; }
.content .frame:has(h1) .why-matters {
    background: #f5f7fa;
    color: #0f172a;
}
.content .frame:has(h1) .why-matters h2 { color: #0f172a; }
.content .frame:has(h1) .why-matters p,
.content .frame:has(h1) .why-matters .lead { color: #334155; }
.content .frame:has(h1) .pull-quote,
.content .frame:has(h1) .pull-quote__quote p { color: #0f172a; }
.content .frame:has(h1) .pull-quote__cite,
.content .frame:has(h1) .pull-quote__role { color: #475569; }
.content .frame:has(.hero-overlay) .hero-overlay { color: #f8fafc; }
.content .frame:has(.hero-overlay) .hero-overlay h1 { color: #ffffff; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); max-width: 28ch; margin: 0 0 0.75rem; }
.content .frame:has(.hero-overlay) .hero-overlay p,
.content .frame:has(.hero-overlay) .hero-overlay .lead { color: #cbd5e1; font-size: 1.125rem; }
.content .frame:has(.hero-overlay) .hero-overlay a { color: #99f6e4; }
.content .frame:has(.hero-overlay) .hero-overlay .eyebrow { color: #5eead4; }
.site-footer { background: #0f172a; color: #e2e8f0; }
.site-footer a { color: #99f6e4; }
.site-footer a:hover, .site-footer a:focus { color: #ccfbf1; }
.site-footer__legal a,
.site-footer__credits a,
.site-footer__credits { color: #cbd5e1; }

@media (max-width: 47.99rem) {
    .hero-image { margin-block: 0; }
    .hero-image img { aspect-ratio: 4 / 3; min-height: 10rem; max-height: 38vh; }
    .teaser-grid,
    .data-card-grid { grid-template-columns: 1fr; }
    .header-row { padding: 12px 0; }
    .brand-logo { height: 28px; }
}

@media (min-width: 48rem) {
    .hero-image img { min-height: 14rem; max-height: 42vh; aspect-ratio: 16 / 9; }
    .teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
    .teaser-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Screenshot polish */
.site-header { box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06); }
.site-header::before {
    content: "";
    display: block;
    height: 3px;
    background: #0f766e;
}
.nav a[href*="inhaltsverzeichnis"],
.site-footer a[href*="inhaltsverzeichnis"],
.html-sitemap { display: none !important; }
.teaser .eyebrow { display: none; }
.teaser {
    min-height: 100%;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.teaser h2 { font-size: 1.15rem; }
.lang-switch__link,
.lang-switch__current {
    border-radius: 2px;
    min-width: 2.5rem;
    min-height: 36px;
}
.hero-overlay { padding-block: 1.75rem 2rem; }
.pull-quote {
    max-width: 40rem;
    margin-inline: auto;
}
.market-snapshot {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 3px solid #0f766e;
    padding: 1.25rem 1.35rem 1.4rem;
}
.market-snapshot__ticker {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}
.kpi {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 0.75rem 0.9rem;
}
.kpi__value, .kpi__number { font-weight: 800; color: #0f172a; }
.breadcrumb { margin-bottom: 0.5rem; }
.main { padding-bottom: 4rem; }