/* Gemeinsame Grundlage aller Muster-Websites des Baukastens schulwebseite.de.
   Jedes Muster setzt die Stellgrößen (Farben, Schriften, Rundung) und gestaltet Kopf und Menü selbst.
   --p Hauptfarbe, --soft heller Ton, --dark dunkler Ton: diese drei wählt die Schule. */

@font-face { font-family: "Nunito"; src: url(../fonts/Nunito.ttf) format("truetype"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(../fonts/AtkinsonHyperlegibleNext.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(../fonts/Barlow-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(../fonts/Barlow-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(../fonts/SourceSerif4.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Playwrite DE Grund"; src: url(../fonts/PlaywriteDEGrund.ttf) format("truetype"); font-weight: 100 400; font-display: swap; }

:root {
  --p: #9b3a1a; --soft: #faece6; --dark: #6e2710;
  --tinte: #1e2124; --grau: #4a5158; --linie: #d5dade; --papier: #fff; --grund: #fff;
  --schrift: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --titel: var(--schrift); --tw: 800; --r: 10px;
  --leicht: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--p) var(--soft); }
body { margin: 0; background: var(--grund); color: var(--tinte); font: 500 1.125rem/1.55 var(--schrift); overflow-wrap: break-word; }
::selection { background: var(--p); color: #fff; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: var(--p); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: 12px; top: -80px; z-index: 20; background: #fff; padding: 12px 18px; border-radius: 6px; }
.sprung:focus { top: 12px; }

/* Leiste des Baukastens mit der Auswahl des Musters, gehört nicht zur Schule */
.muster { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 8px 20px; background: #1e2124; color: #fff; font: 500 .9375rem/1.4 "Atkinson Hyperlegible Next", system-ui, sans-serif; }
.muster p { flex: 1 1 14em; min-width: 0; }
.muster a { color: #fff; }
.muster-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.muster-wahl span { font-weight: 700; margin-right: 4px; }
.muster-wahl button { min-height: 44px; padding: 0 14px; background: none; border: 2px solid #8b949c; border-radius: 999px; color: #fff; font-weight: 700; cursor: pointer; }
.muster-wahl button:hover { border-color: #fff; }
.muster-wahl button[aria-pressed=true] { background: #fff; border-color: #fff; color: #1e2124; }
.muster :focus-visible, .leiste :focus-visible, .fuss :focus-visible { outline-color: #fff; }
.eingebettet .muster { display: none; }

.leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 28px; padding: 0 28px; background: var(--dark); color: #fff; font-size: .9375rem; font-weight: 600; }
.leiste a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 600; text-decoration: none; }
.leiste a:hover { text-decoration: underline; }
.menue-knopf { display: none; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; background: var(--papier); border: 2px solid var(--p); border-radius: 9px; color: var(--p); font-weight: 800; cursor: pointer; }
.menue-knopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--leicht); }
.menue-knopf[aria-expanded=true] svg { transform: rotate(180deg); }
.schild { text-decoration: none; }

/* ---------- Inhalt ---------- */
main { min-height: 72vh; }
.js .seite { scroll-margin-top: 200vh; }
.seite > * + * { margin-top: 22px; }
main h1, main h2, main h3 { font-family: var(--titel); font-weight: var(--tw); }
main h1 { font-size: clamp(2.125rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
main h2 { font-size: 1.75rem; line-height: 1.2; text-wrap: balance; }
.seite > h2, .seite > .woche { margin-top: 64px; }
.seite > h2 + *, .woche h2 + * { margin-top: 16px; }
main h3 { font-size: 1.25rem; line-height: 1.25; }
main p, main li { max-width: 66ch; }
.vorspann { font-size: 1.3125rem; font-weight: 600; line-height: 1.45; max-width: 58ch; margin-top: 14px; }
.stand { font-weight: 700; color: var(--grau); }
.schritte { counter-reset: s; display: grid; gap: 14px; }
.schritte li { counter-increment: s; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.schritte li::before { content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--p); color: #fff; font-weight: 800; }
.zwei { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px 48px; align-items: start; }
.zwei > * + * { margin-top: 0; }
.zwei .text > * + * { margin-top: 18px; }

.hinweis { background: var(--soft); border-radius: var(--r); padding: 18px 22px 20px; max-width: 66ch; }
.hinweis h2, .hinweis h3 { font-size: 1.25rem; margin: 0 0 4px; }
.hinweis.wichtig { background: var(--dark); color: #fff; }
.hinweis.wichtig a { color: #fff; }

.bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }
.bild.hoch img { aspect-ratio: 4 / 3; }
.bild figcaption { margin-top: 8px; font-size: .9375rem; font-weight: 600; color: var(--grau); }

.beitraege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 30px; }
.beitraege img, .artikel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.beitraege img.unten, .artikel img.unten { object-position: 12% 100%; }
.datum { font-size: .9375rem; font-weight: 700; color: var(--grau); }
.beitraege .datum { margin-top: 12px; }
.beitraege h3 { margin-top: 2px; }
.beitraege h3 a { color: var(--tinte); font-weight: inherit; text-decoration: none; }
.beitraege h3 a:hover { color: var(--p); text-decoration: underline; }
.beitraege p:not(.datum) { margin-top: 6px; font-size: 1.0625rem; }
.artikel { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px 32px; align-items: start; padding-top: 30px; border-top: 1px solid var(--linie); }
.artikel:first-of-type { border-top: 0; padding-top: 6px; }
.artikel h2 { font-size: 1.5rem; margin: 2px 0 8px; }

.termine { border-bottom: 1px solid var(--linie); max-width: 880px; }
.termine li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; max-width: none; padding: 12px 0; border-top: 1px solid var(--linie); }
.tag { background: var(--soft); color: var(--dark); border-radius: calc(var(--r) - 1px); padding: 8px 4px 9px; text-align: center; line-height: 1.1; font-size: .875rem; font-weight: 800; }
.tag b { display: block; font-size: 1.625rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.was strong { display: block; font-size: 1.1875rem; font-weight: 800; line-height: 1.3; }
.was span { color: var(--grau); font-weight: 600; }
.weit { font-weight: 800; color: var(--p); white-space: nowrap; }

.leute { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px 36px; max-width: 1080px; }
.leute li { max-width: none; border-top: 4px solid var(--p); padding-top: 12px; }
.leute h2, .leute h3 { font-size: 1.1875rem; line-height: 1.25; }
.leute p { font-size: 1.0625rem; }
.rolle { color: var(--grau); font-weight: 700; margin-bottom: 6px; }

.angaben { display: grid; gap: 14px; }
.angaben div { display: grid; grid-template-columns: 13.5em minmax(0, 1fr); gap: 4px 20px; padding-top: 14px; border-top: 1px solid var(--linie); }
.angaben div:first-child { border-top: 0; padding-top: 0; }
.angaben dt { font-weight: 800; overflow-wrap: break-word; }

.plan { width: 100%; border-collapse: collapse; }
.plan th, .plan td { padding: 12px 14px; text-align: left; vertical-align: top; }
.plan thead th { background: var(--dark); color: #fff; font-weight: 800; }
.plan tbody tr:nth-child(even) { background: var(--soft); }
.plan tbody th { font-weight: 800; white-space: nowrap; }
.plan .heute { font-weight: 800; }
.plan .zwischen th { background: var(--soft); font-weight: 800; white-space: normal; }
.plan + .plan-tag { margin-top: 28px; }
.marke { display: inline-block; margin-left: 8px; padding: 1px 9px 2px; border-radius: 999px; background: var(--p); color: #fff; font-size: .8125rem; font-weight: 800; vertical-align: 2px; }

.datei { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; background: var(--soft); border-radius: var(--r); padding: 16px 20px; max-width: 66ch; }
.datei .pdf { flex: none; background: var(--dark); color: #fff; font-weight: 800; font-size: .875rem; letter-spacing: .03em; padding: 9px; border-radius: 5px; }
.datei div { flex: 1 1 220px; }
.datei strong { display: block; font-weight: 800; font-size: 1.1875rem; }
.datei small { font-size: .9375rem; font-weight: 600; color: var(--grau); }
.knopf { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; background: var(--p); color: #fff; border: 0; border-radius: 9px; font-weight: 800; font-size: 1.0625rem; cursor: pointer; transition: background-color .15s; }
.knopf:hover { background: var(--dark); }
.datei-hinweis { flex-basis: 100%; font-weight: 700; }
/* Vertretungsplan mit Passwort */
.schloss { background: var(--soft); border-radius: var(--r); padding: 18px 22px 20px; max-width: 66ch; }
.schloss-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.schloss-zeile label { font-weight: 800; }
.schloss-zeile input { flex: 1 1 180px; min-width: 0; min-height: 48px; padding: 8px 12px; font: inherit; color: var(--tinte); background: #fff; border: 2px solid var(--grau); border-radius: 7px; }
.schloss + .hinweis, .plan + .hinweis, .datei + .hinweis { margin-top: 22px; }

/* Bausteine, wie das Dashboard sie anlegt */
.seite > .baustein + .baustein, .seite > h1 + .baustein, .seite > .woche + .baustein, .seite > .gruss + .baustein { margin-top: 46px; }
.baustein > * + * { margin-top: 14px; }
.baustein > h2 + * { margin-top: 12px; }
.frei:not(body) { white-space: pre-wrap; overflow-wrap: anywhere; }
.a-mitte { text-align: center; }
.a-mitte p { margin-inline: auto; }
.a-rechts { text-align: right; }
.a-rechts p { margin-left: auto; }
.baustein.bild img { aspect-ratio: auto; }
.baustein.bild figcaption strong { font-weight: 800; color: var(--tinte); }
.w-klein { max-width: 62%; }
.f-rund img { border-radius: 28px; }
.f-schraeg img { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
.f-bogen img { border-radius: 0 0 50% 50% / 0 0 18% 18%; }
.f-welle img { border-radius: 0; --mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V4C80 13 65 -1 45 5S15 12 0 5Z'/%3E%3C/svg%3E"); -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 29px) no-repeat, var(--mk) bottom / 100% 30px no-repeat; mask: linear-gradient(#000, #000) top / 100% calc(100% - 29px) no-repeat, var(--mk) bottom / 100% 30px no-repeat; }
.f-zacken img { border-radius: 0; --mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 20,0 10,10'/%3E%3C/svg%3E"); -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 15px) no-repeat, var(--mk) bottom left / 32px 16px repeat-x; mask: linear-gradient(#000, #000) top / 100% calc(100% - 15px) no-repeat, var(--mk) bottom left / 32px 16px repeat-x; }
.galerie .bild img { aspect-ratio: 16 / 10; }
.gal-leiste { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: .9375rem; font-weight: 600; color: var(--grau); }
.gal-leiste button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: var(--papier); border: 2px solid var(--p); border-radius: 50%; color: var(--p); cursor: pointer; }
.gal-leiste button.vor svg { transform: scaleX(-1); }
.gal-leiste button:disabled { border-color: var(--linie); color: var(--grau); cursor: default; }
.platzhalter { padding: 28px 20px; background: var(--soft); border: 2px dashed var(--grau); border-radius: var(--r); text-align: center; font-weight: 600; }
.leer { color: var(--grau); }
.artikel.entwurf { outline: 2px dashed var(--p); outline-offset: 8px; border-top: 0; }
.artikel.ohne { grid-template-columns: minmax(0, 1fr); }
.ort-logo { display: inline-block; height: 1.5em; width: auto; margin-right: .4em; vertical-align: -.3em; border-radius: 4px; background: #fff; }
.datei .knopf { cursor: default; }

/* Weiterführende Links im Inhalt. Jedes Muster darf sie in seiner Sprache zeichnen. */
:where(main) .schild { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; background: var(--p); color: #fff; border-radius: 9px; font-weight: 800; transition: background-color .15s; }
:where(main) .schild b { font-weight: inherit; }
:where(main) .schild::after { content: ""; width: 9px; height: 9px; border: solid currentColor; border-width: 3px 3px 0 0; transform: rotate(45deg); }
:where(main) .schild:hover { background: var(--dark); }
:where(main) .schild:focus-visible { outline-offset: 3px; }
.schilder-reihe { display: flex; flex-wrap: wrap; gap: 14px 18px; }
.weiter { margin-top: 26px !important; }

/* ---------- Fuß ---------- */
.fuss { background: var(--dark); color: #fff; padding: 46px clamp(20px, 5vw, 72px) 30px; font-size: 1.0625rem; }
.fuss a { color: #fff; }
.fuss-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 40px; max-width: 1180px; margin: 0 auto; }
.fuss h2 { font-family: var(--titel); font-weight: var(--tw); font-size: 1.25rem; margin-bottom: 8px; }
.fuss li + li { margin-top: 4px; }
.fuss li a { display: inline-flex; align-items: center; min-height: 44px; }
.fuss-unten { max-width: 1180px; margin: 34px auto 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .4); font-size: .9375rem; }
.fuss summary { cursor: pointer; font-weight: 700; width: fit-content; }
.fuss details ul { margin-top: 10px; display: grid; gap: 6px; }
.gemacht { margin-top: 12px; }

@media (max-width: 999px) {
  .zwei, .artikel { grid-template-columns: minmax(0, 1fr); }
  .beitraege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-in { grid-template-columns: minmax(0, 1fr); }
  .seite > h2, .seite > .woche { margin-top: 48px; }
}
@media (max-width: 620px) {
  body { font-size: 1.0625rem; }
  .muster { justify-content: center; text-align: center; }
  .muster .lang { display: none; }
  .leiste { justify-content: center; }
  .leiste a + a { display: none; }
  .beitraege { grid-template-columns: minmax(0, 1fr); }
  .termine li { grid-template-columns: 66px minmax(0, 1fr); }
  .weit { grid-column: 2; justify-self: start; }
  .angaben div { grid-template-columns: minmax(0, 1fr); }
  .plan, .plan tbody, .plan tr, .plan th, .plan td { display: block; }
  .plan thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .plan tbody tr { padding: 12px 14px; border-radius: 8px; }
  .plan th, .plan td { padding: 0; }
  .plan td[data-l]::before { content: attr(data-l) ": "; font-weight: 800; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
  .muster, .kopf, .sprung { display: none !important; }
  .rahmen { display: block !important; }
  main { padding: 0 !important; }
}

/* ---------- Gemeinsames Gerüst der Muster mit Logo, Menüzeile und großem Foto (alle außer „Wegweiser“) ---------- */
html:not([data-muster=wegweiser]) { --rand: clamp(18px, 4.4vw, 64px); }
html:not([data-muster=wegweiser]) .kopf { position: relative; }
html:not([data-muster=wegweiser]) .mast { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px 28px; padding: 14px var(--rand); }
html:not([data-muster=wegweiser]) .ort { display: flex; align-items: center; gap: 14px; color: var(--tinte); font: var(--tw) 1.5rem/1.12 var(--titel); text-decoration: none; }
html:not([data-muster=wegweiser]) .ort small { display: block; margin-top: 2px; font: 600 .9375rem/1.3 var(--schrift); color: var(--grau); }
html:not([data-muster=wegweiser]) .ort-zeichen { display: block; flex: none; width: 54px; height: 54px; }
.z-grund { fill: var(--p); }
.z-blatt { fill: #fff; }
.z-ader { fill: none; stroke: var(--p); stroke-width: 2; stroke-linecap: round; }
html:not([data-muster=wegweiser]) .ort-logo { height: 54px; margin: 0; }
html:not([data-muster=wegweiser]) .schilder { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
html:not([data-muster=wegweiser]) .schilder > li { position: relative; }
html:not([data-muster=wegweiser]) .schilder .schild { display: block; padding: 10px 14px; white-space: nowrap; }
/* Farbe und Stärke bewusst mit geringem Gewicht, damit jedes Muster sie überschreiben kann. */
:where(html:not([data-muster=wegweiser])) .schilder .schild { color: var(--tinte); font-weight: 700; }
html:not([data-muster=wegweiser]) .schilder .schild b { font-weight: inherit; }
html:not([data-muster=wegweiser]) .schilder .schild span { display: none; }
html:not([data-muster=wegweiser]) .schilder > li:has(.unter) > .schild b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 0 3px 9px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
html:not([data-muster=wegweiser]) .unter { display: none; position: absolute; right: 0; top: 100%; z-index: 20; min-width: 230px; padding: 8px; background: var(--papier); border-radius: 12px; box-shadow: 0 14px 34px rgba(20, 30, 40, .2); }
html:not([data-muster=wegweiser]) .schilder > li:hover > .unter, html:not([data-muster=wegweiser]) .schilder > li:focus-within > .unter { display: grid; gap: 2px; }
html:not([data-muster=wegweiser]) .schilder .unter .schild { padding: 9px 12px; border-radius: 8px; transform: none; }
:where(html:not([data-muster=wegweiser])) .schilder .unter .schild { color: var(--tinte); background: none; }
html:not([data-muster=wegweiser]) .schilder .unter .schild:hover, html:not([data-muster=wegweiser]) .schilder .unter .schild[aria-current] { background: var(--soft); color: var(--dark); }

/* Startseite: großes Foto, Begrüßung, Schnellzugriff. Die Begrüßung im Inhalt bleibt für Vorleseprogramme erhalten. */
html:not([data-muster=wegweiser]) .kopf-bild { display: none; }
html:not([data-muster=wegweiser]) .ist-start .kopf-bild { display: block; width: 100%; object-fit: cover; }
html:not([data-muster=wegweiser]) .ist-start .held { display: block; }
html:not([data-muster=wegweiser]) .ist-start .schnell { display: grid; }
html:not([data-muster=wegweiser]) .leben { display: block; }
html:not([data-muster=wegweiser]) #start .zwei .text, html:not([data-muster=wegweiser]) .kopftext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html:not([data-muster=wegweiser]) #start .zwei { display: block; }
html:not([data-muster=wegweiser]) #start .zwei .hinweis { max-width: none; }
html:not([data-muster=wegweiser]) .seite > .kopftext + .baustein { margin-top: 0; }
.held-titel { font-family: var(--titel); font-weight: var(--tw); text-wrap: balance; }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.held .knopf { text-decoration: none; }
.schnell a { color: var(--tinte); text-decoration: none; }
.schnell svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.schnell b { display: block; font-family: var(--titel); font-weight: var(--tw); }
.schnell span { display: block; font-size: .9375rem; font-weight: 600; color: var(--grau); text-wrap: balance; }
/* Lange Wörter in Überschriften, im Schulnamen und auf Kacheln: Passt ein Wort nicht in die Zeile, wird es nach Silben getrennt (mit Trennstrich),
   nie hart mitten im Wort. Übliche Wörter bleiben ganz: getrennt wird in Überschriften erst ab 15 Buchstaben, auf den schmalen Kacheln ab 11.
   Kennt ein Browser keine Silbentrennung, bricht das Wort notfalls um, statt die Seite breiter zu machen. */
.held-titel, .schnell b, .ort-name, main h1, main h2, main h3, .fuss h2 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; hyphenate-limit-chars: 15 5 5; }
.schnell b { hyphenate-limit-chars: 11 4 4; }
/* Der Schulname darf schmaler werden als sein längstes Wort (sonst ragt ein sehr langer Name am Handy aus dem Fenster). */
html:not([data-muster=wegweiser]) .ort, .ort-name { min-width: 0; }
.seite > .leben { margin-top: 64px; }
.leben h2 + * { margin-top: 18px; }
.leben-reihe img { width: 100%; object-fit: cover; }

/* Unterseiten: ein Foto des Bereichs als Band unter dem Menü */
html:not([data-muster=wegweiser]) body:not(.ist-start) .kopf::after { content: ""; display: block; height: 230px; background: var(--dark) var(--band, url(../bilder/schulgebaeude.jpg)) center / cover no-repeat; }
body[data-bereich=aktuelles] { --band: url(../bilder/bibliothek.jpg); }
body[data-bereich=termine] { --band: url(../bilder/schulhof-spielplatz.jpg); }
body[data-bereich=vertretungsplan] { --band: url(../bilder/schulflur.jpg); }
body[data-bereich=speiseplan] { --band: url(../bilder/schulgarten.jpg); }
body[data-bereich=ueber-uns] { --band: url(../bilder/klassenzimmer.jpg); }
body[data-bereich=kontakt] { --band: url(../bilder/schulhof-baeume.jpg); }
/* „Kein Bild“ oben auf einer Unterseite (zeichnen.js setzt ohne-band): Das Band entfällt in jedem Muster. Wo nötig, trennt das Muster Menü und Inhalt selbst. */
html[data-muster]:not([data-muster=wegweiser]) body.ohne-band:not(.ist-start) .kopf::after { display: none; }
html[data-muster=wegweiser] body.ohne-band:not(.ist-start) main::before { display: none; }
/* Beschreibung eines eigenen Bildes im Band: nur für Vorleseprogramme. */
.nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Startseite ohne Kacheln: Der leere Platzhalter nimmt keinen Platz ein. */
html[data-muster] .ist-start .schnell.leer { display: none !important; }
html:not([data-muster=wegweiser]) main { padding: 64px var(--rand) 96px; }
html:not([data-muster=wegweiser]) .seite { max-width: 1180px; margin: 0 auto; }

/* Zwischen Handybreite und breitem Bildschirm: Menü etwas enger; reicht der Platz neben dem Logo nicht,
   steht es als eigene Zeile darunter, damit nie ein einzelner Punkt in die zweite Zeile rutscht. */
@media (min-width: 1000px) and (max-width: 1439px) {
  html:not([data-muster=wegweiser]) .mast { column-gap: 20px; }
  html:not([data-muster=wegweiser]) .schilder { gap: 4px 2px; }
  html:not([data-muster=wegweiser]) .schilder > li > .schild { padding-inline: 10px; }
}
/* Aufgeklappte Unterpunkte lassen sich mit der Escape-Taste schließen (muster.js setzt .zu). */
@media (min-width: 1000px) { html:not([data-muster=wegweiser]) .schilder > li.zu > .unter { display: none; } }
/* Reicht der Platz neben dem Logo nicht, rutscht das ganze Menü in eine eigene Zeile darunter, nie ein einzelner Punkt.
   Passt es auch dort nicht in eine Zeile (viele Punkte, lange Namen, große Schrift), bricht es linksbündig in eine zweite Zeile um.
   Kein Menüpunkt darf aus dem Fenster laufen: Er wäre weder zu sehen noch zu erreichen. */
@media (min-width: 1000px) {
  html:not([data-muster=wegweiser]):not([data-kopf=mitte]) .mast { flex-wrap: wrap; }
  html:not([data-muster=wegweiser]):not([data-kopf=mitte]) #wegweiser { flex: none; max-width: 100%; }
  html:not([data-muster=wegweiser]):not([data-kopf=mitte]) .ort { flex: 0 1 auto; }
  html:not([data-muster=wegweiser]):not([data-kopf=mitte]) .schilder { flex-wrap: wrap; justify-content: flex-start; }
}

@media (max-width: 999px) {
  html:not([data-muster=wegweiser]) .mast { flex-wrap: wrap; }
  html:not([data-muster=wegweiser]) .menue-knopf { display: inline-flex; }
  html:not([data-muster=wegweiser]) #wegweiser { display: none; flex-basis: 100%; }
  html:not([data-muster=wegweiser]) .kopf.offen #wegweiser { display: block; }
  html:not([data-muster=wegweiser]) .schilder { display: grid; gap: 6px; justify-content: normal; }
  html:not([data-muster=wegweiser]) .schilder .schild { white-space: normal; }
  html:not([data-muster=wegweiser]) .schilder > li > .unter { display: grid; gap: 4px; position: static; min-width: 0; padding: 4px 0 4px 22px; background: none; box-shadow: none; }
  html:not([data-muster=wegweiser]) .schilder > li:has(.unter) > .schild b::after { display: none; }
  html:not([data-muster=wegweiser]) .ort { font-size: 1.25rem; }
  html:not([data-muster=wegweiser]) .ort-zeichen { width: 44px; height: 44px; }
  html:not([data-muster=wegweiser]) body:not(.ist-start) .kopf::after { height: 150px; }
  html:not([data-muster=wegweiser]) main { padding-top: 44px; padding-bottom: 64px; }
}

/* ---------- Form des großen Fotos auf der Startseite, wenn die Schule eine eigene Form wählt ---------- */
.ist-start .kopf[class*="hf-"] .kopf-bild, html[data-muster=campus] .ist-start .kopf[class*="hf-"] .held { clip-path: none !important; -webkit-mask: none !important; mask: none !important; border-radius: 0 !important; }
.ist-start .kopf.hf-rund .kopf-bild, html[data-muster=campus] .ist-start .kopf.hf-rund .held { border-radius: 0 0 36px 36px !important; }
.ist-start .kopf.hf-schraeg .kopf-bild, html[data-muster=campus] .ist-start .kopf.hf-schraeg .held { clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%) !important; }
.ist-start .kopf.hf-bogen .kopf-bild, html[data-muster=campus] .ist-start .kopf.hf-bogen .held { border-radius: 0 0 50% 50% / 0 0 18% 18% !important; }
.ist-start .kopf.hf-welle .kopf-bild, html[data-muster=campus] .ist-start .kopf.hf-welle .held { --mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V4C80 13 65 -1 45 5S15 12 0 5Z'/%3E%3C/svg%3E"); -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 39px) no-repeat, var(--mk) bottom / 100% 40px no-repeat !important; mask: linear-gradient(#000, #000) top / 100% calc(100% - 39px) no-repeat, var(--mk) bottom / 100% 40px no-repeat !important; }
.ist-start .kopf.hf-zacken .kopf-bild, html[data-muster=campus] .ist-start .kopf.hf-zacken .held { --mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 20,0 10,10'/%3E%3C/svg%3E"); -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 19px) no-repeat, var(--mk) bottom left / 40px 20px repeat-x !important; mask: linear-gradient(#000, #000) top / 100% calc(100% - 19px) no-repeat, var(--mk) bottom left / 40px 20px repeat-x !important; }

/* ---------- Zusatzpaket „Barrierefreiheit Plus“: Knopf und Feld auf der Website ---------- */
.tk { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: grid; justify-items: end; gap: 10px; font: 400 1.0625rem/1.4 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: 0; }
.tk button { font: inherit; cursor: pointer; }
.tk-knopf { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px 0 16px; background: #1B1F23; color: #fff; border: 3px solid #fff; border-radius: 999px; font-weight: 700 !important; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
.tk-knopf svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tk-feld { width: min(330px, 86vw); padding: 18px; background: #fff; color: #1B1F23; border: 3px solid #1B1F23; border-radius: 14px; display: grid; gap: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.tk-feld h2 { font: 700 1.25rem/1.2 system-ui, sans-serif; margin: 0; color: #1B1F23; }
.tk-feld p { margin: 0 0 4px; }
.tk-feld button { min-height: 48px; padding: 0 14px; text-align: left; background: #EEF1F3; color: #1B1F23; border: 2px solid transparent; border-radius: 8px; font-weight: 700 !important; }
.tk-feld button[aria-pressed=true] { background: #1B1F23; color: #fff; }
.tk-feld button[aria-pressed=true]::after { content: " · an"; font-weight: 400; }
.tk-feld .tk-reset { background: none; border-color: #1B1F23; text-align: center; }
.tk-feld .tk-klein { font-size: .9375rem; color: #4A545C; margin-top: 4px; }
.tk :focus-visible { outline: 3px solid #C2185B; outline-offset: 3px; }
.tk-kontrast #buehne > :not(.tk) { filter: contrast(1.45) saturate(1.15); }
.tk-abstand body { line-height: 1.95; letter-spacing: .03em; word-spacing: .12em; }
.tk-abstand p, .tk-abstand li { margin-bottom: .5em; }
.tk-links #buehne a:not(.tk a) { text-decoration: underline !important; text-decoration-thickness: 3px !important; text-underline-offset: 4px; outline: 2px solid currentColor; outline-offset: 2px; }

/* Baustein „Bild und Text nebeneinander“: am Handy untereinander */
.nebeneinander { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.nebeneinander.bild-rechts .neben-bild { order: 2; }
.neben-bild img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r, 10px); }
.neben-text h2 { margin-bottom: 10px; }
@media (max-width: 760px) {
  .nebeneinander { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .nebeneinander.bild-rechts .neben-bild { order: 0; }
}

/* Bilderreihe als Baustein (Bildergalerie „nebeneinander“). Jedes Muster gibt der Reihe seine eigene Form. */
.leben-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.leben-reihe img { height: 220px; border-radius: var(--r, 10px); }
@media (min-width: 1000px) {
  .leben .leben-reihe[data-n="1"] { grid-template-columns: minmax(0, 420px); }
  .leben .leben-reihe[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leben .leben-reihe[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .leben .leben-reihe[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Muster mit drei Bildern oben: Die gewählte Form des Titelbilds gilt für alle drei. Fehlt ein Bild, rücken die anderen zusammen. */
.ist-start .bilder3[class*=" f-"] img { border-radius: 0; }
.ist-start .bilder3.f-rund img { border-radius: 28px; }
.ist-start .bilder3.f-bogen img { border-radius: 0 0 50% 50% / 0 0 18% 18%; }
.ist-start .bilder3.n1 { grid-template-columns: minmax(0, 1fr); }
.ist-start .bilder3.n2 { grid-template-columns: 1fr 1.25fr; }

/* Seiten mit Passwort und Entwürfe */
.schloss-z { width: .8em; height: .8em; margin-left: .3em; vertical-align: -.04em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nur-dash { margin: 0 0 22px; padding: 10px 14px; border: 2px dashed #1B1F23; border-radius: 8px; background: #FFF1A8; color: #1B1F23; font: 700 1rem/1.4 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
.seite > .ferien-h { margin-top: 48px; }

/* Veröffentlichte Website: Passwortformular und Knöpfe zu Dateien */
button.knopf { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
a.knopf { text-decoration: none; }
.schloss-fehler { margin-bottom: 10px; font-weight: 700; color: #A3122B; }
.fuss li a { color: inherit; }

/* Eilmeldung der Schule: kräftig, über allem, in jedem Muster gleich */
.eil { position: relative; z-index: 30; display: grid; gap: 4px; padding: 16px max(20px, calc((100% - 1180px) / 2)); background: #FFE14D; color: #1B1F23; border-bottom: 4px solid #1B1F23; font: 600 1.125rem/1.45 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
.eil strong { font-size: 1.25rem; font-weight: 800; }
.eil p { max-width: 70ch; }
.eil small { font-size: .9375rem; font-weight: 400; }

/* Zwei Bausteine nebeneinander (im Dashboard: „Neben dem Baustein darüber“); am Handy untereinander */
.paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 44px; align-items: start; }
.paar > .baustein { min-width: 0; margin-top: 0; }
.seite > * + .paar, .seite > .paar + * { margin-top: 46px; }
html:not([data-muster=wegweiser]) .seite > .kopftext + .paar { margin-top: 0; }
.paar .bild, .paar .galerie { width: 100%; max-width: none; margin-inline: 0; }
/* Beiträge neben einem anderen Baustein: kleine Bilder links, Text rechts, statt drei Spalten */
.seite .paar .beitraege { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 22px; }
.seite .paar .beitraege > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; align-content: start; }
.seite .paar .beitraege > div:not(:has(img)) { display: block; }
.seite .paar .beitraege > div img { grid-row: 1 / span 3; height: auto; aspect-ratio: 4 / 3; border-radius: var(--r, 10px); }
.seite .paar .beitraege > div > :not(img) { grid-column: 2; }
.seite .paar .beitraege > div::before { content: none; }
.seite .paar .beitraege .datum { margin-top: 0; }
.seite .paar .beitraege h3 { font-size: 1.1875rem; line-height: 1.25; }
.seite .paar .termine li { grid-template-columns: 66px minmax(0, 1fr); }
.seite .paar .termine .weit { grid-column: 2; justify-self: start; }
@media (max-width: 760px) {
  .paar { grid-template-columns: minmax(0, 1fr); gap: 46px; }
}

/* Nur auf den veröffentlichten Websites (wird beim Übernehmen an basis.css angehängt) */
.testhinweis { margin: 0; padding: 6px 16px; background: #1B1F23; color: #fff; text-align: center; font: 700 .875rem/1.3 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
/* Das Zusatzpaket „Barrierefreiheit Plus“ hat eigene Stile in plus.css. */
@media print { .testhinweis { display: none !important; } }

/* ---------- Wartungsseite: Die Schule hat ihre Website vorübergehend abgeschaltet (lib/wartung.js) ----------
   Eine ruhige Seite in den Farben und der Schrift der Schule, ohne Kopf, Menü und Bilder. Sie braucht kein Skript. */
html body.wartung-seite { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--soft); }
html body.wartung-seite main.wartung { flex: 1 0 auto; display: grid; place-items: center; width: 100%; max-width: none; margin: 0; padding: clamp(24px, 7vw, 88px) 16px; }
html body.wartung-seite main.wartung::before, html body.wartung-seite main.wartung::after { content: none; display: none; }
.wartung-karte { width: 100%; max-width: 44rem; padding: clamp(24px, 6vw, 56px); background: var(--papier); color: var(--tinte); border-radius: var(--r); box-shadow: 0 1px 2px rgba(20, 30, 40, .08), 0 14px 40px rgba(20, 30, 40, .08); }
.wartung-karte h1 { font: var(--tw) clamp(1.375rem, 3.4vw, 1.75rem)/1.25 var(--titel); color: var(--dark); overflow-wrap: anywhere; hyphens: auto; }
.wartung-karte .wartung-haupt { margin-top: clamp(14px, 2.5vw, 22px); font: var(--tw) clamp(1.625rem, 5vw, 2.375rem)/1.2 var(--titel); letter-spacing: -.01em; text-wrap: balance; }
.wartung-karte .wartung-satz { margin-top: 18px; font-size: 1.25rem; line-height: 1.5; max-width: 60ch; overflow-wrap: anywhere; }
.wartung-kontakt { margin-top: clamp(24px, 4vw, 36px); padding-top: clamp(18px, 3vw, 26px); border-top: 2px solid var(--linie); display: grid; gap: 4px; }
.wartung-kontakt h2 { font: var(--tw) 1.25rem/1.3 var(--titel); margin-bottom: 4px; }
.wartung-kontakt a { display: inline-block; padding: 8px 0; overflow-wrap: anywhere; }
.wartung-kontakt a:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; border-radius: 4px; }
@media print { html body.wartung-seite { background: #fff; } .wartung-karte { box-shadow: none; } }