/* responsive.css — global responsive overrides
   Breakpoints: 1200, 1024, 820, 640, 480
   Uses !important sparingly to override inline-style React props. */

/* ─────────────────────────────────────────
   FOUNDATION — wrap padding scaling
   ───────────────────────────────────────── */
@media (max-width: 1200px) {
  .wrap { padding: 0 40px; }
}
@media (max-width: 820px) {
  .wrap { padding: 0 24px; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 18px; }
}

/* ─────────────────────────────────────────
   NAV / HEADER
   ───────────────────────────────────────── */
@media (max-width: 1200px) {
  header > div:nth-child(2) {
    padding: 0 40px !important;
    gap: 24px !important;
  }
  .mm-inner { padding: 32px 40px 40px !important; }
}

@media (max-width: 1024px) {
  header > div:nth-child(2) {
    gap: 16px !important;
  }
  .mm-trigger { padding: 12px 8px !important; font-size: 13px !important; }
  .mm-utility { display: none; }
  /* hide DE icon button (the third actions child) and search to keep CTA visible */
  header > div:nth-child(2) > div:last-child > button[aria-label="DE"] { display: none !important; }
}

/* Tablet & below: collapse mega-menu + show hamburger */
@media (max-width: 900px) {
  header > div:nth-child(2) {
    height: 64px !important;
    padding: 0 24px !important;
  }
  header > div:nth-child(2) > a img { height: 38px !important; }
  /* hide desktop nav links */
  header > div:nth-child(2) > nav {
    display: none !important;
  }
  /* hide mega menu shell + backdrop on small screens */
  .mm-shell, .mm-backdrop { display: none !important; }
  /* shrink CTA, hide search icon button */
  header > div:nth-child(2) > div:last-child > button[aria-label="Suche"] { display: none !important; }
  header > div:nth-child(2) .dakby-cta {
    padding: 12px 18px !important;
    font-size: 12px !important;
  }
  /* show hamburger */
  .nav-hamburger { display: inline-flex !important; }
}

@media (max-width: 480px) {
  header > div:nth-child(2) {
    padding: 0 16px !important;
    gap: 10px !important;
  }
  header > div:nth-child(2) > a img { height: 32px !important; }
  header > div:nth-child(2) .dakby-cta span,
  header > div:nth-child(2) .dakby-cta {
    font-size: 11px !important;
  }
  header > div:nth-child(2) .dakby-cta {
    padding: 10px 14px !important;
  }
}

/* Hamburger placeholder (shown when nav hidden) — visually consistent with iconBtn */
.nav-hamburger {
  display: none;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid #e3e3e2; background: #fff;
  align-items: center; justify-content: center; cursor: pointer;
  margin-right: 4px;
}
.nav-hamburger span {
  display: block; width: 18px; height: 2px; background: #000;
  position: relative;
}
.nav-hamburger span::before,
.nav-hamburger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: #000;
}
.nav-hamburger span::before { top: -6px; }
.nav-hamburger span::after  { top: 6px; }

/* Ticker shrink */
@media (max-width: 640px) {
  header > div:first-child { font-size: 10px !important; height: 28px !important; }
}

/* ─────────────────────────────────────────
   HERO
   ───────────────────────────────────────── */
@media (max-width: 1200px) {
  section[data-screen-label="Hero"] {
    grid-template-columns: 48px 1fr 440px !important;
    min-height: 640px !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(2) {
    padding: 56px 40px 40px !important;
  }
}

@media (max-width: 1024px) {
  /* Tablet — keep image alongside content; trim the image column */
  section[data-screen-label="Hero"] {
    grid-template-columns: 40px 1fr 360px !important;
    min-height: 600px !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(2) {
    padding: 48px 32px 32px !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(3) {
    padding: 24px 24px 24px 0 !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(3) > div:first-child {
    min-height: 460px !important;
  }
}

/* Image stacks below content only at tablet-portrait / phone */
@media (max-width: 820px) {
  section[data-screen-label="Hero"] {
    grid-template-columns: 32px 1fr !important;
    min-height: auto !important;
  }
  /* image column moves below */
  section[data-screen-label="Hero"] > div:nth-child(3) {
    grid-column: 1 / -1 !important;
    padding: 0 24px 32px 24px !important;
    position: relative !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(3) > div:first-child {
    min-height: 320px !important;
    border-radius: 16px !important;
  }
  /* anchor floatBadge to image card visually */
  section[data-screen-label="Hero"] > div:nth-child(3) > div:nth-child(2) {
    bottom: 0 !important;
    right: 24px !important;
  }
  /* hide scroll indicator below the fold */
  .hero-scroll-indicator { display: none !important; }
  section[data-screen-label="Hero"] > div:nth-child(2) {
    padding: 40px 24px 24px !important;
    gap: 22px !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(2) > h1 {
    font-size: clamp(48px, 12vw, 84px) !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(2) > p {
    font-size: 16px !important;
  }
  /* stack actions */
  section[data-screen-label="Hero"] > div:nth-child(2) > div:nth-of-type(3) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  /* facts: stack to 3 cols compact then 2 */
  section[data-screen-label="Hero"] > div:nth-child(2) > div:nth-of-type(4) {
    gap: 28px !important;
    padding-top: 24px !important;
    margin-top: 20px !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(2) > div:nth-of-type(4) > div > div:first-child {
    font-size: 28px !important;
  }
  /* image */
  section[data-screen-label="Hero"] > div:nth-child(3) {
    padding: 0 16px 24px 16px !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(3) > div:first-child {
    min-height: 300px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 480px) {
  /* Mobile hero: merge image + text into one unified composition.
     Image becomes a full-bleed background; content sits on top with
     a dark gradient for legibility. The float badge stays in the
     image col as a top-anchored chip; facts move into a black footer band. */
  section[data-screen-label="Hero"] {
    display: block !important;
    grid-template-columns: none !important;
    position: relative !important;
    min-height: auto !important;
    background: #000 !important;
  }
  /* Hide the orange register strip */
  section[data-screen-label="Hero"] > div:nth-child(1) {
    display: none !important;
  }

  /* Image col becomes absolute background, fills entire hero */
  section[data-screen-label="Hero"] > div:nth-child(3) {
    position: absolute !important;
    inset: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(3) > div:first-child {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    position: relative !important;
  }
  /* Dark gradient overlay on the image for legibility */
  section[data-screen-label="Hero"] > div:nth-child(3) > div:first-child::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.55) 65%, rgba(0,0,0,0.92) 100%);
    z-index: 2;
    pointer-events: none;
  }
  /* Hide caption tag and Mach's stamp on mobile to keep it clean */
  section[data-screen-label="Hero"] > div:nth-child(3) > div:first-child > div:nth-child(2),
  section[data-screen-label="Hero"] > div:nth-child(3) > div:first-child > div:nth-child(3) {
    display: none !important;
  }
  /* Hide the Digitalakademie meta row on mobile */
  section[data-screen-label="Hero"] > div:nth-child(2) > div:first-child {
    display: none !important;
  }
  /* Float badge — tighter pill proportions */
  section[data-screen-label="Hero"] > div:nth-child(3) > div:nth-child(2) {
    position: absolute !important;
    top: 18px !important;
    right: 14px !important;
    bottom: auto !important;
    left: auto !important;
    padding: 7px 12px 7px 10px !important;
    min-width: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.95) !important;
    color: #000 !important;
    z-index: 4 !important;
    pointer-events: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1 !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(3) > div:nth-child(2) > div:first-child {
    color: #f08300 !important;
    font-size: 9px !important;
    margin: 0 !important;
    display: inline !important;
    line-height: 1 !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(3) > div:nth-child(2) > div:nth-child(2) {
    color: #000 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    display: inline !important;
    line-height: 1 !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(3) > div:nth-child(2) > div:nth-child(2) br {
    display: none !important;
  }
  /* Stronger gradient for headline + facts contrast */
  section[data-screen-label="Hero"] > div:nth-child(3) > div:first-child::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.78) 65%, rgba(0,0,0,0.95) 100%) !important;
  }

  /* Content column — sits on top of image, white text */
  section[data-screen-label="Hero"] > div:nth-child(2) {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    padding: 56px 22px 28px !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 16px !important;
    color: #fff !important;
  }
  /* Eyebrow + meta — white on image */
  section[data-screen-label="Hero"] > div:nth-child(2) > div:first-child {
    gap: 10px !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(2) > div:first-child > .eyebrow {
    color: #fff !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(2) > div:first-child > .eyebrow::before {
    background: #f08300 !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(2) > div:first-child > span:nth-child(2),
  section[data-screen-label="Hero"] > div:nth-child(2) > div:first-child > span:nth-child(3) {
    color: rgba(255,255,255,0.78) !important;
  }
  /* Headline — white, with text shadow for legibility */
  section[data-screen-label="Hero"] > div:nth-child(2) > h1 {
    font-size: clamp(40px, 12vw, 64px) !important;
    color: #fff !important;
    text-shadow: 0 2px 28px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.5);
  }
  /* Keep accent words tinted */
  section[data-screen-label="Hero"] > div:nth-child(2) > h1 > span:first-of-type {
    color: #f08300 !important;
  }
  /* Lead text */
  section[data-screen-label="Hero"] > div:nth-child(2) > p {
    color: rgba(255,255,255,0.92) !important;
    font-size: 15px !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
    max-width: 38ch !important;
  }
  /* Actions — stack, secondary link white */
  section[data-screen-label="Hero"] > div:nth-child(2) > div:nth-of-type(3) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(2) > div:nth-of-type(3) > a {
    color: #fff !important;
  }
  /* Facts row — higher contrast on dark, with its own backing band */
  section[data-screen-label="Hero"] > div:nth-child(2) > div:nth-of-type(4) {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    padding: 18px 22px 22px !important;
    margin: 14px -22px -28px !important; /* extend to section edges, into bottom padding */
    border-top: 1px solid rgba(255,255,255,0.45) !important;
    background: rgba(0,0,0,0.55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(2) > div:nth-of-type(4) > div > div:first-child {
    color: #fff !important;
    font-size: 22px !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(2) > div:nth-of-type(4) > div > div:nth-child(2) {
    color: rgba(255,255,255,0.92) !important;
    font-size: 10px !important;
  }
}

/* ─────────────────────────────────────────
   TOPICS
   ───────────────────────────────────────── */
@media (max-width: 1200px) {
  section[data-screen-label="Themen"] {
    padding: 96px 0 64px !important;
  }
}
@media (max-width: 1024px) {
  /* head: stack */
  section[data-screen-label="Themen"] > .wrap > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 40px !important;
  }
  /* 2-col grid */
  section[data-screen-label="Themen"] > .wrap > div:nth-child(2) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  section[data-screen-label="Themen"] {
    padding: 72px 0 48px !important;
  }
  section[data-screen-label="Themen"] > .wrap > div:nth-child(2) {
    grid-template-columns: 1fr !important;
  }
  section[data-screen-label="Themen"] .topic-tile {
    padding: 28px 22px !important;
    min-height: 240px !important;
  }
  section[data-screen-label="Themen"] .topic-tile h3 {
    font-size: 26px !important;
  }
}

/* ─────────────────────────────────────────
   PROGRAMS
   ───────────────────────────────────────── */
@media (max-width: 1200px) {
  section[data-screen-label="Programm"] {
    padding: 96px 0 !important;
  }
  section[data-screen-label="Programm"] .wrap > div:nth-child(3) + div {
    /* grid */
  }
}
@media (max-width: 1024px) {
  /* programs grid → 2 col */
  section[data-screen-label="Programm"] > .wrap > div:nth-of-type(3) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* head stacks */
  section[data-screen-label="Programm"] > .wrap > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* list rows wrap better */
  section[data-screen-label="Programm"] > .wrap > div:nth-of-type(3) article {
    flex-wrap: wrap !important;
  }
}
@media (max-width: 820px) {
  section[data-screen-label="Programm"] > .wrap > div:nth-of-type(3) {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}
@media (max-width: 640px) {
  section[data-screen-label="Programm"] {
    padding: 72px 0 !important;
  }
  /* filter bar wraps */
  section[data-screen-label="Programm"] > .wrap > div:nth-of-type(2) {
    gap: 16px !important;
  }
  /* list row: stack content */
  section[data-screen-label="Programm"] > .wrap > div:nth-of-type(3) article[style*="flex-direction"] {
    /* no-op */
  }
  /* ProgramRow: stack columns */
  section[data-screen-label="Programm"] > .wrap > div:nth-of-type(3) > article {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 18px 18px !important;
  }
  /* date col + meta col take full width when stacked */
  section[data-screen-label="Programm"] > .wrap > div:nth-of-type(3) > article > div {
    width: 100% !important;
    flex: 1 1 auto !important;
  }
  section[data-screen-label="Programm"] > .wrap > div:nth-of-type(3) > article > div:last-child {
    justify-content: space-between !important;
  }
  /* card headers shrink */
  section[data-screen-label="Programm"] article h3 {
    font-size: 18px !important;
  }
}

/* ─────────────────────────────────────────
   FEATURED — "Vier Schritte"
   ───────────────────────────────────────── */
@media (max-width: 1024px) {
  section[data-screen-label="Akademie"] > .wrap > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 32px !important;
  }
  section[data-screen-label="Akademie"] ol li {
    grid-template-columns: 80px 1fr 1fr !important;
    gap: 20px !important;
    padding: 28px 6px !important;
  }
  section[data-screen-label="Akademie"] ol li > span:first-child {
    font-size: 44px !important;
  }
  section[data-screen-label="Akademie"] ol li > div:nth-child(2) {
    font-size: 22px !important;
  }
}
@media (max-width: 640px) {
  section[data-screen-label="Akademie"] {
    padding: 72px 0 48px !important;
  }
  section[data-screen-label="Akademie"] ol li {
    grid-template-columns: 60px 1fr !important;
    gap: 14px !important;
    padding: 22px 4px !important;
  }
  /* description on its own row */
  section[data-screen-label="Akademie"] ol li > div:nth-child(3) {
    grid-column: 2 / 3 !important;
    font-size: 14px !important;
  }
  section[data-screen-label="Akademie"] ol li > span:first-child {
    font-size: 36px !important;
  }
  section[data-screen-label="Akademie"] ol li > div:nth-child(2) {
    font-size: 20px !important;
  }
}

/* ─────────────────────────────────────────
   MISSION
   ───────────────────────────────────────── */
@media (max-width: 1200px) {
  section[data-screen-label="Mission"] > div:first-child {
    padding: 96px 0 110px !important;
  }
}
@media (max-width: 1024px) {
  section[data-screen-label="Mission"] > div:first-child > .wrap {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  /* stats row → 2x2 */
  section[data-screen-label="Mission"] > div:nth-child(2) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  section[data-screen-label="Mission"] > div:nth-child(2) > div {
    border-right: none !important;
    border-bottom: 1px solid #e3e3e2;
    padding: 36px 28px !important;
  }
  section[data-screen-label="Mission"] > div:nth-child(2) > div:nth-child(odd) {
    border-right: 1px solid #e3e3e2 !important;
  }
  section[data-screen-label="Mission"] > div:nth-child(2) > div:nth-child(n+3) {
    border-bottom: none;
  }
  /* tablet: keep testimonial side-by-side, just trim padding + image col */
  section[data-screen-label="Mission"] > div:nth-child(3) > .wrap {
    grid-template-columns: 280px 1fr !important;
    gap: 40px !important;
    padding: 72px 24px !important;
  }
}
@media (max-width: 820px) {
  section[data-screen-label="Mission"] > div:first-child {
    padding: 72px 0 88px !important;
  }
  section[data-screen-label="Mission"] > div:first-child > .wrap > div:first-child > div:nth-child(4) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  /* pillar text alignment */
  section[data-screen-label="Mission"] > div:first-child > .wrap > div:last-child > div p {
    text-align: left !important;
  }
}
@media (max-width: 640px) {
  section[data-screen-label="Mission"] > div:nth-child(2) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  section[data-screen-label="Mission"] > div:nth-child(2) > div {
    border-right: none !important;
    border-bottom: 1px solid #e3e3e2 !important;
    padding: 20px 16px !important;
  }
  section[data-screen-label="Mission"] > div:nth-child(2) > div:nth-child(odd) {
    border-right: 1px solid #e3e3e2 !important;
  }
  section[data-screen-label="Mission"] > div:nth-child(2) > div:nth-child(n+3) {
    border-bottom: none !important;
  }
  section[data-screen-label="Mission"] > div:nth-child(2) > div > div:first-child {
    font-size: 32px !important;
    line-height: 1 !important;
  }
  section[data-screen-label="Mission"] > div:nth-child(2) > div > div:nth-child(2),
  section[data-screen-label="Mission"] > div:nth-child(2) > div > div:nth-child(3) {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  /* ── Testimonial mobile — overlay quote onto image card ── */
  section[data-screen-label="Mission"] > div:nth-child(3) {
    overflow: visible !important;
  }
  section[data-screen-label="Mission"] > div:nth-child(3) > .wrap {
    padding: 78px 16px 24px !important; /* top padding reserves space for absolute bodyHead */
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    display: block !important;
    position: relative !important;
  }
  /* Image col — full width, holds the photo + attribution overlay */
  section[data-screen-label="Mission"] > div:nth-child(3) > .wrap > div:first-child {
    gap: 0 !important;
    width: 100% !important;
    display: block !important;
    margin-top: 0 !important;
  }
  /* Image frame: explicit width, taller aspect ratio, positioning context */
  section[data-screen-label="Mission"] > div:nth-child(3) > .wrap > div:first-child > div:first-child {
    width: 100% !important;
    aspect-ratio: 3 / 4.6 !important;
    max-height: none !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    position: relative !important;
  }
  /* Dark gradient on top of the photo for legibility */
  section[data-screen-label="Mission"] > div:nth-child(3) > .wrap > div:first-child > div:first-child::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.85) 100%);
    z-index: 3;
    pointer-events: none;
  }
  /* Org chip — keep in image, move to top */
  section[data-screen-label="Mission"] > div:nth-child(3) > .wrap > div:first-child > div:first-child > div:last-child {
    bottom: auto !important;
    top: 16px !important;
    left: 16px !important;
  }
  /* Hide the giant decorative quote-mark on mobile */
  section[data-screen-label="Mission"] > div:nth-child(3) > .wrap > div:nth-child(2) > span[aria-hidden="true"] {
    display: none !important;
  }
  /* Body column: split — bodyHead absolute at top of wrap; rest overlays image */
  section[data-screen-label="Mission"] > div:nth-child(3) > .wrap > div:nth-child(2) {
    display: contents !important;
  }
  /* bodyHead absolutely positioned at the top of .wrap (above image) */
  section[data-screen-label="Mission"] > div:nth-child(3) > .wrap > div:nth-child(2) > div:first-child {
    position: absolute !important;
    top: 24px !important;
    left: 16px !important;
    right: 16px !important;
    margin: 0 !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid #e3e3e2 !important;
    z-index: 8 !important;
  }
  /* Blockquote — absolutely positioned over the lower portion of the image frame */
  section[data-screen-label="Mission"] > div:nth-child(3) > .wrap > div:nth-child(2) > blockquote {
    position: absolute !important;
    left: 28px !important;
    right: 28px !important;
    bottom: 110px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 6 !important;
    color: #fff !important;
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.25 !important;
    max-width: none !important;
    text-shadow: 0 2px 18px rgba(0,0,0,0.45);
  }
  /* Dot nav — absolute, inside image bottom */
  section[data-screen-label="Mission"] > div:nth-child(3) > .wrap > div:nth-child(2) > div[role="tablist"] {
    position: absolute !important;
    left: 28px !important;
    right: 28px !important;
    bottom: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 7 !important;
  }
  section[data-screen-label="Mission"] > div:nth-child(3) > .wrap > div:nth-child(2) > div[role="tablist"] span[style] {
    background: rgba(255,255,255,0.4) !important;
  }
  section[data-screen-label="Mission"] > div:nth-child(3) > .wrap > div:nth-child(2) > div[role="tablist"] span[style] > span {
    background: #fff !important;
  }
  /* Attribution (name + role) — absolute inside image frame, above blockquote */
  section[data-screen-label="Mission"] > div:nth-child(3) > .wrap > div:first-child > div:nth-child(2) {
    position: absolute !important;
    left: 28px !important;
    right: 28px !important;
    bottom: 76px !important;
    z-index: 6 !important;
    color: #fff !important;
    pointer-events: none !important;
    padding: 0 !important;
  }
  section[data-screen-label="Mission"] > div:nth-child(3) > .wrap > div:first-child > div:nth-child(2) > div:first-child {
    color: #fff !important;
    font-size: 14px !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  }
  section[data-screen-label="Mission"] > div:nth-child(3) > .wrap > div:first-child > div:nth-child(2) > div:nth-child(2) {
    color: rgba(255,255,255,0.78) !important;
    font-size: 12px !important;
  }
}

/* ─────────────────────────────────────────
   CTA / NEWSLETTER
   ───────────────────────────────────────── */
@media (max-width: 1024px) {
  section[data-screen-label="Newsletter"] {
    padding: 96px 0 !important;
  }
  section[data-screen-label="Newsletter"] > .wrap {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}
@media (max-width: 640px) {
  section[data-screen-label="Newsletter"] {
    padding: 72px 0 !important;
  }
  section[data-screen-label="Newsletter"] > .wrap > div:last-child {
    padding: 24px !important;
  }
  section[data-screen-label="Newsletter"] form > div:nth-child(2) {
    flex-direction: column !important;
  }
  section[data-screen-label="Newsletter"] form input {
    width: 100% !important;
    min-width: 0 !important;
  }
  section[data-screen-label="Newsletter"] form button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ─────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────── */
@media (max-width: 1024px) {
  footer[data-screen-label="Footer"] > .wrap > div:first-child {
    gap: 40px !important;
  }
  footer[data-screen-label="Footer"] > .wrap > div:first-child > div:first-child {
    flex: 0 0 100% !important;
  }
}
@media (max-width: 640px) {
  footer[data-screen-label="Footer"] {
    padding: 56px 0 24px !important;
  }
  footer[data-screen-label="Footer"] > .wrap > div:first-child {
    flex-direction: column !important;
    gap: 32px !important;
    margin-bottom: 32px !important;
  }
  footer[data-screen-label="Footer"] > .wrap > div:first-child > div {
    flex: 1 1 100% !important;
    width: 100%;
  }
  footer[data-screen-label="Footer"] > .wrap > div:nth-of-type(3) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
}

/* ─────────────────────────────────────────
   TWEAKS PANEL — keep within viewport on mobile
   ───────────────────────────────────────── */
@media (max-width: 640px) {
  /* heuristic — most tweaks panels are bottom-right fixed boxes */
  [class*="tweaks"][style*="position: fixed"],
  [class*="Tweaks"][style*="position: fixed"] {
    max-width: calc(100vw - 24px) !important;
    right: 12px !important;
    bottom: 12px !important;
  }
}

/* ─────────────────────────────────────────
   MOBILE DRAWER
   ───────────────────────────────────────── */
.mobile-drawer {
  position: fixed;
  top: 96px; left: 0; right: 0;
  background: #fff;
  z-index: 5;
  max-height: 0;
  overflow: hidden;
  /* visibility flips after the slide-up finishes — a closed drawer must paint
     nothing (its box-shadow otherwise draws a stray line across the page) */
  visibility: hidden;
  transition: max-height 320ms cubic-bezier(0.2,0.7,0.2,1), visibility 0s linear 320ms;
  border-bottom: 1px solid transparent;
  pointer-events: none;
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.mobile-drawer.open {
  max-height: calc(100vh - 96px);
  visibility: visible;
  transition: max-height 320ms cubic-bezier(0.2,0.7,0.2,1), visibility 0s;
  pointer-events: auto;
  border-bottom-color: #e3e3e2;
}
@media (max-width: 640px) {
  .mobile-drawer { top: 92px; }
  .mobile-drawer.open { max-height: calc(100vh - 92px); }
}
.mobile-drawer-inner {
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  padding: 4px 24px 32px;
  font-family: 'Univers', Ebrima, sans-serif;
}
@media (max-width: 640px) {
  .mobile-drawer-inner { max-height: calc(100vh - 92px); }
}
.md-section { border-bottom: 1px solid #ececec; }
.md-toggle {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  background: transparent; border: 0; cursor: pointer;
  padding: 18px 4px;
  font-family: inherit;
  font-size: 18px; font-weight: 700; color: #000;
  letter-spacing: -0.005em;
}
.md-caret {
  font-size: 24px; color: #f08300; line-height: 1; font-weight: 400;
  width: 24px; text-align: center;
}
.md-body { padding: 4px 0 22px; display: flex; flex-direction: column; gap: 18px; }
.md-col-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #6e6e6d; margin-bottom: 8px;
}
.md-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.md-col li a {
  display: block; padding: 8px 4px;
  font-size: 15px; font-weight: 500; color: #111;
  text-decoration: none; border-radius: 6px;
}
.md-col li a:hover { background: #fff2e6; color: #b35f00; }
.md-story-link {
  display: block; padding: 10px 4px;
  font-size: 16px; font-weight: 700; color: #000; text-decoration: none;
  margin-bottom: 6px;
}
.md-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 4px 4px;
  font-size: 13px; font-weight: 700;
}
.md-footer a {
  color: #000; text-decoration: none;
  letter-spacing: 0.04em;
}
.md-footer a:hover { color: #f08300; }

/* hide drawer entirely above tablet breakpoint */
@media (min-width: 901px) {
  .mobile-drawer { display: none !important; }
}
html, body { overflow-x: hidden; max-width: 100vw; }

/* ── Standalone pages (Programm/Themen/Akademie/Aktuelles/Kontakt) ──────────────
   Stack the asymmetric two-column layouts on tablet/mobile. Card grids use
   auto-fit and reflow on their own. */
@media (max-width: 820px) {
  section[data-screen-label="Kontakt"] > .wrap,
  section[data-screen-label="Mission"] > .wrap,
  section[data-screen-label="Verbund"] > .wrap {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  section[data-screen-label="Aktuelles"] .wrap > a {
    grid-template-columns: 1fr !important;
  }
}