/* Automatisch erzeugt aus resources/css/site/ – nicht direkt bearbeiten. */

/* --- 00-layers.css --- */
/*
 * Zwei Raben – Stylesheet
 *
 * Die Dateien in diesem Ordner werden alphabetisch zu
 * public/assets/build/site.css zusammengefügt (automatisch, kein Build-Schritt).
 *
 * Aufbau:
 *   00–09  Grundlagen: Ebenen, Tokens, Schriften, Reset, Typografie
 *   10–19  Layout: Abschnitte, Container
 *   20–29  Seitenrahmen: Kopf, Navigation, Brotkrumen, Fuß
 *   30–69  Komponenten und Blöcke
 *   90–99  Hilfsklassen
 *
 * Cascade Layers legen die Rangfolge fest – spätere Ebenen gewinnen,
 * unabhängig von der Spezifität. So bleiben Selektoren kurz.
 */
@layer reset, base, layout, components, utilities;

/* --- 01-tokens.css --- */
/*
 * Design-Tokens: alle Farben, Schriften, Größen und Abstände an einer Stelle.
 * Werte übernommen aus dem bisherigen Theme (puck, Zwei-Raben-Anpassung).
 *
 * Hinweis Schriftgrößen: html hat 62.5 % → 1rem = 10px (bei Standard-
 * einstellung des Browsers). Die fließenden Größen entsprechen der bisherigen
 * RFS-Logik: unterhalb von 1000px Fensterbreite schrumpfen sie, darüber gilt
 * der Maximalwert.
 */
@layer base {
    :root {
        /* Markenfarben */
        --raben-black: #000;
        --raben-blue: #6392a4;
        --raben-blue-dark: #4a6d7a;
        --raben-blue-light: #e7eef1;
        --raben-grey-blue: rgb(98 146 164 / 30%);
        --raben-orange: #ffbc00;

        /*
         * Palette für Veranstaltungen und Jahresfarben: --palette-<schlüssel>.
         * Die Werte pflegt die Redaktion unter Einstellungen → Farben; das Layout
         * gibt sie im <head> aus (siehe src/Content/Palette.php).
         */

        /* Farbschema (wird in farbigen Abschnitten überschrieben) */
        --color: var(--raben-black);
        --color-headline: var(--raben-blue);
        --color-accent: var(--raben-blue-dark);
        --color-link: var(--raben-blue-dark);
        --color-link-hover: var(--raben-blue);
        --background: #fff;
        --focus-ring: rgb(99 146 164 / 45%);

        /* Schriften */
        --font-text: "Nunito", system-ui, sans-serif;
        --font-headline: "PT Serif", Georgia, serif;

        --fs-h1: min(5rem, calc(1.76rem + 3.24vw));
        --fs-h2: min(4rem, calc(1.66rem + 2.34vw));
        --fs-h3: min(3rem, calc(1.56rem + 1.44vw));
        --fs-h4: min(2rem, calc(1.46rem + 0.54vw));
        --fs-big: min(2.4rem, calc(1.5rem + 0.9vw));
        --fs-basic: min(1.8rem, calc(1.44rem + 0.36vw));
        --fs-small: min(1.5rem, calc(1.41rem + 0.09vw));
        --fs-extra-small: 1.3rem;

        /* Abstände */
        --size-xxs: 1.2rem;
        --size-xs: min(1.8rem, calc(1.44rem + 0.36vw));
        --size-s: min(2.4rem, calc(1.5rem + 0.9vw));
        --size-m: min(3.6rem, calc(1.62rem + 1.98vw));
        --size-l: min(6rem, calc(1.86rem + 4.14vw));
        --size-xl: min(9.6rem, calc(2.22rem + 7.38vw));
        --size-xxl: min(14.4rem, calc(2.7rem + 11.7vw));

        /* Raster: 12 Spalten à 100rem Gesamtbreite */
        --gutter-x: var(--size-xs);
        --gutter-y: var(--size-s);
        --gutter-outer: 3.6rem;
        --width-grid: 100rem;
        --width-container: calc(var(--width-grid) + 2 * var(--gutter-outer));
        --width-narrow: calc(73.3rem + 2 * var(--gutter-outer)); /* 8 von 12 Spalten */

        /* Formen */
        --radius-s: 0.5rem;
        --radius-m: 1.5rem;
        --shadow-s: 0 3px 4px rgb(0 0 0 / 12%);
        --shadow-m: 0 5px 7px rgb(0 0 0 / 18%);

        /* Bewegung: Dauer und Kurven für Übergänge und den Slider */
        --duration-fast: 0.15s;
        --duration-base: 0.25s;
        --duration-slow: 0.45s;
        --ease-out: cubic-bezier(0.25, 1, 0.5, 1); /* weich auslaufend, wie bisher im Slider */
        --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

        /* Kopfbereich */
        --header-bar-height: 9.2rem;
        --backdrop: rgb(55 60 60 / 50%);
    }

    @media (max-width: 56.25rem) {
        :root {
            --gutter-outer: 5vw;
        }
    }

    /* Farbschema „hellblau“ für Abschnitte, Brotkrumen usw. */
    .scheme-light {
        --background: var(--raben-blue-light);
        --color-headline: var(--raben-blue);
        --color-link: var(--raben-blue);
        --color-link-hover: var(--raben-blue-dark);
    }
}

/* --- 02-fonts.css --- */
/* Schriften liegen lokal – keine Verbindung zu Google Fonts (DSGVO). */

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/nunito-v25-latin-300.woff2") format("woff2");
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/nunito-v25-latin-regular.woff2") format("woff2");
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/nunito-v25-latin-500.woff2") format("woff2");
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/nunito-v25-latin-700.woff2") format("woff2");
}

@font-face {
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/pt-serif-v18-latin-regular.woff2") format("woff2");
}

@font-face {
    font-family: "PT Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/pt-serif-v18-latin-italic.woff2") format("woff2");
}

@font-face {
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/pt-serif-v18-latin-700.woff2") format("woff2");
}

@font-face {
    font-family: "PT Serif";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/pt-serif-v18-latin-700italic.woff2") format("woff2");
}

/* --- 03-reset.css --- */
/* Schlanker Reset: Browser-Abstände entfernen, Box-Modell vereinheitlichen. */
@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    body,
    h1, h2, h3, h4, h5, h6,
    p, blockquote, figure, figcaption,
    ul, ol, dl, dd,
    fieldset, legend {
        margin: 0;
        padding: 0;
    }

    ul,
    ol {
        list-style: none;
    }

    img,
    picture,
    video,
    iframe,
    svg {
        display: block;
        max-width: 100%;
    }

    img,
    video {
        height: auto;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
        color: inherit;
    }

    button {
        cursor: pointer;
        border: 0;
        padding: 0;
        background: transparent;
    }

    dialog {
        padding: 0;
        border: 0;
        color: inherit;
    }
}

/* --- 04-base.css --- */
/* Grundtypografie und globale Elemente */
@layer base {
    html {
        font-size: 62.5%;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        scroll-padding-top: calc(var(--header-bar-height) + var(--size-s));
    }

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

    body {
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        font-family: var(--font-text);
        font-size: var(--fs-basic);
        font-weight: 300;
        line-height: 1.36;
        color: var(--color);
        background: var(--background);
        overflow-x: clip;
    }

    main {
        flex-grow: 1;
    }

    main:focus {
        outline: none;
    }

    h1, .h1,
    h2, .h2,
    h3, .h3,
    h4, .h4 {
        font-family: var(--font-headline);
        font-weight: 400;
        font-style: italic;
        line-height: 1.15;
        text-wrap: balance;
        color: var(--color-headline);
    }

    h1, .h1 {
        font-size: var(--fs-h1);
        padding-bottom: var(--size-m);
    }

    h2, .h2 {
        font-size: var(--fs-h2);
        padding-bottom: var(--size-s);
    }

    h3, .h3 {
        font-size: var(--fs-h3);
        line-height: 1.3;
        padding-bottom: var(--size-xs);
    }

    h4, .h4 {
        font-size: var(--fs-h4);
        line-height: 1.36;
        padding-bottom: var(--size-xs);
        color: inherit;
    }

    p {
        padding-bottom: var(--size-xs);
    }

    strong,
    b {
        font-weight: 700;
    }

    small,
    figcaption {
        font-size: var(--fs-small);
    }

    figcaption {
        padding-top: 1em;
    }

    a {
        color: inherit;
        text-decoration: none;
        transition: color 0.15s, opacity 0.15s, background-color 0.15s;
    }

    hr {
        margin-block: var(--size-s);
        border: 0;
        border-top: 2px solid;
    }

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

    /* Sichtbarer Fokus für Tastaturbedienung */
    :focus-visible {
        outline: 3px solid var(--focus-ring);
        outline-offset: 2px;
        border-radius: var(--radius-s);
    }
}

/* --- 10-layout.css --- */
/* Abschnitte und Container */
@layer layout {
    /*
     * Abschnitt: jeder Block ist ein <section class="section">.
     * Weiße Abschnitte haben Außenabstand, farbige Innenabstand.
     */
    .section {
        position: relative;
        width: 100%;
        margin-block: var(--size-m);
        color: var(--color);
        background: var(--background);
    }

    .section--light {
        --background: var(--raben-blue-light);
        --color-headline: var(--raben-blue);
        --color-link: var(--raben-blue);
        --color-link-hover: var(--raben-blue-dark);
        padding-block: calc(var(--size-m) * 2);
    }

    /* Aufeinanderfolgende farbige Abschnitte ohne weiße Lücke */
    .section--light + .section--light {
        margin-top: calc(var(--size-m) * -1);
        padding-top: 0;
    }

    /* Erster Abschnitt mit Hintergrund schließt an den Kopf an */
    .main > .section--light:first-child {
        margin-top: 0;
    }

    /* Luft zum Fuß */
    .main > .section:last-child {
        margin-bottom: 0;
        padding-bottom: var(--size-xl);
    }

    .container {
        width: 100%;
        max-width: var(--width-container);
        margin-inline: auto;
        padding-inline: var(--gutter-outer);
    }

    .container--narrow {
        max-width: var(--width-narrow);
    }

    /*
     * Abschnittsüberschrift, immer zentriert.
     * --decorated: mit waagerechter Linie hinter dem Text.
     */
    .section-title {
        position: relative;
        text-align: center;
    }

    .section-title > span {
        position: relative;
        z-index: 1;
        display: inline-block;
        padding-inline: var(--size-xxs);
        background: var(--background);
    }

    .section-title--decorated::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        top: calc(0.575em);
        height: 1px;
        background: var(--raben-blue);
    }
}

/* --- 20-header.css --- */
/* Kopfbereich: Logo, Burger, Brotkrumen */
@layer components {
    .site-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: #fff;
        border-bottom: 2px solid var(--background);
        transition: transform 0.3s;
    }

    /* Beim Herunterscrollen ausblenden, beim Hochscrollen zeigen (JS setzt die Klasse) */
    .site-header.is-hidden {
        transform: translateY(-100%);
    }

    @media (prefers-reduced-motion: reduce) {
        .site-header {
            transition: none;
        }
    }

    .site-header__bar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        min-height: var(--header-bar-height);
        padding-inline: var(--gutter-outer);
    }

    .site-header__logo {
        grid-column: 2;
        display: block;
        width: 24rem;
        transition: transform 0.4s;
    }

    .site-header__logo:hover,
    .site-header__logo:focus-visible {
        transform: scale(1.1);
    }

    .site-header__logo img {
        width: 100%;
    }

    /* Burger-Schaltfläche */
    .burger {
        grid-column: 3;
        justify-self: end;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 4rem;
        height: 3rem;
        padding: 0.5rem;
        margin-right: -0.5rem;
        color: var(--color-link);
        border-radius: var(--radius-s);
        transition: color 0.15s;
    }

    .burger:hover,
    .burger:focus-visible {
        color: var(--color-link-hover);
    }

    .burger__slice {
        height: 3px;
        width: 100%;
        background: currentColor;
        border-radius: 2px;
    }

    /* Brotkrumen */
    .breadcrumbs {
        --background: var(--raben-blue-light);
        background: var(--background);
        padding-inline: var(--gutter-outer);
        overflow-x: auto;
    }

    .breadcrumbs__list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
        font-size: var(--fs-small);
    }

    .breadcrumbs__item {
        padding-block: 0.6rem;
    }

    .breadcrumbs__item + .breadcrumbs__item::before {
        content: "/";
        margin-right: 0.6rem;
    }

    .breadcrumbs a:hover,
    .breadcrumbs a:focus-visible {
        color: var(--raben-blue-dark);
        text-decoration: underline;
    }

    /* Sprunglink für Tastatur/Screenreader */
    .skip-link {
        position: absolute;
        left: var(--gutter-outer);
        top: -10rem;
        z-index: 200;
        padding: 1rem 1.6rem;
        background: #fff;
        color: var(--color-link);
        font-weight: 700;
        box-shadow: var(--shadow-m);
    }

    .skip-link:focus {
        top: 1rem;
    }
}

/* --- 21-navigation.css --- */
/* Seitennavigation: fährt als <dialog> von rechts herein */
@layer components {
    .site-nav {
        /* Dialog am rechten Rand, volle Höhe */
        position: fixed;
        inset: 0 0 auto auto;
        width: 100vw;
        max-width: 33.2rem;
        height: fit-content;
        max-height: 100dvh;
        margin: 0;
        padding: 0 var(--gutter-outer) var(--size-m);
        overflow-y: auto;
        background: #fff;
        border-bottom-left-radius: var(--radius-s);
        box-shadow: var(--shadow-s);
    }

    @media (max-width: 41.25rem) {
        .site-nav {
            max-width: 85%;
        }
    }

    .site-nav::backdrop {
        background: var(--backdrop);
    }

    @media (prefers-reduced-motion: no-preference) {
        .site-nav[open] {
            animation: site-nav-in 0.27s ease-out;
        }

        .site-nav[open]::backdrop {
            animation: fade-in 0.27s ease-out;
        }
    }

    @keyframes site-nav-in {
        from {
            opacity: 0;
            transform: translateX(11rem);
        }
    }

    @keyframes fade-in {
        from {
            opacity: 0;
        }
    }

    .site-nav__header {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: var(--header-bar-height);
        border-bottom: 2px solid color-mix(in srgb, var(--color-link), transparent);
    }

    .site-nav__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        margin-right: -0.5rem;
        color: var(--color-link);
        border-radius: var(--radius-s);
        transition: color 0.15s;
    }

    .site-nav__close:hover,
    .site-nav__close:focus-visible {
        color: var(--color-link-hover);
    }

    .site-nav__list {
        padding-top: 2em;
    }

    .site-nav__list > li {
        margin-bottom: 1em;
    }

    .site-nav__link {
        font-weight: 400;
        color: var(--color-link);
    }

    .site-nav__link:hover,
    .site-nav__link:focus-visible {
        color: var(--color-link-hover);
    }

    .site-nav__link.is-active {
        color: var(--color-accent);
        font-weight: 700;
    }
}

/* --- 23-footer.css --- */
/* Seitenfuß */
@layer components {
    .site-footer {
        padding-block: var(--size-m);
    }

    .site-footer__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4em 1.32em;
        font-weight: 400;
    }

    .site-footer a {
        color: var(--color-link);
    }

    .site-footer a:hover,
    .site-footer a:focus-visible {
        color: var(--color-link-hover);
    }

    @media (max-width: 33.75rem) {
        .site-footer__list {
            flex-direction: column;
            align-items: center;
        }
    }

    /* „Nach oben“-Knopf */
    .to-top {
        position: fixed;
        right: var(--gutter-outer);
        bottom: 4rem;
        z-index: 90;
        display: grid;
        place-items: center;
        width: 4rem;
        height: 4rem;
        color: var(--color);
        background: #fff;
        border-radius: var(--radius-s);
        box-shadow: var(--shadow-s);
        transition: transform 0.25s, opacity 0.25s;
    }

    .to-top:hover {
        transform: translateY(-6px);
    }

    .to-top[hidden] {
        display: none;
    }

    @media (max-width: 41.25rem) {
        .to-top {
            display: none;
        }
    }
}

/* --- 30-rich-text.css --- */
/* Fließtext aus dem Editor */
@layer components {
    .rich-text {
        width: 100%;
    }

    .rich-text p:last-child {
        padding-bottom: 0;
    }

    .rich-text a {
        color: var(--color-link);
        text-decoration: underline;
    }

    .rich-text a:hover,
    .rich-text a:focus-visible {
        color: var(--color-link-hover);
    }

    .rich-text ul,
    .rich-text ol {
        padding-bottom: var(--size-xs);
        padding-left: 1.4em;
    }

    .rich-text ul {
        list-style: disc;
    }

    .rich-text ol {
        list-style: decimal;
    }

    .rich-text li + li {
        margin-top: 0.3em;
    }

    .rich-text * + h2 {
        margin-top: var(--size-s);
        font-family: var(--font-text);
        font-style: normal;
        font-size: var(--fs-h3);
    }

    .rich-text * + h3,
    .rich-text * + h4 {
        margin-top: var(--size-xs);
    }

    .rich-text blockquote {
        position: relative;
        padding: 1em 0 var(--size-xs) min(4rem, calc(1.46rem + 2.54vw));
        font-family: var(--font-headline);
        font-style: italic;
        font-size: var(--fs-h4);
        line-height: 1.25;
    }

    .rich-text blockquote::before {
        content: "“";
        position: absolute;
        top: 0;
        left: 0;
        font-size: 3em;
        font-weight: 700;
        line-height: 1;
        color: var(--color-accent);
    }
}

/* --- 40-media.css --- */
/* Bilder, Videos, Bild+Text, Kopfbereich, Galerie */
@layer components {
    .media {
        margin: 0;
    }

    .media__image {
        width: 100%;
        height: auto;
    }

    .media__caption {
        font-size: var(--fs-small);
        padding-top: 0.8em;
        text-align: center;
    }

    .media__copyright {
        display: block;
    }

    .media + .media {
        margin-top: var(--gutter-y);
    }

    /* --- YouTube mit Zwei-Klick-Lösung --------------------------------- */
    .video {
        position: relative;
        aspect-ratio: 16 / 9;
        background: #1d2427;
        overflow: hidden;
    }

    .video__poster,
    .video iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 0;
    }

    .video__play {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: var(--raben-blue-dark);
    }

    .video__icon {
        display: grid;
        place-items: center;
        width: 7rem;
        height: 7rem;
        padding-left: 0.4rem;
        border-radius: 50%;
        background: rgb(255 255 255 / 92%);
        box-shadow: var(--shadow-m);
        transition: transform 0.2s;
    }

    .video__play:hover .video__icon,
    .video__play:focus-visible .video__icon {
        transform: scale(1.08);
    }

    .video__consent {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1.2rem;
        padding: var(--size-s);
        font-size: var(--fs-small);
        color: #fff;
        background: rgb(20 28 31 / 88%);
        overflow-y: auto;
    }

    .video:has(.video__consent:not([hidden])) .video__play {
        visibility: hidden;
    }

    .video__consent[hidden] {
        display: none;
    }

    .video__consent p {
        padding: 0;
    }

    .video__consent a {
        color: #fff;
        text-decoration: underline;
    }

    .video__remember {
        display: flex;
        gap: 0.6em;
        align-items: center;
    }

    .video__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    /* --- Bild + Text ---------------------------------------------------- */
    .media-text {
        display: grid;
        gap: var(--gutter-y) calc(var(--gutter-x) * 2);
        align-items: start;
    }

    @media (min-width: 56.25rem) {
        .media-text--left,
        .media-text--right {
            grid-template-columns: 5fr 6fr;
        }

        .media-text--right {
            grid-template-columns: 6fr 5fr;
        }

        .media-text--right .media-text__media {
            order: 2;
        }
    }

    .media-text--below .media-text__media {
        order: 2;
    }

    .media-text--above,
    .media-text--below {
        max-width: var(--width-narrow);
        margin-inline: auto;
    }

    /* --- Kopfbereich (Bild randlos) ------------------------------------- */
    .cover {
        display: grid;
        padding-block: 0;
    }

    .main > .cover:first-child {
        margin-top: 0;
    }

    @media (min-width: 48.75rem) {
        .cover {
            grid-template-columns: 1fr 1fr;
            min-height: 40rem;
        }

        .cover--right .cover__media {
            order: 2;
        }
    }

    .cover__media {
        position: relative;
        min-height: 26rem;
    }

    .cover__figure,
    .cover__figure .media__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .cover__text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: var(--size-l) var(--gutter-outer);
        text-align: center;
    }

    @media (min-width: 48.75rem) {
        .cover__text {
            padding-inline: var(--size-l);
        }
    }

    .cover__text .section-title {
        padding-bottom: var(--size-s);
    }

    .cover__text .section-title:last-child {
        padding-bottom: 0;
    }

    .rich-text--large {
        font-size: var(--fs-big);
        line-height: 1.25;
    }

    /* --- Galerie -------------------------------------------------------- */
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
        gap: var(--gutter-y) var(--gutter-x);
    }

    .gallery-grid .media + .media {
        margin-top: 0;
    }

    /* Weiches Einblenden geladener Bilder (setzt site.js) */
    .media__image.is-loading {
        opacity: 0;
    }

    .media__image.is-fading {
        animation: fade-in-media var(--duration-slow) var(--ease-out);
    }

    @keyframes fade-in-media {
        from {
            opacity: 0;
        }
    }
}

/* --- 41-carousel.css --- */
/*
 * Slider: native Scroll-Spur mit Einrasten. Die Knöpfe blendet das Skript
 * ein, sobald es mehr Inhalt als Platz gibt.
 */
@layer components {
    .carousel {
        --per-view: 3;
        --gap: var(--gutter-x);
    }

    .carousel__frame {
        position: relative;
    }

    .carousel__track {
        display: flex;
        gap: var(--gap);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-block: 1.6rem;
    }

    .carousel__track::-webkit-scrollbar {
        display: none;
    }

    .carousel__track:focus-visible {
        outline-offset: 4px;
    }

    .carousel__slide {
        flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
        scroll-snap-align: start;
        min-width: 0;
    }

    @media (max-width: 56.25rem) {
        .carousel {
            --per-view: 2;
        }
    }

    @media (max-width: 41.25rem) {
        .carousel {
            --per-view: 1.15;
        }
    }

    /* Vor/Zurück: gelbe Kreise mit Ring wie bisher; Pfeil rückt beim Überfahren nach */
    .carousel__button {
        position: absolute;
        top: 50%;
        z-index: 4;
        display: grid;
        place-items: center;
        width: 5.2rem;
        height: 5.2rem;
        margin-top: -2.6rem;
        color: #fff;
        background: var(--raben-orange);
        border: 0.5rem solid color-mix(in srgb, transparent, var(--raben-blue) 30%);
        border-radius: 50%;
        box-shadow: var(--shadow-s);
        transition: border-color var(--duration-fast) ease-in-out, opacity var(--duration-fast), scale var(--duration-fast);
    }

    .carousel__button svg {
        width: 2.4rem;
        height: 2.4rem;
        transition: translate 0.2s ease-in-out;
    }

    .carousel__button[hidden] {
        display: none;
    }

    .carousel__button:hover,
    .carousel__button:focus-visible {
        border-color: var(--raben-blue);
    }

    .carousel__button--next:hover svg {
        translate: 0.5rem 0;
    }

    .carousel__button--prev:hover svg {
        translate: -0.5rem 0;
    }

    .carousel__button:active {
        scale: 0.94;
    }

    .carousel__button:disabled {
        opacity: 0.4;
        cursor: default;
        border-color: color-mix(in srgb, transparent, var(--raben-blue) 30%);
        scale: 1;
    }

    .carousel__button:disabled svg {
        translate: 0 0;
    }

    .carousel__button--prev {
        left: -2.6rem;
    }

    .carousel__button--next {
        right: -2.6rem;
    }

    @media (max-width: 41.25rem) {
        .carousel__button--prev {
            left: -1rem;
        }

        .carousel__button--next {
            right: -1rem;
        }
    }

    /* Galerie: Bilder in natürlicher Höhe, zentriert */
    .carousel--gallery {
        --per-view: 2;
    }

    .carousel--gallery .carousel__slide {
        scroll-snap-align: center;
        display: flex;
        align-items: center;
    }

    .carousel--gallery .media {
        width: 100%;
    }

    .carousel--gallery .media__image {
        max-height: 48rem;
        width: 100%;
        object-fit: contain;
    }

    @media (max-width: 41.25rem) {
        .carousel--gallery {
            --per-view: 1.1;
        }
    }

    /*
     * Startseiten-Bühne wie bisher: eine Folie in voller Inhaltsbreite (100rem),
     * immer mittig; die Nachbarn liegen hinter einer weißen Milchglas-Fläche.
     */
    /* Breiten über Container-Einheiten (cqi), damit sie in Spur und Folie gleich gerechnet werden */
    .block-stage {
        container-type: inline-size;
    }

    .carousel--stage {
        --per-view: 1;
        --gap: 1.8rem;
        --stage-width: min(var(--width-grid), 100cqi - 2 * var(--gutter-outer));
        --stage-side: calc((100cqi - var(--stage-width)) / 2);
    }

    /* Alle Folien so hoch wie die höchste (Flex streckt die Zeile) */
    .carousel--stage .carousel__track {
        align-items: stretch;
        padding-inline: var(--stage-side);
        scroll-padding-inline: var(--stage-side);
        padding-block: 3.6rem;
    }

    .carousel--stage .carousel__slide {
        display: flex;
        flex-basis: var(--stage-width);
        scroll-snap-align: center;
    }

    .carousel--stage .carousel__slide > * {
        flex: 1;
    }

    /* Milchglas links und rechts der aktiven Folie */
    .carousel--stage .carousel__frame::before,
    .carousel--stage .carousel__frame::after {
        content: "";
        position: absolute;
        inset-block: 0;
        z-index: 3;
        width: var(--stage-side);
        background: rgb(255 255 255 / 90%);
        pointer-events: none;
    }

    .carousel--stage .carousel__frame::before {
        left: 0;
    }

    .carousel--stage .carousel__frame::after {
        right: 0;
    }

    /* Pfeile mittig auf den Kanten der aktiven Folie */
    .carousel--stage .carousel__button--prev {
        left: max(0.4rem, var(--stage-side) - 2.6rem);
    }

    .carousel--stage .carousel__button--next {
        right: max(0.4rem, var(--stage-side) - 2.6rem);
    }

    /* Klick auf eine Nachbarfolie holt sie in die Mitte (setzt site.js) */
    .carousel--stage.is-enhanced .carousel__slide:not(.is-active) {
        cursor: pointer;
    }

    /* Punkte unter der Bühne; die aktive Folie ist ein langer Strich mit Zeitfortschritt */
    .carousel__nav {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.4rem;
        padding-block: 0 1.2rem;
    }

    .carousel__nav[hidden] {
        display: none;
    }

    .carousel__dot {
        position: relative;
        width: 1.35rem;
        height: 1.35rem;
        margin: 0.675rem 0.3rem;
        overflow: hidden;
        background: color-mix(in srgb, var(--raben-blue-dark), transparent 50%);
        border-radius: 0.675rem;
        transition: width 1.2s var(--ease-out), background-color var(--duration-fast);
    }

    /* Größere Klickfläche ohne größeren Punkt */
    .carousel__dot::before {
        content: "";
        position: absolute;
        inset: -1rem -0.4rem;
    }

    .carousel__dot:hover {
        background: var(--raben-blue-dark);
    }

    .carousel__dot[aria-current="true"] {
        width: 4.725rem;
    }

    .carousel__dot[aria-current="true"]::after {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 100%;
        background: var(--raben-blue-dark);
        border-radius: inherit;
    }

    /* Mit Autoplay füllt sich der aktive Strich über die Laufzeit */
    .carousel.is-playing .carousel__dot[aria-current="true"]::after {
        width: 1.35rem;
        animation: carousel-progress var(--autoplay-duration, 8s) linear forwards;
    }

    .carousel.is-paused .carousel__dot[aria-current="true"]::after {
        animation-play-state: paused;
    }

    @keyframes carousel-progress {
        to {
            width: 100%;
        }
    }

    .carousel__toggle {
        display: grid;
        place-items: center;
        width: 3.2rem;
        height: 3.2rem;
        margin-left: 0.8rem;
        color: var(--raben-blue-dark);
        border: 2px solid currentColor;
        border-radius: 50%;
        transition: background-color var(--duration-fast), color var(--duration-fast);
    }

    .carousel__toggle:hover {
        color: #fff;
        background: var(--raben-blue-dark);
    }

    .carousel__toggle svg {
        width: 1.4rem;
        height: 1.4rem;
    }

    /* Folgt ein hellblauer Abschnitt, liegen die Punkte schon auf dessen Fläche – wie bisher */
    .block-stage:has(+ .section--light) .carousel__nav {
        padding-block: 2.6rem 0;
        background: var(--raben-blue-light);
    }

    .block-stage:has(+ .section--light) {
        margin-bottom: 0;
    }

    .block-stage + .section--light {
        margin-top: 0;
        padding-top: var(--size-s);
    }

    /*
     * Zustände, die das Skript setzt:
     * is-animating – Animation läuft, Einrasten kurz aus
     * is-dragging  – mit der Maus gezogen
     * is-enhanced  – Skript aktiv
     * is-playing / is-paused – Autoplay
     */
    .carousel__track.is-animating,
    .carousel__track.is-dragging {
        scroll-snap-type: none;
    }

    .carousel.is-draggable .carousel__track {
        cursor: grab;
    }

    .carousel__track.is-dragging {
        cursor: grabbing;
        user-select: none;
    }

    .carousel__track.is-dragging a {
        pointer-events: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .carousel__button,
        .carousel__button svg,
        .carousel__dot {
            transition: none;
        }
    }
}

/* --- 42-event-card.css --- */
/* Veranstaltungskarten: farbige Fläche, Text zentriert */
@layer components {
    .event-card {
        --card-color: var(--raben-blue);
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 33rem;
        height: 100%;
        padding: 0 1.6em 3.6rem;
        text-align: center;
        color: #000;
        background: var(--card-color);
        transition: transform 0.25s;
    }

    .event-card:has(a:hover),
    .event-card:focus-within {
        transform: translateY(-4px);
    }

    .event-card__date {
        padding: 0.4rem 1.2rem;
        font-size: var(--fs-small);
        font-weight: 300;
        color: #fff;
        background: rgb(6 5 0 / 50%);
    }

    .event-card__date--future {
        background: #000;
    }

    .event-card__category {
        padding: var(--size-m) 0 0;
        font-family: var(--font-headline);
        font-style: italic;
        font-size: var(--fs-h3);
        line-height: 1.3;
        color: #fff;
    }

    .event-card__title {
        display: flex;
        flex-direction: column;
        padding: var(--size-s) 0 var(--size-xs);
        font-family: var(--font-text);
        font-style: normal;
        font-size: var(--fs-h3);
        line-height: 1.15;
        color: #000;
    }

    .event-card__category + .event-card__title {
        padding-top: var(--size-xs);
    }

    .event-card__title a {
        display: flex;
        flex-direction: column;
        color: inherit;
    }

    .event-card__title a::after {
        /* ganze Karte klickbar */
        content: "";
        position: absolute;
        inset: 0;
    }

    .event-card__title a:focus-visible {
        outline: none;
    }

    .event-card:has(a:focus-visible) {
        outline: 3px solid #000;
        outline-offset: 3px;
    }

    .event-card__small {
        font-size: var(--fs-basic);
        line-height: 1.36;
    }

    .event-card__moderation {
        padding: 0;
        font-size: var(--fs-basic);
        color: #fff;
    }

    .event-card__label {
        display: block;
    }

    /* Raster-Darstellung */
    .event-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr));
        gap: var(--gutter-y) var(--gutter-x);
    }
}

/* --- 43-teasers.css --- */
/* Artikel-Teaser (Zeile/Karte) und Personenkarten */
@layer components {
    .teaser {
        position: relative;
        display: grid;
        gap: var(--gutter-y) calc(var(--gutter-x) * 2);
    }

    .teaser__title {
        padding-bottom: 0.4rem;
        font-size: var(--fs-h3);
        line-height: 1.3;
    }

    .teaser__title a {
        color: var(--color-link);
    }

    .teaser__title a::after {
        content: "";
        position: absolute;
        inset: 0;
    }

    .teaser:hover .teaser__title a,
    .teaser__title a:focus-visible {
        color: var(--color-link-hover);
    }

    .teaser__title a:focus-visible {
        outline: none;
    }

    .teaser:has(a:focus-visible) {
        outline: 3px solid var(--focus-ring);
        outline-offset: 6px;
    }

    .teaser__topline {
        padding-bottom: 0.4rem;
        font-size: var(--fs-small);
        color: var(--color-accent);
    }

    .teaser__text {
        padding: 0.4rem 0 0;
    }

    .teaser__more {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: var(--size-xs) 0 0;
        font-size: var(--fs-small);
        color: var(--color-link);
    }

    .arrow-circle {
        display: grid;
        place-items: center;
        width: 3.2rem;
        height: 3.2rem;
        border: 2px solid currentColor;
        border-radius: 50%;
        transition: background-color 0.25s, color 0.25s;
    }

    .teaser:hover .arrow-circle {
        background: var(--raben-blue);
        border-color: var(--raben-blue);
        color: #fff;
    }

    .teaser__media .media__image {
        transition: transform 0.25s;
    }

    .teaser:hover .teaser__media .media__image {
        transform: scale(0.97);
    }

    /* Zeile: Bild links, Text rechts, getrennt durch Linien */
    .teaser-list > li + li {
        margin-top: var(--size-s);
        padding-top: var(--size-s);
        border-top: 1px solid var(--raben-blue);
    }

    @media (min-width: 41.25rem) {
        .teaser--row {
            grid-template-columns: 1fr 3fr;
        }
    }

    .teaser--row .teaser__media:empty {
        display: none;
    }

    /* Vorschaubilder einheitlich im Querformat */
    .teaser--row .teaser__media .media__image {
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    @media (min-width: 41.25rem) {
        .teaser--row .teaser__media:empty {
            display: block;
        }
    }

    /* Datumskachel für Veranstaltungen ohne Bild */
    .teaser__date-tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        aspect-ratio: 4 / 3;
        background: var(--card-color, var(--raben-blue));
        color: #000;
    }

    .teaser__date-day {
        font-size: var(--fs-h3);
    }

    .teaser__date-year {
        font-size: var(--fs-basic);
    }

    /* Karte */
    .teaser--card {
        align-content: start;
        gap: 1.2rem;
    }

    .teaser--card .teaser__title {
        font-size: var(--fs-h4);
    }

    /* Raster für Karten */
    .card-grid {
        display: grid;
        gap: var(--gutter-y) calc(var(--gutter-x) * 2);
    }

    /* Ausrichtung der Karten in einer Reihe (Block „Karten“ → Ausrichtung) */
    .card-grid--align-top {
        align-items: start;
    }

    .card-grid--align-center {
        align-items: center;
    }

    .card-grid--align-bottom {
        align-items: end;
    }

    .card-grid--align-stretch {
        align-items: stretch;
    }

    @media (min-width: 41.25rem) {
        .card-grid--2,
        .card-grid--3,
        .card-grid--4 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

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

        .card-grid--4 {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    /* --- Personen ------------------------------------------------------- */
    .person-grid {
        display: grid;
        gap: var(--size-m) calc(var(--gutter-x) * 2);
    }

    @media (min-width: 41.25rem) {
        .person-grid {
            grid-template-columns: repeat(auto-fit, minmax(28rem, calc(50% - var(--gutter-x))));
            justify-content: center;
        }
    }

    .person-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .person-card__name {
        padding-bottom: 1.2rem;
        font-size: var(--fs-h2);
        line-height: 1.15;
    }

    .person-card__period {
        margin-top: -0.6rem;
        padding-bottom: 1.2rem;
        font-size: var(--fs-small);
        color: var(--color-accent);
    }

    .person-card__name a {
        color: var(--raben-blue);
    }

    .person-card__name a::after {
        content: "";
        position: absolute;
        inset: 0;
    }

    .person-card__name a:focus-visible {
        outline: none;
    }

    .person-card:has(a:focus-visible) {
        outline: 3px solid var(--focus-ring);
        outline-offset: 6px;
    }

    .person-card__image,
    .round-image {
        width: 70%;
        max-width: 32rem;
        aspect-ratio: 1;
        border-radius: 50%;
        overflow: hidden;
        background: var(--raben-blue-light);
    }

    .person-card__image img,
    .round-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.25s;
    }

    .person-card:hover .person-card__image img {
        transform: scale(1.03);
    }

    .person-card__copyright {
        padding: 1rem 0 0;
        font-size: var(--fs-extra-small);
        color: var(--raben-blue-dark);
        text-align: center;
    }

    /* Seitennavigation unter Listen */
    .pagination ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.8rem;
        padding-top: var(--size-m);
    }

    .pagination a,
    .pagination span {
        display: grid;
        place-items: center;
        min-width: 4rem;
        height: 4rem;
        padding-inline: 1rem;
        border: 2px solid var(--raben-blue);
        border-radius: 50%;
        color: var(--raben-blue-dark);
    }

    .pagination a:hover {
        background: var(--raben-blue-light);
    }

    .pagination [aria-current] {
        color: #fff;
        background: var(--raben-blue);
    }
}

/* --- 44-stage.css --- */
/* Startseiten-Bühne */
@layer components {
    .block-stage {
        margin-top: 0;
    }

    .stage-slide {
        --label-color: var(--raben-blue);
        position: relative;
        display: grid;
        min-height: 33rem; /* wie die Veranstaltungsfolie */
        border: 1rem solid var(--raben-grey-blue);
        background: #fff;
    }

    /* Etikett oben auf dem Rahmen („Stipendium“, „Literaturhaus unterwegs“) */
    .stage-slide__label {
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 2;
        max-width: 80%;
        padding: 0.72rem 4.32rem;
        transform: translate(-50%, -50%);
        font-family: var(--font-headline);
        font-style: italic;
        font-size: var(--fs-h3);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--label-color);
        background: #fff;
    }

    .stage-slide a::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .stage-slide a:focus-visible {
        outline: none;
    }

    .stage-slide:has(a:focus-visible) {
        outline: 3px solid var(--raben-blue-dark);
        outline-offset: 4px;
    }

    /* Artikel: Text links (2/3), Bild rechts (1/3); Person: rundes Bild links */
    @media (min-width: 48.75rem) {
        .stage-slide--split {
            grid-template-columns: 2fr 1fr;
        }

        .stage-slide--person {
            grid-template-columns: minmax(0, 1fr) 2fr;
        }
    }

    /* Pfeil-Kreis unten rechts; färbt sich beim Überfahren der Folie */
    .stage-slide__arrow {
        position: absolute;
        right: 1.2rem;
        bottom: 1.2rem;
        z-index: 2;
        display: grid;
        place-items: center;
        width: 4rem;
        height: 4rem;
        color: var(--raben-blue);
        background: #fff;
        border: 2px solid currentColor;
        border-radius: 50%;
        pointer-events: none;
        transition: background-color var(--duration-base), color var(--duration-base);
    }

    .stage-slide__arrow svg {
        transition: translate 0.2s ease-in-out;
    }

    .stage-slide:hover .stage-slide__arrow {
        color: #fff;
        background: var(--raben-blue);
        border-color: var(--raben-blue);
    }

    .stage-slide:hover .stage-slide__arrow svg {
        translate: 0.2rem 0;
    }

    .stage-slide--event .stage-slide__arrow {
        color: #fff;
        background: transparent;
    }

    .stage-slide--event:hover .stage-slide__arrow {
        color: var(--card-color, var(--raben-blue));
        background: #fff;
        border-color: #fff;
    }

    .stage-slide__text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: var(--size-m);
    }

    .stage-slide__title {
        padding: 0;
        font-family: var(--font-text);
        font-style: normal;
        font-size: var(--fs-h3);
        line-height: 1.25;
        color: #000;
    }

    .stage-slide__title a {
        color: inherit;
    }

    .stage-slide__excerpt {
        padding: var(--size-xs) 0 0;
        font-size: var(--fs-big);
        line-height: 1.36;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .stage-slide__media {
        position: relative;
        min-height: 22rem;
        overflow: hidden;
    }

    .stage-slide__media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .stage-slide__media--round {
        display: grid;
        place-items: center;
        padding: var(--size-s);
    }

    .stage-slide__media--round img {
        position: static;
        width: min(100%, 30rem);
        aspect-ratio: 1;
        border-radius: 50%;
    }

    /* Veranstaltung: farbige Fläche (ohne Rahmen), Etikett bündig an der Oberkante, Datum an der Unterkante */
    .stage-slide--event .stage-slide__label {
        padding: 0.4rem 1.2rem;
        transform: translateX(-50%);
        font-size: var(--fs-h2);
        line-height: 1.15;
    }

    .stage-slide--event {
        --label-color: var(--raben-blue);
        align-content: center;
        justify-items: center;
        min-height: 33rem;
        padding: calc(2.9rem + 5.4rem) 2.9rem calc(2.9rem + 3.2rem);
        text-align: center;
        background: var(--card-color, var(--raben-blue));
        border: 0;
    }

    .stage-slide__event-title {
        padding: 0 0 2.4rem;
        font-family: var(--font-text);
        font-style: normal;
        font-weight: 400;
        font-size: var(--fs-h2);
        line-height: 1.15;
        color: #000;
    }

    .stage-slide__event-title a {
        display: flex;
        flex-direction: column;
        color: inherit;
    }

    .stage-slide__venue {
        padding: 0;
        font-size: var(--fs-h3);
        font-weight: 400;
        line-height: 1.15;
        color: #fff;
    }

    .stage-slide__date {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        padding: 0.4rem 1.2rem;
        font-size: var(--fs-basic);
        white-space: nowrap;
        color: #fff;
        background: #000;
    }
}

/* --- 45-cards.css --- */
/* Freie Karten, Logos, Akkordeon, Schaltflächen */
@layer components {
    .info-card {
        display: flex;
        flex-direction: column;
        gap: var(--size-xs);
    }

    .info-card__title {
        padding: 0;
        text-align: center;
        font-size: var(--fs-h2);
    }

    .card-grid--3 .info-card__title,
    .card-grid--4 .info-card__title {
        font-size: var(--fs-h3);
    }

    .info-card__title a {
        color: var(--color-headline);
    }

    .info-card--linked {
        position: relative;
        transition: transform 0.25s, box-shadow 0.25s;
    }

    .info-card--linked .info-card__title a::after {
        content: "";
        position: absolute;
        inset: 0;
    }

    .info-card--linked:hover {
        transform: translateY(-3px);
    }

    .info-card--linked:hover .info-card__title a {
        color: var(--raben-blue-dark);
    }

    .info-card__link {
        padding: 0;
    }

    .info-card__link a {
        color: var(--color-link);
        text-decoration: underline;
    }

    .info-card__link a:hover,
    .info-card__link a:focus-visible {
        color: var(--color-link-hover);
    }

    .info-card--boxed {
        padding: 1.6em;
        background: #fff;
    }

    .info-card--boxed .info-card__title {
        font-size: var(--fs-h3);
    }

    .info-card__media {
        margin-top: auto;
    }

    /* Logowand */
    /* Logowand wie bisher: abgerundete Kacheln mit Rahmen, vier je Reihe */
    .logo-wall {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--gutter-x);
    }

    .logo-wall__item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 25rem;
        padding: 2.4rem;
        background: #fff;
        border: 2px solid var(--raben-blue);
        border-radius: 3rem;
        box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
        transition: padding var(--duration-fast) ease-in-out;
    }

    .logo-wall__item img {
        width: 100%;
        height: auto;
        max-height: 20rem;
        object-fit: contain;
    }

    /* Ganze Kachel klickbar; beim Überfahren wird das Logo etwas größer */
    .logo-wall__item a::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
    }

    .logo-wall__item:has(a):hover {
        padding-inline: 1.6rem;
    }

    .logo-wall__item a:focus-visible {
        outline: none;
    }

    .logo-wall__item:has(a:focus-visible) {
        outline: 3px solid var(--focus-ring);
        outline-offset: 4px;
    }

    @media (max-width: 56.25rem) {
        .logo-wall {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .logo-wall__item {
            min-height: 18rem;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .logo-wall__item {
            transition: none;
        }
    }

    /* Akkordeon */
    .accordion__item {
        border-top: 1px solid var(--raben-blue);
    }

    .accordion__item:last-child {
        border-bottom: 1px solid var(--raben-blue);
    }

    .accordion__summary {
        cursor: pointer;
        list-style: none;
        position: relative;
        padding: 1.6rem 4rem 1.6rem 0;
        font-family: var(--font-headline);
        font-style: italic;
        font-size: var(--fs-h4);
        color: var(--color-link);
    }

    .accordion__summary::-webkit-details-marker {
        display: none;
    }

    .accordion__summary::after {
        content: "+";
        position: absolute;
        right: 0.4rem;
        top: 50%;
        transform: translateY(-50%);
        font-family: var(--font-text);
        font-style: normal;
        font-size: 1.4em;
    }

    .accordion__item[open] .accordion__summary::after {
        content: "–";
    }

    .accordion__content {
        padding-bottom: var(--size-s);
    }

    /*
     * Weiches Auf- und Zuklappen. Neuere Browser (Chrome/Edge ab 131) animieren,
     * alle anderen klappen wie bisher ohne Animation.
     */
    @media (prefers-reduced-motion: no-preference) {
        .accordion {
            interpolate-size: allow-keywords;
        }

        .accordion__item::details-content {
            height: 0;
            overflow: clip;
            transition: height var(--duration-base) var(--ease-out), content-visibility var(--duration-base) allow-discrete;
        }

        .accordion__item[open]::details-content {
            height: auto;
        }
    }

    /* Schaltflächen (z. B. im Video-Hinweis) */
    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.8rem 1.8rem;
        font-weight: 700;
        border: 2px solid currentColor;
        border-radius: var(--radius-s);
        transition: background-color var(--duration-fast), color var(--duration-fast), scale var(--duration-fast);
    }

    .button:active {
        scale: 0.97;
    }

    .button--light {
        color: #1d2427;
        background: #fff;
        border-color: #fff;
    }

    .button--light:hover {
        background: var(--raben-blue-light);
    }

    .button--ghost {
        color: #fff;
    }

    .button--ghost:hover {
        background: rgb(255 255 255 / 15%);
    }
}

/* --- 46-application.css --- */
/* Bewerbung per E-Mail (Block „application“) */
@layer components {
    .application {
        margin-top: var(--size-s);
    }

    .application__period {
        font-size: var(--fs-big);
        line-height: 1.4;
    }

    .application__left {
        white-space: nowrap;
        color: var(--color-accent);
    }

    .button--primary {
        color: #fff;
        background: var(--raben-blue-dark);
        border-color: var(--raben-blue-dark);
        font-size: var(--fs-basic);
        padding: 1.2rem 2.4rem;
    }

    .button--primary:hover,
    .button--primary:focus-visible {
        color: #fff;
        background: var(--raben-blue);
        border-color: var(--raben-blue);
    }

    .application__webmail {
        margin-top: var(--size-xs);
        padding: var(--size-xs) var(--size-s);
        background: #fff;
        border: 1px solid var(--raben-grey-blue);
        border-radius: var(--radius-s);
    }

    .application__webmail summary {
        cursor: pointer;
        font-weight: 700;
        color: var(--color-link);
    }

    .application__webmail[open] summary {
        margin-bottom: var(--size-xs);
    }

    .application__copy {
        display: grid;
        gap: var(--size-xs);
        margin: 0;
    }

    .copy-field {
        display: grid;
        grid-template-columns: 8em minmax(0, 1fr);
        gap: 0.2em 1em;
        align-items: baseline;
    }

    .copy-field dt {
        font-weight: 700;
    }

    .copy-field dd {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.4em 1em;
        margin: 0;
        overflow-wrap: anywhere;
    }

    .copy-field--block {
        grid-template-columns: minmax(0, 1fr);
    }

    .copy-field--block dd {
        display: block;
    }

    .application__template {
        margin: 0 0 0.6em;
        padding: 1em 1.2em;
        font: inherit;
        font-size: var(--fs-small);
        white-space: pre-wrap;
        background: var(--raben-blue-light);
        border-radius: var(--radius-s);
        user-select: all;
    }

    .copy-button {
        padding: 0.3em 0.9em;
        font-size: var(--fs-small);
        font-weight: 700;
        color: var(--raben-blue-dark);
        background: #fff;
        border: 2px solid var(--raben-blue-dark);
        border-radius: var(--radius-s);
        transition: background-color 0.15s, color 0.15s;
    }

    .copy-button:hover {
        color: #fff;
        background: var(--raben-blue-dark);
    }

    .copy-button.is-done {
        color: #fff;
        background: #2f7a4f;
        border-color: #2f7a4f;
    }

    .application__closed {
        padding: var(--size-xs) var(--size-s);
        background: var(--raben-blue-light);
        border-left: 4px solid var(--raben-blue-dark);
    }

    @media (width < 600px) {
        .copy-field {
            grid-template-columns: minmax(0, 1fr);
        }
    }
}

/* --- 50-detail.css --- */
/* Detailseiten: Veranstaltung, Artikel, Person */
@layer components {
    .detail-meta {
        margin-top: calc(var(--size-s) * -1);
        padding-bottom: var(--size-m);
        text-align: center;
        font-size: var(--fs-small);
        color: var(--raben-blue-dark);
    }

    .detail-intro {
        display: grid;
        gap: var(--gutter-y) calc(var(--gutter-x) * 2);
        align-items: start;
    }

    @media (min-width: 56.25rem) {
        .detail-intro {
            grid-template-columns: 5fr 6fr;
        }
    }

    .detail-intro--no-media {
        grid-template-columns: minmax(0, 1fr);
        max-width: var(--width-narrow);
        margin-inline: auto;
    }

    .detail-intro__media--portrait {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .detail-intro__media--portrait .round-image {
        width: min(100%, 36rem);
    }

    /* Eckdaten einer Veranstaltung */
    .facts {
        margin: 0 0 var(--size-s);
        padding: var(--size-xs) 0 var(--size-xs) var(--size-s);
        border-left: 0.6rem solid var(--card-color, var(--raben-blue));
    }

    .facts__row {
        display: grid;
        grid-template-columns: 11rem 1fr;
        gap: 0.4rem 1.6rem;
        padding-block: 0.3rem;
    }

    @media (max-width: 33.75rem) {
        .facts__row {
            grid-template-columns: 1fr;
            gap: 0;
            padding-block: 0.6rem;
        }
    }

    .facts dt {
        font-weight: 700;
        color: var(--raben-blue-dark);
    }

    .facts dd {
        margin: 0;
    }

    .facts__row--date dd {
        font-weight: 700;
    }

    .facts__past {
        margin-left: 0.4em;
        font-weight: 300;
        color: var(--raben-blue-dark);
    }
}

/* --- 90-utilities.css --- */
/* Hilfsklassen */
@layer utilities {
    /* Nur für Screenreader sichtbar */
    .u-visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    /* Hinweis in der Vorschau */
    .preview-banner {
        position: sticky;
        top: 0;
        z-index: 150;
        padding: 0.8rem var(--gutter-outer);
        font-size: var(--fs-small);
        font-weight: 700;
        text-align: center;
        color: #000;
        background: var(--raben-orange);
    }

    .u-text-center {
        text-align: center;
    }
}