/* ==========================================================================
   Grundschule Krofdorf-Gleiberg - Stylesheet
   Warm, freundlich, elternfreundlich
   ========================================================================== */

/* Lokale Schriftarten (Variable Fonts, latin) */
@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('../fonts/fredoka-latin-var.woff2') format('woff2-variations'),
         url('../fonts/fredoka-latin-var.woff2') format('woff2');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/nunito-latin-var.woff2') format('woff2-variations'),
         url('../fonts/nunito-latin-var.woff2') format('woff2');
}

/* --------- Reset & Variables --------- */
:root {
    --c-primary: #2E5E8A;
    --c-primary-dark: #234868;
    --c-yellow: #F5A623;
    --c-yellow-soft: #FFE5B4;
    --c-green: #7BB662;
    --c-green-soft: #D4ECC5;
    --c-red: #E94B5C;
    --c-red-soft: #FAD0D5;
    --c-blue-soft: #D4E5F5;

    /* "ink"-Varianten: dieselbe Farbfamilie, aber dunkel genug, um als Text
       oder Symbol auf hellem Grund die 4.5:1 aus WCAG 1.4.3 zu erreichen.
       --c-yellow und --c-green sind als Flaechenfarben gedacht, nicht als
       Vordergrundfarben. */
    --c-yellow-ink: #A16707;
    --c-green-ink: #507F3B;
    --c-yellow-dark: #E0951A;
    --c-bg: #FFFAF0;
    --c-bg-paper: #FFFFFF;
    --c-text: #2A2A2A;
    --c-text-muted: #5A5A5A;
    --c-border: #EAE0CC;
    /* Begrenzung von Bedienelementen braucht 3:1 (WCAG 1.4.11).
       --c-border ist dafuer zu hell und bleibt reine Trennlinie. */
    --c-border-strong: #8C7F63;

    --shadow-sm: 0 2px 8px rgba(46, 94, 138, 0.08);
    --shadow-md: 0 6px 20px rgba(46, 94, 138, 0.12);
    --shadow-lg: 0 12px 35px rgba(46, 94, 138, 0.18);

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --font-display: 'Fredoka', 'Nunito', sans-serif;
    --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Fuenfte Kachelfarbe (Downloads), vorher als Einzelwert im Code */
    --c-purple: #7B5EA7;
    --c-purple-ink: #6A4E96;

    /* Bewegung: kurz und mit kraeftigem ease-out, damit nichts traege wirkt */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --dur-fast: 160ms;
    --dur-base: 200ms;
}

::selection {
    background: var(--c-yellow-soft);
    color: var(--c-primary-dark);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

html, body {
    overflow-x: hidden;
}

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

body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    color: var(--c-text);
    background: var(--c-bg);
    min-height: 100vh;
    /* Lange, nicht trennbare Wörter (E-Mail-Adressen, Komposita) dürfen
       umbrechen. Sonst laufen sie bei großer Schrift aus dem Container und
       werden von overflow-x: hidden abgeschnitten. */
    overflow-wrap: break-word;
}

/* Nur für Screenreader: Struktur ergänzen, ohne das Layout zu verändern */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--c-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    z-index: 9999;
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
    left: 0;
}
.skip-link:hover { color: white; }

/* --------- Typography --------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--c-primary-dark);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 600; margin-bottom: 1rem; }
h3 { font-size: 1.3rem; font-weight: 600; margin-bottom: 0.5rem; }

p { margin-bottom: 1rem; }

a {
    color: var(--c-primary);
    text-decoration: none;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
    transition: color var(--dur-fast) ease;
}
/* Hover: dunkler und unterstrichen statt Farbwechsel nach Gelb.
   Gelb auf Blau oder Creme erreicht die 4.5:1 nicht. */
a:hover { color: var(--c-primary-dark); }
/* Unterstreichen nur bei Links im Fliesstext, nicht bei Karten, Buttons
   oder dem Menue (die haben eigene Hover-Flaechen). */
:where(p, li, td, address, .breadcrumb) a:not([class]):hover {
    text-decoration-line: underline;
}
.main-nav a:hover { text-decoration: none; }

/* --------- Layout --------- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.container-narrow {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* --------- Symbole (eigenes SVG-Set, siehe assets/icons/sprite.svg) --------- */
/* Das Inline-Sprite selbst darf keinen Platz einnehmen. */
.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Symbole erben Groesse (1em) und Farbe (currentColor) vom Textkontext. */
.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.15em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Vollflaechige Variante fuer Symbole, die als Linie zu zart wirken
   (Play/Stop in der Vorlese-Steuerung). */
.icon-solid {
    fill: currentColor;
    stroke: none;
}

/* --------- Top Bar (Notfall-Kontakt) --------- */
.topbar {
    background: var(--c-primary-dark);
    color: white;
    font-size: 0.9rem;
    padding: 0.5rem 0;
}
.topbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.topbar a { color: white; }
.topbar a:hover { color: var(--c-yellow); }
.topbar-info { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* --------- Header --------- */
.site-header {
    background: var(--c-bg-paper);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 4px solid var(--c-yellow);
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 1rem;
    gap: 1rem;
}

.logo-link {
    display: inline-flex;
    align-items: center;
    color: var(--c-primary-dark);
    min-width: 0;
    flex-shrink: 1;
}
.logo-link img {
    height: 64px;
    width: auto;
    max-width: 100%;
    display: block;
}

/* --------- Main Navigation --------- */
.main-nav ul {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.main-nav a {
    display: block;
    padding: 0.6rem 1.1rem;
    font-weight: 700;
    color: var(--c-text);
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.main-nav a:hover,
.main-nav a.active {
    background: var(--c-yellow-soft);
    color: var(--c-primary-dark);
}

.nav-toggle {
    display: none;
    background: var(--c-primary);
    color: white;
    border: none;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-body);
}

/* --------- Hero --------- */
.hero {
    padding: 3rem 0 2rem;
    text-align: center;
    position: relative;
}

.hero h1 {
    margin-bottom: 1rem;
}

/* --------- Quick Action Cards --------- */
.quick-actions {
    padding-top: 2rem;
    padding-bottom: 4rem;
}
.quick-actions h2 {
    text-align: center;
    margin-bottom: 2rem;
}
.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}
/* Kacheln: ruhige Flaeche mit feiner Kante. Die Farbe steckt im Symbol,
   nicht in einem Zierstreifen. Hover nur mit echter Maus, Druckfeedback
   beim Antippen. */
.quick-card {
    background: var(--c-bg-paper);
    border-radius: var(--radius-md);
    padding: 1.75rem 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        border-color var(--dur-fast) ease;
    color: var(--c-text);
    display: block;
    border: 1px solid var(--c-border);
    position: relative;
}
@media (hover: hover) and (pointer: fine) {
    .quick-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        color: var(--c-text);
        border-color: var(--accent);
    }
}
.quick-card:active {
    transform: scale(0.98);
    transition-duration: 80ms;
}
.quick-card-icon {
    font-size: 2.6rem;
    margin-bottom: 0.6rem;
    display: inline-block;
    /* nicht --accent: Gelb und Grün sind als Flächenfarben zu hell,
       um als Strichsymbol auf Weiß zu bestehen. */
    color: var(--accent-ink, var(--c-primary));
}
.quick-card h3 {
    color: var(--c-primary-dark);
    margin-bottom: 0.3rem;
}
.quick-card p {
    color: var(--c-text-muted);
    font-size: 0.95rem;
    margin: 0;
}

.quick-card.red    { --accent: var(--c-red);     --accent-ink: var(--c-red); }
.quick-card.yellow { --accent: var(--c-yellow);  --accent-ink: var(--c-yellow-ink); }
.quick-card.green  { --accent: var(--c-green);   --accent-ink: var(--c-green-ink); }
.quick-card.blue   { --accent: var(--c-primary); --accent-ink: var(--c-primary); }
.quick-card.purple { --accent: var(--c-purple);  --accent-ink: var(--c-purple-ink); }

/* Fuenf Kacheln: breit in einer Reihe, mittel als 3 + 2 zentriert,
   nie 4 + 1. Doppelte Klasse, damit die spaeteren .quick-grid-Regeln
   in den Media Queries nicht gewinnen. */
@media (min-width: 1100px) {
    .quick-grid.quick-grid-five { grid-template-columns: repeat(5, 1fr); gap: 1rem; }
    .quick-grid-five .quick-card { padding: 1.6rem 0.9rem; }
}
@media (min-width: 560px) and (max-width: 1099px) {
    .quick-grid.quick-grid-five { grid-template-columns: repeat(6, 1fr); }
    .quick-grid-five .quick-card { grid-column: span 2; }
    .quick-grid-five .quick-card:nth-child(4) { grid-column: 2 / span 2; }
    .quick-grid-five .quick-card:nth-child(5) { grid-column: 4 / span 2; }
}

/* --------- Sektionskopf --------- */
.projects-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    gap: 1rem;
}
.section-head h2 { margin: 0; }

/* --------- Buttons --------- */
.btn {
    display: inline-block;
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-family: var(--font-body);
    font-size: 1rem;
    text-decoration: none;
    transition:
        color var(--dur-fast) ease,
        background-color var(--dur-fast) ease,
        transform var(--dur-fast) var(--ease-out);
    cursor: pointer;
    border: none;
}
/* Buttons stehen fest: Hover aendert nur die Farbe, Antippen drueckt leicht. */
.btn:active {
    transform: scale(0.97);
    transition-duration: 80ms;
}
.btn-primary {
    background: var(--c-primary);
    color: white;
}
.btn-primary:hover {
    background: var(--c-primary-dark);
    color: white;
}
.btn-yellow {
    background: var(--c-yellow);
    color: var(--c-primary-dark);
}
/* Dunkle Schrift bleibt: Weiss auf Orange kam nur auf 2.5:1, Blau auf
   Orange auf 3.9:1. --c-text auf Orange erreicht die 4.5:1. */
.btn-yellow:hover {
    background: var(--c-yellow-dark);
    color: var(--c-text);
}
.btn-large {
    padding: 1rem 2.25rem;
    font-size: 1.1rem;
}

/* --------- Page Header (Subpages) --------- */
/* Ruhige, einfarbige Flaeche mit gerader Kante. Kein Verlauf, keine
   Zickzack-Kante: Die Seite soll nach Schule aussehen, nicht nach Vorlage. */
.page-header {
    background: var(--c-primary);
    color: white;
    padding: 2.75rem 0 2.5rem;
    text-align: center;
}
.page-header h1 { color: white; }
.page-header .breadcrumb {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
}
.page-header .breadcrumb a,
.page-header .breadcrumb a:hover {
    color: white;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.45);
}
.page-header .breadcrumb a:hover { text-decoration-color: white; }

/* --------- Content Block --------- */
.content {
    padding: 3rem 0;
}
.content-card {
    background: var(--c-bg-paper);
    border-radius: var(--radius-md);
    padding: 2rem 2.25rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}
.content h2 { margin-top: 1.5rem; }
.content h2:first-child { margin-top: 0; }
.content ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.content li { margin-bottom: 0.4rem; }

/* Info-Box: die getönte Fläche trägt die Bedeutung, ein zusätzlicher
   Farbstreifen an der Kante wäre doppelt gemoppelt. */
.info-box {
    background: var(--c-yellow-soft);
    border: 1px solid var(--c-yellow);
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-sm);
    margin: 1.5rem 0;
}
.info-box.red {
    background: var(--c-red-soft);
    border-color: var(--c-red);
}
.info-box.green {
    background: var(--c-green-soft);
    border-color: var(--c-green);
}
.info-box strong { color: var(--c-primary-dark); }

/* Kontaktseite: die Illustration wird ganz gezeigt, nicht beschnitten -
   deshalb Breite begrenzen statt Hoehe kappen. */
.contact-illustration {
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
    margin: 0 auto 1.75rem;
    border-radius: var(--radius-md);
}

/* --------- Forms --------- */
.form-group {
    margin-bottom: 1.25rem;
}
.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--c-primary-dark);
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    background: var(--c-bg-paper);
    transition: border-color 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--c-primary);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Download-Liste (PDFs etc.) */
.download-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}
.download-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--c-bg);
    border: 2px solid var(--c-border);
    border-radius: var(--radius-sm);
    color: var(--c-text);
    text-decoration: none;
    transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.download-item:hover, .download-item:focus-visible {
    border-color: var(--c-yellow);
    background: var(--c-yellow-soft);
    color: var(--c-text);
}
.dl-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    color: var(--c-primary);
}
.dl-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}
.dl-info strong {
    color: var(--c-primary-dark);
    font-size: 0.98rem;
    font-weight: 700;
}
.dl-meta {
    font-size: 0.8rem;
    color: var(--c-text-muted);
}
.dl-arrow {
    font-size: 1.4rem;
    color: var(--c-primary);
    flex-shrink: 0;
}

/* Einwilligungs-Checkbox (DSGVO) */
.form-group.consent {
    background: var(--c-yellow-soft);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    border: 2px solid var(--c-yellow);
}
.consent-label {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    cursor: pointer;
    font-weight: 500 !important;
    color: var(--c-text) !important;
    line-height: 1.5;
}
.consent-label input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    accent-color: var(--c-primary);
    cursor: pointer;
}
.consent-label span {
    font-size: 0.95rem;
}

/* --------- Auswahl-Kacheln mit nur zwei Optionen --------- */
.quick-grid-two {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    max-width: 760px;
    margin: 0 auto 2rem;
}

/* --------- Fachdienste (BFZ / SaS / UBUS) --------- */
.support-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.5rem 0;
}
.support-item {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.4rem;
}
.support-abbr {
    flex-shrink: 0;
    min-width: 76px;
    text-align: center;
    background: var(--c-primary);
    color: #FFFFFF;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
}
/* Gelb und Grün sind als Flächen zu hell für weiße Schrift - dort dunkler Text. */
.support-item:nth-child(2) .support-abbr { background: var(--c-green); color: var(--c-text); }
.support-item:nth-child(3) .support-abbr { background: var(--c-yellow); color: var(--c-text); }
.support-item:nth-child(4) .support-abbr { background: var(--c-red-soft); color: var(--c-text); }
.support-item:nth-child(5) .support-abbr { background: var(--c-primary-dark); }

/* Elternmitarbeit nutzt Symbole statt Abkürzungen, helle Flächen für ruhigere Linien */
.support-list-symbols .support-abbr {
    font-size: 1.6rem;
    line-height: 1.2;
    padding: 0.4rem 0.7rem;
    background: var(--c-blue-soft);
    color: var(--c-primary-dark);
}
.support-list-symbols .support-item:nth-child(2) .support-abbr { background: var(--c-green-soft); }
.support-list-symbols .support-item:nth-child(3) .support-abbr { background: var(--c-yellow-soft); }
.support-list-symbols .support-item:nth-child(4) .support-abbr { background: var(--c-red-soft); }
.support-list-symbols .support-item:nth-child(5) .support-abbr { background: var(--c-blue-soft); }
.support-text h3,
.support-text h4 {
    color: var(--c-primary-dark);
    font-family: var(--font-display);
    font-size: 1.08rem;
    margin: 0 0 0.4rem;
    line-height: 1.35;
}
.support-text p {
    margin: 0;
    color: var(--c-text-muted);
    font-size: 0.97rem;
}

/* --------- Team Grid --------- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
}
.team-card {
    background: var(--c-bg-paper);
    border-radius: var(--radius-md);
    padding: 1.5rem 1rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
/* Teamkarten sind keine Links: kein Anheben beim Hover. */
.team-card .avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: 0 auto 0.75rem;
    background: var(--c-yellow-soft);
    color: var(--c-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    border: 4px solid white;
    box-shadow: var(--shadow-sm);
}
/* Avatar-Variante mit Porträtfoto */
.team-card .avatar.avatar-photo {
    overflow: hidden;
    background: var(--c-bg);
}
.team-card .avatar.avatar-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Avatar-Variante mit Symbol statt Initiale (z. B. Ganztagsteam) */

.team-card h3 {
    color: var(--c-primary-dark);
    font-family: var(--font-display);
    font-size: 1.05rem;
    margin: 0;
}
.team-card .role {
    font-size: 0.85rem;
    color: var(--c-text-muted);
}

/* --------- Schulleben: Projekte --------- */
.section-intro {
    max-width: 62ch;
    font-size: 1.08rem;
    color: var(--c-text-muted);
    margin: -0.5rem 0 2rem;
}
.section-note {
    margin-top: 1.75rem;
    font-size: 0.88rem;
    color: var(--c-text-muted);
    font-style: italic;
}
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.75rem;
}
.project-card {
    background: var(--c-bg-paper);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}
.project-card img {
    width: 100%;
    aspect-ratio: 9 / 5;
    object-fit: cover;
    background: var(--c-bg);
}
.project-card-body {
    padding: 1.5rem 1.5rem 1.75rem;
}
/* Themen-Label in normaler Schreibweise, ohne Versalien und Sperrung. */
.project-tag {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
    background: var(--c-blue-soft);
    color: var(--c-primary-dark);
}
.project-tag.yellow { background: var(--c-yellow-soft); }
.project-tag.red    { background: var(--c-red-soft); }
.project-tag.green  { background: var(--c-green-soft); }
.project-card h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--c-primary-dark);
    margin-bottom: 0.6rem;
}
.project-card p {
    color: var(--c-text-muted);
    margin-bottom: 0;
}

/* --------- Footer --------- */
.site-footer {
    background: var(--c-primary-dark);
    color: white;
    padding: 3rem 0 1.5rem;
    margin-top: 4rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}
.footer-grid h2 {
    color: var(--c-yellow);
    font-family: var(--font-display);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}
.footer-grid a {
    color: rgba(255, 255, 255, 0.85);
    display: block;
    padding: 0.25rem 0;
}
.footer-grid a:hover {
    color: var(--c-yellow);
}
.footer-grid p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.4rem;
}
/* Die Link-Spalten setzen a auf block. In den Kontaktzeilen soll die Angabe
   neben dem Symbol stehen und bei Bedarf umbrechen - nicht darunter rutschen. */
.footer-contact {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}
.footer-contact a {
    display: inline;
    min-width: 0;
    overflow-wrap: anywhere;
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 1.5rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
}
.footer-bottom a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.25);
    text-underline-offset: 3px;
}
.footer-bottom a:hover {
    color: var(--c-yellow);
    text-decoration-color: var(--c-yellow);
}
.footer-bottom > .icon { color: var(--c-red); }

/* Zentrale RHXT-Credit-Zeile: eigenes Custom Element mit Shadow DOM, das
   unter dem Site-Footer sitzt. Gestaltet wird es ausschliesslich ueber diese
   Custom Properties - sie durchdringen den Shadow DOM. Die Werte greifen auf
   die Farbtokens der Seite zu, damit der Hochkontrast-Modus automatisch
   mitzieht. */
rhxt-footer {
    display: block;
    --rhxt-footer-bg: var(--c-primary-dark);
    --rhxt-footer-color: rgba(255, 255, 255, 0.75);
    --rhxt-footer-border: rgba(255, 255, 255, 0.15);
    --rhxt-footer-font: var(--font-body);
    --rhxt-footer-logo-height: 1.4rem;
}

/* Grosses Bestaetigungs-Symbol auf der Danke-Seite. Auf dieser Groesse
   wirkt die normale Strichstaerke zu schwer, darum feiner gezeichnet. */
.thanks-icon {
    display: block;
    font-size: 4rem;
    margin-bottom: 1rem;
    color: var(--c-primary);
}
.thanks-icon .icon {
    stroke-width: 1.3;
}

/* --------- Responsive --------- */

/* Navigation: 6 Punkte kompakter setzen, bevor das Burger-Menü greift */
@media (max-width: 1040px) {
    .main-nav a {
        padding: 0.6rem 0.75rem;
    }
}

/* Hamburger-Menü: ab 1000px, weil sieben Menüpunkte sonst umbrechen */
@media (max-width: 1000px) {
    /* Header / Navigation */
    .site-header .container {
        flex-wrap: nowrap;
        position: relative;
    }
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }
    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--c-bg-paper);
        box-shadow: var(--shadow-md);
        max-height: 80vh;
        overflow-y: auto;
        /* visibility nimmt das geschlossene Menü aus Tab-Reihenfolge und
           Accessibility-Tree, sonst landen Tastatur-Nutzer in unsichtbaren
           Links. Animiert werden nur opacity und transform (kein Layout). */
        visibility: hidden;
        opacity: 0;
        transform: translateY(-6px);
        transition:
            opacity 180ms var(--ease-out),
            transform 220ms var(--ease-out),
            visibility 0s linear 220ms;
        border-top: 1px solid var(--c-border);
        z-index: 99;
    }
    .main-nav.open {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition:
            opacity 180ms var(--ease-out),
            transform 220ms var(--ease-out),
            visibility 0s;
    }
    .main-nav ul {
        flex-direction: column;
        align-items: stretch;
        padding: 0.6rem;
        gap: 0.2rem;
    }
    .main-nav a {
        padding: 1rem 1.1rem;
        border-radius: var(--radius-sm);
        min-height: 44px;
    }
}

/* Tablets / großes Handy quer */
@media (max-width: 800px) {
    /* Topbar zentriert stapeln */
    .topbar {
        padding: 0.55rem 0;
        text-align: center;
    }
    .topbar .container {
        justify-content: center;
        gap: 0.35rem 1rem;
    }
    .topbar-info {
        font-size: 0.85rem;
        gap: 0.35rem 1rem;
        justify-content: center;
        width: 100%;
    }

    /* Hero */
    .hero {
        padding: 2rem 0 1rem;
    }
    .hero h1 br {
        display: none;
    }

    /* Quick Actions */
    .quick-actions {
        padding-top: 1.5rem;
        padding-bottom: 2.5rem;
    }
    .quick-grid {
        gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .quick-card {
        padding: 1.5rem 1.25rem;
    }

    /* Stats */

    /* Projekt-Sektion */
    .projects-section {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    /* Fachdienste */
    .support-item {
        flex-direction: column;
        gap: 0.75rem;
    }
    .support-abbr {
        align-self: flex-start;
    }

    /* Projekte & Elternmitarbeit */
    .project-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .section-intro {
        font-size: 1rem;
    }
    .section-head {
        margin-bottom: 1.5rem;
    }

    /* Subpages */
    .page-header {
        padding: 2rem 0 1.75rem;
    }
    .content {
        padding: 2rem 0;
    }
    .content-card {
        padding: 1.5rem 1.25rem;
    }

    /* Forms */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Termine */

    /* Buttons */
    .btn {
        padding: 0.8rem 1.5rem;
    }
    .btn-large {
        padding: 0.9rem 1.85rem;
        font-size: 1.05rem;
    }

    /* Footer */
    .site-footer {
        padding: 2.5rem 0 1.25rem;
        margin-top: 2.5rem;
    }
    .footer-grid {
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
}

/* Smartphones */
@media (max-width: 540px) {
    body { font-size: 16px; }

    .container,
    .container-narrow {
        padding: 0 1rem;
    }

    /* Topbar: stark stapeln */
    .topbar { font-size: 0.8rem; }
    .topbar .container {
        flex-direction: column;
        gap: 0.25rem;
    }
    .topbar-info {
        flex-direction: column;
        gap: 0.15rem;
        font-size: 0.8rem;
    }
    .topbar a {
        word-break: break-word;
    }

    /* Header: kompakteres Logo */
    .site-header .container {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        gap: 0.5rem;
    }
    .logo-link {
        flex: 1;
    }
    .logo-link img {
        height: 48px;
        max-width: 100%;
    }
    .nav-toggle {
        padding: 0.55rem 0.85rem;
        font-size: 0.95rem;
        flex-shrink: 0;
    }

    /* Hero */
    .hero { padding: 1.5rem 0 0.5rem; }

    /* Quick Actions */
    .quick-actions {
        padding-top: 1rem;
        padding-bottom: 2rem;
    }
    .quick-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
    .quick-card { padding: 1.25rem 1rem; }
    .quick-card-icon { font-size: 2.2rem; }
    .quick-card h3 { font-size: 1.15rem; }

    /* Stats */

    /* Projekt-Sektion */
    .projects-section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .project-card-body { padding: 1.2rem 1.2rem 1.4rem; }
    .project-card h3 { font-size: 1.2rem; }

    .section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }
    .section-head .btn {
        width: 100%;
        text-align: center;
    }

    /* Subpages */
    .page-header {
        padding: 1.6rem 0 1.4rem;
    }
    .page-header .breadcrumb { font-size: 0.85rem; }
    .content { padding: 1.5rem 0; }
    .content-card { padding: 1.25rem 1rem; }
    .info-box { padding: 1rem 1.1rem; }

    /* Buttons */
    .btn {
        padding: 0.75rem 1.3rem;
        font-size: 0.95rem;
    }
    .btn-large {
        padding: 0.85rem 1.6rem;
        font-size: 1rem;
    }

    /* Termine */

    /* Team */
    .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 0.85rem;
    }
    .team-card { padding: 1.1rem 0.75rem; }
    .team-card .avatar {
        width: 70px;
        height: 70px;
        font-size: 1.6rem;
    }

    /* Footer */
    .site-footer {
        padding: 2rem 0 1rem;
        margin-top: 2rem;
    }
    .footer-grid {
        gap: 1.25rem;
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-grid h2 {
        font-size: 1rem;
        margin-bottom: 0.4rem;
    }
}

/* Sehr kleine Geräte (iPhone SE etc.) */
@media (max-width: 360px) {
    .container,
    .container-narrow {
        padding: 0 0.85rem;
    }
    .logo-link img { height: 40px; }
    .nav-toggle {
        padding: 0.5rem 0.7rem;
        font-size: 0.9rem;
    }

    h1 { font-size: 1.75rem; }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .quick-card:hover,
    .quick-card:active,
    .btn:active,
    .a11y-toggle:active {
        transform: none;
    }
}

/* ==========================================================================
   Barrierefreiheit: User-Einstellungen via data-Attribute auf <html>
   ========================================================================== */

/* Schriftgröße */
html[data-fontsize="lg"] body  { font-size: 19px; }
html[data-fontsize="xl"] body  { font-size: 22px; }
html[data-fontsize="xxl"] body { font-size: 25px; }

/* Hochkontrast: schwarz auf weiß, gelbe Akzente */
html[data-contrast="high"] {
    --c-primary:      #000000;
    --c-primary-dark: #000000;
    --c-yellow:       #ffd400;
    --c-yellow-soft:  #fff7c2;
    --c-green:        #006e00;
    --c-green-soft:   #c8f0b8;
    --c-red:          #c00000;
    --c-red-soft:     #ffd6d6;
    --c-blue-soft:    #d0e6ff;
    --c-bg:           #ffffff;
    --c-bg-paper:     #ffffff;
    --c-text:         #000000;
    --c-text-muted:   #1a1a1a;
    --c-border:       #000000;
    --c-border-strong:#000000;
    --c-yellow-ink:   #000000;
    --c-green-ink:    #000000;
    --c-yellow-dark:  #ffd400;
    --shadow-sm: 0 0 0 1px #000;
    --shadow-md: 0 0 0 2px #000;
    --shadow-lg: 0 0 0 3px #000;
}
html[data-contrast="high"] body {
    background-image: none;
    background: #ffffff;
}
html[data-contrast="high"] a,
html[data-contrast="high"] .footer-bottom a {
    color: #000;
    text-decoration: underline;
}
html[data-contrast="high"] .btn-primary {
    background: #000;
    color: #fff;
}
html[data-contrast="high"] .footer-grid h2 {
    color: #ffd400;
}
html[data-contrast="high"] .topbar,
html[data-contrast="high"] .site-footer {
    background: #000;
    color: #fff;
}
html[data-contrast="high"] .topbar a,
html[data-contrast="high"] .site-footer a {
    color: #fff;
}

/* Symbole folgen im Hochkontrast strikt der Schwarz-Weiss-Logik */
html[data-contrast="high"] .icon { color: #000; }
html[data-contrast="high"] .topbar .icon,
html[data-contrast="high"] .site-footer .icon,
html[data-contrast="high"] .btn-primary .icon,
html[data-contrast="high"] .nav-toggle .icon,
html[data-contrast="high"] .a11y-toggle .icon,
html[data-contrast="high"] .a11y-btn[aria-checked="true"] .icon {
    color: #fff;
}

/* Bewegung komplett aus */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* Sichtbarer Focus-Indikator für Tastatur-Nutzer.
   Zweifarbig: dunkler Ring plus heller Gegenring im Abstand. So bleibt der
   Fokus auf hellem UND auf dunklem Grund sichtbar (WCAG 1.4.11, 3:1). */
:focus-visible {
    outline: 3px solid var(--c-primary-dark);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--c-bg-paper);
    border-radius: 3px;
}
/* Auf dunklen Flächen werden beide Ringe getauscht. */
.topbar :focus-visible,
.site-footer :focus-visible,
.a11y-toggle:focus-visible,
.btn-primary:focus-visible {
    outline-color: var(--c-yellow);
    box-shadow: 0 0 0 3px var(--c-primary-dark);
}

/* ---------- A11y-Toolbar ---------- */
.a11y-toggle {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 200;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--c-primary-dark);
    color: white;
    border: 3px solid var(--c-yellow);
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.a11y-toggle {
    transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.a11y-toggle:hover, .a11y-toggle:focus-visible {
    background: var(--c-primary);
}
.a11y-toggle:active { transform: scale(0.95); }

.a11y-panel {
    position: fixed;
    right: 16px;
    bottom: 80px;
    z-index: 199;
    width: min(320px, calc(100vw - 32px));
    background: var(--c-bg-paper);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--c-border);
    padding: 1rem 1.1rem 1.1rem;
    display: none;
}
.a11y-panel[aria-hidden="false"] { display: block; }
.a11y-panel h2 {
    font-size: 1.05rem;
    margin: 0 0 0.85rem;
    color: var(--c-primary-dark);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.a11y-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-top: 1px solid var(--c-border);
}
.a11y-row:first-of-type { border-top: 0; }
.a11y-row label {
    font-weight: 600;
    color: var(--c-text);
    flex: 1;
    font-size: 0.95rem;
}
.a11y-btns {
    display: inline-flex;
    gap: 0.3rem;
}
.a11y-btn {
    background: var(--c-bg);
    border: 1.5px solid var(--c-border);
    color: var(--c-text);
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9rem;
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.a11y-btn .icon {
    width: 1.15em;
    height: 1.15em;
    vertical-align: 0;
}
.a11y-btn:hover, .a11y-btn:focus-visible {
    background: var(--c-yellow-soft);
    border-color: var(--c-yellow);
}
.a11y-btn[aria-checked="true"] {
    background: var(--c-primary);
    color: white;
    border-color: var(--c-primary);
}

.a11y-reset {
    width: 100%;
    margin-top: 0.85rem;
    padding: 0.55rem;
    background: var(--c-bg);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--c-text-muted);
}
.a11y-reset:hover { background: var(--c-yellow-soft); color: var(--c-text); }

@media (max-width: 540px) {
    .a11y-toggle { width: 48px; height: 48px; font-size: 1.3rem; }
    .a11y-panel { right: 12px; bottom: 70px; padding: 0.85rem; }
}

/* ==========================================================================
   Ergänzungen Umbau Oktober 2026
   ========================================================================== */

/* Startseite: Begrüßung ohne Untertitel */
.hero h1 {
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
}
.nowrap { white-space: nowrap; }

/* Sieben Menüpunkte: auf mittleren Breiten enger setzen, damit nichts umbricht */
@media (min-width: 1001px) {
    .main-nav ul { gap: 0.2rem; }
    .main-nav a { padding: 0.55rem 0.7rem; }
}
@media (max-width: 1080px) and (min-width: 1001px) {
    .logo-link img { height: 52px; }
    .main-nav a { padding: 0.5rem 0.5rem; font-size: 0.92rem; }
}

/* --------- Tabellen (Schulzeiten, Öffnungszeiten, Kosten, Tagesstruktur) --------- */
.table-scroll {
    overflow-x: auto;
    margin: 0.75rem 0 1.5rem;
}
.table-scroll:focus-visible { outline-offset: 2px; }
.info-table,
.schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.97rem;
}
.info-table th,
.info-table td,
.schedule-table th,
.schedule-table td {
    text-align: left;
    vertical-align: top;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--c-border);
}
.info-table tbody th {
    font-weight: 700;
    color: var(--c-primary-dark);
    white-space: nowrap;
    width: 40%;
}
.info-table thead th,
.schedule-table thead th {
    font-family: var(--font-display);
    color: var(--c-primary-dark);
    border-bottom: 2px solid var(--c-border-strong);
}
.schedule-table { min-width: 560px; }
.schedule-table tbody th {
    white-space: nowrap;
    font-weight: 700;
    color: var(--c-primary-dark);
    width: 8.5rem;
}
.schedule-table td { border-left: 3px solid var(--c-bg-paper); }
.schedule-extra th,
.schedule-extra td { border-top: 2px dashed var(--c-border-strong); }
.schedule-note {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-text-muted);
}
.slot-unterricht    { background: var(--c-blue-soft); }
.slot-essen         { background: var(--c-red-soft); }
.slot-ganztag       { background: var(--c-green-soft); }
.slot-hausaufgaben  { background: var(--c-yellow-soft); }
.slot-key {
    display: inline-block;
    padding: 0.05rem 0.55rem;
    margin: 0.15rem 0.1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    border: 1px solid var(--c-border);
}

/* --------- Linkliste (Unser Team) --------- */
.link-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: var(--c-bg);
    border: 2px solid var(--c-border);
    border-radius: var(--radius-sm);
    color: var(--c-text);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.link-item:hover {
    border-color: var(--c-yellow);
    background: var(--c-yellow-soft);
    color: var(--c-text);
}
.link-item-text strong {
    display: block;
    font-family: var(--font-display);
    color: var(--c-primary-dark);
    font-size: 1.05rem;
}
.link-item-text span {
    color: var(--c-text-muted);
    font-size: 0.93rem;
}
.link-item > .icon { flex-shrink: 0; color: var(--c-primary); }

/* --------- Fachdienste und Elternmitarbeit als Links --------- */
a.support-link {
    align-items: center;
    color: var(--c-text);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
a.support-link:hover {
    border-color: var(--c-yellow);
    background: var(--c-yellow-soft);
    color: var(--c-text);
}
.support-link .support-text { flex: 1; }
.support-link .support-text > span {
    display: block;
    color: var(--c-text-muted);
    font-size: 0.95rem;
}
.support-title {
    display: block;
    color: var(--c-primary-dark);
    font-family: var(--font-display);
    font-size: 1.08rem;
    line-height: 1.35;
    margin-bottom: 0.2rem;
}
.support-arrow { flex-shrink: 0; color: var(--c-primary); }
.support-text ul { margin: 0.5rem 0 0.75rem; }
.support-text p + p,
.support-text ul + p { margin-top: 0.6rem; }

/* --------- Teams --------- */
.team-heading {
    text-align: center;
    margin: 2.5rem 0 1.25rem;
}
.team-heading:first-child { margin-top: 0; }
.team-grid-lead {
    grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
    justify-content: center;
}
.content-card .team-grid { margin: 1rem 0 1.5rem; }

/* Porträt mit Text (Schulsozialarbeit) */
.person-intro {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.5rem;
    align-items: start;
}
.person-intro img,
.person-card img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.person-intro h2 { margin-top: 0; }

/* Porträts nebeneinander (UBUS) */
.person-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
    gap: 1.5rem;
    justify-content: center;
    margin: 1.75rem 0;
}
.person-card { margin: 0; text-align: center; }
.person-card figcaption { margin-top: 0.6rem; }
.person-card figcaption strong {
    display: block;
    font-family: var(--font-display);
    color: var(--c-primary-dark);
}
.person-card figcaption span {
    font-size: 0.88rem;
    color: var(--c-text-muted);
}

/* --------- Fotos --------- */
.card-image {
    width: 100%;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}
.photo-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}
.photo-pair img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
}
/* Logos und Plakate der Projekte nicht beschneiden */
.project-card img.contain {
    object-fit: contain;
    background: #FFFFFF;
}
.project-card p + p { margin-top: 0.75rem; }

/* --------- Downloads --------- */
.dl-group { margin-top: 1.75rem; }
.dl-footnote {
    margin-top: 1.75rem;
    font-size: 0.9rem;
    color: var(--c-text-muted);
}

@media (max-width: 600px) {
    .person-intro { grid-template-columns: 1fr; }
    .person-intro img { max-width: 220px; }
    .photo-pair { grid-template-columns: 1fr; }
    .info-table tbody th { white-space: normal; }
}

/* Hochkontrast: Farbflächen der Tagesstruktur bleiben über die Soft-Variablen
   lesbar, zusätzlich klare Zellgrenzen. */
html[data-contrast="high"] .schedule-table td,
html[data-contrast="high"] .schedule-table th { border: 1px solid #000; }

/* Tagesstruktur am Handy: Zeitblöcke untereinander statt seitlich scrollen.
   Die expliziten ARIA-Rollen im Markup erhalten die Tabellensemantik. */
@media (max-width: 600px) {
    .schedule-table { min-width: 0; }
    .schedule-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
    .schedule-table,
    .schedule-table tbody,
    .schedule-table tr,
    .schedule-table th,
    .schedule-table td { display: block; width: auto; }
    .schedule-table tr {
        margin-bottom: 0.75rem;
        border: 1px solid var(--c-border);
        border-radius: var(--radius-sm);
        overflow: hidden;
    }
    .schedule-table tbody th {
        width: auto;
        background: var(--c-bg);
        border-bottom: 1px solid var(--c-border);
    }
    .schedule-table td { border-left: 0; }
    .schedule-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.78rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--c-text-muted);
        margin-bottom: 0.15rem;
    }
    .schedule-extra th,
    .schedule-extra td { border-top: 0; }
    .schedule-extra tr { border: 2px dashed var(--c-border-strong); }
    .schedule-note { display: inline; margin-left: 0.4rem; }
}
.support-text li {
    color: var(--c-text-muted);
    font-size: 0.97rem;
    margin-bottom: 0.25rem;
}