/* BUNDLED COMPONENTS CSS */

[data-component] { display: none !important; }

/* --- partials/global/footer/footer.css --- */
/* Footer component styles */
.footer-v2 {
  position: relative;
  z-index: 10;
  background-color: var(--white);
  padding-top: 0;
  padding-bottom: var(--section-padding-block);
  padding-left: calc(var(--section-padding-inline) + env(safe-area-inset-left));
  padding-right: calc(var(--section-padding-inline) + env(safe-area-inset-right));
  color: var(--text-muted, #6e6e73);
  font-size: 12px;
  line-height: 1.5;
}

.footer-v2-container {
  margin-inline: auto;
  padding-inline: 0 !important;
}

.footer-v2-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .footer-v2-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  .footer-v2-grid { grid-template-columns: repeat(4, 1fr); }
}

.tt-footer-widget .meta-label {
  margin-bottom: 20px;
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.14;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted) !important;
  white-space: nowrap;
}

.tt-footer-widget-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tt-footer-widget-list li {
  font-size: 17px;
  margin-bottom: 8px;
  line-height: 1.5;
  color: var(--text-color);
}
.tt-footer-widget-list li a:not(.social-button) {
  color: var(--accent-color) !important;
  text-decoration: none;
  position: relative;
  display: inline-block;
  transition: color 200ms cubic-bezier(0.23, 1, 0.32, 1);
  outline: none;
}
.tt-footer-widget-list li a:not(.social-button):focus-visible {
  outline: 2px solid var(--accent-color, #a60032);
  outline-offset: 2px;
  border-radius: 2px;
}
.tt-footer-widget-list li a:not(.social-button)::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: var(--saeule02-rot);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .tt-footer-widget-list li a:not(.social-button):hover::after {
    transform: scaleX(1);
  }
  .tt-footer-widget-list a:not(.social-button):hover {
    color: var(--saeule02-rot) !important;
  }
}
.tt-footer-widget-list li a:not(.social-button):active {
  transform: scale(0.97);
  transition-duration: 80ms !important;
}

.footer-logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem);
}
.footer-logo-dark,
.footer-logo-light {
  width: clamp(280px, 45vw, 500px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.footer-logo-dark { display: none; }
html[data-theme="dark"] .footer-logo-light { display: none; }
html[data-theme="dark"] .footer-logo-dark { display: block; }

/* --------------------------------------------------------------------------
   Footer Logo Reveal
   -------------------------------------------------------------------------- */
.footer-logo-wrapper.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.footer-logo-wrapper.reveal img {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1), transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
}

.footer-logo-wrapper.reveal.is-visible img {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1200ms cubic-bezier(0.23, 1, 0.32, 1) 100ms,
              transform 1200ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
}

@media (prefers-reduced-motion: reduce) {
  .footer-logo-wrapper.reveal img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Footer Grid Columns Reveal (Newsroom Stagger)
   -------------------------------------------------------------------------- */
.footer-v2-grid.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.footer-v2-grid.reveal .tt-footer-widget {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1), transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
}

.footer-v2-grid.reveal.is-visible .tt-footer-widget:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1000ms cubic-bezier(0.23, 1, 0.32, 1) 100ms,
              transform 1000ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
}
.footer-v2-grid.reveal.is-visible .tt-footer-widget:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1000ms cubic-bezier(0.23, 1, 0.32, 1) 150ms,
              transform 1000ms cubic-bezier(0.23, 1, 0.32, 1) 150ms;
}
.footer-v2-grid.reveal.is-visible .tt-footer-widget:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1000ms cubic-bezier(0.23, 1, 0.32, 1) 200ms,
              transform 1000ms cubic-bezier(0.23, 1, 0.32, 1) 200ms;
}
.footer-v2-grid.reveal.is-visible .tt-footer-widget:nth-child(4) {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1000ms cubic-bezier(0.23, 1, 0.32, 1) 250ms,
              transform 1000ms cubic-bezier(0.23, 1, 0.32, 1) 250ms;
}

@media (prefers-reduced-motion: reduce) {
  .footer-v2-grid.reveal .tt-footer-widget {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.icon-inline {
  display: inline-block;
  font-size: 14px;
  min-width: 1.4em;
  text-align: center;
  margin-right: 6px;
  vertical-align: middle;
  opacity: 0.8;
  color: var(--text-color);
}
/* Adjust Lucide icon size to match Font Awesome */
.icon-inline[data-lucide] {
  height: 14px;
  width: 14px;
}
/* Larger Barrierefreiheit icon */
.larger-icon[data-lucide] {
  height: 20px;
  width: 20px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

.rounded-social-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0;
}
.rounded-social-buttons .social-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border-radius: 50%;
  font-size: 14px;
  color: #fff;
  background-color: #999;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
              background-color 200ms ease,
              color 200ms ease,
              box-shadow 200ms ease;
}
/* Apple 44pt Touch-Target Buffer (unsichtbare Klickfläche für mobile Finger) */
.rounded-social-buttons .social-button::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
}
.rounded-social-buttons .social-button:focus-visible {
  outline: 2px solid var(--accent-color, #a60032);
  outline-offset: 3px;
}
.rounded-social-buttons .social-button:active {
  transform: scale(0.92) !important;
  transition-duration: 80ms !important;
}
@media (hover: hover) and (pointer: fine) {
  .rounded-social-buttons .social-button:hover { 
    transform: translateY(-2px) scale(1.06); 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  }
  .rounded-social-buttons a.social-button.facebook:hover { background-color: #fff; color: #3b5998; box-shadow: 0 0 0 1.5px #3b5998, 0 4px 12px rgba(59, 89, 152, 0.25); }
  .rounded-social-buttons a.social-button.linkedin:hover { background-color: #fff; color: #0077b5; box-shadow: 0 0 0 1.5px #0077b5, 0 4px 12px rgba(0, 119, 181, 0.25); }
  .rounded-social-buttons a.social-button.tiktok:hover { background-color: #fff; color: #000; box-shadow: 0 0 0 1.5px #000, 0 4px 12px rgba(0, 0, 0, 0.25); }
  .rounded-social-buttons a.social-button.wikipedia:hover { background-color: #fff; color: #555; box-shadow: 0 0 0 1.5px #a9adb1, 0 4px 12px rgba(169, 173, 177, 0.25); }
  .rounded-social-buttons a.social-button.youtube:hover { background-color: #fff; color: #ff0000; box-shadow: 0 0 0 1.5px #ff0000, 0 4px 12px rgba(255, 0, 0, 0.25); }
  .rounded-social-buttons a.social-button.instagram:hover { background: #fff; color: #d6249f; box-shadow: 0 0 0 1.5px #d6249f, 0 4px 12px rgba(214, 36, 159, 0.25); }
}
.rounded-social-buttons a.social-button.facebook { background-color: #3b5998; }
.rounded-social-buttons a.social-button.linkedin { background-color: #0077b5; }
.rounded-social-buttons a.social-button.tiktok { background-color: #000; }
.rounded-social-buttons a.social-button.wikipedia { background-color: #a9adb1; }
.rounded-social-buttons a.social-button.youtube { background-color: #ff0000; }
.rounded-social-buttons a.social-button.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }

.footer-v2-divider { border: 0; border-top: 1px solid #d2d2d7; margin: 40px 0; }

.footer-v2-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 17px; line-height: 1.5; color: var(--text-color); }
@media screen and (max-width: 768px) {
  .footer-v2-bottom { flex-direction: column; gap: 40px; align-items: flex-start; }
  .footer-v2-legal-right { align-self: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .rounded-social-buttons .social-button {
    transition: none !important;
    transform: none !important;
  }
}
/* --- partials/global/navigation/navigation.css --- */
/* =========================================
   6. NAVIGATION (Premium-Style nav-v2-)
   ========================================= */

/* 6.1 Variables */
:root {
  --nav-v2-bg: #161617;
  --nav-v2-bg-transparent: rgba(22, 22, 23, 0.0); /* Volltransparent am Start */
  --nav-v2-bg-glass: rgba(22, 22, 23, 0.9);      /* Glassmorphism-Basis */
  --nav-v2-border: rgba(255, 255, 255, 0.1);
  --nav-v2-text: #ffffff;
  --nav-v2-text-muted: #86868b;
  --nav-v2-text-dim: rgba(255, 255, 255, 0.45);
  --nav-v2-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --nav-v2-duration: 0.25s;
  --nav-v2-font: 'TheSansOffice';
  --nav-v2-font-size-links: 0.9375rem; /* 15px */
}

/* 6.2 Header & Containers */

/* Seitenspezifischer Dunkel-Override: index.html setzt body[data-nav-dark].
   Verhindert Inline-<style> im <head> und ist damit parser-friendly. */
body[data-nav-dark] .nav-v2-header {
  background: var(--bg-black) !important;
}

.nav-v2-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 2560px;
  z-index: 1100;
  font-family: var(--nav-v2-font);
  background: var(--nav-v2-bg-transparent);
  transition: background var(--dur-base) var(--ease-in-out),
              box-shadow var(--dur-base) var(--ease-in-out),
              backdrop-filter var(--dur-base) var(--ease-in-out);
  border-bottom: 1px solid var(--nav-v2-border);
  height: 44px;
  box-sizing: border-box;
}

.nav-v2-header.scrolled {
  background: var(--nav-v2-bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.nav-v2-header.active {
  background: #161617 !important; /* Solid dunkel im Mobile Menü, damit Text beim Scrollen nicht durchscheint */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-v2-container {
  margin-inline: auto;
  width: 100%;
  height: 100%;
}

.nav-v2-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 48px;
  height: 100%;
  position: relative;
  z-index: 20;
}

@media (max-width: 768px) {
  .nav-v2-wrapper {
    padding-inline: 20px;
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: calc(20px + env(safe-area-inset-right));
  }
}

@media (max-width: 380px) {
  .nav-v2-wrapper {
    padding-inline: 14px;
    padding-left: calc(14px + env(safe-area-inset-left));
    padding-right: calc(14px + env(safe-area-inset-right));
  }
  .nav-v2-actions-group {
    gap: 8px;
  }
  .nav-v2-logo-text {
    max-width: calc(100vw - 120px);
  }
}


/* 6.3 Logo */
.nav-v2-logo {
  flex-shrink: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  transition: opacity 0.3s var(--nav-v2-ease);
}

.nav-v2-logo:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 4px;
  border-radius: 4px;
}

.nav-v2-logo-img {
  height: 24px;
  width: auto;
  display: block;
  transition: transform 0.3s var(--nav-v2-ease), opacity 0.3s var(--nav-v2-ease);
}

/* Definiert die Schrifgröße EBK in der Navigation */
.nav-v2-logo-text {
  margin-left: 1.0625rem; /* 17px */
  font-family: var(--nav-v2-font);
  font-size: 1.0625rem; /* 17px */
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0.008em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s var(--nav-v2-ease), opacity 0.3s var(--nav-v2-ease);
}

@media (hover: hover) and (pointer: fine) {
  .nav-v2-logo:hover .nav-v2-logo-img {
    transform: scale(1.06);
    opacity: 0.9;
  }

  .nav-v2-logo:hover .nav-v2-logo-text {
    color: rgba(255, 255, 255, 0.75);
  }
}

.nav-v2-logo:active {
  transform: scale(0.97);
}

/* 6.4 Desktop Menu Links */
.nav-v2-desktop-links {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  gap: 16px;
  padding-inline: 0;
  z-index: 10;
}

@media (min-width: 1024px) and (orientation: landscape), (min-width: 1200px) {
  .nav-v2-desktop-links {
    display: flex;
  }
}

/* Definiert die Schrifgröße der Navigationsoberbegriffe */
.nav-v2-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: none;
  border: none;
  padding: 6px 14px;
  font-family: var(--nav-v2-font);
  font-size: var(--nav-v2-font-size-links, 0.9375rem); /* 15px */
  font-weight: 400;
  letter-spacing: 0.01em; /* Optimiertes Kerning für 15px */
  color: #ffffff;
  border-radius: 9999px;
  cursor: pointer;
  transition: color 0.4s var(--nav-v2-ease); /* Nur Farbe/Opacity faden */
}

.nav-v2-link-btn:hover,
.nav-v2-link-btn.active {
  color: rgba(255, 255, 255, 0.7); /* Kein grauer Hintergrund mehr, nur reine Typografie-Dimmung */
}

.nav-v2-actions-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* 6.5 Action Buttons (Login) */
.nav-v2-right-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-v2-action-btn {
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 6px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s var(--nav-v2-ease);
}

.nav-v2-login-btn {
  display: none;
  min-height: 44px;
  padding: 6px 14px;
  gap: 8px;
  border-radius: 9999px;
  transition: color 0.4s var(--nav-v2-ease);
}

@media (min-width: 1024px) and (orientation: landscape), (min-width: 1200px) {
  .nav-v2-login-btn {
    display: flex;
  }
}

.nav-v2-login-btn:hover,
.nav-v2-login-btn.active {
  color: rgba(255, 255, 255, 0.7);
  background: none;
}

.nav-v2-login-label {
  font-family: var(--nav-v2-font);
  font-size: var(--nav-v2-font-size-links, 0.9375rem); /* 15px */
  font-weight: 400;
  letter-spacing: 0.01em;
}

.nav-v2-login-btn i,
.nav-v2-login-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.nav-v2-action-btn:not(.nav-v2-login-btn):hover {
  transform: scale(1.1);
}
.nav-v2-action-btn:focus-visible,
.nav-v2-login-btn:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

#a11y-toggle-btn {
  position: relative;
}

#a11y-toggle-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.a11y-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform-origin: top center;
  transform: translateX(-50%) translateY(4px) scale(0.94);
  padding: 4px 10px;
  font-family: var(--nav-v2-font, 'TheSansOffice', 'TheSans', sans-serif);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: #ffffff;
  background: rgba(22, 22, 24, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
              visibility 160ms;
  z-index: 100;
}

#a11y-toggle-btn:hover .a11y-tooltip,
#a11y-toggle-btn:focus-visible .a11y-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

#a11y-toggle-btn[aria-expanded="true"] .a11y-tooltip {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 6.6 Desktop Mega Menu */
.nav-v2-mega-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: flex;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: top;
  z-index: 10;
}

.nav-v2-mega-menu.active {
  visibility: visible;
  pointer-events: auto;
}

.nav-v2-mega-menu.is-dropdown {
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  transform: none;
  pointer-events: none;
}

.nav-v2-mega-menu.is-dropdown .nav-v2-mega-content {
  position: absolute;
  width: 330px;
  pointer-events: auto;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  padding: 32px;
  margin-top: 0;
  border: 1px solid var(--nav-v2-border);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.nav-v2-mega-menu.is-dropdown .nav-v2-mega-grid {
  grid-template-columns: 1fr;
  gap: 0;
}

.nav-v2-mega-menu.is-dropdown .nav-v2-mega-heading {
  display: block;
  margin-bottom: 20px; /* Kompakter für Dropdown */
}

.nav-v2-mega-content {
  width: 100%;
  background: var(--nav-v2-bg-glass);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.1); /* Feinerer, heller Premium-Rahmen */
  border-top: none; /* Nahtloser Übergang aus dem Header */
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  padding: 48px 48px 64px;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.8);
}

.nav-v2-mega-grid {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  gap: 80px;
  flex-wrap: wrap;
}

.nav-v2-mega-col {
  flex: 0 1 340px; /* Kein Wachstum, damit die Zentrierung unter der 2. Spalte funktioniert */
  min-width: 260px;
  max-width: 400px;
}

/* Definiert die Spaltenüberschriften im Megamenü */
.nav-v2-mega-heading {
  font-family: var(--nav-v2-font);
    font-size: 0.75rem; /* 12px */
    font-weight: 400;
  color: var(--text-grey) !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 32px;
  margin-left: 0;
  padding-left: 0;
}

.nav-v2-mega-items {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.nav-v2-mega-item {
  display: flex;
  align-items: flex-start; /* Icons bündig zur ersten Zeile */
  gap: 20px;
  text-decoration: none;
  transition: transform 0.3s var(--nav-v2-ease);
}

.nav-v2-mega-item:hover {
  transform: translateX(8px);
}

.nav-v2-item-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: all 0.3s var(--nav-v2-ease);
  margin-top: 4px; /* Optische Korrektur zur ersten Textzeile */
}

.nav-v2-mega-item:hover .nav-v2-item-icon {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

.nav-v2-mega-item-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Definiert die Schrifgröße der Navigationstitel im Megamenü */
.nav-v2-item-title {
  margin: 0 0 2px;
  color: #ffffff;
font-family: var(--nav-v2-font);
  font-size: 1.0625rem; /* 17px */
letter-spacing: 0.008em;
  font-weight: 400; /* Regular */
  line-height: 1.47;
  display: flex;
  align-items: center;
}

/* Mobile-Spezifische Anpassung für Sub-Navigation */
.nav-v2-mobile-overlay .nav-v2-item-title {
  font-weight: 400; /* Regular */
  font-size: 17px;
}

.nav-v2-mobile-overlay .nav-v2-mega-items {
  gap: 24px; /* Enger als auf Desktop für Mobile */
}

.nav-v2-mobile-overlay .nav-v2-item-icon {
  width: 32px;
  height: 32px;
  margin-top: 2px; /* Angepasst für kleinere mobile Icons */
}

/* Definiert die Schrifgröße der Navigationsuntertitel/Erläuterungen im Megamenü */
.nav-v2-item-desc {
  margin: 0;
  color: var(--text-grey);
  font-size: 0.9375rem; /* 15px */
letter-spacing: 0.01em;
line-height: 1.33;
  font-weight: 400;
}

.nav-v2-badge {
  background: #a60032;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--border-radius-pill, 999px);
  margin-left: 8px;
  transform: rotate(-4deg) translateY(-4px);
  display: inline-block;
  line-height: 1;
  text-transform: uppercase;
}

/* 6.7 Mobile Menu & Overlay */
.nav-v2-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  z-index: 1050;
  background: none;
  border: none;
  color: #ffffff;
  padding: 6px;
  margin-right: -4px;
  cursor: pointer;
}
.nav-v2-mobile-toggle:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

@media (min-width: 1024px) and (orientation: landscape), (min-width: 1200px) {
  .nav-v2-mobile-toggle {
    display: none;
  }
}

.nav-v2-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000; /* Unter Header (1100) */
  background: rgba(22, 22, 23, 0.7); /* Premium Glassmorphism auf Mobile */
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  padding: 60px 24px 0; /* Padding angepasst an card-padding/margin */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; /* Momentum Scrolling für iOS */

  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s var(--nav-v2-ease), visibility 0.4s var(--nav-v2-ease);
}

.nav-v2-mobile-overlay.active {
  visibility: visible;
  opacity: 1;
}

.nav-v2-mobile-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 100px;
}

.nav-v2-mobile-item {
  border-bottom: 1px solid var(--nav-v2-border);
}

.nav-v2-mobile-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
  padding-inline: 0; /* Gewährleistet Linksbündigkeit mit dem Container-Rand */
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: all 0.4s var(--nav-v2-ease);
  font-family: inherit; /* Vererbt "The Sans" vom Overlay/Body */
}

.nav-v2-mobile-title {
  font-family: var(--nav-v2-font);
  font-size: 24px;
  font-weight: 400; /* Regular */
  letter-spacing: -0.01em;
  color: #ffffff;
  transition: transform var(--nav-v2-duration) var(--nav-v2-ease);
}

.nav-v2-mobile-btn.expanded .nav-v2-mobile-title {
  transform: translateX(4px);
}

.nav-v2-mobile-chevron {
  color: var(--nav-v2-text-dim);
  transition: transform 0.4s var(--nav-v2-ease);
}

.nav-v2-mobile-btn.expanded .nav-v2-mobile-chevron {
  color: #ffffff;
  transform: rotate(90deg);
}

.nav-v2-mobile-content {
  display: none; /* Initial versteckt für GSAP */
  opacity: 0;
  overflow: hidden;
}

.nav-v2-mobile-item.expanded .nav-v2-mobile-content {
  opacity: 1;
  padding-bottom: 40px;
}

.nav-v2-mobile-groups {
  display: flex;
  flex-direction: column;
  gap: 32px; /* Etwas engerer Abstand zwischen Gruppen auf Mobile */
  padding-top: 16px;
  padding-bottom: 20px;
}

.nav-v2-mobile-group {
  margin-bottom: 8px;
}

/* 6.8 Backdrop Blur */
.nav-v2-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transition: all var(--dur-base) var(--ease-out);
  pointer-events: none;
}

.nav-v2-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 6.9 Helpers */
.nav-v2-hidden {
  display: none !important;
}

/* Icon Swap Logic */
.nav-v2-header.active #nav-v2-icon-menu {
  display: none !important;
}

.nav-v2-header.active #nav-v2-icon-close {
  display: block !important;
}
#nav-v2-icon-close {
  color: #fff !important;
}

/* 6.10 Breadcrumb Bar (Below Hero, Above Content) */
.nav-v2-breadcrumbs {
  position: relative;
  width: 100%;
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
  padding-block: 0;
  z-index: 25;
  background-color: var(--bg-black, #0f0f11);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
}

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
  .nav-v2-breadcrumbs {
    display: none !important;
  }
}

.nav-v2-breadcrumbs-container {
  width: 100%;
  height: 100%;
  max-width: calc(var(--container-1200) + 2 * var(--section-padding-inline));
  margin-inline: auto;
  padding-inline: var(--section-padding-inline);
  padding-left: calc(var(--section-padding-inline) + env(safe-area-inset-left));
  padding-right: calc(var(--section-padding-inline) + env(safe-area-inset-right));
  display: flex;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
}

.nav-v2-breadcrumbs-container::-webkit-scrollbar {
  display: none;
}

.nav-v2-breadcrumbs-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--nav-v2-font);
  font-size: var(--nav-v2-font-size-links, 0.9375rem); /* 15px - Exakt identisch mit Begriffen der Navigationsleiste */
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.nav-v2-breadcrumbs-item {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.nav-v2-breadcrumbs-link {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.2s var(--nav-v2-ease);
}

.nav-v2-breadcrumbs-link:hover {
  color: #ffffff;
}

.nav-v2-breadcrumbs-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
  border-radius: 2px;
}

.nav-v2-breadcrumbs-icon {
  width: 15px;
  height: 15px;
  opacity: 0.85;
  vertical-align: -1px;
}

.nav-v2-breadcrumbs-separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline: 9px;
  color: rgba(255, 255, 255, 0.3);
  user-select: none;
}

.nav-v2-breadcrumbs-separator svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  stroke-width: 2.2;
}

.nav-v2-breadcrumbs-category {
  color: rgba(255, 255, 255, 0.65);
  display: inline-flex;
  align-items: center;
}

.nav-v2-breadcrumbs-category a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s var(--nav-v2-ease);
}

.nav-v2-breadcrumbs-category a:hover {
  color: #ffffff;
}

.nav-v2-breadcrumbs-current {
  color: #ffffff;
  font-weight: 500;
  opacity: 0.95;
}


/* --- partials/global/accessibility/accessibility.css --- */
/* ========================================================= 
   ACCESSIBILITY SYSTEM (Premium-Style & Fully Integrated)
   Aus navigation.css ausgegliedert.
   ========================================================= */


/* --- Skip Link (GPU-beschleunigt, Reflow-frei) --- */
.skip-link {
  position: fixed;
  top: 20px;
  left: 20px;
  background: var(--accent-color, #A60032);
  color: #ffffff !important;
  padding: 12px 24px;
  border-radius: var(--border-radius-pill, 999px);
  z-index: 99999;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  transform: translateY(-160%);
  opacity: 0;
  pointer-events: none;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
              opacity 160ms cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.skip-link:focus {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  outline: 3px solid var(--accent-color, #A60032);
  outline-offset: 2px;
}

/* --- Dark Theme Variable Overrides --- */
html[data-theme="dark"] {
  --white: #1c1c1e;               /* Dark grey for cards and containers */
  --off-white: #0a0a0c;           /* Near black for page background */
  --bg-white: #1c1c1e;            /* Added for components using --bg-white */
  --bg-grey: #0a0a0c;             /* Added for components using --bg-grey */
  --text-color: #f5f5f7;               /* Off-white for body text */
  --light-gray: #3a3a3c;          /* Dark grey for borders and lines */
  --text-muted: #86868b;
  --color-text-black: var(--text-color);
  --color-page-background: var(--off-white);
  --saeule02-rot: #a60032;
  --accent-color: #a60032;
  --nav-v2-border: rgba(255, 255, 255, 0.15);
}

/* Ensure glassmorphism cards adapt nicely to dark mode background */
html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .card-inner-wave {
  background: rgba(28, 28, 30, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .scrolled {
  background: rgba(10, 10, 12, 0.85) !important;
}

/* --- High Contrast Theme Variable Overrides --- */
html[data-theme="high-contrast"] {
  --white: #000000;               /* Solid black for cards */
  --off-white: #000000;           /* Solid black for page background */
  --bg-white: #000000;            /* Added for high-contrast consistency */
  --bg-grey: #000000;             /* Added for high-contrast consistency */
  --text-color: #ffffff;               /* Pure white for text */
  --light-gray: #ffffff;          /* Pure white for borders and lines */
  --text-muted: #ffffff;
  --color-text-black: #ffffff;
  --color-page-background: #000000;
  --saeule02-rot: #ffff00;
  --accent-color: #ffff00;
  /* Navbar elements */
  --nav-v2-bg: #000000;
  --nav-v2-bg-transparent: #000000;
  --nav-v2-bg-glass: #000000;
  --nav-v2-border: #ffffff;
  --nav-v2-text: #ffffff;
  --nav-v2-text-muted: #ffffff;
  --nav-v2-text-dim: #ffffff;
}

/* Specific elements high contrast styling */
html[data-theme="high-contrast"] * {
  box-shadow: none !important;
  text-shadow: none !important;
  background-image: none !important;
}
html[data-theme="high-contrast"] p,
html[data-theme="high-contrast"] span,
html[data-theme="high-contrast"] a,
html[data-theme="high-contrast"] h1,
html[data-theme="high-contrast"] h2,
html[data-theme="high-contrast"] h3,
html[data-theme="high-contrast"] h4,
html[data-theme="high-contrast"] h5,
html[data-theme="high-contrast"] h6,
html[data-theme="high-contrast"] i,
html[data-theme="high-contrast"] li {
  color: #ffffff !important;
}
html[data-theme="high-contrast"] a:focus,
html[data-theme="high-contrast"] button:focus {
  outline: 3px solid #ffff00 !important;
  outline-offset: 3px !important;
}
html[data-theme="high-contrast"] .glass-card,
html[data-theme="high-contrast"] .card-inner-wave,
html[data-theme="high-contrast"] .grid-item,
html[data-theme="high-contrast"] .a11y-panel,
html[data-theme="high-contrast"] .nav-v2-mega-menu,
html[data-theme="high-contrast"] .nav-v2-mobile-overlay,
html[data-theme="high-contrast"] .nav-v2-header,
html[data-theme="high-contrast"] footer {
  border: 2px solid #ffffff !important;
  background: #000000 !important;
}
html[data-theme="high-contrast"] .nav-v2-link-btn,
html[data-theme="high-contrast"] .nav-v2-login-btn {
  border: 1px solid #ffffff !important;
  padding: 6px 12px !important;
  margin: 4px !important;
  border-radius: 8px !important;
}
html[data-theme="high-contrast"] .scrolled {
  background: #000000 !important;
  border-bottom: 2px solid #ffffff !important;
}
html[data-theme="high-contrast"] input,
html[data-theme="high-contrast"] select,
html[data-theme="high-contrast"] textarea {
  border: 2px solid #ffffff !important;
  background: #000000 !important;
  color: #ffffff !important;
}

/* --- Text Size Overrides --- */
html[data-text-size="large"] {
  --body-fs: 23px;
  --body-small-fs: 20px;
  --lead-fs: 1.5rem;
  --h1-fs: 4.5rem;
  --h2-fs: 4rem;
  --h3-fs: 3.5rem;
  --h4-fs: 3rem;
  --h5-fs: 2.5rem;
  --h6-fs: 1.8rem;
  --ui-fs: 1.2rem;
  --nav-primary-fs: 1.1rem;
}
html[data-text-size="xlarge"] {
  --body-fs: 27px;
  --body-small-fs: 23px;
  --lead-fs: 1.7rem;
  --h1-fs: 5rem;
  --h2-fs: 4.5rem;
  --h3-fs: 4rem;
  --h4-fs: 3.5rem;
  --h5-fs: 3rem;
  --h6-fs: 2.1rem;
  --ui-fs: 1.4rem;
  --nav-primary-fs: 1.25rem;
}

/* --- Line Height Overrides --- */
html[data-line-height="large"] {
  --body-lh: 1.75;
  --body-small-lh: 1.75;
  --lead-lh: 1.75;
  --h1-lh: 1.3;
  --h2-lh: 1.3;
  --h3-lh: 1.3;
}
html[data-line-height="xlarge"] {
  --body-lh: 2.0;
  --body-small-lh: 2.0;
  --lead-lh: 2.0;
  --h1-lh: 1.5;
  --h2-lh: 1.5;
  --h3-lh: 1.5;
}

/* --- Dyslexia Mode --- */
html[data-dyslexia="true"] {
  --textfont: 'TheSansMono' !important;
  --body-ls: 0.1em !important;
}

html[data-dyslexia="true"] *,
html[data-dyslexia="true"] ::before,
html[data-dyslexia="true"] ::after {
  font-family: 'TheSansMono' !important;
}

html[data-dyslexia="true"] body,
html[data-dyslexia="true"] p,
html[data-dyslexia="true"] h1,
html[data-dyslexia="true"] h2,
html[data-dyslexia="true"] h3,
html[data-dyslexia="true"] h4,
html[data-dyslexia="true"] h5,
html[data-dyslexia="true"] h6,
html[data-dyslexia="true"] span,
html[data-dyslexia="true"] a,
html[data-dyslexia="true"] button {
  letter-spacing: 0.1em !important;
  word-spacing: 0.2em !important;
}

/* --- Large Cursor --- */
html[data-cursor="large"], html[data-cursor="large"] * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="%231d1d1f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4l16 16M4 4v16l4-4h8z"/><path d="M4 4v16l4-4h8l4 4"/></svg>'), auto !important;
}
html[data-theme="dark"][data-cursor="large"], html[data-theme="dark"][data-cursor="large"] * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4l16 16M4 4v16l4-4h8z"/><path d="M4 4v16l4-4h8l4 4"/></svg>'), auto !important;
}
html[data-theme="high-contrast"][data-cursor="large"], html[data-theme="high-contrast"][data-cursor="large"] * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="%23ffff00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4l16 16M4 4v16l4-4h8z"/><path d="M4 4v16l4-4h8l4 4"/></svg>'), auto !important;
}

/* --- Color Blindness Matrix Filters --- */
html[data-color-blindness="protanopia"] { filter: url('#filter-protanopia'); }
html[data-color-blindness="deuteranopia"] { filter: url('#filter-deuteranopia'); }
html[data-color-blindness="tritanopia"] { filter: url('#filter-tritanopia'); }
html[data-grayscale="true"] { filter: grayscale(100%) !important; }

/* --- Blue Filter Overlay --- */
.blue-filter-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 147, 41, 0.15); /* Warm amber overlay */
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 9998;
  display: none;
}
html[data-blue-filter="true"] .blue-filter-overlay {
  display: block;
}

/* --- Speech Visual Reading Highlight --- */
.reading-highlight {
  outline: 4px solid var(--accent-color) !important;
  outline-offset: 8px;
  background-color: rgba(167, 0, 50, 0.05) !important;
  border-radius: 12px;
  transition: all var(--dur-base) var(--ease-out);
}
html[data-theme="high-contrast"] .reading-highlight {
  outline: 4px solid #ffff00 !important;
  background-color: transparent !important;
}

/* --- Reduced Motion (system + user toggle) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

html[data-reduced-motion="true"] *,
html[data-reduced-motion="true"] *::before,
html[data-reduced-motion="true"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* --- Accessibility Control Panel Overlay --- */
.a11y-panel-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.a11y-panel-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* --- Accessibility Sliding Panel (immer Dark Mode, unabhängig vom Seiten-Theme) --- */
.a11y-panel {
  position: fixed;
  top: 0;
  right: -480px;
  width: 100%;
  max-width: 480px;
  height: 100vh;
  height: 100svh;
  background: rgba(22, 22, 23, 0.94);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: -10px 0 32px rgba(0, 0, 0, 0.42);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  transition: right 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  color: #ffffff;
  overflow: hidden;
}
.a11y-panel.is-open {
  right: 0;
}

.a11y-header {
  padding: 24px 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.a11y-header h2 {
  font-size: 1.5rem !important;
  margin: 0 !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important; /* Optimiertes Premium-Kerning für 24px */
}
.a11y-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease-out);
}
.a11y-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transform: scale(1.05);
}
.a11y-close:focus-visible {
  outline: 2px solid #888888; /* neutral gray instead of red accent */
  outline-offset: 2px;
}

.a11y-content {
  padding: 24px 30px 40px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.a11y-content::-webkit-scrollbar {
  width: 6px;
}
.a11y-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.a11y-section {
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.06); /* Grouped list background */
  padding: 8px 20px 8px; /* Tighter padding for list items */
  border-radius: 12px; /* iOS corner radius */
  border: none; /* No outline */
}
.a11y-section h3 {
  font-family: var(--nav-v2-font) !important;
  font-size: 0.75rem !important; /* 12px */
  font-weight: 400 !important; /* regular */
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--text-grey) !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

.a11y-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.a11y-control:last-child {
  border-bottom: none;
}
.a11y-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.a11y-label i, .a11y-label svg {
  width: 20px;
  height: 20px;
  opacity: 0.95;
  color: #ffffff;
  stroke: #ffffff;
  stroke-width: 1.75;
}

/* --- Premium-Style Control Elements --- */
.a11y-select {
  appearance: none;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  padding: 8px 32px 8px 16px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='white' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 12px) center;
  width: 200px;
  box-sizing: border-box;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.a11y-select:hover {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.15);
}
.a11y-select:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
}
.a11y-select option {
  background-color: #1c1c1e;
  color: #ffffff;
}

.a11y-btn-group {
  display: flex;
  background: rgba(0, 0, 0, 0.25);
  padding: 3px;
  border-radius: 10px; /* Slightly tighter radius for Segmented Control */
}
.a11y-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  padding: 6px 14px;
  border-radius: 8px; /* Inner pill radius */
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.a11y-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}
.a11y-btn.active {
  background: rgba(255, 255, 255, 0.18); /* Elegant grey plate instead of red */
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.a11y-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* --- Premium Switch --- */
.switch {
  position: relative;
  display: inline-block;
  width: 51px;
  height: 31px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(120, 120, 128, 0.32); /* iOS inactive track */
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 31px;
  border: none;
}
.slider:before {
  position: absolute;
  content: "";
  height: 27px;
  width: 27px;
  left: 2px;
  bottom: 2px;
  background-color: #ffffff;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); /* Spring-like bounce */
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16);
}
input:checked + .slider {
  background-color: #34c759; /* Premium green */
}
input:focus-visible + .slider {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}
input:checked + .slider:before {
  transform: translateX(20px);
}

/* --- Reset & Announcer Utilities --- */
.a11y-reset {
  width: 100%;
  padding: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 400; /* Regular weight */
  letter-spacing: normal; /* Normales Kerning */
  font-family: 'TheSansOffice', sans-serif;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.24s cubic-bezier(0.23, 1, 0.32, 1);
}
.a11y-reset:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  transform: translateY(-1px);
}
.a11y-reset:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.10);
}
.a11y-reset:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  .a11y-reset {
    margin-top: 4px;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --- Barrierefreiheit Button Kreis & Icon-Anpassungen --- */
#a11y-toggle-btn {
  position: relative;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: #ffffff;
  transition: transform 0.3s var(--nav-v2-ease), border-color 0.3s var(--nav-v2-ease), outline-offset 0.2s ease;
}

#a11y-toggle-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}

#a11y-toggle-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  border-color: #ffffff;
}

#a11y-toggle-btn:hover {
  background: transparent;
  border-color: #ffffff;
  transform: scale(1.08);
  color: #ffffff;
}

#a11y-toggle-btn i,
#a11y-toggle-btn svg {
  width: 15px;
  height: 15px;
  display: block;
  color: #ffffff;
}

/* Tooltip / Sichtbares Label bei Hover & Tastatur-Fokus */
.a11y-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform-origin: top center;
  transform: translateX(-50%) translateY(4px) scale(0.94);
  padding: 4px 10px;
  font-family: var(--nav-v2-font, 'TheSansOffice', 'TheSans', sans-serif);
  font-size: 0.75rem; /* 12px */
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: #ffffff;
  background: rgba(22, 22, 24, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
              visibility 160ms;
  z-index: 100;
}

/* Sichtbar bei Hover oder Tastatur-Fokus */
#a11y-toggle-btn:hover .a11y-tooltip,
#a11y-toggle-btn:focus-visible .a11y-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Wenn das Barrierefreiheits-Menü geöffnet ist, Tooltip ausblenden */
#a11y-toggle-btn[aria-expanded="true"] .a11y-tooltip {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* High Contrast Override for Circular Button & Tooltip */
html[data-theme="high-contrast"] #a11y-toggle-btn {
  border: 2px solid #ffffff !important;
  background: #000000 !important;
  color: #ffffff !important;
}

html[data-theme="high-contrast"] #a11y-toggle-btn:focus-visible {
  outline: 3px solid #ffff00 !important;
  outline-offset: 3px !important;
}

html[data-theme="high-contrast"] .a11y-tooltip {
  background: #000000 !important;
  border: 2px solid #ffff00 !important;
  color: #ffff00 !important;
  box-shadow: none !important;
}

/* Mobile & Tablet Spacing Adjustments */
@media (max-width: 1024px) {
  #a11y-toggle-btn {
    margin-right: 0 !important;
  }
}
@media (max-width: 768px) {
  .nav-v2-actions-group {
    gap: 12px;
  }
}

/* =========================================================
   ACCESSIBILITY PANEL — THEME-OVERRIDES
   Das Panel ist per Default immer dark (siehe .a11y-panel oben).
   Nur der High-Contrast-Modus überschreibt diese Darstellung,
   da Nutzer im High-Contrast-Modus das Panel ebenfalls kontrastreich brauchen.
   ========================================================= */

/* --- High Contrast Theme Adaptive --- */
html[data-theme="high-contrast"] .a11y-panel {
  background: #000000 !important;
  border-left: 2px solid #ffffff !important;
  box-shadow: none !important;
  color: #ffffff !important;
}
html[data-theme="high-contrast"] .a11y-header {
  border-bottom: 2px solid #ffffff !important;
}
html[data-theme="high-contrast"] .a11y-header h2 {
  color: #ffffff !important;
}
html[data-theme="high-contrast"] .a11y-close {
  background: #000000 !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
}
html[data-theme="high-contrast"] .a11y-close:hover {
  background: #ffffff !important;
  color: #000000 !important;
}
html[data-theme="high-contrast"] .a11y-section {
  background: #000000 !important;
  border: 2px solid #ffffff !important;
}
html[data-theme="high-contrast"] .a11y-section h3 {
  color: #ffffff !important;
}
html[data-theme="high-contrast"] .a11y-control {
  border-bottom: 1px solid #ffffff !important;
}
html[data-theme="high-contrast"] .a11y-label {
  color: #ffffff !important;
}
html[data-theme="high-contrast"] .a11y-label i,
html[data-theme="high-contrast"] .a11y-label svg {
  color: #ffff00 !important;
}
html[data-theme="high-contrast"] .a11y-select {
  background-color: #000000 !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='white' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 12px) center !important;
}
html[data-theme="high-contrast"] .a11y-select option {
  background-color: #000000 !important;
  color: #ffffff !important;
}
html[data-theme="high-contrast"] .a11y-btn-group {
  background: #000000 !important;
  border: 2px solid #ffffff !important;
}
html[data-theme="high-contrast"] .a11y-btn {
  color: #ffffff !important;
}
html[data-theme="high-contrast"] .a11y-btn.active {
  background: #ffff00 !important;
  color: #000000 !important;
}
html[data-theme="high-contrast"] .slider {
  background-color: #000000 !important;
  border: 2px solid #ffffff !important;
}
html[data-theme="high-contrast"] input:checked + .slider {
  background-color: #ffff00 !important;
}
html[data-theme="high-contrast"] .slider:before {
  background-color: #ffffff !important;
}
html[data-theme="high-contrast"] .a11y-reset {
  background: #000000 !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
}
html[data-theme="high-contrast"] .a11y-reset:hover {
  background: #ffff00 !important;
  color: #000000 !important;
  border-color: #ffff00 !important;
}


/* --- partials/sections/hero-typewriter/hero-typewriter.css --- */
/* =========================================================
   HERO TYPEWRITER
   Typografischer Intro-Hero mit mechanischem Typewriter-Effekt
   ========================================================= */

.hero-typewriter-wrapper {
  position: relative;
  z-index: 1; /* For sticky stack: Nachfolgende Sektionen wie video-loop (z-index: 10) schieben sich darüber */
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--section-padding-block, clamp(2.5rem, 5vw, 5rem)) var(--section-padding-inline, clamp(20px, 2rem, 44px));
  background-color: var(--color-bg, #fbfbfd);
  color: var(--text-color, #1d1d1f);
  font-family: var(--textfont);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

.hero-typewriter-wrapper ::selection {
  background-color: var(--accent-color, #a60032);
  color: #ffffff;
}

.hero-typewriter-container {
  width: 100%;
  max-width: var(--container-1024, 64rem);
  margin: 0 auto;
  text-align: left;
  box-sizing: border-box;
}

/* iPad & Tablets im Querformat (Landscape):
   Text harmonisch weiter in die Bildschirmitte einrücken */
@media (min-width: 768px) and (max-width: 1280px) and (min-height: 500px) and (orientation: landscape) {
  .hero-typewriter-container {
    padding-left: clamp(5rem, 17.5vw, 11.25rem);
    padding-right: clamp(1rem, 3vw, 2.5rem);
  }
}

h1.hero-typewriter-title,
.hero-typewriter-title,
.hero-typewriter-char {
  font-family: 'TheSansOffice', 'TheSans', var(--textfont);
  font-weight: 600 !important;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

.hero-typewriter-title {
  font-size: clamp(2.625rem, 4vw + 1rem, 4.5rem);
  line-height: 1.07;
  letter-spacing: -0.015em;
  white-space: pre-wrap;
  margin: 0;
  padding: 0;
  color: inherit;
}

@media (min-width: 1025px) {
  .hero-typewriter-title {
    letter-spacing: -0.035em;
  }
}

@media (max-width: 768px) {
  .hero-typewriter-title {
    letter-spacing: -0.012em;
  }
}

.hero-typewriter-char {
  display: none;
}

.hero-typewriter-char.is-visible {
  display: inline-block;
}

br.hero-typewriter-char.is-visible {
  display: inline;
}

.hero-typewriter-highlight {
  color: var(--accent-color, #a60032);
}

/* Schreibmaschinen-Text-Cursor (Blinkender vertikaler Balken) */
.hero-typewriter-cursor {
  display: inline-block;
  width: 3.5px;
  min-width: 3.5px;
  height: 0.88em;
  background-color: var(--text-color, #1d1d1f) !important;
  vertical-align: -0.06em;
  border-radius: 2px;
  margin-left: 3px;
  opacity: 1;
  animation: hero-typewriter-blink 0.9s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}

.hero-typewriter-cursor::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: inherit;
  border-radius: inherit;
}

@media (min-width: 768px) {
  .hero-typewriter-cursor {
    width: 4px;
    min-width: 4px;
    margin-left: 4px;
  }
}

@keyframes hero-typewriter-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-typewriter-char {
    display: inline-block !important;
  }
  br.hero-typewriter-char {
    display: inline !important;
  }
  .hero-typewriter-cursor {
    animation: none;
    opacity: 1 !important;
  }
}

html[data-theme="dark"] .hero-typewriter-cursor,
[data-theme="dark"] .hero-typewriter-cursor {
  background-color: #f5f5f7 !important;
}


/* --- partials/sections/hero-editorial/hero-editorial.css --- */
/* =========================================================
   HERO EDITORIAL
   Editorial Hero mit Slogan oben links, viel Weißraum
   und Video-Player unten rechts im kleineren Format.
   ========================================================= */

.hero-editorial {
  position: relative;
  width: 100%;
  /* height (nicht nur min-height) ist nötig damit space-between die volle
     Viewport-Höhe nutzt und das Video tatsächlich am unteren Rand sitzt */
  height: 100vh;
  height: 100svh;
  min-height: 560px; /* Fallback für sehr kleine Screens */
  background-color: var(--color-bg-white, #ffffff);
  /* Standardisiertes Padding: oben/unten --section-padding-block, rechts/links --section-padding-inline */
  padding-top: calc(var(--nav-height, 44px) + var(--section-padding-block, clamp(3rem, 5vw, 5rem)));
  padding-bottom: var(--section-padding-block, clamp(3rem, 5vw, 5rem));
  padding-inline: var(--section-padding-inline, clamp(1.25rem, 3.5vw, 3rem));
  padding-left: calc(var(--section-padding-inline, clamp(1.25rem, 3.5vw, 3rem)) + env(safe-area-inset-left));
  padding-right: calc(var(--section-padding-inline, clamp(1.25rem, 3.5vw, 3rem)) + env(safe-area-inset-right));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--section-padding-inline, clamp(1.25rem, 3.5vw, 3rem));
  overflow: hidden;
}



/* ── Slogan / Headline oben links ─────────────────────────── */

.hero-editorial__title {
  position: relative;
  z-index: 3;
  font-family: var(--displayfont, 'TheSansOffice', 'TheSans', sans-serif);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text-color);
  text-wrap: balance;
  text-align: left;
  align-self: flex-start;
  max-width: 100%;
  /* Global section > * Regel explizit zurücksetzen */
  margin: 0;
  margin-inline: 0;
  padding: 0;
  white-space: normal;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Reveal initial state */
  opacity: 0;
  transform: translateY(18px);
}

.hero-editorial__title.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1024px) {
  .hero-editorial__title {
    font-size: var(--hero-fs, clamp(2.5rem, 1.25rem + 5.25vw, 4rem)); /* ca. 64px (4rem) auf Desktop */
    line-height: var(--hero-lh, 1.05);
    letter-spacing: -0.022em;
  }
}

/* iPad Pro 12.9" (1366×1024) & iPad Pro 13" (1376×1032) – Landscape View: 4rem (64px), linksbündige Headline, rechtsbündiges Video */
@media (min-width: 1024px) and (max-width: 1376px) and (orientation: landscape) {
  .hero-editorial {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
  }

  .hero-editorial__title {
    font-size: 4rem !important; /* 64px Desktop-Fontsize */
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.022em !important;
    text-align: left !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    width: auto !important;
    max-width: 100% !important;
  }

  .hero-editorial__line {
    text-align: left !important;
    display: inline-block !important;
    white-space: nowrap !important;
  }

  .hero-editorial__media {
    align-self: flex-end !important;
    margin-top: auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    width: min(650px, 100%) !important;
    max-width: 650px !important;
  }
}

.hero-editorial__line {
  display: inline-block;
  white-space: nowrap; /* Garantiert: Zeile bricht NIEMALS in sich selbst um */
}

.hero-editorial__highlight {
  color: var(--saeule02-rot, #a60032);
}

/* ── Marquee Textanimation (hinter dem Video, läuft nach links) ── */

.hero-editorial__marquee {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--hero-marquee-top, 35%);
  transform: translateY(-50%);
  width: 100%;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1; /* Hinter dem Video (z-index: 2), vor dem Section-Hintergrund */
  opacity: 0.045;
  display: flex;
  justify-content: flex-start;
  text-align: left;
  user-select: none;
}

.hero-editorial__marquee-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: heroEditorialMarquee 85s linear infinite;
  transform: translateX(25vw) translateZ(0);
  will-change: transform;
}

.hero-editorial__marquee-track span {
  flex-shrink: 0;
  font-family: 'TheSansOffice', 'TheSans', sans-serif;
  font-size: clamp(2.75rem, 9vw, 11rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--text-color, #1d1d1f);
  padding-right: clamp(4rem, 8vw, 10rem);
  padding-block: 0.25em; /* Symmetrischer Puffer oben und unten fuer exakte vertikale Mitten-Zentrierung */
  line-height: 1.15;
}

@keyframes heroEditorialMarquee {
  0% { transform: translateX(25vw); }
  100% { transform: translateX(calc(-50% + 25vw)); }
}

/* ── Video Media Container (unten rechts, kleinere Darstellung) ── */

.hero-editorial__media {
  position: relative;
  z-index: 2; /* Vor dem Marquee-Text (z-index: 1) */
  align-self: flex-end;
  margin-top: auto;
  margin-left: auto;
  /* Global section > * Regel explizit zurücksetzen – kein auto-Centering */
  /* Video schließt innerhalb des Section-Paddings ab */
  margin-right: 0;
  margin-bottom: 0;
  /* Breite: exakt 980px */
  width: min(980px, 100%);
  max-width: 1024px;
  aspect-ratio: 16 / 9;
  /* Harmonische Rundung an allen Ecken */
  border-radius: clamp(16px, 1.6vw, 26px);
  overflow: hidden;
  background: #111113;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 4px 24px -4px rgba(0, 0, 0, 0.08),
    0 24px 64px -16px rgba(0, 0, 0, 0.14);

  /* Reveal initial state */
  opacity: 0;
  transform: translateY(20px) scale(0.985);
}

.hero-editorial__media.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Video ────────────────────────────────────────────────── */

.hero-editorial__video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  border: none;
  outline: none;
  border-radius: inherit;
}

/* ── Optional Overlay (nur wenn Kicker/Subtitle/CTA explizit gesetzt) ── */

.hero-editorial__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.2) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}

.hero-editorial__overlay-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  padding: clamp(1rem, 2vw, 1.75rem);
}

.hero-editorial__overlay-left {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(10px);
}

.hero-editorial__overlay-left.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.hero-editorial__kicker {
  font-family: 'TheSans', 'TheSansOffice', var(--textfont);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1;
  margin: 0;
}

.hero-editorial__subtitle {
  font-family: 'TheSans', 'TheSansOffice', var(--textfont);
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hero-editorial__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'TheSans', 'TheSansOffice', var(--textfont);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.35rem 0;
  transition: opacity 180ms ease;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(10px);
}

.hero-editorial__cta.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.hero-editorial__cta:hover {
  opacity: 0.75;
}

.hero-editorial__cta svg {
  width: 16px;
  height: 16px;
  transition: transform 180ms ease;
}

.hero-editorial__cta:hover svg {
  transform: translate(2px, -2px);
}

/* ── Fullscreen Option (optional, wenn data-fullscreen="true") ─ */

.hero-editorial--fullscreen {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 100svh;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  display: block;
  background: #000000;
}

/* fullscreen: media nimmt gesamte Section ein */
.hero-editorial--fullscreen .hero-editorial__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  background: #000000;
  opacity: 1 !important;
  transform: none !important;
}

.hero-editorial--fullscreen .hero-editorial__media.is-revealed {
  opacity: 1 !important;
  transform: none !important;
}

.hero-editorial--fullscreen .hero-editorial__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Reduced Motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hero-editorial__title,
  .hero-editorial__media,
  .hero-editorial__overlay-left,
  .hero-editorial__cta {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-editorial__marquee-track {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .hero-editorial {
    height: auto;
    min-height: 100svh;
    padding-top: calc(var(--nav-height, 44px) + var(--section-padding-block, clamp(2.5rem, 4vw, 3rem)));
    padding-bottom: var(--section-padding-block, clamp(2.5rem, 4vw, 3rem));
    padding-inline: var(--section-padding-inline, 20px);
    gap: var(--section-padding-block, 2rem);
  }

  .hero-editorial__title {
    font-size: clamp(1.625rem, 6.4vw, 2.75rem);
    letter-spacing: -0.014em;
    max-width: 100%;
  }

  .hero-editorial__media {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    border-radius: clamp(14px, 1.5vw, 20px);
    aspect-ratio: 16 / 9;
  }
}

/* iPad & iPhone Portrait: Headline reicht bis an den rechten Rand, Video hochkant (2:3) über volle Inhaltsbreite */
@media (max-width: 1040px) and (orientation: portrait) {
  .hero-editorial {
    height: auto !important;
    min-height: 100svh !important;
    padding-top: calc(var(--nav-height, 44px) + clamp(1.25rem, 3vw, 2rem)) !important;
    padding-bottom: calc(clamp(1.5rem, 3.5vw, 2.5rem) + env(safe-area-inset-bottom, 0px)) !important;
    padding-inline: var(--section-padding-inline, 20px) !important;
    padding-left: calc(var(--section-padding-inline, 20px) + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(var(--section-padding-inline, 20px) + env(safe-area-inset-right, 0px)) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: clamp(6rem, 13.5svh, 9.5rem) !important;
    box-sizing: border-box !important;
  }

  .hero-editorial__title {
    font-size: calc((100vw - (2 * var(--section-padding-inline, 20px))) / 11.25) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.022em !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
  }

  .hero-editorial__marquee {
    opacity: 0.065;
  }

  .hero-editorial__marquee-track span {
    font-size: clamp(3.25rem, 11.5vw, 6.5rem);
    padding-right: clamp(3rem, 7vw, 6rem);
  }

  .hero-editorial__media {
    aspect-ratio: 2 / 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    align-self: stretch !important;
    margin: 0 !important;
    border-radius: clamp(16px, 3.5vw, 24px) !important;
  }
}

@media (max-height: 580px) and (orientation: landscape) {
  .hero-editorial {
    min-height: auto;
    padding-top: calc(var(--nav-height, 44px) + var(--section-padding-block, 2rem));
    padding-bottom: var(--section-padding-block, 2rem);
  }

  .hero-editorial__title {
    font-size: clamp(1.5rem, 4.5vh, 2rem);
  }

  .hero-editorial__media {
    max-width: clamp(280px, 38vw, 420px);
  }
}


/* --- partials/sections/hero-index/hero-index.css --- */
/* =========================================================
   HERO INDEX (Optimized Premium)
   ========================================================= */

.hero-index-wrapper {
  position: relative;
  z-index: 1; /* For sticky stack */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  height: 100vh !important; /* Fallback + override GSAP inline style */
  height: 100svh !important;
  min-height: 640px; 
  overflow: hidden;
  display: flex;
  align-items: center; /* Zentriert (Premium-Style Override) */
  justify-content: center; /* Zentriert */
  background-color: #ffffff; /* Heller Theme Override */
}

.hero-index-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-index-bg-inner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  transform: scale(1.08); /* Etwas mehr Zoom für epischen Ken-Burns */
  transform-origin: center center;
}

/* Weicher, komplexer Verlauf für perfekten Text-Kontrast ohne harte Schatten */
.hero-index-overlay {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.15) 60%, transparent 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 25%);
  z-index: 1;
  pointer-events: none;
}

.hero-index-content {
  position: relative;
  z-index: 100;
  pointer-events: none;
  width: 100%;
  max-width: var(--container-1440, 1440px);
  margin-inline: auto;
  padding: 0; /* Padding null für echtes Centering */
  display: flex;
  flex-direction: column;
  align-items: center; /* Zentriert */
  text-align: center;
  top: -60px !important;
}

.hero-index-kicker,
.hero-index-title,
.hero-index-lead,
.hero-index-cue {
  pointer-events: auto;
  position: relative;
  z-index: 101;
}

/* Kicker / Logo Container: Clean, no glassmorphism */
.hero-index-kicker {
  display: block;
  margin: 0 auto 4rem auto; /* Spacing for the logo */
  position: relative;
  
  /* Initial animation state (Emil Kowalski style) */
  opacity: 0;
  transform: scale(0.95) translateY(20px);
  filter: blur(4px);
}

/* Headline: Kompakt, groß, souverän */
.hero-index-title {
  font-family: var(--displayfont);
  font-size: clamp(2.5rem, 5vw + 1rem, 5.5rem);
  font-weight: 700;
  line-height: 1.05; /* Etwas runderer Durchschuss */
  letter-spacing: -0.03em;
  color: var(--text-white);
  max-width: 18ch;
  margin-bottom: 1.25rem;
  text-wrap: balance;
  /* Reduzierter Text-Shadow, da der Overlay-Gradient den Job macht */
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); 
  
  /* Initial animation state (Emil Kowalski style) */
  opacity: 0;
  transform: scale(0.95) translateY(20px);
  filter: blur(4px);
}

.hero-index-wrapper[data-theme="light"] .hero-index-title {
  color: #000000;
  max-width: none;
  text-shadow: none;
  font-size: clamp(2.625rem, 4vw + 1rem, 4.5rem);
  text-align: center;
}

.hero-index-logo {
  display: block;
  width: clamp(280px, 45vw, 400px);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Lead: Optimale Lesebreite, weicher Kontrast */
.hero-index-lead {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text-hero-lead, #dedee3);
  max-width: 38ch; /* Etwas kompakter */
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
  
  opacity: 0;
  transform: translateY(30px);
}

/* Scroll-Cue: minimalistischer Premium-Style Chevron mit weichem Bounce */
.hero-index-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(1.75rem, 4.5vh, 3rem);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-color);
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  animation: hero-index-cue-fade 1.2s ease 1.5s forwards;
  transition: color 0.3s ease;
}
.hero-index-cue:hover { color: var(--text-color); }

@keyframes hero-index-cue-fade {
  to { opacity: 1; }
}

.hero-index-cue-icon {
  animation: hero-index-bounce 2s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

@keyframes hero-index-bounce {
  0%, 100% {
    transform: translateY(-15%);
    opacity: 0.5;
  }
  50% {
    transform: translateY(15%);
    opacity: 1;
  }
}

/* Reduced Motion Fallback */
@media (prefers-reduced-motion: reduce) {
  .hero-index-bg { transform: scale(1) !important; }
  .hero-index-kicker, .hero-index-title, .hero-index-lead {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: none !important;
  }
  .hero-index-cue { opacity: 1 !important; }
  .hero-index-cue-icon { animation: none !important; opacity: 0.85; }
  .orbit-container, .orbit-image {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Desktop: Scroll Down Button ist sofort sichtbar ohne Reveal-Effekt */
@media (min-width: 1025px) {
  .hero-index-content.reveal .hero-index-cue,
  .hero-index-content.reveal.is-visible .hero-index-cue,
  .hero-index-cue {
    opacity: 1 !important;
    animation: none !important;
    transform: translateX(-50%) !important;
    transition: color 0.3s ease !important;
  }
}

/* Orbit Container & Animations (Wide Ellipse Path with 1:1 Undistorted Square Cards) */
.hero-index-wrapper {
  --orbit-item-size: clamp(84px, 7.5vw, 118px);
}

.orbit-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--orbit-item-size);
  height: var(--orbit-item-size);
  margin-left: calc(-0.5 * var(--orbit-item-size));
  margin-top: calc(-0.5 * var(--orbit-item-size));
}

.orbit-image {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: clamp(14px, 1.4vw, 20px);
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.orbit-image a.orbit-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.orbit-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .orbit-image:hover {
    transform: scale(1.15) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    z-index: 5;
  }
}

.orbit-image:active {
  transform: scale(1.04) !important;
  transition-duration: 80ms;
}




/* --- partials/sections/hero-dark/hero-dark.css --- */
/* =========================================================
   HERO DARK (Optimized Premium)
   ========================================================= */

.hero-dark-wrapper {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  height: 100vh;
  height: 100svh;
  min-height: 640px; 
  overflow: hidden;
  display: flex;
  align-items: flex-end; /* Bodenbündig für redaktionelle Tiefe */
  background-color: #000;
}

.hero-dark-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-dark-bg-backdrop {
  position: absolute;
  inset: -30px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: blur(40px) brightness(0.4);
  transform: scale(1.1);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.hero-dark-bg-inner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transform: scale(1.08); /* Ken-Burns Zoom webseitenweit beibehalten */
  transform-origin: center top;
  z-index: 1;
}


/* Weicher, komplexer Verlauf für perfekten Text-Kontrast ohne harte Schatten */
.hero-dark-overlay {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.15) 60%, transparent 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 25%);
  z-index: 1;
  pointer-events: none;
}

.hero-dark-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(var(--container-1200) + 2 * var(--section-padding-inline));
  margin-inline: auto;
  padding-top: clamp(1.5rem, 5vw, 4rem);
  padding-bottom: clamp(6rem, 14vh, 9rem); /* Etwas mehr Luft nach unten */
  padding-inline: var(--section-padding-inline);
  padding-left: calc(var(--section-padding-inline) + env(safe-area-inset-left));
  padding-right: calc(var(--section-padding-inline) + env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
}

/* Eyebrow: Pure, nackte Typografie (Kein Glassmorphism mehr) -> Reverted back to Glassmorphism from user request */
.hero-dark-kicker {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem; /* 12px */
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em; /* Apple-Tracking für Eyebrow */
  margin-bottom: 1.5rem;
  
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  border: none !important;
  box-shadow: none !important;
  
  color: var(--text-white, #f5f5f7);
  padding: 0.4rem 1rem 0.35rem; /* Weniger klobig, optisch zentriert */
  border-radius: var(--border-radius-pill, 9999px);
  position: relative;
  text-align: left;
}

/* Säulenfarben für Pillen/Kicker (rein flach, kein weißer Rand, kein 3D-Effekt) */
.hero-dark-kicker[data-saeule="saeule-01"],
.hero-dark-kicker[data-kicker="Katholische Schule"] {
  background: var(--saeule01-blau, #2292cc) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #ffffff !important;
}

.hero-dark-kicker[data-saeule="saeule-02"],
.hero-dark-kicker[data-kicker="Unterricht & Praxis"] {
  background: var(--saeule02-rot, #a60032) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #ffffff !important;
}

.hero-dark-kicker[data-saeule="saeule-03"],
.hero-dark-kicker[data-kicker="Schulgemeinschaft"],
.hero-dark-kicker[data-kicker="Schulleben"] {
  background: var(--saeule03-orange, #fab439) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #ffffff !important;
}

.hero-dark-kicker[data-saeule="saeule-04"],
.hero-dark-kicker[data-kicker="Unsere Wege"],
.hero-dark-kicker[data-kicker="Berufliche Orientierung"] {
  background: var(--saeule04-gruen, #95c11f) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #ffffff !important;
}

.hero-dark-kicker[data-saeule="saeule-05"],
.hero-dark-kicker[data-kicker="Beratung & Unterstützung"],
.hero-dark-kicker[data-kicker="Beratung"] {
  background: var(--saeule05-rosa, #e3599b) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #ffffff !important;
}

.hero-dark-kicker[data-saeule="saeule-06"],
.hero-dark-kicker[data-kicker="Internationales & Europa"],
.hero-dark-kicker[data-kicker="Europa & Erasmus+"],
.hero-dark-kicker[data-kicker="Europa"] {
  background: var(--saeule06-lila, #5458a3) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #ffffff !important;
}

.intro-dialog__meta-term[data-saeule="saeule-01"] { background: rgba(34, 146, 204, 0.25); border-color: rgba(34, 146, 204, 0.5); color: #fff; }
.intro-dialog__meta-term[data-saeule="saeule-02"] { background: rgba(166, 0, 50, 0.25); border-color: rgba(166, 0, 50, 0.5); color: #fff; }
.intro-dialog__meta-term[data-saeule="saeule-03"] { background: rgba(250, 180, 57, 0.25); border-color: rgba(250, 180, 57, 0.5); color: #fff; }
.intro-dialog__meta-term[data-saeule="saeule-04"] { background: rgba(149, 193, 31, 0.25); border-color: rgba(149, 193, 31, 0.5); color: #fff; }
.intro-dialog__meta-term[data-saeule="saeule-05"] { background: rgba(227, 89, 155, 0.25); border-color: rgba(227, 89, 155, 0.5); color: #fff; }
.intro-dialog__meta-term[data-saeule="saeule-06"] { background: rgba(84, 88, 163, 0.25); border-color: rgba(84, 88, 163, 0.5); color: #fff; }

.hero-dark-title {
  font-family: var(--displayfont);
  font-size: clamp(2.625rem, 4vw + 1rem, 4.5rem);
  font-weight: 700;
  line-height: 1.05; /* Etwas runderer Durchschuss */
  letter-spacing: var(--hero-title-ls, var(--hero-ls, -0.02em));
  color: #ffffff;
  max-width: min(32ch, 100%); /* Erhöht für lange deutsche Wörter */
  margin-bottom: 1.25rem;
  text-wrap: balance;
  text-align: left;
  /* Reduzierter Text-Shadow, da der Overlay-Gradient den Job macht */
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Lead: Großzügige Breite, bleibt deutlich länger einzeilig */
.hero-dark-lead {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text-hero-lead, #dedee3);
  max-width: min(70ch, 100%);
  text-wrap: pretty;
  text-align: left;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Scroll-Cue: minimalistischer Premium-Style Chevron mit weichem Bounce */
.hero-dark-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(1.75rem, 4.5vh, 3rem);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  color: rgba(245, 245, 247, 0.5);
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  animation: hero-dark-cue-fade 1.2s ease 1.5s forwards;
  transition: color 0.3s ease;
}
.hero-dark-cue:hover { color: rgba(245, 245, 247, 1); }

@keyframes hero-dark-cue-fade {
  to { opacity: 1; }
}

.hero-dark-cue-icon {
  animation: hero-dark-bounce 2s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

@keyframes hero-dark-bounce {
  0%, 100% {
    transform: translateY(-15%);
    opacity: 0.5;
  }
  50% {
    transform: translateY(15%);
    opacity: 1;
  }
}

/* Reduced Motion Fallback */
@media (prefers-reduced-motion: reduce) {
  .hero-dark-bg { transform: scale(1) !important; }
  .hero-dark-kicker, .hero-dark-title, .hero-dark-lead {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: none !important;
  }
  .hero-dark-cue { opacity: 1 !important; }
  .hero-dark-cue-icon { animation: none !important; opacity: 0.85; }
}

/* --- partials/sections/podcast/podcast.css --- */
/* =========================================================
   Partial: PODCAST
   ========================================================= */

.podcast {
  background-color: var(--bg-grey);
  color: var(--text-color);
  overflow-x: hidden;
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1, "pnum" 1;
}

/* Container managed globally via .container */

.podcast__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-64, 4rem);
}

.podcast__separator-wrapper {
  width: 100%;
  margin-inline: auto;
}

.podcast__separator {
  border: 0;
  border-top: 1px solid var(--text-grey);
  margin: 0;
}

/* Episode Layout */
.podcast-episode {
  width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48, 3rem);
  align-items: start;
}

@media (min-width: 1024px) {
  .podcast-episode {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-80, 5rem);
  }
}

/* Image Area */
.podcast-episode__image-area {
  width: 100%;
  display: flex;
  justify-content: center;
  order: 1;
}

@media (min-width: 1024px) {
  .podcast-episode__image-area {
    justify-content: flex-end;
  }
  
  .podcast-episode--reverse .podcast-episode__image-area {
    order: 2;
    justify-content: flex-start;
  }
}

.podcast-episode__image-wrapper {
  position: relative;
  width: 100%;
  max-width: 768px;
  aspect-ratio: 3 / 2;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  transition: transform var(--dur-slow) var(--ease-out);
}

.podcast-episode__image-wrapper:hover {
  transform: scale(1.02);
}

.podcast-episode__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.podcast-episode__image-overlay {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: inherit;
  pointer-events: none;
}

/* Content Area */
.podcast-episode__content-area {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 768px;
  position: relative;
  order: 2;
}

@media (min-width: 1024px) {
  .podcast-episode--reverse .podcast-episode__content-area {
    order: 1;
    margin-left: auto;
  }
}

.podcast-episode__number-title {
  font-family: var(--textfont);
  color: var(--text-color);
  line-height: 1;
  margin-bottom: var(--space-16, 1rem);
  margin-top: -0.15em;
}

@media (min-width: 1024px) {
  .podcast-episode__number-title {
    margin-bottom: var(--space-24, 1.5rem);
    margin-top: 0;
  }
}

.podcast-episode__number {
  font-family: var(--textfont);
  font-weight: bold;
  color: var(--accent-color, #a60032);
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1, "pnum" 1;
}

.podcast-episode__text-content {
  margin-bottom: var(--space-40, 2.5rem);
}

.podcast-episode__title {
  margin-bottom: var(--space-12, 0.75rem);
  font-family: var(--textfont);
  color: var(--text-color);
}

@media (min-width: 1024px) {
  .podcast-episode__title {
    margin-top: -4px;
  }
}

.podcast-episode__description {
  font-size: var(--body-fs, 1.125rem);
  color: var(--text-color);
  line-height: 1.6;
  font-weight: 500;
  white-space: pre-line; /* respektiert die &#10;-Absatzumbrüche aus data-description */
}

/* Player Area */
.podcast-episode__player-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-20, 1.25rem);
  width: 100%;
}

.podcast-episode__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.podcast-episode__meta-item {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-color);
}

.podcast-episode__player {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: var(--bg-white);
  padding: 10px 24px 10px 10px; /* p-2.5 pr-6 */
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(243,244,246,0.8); /* border-gray-100/80 */
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.podcast-episode__player:hover {
  box-shadow: var(--shadow-xl);
}

.podcast-episode__play-btn {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  border: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
  padding: 0;
}

.podcast-episode__play-btn:hover {
  transform: scale(1.05);
}

.podcast-episode__play-btn:active {
  transform: scale(0.95);
}

.podcast-episode__waveform {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-inline: 1.25rem; /* mx-5 */
  height: 2rem; /* h-8 */
  cursor: pointer;
  touch-action: none;
}

.waveform-bar {
  width: 3px;
  border-radius: var(--border-radius-pill);
  background-color: #D2D2D7;
  transition: height var(--dur-instant) var(--ease-out), background-color var(--dur-instant) var(--ease-out);
}

.waveform-bar--active {
  background-color: var(--text-color);
}

.podcast-episode__waveform:hover .waveform-bar {
  filter: brightness(0.9);
}

.podcast-episode__time {
  font-size: 0.75rem; /* text-xs */
  font-weight: 700;
  color: var(--text-color);
  font-family: 'TheSansMono';
  font-variant-numeric: tabular-nums oldstyle-nums;
  letter-spacing: -0.05em; /* tracking-tighter */
  flex-shrink: 0;
  width: 2.5rem; /* w-10 */
  text-align: right;
}


/* --- partials/sections/intro-dialog/intro-dialog.css --- */
/* ══════════════════════════════════════════════════════════
   Intro Dialog
   ══════════════════════════════════════════════════════════ */
.intro-dialog {
  position: relative;
  z-index: 20;
  width: 100%;
  color: var(--text-white);
  background-color: var(--bg-black);
  padding-block: var(--section-padding-block);
  overflow: hidden;
  font-variant-numeric: oldstyle-nums; 
}

.intro-dialog__container {
  width: min(100%, var(--container-1400, 87.5rem)); /* Wider container for editorial feel */
  margin-inline: auto;
  /* padding-inline removed to prevent double padding (section already has it) */
}

/* --- Layout --- */
.intro-dialog__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

@media (min-width: 1024px) {
  .intro-dialog__layout {
    display: grid;
    grid-template-columns: 3fr 1fr 8fr; /* 3 col meta, 1 col gap, 8 col text */
    align-items: start;
    gap: 0;
  }
  .intro-dialog__meta {
    grid-column: 1 / 2;
  }
  .intro-dialog__text {
    grid-column: 3 / 4;
  }
}

/* --- Meta Column (Left) --- */
.intro-dialog__meta {
  width: 100%;
}

.intro-dialog__divider {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1); /* Very subtle hairline */
  margin-bottom: var(--space-32);
}

.intro-dialog__meta-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  margin: 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet: Meta in row */
  .intro-dialog__meta-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-48);
  }
  .intro-dialog__meta-item {
    flex: 1 1 200px;
  }
}

.intro-dialog__meta-term {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 0.75rem; /* 12px */
  font-weight: 500;
  line-height: 1.14;
  text-transform: uppercase;
  letter-spacing: 0.08em; /* Elegant wide tracking */
  color: var(--text-grey);
  margin: 0 0 var(--space-8) 0;
}

.intro-dialog__meta-term svg {
  width: 14px;
  height: 14px;
  opacity: 0.8;
  transform: translateY(-1px);
}

.intro-dialog__meta-desc {
  font-size: 1.0625rem; /* 17px */
  font-weight: 400;
  line-height: 1.47;
  color: var(--text-white);
  margin: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* --- Text Column (Right) --- */
.intro-dialog__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.intro-dialog__text p {
  margin: 0;
  color: rgba(255, 255, 255, 0.95); /* Slightly softened from pure white */
  font-weight: 400; 
  font-size: var(--body-fs); /* 19px */
  line-height: var(--body-lh);
  letter-spacing: -0.015em;
  max-width: 32em; /* Optimal measure for reading */
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

/* Ensure the global .section-lead class doesn't ruin our custom measure and spacing */
.intro-dialog__text .section-lead {
  margin-top: 0;
  max-width: 32em;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}


/* =========================================================
   Premium Motion / Reveal (Emil Kowalski Style)
   ========================================================= */
/*
   We use an extremely smooth Premium-like bezier curve.
   It starts fast but decelerates gracefully over a long time.
*/
:root {
  --intro-reveal-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-reveal-intro: 550ms;
}

.intro-dialog .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-reveal-intro) var(--intro-reveal-ease),
              transform var(--dur-reveal-intro) var(--intro-reveal-ease);
}

/* Stagger Logic (50ms responsive cascading delay) */
.intro-dialog .reveal.stagger-1 { transition-delay: 0ms; }
.intro-dialog .reveal.stagger-2 { transition-delay: 50ms; }
.intro-dialog .reveal.stagger-3 { transition-delay: 100ms; }
.intro-dialog .reveal.stagger-4 { transition-delay: 150ms; }
.intro-dialog .reveal.stagger-5 { transition-delay: 200ms; }

.intro-dialog .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fallback for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .intro-dialog .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* --- partials/sections/kollegium/kollegium.css --- */
/* ══════════════════════════════════════════════════════════
   Kollegium-Sektion (Premium Stil)
   ══════════════════════════════════════════════════════════ */
#kollegium {
  background: var(--color-bg);
}

/* Section Head with Subheadline */
#kollegium .section-head:has(.section-subheadline),
.kollegium-section .section-head:has(.section-subheadline) {
  text-align: left;
  margin-inline: 0;
  margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
}

#kollegium .section-head .section-subheadline,
.kollegium-section .section-head .section-subheadline {
  text-align: left;
  margin-inline: 0;
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  #kollegium .section-head:has(.section-subheadline),
  .kollegium-section .section-head:has(.section-subheadline) {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    text-align: left;
  }
}

/* Grid */
.kollegium__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.2vw, 2rem);
}

/* Karte (Apple Ultra-Smooth Motion & GPU composited) */
.kollegium-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* consistent vertical rhythm */
  background: var(--color-surface);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  /* Hardware-Beschleunigung & Subpixel-Glättung */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Snappy Apple Scroll-Reveal (subtiler Hub von 8px + Micro-Scale 0.99, Emil Kowalski <300ms Rule) */
.kollegium-card.reveal {
  opacity: 0;
  -webkit-transform: translate3d(0, 10px, 0) scale3d(0.985, 0.985, 1);
  transform: translate3d(0, 10px, 0) scale3d(0.985, 0.985, 1);
  transition: opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.38s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.38s cubic-bezier(0.23, 1, 0.32, 1);
}

.kollegium-card.reveal.is-visible {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}

/* Apple Smooth Hover & Touch Animation (Desktop + iPhone/iPad) */
.kollegium-card.reveal.is-visible:hover,
.kollegium-card.reveal.is-visible:active,
.kollegium-card.reveal.is-visible:focus-within,
.kollegium-card.reveal.is-visible.is-touch-active,
.kollegium-card:hover,
.kollegium-card:active,
.kollegium-card:focus-within,
.kollegium-card.is-touch-active {
  box-shadow: var(--shadow-xl);
  -webkit-transform: translate3d(0, -4px, 0) scale3d(1, 1, 1);
  transform: translate3d(0, -4px, 0) scale3d(1, 1, 1);
  transition: transform 0.28s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.28s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (prefers-reduced-motion: reduce) {
  .kollegium-card,
  .kollegium-card.reveal,
  .kollegium-card:hover,
  .kollegium-card:active,
  .kollegium-card.is-touch-active {
    transition: opacity 0.2s ease;
    transform: none !important;
    -webkit-transform: none !important;
  }
}

.kollegium-card__media {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.kollegium-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.kollegium-card:hover .kollegium-card__media img,
.kollegium-card:active .kollegium-card__media img,
.kollegium-card:focus-within .kollegium-card__media img,
.kollegium-card.is-touch-active .kollegium-card__media img {
  -webkit-transform: scale3d(1.03, 1.03, 1);
  transform: scale3d(1.03, 1.03, 1);
}

.kollegium-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;          /* füllt die Karte, ermöglicht bündigen Mail-Button unten */
  padding: clamp(1.5rem, 2.4vw, 2.125rem);
}
.kollegium-card__name {
  /* Für iPhone (Mobile): Ästhetisch größere, prägnantere Typografie */
  font-size: 1.625rem; /* 26px */
  font-weight: 700; /* Bold for hierarchy */
  line-height: 1.25; /* Etwas tighter für die größere Schrift */
  letter-spacing: -0.02em; /* Typisches Premium-Tracking für große Headlines */
  color: var(--color-text-black);
  text-wrap: balance;
  font-feature-settings: "liga" 1, "kern" 1;
  margin-bottom: var(--space-20); /* added vertical spacing */
}

@media (min-width: 768px) {
  .kollegium-card__name {
    /* Für Tablet & Desktop: Dynamischer Scale (20px bis 25px) passend zum 3er-Grid */
    font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5625rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
}
.kollegium-card__subjects {
  margin: 0; /* spacing handled by parent flex gap */
  margin-bottom: var(--space-20); /* added larger gap to description */
  font-size: var(--body-fs);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.001em;
  color: var(--text-color);
  font-variant-numeric: oldstyle-nums;
}
.kollegium-card__subjects em {
  font-style: italic;
}
.kollegium-card__desc {
  margin: 0;
  margin-bottom: var(--space-28, 1.75rem) !important; /* Wichtiger Abstand zum Mail-Icon, unbeeinflusst von article__body p Reset */
  font-size: var(--body-small-fs);
  line-height: 1.5;
  letter-spacing: 0.002em;
  color: var(--text-muted);
  text-wrap: balance;
}

/* Mail-Button (Accent) */
.kollegium-card__mail {
  margin-top: auto;        /* immer bündig am unteren Kartenrand */
  align-self: flex-start;  /* immer links */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid #a60032;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a60032;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.kollegium-card__mail svg {
  width: 18px;
  height: 18px;
  display: block;
}

.kollegium-card__mail:hover,
.kollegium-card__mail:active,
.kollegium-card__mail:focus-visible,
.kollegium-card__mail.is-touch-active {
  background-color: #a60032;
  color: #fff;
  border-color: #a60032;
  -webkit-transform: scale3d(1.05, 1.05, 1);
  transform: scale3d(1.05, 1.05, 1);
}

/* Gestaffeltes Scroll-Reveal der Karten – sanfte Kaskade */
.kollegium__grid .reveal:nth-child(3n + 1) { transition-delay: 0.05s; }
.kollegium__grid .reveal:nth-child(3n + 2) { transition-delay: 0.14s; }
.kollegium__grid .reveal:nth-child(3n)     { transition-delay: 0.23s; }

/* iPad Portrait: 744px–1024px → 2 Spalten */
@media (max-width: 1024px) {
  .kollegium__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .kollegium__grid .reveal { transition-delay: 0s; }
}

/* iPhone / mobiles Apple-Gerät (≤ 768px) → 1 Spalte, 100% bündig mit Fließtext */
@media (max-width: 768px) {
  .kollegium__grid {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
  .kollegium-card {
    width: 100%;
    max-width: 100%;
  }
}

/* Standalone Single Card (Zentrierte einzelne Zeile) */
.kollegium__standalone {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: clamp(1.25rem, 2.2vw, 2rem);
}

.kollegium__standalone .kollegium-card {
  width: 100%;
  max-width: calc((100% - 2 * clamp(1.25rem, 2.2vw, 2rem)) / 3);
}

@media (max-width: 1024px) {
  .kollegium__standalone .kollegium-card {
    max-width: calc((100% - clamp(1.25rem, 2.2vw, 2rem)) / 2);
  }
}

@media (max-width: 768px) {
  .kollegium__standalone .kollegium-card {
    max-width: 480px;
  }
}

/* Bildungsgangleitung Card in Bildungsgängen (exaktes Format wie kollegium.html) */
.article__body .kollegium-card {
  width: 100%;
  max-width: 360px;
}

/* Dual Kollegium Cards Grid (z.B. Ansprechpersonen) */
.kollegium-section--transparent {
  background: transparent !important;
}

.kollegium-section--compact {
  padding-block: calc(var(--section-padding-block) / 2) var(--section-padding-block) !important;
}

.kollegium-grid--dual-wrap {
  max-width: calc(400px * 2 + var(--space-24, 1.5rem));
  margin-inline: auto;
}

.kollegium-grid--dual {
  display: flex;
  gap: var(--space-24, 1.5rem);
  flex-wrap: wrap;
  justify-content: center;
}

.kollegium-card--dual {
  flex: 1 1 300px;
  max-width: 400px;
}


/* --- partials/sections/kollegium-table/kollegium-table.css --- */
/* ══════════════════════════════════════════════════════════
   Kollegium-Tabelle (filter- & sortierbar)
   ══════════════════════════════════════════════════════════ */
#kollegium-table,
.kollegium-table-section {
  padding-block: var(--section-padding-block);
}
.ktable__wrap {
  overflow-x: auto;
  background: var(--color-surface);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
}

.ktable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ui-fs);
}

/* Nr.-Spalte (nicht filter-/sortierbar, laufende Nummer) */
.ktable__nr {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ktable__labels .ktable__nr {
  padding: var(--space-16) var(--space-20);
  font-weight: var(--weight-semi);
}
.ktable tbody td.ktable__nr {
  text-align: right;
  color: var(--text-muted);
}

/* Spaltenköpfe */
.ktable__labels th {
  position: relative;
  text-align: left;
  background: #fafafa;
  border-bottom: 1px solid var(--color-line);
  padding: 0;
}
.ktable__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-16) var(--space-20);
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: var(--weight-semi);
  color: var(--color-ink);
  letter-spacing: -0.01em;
}
.ktable__sort:hover { color: var(--color-kollegium); }

.ktable__arrow {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor;
  opacity: 0.25;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ktable__labels th[data-sort="asc"] .ktable__arrow {
  opacity: 1;
  color: var(--color-kollegium);
}
.ktable__labels th[data-sort="desc"] .ktable__arrow {
  opacity: 1;
  color: var(--color-kollegium);
  transform: rotate(180deg);
}

/* Filterzeile */
.ktable__filters th {
  padding: var(--space-8) var(--space-12);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}
.ktable__filters input {
  width: 100%;
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--space-8) var(--space-12);
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid transparent;
  border-radius: 8px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.ktable__filters input:focus {
  background: var(--color-surface);
  border-color: var(--color-kollegium-soft);
}

/* Datenzellen */
.ktable tbody td {
  padding: var(--space-16) var(--space-20);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink);
  white-space: normal;
}
.ktable tbody tr:last-child td {
  border-bottom: 0;
}
.ktable tbody tr {
  transition: background-color var(--dur-instant) var(--ease-out);
}
.ktable tbody tr:hover {
  background: #fafafa;
}

.ktable__empty {
  padding: var(--space-32);
  text-align: center;
  color: var(--text-color);
}



/* --- partials/sections/faq/faq.css --- */
/* ══════════════════════════════════════════════════════════
   Accordion / FAQ (Premium Stil)
   ══════════════════════════════════════════════════════════ */
#faq {
  background: var(--color-surface);
}
.accordion {
  margin-inline: auto;
  border-radius: var(--border-radius);
  overflow: hidden;
  /* padding-inline removed so accordion lines align with the table box edges */
}

.accordion__item {
  border-bottom: 1px solid var(--color-line, #d4d5d7);
}
.accordion__item:last-child {
  border-bottom: none;
}

.accordion__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  line-height: inherit;
}
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  padding: var(--space-24) 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--textfont);
  font-size: 1.5rem; /* Fest auf Desktop-Größe (Landscape) bleiben */
  font-weight: 700;
  text-align: left;
  color: var(--text-color);
}
.accordion__trigger span:first-of-type {
  text-wrap: pretty;
  line-height: 1.4;
  letter-spacing: -0.008em;
}

/* Plus-/Minus-Icon */
.accordion__icon {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-ink);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease-out);
}
.accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  transform: translate(-50%, -50%) rotate(0deg); /* aus + wird − */
}

/* Panel: animierte Höhe */
.accordion__panel {
  overflow: hidden;
  height: 0;
  transition: height 0.35s var(--ease-out);
}
.accordion__content {
  /* Right padding is calculated to align exactly with the question text:
     trigger gap + icon width */
  padding: 0 calc(var(--space-16) + 20px) var(--space-24) 0;
}
.accordion__content p {
  margin: 0;
  max-width: none; /* Überschreibt globales body p max-width (653px) */
  color: var(--text-color);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .accordion__panel { transition: none; }
}

/* iPhone: Frage eine Stufe größer rendern */
@media (max-width: 768px) {
  .accordion__trigger {
    font-size: 1.3125rem;
    padding-left: 0;
    padding-right: 0;
  }
  .accordion__content {
    padding-left: 0;
    padding-right: calc(var(--space-16) + 20px);
  }
}

/* iPhone Portrait View: Silbentrennung für Antworten aktivieren */
@media screen and (max-width: 480px) and (orientation: portrait) {
  .accordion__content p {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}



/* --- partials/sections/gallery-horizontal/gallery-horizontal.css --- */
/* ══════════════════════════════════════════════════════════
   Galerie (horizontal scrollbar, Premium Stil)
   ══════════════════════════════════════════════════════════ */
#gallery-horizontal {
  background: var(--color-bg);
}
/* horizontaler Scroll-Bereich – Karten fluchten mit dem Container, bleeden nach rechts */
.gallery__track {
  display: flex;
  gap: clamp(1.25rem, 2.2vw, 2rem);
  margin: 0;
  padding: 0;
  padding-block: var(--space-12) var(--space-32); /* Platz, damit der Schatten nicht abgeschnitten wird */
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* exakt bündig mit dem .container-Inhalt: Zentrierung + dynamischer Innenabstand */
  --gallery-gutter: max(var(--container-padding-inline), calc((100% - var(--container)) / 2 + var(--container-padding-inline)));
  padding-inline: var(--gallery-gutter);
  scroll-padding-inline: var(--gallery-gutter);
  /* Scrollbar ausblenden */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.gallery__track::-webkit-scrollbar {
  display: none;
}

.gallery__item {
  flex: 0 0 auto;
  width: min(980px, 88vw);
  scroll-snap-align: start;
  border-radius: var(--border-radius);
  overflow: hidden;               /* beschneidet den Zoom auf die runden Ecken */
  box-shadow: var(--shadow-card);
}
.gallery__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out); /* wie Kollegium-Cards */
}
.gallery__item:hover img {
  transform: scale(1.06);         /* gleicher Zoom, kein Anheben */
}

/* Pfeil-Navigation */
.gallery__nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-12);
  margin-top: var(--space-24);
}
.gallery__arrow {
  pointer-events: auto;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: var(--shadow-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
  color: var(--color-ink);
}
.gallery__arrow svg {
  width: 18px;
  height: 18px;
}
.gallery__arrow:hover:not(:disabled) {
  box-shadow: var(--shadow-lg);
  transform: scale(1.1);
}
.gallery__arrow:active:not(:disabled) {
  transform: scale(0.95);
}
.gallery__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}



/* --- partials/sections/artikel/artikel.css --- */
/* ══════════════════════════════════════════════════════════
   Artikel / Lauftext
══════════════════════════════════════════════════════════ */

.article {
  background: var(--color-surface);
  padding-block: var(--section-padding-block);
  padding-inline: var(--section-padding-inline);
}

.article.bg-transparent,
[style*="background"] > .article,
.article-group-canvas,
/* Durchgehender dekorativer Muster-Hintergrund für Section-Gruppen */
.section-bg-pattern {
  background-image: url('../system/background_427141456.avif');
  background-position: top center;
  background-repeat: repeat;
}

/* ── Alternierende Canvas- und Grau-Hintergründe für Section-Gruppen ── */
.article-group-canvas--grey {
  background-image: none !important;
  background-color: var(--bg-grey) !important;
}

.article-group-canvas .gallery-masonry,
.article-group-canvas > [data-component="gallery-masonry"] {
  background: transparent !important;
}

.article-group-canvas > .gallery-masonry:has(+ .article),
.article-group-canvas > [data-component="gallery-masonry"]:has(+ .article) {
  padding-bottom: 0 !important;
}

.section--transparent {
  background: transparent !important;
}

.article-group-canvas .article,
.article--transparent {
  background: transparent !important;
}

/* Redaktioneller Rhythmus für mehrteilige Artikel mit Image-Reveal */
.article-group-canvas > .article:first-of-type {
  padding-bottom: var(--space-16, 1rem);
}
.article-group-canvas > .image-reveal-section {
  padding-block: var(--space-48, 3rem);
}
.article-group-canvas > .image-reveal-section:last-child {
  padding-bottom: var(--section-padding-block) !important;
}
.article-group-canvas > .article:last-of-type {
  padding-top: var(--space-16, 1rem);
}
.article-group-canvas > .article:only-of-type {
  padding-block: var(--section-padding-block);
}

.article--intro {
  padding-block: var(--section-padding-block) 0 !important;
}

.section-subheadline--first {
  margin-top: 0 !important;
  margin-bottom: var(--space-28, 1.75rem) !important;
}

.article__fullbleed-link--mb-24 {
  margin-bottom: var(--space-24, 1.5rem) !important;
}

.article__fullbleed-link--mb-28 {
  margin-bottom: var(--space-28, 1.75rem) !important;
}

.article__poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-24, 1.5rem);
  margin-bottom: var(--space-28, 1.75rem);
}

/* Bento Gallery im Artikel / Inhaltsbereich */
.bento-gallery,
.article__bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-20, 1.25rem);
  margin-block: clamp(1.75rem, 3vw, 2.5rem);
  width: 100%;
}

.bento-gallery__item {
  position: relative;
  margin: 0;
  border-radius: var(--radius-card, 20px);
  overflow: hidden;
  box-shadow: var(--shadow-card, 0 10px 30px rgba(0, 0, 0, 0.06));
  background: var(--bg-surface, #ffffff);
  transform: translateZ(0);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  grid-column: span 6;
  height: 320px;
}

.bento-gallery__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
}

.bento-gallery__link {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.bento-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-gallery__item:hover .bento-gallery__img {
  transform: scale(1.05);
}

@media (max-width: 640px) {
  .bento-gallery,
  .article__bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-gallery__item {
    grid-column: span 1 !important;
    height: 240px !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .bento-gallery__item {
    grid-column: span 6;
    height: 280px;
  }
  .bento-gallery__item--span-4:last-child {
    grid-column: span 12;
  }
}

@media (min-width: 901px) {
  .bento-gallery__item--span-5 {
    grid-column: span 5;
    height: 380px;
  }
  .bento-gallery__item--span-7 {
    grid-column: span 7;
    height: 380px;
  }
  .bento-gallery__item--span-4 {
    grid-column: span 4;
    height: 290px;
  }
  .bento-gallery__item--span-6 {
    grid-column: span 6;
    height: 340px;
  }
  .bento-gallery__item--tall {
    height: 440px !important;
  }
}

.bento-gallery__img--pos-top {
  object-position: top center !important;
}

.bento-gallery__img--pos-bottom {
  object-position: bottom center !important;
}

.bento-gallery__item--ratio-3-2 {
  aspect-ratio: 3 / 2 !important;
  height: auto !important;
}





[style*="background-image"] .article {
  background: transparent !important;
}

.bg-transparent {
  background: transparent !important;
}

.article__body > *:first-child {
  margin-top: 0;
}

.article__body > *:last-child {
  margin-bottom: 0;
}

/* Fullbleed Bild & Image-Reveal innerhalb des Artikels, limitiert auf 1200px */
.article__body .image-reveal-section,
.article .image-reveal-section,
.article__fullbleed-figure {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: -2px;
  padding-inline: calc(var(--section-padding-inline, 24px) + env(safe-area-inset-left));
  padding-block: var(--space-24, 1.5rem) var(--section-padding-block);
  background: var(--bg-white, #ffffff);
  box-sizing: border-box;
}

.article__fullbleed-link {
  max-width: 1200px;
  margin-inline: auto;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius, 32px);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.article__fullbleed-link:active {
  transform: scale(0.985);
}

.article__fullbleed-link:focus,
.article__fullbleed-link:focus-visible {
  outline: none !important;
}

.article__fullbleed-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
  .article__fullbleed-figure.reveal.is-visible .article__fullbleed-link:hover .article__fullbleed-img,
  .article__fullbleed-link:hover .article__fullbleed-img {
    transform: scale(1.02) !important;
  }
}

/* Apple Liquid Specular Sheen Highlight */
.article__fullbleed-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.05) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .article__fullbleed-link:hover::after {
    opacity: 1;
  }
}

.article__fullbleed-caption {
  font-size: var(--figcaption-fs, 0.875rem);
  font-weight: var(--figcaption-fw, 400);
  line-height: var(--figcaption-lh, 1.42857);
  letter-spacing: var(--figcaption-ls, 0.012em);
  color: var(--text-color, #1d1d1f);
  text-align: center;
  text-wrap: pretty;
  max-width: 653px; /* Bündig mit der Lesespalte (.article__body) für perfekte visuelle Kanten */
  margin-inline: auto;
  margin-top: var(--space-12, 0.75rem);
}

/* ── Apple Newsroom Signature Fullbleed Image Reveal (Exakt wie image-reveal) ── */
.article__fullbleed-figure.reveal {
  opacity: 1;
  transform: none;
  isolation: isolate;
}

.article__fullbleed-figure.reveal .article__fullbleed-link {
  opacity: 0;
  transform: translateY(54px) scale(0.94);
  box-shadow: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: opacity 0.7s ease-out,
              transform 0.7s ease-out,
              box-shadow 0.7s ease-out;
}

.article__fullbleed-figure.reveal .article__fullbleed-img {
  transform: scale(1.16);
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.article__fullbleed-figure.reveal .article__fullbleed-caption {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* ── Apple Newsroom Active Visible State ── */
.article__fullbleed-figure.reveal.is-visible .article__fullbleed-link {
  opacity: 1;
  transform: translateY(0) scale(1);
  box-shadow: var(--shadow-card);
  transition: opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
              transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
              box-shadow 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.article__fullbleed-figure.reveal.is-visible .article__fullbleed-img {
  transform: scale(1);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.article__fullbleed-figure.reveal.is-visible .article__fullbleed-caption {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s,
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
}

@media (prefers-reduced-motion: reduce) {
  .article__fullbleed-figure.reveal .article__fullbleed-link,
  .article__fullbleed-figure.reveal .article__fullbleed-img,
  .article__fullbleed-figure.reveal .article__fullbleed-caption {
    opacity: 1 !important;
    transform: none !important;
    box-shadow: var(--shadow-card) !important;
    transition: none !important;
  }
}

/* Lesespalte: optimale Zeilenlänge — Newsroom Standard (653px) */
.article__body {
  max-width: 653px;
  margin-inline: auto;
  font-size: var(--body-fs);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.article__body p {
  margin-block: 0;
  font-size: var(--body-fs);
  line-height: var(--body-lh);
  color: var(--text-color);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
/* Ein Zeilenabstand als Absatzabstand (Vertical Rhythm): body-fs × body-lh = 28.5px,
   keine Space-Token-Stufe trifft das exakt. */
.article__body p + p {
  margin-top: calc(var(--body-fs) * var(--body-lh));
}

/* Aufzählungen: Bullets in Akzentfarbe, bündig zur Lesespalte.
   Hängender Custom-Marker mit Premium-typisch ruhigem Bullet→Text-Abstand. */
.article__body ul {
  /* Gleicher Zeilenrhythmus wie Absätze — oben UND unten, nicht am UA-Default hängen */
  margin-block: calc(var(--body-fs) * var(--body-lh));
  padding-left: 0;
  list-style: none;
}
.article__body p + ul,
.article__body .section-subheadline + ul,
.article__body h2 + ul,
.article__body h3 + ul {
  /* Enger Apple-Abstand (8px) für perfekte visuelle Gruppierung von Label & Liste */
  margin-top: var(--space-8, 0.5rem);
}
.article__body ul li {
  position: relative;
  display: block;
  padding-left: 1.25rem; /* space for bullet so lines wrap properly */
  font-size: var(--body-fs);
  line-height: var(--body-lh);
  color: var(--text-color);
  text-wrap: pretty; /* sauberer Flattersatz, keine Hurenkinder in umbrochenen Items */
}
.article__body ul li + li {
  /* Items näher zusammen als Absätze, aber mit ruhigem Atem */
  margin-top: var(--space-12);
}
/* Impeccable: echter CSS-Kreis statt Font-Glyph „•" → fontunabhängig,
   pixelgenau und exakt auf die optische Mitte der ersten Zeile zentriert.
   Umbrochene Zeilen bleiben durch padding-left bündig (hängender Einzug). */
.article__body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc((var(--body-lh) * 1em - 5px) / 2);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: currentColor;
}

.article__body a {
  color: var(--accent-color);
  text-decoration: none;
  background-image: linear-gradient(var(--accent-color), var(--accent-color));
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  overflow-wrap: anywhere;
  word-break: normal;
  transition: background-size 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.article__body a:hover {
  background-size: 100% 1px;
}

/* Article Inline Elements (Thumbnails, Captions, Quotes, Media) */
.article__body .thumbnail {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius, 12px);
  margin-block: var(--space-24, 1.5rem) var(--space-12, 0.75rem);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  display: block;
}

.article__body .text-center {
  text-align: center;
  font-size: var(--figcaption-fs, 0.9375rem);
  line-height: var(--figcaption-lh, 1.4);
  color: var(--color-muted, #86868b);
  margin-top: var(--space-8, 0.5rem);
  margin-bottom: var(--space-32, 2rem);
}

/* Article Blockquote (Apple/EBK Editorial Quote Standard – Identisch zu article-quote) */
.article__body blockquote:not(.article-quote__body),
.article blockquote:not(.article-quote__body) {
  margin-block: clamp(var(--space-32, 2rem), 6vw, var(--space-56, 3.5rem));
  margin-inline: auto;
  padding: 0;
  border-left: none !important;
  border-right: none !important;
  background: transparent !important;
  border-radius: 0;
  text-align: center;
  position: relative;
  max-width: var(--container-980, 980px);
}

.article__body blockquote:not(.article-quote__body) p,
.article blockquote:not(.article-quote__body) p {
  font-family: var(--textfont);
  font-size: var(--h4-fs);
  line-height: 1.14;
  font-weight: var(--weight-bold);
  color: var(--color-ink, #232326);
  letter-spacing: -0.022em;
  margin-inline: auto;
  margin-block: 0;
  max-width: none;
  text-wrap: balance;
  text-align: center;
}

@media (max-width: 768px) {
  .article__body blockquote:not(.article-quote__body) p,
  .article blockquote:not(.article-quote__body) p {
    font-size: var(--h3-fs);
  }
}

.article__body blockquote:not(.article-quote__body) cite,
.article__body blockquote:not(.article-quote__body) figcaption,
.article blockquote:not(.article-quote__body) cite,
.article blockquote:not(.article-quote__body) figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4, 0.25rem);
  margin-top: var(--space-24, 1.5rem);
  font-style: normal;
  text-align: center;
  font-size: var(--body-fs);
  font-weight: var(--weight-semi);
  color: var(--color-ink, #232326);
  letter-spacing: -0.01em;
}

.article__body blockquote:not(.article-quote__body) cite a,
.article blockquote:not(.article-quote__body) cite a {
  color: var(--color-ink, #232326);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article__body .divider.d3 {
  border: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin-block: var(--space-48, 3rem);
}

.article__body .video-wrapper2 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--border-radius, 12px);
  overflow: hidden;
  margin-block: var(--space-24, 1.5rem);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.article__body .video-wrapper2 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.article__body .blog-item {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--border-radius, 16px);
  padding: var(--space-24, 1.5rem);
  margin-block: var(--space-32, 2rem);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.article__body .post-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: var(--space-12, 0.75rem);
  margin-bottom: var(--space-8, 0.5rem);
}

.article__body .sub-post-title {
  font-size: 0.875rem;
  color: var(--color-muted, #86868b);
  margin-bottom: var(--space-16, 1rem);
}

.article__body audio {
  width: 100%;
  margin-top: var(--space-16, 1rem);
  border-radius: var(--border-radius, 8px);
}

.article-quote {
  max-width: var(--container-980);
  margin-inline: auto;
  padding-block: clamp(var(--space-48), 8vw, var(--space-96));
  /* padding-inline removed to prevent double padding (section already has it) */
  text-align: center;
}

.article-quote--no-spacing {
  padding-block: 0 !important;
  margin-block: 0 !important;
}

.article-quote__body {
  margin: 0;
  text-wrap: balance;
}

.article-quote__text {
  font-family: var(--textfont);
  font-size: var(--h4-fs);
  line-height: 1.14; /* Kompakter, typografisch wertiger (Premium-Stil) */
  font-weight: var(--weight-bold); /* TheSansOffice Bold (700) */
  color: var(--color-ink);
  letter-spacing: -0.022em; /* Engere Laufweite für einen kohärenten Textblock */
  margin-bottom: var(--space-40); /* More breathing room before author */
  margin-inline: auto;
  max-width: none;
  text-wrap: balance;
  position: relative;
}

/* Größerer Text für das Zitat nur auf dem iPhone */
@media (max-width: 768px) {
  .article-quote__text {
    font-size: var(--h3-fs);
  }
}

/* Elegante typografische Anführungszeichen */
.article-quote__text::before {
  content: "„";
}

.article-quote__text::after {
  content: "“";
}

.article-quote__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-24);
}

.article-quote__author {
  font-size: var(--body-fs);
  font-weight: var(--weight-semi);
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.article-quote__role {
  font-size: var(--body-small-fs);
  color: var(--text-muted);
  margin-top: var(--space-4);
}

/* ── Partial: BLOCKQUOTE-LONG (Für längere Texte / ausführliche Statements) ── */
.article-quote--long,
.article-quote--extended {
  max-width: var(--container-980); /* Gleiche Breite wie die normale Blockquote */
  margin-inline: auto;
  text-align: left;
}

.article-quote--long .article-quote__body,
.article-quote--extended .article-quote__body {
  max-width: 100%;
  margin-inline: 0;
  text-align: left;
}

.article-quote--long .article-quote__text,
.article-quote--extended .article-quote__text {
  color: var(--text-color); /* Weichere, warme Textfarbe für längere Lesetexte */
  font-size: clamp(1.25rem, 1.05rem + 0.75vw, 1.5625rem); /* Harmonisch austarierte Lesegröße */
  line-height: 1.45; /* Optimierter, entspannter Zeilenabstand für perfekte Leserlichkeit */
  font-weight: var(--weight-semi, 600);
  letter-spacing: -0.006em; /* Natürlicheres, feineres Kerning */
  margin-bottom: var(--space-28, 1.75rem);
  margin-inline: 0;
  text-align: left;
  text-wrap: pretty;
}

.article-quote--long .article-quote__caption,
.article-quote--extended .article-quote__caption {
  align-items: flex-start;
  text-align: left;
}

.article-quote--long .article-quote__author,
.article-quote--extended .article-quote__author,
.article-quote--long .article-quote__role,
.article-quote--extended .article-quote__role {
  text-align: left;
}

.article-quote--long .article-quote__body p + p,
.article-quote--extended .article-quote__body p + p {
  margin-top: var(--space-16, 1rem);
}

.article-quote--long .article-quote__body:has(p:nth-of-type(2)) .article-quote__text::before,
.article-quote--extended .article-quote__body:has(p:nth-of-type(2)) .article-quote__text::before {
  content: none;
}
.article-quote--long .article-quote__body:has(p:nth-of-type(2)) .article-quote__text::after,
.article-quote--extended .article-quote__body:has(p:nth-of-type(2)) .article-quote__text::after {
  content: none;
}
.article-quote--long .article-quote__body:has(p:nth-of-type(2)) p:first-of-type::before,
.article-quote--extended .article-quote__body:has(p:nth-of-type(2)) p:first-of-type::before {
  content: "„";
}
.article-quote--long .article-quote__body:has(p:nth-of-type(2)) p:last-of-type::after,
.article-quote--extended .article-quote__body:has(p:nth-of-type(2)) p:last-of-type::after {
  content: "“";
}

@media (max-width: 768px) {
  .article-quote--long .article-quote__text,
  .article-quote--extended .article-quote__text {
    font-size: 1.1875rem !important; /* 19px auf dem Smartphone */
    line-height: 1.45 !important;
    letter-spacing: -0.004em !important;
  }
}

/* ── Emil Kowalski Stagger Reveal for Partial: BLOCKQUOTE ── */
.article-quote.reveal {
  opacity: 0;
  transform: translateY(36px) scale(0.98);
  filter: blur(4px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, filter 0.6s ease-out;
}

.article-quote.reveal .article-quote__text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.article-quote.reveal .article-quote__caption {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Staggered Entrance on .is-visible */
.article-quote.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.article-quote.reveal.is-visible .article-quote__text {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
              transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.article-quote.reveal.is-visible .article-quote__caption {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}

/* ── Utility: visuell versteckt (für Screenreader) ────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* --- partials/sections/gallery-bildergalerie/gallery-bildergalerie.css --- */
/* ══════════════════════════════════════════════════════════
   Raster-Galerie (2 pro Reihe, 3 Zeilen)
   ══════════════════════════════════════════════════════════ */
#gallery-bildergalerie {
  background: var(--bg-white);
}
.gallery-bildergalerie__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.2vw, 2rem);
}
.gallery-bildergalerie__item {
  margin: 0;
  border-radius: var(--border-radius);
  overflow: hidden;               /* beschneidet den Zoom auf die runden Ecken */
  box-shadow: var(--shadow-card); /* exakt derselbe Schatten */
}
.gallery-bildergalerie__item img {
  width: 100%;
  aspect-ratio: 3 / 2;          /* gleiches Bildformat wie horizontale Galerie */
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out); /* wie Kollegium-Cards */
}
.gallery-bildergalerie__item:hover img {
  transform: scale(1.06);         /* gleicher Zoom wie beim Kollegium, kein Anheben */
}

/* Gestaffeltes Reveal (spaltenweise) */
.gallery-bildergalerie__grid .reveal:nth-child(2n) { transition-delay: 0.1s; }

@media (max-width: 768px) {
  .gallery-bildergalerie__grid {
    grid-template-columns: 1fr;
  }
  .gallery-bildergalerie__grid .reveal:nth-child(2n) { transition-delay: 0s; }
}



/* --- partials/sections/tag-der-offenen-tuer/tag-der-offenen-tuer.css --- */
/* =========================================================
   Partial: TAG DER OFFENEN TÜR
   ========================================================= */

section.tag-der-offenen-tuer,
section.hero.tag-der-offenen-tuer,
.tag-der-offenen-tuer-section,
.tag-der-offenen-tuer {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  margin-block: 0 !important;
  padding-block: var(--section-padding-block, clamp(3.5rem, 5vw, 5.5rem)) !important;
  padding-inline: var(--section-padding-inline, clamp(1.25rem, 3.5vw, 3rem)) !important;
  box-sizing: border-box !important;
  display: block !important;
  overflow: visible !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: var(--bg-grey, #f5f5f7);
}

.tag-der-offenen-tuer__inner,
section.tag-der-offenen-tuer .tag-der-offenen-tuer__inner,
section.hero.tag-der-offenen-tuer .tag-der-offenen-tuer__inner,
.tag-der-offenen-tuer-section .tag-der-offenen-tuer__inner,
.tag-der-offenen-tuer .tag-der-offenen-tuer__inner {
  position: relative !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

/* data-bg Support */
[data-bg="bg-grey"] section.tag-der-offenen-tuer,
[data-bg="bg-grey"] .tag-der-offenen-tuer,
section.tag-der-offenen-tuer.bg-grey,
section.tag-der-offenen-tuer[data-bg="bg-grey"],
.tag-der-offenen-tuer.bg-grey,
.tag-der-offenen-tuer[data-bg="bg-grey"] {
  background: var(--bg-grey, #f5f5f7) !important;
  background-color: var(--bg-grey, #f5f5f7) !important;
}

[data-bg="bg-white"] section.tag-der-offenen-tuer,
[data-bg="bg-white"] .tag-der-offenen-tuer,
section.tag-der-offenen-tuer.bg-white,
section.tag-der-offenen-tuer[data-bg="bg-white"],
.tag-der-offenen-tuer.bg-white,
.tag-der-offenen-tuer[data-bg="bg-white"] {
  background: var(--bg-white, #ffffff) !important;
  background-color: var(--bg-white, #ffffff) !important;
}

/* Ensure children inside inner container take full width of container */
.tag-der-offenen-tuer__inner > * {
  max-width: 100% !important;
  width: 100% !important;
}

/* Headline ABOVE the picture card */
section.tag-der-offenen-tuer > .tag-der-offenen-tuer__headline,
.tag-der-offenen-tuer__headline,
.tag-der-offenen-tuer .tag-der-offenen-tuer__headline {
  font-family: var(--displayfont, 'TheSansOffice', 'TheSans', sans-serif) !important;
  font-size: var(--h2-fs, clamp(2rem, 4vw, 3.5rem)) !important;
  line-height: var(--h2-lh, 1.1) !important;
  letter-spacing: var(--h2-ls, -0.015em) !important;
  text-align: left !important;
  color: var(--text-color, #1d1d1f) !important;
  font-weight: 700 !important;
  margin: 0 0 clamp(1rem, 1.5vw, 1.25rem) 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  text-shadow: none !important;
  text-wrap: balance;
}

section.tag-der-offenen-tuer > .tag-der-offenen-tuer__headline:has(+ .tag-der-offenen-tuer__subinfo),
.tag-der-offenen-tuer:has(.tag-der-offenen-tuer__subinfo) .tag-der-offenen-tuer__headline {
  margin-bottom: clamp(0.35rem, 0.6vw, 0.5rem) !important;
}

@media (min-width: 1024px) {
  section.tag-der-offenen-tuer > .tag-der-offenen-tuer__headline,
  .tag-der-offenen-tuer__headline,
  .tag-der-offenen-tuer .tag-der-offenen-tuer__headline {
    font-size: var(--h2-fs, clamp(2rem, 4vw, 3.5rem)) !important;
    line-height: var(--h2-lh, 1.1) !important;
    letter-spacing: var(--h2-ls, -0.015em) !important;
  }
}

html[data-theme="dark"] .tag-der-offenen-tuer__headline,
html[data-theme="dark"] .tag-der-offenen-tuer .tag-der-offenen-tuer__headline {
  color: var(--text-white, #f5f5f7) !important;
}

/* Subinfo under Headline (einzeilig) */
section.tag-der-offenen-tuer > .tag-der-offenen-tuer__subinfo,
.tag-der-offenen-tuer__subinfo,
.tag-der-offenen-tuer .tag-der-offenen-tuer__subinfo {
  font-family: var(--textfont, 'TheSansOffice', 'TheSans', sans-serif) !important;
  font-size: 19px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: var(--text-muted, #6e6e73) !important;
  text-align: left !important;
  margin: 0 0 clamp(1rem, 1.5vw, 1.25rem) 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  letter-spacing: -0.012em !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  -webkit-font-smoothing: antialiased;
  /* Beide Zeilen auf Desktop nebeneinander, auf Smartphones/iPhone untereinander */
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 0 !important;
}

.tag-der-offenen-tuer__subinfo:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html[data-theme="dark"] .tag-der-offenen-tuer__subinfo,
html[data-theme="dark"] .tag-der-offenen-tuer .tag-der-offenen-tuer__subinfo {
  color: #98989D !important;
}

.tag-der-offenen-tuer__subinfo-row {
  display: inline-block !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
}

.tag-der-offenen-tuer__subinfo-item {
  display: inline-block !important;
  white-space: nowrap !important;
}

.tag-der-offenen-tuer__subinfo-row.js-cd-line1:has(+ .js-cd-line2)::after {
  content: " \007c \00a0"; /* " | " */
  opacity: 0.65;
  margin: 0 0.45em;
}

.tag-der-offenen-tuer__meta-sep {
  display: inline-block !important;
  margin: 0 0.45em !important;
  opacity: 0.65 !important;
  font-weight: 400 !important;
  user-select: none !important;
}

@media (max-width: 768px) {
  .tag-der-offenen-tuer__subinfo,
  .tag-der-offenen-tuer .tag-der-offenen-tuer__subinfo {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.25rem !important;
    font-size: clamp(15px, 4vw, 18px) !important;
    line-height: 1.4 !important;
  }

  .tag-der-offenen-tuer__subinfo-row {
    display: block !important;
  }

  .tag-der-offenen-tuer__subinfo-row.js-cd-line1:has(+ .js-cd-line2)::after {
    display: none !important;
    content: "" !important;
  }
}

/* Rounded Card Container with Image (Format 3:2, max 1440px) */
section.tag-der-offenen-tuer .tag-der-offenen-tuer__card,
section.tag-der-offenen-tuer > .tag-der-offenen-tuer__card,
.tag-der-offenen-tuer__card {
  position: relative !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
  aspect-ratio: 3 / 2 !important;
  min-height: 480px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: clamp(2rem, 4vw, 3.5rem) var(--section-padding-inline, 2rem) !important;
  overflow: hidden !important;
  border-radius: var(--border-radius, 1.5rem) !important;
  box-shadow: var(--shadow-card, 0 4px 20px rgba(0, 0, 0, 0.06)) !important;
  background-color: var(--bg-dark, #1a1a1c) !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) and (orientation: portrait) {
  section.tag-der-offenen-tuer > .tag-der-offenen-tuer__card,
  .tag-der-offenen-tuer__card {
    aspect-ratio: auto !important;
    min-height: 520px !important;
  }
}

.tag-der-offenen-tuer__card > .tag-der-offenen-tuer__bg,
.tag-der-offenen-tuer__bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background-image: url('../img/tag-der-offenen-tuer/2026-tag-der-offenen-tuer-hero.avif');
  background-size: cover !important;
  background-position: center !important;
  z-index: 0 !important;
}

/* Gradient overlay: Completely transparent across top, soft scrim only from countdown to bottom */
.tag-der-offenen-tuer__card > .tag-der-offenen-tuer__bg::after,
.tag-der-offenen-tuer__bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.05) 58%,
    rgba(0, 0, 0, 0.2) 68%,
    rgba(0, 0, 0, 0.52) 82%,
    rgba(0, 0, 0, 0.76) 100%
  ) !important;
  z-index: 1 !important;
}

@media (min-width: 768px) {
  .tag-der-offenen-tuer__card > .tag-der-offenen-tuer__bg::after,
  .tag-der-offenen-tuer__bg::after {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 55%,
      rgba(0, 0, 0, 0.04) 62%,
      rgba(0, 0, 0, 0.18) 70%,
      rgba(0, 0, 0, 0.52) 84%,
      rgba(0, 0, 0, 0.76) 100%
    ) !important;
  }
}

.tag-der-offenen-tuer__glow {
  display: none !important;
}

/* Content Container in Lower Half */
.tag-der-offenen-tuer__content {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  max-width: var(--container-1024, 64rem) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  text-align: center !important;
  margin-top: auto !important;
}

/* Glassmorphism Countdown Grid: Always 4 in one row (including iPhone/mobile) */
.tag-der-offenen-tuer__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 1rem !important;
  width: 100% !important;
  max-width: 380px !important;
  margin-inline: auto !important;
}

@media (min-width: 768px) {
  .tag-der-offenen-tuer__grid {
    gap: var(--space-24, 1.5rem) !important;
    max-width: 720px !important;
    margin-bottom: var(--space-32, 2rem) !important;
  }
}

.tag-der-offenen-tuer__item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 4px !important;
  aspect-ratio: 1 !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(40px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(110%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07) !important;
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1),
              background-color 180ms ease,
              border-color 180ms ease,
              box-shadow 180ms ease !important;
  transform: translateZ(0) !important;
  box-sizing: border-box !important;
}

@media (min-width: 768px) {
  .tag-der-offenen-tuer__item {
    padding: clamp(0.75rem, 1.4vw, 1.25rem) !important;
    border-radius: var(--border-radius-md, 16px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18) !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .tag-der-offenen-tuer__item:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-2px) scale(1.02) translateZ(0) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15) !important;
  }
}

.tag-der-offenen-tuer__item:active {
  transform: scale(0.97) translateZ(0) !important;
  transition-duration: 80ms !important;
}

.tag-der-offenen-tuer__value {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--text-white, #ffffff) !important;
  line-height: 1 !important;
  font-variant-numeric: lining-nums tabular-nums !important;
}

@media (min-width: 768px) {
  .tag-der-offenen-tuer__value {
    font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
  }
}

.tag-der-offenen-tuer__label {
  font-size: 0.6875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  white-space: nowrap !important;
}

@media (min-width: 768px) {
  .tag-der-offenen-tuer__label {
    font-size: clamp(0.75rem, 1vw, 0.875rem) !important;
    letter-spacing: 0.08em !important;
    margin-top: var(--space-8, 0.5rem) !important;
  }
}

/* Footer & Actions directly under Countdown */
.tag-der-offenen-tuer__footer {
  margin-top: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.tag-der-offenen-tuer__footer .cta__actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 0 !important;
  width: 100% !important;
}

@media (min-width: 640px) {
  .tag-der-offenen-tuer__footer .cta__actions {
    flex-direction: row !important;
    gap: var(--space-24, 1.5rem) !important;
  }
}

/* Emil Kowalski Button Design with TheSans Typography & #a60032 Branding */
.tag-der-offenen-tuer__footer .cta__actions .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 162px !important;
  max-width: none !important;
  text-align: center !important;
  min-height: 44px !important;
  padding-block: 12px !important;
  padding-inline: 22px !important;
  font-family: var(--textfont, 'TheSansOffice', 'TheSans', sans-serif) !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  border-radius: 980px !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
              background-color 160ms ease,
              border-color 160ms ease,
              box-shadow 160ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .tag-der-offenen-tuer__footer .cta__actions .btn:hover {
    transform: translateY(-2px) !important;
  }
}

/* Emil Kowalski: Instant active press feedback */
.tag-der-offenen-tuer__footer .cta__actions .btn:active {
  transform: scale(0.97) !important;
  transition-duration: 80ms !important;
}

.tag-der-offenen-tuer__footer .cta__actions .btn:focus-visible {
  outline: 2px solid #a60032 !important;
  outline-offset: 3px !important;
}

/* Primary Button: Brand Bordeaux-Rot #a60032 (NEVER blue) */
.tag-der-offenen-tuer__footer .cta__actions .btn--kollegium-primary {
  background: #a60032 !important;
  background-color: #a60032 !important;
  color: #ffffff !important;
  border-color: #a60032 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
}

@media (hover: hover) and (pointer: fine) {
  .tag-der-offenen-tuer__footer .cta__actions .btn--kollegium-primary:hover {
    background: #a60032 !important;
    background-color: #a60032 !important;
    border-color: #a60032 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  }
}

/* Secondary Button: Subtle glass contrast on dark card */
.tag-der-offenen-tuer__footer .cta__actions .btn--kollegium-secondary {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

@media (hover: hover) and (pointer: fine) {
  .tag-der-offenen-tuer__footer .cta__actions .btn--kollegium-secondary:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .tag-der-offenen-tuer__item,
  .tag-der-offenen-tuer__footer .cta__actions .btn {
    transition: opacity 160ms ease, background-color 160ms ease !important;
    transform: none !important;
  }
  .tag-der-offenen-tuer__item:hover,
  .tag-der-offenen-tuer__footer .cta__actions .btn:hover,
  .tag-der-offenen-tuer__footer .cta__actions .btn:active {
    transform: none !important;
  }
}over {
    transform: translateY(-2px) !important;
  }
}

/* Emil Kowalski: Instant active press feedback */
.tag-der-offenen-tuer__actions .btn:active {
  transform: scale(0.97) !important;
  transition-duration: 80ms !important;
}

.tag-der-offenen-tuer__actions .btn:focus-visible {
  outline: 2px solid #a60032 !important;
  outline-offset: 3px !important;
}

/* Primary Button: Brand Bordeaux-Rot #a60032 (NEVER blue) */
.tag-der-offenen-tuer__actions .btn--kollegium-primary {
  background: #a60032 !important;
  background-color: #a60032 !important;
  color: #ffffff !important;
  border-color: #a60032 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
}

@media (hover: hover) and (pointer: fine) {
  .tag-der-offenen-tuer__actions .btn--kollegium-primary:hover {
    background: #a60032 !important;
    background-color: #a60032 !important;
    border-color: #a60032 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  }
}

/* Secondary Button: Subtle glass contrast on dark card */
.tag-der-offenen-tuer__actions .btn--kollegium-secondary {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

@media (hover: hover) and (pointer: fine) {
  .tag-der-offenen-tuer__actions .btn--kollegium-secondary:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .tag-der-offenen-tuer__item,
  .tag-der-offenen-tuer__actions .btn {
    transition: opacity 160ms ease, background-color 160ms ease !important;
    transform: none !important;
  }
  .tag-der-offenen-tuer__item:hover,
  .tag-der-offenen-tuer__actions .btn:hover,
  .tag-der-offenen-tuer__actions .btn:active {
    transform: none !important;
  }
}

/* Suppress unused elements */
.tag-der-offenen-tuer__kicker,
.tag-der-offenen-tuer__lead,
.tag-der-offenen-tuer__details,
.tag-der-offenen-tuer__divider,
.tag-der-offenen-tuer__separator {
  display: none !important;
}


/* --- partials/sections/links/links.css --- */
/* ══════════════════════════════════════════════════════════
   LINKS SECTION
   Weiterführende Themen – Premium-Stil: klare Zeilentrennung,
   dezente Arrow-Geste, kein visuelles Rauschen.
   ══════════════════════════════════════════════════════════ */

.links {
  background-color: var(--bg-grey);
}

/* ── Liste ────────────────────────────────────────────────── */
.links__items {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--light-gray, #d4d5d7);
}

/* ── Einzelner Eintrag ────────────────────────────────────── */
.links__item {
  border-bottom: 1px solid var(--light-gray, #d4d5d7);
}

/* Kein Rand beim letzten Item wenn .no-border gesetzt */
.links__item.no-border {
  border-bottom: none;
}

/* ── Link ─────────────────────────────────────────────────── */
.links__link {
  display: inline-block;
  padding-block: var(--space-24);
  color: var(--accent-color, #a60032);
  text-decoration: none;
  background-image: none !important;
}

/* ── Linktext: Artikel-Underline-Animation ────────────────── */
.links__text {
  display: inline;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem); /* 18px → 22px */
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.008em;
  color: var(--accent-color, #a60032);

  /* Animated underline — identisch mit p a in global.css */
  background-image: linear-gradient(var(--accent-color, #a60032), var(--accent-color, #a60032));
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.links__link:hover .links__text {
  background-size: 100% 1px;
}

.links--inline,
.links__items.links--inline {
  background: transparent !important;
  padding-block: 0 !important;
}

/* ── Icon: direkt hinter dem Text ────────────────────────── */
.links__icon {
  display: inline-flex;
  vertical-align: middle;
  margin-left: var(--space-8, 0.5rem);
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  opacity: 1;
  color: var(--accent-color, #a60032);
  transition: transform var(--dur-base, 0.4s) var(--ease-out);
}

.links__link:hover .links__icon {
  transform: translate(3px, -3px);
}

.links__icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}

/* ── Scroll-Reveal (gestaffelt per JS) ───────────────────── */
.links__item {
  opacity: 0;
  transform: translateY(8px);
}

.links__item.is-visible {
  animation: linksFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes linksFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- partials/sections/scroll-reveal-text/scroll-reveal-text.css --- */
/* =========================================================
   SCROLL REVEAL TEXT
   ========================================================= */

.scroll-reveal-section {
  text-align: left;
  position: relative;
  z-index: 10; /* Stellt sicher, dass die Sektion über dem gepinnten Hero bleibt */
  width: 100%;
  background-attachment: scroll !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.scroll-reveal-heading {
  font-size: var(--h3-fs);
  font-weight: var(--h2-fw);
  color: var(--text-color);
  max-width: 28ch; /* Optimal Premium line length for this size */
  text-wrap: balance;

  /* Optimal Premium Microtypography */
  line-height: 1.14; /* Tighter line-height for a monolithic, compact text block */
  letter-spacing: -0.015em; /* Tightened kerning for large scales */
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1, "kern" 1, "ss01" 1; /* Enable standard ligatures/kerning */
}

@media (max-width: 768px) {
  .scroll-reveal-heading {
    max-width: 25ch;
  }
}

.scroll-reveal-char {
  color: var(--text-grey);
  transition: color var(--dur-instant) var(--ease-out);
}

.scroll-reveal-char.active {
  color: var(--text-color);
}


/* --- partials/sections/parallax-text/parallax-text.css --- */
/* =========================================================
   PARALLAX
   ========================================================= */

.parallax-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  /* Force full width breaking out of any parent containers */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  padding: clamp(var(--space-64), 10vh, var(--space-128)) var(--section-padding-inline);
}

.parallax-bg {
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 200%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
  max-width: none !important;
}

.parallax-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
  max-width: none !important;
}

.parallax-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--text-white);
}

.parallax-content .section-headline {
  font-size: var(--hero-fs); /* 40px → 72px fluid */
  font-weight: var(--weight-bold, 700);
  margin-bottom: var(--space-24, 1.5rem);
  letter-spacing: -0.022em;
  line-height: 1.10;
  color: var(--text-white);
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.parallax-content .section-headline.text-white {
  color: var(--text-white) !important;
}

.parallax-lead {
  max-width: 50ch;
  margin-inline: auto;
  margin-top: var(--space-16);
  margin-bottom: var(--space-32);
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem); /* 18px → 21px fluid */
  line-height: 1.5;
  font-weight: var(--weight-regular, 400);
  letter-spacing: -0.011em;
  color: var(--text-white);
  text-wrap: balance;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}


/* --- partials/sections/auszeichnungen/auszeichnungen.css --- */
/* ══════════════════════════════════════════════════════════
   AWARDS (Auszeichnungen)
   ══════════════════════════════════════════════════════════ */
.auszeichnungen {
  /* section bg handles via style if needed, default transparent */
}



.auszeichnungen-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border-color, rgba(0,0,0,0.1));
  display: flex;
  flex-direction: column;
}

.auszeichnungen-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
  border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1));
  cursor: pointer;
}

@media (min-width: 768px) {
  .auszeichnungen-item {
    height: 6rem;
  }
}

.auszeichnungen-item__title {
  /* ── Exakt wie .links__text ── */
  font-size: clamp(1.125rem, 1.5vw, 1.375rem); /* 18px → 22px */
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.008em;
  color: var(--accent-color, #a60032);

  /* Animated underline – identisch mit links__text */
  background-image: linear-gradient(var(--accent-color, #a60032), var(--accent-color, #a60032));
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}

.auszeichnungen-item:hover .auszeichnungen-item__title {
  background-size: 100% 1px;
}

/* ── Link-Gruppe: Titel + Pfeil nebeneinander ─────────────── */
.auszeichnungen-item__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

/* ── Pfeil-Icon – exakt wie .links__icon ─────────────────── */
.auszeichnungen-item__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color, #a60032);
  transition: transform var(--dur-base, 0.4s) var(--ease-out);
}

.auszeichnungen-item:hover .auszeichnungen-item__icon {
  transform: translate(3px, -3px);
}

.auszeichnungen-item__icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}



.auszeichnungen-item__image-wrap {
  position: absolute;
  right: var(--space-8);
  top: var(--space-8);
  bottom: var(--space-8);
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.5s var(--ease-out);
  pointer-events: none;
  z-index: 10;
}

@media (min-width: 768px) {
  .auszeichnungen-item__image-wrap {
    right: var(--space-16);
    border-radius: 12px;
  }
}

.auszeichnungen-item:hover .auszeichnungen-item__image-wrap {
  opacity: 1;
  transform: scale(1);
}

.auszeichnungen-item__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --- partials/sections/schulpastoral/schulpastoral.css --- */
/* ══════════════════════════════════════════════════════════
   SCHULPASTORAL (Cross Animation)
   ══════════════════════════════════════════════════════════ */
.schulpastoral {
  position: relative;
  width: 100%;
  padding-block: var(--section-padding-block);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cross-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
}

.cross-container {
  position: relative;
  z-index: 20;
  pointer-events: none;
  aspect-ratio: 1 / 1;
  width: 100%;
  /* Das Kreuz hat intern von 0-13% und 92-100% Leerraum. Wir ziehen diesen Leerraum ab. */
  margin-top: -13%;
  margin-bottom: -8%;
}

.image-piece {
  position: absolute;
  border-radius: var(--border-radius, 1.5rem);
  overflow: hidden;
  box-shadow: var(--shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
}

.image-piece img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05); 
}


/* --- partials/sections/kontaktformular/kontaktformular.css --- */
/* ══════════════════════════════════════════════════════════
   KONTAKTFORMULAR
   ══════════════════════════════════════════════════════════ */
.kontaktformular {
  padding-block: var(--section-padding-block);
  display: flex;
  justify-content: center;
  align-items: center;
}

.kontaktformular-card {
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
  background: var(--bg-white, #ffffff);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-2xl);
  padding: var(--space-24);
  border: 1px solid var(--border-color, rgba(0,0,0,0.05));
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .kontaktformular-card {
      padding: var(--space-40);
  }
}

.kontaktformular-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--space-80) auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}



.kontaktformular-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.kontaktformular-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

@media (min-width: 768px) {
  .kontaktformular-grid {
      grid-template-columns: 1fr 1fr;
  }
}

.kontaktformular-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kontaktformular-field label {
  font-size: var(--ui-fs);
  font-weight: var(--weight-bold, 700);
  font-family: 'TheSansOffice';
  letter-spacing: -0.01em;
  color: var(--text-color);
  margin-left: 4px;
}

.required {
  color: var(--saeule02-rot, #a60032);
}

.kontaktformular-field input,
.kontaktformular-field textarea {
  width: 100%;
  background: #f5f5f7;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: var(--ui-fs);
  color: var(--text-color);
  font-family: inherit;
  transition: all var(--dur-fast) var(--ease-out);
  outline: none;
}

.kontaktformular-field input:hover,
.kontaktformular-field textarea:hover {
  border-color: rgba(0,0,0,0.1);
}

.kontaktformular-field input:focus,
.kontaktformular-field textarea:focus {
  background: var(--bg-white, #ffffff);
  border-color: var(--accent-color, #a60032);
  box-shadow: none;
}

/* Verhindert die gelbe Browser-Autofill-Hintergrundfarbe (Safari / Chrome) */
.kontaktformular-field input:-webkit-autofill,
.kontaktformular-field input:-webkit-autofill:hover,
.kontaktformular-field input:-webkit-autofill:active,
.kontaktformular-field textarea:-webkit-autofill,
.kontaktformular-field textarea:-webkit-autofill:hover,
.kontaktformular-field textarea:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #f5f5f7 inset !important;
  box-shadow: 0 0 0 1000px #f5f5f7 inset !important;
  -webkit-text-fill-color: var(--text-color, #232326) !important;
  transition: background-color 5000s ease-in-out 0s;
}

.kontaktformular-field input:-webkit-autofill:focus,
.kontaktformular-field textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  border-color: var(--accent-color, #a60032) !important;
}

.kontaktformular-field textarea {
  resize: vertical;
  min-height: 240px;
}

/* Scrollbar für Textarea */
.kontaktformular-field textarea::-webkit-scrollbar {
  width: 8px;
}
.kontaktformular-field textarea::-webkit-scrollbar-track {
  background: transparent;
}
.kontaktformular-field textarea::-webkit-scrollbar-thumb {
  background-color: var(--border-color, #d2d2d7);
  border-radius: 20px;
}

/* Dropzone */
.kontaktformular-dropzone {
  border: 2px dashed var(--border-color, #d2d2d7);
  border-radius: 16px;
  background: rgba(245, 245, 247, 0.5);
  padding: var(--space-32);
  text-align: center;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all var(--dur-fast) var(--ease-out);
  overflow: hidden;
}

.kontaktformular-dropzone:hover {
  background: #f5f5f7;
}

.kontaktformular-dropzone.dragover {
  border-color: var(--saeule02-rot, #a60032);
  background: rgba(166, 0, 50, 0.05);
}

.kontaktformular-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}

.kontaktformular-dropzone-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-white, #ffffff);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--saeule02-rot, #a60032);
  transition: transform var(--dur-fast) var(--ease-out);
}

.kontaktformular-dropzone:hover .kontaktformular-dropzone-icon {
  transform: scale(1.1);
}

.kontaktformular-dropzone-text .primary {
  font-size: var(--ui-fs);
  font-weight: var(--weight-medium, 500);
  color: var(--text-color);
  margin-bottom: 4px;
}

.kontaktformular-dropzone-text .secondary {
  font-size: var(--ui-fs);
  color: var(--text-color);
}

/* File List */
.kontaktformular-file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.kontaktformular-file-list:empty {
  display: none;
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border-color, #d2d2d7);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  animation: slideIn var(--dur-fast) var(--ease-out) forwards;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.file-item-info {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}

.file-item-preview {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border-color, #d2d2d7);
}

.file-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(166, 0, 50, 0.05);
  color: var(--saeule02-rot, #a60032);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(166, 0, 50, 0.1);
}

.file-item-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.file-item-name {
  font-size: var(--ui-fs);
  font-weight: var(--weight-medium, 500);
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

@media (min-width: 768px) {
  .file-item-name {
      max-width: 300px;
  }
}

.file-item-size {
  font-size: var(--ui-fs);
  color: var(--text-color);
}

.file-item-remove {
  padding: 8px;
  color: var(--text-color);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-item-remove:hover {
  color: #ff3b30;
  background: rgba(255, 59, 48, 0.1);
}

/* Footer */
.kontaktformular-footer {
  padding-top: var(--space-16);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

@media (min-width: 768px) {
  .kontaktformular-footer {
      flex-direction: row;
      gap: var(--space-16);
  }
}

.kontaktformular-note {
  font-size: var(--meta-fs);
  color: var(--text-color);
  text-align: center;
  width: 100%;
}

@media (min-width: 768px) {
  .kontaktformular-note {
      text-align: left;
      width: auto;
  }
}

.kontaktformular-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

@media (min-width: 768px) {
  .kontaktformular-submit {
      width: auto;
      min-width: 200px;
  }
}

.kontaktformular-submit:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}

/* Success Overlay */
.kontaktformular-success-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.kontaktformular-success-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.kontaktformular-success-icon {
  width: 64px;
  height: 64px;
  background: #d1fae5;
  color: #059669;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-16);
  transform: scale(0.5);
  transition: transform var(--dur-slow) var(--ease-out) 0.1s;
}

.kontaktformular-success-overlay.is-active .kontaktformular-success-icon {
  transform: scale(1);
}

.kontaktformular-success-overlay h3 {
  font-size: var(--h6-fs);
  font-weight: var(--weight-bold, 700);
  margin-bottom: var(--space-8);
  color: var(--text-color);
}

.kontaktformular-success-overlay p {
  color: var(--text-color);
  text-align: center;
  max-width: 320px;
}

.kontaktformular-reset {
  margin-top: var(--space-32);
  color: var(--saeule02-rot, #a60032);
  font-weight: var(--weight-medium, 500);
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--ui-fs);
}

.kontaktformular-reset:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .file-item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* --- partials/sections/gallery-masonry/gallery-masonry.css --- */
/* ══════════════════════════════════════════════════════════
   GALLERY MASONRY
   ══════════════════════════════════════════════════════════ */
.gallery-masonry {
  /* section padding handled by global .section */
}

.gallery-masonry__grid {
  column-count: 1;
  column-gap: var(--space-16);
}

@media (min-width: 480px) {
  .gallery-masonry__grid {
    column-count: 2;
    column-gap: var(--space-16);
  }
}

@media (min-width: 800px) {
  .gallery-masonry__grid {
    column-count: 3;
    column-gap: var(--space-24);
  }
}

@media (min-width: 1200px) {
  .gallery-masonry__grid {
    column-count: 4;
    column-gap: var(--space-24);
  }
}

.gallery-masonry__item {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: var(--space-16);
  border-radius: var(--border-radius);
  overflow: hidden;
  background-color: var(--bg-white, #ffffff);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  position: relative;
}

@media (min-width: 800px) {
  .gallery-masonry__item {
    margin-bottom: var(--space-24);
  }
}

.gallery-masonry__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  transform-origin: center;
}

/* ── 2-Spalten-Showcase (für Projekte mit wenigen Bildern wie 'Hände hoch!' oder explizites data-layout="grid") ── */
.gallery-masonry__grid--2col {
  column-count: unset !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--space-24, 1.5rem) !important;
}

@media (max-width: 640px) {
  .gallery-masonry__grid--2col {
    grid-template-columns: 1fr !important;
    gap: var(--space-16, 1rem) !important;
  }
}

.gallery-masonry__grid--2col .gallery-masonry__item {
  margin-bottom: 0 !important;
  display: block !important;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  background-color: var(--bg-white, #ffffff);
  transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
}

.gallery-masonry__grid--2col .gallery-masonry__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.gallery-masonry__grid--2col .gallery-masonry__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

.gallery-masonry__grid--2col .gallery-masonry__item:hover .gallery-masonry__image {
  transform: scale(1.04);
}


/* --- partials/sections/unsere-schule-in-zahlen/unsere-schule-in-zahlen.css --- */
/* ══════════════════════════════════════════════════════════
   UNSERE SCHULE IN ZAHLEN
   ══════════════════════════════════════════════════════════ */
.unsere-schule-in-zahlen {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text-white);
  padding-block: var(--section-padding-block);
  min-height: 65svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Fix iOS massive background zoom bug */
@supports (-webkit-touch-callout: none) {
  .unsere-schule-in-zahlen {
    background-attachment: scroll !important;
  }
}

.unsere-schule-in-zahlen__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 0;
  max-width: none !important;
}

.unsere-schule-in-zahlen .container {
  z-index: 10;
}

.unsere-schule-in-zahlen__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 360px; /* Leicht vergrößerte Darstellung auf Smartphones */
  margin-inline: auto;
}

@media (min-width: 768px) {
  .unsere-schule-in-zahlen__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-24, 1.5rem);
    max-width: 860px; /* Größeres System token alignment auf iPad */
  }

  /* Bei 10 Cards im 4er-Grid: Reihe 3 (Card 9 & 10) mittig in Spalte 2 & 3 platzieren */
  .unsere-schule-in-zahlen__card:nth-child(9) {
    grid-column: 2;
  }
}

@media (min-width: 1024px) {
  .unsere-schule-in-zahlen__grid {
    gap: var(--space-32, 2rem);
    max-width: 1024px; /* Deutlich breitere Stufe auf Desktop */
  }
}

.unsere-schule-in-zahlen__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(0.5rem, 1.2vw, 0.875rem);
  aspect-ratio: 1; /* Crisp iOS widget 1:1 format auf allen Geräten */
  width: 100%;
  max-width: none;
  background-color: rgba(255, 255, 255, 0.08); /* Slightly cleaner glass */
  backdrop-filter: blur(40px) saturate(110%);
  -webkit-backdrop-filter: blur(40px) saturate(110%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-md, 16px); /* 16px für kleinere Karten */
  box-shadow: 0 4px 20px rgba(0,0,0,0.07); /* ~30 % reduzierter Schatten */
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease;
  margin-inline: auto;
  transform: translateZ(0) scale(1); /* Hardware Acceleration */
  overflow: hidden;
  box-sizing: border-box;
}

@media (hover: hover) and (pointer: fine) {
  .unsere-schule-in-zahlen__card:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: scale(1.02) translateZ(0);
  }
}

.unsere-schule-in-zahlen__card:active {
  transform: scale(0.97) translateZ(0);
}

.unsere-schule-in-zahlen__value-wrap {
  font-size: clamp(2.5rem, 4vw, 3.5rem); /* Heroic Scale synchron mit Tag der offenen Tür */
  line-height: 1; /* Tight bounding box */
  font-weight: var(--weight-bold, 700);
  letter-spacing: -0.025em; /* Tight tracking für große Ziffern */
  color: var(--text-white);
  margin-bottom: var(--space-4, 0.25rem);
  font-variant-numeric: lining-nums tabular-nums; /* Versalziffern, keine Mediävalziffern */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.unsere-schule-in-zahlen__label {
  font-size: clamp(0.75rem, 1vw, 0.875rem); /* Text-Scale synchron mit Tag der offenen Tür */
  font-weight: var(--weight-medium, 500);
  letter-spacing: 0.06em; /* Apple-Style Wide Tracking für Uppercase */
  line-height: 1.35; /* Mehr Atempause zwischen Zeilen */
  color: var(--text-white);
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance; /* Sauberes, waisenkind-freies Umbrechen */
  hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

@media (max-width: 768px) {
  .unsere-schule-in-zahlen__card {
    border-radius: 14px;
    padding: 0.5rem 0.35rem;
  }

  .unsere-schule-in-zahlen__value-wrap {
    font-size: 1.75rem;
    margin-bottom: 4px;
    line-height: 1;
  }

  .unsere-schule-in-zahlen__label {
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    line-height: 1.3;
  }
}

.unsere-schule-in-zahlen .section-head .section-eyebrow {
  display: block;
  max-width: none;
  margin-inline: auto;
  font-family: var(--textfont, 'TheSansOffice', 'TheSans', sans-serif);
  font-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* 12px–13px */
  font-weight: 400;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-white, #f5f5f7) !important;
  margin-top: 0;
  margin-bottom: clamp(0.375rem, 0.5vw, 0.5rem); /* 6px–8px */
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
}

.unsere-schule-in-zahlen .section-head .section-headline {
  font-size: var(--h2-fs, clamp(2rem, 4vw, 3.5rem));
  line-height: var(--h2-lh, 1.1);
  letter-spacing: var(--h2-ls, -0.015em);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  text-wrap: balance;
}

.unsere-schule-in-zahlen .section-head .section-lead {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  text-wrap: balance;
}


/* --- partials/sections/parallax-image/parallax-image.css --- */
/* =========================================================
   PARALLAX IMAGE
   ========================================================= */

.parallax-image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  /* Force full width breaking out of any parent containers */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
}

.parallax-image-bg {
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  max-width: none !important;
  height: 200%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}


/* --- partials/sections/testimonial/testimonial.css --- */
/* ══════════════════════════════════════════════════════════
   Premium Style Testimonial
   ══════════════════════════════════════════════════════════ */
.testimonial {
  background: var(--color-bg);
}

.testimonial-card {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--border-radius);
  max-width: 820px;
  width: 100%;
  margin-inline: auto;
  margin-top: var(--space-48);
  padding: var(--space-64) var(--space-24) var(--space-48);
  box-shadow: var(--shadow-card);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 768px) {
  .testimonial-card {
    aspect-ratio: 16 / 9;
    padding-inline: var(--space-80);
  }
}

.testimonial-card__avatar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-white);
  border: 4px solid var(--color-white);
  box-shadow: var(--shadow-md);
  z-index: 10;
}

.testimonial-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.testimonial-card__quote-icon {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-24);
  color: var(--text-muted);
}

.testimonial-card__text {
  font-size: clamp(1.1875rem, 2.5vw, 1.5rem);
  line-height: 1.4;
  font-weight: var(--weight-medium);
  letter-spacing: -0.015em;
  color: var(--color-ink);
  max-width: 768px;
  margin-bottom: var(--space-32);
  text-wrap: balance;
}

.testimonial-card__divider {
  display: none;
}

.testimonial-card__name {
  display: block;
  font-size: var(--body-fs);
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.testimonial-card__role {
  font-size: var(--text-base);
  color: var(--text-muted);
  margin-top: var(--space-4);
}





/* --- partials/sections/testimonials-cards/testimonials-cards.css --- */
/* ══════════════════════════════════════════════════════════
   Testimonial Carousel (Scroll-Snap) Component
   ══════════════════════════════════════════════════════════ */
.testimonial-carousel-section .container {
  position: relative;
}

.testimonial-carousel {
  display: flex;
  gap: clamp(1.25rem, 2.2vw, 2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
  padding-block: var(--space-24);
}

.testimonial-carousel::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.testimonial-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  display: flex;
  justify-content: center;
}

.testimonial-carousel__slide > .testimonial-card {
  margin-top: var(--space-48); /* Keep the margin-top for the avatar */
  margin-inline: 0; /* Override auto margin since flex handles centering */
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.testimonial-carousel__slide > .testimonial-card:hover {
  transform: none; /* Verhindert vertikales Springen beim Überfahren mit der Maus während des Scrollens */
}

/* ── NEUE, ROBUSTE PFEIL-STEUERUNG ── */

.testimonial-carousel-controls {
  pointer-events: none; /* Let clicks pass through empty space */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.testimonial-carousel__btn {
  pointer-events: auto; /* Buttons sind klickbar */
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
  color: var(--color-ink);
}

.testimonial-carousel__btn svg {
  width: 18px;
  height: 18px;
}

.testimonial-carousel__btn:hover {
  box-shadow: var(--shadow-lg);
  transform: scale(1.1);
}

.testimonial-carousel__btn:active {
  transform: scale(0.95);
}

.testimonial-carousel__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Desktop & Landscape Tablets: Absolute Positionierung auf der Y-Achse zentriert */
@media (min-width: 1025px), (min-width: 768px) and (orientation: landscape) {
  .testimonial-carousel-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    /* Pfeile an den Container-Kanten pinnen (beide sichtbar, nichts wird abgeschnitten) */
    padding-inline: 8px;
    z-index: 20;
  }
}

/* Mobile & Portrait Tablets (inkl. iPad Portrait): Natürlicher Fluss unterhalb der Karte */
@media (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
  .testimonial-carousel-controls {
    position: static;
    transform: none;
    justify-content: center;
    gap: 16px;
    margin-top: 16px; /* Abstand zur Karte oben */
    padding-bottom: 24px; /* Abstand nach ganz unten */
  }
  
  .testimonial-carousel-section .container {
    padding-inline: 0;
  }
}


/* --- partials/global/cta/cta.css --- */
/* ══════════════════════════════════════════════════════════
   Pathways CTA Hero
   ══════════════════════════════════════════════════════════ */
.cta {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--white);
  padding-block: var(--section-padding-block);
  /* Graue Trennlinien oben und unten */
  border: none; /* removed top/bottom borders */
}

@media (min-width: 768px) {
  .cta {
    height: calc((100vw - var(--space-16) * 2) * 9 / 16 + var(--section-padding-block) * 2);
    max-height: calc(820px * 9 / 16 + var(--section-padding-block) * 2);
  }
}

/* Full-Bleed: über die seitlichen Section-Abstände hinaus auf volle
   Viewport-Breite ausbrechen (body/main haben overflow-x: hidden).
   Der section-qualifizierte Selektor schlägt die globale Regel
   `section:not(.hero) > :not(.gallery-container)` (max-width + margin auto). */
section.cta > .cta__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  max-width: none;
  margin-inline: -50vw 0;
  z-index: 0;
  background-position: top center;
  background-repeat: no-repeat;
}

.cta__overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cta__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.40) 0%,
    rgba(255, 255, 255, 0.80) 50%,
    var(--color-bg) 100%);
}

.cta__content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: var(--container-1200, 1200px);
  width: 100%;
}

.cta__content .section-headline {
  max-width: none;
  font-size: clamp(1.75rem, 0.9rem + 2vw, 3.25rem);
}

.cta__content .section-lead {
  max-width: none;
}

@media (min-width: 860px) {
  .cta__content .section-headline,
  .cta__content .section-lead {
    white-space: nowrap;
  }
}

.cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-32);
}

@media (min-width: 768px) {
  .cta__actions {
    flex-direction: row;
    gap: var(--space-24);
  }
}

/* Basis-Button: entfernt die schwarzen Standard-Rahmen des Browsers
   und gibt allen .btn einen Pill-Radius (wie die Navigations-Buttons). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  border: 2px solid transparent;        /* kein schwarzer UA-Rahmen */
  border-radius: var(--border-radius-pill, 999px);    /* Pill */
  font-family: var(--textfont);
  line-height: 1.2;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
              background-color 160ms ease,
              border-color 160ms ease,
              box-shadow 160ms ease !important;
}

.btn:focus-visible {
  outline: 2px solid var(--accent-color, #a60032);
  outline-offset: 3px;
}

.cta__actions .btn {
  width: auto !important;
  min-width: 162px !important;
  max-width: none !important;
  text-align: center !important;
  /* Apple.com exact: padding: 12px 22px, font-size: 17px, weight: 400 */
  padding-block: 12px !important;
  padding-inline: 22px !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  /* Apple's "stadium" radius — 980px observed on apple.com */
  border-radius: 980px !important;
  border-width: 1.5px !important;
  letter-spacing: -0.01em !important;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
              background-color 160ms ease,
              border-color 160ms ease,
              box-shadow 160ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .cta__actions .btn:hover {
    transform: translateY(-2px) !important;
  }
}

.cta__actions .btn:active {
  transform: scale(0.97) !important;
  transition-duration: 80ms !important;
}


.btn--kollegium-primary {
  background: var(--color-kollegium); /* #a60032 */
  color: #fff;                   /* immer weiß, auch im Dunkelmodus */
  border-color: var(--color-kollegium);
}
.btn--kollegium-primary:hover {
  background: var(--color-kollegium);
  box-shadow: var(--shadow-lg);
}
.btn--kollegium-secondary,
.btn:not(.btn--kollegium-primary):not([class*="primary"]) {
  background: transparent !important;
  background-color: transparent !important;
  border: 2px solid var(--color-kollegium);
  color: var(--color-kollegium);
}
.btn--kollegium-secondary:hover,
.btn--kollegium-secondary:focus,
.btn--kollegium-secondary:focus-visible,
.btn--kollegium-secondary:active,
.btn:not(.btn--kollegium-primary):not([class*="primary"]):hover,
.btn:not(.btn--kollegium-primary):not([class*="primary"]):focus,
.btn:not(.btn--kollegium-primary):not([class*="primary"]):focus-visible,
.btn:not(.btn--kollegium-primary):not([class*="primary"]):active {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: var(--shadow-lg);
}


/* --- partials/global/gallery-fan/gallery-fan.css --- */
/* ══════════════════════════════════════════════════════════
   Premium Style Fächer Galerie
   ══════════════════════════════════════════════════════════ */
.fan-gallery {
  --fan-height: 450px;
  background: var(--color-surface);
  position: relative;
  padding-top: var(--section-padding-block);
  padding-bottom: calc(var(--section-padding-block) + 4rem);
  margin-bottom: var(--section-padding-block);
  
  /* Force full width even if placed inside a container */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow-x: clip;
  border: none;
  outline: none;
}

.fan-gallery:focus,
.fan-gallery:focus-visible,
#fan-gallery:focus,
#fan-gallery:focus-visible,
[data-include]:focus,
[data-include]:focus-visible {
  outline: none !important;
  border: none !important;
}

.fan-gallery .container {
  position: relative;
  z-index: 1;
}

.fan-gallery .section-head {
  margin-bottom: var(--section-padding-block) !important;
}

.fan-gallery .section-lead {
  max-width: none !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
}

@media (max-width: 768px) {
  .fan-gallery .section-lead {
    white-space: normal !important;
    text-wrap: balance !important;
  }
}

.fan-gallery .cta__actions {
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  margin-bottom: 0;
}

.fan-gallery__wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 0;
  padding-bottom: var(--space-80);
}

.gallery-fan__marquee {
  position: absolute;
  top: calc(var(--fan-height, 450px) / 2);
  left: 50%;
  width: 100vw;
  max-width: 100vw !important;
  margin: 0 !important;
  transform: translate(-50%, -50%);
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.5s ease;
  /* Force text to start from the left */
  display: flex;
  justify-content: flex-start;
  text-align: left;
}

.gallery-fan__marquee.is-visible,
.fan-gallery__wrapper:has(.fan-container.is-visible) .gallery-fan__marquee {
  opacity: 0.04;
}

.gallery-fan__marquee-track {
  display: flex;
  width: max-content; /* Ensure track spans full width of all 8 spans */
  white-space: nowrap;
  animation: fanMarquee 260s linear infinite;
  transform: translateX(0);
}

.gallery-fan__marquee-track span {
  flex-shrink: 0; /* Prevent spans from shrinking */
  font-size: clamp(3.5rem, 12vw, 16rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-color); 
  padding-right: 2rem;
  line-height: 1;
}

@keyframes fanMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.fan-container {
  position: relative;
  z-index: 2;
  width: 300px;
  height: 450px; /* 2:3 aspect ratio */
  margin: 0 auto;
  perspective: 1200px;
}



.fan-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  background-color: transparent;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform-origin: bottom center;
  transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1), opacity 600ms cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Initial state: Stacked and slightly pushed back */
  transform: translateY(50px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

.fan-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Stacked State (Visible before fan out) */
.fan-container.is-visible .fan-card {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
}

/* Fan Out State (Physical card dealing cascade from center outward) */
.fan-container.fan-out .fan-card:nth-child(3) {
  transform: rotate(0deg) translateX(0) translateY(0);
  z-index: 5; /* Center card on top */
  transition-delay: 0ms;
}

.fan-container.fan-out .fan-card:nth-child(2) {
  transform: rotate(-15deg) translateX(-70px) translateY(10px);
  z-index: 2;
  transition-delay: 40ms;
}

.fan-container.fan-out .fan-card:nth-child(4) {
  transform: rotate(15deg) translateX(70px) translateY(10px);
  z-index: 2;
  transition-delay: 40ms;
}

.fan-container.fan-out .fan-card:nth-child(1) {
  transform: rotate(-30deg) translateX(-140px) translateY(40px);
  z-index: 1;
  transition-delay: 80ms;
}

.fan-container.fan-out .fan-card:nth-child(5) {
  transform: rotate(30deg) translateX(140px) translateY(40px);
  z-index: 1;
  transition-delay: 80ms;
}

/* =========================================================
   Responsive Adjustments for Tablets and Mobiles
   ========================================================= */

@media (max-width: 1024px) {
  /* iPad Portrait & smaller: tighten the spread slightly */
  .fan-container.fan-out .fan-card:nth-child(1) { transform: rotate(-25deg) translateX(-110px) translateY(30px); }
  .fan-container.fan-out .fan-card:nth-child(2) { transform: rotate(-12deg) translateX(-55px) translateY(10px); }
  .fan-container.fan-out .fan-card:nth-child(4) { transform: rotate(12deg) translateX(55px) translateY(10px); }
  .fan-container.fan-out .fan-card:nth-child(5) { transform: rotate(25deg) translateX(110px) translateY(30px); }
}

@media (max-width: 768px) {
  .fan-gallery {
    --fan-height: 360px;
  }
  /* Tablet / Large Phones */
  .fan-container {
    width: 240px;
    height: 360px;
  }
  .fan-container.fan-out .fan-card:nth-child(1) { transform: rotate(-22deg) translateX(-80px) translateY(20px); }
  .fan-container.fan-out .fan-card:nth-child(2) { transform: rotate(-11deg) translateX(-40px) translateY(5px); }
  .fan-container.fan-out .fan-card:nth-child(4) { transform: rotate(11deg) translateX(40px) translateY(5px); }
  .fan-container.fan-out .fan-card:nth-child(5) { transform: rotate(22deg) translateX(80px) translateY(20px); }
}

@media (max-width: 480px) {
  .fan-gallery {
    --fan-height: 300px;
  }
  /* Small Phones (iPhone) */
  .fan-container {
    width: 200px;
    height: 300px;
  }
  .fan-container.fan-out .fan-card:nth-child(1) { transform: rotate(-20deg) translateX(-60px) translateY(15px); }
  .fan-container.fan-out .fan-card:nth-child(2) { transform: rotate(-10deg) translateX(-30px) translateY(5px); }
  .fan-container.fan-out .fan-card:nth-child(4) { transform: rotate(10deg) translateX(30px) translateY(5px); }
  .fan-container.fan-out .fan-card:nth-child(5) { transform: rotate(20deg) translateX(60px) translateY(15px); }
}

/* Karten verharren nach der Fächeröffnung statisch und unklickbar */
.fan-container .fan-card,
.fan-container.fan-out .fan-card {
  pointer-events: none !important;
  cursor: default !important;
}

@media (prefers-reduced-motion: reduce) {
  /* Lauftext: Marquee anhalten und sofort sichtbar halten */
  .gallery-fan__marquee {
    transition: none !important;
    opacity: 0.04 !important;
  }

  .gallery-fan__marquee-track {
    animation: none !important;
  }

  /* Karten: Alle Übergänge und Bewegungen deaktivieren.
     Karten sofort sichtbar und in der Fächerposition darstellen. */
  .fan-card {
    transition: none !important;
    opacity: 1 !important;
  }

  /* Initiale Einstapel-Animation überspringen */
  .fan-container .fan-card {
    transform: translateY(0) translateZ(0) scale(1) rotate(0deg) !important;
  }

  /* Fächer-Aufklapp-Transforms beibehalten (Layouts sichtbar), ohne Animation */
  .fan-container.fan-out .fan-card {
    transition: none !important;
  }
}



/* --- partials/sections/quellennachweis/quellennachweis.css --- */
/* =========================================================
   QUELLENNACHWEIS (Editorial Note)
   ========================================================= */

section.quellennachweis {
}

.quellennachweis-inner {
  max-width: var(--container-980);
  margin-inline: auto;
}

.quellennachweis-item:not(:last-child) {
  margin-bottom: var(--space-40);
}

.quellennachweis-header {
  /* Removed double margin */
}

.quellennachweis-title {
  margin-bottom: var(--space-12);
  display: block;
  font-size: var(--legal-fs);
  font-weight: 400;
  line-height: 1.14;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted) !important;
  white-space: nowrap;
}

.quellennachweis-content {
  /* Container for text */
}

.quellennachweis-text,
.quellennachweis-text-html {
  font-size: 17px;
  line-height: 1.52;
  margin-bottom: var(--space-8);
  color: var(--text-color);
  max-width: none;
}

/* ── Cinematic Stagger Reveal ── */
.quellennachweis-item.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.quellennachweis-item.reveal .quellennachweis-title,
.quellennachweis-item.reveal .quellennachweis-text {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity 0.38s cubic-bezier(0.23, 1, 0.32, 1), transform 0.38s cubic-bezier(0.23, 1, 0.32, 1);
}

.quellennachweis-item.reveal.is-visible .quellennachweis-title {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.38s cubic-bezier(0.23, 1, 0.32, 1) 0s,
              transform 0.38s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}

.quellennachweis-item.reveal.is-visible .quellennachweis-text {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.38s cubic-bezier(0.23, 1, 0.32, 1) 0.04s,
              transform 0.38s cubic-bezier(0.23, 1, 0.32, 1) 0.04s;
}

.quellennachweis-item.reveal:nth-child(2).is-visible .quellennachweis-title {
  transition-delay: 0.05s;
}
.quellennachweis-item.reveal:nth-child(2).is-visible .quellennachweis-text {
  transition-delay: 0.09s;
}
.quellennachweis-item.reveal:nth-child(3).is-visible .quellennachweis-title {
  transition-delay: 0.10s;
}
.quellennachweis-item.reveal:nth-child(3).is-visible .quellennachweis-text {
  transition-delay: 0.14s;
}

@media (prefers-reduced-motion: reduce) {
  .quellennachweis-item.reveal .quellennachweis-title,
  .quellennachweis-item.reveal .quellennachweis-text {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.quellennachweis-text a {
  color: #a60032;
  text-decoration: none;
  background-image: linear-gradient(#a60032, #a60032);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.quellennachweis-text a:hover {
  background-size: 100% 1px;
}

/* --- partials/sections/bildungswege/bildungswege.css (entfernt — abgelöst durch bildungsangebot) --- */

/* --- partials/sections/downloadsection/downloadsection.css --- */
/* =========================================================
   DOWNLOAD SECTION (Premium style)
   ========================================================= */

.downloadsection {
  padding-block: var(--section-padding-block);
  background-color: var(--bg-grey);
  overflow: hidden;
}

.downloadsection--inline,
.downloadsection__list.downloadsection--inline {
  background: transparent !important;
  padding-top: 0 !important;
}

.downloadsection__list {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.2vw, 2rem);
}

/* ── Card Styles ────────────────────────────────────────── */
.downloadsection__card {
  text-decoration: none;
  background-color: var(--white);
  border-radius: var(--border-radius-md, 16px);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.028);
  position: relative;
  overflow: hidden;
  /* Visible by default — animation opted in by JS via .downloadsection--animate */
  transition:
    box-shadow 250ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 200ms ease,
    border-color 200ms ease,
    transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* JS adds .downloadsection--animate once IntersectionObserver is set up */
.downloadsection--animate .downloadsection__card {
  opacity: 0;
  transform: translateY(10px) scale(0.985);
}

.downloadsection--animate .downloadsection__card.is-visible {
  animation: cardFadeIn 360ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes cardFadeIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.downloadsection__card:active {
  transform: scale(0.985);
  transition: transform 100ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Dark Mode Card Styles */
html[data-theme="dark"] .downloadsection__card {
  background-color: #1c1c1e;
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

@media (hover: hover) and (pointer: fine) {
  .downloadsection__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.09);
  }

  html[data-theme="dark"] .downloadsection__card:hover {
    box-shadow: 0 8px 32px rgba(255, 255, 255, 0.04);
  }
}

/* ── Hover Shimmer ──────────────────────────────────────── */
/* A subtle light sweep across the card on hover */
.downloadsection__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 70%
  );
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
  transition: opacity 0ms;
}

@media (hover: hover) and (pointer: fine) {
  .downloadsection__card:hover::after {
    opacity: 1;
    transform: translateX(100%);
    transition:
      opacity 80ms ease,
      transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

html[data-theme="dark"] .downloadsection__card::after {
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.07) 50%,
    transparent 70%
  );
}

/* ── Content Layout ─────────────────────────────────────── */
.downloadsection__link {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  color: var(--accent-color, #a60032);
}

.downloadsection__text-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.downloadsection__title {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-16, 1rem);
  row-gap: 2px;
  line-height: 1.35;
  width: 100%;
  text-align: left;
}

.downloadsection__title-text {
  font-size: var(--body-fs);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.008em;
  color: var(--accent-color, #a60032);
  text-wrap: pretty;
  
  background-image: linear-gradient(var(--accent-color, #a60032), var(--accent-color, #a60032));
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--dur-base) ease-out;
}

html[data-theme="dark"] .downloadsection__title-text {
  color: var(--accent-color, #a60032); /* In links ist es auch im Dark Mode meist Akzentfarbe */
}

.downloadsection__card:hover .downloadsection__title-text {
  background-size: 100% 1px;
}

.downloadsection__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--bg-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
  transition:
    color var(--dur-base, 0.4s) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--dur-base, 0.4s) cubic-bezier(0.22, 1, 0.36, 1),
    background-color var(--dur-base, 0.4s) ease;
}

html[data-theme="dark"] .downloadsection__icon {
  background-color: #2c2c2e;
}

.downloadsection__icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}

.downloadsection__card:hover .downloadsection__icon {
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--text-color);
  transform: translateY(2px);
}

html[data-theme="dark"] .downloadsection__card:hover .downloadsection__icon {
  background-color: rgba(255, 255, 255, 0.08);
}



.downloadsection__size {
  display: inline-block;
  white-space: nowrap;
  margin-left: 0 !important;
  font-size: var(--legal-fs);
  line-height: var(--legal-lh);
  letter-spacing: var(--legal-ls);
  color: var(--text-muted);
  font-weight: var(--legal-fw);
  font-variant-numeric: lining-nums tabular-nums;
  transition: opacity 300ms ease;
}

.downloadsection__card:hover .downloadsection__size {
  opacity: 0.7;
}

@media (max-width: 768px) {
  .downloadsection__size {
    display: none;
  }
}

/* ── Reduced Motion Override ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .downloadsection--animate .downloadsection__card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .downloadsection__card::after {
    display: none;
  }

  .downloadsection__icon {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- partials/sections/bildungsgangleitungen/bildungsgangleitungen.css --- */
/* =========================================================
   BILDUNGSGANGLEITUNGEN SECTION
   Premium-Style fullscreen hero with orbiting image thumbnails
   and a centered headline. No external animation library —
   pure CSS keyframes + GSAP spring-in on entry.
   ========================================================= */

/* ── Section Shell ──────────────────────────────────────── */
.bildungsgangleitungen {
  position: relative;
  width: 100%;
  min-height: 100svh;
  min-height: 800px;
  background-color: var(--bg-white);          /* Changed from #ffffff to match design request */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Section uses its own padding (no section-class override) */
  padding-block: 0;
  padding-inline: 0;
}

/* ── Centre Text ────────────────────────────────────────── */
.bildungsgangleitungen__center {
  position: relative;
  z-index: 20;
  text-align: center;
  padding-inline: var(--section-padding-inline);
  /* Entry animation handled by JS / class toggle */
  opacity: 0;
  transform: scale(0.9) translateY(20px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.bildungsgangleitungen__center.bgl-is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.bildungsgangleitungen__headline {
  font-family: var(--textfont);
  font-size: var(--h1-fs);
  font-weight: var(--h1-fw);
  line-height: var(--h1-lh);
  letter-spacing: var(--h1-ls);
  color: var(--text-color);
  margin: 0;
  padding-bottom: var(--space-16);
}

/* ── Floating Image Container ───────────────────────────── */
.bildungsgangleitungen__canvas {
  position: absolute;
  inset: 0;
  max-width: 1400px;
  margin-inline: auto;
  pointer-events: none;
}

/* ── Individual Image Wrapper ───────────────────────────── */
.bgl-item {
  position: absolute;
  pointer-events: none;
  /* Entry: starts hidden, JS applies spring-in */
  opacity: 0;
}

.bgl-item.bgl-entered {
  pointer-events: auto;
}

/* ── Image Card ─────────────────────────────────────────── */
.bgl-card {
  width: clamp(72px, 12vw, 150px);
  aspect-ratio: 3 / 2;
  border-radius: 12px; /* Premium-Style subtle rounded corners for cards */
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); /* Smoother, higher-end shadow */
  cursor: pointer;
  /* Float keyframe applied inline via JS */
}

.bgl-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-smooth);
}

.bgl-card:hover img {
  transform: scale(1.06);
}

/* ── Floating Idle Animation ────────────────────────────── */
@keyframes bgl-float-odd {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes bgl-float-even {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

.bgl-card.bgl-float-odd {
  animation: bgl-float-odd var(--bgl-duration, 6s) ease-in-out infinite;
}
.bgl-card.bgl-float-even {
  animation: bgl-float-even var(--bgl-duration, 6s) ease-in-out infinite;
}

/* ── Reduced Motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bildungsgangleitungen__center {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .bgl-card { animation: none !important; }
}

/* ── Responsive: Bespoke Mobile Arrangement ──────── */
@media (max-width: 768px) {
  /* Top half group (5 images) */
  .bgl-item[data-id="1"]  { top: 4% !important; left: 4% !important; right: auto !important; bottom: auto !important; }
  .bgl-item[data-id="2"]  { top: 16% !important; left: 12% !important; right: auto !important; bottom: auto !important; }
  .bgl-item[data-id="3"]  { top: 8% !important; left: auto !important; right: 25% !important; bottom: auto !important; }
  .bgl-item[data-id="4"]  { top: 25% !important; left: auto !important; right: 8% !important; bottom: auto !important; }
  .bgl-item[data-id="5"]  { top: 14% !important; left: 40% !important; right: auto !important; bottom: auto !important; }

  /* Bottom half group (6 images) */
  .bgl-item[data-id="6"]  { bottom: 30% !important; left: 8% !important; top: auto !important; right: auto !important; }
  .bgl-item[data-id="7"]  { bottom: 18% !important; left: 25% !important; top: auto !important; right: auto !important; }
  .bgl-item[data-id="8"]  { bottom: 4% !important; left: 10% !important; top: auto !important; right: auto !important; }
  .bgl-item[data-id="9"]  { bottom: 26% !important; left: auto !important; right: 8% !important; top: auto !important; }
  .bgl-item[data-id="10"] { bottom: 14% !important; left: auto !important; right: 30% !important; top: auto !important; }
  .bgl-item[data-id="11"] { bottom: 4% !important; left: auto !important; right: 4% !important; top: auto !important; }

  /* Card size adjustments for mobile to prevent overlapping */
  .bgl-card {
    width: clamp(64px, 15vw, 84px);
  }
}

/* --- partials/sections/lernvision-intro/lernvision-intro.css --- */
/* =========================================================
   LernVision Intro CSS
   ========================================================= */

.premium-shadow {
    box-shadow: var(--shadow-lg);
    transition: transform var(--dur-slow) var(--ease-smooth), box-shadow var(--dur-slow) var(--ease-smooth);
}

@media (hover: hover) {
    .card-item:hover.premium-shadow {
        box-shadow: var(--shadow-xl);
        transform: scale(1.02);
    }
}

/* Mobile Tap - Avoid sticky hover overlay */
@media (hover: none) {
    .card-item:active { transform: scale(0.98); }
}

#lernvision-film,
.lernvision-intro-section {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    margin-block: 0 !important;
    padding-block: var(--section-padding-block, clamp(3.5rem, 5vw, 5.5rem)) !important;
    padding-inline: var(--section-padding-inline, clamp(1.25rem, 3.5vw, 3rem)) !important;
    box-sizing: border-box !important;
}

.lernvision-intro__inner,
#lernvision-film .container-1440 {
    position: relative !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin-inline: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}

#lernvision-film .container-1440 > * {
    max-width: 100% !important;
    width: 100% !important;
}

/* ── Gestalt / Rhythm: Exakt symmetrischer vertikaler Abstand (data-lead <-> Text <-> Video) ── */
#lernvision-film,
.lernvision-intro-section {
    --lernvision-gap: clamp(2rem, 2.75vw, 2.5rem);
}

#lernvision-film .section-head {
    margin-bottom: var(--lernvision-gap) !important;
    padding-bottom: 0 !important;
}

#lernvision-film .section-head .section-lead {
    margin-bottom: 0 !important;
}

#lernvision-film .section-subheadline {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

.card-item,
.card-item > div,
#hero-card,
#hero-card img {
    border-radius: var(--border-radius, 1.5rem) !important;
    overflow: hidden !important;
}

#hero-card {
    background: transparent;
    margin-bottom: var(--section-padding-block);
}

#hero-card .article__fullbleed-link {
    aspect-ratio: 1920 / 747;
}

#hero-card .article__fullbleed-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Lesebreite (653px) & vertikaler Abstand zwischen Textende und Video ── */
#lernvision-film .container-980 {
    max-width: 653px !important;
    padding-inline: 0 !important;
    padding-block: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-inline: auto !important;
    margin-bottom: var(--lernvision-gap) !important;
    text-align: left !important;
}

#lernvision-film .container-980 .js-film-text {
    margin: 0 !important;
    padding: 0 !important;
}

#lernvision-film .container-980 p {
    text-align: left !important;
}

#lernvision-film .container-980 p:first-child {
    margin-top: 0 !important;
}

#lernvision-film .container-980 p:last-child {
    margin-bottom: 0 !important;
}

/* Exakte Maße wie tag-der-offenen-tuer Card: max-width 1280px, aspect-ratio 3:2, min-height 480px */
#lernvision-film .article__fullbleed-figure,
#lernvision-film .js-film-video-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
    margin-block: 0 !important;
    padding-block: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-inline: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

#lernvision-film .article__fullbleed-link {
    width: 100% !important;
    max-width: 1280px !important;
    margin-inline: auto !important;
}

#lernvision-film .aspect-video {
    position: relative !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin-inline: auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: auto !important;
    overflow: hidden !important;
    border-radius: var(--border-radius, 1.5rem) !important;
    box-shadow: var(--shadow-card, 0 4px 20px rgba(0, 0, 0, 0.06)) !important;
    background-color: var(--bg-dark, #1a1a1c) !important;
    box-sizing: border-box !important;
}

#lernvision-film .aspect-video iframe,
#lernvision-film iframe.js-film-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border: none !important;
    border-radius: var(--border-radius, 1.5rem) !important;
}

/* ── Video Facade & Instant Poster (Apple HIG / Zero Jank Video Embed) ── */
.lernvision-video-facade {
    position: relative !important;
    cursor: pointer;
    background-color: var(--bg-dark, #1a1a1c) !important;
    overflow: hidden !important;
    isolation: isolate;
}

.lernvision-video-poster-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 350ms cubic-bezier(0.16, 1, 0.3, 1), visibility 350ms;
}

.lernvision-video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lernvision-video-facade:hover .lernvision-video-poster {
    transform: scale(1.02);
}

.lernvision-video-scrim {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.36) 100%);
    pointer-events: none;
    transition: background 300ms ease;
}

.lernvision-video-facade:hover .lernvision-video-scrim {
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.45) 100%);
}

.lernvision-video-play-btn {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(64px, 7vw, 84px);
    height: clamp(64px, 7vw, 84px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: #1c1c1e;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), background-color 200ms ease, box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}

.lernvision-video-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 3px;
    color: #1c1c1e;
    transition: transform 250ms ease, color 200ms ease;
}

.lernvision-video-facade:hover .lernvision-video-play-btn,
.lernvision-video-play-btn:hover {
    transform: scale(1.08);
    background: #ffffff;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(255, 255, 255, 0.35);
}

.lernvision-video-facade:active .lernvision-video-play-btn,
.lernvision-video-play-btn:active {
    transform: scale(0.95);
}

.lernvision-video-play-btn:focus-visible {
    outline: 3px solid #0071e3;
    outline-offset: 4px;
}

/* Wenn das Video abgespielt wird: Poster ausblenden, Iframe nach vorne */
.lernvision-video-facade.is-playing .lernvision-video-poster-wrap {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.lernvision-video-facade iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    z-index: 1;
}

.lernvision-video-facade.is-playing iframe {
    z-index: 4;
}

.card-item,
.js-image-reveal a,
.js-image-reveal img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.reveal-element { 
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-element {
        transform: none !important;
        transition: opacity 150ms ease !important;
    }
}

@media (max-width: 1024px) {
    .premium-shadow {
        box-shadow: var(--shadow-md) !important;
    }

    .card-item {
        transition-duration: var(--dur-fast) !important;
    }
}


/* --- partials/sections/gallery-scatter/gallery-scatter.css --- */
/* =========================================================
   SCATTER GALLERY
   ========================================================= */

.gallery-scatter {
  position: relative;
  height: 100vh;
  height: 100svh; /* iOS/Android: kein Layout-Sprung durch Adressleiste */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

}

.gallery-scatter__text {
  position: absolute;
  z-index: 1;
  text-align: center;
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: var(--container-padding-inline, 1.5rem);
}

.gallery-scatter__title {
  letter-spacing: -0.04em;
  margin-bottom: var(--space-16);
}

.gallery-scatter__lead {
  max-width: 800px;
}

.gallery-scatter__cards {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none !important;
  pointer-events: none;
  display: grid;
  place-items: center;
}

.gallery-scatter__card {
  grid-area: 1 / 1;
  width: 35vw;
  aspect-ratio: 3 / 2;
  height: auto;
  z-index: 5;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.gallery-scatter__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile: größere Karten, da 35vw auf schmalen Viewports zu klein wirkt */
@media (max-width: 768px) {
  .gallery-scatter__card {
    width: 60vw;
  }
}

/* Reduced motion: kein Scroll-Scatter — statisches Layout, Bilder als Grid unter dem Text */
@media (prefers-reduced-motion: reduce) {
  .gallery-scatter {
    height: auto;
    flex-direction: column;
    gap: var(--space-48);
  }

  .gallery-scatter__text {
    position: static;
  }

  .gallery-scatter__cards {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-16);
    width: 100%;
    max-width: var(--container-1200);
    margin-inline: auto;
    padding-inline: var(--container-padding-inline, 1.5rem);
  }

  .gallery-scatter__card {
    grid-area: auto;
    width: 100%;
    transform: none !important;
  }
}


/* --- partials/sections/image-reveal/image-reveal.css --- */
/* ══════════════════════════════════════════════════════════
   Image Reveal — vollbreites Enthüllungsbild mit Caption
   Kinematische Enthüllung: Frame skaliert hoch, Bild zoomt
   aus, Caption folgt verzögert. Nutzt die Design-Tokens des
   Frameworks (Radius, Shadow, Easing, Duration).
   ══════════════════════════════════════════════════════════ */
.image-reveal-section {
  background: var(--bg-grey);
  padding-block: var(--section-padding-block);
  padding-inline: calc(var(--section-padding-inline, 24px) + env(safe-area-inset-left));
  box-sizing: border-box;
}

.image-reveal-section.bg-transparent {
  background: transparent !important;
  background-color: transparent !important;
}

.image-reveal__content {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  box-sizing: border-box;
}

.image-reveal__content .section-subheadline {
  margin-top: 0;
  margin-bottom: var(--space-24);
}

.image-reveal__figure {
  margin: 0;
  isolation: isolate;
}

.image-reveal__frame {
  max-width: 1200px;
  margin-inline: auto;
  display: block;
  line-height: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius, 32px); /* 32px – wie die übrigen Bilder der Website */
  box-shadow: var(--shadow-card); /* exakt derselbe Schatten wie die anderen Bilder */
  background: var(--bg-white);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 260ms cubic-bezier(0.23, 1, 0.32, 1);
}

.image-reveal__link {
  display: block;
  line-height: 0;
  cursor: pointer;
}

.image-reveal__img {
  width: 100%;
  aspect-ratio: auto;
  height: auto;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Emil Kowalski Craft Motion: Silky Image Zoom-In (Exakt wie gallery-momente) */
@media (hover: hover) and (pointer: fine) {
  .image-reveal__figure.reveal.is-visible .image-reveal__frame:hover,
  .image-reveal__frame:hover {
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04);
    transform: translateY(-4px);
    transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 260ms cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: 0s !important;
  }

  .image-reveal__figure.reveal.is-visible .image-reveal__frame:hover .image-reveal__img,
  .image-reveal__figure.reveal.is-visible .image-reveal__link:hover .image-reveal__img,
  .image-reveal__frame:hover .image-reveal__img,
  .image-reveal__link:hover .image-reveal__img {
    transform: scale(1.045) !important;
    transition: transform 420ms cubic-bezier(0.23, 1, 0.32, 1) !important;
    transition-delay: 0s !important;
  }
}

.image-reveal__figure.reveal.is-visible .image-reveal__frame:active,
.image-reveal__frame:active {
  transform: scale(0.985);
  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: 0s !important;
}

.image-reveal__figure.reveal.is-visible .image-reveal__frame:active .image-reveal__img,
.image-reveal__figure.reveal.is-visible .image-reveal__link:active .image-reveal__img,
.image-reveal__frame:active .image-reveal__img,
.image-reveal__link:active .image-reveal__img {
  transform: scale(1.02) !important;
  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1) !important;
  transition-delay: 0s !important;
}

.image-reveal__caption {
  font-size: var(--figcaption-fs, 0.875rem);
  font-weight: var(--figcaption-fw, 400);
  line-height: var(--figcaption-lh, 1.42857);
  letter-spacing: var(--figcaption-ls, 0.012em);
  color: var(--text-color, #1d1d1f);
  text-align: center;
  text-wrap: pretty;
  max-width: 653px; /* Bündig mit der Lesespalte (.article__body) für perfekte visuelle Kanten */
  margin-inline: auto;
  margin-top: var(--space-12, 0.75rem);
}

/* ── Apple Newsroom Signature Fullbleed Image Reveal (Exakt wie article__fullbleed-figure) ── */
.image-reveal__figure.reveal {
  opacity: 1;
  transform: none;
  isolation: isolate;
}

.image-reveal__figure.reveal .image-reveal__frame {
  opacity: 0;
  transform: translateY(54px) scale(0.94);
  box-shadow: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: opacity 0.7s ease-out,
              transform 0.7s ease-out,
              box-shadow 0.7s ease-out;
}

.image-reveal__figure.reveal .image-reveal__img {
  transform: scale(1.16);
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-reveal__figure.reveal .image-reveal__caption {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* ── Active Visible State ── */
.image-reveal__figure.reveal.is-visible .image-reveal__frame {
  opacity: 1;
  transform: translateY(0) scale(1);
  box-shadow: var(--shadow-card);
  transition: opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
              transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
              box-shadow 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.image-reveal__figure.reveal.is-visible .image-reveal__img {
  transform: scale(1);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.image-reveal__figure.reveal.is-visible .image-reveal__caption {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s,
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
}

@media (prefers-reduced-motion: reduce) {
  .image-reveal__figure.reveal .image-reveal__frame,
  .image-reveal__figure.reveal .image-reveal__img,
  .image-reveal__figure.reveal .image-reveal__caption {
    opacity: 1 !important;
    transform: none !important;
    box-shadow: var(--shadow-card) !important;
    transition: none !important;
  }
}

/* --- partials/sections/gallery-aktuelles/gallery-aktuelles.css --- */
/* ══════════════════════════════════════════════════════════
   Gallery-Aktuelles — filterbare Erlebnis-Galerie
   Nutzt die Framework-Tokens (Farben, Spacing, Radius, Shadow,
   Easing) – keine Tailwind-Utilities.
   ══════════════════════════════════════════════════════════ */
.gallery-aktuelles {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  margin-block: 0 !important;
  padding-block: var(--section-padding-block, clamp(3.5rem, 5vw, 5.5rem)) !important;
  padding-inline: var(--section-padding-inline, clamp(1.25rem, 3.5vw, 3rem)) !important;
  box-sizing: border-box !important;
  display: block !important;
  overflow: visible !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.gallery-aktuelles > .container {
  position: relative !important;
  width: 100% !important;
  max-width: 1440px !important;
  margin-inline: auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

/* Ruhezustand nach der Reveal-Animation: ohne inline-Transform, damit
   CSS-Hover (Card-Scale) wieder funktioniert. */
.gallery-aktuelles .reveal-element.is-revealed {
  opacity: 1;
  transform: none;
}

.gallery-aktuelles .section-head {
  margin-bottom: var(--space-48);
}

.gallery-aktuelles__header {
  margin-bottom: var(--space-64);
  /* Glasleiste schwebt beim Scrollen über den Karten (Liquid Glass refraktiert
     die vorbeiziehenden Bilder) */
  position: sticky;
  top: calc(44px + var(--space-8)); /* dockt unter der fixen Navigation (44px) an */
  z-index: 20;
}
@media (prefers-reduced-motion: reduce) {
  .gallery-aktuelles__header { position: static; }
}

/* ── Section Head (Apple Typography / Emil Kowalski Optimierung) ── */
.gallery-aktuelles .section-head {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem) !important;
}

.gallery-aktuelles .section-eyebrow {
  font-size: 0.75rem !important; /* 12px (Caption 1) */
  font-weight: 600 !important;
  letter-spacing: 0.08em !important; /* Strafferes Tracking, nicht zu locker */
  color: var(--accent-color, #a60032) !important;
  margin-bottom: 0.5rem !important; /* Näher an der Headline für Zusammengehörigkeit */
}

.gallery-aktuelles .section-headline {
  font-size: clamp(2rem, 3.5vw, 3rem) !important; /* 32px bis 48px */
  font-weight: 700 !important;
  line-height: 1.1 !important; /* Apple Display Line-Height */
  letter-spacing: -0.015em !important; /* Optisch korrekter als -0.03em */
  margin-bottom: 1.25rem !important;
  text-wrap: balance !important;
}

.gallery-aktuelles .section-lead {
  font-size: clamp(1.125rem, 1.5vw, 1.25rem) !important; /* 18px bis 20px (Nicht zu riesig!) */
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important; /* Fließtextgröße = neutrales Tracking */
  color: var(--text-muted, #6e6e73) !important;
  max-width: 48ch !important;
  margin-inline: auto !important;
  text-wrap: pretty !important;
}

/* ── Dot-Navigation (Filter) ─────────────────────────────── */
/* Premium-Style Filterleiste: ruhig, neutral, ein schwebendes weißes
   Segment für die Auswahl (wie iOS-Segmented-Control). Säulenfarbe nur
   als feiner Punkt-Akzent, Labels bleiben neutral. */
.dot-nav-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 100%;
  width: fit-content;
  height: 70px; /* Exakt so hoch wie ein DOWNLOADSECTION Item */
  margin-inline: auto;
  padding: 8px 28px; /* Symmetrisches, gleich breites Padding links & rechts */
  border-radius: var(--border-radius); /* Border-Radius exakt wie die Erlebniskarten */
  /* Liquid Glass: Transparenz + Sättigung (Refraktion) + Spekular-Highlight + Tiefe */
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(255, 255, 255, 0.25);
}

.dot-nav-scroll {
  overflow-x: auto;
  scroll-behavior: smooth;
  width: 100%;
  padding: 15px 2px;
  margin-top: -15px;
  margin-bottom: -15px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.dot-nav-scroll::-webkit-scrollbar { display: none; }

.dot-nav-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: max-content;
}

/* Gleitender weißer Indikator (schwebendes iOS-Segment) */
.dot-nav-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: calc(var(--border-radius) - 4px); /* Harmonischer Innenradius */
  /* aktive Glas-Linse: heller, mit Spekular-Highlight */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateX(0);
  transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1),
              width 250ms cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .dot-nav-indicator { transition: none; }
}

.dot-nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms cubic-bezier(0.23, 1, 0.32, 1),
              color 150ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.dot-nav-arrow:hover { background: rgba(0, 0, 0, 0.04); color: var(--text-color); }
.dot-nav-arrow:active { transform: scale(0.96); }
.dot-nav-arrow svg { width: 16px; height: 16px; stroke-width: 1.6; }

@media (min-width: 1025px) {
  .dot-nav-arrow { display: none; }
}

.dot-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 9px 16px;
  border: none;
  background: transparent;
  border-radius: calc(var(--border-radius) - 4px);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--textfont);
  font-size: var(--nav-primary-fs);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--text-muted);
  transition: color 150ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.dot-item { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .dot-item:hover { color: var(--text-color); }
}
.dot-item:active { transform: scale(0.97); }
.dot-item.is-active {
  color: var(--text-color);
  font-weight: 600; /* Hintergrund kommt vom gleitenden .dot-nav-indicator */
}

/* Säulenfarbe nur als feiner Punkt; Labels bleiben neutral (Premium-minimal) */
.dot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-item .dot-label { line-height: 1; color: inherit; }

/* ── Grid (2 Spalten Desktop/Tablet, 1 Spalte Mobil) ── */
.gallery-aktuelles__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 1.4vw, 1.5rem);
}
@media (max-width: 768px) {
  .gallery-aktuelles__grid { grid-template-columns: 1fr; }
}

/* ── Karten (Apple Bento Reveal Animation exakt wie kollegium.html) ──── */
.gallery-aktuelles-card {
  position: relative;
  aspect-ratio: 3 / 2;
  width: 100% !important;
  border-radius: var(--border-radius);
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  box-shadow: var(--shadow-card);
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .gallery-aktuelles-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
  }
}
.gallery-aktuelles-card:active {
  transform: scale(0.975) !important;
  transition-duration: 100ms !important;
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.gallery-aktuelles-card:focus-visible {
  outline: 2px solid var(--accent-color, #a60032) !important;
  outline-offset: 4px !important;
}
.gallery-aktuelles-card.is-hidden { display: none !important; }

.gallery-aktuelles-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform var(--dur-slow, 400ms) cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center;
}
@media (hover: hover) and (pointer: fine) {
  .gallery-aktuelles-card:hover .gallery-aktuelles-card__img {
    transform: scale(1.04);
  }
}

/* Fallback ohne GSAP */
.gallery-aktuelles-card.is-visible {
  opacity: 1;
}

/* Säulenfarbiges Overlay beim Hover (opacity 0.90) */
.gallery-aktuelles-card__overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}
@media (hover: hover) {
  .gallery-aktuelles-card:hover .gallery-aktuelles-card__overlay { opacity: 0.90; }
}
@media (hover: none) {
  .gallery-aktuelles-card:active .gallery-aktuelles-card__overlay { opacity: 0.88; }
}

/* Lesbarkeits-Gradient unten: Smooth multi-stop ease scrim gegen Banding */
.gallery-aktuelles-card__scrim {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 66%;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.65) 30%,
    rgba(0, 0, 0, 0.28) 60%,
    rgba(0, 0, 0, 0.05) 85%,
    transparent 100%
  );
  pointer-events: none;
  opacity: 1;
  transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.gallery-aktuelles-card:hover .gallery-aktuelles-card__scrim,
.gallery-aktuelles-card:active .gallery-aktuelles-card__scrim,
.gallery-aktuelles-card:focus-within .gallery-aktuelles-card__scrim {
  opacity: 0 !important;
}

.gallery-aktuelles-card__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: clamp(1.25rem, 1.8vw, 1.75rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #ffffff;
}
.gallery-aktuelles-card__content > div:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-right: 44px;
}
.gallery-aktuelles-card__content .meta-label {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem; /* 11px – Apple Caption 2 */
  font-weight: 500;
  line-height: 1.18; /* Apple 13px line-height bei 11px */
  text-transform: uppercase;
  letter-spacing: 0.06em; /* Apple Tracking für Caption 2 */
  
  background: var(--accent-color, #a60032);
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  
  color: #ffffff !important;
  padding-block: 0.35rem; /* Optisch korrigiert wegen größerer line-height */
  padding-inline: 0.875rem;
  border-radius: var(--border-radius-pill, 9999px);
  margin-bottom: var(--space-8, 0.5rem);
  width: fit-content;
  transition: opacity 200ms ease;
}

/* Vollfarbe Normalzustand nach Säule (rein flach, kein weißer Rand, kein 3D-Effekt) */
.gallery-aktuelles-card[data-category="saeule-01"] .meta-label,
.gallery-aktuelles-card .meta-label[data-saeule="saeule-01"],
.meta-label[data-saeule="saeule-01"],
.meta-label[data-label="Katholische Schule"] {
  background: var(--saeule01-blau, #2292cc) !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}
.gallery-aktuelles-card[data-category="saeule-02"] .meta-label,
.gallery-aktuelles-card .meta-label[data-saeule="saeule-02"],
.meta-label[data-saeule="saeule-02"],
.meta-label[data-label="Unterricht & Praxis"] {
  background: var(--saeule02-rot, #a60032) !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}
.gallery-aktuelles-card[data-category="saeule-03"] .meta-label,
.gallery-aktuelles-card .meta-label[data-saeule="saeule-03"],
.meta-label[data-saeule="saeule-03"],
.meta-label[data-label="Schulgemeinschaft"],
.meta-label[data-label="Schulleben"] {
  background: var(--saeule03-orange, #fab439) !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}
.gallery-aktuelles-card[data-category="saeule-04"] .meta-label,
.gallery-aktuelles-card .meta-label[data-saeule="saeule-04"],
.meta-label[data-saeule="saeule-04"],
.meta-label[data-label="Unsere Wege"],
.meta-label[data-label="Berufliche Orientierung"] {
  background: var(--saeule04-gruen, #95c11f) !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}
.gallery-aktuelles-card[data-category="saeule-05"] .meta-label,
.gallery-aktuelles-card .meta-label[data-saeule="saeule-05"],
.meta-label[data-saeule="saeule-05"],
.meta-label[data-label="Beratung & Unterstützung"],
.meta-label[data-label="Beratung"] {
  background: var(--saeule05-rosa, #e3599b) !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}
.gallery-aktuelles-card[data-category="saeule-06"] .meta-label,
.gallery-aktuelles-card .meta-label[data-saeule="saeule-06"],
.meta-label[data-saeule="saeule-06"],
.meta-label[data-label="Internationales & Europa"],
.meta-label[data-label="Europa & Erasmus+"],
.meta-label[data-label="Europa"] {
  background: var(--saeule06-lila, #5458a3) !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

/* Auf Hover: Farbe bleibt immer reine Säulenfarbe, kein Glas, kein weißer Rahmen, kein 3D-Effekt */
@media (hover: hover) {
  .gallery-aktuelles-card:hover .meta-label {
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #ffffff !important;
  }
}
.gallery-aktuelles-card__title {
  color: #ffffff;
  /* Sync with bildungsangebot-card__title */
  font-size: clamp(1.25rem, 0.875rem + 1.25vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.012em;
  text-wrap: balance;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.32);
}

.gallery-aktuelles-card__arrow {
  position: absolute;
  right: clamp(1.25rem, 1.8vw, 1.75rem);
  bottom: clamp(1.25rem, 1.8vw, 1.75rem);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  color: #ffffff;
  flex-shrink: 0;
  transition: background 180ms cubic-bezier(0.23, 1, 0.32, 1),
              color 180ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
.gallery-aktuelles-card__arrow svg { width: 18px; height: 18px; stroke-width: 1.5; }
@media (hover: hover) {
  .gallery-aktuelles-card:hover .gallery-aktuelles-card__arrow { transform: translateX(4px) scale(1.05); }
}
/* Platz für den Pfeil rechts neben der Meta */
.gallery-aktuelles-card__content > div:first-child { padding-right: 56px; }

/* Pfeil-Hover: weißer Kreis + Säulenfarbe */
@media (hover: hover) {
  .gallery-aktuelles-card[data-category="saeule-01"]:hover .gallery-aktuelles-card__arrow { background: #fff; color: var(--saeule01-blau); }
  .gallery-aktuelles-card[data-category="saeule-02"]:hover .gallery-aktuelles-card__arrow { background: #fff; color: var(--saeule02-rot); }
  .gallery-aktuelles-card[data-category="saeule-03"]:hover .gallery-aktuelles-card__arrow { background: #fff; color: var(--saeule03-orange); }
  .gallery-aktuelles-card[data-category="saeule-04"]:hover .gallery-aktuelles-card__arrow { background: #fff; color: var(--saeule04-gruen); }
  .gallery-aktuelles-card[data-category="saeule-05"]:hover .gallery-aktuelles-card__arrow { background: #fff; color: var(--saeule05-rosa); }
  .gallery-aktuelles-card[data-category="saeule-06"]:hover .gallery-aktuelles-card__arrow { background: #fff; color: var(--saeule06-lila); }
}
/* Touch (iPad/iPhone): kein :hover — gleicher Effekt beim Antippen */
@media (hover: none) {
  .gallery-aktuelles-card[data-category="saeule-01"]:active .gallery-aktuelles-card__arrow { background: #fff; color: var(--saeule01-blau); }
  .gallery-aktuelles-card[data-category="saeule-02"]:active .gallery-aktuelles-card__arrow { background: #fff; color: var(--saeule02-rot); }
  .gallery-aktuelles-card[data-category="saeule-03"]:active .gallery-aktuelles-card__arrow { background: #fff; color: var(--saeule03-orange); }
  .gallery-aktuelles-card[data-category="saeule-04"]:active .gallery-aktuelles-card__arrow { background: #fff; color: var(--saeule04-gruen); }
  .gallery-aktuelles-card[data-category="saeule-05"]:active .gallery-aktuelles-card__arrow { background: #fff; color: var(--saeule05-rosa); }
  .gallery-aktuelles-card[data-category="saeule-06"]:active .gallery-aktuelles-card__arrow { background: #fff; color: var(--saeule06-lila); }
}

/* ── Zähler ──────────────────────────────────────────────── */
.gallery-aktuelles__counter {
  margin-top: var(--space-80);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--body-small-fs);
}

/* ── Secondary Button / CTA (Alle Beiträge ansehen) ──────── */
.gallery-aktuelles .btn--kollegium-secondary,
.gallery-aktuelles .cta__actions .btn--kollegium-secondary,
[data-component="gallery-aktuelles"] .btn--kollegium-secondary,
.aktuelles-preview .btn--kollegium-secondary {
  background: transparent !important;
  background-color: transparent !important;
  border: 1.5px solid var(--accent-color, var(--color-kollegium, #a60032));
  color: var(--accent-color, var(--color-kollegium, #a60032));
}

.gallery-aktuelles .btn--kollegium-secondary:hover,
.gallery-aktuelles .btn--kollegium-secondary:focus-visible,
.gallery-aktuelles .cta__actions .btn--kollegium-secondary:hover,
.gallery-aktuelles .cta__actions .btn--kollegium-secondary:focus-visible,
[data-component="gallery-aktuelles"] .btn--kollegium-secondary:hover,
[data-component="gallery-aktuelles"] .btn--kollegium-secondary:focus-visible,
.aktuelles-preview .btn--kollegium-secondary:hover,
.aktuelles-preview .btn--kollegium-secondary:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--accent-color, var(--color-kollegium, #a60032));
  border-color: var(--accent-color, var(--color-kollegium, #a60032));
}

/* --- partials/sections/aktuelles-preview/aktuelles-preview.css --- */
.aktuelles-preview {
  padding-block: var(--section-padding-block);
  position: relative;
  background: var(--bg-white);
}

.aktuelles-preview .section-head {
  text-align: center;
  max-width: var(--container-768);
  margin-inline: auto;
  margin-bottom: var(--space-48, 3rem);
}

.aktuelles-preview .section-head .cta__actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
}

.aktuelles-preview .btn--kollegium-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 38px;
  min-width: 44px;
  padding: 0.55rem 1.25rem;
  font-family: var(--textfont);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  border-radius: var(--border-radius-pill, 999px);
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
              background-color 160ms ease,
              border-color 160ms ease,
              box-shadow 160ms ease;
}

.aktuelles-preview .btn--kollegium-secondary .btn-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2;
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .aktuelles-preview .btn--kollegium-secondary:hover .btn-icon {
    transform: translateX(3px);
  }
}

.aktuelles-preview .btn--kollegium-secondary:active {
  transform: scale(0.97) !important;
  transition-duration: 80ms !important;
}

.aktuelles-preview .btn--kollegium-secondary:focus-visible {
  outline: 2px solid var(--accent-color, #a60032);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .aktuelles-preview .btn--kollegium-secondary {
    min-width: 140px;
    max-width: 220px;
    padding-block: 0.5rem;
    padding-inline: 1.15rem;
    font-size: 0.8125rem;
    line-height: 1.25;
  }
}


/* --- partials/global/prozess/prozess.css --- */
/* =========================================================
   PROZESS
   Großformatige, bild-maskierte Schrittnummern (text-mask)
   mit alternierendem Text-/Visual-Layout und Scroll-Reveal.
   ========================================================= */

.prozess {
  background-color: var(--bg-white);
  padding-block: var(--section-padding-block);
  padding-inline: var(--section-padding-inline);
  overflow: hidden;
}

.prozess__inner {
  width: min(100%, var(--container-980, 61.25rem));
  margin-inline: auto;
}

.prozess__steps {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 3.5vw, 3rem); /* 32px → 48px (Apple 48pt grid rhythm) */
}

/* --- Einzelner Schritt --- */
.prozess__step {
  display: flex;
  flex-direction: column-reverse; /* Bild (Visual) auf Mobile über dem Text */
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32, 2rem);
}

@media (min-width: 768px) {
  .prozess__step {
    flex-direction: row;
  }
  /* Gerade Schritte: Visual links, Text rechts */
  .prozess__step--flip {
    flex-direction: row-reverse;
  }
}

/* --- Textspalte --- */
.prozess__text {
  width: 100%;
}

@media (min-width: 768px) {
  .prozess__text {
    width: 54%;
    max-width: 66ch;
  }
}

.prozess__badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.875rem;
  border-radius: 9999px;
  background-color: transparent;
  border: 1px solid #a60032;
  color: #a60032;
  margin-bottom: var(--space-16, 1rem);
  width: fit-content;
  pointer-events: none;
}

.prozess__title {
  font-size: clamp(1.375rem, 1rem + 1.5vw, 1.75rem); /* Exakt wie .section-subheadline */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-text-black); /* Exakt wie .section-subheadline */
  margin-bottom: var(--space-16, 1rem);
  text-wrap: balance;
}

.prozess__copy {
  font-size: var(--body-fs);
  line-height: var(--body-lh, 1.5);
  color: var(--text-color);
  max-width: 66ch;
  text-wrap: pretty;
}

/* --- Visual-Spalte (maskierte Riesennummer) --- */
.prozess__visual {
  width: 100%;
  display: flex;
  justify-content: flex-start; /* Auf Mobile/iPhone immer linksbündig */
}

@media (min-width: 768px) {
  .prozess__visual {
    width: 42%;
    justify-content: flex-end;
  }
  .prozess__step--flip .prozess__visual {
    justify-content: flex-start;
  }
}

.prozess__number {
  display: inline-block;
  font-size: clamp(7rem, 15vw, 15rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.04em;
  padding-block: 0.1em;
  padding-inline: 0.05em;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-feature-settings: "onum" 1;
  user-select: none;
  -webkit-user-select: none;

  /* Bild-im-Text-Maskeneffekt. Fallback-Farbverlauf (Akzentfarbe), damit die
     Zahl auch sichtbar bleibt, wenn das data-image nicht lädt. */
  background-image: linear-gradient(135deg, var(--accent-color, #a60032), var(--accent-color, #a60032));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* --- Prozess Footer Note --- */
.prozess__footer {
  margin-top: clamp(2rem, 3.5vw, 3rem); /* Exakt der gleiche Abstand wie zwischen den prozess-items */
  font-size: var(--body-fs, 1.1875rem);
  line-height: var(--body-lh, 1.5);
  color: var(--color-text-black, #1d1d1f);
  text-align: left;
  max-width: none;
  width: 100%;
  white-space: nowrap; /* Garantiert einzeiligen Stand */
  font-weight: 700;
}
@media (max-width: 768px) {
  .prozess__footer {
    white-space: normal;
  }
}


/* --- partials/sections/ablauf/ablauf.css --- */
/* =========================================================
   ABLAUF
   Gestaffelte Schritt-Reihen aus Bildkarte + Text, horizontal
   versetzt, mit richtungsabhängigem Scroll-Reveal.
   ========================================================= */

.ablauf {
  background-color: var(--bg-white);
  padding-block: var(--section-padding-block);
  padding-inline: var(--section-padding-inline);
  overflow: hidden;
}

.ablauf__inner {
  width: min(100%, var(--container-1200, 75rem));
  margin-inline: auto;
}

.ablauf__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-64, 4rem);
}

@media (min-width: 768px) {
  .ablauf__rows {
    gap: var(--space-128, 8rem);
  }
}

/* --- Einzelne Reihe --- */
.ablauf__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32, 2rem);
}

@media (min-width: 768px) {
  .ablauf__row {
    flex-direction: row;
    gap: clamp(var(--space-32, 2rem), 5vw, var(--space-64, 4rem));
  }
  /* Bild rechts statt links */
  .ablauf__row--reverse {
    flex-direction: row-reverse;
  }
  /* Dynamischer horizontaler Versatz */
  .ablauf__row--shift-left {
    transform: translateX(-4rem);
  }
  .ablauf__row--shift-right {
    transform: translateX(4rem);
  }
}

@media (min-width: 1024px) {
  .ablauf__row--shift-left {
    transform: translateX(-8rem);
  }
  .ablauf__row--shift-right {
    transform: translateX(8rem);
  }
}

/* --- Bildspalte --- */
.ablauf__media {
  width: 100%;
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .ablauf__media {
    width: 50%;
    justify-content: flex-end;
  }
  .ablauf__row--reverse .ablauf__media {
    justify-content: flex-start;
  }
}

.ablauf__img {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--border-radius, 32px);
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-slow) var(--ease-smooth), box-shadow var(--dur-slow) var(--ease-smooth);
}

@media (hover: hover) {
  .ablauf__img:hover {
    box-shadow: var(--shadow-xl);
    transform: scale(1.02);
  }
}

@media (hover: none) {
  .ablauf__img:active {
    transform: scale(0.98);
  }
}

/* --- Textspalte --- */
.ablauf__text {
  width: 100%;
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .ablauf__text {
    width: 50%;
    justify-content: flex-start;
  }
  .ablauf__row--reverse .ablauf__text {
    justify-content: flex-end;
  }
}

.ablauf__text-inner {
  width: 100%;
  max-width: 31.25rem; /* Exactly matched to prozess 41.666% container width */
  text-align: center;
}

@media (min-width: 768px) {
  .ablauf__text-inner {
    text-align: left;
  }
}



.ablauf__title {
  font-size: clamp(1.375rem, 1rem + 1.5vw, 1.75rem); /* Exactly matched to prozess */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-text-black);
  margin-bottom: var(--space-16, 1rem);
  text-wrap: balance;
}

.ablauf__copy {
  font-size: var(--body-fs);
  line-height: var(--body-lh, 1.5);
  color: var(--text-color); /* Exactly matched to prozess */
  text-wrap: balance;
}

/* --- Reveal-Logik komplett auf GSAP ScrollTrigger umgestellt --- */




/* --- partials/sections/horizontal-story/horizontal-story.css --- */
.horizontal-story {
    background: var(--bg-black);
    color: var(--text-white);
    overflow: hidden;

    /* Neutralise ALL section padding (global rule targets section:not(.hero)) */
    padding: 0 !important;
    margin: 0 !important;

    /* Full-bleed breakout — works even inside a padded parent / container */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%) !important;

    /* iOS safe-area override — the global section rule adds these */
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.hz-story-data {
    display: none;
}
.horizontal-story .hz-container {
    width: 400vw;
    max-width: none !important;
    margin: 0 !important;
    display: flex;
    height: 100vh;
}
.horizontal-story .hz-panel {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 10vw;
}
.horizontal-story .hz-panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    z-index: 0;
}
.no-opacity .hz-panel img,
.horizontal-story.no-opacity .hz-panel img {
    opacity: 1;
}
.horizontal-story .hz-content {
    position: relative;
    z-index: 1;
    max-width: 1024px;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--border-radius-lg, 24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.horizontal-story .hz-content h3 { 
    color: var(--text-white); 
}
.horizontal-story .hz-content p,
.horizontal-story .hz-text {
    max-width: none !important;
}

/* --- partials/sections/gallery-momente/gallery-momente.css --- */
.gallery-momente,
section.gallery-momente,
[data-component="gallery-momente"],
.gallery-momente.has-dark-bg,
[data-bg="bg-black"].gallery-momente {
    background-color: var(--bg-black, #1d1d20) !important;
    background: var(--bg-black, #1d1d20) !important;
    color: var(--text-white, #f5f5f7) !important;
    padding-block: var(--section-padding-block);
}
.article__fullbleed-figure .gallery-momente {
    padding-block: 0 !important;
}
.article__fullbleed-figure .gallery-momente .container-1200 {
    padding-inline: 0 !important;
    max-width: 1200px;
}

.gallery-momente .section-head,
.gallery-momente .gallery-momente__header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-white, #f5f5f7);
}

.gallery-momente .section-eyebrow,
.gallery-momente .gallery-momente__header .section-eyebrow,
.gallery-momente .js-eyebrow {
    color: var(--text-white, #f5f5f7) !important;
    opacity: 0.85;
}

.gallery-momente .section-headline,
.gallery-momente .gallery-momente__header .section-headline,
.gallery-momente .js-title {
    color: var(--white, #ffffff) !important;
}

.gallery-momente .section-lead,
.gallery-momente .gallery-momente__header .section-lead,
.gallery-momente .js-lead {
    color: var(--text-white, #f5f5f7) !important;
    opacity: 0.9;
}
.gallery-momente__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-24, 1.5rem);
    margin-top: 0;
}
.gallery-momente .section-head + .gallery-momente__grid,
.gallery-momente__header + .gallery-momente__grid {
    margin-top: var(--space-64, 4rem);
}
.gallery-momente__item {
    position: relative;
    border-radius: var(--radius-card, 24px);
    overflow: hidden;
    height: 400px;
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: opacity 0.38s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.38s cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 0.38s cubic-bezier(0.23, 1, 0.32, 1);
}

.gallery-momente__item:focus-visible {
    outline: 2px solid var(--accent-color, #A60032);
    outline-offset: 4px;
}

.gallery-momente__item.is-landscape {
    aspect-ratio: 3 / 2 !important;
    height: auto !important;
    min-height: 0 !important;
}

.gallery-momente__item.is-portrait {
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    min-height: 0 !important;
}

.gallery-momente__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transform: scale(1);
    transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: center center;
}

/* Active Visible State on .gallery-momente.reveal.is-visible, .gallery-momente.is-visible, or item.is-visible */
.gallery-momente.reveal.is-visible .gallery-momente__item,
.gallery-momente.is-visible .gallery-momente__item,
.gallery-momente__item.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: var(--shadow-card);
    transition: opacity 0.38s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.38s cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 0.38s cubic-bezier(0.23, 1, 0.32, 1);
}

.gallery-momente.reveal.is-visible .gallery-momente__item img,
.gallery-momente.is-visible .gallery-momente__item img,
.gallery-momente__item.is-visible img {
    transform: scale(1);
    transition: transform 0.38s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Apple Bento Cascade Stagger Delays (40ms steps) */
.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(1), .gallery-momente.is-visible .gallery-momente__item:nth-child(1) { transition-delay: 0.00s; }
.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(1) img, .gallery-momente.is-visible .gallery-momente__item:nth-child(1) img { transition-delay: 0.00s; }

.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(2), .gallery-momente.is-visible .gallery-momente__item:nth-child(2) { transition-delay: 0.04s; }
.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(2) img, .gallery-momente.is-visible .gallery-momente__item:nth-child(2) img { transition-delay: 0.04s; }

.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(3), .gallery-momente.is-visible .gallery-momente__item:nth-child(3) { transition-delay: 0.08s; }
.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(3) img, .gallery-momente.is-visible .gallery-momente__item:nth-child(3) img { transition-delay: 0.08s; }

.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(4), .gallery-momente.is-visible .gallery-momente__item:nth-child(4) { transition-delay: 0.12s; }
.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(4) img, .gallery-momente.is-visible .gallery-momente__item:nth-child(4) img { transition-delay: 0.12s; }

.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(5), .gallery-momente.is-visible .gallery-momente__item:nth-child(5) { transition-delay: 0.16s; }
.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(5) img, .gallery-momente.is-visible .gallery-momente__item:nth-child(5) img { transition-delay: 0.16s; }

.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(6), .gallery-momente.is-visible .gallery-momente__item:nth-child(6) { transition-delay: 0.20s; }
.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(6) img, .gallery-momente.is-visible .gallery-momente__item:nth-child(6) img { transition-delay: 0.20s; }

.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(7), .gallery-momente.is-visible .gallery-momente__item:nth-child(7) { transition-delay: 0.24s; }
.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(7) img, .gallery-momente.is-visible .gallery-momente__item:nth-child(7) img { transition-delay: 0.24s; }

.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(8), .gallery-momente.is-visible .gallery-momente__item:nth-child(8) { transition-delay: 0.28s; }
.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(8) img, .gallery-momente.is-visible .gallery-momente__item:nth-child(8) img { transition-delay: 0.28s; }

.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(9), .gallery-momente.is-visible .gallery-momente__item:nth-child(9) { transition-delay: 0.32s; }
.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(9) img, .gallery-momente.is-visible .gallery-momente__item:nth-child(9) img { transition-delay: 0.32s; }

.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(10), .gallery-momente.is-visible .gallery-momente__item:nth-child(10) { transition-delay: 0.36s; }
.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(10) img, .gallery-momente.is-visible .gallery-momente__item:nth-child(10) img { transition-delay: 0.36s; }

.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(11), .gallery-momente.is-visible .gallery-momente__item:nth-child(11) { transition-delay: 0.40s; }
.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(11) img, .gallery-momente.is-visible .gallery-momente__item:nth-child(11) img { transition-delay: 0.40s; }

.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(12), .gallery-momente.is-visible .gallery-momente__item:nth-child(12) { transition-delay: 0.44s; }
.gallery-momente.reveal.is-visible .gallery-momente__item:nth-child(12) img, .gallery-momente.is-visible .gallery-momente__item:nth-child(12) img { transition-delay: 0.44s; }

/* Emil Kowalski Craft Motion: Silky Image Zoom-In (Custom Ease-Out, 0ms Delay, Hardware Accelerated) */
@media (hover: hover) and (pointer: fine) {
    .gallery-momente__item:hover {
        box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04);
        transform: translateY(-4px);
        transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1),
                    box-shadow 260ms cubic-bezier(0.23, 1, 0.32, 1);
        transition-delay: 0s !important;
    }
    .gallery-momente .gallery-momente__item:hover img,
    .gallery-momente.reveal.is-visible .gallery-momente__item:hover img,
    .gallery-momente.is-visible .gallery-momente__item:hover img,
    .gallery-momente__item:hover img {
        transform: scale(1.045);
        transition: transform 420ms cubic-bezier(0.23, 1, 0.32, 1);
        transition-delay: 0s !important;
    }
}

.gallery-momente__item:active {
    transform: scale(0.97);
    transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: 0s !important;
}

.gallery-momente .gallery-momente__item:active img,
.gallery-momente.reveal.is-visible .gallery-momente__item:active img,
.gallery-momente.is-visible .gallery-momente__item:active img,
.gallery-momente__item:active img {
    transform: scale(1.02);
    transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: 0s !important;
}

/* ── Desktop Grid (>= 992px): Apple Bento Grid (12-Spalten Harmonisches Layout) ── */
@media (min-width: 992px) {
    .gallery-momente__grid {
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: auto;
        align-items: stretch;
    }
    
    .gallery-momente__item {
        height: auto;
        min-height: 0;
    }

    /* Standard Fallbacks vor Erkennung */
    .gallery-momente__item.is-landscape {
        grid-column: span 6;
        aspect-ratio: 3 / 2 !important;
    }
    .gallery-momente__item.is-portrait {
        grid-column: span 3;
        aspect-ratio: 3 / 4 !important;
    }

    /* 12-Spalten Bento-Spans */
    .gallery-momente__item.span-12 {
        grid-column: span 12 !important;
        aspect-ratio: 16 / 9 !important;
        max-height: 560px !important;
    }
    .gallery-momente__item.span-8 {
        grid-column: span 8 !important;
    }
    .gallery-momente__item.span-6 {
        grid-column: span 6 !important;
    }
    .gallery-momente__item.span-4 {
        grid-column: span 4 !important;
    }
    .gallery-momente__item.span-3 {
        grid-column: span 3 !important;
    }
    .gallery-momente__item.span-center-6 {
        grid-column: 4 / span 6 !important;
        max-width: 620px;
        margin-inline: auto;
        width: 100%;
    }
    .gallery-momente__item.span-center-4 {
        grid-column: 5 / span 4 !important;
        max-width: 440px;
        margin-inline: auto;
        width: 100%;
    }
}

/* ── Responsive Tablet Grid (640px - 991px): 6 Spalten (Querformat span 6, Hochkant span 3) ── */
@media (min-width: 640px) and (max-width: 991px) {
    .gallery-momente__grid {
        grid-template-columns: repeat(6, 1fr) !important;
        grid-auto-rows: auto !important;
        gap: var(--space-20, 1.25rem) !important;
    }
    .gallery-momente__item {
        height: auto !important;
        min-height: 0 !important;
    }
    .gallery-momente__item.is-landscape {
        grid-column: span 6 !important;
        aspect-ratio: 3 / 2 !important;
    }
    .gallery-momente__item.is-portrait {
        grid-column: span 3 !important;
        aspect-ratio: 3 / 4 !important;
    }
    .gallery-momente__item.is-portrait:last-child:nth-child(odd) {
        grid-column: span 6 !important;
    }
}

/* ── Responsive Mobile Grid (< 640px): 1 Spalte, Querformat 3:2, Hochkant 3:4 ── */
@media (max-width: 639px) {
    .gallery-momente .gallery-momente__grid,
    .gallery-momente__grid {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
        gap: var(--space-16, 1rem) !important;
    }

    .gallery-momente .gallery-momente__grid > .gallery-momente__item,
    .gallery-momente__item {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: start !important;
        overflow: hidden !important;
    }

    .gallery-momente__item.is-landscape {
        aspect-ratio: 3 / 2 !important;
    }

    .gallery-momente__item.is-portrait {
        aspect-ratio: 3 / 4 !important;
    }

    .gallery-momente__item img,
    .gallery-momente__item .js-img {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: inherit !important;
        object-fit: cover !important;
        display: block !important;
    }
}


/* ── Accessibility: Reduced Motion (Emil Kowalski / WCAG 2.2 AA) ── */
@media (prefers-reduced-motion: reduce) {
    .gallery-momente__item,
    .gallery-momente__item img {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        transition-delay: 0s !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* --- (old hero-editorial removed – replaced by new hero-editorial above) --- */

/* --- partials/sections/logo-grid/logo-grid.css --- */
.logo-grid {
    position: relative;
    padding: var(--section-py, 6rem) 0;
    background-color: var(--bg-black, #1a1a1a);
    overflow: hidden;
}

.logo-grid__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.logo-grid .section-head,
.logo-grid__header {
    margin-bottom: var(--space-64, 4rem);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-grid__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .logo-grid__grid { gap: 1rem; }
}
@media (min-width: 768px) {
    .logo-grid__grid { gap: 1.5rem; }
}
@media (min-width: 1024px) {
    .logo-grid__grid { 
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem; 
    }
}

.logo-grid__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    width: 100%;
    background-color: #f2f2f2;
    border-radius: var(--border-radius-lg, 24px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}

.logo-grid__item:hover {
    transform: scale(1.03) translateY(-4px) !important;
    box-shadow: var(--shadow-xl);
}

.logo-grid__item:active {
    transform: scale(0.97) !important;
}

.logo-grid__item-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(0,0,0,0.05), transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.logo-grid__item:hover .logo-grid__item-bg {
    opacity: 1;
}

.logo-grid__icon {
    position: relative;
    z-index: 10;
    width: 2rem;
    height: 2rem;
    filter: grayscale(100%) opacity(0.5); /* Simulate #86868b */
    transition: filter 0.5s ease;
}

@media (min-width: 768px) { .logo-grid__icon { width: 2.5rem; height: 2.5rem; } }
@media (min-width: 768px) { .logo-grid__icon { width: 3rem; height: 3rem; } }
@media (min-width: 1024px) { .logo-grid__icon { width: 3.5rem; height: 3.5rem; } }

.logo-grid__item:hover .logo-grid__icon {
    filter: grayscale(100%) brightness(0.2) opacity(0.9); /* Simulate #1d1d1f */
}

/* --- partials/sections/hero-vision/hero-vision.css --- */

/* --- partials/sections/video-loop/video-loop.css --- */
.video-loop-section {
  position: relative;
  z-index: 10; /* Überlagert den Hero beim Sticky Stack */
  background-color: var(--color-bg);
  padding-block: 0;
}
.video-loop-section.bg-transparent {
  background: transparent !important;
  background-color: transparent !important;
  -webkit-appearance: none; /* Oft hilfreich bei iOS Safari */
}

.video-loop-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 80vh;
  border-radius: var(--border-radius, 1.5rem);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: none;
  background: transparent;
  transform: translateZ(0);
}

@media (max-width: 1024px) and (orientation: portrait) {
  .video-loop-wrapper {
    aspect-ratio: 3 / 4;
    max-height: 85vh;
  }
}

.video-loop-element {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  border: none;
  outline: none;
  background: transparent !important;
}

/* ── Video Section (Lehrkräftepreis) ── */
.video-section {
  padding-block: var(--section-padding-block);
}

.video-section__card {
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  border-radius: var(--border-radius, 32px);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--bg-black, #1d1d20);
}

.video-section__player {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}


/* --- partials/sections/hero-video/hero-video.css --- */
/* =========================================================
   HERO VIDEO (Emil Kowalski Design Engineering Optimized)
   ========================================================= */

.hero-video-wrapper {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  height: 100vh;
  height: 100svh;
  min-height: 640px; 
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background-color: #000;
}

.hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-video-element {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.15) 60%, transparent 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 25%);
  z-index: 1;
  pointer-events: none;
}

.hero-video-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(var(--container-1200) + 2 * var(--section-padding-inline));
  margin-inline: auto;
  padding-top: clamp(1.5rem, 5vw, 4rem);
  padding-bottom: clamp(6rem, 14vh, 9rem);
  padding-inline: var(--section-padding-inline);
  padding-left: calc(var(--section-padding-inline) + env(safe-area-inset-left));
  padding-right: calc(var(--section-padding-inline) + env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-video-kicker,
.hero-video-title,
.hero-video-lead {
  transition: opacity 600ms var(--hero-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), transform 600ms var(--hero-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.hero-video-kicker { transition-delay: 0ms; }
.hero-video-title  { transition-delay: 70ms; }
.hero-video-lead   { transition-delay: 140ms; }

.hero-video-kicker {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1.5rem;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  border: none !important;
  box-shadow: none !important;
  color: var(--text-white, #f5f5f7);
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius-pill, 9999px);
  position: relative;
}

/* Säulenfarben für Pillen/Kicker (rein flach, kein weißer Rand, kein 3D-Effekt) */
.hero-video-kicker[data-saeule="saeule-01"],
.hero-video-kicker[data-kicker="Katholische Schule"] {
  background: var(--saeule01-blau, #2292cc) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #ffffff !important;
}

.hero-video-kicker[data-saeule="saeule-02"],
.hero-video-kicker[data-kicker="Unterricht & Praxis"] {
  background: var(--saeule02-rot, #a60032) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #ffffff !important;
}

.hero-video-kicker[data-saeule="saeule-03"],
.hero-video-kicker[data-kicker="Schulgemeinschaft"],
.hero-video-kicker[data-kicker="Schulleben"] {
  background: var(--saeule03-orange, #fab439) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #ffffff !important;
}

.hero-video-kicker[data-saeule="saeule-04"],
.hero-video-kicker[data-kicker="Unsere Wege"],
.hero-video-kicker[data-kicker="Berufliche Orientierung"] {
  background: var(--saeule04-gruen, #95c11f) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #ffffff !important;
}

.hero-video-kicker[data-saeule="saeule-05"],
.hero-video-kicker[data-kicker="Beratung & Unterstützung"],
.hero-video-kicker[data-kicker="Beratung"] {
  background: var(--saeule05-rosa, #e3599b) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #ffffff !important;
}

.hero-video-kicker[data-saeule="saeule-06"],
.hero-video-kicker[data-kicker="Internationales & Europa"],
.hero-video-kicker[data-kicker="Europa & Erasmus+"],
.hero-video-kicker[data-kicker="Europa"] {
  background: var(--saeule06-lila, #5458a3) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #ffffff !important;
}

.hero-video-title {
  font-family: var(--displayfont);
  font-size: clamp(2.25rem, 4.5vw + 1rem, 5.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-white);
  max-width: 100%;
  white-space: nowrap;
  margin-bottom: 1.25rem;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); 
}

.hero-video-lead {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text-hero-lead, #dedee3);
  max-width: 38ch;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.hero-video-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(1.75rem, 4.5vh, 3rem);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  color: rgba(245, 245, 247, 0.55);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  animation: hero-video-cue-fade 1s var(--hero-ease-out, cubic-bezier(0.23, 1, 0.32, 1)) 1.2s forwards;
  transition: transform 160ms var(--hero-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), color 160ms var(--hero-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), opacity 300ms var(--hero-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.hero-video-cue:active {
  transform: translateX(-50%) scale(0.92);
}

@media (hover: hover) and (pointer: fine) {
  .hero-video-cue:hover {
    color: rgba(245, 245, 247, 1);
    transform: translateX(-50%) scale(1.08);
  }
  .hero-video-cue:active {
    transform: translateX(-50%) scale(0.92);
  }
}

@keyframes hero-video-cue-fade {
  to { opacity: 1; }
}

.hero-video-cue-icon {
  animation: hero-video-bounce 2.2s infinite var(--hero-ease-in-out, cubic-bezier(0.77, 0, 0.175, 1));
}

@keyframes hero-video-bounce {
  0%, 100% {
    transform: translateY(-4px);
    opacity: 0.55;
  }
  50% {
    transform: translateY(4px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video-kicker, .hero-video-title, .hero-video-lead {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: none !important;
  }
  .hero-video-cue { opacity: 1 !important; transform: translateX(-50%) !important; animation: none !important; }
  .hero-video-cue-icon { animation: none !important; opacity: 0.85; }
}

@media (min-width: 1025px) {
  .hero-video-content.reveal .hero-video-cue,
  .hero-video-content.reveal.is-visible .hero-video-cue,
  .hero-video-cue {
    opacity: 1 !important;
    animation: none !important;
  }
}


/* --- partials/sections/gallery-dynamisch/gallery-dynamisch.css --- */
/* =========================================================
   GALLERY DYNAMISCH (Exakte Apple Bento Reveal Animation wie gallery-momente)
   ========================================================= */

.gallery-dynamisch-section {
  position: relative;
  padding-block: var(--section-padding-block, clamp(3rem, 6vw, 6rem));
  background-color: var(--bg-white, #ffffff);
}

.gallery-dynamisch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: 210px;
  grid-auto-flow: dense;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.gallery-dynamisch__item.item-wide { grid-column: span 2; }
.gallery-dynamisch__item.item-tall { grid-row: span 2; }
.gallery-dynamisch__item.item-large { grid-column: span 2; grid-row: span 2; }

@media (max-width: 768px) {
  .gallery-dynamisch-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
    gap: 1rem;
  }
  .gallery-dynamisch__item.item-wide,
  .gallery-dynamisch__item.item-tall,
  .gallery-dynamisch__item.item-large {
    grid-column: span 1;
    grid-row: span 1;
  }
}

.gallery-dynamisch__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-card, 1.25rem);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  background-color: var(--bg-card, #f5f5f7);
}

.gallery-dynamisch__link {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  cursor: pointer;
}

.gallery-dynamisch__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  transition: transform 0.38s cubic-bezier(0.23, 1, 0.32, 1), filter 0.38s ease;
  transform-origin: center;
  filter: grayscale(20%) brightness(0.95);
}

.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item,
.gallery-dynamisch__item.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  box-shadow: var(--shadow-card, 0 8px 30px rgba(0, 0, 0, 0.08));
  transition: opacity 0.38s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.38s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.38s cubic-bezier(0.23, 1, 0.32, 1);
}

.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item img,
.gallery-dynamisch__item.is-visible img {
  transform: scale(1);
  transition: transform 0.38s cubic-bezier(0.23, 1, 0.32, 1);
}

.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(1) { transition-delay: 0.00s; }
.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(1) img { transition-delay: 0.00s; }

.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(2) { transition-delay: 0.04s; }
.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(2) img { transition-delay: 0.04s; }

.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(3) { transition-delay: 0.08s; }
.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(3) img { transition-delay: 0.08s; }

.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(4) { transition-delay: 0.12s; }
.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(4) img { transition-delay: 0.12s; }

.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(5) { transition-delay: 0.16s; }
.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(5) img { transition-delay: 0.16s; }

.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(6) { transition-delay: 0.20s; }
.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(6) img { transition-delay: 0.20s; }

.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(7) { transition-delay: 0.24s; }
.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(7) img { transition-delay: 0.24s; }

.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(8) { transition-delay: 0.28s; }
.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(8) img { transition-delay: 0.28s; }

.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(9) { transition-delay: 0.32s; }
.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(9) img { transition-delay: 0.32s; }

.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(10) { transition-delay: 0.36s; }
.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(10) img { transition-delay: 0.36s; }

.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(11) { transition-delay: 0.40s; }
.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(11) img { transition-delay: 0.40s; }

.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(12) { transition-delay: 0.44s; }
.gallery-dynamisch-section.reveal.is-visible .gallery-dynamisch__item:nth-child(12) img { transition-delay: 0.44s; }

@media (hover: hover) and (pointer: fine) {
  .gallery-dynamisch__item:hover .gallery-dynamisch__img {
    transform: scale(1.05);
    filter: grayscale(0%) brightness(1);
  }
  .gallery-dynamisch__item:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-dynamisch__item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .gallery-dynamisch__img {
    transition: none !important;
    filter: none !important;
    transform: none !important;
  }
}


/* --- partials/sections/schule-ist-mehr/schule-ist-mehr.css --- */
/* =========================================================
   Partial: SCHULE-IST-MEHR (Emil Kowalski Design Engineering)
   ========================================================= */

section.schule-ist-mehr,
.schule-ist-mehr,
section.schule-ist-mehr.container-1440 {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  margin-block: 0 !important;
  padding-top: 0 !important;
  padding-bottom: var(--section-padding-block, clamp(3rem, 5vw, 5rem)) !important;
  padding-inline: var(--section-padding-inline, clamp(1.25rem, 3.5vw, 3rem)) !important;
  box-sizing: border-box !important;
  background: transparent;
}

/* bg-grey Variante – greift via Wrapper-Attribut oder applyPartialBg */
[data-bg="bg-grey"] section.schule-ist-mehr,
[data-bg="bg-grey"] .schule-ist-mehr,
section.schule-ist-mehr.bg-grey,
.schule-ist-mehr.bg-grey {
  background: var(--bg-grey, #f5f5f7) !important;
}

.schule-ist-mehr__inner {
  display: block !important;
  width: 100% !important;
  max-width: var(--container-1440, 90rem) !important;
  margin-inline: auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Fallback falls media-wrap doch vorhanden ist */
.schule-ist-mehr__inner:has(.schule-ist-mehr__media-wrap) {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: clamp(2.5rem, 5vw, 5rem) !important;
  align-items: center !important;
}

@media (max-width: 960px) {
  .schule-ist-mehr__inner:has(.schule-ist-mehr__media-wrap) {
    grid-template-columns: 1fr !important;
    gap: clamp(2rem, 4vw, 3rem) !important;
  }
}

/* Slogan Container (Zentriert) */
.schule-ist-mehr__content {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.schule-ist-mehr__headline {
  font-family: var(--displayfont, 'TheSansOffice', 'TheSans', sans-serif) !important;
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em !important;
  margin: 0 auto !important;
  padding: 0 !important;
  font-weight: 700 !important;
  text-align: center !important;
  max-width: 100% !important;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Line 1: einzeilig / lange Zeile, zentriert */
.schule-ist-mehr__line1 {
  display: block !important;
  color: var(--text-color, #1D1D1F) !important;
  margin-bottom: clamp(0.25rem, 0.6vw, 0.45rem) !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-align: center !important;
}

html[data-theme="dark"] .schule-ist-mehr__line1 {
  color: var(--text-white, #f5f5f7) !important;
}

/* Line 2: separate lange Zeile darunter in text-grey, zentriert */
.schule-ist-mehr__second-sentence {
  display: block !important;
  color: var(--text-grey, #a5a5a5) !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-align: center !important;
}

html[data-theme="dark"] .schule-ist-mehr__second-sentence {
  color: var(--text-grey, #a5a5a5) !important;
}

/* Auf schmalen Smartphones natürliches Umbrechen erlauben */
@media (max-width: 768px) {
  .schule-ist-mehr__line1,
  .schule-ist-mehr__second-sentence {
    white-space: normal !important;
    text-wrap: balance !important;
  }
}

/* 4:3 Image Column (Rechts) */
.schule-ist-mehr__media-wrap {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.schule-ist-mehr__figure {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  border-radius: clamp(1.25rem, 2vw, 1.75rem) !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
              0 14px 36px -8px rgba(0, 0, 0, 0.1) !important;
  background-color: var(--bg-surface, #e8e8ed) !important;
  position: relative !important;
  transform: translateZ(0) !important;
  box-sizing: border-box !important;
  transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 240ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}

html[data-theme="dark"] .schule-ist-mehr__figure {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2),
              0 16px 40px -8px rgba(0, 0, 0, 0.5) !important;
  background-color: #2c2c2e !important;
}

.schule-ist-mehr__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* Emil Kowalski: Micro-interactions & Press Response */
@media (hover: hover) and (pointer: fine) {
  .schule-ist-mehr__figure:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04),
                0 20px 44px -10px rgba(0, 0, 0, 0.13),
                inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
  }
  .schule-ist-mehr__figure:hover .schule-ist-mehr__img {
    transform: scale(1.02) translateZ(0) !important;
  }
}

.schule-ist-mehr__figure:active {
  transform: scale(0.985) translateZ(0) !important;
  transition-duration: 120ms !important;
}

/* Emil Kowalski: Staggered Scroll-Reveal */
.schule-ist-mehr.reveal .schule-ist-mehr__line1 {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.schule-ist-mehr.reveal .schule-ist-mehr__second-sentence {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 60ms,
              transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 60ms;
}

.schule-ist-mehr.reveal .schule-ist-mehr__figure {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 320ms cubic-bezier(0.23, 1, 0.32, 1) 120ms,
              transform 320ms cubic-bezier(0.23, 1, 0.32, 1) 120ms,
              box-shadow 240ms cubic-bezier(0.23, 1, 0.32, 1);
}

.schule-ist-mehr.reveal.is-visible .schule-ist-mehr__line1,
.schule-ist-mehr.reveal.is-visible .schule-ist-mehr__second-sentence {
  opacity: 1;
  transform: translateY(0);
}

.schule-ist-mehr.reveal.is-visible .schule-ist-mehr__figure {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .schule-ist-mehr.reveal .schule-ist-mehr__line1,
  .schule-ist-mehr.reveal .schule-ist-mehr__second-sentence,
  .schule-ist-mehr.reveal .schule-ist-mehr__figure {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .schule-ist-mehr__figure,
  .schule-ist-mehr__img {
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================
   GLOBAL STANDARDIZATION: Section Header Triplet
   (data-eyebrow, data-title, data-lead)
   Exakt wie in index.html (Bildungsangebot)
   Ausnahmslose Anwendung von:
   - fontsize
   - line height
   - letter-spacing
   - font-weight
   ========================================================= */

:not(.unsere-schule-in-zahlen):not(.has-dark-bg):not(.gallery-momente) .section-head:not(.text-white) .section-eyebrow,
:not(.unsere-schule-in-zahlen):not(.has-dark-bg):not(.gallery-momente) .logo-grid__header .section-eyebrow {
  font-family: var(--textfont, 'TheSansOffice', 'TheSans', sans-serif) !important;
  font-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem) !important; /* 12px–13px (Apple Caption 1) */
  line-height: 1.25 !important;
  letter-spacing: 0.10em !important; /* Edles, feines All-Caps Tracking für Regular-Schnitt */
  font-weight: 400 !important; /* Regular: feiner, leichter und dezenter */
  text-transform: uppercase !important;
  color: var(--color-kollegium, var(--accent-color, #a60032)) !important;
  margin-top: 0 !important;
  margin-bottom: clamp(0.375rem, 0.5vw, 0.5rem) !important; /* 6px–8px: Unmittelbare Bindung zur Headline */
  display: block !important;
  max-width: none !important;
  margin-inline: auto !important;
  -webkit-font-smoothing: antialiased;
}

:not(.unsere-schule-in-zahlen):not(.has-dark-bg):not(.gallery-momente) .section-head:not(.text-white) .section-headline,
:not(.unsere-schule-in-zahlen):not(.has-dark-bg):not(.gallery-momente) .logo-grid__header .section-headline {
  font-family: 'TheSansOffice', 'TheSansOffice-Bold', 'TheSans', sans-serif !important;
  font-size: clamp(2.125rem, 3.8vw, 3.25rem) !important; /* 34px auf Smartphone bis 52px auf Desktop */
  line-height: 1.1 !important;
  letter-spacing: -0.005em !important; /* Natürliche, volle Buchstabenbreite von TheSansOffice-Bold statt komprimiert */
  font-weight: 700 !important;
  color: var(--text-color, #1d1d1f) !important;
  text-wrap: balance !important;
  max-width: 26ch !important;
  margin-top: 0 !important;
  margin-inline: auto !important;
  margin-bottom: clamp(0.5rem, 0.75vw, 0.625rem) !important; /* 8px–10px: Beseitigt den 20px-Graben zum Lead! */
  -webkit-font-smoothing: antialiased;
}

:not(.unsere-schule-in-zahlen):not(.has-dark-bg):not(.gallery-momente) .section-head:not(.text-white) .section-lead,
:not(.unsere-schule-in-zahlen):not(.has-dark-bg):not(.gallery-momente) .logo-grid__header .section-lead {
  max-width: 48ch !important; /* Ideales Lese-Measure nach Bringhurst */
  margin-top: 0 !important;
  margin-inline: auto !important;
  margin-bottom: 0 !important;
  font-family: var(--textfont, 'TheSansOffice', 'TheSans', sans-serif) !important;
  font-size: clamp(1.125rem, 1.25vw + 0.35rem, 1.3125rem) !important; /* 18px auf Phone bis 21px auf Desktop */
  line-height: 1.42 !important; /* Flüssiges, editorielles Apple-Leading */
  letter-spacing: -0.01em !important; /* Feine typografische Verdichtung */
  font-weight: 400 !important;
  color: var(--text-muted, #6e6e73) !important;
  text-wrap: pretty !important;
  text-align: center !important;
  -webkit-font-smoothing: antialiased;
}

.section-lead--left,
.section-head .section-lead--left {
  margin-inline: 0 !important;
  text-align: left !important;
}

.section-head .cta__actions {
  margin-top: clamp(1.25rem, 1.8vw, 1.625rem) !important; /* 20px–26px harmonischer Abstand zu Buttons */
}

/* ══════════════════════════════════════════════════════════
   URZUSTAND: UNSERE SCHULE IN ZAHLEN (Explizite Absicherung)
   ══════════════════════════════════════════════════════════ */
.unsere-schule-in-zahlen .section-head .section-eyebrow {
  display: block !important;
  max-width: none !important;
  margin-inline: auto !important;
  font-family: var(--textfont, 'TheSansOffice', 'TheSans', sans-serif) !important;
  font-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem) !important; /* 12px–13px */
  font-weight: 400 !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  color: var(--text-white, #f5f5f7) !important;
  margin-top: 0 !important;
  margin-bottom: clamp(0.375rem, 0.5vw, 0.5rem) !important; /* 6px–8px */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased;
}

.unsere-schule-in-zahlen .section-head .section-headline {
  font-family: var(--titlefont, 'TheSansOffice-Bold', 'TheSans', sans-serif) !important;
  font-size: var(--h2-fs, clamp(2rem, 4vw, 3.5rem)) !important;
  line-height: var(--h2-lh, 1.1) !important;
  letter-spacing: var(--h2-ls, -0.015em) !important;
  font-weight: 700 !important;
  color: var(--text-white, #f5f5f7) !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35) !important;
  text-wrap: balance !important;
  margin-bottom: 1rem !important;
}

.unsere-schule-in-zahlen .section-head .section-lead {
  font-family: var(--textfont, 'TheSansOffice', 'TheSans', sans-serif) !important;
  font-size: var(--lead-fs, clamp(1.25rem, 1.5vw, 1.5rem)) !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
  color: var(--text-white, #f5f5f7) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35) !important;
  text-wrap: balance !important;
  margin-bottom: 0 !important;
}

@media (max-height: 820px) and (orientation: landscape) {
  .section-head .section-headline,
  .gallery-momente__header .section-headline,
  .logo-grid__header .section-headline {
    font-size: clamp(1.875rem, 1rem + 3.75vh, 3.25rem) !important;
  }

  .section-head .section-lead,
  .gallery-momente__header .section-lead,
  .logo-grid__header .section-lead {
    font-size: clamp(1.125rem, 1.2vh, 1.25rem) !important;
  }
}

/* --- partials/sections/bildungsangebot/bildungsangebot.css --- */
/* ==========================================================================
   PARTIAL: BILDUNGSANGEBOT
   Apple-Promo-Kacheln: 11 Bildungsgänge, 3 pro Zeile, letzte Zeile zentriert.
   Text unten links auf dunklem Verlauf, ein Button „Mehr erfahren“.
   Motion: gestaffelter Scroll-Reveal Zeile für Zeile (nur transform/opacity).
   ========================================================================== */

section.bildungsangebot,
.bildungsangebot-section,
.bildungsangebot {
  --ba-radius: clamp(22px, 2vw, 28px);
  --ba-gap: clamp(1rem, 1.4vw, 1.5rem); /* 16px Mobil → 20px Tablet → 24px Desktop (Apple 8pt Grid) */
  --ba-edge: clamp(18px, 2vw, 32px);     /* Edler Außenabstand zum Bildschirmrand */
  --ba-ease: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  margin-block: 0 !important;
  padding-block: var(--section-padding-block, clamp(3.5rem, 5vw, 5.5rem)) !important;
  padding-inline: var(--section-padding-inline, clamp(1.25rem, 3.5vw, 3rem)) !important;
  box-sizing: border-box !important;
  display: block !important;
  overflow: visible !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background-color: var(--bg-white) !important;
  color: var(--text-color) !important;
}

.bildungsangebot__inner,
section.bildungsangebot .bildungsangebot__inner,
.bildungsangebot-section .bildungsangebot__inner {
  position: relative !important;
  width: 100% !important;
  max-width: 1440px !important;
  margin-inline: auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

/* iPhone: Kanten exakt bündig zu den Sections darüber (Tag der offenen Tür / Schule ist mehr) */
@media (max-width: 639.98px) {
  .bildungsangebot {
    --ba-radius: 24px;
    --ba-gap: 1rem;
    --ba-edge: clamp(1.25rem, 3.5vw, 3rem);
  }
}

/* --------------------------------------------------------------------------
   Section-Head
   -------------------------------------------------------------------------- */
.bildungsangebot .section-head {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.bildungsangebot .section-headline {
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
}

.bildungsangebot .section-lead {
  max-width: 44ch;
  margin-inline: auto;
  text-wrap: pretty;
}

.bildungsangebot .cta__actions {
  justify-content: center;
  margin-top: clamp(1.25rem, 1.8vw, 1.625rem) !important;
}

.bildungsangebot .btn--kollegium-secondary {
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   Grid — 6-Spalten-Basis, jede Karte belegt 2 Spalten (= 3 pro Zeile).
   So lässt sich eine unvollständige letzte Zeile exakt zentrieren.
   -------------------------------------------------------------------------- */
.bildungsangebot__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ba-gap);
}

/* Tablet und Desktop: 2 pro Zeile, einzelne letzte Karte zentriert */
@media (min-width: 640px) {
  .bildungsangebot__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bildungsangebot-card {
    grid-column: span 2;
  }
  .bildungsangebot-card:nth-child(odd):last-child {
    grid-column: 2 / span 2;
  }
}

/* --------------------------------------------------------------------------
   Karte
   -------------------------------------------------------------------------- */
.bildungsangebot-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  width: 100% !important;
  min-height: 320px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--ba-radius);
  border: none !important;
  outline: none !important;
  background-color: transparent !important;
  color: #fff;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  box-shadow:
    0 10px 30px -6px rgba(0, 0, 0, 0.12),
    0 4px 12px -2px rgba(0, 0, 0, 0.04);
  transition:
    transform 500ms var(--ba-ease),
    box-shadow 500ms var(--ba-ease);
}

@media (min-width: 1440px) {
  .bildungsangebot-card {
    min-height: 340px;
  }
}

.bildungsangebot-card__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  border: none !important;
  outline: none;
}

.bildungsangebot-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: 50% 60%;
  transform: scale(1);
  border: none !important;
  outline: none;
  transition: transform 700ms var(--ba-ease);
}

/* Lesbarkeits-Verlauf von unten (Editorial-Look) */
.bildungsangebot-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(10, 10, 12, 0.82) 0%,
      rgba(10, 10, 12, 0.58) 28%,
      rgba(10, 10, 12, 0.18) 55%,
      rgba(10, 10, 12, 0) 72%
    );
  pointer-events: none;
}

.bildungsangebot-card__body {
  /* bewusst NICHT positioniert: der Stretched-Link (::after) bezieht sich auf die Karte */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  width: 100%;
  min-width: 0;
  padding: clamp(1.25rem, 1.6vw, 1.75rem);
}

.bildungsangebot-card__title {
  margin: 0;
  width: 100%;
  max-width: 100%;
  font-size: clamp(1.25rem, 0.875rem + 1.25vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: #fff;
  text-wrap: balance;
  text-align: left;
  hyphens: auto;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.bildungsangebot-card__link {
  color: #fff !important;
  text-decoration: none !important;
  background-image: none !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  display: inline;
  text-align: left;
}

/* Stretched-Link über die gesamte Karte */
.bildungsangebot-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  border: none !important;
  outline: none;
}

.bildungsangebot-card__link:focus-visible {
  outline: none;
}

.bildungsangebot-card:has(.bildungsangebot-card__link:focus-visible) {
  outline: 3px solid var(--accent-color);
  outline-offset: 3px;
}

.bildungsangebot-card__subtitle {
  margin: 0;
  width: 100%;
  max-width: 100%;
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.86);
  text-wrap: pretty;
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Removed 1100px truncation since we now have 2 cards per row, 
   giving enough space for the normal two-line clamp. */

.bildungsangebot-card__subtitle:empty {
  display: none;
}

/* Subtiler, authentischer Apple-Hover:
   • Ruhiger Lift (-3px)
   • Zarter Bildzoom (nur 3.5 % Vergrößerung / Cinematic Breathing)
   • Weicher, diffuser Umgebungs-Schatten
*/
@media (hover: hover) and (pointer: fine) {
  .bildungsangebot-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 20px 42px -8px rgba(0, 0, 0, 0.18),
      0 8px 18px -4px rgba(0, 0, 0, 0.08);
  }

  .bildungsangebot-card:hover .bildungsangebot-card__img {
    transform: scale(1.035);
    transition: transform 900ms var(--ba-ease);
  }
}

.bildungsangebot-card:active {
  transform: scale(0.975);
  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (prefers-reduced-motion: reduce) {
  .bildungsangebot-card,
  .bildungsangebot-card__img {
    transform: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   EBK White Liquid Glass Back-to-Top Button
   Cupertino 2026 / Emil Kowalski Design Engineering:
   - 48x48px Touch-Target, Safe-Area aware
   - Multi-Layered Diffusion Shadows (Ambient Occlusion + Elevation)
   - Optical Curved Glass Refraction & Specular Lensing Sheen
   - Directional Arrow Micro-Interaction & Tactile Spring Feedback
   ══════════════════════════════════════════════════════════ */
.ebk-back-to-top {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: calc(24px + env(safe-area-inset-right));
  z-index: 999;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  overflow: hidden;
  
  /* Luminous White Liquid Glass: Perimeter light capture + translucent optical core */
  border: 1px solid rgba(255, 255, 255, 0.88);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.54) 50%, rgba(255, 255, 255, 0.72) 100%);
  backdrop-filter: blur(28px) saturate(200%) brightness(110%);
  -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(110%);
  
  /* Emil Kowalski Multi-Layered Shadows: 1px crisp outline + contact + soft atmospheric bloom + inner rim reflections */
  box-shadow: 
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.03),
    0 8px 18px -2px rgba(0, 0, 0, 0.07),
    0 20px 42px -6px rgba(0, 0, 0, 0.12),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1.5px 2.5px 0 rgba(255, 255, 255, 0.45);
    
  color: #161617;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  
  /* Entrance animation starting style: subtle scale & translation */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.92);
  transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
              visibility 300ms,
              background 220ms ease,
              border-color 220ms ease,
              box-shadow 260ms cubic-bezier(0.23, 1, 0.32, 1);
  outline: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Cupertino Specular Lensing Sheen (Curved Optical Dome Reflection) */
.ebk-back-to-top::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 75%);
  pointer-events: none;
}

/* Secondary Lower Rim Specular (Crystal edge bounce) */
.ebk-back-to-top::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 -2px 4px 0 rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

.ebk-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.ebk-back-to-top svg {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.35;
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Emil Kowalski Hover Micro-Interaction: Float lift + atmospheric deep shadow + directional arrow glance */
@media (hover: hover) and (pointer: fine) {
  .ebk-back-to-top:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.72) 50%, rgba(255, 255, 255, 0.88) 100%);
    border-color: #ffffff;
    box-shadow: 
      0 0 0 1px rgba(0, 0, 0, 0.04),
      0 4px 8px rgba(0, 0, 0, 0.04),
      0 12px 24px -2px rgba(0, 0, 0, 0.09),
      0 28px 56px -6px rgba(0, 0, 0, 0.16),
      inset 0 2px 1.5px 0 #ffffff,
      inset 0 -1.5px 3px 0 rgba(255, 255, 255, 0.65);
    transform: translateY(-3px) scale(1.05);
  }
  .ebk-back-to-top:hover svg {
    transform: translateY(-2.5px);
  }
}

/* Tactile Spring Compression on Click (:active) */
.ebk-back-to-top:active {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.60) 100%);
  transform: translateY(0) scale(0.93);
  transition: transform 100ms cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.06),
    0 6px 14px -2px rgba(0, 0, 0, 0.10),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 2px 0 rgba(255, 255, 255, 0.40);
}
.ebk-back-to-top:active svg {
  transform: translateY(0);
  transition: transform 100ms cubic-bezier(0.23, 1, 0.32, 1);
}

.ebk-back-to-top:focus-visible {
  outline: 2px solid var(--accent-color, #A60032);
  outline-offset: 3px;
}

/* Dark Mode: Strahlendes White Liquid Glass mit tiefem Ambient Shadow */
@media (prefers-color-scheme: dark) {
  .ebk-back-to-top {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.60) 50%, rgba(255, 255, 255, 0.78) 100%);
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 
      0 0 0 1px rgba(255, 255, 255, 0.15),
      0 4px 10px rgba(0, 0, 0, 0.30),
      0 14px 34px 0 rgba(0, 0, 0, 0.45),
      0 28px 60px 0 rgba(0, 0, 0, 0.55),
      inset 0 1.5px 1px 0 #ffffff,
      inset 0 -1.5px 2.5px 0 rgba(255, 255, 255, 0.50);
    color: #111111;
  }
  @media (hover: hover) and (pointer: fine) {
    .ebk-back-to-top:hover {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.82) 100%);
      border-color: #ffffff;
      box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.25),
        0 6px 14px rgba(0, 0, 0, 0.35),
        0 18px 44px 0 rgba(0, 0, 0, 0.55),
        0 36px 72px 0 rgba(0, 0, 0, 0.65),
        inset 0 2px 1.5px 0 #ffffff,
        inset 0 -1.5px 3px 0 rgba(255, 255, 255, 0.70);
      color: #000000;
    }
  }
}

/* Reduced Transparency / Reduced Motion */
@media (prefers-reduced-transparency: reduce) {
  .ebk-back-to-top {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  }
  .ebk-back-to-top::before,
  .ebk-back-to-top::after {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ebk-back-to-top {
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
  .ebk-back-to-top svg {
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}


/* --- partials/sections/kapitelnavigation/kapitelnavigation.css --- */
/* =========================================================
   Partial: KAPITELNAVIGATION (INHALTSVERZEICHNIS)
   Editorial Register & Live Preview Stage
   ========================================================= */

:root {
  --lv-accent: #a60032;
  --lv-accent-hover: #8a0029;
  --lv-accent-tint: rgba(166, 0, 50, 0.08);
  --lv-accent-surface: #faf6f7;
  --lv-paper: #ffffff;
  --lv-stage-bg: var(--bg-grey, #f5f5f7);
  --lv-gallery-bg: var(--bg-black, #1d1d20);
  --lv-ink: #1d1d1f;
  --lv-muted: #515154;
  --lv-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --lv-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --lv-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

[data-theme="dark"] {
  --lv-accent: #d4194e;
  --lv-accent-hover: #e6295f;
  --lv-accent-tint: rgba(212, 25, 78, 0.16);
  --lv-accent-surface: #24161b;
  --lv-paper: #18181b;
  --lv-stage-bg: #222226;
  --lv-ink: #f5f5f7;
  --lv-muted: #a1a1a6;
}

.section-subheadline[id] {
  scroll-margin-top: 96px;
}

.gallery-momente[id],
[data-component="gallery-momente"][id] {
  scroll-margin-top: 72px;
}

.lv-toc-section {
  padding-top: clamp(3rem, 5vw, 4.5rem);
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
  padding-inline: calc(var(--section-padding-inline, 24px) + env(safe-area-inset-left));
  box-sizing: border-box;
}

.lv-toc-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  box-sizing: border-box;
}

/* The Register Sheet (solid paper artefact, no glass, no resting shadow) */
.lv-toc-sheet {
  position: relative;
  background-color: var(--lv-paper);
  color: var(--lv-ink);
  border-radius: 24px;
  padding: clamp(1.75rem, 4vw, 3.5rem);
}

/* Top Editorial Header & Phase Filter Bar */
.lv-toc-header {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: end;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.lv-toc-title {
  font-family: var(--font-display, inherit);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--lv-ink);
  margin: 0;
  max-width: 18ch;
}

.lv-toc-subtitle {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.5;
  color: var(--lv-muted);
  margin: 0;
  max-width: 44ch;
}

.lv-toc-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  padding: 0.5rem;
  background-color: var(--lv-stage-bg);
  border-radius: 16px;
}

.lv-toc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.lv-toc-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--lv-ink);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.6rem 1rem;
  border-radius: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition:
    transform 140ms var(--lv-ease-out),
    background-color 180ms ease,
    color 180ms ease;
}

.lv-toc-tab:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .lv-toc-tab:hover:not(.is-active) {
    background-color: var(--lv-accent-tint);
    color: var(--lv-accent);
  }
}

.lv-toc-tab.is-active {
  background-color: #a60032;
  color: #ffffff;
}

.lv-toc-tab:focus-visible {
  outline: 2px solid #a60032;
  outline-offset: 2px;
}

.lv-toc-tab-count {
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  opacity: 0.82;
}

.lv-toc-meta {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lv-muted);
  font-variant-numeric: tabular-nums;
  padding-inline: 0.75rem;
}

/* Split Composition: 7fr Register List / 5fr Sticky Preview Stage */
.lv-toc-body {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  align-items: stretch;
}

.lv-toc-groups {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.lv-toc-phase[hidden] {
  display: none !important;
}

.lv-toc-phase-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
  padding-inline: 0.75rem;
}

.lv-toc-phase-title {
  font-family: var(--font-display, inherit);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--lv-ink);
  margin: 0;
}

.lv-toc-phase-span {
  font-size: 0.875rem;
  font-weight: 600;
  color: #a60032;
  font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .lv-toc-phase-span {
  color: var(--lv-accent);
}

.lv-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.lv-toc-item {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 220ms var(--lv-ease-out),
    transform 220ms var(--lv-ease-out);
}

.lv-toc-item.is-entering {
  opacity: 0;
  transform: translateY(8px);
}

.lv-toc-link {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.78rem 0.9rem;
  border-radius: 12px;
  text-decoration: none !important;
  color: var(--lv-ink);
  background-color: transparent;
  transition:
    transform 150ms var(--lv-ease-out),
    background-color 180ms ease,
    color 180ms ease,
    opacity 180ms ease;
}

.lv-toc-link:active {
  transform: scale(0.985);
}

.lv-toc-link.is-selected {
  background-color: var(--lv-accent-surface);
  color: #a60032;
}

[data-theme="dark"] .lv-toc-link.is-selected {
  color: #ffffff;
  background-color: var(--lv-accent-tint);
}

.lv-toc-link:focus-visible {
  outline: 2px solid #a60032;
  outline-offset: 2px;
}

.lv-toc-text {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
}

.lv-toc-date {
  font-size: 0.85rem;
  color: var(--lv-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lv-toc-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background-color: var(--lv-stage-bg);
  color: var(--lv-ink);
  font-size: 0.82rem;
  transition:
    transform 180ms var(--lv-ease-out),
    background-color 180ms ease,
    color 180ms ease;
}

.lv-toc-link.is-selected .lv-toc-arrow {
  background-color: #a60032;
  color: #ffffff;
  transform: translateX(2px);
}

@media (hover: hover) and (pointer: fine) {
  .lv-toc-groups:has(.lv-toc-link:hover, .lv-toc-link:focus-visible)
    .lv-toc-link:not(:hover, :focus-visible) {
    opacity: 0.45;
  }

  .lv-toc-link:hover {
    background-color: var(--lv-accent-surface);
    color: #a60032;
    transform: translateX(4px);
  }

  [data-theme="dark"] .lv-toc-link:hover {
    color: #ffffff;
    background-color: var(--lv-accent-tint);
  }

  .lv-toc-link:hover .lv-toc-arrow {
    background-color: #a60032;
    color: #ffffff;
    transform: translateX(3px);
  }
}

/* Right Sticky Preview Stage ("Index with preview" + Emil Kowalski blur-bridged crossfade) */
.lv-toc-preview-col {
  background-color: var(--bg-black, #1d1d20);
  border-radius: 20px;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  align-self: stretch;
}

.lv-toc-preview {
  position: sticky;
  top: 6.5rem;
  background-color: var(--bg-grey, #f5f5f7);
  border-radius: 16px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.lv-toc-preview-media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: clip;
  background-color: #1d1d1f;
  margin: 0;
}

.lv-toc-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  filter: blur(0px);
  opacity: 1;
  transition:
    transform 260ms var(--lv-ease-out),
    filter 220ms var(--lv-ease-out),
    opacity 200ms ease;
}

.lv-toc-preview.is-transitioning .lv-toc-preview-img {
  transform: scale(1.03);
  filter: blur(2px);
  opacity: 0.82;
}

.lv-toc-preview-badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  background-color: #a60032;
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

.lv-toc-preview-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition:
    filter 200ms var(--lv-ease-out),
    opacity 180ms ease,
    transform 200ms var(--lv-ease-out);
}

.lv-toc-preview.is-transitioning .lv-toc-preview-body {
  filter: blur(1.5px);
  opacity: 0.75;
  transform: translateY(3px);
}

.lv-toc-preview-phase {
  font-size: 0.85rem;
  font-weight: 600;
  color: #a60032;
  margin: 0;
}

[data-theme="dark"] .lv-toc-preview-phase {
  color: var(--lv-accent);
}

.lv-toc-preview-title {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--lv-ink);
  margin: 0;
}

.lv-toc-preview-desc {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--lv-muted);
  margin: 0;
}

.lv-toc-preview-cta {
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 1.1rem;
  border-radius: 12px;
  background-color: #a60032;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 0.9375rem;
  font-weight: 600;
  transition:
    transform 150ms var(--lv-ease-out),
    background-color 180ms ease;
}

.lv-toc-preview-cta:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .lv-toc-preview-cta:hover {
    background-color: var(--lv-accent-hover);
  }
}

.lv-toc-preview-cta:focus-visible {
  outline: 2px solid var(--lv-ink);
  outline-offset: 2px;
}

@media (max-width: 960px) {
  .lv-toc-header {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .lv-toc-body {
    grid-template-columns: 1fr;
  }

  .lv-toc-preview-col {
    order: -1;
  }

  .lv-toc-preview {
    position: static;
  }
}

@media (max-width: 600px) {
  .lv-toc-sheet {
    padding: 1.35rem 1.1rem;
    border-radius: 20px;
  }

  .lv-toc-controls {
    padding: 0.4rem;
  }

  .lv-toc-tab {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
  }

  .lv-toc-meta {
    display: none;
  }

  .lv-toc-link {
    grid-template-columns: 1fr auto;
    padding: 0.7rem 0.65rem;
  }

  .lv-toc-arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lv-toc-tab,
  .lv-toc-item,
  .lv-toc-link,
  .lv-toc-arrow,
  .lv-toc-preview-img,
  .lv-toc-preview-body,
  .lv-toc-preview-cta {
    transition: opacity 150ms ease, background-color 150ms ease, color 150ms ease !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ── Harmonische vertikale Abstände & Transparenz innerhalb der Artikel-Gruppen ── */
.article-group-canvas .article__fullbleed-figure {
  background: transparent;
}

section:has(> .container > .article-quote--no-spacing) {
  padding-block: 0;
}

.article__body > .section-subheadline:first-child {
  margin-top: 0;
}

.article-group-canvas > .article {
  padding-block: var(--section-padding-block);
}

.article-group-canvas > section:first-child:not(.article) {
  padding-top: var(--section-padding-block) !important;
}

.article-group-canvas > .article:has(+ section:not(.article)),
.article-group-canvas > .article:has(+ [data-component]) {
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
}

.article-group-canvas > section:not(.article) + .article,
.article-group-canvas > [data-component] + .article {
  padding-top: clamp(2rem, 3.5vw, 3rem);
}

.article-group-canvas > .article + .image-reveal-section:has(+ .article) {
  padding-block: 0;
}

.article-group-canvas > section:not(.article) + .article:has(.article__body > .article__fullbleed-figure:first-child) {
  padding-top: clamp(1.5rem, 2.5vw, 2.25rem);
}

.article__body > .article__fullbleed-figure {
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}

.article__body > .article__fullbleed-figure:first-child {
  padding-top: 0;
}

.article__body > .article__fullbleed-figure:last-child {
  padding-bottom: 0;
}

.article__body > .article__fullbleed-figure + .article__fullbleed-figure {
  padding-top: 0;
}

.article__body > .article__fullbleed-figure + .section-subheadline {
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
}

.article__body > .section-subheadline + .article__fullbleed-figure {
  padding-top: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* ── Variante: Bild auf Lesespaltenbreite (653px) begrenzt ── */
.article__fullbleed-figure--narrow {
  width: 100%;
  margin-left: 0;
  padding-inline: 0;
}

.article__fullbleed-figure--narrow .article__fullbleed-link,
.image-reveal--narrow .image-reveal__content,
.image-reveal--narrow .image-reveal__frame {
  max-width: 653px;
}

/* ── Globale Bereinigung von Inline-Styles (Clean HTML) ── */
address {
  font-style: normal;
}

.article-group-canvas .article,
.section-bg-pattern .article,
.article--transparent {
  background: transparent;
}

.article--canvas,
.leitbild-intro,
.leitbild-saeule,
[data-component="artikel"][data-bg="bg-canvas"] {
  background-image: url('../system/background_427141456.avif');
  background-position: top center;
  background-repeat: repeat;
}

.leitbild-saeule {
  display: none;
}

.leitbild-saeule.is-active {
  display: block;
}

[data-component="image-reveal"][data-bg="bg-transparent"] {
  padding-block: var(--space-48, 3rem);
}

.article__body > .section-subheadline:first-child,
.container > .section-subheadline:first-child {
  margin-top: 0;
  padding-top: 0;
}

.section--no-padding-block {
  padding-block: 0;
}

.pt-0 {
  padding-top: 0 !important;
}

/* ── Aktuelles-Übersichtsseite (aktuelles.html) ── */
.page-aktuelles .nav-v2-header {
  background: var(--bg-black) !important;
}

.page-aktuelles #nav-v2-breadcrumbs {
  display: none !important;
}

.page-aktuelles #main-content {
  padding-top: 44px;
}

/* ── Meldewege-Tabelle (meldewege.html) ── */
#article-grundsaetze {
  background: transparent;
  padding-block: 0 var(--section-padding-block);
}

#article-meldewege {
  background: var(--bg-grey) !important;
  background-color: var(--bg-grey) !important;
  padding-block: var(--section-padding-block);
}

#article-meldewege .container-1200 > .section-subheadline {
  margin-top: var(--space-64, 4rem);
  margin-bottom: var(--space-28, 1.75rem);
}

#article-meldewege .container-1200 > .section-subheadline:first-child {
  margin-top: 0;
}

.meldewege-table {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

.meldewege-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr;
  gap: 1px;
  background: var(--white, #fff);
  border-radius: var(--border-radius-md, 16px);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.028);
}

.meldewege-row--header {
  background: var(--color-ink, #1d1d1f);
  border-color: transparent;
  box-shadow: none;
}

.meldewege-row--header .meldewege-cell {
  color: var(--white, #fff);
  font-weight: var(--weight-semibold, 600);
  font-size: clamp(0.8125rem, 0.9vw, 0.9375rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: var(--space-16, 1rem) var(--space-20, 1.25rem);
  background: transparent;
  border-bottom: none;
}

.meldewege-cell {
  padding: var(--space-16, 1rem) var(--space-20, 1.25rem);
  font-size: var(--body-fs, 1rem);
  line-height: var(--body-lh, 1.55);
  color: var(--text-color, #333);
  background: var(--white, #fff);
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

.meldewege-cell--anlass {
  font-weight: var(--weight-bold, 700);
  color: var(--color-ink, #1d1d1f);
  background: rgba(0, 0, 0, 0.018);
}

.meldewege-row:not(.meldewege-row--header) .meldewege-cell--step {
  position: relative;
}

.meldewege-row:not(.meldewege-row--header) .meldewege-cell--step::before {
  content: "→";
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  color: var(--accent-color, #a60032);
  font-weight: 700;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white, #fff);
  border-radius: 50%;
  z-index: 1;
}

@media (max-width: 999px) {
  .meldewege-row {
    grid-template-columns: 1fr 1fr;
  }
  .meldewege-row--header {
    display: none;
  }
  .meldewege-cell--anlass {
    grid-column: 1 / -1;
    border-bottom: 2px solid var(--accent-color, #a60032);
  }
  .meldewege-cell--step::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    font-weight: var(--weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-color, #a60032);
    margin-bottom: 0.35em;
    position: static;
    transform: none;
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
  }
}

@media (max-width: 599px) {
  .meldewege-row {
    grid-template-columns: 1fr;
  }
  .meldewege-cell {
    padding: var(--space-12, 0.75rem) var(--space-16, 1rem);
  }
  .meldewege-cell--step::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    font-weight: var(--weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-color, #a60032);
    margin-bottom: 0.35em;
    position: static;
    transform: none;
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
  }
}

/* ── SV-Seite (sv.html) ── */
#sv-lehrkraefte {
  background: transparent;
  padding-top: 0;
  padding-bottom: 0;
}

#sv-lehrkraefte > .container > .section-subheadline,
.sv-team-section > .container > .section-subheadline {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
  text-align: left;
}

.sv-team-section {
  background: transparent;
  padding-bottom: 0;
}

.sv-team-section .article__fullbleed-figure {
  background: transparent;
  padding-top: 0;
}

.sv-contacts__header-text > .section-subheadline {
  margin-top: 0;
  margin-bottom: 0.5rem;
  text-align: left;
}

@media (max-width: 768px) {
  #sv-lehrkraefte .kollegium__grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
  #sv-lehrkraefte .kollegium-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
}

.sv-schueler__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .sv-schueler__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}






/* ── Ausgelagerte Utility- & Komponenten-Styles aus HTML-Dateien ── */
.kollegium-card--inline-sm { width: 100%; max-width: 360px; margin-top: 24px; }
.kollegium-card--inline-md { width: 100%; max-width: 400px; margin-top: 30px; margin-bottom: 30px; }
.kollegium-card--max-360 { width: 100%; max-width: 360px; }
.kollegium-card--inline-sm-mb { width: 100%; max-width: 360px; margin-top: 24px; margin-bottom: 30px; }
.kollegium-card--flex-400 { flex: 1 1 300px; max-width: 400px; }
.u-mb-24 { margin-bottom: var(--space-24, 1.5rem); }
.u-mt-32 { margin-top: var(--space-8, 2rem); }
.u-mt-32 { margin-top: var(--space-32, 2rem); }
.article__inline-h3 { font-size: 1.25rem; font-weight: 700; margin-top: 2rem; margin-bottom: 0.5rem; color: var(--text-color); }
.article__fullbleed-figure--spaced { background: transparent; padding-top: clamp(2.5rem, 4vw, 3.5rem); padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }
.section-subheadline--1200 { max-width: 1200px; margin-inline: auto; margin-top: 0; margin-bottom: clamp(1rem, 1.5vw, 1.25rem); text-align: left; }
.bento-gallery__item--h440 { border-radius: var(--border-radius, 24px); height: 440px; }
.bento-gallery__item--h360 { border-radius: var(--border-radius, 24px); height: 360px; }
.bento-gallery__item--rounded { border-radius: var(--border-radius, 24px); }
.bento-gallery--1200 { max-width: 1200px; margin-inline: auto; margin-block: 0; }
.article--transparent-pb0 { background: transparent; padding-bottom: 0; }
.u-fw-400 { font-weight: 400; }
.u-link-unstyled { color: inherit; text-decoration: none; }
.u-fs-15 { font-size: 0.9375rem; }
.u-m-0 { margin: 0; }
.u-text-right { text-align: right; }
.u-clean-style-01 { background: var(--surface-secondary, rgba(0,0,0,0.03)); border-radius: var(--radius-lg, 12px); border: 1px solid var(--border-subtle, rgba(0,0,0,0.08)); padding: var(--space-16, 1rem); margin-block: var(--space-24, 1.5rem); }
.u-clean-style-02 { margin-block: var(--space-24, 1.5rem); position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; }
.u-clean-style-03 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.u-clean-style-04 { font-size: 0.9rem; color: var(--color-text-muted, #666); }
.u-clean-style-05 { margin-block: var(--space-16, 1rem); }
.u-clean-style-06 { max-width: 100%; height: auto; border-radius: 8px; }
.u-clean-style-07 { text-align: right; font-size: 0.85rem; color: var(--color-text-muted, #666); margin-top: 0.25rem; }
.u-clean-style-08 { background: transparent !important; background-color: transparent !important; padding-top: 0 !important; }
.u-clean-style-09 { padding-top: 0px !important; }
.u-clean-style-10 { margin-block: var(--space-32, 2rem); }
.u-clean-style-11 { width: 100%; border-radius: var(--radius-12, 12px); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.1)); }
.u-clean-style-12 { margin-top: var(--space-8, 0.5rem); font-size: var(--text-sm, 0.875rem); color: var(--text-color); text-align: center; }
.u-clean-style-13 { background: transparent; padding-block: var(--section-padding-block); }
.u-clean-style-14 { display: block; text-align: right; margin-top: 0.5rem; font-style: normal; color: var(--text-muted, #62626b); }
.u-clean-style-15 { margin-block: var(--space-24, 1.5rem); }
.u-clean-style-16 { width: 100%; border-radius: var(--radius-lg, 8px); }
.u-clean-style-17 { margin-top: clamp(1.5rem, 2.5vw, 2rem); }
.u-clean-style-18 { background: transparent; padding-top: clamp(2.5rem, 4vw, 3.5rem); padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.u-clean-style-19 { background: transparent; padding-top: clamp(1rem, 1.75vw, 1.5rem); padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }
.u-clean-style-20 { display: flex; gap: var(--space-24, 1.5rem); flex-wrap: wrap; margin-top: 24px; }
.u-clean-style-21 { margin-block: var(--space-16, 1rem); text-align: center; }
.u-clean-style-22 { max-width: 100%; height: auto; border-radius: 8px; box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.1)); }
.u-clean-style-23 { margin-top: var(--space-8, 0.5rem); font-size: 0.9rem; }
.u-clean-style-24 { max-width: 140px; margin: var(--space-4, 1rem) 0; }
.u-clean-style-25 { border-radius: var(--radius-sm, 8px); }
.u-clean-style-26 { margin: var(--space-24, 1.5rem) 0; }
.u-clean-style-27 { width: 100%; max-height: 520px; border-radius: var(--radius-md, 12px); background: #000; }
.u-clean-style-28 { font-size: var(--text-sm, 0.875rem); color: var(--text-color); margin-top: var(--space-8, 0.5rem); }
.u-clean-style-29 { display: flex; justify-content: center; }
.u-clean-style-30 { text-align: left; max-width: 800px; }
.u-clean-style-31 { background: var(--surface-secondary, rgba(0,0,0,0.03)); border-radius: var(--radius-lg, 12px); border: 1px solid var(--border-subtle, rgba(0,0,0,0.08)); }
.u-clean-style-32 { position: relative; width: 100%; padding-top: 56.25%; margin: var(--space-24, 1.5rem) 0 var(--space-8, 0.5rem); }
.u-clean-style-33 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-md, 8px); }
.u-clean-style-34 { color: var(--text-secondary, #666); font-size: 0.9rem; margin-top: 0.25rem; margin-bottom: var(--space-24, 1.5rem); }
.u-clean-style-35 { margin-top: 0; margin-bottom: var(--space-8, 0.5rem); }
.u-clean-style-36 { color: var(--text-secondary, #666); }
.u-clean-style-37 { width: 100%; }
.u-clean-style-38 { background: transparent; padding-top: var(--section-padding-block); padding-bottom: var(--space-48); }
.u-clean-style-39 { padding-top: 0; }
.u-clean-style-40 { margin-block: clamp(2.5rem, 5vw, 4rem) !important; }
.u-clean-style-41 { background: transparent; padding-bottom: var(--space-24); }
.u-clean-style-42 { list-style-type: disc; }
.u-clean-style-43 { background: white; padding-block: var(--section-padding-block); }
.u-clean-style-44 { background-image: url('../system/background_427141456.avif'); background-position: top center; background-repeat: repeat; }
.u-clean-style-45 { display: flex; gap: var(--space-24, 1.5rem); flex-wrap: wrap; justify-content: center; margin-top: var(--section-padding-block); width: calc(100vw - 48px); max-width: 900px; position: relative; left: 50%; transform: translateX(-50%); }
.u-clean-style-46 { background: var(--bg-grey); }
.u-clean-style-47 { padding-inline: var(--section-padding-inline, 24px); }
.u-clean-style-48 { margin-bottom: var(--space-48, 3rem); }
.u-clean-style-49 { padding-block: var(--section-padding-block); }
.u-clean-style-50 { background: transparent !important; background-color: transparent !important; padding-top: 0 !important; padding-bottom: var(--section-padding-block) !important; }
.u-clean-style-51 { background: transparent !important; background-color: transparent !important; padding-block: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.u-clean-style-52 { padding-top: 0 !important; }
.u-clean-style-53 { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.u-clean-style-54 { margin-block: var(--space-4, 1rem); border-radius: var(--radius-lg, 16px); overflow: hidden; background: #000; }
.u-clean-style-55 { padding-top: var(--section-padding-block); padding-bottom: var(--space-24); }
.u-clean-style-56 { text-align: center; max-width: 820px; margin-inline: auto; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.u-clean-style-57 { background: transparent; margin-top: 0; padding-block: 0; }
.u-clean-style-58 { border-radius: clamp(16px, 2vw, 28px); box-shadow: 0 16px 48px -12px rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.06); background: #ffffff; }
.u-clean-style-59 { margin-block: var(--space-6, 1.5rem); border-radius: var(--radius-lg, 16px); overflow: hidden; background: #000; }
.u-clean-style-60 { font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #666); margin-top: -0.5rem; margin-bottom: var(--space-4, 1rem); }
.u-clean-style-61 { margin: 2.5rem 0; }

/* ── iPhone Portrait View: Keine Silbentrennung für data-title & Headings ──
   Verhindert unschöne Trennstriche bei Titeln auf dem iPhone im Hochformat.
   Gilt nur für Smartphones (max-width: 500px) in Portrait-Ausrichtung.
   ─────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 500px) and (orientation: portrait) {
  [data-title],
  [data-title] *,
  .hero-dark-title,
  .hero-editorial__title,
  .hero-editorial-title,
  .hero-video-title,
  .hero-index__title,
  .hero-title,
  .section-headline,
  .section-title,
  .section-subheadline,
  .gallery-aktuelles-card__title,
  .podcast-episode__title,
  .js-hero-title,
  .js-title,
  .js-gallery-dynamisch-title {
    -webkit-hyphens: none !important;
    hyphens: none !important;
    word-break: normal !important;
  }
}