/* ── Cross-document View Transitions ─────────────────────────────────────
   Must be a static stylesheet — dynamic injection via JS is not reliable
   for cross-document (MPA) navigation snapshots.
   ──────────────────────────────────────────────────────────────────────── */

@view-transition { navigation: auto; }

/* Pure crossfade — no named layers, no transforms.
   Identical header/footer in old + new snapshot appear motionless. */
::view-transition-old(root) { animation: dsw-fade-out 180ms ease forwards; }
::view-transition-new(root) { animation: dsw-fade-in  180ms ease forwards; }

@keyframes dsw-fade-out { to   { opacity: 0; } }
@keyframes dsw-fade-in  { from { opacity: 0; } }

/* ── Consistent dark hero height ────────────────────────────────────────
   All dark (#132339) hero sections get the same min-height so content
   sits at identical Y-positions across pages — prevents view-transition jump.
   ──────────────────────────────────────────────────────────────────────── */

section[style*="background:#132339"],
section[style*="background:#ffffff;border-bottom"] {
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}


/* ── Scroll-aware nav ────────────────────────────────────────────────────
   Override inline styles with !important so no HTML edits needed.
   ──────────────────────────────────────────────────────────────────────── */

header {
  position: sticky !important;
  top: 0 !important;
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: saturate(1.8) blur(14px) !important;
  -webkit-backdrop-filter: saturate(1.8) blur(14px) !important;
}
header > div {
  height: 66px !important;
}

/* ── Scroll-in animations ────────────────────────────────────────────────
   Base state set here so elements are hidden before JS runs,
   preventing a flash of visible content before the observer fires.
   ──────────────────────────────────────────────────────────────────────── */

[data-ani] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease;
}
[data-ani].dsw-on {
  opacity: 1;
  transform: none;
}

/* ── Mobile Navigation ───────────────────────────────────────────────────── */

#dsw-mobile-nav {
  display: none;
  position: fixed;
  top: 66px;
  left: 0;
  right: 0;
  z-index: 49;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(1.8) blur(14px);
  -webkit-backdrop-filter: saturate(1.8) blur(14px);
  border-top: 1px solid #e4e8ed;
  box-shadow: 0 6px 20px -4px rgba(19,35,57,.15);
  max-height: calc(100vh - 66px);
  overflow-y: auto;
}
#dsw-mobile-nav.dsw-open {
  display: block !important;
}
#dsw-burger.dsw-open .dsw-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#dsw-burger.dsw-open .dsw-bar:nth-child(2) { opacity: 0; }
#dsw-burger.dsw-open .dsw-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  /* Nav */
  #dsw-desktop-nav { display: none !important; }
  #dsw-burger { display: flex !important; }

  /* Header padding */
  header > div { padding: 0 20px !important; }

  /* Section wrapper padding (class-based — avoids DC runtime style-space issues) */
  .dsw-w { padding-left: 20px !important; padding-right: 20px !important; }

  /* Hero grids (2-col) → 1 column */
  .dsw-gh { grid-template-columns: 1fr !important; }

  /* Hero image panel: remove bleed margin, cap height */
  .dsw-gh > div[style*="margin-right"]:not(.dsw-kp-box) {
    margin-right: 0 !important;
    height: 220px !important;
    max-height: 220px !important;
  }

  /* Kurzprofil stats box: remove bleed margin, full height; section overflow must also be reset */
  .dsw-kp-box {
    margin-right: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Allow stats box to fully show — section overflow:hidden clips it on mobile */
  section:has(.dsw-kp-box) {
    overflow: visible !important;
  }

  /* Kurzprofil inner 2×2 grid → 1 column on mobile */
  .dsw-kp-grid {
    grid-template-columns: 1fr !important;
  }

  /* 3-column grids → 1 column */
  .dsw-g3 { grid-template-columns: 1fr !important; }

  /* 4-column grids → 1 column */
  .dsw-g4 { grid-template-columns: 1fr !important; }

  /* 2-column grids → keep 2 columns (stats, cross-links) */
  .dsw-g2 { grid-template-columns: 1fr 1fr !important; }

  /* Sidebar 300px + 1fr → stacked */
  .dsw-gsb { grid-template-columns: 1fr !important; }

  /* Footer → 1 column */
  .dsw-gf { grid-template-columns: 1fr !important; }

  /* CTA / inline grids (1fr auto) → stacked */
  .dsw-gcta { grid-template-columns: 1fr !important; }

  /* Footer bottom bar */
  div[style*="justify-content:space-between"][style*="flex-wrap:wrap"],
  div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Hero min-height reset */
  section[style*="background:#132339"] { min-height: 0 !important; }

  /* H1 */
  h1 { font-size: 36px !important; line-height: 1.1 !important; }

  /* H2 */
  h2[style*="font-size:42px"],
  h2[style*="font-size: 42px"] { font-size: 28px !important; }
  h2[style*="font-size:40px"],
  h2[style*="font-size: 40px"] { font-size: 26px !important; }
  h2[style*="font-size:38px"],
  h2[style*="font-size: 38px"] { font-size: 26px !important; }
  h2[style*="font-size:36px"],
  h2[style*="font-size: 36px"] { font-size: 24px !important; }
  h2[style*="font-size:34px"],
  h2[style*="font-size: 34px"] { font-size: 23px !important; }
  h2[style*="font-size:32px"],
  h2[style*="font-size: 32px"] { font-size: 22px !important; }

  /* Section vertical padding */
  section[style*="padding:92px"],
  section[style*="padding: 92px"] { padding-top: 52px !important; padding-bottom: 52px !important; }
  section[style*="padding:88px"],
  section[style*="padding: 88px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  section[style*="padding:80px"],
  section[style*="padding: 80px"] { padding-top: 44px !important; padding-bottom: 44px !important; }
  section[style*="padding:64px"],
  section[style*="padding: 64px"] { padding-top: 36px !important; padding-bottom: 36px !important; }

  /* Intro text size */
  p[style*="font-size:20px"],
  p[style*="font-size: 20px"] { font-size: 17px !important; }
  p[style*="font-size:21px"],
  p[style*="font-size: 21px"] { font-size: 17px !important; }
  p[style*="font-size:19px"],
  p[style*="font-size: 19px"] { font-size: 16px !important; }

  /* Stats numbers */
  div[style*="font-size:84px"],
  div[style*="font-size: 84px"],
  div[style*="font-size:80px"],
  div[style*="font-size: 80px"],
  div[style*="font-size:52px"],
  div[style*="font-size: 52px"] { font-size: 44px !important; }

  /* Bearbeitung tables: horizontal scroll */
  .dsw-table { font-size: 13px !important; }
  .dsw-table th,
  .dsw-table td { padding: 8px 10px !important; }

  /* Homepage CTA box inner padding */
  .dsw-gcta[style*="padding:56px"],
  .dsw-gcta[style*="padding: 56px"] { padding: 32px 24px !important; }
}