/* --- tokens.css --- */
/*
 * Design Tokens - "Engineering Field Notes"
 *
 * Einzige Quelle fuer Farben, Typografie, Raster und Abstaende.
 * Werte werden nicht in anderen Dateien wiederholt.
 *
 * Hinweis zu Breakpoints: CSS Custom Properties sind in Media Queries nicht
 * verwendbar. Die Breakpoint-Werte sind hier als Referenz dokumentiert und
 * in layout.css/components.css als Literale gesetzt.
 */

:root {
    /* Farben - freigegebene Palette */
    --canvas: #F4F1EA;
    --surface: #FFFEFA;
    --ink: #171A1D;
    --ink-soft: #3E464A;
    --line: #CFC9BD;
    --petrol: #25636B;
    --signal-copper: #C84A22;
    --signal-copper-deep: #963516;
    --mist: #E6E4DD;
    --focus: #0E6A78;

    /* Abgeleitete Rollen */
    --color-background: var(--canvas);
    --color-text: var(--ink);
    --color-text-muted: var(--ink-soft);
    --color-border: var(--line);
    --color-accent: var(--petrol);
    --color-accent-contrast: #FFFFFF;
    --color-highlight: var(--signal-copper);
    --color-inverse-background: var(--ink);
    --color-inverse-text: var(--canvas);
    --color-inverse-muted: #B9B5AC;

    /* Typografie
     * Schriften werden selbst gehostet (resources/fonts/, siehe README).
     * Solange keine Dateien vorliegen, greifen die Fallback-Stacks. */
    --font-sans: Manrope, Arial, sans-serif;
    --font-serif: "Source Serif 4", Georgia, serif;
    --font-mono: "IBM Plex Mono", Consolas, monospace;

    /*
     * Schriftgroessen skalieren fluid zwischen Mobil- und Desktopwert.
     * clamp() ersetzt die frueheren Einzelwerte je Breakpoint: Es gibt keine
     * Sprungstellen mehr, und jede Groesse ist an genau einer Stelle definiert.
     *
     * Die Mindestwerte sind so gewaehlt, dass auch auf 390px nichts wie
     * Kleindruck wirkt - insbesondere die Monospace-Groessen, die optisch
     * kleiner laufen als Sans oder Serife.
     */
    --font-size-display: clamp(2.5rem, 1.42rem + 4.5vw, 4rem);          /* 40 → 64px */
    --font-size-headline-xl: clamp(1.875rem, 1.2rem + 2.8vw, 3rem);     /* 30 → 48px */
    --font-size-headline-lg: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);  /* 24 → 34px */
    --font-size-headline-md: clamp(1.25rem, 1.05rem + 0.85vw, 1.625rem);/* 20 → 26px */
    --font-size-headline-sm: clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);/* 18 → 22px */
    --font-size-body-lg: clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);    /* 18 → 22px */
    --font-size-body: clamp(1.0625rem, 1.01rem + 0.24vw, 1.1875rem);    /* 17 → 19px */
    --font-size-label: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);    /* 14 → 15px */
    --font-size-meta: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);      /* 13 → 14px */

    --line-height-tight: 1.1;
    --line-height-heading: 1.3;
    --line-height-body: 1.6;

    --letter-spacing-display: -0.02em;
    --letter-spacing-label: 0.08em;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Raster und Breiten */
    --content-width: 84rem;   /* 1344px - maximale Gesamtbreite */
    --intro-width: 48rem;     /* 768px  - Einleitungstexte auf Uebersichtsseiten */
    --reading-width: 46rem;   /* 736px  - Fliesstext in Artikeln */
    --gutter: 2rem;           /* 32px */

    /* Abstandsraster, Basiseinheit 4px */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-24: 6rem;     /* 96px */
    --space-32: 8rem;     /* 128px */

    --page-margin: var(--space-6);           /* mobil, ~20-24px */
    --page-margin-desktop: var(--space-16);  /* 64px */

    /*
     * Vertikaler Rhythmus.
     *
     * Diese vier Werte ersetzen die zuvor ueber Layout- und Seitenregeln
     * verstreuten Einzelabstaende. Sie skalieren fluid mit der Viewportbreite,
     * damit zwischen 768px und 1440px keine unmotiviert grossen Leerflaechen
     * entstehen.
     *
     * --space-page-top   Abstand Header -> Seiten-Intro
     * --space-section    vertikaler Innenabstand einer Sektion
     * --space-section-compact  fuer Sektionen mit wenig Inhalt
     * --space-content    Intro -> erster Inhaltsblock
     */
    --space-page-top: clamp(2.5rem, 1.4rem + 3.2vw, 5rem);        /* 40 → 80px */
    --space-section: clamp(4rem, 2.2rem + 5vw, 7.5rem);           /* 64 → 120px */
    --space-section-compact: clamp(3rem, 1.9rem + 3.2vw, 5rem);   /* 48 → 80px */
    --space-content: clamp(2.5rem, 1.7rem + 2.2vw, 4rem);         /* 40 → 64px */

    /*
     * Systemdiagramme.
     *
     * Eigene Rollen, damit dieselbe SVG-Komposition auf hellem Grund und auf
     * der Graphitflaeche verwendet werden kann (siehe .section--inverse).
     */
    --diagram-canvas: var(--canvas);
    --diagram-surface: var(--surface);
    --diagram-recessed: var(--mist);
    --diagram-line: var(--line);
    --diagram-ink: var(--ink);
    --diagram-muted: var(--ink-soft);
    --diagram-accent: var(--petrol);
    --diagram-highlight: var(--signal-copper);

    /* Formen - das Designsystem ist bewusst kantig */
    --radius: 0;
    --border-hairline: 1px solid var(--color-border);

    /* Fokus */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;

    /* Mindestgroesse fuer Touchziele */
    --touch-target: 2.75rem; /* 44px */

    /* Breakpoints (Referenzwerte, siehe Hinweis oben)
     * --breakpoint-sm: 36rem;   576px
     * --breakpoint-md: 48rem;   768px
     * --breakpoint-lg: 62rem;   992px
     * --breakpoint-xl: 75rem;  1200px */
}

/* --- fonts.css --- */
/*
 * Selbst gehostete Schriften.
 *
 * Es werden ausschliesslich lokale Dateien aus resources/fonts/ geladen.
 * Keine Verbindung zu fonts.googleapis.com oder fonts.gstatic.com.
 *
 * Die Pfade sind relativ zu public/assets/app.css; scripts/build-assets.php
 * kopiert resources/fonts/ nach public/assets/fonts/.
 *
 * font-display: swap - der Text ist sofort im Fallback lesbar und wird beim
 * Eintreffen der Schrift ausgetauscht. Das haelt den LCP niedrig.
 *
 * Lizenz: SIL Open Font License, siehe resources/fonts/OFL*.txt
 */

/* --- Manrope (Ueberschriften, Navigation, Buttons) ---------------------- */

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/manrope-v20-latin-regular.b1c982f4.woff2") format("woff2");
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/manrope-v20-latin-600.b379e448.woff2") format("woff2");
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/manrope-v20-latin-700.7f827a6d.woff2") format("woff2");
}

/* --- Source Serif 4 (Fliesstext) ---------------------------------------- */

@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/source-serif-4-v14-latin-regular.975772e1.woff2") format("woff2");
}

@font-face {
    font-family: "Source Serif 4";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/source-serif-4-v14-latin-italic.4982d176.woff2") format("woff2");
}

@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/source-serif-4-v14-latin-600.5acb0ce5.woff2") format("woff2");
}

@font-face {
    font-family: "Source Serif 4";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/source-serif-4-v14-latin-600italic.3bf5bc56.woff2") format("woff2");
}

/* 700 deckt <strong> im redaktionellen Fliesstext ab. */
@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/source-serif-4-v14-latin-700.f2026255.woff2") format("woff2");
}

@font-face {
    font-family: "Source Serif 4";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/source-serif-4-v14-latin-700italic.cbe71407.woff2") format("woff2");
}

/* --- IBM Plex Mono (technische Labels, Metadaten, Code) ----------------- */

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-v20-latin-regular.efc35692.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-v20-latin-500.40934d21.woff2") format("woff2");
}

/* --- base.css --- */
/*
 * Basisstile: Reset-Anteile, Typografie, Fokus, Fliesstext.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-serif);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 var(--space-4);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    color: var(--color-text);

    /*
     * Lange deutsche Komposita ("Datenmodellentscheidung") passen in schmalen
     * Spalten nicht in eine Zeile und brechen von sich aus nicht um - die
     * Ueberschrift schoebe sonst die ganze Seite seitlich heraus.
     *
     * hyphens: auto trennt sprachrichtig (das lang-Attribut steht am <html>);
     * overflow-wrap ist die Rueckfallebene, wenn keine Trennstelle existiert.
     */
    hyphens: auto;
    overflow-wrap: break-word;
}

/*
 * Die Groessen skalieren ueber clamp() (siehe tokens.css). Es gibt deshalb
 * keine Breakpoint-Varianten mehr - jede Groesse ist an genau einer Stelle
 * definiert und waechst stufenlos mit der Viewportbreite.
 */
h1 {
    font-size: var(--font-size-display);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-display);
    font-weight: var(--font-weight-bold);
}

h2 {
    font-size: var(--font-size-headline-lg);
}

h3 {
    font-size: var(--font-size-headline-sm);
}

p {
    margin: 0 0 var(--space-6);
    overflow-wrap: break-word;
}

a {
    color: var(--color-accent);
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--color-highlight);
}

/*
 * Sichtbarer Fokus. Der Ring erscheint nur bei Tastaturbedienung,
 * bleibt dort aber immer sichtbar - er wird nirgends entfernt.
 */
:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus);
    outline-offset: var(--focus-ring-offset);
}

img {
    max-width: 100%;
    height: auto;
}

code,
pre,
kbd,
samp {
    font-family: var(--font-mono);
    font-size: 0.9375em;
}

code {
    background-color: var(--mist);
    padding: 0.1em 0.35em;
}

pre {
    background-color: var(--mist);
    border-left: 2px solid var(--color-accent);
    padding: var(--space-4);
    overflow-x: auto;
}

pre code {
    background: none;
    padding: 0;
}

blockquote {
    margin: 0 0 var(--space-6);
    padding-left: var(--space-4);
    border-left: 2px solid var(--color-highlight);
    color: var(--color-text-muted);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-6);
    font-size: var(--font-size-label);
    font-family: var(--font-sans);
    line-height: 1.5;
}

th,
td {
    border-bottom: var(--border-hairline);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    vertical-align: top;
}

th {
    font-weight: var(--font-weight-semibold);
}

hr {
    border: 0;
    border-top: var(--border-hairline);
    margin: var(--space-12) 0;
}

/* Nur fuer Screenreader sichtbar. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*
 * Bewegungsreduktion respektieren. Das Projekt verwendet ohnehin keine
 * dekorativen Animationen; diese Regel sichert kuenftige Ergaenzungen ab.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- layout.css --- */
/*
 * Seitenraster, Sektionen und das gemeinsame Seiten-Intro.
 *
 * Bootstrap ist bewusst nicht eingebunden (siehe README): Das benoetigte
 * Layout kommt mit CSS Grid und Flexbox aus.
 */

/*
 * <main> ist ausschliesslich Landmark und Container.
 *
 * Der vertikale Abstand entsteht allein in den Sektionen. Frueher besass
 * <main> zusaetzlich eigenes Padding - zusammen mit dem Sektionsabstand
 * ergab das auf jeder Unterseite rund 224px Leerraum zwischen Navigation
 * und Seiten-Intro. Genau eine Ebene ist fuer den Abstand zustaendig.
 */
.main {
    display: block;
}

/* --- Sektionen ----------------------------------------------------------- */

.section {
    border-bottom: var(--border-hairline);
}

.section__inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-section) var(--page-margin);
}

@media (min-width: 62rem) {
    .section__inner {
        padding-left: var(--page-margin-desktop);
        padding-right: var(--page-margin-desktop);
    }
}

/* Sektionen mit wenig Inhalt brauchen keine volle Hoehe. */
.section--compact > .section__inner {
    padding-top: var(--space-section-compact);
    padding-bottom: var(--space-section-compact);
}

/*
 * Die erste Sektion einer Unterseite schliesst bewusst enger an die
 * Navigation an: Der Inhalt soll Luft haben, aber sichtbar zum Header
 * gehoeren.
 */
.section--intro > .section__inner {
    padding-top: var(--space-page-top);
    padding-bottom: 0;
}

.section--intro {
    border-bottom: 0;
}

/*
 * Der Abstand zwischen Intro und erstem Inhaltsblock stammt allein aus
 * .page-intro (--space-content). Ohne diese Regel addierte die Folgesektion
 * ihr eigenes oberes Padding, und der Abstand waere doppelt so gross wie
 * komponiert - dieselbe Ursache wie zuvor zwischen Header und Intro.
 */
.section--intro + .section > .section__inner {
    padding-top: 0;
}

/* Asymmetrisch: Sektionskopf links, Inhalt rechts. */
@media (min-width: 62rem) {
    .section__inner--split {
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        gap: var(--gutter) var(--space-16);
        align-items: start;
    }
}

/* --- Seiten-Intro -------------------------------------------------------- */

/*
 * Gemeinsames Intro aller Unterseiten.
 *
 * Reihenfolge ist immer: Brotkrumen, technisches Label, H1, Lead, optionaler
 * Fliesstext. Varianten steuern ausschliesslich die Breite bzw. die
 * Spaltenaufteilung - nie die Reihenfolge.
 */
.page-intro {
    padding-bottom: var(--space-content);
}

.page-intro__meta {
    margin: 0 0 var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--font-size-label);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-accent);
}

.page-intro__title {
    max-width: 20ch;
    margin-bottom: var(--space-6);
    font-size: var(--font-size-headline-xl);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-display);
}

.page-intro__lead {
    max-width: var(--intro-width);
    margin-bottom: 0;
    font-size: var(--font-size-body-lg);
    color: var(--color-text-muted);
}

.page-intro__body {
    max-width: var(--intro-width);
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: var(--border-hairline);
}

.page-intro__body > :last-child {
    margin-bottom: 0;
}

/* Artikel-Intro: schmaler, weil der Artikelkoerper ebenfalls schmal ist. */
.page-intro--article .page-intro__title,
.page-intro--article .page-intro__lead {
    max-width: var(--reading-width);
}

@media (min-width: 62rem) {
    /*
     * Traegt der Artikelkopf Eckdaten, wird er zweispaltig - Titel und Lead
     * behalten dabei ihre Lesebreite, die Eckdaten nutzen die Flaeche rechts.
     * Ohne :has()-Unterstuetzung stapeln beide Bloecke; das bleibt lesbar.
     */
    .page-intro--article:has(.artifact) {
        display: grid;
        grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
        gap: var(--space-16);
        align-items: start;
    }

    .page-intro--article:has(.artifact) .artifact {
        margin-top: 0;
    }
}

@media (min-width: 62rem) {
    /*
     * Split: Intro links, kontextuelles Artefakt rechts. Beide Spalten
     * beginnen an derselben oberen Kante, damit der Uebergang zum
     * darunterliegenden Raster ablesbar bleibt.
     */
    .page-intro--split {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--space-16);
        align-items: start;
    }

    .page-intro--split .page-intro__lead {
        max-width: none;
    }

    /* Breite Variante: das Intro nutzt die volle Rasterbreite. */
    .page-intro--wide .page-intro__lead {
        max-width: var(--intro-width);
    }

    .page-intro--article .page-intro__title {
        font-size: var(--font-size-headline-lg);
    }
}

/* --- Kontextuelles Artefakt ---------------------------------------------- */

/*
 * Gemeinsamer Rahmen aller Intro-Artefakte: Flaeche, Akzentlinie, Mono-Label,
 * Abstaende. Der Inhalt variiert je Seitentyp - das ist Absicht.
 *
 * Auf schmalen Displays steht das Artefakt unter dem Intro und nie zwischen
 * H1 und Lead.
 */
.artifact {
    margin-top: var(--space-8);
    padding: var(--space-6);
    background-color: var(--surface);
    border-left: 2px solid var(--color-accent);
}

@media (min-width: 62rem) {
    .artifact {
        margin-top: 0;
    }
}

.artifact__label {
    margin-bottom: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.artifact__text {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-label);
    line-height: 1.55;
    color: var(--color-text-muted);
}

.artifact__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: artifact;
}

.artifact__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: var(--border-hairline);
    font-size: var(--font-size-label);
}

.artifact__item:first-child {
    border-top: 0;
    padding-top: 0;
}

/* Nummerierte Abfolge: die Ziffer ersetzt den Listenpunkt. */
.artifact--ordered .artifact__item {
    counter-increment: artifact;
}

.artifact--ordered .artifact__item::before {
    content: counter(artifact, decimal-leading-zero) " /";
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    color: var(--color-highlight);
}

.artifact__term {
    flex: 0 0 auto;
    min-width: 5.5rem;
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-accent);
}

.artifact__value,
.artifact__link {
    display: inline-flex;
    align-items: center;
    flex: 1 1 8rem;
    font-family: var(--font-sans);
    color: var(--color-text-muted);
}

/* Links sind eigenstaendige Ziele und brauchen die volle Mindesthoehe. */
.artifact__link {
    min-height: var(--touch-target);
    color: var(--color-text);
    text-decoration: none;
}

/*
 * Nur in gemischten Listen bekommen auch die reinen Textzeilen diese Hoehe,
 * damit die Abstaende nicht springen. Reine Textlisten - etwa die
 * Technologien in der Kontextspalte - bleiben kompakt.
 */
.artifact__list:has(.artifact__link) .artifact__value {
    min-height: var(--touch-target);
}

.artifact__link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

/* Diagramm-Variante traegt ihren eigenen Rahmen; der Kasten entfaellt. */
.artifact--diagram {
    padding: 0;
    background: none;
    border-left: 0;
}

.artifact--diagram .artifact__figure .diagram {
    margin: 0;
}

/* --- Abschnittsleiste (Über EicDevCon) ----------------------------------- */

@media (min-width: 62rem) {
    /*
     * Volle Containerbreite ohne den Fliesstext zu verbreitern: links die
     * Abschnittsleiste, rechts der Text in Lesebreite.
     */
    .section__inner--rail {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
        gap: var(--space-16);
        align-items: start;
    }
}

.section-rail {
    margin-bottom: var(--space-8);
}

.section-rail__heading {
    margin-bottom: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.section-rail__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-rail__item {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-top: var(--border-hairline);
}

.section-rail__number {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    color: var(--color-highlight);
}

.section-rail__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    font-family: var(--font-sans);
    font-size: var(--font-size-label);
    color: var(--color-text);
    text-decoration: none;
}

.section-rail__link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

/* --- Fliesstext ---------------------------------------------------------- */

.prose {
    max-width: var(--reading-width);
}

.prose > :last-child {
    margin-bottom: 0;
}

.prose ul,
.prose ol {
    margin: 0 0 var(--space-6);
    padding-left: var(--space-6);
}

.prose li {
    margin-bottom: var(--space-2);
}

.prose h2 {
    margin-top: var(--space-12);
}

.prose h3 {
    margin-top: var(--space-8);
}

/* --- Detailseiten-Raster -------------------------------------------------- */

/*
 * Fachliche Detailseiten (Leistungen, Produkte, Projekte) nutzen die
 * Containerbreite als Ganzes: Hauptinhalt links, Kontextspalte rechts.
 *
 * Der Fliesstext behaelt dabei seine Lesebreite - die Spalte wird breiter,
 * nicht die Zeile. Strukturierte Inhalte wie Tabellen und Codebloecke duerfen
 * die volle Hauptspalte nutzen.
 *
 * Langformartikel und Rechtsseiten verwenden dieses Raster bewusst nicht.
 */
.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-content);
}

@media (min-width: 62rem) {
    .detail-layout {
        grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
        gap: var(--space-16);
        align-items: start;
    }

    /* Ohne Kontextmodule bekommt der Hauptinhalt die volle Breite. */
    .detail-layout--single {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * Der Fliesstext bleibt ergonomisch, auch wenn die Spalte breiter ist.
 * Tabellen und Codebloecke sind davon ausgenommen: Sie profitieren von der
 * zusaetzlichen Breite und scrollen sonst unnoetig frueh.
 */
.detail-layout__main .prose > * {
    max-width: var(--reading-width);
}

.detail-layout__main .prose > table,
.detail-layout__main .prose > .code-block,
.detail-layout__main .prose > .callout {
    max-width: none;
}

.detail-layout__main .prose {
    max-width: none;
}

/*
 * Kontextspalte. Die Module teilen die visuelle Sprache der Intro-Artefakte;
 * es kommt bewusst keine zweite Kartenoptik hinzu.
 */
.detail-layout__rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

@media (min-width: 62rem) {
    .detail-layout__rail {
        padding-left: var(--space-8);
        border-left: var(--border-hairline);
    }
}

.detail-layout__rail .artifact {
    margin-top: 0;
}

/* Verwandte Inhalte schliessen die Seite ueber die volle Breite ab. */
.detail-layout__related:not(:empty) {
    margin-top: var(--space-section-compact);
}

/*
 * Coverbild eines Artikels ueber die volle Containerbreite.
 *
 * Technische Diagramme muessen lesbar bleiben. Sie werden deshalb nicht in
 * die Kontextspalte oder die Textspalte gezwungen, sondern stehen zwischen
 * Kopf und Raster in voller Breite.
 */
.article-cover {
    margin-bottom: var(--space-content);
}

.article-cover .figure {
    max-width: none;
    margin-bottom: 0;
}

/*
 * Das Inhaltsverzeichnis steht in der Kontextspalte und traegt dort keinen
 * eigenen Flaechenhintergrund mehr - der Rahmen der Spalte genuegt.
 * Bewusst ohne position: sticky.
 */
.detail-layout__rail .toc {
    margin-bottom: 0;
    padding: 0;
    background: none;
}

.detail-layout__rail .toc__heading {
    color: var(--color-accent);
}

.detail-layout__rail .toc__item {
    padding: 0;
    border-top: var(--border-hairline);
}

.detail-layout__rail .toc__item:first-child {
    border-top: 0;
}

.detail-layout__rail .toc__link {
    display: flex;
    align-items: center;
    min-height: var(--touch-target);
    padding: var(--space-2) 0;
    font-size: var(--font-size-label);
    border-bottom: 0;
}

.detail-layout__rail .toc__item--level-3 .toc__link {
    padding-left: var(--space-4);
    color: var(--color-text-muted);
}

/* --- components.css --- */
/*
 * Komponenten: Skip Link, Header, Navigation, Sprachumschalter, Footer,
 * Buttons, Listen, technische Labels.
 *
 * Gestaltungsprinzipien des Designsystems: keine Radien, keine Schatten,
 * Tiefe entsteht ueber 1px-Linien und Flaechenwechsel.
 */

/* --- Skip Link ---------------------------------------------------------- */

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100%;
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-accent);
    color: var(--color-accent-contrast);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.skip-link:focus {
    top: var(--space-4);
    color: var(--color-accent-contrast);
}

/* --- Wortmarke ---------------------------------------------------------- */

.wordmark {
    display: inline-flex;
    align-items: baseline;
    /* Die Wortmarke ist im Header ein eigenstaendiges Ziel. */
    min-height: var(--touch-target);
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-headline-sm);
    letter-spacing: -0.01em;
    color: var(--color-text);
    text-decoration: none;
}

.wordmark__suffix {
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text-muted);
    text-transform: uppercase;
}

/*
 * Im Footer steht die vollstaendige Firmierung. "UG (haftungsbeschraenkt)" ist
 * zu lang, um neben der Wortmarke zu stehen: Der Zusatz bricht dort innerhalb
 * seines eigenen Flex-Elements um und erscheint eingerueckt. Im Footer wird er
 * deshalb als eigene, linksbuendige Zeile gesetzt - das entspricht auch dem
 * technischen Label-Charakter der Mono-Schrift.
 */
.wordmark--footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.wordmark--footer .wordmark__name {
    color: var(--color-inverse-text);
}

.wordmark--footer .wordmark__suffix {
    color: var(--color-inverse-muted);
}

/* --- Header ------------------------------------------------------------- */

.site-header {
    border-bottom: var(--border-hairline);
    background-color: var(--color-background);
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-4) var(--page-margin);
}

/*
 * Mobile: Das Menue ist im Markup vorhanden und wird ueber das
 * aria-expanded des Buttons ein- und ausgeblendet. Ohne JavaScript bleibt
 * es ausgeklappt, damit die Navigation immer bedienbar ist.
 */
.site-header__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    width: 100%;
    padding-top: var(--space-4);
    border-top: var(--border-hairline);
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-target);
    min-width: var(--touch-target);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: var(--border-hairline);
    border-radius: var(--radius);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: var(--font-size-label);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    cursor: pointer;
}

.nav-toggle__bars {
    display: block;
    width: 1rem;
    height: 1px;
    background-color: currentColor;
    box-shadow: 0 -4px 0 currentColor, 0 4px 0 currentColor;
}

/*
 * Nur bei aktivem JavaScript wird das Menue eingeklappt. Ohne JavaScript
 * bleibt es sichtbar und vollstaendig bedienbar.
 * Die Sichtbarkeit entscheidet CSS - JavaScript setzt lediglich data-open
 * und aria-expanded, es gibt keine Breakpoint-Erkennung im Skript.
 */
@media (max-width: 61.999rem) {
    .js .site-header__panel {
        display: none;
    }

    .js .site-header__panel[data-open="true"] {
        display: flex;
    }
}

@media (min-width: 62rem) {
    .nav-toggle {
        display: none;
    }

    .site-header__panel {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        width: auto;
        padding-top: 0;
        border-top: 0;
        margin-left: var(--space-6);
    }

    /*
     * Zwischen 62rem und 75rem ist die Zeile knapp: Wortmarke, sechs
     * Menuepunkte, Sprachumschalter und CTA muessen nebeneinander passen.
     * Abstaende und Innenabstand sind hier deshalb enger gesetzt und werden
     * erst ab 75rem auf das volle Raster angehoben.
     */
    .site-header__inner {
        flex-wrap: nowrap;
        padding: var(--space-4) var(--space-6);
    }
}

@media (min-width: 75rem) {
    .site-header__inner {
        padding: var(--space-4) var(--page-margin-desktop);
    }

    .site-header__panel {
        margin-left: var(--space-12);
    }

    .site-nav__list {
        gap: var(--space-8);
    }

    .site-header__actions {
        gap: var(--space-6);
    }
}

/* --- Hauptnavigation ---------------------------------------------------- */

.site-nav__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__link {
    display: flex;
    align-items: center;
    min-height: var(--touch-target);
    padding: var(--space-2) 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-label);
    color: var(--color-text-muted);
    text-decoration: none;
}

.site-nav__link:hover {
    color: var(--color-accent);
}

/*
 * Die aktive Seite wird nicht allein ueber Farbe markiert, sondern
 * zusaetzlich ueber eine Linie und aria-current.
 */
.site-nav__link--current {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    box-shadow: inset 0 -2px 0 var(--color-highlight);
}

@media (min-width: 62rem) {
    .site-nav__list {
        flex-direction: row;
        gap: var(--space-4);
    }
}

/* --- Header-Aktionen ---------------------------------------------------- */

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* --- Sprachumschalter --------------------------------------------------- */

.language-switcher__list {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
}

.language-switcher__item + .language-switcher__item::before {
    content: "/";
    margin-right: var(--space-2);
    color: var(--color-border);
}

.language-switcher__current,
.language-switcher__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    padding: 0 var(--space-1);
}

.language-switcher__current {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    box-shadow: inset 0 -2px 0 var(--color-highlight);
}

.language-switcher__link {
    color: var(--color-text-muted);
    text-decoration: none;
}

.language-switcher__link:hover {
    color: var(--color-accent);
}

/* --- Buttons ------------------------------------------------------------ */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target);
    padding: var(--space-3) var(--space-8);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
}

.button--primary {
    background-color: var(--color-accent);
    color: var(--color-accent-contrast);
}

.button--primary:hover {
    background-color: var(--color-text);
    color: var(--color-accent-contrast);
}

.button--secondary {
    background-color: transparent;
    border-color: var(--color-text);
    color: var(--color-text);
}

.button--secondary:hover {
    background-color: var(--surface);
    color: var(--color-text);
}

/* --- Technische Labels -------------------------------------------------- */

.technical-index {
    margin: 0 0 var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Technische Metazeile, z. B. "PHP · Python · TypeScript". */
/*
 * Technische Metazeile. Bewusst Label- statt Meta-Groesse: Monospace laeuft
 * optisch kleiner, und diese Zeile traegt Inhalt, keine Randnotiz.
 */
.technical-meta {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-label);
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text-muted);
}

.note {
    max-width: var(--reading-width);
    padding: var(--space-4);
    background-color: var(--mist);
    font-family: var(--font-sans);
    font-size: var(--font-size-label);
    color: var(--color-text-muted);
}

.debug {
    margin-top: var(--space-12);
    font-size: var(--font-size-meta);
    white-space: pre-wrap;
}

/* --- Eintragslisten ----------------------------------------------------- */

/* Kein Oberrand: Im Split-Layout beginnt die Liste auf derselben Achse wie
   der Sektionskopf daneben - wie .field-list, .steps und .record-list auch. */
.entry-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--border-hairline);
}

.entry {
    max-width: var(--reading-width);
    padding: var(--space-8) 0;
    border-bottom: var(--border-hairline);
}

.entry__title {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-headline-sm);
}

.entry__link {
    color: var(--color-text);
    text-decoration: none;
}

.entry__link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.entry__description {
    margin: 0;
    color: var(--color-text-muted);
}

/* --- Artikel ------------------------------------------------------------ */

.article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: var(--space-6) 0 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.figure {
    max-width: var(--content-width);
    margin: 0 0 var(--space-12);
}

.figure__caption {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding-top: var(--space-2);
    border-top: var(--border-hairline);
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    color: var(--color-text-muted);
}

/*
 * Die Bildunterschrift steht auf einer eigenen Zeile und in der Lauf-, nicht
 * der Monospace-Schrift: Sie ist ein Satz, waehrend Herkunft und KI-Hinweis
 * daneben Kurzangaben bleiben.
 */
.figure__description {
    flex: 1 0 100%;
    font-family: var(--font-sans);
    font-size: var(--font-size-label);
    line-height: 1.5;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-12) 0 0;
    padding: 0;
    list-style: none;
}

.tag {
    padding: var(--space-1) var(--space-3);
    border: var(--border-hairline);
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
    background-color: var(--color-inverse-background);
    color: var(--color-inverse-text);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-16) var(--page-margin);
}

@media (min-width: 48rem) {
    .site-footer__inner {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 62rem) {
    .site-footer__inner {
        grid-template-columns: 1.5fr repeat(5, 1fr);
        padding: var(--space-24) var(--page-margin-desktop);
    }
}

.site-footer__heading {
    margin-bottom: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-highlight);
}

.site-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    font-size: var(--font-size-label);
    color: var(--color-inverse-text);
    text-decoration: none;
}

.site-footer__link:hover {
    color: var(--color-highlight);
    text-decoration: underline;
}

.site-footer .language-switcher__current {
    color: var(--color-inverse-text);
}

.site-footer .language-switcher__link {
    color: var(--color-inverse-muted);
}

.site-footer .language-switcher__link:hover {
    color: var(--color-highlight);
}

.site-footer .language-switcher__item + .language-switcher__item::before {
    color: var(--color-inverse-muted);
}

/* Externe Links werden nicht allein ueber Farbe gekennzeichnet. */
.link--external::after {
    content: " ↗";
    font-family: var(--font-mono);
}

/* --- Einwilligung -------------------------------------------------------- */

/*
 * Dezente Leiste am unteren Rand, kein Modal.
 *
 * Sie fesselt den Fokus nicht und deckt den Inhalt nicht zu; die Seite
 * bleibt waehrend der Entscheidung vollstaendig lesbar und bedienbar.
 *
 * Im Dokument steht sie frueh - direkt nach dem Sprunglink -, damit sie per
 * Tastatur sofort erreichbar ist. Die Position am unteren Rand ist rein
 * visuell.
 */
.consent {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    /* Unter dem Sprunglink (100), damit dieser erreichbar bleibt. */
    z-index: 90;
    background-color: var(--canvas);
    border-top: 2px solid var(--color-accent);
}

.consent[hidden] {
    display: none;
}

.consent__inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-6) var(--page-margin);
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 62rem) {
    .consent__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-12);
        padding-left: var(--page-margin-desktop);
        padding-right: var(--page-margin-desktop);
    }
}

.consent__heading {
    margin-bottom: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--font-size-headline-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.consent__body {
    max-width: var(--reading-width);
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-label);
    color: var(--color-text-muted);
}

.consent__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

/*
 * Beide Schaltflaechen sind bewusst gleich gestaltet: gleiche Groesse,
 * gleicher Kontrast, gleiche Reihenfolgegewichtung. Die Ablehnung wird
 * weder versteckt noch optisch abgewertet.
 */
.consent__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target);
    padding: var(--space-3) var(--space-6);
    background-color: transparent;
    border: 1px solid var(--color-text);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    cursor: pointer;
}

.consent__button:hover {
    background-color: var(--surface);
}

.consent__link {
    font-family: var(--font-sans);
    font-size: var(--font-size-label);
    color: var(--color-text-muted);
}

/* Fussleistenschalter: sieht aus wie die Links daneben, ist aber ein Button. */
.site-footer__link--button {
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: var(--font-size-label);
    text-align: left;
    cursor: pointer;
}

/* --- Prozessdarstellung -------------------------------------------------- */

/*
 * Abfolge von Arbeitsschritten oder Verarbeitungsstufen.
 *
 * Anders als die Systemgrafiken kein SVG: Acht bis zehn Beschriftungen auf
 * einer festen Zeichenflaeche waeren auf einem Telefon nur noch eine
 * verkleinerte, unlesbare Desktopgrafik. Als Raster bricht die Darstellung
 * um - eine Spalte mobil, mehrere auf groesseren Flaechen.
 *
 * Die Reihenfolge steckt in der Liste selbst. Deshalb gibt es keine
 * Pfeilzeichen: Sie waeren beim Umbruch falsch ausgerichtet und wuerden
 * vorgelesen, ohne etwas beizutragen. Die sichtbare Nummerierung uebernimmt
 * ihre Aufgabe und funktioniert in jeder Breite.
 */
.process {
    padding: var(--space-8);
    background-color: var(--surface);
    border: var(--border-hairline);
}

.process__title {
    margin-bottom: var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.process__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 40rem) {
    .process__list {
        /* Bricht von selbst um, statt die Spalten zu quetschen. Die
           Mindestbreite ist so gewaehlt, dass lange Begriffe wie
           "KLASSIFIKATION" in der Regel einzeilig stehen - Silbentrennung
           in Versalien liest sich unruhig. */
        grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
    }
}

.process__step {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background-color: var(--canvas);
    /* Die Kante links traegt dieselbe Bedeutung wie die Nummer - die
       Zugehoerigkeit haengt nicht an der Farbe allein. */
    border-left: 2px solid var(--color-accent);
}

.process__index {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    color: var(--color-highlight);
}

.process__label {
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text);
    /* Lange Begriffe wie "KLASSIFIKATION" duerfen umbrechen statt die
       Spalte zu sprengen. */
    overflow-wrap: break-word;
    hyphens: auto;
}

/*
 * Das Ziel der Kette, nicht ihre letzte Stufe. Die Unterscheidung traegt die
 * Struktur - eigener Absatz ausserhalb der Liste, kraeftigere Kante -, nicht
 * die Farbe allein.
 */
.process__target {
    margin: var(--space-6) 0 0;
    padding: var(--space-4);
    background-color: var(--canvas);
    border-left: 4px solid var(--color-highlight);
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text);
}

/* --- pages.css --- */
/*
 * Seitenspezifische Strukturen: Sektionen, Hero, Arbeitsfelder, Stack,
 * Projektlisten, Artikel und Wissensbereich.
 *
 * Gestaltungsprinzipien des Designsystems "Engineering Field Notes":
 * keine Radien, keine Schatten, Tiefe ueber 1px-Linien und Flaechenwechsel,
 * grosszuegiger vertikaler Rhythmus, asymmetrische Spalten.
 */

/* --- Sektionsflaechen und -koepfe ---------------------------------------- */

.section--surface {
    background-color: var(--surface);
}

.section--inverse {
    background-color: var(--color-inverse-background);
    color: var(--color-inverse-text);

    /* Diagramme auf der Graphitflaeche verwenden dieselbe Komposition. */
    --diagram-canvas: #22262a;
    --diagram-surface: #1c2023;
    --diagram-recessed: #2b3034;
    --diagram-line: #4a5054;
    --diagram-ink: #F4F1EA;
    --diagram-muted: #B9B5AC;
    --diagram-accent: #4E9AA5;
    --diagram-highlight: #E0733F;
}

.section--inverse .section-header__headline,
.section--inverse .record__title,
.section--inverse .case__title {
    color: var(--color-inverse-text);
}

.section--inverse .section-header__lead,
.section--inverse .technical-meta,
.section--inverse .record__kind,
.section--inverse .case__description {
    color: var(--color-inverse-muted);
}

.section--inverse .record,
.section--inverse .record-list,
.section--inverse .case {
    border-color: #3a3f43;
}

.section--contact {
    border-bottom: 0;
}

.section__more {
    margin: var(--space-8) 0 0;
}

/* Kleine Zwischenueberschrift im Mono-Stil. */
.section__eyebrow {
    margin-bottom: var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-accent);
}

/* --- Sektionskopf ------------------------------------------------------- */

.section-header {
    margin-bottom: var(--space-content);
}

.section-header__headline {
    max-width: 16ch;
    margin-bottom: var(--space-4);
    font-size: var(--font-size-headline-xl);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-display);
}

.section-header__lead {
    max-width: var(--intro-width);
    margin-bottom: 0;
    font-size: var(--font-size-body);
    color: var(--color-text-muted);
}

@media (min-width: 62rem) {
    /*
     * Der Sektionskopf steht im normalen Dokumentfluss.
     *
     * Bewusst kein position: sticky: In Sektionen ohne Split-Raster - etwa
     * dem Projects-Bereich der Startseite - ist der Kopf ein gewoehnliches
     * Geschwisterelement. Ein angehefteter Kopf bliebe dort stehen, waehrend
     * der Case darunter hindurchscrollt, und beide Textebenen wuerden sich
     * ueberlagern.
     */
    /*
     * Nur im Split-Raster steht der Kopf in einer eigenen Spalte und braucht
     * deshalb keinen unteren Abstand. In Sektionen ohne Split - etwa
     * Projects - bleibt der regulaere Abstand erhalten.
     */
    .section__inner--split > .section-header {
        margin-bottom: 0;
        padding-right: var(--space-8);
    }
}

/* --- Hero --------------------------------------------------------------- */

.section--hero {
    position: relative;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
}

@media (min-width: 62rem) {
    .hero {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: var(--space-12);
        align-items: center;
        min-height: clamp(30rem, 52vh, 40rem);
    }
}

/*
 * Die Spaltenbreite begrenzt die Zeilenlaenge bereits. Ein zusaetzliches
 * ch-Limit wuerde die Headline auf Desktop unnoetig umbrechen.
 */
.hero__headline {
    margin-bottom: var(--space-8);
    font-size: var(--font-size-display);
}

.hero__lead {
    max-width: 36rem;
    padding-left: var(--space-6);
    border-left: 2px solid var(--color-border);
    font-size: var(--font-size-body-lg);
    color: var(--color-text-muted);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

/*
 * Die Hero-Grafik ist auf kleinen Displays nicht lesbar und wird dort
 * ausgeblendet. Ihre Kernaussage steht sichtbar in der Orientierungszeile
 * darunter - es geht keine wesentliche Information verloren.
 */
.hero__diagram {
    display: none;
}

@media (min-width: 62rem) {
    .hero__diagram {
        display: flex;
        align-items: center;
        height: 100%;
        padding-left: var(--space-12);
        border-left: var(--border-hairline);
    }

    /*
     * Das Diagramm fuellt seine Spalte aus und traegt damit sichtbar Gewicht
     * gegen die Headline - es sitzt nicht klein in einer grossen Flaeche.
     */
    .hero__diagram .diagram,
    .hero__diagram .diagram__svg {
        width: 100%;
    }

    .hero__diagram .diagram__svg {
        min-height: clamp(22rem, 30vw, 30rem);
        padding: var(--space-6);
    }
}

.hero__orientation {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-3) var(--page-margin);
    border-top: var(--border-hairline);
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text-muted);
}

@media (min-width: 62rem) {
    .hero__orientation {
        padding-left: var(--page-margin-desktop);
        padding-right: var(--page-margin-desktop);
    }
}

@media (min-width: 62rem) {
    .section--hero > .section__inner {
        padding-top: var(--space-section-compact);
        padding-bottom: var(--space-section-compact);
    }
}

/* --- Diagramme ---------------------------------------------------------- */

.diagram {
    margin: 0 0 var(--space-12);
}

.diagram--hero {
    margin: 0;
}

.diagram__svg {
    display: block;
    width: 100%;
    height: auto;
    background-color: var(--surface);
    border: var(--border-hairline);
}

.diagram__caption {
    padding-top: var(--space-2);
    border-top: var(--border-hairline);
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    color: var(--color-text-muted);
}

/* --- Arbeitsfelder ------------------------------------------------------ */

.field-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--border-hairline);
}

.field {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-8) 0;
    border-bottom: var(--border-hairline);
}

.field__number {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--font-size-label);
    color: var(--color-highlight);
}

.field__title {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-headline-sm);
}

.field__link {
    color: var(--color-text);
    text-decoration: none;
}

.field__link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.field__description {
    margin-bottom: var(--space-3);
    color: var(--color-text-muted);
}

/* --- Positionierung auf der Startseite ----------------------------------- */

/*
 * Der Satz, der die vier Argumente zusammenfasst.
 *
 * Hervorgehoben mit dem Mittel, das die Seite dafuer ohnehin verwendet: der
 * 2px-Linie von .competence und .stack__group. Bewusst kein Kasten und keine
 * eigene Flaeche - daraus soll keine allgemeine Callout-Komponente werden.
 */
.positioning-statement {
    max-width: var(--reading-width);
    margin: var(--space-8) 0 0;
    padding-top: var(--space-6);
    border-top: 2px solid var(--color-text);
    font-size: var(--font-size-headline-sm);
}

/* --- Kompetenz-Stack auf der Startseite ---------------------------------- */

.stack__group + .stack__group {
    margin-top: var(--space-content);
}

.stack__group {
    padding-top: var(--space-6);
    border-top: 2px solid var(--color-text);
}

.stack__label {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-headline-md);
}

.stack__description {
    max-width: 52ch;
    margin-bottom: var(--space-6);
    font-size: var(--font-size-body);
    color: var(--color-text-muted);
}

.stack__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stack__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
    padding: var(--space-3) 0;
    border-top: var(--border-hairline);
}

@media (min-width: 48rem) {
    .stack__item {
        grid-template-columns: 11rem minmax(0, 1fr);
        gap: var(--space-6);
        align-items: baseline;
    }
}

.stack__name {
    font-family: var(--font-mono);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-label);
}

.stack__context {
    font-family: var(--font-sans);
    font-size: var(--font-size-label);
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* --- Kompetenzseite ------------------------------------------------------ */

.competence-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-content);
}

@media (min-width: 62rem) {
    .competence-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-16) var(--space-16);
    }
}

.competence {
    padding-top: var(--space-6);
    border-top: 2px solid var(--color-text);
}

.competence__index {
    margin: 0 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-label);
    color: var(--color-highlight);
}

.competence__title {
    margin-bottom: var(--space-3);
    font-size: var(--font-size-headline-md);
}

.competence__description {
    max-width: 48ch;
    margin-bottom: var(--space-6);
    font-size: var(--font-size-body);
    color: var(--color-text-muted);
}

.competence__list {
    margin: 0;
}

/*
 * Zwei Spalten: links der Name in Monospace, rechts der Einsatzkontext.
 * Die Zeile bleibt dadurch tabellarisch lesbar, ohne wie eine unbearbeitete
 * Spezifikation zu wirken.
 */
.competence__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
    padding: var(--space-3) 0;
    border-top: var(--border-hairline);
}

@media (min-width: 40rem) {
    .competence__row {
        grid-template-columns: 11rem minmax(0, 1fr);
        gap: var(--space-6);
        align-items: baseline;
    }
}

.competence__term {
    font-family: var(--font-mono);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text);
}

.competence__definition {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-label);
    line-height: 1.5;
    color: var(--color-text-muted);
}

/*
 * Die Inhalte, die zu einer Kompetenz gehoeren.
 *
 * Bewusst anders gesetzt als die Technologiezeilen darueber: Der Block ist
 * kein weiterer Eintrag der Liste, sondern ihr Ausgang. Die kraeftigere
 * Trennlinie und der Abstand markieren diesen Wechsel, ohne ein zweites
 * Ueberschriftenniveau in die Karte einzufuehren.
 */
.competence__related {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 2px solid var(--color-text);
}

.competence__related-label {
    margin: 0 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Ab der zweiten Sammlung: Abstand zur Liste der vorherigen. */
.competence__related-list + .competence__related-label {
    margin-top: var(--space-4);
}

.competence__related-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Block statt inline: Die Trefferflaeche eines einzeiligen Eintrags waere
 * sonst nur so hoch wie die Zeile selbst. Das Innenabstandspaar uebernimmt
 * zugleich die Trennung der Eintraege, deshalb kein zusaetzlicher Rand.
 */
.competence__related-link {
    display: block;
    padding: var(--space-1) 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-decoration: none;
}

.competence__related-link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

/* --- Prozessschritte ---------------------------------------------------- */

.steps {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--border-hairline);
}

.step {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-8) 0;
    border-bottom: var(--border-hairline);
}

.step__number {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--font-size-label);
    color: var(--color-highlight);
}

.step__title {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-headline-sm);
}

.step__description {
    margin: 0;
    max-width: var(--reading-width);
    color: var(--color-text-muted);
}

/* --- Datensaetze (Projekte, Sammlungen) --------------------------------- */

.record-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--border-hairline);
}

.record-list--light {
    margin-top: var(--space-12);
}

.record {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-8) 0;
    border-bottom: var(--border-hairline);
}

.record__body {
    flex: 1 1 20rem;
}

.record__title {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-headline-sm);
}

.record__link {
    color: inherit;
    text-decoration: none;
}

.record__link:hover {
    color: var(--color-highlight);
    text-decoration: underline;
}

.record__description {
    margin-bottom: var(--space-3);
    color: var(--color-text-muted);
}

.record__kind {
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* --- Teaser ------------------------------------------------------------- */

.teaser-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--border-hairline);
}

.teaser {
    padding: var(--space-6) 0;
    border-bottom: var(--border-hairline);
}

.teaser--featured {
    padding: var(--space-8);
    background-color: var(--surface);
    border: var(--border-hairline);
}

/* Der hervorgehobene Beitrag traegt sichtbar mehr Gewicht als die Liste. */
.teaser--featured .teaser__title {
    max-width: 22ch;
    font-size: var(--font-size-headline-lg);
}

.teaser--featured .teaser__description {
    font-size: var(--font-size-body-lg);
}

.teaser__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.teaser__category {
    color: var(--color-accent);
}

.teaser__title {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-headline-sm);
}

.teaser__link {
    color: var(--color-text);
    text-decoration: none;
}

.teaser__link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.teaser__description {
    margin: 0;
    max-width: var(--reading-width);
    color: var(--color-text-muted);
}

.teaser--product + .teaser--product {
    margin-top: var(--space-6);
}

/* --- Wissensbereich ----------------------------------------------------- */

.featured {
    margin: var(--space-12) 0;
}

.insights-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
}

@media (min-width: 62rem) {
    .insights-layout {
        grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
        gap: var(--space-16);
        align-items: start;
    }
}


.category-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--border-hairline);
}

.category-list__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: var(--border-hairline);
}

.category-list__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    color: var(--color-text);
    text-decoration: none;
}

.category-list__link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.category-list__count {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    color: var(--color-text-muted);
}

/* --- Artikel ------------------------------------------------------------ */

.article {
    max-width: var(--reading-width);
}



@media (min-width: 62rem) {
}


.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.article-meta__item--updated {
    color: var(--color-accent);
}

/* --- Inhaltsverzeichnis -------------------------------------------------- */

.toc {
    margin-bottom: var(--space-12);
    padding: var(--space-6);
    background-color: var(--mist);
}

.toc__heading {
    margin-bottom: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
}

.toc__item {
    padding: var(--space-1) 0;
}

.toc__item--level-3 {
    padding-left: var(--space-6);
}

.toc__link {
    display: inline-block;
    padding: var(--space-1) 0;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.toc__link:hover {
    color: var(--color-accent);
    border-bottom-color: currentColor;
}

/* --- Hinweisbloecke ----------------------------------------------------- */

.callout {
    margin: var(--space-8) 0;
    padding: var(--space-4) var(--space-6);
    border-left: 3px solid var(--color-accent);
    background-color: var(--surface);
    color: var(--color-text);
}

.callout > :last-child {
    margin-bottom: 0;
}

.callout__label {
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-accent);
}

.callout--risk {
    border-left-color: var(--signal-copper);
}

.callout--risk .callout__label {
    color: var(--signal-copper-deep);
}

.callout--decision {
    border-left-color: var(--ink);
}

.callout--decision .callout__label {
    color: var(--ink);
}

.callout--update {
    border-left-color: var(--line);
}

.callout--update .callout__label {
    color: var(--color-text-muted);
}

/* --- Codebloecke -------------------------------------------------------- */

.code-block {
    margin: var(--space-8) 0;
    border: var(--border-hairline);
    background-color: var(--mist);
}

.code-block__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-bottom: var(--border-hairline);
}

.code-block__language {
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Lange Zeilen scrollen innerhalb des Blocks, nicht die Seite. */
.code-block__pre {
    margin: 0;
    padding: var(--space-4);
    border: 0;
    overflow-x: auto;
    background-color: transparent;
}

.code-copy {
    min-height: var(--touch-target);
    padding: var(--space-1) var(--space-3);
    background: transparent;
    border: var(--border-hairline);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
    cursor: pointer;
}

.code-copy:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* --- Autorenbox --------------------------------------------------------- */

.author-box {
    margin-top: var(--space-16);
    padding: var(--space-6);
    border: var(--border-hairline);
    background-color: var(--surface);
}

.author-box__heading {
    margin-bottom: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.author-box__name {
    margin-bottom: var(--space-1);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-headline-sm);
}

.author-box__role,
.author-box__expertise {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-label);
    font-family: var(--font-sans);
    color: var(--color-text-muted);
}

.author-box__label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
}

.author-box__profiles {
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

/* --- Projektbelege ------------------------------------------------------- */

/*
 * Bildschirmaufnahmen eines Projekts, untereinander statt nebeneinander: Ein
 * Raster wuerde sie zur Galerie machen, hier belegt jede Aufnahme einen
 * anderen Teil der Plattform und will einzeln gelesen werden.
 *
 * Gesetzt wie .related und .references - Haarlinie und Abstand trennen den
 * Block vom Fliesstext, ohne eine eigene Flaeche einzufuehren.
 */
.evidence {
    margin-top: var(--space-16);
    padding-top: var(--space-8);
    border-top: var(--border-hairline);
}

.evidence__heading {
    margin-bottom: var(--space-8);
    font-size: var(--font-size-headline-sm);
}

.evidence .figure {
    max-width: none;
    margin-bottom: var(--space-content);
}

.evidence .figure:last-child {
    margin-bottom: 0;
}

/*
 * Die Aufnahmen zeigen eine dunkle Oberflaeche. Die Haarlinie grenzt sie
 * gegen den hellen Grund ab, damit der Bildrand nicht ausfranst.
 */
.evidence .figure img {
    display: block;
    width: 100%;
    height: auto;
    border: var(--border-hairline);
}

/* --- Referenzprojekte ---------------------------------------------------- */

/*
 * Belege einer Leistung: Screenshot, Einordnung, Beschreibung, Schwerpunkte,
 * Link. Bewusst keine Portfolio-Kachel - kein Schatten, keine Rundung, kein
 * Text ueber dem Bild. Der Aufbau entspricht dem der Arbeitsfelder, nur mit
 * einer Abbildung darueber.
 *
 * Gesetzt wie .related: Haarlinie und Abstand trennen den Block vom Fliesstext
 * darueber, ohne eine eigene Flaeche einzufuehren.
 */
.references {
    margin-top: var(--space-16);
    padding-top: var(--space-8);
    border-top: var(--border-hairline);
}

.references__heading {
    margin-bottom: var(--space-8);
    font-size: var(--font-size-headline-sm);
}

.references__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-content);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 62rem) {
    .references__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-content) var(--space-16);
    }
}

/*
 * Der Screenshot behaelt sein eigenes Seitenverhaeltnis. width und height am
 * img reservieren den Platz vor dem Laden, aspect-ratio haelt ihn auch dann,
 * wenn die Datei fehlt - beides verhindert ein Nachspringen des Layouts.
 */
.reference__shot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 618;
    margin-bottom: var(--space-5);
    border: var(--border-hairline);
    background-color: var(--surface);
}

.reference__kind {
    margin: 0 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-accent);
}

.reference__name {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-headline-sm);
}

.reference__description {
    margin: 0 0 var(--space-3);
    color: var(--color-text-muted);
}

.reference__action {
    margin: var(--space-4) 0 0;
}

/* --- Verwandte Inhalte -------------------------------------------------- */

.related {
    margin-top: var(--space-16);
    padding-top: var(--space-8);
    border-top: var(--border-hairline);
}

.related__heading {
    margin-bottom: var(--space-6);
    font-size: var(--font-size-headline-sm);
}

.related__group + .related__group {
    margin-top: var(--space-8);
}

.related__group-label {
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-accent);
}

.related__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.related__item {
    padding: var(--space-3) 0;
    border-top: var(--border-hairline);
}

.related__link {
    display: block;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-decoration: none;
}

.related__link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.related__description {
    display: block;
    font-size: var(--font-size-label);
    color: var(--color-text-muted);
}

/* --- Brotkrumen --------------------------------------------------------- */

.breadcrumb {
    margin-bottom: var(--space-8);
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text-muted);
}

.breadcrumb__item + .breadcrumb__item::before {
    content: "/";
    margin-right: var(--space-2);
    color: var(--color-border);
}

.breadcrumb__link {
    color: var(--color-text-muted);
    text-decoration: none;
}

.breadcrumb__link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.breadcrumb__current {
    color: var(--color-text);
}

/* --- Kontaktkarte -------------------------------------------------------- */

/*
 * Die Website verwendet bewusst kein Kontaktformular (siehe README).
 * Stattdessen steht die Adresse sichtbar und gut kopierbar in einer Karte.
 */
/*
 * Kontaktraster.
 *
 * Bewusst eigenstaendig statt .section__inner--split: Jenes Raster ist
 * 4fr/8fr und macht die erste Spalte absichtlich schmal - richtig fuer einen
 * Sektionskopf, falsch fuer zwei gleichrangige Bloecke.
 *
 * DOM-Reihenfolge ist Karte, dann Aufriss. Mobil ergibt das ohne jede
 * Umsortierung genau die gewuenschte Lesereihenfolge; erst ab 62rem weist
 * das Raster der Karte die rechte Spalte zu.
 */
.contact-grid__brief {
    margin-top: var(--space-12);
}

@media (min-width: 62rem) {
    .contact-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-16);
        align-items: start;
    }

    .contact-grid > .contact-card {
        grid-column: 2;
        grid-row: 1;
    }

    .contact-grid__brief {
        grid-column: 1;
        grid-row: 1;
        margin-top: 0;
    }
}

/*
 * Die Abschnitte unterhalb des Rasters nutzen dieselbe Lesebreite wie
 * Impressum und Datenschutz - keine halbe Spalte, aber auch keine
 * ueberlangen Zeilen.
 */
.contact-sections {
    margin-top: var(--space-16);
}

.contact-card {
    /* Fuellt die Rasterspalte; ohne eigene Breite, die daneben laufen koennte. */
    padding: var(--space-8);
    background-color: var(--surface);
    border-left: 2px solid var(--color-accent);
}

.contact-card__label {
    margin-bottom: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.contact-card__address {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    margin-bottom: var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--font-size-headline-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 2px solid var(--color-accent);
    /* Adresse in einem Zug markierbar. */
    user-select: all;
}

.contact-card__address:hover {
    color: var(--color-accent);
}

.contact-card__hint {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-label);
    color: var(--color-text-muted);
}

.note--warning {
    margin-bottom: 0;
    border-left: 3px solid var(--signal-copper);
    background-color: var(--canvas);
}

.note--inverse {
    background-color: transparent;
    border: var(--border-hairline);
    color: var(--color-inverse-muted);
}

/* --- Pfeillinks --------------------------------------------------------- */

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-target);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    color: var(--color-highlight);
    text-decoration: none;
}

.link-arrow::after {
    content: "→";
    font-family: var(--font-mono);
}

.link-arrow:hover {
    color: var(--signal-copper-deep);
    text-decoration: underline;
}

.link-arrow--inverse {
    color: var(--signal-copper);
}

.link-arrow--inverse:hover {
    color: #e0733f;
}

/* --- Fliesstext im Artikel ---------------------------------------------- */

.prose--article h2 {
    margin-top: var(--space-16);
    padding-top: var(--space-4);
    border-top: var(--border-hairline);
}

.prose--article table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

@media (min-width: 48rem) {
    .prose--article table {
        display: table;
        white-space: normal;
    }
}

.page__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-16);
}

/* --- Detailseiten-Intro mit Diagramm ------------------------------------- */

.page-intro__meta-line {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: var(--border-hairline);
    max-width: var(--intro-width);
}

@media (min-width: 62rem) {
    /*
     * Feature-Intro: links die Einordnung, rechts das Systemdiagramm.
     * Beide beginnen an derselben oberen Kante.
     */
    /*
     * Oben ausgerichtet, nicht zentriert: Sonst rutscht die Brotkrumen-
     * navigation nach unten, sobald das Diagramm hoeher ist als der Text -
     * und der Abstand zur Navigation waere wieder uneinheitlich.
     */
    .page-intro--feature {
        display: grid;
        grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
        gap: var(--space-16);
        align-items: start;
    }

    .page-intro--feature .page-intro__figure {
        margin-top: 0;
    }

    .page-intro--feature .page-intro__figure .diagram {
        margin: 0;
    }
}

.page-intro__figure {
    margin-top: var(--space-8);
}

/* --- Hauptcase auf der Startseite ---------------------------------------- */

/*
 * Der wichtigste Case wird als Engineering-Artefakt inszeniert: eigene
 * Flaeche, groessere Typografie, Systemdiagramm. Weitere Cases folgen
 * darunter als Liste - es werden keine erfunden, wenn nur einer existiert.
 */
.case {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    padding: var(--space-8) 0 var(--space-12);
    border-top: 1px solid #3a3f43;
    border-bottom: 1px solid #3a3f43;
}

@media (min-width: 62rem) {
    .case {
        grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
        gap: var(--space-16);
        align-items: center;
        padding: var(--space-12) 0;
    }
}

.case__kind {
    margin: 0 0 var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--font-size-label);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--signal-copper);
}

.case__title {
    max-width: 18ch;
    margin-bottom: var(--space-4);
    font-size: var(--font-size-headline-lg);
    line-height: var(--line-height-tight);
}

.case__link {
    color: inherit;
    text-decoration: none;
}

.case__link:hover {
    color: var(--signal-copper);
    text-decoration: underline;
}

.case__description {
    max-width: 46ch;
    margin-bottom: var(--space-6);
    font-size: var(--font-size-body);
}

.case__action {
    margin: var(--space-6) 0 0;
}

.case__figure .diagram {
    margin: 0;
}

.case__figure .diagram__svg {
    padding: var(--space-4);
    background-color: #1c2023;
    border-color: #3a3f43;
}

/* --- Produktblock auf der Startseite ------------------------------------- */

.product {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    padding-bottom: var(--space-8);
    border-bottom: var(--border-hairline);
}

@media (min-width: 62rem) {
    /*
     * Der Produktblock steht bereits in der rechten Spalte des Sektionsrasters.
     * Das Diagramm bekommt darin die groessere Haelfte, damit es als
     * Systemmodell und nicht als Randillustration wahrgenommen wird.
     */
    .product {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: var(--space-8);
        align-items: center;
    }
}

.product__title {
    margin-bottom: var(--space-3);
    font-size: var(--font-size-headline-md);
}

.product__link {
    color: var(--color-text);
    text-decoration: none;
}

.product__link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.product__description {
    max-width: 46ch;
    margin-bottom: var(--space-4);
}

.product__action {
    margin: var(--space-6) 0 0;
}

.product__figure .diagram {
    margin: 0;
}

.product__figure .diagram__caption {
    font-size: var(--font-size-meta);
}