/* =============================
   Wista – 1:1 Mock Styles (SRC-Swap)
   ============================= */

:root{
  --brand-blue:#004c93;
  --brand-green:#94c23f;
  --ink:#333334;
  --bg:#ffffff;
  --shadow: 0 0.625rem 1.75rem rgba(0,0,0,.10);
  --container: 80rem; /* 1280px */
  --gutter: 1rem;

  --logo-h: 3.5rem;
  --logo-h-sticky: 2.75rem;

  --tap-size: 3rem;
  --overlay-bg: rgba(0,0,0,.45);

  --t-fast: .18s;
  --t-med: .26s;
  --t-slow: .36s;
  --e-out: cubic-bezier(.22,.61,.36,1);
}

/* Reset/Grundlagen */
[data-wista-header] *{ box-sizing:border-box; }
a{ color:inherit; text-decoration:none; }

/* Container */
.site-header .container{
  max-width: var(--container);
  margin-inline: auto;
  padding: .75rem var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
}

/* Topbar (grün) */
.topbar{
  background: var(--brand-green);
  color: #fff;
  font-weight: 600;
  font-size: .8125rem;
  line-height: 1;
}
.topbar .container{
  max-width: var(--container);
  padding: .375rem var(--gutter);
  gap: 1.25rem;
}
.contact-items{ display:flex; gap:1.125rem; align-items:center; flex-wrap:wrap; }
.contact-item{ display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; }

/* NEU: klarere, gefüllte Icons in klein */
.topbar .ci{
  width: 1.125rem;   /* vorher .875rem */
  height: 1.125rem;
  display: inline-block;
  flex: 0 0 1.125rem;
  color: currentColor; /* fill der SVGs = currentColor */
}

.topbar a{ color:#fff; opacity:.95; }
.topbar a:hover{ opacity:1; text-decoration:underline; }

/* Header */
.site-header{
  position: sticky; top:0; z-index:1000;
  background: var(--bg);
  transition: background-color var(--t-med) var(--e-out), box-shadow var(--t-med) var(--e-out);
  box-shadow:none;
}
.site-header.is-sticky{
  background: var(--brand-blue);
  box-shadow: var(--shadow);
}

/* Logo (ein Bild, Höhe skaliert) */
.site-logo img{
  height: var(--logo-h); width:auto; display:block;
  transition: height var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.site-header.is-sticky .site-logo img{ height: var(--logo-h-sticky); }

/* Desktop-Navi */
.primary-nav{ justify-self:center; }
.primary-nav .menu{
  display:flex; gap:1.375rem; list-style:none; margin:0; padding:0;
}
.primary-nav .menu > li{ position:relative; list-style:none; }
.primary-nav .menu > li > a{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.625rem .375rem; border-radius:.625rem;
  font-weight:600; color:var(--ink); opacity:.95; font-size:1rem;
  transition: opacity var(--t-fast) var(--e-out);
}
.primary-nav .menu > li > a:hover{ opacity:1; }
.site-header.is-sticky .primary-nav .menu > li > a{ color:#fff; }

/* kleiner Pfeil */
.primary-nav .menu > li.has-dropdown > a::after{
  content:""; display:inline-block; width:.375rem; height:.375rem; margin-left:.25rem;
  border:.125rem solid currentColor; border-top:0; border-left:0; transform: rotate(45deg);
  transition: transform var(--t-fast) var(--e-out);
}

/* Dropdown */
.primary-nav .dropdown{
  position:absolute;
  left:0;
  top:100%;
  min-width:13.75rem;
  background:#fff;
  border-radius:.75rem;
  box-shadow:var(--shadow);

  opacity:0;
  transform: translateY(6px) scale(.98);
  visibility:hidden;
  pointer-events:none;
  z-index:1002;

  padding:.75rem .5rem .5rem;
  margin:0;

  list-style:none;
  transition:
    opacity var(--t-med) var(--e-out),
    transform var(--t-med) var(--e-out),
    visibility 0s linear var(--t-med);
}
.primary-nav .dropdown li{ list-style:none; }
.primary-nav .dropdown a{
  display:block; padding:.625rem .75rem; border-radius:.625rem; color:var(--ink);
  transition: background-color var(--t-fast) var(--e-out);
}
.primary-nav .dropdown a:hover{ background: rgba(0,0,0,.04); }

.primary-nav .menu > li:hover > .dropdown,
.primary-nav .menu > li:focus-within > .dropdown,
.primary-nav .dropdown:hover{
  opacity:1;
  transform: translateY(0) scale(1);
  visibility:visible;
  pointer-events:auto;
}

.primary-nav .menu > li:hover > a::after,
.primary-nav .menu > li:focus-within > a::after{
  transform: rotate(225deg);
}

/* Utils */
.utils{ justify-self:end; display:flex; align-items:center; gap:1rem; }

.nav-toggle{
  display:none; background:transparent; border:0; padding:.625rem; border-radius:.75rem;
  cursor:pointer; color:var(--ink);
}
.site-header.is-sticky .nav-toggle{ color:#fff; }
.nav-toggle .bar{ display:block; width:1.5rem; height:.125rem; background:currentColor; margin:.3125rem 0; border-radius:.125rem; }

/* CTA */
.cta{
  background: var(--brand-green);
  color:#fff !important;
  padding:.625rem 1rem;
  border-radius:.75rem;
  font-weight:700; display:inline-flex; align-items:center; gap:.625rem; font-size:1rem;
  transition: transform var(--t-fast) var(--e-out), filter var(--t-fast) var(--e-out);
}
.cta:hover{ filter:brightness(1.05); transform: translateY(-1px); }
.cta .icon{ display:inline-grid; place-items:center; width:1.125rem; height:1.125rem; }

/* Mobile */
@media (max-width: 64em){
  .site-header .container{ grid-template-columns: 1fr auto; }
  .primary-nav{ display:none; }
  .nav-toggle{ display:inline-block; }
  .utils .cta{ display:none; }
}

/* Mobile Overlay + Panel */
.mobile-overlay{
  position:fixed; inset:0; background:var(--overlay-bg); opacity:0; visibility:hidden;
  transition: opacity var(--t-med) var(--e-out), visibility 0s linear var(--t-med);
  z-index:1200;
}
.mobile-overlay.open{ opacity:1; visibility:visible; transition-delay:0s,0s; }

.mobile-panel{
  position:fixed; inset:0 0 0 auto; width:85vw; max-width:28rem; background:#fff;
  transform: translateX(100%); transition: transform var(--t-slow) var(--e-out);
  z-index:1201; display:flex; flex-direction:column;
}
.mobile-panel.open{ transform: translateX(0); }

.mobile-header{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem; border-bottom:1px solid rgba(0,0,0,.08); }
.close-btn{ background:transparent; border:0; font-size:1rem; padding:.75rem; line-height:1; cursor:pointer; }

.mobile-menu{
  list-style:none; margin:0; padding:.5rem; overflow:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:.5rem;
}
.mobile-row{
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:.75rem;
  background:#f6f8fb; border-radius:.875rem; padding:.25rem .25rem .25rem .75rem; margin:0;
}
.mobile-link{ display:block; padding:.75rem 0; min-height:var(--tap-size); font-size:1.0625rem; font-weight:700; color:var(--ink); }

.round-toggle{
  width:var(--tap-size); height:var(--tap-size); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; border:0; background:#fff;
  box-shadow:0 .25rem 1rem rgba(0,0,0,.06); cursor:pointer;
}
.chev{ width:.75rem; height:.75rem; border:.1875rem solid currentColor; border-top:0; border-left:0; transform: rotate(-45deg); }
.round-toggle[aria-expanded="true"] .chev{ transform: rotate(135deg); }

.submenu{
  padding:0 .75rem 0;
  margin:0;
  display:flex; flex-direction:column; gap:.25rem;
  overflow:hidden; max-height:0; opacity:0;
  transition: max-height var(--t-slow) var(--e-out), opacity var(--t-med) var(--e-out), padding var(--t-fast) var(--e-out), margin var(--t-fast) var(--e-out);
}
.submenu a{ display:block; padding:.75rem; border-radius:.625rem; min-height:var(--tap-size); color:var(--ink); }
.submenu a:hover{ background: rgba(0,0,0,.04); }
.submenu.is-open{
  opacity:1; padding:.5rem .75rem .75rem; margin:0 0 .5rem 0;
}

.mobile-footer{ margin-top:auto; padding:.75rem; border-top:1px solid rgba(0,0,0,.08); }
.mobile-cta{
  display:flex; width:100%; align-items:center; justify-content:center; gap:.625rem;
  background:var(--brand-green); color:#fff; padding:.875rem 1rem; border-radius:.75rem; font-weight:700;
}
.mobile-cta svg{ width:1.25rem; height:1.25rem; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* --- Disabled-State für CTA / Mobile-CTA --- */
.cta.is-disabled,
.mobile-cta.is-disabled{
  opacity: .55;
  filter: grayscale(20%);
  cursor: not-allowed;
  pointer-events: auto; /* wir unterbinden per JS, behalten aber Tooltip */
}
.cta.is-disabled:hover,
.mobile-cta.is-disabled:hover{
  transform: none;
  filter: grayscale(20%);
  text-decoration: none;
}