/* Hanken Grotesk — freie Grotesk (OFL), Variable Font, selbst gehostet */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/hankengrotesk-var.woff2") format("woff2");
}

/* ==========================================================================
   HEID TECH DESIGN V2  —  zentraler Design-Layer
   Farb-Tokens, Typografie, Komponenten. Lädt nach UIkit und überschreibt es.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) DESIGN-TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Primärblau (interaktiv) --- */
  --ht-blue:            #0072BB;   /* Aktionsblau (CI-nah, bewusst dezent) */
  --ht-blue-hover:      #005A94;
  --ht-blue-deep:       #00346C;
  --ht-blue-text:       #006AAE;
  --ht-cyan-logo:       #58B8D8;   /* Corporate-Blau aus dem Logo (nur Solitär) */
  --ht-blue-bright:     #1A88FF;
  --ht-blue-light:      #5DB3FF;
  --ht-blue-pale:       #99D6FF;
  --ht-cyan:            #008BD0;

  /* --- Neutraltöne hell (kühl) --- */
  --ht-white:           #FFFFFF;
  --ht-light-01:        #F5F8FA;
  --ht-light-02:        #F2F5F8;
  --ht-light-03:        #ECF0F4;
  --ht-light-04:        #E6EBF0;
  --ht-light-05:        #DCE3E9;
  --ht-light-06:        #D1D9E1;
  --ht-light-07:        #C2CDD6;
  --ht-light-08:        #B4C0CA;

  /* --- Neutraltöne dunkel --- */
  --ht-dark-primary:    #0E0F11;
  --ht-dark-00:         #17191C;
  --ht-dark-01:         #202327;
  --ht-dark-02:         #292D32;
  --ht-dark-03:         #32373E;
  --ht-dark-05:         #4E565F;
  --ht-dark-07:         #6C7784;

  /* --- Text --- */
  --ht-text-headline:   #32373E;
  --ht-text-body:       #606A76;
  --ht-text-invert:     #F2F5F8;
  --ht-text-invert-body:#DCE3E9;

  /* --- Status --- */
  --ht-red:             #E71E1E;
  --ht-green:           #1E8565;
  --ht-yellow:          #FDCA3F;

  /* --- Radius --- */
  --ht-radius:          4px;
  --ht-radius-lg:       8px;

  /* --- Typografie --- */
  --ht-font: "Hanken Grotesk", "Work Sans", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --ht-fw-light:    300;
  --ht-fw-regular:  400;
  --ht-fw-medium:   500;
  --ht-fw-semibold: 600;
  --ht-fw-bold:     700;
}

/* --------------------------------------------------------------------------
   2) TYPOGRAFIE
   -------------------------------------------------------------------------- */
html {
  font-family: var(--ht-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--ht-font);
  font-weight: var(--ht-fw-regular);
  color: var(--ht-text-body);
  background: var(--ht-white);
  line-height: 1.6;
  letter-spacing: 0.005em;
}
/* Footer sitzt auch bei kurzen Seiten am unteren Fensterrand (kein weißer Streifen darunter) */
body.ht-design-v2 {
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  display: flex;
  flex-direction: column;
}
@supports (min-height: 100dvh) {
  body.ht-design-v2 { min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)); }
}
body.ht-design-v2 > #tm-main { flex: 1 0 auto; }
h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
.uk-heading-small, .uk-heading-medium, .uk-heading-large,
.uk-logo, .tm-heading-fragment {
  font-family: var(--ht-font);
  color: var(--ht-text-headline);
  font-weight: var(--ht-fw-bold);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
h1, .uk-h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
h2, .uk-h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
h3, .uk-h3 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem); font-weight: var(--ht-fw-semibold); }
h4, .uk-h4 { font-size: 1.25rem; font-weight: var(--ht-fw-semibold); }
h5, .uk-h5 { font-size: 1.0625rem; font-weight: var(--ht-fw-semibold); }
h6, .uk-h6 { font-size: 0.875rem; font-weight: var(--ht-fw-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ht-dark-07); }
p { color: var(--ht-text-body); }

.uk-text-lead {
  font-family: var(--ht-font);
  font-weight: var(--ht-fw-light);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.5;
  color: var(--ht-text-headline);
  letter-spacing: -0.005em;
}
.uk-text-primary  { color: var(--ht-blue) !important; }
.uk-text-muted    { color: var(--ht-dark-07) !important; }
.uk-text-emphasis { color: var(--ht-text-headline) !important; }

/* --------------------------------------------------------------------------
   3) LINKS
   -------------------------------------------------------------------------- */
a, .uk-link {
  color: var(--ht-blue-text);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover, .uk-link:hover, .uk-link-toggle:hover .uk-link, .uk-link-muted:hover {
  color: var(--ht-blue-hover);
  text-decoration: none;
}
.uk-link-muted { color: var(--ht-text-body); }

/* --------------------------------------------------------------------------
   4) BUTTONS
   -------------------------------------------------------------------------- */
.uk-button {
  font-family: var(--ht-font);
  font-weight: var(--ht-fw-semibold);
  text-transform: none;
  border-radius: var(--ht-radius);
  letter-spacing: 0;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  padding: 0 24px;
}
.uk-button-primary {
  background-color: var(--ht-blue);
  color: #fff;
  border: 1px solid var(--ht-blue);
}
.uk-button-primary:hover, .uk-button-primary:focus {
  background-color: var(--ht-blue-hover);
  border-color: var(--ht-blue-hover);
  color: #fff;
}
.uk-button-default {
  background-color: transparent;
  color: var(--ht-blue-text);
  border: 1px solid var(--ht-light-07);
}
.uk-button-default:hover, .uk-button-default:focus {
  background-color: var(--ht-light-02);
  border-color: var(--ht-blue);
  color: var(--ht-blue-hover);
}
.uk-button-secondary {
  background-color: var(--ht-dark-03);
  border: 1px solid var(--ht-dark-03);
  color: #fff;
}
.uk-button-secondary:hover { background-color: var(--ht-dark-01); border-color: var(--ht-dark-01); }
.uk-button-text {
  color: var(--ht-blue-text);
  text-transform: none;
  font-weight: var(--ht-fw-semibold);
}
.uk-button-text::before { border-bottom-color: var(--ht-blue); }
.uk-icon-button {
  background-color: var(--ht-light-03);
  color: var(--ht-text-headline);
  border-radius: 500px;
  transition: background-color .15s ease, color .15s ease;
}
.uk-icon-button:hover { background-color: var(--ht-blue); color: #fff; }

/* --------------------------------------------------------------------------
   5) FLÄCHEN / SECTIONS / CARDS
   -------------------------------------------------------------------------- */
.uk-section-default { background: var(--ht-white); }
.uk-section-muted   { background: var(--ht-light-01); }
.uk-section-primary { background: var(--ht-blue); color: #fff; }
.uk-section-secondary { background: var(--ht-dark-00); color: var(--ht-text-invert-body); }
.uk-background-primary { background-color: var(--ht-blue) !important; }
.uk-background-muted   { background-color: var(--ht-light-01) !important; }
.uk-card-default {
  border-radius: var(--ht-radius-lg);
  border: 1px solid var(--ht-light-04);
  box-shadow: none;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.uk-card-default:hover {
  box-shadow: 0 12px 30px -12px rgba(50,55,62,.25);
  border-color: var(--ht-light-06);
}
hr, .uk-hr { border-top: 1px solid var(--ht-light-05); }
.uk-divider-icon::before, .uk-divider-icon::after { border-top: 1px solid var(--ht-light-05); }
.uk-divider-icon { background-image: none; }

/* --------------------------------------------------------------------------
   6) ACCORDION
   -------------------------------------------------------------------------- */
.uk-accordion-title {
  font-family: var(--ht-font);
  font-weight: var(--ht-fw-semibold);
  font-size: 1.15rem;
  color: var(--ht-text-headline);
  padding: 18px 0;
  border-bottom: 1px solid var(--ht-light-05);
  transition: color .15s ease;
}
.uk-accordion-title:hover { color: var(--ht-blue); }
.uk-open > .uk-accordion-title { color: var(--ht-blue); }
.uk-accordion-content { color: var(--ht-text-body); padding-top: 6px; }

/* --------------------------------------------------------------------------
   7) NAVBAR / HEADER
   -------------------------------------------------------------------------- */
/* Schnellzugriff auf die Schul-Tools (WebUntis, GroupWise, …): bewusst gut
   lesbar und mit 44px hohen Klickflächen – wird vom Kollegium täglich genutzt. */
.ht-topbar {
  background: var(--ht-dark-00);
  color: var(--ht-text-invert-body);
  font-size: 0.9375rem;
  font-weight: var(--ht-fw-medium);
}
.ht-topbar > .uk-container { min-height: 44px; }
.ht-topbar nav { gap: 24px; }
.ht-topbar a { color: var(--ht-text-invert-body); }
.ht-topbar a:hover { color: #fff; }
.ht-topbar nav a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 639px) {
  .ht-topbar { font-size: .875rem; }
  .ht-topbar nav { gap: 14px; }
}
@media (max-width: 389px) {
  .ht-topbar { font-size: .8125rem; }
  .ht-topbar nav { gap: 10px; }
}
@media (max-width: 339px) {
  .ht-topbar { font-size: .75rem; }
  .ht-topbar nav { gap: 7px; }
}

/* Der Sticky-Wrapper (und damit Navbar + Dropdowns) liegt IMMER über dem
   Seiteninhalt. Ohne das erzeugt backdrop-filter einen Stacking-Context mit
   z-index:auto -> Hero-/Fokus-Ebenen (z-index 1-2) übermalen die Dropdowns
   und schlucken deren Klicks. */
[uk-sticky] {
  position: relative;
  z-index: 1090;
}
.ht-header {
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--ht-light-04);
  position: relative;
  z-index: 1090;
}
.ht-header .uk-navbar-nav > li > a {
  font-family: var(--ht-font);
  font-weight: var(--ht-fw-medium);
  font-size: 0.95rem;
  color: var(--ht-text-headline);
  text-transform: none;
  min-height: 72px;
  letter-spacing: 0;
  transition: color .15s ease;
  position: relative;
}
.ht-header .uk-navbar-nav > li > a:hover,
.ht-header .uk-navbar-nav > li.uk-active > a,
.ht-header .uk-navbar-nav > li:hover > a { color: var(--ht-blue); }
.ht-header .uk-navbar-nav > li.uk-active > a::after,
.ht-header .uk-navbar-nav > li.current-menu-item > a::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 2px;
  background: var(--ht-blue);
}
.ht-header .uk-logo img { height: 64px; width: auto; }
.ht-header .uk-navbar-nav > li > a { min-height: 88px; }

.uk-navbar-dropdown {
  border-radius: var(--ht-radius-lg);
  border: 1px solid var(--ht-light-04);
  box-shadow: 0 18px 40px -18px rgba(50,55,62,.35);
  padding: 20px 24px;
}
.uk-navbar-dropdown-nav > li > a { color: var(--ht-text-body); font-weight: var(--ht-fw-medium); }
.uk-navbar-dropdown-nav > li > a:hover,
.uk-navbar-dropdown-nav > li.uk-active > a { color: var(--ht-blue); }
.uk-navbar-dropdown-nav .uk-nav-header {
  color: var(--ht-dark-07);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
}
.uk-navbar-toggle { color: var(--ht-text-headline); }
.ht-header .uk-navbar-toggle { padding: 0 12px; margin-right: -12px; }   /* 44px Tippfläche, Symbol bleibt bündig */
.ht-header .uk-navbar-toggle:focus-visible { outline-offset: -2px; }       /* Ring nicht am Rand der Sticky-Leiste abgeschnitten */
.uk-navbar-toggle:hover { color: var(--ht-blue); }

/* --------------------------------------------------------------------------
   7b) MOBILES MENÜ (Off-Canvas unter 960px) — hell, Ausklapp-Bereiche
   Aufbau wie das frühere Schul-Menü: oben Suche + Schließen, darunter die
   Hauptpunkte; Bereiche klappen auf (site.js, immer nur einer offen).
   Alle Regeln mit #ht-offcanvas: UIkit gestaltet .uk-offcanvas-bar als dunkle
   Inverse-Fläche und würde Farben/Fokusring sonst überschreiben.
   -------------------------------------------------------------------------- */
#ht-offcanvas { z-index: 1210; left: 0; right: 0; }   /* über Sticky-Kopfleiste (1090) und Lesefortschritt (1200); volle Breite */
#ht-offcanvas .uk-offcanvas-bar {
  --uk-inverse: dark;
  width: 100%;
  right: -100%;                                  /* ganz außerhalb starten: gleichmäßiges Hereingleiten */
  padding: 0;
  background: var(--ht-light-01);
  color: var(--ht-text-headline);
  overscroll-behavior: contain;
  scroll-padding-top: 88px;                      /* per Tab fokussierte Links nicht unter der Suchzeile */
  touch-action: pan-y pinch-zoom;                /* Wischen nach rechts schließt das Menü statt „Zurück“ im Browser */
}
#ht-offcanvas.uk-open > .uk-offcanvas-bar { right: 0; }
#ht-offcanvas :focus-visible { outline: 2px solid var(--ht-blue); outline-offset: -2px; }

/* Kopfzeile: Suche + Schließen, bleibt beim Scrollen stehen */
#ht-offcanvas .ht-mtop {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  max-width: 40rem; margin: 0 auto;
  padding: 16px 20px;
  background: var(--ht-light-01);
}
#ht-offcanvas .ht-msearch { position: relative; flex: 1 1 auto; min-width: 0; margin: 0; }
#ht-offcanvas .ht-msearch__icon {
  position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--ht-text-body);
  pointer-events: none;
}
#ht-offcanvas .ht-msearch__input {
  box-sizing: border-box;
  width: 100%; height: 48px;
  padding: 0 16px 0 46px;
  border: 1px solid var(--ht-light-05);
  border-radius: 999px;
  background: var(--ht-white);
  font: inherit; font-size: 1rem;              /* 16px: kein Auto-Zoom auf iOS */
  color: var(--ht-text-headline);
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#ht-offcanvas .ht-msearch__input::placeholder { color: var(--ht-text-body); opacity: 1; }
#ht-offcanvas .ht-msearch__input:focus { outline: none; border-color: var(--ht-blue); box-shadow: 0 0 0 1px var(--ht-blue); }
#ht-offcanvas .ht-mclose {
  position: static; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: var(--ht-radius-lg);
  background: var(--ht-light-04);
  color: var(--ht-text-headline);
  cursor: pointer;
  transition: background-color .15s ease;
}
#ht-offcanvas .ht-mclose:hover { background: var(--ht-light-05); }

/* Hauptpunkte */
#ht-offcanvas .ht-mnav { max-width: 40rem; margin: 0 auto; padding: 4px 20px 48px; }
#ht-offcanvas .ht-mnav__root,
#ht-offcanvas .ht-mnav__list { list-style: none; margin: 0; padding: 0; }
#ht-offcanvas .ht-mnav__item { border-bottom: 1px solid var(--ht-light-05); }
#ht-offcanvas .ht-mnav__toggle,
#ht-offcanvas .ht-mnav__link {
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: calc(100% + 16px); min-height: 58px;
  margin: 0 -8px;                               /* 8px Luft für den Fokusring, Text bleibt bündig */
  padding: 14px 8px;
  border: 0; background: none;
  font: inherit; font-size: 1.25rem; line-height: 1.3;
  font-weight: var(--ht-fw-medium);
  color: var(--ht-text-headline);
  text-align: left; text-decoration: none;
  cursor: pointer;
  transition: color .15s ease;
}
#ht-offcanvas .ht-mnav__chevron { flex: none; color: var(--ht-text-body); transition: transform .28s ease, color .15s ease; }
#ht-offcanvas .ht-mnav__item.is-open > .ht-mnav__toggle .ht-mnav__chevron { transform: rotate(180deg); }

/* Ausklapp-Bereich: Höhe per Grid-Zeile 0fr -> 1fr; zu = nicht fokussierbar */
#ht-offcanvas .ht-mnav__sub {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .28s ease, visibility 0s linear .28s;
}
#ht-offcanvas .ht-mnav__item.is-open > .ht-mnav__sub {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .28s ease, visibility 0s;
}
#ht-offcanvas .ht-mnav__inner { min-height: 0; overflow: hidden; }
#ht-offcanvas .ht-mnav__list { padding: 0 0 18px 16px; }
#ht-offcanvas .ht-mnav__group {                /* „Organisation“, „Unterricht & Planung“ … */
  margin: 18px 0 2px;
  font-size: .8125rem;
  font-weight: var(--ht-fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ht-text-body);
}
#ht-offcanvas .ht-mnav__list > .ht-mnav__group:first-child { margin-top: 2px; }
#ht-offcanvas .ht-mnav__group a {             /* falls eine Gruppe eine eigene Seite hat */
  display: inline-block;
  margin: -4px 0 -4px -8px; padding: 4px 8px;
  color: inherit; text-decoration: none;
}
#ht-offcanvas .ht-mnav__sublink {
  display: block;
  margin-left: -8px;
  padding: 9px 8px;
  font-size: 1.0625rem; line-height: 1.35;
  color: var(--ht-text-headline);
  text-decoration: none;
  transition: color .15s ease;
}

/* „Hier bin ich“: aktuelle Seite + ihr Bereich in Aktionsblau */
#ht-offcanvas .ht-mnav__item.is-current > .ht-mnav__toggle,
#ht-offcanvas .ht-mnav__item.is-current > .ht-mnav__link,
#ht-offcanvas .ht-mnav__list > .is-current > .ht-mnav__sublink { color: var(--ht-blue-text); }
#ht-offcanvas .ht-mnav__item.is-current > .ht-mnav__toggle .ht-mnav__chevron { color: var(--ht-blue-text); }
#ht-offcanvas [aria-current="page"] { font-weight: var(--ht-fw-semibold); }
@media (hover: hover) {
  #ht-offcanvas .ht-mnav__toggle:hover,
  #ht-offcanvas .ht-mnav__link:hover,
  #ht-offcanvas .ht-mnav__sublink:hover,
  #ht-offcanvas .ht-mnav__group a:hover,
  #ht-offcanvas .ht-mnav__toggle:hover .ht-mnav__chevron { color: var(--ht-blue-hover); }
}
@media (prefers-reduced-motion: reduce) {
  #ht-offcanvas .uk-offcanvas-bar,
  #ht-offcanvas .ht-mnav__sub,
  #ht-offcanvas .ht-mnav__item.is-open > .ht-mnav__sub,
  #ht-offcanvas .ht-mnav__chevron { transition: none; }
}

/* --------------------------------------------------------------------------
   8) FOOTER  —  hell & ruhig: Tonstufen statt Linien
   Band 1 (Logo + Social) hellgrau, Band 2 (Schulträger/Kontakt/Bürozeiten)
   fast weiß, Band 3 (Copyright + Rechtliches) als schmale dunkle Leiste.
   Text nie schwarz, sondern Schiefergrau; Blau nur beim Hover.
   -------------------------------------------------------------------------- */
.ht-footer {
  background: var(--ht-light-01);
  color: var(--ht-text-body);
}
.ht-footer a { color: var(--ht-text-headline); }
.ht-footer a:hover { color: var(--ht-blue-hover); }
.ht-footer .uk-h5 { color: var(--ht-text-headline); margin: 0 0 14px; font-weight: var(--ht-fw-semibold); letter-spacing: .01em; }

/* Bänder */
.ht-footer-band--top  { background: var(--ht-light-04); padding: 28px 0; }
.ht-footer-band--main { background: var(--ht-light-01); padding: 48px 0 56px; }
.ht-footer-band--legal { background: var(--ht-dark-01); padding: 12px 0; }

/* Logo + Social-Links */
.ht-footer-top {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
}
.ht-footer-logo img { height: 64px; width: auto; margin: -10px 0; display: block; }   /* Originalfarben + Größe wie im Header; negativer Rand schluckt den transparenten PNG-Rand */
.ht-social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ht-social a {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--ht-light-07);
  border-radius: 50%;
  color: var(--ht-text-headline);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.ht-social a:hover { background: var(--ht-white); border-color: var(--ht-white); color: var(--ht-blue); transform: translateY(-2px); }

/* Schulträger · Kontakt · Bürozeiten (+ nach oben) */
.ht-footer-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 32px 48px;
  align-items: start;
}
.ht-footer-text { margin: 0; color: var(--ht-text-body); font-size: .95rem; line-height: 1.75; }
.ht-footer-text a {                          /* Tel./Mail im Ton der Adresse, dezent unterstrichen = als Link erkennbar */
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ht-light-07);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.ht-footer-text a:hover { color: var(--ht-blue-hover); text-decoration-color: currentColor; }
.ht-footer-day { color: var(--ht-text-headline); font-weight: var(--ht-fw-medium); }
.ht-footer-text .ht-footer-day ~ .ht-footer-day { display: inline-block; margin-top: 8px; }
.ht-carrier {
  display: inline-block;
  padding: 12px 16px;
  background: var(--ht-white);      /* weiße Karte mit Hauch Schatten, hebt das Wappen von der Fläche ab */
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
  box-shadow: 0 2px 8px rgba(25,25,25,.04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ht-carrier:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(50,55,62,.25); }
.ht-carrier img { display: block; width: 190px; max-width: 100%; height: auto; }
.ht-footer-totop a {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--ht-light-05);
  border-radius: 50%;
  background: var(--ht-white);
  color: var(--ht-text-headline);
  transition: border-color .2s ease, color .2s ease;
}
.ht-footer-totop a:hover { border-color: var(--ht-light-07); color: var(--ht-blue); }
@media (max-width: 959px) {
  .ht-footer-cols { grid-template-columns: 1fr 1fr; }
  .ht-footer-cols > div:first-child { grid-column: 1 / -1; }   /* Schulträger oben, Kontakt | Bürozeiten darunter */
  .ht-footer-totop { display: none; }
}
@media (max-width: 559px) {
  .ht-footer-cols { grid-template-columns: 1fr; gap: 28px; }
  .ht-footer-band--main { padding: 40px 0 44px; }
  .ht-footer-band--legal { padding: 14px 0; }
}
@media (min-width: 960px) and (max-width: 1023px) {
  .ht-footer-cols { column-gap: 32px; }                        /* „Montag, Dienstag und Donnerstag“ bleibt einzeilig */
}
@media (max-width: 359px) {
  .ht-footer-logo img { height: 52px; margin: -4px 0; }       /* Logo + 3 Social-Knöpfe bleiben in einer Zeile */
}
.ht-footer-bottom {
  gap: 4px 24px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ht-light-08);
}
.ht-footer-bottom a { color: var(--ht-text-invert-body); }
.ht-footer-bottom a:hover { color: var(--ht-white); text-decoration: underline; text-underline-offset: 3px; }
.ht-footer-band--legal :focus-visible { outline-color: var(--ht-blue-light); }

/* --------------------------------------------------------------------------
   9) FORMULARE
   -------------------------------------------------------------------------- */
.uk-input, .uk-select, .uk-textarea,
input[type="text"], input[type="email"], input[type="tel"], textarea {
  border-radius: var(--ht-radius);
  border: 1px solid var(--ht-light-06);
  background: var(--ht-white);
  color: var(--ht-text-headline);
}
.uk-input:focus, .uk-select:focus, .uk-textarea:focus, input:focus, textarea:focus {
  border-color: var(--ht-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,114,239,.15);
}

/* --------------------------------------------------------------------------
   10) HERO-VIDEO (Startseite)
   -------------------------------------------------------------------------- */
.ht-hero {
  position: relative;
  isolation: isolate;   /* interne z-Ebenen bleiben lokal (Dropdown-Schutz) */
  min-height: clamp(420px, 74vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ht-dark-00);
}
.ht-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.ht-hero__overlay {
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(14,15,17,.80) 0%, rgba(14,15,17,.48) 45%, rgba(14,15,17,.15) 100%);
}
.ht-hero__inner { position: relative; z-index: 2; color: #fff; padding: 40px 0; }

/* Runder Pause-/Play-Knopf oben rechts im Hero */
.ht-hero__pause {
  position: absolute;
  top: 22px; right: 22px;
  z-index: 3;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(14,15,17,.45);
  backdrop-filter: blur(5px);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.ht-hero__pause:hover {
  background: rgba(14,15,17,.7);
  border-color: #fff;
  transform: scale(1.06);
}
.ht-hero__pause .ht-hero__ico-play { display: none; }
.ht-hero__pause.is-paused .ht-hero__ico-pause { display: none; }
.ht-hero__pause.is-paused .ht-hero__ico-play { display: block; margin-left: 2px; }
.ht-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: var(--ht-fw-semibold);
  font-size: 0.8rem;
  color: rgba(255,255,255,.72);
  margin-bottom: 14px;
}
.ht-hero__title {
  color: #fff;
  font-weight: var(--ht-fw-bold);
  font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  max-width: 16ch;
}

/* --------------------------------------------------------------------------
   11) SCHULARTEN — KACHEL-GRID mit Glow + Klick-Aufklappen
   -------------------------------------------------------------------------- */
.ht-schularten { background: var(--ht-light-01); }

/* Responsives Foto-Card-Grid – kompakt, kein Überlappen */
.ht-tile-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 22px 20px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px)  { .ht-tile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px)  { .ht-tile-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .ht-tile-grid { grid-template-columns: repeat(5, 1fr); } }

/* Kachel = Foto oben, Bezeichnung DARUNTER */
.ht-tile {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--ht-text-headline);
  -webkit-appearance: none; appearance: none;
}
.ht-tile__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--ht-radius-lg);
  aspect-ratio: 4 / 3;
  background: var(--ht-light-04);
  box-shadow: 0 1px 2px rgba(50,55,62,.06);
  transition: box-shadow .25s ease;
}
.ht-tile__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
}
.ht-tile__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,25,28,0) 55%, rgba(23,25,28,.3) 100%);
  opacity: 0;
  transition: opacity .25s ease;
}
.ht-tile__label {
  margin-top: 12px;
  font-weight: var(--ht-fw-semibold);
  font-size: 0.98rem;
  line-height: 1.25;
  color: var(--ht-text-headline);
  display: flex; align-items: baseline; gap: 6px;
  transition: color .18s ease;
}
.ht-tile__label::after {
  content: "\2192";  /* → */
  color: var(--ht-dark-07);
  font-weight: var(--ht-fw-bold);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease;
}

/* Hover / aktiv: dezent neutral – sanfter Zoom, feiner grauer Rahmen,
   weicher neutraler Schatten. Blau bleibt den echten Akzenten vorbehalten. */
.ht-tile:hover .ht-tile__img,
.ht-tile:focus-visible .ht-tile__img,
.ht-tile.is-active .ht-tile__img { transform: scale(1.05); }

.ht-tile:hover .ht-tile__media,
.ht-tile:focus-visible .ht-tile__media {
  box-shadow: 0 0 0 1px var(--ht-light-07), 0 14px 30px -14px rgba(50,55,62,.3);
  outline: none;
}
.ht-tile:hover .ht-tile__label::after,
.ht-tile:focus-visible .ht-tile__label::after,
.ht-tile.is-active .ht-tile__label::after { opacity: 1; transform: translateX(0); }

.ht-tile.is-active .ht-tile__media {
  box-shadow: 0 0 0 1px var(--ht-light-08), 0 16px 34px -16px rgba(50,55,62,.38);
}
.ht-tile.is-active .ht-tile__media::after { opacity: 1; }

/* ---- Detail-Panel: hidden-Attribut ist Single-Source-of-Truth ---- */
.ht-panels { display: block; }
.ht-panel[hidden] { display: none !important; }   /* geschlossen */
.ht-panel {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--ht-white);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 54px -26px rgba(50,55,62,.45);
  animation: ht-panel-in .3s ease both;
}
@media (min-width: 840px) { .ht-panel { grid-template-columns: 1.05fr 1fr; } }
@keyframes ht-panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ht-panel__media { position: relative; min-height: 240px; background: var(--ht-light-04); }
.ht-panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ht-panel__body { padding: clamp(26px, 3vw, 48px); }
.ht-panel__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: var(--ht-fw-semibold);
  color: var(--ht-dark-07);
  margin-bottom: 10px;
}
.ht-panel__title { margin: 0 0 14px; }
.ht-panel__text { color: var(--ht-text-body); font-size: 1.05rem; margin-bottom: 22px; }
.ht-panel__links { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.ht-panel__foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.ht-panel__close {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--ht-dark-07); font-weight: var(--ht-fw-medium);
}
.ht-panel__close:hover { color: var(--ht-blue); }

/* --------------------------------------------------------------------------
   12) LESEFORTSCHRITT (global, site.js)
   -------------------------------------------------------------------------- */
.ht-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 1200;              /* über der Sticky-Navbar */
  background: transparent;
  pointer-events: none;
}
.ht-progress > span {
  display: block;
  height: 100%;
  background: var(--ht-blue);
  transform: scaleX(0);
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   13) INHALTS-TABS (Schulart-Seiten, vom Content-Transformer erzeugt)
   -------------------------------------------------------------------------- */
.ht-tabs { margin: 8px 0 40px; }

/* Ruhige Unterstrich-Tabs. Alle Einträge sind IMMER sichtbar –
   bei vielen (Berufsschule: 10) bricht die Leiste sauber in weitere Zeilen um. */
.ht-subnav {
  display: flex; flex-wrap: wrap; gap: 0 2px;
  margin: 0 0 30px; padding: 0;
  border-bottom: 1px solid var(--ht-light-05);
}
.ht-subnav > li { padding: 0; flex: none; }
.ht-subnav > li > a {
  display: block;
  white-space: nowrap;
  padding: 11px 16px 13px;
  background: none;
  border-radius: 0;
  color: var(--ht-text-body);
  font-weight: var(--ht-fw-medium);
  font-size: 0.95rem;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.ht-subnav > li > a:hover {
  color: var(--ht-text-headline);
  border-bottom-color: var(--ht-light-07);
}
.ht-subnav > li.uk-active > a {
  color: var(--ht-text-headline);
  font-weight: var(--ht-fw-semibold);
  border-bottom-color: var(--ht-blue);
}
/* Lange Tab-Labels (Berufsnamen) dürfen umbrechen, statt die Seite zu verbreitern.
   Alle Tabs bleiben sichtbar (flex-wrap); ein Label bricht nur um, wenn es
   ALLEIN breiter als die Zeile wäre – Desktop bleibt unverändert. */
.ht-subnav > li { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.ht-subnav.uk-subnav > li > a { white-space: normal; overflow-wrap: break-word; }

.ht-switcher { list-style: none; margin: 0; padding: 0; }
.ht-switcher > li { margin: 0; }
.ht-switcher--single > li { display: block; }

/* Feature-Kopf: Foto mit Caption-Kasten AUF dem Bild (kein statischer Kasten mehr) */
.ht-feature__media {
  position: relative;
  isolation: isolate;   /* Fokus-Rahmen (z-index 2) bleibt lokal im Bild */
  border-radius: var(--ht-radius-lg);
  overflow: hidden;
  background: var(--ht-light-04);
}
.ht-feature__media > img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
@media (max-width: 639px) { .ht-feature__media > img { aspect-ratio: 4 / 3; } }
.ht-feature__caption {
  position: absolute;
  left: clamp(14px, 3vw, 36px);
  bottom: clamp(14px, 3vw, 36px);
  max-width: min(78%, 560px);
  background: rgba(255,255,255,.95);   /* bewusst ohne backdrop-filter: müsste über dem */
  border-left: 4px solid var(--ht-blue); /* zoomenden Foto jeden Frame neu rechnen      */
  border-radius: var(--ht-radius);
  padding: 16px 22px;
  box-shadow: 0 14px 34px -16px rgba(14,15,17,.5);
  animation: ht-cap-in .5s ease both;
}
@keyframes ht-cap-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ht-feature__kicker {
  margin: 0 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: var(--ht-fw-semibold);
  color: var(--ht-dark-07);
}
.ht-feature__title {
  margin: 0;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.7rem);
  line-height: 1.15;
}
.ht-feature__body {
  max-width: 62rem;
  padding: 26px 2px 4px;
  font-size: 1.02rem;
}
/* Einzel-Hero auf Seiten ohne Tab-Leiste (AVdual, VABO, BKFH …) */
.ht-feature__media--page { margin: 6px 0 30px; }
/* Einzel-Hero-Seiten: Intro + Kapitel so schmal wie der Panel-Body der Tab-Seiten */
.ht-feature__media--page ~ div,
.ht-sections { max-width: 62rem; }
.ht-sections { margin-top: 18px; }

/* --- FOKUS-EFFEKT: blauer Sucherrahmen zoomt aufs Motiv (rechte Person) ---
   Startet bildschirmfüllend und zieht sich auf ~1/3 rechts oben zusammen.
   Läuft bei jedem Tab-Wechsel neu (display:none -> block startet die Animation). */
.ht-focus {
  position: absolute;
  /* Ecke-schatten.webp = 800×526-Rahmen + 8 px Rand für den Schatten (816×542):
     Rand über negative Lage/Übergröße ausgleichen -> Linien sitzen wie bisher */
  left: -1%;
  top: -1.5209%;
  width: 102%;
  height: 103.0418%;
  pointer-events: none;
  z-index: 2;
  opacity: .95;
  transform-origin: center;
  /* Schatten für Kontrast auf hellen Flächen ist in Ecke-schatten.webp eingebacken:
     ein filter auf der animierten Ebene kostet ohne GPU jeden Frame Rechenzeit. */
  animation: ht-focus-in 2s cubic-bezier(.45,.05,.2,1) .35s both;
}
@keyframes ht-focus-in {
  0%   { transform: translate(0, 0) scale(1); opacity: .55; }
  45%  { opacity: .95; }
  100% { transform: translate(var(--ht-fx, 21%), var(--ht-fy, -9%)) scale(.34); opacity: .95; }
}
/* Das Foto zieht dabei leicht auf – wie ein Objektiv, das scharf stellt
   (nur transform: läuft auf der GPU bzw. im Compositor, kein Neuzeichnen) */
.ht-feature__media > img:not(.ht-focus) {
  animation: ht-photo-settle 2s cubic-bezier(.45,.05,.2,1) .35s both;
}
@keyframes ht-photo-settle {
  from { transform: scale(1.1); }
  to   { transform: scale(1); }
}
/* Caption erscheint, sobald der Fokus sitzt */
.ht-feature__caption { animation-delay: 1.7s; }
/* Warten aufs Foto: site.js entfernt ht-anim-wait nach load+decode (nur mit JS) */
.ht-js .ht-anim-wait > .ht-focus,
.ht-js .ht-anim-wait > img,
.ht-js .ht-anim-wait > .ht-feature__caption { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ht-focus, .ht-feature__media > img:not(.ht-focus), .ht-feature__caption { animation: none; }
  .ht-focus { transform: translate(var(--ht-fx, 21%), var(--ht-fy, -9%)) scale(.34); }
}
.ht-feature__body > div > div { margin-bottom: 14px; }

/* --------------------------------------------------------------------------
   14) BILDUNGSNAVI
   -------------------------------------------------------------------------- */
.wks-bildungsnavi-button,
#bildungsnavi-button {
  background: var(--ht-blue);
  color: #fff;
  border: 1px solid var(--ht-blue);
  border-radius: var(--ht-radius);
  font-weight: var(--ht-fw-semibold);
  text-transform: none;
  padding: 0 26px;
  box-shadow: 0 10px 26px -10px rgba(0,114,239,.5);
}
#bildungsnavi-button::after { content: " \25BE"; font-size: .85em; }
#bildungsnavi-button:hover { background: var(--ht-blue-hover); border-color: var(--ht-blue-hover); color: #fff; }

.wks-bildungsnavi-nav .uk-nav-header {
  color: var(--ht-dark-07);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
.wks-bildungsnavi-nav > li > a {
  padding: 8px 10px;
  border-radius: var(--ht-radius);
  color: var(--ht-text-headline);
  font-weight: var(--ht-fw-medium);
  cursor: pointer;
}
.wks-bildungsnavi-nav > li > a:hover { background: var(--ht-light-02); color: var(--ht-blue); }

.ht-navi-switcher { list-style: none; margin: 26px 0 0; padding: 0; }
.ht-navi-switcher > li { margin: 0; }
/* Panel-Titel ("Startseite", "mittlere Reife" …) steckt schon im Button-Text */
.ht-navi-switcher > li > h3:first-of-type { display: none; }
/* Weg-Buttons: volle Breite, linksbündig, mit Pfeil – wie die Vorlage */
.ht-navi-switcher .uk-button {
  width: 100%;
  max-width: 720px;
  text-align: left;
  white-space: normal;
  line-height: 1.4;
  padding: 12px 20px;
  display: block;
  margin: 6px 0;
}
.ht-navi-switcher .uk-button::after { content: " →"; color: var(--ht-blue); }
.ht-navi-switcher .uk-text-lead { margin-bottom: 18px; }

/* Antwort-Kacheln des Navis (Klassen aus dem Alt-Content) */
.wks-schularten-sub-button {
  border-radius: var(--ht-radius-lg);
  border: 1px solid var(--ht-light-04);
  background: var(--ht-white);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.wks-schularten-sub-button:hover {
  background: var(--ht-white);
  border-color: var(--ht-blue);
  box-shadow: 0 0 0 1px var(--ht-blue), 0 12px 28px -12px rgba(0,114,239,.5);
  transform: translateY(-3px);
}
.wks-schularten-sub-icon { filter: grayscale(100%) opacity(.75); transition: filter .2s ease; }
.wks-schularten-sub-button:hover .wks-schularten-sub-icon { filter: none; }
.wks-schularten-sub-text { font-weight: var(--ht-fw-medium); font-size: .9rem; }

/* --------------------------------------------------------------------------
   15) INHALTS-GRUNDREGELN & DIVERSES
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 96px; }        /* Anker landen nicht unter der Sticky-Navbar */

/* Bilder im Fließtext ruhig und gerundet */
.ht-page-content img:not(.ht-tile__img):not(.ht-feature__media > img) {
  border-radius: var(--ht-radius-lg);
  height: auto;
}

::selection { background: var(--ht-blue); color: #fff; }
.progress-bar, .thumbnail-progress-bar { background: var(--ht-blue) !important; }
.progress-container, .thumbnail-progress-container { background: var(--ht-light-05); }
:focus-visible { outline: 2px solid var(--ht-blue); outline-offset: 2px; }
.uk-container { max-width: 1340px; }

/* Sicherheitsnetze: überlange „Wörter“ (URLs,  -Ketten) brechen um, statt die Seite zu verbreitern */
.ht-page-content { overflow-wrap: break-word; }
.uk-card { overflow-wrap: anywhere; }
/* Text-Button („Weiterlesen“) bündig zum Kartentext – .uk-button{padding:0 24px} überschreibt sonst UIkits padding:0 */
.uk-button-text { padding: 0; }

/* --------------------------------------------------------------------------
   16) MEGA-DROPDOWN (3-Ebenen-Menü: Gruppen-Header + Links)
   -------------------------------------------------------------------------- */
.uk-navbar-dropdown-nav .uk-nav-header {
  margin-top: 18px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ht-light-04);
}
.uk-navbar-dropdown-nav > li:first-child.uk-nav-header,
.uk-navbar-dropdown-nav > .uk-nav-header:first-child { margin-top: 0; }
/* Mega-Dropdown: jede Themen-Gruppe (Organisation, Unterricht & Planung …)
   bekommt ihre eigene Spalte */
.ht-mega {
  width: max-content;
  max-width: calc(100vw - 40px);
  padding: 26px 32px 28px;
}
.ht-mega__grid {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.ht-mega__grid > ul {
  margin: 0;
  min-width: 165px;
  flex: 0 0 auto;
}
.ht-mega__grid > ul:empty { display: none; }  /* Spalten-Rest vor der ersten Gruppe */
.ht-mega__grid > ul > .uk-nav-header:first-child { margin-top: 0; }
.ht-mega .uk-navbar-dropdown-nav > li > a { padding: 5px 0; }

/* --------------------------------------------------------------------------
   17) KONTAKT-SEITE + FORMULARE (Contact Form 7)
   -------------------------------------------------------------------------- */
.ht-contact-card {
  background: var(--ht-white);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
  overflow: hidden;
  height: 100%;
}
.ht-contact-card__body { padding: 28px 30px; }
.ht-contact-card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.ht-contact-line {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ht-light-03);
  color: var(--ht-text-body);
}
.ht-contact-line:last-child { border-bottom: 0; }
.ht-contact-line .uk-icon { color: var(--ht-blue); flex: none; margin-top: 2px; }
.ht-hours th { text-transform: none; font-size: .95rem; color: var(--ht-text-headline); font-weight: var(--ht-fw-semibold); }
.ht-hours td { color: var(--ht-text-body); }
.ht-map-frame {
  width: 100%; height: 100%; min-height: 320px; border: 0; display: block;
  filter: grayscale(35%) contrast(1.02);
}

/* --------------------------------------------------------------------------
   17b) HISTORIE-TIMELINE (Bild links, Jahr + Text rechts, Einflug via scrollspy)
   -------------------------------------------------------------------------- */
.ht-timeline {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 12px 0 44px;
  max-width: 72rem;
}
.ht-tl-item {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
  background: var(--ht-white);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
  overflow: hidden;
}
@media (max-width: 767px) { .ht-tl-item { grid-template-columns: 1fr; } }
.ht-tl-media img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
}
.ht-tl-body { padding: 24px 28px 24px 0; }
@media (max-width: 767px) { .ht-tl-body { padding: 0 22px 22px; } }
.ht-tl-body h3 {
  color: var(--ht-text-headline);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.ht-tl-body p { margin: 0; color: var(--ht-text-body); }

/* --------------------------------------------------------------------------
   17b2) KENNZAHLEN, LEITBILD, INHALTS-VIDEO (vom Content-Transformer erzeugt)
   -------------------------------------------------------------------------- */
.ht-video {
  margin: 8px 0 56px;
  border-radius: var(--ht-radius-lg);
  overflow: hidden;
  background: var(--ht-dark-00);
}
.ht-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }

.ht-stats { display: grid; gap: 16px; margin: 24px 0 56px; }
.ht-stats__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.ht-stat {
  background: var(--ht-white);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
  padding: 30px 18px 26px;
  text-align: center;
}
.ht-stat__num {
  display: block;
  color: var(--ht-text-headline);
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.1rem);
  font-weight: var(--ht-fw-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; /* keine Breitensprünge beim Hochzählen */
}
.ht-stat__label { display: block; margin-top: 10px; color: var(--ht-text-body); font-size: .98rem; }
@media (max-width: 639px) {
  .ht-stats__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  /* ungerade Anzahl: letzte Kachel über beide Spalten statt allein links */
  .ht-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.ht-stats__grid--minor .ht-stat { background: var(--ht-light-01); padding: 20px 14px 18px; }
.ht-stats__grid--minor .ht-stat__num { font-size: 1.9rem; }
.ht-stats__grid--minor .ht-stat__label { font-size: .88rem; }
@media (max-width: 359px) {   /* „Schulsekretärinnen“ passt sonst nicht in die Kachel -> Seite zu breit */
  .ht-stats__grid--minor .ht-stat { padding-left: 6px; padding-right: 6px; }
  .ht-stats__grid--minor .ht-stat__label { font-size: .8rem; }
}

/* Bild-Text-Reihen im Zickzack (Schulpartner, SMV …) */
.ht-rows { display: flex; flex-direction: column; gap: 32px; margin: 8px 0 24px; }
.ht-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: stretch;
  background: var(--ht-white);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
  overflow: hidden;
}
.ht-row--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ht-row--flip .ht-row__media { order: 2; }
.ht-row__media { position: relative; min-height: 280px; }
.ht-row__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
}
/* Logos/Grafiken: ganz zeigen, klein, auf ruhiger Fläche */
.ht-row__media--logo {
  display: flex; align-items: center; justify-content: center;
  background: var(--ht-light-01);
  padding: 32px;
}
.ht-row__media--logo img {
  position: static;
  width: auto; height: auto;
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
}
.ht-row__body { padding: clamp(24px, 3vw, 44px); }
.ht-row__kicker {
  margin: 0 0 6px;
  color: var(--ht-dark-07);
  font-size: .8rem;
  font-weight: var(--ht-fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ht-row__title {
  margin: 0 0 16px;
  color: var(--ht-text-headline);
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem);
  line-height: 1.25;
}
.ht-row__body p { color: var(--ht-text-body); line-height: 1.65; }
.ht-row__body p:last-child { margin-bottom: 0; }
.ht-row__body .uk-text-lead { font-size: .95rem; color: var(--ht-dark-07); }
@media (max-width: 959px) {
  .ht-row, .ht-row--flip { grid-template-columns: 1fr; }
  .ht-row--flip .ht-row__media { order: 0; }
  .ht-row__media { min-height: 0; }
  .ht-row__media img { position: static; height: auto; aspect-ratio: 4 / 3; }
  .ht-row__media--logo img { max-height: 220px; aspect-ratio: auto; }
}

/* --- Unterrichtszeiten: Zeitleiste + Seitenleiste --- */
.ht-day { list-style: none; margin: 0; padding: 0; position: relative; }
.ht-day::before {                     /* durchgehende Leitlinie hinter den Nummern */
  content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px;
  width: 2px; background: var(--ht-light-04);
}
.ht-slot {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  padding: 14px 20px 14px 0;
  margin: 0 0 8px;
  background: var(--ht-white);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.ht-slot__no {
  position: relative; z-index: 1;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--ht-light-02);
  color: var(--ht-text-headline);
  font-weight: var(--ht-fw-bold);
  font-variant-numeric: tabular-nums;
}
.ht-slot__main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ht-slot__time {
  color: var(--ht-text-headline);
  font-size: 1.15rem;
  font-weight: var(--ht-fw-semibold);
  font-variant-numeric: tabular-nums;
}
.ht-slot__time small { font-size: .8em; font-weight: var(--ht-fw-regular); color: var(--ht-dark-07); }
.ht-slot__meta { color: var(--ht-dark-07); font-size: .88rem; }
.ht-slot__now {
  display: none;
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ht-blue);
  color: #fff;
  font-size: .78rem;
  font-weight: var(--ht-fw-semibold);
}
.ht-slot__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; display: none; }
.ht-slot__bar > span { display: block; height: 100%; width: 0; background: var(--ht-blue); }

.ht-slot--break { background: var(--ht-light-01); border-style: dashed; }
.ht-slot--break .ht-slot__no { background: var(--ht-white); border: 1px solid var(--ht-light-05); color: var(--ht-dark-07); }
.ht-slot--break .ht-slot__time { font-size: 1rem; }

.ht-gap {
  position: relative;
  margin: -2px 0 6px 64px;
  color: var(--ht-dark-07);
  font-size: .75rem;
  letter-spacing: .02em;
}
/* Live-Zustände (site.js) */
.ht-slot.is-past { opacity: .55; }
.ht-slot.is-now { border-color: var(--ht-blue); box-shadow: 0 10px 26px -14px rgba(0,114,187,.45); opacity: 1; }
.ht-slot.is-now .ht-slot__no { background: var(--ht-blue); color: #fff; border-color: var(--ht-blue); }
.ht-slot.is-now .ht-slot__now,
.ht-slot.is-now .ht-slot__bar { display: block; }

.ht-aside { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 16px; }
.ht-card {
  background: var(--ht-white);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
  padding: 24px;
}
.ht-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  margin: 12px 0 0;
  background: var(--ht-light-04);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius);
  overflow: hidden;
}
.ht-facts > div { background: var(--ht-white); padding: 14px 16px; }
.ht-facts dt { color: var(--ht-dark-07); font-size: .8rem; font-weight: var(--ht-fw-regular); }
.ht-facts dd {
  margin: 2px 0 0;
  color: var(--ht-text-headline);
  font-size: 1.5rem;
  font-weight: var(--ht-fw-bold);
  font-variant-numeric: tabular-nums;
}
.ht-facts dd small { font-size: .55em; font-weight: var(--ht-fw-medium); color: var(--ht-dark-07); }
.ht-daystatus {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: var(--ht-radius);
  background: var(--ht-light-01);
  color: var(--ht-text-headline);
  font-size: .95rem;
}
.ht-daystatus::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px;
  border-radius: 50%; background: var(--ht-light-08); vertical-align: 1px;
}
.ht-daystatus.is-live::before { background: var(--ht-green); box-shadow: 0 0 0 4px rgba(30,133,101,.18); }
.ht-card--note { display: flex; gap: 14px; background: var(--ht-light-01); }
.ht-card__icon { flex: none; color: var(--ht-dark-07); margin-top: 2px; }
.ht-card__text, .ht-card__text p { color: var(--ht-text-body); font-size: .95rem; line-height: 1.6; margin: 0; }
.ht-card--link {
  display: flex; align-items: center; gap: 14px;
  color: inherit; text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ht-card--link:hover { border-color: var(--ht-light-07); box-shadow: 0 12px 26px -16px rgba(50,55,62,.35); text-decoration: none; color: inherit; }
.ht-card--link > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; }
.ht-card--link strong { color: var(--ht-text-headline); }
.ht-card--link > span:nth-child(2) > span { color: var(--ht-dark-07); font-size: .88rem; }
.ht-card__arrow, .ht-service__arrow, .ht-file__dl { flex: none; color: var(--ht-blue); transition: transform .2s ease; }
.ht-card--link:hover .ht-card__arrow, .ht-service:hover .ht-service__arrow { transform: translateX(4px); }
@media (max-width: 959px) { .ht-aside { position: static; } }

/* --- Stundenpläne: Online-Karten, Schuljahres-Downloads, Querverweis --- */
.ht-service {
  display: flex; align-items: center; gap: 18px;
  height: 100%; box-sizing: border-box;
  padding: 24px;
  background: var(--ht-white);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
  color: inherit; text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ht-service:hover { border-color: var(--ht-light-07); box-shadow: 0 14px 30px -16px rgba(50,55,62,.35); transform: translateY(-2px); text-decoration: none; color: inherit; }
.ht-service__icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--ht-light-02); color: var(--ht-text-headline);
}
.ht-service__body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ht-service__body strong { color: var(--ht-text-headline); font-size: 1.15rem; }
.ht-service__body span { color: var(--ht-text-body); font-size: .92rem; line-height: 1.5; }

.ht-yearcard {
  height: 100%; box-sizing: border-box;
  padding: 8px 8px 12px;
  background: var(--ht-white);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
}
.ht-yearcard--current { border-color: var(--ht-light-07); box-shadow: 0 14px 30px -20px rgba(50,55,62,.35); }
.ht-yearcard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 12px; }
.ht-badge {
  padding: 3px 10px; border-radius: 999px;
  background: var(--ht-text-headline); color: #fff;
  font-size: .75rem; font-weight: var(--ht-fw-semibold); letter-spacing: .02em;
}
.ht-file {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-radius: var(--ht-radius);
  color: inherit; text-decoration: none;
  transition: background-color .15s ease;
}
.ht-file + .ht-file { border-top: 1px solid var(--ht-light-03); }
.ht-file:hover { background: var(--ht-light-01); text-decoration: none; color: inherit; }
.ht-file:hover .ht-file__dl { transform: translateY(2px); }
.ht-file__icon { flex: none; color: var(--ht-dark-07); }
.ht-file__body { display: flex; flex-direction: column; flex: 1; }
.ht-file__body strong { color: var(--ht-text-headline); font-weight: var(--ht-fw-semibold); }
.ht-file__body span { color: var(--ht-dark-07); font-size: .82rem; }

.ht-crosslink {
  display: flex; align-items: center; gap: 24px;
  padding: 0 28px 0 0;
  background: var(--ht-light-01);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
  overflow: hidden;
  color: inherit; text-decoration: none;
}
.ht-crosslink:hover { text-decoration: none; color: inherit; border-color: var(--ht-light-07); }
.ht-crosslink img { width: 150px; height: 130px; object-fit: cover; object-position: 60% 30%; flex: none; border-radius: 0 !important; }
.ht-crosslink__body { display: flex; flex-direction: column; gap: 2px; flex: 1; padding: 20px 0; }
.ht-crosslink__body strong { color: var(--ht-text-headline); font-size: 1.2rem; }
.ht-crosslink__body > span:last-child { color: var(--ht-text-body); }
@media (max-width: 639px) {
  .ht-crosslink { flex-direction: column; align-items: stretch; gap: 14px; padding: 0 0 20px; }
  .ht-crosslink img { width: 100%; height: 150px; max-height: 150px; }
  .ht-crosslink__body { padding: 0 20px; }
  .ht-crosslink .uk-button { margin: 0 20px; }
}

/* --- Team-/Dienst-Karten (BUS, SMV) --- */
.ht-chipnav { display: flex; flex-wrap: wrap; gap: 8px; }
.ht-chipnav a {
  padding: 7px 16px;
  border: 1px solid var(--ht-light-05);
  border-radius: 999px;
  color: var(--ht-text-headline);
  font-size: .9rem;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.ht-chipnav a:hover { background: var(--ht-light-02); border-color: var(--ht-light-07); text-decoration: none; }

.ht-team {
  display: flex; flex-direction: column;
  height: 100%; box-sizing: border-box;
  background: var(--ht-white);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
  overflow: hidden;
  scroll-margin-top: 120px;
}
.ht-team__media img {
  display: block; width: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 0 !important;
}
.ht-team__body { padding: 24px 26px 8px; flex: 1; }
.ht-team__title {
  margin: 0 0 12px;
  color: var(--ht-text-headline);
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  line-height: 1.25;
}
.ht-team__body p, .ht-counsel__text p { color: var(--ht-text-body); line-height: 1.65; margin: 0 0 12px; }
.ht-team__contact {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px;
  margin: 8px 26px 0; padding: 16px 0 22px;
  border-top: 1px solid var(--ht-light-03);
}
.ht-team__room { display: inline-flex; align-items: center; gap: 6px; color: var(--ht-text-headline); font-weight: var(--ht-fw-semibold); font-size: .92rem; }
.ht-team__room .uk-icon { color: var(--ht-dark-07); }
.ht-team__actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.ht-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px;
  border: 1px solid var(--ht-light-05);
  border-radius: 999px;
  color: var(--ht-blue-text);
  font-size: .86rem; font-weight: var(--ht-fw-medium);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.ht-pill:hover { background: var(--ht-light-02); border-color: var(--ht-blue); color: var(--ht-blue-hover); text-decoration: none; }

/* Gemeinsame Karte für mehrere Personen mit gleicher Aufgabe (Beratungslehrer) */
.ht-counsel {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(24px, 3.5vw, 44px);
  background: var(--ht-light-01);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
  scroll-margin-top: 120px;
}
.ht-counsel__people { display: flex; flex-direction: column; gap: 12px; }
.ht-counsel__person {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px;
  padding: 14px 16px;
  background: var(--ht-white);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
}
.ht-portrait {
  position: relative; flex: none;
  width: 76px; height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ht-light-03);
}
.ht-portrait img {
  position: absolute; left: 0; top: 0;
  width: 100%; height: auto; max-width: none;
  border-radius: 0 !important;
}
.ht-portrait img:not([style*="width"]) { height: 100%; object-fit: cover; }
.ht-counsel__who { display: flex; flex-direction: column; flex: 1; min-width: 120px; }
.ht-counsel__who strong { color: var(--ht-text-headline); font-size: 1.05rem; }
.ht-counsel__who span { color: var(--ht-dark-07); font-size: .88rem; }
@media (max-width: 959px) { .ht-counsel { grid-template-columns: 1fr; } }

/* --- Förderverein / Talent Company --- */
.ht-prose { color: var(--ht-text-body); line-height: 1.7; }

.ht-claim {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(24px, 4vw, 48px);
  background: var(--ht-light-01);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
}
.ht-claim img { width: 100%; max-width: 384px; height: auto; transform: rotate(-2deg); box-shadow: 0 18px 36px -22px rgba(50,55,62,.45); }

.ht-feecard {
  display: flex; flex-direction: column; gap: 4px;
  padding: 28px 30px;
  background: var(--ht-white);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
}
.ht-feecard__label { color: var(--ht-dark-07); font-size: .85rem; font-weight: var(--ht-fw-semibold); letter-spacing: .06em; text-transform: uppercase; }
.ht-feecard__value { color: var(--ht-text-headline); font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); font-weight: var(--ht-fw-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ht-feecard__value small { font-size: .5em; font-weight: var(--ht-fw-semibold); color: var(--ht-dark-07); }
.ht-feecard__note { color: var(--ht-text-body); font-size: .92rem; line-height: 1.55; margin-top: 6px; }

.ht-board {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  height: 100%; box-sizing: border-box;
  padding: 22px;
  background: var(--ht-white);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
}
.ht-board__ini {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 14px;
  border-radius: 50%;
  background: var(--ht-light-02);
  color: var(--ht-text-headline);
  font-weight: var(--ht-fw-bold); letter-spacing: .02em;
}
.ht-board__role { color: var(--ht-dark-07); font-size: .85rem; }
.ht-board__name { color: var(--ht-text-headline); font-size: 1.05rem; line-height: 1.35; }

.ht-cta {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px);
  padding: clamp(26px, 4vw, 52px);
  background: var(--ht-dark-01);
  border-radius: var(--ht-radius-lg);
  color: var(--ht-text-invert-body);
  scroll-margin-top: 120px;
}
.ht-cta h2 { color: #fff; }
.ht-cta p { color: var(--ht-text-invert-body); }
.ht-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ht-cta .uk-button-default { color: #fff; border-color: rgba(255,255,255,.5); }
.ht-cta .uk-button-default:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.ht-cta__facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px;
  margin: 0;
}
.ht-cta__facts dt { color: rgba(255,255,255,.6); font-size: .78rem; font-weight: var(--ht-fw-semibold); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.ht-cta__facts dd { margin: 0; color: #fff; line-height: 1.55; }
.ht-cta__facts a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.ht-cta__facts a:hover { text-decoration-color: #fff; }
.ht-iban { font-variant-numeric: tabular-nums; letter-spacing: .03em; white-space: nowrap; }
@media (max-width: 959px) { .ht-cta { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ht-cta__facts { grid-template-columns: 1fr; } .ht-iban { white-space: normal; } }

.ht-photohero {
  position: relative;
  border-radius: var(--ht-radius-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--ht-dark-01);
}
.ht-photohero__img {
  display: block; width: 100%;
  aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 22%;
  border-radius: 0 !important;
}
.ht-photohero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(23,25,28,.72) 0%, rgba(23,25,28,.35) 45%, rgba(23,25,28,0) 70%);
}
.ht-photohero__caption {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  max-width: 34rem;
  padding: clamp(24px, 4vw, 52px);
}
.ht-photohero__eyebrow { margin: 0 0 6px; color: rgba(255,255,255,.72); font-size: .8rem; font-weight: var(--ht-fw-semibold); letter-spacing: .08em; text-transform: uppercase; }
.ht-photohero__title { margin: 0 0 10px; color: #fff; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem); line-height: 1.05; }
.ht-photohero__sub { margin: 0; color: rgba(255,255,255,.9); font-size: clamp(1rem, .95rem + .3vw, 1.2rem); line-height: 1.5; }
.ht-photohero--plain .ht-photohero__caption { position: static; }
@media (max-width: 767px) {
  .ht-photohero { background: var(--ht-dark-01); }
  .ht-photohero::after { display: none; }
  .ht-photohero__img { aspect-ratio: 4 / 3; object-position: 30% 25%; }
  .ht-photohero__caption { position: static; max-width: none; padding: 22px 22px 26px; }
}

.ht-offer {
  height: 100%; box-sizing: border-box;
  padding: 22px 22px 18px;
  background: var(--ht-light-01);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
}
.ht-ticks { list-style: none; margin: 0; padding: 0; }
.ht-ticks li { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--ht-text-headline); border-top: 1px solid var(--ht-light-04); }
.ht-ticks li:first-child { border-top: 0; }
.ht-ticks .uk-icon { color: var(--ht-dark-07); flex: none; }

.ht-contactperson__head { display: flex; align-items: center; gap: 16px; margin: 6px 0 12px; }
.ht-portrait--lg { width: 88px; height: 88px; }

/* --- Kompetenzzentren: Merkmals-Karten + dunkles Schwerpunkt-Band --- */
.ht-svgicon svg { width: calc(20px * var(--r, 1)); height: calc(20px * var(--r, 1)); display: block; }
.ht-trait {
  display: flex; flex-direction: column; gap: 16px;
  height: 100%; box-sizing: border-box;
  padding: 26px 26px 22px;
  background: var(--ht-white);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
}
.ht-trait__icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--ht-light-02);
  color: var(--ht-text-headline);
}
.ht-trait p { margin: 0; color: var(--ht-text-headline); font-size: 1.05rem; line-height: 1.55; }

.ht-band {
  padding: clamp(28px, 4.5vw, 60px);
  background: var(--ht-dark-01);
  border-radius: var(--ht-radius-lg);
  color: var(--ht-text-invert-body);
}
.ht-band__eyebrow { margin: 0 0 6px; color: rgba(255,255,255,.6); font-size: .8rem; font-weight: var(--ht-fw-semibold); letter-spacing: .08em; text-transform: uppercase; }
.ht-band__title { margin: 0 0 36px; color: #fff; }
.ht-focus-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.ht-focus-grid > li { margin: 0; }

.ht-focus-tile {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  height: 100%; box-sizing: border-box;
  padding: 24px 22px 22px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--ht-radius-lg);
  color: #fff;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.ht-focus-tile__no { color: rgba(255,255,255,.45); font-size: .85rem; font-weight: var(--ht-fw-semibold); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.ht-focus-tile__icon { color: #fff; }
.ht-focus-tile__name { color: #fff; font-size: 1.12rem; font-weight: var(--ht-fw-semibold); line-height: 1.35; }
.ht-focus-tile__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: rgba(255,255,255,.75); font-size: .88rem; }
.ht-focus-tile--link:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); transform: translateY(-2px); color: #fff; text-decoration: none; }
.ht-focus-tile--link:hover .ht-focus-tile__more { color: #fff; }
@media (max-width: 639px) {
  .ht-band { padding: 26px 18px; }
  .ht-focus-grid { grid-template-columns: 1fr; gap: 8px; }
  .ht-focus-tile { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 16px; }
  .ht-focus-tile__no { width: 22px; }
  .ht-focus-tile__name { flex: 1; font-size: 1rem; }
  .ht-focus-tile__more { flex-basis: 100%; margin: 2px 0 0 36px; }
}

/* Ansprechpartner als Kontakt-Chips */
.ht-contacts { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 16px; }
.ht-contacts > div {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex: 1 1 240px;
  padding: 12px 14px 12px 18px;
  background: var(--ht-light-01);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
}
.ht-row__body .ht-contacts .uk-text-lead {
  margin: 0;
  color: var(--ht-text-headline);
  font-size: 1rem;
  font-weight: var(--ht-fw-semibold);
}
.ht-contacts .uk-flex { gap: 6px; flex: none; }
.ht-contacts .uk-flex > div { margin: 0 !important; }

.ht-values { margin-top: 8px; margin-bottom: 24px; }
.ht-value {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  height: 100%;
  box-sizing: border-box;
  background: var(--ht-white);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
  padding: 22px 22px 20px;
}
.ht-value__icon {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--ht-light-02);
  color: var(--ht-text-headline);
}
.ht-value h3 {
  margin: 0;
  color: var(--ht-text-headline);
  font-size: 1.05rem;
  font-weight: var(--ht-fw-semibold);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   17c) PRESSEARCHIV + BEITRAGSSEITE
   -------------------------------------------------------------------------- */
.ht-archive-year {
  color: var(--ht-text-headline);
  border-bottom: 2px solid var(--ht-light-04);
  padding-bottom: 8px;
  margin: 44px 0 18px;
}
.ht-archive-group { display: flex; flex-direction: column; gap: 12px; }
.ht-archive-item {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 14px 18px;
  background: var(--ht-white);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ht-archive-item:hover {
  border-color: var(--ht-light-08);
  box-shadow: 0 10px 24px -14px rgba(50,55,62,.32);
  transform: translateY(-2px);
  color: inherit;
}
.ht-archive-item__img {
  flex: none;
  width: 86px; height: 64px;
  object-fit: cover;
  border-radius: var(--ht-radius);
  background: var(--ht-light-03);
}
.ht-archive-item__img--empty { display: block; }
.ht-archive-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ht-archive-item__title {
  font-weight: var(--ht-fw-semibold);
  color: var(--ht-text-headline);
  line-height: 1.3;
}
.ht-archive-item:hover .ht-archive-item__title { color: var(--ht-text-headline); }
.ht-archive-item__excerpt {
  color: var(--ht-text-body);
  font-size: .9rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ht-archive-item__arrow { margin-left: auto; color: var(--ht-dark-07); font-weight: var(--ht-fw-bold); flex: none; }

/* Personen-Karten (Schulleitung, Kollegium …) */
.ht-people { margin-top: 8px; }
.ht-person {
  background: var(--ht-white);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
  overflow: hidden;
  height: 100%;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.ht-person:hover {
  border-color: var(--ht-light-07);
  box-shadow: 0 14px 30px -14px rgba(50,55,62,.3);
  transform: translateY(-3px);
}
.ht-person__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: 0 !important;
}
.ht-person__body { padding: 20px 22px 22px; text-align: center; }
.ht-person__body h3 {
  font-size: 1.15rem;
  margin: 0 0 4px;
}
.ht-person__body p {
  color: var(--ht-text-body);
  font-size: .92rem;
  margin: 0 0 14px;
  line-height: 1.5;
}

/* Veranstaltungs-Card (Startseite) */
.ht-event-card {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  align-items: flex-start;
  background: var(--ht-white);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius-lg);
  padding: clamp(22px, 3vw, 34px);
  max-width: 62rem;
}
.ht-event-card__date {
  flex: none;
  display: flex; flex-direction: column; align-items: center;
  min-width: 92px;
  padding: 14px 16px;
  background: var(--ht-light-01);
  border: 1px solid var(--ht-light-04);
  border-radius: var(--ht-radius);
}
.ht-event-card__day {
  font-size: 2rem;
  font-weight: var(--ht-fw-bold);
  color: var(--ht-text-headline);
  line-height: 1;
}
.ht-event-card__month {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ht-dark-07);
  margin-top: 4px;
}
.ht-event-card__body p { max-width: 62ch; }
@media (max-width: 639px) { .ht-event-card { flex-direction: column; } }
/* Gutenberg-Datei-Block in der Termin-Card -> Design-V2-Button */
.ht-event-card .wp-block-file { margin: 14px 0 0; }
.ht-event-card .wp-block-file > a:first-child:not(.wp-block-file__button) { display: none; } /* doppelten Dateinamen-Link ausblenden */
.ht-event-card .wp-block-file__button {
  display: inline-block;
  background: transparent;
  color: var(--ht-blue-text);
  border: 1px solid var(--ht-light-07);
  border-radius: var(--ht-radius);
  padding: 9px 22px;
  font-weight: var(--ht-fw-semibold);
  font-size: .95rem;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ht-event-card .wp-block-file__button:hover {
  background: var(--ht-light-02);
  border-color: var(--ht-blue);
  color: var(--ht-blue-hover);
}

/* BewO-Kachel (Startseite) – Aktionsblau wie alle Primär-Buttons (kein Schwarz über dem hellen Footer) */
.ht-bewo-card {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  padding: 26px 38px;
  background: var(--ht-blue);
  color: #fff;
  border-radius: var(--ht-radius-lg);
  font-weight: var(--ht-fw-semibold);
  font-size: 1.15rem;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.ht-bewo-card:hover {
  color: #fff;
  background: var(--ht-blue-hover);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -18px rgba(0,52,108,.45);
}
.ht-bewo-card__arrow { color: rgba(255,255,255,.75); font-size: 1.3em; transition: transform .18s ease; }
.ht-bewo-card:hover .ht-bewo-card__arrow { transform: translateX(4px); }

.ht-post-body { max-width: 66ch; font-size: 1.05rem; }
.ht-post-body p { margin-bottom: 1.1em; }
.ht-post-body img { border-radius: var(--ht-radius-lg); height: auto; }

/* Contact Form 7 im Design-V2-Look */
.wpcf7 { max-width: 760px; }
.wpcf7 label { display: block; font-weight: var(--ht-fw-medium); color: var(--ht-text-headline); margin-bottom: 6px; }
.wpcf7 p { margin: 0 0 18px; }
.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) { width: 100%; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea {
  padding: 10px 14px;
  min-height: 44px;
}
.wpcf7 textarea { min-height: 160px; }
.wpcf7 .wpcf7-submit {
  background: var(--ht-blue);
  color: #fff;
  border: 1px solid var(--ht-blue);
  border-radius: var(--ht-radius);
  font-weight: var(--ht-fw-semibold);
  font-family: var(--ht-font);
  padding: 12px 34px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.wpcf7 .wpcf7-submit:hover { background: var(--ht-blue-hover); }
.wpcf7 .wpcf7-not-valid-tip { color: var(--ht-red); font-size: .85rem; margin-top: 4px; }
.wpcf7 .wpcf7-response-output {
  border-radius: var(--ht-radius);
  border: 1px solid var(--ht-light-05);
  padding: 12px 16px;
  margin: 18px 0 0;
}

/* --------------------------------------------------------------------------
   17d) SUCHFORMULAR (searchform.php) + 404-SEITE
   -------------------------------------------------------------------------- */
.ht-search { display: flex; gap: 10px; max-width: 600px; }
.ht-search__field { position: relative; flex: 1 1 auto; min-width: 0; }
.ht-search__icon {
  position: absolute; left: 15px; top: 50%;
  transform: translateY(-50%);
  color: var(--ht-dark-07);
  pointer-events: none;
}
.ht-search .ht-search__input {
  height: 50px;
  padding: 0 16px 0 46px;
  font-family: var(--ht-font);
  font-size: 1rem;
}
.ht-search .ht-search__input::placeholder { color: var(--ht-dark-07); opacity: 1; }
.ht-search .ht-search__submit { flex: none; height: 50px; line-height: 48px; padding: 0 28px; }
@media (max-width: 479px) {
  .ht-search { flex-direction: column; }
  .ht-search .ht-search__submit { width: 100%; }
}

.ht-404__label {
  margin: 40px 0 12px;
  font-size: .8rem;
  font-weight: var(--ht-fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ht-dark-07);
}
.ht-404__links { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 479px) {
  .ht-404__links > .uk-button { flex: 1 1 calc(50% - 5px); padding: 0 12px; }
}
.ht-404__intro { max-width: 56ch; }