/* VanillaDev Global Shell · Phase 2.4 · 2026-08-20 */
:root{--vd-shell-paper:#fbfaf6;--vd-shell-line:rgba(8,91,68,.14);--vd-shell-text:#52655d;--vd-shell-deep:#063f33;--vd-shell-green:#087657;--vd-shell-dark:#071813;--vd-shell-cream:#f5f0e7}
.vd-shell-header,.vd-shell-footer,.vd-mobile-panel{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.vd-shell-header{min-height:92px;padding:0 clamp(22px,4.5vw,76px);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;border-bottom:1px solid var(--vd-shell-line);background:rgba(251,250,246,.96);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);position:sticky;top:0;z-index:1000;color:#1f2925}
.vd-brand{display:inline-flex;align-items:center;gap:12px;width:max-content;color:inherit;text-decoration:none;font-weight:680;white-space:nowrap}
.vd-brand-mark{width:29px;height:29px;display:block;flex:none;background:url('../brand/vanilladev-v-evergreen.png') center/contain no-repeat}
.vd-brand-name{font-size:19px;letter-spacing:-.035em}.vd-brand-name span{color:var(--vd-shell-green);font-weight:500}
.vd-shell-nav{justify-self:center;display:flex;align-items:center;gap:clamp(18px,2.3vw,38px);font-size:13px;color:var(--vd-shell-text)}
.vd-shell-nav a{position:relative;display:inline-flex;align-items:center;gap:9px;min-height:92px;color:inherit;text-decoration:none;white-space:nowrap;transition:color .18s ease}
.vd-shell-nav a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--vd-shell-green);transform:scaleX(0);transform-origin:center;transition:transform .18s ease}
.vd-shell-nav a:hover,.vd-shell-nav a:focus-visible,.vd-shell-nav a[aria-current="page"]{color:var(--vd-shell-deep)}
.vd-shell-nav a[aria-current="page"]:after{transform:scaleX(1)}
.vd-nav-arrow,.vd-action-arrow{position:relative;display:inline-block;flex:none;width:13px;height:9px;color:currentColor;opacity:.58;transition:transform .18s ease,opacity .18s ease}
.vd-nav-arrow:before,.vd-action-arrow:before{content:"";position:absolute;left:0;top:4px;width:10px;height:1px;background:currentColor}
.vd-nav-arrow:after,.vd-action-arrow:after{content:"";position:absolute;right:0;top:1px;width:5px;height:5px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.vd-shell-nav a:hover .vd-nav-arrow,.vd-shell-nav a:focus-visible .vd-nav-arrow{opacity:1;transform:translateX(2px)}
.vd-action-arrow--up{transform:rotate(-45deg)}
.vd-shell-cta{justify-self:end;display:inline-flex;align-items:center;gap:11px;padding:15px 20px;background:var(--vd-shell-green);color:#fff!important;text-decoration:none;font-size:13px;font-weight:650;box-shadow:0 12px 28px rgba(8,118,87,.16);transition:background .18s ease,transform .18s ease}
.vd-shell-cta:hover,.vd-shell-cta:focus-visible{background:var(--vd-shell-deep);transform:translateY(-1px)}.vd-shell-cta .vd-action-arrow{opacity:.9}
.vd-menu-toggle{display:none;width:44px;height:44px;padding:0;border:1px solid var(--vd-shell-line);background:transparent;place-content:center;gap:6px;cursor:pointer}.vd-menu-toggle span{display:block;width:18px;height:1px;background:var(--vd-shell-deep);transition:transform .2s ease}.vd-menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}.vd-menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.vd-mobile-panel{display:none;position:fixed;z-index:999;inset:78px 0 0;background:rgba(251,250,246,.99);padding:28px 22px 40px;overflow:auto}.vd-mobile-panel.is-open{display:block}.vd-mobile-panel nav{display:grid;border-top:1px solid var(--vd-shell-line)}.vd-mobile-panel nav a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 2px;border-bottom:1px solid var(--vd-shell-line);color:var(--vd-shell-deep);text-decoration:none;font-size:18px}.vd-mobile-panel nav a[aria-current="page"]{color:var(--vd-shell-green);font-weight:650}.vd-mobile-panel .vd-mobile-cta{margin-top:26px;display:flex;align-items:center;justify-content:space-between;padding:17px 18px;background:var(--vd-shell-green);color:#fff;text-decoration:none;font-weight:650}
.vd-shell-footer{background:var(--vd-shell-dark);color:#dce6e1;padding:clamp(48px,6vw,76px) clamp(22px,4.5vw,76px) 30px;border-top:1px solid rgba(255,255,255,.08)}
.vd-footer-grid{display:grid;grid-template-columns:minmax(230px,1.35fr) repeat(4,minmax(120px,.55fr));gap:clamp(28px,4vw,70px)}
.vd-footer-brand .vd-brand-mark{background-image:url('../brand/vanilladev-v-beige.png')}.vd-footer-brand .vd-brand-name span{color:#d7c89f}.vd-footer-brand{color:#fff}.vd-footer-intro p{max-width:330px;margin:22px 0 0;color:#a9bbb3;font-size:13px;line-height:1.7}.vd-footer-col strong{display:block;margin-bottom:17px;color:#789287;font:600 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}.vd-footer-col nav{display:grid;gap:12px}.vd-footer-col a{width:max-content;max-width:100%;color:#c9d5d0;text-decoration:none;font-size:13px;transition:color .18s}.vd-footer-col a:hover,.vd-footer-col a:focus-visible{color:#fff}.vd-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:52px;padding-top:24px;border-top:1px solid rgba(255,255,255,.09);color:#7f968c;font-size:11px}.vd-footer-top{display:inline-flex;align-items:center;gap:9px;color:#aabbb4!important;text-decoration:none}
/* Replace legacy arrow art everywhere with one restrained arrow language. */
.ui-arrow{--arrow-rotation:0deg!important;position:relative!important;display:inline-block!important;flex:none!important;width:13px!important;height:9px!important;transform:rotate(var(--vd-arrow-rotation,0deg))!important;color:currentColor!important;opacity:.68!important;background:none!important}
.ui-arrow:before{content:""!important;position:absolute!important;left:0!important;top:4px!important;width:10px!important;height:1px!important;background:currentColor!important}
.ui-arrow:after{content:""!important;position:absolute!important;right:0!important;top:1px!important;width:5px!important;height:5px!important;border:0!important;border-top:1px solid currentColor!important;border-right:1px solid currentColor!important;transform:rotate(45deg)!important;background:none!important}
.ui-arrow-up-right{--vd-arrow-rotation:-45deg}.ui-arrow-down-right{--vd-arrow-rotation:45deg}.ui-arrow-right{--vd-arrow-rotation:0deg}.ui-arrow-up{--vd-arrow-rotation:-90deg}.ui-arrow-down{--vd-arrow-rotation:90deg}
/* Homepage had a fixed 88px Next header before; compensate for the new in-flow shell. */
body.static-home .hero{min-height:calc(100svh - 92px)!important;padding-top:42px!important}
/* Legal pages previously reserved space for a fixed header. */
body.vd-legal-page .legal-document{padding-top:92px!important}
@media(max-width:1050px){.vd-shell-nav{gap:18px}.vd-shell-nav a{font-size:12px}.vd-shell-header{padding-inline:26px}.vd-shell-cta{padding:14px 16px}}
@media(max-width:900px){.vd-shell-header{min-height:78px;grid-template-columns:auto 1fr auto auto;gap:12px;padding:0 16px}.vd-shell-nav{display:none}.vd-shell-cta{margin-left:auto}.vd-menu-toggle{display:grid}.vd-mobile-panel{inset-top:78px}.vd-footer-grid{grid-template-columns:1.4fr 1fr 1fr}.vd-footer-intro{grid-column:1/-1}.vd-footer-bottom{align-items:flex-start;flex-direction:column}.vd-brand-name{font-size:17px}body.static-home .hero{min-height:calc(100svh - 78px)!important;padding-top:34px!important}}
@media(max-width:620px){.vd-shell-header{grid-template-columns:auto 1fr auto}.vd-shell-cta{display:none}.vd-menu-toggle{grid-column:3}.vd-footer-grid{grid-template-columns:1fr 1fr}.vd-footer-intro{grid-column:1/-1}.vd-shell-footer{padding-inline:20px}.vd-mobile-panel{padding-inline:18px}}

/* Phase 2.4: final primary information architecture */
.vd-shell-nav{gap:clamp(14px,1.75vw,30px)}
.vd-shell-nav a[aria-current="page"] .vd-nav-arrow{opacity:1}
@media(max-width:1180px){.vd-shell-header{gap:22px;padding-inline:24px}.vd-shell-nav{gap:14px}.vd-shell-nav a{font-size:12px}.vd-shell-cta{padding-inline:16px}}

/* VanillaDev 0.8.0 · positioning navigation */
.vd-nav-group{position:relative;display:flex;align-items:stretch}
.vd-nav-submenu{position:absolute;left:-20px;top:calc(100% - 1px);display:grid;min-width:270px;padding:10px;border:1px solid var(--vd-shell-line);background:rgba(251,250,246,.995);box-shadow:0 24px 60px rgba(7,62,53,.12);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .16s ease,transform .16s ease,visibility .16s ease}
.vd-nav-group:hover .vd-nav-submenu,.vd-nav-group:focus-within .vd-nav-submenu{opacity:1;visibility:visible;transform:translateY(0)}
.vd-shell-nav .vd-nav-submenu a{min-height:0;padding:12px 13px;font-size:13px;color:var(--vd-shell-deep)}
.vd-shell-nav .vd-nav-submenu a:after{display:none}
.vd-shell-nav .vd-nav-submenu a:hover,.vd-shell-nav .vd-nav-submenu a:focus-visible{background:rgba(8,118,87,.07);color:var(--vd-shell-green);outline:none}
.vd-mobile-subnav{display:grid;padding:4px 0 10px 16px;border-bottom:1px solid var(--vd-shell-line)}
.vd-mobile-panel nav .vd-mobile-subnav a{padding:11px 2px;border:0;font-size:15px;color:var(--vd-shell-text)}
.vd-mobile-panel nav .vd-mobile-subnav a:hover,.vd-mobile-panel nav .vd-mobile-subnav a:focus-visible{color:var(--vd-shell-green)}
@media(max-width:1180px){.vd-shell-nav>a[href="/ueber-uns/"]{display:none}}
@media(max-width:900px){.vd-shell-nav>a[href="/ueber-uns/"]{display:inline-flex}}

/* ======================================================================
   VanillaDev 0.8.2 · Dark global header / footer-brand language
   ====================================================================== */
:root{
  --vd-header-bg:#071813;
  --vd-header-bg-soft:#0a211a;
  --vd-header-text:#c9d5d0;
  --vd-header-muted:#92a79d;
  --vd-header-accent:#d7c89f;
  --vd-header-white:#f7f5ee;
}

/* Global desktop header */
.vd-shell-header{
  background:rgba(7,24,19,.985);
  color:var(--vd-header-white);
  border-bottom-color:rgba(255,255,255,.09);
  box-shadow:0 14px 38px rgba(3,15,11,.16);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}

/* Use the same brand treatment as the footer */
.vd-shell-header .vd-brand-mark{
  background-image:url('../brand/vanilladev-v-beige.png');
}
.vd-shell-header .vd-brand-name{
  color:#fff;
}
.vd-shell-header .vd-brand-name span{
  color:var(--vd-header-accent);
}

/* Navigation */
.vd-shell-header .vd-shell-nav{
  color:var(--vd-header-text);
}
.vd-shell-header .vd-shell-nav > a,
.vd-shell-header .vd-nav-group > a{
  color:inherit;
}
.vd-shell-header .vd-shell-nav a:after{
  background:var(--vd-header-accent);
}
.vd-shell-header .vd-shell-nav > a:hover,
.vd-shell-header .vd-shell-nav > a:focus-visible,
.vd-shell-header .vd-shell-nav > a[aria-current="page"],
.vd-shell-header .vd-nav-group > a:hover,
.vd-shell-header .vd-nav-group > a:focus-visible{
  color:#fff;
}

/* Dark dropdown – no light panel breaking the header */
.vd-shell-header .vd-nav-submenu{
  border-color:rgba(255,255,255,.10);
  background:rgba(7,24,19,.995);
  box-shadow:0 26px 64px rgba(0,0,0,.28);
}
.vd-shell-header .vd-shell-nav .vd-nav-submenu a{
  color:#c9d5d0;
}
.vd-shell-header .vd-shell-nav .vd-nav-submenu a:hover,
.vd-shell-header .vd-shell-nav .vd-nav-submenu a:focus-visible{
  background:rgba(215,200,159,.10);
  color:#fff;
}

/* Header CTA: warm light accent against evergreen */
.vd-shell-header .vd-shell-cta{
  border:1px solid rgba(215,200,159,.72);
  background:var(--vd-header-accent);
  color:#082219!important;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}
.vd-shell-header .vd-shell-cta:hover,
.vd-shell-header .vd-shell-cta:focus-visible{
  background:#f5efe1;
  color:#071813!important;
  transform:translateY(-1px);
}

/* Keyboard focus remains clearly visible */
.vd-shell-header a:focus-visible,
.vd-shell-header button:focus-visible,
.vd-mobile-panel a:focus-visible{
  outline:2px solid var(--vd-header-accent);
  outline-offset:3px;
}

/* Mobile toggle and menu continue the same dark brand language */
.vd-shell-header .vd-menu-toggle{
  border-color:rgba(255,255,255,.20);
}
.vd-shell-header .vd-menu-toggle:hover,
.vd-shell-header .vd-menu-toggle:focus-visible{
  background:rgba(255,255,255,.06);
}
.vd-shell-header .vd-menu-toggle span{
  background:#f4f2ea;
}

.vd-mobile-panel{
  background:rgba(7,24,19,.995);
  color:#fff;
}
.vd-mobile-panel nav{
  border-top-color:rgba(255,255,255,.10);
}
.vd-mobile-panel nav a{
  color:#d5dfda;
  border-bottom-color:rgba(255,255,255,.09);
}
.vd-mobile-panel nav a:hover,
.vd-mobile-panel nav a:focus-visible{
  color:#fff;
}
.vd-mobile-panel nav a[aria-current="page"]{
  color:var(--vd-header-accent);
}
.vd-mobile-subnav{
  border-bottom-color:rgba(255,255,255,.09);
}
.vd-mobile-panel nav .vd-mobile-subnav a{
  color:#9fb2a9;
}
.vd-mobile-panel nav .vd-mobile-subnav a:hover,
.vd-mobile-panel nav .vd-mobile-subnav a:focus-visible{
  color:#fff;
}
.vd-mobile-panel .vd-mobile-cta{
  border:1px solid rgba(215,200,159,.72);
  background:var(--vd-header-accent);
  color:#082219;
}
.vd-mobile-panel .vd-mobile-cta:hover,
.vd-mobile-panel .vd-mobile-cta:focus-visible{
  background:#f5efe1;
  color:#071813;
}

/* Minimal/focus header follows the same brand direction */
.vd-focus-header{
  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin:0;
  padding:22px max(20px,calc((100vw - 1180px)/2));
  background:#071813;
  border-bottom:1px solid rgba(255,255,255,.09);
  color:#fff;
}
.vd-focus-header .vd-brand-mark{
  background-image:url('../brand/vanilladev-v-beige.png');
}
.vd-focus-header .vd-brand-name{
  color:#fff;
}
.vd-focus-header .vd-brand-name span{
  color:var(--vd-header-accent);
}