/* ================================================================
   DESIGN TOKENS

   Die Vorgabewerte stehen im Theme. Die Zeile darunter ueberschreibt
   sie mit den geprueften Werten des Mandanten - deshalb aendert ein
   Branding-Wechsel die Darstellung, ohne dass Code angefasst wird.

   Der Inhalt eines <style>-Elements ist KEIN HTML-Text; Razors
   Kodierung schuetzt hier nicht. Deshalb kommen nur Werte an, die
   DesignTokenWriter geprueft hat.
   ================================================================ */
:root {
    --color-primary: #22c1dc;
    --color-accent: #1b3a8c;
    --color-surface: #ffffff;
    --color-on-surface: #14181f;
    --font-heading: system-ui, sans-serif;
    --font-body: system-ui, sans-serif;
    --scale-radius: 1;
    --scale-spacing: 1;

    /* Abgeleitete Werte - NICHT ueberschreibbar, damit ein
       Branding-Wert die Lesbarkeit nicht zerstoeren kann. */
    --ink-dark: #0d1117;
    --ink-dark-2: #131a24;
    --on-dark: #f2f6fa;
    --on-dark-muted: #b8c4d0;
    --muted: #5b6672;
    --line: #e3e8ee;
    --max: 72rem;

    /* ★ DIE KOPFHOEHE - EINE QUELLE FUER KOPF UND AUFMACHER.
       Sie entsteht heute implizit aus Innenabstand, Zeilenhoehe und
       dem Beruehrungsziel der Navigation. Der Wert hier ist deshalb
       GEMESSEN und nicht gerechnet: 82,17 px im Browser bei
       1920x1080, 1366x768 und 2560x1440.

       ★ Der gerechnete Wert war FALSCH. Mein erster Entwurf stand auf
         4.75rem (76 px) - aus Innenabstand und min-height abgeleitet.
         Der Browsertest hat die Abweichung von 6 px sofort gemeldet.
         Genau dafuer ist er da: Eine Zahl, die aus einer Ueberlegung
         stammt statt aus einer Messung, ist eine Behauptung ueber das
         Layout.

       Der Test haelt diesen Wert bei jedem Lauf gegen die
       tatsaechliche Kopfhoehe. Laeuft das Layout auseinander - etwa
       weil jemand den Innenabstand aendert -, wird er rot, statt dass
       der Aufmacher stillschweigend um die Differenz danebenliegt. */
    --header-height: 82px;
}

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

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

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-on-surface);
    background: var(--color-surface);
    line-height: 1.65;
    font-size: 1.0625rem;

    /* Verhindert horizontales Scrollen auf Mobilgeraeten - der
       haeufigste sichtbare Layoutfehler ueberhaupt. */
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 0.5em;
    text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.25rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); }

p { margin: 0 0 1em; max-width: 68ch; }

a { color: var(--color-accent); }
a:hover, a:focus-visible { text-decoration-thickness: 2px; }

/* Sichtbarer Tastaturfokus - Pflicht, nicht Geschmack. */
:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 2px;
}

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 calc(1rem * var(--scale-spacing));
}

/* ── Sprungmarke ─────────────────────────────────────────────── */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ink-dark);
    color: var(--on-dark);
    padding: 0.75rem 1.25rem;
    z-index: 100;
}
.skip:focus { left: 0; }

/* ── Kopfbereich ─────────────────────────────────────────────── */
.site-header {
    background: var(--ink-dark);
    color: var(--on-dark);
    padding: 1rem 0;
}
.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.brand {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--color-primary);
    margin: 0;
}
.site-nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.site-nav a {
    color: var(--on-dark);
    text-decoration: none;
    padding: 0.4rem 0;
    display: inline-block;

    /* Beruehrungsziel: mindestens 44 px hoch inkl. Innenabstand. */
    min-height: 44px;
    line-height: 2.2;
}
.site-nav a:hover, .site-nav a:focus-visible { text-decoration: underline; }
.site-nav [aria-current="page"] {
    color: var(--color-primary);
    font-weight: 700;
}

/* ── Aufmacher ───────────────────────────────────────────────── */
.hero {
    background: linear-gradient(160deg, var(--ink-dark) 0%, var(--ink-dark-2) 100%);
    color: var(--on-dark);
    padding: clamp(3rem, 9vw, 6rem) 0;
}
/* ★ DER FUEHRENDE AUFMACHER FUELLT DEN SICHTBAREN BEREICH.
   Kopf und Aufmacher zusammen ergeben ungefaehr eine Bildschirmhoehe;
   erst darunter beginnt der helle Bereich.

   ★ SEIT PHASE 21 AUF JEDER INHALTSSEITE, NICHT NUR AUF DER STARTSEITE.
   Vorher setzte das Theme das Attribut selbst - und zwar nur, wenn der
   Pfad "/" oder "/start" war. Das war ein Seitensonderfall. Welcher
   Abschnitt der Aufmacher ist, entscheidet jetzt die Engine
   (RenderModelFactory.IsLeadHero): erster ausgegebener Abschnitt, Typ
   "hero", und mehr als nur eine Ueberschrift. Diese Regel hier bleibt
   unveraendert - sie war nie das Problem.

   In diesem Theme steht der Aufmacher unmittelbar unter dem Kopf;
   deshalb genuegt hier die Rechnung mit der Kopfhoehe. "basis" und
   "kontrast" haben eine andere Struktur und loesen dieselbe Regel
   ueber die Flexbox - siehe dort.

   min-height, NICHT height: Auf einem kleinen Fenster oder mit viel
   Text muss der Aufmacher nach unten wachsen duerfen. Eine feste
   Hoehe schnitte den Knopf ab - und der ist der einzige
   Handlungsaufruf der Seite.

   100svh statt 100vh, wo verfuegbar: Auf einem Telefon rechnet 100vh
   mit AUSGEBLENDETER Browserleiste. Der Aufmacher waere dort beim
   Laden zu hoch, und der Inhalt sprang beim ersten Scrollen. 100svh
   nimmt die KLEINE Ansicht - die mit sichtbarer Leiste - und bleibt
   damit stabil. 100vh bleibt als Rueckfall stehen. */
.hero[data-viewport] {
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--header-height));
}

@supports (height: 100svh) {
    .hero[data-viewport] { min-height: calc(100svh - var(--header-height)); }
}

/* Der Inhalt behaelt seine Breite; die Flexbox richtet ihn nur
   senkrecht aus. Ohne die Breitenangabe schrumpfte der Textblock
   auf seinen Inhalt zusammen. */
.hero[data-viewport] > .wrap { width: 100%; }
/* ★ AUFMACHER MIT BILD (17.08.2026). Text und Bild nebeneinander, sobald Platz
   ist; darunter gestapelt. Ohne Bild bleibt der Aufmacher, wie er war - die
   Klasse hero--media setzt das Theme nur, wenn das Bildfeld gefuellt ist. */
.hero--media .wrap { display: grid; gap: 2rem; align-items: center; }
.hero-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(12px * var(--scale-radius, 1));
}
@media (min-width: 64rem) {
    .hero--media .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; }
}

.hero .eyebrow {
    color: var(--color-primary);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.8125rem;
    margin: 0 0 0.75rem;
}
.hero h1 { color: var(--on-dark); }
.hero p { color: var(--on-dark-muted); font-size: 1.125rem; }

/* ── Schaltflächen ───────────────────────────────────────────── */
.btn {
    display: inline-block;
    background: var(--color-primary);

    /* Dunkle Schrift auf Cyan - der einzige Weg zu 4.5:1.
       Weiss auf #22c1dc erreicht nur ~1.9:1. */
    color: var(--ink-dark);
    font-weight: 700;
    padding: 0.9rem 1.75rem;
    border-radius: calc(10px * var(--scale-radius));
    text-decoration: none;
    min-height: 44px;
}
.btn:hover, .btn:focus-visible { filter: brightness(1.08); }

/* ── Abschnitte ──────────────────────────────────────────────── */
.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-cta {
    background: var(--ink-dark);
    color: var(--on-dark);
    border-top: none;
}
.section-cta h2 { color: var(--on-dark); }
.section-cta p { color: var(--on-dark-muted); }

/* ── Karten ──────────────────────────────────────────────────── */
.cards {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.card {
    border: 1px solid var(--line);
    border-radius: calc(10px * var(--scale-radius));
    padding: 1.5rem;
    background: var(--color-surface);

    /* Dezente Tiefe - kein Schlagschatten-Wettbewerb. */
    box-shadow: 0 1px 2px rgba(20, 24, 31, 0.04);
}
/* ★ VIER KARTEN (17.08.2026): Mit drei Spalten stuende die vierte allein in
   der zweiten Zeile. Genau vier Eintraege bekommen deshalb vier schmalere
   Spalten (ab 64rem) bzw. zwei mal zwei - eine Regel ueber die ANZAHL, kein
   Sonderfall fuer einen Inhalt. Browser ohne :has() behalten die Vorgabe. */
@media (min-width: 64rem) {
    .cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 40rem) and (max-width: 63.99rem) {
    .cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.card h3 { margin-bottom: 0.4rem; }
.card p { margin-bottom: 0.5rem; color: var(--muted); }
.card a { font-weight: 600; }

/* ── Fußbereich ──────────────────────────────────────────────── */
.site-footer {
    background: var(--ink-dark);
    color: var(--on-dark-muted);
    padding: 2.5rem 0;
    margin-top: 0;
}
.site-footer a { color: var(--on-dark); }
.site-footer nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    padding: 0;
    margin: 0 0 1rem;
    flex-wrap: wrap;
}
.site-footer p { margin: 0; font-size: 0.9375rem; }

/* ── Mobil ───────────────────────────────────────────────────── */
@media (max-width: 48rem) {
    .site-header .wrap { flex-direction: column; align-items: flex-start; }
    /* Kompakter auf schmalen Geraeten, damit sechs Punkte in EINE Zeile passen
       (gemessen bei 390 px: Start Leistungen Projekte Blog Ueber Kontakt) - der
       Kopf bleibt so hoch wie gemessen (--header-height), und der Aufmacher
       trifft den Bildschirm. Laengere Etiketten brechen weiterhin sauber um. */
    .site-nav ul { gap: 0.25rem 0.75rem; font-size: 0.9rem; }
    .site-nav a { line-height: 2.6; } /* 14.4 px x 2.6 = 37.4 px - dieselbe Zeilenbox wie 17 px x 2.2 */
    .cards { grid-template-columns: 1fr; }

    /* ★ Hier bricht die Kopfzeile um: Marke UEBER Navigation. Der
       Kopf ist damit hoeher, und die eine Quelle bekommt hier ihren
       zweiten Wert - nicht eine zweite Quelle.

       Ebenfalls GEMESSEN, nicht gerechnet: 131,17 px bei 390x844.
       Derselbe Browsertest haelt ihn auf dem Telefon gegen die
       tatsaechliche Hoehe. */
    :root { --header-height: 131px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}
/* === Anfrageformular (Phase 13) ============================
   ★ DIESE REGELN SIND PLATTFORMVERHALTEN, NICHT GESTALTUNG.

   .intake-trap versteckt den Honigtopf. Fehlt die Regel in einem
   Theme, ist das Feld SICHTBAR - und jeder echte Besucher fuellt es
   aus und wird als Automat abgewiesen. Der Spamschutz wuerde sich
   gegen die Menschen richten, die er schuetzen soll.

   .visually-hidden versteckt Text fuer das Auge, NICHT fuer den
   Screenreader. Es traegt die Pflichtfeldkennzeichnung; display:none
   waere hier falsch, weil es den Text auch vorlesetechnisch entfernt. */
.intake-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

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

/* ★ EIN ZWEITER BEFUND AUS DER VISUELLEN PRUEFUNG.

   Fortschrittsbalken und Auswahlkaestchen werden vom Browser gezeichnet
   und tragen dessen Vorgabefarbe - ein Blau, das mit der Marke des
   Mandanten nichts zu tun hat. Auf dem Screenshot stand die Farbe des
   Browsers neben der Farbe des Kunden.

   accent-color faerbt sie mit EINER Zeile in die Mandantenfarbe, ohne
   die Elemente nachzubauen. Ein nachgebautes Kaestchen waere die
   schlechtere Loesung: Es verliert die Tastaturbedienung und die
   Vorlesbarkeit, die das echte Element mitbringt. */
.intake-form, .intake-progress { accent-color: var(--color-primary); }

.intake-progress { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.intake-progress label { font-weight: 600; }
.intake-progress progress { flex: 1 1 12rem; max-width: 22rem; height: 1rem; }

/* ★ EIN ECHTER BEFUND AUS DER COMPUTED-STYLE-MESSUNG.

   Formularelemente erben die Schriftart NICHT. Ohne diese Zeile setzt
   der Browser sie in seiner eigenen Vorgabe - gemessen: der
   Absendeknopf kam als "Arial" zurueck, waehrend die ganze Seite in der
   Systemschrift lief.

   Derselbe Fehlertyp wie der Serifen-Befund aus Phase 12: gueltiges
   CSS, fehlerfreie Seite, stille Vorgabe des Browsers. Und wieder nur
   dadurch gefunden, dass der BERECHNETE Stil abgefragt wurde. */
button, input, select, textarea { font: inherit; color: inherit; }

.intake-form { max-width: 40rem; }
.intake-field { margin-block: 1.5rem; }
.intake-field > label, .intake-field legend { display: block; font-weight: 600; margin-block-end: .35rem; }
.intake-help { margin-block: .25rem .5rem; font-size: .9em; opacity: .85; }

.intake-field input[type=text],
.intake-field input[type=email],
.intake-field input[type=tel],
.intake-field textarea {
    width: 100%;
    padding: .7rem .8rem;
    font: inherit;
    color: inherit;
    background: var(--color-surface, #fff);
    border: 1px solid currentColor;
    border-radius: calc(4px * var(--scale-radius, 1));
}

.intake-field fieldset { border: 0; padding: 0; margin: 0; }
.intake-option { display: flex; align-items: flex-start; gap: .6rem; margin-block: .5rem; }

/* 44px Zielflaeche - dieselbe Untergrenze wie bei der Navigation. */
.intake-option input, .intake-consent input { width: 1.25rem; height: 1.25rem; margin-block-start: .15rem; }
.intake-option label, .intake-consent label { font-weight: 400; min-height: 1.5rem; }

.intake-consent { display: flex; align-items: flex-start; gap: .6rem; }

.intake-errors {
    border: 2px solid currentColor;
    border-radius: calc(4px * var(--scale-radius, 1));
    padding: 1rem 1.25rem;
    margin-block: 1.5rem;
}
.intake-errors ul { margin-block-end: 0; }

.intake-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-block-start: 2rem; }
.intake-back { min-height: 44px; display: inline-flex; align-items: center; }

.intake-summary { margin-block: 1rem 2rem; }
.intake-summary dt { font-weight: 600; margin-block-start: 1rem; }
.intake-summary dd { margin-inline-start: 0; }

/* ★ DAS LOGO BRAUCHT EINE OBERGRENZE (Phase 18b).

   Das Bildelement traegt width/height der groessten Variante - das ist
   fuer das Seitenverhaeltnis richtig und wuerde ohne diese Regel ein
   1280 Pixel breites Logo in den Kopfbereich stellen. Die Hoehe
   begrenzt, die Breite folgt: So bleibt das Verhaeltnis erhalten,
   gleich welche Datei der Kunde hochlaedt. */
.brand img { max-height: 2.75rem; width: auto; max-width: 100%; display: block; }
.section figure { margin: 0; }
.section figure img { width: 100%; height: auto; display: block; border-radius: calc(8px * var(--scale-radius, 1)); }
.section figcaption { font-size: .9375rem; margin-block-start: .6rem; opacity: .85; }
.brand-name { font-size: 0.95rem; }

/* ── Geschaeftsangaben (Phase 19, Q-E8) ──────────────────────────
   Anschrift und Oeffnungszeiten. Bewusst KNAPP gehalten: Die Werte
   erben Farbe und Schrift des Themes, damit hier keine vierte Stelle
   entsteht, an der Farben festgelegt werden (AT-17). */
.business-address {
    font-style: normal;
    margin: 1rem 0;
    line-height: 1.7;
}
.business-hours {
    border-collapse: collapse;
    margin: 1rem 0;

    /* Eine schmale Tabelle laeuft auf einem Telefon sonst ueber. */
    max-width: 22rem;
    width: 100%;
}
.business-hours caption {
    text-align: left;
    font-weight: 700;
    padding-bottom: 0.4rem;
}
.business-hours th, .business-hours td {
    text-align: left;
    padding: 0.3rem 0.75rem 0.3rem 0;
    vertical-align: top;
}
.business-hours th { font-weight: 400; }

/* -- Einwilligung (Phase 20c) ------------------------------------
   Der Banner erscheint nur, wenn der Mandant eine optionale Kategorie
   benutzt - heute auf keinem Produktivmandanten. Er sperrt die Seite
   NICHT: kein Overlay, keine Fokusfalle, die Navigation bleibt
   erreichbar. */
.consent-banner {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: #ffffff;
    color: #16202b;
    border-top: 2px solid #16202b;
    padding: 1rem;
}
.consent-inner { max-width: 60rem; margin: 0 auto; }
.consent-title { font-size: 1.05rem; margin: 0 0 .4rem; }
.consent-list { margin: .5rem 0; padding-left: 1.2rem; }
.consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-bottom: 0;
}
.consent-button {
    min-height: 44px;
    padding: .55rem 1.1rem;
    border: 1px solid #16202b;
    border-radius: 6px;
    background: #16202b;
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
/* Gleichwertig gestaltet - Ablehnen ist kein Randweg. */
.consent-actions .consent-button + .consent-button {
    background: #ffffff;
    color: #16202b;
}
.consent-link {
    color: #16202b;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.consent-settings-link { margin: .5rem 0 0; }

/* ── Modullisten (Baustein A) ────────────────────────────────────
   Dieses Theme arbeitet mit Karten auf heller Flaeche - dieselbe
   Bauart wie die Merkmalsliste (.cards). Das Markup ist fuer alle drei
   Themes dasselbe; unterschiedlich ist genau das hier.

   ★ KEINE FARBE WIRD HIER FESTGELEGT (AT-17). */
.module-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    /* ★ auto-FILL, nicht auto-fit (17.08.2026). Mit auto-fit dehnt sich EIN
       Eintrag auf die volle Inhaltsbreite - ein Betrieb mit einer Person bekam
       eine 1056 px breite Karte samt Bild. auto-fill haelt die leeren Spuren
       frei: eine Person ist eine Karte von drei, zwei sind zwei, ab drei ist
       die Zeile voll. Gilt fuer JEDE Modulliste - kein Sonderfall fuer eine
       Zahl von Eintraegen. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 1.25rem;
}
.module-section h2 { margin-bottom: 1.5rem; }

.module-list .module-entry {
    border: 1px solid currentColor;
    border-radius: calc(6px * var(--scale-radius, 1));
    padding: 1.25rem;
}
.module-list .module-entry h3 { margin-block: 0 .35rem; }
.module-list .module-entry img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-block-end: .75rem;
    border-radius: calc(4px * var(--scale-radius, 1));
}
/* Referenzen und Galerie tragen Bilder im festen Verhaeltnis 3:2 - so bleiben
   Kartenoberkanten und Kachelzeilen buendig, gleich welche Datei hochgeladen
   wurde. Team-Bilder werden NICHT beschnitten (ein Portrait darf hochkant sein). */
.module-list--references .module-entry img,
.module-list--gallery .module-entry img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.module-list--team .module-entry img { max-height: 24rem; width: auto; }
.module-list--references .module-entry a { font-weight: 600; }

.module-entry__role { font-style: italic; margin-block: 0 .5rem; }

/* Die Fragenliste laeuft ueber die volle Breite - eine Antwort in einer
   schmalen Spalte waere schwer lesbar. */
.module-list--faq { display: block; }
.module-list--faq dt { font-weight: 700; margin-block-start: 1rem; }
.module-list--faq dd { margin-inline-start: 0; }

.module-list--gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.module-list--gallery .module-entry { border: 0; padding: 0; }
.module-list--gallery figure { margin: 0; }
.module-list--gallery figcaption { font-size: .9rem; margin-block-start: .4rem; }
.module-list--gallery figcaption strong { display: block; }

.module-review__rating { margin-block: 0 .5rem; letter-spacing: .1em; }
.module-review__value { letter-spacing: normal; margin-inline-start: .5rem; font-size: .9rem; }
.module-review blockquote { margin: 0 0 .5rem; padding-inline-start: 1rem; border-inline-start: 3px solid currentColor; }
.module-review__author { font-weight: 600; margin-block: 0; }
.module-review__date { font-weight: 400; }
.module-review__source { font-size: .85rem; margin-block: .25rem 0; }

/* =========================================================================
   Blog und Downloads (Baustein B) - Struktur aus den geteilten Teilansichten,
   Farben ausschliesslich ueber currentColor: keine neue Farbstelle (AT-17).
   ========================================================================= */
.blog-list { list-style: none; padding: 0; margin: 0; }
.blog-list .blog-entry { padding-block: 1.25rem; border-block-start: 1px solid currentColor; }
.blog-list .blog-entry:first-child { border-block-start: 0; }
.blog-entry h3 { margin-block: 0 .25rem; }
.blog-entry__meta, .blog-post__meta { font-size: .9rem; opacity: .85; margin-block: 0 .5rem; }
.blog-entry__teaser { margin-block: 0; }
.blog-empty { font-style: italic; }
.blog-post__teaser { font-size: 1.15rem; font-weight: 600; }
.blog-post__body p { margin-block: 0 1rem; overflow-wrap: anywhere; }
.blog-post__back { margin-block-start: 2rem; }

.file-list { list-style: none; padding: 0; margin: 0; }
.file-list .file-entry { padding-block: 1rem; border-block-start: 1px solid currentColor; }
.file-list .file-entry:first-child { border-block-start: 0; }
.file-entry__link { font-weight: 600; overflow-wrap: anywhere; }
.file-entry__meta { font-size: .85rem; margin-inline-start: .5rem; white-space: nowrap; }
.file-entry__description { margin-block: .35rem 0; }

/* =========================================================================
   Newsletter (Baustein C) - Formular aus der geteilten Teilansicht; Farben
   ausschliesslich ueber currentColor und die Flaechenfarbe: keine neue
   Farbstelle (AT-17). Das Formular ist dasselbe wie im Kontaktformular.
   ========================================================================= */
.newsletter-form { max-width: 32rem; }
.newsletter-form__field { margin-block: 1rem; }
.newsletter-form__field label { display: block; font-weight: 600; margin-block-end: .35rem; }
.newsletter-form__field input[type=email] {
    width: 100%;
    padding: .7rem .8rem;
    font: inherit;
    color: inherit;
    background: var(--color-surface, #fff);
    border: 1px solid currentColor;
    border-radius: calc(4px * var(--scale-radius, 1));
}
.newsletter-form__consent { display: flex; align-items: flex-start; gap: .6rem; margin-block: 1rem; font-size: .95rem; }
.newsletter-form__consent input { margin-block-start: .35rem; flex: none; }
.newsletter-form__actions { margin-block-start: 1rem; }
.newsletter-form__actions .btn, .newsletter-confirm .btn { min-height: 44px; }
.newsletter-page .wrap { max-width: 40rem; }