/* ==========================================================================
   rond.css — Rights of Nature Day

   1. Reset
   2. Tokens: Farben (Frühling / Herbst), Typografie, Abstände, Linien
   3. Utilities: font-size-*, font-*, grid / cols-*, stack-*, mt-*, bg-*, …
   4. Komponenten (mit CSS-Nesting): Header, Navigation, Saison-Wechsler,
      Sections, Buttons, Formulare, Tabelle, Karten, Overlay, Footer
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

:focus-visible {
    outline-offset: 3px;
}

html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;

    line-height: 1.5;
    scrollbar-gutter: stable;
}

body{
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 {
    font-size: 2em;
    margin-block: 0.67em;
}

abbr[title] {
    cursor: help;
    text-decoration-line: underline;
    text-decoration-style: dotted;
}

@media (forced-colors: active) {
    mark {
        color: HighlightText;
        background-color: Highlight;
    }
}

audio,
iframe,
img,
svg,
video {
    max-block-size: 100%;
    max-inline-size: 100%;
}

fieldset {
    min-inline-size: 0;
}

label:has(+ input:not([type="radio"], [type="checkbox"]), select, textarea) {
    display: block;
}

textarea:not([rows]) {
    min-block-size: 6em;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

[type="search"] {
    -webkit-appearance: textfield;
}

@supports (-webkit-touch-callout: none) {
    [type="search"] {
        border: 1px solid -apple-system-secondary-label;
        background-color: canvas;
    }
}

input:where([type="tel"], [type="url"], [type="email"], [type="number"]):not(:placeholder-shown) {
    direction: ltr;
}

table {
    border-collapse: collapse;
    border: 1px solid;
}

th,
td {
    border: 1px solid;
    padding: 0.25em 0.5em;
    vertical-align: top;
}

dialog::backdrop {
    background: oklch(0% 0 0 / 0.3);
}

dialog,
[popover],
dialog::backdrop {
    opacity: 0;
    transition: opacity 150ms ease-out, display 150ms allow-discrete,
    overlay 150ms allow-discrete;
}

dialog[open],
:popover-open,
dialog[open]::backdrop {
    opacity: 1;
}

@starting-style {
    dialog[open],
    :popover-open,
    dialog[open]::backdrop {
        opacity: 0;
    }
}

[hidden]:not([hidden="until-found"]) {
    display: none !important;
}

img {
    display: block;
}

summary {
    cursor: default;
}

iframe {
    border: none;
}

@supports(position-area: block-end span-inline-end) {
    [popover] {
        margin: 0;
        position-area: block-end span-inline-end;
    }
}

h1, h2, h3, h4, h5, h6{ font-weight: normal; }
h1, h2, h3, h4, h5, h6, p, ul, ol{  margin: 0; padding: 0; }


/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

/* Hanken Grotesk 3.014 aus dem offiziellen Repo (github.com/marcologous/hanken-grotesk):
   im Gegensatz zur Google-Fonts-Ausgabe mit Stylistic Sets, u. a. ss03 = runde Punkte
   (i, j, Umlaute, Doppelpunkt, Ausrufezeichen, Aufzählungspunkt). Vollständiger Zeichensatz, 62 KB. */
@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/hanken-grotesk-vf.woff2') format('woff2');
}

@font-face {
    font-family: 'Hanken Grotesk';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/hanken-grotesk-italic-vf.woff2') format('woff2');
}

:root {
    /* Das Figma-Layout ist 1505px breit. "1 Design-Pixel" (--u) skaliert
       unterhalb von 1505px mit der Viewport-Breite mit, wächst aber nie über 1px.
       Alle Größen haben zusätzlich eine Untergrenze (clamp / max). */
    --u: min(1px, calc(100vw / 1505));
    --max-width: 1505px;
    --inset: max(20px, calc(66 * var(--u)));

    /* Farben (neutral) */
    --color-black: #000;
    --color-white: #fff;
    --color-grey: #f0f0f0;
    --color-placeholder: #d9d9d9;
    --color-text-muted: rgba(0, 0, 0, 0.6);

    /* Saison-Farben: Frühling (Standard). Registrierte <color>-Properties (siehe @property unten),
       damit der Wechsel als Übergang läuft – Browser interpolieren Farben in Oklab,
       also über einen gedämpften Zwischenton statt über den Farbkreis. */
    --color-brand: #2eeb1d;      /* Header */
    --color-tint: #bbf6aa;       /* farbige Sections */
    --color-switch: #ffccb7;     /* Pille des Wechslers zeigt die Farbe der *anderen* Saison */
    --color-hover: var(--color-brand); /* Hover/Fokus bei Buttons: Farbwechsel statt Unterstreichung */

    --season-duration: 0.9s;
    transition:
        --color-brand var(--season-duration),
        --color-tint var(--season-duration),
        --color-switch var(--season-duration);

    /* Schriftgrößen — benannt nach dem Design-Wert bei 1505px */
    --font-size-90: clamp(34px, calc(93 * var(--u)), 93px);
    --font-size-70: clamp(32px, calc(70 * var(--u)), 70px);
    --font-size-40: clamp(22px, calc(40 * var(--u)), 40px);
    --font-size-35: clamp(19px, calc(35 * var(--u)), 35px);
    --font-size-30: clamp(17px, calc(30 * var(--u)), 30px);
    --font-size-25: clamp(16px, calc(25 * var(--u)), 25px);
    --font-size-20: clamp(14px, calc(20 * var(--u)), 20px);

    --line-height: 1.25;
    --line-height-tight: 1.1;

    /* Abstände — benannt nach dem Design-Wert bei 1505px */
    --space-10: max(6px, calc(10 * var(--u)));
    --space-20: max(12px, calc(20 * var(--u)));
    --space-30: max(16px, calc(30 * var(--u)));
    --space-40: max(20px, calc(40 * var(--u)));
    --space-60: max(28px, calc(60 * var(--u)));
    --space-80: max(36px, calc(80 * var(--u)));

    /* Linien & Rahmen */
    --rule-thick: max(6px, calc(13 * var(--u)));
    --rule-medium: max(4px, calc(7 * var(--u)));
    --rule-thin: max(2px, calc(3 * var(--u)));
    --border: 3px;

    /* Bedienelemente */
    --control-height: max(48px, calc(70 * var(--u)));
    --control-height-lg: max(54px, calc(82 * var(--u)));
    --nav-height: max(44px, calc(60 * var(--u)));

    /* werden per JS befüllt: Höhe von Navigation + Wechsler, Position der Wechsler-Linie */
    --sticky-height: 140px;
    --sticky-line: 120px;
}

/* Registrierte Properties: Startwerte = Frühling */
@property --color-brand  { syntax: '<color>'; inherits: true; initial-value: #2eeb1d; }
@property --color-tint   { syntax: '<color>'; inherits: true; initial-value: #bbf6aa; }
@property --color-switch { syntax: '<color>'; inherits: true; initial-value: #ffccb7; }

/* Kürzere Wege, kürzerer Wechsel: die Pille fährt auf schmalen Bildschirmen weniger weit */
@media (max-width: 1000px) {
    :root {
        --season-duration: 0.65s;
    }
}

@media (max-width: 700px) {
    :root {
        --season-duration: 0.45s;
    }
}

[data-theme="herbst"] {
    --color-brand: #ff3438;
    --color-tint: #faceba;
    --color-switch: #b3ffab;
}


/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */

/* Seitenwechsel mit View Transition (Typen setzt das Inline-Script im <head>):
   - overlay-open:  Unterseite schiebt sich von unten über die stehende Startseite
   - overlay-close: Unterseite verschwindet nach unten, die Startseite dahinter bleibt stehen
   - sonst:         Überblenden */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.35s;
}

/* Die Gruppe würde sonst Größe/Position zwischen alter und neuer Seite interpolieren,
   dann „bewegt“ sich die Seite dahinter – deshalb nur die Bilder animieren. */
:root:active-view-transition-type(overlay-open),
:root:active-view-transition-type(overlay-close) {
    &::view-transition-group(root),
    &::view-transition-image-pair(root) {
        animation: none;
    }
}

/* Öffnen: die Unterseite schiebt sich vollständig von unten über die stehende Seite */
:root:active-view-transition-type(overlay-open) {
    &::view-transition-old(root) {
        animation: none;
    }

    &::view-transition-new(root) {
        animation: 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both rond-slide-in;
    }
}

/* Schließen: die Unterseite fährt nach unten weg, die Seite dahinter bleibt stehen */
:root:active-view-transition-type(overlay-close) {
    &::view-transition-old(root) {
        z-index: 1; /* alte Ansicht über der neuen */
        animation: 0.4s cubic-bezier(0.6, 0, 0.8, 0.2) both rond-slide-out;
    }

    &::view-transition-new(root) {
        animation: none;
    }
}

@keyframes rond-slide-in {
    from {
        translate: 0 100%;
    }
}

@keyframes rond-slide-out {
    to {
        translate: 0 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

html {
    /* Sprungmarken werden über scroll-margin-block-start der Sections ausgerichtet
       (--sticky-line = Abstand von der Oberkante des Sticky-Bereichs bis zur Linie des Wechslers, per JS).
       Kein zusätzliches scroll-padding, sonst addieren sich beide Werte. */
    scroll-padding-top: 0;

    @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
    }
}

body {
    font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    font-size: var(--font-size-35);
    line-height: var(--line-height);
    color: var(--color-black);
    background: var(--color-white);
    font-feature-settings: "ss03"; /* runde Punkte */

    &.overlay {
        background: var(--color-grey);
    }
}

/* Durchgestrichener Text (CKEditor „Durchstreichen“ → <s>): kräftigere rote Linie statt der dünnen Browser-Vorgabe.
   text-decoration-inset wird bislang nur von neueren Browsern unterstützt und sonst ignoriert. */
s,
del {
    text-decoration: line-through;
    text-decoration-thickness: 0.1em;
    text-decoration-color: red;
    text-decoration-inset: -0.1em;
}

/* Unterstreichungen laufen überall durch die Unterlängen (Eigenschaft wird vererbt) */
body {
    text-decoration-skip-ink: none;
}

/* Textlinks sind standardmäßig unterstrichen; Komponenten (Buttons, Navigation, …) heben das auf. */
a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 0.15em;
    text-decoration-color: currentColor;
    transition: text-decoration-color 0.2s ease;

    &:hover,
    &:focus-visible {
        text-decoration-color: var(--color-brand);
    }
}

/* Fokus: Ring in der Saisonfarbe, knapp am Element. Auf farbigem Grund (Header)
   und bei Elementen, die im Fokus selbst die Saisonfarbe annehmen, schwarz. */
:focus-visible {
    outline: 3px solid var(--color-hover);
    outline-offset: 2px;
}

.site-header :focus-visible {
    outline-color: var(--color-black);
}

::selection {
    background: var(--color-black);
    color: var(--color-white);
}


/* --------------------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------------------- */

/* Typografie */
.font-size-90 { font-size: var(--font-size-90); line-height: var(--line-height-tight); }
.font-size-70 { font-size: var(--font-size-70); line-height: var(--line-height-tight); }
.font-size-40 { font-size: var(--font-size-40); line-height: var(--line-height); }
.font-size-35 { font-size: var(--font-size-35); line-height: var(--line-height); }
.font-size-30 { font-size: var(--font-size-30); line-height: var(--line-height); }
.font-size-25 { font-size: var(--font-size-25); line-height: var(--line-height); }
.font-size-20 { font-size: var(--font-size-20); line-height: var(--line-height); }

.font-bold  { font-weight: 700; }
.font-black { font-weight: 900; }

.text-muted  { color: var(--color-text-muted); }
.text-white  { color: var(--color-white); }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-nowrap { white-space: nowrap; }

.hyphens {
    -webkit-hyphens: auto;
    hyphens: auto;
}

.break-anywhere {
    overflow-wrap: anywhere;
}

/* Fließtext: Absätze mit "Leerzeile" (eine Zeilenhöhe) wie im Design */
.prose {
    > * + * {
        margin-block-start: 1.25em; /* Fallback */
        margin-block-start: 1lh;
    }

    ul,
    ol {
        padding-inline-start: 1.2em;
    }

    li + li {
        margin-block-start: 0.25em;
    }

    /* Zwischenüberschriften aus dem CKEditor (h2/h3): schwer, relativ zur Textgröße,
       mehr Luft davor als danach */
    h2,
    h3 {
        font-weight: 900;
        line-height: var(--line-height-tight);
        text-wrap: balance;
    }

    h2 { font-size: 1.2em; }
    h3 { font-size: 1em; }

    > * + h2,
    > * + h3 {
        margin-block-start: 1.75lh;
    }

    > h2 + *,
    > h3 + * {
        margin-block-start: 0.5lh;
    }
}

/* Zweispaltiger Fließtext (ein Feld), Absätze brechen nicht um; mobil einspaltig */
.columns-2 {
    column-count: 2;
    column-gap: var(--space-40);

    > * {
        break-inside: avoid;
    }

    @media (max-width: 700px) {
        column-count: 1;
    }
}

/* Links */
.underline {
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 0.08em;
}

.underline-hover {
    text-decoration-color: transparent;
    transition: text-decoration-color 0.2s ease;

    &:hover,
    &:focus-visible {
        text-decoration-color: currentColor;
    }
}

/* Listen */
.list-plain {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Hintergründe */
.bg-brand { background: var(--color-brand); }
.bg-tint  { background: var(--color-tint); }
.bg-grey  { background: var(--color-grey); }
.bg-white { background: var(--color-white); }
.bg-black { background: var(--color-black); color: var(--color-white); }

/* Layout */
.container {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--inset);
    box-sizing: border-box;
}

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

.cols-3  { grid-column: span 3; }
.cols-4  { grid-column: span 4; }
.cols-6  { grid-column: span 6; }
.cols-8  { grid-column: span 8; }
.cols-12 { grid-column: span 12; }

@media (max-width: 1000px) {
    .md-cols-6    { grid-column: span 6; }
    .md-cols-full { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .sm-cols-full { grid-column: 1 / -1; }
    .sm-text-left { text-align: left; }
}

.flex            { display: flex; }
.flex-wrap       { flex-wrap: wrap; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.gap-20 { gap: var(--space-20); }
.row-gap-20 { row-gap: var(--space-20); }
.gap-30 { gap: var(--space-30); }
.gap-40 { gap: var(--space-40); }

/* Vertikaler Rhythmus: Abstand zwischen direkten Kindern */
.stack-10 > * + * { margin-block-start: var(--space-10); }
.stack-20 > * + * { margin-block-start: var(--space-20); }
.stack-30 > * + * { margin-block-start: var(--space-30); }
.stack-40 > * + * { margin-block-start: var(--space-40); }
.stack-60 > * + * { margin-block-start: var(--space-60); }
.stack-80 > * + * { margin-block-start: var(--space-80); }

.mt-10 { margin-block-start: var(--space-10); }
.mt-20 { margin-block-start: var(--space-20); }
.mt-30 { margin-block-start: var(--space-30); }
.mt-40 { margin-block-start: var(--space-40); }
.mt-60 { margin-block-start: var(--space-60); }
.mt-80 { margin-block-start: var(--space-80); }

.indent-40 { padding-inline-start: var(--space-40); }
.indent-60 { padding-inline-start: var(--space-60); }

/* Smartphone: kein Einzug */
@media (max-width: 700px) {
    .indent-40,
    .indent-60 {
        padding-inline-start: 0;
    }
}

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

.skip-link {
    position: absolute;
    top: var(--space-10);
    left: var(--space-10);
    z-index: 100;
    padding: var(--space-10) var(--space-20);
    background: var(--color-black);
    color: var(--color-white);
    font-weight: 900;
    text-decoration: none;
}


/* --------------------------------------------------------------------------
   4. Komponenten
   Natives CSS-Nesting: `&` verweist auf den Elternselektor; BEM-Elemente
   (.block__element) werden als vollständige Klassen verschachtelt, da `&__x`
   im Gegensatz zu Sass nicht unterstützt wird.
   -------------------------------------------------------------------------- */

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

.site-header {
    background: var(--color-brand);

    .container {
        container-type: inline-size;
        display: flex;
        align-items: center;
        gap: var(--space-60);
        min-height: calc(211 * var(--u));
        padding-block: var(--space-40);
    }
}

.site-logo-link {
    flex: none;
    display: block;
}

.site-logo {
    width: clamp(56px, calc(115 * var(--u)), 115px);
    height: auto;
    animation: rond-spin 48s linear infinite;

    @media (prefers-reduced-motion: reduce) {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root,
    a,
    .season-switch .season-switch__button {
        transition: none;
    }
}

@keyframes rond-spin {
    to {
        transform: rotate(1turn);
    }
}

/* Titelgröße aus der Container-Breite: bei 7.55cqi füllt der Text die Zeile neben dem Logo
   bis zum Container-Rand – auch mit reserviertem Scrollbalken. */
.site-title {
    font-size: clamp(34px, 7.55cqi, 104px);
    font-weight: 900;
    line-height: 1;
    margin: 0;
}

/* Sticky-Bereich: Navigation + Saison-Wechsler --------------------------- */

.site-sticky {
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Smartphone: der Sticky-Bereich bewegt sich pixelgenau mit dem Inhalt – beim Runterscrollen
   schiebt er sich Stück für Stück hinaus, beim Hochscrollen sofort wieder herein.
   Den Versatz (--sticky-offset) setzt rond.js. */
@media (max-width: 700px) {
    .site-sticky {
        translate: 0 calc(-1 * var(--sticky-offset, 0px));
        will-change: translate;
    }
}

/* Navigation: randlos, die Punkte füllen die Zeile (auch nach Umbruch) */
.site-nav {
    ul {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-10);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    li {
        flex: 1 1 auto;
    }

    a {
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        min-height: var(--nav-height);
        padding-inline: var(--space-20);
        background: var(--color-black);
        color: var(--color-white);
        font-size: var(--font-size-30);
        font-weight: 900;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;

        &:hover,
        &:focus-visible {
            background: var(--color-hover);
            color: var(--color-black);
        }

        /* Aktiver Abschnitt: Text in der Saisonfarbe statt Unterstreichung */
        &[aria-current] {
            color: var(--color-brand);
        }

        &[aria-current]:hover,
        &[aria-current]:focus-visible {
            color: var(--color-black);
        }

        &:focus-visible {
            outline-color: var(--color-black);
            outline-offset: -6px;
        }
    }

    @media (max-width: 700px) {
        ul {
            gap: var(--space-10);
        }

        a {
            min-height: 40px;
            font-size: 15px;
        }
    }
}

/* Saison-Wechsler: Linie über die volle Breite, Pille links (Frühling) bzw. rechts (Herbst) */
.season-switch {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        top: 50%;
        height: 4px;
        margin-top: -2px;
        background: var(--color-black);
    }

    .container {
        position: relative;
        display: flex;
        justify-content: flex-start;
        padding-block: var(--space-20);
    }

    /* Herbst: Pille rechts. left (Containerbreite) und translate (eigene Breite)
       sind animierbar – die Pille fährt beim Wechsel hinüber. */
    [data-theme="herbst"] & .season-switch__button {
        left: 100%;
        translate: -100% 0;
    }

    .season-switch__button {
        position: relative;
        left: 0;
        translate: 0 0;
        transition: left var(--season-duration) ease-in-out, translate var(--season-duration) ease-in-out;
        padding: 0.2em 1.4em 0.25em;
        outline-offset: 1px;
        border: var(--border) solid var(--color-black);
        border-radius: 999px;
        background: var(--color-switch);
        color: var(--color-black);
        font-size: var(--font-size-20);
        font-weight: 900;
        line-height: 1.2;
        cursor: pointer;

        &:hover,
        &:focus-visible {
            background: var(--color-white);
        }
    }

    @media (max-width: 700px) {
        .container {
            padding-block: var(--space-10);
        }

        .season-switch__button {
            font-size: 14px;
        }
    }
}

/* Sections & Überschriften ----------------------------------------------- */

.section {
    padding-block: var(--space-60) var(--space-80);
    /* Beim Anspringen liegt die Linie des Saison-Wechslers genau auf der Section-Oberkante */
    scroll-margin-block-start: var(--sticky-line, var(--sticky-height));

    /* Erster Abschnitt: Hintergrund liegt hinter Navigation + Saison-Wechsler */
    &.section--under-sticky {
        margin-block-start: calc(-1 * var(--sticky-height));
        padding-block-start: calc(var(--sticky-height) + var(--space-60));
        scroll-margin-block-start: 0;
    }
}

/* Überschriften mit Linie: text-box trimmt Versalhöhe/Grundlinie, damit der Abstand
   zur Linie von der Grundlinie aus zählt (ohne Unterstützung bleibt etwas mehr Luft). */
.headline {
    font-size: var(--font-size-70);
    font-weight: 900;
    line-height: var(--line-height-tight);
    text-box: trim-both cap alphabetic;
    padding-block-end: var(--space-30);
    border-block-end: var(--rule-thick) solid var(--color-black);
    margin-block-end: var(--space-60);
}

.subheadline {
    font-size: var(--font-size-35);
    font-weight: 900;
    line-height: var(--line-height);
    text-box: trim-both cap alphabetic;
    padding-block-end: var(--space-30);
    border-block-end: var(--rule-medium) solid var(--color-black);
    margin-block-end: var(--space-30);
}

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

.btn {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--control-height);
    padding: 0.35em var(--space-30);
    border: 0;
    border-radius: 0;
    background: var(--color-black);
    color: var(--color-white);
    font-size: var(--font-size-35);
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;

    &:hover,
    &:focus-visible {
        background: var(--color-hover);
        color: var(--color-black);
    }

    &:focus-visible {
        outline-color: var(--color-black);
    }

    &.btn-lg {
        min-height: var(--control-height-lg);
        font-size: var(--font-size-40);
    }

    &.btn-block {
        display: flex;
        width: 100%;
    }

    /* Pfeil-Button ("mehr"): Form über ::before, damit der Fokusring nicht abgeschnitten wird */
    &.btn-arrow {
        position: relative;
        isolation: isolate;
        justify-content: center;
        min-width: clamp(120px, calc(203 * var(--u)), 203px);
        padding-inline: var(--space-20) calc(var(--space-20) + 0.45em); /* rechts zusätzlich die Spitze (≈15 % der Breite) */
        background: transparent;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            background: var(--color-black);
            clip-path: polygon(0 0, 84.4% 0, 100% 50%, 84.4% 100%, 0 100%);
        }

        &:hover,
        &:focus-visible {
            background: transparent;

            &::before {
                background: var(--color-hover);
            }
        }
    }
}

/* Button mit Beschriftung daneben ("Öffnen — Detail zu den Videos") */
.btn-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-20);
    text-decoration: none;

    &:hover .btn,
    &:focus-visible .btn {
        background: var(--color-hover);
        color: var(--color-black);
    }
}

/* Formulare ---------------------------------------------------------------- */

.label {
    display: block;
    font-size: var(--font-size-35);
    font-weight: 900;
    line-height: var(--line-height);
    margin-block-end: var(--space-10);
}

.input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--control-height);
    padding: 0.3em var(--space-30);
    border: var(--border) solid var(--color-black);
    border-radius: 0;
    background: var(--color-white);
    color: var(--color-black);
    font-size: var(--font-size-35);
    font-weight: 900;
    line-height: var(--line-height);

    &::placeholder {
        color: var(--color-text-muted);
        opacity: 1;
    }

    /* Fokus: Outline liegt exakt auf dem Rahmen (Rahmen wird farbig), über den Nachbarfeldern */
    &:focus-visible {
        position: relative;
        z-index: 1;
        outline-width: var(--border);
        outline-offset: calc(-1 * var(--border));
    }

    &.input-lg {
        min-height: var(--control-height-lg);
    }

    /* Textarea: startet zweizeilig und wächst mit dem Inhalt */
    &:is(textarea) {
        min-height: calc(2lh + 0.6em + 2 * var(--border));
        resize: none;
        field-sizing: content;
    }
}

/* Felder stoßen mit geteiltem Rahmen aneinander (−3px) */
.form-sign,
.form-contact {
    display: grid;

    /* Button füllt seinen Grid-Bereich (kein width: 100%, sonst verschiebt der negative Rand) */
    .btn {
        width: auto;
        justify-self: stretch;

        &:focus-visible {
            position: relative;
            z-index: 1;
            outline-offset: 1px;
        }
    }
}

/* Deklaration unterschreiben: Name | Organisation  /  E-Mail | Abschicken (Button nur so breit wie nötig) */
.form-sign {
    grid-template-columns: 1fr 1fr auto;
    grid-template-areas:
        "name org org"
        "email email submit";

    .form-sign__name   { grid-area: name; }
    .form-sign__org    { grid-area: org; margin-inline-start: calc(-1 * var(--border)); }
    .form-sign__email  { grid-area: email; margin-block-start: calc(-1 * var(--border)); }
    .form-sign__submit { grid-area: submit; margin-block-start: calc(-1 * var(--border)); margin-inline-start: calc(-1 * var(--border)); }

    @media (max-width: 700px) {
        grid-template-columns: 1fr;
        grid-template-areas:
            "name"
            "org"
            "email"
            "submit";

        .form-sign__org {
            margin-inline-start: 0;
            margin-block-start: calc(-1 * var(--border));
        }

        .form-sign__submit {
            margin-inline-start: 0;
        }
    }
}

/* Rights of Nature Day unterstützen: Nachricht  /  Name | E-Mail | Abschicken (Button nur so breit wie nötig) */
.form-contact {
    grid-template-columns: 1fr 1fr auto;
    grid-template-areas:
        "message message message"
        "name email submit";

    .form-contact__message { grid-area: message; }
    .form-contact__name    { grid-area: name; margin-block-start: calc(-1 * var(--border)); }
    .form-contact__email   { grid-area: email; margin-block-start: calc(-1 * var(--border)); margin-inline-start: calc(-1 * var(--border)); }
    .form-contact__submit  { grid-area: submit; margin-block-start: calc(-1 * var(--border)); margin-inline-start: calc(-1 * var(--border)); }

    @media (max-width: 700px) {
        grid-template-columns: 1fr;
        grid-template-areas:
            "message"
            "name"
            "email"
            "submit";

        .form-contact__email,
        .form-contact__submit {
            margin-inline-start: 0;
        }
    }
}

.form-note {
    font-size: var(--font-size-25);
    margin-block-start: var(--space-10);
}

/* Rückmeldungen */
.form-message {
    padding: var(--space-20) var(--space-30);
    border: var(--border) solid var(--color-black);
    background: var(--color-white);
    font-size: var(--font-size-25);
    font-weight: 900;

    &.form-message--error {
        background: var(--color-black);
        color: var(--color-white);
    }
}

.form-error {
    margin-block-start: var(--space-10);
    font-size: var(--font-size-25);
    font-weight: 900;
}

/* Tabelle (Programm) -------------------------------------------------------- */

.table-wrap {
    overflow-x: auto;
}

.table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    font-weight: 700;
    line-height: var(--line-height); /* Schriftgröße über font-size-Utility am Element */

    th,
    td {
        border: 0;
        border-block-end: var(--rule-thin) solid var(--color-black);
        padding: var(--space-10) var(--space-20) var(--space-10) 0;
        text-align: left;
        vertical-align: top;
        font-weight: 700;
    }
}

/* Raster mit Trennlinien zwischen den Zeilen (Übersichten): Zellen behalten den
   Rasterabstand, ein Pseudo-Element überbrückt die Lücke, damit die Linie durchläuft */
.grid-lines {
    row-gap: var(--space-40);

    > * {
        position: relative;
        padding-block-end: var(--space-40); /* Abstand zwischen Inhalt und Linie; der Abstand unter der Linie kommt aus row-gap */
        border-block-end: var(--rule-medium) solid var(--color-black);

        &::after {
            content: "";
            position: absolute;
            inset-inline-start: 100%;
            bottom: calc(-1 * var(--rule-medium));
            width: var(--space-40);
            height: var(--rule-medium);
            background: var(--color-black);
        }
    }

    /* Letzte Zelle einer Zeile ohne Brücke: 3 Spalten (Desktop), 2 (bis 1000px), 1 (bis 700px) */
    > *:nth-child(3n)::after { display: none; }

    @media (max-width: 1000px) {
        > *:nth-child(n)::after  { display: block; }
        > *:nth-child(2n)::after { display: none; }
    }

    @media (max-width: 700px) {
        > *:nth-child(n)::after { display: none; }
    }
}

/* Karten (Videos, News) ---------------------------------------------------- */

.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    margin: 0;
}

/* Medienfläche 3:2 mit Platzhalterfarbe – in Karten und in der News-Übersicht */
.card__media {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--color-placeholder);
    overflow: hidden;

    img,
    video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    video {
        background: var(--color-black);
    }
}

/* Hochformat (Grußbotschaften) */
.card__media--portrait {
    aspect-ratio: 3 / 4;
}

/* Video ohne Vorschaubild: das Video selbst liefert die Vorschau, keine graue Fläche */
.card__media--video {
    background: var(--color-black);
}

/* Titel in News-Karten und -Listen: engere Zeilenhöhe, etwas Luft zum Text darunter */
.card-link h3,
.news-list h2 {
    line-height: var(--line-height-tight);
    margin-block-end: var(--space-10);
}

/* Karte als Link: keine Unterstreichung, Titel unterstreicht bei Hover/Fokus */
.card-link {
    color: inherit;
    text-decoration: none;

    &:hover,
    &:focus-visible {
        h2,
        h3 {
            text-decoration: underline;
            text-underline-offset: 0.15em;
            text-decoration-thickness: 0.08em;
        }
    }
}

/* News-Übersicht: kleines Bild links, Text rechts, Trennlinien */
.news-list {
    display: grid;
    row-gap: var(--space-40);

    li {
        padding-block-end: var(--space-40); /* Abstand Inhalt → Linie; darunter row-gap */
        border-block-end: var(--rule-medium) solid var(--color-black);
    }

    .news-list__item {
        display: grid;
        grid-template-columns: clamp(100px, calc(180 * var(--u)), 180px) 1fr;
        gap: var(--space-40);
        align-items: start;
        color: inherit;
        text-decoration: none;

        &:hover,
        &:focus-visible {
            h2 {
                text-decoration: underline;
                text-underline-offset: 0.15em;
                text-decoration-thickness: 0.08em;
            }
        }

        /* Schmale Bildschirme: Bild über dem Text */
        @media (max-width: 480px) {
            grid-template-columns: 1fr;
            gap: var(--space-20);
        }
    }
}

.play {
    position: absolute;
    inset: 0;
    display: block;
    margin: auto;
    width: clamp(56px, calc(101 * var(--u)), 101px);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;

    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

/* Carousel (Videos, News): dreispaltiges Raster nur, solange drei Karten nebeneinander
   passen (ab 1000px); darunter horizontal scrollbar mit Scroll-Snap, Pfeile setzt rond.js ein */
.carousel__controls {
    display: none;
}

@media (max-width: 1000px) {
    .carousel__track {
        --carousel-item: clamp(220px, 70%, 420px);
        display: flex;
        gap: var(--space-30);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        /* Karten laufen bis an den Bildschirmrand; die aktive Karte rastet mittig ein.
           Erste und letzte Karte bleiben am Rand (kein zusätzlicher Innenabstand). */
        margin-inline: calc(-1 * var(--inset));
        padding-inline: var(--inset);
        padding-block-end: var(--space-10);

        &::-webkit-scrollbar {
            display: none;
        }

        &:focus-visible {
            outline-offset: -3px;
        }
    }

    .carousel__item {
        flex: 0 0 var(--carousel-item);
        scroll-snap-align: center;
    }

    .carousel__controls {
        display: flex;
        justify-content: flex-end;
        gap: var(--space-30);
        margin-block-start: var(--space-20);
    }

    /* Pfeil-Buttons: nur das Pfeil-Icon, Farbwechsel bei Hover/Fokus */
    .carousel__button {
        display: inline-flex;
        align-items: center;
        padding: var(--space-10);
        border: 0;
        background: transparent;
        color: var(--color-black);
        cursor: pointer;

        .icon--arrow {
            width: clamp(56px, calc(80 * var(--u)), 80px);
            height: auto;
        }

        &:hover,
        &:focus-visible {
            color: var(--color-hover);
        }

        &[disabled] {
            opacity: 0.3;
            cursor: default;
            color: var(--color-black);
        }
    }
}

/* Bild (Sub/Objekt-Schild) */
.figure {
    margin: 0;

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

/* Overlay-Seiten (Schließen-Leiste, Listen) --------------------------------- */

.close-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    padding-block: var(--space-20);

    .container {
        display: flex;
        justify-content: flex-end;
    }
}

.close-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-white);
    font: inherit;
    cursor: pointer;
    font-size: var(--font-size-35);
    font-weight: 900;
    line-height: 1;
    text-decoration: none;

    &:hover,
    &:focus-visible {
        color: var(--color-hover);
    }
}

.list-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    font-weight: 700;

    li {
        padding: var(--space-10) var(--space-10);
        border-block-end: var(--rule-thin) solid var(--color-black);
    }
}

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

.site-footer__contact {
    padding-block: var(--space-80) var(--space-40);

    /* Unterstreichung immer vorhanden, aber transparent – so lässt sie sich einblenden */
    a {
        font-size: var(--font-size-90);
        font-weight: 900;
        line-height: var(--line-height-tight);
        text-decoration: underline;
        text-decoration-color: transparent;
        text-underline-offset: 0.12em;
        text-decoration-thickness: 0.1em;
        transition: text-decoration-color 0.2s ease;
        overflow-wrap: anywhere;

        &:hover,
        &:focus-visible {
            text-decoration-color: currentColor;
        }
    }
}

.site-footer__bar {
    padding-block: var(--space-20);

    /* Rechtliches links, Sprachumschalter rechts; bricht auf schmalen Bildschirmen um */
    .site-footer__row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: var(--space-10) var(--space-60);
    }

    nav {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-10) var(--space-60);
    }

    a {
        font-size: var(--font-size-40);
        font-weight: 700;
        text-decoration: none;

        &:hover,
        &:focus-visible {
            color: var(--color-hover);
        }
    }
}

/* Sprachumschalter im Footer: rechtsbündig (auch nach Umbruch), Kürzel nebeneinander,
   aktive Sprache in der Markenfarbe */
.lang-switch {
    margin-inline-start: auto;

    ul {
        display: flex;
        gap: var(--space-30);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    a[aria-current] {
        color: var(--color-brand);
    }
}

/* Sprach-Banner (nur deutsche Site, eingeblendet per rond.js, wenn der Browser nicht auf Deutsch steht):
   schwebt am unteren Viewport-Rand über der Seite. Links | Hinweis | Schließen; schmal: Hinweis in zweiter Zeile */
.lang-banner {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 30;
    /* Höhe ergibt sich aus dem Kreuz-Symbol (Figma: 82 px Balken, 85 px Symbolbox) */
    padding-block: 0 env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 12px rgb(0 0 0 / 0.2);

    .lang-banner__inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: baseline; /* Links und Hinweis auf einer Grundlinie */
        column-gap: var(--space-60);
        row-gap: var(--space-10);
    }

    .lang-banner__links {
        margin: 0;
        padding-block: 0.475em; /* ergibt mit der Zeile ≈ 82 px Balkenhöhe wie in Figma */
        font-size: var(--font-size-40);
        font-weight: 900;
        line-height: var(--line-height-tight);

        a {
            color: inherit;
            text-decoration: underline;
            text-underline-offset: 0.12em;
            text-decoration-thickness: 0.135em;
            text-decoration-color: currentColor;

            &:hover,
            &:focus-visible {
                color: var(--color-hover);
            }
        }
    }

    .lang-banner__hint {
        margin: 0;
        font-size: var(--font-size-25);
        font-weight: 900;
        line-height: var(--line-height);
    }

    .lang-banner__close {
        appearance: none;
        border: 0;
        background: transparent;
        color: inherit;
        --close-size: clamp(56px, calc(85 * var(--u)), 85px);
        align-self: center; /* Kreuz mittig, nicht an der Text-Grundlinie */
        padding: 0;
        /* Luft im SVG (je 25 %) herausrechnen: rechts ragt das Symbol wie in Figma über den Inset,
           oben/unten bestimmt es so nicht die Zeilenhöhe */
        margin-block: calc(var(--close-size) * -0.25);
        margin-inline-end: calc(var(--close-size) * -0.25);
        line-height: 0;
        cursor: pointer;

        /* SVG enthält rundherum je 25 % Luft (Kreuz ≈ 50 % der Fläche), daher größer setzen */
        svg {
            display: block;
            width: var(--close-size);
            height: auto;
        }

        &:hover,
        &:focus-visible {
            color: var(--color-hover);
        }
    }

    /* Zweizeilig, bevor der Hinweis umbrechen müsste: Links + Kreuz oben, Hinweis darunter */
    @media (max-width: 1000px) {
        .lang-banner__inner {
            grid-template-columns: 1fr auto;
            row-gap: 0;
        }

        /* Abstände in em, damit sie mit der Schriftgröße der Links bzw. des Hinweises mitwachsen */
        .lang-banner__links {
            padding-block: 0.5em 0.5em;
        }

        .lang-banner__close {
            grid-row: 1;
            grid-column: 2;
        }

        .lang-banner__hint {
            grid-row: 2;
            grid-column: 1 / -1;
            padding-block-end: 1em;
        }
    }
}