/* ============================================================
   SBNE — main.css
   Foundational layer only (Phase 2): reset, container, base type.
   Section & component styles are added in Phase 3 below this block.
   All values reference tokens from style.css — no hardcoded hex/px
   that should be a token.
   ============================================================ */

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

/* The bare [hidden] attribute must win over component display rules
   (e.g. .btn-cta { display: inline-flex }) so JS/PHP toggling works. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  color: var(--color-black);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
}

/* ---------- Accessibility ---------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 24px;
  background: var(--color-black);
  color: var(--color-white);
}
.skip-link:focus {
  /* Reveal it on keyboard focus — override the .screen-reader-text clipping so
     the bypass link is actually visible (WCAG 2.4.1). */
  left: 0;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
}

/* Per-module "skip section" bypass links (WCAG 2.4.1). Hidden via
   .screen-reader-text; on keyboard focus they appear at their in-flow position
   (no layout shift) as a solid black chip. */
.sbne-skip-link:focus {
  z-index: 100000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 20px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: nowrap;
  background: var(--color-black);
  color: var(--color-white);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  border-radius: 2px;
}

/* WCAG 9.2.4.7 — site-wide visible keyboard-focus frame (briefing Global Rule 2).
   Keyboard-only (:focus-visible) so it never affects mouse clicks or screenshots.
   Section-specific focus styles (nav, footer, CTAs) layer on top of this default. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-orange-red);
  outline-offset: 3px;
}

/* ---------- Layout container ----------
   Full-bleed section backgrounds wrap a centered content container.
   1920 design = 1696 content + 2×112 gutters. Gutters scale with the
   viewport (5.8333vw) and hit exactly 112px at 1920px. */
.site-container {
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 5.8333vw, 112px);
}

/* ---------- Base typography ---------- */
h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-heading); font-weight: var(--fw-bold); }
p  { font-size: var(--fs-body); line-height: var(--lh-body); }

/* ============================================================
   PHASE 3 — section & component styles.
   Naming: flat kebab-case, section-prefixed. No BEM double-dash.
   Design width 1920px. clamp() max = exact Figma px (hits at 1920).
   ============================================================ */

/* ---------- Fluid scale helpers (repeated values) ---------- */
:root {
  --pad-section-y: clamp(64px, 5.8333vw, 112px);   /* 112px vertical section padding */
  --gutter-inner: clamp(20px, 5.8333vw, 112px);    /* matches .site-container padding */
  /* Was a wider RIGHT gutter (176px @1920) that offset the overview/teaser modules to
     the left per the Figma. Per client request every module now uses EQUAL left/right
     padding, so this just mirrors --gutter-inner (kept as an alias for the rules and the
     projekte arrows that reference it, which stay flush with the balanced content edge). */
  --gutter-wide: var(--gutter-inner);
}

/* ---------- Section scaffold ---------- */
.section {
  width: 100%;
}
.section-inner {
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--gutter-inner);
}

/* ---------- Section header (eyebrow/heading + intro + cta) ---------- */
.section-heading {
  font-size: var(--fs-h2);           /* 48px */
  line-height: var(--lh-heading);    /* 1.3 */
  font-weight: var(--fw-bold);
  color: var(--color-black);
}
.section-intro {
  font-size: var(--fs-body);         /* 22px */
  line-height: var(--lh-body);       /* 1.5 */
  font-weight: var(--fw-regular);
  color: var(--color-black);
}

/* ============================================================
   Reusable CTA button — black body, white text, two bg-colored
   corner notches (top-right + bottom-left) that grow on hover.
   Notch color = section background, set via --btn-notch per section.
   Component: CTA black button (18:395). Hover: 1022ms gentle.
   ============================================================ */
.btn-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 56px 12px 48px;
  background: var(--color-black);
  color: var(--color-white);
  font-size: var(--fs-body);         /* 22px */
  line-height: 1.5;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
}
.btn-cta__deco {
  position: absolute;
  background: var(--btn-notch, var(--color-white));   /* = section bg (cut-out) */
  transition: width var(--transition-cta), transform var(--transition-cta);
}
.btn-cta__deco--tr {
  top: 0;
  right: 0;
  width: 21px;
  height: 19px;
}
.btn-cta__deco--bl {
  bottom: 0;
  left: 0;
  width: 9px;
  height: 12px;
}
.btn-cta:hover .btn-cta__deco--tr { width: 44px; }
.btn-cta:hover .btn-cta__deco--bl { width: 32px; }

/* ============================================================
   Reusable outline purple button — "Mehr Informationen" (events),
   "Mehr erfahren" (news). box-shadow inset border in purple-mid.
   Text black. Hover (news): border 3px -> 5px, 300ms ease-out.
   ============================================================ */
.btn-outline-purple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: transparent;
  color: var(--color-black);
  font-weight: var(--fw-bold);
  line-height: 1.3;                          /* 31.2px @24px in Figma */
  white-space: nowrap;
  box-shadow: inset 0 0 0 3px var(--color-purple-mid);
  transition: box-shadow var(--transition-hover);
}
.btn-outline-purple:hover {
  box-shadow: inset 0 0 0 5px var(--color-purple-mid);
}

/* ============================================================
   Reusable "+ Mehr lesen" plus link (bildungsangebote, projekte).
   Purple-mid text, animated plus glyph. 300ms ease-out.
   ============================================================ */
.link-plus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-purple-mid);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.link-plus__icon {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}
.link-plus__icon::before,
.link-plus__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: currentColor;
}
.link-plus__icon::before { width: 100%; height: 2px; }  /* horizontal bar */
.link-plus__icon::after  { width: 2px; height: 100%; }  /* vertical bar */

/* ============================================================
   NAV — Sticky primary navigation (Nav 598:6498)
   Bar 1920x99, translucent white + backdrop blur, bottom border.
   Two vertical dividers: before nav links, before KONTAKT.
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 99px;
  border-bottom: 1px solid var(--color-black);
}
/* Glass on a pseudo-element, NOT on .site-header itself: a backdrop-filter on the
   header would establish a backdrop root that neutralises the dropdown's own
   backdrop-filter (a descendant), making it look a different opacity. This way
   the bar and the dropdown are independent, identical glass layers. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  z-index: -1;
}
.site-header__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  max-width: var(--site-max);
  height: 100%;
  margin-inline: auto;
}
.site-header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 10px 24px;
}
.site-header__logo img {
  height: 75px;
  width: auto;
}
.site-header__nav-group {
  display: flex;
  align-items: stretch;
}

/* Primary nav links */
.primary-nav {
  display: flex;
  align-items: center;
  padding: 0 36px;
  border-left: 1px solid var(--color-black);
}
.primary-nav__list {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-body);          /* 22px @1920 */
  line-height: 1;
  font-weight: var(--fw-medium);      /* 500 */
  color: var(--color-black);
  white-space: nowrap;
  transition: color var(--transition-nav);   /* 0.5s ease-out */
}
.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-orange-red);     /* #e82000 */
}
/* Active page — the current menu item (and the dropdown parent of the current
   sub-item) reads red, like the hover state, to signal where the user is. */
.nav-link.is-current,
.nav-dropdown__toggle.is-current,
.nav-dropdown__link.is-current {
  color: var(--color-orange-red);
}

/* Dropdown */
.nav-dropdown {
  position: static;   /* submenu anchors to the sticky .site-header, not this <li> */
}
.nav-dropdown__toggle {
  gap: 10px;
}
.nav-dropdown.is-open .nav-dropdown__toggle {
  color: var(--color-orange-red);   /* Figma open state: toggle + chevron turn red */
}
.nav-dropdown__chevron {
  display: inline-flex;
  align-items: center;
  transition: transform var(--transition-nav);
}
.nav-dropdown__chevron svg {
  width: 18px;
  height: 12px;
}
.nav-dropdown.is-open .nav-dropdown__chevron {
  transform: rotate(180deg);
}
/* Figma 489:6553 — the open submenu is a FULL-WIDTH bar under the whole header
   (not a small box under the toggle): 99px tall, white@0.9 + blur, 1px bottom
   border, links on one row right-aligned to the 1920 content edge. */
.nav-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 36px;
  height: 99px;
  margin: 0;
  padding-block: 0;
  padding-inline: 36px max(36px, calc((100% - var(--site-max)) / 2 + 36px));
  list-style: none;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-top: 1px solid var(--color-black);      /* the line between the bar and the dropdown */
  border-bottom: 1px solid var(--color-black);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s;
  z-index: -1;   /* slides out from behind the header bar */
}
.nav-dropdown.is-open .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown__menu > li {
  display: flex;
  align-items: center;
}
.nav-dropdown__link {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-black);
  white-space: nowrap;
  transition: color var(--transition-nav);
}
.nav-dropdown__link:hover,
.nav-dropdown__link:focus-visible {
  color: var(--color-orange-red);
}

/* KONTAKT button */
.nav-kontakt {
  display: inline-flex;
  align-items: center;
  padding: 16px 36px;
  background: var(--color-white);
  border-left: 1px solid var(--color-black);
  color: var(--color-purple);         /* #ac61ff */
  font-size: var(--fs-label);         /* 20px @1920 */
  line-height: 1;
  font-weight: var(--fw-semibold);    /* 600 */
  white-space: nowrap;
  transition: background-color var(--transition-hover), color var(--transition-hover);
}
.nav-kontakt:hover,
.nav-kontakt:focus-visible {
  background: var(--color-black);
  color: var(--color-orange);         /* #f85739 */
}

/* Mobile burger — hidden on desktop, activated in Phase 4 */
.nav-burger {
  display: none;
}

/* ============================================================
   HERO (Hero Big 1077:5716)
   Grey media inset 32px (L/R + top gap below nav). Purple-outline
   box (5px #bf82ff) with 36px gap around a white card holding the H1.
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(16px, 1.6667vw, 32px) clamp(16px, 1.6667vw, 32px) 0;
  background: var(--color-white);
}
.hero__media {
  position: relative;
  width: 100%;
  height: clamp(480px, 47.7604vw, 917px);   /* 917px @1920 */
  overflow: hidden;
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__card {
  position: absolute;
  left: clamp(40px, 5.8333vw, 112px);        /* 112px @1920 from image edge */
  bottom: clamp(40px, 5.8333vw, 112px);
  width: fit-content;
  max-width: calc(100% - clamp(40px, 5.8333vw, 112px) - clamp(16px, 1.6667vw, 32px));
  padding: clamp(20px, 1.875vw, 36px);       /* 36px transparent gap -> grey shows */
  box-shadow: inset 0 0 0 5px var(--color-purple-light);   /* #bf82ff outline */
}
.hero__card-inner {
  background: var(--color-white);
  padding: clamp(28px, 3.3333vw, 64px);      /* 64px @1920 */
}
.hero__title {
  margin: 0;                                 /* reset default <h1> margin */
  font-size: var(--fs-h1);                   /* 56px @1920 */
  line-height: var(--lh-heading);            /* 1.3 -> 72.8px */
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

/* ============================================================
   ABOUT / INTRO (155:2492)
   Row: media 688x917 + text column 896. Section padding 112, gap 112.
   ============================================================ */
.about {
  background: var(--color-white);
}
.about__inner {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5.8333vw, 112px);         /* 112px @1920 */
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  padding: var(--pad-section-y) var(--gutter-inner);
}
.about__media {
  flex: 0 0 auto;
  width: clamp(300px, 35.8333vw, 688px);     /* 688px @1920 */
  aspect-ratio: 688 / 917;
  overflow: hidden;
}
.about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;                                 /* heading -> body */
}
.about__heading-wrap {
  padding-right: clamp(24px, 3.3333vw, 64px);
}
.about__body-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;                   /* keep HUG button compact */
  gap: clamp(28px, 2.5vw, 48px);             /* body -> button, 48px @1920 */
  padding-left: clamp(24px, 3.3333vw, 64px);
}

/* ============================================================
   EVENTS & TERMINE (228:3700) — cyan section
   Header (896) + 2x2 event grid with 4px cyan gridlines + centre image.
   Section padding 112/176/112/112, gap 80.
   ============================================================ */
.events {
  background: var(--color-cyan);             /* #00caff */
  --btn-notch: var(--color-cyan);            /* CTA corner cut-outs = section bg */
}
.events__inner {
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4.1667vw, 80px);          /* 80px @1920 */
  padding: var(--pad-section-y) var(--gutter-wide) var(--pad-section-y) var(--gutter-inner);
}
.events__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: clamp(320px, 46.6667vw, 896px);     /* 896px @1920 */
  max-width: 100%;
}
.events__heading-wrap {
  padding-right: clamp(24px, 3.3333vw, 64px);
}
.events__intro-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(24px, 1.875vw, 36px);           /* 36px @1920 */
  padding-left: clamp(24px, 3.3333vw, 64px);
}

/* Event grid — cyan background shows through 4px gaps as gridlines.
   Capped at Figma column sum (501+565+501 + 16px lines = 1583) and centred
   so cards land at their Figma 501px width (keeps details on two lines). */
.events-grid {
  display: flex;
  gap: 4px;
  padding: 4px;
  width: 100%;
  max-width: 1583px;
  margin-inline: auto;
  background: var(--color-cyan);             /* gridlines + outer border */
}
.events-grid__col {
  flex: 501 1 0;                             /* proportional to Figma 501 */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.events-grid__media {
  position: relative;                        /* img absolute -> out of flow, keeps row height column-driven */
  flex: 565 1 0;                             /* proportional to Figma 565 */
  min-width: 0;                              /* ignore img intrinsic */
  background: var(--color-cyan-light);       /* #d1f5ff */
  overflow: hidden;
}
.events-grid__media img {
  position: absolute;
  top: clamp(16px, 1.6667vw, 32px);          /* Figma Image container pad T32 */
  left: clamp(16px, 1.6667vw, 32px);         /* pad L32 */
  width: calc(100% - 2 * clamp(16px, 1.6667vw, 32px));    /* pad L/R 32 -> 565-64 = 501 @1920 */
  height: calc(100% - 2 * clamp(16px, 1.6667vw, 32px));   /* pad T/B 32 (was vertically centred -> float) */
  object-fit: cover;
}
.event-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;               /* Figma: content top-aligned, not centred/spread */
  gap: 24px;
  padding: clamp(20px, 1.6667vw, 32px);      /* 32px @1920 */
  background: var(--color-cyan-light);       /* #d1f5ff */
}
.event-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;                                 /* title -> details */
}
.event-card__title {
  font-size: var(--fs-h3);                   /* 32px @1920 */
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}
.event-card__details {
  font-size: var(--fs-body);                 /* 22px @1920 */
  line-height: var(--lh-body);
  color: var(--color-black);
}
.event-card__cta {
  align-self: flex-start;
  font-size: var(--fs-h4);                   /* 24px @1920 */
}

/* ============================================================
   AKTUELLES / NEWS (155:2502) — white section
   Header (896) + 3-card news grid joined by cyan gridlines.
   Section padding 112/176/112/112, gap 64.
   ============================================================ */
.aktuelles {
  background: var(--color-white);
}
.aktuelles__inner {
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 3.3333vw, 64px);          /* 64px @1920 */
  padding: var(--pad-section-y) var(--gutter-wide) var(--pad-section-y) var(--gutter-inner);
}
.aktuelles__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: clamp(320px, 46.6667vw, 896px);
  max-width: 100%;
}
.aktuelles__heading-wrap {
  padding-right: clamp(24px, 3.3333vw, 64px);
}
.aktuelles__intro-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(24px, 1.875vw, 36px);           /* 36px @1920 */
  padding-left: clamp(24px, 3.3333vw, 64px);
}

/* News grid — cyan gridlines via 4px gaps + inset outer border (no added
   height, matching Figma's inset stroke). Capped at 3x523 + 8px gaps = 1577. */
.aktuelles-grid {
  display: flex;
  gap: 3px;                                  /* 3px cyan gridlines between cards */
  width: 100%;
  max-width: 1632px;                         /* Figma panel 1632 */
  margin-inline: auto;
  background: var(--color-cyan);             /* cyan shows through the 3px gaps + padding */
  padding: 3px;                              /* 3px cyan outer border — same width as the dividers */
  box-sizing: border-box;
}
/* Cards are white (from .news-card); the cyan grid shows only as uniform 3px lines
   — identical technique to the Aktuelles-Übersicht .mod-overview__grid--news, so
   both modules match. (The old per-card inset box-shadow doubled to 6px between
   touching cards while the outer frame stayed 3px.) */
.news-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 1.6667vw, 32px);          /* img -> body, 32px */
  padding: clamp(20px, 1.6667vw, 32px);      /* 32px @1920 */
  background: var(--color-white);
}
.news-card__img-wrap {
  width: 100%;
  aspect-ratio: 459 / 437;
  overflow: hidden;
}
.news-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s linear;         /* Figma: LINEAR 0.3s image zoom */
}
.news-card:hover .news-card__img {
  transform: scale(1.05);                    /* 505/481 hover zoom */
}
.news-card__body {
  flex: 1 1 auto;                            /* fill the card so the CTA can pin to the bottom */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;                                 /* category -> group -> cta */
}
.news-card__category {
  font-size: var(--fs-label);                /* 20px @1920 */
  line-height: 1.5;
  font-weight: var(--fw-regular);
  color: var(--color-black);
}
.news-card__group {
  display: flex;
  flex-direction: column;
  gap: 10px;                                 /* title -> excerpt */
}
.news-card__title {
  font-size: var(--fs-h3);                   /* 32px @1920 */
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}
.news-card__excerpt {
  font-size: var(--fs-body);                 /* 22px @1920 */
  line-height: var(--lh-body);
  color: var(--color-black);
}
.news-card__cta {
  margin-top: auto;                          /* pin to the bottom -> uniform button position regardless of text length */
  font-size: var(--fs-h4);                   /* 24px @1920 */
}

/* ============================================================
   BILDUNGSANGEBOTE (380:4393) — purple section
   Header + two school cards (image + cyan-framed white text card).
   Section padding 112, inner gap 96, cards gap 32.
   ============================================================ */
.bildungsangebote {
  background: var(--color-purple);           /* #ac61ff */
  --btn-notch: var(--color-purple);          /* CTA cut-outs = section bg */
}
.bildungsangebote__inner {
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 5vw, 96px);               /* 96px @1920 */
  padding: var(--pad-section-y) var(--gutter-inner);
}
.bildungsangebote__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.bildungsangebote__heading-wrap {
  width: clamp(320px, 45.5729vw, 875px);     /* 875px @1920 */
  max-width: 100%;
  padding-right: clamp(24px, 3.3333vw, 64px);
}
.bildungsangebote__intro-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(24px, 1.875vw, 36px);           /* 36px @1920 */
  width: clamp(300px, 38.5938vw, 741px);     /* 741px @1920 */
  max-width: 100%;
  padding-left: clamp(24px, 3.3333vw, 64px);
}
.bildungsangebote__cards {
  display: flex;
  align-items: center;                        /* Figma "Cards" row counterAxisAlignItems: CENTER (aspect-ratio cards must not stretch) */
  gap: clamp(16px, 1.6667vw, 32px);          /* 32px @1920 */
}

/* School card — full image with a cyan-framed white text card overlapping */
.school-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 832 / 624;
  overflow: hidden;
}
.school-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s linear;         /* Figma: LINEAR 0.3s image zoom */
}
.school-card:hover .school-card__img {
  transform: scale(1.0288);                   /* hover cssScale from audit */
}
.school-card__frame {
  position: absolute;
  left: clamp(16px, 1.6667vw, 32px);
  right: clamp(16px, 1.6667vw, 32px);
  bottom: clamp(16px, 1.6667vw, 32px);
  padding: clamp(16px, 1.6667vw, 32px);      /* 32px image gap round white card */
  box-shadow: inset 0 0 0 4px var(--color-cyan);   /* #00caff frame */
}
.school-card__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(16px, 1.25vw, 24px);        /* 24px @1920 */
  background: var(--color-white);
}
.school-card__title {
  font-size: var(--fs-h3);                   /* 32px @1920 */
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}
.school-card__body {
  font-size: var(--fs-body);                 /* 22px @1920 */
  line-height: var(--lh-body);
  color: var(--color-black);
}
.school-card__cta {
  margin-top: 4px;
  font-size: var(--fs-h4);                   /* 24px @1920 */
}

/* ============================================================
   PROJEKTE (155:2584) — white section, carousel
   Header + arrows (top-right) + 3 project cards (image with a
   1px-bordered white text card overlapping the lower portion).
   Section padding 112/176/112/112, gap 64.
   ============================================================ */
.projekte {
  position: relative;                        /* anchor carousel arrows */
  background: var(--color-white);
}
.projekte__inner {
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 3.3333vw, 64px);          /* 64px @1920 */
  padding: var(--pad-section-y) var(--gutter-wide) var(--pad-section-y) var(--gutter-inner);
}
.projekte__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: clamp(320px, 46.6667vw, 896px);
  max-width: 100%;
}
.projekte__heading-wrap {
  padding-right: clamp(24px, 3.3333vw, 64px);
}
.projekte__intro-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(24px, 1.875vw, 36px);           /* 36px @1920 */
  padding-left: clamp(24px, 3.3333vw, 64px);
}

/* Carousel arrows — top-right, flush with content right edge */
.projekte__arrows {
  position: absolute;
  top: clamp(180px, 17.9167vw, 344px);       /* 344px @1920 */
  right: var(--gutter-wide);                 /* flush with the content right edge (176px @1920) */
  display: flex;
  gap: 16px;
  z-index: 2;
}
.carousel-arrow {
  width: 57px;
  height: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-black);
}
.carousel-arrow__icon {
  display: inline-flex;
  color: var(--color-purple-light);          /* #bf82ff arrow */
  transition: color 0.3s linear, transform 0.3s linear;
}
.carousel-arrow__icon svg {
  width: 34px;
  height: 30px;
}
.carousel-arrow--prev .carousel-arrow__icon {
  transform: scaleX(-1);                      /* mirror -> points left */
}
.carousel-arrow--next:hover .carousel-arrow__icon,
.carousel-arrow--next:focus-visible .carousel-arrow__icon {
  color: var(--color-orange);                 /* #f85739 */
  transform: translateX(4px);
}
.carousel-arrow--prev:hover .carousel-arrow__icon,
.carousel-arrow--prev:focus-visible .carousel-arrow__icon {
  color: var(--color-orange);
  transform: scaleX(-1) translateX(4px);      /* nudge left */
}

/* Project cards */
.projekte__cards {
  display: flex;
  align-items: center;                        /* Figma cards container counterAxisAlignItems: CENTER (aspect-ratio cards must not stretch) */
  gap: 24px;
  width: 100%;
  max-width: 1569px;                          /* 3x507 + 2x24 */
  margin-inline: auto;
}
.project-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 507 / 726;
  overflow: hidden;
}
.project-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s linear;          /* Figma: LINEAR 0.3s, scale 1.02 */
}
.project-card:hover .project-card__img {
  transform: scale(1.02);
}
.project-card__text {
  position: absolute;
  left: clamp(12px, 1.25vw, 24px);
  right: clamp(12px, 1.25vw, 24px);
  bottom: clamp(16px, 1.6667vw, 32px);
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-black);
}
.project-card__row {
  display: flex;
  align-items: center;
  padding: clamp(16px, 1.25vw, 24px);        /* 24px @1920 */
}
.project-card__cat-row,
.project-card__title-row {
  border-bottom: 1px solid var(--color-black);
}
.project-card__category {
  font-size: var(--fs-label);                /* 20px @1920 */
  line-height: 1.5;
  font-weight: var(--fw-regular);
  color: var(--color-black);
  text-transform: uppercase;                 /* Figma 155:2584: BILDUNG / SERIE / KIEZ */
}
.project-card__title {
  font-size: var(--fs-h3);                   /* 32px @1920 */
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}
.project-card__cta {
  font-size: var(--fs-h4);                   /* 24px @1920 */
}

/* Projekte-Teaser MODULE only: header + arrows share a top row so the arrows
   sit level with the header's CTA button (Figma 155:2584) and never overlap the
   cards, whatever the intro length. The home carousel keeps its absolute arrows. */
.mod-projekte .projekte__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.mod-projekte .projekte__arrows {
  position: static;                            /* was absolute top:344/right:176 -> overlapped cards */
  flex: none;
}

/* Projekte-Teaser MODULE only (155:2584): horizontal slider driven by
   modules.js initSliders(). Unlike the home carousel (which reorders a fixed
   3-card set), the module can hold many projects and must slide them 3-up at
   a fixed 507px card width. Cards inset to 176/176 (symmetric in the section),
   matching the header intro indent. Desktop only; <=1024px keeps the shared
   stacked fallback and hides the arrows. */
@media (min-width: 1025px) {
  .mod-projekte .projekte__viewport {
    overflow: hidden;
    margin-left: clamp(24px, 3.3333vw, 64px);  /* 64 @1920 -> cards start at 176 */
  }
  .mod-projekte .projekte__cards {
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: none;
    margin-inline: 0;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .mod-projekte .projekte__cards::-webkit-scrollbar { display: none; }
  .mod-projekte .project-card {
    flex: 0 0 clamp(280px, 26.4vw, 507px);     /* 507 @1920; 3 fill the viewport */
    scroll-snap-align: start;
  }
}
/* Module stacked fallback (<=1024px): the card's children are all absolutely
   positioned, so without a set width the flex:none card collapses to 0.
   Give it the full column width (aspect-ratio then drives the height). */
@media (max-width: 1024px) {
  .mod-projekte .project-card { width: 100%; }
}

/* ============================================================
   PARTNERSCHAFTEN (228:3741) — orange section
   Centred header + auto-scroll partner marquee + pause control.
   Section padding 112, gap 96.
   ============================================================ */
.partnerschaften {
  background: var(--color-orange);           /* #f85739 */
  --btn-notch: var(--color-orange);          /* CTA cut-outs = section bg */
}
.partnerschaften__inner {
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(48px, 5vw, 96px);               /* 96px @1920 */
  padding: var(--pad-section-y) var(--gutter-inner);
}
.partnerschaften__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: clamp(320px, 43.3333vw, 832px);     /* 832px @1920 */
  max-width: 100%;
}
.partnerschaften__heading {
  text-align: center;
}
.partnerschaften__intro-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 1.875vw, 36px);           /* 36px @1920 */
}
.partnerschaften__intro {
  text-align: center;
}
.partnerschaften__marquee-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: var(--container-max);           /* 1696px */
}

/* Marquee — 12 boxes (6 unique x2), scroll left -50% for seamless loop */
.partner-marquee {
  overflow: hidden;
  width: 100%;
}
.partner-marquee__track {
  display: flex;
  width: max-content;
  animation: partner-scroll 9s linear infinite;   /* Figma: LEFT 9s linear loop */
}
.partner-marquee.is-paused .partner-marquee__track {
  animation-play-state: paused;
}
@keyframes partner-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .partner-marquee__track { animation: none; }
}
.partner-logo {
  flex: 0 0 auto;
  width: 256px;
  height: 156px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  margin-left: -1px;                         /* share 1px borders (255 spacing) */
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-black);
}
.partner-logo img {
  max-width: 100%;
  max-height: 124px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Pause control */
.marquee-pause {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-black);
}
.marquee-pause__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4.57px;
  width: 36px;
  height: 36px;
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-black);
}
.marquee-pause__bar {
  width: 6px;
  height: 19px;
  background: var(--color-black);
  border-radius: 1px;
}
.marquee-pause__label {
  font-size: var(--fs-small);                /* 18px @1920 */
  line-height: 1.5;
  font-weight: var(--fw-semibold);
  color: var(--color-black);
}

/* ============================================================
   FOOTER (213:654) — black, white-bordered cells
   Top row: brand (SBNE + Berlin) | links. Bottom bar: copyright | legal.
   Section padding 112.
   ============================================================ */
.site-footer {
  background: var(--color-black);
}
.site-footer__inner {
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  padding: var(--pad-section-y) var(--gutter-inner);
}
.site-footer__top {
  display: flex;
  align-items: stretch;
  /* min-height (not a fixed height) so the links box can GROW taller when the menu
     wraps to more rows than the band fits (e.g. mobile landscape / larger text),
     instead of the last links (Über Uns) overflowing onto the border below. */
  min-height: clamp(148px, 12.2917vw, 236px);    /* 236px @1920 */
}
.site-footer__brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(24px, 3.3333vw, 64px);          /* 64px @1920 */
  padding-inline: clamp(24px, 3.3333vw, 64px);
  box-shadow: inset 0 0 0 1px var(--color-white);
}
.site-footer__logo {
  width: auto;
  height: clamp(72px, 6.25vw, 120px);        /* 120px @1920 */
}
.site-footer__berlin {
  width: auto;
  height: clamp(72px, 6.25vw, 120px);
  box-shadow: inset 0 0 0 1px var(--color-white);
}
.site-footer__links {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  align-content: flex-end;                   /* pack wrapped rows together at the bottom with the real 36px gap, instead of stretching them apart / cramming them onto the border */
  gap: 36px;
  padding: clamp(24px, 3.3333vw, 64px);      /* 64px @1920 */
  box-shadow: inset 0 0 0 1px var(--color-white);
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 36px;
  padding: 32px clamp(24px, 3.3333vw, 64px); /* 32px 64px */
  box-shadow: inset 0 0 0 1px var(--color-white);
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 36px;
}
.site-footer__copyright {
  font-size: var(--fs-body);                 /* 22px @1920 */
  line-height: 1;
  font-weight: var(--fw-medium);
  color: var(--color-white);
}
.footer-link {
  font-size: var(--fs-body);                 /* 22px @1920 */
  line-height: 1;
  font-weight: var(--fw-medium);             /* 500 */
  color: var(--color-white);
  white-space: nowrap;
  transition: color var(--transition-nav);   /* 0.5s ease-out */
}
.footer-link:hover,
.footer-link:focus-visible {
  color: var(--color-orange-red);            /* #e82000 */
}

/* ============================================================
   PHASE 4 — RESPONSIVE
   Desktop-first: 1920→1024 handled by the clamp() values above (no
   media queries). Three real breakpoints below:
     1024px — nav collapses to burger, multi-column grids stack
      768px — single column, mobile Figma type scale (598:7353 @430)
      480px — small-phone type/spacing tweaks (no layout change)
   Mobile Figma anchors: container padding 20, section pad-y 56,
   card gap 36, headings 24/700, intros 18/400, nav links 24/500.
   Never override :root tokens here — only concrete properties.
   ============================================================ */

/* ---------- Global responsive base ---------- */
html, body { min-width: 320px; }
.hero { overflow: hidden; }
.nav-mobile { display: none; }   /* shown only ≤1200 */

/* Long German compound words (e.g. "Nachhaltigkeitsplaner") must break
   rather than overflow narrow mobile cards. break-word only splits a word
   when it cannot otherwise fit, so desktop rendering is unaffected. */
.section-heading,
.section-intro,
.hero__title,
.event-card__title,
.event-card__details,
.news-card__title,
.news-card__excerpt,
.news-card__category,
.school-card__title,
.school-card__body,
.project-card__title,
.project-card__category {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ============================================================
   NAV COMPRESSION — max-width: 1440px
   The full German menu + KONTAKT needs ~1384px; below the 1920 design
   it must tighten so it keeps fitting down to the burger breakpoint
   (1200px) without overflow. Pixel-perfect is only required at 1920.
   ============================================================ */
@media (max-width: 1440px) {
  .site-header__logo { padding: 10px 16px; }
  .site-header__logo img { height: 64px; }
  .primary-nav { padding: 0 20px; }
  .primary-nav__list { gap: 24px; }
  .nav-dropdown__toggle { gap: 8px; }
  .nav-kontakt { padding: 16px 24px; }
}

/* ============================================================
   NAV COLLAPSE — max-width: 1200px  (burger + mobile overlay)
   ============================================================ */
@media (max-width: 1200px) {

  /* ---- NAV: collapse to burger ---- */
  .site-header {
    /* backdrop-filter creates a containing block that would trap the
       fixed mobile menu — disable it so the overlay uses the viewport. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.98);
  }
  .site-header__logo { padding: 10px 16px; }
  .site-header__logo img { height: 48px; }
  .site-header__nav-group { display: none; }

  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 8px;
    margin-right: 12px;
    align-self: center;
  }
  .nav-burger__bar {
    display: block;
    width: 28px;
    height: 3px;
    background: var(--color-black);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .nav-burger.is-active .nav-burger__bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .nav-burger.is-active .nav-burger__bar:nth-child(2) { opacity: 0; }
  .nav-burger.is-active .nav-burger__bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  /* Mobile menu overlay — full-screen, sits ABOVE the header (1000) so it covers
     it entirely; its own top bar carries the logo (left) + X close (right). */
  .nav-mobile {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1001;
    padding: 0;
    background: var(--color-white);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  }
  .nav-mobile.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Top bar — matches the header height, keeps the logo in the upper-left */
  .nav-mobile__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 99px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-black);
    background: var(--color-white);
  }
  .nav-mobile__logo { display: flex; align-items: center; flex: 0 0 auto; }
  .nav-mobile__logo img { height: 48px; width: auto; display: block; }
  .nav-mobile__close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-right: 4px;
    color: var(--color-black);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color var(--transition-nav);
  }
  .nav-mobile__close:hover,
  .nav-mobile__close:focus-visible { color: var(--color-orange-red); }

  .nav-mobile__nav { display: flex; flex-direction: column; padding: 16px 20px 48px; }
  .nav-mobile__list { display: flex; flex-direction: column; width: 100%; list-style: none; margin: 0; padding: 0; }
  .nav-mobile__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px 4px;
    font-size: 24px;                    /* Figma mobile nav link 24/500 */
    line-height: 1.2;
    font-weight: var(--fw-medium);
    color: var(--color-black);
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    transition: color var(--transition-nav);
  }
  .nav-mobile__link:hover,
  .nav-mobile__link:focus-visible { color: var(--color-orange-red); }
  .nav-mobile__chevron { display: inline-flex; align-items: center; }
  .nav-mobile__chevron svg { width: 18px; height: 12px; transition: transform 0.3s ease; }
  .nav-mobile__group.is-open .nav-mobile__chevron { transform: rotate(180deg); }
  .nav-mobile__submenu { display: none; flex-direction: column; list-style: none; margin: 0; padding: 0 0 0 16px; }
  .nav-mobile__group.is-open .nav-mobile__submenu { display: flex; }
  .nav-mobile__sublink {
    display: flex;               /* full-width block so the divider spans the whole row, not just the text */
    align-items: center;
    width: 100%;
    padding: 13px 4px;
    font-size: 20px;
    font-weight: var(--fw-regular);
    color: var(--color-black);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transition: color var(--transition-nav);
  }
  .nav-mobile__sublink:hover,
  .nav-mobile__sublink:focus-visible { color: var(--color-orange-red); }
  .nav-mobile__kontakt {
    justify-content: center;
    margin-top: 28px;
    padding: 18px 24px;
    background: var(--color-black);
    color: var(--color-orange);        /* #f85739 */
    font-weight: var(--fw-semibold);
    border-bottom: 0;
  }
  .nav-mobile__kontakt:hover,
  .nav-mobile__kontakt:focus-visible { color: var(--color-orange); }
}

/* ============================================================
   TABLET / LAYOUT-SHIFT — max-width: 1024px  (grids stack)
   ============================================================ */
@media (max-width: 1024px) {

  /* (Right-gutter trim now handled globally by --gutter-wide, symmetric ≤1366.) */

  /* ---- EVENTS grid → single column (image between the card pairs) ---- */
  .events-grid {
    flex-direction: column;
    max-width: 640px;
  }
  .events-grid__col { flex: none; }
  .events-grid__media {
    flex: none;
    height: clamp(240px, 42vw, 400px);
  }

  /* ---- AKTUELLES grid → 2 cards per row (tablet) ----
     Cyan gridlines come from a 3px cyan box-shadow on each card (not the desktop
     container fill). Neighbouring shadows meet inside the 3px gaps to form the
     uniform lines and the outer frame. Every card stays fully framed; where there's
     no card (an odd leftover cell) there's no shadow, so that slot is plain white. */
  .aktuelles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 720px;
    background: none;                          /* off: per-card shadows draw the lines instead of a cyan fill */
  }
  .news-card { flex: none; }
  .aktuelles-grid .news-card { box-shadow: 0 0 0 3px var(--color-cyan); }

  /* ---- BILDUNGSANGEBOTE cards → stacked ---- */
  .bildungsangebote__cards { flex-direction: column; }
  .school-card {
    flex: none;
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
  }

  /* ---- PROJEKTE cards → stacked, hide carousel arrows ---- */
  .projekte__arrows { display: none; }
  .projekte__cards {
    flex-direction: column;
    max-width: 520px;
  }
  .project-card { flex: none; }
}

/* Projekte-Teaser MODULE on tablet/mobile (<=1024px): stays a SLIDER, not a stack
   — a horizontal swipe track with the arrows moved BELOW the cards, centred. Only
   when a slider is present (data-slider = >3 projects); <=3 keep the stacked
   fallback above. The arrow click handlers (modules.js) already run at any width. */
@media (max-width: 1024px) {
  .mod-projekte .projekte__inner[data-slider] .projekte__viewport {
    order: 1;
    overflow: hidden;
    margin-left: 0;
  }
  .mod-projekte .projekte__inner[data-slider] .projekte__cards {
    flex-direction: row;
    flex-wrap: nowrap;
    max-width: none;
    margin-inline: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .mod-projekte .projekte__inner[data-slider] .projekte__cards::-webkit-scrollbar { display: none; }
  .mod-projekte .projekte__inner[data-slider] .project-card {
    flex: 0 0 min(82%, 340px);                 /* ~1 card + a peek of the next */
    width: auto;
    scroll-snap-align: start;
  }
  /* Flatten the header row (display:contents) so header, cards and arrows become
     one column, then order the arrows last — directly under the cards, centred. */
  .mod-projekte .projekte__inner[data-slider] .projekte__top { display: contents; }
  .mod-projekte .projekte__inner[data-slider] .projekte__header { order: 0; }
  .mod-projekte .projekte__inner[data-slider] .projekte__arrows {
    display: flex;
    order: 2;
    justify-content: center;
  }
}

/* ============================================================
   MOBILE — max-width: 768px  (single column, Figma mobile scale)
   ============================================================ */
@media (max-width: 768px) {

  /* ---- Mobile spacing: 20px gutters, 56px section pad-y ---- */
  .about__inner,
  .bildungsangebote__inner,
  .partnerschaften__inner,
  .site-footer__inner { padding: 56px 20px; }
  .events__inner,
  .aktuelles__inner,
  .projekte__inner { padding: 56px 20px; }

  /* ---- Mobile type scale ----
     Pin a consistent, hierarchical heading ramp. The fluid clamps floor at H2=30 /
     H3=24, but .section-heading was pulled down to 24 — which the un-scaled H3
     (24px floor) then matched or, at <=480, exceeded (inverted). Scaling the tokens
     keeps every H2 clearly larger than every H3, consistently across all modules. */
  :root { --fs-h2: 24px; --fs-h3: 20px; --fs-h4: 18px; }   /* keep the heading ramp descending; H4/CTA drops below H3 (its 20px floor read too large — CTAs looked bigger than the card titles) */
  .section-intro { font-size: 18px; }            /* Figma mobile 18/400 */

  /* Drop the desktop text indents that waste width on mobile */
  .about__heading-wrap,
  .events__heading-wrap,
  .aktuelles__heading-wrap,
  .bildungsangebote__heading-wrap,
  .projekte__heading-wrap { padding-right: 0; }
  .about__body-wrap,
  .events__intro-wrap,
  .aktuelles__intro-wrap,
  .bildungsangebote__intro-wrap,
  .projekte__intro-wrap { padding-left: 0; }

  /* ---- HERO: keep the card as an overlay but full-bleed the insets ---- */
  .hero { padding: 16px 16px 0; }
  .hero__media { height: clamp(360px, 92vw, 560px); }
  .hero__card {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    max-width: none;
    padding: 16px;
  }
  .hero__card-inner { padding: 24px; }
  .hero__title { font-size: 30px; }

  /* ---- ABOUT: stack image over text ---- */
  .about__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
  .about__media {
    width: 100%;
    aspect-ratio: 3 / 2;
  }

  /* ---- EVENTS / PROJEKTE: fill width when stacked ---- */
  .events-grid,
  .projekte__cards { max-width: 520px; }
  .events-grid__media { height: clamp(200px, 60vw, 320px); }

  /* ---- BILDUNGSANGEBOTE: taller school card so overlay text fits ---- */
  .school-card {
    aspect-ratio: auto;
    height: clamp(440px, 118vw, 560px);
  }

  /* ---- PARTNERSCHAFTEN: smaller marquee logos ---- */
  .partner-logo {
    width: 200px;
    height: 128px;
    padding: 14px 24px;
  }
  .partner-logo img { max-height: 100px; }

  /* ---- FOOTER: stack brand over links, then bottom bar ---- */
  .site-footer__top {
    flex-direction: column;
    height: auto;
  }
  .site-footer__brand {
    justify-content: flex-start;
    gap: 32px;
    padding: 32px;
  }
  .site-footer__links {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    padding: 32px;
  }
  .site-footer__bottom { gap: 20px; }
  .site-footer__legal { gap: 20px; }        /* match the bottom-bar rhythm on mobile */
}

/* ============================================================
   SMALL MOBILE — max-width: 480px  (type/spacing tweaks only)
   ============================================================ */
@media (max-width: 480px) {

  .site-header__logo img { height: 38px; }

  :root { --fs-h2: 22px; --fs-h3: 18px; --fs-h4: 16px; }   /* keep the ramp descending: H2 > H3 > H4/CTA */
  .section-intro { font-size: 17px; }
  .hero__title { font-size: 26px; }
  .hero__card-inner { padding: 20px; }

  .about__inner,
  .bildungsangebote__inner,
  .partnerschaften__inner,
  .site-footer__inner,
  .events__inner,
  .aktuelles__inner,
  .projekte__inner { padding: 44px 16px; }

  .nav-mobile__logo img { height: 38px; }
  .nav-mobile__nav { padding: 12px 16px 40px; }
  .nav-mobile__link { font-size: 22px; }

  /* Card CTAs / buttons shrink slightly */
  .btn-cta { padding: 12px 40px 12px 32px; }

  /* Partner logos smaller still, footer bottom centred */
  .partner-logo { width: 168px; height: 112px; padding: 12px 18px; }
  .partner-logo img { max-height: 88px; }

  /* Stack copyright over the legal links, all left-aligned with one uniform gap so
     the spacing between the copyright and the links — and between the links — is
     coherent (was: legal links right-aligned with a larger, mismatched gap). */
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .site-footer__legal {
    justify-content: flex-start;
    gap: 20px;
  }
}


/* ============================================================
   PHASE 5 — JavaScript-driven interaction styles
   (hooks the JS toggles; timings trace to figma-audit.json)
   ============================================================ */

/* "+ Mehr lesen" link hover — Figma Rectangle 53 (0×3) is an UNDERLINE that
   grows from 0 to the label width on hover (271:3102→271:3101, SMART_ANIMATE
   0.3s ease-out), NOT a pulsing glyph. The line sits under the text only; the
   "+" glyph stays static. */
.link-plus > span:last-child { position: relative; }
.link-plus > span:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 3px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-hover);   /* 0.3s ease-out */
}
.link-plus:hover > span:last-child::after,
.link-plus:focus-visible > span:last-child::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .link-plus > span:last-child::after { transition: none; }
}

/* Project carousel (155:2591) — opacity dip while the JS reorders
   the cards. Matches the arrow transition (0.3s linear). */
.projekte__cards {
  transition: opacity 0.2s linear;
}
.projekte__cards.is-sliding {
  opacity: 0.12;
}

/* Marquee pause control (61:578) — when paused (aria-pressed=true),
   the two pause bars become a single play triangle. */
.marquee-pause[aria-pressed="true"] .marquee-pause__bar {
  display: none;
}
.marquee-pause[aria-pressed="true"] .marquee-pause__icon::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--color-black);
}

/* Aktuelles teaser: below tablet (phones) the 2-up grid drops to a single column. */
@media (max-width: 640px) {
  .aktuelles-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
}