/* ======================================================
   BLAULICHT DISTRICT – COMPLETE STYLES
   Matches index.html exactly (HUD / Dribbble-style)
====================================================== */

:root{
  --bg:#070A0F;
  --bg2:#090F1A;
  --card:#0B1220;
  --line: rgba(10,132,255,.22);
  --line2: rgba(255,255,255,.08);
  --text:#EAF2FF;
  --muted: rgba(234,242,255,.68);
  --accent:#0A84FF;
  --accent2:#00C2FF;
  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --radius: 18px;
  --radius2: 26px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ============================
   RESET / BASE
============================ */

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  padding-top: 78px;
  margin:0;
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(10,132,255,.18), transparent 60%),
    radial-gradient(1000px 600px at 85% 30%, rgba(0,194,255,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), #05070B 70%);
  overflow-x:hidden;
}

.wrap{
  width:min(1160px, 92vw);
  margin:0 auto;
  position:relative;
  z-index:1;
}

.mono{font-family:var(--mono)}
.small{font-size:.9rem}
.pre{white-space:pre-wrap; margin:10px 0 0}
.mt{margin-top:42px}
.sep{opacity:.45}

/* ============================
   AMBIENT LAYERS
============================ */

.noise{
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:.06;
  pointer-events:none;
  mix-blend-mode: overlay;
  z-index:0;
}

.grid{
  position:fixed; inset:-1px;
  background:
    linear-gradient(to right, rgba(10,132,255,.06) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/48px 48px;
  mask-image: radial-gradient(closest-side at 50% 20%, black 0 55%, transparent 70%);
  pointer-events:none;
  opacity:.35;
  z-index:0;
}

/* ============================
   TYPO
============================ */

.h1{
  margin:14px 0 10px;
  font-size: clamp(2.05rem, 3.6vw, 3.3rem);
  line-height:1.04;
  letter-spacing:-.02em;
}

.h2{
  margin:0;
  font-size: clamp(1.6rem, 2.3vw, 2.1rem);
}

.lead{
  margin:0 0 18px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height:1.6;
}

.sub{
  margin:8px 0 0;
  color: var(--muted);
  line-height:1.6;
}

.fineprint{
  color: rgba(234,242,255,.55);
  font-size:.9rem;
  margin:10px 0 0;
}

.accent{
  background: linear-gradient(90deg, rgba(10,132,255,1), rgba(0,194,255,.9));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
}

/* ============================
   TOPBAR / NAV (keep)
============================ */

.topbar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: rgba(7,10,15,.75);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.topbar__inner{
  display:flex; align-items:center; gap:18px;
  padding: 14px 0;
}

.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  color:var(--text);
}
.brand__logo{
  width:44px; height:44px;
  object-fit:contain;
  filter: drop-shadow(0 8px 18px rgba(10,132,255,.16));
}
.brand__text{
  display:flex;
  flex-direction:column;
  line-height:1;
}
.brand__text strong{letter-spacing:.10em}
.brand__text span{
  opacity:.75;
  font-size:.92rem;
  letter-spacing:.14em;
}

.nav{
  margin-left:auto;
  display:flex; gap:16px;
}
.nav a{
  color: var(--muted);
  text-decoration:none;
  font-size:.95rem;
  padding:10px 12px;
  border-radius: 999px;
  transition: .2s ease;
}
.nav a:hover{
  color: var(--text);
  background: rgba(10,132,255,.10);
  box-shadow: 0 0 0 1px rgba(10,132,255,.22) inset;
}

.topbar__actions{
  display:flex;
  gap:10px;
  align-items:center
}

.lang{
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 10px;
  cursor:pointer;
  transition:.2s ease;
}
.lang:hover{
  border-color: rgba(10,132,255,.35);
  box-shadow: 0 0 0 1px rgba(10,132,255,.18) inset
}
.lang__pill{
  font-family: var(--mono);
  font-size:.85rem;
  letter-spacing:.12em;
}

/* ============================
   BUTTONS
============================ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  text-decoration:none;
  background: rgba(255,255,255,.04);
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  cursor:pointer;
}
.btn:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.btn--primary{
  background: linear-gradient(135deg, rgba(10,132,255,.95), rgba(0,194,255,.65));
  border-color: rgba(10,132,255,.55);
  box-shadow: 0 18px 40px rgba(10,132,255,.18);
}
.btn--primary:hover{
  box-shadow: 0 26px 60px rgba(10,132,255,.22);
}
.btn--ghost{
  background: rgba(0,0,0,.18);
}
.btn--sm{padding:8px 12px; font-size:.95rem}

/* ============================
   BURGER + MOBILE MENU
============================ */

.burger{
  display:none;
  margin-left:auto;
  width:44px; height:44px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  cursor:pointer;
}
.burger span{
  display:block;
  width:18px; height:2px;
  margin: 4px auto;
  background: rgba(234,242,255,.85);
  border-radius: 99px;
}

.mobileMenu{
  display:none;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(7,10,15,.88);
  backdrop-filter: blur(14px);
}
.mobileMenu__inner{
  display:flex; flex-direction:column; gap:10px;
  padding: 14px 4vw 18px;
}
.mobileMenu a{
  color: var(--muted);
  text-decoration:none;
  padding:12px 12px;
  border-radius: 14px
}
.mobileMenu a:hover{
  background: rgba(10,132,255,.10);
  color:var(--text)
}
.mobileMenu.active{display:block}

/* ============================
   TAG / KPI CARDS
============================ */

.tag{
  display:inline-flex;
  gap:10px;
  padding: 8px 12px;
  border-radius:999px;
  border:1px solid rgba(10,132,255,.22);
  background: rgba(10,132,255,.08);
  color: rgba(234,242,255,.88);
  font-family: var(--mono);
  font-size:.86rem;
}

.hero2__kpis{
  display:flex;
  gap:10px;
  margin:18px 0 8px;
  flex-wrap:wrap
}

.kpiCard{
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.kpiCard__num{font-family:var(--mono); font-size:.92rem}
.kpiCard__lbl{display:block; color: var(--muted); font-size:.9rem; margin-top:2px}

/* ============================
   HERO2 (Dribbble HUD)
============================ */

.hero2{
  position:relative;
  z-index:1;
  padding: 48px 0 18px;
}

.hero2__inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items:center;
}

.hero2__lead{max-width: 62ch}

.hero2__cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.hero2__visual{
  position:relative;
  min-height: 460px;
}

/* ============================
   HERO: PRODUCT CARD (VIDEO)
============================ */

.heroProduct{
  position:relative;
  z-index:2;
  width:min(420px, 92%);
  margin: 48px auto 0;
  border-radius: 26px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(11,18,32,.88), rgba(8,12,20,.70));
  box-shadow: var(--shadow);
  overflow:hidden;
}

.heroProduct__media{
  width:100%;
  aspect-ratio: 1 / 1;
  display:block;
  object-fit: cover;
}

.heroTrust{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.18);
}

.heroTrust__item{
  font-family: var(--mono);
  font-size:.78rem;
  letter-spacing:.10em;
  color: rgba(234,242,255,.82);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 6px 10px;
  border-radius: 999px;
}

/* ============================
   FLOATING CTAS
============================ */

.floatCtas{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.floatCtas__btn{
  display:flex;
  align-items:center;
  gap:10px;
  border-radius: 999px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7,10,15,.55);
  backdrop-filter: blur(14px);
  color: var(--text);
  cursor:pointer;
  text-decoration:none;
  transition: .2s ease;
}

.floatCtas__btn:hover{
  border-color: rgba(10,132,255,.35);
  box-shadow: 0 0 0 4px rgba(10,132,255,.10);
  transform: translateY(-1px);
}

.floatCtas__btn--ghost{
  background: rgba(0,0,0,.25);
}

.floatCtas__icon{
  width:28px;
  height:28px;
  border-radius: 999px;
  border:1px solid rgba(10,132,255,.22);
  background: rgba(10,132,255,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}

.floatCtas__badge{
  margin-left: 4px;
  font-family: var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
  padding: 4px 8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: rgba(234,242,255,.70);
}

.hero2__diagonal{
  position:absolute;
  inset:-14% -12%;
  background: linear-gradient(120deg, rgba(10,132,255,.18), transparent 62%);
  transform: skewY(-12deg);
  border-radius: 32px;
  filter: blur(0px);
  opacity:1;
}
.hero2__diagonal--thin{
  opacity:.45;
  filter: blur(24px);
}

.hero2__halo{
  position:absolute;
  inset:-30% -20% -20% -20%;
  background: radial-gradient(closest-side at 60% 40%, rgba(10,132,255,.20), transparent 65%);
  filter: blur(24px);
  pointer-events:none;
  z-index:0;
}

.hudStack{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:14px;
  justify-content:center;
  min-height: 460px;
}

/* ============================
   HUD PANEL
============================ */

.hudPanel{
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(11,18,32,.90), rgba(8,12,20,.78));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.hudPanel__top{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.12);
}
.hudDot{
  width:9px;
  height:9px;
  border-radius:99px;
  background: rgba(255,255,255,.12);
}
.hudTitle{
  margin-left:auto;
  font-family: var(--mono);
  letter-spacing:.14em;
  font-size:.78rem;
  color: rgba(234,242,255,.7);
}
.hudPanel__body{
  padding: 16px 16px 14px;
  position:relative;
}

.scanline{
  position:absolute; inset:0;
  background: linear-gradient(transparent, rgba(10,132,255,.08), transparent);
  transform: translateY(-60%);
  animation: scan 4.2s linear infinite;
  pointer-events:none;
  opacity:.6;
}
@keyframes scan{
  0%{transform: translateY(-80%)}
  100%{transform: translateY(80%)}
}

.hudSteps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
  margin-top: 14px;
}

.hudStep{
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 10px 10px;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
}
.hudStep span:first-child{
  font-family: var(--mono);
  letter-spacing:.14em;
  color: rgba(10,132,255,.95);
}
.hudStep span:last-child{
  color: rgba(234,242,255,.75);
  font-size:.92rem;
}

.inlineBtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  background: transparent;
  border:none;
  padding:0;
  cursor:pointer;
  color: rgba(234,242,255,.88);
  font-family: var(--mono);
  letter-spacing:.06em;
}
.inlineBtn:hover{color: var(--accent2)}

/* ============================
   HUD MINI
============================ */

.hudMini{
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(11,18,32,.80), rgba(8,12,20,.62));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  padding:14px 14px 12px;
  position:relative;
  overflow:hidden;
}
.hudMini__row{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-start;
  margin-bottom:10px;
}
.hudMini__label{
  color: rgba(234,242,255,.72);
  letter-spacing:.12em;
  font-size:.82rem;
}
.hudMini__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.hudMini__cell{
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding:10px;
  text-align:center;
}
.hudMini__num{
  font-family: var(--mono);
  letter-spacing:.14em;
  color: rgba(10,132,255,.95);
}
.hudMini__txt{
  font-size:.85rem;
  color: var(--muted);
  margin-top:4px;
}
.hudMini__bar{
  margin-top:12px;
  height:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(90deg, rgba(10,132,255,.75), rgba(0,194,255,.35));
  opacity:.65;
}

/* ============================
   SECTIONS
============================ */

.section,
.section2{padding: 70px 0; position:relative; z-index:1}

.section--alt{
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(10,132,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.0));
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.section__head{margin-bottom: 18px}

/* ============================
   CAROUSEL / BIG CARDS
============================ */

.carousel{position:relative}

.carousel__track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding: 8px 2px 12px;
}
.carousel__track::-webkit-scrollbar{display:none}

.bigCard{
  min-width: 320px;
  max-width: 360px;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  position:relative;
}
.bigCard:hover{
  border-color: rgba(10,132,255,.26);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  transform: translateY(-2px);
}

.bigCard__media{position:relative; height:220px}
.bigCard__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.001);
  transition: transform .35s ease, filter .35s ease;
  filter: contrast(1.05) saturate(1.05);
}
.bigCard:hover .bigCard__media img{transform: scale(1.045)}

.bigCard__overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.78));
  pointer-events: none;
}


.bigCard__hud{
  position:absolute;
  left:12px;
  bottom:12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.bigCard__tag{
  font-family: var(--mono);
  letter-spacing:.14em;
  font-size:.82rem;
}
.bigCard__tag2{
  font-family: var(--mono);
  letter-spacing:.10em;
  font-size:.74rem;
  color: rgba(234,242,255,.72);
}

.bigCard__body{padding:14px}
.bigCard__body h3{margin:6px 0 6px}
.bigCard__body p{margin:0; color:var(--muted); line-height:1.6}

.bigCard__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 12px;
}

.bigCard__actions{
  display:flex;
  gap:10px;
  margin-top: 14px;
}

.carousel__controls{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top: 10px;
}

.cBtn{
  width:44px; height:44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--text);
  cursor:pointer;
  transition:.2s ease;
}
.cBtn:hover{
  border-color: rgba(10,132,255,.35);
  box-shadow: 0 0 0 4px rgba(10,132,255,.10);
  transform: translateY(-1px);
}

/* ============================
   CHIPS
============================ */

.chip{
  font-family: var(--mono);
  font-size:.78rem;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(234,242,255,.80);
}
.chip--live{
  border-color: rgba(10,132,255,.26);
  background: rgba(10,132,255,.10);
}

/* ============================
   STEPS
============================ */

.steps{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.step{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 14px;
  display:flex;
  gap: 12px;
}
.step__num{
  font-family: var(--mono);
  font-size: 1.1rem;
  color: rgba(10,132,255,.95);
  width: 44px; height: 44px;
  border-radius: 14px;
  border:1px solid rgba(10,132,255,.22);
  background: rgba(10,132,255,.08);
  display:flex; align-items:center; justify-content:center;
}
.step__body h3{margin:2px 0 6px}
.step__body p{margin:0; color: var(--muted); line-height:1.6}

/* ============================
   TABLE
============================ */

.tableWrap{
  margin-top: 16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.table{
  width:100%;
  border-collapse: collapse;
  background: rgba(0,0,0,.18);
}
.table th, .table td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align:left;
}
.table th{
  font-family: var(--mono);
  letter-spacing:.12em;
  font-size:.82rem;
  color: rgba(234,242,255,.78);
  background: rgba(255,255,255,.03);
}
.table td{color: rgba(234,242,255,.78)}
.table tr:hover td{background: rgba(10,132,255,.05)}

/* ============================
   LOGOS
============================ */

.logoRow{
  display:grid;
  grid-template-columns: repeat(5,1fr);
  gap:14px;
  margin-top:14px;
}
.logoPh{
  height:64px;
  border-radius: 12px;
  border:1px dashed rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
}

/* ============================
   SECTION NOTES / TRUST / CONTACT
============================ */

.sectionNote{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 18px;
}

.sectionNote__card{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 14px;
}

.sectionNote__title{
  font-family: var(--mono);
  letter-spacing:.12em;
  color: rgba(234,242,255,.86);
}

.sectionNote__text{
  margin: 8px 0 0;
  color: var(--muted);
  line-height:1.6;
}

.centerCta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top: 18px;
}

.trustGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 12px;
}

.trustCard{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 14px;
}

.trustCard__title{
  font-family: var(--mono);
  letter-spacing:.12em;
  margin-bottom: 10px;
}

.reviewList{display:flex; flex-direction:column; gap:10px}

.review{
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  padding: 12px;
}
.review__stars{font-family:var(--mono); letter-spacing:.12em}
.review__text{margin-top:8px; color:rgba(234,242,255,.78); line-height:1.6}
.review__src{margin-top:8px; color:rgba(234,242,255,.55); font-size:.9rem}

.socialRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}

.contactGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items:start;
}

.contactPanel{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 14px;
}

.contactPanel__title{
  font-family: var(--mono);
  letter-spacing:.12em;
  margin-bottom: 8px;
}

.checkList{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(234,242,255,.78);
}
.checkList li{margin:8px 0; line-height:1.5}

/* ============================
   ACCORDION / FAQ
============================ */

.accordion{max-width: 860px}

.acc{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px 16px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor:pointer;
  margin-bottom:10px;
  transition:.2s ease;
}
.acc:hover{
  border-color: rgba(10,132,255,.28);
  background: rgba(10,132,255,.06);
}
.acc__icon{font-size:1.2rem}
.acc__panel{
  padding: 12px 16px 18px;
  margin-top:-6px;
  margin-bottom:10px;
  border-radius: 0 0 14px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-top:none;
  background: rgba(0,0,0,.18);
  color: var(--muted);
}

/* ============================
   MODAL (Assistant)
============================ */

.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:100;
}
.modal.active{display:block}

.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
}

.modal__panel{
  position:relative;
  margin: 5vh auto;
  width:min(1060px, 92vw);
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(11,18,32,.92), rgba(8,12,20,.82));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.modal__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.18);
}
.modal__title{
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:.12em;
}
.modal__close{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(234,242,255,.95);
  cursor:pointer;
  transition:.2s ease;
  font-size:22px;
  line-height:1;
}
.modal__close:hover{
  border-color: rgba(10,132,255,.32);
  box-shadow: 0 0 0 4px rgba(10,132,255,.10);
}

.modal__body{padding:14px}

.modal__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items:start;
}

.modal__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-top:1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.18);
}

.modal__hint{
  margin-top:10px;
  padding: 10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(234,242,255,.70);
}

/* Anfrage Modal responsive begrenzen */
.assistantModal,
.modal,
.requestModal {
  max-height: 90vh;
  overflow-y: auto;
}

/* Laptop Optimierung */
@media (max-height: 800px) {
  .assistantModal,
  .modal,
  .requestModal {
    max-height: 85vh;
  }
}

/* ============================
   ASSISTANT FORM (inside modal)
============================ */

.label{
  display:block;
  margin: 10px 0 8px;
  color: rgba(234,242,255,.78);
  font-family: var(--mono);
  letter-spacing:.08em;
  font-size:.82rem
}

.input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline:none;
}
.input:focus{
  border-color: rgba(10,132,255,.35);
  box-shadow: 0 0 0 4px rgba(10,132,255,.10)
}

.fieldGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.fieldGrid .full{grid-column: 1 / -1}

.assistant__actions{
  display:flex;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}

.preview{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.preview__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.preview__title{
  font-family: var(--mono);
  letter-spacing:.12em;
  font-size:.85rem;
}
.preview__box{
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.35);
  padding: 12px;
  min-height:140px;
}

.mini{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:10px;
}
.mini__kpi{
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 10px;
  text-align:center;
}
.mini__num{
  font-family: var(--mono);
  color: var(--accent);
  letter-spacing:.14em;
}
.mini__lbl{
  font-size:.85rem;
  color: var(--muted);
  margin-top:4px;
}

.contactBox{
  border-radius: 14px;
  border:1px solid rgba(10,132,255,.22);
  background: rgba(10,132,255,.08);
  padding: 12px;
  margin-top:12px;
}
.contactBox__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* Dropdown Dark Mode Fix */
select {
  background-color: #0B1220;
  color: #EAF2FF;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Optionen im Dropdown */
select option {
  background-color: #0B1220;
  color: #EAF2FF;
}

select:focus {
  outline: none;
  border-color: rgba(10,132,255,.5);
  box-shadow: 0 0 0 2px rgba(10,132,255,.15);
}


/* ============================
   FOOTER
============================ */

.footer{
  border-top: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
  padding: 36px 0 18px;
  position:relative;
  z-index:1;
}

.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:20px;
  align-items:center;
}

.footer__brand{
  display:flex;
  gap:12px;
  align-items:center;
}
.footer__logo{
  filter: drop-shadow(0 6px 16px rgba(10,132,255,.18));
}

.footer__links{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footer__links a{
  color: var(--muted);
  text-decoration:none;
}
.footer__links a:hover{color: var(--accent2)}

.footer__legal{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.footer__bottom{
  margin-top:22px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;
  justify-content:center;
  gap:8px;
  color: rgba(234,242,255,.55);
}

/* ============================
   INTERACTIONS (Tilt / Reveal)
============================ */

.tilt{
  transform-style: preserve-3d;
  will-change: transform;
}

[data-reveal]{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
.revealed{
  opacity:1;
  transform: translateY(0);
}

/* ============================
   RESPONSIVE
============================ */

@media (max-width: 1024px){
  .hero2__inner{grid-template-columns: 1fr}
  .hero2__visual{min-height:unset}
  .hudStack{min-height:unset}

  .modal__grid{grid-template-columns: 1fr}

  .footer__grid{
    grid-template-columns: 1fr;
    text-align:center;
  }
  .footer__brand{justify-content:center}

  .trustGrid{grid-template-columns: 1fr}
  .contactGrid{grid-template-columns: 1fr}
  .sectionNote{grid-template-columns: 1fr}
}

@media (max-width: 720px){
  .nav{display:none}
  .burger{display:block}

  .hero2__cta{flex-direction:column; align-items:stretch}
  .hero2__kpis{flex-direction:column}

  .hudSteps{grid-template-columns: repeat(2, 1fr)}

  .logoRow{grid-template-columns: repeat(2,1fr)}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1; transform:none; transition:none}
  .scanline{animation:none}
}

/* ============================
   LANGUAGE SPLASH SCREEN
============================ */

.langSplash{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}

.langSplash__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.35;
}

.langSplash__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, rgba(10,132,255,.35), rgba(0,0,0,.9));
}

.langSplash__content{
  position:relative;
  z-index:2;
  text-align:center;
}

.langSplash__logo{
  width:120px;
  margin-bottom:18px;
  filter: drop-shadow(0 10px 30px rgba(10,132,255,.4));
}

.langSplash h1{
  margin:0;
  font-size:2.2rem;
  letter-spacing:.12em;
}

.langSplash p{
  color:rgba(234,242,255,.7);
  margin:10px 0 24px;
}

.langSplash__buttons{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

.langSplash__buttons button{
  padding:14px 26px;
  font-size:1rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(10,132,255,.15);
  color:white;
  cursor:pointer;
  backdrop-filter: blur(6px);
  transition:.25s ease;
}

.langSplash__buttons button:hover{
  transform: translateY(-2px);
  background:rgba(10,132,255,.35);
  box-shadow:0 0 30px rgba(10,132,255,.4);
}

.langSwitch{
  position:relative;
}

#langToggleBtn{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.05);
  color:white;
  cursor:pointer;
}

.langMenu{
  position:absolute;
  top:110%;
  right:0;
  background:#0B1220;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  overflow:hidden;
  display:none;
  min-width:140px;
}

.langMenu div{
  padding:10px 14px;
  cursor:pointer;
}

.langMenu div:hover{
  background:rgba(10,132,255,.15);
}

.langSwitch:hover .langMenu{
  display:block;
}

.langSplash.hide{
  opacity:0;
  pointer-events:none;
  transition:.6s ease;
}


/* ============================
   ABOUT SECTION
============================ */

.aboutGrid{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 18px;
  align-items:center;
  margin-top: 16px;
}

.aboutMedia{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  box-shadow: var(--shadow);
}

.aboutMedia img {
  width: 100%;
  height: auto;
  object-fit: contain;
}


.aboutBody{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 16px;
}

.aboutText{
  margin: 0 0 12px;
  color: var(--muted);
  line-height:1.7;
}

.aboutBadges{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  margin-top: 6px;
}

.aboutCta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 14px;
}

/* ============================
   TRUST SIMPLE
============================ */

.trustSimple__card{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 16px;
}

.trustSimple__title{
  margin: 0 0 6px;
  font-size: 1.1rem;
  letter-spacing: .02em;
}

/* ============================
   HERO SLIDER — OVERRIDE
   (Bilder füllen Box, Pfeile klickbar, Fade links/rechts)
============================ */

/* Wichtig: Deko darf keine Klicks klauen */
.hero2__diagonal,
.hero2__halo {
  pointer-events: none;
}

/* Die Produkt-Box (dein vorhandener Container) */
.heroProduct {
  position: relative;
  overflow: hidden;
}

/* Slider-Wrapper = sichtbare Box */
.hero-slider-wrapper {
  position: relative;
  width: 100%;
  height: 420px;            /* ggf. anpassen */
  border-radius: 26px;      /* passend zu heroProduct */
  overflow: hidden;         /* wichtig: Box-Cut + Fade */
  isolation: isolate;       /* sauberes z-index stacking */
}

/* Fade links/rechts (liegt ÜBER den Slides, aber UNTER den Pfeilen) */
.hero-slider-wrapper::before,
.hero-slider-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  width: 110px;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

.hero-slider-wrapper::before {
  left: 0;
  background: linear-gradient(to right, rgba(6,12,25,0.95), rgba(6,12,25,0));
}

.hero-slider-wrapper::after {
  right: 0;
  background: linear-gradient(to left, rgba(6,12,25,0.95), rgba(6,12,25,0));
}

/* Slider-Fläche */
.hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Slides als Stack (active/prev/next via JS-Klassen) */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(0) scale(0.78);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
  border-radius: 22px;
  overflow: hidden;
  z-index: 1;
}

/* Bild füllt die Box komplett */
.hero-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Active */
.hero-slide.active {
  opacity: 1;
  transform: translateX(0) scale(1);
  z-index: 3;
}

/* Preview links/rechts direkt “hintereinander” */
.hero-slide.prev {
  opacity: 0.55;
  transform: translateX(-62%) scale(0.88);
  z-index: 2;
}

.hero-slide.next {
  opacity: 0.55;
  transform: translateX(62%) scale(0.88);
  z-index: 2;
}

/* Pfeile: im Sichtfeld + IMMER klickbar */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 22px;
  cursor: pointer;

  z-index: 20;              /* über Fade-Mask */
  pointer-events: auto;     /* klickbar */

  display: grid;
  place-items: center;
  backdrop-filter: blur(10px);
}

.hero-arrow:hover {
  background: rgba(10,132,255,0.85);
}

.hero-arrow--left  { left: 14px; }
.hero-arrow--right { right: 14px; }

/* Mobile */
@media (max-width: 768px) {
  .hero-slider-wrapper { height: 340px; }
  .hero-slider-wrapper::before,
  .hero-slider-wrapper::after { width: 70px; }

  .hero-slide.prev { transform: translateX(-70%) scale(0.86); }
  .hero-slide.next { transform: translateX(70%) scale(0.86); }
}

.topbar-trust{
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:center;
  font-size:.82rem;
  padding:6px 0;
  background: rgba(7,10,15,.85);
  border-bottom:1px solid rgba(255,255,255,.05);
  font-family: var(--mono);
}

.topbar-trust span{
  color: rgba(234,242,255,.75);
  white-space:nowrap;
}

.refModal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}

.refModal.active{
  display:block;
}

.refModal__bg{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.8);
}

.refModal__box{
  position:relative;
  max-width:720px;
  margin:6vh auto;
  background:#05070b;
  border-radius:18px;
  padding:20px;
}

.refCarousel{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.refCarousel img{
  max-width:100%;
  max-height:70vh;
  border-radius:12px;
}

.refArrow{
  font-size:30px;
  background:none;
  border:none;
  color:white;
  cursor:pointer;
}

.refClose{
  position:absolute;
  top:10px;
  right:14px;
  background:none;
  border:none;
  color:white;
  font-size:18px;
  cursor:pointer;
}

.services-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:20px;
}

/* Mobile */
@media (max-width: 820px){
  .services-grid{
    grid-template-columns: 1fr;
  }
}

/* ============================
   SERVICES GRID 2x2 (1160px Layout)
============================ */

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* BigCards dürfen nicht mehr carousel-breit sein */
.bigCard {
  min-width: 0;
  max-width: none;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.bigCard__body {
  flex: 1;
}

.bigCard:hover {
  transform: translateY(-1px);
}

/* Mobile: 1 Spalte */
@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

.footer a{
  color: #ffffff;
  text-decoration: none;
}

.footer a:hover{
  color: #ffffff;
  text-decoration: underline;
}

/* =========================
   GALLERY LIGHTBOX (FIXED SIZE)
========================= */

.galleryModal{
  position: fixed;
  inset: 0;
  background: rgba(5,8,14,.88);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  pointer-events: none;
}

.galleryModal.active{
  display: flex;
  pointer-events: auto;
}

.galleryBackdrop{
  position:absolute;
  inset:0;
}

/* Container */

.galleryContent{
  position: relative;
  width: min(560px, 90vw);
  background: linear-gradient(180deg, rgba(11,18,32,.92), rgba(7,10,18,.9));
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 90px rgba(0,0,0,.65);
  padding: 18px;
}

/* Image */

.galleryContent img{
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 16px;
  background: #05080f;
}

/* Close Button */

.galleryClose{
  position:absolute;
  top:-14px;
  right:-14px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:none;
  background: linear-gradient(135deg, #0A84FF, #00C2FF);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  box-shadow: 0 8px 20px rgba(10,132,255,.4);
}

/* Navigation */

.galleryNav{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}

.galleryNav button{
  pointer-events:auto;
  width:44px;
  height:44px;
  border-radius:50%;
  border:none;
  background: rgba(0,0,0,.55);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  margin: 0 -20px;
  backdrop-filter: blur(6px);
}

/* ============================
   INSTAGRAM GRID – REFERENZEN
============================ */

.insta-grid{
  margin-top: 26px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.insta-grid iframe,
.insta-grid img{
  border-radius: 14px;
}

.insta-cta{
  margin-top: 14px;
  text-align: center;
}

/* ============================
   TRUST REVIEWS
============================ */

.trustReviews {
  margin-top: 40px;
}

.reviewsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.reviewCard {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  transition: .2s ease;
}

.reviewCard:hover {
  border-color: rgba(10,132,255,.35);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  transform: translateY(-2px);
}

.reviewAvatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(10,132,255,.35);
}

.reviewBody strong {
  font-size: .95rem;
  letter-spacing: .02em;
}

.reviewStars {
  font-size: .85rem;
  letter-spacing: 2px;
  color: #FFD04A;
  margin: 2px 0 4px;
}

.reviewBody p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

/* ===========================
   MOBILE OPTIMIERUNG
=========================== */

@media (max-width: 768px) {

  /* Trust-Leiste über Navbar ausblenden */
  .topbar-trust {
    display: none;
  }

  /* Floating Buttons ausblenden */
  .floatCtas {
    display: none;
  }

  /* About: Bild zuerst */
  .aboutGrid {
    grid-template-columns: 1fr;
  }

  .aboutMedia {
    order: 1;
  }

  .aboutBody {
    order: 2;
  }

  /* Ablauf untereinander */
  .hudSteps {
    grid-template-columns: 1fr;
  }

  /* Produktdaten untereinander */
  .hudMini__grid {
    grid-template-columns: 1fr;
  }

  /* Hero mobil optimieren */
  .hero2__inner {
    grid-template-columns: 1fr;
  }

  .hero2__visual {
    margin-top: 24px;
  }

}

@media (max-width: 768px) {

  /* Trust-Leiste aus */
  .topbar-trust {
    display: none;
  }

  /* Floating Buttons aus */
  .floatCtas {
    display: none;
  }

  /* ABOUT: Bild zuerst */
  .aboutGrid {
    grid-template-columns: 1fr;
  }

  .aboutMedia {
    order: 1;
  }

  .aboutBody {
    order: 2;
  }

  /* Ablauf HUD Panel */
  .hudSteps {
    grid-template-columns: 1fr !important;
  }

  /* Ablauf Hauptbereich */
  .steps,
  .stepGrid {
    grid-template-columns: 1fr !important;
  }

  /* Hero mobil */
  .hero2__inner {
    grid-template-columns: 1fr;
  }

  .hero2__visual {
    margin-top: 24px;
  }

  /* Produkt Tabelle mobil optimieren */

  .tableGrid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .tableRow {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
  }

  .tableCell {
    width: 100%;
    padding: 0;
  }

}

/* ===========================
   MOBILE: TABLE -> CARDS
=========================== */
@media (max-width: 768px){

  /* Table Wrapper darf nicht clippen, sonst sehen Cards komisch aus */
  .tableWrap{
    overflow: visible;
    border: 0;
    background: transparent;
  }

  /* Tabellen-Header ausblenden */
  .table thead{
    display: none;
  }

  /* Table / Body / Row auf Block umstellen */
  .table,
  .table tbody,
  .table tr,
  .table td{
    display: block;
    width: 100%;
  }

  /* Jede Zeile = Card */
  .table tr{
    margin: 0 0 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    overflow: hidden;
  }

  /* Zellen: 2-Spalten Layout (Label links, Wert rechts) */
  .table td{
    position: relative;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    text-align: left;
    padding-left: 44%;
    min-height: 42px;
  }

  .table tr td:last-child{
    border-bottom: 0;
  }

  /* Label links */
  .table td::before{
    position: absolute;
    left: 12px;
    top: 10px;
    width: 38%;
    font-family: var(--mono);
    letter-spacing: .10em;
    font-size: .78rem;
    color: rgba(234,242,255,.65);
    content: "";
  }

  /* 1. Zeile: Produkt etwas “wichtiger” */
  .table td:first-child{
    padding-left: 12px;            /* Produkt = volle Breite */
    font-family: var(--mono);
    letter-spacing: .04em;
    color: rgba(234,242,255,.92);
    background: rgba(0,0,0,.18);
  }
  .table td:first-child::before{
    content: "Produkt";
    position: static;
    display: block;
    margin-bottom: 6px;
    width: auto;
    color: rgba(234,242,255,.65);
  }

  /* Labels DE */
  .table td:nth-child(2)::before{ content: "ab Preis"; }
  .table td:nth-child(3)::before{ content: "MOQ"; }
  .table td:nth-child(4)::before{ content: "Produktion"; }

  /* Labels EN (dein JS setzt <html lang="en">) */
  html[lang="en"] .table td:first-child::before{ content: "Product"; }
  html[lang="en"] .table td:nth-child(2)::before{ content: "from"; }
  html[lang="en"] .table td:nth-child(3)::before{ content: "MOQ"; }
  html[lang="en"] .table td:nth-child(4)::before{ content: "Lead time"; }
}