/* AH-BK · Komponenten & Medien (Karten, Kicker, Akkordeon, Fakten, Hinweise, Tabellen, Kacheln, Kontakt) – Buttons und Pfeile: buttons.css */
/* Sprungmarken im Inhalt (Baustein „sprungmarken“) */
.sprungmarken { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 56px }
.content-main .baustein--sprungmarken + .baustein > h2:first-child { margin-top: 0 }
.sprungmarken > span { margin-right: 6px; font-size: var(--fs-kicker); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.sprungmarken a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-pill); background: var(--soft-blue); font-size: .88rem; font-weight: 700; color: var(--primary-800); text-decoration: none; transition: background var(--t-fast) }
.sprungmarken a:hover { background: #dfe5f3 }
.sprungmarken b { color: var(--accent-strong); transition: transform var(--t-fast) }
.sprungmarken a:hover b { transform: translateY(2px) }
/* Hut-Icon der Online-Anmeldung (anmelde_button(), buttons_html()) */
.anmelde-icon { flex: none; width: 1.35em; height: 1.35em; margin-right: -.2em }

/* --- Textlink mit Pfeil --- */
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 800; font-size: .9rem; text-decoration: none }
.link-arrow .pfeil { color: var(--accent-strong); transition: transform var(--t) }
.link-arrow:hover .pfeil, a:hover .link-arrow .pfeil { transform: translateX(4px) }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(66, 84, 149, .35); cursor: pointer }   /* sieht aus wie ein Link im Fließtext (V11) */
.link-button:hover { text-decoration-color: var(--accent-strong) }

/* --- Oberzeile (Kicker) --- */
.kicker { display: block; font-size: var(--fs-kicker); line-height: 1.2; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--primary) }
/* Kicker: nur zwei Varianten – .kicker--line (orange mit Strich, über dem Seitentitel) und .kicker (blau, über Abschnitten); .kicker--light auf dunklem Grund.
   --accent, --muted und --pill nur noch in den Layout-Varianten zur Abstimmung; nach dem Varianten-Termin entfernen. */
.kicker--accent { color: var(--accent-text) }
.kicker--light { color: rgba(255, 255, 255, .78) }
.kicker--line { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-text) }
.kicker--line::before { background: var(--accent-strong) }
.kicker--line::before { content: ""; width: 28px; height: 2px; border-radius: 2px }

/* --- Abschnittskopf: Kicker + Titel (+ Text) links, Link rechts --- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin: 0 0 34px }
.section-head.compact { margin-bottom: 20px }
.section-head h2 { margin: 8px 0 0; font-size: clamp(2.15rem, 3vw, 3.2rem); line-height: 1.05; letter-spacing: -.05em; font-weight: 650 }
.section-head p { margin: 10px 0 0; max-width: 610px; color: var(--muted); line-height: 1.6 }
.section-head--inline h2 { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0; font-size: clamp(1.7rem, 2.4vw, 2.4rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.1 }
.section-head--light h2, .section-head--light .link-arrow { color: #fff }
.section-head--light .link-arrow .pfeil { color: var(--accent) }

/* Bildkarte (V17): Foto oben 16:10, darunter Oberzeile, Titel, ein Satz, Pfeil-Link – Nachricht, Galerie, Video, Projekt, Raum, Bildungsgang.
   Ausnahmen: Video 16:9 (Player), Bildungsgang-Karte mit größerem Titel, blaue Karten der Startseite (startseite.css). */
/* Familien statt Grundtyp (V13): Listenkarte (seiten.css), Bildkarte, Kachel, Box – jede gemeinsame Regel nennt ihre Mitglieder; keine Basis-Klasse, von der alles erbt. */
.news-card, .mt-album, .mt-video, .projekt-karte, .ort-karte, .bo-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; color: inherit; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t) }
:is(.news-card, .mt-album, .projekt-karte, .bo-card):hover { transform: translateY(-2px); box-shadow: var(--shadow-md) }
.news-image, .mt-album-img, .projekt-bild, .ort-bild, .bo-card-img { aspect-ratio: 16 / 10 }
:is(.news-image, .mt-album-img, .projekt-bild, .bo-card-pic) img { transition: transform .6s var(--ease) }
:is(.news-card, .mt-album, .projekt-karte, .bo-card):hover :is(.news-image, .mt-album-img, .projekt-bild, .bo-card-pic) img { transform: scale(1.04) }
:is(.news-body, .mt-album-body, .mt-video-meta, .projekt-text, .ort-text) { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1; padding: var(--s-5) }
:is(.news-body, .mt-album-body, .mt-video-meta, .projekt-text) small { font-size: .76rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--muted) }
.content-main :is(.news-body h3, .mt-album-body strong, .mt-video-meta strong, .projekt-text strong, .ort-text strong), :is(.news-body h3, .mt-album-body strong, .mt-video-meta strong, .projekt-text strong, .ort-text strong) { margin: 0; font-size: var(--fs-h4); line-height: 1.3; color: var(--primary-800) }
:is(.news-body p, .projekt-text > span:not(.link-arrow), .ort-text > span) { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--text) }
:is(.news-body, .mt-album-body, .mt-video-meta, .projekt-text) .link-arrow { margin-top: auto; padding-top: 8px; font-size: .84rem }
.mt-album-img { position: relative; display: block; overflow: hidden; background: var(--soft-blue) }
.mt-album-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease) }

/* --- Pillen, Badges, Chips --- */
.badge { display: inline-flex; font-size: .76rem; font-weight: 700; padding: 5px 11px; border-radius: var(--r-pill); background: var(--soft-blue); color: var(--primary-800) }
/* Pills (V06): eine Größe für alle, die Klassen setzen nur noch den Ton – weiß (Rubrik auf Bildern), blau (Merkmale, li-vi), orange (Hervorhebung), rot/Status nur intern */
.pill, .pruef-pill, .livi-pill, .news-category, .job-art { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); font-size: .72rem; font-weight: 800; line-height: 1.3; letter-spacing: .02em; white-space: nowrap }
.pill { font-style: normal }
.pill-uebernommen { background: var(--ok-soft); color: var(--ok) }
.pill-ueberarbeitet { background: var(--soft-blue); color: var(--primary-800) }
.pill-neu { background: #f1ecf9; color: #5b3f91 }
.pill-pruefen { background: var(--note-soft); color: #9a5212; cursor: help }
/* Filter-/Reiter-Leisten: einheitliche Chips */
.news-filter, .ue-filter, .monatsfilter, .staff-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px }
.news-filter a, .ue-filter button, .monatsfilter button, .staff-filter button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: var(--r-pill); background: transparent; font-size: .88rem; font-weight: 700; color: var(--primary-800); cursor: pointer; transition: background var(--t-fast), color var(--t-fast) }
.news-filter a, .ue-filter button, .monatsfilter button, .staff-filter button { background: var(--soft) }
.news-filter a:hover:not(.active), .ue-filter button:hover:not(.active), .monatsfilter button:hover:not(.active):not(:disabled), .staff-filter button:hover:not(.active):not(:disabled) { background: var(--soft-blue) }   /* aktive Taste bleibt dunkel */
.news-filter a.active, .ue-filter button.active, .monatsfilter button.active, .staff-filter button.active { background: var(--primary-800); color: #fff }
.ue-filter button span { opacity: .6 }
.monatsfilter button span, .staff-filter button span { font-weight: 800; color: var(--accent-text) }
.monatsfilter button.active span, .staff-filter button.active span { color: var(--accent) }

/* --- Akkordeon --- */
.accordion { border-top: 1px solid var(--line); margin: 28px 0 48px }
.accordion details { border-bottom: 1px solid var(--line) }
.accordion summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; font-size: 1.1rem; font-weight: 700; color: var(--ink); cursor: pointer }
.accordion summary::-webkit-details-marker { display: none }
.accordion summary span { flex: none; display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--soft); align-items: center; justify-content: center; color: var(--accent-strong); font-size: 1rem; transition: transform var(--t), background var(--t), color var(--t) }
.accordion details[open] summary span { transform: rotate(45deg); background: var(--accent-strong); color: #fff }
.accordion details > div { padding: 4px 0 28px; font-size: .95rem; color: var(--text) }

/* --- Gremien (Karten aus daten/gremien.php) --- */
.gremien-kicker { margin-bottom: 24px }
.gremien { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin: 0 0 48px }
.gremium { scroll-margin-top: calc(var(--header-h) + 24px); background: var(--soft) }
.gremium--breit { grid-column: 1 / -1 }
.content-main .gremium h2 { margin: 0 0 10px; font-size: var(--fs-h3); letter-spacing: -.01em }
.content-main .gremium h2::after { display: none }
.content-main .gremium-text { margin: 0 0 16px; font-size: .95rem; line-height: 1.6; color: var(--muted) }
.content-main .gremium-hinweis { margin: 14px 0 0; font-size: var(--fs-small); color: var(--muted) }
.gremium-liste { margin: 0 0 8px }
.gremium-liste > div { padding: 12px 0; border-top: 1px solid var(--line) }
.gremium-liste dt { font-size: var(--fs-small); font-weight: 700; color: var(--primary-800) }
.gremium-liste dd { margin: 2px 0 0; line-height: 1.6 }
.gremium-liste--spalten > div { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 4px var(--s-7) }
.gremium-liste--spalten dd { margin: 0 }
.gremium-stv { display: block; font-size: .92rem; color: var(--muted) }
.gremium-offen { font-style: italic; color: var(--muted) }
.gremium .table-wrap { margin-top: 4px }
.gremium table { background: transparent }

/* --- Fakten --- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 40px 0 56px }
.facts > div { padding: 22px 20px 22px 0 }
.facts > div + div { padding-left: 20px; border-left: 1px solid var(--line) }
.facts span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 700; margin-bottom: 5px }
.facts strong { display: block; font-size: 1rem; line-height: 1.4; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word }

/* --- Hinweise --- */
/* Innenabstände (V12): Karten --s-5 (24 px), Boxen und große Container 28/32 px, kompakte Zeilen 12/16 px (Siehe auch) */
/* Boxen (V09): eine Größe für Hinweis, Zitat, „keine Einträge“, Gremium und Aufforderung – die Klassen setzen nur den Ton; Meldungen kompakt */
.info-box, .quote, .termin-leer, .gremium, .bg-cta { padding: 28px 32px; border-radius: var(--r-lg) }
.km-meldung { padding: 14px 18px; border-radius: var(--r-lg) }
.info-box { background: var(--soft); margin: 40px 0 }
.info-box strong { display: block; font-size: 1.02rem; color: var(--primary-800); margin-bottom: 6px }
.content-main .info-box .info-box-titel { margin: 0 0 6px; font-size: 1.02rem; line-height: 1.4; letter-spacing: 0; color: var(--primary-800) }   /* Titel des Entwurf-Kastens: Überschrift für Screenreader, Optik wie strong */
.content-main .info-box .info-box-titel::after { display: none }
.info-box p { margin: 0 }
.info-box.entwurf { background: var(--note-soft); margin-bottom: 40px; border: 1px solid var(--note-line) }
.info-box.entwurf h3 { margin: 18px 0 4px; font-size: var(--fs-h4) }
.pruef-hinweis { background: var(--note-soft); padding: 14px 18px; border-radius: var(--r-md); margin: 0 0 48px; font-size: .88rem; color: #6b4a24 }
.pruef-hinweis strong { color: var(--note) }
/* Prüf-Pill „prüfen P07“ (pruef_pill()): feste Nummer je Prüfstelle, Anker #pruef-p07 */
.pruef-pill { gap: 5px; margin-right: 8px; background: #a02b2b; color: #fff; vertical-align: middle; scroll-margin-top: calc(var(--header-h) + var(--strip-h) + 40px) }
.pruef-pill b { font-weight: 800; letter-spacing: .02em; color: #ffd9d9 }
.pruef-pill:target { box-shadow: 0 0 0 4px rgba(160, 43, 43, .25) }
/* „li-vi“: Sammlung mit Liste + Detailansicht (nur Vorschau, zur Erklärung im Kundentermin) */
.livi-pill { flex: none; margin-left: 8px; vertical-align: middle; background: var(--soft-blue); color: var(--primary-800) }
h1 .livi-pill { margin-left: 14px; transform: translateY(-.35em) }
.mega-child .livi-pill { margin: 0 8px 0 0 }
a.pruef-pill { color: #fff !important; text-decoration: none !important }   /* verlinkte Pill (Prüfliste) nicht als Fließtext-Link färben */
a.pruef-pill:hover { background: #7e1f1f }
.quote { background: var(--soft); margin: 0; font-size: 1.08rem; line-height: 1.6; color: #27334c; font-weight: 600 }

/* --- Listen & Tabellen --- */
.check-list { list-style: none; padding: 0; margin: 20px 0 }
.check-list li { position: relative; padding: 7px 0 7px 30px; font-size: 1.06rem; color: var(--text) }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--primary); font-weight: 800 }
.table-wrap { overflow-x: auto; margin: 32px 0 40px; -webkit-overflow-scrolling: touch }

/* --- Kacheln (Übersichtsseiten) --- */
/* Icon-Kachel und Zeile (V21) – ruhig und typografisch: Icon klein in der Titelzeile statt im getönten Kästchen, Pfeil am Zeilenende, linksbündig */
.kachel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); margin: 32px 0 48px }
.kachel-raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 28px }
.kachel { display: flex; flex-direction: column; gap: 8px; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none !important; transition: transform var(--t), box-shadow var(--t) }
a.kachel:hover { transform: translateY(-2px); box-shadow: var(--shadow-md) }
.kachel--ohne-link { box-shadow: none }
.kachel-titel { display: flex; align-items: baseline; gap: 10px }
.kachel-zeichen { flex: none; align-self: center; display: inline-flex; color: var(--primary); font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em }
.kachel-zeichen svg { width: 20px; height: 20px }
.kachel-titel strong { flex: 1; font-size: var(--fs-h4); line-height: 1.3; color: var(--primary-800) }
.kachel-titel .pfeil { color: var(--accent-strong); font-weight: 800; transition: transform var(--t-fast) }
a.kachel:hover .kachel-titel .pfeil { transform: translateX(3px) }
.kachel-wert { font-size: 1.12rem; font-weight: 700; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere }
.kachel-text { font-size: .9rem; line-height: 1.55; color: var(--muted) }
.zeilen { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line) }
.zeilen li { border-bottom: 1px solid var(--line) }
.zeilen a { display: flex; align-items: center; gap: 14px; padding: 12px 6px; color: var(--primary-800); text-decoration: none; transition: background var(--t-fast) }
.zeilen a:hover { background: var(--soft) }
.zeilen-zeichen { flex: none; display: inline-flex; color: var(--primary) }
.zeilen-zeichen svg { width: 19px; height: 19px }
.zeilen-text { flex: 1; display: flex; flex-direction: column; min-width: 0 }
.zeilen-text strong { font-size: .95rem; font-weight: 700; line-height: 1.35 }
.zeilen-text small { font-size: .82rem; color: var(--muted) }
.zeilen .pfeil { color: var(--accent-strong); font-weight: 800; transition: transform var(--t-fast) }
.zeilen a:hover .pfeil { transform: translateX(3px) }
.zeilen--dunkel, .zeilen--dunkel li { border-color: rgba(255, 255, 255, .14) }
.zeilen--dunkel a { color: #fff }
.zeilen--dunkel a:hover { background: rgba(255, 255, 255, .06) }
.zeilen--dunkel .zeilen-zeichen { color: var(--accent) }
.zeilen--dunkel .zeilen-text small { color: rgba(255, 255, 255, .66) }

/* --- Ansprechpartner & Kontakt --- */


.content-figure { margin: 44px 0 }
.content-figure img { width: 100%; border-radius: var(--r-md) }
.content-figure figcaption { font-size: .82rem; color: var(--muted); margin-top: 10px }
/* Handschriftlicher Schriftzug unter dem Bild (bild_text, Feld 'handschrift'): SVG als Maske, eingefärbt in der Markenfarbe */
.handschrift { display: block; width: min(72%, 280px); aspect-ratio: 2066 / 355; margin: 18px 0 4px 6px; background: var(--primary-800); -webkit-mask: var(--handschrift) left center / contain no-repeat; mask: var(--handschrift) left center / contain no-repeat; transform: rotate(-4deg); transform-origin: left center }
.content-figure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin: 40px 0 }
.content-figure-grid img { width: 100%; border-radius: var(--r-md) }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s-3); margin: 26px 0 34px }
.galerie a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-md); background: var(--soft) }
.galerie img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .35s }
.galerie a:hover img { transform: scale(1.05) }
.video-consent { position: relative; aspect-ratio: 16 / 9; background: var(--grad-brand); border-radius: var(--r-md); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; margin: 26px 0; overflow: hidden }
.video-consent-inner { max-width: 460px; padding: 24px; display: flex; flex-direction: column; align-items: center }
.video-play { display: inline-flex; width: 58px; height: 58px; border-radius: 50%; background: var(--accent-strong); align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 12px }
.video-consent p, .content-main .video-consent p { font-size: .8rem; line-height: 1.6; color: rgba(255, 255, 255, .82); margin: 8px 0 16px }
.video-consent p a { color: #fff; text-decoration: underline }
.video-links { position: absolute; left: 18px; right: 18px; bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; font-size: .8rem }   /* unten: links YouTube, rechts nur dieses Video */
.video-nur { background: none; border: 0; padding: 0; font: inherit; color: #fff; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; opacity: .9 }
.video-nur:hover, .video-extern:hover { opacity: 1 }
.video-extern { color: #fff; opacity: .8 }
.video-consent iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.video-film { margin: 8px 0 56px }
.video-film video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0f1730; border-radius: var(--r-lg); object-fit: contain }
.video-film figcaption { font-size: .82rem; color: var(--muted); margin-top: 10px }



/* Barrierefreiheit: Orange als Schrift bleibt auf dunklem Grund hell (Kontrast dort ausreichend) */
:is(.mega-intro, .consent-head, .site-footer, .home-band, .page-hero, .hero-slider) :is(.kicker--accent, .kicker--line) { color: var(--accent) }

/* Responsive */
@media (max-width: 760px) {
	.section-head { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 26px }
	.section-head h2 { font-size: 2.35rem; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word }
	.facts { grid-template-columns: repeat(2, minmax(0, 1fr)) }
	.gremien { grid-template-columns: 1fr }

	.gremium-liste--spalten > div { grid-template-columns: 1fr }
	.facts > div:nth-child(3) { padding-left: 0; border-left: 0 }
	.facts > div:nth-child(n+3) { border-top: 1px solid var(--line) }
	.facts { margin: 28px 0 40px }
	.facts > div { padding: 16px 12px 16px 0 }
	.facts > div:nth-child(even) { padding-left: 16px }
	.info-box, .quote, .termin-leer, .gremium, .bg-cta { padding: 22px 20px }
	.kachel-raster, .kachel-raster--2 { grid-template-columns: 1fr; gap: 10px; margin: 20px 0 36px }
	.info-box { margin: 28px 0 }
	/* Kacheln als kompakte Zeilen: Icon links, Pfeil rechts */
	.monatsfilter, .staff-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand) }
	.monatsfilter button, .staff-filter button { flex: none }
	/* seitlich scrollbare Filter: fester Hinweis am Rand, solange es dort weitergeht (Klassen kann-links/kann-rechts aus filter.js) */
	.monatsfilter::before, .staff-filter::before, .monatsfilter::after, .staff-filter::after { content: ""; position: sticky; z-index: 1; flex: none; align-self: stretch; width: 48px; pointer-events: none; opacity: 0; transition: opacity var(--t-fast) }
	.monatsfilter::before, .staff-filter::before { order: -1; left: var(--alle-breite, 64px); margin-right: -54px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='13' fill='%2327365f'/%3E%3Cpath d='M15 8l-5 5 5 5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left 6px center / 26px no-repeat, linear-gradient(to right, #fff 55%, rgba(255, 255, 255, 0)) }
	.monatsfilter::after, .staff-filter::after { right: calc(-1 * var(--rand)); margin-left: -54px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='13' fill='%2327365f'/%3E%3Cpath d='M11 8l5 5-5 5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 6px center / 26px no-repeat, linear-gradient(to left, #fff 55%, rgba(255, 255, 255, 0)) }
	/* „Alle“ bleibt beim Blättern links stehen (weiße Fläche deckt den Rand ab), der linke Pfeil sitzt rechts daneben (Breite aus filter.js) */
	.monatsfilter > button:first-child, .staff-filter > button:first-child { order: -2; position: sticky; left: 0; z-index: 2; box-shadow: -14px 0 0 8px #fff, -40px 0 0 8px #fff }
	.kann-links::before, .kann-rechts::after { opacity: 1; pointer-events: auto; cursor: pointer }   /* Pfeile sind antippbar (filter.js blättert) */
}
/* Datei-Button (datei_button(), {{datei:…|…}}): heller Button mit Download-Icon und Dateityp */
.content-main p.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 1.35em }
/* Siehe auch (Baustein siehe_auch): Querverweise am Seitenende, schlicht und klar als Hinweis erkennbar */
.siehe-auch { margin: 72px 0 0; padding-top: 30px; border-top: 1px solid var(--line) }   /* immer am Seitenende, Kacheln wie auf den Übersichtsseiten */
.siehe-auch .kicker { margin: 0 }
.siehe-auch .kachel-raster { margin: 16px 0 0; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) }

/* Hinweis auf KI-Bilder (ki_hinweis()): klein „KI“ unten rechts im Bild, beim Überfahren, Fokus oder Antippen (.offen) der volle Text.
   Die Umgebung muss position: relative haben. */
.ki-hinweis { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; margin: 0; padding: 2px 6px; border: 0; border-radius: var(--r-pill); background: rgba(12, 23, 47, .3); color: rgba(255, 255, 255, .82); font: inherit; font-size: .58rem; font-weight: 700; line-height: 1.35; letter-spacing: .05em; cursor: default; backdrop-filter: blur(3px); transition: background var(--t-fast), color var(--t-fast) }
button.ki-hinweis { cursor: pointer }
.ki-lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }   /* zu: nur für Screenreader */
:is(.ki-hinweis:hover, .ki-hinweis:focus-visible, .ki-hinweis.offen, a:focus-visible .ki-hinweis) { background: rgba(12, 23, 47, .62); color: #fff; letter-spacing: .01em }
:is(.ki-hinweis:hover, .ki-hinweis:focus-visible, .ki-hinweis.offen, a:focus-visible .ki-hinweis) .ki-kurz { display: none }
:is(.ki-hinweis:hover, .ki-hinweis:focus-visible, .ki-hinweis.offen, a:focus-visible .ki-hinweis) .ki-lang { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-weight: 600 }
.news-image .ki-hinweis { top: 10px; bottom: auto }   /* Karten: unten links steht schon das Etikett */