/* ══════════════════════════════════════════════════════
   LUX — zentrales Designsystem (Variante webpage2)
   Luxury-Inszenierung: Schwarz, Raum, langsame Bewegung.
   Wird NACH shared.css + comsec.css geladen.
   Alle Stellgrößen als CSS-Variablen → zentral triggerbar.
══════════════════════════════════════════════════════ */
:root{
  /* Typo-Tokens (elegant: Inter Light für Display) */
  --lx-display-weight:300;
  --lx-display-strong:600;
  --lx-h1:clamp(42px,5.6vw,88px);
  --lx-h2:clamp(30px,3.6vw,54px);
  --lx-line:clamp(30px,4.4vw,64px);
  --lx-num:clamp(56px,6.4vw,104px);
  --lx-body:16.5px;
  --lx-body-lh:1.9;
  --lx-kicker-size:11px;
  --lx-kicker-ls:4.5px;
  /* Flächen & Farben */
  --lx-bg:#04070c;
  --lx-fg:#eef2f7;
  --lx-muted:rgba(238,242,247,.7);   /* TXT 260720: war .62 */
  --lx-faint:rgba(238,242,247,.68);  /* TXT 260720: war .5 */
  --lx-hair:rgba(238,242,247,.08);
  /* Akzent (Brand-Theme; Consulting-Theme s. LUX-SKIN unten) */
  --lx-accent:var(--icsl,#00aee6);
  --lx-accent-rgb:0,174,230;
  --lx-accent-hover:#009ed0;
  --lx-hero-glow:#0a1626;
  /* Bewegung */
  --lx-ease:cubic-bezier(.16,.6,.2,1);
  --lx-dur:1.1s;
}

.lx{background:var(--lx-bg);color:var(--lx-fg);overflow-x:hidden;}
.lx-wrap{max-width:1200px;margin:0 auto;padding:0 40px;}
.lx-hairline{position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--lx-accent-rgb),.35),transparent);}

/* Reveals: langsam & edel (Blur → scharf) */
.lxr{opacity:0;transform:translateY(26px);transition:opacity var(--lx-dur) var(--lx-ease),transform var(--lx-dur) var(--lx-ease);}
.lxr.in{opacity:1;transform:none;}
.lxr.d1{transition-delay:.15s;}.lxr.d2{transition-delay:.3s;}.lxr.d3{transition-delay:.45s;}
.lxb{opacity:0;filter:blur(10px);transform:translateY(14px);transition:opacity 1.3s ease,filter 1.3s ease,transform 1.3s ease;}
.lxb.in{opacity:1;filter:blur(0);transform:none;}

.lx-kicker{display:inline-flex;align-items:center;gap:14px;font-size:var(--lx-kicker-size);font-weight:600;letter-spacing:var(--lx-kicker-ls);text-transform:uppercase;color:var(--lx-faint);}
.lx-kicker::before{content:'';display:inline-block;width:26px;height:1px;background:var(--lx-accent);flex:none;}

/* ── BUTTONS (an Site-Konvention angeglichen: --radius-btn) ── */
.lx-btns{margin-top:44px;display:flex;gap:16px;flex-wrap:wrap;}
.lx-btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 32px;border:1.5px solid rgba(238,242,247,.22);border-radius:var(--radius-btn,4px);background:transparent;color:var(--lx-fg);font-family:inherit;font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:border-color .3s,background .3s,color .3s;}
.lx-btn:hover{border-color:rgba(var(--lx-accent-rgb),.7);background:rgba(var(--lx-accent-rgb),.08);}
.lx-btn-p{background:var(--lx-accent);border-color:var(--lx-accent);color:#fff;}
.lx-btn-p:hover{background:var(--lx-accent-hover);border-color:var(--lx-accent-hover);color:#fff;}

/* ── ENTRANCE ── */
.lx-hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  background:radial-gradient(1200px 700px at 75% 30%,var(--lx-hero-glow) 0%,#04070c 60%);}
.lx-spot{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px circle at var(--mx,72%) var(--my,38%),rgba(var(--lx-accent-rgb),.11),transparent 65%);}
.lx-hero-in{position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%;padding:120px 40px 100px;display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center;}
.lx-hero-copy h1{font-size:var(--lx-h1);font-weight:var(--lx-display-weight);letter-spacing:-.015em;line-height:1.04;margin:26px 0 0;}
.lx-hero-copy h1 b{font-weight:700;color:var(--lx-accent);}
.lx-sub{margin-top:30px;font-size:clamp(16px,1.4vw,19px);font-weight:300;line-height:1.85;color:rgba(238,242,247,.66);max-width:540px;}
.lx-hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:520px;}
.lx-ring{position:absolute;top:50%;left:50%;width:340px;height:340px;border:1px solid rgba(var(--lx-accent-rgb),.28);border-radius:50%;transform:translate(-50%,-50%);animation:lxPulse 6s ease-out infinite;}
.lx-ring.l2{animation-delay:3s;}
@keyframes lxPulse{0%{opacity:.6;transform:translate(-50%,-50%) scale(.7);}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8);}}
/* Kreise deaktiviert (Ludwig 07.07.: zu viel Animation — weder Desktop noch Mobil) */
.lx-hero-visual .lx-ring{display:none;}

/* Partikel-Reveal (GIF-Nebel bleibt · Hover = Durchblick an Mausposition · Klick = echtes Bild) */
.lx-reveal{position:relative;z-index:2;width:min(420px,86vw);aspect-ratio:560/700;animation:lxFloat 9s ease-in-out infinite;cursor:pointer;isolation:isolate;}
.lx-reveal img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none;}
.lx-gif{z-index:1;opacity:.96;
  filter:drop-shadow(0 0 9px rgba(175,200,255,.42)) drop-shadow(0 0 24px rgba(120,155,255,.22));
  transition:opacity .85s var(--lx-ease),filter .85s var(--lx-ease);}
.lx-real{z-index:2;opacity:0;transform:scale(.985);
  filter:blur(12px) brightness(.78) saturate(.82) drop-shadow(0 40px 80px rgba(0,0,0,.7));
  transition:opacity .9s var(--lx-ease),transform .9s var(--lx-ease),filter .9s var(--lx-ease);}
/* Hover-Peek: nur ein kreisrunder Ausschnitt des echten Bilds folgt der Maus */
.lx-reveal.lx-peek:not(.is-real) .lx-real{opacity:1;transform:scale(1);
  transition:opacity .25s ease;
  filter:blur(0) brightness(.8) saturate(.88) drop-shadow(0 40px 80px rgba(0,0,0,.7));
  -webkit-mask-image:radial-gradient(circle 120px at var(--rx,50%) var(--ry,50%),#000 0%,#000 55%,transparent 100%);
  mask-image:radial-gradient(circle 120px at var(--rx,50%) var(--ry,50%),#000 0%,#000 55%,transparent 100%);}
/* Klick: volles Bild — abgedunkelt (Shadow-Look), bleibt in der dunklen Szene */
.lx-reveal.is-real .lx-real{opacity:1;transform:scale(1);
  filter:blur(0) brightness(.8) saturate(.88) drop-shadow(0 40px 80px rgba(0,0,0,.7)) drop-shadow(0 0 60px rgba(var(--lx-accent-rgb),.12));}
.lx-reveal.is-real::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 0%,transparent 55%,rgba(4,7,12,.35) 100%);}
.lx-reveal.is-real .lx-gif{opacity:.16;
  filter:drop-shadow(0 0 16px rgba(175,200,255,.35)) drop-shadow(0 0 38px rgba(120,155,255,.18));}
/* iOS/Touch-Fix: schwere Filterketten (Blur + grosse drop-shadows) lassen Safari das Bild
   als graue Flaeche rendern (GPU-Limit). Auf Touch-Geraeten: nur Opacity-Fade, keine Filter. */
@media (hover:none){
  .lx-real{filter:none;transform:none;transition:opacity .6s ease;}
  .lx-reveal.is-real .lx-real{filter:none;transform:none;}
  .lx-reveal.lx-peek:not(.is-real) .lx-real{filter:none;}
  .lx-reveal.is-real .lx-gif{filter:none;}
}

/* Fallback ohne GIF: einfaches Produktbild */
.lx-phone{position:relative;z-index:2;width:min(240px,58vw);filter:drop-shadow(0 40px 80px rgba(0,0,0,.7)) drop-shadow(0 0 60px rgba(var(--lx-accent-rgb),.12));animation:lxFloat 9s ease-in-out infinite;}
@keyframes lxFloat{0%,100%{transform:translateY(0) rotate(-.8deg);}50%{transform:translateY(-16px) rotate(.8deg);}}

/* ── MANIFESTO ── */
.lx-mani{padding:190px 0 150px;}
.lx-line{font-size:var(--lx-line);font-weight:var(--lx-display-weight);letter-spacing:-.01em;line-height:1.15;color:rgba(238,242,247,.3);max-width:22ch;}
.lx-line strong{font-weight:var(--lx-display-strong);color:var(--lx-fg);}
.lx-line + .lx-line{margin-top:44px;}
.lx-line.accent strong{color:var(--lx-accent);}
.lx-mani-out{margin-top:70px;font-size:16px;font-weight:300;line-height:1.9;color:rgba(238,242,247,.55);max-width:560px;}

/* ── SPECS ── */
.lx-specs{border-top:1px solid var(--lx-hair);border-bottom:1px solid var(--lx-hair);padding:90px 0;}
.lx-spec-grid{margin-top:54px;display:grid;grid-template-columns:repeat(4,1fr);gap:40px 30px;}
.lx-num{font-size:var(--lx-num);font-weight:300;letter-spacing:-.03em;line-height:1;color:#fff;}
.lx-num i{font-style:normal;color:var(--lx-accent);font-weight:300;}
.lx-unit{display:block;margin-top:6px;font-size:13px;font-weight:600;letter-spacing:2.6px;text-transform:uppercase;color:var(--lx-accent);}
.lx-spec-l{display:block;margin-top:14px;font-size:13.5px;font-weight:300;line-height:1.6;color:var(--lx-faint);max-width:24ch;}

/* ── ACTS ── */
.lx-act{padding:150px 0;}
.lx-act-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center;}
.lx-h{font-size:var(--lx-h2);font-weight:var(--lx-display-weight);letter-spacing:-.012em;line-height:1.15;margin:22px 0 0;}
.lx-p{margin-top:26px;font-size:var(--lx-body);font-weight:300;line-height:var(--lx-body-lh);color:var(--lx-muted);max-width:520px;}
.lx-act-visual{display:flex;justify-content:center;}
.lx-act-visual img{width:min(300px,70vw);height:auto;filter:drop-shadow(0 40px 70px rgba(0,0,0,.6));}
.lx-act-grid.rev .lx-act-copy{order:1;}

/* Video-Act */
.lx-video{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;}
.lx-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.3);}
.lx-video-shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(4,7,12,.92) 10%,rgba(4,7,12,.45) 70%,rgba(4,7,12,.2));}
.lx-video-copy{position:relative;z-index:2;padding-top:80px;padding-bottom:80px;}
.lx-video-copy .lx-h{max-width:16ch;}

/* Porzellan-Act */
.lx-light{background:#f4f3f0;color:#0e1319;}
.lx-light .lx-kicker{color:rgba(14,19,25,.5);}
.lx-light .lx-p{color:rgba(14,19,25,.62);}
.lx-light .lx-act-visual img{filter:none;}
.lx-exec{width:min(380px,80vw)!important;}

/* ── FAKTEN: Auf einen Blick (Glance) ── */
.lx-facts{padding:140px 0 60px;border-top:1px solid var(--lx-hair);}
.lx-facts-head{max-width:640px;}
.lx-glance{margin-top:70px;display:grid;grid-template-columns:repeat(3,1fr);gap:56px 44px;}
.lx-gi h4{margin:0;font-size:16px;font-weight:600;letter-spacing:.2px;color:var(--lx-fg);display:flex;align-items:center;gap:12px;}
.lx-gi h4 svg{width:18px;height:18px;color:var(--lx-accent);flex:none;}
.lx-gi p{margin:12px 0 0;font-size:14.5px;font-weight:300;line-height:1.75;color:var(--lx-faint);}

/* ── FAKTEN: Leistungsumfang + Compare-Box ── */
.lx-detail{padding:110px 0 140px;}
.lx-detail-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:start;}
.lx-list{list-style:none;margin:36px 0 0;padding:0;}
.lx-list li{position:relative;padding:13px 0 13px 34px;font-size:15px;font-weight:300;line-height:1.65;color:rgba(238,242,247,.75);border-bottom:1px solid var(--lx-hair);}
.lx-list li:last-child{border-bottom:none;}
.lx-list li::before{content:'✓';position:absolute;left:2px;top:13px;color:var(--lx-accent);font-weight:600;}
.lx-cbox{position:relative;border:1px solid rgba(var(--lx-accent-rgb),.25);border-radius:var(--radius-card,2px);padding:40px 36px;
  background:linear-gradient(160deg,rgba(var(--lx-accent-rgb),.06),rgba(var(--lx-accent-rgb),.015) 55%),rgba(255,255,255,.015);
  box-shadow:0 30px 90px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);}
.lx-cbox::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--lx-accent-rgb),.6),transparent);}
.lx-cbox h3{margin:0;font-size:20px;font-weight:600;letter-spacing:.2px;color:var(--lx-fg);}
.lx-cbox ul{list-style:none;margin:26px 0 0;padding:0;}
.lx-cbox li{display:flex;gap:12px;padding:9px 0;font-size:14px;font-weight:300;line-height:1.6;color:rgba(238,242,247,.7);}
.lx-cbox li .ci{color:var(--lx-accent);flex:none;font-weight:600;}

/* Cbox: Fließtext (z. B. Unterschieds-Erklärungen) + Stapelbarkeit */
.lx-cbox p{margin:18px 0 0;font-size:14px;font-weight:300;line-height:1.75;color:rgba(238,242,247,.7);}
.lx-cbox+.lx-cbox{margin-top:26px;}

/* Ausbaustufen / Tier-Karten (On-Premise) */
.lx-tiers{margin-top:70px;display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.lx-tier-badge{display:inline-block;font-size:10px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:var(--lx-accent);border:1px solid rgba(var(--lx-accent-rgb),.4);padding:4px 10px;border-radius:3px;margin-bottom:18px;}
.lx-badge{display:inline-block;margin-left:10px;font-size:9.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--lx-accent);border:1px solid rgba(var(--lx-accent-rgb),.4);padding:3px 8px;border-radius:3px;vertical-align:middle;}
@media(max-width:1068px){.lx-tiers{grid-template-columns:1fr;}}

/* ── FAKTEN: Für wen (Audience) ── */
.lx-aud{padding:120px 0 140px;border-top:1px solid var(--lx-hair);}
.lx-aud-grid{margin-top:70px;display:grid;grid-template-columns:1fr 1fr;gap:44px 60px;}
.lx-ai{display:flex;gap:18px;align-items:flex-start;}
.lx-ai .ai-ico{font-size:22px;line-height:1;flex:none;margin-top:2px;opacity:.9;}
.lx-ai h4{margin:0;font-size:16px;font-weight:600;color:var(--lx-fg);}
.lx-ai p{margin:10px 0 0;font-size:14.5px;font-weight:300;line-height:1.75;color:var(--lx-faint);}

/* ── EINSTIEG: In 3 Schritten (Texte = Bestandsseite) ── */
.lx-access{padding:140px 0 130px;border-top:1px solid var(--lx-hair);}
.lx-steps{margin:70px auto 0;max-width:760px;position:relative;}
.lx-step{position:relative;display:flex;gap:26px;align-items:flex-start;padding:0 0 54px 0;}
.lx-step:last-child{padding-bottom:0;}
.lx-step::before{content:'';position:absolute;left:21px;top:50px;bottom:6px;width:1px;background:rgba(var(--lx-accent-rgb),.25);}
.lx-step:last-child::before{display:none;}
.lx-step-n{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(var(--lx-accent-rgb),.5);border-radius:50%;font-size:13px;letter-spacing:1px;color:var(--lx-accent);flex:none;}
.lx-step h4{margin:10px 0 0;font-size:17px;font-weight:600;color:var(--lx-fg);}
.lx-step p{margin:12px 0 0;font-size:14.5px;font-weight:300;line-height:1.8;color:var(--lx-faint);max-width:60ch;}
.lx-access-out{margin-top:60px;text-align:center;font-size:14px;font-weight:300;letter-spacing:.4px;color:rgba(238,242,247,.45);}

/* ── WEITERE OPTIONEN (Hosted / On-Premise / Vergleich) ── */
.lx-more{padding:120px 0 140px;border-top:1px solid var(--lx-hair);}
.lx-more-grid{margin-top:60px;display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.lx-mcard{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:34px 36px;border:1px solid rgba(238,242,247,.14);border-radius:var(--radius-card,2px);text-decoration:none;background:rgba(255,255,255,.015);transition:border-color .3s,background .3s,transform .3s;}
.lx-mcard:hover{border-color:rgba(var(--lx-accent-rgb),.55);background:rgba(var(--lx-accent-rgb),.05);transform:translateY(-2px);}
.lx-mcard h4{margin:0;font-size:17px;font-weight:600;color:var(--lx-fg);}
.lx-mcard p{margin:10px 0 0;font-size:13.5px;font-weight:300;line-height:1.7;color:var(--lx-faint);}
.lx-mcard .arr{color:var(--lx-accent);font-size:20px;flex:none;transition:transform .3s;}
.lx-mcard:hover .arr{transform:translateX(4px);}
.lx-more-link{margin-top:44px;text-align:center;}
.lx-more-link a{color:rgba(238,242,247,.6);font-size:14px;font-weight:500;letter-spacing:.6px;text-decoration:none;border-bottom:1px solid rgba(var(--lx-accent-rgb),.4);padding-bottom:3px;transition:color .3s,border-color .3s;}
.lx-more-link a:hover{color:var(--lx-accent);border-color:var(--lx-accent);}

/* ── CLOSING (CTA wie Bestandsseite) ── */
.lx-close{padding:150px 0 140px;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(800px 400px at 50% 115%,rgba(var(--lx-accent-rgb),.12),transparent 60%),#04070c;}
.lx-close .lx-h{margin-top:26px;}
.lx-close .lx-p{max-width:480px;margin-left:auto;margin-right:auto;}
.lx-fine{margin-top:70px;font-size:11px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:rgba(238,242,247,.3);}

/* ── Responsive ── */
@media(max-width:1068px){
  /* Mobile Hero-Reihenfolge (Ludwig 07.07.): Kicker → Claim → BILD → Buttons → Beschreibung */
  .lx-hero{align-items:flex-start;}
  .lx-hero-in{display:flex;flex-direction:column;align-items:stretch;padding:64px 24px 56px;}
  .lx-hero-copy{display:contents;}
  .lx-hero-copy .lx-kicker{order:1;}
  .lx-hero-copy h1{order:2;margin-top:14px;}
  .lx-hero-visual{order:3;min-height:0;margin:26px 0 4px;}
  .lx-reveal{width:min(360px,78vw);}
  .lx-hero-copy .lx-btns{order:4;margin-top:14px;}
  .lx-hero-copy .lx-sub{order:5;margin-top:28px;}
  .lx-act-grid{grid-template-columns:1fr;gap:50px;}
  .lx-act-grid.rev .lx-act-copy{order:0;}
  .lx-spec-grid{grid-template-columns:1fr 1fr;}
  .lx-wrap{padding:0 24px;}
  .lx-act{padding:100px 0;}
  .lx-mani{padding:130px 0 100px;}
  .lx-glance{grid-template-columns:1fr 1fr;gap:44px 32px;}
  .lx-detail-grid{grid-template-columns:1fr;gap:60px;}
  .lx-aud-grid{grid-template-columns:1fr;gap:38px;}
  .lx-more-grid{grid-template-columns:1fr;}
  .lx-facts,.lx-aud,.lx-access,.lx-more{padding-top:100px;padding-bottom:100px;}
}
@media(max-width:735px){
  .lx-glance{grid-template-columns:1fr;}
  .lx-step{gap:18px;}
  .lx-step::before{left:17px;}
  .lx-step-n{width:36px;height:36px;font-size:12px;}
}
@media(prefers-reduced-motion:reduce){
  .lxr,.lxb{transition:none;opacity:1;transform:none;filter:none;}
  .lx-phone,.lx-reveal{animation:none;}
  .lx-ring{display:none;}
  .lx-par{transform:none!important;}
  .lx-gif{display:none;}
  .lx-real{opacity:1;transform:none;filter:none;}
}

/* ══════════════════════════════════════════════════════
   LUX-SKIN — Typo/Anmutung für BESTANDSSEITEN (ohne HTML-Umbau)
   Aktivierung: <body class="lx-skin"> · Consulting zusätzlich .lx-consulting
   Navi/Header/Footer & Hero-Videos bleiben UNBERÜHRT (Ludwig-Regel 4).
   Heros: ALTE Schriftgrößen (Regel 6) — nur Gewicht/Laufweite/Abstände.
   Alle Stellgrößen als --lxs-*-Tokens → zentral triggerbar.
══════════════════════════════════════════════════════ */
body.lx-skin{
  --lxs-h1-weight:var(--lx-display-weight);   /* Hero-H1 (alt: 900) */
  --lxs-h1-ls:-.015em;
  --lxs-h1-lh:1.08;
  --lxs-h2-weight:var(--lx-display-weight);   /* Sektions-H2 (alt: 800) */
  --lxs-h2-ls:-.012em;
  --lxs-body-weight:300;
  --lxs-body-lh:1.85;
  --lxs-kicker-weight:600;
  --lxs-kicker-ls:var(--lx-kicker-ls);
  --lxs-kicker-color:rgba(255,255,255,.55);   /* Zielgruppen-Zeile im Hero */
  --lxs-btn-fs:12px;
  --lxs-btn-ls:1.6px;
  --lxs-btn-pad:15px 32px;
}

/* ── Hero (Slider-Mainpage): LUX-Gewicht, alte Größen ── */
body.lx-skin .hero-h1{font-weight:var(--lxs-h1-weight);letter-spacing:var(--lxs-h1-ls);line-height:var(--lxs-h1-lh);}
body.lx-skin .hero-h1 b,body.lx-skin .hero-h1 strong,body.lx-skin .hero-h1 em{font-weight:var(--lx-display-strong);font-style:normal;}
body.lx-skin .hero-sub{font-weight:var(--lxs-body-weight);line-height:var(--lxs-body-lh);}

/* Onepager-Hero (Claim/Zielgruppen): Anordnung & Farben unverändert — nur LUX-Metrik */
body.lx-skin .hero-claim{font-weight:var(--lxs-kicker-weight);letter-spacing:var(--lxs-kicker-ls);}
body.lx-skin .hero-groups{font-weight:var(--lxs-kicker-weight);letter-spacing:2.4px;}

/* ── Buttons: LUX-Metrik (Uppercase 12px, ruhige Laufweite) ── */
body.lx-skin .hero-btn-primary,body.lx-skin .btn-primary{
  padding:var(--lxs-btn-pad);font-size:var(--lxs-btn-fs);font-weight:700;letter-spacing:var(--lxs-btn-ls);
  text-transform:uppercase;border-radius:var(--radius-btn,4px);transition:background .3s,border-color .3s;}
body.lx-skin .hero-btn-secondary,body.lx-skin .btn-secondary{
  padding:var(--lxs-btn-pad);font-size:var(--lxs-btn-fs);font-weight:700;letter-spacing:var(--lxs-btn-ls);
  text-transform:uppercase;border-radius:var(--radius-btn,4px);background:transparent;transition:border-color .3s,background .3s;}
body.lx-skin .hero-btn-secondary:hover{border-color:rgba(var(--lx-accent-rgb),.7);background:rgba(var(--lx-accent-rgb),.08);}

/* ── Sektionen: Kicker/H2/Lead in LUX-Anmutung ── */
body.lx-skin .section-eyebrow,body.lx-skin .section-label{
  font-weight:var(--lxs-kicker-weight);letter-spacing:var(--lxs-kicker-ls);font-size:var(--lx-kicker-size);}
body.lx-skin .section-h2,body.lx-skin .section-title{
  font-weight:var(--lxs-h2-weight);letter-spacing:var(--lxs-h2-ls);line-height:1.15;}
body.lx-skin .section-h2 b,body.lx-skin .section-h2 strong,body.lx-skin .section-title b,body.lx-skin .section-title strong{font-weight:var(--lx-display-strong);}
body.lx-skin .section-lead{font-weight:var(--lxs-body-weight);line-height:var(--lxs-body-lh);}

/* ══ CONSULTING-THEME: hell + Tiefblau (klar abgesetzt von COMSEC) ══ */
body.lx-skin.lx-consulting{
  --lx-accent:var(--brand,#00588a);
  --lx-accent-rgb:0,88,138;
  --lx-accent-hover:#0a2540;
  --lx-bg:#f7f6f3;
  --lx-fg:#0a2540;
  --lx-muted:rgba(10,37,64,.62);
  --lx-faint:rgba(10,37,64,.5);
  --lx-hair:rgba(10,37,64,.08);
  --lx-hero-glow:#0f3460;
  --lxs-kicker-color:rgba(255,255,255,.5);  /* Consulting-Hero bleibt dunkelblau */
}

/* ── LUX-SKIN: COMSEC-Onepager (op-*) — Texte/Farben/Anordnung bleiben, nur Typo/Bewegung ── */
body.lx-skin .op-eyebrow{font-weight:var(--lxs-kicker-weight);letter-spacing:var(--lxs-kicker-ls);font-size:var(--lx-kicker-size);}
body.lx-skin .op-eyebrow::before{height:1px;width:26px;margin-right:14px;}
body.lx-skin .op-h2{font-weight:var(--lxs-h2-weight);letter-spacing:var(--lxs-h2-ls);line-height:1.15;}
body.lx-skin .op-h2 em{font-weight:var(--lx-display-strong);}
body.lx-skin .op-lead{font-weight:var(--lxs-body-weight);line-height:var(--lxs-body-lh);}
body.lx-skin .op-line{font-weight:var(--lx-display-weight);line-height:1.15;}
body.lx-skin .op-line strong{font-weight:var(--lx-display-strong);}
body.lx-skin .op-out{font-weight:var(--lxs-body-weight);line-height:var(--lxs-body-lh);}
body.lx-skin .op-stat b{font-weight:300;}
body.lx-skin .w-num{font-weight:600;}
body.lx-skin .tl-when,body.lx-skin .pg-kicker,body.lx-skin .demo-tag,body.lx-skin .tl-badge{font-weight:var(--lxs-kicker-weight);}
body.lx-skin .tl-card h3,body.lx-skin .w-card h3,body.lx-skin .pg-body h3,body.lx-skin .mg-card h3{font-weight:600;letter-spacing:.2px;}
body.lx-skin .tick{font-weight:600;}
/* Bewegung: LUX-Tempo (langsam & edel) für Onepager-Reveals */
body.lx-skin .rv{transition:opacity var(--lx-dur) var(--lx-ease),transform var(--lx-dur) var(--lx-ease);}
body.lx-skin .rv.d1{transition-delay:.15s;}body.lx-skin .rv.d2{transition-delay:.3s;}body.lx-skin .rv.d3{transition-delay:.45s;}
@media (prefers-reduced-motion:reduce){body.lx-skin .rv{transition:none;}}


/* ══ LUX-SKIN v2: Subpage-Homogenisierung (Ludwig 07.07.) ══
   Graues Header-Grunddesign (sp-/ov-/k-hero) BLEIBT — nur Typografie auf LUX-Metrik.
   Chrome (Navbar, Mobile-Nav, Footer, Briefing-Modal, Meta-Bar, Lang-Switcher) bleibt UNBERÜHRT.
   .legal-body ausgenommen (Dokument-Charakter, eigene Metrik in den Legal-Seiten). */
body.lx-skin :is(h1,h2):not(:is(.navbar,#mobileNav,footer,#briefingModal,.meta-bar,#langSel,.legal-body) *){
  font-weight:var(--lx-display-weight);letter-spacing:-.012em;}
body.lx-skin :is(h1,h2):not(:is(.navbar,#mobileNav,footer,#briefingModal,.meta-bar,#langSel,.legal-body) *) :is(b,strong,em){
  font-weight:var(--lx-display-strong);font-style:normal;}
body.lx-skin :is(h3,h4):not(:is(.navbar,#mobileNav,footer,#briefingModal,.meta-bar,#langSel,.legal-body) *){
  font-weight:600;letter-spacing:.2px;}
body.lx-skin :is(p,li):not(:is(.navbar,#mobileNav,footer,#briefingModal,.meta-bar,#langSel) *){font-weight:300;}

/* Subpage-Heros: Größen an die LUX-Skala angeglichen */
body.lx-skin .sp-hero h1{font-size:clamp(34px,4.6vw,64px);line-height:1.1;}
body.lx-skin .sp-hero p{font-size:clamp(16px,1.5vw,19px);line-height:1.8;color:rgba(255,255,255,.72);}
body.lx-skin .ov-h1{font-size:clamp(32px,4.2vw,56px);line-height:1.12;}
body.lx-skin .k-hero h1{font-size:clamp(32px,4.2vw,56px);line-height:1.12;}
body.lx-skin .legal-header h1{font-size:clamp(28px,3.8vw,46px);font-weight:var(--lx-display-weight);letter-spacing:-.012em;}

/* Kicker site-weit einheitlich: 11px · 4.5px Laufweite · 600 · uppercase */
body.lx-skin :is(.sp-hero-tag,.ov-label,.k-hero-tag){
  font-size:var(--lx-kicker-size);font-weight:600;letter-spacing:var(--lx-kicker-ls);text-transform:uppercase;}
/* Sektions-H2: LUX-Größe */
body.lx-skin .section-title{font-size:clamp(26px,3.2vw,44px);line-height:1.18;}
/* Zahlen-Displays: dünn statt fett (LUX-Ziffernsprache) */
body.lx-skin .stat-num{font-weight:300;letter-spacing:-.02em;}

/* ── LUX-SKIN: Mainpage-Hero Feinschliff (Ludwig 08.07.) ──
   Desktop: Content an linker Rasterkante → Video besser sichtbar.
   Mobil (<1069): unten angedockt (App-Look), Claim kompakt.
   Texte/Reihenfolge unverändert. */
body.lx-skin{
  --lxs-hero-grid:1200px;           /* Raster für Links-Ausrichtung Desktop */
  --lxs-hero-pad-b-mobile:40px;     /* Abstand Buttons ↔ Switcher mobil */
  --lxs-hero-video-bright-m:.52;    /* Video-Helligkeit mobil (Desktop: .38 inline) */
}
@media(min-width:1069px){
  body.lx-skin .hero-variant{margin:0;max-width:none;
    padding-left:max(40px,calc((100% - var(--lxs-hero-grid))/2 + 40px));padding-right:40px;}
}
@media(max-width:1068px){
  /* Mobil-Reihenfolge (Ludwig 08.07.): Claim → H1 → Beschreibung …
     Zielgruppen-Zeile ("Für wen") + Buttons gemeinsam UNTEN angedockt. */
  body.lx-skin .hero-variant{padding-bottom:var(--lxs-hero-pad-b-mobile);}
  body.lx-skin .hero-variant .hero-claim{order:1;margin-top:auto;}
  body.lx-skin .hero-variant .hero-h1{order:2;}
  body.lx-skin .hero-variant .hero-sub{order:3;margin-bottom:0;}
  body.lx-skin .hero-variant .hero-groups{order:4;margin:auto 0 14px;padding-top:30px;}
  body.lx-skin .hero-variant .hero-btns{order:5;}
  /* Video mobil etwas heller (darf vom Text überdeckt sein) */
  body.lx-skin #heroVideo{filter:grayscale(100%) brightness(var(--lxs-hero-video-bright-m,.52))!important;}
  body.lx-skin .hero-section::before{filter:grayscale(100%) brightness(var(--lxs-hero-video-bright-m,.52));}
  body.lx-skin .hero-section::after{background:linear-gradient(105deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.42) 55%,rgba(0,174,230,.07) 100%);}
  body.lx-skin .hero-claim{font-size:10px;letter-spacing:1.8px;line-height:1.7;margin-bottom:18px;}
  body.lx-skin .hero-h1{margin-bottom:12px;}
  body.lx-skin .hero-groups{font-size:9.5px;letter-spacing:1.4px;margin:-4px 0 16px;}
  body.lx-skin .hero-sub{font-size:15px;line-height:1.7;margin-bottom:26px;}
  body.lx-skin .hero-btns .hero-btn-primary,body.lx-skin .hero-btns .hero-btn-secondary{padding:13px 24px;font-size:11px;}
}

/* ── TL-PIMP: Mainpage #caas „Wie schnell wollen Sie souverän sein?" (Ludwig 07.07.)
   Nur Optik/Bewegung — Texte & Markup unverändert. Alles CSS-getriggert (.tl.in via bestehendem Observer). ── */
/* Karten fahren gestaffelt ein (synchron zu den Nodes) */
body.lx-skin .op-sofort .tl-col{opacity:0;transform:translateY(22px);transition:opacity .9s var(--lx-ease),transform .9s var(--lx-ease);}
body.lx-skin .op-sofort .tl.in .tl-col{opacity:1;transform:none;}
body.lx-skin .op-sofort .tl.in .tl-grid .tl-col:nth-child(2){transition-delay:.35s;}
body.lx-skin .op-sofort .tl.in .tl-grid .tl-col:nth-child(3){transition-delay:.7s;}
/* Premium-Kartenfläche + Akzent-Hairline oben */
body.lx-skin .tl-card{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,#fafcfe);border-color:rgba(1,45,80,.09);box-shadow:0 10px 30px rgba(1,45,80,.05);transition:transform .35s var(--lx-ease),box-shadow .35s,border-color .35s,opacity .35s;}
body.lx-skin .tl-card::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(0,174,230,.55),transparent);opacity:.5;transition:opacity .35s;}
body.lx-skin .tl-card:hover{transform:translateY(-6px);border-color:rgba(0,174,230,.45);box-shadow:0 24px 60px rgba(1,45,80,.14),0 0 0 1px rgba(0,174,230,.08);}
body.lx-skin .tl-card:hover::before{opacity:1;}
/* „Heute"-Karte leicht hervorgehoben */
body.lx-skin .tl-grid .tl-col:first-child .tl-card{background:linear-gradient(180deg,#f3fafe,#fff 60%);border-color:rgba(0,174,230,.25);}
/* Fokus: nicht-gehoverte Karten treten dezent zurück (nur Desktop) */
@media(min-width:1069px){body.lx-skin .tl-grid:hover .tl-col:not(:hover) .tl-card{opacity:.78;}}
/* Badges: feine Outline statt Farbfläche */
body.lx-skin .tl-badge{background:transparent;border:1px solid rgba(0,174,230,.38);color:var(--icsl-dark,#015288);font-weight:600;letter-spacing:1.6px;}
/* Punktnebel-GIF: Karte teilt sich ab dem Beschreibungstext 2/3 Text : 1/3 GIF (Ludwig 07.07.) */
body.lx-skin .tl-card{display:grid;grid-template-columns:2fr 1fr;column-gap:16px;align-content:start;}
body.lx-skin .tl-card .tl-badge{grid-column:1/-1;justify-self:start;}
body.lx-skin .tl-card h3{grid-column:1/-1;}
body.lx-skin .tl-card .tl-sub{grid-column:1/-1;}
body.lx-skin .tl-card p{grid-column:1;}
body.lx-skin .tl-card .tl-go{grid-column:1;justify-self:start;}
body.lx-skin .tl-card::after{content:'';position:absolute;z-index:-1;top:calc(50% + 18px);right:3%;width:31%;height:64%;transform:translateY(-50%);
  background:url('/assets/img/silentel/particles-aas.gif') center/contain no-repeat;
  filter:invert(1) hue-rotate(180deg) saturate(1.4);opacity:.45;pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 50%,#000 45%,transparent 85%);
  mask-image:radial-gradient(120% 120% at 50% 50%,#000 45%,transparent 85%);
  transition:opacity .35s;}
body.lx-skin .tl-grid .tl-col:nth-child(2) .tl-card::after{background-image:url('/assets/img/silentel/particles-hosted.gif');background-size:96% auto;}
body.lx-skin .tl-grid .tl-col:nth-child(3) .tl-card::after{background-image:url('/assets/img/silentel/particles-onprem.gif');background-size:78% auto;}
body.lx-skin .tl-card:hover::after{opacity:.8;}
@media(prefers-reduced-motion:reduce){body.lx-skin .tl-card::after{display:none;}}

/* Zeitmarken in LUX-Kicker-Metrik */
body.lx-skin .tl-when{font-size:11px;font-weight:600;letter-spacing:3.2px;}
body.lx-skin .tl-sub{font-weight:600;}
/* „Heute"-Node pulsiert dezent nach dem Aufbau */
body.lx-skin .tl-node{overflow:visible;}
body.lx-skin .tl.in .tl-grid .tl-col:first-child .tl-node::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(0,174,230,.5);animation:tlPulse 3.2s ease-out 1.8s infinite;}
@keyframes tlPulse{0%{opacity:.7;transform:scale(.55);}70%{opacity:0;transform:scale(2);}100%{opacity:0;transform:scale(2);}}
@media(prefers-reduced-motion:reduce){
  body.lx-skin .op-sofort .tl-col{opacity:1;transform:none;transition:none;}
  body.lx-skin .tl.in .tl-grid .tl-col:first-child .tl-node::after{animation:none;display:none;}
}

/* ── /silentel Deployment-Karten: DUNKLES LUX-BAND (Ludwig 07.07., v2 nach „banal"-Feedback)
   Sektion wird zur dunklen Bühne wie die Produktseiten; GIF-Nebel leuchtet original (kein Invert). ── */
body.lx-skin .cards-section{background:radial-gradient(900px 500px at 50% -10%,#0a1626 0%,#04070c 60%),#04070c;padding-top:90px;padding-bottom:100px;}
body.lx-skin .cards-intro h2{color:#eef2f7;font-size:clamp(28px,3.4vw,46px);}
body.lx-skin .cards-intro p{color:rgba(238,242,247,.6);font-weight:300;line-height:1.8;}
/* Karten: dunkles Glas mit Akzent-Hairline + Glow */
body.lx-skin .prod-card{position:relative;background:linear-gradient(160deg,rgba(0,174,230,.05),rgba(0,174,230,.012) 55%),rgba(255,255,255,.02);border:1px solid rgba(238,242,247,.12);box-shadow:0 30px 90px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);transition:transform .35s var(--lx-ease),box-shadow .35s,border-color .35s,opacity .35s;}
body.lx-skin .prod-card::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:1;background:linear-gradient(90deg,transparent,rgba(0,174,230,.6),transparent);opacity:.55;transition:opacity .35s;}
body.lx-skin .prod-card:hover{transform:translateY(-6px);border-color:rgba(0,174,230,.5);box-shadow:0 40px 110px rgba(0,0,0,.6),0 0 40px rgba(0,174,230,.1);}
body.lx-skin .prod-card:hover::before{opacity:1;}
body.lx-skin .prod-card.featured{border-color:rgba(0,174,230,.45);background:linear-gradient(160deg,rgba(0,174,230,.1),rgba(0,174,230,.02) 60%),rgba(255,255,255,.02);box-shadow:0 30px 90px rgba(0,0,0,.5),0 0 60px rgba(0,174,230,.12);}
@media(min-width:1069px){body.lx-skin .cards-grid:hover .prod-card:not(:hover){opacity:.7;}}
/* Typo auf Dunkel */
body.lx-skin .card-h3{color:#eef2f7;}
body.lx-skin .card-tagline{color:rgba(238,242,247,.6);}
body.lx-skin .card-features li{color:rgba(238,242,247,.75);}
/* Badge-Bars */
body.lx-skin .card-badge-bar{font-size:10.5px;font-weight:600;letter-spacing:2.6px;padding:12px 22px;}
body.lx-skin .prod-card.featured .card-badge-bar{background:linear-gradient(90deg,rgba(0,144,200,.9),rgba(0,174,230,.9));color:#fff;}
body.lx-skin .prod-card:not(.featured) .card-badge-bar{background:transparent;color:rgba(238,242,247,.5);border-bottom:1px solid rgba(238,242,247,.1);}
/* Chips: Outline auf Dunkel */
body.lx-skin .card-chip{background:transparent;border:1px solid rgba(0,174,230,.4);color:rgba(238,242,247,.8);font-weight:600;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;border-radius:3px;padding:4px 9px;}
body.lx-skin .prod-card.featured .card-chip{background:transparent;color:rgba(238,242,247,.85);}
/* Buttons */
body.lx-skin .card-btn-primary{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;}
body.lx-skin .card-btn-primary:hover{background:#009ed0;}
body.lx-skin .card-btn-secondary{font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:rgba(238,242,247,.85);border-color:rgba(238,242,247,.25);background:transparent;}
body.lx-skin .card-btn-secondary:hover{border-color:rgba(0,174,230,.7);background:rgba(0,174,230,.08);color:#fff;}
/* GIF: original leuchtend wie im Hero (kein Invert), mit sanftem Glow */
body.lx-skin .card-gif img{filter:drop-shadow(0 0 8px rgba(175,200,255,.4)) drop-shadow(0 0 20px rgba(120,155,255,.2));opacity:.85;transition:opacity .35s;}
body.lx-skin .prod-card:hover .card-gif img{opacity:1;}


/* ══════════════════════════════════════════════════════════════
   SWAP 260710 (Ludwig): Silentel-Themen einheitlich DUNKEL
   1) Mainpage #caas „Sofort sicher mit Silentel" → dunkle aas-Bühne
   2) Mainpage #demo „Live: So sieht Sicherheit aus" → hell
   3) .lx-hero--compact für Übersichts-Heros (/silentel)
   Nur Optik — Texte/Markup der Sektionen unverändert.
══════════════════════════════════════════════════════════════ */

/* ── 1) #caas DUNKEL ── */
body.lx-skin .op-sofort{background:radial-gradient(1100px 600px at 70% 0%,#0d1f35 0%,#0b1017 55%,#070b12 100%);}
body.lx-skin .op-sofort .op-h2{color:#fff;}
body.lx-skin .op-sofort .op-lead{color:rgba(255,255,255,.68);}
body.lx-skin .op-sofort .op-foot{color:rgba(255,255,255,.55);}
body.lx-skin .op-sofort .op-foot a{color:#00aee6;}
body.lx-skin .op-sofort .tl-track{background:rgba(255,255,255,.12);}
body.lx-skin .op-sofort .tl-when{color:rgba(255,255,255,.55);}
body.lx-skin .op-sofort .tl-node{background:#0b1017;}
body.lx-skin .op-sofort .tl-card{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border-color:rgba(255,255,255,.1);box-shadow:0 14px 40px rgba(0,0,0,.35);}
body.lx-skin .op-sofort .tl-card h3{color:#fff;}
body.lx-skin .op-sofort .tl-card .tl-sub{color:#00aee6;}
body.lx-skin .op-sofort .tl-card p{color:rgba(255,255,255,.62);}
body.lx-skin .op-sofort .tl-card .tl-go{color:#00aee6;}
body.lx-skin .op-sofort .tl-badge{border-color:rgba(0,174,230,.45);color:#7fd6f2;}
body.lx-skin .op-sofort .tl-grid .tl-col:first-child .tl-card{background:linear-gradient(180deg,rgba(0,174,230,.12),rgba(255,255,255,.03) 60%);border-color:rgba(0,174,230,.35);}
body.lx-skin .op-sofort .tl-card:hover{border-color:rgba(0,174,230,.5);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(0,174,230,.12);}
/* Punktnebel-GIFs auf dunkel: Original leuchten lassen (wie /silentel-Band) */
body.lx-skin .op-sofort .tl-card::after{filter:none;opacity:.55;}
body.lx-skin .op-sofort .tl-card:hover::after{opacity:.95;}

/* ── 2) #demo HELL ── */
body.lx-skin .op-demo{background:#f6f7f8;}
body.lx-skin .op-demo .op-h2{color:#0a1628;}
body.lx-skin .op-demo .op-lead{color:#42526b;}
body.lx-skin .op-demo .op-foot{color:#42526b;}
body.lx-skin .op-demo .op-foot a{color:#015288;}
body.lx-skin .op-demo .demo-card{background:#fff;border-color:rgba(1,45,80,.1);}
body.lx-skin .op-demo .demo-card.safe{border-color:rgba(0,174,230,.45);box-shadow:0 10px 30px rgba(1,45,80,.06);}
body.lx-skin .op-demo .demo-card.evil .demo-tag{color:rgba(10,22,40,.45);}
body.lx-skin .op-demo .demo-card.safe .demo-bubble{background:rgba(0,174,230,.1);border-color:rgba(0,174,230,.35);color:#0a1628;}
body.lx-skin .op-demo .demo-card.safe .demo-meta{color:rgba(10,22,40,.5);}
/* Angreifer-Sicht bleibt bewusst dunkel (Terminal-Kontrast) */
body.lx-skin .op-demo .demo-card.evil .demo-bubble{background:#0d1f35;border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.6);}
body.lx-skin .op-demo .demo-note{color:rgba(10,22,40,.55);}

/* ── 3) Kompakter LUX-Hero für Übersichtsseiten (gestrafft 10.07., Ludwig) ──
   Klar Silentel-Stil, aber erkennbar KEINE Produktseite: halbe Bühne statt Fullscreen. */
.lx-hero--compact{min-height:0;padding:0;}
.lx-hero--compact .lx-hero-in{padding:56px 40px 44px;gap:36px;}
.lx-hero--compact .lx-hero-copy h1{font-size:clamp(28px,3.6vw,50px);margin-top:18px;}
.lx-hero--compact .lx-sub{font-size:15.5px;max-width:560px;}
.lx-hero--compact .lx-hero-visual{min-height:0;}
.lx-hero--compact .lx-reveal{width:min(250px,60vw);}
.lx-hero--compact .lx-ring{width:210px;height:210px;}
@media(max-width:1069px){.lx-hero--compact .lx-hero-visual{margin:10px 0 0;}.lx-hero--compact .lx-reveal{width:min(200px,55vw);}}
@media(max-width:735px){.lx-hero--compact .lx-hero-in{padding:44px 20px 32px;}}


/* ══════════════════════════════════════════════════════════════
   GLX 260710 v2 (Ludwig): Block-Heros („Was wir tun" / „Für wen" /
   „Warum ICSL") behalten ihr blaugraues Block-Design und die hellen
   Inhalte — NUR der Hero bekommt einen LEICHTEN GLOW.
   Bewusst schlichter als die Silentel-Seiten (Unterschied gewollt).
   Aktivierung: body class="lx-skin lx-glow". Texte/Markup unverändert.
══════════════════════════════════════════════════════════════ */
/* Glow: nur Grau + Blau (Ludwig 10.07.) — echtes kühles Blau, kein Türkis/Grünstich */
body.lx-glow .sp-hero{
  --glx-blue:70,130,215;
  background:
  radial-gradient(1000px 480px at 72% -10%,rgba(var(--glx-blue),.16),transparent 60%),
  radial-gradient(700px 380px at 10% 112%,rgba(var(--glx-blue),.06),transparent 55%),
  linear-gradient(135deg,#1b1f24 0%,#2c333b 100%);}

/* ── GLX-Visual: ruhiger Bildakzent unter dem Block-Hero (Für-wen-Seiten, 10.07.) ── */
.glx-visual{height:clamp(240px,42vw,440px);background-size:cover;background-position:center;position:relative;}
.glx-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,31,36,.45),transparent 32%,transparent 68%,rgba(245,247,250,0) 100%),linear-gradient(0deg,rgba(1,45,80,.14),rgba(1,45,80,.14));}



/* ══════════════════════════════════════════════════════════════
   CGX 260713 — CONSULTING-Subpage-Glow (Analog GLX v2, Ludwig-Linie
   „Grau+Blau, hochwertig/behördenseriös"): Block-Heros der Consulting-
   Subpages behalten Tiefblau-Verlauf + helle Bestandsinhalte — NUR der
   Hero bekommt einen LEICHTEN Glow (heller Consulting-Akzent 7fb6d9).
   Aktivierung: body class="lx-skin lx-consulting lx-glow".
   Texte/Markup unverändert.
══════════════════════════════════════════════════════════════ */
body.lx-consulting.lx-glow .sp-hero,
body.lx-consulting.lx-glow .k-hero{
  --cgx-blue:127,182,217;
  background:
  radial-gradient(1000px 480px at 72% -10%,rgba(var(--cgx-blue),.18),transparent 60%),
  radial-gradient(700px 380px at 10% 112%,rgba(var(--cgx-blue),.07),transparent 55%),
  linear-gradient(135deg,#0a2540 0%,#00588a 100%);}

/* Bildband-Tint auf Consulting-Seiten in Tiefblau statt Anthrazit */
body.lx-consulting .glx-visual::after{
  background:linear-gradient(180deg,rgba(7,26,46,.42),transparent 32%,transparent 68%,rgba(255,255,255,0) 100%),
  linear-gradient(0deg,rgba(0,88,138,.12),rgba(0,88,138,.12));}


/* ═══════════════════════════════════════════════════════════════
   CLX 260715 — „Unsere Leistungen konkret für Sie"
   Dunkles Tiefblau-Band am Ende der Consulting-Use-Case-Seiten.
   Stellgrößen: Akzent #7fb6d9 (CGX-Blau), Grid 3→1 @1069.
═══════════════════════════════════════════════════════════════ */
.cx-leist{background:linear-gradient(160deg,#0a2540 0%,#0d3a5c 55%,#00588a 135%);padding:72px 40px;position:relative;overflow:hidden;}
.cx-leist::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 85% -10%,rgba(127,182,217,.16),transparent 60%);pointer-events:none;}
.cx-leist-inner{max-width:1200px;margin:0 auto;position:relative;}
.cx-leist .cxl-kicker{font-size:11px;font-weight:600;letter-spacing:4.5px;text-transform:uppercase;color:#7fb6d9;margin-bottom:14px;}
.cx-leist h2{font-size:clamp(26px,3.4vw,40px);font-weight:300;letter-spacing:-.012em;color:#fff;margin:0 0 10px;}
.cx-leist .cxl-lead{font-size:16px;font-weight:300;line-height:1.65;color:rgba(255,255,255,.78);max-width:760px;margin:0 0 40px;}
.cxl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.cxl-card{background:rgba(255,255,255,.055);border:1px solid rgba(127,182,217,.22);border-radius:14px;padding:28px 26px;display:flex;flex-direction:column;text-decoration:none;transition:background .15s,border-color .15s;}
a.cxl-card:hover{background:rgba(255,255,255,.09);border-color:rgba(127,182,217,.45);}
.cxl-card h3{font-size:17px;font-weight:600;color:#fff;margin:0 0 10px;}
.cxl-card p{font-size:14.5px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.75);margin:0 0 14px;}
.cxl-card ul{list-style:none;margin:0 0 0;padding:0;}
.cxl-card li{font-size:13.5px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.68);padding:5px 0 5px 18px;position:relative;}
.cxl-card li::before{content:"\2014";position:absolute;left:0;color:#7fb6d9;}
.cxl-more{display:inline-block;margin-top:auto;padding-top:16px;font-size:13px;font-weight:600;letter-spacing:.4px;color:#7fb6d9;}
.cxl-proc{margin-top:36px;font-size:14px;font-weight:300;color:rgba(255,255,255,.72);line-height:1.7;}
.cxl-proc b{color:#7fb6d9;font-weight:600;letter-spacing:.5px;}
@media(max-width:1069px){.cxl-grid{grid-template-columns:1fr;}.cx-leist{padding:56px 20px;}}

/* ── TL-GIF MOBIL 260915: Karten-Symbole am Mobil permanent sichtbar (Ludwig).
   Befund iPhone: das ::after hat z-index:-1; ohne eigenen Stapelkontext der Karte landet es
   hinter dem opaken Sektionshintergrund und ist unsichtbar. Am Desktop entsteht der Kontext
   erst durch Hover (transform bzw. opacity .78 der Nachbarkarten) — dieses Ein-/Ausblenden
   bleibt dort bewusst so. Am Mobil: isolation:isolate + feste Deckkraft. ── */
@media(max-width:1068px){
  body.lx-skin .tl-card{isolation:isolate;}
  body.lx-skin .tl-card::after,body.lx-skin .op-sofort .tl-card::after{opacity:.85;}
}

/* ═══ MI 260720 — Wireframe-Icons (Material Symbols Outlined, inline-SVG) statt Emojis ═══ */
.ai-ico svg.mi{display:block;width:24px;height:24px;fill:#e3e3e3;opacity:.92;}
.ai-ico .mi-cc{display:flex;align-items:center;justify-content:center;width:26px;height:18px;margin-top:3px;border:1px solid rgba(227,227,227,.45);border-radius:3px;font-size:9.5px;font-weight:600;letter-spacing:1px;text-indent:1px;color:#e3e3e3;opacity:.92;font-family:inherit;}
/* MI 260722 — Rollout: Inline-Icon in Überschriften (helle who-Karten) + Ländercode-Chip in cta-trust */
.mi-inl{display:inline-block;width:19px;height:19px;fill:#e3e3e3;opacity:.92;vertical-align:-3.5px;margin-right:7px;}
.who-card svg.mi-inl{fill:#0d1f35;opacity:.85;}
.cta-trust .mi-cc{display:inline-flex;align-items:center;justify-content:center;width:26px;height:18px;border:1px solid currentColor;border-radius:3px;font-size:9.5px;font-weight:600;letter-spacing:1px;text-indent:1px;color:inherit;font-family:inherit;}

/* ═══ TXT 260720 — Lesbarkeit dunkler Bühnen: Text-Alphas angehoben + vereinheitlicht ═══
   Skala: Fließtext dunkel = Token --lx-faint .68 / --lx-muted .7 (mobil +.06)
   Sekundär (Manifesto-Grau, Taglines) ≈ .6 · Deko (Hairlines, .lx-line, .lx-fine) unverändert. */
.lx-mani-out{color:rgba(238,242,247,.62);}                    /* war .55 */
.lx-access-out{color:rgba(238,242,247,.58);}                  /* war .45 */
.lx-sub{color:rgba(238,242,247,.72);}                         /* war .66 */
.lx-more-link a{color:rgba(238,242,247,.68);}                 /* war .6 */
.lx-cbox p{color:rgba(238,242,247,.72);}                      /* war .7 */
body.lx-skin .op-sofort .op-lead{color:rgba(255,255,255,.74);}          /* war .68 */
body.lx-skin .op-sofort .tl-card p{color:rgba(255,255,255,.7);}         /* war .62 */
body.lx-skin .op-sofort .op-foot,
body.lx-skin .op-sofort .tl-when{color:rgba(255,255,255,.65);}          /* war .55 */
/* TXT 260722 — Nachzügler Durchgängigkeits-Check (gleiche Skala wie TXT 260720):
   Fließtext dunkel ≈ .65–.7 · Sekundär/Meta ≈ .55–.6 · Kicker/Deko unverändert */
body.lx-skin .op-demo .demo-note{color:rgba(255,255,255,.65);}          /* Mainpage Demo-Erklärtext, war .5 */
body.lx-skin .op-demo .demo-meta{color:rgba(255,255,255,.58);}          /* Mainpage Demo-Meta, war .45 */
body.lx-skin .op-mehr .mg-card p{color:rgba(255,255,255,.7);}           /* Mainpage Leistungs-Teaser, war .6 (wie tl-card p); auf .op-mehr begrenzt, damit die Team-Rollen (about-icsl .mg-role) sichtbar bleiben (260915) */
body.lx-skin .op-nato .op-foot{color:rgba(238,242,247,.65);}            /* Mainpage NATO-Fußzeile, war .55 (wie op-sofort) */
body.lx-skin .ov-cta p{color:rgba(255,255,255,.7);}                     /* CTA-Lead Übersichtsseiten, war .6 */
body.lx-skin .stat-label{color:rgba(255,255,255,.65);}                  /* who-its-for Stat-Labels, war .55 */
body.lx-skin .dr-cap{color:rgba(255,255,255,.55);}                      /* Drone-Bildunterschriften, war .4 */
body.lx-skin .cta-section .section-lead{color:rgba(255,255,255,.65);}   /* CTA-Band-Lead site-weit, war .5 */
@media(max-width:735px){
  :root{--lx-faint:rgba(238,242,247,.74);--lx-muted:rgba(238,242,247,.76);}
  .lx-mani-out{color:rgba(238,242,247,.68);}
  .lx-sub{color:rgba(238,242,247,.78);}
}