:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#4b5563;
  --line:rgba(15,23,42,.12);
  --accent:#0284c7;
  --accent2:#16a34a;
  --shadow: 0 10px 26px rgba(2,6,23,.10);
  --radius: 18px;
  --max: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 70% 10%, rgba(2,132,199,.10) 0%, rgba(2,132,199,0) 55%), var(--bg);
  line-height:1.55;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.55);
  color:var(--text);
  box-shadow: none;
  transition:.18s ease;
  cursor:pointer;
  white-space:nowrap;
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 10px 22px rgba(2,6,23,.10)}
.btn.primary{
  background: linear-gradient(90deg, rgba(2,132,199,.95), rgba(22,163,74,.92));
  color:#ffffff;
  border:0;
}
.btn.ghost{background: transparent}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background: rgba(255,255,255,.55);
  color:var(--muted);
  font-size:14px;
}

header{
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(10px);
  background: rgba(246,248,251,.82);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-weight:800;
  letter-spacing:.2px;
}
.brand img{
  height:34px;
  width:auto;
}
.navlinks{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.navlinks a{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;
  color:var(--muted);
  transition:.18s ease;
}
.navlinks a:hover{border-color:var(--line); color:var(--text)}
.nav-cta{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.social{display:flex; gap:10px; align-items:center}
.iconbtn{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.55);
  transition:.18s ease;
}
.iconbtn:hover{transform: translateY(-1px); box-shadow: 0 10px 22px rgba(2,6,23,.10)}
.icon{width:18px; height:18px; opacity:.9}

.hero{
  position:relative;
  min-height: calc(88vh - 74px);
  display:grid;
  align-items:end;
  overflow:hidden;
}
.hero video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  filter:none;
}

.hero::before{
  content:"";
  position:absolute; inset:0;
  /* Weißer, transparenter Schleier für ein cleanes, helles Design */
  background: rgba(255,255,255,.55);
  z-index:1;
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute; inset:0;
  z-index:2;
  background:
    /* Weniger "Milchglas" damit das Video kräftiger wirkt */
    linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(246,248,251,.18) 55%, rgba(246,248,251,.38) 100%),
    radial-gradient(800px 500px at 50% 30%, rgba(2,132,199,.10), rgba(0,0,0,0));
}
.hero-inner{position:relative;
  z-index:3; padding: 34px 0 54px;}
.hero-card{
  max-width: 780px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.55);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
}
.hero h1{
  margin: 10px 0 8px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height:1.1;
  letter-spacing:-.3px;
}
.hero p{
  margin:0 0 14px;
  color: var(--muted);
  font-size: 16.5px;
}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}

.section{padding: 42px 0}
.card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.55);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.grid2{display:grid; gap:16px; grid-template-columns: 1.2fr .8fr}
.grid3{display:grid; gap:14px; grid-template-columns: repeat(3,1fr)}
@media (max-width: 900px){
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
}

h2{margin:0 0 10px; font-size: 26px; letter-spacing:-.2px}
.lead{color:var(--muted); margin:0 0 14px}
.kicker{font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em}

.list{margin:0; padding:0; list-style:none; display:grid; gap:10px;}
.list li{
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius: 14px;
  background: rgba(246,248,251,.75);
  display:flex; gap:10px; align-items:flex-start;
}
.badge{
  width:28px; height:28px; border-radius:10px;
  display:grid; place-items:center;
  background: rgba(2,132,199,.10);
  border:1px solid rgba(2,132,199,.22);
  flex: 0 0 auto;
}
.small{font-size:14px; color:var(--muted)}

.pagehead{padding: 26px 0 6px}
.pagehead h1{margin:10px 0 8px; font-size: 34px; letter-spacing:-.2px}
.pagehead p{margin:0; color:var(--muted)}

.page-hero{
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  background: rgba(15,23,42,.04);
}
.page-hero img{
  width:100%;
  height:340px;
  object-fit:cover;
  object-position:center;
}
@media (max-width: 700px){ .page-hero img{height:240px;} }

.ba-grid{
  display:grid;
  gap:12px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px){ .ba-grid{grid-template-columns:1fr;} }
.ba-item{
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  background:#fff;
  box-shadow: var(--shadow);
}
.ba-item img{width:100%; height:260px; object-fit:cover}
.ba-cap{
  padding:10px 12px;
  font-size:14px;
  color:var(--muted);
  display:flex; justify-content:space-between; gap:10px;
}
.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(246,248,251,.9);
  font-size:13px;
  color:var(--muted);
}

.cta-strip{
  position:sticky; bottom:0; z-index:25;
  border-top:1px solid var(--line);
  background: rgba(246,248,251,.88);
  backdrop-filter: blur(10px);
  padding: 10px 0;
}
.cta-strip .inner{
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
}
.cta-strip .inner .left{color:var(--muted); font-size:14px}

footer{
  border-top:1px solid var(--line);
  padding: 26px 0 34px;
  color: var(--muted);
  background: #ffffff;
}
footer .footgrid{
  display:grid;
  gap:18px;
  grid-template-columns: 1.2fr 1fr 1fr;
  align-items:start;
}
@media (max-width: 900px){ footer .footgrid{grid-template-columns:1fr} }
footer h3{
  margin:0 0 10px;
  font-size:16px;
  color:var(--text);
}
footer .links{display:grid; gap:8px}
footer .links a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}
footer .copy{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
}

.video-fallback{
  position:absolute;
  inset:0;
  display:none;
  place-items:center;
  z-index:5;
}
.video-fallback .btn{box-shadow: var(--shadow);}


/* --- Media hero blocks (Privat/Gewerblich) --- */
.media-hero{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border:1px solid rgba(15,23,42,.10);
  background: #f8fbff;
  box-shadow: 0 18px 40px rgba(15,23,42,.08);
}
.media-hero::before{
  content:"";
  position:absolute; inset:0;
  background: var(--bgimg) center/cover no-repeat;
  filter: blur(18px) saturate(1.05);
  transform: scale(1.08);
}
.media-hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,.10) 40%, rgba(255,255,255,.00) 100%);
}
.media-hero img{
  position: relative;
  display:block;
  margin: 0 auto;
  width: min(980px, 100%);
  height: auto;
  max-height: 460px;
  object-fit: contain; /* show full image without stretching */
  filter: contrast(1.03) saturate(1.02);
}
@media (max-width: 700px){
  .media-hero img{max-height: 320px;}
}

/* --- Video overlay (clean/white) --- */
.hero::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.10) 30%, rgba(11,15,20,.18) 70%, rgba(11,15,20,.30) 100%),
    radial-gradient(900px 560px at 50% 20%, rgba(255,255,255,.22), rgba(0,0,0,0));
}


/* ---------- Mobile Optimierung ---------- */
.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  place-items:center;
}
.nav-toggle svg{width:20px;height:20px;opacity:.9}

@media (max-width: 980px){
  .nav{gap:10px}
  .navlinks{display:none}
  .nav-cta{display:none}
  .nav-toggle{display:grid}
  header{position:sticky}
}

/* Mobile menu drawer */
.mobile-drawer{
  display:none;
  position:fixed; inset:0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
  z-index:60;
}
.mobile-drawer[aria-hidden="false"]{display:block}
.mobile-panel{
  position:absolute; right:0; top:0; height:100%; width:min(360px, 92vw);
  background: rgba(255,255,255,.92);
  color:#0b1220;
  border-left:1px solid rgba(0,0,0,.08);
  padding:14px;
}
.mobile-panel a{color:#0b1220}
.mobile-panel .m-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 2px 12px;
}
.mobile-panel .m-links{
  display:grid; gap:8px;
  margin-top:6px;
}
.mobile-panel .m-links a{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.75);
  font-weight:600;
}
.mobile-panel .m-actions{
  display:grid; gap:10px;
  margin-top:14px;
}
.mobile-panel .m-actions .btn{justify-content:center}
.mobile-panel .m-social{
  display:flex; gap:10px; margin-top:12px;
}
.mobile-panel .m-note{
  margin-top:14px;
  color: rgba(0,0,0,.6);
  font-size:14px;
}

/* Typography & spacing on small screens */
@media (max-width: 600px){
  .hero{min-height: calc(92vh - 74px);}
  .hero-inner{padding: 22px 0 34px}
  .hero-card{padding: 14px}
  .pill{font-size:13px}
  .hero p{font-size:15.5px}
  .section{padding: 30px 0}
  h2{font-size:22px}
  .cta-strip .inner{justify-content:center}
  .cta-strip .inner .left{display:none}
}


/* ---------- Bulletproof Mobile / iOS Fixes ---------- */

/* iOS safe-area (Notch/Home-Indicator) */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* Keep header tappable and avoid clipping behind notch */
header{
  padding-top: var(--safe-top);
}

/* Fix 100vh issues on mobile browsers (esp. iOS Safari) */
.hero{
  min-height: calc(100svh - 74px);
}
@supports (height: 100dvh){
  .hero{ min-height: calc(100dvh - 74px); }
}

/* Prevent iOS zoom on input (future-proof) */
input, textarea, select, button{
  font-size: 16px;
}

/* Make tap targets comfortably large */
.btn, .iconbtn, .nav-toggle{
  min-height: 44px;
}

/* Better text rendering on iOS */
body{
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Sticky CTA: respect safe-area bottom so it doesn't sit under iPhone home bar */
.cta-strip{
  padding-bottom: calc(10px + var(--safe-bottom));
}

/* Mobile drawer: prevent overscroll bounce behind modal */
.mobile-panel{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

/* Ensure video always covers and stays crisp */
.hero video{
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Ultra-small devices (320px) */
@media (max-width: 360px){
  .brand span{font-size:14px}
  .hero h1{font-size: 24px}
  .hero-actions .btn{padding: 12px 14px}
}

/* Prevent horizontal scroll from long words/URLs */
body, .container{overflow-wrap:anywhere}

/* Use JS-calculated vh as fallback */
.hero{ min-height: calc((var(--vh, 1vh) * 100) - 74px); }

/* hero-card lift */
.hero-inner{ padding-bottom: 84px; } /* was ~54px */
.hero-card{ margin-bottom: 10px; }
@media (max-width: 600px){
  .hero-inner{ padding-bottom: 64px; } /* keep room for sticky CTA */
  .hero-card{ margin-bottom: 6px; }
}

/* ---------- Mobile Header Fix (v15) ---------- */
@media (max-width: 980px){
  .navlinks{display:none !important}
  .nav-cta{display:flex !important; gap:10px}
  .nav-cta > .btn{display:none !important} /* hide big call/offer in header */
  .social{display:flex !important}
  .nav-toggle{display:grid !important}
}

/* ---------- Mobile Hero Compact (v15) ---------- */
@media (max-width: 600px){
  .hero-inner{padding: 16px 0 54px !important;}
  .hero-card{padding: 12px !important; border-radius: 16px !important;}
  .hero h1{font-size: 26px !important; line-height:1.12;}
  .hero p{font-size: 15px !important; margin-bottom: 10px !important;}
  .pill{font-size:12.5px}
  .hero-actions .btn.ghost{display:none !important;}
}

/* Force-hide any video play overlays */
.hero button,
.hero .play,
.hero .video-play,
.hero [aria-label*="Video"]{
  display:none !important;
  pointer-events:none !important;
}

/* Ensure header and hamburger are clickable */
header{
  position:relative;
  z-index:1000;
}
.nav-toggle{
  z-index:1001;
  pointer-events:auto !important;
}
.mobile-drawer{
  z-index:2000;
}