*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
html, body{ transition:background-color var(--transition-fast), color var(--transition-fast) }
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--ink-900);
  line-height:1.6;
}
img,video{ max-width:100%; height:auto; display:block }
a{ color:var(--blue-600); text-decoration:none }
a:hover{ text-decoration:underline }
h1,h2,h3,h4{ line-height:1.2; margin:0 0 .5rem }
p{ margin:.25rem 0 1rem }

/* ==========================================================================
   Utilities
   ========================================================================== */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; background:#fff;
  padding:.5rem 1rem; border-radius:8px; z-index:10000;
}
.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;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; gap:.5rem; align-items:center;
  border-radius:999px; padding:.75rem 1rem;
  border:1px solid var(--blue-600); text-decoration:none; white-space:nowrap;
  transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.btn--primary{ background:var(--blue-600); color:#fff; border-color:var(--blue-600) }
.btn--primary:hover{ background:var(--blue-700) }
.btn--primary--white{ background:var(--bg-alt); color:#222; border-color:var(--bg-alt) }
.btn--primary--white:hover{ background:var(--bg) }
.btn--ghost{ background:transparent; color:var(--blue-600) }
.btn--link{ padding:0; border:none }
.btn--small{ padding:.5rem .75rem; font-size:.9rem }

/* ==========================================================================
   Header + Navbar (Bootstrap Overrides + eigener Look)
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  transition:background-color var(--transition-fast), border-color var(--transition-fast);
}
.site-header__inner{
  max-width:var(--maxw); margin:auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; gap:1rem;
}

/* Brand */
.logo{ display:flex; align-items:center; gap:.5rem; font-weight:var(--fw-xl); color:var(--ink-900); text-decoration:none }
.logo__mark{
  display:inline-grid; place-items:center;
  background:var(--blue-600); color:#fff; width:36px; height:36px;
  border-radius:8px; box-shadow:var(--shadow)
}
.logo__text{ letter-spacing:.2px }

/* Bootstrap Navbar Skin */
.navbar.bg-body-tertiary{
  background:var(--surface) !important;
  border-bottom:1px solid var(--border);
}
.navbar .nav-link.nav__link{
  display:inline-flex; align-items:center;
  padding:.5rem .75rem; border-radius:10px; border:1px solid transparent;
  color:var(--ink-900);
}
.navbar .nav-link.nav__link:hover{ background:var(--bg-alt); text-decoration:none }

/* Mobile toggler styled as 3 bars */
.navbar-toggler{ border-color:var(--border) }
.navbar-toggler .navbar-toggler-icon{
  background-image:none; position:relative; width:22px; height:2px; display:inline-block; background:var(--ink-900);
}
.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:var(--ink-900);
}
.navbar-toggler .navbar-toggler-icon::before{ top:-6px }
.navbar-toggler .navbar-toggler-icon::after{ top:6px }

/* Mega-Dropdown (3 Spalten) */
.nav__item--mega .dropdown-menu.mega{
  width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  padding:1rem 0;
}

.navbar { position: relative; z-index: 1000; }
.nav__item--mega .dropdown-menu.mega {
  margin-top: 0; /* keine Lücke zwischen Toggle und Panel */
}

.dropdown-menu.mega .container-xxl{ max-width:var(--maxw) }
.mega__col h4{ margin:0 0 .5rem; font-weight:var(--fw-xl) }
.dropdown-menu.mega .dropdown-item{
  background:transparent; padding:.25rem 0; border-radius:6px; color:var(--ink-900);
}
.dropdown-menu.mega .dropdown-item:hover{
  background:var(--bg-alt); text-decoration:none;
}

/* Optional: eigener Hover-Hintergrund für alle Top-Links */
.nav__link:hover{ background:var(--bg-alt) }

/* ==========================================================================
   Theme Toggle (optional)
   ========================================================================== */
.theme-toggle{
  display:inline-flex; align-items:center; gap:.4rem;
  background:transparent; border:1px solid var(--border);
  border-radius:999px; padding:.4rem .6rem; cursor:pointer;
}
.theme-toggle__icon{ font-size:1rem; line-height:1 }
.theme-toggle[aria-pressed="true"] .theme-toggle__icon{ content:"🌙" }
.theme-toggle[aria-pressed="true"] .theme-toggle__label::after{ content:"Dark" }
.theme-toggle[aria-pressed="false"] .theme-toggle__label::after{ content:"Light" }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ position:relative; min-height:68vh; display:grid }
.hero__media{ position:absolute; inset:0; overflow:hidden }
.hero__video{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05) }
.hero__overlay{
  position:relative; z-index:1; max-width:var(--maxw); margin:auto;
  padding:10vh 1rem; color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.45)
}
.hero__overlay h1{ font-size:clamp(2rem,5vw,3.25rem) }
.hero__overlay .accent{ color:#A7D3FF }

/* ==========================================================================
   Strips, Panels, Cards, Chips, Timeline
   ========================================================================== */
.strip{ max-width:var(--maxw); margin:auto; padding:3rem 1rem; display:grid; gap:1.25rem }
.strip--3col{ grid-template-columns:repeat(3,minmax(0,1fr)) }

.panel{ max-width:var(--maxw); margin:auto; padding:3rem 1rem }
.panel--alt{ background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.panel__header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem }

.cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem }
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem; box-shadow:var(--shadow);
  transition:background-color var(--transition-fast), border-color var(--transition-fast);
}

.chips{ display:flex; flex-wrap:wrap; gap:.5rem }
.chip{
  display:inline-block; padding:.5rem .75rem; background:var(--surface);
  border:1px solid var(--border); border-radius:999px;
}

/* Timeline */
.timeline{ position:relative; padding-left:1.5rem; border-left:3px solid var(--blue-600); display:grid; gap:1rem }
.timeline__item{ position:relative }
.timeline__dot{
  position:absolute; left:-1.15rem; top:.25rem; width:.8rem; height:.8rem; border-radius:50%;
  background:var(--blue-600);
}

/* ==========================================================================
   Fokus-Grid
   ========================================================================== */
/* ============= Fokus-Grid (Basis) ============= */
.focus-grid{
  display:grid;
  gap:.5rem;               /* Abstand zwischen Kacheln */
}

/* Kartenstil */
.focus-card{
  position:relative;
  display:block;
  border-radius:12px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow);
  isolation:isolate;
}
.focus-card img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  filter:contrast(1.02) saturate(1.02);
}

/* dezenter Boden-Gradient wie im Referenzbild */
.focus-card::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:42%;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 95%);
  z-index:0;
}
.focus-caption{
  position:absolute; left:14px; right:14px; bottom:10px;
  color:#fff; z-index:1;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.focus-kicker{
  display:block; font-size:.75rem; letter-spacing:.04em; opacity:.9; margin-bottom:.25rem;
}
.focus-caption h3{
  margin:0; line-height:1.25;
  font-size:clamp(1rem, 1.6vw, 1.25rem);
}

/* Light overlay + dunkle, fette Schrift nur für die markierte Kachel */
.focus-card--light::after{
  /* weißer Schleier statt dunklem Verlauf */
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 95%);
}

.focus-card--light .focus-caption{
  color:#0B1020;                  /* sattes Schwarz/Dunkelblau statt Weiß */
  text-shadow:none;               /* keine Schlagschatten auf hellem Schleier */
}

.focus-card--light .focus-caption h3{
  font-weight:700;                /* fett */
}

.focus-card--light .focus-kicker{
  color:#2A3245;                  /* etwas heller als H3, bleibt aber dunkel */
  opacity:1;
}


/* ============= Desktop (>=992px) =============
   - Hero links: 8/12 breit, 2 Zeilen hoch
   - Rechts: grünes Tile ebenfalls 2 Zeilen hoch (gleiche Höhe)
   - Unten: 3 Kacheln über die gesamte Breite – keine Leerfläche
*/
@media (min-width: 992px){
  .focus-grid{
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 220px;          /* Zeilenhöhe => bestimmt die Kachelhöhen */
  }

  .focus-hero{ grid-column: 1 / span 8; grid-row: 1 / span 2; }
  .focus-side{ grid-column: 9 / span 4; grid-row: 1 / span 2; }   /* gleiche Höhe wie Hero */

  /* Reihe 3: drei gleich breite Tiles */
  .focus-grid > .focus-card:nth-of-type(3){ grid-column: 1 / span 4; grid-row: 3; }
  .focus-grid > .focus-card:nth-of-type(4){ grid-column: 5 / span 4; grid-row: 3; }
  .focus-grid > .focus-card:nth-of-type(5){ grid-column: 9 / span 4; grid-row: 3; }
}

/* ============= Tablet (768px–991.98px) =============
   Muster: 1 / 2 / 2
   - Hero über volle Breite, 2 Zeilen hoch
   - Darunter zwei + darunter zwei
*/
@media (min-width: 768px) and (max-width: 991.98px){
  .focus-grid{
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 200px;
  }

  .focus-hero{ grid-column: 1 / span 6; grid-row: 1 / span 2; }

  /* Reihe 3: zwei nebeneinander */
  .focus-side{ grid-column: 1 / span 3; grid-row: 3; }
  .focus-grid > .focus-card:nth-of-type(3){ grid-column: 4 / span 3; grid-row: 3; }

  /* Reihe 4: zwei nebeneinander */
  .focus-grid > .focus-card:nth-of-type(4){ grid-column: 1 / span 3; grid-row: 4; }
  .focus-grid > .focus-card:nth-of-type(5){ grid-column: 4 / span 3; grid-row: 4; }
}

/* ============= Mobile (<768px) =============
   Alles untereinander (kompakte, fixe Höhen für Gleichmäßigkeit)
*/
@media (max-width: 767.98px){
  .focus-grid{ grid-template-columns: 1fr; }
  .focus-card{ height: 230px; }
  .focus-hero{ height: 280px; }
}

/* ==========================================================================
   Footer (revamped)
   ========================================================================== */
.site-footer{
  margin-top:4rem; position:relative;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0,85,162,.08), transparent 60%),
    radial-gradient(1200px 600px at 90% -10%, rgba(0,67,132,.06), transparent 60%),
    var(--surface);
  border-top:1px solid var(--border);
  transition:background-color var(--transition-fast), border-color var(--transition-fast);
}
.site-footer::before{
  content:""; position:absolute; inset:0 auto auto 0; height:2px; width:100%;
  background:linear-gradient(90deg, transparent, var(--blue-600) 20%, var(--blue-700) 80%, transparent);
  opacity:.25;
}
.site-footer__grid{
  max-width:var(--maxw); margin:auto; padding:3rem 1rem 2rem;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem;
}
.footer-heading{
  font-weight:var(--fw-xl); font-size:1rem; letter-spacing:.2px; margin:0 0 .8rem;
}
.site-footer a{ color:var(--ink-700); text-decoration:none }
.site-footer a:hover{ color:var(--ink-900); text-decoration:underline }
.footer-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem }

.footer-brand .logo{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:.5rem;
  color:var(--ink-900); text-decoration:none;
}
.footer-brand p{ margin:.25rem 0 1rem; color:var(--ink-700) }

.footer-socials{ display:flex; gap:.6rem; margin-top:.75rem }
.footer-socials a{
  width:36px; height:36px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface);
  display:grid; place-items:center; box-shadow:var(--shadow);
}
.footer-socials svg{ width:18px; height:18px; fill:currentColor }

.footer-newsletter p{ margin:.25rem 0 .5rem; color:var(--ink-700) }
.footer-newsletter form{ display:flex; gap:.5rem; margin-top:.25rem }
.footer-input{
  flex:1; min-width:0; padding:.6rem .75rem;
  border-radius:10px; border:1px solid var(--border);
  background:var(--bg); color:var(--ink-900);
}
.footer-input:focus{ outline:2px solid var(--blue-600); outline-offset:2px }
.footer-submit{
  padding:.6rem .9rem; border-radius:999px;
  border:1px solid var(--blue-600); background:var(--blue-600); color:#fff;
  cursor:pointer; transition:background-color var(--transition-fast), border-color var(--transition-fast);
}
.footer-submit:hover{ background:var(--blue-700); border-color:var(--blue-700) }
.footer-note{ display:block; margin-top:.5rem; font-size:.85rem; color:var(--ink-500) }

.site-footer__bar{
  border-top:1px solid var(--border);
  padding:1rem; color:var(--ink-500);
}
.site-footer__bar .bar-inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.footer-legal{ display:flex; gap:1rem; flex-wrap:wrap }
.footer-legal a{ color:inherit }
.footer-legal a:hover{ color:var(--ink-700) }

/* Footer: Bootstrap steuert das Grid, daher alte Grid-Deklaration neutralisieren */
.site-footer__grid{
  display:block;            /* statt display:grid */
  padding:0;                /* Abstand kommt über .container-xxl / py-4 */
}
.site-footer__grid .row{ margin-left:0; margin-right:0; } /* nur falls nötig */
.footer-list.nav .nav-link{ color:var(--ink-700); }
.footer-list.nav .nav-link:hover{ color:var(--ink-900); text-decoration:underline; }


/* ==========================================================================
   Responsive Tweaks
   ========================================================================== */
@media (max-width:1100px){
  .strip--3col, .cards{ grid-template-columns:1fr }
  .site-footer__grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:992px){
  /* Bootstrap Breakpoint lg: Mega-Dropdown füllt weiterhin den View */
  .dropdown-menu.mega{ border-radius:0 }
}
@media (max-width:700px){
  .site-footer__grid{ grid-template-columns:1fr }
  .footer-newsletter form{ flex-direction:column }
  .footer-submit{ width:100% }
  .site-footer__bar .bar-inner{ flex-direction:column; align-items:flex-start }
}


/* ==========================================================================
   (Optional) Visuelle Feinheiten für Dark Mode Übergänge
   ========================================================================== */
body, .navbar, .dropdown-menu, .card, .site-footer, .panel, .strip {
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Project bands */
.case{background:var(--surface)}
.case.is-alt{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.case__wrap{padding:clamp(2rem,5vw,4rem) 0}
.case__img-wrap{
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  min-height:320px;background:linear-gradient(180deg,#eef2f7, #e2e8f0)
}
.case__img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width: 992px){ .case__img-wrap{min-height:420px} }

.case__kicker{font-size:.85rem;letter-spacing:.04em;color:var(--ink-500);margin-bottom:.2rem}
.case__title{font-size:clamp(1.6rem,2.4vw,2.25rem);line-height:1.15;margin:0 0 .4rem}
.case__lead{color:var(--ink-700);margin:0 0 .75rem}
.case__bullets{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.35rem}
.case__bullets li::before{content:"• ";color:var(--blue-600);font-weight:var(--fw-xl)}

/* dezente Bildrahmenlinie auf sehr hellem BG */
[data-theme="dark"] .case__img-wrap{background:#101623}