:root{
  /* Brand (Baade & Hayk) */
  --primary: #243B53;     /* brand-dark */
  --secondary: #5F87A8;   /* brand-footer / mid */
  --accent: #6EA8D9;      /* brand-light */
  --gray: #D9DEE4;



  /* Premium metallic accents (silver + blue shimmer) */
  --silver-1: #F8FAFC;
  --silver-2: #D7DEE6;
  --silver-3: #B8C2CE;
  --silver-4: #FFFFFF;
  --metallic: linear-gradient(135deg, rgba(248,250,252,.95), rgba(215,222,230,.85), rgba(255,255,255,.92), rgba(184,194,206,.85));
  --metallic-blue: linear-gradient(135deg, rgba(110,168,217,.55), rgba(248,250,252,.95), rgba(36,59,83,.18), rgba(110,168,217,.35));
  --ring: 0 0 0 3px rgba(215,222,230,.55), 0 0 0 6px rgba(110,168,217,.22);


  /* Metallic header/footer gradients */
  --header-grad: linear-gradient(135deg,
      rgba(36,59,83,.92) 0%,
      rgba(110,168,217,.28) 18%,
      rgba(248,250,252,.10) 34%,
      rgba(95,135,168,.78) 62%,
      rgba(36,59,83,.92) 100%);
  --footer-grad: linear-gradient(135deg,
      rgba(36,59,83,.96) 0%,
      rgba(95,135,168,.72) 32%,
      rgba(110,168,217,.22) 52%,
      rgba(215,222,230,.10) 70%,
      rgba(36,59,83,.96) 100%);
  --page-grad: radial-gradient(1100px 700px at 20% 0%,
      rgba(110,168,217,.10), transparent 58%),
    radial-gradient(1000px 650px at 80% 12%,
      rgba(215,222,230,.16), transparent 60%),
    linear-gradient(180deg, #F5F7FA 0%, #EEF2F6 100%);
  --hairline: linear-gradient(90deg, transparent, rgba(215,222,230,.95), rgba(110,168,217,.40), rgba(255,255,255,.95), transparent);


  /* Aliases (for older templates / utility classes) */
  --brand-dark: var(--primary);
  --brand-light: var(--accent);
  --brand-gray: var(--gray);

  /* Premium surfaces */
  --bg-main: #F4F6F8;
  --surface: #ffffff;
  --surface-soft: #F7F9FB;
  --surface-alt: #EEF2F6;
  --border-soft: rgba(36,59,83,0.12);

  --dark: #111827;
  --radius: 16px;
  --shadow-sm: 0 10px 26px rgba(0,0,0,0.06);
  --shadow-md: 0 18px 46px rgba(0,0,0,0.12);

  /* Sticky header offset helper */
  --header-h: 96px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top: var(--header-h); }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--page-grad);
  color: var(--dark);
  line-height: 1.65;
  overflow-x:hidden;
}

/* Page wrapper */
.page-main{ min-height: 60vh; }

/* Backwards-compatible hero class names from older drafts */
.hero-wrap{ position:relative; color:#fff; background: var(--primary); overflow:hidden; }
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(248,250,252,.22), transparent 60%),
    radial-gradient(800px 520px at 78% 22%, rgba(110,168,217,.24), transparent 58%),
    linear-gradient(180deg, rgba(36,59,83,.72), rgba(36,59,83,.34) 45%, rgba(36,59,83,.74));
  z-index:1;
}

/* Generic form styling */
.form-grid{ display:grid; gap: 14px; }
.input, .textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(36,59,83,.18);
  padding: 12px 14px;
  background: #fff;
  color: var(--dark);
}
.input:focus, .textarea:focus{ outline: none; box-shadow: var(--ring); border-color: rgba(110,168,217,.55); }
.textarea{ resize: vertical; min-height: 140px; }
.form-note{ font-size: .9rem; color: rgba(17,24,39,.70); }
.check-row{ display:flex; gap:10px; align-items:flex-start; }
.check-row input{ margin-top: 4px; }

/* Layout helpers */
.container{
  width: min(1100px, 92vw);
  margin: 0 auto;
}
.container-narrow{
  width: min(1152px, 92vw);
  margin: 0 auto;
}

/* ---------------------------------------------------------
   Header / Navigation (PPG-Struktur, BH-Look)
   --------------------------------------------------------- */
.header-bar{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--header-grad);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.header-bar::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 1px;
  background: var(--hairline);
  opacity: .95;
  pointer-events:none;
}

.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 14px;
}

/* Menu accent outline (premium) */
.navbar > ul a{
  border: 1px solid transparent;
}
.navbar > ul a:hover{
  border-color: rgba(215,222,230,.75);
  box-shadow: 0 12px 26px rgba(15,23,42,.10);
}
.navbar > ul a:focus-visible{
  outline: none;
  border-color: rgba(110,168,217,.55);
  box-shadow: var(--ring);
}
.navbar > ul a[aria-current="page"]{
  border-color: rgba(110,168,217,.45);
}



.logo a{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-img-header{ height: 140px; width:auto; display:block; }

.nav-toggle{
  display:none;
  font-size: 1.35rem;
  line-height: 1;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(215,222,230,.85);
  color: var(--primary);
  border-radius: 14px;
  padding: 11px 12px;
  box-shadow: 0 14px 36px rgba(15,23,42,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.nav-toggle:hover{ filter: brightness(0.99); box-shadow: 0 18px 44px rgba(15,23,42,.14); }
.nav-toggle:active{ transform: translateY(1px); }

.navbar > ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap: 6px;
  flex-wrap: wrap;
}

.navbar > ul li{ position:relative; }

.navbar > ul a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration:none;
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--primary);
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.navbar > ul a:hover{
  background: rgba(217,222,228,.45);
}

.navbar > ul a[aria-current="page"]{
  background: rgba(217,222,228,.55);
  box-shadow: inset 0 0 0 1px rgba(36,59,83,.10);
}

/* Phone CTA like PPG but BH colors */
.cta-phone{
  background: linear-gradient(180deg, var(--accent), #5C9ED6);
  color:#0e2235;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 22px rgba(110,168,217,.28);
}
.cta-phone:hover{ filter: brightness(0.98); }

/* Mobile nav (DonDragon-style behavior, BH colors) */
@media (max-width: 840px){
  .logo-img-header{ height: 120px; }
  .nav-toggle{ display:block; }

  /* Full-width overlay panel (not centered card) */
  .navbar > ul{
    display:none;
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;

    /* space for sticky header */
    padding: calc(var(--header-h) + 18px) 18px 28px;

    flex-direction: column;
    align-items: stretch;
    gap: 10px;

    background:
      radial-gradient(1050px 700px at 18% 0%, rgba(110,168,217,.14), transparent 60%),
      radial-gradient(900px 650px at 82% 12%, rgba(215,222,230,.22), transparent 60%),
      linear-gradient(180deg, rgba(248,250,252,.98), rgba(238,242,246,.98));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    z-index: 2000;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .navbar > ul.open{ display:flex; }

  /* Ensure items stack (avoid any inherited flex on li) */
  .navbar > ul > li{ display:block; width: 100%; }

  .navbar > ul a{
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    width: 100%;
    padding: 14px 14px;
    border-radius: 18px;
    color: var(--primary);
    text-decoration:none;
    font-weight: 760;

    background: rgba(255,255,255,.78);
    border: 1px solid rgba(215,222,230,.80);
    box-shadow: 0 22px 54px rgba(15,23,42,.10);
  }
  .navbar > ul a:hover{ background: rgba(110,168,217,.10); }

  .navbar > ul a[aria-current="page"]{
    background: rgba(110,168,217,.14);
    border-color: rgba(110,168,217,.35);
  }

  /* phone CTA inside overlay */
  .navbar > ul .cta-phone{
    width: 100%;
    justify-content:center;
    margin-top: 6px;
    padding: 14px 16px;
    border-radius: 18px;

    background: linear-gradient(180deg, rgba(110,168,217,.95), rgba(92,158,214,.92));
    color: #0e2235;
    border: 1px solid rgba(255,255,255,.75);
    box-shadow: 0 18px 40px rgba(15,23,42,.12), 0 12px 28px rgba(110,168,217,.22);
  }

  /* Keep toggle reachable above overlay */
  .nav-toggle{
    position: relative;
    z-index: 2100;
  }
  .navbar > ul.open ~ .nav-toggle,
  .header-bar .nav-toggle{
    /* no-op, keeps existing */
  }
}


/* ---------------------------------------------------------
   Hero (BH City Background)
   --------------------------------------------------------- */
.hero{
  position:relative;
  color:#fff;
  background: var(--primary);
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: url('./assets/bg-city.jpg') center/cover no-repeat;
  opacity: .92;
  filter: saturate(92%) brightness(1.02);
  transform: scale(1.02);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(36,59,83,.55), rgba(36,59,83,.25) 45%, rgba(36,59,83,.55));
}
.hero .hero-inner{
  position:relative;
  z-index:1;
  min-height: 70vh;
  display:flex;
  align-items:center;
  padding: 3.5rem 0;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 30px;
  align-items:center;
  width:100%;
}

.hero h1{
  font-size: clamp(2.0rem, 3.1vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.hero p.lead{
  margin-top: 1rem;
  font-size: 1.12rem;
  color: rgba(255,255,255,.92);
}

.hero-actions{
  margin-top: 1.4rem;
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
}

/* Buttons system */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: .5rem;
  padding: 0.9rem 1.15rem;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 750;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease;
  white-space:nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: linear-gradient(180deg, var(--accent), #5C9ED6);
  color: #0e2235;
  box-shadow: 0 12px 26px rgba(110,168,217,.30);
  border-color: rgba(255,255,255,.45);
}
.btn-primary:hover{ filter: brightness(0.98); }

.btn-secondary{
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.28);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-secondary:hover{ background: rgba(255,255,255,0.24); }

/* Metallic accent on interactive elements */
a[aria-current="page"]{
  position: relative;
}
a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: var(--metallic-blue);
  box-shadow: 0 10px 26px rgba(215,222,230,.40), 0 8px 22px rgba(110,168,217,.18);
}

.btn{
  position:relative;
  overflow:hidden;
}
.btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: var(--metallic);
  opacity: 0;
  filter: blur(0.2px);
  transform: translateX(-110%) skewX(-18deg);
  transition: transform .55s ease, opacity .22s ease;
  pointer-events:none;
}
.btn:hover::after{
  opacity: .25;
  transform: translateX(110%) skewX(-18deg);
}
.btn-primary{
  border-color: rgba(255,255,255,.55);
}
.btn-secondary{
  border-color: rgba(215,222,230,.45);
}



/* Hero card */
.hero-card{
  background: rgba(255,255,255,.84);
  color: var(--primary);
  border: 1px solid rgba(217,222,228,.85);
  border-radius: 22px;
  padding: 26px;
  box-shadow: 0 22px 55px rgba(0,0,0,0.20);
}
.hero-card h3{ font-size: 1.2rem; margin-bottom: .85rem; }
.hero-card ul{ padding-left: 18px; color: rgba(36,59,83,.84); }
.hero-card li{ margin: .35rem 0; }

/* Mobile hero */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-card{ max-width: 520px; margin: 0 auto; }
}
@media (max-width: 520px){
  .hero .hero-inner{ min-height: auto; padding: 5.25rem 0 3.0rem; }
}

/* ---------------------------------------------------------
   Sections / Cards (Premium panels)
   --------------------------------------------------------- */
.section{
  padding: clamp(2.4rem, 4.8vw, 4.2rem) 0;
}
.panel{
  background: var(--surface);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.panel.alt{ background: var(--surface-soft); }

.section h2{
  color: var(--primary);
  font-size: clamp(1.55rem, 2.2vw, 2.1rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.9rem;
}
.section p{
  color: rgba(17,24,39,.86);
  max-width: 820px;
}

/* Divider accent under headings (subtle) */
.section h2::after{
  content:"";
  display:block;
  width: 88px;
  height: 3px;
  margin-top: .55rem;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(36,59,83,.55), transparent);
  opacity: .9;
}

/* Simple grid cards */
.card-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 1.25rem;
}

/* Contact layout */
.contact-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 800px){
  .contact-grid{ grid-template-columns: 1fr; }
}
.card{
  background: var(--surface);
  border: 1px solid rgba(36,59,83,0.10);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: 0 22px 54px rgba(15,23,42,0.09);
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.card h3{ color: var(--primary); margin-bottom: .35rem; font-size: 1.05rem; }
.card p{ margin:0; font-size: .98rem; color: rgba(36,59,83,.78); }

/* ----------------------------------------
   Silver shimmer accents (subtle, premium)
   ---------------------------------------- */
.silver-hairline{
  height: 1px;
  width: min(680px, 92%);
  margin: 1.2rem auto;
  background: linear-gradient(90deg, transparent, rgba(215,222,230,.95), rgba(110,168,217,.35), rgba(255,255,255,.95), transparent);
  opacity: .95;
}

.card{
  position: relative;
  isolation: isolate;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--radius);
  padding: 1px;
  background: var(--metallic-blue);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .72;
  pointer-events:none;
}
.card:hover::before{ opacity: .75; }



@media (max-width: 992px){
  .card-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px){
  .card-grid{ grid-template-columns: 1fr; }
}

/* Center last card when a 2-column grid has an odd number of items */
@media (max-width: 992px) and (min-width: 601px){
  .card-grid > *:nth-last-child(1):nth-child(odd){
    grid-column: 1 / -1;
    justify-self: center;
    width: min(520px, 100%);
  }
}

/* Generic helper if you use other 2-col grids in the future */
@media (max-width: 992px) and (min-width: 601px){
  .grid-center-last > *:nth-last-child(1):nth-child(odd){
    grid-column: 1 / -1;
    justify-self: center;
    width: min(520px, 100%);
  }
}



/* ---------------------------------------------------------
   Footer (separate file include)
   --------------------------------------------------------- */
.footer{
  background: var(--footer-grad);
  color:#fff;
  margin-top: 0;
  border-top: 1px solid rgba(255,255,255,.18);
}
.footer .footer-inner{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 26px;
  padding: 2.6rem 0;
}
.footer .logo-img-footer{ height: 124px; width:auto; display:block; }


.footer{
  position: relative;
}
.footer::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 1px;
  background: var(--hairline);
  opacity: .95;
  pointer-events:none;
}

.footer h4{
  font-size: 1rem;
  margin-bottom: .75rem;
  letter-spacing: .01em;
}
.footer a{
  color: rgba(255,255,255,.92);
  text-decoration:none;
}
.footer a:hover{ color: #fff; text-decoration: underline; }

.footer ul{ list-style:none; padding:0; margin:0; }
.footer li{ margin: .4rem 0; color: rgba(255,255,255,.90); }

.footer .footer-bottom{
  border-top: 1px solid rgba(255,255,255,.20);
  padding: 0.95rem 0;
  font-size: .85rem;
  color: rgba(255,255,255,.82);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 900px){
  .footer .footer-inner{ grid-template-columns: 1fr; }
  .footer .footer-bottom{ justify-content:center; text-align:center; }
}

/* Media safety */
img, video, svg, canvas{ max-width:100%; height:auto; }
:where(h1,h2,h3,h4,h5,h6,p,li,a,button,span,div){
  overflow-wrap:anywhere;
  word-break: break-word;
  hyphens:auto;
}



/* --- Minimal utility classes (Tailwind-like) for this project --- */
.mx-auto{margin-left:auto;margin-right:auto;}
.mt-0{margin-top:0;}
.mt-1{margin-top:.25rem;}
.mt-2{margin-top:.5rem;}
.mt-3{margin-top:.75rem;}
.mt-4{margin-top:1rem;}
.mt-6{margin-top:1.5rem;}

.p-2{padding:.5rem;}
.p-6{padding:1.5rem;}
.px-3{padding-left:.75rem;padding-right:.75rem;}
.px-4{padding-left:1rem;padding-right:1rem;}
.px-5{padding-left:1.25rem;padding-right:1.25rem;}
.py-2{padding-top:.5rem;padding-bottom:.5rem;}
.py-3{padding-top:.75rem;padding-bottom:.75rem;}
.py-4{padding-top:1rem;padding-bottom:1rem;}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}
.py-12{padding-top:3rem;padding-bottom:3rem;}
.py-16{padding-top:4rem;padding-bottom:4rem;}

.text-sm{font-size:.875rem;line-height:1.25rem;}
.text-base{font-size:1rem;line-height:1.5rem;}
.text-lg{font-size:1.125rem;line-height:1.75rem;}
.text-xl{font-size:1.25rem;line-height:1.75rem;}
.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-3xl{font-size:1.875rem;line-height:2.25rem;}
.text-4xl{font-size:2.25rem;line-height:2.5rem;}
.font-medium{font-weight:500;}
.font-semibold{font-weight:600;}
.font-bold{font-weight:700;}

.leading-tight{line-height:1.15;}
.leading-relaxed{line-height:1.7;}

.flex{display:flex;}
.inline-flex{display:inline-flex;}
.grid{display:grid;}
.flex-wrap{flex-wrap:wrap;}
.items-center{align-items:center;}
.items-start{align-items:flex-start;}
.justify-between{justify-content:space-between;}
.justify-self-start{justify-self:start;}
.gap-1{gap:.25rem;}
.gap-2{gap:.5rem;}
.gap-3{gap:.75rem;}
.gap-4{gap:1rem;}
.gap-6{gap:1.5rem;}
.gap-10{gap:2.5rem;}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}

.hidden{display:none;}

.border{border-width:1px;border-style:solid;border-color:rgba(15,23,42,.18);}
.border-t{border-top-width:1px;border-top-style:solid;}
.border-slate-200{border-color:rgba(15,23,42,.12);}
.border-slate-300{border-color:rgba(15,23,42,.18);}

.rounded-lg{border-radius:.75rem;}
.rounded-xl{border-radius:1rem;}
.rounded-2xl{border-radius:1.25rem;}

.shadow-sm{box-shadow:0 8px 18px rgba(2,8,23,.06);}
.shadow-xl{box-shadow:0 18px 50px rgba(2,8,23,.12);}

.bg-white{background:#fff;}
.text-white{color:#fff;}
.text-slate-700{color:rgba(15,23,42,.75);}
.text-slate-800{color:rgba(15,23,42,.86);}

/* special Tailwind-like classes with escaped selectors */
.bg-white\/30{background:rgba(255,255,255,.30);}
.text-white\/90{color:rgba(255,255,255,.90);}
.text-white\/80{color:rgba(255,255,255,.80);}
.border-white\/20{border-color:rgba(255,255,255,.20);}

.bg-\[color\:var\(--brand-gray\)\]\/20{background:rgba(217,222,228,.20);}
.bg-\[color\:var\(--brand-light\)\]\/20{background:rgba(110,168,217,.20);}
.border-\[color\:var\(--brand-gray\)\]\/70{border-color:rgba(217,222,228,.70);}
.hover\:bg-\[color\:var\(--brand-gray\)\]:hover{background:rgba(217,222,228,1);}
.hover\:bg-\[color\:var\(--brand-gray\)\]\/30:hover{background:rgba(217,222,228,.30);}
.hover\:opacity-100:hover{opacity:1;}

.text-\[color\:var\(--brand-dark\)\]{color:var(--brand-dark);}
.text-\[color\:var\(--brand-dark\)\]\/80{color:rgba(36,59,83,.80);}

.min-h-\[70vh\]{min-height:70vh;}

.focus\:outline-none:focus{outline:none;}
.focus\:ring-2:focus{box-shadow:0 0 0 2px rgba(110,168,217,.55);}

.h-5{height:1.25rem;}
.h-auto{height:auto;}
.w-48{width:12rem;}
.w-full{width:100%;}
/* Responsive (md = 768px+) */
@media (min-width: 768px){
  .md\:flex{display:flex;}
  .md\:hidden{display:none;}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .md\:py-20{padding-top:5rem;padding-bottom:5rem;}
  .md\:text-5xl{font-size:3rem;line-height:1;}
}


/* Header link color on metallic header */
.header-bar .navbar > ul a{
  color: rgba(255,255,255,.92);
}
.header-bar .navbar > ul a:hover{
  color: #fff;
}
.header-bar .cta-phone{
  color: #0e2235;
}


/* Step 2.3: Navy typography on metallic header/footer */
.header-bar{
  color: var(--primary);
}
.header-bar .navbar > ul a{
  color: var(--primary);
}
.header-bar .navbar > ul a:hover{
  color: #0e2235;
}
.header-bar .nav-toggle{
  color: var(--primary);
}

.footer{
  color: rgba(36,59,83,.92);
}
.footer h4{
  color: var(--primary);
}
.footer a{
  color: rgba(36,59,83,.90);
}
.footer a:hover{
  color: #0e2235;
  text-decoration: underline;
}
.footer .footer-bottom{
  color: rgba(36,59,83,.78);
  border-top: 1px solid rgba(36,59,83,.14);
}

/* Make footer background slightly lighter for navy readability */
.footer{
  background: linear-gradient(135deg,
      rgba(248,250,252,.92) 0%,
      rgba(215,222,230,.82) 34%,
      rgba(110,168,217,.16) 56%,
      rgba(248,250,252,.90) 100%);
}


/* Mobile menu: slightly larger labels */
@media (max-width: 840px){
  .navbar > ul a{ font-size: 1.05rem; }
}

/* Desktop phone CTA: glossy blue + silver metallic rim */
.cta-phone{
  background: linear-gradient(180deg, rgba(110,168,217,.98) 0%, rgba(92,158,214,.92) 55%, rgba(110,168,217,.96) 100%);
  border: 1px solid rgba(215,222,230,.88);
  box-shadow: 0 18px 40px rgba(15,23,42,.14), 0 10px 24px rgba(110,168,217,.22);
  position: relative;
  overflow: hidden;
}
.cta-phone::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: var(--metallic);
  opacity: .22;
  transform: translateX(-120%) skewX(-18deg);
  transition: transform .55s ease, opacity .22s ease;
  pointer-events:none;
}
.cta-phone:hover::after{
  opacity: .28;
  transform: translateX(120%) skewX(-18deg);
}


/* ---------------------------------------------------------
   Step 2.4 Premium Moves (subtle, high-end)
   --------------------------------------------------------- */

/* Section dividers: thin silver hairline between big blocks */
.section{
  position: relative;
}
.section + .section::before{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: min(1080px, 92vw);
  height: 1px;
  background: var(--hairline);
  opacity: .95;
}

/* Optional: add a touch of “air” around the divider */
.section + .section{ padding-top: clamp(2.7rem, 5.2vw, 4.6rem); }

/* Premium headline underline (H2/H3) */
.section h2,
.panel h2{
  position: relative;
  display: inline-block;
  padding-bottom: .55rem;
}
.section h2::after,
.panel h2::after{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 74px;
  height: 3px;
  border-radius: 999px;
  background: var(--hairline);
  box-shadow: 0 10px 26px rgba(215,222,230,.40), 0 8px 22px rgba(110,168,217,.18);
  opacity: .9;
}

/* Card titles: tiny metallic micro-line (keeps it premium, not loud) */
.card h3{
  position: relative;
  display: inline-block;
  padding-bottom: .45rem;
}
.card h3::after{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 42px;
  height: 2px;
  border-radius: 999px;
  background: var(--hairline);
  opacity: .65;
}

/* Panels: slightly more premium edges */
.panel{
  border-color: rgba(215,222,230,.55);
}
.panel.alt{
  background:
    radial-gradient(700px 380px at 20% 0%, rgba(110,168,217,.10), transparent 62%),
    radial-gradient(620px 380px at 80% 12%, rgba(215,222,230,.18), transparent 58%),
    rgba(255,255,255,.75);
  border-color: rgba(215,222,230,.72);
}
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--radius);
  padding: 1px;
  background: var(--metallic-blue);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .35;
  pointer-events:none;
}
.panel{ position: relative; isolation: isolate; }

/* Hero buttons: a touch more premium depth */
.hero-actions .btn-primary{
  box-shadow: 0 22px 54px rgba(15,23,42,0.12), 0 12px 28px rgba(110,168,217,.24);
}
.hero-actions .btn-secondary{
  border-color: rgba(215,222,230,.55);
}

/* Footer links: keep navy readable and premium */
.footer a{ text-underline-offset: 3px; }



/* ---------------------------------------------------------
   Step 2.5 Footer Navy Fix (force consistency)
   --------------------------------------------------------- */

.footer,
.footer *{
  color: var(--primary) !important;
}

.footer a{
  color: var(--primary) !important;
}

.footer a:hover{
  color: #0e2235 !important;
}

.footer .footer-bottom{
  border-top: 1px solid rgba(36,59,83,.18) !important;
}

/* Slightly increase contrast for paragraph text inside footer */
.footer p{
  color: rgba(36,59,83,.85) !important;
}



/* ---------------------------------------------------------
   Step 2.6 Ultra Premium Footer Refinement
   --------------------------------------------------------- */

/* More structured footer layout feeling */
.footer .footer-inner{
  gap: 42px;
}

/* Elegant logo emphasis */
.footer .logo-img-footer{
  filter: drop-shadow(0 8px 22px rgba(36,59,83,.18));
  transition: transform .25s ease, filter .25s ease;
}
.footer .logo-img-footer:hover{
  transform: translateY(-2px);
  filter: drop-shadow(0 12px 30px rgba(36,59,83,.28));
}

/* Typography refinement */
.footer h4{
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  opacity: .75;
}

.footer ul{
  list-style: none;
  padding: 0;
}

.footer li{
  margin-bottom: .55rem;
}

/* Subtle divider between columns on desktop */
@media (min-width: 992px){
  .footer .footer-inner > div{
    position: relative;
  }
  .footer .footer-inner > div:not(:first-child)::before{
    content:"";
    position:absolute;
    left:-21px;
    top:10px;
    bottom:10px;
    width:1px;
    background: linear-gradient(
      to bottom,
      transparent,
      rgba(36,59,83,.18),
      transparent
    );
    opacity:.7;
  }
}

/* Slightly more compact bottom bar */
.footer .footer-bottom{
  padding-top: 1.2rem;
  padding-bottom: .8rem;
  font-size: .92rem;
  letter-spacing: .02em;
  opacity: .85;
}

/* Refined link hover (luxury minimalism) */
.footer a{
  transition: opacity .2s ease, letter-spacing .2s ease;
}
.footer a:hover{
  opacity: .85;
  letter-spacing: .02em;
}



/* Clickable service cards */
.card-link{
  display:block;
  color: inherit;
  text-decoration:none;
}
.card-link:focus-visible{
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius);
}
.card-link .card{
  height: 100%;
}
.card-link:hover .card{
  transform: translateY(-2px);
}
.card{
  transition: transform .18s ease, box-shadow .18s ease;
}



/* Dropdown navigation (Leistungen) — cleaned & mobile-safe */
.navbar ul{ list-style:none; }
.navbar li{ position: relative; }

.navbar .has-dropdown > .nav-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  position: relative;
}

/* Desktop: hide arrow button (dropdown opens via hover) */
@media (min-width: 841px){
  .navbar .dropdown-toggle{ display:none; }
  .navbar .has-dropdown:hover > .dropdown{ display:block; }
}

/* Dropdown base */
.navbar .dropdown{
  display:none;
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  top: calc(100% + 12px);
  width: 280px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(215,222,230,.75);
  box-shadow: 0 26px 60px rgba(15,23,42,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2100;
}

.navbar .dropdown a{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 720;
  border: 1px solid transparent;
}
.navbar .dropdown a:hover{
  background: rgba(110,168,217,.10);
  border-color: rgba(215,222,230,.75);
}

/* Mobile: dropdown inside the opened overlay panel */
@media (max-width: 840px){
  .navbar .dropdown{
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    box-shadow: 0 16px 38px rgba(15,23,42,.08);
    border-radius: 18px;
    margin-top: 10px;
    padding: 12px;
    background: rgba(248,250,252,.88);
  }

  /* Make the (hidden) toggle cover the whole "Leistungen" row.
     So the arrow isn't visible, but tapping the row toggles the submenu. */
  .navbar .dropdown-toggle{
    position:absolute;
    inset: 0;
    opacity: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
}


/* ---------------------------------------------------------
   Step 2.8 Investor blocks, bullets & FAQ
   --------------------------------------------------------- */

.lead-muted{
  margin: 0 auto 1.1rem;
  max-width: 780px;
  color: rgba(36,59,83,.82);
  font-size: 1.02rem;
}

/* Bullet list (centered feel, but readable) */
.bullet-list{
  margin: .8rem auto 0;
  padding-left: 1.1rem;
  max-width: 760px;
  color: rgba(36,59,83,.82);
}
.bullet-list li{ margin: .45rem 0; }

/* Investor KPI cards */
.kpi-card .bullet-list{ max-width: none; }

/* Process steps */
.process-steps{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 1.1rem;
}
.step{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(215,222,230,.60);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: 0 16px 38px rgba(15,23,42,0.08);
}
.step h3{ margin: 0 0 .25rem; }
.step p{ margin: 0; color: rgba(36,59,83,.78); }

.step-badge{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  color: var(--primary);
  background: var(--metallic);
  border: 1px solid rgba(215,222,230,.75);
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
}

@media (max-width: 900px){
  .process-steps{ grid-template-columns: 1fr; }
}

/* Service highlights (2 cards) */
.service-highlights{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  margin-top: 1.1rem;
}
@media (max-width: 820px){
  .service-highlights{ grid-template-columns: 1fr; }
}

/* FAQ */
.faq{
  max-width: 920px;
  margin: 0 auto;
  text-align: left;
}
.faq h3{
  text-align:center;
  margin-bottom: .8rem;
}
.faq-item{
  border: 1px solid rgba(215,222,230,.70);
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 14px 34px rgba(15,23,42,0.07);
  padding: 0;
  overflow:hidden;
  margin: .75rem 0;
}
.faq-item summary{
  cursor: pointer;
  padding: 14px 16px;
  list-style: none;
  font-weight: 760;
  color: var(--primary);
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content: "＋";
  font-weight: 900;
  opacity: .7;
}
.faq-item[open] summary::after{
  content: "–";
}
.faq-answer{
  padding: 0 16px 14px 16px;
  color: rgba(36,59,83,.82);
}
.faq-answer p{ margin: .25rem 0 0; }



/* ---------------------------------------------------------
   Step 2.9 Premium Buttons (less "flat", more luxury)
   --------------------------------------------------------- */

.btn{
  border-radius: 16px;
  letter-spacing: .01em;
  box-shadow: 0 16px 36px rgba(15,23,42,.10);
}

/* Primary: glossy blue gradient + silver rim + inner highlight */
.btn-primary{
  background: linear-gradient(180deg,
    rgba(126,184,232,.98) 0%,
    rgba(110,168,217,.98) 32%,
    rgba(92,158,214,.94) 72%,
    rgba(126,184,232,.96) 100%);
  border-color: rgba(215,222,230,.92);
  color: #0e2235;
  box-shadow: 0 22px 54px rgba(15,23,42,.14), 0 12px 28px rgba(110,168,217,.22);
  position: relative;
}
.btn-primary::before{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 15px;
  background: radial-gradient(120% 120% at 18% 18%,
    rgba(255,255,255,.62), transparent 55%);
  opacity: .70;
  pointer-events:none;
}
.btn-primary:hover{
  filter: brightness(0.99);
}

/* Soft primary for secondary actions on light surfaces (still "blue", but calmer) */
.btn-primary-soft{
  background: linear-gradient(180deg,
    rgba(248,250,252,.92) 0%,
    rgba(215,222,230,.70) 42%,
    rgba(110,168,217,.18) 100%);
  color: var(--primary);
  border-color: rgba(110,168,217,.38);
  box-shadow: 0 18px 42px rgba(15,23,42,.10);
}
.btn-primary-soft::before{ opacity: .45; }

/* Secondary: keep for dark hero only; on light it should not be used */
.btn-secondary{
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.30);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}



/* Luxury finisher: KPI & steps cards */
.kpi-card,
.step,
.faq-item{
  position: relative;
}
.kpi-card::after,
.step::after,
.faq-item::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  top: 10px;
  height: 1px;
  background: var(--hairline);
  opacity: .55;
  pointer-events:none;
}
.kpi-card{
  box-shadow: 0 26px 64px rgba(15,23,42,0.10);
}



/* ---------------------------------------------------------
   Step 2.9 Dropdown usability (desktop)
   --------------------------------------------------------- */
@media (min-width: 841px){
  .navbar .has-dropdown{
    padding-bottom: 12px; /* increases hover area */
  }
  .navbar .has-dropdown::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top: 100%;
    height: 18px; /* hover bridge between trigger and dropdown */
  }
  .navbar .has-dropdown:hover > .dropdown,
  .navbar .has-dropdown:focus-within > .dropdown{
    display:block;
  }
  .navbar .dropdown{
    top: calc(100% + 6px); /* reduce gap */
  }
}



/* --------------------------------------------
   Step 3.0 Header alignment fix
-------------------------------------------- */
.navbar > ul{
  align-items: center;
}
.navbar .has-dropdown .nav-row{
  align-items: center;
}
.navbar .dropdown-toggle{
  margin-top: 1px;
}



/* --------------------------------------------
   Step 3.0 Button height refinement
-------------------------------------------- */
.btn{
  padding: 0.65rem 1.4rem; /* lower height */
  border-radius: 14px;
}

.btn-primary{
  border-width: 1px;
}

.btn-primary::before{
  border-radius: 13px;
}



/* --------------------------------------------
   Team placeholders (Über uns)
-------------------------------------------- */
.team-card{
  text-align: center;
}

.team-placeholder{
  width: 100%;
  height: 180px;
  border-radius: 18px;
  margin-bottom: 1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
  color: var(--primary);
  background: linear-gradient(180deg,
    rgba(248,250,252,.92) 0%,
    rgba(215,222,230,.75) 48%,
    rgba(110,168,217,.18) 100%);
  border: 1px solid rgba(215,222,230,.75);
  box-shadow: 0 20px 48px rgba(15,23,42,0.08);
}



/* --------------------------------------------
   Step 3.1 Fix: Leistungen alignment in header
-------------------------------------------- */
@media (min-width: 841px){
  .navbar > ul > li{ display:flex; align-items:center; }
}


/* Make the dropdown trigger row match the same vertical rhythm as links */
.navbar .has-dropdown > .nav-row{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.navbar .has-dropdown > .nav-row:hover{
  background: rgba(110,168,217,.10);
  border-color: rgba(215,222,230,.75);
  box-shadow: 0 12px 26px rgba(15,23,42,.10);
}

/* Inner link should not add extra padding (otherwise it shifts) */
.navbar .has-dropdown > .nav-row > a{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Keep toggle aligned */
.navbar .dropdown-toggle{
  margin-top: 0 !important;
}



/* --------------------------------------------
   Step 3.1 Button height: slightly slimmer
-------------------------------------------- */
.btn{
  padding: 0.58rem 1.35rem;
}



/* --------------------------------------------
   Step 3.1 Team photos (Über uns)
-------------------------------------------- */
.team-photo{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 18px;
  display:block;
  border: 1px solid rgba(215,222,230,.70);
  box-shadow: 0 22px 54px rgba(15,23,42,0.10);
}
@media (max-width: 840px){
  .team-photo{ height: 200px; }
}



/* ---------------------------------------------------------
   Step 3.2 Nav height normalization (fix "Leistungen" offset)
   --------------------------------------------------------- */
:root{ --nav-h: 44px; }

.navbar > ul{ align-items: center; }

.navbar > ul > li > a{
  height: var(--nav-h);
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.navbar .has-dropdown > .nav-row{
  height: var(--nav-h);
  padding: 0 14px;          /* match link horizontal padding */
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  border-radius: 12px;
  border: 1px solid transparent;
}

.navbar .has-dropdown > .nav-row > a{
  height: 100%;
  display:inline-flex;
  align-items:center;
  line-height: 1;
}

.navbar .dropdown-toggle{
  height: calc(var(--nav-h) - 10px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
  margin-top: 0 !important;
}

/* Keep phone button consistent */
.navbar > ul > li > .cta-phone{
  height: var(--nav-h);
  display:inline-flex;
  align-items:center;
}



/* ---------------------------------------------------------
   Step 3.2 Team media framing (no distortion, clean crop)
   --------------------------------------------------------- */
.team-media{
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(215,222,230,.70);
  box-shadow: 0 22px 54px rgba(15,23,42,0.10);
  background: rgba(255,255,255,.55);
  margin-bottom: 1rem;
}

.team-media img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
  object-position: center;
}

/* Remove older img styling if present */
.team-photo{
  width: 100%;
  height: auto;
  object-fit: cover;
}



/* ---------------------------------------------------------
   Step 3.3 Nav polish: align "Leistungen" + reduce hover gap
   --------------------------------------------------------- */
:root{ --nav-h: 44px; }

/* Normalize ALL top-level nav links to the same box */
.navbar > ul > li > a{
  height: var(--nav-h) !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

/* Dropdown row uses the same box model as links */
.navbar .has-dropdown > .nav-row{
  height: var(--nav-h) !important;
  padding: 0 14px !important;
  display:flex !important;
  align-items:center !important;
}

/* Inner anchor shouldn't create a second box */
.navbar .has-dropdown > .nav-row > a{
  padding: 0 !important;
  height: 100% !important;
  display:inline-flex !important;
  align-items:center !important;
}

/* Reduce the hover-bridge so dropdown doesn't open "too early" */
@media (min-width: 841px){
  .navbar .has-dropdown{ padding-bottom: 0 !important; }
  .navbar .has-dropdown::after{
    height: 8px !important; /* was larger */
  }
  .navbar .dropdown{ top: calc(100% + 8px) !important; }
}



/* ---------------------------------------------------------
   Step 3.3 Team photos: portrait framing
   --------------------------------------------------------- */
.team-media{
  aspect-ratio: 3 / 4;      /* portrait */
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
.team-media img{
  object-position: center 18%;
}



/* ---------------------------------------------------------
   Step 3.4 Team grid: 2x2 desktop, stacked mobile
   --------------------------------------------------------- */
.team-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 840px){
  .team-grid{ grid-template-columns: 1fr; }
}



/* ---------------------------------------------------------
   Step 3.5 Team image resize (more elegant proportions)
   --------------------------------------------------------- */

/* Limit overall team card width */
.team-card{
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* Slightly smaller portrait ratio */
.team-media{
  max-width: 300px;     /* reduce visual dominance */
  aspect-ratio: 3 / 4;
}

/* Desktop: keep 2 columns but tighter layout */
@media (min-width: 841px){
  .team-grid{
    gap: 2.2rem;
  }
}

/* Mobile: add breathing space without full-width dominance */
@media (max-width: 840px){
  .team-media{
    max-width: 260px;
  }
}



/* ---------------------------------------------------------
   Step 3.6 Precise team sizing per role
   --------------------------------------------------------- */

/* Desktop sizes */
@media (min-width: 841px){
  .team-card.gf .team-media{
    max-width: 260px;
  }
  .team-card:not(.gf) .team-media{
    max-width: 240px;
  }
}

/* Mobile sizes */
@media (max-width: 840px){
  .team-card.gf .team-media{
    max-width: 220px;
  }
  .team-card:not(.gf) .team-media{
    max-width: 200px;
  }
}



/* ---------------------------------------------------------
   Step 3.8 Footer logo crop + top alignment
   --------------------------------------------------------- */
.footer .logo-img-footer--cropped{
  height: 92px; /* visually closer to other columns */
}
.footer .footer-inner > div:first-child p{
  margin-top: .55rem !important;
}



@media (max-width: 840px){
  .logo-img{
    height: 52px !important;
  }
}

/* FOOTER LOGO */
.logo-img-footer,
.logo-img-footer--cropped{
  height: 80px !important;
  width: auto;
}
@media (max-width: 840px){
  .logo-img-footer,
  .logo-img-footer--cropped{
    height: 72px !important;
  }
}



/* HEADER LOGO */
.logo-img{
  height: 30px !important;
  width: auto;
}

/* FOOTER LOGO */
.logo-img-footer,
.logo-img-footer--cropped{
  height: 25px !important;
  width: auto;
}



/* ---------------------------------------------------------
   Step 4.1 Logo unified sizing fix (header + footer)
   --------------------------------------------------------- */

/* HEADER LOGO (covers all possible selectors) */
.logo-img,
.navbar .logo-img,
.navbar .logo img,
header .logo img{
  height: 50px !important;
  width: auto !important;
}

/* FOOTER LOGO */
.logo-img-footer,
.logo-img-footer--cropped,
.footer .logo-img-footer,
.footer img{
  height: 50px !important;
  width: auto !important;
}

/* =========================================================
   CLEAN MOBILE NAV (Final Stable Version)
   - Stable, no conflicting patches
   - Works with header.php JS (.nav-toggle toggles .open, Leistungen toggles .dd-open)
   ========================================================= */
@media (max-width: 840px){

  /* Overlay panel */
  .navbar > ul{
    display: none;
    position: fixed;
    inset: 0;
    padding: 110px 18px 30px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;

    background:
      radial-gradient(1050px 700px at 18% 0%, rgba(110,168,217,.14), transparent 60%),
      radial-gradient(900px 650px at 82% 12%, rgba(215,222,230,.22), transparent 60%),
      linear-gradient(180deg, rgba(248,250,252,.98), rgba(238,242,246,.98));

    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: 2000;
  }

  .navbar > ul.open{
    display: flex;
  }

  /* Top items */
  .navbar > ul > li{
    display: block;
    width: 100%;
  }

  .navbar > ul > li > a,
  .navbar .has-dropdown > .nav-row{
    width: 100%;
    padding: 16px;
    border-radius: 18px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(255,255,255,.78);
    border: 1px solid rgba(110,168,217,.28);
    box-shadow: 0 18px 40px rgba(15,23,42,.08);
  }

  /* Dropdown: in-flow + vertical list */
  .navbar .dropdown{
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    margin-top: 10px;
    padding: 12px;
    border-radius: 18px;

    display: none;

    background: rgba(248,250,252,.88);
    border: 1px solid rgba(215,222,230,.70);
    box-shadow: 0 16px 36px rgba(15,23,42,.08);

    overflow-x: hidden;
  }

  .navbar .has-dropdown.dd-open > .dropdown{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .navbar .dropdown li{
    display: block;
    width: 100%;
  }

  .navbar .dropdown a{
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    text-align: center;

    background: rgba(255,255,255,.75);
    border: 1px solid rgba(110,168,217,.18);
    white-space: normal;
  }
}

/* =========================================================
   GUARD: Mobile nav list items must stack (prevents dropdown side-by-side)
   ========================================================= */
@media (max-width: 840px){
  .navbar > ul > li{ display:block !important; width:100% !important; }
  .navbar .has-dropdown{ display:block !important; }
  .navbar .has-dropdown > .nav-row{ width:100% !important; }
}