/**
 * Generated GS Lotte prototype stylesheet snapshot.
 * Source order: kunden/gslotte/styles/prototype/css/style.css
 * Do not hand-edit design values; rebuild from the hash-bound sources.
 */

/* legacy-source: minExtdev/extensions/min_mandant_gs_lotte/Resources/Public/Css/site.css@130a43e2010cf7de4e8ec0e10f37a45c3de21348 sha256:9291877b3d119a689f620a48bbe37b0962350802ae5117029b7626fe69df12ad */
/* source: kunden/gslotte/styles/prototype/vendor/fonts/fonts.css sha256:e8640e2adf2b65a6950a53eb8f2702787e0e0063489bdad3a91f22f4a43339aa */
/* ============================================
   FONT LOADING - Grundschule Lotte
   Nunito (Google Fonts, OFL License)
   Static files: 400 / 600 / 700 / 900
   Latin only (German + Western European)
   ============================================ */

/* Regular (400) */
@font-face {
    font-family: 'Nunito';
    src: url('../Fonts/Nunito-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* SemiBold (600) */
@font-face {
    font-family: 'Nunito';
    src: url('../Fonts/Nunito-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Bold (700) */
@font-face {
    font-family: 'Nunito';
    src: url('../Fonts/Nunito-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Black (900) */
@font-face {
    font-family: 'Nunito';
    src: url('../Fonts/Nunito-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* source: kunden/gslotte/styles/prototype/css/tokens.css sha256:afbb739f9836ad118b8dc8e9fb69258733e7d2520427832d1261e370aceaef8f */
/**
 * GS Lotte — Redesign KS4 — Design Tokens
 * Entwurf für Grundschule Lotte, Referenz: laurentiusschule-warendorf.de
 * Prefix: gsl- (Grundschule Lotte), isoliert von bestehenden gs-* Klassen
 */

:root {
  /* =====================================================
     6 RUBRIK-FARBEN — Pastell-Palette V5 (2026-05-05)
     Konzept: Buntheit wie laurentiusschule-warendorf.de —
     pastell aber NICHT ausgeblasst, keine dunklen BGs, KEIN Braun.
     4-Ton-System pro Rubrik:
       -soft  = leichter Pastell (Section-Hintergrund hell)
       -fill  = Volltön-Pastell (Kachel-/Section-BG bunter)
       (basis) = Mittelton (Akzent, Border, Hover)
       -dark  = Schrift auf -soft / -fill, AAA-Kontrast
     V4 → V5 Diffs:
       - betreuung-dark #5C3F0E (Braun!) → #5C5024 (oliv-amber)
       - kontakt-dark   #5C2E08 (Braun!) → #8C3811 (terracotta)
       - alle -soft 6-10 Lightness-Punkte gesättigt
       - +6 -fill Tokens für Volltön-Section-BGs
     ===================================================== */

  /* V5+ KRÄFTIGER (Stefan 2026-05-05): kein Grau-Touch, voller Sat,
     AAA-Kontrast mit -dark Token (alle ≥7:1 auf -soft, ≥4.5:1 auf -fill).
     Brand-Anker bleiben unverändert. */

  /* AKTUELLES — Lachs/Korallrot (warmes klares Rosa, kein Beige) */
  --gsl-rubric-aktuelles-soft:    #FAC4B5;  /* sat pastell */
  --gsl-rubric-aktuelles-fill:    #F08C70;  /* knalliger Lachs (Volltön) */
  --gsl-rubric-aktuelles:         #DC624A;  /* Mittel-Ton: Border/Akzent */
  --gsl-rubric-aktuelles-dark:    #6B1E3F;  /* Berry/Burgundy — KEIN Braun */

  /* SCHULKONZEPT — Frisches Grün (KEIN Salbei-Grau) */
  --gsl-rubric-schulkonzept-soft: #C5E090;  /* kraeftig hellgruen */
  --gsl-rubric-schulkonzept-fill: #95C26C;  /* knalliger gruen */
  --gsl-rubric-schulkonzept:      #6FA840;
  --gsl-rubric-schulkonzept-dark: #2E3D1A;  /* Tiefes Olivgrün */

  /* SCHULGEMEINSCHAFT — Türkis (KEIN Tauben-Grau, klares Cyan) */
  --gsl-rubric-schulgemeinschaft-soft: #A6D6E0;  /* kraeftig pastell-tuerkis */
  --gsl-rubric-schulgemeinschaft-fill: #5FBED4;  /* knalliges Tuerkis */
  --gsl-rubric-schulgemeinschaft:      #3399B5;
  --gsl-rubric-schulgemeinschaft-dark: #163A47;  /* Tiefsee */

  /* BETREUUNG — Sonnengelb / Goldamber (klar warm, KEIN Beige) */
  --gsl-rubric-betreuung-soft:    #FCE08F;
  --gsl-rubric-betreuung-fill:    #F0BF35;  /* knalliger Goldamber */
  --gsl-rubric-betreuung:         #D6A210;
  --gsl-rubric-betreuung-dark:    #2E3D1A;  /* Tiefes Olivgrün — KEIN Braun */

  /* KONTAKT — Mandarinen-Orange (klar, KEIN Beige) */
  --gsl-rubric-kontakt-soft:      #FAC8A0;
  --gsl-rubric-kontakt-fill:      #F09F58;  /* knalliges Orange */
  --gsl-rubric-kontakt:           #E08540;
  --gsl-rubric-kontakt-dark:      #1F3D5C;  /* Marine — KEIN Braun */

  /* SERVICE — Periwinkle / klares Blauviolett (KEIN Schiefer-Grau) */
  --gsl-rubric-service-soft:      #BCC9E5;
  --gsl-rubric-service-fill:      #7E97C7;  /* knalliges Periwinkle */
  --gsl-rubric-service:           #5074A8;
  --gsl-rubric-service-dark:      #1F2D52;  /* Mitternachtsblau */

  /* =====================================================
     BRAND-ANKER (unveraendert, NICHT Teil des Rubrik-Systems)
     ===================================================== */
  --gsl-blue:                     #004A99;  /* Logo-Blau: Header, Buttons, Links */
  --gsl-blue-dark:                #003875;  /* Hover/Focus */
  --gsl-orange-brand:             #F29400;  /* Logo-Orange: Akzent, max. 1 pro Sichtbereich, NIE Schrift */

  /* =====================================================
     PASTELL-BLAU (NEU V5, Logo-Familie als helle BG-Variante)
     Verwendung: Hero-Text-Bands oben/unten, Footer-BG.
     Schrift drauf: gsl-blue-pastell-text (AAA 9.5:1)
     ===================================================== */
  --gsl-blue-pastell:        #C2D4E5;  /* Hero-Text-Band, Footer-BG */
  --gsl-blue-pastell-fill:   #A8C0D8;  /* Volltön-Variante */
  --gsl-blue-pastell-text:   #1F3D5C;  /* Schrift auf Pastell-Blau, AAA */
  --gsl-blue-pastell-border: #6B8FAE;  /* Border / Akzent */

  /* =====================================================
     NEUTRALE PALETTE
     ===================================================== */
  --gsl-ink:         #1A1A2E;  /* Haupt-Textfarbe */
  --gsl-ink-soft:    #4A4A5E;
  /* 28.08.2026: von #7A7A8E auf #66667A. Gemessen 4.20 auf Weiss und 3.51
     auf Pastell -- beides unter WCAG AA. Jetzt 5.61 und 4.68. */
  --gsl-ink-muted:   #66667A;
  --gsl-paper:       #FFFFFF;
  /* Stefan 2026-05-05: Section-Ebenen waren "zu weiss / zu grau".
     paper-warm + paper-cool sind jetzt zarte Pastelle (Apricot + Cyan-Blau)
     — nicht zu kraeftig, aber klar farbig statt off-white. */
  --gsl-paper-warm:  #FBEFDD;  /* Zartes Apricot-Pastell (Logo-Orange-Familie) */
  --gsl-paper-cool:  #E2ECF5;  /* Zartes Cyan-Blau-Pastell (Logo-Blau-Familie) */
  --gsl-paper-mint:  #E5F1E0;  /* Zartes Mint-Pastell (Schulkonzept-Familie) */
  --gsl-paper-rose:  #FBE5E0;  /* Zartes Rose-Pastell (Aktuelles-Familie) */
  --gsl-line:        #E5E5EC;
  --gsl-line-soft:   #EFEFF5;

  /* =====================================================
     TYPOGRAFIE — Nunito (nicht Nunito Sans, laut Brief 27.03)
     ===================================================== */
  --gsl-font-sans: 'Nunito', system-ui, -apple-system, sans-serif;

  /* Modulare Skala 1.2 (minor third) mutig nach oben gezogen für Laurentius-Charakter */
  --gsl-fs-xs:   0.875rem;   /* 14px */
  --gsl-fs-sm:   1rem;       /* 16px Body-Minimum */
  --gsl-fs-base: 1.125rem;   /* 18px — etwas größer für Grundschul-Eltern-Zielgruppe */
  --gsl-fs-md:   1.375rem;   /* 22px */
  --gsl-fs-lg:   1.75rem;    /* 28px */
  --gsl-fs-xl:   2.25rem;    /* 36px */
  --gsl-fs-2xl:  3rem;       /* 48px */
  --gsl-fs-3xl:  4rem;       /* 64px */
  --gsl-fs-4xl:  5.5rem;     /* 88px — Display */
  --gsl-fs-5xl:  7rem;       /* 112px — nur Hero-Display */

  --gsl-fw-regular: 400;
  --gsl-fw-medium:  600;
  --gsl-fw-bold:    700;
  --gsl-fw-black:   900;

  --gsl-lh-tight:   1.05;
  --gsl-lh-snug:    1.25;
  --gsl-lh-normal:  1.55;
  --gsl-lh-relaxed: 1.75;

  --gsl-tracking-tight:  -0.02em;
  --gsl-tracking-normal: 0;
  --gsl-tracking-wide:   0.05em;
  --gsl-tracking-caps:   0.12em;

  /* =====================================================
     SPACING — großzügig, für "hohe offene Ebenen"
     ===================================================== */
  --gsl-space-1:  0.25rem;   /* 4px  */
  --gsl-space-2:  0.5rem;    /* 8px  */
  --gsl-space-3:  0.75rem;   /* 12px */
  --gsl-space-4:  1rem;      /* 16px */
  --gsl-space-5:  1.5rem;    /* 24px */
  --gsl-space-6:  2rem;      /* 32px */
  --gsl-space-7:  3rem;      /* 48px */
  --gsl-space-8:  4rem;      /* 64px */
  --gsl-space-9:  6rem;      /* 96px */
  --gsl-space-10: 8rem;      /* 128px — Section-Padding Standard */
  --gsl-space-11: 10rem;     /* 160px — Section-Padding mutig */
  --gsl-space-12: 12rem;     /* 192px — Hero / Feature-Section */

  /* V3: Section-Padding reduziert (war space-10/11/12 = 8/10/12rem — zu viel Weissraum) */
  --gsl-section-pad-y:      clamp(3rem, 6vw, 5rem);
  --gsl-section-pad-y-loud: clamp(4rem, 7vw, 6rem);
  --gsl-section-pad-y-hero: clamp(5rem, 8vw, 7rem);

  /* Hero V4 — Full-Bleed Slideshow + Floating Card */
  --gsl-hero-min-h:         clamp(560px, 80vh, 860px);
  --gsl-hero-panel-bg:      var(--gsl-blue);
  --gsl-hero-panel-color:   var(--gsl-paper);
  /* Legacy-Tokens (nicht mehr genutzt, bleiben für Rückwärtskompatibilität) */
  --gsl-hero-split-desktop: 60fr 40fr;
  --gsl-hero-split-tablet:  55fr 45fr;
  --gsl-fs-hero:            clamp(1.9rem, 1.4rem + 2.6vw, 3rem); /* +20%: max 3rem (48px) — passt in 672px Kasten */

  /* Floating Card — neue V4-Tokens */
  --gsl-hero-card-w:        min(92vw, 672px);         /* +20% auf 560px — passt für H1 bei 3rem */
  --gsl-hero-card-bg:       rgba(0, 74, 153, 0.78);  /* #004A99 auf 78% Alpha — Bild scheint durch */
  --gsl-hero-card-shadow:   0 20px 60px rgba(0, 74, 153, 0.35), 0 4px 16px rgba(0, 0, 0, 0.18);
  --gsl-hero-card-radius:   var(--gsl-radius-md);    /* 1.25rem — nicht zu rund für Schulkontext */
  --gsl-hero-card-pad:      clamp(1.5rem, 2.15vw, 1.9rem) clamp(1.7rem, 2.4vw, 2.15rem);  /* +20% */
  --gsl-hero-card-pad-mob:  var(--gsl-space-5) var(--gsl-space-5);  /* Mobile kompakter */
  --gsl-hero-vignette:      linear-gradient(to top, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 40%);

  /* =====================================================
     LAYOUT / BREAKPOINTS
     ===================================================== */
  --gsl-container:      1440px;
  --gsl-container-wide: 1680px;
  --gsl-container-text: 720px;  /* Prose max-width ~65ch */
  --gsl-gutter:         max(1.5rem, 4vw);

  /* =====================================================
     RADIUS — rund aber nicht albern
     ===================================================== */
  --gsl-radius-xs:   0.375rem;
  --gsl-radius-sm:   0.75rem;
  --gsl-radius-md:   1.25rem;
  --gsl-radius-lg:   2rem;
  --gsl-radius-xl:   3rem;
  --gsl-radius-full: 999px;

  /* =====================================================
     SHADOWS — sanft, nie hart
     ===================================================== */
  --gsl-shadow-sm:  0 2px 8px rgba(26, 26, 46, 0.06);
  --gsl-shadow-md:  0 8px 24px rgba(26, 26, 46, 0.08);
  --gsl-shadow-lg:  0 20px 48px rgba(26, 26, 46, 0.12);
  --gsl-shadow-xl:  0 32px 80px rgba(26, 26, 46, 0.16);
  --gsl-shadow-color-lg: 0 20px 48px rgba(0, 74, 153, 0.18);

  /* =====================================================
     ALPHA TOKENS — für Overlay/Shadow/Tint Contexts
     Ersetzen rgba()-Hardcodes in CSS-Dateien (navigation, footer, home, subhero, layout)
     ===================================================== */
  --gsl-shadow-rgba:         rgba(0, 0, 0, 0.15);     /* nav drawer shadow */
  --gsl-overlay-dark:        rgba(0, 0, 0, 0.4);      /* nav overlay backdrop */
  --gsl-overlay-white-10:    rgba(255, 255, 255, 0.10);
  --gsl-overlay-white-12:    rgba(255, 255, 255, 0.12);
  --gsl-overlay-white-18:    rgba(255, 255, 255, 0.18);
  --gsl-overlay-white-82:    rgba(255, 255, 255, 0.82);
  --gsl-overlay-white-78:    rgba(255, 255, 255, 0.78);
  --gsl-overlay-white-90:    rgba(255, 255, 255, 0.90);
  --gsl-overlay-white-92:    rgba(255, 255, 255, 0.92);
  --gsl-blue-92:             rgba(0, 74, 153, 0.92);   /* home hero overlay */
  --gsl-orange-18:           rgba(242, 148, 0, 0.18);  /* tag badge bg */
  --gsl-orange-55:           rgba(242, 148, 0, 0.55);  /* tag badge border */
  --gsl-orange-35:           rgba(242, 148, 0, 0.35);  /* CTA box-shadow */
  --gsl-shadow-dark-25:      rgba(0, 0, 0, 0.25);      /* home card shadow */
  --gsl-shadow-dark-40:      rgba(0, 0, 0, 0.4);       /* home dot shadow */
  --gsl-white-60:            rgba(255, 255, 255, 0.6);  /* hero btn border */

  /* =====================================================
     MOTION
     ===================================================== */
  --gsl-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --gsl-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --gsl-duration-fast:   180ms;
  --gsl-duration-base:   300ms;
  --gsl-duration-slow:   600ms;

  /* =====================================================
     Z-INDEX
     ===================================================== */
  --gsl-z-header:   100;
  --gsl-z-dropdown: 110;
  --gsl-z-overlay:  200;
  --gsl-z-modal:    300;

  /* =====================================================
     GRID-SYSTEM (asymmetrisch, großzügig)
     ===================================================== */
  --gsl-grid-cols: 12;
  --gsl-grid-gap:  var(--gsl-space-5);

  /* =====================================================
     HEADER-HOEHE — Task 6 (A13: Navi hoeher als erste Entwuerfe)
     Zentrale Custom Property — alle Seiten ziehen daraus.
     Scrumpf-Zustand (is-scrolled): 64px + 4px border-top.
     Standard (nicht-scrolled): 110px min-height + 4px border-top.
     scroll-padding-top setzt :root-Eigenschaft, damit Anker-Sprunge
     nicht hinter dem sticky Header landen.
     ===================================================== */
  --gsl-header-height: 118px;  /* 110px min-height + 4px border-top + 4px Sicherheit */
  --gsl-header-height-scrolled: 72px; /* 64px + 4px border-top + 4px Sicherheit */
}

/* scroll-padding-top: Anker-Sprunge landen nicht hinter dem sticky Header (Task 6) */
html {
  scroll-padding-top: var(--gsl-header-height);
}

/* Reduced Motion Respekt */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gsl-duration-fast: 0ms;
    --gsl-duration-base: 0ms;
    --gsl-duration-slow: 0ms;
  }
}
/* source: kunden/gslotte/styles/prototype/css/base.css sha256:c694c9736fe31580127686d706340ad807e2988fa36ac0d44853b451ad6b1751 */
/**
 * GS Lotte Redesign KS4 — Base / Reset / Typography
 */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* scroll-padding-top via Token in tokens.css (--gsl-header-height) — Task 6 */
}

body {
  margin: 0;
  font-family: var(--gsl-font-sans);
  font-size: var(--gsl-fs-base);
  font-weight: var(--gsl-fw-regular);
  line-height: var(--gsl-lh-normal);
  color: var(--gsl-ink);
  background: var(--gsl-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--gsl-blue);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
  transition: color var(--gsl-duration-fast) var(--gsl-ease-out);
}
a:hover { color: var(--gsl-blue-dark); }

/* =====================================================
   TYPO-SKALA
   ===================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--gsl-font-sans);
  font-weight: var(--gsl-fw-black);
  line-height: var(--gsl-lh-tight);
  letter-spacing: var(--gsl-tracking-tight);
  color: var(--gsl-ink);
  margin: 0 0 var(--gsl-space-4);
  text-wrap: balance;
}

.gsl-display {
  font-size: clamp(var(--gsl-fs-3xl), 7vw + 1rem, var(--gsl-fs-5xl));
  font-weight: var(--gsl-fw-black);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

h1, .gsl-h1 { font-size: clamp(var(--gsl-fs-2xl), 4.5vw + 1rem, var(--gsl-fs-4xl)); }
h2, .gsl-h2 { font-size: clamp(var(--gsl-fs-xl), 3vw + 0.5rem, var(--gsl-fs-3xl)); }
h3, .gsl-h3 { font-size: clamp(var(--gsl-fs-lg), 1.5vw + 1rem, var(--gsl-fs-xl)); font-weight: var(--gsl-fw-bold); }
h4, .gsl-h4 { font-size: var(--gsl-fs-md); font-weight: var(--gsl-fw-bold); }
h5, .gsl-h5 { font-size: var(--gsl-fs-base); font-weight: var(--gsl-fw-bold); }

p { margin: 0 0 var(--gsl-space-5); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.gsl-lead {
  font-size: var(--gsl-fs-md);
  line-height: var(--gsl-lh-relaxed);
  color: var(--gsl-ink-soft);
}

.gsl-caps {
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-caps);
  text-transform: uppercase;
}

/* =====================================================
   RUBRIK-UNTERSTRICH (wiederkehrendes Element)
   Jede Section mit class="gsl-rubric-*" bekommt farbigen Stroke
   ===================================================== */
.gsl-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 0.4em;
}
.gsl-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.5em;
  height: 0.15em;
  background: currentColor;
  border-radius: 999px;
}

/* =====================================================
   LISTEN — KEINE Marker (Stefan 2026-05-05: Spiegelstriche RAUS)
   global: list-style: none, kein ::before, kein padding-left.
   Wenn eine Aufzaehlung-Optik gewuenscht ist: explizit pro Komponente stylen.
   ===================================================== */
ul, ol {
  padding-left: 0;
  list-style: none;
  margin: 0 0 var(--gsl-space-5);
}
ul li, ol li {
  position: relative;
  margin-bottom: var(--gsl-space-3);
  /* Verhindert Element-Overflow bei langen Wortern (Stefan: "elemente nicht rauslaufen") */
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* Spiegelstrich-::before-Marker explizit entfernen falls von vorher noch greift */
ul li::before { content: none; }

/* =====================================================
   FOCUS / A11Y
   ===================================================== */
/* V4.1 Phase C: Focus-Ring auf Brand-Blau (8.61:1, universell sichtbar auf allen Pastell-BGs) */
:focus-visible {
  outline: 3px solid var(--gsl-blue);
  outline-offset: 3px;
  border-radius: var(--gsl-radius-xs);
}

/* V4.1 Phase C: Selection global Brand-Blau (neutral genug fuer alle 6 Pastell-BGs) */
::selection {
  background: var(--gsl-blue);
  color: var(--gsl-paper);
}

.gsl-skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  padding: 1rem 1.5rem;
  background: var(--gsl-ink);
  color: var(--gsl-paper);
  font-weight: var(--gsl-fw-bold);
  border-radius: var(--gsl-radius-sm);
  text-decoration: none;
  z-index: 1000;
  transition: top var(--gsl-duration-fast) var(--gsl-ease-out);
}
.gsl-skip-link:focus-visible { top: 1rem; color: var(--gsl-paper); }

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

/* =====================================================
   SMOOTH-WRAPPER / HEADER-SPACING
   ScrollSmoother (GSAP) setzt #smooth-wrapper auf position:fixed.
   Dadurch verliert der Header (position:sticky ausserhalb) seinen
   natuerlichen scrollenden Ancestor — er ueberlagert den Content-Top.
   Fix: padding-top auf #smooth-content in Hoehe des Headers.
   Hero-Startseite: negatives margin-top kompensiert die Luecke (Full-Bleed).
   ===================================================== */
#smooth-content {
  padding-top: var(--gsl-header-height);
}

/* Startseiten-Hero: KEIN Negative-Margin — Header bleibt sichtbar UEBER dem Hero,
   Hero beginnt klar darunter. Stefan-Korrektur 2026-05-06: Header darf nicht
   im Hero-Bild stehen / Hero-Inhalt verdecken. */

/* =====================================================
   CONTAINER / LAYOUT-HELFER
   ===================================================== */
.gsl-container {
  width: min(var(--gsl-container), 100% - 2 * var(--gsl-gutter));
  margin-inline: auto;
}
.gsl-container-wide {
  width: min(var(--gsl-container-wide), 100% - 2 * var(--gsl-gutter));
  margin-inline: auto;
}
.gsl-container-text {
  width: min(var(--gsl-container-text), 100% - 2 * var(--gsl-gutter));
  margin-inline: auto;
}

.gsl-section {
  padding-block: var(--gsl-section-pad-y);
}
.gsl-section-loud {
  padding-block: var(--gsl-section-pad-y-loud);
}
.gsl-section-hero {
  padding-block: var(--gsl-section-pad-y-hero);
}
/* source: kunden/gslotte/styles/prototype/css/rubrics.css sha256:d16e9fac1df0b210da62d0816d5fe54fb7d3f03c2858d8233ceb742c730ac78a */
/**
 * GS Lotte Redesign KS4 — Rubrik-Farbschemata
 *
 * Jede Rubrik bekommt eine eigene Farbwelt. Wird auf einer Sektion
 * .gsl-rubric-{name} gesetzt, dann kaskadieren --gsl-rubric*, sodass
 * verschachtelte Elemente automatisch zur Rubrik-Farbe greifen.
 *
 * Einsatz:
 *   <section class="gsl-rubric gsl-rubric-schulkonzept">...</section>
 */

/* N2 Fix: #E6EEF7 Hardcode ersetzt durch gsl-paper-cool (naechster Systemtoken) */
.gsl-rubric { /* gemeinsamer Basis-Haken — setzt Standard, den jede Rubrik überschreibt */
  --gsl-rubric:      var(--gsl-blue);
  --gsl-rubric-soft: var(--gsl-paper-cool);
  --gsl-rubric-fill: var(--gsl-paper-cool);  /* Fallback: kein Fill = paper-cool */
  --gsl-rubric-dark: var(--gsl-blue-dark);
}

.gsl-rubric-aktuelles {
  --gsl-rubric:      var(--gsl-rubric-aktuelles);
  --gsl-rubric-soft: var(--gsl-rubric-aktuelles-soft);
  --gsl-rubric-fill: var(--gsl-rubric-aktuelles-fill);
  --gsl-rubric-dark: var(--gsl-rubric-aktuelles-dark);
}

.gsl-rubric-schulkonzept {
  --gsl-rubric:      var(--gsl-rubric-schulkonzept);
  --gsl-rubric-soft: var(--gsl-rubric-schulkonzept-soft);
  --gsl-rubric-fill: var(--gsl-rubric-schulkonzept-fill);
  --gsl-rubric-dark: var(--gsl-rubric-schulkonzept-dark);
}

.gsl-rubric-schulgemeinschaft {
  --gsl-rubric:      var(--gsl-rubric-schulgemeinschaft);
  --gsl-rubric-soft: var(--gsl-rubric-schulgemeinschaft-soft);
  --gsl-rubric-fill: var(--gsl-rubric-schulgemeinschaft-fill);
  --gsl-rubric-dark: var(--gsl-rubric-schulgemeinschaft-dark);
}

.gsl-rubric-betreuung {
  --gsl-rubric:      var(--gsl-rubric-betreuung);
  --gsl-rubric-soft: var(--gsl-rubric-betreuung-soft);
  --gsl-rubric-fill: var(--gsl-rubric-betreuung-fill);
  --gsl-rubric-dark: var(--gsl-rubric-betreuung-dark);
}

.gsl-rubric-kontakt {
  --gsl-rubric:      var(--gsl-rubric-kontakt);
  --gsl-rubric-soft: var(--gsl-rubric-kontakt-soft);
  --gsl-rubric-fill: var(--gsl-rubric-kontakt-fill);
  --gsl-rubric-dark: var(--gsl-rubric-kontakt-dark);
}

.gsl-rubric-service {
  --gsl-rubric:      var(--gsl-rubric-service);
  --gsl-rubric-soft: var(--gsl-rubric-service-soft);
  --gsl-rubric-fill: var(--gsl-rubric-service-fill);
  --gsl-rubric-dark: var(--gsl-rubric-service-dark);
}

/* =====================================================
   BODY-KLASSEN — Seiten-Rubrik-Kontext
   Welle 2a: jede Rubrik-Seite hat eine Body-Klasse.
   Setzt --rubric-accent als globalen Alias für Hero, Sections, CTAs.
   Cascading: sections mit .gsl-rubric--{name} überschreiben local.
   ===================================================== */
body.rubric-aktuelles {
  --rubric-accent:      var(--gsl-rubric-aktuelles);
  --rubric-accent-soft: var(--gsl-rubric-aktuelles-soft);
  --rubric-accent-fill: var(--gsl-rubric-aktuelles-fill);
  --rubric-accent-dark: var(--gsl-rubric-aktuelles-dark);
  --header-accent:      var(--gsl-rubric-aktuelles);
}
body.rubric-schulkonzept {
  --rubric-accent:      var(--gsl-rubric-schulkonzept);
  --rubric-accent-soft: var(--gsl-rubric-schulkonzept-soft);
  --rubric-accent-fill: var(--gsl-rubric-schulkonzept-fill);
  --rubric-accent-dark: var(--gsl-rubric-schulkonzept-dark);
  --header-accent:      var(--gsl-rubric-schulkonzept);
}
body.rubric-schulgemeinschaft {
  --rubric-accent:      var(--gsl-rubric-schulgemeinschaft);
  --rubric-accent-soft: var(--gsl-rubric-schulgemeinschaft-soft);
  --rubric-accent-fill: var(--gsl-rubric-schulgemeinschaft-fill);
  --rubric-accent-dark: var(--gsl-rubric-schulgemeinschaft-dark);
  --header-accent:      var(--gsl-rubric-schulgemeinschaft);
}
body.rubric-betreuung {
  --rubric-accent:      var(--gsl-rubric-betreuung);
  --rubric-accent-soft: var(--gsl-rubric-betreuung-soft);
  --rubric-accent-fill: var(--gsl-rubric-betreuung-fill);
  --rubric-accent-dark: var(--gsl-rubric-betreuung-dark);
  --header-accent:      var(--gsl-rubric-betreuung);
}
body.rubric-kontakt {
  --rubric-accent:      var(--gsl-rubric-kontakt);
  --rubric-accent-soft: var(--gsl-rubric-kontakt-soft);
  --rubric-accent-fill: var(--gsl-rubric-kontakt-fill);
  --rubric-accent-dark: var(--gsl-rubric-kontakt-dark);
  --header-accent:      var(--gsl-rubric-kontakt);
}
body.rubric-service {
  --rubric-accent:      var(--gsl-rubric-service);
  --rubric-accent-soft: var(--gsl-rubric-service-soft);
  --rubric-accent-fill: var(--gsl-rubric-service-fill);
  --rubric-accent-dark: var(--gsl-rubric-service-dark);
  --header-accent:      var(--gsl-rubric-service);
}
body.rubric-startseite {
  --header-accent:      var(--gsl-rubric-aktuelles);
}

/* =====================================================
   RUBRIK-GROSSFLÄCHE V5 — Vollton-BG + Dark-Text
   V4.1: -soft als BG (ausgeblasst).
   V5-Fix: -fill als BG = Vollton-Pastell, satte Rubrik-Farbwelt.
   -dark Schrift bleibt — AAA-Kontrast auf allen -fill getestet.
   Hinweis: betreuung (#E5B847 fill / #5C5024 dark) knapp ≥ 4.5:1
   — falls Lesbarkeit kritisch, auf gsl-ink wechseln.
   ===================================================== */
.gsl-rubric-fill {
  background: var(--gsl-rubric-fill);
  color: var(--gsl-rubric-dark);
}
.gsl-rubric-fill h1,
.gsl-rubric-fill h2,
.gsl-rubric-fill h3,
.gsl-rubric-fill h4,
.gsl-rubric-fill p,
.gsl-rubric-fill li { color: var(--gsl-rubric-dark); }

/* =====================================================
   RUBRIK-BAND — Welle 2a: kein Top-Balken mehr.
   Vollflächiger Soft-Hintergrund statt Balken-Stroke.
   Alter border-top entfernt; Klasse bleibt als Vollfarb-Variante.
   ===================================================== */
.gsl-rubric-band {
  border-top: none;
  background: var(--gsl-rubric-soft);
  color: var(--gsl-rubric-dark);
}

/* =====================================================
   RUBRIK-TEXT — Headlines in Rubrik-Farbe
   Für Kontakt-Orange: Fallback auf Dark (Kontrast)
   ===================================================== */
.gsl-rubric-text { color: var(--gsl-rubric); }
.gsl-rubric-kontakt .gsl-rubric-text { color: var(--gsl-rubric-dark); }

/* =====================================================
   RUBRIK-SOFT-BG — helles Rubrik-Pastel für dezente Flächen
   ===================================================== */
.gsl-rubric-soft-bg {
  background: var(--gsl-rubric-soft);
  color: var(--gsl-ink);
}
/* source: kunden/gslotte/styles/prototype/css/components.css sha256:5a4e62009b4e0fa20614d5859350fa1fd335021790181fd9734354c2f0840903 */
/**
 * GS Lotte Redesign KS4 — Komponenten
 * Buttons, Badges, Cards, Tiles, Slider, Forms
 */

/* =====================================================
   BUTTONS
   ===================================================== */
.gsl-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gsl-space-3);
  padding: 0.9em 1.75em;
  font-family: var(--gsl-font-sans);
  font-size: var(--gsl-fs-sm);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-wide);
  line-height: 1;
  border: 2px solid transparent;
  border-radius: var(--gsl-radius-full);
  cursor: pointer;
  text-decoration: none;
  /* Anchor-default color (var(--gsl-blue)) ueberschreiben damit Modifier
     (.gsl-btn--primary / .gsl-btn--rubric) ihre color durchsetzen */
  color: inherit;
  transition: transform var(--gsl-duration-fast) var(--gsl-ease-out),
              box-shadow var(--gsl-duration-fast) var(--gsl-ease-out),
              background var(--gsl-duration-fast) var(--gsl-ease-out),
              color var(--gsl-duration-fast) var(--gsl-ease-out);
  white-space: nowrap;
}
.gsl-btn:hover { transform: translateY(-2px); }
.gsl-btn:active { transform: translateY(0); }

.gsl-btn--primary {
  background: var(--gsl-blue);
  color: var(--gsl-paper);
}
.gsl-btn--primary:hover {
  background: var(--gsl-blue-dark);
  color: var(--gsl-paper);
  box-shadow: var(--gsl-shadow-color-lg);
}

/* E2 25.08.: Der Mittelton als Flaeche ergab weiss auf gruen mit 2,86:1.
   Flaeche jetzt -dark, damit weisse Schrift traegt. Hover eine Spur heller. */
.gsl-btn--rubric {
  background: var(--gsl-rubric-dark, var(--gsl-blue-dark));
  color: var(--gsl-paper);
}
.gsl-btn--rubric:hover {
  background: var(--gsl-rubric, var(--gsl-blue));
  color: var(--gsl-paper);
}

/* TYPO3-Kontext (min_core A11y-Toolbar) markiert <html> im Ruhezustand mit
   data-contrast="default". Die geteilte Regel [data-contrast] a in
   ContrastModes.css (Spezifitaet 0,1,1) sticht dann jede Einzelklassen-Regel
   hier (0,1,0) aus, obwohl kein Kontrastmodus aktiv ist — der Button-Text
   faellt auf das Kontrast-Link-Blau zurueck. Der Prototyp selbst kennt dieses
   Attribut nicht und ist nicht betroffen; die Verbund-Selektoren unten heben
   die Spezifitaet auf 0,2,0 und schliessen die Luecke ohne !important. */
.gsl-btn.gsl-btn--rubric {
  color: var(--gsl-paper);
}

/* Verbund-Selektor: min_core setzt [data-contrast] a auf Blau und sticht
   eine Einzelklasse aus. Zwei Klassen schlagen das regulaer, ohne important. */
.gsl-btn.gsl-btn--ghost {
  background: transparent;
  color: var(--gsl-ink);
  border-color: var(--gsl-ink);
}
.gsl-btn--ghost:hover {
  background: var(--gsl-ink);
  color: var(--gsl-paper);
}

.gsl-btn--ghost-light {
  background: transparent;
  color: var(--gsl-paper);
  border-color: var(--gsl-paper);
}
.gsl-btn--ghost-light:hover {
  background: var(--gsl-paper);
  color: var(--gsl-ink);
}

.gsl-btn--sm { padding: 0.65em 1.25em; font-size: var(--gsl-fs-xs); }
.gsl-btn--lg { padding: 1.1em 2.25em; font-size: var(--gsl-fs-base); }

/* =====================================================
   BADGE / PILL — "HERZLICH WILLKOMMEN" etc.
   ===================================================== */
.gsl-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--gsl-space-2);
  padding: 0.5em 1em;
  background: var(--gsl-paper);
  color: var(--gsl-ink);
  border-radius: var(--gsl-radius-full);
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-caps);
  text-transform: uppercase;
  box-shadow: var(--gsl-shadow-sm);
}
/* V4.1 #2: pill--rubric auf -dark (Variante b Brand, AAA) */
.gsl-pill--rubric {
  background: var(--gsl-rubric-dark);
  color: var(--gsl-paper);
  box-shadow: none;
}
.gsl-pill--dark {
  background: var(--gsl-ink);
  color: var(--gsl-paper);
}

/* =====================================================
   CARDS
   ===================================================== */
.gsl-card {
  background: var(--gsl-paper);
  border-radius: var(--gsl-radius-md);
  padding: var(--gsl-space-7);
  box-shadow: var(--gsl-shadow-sm);
  transition: transform var(--gsl-duration-base) var(--gsl-ease-out),
              box-shadow var(--gsl-duration-base) var(--gsl-ease-out);
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-4);
}
.gsl-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--gsl-shadow-md);
}

/* =====================================================
   RUBRIK-TILE — 6 große Kacheln auf der Startseite
   Welle 2a: kein Top-Balken mehr — Vollfarbe als BG.
   -soft als Standard-BG (Pastell), -dark Text (AAA).
   ===================================================== */
.gsl-tile {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gsl-space-7);
  padding: var(--gsl-space-7);
  background: var(--gsl-rubric-soft, var(--gsl-paper-cool));  /* Vollfarbe Pastell */
  border-top: none;  /* Welle 2a: Top-Balken entfernt */
  border-radius: var(--gsl-radius-md);
  box-shadow: var(--gsl-shadow-sm);
  text-decoration: none;
  color: var(--gsl-rubric-dark, var(--gsl-ink));  /* Dark-Text auf Pastell AAA */
  min-height: 18rem;
  position: relative;
  overflow: hidden;
  transition: outline-offset var(--gsl-duration-fast) var(--gsl-ease-out);
}
/* Label in Rubrik-Dark (AAA auf -soft BG) */
.gsl-tile__label {
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-caps);
  text-transform: uppercase;
  color: var(--gsl-rubric-dark, var(--gsl-blue));
}
.gsl-tile__title {
  /* Der Prototyp traegt kurze, eigens getextete Zweizeiler. TYPO3 zieht den
     echten Seitentitel - "Schulkonzept" braucht bei 36px mehr als die
     Kachelbreite. Die Groesse folgt deshalb der Kachel, nicht dem Fenster. */
  font-size: clamp(1.375rem, 12cqw, var(--gsl-fs-xl));
  font-weight: var(--gsl-fw-black);
  line-height: var(--gsl-lh-tight);
  color: var(--gsl-rubric-dark, var(--gsl-ink));  /* Dark statt ink — passt zur Rubrik */
  margin: 0;
  /* Der Prototyp traegt hier immer kurze, eigens getextete Zweizeiler
     ("Team & Mitwirkung"). TYPO3s dynamisches Kachelmenue (menu_card_list)
     zieht stattdessen den echten Seitentitel — bei einzelnen langen
     Einwort-Titeln wie "Schulgemeinschaft" reicht die Kachelbreite sonst
     nicht. Silbentrennung statt Bruch mitten im Wort - break-word allein
     ergab "Schulkonzep t" mit einzelnem Buchstaben in der zweiten Zeile. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.gsl-tile__arrow {
  align-self: flex-start;
  width: 3rem; height: 3rem;
  display: inline-grid;
  place-items: center;
  border-radius: var(--gsl-radius-full);
  background: var(--gsl-rubric-fill, var(--gsl-paper-cool));  /* fill statt soft — mehr Kontrast */
  color: var(--gsl-rubric-dark, var(--gsl-blue));
  transition: transform var(--gsl-duration-base) var(--gsl-ease-out);
}
/* Gleiche Luecke wie bei .gsl-btn--rubric oben: [data-contrast] a aus
   ContrastModes.css (min_core) sticht die einzelne .gsl-tile-Regel aus, weil
   die TYPO3-A11y-Toolbar data-contrast="default" schon im Ruhezustand
   setzt. .gsl-tile traegt immer auch .gsl-rubric (siehe Markup) — der
   Verbund-Selektor gewinnt regulaer per Spezifitaet, ohne !important. */
.gsl-tile.gsl-rubric {
  color: var(--gsl-rubric-dark, var(--gsl-ink));
}

/* T05: hover effect removed — tiles are always vollfarbig, no mouse-over change.
   Stefan: "Die Farben der Kacheln und der Überschriften sind gut." (2026-05-05)
   focus-visible kept for keyboard A11y. */
.gsl-tile:focus-visible {
  outline: 3px solid var(--gsl-rubric, var(--gsl-blue));
  outline-offset: 3px;
}

/* =====================================================
   NEWS-CARD
   ===================================================== */
.gsl-news {
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-4);
  background: var(--gsl-paper);
  border-radius: var(--gsl-radius-md);
  overflow: hidden;
  box-shadow: var(--gsl-shadow-sm);
  text-decoration: none;
  color: var(--gsl-ink);
  transition: transform var(--gsl-duration-base) var(--gsl-ease-out),
              box-shadow var(--gsl-duration-base) var(--gsl-ease-out);
}
.gsl-news:hover {
  transform: translateY(-4px);
  box-shadow: var(--gsl-shadow-md);
}
.gsl-news__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}
.gsl-news__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--gsl-duration-slow) var(--gsl-ease-out);
}
.gsl-news:hover .gsl-news__media img { transform: scale(1.04); }
.gsl-news__body {
  padding: var(--gsl-space-5) var(--gsl-space-6) var(--gsl-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-3);
}
/* V4.1 #4: news__label auf -dark BG (Variante b Brand, Pill-Charakter) */
.gsl-news__label {
  align-self: flex-start;
  padding: 0.4em 0.9em;
  background: var(--gsl-rubric-dark, var(--gsl-rubric-aktuelles-dark));
  color: var(--gsl-paper);
  border-radius: var(--gsl-radius-xs);
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-caps);
  text-transform: uppercase;
}
.gsl-news__title {
  font-size: var(--gsl-fs-lg);
  font-weight: var(--gsl-fw-black);
  line-height: var(--gsl-lh-snug);
  color: var(--gsl-ink);
  margin: 0;
}
.gsl-news__meta {
  margin-top: auto;
  font-size: var(--gsl-fs-xs);
  color: var(--gsl-ink-muted);
}

/* =====================================================
   PERSON-CARD (Team)
   ===================================================== */
.gsl-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gsl-space-4);
  padding: var(--gsl-space-7) var(--gsl-space-5);
  background: var(--gsl-paper);
  border-radius: var(--gsl-radius-md);
  box-shadow: var(--gsl-shadow-sm);
}
.gsl-person__photo {
  width: 8rem; height: 8rem;
  border-radius: var(--gsl-radius-full);
  object-fit: cover;
  border: 4px solid var(--gsl-rubric, var(--gsl-blue));
}
.gsl-person__name {
  font-size: var(--gsl-fs-lg);
  font-weight: var(--gsl-fw-black);
  margin: 0;
}
/* V4.1 #5: person__role auf -dark (Caps in Mittel-Ton auf Weiss = FAIL) */
.gsl-person__role {
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-caps);
  text-transform: uppercase;
  color: var(--gsl-rubric-dark, var(--gsl-blue));
}
.gsl-person__bio {
  font-size: var(--gsl-fs-sm);
  color: var(--gsl-ink-soft);
  line-height: var(--gsl-lh-relaxed);
}

/* =====================================================
   STATS — große Zahlen
   ===================================================== */
.gsl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--gsl-space-7);
}
/* V4.1 #6: stat__number auf rubric-accent-dark — zieht aus body.rubric-* Context.
   Fallback: kontakt-dark (Marine) als sicherer Default auf rubric-losen Pages. */
.gsl-stat__number {
  display: block;
  font-size: clamp(var(--gsl-fs-3xl), 6vw, var(--gsl-fs-4xl));
  font-weight: var(--gsl-fw-black);
  line-height: 1;
  letter-spacing: var(--gsl-tracking-tight);
  color: var(--rubric-accent-dark, var(--gsl-rubric-kontakt-dark));
}
/* E2 25.08.: war var(--gsl-paper) — Weiss auf hellem Rubrik-Vollton ergab
   ca. 1,7:1. Alle sechs -fill-Toene sind hell, deshalb erbt die Zahl jetzt
   die dunkle Rubrikfarbe (analog TYPO3-Fix Commit 925b27bdb). */
.gsl-rubric-fill .gsl-stat__number { color: var(--gsl-rubric-dark); }
.gsl-stat__label {
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-caps);
  text-transform: uppercase;
  color: currentColor;
  margin-top: var(--gsl-space-3);
  display: block;
  opacity: 0.85;
}

/* =====================================================
   RUNDE AKTIONS-ICONS (Footer — Laurentius-Signatur)
   ===================================================== */
.gsl-action-icons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gsl-space-5);
  justify-content: center;
}
.gsl-action-icon {
  width: 4rem; height: 4rem;
  display: inline-grid;
  place-items: center;
  border-radius: var(--gsl-radius-full);
  color: var(--gsl-paper);
  transition: transform var(--gsl-duration-base) var(--gsl-ease-out),
              box-shadow var(--gsl-duration-base) var(--gsl-ease-out);
  text-decoration: none;
}
.gsl-action-icon:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: var(--gsl-shadow-md);
  color: var(--gsl-paper);
}
.gsl-action-icon svg { width: 1.75rem; height: 1.75rem; }
/* V4.1 #7: action-icon-* auf -dark (Mittel-Ton + Weiss-Icon = FAIL, Variante b Brand) */
.gsl-action-icon--phone    { background: var(--gsl-rubric-kontakt-dark); }
.gsl-action-icon--calendar { background: var(--gsl-rubric-schulgemeinschaft-dark); }
.gsl-action-icon--mail     { background: var(--gsl-rubric-aktuelles-dark); }
.gsl-action-icon--iserv    { background: var(--gsl-rubric-schulkonzept-dark); }

/* =====================================================
   FORM
   ===================================================== */
.gsl-form { display: grid; gap: var(--gsl-space-5); }
.gsl-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-2);
}
.gsl-form__label {
  font-size: var(--gsl-fs-sm);
  font-weight: var(--gsl-fw-bold);
}
.gsl-form__input,
.gsl-form__textarea {
  font-family: var(--gsl-font-sans);
  font-size: var(--gsl-fs-base);
  padding: var(--gsl-space-4) var(--gsl-space-5);
  border: 2px solid var(--gsl-line);
  border-radius: var(--gsl-radius-sm);
  background: var(--gsl-paper);
  color: var(--gsl-ink);
  transition: border-color var(--gsl-duration-fast) var(--gsl-ease-out);
}
.gsl-form__input:focus,
.gsl-form__textarea:focus {
  outline: none;
  border-color: var(--gsl-blue);
}
.gsl-form__textarea { min-height: 10rem; resize: vertical; }

.gsl-form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--gsl-space-3);
  font-size: var(--gsl-fs-sm);
  line-height: var(--gsl-lh-relaxed);
}
.gsl-form__checkbox input { margin-top: 0.3em; width: 1.25rem; height: 1.25rem; accent-color: var(--gsl-blue); }

/* =====================================================
   BREADCRUMB
   ===================================================== */
.gsl-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gsl-space-3);
  font-size: var(--gsl-fs-sm);
  color: var(--gsl-ink-muted);
  margin-bottom: var(--gsl-space-6);
}
.gsl-breadcrumb a {
  color: var(--gsl-ink-soft);
  text-decoration: none;
}
.gsl-breadcrumb a:hover { color: var(--gsl-blue); text-decoration: underline; }
.gsl-breadcrumb__sep { color: var(--gsl-line); }

/* =====================================================
   DISABLED STATE — V4.1 Phase C (generisch, nicht rubrik-spezifisch)
   ===================================================== */
[disabled],
.is-disabled {
  color: var(--gsl-ink-muted);
  background: var(--gsl-line);
  cursor: not-allowed;
  opacity: 0.6;
}

/* source: kunden/gslotte/styles/prototype/css/layout.css sha256:5bf3b56b05731f4e1612d2f6e1c9261b4020183b8312d228ac11ac0b7ccad7e1 */
/**
 * GS Lotte Redesign KS4 — Layout
 * Asymmetrische Grids, Diagonalen, Versatz, Hero-Layouts
 *
 * Designphilosophie (Laurentiusschule + User-Direktive):
 * "Hohe offene Ebenen" — großzügiges Padding, Versatz erlaubt,
 * diagonale Schnitte als Signatur-Element, asynchrone Grids.
 */

/* =====================================================
   HERO-LAYOUT (Startseite) — Slider + Textpanel-Split
   Großflächige Rubrik-Farbe links, Slider rechts.
   ===================================================== */
.gsl-hero {
  position: relative;
  min-height: 85svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--gsl-rubric-schulgemeinschaft);
  overflow: hidden;
}

.gsl-hero__panel {
  padding: var(--gsl-space-11) var(--gsl-gutter) var(--gsl-space-10);
  padding-left: max(var(--gsl-gutter), calc((100vw - var(--gsl-container)) / 2));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gsl-space-5);
  color: var(--gsl-paper);
  position: relative;
  z-index: 2;
}

.gsl-hero__welcome {
  align-self: flex-start;
  padding: 0.5em 1.2em;
  background: var(--gsl-overlay-white-18);
  backdrop-filter: blur(6px);
  color: var(--gsl-paper);
  border-radius: var(--gsl-radius-full);
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-caps);
  text-transform: uppercase;
  margin-bottom: var(--gsl-space-4);
}

.gsl-hero__title {
  font-size: clamp(var(--gsl-fs-3xl), 6.5vw, var(--gsl-fs-5xl));
  font-weight: var(--gsl-fw-black);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--gsl-paper);
  margin: 0;
}
.gsl-hero__title-accent { color: var(--gsl-rubric-kontakt); }

.gsl-hero__lead {
  font-size: var(--gsl-fs-md);
  line-height: var(--gsl-lh-relaxed);
  max-width: 32em;
  color: var(--gsl-overlay-white-92);
}

.gsl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gsl-space-4);
  margin-top: var(--gsl-space-5);
}

/* Slider-Seite */
.gsl-hero__media {
  position: relative;
  overflow: hidden;
  min-height: 100%;
}
.gsl-hero__media::before {
  /* Diagonaler Schnitt — kein clip-path auf Section, sondern als Pseudo-Maske */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gsl-rubric-schulgemeinschaft);
  clip-path: polygon(0 0, 8% 0, 0 100%, 0 100%);
  z-index: 1;
  pointer-events: none;
}

/* Mobile Hero: Panel über Bild */
@media (max-width: 960px) {
  .gsl-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .gsl-hero__panel {
    padding: var(--gsl-space-9) var(--gsl-gutter) var(--gsl-space-8);
  }
  .gsl-hero__media {
    min-height: 60svh;
    aspect-ratio: 16 / 10;
  }
  .gsl-hero__media::before { display: none; }
}

/* =====================================================
   DIAGONAL-SCHNITT — Signatur-Element für Section-Übergänge
   Nicht auf jeder Section (wäre generisch), nur als Akzent.
   ===================================================== */
.gsl-section--diagonal-bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%);
  padding-bottom: calc(var(--gsl-section-pad-y) + 4vw);
}
.gsl-section--diagonal-top {
  clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
  padding-top: calc(var(--gsl-section-pad-y) + 4vw);
}

/* =====================================================
   ASYMMETRISCHES GRID — "Eindrücke aus Lotte"
   Puzzleartig, 12-Spalten-Basis
   ===================================================== */
.gsl-puzzle-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(8rem, auto);
  gap: var(--gsl-space-4);
}
.gsl-puzzle-item {
  margin: 0; /* 2026-08-25: browser default figure-margin (1em 40px) was never
                reset in base.css, so live prototype rendered with 18px/40px
                gaps around every tile instead of a flush bento grid. */
  overflow: hidden;
  border-radius: var(--gsl-radius-md);
  box-shadow: var(--gsl-shadow-sm);
  background: var(--gsl-line-soft);
}
.gsl-puzzle-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--gsl-duration-slow) var(--gsl-ease-out);
}
.gsl-puzzle-item:hover img { transform: scale(1.05); }

/* 6-Kachel-Grundmuster asymmetrisch */
.gsl-puzzle-item--a { grid-column: span 6; grid-row: span 3; }
.gsl-puzzle-item--b { grid-column: span 3; grid-row: span 2; }
.gsl-puzzle-item--c { grid-column: span 3; grid-row: span 2; }
.gsl-puzzle-item--d { grid-column: span 4; grid-row: span 2; }
.gsl-puzzle-item--e { grid-column: span 5; grid-row: span 2; }
.gsl-puzzle-item--f { grid-column: span 3; grid-row: span 1; }
.gsl-puzzle-item--g { grid-column: span 4; grid-row: span 1; }

@media (max-width: 960px) {
  .gsl-puzzle-grid { grid-template-columns: repeat(6, 1fr); gap: var(--gsl-space-3); }
  .gsl-puzzle-item--a { grid-column: span 6; grid-row: span 2; }
  .gsl-puzzle-item--b,
  .gsl-puzzle-item--c { grid-column: span 3; grid-row: span 1; }
  .gsl-puzzle-item--d,
  .gsl-puzzle-item--e { grid-column: span 6; grid-row: span 1; }
  .gsl-puzzle-item--f,
  .gsl-puzzle-item--g { grid-column: span 6; grid-row: span 1; }
}

/* =====================================================
   FEATURE-NEWS-GRID — 1 groß + 2 klein
   ===================================================== */
.gsl-news-feature-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--gsl-space-5);
}
.gsl-news-feature-grid > :first-child {
  grid-row: span 2;
}
.gsl-news-feature-grid__stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--gsl-space-5);
}
@media (max-width: 860px) {
  .gsl-news-feature-grid { grid-template-columns: 1fr; }
  .gsl-news-feature-grid > :first-child { grid-row: auto; }
}

/* =====================================================
   TILE-GRID — 6 Rubrik-Kacheln (3x2 oder asymmetrisch)
   ===================================================== */
.gsl-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--gsl-space-5);
}

/* Versatz-Variante — jede zweite Kachel leicht nach unten */
.gsl-tile-grid--offset .gsl-tile:nth-child(even) {
  transform: translateY(var(--gsl-space-6));
}
@media (max-width: 960px) {
  .gsl-tile-grid--offset .gsl-tile:nth-child(even) {
    transform: none;
  }
}

/* =====================================================
   SPLIT-SECTION — Text links, Bild rechts (oder umgekehrt)
   Mit Versatz-Option
   ===================================================== */
.gsl-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gsl-space-8);
  align-items: center;
}
.gsl-split--media-first { direction: rtl; }
.gsl-split--media-first > * { direction: ltr; }

.gsl-split--offset .gsl-split__media {
  transform: translateY(var(--gsl-space-7));
}

.gsl-split__media {
  border-radius: var(--gsl-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.gsl-split__media img { width: 100%; height: 100%; object-fit: cover; }
.gsl-split__text { display: flex; flex-direction: column; gap: var(--gsl-space-5); }

@media (max-width: 860px) {
  .gsl-split {
    grid-template-columns: 1fr;
    gap: var(--gsl-space-6);
  }
  .gsl-split--offset .gsl-split__media { transform: none; }
  .gsl-split__media { aspect-ratio: 16 / 10; }
}

/* =====================================================
   PROSE — Text-Detail-Seiten, Legal
   ===================================================== */
/* E5: Schalter "ganze Spalte" — hebt jede Fliesstextbegrenzung darin auf,
   auch die von .gsl-prose selbst. */
.gsl-w-full,
.gsl-w-full .gsl-prose,
.gsl-w-full > .gsl-prose { max-width: none; }

.gsl-prose {
  max-width: var(--gsl-container-text);
  font-size: var(--gsl-fs-base);
  line-height: var(--gsl-lh-relaxed);
  color: var(--gsl-ink-soft);
}
.gsl-prose h2 {
  margin-top: var(--gsl-space-9);
  font-size: var(--gsl-fs-xl);
  color: var(--gsl-rubric, var(--gsl-ink));
}
.gsl-prose h3 {
  margin-top: var(--gsl-space-7);
  font-size: var(--gsl-fs-lg);
}
.gsl-prose a { color: var(--gsl-rubric, var(--gsl-blue)); }

/* =====================================================
   SIDEBAR-LAYOUT (Text-Detail mit Seitenleiste)
   ===================================================== */
.gsl-sidebar-layout {
  display: grid;
  grid-template-columns: 1fr 20rem;
  gap: var(--gsl-space-8);
}
.gsl-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-5);
  position: sticky;
  top: 7rem;
  align-self: start;
}
@media (max-width: 960px) {
  .gsl-sidebar-layout { grid-template-columns: 1fr; }
  .gsl-sidebar { position: static; }
}

/* =====================================================
   DEKO-BLOB — große organische Farbflächen im Hintergrund
   Versatz-Dekor für Section-Identität
   ===================================================== */
.gsl-deko-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}
.gsl-deko-blob--rubric { background: var(--gsl-rubric, var(--gsl-blue)); }

/* Utilities */
.gsl-relative  { position: relative; }
.gsl-overflow-hidden { overflow: hidden; }
.gsl-flow > * + * { margin-top: var(--gsl-space-5); }
.gsl-flow--tight > * + * { margin-top: var(--gsl-space-3); }
.gsl-flow--loose > * + * { margin-top: var(--gsl-space-7); }
/* source: kunden/gslotte/styles/prototype/css/navigation.css sha256:85101e002791981248cab7f9aa98ea5c182383cc6620c4517bdb12394acbd4b1 */
/**
 * GS Lotte Redesign KS4 — Header + Dropdown-Navigation
 */

.gsl-header {
  position: sticky;
  top: 0;
  z-index: var(--gsl-z-header);
  background: var(--gsl-paper);
  border-top: 4px solid var(--header-accent, var(--gsl-rubric-kontakt));
  box-shadow: 0 2px 0 var(--gsl-line-soft);
  transition: box-shadow var(--gsl-duration-base) var(--gsl-ease-out);
}
.gsl-header.is-scrolled {
  box-shadow: var(--gsl-shadow-sm);
}

.gsl-header__inner {
  display: flex;
  align-items: center;
  gap: var(--gsl-space-5);
  padding-block: var(--gsl-space-4);
  min-height: 110px;
  /* Synchrone Animation aller Schrumpf-Properties — 280ms cubic ease-out
     fuer ein einheitliches Gefuehl ohne Zappeln */
  transition:
    min-height 280ms cubic-bezier(0.16, 1, 0.3, 1),
    padding-block 280ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: min-height;
}

/* Schrumpf-Effekt: Header kompakter wenn gescrollt (Stefan 2026-05-05) */
.gsl-header.is-scrolled .gsl-header__inner {
  min-height: 64px;
  padding-block: var(--gsl-space-2);
}

@media (prefers-reduced-motion: reduce) {
  .gsl-header__inner,
  .gsl-logo__img,
  .gsl-iserv-logo {
    transition: none !important;
  }
}

/* Logo: Schriftzug, kein Icon */
.gsl-logo {
  font-family: var(--gsl-font-sans);
  font-size: var(--gsl-fs-md);
  font-weight: var(--gsl-fw-black);
  letter-spacing: var(--gsl-tracking-tight);
  text-decoration: none;
  color: var(--gsl-ink);
  line-height: 1;
  flex-shrink: 0;
}
.gsl-logo span {
  color: var(--gsl-rubric-kontakt);
}

/* Primary-Nav */
.gsl-nav {
  display: flex;
  align-items: center;
  gap: var(--gsl-space-5);
  margin-inline: auto;
  flex-grow: 1;
  justify-content: center;
}

/* Stefan 2026-05-06 (Korrektur): Default-Border farbig (Rubrik-Akzent) im Default-Zustand.
   Hover + Active: zusaetzlicher Pastell-Tint als BG auf .gsl-nav__item. */
.gsl-nav__item {
  position: relative;
  border-radius: var(--gsl-radius-sm);
  /* Smooth BG-Transition fuer Hover/Active-Tint */
  transition: background var(--gsl-duration-fast) var(--gsl-ease-out);
}

/* Hover / Focus / Open / Active: Rubrik-Soft-Pastell als leichter BG-Tint */
.gsl-nav__item:hover,
.gsl-nav__item:focus-within,
.gsl-nav__item.is-open,
.gsl-nav__item.is-active {
  background: var(--gsl-rubric-soft, var(--gsl-blue-pastell));
}

.gsl-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--gsl-space-2);
  padding: var(--gsl-space-3) var(--gsl-space-4);
  /* Task 5: Schrift kleiner (xs=14px statt sm=16px) damit 6 Items in eine Zeile passen */
  font-size: var(--gsl-fs-xs);
  /* uniform dunkelblau (Logo-Blau #004A99), bold 700 */
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-caps);
  text-transform: uppercase;
  color: var(--gsl-blue);
  text-decoration: none;
  position: relative;
  /* Stefan 2026-05-06 Korrektur: Default-Border farbig (Rubrik-Akzent) —
     nicht transparent. Hover/Active: gleiche Farbe (bleibt sichtbar). */
  border-bottom: 4px solid var(--gsl-rubric, var(--gsl-blue));
  transition:
    border-bottom-color var(--gsl-duration-fast) var(--gsl-ease-out),
    color var(--gsl-duration-fast) var(--gsl-ease-out);
}

/* Hover / Focus / Open / Active: Border-Farbe bestaetigt (kein neuer Wert noetig —
   bleibt Rubrik-Akzent). Text-Farbe unveraendert dunkelblau (AAA auf Pastell-BG). */
.gsl-nav__item:hover > .gsl-nav__link,
.gsl-nav__item:focus-within > .gsl-nav__link,
.gsl-nav__item.is-open > .gsl-nav__link,
.gsl-nav__item.is-active > .gsl-nav__link {
  border-bottom-color: var(--gsl-rubric, var(--gsl-blue));
  color: var(--gsl-blue);
}

.gsl-nav__link[aria-haspopup="true"]::before {
  /* Dropdown-Pfeil */
  content: "";
  width: 0.5em; height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-0.1em);
  margin-right: var(--gsl-space-2);
  order: 2;
  transition: transform var(--gsl-duration-fast) var(--gsl-ease-out);
}
.gsl-nav__item:hover .gsl-nav__link[aria-haspopup="true"]::before,
.gsl-nav__item.is-open .gsl-nav__link[aria-haspopup="true"]::before {
  transform: rotate(-135deg) translateY(0.2em);
}

/* =====================================================
   DROPDOWN-PANEL
   Vollfarb-Flaeche, kein Border-Top (Stefan 2026-05-06)
   ===================================================== */
.gsl-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 22rem;
  /* Vollfarbe Rubrik-Fill als Dropdown-BG */
  background: var(--gsl-rubric-fill, var(--gsl-blue-pastell-fill));
  border-radius: var(--gsl-radius-md);
  box-shadow: var(--gsl-shadow-lg);
  padding: var(--gsl-space-5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--gsl-duration-base) var(--gsl-ease-out),
              transform var(--gsl-duration-base) var(--gsl-ease-out),
              visibility 0s linear var(--gsl-duration-base);
  z-index: var(--gsl-z-dropdown);
  /* kein border-top — Stefan 2026-05-06: Farbflaeche ohne oberen Balken */
}
.gsl-nav__item:hover > .gsl-nav__dropdown,
.gsl-nav__item:focus-within > .gsl-nav__dropdown,
.gsl-nav__item.is-open > .gsl-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

.gsl-nav__dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-1);
}
.gsl-nav__dropdown-list li { padding: 0; margin: 0; }
.gsl-nav__dropdown-list li::before { content: none; }

.gsl-nav__dropdown-link {
  display: block;
  padding: var(--gsl-space-3) var(--gsl-space-4);
  font-size: var(--gsl-fs-sm);
  font-weight: var(--gsl-fw-medium);
  /* Auf Vollfarb-BG — dunkelste Rubrik-Farbe fuer AAA-Kontrast */
  color: var(--gsl-rubric-dark, var(--gsl-blue-pastell-text));
  text-decoration: none;
  border-radius: var(--gsl-radius-sm);
  transition: background var(--gsl-duration-fast) var(--gsl-ease-out),
              color var(--gsl-duration-fast) var(--gsl-ease-out);
}
.gsl-nav__dropdown-link:hover,
.gsl-nav__dropdown-link:focus-visible {
  /* Hover: leicht abgesetzter Ton auf Vollfarb-Flaeche — paper mit Transparenz */
  background: var(--gsl-overlay-white-18);
  color: var(--gsl-rubric-dark, var(--gsl-blue-pastell-text));
}

/* T10: Long German words break cleanly in nav links.
   hyphens: auto works because <html lang="de"> is set. */
.gsl-nav__dropdown-link,
.gsl-nav__link,
.gsl-rightnav a,
.gsl-sidebar__link {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* =====================================================
   ISERV-Button (rechts im Header)
   ===================================================== */
.gsl-iserv {
  flex-shrink: 0;
  padding: 0.7em 1.4em;
  background: var(--gsl-blue);
  color: var(--gsl-paper);
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-caps);
  text-transform: uppercase;
  border-radius: var(--gsl-radius-full);
  text-decoration: none;
  transition: background var(--gsl-duration-fast) var(--gsl-ease-out),
              transform var(--gsl-duration-fast) var(--gsl-ease-out);
}
.gsl-iserv:hover {
  background: var(--gsl-blue-dark);
  color: var(--gsl-paper);
  transform: translateY(-2px);
}

/* =====================================================
   BURGER-TOGGLE (Mobile)
   ===================================================== */
.gsl-burger {
  display: none;
  width: 2.75rem; height: 2.75rem;
  background: transparent;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  margin-left: auto;
}
.gsl-burger span {
  display: block;
  width: 100%; height: 3px;
  background: var(--gsl-ink);
  border-radius: 2px;
  transition: transform var(--gsl-duration-base) var(--gsl-ease-out),
              opacity var(--gsl-duration-fast) var(--gsl-ease-out);
}
.gsl-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.gsl-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gsl-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* =====================================================
   MOBILE NAV (slidet von rechts ein)
   ===================================================== */
/* Task 5: Hamburger bei <1024px (war 1100px) — 6 Items passen bei 1024px mit fs-xs */
@media (max-width: 1024px) {
  .gsl-burger { display: flex; }
  .gsl-iserv { display: none; }

  .gsl-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(22rem, 100%);
    background: var(--gsl-paper);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: var(--gsl-space-8) var(--gsl-space-6);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--gsl-duration-base) var(--gsl-ease-out);
    box-shadow: -20px 0 40px var(--gsl-shadow-rgba);
  }
  .gsl-nav.is-open { transform: translateX(0); }

  .gsl-nav__item { width: 100%; border-bottom: 1px solid var(--gsl-line-soft); }
  .gsl-nav__link {
    width: 100%;
    padding: var(--gsl-space-4) 0;
    justify-content: space-between;
    /* Mobile: Border-Bottom-Reset — Trennlinie kommt vom .gsl-nav__item */
    border-bottom: none;
  }
  .gsl-nav__link::after { display: none; }

  .gsl-nav__dropdown {
    position: static;
    transform: none;
    min-width: 0;
    box-shadow: none;
    padding: 0 0 var(--gsl-space-4) var(--gsl-space-5);
    border-top: 0;
    /* Seitlicher Rubrik-Akzent bleibt — zeigt Sub-Hierarchie in Off-Canvas */
    border-left: 3px solid var(--gsl-rubric, var(--gsl-blue));
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .gsl-nav__item.is-open > .gsl-nav__dropdown { display: block; }

  .gsl-nav__mobile-iserv {
    display: inline-flex;
    margin-top: var(--gsl-space-6);
    align-self: flex-start;
    padding: 0.8em 1.6em;
    background: var(--gsl-blue);
    color: var(--gsl-paper);
    border-radius: var(--gsl-radius-full);
    font-size: var(--gsl-fs-sm);
    font-weight: var(--gsl-fw-bold);
    letter-spacing: var(--gsl-tracking-caps);
    text-transform: uppercase;
    text-decoration: none;
  }

  .gsl-backdrop {
    position: fixed;
    inset: 0;
    background: var(--gsl-overlay-dark);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--gsl-duration-base) var(--gsl-ease-out),
                visibility 0s linear var(--gsl-duration-base);
    z-index: calc(var(--gsl-z-header) - 1);
  }
  .gsl-backdrop.is-active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
}

.gsl-nav__mobile-iserv { display: none; }
@media (min-width: 1025px) {
  .gsl-backdrop { display: none !important; }
}

/* =====================================================
   LOGO-BILD (Phase D — MARC-Strukturwelle)
   Header-BG ist --gsl-paper (weiss) — kein Lockup noetig.
   min-height 90px, width auto (Aspect-Ratio bleibt, kein CLS).
   ===================================================== */
.gsl-logo__img {
  min-height: 90px;
  height: auto;
  min-width: 90px;
  max-width: 160px;
  width: auto;
  display: block;
  /* Kein Filter: GS-Lotte-Logo (blauer Kreis) ist auf weissem Header sichtbar */
  /* IDENTISCHE Transition wie Header__inner — synchroner Schrumpf */
  transition:
    min-height 280ms cubic-bezier(0.16, 1, 0.3, 1),
    max-height 280ms cubic-bezier(0.16, 1, 0.3, 1),
    min-width 280ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: min-height;
}

/* Logo schrumpft mit dem Header (Stefan 2026-05-05: not-top → 50px) */
.gsl-header.is-scrolled .gsl-logo__img {
  min-height: 50px;
  max-height: 50px;
  min-width: 50px;
}
.gsl-header.is-scrolled .gsl-iserv-logo {
  max-height: 28px;
  min-width: 80px;
}

/* =====================================================
   ISERV-LOGO-BILD (Phase D — MARC-Strukturwelle)
   Auf weissem Header: eigene Farben des IServ-Logos korrekt sichtbar.
   Hoehe 28px passt in Header-Line-Height.
   ===================================================== */
.gsl-iserv__img {
  height: 28px;
  width: auto;
  display: block;
}

/* Mobile-Nav IServ-Logo */
.gsl-nav__mobile-iserv .gsl-iserv__img {
  height: 24px;
}

/* =====================================================
   ISERV-SVG-LOGO (Desktop-Header-Link)
   SVG braucht kein srcset — Single-File reicht.
   min-width 100px, max-height 36px fuer Header-Fit.
   ===================================================== */
.gsl-iserv-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.gsl-iserv-logo {
  min-width: 100px;
  height: auto;
  max-height: 36px;
  display: block;
  transition:
    max-height 280ms cubic-bezier(0.16, 1, 0.3, 1),
    min-width 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* source: kunden/gslotte/styles/prototype/css/footer.css sha256:d279dca896c667daa2b8a94caf8059764be9b7666f64069a4409c03d2682510b */
/**
 * GS Lotte — Footer
 * T06: Pastell-Blau Kontakt-Section, offene Personen-Liste,
 * 3 Icon-Buttons mit CSS-Tooltip, Partner-Logos, schmale Meta-Leiste.
 */

/* =====================================================
   FOOTER-KONTAKT-SECTION — Pastell-Blau BG
   ===================================================== */
.gsl-footer-contact {
  background: var(--gsl-blue-pastell);
  color: var(--gsl-blue-pastell-text);
  padding-block: var(--gsl-section-pad-y);
}

/* 3-Spalten-Grid — bricht bei 720 px auf 1 Spalte */
.gsl-footer-contact__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gsl-space-8);
  align-items: start;
}
@media (max-width: 960px) {
  .gsl-footer-contact__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .gsl-footer-contact__grid {
    grid-template-columns: 1fr;
    gap: var(--gsl-space-6);
  }
}

/* Spalten-Überschrift */
.gsl-footer-contact__col-title {
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-caps);
  text-transform: uppercase;
  color: var(--gsl-ink-soft, #4A4A5E); /* war die Rahmenfarbe #6B8FAE: 2.25 auf #C2D4E5, jetzt 5.69 */
  margin: 0 0 var(--gsl-space-4);
  /* The school asked for the footer headings without any rule underneath
     (correction list 2026-07, line 111). Spacing keeps the grouping. */
  padding-bottom: var(--gsl-space-3);
}

/* Projektgalerie als Startseiten-Anreisser: Ueberschrift und ein Weg zu allen
   Projekten, damit der Abschnitt nicht ohne Anschluss endet. */
.gsl-proj-galerie__heading {
  font-size: var(--gsl-fs-2xl);
  font-weight: var(--gsl-fw-black);
  color: var(--gsl-ink);
  margin: 0 0 var(--gsl-space-8);
}
.gsl-proj-galerie__more {
  margin: var(--gsl-space-8) 0 0;
}
.gsl-proj-galerie__more-link {
  font-weight: var(--gsl-fw-bold);
  color: var(--gsl-rubric-aktuelles-dark);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}
.gsl-proj-galerie__more-link:hover,
.gsl-proj-galerie__more-link:focus-visible {
  color: var(--gsl-ink);
}

/* Stehende Bloecke unter der Dreierspalte: Anschrift und Erreichbarkeiten.
   Die Schule zeichnet sie linksbuendig untereinander, nicht als weitere
   Rasterspalten (Korrekturliste 2026-07, Zeilen 118-127). */
.gsl-footer-contact__block {
  margin-top: var(--gsl-space-9);
}
.gsl-footer-contact__block-title {
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-caps);
  text-transform: uppercase;
  color: var(--gsl-ink-soft, #4A4A5E); /* war die Rahmenfarbe #6B8FAE: 2.25 auf #C2D4E5, jetzt 5.69 */
  margin: 0 0 var(--gsl-space-4);
}
.gsl-footer-contact__lines {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gsl-footer-contact__line {
  display: flex;
  gap: var(--gsl-space-6);
  font-size: var(--gsl-fs-sm);
  color: var(--gsl-blue-pastell-text);
  /* The school lists these lines tightly under each other, not airy like the
     person entries above - so the block reads as one address. */
  line-height: 1.5;
  margin: 0;
  padding: 0;
}
.gsl-footer-contact__line > span:first-child {
  /* Weekday column keeps the times aligned under each other. */
  min-width: 3.5rem;
}
.gsl-footer-contact__line::before {
  content: none;
}

/* Personen-Liste — offen, keine Karten, keine Boxen */
.gsl-footer-contact__persons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-5);
}
.gsl-footer-contact__persons li {
  padding: 0;
  margin: 0;
}
.gsl-footer-contact__persons li::before {
  content: none;
}

.gsl-footer-contact__person {
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-1);
}

.gsl-footer-contact__name {
  font-size: var(--gsl-fs-md);
  font-weight: var(--gsl-fw-black);
  color: var(--gsl-blue-pastell-text);
  line-height: var(--gsl-lh-tight);
}

.gsl-footer-contact__role {
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-caps);
  text-transform: uppercase;
  color: var(--gsl-blue-pastell-border);
  margin-bottom: var(--gsl-space-1);
}

.gsl-footer-contact__link {
  font-size: var(--gsl-fs-sm);
  color: var(--gsl-blue-pastell-text);
  /* No underline on the addresses (correction list 2026-07, line 112). The
     links stay recognisable through colour plus the hover/focus change below,
     and they sit in a labelled contact block, so they are not loose body text. */
  text-decoration: none;
  word-break: break-all;
  transition: color var(--gsl-duration-fast) var(--gsl-ease-out);
}
.gsl-footer-contact__link:hover,
.gsl-footer-contact__link:focus-visible {
  color: var(--gsl-blue);
}

.gsl-footer-contact__meta {
  font-size: var(--gsl-fs-sm);
  color: var(--gsl-blue-pastell-text);
  opacity: 0.8;
  line-height: var(--gsl-lh-relaxed);
}

/* =====================================================
   ACTION-ICONS — 3 runde Buttons mit CSS-Tooltip
   ===================================================== */
.gsl-footer-contact__icons {
  display: flex;
  justify-content: center;
  gap: var(--gsl-space-7);
  margin-top: var(--gsl-space-10);
  padding-top: var(--gsl-space-8);
  flex-wrap: wrap;
}

/* Einzelner Icon-Button */
.gsl-footer-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gsl-space-2);
  padding: var(--gsl-space-4);
  width: 64px;
  height: 64px;
  border-radius: var(--gsl-radius-full);
  background: var(--gsl-blue-pastell-fill);
  color: var(--gsl-blue-pastell-text);
  text-decoration: none;
  border: 1px solid var(--gsl-blue-pastell-border);
  transition:
    background var(--gsl-duration-fast) var(--gsl-ease-out),
    color var(--gsl-duration-fast) var(--gsl-ease-out),
    transform var(--gsl-duration-fast) var(--gsl-ease-out),
    box-shadow var(--gsl-duration-fast) var(--gsl-ease-out);
  justify-content: center;
}
.gsl-footer-icon:hover,
.gsl-footer-icon:focus-visible {
  background: var(--gsl-blue);
  color: var(--gsl-paper);
  border-color: var(--gsl-blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0 0 0 / 0.15);
}
.gsl-footer-icon:focus-visible {
  outline: 2px solid var(--gsl-focus);
  outline-offset: 3px;
}

/* Icon-Label (sichtbar unter Icon — ergänzend) */
.gsl-footer-icon__label {
  position: absolute;
  bottom: calc(-1 * var(--gsl-space-6));
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--gsl-fs-xs);
  color: var(--gsl-blue-pastell-text);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

/* CSS-Tooltip via data-tooltip-Attribut */
.gsl-footer-icon[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--gsl-blue);
  color: var(--gsl-paper);
  padding: var(--gsl-space-2) var(--gsl-space-3);
  border-radius: var(--gsl-radius-sm);
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-medium);
  white-space: nowrap;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--gsl-duration-fast) var(--gsl-ease-out);
  /* Kleiner Pfeil nach unten */
  filter: drop-shadow(0 2px 4px rgba(0 0 0 / 0.15));
}
.gsl-footer-icon[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--gsl-blue);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--gsl-duration-fast) var(--gsl-ease-out);
  z-index: 10;
}
.gsl-footer-icon:hover::after,
.gsl-footer-icon:hover::before,
.gsl-footer-icon:focus-visible::after,
.gsl-footer-icon:focus-visible::before {
  opacity: 1;
}

/* =====================================================
   PARTNER-LOGOS — unterhalb des Footers
   ===================================================== */
.gsl-partners {
  background: var(--gsl-paper-cool);
  padding-block: var(--gsl-space-9);
  text-align: center;
}
/* Der Weg zum Terminkalender steht direkt bei den Terminen, nicht erst am
   Seitenende (Korrekturliste 2026-07, Zeile 50). */
.gsl-termine__calendar-link {
  margin: var(--gsl-space-7) 0 0;
}
.gsl-termine__calendar-link a {
  font-weight: var(--gsl-fw-bold);
  color: var(--gsl-rubric-aktuelles-dark);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}

/* Satz der Schule ueber den Partnerlogos (Korrekturliste 2026-07, Zeile 64). */
.gsl-partners__claim {
  font-size: var(--gsl-fs-lg);
  font-weight: var(--gsl-fw-bold);
  color: var(--gsl-ink);
  text-transform: uppercase;
  letter-spacing: var(--gsl-tracking-caps);
  margin: 0 0 var(--gsl-space-8);
}

.gsl-partners__heading {
  font-size: var(--gsl-fs-sm);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-caps);
  text-transform: uppercase;
  color: var(--gsl-ink-muted);
  margin: 0 0 var(--gsl-space-7);
}
.gsl-partners__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--gsl-space-7);
  list-style: none;
  margin: 0;
  padding: 0;
}
.gsl-partners__list li {
  padding: 0;
  margin: 0;
}
.gsl-partners__list li::before {
  content: none;
}
.gsl-partners__list img {
  /* Five partners have to share one row: at the previous size the fifth
     dropped to a line of its own and the block read as broken. */
  height: clamp(64px, 7vw, 104px);
  width: auto;
  max-width: 224px;
  object-fit: contain;
  display: block;
  /* Volle Farbe per Default — kein Greyscale (Stefan 2026-05-05: "viel grösser + verlinken") */
  filter: none;
  transition: transform var(--gsl-duration-base) var(--gsl-ease-out);
}
.gsl-partners__list a:hover img,
.gsl-partners__list a:focus-visible img {
  transform: scale(1.06);
}

/* SchuB and AfS share one tile (customer correction 2026-08-28: "that is one
   logo"). A stacked pair sized by height would shrink to an unreadable width,
   so this tile is sized by width and is allowed to run taller. */
.gsl-partners__item--duo img {
  height: auto;
  width: clamp(150px, 16vw, 224px);
  max-width: 224px;
}
@media (max-width: 600px) {
  .gsl-partners__list {
    gap: var(--gsl-space-6);
    justify-content: center;
  }
  .gsl-partners__list img {
    height: 70px;
  }
  .gsl-partners__item--duo img {
    height: auto;
    width: 150px;
  }
}

/* Partner 5 — Platzhalter bis Logo geliefert wird */
.gsl-partners__item--pending {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gsl-partners__pending-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(80px, 9vw, 130px);
  min-width: 160px;
  max-width: 280px;
  border: 2px dashed var(--gsl-line);
  border-radius: var(--gsl-radius-md);
  color: var(--gsl-ink-muted);
  font-size: var(--gsl-fs-xs);
  font-style: italic;
  padding-inline: var(--gsl-space-4);
  text-align: center;
}

/* =====================================================
   FOOTER-META — schmale Copyright-Leiste
   ===================================================== */
.gsl-footer {
  /* Elfenbein auf Wunsch der Schule entfernt (Korrekturschleife 26.08.). */
  background: var(--gsl-paper);
  padding-block: var(--gsl-space-6);
  color: var(--gsl-ink-soft);
  font-size: var(--gsl-fs-sm);
}

.gsl-footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--gsl-space-5);
}

.gsl-footer__meta {
  color: var(--gsl-ink-muted);
  font-size: var(--gsl-fs-xs);
  margin: 0;
}

.gsl-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gsl-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.gsl-footer__legal li {
  padding: 0;
  margin: 0;
}
.gsl-footer__legal li::before {
  content: none;
}
.gsl-footer__legal a {
  font-size: var(--gsl-fs-xs);
  color: var(--gsl-ink-soft);
  text-decoration: none;
  letter-spacing: var(--gsl-tracking-wide);
  transition: color var(--gsl-duration-fast) var(--gsl-ease-out);
}
.gsl-footer__legal a:hover,
.gsl-footer__legal a:focus-visible {
  color: var(--gsl-blue);
  text-decoration: underline;
}
@media (max-width: 480px) {
  .gsl-footer__bar {
    flex-direction: column;
    text-align: center;
  }
  .gsl-footer__legal {
    justify-content: center;
  }
}
/* source: kunden/gslotte/styles/prototype/css/swiper.css sha256:16b37cb43133e4a5705ed133dd6226a2b6c32dcc05c2723199c7bd9d7b41e30f */
/**
 * GS Lotte — Swiper-Customizing
 * Fade-Effekt für Hero-Slider, Bullets in Rubrik-Farbe
 */

.gsl-swiper {
  width: 100%;
  height: 100%;
  min-height: 100%;
}
.gsl-swiper .swiper-slide {
  position: relative;
  overflow: hidden;
}
.gsl-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bullets (kein Pagination-Dot-Standard — wir machen Rechteck-Pills) */
.gsl-swiper .swiper-pagination {
  position: absolute;
  bottom: var(--gsl-space-6);
  left: auto;
  right: var(--gsl-space-6);
  width: auto;
  display: flex;
  gap: var(--gsl-space-3);
  z-index: 10;
}
.gsl-swiper .swiper-pagination-bullet {
  width: 2.5rem;
  height: 4px;
  margin: 0 !important;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.45);
  opacity: 1;
  transition: background var(--gsl-duration-base) var(--gsl-ease-out),
              width var(--gsl-duration-base) var(--gsl-ease-out);
  cursor: pointer;
}
.gsl-swiper .swiper-pagination-bullet-active {
  background: var(--gsl-rubric-kontakt);
  width: 4rem;
}

/* Fade-Effekt Smoothing */
.gsl-swiper.swiper-fade .swiper-slide {
  transition-timing-function: var(--gsl-ease-out);
}
/* source: kunden/gslotte/styles/prototype/css/home.css sha256:f213fd0860f24319db7c697c4636db9644415f9740cec50c83106deba596879f */
/**
 * GS Lotte Redesign KS4 — Home-spezifische Layouts
 * Nur für index.php — Hero (V5), Section-Heads, CTA-Banner, News-Banner
 */

/* =====================================================
   HERO V5 — Full-Bleed Slideshow + Floating Card
   Bild = 100% Hero. Card schwebt links-mittig darüber.
   Ken-Burns: CSS-only via .swiper-slide-active — kein JS-Reset.
   ===================================================== */

/* Hero-Wrapper — Position-Root für die schwebende Card */
.gsl-hero {
  position: relative;
  min-height: var(--gsl-hero-min-h);
  overflow: hidden;
  display: block; /* kein Grid mehr — Media ist Vollbild */
}

/* Full-Bleed Slideshow — nimmt den gesamten Hero */
.gsl-hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Vignette unten — nur unteres Drittel, gibt Card visuellen Boden */
.gsl-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gsl-hero-vignette);
  z-index: 2;
  pointer-events: none;
}

/* Swiper füllt den gesamten Media-Container */
.gsl-hero__swiper {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.gsl-hero__swiper .swiper-slide {
  overflow: hidden;
}

/* Ken-Burns — CSS-only via .swiper-slide-active, kein JS-Reset */
.gsl-hero__swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Basis: scale(1) — startet jeder neue Slide sauber */
  transform: scale(1);
  transition: transform 8s cubic-bezier(0.2, 0, 0.2, 1);
  will-change: transform;
}

/* Nur aktiver Slide zoomt — Swiper setzt .swiper-slide-active automatisch */
.gsl-hero__swiper .swiper-slide-active img {
  transform: scale(1.08);
}

/* Swiper Bullets — unten-mittig, weiß inaktiv / Orange aktiv */
.gsl-hero__swiper .swiper-pagination {
  bottom: var(--gsl-space-5);
  z-index: 15;
}

.gsl-hero__swiper .swiper-pagination-bullet {
  width: 0.75rem;
  height: 0.75rem;
  background: var(--gsl-paper);
  border-radius: var(--gsl-radius-full);
  opacity: 0.55;
  /* Shadow gibt Kontrast auf hellen Bildstellen — kein reines Weiß auf Weiß */
  box-shadow: 0 1px 3px var(--gsl-shadow-dark-40);
  transition:
    width var(--gsl-duration-base) var(--gsl-ease-out),
    opacity var(--gsl-duration-base) var(--gsl-ease-out),
    background-color var(--gsl-duration-base) var(--gsl-ease-out);
  /* Swiper setzt margin per !important — hier mitziehen */
  margin: 0 0.3rem !important;
}

.gsl-hero__swiper .swiper-pagination-bullet-active {
  width: 1.75rem;
  background: var(--gsl-rubric-kontakt);  /* Orange */
  opacity: 1;
  border-radius: var(--gsl-radius-full);
}

/* =====================================================
   HERO NAV-PFEILE — Links/Rechts, Orange auf Hover Blau
   ===================================================== */

/* Swiper-Default-Styles überschreiben (Swiper setzt top/transform selbst) */
.gsl-hero__nav {
  width: 3rem;
  height: 3rem;
  background: var(--gsl-rubric-kontakt);  /* Orange */
  border-radius: var(--gsl-radius-full);
  border: none;
  box-shadow: 0 6px 20px var(--gsl-shadow-dark-25);
  transition:
    background-color var(--gsl-duration-base) var(--gsl-ease-out),
    transform var(--gsl-duration-base) var(--gsl-ease-out);
  z-index: 20;
  cursor: pointer;
  /* Swiper setzt top: 50% + translateY(-50%) — wir setzen nur die horizontale Seite */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.gsl-hero__nav--prev {
  left: clamp(1rem, 2vw, 2rem);
}

.gsl-hero__nav--next {
  right: clamp(1rem, 2vw, 2rem);
}

/* Pfeil-Symbol via ::after — überschreibt Swiper-Default-Chevron */
.gsl-hero__nav::after {
  font-family: swiper-icons, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  color: var(--gsl-paper);
  text-transform: none;
  letter-spacing: 0;
  font-variant: normal;
  line-height: 1;
}

.gsl-hero__nav--prev::after { content: 'prev'; }
.gsl-hero__nav--next::after { content: 'next'; }

.gsl-hero__nav:hover,
.gsl-hero__nav:focus-visible {
  background: var(--gsl-blue);  /* Blau auf Hover */
  transform: translateY(-50%) scale(1.08);
}

.gsl-hero__nav:focus-visible {
  outline: 3px solid var(--gsl-paper);
  outline-offset: 3px;
}

/* Mobile: Pfeile ausblenden — Swipe-Geste intuitiver */
@media (max-width: 767px) {
  .gsl-hero__nav {
    display: none;
  }
}

/* =====================================================
   FLOATING CARD — schwebt links-mittig über dem Bild
   ===================================================== */

.gsl-hero__panel {
  position: absolute;
  left: clamp(1.5rem, 5vw, 5rem);  /* Abstand vom linken Rand */
  top: 50%;
  transform: translateY(-48%);     /* leicht über der Mitte — nicht zu tief, nicht zu hoch */
  z-index: 10;

  /* Shrink-to-content: max-content damit Kasten auf H1-Breite waechst */
  width: max-content;
  max-width: var(--gsl-hero-card-w);
  min-width: 0;
  height: auto;                    /* explizit: kein stretch */
  overflow: visible;               /* war implizit visible, jetzt explizit — kein Clipping */

  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 1.2vw, 1.2rem);  /* +20% Content-Gap */
  padding: var(--gsl-hero-card-pad);

  background: var(--gsl-hero-card-bg);
  color: var(--gsl-hero-panel-color);
  border-radius: var(--gsl-hero-card-radius);
  box-shadow: var(--gsl-hero-card-shadow);

  /* Backdrop-Blur kompensiert reduzierte Opacity — hält Text lesbar */
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

/* Fallback: Browser ohne backdrop-filter (ältere Firefox) erhalten dichtere Farbe */
@supports not (backdrop-filter: blur(1px)) {
  .gsl-hero__panel {
    background: var(--gsl-blue-92);
  }
}

/* Welcome-Pill — Weiss auf Blau-Intro-BG (B3: war --gsl-rubric-kontakt = 3.78:1 FAIL) */
.gsl-hero__welcome {
  display: inline-flex;
  align-items: center;
  gap: var(--gsl-space-2);
  font-family: var(--gsl-font-sans);
  font-size: 0.95rem;              /* +27% von 0.75 — sichtbarer */
  font-weight: var(--gsl-fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gsl-paper);         /* B3-Fix: weiss = 8.61:1 AAA auf --gsl-blue intro-bg */
  background: var(--gsl-orange-18);
  border: 1.5px solid var(--gsl-orange-55);
  border-radius: var(--gsl-radius-full);
  padding: 0.55rem 1.15rem;        /* +20% */
  width: fit-content;
}

/* H1 Hero */
.gsl-hero__title {
  font-family: var(--gsl-font-sans);
  font-size: var(--gsl-fs-hero);
  font-weight: var(--gsl-fw-black);
  line-height: 1.05;
  letter-spacing: var(--gsl-tracking-tight);
  color: var(--gsl-paper);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  overflow-wrap: break-word;
  hyphens: none;
}

/* Jede H1-Zeile bricht getrennt; kein Zusammenkleben zwischen "Gemeinsam Wachsen" und "Mit Freude Lernen" */
.gsl-hero__title-line {
  display: block;
  white-space: normal;
}

/* Orange-Akzent auf "Freude" — 3.1:1 bei Large Text OK (WCAG AA) */
.gsl-hero__title-accent {
  color: var(--gsl-rubric-kontakt);
}

/* Lead-Text */
.gsl-hero__lead {
  font-family: var(--gsl-font-sans);
  font-size: 1.15rem;              /* +20% von 1rem base */
  font-weight: var(--gsl-fw-regular);
  line-height: 1.5;
  color: var(--gsl-overlay-white-90);
  max-width: 34ch;                 /* +20% von 28ch */
  margin: 0;
}

/* CTA-Gruppe — beide CTAs nebeneinander */
.gsl-hero__actions {
  display: flex;
  flex-direction: row;             /* nebeneinander statt untereinander */
  flex-wrap: wrap;
  gap: 0.75rem;                    /* +25% */
  margin-top: 0;
}

/* CTA Primary — Orange gefüllt */
.gsl-hero__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--gsl-space-2);
  font-family: var(--gsl-font-sans);
  font-size: var(--gsl-fs-base);
  font-weight: var(--gsl-fw-bold);
  padding: 0.75rem 1.55rem;         /* kompakt — klebt an Content */
  width: auto;                     /* kein full-width */
  border-radius: var(--gsl-radius-full);
  background: var(--gsl-rubric-kontakt);
  color: var(--gsl-ink);
  text-decoration: none;
  border: 2px solid transparent;
  transition:
    background-color var(--gsl-duration-base) var(--gsl-ease-out),
    transform var(--gsl-duration-base) var(--gsl-ease-out),
    box-shadow var(--gsl-duration-base) var(--gsl-ease-out);
  white-space: nowrap;
}
.gsl-hero__btn-primary:hover,
.gsl-hero__btn-primary:focus-visible {
  background: var(--gsl-rubric-kontakt-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--gsl-orange-35);
}
.gsl-hero__btn-primary:focus-visible {
  outline: 3px solid var(--gsl-paper);
  outline-offset: 3px;
}

/* CTA Secondary — Ghost, weißer Rand */
.gsl-hero__btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--gsl-space-2);
  font-family: var(--gsl-font-sans);
  font-size: var(--gsl-fs-base);
  font-weight: var(--gsl-fw-bold);
  padding: 0.75rem 1.55rem;         /* gleich wie Primary */
  width: auto;                     /* kein full-width */
  border-radius: var(--gsl-radius-full);
  background: transparent;
  color: var(--gsl-paper);
  border: 2px solid var(--gsl-white-60);
  text-decoration: none;
  transition:
    border-color var(--gsl-duration-base) var(--gsl-ease-out),
    background-color var(--gsl-duration-base) var(--gsl-ease-out),
    transform var(--gsl-duration-base) var(--gsl-ease-out);
  white-space: nowrap;
}
.gsl-hero__btn-secondary:hover,
.gsl-hero__btn-secondary:focus-visible {
  border-color: var(--gsl-paper);
  background: var(--gsl-overlay-white-12);
  transform: translateY(-2px);
}
.gsl-hero__btn-secondary:focus-visible {
  outline: 3px solid var(--gsl-paper);
  outline-offset: 3px;
}

/* =====================================================
   HERO RESPONSIVE
   ===================================================== */

/* Tablet 768–1023px: Card etwas schmaler, weniger Abstand */
@media (max-width: 1023px) and (min-width: 768px) {
  .gsl-hero__panel {
    left: var(--gsl-space-7);      /* 48px */
    width: max-content;            /* war: clamp(300px,50vw,420px) — fixe Breite verhindert H1-Wachstum */
    max-width: min(90vw, 520px);
    padding: var(--gsl-space-6) var(--gsl-space-7);
    gap: var(--gsl-space-5);
    transform: translateY(-46%);
  }
}

/* Mobile < 768px: Bild nimmt 65vh, Card sitzt unten-zentriert AUF dem Bild */
@media (max-width: 767px) {
  .gsl-hero {
    min-height: 65vh;
  }

  .gsl-hero__panel {
    /* Unten-zentriert, bleibt INNERHALB des Bildes */
    position: absolute;
    left: 50%;
    top: auto;
    bottom: var(--gsl-space-5);
    transform: translateX(-50%);
    width: 88%;
    max-width: 420px;
    padding: var(--gsl-hero-card-pad-mob);
    gap: var(--gsl-space-5);
  }

  .gsl-hero__title {
    font-size: clamp(1.75rem, 1.4rem + 4vw, 2.5rem);
  }

  .gsl-hero__lead {
    font-size: var(--gsl-fs-sm);
  }
}

/* =====================================================
   REDUCED MOTION
   — kein Ken-Burns, kein Autoplay, keine Hover-Transforms
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  /* Ken-Burns: kein Zoom, keine Transition */
  .gsl-hero__swiper .swiper-slide img,
  .gsl-hero__swiper .swiper-slide-active img {
    transform: none;
    transition: none;
  }
  /* Nav-Pfeile: kein Scale auf Hover */
  .gsl-hero__nav,
  .gsl-hero__nav:hover,
  .gsl-hero__nav:focus-visible {
    transition: none;
    transform: translateY(-50%);
  }
  /* Buttons */
  .gsl-hero__btn-primary:hover,
  .gsl-hero__btn-primary:focus-visible,
  .gsl-hero__btn-secondary:hover,
  .gsl-hero__btn-secondary:focus-visible {
    transform: none;
  }
}

/* =====================================================
   HERO V5 — NEUE BLÖCKE (MARC-Strukturwelle Phase D)
   ===================================================== */

/* gsl-hero__intro — Welcome + H1 oberhalb des Sliders */
.gsl-hero__intro {
  position: relative;
  z-index: 10;
  background: var(--gsl-blue);
  color: var(--gsl-paper);
  padding: var(--gsl-space-8) var(--gsl-gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gsl-space-5);
}

/* gsl-hero__outro — Lead + CTAs unterhalb des Sliders */
.gsl-hero__outro {
  position: relative;
  z-index: 10;
  background: var(--gsl-paper-warm);
  padding: var(--gsl-space-8) var(--gsl-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gsl-space-6);
  text-align: center;
}
.gsl-hero__outro .gsl-hero__lead {
  color: var(--gsl-ink-soft);
  max-width: 52ch;
  margin: 0 auto;
  font-size: var(--gsl-fs-base);
}
.gsl-hero__outro .gsl-hero__actions {
  justify-content: center;
}

/* B2-Fix: btn-secondary im Outro hat paper-warm BG — weiss ist 1.06:1 FAIL.
   Im Outro-Kontext: blaue Schrift + Rand (8.61:1 AAA), kein Ghost-Weiß */
.gsl-hero__outro .gsl-hero__btn-secondary {
  color: var(--gsl-blue);
  border-color: var(--gsl-blue);
  background: transparent;
}
.gsl-hero__outro .gsl-hero__btn-secondary:hover,
.gsl-hero__outro .gsl-hero__btn-secondary:focus-visible {
  background: var(--gsl-blue);
  color: var(--gsl-paper);
  border-color: var(--gsl-blue);
  transform: translateY(-2px);
}

/* gsl-hero ohne position:relative stacking — Hero ist jetzt Flex-Column */
.gsl-hero {
  position: relative;
  min-height: auto; /* Slideshow bestimmt eigene Hoehe */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* gsl-hero__media — Slideshow-Wrapper (eigene Hoehe, kein position:absolute mehr) */
.gsl-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  min-height: 380px;
  max-height: 680px;
  overflow: hidden;
  flex-shrink: 0;
}
.gsl-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gsl-hero-vignette);
  z-index: 2;
  pointer-events: none;
}

/* Anpassung fuer Mobile */
@media (max-width: 767px) {
  .gsl-hero__intro {
    padding: var(--gsl-space-7) var(--gsl-gutter);
    gap: var(--gsl-space-4);
  }
  .gsl-hero__outro {
    padding: var(--gsl-space-7) var(--gsl-gutter);
    gap: var(--gsl-space-5);
  }
  .gsl-hero__media {
    aspect-ratio: 4 / 3;
    min-height: 260px;
    max-height: 360px;
  }
}

/* =====================================================
   RUBRIK-KACHELN — Welle 2a: Top-Balken entfernt.
   Vollfarbe via components.css (keine Überschreibung nötig).
   ===================================================== */
/* .gsl-tile override removed — components.css handles all tile styles */

/* =====================================================
   SECTION-HEAD — Titel + Intro oder Titel + Button
   ===================================================== */
.gsl-section__head {
  margin-bottom: var(--gsl-space-8);
}
.gsl-section__head--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--gsl-space-5);
}
.gsl-section__head--split > :first-child {
  max-width: 40rem;
}

/* =====================================================
   NEWS-SECTION — leichter Papier-Hintergrund, nicht Rubrik-fill
   ===================================================== */
.gsl-news-section {
  background: var(--gsl-paper-warm);
}

/* =====================================================
   CTA-BANNER (vor Footer — Einschulung)
   Welle 2a: border-left entfernt (oranger Balken war Kundenwunsch weg).
   Vollflächiges Kontakt-Soft als Hintergrund — Balken-frei, satt.
   ===================================================== */
.gsl-cta-banner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--gsl-space-7);
  align-items: center;
  padding: var(--gsl-space-9);
  background: var(--gsl-rubric-kontakt-soft);  /* Welle 2a: Vollfarbe Kontakt-Pastell */
  border-radius: var(--gsl-radius-lg);
  border-left: none;  /* Welle 2a: oranger Balken entfernt */
}
.gsl-cta-banner__actions {
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-4);
  align-items: flex-start;
}

@media (max-width: 860px) {
  .gsl-cta-banner {
    grid-template-columns: 1fr;
    padding: var(--gsl-space-7);
    gap: var(--gsl-space-5);
  }
}

/* =====================================================
   RUBRIK-TEXT-HELFER (Caps über Headline)
   V4.1 #8: auf -dark (Mittel-Ton = 2-3:1 FAIL)
   ===================================================== */
.gsl-rubric-caps {
  color: var(--gsl-rubric-dark, var(--gsl-blue));
}
/* source: kunden/gslotte/styles/prototype/css/subhero.css sha256:54b9fcddce01b2b82317224e48d96833f12ccf3c5e5a10b0a4a69cec2995db7a */
/**
 * GS Lotte — Sub-Hero: Polaroid-Überlapp (Variante A)
 * Rubrik-Farbfläche 55% links (Text) + Foto rechts 45%.
 * An der Kante: rotiertes Polaroid-Kärtchen überlappt beide Zonen.
 *
 * V4.1 Phase C: ALLE 6 Rubriken auf -dark (Vollton AAA), Mittel-Ton-BG war FAIL.
 * V3-Override für aktuelles+schulkonzept entfernt (jetzt redundant — alle nutzen -dark).
 */

/* =====================================================
   SUBHERO WRAPPER
   ===================================================== */
/* V4.1 Phase C: Basis auf -dark (alle 6 Rubriken, AAA). V3-Overrides entfernt. */
.gsl-subhero {
  position:    relative;
  overflow:    visible;           /* Polaroid darf nach unten ragen */
  min-height:  clamp(260px, 34vw, 420px);
  display:     grid;
  grid-template-columns: 55fr 45fr;
  background:  var(--gsl-rubric-dark, var(--gsl-blue));
}

/* Legal-Hero (kein Rubrik-Modifier) → Primär-Blau */
.gsl-subhero--legal { background: var(--gsl-blue); }

/* =====================================================
   LINKE ZONE — Farbe + Text
   ===================================================== */
.gsl-subhero__text {
  position:   relative;
  z-index:    2;
  padding:    var(--gsl-section-pad-y-hero) var(--gsl-gutter)
              var(--gsl-section-pad-y-hero) var(--gsl-gutter);
  display:    flex;
  flex-direction: column;
  justify-content: center;
}

/* Breadcrumb-Farbe */
.gsl-subhero .gsl-breadcrumb,
.gsl-subhero .gsl-breadcrumb a {
  color: var(--gsl-overlay-white-82);
}
.gsl-subhero .gsl-breadcrumb a:hover {
  color: var(--gsl-paper);
}

/* Caps-Label */
.gsl-subhero .gsl-caps {
  color:        var(--gsl-overlay-white-78);
  margin-top:   var(--gsl-space-5);
  display:      block;
}

/* H1 */
.gsl-subhero h1.gsl-display {
  color:        var(--gsl-paper);
  margin-top:   var(--gsl-space-4);
  /* Kompakter als Startseite — Platz ist knapper */
  font-size:    clamp(1.75rem, 2.5vw + 0.5rem, 3rem);
}

/* Lead */
.gsl-subhero .gsl-lead {
  color:      var(--gsl-overlay-white-90);
  max-width:  36rem;
  margin-top: var(--gsl-space-5);
  font-size:  clamp(var(--gsl-fs-sm), 1.8vw, var(--gsl-fs-base));
}

/* =====================================================
   RECHTE ZONE — Haupt-Foto
   ===================================================== */
.gsl-subhero__image {
  position:   relative;
  overflow:   hidden;
}

.gsl-subhero__image img.gsl-subhero__photo {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  object-position: center 30%;  /* Kinder-Gesichter tendenziell oben */
  display:     block;
}

/* =====================================================
   POLAROID-KÄRTCHEN — überlappt die Kante
   ===================================================== */
.gsl-subhero__polaroid {
  position:     absolute;
  /* Sitzt an der Grenze zwischen Text- und Bildzone */
  left:         calc(55% - 110px);   /* 110px = halbe Polaroid-Breite = 220px/2 */
  top:          50%;
  transform:    translateY(-50%) rotate(-4deg);
  z-index:      10;
  width:        220px;

  /* Polaroid-Rahmen */
  background:   var(--gsl-paper);
  padding:      10px 10px 36px 10px;
  box-shadow:   var(--gsl-shadow-xl);
  border-radius: 3px;

  /* Keine Rotation bei prefers-reduced-motion */
}

@media (prefers-reduced-motion: no-preference) {
  .gsl-subhero__polaroid {
    transition: transform var(--gsl-duration-slow) var(--gsl-ease-out);
  }
  .gsl-subhero__polaroid:hover {
    transform: translateY(-50%) rotate(-1deg) scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gsl-subhero__polaroid {
    transform: translateY(-50%) rotate(0deg);
  }
}

.gsl-subhero__polaroid img {
  width:        100%;
  aspect-ratio: 4 / 3;
  object-fit:   cover;
  display:      block;
}

/* Polaroid-Beschriftungsbereich (unterer weißer Streifen) */
.gsl-subhero__polaroid::after {
  content:     '';
  display:     block;
  height:      26px;
}

/* =====================================================
   TABLET — 768–1023px: 50/50 Split, kein Polaroid
   ===================================================== */
@media (max-width: 1023px) {
  .gsl-subhero {
    grid-template-columns: 1fr 1fr;
    min-height: clamp(200px, 28vw, 320px);
  }

  .gsl-subhero__polaroid {
    display: none;        /* Zu eng bei 50/50 */
  }

  .gsl-subhero h1.gsl-display {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  }

  .gsl-subhero .gsl-lead {
    font-size: var(--gsl-fs-sm);
  }
}

/* =====================================================
   MOBILE — < 768px: Stacked (Text oben, Foto unten als 32vh-Streifen)
   ===================================================== */
@media (max-width: 767px) {
  .gsl-subhero {
    grid-template-columns: 1fr;
    grid-template-rows:    auto 32vh;
    min-height:            unset;
    overflow:              hidden;   /* Polaroid weg, kein overflow nötig */
  }

  .gsl-subhero__text {
    order:      1;
    padding:    clamp(1.75rem, 5vw, 2.5rem) var(--gsl-gutter);
  }

  .gsl-subhero__image {
    order:      2;
    width:      100%;
    height:     100%;  /* Grid-Reihe definiert Höhe */
  }

  .gsl-subhero__image img.gsl-subhero__photo {
    object-position: center 40%;
  }

  .gsl-subhero__polaroid {
    display:    none;
  }

  .gsl-subhero h1.gsl-display {
    font-size: clamp(1.5rem, 6vw, 2rem);
    margin-top: var(--gsl-space-3);
  }

  .gsl-subhero .gsl-caps {
    margin-top: var(--gsl-space-3);
  }

  .gsl-subhero .gsl-lead {
    margin-top: var(--gsl-space-3);
    font-size:  var(--gsl-fs-sm);
  }
}
/* source: kunden/gslotte/styles/prototype/css/sidebar.css sha256:dc553179d8a56bd1cd6c04ed2ef43bc7fba8a943c139dc6938a6b9ba04a8e01f */
/**
 * sidebar.css — Right-Sidebar Subpage-Navigation
 *
 * Component: .gsl-rightnav (sticky sidebar with sibling-page links)
 * Layout:    .gsl-page-with-sidebar (2-column grid wrapper for subpages)
 *
 * Tokens used: --gsl-paper-cool, --gsl-space-*, --gsl-radius-*, --gsl-fs-md,
 *              --gsl-fw-bold, --gsl-blue, --gsl-blue-pastell, --gsl-blue-pastell-text,
 *              --gsl-ink, --gsl-paper, --gsl-duration-fast
 */

/* ─── Sidebar Container ──────────────────────────────────────────────────── */

.gsl-rightnav {
  background: var(--gsl-paper-cool);
  padding: var(--gsl-space-5);
  border-radius: var(--gsl-radius-md);
  position: sticky;
  top: var(--gsl-space-4);
}

/* ─── Section Heading ────────────────────────────────────────────────────── */

.gsl-rightnav__title {
  font-size: var(--gsl-fs-md);
  font-weight: var(--gsl-fw-bold);
  color: var(--gsl-blue);
  margin-bottom: var(--gsl-space-3);
  padding-bottom: var(--gsl-space-2);
  border-bottom: 2px solid var(--gsl-blue-pastell);
}

/* ─── Link List ──────────────────────────────────────────────────────────── */

.gsl-rightnav__list {
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-1);
}

.gsl-rightnav__link {
  display: block;
  padding: var(--gsl-space-2) var(--gsl-space-3);
  color: var(--gsl-ink);
  text-decoration: none;
  border-radius: var(--gsl-radius-sm);
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  transition: background var(--gsl-duration-fast);
}

.gsl-rightnav__link:hover,
.gsl-rightnav__link:focus-visible {
  background: var(--gsl-blue-pastell);
  color: var(--gsl-blue-pastell-text);
  outline: 2px solid var(--gsl-blue);
  outline-offset: 2px;
}

/* ─── Active State ───────────────────────────────────────────────────────── */

.gsl-rightnav__item.is-active .gsl-rightnav__link {
  background: var(--gsl-blue);
  color: var(--gsl-paper);
  font-weight: var(--gsl-fw-bold);
}

/* ─── Page Layout: 2-column with Sidebar ────────────────────────────────── */

.gsl-page-with-sidebar {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--gsl-space-7);
  align-items: start;
}

/* Collapse to single column on narrow screens */
@media (max-width: 1024px) {
  .gsl-page-with-sidebar {
    grid-template-columns: 1fr;
  }

  .gsl-rightnav {
    position: static;
    margin-top: var(--gsl-space-5);
  }
}
/* source: kunden/gslotte/styles/prototype/css/utility.css sha256:5e1267863151357519911b316b44e2c5d70c46f170824bfae232c9da9601e6d2 */
/**
 * GS Lotte — Utility Classes
 * Replaces inline style="..." attributes across prototype PHP files.
 * Generated 2026-05-05 as part of Stream C inline-style refactor.
 *
 * Convention: gsl-{property}-{value} or gsl-{shorthand}--{semantic}
 * All values reference tokens from tokens.css — no hardcodes.
 *
 * @layer mandant — lowest specificity, overridable by component styles.
 */

@layer mandant {

  /* ===================================================
     SPACING — Margin Top (gsl-mt-N)
     =================================================== */
  .gsl-mt-0  { margin-top: 0; }
  .gsl-mt-1  { margin-top: var(--gsl-space-1); }
  .gsl-mt-2  { margin-top: var(--gsl-space-2); }
  .gsl-mt-3  { margin-top: var(--gsl-space-3); }
  .gsl-mt-4  { margin-top: var(--gsl-space-4); }
  .gsl-mt-5  { margin-top: var(--gsl-space-5); }
  .gsl-mt-6  { margin-top: var(--gsl-space-6); }
  .gsl-mt-7  { margin-top: var(--gsl-space-7); }
  .gsl-mt-8  { margin-top: var(--gsl-space-8); }
  .gsl-mt-9  { margin-top: var(--gsl-space-9); }
  .gsl-mt-10 { margin-top: var(--gsl-space-10); }
  .gsl-mt-11 { margin-top: var(--gsl-space-11); }
  .gsl-mt-12 { margin-top: var(--gsl-space-12); }

  /* ===================================================
     SPACING — Margin Bottom (gsl-mb-N)
     =================================================== */
  .gsl-mb-0  { margin-bottom: 0; }
  .gsl-mb-1  { margin-bottom: var(--gsl-space-1); }
  .gsl-mb-2  { margin-bottom: var(--gsl-space-2); }
  .gsl-mb-3  { margin-bottom: var(--gsl-space-3); }
  .gsl-mb-4  { margin-bottom: var(--gsl-space-4); }
  .gsl-mb-5  { margin-bottom: var(--gsl-space-5); }
  .gsl-mb-6  { margin-bottom: var(--gsl-space-6); }
  .gsl-mb-7  { margin-bottom: var(--gsl-space-7); }
  .gsl-mb-8  { margin-bottom: var(--gsl-space-8); }
  .gsl-mb-9  { margin-bottom: var(--gsl-space-9); }
  .gsl-mb-10 { margin-bottom: var(--gsl-space-10); }

  /* ===================================================
     SPACING — Margin Inline Auto
     =================================================== */
  .gsl-mx-auto { margin-inline: auto; }

  /* ===================================================
     SPACING — Margin Block (shorthand, gsl-my-N)
     =================================================== */
  .gsl-my-8 { margin-block: var(--gsl-space-8); }

  /* ===================================================
     SPACING — Padding (gsl-p-N, gsl-pt-N, gsl-pb-N)
     =================================================== */
  .gsl-p-0  { padding: 0; }
  .gsl-p-3  { padding: var(--gsl-space-3); }
  .gsl-p-4  { padding: var(--gsl-space-4); }
  .gsl-p-5  { padding: var(--gsl-space-5); }
  .gsl-p-6  { padding: var(--gsl-space-6); }
  .gsl-p-7  { padding: var(--gsl-space-7); }

  .gsl-pt-4 { padding-top: var(--gsl-space-4); }
  .gsl-pb-4 { padding-bottom: var(--gsl-space-4); }

  /* ===================================================
     TEXT COLOR — Rubric Darks
     =================================================== */
  .gsl-text--rubric-aktuelles      { color: var(--gsl-rubric-aktuelles-dark); }
  .gsl-text--rubric-schulkonzept   { color: var(--gsl-rubric-schulkonzept-dark); }
  .gsl-text--rubric-schulgemeinschaft { color: var(--gsl-rubric-schulgemeinschaft-dark); }
  .gsl-text--rubric-betreuung      { color: var(--gsl-rubric-betreuung-dark); }
  .gsl-text--rubric-betreuung-mid  { color: var(--gsl-rubric-betreuung); }
  .gsl-text--rubric-kontakt        { color: var(--gsl-rubric-kontakt-dark); }
  .gsl-text--rubric-service        { color: var(--gsl-rubric-service-dark); }

  /* Neutral text colors */
  .gsl-text--ink       { color: var(--gsl-ink); }
  .gsl-text--ink-soft  { color: var(--gsl-ink-soft); }
  .gsl-text--ink-muted { color: var(--gsl-ink-muted); }
  .gsl-text--paper     { color: var(--gsl-paper); }
  .gsl-text--blue      { color: var(--gsl-blue); }

  /* ===================================================
     BACKGROUND
     =================================================== */
  .gsl-bg--paper-cool  { background: var(--gsl-paper-cool); }
  .gsl-bg--paper-warm  { background: var(--gsl-paper-warm); }
  .gsl-bg--paper-mint  { background: var(--gsl-paper-mint); }
  .gsl-bg--paper-rose  { background: var(--gsl-paper-rose); }
  .gsl-bg--paper       { background: var(--gsl-paper); }
  .gsl-bg--blue        { background: var(--gsl-blue); }

  /* Soft (pastell) — für Cards/Tiles/Highlight-Boxen innerhalb von Sections */
  .gsl-bg--rubric-aktuelles-soft      { background: var(--gsl-rubric-aktuelles-soft); }
  .gsl-bg--rubric-schulkonzept-soft   { background: var(--gsl-rubric-schulkonzept-soft); }
  .gsl-bg--rubric-schulgemeinschaft-soft { background: var(--gsl-rubric-schulgemeinschaft-soft); }
  .gsl-bg--rubric-betreuung-soft      { background: var(--gsl-rubric-betreuung-soft); }

  /* Dark BG — IMMER weisser Text (Stefan 2026-05-05: Kontrast-Pflicht).
     !important verhindert Cascade-Bugs durch anchor-default oder nav-Cascade. */
  .gsl-bg--rubric-aktuelles-dark,
  .gsl-bg--rubric-schulgemeinschaft-dark,
  .gsl-bg--rubric-betreuung-dark,
  .gsl-bg--rubric-kontakt-dark,
  .gsl-bg--rubric-service-dark {
    color: var(--gsl-paper) !important;
  }
  .gsl-bg--rubric-aktuelles-dark a,
  .gsl-bg--rubric-schulgemeinschaft-dark a,
  .gsl-bg--rubric-betreuung-dark a,
  .gsl-bg--rubric-kontakt-dark a,
  .gsl-bg--rubric-service-dark a,
  a.gsl-bg--rubric-aktuelles-dark,
  a.gsl-bg--rubric-schulgemeinschaft-dark,
  a.gsl-bg--rubric-betreuung-dark,
  a.gsl-bg--rubric-kontakt-dark,
  a.gsl-bg--rubric-service-dark {
    color: var(--gsl-paper) !important;
  }
  .gsl-bg--rubric-aktuelles-dark      { background: var(--gsl-rubric-aktuelles-dark); }
  .gsl-bg--rubric-schulgemeinschaft-dark { background: var(--gsl-rubric-schulgemeinschaft-dark); }
  .gsl-bg--rubric-betreuung-dark      { background: var(--gsl-rubric-betreuung-dark); }
  .gsl-bg--rubric-kontakt-dark        { background: var(--gsl-rubric-kontakt-dark); }
  .gsl-bg--rubric-service-dark        { background: var(--gsl-rubric-service-dark); }

  /* Fill (Vollton-Pastell) — für Voll-Section-BGs, Vollflächen-Komponenten */
  .gsl-bg--rubric-aktuelles-fill      { background: var(--gsl-rubric-aktuelles-fill); }
  .gsl-bg--rubric-schulkonzept-fill   { background: var(--gsl-rubric-schulkonzept-fill); }
  .gsl-bg--rubric-schulgemeinschaft-fill { background: var(--gsl-rubric-schulgemeinschaft-fill); }
  .gsl-bg--rubric-betreuung-fill      { background: var(--gsl-rubric-betreuung-fill); }
  .gsl-bg--rubric-kontakt-fill        { background: var(--gsl-rubric-kontakt-fill); }
  .gsl-bg--rubric-service-fill        { background: var(--gsl-rubric-service-fill); }

  /* Rubrik-neutral — ziehen aus body.rubric-* Context via --rubric-accent-* Aliase.
     Einsatz: Sections die zur aktuellen Seiten-Rubrik passen sollen,
     ohne hart auf eine Rubrik verdrahtet zu sein.
     Fallbacks: kontakt-* als sicherer Default auf rubric-losen Pages. */
  .gsl-bg--rubric-soft   { background: var(--rubric-accent-soft, var(--gsl-rubric-kontakt-soft)); }
  .gsl-bg--rubric-fill   { background: var(--rubric-accent-fill, var(--gsl-rubric-kontakt-fill)); }
  .gsl-bg--rubric-dark   {
    background: var(--rubric-accent-dark, var(--gsl-rubric-kontakt-dark));
    color: var(--gsl-paper);
  }
  .gsl-text--rubric      { color: var(--rubric-accent, var(--gsl-rubric-kontakt)); }
  .gsl-text--rubric-dark { color: var(--rubric-accent-dark, var(--gsl-rubric-kontakt-dark)); }

  /* Pastell-Blau (NEU V5) — Hero-Text-Bands, Footer-BG-Alternative */
  .gsl-bg--blue-pastell       { background: var(--gsl-blue-pastell); }
  .gsl-bg--blue-pastell-fill  { background: var(--gsl-blue-pastell-fill); }
  .gsl-text--blue-pastell     { color: var(--gsl-blue-pastell-text); }

  /* ===================================================
     BORDER
     =================================================== */
  .gsl-border--rubric-aktuelles      { border: 2px solid var(--gsl-rubric-aktuelles); }
  .gsl-border--rubric-schulkonzept   { border: 2px solid var(--gsl-rubric-schulkonzept); }
  .gsl-border--rubric-betreuung      { border: 2px solid var(--gsl-rubric-betreuung); }
  .gsl-border--rubric-kontakt        { border: 2px solid var(--gsl-rubric-kontakt); }
  .gsl-border--rubric-service        { border: 2px solid var(--gsl-rubric-service); }

  /* Border-left accent bars */
  .gsl-border-l--rubric-aktuelles    { border-left: 4px solid var(--gsl-rubric-aktuelles); }
  .gsl-border-l--rubric-schulkonzept { border-left: 4px solid var(--gsl-rubric-schulkonzept); }
  .gsl-border-l--rubric-betreuung    { border-left: 4px solid var(--gsl-rubric-betreuung); }
  .gsl-border-l--rubric-kontakt      { border-left: 4px solid var(--gsl-rubric-kontakt); }
  .gsl-border-l--rubric-service      { border-left: 4px solid var(--gsl-rubric-service); }

  /* Border-top — Welle 2a: Top-Balken auf Cards entfernt.
     Klassen bleiben erhalten, wirken jetzt als Soft-BG + Dark-Text (vollflächig).
     gsl-border-t--line (1px Trennlinie) bleibt unverändert. */
  .gsl-border-t--rubric-betreuung    {
    border-top: none;
    background: var(--gsl-rubric-betreuung-soft);
    color: var(--gsl-rubric-betreuung-dark);
  }
  .gsl-border-t--rubric-kontakt-dark {
    border-top: none;
    background: var(--gsl-rubric-kontakt-soft);
    color: var(--gsl-rubric-kontakt-dark);
  }
  .gsl-border-t--rubric-service      {
    border-top: none;
    background: var(--gsl-rubric-service-soft);
    color: var(--gsl-rubric-service-dark);
  }
  .gsl-border-t--line                { border-top: 1px solid var(--gsl-line); }
  .gsl-border-b--line                { border-bottom: 1px solid var(--gsl-line); }

  /* ===================================================
     LAYOUT — Flex helpers
     =================================================== */
  .gsl-flex              { display: flex; }
  .gsl-flex-col          { display: flex; flex-direction: column; }
  .gsl-items-center      { align-items: center; }
  .gsl-items-start       { align-items: flex-start; }
  .gsl-justify-between   { justify-content: space-between; }
  .gsl-justify-center    { justify-content: center; }
  .gsl-flex-wrap         { flex-wrap: wrap; }
  .gsl-flex-shrink-0     { flex-shrink: 0; }
  .gsl-flex-1            { flex: 1; }
  .gsl-flex-1-min0       { flex: 1; min-width: 0; }

  /* Flex + gap combos (high-frequency composites) */
  .gsl-flex--gap-2       { display: flex; gap: var(--gsl-space-2); }
  .gsl-flex--gap-3       { display: flex; gap: var(--gsl-space-3); }
  .gsl-flex--gap-4       { display: flex; gap: var(--gsl-space-4); }
  .gsl-flex--gap-5       { display: flex; gap: var(--gsl-space-5); }
  .gsl-flex--items-gap-2 { display: flex; align-items: center; gap: var(--gsl-space-2); }
  .gsl-flex--items-gap-3 { display: flex; align-items: center; gap: var(--gsl-space-3); }
  .gsl-flex--items-gap-4 { display: flex; align-items: center; gap: var(--gsl-space-4); }
  .gsl-flex--items-gap-5 { display: flex; align-items: center; gap: var(--gsl-space-5); }

  /* Full-width flex row CTA lists */
  .gsl-flex--cta-row {
    display: flex;
    align-items: center;
    gap: var(--gsl-space-3);
    width: 100%;
    text-align: left;
  }

  /* ===================================================
     LAYOUT — Max-width
     Stefan-Entscheid E5 (25.08.2026): nur EINE Textbreite im ganzen
     Mandanten. Klassennamen bleiben fuer Bestand erhalten, zeigen aber
     alle auf dasselbe Token --gsl-container-text (720px, ~65ch).
     =================================================== */
  .gsl-max-w-prose    { max-width: var(--gsl-container-text); }
  .gsl-max-w-52       { max-width: var(--gsl-container-text); }
  .gsl-max-w-56       { max-width: var(--gsl-container-text); }
  .gsl-max-w-40       { max-width: var(--gsl-container-text); }
  .gsl-max-w-640      { max-width: var(--gsl-container-text); }
  .gsl-max-w-780      { max-width: var(--gsl-container-text); }

  /* ===================================================
     TEXT ALIGNMENT
     =================================================== */
  .gsl-text-center { text-align: center; }
  .gsl-text-left   { text-align: left; }
  .gsl-text-right  { text-align: right; }

  /* ===================================================
     DISPLAY helpers
     =================================================== */
  .gsl-block         { display: block; }
  .gsl-inline-block  { display: inline-block; }

  /* ===================================================
     ASPECT RATIO
     =================================================== */
  .gsl-ar-16-9 { aspect-ratio: 16 / 9; }
  .gsl-ar-4-3  { aspect-ratio: 4 / 3; }
  .gsl-ar-3-2  { aspect-ratio: 3 / 2; }
  .gsl-ar-1-1  { aspect-ratio: 1 / 1; }

  /* ===================================================
     BORDER RADIUS
     =================================================== */
  .gsl-rounded      { border-radius: var(--gsl-radius-md); }
  .gsl-rounded-sm   { border-radius: var(--gsl-radius-sm); }
  .gsl-rounded-full { border-radius: var(--gsl-radius-full); }

  /* ===================================================
     LIST RESET (high-frequency pattern)
     =================================================== */
  .gsl-list-reset {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* list-reset + flex-col + gap combos */
  .gsl-list--col-gap-1 { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--gsl-space-1); }
  .gsl-list--col-gap-2 { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--gsl-space-2); }
  .gsl-list--col-gap-3 { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--gsl-space-3); }
  .gsl-list--col-gap-4 { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--gsl-space-4); }
  .gsl-list--col-gap-5 { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--gsl-space-5); }

  /* ===================================================
     FONT SIZE
     =================================================== */
  .gsl-fs-xs   { font-size: var(--gsl-fs-xs); }
  .gsl-fs-sm   { font-size: var(--gsl-fs-sm); }
  .gsl-fs-base { font-size: var(--gsl-fs-base); }
  .gsl-fs-md   { font-size: var(--gsl-fs-md); }
  .gsl-fs-lg   { font-size: var(--gsl-fs-lg); }
  .gsl-fs-xl   { font-size: var(--gsl-fs-xl); }

  /* ===================================================
     FONT STYLE / WEIGHT
     =================================================== */
  .gsl-font-normal  { font-style: normal; }
  .gsl-fw-600       { font-weight: 600; }
  .gsl-fw-700       { font-weight: 700; }

  /* ===================================================
     MISC
     =================================================== */
  .gsl-overflow-x-auto { overflow-x: auto; }
  .gsl-text-no-decoration { text-decoration: none; }
  .gsl-cursor-default { cursor: default; }

  /* Combined high-frequency multi-property composites */

  /* max-w-prose + mb (2 variants found) */
  .gsl-prose-mb-8 {
    max-width: var(--gsl-container-text);
    margin-bottom: var(--gsl-space-8);
  }
  .gsl-prose-mb-9 {
    max-width: var(--gsl-container-text);
    margin-bottom: var(--gsl-space-9);
  }
  .gsl-prose-mb-10 {
    max-width: var(--gsl-container-text);
    margin-bottom: var(--gsl-space-10);
  }

  /* bg-paper-cool + padding + mt (high-frequency card section) */
  .gsl-section-card {
    padding: var(--gsl-space-6);
    margin-top: var(--gsl-space-5);
    background: var(--gsl-paper-cool);
  }

  /* padding + margin-top (generic card) */
  .gsl-card-pad-mt-5 {
    padding: var(--gsl-space-6);
    margin-top: var(--gsl-space-5);
  }

  /* text-center + max-w-52 */
  .gsl-center-52 {
    text-align: center;
    max-width: var(--gsl-container-text);
  }
  .gsl-center-56 {
    text-align: center;
    max-width: var(--gsl-container-text);
  }

  /* ===================================================
     ADDITIONAL UTILITIES — added in second pass (2026-05-05)
     =================================================== */

  /* Font style */
  .gsl-font-italic  { font-style: italic; }

  /* Line height */
  .gsl-lh-relaxed  { line-height: var(--gsl-lh-relaxed); }
  .gsl-lh-snug     { line-height: var(--gsl-lh-snug); }
  .gsl-lh-tight    { line-height: var(--gsl-lh-tight); }

  /* Color white (hero/dark-bg contexts) */
  .gsl-text--white { color: white; }

  /* Font base size */
  .gsl-fs-base { font-size: var(--gsl-fs-base); }

  /* Margin: 0 */
  .gsl-m-0 { margin: 0; }

  /* Margin bottom */
  .gsl-mb-4 { margin-bottom: var(--gsl-space-4); }

  /* Flex col gap variants */
  .gsl-flex-col--gap-3 { display: flex; flex-direction: column; gap: var(--gsl-space-3); }
  .gsl-flex-col--gap-5 { display: flex; flex-direction: column; gap: var(--gsl-space-5); }

  /* Flex row gap-3 + wrap */
  .gsl-flex--gap-3-wrap { display: flex; gap: var(--gsl-space-3); flex-wrap: wrap; }

  /* Flex align-items-start + gap */
  .gsl-flex--start-gap-4 { display: flex; align-items: flex-start; gap: var(--gsl-space-4); }
  .gsl-flex--start-gap-5 { display: flex; align-items: flex-start; gap: var(--gsl-space-5); }

  /* Flex items-center gap-2 (already have gsl-flex--items-gap-2 but need standalone) */

  /* Padding x4 */
  .gsl-p-4 { padding: var(--gsl-space-4); }

  /* Padding-top 8 + flex justify-between */
  .gsl-pt8-flex-between {
    padding-top: var(--gsl-space-8);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gsl-space-4);
  }

  /* Flex: 1 1 0 + min-width: 0 */
  .gsl-flex-auto { flex: 1 1 0; min-width: 0; }

  /* min-width: 0 */
  .gsl-min-w-0 { min-width: 0; }

  /* Icon circle (square) — 44px */
  .gsl-icon-circle-44 {
    width: 44px;
    height: 44px;
    border-radius: var(--gsl-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Icon circle — 40px */
  .gsl-icon-circle-40 {
    width: 40px;
    height: 40px;
    border-radius: var(--gsl-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Avatar circle — 52px */
  .gsl-avatar-52 {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Avatar circle — 40px */
  .gsl-avatar-40 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Feature icon circle — 3rem */
  .gsl-icon-badge {
    width: 3rem;
    height: 3rem;
    border-radius: var(--gsl-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--gsl-space-5);
  }

  /* full-width img with radius */
  .gsl-img-cover {
    width: 100%;
    border-radius: var(--gsl-radius);
    object-fit: cover;
  }

  /* Full-width border-collapse table */
  .gsl-table { width: 100%; border-collapse: collapse; }

  /* Padding inline variant (3×4) */
  .gsl-px-4-py-3 { padding: var(--gsl-space-3) var(--gsl-space-4); }

  /* Padding-top 4 + flex row */
  .gsl-pt4-flex-gap-2 {
    padding-top: var(--gsl-space-4);
    display: flex;
    align-items: center;
    gap: var(--gsl-space-2);
  }

  /* mb-4 from margin-bottom: var(--gsl-space-4) — already defined */

  /* ===================================================
     LIST — Clean (no markers, no indent)
     Structural lists (Ferienplan, Termine, Pläne) that
     should not show any bullet/marker.
     Do NOT apply to Fließtext-Aufzählungen.
     =================================================== */
  .gsl-list--clean,
  .gsl-list--clean li {
    list-style: none;
    padding-inline-start: 0;
  }
  .gsl-list--clean li::marker {
    content: '';
  }
  .gsl-list--clean li::before {
    content: none;
  }

} /* end @layer mandant */
/* source: kunden/gslotte/styles/prototype/css/p-leitbild.css sha256:ff1e3d5df35b6385c3e6830acf19305a661bc4ec3894911a636c659652a10858 */
/**
 * GS Lotte — Leitbild Page Styles
 * 5 Leitsätze als nummerierte Zigzag-Sections
 * Page-specific — kein Impact auf andere Pages
 */

/* =====================================================
   LEITSATZ ZIGZAG SECTION
   2-Spalten-Grid: Foto + Textblock, alternierend
   ===================================================== */
.gsl-leitsatz {
  padding-block: var(--gsl-section-pad-y-loud);
}

/* Innerer Wrapper: Grid 2-col, 50/50 */
.gsl-leitsatz__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gsl-space-7);
  align-items: center;
  max-width: var(--gsl-container);
  margin-inline: auto;
  padding-inline: var(--gsl-gutter);
}

/* Foto-Seite */
.gsl-leitsatz__media {
  position: relative;
  border-radius: var(--gsl-radius-lg);
  overflow: hidden;
  box-shadow: var(--gsl-shadow-lg);
  aspect-ratio: 4 / 3;
}

.gsl-leitsatz__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--gsl-duration-slow, 0.6s) var(--gsl-ease-out, ease);
}

.gsl-leitsatz__media:hover img {
  transform: scale(1.04);
}

/* Text-Seite */
.gsl-leitsatz__body {
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-5);
}

/* Big Number Badge */
.gsl-leitsatz__num {
  font-family: var(--gsl-font-sans);
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: var(--gsl-fw-black);
  line-height: 1;
  letter-spacing: var(--gsl-tracking-tight);
  color: var(--gsl-rubric, var(--gsl-rubric-schulkonzept));
  opacity: 0.25;
  user-select: none;
  margin-bottom: calc(-1 * var(--gsl-space-5));
}

.gsl-leitsatz__heading {
  font-size: clamp(var(--gsl-fs-lg), 3vw, var(--gsl-fs-xl));
  font-weight: var(--gsl-fw-black);
  line-height: var(--gsl-lh-snug);
  letter-spacing: var(--gsl-tracking-tight);
  color: var(--gsl-rubric-dark, var(--gsl-ink));
  margin: 0;
}

.gsl-leitsatz__text {
  font-size: var(--gsl-fs-base);
  line-height: var(--gsl-lh-relaxed);
  color: var(--gsl-ink);
  max-width: 38em;
  margin: 0;
}

/* =====================================================
   ZIGZAG — jede gerade Section dreht Foto nach rechts
   Foto ist immer grid-column: 1 im Markup.
   Bei [data-rubric-pos="right"]: Foto und Text tauschen.
   ===================================================== */
.gsl-leitsatz[data-rubric-pos="right"] .gsl-leitsatz__inner {
  direction: rtl;
}

/* Reset direction für Kind-Elemente, nur Grid wird gespiegelt */
.gsl-leitsatz[data-rubric-pos="right"] .gsl-leitsatz__media,
.gsl-leitsatz[data-rubric-pos="right"] .gsl-leitsatz__body {
  direction: ltr;
}

/* =====================================================
   SEKTION-FARBEN — alternierend soft/fill + neutral
   Rubrik-Kontext: gsl-rubric-schulkonzept steuert Variablen
   ===================================================== */
.gsl-leitsatz--bg-soft {
  background: var(--gsl-rubric-schulkonzept-soft);
}

.gsl-leitsatz--bg-fill {
  background: var(--gsl-rubric-schulkonzept-fill);
}

.gsl-leitsatz--bg-fill .gsl-leitsatz__text {
  color: var(--gsl-rubric-schulkonzept-dark);
}

.gsl-leitsatz--bg-neutral {
  background: var(--gsl-paper-cool);
}

/* =====================================================
   CAPS LABEL ÜBER DER NUMMER
   ===================================================== */
.gsl-leitsatz__label {
  display: inline-block;
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-caps);
  text-transform: uppercase;
  color: var(--gsl-rubric-schulkonzept-dark);
}

/* =====================================================
   MOBILE — Stack vertikal, Foto immer oben
   ===================================================== */
@media (max-width: 768px) {
  .gsl-leitsatz__inner {
    grid-template-columns: 1fr;
    gap: var(--gsl-space-6);
  }

  /* Foto bleibt immer oben, unabhängig von direction */
  .gsl-leitsatz[data-rubric-pos="right"] .gsl-leitsatz__inner {
    direction: ltr;
  }

  .gsl-leitsatz__media {
    order: -1;
    aspect-ratio: 16 / 9;
    border-radius: var(--gsl-radius-md);
  }

  .gsl-leitsatz__num {
    font-size: clamp(3rem, 15vw, 5rem);
    margin-bottom: calc(-1 * var(--gsl-space-4));
  }
}

/* =====================================================
   LEITBILD INTRO — Kurz-Text vor den Leitsätzen
   ===================================================== */
.gsl-leitbild-intro {
  padding-block: var(--gsl-section-pad-y);
  background: var(--gsl-paper);
}

.gsl-leitbild-intro__inner {
  max-width: var(--gsl-container-text);
  margin-inline: auto;
  padding-inline: var(--gsl-gutter);
  text-align: center;
}

.gsl-leitbild-intro__lead {
  font-size: var(--gsl-fs-md);
  line-height: var(--gsl-lh-relaxed);
  color: var(--gsl-ink-soft);
  margin-top: var(--gsl-space-5);
}
/* source: kunden/gslotte/styles/prototype/css/p-bausteine.css sha256:96ef82d05de6799989afe84a8ab84d594b91f0c968cda5eb15349dab52eadbdb */
/* =====================================================
   p-bausteine.css — Bausteine des Lernens
   Page-specific styles for bausteine.php
   T14: 2x2 Colored Grid Cards with rubric fill tokens
   ===================================================== */

/* --------------------------------------------------
   BAUSTEINE-GRID — strict 2×2 on ≥640px
   -------------------------------------------------- */
.gsl-bausteine-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gsl-space-5);
}

@media (max-width: 639px) {
  .gsl-bausteine-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------
   BAUSTEIN-CARD — full-color tile
   -------------------------------------------------- */
.gsl-baustein-card {
  border-radius: var(--gsl-radius-md);
  padding: var(--gsl-space-7);
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-3);
  transition:
    transform var(--gsl-duration-base, 200ms) var(--gsl-ease-out, ease-out),
    box-shadow var(--gsl-duration-base, 200ms) var(--gsl-ease-out, ease-out);
  box-shadow: var(--gsl-shadow-sm);
}

.gsl-baustein-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--gsl-shadow-md);
}

/* Icon badge — white on colored background */
.gsl-baustein-card .gsl-icon-badge {
  background: rgba(255, 255, 255, 0.3);
  margin-bottom: 0;
  flex-shrink: 0;
}

/* Heading inherits dark token from card modifier */
.gsl-baustein-card .gsl-baustein-heading {
  font-size: var(--gsl-fs-xl, 1.25rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

/* Subtitle line */
.gsl-baustein-card .gsl-baustein-sub {
  font-weight: 600;
  opacity: 0.75;
  margin: 0;
  font-size: var(--gsl-fs-sm, 0.875rem);
}

/* Body text */
.gsl-baustein-card p {
  margin: 0;
  line-height: 1.6;
}

/* List items — no default bullets, matches global li rule */
.gsl-baustein-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-2);
}

.gsl-baustein-card ul li {
  padding-left: var(--gsl-space-4);
  position: relative;
  line-height: 1.5;
}

.gsl-baustein-card ul li::before {
  content: none;
}

/* --------------------------------------------------
   COLOR MODIFIERS — per-card rubric fill
   -------------------------------------------------- */

/* Baustein 1 — Kopf — salbei */
.gsl-baustein-card--schulkonzept {
  background: var(--gsl-rubric-schulkonzept-fill);
  color: var(--gsl-rubric-schulkonzept-dark);
}

/* Baustein 2 — Herz — taubenblau */
.gsl-baustein-card--schulgemeinschaft {
  background: var(--gsl-rubric-schulgemeinschaft-fill);
  color: var(--gsl-rubric-schulgemeinschaft-dark);
}

/* Baustein 3 — Hand — gelb-amber */
.gsl-baustein-card--betreuung {
  background: var(--gsl-rubric-betreuung-fill);
  color: var(--gsl-rubric-betreuung-dark);
}

/* Baustein 4 — Bewegung — rosa/aktuelles */
.gsl-baustein-card--aktuelles {
  background: var(--gsl-rubric-aktuelles-fill);
  color: var(--gsl-rubric-aktuelles-dark);
}

/* Icon SVG stroke follows text color for contrast */
.gsl-baustein-card svg {
  stroke: currentColor;
}
/* source: kunden/gslotte/styles/prototype/css/p-lerngruppen.css sha256:9aa8d2600f15d2b4ae03002345e4e89afd5adce1c634c50edadff09cf9793b42 */
/**
 * GS Lotte — Lerngruppen Page Styles
 * 3 farbige Lerngruppen-Kästen im 3-Spalten-Grid
 * Page-specific — kein Impact auf andere Pages
 */

/* =====================================================
   LERNGRUPPEN INTRO — lead before grid
   ===================================================== */
.gsl-lerngruppen-intro {
  max-width: var(--gsl-container-text);
  margin-inline: auto;
  margin-block-end: var(--gsl-space-8);
  text-align: center;
}

/* =====================================================
   LERNGRUPPEN GRID — 3-spaltig Desktop, 1-spaltig Mobile
   ===================================================== */
.gsl-lerngruppen-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gsl-space-6);
}

@media (min-width: 640px) {
  .gsl-lerngruppen-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 960px) {
  .gsl-lerngruppen-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =====================================================
   LERNGRUPPE CARD — Volltön-BG, Headline, Text
   ===================================================== */
.gsl-lerngruppe-card {
  border-radius: var(--gsl-radius-lg);
  padding: var(--gsl-space-7) var(--gsl-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-4);
  box-shadow: var(--gsl-shadow-md);
  /* color set by rubric utility class */
}

.gsl-lerngruppe-card__klass {
  font-size: var(--gsl-fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}

.gsl-lerngruppe-card__headline {
  font-size: var(--gsl-fs-lg);
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
  /* inherits color from utility class dark */
}

.gsl-lerngruppe-card__icon {
  font-size: var(--gsl-fs-2xl);
  line-height: 1;
}

.gsl-lerngruppe-card__body {
  font-size: var(--gsl-fs-sm);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

/* =====================================================
   PATENSYSTEM SECTION — Volltön-neutral unter dem Grid
   ===================================================== */
.gsl-lerngruppen-paten {
  max-width: var(--gsl-container-text);
  margin-inline: auto;
  margin-block-start: var(--gsl-space-8);
  padding: var(--gsl-space-6) var(--gsl-space-7);
  background: var(--gsl-paper-cool, #F4F6F9);
  border-radius: var(--gsl-radius-lg);
  border-left: 4px solid var(--gsl-rubric-schulgemeinschaft, #3399B5);
}

.gsl-lerngruppen-paten__headline {
  font-size: var(--gsl-fs-md);
  font-weight: 800;
  margin-block-end: var(--gsl-space-4);
}
/* source: kunden/gslotte/styles/prototype/css/p-kinderparlament.css sha256:ea2798511e153083d4cbf3dd88496a19374a2cba162319b3c623f7056102f4b1 */
/**
 * GS Lotte — Kinderparlament page styles
 * Farbige Vollbreite-Sections: alternierend soft/fill für visuellen Rhythmus.
 * Stand: 2026-05-05
 */

/* ── Base section ──────────────────────────────────────────────────── */
.gsl-kp-section {
  padding-block: var(--gsl-section-pad-y-loud);
  width: 100%;
}

/* ── Icon accent ───────────────────────────────────────────────────── */
.gsl-kp-section__icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-block-end: var(--gsl-space-5);
  display: block;
}

/* ── Prose within colored sections ────────────────────────────────── */
.gsl-kp-section .gsl-prose h2 {
  font-size: var(--gsl-fs-lg);
  margin-block-start: 0;
}

.gsl-kp-section .gsl-prose p + p,
.gsl-kp-section .gsl-prose p + ul,
.gsl-kp-section .gsl-prose ul + p {
  margin-block-start: var(--gsl-space-4);
}

/* ── Text overrides for rubric-neutral fill sections ───────────────── */
/* gsl-bg--rubric-fill → use rubric-accent-dark text (auto-resolves to page rubrik) */
.gsl-bg--rubric-fill .gsl-kp-section__icon,
.gsl-bg--rubric-fill .gsl-prose h2,
.gsl-bg--rubric-fill .gsl-prose p,
.gsl-bg--rubric-fill .gsl-prose li,
.gsl-bg--rubric-fill .gsl-caps {
  color: var(--rubric-accent-dark, var(--gsl-rubric-schulgemeinschaft-dark));
}

/* ── Text overrides for rubric-neutral soft sections ───────────────── */
/* gsl-bg--rubric-soft → use rubric-accent-dark text */
.gsl-bg--rubric-soft .gsl-kp-section__icon,
.gsl-bg--rubric-soft .gsl-prose h2,
.gsl-bg--rubric-soft .gsl-caps {
  color: var(--rubric-accent-dark, var(--gsl-rubric-schulgemeinschaft-dark));
}

/* ── Sidebar card — bleibt dark-bg wie zuvor ───────────────────────── */
.gsl-kp-sidebar-card--dark {
  background: var(--gsl-rubric-schulgemeinschaft-dark);
  color: var(--gsl-paper);
}
.gsl-kp-sidebar-card--dark .gsl-caps,
.gsl-kp-sidebar-card--dark h2,
.gsl-kp-sidebar-card--dark p {
  color: var(--gsl-paper);
}
.gsl-kp-sidebar-card--dark p.gsl-text--muted {
  color: rgba(255, 255, 255, 0.75);
}
/* source: kunden/gslotte/styles/prototype/css/p-team.css sha256:9091a9ca06f2102e82bf3194893da92a1d9d82c7bc0860ed6f33ffc008728cd9 */
/**
 * GS Lotte Redesign KS4 — Team Page Styles (p-team.css)
 * Unified section backgrounds: all team groups use rubric-neutral tokens.
 * body.rubric-schulgemeinschaft → all sections resolve to türkis palette.
 *
 * Section color mapping (unified 2026-05-06):
 *   Schulleitung  → gsl-bg--rubric-fill  (türkis Volltön)
 *   Lehrkräfte    → gsl-bg--rubric-soft  (türkis Pastell)
 *   Verwaltung    → gsl-bg--rubric-fill  (türkis Volltön)
 *   OGS-Team      → gsl-bg--rubric-soft  (türkis Pastell)
 */

/* =====================================================
   TEAM SECTION — full-width colored block
   ===================================================== */
.gsl-team-section {
  padding-block: var(--gsl-space-14);
}

/* Group headline — always dark token of the active rubric */
.gsl-team-section__caps {
  font-size: var(--gsl-fs-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gsl-team-section__title {
  font-size: var(--gsl-fs-2xl);
  font-weight: 700;
  margin-block-start: var(--gsl-space-3);
  margin-block-end: var(--gsl-space-7);
}

/* =====================================================
   PERSON GRID
   ===================================================== */
.gsl-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--gsl-space-4);
}

.gsl-team-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

/* =====================================================
   PERSON CARD — white card lifts out of colored BG
   ===================================================== */
.gsl-team-person {
  display: flex;
  align-items: center;
  gap: var(--gsl-space-4);
  padding: var(--gsl-space-5);
  background: var(--gsl-paper);
  border-radius: var(--gsl-radius-lg);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
}

.gsl-team-person__info {
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-1);
}

.gsl-team-person__name {
  font-size: var(--gsl-fs-md);
  font-weight: 700;
  color: var(--gsl-ink);
}

.gsl-team-person__role {
  color: var(--gsl-ink-soft);
  font-size: var(--gsl-fs-sm);
}

.gsl-team-person__fach {
  color: var(--gsl-ink-soft);
  font-size: var(--gsl-fs-sm);
  margin-block-start: var(--gsl-space-1);
}

/* =====================================================
   INITIAL CIRCLE — per-section rubric color
   The surrounding section sets --gsl-team-accent and
   --gsl-team-accent-text which the circle inherits.
   ===================================================== */
.gsl-team-person__initial-circle {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--gsl-radius-full);
  background: var(--gsl-team-accent, var(--gsl-rubric-schulgemeinschaft));
  color: var(--gsl-team-accent-text, var(--gsl-paper));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--gsl-fs-md);
  letter-spacing: 0.03em;
}

/* =====================================================
   PER-SECTION COLOR TOKENS — unified to rubric-neutral
   All sections inherit from body.rubric-schulgemeinschaft.
   Circle background: --rubric-accent-dark (türkis-dunkel).
   ===================================================== */

/* All team groups — unified türkis circles */
.gsl-team-section--schulleitung,
.gsl-team-section--lehrkraefte,
.gsl-team-section--verwaltung,
.gsl-team-section--ogs {
  --gsl-team-accent:      var(--rubric-accent-dark, var(--gsl-rubric-schulgemeinschaft-dark));
  --gsl-team-accent-text: var(--gsl-paper);
}

/* =====================================================
   SECTION HEADLINE COLORS — unified to rubric-neutral dark
   ===================================================== */
.gsl-team-section--schulleitung .gsl-team-section__caps,
.gsl-team-section--schulleitung .gsl-team-section__title,
.gsl-team-section--lehrkraefte .gsl-team-section__caps,
.gsl-team-section--lehrkraefte .gsl-team-section__title,
.gsl-team-section--verwaltung .gsl-team-section__caps,
.gsl-team-section--verwaltung .gsl-team-section__title,
.gsl-team-section--ogs .gsl-team-section__caps,
.gsl-team-section--ogs .gsl-team-section__title {
  color: var(--rubric-accent-dark, var(--gsl-rubric-schulgemeinschaft-dark));
}
/* source: kunden/gslotte/styles/prototype/css/p-schulgemeinschaft.css sha256:bb8d4e788db5af0a95f89fb7829b8e89b17ece3aa38e24dd91bc34de1fee8b2c */
/**
 * GS Lotte — Schulgemeinschaft Page Styles
 * 5-Kacheln-Grid mit Volltön-BG je Rubrik-Farbe
 * Page-specific — kein Impact auf andere Pages
 */

/* =====================================================
   SCHULGEMEINSCHAFT TILE GRID — 5 Kacheln
   Desktop: 5-spaltig ab 1280px, 3+2 ab 960px
   Tablet:  2-spaltig ab 600px
   Mobile:  1-spaltig
   ===================================================== */
.gsl-sg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gsl-space-5);
}

@media (min-width: 1280px) {
  .gsl-sg-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 959px) {
  .gsl-sg-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .gsl-sg-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   SCHULGEMEINSCHAFT TILE — Volltön-BG + Dark-Text
   Überschreibt das Standard-.gsl-tile White-BG.
   Hyphens + overflow-wrap für lange Wörter.
   ===================================================== */
.gsl-sg-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gsl-space-6);
  padding: var(--gsl-space-7) var(--gsl-space-6);
  min-height: 16rem;
  border-top: none;
  border-radius: var(--gsl-radius-md);
  box-shadow: var(--gsl-shadow-md);
  text-decoration: none;
  color: var(--gsl-rubric-dark, var(--gsl-ink));
  background: var(--gsl-rubric-fill, var(--gsl-paper-cool));
  position: relative;
  overflow: hidden;
  transition: transform var(--gsl-duration-base) var(--gsl-ease-out),
              box-shadow var(--gsl-duration-base) var(--gsl-ease-out),
              filter var(--gsl-duration-base) var(--gsl-ease-out);
}

.gsl-sg-tile:hover {
  transform: translateY(-5px);
  box-shadow: var(--gsl-shadow-lg);
  filter: brightness(0.93);
}

/* =====================================================
   TILE TITLE — Vollständig sichtbar, kein Truncate
   clamp() für skalierbare Größe
   ===================================================== */
.gsl-sg-tile__title {
  font-size: clamp(var(--gsl-fs-md), 2vw, var(--gsl-fs-xl));
  font-weight: var(--gsl-fw-black);
  line-height: var(--gsl-lh-snug);
  color: var(--gsl-rubric-dark, var(--gsl-ink));
  margin: 0;
  /* Lange Wörter (z.B. Schulpflegschaft, Kinderparlament) vollständig wrappen */
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

/* =====================================================
   TILE LABEL — Rubrik-Caps (Kategorie-Hinweis)
   ===================================================== */
.gsl-sg-tile__label {
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-caps);
  text-transform: uppercase;
  color: var(--gsl-rubric-dark, var(--gsl-ink));
  opacity: 0.75;
}

/* =====================================================
   TILE BODY — Beschreibungstext
   ===================================================== */
.gsl-sg-tile__body {
  font-size: var(--gsl-fs-sm);
  line-height: var(--gsl-lh-normal);
  color: var(--gsl-rubric-dark, var(--gsl-ink));
  margin: 0;
  opacity: 0.85;
}

/* =====================================================
   TILE ARROW — Pill auf dunklem Ton (Kontrast-geprüft)
   ===================================================== */
.gsl-sg-tile__arrow {
  align-self: flex-start;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-grid;
  place-items: center;
  border-radius: var(--gsl-radius-full);
  background: rgba(255, 255, 255, 0.35);
  color: var(--gsl-rubric-dark, var(--gsl-ink));
  transition: transform var(--gsl-duration-base) var(--gsl-ease-out);
}

.gsl-sg-tile:hover .gsl-sg-tile__arrow {
  transform: translateX(5px);
}

/* =====================================================
   PER-TILE RUBRIK-FARBEN — explizit per Klasse gesetzt
   Setzt die CSS-Custom-Properties für fill + dark
   ===================================================== */
.gsl-sg-tile--schulgemeinschaft {
  background: var(--gsl-rubric-schulgemeinschaft-fill);
  color: var(--gsl-rubric-schulgemeinschaft-dark);
}
.gsl-sg-tile--schulgemeinschaft .gsl-sg-tile__title,
.gsl-sg-tile--schulgemeinschaft .gsl-sg-tile__label,
.gsl-sg-tile--schulgemeinschaft .gsl-sg-tile__body,
.gsl-sg-tile--schulgemeinschaft .gsl-sg-tile__arrow {
  color: var(--gsl-rubric-schulgemeinschaft-dark);
}

.gsl-sg-tile--aktuelles {
  background: var(--gsl-rubric-aktuelles-fill);
  color: var(--gsl-rubric-aktuelles-dark);
}
.gsl-sg-tile--aktuelles .gsl-sg-tile__title,
.gsl-sg-tile--aktuelles .gsl-sg-tile__label,
.gsl-sg-tile--aktuelles .gsl-sg-tile__body,
.gsl-sg-tile--aktuelles .gsl-sg-tile__arrow {
  color: var(--gsl-rubric-aktuelles-dark);
}

.gsl-sg-tile--schulkonzept {
  background: var(--gsl-rubric-schulkonzept-fill);
  color: var(--gsl-rubric-schulkonzept-dark);
}
.gsl-sg-tile--schulkonzept .gsl-sg-tile__title,
.gsl-sg-tile--schulkonzept .gsl-sg-tile__label,
.gsl-sg-tile--schulkonzept .gsl-sg-tile__body,
.gsl-sg-tile--schulkonzept .gsl-sg-tile__arrow {
  color: var(--gsl-rubric-schulkonzept-dark);
}

.gsl-sg-tile--betreuung {
  background: var(--gsl-rubric-betreuung-fill);
  color: var(--gsl-rubric-betreuung-dark);
}
.gsl-sg-tile--betreuung .gsl-sg-tile__title,
.gsl-sg-tile--betreuung .gsl-sg-tile__label,
.gsl-sg-tile--betreuung .gsl-sg-tile__body,
.gsl-sg-tile--betreuung .gsl-sg-tile__arrow {
  color: var(--gsl-rubric-betreuung-dark);
}

.gsl-sg-tile--kontakt {
  background: var(--gsl-rubric-kontakt-fill);
  color: var(--gsl-rubric-kontakt-dark);
}
.gsl-sg-tile--kontakt .gsl-sg-tile__title,
.gsl-sg-tile--kontakt .gsl-sg-tile__label,
.gsl-sg-tile--kontakt .gsl-sg-tile__body,
.gsl-sg-tile--kontakt .gsl-sg-tile__arrow {
  color: var(--gsl-rubric-kontakt-dark);
}
/* source: kunden/gslotte/styles/prototype/css/p-schulpflegschaft.css sha256:539071d3bc30551864b7c792611b58037049f40c7fdf706b2b8e46d3298d14fb */
/**
 * GS Lotte — Schulpflegschaft Page Styles
 * 4 alternating colored sections: Aufgabe → Mitglieder → Termine → Kontakt
 * Page-specific — kein Impact auf andere Pages
 */

/* =====================================================
   BASE SECTION
   Consistent vertical rhythm, tokens-only
   ===================================================== */
.gsl-sp-section {
  padding-block: var(--gsl-section-pad-y);
}

/* =====================================================
   CARD GRID — 3 Aufgaben-Cards (Gremien)
   Auto-fit, bricht ab 28rem in 2-col, unter 520px 1-col
   ===================================================== */
.gsl-sp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--gsl-space-5);
}

.gsl-sp-card {
  background: var(--gsl-paper);
  border: 1px solid var(--gsl-line);
  border-radius: var(--gsl-radius-lg);
  padding: var(--gsl-space-6);
}

.gsl-sp-card h3 {
  margin-bottom: var(--gsl-space-4);
}

.gsl-sp-card p {
  color: var(--gsl-ink);
  line-height: var(--gsl-lh-relaxed);
  font-size: var(--gsl-fs-base);
}

/* =====================================================
   TERMINE LIST — structured date + label rows
   ===================================================== */
.gsl-sp-termine-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-1);
}

.gsl-sp-termin {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--gsl-space-4);
  align-items: baseline;
  padding-block: var(--gsl-space-4);
  border-bottom: 1px solid var(--gsl-line);
}

.gsl-sp-termin:first-child {
  border-top: 1px solid var(--gsl-line);
}

.gsl-sp-termin__date {
  font-weight: var(--gsl-fw-bold);
  font-size: var(--gsl-fs-sm);
  color: var(--gsl-ink);
  white-space: nowrap;
}

.gsl-sp-termin__label {
  color: var(--gsl-ink-soft);
  font-size: var(--gsl-fs-base);
  line-height: var(--gsl-lh-snug);
}

/* =====================================================
   MOBILE — stack single column below 640px
   ===================================================== */
@media (max-width: 640px) {
  .gsl-sp-termin {
    grid-template-columns: 1fr;
    gap: var(--gsl-space-1);
  }

  .gsl-sp-termin__date {
    font-size: var(--gsl-fs-xs);
    color: var(--gsl-ink-muted);
  }
}
/* source: kunden/gslotte/styles/prototype/css/p-foerderverein.css sha256:6b24139c7f230d5f6d2d19677b7a593385507ea74f4f6c2dfb9ff6ab1294886e */
/**
 * GS Lotte — Förderverein Page Styles
 * 4 alternating colored sections: Was wir sind → Was wir tun → Mitglied werden → Spenden
 * Page-specific — no impact on other pages
 * Mirrors p-schulpflegschaft.css pattern
 */

/* =====================================================
   BASE SECTION
   Consistent vertical rhythm, tokens-only
   ===================================================== */
.gsl-fv-section {
  padding-block: var(--gsl-section-pad-y);
}

/* =====================================================
   PROJECT LIST — Aufzählung geförderter Projekte/Anschaffungen
   Two-column auto-fit grid on larger screens
   ===================================================== */
.gsl-fv-projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--gsl-space-5);
  margin-block-start: var(--gsl-space-7);
}

.gsl-fv-project {
  background: var(--gsl-paper);
  border: 1px solid var(--gsl-line);
  border-radius: var(--gsl-radius-lg);
  padding: var(--gsl-space-6);
}

.gsl-fv-project h3 {
  margin-block-end: var(--gsl-space-3);
}

.gsl-fv-project p {
  color: var(--gsl-ink);
  line-height: var(--gsl-lh-relaxed);
  font-size: var(--gsl-fs-base);
}

/* =====================================================
   BOARD LIST — Vorstandsliste kompakt
   ===================================================== */
.gsl-fv-board-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-1);
}

.gsl-fv-board-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gsl-space-4);
  align-items: baseline;
  padding-block: var(--gsl-space-4);
  border-bottom: 1px solid var(--gsl-line);
}

.gsl-fv-board-item:first-child {
  border-top: 1px solid var(--gsl-line);
}

.gsl-fv-board-item__name {
  font-weight: var(--gsl-fw-bold);
  font-size: var(--gsl-fs-base);
  color: var(--gsl-ink);
}

.gsl-fv-board-item__role {
  color: var(--gsl-ink-soft);
  font-size: var(--gsl-fs-sm);
  white-space: nowrap;
}

/* =====================================================
   KONTO — Bankverbindungs-Box
   ===================================================== */
.gsl-fv-konto {
  background: var(--gsl-paper);
  border: 1px solid var(--gsl-line);
  border-radius: var(--gsl-radius-lg);
  padding: var(--gsl-space-6) var(--gsl-space-7);
  margin-block-start: var(--gsl-space-7);
  max-width: 36rem;
}

.gsl-fv-konto dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--gsl-space-2) var(--gsl-space-5);
  margin: 0;
}

.gsl-fv-konto dt {
  color: var(--gsl-ink-soft);
  font-size: var(--gsl-fs-sm);
  font-weight: var(--gsl-fw-bold);
}

.gsl-fv-konto dd {
  color: var(--gsl-ink);
  font-size: var(--gsl-fs-sm);
  margin: 0;
  font-feature-settings: "tnum";
}

/* =====================================================
   MOBILE — stack below 640px
   ===================================================== */
@media (max-width: 640px) {
  .gsl-fv-board-item {
    grid-template-columns: 1fr;
    gap: var(--gsl-space-1);
  }

  .gsl-fv-board-item__role {
    white-space: normal;
  }

  .gsl-fv-konto dl {
    grid-template-columns: 1fr;
    gap: var(--gsl-space-1) 0;
  }

  .gsl-fv-konto dd {
    margin-block-end: var(--gsl-space-3);
  }
}
/* source: kunden/gslotte/styles/prototype/css/p-betreuung.css sha256:73ed6b3ea75cc723f4f12324189779006b3d36417727554153043bf6a061ea2b */
/**
 * GS Lotte — Betreuung Page Styles
 * 5 Kacheln mit farbigen Volltön-Hintergründen, 3+2-Grid-Layout
 * Page-specific — kein Impact auf andere Pages
 */

/* =====================================================
   BETREUUNG-GRID — 5 Kacheln, 3+2 zentriert
   Desktop: 6-Spalten-Raster → 3×(2 cols) + 2×(3 cols)
   Tablet:  2 Spalten + letzte Kachel zentriert
   Mobile:  1 Spalte
   ===================================================== */
.gsl-betreuung-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gsl-space-5);
}

/* Erste 3 Kacheln: je 2 von 6 Spalten → 3 nebeneinander */
.gsl-betreuung-grid .gsl-betreuung-tile:nth-child(1),
.gsl-betreuung-grid .gsl-betreuung-tile:nth-child(2),
.gsl-betreuung-grid .gsl-betreuung-tile:nth-child(3) {
  grid-column: span 2;
}

/* Letzte 2 Kacheln: je 3 von 6 Spalten → 2 zentriert */
.gsl-betreuung-grid .gsl-betreuung-tile:nth-child(4),
.gsl-betreuung-grid .gsl-betreuung-tile:nth-child(5) {
  grid-column: span 3;
}

/* Tablet: 4-Spalten-Raster → 2+2+1 zentriert */
@media (max-width: 1023px) and (min-width: 640px) {
  .gsl-betreuung-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .gsl-betreuung-grid .gsl-betreuung-tile:nth-child(1),
  .gsl-betreuung-grid .gsl-betreuung-tile:nth-child(2),
  .gsl-betreuung-grid .gsl-betreuung-tile:nth-child(3),
  .gsl-betreuung-grid .gsl-betreuung-tile:nth-child(4) {
    grid-column: span 2;
  }

  /* 5. Kachel mittig via Offset */
  .gsl-betreuung-grid .gsl-betreuung-tile:nth-child(5) {
    grid-column: 2 / span 2;
  }
}

/* Mobile: 1 Spalte */
@media (max-width: 639px) {
  .gsl-betreuung-grid {
    grid-template-columns: 1fr;
  }

  .gsl-betreuung-grid .gsl-betreuung-tile:nth-child(1),
  .gsl-betreuung-grid .gsl-betreuung-tile:nth-child(2),
  .gsl-betreuung-grid .gsl-betreuung-tile:nth-child(3),
  .gsl-betreuung-grid .gsl-betreuung-tile:nth-child(4),
  .gsl-betreuung-grid .gsl-betreuung-tile:nth-child(5) {
    grid-column: span 1;
  }
}

/* =====================================================
   BETREUUNG-TILE — Basis
   Volltön-Hintergrund, vollständige Titeldarstellung
   ===================================================== */
.gsl-betreuung-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gsl-space-6);
  padding: var(--gsl-space-7);
  border-radius: var(--gsl-radius-md);
  box-shadow: var(--gsl-shadow-md);
  text-decoration: none;
  min-height: 20rem;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--gsl-duration-base) var(--gsl-ease-out),
    box-shadow var(--gsl-duration-base) var(--gsl-ease-out),
    filter var(--gsl-duration-base) var(--gsl-ease-out);
}

.gsl-betreuung-tile:hover {
  transform: translateY(-5px);
  box-shadow: var(--gsl-shadow-lg);
  filter: brightness(0.93);
}

.gsl-betreuung-tile:focus-visible {
  outline: 3px solid var(--gsl-ink);
  outline-offset: 4px;
}

/* Titel: vollständig sichtbar, Zeilenumbruch erlaubt */
.gsl-betreuung-tile__label {
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-caps);
  text-transform: uppercase;
  opacity: 0.75;
}

.gsl-betreuung-tile__title {
  font-size: clamp(var(--gsl-fs-lg), 2vw, var(--gsl-fs-2xl));
  font-weight: var(--gsl-fw-black);
  line-height: var(--gsl-lh-tight);
  margin: var(--gsl-space-2) 0 0;
  word-break: break-word;
  hyphens: auto;
  overflow-wrap: break-word;
}

.gsl-betreuung-tile__text {
  font-size: var(--gsl-fs-sm);
  line-height: var(--gsl-lh-relaxed);
  margin-top: var(--gsl-space-3);
  opacity: 0.9;
}

/* Pfeil-Icon-Wrapper */
.gsl-betreuung-tile__arrow {
  align-self: flex-start;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-grid;
  place-items: center;
  border-radius: var(--gsl-radius-full);
  background: rgba(0 0 0 / 0.12);
  transition: transform var(--gsl-duration-base) var(--gsl-ease-out);
}

.gsl-betreuung-tile:hover .gsl-betreuung-tile__arrow {
  transform: translateX(5px);
}

/* =====================================================
   FARBVARIANTEN — je Kachel ein Volltön
   Dunklere Kontrastfarbe als Textfarbe (AAA-konform)
   ===================================================== */

/* 1. OGS — Rosa (#ECA597) → Dunkel: #7A2E1A */
.gsl-betreuung-tile--ogs {
  background: var(--gsl-rubric-aktuelles-fill);
  color: var(--gsl-rubric-aktuelles-dark);
}

/* 2. 8-1-Betreuung — Salbei (#ABC78F) → Dunkel: #2E3D1A */
.gsl-betreuung-tile--81 {
  background: var(--gsl-rubric-schulkonzept-fill);
  color: var(--gsl-rubric-schulkonzept-dark);
}

/* 3. Ferien — Gelb (#E5B847) → Dunkel: #5C5024 */
.gsl-betreuung-tile--ferien {
  background: var(--gsl-rubric-betreuung-fill);
  color: var(--gsl-rubric-betreuung-dark);
}

/* 4. Besondere Angebote — Taubenblau (#8FBCC9) → Dunkel: #1F3D47 */
.gsl-betreuung-tile--angebote {
  background: var(--gsl-rubric-schulgemeinschaft-fill);
  color: var(--gsl-rubric-schulgemeinschaft-dark);
}

/* 5. Betreuungsplatz — Apricot (#E8AC73) → Dunkel: #8C3811 */
.gsl-betreuung-tile--platz {
  background: var(--gsl-rubric-kontakt-fill);
  color: var(--gsl-rubric-kontakt-dark);
}
/* source: kunden/gslotte/styles/prototype/css/p-hero.css sha256:50303a587cd9b1b7185bc753cebd0bfaa3375ee851f1ed85586d74d500dd7cf3 */
/**
 * GS Lotte — Hero Varianten A / B / C + Text-Band
 * Kein Hardcode: alle Farben, Spacing, Radius via Tokens.
 * Stand: 2026-05-05 (T04)
 */

/* ==========================================================
   SHARED: Slider-Bilder füllen ihren Container
   Wiederverwendet für alle 3 Varianten.
   ========================================================== */
.gsl-hero-a__swiper,
.gsl-hero-b__swiper,
.gsl-hero-c__swiper {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.gsl-hero-a__swiper .swiper-slide,
.gsl-hero-b__swiper .swiper-slide,
.gsl-hero-c__swiper .swiper-slide {
  overflow: hidden;
}

.gsl-hero-a__swiper .swiper-slide img,
.gsl-hero-b__swiper .swiper-slide img,
.gsl-hero-c__swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1);
  transition: transform 8s cubic-bezier(0.2, 0, 0.2, 1);
  will-change: transform;
}

.gsl-hero-a__swiper .swiper-slide-active img,
.gsl-hero-b__swiper .swiper-slide-active img,
.gsl-hero-c__swiper .swiper-slide-active img {
  transform: scale(1.07);
}

/* Pagination Bullets — identisch zu V5-Bullets */
.gsl-hero-a__pagination,
.gsl-hero-b__pagination,
.gsl-hero-c__pagination {
  bottom: var(--gsl-space-4);
  z-index: 15;
}

.gsl-hero-a__pagination .swiper-pagination-bullet,
.gsl-hero-b__pagination .swiper-pagination-bullet,
.gsl-hero-c__pagination .swiper-pagination-bullet {
  background: var(--gsl-paper);
  opacity: 0.55;
  box-shadow: 0 1px 3px var(--gsl-shadow-dark-40);
  margin: 0 0.3rem !important;
}

.gsl-hero-a__pagination .swiper-pagination-bullet-active,
.gsl-hero-b__pagination .swiper-pagination-bullet-active,
.gsl-hero-c__pagination .swiper-pagination-bullet-active {
  width: 1.75rem;
  background: var(--gsl-rubric-kontakt);
  opacity: 1;
  border-radius: var(--gsl-radius-full);
}

@media (prefers-reduced-motion: reduce) {
  .gsl-hero-a__swiper .swiper-slide img,
  .gsl-hero-a__swiper .swiper-slide-active img,
  .gsl-hero-b__swiper .swiper-slide img,
  .gsl-hero-b__swiper .swiper-slide-active img,
  .gsl-hero-c__swiper .swiper-slide img,
  .gsl-hero-c__swiper .swiper-slide-active img {
    transform: none;
    transition: none;
  }
}

/* ==========================================================
   VARIANTE A — Side-by-Side (33% Text | 67% Slider)
   ========================================================== */

.gsl-hero-a {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
  align-items: stretch;
  min-height: clamp(420px, 70vh, 720px);
}

/* Text-Spalte: Pastell-Blau */
.gsl-hero-a__text {
  background: var(--gsl-blue-pastell);
  color: var(--gsl-blue-pastell-text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 4rem);
}

.gsl-hero-a__text-inner {
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-5);
}

.gsl-hero-a__welcome {
  font-family: var(--gsl-font-sans);
  font-size: var(--gsl-fs-base);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-wide);
  text-transform: uppercase;
  color: var(--gsl-blue-pastell-text);
  margin: 0;
  opacity: 0.85;
}

.gsl-hero-a__headline {
  font-family: var(--gsl-font-sans);
  font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: var(--gsl-fw-black);
  line-height: var(--gsl-lh-snug);
  letter-spacing: var(--gsl-tracking-tight);
  color: var(--gsl-blue-pastell-text);
  margin: 0;
}

/* Slider-Spalte */
.gsl-hero-a__slider {
  position: relative;
  min-height: clamp(320px, 65vh, 680px);
  overflow: hidden;
}

/* Mobile: stapeln */
@media (max-width: 767px) {
  .gsl-hero-a {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .gsl-hero-a__text {
    padding: var(--gsl-space-7) var(--gsl-gutter);
  }

  .gsl-hero-a__slider {
    min-height: 55vw;
    max-height: 360px;
  }
}

/* ==========================================================
   VARIANTE B — Full-Bleed Slider + Text-Band darunter
   ========================================================== */

.gsl-hero-b {
  display: flex;
  flex-direction: column;
}

/* Slider: volle Breite, 70vh hoch */
.gsl-hero-b__slider {
  position: relative;
  width: 100%;
  min-height: clamp(340px, 70vh, 760px);
  overflow: hidden;
}

/* Text-Band: Pastell-Blau, voller Welcome-Text */
.gsl-hero-b__textband {
  background: var(--gsl-blue-pastell);
  color: var(--gsl-blue-pastell-text);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  padding-inline: var(--gsl-gutter);
  text-align: center;
}

.gsl-hero-b__textband-inner {
  max-width: var(--gsl-container-text);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-4);
}

.gsl-hero-b__welcome {
  font-family: var(--gsl-font-sans);
  font-size: var(--gsl-fs-base);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-wide);
  text-transform: uppercase;
  color: var(--gsl-blue-pastell-text);
  margin: 0;
  opacity: 0.85;
}

.gsl-hero-b__headline {
  font-family: var(--gsl-font-sans);
  font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2.75rem);
  font-weight: var(--gsl-fw-black);
  line-height: var(--gsl-lh-snug);
  letter-spacing: var(--gsl-tracking-tight);
  color: var(--gsl-blue-pastell-text);
  margin: 0;
}

/* Mobile: Slider etwas kürzer */
@media (max-width: 767px) {
  .gsl-hero-b__slider {
    min-height: 55vw;
    max-height: 380px;
  }
}

/* ==========================================================
   VARIANTE C — Slider + Side-Stack (65% | 35%)
   ========================================================== */

.gsl-hero-c {
  display: grid;
  grid-template-columns: 65fr 35fr;
  gap: 0;
  align-items: stretch;
  min-height: clamp(420px, 72vh, 720px);
}

/* Slider-Spalte */
.gsl-hero-c__slider {
  position: relative;
  overflow: hidden;
}

/* Side-Stack: Pastell-Blau, 3 Boxen vertikal */
.gsl-hero-c__stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--gsl-blue-pastell);
  overflow: hidden;
}

.gsl-hero-c__stack-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid var(--gsl-blue-pastell-border);
}

.gsl-hero-c__stack-item:last-child {
  border-bottom: none;
}

/* Box 1: Welcome */
.gsl-hero-c__stack-item--welcome {
  background: var(--gsl-blue-pastell);
  color: var(--gsl-blue-pastell-text);
  gap: var(--gsl-space-3);
}

.gsl-hero-c__welcome-line {
  font-family: var(--gsl-font-sans);
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-caps);
  text-transform: uppercase;
  color: var(--gsl-blue-pastell-text);
  margin: 0;
  opacity: 0.8;
}

.gsl-hero-c__headline {
  font-family: var(--gsl-font-sans);
  font-size: clamp(1rem, 0.75rem + 1.2vw, 1.6rem);
  font-weight: var(--gsl-fw-black);
  line-height: var(--gsl-lh-snug);
  letter-spacing: var(--gsl-tracking-tight);
  color: var(--gsl-blue-pastell-text);
  margin: 0;
}

/* Box 2 + 3: mini-cards (Link) */
.gsl-hero-c__stack-item--link {
  text-decoration: none;
  background: var(--gsl-blue-pastell-fill);
  color: var(--gsl-blue-pastell-text);
  gap: var(--gsl-space-2);
  transition:
    background-color var(--gsl-duration-base) var(--gsl-ease-out),
    color var(--gsl-duration-base) var(--gsl-ease-out);
  position: relative;
}

.gsl-hero-c__stack-item--link:hover,
.gsl-hero-c__stack-item--link:focus-visible {
  background: var(--gsl-blue);
  color: var(--gsl-paper);
}

.gsl-hero-c__stack-item--link:focus-visible {
  outline: 3px solid var(--gsl-blue-dark);
  outline-offset: -3px;
}

.gsl-hero-c__card-label {
  font-family: var(--gsl-font-sans);
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-caps);
  text-transform: uppercase;
  opacity: 0.75;
}

.gsl-hero-c__card-title {
  font-family: var(--gsl-font-sans);
  font-size: clamp(1rem, 0.75rem + 0.8vw, 1.25rem);
  font-weight: var(--gsl-fw-bold);
  line-height: var(--gsl-lh-snug);
}

.gsl-hero-c__card-arrow {
  position: absolute;
  bottom: clamp(0.75rem, 1.5vw, 1.25rem);
  right: clamp(0.75rem, 1.5vw, 1.25rem);
  opacity: 0.6;
  transition: opacity var(--gsl-duration-base) var(--gsl-ease-out),
              transform var(--gsl-duration-base) var(--gsl-ease-out);
}

.gsl-hero-c__stack-item--link:hover .gsl-hero-c__card-arrow,
.gsl-hero-c__stack-item--link:focus-visible .gsl-hero-c__card-arrow {
  opacity: 1;
  transform: translateX(4px);
}

/* Mobile: Slider oben, Stack darunter (horizontal row) */
@media (max-width: 767px) {
  .gsl-hero-c {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .gsl-hero-c__slider {
    min-height: 55vw;
    max-height: 360px;
  }

  .gsl-hero-c__stack {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .gsl-hero-c__stack-item {
    flex: 1 1 calc(50% - 1px);
    min-width: 0;
    border-bottom: none;
    border-right: 1px solid var(--gsl-blue-pastell-border);
  }

  .gsl-hero-c__stack-item:last-child {
    border-right: none;
  }
}

/* ==========================================================
   TEXT-BAND UNTER HERO — alle Varianten
   data-ce-type="text" — pipeline-kompatibel
   ========================================================== */

.gsl-hero-text-below {
  /* Anderer Background als Hero oben (Pastell-Blau)
     — paper-warm gibt warmen Kontrast ohne neue Farbe einzufuehren */
  background: var(--gsl-paper-warm);
  color: var(--gsl-ink);
  padding-block: clamp(3rem, 6vw, 5rem);
  padding-inline: var(--gsl-gutter);
  text-align: center;
  border-block: 1px solid var(--gsl-line-soft);
}

.gsl-hero-text-below__inner {
  max-width: var(--gsl-container-text);
  margin-inline: auto;
}

.gsl-hero-text-below__text {
  font-family: var(--gsl-font-sans);
  font-size: clamp(var(--gsl-fs-base), 1rem + 0.5vw, var(--gsl-fs-md));
  font-weight: var(--gsl-fw-regular);
  line-height: var(--gsl-lh-relaxed);
  color: var(--gsl-ink);
  margin: 0;
}
/* source: kunden/gslotte/styles/prototype/css/quick-contact.css sha256:9bf5dc659f4756142e93685111dbddd21112697f5564e82628002ffb6059f424 */
/**
 * Quick-Contact — Grundschule Lotte
 * 3 separate runde FAB-Buttons, rechts fixiert vertikal mittig.
 * Prefix: gsl-qc-
 * Alle Werte via Tokens aus tokens.css.
 *
 * Mobile (<768px): 3 Kreise horizontal zentriert, Bottom-Bar.
 */

/* =====================================================
   WRAPPER — rechts fixiert, vertikal mittig
   ===================================================== */
.gsl-quick-contact {
  position: fixed;
  right: var(--gsl-space-4);      /* 16px Abstand vom Rand — nicht am Rand klebend */
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;                    /* unter Header (--gsl-z-header: 100) */
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-3);        /* 12px zwischen den Kreisen */
}

/* =====================================================
   EINZELNER RUNDER BUTTON (FAB-Pattern)
   ===================================================== */
.gsl-qc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;             /* Kreis */
  background: var(--gsl-paper);
  color: var(--gsl-blue);
  text-decoration: none;
  border: none;
  box-shadow: var(--gsl-shadow-md);
  cursor: pointer;
  transition:
    background   var(--gsl-duration-fast) var(--gsl-ease-out),
    color        var(--gsl-duration-fast) var(--gsl-ease-out),
    transform    var(--gsl-duration-fast) var(--gsl-ease-out),
    box-shadow   var(--gsl-duration-fast) var(--gsl-ease-out);
}

/* SVG-Icon mittig, nicht interaktiv */
.gsl-qc-btn svg {
  display: block;
  flex-shrink: 0;
}

/* =====================================================
   HOVER / FOCUS — Lift + Schatten + Farbwechsel
   ===================================================== */
.gsl-qc-btn:hover,
.gsl-qc-btn:focus-visible {
  background: var(--gsl-blue);
  color: var(--gsl-paper);
  transform: translateY(-3px);
  box-shadow: var(--gsl-shadow-lg);
  outline: none;
}

/* Focus-visible Ring für Tastaturnavigation */
.gsl-qc-btn:focus-visible {
  outline: 3px solid var(--gsl-orange-brand);
  outline-offset: 3px;
}

/* Telefon-Button: Kontakt-Orange beim Hover */
.gsl-qc-btn--tel:hover,
.gsl-qc-btn--tel:focus-visible {
  background: var(--gsl-rubric-kontakt);
  color: var(--gsl-paper);
}

/* =====================================================
   REDUCED MOTION — kein translateY, nur Farbwechsel
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .gsl-qc-btn {
    transition:
      background var(--gsl-duration-fast) var(--gsl-ease-out),
      color      var(--gsl-duration-fast) var(--gsl-ease-out);
  }

  .gsl-qc-btn:hover,
  .gsl-qc-btn:focus-visible {
    transform: none;
    box-shadow: var(--gsl-shadow-md);
  }
}

/* =====================================================
   MOBILE (<768px) — 3 Kreise horizontal, Bottom-Bar
   ===================================================== */
@media (max-width: 767px) {
  .gsl-quick-contact {
    position: fixed;
    right: auto;
    left: 0;
    bottom: 0;
    top: auto;
    transform: none;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    gap: var(--gsl-space-4);      /* 16px zwischen Kreisen */
    padding: var(--gsl-space-3) var(--gsl-space-4);
    padding-bottom: max(var(--gsl-space-3), env(safe-area-inset-bottom, 12px));
    background: var(--gsl-paper);
    box-shadow: 0 -2px 12px var(--gsl-shadow-rgba);
    z-index: 90;
  }

  /* Kreise bleiben Kreise auf Mobile — keine Pillen */
  .gsl-qc-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex: none;                   /* NICHT flex: 1 — Kreisform beibehalten */
    box-shadow: var(--gsl-shadow-sm);
  }

  /* Kein Lift auf Mobile — nur Farbwechsel */
  .gsl-qc-btn:hover,
  .gsl-qc-btn:focus-visible {
    transform: none;
    box-shadow: var(--gsl-shadow-sm);
  }
}

/* =====================================================
   FORCED COLORS (Windows High Contrast)
   ===================================================== */
@media (forced-colors: active) {
  .gsl-qc-btn {
    border: 2px solid ButtonText !important;
    background: ButtonFace !important;
    color: ButtonText !important;
    border-radius: 50% !important;
  }

  .gsl-qc-btn:hover,
  .gsl-qc-btn:focus-visible {
    background: Highlight !important;
    color: HighlightText !important;
    transform: none;
  }
}
/* source: kunden/gslotte/styles/prototype/css/styleswitcher.css sha256:03bab5a2648212823f718ba3a1710884bbb916366c20ca080ae92eeffbf8fcbc */
/**
 * Style Switcher + Back-to-Top — Grundschule Lotte
 * Prefix: gsl-styleswitcher / gsl-back-to-top
 * All values via CSS Custom Properties from tokens.css
 */

/* =====================================================
   TRIGGER BUTTON — fixed bottom-left
   ===================================================== */
.gsl-styleswitcher__trigger {
  position: fixed;
  bottom: var(--gsl-space-5);
  left:   var(--gsl-space-5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--gsl-radius-full);
  background: var(--gsl-blue);
  color: var(--gsl-paper);
  border: none;
  cursor: pointer;
  box-shadow: var(--gsl-shadow-lg);
  transition: background var(--gsl-duration-base) var(--gsl-ease-out),
              transform var(--gsl-duration-fast) var(--gsl-ease-out);
}

.gsl-styleswitcher__trigger:hover,
.gsl-styleswitcher__trigger:focus-visible {
  background: var(--gsl-blue-dark);
  transform: scale(1.06);
  outline: 3px solid var(--gsl-orange-brand);
  outline-offset: 3px;
}

.gsl-styleswitcher__trigger[aria-expanded="true"] {
  background: var(--gsl-blue-dark);
}

/* =====================================================
   PANEL — floating card above trigger
   ===================================================== */
.gsl-styleswitcher__panel {
  position: fixed;
  bottom: calc(var(--gsl-space-5) + 56px + var(--gsl-space-3));
  left: var(--gsl-space-5);
  z-index: 1100;
  width: 320px;
  max-height: calc(100vh - 10rem);
  overflow-y: auto;
  background: var(--gsl-paper);
  border-radius: var(--gsl-radius-lg);
  box-shadow: var(--gsl-shadow-xl);
  padding: var(--gsl-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-4);
  border: 1px solid var(--gsl-line);
}

.gsl-styleswitcher__panel[hidden] {
  display: none;
}

/* =====================================================
   PANEL HEADER
   ===================================================== */
.gsl-styleswitcher__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gsl-styleswitcher__panel-title {
  font-family: var(--gsl-font-sans);
  font-size: var(--gsl-fs-sm);
  font-weight: var(--gsl-fw-bold);
  color: var(--gsl-ink);
  letter-spacing: var(--gsl-tracking-wide);
  text-transform: uppercase;
}

.gsl-styleswitcher__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--gsl-radius-sm);
  background: var(--gsl-paper-cool);
  border: 1px solid var(--gsl-line);
  color: var(--gsl-ink-soft);
  cursor: pointer;
  transition: background var(--gsl-duration-fast) var(--gsl-ease-out);
  flex-shrink: 0;
}

.gsl-styleswitcher__close:hover,
.gsl-styleswitcher__close:focus-visible {
  background: var(--gsl-line);
  outline: 2px solid var(--gsl-blue);
  outline-offset: 2px;
}

/* =====================================================
   SECTIONS
   ===================================================== */
.gsl-styleswitcher__section {
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-2);
  padding-bottom: var(--gsl-space-4);
  border-bottom: 1px solid var(--gsl-line-soft);
}

.gsl-styleswitcher__section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.gsl-styleswitcher__section--reset {
  padding-top: var(--gsl-space-2);
}

.gsl-styleswitcher__section-title {
  font-family: var(--gsl-font-sans);
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-bold);
  color: var(--gsl-ink-muted);
  letter-spacing: var(--gsl-tracking-wide);
  text-transform: uppercase;
}

.gsl-styleswitcher__hint {
  font-size: 0.75rem;
  color: var(--gsl-ink-muted);
  font-style: italic;
}

/* =====================================================
   BUTTON GROUP
   ===================================================== */
.gsl-styleswitcher__btn-group {
  display: flex;
  gap: var(--gsl-space-2);
  flex-wrap: wrap;
}

.gsl-styleswitcher__btn-group--full {
  flex-direction: column;
}

.gsl-styleswitcher__btn-group button {
  flex: 1;
  min-width: 60px;
  padding: var(--gsl-space-2) var(--gsl-space-3);
  border-radius: var(--gsl-radius-sm);
  border: 2px solid var(--gsl-line);
  background: var(--gsl-paper-cool);
  color: var(--gsl-ink-soft);
  font-family: var(--gsl-font-sans);
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-medium);
  cursor: pointer;
  transition: background var(--gsl-duration-fast) var(--gsl-ease-out),
              border-color var(--gsl-duration-fast) var(--gsl-ease-out),
              color var(--gsl-duration-fast) var(--gsl-ease-out);
  text-align: center;
}

.gsl-styleswitcher__btn-group button:hover,
.gsl-styleswitcher__btn-group button:focus-visible {
  border-color: var(--gsl-blue);
  background: var(--gsl-paper);
  color: var(--gsl-ink);
  outline: 2px solid var(--gsl-blue);
  outline-offset: 2px;
}

.gsl-styleswitcher__btn-group button.is-active,
.gsl-styleswitcher__btn-group button[aria-pressed="true"] {
  background: var(--gsl-blue);
  border-color: var(--gsl-blue);
  color: var(--gsl-paper);
}

/* =====================================================
   RESET BUTTON
   ===================================================== */
.gsl-styleswitcher__reset {
  width: 100%;
  padding: var(--gsl-space-3) var(--gsl-space-4);
  border-radius: var(--gsl-radius-sm);
  border: 2px solid var(--gsl-line);
  background: transparent;
  color: var(--gsl-ink-soft);
  font-family: var(--gsl-font-sans);
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-medium);
  cursor: pointer;
  text-align: center;
  transition: background var(--gsl-duration-fast) var(--gsl-ease-out),
              color var(--gsl-duration-fast) var(--gsl-ease-out);
}

.gsl-styleswitcher__reset:hover,
.gsl-styleswitcher__reset:focus-visible {
  background: var(--gsl-paper-warm);
  color: var(--gsl-ink);
  outline: 2px solid var(--gsl-blue);
  outline-offset: 2px;
}

/* =====================================================
   BACK TO TOP — fixed bottom-right
   ===================================================== */
.gsl-back-to-top {
  position: fixed;
  bottom: var(--gsl-space-5);
  right:  var(--gsl-space-5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--gsl-radius-full);
  background: var(--gsl-paper);
  color: var(--gsl-blue);
  border: 2px solid var(--gsl-line);
  cursor: pointer;
  box-shadow: var(--gsl-shadow-md);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--gsl-duration-base) var(--gsl-ease-out),
              transform var(--gsl-duration-base) var(--gsl-ease-out),
              background var(--gsl-duration-fast) var(--gsl-ease-out);
}

.gsl-back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.gsl-back-to-top:hover,
.gsl-back-to-top:focus-visible {
  background: var(--gsl-blue);
  color: var(--gsl-paper);
  border-color: var(--gsl-blue);
  outline: 3px solid var(--gsl-orange-brand);
  outline-offset: 3px;
}

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

/* =====================================================
   FONT SCALE CLASSES
   ===================================================== */
.gsl--fs-large {
  font-size: 112% !important;
}

.gsl--fs-xlarge {
  font-size: 125% !important;
}

/* =====================================================
   HIGH CONTRAST
   ===================================================== */
body.gsl--high-contrast {
  filter: contrast(1.4);
}

/* =====================================================
   NO MOTION
   ===================================================== */
body.gsl--no-motion *,
body.gsl--no-motion *::before,
body.gsl--no-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* =====================================================
   MOBILE
   ===================================================== */
@media (max-width: 480px) {
  .gsl-styleswitcher__trigger {
    width: 48px;
    height: 48px;
  }

  .gsl-styleswitcher__panel {
    width: 95vw;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--gsl-space-5) + 48px + var(--gsl-space-3));
    right: auto;
  }

  .gsl-back-to-top {
    width: 44px;
    height: 44px;
    bottom: var(--gsl-space-4);
    right:  var(--gsl-space-4);
  }

  .gsl-styleswitcher__trigger {
    bottom: var(--gsl-space-4);
    left:   var(--gsl-space-4);
  }
}

/* Respect prefers-reduced-motion for the panel animation */
@media (prefers-reduced-motion: reduce) {
  .gsl-back-to-top {
    transition: none;
  }
  .gsl-styleswitcher__trigger {
    transition: none;
  }
}

/* =====================================================
   SPRACHVARIANTEN — Einfache Sprache
   Default: data-level-6 sichtbar, data-simple versteckt
   Bei html[data-lang="simple"]: tauschen
   ===================================================== */

/* Simple-Spans standardmäßig ausblenden */
[data-simple] {
  display: none;
}

/* Bei aktiver Einfacher Sprache: Tausch */
html[data-lang="simple"] [data-simple] {
  display: revert;
}

html[data-lang="simple"] [data-level-6] {
  display: none;
}

/* Auf Legal-Seiten: Sprachvarianten-Button nicht anzeigen */
body.no-lang-toggle .gsl-styleswitcher__section--lang {
  display: none;
}

/* Visual indicator — aktive Einfache Sprache */
html[data-lang="simple"] .gsl-styleswitcher__lang-badge {
  display: inline-block;
}

.gsl-styleswitcher__lang-badge {
  display: none;
  font-size: 0.65rem;
  font-weight: var(--gsl-fw-bold);
  background: var(--gsl-orange-brand);
  color: var(--gsl-paper);
  border-radius: var(--gsl-radius-sm);
  padding: 0 4px;
  vertical-align: middle;
  margin-left: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* =====================================================
   DARK MODE — [data-theme="dark"] auf <html>
   Aktiviert durch das Anti-FOUC-Script im TYPO3-<head> oder durch
   data-gsl-theme im Switcher (siehe styleswitcher.js).

   PRINZIP (wie Gemeinde Lotte, an das 4-Ton-Rubrik-System angepasst):
   Alle Hintergrund-/Text-Paare haengen an EIGENEN CSS Custom Properties.
   Hier werden NUR diese Properties neu belegt -- kein Bauteil-CSS wird
   dupliziert. Zwei Tokens bleiben ABSICHTLICH unveraendert, weil sie eine
   Doppelrolle haben (Text-auf-Marke UND gelegentlich Flaeche):
   --gsl-paper (immer #FFFFFF -- traegt in ~48 Stellen weisse Schrift auf
   Blau/Rubrik-Flaechen) und --gsl-blue/--gsl-blue-dark (Marken-Blau bleibt
   Marken-Blau). Die ~19 Stellen, an denen --gsl-paper wirklich als HELLE
   SEITEN-FLAECHE dient (Body, Cards, Header, Formularfelder, ...), werden
   unten einzeln auf einen dunklen Grund umgestellt. Ebenso die Handvoll
   Stellen, an denen --gsl-blue als TEXT/ICON auf einer jetzt dunklen
   Flaeche steht -- die bekommen ein helleres Link-Blau.
   ===================================================== */

[data-theme="dark"] {
  color-scheme: dark;

  /* --- Neutrale Palette --- */
  --gsl-ink:         #ECEEF3;
  --gsl-ink-soft:    #B5B9C4;
  --gsl-ink-muted:   #888C99;
  --gsl-paper-warm:  #211A12;
  --gsl-paper-cool:  #121921;
  --gsl-paper-mint:  #181F14;
  --gsl-paper-rose:  #241714;
  --gsl-line:        #2B2F38;
  --gsl-line-soft:   #22252C;

  /* --- Pastellblau-Familie (Footer, Hero-Text-Baender) --- */
  --gsl-blue-pastell:        #111F2C;
  --gsl-blue-pastell-fill:   #142B43;
  --gsl-blue-pastell-text:   #B8D1EA;
  --gsl-blue-pastell-border: #3D668F;

  /* --- 6 Rubrikfarben, 4 Toene neu belegt --- */
  /* AKTUELLES */
  --gsl-rubric-aktuelles-soft:    #321A15;
  --gsl-rubric-aktuelles-fill:    #592218;
  --gsl-rubric-aktuelles:         #D8806E;
  --gsl-rubric-aktuelles-dark:    #E1BEB7;
  /* -dark bleibt UNVERAENDERT (Original-Wert): wird ueberwiegend als
     HINTERGRUND fuer Subhero-Baender, Buttons, Pills, Kontakt-Icons
     verwendet (mit weisser/paper Schrift) -- dafuer muss er dunkel
     bleiben. Die zwei echten Text-auf-Fill-Stellen (Stats-Band,
     News-Kachel) haben unten einen eigenen, gezielten Fix. */

  /* SCHULKONZEPT */
  --gsl-rubric-schulkonzept-soft: #223215;
  --gsl-rubric-schulkonzept-fill: #355918;
  --gsl-rubric-schulkonzept:      #9ED86E;
  --gsl-rubric-schulkonzept-dark: #CAE1B7;

  /* SCHULGEMEINSCHAFT */
  --gsl-rubric-schulgemeinschaft-soft: #152C32;
  --gsl-rubric-schulgemeinschaft-fill: #184B59;
  --gsl-rubric-schulgemeinschaft:      #6EC2D8;
  --gsl-rubric-schulgemeinschaft-dark: #B7D8E1;

  /* BETREUUNG */
  --gsl-rubric-betreuung-soft:    #322A15;
  --gsl-rubric-betreuung-fill:    #594818;
  --gsl-rubric-betreuung:         #D8BC6E;
  --gsl-rubric-betreuung-dark:    #E1D6B7;

  /* KONTAKT */
  --gsl-rubric-kontakt-soft:      #322215;
  --gsl-rubric-kontakt-fill:      #593418;
  --gsl-rubric-kontakt:           #D89C6E;
  --gsl-rubric-kontakt-dark:      #E1C9B7;

  /* SERVICE */
  --gsl-rubric-service-soft:      #152132;
  --gsl-rubric-service-fill:      #183259;
  --gsl-rubric-service:           #6E99D8;
  --gsl-rubric-service-dark:      #B7C8E1;

  /* --- Neues Link-/Icon-Blau (nur fuer Text/Icons AUF jetzt-dunklen
     Flaechen -- --gsl-blue selbst bleibt Marken-Blau, siehe oben) --- */
  --gsl-blue-link-dark: #6AA8E7;
  --gsl-blue-link-dark-hover: #8FC0F2;
}

/* =====================================================
   DARK MODE — Seiten-Flaechen (echte Hintergrund-Rolle von --gsl-paper)
   Bewusst NICHT global --gsl-paper umdefiniert (siehe Prinzip oben) --
   stattdessen jede echte Flaeche einzeln, mit Rand fuer Kontur, weil
   box-shadow auf dunklem Grund kaum sichtbar ist.
   ===================================================== */
[data-theme="dark"] body {
  background: #12151A;
}

[data-theme="dark"] .gsl-header {
  background: #12151A;
}

[data-theme="dark"] .gsl-card,
[data-theme="dark"] .gsl-news,
[data-theme="dark"] .gsl-person,
[data-theme="dark"] .gsl-team-person,
[data-theme="dark"] .gsl-fv-project,
[data-theme="dark"] .gsl-fv-konto,
[data-theme="dark"] .gsl-sp-card {
  background: #181C24;
  border: 1px solid var(--gsl-line);
}

[data-theme="dark"] .gsl-leitbild-intro {
  background: #12151A;
}

[data-theme="dark"] .gsl-form__input,
[data-theme="dark"] .gsl-form__textarea {
  background: #181C24;
}
[data-theme="dark"] .gsl-form__input:focus,
[data-theme="dark"] .gsl-form__textarea:focus {
  border-color: var(--gsl-blue-link-dark);
}

[data-theme="dark"] .gsl-qc-btn,
[data-theme="dark"] .gsl-back-to-top {
  background: #181C24;
  color: var(--gsl-blue-link-dark);
}

[data-theme="dark"] .gsl-bg--paper {
  background: #181C24;
}

[data-theme="dark"] .gsl-styleswitcher__panel {
  background: #181C24;
}
[data-theme="dark"] .gsl-styleswitcher__btn-group button:hover,
[data-theme="dark"] .gsl-styleswitcher__btn-group button:focus-visible {
  background: #181C24;
  border-color: var(--gsl-blue-link-dark);
  outline-color: var(--gsl-blue-link-dark);
}

@media (max-width: 1024px) {
  [data-theme="dark"] .gsl-nav {
    background: #12151A;
  }
}

/* =====================================================
   DARK MODE — Text/Icons, die bisher --gsl-blue auf jetzt-dunklem Grund
   waren (Marken-Blau #004A99 faellt auf dunklem Hintergrund unter 4,5:1).
   ===================================================== */
[data-theme="dark"] a {
  color: var(--gsl-blue-link-dark);
}
[data-theme="dark"] a:hover {
  color: var(--gsl-blue-link-dark-hover);
}
[data-theme="dark"] .gsl-nav__link,
[data-theme="dark"] .gsl-nav__item:focus-within > .gsl-nav__link,
[data-theme="dark"] .gsl-nav__item.is-open > .gsl-nav__link,
[data-theme="dark"] .gsl-nav__item.is-active > .gsl-nav__link,
[data-theme="dark"] .gsl-breadcrumb a:hover,
[data-theme="dark"] .gsl-footer-contact__link:hover,
[data-theme="dark"] .gsl-footer-contact__link:focus-visible,
[data-theme="dark"] .gsl-footer__legal a:hover,
[data-theme="dark"] .gsl-footer__legal a:focus-visible,
[data-theme="dark"] .gsl-text--blue,
[data-theme="dark"] .gsl-rightnav__title {
  color: var(--gsl-blue-link-dark);
}
[data-theme="dark"] .gsl-hero__outro .gsl-hero__btn-secondary {
  color: var(--gsl-blue-link-dark);
  border-color: var(--gsl-blue-link-dark);
}

/* =====================================================
   DARK MODE — Gegenrichtung: Stellen, die gsl-rubric-*-dark als
   HINTERGRUND nutzen (mit weisser/paper Schrift), nicht als Text.
   -dark ist oben auf HELL geflippt (dominante Rolle: Text auf jetzt
   dunklem -fill/-soft, u.a. die 6 grossen Startseiten-Kacheln). Diese
   Stellen hier sind die Gegenrichtung und bekommen den ORIGINAL-
   (Hell-Modus-)Farbwert direkt zurueck, statt dem Token zu folgen.
   ===================================================== */

/* Generisch kaskadierend (jede Rubrik) -- Button/Pill/Subhero-Band lesen
   --gsl-rubric-dark aus dem naechsten .gsl-rubric-{name}-Vorfahren. */
[data-theme="dark"] .gsl-rubric-aktuelles .gsl-btn--rubric,
[data-theme="dark"] .gsl-rubric-aktuelles.gsl-btn--rubric,
[data-theme="dark"] .gsl-rubric-aktuelles .gsl-pill--rubric,
[data-theme="dark"] .gsl-rubric-aktuelles.gsl-pill--rubric,
[data-theme="dark"] .gsl-subhero.gsl-rubric-aktuelles,
[data-theme="dark"] .gsl-bg--rubric-dark.gsl-rubric-aktuelles {
  background: #6B1E3F;
}
[data-theme="dark"] .gsl-rubric-schulkonzept .gsl-btn--rubric,
[data-theme="dark"] .gsl-rubric-schulkonzept.gsl-btn--rubric,
[data-theme="dark"] .gsl-rubric-schulkonzept .gsl-pill--rubric,
[data-theme="dark"] .gsl-rubric-schulkonzept.gsl-pill--rubric,
[data-theme="dark"] .gsl-subhero.gsl-rubric-schulkonzept,
[data-theme="dark"] .gsl-bg--rubric-dark.gsl-rubric-schulkonzept {
  background: #2E3D1A;
}
[data-theme="dark"] .gsl-rubric-schulgemeinschaft .gsl-btn--rubric,
[data-theme="dark"] .gsl-rubric-schulgemeinschaft.gsl-btn--rubric,
[data-theme="dark"] .gsl-rubric-schulgemeinschaft .gsl-pill--rubric,
[data-theme="dark"] .gsl-rubric-schulgemeinschaft.gsl-pill--rubric,
[data-theme="dark"] .gsl-subhero.gsl-rubric-schulgemeinschaft,
[data-theme="dark"] .gsl-bg--rubric-dark.gsl-rubric-schulgemeinschaft {
  background: #163A47;
}
[data-theme="dark"] .gsl-rubric-betreuung .gsl-btn--rubric,
[data-theme="dark"] .gsl-rubric-betreuung.gsl-btn--rubric,
[data-theme="dark"] .gsl-rubric-betreuung .gsl-pill--rubric,
[data-theme="dark"] .gsl-rubric-betreuung.gsl-pill--rubric,
[data-theme="dark"] .gsl-subhero.gsl-rubric-betreuung,
[data-theme="dark"] .gsl-bg--rubric-dark.gsl-rubric-betreuung {
  background: #2E3D1A;
}
[data-theme="dark"] .gsl-rubric-kontakt .gsl-btn--rubric,
[data-theme="dark"] .gsl-rubric-kontakt.gsl-btn--rubric,
[data-theme="dark"] .gsl-rubric-kontakt .gsl-pill--rubric,
[data-theme="dark"] .gsl-rubric-kontakt.gsl-pill--rubric,
[data-theme="dark"] .gsl-subhero.gsl-rubric-kontakt,
[data-theme="dark"] .gsl-bg--rubric-dark.gsl-rubric-kontakt,
[data-theme="dark"] .gsl-bg--rubric-dark {
  /* .gsl-bg--rubric-dark ohne Rubrik-Klasse faellt selbst auf Kontakt
     zurueck (var(--rubric-accent-dark, var(--gsl-rubric-kontakt-dark))) --
     derselbe Default gilt hier. */
  background: #1F3D5C;
}
[data-theme="dark"] .gsl-rubric-service .gsl-btn--rubric,
[data-theme="dark"] .gsl-rubric-service.gsl-btn--rubric,
[data-theme="dark"] .gsl-rubric-service .gsl-pill--rubric,
[data-theme="dark"] .gsl-rubric-service.gsl-pill--rubric,
[data-theme="dark"] .gsl-subhero.gsl-rubric-service,
[data-theme="dark"] .gsl-bg--rubric-dark.gsl-rubric-service {
  background: #1F2D52;
}
/* .gsl-subhero ohne Rubrik-Klasse faellt auf --gsl-blue zurueck (unveraendert). */

/* Fest verdrahtete Einzelstellen (keine Kaskade -- direkter Token-Bezug) */
[data-theme="dark"] .gsl-hero__btn-primary:hover,
[data-theme="dark"] .gsl-hero__btn-primary:focus-visible {
  background: #1F3D5C; /* kontakt-dark, Original-Wert */
}
[data-theme="dark"] .gsl-kp-sidebar-card--dark {
  background: #163A47; /* schulgemeinschaft-dark, Original-Wert */
}
[data-theme="dark"] .gsl-action-icon--phone    { background: #1F3D5C; }
[data-theme="dark"] .gsl-action-icon--calendar { background: #163A47; }
[data-theme="dark"] .gsl-action-icon--mail     { background: #6B1E3F; }
[data-theme="dark"] .gsl-action-icon--iserv    { background: #2E3D1A; }
[data-theme="dark"] .gsl-bg--rubric-aktuelles-dark         { background: #6B1E3F; }
[data-theme="dark"] .gsl-bg--rubric-schulgemeinschaft-dark { background: #163A47; }
[data-theme="dark"] .gsl-bg--rubric-betreuung-dark         { background: #2E3D1A; }
[data-theme="dark"] .gsl-bg--rubric-kontakt-dark           { background: #1F3D5C; }
[data-theme="dark"] .gsl-bg--rubric-service-dark           { background: #1F2D52; }

/* news-aktuelles.css + projects.css: beide Dateien sind fest auf die
   Rubrik "Aktuelles" verdrahtet (/aktuelles-Listing, Projektgalerie). */
[data-theme="dark"] .gsl-pill--rubric,
[data-theme="dark"] .gsl-news__label,
[data-theme="dark"] .gsl-tile.gsl-proj,
[data-theme="dark"] .gsl-proj__media,
[data-theme="dark"] .gsl-proj__body,
[data-theme="dark"] .gsl-btn.gsl-btn--proj {
  background: #6B1E3F;
}
[data-theme="dark"] .gsl-btn.gsl-btn--proj:hover {
  background: color-mix(in oklch, #6B1E3F, black 15%);
}

/* Sprunglink: background nutzt --gsl-ink als dunkle Flaeche (Rolle
   "Hervorhebung"), nicht als Textfarbe -- bleibt darum bewusst fest
   dunkel statt dem Token-Flip zu folgen (sonst weiss auf fast-weiss). */
[data-theme="dark"] .gsl-skip-link {
  background: #14171D;
  color: #FFFFFF;
}
/* M54-COMPAT-NATIVE-SCROLL - revised 2026-08-24
 * The bound prototype runs GSAP ScrollSmoother, which forces #smooth-wrapper
 * into position:fixed. The sticky header therefore leaves the normal flow and
 * the prototype compensates with padding-top: var(--gsl-header-height) on
 * #smooth-content. Local TYPO3 scrolls natively (Lenis), so the header stayed
 * in flow and consumed its real 142px instead of the token's 118px - every
 * page started exactly 24px too low against the frozen prototype.
 * Measured 2026-08-24: subhero top 118 (prototype) vs 142 (TYPO3), header
 * height 142 on both sides, token 118px on both sides.
 *
 * Fix: reproduce the prototype's geometry, not the prototype's library. The
 * header leaves the flow here as well and the token-sized spacer applies
 * again. No negative margin and no per-page patch - the token drives it, so
 * the same rule carries over to the GS Wersen and GS Bueren tenants.
 */
.gsl-header {
  position: fixed;
  left: 0;
  right: 0;
}
#smooth-wrapper[data-gsl-native-scroll="true"] > #smooth-content {
  padding-top: var(--gsl-header-height);
}