/* AH-BK · Seitenmodule: News, Termine, Downloads, Kollegium, Chronik, Schulprogramm, Mediathek, Sitemap, Bausteine */
/* News */
.news-card .news-image { position: relative; overflow: hidden; background: var(--soft-blue) }
.news-card .news-image img { width: 100%; height: 100%; object-fit: cover }

.news-image-fallback { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--primary); font-size: 3rem }
.news-category { position: absolute; left: 12px; bottom: 12px; background: #fff; color: var(--primary) }



.news-body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }

.news-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px }
.news-filter { margin: 0 0 30px }
.beitrag-bild { margin: 0 0 30px }
.beitrag-bild img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--r-lg) }
.beitrag-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .9rem }
.beitrag-nav a { max-width: 46% }
.beitrag-nav small { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; font-weight: 700 }

/* Termine (Seite) */
.termin-list { display: flex; flex-direction: column; gap: 18px; margin: 32px 0 }
/* Listenkarten (Termin, Termin mit Details, Stelle): weiß, links randlos Datum bzw. Icon über die volle Höhe – wie das Foto der Personen-Kachel */
.termin-card, .job-card, .dl-zeile, .ort-relation { position: relative; display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm) }
.termin-body, .job-body, .dl-text, .ort-relation-text { align-self: center; min-width: 0; padding: var(--s-5)}
.termin-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 92px; aspect-ratio: 1; border-radius: var(--r-md); background: linear-gradient(160deg, var(--primary), var(--primary-900)); color: #fff; text-align: center; line-height: 1 }   /* Datumsblock (Startseite) */
.termin-card .termin-date { width: auto; aspect-ratio: auto; min-height: 104px; border-radius: 0 }   /* in der Listenkarte randlos über die volle Höhe (V07) */
.termin-date b { display: block; font-size: 2.15rem; font-weight: 800; letter-spacing: -.03em }
.termin-date span { display: block; margin-top: 5px; font-size: .8rem; font-weight: 800; letter-spacing: .08em; color: #e3e8f7 }
.termin-date small { display: block; margin-top: 4px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; opacity: .85 }
.termin-body h3 { margin: 0 0 6px !important; font-size: var(--fs-h4) !important }
.termin-meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: .8rem }
.termin-meta span { display: inline-flex; align-items: center; gap: 5px }
.termin-meta svg { width: 14px; height: 14px; flex: none }
.termin-card p { margin: 6px 0 0 !important; font-size: .86rem !important }
.termin-card { position: relative }
[data-monatsgruppe] [data-monat][hidden] { display: none }
.monatsfilter { margin-top: 22px; margin-bottom: -10px }
.news-filter + [data-monatsgruppe] .monatsfilter { margin-top: 14px; margin-bottom: 28px }
.monatsfilter button, .staff-filter button { padding: 7px 13px; font-size: .82rem }
.monatsfilter button:disabled, .staff-filter button:disabled { background: transparent; color: #b4bccb; cursor: default }
/* Termin mit Detailseite: weiße Karte mit Akzent, ganz klickbar */
.termin-card.mit-details, .job-card, .dl-zeile { grid-template-columns: 100px minmax(0, 1fr) auto; transition: transform var(--t), box-shadow var(--t), border-color var(--t) }
.mit-details .termin-date { background: linear-gradient(160deg, var(--accent), var(--accent-strong)); color: var(--primary-900) }
.mit-details .termin-date span { color: var(--primary-900) }
.termin-link { color: var(--primary-800); text-decoration: none }
.termin-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit }
.termin-link:focus-visible { outline: none }
.mit-details:has(.termin-link:focus-visible) { outline: 3px solid var(--primary); outline-offset: 3px }
.mit-details:hover, .job-card:hover, .dl-zeile:hover { transform: translateY(-2px); border-color: #cfd7e6; box-shadow: var(--shadow-md) }
.mit-details:hover .termin-link { color: var(--primary) }
.termin-mehr { margin-top: 10px; font-size: .84rem }
.mit-details:hover .termin-mehr .pfeil { transform: translateX(4px) }
.termin-thumb { display: block; align-self: center; width: 150px; margin-right: 20px; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--soft-blue) }
.termin-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease) }
.mit-details:hover .termin-thumb img { transform: scale(1.05) }
.termin-leer { margin: 10px 0 30px; background: var(--soft) }

/* Bildungsgang-Detailseiten */
.program-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 8px }
.program-intro .btn { flex: none }
.bg-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin: 40px 0; background: var(--primary-800); color: #fff }
.content-main .bg-cta h2 { margin: 0; color: #fff; font-size: var(--fs-h3) }
.content-main .bg-cta p { margin: 6px 0 0; color: rgba(255, 255, 255, .82); font-size: .9rem }

/* Downloads / Dokumente */
.dl-group { margin: 0 0 56px }
/* Dokumente: einspaltige Boxen (dokument_karte()) – Titel, Beschreibung, Dateityp */
.content-main .dl-group h2 { margin: 0 0 18px }
.dl-grid { display: flex; flex-direction: column; gap: var(--s-3); margin: 0 0 8px }
.dl-zeile { color: var(--primary-800); text-decoration: none }   /* Listenkarte (Grundregeln bei .termin-card) */

.dl-text { display: flex; flex-direction: column; gap: 3px }
.dl-text strong { font-size: 1.02rem; font-weight: 700; line-height: 1.35 }
.dl-zeile:hover .dl-text strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px }
.dl-text small { font-size: .88rem; line-height: 1.45; color: var(--muted) }
.dl-typ { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 88px; background: var(--soft-blue); color: var(--primary) }
.dl-typ svg { width: 28px; height: 28px; transition: transform var(--t-fast) }
.dl-typ b { font-size: .68rem; font-weight: 800; letter-spacing: .1em; color: var(--primary-800) }
.dl-pfeil { align-self: center; margin-right: 24px; font-weight: 800; color: var(--accent-strong); transition: transform var(--t-fast) }
.dl-zeile:hover .dl-pfeil { transform: translateX(3px) }
.dl-zeile:hover .dl-typ svg { transform: translateY(2px) }

/* Kollegium */
.staff-filter { margin-top: 0; margin-bottom: 18px }   /* A–Z im Kollegium: gleiche Filterleiste wie der Monatsfilter (komponenten.css) */

/* Chronik (Zeitleiste) */
.chronik-highlights { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 0 0 34px }
.chronik-highlight { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px; border-radius: var(--r-md); overflow: hidden; background: var(--primary-800); color: #fff !important; text-decoration: none !important; transition: transform .2s }
.chronik-highlight:hover { transform: translateY(-2px) }
.chronik-highlight::after { content: ""; position: absolute; right: -18px; top: -18px; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 163, 89, .25) }
.chronik-highlight b { font-size: 1.7rem; line-height: 1; letter-spacing: -.04em; color: var(--accent) }
.chronik-highlight span { font-size: .8rem; line-height: 1.3; opacity: .9 }
.chronik-nav { position: sticky; top: calc(var(--header-h) - var(--utility-weg, 0px) + var(--strip-h)); z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0; margin: 0 0 20px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line) }
.chronik-nav a { padding: 6px 13px; border-radius: var(--r-pill); background: var(--soft); font-size: .8rem; font-weight: 700; color: var(--primary) !important; text-decoration: none !important }
.chronik-nav a:hover { background: var(--primary); color: #fff !important }
.chronik-dekade { margin: 0 0 20px; scroll-margin-top: calc(var(--header-h) + var(--strip-h) + 80px) }
.chronik-dekade-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 18px; margin: 46px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line) }
.chronik-dekade-zahl { font-size: clamp(2.6rem, 5vw, 4rem); line-height: .9; letter-spacing: -.06em; font-weight: 800; color: var(--primary-800) }
.content-main .chronik-dekade-kopf h2 { margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 600; letter-spacing: -.01em; color: var(--muted) }
.chronik-jahre { position: relative; list-style: none; margin: 0; padding: 0 }
.chronik-jahre::before { content: ""; position: absolute; left: 43px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--line), var(--soft-blue)) }
.chronik-jahr { display: grid; grid-template-columns: 88px 1fr; gap: 22px; padding: 10px 0; scroll-margin-top: calc(var(--header-h) + var(--strip-h) + 80px) }
.chronik-marke { position: relative; display: flex; justify-content: center; align-items: flex-start; padding-top: 10px }
.chronik-marke span { position: relative; z-index: 1; padding: 5px 12px; border: 2px solid var(--line); border-radius: var(--r-pill); background: #fff; font-weight: 800; font-size: .92rem; color: var(--primary-800) }
.chronik-inhalt { padding: 14px 20px; border-radius: var(--r-md); background: var(--soft); transition: box-shadow .2s }
.chronik-jahr:hover .chronik-inhalt { box-shadow: var(--shadow-sm) }
.content-main .chronik-inhalt ul { list-style: none; margin: 0; padding: 0 }
.content-main .chronik-inhalt li { position: relative; margin: 0; padding: 4px 0 4px 18px; font-size: 1rem; line-height: 1.55 }
.chronik-inhalt li::before { content: ""; position: absolute; left: 0; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent) }
.chronik-inhalt em { font-style: normal; font-weight: 700; color: var(--primary-800) }
.chronik-jahr.ist-meilenstein .chronik-marke span { border-color: var(--accent-strong); background: var(--accent-strong); color: #fff; box-shadow: 0 0 0 6px rgba(242, 139, 45, .15) }
.chronik-jahr.ist-meilenstein .chronik-inhalt { background: var(--accent-soft) }
.chronik-meilenstein { margin-bottom: 4px; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--accent-text) }

/* Schulprogramm */
.sp-hero { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-7); align-items: start; margin: 0 0 88px }
.sp-cover { display: block; overflow: hidden; border-radius: var(--r-md); box-shadow: 0 22px 50px rgba(26, 39, 73, .18); transform: rotate(-2deg); transition: transform .3s }
.sp-cover:hover { transform: rotate(0) translateY(-4px) }
.sp-cover img { width: 100% }
.content-main .sp-hero .lead { margin: 0 0 20px }
.content-main .sp-aufbau { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 26px 0 0; padding: 0 }
.sp-aufbau > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; margin: 0; padding: 22px 24px; border-radius: var(--r-lg); background: var(--soft) }
.sp-nr { display: flex; width: 44px; height: 44px; border-radius: 50%; background: var(--primary-800); color: #fff; font-weight: 800; align-items: center; justify-content: center }
.sp-aufbau strong { display: block; padding-top: 10px; font-size: 1.04rem; line-height: 1.35; color: var(--primary-800) }
.content-main .sp-aufbau ul { list-style: none; margin: 12px 0 0; padding: 0 }
.content-main .sp-aufbau ul li { display: flex; gap: 10px; margin: 0; padding: 5px 0; font-size: .93rem; line-height: 1.45; color: var(--text) }
.sp-aufbau ul li span { flex: none; min-width: 28px; font-size: .82rem; font-weight: 800; color: var(--primary) }
.content-main .sp-konzepte { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px 14px; list-style: none; margin: 26px 0 0; padding: 0 }
.content-main .sp-konzepte li { display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--ink) }
.sp-konzepte li span { flex: none; padding: 3px 9px; border-radius: var(--r-pill); background: var(--soft-blue); font-size: .72rem; font-weight: 800; color: var(--primary) }
.content-main .sp-signatur { padding-top: 22px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted) }

/* Impressum & Datenschutz: schlichter Rechtstext (body.page-rechtstext) */
.page-rechtstext .page-body > :is(p, ul, ol, h2, h3, h4, blockquote, address) { max-width: none }   /* Rechtstexte über die volle Inhaltsbreite (Wunsch 08.10.) */
.page-rechtstext .content-main h2 { margin: 60px 0 28px; color: var(--primary-800) }
.page-rechtstext .content-main h2::after { bottom: -11px; width: 32px }
.page-rechtstext .content-main h3 { margin: 32px 0 8px; color: var(--primary-800) }
.page-rechtstext .page-body > p:first-child, .page-rechtstext .page-body > h2:first-child + p { font-size: inherit; line-height: var(--lh-text); color: var(--text); font-weight: inherit }
.rt-adresse { margin: 6px 0 26px; padding-left: 18px; border-left: 2px solid var(--line); line-height: 1.7; color: var(--text) }

/* Kontakt-Baustein (Ansprechpartner-Raster) */
.content-main .pruef-tag { display: inline-block; margin: -4px 0 14px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--danger-soft); color: #a02b2b; font-size: .76rem; font-weight: 800; line-height: 1.4 }
.content-main .ds-stand { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted) }


/* Mediathek */
.mt-section { margin: 0 0 80px }
.mt-count { font-size: .86rem; font-weight: 700; color: var(--muted) }
.mt-albums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) }
.mt-album { text-decoration: none !important }
.mt-album-img { position: relative }
.mt-album-count { position: absolute; right: 12px; bottom: 12px; padding: 5px 11px; border-radius: var(--r-pill); background: rgba(17, 26, 52, .78); color: #fff; font-size: .74rem; font-weight: 800; backdrop-filter: blur(4px) }



.mt-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) }
.mt-video-frame { aspect-ratio: 16 / 9; background: #0f1730 }
.mt-video-frame video { display: block; width: 100%; height: 100%; object-fit: contain }
.mt-video-frame .video-consent { height: 100%; margin: 0; border-radius: 0; aspect-ratio: auto }
.mt-video-frame .video-consent-inner { padding: 16px }
.mt-video-frame .video-consent :is(p, strong) { display: none }
.mt-video-frame .video-play { margin-bottom: 14px }
.mt-video-frame .video-links { left: 12px; right: 12px; bottom: 10px; font-size: .74rem }






/* Sitemap (seit 18.10.2026 nur Spalten): eine Spalte je Bereich in der Optik des Aufklappmenüs – Intro-Kasten .mega-intro,
   Gruppen .mega-group / .mega-parent / .mega-child aus header.css. Alte Varianten: _planung/archiv/sitemap-varianten-bis-2026-10-18.css */
.sm-spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px }
.sm-bereich { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; margin-bottom: 20px; overflow: hidden; border: 1px solid rgba(221, 226, 236, .9); border-radius: var(--r-lg); background: #fff; box-shadow: 0 12px 30px rgba(26, 39, 73, .08) }
.sm-bereich .mega-intro { border-radius: 0; padding: 28px 26px 26px }   /* Subgrid: Intro-Kästen einer Reihe gleich hoch, Gruppen darunter beginnen auf einer Linie */
.content-main .sm-bereich .mega-intro h2 { margin: 0 0 10px; font-size: 1.4rem; line-height: 1.15; letter-spacing: -.04em; color: #fff }
.content-main .sm-bereich .mega-intro p { margin: 0 0 20px; color: rgba(255, 255, 255, .78); font-size: .86rem; line-height: 1.6 }
.sm-gruppen { display: grid; align-content: start; gap: 28px; padding: 26px 26px 30px }
.content-main .sm-gruppen h3 { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: 0 }
.sm-gruppen .mega-child.depth-2 { padding-left: 16px; font-size: .92rem }
.sm-zahl { flex: none; font-size: .74rem; font-weight: 800; color: var(--muted) }


/* Bausteine: Ersatz für frühere Inline-Styles */
.bg-cta .btn-row, .bg-cta-buttons { margin: 0 }
.baustein--kennzahlen .school-stats { margin-bottom: 36px }
.content-main .pruef-tag { display: inline-block; margin: 0 0 14px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--danger-soft); color: #a02b2b; font-size: .76rem; font-weight: 800; line-height: 1.4 }
.mehr-link { margin-top: 28px }

/* Namensgeberin */
.content-main .namensgeberin-steckbrief { margin: 0 0 22px; padding-left: 18px; border-left: 3px solid var(--accent); font-size: var(--fs-lead); line-height: 1.5; font-weight: 500; color: var(--primary-800) }
.content-main .namensgeberin-daten { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; font-weight: 700; color: var(--muted) }
.content-main .quellen-liste { margin: 0; padding-left: 18px; font-size: .88rem; line-height: 1.55; color: var(--muted) }
.content-main .quellen-liste li { margin-bottom: 8px; overflow-wrap: anywhere }

/* Bildungsgang-Seiten */
.program-formen { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 28px 0 8px }
.program-formen .info-box { margin: 0 }
.content-main .program-fragen { margin-top: 18px }
.frage-details { margin: 22px 0 4px; padding: 20px 24px; border-radius: var(--r-md); background: var(--soft) }
.frage-details > .kicker { display: block; margin-bottom: 10px }
.frage-details > :last-child { margin-bottom: 0 }
.frage-details .table-wrap { margin: 0 0 12px; background: #fff; border-radius: var(--r-sm) }
.content-main .frage-quelle { display: inline-block; margin: 16px 0 0; padding: 4px 10px; border-radius: var(--r-pill); background: var(--note-soft); color: var(--note); font-size: .74rem; font-weight: 700 }
.content-main tr.tabelle-gruppe th { padding-top: 18px; background: none; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-align: left }
.logo-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 24px }
.logo-reihe img { max-height: 90px; width: auto; border-radius: var(--r-sm) }
@media (max-width: 760px) { .program-formen { grid-template-columns: 1fr } }

/* Krankmeldung: aufklappbares Formular, das nur eine E-Mail vorbereitet (js/module/krankmeldung.js) */
.km-form { margin: 28px 0; border-radius: var(--r-lg); background: var(--primary-800); color: #fff; box-shadow: 0 18px 44px rgba(22, 37, 69, .18) }
.km-form :focus-visible { outline-color: var(--accent) }
.km-form summary { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 44px 56px 28px; text-align: center; list-style: none; cursor: pointer }
.km-form summary::-webkit-details-marker { display: none }
.km-form summary strong { display: block; font-size: 1.3rem; color: #fff }
.km-form summary small { display: block; font-size: .86rem; color: rgba(255, 255, 255, .7) }
.km-form summary > b { position: absolute; top: 20px; right: 24px; font-size: 1.6rem; line-height: 1; color: var(--accent); transition: transform .2s }
.km-form[open] summary > b { transform: rotate(45deg) }
.km-form-icon { position: relative; z-index: 0; width: 76px; height: 76px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--primary-900); font-size: 2rem; transition: transform .2s }
/* Radar: zwei Ringe laufen versetzt nach außen; aufgeklappt (Formular offen) ruhig */
.km-form-icon::before, .km-form-icon::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--accent); opacity: 0; animation: km-radar 4.4s ease-out infinite; pointer-events: none }
.km-form-icon::after { animation-delay: 2.2s }
.km-form[open] .km-form-icon::before, .km-form[open] .km-form-icon::after { animation: none }
@keyframes km-radar { 0% { transform: scale(1); opacity: .32 } 100% { transform: scale(1.85); opacity: 0 } }
.km-form summary:hover .km-form-icon { transform: scale(1.05) }
.km-form form { display: grid; gap: 16px; padding: 22px 24px 24px; border-top: 1px solid rgba(255, 255, 255, .14) }
.km-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 16px }
.km-form label { display: grid; gap: 6px; font-size: .84rem; font-weight: 700; color: #fff }
.km-form label small { font-weight: 400; color: rgba(255, 255, 255, .65) }
.km-form :is(input:not([type="checkbox"]), textarea) { width: 100%; padding: 12px 14px; border: 2px solid transparent; border-radius: var(--r-md); font: inherit; font-weight: 400; color: var(--ink); background: #fff }
.km-form :is(input, textarea):focus { outline: 0; border-color: var(--accent) }
.km-form textarea { resize: vertical; min-height: 84px }
.km-form input[aria-invalid="true"] { border-color: #ff8a8a; background: var(--danger-soft) }
.km-form .km-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; line-height: 1.45 }
.km-form .km-check a { color: #fff; text-decoration: underline }
.km-check input { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--accent) }
.km-praxis[hidden] { display: none }
.km-form .km-hinweis { margin: 0; font-size: .82rem; color: rgba(255, 255, 255, .7) }
.km-form .btn { justify-self: start }
.km-meldung { margin: 28px 0 -12px; background: var(--ok-soft); color: var(--ok); font-weight: 700; scroll-margin-top: calc(var(--header-h) + var(--strip-h) + 24px) }
.km-meldung--fehler { background: var(--danger-soft); color: var(--danger) }

/* Responsive */
@media (max-width: 1220px) {
	.sm-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 1100px) {
	.mt-videos { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 1020px) {
	.chronik-highlights { grid-template-columns: repeat(3, 1fr) }
	.sp-hero { grid-template-columns: 1fr } .sp-cover { max-width: 200px }
	.content-main .sp-aufbau { grid-template-columns: 1fr }
}
@media (max-width: 760px) {
	.content-main h2 { margin-top: 48px }
	.chronik-highlights { grid-template-columns: repeat(2, 1fr) }
	.chronik-jahre::before { left: 31px }
	.chronik-jahr { grid-template-columns: 64px minmax(0, 1fr); gap: 12px }
	.content-main .chronik-inhalt li { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word }
	.sm-spalten { grid-template-columns: 1fr }
	.content-main .lead { margin-bottom: 32px }
	.content-main h2 { margin-bottom: 28px }
	.content-main h3 { margin-top: 36px }
	.termin-card, .job-card, .termin-card.mit-details, .dl-zeile, .ort-relation { grid-template-columns: 74px minmax(0, 1fr) }
	.termin-body, .job-body, .dl-text, .ort-relation-text { padding: 14px 16px }
	.termin-date b { font-size: 1.75rem }
	.termin-date span { font-size: .72rem }
	.termin-date small { font-size: .68rem }
	.job-pfeil, .dl-pfeil { display: none }
	.termin-thumb { display: none }
	.sp-aufbau > li { gap: 12px; padding: 18px 16px }
}
@media (max-width: 480px) {
}
@media (max-width: 760px) {
	.km-grid { grid-template-columns: 1fr }
	.km-form summary { padding: 26px 44px 22px } .km-form form { padding-left: 18px; padding-right: 18px }
	.km-form-icon { width: 64px; height: 64px; font-size: 1.7rem }
}

/* Responsive (aus anderen Dateien hierher verschoben, damit die Basis-Regeln dieser Datei sie nicht überschreiben) */
@media (max-width: 1100px) {
	.mt-albums { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 760px) {

	.mt-albums { grid-template-columns: 1fr }
	.mt-videos { grid-template-columns: 1fr }
	.program-intro { flex-direction: column; align-items: flex-start }
}

/* Sprechstunden: Suche + Wochentag-Filter, Liste Name · Tag · Zeit */
.sprech-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 0 0 24px }
.sprech-suche { position: relative; display: flex; align-items: center; flex: 0 1 300px }
.sprech-suche svg { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--muted); pointer-events: none }
.sprech-suche input { width: 100%; padding: 11px 16px 11px 44px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: #fff; font: inherit; font-size: 1rem; color: var(--primary-800) }
.sprech-suche input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(66, 84, 149, .15) }
.sprech .monatsfilter { margin-top: 0; margin-bottom: 0 }
.content-main .sprech-liste { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none }
/* Sprechstunden (V19): Listenkarte im Personen-Look – Foto links randlos, ganze Zeile öffnet die Personen-Ansicht */
.sprech-liste li { position: relative; display: grid; grid-template-columns: 100px minmax(0, 1fr) 300px; align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t), border-color var(--t) }
.sprech-liste li:hover { transform: translateY(-2px); border-color: #cfd7e6; box-shadow: var(--shadow-md) }
.sprech-liste li:has(.sprech-name:focus-visible) { outline: 3px solid var(--primary); outline-offset: 3px }
.sprech-foto { display: grid; place-items: center; min-height: 84px; overflow: hidden; background: var(--soft-blue); color: var(--primary); font-size: 1.1rem; font-weight: 800 }
.sprech-foto img { width: 100%; height: 100%; object-fit: cover; object-position: top }
.sprech-person { align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: var(--s-4) var(--s-5) }
.sprech-person small { font-size: .86rem; line-height: 1.4; color: var(--muted) }
.sprech-name { padding: 0; border: 0; background: none; font: inherit; font-size: 1.02rem; font-weight: 700; line-height: 1.35; color: var(--primary-800); text-align: left; cursor: pointer }
.sprech-name::after { content: ""; position: absolute; inset: 0 }
.sprech-name:focus-visible { outline: none }
.sprech-liste li:hover .sprech-name { color: var(--primary) }
.sprech-wann { align-self: center; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding-right: var(--s-5) }
.sprech-tag { font-size: .9rem; font-weight: 700; color: var(--primary) }
.sprech-zeit { font-size: .9rem; color: var(--text); font-variant-numeric: tabular-nums; text-align: right }
.sprech-liste li[hidden] { display: none }
.content-main .sprech-leer { margin-top: 16px }
@media (max-width: 760px) {
	.sprech-suche { flex-basis: 100% }
	.sprech-liste li { grid-template-columns: 74px minmax(0, 1fr) }
	.sprech-foto { grid-row: 1 / 3 }
	.sprech-person { padding: 12px 16px 2px }
	.sprech-wann { display: flex; gap: 10px; padding: 0 16px 12px }
	.sprech-zeit { text-align: left }
}

/* Inhaltsverzeichnis (Baustein liste, stil 'inhalt'): einspaltig, Kapitel mit Unterpunkten aufklappbar */
.content-main .inhaltsverzeichnis { max-width: var(--w-content); margin: 0 0 1.6em; padding: 0; list-style: none; border-top: 1px solid var(--line) }
.content-main .inhaltsverzeichnis > li { margin: 0; border-bottom: 1px solid var(--line); line-height: 1.5 }
.inhaltsverzeichnis summary, .iv-zeile { display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; align-items: center; padding: 14px 6px 14px 0 }
.inhaltsverzeichnis summary { cursor: pointer; list-style: none; border-radius: var(--r-sm); transition: background var(--t-fast) }
.inhaltsverzeichnis summary::-webkit-details-marker { display: none }
.inhaltsverzeichnis summary:hover { background: var(--soft) }
.inhaltsverzeichnis summary i { position: relative; width: 14px; height: 14px; justify-self: end }
.inhaltsverzeichnis summary i::before, .inhaltsverzeichnis summary i::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 2px; background: var(--accent-strong); transition: transform var(--t-fast) }
.inhaltsverzeichnis summary i::after { transform: rotate(90deg) }
.inhaltsverzeichnis details[open] summary i::after { transform: rotate(0deg) }
.inhaltsverzeichnis strong { color: var(--primary-800) }
.iv-nr { font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums }
.content-main .inhaltsverzeichnis ol { margin: 0 0 12px 44px; padding: 0; list-style: none }
.content-main .inhaltsverzeichnis ol li { display: grid; grid-template-columns: 44px minmax(0, 1fr); margin: 0; padding: 3px 0; font-size: .95rem; color: var(--text) }
.inhaltsverzeichnis ol .iv-nr { font-weight: 700; color: var(--muted) }

/* Bereichsseite (Baustein bereichsuebersicht): Gruppen als Spalten wie im Aufklappmenü – Bereich = Landkarte, Gruppe = Kacheln */
.bereich-karte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 8px 0 0; padding: 28px 32px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm) }
.bk-gruppe { min-width: 0 }
.bk-gruppe .zeilen { border-top: 0 }   /* Linkzeilen (V23); die Linie kommt von der Gruppen-Überschrift */
.content-main .bk-gruppe h2 { margin: 0 0 4px; font-size: 1.08rem; letter-spacing: 0 }
.content-main .bk-gruppe h2::after { display: none }
.bk-gruppe h2 a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 12px; border-bottom: 2px solid var(--line); color: var(--ink); text-decoration: none }
.bk-gruppe h2 a span { color: var(--accent-strong) }
.bk-gruppe h2 a:hover { color: var(--primary) }
/* Bereichs-Reiter (render_bereiche_reiter(), oben auf jeder Bereichsseite): alle Hauptbereiche, der aktuelle gefüllt – springt nicht, steht immer gleich */
/* Reiter mit allen Hauptbereichen: so viele gleich breite Spalten wie Bereiche im Menü (seit 11.10.2026: drei) */
.bereiche-reiter { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 0 0 32px; padding: 4px; border-radius: var(--r-md); background: var(--soft) }
.bereiche-reiter > * { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 14px; border-radius: var(--r-sm); font-size: .94rem; font-weight: 700; text-align: center; line-height: 1.25 }
.bereiche-reiter a { color: var(--primary-800); text-decoration: none; transition: background var(--t-fast), box-shadow var(--t-fast) }
.bereiche-reiter a:hover { background: #fff; box-shadow: 0 4px 12px rgba(26, 39, 73, .08) }
.bereiche-reiter span { background: var(--primary-800); color: #fff; cursor: default }
@media (max-width: 1100px) { .bereich-karte { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px) { .bereich-karte { grid-template-columns: 1fr; padding: 22px 20px } .bereiche-reiter > * { padding: 8px 10px; font-size: .84rem } }

/* Jobbörse (Baustein jobs, daten/jobboerse.php): Stellen als klickbare Karten wie Termine mit Detailseite */
.job-list { display: flex; flex-direction: column; gap: 14px; margin: 26px 0 32px }
.job-card[hidden] { display: none }

.job-icon { display: grid; place-items: center; background: var(--soft-blue); color: var(--primary) }
.job-icon svg { width: 26px; height: 26px }
.job-art { margin-bottom: 6px; background: var(--soft-blue); color: var(--primary-800) }
.job-card[data-art="Ausbildung"] .job-art { background: var(--accent-soft); color: var(--note) }
.content-main .job-body h3 { margin: 0 0 2px; font-size: var(--fs-h4) }
.job-link { color: var(--primary-800); text-decoration: none }
.job-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit }
.content-main .job-arbeitgeber { margin: 0 0 8px; font-size: .9rem; color: var(--text) }
.job-pfeil { align-self: center; margin-right: 24px; font-weight: 800; color: var(--accent-strong); transition: transform var(--t-fast) }
.job-card:hover .job-pfeil { transform: translateX(3px) }


/* Projekte (Baustein projekte, daten/projekte.php): Karten mit Bild, das erste Projekt groß */
.projekt-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin: 28px 0 }


.projekt-bild { position: relative; overflow: hidden; background: var(--soft) }
.projekt-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block }
.projekt-bild--logo { background: #fff; border-bottom: 1px solid var(--line) }
.projekt-bild--logo img { inset: 14%; width: 72%; height: 72%; object-fit: contain }





@media (max-width: 760px) { .projekt-liste { grid-template-columns: 1fr } }

/* Bereiche mit zwei Gruppen: Bereichsseite zweispaltig */
@media (min-width: 641px) { .bereich-karte:has(> .bk-gruppe:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* Personen-Kachel (person_kachel()) – überall gleich: Kollegium, Ansprechpersonen, Termine, Bildungsgänge, Kontakt. Klick öffnet die Personen-Ansicht. */
.person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin: 20px 0 0 }
.person-kachel { position: relative; display: flex; align-items: stretch; gap: 16px; width: 100%; min-height: 116px; padding: 0 44px 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; font: inherit; text-align: left; color: inherit; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast) }
.person-kachel[hidden] { display: none }
.person-kachel:hover, .person-kachel:focus-visible { transform: translateY(-2px); border-color: #cfd7e6; box-shadow: var(--shadow-md) }
.person-foto { flex: none; display: grid; place-items: center; width: 100px; overflow: hidden; background: var(--soft-blue); color: var(--primary); font-size: 1.35rem; font-weight: 800 }   /* randlos links, volle Höhe */
.person-foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform var(--t) }
.person-kachel:hover .person-foto img { transform: scale(1.04) }
.person-text { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; padding: 14px 0 }
.person-text strong { font-size: 1.06rem; line-height: 1.3; color: var(--primary-800) }
.person-text strong, .person-text > span { hyphens: auto; overflow-wrap: normal; word-break: normal }
.kachel-raster + .person-grid { margin-bottom: 22px }
.person-text > span { font-size: .88rem; line-height: 1.4; color: var(--muted) }
.person-text em { margin-top: 3px; font-size: .76rem; font-style: normal; font-weight: 700; color: var(--primary); opacity: 0; transition: opacity var(--t-fast) }
@media (hover: hover) { .person-kachel:hover em { opacity: 1 } }   /* nur mit Maus – auf Touch würde iOS sonst den ersten Tipp „verbrauchen“ */
.person-kachel:focus-visible em { opacity: 1 }
.person-auf { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--soft); font-size: 1rem; font-weight: 700; line-height: 1; color: var(--accent-strong); transition: background var(--t-fast), color var(--t-fast) }
.person-kachel:hover .person-auf { background: var(--accent-strong); color: #fff }
.content-main .person-hinweis { margin: 14px 0 0; font-size: .92rem }
.content-main .person-kontakt { margin: 12px 0 0 }
/* Externe Ansprechperson (kontakt_kachel): gleicher Look, aber kein Profil – nicht klickbar, Links statt Overlay */
.person-kachel--extern { padding-right: var(--s-5); cursor: default }
.person-kachel--extern:hover { transform: none; border-color: var(--line); box-shadow: var(--shadow-sm) }
.person-kachel--extern .person-foto svg { width: 34px; height: 34px }
.person-links { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px }
.content-main .person-links a { font-size: .86rem; font-weight: 700; color: var(--primary); text-decoration: none; overflow-wrap: anywhere }
.content-main .person-links a:hover { text-decoration: underline; text-underline-offset: 3px }
.bg-leitung { margin: 0 0 32px }
.bg-leitung .person-grid { margin-top: 10px }
.content-main .bg-leitung > p { margin: 12px 0 0; font-size: .9rem }
/* Sprechstunden: Foto bzw. Initialen vor dem Namen */

/* Räume (Baustein orte, daten/orte.php) */
.ort-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-4); margin: 20px 0 0 }
.ort-karte { scroll-margin-top: calc(var(--header-h) + var(--strip-h) + 24px) }
.ort-karte:target { box-shadow: 0 0 0 3px var(--accent) }
.ort-bild { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--soft-blue); color: var(--primary) }
.ort-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.ort-bild svg { width: 40px; height: 40px; opacity: .6 }



.ort-text .pruef-tag { align-self: flex-start; margin-top: 6px; white-space: normal }
/* Ort als Relation (Baustein ort, z. B. Veranstaltungsort eines Termins) */
.ort-relation { margin: 20px 0 0 }   /* Veranstaltungsort auf Termin-Seiten: Listenkarte (V20), Grundregeln bei .termin-card */
.ort-relation .ort-bild { aspect-ratio: auto; min-height: 104px }
.ort-relation-text { display: flex; flex-direction: column; gap: 4px }
.ort-relation-text strong { font-size: var(--fs-h4); color: var(--primary-800) }
.content-main .ort-relation-text p { margin: 0; font-size: .92rem }
.content-main .ort-relation-adresse { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px !important; font-size: .84rem !important; color: var(--muted) }
.ort-relation-adresse svg { width: 15px; height: 15px; flex: none }
.content-main .ort-relation-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 8px !important }

/* Wer hilft bei was? (Baustein zustaendigkeiten) */
.zust-liste { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 0 }
.zust-thema { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-4) var(--s-7); align-items: center; padding: 18px 20px; border-radius: var(--r-lg); background: var(--soft) }
.content-main .zust-kopf h3 { margin: 0 0 6px; font-size: var(--fs-h4); line-height: 1.35 }
.zust-thema .person-grid { margin: 0; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) }
.content-main .zust-offen { margin: 0; font-size: .92rem; color: var(--muted) }
@media (max-width: 900px) { .zust-thema { grid-template-columns: 1fr } }

/* Abschluss der Detailseiten (V22, detail_ende()) */
.detail-ende { margin-top: var(--s-7) !important }