/* Muster „Wegweiser“: ein Pfosten links, daran Schilder mit Pfeilspitze.
   Regel dieses Musters: Ein Schild ist immer ein Link. Das aktuelle Ziel ist gefüllt. */

:root {
  --p: #9b3a1a; --soft: #faece6; --dark: #6e2710; --stahl: #30363b;
  --schrift: "Nunito", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --tw: 900; --r: 10px;
  --x: clamp(28px, 8.5vw, 128px);
}

.kopf { position: relative; isolation: isolate; }
.kopf::before { content: ""; position: absolute; left: var(--x); top: 0; bottom: 0; width: 14px; background: linear-gradient(90deg, #3d454b, #22272b); z-index: 1; }
.kopf-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.mast { position: relative; z-index: 2; display: grid; gap: 17px; justify-items: start; }
.ort { display: block; background: var(--p); color: #fff; border: 6px solid var(--p); box-shadow: inset 0 0 0 3px #fff; border-radius: 10px; padding: 14px 26px 16px 22px; font-weight: 900; font-size: 2.5rem; line-height: 1.08; letter-spacing: -.01em; text-decoration: none; }
.ort small { display: block; margin-top: 6px; font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; }
.ort:focus-visible { outline: 3px solid var(--tinte); outline-offset: 4px; box-shadow: inset 0 0 0 3px #fff, 0 0 0 4px #fff; }
.schilder { display: grid; gap: 11px; justify-items: start; }

.schild { --h: 62px; position: relative; isolation: isolate; display: inline-grid; align-content: center; gap: 0; min-height: var(--h); padding: 4px 16px 4px 30px; margin-right: calc(var(--h) / 2); background: var(--papier); color: var(--p); border-radius: 7px 0 0 7px; transform-origin: 10px 50%; transition: transform .45s var(--leicht); }
.schild::after { content: ""; position: absolute; top: calc(50% - var(--h) * .35355); right: calc(var(--h) * -.35355); width: calc(var(--h) * .7071); height: calc(var(--h) * .7071); background: inherit; border: 0; border-radius: 0 7px 0 0; transform: rotate(45deg); z-index: -1; }
.schild::before { content: ""; position: absolute; left: 7px; top: 9px; bottom: 9px; width: 6px; border-radius: 3px; background: var(--stahl); }
.schild b { font-weight: 900; font-size: 1.375rem; line-height: 1.15; }
.schild span { font-size: .9375rem; font-weight: 700; line-height: 1.3; color: var(--tinte); text-wrap: balance; }
.schild:hover { transform: rotate(-1.5deg); background: var(--papier); }
.schild:focus-visible { outline-offset: -5px; }
.schild.voll, .schild.voll:hover, .schild[aria-current], .schild[aria-current]:hover { background: var(--p); color: #fff; }
.schild.voll span, .schild[aria-current] span { color: #fff; }
.schild.voll::before, .schild[aria-current]::before { background: #fff; }
.schild.voll:focus-visible, .schild[aria-current]:focus-visible { outline-color: #fff; }
.unter { display: none; }
.schilder-reihe { gap: 14px 30px; }
.schilder-reihe .schild { --h: 52px; }
.schilder-reihe .schild b { font-size: 1.1875rem; }
.weiter .schild { --h: 48px; }
.weiter .schild b { font-size: 1.125rem; }

/* Startseite: Foto über die volle Breite, der Wegweiser steht davor */
/* Der Wegweiser steht im Fluss der Seite: Mit vielen Menüpunkten wird das Foto höher, statt dass Schilder unten heraushängen und Inhalt verdecken. */
.ist-start .kopf { min-height: 716px; padding-top: 34px; }
.ist-start .mast { margin-left: calc(var(--x) - 10px); padding-bottom: 44px; filter: drop-shadow(0 8px 12px rgba(15, 20, 25, .34)); }
.ist-start .schilder > li:nth-child(1) .schild { min-width: 392px; }
.ist-start .schilder > li:nth-child(2) .schild { min-width: 438px; }
.ist-start .schilder > li:nth-child(3) .schild { min-width: 352px; }
.ist-start .schilder > li:nth-child(4) .schild { min-width: 404px; }
.ist-start .schilder > li:nth-child(5) .schild { min-width: 462px; }
.ist-start .schilder > li:nth-child(6) .schild { min-width: 372px; }
.ist-start .schilder > li:nth-child(7) .schild { min-width: 424px; }
.ist-start main { position: relative; padding: 56px clamp(20px, 4vw, 56px) 88px calc(var(--x) + 58px); }
.ist-start main::before { content: ""; position: absolute; left: var(--x); top: 0; bottom: 0; width: 14px; background: linear-gradient(90deg, #3d454b, #22272b); }
body:not(.ist-start) .kopf-bild { display: none; }

/* Eigene Knöpfe und eigene Kacheln der Schule (zeichnen.js setzt data-eigene): Sie hängen als Schilder unter dem Foto am Pfosten,
   Knöpfe gefüllt, Kacheln hell mit Sinnbild. Die von selbst gewählten Knöpfe und Kacheln bleiben ausgeblendet,
   weil dieselben Ziele schon auf den Schildern des Menüs stehen. Die Spitze ist aus dem Schild geschnitten und stimmt bei jeder Höhe. */
.ist-start .held[data-eigene], .ist-start .schnell[data-eigene] { position: relative; padding: 34px clamp(20px, 4vw, 56px) 0 calc(var(--x) + 58px); background: var(--grund); }
.ist-start .held[data-eigene] { display: block; }
.ist-start .schnell[data-eigene] { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(240px, (100% - 28px) / 3), 1fr)); gap: 14px; }
.ist-start .held[data-eigene] ~ .schnell[data-eigene] { padding-top: 14px; }
.held-titel, .held-text { display: none; }
.held-knoepfe { gap: 14px; margin: 0; }
.held[data-eigene] .knopf, .schnell[data-eigene] a { position: relative; display: grid; align-content: center; min-height: 58px; padding: 7px 44px 8px 30px; border-radius: 7px 0 0 7px; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); transform-origin: 10px 50%; transition: transform .45s var(--leicht); }
.held[data-eigene] .knopf::before, .schnell[data-eigene] a::before { content: ""; position: absolute; left: 7px; top: 9px; bottom: 9px; width: 6px; border-radius: 3px; background: var(--stahl); }
.held[data-eigene] .knopf { background: var(--p); color: #fff; font-weight: 900; font-size: 1.25rem; line-height: 1.15; }
.held[data-eigene] .knopf.zweit { background: var(--dark); }
.held[data-eigene] .knopf::before { background: #fff; }
.schnell[data-eigene] a { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; height: 100%; background: var(--soft); color: var(--dark); }
.schnell[data-eigene] svg { grid-row: span 2; width: 30px; height: 30px; }
.schnell[data-eigene] b { align-self: end; font-weight: 900; font-size: 1.25rem; line-height: 1.15; }
.schnell[data-eigene] b:last-child { grid-row: span 2; align-self: center; }
.schnell[data-eigene] span { align-self: start; font-weight: 700; line-height: 1.3; color: var(--tinte); }
.held[data-eigene] .knopf:hover, .schnell[data-eigene] a:hover { transform: rotate(-1.5deg); }
.held[data-eigene] .knopf:focus-visible, .schnell[data-eigene] a:focus-visible { outline-offset: -5px; }
.held[data-eigene] .knopf:focus-visible { outline-color: #fff; }
/* Neben dem Wegweiser ist die Inhaltsspalte schmaler: zweispaltige Blöcke erst ab breitem Bildschirm, Angaben mit kurzer Beschriftungsspalte. */
@media (max-width: 1519px) { body:not(.ist-start) .zwei { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 621px) { body:not(.ist-start) .angaben div { grid-template-columns: 11.5em minmax(0, 1fr); } }
/* Unterseiten: ein Foto des Bereichs über dem Inhalt */
body:not(.ist-start) main::before { content: ""; display: block; height: 210px; margin-bottom: 38px; border-radius: 10px; background: var(--dark) var(--band, url(../bilder/schulgebaeude.jpg)) center / cover no-repeat; }
/* Startseite am Computer: Abschnitte hängen als Tafeln am Pfosten. Tafeln haben keine Pfeilspitze, sie sind keine Links. */
@media (min-width: 1000px) {
  .ist-start #start > h2 { position: relative; width: fit-content; margin-left: -66px; padding: 11px 26px 12px 38px; background: var(--p); color: #fff; border-radius: 8px; box-shadow: 0 8px 14px rgba(15, 20, 25, .22); font-size: 1.625rem; }
  .ist-start #start > h2::before, .ist-start #start > h2::after { content: ""; position: absolute; left: 11px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
  .ist-start #start > h2::before { top: 9px; }
  .ist-start #start > h2::after { bottom: 9px; }
}

@media (prefers-reduced-motion: no-preference) {
  .frisch .schilder .schild { animation: schwenk 1s var(--leicht) backwards; }
  .frisch .schilder > li:nth-child(2) .schild { animation-delay: 70ms; }
  .frisch .schilder > li:nth-child(3) .schild { animation-delay: 140ms; }
  .frisch .schilder > li:nth-child(4) .schild { animation-delay: 210ms; }
  .frisch .schilder > li:nth-child(5) .schild { animation-delay: 280ms; }
  .frisch .schilder > li:nth-child(6) .schild { animation-delay: 350ms; }
  .frisch .schilder > li:nth-child(7) .schild { animation-delay: 420ms; }
  @keyframes schwenk { from { transform: rotate(-9deg); } 55% { transform: rotate(1.4deg); } to { transform: rotate(0); } }
}
@media (prefers-reduced-motion: reduce) { .schild:hover, .held[data-eigene] .knopf:hover, .schnell[data-eigene] a:hover { transform: none; } }

/* Unterseiten am Computer: der Wegweiser steht als feste Spalte links */
@media (min-width: 1000px) {
  body:not(.ist-start) .rahmen { display: grid; grid-template-columns: 356px minmax(0, 1fr); align-items: start; }
  body:not(.ist-start) .kopf { --x: 36px; position: sticky; top: 0; height: 100vh; overflow: hidden auto; scrollbar-width: thin; padding: 30px 0 30px 26px; }
  body:not(.ist-start) .mast { grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: 20px; }
  body:not(.ist-start) .ort { font-size: 1.5rem; padding: 10px 14px 12px 16px; margin-right: 34px; }
  body:not(.ist-start) .ort small { font-size: .9375rem; margin-top: 4px; }
  body:not(.ist-start) .schilder { justify-items: stretch; gap: 9px; }
  body:not(.ist-start) .schilder .schild { --h: 50px; display: grid; margin-right: 58px; background: var(--soft); color: var(--dark); }
  body:not(.ist-start) .schilder .schild b { font-size: 1.1875rem; }
  body:not(.ist-start) .schilder .schild > span { display: none; }
  body:not(.ist-start) .schilder .schild[aria-current] { background: var(--p); color: #fff; }
  body:not(.ist-start) main { padding: 46px clamp(24px, 5vw, 72px) 88px 20px; max-width: 1010px; }
}
body:not(.ist-start) .schilder > .offen > .schild:not([aria-current]) { background: var(--dark); color: #fff; }
body:not(.ist-start) .schilder > .offen > .schild:not([aria-current])::before { background: #fff; }
body:not(.ist-start) .offen > .unter { display: grid; gap: 8px; margin: 8px 0 6px 26px; }
body:not(.ist-start) .unter .schild { --h: 44px; background: var(--papier); box-shadow: inset 0 0 0 2px var(--soft); }
body:not(.ist-start) .unter .schild::after { box-shadow: inset 0 2px 0 0 var(--soft), inset -2px 0 0 0 var(--soft); }
body:not(.ist-start) .unter .schild b { font-size: 1.0625rem; font-weight: 800; }
body:not(.ist-start) .unter .schild[aria-current], body:not(.ist-start) .unter .schild[aria-current]::after { box-shadow: none; }

@media (max-width: 999px) {
  .kopf { --x: 18px; }
  .mast { padding: 0 14px 0 8px; gap: 14px; }
  .ort { font-size: 1.625rem; padding: 10px 16px 12px 16px; }
  .ort small { font-size: .9375rem; margin-top: 4px; }
  .schilder { justify-items: stretch; gap: 10px; }
  .schilder .schild { display: grid; }
  .schild { --h: 58px; }
  .schild b { font-size: 1.25rem; }
  .ist-start .kopf { min-height: 0; padding: 0 0 26px; }
  .ist-start .kopf-bild { position: static; height: 230px; }
  .ist-start .mast { margin: -40px 0 0; padding-bottom: 0; filter: none; }
  .ist-start .schilder > li .schild { min-width: 0 !important; background: var(--soft); color: var(--dark); }
  .ist-start .schilder > li .schild span { color: var(--tinte); }
  /* Handy: Die Spitze ist aus dem Schild selbst geschnitten, damit sie auch bei zwei Zeilen Auskunft stimmt. */
  .ist-start .schilder > li .schild { margin-right: 0; padding: 7px 40px 8px 30px; border-radius: 0; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); }
  .ist-start .schilder > li .schild::after { display: none; }
  /* Eigene Knöpfe und Kacheln: untereinander in voller Breite, gleich unter den Schildern des Menüs */
  .ist-start .held[data-eigene], .ist-start .schnell[data-eigene] { z-index: 2; padding: 14px 14px 0 8px; background: none; }
  .ist-start .held[data-eigene] ~ .schnell[data-eigene] { padding-top: 10px; }
  .ist-start .schnell[data-eigene] { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .held-knoepfe { display: grid; gap: 10px; }
  .held[data-eigene] .knopf, .schnell[data-eigene] a { padding: 7px 40px 8px 30px; border-radius: 0; }
  .ist-start main { padding: 34px 18px 64px; }
  .ist-start main::before { display: none; }
  body:not(.ist-start) .kopf { padding: 14px 0 16px; }
  body:not(.ist-start) .kopf:not(.offen)::before { display: none; }
  body:not(.ist-start) .mast { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  body:not(.ist-start) .ort { font-size: 1.25rem; }
  body:not(.ist-start) .ort small { display: none; }
  body:not(.ist-start) .menue-knopf { display: inline-flex; }
  body:not(.ist-start) #wegweiser { display: none; grid-column: 1 / -1; }
  body:not(.ist-start) .kopf.offen #wegweiser { display: block; }
  body:not(.ist-start) .schilder .schild { --h: 52px; background: var(--soft); color: var(--dark); }
  body:not(.ist-start) .schilder .schild > span { display: none; }
  body:not(.ist-start) .schilder .schild[aria-current] { background: var(--p); color: #fff; }
  body:not(.ist-start) main { padding: 30px 18px 64px; }
  body:not(.ist-start) main::before { height: 150px; margin-bottom: 26px; }
}

.ort-zeichen { display: none; }