/* =============================================================================
   NMS Kirchberg am Wagram — Gestaltung der neuen Seite (ohne WordPress).
   Grundlage: docs/mockup/klick/klick.css (abgenommen: K2 „Regenbogen", Aktuelles + Schularbeiten im Aufbau K1),
   ergänzt um Teile aus theme/nms-kirchberg/assets/css/nmsk.css (Highlight K1, Fotoband mit Pause, Beitragsansichten,
   Ausgabe des Termine-Moduls, Inhalte aus WordPress-Blöcken). Systemschrift, keine Fremd-Abrufe.
   Kontraste wie im Mockup gemessen (docs/mockup/klick/nachweis/).
   ========================================================================== */
:root {
  --rot: #BD0926; --gelb: #F8E91A; --gruen: #42A62A; --blau: #0E71B4; --violett: #622081; --navy: #002749;
  --tinte: #1f2933; --tinte2: #4a5563; --titel: #622081; --link: #0E71B4; --knopf: #BD0926;
  --hell: #f5eefa; --grau: #fafafa; --linie: #e6e8ec;
  --fuss: #2a1640; --fuss-text: #e8dcf2;
  --sys: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --breite: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html { font-size: 100%; } /* 1rem = Browser-Einstellung (meist 16 px); alles in rem, damit eine größere Grundschrift wirkt */
body { margin: 0; font: 1.125rem/1.6 var(--sys); color: var(--tinte); background: #fff; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .45em; }
p { margin: 0 0 .8em; }
a { color: var(--link); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.innen { max-width: var(--breite); margin: 0 auto; padding: 0 40px; }
.ic { width: 20px; height: 20px; flex: none; }

/* Sprunglink */
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: #fff; color: var(--link); padding: 10px 16px; font-weight: 700; border: 2px solid var(--link); }
.skip:focus { top: 8px; }

/* Regenbogen-Streifen */
.regen { display: flex; height: 6px; }
.regen i { flex: 1; }
.regen i:nth-child(1) { background: var(--rot); } .regen i:nth-child(2) { background: var(--gelb); }
.regen i:nth-child(3) { background: var(--gruen); } .regen i:nth-child(4) { background: var(--blau); }
.regen i:nth-child(5) { background: var(--violett); }

/* ---------- Kopf ---------- */
.kopf { background: #fff; border-bottom: 1px solid var(--linie); position: relative; z-index: 20; }
.kopf .innen { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--titel); font-weight: 800; font-size: 1.3125rem; white-space: nowrap; }
.marke img { width: 68px; height: 68px; }
.marke small { display: block; font-weight: 500; font-size: .875rem; color: var(--tinte2); }
.nav { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px 18px; align-items: center; font-weight: 600; font-size: 1rem; }
.nav > li { position: relative; }
.nav a, .unter-knopf { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 2px; color: var(--tinte); text-decoration: none; border-bottom: 3px solid transparent; }
.unter-knopf { font: inherit; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.unter-knopf .pfeil { width: 14px; height: 14px; transition: none; }
.unter-knopf[aria-expanded="true"] .pfeil { transform: rotate(180deg); }
.nav a[aria-current="page"], .unter-knopf.aktiv { border-bottom-color: var(--violett); color: var(--titel); }
.nav a:hover, .unter-knopf:hover { color: var(--titel); }
.unter { display: none; list-style: none; margin: 0; padding: 8px 0; position: absolute; left: -12px; top: 100%; min-width: 250px; background: #fff; border: 1px solid var(--linie); border-top: 4px solid var(--violett); border-radius: 0 0 10px 10px; box-shadow: 0 8px 20px rgb(0 0 0 / .1); }
.unter a { display: flex; padding: 6px 16px; min-height: 40px; border: 0; font-weight: 500; white-space: nowrap; }
.unter a:hover { background: var(--hell); }
.unter a[aria-current="page"] { font-weight: 700; color: var(--titel); background: var(--hell); }
.unter small { margin-left: 6px; color: var(--tinte2); font-weight: 400; }
.hat-unter:hover > .unter, .unter-knopf[aria-expanded="true"] + .unter { display: block; }
html:not(.js) .hat-unter:focus-within > .unter { display: block; }
.menuknopf { display: none; align-items: center; gap: 8px; font: 700 1.125rem var(--sys); min-height: 44px; padding: 0 14px; color: var(--titel); background: #fff; border: 2px solid var(--titel); border-radius: 6px; cursor: pointer; }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px; font-weight: 700; text-decoration: none; background: var(--knopf); color: #fff; border: 2px solid var(--knopf); border-radius: 6px; }
.knopf:hover { background: #9c0720; border-color: #9c0720; }
.knopf.rand { background: #fff; color: var(--link); border-color: var(--link); }
.knopf.rand:hover { background: #eef5fb; }
.knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Abschnitte allgemein ---------- */
main section { padding: 48px 0; }
.abschnitt-titel { font-size: 2rem; color: var(--titel); }
.unterzeile { color: var(--tinte2); font-size: 1.25rem; }
.mitte { text-align: center; }
/* K1-Zierlinie, in K2 als kurzer Regenbogen */
.zier { display: flex; width: 100px; height: 5px; margin: 12px auto 0; }
.zier i { flex: 1; } .zier i:nth-child(1) { background: var(--rot); } .zier i:nth-child(2) { background: var(--gelb); }
.zier i:nth-child(3) { background: var(--gruen); } .zier i:nth-child(4) { background: var(--blau); } .zier i:nth-child(5) { background: var(--violett); }

/* Startbild (K2: Text neben Bild) */
.held .innen { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: center; }
.held { padding: 28px 0 32px; }
.held h1 { font-size: 2.5rem; color: var(--titel); margin-bottom: 4px; }
.held .sub { font-size: 1.4375rem; color: var(--tinte2); margin-bottom: 18px; }
.held img { width: 100%; height: 440px; object-fit: cover; border-radius: 24px 24px 24px 0; }

/* Demnächst (K2) */
.leiste { background: var(--hell); padding: 18px 0 !important; }
.leiste .innen { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.leiste h2 { font-size: 1.25rem; color: var(--titel); margin: 0; }
.leiste ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.leiste li { background: #fff; padding: 6px 12px; border-radius: 99px; font-size: 1rem; border: 1px solid #e2d4ee; }
.leiste li b { color: var(--titel); }
.leiste .innen > a { font-weight: 700; }

/* Schwerpunkte (K2) */
.schwer { text-align: center; }
.kacheln { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
.kacheln li { background: #fff; border: 1px solid var(--linie); border-top: 6px solid var(--f); border-radius: 10px; padding: 20px 22px; }
.kacheln .kreis { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--f); color: var(--fi, #fff); }
.kacheln .pk { width: 46px; height: 46px; }
.kacheln h3 { font-size: 1.25rem; margin-top: 12px; }
.kacheln p { font-size: 1rem; color: var(--tinte2); margin: 0 0 .4em; }
.f-rot { --f: var(--rot); } .f-gelb { --f: var(--gelb); --fi: #002749; } .f-gruen { --f: var(--gruen); }
.f-blau { --f: var(--blau); } .f-violett { --f: var(--violett); } .f-navy { --f: var(--navy); }
.ziel-zeile { max-width: 760px; margin: 0 auto; color: var(--tinte2); }

/* Aktuelles — Aufbau K1 (Überschrift mittig, Karten-Raster, Knopf mittig), Form K2 */
.news { background: var(--hell); text-align: center; }
.karten { list-style: none; margin: 28px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; text-align: left; }
.karten > li { display: flex; }
.karten a { display: flex; flex-direction: column; width: 100%; background: #fff; text-decoration: none; color: var(--tinte); border-radius: 10px; overflow: hidden; border-top: 6px solid var(--f, var(--violett)); box-shadow: 0 1px 3px rgb(0 0 0 / .08); }
.karten img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.karten .datum { display: block; color: var(--knopf); font-weight: 700; padding: 14px 18px 0; font-size: .875rem; }
.karten h2, .karten h3 { padding: 4px 18px 0; color: var(--titel); font-size: 1.3125rem; }
.karten p { padding: 0 18px 14px; font-size: 1rem; color: var(--tinte2); margin: 0; }
.karten a:hover h2, .karten a:hover h3 { text-decoration: underline; }
.karten .weiter { margin-top: auto; padding: 0 18px 16px; font-weight: 700; color: var(--link); font-size: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .karten img { transition: transform .25s ease; }
  .karten a:hover img { transform: scale(1.03); }
}

/* Fotoband (K2) */
.band { padding: 40px 0 0 !important; }
.kopfzeile { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-bottom: 20px; }
.kopfzeile h2 { font-size: 1.75rem; color: var(--titel); margin: 0; }
.kopfzeile p { margin: 0; flex: 1; color: var(--tinte2); }
.fotos { list-style: none; margin: 0; padding: 0 8px; display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; }
.fotos li { flex: 0 0 auto; width: clamp(220px, 22vw, 320px); }
.fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }

/* Termine + Schularbeitstermine — Aufbau K1 (zwei Spalten), Form K2 */
.term .innen { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: start; }
.term h2 { color: var(--titel); font-size: 1.75rem; }
.termine { list-style: none; margin: 0 0 12px; padding: 0; }
.termine li { display: flex; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.termine .dt { width: 56px; text-align: center; font-size: .8125rem; font-weight: 700; text-transform: uppercase; line-height: 1.15; padding: 6px 0; flex: none; background: var(--violett); color: #fff; border-radius: 8px; }
.termine .dt b { display: block; font-size: 1.5rem; }
.termine strong { display: block; font-size: 1.0625rem; }
.termine small { font-size: .875rem; color: var(--tinte2); }
.marker { display: inline-block; font-size: .875rem; font-weight: 700; padding: 1px 8px; border-radius: 99px; margin-left: 6px; vertical-align: 1px; }
.m-sa { background: #fde8eb; color: #8a061c; } .m-fo { background: #e7f4e3; color: #245c17; } .m-frei { background: #e6f0f8; color: #0b4f7d; }
.tabrollen { overflow-x: auto; }
table.sa { border-collapse: collapse; width: 100%; font-size: 1rem; background: #fff; }
table.sa caption { text-align: left; font-weight: 700; padding-bottom: 6px; }
table.sa th, table.sa td { border: 1px solid #c9ced6; padding: 7px 9px; text-align: left; vertical-align: top; }
table.sa td { white-space: nowrap; }
table.sa thead th:nth-child(2) { border-top: 5px solid var(--blau); }
table.sa thead th:nth-child(3) { border-top: 5px solid var(--gelb); }
table.sa thead th:nth-child(4) { border-top: 5px solid var(--gruen); }
.hinweis-klein { font-size: .875rem; color: var(--tinte2); }

/* Schulleben-Karten (K2) */
.leben .innen { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 24px; }
.leben .k { border: 1px solid var(--linie); border-top: 6px solid var(--f); border-radius: 10px; padding: 20px; overflow: hidden; }
.leben h2 { font-size: 1.3125rem; color: var(--titel); }
.leben p { font-size: 1rem; color: var(--tinte2); }
.video { margin: 0; }
.vbild { position: relative; display: block; color: #fff; }
.vbild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; gap: 8px; align-items: center; background: #111; color: #fff; font-weight: 700; padding: 12px 18px; min-height: 44px; border-radius: 6px; white-space: nowrap; }
.video figcaption { font-size: .875rem; margin-top: 6px; color: var(--tinte2); }
.pickerl { width: 130px; }
.hoodie { width: 130px; float: right; margin: 0 0 8px 12px; }

/* ---------- Fuß ---------- */
.fuss { background: var(--fuss); color: var(--fuss-text); padding: 40px 0 20px; }
.fspalten { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.3fr; gap: 28px; }
.fuss h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gelb); }
.fuss p { font-size: 1rem; }
.fuss a { color: #fff; }
.fuss :focus-visible { outline-color: var(--gelb); }
.soz { display: inline-flex; gap: 8px; align-items: center; min-height: 32px; }
.siegel { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.siegel li { width: 84px; height: 84px; background: #fff; display: grid; place-items: center; padding: 4px; border-radius: 6px; }
.siegel li.leer { font-size: .875rem; text-align: center; color: #4a5563; border: 2px dashed #9aa3ad; line-height: 1.25; }
.siegel img { width: 100%; height: 100%; object-fit: contain; }
.copy { font-size: .875rem; margin: 24px 0 0; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .2); }

/* ---------- Unterseiten ---------- */
.seitenkopf { background: var(--hell); padding: 30px 0 26px !important; border-bottom: 1px solid #e2d4ee; }
.seitenkopf h1 { font-size: 2.25rem; color: var(--titel); margin: 0; }
.seitenkopf p { margin: 6px 0 0; color: var(--tinte2); font-size: 1.1875rem; }
.brot { font-size: .875rem; color: var(--tinte2); margin-bottom: 6px !important; }
.brot a { color: var(--link); }
.inhalt { max-width: 820px; }
.inhalt h2 { color: var(--titel); font-size: 1.625rem; margin-top: 1.4em; }
.inhalt h3 { font-size: 1.25rem; margin-top: 1.2em; }
.inhalt ul { padding-left: 22px; }
.inhalt li { margin: 4px 0; }
code { font: .875rem ui-monospace, monospace; overflow-wrap: anywhere; }
.sprungmarken { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0 !important; margin: 0 0 8px; }
.sprungmarken a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--link); border-radius: 99px; text-decoration: none; font-weight: 700; }
.sprungmarken a:hover { background: #eef5fb; }
.us-abschnitt { scroll-margin-top: 16px; border-top: 6px solid var(--f); padding-top: 18px; margin-top: 36px; }
.us-abschnitt h2 { margin-top: 0 !important; }
table.tab { border-collapse: collapse; width: 100%; font-size: 1rem; margin: 8px 0 18px; }
table.tab caption { text-align: left; font-weight: 700; padding-bottom: 6px; }
table.tab th, table.tab td { border: 1px solid #c9ced6; padding: 6px 9px; text-align: left; vertical-align: top; }
table.tab thead th { background: var(--hell); }
table.tab td.z, table.tab th.z { text-align: center; width: 70px; }
table.tab tbody th { font-weight: 600; }
table.tab .gruppe th { background: #f4f6f9; font-weight: 700; }
abbr[title] { text-decoration: underline dotted; cursor: help; }

/* Beitrag */
.beitrag { max-width: 760px; }
.beitrag .datum { color: var(--knopf); font-weight: 700; }
.beitrag figure { margin: 18px 0 22px; }
.beitrag figure img { width: 100%; border-radius: 12px; }
.beitrag figcaption { font-size: .875rem; color: var(--tinte2); margin-top: 6px; }
.zurueck { font-weight: 700; }

/* Klassen */
.klassen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.klassen li { border: 1px solid var(--linie); border-top: 6px solid var(--f); border-radius: 10px; overflow: hidden; background: #fff; }
.klassen .foto { aspect-ratio: 4 / 3; display: grid; place-items: center; text-align: center; background: var(--hell); color: var(--tinte2); font-size: .875rem; line-height: 1.35; padding: 10px; }
.klassen .foto svg { width: 48px; height: 48px; color: #8a6aa3; margin: 0 auto 6px; }
.klassen h2 { font-size: 1.625rem; color: var(--titel); margin: 12px 16px 2px; }
.klassen p { margin: 0 16px 14px; font-size: 1rem; color: var(--tinte2); }

/* Team */
.team-gruppe { font-size: 1.5rem; color: var(--titel); margin: 30px 0 14px; }
.team-gruppe:first-of-type { margin-top: 0; }
.team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.team li { border: 1px solid var(--linie); border-radius: 10px; padding: 16px; text-align: center; background: #fff; }
.team .bild { width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 10px; background: var(--hell); display: grid; place-items: center; color: #8a6aa3; }
.team .bild svg { width: 64px; height: 64px; }
.team h3 { font-size: 1.125rem; margin: 0 0 4px; }
.team p { font-size: .875rem; color: var(--tinte2); margin: 0; }

/* Termine-Seite */
.monat { font-size: 1.625rem; color: var(--titel); margin: 30px 0 6px; padding-bottom: 6px; border-bottom: 3px solid var(--f); }
.monat:first-of-type { margin-top: 0; }
.termine.gross li { align-items: flex-start; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .875rem; color: var(--tinte2); margin-bottom: 14px; }
.legende .marker { margin-left: 0; }
.sa-bild { border: 1px solid var(--linie); border-radius: 8px; margin: 10px 0 18px; }
.zweispaltig { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: start; }

/* Downloads */
.dl { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.dl a { display: flex; gap: 14px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--linie); text-decoration: none; min-height: 56px; }
.dl a:hover strong { text-decoration: underline; }
.dl .ic { width: 30px; height: 30px; color: var(--rot); }
.dl strong { display: block; font-size: 1.1875rem; }
.dl small { font-size: .875rem; color: var(--tinte2); }

/* Gibt-es-nicht */
.leer-seite { text-align: center; padding: 70px 0 !important; }
.leer-seite h1 { color: var(--titel); font-size: 2.125rem; }

/* ---------- Telefon / schmal ---------- */
@media (max-width: 1060px) {
  .innen { padding: 0 16px; }
  .menuknopf { display: inline-flex; }
  html.js #hauptmenue { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 4px solid var(--violett); box-shadow: 0 10px 20px rgb(0 0 0 / .12); }
  html.js #hauptmenue.offen { display: block; }
  html:not(.js) .kopf .innen { flex-wrap: wrap; }
  .nav { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 16px 12px; font-size: 1.125rem; }
  .nav > li { border-bottom: 1px solid var(--linie); }
  .nav a, .unter-knopf { width: 100%; min-height: 48px; border-bottom: 0; border-left: 4px solid transparent; padding-left: 10px; }
  .nav a[aria-current="page"], .unter-knopf.aktiv { border-left-color: var(--violett); }
  .unter-knopf { justify-content: space-between; }
  .unter { position: static; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 6px 16px; min-width: 0; }
  .hat-unter:hover > .unter { display: none; }
  .unter-knopf[aria-expanded="true"] + .unter { display: block; }
  .unter a { white-space: normal; }
}
@media (max-width: 760px) {
  main section { padding: 32px 0; }
  .marke { font-size: 1.125rem; white-space: normal; }
  .marke img { width: 48px; height: 48px; }
  .marke small { display: none; }
  .held .innen, .term .innen, .leben .innen, .zweispaltig { grid-template-columns: 1fr; gap: 22px; }
  .held { padding-top: 16px; }
  .held h1 { font-size: 1.875rem; }
  .held .sub { font-size: 1.25rem; }
  .held img { height: 220px; }
  .leiste .innen { flex-direction: column; align-items: stretch; }
  .leiste ul { flex-direction: column; }
  .leiste li { border-radius: 8px; }
  .kopfzeile { flex-direction: column; align-items: flex-start; }
  .abschnitt-titel { font-size: 1.6875rem; }
  .kacheln { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kacheln li { padding: 14px; }
  .kacheln .kreis { width: 56px; height: 56px; }
  .kacheln .pk { width: 34px; height: 34px; }
  .kacheln h3 { font-size: 1.0625rem; }
  .kacheln p { font-size: .875rem; }
  .karten { grid-template-columns: 1fr; gap: 20px; }
  .fotos li { width: 70vw; }
  table.sa { font-size: .875rem; }
  table.sa th, table.sa td { padding: 5px; white-space: normal; }
  .fspalten { grid-template-columns: 1fr 1fr; gap: 20px; }
  .fspalten > div:first-child, .fspalten > div:last-child { grid-column: 1 / -1; }
  .fuss { padding: 28px 0 16px; }
  .seitenkopf h1 { font-size: 1.8125rem; }
  .klassen { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr 1fr; gap: 12px; }
  .team li { padding: 12px 8px; }
  .team .bild { width: 80px; height: 80px; }
  .team .bild svg { width: 48px; height: 48px; }
  .hoodie { width: 100px; }
  table.tab { font-size: .875rem; }
  table.tab td.z, table.tab th.z { width: auto; }
}
@media (min-width: 761px) and (max-width: 1060px) {
  .karten, .klassen { grid-template-columns: 1fr 1fr; }
  .team { grid-template-columns: repeat(3, 1fr); }
  .kacheln { grid-template-columns: 1fr 1fr; }
  .leben .innen { grid-template-columns: 1fr 1fr; }
}
@media print { .menuknopf, .skip, .hl-link, .pause { display: none; } .kopf { position: static; } }

/* =============================================================================
   Ergänzungen für die echte Seite
   ========================================================================== */
.symbole { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Seite ohne Kopf/Fuß (anzeige): Brotkrümel allein, Pflicht-Links am Ende */
.seitenkopf.nur-brot { padding: 14px 0 !important; }
.seitenkopf.nur-brot .brot { margin: 0 !important; }
.pflicht { border-top: 1px solid var(--linie); padding: 14px 0 18px; font-size: 1rem; color: var(--tinte2); }
.pflicht p { margin: 0; }
.pflicht a { display: inline-flex; align-items: center; min-height: 32px; }
.ic { fill: none; }
.vh { margin: -1px; padding: 0; border: 0; }

/* ---------- Highlight K1: Band ganz oben (Farben nur Logofarben mit Kontrast ≥ 4,5 : 1 zu Weiß) ---------- */
.hl { --hl: var(--rot); background: var(--hl); color: #fff; border-bottom: 3px solid #fff; }
.hl-violett { --hl: var(--violett); } .hl-blau { --hl: var(--blau); } .hl-navy { --hl: var(--navy); }
.hl-innen { min-height: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; padding-top: 6px; padding-bottom: 6px; font-size: 1.0625rem; }
.hl-text { margin: 0; flex: 1 1 320px; }
.hl-text strong { font-weight: 800; }
.hl-link { color: inherit; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.hl-link:hover { color: inherit; }
.hl :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- Kopf ---------- */
.marke span { line-height: 1.25; }
@media (min-width: 1061px) { .kopf .innen { max-width: 1320px; } .marke { flex: none; } .nav { flex-wrap: wrap; justify-content: flex-end; column-gap: 14px; } }
@media (max-width: 1060px) { .marke { min-width: 0; } }
.nav a, .unter-knopf { white-space: nowrap; }
body { overflow-wrap: break-word; }

/* ---------- Startbild ---------- */
.held-text p { margin: 0 0 .8em; }
.held-text { margin-bottom: 8px; }
.held img { border-radius: 24px 24px 24px 0; }

/* ---------- Demnächst: Ausgabe des Termine-Moduls (Ansicht „zeile") als Pillen ---------- */
.leiste-termine { flex: 1 1 420px; }
.leiste-termine ul, .leiste-termine ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.leiste-termine p { margin: 0; }
.leiste-termine li b, .leiste-termine li strong { color: var(--titel); }

/* ---------- Schwerpunkte: Piktogramme inline (currentColor) ---------- */
.kacheln .pk { fill: currentColor; }
.kacheln h3 a { color: inherit; text-decoration: underline; text-decoration-color: var(--f); text-decoration-thickness: 2px; }
.kachel-text p { font-size: 1rem; color: var(--tinte2); margin: 0 0 .4em; }
.kachel-text { font-size: 1rem; color: var(--tinte2); }

/* ---------- Beitragskarten: Text-Container, Platzhalter, Ansichten Liste/Groß ---------- */
.karten .text { display: flex; flex-direction: column; flex: 1; }
.karten .bild-leer { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--hell); }
.karten .bild-leer img { width: 68px; height: 68px; aspect-ratio: auto; opacity: .55; }
.karten a:focus-visible { outline-offset: 4px; }
.karten.ansicht-liste { grid-template-columns: 1fr; gap: 14px; }
.karten.ansicht-liste a { flex-direction: row; align-items: stretch; }
.karten.ansicht-liste img, .karten.ansicht-liste .bild-leer { width: 200px; flex: none; aspect-ratio: 4 / 3; }
.karten.ansicht-gross { grid-template-columns: repeat(2, 1fr); }
.karten.ansicht-gross > li:first-child { grid-column: 1 / -1; }
.karten.ansicht-gross > li:first-child a { display: grid; grid-template-columns: 1.4fr 1fr; }
.karten.ansicht-gross > li:first-child img { height: 100%; aspect-ratio: 16 / 10; }
.karten.ansicht-gross > li:first-child .text { justify-content: center; padding: 12px 10px; }
.karten.ansicht-gross > li:first-child h2, .karten.ansicht-gross > li:first-child h3 { font-size: 1.75rem; }
.news.weiss { background: #fff; }

/* ---------- Seitenblättern ---------- */
.blaettern ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.blaettern a, .blaettern .aktuell, .blaettern .luecke { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 6px; font-weight: 700; text-decoration: none; }
.blaettern a { border: 2px solid var(--link); }
.blaettern a:hover { background: #eef5fb; }
.blaettern .aktuell { background: var(--violett); border: 2px solid var(--violett); color: #fff; }

/* ---------- Fotoband: Bewegung nur ohne reduzierte Bewegung, mit Pause ---------- */
.fotos.laeuft { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .fotos.laeuft > li { animation: band var(--dauer, 60s) linear infinite alternate; }
  .fotos.laeuft:hover > li, .fotos.laeuft:focus-within > li, .fotos.angehalten > li { animation-play-state: paused; }
}
@keyframes band { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--weg, 0px))); } }
.pause { cursor: pointer; font: inherit; font-weight: 700; padding: 0 16px; }
.pause .ic { fill: currentColor; width: 18px; height: 18px; }
.fotos[tabindex]:focus-visible { outline-offset: -3px; }

/* ---------- Video mit Klick-zum-Laden ---------- */
.play .ic { fill: currentColor; }
.vbild:hover .play, .vbild:focus-visible .play { background: #333; }
.video-rahmen { aspect-ratio: 16 / 9; }
.video-rahmen iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; display: block; }
.block-inhalt img { border-radius: 8px; }
.block-inhalt > :last-child { margin-bottom: 0; }

/* ---------- Ausgabe des Termine-Moduls (Markup wie im WordPress-Plugin nmsk-schule) ---------- */
.nmsk-termine { list-style: none; margin: 0 0 12px; padding: 0; }
.nmsk-termine li { display: flex; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.nmsk-termine__datum { flex: none; width: 3.75rem; padding: 6px 0; text-align: center; font-size: .875rem; font-weight: 700; text-transform: uppercase; line-height: 1.15; background: var(--violett); color: #fff; border-radius: 8px; }
.nmsk-termine__datum b { display: block; font-size: 1.5rem; }
.nmsk-termine strong { display: block; font-size: 1.125rem; }
.nmsk-termine small { display: block; font-size: 1rem; color: var(--tinte2); }
.nmsk-termine__monat { font-size: 1.625rem; color: var(--titel); margin: 30px 0 6px; padding-bottom: 6px; border-bottom: 3px solid var(--violett); }
.nmsk-termine__monat:first-child { margin-top: 0; }
.nmsk-ansicht-monat .nmsk-termine li { align-items: flex-start; }
.nmsk-ansicht-zeile ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.nmsk-ansicht-zeile li { background: #fff; padding: 6px 12px; border-radius: 99px; font-size: 1rem; border: 1px solid #e2d4ee; }
.nmsk-ansicht-zeile li b { color: var(--titel); }
.nmsk-ansicht-tabelle table, .tabrollen table { border-collapse: collapse; width: 100%; font-size: 1rem; background: #fff; }
.nmsk-ansicht-tabelle caption, .tabrollen caption { text-align: left; font-weight: 700; padding-bottom: 6px; }
.nmsk-ansicht-tabelle caption { font-size: 1.125rem; }
.nmsk-ansicht-tabelle th, .nmsk-ansicht-tabelle td, .tabrollen th, .tabrollen td { border: 1px solid #c9ced6; padding: 7px 9px; text-align: left; vertical-align: top; }
.nmsk-ansicht-tabelle td, .tabrollen td { white-space: nowrap; }
.nmsk-ansicht-tabelle thead th:nth-child(2), .tabrollen thead th:nth-child(2) { border-top: 5px solid var(--blau); }
.nmsk-ansicht-tabelle thead th:nth-child(3), .tabrollen thead th:nth-child(3) { border-top: 5px solid var(--gelb); }
.nmsk-ansicht-tabelle thead th:nth-child(4), .tabrollen thead th:nth-child(4) { border-top: 5px solid var(--gruen); }

/* ---------- Unterseiten ---------- */
.seiteninhalt { padding: 40px 0 56px; }
.inhalt.breit { max-width: none; }
.inhalt > :first-child { margin-top: 0; }
.inhalt img { border-radius: 8px; }
.inhalt table { border-collapse: collapse; width: 100%; font-size: 1rem; margin: 8px 0 18px; }
.inhalt th, .inhalt td { border: 1px solid #c9ced6; padding: 6px 9px; text-align: left; vertical-align: top; }
.inhalt thead th { background: var(--hell); }
.inhalt blockquote { margin: 1em 0; padding: 4px 0 4px 18px; border-left: 5px solid var(--violett); color: var(--tinte2); }
.inhalt hr { border: 0; height: 5px; width: 100px; margin: 28px 0; background: linear-gradient(90deg, var(--rot) 0 20%, var(--gelb) 20% 40%, var(--gruen) 40% 60%, var(--blau) 60% 80%, var(--violett) 80%); }
.rechtstext .stand { margin-top: 2em; color: var(--tinte2); font-size: 1rem; }
.beitrag .datum a { color: var(--knopf); }
.beitrag .inhalt { max-width: none; }
.beitrag .titelbild img { width: 100%; border-radius: 12px; }
.klassen .klassenfoto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.klassen-text { margin: 0 16px 14px; font-size: 1rem; color: var(--tinte2); }
.klassen-text p { margin: 0 0 .5em; }
.vorschlaege { list-style: none; padding: 0; margin: 0 0 24px; font-size: 1.1875rem; }
.vorschlaege li { margin: 6px 0; }
.leer-seite h2 { font-size: 1.375rem; color: var(--titel); margin-top: 24px; }
.mitte-knoepfe { justify-content: center; }
.fliste { list-style: none; margin: 0; padding: 0; font-size: 1rem; }
.fliste li { margin: 0 0 4px; }
.fliste a { display: inline-flex; align-items: center; min-height: 32px; }
.siegel a { display: block; width: 100%; height: 100%; }
.soz .ic { fill: currentColor; }
/* Schmale Schlusszeile im Fuß: © links, Umsetzung rechts (Text #e8dcf2 auf #2a1640, Kontrast > 12 : 1) */
.copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; font-size: .875rem; }
.copy p { margin: 0; font-size: .875rem; }
.copy a { color: #fff; text-decoration: underline; text-underline-offset: .15em; display: inline-flex; align-items: center; min-height: 24px; }
.copy p.umsetzung, .copy p.umsetzung a { font-size: .75rem; opacity: 1; } /* kleiner: dezenter Hinweis auf die Umsetzung (Weisung Richard 31.10.) — Farbe bleibt hell, Kontrast >= 4,5:1 auf dem dunklen Fuß */

/* ---------- Inhalte aus WordPress-Blöcken (Bestand, durch HtmlFilter) ---------- */
.inhalt figure, .block-inhalt figure { margin: 18px 0 22px; }
.inhalt figcaption, .block-inhalt figcaption { font-size: .875rem; color: var(--tinte2); margin-top: 6px; }
.aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.aligncenter img { margin: 0 auto; }
.alignleft { float: left; margin: 4px 20px 12px 0; max-width: 50%; }
.alignright { float: right; margin: 4px 0 12px 20px; max-width: 50%; }
.alignwide, .alignfull { max-width: none; }
.has-text-align-center { text-align: center; } .has-text-align-right { text-align: right; }
.inhalt::after { content: ""; display: table; clear: both; }
.wp-block-columns { display: flex; flex-wrap: wrap; gap: 24px; margin: 18px 0; }
.wp-block-column { flex: 1 1 240px; min-width: 0; }
.wp-block-gallery, .blocks-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; list-style: none; padding: 0; margin: 18px 0; }
.wp-block-gallery figure, .blocks-gallery-item { margin: 0; }
.wp-block-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.wp-block-table { overflow-x: auto; margin: 8px 0 18px; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.wp-block-button__link, .wp-element-button { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; font-weight: 700; text-decoration: none; background: var(--knopf); color: #fff; border-radius: 6px; }
.wp-block-button__link:hover { background: #9c0720; }
.is-style-outline .wp-block-button__link { background: #fff; color: var(--link); border: 2px solid var(--link); }
.wp-block-separator { border: 0; border-top: 1px solid var(--linie); margin: 28px 0; }
.wp-block-media-text { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; margin: 18px 0; }
.wp-block-embed iframe { max-width: 100%; }
.wp-block-file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; padding: 12px 4px; border-bottom: 1px solid var(--linie); min-height: 56px; }
.wp-block-file > a:first-child { font-weight: 700; font-size: 1.1875rem; display: inline-flex; align-items: center; gap: 12px; }
.wp-block-file > a:first-child::before { content: ""; flex: none; width: 30px; height: 30px; background: var(--rot);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' d='M6 2h9l5 5v15H6z M14 2v6h6'/%3E%3Cpath d='M8.5 13h7v1.6h-7zM8.5 16.5h7v1.6h-7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' d='M6 2h9l5 5v15H6z M14 2v6h6'/%3E%3Cpath d='M8.5 13h7v1.6h-7zM8.5 16.5h7v1.6h-7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.wp-block-file__button { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; font-weight: 700; border: 2px solid var(--link); border-radius: 6px; text-decoration: none; font-size: 1rem; }
.downloads { max-width: 760px; }

/* ---------- Klassen des HtmlFilters (auszug): spalten, medien-text, datei, video-hinweis, hinweis, ul.galerie ---------- */
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin: 18px 0; }
.spalte > :first-child { margin-top: 0; }
.spalte > :last-child { margin-bottom: 0; }
/* Medien + Text (Team-Karten u. a.): Bild links, Text rechts; schmal untereinander */
.medien-text { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 20px; align-items: start; margin: 0 0 18px; padding: 16px;
  border: 1px solid var(--linie); border-top: 6px solid var(--f, var(--violett)); border-radius: 10px; background: #fff; }
.medien-text figure { margin: 0; }
.medien-text img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
.medien-text__text > :first-child { margin-top: 0; }
.medien-text__text p { margin: 0 0 .5em; }
.medien-text__text a { overflow-wrap: anywhere; }
.medien-text:nth-of-type(5n+1) { --f: var(--rot); } .medien-text:nth-of-type(5n+2) { --f: var(--gelb); }
.medien-text:nth-of-type(5n+3) { --f: var(--gruen); } .medien-text:nth-of-type(5n+4) { --f: var(--blau); }
.team-inhalt { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 0 20px; align-items: start; }
.team-inhalt > :not(.medien-text) { grid-column: 1 / -1; }
/* Datei-Link (PDF) wie die Downloads-Liste des Mockups */
.datei { margin: 0; border-bottom: 1px solid var(--linie); }
.datei a { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 4px; font-weight: 700; font-size: 1.1875rem; text-decoration: none; }
.datei a:hover { text-decoration: underline; }
.datei a::before { content: ""; flex: none; width: 30px; height: 30px; background: var(--rot);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' d='M6 2h9l5 5v15H6z M14 2v6h6'/%3E%3Cpath d='M8.5 13h7v1.6h-7zM8.5 16.5h7v1.6h-7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' d='M6 2h9l5 5v15H6z M14 2v6h6'/%3E%3Cpath d='M8.5 13h7v1.6h-7zM8.5 16.5h7v1.6h-7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.datei + .datei { border-top: 0; }
/* Video als Link (kein Einbetten ohne Klick): dunkle Fläche mit Abspielzeichen, Text bleibt Linktext */
.video-hinweis { margin: 12px 0; }
.video-hinweis p { margin: 0; }
.video-hinweis a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; background: #1b1b1f; color: #fff; border-radius: 8px; font-weight: 700; text-decoration: none; }
.video-hinweis a::before { content: ""; flex: none; width: 36px; height: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='18' fill='%23fff'/%3E%3Cpath d='M14 11v14l11-7z' fill='%231b1b1f'/%3E%3C/svg%3E") center / contain no-repeat; }
.video-hinweis a:hover, .video-hinweis a:focus-visible { background: #333; text-decoration: underline; }
/* Hinweisbox (z. B. „Entwurf — Freigabe ausständig") */
.hinweis { background: #fff8d6; border-left: 5px solid #b38f00; color: #3d3400; padding: 10px 16px; margin: 0 0 20px; border-radius: 0 8px 8px 0; }
.hinweis > :last-child { margin-bottom: 0; }
.hinweis a { color: #3d3400; }
/* Galerie (ehemals WordPress-Galerie/Essential Grid) */
ul.galerie { list-style: none; padding: 0 !important; margin: 18px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
ul.galerie li { margin: 0 !important; }
ul.galerie figure { margin: 0; }
ul.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
ul.galerie figcaption { font-size: .875rem; }

@media (max-width: 760px) {
  .karten.ansicht-liste a { flex-direction: column; }
  .karten.ansicht-liste img, .karten.ansicht-liste .bild-leer { width: 100%; }
  .karten.ansicht-gross { grid-template-columns: 1fr; }
  .karten.ansicht-gross > li:first-child a { display: flex; flex-direction: column; }
  .seiteninhalt { padding: 28px 0 40px; }
  .alignleft, .alignright { float: none; max-width: 100%; margin: 12px 0; }
  .wp-block-media-text { grid-template-columns: 1fr; }
  .medien-text { grid-template-columns: 96px 1fr; gap: 14px; padding: 12px; }
  .team-inhalt { grid-template-columns: 1fr; }
  ul.galerie { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .nmsk-ansicht-tabelle table, .tabrollen table { font-size: .875rem; }
  .nmsk-ansicht-tabelle th, .nmsk-ansicht-tabelle td, .tabrollen th, .tabrollen td { padding: 5px; white-space: normal; }
  .leiste-termine { flex: none; }
  .nmsk-ansicht-zeile ul { flex-direction: column; }
  .nmsk-ansicht-zeile li { border-radius: 8px; }
}

/* ---------- Großansicht (assets/js/grossbild.js, natives <dialog>) ---------- */
a.grossbild-link { display: block; cursor: zoom-in; }
a.grossbild-link:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.klassen a.grossbild-link, .fotos a.grossbild-link { border-radius: inherit; }
html.gb-offen { overflow: hidden; }
.grossbild { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgb(10 8 14 / .94); color: #fff; overflow: hidden; }
.grossbild::backdrop { background: rgb(10 8 14 / .94); }
.grossbild[open] { display: grid; grid-template-rows: auto 1fr; }
.gb-kopf { display: flex; align-items: center; gap: 8px 16px; padding: 8px 12px 8px 20px; }
.gb-titel { margin: 0; flex: 1; font-size: 1.125rem; font-weight: 700; color: #fff; }
.gb-original { color: #fff; font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.gb-buehne { min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 72px 16px; }
.gb-figur { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; min-height: 0; }
.gb-bild { max-width: 100%; max-height: calc(100dvh - 140px); width: auto; height: auto; object-fit: contain; border-radius: 6px; background: #222; }
.gb-text { margin-top: 10px; font-size: 1rem; text-align: center; color: #fff; max-width: 70ch; }
.gb-knopf { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 2px solid #fff; border-radius: 50%;
  background: #111; color: #fff; cursor: pointer; }
.gb-knopf svg { width: 26px; height: 26px; fill: currentColor; }
.gb-knopf:hover { background: #333; }
.grossbild :focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; }
.gb-zurueck, .gb-vor { position: absolute; top: 50%; transform: translateY(-50%); }
.gb-zurueck { left: 12px; } .gb-vor { right: 12px; }
.gb-knopf[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .grossbild[open] { animation: gb-ein .18s ease-out; }
  .gb-bild { transition: opacity .15s ease; }
  .gb-wechsel .gb-bild { opacity: .3; }
  @keyframes gb-ein { from { opacity: 0; } to { opacity: 1; } }
}
@media (max-width: 760px) {
  .gb-buehne { padding: 0 8px 76px; }
  .gb-bild { max-height: calc(100dvh - 190px); }
  .gb-zurueck, .gb-vor { top: auto; bottom: 14px; transform: none; }
  .gb-zurueck { left: calc(50% - 64px); } .gb-vor { right: calc(50% - 64px); }
}

/* =============================================================================
   Runde 5 (Designer-Bericht, Nummern dort)
   ========================================================================== */
/* Nr. 1 / F11: kein waagrechtes Rollen bei 320/360 px und 400 % Zoom */
h1, h2, h3, .kacheln h3, .karten h2, .karten h3, .marke span { overflow-wrap: break-word; hyphens: auto; }
.zweispaltig > *, .term .innen > *, .held .innen > *, .leben .innen > *, .fspalten > * { min-width: 0; }
@media (max-width: 480px) {
  .kacheln { grid-template-columns: 1fr; }
  .fspalten { grid-template-columns: 1fr; }
}
/* Nr. 2: Tabellen im rollbaren Rahmen (Ausgabe::inhalt), per Tastatur erreichbar */
.tabrollen { overflow-x: auto; max-width: 100%; margin: 8px 0 18px; }
.tabrollen:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.tabrollen > table { margin: 0; }
/* Nr. 5: Fotoband wischbar (angehalten, am Telefon, bei reduzierter Bewegung) */
.fotos { scroll-snap-type: x proximity; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.fotos > li { scroll-snap-align: start; }
.fotos.laeuft { scroll-snap-type: none; }
/* Nr. 6: In der Großansicht wischt man Bilder, nicht die Seite (keine Zurück-Geste des Browsers) */
.grossbild { overscroll-behavior: contain; }
.gb-buehne { touch-action: pan-y pinch-zoom; }
/* Nr. 8: Karten — Titel zuerst im Quelltext, sichtbar wie bisher: Bild oben, Datum über dem Titel */
.karten a > img, .karten a > .bild-leer { order: -1; }
.karten .text .datum { order: -1; }
/* Startbild: „Unser Ziel …" als Liste (F2) */
.ziele-titel { margin-bottom: .3em; }
.ziele { margin: 0 0 1em; padding-left: 1.2em; }
.ziele li { margin: .2em 0; }
.band .kopfzeile .knopf { flex: none; }
/* Nr. 23: Video-Platzhalter im Schuldesign, ohne Fremd-Abruf */
.video-platzhalter { position: relative; display: grid; place-items: center; align-content: center; gap: 10px; aspect-ratio: 16 / 9; padding: 16px 16px 64px;
  border-radius: 8px; background: linear-gradient(135deg, var(--violett), var(--navy)); color: #fff; text-align: center; overflow: hidden; }
.video-platzhalter .regen { position: absolute; left: 0; right: 0; top: 0; }
.video-platzhalter img { width: 56px; height: 56px; background: #fff; border-radius: 50%; padding: 4px; }
.video-platzhalter .vp-titel { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.vbild .play { top: auto; bottom: 14px; transform: translateX(-50%); }
.vbild img + .play { top: 50%; bottom: auto; transform: translate(-50%, -50%); }
/* Nr. 26/28: Dateiangabe in Download-Links */
.datei-angabe { font-weight: 400; color: var(--tinte2); font-size: .875rem; margin-left: .3em; }
/* Downloads: Zeichen links fest, Text und Dateiangabe umbrechen (320 px) */
.datei a { display: block; position: relative; padding: 14px 4px 14px 48px; }
.datei a::before { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); }
/* Team-Karten bei 320 px: Bild über dem Text, nichts ragt hinaus */
.team-inhalt > *, .medien-text > * { min-width: 0; }
@media (max-width: 480px) {
  .team-inhalt { grid-template-columns: minmax(0, 1fr); }
  .medien-text { grid-template-columns: minmax(0, 1fr); }
  .medien-text figure { max-width: 160px; }
}
/* Sehr schmal (320 px / 400 % Zoom): Schulname bricht nach „/" um, h1 etwas kleiner */
@media (max-width: 400px) {
  .held h1 { font-size: 1.625rem; }
  .marke { gap: 8px; }
  .marke img { width: 40px; height: 40px; }
}
.held h1, .marke span { hyphens: manual; }
/* Großansicht im Querformat am Telefon (Designer Nr. 7): Bild nutzt die Höhe, Vor/Zurück seitlich */
@media (orientation: landscape) and (max-height: 520px) {
  .gb-kopf { padding: 2px 8px 2px 16px; }
  .gb-titel { font-size: .875rem; }
  .gb-original { min-height: 44px; }
  .gb-buehne { padding: 0 68px 6px; }
  .gb-bild { max-height: calc(100dvh - 92px); }
  .gb-text { margin-top: 4px; font-size: .875rem; }
  .gb-zurueck, .gb-vor { top: 50%; bottom: auto; transform: translateY(-50%); }
  .gb-zurueck { left: 10px; } .gb-vor { right: 10px; }
}
/* Termine-Teile: Fließtext ≥ 1rem, Kleinstes ≥ .875rem (Designer 5b, Nr. 13 Rest) */
/* Datumsblock: Regel oben (nach Vorgabe „termine“, php-termine.md §11) */
.termine .dt { font-size: .875rem; width: 3.75rem; }
.hinweis-klein { font-size: 1rem; }