/* Theme Name: Grundschule Horb Master Author: ChatGPT Version: 8.6.41-einheitliche-bereichsicons Description: Neutrales Master-Theme mit verlinkter Team-Kachel, frei wählbaren Bereichsicons und einheitlichen Überschriftsicons. */

@import url("https://fonts.googleapis.com/css2?family=Calistoga&family=Noto+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");

/* 8.6.29 – Hamburger-Menü vollständig ausblenden.
   Dient zusätzlich als Absicherung gegen zwischengespeichertes Markup. */
.menu-toggle,
.mobile-panel,
#mobile-navigation {
  display: none !important;
}

* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

body, button {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif !important;
}

.logo, h1,h2,h3, .menu-toggle {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif !important;
}

.hero-slide {
  top: 0 !important;
  bottom: 0 !important;
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transform: scale(1.05);
  animation: heroSlider 30s infinite;
}

.hero-slide:nth-child(1) {
  animation-delay: 0s;
}

.hero-slide:nth-child(2) {
  animation-delay: 6s;
}

.hero-slide:nth-child(3) {
  animation-delay: 12s;
}

.hero-slide.hero-slide-placeholder {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.34), transparent 36%),
    linear-gradient(145deg, #65c7d0 0%, #2f8cba 48%, #123b72 100%);
}

.quicklink:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(15,23,42,.2);
}

.quicklink span {
  display: block;
  color: var(--muted);
  line-height: 1.4;
}

.section-title p {
  color: var(--muted);
  max-width: 520px;
  margin: 0;
  line-height: 1.6;
}

.intro-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 24px;
}

.card {
  background: white;
  border-radius: 30px;
  padding: 34px;
  box-shadow: 0 16px 42px rgba(15,23,42,.08);
}

.card h3 {
  margin-top: 0;
  font-size: 28px;
}

.card p {
  color: #334155;
  line-height: 1.7;
}

.empty-news {
  background: white;
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 16px 38px rgba(15,23,42,.08);
}

.footer-grid h3 {
  margin-top: 0;
}

.footer-grid p, .footer-grid a {
  color: rgba(255,255,255,.78);
  line-height: 1.7;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.team-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--blue, #f7e6ca);
  color: white;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 20px;
}

.team-card small {
  color: var(--blue, #f7e6ca);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.team-card h3 {
  font-size: 24px;
  margin: 12px 0;
}

.team-card p {
  color: #475569;
  line-height: 1.6;
}

.team-card-content {
  color: #475569;
  line-height: 1.65;
  margin-top: 14px;
}

.team-card-content p {
  margin: 0 0 10px;
}

.team-card-content strong {
  color: #111827;
}

.hero-slide:nth-child(4) {
  animation-delay: 18s;
}

.hero-slide:nth-child(5) {
  animation-delay: 24s;
}

.hero-slide-mobile {
  display: none;
}

.hero-title-mobile {
  display: none;
}

.team-icon {
  display: none !important;
}

 .card {
  padding-top: 24px !important;
}

.quicklink strong {
  display: block;
  font-size: 19px;
  margin-bottom: 8px;
  margin-top: 12px !important;
}

.quicklink::before, .team-card, .card, .empty-news {
  border-top-color: var(--accent-blue, #f7e6ca) !important;
}

.card, .empty-news {
  border-top: 7px solid var(--accent-blue, #f7e6ca);
}

.team-card {
  background: #ffffff;
  border-radius: 28px;
  padding: 30px;
  box-shadow: 0 16px 38px rgba(15,23,42,.08);
  border-top: 7px solid var(--yellow, #f7b500);
  min-height: 280px;
  padding-top: 26px !important;
  border-top-color: var(--accent-blue, #f7e6ca) !important;
}

.intro-grid-single {
  grid-template-columns: 1fr !important;
}

.intro-grid-single .card {
  max-width: none;
}

.site-footer {
  position: relative;
  background: var(--footer-light, #EAF4F7) !important;
  color: var(--footer-text, #1F2A44) !important;
  padding: 150px 6vw 34px !important;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  top: 0;
  height: 150px;
  background: linear-gradient(174deg, var(--footer-mid, #D7E8EE) 0 48%, transparent 49%), linear-gradient(187deg, rgba(143,191,210,.35) 0 46%, transparent 47%);
  pointer-events: none;
}

.site-footer::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 78px;
  height: 90px;
  background: rgba(255,255,255,.35);
  transform: skewY(-4deg);
  pointer-events: none;
}

.site-footer .footer-grid, .site-footer .footer-bottom {
  position: relative;
  z-index: 2;
}

.site-footer h3 {
  color: var(--footer-text, #1F2A44) !important;
}

.site-footer p, .site-footer a {
  color: rgba(31,42,68,.82) !important;
}

.footer-bottom {
  max-width: 1220px;
  margin: 34px auto 0;
  padding-top: 22px;
  font-size: 14px;
  border-top: 1px solid rgba(31,42,68,.18) !important;
  color: rgba(31,42,68,.68) !important;
}

.footer-grid {
  max-width: 1220px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 34px;
  align-items: start;
}

.footer-grid a {
  display: inline-block;
  margin: 4px 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.menu-toggle {
  background: var(--accent-blue) !important;
  border-color: var(--accent-blue) !important;
}

.menu-toggle:hover {
  background: #f7e6ca !important;
}

#aktuelles, #termine, #betreuung, #krankmeldung, #downloads, #team, #kontakt {
  scroll-margin-top: 115px;
}

 .mobile-panel, .mobile-panel a {
  pointer-events: auto !important;
}

#aktuelles, #termine, #betreuung, #downloads, #team, #kontakt {
  scroll-margin-top: 125px;
}

#aktuelles, #termine, #betreuung, #downloads, #team, #kontakt {
  scroll-margin-top: 120px;
}

html {
  scroll-behavior: smooth;
}

.quicklink::before, .card, .team-card, .empty-news {
  border-top-color: #f7e6ca !important;
}

.quicklink::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 7px;
  border-radius: 24px 24px 0 0;
  background: #f7e6ca !important;
}

#aktuelles, #termine, #betreuung, #downloads, #team, #kontakt {
  scroll-margin-top: 120px;
}

#aktuelles,#termine,#betreuung,#krankmeldung,#downloads,#team,#kontakt {
  scroll-margin-top: 120px;
}

.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 999px;
  background: #f7e6ca;
  color: #102033;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 18px 42px rgba(15,23,42,.22);
  z-index: 1200;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

.back-to-top:hover, .back-to-top:focus {
  box-shadow: 0 22px 50px rgba(15,23,42,.28);
}

.mobile-panel {
  position: fixed !important;
  top: 86px !important;
  right: 24px !important;
  width: min(360px, calc(100vw - 36px)) !important;
  left: auto !important;
  display: grid !important;
  gap: 10px;
  background: rgba(255,255,255,.97) !important;
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(15,23,42,.22);
  transform: translateY(-16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 10001;
}

.mobile-panel a:hover, .mobile-panel a:focus {
  background: rgba(247,230,202,.55) !important;
}

.construction-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
  background: #c1121f;
  color: #fff;
  z-index: 10050;
  overflow: hidden;
  display: flex;
  align-items: center;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 8px 18px rgba(15,23,42,.16);
}

.construction-banner-track {
  display: flex;
  width: max-content;
  gap: 64px;
  white-space: nowrap;
  animation: gshConstructionMarquee 22s linear infinite;
}

.construction-banner-track span {
  display: inline-flex;
  align-items: center;
  padding-left: 64px;
  text-transform: uppercase;
}

.quicklink .kachel-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #102033 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.quicklink .kachel-icon svg {
  width: 31px !important;
  height: 31px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}

.hero-content {
  transform: translateY(-140px) !important;
}

.section-heading-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #102033 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  flex: 0 0 auto;
}

.section-heading-icon svg {
  width: 32px !important;
  height: 32px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}

.heading-with-icon-footer {
  gap: 10px;
}

.heading-with-icon-footer .section-heading-icon {
  color: inherit !important;
  width: 30px !important;
  height: 30px !important;
}

.heading-with-icon-footer .section-heading-icon svg {
  width: 24px !important;
  height: 24px !important;
}

.mobile-panel .menu-svg-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #102033 !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.mobile-panel .menu-svg-icon svg {
  width: 25px !important;
  height: 25px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}

.hero-content {
  transform: translateY(-170px) !important;
}

.quicklinks {
  position: relative;
  z-index: 5;
  max-width: 1220px;
  margin: -52px auto 76px;
  padding: 0 22px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  row-gap: 18px;
  margin-top: -240px !important;
}

.footer-legal {
  border-top: 1px solid rgba(255,255,255,.18);
  margin-top: 28px;
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}

.footer-legal a {
  color: inherit;
  text-decoration: none;
  font-weight: 800;
  opacity: .9;
}

.footer-legal a:hover, .footer-legal a:focus {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

body:not(.home) .site-header, body:not(.front-page) .site-header, body:not(.home) .site-header .logo, body:not(.front-page) .site-header .logo, body:not(.home) .site-header .logo span, body:not(.front-page) .site-header .logo span, body:not(.home) .site-header .logo small, body:not(.front-page) .site-header .logo small, body.blog .site-header {
  color: #0b1736 !important;
}

body:not(.home) .site-header .menu-toggle span, body:not(.front-page) .site-header .menu-toggle span, body.blog .site-header .menu-toggle span {
  background: #0b1736 !important;
}

body.home .site-header, body.home .site-header *, body.home .logo, body.home .logo *, body.front-page .site-header, body.front-page .site-header *, body.front-page .logo, body.front-page .logo * {
  color: #ffffff !important;
}

body.home .menu-toggle, body.home .menu-toggle *, body.front-page .menu-toggle, body.front-page .menu-toggle * {
  color: #0b1736 !important;
}

.site-header.site-header-home, .site-header.site-header-home .logo, .site-header.site-header-home .logo span, .site-header.site-header-home .logo small {
  color: #0b1736 !important;
}

.site-header .menu-toggle, .site-header .menu-toggle * {
  color: #0b1736 !important;
}

.quicklink {
  background: white;
  border-radius: 24px;
  padding: 24px 20px;
  min-height: 150px;
  box-shadow: 0 22px 50px rgba(15,23,42,.14);
  transition: transform .2s ease, box-shadow .2s ease;
  justify-content: center;
  position: relative;
  border-top: 0 !important;
  overflow: hidden;
}

.quicklink .kachel-icon.kachel-icon-3d.littlebird-3d, .quicklink .kachel-icon.kachel-icon-3d.littlebird-3d img {
  width: 110px !important;
}

.heading-with-icon {
  display: inline-flex;
  gap: 14px;
  align-items: center !important;
}

.mobile-panel a {
  color: #102033 !important;
  text-decoration: none !important;
  font-weight: 900;
  font-size: 20px;
  padding: 13px 14px;
  border-radius: 14px;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.mobile-panel .menu-label {
  display: inline-block !important;
}

#downloads .downloads-termine-card {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 34px 38px !important;
}

#aktuelles, #termine, #betreuung, #krankmeldung, #downloads, #kontakt, #team {
  scroll-margin-top: 96px;
}

.mobile-panel:not(.open) {
  visibility: hidden !important;
  transform: none !important;
}

.back-to-top:not(.visible) {
  visibility: hidden !important;
  transform: none !important;
}

.kachel-icon-3d img, .section-heading-icon-3d img, .menu-icon-3d img {
  display: block;
  object-fit: contain;
}

.quicklink .kachel-icon.kachel-icon-3d {
  margin: -8px 0 8px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 52px;
  height: 52px;
}

.quicklink .kachel-icon.kachel-icon-3d img {
  width: 86px !important;
  height: 78px !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
  filter: drop-shadow(0 8px 12px rgba(15,23,42,.16));
  max-width: 100%;
  max-height: 100%;
}

.quicklink .kachel-icon.kachel-icon-3d.icon-rokt, .quicklink .kachel-icon.kachel-icon-3d.icon-hector, .quicklink .kachel-icon.kachel-icon-3d.icon-biss-transfer {
  width: 72px;
  height: 52px;
}

.quicklink .kachel-icon.kachel-icon-3d.icon-rokt img, .quicklink .kachel-icon.kachel-icon-3d.icon-hector img, .quicklink .kachel-icon.kachel-icon-3d.icon-biss-transfer img {
  max-width: 86px;
  width: 86px;
  height: auto;
}

.section-heading-icon.section-heading-icon-3d {
  min-width: 76px !important;
  margin-right: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.section-heading-icon.section-heading-icon-3d.icon-rokt, .section-heading-icon.section-heading-icon-3d.icon-hector, .section-heading-icon.section-heading-icon-3d.icon-biss-transfer {
  width: 84px;
  flex-basis: 84px;
}

.section-heading-icon.section-heading-icon-3d img {
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 7px 10px rgba(15,23,42,.14));
  width: 100%;
  height: 100%;
}

.section-heading-icon.section-heading-icon-3d.icon-rokt img, .section-heading-icon.section-heading-icon-3d.icon-hector img, .section-heading-icon.section-heading-icon-3d.icon-biss-transfer img {
  width: 84px;
  height: auto;
}

.mobile-panel .menu-svg-icon.menu-icon-3d {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 4px !important;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.mobile-panel .menu-svg-icon.menu-icon-3d.icon-rokt, .mobile-panel .menu-svg-icon.menu-icon-3d.icon-hector, .mobile-panel .menu-svg-icon.menu-icon-3d.icon-biss-transfer {
  width: 48px;
  flex-basis: 48px;
}

.mobile-panel .menu-svg-icon.menu-icon-3d img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 4px 7px rgba(15,23,42,.13));
  max-width: 100%;
  max-height: 100%;
}

.mobile-panel .menu-svg-icon.menu-icon-3d.icon-rokt img, .mobile-panel .menu-svg-icon.menu-icon-3d.icon-hector img, .mobile-panel .menu-svg-icon.menu-icon-3d.icon-biss-transfer img {
  width: 48px;
  height: auto;
}

.gsh-area-content-left {
  min-width: 0;
}

section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink, .quicklinks > a.quicklink {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink .kachel-icon, section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink .kachel-icon.kachel-icon-3d, .quicklinks > a.quicklink .kachel-icon, .quicklinks > a.quicklink .kachel-icon.kachel-icon-3d {
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  align-items: center !important;
}

section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink .kachel-icon img, section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink .kachel-icon.kachel-icon-3d img, .quicklinks > a.quicklink .kachel-icon img, .quicklinks > a.quicklink .kachel-icon.kachel-icon-3d img {
  object-position: center center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink strong, .quicklinks > a.quicklink strong {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink span, .quicklinks > a.quicklink span {
  display: none !important;
}

body {
  margin: 0;
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  background: radial-gradient(circle at 18% 0%, rgba(247,230,202,.55), transparent 32%), linear-gradient(180deg, #eef7f8 0%, #f6f8fb 46%, #eef4f6 100%) !important;
  color: var(--school-navy) !important;
}

h1, h2, h3, .logo {
  font-family: var(--font-heading) !important;
}

.quicklink strong,
.menu-toggle,
.mobile-panel a,
.card h3,
.team-card h3,
.empty-news h3 {
  font-family: var(--font-body) !important;
}

body.scrolled .site-header {
  padding: 14px 6vw;
  background: rgba(255,255,255,.78) !important;
  color: var(--school-navy) !important;
  box-shadow: 0 12px 35px rgba(7,23,51,.09) !important;
  backdrop-filter: blur(20px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
  padding-top: 14px !important;
  padding-bottom: 18px !important;
}

.logo {
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  color: var(--school-navy) !important;
  letter-spacing: -.04em !important;
}

.logo small {
  display: block;
  font-size: 13px;
  font-weight: 700;
  opacity: .85;
  margin-top: 4px;
  color: rgba(7,23,51,.76) !important;
  letter-spacing: .01em !important;
}

.header-school-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  padding: 5px;
  margin-right: 12px;
  vertical-align: middle;
  background: rgba(255,255,255,.72) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px rgba(7,23,51,.08) !important;
}

.menu-toggle {
  padding: 11px 17px;
  font-weight: 900;
  cursor: pointer;
  z-index: 10002;
  position: relative;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
  background: rgba(247,230,202,.82) !important;
  box-shadow: 0 16px 38px rgba(7,23,51,.12) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 0 !important;
  color: var(--school-navy) !important;
}

.menu-toggle span {
  display: block;
  width: 25px !important;
  height: 3px !important;
  background: var(--school-navy) !important;
  border-radius: 999px !important;
}

.hero p {
  max-width: 720px;
  margin: 0 0 32px;
  font-size: clamp(18px, 2.2vw, 25px);
  line-height: 1.5;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.25) !important;
}

.quicklinks > a.quicklink::before, section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink::before {
  display: none !important;
  content: none !important;
}

.section {
  max-width: 1220px;
  margin: 0 auto 80px;
  padding: 0 22px;
  position: relative !important;
  z-index: 2 !important;
}

.section-title {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
  align-items: center !important;
}

.section-title h2 {
  font-size: clamp(32px, 5vw, 54px);
  margin: 0;
  font-family: var(--font-heading) !important;
  color: var(--school-navy) !important;
  font-weight: 900 !important;
  letter-spacing: -.055em !important;
}

.section-title p, .card p, .team-card p, .empty-news p {
  color: rgba(7,23,51,.68) !important;
}

.card, .team-card, .empty-news, .downloads-termine-card, .gsh-area-content {
  background: rgba(255,255,255,.76) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.62)) !important;
  border: 0 !important;
  border-top: 0 !important;
  border-radius: 30px !important;
  box-shadow: 0 22px 58px rgba(7,23,51,.09) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}

.card h3, .team-card h3, .empty-news h3 {
  font-family: var(--font-heading) !important;
  color: var(--school-navy) !important;
  font-weight: 850 !important;
  letter-spacing: -.035em !important;
}

html, body {
  font-family: var(--font-body) !important;
  background: linear-gradient(180deg, #eef7fa 0%, #f7fbfc 42%, #fffaf1 100%) !important;
}

.site-header::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -42px !important;
  height: 42px !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)) !important;
}

.site-header .logo, .site-header .logo span, .site-header .logo small, .site-header.site-header-home .logo, .site-header.site-header-home .logo span, .site-header.site-header-home .logo small {
  color: var(--school-navy) !important;
  text-shadow: 0 1px 12px rgba(255,255,255,.55) !important;
}

.site-header .logo {
  letter-spacing: -.055em !important;
  font-weight: 900 !important;
}

.site-header .logo small {
  letter-spacing: .01em !important;
  font-weight: 700 !important;
  opacity: .78 !important;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(5,12,28,.68), rgba(5,12,28,.32) 45%, rgba(5,12,28,.18)) !important;
}

.hero::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 150px !important;
  background: linear-gradient(180deg, rgba(238,246,248,0), rgba(238,246,248,.92) 78%, rgba(238,246,248,1)) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

 .hero .hero-content {
  position: relative !important;
  z-index: 3 !important;
}

.hero h1 {
  margin: 0 0 22px;
  font-size: clamp(46px, 8vw, 62px);
  line-height: .94;
  text-shadow: 0 16px 42px rgba(0,0,0,.28) !important;
  font-family: var(--font-heading) !important;
  font-weight: 900 !important;
  letter-spacing: -.065em !important;
}

.quicklinks, section.quicklinks[aria-label="Schnellzugriffe"] {
  position: relative !important;
  z-index: 9 !important;
  max-width: 1240px !important;
  margin: -118px auto 72px !important;
  padding: 0 22px !important;
  gap: 18px !important;
}

.quicklinks > a.quicklink, section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink {
  background-image: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.10)) !important;
  border-top: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08)) !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 26px 70px rgba(7,23,51,.10) !important;
  border-radius: 28px !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
  min-height: 154px !important;
  padding: 24px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
}

.quicklinks > a.quicklink::before, .quicklinks > a.quicklink::after, section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink::before, section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink::after {
  display: none !important;
  content: none !important;
}

.quicklinks > a.quicklink:hover, section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink:hover {
  transform: translateY(-6px) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.12)) !important;
  box-shadow: 0 32px 82px rgba(7,23,51,.14) !important;
}

.quicklinks > a.quicklink span, section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink span {
  display: none !important;
}

.quicklinks > a.quicklink strong, section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink strong {
  width: 100% !important;
  margin: 0 !important;
  color: var(--school-navy) !important;
  font-size: clamp(16px, 1.02vw, 20px) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  text-align: center !important;
}

.quicklinks > a.quicklink .kachel-icon, .quicklinks > a.quicklink .kachel-icon.kachel-icon-3d, section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink .kachel-icon, section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink .kachel-icon.kachel-icon-3d {
  width: 78px !important;
  height: 78px !important;
  margin: 0 auto 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.quicklinks > a.quicklink .kachel-icon img, .quicklinks > a.quicklink .kachel-icon.kachel-icon-3d img, section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink .kachel-icon img, section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink .kachel-icon.kachel-icon-3d img {
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  max-width: 78px !important;
  max-height: 78px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 12px 18px rgba(7,23,51,.22)) !important;
}

.section, main {
  background: transparent !important;
}

.card, .team-card, .empty-news, .downloads-termine-card, .gsh-area-content {
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.62)) !important;
  border: none !important;
  box-shadow: 0 24px 70px rgba(7,23,51,.08) !important;
  border-radius: 30px !important;
  backdrop-filter: blur(14px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.06) !important;
}

.card::before, .team-card::before, .empty-news::before {
  display: none !important;
  content: none !important;
}

body .site-header, body.home .site-header, body.front-page .site-header, .site-header.site-header-home {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  color: var(--school-navy) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
  transition: padding .25s ease, background .25s ease, backdrop-filter .25s ease !important;
  min-height: 128px !important;
  padding: 18px clamp(24px, 5.5vw, 84px) 42px !important;
  align-items: center !important;
  background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.66) 50%, rgba(255,255,255,.28) 76%, rgba(255,255,255,0) 100%) !important;
  box-shadow: none !important;
  border: 0 !important;
  overflow: visible !important;
}

.site-header .logo, .site-header.site-header-home .logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: clamp(18px, 2vw, 28px) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  color: var(--school-navy) !important;
  text-decoration: none !important;
}

.site-header .header-school-logo, .site-header.site-header-home .header-school-logo {
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: clamp(82px, 7.2vw, 112px) !important;
  max-width: clamp(165px, 17vw, 240px) !important;
  object-fit: contain !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 14px 24px rgba(7,23,51,.14)) !important;
}

body.scrolled .site-header .header-school-logo {
  height: clamp(64px, 5.6vw, 86px) !important;
  max-width: clamp(138px, 14vw, 200px) !important;
}

.site-header .logo > span, .site-header.site-header-home .logo > span {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-family: var(--font-heading) !important;
  font-size: clamp(34px, 3.8vw, 58px) !important;
  line-height: .96 !important;
  font-weight: 900 !important;
  letter-spacing: -.065em !important;
  color: var(--school-navy) !important;
  text-shadow: 0 8px 28px rgba(255,255,255,.72) !important;
  white-space: nowrap !important;
}

.site-header .logo small, .site-header.site-header-home .logo small {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: clamp(14px, 1.15vw, 19px) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  color: rgba(11,23,54,.72) !important;
  opacity: 1 !important;
  margin: 0 !important;
  text-shadow: 0 5px 20px rgba(255,255,255,.65) !important;
  white-space: nowrap !important;
}

html, body {
  font-family: var(--font-body) !important;
}

h1, h2, h3, .logo, .site-header, .section-title h2 {
  font-family: var(--font-heading) !important;
}

.quicklink strong,
.card h3,
.team-card h3,
.empty-news h3,
.mobile-panel a,
.menu-toggle {
  font-family: var(--font-body) !important;
}

body .site-header, body.home .site-header, body.front-page .site-header, body.blog .site-header, .site-header, .site-header.site-header-home {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  min-height: var(--gsh-header-height) !important;
  padding: var(--gsh-header-padding-top) var(--gsh-header-padding-side) var(--gsh-header-padding-bottom) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  overflow: visible !important;
  color: var(--school-navy) !important;
  background: rgba(255,255,255,var(--gsh-header-white)) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
  box-shadow: 0 1px 0 rgba(7,23,51,.06) !important;
  border: 0 !important;
  transition: padding .22s ease, min-height .22s ease, background .22s ease !important;
}

.site-header::after, .site-header.site-header-home::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(var(--gsh-header-fade-height) * -1) !important;
  height: var(--gsh-header-fade-height) !important;
  pointer-events: none !important;
  background: linear-gradient( 180deg, rgba(255,255,255,var(--gsh-header-fade-white)) 0%, rgba(255,255,255,0) 100% ) !important;
}

.site-header .logo, .site-header.site-header-home .logo, a.logo {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--gsh-logo-gap) !important;
  width: auto !important;
  max-width: calc(100vw - 170px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  line-height: 1 !important;
  color: var(--school-navy) !important;
}

.site-header .logo::before, .site-header .logo::after, .site-header .logo span::before, .site-header .logo span::after {
  display: none !important;
  content: none !important;
}

img.header-school-logo, .site-header img.header-school-logo, .site-header .header-school-logo, a.logo img.header-school-logo, .logo .header-school-logo, .site-header.site-header-home img.header-school-logo {
  height: var(--gsh-logo-height) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: drop-shadow(0 10px 22px rgba(7,23,51,.18)) !important;
}

.site-header .logo > span, .site-header.site-header-home .logo > span, a.logo > span {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  font-family: var(--font-heading) !important;
  font-size: var(--gsh-school-title-size) !important;
  font-weight: 900 !important;
  line-height: .95 !important;
  letter-spacing: -.055em !important;
  color: var(--school-navy) !important;
  text-shadow: 0 1px 12px rgba(255,255,255,.55) !important;
}

.site-header .logo small, .site-header.site-header-home .logo small, a.logo small {
  display: block !important;
  margin-top: 8px !important;
  font-family: var(--font-body) !important;
  font-size: var(--gsh-school-subtitle-size) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: .01em !important;
  color: var(--school-navy) !important;
  opacity: .78 !important;
}

body.scrolled .site-header, body.scrolled .site-header.site-header-home {
  box-shadow: none !important;
  padding: 12px clamp(24px, 5.5vw, 84px) 28px !important;
  min-height: 96px !important;
  padding-top: 10px !important;
  padding-bottom: 14px !important;
  background: rgba(255,255,255,.96) !important;
}

body.scrolled img.header-school-logo, body.scrolled .site-header img.header-school-logo, body.scrolled .site-header .header-school-logo, body.scrolled a.logo img.header-school-logo {
  height: 92px !important;
}

.site-header .menu-toggle span {
  background: var(--school-navy) !important;
  color: var(--school-navy) !important;
}

.hero {
  position: relative;
  overflow: hidden;
  color: white;
  display: flex;
  align-items: flex-end;
  padding: 260px 6vw 96px !important;
  margin-top: -180px !important;
  min-height: 92vh !important;
  padding-bottom: 140px !important;
  margin-bottom: 0 !important;
  background-position: center center !important;
  padding-top: calc(var(--gsh-header-height) + 70px) !important;
}

.site-header, .site-header.site-header-home {
  height: 180px !important;
  min-height: 180px !important;
  padding: 10px 48px 14px !important;
  overflow: visible !important;
}

a.logo, .site-header .logo {
  position: relative !important;
  overflow: visible !important;
  max-width: none !important;
}

img.header-school-logo, .site-header img.header-school-logo {
  height: 50px !important;
  width: auto !important;
  max-height: none !important;
  position: relative !important;
  z-index: 5 !important;
  transform: translateY(70px) !important;
}

body.home .hero-slide, body.front-page .hero-slide {
  top: 0 !important;
  transform-origin: center top !important;
}

.site-header {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto 0;
  justify-content: space-between;
  padding: 24px 6vw;
  transition: background .25s ease, box-shadow .25s ease, padding .25s ease;
  pointer-events: auto !important;
  color: var(--school-navy) !important;
  box-shadow: none !important;
  padding-top: 20px !important;
  padding-bottom: 34px !important;
  border: 0 !important;
  display: flex;
  align-items: center;
  overflow: visible !important;
  background: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}

body.home .hero, body.front-page .hero {
  margin-top: -180px !important;
  padding-top: 180px !important;
}

body.home main, body.front-page main {
  margin-top: -180px !important;
}

.site-header .logo, .site-header .menu-toggle {
  position: relative !important;
  z-index: 3 !important;
}

:root {
  --yellow: #f7b500;
  --text: #111827;
  --muted: #64748b;
  --bg: #f4f7fa;
  --footer-light: #EAF4F7;
  --footer-mid: #D7E8EE;
  --footer-text: #1F2A44;
  --accent-blue: #f7e6ca !important;
  --accent-blue-dark: #ead3ad !important;
  --blue: #f7e6ca !important;
  --blue-dark: #ead3ad !important;
  --school-soft-bg: #eef7f8;
  --glass-bg: rgba(255, 255, 255, .18);
  --glass-bg-strong: rgba(255, 255, 255, .78);
  --glass-shadow: 0 22px 55px rgba(7, 23, 51, .13);
  --school-cream: #f7e6ca;
  --soft-page-bg: #eef6f8;
  --font-heading: "Courgette", cursive;
  --font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --school-navy: #071733;
  --gsh-header-padding-top: 12px;
  --gsh-header-padding-bottom: 18px;
  --gsh-header-padding-side: 6vw;
  --gsh-logo-gap: 24px;
  --gsh-school-title-size: clamp(38px, 3.6vw, 58px);
  --gsh-school-subtitle-size: 18px;
  --gsh-header-height: 180px !important;
  --gsh-logo-height: 300px !important;
  --gsh-header-white: .06 !important;
  --gsh-header-fade-height: 70px !important;
  --gsh-header-fade-white: .08 !important;
}

body .site-header, body.home .site-header, body.front-page .site-header, body.blog .site-header, .site-header, .site-header.site-header-home, body.scrolled .site-header, body.scrolled .site-header.site-header-home {
  height: 180px !important;
  min-height: 180px !important;
  padding: 10px 48px 14px !important;
  overflow: visible !important;
  background: rgba(255,255,255,.03) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  border: 0 !important;
  border-bottom: none !important;
  box-shadow: none !important;
  position: relative !important;
  mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%) !important;
}

body .site-header::after, body.home .site-header::after, body.front-page .site-header::after, body.blog .site-header::after, .site-header::after, .site-header.site-header-home::after, body.scrolled .site-header::after, body.scrolled .site-header.site-header-home::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 80px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.15) 100%) !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

.site-header .logo, .site-header.site-header-home .logo, a.logo, .site-header .menu-toggle {
  position: relative !important;
  z-index: 3 !important;
}

.site-header .menu-toggle {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 56px !important;
  height: 56px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: rgba(247,230,202,.88) !important;
  box-shadow: 0 12px 32px rgba(7,23,51,.12) !important;
  cursor: pointer !important;
  margin-left: 500px !important;
  margin-right: auto !important;
}

.hero-content {
  position: relative;
  margin-left: 0 !important;
  margin-right: 0 !important;
  z-index: 4 !important;
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

 .hero-content h1 {
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin-left: clamp(52px, 5.7vw, 100px) !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  text-align: center !important;
  font-weight: 500 !important;
  color: #fff !important;
  -webkit-text-stroke: 3.5px rgba(120,170,195,.45) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.16), 0 0 2px rgba(120,170,195,.45) !important;
}

.hero-content p {
  margin-left: clamp(52px, 5.7vw, 100px) !important;
  max-width: 850px !important;
  margin: 24px auto 0 !important;
  text-align: center !important;
}

.site-header .menu-toggle, body .site-header .menu-toggle, body.home .site-header .menu-toggle, body.front-page .site-header .menu-toggle, body.scrolled .site-header .menu-toggle, .menu-toggle {
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  min-height: 70px !important;
  padding: 0 !important;
  margin-left: auto !important;
  margin-right: 130px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  overflow: visible !important;
  cursor: pointer !important;
}

.site-header .menu-toggle span, .menu-toggle span {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.site-header .menu-toggle .hamburger-menu-icon, .menu-toggle .hamburger-menu-icon, .site-header .menu-toggle img, .menu-toggle img {
  display: block !important;
  width: 70px !important;
  height: 70px !important;
  max-width: 70px !important;
  max-height: 70px !important;
  object-fit: contain !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 6px 12px rgba(0,55,140,.28)) !important;
  pointer-events: none !important;
}

.menu-toggle {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.menu-toggle::before, .menu-toggle::after {
  display: none !important;
}

.menu-toggle img {
  width: 60px !important;
  height: auto !important;
  display: block !important;
}

html body .site-header button.menu-toggle, html body .site-header .menu-toggle, html body.home .site-header button.menu-toggle, html body.front-page .site-header button.menu-toggle, html body.scrolled .site-header button.menu-toggle {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  margin-left: 130px !important;
  margin-right: 165px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  overflow: visible !important;
}

html body .site-header button.menu-toggle::before, html body .site-header button.menu-toggle::after, html body .site-header .menu-toggle::before, html body .site-header .menu-toggle::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .site-header .menu-toggle span {
  display: none !important;
}

html body .site-header .menu-toggle img.hamburger-menu-icon, html body .site-header .menu-toggle img {
  display: block !important;
  width: 80px !important;
  height: auto !important;
  max-width: 80px !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

img.header-school-logo, .site-header img.header-school-logo, .site-header .header-school-logo, a.logo img.header-school-logo, .logo .header-school-logo, .site-header.site-header-home img.header-school-logo, body.scrolled img.header-school-logo, body.scrolled .site-header img.header-school-logo, body.scrolled .site-header .header-school-logo, body.scrolled a.logo img.header-school-logo {
  height: 330px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: drop-shadow(0 10px 22px rgba(7,23,51,.18)) !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  z-index: 5 !important;
  position: relative !important;
  transform: translateY(100px) !important;
}

@keyframes heroSlider {
  0% { opacity:0; transform:scale(1.05); }
  2% { opacity:1; transform:scale(1.05); }
  18% { opacity:1; transform:scale(1.08); }
  22% { opacity:0; transform:scale(1.12); }
  100% { opacity:0; transform:scale(1.12); }
}

@keyframes gshConstructionMarquee {
  from {
  transform: translateX(-50%);
  }

  to {
  transform: translateX(0);
  }
}

@media (max-width: 1060px) {
  .quicklinks {
  grid-template-columns: repeat(3, 1fr);
  }

  .menu-toggle {
  display: inline-flex;
  }

  .mobile-panel {
  position: fixed;
  z-index: 70;
  top: 78px;
  right: 18px;
  left: 18px;
  background: white;
  color: var(--text);
  border-radius: 28px;
  padding: 20px;
  box-shadow: 0 30px 80px rgba(15,23,42,.28);
  gap: 4px;
  }

  .mobile-panel a {
  padding: 16px;
  font-weight: 900;
  border-radius: 16px;
  }

  .mobile-panel a:hover {
  background: #f1f5f9;
  }

  .team-grid {
  grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .quicklinks, .intro-grid, .footer-grid {
  grid-template-columns: 1fr;
  }

  .section-title {
  display: block;
  }

  .hero {
  min-height: 88vh;
  padding: 145px 24px 82px;
  }

  .site-header {
  padding: 20px 22px;
  }

  body.scrolled .site-header {
  padding: 14px 22px;
  }

  .team-grid {
  grid-template-columns: 1fr;
  }

  .site-footer {
  padding-top: 120px !important;
  }

  .back-to-top {
  right: 16px;
  bottom: 16px;
  width: 48px;
  height: 48px;
  font-size: 26px;
  }

  .quicklink .kachel-icon.kachel-icon-3d {
  width: 74px !important;
  height: 68px !important;
  margin-top: -4px !important;
  }

  .quicklink .kachel-icon.kachel-icon-3d img {
  width: 74px !important;
  height: 68px !important;
  }

  .quicklink .kachel-icon.kachel-icon-3d.littlebird-3d, .quicklink .kachel-icon.kachel-icon-3d.littlebird-3d img {
  width: 94px !important;
  }

  .section-heading-icon.section-heading-icon-3d {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  margin-right: 10px !important;
  }

  #downloads .downloads-termine-card {
  padding: 26px 24px !important;
  }

  section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink:hover, section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink:focus, section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink:active {
  transform: none !important;
  }

  section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink::before, section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink::after, section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink > * {
  pointer-events: none !important;
  }

  section.quicklinks[aria-label="Schnellzugriffe"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: stretch !important;
  position: relative !important;
  isolation: isolate !important;
  z-index: 20 !important;
  }

  section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 142px !important;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  z-index: 1 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  .hero-slide {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  }

  .hero p {
  font-size: 17px;
  }

  .hero-slide-desktop.has-mobile {
  display: none;
  }

  .hero-slide-mobile {
  display: block;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  }

  .hero {
  background: #0f172a;
  min-height: 88vh;
  padding: 120px 24px 64px;
  }

  .hero::before {
  background: linear-gradient(180deg, rgba(15,23,42,.16) 0%, rgba(15,23,42,.42) 45%, rgba(15,23,42,.92) 100%);
  }

  .hero-title-desktop {
  display: block !important;
  }

  .hero-title-mobile {
  display: none !important;
  }

  .hero h1 {
  font-size: clamp(38px, 13vw, 56px) !important;
  line-height: 1.03 !important;
  letter-spacing: -1.4px !important;
  max-width: 92vw;
  margin-bottom: 22px;
  }

  .hero-content {
  max-width: 100%;
  margin-top: auto;
  padding-bottom: 8px;
  }
}

@media (max-width: 900px) {

  .menu-toggle {
  position: relative;
  display: inline-flex !important;
  }

  .mobile-panel a {
  color: #102033 !important;
  text-decoration: none !important;
  font-weight: 900;
  font-size: 20px;
  padding: 13px 14px;
  border-radius: 14px;
  }

  .mobile-panel a:hover, .mobile-panel a:focus {
  color: #102033 !important;
  background: rgba(143,191,210,.25) !important;
  }

  .mobile-panel {
  position: fixed;
  display: grid;
  gap: 10px;
  background: rgba(255,255,255,.97);
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(15,23,42,.22);
  transform: translateY(-16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 1001;
  left: 18px !important;
  right: 18px !important;
  width: auto !important;
  top: 78px !important;
  }

  .construction-banner {
  height: 32px;
  font-size: 13px;
  }

   .hero-content h1, .hero-content p {
  margin-left: 24px !important;
  margin-right: 24px !important;
  }

  .site-header {
  padding: 14px 22px 28px !important;
  }

  .quicklinks > a.quicklink, section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink {
  min-height: 142px !important;
  border-radius: 22px !important;
  }

  .quicklinks, section.quicklinks[aria-label="Schnellzugriffe"] {
  margin-top: -86px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body .site-header, body.home .site-header, body.front-page .site-header, .site-header.site-header-home {
  min-height: 106px !important;
  padding: 14px 18px 32px !important;
  }

  .site-header .logo, .site-header.site-header-home .logo {
  gap: 14px !important;
  }

  .site-header .header-school-logo, .site-header.site-header-home .header-school-logo {
  height: 68px !important;
  max-width: 150px !important;
  }

  .site-header .logo > span, .site-header.site-header-home .logo > span {
  font-size: clamp(25px, 6vw, 38px) !important;
  letter-spacing: -.055em !important;
  }

  .site-header .logo small, .site-header.site-header-home .logo small {
  font-size: 13px !important;
  }

  .hero {
  min-height: 88vh !important;
  padding-bottom: 118px !important;
  padding-top: 148px !important;
  }

  .site-header .logo, .site-header.site-header-home .logo, a.logo {
  max-width: calc(100vw - 92px) !important;
  }

  body.scrolled img.header-school-logo, body.scrolled .site-header img.header-school-logo, body.scrolled .site-header .header-school-logo, body.scrolled a.logo img.header-school-logo {
  height: 40px !important;
  }

  :root {
  --gsh-header-padding-top: 10px;
  --gsh-header-padding-bottom: 16px;
  --gsh-logo-gap: 14px;
  --gsh-school-title-size: clamp(25px, 6vw, 38px);
  --gsh-school-subtitle-size: 13px;
  --gsh-header-height: 100px !important;
  --gsh-logo-height: 78px !important;
  --gsh-header-fade-height: 46px !important;
  }

  body .site-header, .site-header, body.scrolled .site-header {
  height: 100px !important;
  min-height: 100px !important;
  padding: 10px 22px 16px !important;
  }

  img.header-school-logo, .site-header img.header-school-logo, body.scrolled img.header-school-logo, body.scrolled .site-header img.header-school-logo {
  height: 78px !important;
  transform: none !important;
  }

  .site-header::after, .site-header.site-header-home::after {
  bottom: -46px !important;
  height: 46px !important;
  }

  .site-header .menu-toggle {
  margin-right: 0 !important;
  }

  .site-header .menu-toggle, .menu-toggle {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  margin-right: 0 !important;
  }

  .site-header .menu-toggle .hamburger-menu-icon, .menu-toggle .hamburger-menu-icon, .site-header .menu-toggle img, .menu-toggle img {
  width: 50px !important;
  height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  }
}

@media (max-width: 768px) {
  .hero-content {
  transform: translateY(-80px) !important;
  }

  .quicklinks {
  margin-top: -70px !important;
  }

  .heading-with-icon {
  gap: 10px;
  }

  .section-heading-icon {
  width: 36px !important;
  height: 36px !important;
  }

  .section-heading-icon svg {
  width: 28px !important;
  height: 28px !important;
  }
}

@media (max-width:768px) {
  .hero-content {
  transform: translateY(-80px) !important;
  }

  .quicklinks {
  margin-top: -100px !important;
  }
}

@media (max-width: 560px) {
  .quicklinks > a.quicklink strong, section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink strong {
  font-size: 16px !important;
  }

  .quicklinks, section.quicklinks[aria-label="Schnellzugriffe"] {
  padding: 0 14px !important;
  gap: 12px !important;
  }

  .quicklinks > a.quicklink, section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink {
  padding: 20px 12px !important;
  min-height: 136px !important;
  border-radius: 23px !important;
  }

  body .site-header, body.home .site-header, body.front-page .site-header, .site-header.site-header-home {
  min-height: 92px !important;
  padding: 12px 14px 28px !important;
  }

  .site-header .header-school-logo, .site-header.site-header-home .header-school-logo {
  height: 54px !important;
  max-width: 118px !important;
  }

  .site-header .logo > span, .site-header.site-header-home .logo > span {
  font-size: clamp(20px, 5.4vw, 28px) !important;
  }

  .site-header .logo small, .site-header.site-header-home .logo small {
  display: none !important;
  }

  .site-header .logo small, .site-header.site-header-home .logo small, a.logo small {
  display: none !important;
  }

  .site-header .menu-toggle {
  width: 50px !important;
  height: 50px !important;
  margin-left: 10px !important;
  }

  :root {
  --gsh-header-padding-top: 8px;
  --gsh-header-padding-bottom: 12px;
  --gsh-logo-gap: 12px;
  --gsh-school-title-size: clamp(20px, 5.4vw, 28px);
  --gsh-header-height: 88px !important;
  --gsh-logo-height: 56px !important;
  --gsh-header-fade-height: 36px !important;
  }

  body .site-header, .site-header, body.scrolled .site-header {
  height: 88px !important;
  min-height: 88px !important;
  padding: 8px 18px 12px !important;
  }

  img.header-school-logo, .site-header img.header-school-logo, body.scrolled img.header-school-logo, body.scrolled .site-header img.header-school-logo {
  height: 40px !important;
  transform: none !important;
  }

  .site-header::after, .site-header.site-header-home::after {
  bottom: -36px !important;
  height: 36px !important;
  }
}

/* ========================================================= FINAL FIX: HEADER NUR TRANSPARENT MACHEN --------------------------------------------------------- Entfernt ausschließlich sichtbare Header-Flächen: Hintergrund, Blur, Schatten, Maske und Verlaufsebene. Header, Logo und Hamburger bleiben vorhanden. ========================================================= */

html body .site-header, html body.home .site-header, html body.front-page .site-header, html body.blog .site-header, html body.scrolled .site-header, html body .site-header.site-header-home {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

html body .site-header::before, html body .site-header::after, html body.home .site-header::before, html body.home .site-header::after, html body.front-page .site-header::before, html body.front-page .site-header::after, html body.scrolled .site-header::before, html body.scrolled .site-header::after, html body .site-header.site-header-home::before, html body .site-header.site-header-home::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* Hamburger selbst transparent lassen, aber nicht entfernen */

html body .site-header .menu-toggle, html body .site-header button.menu-toggle, html body.scrolled .site-header .menu-toggle, html body.scrolled .site-header button.menu-toggle {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* FINAL TOP GAP FIX */

html,body {
  margin: 0 !important;
  padding: 0 !important;
}

body {
  padding-top: 0 !important;
}

.site-header {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin-top: 0 !important;
  top: 0 !important;
}

/* ========================================================= FINAL FIX: WEISSEN BALKEN OBEN ENTFERNEN Ursache ist meist der WordPress-Adminbar-Offset auf html. ========================================================= */

html, html[style], body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#wpadminbar {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body .site-header, html body.home .site-header, html body.front-page .site-header, html body.scrolled .site-header, html body .site-header.site-header-home {
  top: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body .site-header::before, html body .site-header::after, html body.scrolled .site-header::before, html body.scrolled .site-header::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

@media (max-width:760px) {
  .site-header {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: fixed !important;
  }

  .site-header .logo {
  margin: 0 auto !important;
  justify-content: center !important;
  }

  .site-header .menu-toggle {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  }

  .site-header .menu-toggle img.hamburger-menu-icon,.site-header .menu-toggle img {
  width: 42px !important;
  height: 42px !important;
  max-width: none !important;
  }
}

/* ========================================================= FINAL MOBILE HEADER FIX Logo centered, hamburger centered directly below. Desktop remains unchanged. ========================================================= */

@media (max-width: 760px) {
  html, body {
  overflow-x: hidden !important;
  }

  body .site-header, body.home .site-header, body.front-page .site-header, body.blog .site-header, .site-header, .site-header.site-header-home {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-height: 170px !important;
  height: 170px !important;
  padding: 10px 16px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  z-index: 10000 !important;
  }

  .site-header::before, .site-header::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  }

  .site-header .logo, .site-header.site-header-home .logo, a.logo {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  text-align: center !important;
  }

  .site-header .logo > span, .site-header .logo small, a.logo > span, a.logo small {
  display: none !important;
  }

  img.header-school-logo, .site-header img.header-school-logo, .site-header .header-school-logo, a.logo img.header-school-logo, .logo .header-school-logo, body.scrolled img.header-school-logo, body.scrolled .site-header img.header-school-logo {
  display: block !important;
  width: min(82vw, 330px) !important;
  height: auto !important;
  max-width: min(82vw, 330px) !important;
  max-height: 105px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  padding: 0 !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 8px 16px rgba(7,23,51,.18)) !important;
  }

  html body .site-header button.menu-toggle, html body .site-header .menu-toggle, html body.home .site-header button.menu-toggle, html body.front-page .site-header button.menu-toggle, html body.scrolled .site-header button.menu-toggle, .site-header .menu-toggle, .menu-toggle {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 54px !important;
  min-width: 64px !important;
  min-height: 54px !important;
  margin: -8px auto 0 auto !important;
  padding: 0 !important;
  transform: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
  z-index: 10002 !important;
  }

  .site-header .menu-toggle span, .menu-toggle span, .site-header .menu-toggle::before, .site-header .menu-toggle::after, .menu-toggle::before, .menu-toggle::after {
  display: none !important;
  content: none !important;
  }

  html body .site-header .menu-toggle img.hamburger-menu-icon, html body .site-header .menu-toggle img, .site-header .menu-toggle .hamburger-menu-icon, .menu-toggle .hamburger-menu-icon, .site-header .menu-toggle img, .menu-toggle img {
  display: block !important;
  width: 54px !important;
  height: 54px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  }

  .mobile-panel {
  top: 166px !important;
  left: 16px !important;
  right: 16px !important;
  width: auto !important;
  z-index: 10001 !important;
  }
}

/* FINAL MOBILE HAMBURGER POSITION */

@media (max-width: 768px) {
  html body .site-header button.menu-toggle, html body .site-header .menu-toggle, html body.home .site-header button.menu-toggle, html body.front-page .site-header button.menu-toggle, html body.scrolled .site-header button.menu-toggle {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top:110px !important;
  bottom: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  transform: none !important;
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  min-height: 70px !important;
  }

  html body .site-header .menu-toggle img.hamburger-menu-icon, html body .site-header .menu-toggle img {
  width: 58px !important;
  height: 58px !important;
  max-width: none !important;
  max-height: none !important;
	  transform: translateY(60px) !important;
  }
}
@media (max-width: 768px) {

  html body .hero-content {
    transform: translateY(-80px) !important;
  }

}


/* FINAL MOBILE HERO FIX */
@media (max-width: 768px) {
  html body .hero-title-desktop {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body .hero-title-mobile {
    display: none !important;
  }

  html body .hero-content {
    transform: translateY(10px) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* FINAL MOBILE MENU OPEN FIX */
.mobile-panel.open {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.mobile-panel.open a {
  pointer-events: auto !important;
}


/* =========================================================
   Finale Schrift- und Mobile-Menü-Korrekturen
   ========================================================= */

/* Footer wieder in der alten, gut lesbaren Schrift */
.site-footer,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer p,
.site-footer a,
.site-footer span,
.site-footer strong,
.site-footer small,
.footer-grid,
.footer-bottom,
.footer-legal {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif !important;
}

/* Kachelüberschriften dünner und weiterhin in Noto Sans */
.quicklinks > a.quicklink strong,
section.quicklinks[aria-label="Schnellzugriffe"] > a.quicklink strong,
.quicklink strong {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* Hamburger-Button auf Mobil zuverlässig anklickbar */
@media (max-width: 900px) {
  .site-header,
  .site-header .menu-toggle,
  .site-header button.menu-toggle {
    pointer-events: auto !important;
  }

  .site-header .menu-toggle,
  .site-header button.menu-toggle {
    position: relative !important;
    z-index: 10003 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  .site-header .menu-toggle img,
  .site-header .menu-toggle .hamburger-menu-icon {
    pointer-events: none !important;
  }

  .mobile-panel {
    display: grid !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-16px) !important;
    z-index: 10002 !important;
  }

  .mobile-panel.open,
  .mobile-panel.is-open,
  .mobile-panel.active,
  .mobile-panel[aria-hidden="false"] {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}


/* =========================================================
   FINAL: Mobiles Hamburger-Menü + dünnere Container-Schrift
   ========================================================= */

/* Container vollständig in der alten Schrift und deutlich dünner */
.card,
.card *,
.team-card,
.team-card *,
.empty-news,
.empty-news *,
.downloads-termine-card,
.downloads-termine-card *,
.gsh-area-content,
.gsh-area-content * {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
}

/* Überschriften in den Containern etwas stärker, aber klar dünner als vorher */
.card h1,
.card h2,
.card h3,
.card h4,
.team-card h1,
.team-card h2,
.team-card h3,
.team-card h4,
.empty-news h1,
.empty-news h2,
.empty-news h3,
.empty-news h4,
.downloads-termine-card h1,
.downloads-termine-card h2,
.downloads-termine-card h3,
.downloads-termine-card h4,
.gsh-area-content h1,
.gsh-area-content h2,
.gsh-area-content h3,
.gsh-area-content h4 {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
}

/* Mobile-Menü: Button sicher anklickbar */
@media (max-width: 900px) {
  html body .site-header,
  html body .site-header * {
    pointer-events: auto;
  }

  html body .site-header button.menu-toggle,
  html body .site-header .menu-toggle {
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    position: relative !important;
    z-index: 10050 !important;
  }

  html body .site-header .menu-toggle img,
  html body .site-header .menu-toggle .hamburger-menu-icon {
    pointer-events: none !important;
  }

  /* Geschlossener Grundzustand */
  html body .mobile-panel {
    display: grid !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-16px) !important;
    z-index: 10040 !important;
  }

  /* Alle üblichen geöffneten Zustände */
  html body .mobile-panel.open,
  html body .mobile-panel.is-open,
  html body .mobile-panel.active,
  html body .mobile-panel.show,
  html body .mobile-panel[aria-hidden="false"],
  html body .menu-toggle[aria-expanded="true"] + .mobile-panel,
  html body .menu-toggle[aria-expanded="true"] ~ .mobile-panel,
  html body .site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-panel {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  /*
   * CSS-Fallback:
   * Öffnet das Menü beim Antippen/Fokussieren des Hamburger-Buttons,
   * auch wenn das bisherige JavaScript keine .open-Klasse setzt.
   */
  html body:has(.menu-toggle:focus) .mobile-panel,
  html body:has(.menu-toggle:focus-visible) .mobile-panel,
  html body .mobile-panel:focus-within {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  html body .mobile-panel a {
    pointer-events: auto !important;
  }
}


/* =========================================================
   FINALER MOBILE-MENÜ-FIX: sichtbares Icon = klickbarer Button
   ========================================================= */
@media (max-width: 900px) {
  html body .site-header button.menu-toggle,
  html body .site-header .menu-toggle {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    margin-left: auto !important;
    margin-right: 18px !important;
    margin-top: 0 !important;
    transform: translateY(100px) !important;
    z-index: 20050 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  html body .site-header .menu-toggle img.hamburger-menu-icon,
  html body .site-header .menu-toggle img {
    width: 58px !important;
    height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    transform: none !important;
    pointer-events: none !important;
  }

  html body .mobile-panel {
    top: 180px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    display: grid !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-12px) !important;
    z-index: 20040 !important;
  }

  html body .mobile-panel.open,
  html body .mobile-panel[aria-hidden="false"] {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}

/* Container-Typografie sichtbar dünner */
.card,
.card p,
.card li,
.card a,
.team-card,
.team-card p,
.team-card li,
.team-card a,
.empty-news,
.empty-news p,
.empty-news li,
.empty-news a,
.downloads-termine-card,
.downloads-termine-card p,
.downloads-termine-card li,
.downloads-termine-card a,
.gsh-area-content,
.gsh-area-content p,
.gsh-area-content li,
.gsh-area-content a {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
}

.card h1, .card h2, .card h3, .card h4,
.team-card h1, .team-card h2, .team-card h3, .team-card h4,
.empty-news h1, .empty-news h2, .empty-news h3, .empty-news h4,
.downloads-termine-card h1, .downloads-termine-card h2, .downloads-termine-card h3, .downloads-termine-card h4,
.gsh-area-content h1, .gsh-area-content h2, .gsh-area-content h3, .gsh-area-content h4 {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.card strong,
.team-card strong,
.empty-news strong,
.downloads-termine-card strong,
.gsh-area-content strong {
  font-weight: 500 !important;
}



/* Container-Überschriften wieder Noto Sans */
.card h1,.card h2,.card h3,.card h4,
.team-card h1,.team-card h2,.team-card h3,.team-card h4,
.empty-news h1,.empty-news h2,.empty-news h3,.empty-news h4,
.downloads-termine-card h1,.downloads-termine-card h2,.downloads-termine-card h3,.downloads-termine-card h4,
.gsh-area-content h1,.gsh-area-content h2,.gsh-area-content h3,.gsh-area-content h4{
  font-family:"Noto Sans", Arial, Helvetica, sans-serif !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}


/* =========================================================
   Cookie 400 normal – überall außer Kacheln, Hamburger, Footer
   ========================================================= */

/* Globale Schrift auf Cookie setzen */
html body,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body p,
html body a,
html body span,
html body strong,
html body em,
html body small,
html body li,
html body label,
html body input,
html body textarea,
html body select,
html body button {
  font-family: "Courgette", cursive !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Kacheln ausdrücklich bei Noto Sans belassen */
html body .quicklinks,
html body .quicklinks *,
html body .quicklink,
html body .quicklink *,
html body section.quicklinks[aria-label="Schnellzugriffe"],
html body section.quicklinks[aria-label="Schnellzugriffe"] * {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif !important;
}

/* Hamburger-Button und aufgeklapptes Menü bei Noto Sans belassen */
html body .menu-toggle,
html body .menu-toggle *,
html body .mobile-panel,
html body .mobile-panel * {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif !important;
}

/* Footer vollständig bei Noto Sans belassen */
html body .site-footer,
html body .site-footer *,
html body .footer-grid,
html body .footer-grid *,
html body .footer-bottom,
html body .footer-bottom *,
html body .footer-legal,
html body .footer-legal * {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif !important;
}


/* =========================================================
   FINAL: Courgette 400 normal – Desktop und Mobil
   Ausnahmen: Kacheln, Hamburger-Menü, Footer
   ========================================================= */

/* Hauptüberschriften, Logo und Inhaltsüberschriften */
html body h1,
html body h2,
html body h3,
html body h4,
html body .logo,
html body .site-header .logo > span,
html body .section-title h2,
html body .hero h1,
html body .card h1,
html body .card h2,
html body .card h3,
html body .card h4,
html body .team-card h1,
html body .team-card h2,
html body .team-card h3,
html body .team-card h4,
html body .empty-news h1,
html body .empty-news h2,
html body .empty-news h3,
html body .empty-news h4,
html body .downloads-termine-card h1,
html body .downloads-termine-card h2,
html body .downloads-termine-card h3,
html body .downloads-termine-card h4,
html body .gsh-area-content h1,
html body .gsh-area-content h2,
html body .gsh-area-content h3,
html body .gsh-area-content h4 {
  font-family: "Courgette", cursive !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Mobil ausdrücklich noch einmal absichern */
@media (max-width: 900px) {
  html body h1,
  html body h2,
  html body h3,
  html body h4,
  html body .logo,
  html body .site-header .logo > span,
  html body .section-title h2,
  html body .hero h1,
  html body .card h1,
  html body .card h2,
  html body .card h3,
  html body .card h4,
  html body .team-card h1,
  html body .team-card h2,
  html body .team-card h3,
  html body .team-card h4,
  html body .empty-news h1,
  html body .empty-news h2,
  html body .empty-news h3,
  html body .empty-news h4,
  html body .downloads-termine-card h1,
  html body .downloads-termine-card h2,
  html body .downloads-termine-card h3,
  html body .downloads-termine-card h4,
  html body .gsh-area-content h1,
  html body .gsh-area-content h2,
  html body .gsh-area-content h3,
  html body .gsh-area-content h4 {
    font-family: "Courgette", cursive !important;
    font-weight: 400 !important;
    font-style: normal !important;
  }
}

/* Kacheln bleiben Noto Sans */
html body .quicklinks,
html body .quicklinks *,
html body .quicklink,
html body .quicklink *,
html body section.quicklinks[aria-label="Schnellzugriffe"],
html body section.quicklinks[aria-label="Schnellzugriffe"] * {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif !important;
}

/* Hamburger-Button und Menü bleiben Noto Sans */
html body .menu-toggle,
html body .menu-toggle *,
html body .mobile-panel,
html body .mobile-panel * {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif !important;
}

/* Footer bleibt Noto Sans */
html body .site-footer,
html body .site-footer *,
html body .footer-grid,
html body .footer-grid *,
html body .footer-bottom,
html body .footer-bottom *,
html body .footer-legal,
html body .footer-legal * {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif !important;
}


/* Kein grauer Blitz zwischen den Slides */
.hero{
  background:#0f172a !important;
}

/* =========================================================
   Dynamischer Hero-Slider – beliebig viele Bilder
   ========================================================= */
.hero {
  background: #0f172a !important;
}

.hero-slide {
  animation: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(1.05) !important;
  transition: opacity 1.1s ease-in-out, transform 6s linear !important;
  will-change: opacity, transform;
}

.hero-slide.is-slider-visible {
  visibility: visible !important;
}

.hero-slide.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1.10) !important;
}

@media (max-width: 760px) and (orientation: portrait) {
  .hero-slide-desktop.has-mobile {
    display: none !important;
  }

  .hero-slide-mobile {
    display: block;
  }
}


/* =========================================================
   FINAL: Slider direkt nacheinander – ohne graue Lücke
   ========================================================= */
.hero {
  background: #0f172a !important;
}

.hero-slide {
  animation: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(1.05) !important;
  transition:
    opacity 1s ease-in-out,
    transform 6s linear !important;
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero-slide.is-slider-visible,
.hero-slide.is-outgoing {
  visibility: visible !important;
}

.hero-slide.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1.10) !important;
  z-index: 1 !important;
}

.hero-slide.is-outgoing {
  opacity: 1 !important;
  z-index: 0 !important;
}

/* Das kommende Bild liegt beim Überblenden über dem alten Bild */
.hero-slide.is-slider-visible:not(.is-outgoing) {
  z-index: 1 !important;
}


/* =========================================================
   FINAL: Slider mobil genauso sauber wie Desktop
   ========================================================= */

/*
 * Beide Bildvarianten bleiben technisch im selben Stapel.
 * JavaScript entscheidet, welche Variante aktiv ist.
 * Dadurch verursacht display:none beim Bildwechsel keinen Blitz.
 */
.hero-slide,
.hero-slide-desktop,
.hero-slide-mobile {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(0, 0, 0) scale(1.05) !important;
  transition:
    opacity 1.1s ease-in-out,
    transform 6s linear !important;
  animation: none !important;
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: paint;
}

.hero-slide.is-slider-visible,
.hero-slide.is-active,
.hero-slide.is-outgoing {
  display: block !important;
  visibility: visible !important;
}

.hero-slide.is-active {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1.10) !important;
  z-index: 2 !important;
}

.hero-slide.is-outgoing {
  opacity: 0 !important;
  transform: translate3d(0, 0, 0) scale(1.10) !important;
  z-index: 1 !important;
}

.hero-slide.is-slider-visible:not(.is-active):not(.is-outgoing) {
  opacity: 0 !important;
  z-index: 2 !important;
}

@media (max-width: 900px) {
  .hero {
    background: #0f172a !important;
    overflow: hidden !important;
  }

  .hero-slide,
  .hero-slide-desktop,
  .hero-slide-mobile {
    display: block !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    transform: translate3d(0, 0, 0) scale(1.05) !important;
    -webkit-transform: translate3d(0, 0, 0) scale(1.05) !important;
  }

  .hero-slide.is-active {
    transform: translate3d(0, 0, 0) scale(1.10) !important;
    -webkit-transform: translate3d(0, 0, 0) scale(1.10) !important;
  }

  .hero-slide.is-outgoing {
    transform: translate3d(0, 0, 0) scale(1.10) !important;
    -webkit-transform: translate3d(0, 0, 0) scale(1.10) !important;
  }
}

/* 8.6.21 – Lesbare Typografie:
   Noto Sans für längere Texte, Calistoga nur für Überschriften. */
html body[class][class][class],
html body[class][class][class] p,
html body[class][class][class] li,
html body[class][class][class] a,
html body[class][class][class] span,
html body[class][class][class] small,
html body[class][class][class] label,
html body[class][class][class] input,
html body[class][class][class] textarea,
html body[class][class][class] select,
html body[class][class][class] button {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

html body[class][class][class] strong,
html body[class][class][class] strong *,
html body[class][class][class] b,
html body[class][class][class] b * {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
}

html body[class][class][class] em,
html body[class][class][class] em *,
html body[class][class][class] i,
html body[class][class][class] i * {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif !important;
  font-style: italic !important;
}

html body[class][class][class] h1,
html body[class][class][class] h1 *,
html body[class][class][class] h2,
html body[class][class][class] h2 *,
html body[class][class][class] h3,
html body[class][class][class] h3 *,
html body[class][class][class] h4,
html body[class][class][class] h4 *,
html body[class][class][class] h5,
html body[class][class][class] h5 *,
html body[class][class][class] h6,
html body[class][class][class] h6 *,
html body[class][class][class] .logo,
html body[class][class][class] .logo *,
html body[class][class][class] .section-title h2,
html body[class][class][class] .section-title h2 *,
html body[class][class][class] .hero h1 {
  font-family: "Calistoga", Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* 8.6.19 – Nur die Icons der unteren Bereichsüberschriften auf 130 % */
.section-title .section-heading-icon {
  scale: 1.3 !important;
  transform-origin: center !important;
}

/* 8.6.24 – Links aus den Backend-Inhalten deutlich kennzeichnen */
html body[class][class][class] .gsh-area-content a:not(.btn),
html body[class][class][class] .card a:not(.btn),
html body[class][class][class] .team-card a:not(.btn),
html body[class][class][class] .empty-news a:not(.btn),
html body[class][class][class] .downloads-termine-card a:not(.btn) {
  color: #075ea8 !important;
  font-weight: 700 !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  text-decoration-color: #075ea8 !important;
  border-radius: 4px;
  transition: color .2s ease, background-color .2s ease;
}

html body[class][class][class] .gsh-area-content a:not(.btn):hover,
html body[class][class][class] .card a:not(.btn):hover,
html body[class][class][class] .team-card a:not(.btn):hover,
html body[class][class][class] .empty-news a:not(.btn):hover,
html body[class][class][class] .downloads-termine-card a:not(.btn):hover {
  color: #003d73 !important;
  background-color: rgba(7, 94, 168, .10) !important;
}

html body[class][class][class] .gsh-area-content a:not(.btn):focus-visible,
html body[class][class][class] .card a:not(.btn):focus-visible,
html body[class][class][class] .team-card a:not(.btn):focus-visible,
html body[class][class][class] .empty-news a:not(.btn):focus-visible,
html body[class][class][class] .downloads-termine-card a:not(.btn):focus-visible {
  outline: 3px solid #075ea8 !important;
  outline-offset: 3px !important;
}

/* 8.6.26 – Im gesamten Downloadbereich ausnahmslos nur Textlinks.
   Erfasst auch alte oder vom Editor erzeugte Button-Klassen. */
html body[class][class][class] #downloads a[href],
html body[class][class][class] #downloads a[href][class],
html body[class][class][class] #downloads a[href][style] {
  display: inline !important;
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  color: #075ea8 !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  line-height: inherit !important;
  text-align: inherit !important;
  white-space: normal !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  text-decoration-color: #075ea8 !important;
}

html body[class][class][class] #downloads a[href] *,
html body[class][class][class] #downloads a[href][class] * {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  font-weight: inherit !important;
}

html body[class][class][class] #downloads a[href]::before,
html body[class][class][class] #downloads a[href]::after {
  display: none !important;
  content: none !important;
}

html body[class][class][class] #downloads a[href]:hover {
  color: #003d73 !important;
  background: transparent !important;
}

html body[class][class][class] #downloads .wp-block-button {
  display: block !important;
  margin: .4em 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* 8.6.27 – Impressum, Datenschutz und Barrierefreiheit
   sicher unterhalb des großen Headers beginnen lassen */
html body.page main.legal-page {
  padding-top: 190px !important;
}

html body.page main.legal-page > .section {
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  html body.page main.legal-page {
    padding-top: 110px !important;
  }
}

@media (max-width: 600px) {
  html body.page main.legal-page {
    padding-top: 80px !important;
  }
}

/* 8.6.29 – endgültige Absicherung: kein Hamburger-Button und kein Mobilmenü */
html body[class][class][class] header.site-header .menu-toggle,
html body[class][class][class] header.site-header button.menu-toggle,
html body[class][class][class] .mobile-panel,
html body[class][class][class] #mobile-navigation {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 8.6.32 – Hero-Spruch weiter nach unten */
html body.home .hero .hero-content,
html body.front-page .hero .hero-content {
  transform: translateY(-90px) !important;
}

/* 8.6.32 – Farbiger, mitlaufender Nach-oben-Button */
html body .back-to-top {
  position: fixed !important;
  right: 24px !important;
  bottom: 26px !important;
  width: 58px !important;
  height: 58px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 3px solid #ffd43b !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #20c9d7 0%, #075ea8 72%) !important;
  color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  box-shadow:
    0 12px 30px rgba(7, 94, 168, .32),
    0 4px 10px rgba(15, 23, 42, .18) !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(18px) scale(.92) !important;
  transition:
    opacity .22s ease,
    transform .22s ease,
    box-shadow .22s ease !important;
  -webkit-tap-highlight-color: transparent;
}

html body .back-to-top.visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

html body .back-to-top:hover,
html body .back-to-top:focus-visible {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow:
    0 16px 38px rgba(7, 94, 168, .40),
    0 5px 12px rgba(15, 23, 42, .20) !important;
  outline: 3px solid rgba(255, 255, 255, .92) !important;
  outline-offset: 3px !important;
}

@media (max-width: 900px) {
  html body.home .hero .hero-content,
  html body.front-page .hero .hero-content {
    transform: translateY(10px) !important;
  }

  html body .back-to-top {
    right: 16px !important;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    width: 54px !important;
    height: 54px !important;
    font-size: 30px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .back-to-top {
    transition: none !important;
  }
}

/* 8.6.33 – Safari/iPhone: keine grauen Flächen hinter transparenten Kachel-Icons */
@media (max-width: 768px) {
  .quicklink .kachel-icon img,
  .quicklink .kachel-icon.kachel-icon-3d img {
    filter: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   8.6.38 – Responsive Logo- und Slogan-Steuerung

   Diese Variablen sind künftig die einzige Stelle, an der die
   maximalen Logo-Größen angepasst werden müssen.
   ========================================================= */
:root {
  --gsh-responsive-logo-desktop-width: min(42vw, 520px);
  --gsh-responsive-logo-desktop-height: clamp(100px, 11vw, 170px);
  --gsh-responsive-logo-mobile-width: min(88vw, 360px);
  --gsh-responsive-logo-mobile-height: clamp(92px, 30vw, 132px);
}

/* Desktop und Tablet: Proportionen bleiben immer erhalten. */
html body img.header-school-logo,
html body .site-header img.header-school-logo,
html body .site-header .header-school-logo,
html body a.logo img.header-school-logo,
html body.scrolled img.header-school-logo,
html body.scrolled .site-header img.header-school-logo {
  width: auto !important;
  height: auto !important;
  max-width: var(--gsh-responsive-logo-desktop-width) !important;
  max-height: var(--gsh-responsive-logo-desktop-height) !important;
  object-fit: contain !important;
  object-position: center !important;
  flex: 0 1 auto !important;
  transform: translateY(clamp(22px, 3.8vw, 62px)) !important;
}

/* Lange Slogans bleiben auch auf Desktop innerhalb des Bildschirms. */
@media (min-width: 761px) {
  html body .hero-content h1 {
    width: auto !important;
    max-width: min(92vw, 1450px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(36px, 4.3vw, 64px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.035em !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    text-wrap: balance;
  }
}

/* Mobil: Logo automatisch kleiner und Slogan zeilenweise lesbar. */
@media (max-width: 760px) {
  html body .site-header,
  html body.home .site-header,
  html body.front-page .site-header,
  html body.blog .site-header,
  html body.scrolled .site-header,
  html body .site-header.site-header-home {
    width: 100% !important;
    height: clamp(130px, 38vw, 160px) !important;
    min-height: clamp(130px, 38vw, 160px) !important;
    padding: 8px 12px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  html body .site-header .logo,
  html body .site-header.site-header-home .logo,
  html body .site-header a.logo {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html body img.header-school-logo,
  html body .site-header img.header-school-logo,
  html body .site-header .header-school-logo,
  html body .site-header.site-header-home img.header-school-logo,
  html body.home .site-header.site-header-home img.header-school-logo,
  html body.front-page .site-header.site-header-home img.header-school-logo,
  html body .site-header .logo img,
  html body .site-header a.logo img,
  html body a.logo img.header-school-logo,
  html body.scrolled img.header-school-logo,
  html body.scrolled .site-header img.header-school-logo,
  html body.scrolled .site-header.site-header-home img.header-school-logo {
    display: block !important;
    width: var(--gsh-responsive-logo-mobile-width) !important;
    height: auto !important;
    max-width: var(--gsh-responsive-logo-mobile-width) !important;
    max-height: var(--gsh-responsive-logo-mobile-height) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 0 1 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    position: relative !important;
    transform: translateY(12px) !important;
    filter: drop-shadow(0 8px 16px rgba(7, 23, 51, .18)) !important;
  }

  html body .hero-title-desktop {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  html body .hero-title-mobile {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body.home .hero .hero-content,
  html body.front-page .hero .hero-content,
  html body .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    transform: translateY(-15px) !important;
  }

  html body .hero-content h1 {
    width: min(94vw, 520px) !important;
    max-width: min(94vw, 520px) !important;
    margin: 0 auto !important;
    padding: 0 8px !important;
    font-family: "Calistoga", Georgia, serif !important;
    font-size: clamp(34px, 9.6vw, 44px) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.07 !important;
    letter-spacing: -.03em !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
    text-wrap: balance;
    color: #ffffff !important;
    -webkit-text-stroke: 2px rgba(120, 170, 195, .68) !important;
    text-shadow:
      0 3px 12px rgba(0, 0, 0, .62),
      0 0 3px rgba(120, 170, 195, .72) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Sehr kleine Smartphones: etwas kompakter, ohne unlesbar zu werden. */
@media (max-width: 380px) {
  :root {
    --gsh-responsive-logo-mobile-width: min(86vw, 330px);
    --gsh-responsive-logo-mobile-height: 116px;
  }

  html body .hero-content h1 {
    width: 94vw !important;
    max-width: 94vw !important;
    padding: 0 6px !important;
    font-size: clamp(32px, 9.2vw, 38px) !important;
  }
}

/* =========================================================
   8.6.40 – Einheitliche Icons in den Bereichsüberschriften
   ========================================================= */
:root {
  --gsh-section-heading-icon-size: clamp(76px, 5.2vw, 96px);
  --gsh-section-heading-icon-gap: clamp(18px, 1.4vw, 26px);
}

html body .section-title .heading-with-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--gsh-section-heading-icon-gap) !important;
}

html body .section-title .section-heading-icon,
html body .section-title .section-heading-icon.section-heading-icon-3d,
html body .section-title .section-heading-icon.section-heading-icon-3d.icon-rokt,
html body .section-title .section-heading-icon.section-heading-icon-3d.icon-hector,
html body .section-title .section-heading-icon.section-heading-icon-3d.icon-biss-transfer {
  width: var(--gsh-section-heading-icon-size) !important;
  height: var(--gsh-section-heading-icon-size) !important;
  min-width: var(--gsh-section-heading-icon-size) !important;
  min-height: var(--gsh-section-heading-icon-size) !important;
  max-width: var(--gsh-section-heading-icon-size) !important;
  max-height: var(--gsh-section-heading-icon-size) !important;
  flex: 0 0 var(--gsh-section-heading-icon-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  scale: 1 !important;
  transform: none !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .section-title .section-heading-icon img,
html body .section-title .section-heading-icon.section-heading-icon-3d img,
html body .section-title .section-heading-icon.section-heading-icon-3d.icon-rokt img,
html body .section-title .section-heading-icon.section-heading-icon-3d.icon-hector img,
html body .section-title .section-heading-icon.section-heading-icon-3d.icon-biss-transfer img,
html body .section-title .section-heading-icon svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: drop-shadow(0 7px 11px rgba(15, 23, 42, .14)) !important;
}

@media (max-width: 760px) {
  :root {
    --gsh-section-heading-icon-size: 62px;
    --gsh-section-heading-icon-gap: 14px;
  }

  html body .section-title .heading-with-icon {
    width: 100% !important;
  }
}