/* OpsDeck360 Netlify Landing — minimal, fast, executive-friendly */
:root{
  --bg: #041a4a;
  --text:#ffffff;
  --muted:#d6e2ff;
  --line: rgba(255,255,255,.18);
  --lineStrong: rgba(255,255,255,.26);
  --glass: rgba(255,255,255,.028);
  --glass2: rgba(255,255,255,.016);
  --accent:#5ae0b5;
  --accent2:#6db7ff;
  --shadow: 0 18px 55px rgba(0,0,0,.33);
  --radius: 18px;
  --radius2: 24px;
}

*{box-sizing:border-box}
html{color-scheme: dark;}
html,body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  padding-top: var(--topbarH, 72px);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:-60vh 0 -60vh 0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(70,120,255,.34), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(120,200,255,.20), transparent 55%),
    linear-gradient(180deg,
      rgba(70,120,255,.18) 0%,
      rgba(4,26,74,0) 26%,
      rgba(0,90,200,.16) 50%,
      rgba(4,26,74,0) 74%,
      rgba(120,200,255,.14) 100%);
  transform: translateY(calc(var(--scrollY, 0px) * -0.12));
  will-change: transform;
  filter: saturate(1.05);
}

@media (prefers-reduced-motion: reduce){
  body::before{ transform:none; }
}


a{color:inherit; text-decoration:none}
button{font: inherit; color: inherit}
.container{width:min(1120px, calc(100% - 40px)); margin:0 auto}

section[id]{scroll-margin-top: calc(var(--topbarH, 72px) + 14px)}

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:80;
  width:100%;
  transition: background .2s ease, border-color .2s ease;
  background: rgba(4,26,74,.62);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.topbar.is-scrolled{
  background: rgba(4,26,74,.74);
  border-bottom-color: rgba(255,255,255,.14);
}

.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
  gap: 16px;
}

.brand{display:flex; align-items:center; gap:10px}
.brand__logo{width:28px; height:28px}
.brand__name{font-weight:700; letter-spacing:.2px}

.nav{display:flex; gap:18px; color: var(--muted); font-weight:500}
.nav a{padding:8px 10px; border-radius: 999px}
.nav a:hover{background: rgba(255,255,255,.06); color: var(--text)}

.topbar__cta{display:flex; gap:10px}
.burger{display:none; background:transparent; border:0; padding:8px; border-radius:10px}
.burger span{display:block; width:22px; height:2px; background:var(--text); margin:5px 0; border-radius:2px}

.mobilemenu{
  border-top: 1px solid var(--line);
  padding: 14px 0;
}
.mobilemenu a{display:block; padding:10px 0; color: var(--muted)}
.mobilemenu .btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--glass2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.055);
  color: var(--text);
}
.btn:hover{transform: translateY(-1px)}
.btn--primary{
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(90,224,181,.18), rgba(109,183,255,.10));
}
.btn--secondary{
  border-color: rgba(109,183,255,.35);
  background: rgba(109,183,255,.10);
}
.btn--ghost{
  background: transparent;
}
.btn[aria-disabled="true"]{opacity:.55; pointer-events:none}

.hero{padding: 62px 0 28px}
.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items:start;
}
.badge{
  display:flex;
  width: fit-content;
  margin: 0 auto;
  justify-content:center;
  text-align:center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--lineStrong);
  background: var(--glass2);
  color: rgba(255,255,255,.86);
  font-weight: 650;
  font-size: 13.5px;
  letter-spacing: .2px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
h1{font-size: clamp(32px, 3.4vw, 52px); line-height:1.08; margin: 14px 0 10px}
.hl{color: var(--accent)}
.lead{color: var(--muted); font-size: 17px; margin: 0 0 16px; max-width: 58ch}

.timecallout{
  display:flex;
  align-items:center;
  gap:14px;
  margin: 10px 0 16px;
}
.iphone-clock{
  min-width: 152px;
  padding: 12px 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.040); /* grey/transparent */
  box-shadow: 0 14px 40px rgba(0,0,0,.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.iphone-clock__time{
  font-weight: 850;
  font-size: 28px;
  letter-spacing: .8px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  padding: 6px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.78); /* white outline for the number display */
  background: rgba(0,0,0,.10); /* subtle grey */
}
.iphone-clock__date{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}
.timecallout__text{
  font-size: 14px;
  line-height: 1.25;
  color: rgba(255,255,255,.90);
}
.timecallout__text strong{color:#fff; font-weight:750}

@media (max-width: 900px){
  .timecallout{justify-content:center; text-align:center}
}
@media (max-width: 560px){
  .timecallout{flex-direction:column; align-items:flex-start; text-align:left}
  .iphone-clock{width: 100%; align-items:flex-start}
  .iphone-clock__time{font-size: 26px}
}

.hero__bullets{display:flex; flex-wrap:wrap; gap:10px; margin: 16px 0 18px}
.pill{
  border:1px solid var(--line);
  background: var(--glass2);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero__buttons{display:flex; gap:10px; flex-wrap:wrap}
.fineprint{margin-top:14px; color: rgba(255,255,255,.70); font-size: 13px}

.card{
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border-radius: var(--radius2);
  padding: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.card--sub{
  margin-top: 12px;
  padding: 14px;
  border-radius: var(--radius);
}
.card__title{font-weight:700; font-size: 16px}
.card__desc{color: var(--muted); margin: 6px 0 12px}
.card__actions{display:flex; gap:10px; flex-wrap:wrap}
.card__meta{
  border-top:1px solid var(--line);
  margin-top: 14px;
  padding-top: 12px;
  color: var(--muted);
  font-size: 13px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.stat{display:flex; flex-direction:column; gap:4px}
.stat__k{color: var(--muted); font-weight:600; font-size: 13px}
.stat__v{font-size: 28px; font-weight: 800; letter-spacing: .2px}
.stat__s{color: rgba(255,255,255,.68); font-size: 12px}

.trust{padding: 22px 0 10px}
.trust__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:start;
}
.trust__copy h2{margin:0 0 8px; font-size: 24px}
.trust__copy p{margin:0; color: var(--muted)}
.trust__cards{display:grid; grid-template-columns: 1fr; gap: 10px}
.mini{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.mini__h{font-weight:700; margin-bottom:4px}
.mini__p{color: var(--muted); margin:0; font-size: 13px}

.section{padding: 54px 0}
.section--alt{background: linear-gradient(180deg, rgba(255,255,255,.03), transparent)}
.section__head{margin-bottom: 18px}
.section__head h2{margin:0; font-size: 28px}
.section__head p{margin: 8px 0 0; color: var(--muted)}

.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px}
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap: 14px}

.feature{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding: 16px 16px 14px;
}
.feature h3{margin:0 0 6px}
.feature p{margin:0 0 10px; color: var(--muted)}
.feature ul{margin:0; padding-left: 18px; color: rgba(255,255,255,.78)}
.feature li{margin: 6px 0; font-size: 13px}

.steps{display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px}
.step{
  display:flex; gap:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding: 14px;
}
.step__n{
  width:32px; height:32px; border-radius: 10px;
  background: rgba(90,224,181,.15);
  border: 1px solid rgba(90,224,181,.30);
  display:flex; align-items:center; justify-content:center;
  font-weight:800;
}
.step__b h3{margin:0 0 2px; font-size: 16px}
.step__b p{margin:0; color: var(--muted); font-size: 13px}

.callout{
  margin-top: 14px;
  border:1px solid rgba(109,183,255,.28);
  background: rgba(109,183,255,.08);
  border-radius: var(--radius);
  padding: 14px;
  color: rgba(255,255,255,.90);
}

.panel{
  border:1px solid var(--line);
  background: var(--glass);
  border-radius: var(--radius);
  padding: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.panel--accent{
  background: linear-gradient(180deg, rgba(90,224,181,.10), rgba(255,255,255,.02));
  border-color: rgba(90,224,181,.30);
}
.panel h3{margin:0 0 10px}
.checklist{list-style:none; margin:0; padding:0}
.checklist li{
  margin:10px 0;
  padding-left: 26px;
  position:relative;
  color: rgba(255,255,255,.82);
}
.checklist li::before{
  content:"✓";
  position:absolute; left: 8px; top: 0;
  color: var(--accent);
  font-weight: 800;
}
.panel__cta{display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px}

.downloads{display:grid; grid-template-columns: 1fr 1fr; gap: 12px}
.download{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding: 14px;
}
.download:hover{background: rgba(255,255,255,.05)}
.download__title{font-weight:800}
.download__meta{color: var(--muted); font-size: 13px; margin-top: 4px}

.faq details{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 10px 0;
}
.faq summary{cursor:pointer; font-weight:700}
.faq__a{color: var(--muted); margin-top: 8px}

.form{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding: 16px;
}
.form__row{display:grid; grid-template-columns: 1fr 1fr; gap: 12px}
label{display:block; font-weight:600; font-size: 13px; color: rgba(255,255,255,.88)}
input, textarea{
  width:100%;
  margin-top: 6px;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(4,26,74,.55);
  color: var(--text);
  font: inherit;
}
textarea{resize: vertical}
input:focus, textarea:focus{outline: 2px solid rgba(90,224,181,.28); border-color: rgba(90,224,181,.35)}
.form__actions{display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-top: 12px}
.contacthint{margin-top: 10px; color: rgba(255,255,255,.72); font-size: 13px}
code{padding: 2px 6px; border-radius: 8px; border:1px solid var(--line); background: rgba(0,0,0,.20)}

.footer{
  border-top: 1px solid var(--line);
  padding: 26px 0;
  background: rgba(0,0,0,.10);
}
.footer__grid{display:flex; align-items:center; justify-content:space-between; gap: 14px}
.footer__small{color: rgba(255,255,255,.65); font-size: 13px; margin-top: 6px}
.footer__links{display:flex; gap: 14px; color: rgba(255,255,255,.70)}
.brand--footer .brand__logo{width:24px; height:24px}

@media (max-width: 980px){
  .hero__grid{grid-template-columns: 1fr; }
  .trust__grid{grid-template-columns: 1fr;}
  .grid3{grid-template-columns: 1fr}
  .steps{grid-template-columns: 1fr}
  .downloads{grid-template-columns: 1fr}
}
@media (max-width: 780px){
  .nav, .topbar__cta{display:none}
  .burger{display:inline-block}
  .form__row{grid-template-columns: 1fr}
  .footer__grid{flex-direction:column; align-items:flex-start}
}


/* --- Service Dropdown + iOS Cards (added) --- */
a, button, summary { -webkit-tap-highlight-color: transparent; }
.topbar { padding-top: env(safe-area-inset-top); }

.nav__drop{position:relative; display:inline-flex; align-items:center}
.nav__drop>summary{list-style:none; cursor:pointer; padding:8px 10px; border-radius:999px; color:var(--muted)}
.nav__drop>summary::-webkit-details-marker{display:none}
.nav__drop>summary:hover{background:rgba(255,255,255,.06); color:var(--text)}
.nav__drop>summary::after{content:"▾"; font-size:.85em; opacity:.8; margin-left:6px}
.nav__drop[open]>summary::after{transform:rotate(180deg)}

.nav__dropmenu{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(420px, calc(100vw - 24px));
  max-height: min(420px, 70vh);
  overflow:auto;
  background: rgba(4,26,74,.98);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  z-index: 80;
}
.nav__dropmenu a{display:block; padding:10px 12px; border-radius:10px; color:var(--muted)}
.nav__dropmenu a:hover{background: rgba(255,255,255,.08); color: var(--text)}

.mobilemenu__drop > summary{
  cursor:pointer;
  padding:10px 0;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color: var(--muted);
}
.mobilemenu__drop > summary::-webkit-details-marker{display:none}
.mobilemenu__drop > summary::after{content:"▾"; opacity:.7}
.mobilemenu__drop[open] > summary::after{transform:rotate(180deg)}
.mobilemenu__drop a{display:block; padding:8px 0; color: var(--muted)}
.mobilemenu__drop a:hover{color: var(--text)}

.servicegrid{display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px;}
.servicecard{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  padding: 16px;
  display:flex;
  flex-direction:column;
  height:100%;
}
.servicecard__icon{
  width:44px; height:44px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: 10px;
  color: var(--text);
}
.servicecard p{opacity:.92; margin:0 0 12px}
.servicecard h3{margin:6px 0 8px}

.servicecard__actions{margin-top:auto; padding-top: 4px;}
.servicecard__actions .btn{width:100%; margin-top:0;}

.callout__link{display:inline-block; margin-left:8px; color: var(--text); font-weight:600}
.callout__link:hover{opacity:.9}

.contactcard{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding: 16px;
}
.contactcard__meta{display:grid; gap: 12px;}
.contactcard__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px;}

@media (max-width: 980px){
  .contactcard{grid-template-columns: 1fr;}
}
@media (max-width: 420px){
  .contactcard__actions .btn{width:100%; justify-content:center;}
}


/* --- Downloads lock (added) --- */
.downloadlock .panel{max-width: 720px; margin: 0 auto;}
.lockrow{display:flex; gap:10px; align-items:center; margin-top: 10px; flex-wrap:wrap;}
.lockinput{
  flex: 1 1 260px;
  min-width: 200px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  color: var(--text);
  font: inherit;
  outline: none;
}
.lockinput:focus{border-color: rgba(109,183,255,.55); box-shadow: 0 0 0 3px rgba(109,183,255,.18);}
.lockmsg{margin-top:10px; color: rgba(255,160,160,.95); font-weight:600;}


/* --- PDF Vorschau (added) --- */
.btn--sm{
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 13px;
}

.pdfgallery{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.pdfcard{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 360px;
}
.pdfthumbwrap{
  aspect-ratio: 3 / 4;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.12);
  display:grid;
  place-items:center;
  cursor: pointer;
}
.pdfthumb{
  width: 100%;
  height: 100%;
  display:block;
}
.pdfthumb__fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  letter-spacing: .8px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.pdfmeta{
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  flex: 1;
}
.pdftitle{
  font-weight: 800;
  line-height: 1.25;
}
.pdfsub{
  color: var(--muted);
  font-size: 13px;
}
.pdfactions{
  display:flex;
  gap: 10px;
  align-items: stretch;
  margin-top: auto;
}
.pdfactions .btn{
  flex: 1 1 0;
  justify-content: center;
}
@media (max-width: 520px){
  .pdfactions{flex-direction: column;}
  .pdfactions .btn{width:100%;}
}

/* Modal */
body.modal-open{overflow:hidden}
.pdfmodal{
  position: fixed;
  inset: 0;
  z-index: 120;
}
.pdfmodal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}
.pdfmodal__panel{
  position: relative;
  width: min(1100px, calc(100% - 28px));
  height: min(88vh, 860px);
  margin: 6vh auto 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(4,26,74,.96);
  box-shadow: 0 30px 80px rgba(0,0,0,.50);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.pdfmodal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.pdfmodal__title{
  font-weight: 800;
  padding-left: 6px;
}
.pdfmodal__headactions{display:flex; gap:10px; flex-wrap:wrap}
.pdfmodal__frame{
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

@media (max-width: 520px){
  .pdfmodal__panel{height: 90vh; margin-top: 4vh;}
  .pdfmodal__title{font-size: 14px;}
}


.pdfmodal .btn{color: var(--text);}


/* Touch + Accessibility */
:focus-visible{outline:2px solid rgba(109,183,255,.65); outline-offset:2px;}
a,button,summary{touch-action:manipulation;}
.btn{min-height:44px;}
@media (hover:none){
  .btn:hover{transform:none}
}

/* ==========================================================
   OpsDeck UI – Dark Glass Theme (based on your screenshot)
   Drop-in overrides + richer hover effects
   ========================================================== */

:root{
  /* Base palette */
  --bg: #0a0f1f;
  --text: #e7eefc;
  --muted: rgba(255,255,255,.74);

  /* Lines / glass */
  --line: rgba(255,255,255,.10);
  --lineStrong: rgba(255,255,255,.16);
  --glass: rgba(255,255,255,.030);
  --glass2: rgba(255,255,255,.018);

  /* Accents (UI-like) */
  --accent: #5ae0b5;   /* teal */
  --accent2:#5097e9;   /* blue */
  --accent3:#7a5cff;   /* violet */

  /* Shadows / radii */
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --shadowHover: 0 26px 90px rgba(0,0,0,.55);
  --radius: 18px;
  --radius2: 24px;
}

/* Background like the app UI (deep navy + blue/violet glow) */
body::before{
  background:
    radial-gradient(1200px 650px at 18% -5%, rgba(80,151,233,.25), transparent 55%),
    radial-gradient(980px 540px at 92% 0%, rgba(122,92,255,.22), transparent 58%),
    radial-gradient(820px 520px at 60% 18%, rgba(90,224,181,.12), transparent 58%),
    linear-gradient(180deg,
      rgba(80,151,233,.10) 0%,
      rgba(10,15,31,0) 32%,
      rgba(35,62,120,.16) 52%,
      rgba(10,15,31,0) 74%,
      rgba(122,92,255,.10) 100%);
  filter: saturate(1.08);
}

/* Topbar: a touch darker + cleaner edge */
.topbar{
  background: rgba(10,15,31,.72);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.topbar.is-scrolled{
  background: rgba(10,15,31,.82);
  border-bottom-color: rgba(255,255,255,.14);
}

/* ---------- Hover system ---------- */
:where(.btn,.card,.feature,.step,.mini,.download,.pdfcard,.servicecard,.panel,.faq details){
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background .16s ease,
    filter .16s ease;
}

@media (hover:hover){
  :where(.card,.feature,.step,.mini,.download,.pdfcard,.servicecard,.panel,.faq details):hover{
    transform: translateY(-2px);
    box-shadow: var(--shadowHover);
    border-color: rgba(255,255,255,.18);
  }
}

/* Buttons: clearer hover + subtle glow */
.btn{
  background: rgba(255,255,255,.040);
  border-color: rgba(255,255,255,.12);
}
@media (hover:hover){
  .btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 55px rgba(0,0,0,.45);
    border-color: rgba(255,255,255,.18);
  }
}
.btn:active{transform: translateY(0); filter: brightness(.98)}

.btn--primary{
  border-color: rgba(80,151,233,.35);
  background:
    radial-gradient(120% 130% at 15% 0%, rgba(80,151,233,.25), rgba(0,0,0,0) 60%),
    linear-gradient(135deg, rgba(80,151,233,.16), rgba(90,224,181,.10));
}
.btn--secondary{
  border-color: rgba(80,151,233,.40);
  background: rgba(80,151,233,.12);
}

/* Cards: app-like gradient top glow */
.card,
.feature,
.step,
.mini,
.download,
.pdfcard,
.servicecard,
.panel,
.faq details{
  border-color: rgba(255,255,255,.10);
  background:
    radial-gradient(140% 120% at 15% 0%, rgba(80,151,233,.14), rgba(0,0,0,0) 52%),
    radial-gradient(120% 110% at 92% 10%, rgba(122,92,255,.12), rgba(0,0,0,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.018));
  box-shadow: var(--shadow);
}

/* Make small blocks feel more "UI" */
.feature ul{color: rgba(255,255,255,.78)}

/* Inputs/selects: closer to the screenshot (softer border + blue focus) */
input, textarea{
  border-color: rgba(255,255,255,.14);
  background: rgba(4,26,74,.38);
}
input:focus, textarea:focus{
  outline: 2px solid rgba(80,151,233,.30);
  border-color: rgba(80,151,233,.40);
}

/* Navigation hover like pills */
.nav a:hover,
.nav__drop > summary:hover{
  background: rgba(255,255,255,.07);
  color: var(--text);
}

/* Dropdown menu: slightly more "panel" */
.nav__dropmenu{
  background: rgba(10,15,31,.98);
  border-color: rgba(255,255,255,.12);
}

/* Badges / pills: a bit more contrast */
.badge, .pill{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.028);
}

/* Reduce motion safety */
@media (prefers-reduced-motion: reduce){
  :where(.btn,.card,.feature,.step,.mini,.download,.pdfcard,.servicecard,.panel,.faq details){
    transition: none !important;
  }
}


/* Badge: left-aligned like in your screenshot */
.badge{
  margin: 0;
  justify-content:flex-start;
  text-align:left;
}

/* Subtle "color wash" on hover for anything that looks like a button/card/pill */
:where(.btn,.card,.feature,.step,.mini,.download,.pdfcard,.servicecard,.panel,.faq details,.pill,.badge){
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
:where(.btn,.card,.feature,.step,.mini,.download,.pdfcard,.servicecard,.panel,.faq details,.pill,.badge)::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background:
    radial-gradient(120% 130% at 18% 0%, rgba(80,151,233,.20), transparent 55%),
    radial-gradient(110% 120% at 90% 10%, rgba(122,92,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.00));
  opacity: 0;
  transition: opacity .16s ease;
  pointer-events:none;
  z-index: 0;
  mix-blend-mode: screen;
}
@media (hover:hover){
  :where(.btn,.card,.feature,.step,.mini,.download,.pdfcard,.servicecard,.panel,.faq details,.pill,.badge):hover::after{
    opacity: .75;
  }
}
:where(.btn,.card,.feature,.step,.mini,.download,.pdfcard,.servicecard,.panel,.faq details,.pill,.badge) > *{
  position: relative;
  z-index: 1;
}
/* Uhr: grau-transparent statt schwarz + weiße Umrahmung der Zeit */
.iphone-clock{
  background: rgba(255,255,255,.045);   /* grau-transparent */
  border: 1px solid rgba(255,255,255,.28);
}

.iphone-clock__time{
  background: rgba(255,255,255,.07);    /* statt schwarz */
  border: 1px solid rgba(255,255,255,.85); /* weiße Umrahmung */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  border-radius: 16px;
}
/* ==========================================================
   Layout / Spacing Fix: gleiche Abstände überall
   (Header ↔ Body ↔ Sections ↔ Grids)
   ========================================================== */

:root{
  --containerW: 1120px;
  --gutter: clamp(16px, 3vw, 28px);
  --topbarH: 72px;

  --stack-1: 8px;
  --stack-2: 12px;
  --stack-3: 16px;
  --stack-4: 24px;

  --sectionY: clamp(48px, 6vw, 72px);
  --gridGap: clamp(12px, 2.2vw, 22px);
}

/* Container: überall gleiche linke/rechte Kante */
.container{
  width: min(var(--containerW), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Body-Offset passt exakt zur festen Header-Höhe */
html, body{
  padding-top: var(--topbarH);
}

/* Header: feste Höhe, damit nichts “wandert” */
.topbar__inner{
  min-height: var(--topbarH);
  padding-block: 0;          /* überschreibt das alte padding:14px 0 */
  gap: 16px;
}

/* Badge im Hero sauber links (statt mittig) */
.badge{
  margin: 0;                 /* überschreibt margin: 0 auto */
  justify-content: flex-start;
  text-align: left;
}

/* Section-Rhythmus: überall gleich */
.hero{
  padding: calc(var(--sectionY) + 8px) 0 var(--sectionY);
}
.section{
  padding: var(--sectionY) 0;
}
.trust{
  padding: var(--sectionY) 0 calc(var(--sectionY) - 18px);
}

/* Gleiche Grid-Abstände überall */
.hero__grid,
.trust__grid,
.grid2,
.grid3,
.steps,
.downloads{
  gap: var(--gridGap);
}

/* Einheitliche Head-Abstände */
.section__head{ margin-bottom: var(--stack-4); }
.section__head p{ margin-top: var(--stack-2); }

/* Einheitliche Typo-/Block-Abstände im Hero */
h1{ margin: var(--stack-3) 0 var(--stack-2); }
.lead{ margin: 0 0 var(--stack-4); }
.hero__bullets{ margin: var(--stack-4) 0 var(--stack-4); }
.timecallout{ margin: var(--stack-3) 0 var(--stack-4); }
.hero__buttons{ margin-top: var(--stack-2); }
.fineprint{ margin-top: var(--stack-3); }
/* ==========================================================
   Tighter vertical spacing (Header→Hero, Sections, Video)
   ========================================================== */

:root{
  /* Headerhöhe + Body-Offset (weniger Luft oben) */
  --topbarH: 64px;

  /* Hero / Sections kompakter */
  --heroPadTop: clamp(14px, 2.2vw, 22px);
  --heroPadBottom: clamp(14px, 2.2vw, 22px);

  --sectionY: clamp(26px, 3.4vw, 42px);
  --sectionYtight: clamp(18px, 2.6vw, 30px);
}

/* Body-Offset exakt zur Header-Höhe */
html, body{
  padding-top: var(--topbarH);
}

/* Header “wirklich” auf diese Höhe bringen (damit nichts addiert) */
.topbar__inner{
  min-height: var(--topbarH);
  padding-block: 10px; /* war 14px -> reduziert den Abstand zusätzlich */
}

/* Weniger Abstand Header → Badge/Headline */
.hero{
  padding: var(--heroPadTop) 0 var(--heroPadBottom);
}
.hero__copy .badge{
  margin-bottom: 10px;
}

/* Abstand Hero → nächste Section (z.B. Videos) kleiner */
.hero + .section{
  padding-top: var(--sectionYtight);
}

/* Auf der ganzen Seite: Sections kompakter */
.section{
  padding: var(--sectionY) 0;
}
.section__head{
  margin-bottom: 14px;
}
.section__head p{
  margin-top: 8px;
}

/* Videos: weniger Luft zwischen Head und Inhalt */
#videos .video-groups{
  margin-top: 10px;
}
#videos details{
  margin-bottom: 12px;
}
.video-grid--info{ grid-template-columns: 1fr; margin-bottom: 14px; }
/* Quickstart-Box unter "So funktioniert's" */
.quickstart{ margin-top: 14px; }
.qs-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 10px;
}
.qs-note{
  margin: 10px 0 0;
  color: rgba(255,255,255,.74);
  font-size: 13px;
  line-height: 1.45;
}
.qs-check li{ margin: 8px 0; }
/* ROI / Payback Rechner (im Payback-Kästchen) */
.roi{ margin-top: 10px; }
.roi__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.roi__field span{
  display:block;
  font-size: 11px;
  color: rgba(255,255,255,.72);
  margin-bottom: 6px;
}

.roi__field input{
  width: 100%;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.16);
}

@media (min-width: 900px){
  .roi__grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

.roi__result{ margin-top: 10px; display:flex; flex-direction:column; gap: 6px; }
.roi__value{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .2px;
}
.roi__formula{
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

.roi__payback{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  color: rgba(255,255,255,.80);
  font-size: 12px;
}

.roi__invest{
  width: 120px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.040);
  border: 1px solid rgba(255,255,255,.14);
}

/* leichter Hover-Farbwechsel im ROI-Block */
@media (hover:hover){
  .card--sub:hover .roi__field input,
  .roi__field input:hover{
    background: rgba(255,255,255,.065);
    border-color: rgba(255,255,255,.22);
  }
}
/* Uhr sichtbar (grau-transparent) + weiße Umrahmung der Zeit */
.iphone-clock{
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.28);
}

.iphone-clock__time{
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 16px;
}
.iphone-clock__date{
  color: rgba(255,255,255,.72);
}
/* ==========================================================
   ROI / Payback – Big Payline + Mini Chart + Profit 12/24/36
   Scoped: only inside [data-roi]
   ========================================================== */

[data-roi] .roi{ margin-top: 10px; }

[data-roi] .roi__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 900px){
  [data-roi] .roi__grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

[data-roi] .roi__field span{
  display:block;
  font-size: 11px;
  color: rgba(255,255,255,.72);
  margin-bottom: 6px;
}
[data-roi] .roi__field input{
  width: 100%;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.16);
}

[data-roi] .roi__summary{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
[data-roi] .roi__value{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
}
[data-roi] .roi__formula{
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

/* BIG line: Invest → Payback */
[data-roi] .roi__payline{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
[data-roi] .roi__investWrap{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,.80);
  font-size: 13px;
}
[data-roi] .roi__investWrap span{
  font-weight: 700;
}
[data-roi] .roi__invest{
  width: 140px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.040);
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 700;
}
[data-roi] .roi__arrow{
  font-size: 18px;
  opacity: .8;
}
[data-roi] .roi__paybackBig{
  font-size: 16px;
  font-weight: 900;
  color: var(--accent, #5ae0b5);
  letter-spacing: .1px;
}
@media (min-width: 700px){
  [data-roi] .roi__paybackBig{ font-size: 18px; }
}

/* Mini chart (payback bar) */
[data-roi] .roi__mini{
  margin-top: 10px;
}
[data-roi] .roi__bar{
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  overflow: hidden;
}
[data-roi] .roi__barFill{
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--pb, 0));
  background: linear-gradient(90deg, rgba(90,224,181,.65), rgba(90,224,181,.15));
}
[data-roi] .roi__marker{
  position:absolute;
  top: 50%;
  left: calc(var(--pb, 0) * 100%);
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(90,224,181,.95);
  box-shadow: 0 0 0 3px rgba(90,224,181,.18), 0 10px 30px rgba(0,0,0,.45);
}
[data-roi] .roi__markerLabel{
  position:absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(10,15,31,.85);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  white-space: nowrap;
}
[data-roi] .roi__legend{
  margin-top: 6px;
  display:flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,.70);
}

/* Profit tiles */
[data-roi] .roi__profits{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
[data-roi] .roi__profit{
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.10);
}
[data-roi] .roi__profit .k{
  font-size: 11px;
  color: rgba(255,255,255,.70);
  margin-bottom: 6px;
}
[data-roi] .roi__profit .v{
  font-size: 14px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}
[data-roi] .roi__profit.is-positive .v{
  color: var(--accent, #5ae0b5);
}
[data-roi] .roi__profit.is-negative .v{
  color: rgba(255,255,255,.65);
}

/* small helper text */
[data-roi] .roi__hint{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

/* Hover “wash” (leicht) */
@media (hover:hover){
  [data-roi] .roi__field input:hover,
  .card--sub:hover [data-roi] .roi__field input{
    background: rgba(255,255,255,.065);
    border-color: rgba(255,255,255,.22);
  }
}
/* Invest € + Payback komplett grün */
[data-roi] .roi__investWrap span{
  color: var(--accent, #5ae0b5);
}

[data-roi] .roi__invest{
  color: var(--accent, #5ae0b5);
  border-color: rgba(90,224,181,.40);
  background: rgba(90,224,181,.08);
}
[data-roi] .roi__value{
  color: var(--accent, #5ae0b5);
}
/* Uhr: komplett transparent, nur weiße Umrahmung */
.iphone-clock__time{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.95) !important;
  color: rgba(255,255,255,.62) !important; /* Zahl hellgrau */
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Touch-Feedback (statt Hover) */
@media (hover:none){
  .btn:active,
  .card:active,
  .pill:active,
  details[open] > summary:active{
    transform: translateY(0);
    filter: brightness(1.06);
  }
}
video{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* kein Cropping, kein Verzerren */
  background: rgba(0,0,0,.25);
  border-radius: 14px;
}
html, body{ overflow-x: hidden; }
*, *::before, *::after{ box-sizing: border-box; }
html.menu-open, html.menu-open body{
  overflow: hidden;
  touch-action: none;
}
/* Burger auf Mobile sicher klickbar (iOS/Safari) */
.burger{
  position: relative;
  z-index: 9999;
  pointer-events: auto;
  touch-action: manipulation;
}
.topbar__inner{ position: relative; z-index: 2; }
html.menu-open, html.menu-open body{
  overflow: hidden;
}



/* === Language switch (glassy + active green) === */
.langswitch{
  display: inline-flex;
  gap: 8px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
}
.langbtn{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.22);
  background: transparent;
  color: var(--text);
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.langbtn:hover{ background: rgba(255,255,255,0.08); }
.langbtn.is-active{
  background: rgba(0, 200, 120, 0.22);
  border-color: rgba(0, 200, 120, 0.65);
  box-shadow: 0 0 12px rgba(0, 200, 120, 0.28);
}

/* === Tablet/Portrait: use burger menu earlier so header doesn't overflow === */
@media (max-width: 1024px){
  .nav, .topbar__cta{ display:none !important; }
  .burger{ display:inline-block !important; }
  .topbar__inner{ justify-content:flex-start; }
  .langswitch{ margin-left:auto; }
  .burger{ margin-left: 10px; }
}

/* Small phones: make the language pills a bit tighter */
@media (max-width: 420px){
  .langbtn{ padding: 5px 10px; font-size: 13px; }
}

/* Videos: keep layout stable even before loading */
video.hovervid{
  width: 100%;
  height: auto;
  background: rgba(255,255,255,0.04);
}

/* === Header: prevent odd line breaks (DE/EN) === */
.nav{ align-items:center; flex-wrap:nowrap; }
.nav a,
.nav__drop > summary{
  white-space: nowrap;
  line-height: 1;
}

/* If the German labels get tight on smaller laptops, reduce spacing slightly */
@media (max-width: 1200px){
  html[lang="de"] .nav{ gap: 14px; }
  html[lang="de"] .nav a,
  html[lang="de"] .nav__drop > summary{ padding-left: 8px; padding-right: 8px; }
}

/* Label inside protected downloads area */
.dlArea__label{ margin-top: 14px; margin-bottom: 8px; color: rgba(255,255,255,.70); font-size: 13px; }



/* ==========================================================
   iPhone-style UX upgrades (mobile-first, low risk)
   1) Sticky bottom CTA
   2) Bottom-sheet PDF modal on phones
   3) Swipeable card rails (videos / PDFs) with scroll-snap
   4) Press feedback (micro-interactions)
   5) Fit-check form styling
   ========================================================== */

.bottombar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:95;
  display:none;
  gap:10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(10,15,31,.78);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.bottombar__btn{flex:1; min-height:48px; padding: 12px 10px; border-radius: 14px;}
@media (max-width: 780px){
  .bottombar{display:flex;}
  body{padding-bottom: calc(86px + env(safe-area-inset-bottom));}
}
body.modal-open .bottombar{display:none !important;}

/* Bottom-sheet modal on phones */
@media (max-width: 780px){
  .pdfmodal{display:flex; align-items:flex-end;}
  .pdfmodal__panel{
    width: 100%;
    margin: 0;
    height: min(92vh, 920px);
    border-radius: 22px 22px 0 0;
    border-left: 0;
    border-right: 0;
  }
  .pdfmodal__panel::before{
    content:"";
    display:block;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.28);
    margin: 10px auto 6px;
  }
  .pdfmodal__head{padding-top: 6px;}
}

/* Swipe rails (Videos + PDFs) */
@media (max-width: 780px){
  .video-grid{
    display:flex !important;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 8px;
    grid-template-columns: none !important;
  }
  .video-card{
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
  .pdfgallery{
    display:flex;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 8px;
  }
  .pdfcard{
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
}

/* Micro-interactions: iOS-like press feedback */
.btn, .card, .download, .pdfcard, .feature, .servicecard{
  transform-origin: center;
}
@media (hover:none){
  .btn:active, .card:active, .download:active, .pdfcard:active, .feature:active, .servicecard:active{
    transform: scale(.99);
  }
}
@media (hover:hover){
  .btn:active{transform: translateY(-1px) scale(.99);}
}

/* Fit-check */
.fitform{display:flex; flex-direction:column; gap: 12px;}
.fitfield{display:flex; flex-direction:column; gap:6px;}
.fitfield span{font-weight:700; color: rgba(255,255,255,.86); font-size: 13px;}
.fitfield select{
  width:100%;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}
.fitactions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 4px;}


/* === White outer frames + subtle 3D bevel (added) === */
:root{
  /* brighter, whiter outer lines */
  --frameBorder: rgba(255,255,255,.80);
  --frameBorderSoft: rgba(255,255,255,.62);

  /* 3D bevel (top highlight + bottom shade) */
  --frameBevelHi: rgba(255,255,255,.18);
  --frameBevelLo: rgba(0,0,0,.44);

  --frameShadow: 0 18px 55px rgba(0,0,0,.48),
                 inset 0 1px 0 var(--frameBevelHi),
                 inset 0 -1px 0 var(--frameBevelLo);

  --frameShadowHover: 0 26px 85px rgba(0,0,0,.58),
                      inset 0 1px 0 rgba(255,255,255,.22),
                      inset 0 -1px 0 rgba(0,0,0,.48);

  /* reuse existing tokens */
  --line: var(--frameBorderSoft);
  --lineStrong: var(--frameBorder);
}

/* Main “framed” UI blocks */
.card,
.feature,
.step,
.mini,
.download,
.pdfcard,
.servicecard,
.panel,
.faq details,
.contactcard,
.form,
.pdfmodal__panel,
.nav__dropmenu{
  border-color: var(--frameBorder);
  box-shadow: var(--frameShadow);
}

/* Slight lift on hover (desktop) */
@media (hover:hover){
  .card:hover,
  .feature:hover,
  .step:hover,
  .mini:hover,
  .download:hover,
  .pdfcard:hover,
  .servicecard:hover,
  .panel:hover,
  .faq details:hover,
  .contactcard:hover,
  .form:hover{
    border-color: rgba(255,255,255,.95);
    box-shadow: var(--frameShadowHover);
  }
}

/* Smaller framed elements (chips / inputs / code / select) */
.pill,
.badge,
.langswitch,
.langbtn:not(.is-active),
.lockinput,
.fitfield select,
code{
  border-color: var(--frameBorder);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

/* Buttons: keep them consistent with the “white frame” look */
.btn{
  border-color: var(--frameBorder);
  box-shadow: 0 16px 48px rgba(0,0,0,.40),
              inset 0 1px 0 rgba(255,255,255,.14);
}
@media (hover:hover){
  .btn:hover{
    border-color: rgba(255,255,255,.95);
    box-shadow: 0 22px 70px rgba(0,0,0,.52),
                inset 0 1px 0 rgba(255,255,255,.18);
  }
}
/* === Dark-Blue (wie Screenshot) + weiße Schrift + Rahmen nur bei Hover/Focus === */

:root{
  /* Background / Text */
  --bg:#151c2c;                 /* deep blue-grey */
  --text:#f6f8ff;               /* white-ish */
  --muted: rgba(246,248,255,.78);

  /* Lines / Glass */
  --line: rgba(255,255,255,.10);
  --lineStrong: rgba(255,255,255,.18);
  --glass: rgba(255,255,255,.030);
  --glass2: rgba(255,255,255,.015);

  /* Shadows */
  --shadow: 0 18px 55px rgba(0,0,0,.45);
  --frameBevel: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.38);
  --frameGlow: 0 0 0 1px rgba(255,255,255,.22), 0 0 26px rgba(255,255,255,.10);

  /* Inner (Inputs) blue */
  --innerBlue: rgba(109,183,255,.42);
  --innerBlueStrong: rgba(109,183,255,.62);
}

/* Page background */
body{
  background:
    radial-gradient(1200px 700px at 16% 12%, rgba(26,47,56,.55) 0%, rgba(21,28,44,1) 55%),
    radial-gradient(900px 650px at 76% 38%, rgba(36,39,59,.55) 0%, rgba(21,28,44,0) 60%),
    #151c2c;
  color: var(--text);
}

/* Topbar (match new bg) */
.topbar{
  background: rgba(21,28,44,.62) !important;
  border-bottom-color: rgba(255,255,255,.10) !important;
}
.topbar.is-scrolled{
  background: rgba(21,28,44,.76) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
}

/* Main framed blocks: NOT permanently white */
.card,
.feature,
.step,
.mini,
.download,
.pdfcard,
.servicecard,
.panel,
.contactcard,
.form,
.pdfmodal__panel,
.nav__dropmenu{
  border-color: var(--line) !important;
  box-shadow: var(--shadow), var(--frameBevel) !important;
}

/* “White glowing frame” only on interaction */
@media (hover:hover){
  .card:hover,
  .feature:hover,
  .step:hover,
  .mini:hover,
  .download:hover,
  .pdfcard:hover,
  .servicecard:hover,
  .panel:hover,
  .contactcard:hover,
  .form:hover{
    border-color: rgba(255,255,255,.72) !important;
    box-shadow: var(--shadow), var(--frameBevel), var(--frameGlow) !important;
  }
}
.card:focus-within,
.feature:focus-within,
.step:focus-within,
.mini:focus-within,
.download:focus-within,
.pdfcard:focus-within,
.servicecard:focus-within,
.panel:focus-within,
.contactcard:focus-within,
.form:focus-within{
  border-color: rgba(255,255,255,.72) !important;
  box-shadow: var(--shadow), var(--frameBevel), var(--frameGlow) !important;
}

/* Optional: “ab und zu” automatisch (nur wenn du diese Klasse setzt) */
.glowPulse{ animation: framePulse 7s ease-in-out infinite; }
@keyframes framePulse{
  0%, 86%, 100%{
    border-color: var(--line);
    box-shadow: var(--shadow), var(--frameBevel);
  }
  90%, 94%{
    border-color: rgba(255,255,255,.85);
    box-shadow: var(--shadow), var(--frameBevel), var(--frameGlow);
  }
}

/* Inputs / Selects: blue inner frame */
input,
select,
textarea{
  background: rgba(21,28,44,.55) !important;
  color: var(--text) !important;
  border-color: var(--innerBlue) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
input:focus,
select:focus,
textarea:focus{
  outline: 2px solid rgba(109,183,255,.42) !important;
  border-color: var(--innerBlueStrong) !important;
  box-shadow: var(--frameGlow), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Pills / small framed elements keep subtle */
.pill,
.badge,
.langswitch,
.langbtn:not(.is-active),
.lockinput,
.fitfield select,
code{
  border-color: var(--line) !important;
}

/* Buttons: neutral, white glow only on hover */
.btn{
  border-color: var(--lineStrong) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
@media (hover:hover){
  .btn:hover{
    border-color: rgba(255,255,255,.72) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.52), var(--frameGlow), inset 0 1px 0 rgba(255,255,255,.10) !important;
  }
}
/* Fit-Check: Dropdown-Liste (Options) weiß mit dunkler Schrift */
.fitfield select{
  /* Feld bleibt dunkelblau + weiße Schrift */
  background: rgba(9,18,44,.55) !important;
  color: #fff !important;

  /* sorgt in vielen Browsern dafür, dass die Popup-Liste "hell" gerendert wird */
  color-scheme: light;
}

/* Die aufgeklappte Liste */
.fitfield select option,
.fitfield select optgroup{
  background: #ffffff !important;
  color: #0b1020 !important;
}

/* markierte Option etwas blau hinterlegen */
.fitfield select option:checked{
  background: #cfe1ff !important;
  color: #0b1020 !important;
}
/* Fit-Check: Dropdown-Liste (Options) dunkelblau + weiße Schrift */
.fitfield select{
  background: rgba(9,18,44,.70) !important;
  color: #fff !important;
  color-scheme: dark; /* hilft in vielen Browsern beim Popup */
}

/* aufgeklappte Liste */
.fitfield select option,
.fitfield select optgroup{
  background: #0b1638 !important;
  color: #ffffff !important;
}

/* markierte Option */
.fitfield select option:checked{
  background: #163a8a !important;
  color: #ffffff !important;
}
/* === Alles einheitlich dunkelblau (Section + Cards/Panels) === */

/* 1) Alt-Section NICHT heller machen */
.section--alt{
  background: transparent !important;
}

/* 2) Einheitliche “Surface”-Farbe für alle Boxen (nicht mehr unterschiedlich je nach Hintergrund) */
:root{
  --surfaceA: rgba(7, 18, 54, .92);   /* dunkelblau */
  --surfaceB: rgba(6, 15, 38, .94);   /* noch dunkler */
  --surfaceSheen: linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.22));
}

/* Haupt-Boxen/Container */
.card,
.panel,
.feature,
.step,
.mini,
.download,
.pdfcard,
.servicecard,
.callout,
.faq details,
.contactcard,
.form,
.pdfmodal__panel,
.nav__dropmenu{
  background: var(--surfaceSheen), var(--surfaceA) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Subcards / kleinere Boxen (falls vorhanden) */
.card--sub,
.panel--sub,
.stat,
.roi,
.roi__field{
  background: var(--surfaceSheen), var(--surfaceB) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* =========================
   Darker add-on (whites stay white)
   ========================= */
:root{
  /* etwas dunkler, aber gleiche Optik */
  --bg: #050f2d;
  --bg-rgb: 5,15,45;

  --surfaceA: rgba(5, 15, 45, .93);
  --surfaceB: rgba(5, 15, 45, .93);
  --surfaceSheen: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.28));

  /* etwas weniger "helles" Glas/Lines */
  --glass: rgba(255,255,255,.022);
  --glass2: rgba(255,255,255,.012);
  --line: rgba(255,255,255,.16);
  --lineStrong: rgba(255,255,255,.22);

  /* Glow minimal dunkler */
  --glowAura: rgba(109,183,255,.085);
}

/* Hintergrund-Glow minimal dunkler */
body::before{
  background:
    radial-gradient(900px 520px at var(--mx, 20%) var(--my, 0%),
      rgba(109,183,255,.10), transparent 64%),
    radial-gradient(1000px 560px at calc(100% - var(--mx, 20%)) calc(var(--my, 10%) + 8%),
      rgba(90,224,181,.06), transparent 68%),
    linear-gradient(180deg,
      rgba(255,255,255,.025) 0%,
      rgba(0,0,0,.18) 55%,
      rgba(255,255,255,.018) 100%);
  filter: saturate(1.02);
}
/* Hintergrund-Glow: dunkel bis schwarz-blau (Cursor/Finger folgt weiter) */
body::before{
  background:
    radial-gradient(900px 520px at var(--mx, 20%) var(--my, 0%),
      rgba(109,183,255,.07), transparent 66%),
    radial-gradient(1000px 560px at calc(100% - var(--mx, 20%)) calc(var(--my, 10%) + 8%),
      rgba(90,224,181,.035), transparent 70%),
    radial-gradient(1200px 800px at 50% 120%,
      rgba(40,80,255,.08), transparent 72%),
    linear-gradient(180deg,
      rgba(2, 8, 20, .98) 0%,
      rgba(1, 4, 12, .985) 55%,
      rgba(2, 6, 16, .98) 100%);
  filter: saturate(1.06) contrast(1.06);
}
/* FIX: ultra dark blue/black background like your screenshot */
:root{
  --bg: #020814;
  --bg-rgb: 2,8,20;
}

body{
  background: var(--bg);
}

/* sehr subtiler Glow + leichter Cursor-Shift */
body::before{
  background:
    radial-gradient(900px 520px at var(--mx, 25%) var(--my, 10%),
      rgba(109,183,255,.06), transparent 68%),
    radial-gradient(1000px 560px at calc(100% - var(--mx, 25%)) calc(var(--my, 12%) + 6%),
      rgba(90,224,181,.025), transparent 72%),
    linear-gradient(180deg,
      rgba(2, 8, 20, .995) 0%,
      rgba(1, 4, 12, .995) 55%,
      rgba(2, 6, 16, .995) 100%);
  filter: saturate(1.06) contrast(1.07);
}
/* FIX: ultra dark blue/black background like your screenshot */
:root{
  --bg: #020814;
  --bg-rgb: 2,8,20;
}

body{
  background: var(--bg);
}

/* sehr subtiler Glow + leichter Cursor-Shift */
body::before{
  background:
    radial-gradient(900px 520px at var(--mx, 25%) var(--my, 10%),
      rgba(109,183,255,.06), transparent 68%),
    radial-gradient(1000px 560px at calc(100% - var(--mx, 25%)) calc(var(--my, 12%) + 6%),
      rgba(90,224,181,.025), transparent 72%),
    linear-gradient(180deg,
      rgba(2, 8, 20, .995) 0%,
      rgba(1, 4, 12, .995) 55%,
      rgba(2, 6, 16, .995) 100%);
  filter: saturate(1.06) contrast(1.07);
}
/* FRAME RESTORE – weißer Rahmen wieder sichtbar */
:root{
  --line: rgba(255,255,255,.22);
  --frame: rgba(255,255,255,.26);
  --frameHi: rgba(255,255,255,.16);
  --frameLo: rgba(0,0,0,.60);
}

:where(.card,.panel,.download,.pdfcard,.servicecard,.faq details,.form,.contactcard,.nav__dropmenu,.roi){
  border: 1px solid var(--frame) !important;
  box-shadow:
    var(--shadow),
    inset 0 1px 0 var(--frameHi),
    inset 0 -1px 0 var(--frameLo) !important;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background: linear-gradient(180deg,
    rgba(255,255,255,.060) 0%,
    rgba(var(--tintLilac), .040) 45%,
    rgba(255,255,255,.030) 100%);

  backdrop-filter: blur(14px) saturate(1.10);
  -webkit-backdrop-filter: blur(14px) saturate(1.10);
}
/* ==========================================================
   Big outer frame (like the contactcard / Anlage 2)
   ========================================================== */
.outerframe{
  border: 1px solid var(--frame, var(--line)) !important;
  border-radius: var(--radius2, 24px);
  padding: clamp(14px, 2.2vw, 20px);

  background: linear-gradient(180deg,
    rgba(255,255,255,.045),
    rgba(255,255,255,.020));

  box-shadow:
    var(--shadow, 0 18px 55px rgba(0,0,0,.45)),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.45);

  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
}

.section__head + .outerframe{ margin-top: 14px; }
.outerframe > *:first-child{ margin-top: 0; }
.outerframe > *:last-child{ margin-bottom: 0; }

/* optional: etwas weniger “doppelte Box” Optik innen */
.outerframe .faq details{ background: rgba(255,255,255,.02); }

@media (hover:hover) and (pointer:fine){
  .hoverfold .hoverfold__body{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-6px);
    transition:max-height .35s ease, opacity .25s ease, transform .25s ease;
  }
  .hoverfold:hover .hoverfold__body,
  .hoverfold:focus-within .hoverfold__body{
    max-height:5000px;
    opacity:1;
    transform:none;
  }

  .hoverfold .section__head h2::after{
    content:"▾";
    margin-left:10px;
    font-size:14px;
    opacity:.65;
    transform:rotate(-90deg);
    display:inline-block;
    transition:transform .22s ease, opacity .22s ease;
  }
  .hoverfold:hover .section__head h2::after,
  .hoverfold:focus-within .section__head h2::after{
    transform:rotate(0deg);
    opacity:1;
  }
}
/* ROI collapsible on hover (desktop): show only headline, expand on hover */
@media (hover:hover) and (pointer:fine){
  #roi .section__head h2{
    display:inline-flex;
    align-items:center;
    gap:10px;
    cursor:default;
  }
  #roi .section__head h2::after{
    content:"▾";
    font-size:14px;
    opacity:.65;
    transform:translateY(1px) rotate(-90deg);
    transition:transform .22s ease, opacity .22s ease;
  }
  #roi:hover .section__head h2::after,
  #roi:focus-within .section__head h2::after{
    transform:translateY(1px) rotate(0deg);
    opacity:1;
  }

  /* optional: Beschreibung unter der Überschrift verstecken */
  #roi .section__head p{
    max-height:0;
    overflow:hidden;
    opacity:0;
    margin:0 !important;
    transition:max-height .25s ease, opacity .25s ease;
  }
  #roi:hover .section__head p,
  #roi:focus-within .section__head p{
    max-height:80px;
    opacity:.85;
    margin-top:6px !important;
  }

  /* Rechner-Card einklappen */
  #roi .card--sub{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-6px);
    padding:0 !important;
    margin-top:0 !important;
    border-width:0 !important;
    box-shadow:none !important;
    transition:max-height .35s ease, opacity .25s ease, transform .25s ease,
               padding .25s ease, margin-top .25s ease, border-width .25s ease, box-shadow .25s ease;
  }
  #roi:hover .card--sub,
  #roi:focus-within .card--sub{
    max-height:2200px;
    opacity:1;
    transform:none;
    padding:18px !important;
    margin-top:14px !important;
    border-width:1px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.35) !important;
  }
}