/* ==========================================================================
   Haldenberg-Realschule Uhingen – Design (Kindtemplate von Cassiopeia)
   Zuerst Handy, dann Tablet (ab 768 px) und Desktop (ab 1100 px).
   Farben: nur die Farben der Schule (Schulrot, Anthrazit, Grau, Weiß).
   Schrift: Arial (Systemschrift der bisherigen Seite, wird nicht geladen).
   ========================================================================== */

:root{
  --rot:#A81F28;             /* Schulrot (Logo, Links, Knöpfe) */
  --rot-dunkel:#861920;      /* Schulrot beim Drüberfahren */
  --dunkel:#2C2E36;          /* Anthrazit: Text, Fußbereich */
  --grau:#9A9A9A;            /* Linien, Nebentext */
  --grau-hell:#F4F4F4;       /* helle Flächen */
  --weiss:#FFFFFF;
  --grau-linie:rgba(154,154,154,.45);
  --text:var(--dunkel);
  --rund:8px; --rund-klein:6px;
  --schatten:0 6px 22px rgba(44,46,54,.08);
  --schatten-hoch:0 14px 34px rgba(44,46,54,.14);
  --breite:1240px;
  --schrift:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --gr-text:17px; --gr-klein:15px;
  --gr-h1:30px; --gr-h2:24px; --gr-h3:19px; --gr-h4:17px;
  --fett:700;
  --abstand:40px;

  /* Cassiopeia-Variablen auf das Schul-Design umstellen */
  --cassiopeia-font-family-body:var(--schrift);
  --cassiopeia-font-family-headings:var(--schrift);
  --cassiopeia-font-weight-headings:700;
  --cassiopeia-color-primary:var(--rot);
  --cassiopeia-color-link:var(--rot);
  --cassiopeia-color-hover:var(--rot-dunkel);
  --link-color:var(--rot);
  --link-hover-color:var(--rot-dunkel);
  --hue:357; --template-bg-light:var(--grau-hell); --template-text-dark:var(--dunkel);
  --body-bg:#fff; --body-color:var(--dunkel);
}

/* ---------- Grundlagen ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.hrsu{margin:0;background:#fff;color:var(--text);font:400 var(--gr-text)/1.6 var(--schrift);overflow-x:hidden}
.hrsu h1,.hrsu h2,.hrsu h3,.hrsu h4,.hrsu h5,.hrsu h6{font-family:var(--schrift);font-weight:var(--fett);color:var(--dunkel);line-height:1.25;margin:0 0 .5em}
.hrsu h1{font-size:var(--gr-h1)}.hrsu h2{font-size:var(--gr-h2)}.hrsu h3{font-size:var(--gr-h3)}.hrsu h4,.hrsu h5,.hrsu h6{font-size:var(--gr-h4)}
/* Überschriften kleben nie an vorherigen Absätzen, Listen oder Kästen */
.hrsu :where(p,ul,ol,div,table,figure,blockquote,pre,details) + h2,
.hrsu :where(p,ul,ol,div,table,figure,blockquote,pre,details) + h3,
.hrsu :where(p,ul,ol,div,table,figure,blockquote,pre,details) + h4{margin-top:1.6em}
.hrsu p{margin:0 0 1em}
.hrsu a{color:var(--rot);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.hrsu a:hover,.hrsu a:focus{color:var(--rot-dunkel)}
.hrsu :focus-visible{outline:3px solid var(--dunkel);outline-offset:2px}
.hrsu img{max-width:100%;height:auto}
.hrsu main img{border-radius:var(--rund)}
.hrsu table{width:100%;border-collapse:collapse;margin:0 0 1.2em}
.hrsu th,.hrsu td{padding:8px 10px;border-bottom:1px solid var(--grau-linie);text-align:left;vertical-align:top}
.hrsu th{background:var(--grau-hell)}
.hrsu hr{border:0;border-top:1px solid var(--grau-linie);margin:1.6em 0}
.hrsu blockquote{margin:1.2em 0;padding:14px 18px;background:var(--grau-hell);border-radius:var(--rund)}
.hrsu pre{white-space:pre-wrap;font:inherit;background:var(--grau-hell);border-radius:var(--rund);padding:14px 18px}
.innen{width:100%;max-width:var(--breite);margin:0 auto;padding-left:16px;padding-right:16px;box-sizing:border-box}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Sprunglink */
.sprung{position:absolute;left:8px;top:-60px;z-index:1000;background:var(--rot);color:#fff;padding:10px 16px;border-radius:var(--rund-klein);text-decoration:none;font-weight:var(--fett)}
.sprung:focus{top:8px;color:#fff}

/* ---------- Knöpfe ---------- */
.hrsu .btn,.hrsu .btn-primary,.hrsu .readmore .btn,.hrsu button.btn,.hrsu input[type="submit"]{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:9px 20px;border-radius:var(--rund-klein);border:2px solid var(--rot);background:var(--rot);color:#fff;font:var(--fett) var(--gr-text)/1.3 var(--schrift);text-decoration:none;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.hrsu .btn:hover,.hrsu .btn:focus,.hrsu .btn-primary:hover,.hrsu .btn-primary:focus,.hrsu input[type="submit"]:hover{background:var(--rot-dunkel);border-color:var(--rot-dunkel);color:#fff}
.hrsu .btn-rahmen,.hrsu .btn-secondary,.hrsu .readmore .btn{background:#fff;color:var(--dunkel);border-color:var(--rot)}
.hrsu .btn-rahmen:hover,.hrsu .btn-rahmen:focus,.hrsu .btn-secondary:hover,.hrsu .readmore .btn:hover,.hrsu .readmore .btn:focus{background:var(--rot);color:#fff;border-color:var(--rot)}
.hrsu .btn-dunkel{background:var(--dunkel);border-color:var(--dunkel);color:#fff}
.hrsu .btn-dunkel:hover,.hrsu .btn-dunkel:focus{background:#000;border-color:#000}
.hrsu .btn-sm{min-height:38px;padding:6px 14px;font-size:var(--gr-klein)}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Symbole (Masken, lokal, einfarbig) ---------- */
.symbol{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.18em;margin-right:.45em;background:currentColor;-webkit-mask:var(--maske) center/contain no-repeat;mask:var(--maske) center/contain no-repeat;flex:none}
.symbol-telefon{--maske:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E")}
.symbol-mail{--maske:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}
.symbol-ort{--maske:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-7.2 7-12.5A7 7 0 0 0 5 9.5C5 14.8 12 22 12 22z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E")}
.symbol-youtube{--maske:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M23 7.1a3 3 0 0 0-2.1-2.1C19 4.5 12 4.5 12 4.5s-7 0-8.9.5A3 3 0 0 0 1 7.1 31 31 0 0 0 .5 12 31 31 0 0 0 1 16.9 3 3 0 0 0 3.1 19c1.9.5 8.9.5 8.9.5s7 0 8.9-.5a3 3 0 0 0 2.1-2.1 31 31 0 0 0 .5-4.9 31 31 0 0 0-.5-4.9zM9.8 15.3V8.7L15.8 12z'/%3E%3C/svg%3E")}
.symbol-kalender{--maske:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E")}
.symbol-pfeil{--maske:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}

/* Externe Links bekommen ein kleines Symbol (Hinweis für Screenreader kommt aus dem Skript) */
main a.extern::after{content:"";display:inline-block;width:.8em;height:.8em;margin-left:.3em;vertical-align:-.05em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%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' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center/contain no-repeat}
main a.extern.btn::after,main .zugang a.extern::after,main a.extern:has(img)::after,main .galerie a.extern::after{display:none}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 var(--grau-linie);transition:box-shadow .3s}
.kopf.gescrollt{box-shadow:var(--schatten)}
.kontaktzeile{display:none;background:var(--dunkel);color:#fff;font-size:var(--gr-klein)}
.kontaktzeile .innen{display:flex;justify-content:space-between;align-items:center;gap:8px 24px;min-height:38px}
.kontaktzeile ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 26px;align-items:center}
.kontaktzeile li{white-space:nowrap;display:flex;align-items:center}
.kontaktzeile a,.kontaktzeile .kz-module a{color:#fff;text-decoration:none}
.kontaktzeile a:hover,.kontaktzeile a:focus{color:#fff;text-decoration:underline}
.kontaktzeile .symbol{color:#fff;opacity:.85}
.kontaktzeile .kz-module ul{gap:4px 18px}
.kopf-zeile{display:flex;align-items:center;gap:12px 20px;min-height:72px;padding-top:8px;padding-bottom:8px;position:relative;flex-wrap:wrap}
.logo{display:flex;align-items:center;flex:none;text-decoration:none}
.logo img{height:64px;width:auto;display:block;border-radius:0}
.kopf-logos{display:none;align-items:center;gap:14px;padding-left:16px;border-left:1px solid var(--grau-linie)}
.kopf-logos img{height:34px;width:auto;border-radius:0}
.kopf-logos p{margin:0;display:flex;gap:14px;align-items:center}

/* Menü-Knopf (Handy) */
.menue-knopf{margin-left:auto;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:8px 12px;border:2px solid var(--rot);border-radius:var(--rund-klein);background:#fff;color:var(--dunkel);font:var(--fett) 16px/1 var(--schrift);cursor:pointer}
.menue-knopf-striche{display:inline-flex;flex-direction:column;gap:5px;width:22px}
.menue-knopf-striche span{display:block;height:3px;border-radius:2px;background:var(--rot);transition:transform .25s,opacity .2s}
.menue-knopf[aria-expanded="true"] .menue-knopf-striche span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menue-knopf[aria-expanded="true"] .menue-knopf-striche span:nth-child(2){opacity:0}
.menue-knopf[aria-expanded="true"] .menue-knopf-striche span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Hauptmenü – Handy: aufklappbare Liste unter dem Kopf */
.hauptmenue{display:none;flex-basis:100%;max-height:calc(100vh - 90px);max-height:calc(100svh - 90px);overflow:auto;border-top:1px solid var(--grau-linie);margin:0 -16px;padding:8px 16px 16px}
.hauptmenue.offen{display:block}
.hauptmenue ul{list-style:none;margin:0;padding:0}
.hauptmenue li{position:relative}
.hauptmenue a,.hauptmenue .mod-menu__heading{display:block;padding:12px 10px;color:var(--dunkel);text-decoration:none;font-weight:var(--fett);font-size:17px;border-radius:var(--rund-klein)}
.hauptmenue ul ul a,.hauptmenue ul ul .mod-menu__heading{font-weight:400;font-size:16px;padding:10px 10px 10px 24px}
.hauptmenue ul ul ul a{padding-left:40px}
.hauptmenue a,.hauptmenue a:hover,.hauptmenue a:focus,.hauptmenue .mod-menu__heading{text-decoration:none!important}
.hauptmenue a:hover,.hauptmenue a:focus{color:var(--rot)}
.hauptmenue li.active > a,.hauptmenue a[aria-current="page"]{color:var(--rot)}
.hauptmenue .mod-menu__sub{display:none}
.hauptmenue .mod-menu__sub.show-menu,.hauptmenue .mod-menu__sub[aria-hidden="false"]{display:block}
/* Keine Linien oder Rahmen an Menüpunkten, Überschriften und Knöpfen */
.hauptmenue li,.hauptmenue a,.hauptmenue .mod-menu__heading,.hauptmenue .nav-header,.hauptmenue button.mod-menu__toggle-sub{border:0!important;box-shadow:none!important;font-family:inherit}
/* Pfeil-Knopf zum Aufklappen (Joomla-Menü) */
.hauptmenue .mod-menu__toggle-sub{position:absolute;right:4px;top:4px;width:44px;height:44px;border:0;border-radius:var(--rund-klein);background:none;color:var(--dunkel);cursor:pointer;display:flex;align-items:center;justify-content:center}
.hauptmenue .mod-menu__toggle-sub .icon-chevron-down{margin:0;transition:transform .2s}
.hauptmenue .mod-menu__toggle-sub .icon-chevron-down::before{content:"";display:block;width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.hauptmenue .mod-menu__toggle-sub[aria-expanded="true"] .icon-chevron-down{transform:rotate(180deg)}
/* Überschriften-Punkte (z. B. „Über HRSU Schule“) sind im Handy-Menü selbst der Aufklapp-Knopf */
.hauptmenue li.parent > button.mod-menu__toggle-sub{position:static;width:100%;height:auto;justify-content:space-between;background:none;padding:0;text-align:left}
.hauptmenue li.parent > button.mod-menu__toggle-sub .mod-menu__heading{flex:1}
.hauptmenue li.parent > button.mod-menu__toggle-sub .icon-chevron-down{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;margin:0 4px 0 0}
.hauptmenue li.parent > button.mod-menu__toggle-sub .icon-chevron-down::before{content:"";display:block;width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.hauptmenue li.divider{border-top:1px solid var(--grau-linie);margin:6px 0}

/* ---------- Startseite: Bühne (Startbild links, Kasten rechts) ---------- */
.buehne{padding:16px 0 0}
.buehne-raster{display:grid;gap:16px}
/* Alle Folien liegen übereinander; die Höhe kommt vom Seitenverhältnis (Handy) bzw. vom Kasten daneben (Desktop) */
.folien{position:relative;border-radius:var(--rund);overflow:hidden;background:var(--grau-hell);aspect-ratio:1150/350}
.folien-eintrag{position:absolute;inset:0;display:none}
.folien-eintrag.aktiv{display:block}
.folien.js .folien-eintrag{display:block;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
.folien.js .folien-eintrag.aktiv{opacity:1;visibility:visible}
.folien-eintrag > div{position:absolute;inset:0}
.folie{margin:0;position:absolute;inset:0;display:block}
.folie img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.folie figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 18px;background:linear-gradient(180deg,rgba(44,46,54,0) 0,rgba(44,46,54,.8) 100%);color:#fff}
.folie figcaption p{margin:0 0 8px;color:#fff;max-width:60ch;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.folie figcaption p:last-child{margin-bottom:0}
.folie figcaption strong{font-size:var(--gr-h3);color:#fff}
.folie figcaption .btn{min-height:40px;padding:6px 16px;font-size:var(--gr-klein);background:#fff;color:var(--dunkel);border-color:#fff}
.folie figcaption .btn:hover,.folie figcaption .btn:focus{background:var(--rot);color:#fff;border-color:var(--rot)}
.folien-steuerung{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:space-between;pointer-events:none;align-items:center;padding:0 8px}
.folien-steuerung button{pointer-events:auto;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--dunkel);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--schatten)}
.folien-steuerung button:hover,.folien-steuerung button:focus-visible{background:var(--rot);color:#fff}
.folien-punkte{position:absolute;left:0;right:0;display:flex;justify-content:center;gap:8px;margin:0;padding:0;list-style:none;transform:translateY(-32px)}
.folien-punkte button{width:14px;height:14px;padding:0;border:2px solid #fff;border-radius:50%;background:rgba(44,46,54,.5);cursor:pointer}
.folien-punkte button[aria-current="true"]{background:var(--rot)}
.folien-pause{position:absolute;right:10px;transform:translateY(-44px);width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--dunkel);cursor:pointer;font-size:14px}
.buehne-kasten .modul{background:#fff;border:1px solid var(--grau-linie);border-radius:var(--rund);padding:18px 20px;margin:0;height:100%;box-sizing:border-box}
.buehne-kasten .modul-titel{font-size:var(--gr-h3);margin:0 0 12px;padding-bottom:10px;border-bottom:2px solid var(--rot)}

/* Hauptüberschrift der Startseite */
.hrsu .start-titel{font-size:clamp(24px,3vw,var(--gr-h1));margin:var(--abstand) 0 16px;text-align:left}
/* Nach der Hauptüberschrift folgt der erste Bereich ohne zusätzlichen Abstand (gleicher Abstand wie Überschrift -> Bilder) */
.ist-startseite .innen + .bereich-karten,.ist-startseite .innen + .bereich-zugaenge,.ist-startseite .innen + .bereich-hinweise,.ist-startseite .innen + .bereich-galerie{padding-top:0}
.start-inhalt{margin-bottom:24px}

/* Aktionsbanner (z. B. Schulanmeldung) */
.bereich-aktionen{padding:20px 0 0}
.bereich-aktionen .modul{margin:0 0 16px;background:none;border:0;padding:0}
.bereich-aktionen .modul-inhalt p{margin:0}
.bereich-aktionen img{display:block;width:100%;height:auto;border-radius:var(--rund)}
.bereich-aktionen a img{transition:opacity .2s}
.bereich-aktionen a:hover img{opacity:.9}

/* Hinweise */
.bereich-hinweise{padding:8px 0 0}
.hinweise-liste{display:grid;gap:14px}
.hinweise-liste .modul{margin:0;background:var(--grau-hell);border:0;border-radius:var(--rund);padding:16px 18px}
.hinweise-liste .modul-titel{font-size:var(--gr-h4);margin:0 0 6px}
.hinweise-liste p:last-child{margin:0}

/* Karten (Förderverein, Downloads, Elternbeirat) */
.bereich-karten{padding:var(--abstand) 0 0}
.raster-karten{display:grid;gap:16px}
.raster-karten .modul{margin:0;background:#fff;border:1px solid var(--grau-linie);border-radius:var(--rund);padding:22px 22px 18px;display:flex;flex-direction:column;transition:box-shadow .2s,border-color .2s}
.raster-karten .modul:hover{box-shadow:var(--schatten);border-color:var(--grau)}
.raster-karten .modul-titel{font-size:var(--gr-h3);margin:0 0 10px}
.raster-karten .modul-inhalt{flex:1}
.raster-karten .modul-inhalt p,.raster-karten .modul-inhalt div{margin:0}
.raster-karten .modul-inhalt strong a,.raster-karten .modul-inhalt a strong{display:inline-block;margin-top:10px;font-weight:var(--fett)}

/* Zugänge (Mensa, Office 365) – Bild links, Text rechts */
.bereich-zugaenge{padding:var(--abstand) 0 0}
.raster-zugaenge{display:grid;gap:16px}
.raster-zugaenge .modul{margin:0;background:var(--grau-hell);border-radius:var(--rund);padding:22px}
.raster-zugaenge .modul-titel{font-size:var(--gr-h3);margin:0 0 10px}
.raster-zugaenge .modul-inhalt p{margin:0}
.raster-zugaenge img{float:none!important;display:block;width:100%;max-width:300px;height:auto;margin:0 0 14px!important;border-radius:var(--rund)}
.raster-zugaenge a strong{display:inline-block;margin-top:8px}

/* Galerie (Rundgang) */
.bereich-galerie{padding:var(--abstand) 0 0}
.bereich-galerie .modul{margin:0}
.bereich-galerie .modul-titel{font-size:var(--gr-h2);margin:0 0 16px}
.bereich-galerie .galerie{margin-top:0}
.galerie-gross button{background:var(--rot)!important;color:#fff!important}
.galerie-gross button:hover,.galerie-gross button:focus-visible{background:#fff!important;color:var(--dunkel)!important}

/* Band „Haben Sie Fragen?“ */
.bereich-fragen{margin-top:var(--abstand);background:var(--grau-hell);padding:clamp(28px,4vw,44px) 0}
.bereich-fragen .modul{margin:0;text-align:center;max-width:720px;margin-left:auto;margin-right:auto}
.bereich-fragen h1,.bereich-fragen h2,.bereich-fragen .modul-titel{font-size:var(--gr-h2);margin:0 0 10px}
.bereich-fragen p{margin:0 0 .5em}
.bereich-fragen p:last-child{margin:0}
.bereich-fragen br{display:none}

/* Neue Schulnachrichten */
.bereich-nachrichten{padding:var(--abstand) 0}
.bereich-nachrichten .modul{margin:0}
.bereich-nachrichten .modul-titel{font-size:var(--gr-h2);margin:0 0 16px}
.bereich-nachrichten .mod-articles,.bereich-nachrichten .latestnews,.bereich-nachrichten ul.mod-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bereich-nachrichten .mod-articles > li,.bereich-nachrichten .latestnews > li{margin:0;padding:16px 18px;border:1px solid var(--grau-linie);border-radius:var(--rund);background:#fff}
.bereich-nachrichten .mod-articles a,.bereich-nachrichten .latestnews a{font-weight:var(--fett);text-decoration:none;color:var(--dunkel)}
.bereich-nachrichten .mod-articles a:hover,.bereich-nachrichten .latestnews a:hover{color:var(--rot)}
.bereich-nachrichten .mod-articles__category,.bereich-nachrichten .mod-articles__date{display:block;font-size:var(--gr-klein);color:var(--dunkel);margin-top:4px}

/* ---------- Unterseiten ---------- */
.seite{display:grid;gap:32px;padding-top:clamp(24px,4vw,44px);padding-bottom:clamp(40px,6vw,72px)}
.seite-inhalt{min-width:0}
.seite-inhalt > .com-content-article > .page-header h1,.seite-inhalt h1{font-size:var(--gr-h1);margin:0 0 .6em}
.seite-inhalt .page-header h2 a{text-decoration:none;color:var(--dunkel)}
.seite-inhalt .page-header h2 a:hover{color:var(--rot)}
/* Brotkrumen */
.mod-breadcrumbs{display:flex;flex-wrap:wrap;gap:4px 8px;list-style:none;margin:0 0 18px;padding:0;font-size:var(--gr-klein)}
.mod-breadcrumbs li{display:flex;align-items:center;gap:8px}
.mod-breadcrumbs .divider{color:var(--grau)}
.mod-breadcrumbs .divider::before{content:"›"}
.mod-breadcrumbs .divider .icon-location,.mod-breadcrumbs .icon-location{display:none}
.mod-breadcrumbs a{text-decoration:none;color:var(--dunkel)}
.mod-breadcrumbs a:hover{color:var(--rot);text-decoration:underline}
/* Seitenleiste: schlichte Karten */
.seite-sidebar .modul{background:#fff;border:1px solid var(--grau-linie);border-radius:var(--rund);padding:18px 20px;margin:0 0 18px}
.seite-sidebar .modul-titel{font-size:var(--gr-h3);margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid var(--rot)}
.seite-sidebar .modul-inhalt > p:last-child{margin:0}
.seite-sidebar img{display:block;margin:0 auto;border-radius:var(--rund)}
.seite-sidebar ul.mod-menu,.seite-sidebar .mod-list,.seite-sidebar .categories-module,.seite-sidebar .archive-module{list-style:none;margin:0;padding:0}
.seite-sidebar ul.mod-menu li a,.seite-sidebar .mod-list li a,.seite-sidebar .categories-module a,.seite-sidebar .archive-module a{display:block;padding:8px 0 8px 18px;border-bottom:1px solid var(--grau-linie);text-decoration:none;color:var(--dunkel);position:relative}
.seite-sidebar ul.mod-menu li:last-child a,.seite-sidebar .mod-list li:last-child a{border-bottom:0}
.seite-sidebar ul.mod-menu li a::before,.seite-sidebar .mod-list li a::before,.seite-sidebar .categories-module a::before,.seite-sidebar .archive-module a::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;border-right:2px solid var(--rot);border-top:2px solid var(--rot);transform:rotate(45deg)}
.seite-sidebar ul.mod-menu li a:hover,.seite-sidebar ul.mod-menu li.current > a,.seite-sidebar ul.mod-menu a[aria-current="page"]{color:var(--rot);font-weight:var(--fett)}
.seite-sidebar ul.mod-menu ul{padding-left:14px}
.seite-sidebar .mod-menu__toggle-sub{display:none}
.seite-sidebar .mod-menu__sub{display:block!important}
.seite-sidebar .modul .btn{width:100%;justify-content:center}
/* Beitrag */
.hrsu .article-info{display:flex;flex-wrap:wrap;gap:2px 16px;margin:0 0 16px;font-size:var(--gr-klein)}
.hrsu .article-info dd{margin:0}
.hrsu .article-info .article-info-term,.hrsu .article-info .hits{display:none}
.hrsu .com-content-article__body img,.hrsu .item-content img{max-width:100%;height:auto}
.hrsu .readmore{margin:8px 0 0}
.hrsu .blog-items{display:block;margin:0;width:auto}
.hrsu .blog-item,.hrsu .com-content-category-blog__item{display:block;background:#fff;border:1px solid var(--grau-linie);border-radius:var(--rund);padding:clamp(18px,3vw,26px);margin:0 0 20px}
.hrsu .blog-item .page-header h2{font-size:var(--gr-h2);margin:0 0 8px}
.hrsu .blog-items[class*="columns-"]{display:grid;grid-template-columns:1fr;gap:20px}
.hrsu .blog-items[class*="columns-"] > .blog-item{margin:0;min-width:0}
.hrsu .pagination{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:20px 0}
.hrsu .pagination .page-link{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:42px;padding:6px 12px;border:1px solid var(--grau-linie);border-radius:var(--rund-klein);color:var(--dunkel);text-decoration:none;background:#fff}
.hrsu .pagination .page-item.active .page-link{background:var(--rot);border-color:var(--rot);color:#fff}
.hrsu .pagination .page-link:hover{border-color:var(--rot);color:var(--rot)}
.hrsu .page-header + .article-info{margin-top:-6px}
/* Download-Liste */
.download-raster{display:grid;gap:18px;margin-top:8px}
.download-gruppe{border:1px solid var(--grau-linie);border-radius:var(--rund);padding:18px 20px 8px;scroll-margin-top:110px}
.download-gruppe h2{font-size:var(--gr-h3);margin:0 0 10px}
.download-liste{list-style:none;margin:0 0 10px;padding:0}
.download-liste li{padding:9px 0 9px 30px;border-bottom:1px solid var(--grau-linie);position:relative;line-height:1.5}
.download-liste li:last-child{border-bottom:0}
.download-liste li::before{content:"";position:absolute;left:0;top:11px;width:20px;height:20px;background:var(--rot);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M12 12v6M9 15l3 3 3-3'/%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' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M12 12v6M9 15l3 3 3-3'/%3E%3C/svg%3E") center/contain no-repeat}
.download-liste a{text-decoration:none;color:var(--dunkel);font-weight:var(--fett)}
.download-liste a:hover{color:var(--rot);text-decoration:underline}
.download-liste a.extern::after{display:none}
.datei-info{color:var(--dunkel);font-size:var(--gr-klein);white-space:nowrap}
.download-bearbeiten{margin-left:10px;font-size:var(--gr-klein);font-weight:400!important}
.download-neu{margin:4px 0 10px}
.neue-downloads li{padding-left:28px}
.neue-downloads li::before{width:18px;height:18px}
.neue-downloads-alle{margin:6px 0 0;font-size:var(--gr-klein)}
/* Band unter dem Inhalt */
.band-mehr{background:var(--grau-hell);padding:clamp(32px,5vw,52px) 0}
.band-mehr-titel{margin:0 0 18px}
.band-mehr-raster{display:grid;gap:18px}
.band-mehr .modul{background:#fff;border-radius:var(--rund);padding:20px 22px;margin:0}
.band-mehr .modul-titel{font-size:var(--gr-h3);margin:0 0 10px}
.bereich-unten{padding:var(--abstand) 0 0}
/* Allgemeine Modulkarte außerhalb von Rastern */
.modul{margin:0 0 20px}
.modul-inhalt > *:last-child{margin-bottom:0}
/* Formulare (Kontakt, Anmeldung, Bearbeiten) */
.hrsu .form-control,.hrsu input[type="text"],.hrsu input[type="email"],.hrsu input[type="password"],.hrsu textarea,.hrsu select{border:1px solid var(--grau);border-radius:var(--rund-klein);padding:10px 12px;font:inherit;color:var(--dunkel);background:#fff;max-width:100%}
.hrsu .form-control:focus,.hrsu textarea:focus{border-color:var(--rot);box-shadow:0 0 0 3px rgba(168,31,40,.15)}
.hrsu label{font-weight:var(--fett)}
.hrsu .required .star,.hrsu .star{color:var(--rot)}
.hrsu .alert{border-radius:var(--rund);padding:14px 18px;margin:0 0 18px;border:1px solid var(--grau-linie);background:var(--grau-hell);color:var(--dunkel)}
.hrsu .alert-danger,.hrsu .alert-error{border-color:var(--rot)}
.hrsu .alert-heading{font-size:var(--gr-h4)}
.hrsu .edit-icon{text-decoration:none}

/* ---------- Fußbereich (wie bisher: weiß, drei Spalten, hellgraue Zeile unten) ---------- */
.fuss{margin-top:var(--abstand);background:#fff;color:var(--dunkel);border-top:1px solid var(--grau-linie)}
.ist-startseite .fuss{margin-top:var(--abstand)}
.fuss a{color:var(--rot);text-decoration:none}
.fuss a:hover,.fuss a:focus{color:var(--rot-dunkel);text-decoration:underline}
.fuss-spalten{display:grid;gap:32px;padding-top:var(--abstand);padding-bottom:var(--abstand)}
.fuss .modul{margin:0 0 28px;background:none;border:0;padding:0}
.fuss .modul:last-child{margin-bottom:0}
.fuss .modul-titel{color:var(--dunkel);font-size:28px;font-weight:400;margin:0 0 20px;padding:0;border:0}
.fuss .modul-inhalt{font-size:var(--gr-klein);line-height:1.7}
.fuss .modul-inhalt img{float:left;margin:4px 12px 6px 0;max-width:197px;height:auto;border-radius:0}
.fuss .modul-inhalt::after{content:"";display:table;clear:both}
.fuss .modul-inhalt .btn{min-height:40px;padding:6px 16px;font-size:var(--gr-klein)}
.fuss .modul-inhalt small{font-size:13px}
.fuss ul.mod-menu,.fuss .mod-list,.fuss ul.latestnews,.fuss ul.mod-articles{list-style:none;margin:0;padding:0}
.fuss ul.mod-menu li a,.fuss .mod-list li a,.fuss ul.latestnews li a,.fuss ul.mod-articles li a{display:block;padding:3px 0;text-decoration:none;border:0}
.fuss ul.mod-menu li a:hover,.fuss ul.latestnews li a:hover{text-decoration:underline}
.fuss .mod-menu__toggle-sub{display:none}
.fuss-unten{background:var(--grau-hell);padding:18px 0;font-size:var(--gr-klein);color:var(--dunkel)}
.fuss-unten .innen{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
.fuss-unten p{margin:0}
.fuss-unten a{color:var(--dunkel);text-decoration:none}
.fuss-unten a:hover{text-decoration:underline}
.fuss-links ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:row!important;flex-wrap:wrap;gap:6px 20px}
.fuss-links li{margin:0}
.fuss-links a{text-decoration:none}
.fuss-links a:hover{text-decoration:underline}
/* Nach oben */
.nach-oben{position:fixed;right:16px;bottom:16px;z-index:40;width:48px;height:48px;border-radius:var(--rund);background:var(--rot);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:22px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility .25s;box-shadow:var(--schatten)}
.nach-oben.zeigen{opacity:1;visibility:visible;transform:none}
.hrsu .nach-oben,.hrsu .nach-oben:hover,.hrsu .nach-oben:focus{color:#fff;text-decoration:none}
.nach-oben:hover,.nach-oben:focus{background:var(--rot-dunkel)}
.nach-oben span{display:block;width:22px;height:22px;font-size:0;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 19V5M5 12l7-7 7 7%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 19V5M5 12l7-7 7 7%27/%3E%3C/svg%3E") center/contain no-repeat}

/* Joomla-Bedienungshilfe (Plugin „System – Barrierefreiheit“): rotes Feld mit weißem Rollstuhl-Symbol, unten links */
html body ._access-icon{left:16px!important;right:auto!important;bottom:16px!important;top:auto!important;width:48px!important;height:48px!important;border-radius:var(--rund)!important;border:0!important;background:var(--rot) url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%273.6%27%20r%3D%271.9%27%20fill%3D%27white%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M11%207.5v6h6l2.5%205.5%27%2F%3E%3Cpath%20d%3D%27M11%2010h5%27%2F%3E%3Cpath%20d%3D%27M8.2%2011.2a5.2%205.2%200%201%200%207.4%206.3%27%2F%3E%3C%2Fsvg%3E") center/32px no-repeat!important;color:transparent!important;font-size:0!important;text-shadow:none!important;transform:none!important;box-shadow:var(--schatten)!important}
html body ._access-icon:hover,html body ._access-icon:focus{background-color:var(--rot-dunkel)!important}
html body ._access-menu{font-family:var(--schrift)!important;border-radius:0 var(--rund) var(--rund) 0!important;box-shadow:var(--schatten-hoch)!important}
html body ._access-menu h3{font-family:var(--schrift)!important;font-weight:800!important}
html body ._access-menu ul li{font-family:var(--schrift)!important;border-radius:10px!important;color:var(--dunkel)!important}
html body ._access-menu ul li:before{content:''!important;display:inline-block!important;width:22px!important;height:22px!important;margin-right:10px!important;vertical-align:-5px!important;background:var(--dunkel)!important;-webkit-mask:var(--symbol) center/contain no-repeat!important;mask:var(--symbol) center/contain no-repeat!important}
html body ._access-menu ul li:hover{background-color:var(--grau-hell)!important;color:var(--rot-dunkel)!important}
html body ._access-menu ul li:hover:before{background:var(--rot-dunkel)!important}
html body ._access-menu ul li.active,html body ._access-menu ul li.active:hover{background-color:var(--rot)!important;color:#fff!important}
html body ._access-menu ul li.active:before{background:#fff!important}
html body ._access-menu ul li[data-access-action="increaseText"]{--symbol:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2710.5%27%20cy%3D%2710.5%27%20r%3D%276.5%27%2F%3E%3Cpath%20d%3D%27M20%2020l-4.8-4.8M10.5%207.8v5.4M7.8%2010.5h5.4%27%2F%3E%3C%2Fsvg%3E")}
html body ._access-menu ul li[data-access-action="decreaseText"]{--symbol:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2710.5%27%20cy%3D%2710.5%27%20r%3D%276.5%27%2F%3E%3Cpath%20d%3D%27M20%2020l-4.8-4.8M7.8%2010.5h5.4%27%2F%3E%3C%2Fsvg%3E")}
html body ._access-menu ul li[data-access-action="increaseTextSpacing"]{--symbol:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%207l-5%205%205%205M16%207l5%205-5%205%27%2F%3E%3C%2Fsvg%3E")}
html body ._access-menu ul li[data-access-action="decreaseTextSpacing"]{--symbol:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%207l5%205-5%205M20%207l-5%205%205%205%27%2F%3E%3C%2Fsvg%3E")}
html body ._access-menu ul li[data-access-action="invertColors"]{--symbol:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.5%27%2F%3E%3Cpath%20d%3D%27M12%203.5a8.5%208.5%200%200%201%200%2017z%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E")}
html body ._access-menu ul li[data-access-action="grayHues"]{--symbol:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.5s6%206.4%206%2010.5a6%206%200%200%201-9.6%204.8M7.3%2015.7A6%206%200%200%201%206%2014c0-2.4%202.1-5.5%203.8-7.7M3%203l18%2018%27%2F%3E%3C%2Fsvg%3E")}
html body ._access-menu ul li[data-access-action="underlineLinks"]{--symbol:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%204v6a5%205%200%200%200%2010%200V4M5%2020h14%27%2F%3E%3C%2Fsvg%3E")}
html body ._access-menu ul li[data-access-action="bigCursor"]{--symbol:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%3E%3Cpath%20d%3D%27M5%203l14%207.5-6%201.6-2.4%206.4z%27%2F%3E%3C%2Fsvg%3E")}
html body ._access-menu ul li[data-access-action="readingGuide"]{--symbol:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%206h2M8%206h2M13%206h2M18%206h3M3%2012h18M3%2018h2M8%2018h2M13%2018h2M18%2018h3%27%2F%3E%3C%2Fsvg%3E")}
html body ._access-menu ul li[data-access-action="textToSpeech"]{--symbol:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%278%27%20r%3D%273.5%27%2F%3E%3Cpath%20d%3D%27M3%2020c.5-3.5%203-5.5%206-5.5s5.5%202%206%205.5M17%206.5a4%204%200%200%201%200%205M19.5%204a7.5%207.5%200%200%201%200%2010%27%2F%3E%3C%2Fsvg%3E")}
html body ._access-menu ul li[data-access-action="speechToText"]{--symbol:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%279%27%20y%3D%273%27%20width%3D%276%27%20height%3D%2711%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27M5.5%2011a6.5%206.5%200%200%200%2013%200M12%2017.5V21%27%2F%3E%3C%2Fsvg%3E")}

/* DSGVO-Feld unten links */
.dsgvo-feld{position:fixed;left:16px;bottom:74px;z-index:41}
.dsgvo-knopf{width:48px;padding:0!important;font-size:11px!important;letter-spacing:0!important;text-align:center}
.dsgvo-knopf{min-width:48px;height:28px;padding:0 8px;border:0;border-radius:var(--rund-klein);background:var(--dunkel);color:#fff;font:var(--fett) 12px/1 var(--schrift);letter-spacing:.04em;cursor:pointer;box-shadow:var(--schatten)}
.dsgvo-knopf:hover,.dsgvo-knopf:focus-visible{background:var(--rot)}
.dsgvo-info{position:absolute;left:0;bottom:36px;width:min(340px,calc(100vw - 32px));background:#fff;color:var(--dunkel);border:1px solid var(--grau-linie);border-radius:var(--rund);box-shadow:var(--schatten-hoch);padding:16px 18px;font-size:var(--gr-klein)}
.dsgvo-info[hidden]{display:none}
.dsgvo-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px}
.dsgvo-titel{margin:0;font-weight:var(--fett)}
.dsgvo-zu{border:0;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--dunkel);padding:0 4px}
.dsgvo-info ul{margin:0 0 10px;padding-left:18px}
.dsgvo-info li{margin:0 0 4px}
.dsgvo-info p{margin:0}

/* Fehler- und Wartungsseite */
body.fehlerseite{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
body.fehlerseite > main{flex:1 0 auto}
.offline-innen{max-width:520px;padding-top:48px;padding-bottom:48px;text-align:center}
.offline-logo{height:auto;max-width:220px;margin:0 auto 20px}
.offline-anmeldung{text-align:left;margin-top:24px}
.offline-anmeldung fieldset{border:1px solid var(--grau-linie);border-radius:var(--rund);padding:18px 20px}
.offline-anmeldung .control-group{margin:0 0 12px}
.offline-anmeldung label{display:block;margin-bottom:4px}
.offline-anmeldung .form-control{width:100%;box-sizing:border-box}

/* Zwei-Klick-Kästen (Videos, Karten) in Schulfarben */
.zwei-klick .btn{min-height:40px}
.zk-inhalt .zk-kopf{color:var(--dunkel)}

/* Sanftes Einblenden (nur bei erlaubter Bewegung) */
.einblenden{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.einblenden.sichtbar{opacity:1;transform:none}

/* ---------- Tablet (ab 768 px) ---------- */
@media (min-width:768px){
  .hinweise-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .raster-karten{grid-template-columns:repeat(3,minmax(0,1fr))}
  .raster-zugaenge{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bereich-nachrichten .mod-articles,.bereich-nachrichten .latestnews{grid-template-columns:repeat(2,minmax(0,1fr))}
  .download-raster{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .band-mehr-raster{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .fuss-spalten{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hrsu .blog-items.columns-2,.hrsu .blog-items.columns-3,.hrsu .blog-items.columns-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .folien{aspect-ratio:1150/350;min-height:0}
  .folie figcaption{padding:40px 24px 22px}
}

/* ---------- Desktop (ab 1100 px) ---------- */
@media (min-width:1100px){
  .kontaktzeile{display:block}
  .kopf-zeile{flex-wrap:nowrap;min-height:92px;gap:24px}
  .logo img{height:88px}
  .kopf-zeile{min-height:108px}
  .kopf-logos{display:flex}
  .menue-knopf{display:none}
  .hauptmenue{display:block;flex-basis:auto;margin:0 0 0 auto;padding:0;border:0;max-height:none;overflow:visible}
  .hauptmenue > ul{display:flex;flex-direction:row!important;flex-wrap:nowrap;align-items:center;gap:2px}
  .hauptmenue > ul > li{flex:none}
  .hauptmenue > ul > li > button.mod-menu__toggle-sub{white-space:nowrap}
  .hauptmenue > ul > li > a,.hauptmenue > ul > li > .mod-menu__heading,.hauptmenue > ul > li > button > .mod-menu__heading{padding:12px 14px;font-size:16px;white-space:nowrap;border-radius:var(--rund-klein)}
  .hauptmenue > ul > li > a:hover,.hauptmenue > ul > li:focus-within > a{background:none;color:var(--rot)}
  .hauptmenue > ul > li.active > a{color:var(--rot)}
  .hauptmenue > ul > li.parent{display:flex;align-items:center}
  /* Überschriften-Punkt mit Unterpunkten („Unsere Schule“): sieht aus wie ein Link, Pfeil direkt daneben */
  .hauptmenue > ul > li.parent > button.mod-menu__toggle-sub,.hauptmenue > ul > li.deeper > button.mod-menu__toggle-sub{position:static;display:inline-flex;align-items:center;gap:8px;width:auto;height:auto;padding:12px 12px 12px 14px;background:none;border-radius:var(--rund-klein);color:var(--dunkel);cursor:pointer;font:var(--fett) 16px/1.3 var(--schrift)}
  .hauptmenue > ul > li.parent > button.mod-menu__toggle-sub > .mod-menu__heading,.hauptmenue > ul > li.deeper > button.mod-menu__toggle-sub > .mod-menu__heading{padding:0;font-weight:var(--fett);font-size:16px;white-space:nowrap;color:inherit;flex:none}
  .hauptmenue > ul > li.parent > button.mod-menu__toggle-sub > .icon-chevron-down,.hauptmenue > ul > li.deeper > button.mod-menu__toggle-sub > .icon-chevron-down{width:14px;height:14px;background:none;margin:0;display:inline-flex;align-items:center;justify-content:center;border-radius:0}
  .hauptmenue > ul > li.parent > button.mod-menu__toggle-sub > .icon-chevron-down::before,.hauptmenue > ul > li.deeper > button.mod-menu__toggle-sub > .icon-chevron-down::before{width:8px;height:8px;transform:rotate(45deg) translate(-2px,-2px)}
  .hauptmenue > ul > li.parent > button.mod-menu__toggle-sub:hover,.hauptmenue > ul > li.parent:focus-within > button.mod-menu__toggle-sub,.hauptmenue > ul > li.parent.active > button.mod-menu__toggle-sub{background:none;color:var(--rot)}
  /* Link mit eigenem kleinen Pfeil-Knopf daneben */
  .hauptmenue > ul > li.parent > a + button.mod-menu__toggle-sub,.hauptmenue > ul > li.deeper > a + button.mod-menu__toggle-sub{width:30px;height:30px;padding:0;margin-left:-8px;justify-content:center}
  /* Aufklappende Unterpunkte */
  .hauptmenue > ul > li > .mod-menu__sub{position:absolute;top:100%;left:0;z-index:60;min-width:260px;background:#fff;border:1px solid var(--grau-linie);border-radius:var(--rund);box-shadow:var(--schatten-hoch);padding:12px;margin:6px 0 0}
  .hauptmenue > ul > li:last-child > .mod-menu__sub{left:auto;right:0}
  .hauptmenue > ul > li:hover > .mod-menu__sub,.hauptmenue > ul > li:focus-within > .mod-menu__sub{display:block}
  .hauptmenue ul ul a,.hauptmenue ul ul .mod-menu__heading{padding:9px 12px;font-size:15px;white-space:nowrap}
  .hauptmenue ul ul ul a{padding-left:12px}
  /* Breites Feld mit Spalten, wenn es Überschriften mit weiteren Unterpunkten gibt */
  .hauptmenue > ul > li.mega{position:static}
  .hauptmenue > ul > li.mega > .mod-menu__sub{left:16px;right:16px;display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 28px;padding:22px 26px 20px}
  .hauptmenue > ul > li.mega:hover > .mod-menu__sub,.hauptmenue > ul > li.mega:focus-within > .mod-menu__sub,.hauptmenue > ul > li.mega > .mod-menu__sub.show-menu{display:grid}
  .hauptmenue > ul > li.mega > .mod-menu__sub > li{position:static}
  .hauptmenue > ul > li.mega > .mod-menu__sub > li > button.mod-menu__toggle-sub{pointer-events:none;position:static;display:block;width:100%;height:auto;padding:0;background:none;text-align:left}
  .hauptmenue > ul > li.mega > .mod-menu__sub > li > button.mod-menu__toggle-sub .icon-chevron-down{display:none}
  .hauptmenue > ul > li.mega > .mod-menu__sub .mod-menu__heading,.hauptmenue > ul > li.mega > .mod-menu__sub > li > a{display:block;font-weight:var(--fett);color:var(--dunkel);padding:4px 12px 6px;margin-bottom:4px;font-size:16px;white-space:nowrap}
  .hauptmenue > ul > li.mega > .mod-menu__sub .mod-menu__sub a{font-weight:400}
  .hauptmenue > ul > li.mega > .mod-menu__sub .mod-menu__sub{display:block!important;position:static;box-shadow:none;border:0;padding:0;margin:0;min-width:0}
  .hauptmenue > ul > li.mega > .mod-menu__sub .mod-menu__sub a{white-space:normal}
  .hauptmenue > ul > li.mega > .mod-menu__sub .mod-menu__sub .mod-menu__toggle-sub{display:none}
  .hauptmenue > ul > li.mega > .mod-menu__sub .mod-menu__sub .mod-menu__sub{padding-left:12px}

  .buehne{padding-top:24px}
  .buehne-raster.mit-kasten{grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
  .buehne-raster.mit-kasten .folien{aspect-ratio:1150/350;min-height:0}
  .hinweise-liste{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bereich-nachrichten .mod-articles,.bereich-nachrichten .latestnews{grid-template-columns:repeat(3,minmax(0,1fr))}
  .seite.mit-sidebar{grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start}
  .seite-sidebar{position:sticky;top:116px}
  .band-mehr-raster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hrsu .blog-items.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hrsu .blog-items.columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Weniger Bewegung, wenn im Gerät so eingestellt */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .einblenden{opacity:1;transform:none}
}

/* Druck */
@media print{
  .kopf,.fuss,.nach-oben,.dsgvo-feld,._access-icon,.folien-steuerung,.folien-punkte,.menue-knopf{display:none!important}
  .seite{display:block}
  .hrsu a{color:#000}
}

/* Spalten aus dem Editor (alte JCE-Spalten „wf-columns“): nebeneinander, auf dem Handy untereinander */
.wf-columns{display:grid;gap:20px;margin:0 0 1.2em}
@media (min-width:768px){.wf-columns{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.wf-column{min-width:0}
.wf-column > p:empty,.wf-column > p:only-child:has(> .zwei-klick){margin:0}
/* Video- und Karten-Kästen (Zwei-Klick) füllen die Spalte bzw. die volle Inhaltsbreite */
.seite .zwei-klick{max-width:none;margin:0 0 1.2em}
.wf-column .zwei-klick{margin:0}
/* Schmale Spalten: Hinweiskasten so hoch wie der Text, nach dem Laden wieder 16:9 */
.wf-column .zwei-klick.zk-video:not(.geladen){aspect-ratio:auto;min-height:100%}
.wf-column .zk-inhalt{padding:18px 16px}
.wf-column .zk-knoepfe{gap:8px 14px}

/* Startbilder: Bild immer vollständig (Originalformat), Text und Button darunter statt darüber.
   Alle Folien liegen im selben Rasterfeld übereinander, die höchste bestimmt die Höhe. */
.folien,.buehne-raster.mit-kasten .folien{display:grid;aspect-ratio:auto;min-height:0;height:auto;background:#fff;border:1px solid var(--grau-linie)}
.folien-eintrag,.folien.js .folien-eintrag{position:relative;inset:auto;grid-area:1 / 1}
.folien-eintrag > div,.folie{position:relative;inset:auto}
.folie img{position:static;width:100%;height:auto;aspect-ratio:1150/350;object-fit:cover}
.folie figcaption,.folie figcaption p,.folie figcaption strong{position:static;background:none;color:var(--dunkel);text-shadow:none}
.folie figcaption{padding:14px 18px 16px}
.folie figcaption:empty{display:none}
.folie figcaption .btn{background:var(--rot);color:#fff;border-color:var(--rot)}
.folie figcaption .btn:hover,.folie figcaption .btn:focus{background:var(--rot-dunkel);border-color:var(--rot-dunkel);color:#fff}
.folien-steuerung{bottom:auto;height:auto;aspect-ratio:1150/350}
.folien-punkte{top:auto;bottom:10px;transform:none;justify-content:flex-end;padding-right:16px}
/* Startbilder in ihrem eigenen Seitenverhältnis – nie beschnitten */
.folie img{aspect-ratio:auto;height:auto;object-fit:contain}

/* Hauptmenü wie auf der bisherigen Seite: Großbuchstaben, Symbole vor einzelnen Punkten.
   Symbol im Backend: Menüpunkt › Reiter „Link-Typ“ › „Link-Icon-Klasse“ (z. B. fa-solid fa-download), Schrift Font Awesome lokal von Joomla */
@media (min-width:1100px){
  .hauptmenue > ul > li > a,.hauptmenue > ul > li > button.mod-menu__toggle-sub > .mod-menu__heading{text-transform:uppercase;font-size:15px;letter-spacing:.02em}
}
.hauptmenue a > [class*="fa-"],.hauptmenue .mod-menu__heading > [class*="fa-"]{padding:0!important;margin:0 7px 0 0!important;font-size:.95em;width:auto}
@media (min-width:1100px){
  .hauptmenue > ul > li > button.mod-menu__toggle-sub,.hauptmenue > ul > li > button.mod-menu__toggle-sub *{text-transform:uppercase;font-size:15px;letter-spacing:.02em}
  .hauptmenue > ul > li > a,.hauptmenue > ul > li > button.mod-menu__toggle-sub{padding-left:10px!important;padding-right:10px!important}
  .kopf-logos{flex:none}
  .kopf-logos img{height:34px!important;width:auto!important;max-width:none}
}
@media (min-width:1100px) and (max-width:1279px){.kopf-logos{display:none}}
@media (min-width:1100px){
  .kopf-zeile{gap:18px}
  .hauptmenue > ul > li > a,.hauptmenue > ul > li > button.mod-menu__toggle-sub,.hauptmenue > ul > li > button.mod-menu__toggle-sub *{font-size:14px;letter-spacing:0}
  .hauptmenue > ul > li > a,.hauptmenue > ul > li > button.mod-menu__toggle-sub{padding-left:8px!important;padding-right:8px!important}
  .hauptmenue a > [class*="fa-"]{margin-right:5px!important}
}
@media (min-width:1100px) and (max-width:1339px){.kopf-logos{display:none}}
/* Kopf etwas breiter als der Inhalt, damit Logo, Partner-Logos und das Menü in Großbuchstaben in eine Zeile passen */
.kopf .innen{max-width:1400px}
@media (min-width:1100px) and (max-width:1339px){.kopf-logos{display:none}}

/* Breites Menü („Unsere Schule“) wie auf der bisherigen Seite: nur so breit wie der Menübereich,
   rote Linie oben, Spaltenüberschriften grau in Großbuchstaben, enge Zeilen */
@media (min-width:1100px){
  .hauptmenue{position:relative}
  .hauptmenue > ul{position:relative}
  .hauptmenue > ul > li.mega{position:static}
  .hauptmenue > ul > li.mega > .mod-menu__sub{left:0;right:0;margin-top:0;border:0;border-top:4px solid var(--rot);border-radius:0 0 var(--rund) var(--rund);padding:22px 28px 18px;gap:6px 32px}
  .hauptmenue > ul > li > .mod-menu__sub{border-top:4px solid var(--rot);border-radius:0 0 var(--rund) var(--rund);margin-top:0}
  .hauptmenue > ul > li.mega > .mod-menu__sub .mod-menu__heading,.hauptmenue > ul > li.mega > .mod-menu__sub > li > a{text-transform:uppercase;color:#555;font-size:15px;font-weight:var(--fett);padding:0 0 10px;margin:0;letter-spacing:0}
  .hauptmenue > ul > li.mega > .mod-menu__sub .mod-menu__sub a{padding:6px 0;font-size:15px;color:var(--dunkel);font-weight:400}
  .hauptmenue > ul > li.mega > .mod-menu__sub .mod-menu__sub a:hover,.hauptmenue > ul > li.mega > .mod-menu__sub .mod-menu__sub a[aria-current="page"]{color:var(--rot)}
}
@media (min-width:1100px){
  .hauptmenue > ul > li > button.mod-menu__toggle-sub > .mod-menu__separator{font-weight:var(--fett);color:inherit;padding:0}
  .hauptmenue > ul > li.mega > .mod-menu__sub > li > button .mod-menu__separator{display:block;text-transform:uppercase;color:#555;font-size:15px;font-weight:var(--fett);padding:0 0 10px}
  .hauptmenue > ul > li.mega > .mod-menu__sub .mod-menu__sub li{margin:0}
  .hauptmenue > ul > li.mega > .mod-menu__sub .mod-menu__sub a{padding:5px 0!important;line-height:1.45;font-size:15px}
}

/* Kopf in zwei Ebenen (Desktop): Schullogo links über beide Zeilen, rechts oben die Partner-Logos, darunter das Hauptmenü.
   Alles in der normalen Inhaltsbreite. */
.kopf .innen{max-width:var(--breite)}
@media (min-width:1100px){
  .kopf-zeile{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:24px;row-gap:4px;align-items:center;min-height:0;padding-top:10px;padding-bottom:6px}
  .kopf-zeile > .logo{grid-column:1;grid-row:1 / 3}
  .kopf-zeile > .kopf-logos{display:flex!important;grid-column:2;grid-row:1;justify-self:end;border-left:0;padding-left:0}
  .kopf-zeile > .hauptmenue{grid-column:2;grid-row:2;justify-self:end;margin:0}
  .kopf-zeile > .menue-knopf{display:none}
  .hauptmenue > ul{gap:0}
  .hauptmenue > ul > li > a,.hauptmenue > ul > li > button.mod-menu__toggle-sub,.hauptmenue > ul > li > button.mod-menu__toggle-sub *{font-size:15px}
  .hauptmenue > ul > li > a,.hauptmenue > ul > li > button.mod-menu__toggle-sub{padding-top:10px;padding-bottom:10px}
}
/* Kopf aufgeräumt: Partner-Logos oben bündig mit der Oberkante des Schullogos, Menü unten bündig mit der Unterkante */
@media (min-width:1100px){
  .kopf-zeile{align-items:stretch;padding-top:14px;padding-bottom:12px;row-gap:0}
  .kopf-zeile > .logo{align-self:center}
  .kopf-zeile > .kopf-logos{align-self:start;margin-top:4px}
  .kopf-zeile > .hauptmenue{align-self:end}
  .hauptmenue > ul > li > a,.hauptmenue > ul > li > button.mod-menu__toggle-sub{padding-top:6px;padding-bottom:4px}
  .hauptmenue > ul > li:last-child > a{padding-right:0!important}
}
@media (min-width:1100px){
  .kopf-zeile > .hauptmenue{margin-bottom:-12px}
  .kopf-zeile > .kopf-logos{margin-top:6px}
}
/* „Unsere Schule“ (Knopf) auf gleicher Höhe wie die übrigen Menüpunkte (Links) */
@media (min-width:1100px){
  .hauptmenue > ul{align-items:flex-end}
  .hauptmenue > ul > li > a,.hauptmenue > ul > li > button.mod-menu__toggle-sub{line-height:1.6;display:inline-flex;align-items:center}
  .hauptmenue > ul > li > button.mod-menu__toggle-sub > *{line-height:1.6}
  /* nur noch per Skript geöffnet (Maus) bzw. per Tastatur – kein zusätzliches CSS-Hover, damit Zustand und Anzeige übereinstimmen */
  .hauptmenue > ul > li:hover > .mod-menu__sub:not(.show-menu),.hauptmenue > ul > li.mega:hover > .mod-menu__sub:not(.show-menu){display:none}
}
/* Fehlerseite: kein Menüpunkt als „aktiv“ markieren (Joomla setzt dort die Startseite) */
.fehlerseite .hauptmenue li.active > a,.fehlerseite .hauptmenue li.current > a{color:var(--dunkel)}
.fehlerseite .hauptmenue li.active > a:hover{color:var(--rot)}
/* „Unsere Schule“: exakt gleiche Maße wie die übrigen Menüpunkte (stärkere Regel als die ältere Knopf-Gestaltung) */
@media (min-width:1100px){
  .hauptmenue > ul > li.parent{align-items:flex-end}
  .hauptmenue > ul > li.parent > button.mod-menu__toggle-sub,.hauptmenue > ul > li.deeper > button.mod-menu__toggle-sub{display:inline-flex;align-items:center;gap:6px;height:auto;padding:6px 8px 4px!important;font-size:14px;line-height:1.6}
  .hauptmenue > ul > li.parent > button.mod-menu__toggle-sub > *{font-size:14px;line-height:1.6}
}
@media (min-width:1100px){
  .hauptmenue > ul,.hauptmenue > ul > li.parent{align-items:baseline}
  .hauptmenue > ul > li > a{display:inline-block}
}
@media (min-width:1100px){
  .hauptmenue > ul > li.parent > button.mod-menu__toggle-sub,.hauptmenue > ul > li.parent > button.mod-menu__toggle-sub > *,.hauptmenue > ul > li > a{font-size:15px}
}
/* Band „Haben Sie Fragen?“: breiter, damit der Satz mit der Telefonnummer in eine Zeile passt */
.bereich-fragen .modul{max-width:900px}
.hrsu a[href^="tel:"]{white-space:nowrap}
/* Keine Linie über dem Fußbereich */
.fuss{border-top:0}

/* ---------- Schnellzugriff-Leiste unter dem Startbild (Startseite) ----------
   Modul „Schnellzugriff“: Liste <ul class="schnell-liste">, je <li> eine Kachel.
   Symbol über die Klasse am <li>: schnell-mensa, schnell-office, schnell-download, schnell-kalender,
   schnell-anmeldung, schnell-kontakt, schnell-info (ohne Klasse: Pfeil). */
.bereich-schnell{padding:20px 0 0}
.schnell-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--grau-linie);border-radius:var(--rund);overflow:hidden;background:#fff}
.schnell-liste li{margin:0;border-right:1px solid var(--grau-linie);border-bottom:1px solid var(--grau-linie)}
.schnell-liste a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:92px;padding:14px 10px;text-align:center;text-decoration:none;color:var(--dunkel);font-weight:var(--fett);font-size:15px;line-height:1.3;transition:background-color .2s,color .2s}
.schnell-liste a::before{content:"";width:30px;height:30px;background:var(--rot);-webkit-mask:var(--sz) center/contain no-repeat;mask:var(--sz) center/contain no-repeat;--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.schnell-liste a:hover,.schnell-liste a:focus-visible{background:var(--grau-hell);color:var(--rot)}
.schnell-liste a.extern::after{display:none}
.schnell-mensa a::before{--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v7a2 2 0 0 0 4 0V3M8 10v11M18 3c-2 0-3 2.5-3 6s1 4 3 4v8'/%3E%3C/svg%3E")}
.schnell-office a::before{--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='8' height='8' rx='1'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1'/%3E%3C/svg%3E")}
.schnell-download a::before{--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M12 12v6M9 15l3 3 3-3'/%3E%3C/svg%3E")}
.schnell-kalender a::before{--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18M8 14h2M14 14h2M8 17h2'/%3E%3C/svg%3E")}
.schnell-anmeldung a::before{--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E")}
.schnell-kontakt a::before{--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}
.schnell-info a::before{--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E")}
@media (min-width:768px){
  .schnell-liste{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .schnell-liste li{border-bottom:0}
  .schnell-liste li:last-child{border-right:0}
}
@media (max-width:767px){
  .schnell-liste li:nth-child(2n){border-right:0}
  .schnell-liste li:last-child:nth-child(odd){grid-column:1 / -1;border-right:0}
  .schnell-liste li:nth-last-child(-n+2){border-bottom:0}
  .schnell-liste li:last-child:nth-child(odd) ~ li,.schnell-liste li:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--grau-linie)}
}
/* Startseite: Slider-Rahmen und Kasten „Nächste Termine“ enden unten auf gleicher Höhe (Bild bleibt oben, unverändert) */
@media (min-width:1100px){
  .buehne-raster.mit-kasten{align-items:stretch}
  .buehne-raster.mit-kasten .folien{height:100%;align-content:start}
  .buehne-kasten .modul{height:100%}
}
/* Zusätzliche Links oben rechts in der Kontaktzeile (Position topbar-rechts), z. B. „Infos zur Schulanmeldung“ mit i-Symbol */
.kontaktzeile .kz-links{list-style:none;margin:0;padding:0;display:flex;gap:4px 22px}
.kontaktzeile .kz-links li{display:flex;align-items:center}
.kontaktzeile .kz-info a::before{content:"";display:inline-block;width:1.05em;height:1.05em;vertical-align:-.18em;margin-right:.45em;background:#fff;opacity:.85;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%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' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E") center/contain no-repeat}
.kontaktzeile .kontaktzeile-rechts .kz-module{order:-1}
/* Beitragslisten in Spalten (Aktuelles): jeder Kasten nur so hoch wie sein Inhalt */
.hrsu .blog-items[class*="columns-"]{align-items:start}
/* Mauerwerk-Layout (per Skript aktiviert; ohne Skript normales Raster) */
@media (min-width:768px){
  .hrsu .blog-items.mauerwerk{grid-auto-rows:4px;row-gap:0;column-gap:20px;align-items:start}
  .hrsu .blog-items.mauerwerk > .blog-item{margin:0 0 20px}
}
/* Zwei-Klick-Kasten (Video noch nicht geladen): mindestens 16:9, aber immer so hoch wie der Hinweistext – nie überlappend */
.zwei-klick.zk-video:not(.geladen){min-height:auto!important;height:auto}
.zwei-klick .zk-inhalt{padding:20px 18px}

/* ---------- Seite „Unser Profil“ und allgemein nutzbare Bausteine ---------- */
/* Leitsatz / Motto: <blockquote class="motto"><p>Text</p><footer>Quelle</footer></blockquote> */
.hrsu blockquote.motto{margin:8px 0 36px;padding:30px 24px;background:var(--grau-hell);border-radius:var(--rund);text-align:center}
.hrsu blockquote.motto p{margin:0;font-size:clamp(24px,3.2vw,34px);font-weight:var(--fett);line-height:1.25;color:var(--rot);text-transform:uppercase;letter-spacing:.04em}
.hrsu blockquote.motto footer{margin-top:10px;font-size:var(--gr-klein);color:var(--dunkel)}
/* TOLL-Grundsätze: <ul class="toll-liste"><li class="toll-…"><strong>T</strong>op …</li></ul> */
.toll-liste{list-style:none;margin:0 0 36px;padding:0;display:grid;gap:16px}
.toll-liste li{position:relative;margin:0;padding:22px 20px 20px 92px;min-height:96px;border:1px solid var(--grau-linie);border-radius:var(--rund);background:#fff;line-height:1.45}
.toll-liste li strong{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:var(--rund);background:var(--rot);color:#fff;font-size:30px;display:flex;align-items:center;justify-content:center}
.toll-liste li::after{content:"";position:absolute;right:16px;bottom:14px;width:34px;height:34px;opacity:.18;background:var(--dunkel);-webkit-mask:var(--sz) center/contain no-repeat;mask:var(--sz) center/contain no-repeat}
.toll-miteinander{--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='3'/%3E%3Ccircle cx='17' cy='8' r='2.5'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6M14 14.5c.9-.3 1.9-.5 3-.5 2.8 0 4 2 4 5'/%3E%3C/svg%3E")}
.toll-foerdern{--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M6 16v-4M11 16V8M16 16V4M20 9l-4-5-4 5'/%3E%3C/svg%3E")}
.toll-strategien{--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0 0 12 3z'/%3E%3C/svg%3E")}
.toll-kulturen{--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c-4-3-8-6-8-11a4 4 0 0 1 8-1 4 4 0 0 1 8 1c0 5-4 8-8 11z'/%3E%3C/svg%3E")}
@media (min-width:768px){.toll-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Profil-Kacheln (gleiche Gestaltung wie der Schnellzugriff), weitere Symbole */
.profil-liste{margin:0 0 28px}
@media (min-width:768px){.profil-liste{grid-template-columns:repeat(4,minmax(0,1fr))}.profil-liste li{border-bottom:1px solid var(--grau-linie)}.profil-liste li:nth-child(4n){border-right:0}.profil-liste li:last-child{border-right:1px solid var(--grau-linie)}}
.schnell-ganztag a::before{--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.schnell-bilingual a::before{--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h11v8H8l-3 3v-3H3z'/%3E%3Cpath d='M10 16v1h6l3 3v-3h2V9h-5'/%3E%3C/svg%3E")}
.schnell-it a::before{--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='11' rx='1.5'/%3E%3Cpath d='M2 19h20M10 9l-2 2 2 2M14 9l2 2-2 2'/%3E%3C/svg%3E")}
.schnell-musik a::before{--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E")}
.schnell-beruf a::before{--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 13h18'/%3E%3C/svg%3E")}
.schnell-reisen a::before{--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 3 2.5 15 0 18M12 3c-2.5 3-2.5 15 0 18'/%3E%3C/svg%3E")}
.schnell-kooperation a::before{--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E")}
.profil-hinweis{padding:14px 18px;background:var(--grau-hell);border-radius:var(--rund)}
/* TOLL als Akrostichon: großer roter Anfangsbuchstabe direkt am Wort, Buchstaben untereinander ergeben „TOLL“ */
.toll-liste{grid-template-columns:1fr!important;gap:0;border:1px solid var(--grau-linie);border-radius:var(--rund);background:#fff;padding:10px 0;position:relative;overflow:hidden}
.toll-liste::before{content:"TOLL";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:clamp(70px,11vw,130px);font-weight:900;letter-spacing:.04em;color:var(--rot);opacity:.07;line-height:1;pointer-events:none}
.toll-liste li{display:flex;align-items:center;gap:16px;min-height:0;padding:12px 24px;border:0;border-radius:0;background:none;font-size:calc(var(--gr-text) + 1px)}
.toll-liste li + li{border-top:1px dashed var(--grau-linie)}
.toll-liste li strong{position:static;transform:none;flex:none;width:auto;height:auto;background:none;color:var(--rot);font-size:46px;font-weight:900;line-height:1;margin-right:-14px;display:inline-block;min-width:38px;text-align:center}
.toll-liste li::after{position:static;order:-1;flex:none;width:30px;height:30px;opacity:1;background:var(--dunkel);margin-right:4px}
@media (max-width:600px){.toll-liste li{padding:10px 14px;gap:10px}.toll-liste li strong{font-size:36px;min-width:30px;margin-right:-8px}.toll-liste li::after{width:24px;height:24px}}
/* Motto: immer eine Zeile (ab Tablet), große Anführungszeichen */
.hrsu blockquote.motto{padding:34px 28px 26px}
.hrsu blockquote.motto p{display:inline-flex;align-items:flex-start;gap:.25em;font-size:clamp(20px,2.6vw,32px);letter-spacing:.03em}
.hrsu blockquote.motto p::before,.hrsu blockquote.motto p::after{font-size:2.2em;line-height:.7;color:var(--rot);opacity:.35;font-weight:900}
.hrsu blockquote.motto p::before{content:"„";align-self:flex-end;line-height:.2}
.hrsu blockquote.motto p::after{content:"“"}
@media (min-width:768px){.hrsu blockquote.motto p{white-space:nowrap}}
/* Motto: Anführungszeichen als Zierde in den Ecken (nicht im Textfluss) */
.hrsu blockquote.motto{position:relative;padding:34px 70px 26px}
.hrsu blockquote.motto p{display:block;gap:0}
.hrsu blockquote.motto p::before,.hrsu blockquote.motto p::after{content:none}
.hrsu blockquote.motto::before,.hrsu blockquote.motto::after{position:absolute;font-size:110px;line-height:1;font-weight:900;color:var(--rot);opacity:.18;font-family:Georgia,"Times New Roman",serif;pointer-events:none}
.hrsu blockquote.motto::before{content:"„";left:18px;bottom:6px}
.hrsu blockquote.motto::after{content:"“";right:18px;top:-6px}
@media (max-width:767px){.hrsu blockquote.motto{padding:30px 40px 22px}.hrsu blockquote.motto::before,.hrsu blockquote.motto::after{font-size:70px}}
/* Bild mit Bildunterschrift aus dem alten Editor (span.wf_caption): Bild oben, Text darunter */
.wf_caption{display:inline-flex;flex-direction:column;gap:8px;max-width:100%;font-size:var(--gr-klein);color:var(--dunkel)}
.wf_caption img{display:block;width:100%;height:auto;aspect-ratio:auto;border-radius:var(--rund)}
/* Zitat-Motto auch bei längeren Sätzen: ab Tablet eine Zeile nur, wenn es passt, sonst sauber umbrechen */
.hrsu blockquote.motto p{text-transform:none}
.hrsu .seite-inhalt blockquote.motto p{white-space:normal}
.hrsu blockquote.motto p{font-size:clamp(22px,2.6vw,30px)}

/* ---------- Bausteine für Inhaltsseiten (Unsere Schule u. a.) ---------- */
/* Bannerbild oben im Beitrag: <p class="banner-bild"><img …></p> */
.banner-bild{margin:0 0 24px}
.banner-bild img{display:block;width:100%;height:auto;max-height:260px;object-fit:cover;border-radius:var(--rund)}
/* Einleitung etwas größer: <p class="lead">…</p> */
.hrsu .seite-inhalt p.lead{font-size:calc(var(--gr-text) + 2px);line-height:1.6}
/* Personenkarten: <ul class="personen"><li><img …><strong>Name</strong><span>Funktion</span></li></ul> */
.personen{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.personen li{margin:0;display:flex;flex-direction:column;gap:4px}
.personen img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;border-radius:var(--rund);margin:0 0 8px;background:var(--grau-hell)}
.personen strong{font-size:var(--gr-text)}
.personen span{font-size:var(--gr-klein);color:var(--dunkel)}
.personen-gross img{aspect-ratio:4/3;object-position:50% 40%}
@media (min-width:768px){.personen{grid-template-columns:repeat(3,minmax(0,1fr))}.personen.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}}
.personen.ohne-bild li{border:1px solid var(--grau-linie);border-radius:var(--rund);padding:16px 18px}
/* Grauer Hinweis-/Infokasten: <div class="info-kasten">…</div> */
.info-kasten{background:var(--grau-hell);border-radius:var(--rund);padding:18px 22px;margin:0 0 24px}
.info-kasten > *:last-child{margin-bottom:0}
.info-kasten h2,.info-kasten h3{margin-top:0}
/* Karten nebeneinander im Text: <div class="karten-text"><div>…</div><div>…</div></div> */
.karten-text{display:grid;gap:18px;margin:0 0 24px}
.karten-text > div{border:1px solid var(--grau-linie);border-radius:var(--rund);padding:18px 20px}
.karten-text > div > *:last-child{margin-bottom:0}
.karten-text h3{margin-top:0}
@media (min-width:768px){.karten-text{grid-template-columns:repeat(2,minmax(0,1fr))}.karten-text.drei{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Übersichtliche Tabellen (Zeiten, Fächer, Kollegium): <table class="tabelle">…</table> */
.hrsu table.tabelle{border:1px solid var(--grau-linie);border-radius:var(--rund);border-collapse:separate;border-spacing:0;overflow:hidden;margin:0 0 24px}
.hrsu table.tabelle th{background:var(--grau-hell);font-weight:var(--fett)}
.hrsu table.tabelle td,.hrsu table.tabelle th{padding:9px 14px;border-bottom:1px solid var(--grau-linie)}
.hrsu table.tabelle tr:last-child td{border-bottom:0}
.hrsu table.tabelle tr.pause td{background:var(--grau-hell);font-style:italic;text-align:center}
.tabellen-paar{display:grid;gap:20px}
@media (min-width:900px){.tabellen-paar{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tabellen-paar h3{margin-top:0;font-size:var(--gr-h4)}
/* Kollegium als Spaltenliste: <ul class="kollegium"><li><a href="mailto:…">Name</a><span>Fächer</span></li></ul> */
.kollegium{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:0 28px}
.kollegium li{margin:0;padding:9px 0;border-bottom:1px solid var(--grau-linie);display:flex;flex-direction:column}
.kollegium a{font-weight:var(--fett);text-decoration:none}
.kollegium a:hover{text-decoration:underline}
.kollegium span{font-size:var(--gr-klein)}
@media (min-width:768px){.kollegium{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.kollegium{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Bild rechts neben dem Text: <img class="bild-rechts" …> */
.hrsu img.bild-rechts{float:right;max-width:40%;height:auto;margin:0 0 16px 24px}
.hrsu .seite-inhalt::after{content:"";display:table;clear:both}
/* Kleingedrucktes: <p class="klein">…</p> */
.hrsu p.klein{font-size:var(--gr-klein)}
/* Bankverbindung: <div class="bank">…</div> */
.bank{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;background:var(--grau-hell);border-radius:var(--rund);padding:18px 22px;margin:0 0 24px}
.bank img{width:120px;height:auto;border-radius:6px;background:#fff;padding:6px}
.bank p{margin:0;line-height:1.7}
/* Download-Rubriken: zwei Spalten ohne Lücken – kurze Rubriken lassen die nächste direkt darunter nachrücken */
@media (min-width:768px){
  .download-raster{display:block;columns:2;column-gap:18px}
  .download-gruppe{break-inside:avoid;margin:0 0 18px;display:inline-block;width:100%;box-sizing:border-box}
}
.personen li p{margin:4px 0 0;font-size:var(--gr-klein);line-height:1.6}
/* Startbild mit Text/Button AUF dem Bild (unten): <figure class="folie text-im-bild"> – für hohe Bilder (1800 × 1000) */
.folie.text-im-bild figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;background:linear-gradient(180deg,rgba(44,46,54,0) 0,rgba(44,46,54,.55) 100%)}
.folie.text-im-bild figcaption p,.folie.text-im-bild figcaption strong{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45)}
/* Pfeile senkrecht mittig im Slider (passt zu den Startbildern 1800 × 1000) */
.folien-steuerung{aspect-ratio:auto!important;top:0;bottom:0;height:auto}
/* Slider ohne Punkte; Pfeile senkrecht in der Mitte des Bildbereichs */
.folien-punkte{display:none!important}
.folien-steuerung{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;pointer-events:none}
/* Text auf dem Startbild: auf dem Handy unter dem Bild (sonst verdeckt längerer Text das Motiv) */
@media (max-width:767px){
  .folie.text-im-bild figcaption{position:static;background:none;padding:14px 16px 16px}
  .folie.text-im-bild figcaption p,.folie.text-im-bild figcaption strong{color:var(--dunkel);text-shadow:none}
}
@media (min-width:768px){.folie.text-im-bild figcaption p{max-width:70ch}}
/* PC: Startbild füllt den ganzen Rahmen (gleich hoch wie „Nächste Termine“), Ränder des Bildes werden minimal beschnitten */
@media (min-width:1100px){
  .buehne-raster.mit-kasten .folien{grid-template-rows:1fr;border:0}
  .buehne-raster.mit-kasten .folien-eintrag,.buehne-raster.mit-kasten .folien-eintrag > div,.buehne-raster.mit-kasten .folie{height:100%}
  .buehne-raster.mit-kasten .folie img{height:100%;object-fit:cover;object-position:50% 50%}
}
/* Text auf dem Bild: etwas kräftigerer Verlauf, damit auch längerer Text gut lesbar ist */
@media (min-width:768px){
  .folie.text-im-bild figcaption{padding:60px 24px 22px;background:linear-gradient(180deg,rgba(20,22,28,0) 0,rgba(20,22,28,.55) 35%,rgba(20,22,28,.78) 100%)}
}
/* Startbild-Text (gilt für alle Folien): Überschrift, Text, „weiterlesen“ als Textlink am Satzende */
.folie figcaption .folie-titel{font-size:clamp(19px,2vw,24px);margin:0 0 6px;color:inherit;line-height:1.25}
.folie.text-im-bild figcaption .folie-titel{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.folie figcaption .folie-link{font-weight:var(--fett);white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.folie.text-im-bild figcaption .folie-link{color:#fff}
.folie.text-im-bild figcaption .folie-link:hover,.folie.text-im-bild figcaption .folie-link:focus{color:#fff;text-decoration-thickness:2px}
.folie figcaption .folie-link::after{content:" ›"}
@media (max-width:767px){.folie.text-im-bild figcaption .folie-titel{color:var(--dunkel);text-shadow:none}.folie.text-im-bild figcaption .folie-link{color:var(--rot)}}
/* „weiterlesen“ steht direkt hinter dem letzten Wort, nicht allein in einer neuen Zeile */
@media (min-width:768px){.folie.text-im-bild figcaption p{max-width:none;padding-right:40px}}
.folie figcaption .folie-link{white-space:normal}

/* ===== Startbilder (Slider) – endgültiger Aufbau =====
   Oben das Foto (füllt die Fläche automatisch, jedes Querformat-Foto passt, keine Bildbearbeitung nötig),
   darunter ein fester Balken in Anthrazit mit Überschrift, Text und „weiterlesen“. Ohne Text nur das Foto. */
.folien,.buehne-raster.mit-kasten .folien{background:var(--dunkel);border:0;overflow:hidden}
.folien .folie,.folien .folie.text-im-bild{position:relative;inset:auto;display:flex;flex-direction:column;height:100%;margin:0;background:var(--dunkel)}
.folien .folie img{position:static;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 50%;border-radius:0;flex:none}
.folien .folie.text-im-bild figcaption,.folien .folie figcaption{position:static;flex:none;background:var(--dunkel);color:#fff;padding:16px 22px 18px;border:0}
.folien .folie.text-im-bild figcaption .folie-titel,.folien .folie.text-im-bild figcaption p,.folien .folie figcaption .folie-titel,.folien .folie figcaption p{color:#fff;text-shadow:none;max-width:none;padding-right:0}
.folien .folie.text-im-bild figcaption .folie-link,.folien .folie figcaption .folie-link{color:#fff}
.folien .folie figcaption p:last-child{margin-bottom:0}
@media (min-width:1100px){
  .buehne-raster.mit-kasten .folien{height:100%}
  .buehne-raster.mit-kasten .folien-eintrag,.buehne-raster.mit-kasten .folien-eintrag > div{height:100%}
  .buehne-raster.mit-kasten .folien .folie img{flex:1 1 0;min-height:0;height:auto;aspect-ratio:auto}
}
.folien-steuerung{bottom:auto;height:auto;aspect-ratio:16/9!important}
@media (min-width:1100px){.buehne-raster.mit-kasten .folien-steuerung{aspect-ratio:auto!important;bottom:0}}
/* Alle Startbilder gleich: Bildfläche im festen Format 16 : 7, darunter immer der dunkle Balken (mit oder ohne Text) */
.folien .folie img,.buehne-raster.mit-kasten .folien .folie img{flex:none;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;object-position:50% 50%}
.folien .folie figcaption{flex:1 0 auto}
.folien-steuerung,.buehne-raster.mit-kasten .folien-steuerung{top:0;bottom:auto!important;aspect-ratio:16/7!important;height:auto}
/* Folie ohne Text: kein Balken – das Foto füllt die ganze Fläche */
.folien .folien-eintrag,.folien .folien-eintrag > div{height:100%}
.folien .folie:not(:has(figcaption)) img,.buehne-raster.mit-kasten .folien .folie:not(:has(figcaption)) img{flex:1 1 auto;min-height:0;height:100%;aspect-ratio:auto}
@media (max-width:1099px){.folien .folie:not(:has(figcaption)) img{min-height:100%}}
/* PC: Foto ohne Text füllt genau den Rahmen neben „Nächste Termine“ (bestimmt nicht selbst die Höhe) */
@media (min-width:1100px){
  .buehne-raster.mit-kasten .folien .folie:not(:has(figcaption)) img{position:absolute;inset:0;width:100%;height:100%;min-height:0}
}
@media (max-width:1099px){.folien .folie:not(:has(figcaption)) img{aspect-ratio:16/9}}
/* „NEU“-Markierung hinter neuen Downloads */
.neu-marke{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:4px;background:var(--rot);color:#fff;font-size:12px;font-weight:var(--fett);line-height:1.5;letter-spacing:.04em;vertical-align:2px}
/* Einheitlicher Abstand unter dem Kopf auf allen Seiten (40 px); Startseite: Hauptüberschrift oben über dem Startbild */
.hrsu .start-kopf .start-titel{margin:var(--abstand) 0 20px;font-size:clamp(22px,2.6vw,var(--gr-h1))}
.buehne{padding-top:0}
.seite{padding-top:var(--abstand)}
.bereich-karten{padding-top:var(--abstand)}
/* Beitragstitel in Blog-Listen (Aktuelles, Presse, Schullandheime …) in Schulrot */
.hrsu .blog-item .page-header h2,.hrsu .blog-item .page-header h2 a,.hrsu .com-content-category-blog .page-header h2 a{color:var(--rot);text-decoration:none}
.hrsu .blog-item .page-header h2 a:hover,.hrsu .blog-item .page-header h2 a:focus{color:var(--rot-dunkel);text-decoration:underline;text-underline-offset:4px}
/* Startseite: Titel wieder unter dem Schnellzugriff; Abstand Kopf -> Startbild wie auf allen Seiten 40 px */
.buehne{padding-top:var(--abstand)}

/* Zitatkasten nie unter ein schwebendes Bild schieben */
.hrsu blockquote.motto{clear:both}

/* Fußzeile: Menüpunkt mit CSS-Klasse „schloss“ (Menüpunkt → Linktyp → CSS-Klasse für Link) zeigt nur ein Schloss.
   Der Menütitel bleibt für Screenreader erhalten, der Linktitel erscheint beim Darüberfahren. */
.fuss-unten a.schloss{display:inline-block;width:16px;height:16px;overflow:hidden;white-space:nowrap;text-indent:120%;vertical-align:-2px;background:currentColor;opacity:.7;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%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' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat}
.fuss-unten a.schloss:hover,.fuss-unten a.schloss:focus-visible{color:var(--rot);opacity:1}
.fuss-unten a.schloss{transform:translateY(3px)}

/* Dezente Effekte beim Darüberfahren: Karten heben sich leicht an, Bilder darin zoomen sanft.
   Bei „Bewegung reduzieren“ im Gerät aus. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .raster-karten .modul,.hrsu .blog-item{transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease}
  .raster-karten .modul:hover,.hrsu .blog-item:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(44,46,54,.10)}
  .raster-karten .modul img,.hrsu .blog-item .item-image img{transition:transform .5s ease}
  .raster-karten .modul:hover img,.hrsu .blog-item:hover .item-image img{transform:scale(1.04)}
  .hrsu .blog-item .item-image,.raster-karten .modul p:has(> img){overflow:hidden;border-radius:var(--rund)}
}

/* Frontend-Bearbeitung: Joomla setzt den Stift oben rechts in das nächste positionierte Element –
   jedes Modul ist dieser Rahmen, damit der Stift an seinem Modul erscheint. */
.hrsu .modul,.hrsu .moduletable,.hrsu .card{position:relative}
.fuss-links .mod-menu{position:relative}
.fuss-links .mod-menu > .jmodedit{left:auto;right:100%;margin-right:14px;top:50%;transform:translateY(-50%)}
/* Im Kopf verdecken die Stifte sonst Logo und Menü: dezent, beim Darüberfahren voll sichtbar */
.kopf .jmodedit{opacity:.3;transform:scale(.8);transform-origin:top right;transition:opacity .2s}
.kopf .jmodedit:hover,.kopf .jmodedit:focus-visible,.kopf :hover > .jmodedit{opacity:1}
/* Stifte im Inhalt unter dem festen Kopf (Kopf z-index 50) durchscrollen lassen */
.hrsu main .jmodedit,.hrsu .fuss .jmodedit,.hrsu .fuss-unten .jmodedit{z-index:40}
/* Offenes Schloss = Anmelden (Klasse „schloss-offen“), geschlossenes Schloss = Abmelden (Klasse „schloss“) */
.fuss-unten a.schloss-offen{display:inline-block;width:16px;height:16px;overflow:hidden;white-space:nowrap;text-indent:120%;vertical-align:-2px;background:currentColor;opacity:.7;transform:translateY(3px);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.75-1.4'/%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' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.75-1.4'/%3E%3C/svg%3E") center/contain no-repeat}
.fuss-unten a.schloss-offen:hover,.fuss-unten a.schloss-offen:focus-visible{color:var(--rot);opacity:1}
/* „Nach oben“-Knopf (fest unten rechts) soll am Seitenende das Schloss nicht verdecken */
@media (max-width:1400px){.fuss-unten .fuss-links{margin-right:56px}}
/* Hauptmenü: Stift öffnet nur die Moduleinstellungen (Menüpunkte bearbeitet man im Backend unter Menüs) – ausblenden */
.hauptmenue .jmodedit,.hauptmenue .jmodedit + [role="tooltip"]{display:none!important}

/* Link-Karten: Foto, Titel, Info – verlinken auf Beiträge. <ul class="link-karten"><li><a href="…"><img …><span class="link-karte-titel">…</span><span class="link-karte-info">…</span></a></li></ul> */
.hrsu .link-karten{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.hrsu .link-karten li{margin:0}
.hrsu .link-karten a{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--grau-linie);border-radius:var(--rund);overflow:hidden;text-decoration:none;color:var(--dunkel)}
.hrsu .link-karten img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;margin:0;border-radius:0}
.hrsu .link-karte-titel{display:block;padding:14px 16px 4px;font-weight:var(--fett);line-height:1.35;color:var(--rot)}
.hrsu .link-karte-info{display:block;padding:0 16px 14px;font-size:var(--gr-klein);color:var(--dunkel)}
.hrsu .link-karten a:hover .link-karte-titel,.hrsu .link-karten a:focus-visible .link-karte-titel{text-decoration:underline}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .hrsu .link-karten a{transition:transform .25s ease,box-shadow .25s ease}
  .hrsu .link-karten a:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(44,46,54,.10)}
  .hrsu .link-karten img{transition:transform .5s ease}
  .hrsu .link-karten a:hover img{transform:scale(1.04)}
}

/* Bewegungspause: Bild (Strichfigur), Überschrift, kurzer Text. <ul class="bewegung-liste"><li><img …><h3>…</h3><p>…</p></li></ul> */
.hrsu .bewegung-liste{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.hrsu .bewegung-liste li{margin:0;background:var(--grau-hell);border-radius:var(--rund);padding:16px;text-align:center}
.hrsu .bewegung-liste img{display:block;width:120px;height:120px;margin:0 auto 6px;background:#fff;border-radius:50%}
.hrsu .bewegung-liste h3{margin:0 0 6px;font-size:var(--gr-h3)}
.hrsu .bewegung-liste p{margin:0;font-size:var(--gr-klein);line-height:1.5}

/* Entwurf-Hinweis (nur Arbeitsnotiz für die Schule, wird bei Freigabe gelöscht) */
.hrsu .entwurf-hinweis{background:#FFF4B8;border:2px solid #E2B714;border-radius:var(--rund);padding:12px 16px;margin:0 0 18px;color:#2C2E36}
.hrsu .entwurf-hinweis p{margin:0}
/* Seitenleiste: Stifte dezent, damit sie den ersten Menüpunkt nicht verdecken */
.seite-sidebar .jmodedit{opacity:.3;transform:scale(.8);transform-origin:top right}
.seite-sidebar .jmodedit:hover,.seite-sidebar .jmodedit:focus-visible,.seite-sidebar :hover > .jmodedit{opacity:1}

/* Kachel vorübergehend ausblenden (z. B. Schulanmeldung außerhalb März): Klasse „ausgeblendet“ am <li> */
.schnell-liste li.ausgeblendet{display:none}
/* Kachel-Symbol Krankmeldung: Klemmbrett mit Kreuz */
.schnell-krank a::before{--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V2.5h6V4M12 9.5v6M9 12.5h6'/%3E%3C/svg%3E")}
/* Fußbereich: mehrere Knöpfe nebeneinander (Anfahrt, Office 365) mit Abstand, auch beim Umbrechen */
.fuss .btn{margin:0 6px 8px 0}
/* Kachel-Symbol Klassengeld: Geldbörse */
.schnell-geld a::before{--sz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h11v3'/%3E%3Cpath d='M20 11h-4a2 2 0 0 0 0 4h4z'/%3E%3C/svg%3E")}