/* =========
   Elegant White/Gray/Blue Theme (v3 with 3D hover + WhatsApp)
   ========= */
:root{
  --brand: #173b67;   /* Logo-Blau dunkel */
  --brand-600:#1d4ed8;/* Akzent-Blau */
  --ink: #0b1220;
  --muted:#6b7280;
  --line: #e5e7eb;
  --bg: #ffffff;
  --bg-alt:#f6f8fc;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --blue-shadow: 0 18px 40px rgba(29,78,216,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink); background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }

.container{ width:min(1120px, 92%); margin-inline:auto }

/* Header */
.header{ position: sticky; top:0; z-index:100; background:rgba(255,255,255,0.16); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid rgba(255,255,255,0.35); box-shadow:0 8px 20px rgba(0,0,0,.08) }
.header__row{ display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:.75rem }
.brand__logo{ filter: drop-shadow(0 2px 10px rgba(2,6,23,.08)); border-radius:8px }
.nav{ display:flex; gap:1.2rem }
.nav a{ text-decoration:none; color:#111827; font-weight:600; padding:.6rem .8rem; border-radius:12px }
.nav a:hover{ background:var(--bg-alt) }
.cta--header{ display:flex; gap:.5rem }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:.9rem 1.1rem; border-radius:12px; font-weight:700; text-decoration:none; border:1px solid var(--line); box-shadow: var(--shadow); transition:.2s ease }
.btn.small{ padding:.55rem .8rem; font-weight:700 }
.btn--primary{ background:linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%); color:#fff; border:none }
.btn--primary:hover{ transform: translateY(-2px) }
.btn--ghost{ background:#fff; color:#111827 }
.btn--ghost:hover{ background:var(--bg-alt) }
.menu{ display:none; border:0; background:transparent; font-size:1.6rem; padding:.25rem .5rem }

/* Hero */
.hero{ position:relative; isolation:isolate; padding: clamp(3rem, 6vw, 6rem) 0 clamp(2rem, 4vw, 3.5rem) }
.hero__grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 4vw, 4rem); align-items:center }
.hero__copy h1 {

  font-size: clamp(26px, 4vw, 38px);  /* dynamisch: Handy kleiner, Desktop größer */

  font-weight: 700;

  line-height: 1.2;

  margin: 0 0 12px;

  color: #222;

}
.accent{ color:var(--brand-600) }
.hero__copy p {

  font-size: clamp(16px, 2.2vw, 18px);

  font-weight: 400;

  color: #555;

  margin: 0 0 20px;

  max-width: 700px;

}
.cta{ display:flex; gap:.75rem; margin: 1rem 0 1.2rem }
.ticks{ display:flex; gap:1rem; padding:0; margin:.5rem 0 0; list-style:none; color:var(--muted) }
.ticks li{ display:flex; align-items:center; gap:.4rem }
.ticks li::before{ content:"✓"; color:var(--brand-600); font-weight:800 }

.hero__image{ position:relative; min-height:320px }

/* === v19: High-end muted hero background === */
.hero__panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.62)),
    url('assets/hero-mb.jpg') center/cover no-repeat !important;
  opacity: .95;
  filter: saturate(110%) contrast(104%);
}


/* Sections */
.section{ padding: clamp(3rem, 6vw, 5rem) 0 }
.section--alt{ background: var(--bg-alt) }
h2{ font-size: clamp(1.4rem, 2.6vw, 2rem); margin:0 0 .75rem }
.lead{ color:var(--muted); margin:0 0 2rem }

/* Cards with 3D effect */
.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1.2rem; perspective:1000px }
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.2rem 1.2rem 1.1rem; box-shadow:var(--shadow);
  transform-style:preserve-3d;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, color .22s ease;
}
.card:hover{
  transform: translateY(-6px) rotateX(1deg);
  box-shadow: var(--blue-shadow);
  border-color: rgba(23,59,103,.35);
}
.card .iconwrap{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(23,59,103,.07), rgba(29,78,216,.12));
  color: var(--brand);
  transform: translateZ(15px);
  box-shadow: 0 6px 14px rgba(29,78,216,.15);
  transition: background .22s ease, color .22s ease, box-shadow .22s ease;
}
.card:hover .iconwrap{
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
  box-shadow: 0 16px 36px rgba(29,78,216,.35);
}
.card h3{ margin:.5rem 0 .25rem; font-size:1.1rem }
.card p{ margin:0; color:var(--muted) }

/* Gallery */
.gallery{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem }
.shot{ aspect-ratio: 4/3; border-radius:var(--radius); box-shadow: var(--shadow); background: #eaeef7; position:relative; overflow:hidden }
.shot::before{ content:""; position:absolute; inset:0; background: var(--img, #ddd) center/cover no-repeat; filter:saturate(0) contrast(1.05) brightness(.98) }
.shot::after{ content:""; position:absolute; inset:auto 0 0; height:4px; background: linear-gradient(90deg, var(--brand) 0%, var(--brand-600) 100%); opacity:.85 }

/* USP */
.usps{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1.2rem }
.usp{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow) }
.usp__icon{ font-weight:800; color:var(--brand-600); margin-right:.4rem }
.usp h3{ margin:.2rem 0 .3rem }
.usp p{ margin:0; color:var(--muted) }

/* Kontakt */
.contact{ display:grid; grid-template-columns: 1.1fr .9fr; gap:1.4rem; align-items:start }
.form .grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:.8rem }
label{ display:flex; flex-direction:column; gap:.4rem; font-weight:600 }
input, textarea{ border-radius:12px; border:1px solid var(--line); padding:.85rem 1rem; font:inherit; background:#fff; outline:none }
input:focus, textarea:focus{ border-color:var(--brand-600); box-shadow:0 0 0 3px rgba(29,78,216,.15) }
.form__hint{ color:var(--muted); font-size:.9rem }
.contact__right{ display:grid; gap:1rem }
.contact__card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; box-shadow: var(--shadow) }
.map{ border-radius:var(--radius); height:260px; background:#e9eef8; display:grid; place-items:center; border:1px solid var(--line) }
.map__placeholder{ color:var(--muted); font-weight:600 }

/* Floating WhatsApp FAB */
.wa-fab{
  position: fixed; right: 22px; bottom: 22px;
  width: 56px; height: 56px; border-radius:50%;
  display:grid; place-items:center;
  color:#22c55e; background:#fff; border:1px solid var(--line);
  box-shadow: 0 10px 25px rgba(2,6,23,.18);
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease;
  z-index: 60;
}
.wa-fab:hover{ transform: translateY(-3px); box-shadow: 0 18px 36px rgba(2,6,23,.24) }

/* Footer */
.footer{ border-top:1px solid var(--line); padding:1.2rem 0 }
.footer--dark{ background:#0f172a; color:#e5e7eb; border-top-color:rgba(255,255,255,.08) }
.footer__row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap }
.footer__nav{ display:flex; gap:1rem }
.footer a{ color:inherit; text-decoration:none }
.footer a:hover{ color:#c7d2fe }
.footer__brand{ display:flex; align-items:center; gap:1rem }

/* Responsive */
@media (max-width: 1100px){
  .cta--header{ display:none }
}
@media (max-width: 980px){
  .hero__grid, .contact{ grid-template-columns:1fr }
  .cards, .gallery, .usps{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 640px){
  .nav{ display:none }
  .menu{ display:block }
  .cards, .gallery, .usps{ grid-template-columns: 1fr }
  .form .grid{ grid-template-columns: 1fr }
}


/* v4: logo proportional & header spacing */
.header__row{ min-height:82px }
.brand__logo{ max-height:64px; height:auto; width:auto }
@media (max-width:640px){
  .brand__logo{ max-height:56px }
}


/* --- Preloader (dark + glow) --- */
#preloader{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  transition:opacity .6s ease, visibility .6s ease;
}
#preloader.preloader--hide{
  opacity:0; visibility:hidden;
}
.preloader__content{
  text-align:center;
}
.preloader__logo{
  height:80px; width:auto;
  margin-bottom:20px;
}
.preloader__spinner{
  border:4px solid #e0e0e0;
  border-top:4px solid #1a73e8;
  border-radius:50%;
  width:40px; height:40px;
  margin:0 auto;
  animation:spin 1s linear infinite;
}
@keyframes spin{
  0%{ transform:rotate(0deg) }
  100%{ transform:rotate(360deg) }
}


/* v9: dark preloader with glowing logo */
#preloader{
  background:#1a1a1a;
}
.preloader__logo{
  filter:drop-shadow(0 0 8px rgba(26,115,232,0.8));
}


/* v10: pulsing glow animation */
.preloader__logo{
  filter:drop-shadow(0 0 8px rgba(26,115,232,0.9));
  animation:pulseGlow 2s infinite ease-in-out;
}
@keyframes pulseGlow{
  0%,100%{ filter:drop-shadow(0 0 6px rgba(26,115,232,0.6)); }
  50%{ filter:drop-shadow(0 0 14px rgba(26,115,232,1)); }
}


/* v11: fade-in for page content */
body{
  opacity:0;
  transition:opacity 0.8s ease;
}
body.page-loaded{
  opacity:1;
}


/* v13 fixes */
.invert-on-dark{ filter: invert(1) brightness(1.2) contrast(1.1); }
.header__row{ min-height:88px } /* a bit more room for taller logo */

.preloader__spinner{ border-color:#2a2a2a; border-top-color:#1a73e8 }

/* v14: transparent logo active everywhere; no invert needed */


/* v15: preloader hardening */
#preloader{
  position:fixed; inset:0;
  background:#1a1a1a;
  display:flex; align-items:center; justify-content:center;
  z-index:99999;
  transition:opacity .6s ease, visibility .6s ease;
}
#preloader.preloader--hide{ opacity:0; visibility:hidden }
.preloader__content{ text-align:center }
.preloader__logo{ height:84px; width:auto; animation:pulseGlow 2s ease-in-out infinite }
.preloader__spinner{
  border:4px solid #2a2a2a; border-top:4px solid #1a73e8;
  border-radius:50%; width:44px; height:44px; margin:14px auto 0; animation:spin 1s linear infinite
}
@keyframes pulseGlow{0%,100%{ filter:drop-shadow(0 0 6px rgba(26,115,232,.6)) }50%{ filter:drop-shadow(0 0 14px rgba(26,115,232,1)) }}
@keyframes spin{ to{ transform:rotate(360deg) } }
body{ opacity:0; transition:opacity .8s ease }
body.page-loaded{ opacity:1 }


/* === v18 additions === */

/* Round 3D icon buttons top-right inside header */
.icon-btn{
  width:48px; height:48px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(#ffffff, #dcdcdc);
  box-shadow: 0 10px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.08);
  text-decoration:none;
}
.icon-btn:active{ transform: translateY(1px); }
.icon-btn.phone{ color:#0a0a0a; }
.icon-btn.whatsapp{ color:#25D366; }

/* SVG icons via mask */
.icon-btn.phone::before,
.icon-btn.whatsapp::before{
  content:""; display:block; width:22px; height:22px; background: currentColor;
  -webkit-mask:no-repeat center/contain; mask:no-repeat center/contain;
}
.icon-btn.phone::before{
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M6.6 10.8a15.3 15.3 0 006.6 6.6l2.2-2.2a1.5 1.5 0 011.6-.36c1.77.62 3.7.96 5 .96a1.5 1.5 0 011.5 1.5v3.5a1.5 1.5 0 01-1.5 1.5C11.85 22.3 1.7 12.15 1.7 2.5A1.5 1.5 0 013.2 1h3.5a1.5 1.5 0 011.5 1.5c0 1.3.34 3.23.96 5a1.5 1.5 0 01-.36 1.6L6.6 10.8z"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M6.6 10.8a15.3 15.3 0 006.6 6.6l2.2-2.2a1.5 1.5 0 011.6-.36c1.77.62 3.7.96 5 .96a1.5 1.5 0 011.5 1.5v3.5a1.5 1.5 0 01-1.5 1.5C11.85 22.3 1.7 12.15 1.7 2.5A1.5 1.5 0 013.2 1h3.5a1.5 1.5 0 011.5 1.5c0 1.3.34 3.23.96 5a1.5 1.5 0 01-.36 1.6L6.6 10.8z"/></svg>');
}
.icon-btn.whatsapp::before{
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M20.5 3.5A10 10 0 006.1 18.6L3 21l2.6-.7A10 10 0 0020.5 3.5zm-8.4 2a7.4 7.4 0 00-6.4 11l-.4 1.5 1.5-.4a7.4 7.4 0 003.1.7 7.4 7.4 0 007.4-7.4 7.4 7.4 0 00-7.2-7.4zM9.8 7.8c.2 0 .4 0 .5.3l.8 1.9c.05.13.04.28-.03.4l-.5.8c-.08.13-.06.3.04.42.33.4 1.2 1.5 2.5 2.1.13.06.29.05.4-.04l.9-.7c.1-.08.25-.1.37-.05l2 .8c.27.1.34.44.16.66-.5.64-1.5 1.6-2.8 1.6-1.6 0-3.7-1-5.1-2.5-1.4-1.4-2.4-3.5-2.4-5 0-1.2 1-2.3 1.6-2.8.07-.05.15-.08.24-.08z"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M20.5 3.5A10 10 0 006.1 18.6L3 21l2.6-.7A10 10 0 0020.5 3.5zm-8.4 2a7.4 7.4 0 00-6.4 11l-.4 1.5 1.5-.4a7.4 7.4 0 003.1.7 7.4 7.4 0 007.4-7.4 7.4 7.4 0 00-7.2-7.4zM9.8 7.8c.2 0 .4 0 .5.3l.8 1.9c.05.13.04.28-.03.4l-.5.8c-.08.13-.06.3.04.42.33.4 1.2 1.5 2.5 2.1.13.06.29.05.4-.04l.9-.7c.1-.08.25-.1.37-.05l2 .8c.27.1.34.44.16.66-.5.64-1.5 1.6-2.8 1.6-1.6 0-3.7-1-5.1-2.5-1.4-1.4-2.4-3.5-2.4-5 0-1.2 1-2.3 1.6-2.8.07-.05.15-.08.24-.08z"/></svg>');
}

/* Header row spacing: keep buttons on right */
.header .container.header__row{ align-items:center }

/* Glass 3D depth a bit stronger */
.header{ box-shadow: 0 10px 24px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.5) }

/* Hero panel use local asset */

/* === v19: High-end muted hero background === */
.hero__panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.62)),
    url('assets/hero-mb.jpg') center/cover no-repeat !important;
  opacity: .95;
  filter: saturate(110%) contrast(104%);
}


/* Tick list with 3D glow check */
.ticks{ flex-wrap:wrap }
.ticks li{
  display:flex; align-items:center; gap:.55rem; position:relative; padding-left:0.1rem;
}
.ticks li::before{
  content:""; width:22px; height:22px; border-radius:50%;
  background:#0ea5e9; /* Accent */
  box-shadow: 0 0 14px rgba(14,165,233,.6), 0 6px 12px rgba(0,0,0,.15);
  display:inline-block; flex:0 0 22px;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 24 24\'><path fill=\'white\' d=\'M20.3 5.7l-11 11-5-5 1.4-1.4 3.6 3.6 9.6-9.6z\'/></svg>') center/60% no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"white\" d=\"M20.3 5.7l-11 11-5-5 1.4-1.4 3.6 3.6 9.6-9.6z\"/></svg>') center/60% no-repeat;
}


/* === v18: 3D Nav Buttons === */
.header .nav a{
  display:inline-block;
  padding:.55rem .9rem;
  border-radius:999px;
  background: linear-gradient(#ffffff, #dcdcdc);
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.75);
  color:#111;
  text-decoration:none;
  font-weight:600;
  transition: transform .12s ease, box-shadow .12s ease;
}
.header .nav a:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 20px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.85);
}
.header .nav a:active{
  transform: translateY(0);
  box-shadow: 0 6px 10px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.7);
}


/* === v18: 3D Tick Glow Upgrade === */
.ticks li::before{
  background: radial-gradient(circle at 30% 30%, #3ec8ff, #0ea5e9 60%, #0b7ec0 100%);
  box-shadow: 0 0 16px rgba(14,165,233,.7), 0 8px 14px rgba(0,0,0,.18);
}


/* === v19: Hero high-end transparent overlay === */

/* === v19: High-end muted hero background === */
.hero__panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.62)),
    url('assets/hero-mb.jpg') center/cover no-repeat !important;
  opacity: .95;
  filter: saturate(110%) contrast(104%);
}



/* === v20: Hero full-background === */
.hero{
  position: relative;
  min-height: 70vh;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.62)),
    url("assets/hero-mb.jpg") center/cover no-repeat !important;
  isolation: isolate;
}
.hero__image, .hero__panel{ display:none !important; }


/* === v20: High-end 3D ticks === */
.ticks{ display:flex; flex-wrap:wrap; gap:.85rem; padding:0; margin:.75rem 0 0; list-style:none; }
.ticks li{
  display:flex; align-items:center; gap:.55rem; font-weight:500; color:#394150;
}
.ticks li::before{
  content:"";
  width:26px; height:26px; border-radius:999px; flex:0 0 26px;
  background: radial-gradient(circle at 30% 30%, #e8f7ff 0%, #8ad9ff 60%, #35b6ff 100%);
  box-shadow:
    0 0 18px rgba(53,182,255,.55),
    0 10px 16px rgba(0,0,0,.18),
    inset 0 2px 4px rgba(255,255,255,.85);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20.3 5.7l-11 11-5-5 1.4-1.4 3.6 3.6 9.6-9.6z"/></svg>') center/62% no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20.3 5.7l-11 11-5-5 1.4-1.4 3.6 3.6 9.6-9.6z"/></svg>') center/62% no-repeat;
}


/* === v20: Raised 3D navigation bar === */
.header{
  position: sticky; top:0; z-index:100;
  background: transparent; border: none; box-shadow: none;
}
.header .container.header__row{
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  box-shadow:
    0 18px 36px rgba(0,0,0,.08),
    0 2px 0 rgba(255,255,255,.8) inset;
  margin-top: 12px;
  padding: 10px 14px;
}
.header .nav a{
  display:inline-block; padding:.55rem .9rem; border-radius:999px;
  background: linear-gradient(#ffffff, #e7e7e7);
  border:1px solid rgba(0,0,0,.07);
  box-shadow: 0 8px 14px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.85);
  color:#111; text-decoration:none; font-weight:600;
  transition: transform .12s ease, box-shadow .12s ease;
}
.header .nav a:hover{ transform: translateY(-1px); box-shadow: 0 12px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.9); }
.header .nav a:active{ transform: translateY(0); box-shadow: 0 6px 10px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.75); }


/* === v21: Larger hero so 'MB SERVICE' is fully visible */
.hero{
  min-height: 85vh !important;
  background-position: center 30% !important;
}


/* === v21: Fixed top glass 3D navigation === */
/* === Transparent Header ohne Hintergrund === */
.header{
  position: fixed !important;
  top:0; left:0; right:0;
  z-index: 2000;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Navigation Links sichtbar auf Bild */
.header .nav a{
  background: transparent;
  border: none;
  color: #fff !important;
  text-shadow: 0 0 6px rgba(0,0,0,0.6);
  padding: .4rem .65rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

.header .nav a:hover{
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
}

/* Create space below fixed header so content doesn't hide under it */
body{ padding-top: 112px !important; }

/* Nav links as 3D pills */
.header .nav a{
  display:inline-block;
  padding:.55rem .95rem;
  border-radius:999px;
  background: linear-gradient(#ffffff, #e8e8e8);
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 16px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.9);
  color:#111; text-decoration:none; font-weight:600;
  transition: transform .12s ease, box-shadow .12s ease;
}
.header .nav a:hover{ transform: translateY(-1px); box-shadow: 0 12px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,1); }
.header .nav a:active{ transform: translateY(0); box-shadow: 0 6px 10px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.8); }


/* === v21: 3D icon buttons stronger */
.icon-btn{
  width:50px;height:50px;border-radius:999px;
  background: linear-gradient(#ffffff,#dcdcdc);
  border:1px solid rgba(0,0,0,.1);
  box-shadow: 0 12px 22px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.85);
}


/* === v21: High-end 3D ticks (global) === */
.ticks{ display:flex; flex-wrap:wrap; gap:.9rem; padding:0; margin:.8rem 0 0; list-style:none; }
.ticks li{ display:flex; align-items:center; gap:.6rem; color:#2f3946; font-weight:600; }
.ticks li::before{
  content:"";
  width:26px; height:26px; border-radius:999px; flex:0 0 26px;
  background: radial-gradient(circle at 30% 30%, #f3fbff 0%, #a6e4ff 60%, #3abaff 100%);
  box-shadow: 0 0 18px rgba(58,186,255,.55), 0 10px 16px rgba(0,0,0,.18), inset 0 2px 4px rgba(255,255,255,.9);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20.3 5.7l-11 11-5-5 1.4-1.4 3.6 3.6 9.6-9.6z"/></svg>') center/62% no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20.3 5.7l-11 11-5-5 1.4-1.4 3.6 3.6 9.6-9.6z"/></svg>') center/62% no-repeat;
}


/* === v22: Glass-only nav, black text === */
/* Transparent Header */
.header{
  position: fixed !important;
  top:0; left:0; right:0;
  z-index:2000;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
/* Inner row without 3D box effect */
.header .container.header__row{
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin: 0 auto;
  padding: 10px 14px;
}
/* Nav links plain, black text */
.header .nav a{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #0b0b0b !important;
  padding: .4rem .6rem;
  border-radius: 8px;
}
.header .nav a:hover{
  background: rgba(0,0,0,0.06);
}

/* Keep space for fixed header */
body{ padding-top: 88px !important; }

/* Hero full background */
.hero{
  position: relative;
  min-height: 85vh !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.62)),
    url("assets/hero-mb.jpg") center 30%/cover no-repeat !important;
  isolation: isolate;
}
.hero__image, .hero__panel{ display:none !important; }

/* 3D icon buttons stay */
.icon-btn{
  width:50px;height:50px;border-radius:999px;
  background: linear-gradient(#ffffff,#dcdcdc);
  border:1px solid rgba(0,0,0,.1);
  box-shadow: 0 12px 22px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.85);
}

/* High-end 3D ticks */
.ticks{ display:flex; flex-wrap:wrap; gap:.9rem; padding:0; margin:.8rem 0 0; list-style:none; }
.ticks li{ display:flex; align-items:center; gap:.6rem; color:#2f3946; font-weight:600; }
.ticks li::before{
  content:""; width:26px; height:26px; border-radius:999px; flex:0 0 26px;
  background: radial-gradient(circle at 30% 30%, #f3fbff 0%, #a6e4ff 60%, #3abaff 100%);
  box-shadow: 0 0 18px rgba(58,186,255,.55), 0 10px 16px rgba(0,0,0,.18), inset 0 2px 4px rgba(255,255,255,.9);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20.3 5.7l-11 11-5-5 1.4-1.4 3.6 3.6 9.6-9.6z"/></svg>') center/62% no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20.3 5.7l-11 11-5-5 1.4-1.4 3.6 3.6 9.6-9.6z"/></svg>') center/62% no-repeat;
}


/* === v22.1 === */

/* Glass-only header (no white bar) */
.header{
  position: fixed !important;
  top:0; left:0; right:0; z-index:2000;
  background: rgba(255,255,255,0.12); /* lighter */
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.header .container.header__row{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 10px 14px;
}
.header .nav a{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #0b0b0b !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.55); /* lesbar auf hellem Bild */
  padding: .4rem .65rem;
  border-radius: 8px;
}
.header .nav a:hover{ background: rgba(0,0,0,0.06); }

/* Space for fixed header */
body{ padding-top: 96px !important; }

/* Hero background large */
.hero{
  min-height: 85vh !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.55)),
    url("assets/hero-mb.jpg") center 30%/cover no-repeat !important;
}

/* Blue high-end glow ticks (global) */
.ticks{ display:flex; flex-wrap:wrap; gap:.9rem; padding:0; margin:.9rem 0 0; list-style:none; }
.ticks li{ display:flex; align-items:center; gap:.6rem; color:#2f3946; font-weight:600; }
.ticks li::before{
  content:""; width:26px; height:26px; border-radius:999px; flex:0 0 26px;
  background: radial-gradient(circle at 30% 30%, #e6f7ff 0%, #79d0ff 55%, #1eaafc 100%);
  box-shadow: 0 0 22px rgba(30,170,252,.55), 0 10px 16px rgba(0,0,0,.18), inset 0 2px 5px rgba(255,255,255,.95);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20.3 5.7l-11 11-5-5 1.4-1.4 3.6 3.6 9.6-9.6z"/></svg>') center/62% no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20.3 5.7l-11 11-5-5 1.4-1.4 3.6 3.6 9.6-9.6z"/></svg>') center/62% no-repeat;
}


/* === v22.2 FINAL OVERRIDES === */

/* Fixed glass header; no white bar */
header.header, .header, .site-header, .navbar{
  position: fixed !important; top:0; left:0; right:0; z-index:2000;
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.08) !important;
}
.header .container.header__row{ background:transparent !important; box-shadow:none !important; border-radius:0 !important; }
.header::before, .header::after{ content:none !important; background:transparent !important; }
.header .nav a{
  background:transparent !important; border:none !important; box-shadow:none !important;
  color:#111 !important; text-shadow:0 1px 0 rgba(255,255,255,.55) !important;
  padding: .4rem .65rem !important; border-radius:8px !important;
}
.header .nav a:hover{ background: rgba(0,0,0,0.06) !important; }
body{ padding-top: 96px !important; }

/* Hero full background */
.hero{
  min-height: 85vh !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.55)),
    url("assets/hero-mb.jpg") center 30%/cover no-repeat !important;
}

/* Blue high-end glow ticks */
ul.ticks{ list-style:none; margin:.9rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.9rem; }
ul.ticks li{ display:flex; align-items:center; gap:.6rem; color:#2f3946; font-weight:600; }
ul.ticks li::before{
  content:""; width:26px; height:26px; flex:0 0 26px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #e6f7ff 0%, #79d0ff 55%, #1eaafc 100%);
  box-shadow: 0 0 22px rgba(30,170,252,.55), 0 10px 16px rgba(0,0,0,.18), inset 0 2px 5px rgba(255,255,255,.95);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20.3 5.7l-11 11-5-5 1.4-1.4 3.6 3.6 9.6-9.6z"/></svg>') center/62% no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20.3 5.7l-11 11-5-5 1.4-1.4 3.6 3.6 9.6-9.6z"/></svg>') center/62% no-repeat;
}
/* === HARD OVERRIDE: Header wirklich 100% transparent === */
.header,
.header::before,
.header::after,
.header .container,
.header .container.header__row,
.header--scrolled,
.header--scrolled::before,
.header--scrolled::after{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Nav-Links sichtbar auf Bild */
.header .nav a{
  color: #fff !important;
  text-shadow: 0 0 6px rgba(0,0,0,.6);
  background: transparent !important;
  border: 0 !important;
}
.header .nav a:hover{
  background: rgba(255,255,255,.15) !important;
  border-radius: 8px;
}
/* Hero Bild bis ganz oben ziehen */
.hero{
  margin-top: 0 !important;
  padding-top: 0 !important;
  background-position: center top !important;
}

/* Platzhalter für Header deaktivieren */
body{
  padding-top: 0 !important;
}
/* === FINAL HEADER + HERO FIX === */

/* Header komplett durchsichtig */
.header,
.header::before,
.header::after,
.header .container,
.header .container.header__row,
.header--scrolled {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 10px 14px !important;
}

/* Navi-Links sichtbar */
.header .nav a{
  color: #fff !important;
  text-shadow: 0 0 6px rgba(0,0,0,.6);
  background: transparent !important;
  border: none !important;
  font-weight: 600;
}
.header .nav a:hover{
  background: rgba(255,255,255,.15) !important;
  border-radius: 8px;
}

/* Hero-Bereich bis ganz oben */
body{
  padding-top: 0 !important;
}
.hero{
  margin-top: 0 !important;
  padding-top: 0 !important;
  background-position: center top !important;
}
/* Abstand für Hero-Text unter der Navi */
.hero .hero__copy{
  margin-top: 14opx !important;   /* kannst du anpassen: 60–120px je nach Optik */
}
/* Abstand für Hero-Text */
.hero .hero__copy{
  padding-top: 140px !important;   /* auf Desktop */
}

/* Logo in der Navi – Desktop-Größe als Basis */
.header .brand__logo,
.header .brand img,
.header .brand svg{
  height: 160px !important;
  width: auto !important;
}

/* Tablet (≤1024px) etwas kleiner */
@media (max-width: 1024px){
  .header .brand__logo,
  .header .brand img,
  .header .brand svg{
    height: 110px !important;
  }
}

/* Handy (≤600px) noch kleiner */
@media (max-width: 600px){
  .header .brand__logo,
  .header .brand img,
  .header .brand svg{
    height: 80px !important;
  }
}
/* Glow-Effekt für Haken */
ul.ticks li::before {
  content: "✓";                        /* Haken sichtbar */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 8px;
  border-radius: 999px;
  font-weight: bold;
  color: #fff;
  background: radial-gradient(circle at 30% 30%, #e6f7ff 0%, #79d0ff 55%, #1eaafc 100%);
  box-shadow: 
    0 0 18px rgba(30,170,252,.6),   /* äußerer Glow */
    0 8px 14px rgba(0,0,0,.25),     /* Schatten */
    inset 0 2px 5px rgba(255,255,255,.9); /* inneres Licht */
  animation: glowPulse 2.5s ease-in-out infinite;
}

/* Pulsierender Glow */
@keyframes glowPulse {
  0%   { box-shadow: 0 0 10px rgba(30,144,255,.5), 0 8px 14px rgba(0,0,0,.2); }
  50%  { box-shadow: 0 0 24px rgba(30,144,255,1), 0 10px 18px rgba(0,0,0,.25); }
  100% { box-shadow: 0 0 10px rgba(30,144,255,.5), 0 8px 14px rgba(0,0,0,.2); }
}


/* Optional: leichte Animation (pulsierender Glow) */
@keyframes glowPulse {
  0%   { box-shadow: 0 0 14px rgba(30,170,252,.5), 0 8px 14px rgba(0,0,0,.2); }
  50%  { box-shadow: 0 0 28px rgba(30,170,252,.9), 0 10px 18px rgba(0,0,0,.25); }
  100% { box-shadow: 0 0 14px rgba(30,170,252,.5), 0 8px 14px rgba(0,0,0,.2); }
}
ul.ticks li::before{
  animation: glowPulse 2.5s ease-in-out infinite;
}
/* === UNIVERSAL GLOW-HAKEN ===
   Greift für LI-Listen im Hero/Vorteile UND für einzelne Icon-Spans (.usp__icon / .benefit__icon) */

/* 1) Für Listenpunkte (li) – setzt links ein leuchtendes ✓ */
.hero li,
.vorteile li,
.benefits li,
ul.ticks li{
  position: relative;
  padding-left: 40px !important;  /* Platz für den Kreis links */
}

.hero li::before,
.vorteile li::before,
.benefits li::before,
ul.ticks li::before{
  content: "✓";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  font-weight: 800; color: #fff;
  background: radial-gradient(circle at 30% 30%, #e6f7ff 0%, #79d0ff 55%, #1eaafc 100%);
  box-shadow:
    0 0 18px rgba(30,170,252,.65),
    0 8px 14px rgba(0,0,0,.25),
    inset 0 2px 5px rgba(255,255,255,.95);
  animation: glowPulse 2.4s ease-in-out infinite;
}

/* 2) Für eigenständige Icon-Spans (falls du sowas hast) */
.usp__icon,
.benefit__icon,
.icon--check{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width: 32px; height: 32px; border-radius: 999px;
  font-weight: 800; color:#fff; 
  background: radial-gradient(circle at 30% 30%, #e6f7ff 0%, #79d0ff 55%, #1eaafc 100%) !important;
  box-shadow:
    0 0 20px rgba(30,170,252,.7),
    0 10px 16px rgba(0,0,0,.25),
    inset 0 2px 6px rgba(255,255,255,.95) !important;
  animation: glowPulse 2.4s ease-in-out infinite;
}
/* Falls das Span leer ist, setze das Häkchen per ::before */
.usp__icon::before,
.benefit__icon::before,
.icon--check::before{
  content:"✓";
}

/* Pulsier-Animation */
@keyframes glowPulse {
  0%   { box-shadow: 0 0 12px rgba(30,170,252,.55), 0 8px 14px rgba(0,0,0,.22), inset 0 2px 6px rgba(255,255,255,.9); }
  50%  { box-shadow: 0 0 26px rgba(30,170,252,1),   0 10px 18px rgba(0,0,0,.26), inset 0 2px 6px rgba(255,255,255,.98); }
  100% { box-shadow: 0 0 12px rgba(30,170,252,.55), 0 8px 14px rgba(0,0,0,.22), inset 0 2px 6px rgba(255,255,255,.9); }
}

/* Blauer Haken mit Glow in den Vorteilen */
.usp__icon::before {
  content: "✔";
  color: #00aaff;
  font-size: 22px;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(0,170,255,.8);
  display: inline-block;
  margin-right: 8px;
}
usp__icon {

  background: none !important;   /* entfernt evtl. alte Icons */

}
.usp__icon::before {

  content: "✔";
  color: #00aaff;
  font-size: 22px;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(0,170,255,.8);
  display: inline-block;
  margin-right: 8px;
}
/* USP-Haken: 1 blauer Haken mit leichtem Glow */

.usp__icon{

  display:inline-block;

  color:#00aaff;               /* Farbton anpassen, wenn gewünscht */

  font-size:22px;              /* Größe des Hakens */

  font-weight:800;

  line-height:1;

  margin-right:10px;

  text-shadow:0 0 8px rgba(0,170,255,.85);  /* Glow */

  /* alles Alte sicher ausschalten */
  background:none !important;
  box-shadow:none !important;
  width:auto !important;
  height:auto !important;
  border-radius:0 !important;
}



/* frühere Pseudo-Icons zuverlässig deaktivieren */
.usp__icon::before,
.usp__icon::after{ content:none !important; }

/* Animation für pulsierenden Glow */

@keyframes pulseGlow {

  0% {

    text-shadow: 0 0 6px rgba(0,170,255,.6),

                 0 0 12px rgba(0,170,255,.6);

  }

  50% {

    text-shadow: 0 0 12px rgba(0,170,255,1),

                 0 0 24px rgba(0,170,255,.9);

  }

  100% {

    text-shadow: 0 0 6px rgba(0,170,255,.6),

                 0 0 12px rgba(0,170,255,.6);

  }

}



/* Pulsierender Effekt für die Haken */

.usp__icon::before {
  content: "✔";
  color: #00aaff;
  font-size: 22px;
  font-weight: 700;
  display: inline-block;
  margin-right: 8px;
  animation: pulseGlow 2s infinite; /* hier läuft die Animation */
}
/* Navigation in dunklem Grau */
.header .nav a,
.header--scrolled .nav a,
.header nav a,
.header .nav__link {
  color: #1a1a1a !important;   /* sattes dunkles Grau */
  text-shadow: none !important;
}
/* Hover-Effekt */
.header .nav a:hover,
.header .nav__link:hover {
  color: #0056cc !important;   /* kräftiges Blau beim Hover */
}
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.header-left {
  flex: 1; /* Logo links */
}
.header-nav {
  flex: 2; /* Menü mittig */
  display: flex;
  justify-content: center;
  gap: 30px;
}
.header-right {
  flex: 1; /* Buttons rechts */
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.header-nav a {
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a; /* dunkles Grau */
}