/* ===================================================================
   RBZB-Krefeld – Basis-Stylesheet
   -------------------------------------------------------------------
   Farben, Masse und Typografie stammen aus den Enfold-Theme-Optionen
   der WordPress-Quelle (siehe docs/ANALYSE.md, Abschnitt 2.2).
   Keine Fremdbibliothek, keine externen Ressourcen (Regel 1 und 2).
   =================================================================== */

/* -------------------------------------------------------------------
   1. Schriften – lokal, aus dem Dump nach WOFF2 konvertiert
   Roboto, Apache License 2.0
   ------------------------------------------------------------------- */

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/roboto-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/roboto-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/roboto-400-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/roboto-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/roboto-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/roboto-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

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

:root {
    /* --- Markenfarben, unveraendert aus avia_options_enfold --- */
    --c-accent: #f29100;          /* Markenorange: Flaechen, Rahmen, Hervorhebungen */
    --c-accent-dark: #d17e00;     /* dunklere Variante fuer Flaechen im Hover */
    --c-text: #333333;
    --c-bg-body: #eeeeee;
    --c-bg-content: #ffffff;
    --c-bg-alt: #f8f8f8;
    --c-footer-bg: #333333;
    --c-footer-text: #ffffff;

    /* --- Farben fuer Text und Bedienelemente ---
       Diese Werte weichen bewusst von der WordPress-Vorlage ab. Das
       Markenorange erreicht auf Weiss nur 2.38:1 und ist damit als
       Textfarbe unlesbar; WCAG 2.1 AA verlangt 4.5:1 fuer Text und
       3:1 fuer die Umrisse von Bedienelementen. Fuer die Website eines
       Berufskollegs ist das keine Kuer: oeffentliche Stellen sind in
       Deutschland ueber die BITV 2.0 daran gebunden.

       Als Flaeche bleibt das Orange unangetastet - dort steht jetzt
       dunkler Text darauf (5.31:1) statt weissem (2.38:1). */
    --c-link: #a8600a;            /* 4.84:1 auf Weiss  */
    --c-link-hover: #8f5200;      /* 6.22:1 auf Weiss  */
    --c-on-accent: #333333;       /* 5.31:1 auf Orange */
    --c-meta: #6b6b6b;            /* 5.33:1 auf Weiss  */
    --c-field-border: #8c8c8c;    /* 3.36:1, Umriss von Eingabefeldern */
    --c-border: #ebebeb;          /* reine Zierlinie, ohne Bedeutung */
    --c-socket-text: #a8a8a8;     /* 5.31:1 auf #333333 */
    --c-footer-link: #f7b34d;     /* 6.93:1 auf #333333 */
    --c-socket-border: #4a4a4a;

    /* Masse */
    --header-height: 130px;
    --header-height-sticky: 80px;
    --content-max: 1310px;
    --gutter: 24px;
    --radius: 3px;

    /* Typografie */
    --font-base: 'Roboto', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --fs-base: 1rem;
    --lh-base: 1.7;

    /* Sonstiges */
    --shadow-header: 0 2px 5px rgba(0, 0, 0, .1);
    --transition: .25s ease;
}

/* -------------------------------------------------------------------
   3. Reset und Grundlagen
   ------------------------------------------------------------------- */

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

html {
    /* Ankersprünge dürfen nicht unter dem fixierten Header landen */
    scroll-padding-top: var(--header-height-sticky);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--c-bg-body);
    color: var(--c-text);
    font-family: var(--font-base);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-base);
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--c-link);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover,
a:focus-visible {
    color: var(--c-link-hover);
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--c-link);
    outline-offset: 3px;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .6em;
    color: var(--c-text);
    font-weight: 500;
    line-height: 1.25;
}

h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.8rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.2rem); }
h3 { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.7rem); }

p {
    margin: 0 0 1.2em;
}

p:last-child {
    margin-bottom: 0;
}

hr {
    border: 0;
    border-top: 1px solid var(--c-border);
    margin: 2.5rem 0;
}

/* Für Screenreader, optisch versteckt */
.visually-hidden {
    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;
}

/* Sprunglink zum Inhalt */
.skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 1000;
    padding: .75rem 1.25rem;
    background: var(--c-accent);
    color: var(--c-on-accent);
    border-radius: var(--radius);
    transition: top var(--transition);
}

.skip-link:focus {
    top: 8px;
    color: var(--c-on-accent);
    text-decoration: none;
}

/* -------------------------------------------------------------------
   4. Layout-Container
   ------------------------------------------------------------------- */

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

.page-wrap {
    background: var(--c-bg-content);
}

.section {
    padding-block: clamp(3rem, 1.5rem + 5vw, 6rem);
}

.section--alt {
    background: var(--c-bg-alt);
}

/* Abschnitt in der Markenfarbe. Der Text darauf ist dunkel, nicht
   weiss - weiss auf #f29100 erreicht nur 2.38:1. */
.section--accent {
    background: var(--c-accent);
    color: var(--c-on-accent);
}

.section--accent h1,
.section--accent h2,
.section--accent h3 {
    color: var(--c-on-accent);
}

.section--accent a:not(.btn) {
    color: var(--c-on-accent);
    text-decoration: underline;
}

/* -------------------------------------------------------------------
   5. Header und Navigation
   ------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--c-bg-content);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-header);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter);
    height: var(--header-height);
    transition: height var(--transition);
}

/* Schrumpfender Header beim Scrollen (Enfold: header_shrinking) */
.site-header.is-stuck .site-header__inner {
    height: var(--header-height-sticky);
}

/* Das RBZB-Zeichen als einzige Marke. Die Hoehe haengt an einer
   Variablen, damit das Schrumpfen beim Scrollen und die Verkleinerung
   auf schmalen Bildschirmen an einer Stelle geregelt sind. */
.site-logo {
    --logo-height: 72px;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
}

.site-logo img {
    width: auto;
    height: var(--logo-height);
    transition: height var(--transition);
}

.site-header.is-stuck .site-logo {
    --logo-height: 56px;
}

/* Auf schmalen Bildschirmen muss das Zeichen neben den Burger passen. */
@media (max-width: 560px) {
    .site-logo {
        --logo-height: 48px;
    }
}

/* --- Hauptnavigation --- */

.main-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(.5rem, .2rem + 1.2vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav__link {
    position: relative;
    display: block;
    padding: .5rem 0;
    color: var(--c-text);
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .02em;
    white-space: nowrap;
}

.main-nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--c-accent);
    transition: width var(--transition);
}

.main-nav__link:hover,
.main-nav__link:focus-visible,
.main-nav__link[aria-current='true'] {
    color: var(--c-link);
    text-decoration: none;
}

.main-nav__link:hover::after,
.main-nav__link:focus-visible::after,
.main-nav__link[aria-current='true']::after {
    width: 100%;
}

/* --- Burger-Schalter --- */

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.nav-toggle__bar {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--c-text);
    transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- Mobiles Menü (Enfold: ab Tablet, Overlay von rechts) --- */

@media (max-width: 1199px) {
    .nav-toggle {
        display: flex;
    }

    .main-nav {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 95;
        width: min(400px, 85vw);
        padding: calc(var(--header-height-sticky) + 2rem) var(--gutter) 2rem;
        background: var(--c-bg-content);
        box-shadow: -4px 0 20px rgba(0, 0, 0, .15);
        transform: translateX(100%);
        transition: transform var(--transition);
        overflow-y: auto;
    }

    .main-nav.is-open {
        transform: translateX(0);
    }

    .main-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .main-nav__item + .main-nav__item {
        border-top: 1px solid var(--c-border);
    }

    .main-nav__link {
        padding: 1rem .25rem;
        font-size: 1.05rem;
    }

    .main-nav__link::after {
        display: none;
    }

}

/* Abdunkelung hinter dem mobilen Menue.
   Bewusst ausserhalb der Media-Query definiert, damit das Element auf
   jeder Breite berechenbar bleibt – sichtbar wird es nur ueber die
   Klasse is-visible, die das Skript ausschliesslich mobil setzt. */
.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}

.nav-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

/* -------------------------------------------------------------------
   6. Footer und Socket
   ------------------------------------------------------------------- */

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

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

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

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter);
    padding-block: 2.5rem;
}

/* Dasselbe Zeichen wie im Kopf, nur in heller Fassung. */
.site-footer__logo {
    display: flex;
    flex: 0 0 auto;
}

.site-footer__logo img {
    width: auto;
    height: 56px;
}

/* Telefon und E-Mail untereinander; auf schmalen Bildschirmen rutscht der
   Block unter das Zeichen, weil .site-footer__inner umbrechen darf. */
.site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .95rem;
}

@media (max-width: 480px) {
    .site-footer__logo img {
        height: 44px;
    }
}

.footer-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .95rem;
}

.site-socket {
    border-top: 1px solid var(--c-socket-border);
    color: var(--c-socket-text);
    font-size: .85rem;
}

.site-socket__inner {
    padding-block: 1.25rem;
    text-align: center;
}

/* -------------------------------------------------------------------
   7. Buttons
   ------------------------------------------------------------------- */

.btn {
    display: inline-block;
    padding: .8rem 1.8rem;
    border: 2px solid var(--c-accent);
    border-radius: var(--radius);
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.btn:hover,
.btn:focus-visible {
    background: var(--c-accent-dark);
    border-color: var(--c-accent-dark);
    color: var(--c-on-accent);
    text-decoration: none;
}

.btn--outline {
    background: transparent;
    color: var(--c-link);
    border-color: var(--c-link);
}

.btn--outline:hover,
.btn--outline:focus-visible {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-on-accent);
}

/* -------------------------------------------------------------------
   8. Bewegung reduzieren
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* -------------------------------------------------------------------
   9. Bausteine der Inhaltsseiten
   ------------------------------------------------------------------- */

.container--narrow {
    max-width: 900px;
}

.section__title {
    text-align: center;
    margin-bottom: 1.5em;
}

/* Farbbalken als Trenner – in der Quelle ein 3072x5 grosses Bild.
   Hier als Verlauf, das spart eine Anfrage und skaliert sauber. */
.colorbar {
    height: 6px;
    background: linear-gradient(90deg,
        var(--c-accent) 0%,
        #e94e1b 25%,
        #009fe3 50%,
        #95c11f 75%,
        var(--c-accent) 100%);
}

/* Abschnitt mit Hintergrundbild */
.section--image {
    position: relative;
    background-image: var(--section-image);
    background-size: cover;
    background-position: center;
    color: #fff;
    isolation: isolate;
}

.section--image::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, .62);
}

/* Variante mit eingebettetem <picture> statt Hintergrundbild. Das Bild
   bleibt unveraendert; fuer den Kontrast sorgt ein Verlauf, der hinter der
   Textspalte am dichtesten ist und zu den Raendern hin aufhellt. Weisse
   Schrift erreicht so auch ueber den hellsten Stellen mehr als 4,5:1. */
.section--image-picture::before {
    background: linear-gradient(90deg,
        rgba(0, 0, 0, .35) 0%,
        rgba(0, 0, 0, .62) 22%,
        rgba(0, 0, 0, .62) 78%,
        rgba(0, 0, 0, .35) 100%);
}

/* Schmal reicht die Schrift bis an den Rand - dort ohne Aufhellung. */
@media (max-width: 760px) {
    .section--image-picture::before {
        background: rgba(0, 0, 0, .62);
    }
}

/* Text links, Schaltflaeche rechts daneben, vertikal mittig. Schmal
   rutscht die Schaltflaeche unter den Text. */
.cta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

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

.cta-row__btn {
    flex: 0 0 auto;
}

@media (max-width: 639px) {
    .cta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
}

.section__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.section__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section--image h1,
.section--image h2,
.section--image h3 {
    color: #fff;
}

.section--image a:not(.btn) {
    color: #fff;
    text-decoration: underline;
}

.lead {
    font-size: 1.15rem;
    font-weight: 300;
}

.notice {
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--c-accent);
    background: rgba(255, 255, 255, .12);
}

.section--logo {
    background: var(--c-bg-content);
}

/* Abschlussmarke, mittig. */
.closing-logos {
    display: flex;
    justify-content: center;
}

.closing-logo {
    width: auto;
    height: 96px;
}

@media (max-width: 520px) {
    .closing-logo {
        height: 72px;
    }
}

/* --- Kachelreihe der vier Berufskollegs --- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--gutter);
    margin: 0;
    padding: 0;
    list-style: none;
}

.card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.75rem 1.5rem;
    background: var(--c-bg-content);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    text-align: center;
}

.card__title {
    margin: 0;
    font-size: 1.15rem;
}

.card__text {
    flex: 1 1 auto;
    font-size: .95rem;
    color: var(--c-meta);
}

.card .btn {
    align-self: center;
}

/* --- Zweispaltiger Abschnitt: Text neben Bild --- */

.split {
    display: grid;
    grid-template-columns: 2fr 3fr;
    align-items: center;
    gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
}

.split--reverse {
    grid-template-columns: 3fr 2fr;
}

.split__media img {
    width: 100%;
    border-radius: var(--radius);
}

@media (max-width: 767px) {
    .split,
    .split--reverse {
        grid-template-columns: 1fr;
    }

    /* Bild im gespiegelten Abschnitt unter den Text schieben */
    .split--reverse .split__media {
        order: 2;
    }
}

/* --- Video --- */

.media-video {
    width: 100%;
    height: auto;
    margin-top: 2rem;
    border-radius: var(--radius);
    background: #000;
}

.media-figure {
    margin: 0;
}

.media-caption {
    margin-top: .5rem;
    font-size: .875rem;
    color: var(--c-meta);
}

/* -------------------------------------------------------------------
   10. Fliesstext aus der Datenbank
   ------------------------------------------------------------------- */

.prose h2 { margin-top: 1.8em; }
.prose h3,
.prose h4,
.prose h5 { margin-top: 1.5em; }

.prose h5 {
    font-size: 1.05rem;
    font-weight: 700;
}

.prose ul,
.prose ol {
    padding-left: 1.4em;
}

.prose li + li {
    margin-top: .35em;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.prose th,
.prose td {
    padding: .6rem .75rem;
    border: 1px solid var(--c-border);
    text-align: left;
}

.prose details {
    margin: 1rem 0;
    padding: .75rem 1rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.prose summary {
    cursor: pointer;
    font-weight: 500;
}

.prose img {
    border-radius: var(--radius);
}

/* Schaltflaeche ohne Ziel – in der Quelle gab es Buttons mit
   link='manually,http://'. Sie bleiben sichtbar, aber inaktiv. */
.btn--disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* -------------------------------------------------------------------
   11. Slider
   ------------------------------------------------------------------- */

.slider {
    position: relative;
    overflow: hidden;
    background: var(--c-text);
}

.slider__track {
    position: relative;
    /* width muss ausdruecklich gesetzt sein.
       Bleibt sie auto, rechnet der Browser die max-height ueber das
       Seitenverhaeltnis in eine Breitenbegrenzung um ("transferred size
       suggestion", CSS Sizing 4). Der Rahmen wird dann nur noch
       max-height x Verhaeltnis breit - bei 1600x900 rund 1180px statt
       1600px - und rechts bliebe der dunkle Slider-Hintergrund stehen.
       Mit definiter Breite greift die Umrechnung nicht: die Hoehe wird
       gekappt, die Breite bleibt voll, und object-fit: cover beschneidet
       das Bild. */
    width: 100%;
    aspect-ratio: 1500 / 800;
    max-height: 70vh;
}

.slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility .6s ease;
}

.slider__slide.is-active {
    opacity: 1;
    visibility: visible;
}

/* Ohne JavaScript bleibt die erste Folie stehen. */
.slider__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider__slide picture,
.slider__link {
    display: block;
    width: 100%;
    height: 100%;
}

/* Fertig gesetzte Bildfolie (z. B. Logo-Slide): das ganze Bild ist der Verweis. */
.slider__link:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: -3px;
}

.slider__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(1.5rem, 1rem + 3vw, 4rem) 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
    color: #fff;
}

.slider__headline {
    margin: 0 0 .5em;
    font-size: clamp(1.1rem, .8rem + 1.4vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
}

.slider__text {
    margin: 0 0 1em;
    font-size: clamp(.9rem, .8rem + .4vw, 1.05rem);
}

.slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition);
}

.slider__arrow:hover,
.slider__arrow:focus-visible {
    background: var(--c-accent);
    color: var(--c-on-accent);
}

.slider__arrow--prev { left: 16px; }
.slider__arrow--next { right: 16px; }

.slider__dots {
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 2;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
}

.slider__dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background var(--transition);
}

.slider__dot.is-active,
.slider__dot:hover {
    background: #fff;
}

@media (max-width: 767px) {
    .slider__track {
        aspect-ratio: 4 / 5;
        max-height: 60vh;
    }

    .slider__arrow {
        width: 38px;
        height: 38px;
        font-size: 1.5rem;
    }

    /* Im Hochformat bliebe mittig nur ein Streifen aus der Bildmitte
       stehen. Bildfolien tragen ihren Inhalt links, also dort ansetzen. */
    .slider__slide--image-only .slider__image {
        object-position: left center;
    }
}

/* Folien ohne Ueberblendung wechseln. Die allgemeine Regel in Abschnitt 8
   kuerzt Transitions nur auf .01ms; hier ausdruecklich abgeschaltet. */
@media (prefers-reduced-motion: reduce) {
    .slider__slide {
        transition: none;
    }
}

/* -------------------------------------------------------------------
   12. Formulare
   ------------------------------------------------------------------- */

.contact-form {
    max-width: 640px;
    margin-top: 2rem;
}

.form-row {
    margin-bottom: 1.25rem;
}

.form-row label {
    display: block;
    margin-bottom: .35rem;
    font-size: .95rem;
    font-weight: 500;
}

.form-row input,
.form-row textarea {
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid var(--c-field-border);
    border-radius: var(--radius);
    background: var(--c-bg-content);
    color: var(--c-text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-row textarea {
    resize: vertical;
    min-height: 8rem;
}

.form-row input:focus,
.form-row textarea:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(242, 145, 0, .25);
    outline: none;
}

.form-row input[aria-invalid='true'],
.form-row textarea[aria-invalid='true'] {
    border-color: #c0392b;
}

.required {
    color: var(--c-link);
}

.optional {
    font-weight: 400;
    color: var(--c-meta);
}

.form-error {
    margin: .35rem 0 0;
    color: #c0392b;
    font-size: .9rem;
}

/* Auf dunklem Hintergrund (Kontaktabschnitt der Startseite) */
.section--image .form-error {
    color: #ffb3aa;
}

.form-hint {
    margin: 0 0 1.25rem;
    font-size: .85rem;
    color: var(--c-meta);
}

.section--image .form-hint {
    color: rgba(255, 255, 255, .8);
}

/* Honigtopf: fuer Menschen unsichtbar, fuer Automaten ein normales Feld.
   Bewusst nicht display:none - manche Automaten erkennen das und lassen
   das Feld dann aus. */
.trap-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Rueckmeldungen --- */

.alert {
    padding: .9rem 1.1rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid;
    border-radius: var(--radius);
    font-size: .95rem;
}

.alert--success {
    border-color: #2e7d32;
    background: rgba(46, 125, 50, .12);
    color: #1b5e20;
}

.alert--error {
    border-color: #c0392b;
    background: rgba(192, 57, 43, .1);
    color: #922b21;
}

.section--image .alert--success {
    background: rgba(255, 255, 255, .92);
}

.section--image .alert--error {
    background: rgba(255, 255, 255, .92);
}

.alert p {
    margin: 0;
}

/* -------------------------------------------------------------------
   13. Bausteine der Inhaltsseiten des Verbunds
   ------------------------------------------------------------------- */

/* Angabe, die nur die Schule liefern kann. Bewusst auffaellig: solange
   sie stehen bleibt, soll sie niemandem entgehen. */
.platzhalter {
    display: inline-block;
    padding: .1em .5em;
    border: 1px dashed var(--c-link);
    border-radius: var(--radius);
    background: rgba(242, 145, 0, .08);
    color: var(--c-link);
    font-size: .9em;
    font-style: italic;
}

/* --- Partnerliste auf „Wer wir sind" --- */

.prose .partner-liste {
    list-style: none;
    padding-left: 0;
}

.prose .partner-liste > li {
    padding: 1rem 0 1rem 1.1rem;
    border-left: 3px solid var(--c-accent);
    background: var(--c-bg-alt);
    padding-inline: 1.1rem;
}

.prose .partner-liste > li + li {
    margin-top: .75rem;
}

/* --- Nummerierte Bloecke: Schwerpunkte und Zeitplan --- */

.prose .schwerpunkte,
.prose .zeitplan {
    counter-reset: block;
    list-style: none;
    padding-left: 0;
}

.prose .schwerpunkte > li,
.prose .zeitplan > li {
    position: relative;
    counter-increment: block;
    padding: 1.25rem 1.25rem 1.25rem 4rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.prose .schwerpunkte > li + li,
.prose .zeitplan > li + li {
    margin-top: 1rem;
}

.prose .schwerpunkte > li::before,
.prose .zeitplan > li::before {
    content: counter(block);
    position: absolute;
    left: 1.1rem;
    top: 1.25rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-weight: 700;
    line-height: 1;
}

.prose .schwerpunkte h3,
.prose .zeitplan h2 {
    margin-top: 0;
    font-size: 1.15rem;
}

.prose .grundsaetze {
    list-style: none;
    padding-left: 0;
}

.prose .grundsaetze > li {
    padding-left: 1.6rem;
    position: relative;
}

.prose .grundsaetze > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .65em;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--c-accent);
}

/* --- Weg zurueck zur uebergeordneten Seite --- */

.seitenweg {
    margin-bottom: 1.5rem;
    font-size: .95rem;
}

.seitenweg a {
    color: var(--c-meta);
}

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

/* --- Unterseiten am Fuss einer Elternseite --- */

.unterseiten {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--c-border);
}

.unterseiten h2 {
    margin-top: 0;
    font-size: 1.2rem;
}

.unterseiten__liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.unterseiten__liste a {
    display: block;
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    color: var(--c-text);
    transition: border-color var(--transition), background var(--transition);
}

.unterseiten__liste a:hover,
.unterseiten__liste a:focus-visible {
    border-color: var(--c-accent);
    background: var(--c-bg-alt);
    text-decoration: none;
}

.unterseiten__titel {
    display: block;
    color: var(--c-link);
    font-weight: 500;
}

.unterseiten__text {
    display: block;
    margin-top: .3rem;
    color: var(--c-meta);
    font-size: .9rem;
    line-height: 1.5;
}

/* Verweis auf eine fremde Website. Der Pfeil macht sichtbar, dass die
   Seite verlassen wird - die Verweise oeffnen bewusst im selben Tab,
   damit der Zurueck-Knopf funktioniert. */
.prose a.extern::after {
    content: '\2197';
    margin-left: .25em;
    font-size: .85em;
    color: var(--c-meta);
}

.prose a.extern:hover::after,
.prose a.extern:focus-visible::after {
    color: inherit;
}

/* Federfuehrung und Sprecherin oder Sprecher eines Arbeitskreises */
.prose .ak-meta {
    margin-top: -.4em;
    margin-bottom: .8em;
    color: var(--c-meta);
    font-size: .92rem;
}

.prose .arbeitskreise {
    list-style: none;
    padding-left: 0;
}

.prose .arbeitskreise > li {
    padding: .85rem 1.1rem;
    border-left: 3px solid var(--c-accent);
    background: var(--c-bg-alt);
}

.prose .arbeitskreise > li + li {
    margin-top: .6rem;
}


/* --- Schaubild der Gremien auf „Wie arbeiten wir?“ ---------------------
   Aus HTML und CSS statt als SVG. Der Grund steht in
   app/Views/partials/gremien-schaubild.php: so bleibt die Beschriftung
   echter Text, waechst mit der eingestellten Schriftgroesse und bricht
   auf schmalen Anzeigen um, statt nur zu schrumpfen.

   Die Kette bleibt auf 34rem begrenzt. Breiter gelesen verliert ein
   Ablauf von oben nach unten seinen Zusammenhang. */

.prose .gremien {
    margin: 2rem 0 2.2rem;
    padding: 0;
}

.prose .gremien__titel {
    margin-bottom: 1rem;
    color: var(--c-meta);
    font-size: .95rem;
    line-height: 1.5;
}

.prose .gremien__kette {
    max-width: 34rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.prose .gremien__organ {
    padding: .9rem 1.15rem 1rem;
    /* Nicht --c-border (#ebebeb, 1.28:1): das ist die Zierlinie fuer
       Trenner ohne Bedeutung. Hier grenzt der Rahmen die vier Stationen
       voneinander ab, traegt also Bedeutung und braucht die 3:1 aus
       WCAG 1.4.11. --c-field-border liefert 3.36:1.
       Die orangene Kante links ist dagegen reine Zier (2.38:1) - faellt
       sie weg, geht keine Information verloren. */
    border: 1px solid var(--c-field-border);
    border-left: 4px solid var(--c-accent);
    border-radius: var(--radius);
    background: var(--c-bg-alt);
}

.prose .gremien .organ__rolle {
    margin: 0 0 .1rem;
    color: var(--c-link);            /* 4.55:1 auf der Kastenflaeche #f8f8f8 */
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.prose .gremien .organ__name {
    margin: 0 0 .35rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
}

.prose .gremien .organ__detail {
    margin: 0;
    color: var(--c-meta);
    font-size: .92rem;
    line-height: 1.55;
}

/* Der Weg zwischen zwei Kaesten. Zwei Pfeile nebeneinander, wo etwas
   hinunter beauftragt und hinauf berichtet wird. */
.prose .gremien__weg {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.6rem;
    justify-content: center;
    padding: .55rem 0;
    color: var(--c-meta);
    font-size: .88rem;
}

.prose .gremien__weg > span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.prose .gremien__weg .weg__ab::before,
.prose .gremien__weg .weg__auf::before {
    color: var(--c-accent-dark);     /* 3.14:1 auf Weiss - Mindestwert fuer
                                        bedeutungstragende Grafik ist 3:1 */
    font-size: 1.2rem;
    line-height: 1;
}

.prose .gremien__weg .weg__ab::before {
    content: '\2193';
}

.prose .gremien__weg .weg__auf::before {
    content: '\2191';
}

/* Bezirksregierung und Schultraeger stehen neben der Kette, nicht darin.
   Der gestrichelte Rahmen sagt das, ohne dass es dastehen muss. */
.prose .gremien__seite {
    max-width: 34rem;
    margin: 1.3rem 0 0;
    padding: .85rem 1.15rem;
    border: 1px dashed var(--c-field-border);
    border-radius: var(--radius);
    font-size: .92rem;
    line-height: 1.55;
}