/* 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, dezenter als Zeiss-Blau) */
  --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;
}
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
   -------------------------------------------------------------------------- */
.ht-topbar {
  background: var(--ht-dark-00);
  color: var(--ht-text-invert-body);
  font-size: 0.8125rem;
}
.ht-topbar a { color: var(--ht-text-invert-body); }
.ht-topbar a:hover { color: #fff; }

/* 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); }
.uk-navbar-toggle:hover { color: var(--ht-blue); }

/* --------------------------------------------------------------------------
   8) FOOTER
   -------------------------------------------------------------------------- */
.ht-footer {
  background: var(--ht-dark-00);
  color: var(--ht-text-invert-body);
  padding: 64px 0 32px;
}
.ht-footer a { color: var(--ht-text-invert-body); }
.ht-footer a:hover { color: var(--ht-blue-light); }
.ht-footer h3, .ht-footer h4, .ht-footer .uk-h4, .ht-footer strong { color: #fff; font-weight: var(--ht-fw-semibold); }
.ht-footer .uk-nav > li > a { color: var(--ht-text-invert-body); padding: 6px 0; }
.ht-footer .uk-nav > li > a:hover { color: #fff; }
.ht-footer-bottom {
  border-top: 1px solid var(--ht-dark-03);
  margin-top: 40px;
  padding-top: 24px;
  font-size: 0.8125rem;
  color: var(--ht-dark-07);
}
.ht-footer-bottom a { color: var(--ht-dark-07); }
.ht-footer-bottom a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   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 16px;
  max-width: 16ch;
}
.ht-hero__text { color: rgba(255,255,255,.86); font-size: 1.15rem; max-width: 42ch; margin-bottom: 28px; }

/* --------------------------------------------------------------------------
   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; }

/* Zeiss-Stil: 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);
}

.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,.94);
  backdrop-filter: blur(6px);
  border-left: 4px solid var(--ht-blue);
  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; }

/* --- 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;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: .95;
  transform-origin: center;
  filter: drop-shadow(0 1px 3px rgba(0, 52, 108, .4));  /* Kontrast auf hellen Flächen */
  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 */
.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); filter: saturate(.8); }
  to   { transform: scale(1); filter: saturate(1); }
}
/* Caption erscheint, sobald der Fokus sitzt */
.ht-feature__caption { animation-delay: 1.7s; }
@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; }

/* --------------------------------------------------------------------------
   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); }

/* --------------------------------------------------------------------------
   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) */
.ht-bewo-card {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  padding: 26px 38px;
  background: var(--ht-dark-00);
  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-dark-02);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -18px rgba(23,25,28,.55);
}
.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;
}