*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:#0074BE}
.vt-imp{max-width:760px;margin:40px auto;padding:0 20px}

/* ===== VILSTRONIC BRAND CSS – Bayern-Edition ===== */
body { font-size: 18px !important; line-height: 1.8; color: #2c3e50; }

#vilstronic-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: #0074BE; display: flex; justify-content: center;
  gap: 2rem; flex-wrap: wrap; padding: 10px 20px;
  font-size: 16px; font-weight: 600; box-shadow: 0 2px 8px rgba(0,80,160,.25);
}
#vilstronic-topbar a { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: color .2s; }
#vilstronic-topbar a:hover { color: #FFE066; }
#vilstronic-topbar .vt-phone { color: #fff; font-size: 18px; font-weight: 700; }
body, .site { padding-top: 48px !important; }

/* Zierstreifen – Elektrophasen L1/L2/L3 als Markenfarben */
.vt-bands { display: flex; height: 8px; margin: 0; padding: 0; }
.vt-bands span { flex: 1; display: block; }
.vt-band-l1 { background: #F5922E; }
.vt-band-l2 { background: #7EB3D0; }
.vt-band-l3 { background: #8EC07C; }

/* Hero: Hell statt Dunkel */
.vt-hero { background: linear-gradient(160deg,#E8F4FF 0%,#F8FBFF 60%,#EEF7FF 100%); padding: 80px 20px 60px; text-align: center; }
.vt-hero h1 { font-size: clamp(2.2rem,6vw,4rem); color: #003D7A; margin: 0 0 8px; font-weight: 300; letter-spacing: 6px; text-transform: uppercase; }
.vt-hero h1 strong { font-weight: 800; color: #0074BE; }
.vt-name { color: #555 !important; font-size: clamp(0.9rem,2.5vw,1.1rem) !important; margin-bottom: 8px !important; }
.vt-tagline { color: #555 !important; font-size: clamp(1rem,2vw,1.15rem) !important; max-width: 600px; margin: 0 auto !important; }
.vt-slogan { color: #0074BE !important; font-weight: 700; font-size: 1.15rem !important; margin-top: 14px !important; }

/* Leistungen */
.vt-leistungen { padding: 60px 20px; background: #F0F6FF; }
.vt-leistungen h2 { text-align: center; font-size: 1.8rem; margin-bottom: 40px; text-transform: uppercase; letter-spacing: 3px; color: #003D7A; }
.vt-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; }
.vt-card { background: #fff; border-radius: 8px; padding: 32px 24px; border-top: 5px solid #0074BE; box-shadow: 0 2px 12px rgba(0,100,200,.07); transition: transform .2s,box-shadow .2s; }
.vt-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,100,200,.14); }
.vt-card:nth-child(2) { border-top-color: #F5922E; }
.vt-card:nth-child(3) { border-top-color: #0074BE; }
.vt-card:nth-child(4) { border-top-color: #F5922E; }
.vt-card:nth-child(5) { border-top-color: #0074BE; }
.vt-icon { font-size: 2.2rem; margin-bottom: 12px; }
.vt-card h3 { font-size: 1.1rem; margin: 0 0 10px; color: #003D7A; text-transform: uppercase; letter-spacing: 1px; }
.vt-card p { color: #555; font-size: 0.95rem; line-height: 1.7; margin: 0; }

/* Über mich */
.vt-ueber { padding: 60px 20px; background: #fff; text-align: center; }
.vt-ueber h2 { font-size: 1.6rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; color: #003D7A; }
.vt-ueber p { max-width: 680px; margin: 0 auto; color: #444; font-size: 1.05rem; }
.vt-meister-badge { display: inline-block; margin: 24px auto 0; border: 2px solid #0074BE; color: #0074BE; background: #EBF5FF; padding: 8px 28px; font-weight: 700; letter-spacing: 2px; font-size: 0.9rem; text-transform: uppercase; border-radius: 4px; }

/* Kontakt: Bayerisches Blau statt Schwarz */
.vt-kontakt { padding: 60px 20px; background: #0074BE; color: #fff; text-align: center; }
.vt-kontakt h2 { font-size: 1.6rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 8px; color: #fff; }
.vt-region { color: rgba(255,255,255,.85) !important; margin-bottom: 40px !important; font-size: 0.9rem; letter-spacing: 2px; }
.vt-kontakt-grid { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; margin-bottom: 30px; }
.vt-kontakt-item .vt-label { color: rgba(255,255,255,.7); font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; display: block; }
.vt-kontakt-item a { color: #fff !important; text-decoration: none; font-size: 1.4rem; font-weight: 700; display: block; margin-top: 4px; transition: color .2s; }
.vt-kontakt-item a:hover { color: #FFE066 !important; }
.vt-adresse { color: rgba(255,255,255,.75); font-size: 0.9rem; margin-top: 30px; }

/* Footer: Dunkelblau statt Schwarz */
.vt-footer { background: #003D7A; color: rgba(255,255,255,.55); text-align: center; padding: 16px; font-size: 0.85rem; }
.vt-footer a { color: rgba(255,255,255,.65); text-decoration: none; }
.vt-footer a:hover { color: #FFE066; }

.entry-title, .page-header, .ocean-page-header { display: none !important; }

@media(max-width:600px){
  #vilstronic-topbar { gap: 1rem; font-size: 15px; padding: 8px 16px; }
  .vt-kontakt-grid { gap: 24px; }
  .vt-kontakt-item a { font-size: 1.2rem; }
  .vt-hero { padding: 60px 16px 40px; }
}


/* === VILSTRONIC — Bayern-Edition: Weiß/Blau === */

*, body, .site, #wrapper, #page, main, .content-area, article {
  background-color: transparent;
}
html, body {
  background: #f8fbff !important;
  color: #2c3e50 !important;
  font-size: 18px !important;
  line-height: 1.8;
}
.entry-title, .page-header, .ocean-page-header,
.page-title-bar, .page-header-title, h1.page-header-title { display: none !important; }
body, .site, #wrapper { padding-top: 44px !important; }

/* Sticky Kontaktleiste – Bayerisches Blau */
#vilstronic-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: #0074BE;
  display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap;
  padding: 10px 20px;
  border-bottom: 3px solid #005B9A;
  font-size: 16px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,80,160,.25);
}
#vilstronic-topbar a { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: color .2s; }
#vilstronic-topbar a:hover { color: #FFE066; }
#vilstronic-topbar .vt-phone { color: #fff; font-size: 19px; font-weight: 700; }

/* Drei-Phasen-Balken – Elektrophasen als Markenfarben */
.vt-bands { display: flex; height: 6px; margin: 0; padding: 0; }
.vt-bands span { flex: 1; display: block; }
.vt-band-l1, .vt-band-orange { background: #F5922E; }
.vt-band-l2, .vt-band-blue   { background: #7EB3D0; }
.vt-band-l3, .vt-band-green  { background: #8EC07C; }

/* Logo */
.vt-logo { margin: 0 auto 24px; display: flex; justify-content: center; }
.vt-logo svg { filter: drop-shadow(0 4px 16px rgba(0,100,200,.18)); }

/* Hero – hell, freundlich, bayerisch */
.vt-hero {
  background: linear-gradient(160deg, #daeeff 0%, #f0f8ff 55%, #e8f5ff 100%) !important;
  padding: 90px 20px 70px; text-align: center;
}
.vt-hero h1 {
  font-size: clamp(2.4rem, 7vw, 5rem);
  color: #003D7A !important; margin: 0 0 10px;
  font-weight: 200; letter-spacing: 8px; text-transform: uppercase;
}
.vt-hero h1 strong { font-weight: 900; color: #0074BE; }
.vt-name { color: #0074BE !important; font-size: 1rem; letter-spacing: 3px; text-transform: uppercase; margin: 0 0 16px; }
.vt-tagline { color: #555 !important; font-size: 1.05rem; max-width: 600px; margin: 0 auto 12px; }
.vt-slogan {
  color: #003D7A !important; font-size: 1.2rem;
  letter-spacing: 2px; font-style: italic; margin-top: 8px; font-weight: 600;
}

/* Leistungen – Sonne/Himmel-Hintergrund per CSS */
.vt-leistungen {
  padding: 60px 20px;
  position: relative;
  background:
    radial-gradient(circle at 88% 15%, rgba(255,220,30,.22) 0%, rgba(255,200,0,.10) 18%, transparent 40%),
    radial-gradient(circle at 88% 15%, rgba(255,160,0,.12) 0%, transparent 22%),
    radial-gradient(circle at 12% 80%, rgba(100,200,80,.09) 0%, transparent 35%),
    linear-gradient(180deg, #d6ecff 0%, #EBF5FF 50%, #dff0e8 100%) !important;
}
.vt-leistungen h2 {
  text-align: center; font-size: 1.6rem; margin-bottom: 40px;
  text-transform: uppercase; letter-spacing: 4px; color: #003D7A;
  position: relative;
}
/* Karten: Flexbox damit letzte Reihe zentriert wird */
.vt-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px; max-width: 1120px; margin: 0 auto;
  position: relative;
}
.vt-card {
  background: #fff !important;
  border-radius: 8px; padding: 32px 24px;
  border-top: 5px solid #0074BE;
  box-shadow: 0 2px 12px rgba(0,100,200,.08);
  transition: transform .2s, box-shadow .2s;
  flex: 0 0 calc(33.333% - 14px);
  min-width: 260px; max-width: 360px;
}
.vt-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,100,200,.15); }
.vt-card:nth-child(2) { border-top-color: #F5922E; }
.vt-card:nth-child(3) { border-top-color: #0074BE; }
.vt-card:nth-child(4) { border-top-color: #F5922E; }
.vt-card:nth-child(5) { border-top-color: #0074BE; }
.vt-card-header { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.vt-icon { font-size: 3.2rem; line-height: 1; }
.vt-card h3 { font-size: 1.1rem; margin: 0; color: #003D7A; text-transform: uppercase; letter-spacing: 1px; }
.vt-card p { color: #555; font-size: 0.95rem; line-height: 1.7; margin: 0; }

/* Über uns */
.vt-ueber { padding: 60px 20px; background: #fff !important; text-align: center; }
.vt-ueber h2 { font-size: 1.6rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; color: #003D7A; }
.vt-ueber p { max-width: 680px; margin: 0 auto; color: #444; font-size: 1.05rem; }
.vt-meister-badge {
  display: inline-block; margin: 24px auto 0;
  border: 2px solid #0074BE; color: #0074BE; background: #EBF5FF;
  padding: 10px 28px; font-weight: 700; letter-spacing: 2px; font-size: 0.9rem;
  text-transform: uppercase; border-radius: 4px;
}

/* Kontakt – Bayerisches Blau */
.vt-kontakt { padding: 60px 20px; background: #0074BE !important; text-align: center; }
.vt-kontakt h2 { font-size: 1.6rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 6px; color: #fff; }
.vt-region { color: rgba(255,255,255,.85) !important; margin-bottom: 40px !important; font-size: 0.9rem; letter-spacing: 2px; display: block; }
.vt-kontakt-grid { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; margin-bottom: 30px; }
.vt-kontakt-item .vt-label { color: rgba(255,255,255,.7); font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; display: block; margin-bottom: 4px; }
.vt-kontakt-item a { color: #fff !important; text-decoration: none; font-size: 1.6rem; font-weight: 700; display: block; transition: color .2s; }
.vt-kontakt-item a:hover { color: #FFE066 !important; }
.vt-adresse { color: rgba(255,255,255,.75); font-size: 0.9rem; margin-top: 30px; }

/* Footer */
.vt-footer { background: #003D7A !important; color: rgba(255,255,255,.55); text-align: center; padding: 16px; font-size: 0.85rem; }
.vt-footer a { color: rgba(255,255,255,.65); text-decoration: none; }
.vt-footer a:hover { color: #FFE066; }

/* OceanWP Header komplett ausblenden — eigene Topbar ersetzt ihn */
#site-header, .site-header, #oceanwp-mobile-menu-icon,
.site-header-inner, .navigation-top {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}
body, .site, #wrapper { padding-top: 44px !important; }
#outer-wrap, #wrap, .wrap { margin-top: 0 !important; padding-top: 0 !important; }

/* OceanWP Footer hell */
#footer, .site-footer, footer { background: #003D7A !important; color: rgba(255,255,255,.5) !important; }

@media(max-width: 600px) {
  #vilstronic-topbar { gap: 1rem; font-size: 15px; padding: 8px 16px; }
  .vt-kontakt-grid { gap: 28px; }
  .vt-kontakt-item a { font-size: 1.3rem; }
  .vt-hero { padding: 70px 16px 50px; }
  .vt-icon { font-size: 2.6rem; }
}