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

/* === Utilities === */
.fd { font-family: var(--font-display); line-height: 1; }
.fb { font-family: var(--font-body); }

.caps {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* === fresh.{word}-Pattern === */
.fresh-word {
    display: inline-block;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
}

.fresh-word--caps {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.fresh-word__dot { display: inline; }

/* Akzent-Farben für den Punkt (inline-style) */
.fresh-word--inline.fresh-word--river .fresh-word__dot { color: var(--fresh-river); }
.fresh-word--inline.fresh-word--rose  .fresh-word__dot { color: var(--fresh-rose); }
.fresh-word--inline.fresh-word--wind  .fresh-word__dot { color: var(--fresh-wind); }
.fresh-word--inline.fresh-word--white .fresh-word__dot { color: #ffffff; }

/* Sticker-Style: dunkler Block mit weißem "fresh." und akzent-farbenem {wort} */
.fresh-word--sticker {
    background: var(--fresh-dark-d);
    color: #ffffff;
    padding: 0.45rem 1rem 0.55rem;
    box-shadow: var(--shadow-sticker);
    border-radius: var(--radius-none);
    font-size: var(--fs-500);
}
.fresh-word--sticker .fresh-word__dot { color: #ffffff; }
.fresh-word--sticker.fresh-word--river .fresh-word__name { color: var(--fresh-river-mid); }
.fresh-word--sticker.fresh-word--rose  .fresh-word__name { color: var(--fresh-rose); }
.fresh-word--sticker.fresh-word--wind  .fresh-word__name { color: var(--fresh-wind); }
.fresh-word--sticker.fresh-word--white .fresh-word__name { color: rgba(255,255,255,0.6); }

/* Stamp-Style: vollfarbiger Block. "fresh." gedämpft, "{wort}" weiß und prominent (für Individuen) */
.fresh-word--stamp {
    padding: 0.45rem 1rem 0.55rem;
    box-shadow: var(--shadow-sticker);
    border-radius: var(--radius-none);
    font-size: var(--fs-500);
}
.fresh-word--stamp.fresh-word--rose  { background: var(--fresh-rose);  color: var(--fresh-rose-dark-c); }
.fresh-word--stamp.fresh-word--wind  { background: var(--fresh-wind);  color: rgba(255,255,255,0.65); }
.fresh-word--stamp.fresh-word--river { background: var(--fresh-river); color: var(--fresh-dark-d); }

.fresh-word--stamp .fresh-word__name { color: #ffffff; }
.fresh-word--stamp.fresh-word--wind .fresh-word__name { color: #ffffff; }

/* === Triangle (right-angle isosceles) === */
/* Wiederkehrendes Brand-Element — abgeleitet aus dem fresh-Logo (Fuchsgesicht). */
.tri {
    display: inline-block;
    flex-shrink: 0;
    background: currentColor;
    /* Default: right angle bottom-left, hypotenuse top-left → bottom-right */
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.tri--white  { color: #ffffff; }
.tri--rose   { color: var(--fresh-rose); }
.tri--wind   { color: var(--fresh-wind); }
.tri--river  { color: var(--fresh-river); }

.tri--sm { width: 16px; height: 16px; }
.tri--md { width: 32px; height: 32px; }
.tri--lg { width: 64px; height: 64px; }
.tri--xl { width: 128px; height: 128px; }

/* Rotation: hypotenuse-Position via clip-path */
.tri--rot-0   { clip-path: polygon(0 0, 0 100%, 100% 100%); }   /* right angle: bottom-left */
.tri--rot-90  { clip-path: polygon(0 100%, 100% 100%, 100% 0); } /* right angle: bottom-right */
.tri--rot-180 { clip-path: polygon(100% 100%, 100% 0, 0 0); }   /* right angle: top-right */
.tri--rot-270 { clip-path: polygon(100% 0, 0 0, 0 100%); }      /* right angle: top-left */

.tri--outline { background: transparent; border: 1.5px solid currentColor; }

/* Arrow-Right: rechtwinklig + gleichschenklig, Hypotenuse links, 90°-Spitze rechts.
   Box-Aspect 1:2 (width:height) für korrekte Geometrie. */
.tri--arrow-right {
    aspect-ratio: 1 / 2;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.tri--arrow-right.tri--sm { width: 6px;  height: 12px; }
.tri--arrow-right.tri--md { width: 10px; height: 20px; }
.tri--arrow-right.tri--lg { width: 16px; height: 32px; }


html {
    /* Pop-out-Elemente (Cutouts, Bahnen-Pfeile) duerfen ueberstehen,
       aber nie die Seite horizontal aufziehen. hidden = Fallback fuer
       Browser ohne clip-Support. */
    overflow-x: hidden;
    overflow-x: clip;
}
body {
    margin: 0;
    background: var(--color-bg-page);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--fs-300);
    line-height: 1.6;
    overflow-x: hidden;
    overflow-x: clip;
}

/* === Site Header & Navigation === */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    transition: background 250ms ease, border-color 250ms ease, backdrop-filter 250ms ease;
    /* Kerben-Position = Logo-Zentrum: Nav (max 1200) zentriert + Nav-Padding
       32px + Logo-Padding 8px + halbe Logo-Breite ~21px */
    --logo-x: max(61px, calc(50% - 539px));
}
/* Navbar-Kerbe: eigenes Dreieck unter der Leiste (KEIN clip-path auf dem
   Header — der würde die Dropdowns clippen). Erbt Hintergrund + Glass. */
.site-header::after {
    content: '';
    position: absolute;
    top: 100%;
    left: calc(var(--logo-x) - 30px);
    width: 60px;
    height: 26px;
    background: inherit;
    backdrop-filter: inherit;
    -webkit-backdrop-filter: inherit;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: background 250ms ease;
    pointer-events: none;
}

.site-header.is-scrolled {
    background: var(--fresh-dark-c);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: var(--color-border-subtle);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.site-nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-3) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--color-text-primary);
    padding: 0.2rem 0.5rem;
    transition: transform 200ms ease;
    position: relative;
    z-index: 1;   /* über dem Kerben-Dreieck (::after) */
}
.site-logo:hover { transform: translateY(-1px); }
.site-logo__mark {
    display: block;
    height: 64px;          /* ragt durch die Navbar in die Kerbe */
    width: auto;
    margin: 2px 0 -30px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

.site-nav__menu {
    display: flex;
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.site-nav__item { position: relative; }
.site-nav__item > a {
    position: relative;
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-300);
    color: var(--color-text-primary);
    text-decoration: none;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: var(--space-2) 0;
}
/* Dreieck (nach unten) statt Unterstrich */
.site-nav__item > a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -3px;
    transform: translateX(-50%) scale(0);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--fresh-rose);
    transition: transform 180ms ease;
}
.site-nav__item > a:hover::after,
.site-nav__item:hover > a::after,
.site-nav__item.is-active > a::after {
    transform: translateX(-50%) scale(1);
}

/* Zweite Ebene: Anchor-Dropdown (Desktop: hover/focus) */
.site-nav__sub {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 210px;
    background: var(--fresh-dark-c);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-card);
    list-style: none;
    margin: 0;
    padding: var(--space-2) 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
    z-index: 110;
}
.site-nav__item:hover .site-nav__sub,
.site-nav__item:focus-within .site-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.site-nav__sub a {
    position: relative;
    display: block;
    padding: 0.45rem var(--space-4) 0.45rem calc(var(--space-4) + 14px);
    color: var(--color-text-primary);
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-200);
    white-space: nowrap;
    transition: color 150ms ease;
}
/* Hover/Focus: Dreieck links zeigt auf den Eintrag */
.site-nav__sub a::before {
    content: '';
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%) scale(0);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--fresh-rose);
    transition: transform 150ms ease;
}
.site-nav__sub a:hover,
.site-nav__sub a:focus-visible { color: var(--fresh-wind); }
.site-nav__sub a:hover::before,
.site-nav__sub a:focus-visible::before { transform: translateY(-50%) scale(1); }

.site-nav__toggle {
    display: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: var(--space-2);
    width: 40px;
    height: 40px;
}
.site-nav__toggle span {
    display: block;
    height: 2px;
    background: var(--color-text-primary);
    margin: 5px 0;
    transition: transform 200ms, opacity 200ms;
}

@media (max-width: 768px) {
    /* Mobile: kein Glassmorph am oberen Rand — opaker dunkler Header,
       da Backdrop-Filter über Fotos auf Mobile unzuverlässig wirkt */
    .site-header {
        background: var(--fresh-dark-c);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom-color: var(--color-border-subtle);
    }
    .site-nav__toggle { display: block; }
    .site-nav__menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: var(--fresh-dark-omega);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: var(--space-5);
        transform: translateX(100%);
        transition: transform 300ms ease;
        padding: 110px var(--space-7) var(--space-8);
        overflow-y: auto;
    }
    .site-nav__item { text-align: left; }
    .site-nav__item > a { font-size: var(--fs-500); }
    /* Hauptpunkt: Dreieck links statt darunter */
    .site-nav__item > a::after {
        left: -18px;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%) scale(0);
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 8px solid var(--fresh-rose);
        border-right: 0;
    }
    .site-nav__item.is-active > a::after { transform: translateY(-50%) scale(1); }
    /* Mobile: Anchor-Ebene inline unter dem Punkt, immer sichtbar */
    .site-nav__sub {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0 0 var(--space-2);
    }
    .site-nav__sub a {
        color: var(--color-text-secondary);
        font-size: var(--fs-300);
        padding: 0.3rem 0 0.3rem 18px;
    }
    /* Unterpunkte: kleiner Dreiecks-Marker immer sichtbar */
    .site-nav__sub a::before {
        left: 0;
        transform: translateY(-50%) scale(1);
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 6px solid var(--fresh-river-light);
    }
    .site-header.is-open .site-nav__menu { transform: translateX(0); }
    .site-header.is-open .site-nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .site-header.is-open .site-nav__toggle span:nth-child(2) { opacity: 0; }
    .site-header.is-open .site-nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* === Site Main === */
.site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-7) var(--space-6);
}

/* === Page-Hero mit Sticker-Bridge === */
.page-hero {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 380px;
    max-height: 640px;
    overflow: visible;
    margin-bottom: var(--space-7);
}

.page-hero__photo {
    position: absolute;
    inset: 0;
    background-color: var(--fresh-river);
    background-image: linear-gradient(135deg, var(--fresh-river-soft) 0%, var(--fresh-dark-a) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Hero als echtes <img> (LCP: srcset statt CSS-Background) */
img.page-hero__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Kerben-Regel: die Kerbe gehört zur OBEREN Sektion — das Hero-Foto ragt
   als Dreieck 28px in die folgende Sektion hinein (Position via --notch-x).
   Foto und Overlay werden dazu 28px verlängert und gemeinsam maskiert. */
.page-hero--photo .page-hero__photo,
.page-hero--photo .page-hero__overlay {
    bottom: -28px;
    height: auto;
    clip-path: polygon(
        0 0, 100% 0,
        100% calc(100% - 28px),
        calc(var(--notch-x, 72%) + 28px) calc(100% - 28px),
        var(--notch-x, 72%) 100%,
        calc(var(--notch-x, 72%) - 28px) calc(100% - 28px),
        0 calc(100% - 28px)
    );
}
.page-hero--photo img.page-hero__photo { height: calc(100% + 28px); }

/* Subtiles Gradient-Overlay damit der Sticker auch auf hellen Fotos lesbar ist */
.page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10, 17, 20, 0.35) 0%,
        rgba(10, 17, 20, 0.10) 30%,
        rgba(10, 17, 20, 0.20) 70%,
        rgba(19, 32, 38, 0.55) 100%
    );
}

/* Sticker-Bridge: fresh.{wort}-Sticker am unteren Rand des Fotos, ragt halb herunter */
.page-hero__bridge {
    position: absolute;
    left: max(var(--space-6), 50% - 600px + var(--space-6));
    bottom: 0;
    transform: translateY(50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

/* Eyebrow: kleiner getilteter Sticker über dem fresh.{wort}-Sticker */
.page-hero__eyebrow {
    background: var(--color-accent-primary);
    color: var(--color-text-on-rose);
    font-weight: 700;
    font-size: var(--fs-100);
    padding: 0.25rem 0.6rem 0.3rem;
    margin-left: var(--space-3);
    margin-bottom: -0.4rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: var(--shadow-sticker);
    z-index: 2;
    position: relative;
    border-radius: var(--radius-none);
}

/* === Plakat Hero (weißer Hintergrund, diagonale Wedges) === */
.page-hero--plakat,
.page-hero--white {
    background: #ffffff;
}
.page-hero--plakat .page-hero__inverted {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.page-hero--white .page-hero__white {
    position: absolute;
    inset: 0;
    background: #ffffff;
}

/* Diagonale Triangle-Wedges aus dem Plakat-Design */
.page-hero__wedge {
    position: absolute;
    width: 60vh;
    height: 60vh;
    max-width: 50%;
    max-height: 100%;
}
.page-hero__wedge--rose {
    bottom: 0;
    left: 0;
    background: var(--fresh-rose);
    clip-path: polygon(0 100%, 100% 100%, 0 0);
}
.page-hero__wedge--wind {
    top: 0;
    right: 0;
    background: var(--fresh-wind);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
}

/* Triple-Triangle-Akzent (>>>) aus dem Plakat */
.page-hero__triple-tri {
    position: absolute;
    top: 50%;
    left: 12%;
    transform: translateY(-50%);
    display: flex;
    gap: 6px;
    z-index: 1;
}

/* White/Plakat-Hero: Sticker am unteren Rand, Eyebrow dunkel auf weiß */
.page-hero--plakat .page-hero__bridge,
.page-hero--white .page-hero__bridge {
    bottom: var(--space-7);
    transform: none;
}
.page-hero--plakat .page-hero__eyebrow,
.page-hero--white .page-hero__eyebrow {
    background: var(--fresh-dark-d);
    color: #ffffff;
}

/* White-Hero fresh-sticker: dunkles "fresh." mit river-Akzent */
.page-hero--white .fresh-word--sticker {
    background: transparent;
    color: var(--fresh-dark-d);
    box-shadow: none;
    padding: 0 0 0.2rem;
}
.page-hero--white .fresh-word--sticker .fresh-word__dot { color: var(--fresh-dark-d); }
.page-hero--white .fresh-word--sticker.fresh-word--river .fresh-word__name { color: var(--fresh-river); }
.page-hero--white .fresh-word--sticker.fresh-word--rose  .fresh-word__name { color: var(--fresh-rose); }
.page-hero--white .fresh-word--sticker.fresh-word--wind  .fresh-word__name { color: var(--fresh-wind-dark-c); }

/* Hero-spezifische Größe für den fresh-word-Sticker im Hero — größer als Default */
.page-hero .fresh-word--sticker,
.page-hero .fresh-word--stamp {
    font-size: clamp(3rem, 8vw, 7rem);
    padding: 0.6rem 1.6rem 0.75rem;
    letter-spacing: -0.02em;
}

/* Photo-Hero: weißer Sticker mit dunklem fresh., Akzent färbt nur das {wort} */
.page-hero--photo .fresh-word--sticker {
    background: #ffffff;
    color: var(--fresh-dark-d);
}
.page-hero--photo .fresh-word--sticker .fresh-word__dot { color: var(--fresh-dark-d); }
.page-hero--photo .fresh-word--sticker.fresh-word--river .fresh-word__name { color: var(--fresh-river); }
.page-hero--photo .fresh-word--sticker.fresh-word--rose  .fresh-word__name { color: var(--fresh-rose); }
.page-hero--photo .fresh-word--sticker.fresh-word--wind  .fresh-word__name { color: var(--fresh-wind-dark-c); }
.page-hero--photo .fresh-word--sticker.fresh-word--white .fresh-word__name { color: var(--fresh-river-mid); }


.page-hero__deco {
    position: absolute;
    top: var(--space-5);
    right: var(--space-6);
    display: flex;
    gap: var(--space-2);
    z-index: 2;
    opacity: 0.85;
}

/* Visually-hidden Utility (für H1 hinter Sticker) */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Pages mit Hero verzichten auf Top-Padding (Hero läuft hinter Header) */
.site-main.has-hero {
    padding-top: var(--space-7);
    /* extra space damit Sticker nicht in Content reinrutscht */
    margin-top: var(--space-5);
}

@media (max-width: 768px) {
    .page-hero {
        height: 38vh;
        min-height: 240px;
    }
    .page-hero__title { font-size: var(--fs-500); }
    .page-hero__bridge { left: var(--space-4); right: var(--space-4); }
    .page-hero__title { max-width: none; }
}

/* === Footer === */
.site-footer {
    background: var(--fresh-dark-omega);
    border-top: 1px solid var(--color-border-subtle);
    padding: var(--space-7) var(--space-6) var(--space-5);
    margin-top: var(--space-9);
}

.site-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--space-7);
    align-items: start;
}

.site-footer__brand .site-logo,
.site-footer__logo {
    display: inline-block;
    margin-bottom: var(--space-3);
}
.site-footer__logo img { display: block; height: 36px; width: auto; }

.site-footer__tagline {
    color: var(--color-text-tertiary);
    font-size: var(--fs-200);
    margin: 0;
    line-height: 1.5;
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.site-footer__links a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--fs-200);
    font-weight: 600;
}
.site-footer__links a:hover { color: #ffffff; text-decoration: underline; }

.site-footer__social {
    display: flex;
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    margin: 0;
}
.site-footer__social a,
.site-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-secondary);
    transition: background 200ms, color 200ms, transform 200ms, box-shadow 200ms;
    text-decoration: none;
}
.site-footer__social-link:hover { transform: translateY(-2px); color: #ffffff; }

/* Plattform-Farben — Hover füllt das Quadrat in der CI-Farbe */
.site-footer__social-link--instagram:hover {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.site-footer__social-link--facebook:hover  { background: #1877F2; }
.site-footer__social-link--whatsapp:hover  { background: #25D366; }
.site-footer__social-link--threads:hover   { background: var(--fresh-river-mid); }
.site-footer__social-link--tiktok:hover    { background: var(--fresh-dark-c); box-shadow: inset 0 0 0 1px #25F4EE, 0 0 0 1px #FE2C55; }
.site-footer__social-link--mail:hover      { background: var(--fresh-river-soft); }
.site-footer__social-link--linkedin:hover  { background: #0A66C2; }

.site-footer__copy {
    max-width: 1200px;
    margin: var(--space-6) auto 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
    color: var(--color-text-tertiary);
    font-size: var(--fs-100);
    text-align: center;
}
.site-footer__copy p { margin: 0; }

@media (max-width: 768px) {
    .site-footer__inner {
        grid-template-columns: 1fr;
        gap: var(--space-5);
        text-align: left;
    }
    .site-footer__social { flex-wrap: wrap; }
}

.page-content h1, .page-content h2, .page-content h3 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1;
}

/* === tilt === */
.tilt {
    transform: rotate(var(--rot, 0deg));
    transition: var(--tilt-transition);
    display: inline-block;
}
.tilt:hover { transform: rotate(0deg); }

/* === Globale Bullets / Quadratisch === */
/* === Globale Bullets: quadratisch === */
.page-content ul,
.section-intro ul,
.mitmachen-text ul {
    list-style: square;
    padding-left: var(--space-5);
}
.page-content ul li::marker,
.section-intro ul li::marker { color: var(--fresh-rose); }

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


/* Fließtext-Links: CI statt Browser-Blau */
.page-content a,
.section-intro a {
    color: var(--fresh-wind);
    text-decoration: underline;
    text-decoration-color: rgba(54, 201, 197, 0.5);
    text-underline-offset: 2px;
}
.page-content a:hover,
.section-intro a:hover { color: var(--fresh-rose); }