/* WAKATEC – gemeinsames Design der Dienstleistungs-Seiten (passend zu index.html) */
:root{
  --cyan:#00d9ff; --cyan2:#38e6ff; --blue:#2e7fe0; --green:#3ddc84;
  --gold:#e3b341; --gold2:#ffd97a;
  --bg:#02060e; --panel:#081120; --panel2:#0a1526;
  --line:#122138; --line2:#1d3252; --ink:#e9f1fb; --muted:#8aa3c4;
  --glow:0 0 22px rgba(0,217,255,.35);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdh,76px) + 16px);}
body{background:var(--bg);color:var(--ink);
  font-family:"Segoe UI","Inter","Noto Sans",Arial,sans-serif;overflow-x:hidden;
  padding-top:var(--hdh,76px);}
a{color:var(--cyan);text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
svg.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-0.12em;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#16304e;border-radius:6px;}
::-webkit-scrollbar-track{background:transparent;}
::selection{background:rgba(0,217,255,.28);}

/* ---------- Animationen ---------- */
.rv{opacity:0;transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0s);}
.rv.rv-l{transform:translateX(-52px);}
.rv.rv-r{transform:translateX(52px);}
.rv.rv-s{transform:scale(.88) translateY(20px);}
.rv.in{opacity:1;transform:none;}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(0,217,255,.55);}50%{box-shadow:0 0 0 7px rgba(0,217,255,0);}}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@keyframes hueShift{0%{background-position:0% 50%;}100%{background-position:200% 50%;}}
@keyframes ringPulse{0%{transform:scale(1);opacity:.75;}100%{transform:scale(1.9);opacity:0;}}
@keyframes shimmer{0%{transform:translateX(-120%) skewX(-18deg);}100%{transform:translateX(240%) skewX(-18deg);}}
@keyframes revealScan{0%{top:-70%;opacity:1;}80%{opacity:1;}100%{top:135%;opacity:0;}}
@keyframes borderFlash{0%{border-color:rgba(0,217,255,.85);box-shadow:0 0 34px rgba(0,217,255,.3);}}
.rvscan{position:relative;overflow:hidden;}
.rvscan::after{content:"";position:absolute;left:-10%;right:-10%;height:55%;top:-70%;
  z-index:5;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(0,217,255,.17) 45%,rgba(0,217,255,.05) 58%,transparent);}
.rvscan.in::after{animation:revealScan .95s ease-out .15s 1 both;}
.rvflash.in{animation:borderFlash 1.4s ease-out .12s 1;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;
    transition-duration:.001s !important;scroll-behavior:auto !important;}
  .rv{opacity:1;transform:none;}
}

/* ---------- Seitenhintergrund (wie Startseite, animiert) ---------- */
@keyframes bgZoom{0%{transform:scale(1) translateY(0);}100%{transform:scale(1.09) translateY(-1.6%);}}
@keyframes bgScan{0%{top:-28%;}100%{top:118%;}}
#page-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#02060e;}
#page-bg .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  animation:bgZoom 38s ease-in-out infinite alternate;will-change:transform;}
#page-bg .shade{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(2,6,14,.72) 0%,rgba(2,6,14,.38) 34%,rgba(2,6,14,.14) 60%,rgba(2,6,14,.4) 100%),
             linear-gradient(180deg,rgba(2,6,14,.55) 0%,rgba(2,6,14,.28) 26%,rgba(2,6,14,.82) 72%,rgba(2,6,14,.94) 100%);}
#page-bg .grid{position:absolute;inset:0;opacity:.14;
  background-image:linear-gradient(rgba(0,217,255,.35) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,217,255,.35) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg,transparent 0%,#000 40%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 40%,transparent 100%);}
#page-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
#page-bg .bg-scan{position:absolute;left:0;right:0;height:24vh;top:-28%;
  background:linear-gradient(180deg,transparent,rgba(0,217,255,.07) 45%,rgba(0,217,255,.025) 62%,transparent);
  animation:bgScan 9s linear infinite;}
body > *:not(#page-bg):not(header){position:relative;z-index:1;}

/* ---------- Kopfnavigation ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:26px;
  padding:13px 34px;background:rgba(2,6,14,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,217,255,.12);}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,217,255,.5),transparent);
  background-size:200% 100%;animation:hueShift 6s linear infinite;pointer-events:none;}
.brand{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto;color:inherit;}
.brand-logo{width:40px;height:40px;flex:0 0 auto;color:var(--cyan);
  filter:drop-shadow(0 0 8px rgba(0,217,255,.55));transition:filter .3s,transform .3s;}
.brand:hover .brand-logo{filter:drop-shadow(0 0 14px rgba(0,217,255,.9));transform:scale(1.05);}
.brand-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.brand .t{font-size:21px;font-weight:700;letter-spacing:.3px;color:#fff;white-space:nowrap;}
.brand .s{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:7px;white-space:nowrap;}
.brand .s::before{content:"";width:24px;height:2px;display:inline-block;flex:0 0 auto;
  background:linear-gradient(90deg,var(--cyan),var(--green));}
nav{display:flex;gap:4px;margin:0 auto;}
nav a{color:var(--ink);font-size:15px;padding:8px 15px;border-radius:9px;position:relative;
  transition:color .2s,background .2s;}
nav a::after{content:"";position:absolute;left:15px;right:15px;bottom:3px;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--green));border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.16,1,.3,1);}
nav a:hover{background:rgba(0,217,255,.07);color:#fff;}
nav a:hover::after,nav a.active::after{transform:scaleX(1);}
nav a.active{color:#fff;}
nav .dd{position:relative;display:inline-flex;align-items:center;}
nav .dd .caret{margin-left:6px;font-size:10px;opacity:.8;display:inline-block;transition:transform .2s;}
nav .dd:hover .caret,nav .dd.open .caret{transform:rotate(180deg);}
.dd-menu{display:block;position:absolute;top:100%;left:50%;transform:translateX(-50%);
  padding-top:10px;min-width:305px;z-index:110;opacity:0;visibility:hidden;transition:opacity .18s;}
nav .dd:hover .dd-menu,nav .dd.open .dd-menu,nav .dd:focus-within .dd-menu{opacity:1;visibility:visible;}
.dd-inner{display:block;background:rgba(7,15,29,.97);border:1px solid var(--line2);
  border-radius:13px;padding:7px;box-shadow:0 18px 44px #000c,0 0 0 1px rgba(0,217,255,.08);}
.dd-inner a{display:block;padding:10px 12px;border-radius:9px;color:var(--ink);transition:background .18s;}
.dd-inner a:hover{background:rgba(0,217,255,.09);}
.dd-inner a.here{background:rgba(0,217,255,.12);}
.dd-t{display:block;font-size:14px;color:#fff;}
.dd-s{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.45;}
.hd-right{display:flex;align-items:center;gap:14px;}
.lang{display:flex;align-items:center;gap:6px;color:var(--ink);background:transparent;
  border:none;font-size:14px;padding:6px 8px;border-radius:8px;cursor:pointer;}
.lang:hover{background:rgba(0,217,255,.08);}
.lang .ic{color:var(--cyan);}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:26px;font-size:14.5px;
  padding:11px 22px;border:1px solid var(--line2);background:rgba(8,15,28,.6);color:#fff;
  position:relative;overflow:hidden;transition:border-color .25s,box-shadow .25s,transform .25s;}
.btn:hover{border-color:rgba(0,217,255,.65);box-shadow:0 0 18px rgba(0,217,255,.22);transform:translateY(-2px);}
.btn::before{content:"";position:absolute;top:0;bottom:0;width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transform:translateX(-120%) skewX(-18deg);pointer-events:none;}
.btn:hover::before{animation:shimmer .8s ease;}
.btn.primary{background:linear-gradient(120deg,#0797c8,#00d9ff 55%,#19b7e8);
  background-size:200% 100%;border-color:transparent;color:#02121c;font-weight:600;
  box-shadow:0 4px 24px rgba(0,217,255,.35);animation:hueShift 5s linear infinite alternate;}
.btn.primary:hover{box-shadow:0 6px 32px rgba(0,217,255,.55);}
.btn .arr{transition:transform .25s;}
.btn:hover .arr{transform:translateX(4px);}
/* Lockender Puls-Knopf (Handlungsaufruf) */
@keyframes ctaPulse{
  0%,100%{box-shadow:0 4px 24px rgba(0,217,255,.35);transform:none;}
  50%{box-shadow:0 6px 42px rgba(0,217,255,.7);transform:translateY(-2px) scale(1.03);}}
.btn.primary.cta-pulse{animation:hueShift 5s linear infinite alternate,
  ctaPulse 2.4s ease-in-out infinite;}

/* ---------- Kopfbereich der Dienstleistung ---------- */
.svc-hero{position:relative;padding:64px 34px 30px;max-width:1240px;margin:0 auto;}
.svc-hero .crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-bottom:18px;}
.svc-hero .crumb a{color:var(--muted);}
.svc-hero .crumb a:hover{color:var(--cyan);}
.hero-badge{display:inline-flex;align-items:center;gap:9px;
  font-size:12px;letter-spacing:.06em;color:#c8ecf8;
  border:1px solid rgba(0,217,255,.4);background:rgba(0,217,255,.07);
  padding:6px 14px;border-radius:22px;margin-bottom:16px;}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);
  animation:pulseDot 2.2s ease infinite;}
.svc-hero h1{font-size:clamp(32px,4vw,52px);line-height:1.06;font-weight:800;color:#fff;
  margin-bottom:16px;}
.svc-hero h1 .grad{background:linear-gradient(90deg,#00d9ff,#3ddc84,#00d9ff);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hueShift 6s linear infinite;filter:drop-shadow(0 0 18px rgba(0,217,255,.3));}
.svc-hero p.lead{font-size:15.5px;color:#c2d3e8;line-height:1.65;max-width:840px;}
.svc-hero .cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:22px;}

/* ---------- Hero mit Trailer-Video ---------- */
.svc-hero.with-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,460px);
  gap:30px;align-items:center;}
@media (max-width:1000px){.svc-hero.with-media{grid-template-columns:1fr;}}
.hero-video{position:relative;border-radius:16px;overflow:hidden;
  border:1px solid rgba(0,217,255,.3);background:#050b16;
  box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 34px rgba(0,217,255,.1);
  transition:box-shadow .35s,border-color .35s,transform .35s;}
.hero-video:hover{border-color:rgba(0,217,255,.6);transform:translateY(-4px);
  box-shadow:0 28px 80px rgba(0,0,0,.6),0 0 48px rgba(0,217,255,.22);}
.hero-video video{display:block;width:100%;height:auto;}
.hero-video .corner{position:absolute;width:20px;height:20px;z-index:3;pointer-events:none;
  border:2px solid rgba(0,217,255,.75);}
.hero-video .corner.tl{top:8px;left:8px;border-right:0;border-bottom:0;border-top-left-radius:7px;}
.hero-video .corner.tr{top:8px;right:8px;border-left:0;border-bottom:0;border-top-right-radius:7px;}
.hero-video .corner.bl{bottom:8px;left:8px;border-right:0;border-top:0;border-bottom-left-radius:7px;}
.hero-video .corner.br{bottom:8px;right:8px;border-left:0;border-top:0;border-bottom-right-radius:7px;}
.hero-video .vlabel{position:absolute;top:12px;left:12px;z-index:3;pointer-events:none;
  display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.08em;
  color:#d9f4fb;background:rgba(4,11,21,.8);border:1px solid rgba(0,217,255,.35);
  border-radius:16px;padding:4px 11px;backdrop-filter:blur(5px);}
.hero-video .vlabel .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);
  animation:pulseDot 2.2s ease infinite;}

/* ---------- Inhaltsbereiche ---------- */
section.page{padding:34px 34px 20px;max-width:1240px;margin:0 auto;}
section.page h2{font-size:clamp(21px,2.3vw,28px);color:#fff;margin-bottom:14px;line-height:1.25;}
section.page p{font-size:14px;color:#b9c9de;line-height:1.7;margin-bottom:14px;max-width:900px;}
/* ---------- FAQ-Seite (faq.html) ----------
   Fragen und Antworten stehen BEWUSST offen im Text und nicht in einem
   Aufklapp-Element: So findet sie jeder Leser mit Strg+F, und Suchmaschinen
   wie KI-Systeme lesen sie ohne Umweg. Optik folgt den Karten der übrigen
   Seiten (Kartenrahmen, Cyan-Akzent links, gleiche Schriftgrößen). */
.faq-nav{display:flex;flex-wrap:wrap;gap:8px;}
.faq-nav a{font-size:12.5px;color:#c2d3e8;border:1px solid var(--line2);
  background:rgba(10,20,36,.7);border-radius:20px;padding:6px 14px;
  transition:border-color .25s,color .25s,background .25s;}
.faq-nav a:hover{border-color:rgba(0,217,255,.55);color:#fff;
  background:rgba(0,217,255,.09);}
.faq-item{border-left:2px solid var(--line2);padding:2px 0 2px 16px;
  margin:0 0 20px;max-width:900px;transition:border-color .3s;}
.faq-item:hover{border-left-color:rgba(0,217,255,.55);}
.faq-item:target{border-left-color:var(--cyan);}
.faq-q{font-size:15.5px;color:#fff;font-weight:650;line-height:1.4;
  margin-bottom:7px;}
.faq-a{font-size:14px;color:#b9c9de;line-height:1.7;margin:0;}
@media (max-width:600px){
  .faq-item{padding-left:12px;margin-bottom:17px;}
  .faq-q{font-size:14.5px;}
}

.eyebrow{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);border:1px solid rgba(0,217,255,.35);background:rgba(0,217,255,.07);
  padding:4px 12px;border-radius:20px;margin-bottom:12px;}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
@media (max-width:900px){.cols2{grid-template-columns:1fr;}}
.card{background:linear-gradient(165deg,rgba(10,20,36,.92),rgba(6,12,24,.94));
  border:1px solid var(--line2);border-radius:16px;padding:22px;
  transition:transform .3s,border-color .3s,box-shadow .3s;}
.card:hover{transform:translateY(-4px);border-color:rgba(0,217,255,.5);
  box-shadow:0 14px 44px rgba(0,0,0,.45),0 0 26px rgba(0,217,255,.1);}
.card h3{font-size:16.5px;color:#fff;margin-bottom:12px;display:flex;gap:10px;align-items:center;}
.card h3 .ic{color:var(--cyan);}
.check-list,.dot-list{list-style:none;display:flex;flex-direction:column;gap:9px;}
.check-list li,.dot-list li{font-size:13.3px;color:#c6d6ea;line-height:1.5;padding-left:25px;position:relative;}
.check-list li::before{content:"✓";position:absolute;left:0;top:0;font-weight:700;color:var(--green);
  text-shadow:0 0 10px rgba(61,220,132,.5);}
.dot-list li::before{content:"";position:absolute;left:4px;top:7px;width:8px;height:8px;
  border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(0,217,255,.14);}

/* ---------- Anmeldung (Browser-Version) ---------- */
@keyframes loginShake{0%,100%{transform:none;}20%,60%{transform:translateX(-7px);}40%,80%{transform:translateX(7px);}}
.login-wrap{display:grid;grid-template-columns:minmax(300px,470px) minmax(0,1fr);
  gap:30px;align-items:start;max-width:1240px;margin:0 auto;padding:10px 34px 30px;}
@media (max-width:1000px){.login-wrap{grid-template-columns:1fr;padding:10px 16px 20px;}}
.login-card{position:relative;border-radius:18px;padding:26px 24px;
  background:linear-gradient(165deg,rgba(10,20,36,.95),rgba(6,12,24,.96));
  border:1px solid rgba(0,217,255,.3);
  box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 34px rgba(0,217,255,.1);
  display:flex;flex-direction:column;gap:14px;}
.login-card.err{animation:loginShake .45s ease;}
.login-card h2{font-size:21px;color:#fff;display:flex;gap:10px;align-items:center;margin:0;}
.login-card h2 .ic{color:var(--cyan);}
.login-card label{font-size:12px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;}
.login-card input{background:#070e1b;border:1px solid var(--line2);color:var(--ink);
  border-radius:9px;padding:11px 13px;font-size:14px;font-family:inherit;outline:none;width:100%;
  transition:border-color .2s,box-shadow .2s;}
.login-card input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,217,255,.12);}
.login-msg{font-size:12.5px;line-height:1.5;border-radius:9px;padding:9px 12px;display:none;}
.login-msg.on{display:block;}
.login-msg.bad{color:#ffb3a8;border:1px solid rgba(224,76,60,.5);background:rgba(224,76,60,.1);}
.login-msg.good{color:#b8f5cf;border:1px solid rgba(61,220,132,.5);background:rgba(61,220,132,.1);}
.login-note{font-size:11.5px;color:var(--muted);line-height:1.55;}
.login-side{display:flex;flex-direction:column;gap:16px;}

/* ---------- Galerie ---------- */
.g-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;}
.g-item{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:var(--panel);aspect-ratio:16/11;
  transition:border-color .25s,transform .25s,box-shadow .25s;}
.g-item:hover{border-color:rgba(0,217,255,.55);transform:translateY(-4px);
  box-shadow:0 16px 46px rgba(0,0,0,.5),0 0 26px rgba(0,217,255,.1);}
.g-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s ease;}
.g-item:hover img{transform:scale(1.06);}
.g-item .cap{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 10px;font-size:12px;color:#dbe9f8;
  background:linear-gradient(180deg,transparent,rgba(2,6,14,.85));}
.g-item.tall{aspect-ratio:3/4;}

/* ---------- CTA-Band ---------- */
.cta-band{margin:36px auto 0;max-width:1240px;padding:30px 34px;text-align:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(120deg,rgba(0,217,255,.08),rgba(61,220,132,.05));
  position:relative;overflow:hidden;}
.cta-band::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,217,255,.6),transparent);
  background-size:200% 100%;animation:hueShift 5s linear infinite;}
.cta-band h2{font-size:clamp(20px,2.2vw,27px);color:#fff;margin-bottom:8px;}
.cta-band p{color:var(--muted);font-size:14px;margin-bottom:18px;}
.cta-band .row{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;}

/* ---------- Fußzeile ---------- */
footer{border-top:1px solid var(--line);padding:26px 34px;margin-top:0;display:flex;flex-wrap:wrap;
  gap:14px;justify-content:space-between;color:var(--muted);font-size:12.5px;
  background:rgba(2,6,13,.9);}

/* ---------- Responsiv ---------- */
@media (max-width:900px){
  header{flex-wrap:wrap;gap:10px 14px;padding:10px 16px;}
  .brand-logo{width:32px;height:32px;}
  .brand .t{font-size:18px;}
  .hd-right{margin-left:auto;}
  nav{order:3;width:100%;margin:0;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
  nav::-webkit-scrollbar{display:none;}
  nav a{white-space:nowrap;font-size:14px;padding:6px 10px;}
  nav .dd .dd-menu{display:none;}
  nav .dd .caret{display:none;}
  .svc-hero{padding:36px 16px 20px;}
  section.page{padding:24px 16px 12px;}
  .cta-band{padding:24px 16px;}
  footer{padding:20px 16px;font-size:11.5px;}
}
@media (max-width:560px){
  .brand .s{display:none;}
  .brand .t{font-size:16.5px;}
  .svc-hero .cta .btn{width:100%;justify-content:center;}
}

/* ============================================================
   INSPECT-Bausteine (Ausbaustufen, Vergleich, Screenshots …)
   ============================================================ */
@keyframes dataFlow{0%{left:-12%;}100%{left:112%;}}
@keyframes scanline{0%{top:-10%;}100%{top:110%;}}

/* ---- Ausbaustufen-Karten ---- */
#tiers{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:18px 110px;
  padding:26px 34px 8px;max-width:1240px;margin:0 auto;}
#tiers::before{content:"";position:absolute;top:50%;left:6%;right:6%;height:1px;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(61,220,132,.35),rgba(46,127,224,.35),transparent);}
#tiers .flow{position:absolute;top:calc(50% - 2px);width:46px;height:5px;border-radius:4px;z-index:0;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  filter:blur(1px);animation:dataFlow 5s linear infinite;}
#tiers .flow.f3{animation-delay:2.5s;background:linear-gradient(90deg,transparent,var(--blue),transparent);}
@media (max-width:1050px){#tiers{grid-template-columns:1fr;}#tiers::before,#tiers .flow{display:none;}}
.tier-or{position:absolute;left:calc(50% - 23px);top:calc(50% - 23px);z-index:2;
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;letter-spacing:.05em;color:#02121c;text-transform:uppercase;
  background:linear-gradient(120deg,#0797c8,#00d9ff);pointer-events:none;
  box-shadow:0 0 22px rgba(0,217,255,.5);
  animation:floatY 4s ease-in-out infinite;}
@media (max-width:1050px){.tier-or{position:static;transform:none;margin:0 auto;}}
.tier{position:relative;z-index:1;border-radius:18px;padding:22px 22px 20px;
  background:linear-gradient(165deg,rgba(10,20,36,.92),rgba(6,12,24,.94));
  border:1px solid var(--line2);overflow:hidden;display:flex;flex-direction:column;gap:13px;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .35s;
  transform-style:preserve-3d;will-change:transform;}
.tier::after{content:"";position:absolute;left:-40%;right:-40%;height:46%;top:-10%;z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent);
  transform:rotate(-4deg);pointer-events:none;}
.tier:hover{border-color:var(--tc,#00d9ff);
  box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 40px rgba(0,217,255,.25);
  box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 40px color-mix(in srgb,var(--tc,#00d9ff) 28%,transparent);}
.tier.t-web{--tc:#3ddc84;}
.tier.t-win{--tc:#2e7fe0;}
.tier .scan{position:absolute;left:0;right:0;height:26%;top:-30%;z-index:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--tc) 10%,transparent),transparent);}
.tier:hover .scan{opacity:1;animation:scanline 1.6s linear infinite;}
.tier-top{display:flex;align-items:flex-start;gap:14px;position:relative;z-index:1;}
.tier-ic{width:52px;height:52px;border-radius:14px;flex:0 0 auto;position:relative;
  display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--tc);
  border:1px solid rgba(0,217,255,.5);background:rgba(0,217,255,.08);
  box-shadow:0 0 22px rgba(0,217,255,.22);
  border:1px solid color-mix(in srgb,var(--tc) 55%,transparent);
  background:color-mix(in srgb,var(--tc) 10%,transparent);
  box-shadow:0 0 22px color-mix(in srgb,var(--tc) 25%,transparent);
  animation:floatY 4.5s ease-in-out infinite;}
.tier:nth-child(odd) .tier-ic{animation-delay:.6s;}
.tier-ic::after{content:"";position:absolute;inset:-1px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--tc) 60%,transparent);opacity:0;}
.tier:hover .tier-ic::after{animation:ringPulse 1.4s ease-out infinite;}
.tier-eyebrow{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--tc);text-shadow:0 0 12px color-mix(in srgb,var(--tc) 45%,transparent);}
.tier-top h3{font-size:21px;color:#fff;margin-top:3px;line-height:1.2;}
.tier-body{display:grid;grid-template-columns:1fr 128px;gap:14px;align-items:start;position:relative;z-index:1;flex:1;}
@media (max-width:1250px){.tier-body{grid-template-columns:1fr;}}
.tier-list{list-style:none;display:flex;flex-direction:column;gap:8px;}
.tier-list li{font-size:12.9px;color:#c6d6ea;line-height:1.45;padding-left:24px;position:relative;}
.tier-list li::before{content:"✓";position:absolute;left:0;top:0;font-weight:700;color:var(--tc);
  text-shadow:0 0 10px color-mix(in srgb,var(--tc) 55%,transparent);}
.tier-vis{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/11;
  border:1px solid color-mix(in srgb,var(--tc) 35%,transparent);background:#0a1424;
  display:flex;align-items:center;justify-content:center;}
.tier-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease;opacity:.9;}
.tier:hover .tier-vis img{transform:scale(1.08);}
.winlogo{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:6px;
  width:82px;transform:skewY(-4deg);animation:floatY 5s ease-in-out infinite;}
.winlogo span{display:block;aspect-ratio:1;border-radius:4px;
  background:linear-gradient(135deg,#4aa3ff,#1263c9);
  box-shadow:0 0 18px rgba(46,127,224,.5);}
.winlogo span:nth-child(2){background:linear-gradient(135deg,#66b7ff,#2e7fe0);}
.winlogo span:nth-child(3){background:linear-gradient(135deg,#2e7fe0,#0d4fa8);}
.winlogo span:nth-child(4){background:linear-gradient(135deg,#8fcaff,#3f8ce8);}
.tier-cta{position:relative;z-index:1;margin-top:2px;}
.tier .btn{border-radius:12px;padding:10px 18px;font-size:13.8px;
  border-color:color-mix(in srgb,var(--tc) 45%,transparent);}
.tier .btn:hover{border-color:var(--tc);box-shadow:0 0 20px color-mix(in srgb,var(--tc) 35%,transparent);}

/* ---- Feature-Leiste ---- */
#quickfeat{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;
  padding:18px 34px 10px;max-width:1240px;margin:0 auto;}
.qf{display:flex;gap:12px;align-items:flex-start;border-radius:14px;padding:16px 15px;
  background:linear-gradient(165deg,rgba(9,17,31,.92),rgba(6,12,23,.92));
  border:1px solid var(--line);color:inherit;position:relative;overflow:hidden;
  transition:transform .3s,border-color .3s,box-shadow .3s;}
.qf:hover{transform:translateY(-4px);border-color:rgba(0,217,255,.5);box-shadow:0 10px 30px rgba(0,0,0,.4),var(--glow);}
.qf .ic-w{width:40px;height:40px;border-radius:11px;flex:0 0 auto;font-size:19px;
  display:flex;align-items:center;justify-content:center;color:var(--cyan);
  border:1px solid rgba(0,217,255,.3);background:rgba(0,217,255,.06);transition:transform .3s;}
.qf:hover .ic-w{transform:scale(1.12) rotate(-4deg);}
.qf h4{font-size:13.8px;color:#fff;line-height:1.3;margin-bottom:4px;}
.qf p{font-size:11.6px;color:var(--muted);line-height:1.5;margin:0;}

/* ---- Ausgangslage ---- */
.prob-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
.prob{background:linear-gradient(165deg,rgba(10,17,32,.92),rgba(8,13,24,.92));
  border:1px solid var(--line);border-radius:14px;padding:20px 18px;
  border-top:2px solid rgba(224,76,60,.55);transition:transform .3s,box-shadow .3s;}
.prob:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.45);}
.prob .ic-w{width:40px;height:40px;border-radius:10px;border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;color:#e0704c;margin-bottom:12px;}
.prob h3{font-size:15.5px;color:#fff;margin-bottom:7px;line-height:1.35;}
.prob p{font-size:13px;color:var(--muted);line-height:1.6;margin:0;}
.approach{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;
  background:linear-gradient(120deg,rgba(0,217,255,.08),rgba(61,220,132,.05));
  border:1px solid var(--line2);border-radius:16px;padding:26px;position:relative;overflow:hidden;}
.approach::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,217,255,.6),transparent);
  background-size:200% 100%;animation:hueShift 5s linear infinite;}
.approach h3{font-size:20px;color:#fff;margin-bottom:9px;}
.approach p{font-size:14px;color:#c4d2e6;line-height:1.62;margin:0;}
.approach-list{list-style:none;display:flex;flex-direction:column;gap:11px;}
.approach-list li{font-size:13.5px;color:#c4d2e6;line-height:1.5;padding-left:26px;position:relative;}
.approach-list li::before{content:"";position:absolute;left:2px;top:6px;width:9px;height:9px;
  border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(61,220,132,.16);}
@media (max-width:860px){.approach{grid-template-columns:1fr;gap:18px;padding:20px;}}

/* ---- Leistungs-Karten (Datenprodukte) ---- */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px;}
.svc-item{background:rgba(9,16,30,.9);border:1px solid var(--line);border-radius:14px;padding:22px 20px;
  display:flex;flex-direction:column;gap:12px;transition:border-color .25s,transform .25s,box-shadow .25s;}
.svc-item:hover{border-color:rgba(0,217,255,.5);transform:translateY(-3px);
  box-shadow:0 14px 44px rgba(0,0,0,.45),0 0 30px rgba(0,217,255,.08);}
.svc-item h3{font-size:17.5px;color:#fff;display:flex;gap:10px;align-items:center;margin:0;}
.svc-item > p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0;max-width:none;}
.svc-block{border-left:2px solid var(--line2);padding-left:13px;transition:border-color .25s;}
.svc-item:hover .svc-block{border-color:rgba(0,217,255,.45);}
.svc-block .lbl{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:5px;font-weight:600;}
.svc-block:last-child .lbl{color:var(--green);}
.svc-block p{font-size:12.8px;color:#a9bad2;line-height:1.62;margin:0;max-width:none;}

/* ---- Vergleich (drei Spalten) ---- */
/* Alle drei auf EINEN BLICK ohne Scrollen (Nutzerregel), aber in einer
   STUFUNG: Demo am kleinsten (.mini), Browser mittig, Desktop am größten
   und GOLDEN hervorgehoben (.pro). Deshalb align-items:center statt
   stretch – die kleineren Spalten stehen mittig neben der großen. */
.cmp{display:grid;grid-template-columns:.84fr 1fr 1.28fr;gap:18px;align-items:center;}
@media (max-width:1050px){.cmp{grid-template-columns:1fr 1fr;align-items:stretch;}
  .cmp-col,.cmp-col.mini{align-self:stretch;}
  .cmp-col.pro{grid-column:1/-1;}}
@media (max-width:700px){.cmp{grid-template-columns:1fr;}.cmp-col.pro{grid-column:auto;}}
.cmp-col{background:rgba(9,16,30,.92);border:1px solid var(--line);border-radius:16px;padding:22px 20px;
  display:flex;flex-direction:column;gap:14px;align-self:center;
  transition:border-color .3s,box-shadow .3s,transform .3s;scroll-margin-top:calc(var(--hdh,76px) + 24px);}
.cmp-col>.cmp-cta,.cmp-col>.btn{margin-top:auto;}
.cmp-col>.pro-note{margin-top:0;}
.cmp-col:hover{transform:translateY(-4px);}
.cmp-col:target{border-color:var(--cyan);
  box-shadow:0 0 0 2px rgba(0,217,255,.32),0 14px 40px rgba(0,217,255,.14);}
.cmp-col.pro:target{border-color:var(--gold2);
  box-shadow:0 0 0 2px rgba(227,179,65,.34),0 14px 40px rgba(227,179,65,.16);}
/* Demo: kleinste Karte – schmaler (Rasterspalte .84fr), niedriger (weniger
   Inhalt, keine Dehnung) und in allen Maßen eine Stufe kleiner. Sie soll
   sichtbar das kleinste Angebot sein, ohne unleserlich zu werden. */
.cmp-col.mini{padding:17px 16px;gap:11px;border-radius:14px;
  background:rgba(9,16,30,.8);}
.cmp-col.mini .cmp-head h3{font-size:17px;}
.cmp-col.mini .cmp-sub{font-size:12px;line-height:1.5;}
.cmp-col.mini .cmp-list{gap:6px;}
.cmp-col.mini .cmp-list li{font-size:12.2px;line-height:1.4;padding-left:23px;}
.cmp-col.mini .cmp-tag{font-size:9.5px;padding:2px 9px;margin-bottom:8px;}
.cmp-col.mini .btn{font-size:12.5px;padding:8px 12px;}
/* Desktop-Version: GOLD (Nutzerregel 2.4.6) – Rahmen, Verlauf und Schein
   in Gold statt Blau, damit auf einen Blick klar ist, was empfohlen wird. */
.cmp-col.pro{border-color:rgba(227,179,65,.6);
  background:linear-gradient(180deg,rgba(32,25,10,.92),rgba(10,14,22,.95));
  box-shadow:0 16px 50px rgba(227,179,65,.14);padding:26px 24px;}
.cmp-col.pro .cmp-head h3{font-size:23px;}
.cmp-col.pro .cmp-list li{font-size:13.5px;}
.cmp-col.pro .cmp-list li.yes::before{color:var(--gold2);
  text-shadow:0 0 10px rgba(227,179,65,.55);}
/* Goldener Handlungsknopf: eigener Puls, sonst käme der cyanfarbene
   ctaPulse-Schatten über das Gold (hueShift schiebt außerdem den Verlauf). */
@keyframes ctaPulseGold{
  0%,100%{box-shadow:0 4px 24px rgba(227,179,65,.38);transform:none;}
  50%{box-shadow:0 6px 42px rgba(227,179,65,.68);transform:translateY(-2px) scale(1.03);}}
.cmp-col.pro .btn.primary{background:linear-gradient(120deg,var(--gold),var(--gold2) 55%,var(--gold));
  background-size:100% 100%;border-color:transparent;color:#241a02;
  box-shadow:0 4px 24px rgba(227,179,65,.38);animation:none;}
.cmp-col.pro .btn.primary.cta-pulse{animation:ctaPulseGold 2.4s ease-in-out infinite;}
.cmp-col.pro .btn.primary:hover{box-shadow:0 6px 32px rgba(227,179,65,.6);}
.cmp-col.mid{border-color:rgba(61,220,132,.42);
  background:linear-gradient(180deg,rgba(9,20,26,.93),rgba(8,14,22,.93));}
.cmp-tag{display:inline-block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line2);border-radius:20px;padding:3px 11px;margin-bottom:10px;}
.cmp-tag.pro{color:#241a02;background:linear-gradient(90deg,var(--gold),var(--gold2));
  border-color:var(--gold);font-weight:600;}
.cmp-tag.mid{color:#0a1a10;background:var(--green);border-color:var(--green);font-weight:600;}
.cmp-head h3{font-size:20px;color:#fff;margin-bottom:6px;}
.cmp-sub{font-size:13px;color:var(--muted);line-height:1.55;margin:0;max-width:none;}
.cmp-list{list-style:none;display:flex;flex-direction:column;gap:8px;}
.cmp-list li{font-size:13px;line-height:1.45;padding-left:26px;position:relative;color:#c4d2e6;}
.cmp-list li b{color:#fff;font-weight:600;}
.cmp-list li.yes::before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:700;
  text-shadow:0 0 10px rgba(61,220,132,.5);}
.cmp-list li.no{color:var(--muted);}
.cmp-list li.no::before{content:"✕";position:absolute;left:1px;top:0;color:#7d6a52;font-weight:700;}
.cmp-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:2px;}

/* ---- Screenshots ---- */
.shots-head{margin:34px 0 16px;}
.shots-head h3{font-size:21px;color:#fff;margin-bottom:6px;}
.shots-head p{font-size:13.5px;color:var(--muted);line-height:1.6;max-width:760px;margin:0;}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;}
.shot{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .25s,transform .25s,box-shadow .25s;}
.shot.off{display:none;}
.shot:hover{border-color:rgba(0,217,255,.55);transform:translateY(-4px);
  box-shadow:0 16px 46px rgba(0,0,0,.5),0 0 26px rgba(0,217,255,.1);}
.shot-img{position:relative;aspect-ratio:16/10;background:#0a1220;overflow:hidden;}
.shot-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(3,8,16,.55));pointer-events:none;}
.shot-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease;}
.shot:hover .shot-img img{transform:scale(1.06);}
.shot figcaption{padding:15px 16px 17px;display:flex;flex-direction:column;gap:6px;}
.shot-tag{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan);font-weight:600;}
.shot h4{font-size:15px;color:#fff;line-height:1.35;}
.shot figcaption p{font-size:12.6px;color:var(--muted);line-height:1.6;margin:0;max-width:none;}

/* ---- Nav- und Untermenü-Symbole ---- */
@keyframes navPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.2);}}
nav a{display:inline-flex;align-items:center;gap:7px;}
nav a .nic{color:var(--cyan);flex:0 0 auto;
  filter:drop-shadow(0 0 6px rgba(0,217,255,.4));transition:transform .25s;}
nav a:hover .nic{transform:translateY(-2px) scale(1.18) rotate(-6deg);}
nav a.active .nic{animation:navPulse 2.4s ease infinite;}
.dd-inner a{display:flex;gap:11px;align-items:flex-start;}
.dd-ic{width:32px;height:32px;border-radius:9px;flex:0 0 auto;font-size:15px;
  display:flex;align-items:center;justify-content:center;color:var(--cyan);
  border:1px solid rgba(0,217,255,.3);background:rgba(0,217,255,.06);
  transition:transform .25s,box-shadow .25s,border-color .25s;margin-top:1px;}
.dd-inner a:hover .dd-ic{transform:scale(1.12) rotate(-6deg);
  box-shadow:0 0 14px rgba(0,217,255,.35);border-color:var(--cyan);}
.dd-txt{min-width:0;}

/* ---- Vollversion hervorheben ---- */
@keyframes proGlow{
  0%,100%{box-shadow:0 16px 50px rgba(46,127,224,.15),0 0 24px rgba(46,127,224,.18);}
  50%{box-shadow:0 16px 60px rgba(46,127,224,.3),0 0 44px rgba(0,217,255,.22);}}
.best{position:relative;overflow:hidden;}
.best .best-badge{position:absolute;top:17px;right:-37px;transform:rotate(45deg);z-index:6;
  background:linear-gradient(90deg,#2e7fe0,#00d9ff);color:#03111e;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 42px;
  box-shadow:0 4px 16px rgba(0,217,255,.4);pointer-events:none;}
/* Goldener Schein NUR für die Vergleichsspalte der Desktop-Version –
   die Download-Kachel (.tier.t-win.best) bleibt blau/cyan. */
@keyframes goldGlow{
  0%,100%{box-shadow:0 16px 50px rgba(227,179,65,.17),0 0 24px rgba(227,179,65,.2);}
  50%{box-shadow:0 16px 62px rgba(227,179,65,.34),0 0 46px rgba(255,217,122,.26);}}
.cmp-col.pro.best{animation:goldGlow 3.2s ease-in-out infinite;border-color:rgba(255,217,122,.62);}
.cmp-col.pro.best .best-badge{background:linear-gradient(90deg,var(--gold),var(--gold2));
  color:#241a02;box-shadow:0 4px 16px rgba(227,179,65,.45);}
.tier.t-win.best{animation:proGlow 3.2s ease-in-out infinite;border-color:rgba(46,127,224,.65);}
.pro-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px;}
.pro-chips span{font-size:11px;color:#cfe7ff;border:1px solid rgba(46,127,224,.5);
  background:rgba(46,127,224,.12);border-radius:14px;padding:3px 10px;white-space:nowrap;}
.pro-note{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:7px;margin:6px 0 0;}
.pro-note .ic{color:var(--green);flex:0 0 auto;}
/* Prüfsumme des Installers (v2.4.5) */
/* Ruhige „Verifiziert“-Zeile statt Warnkasten: Schild + Version + Herausgeber,
   die lange Prüfsumme nur auf Wunsch (details) */
.dl-sha{margin:8px 0 0;padding:8px 12px;border:1px solid rgba(61,220,132,.28);border-radius:10px;
  background:linear-gradient(90deg,rgba(61,220,132,.09),rgba(61,220,132,.03));font-size:11.5px;color:var(--muted);}
.dl-sha[hidden]{display:none;}
.dl-sha-row{display:flex;align-items:center;gap:8px;}
.dl-sha-row .ic{color:var(--green,#3ddc84);flex:0 0 auto;width:18px;height:18px;}
.dl-sha-k{font-weight:600;color:var(--text,#e8eef8);}
.dl-sha-d{margin-top:4px;}
.dl-sha-d summary{cursor:pointer;list-style:none;font-size:11px;color:var(--cy,#7fd6ff);opacity:.85;
  padding:2px 0 0 26px;user-select:none;}
.dl-sha-d summary::-webkit-details-marker{display:none;}
.dl-sha-d summary::before{content:"›";display:inline-block;margin-right:5px;transition:transform .2s;}
.dl-sha-d[open] summary::before{transform:rotate(90deg);}
.dl-sha-d summary:hover{opacity:1;}
.dl-sha-body{padding:6px 0 2px 26px;}
.dl-sha-body>code{display:block;font-size:10.5px;word-break:break-all;color:var(--cy,#7fd6ff);
  user-select:all;margin-bottom:6px;opacity:.9;}
.dl-copy{font:inherit;font-size:11px;padding:3px 10px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:inherit;}
.dl-copy:hover{background:rgba(255,255,255,.12);}
.dl-sha-h{margin:6px 0 0;line-height:1.45;}
.dl-sha-h code{font-size:10.5px;}

/* ---- Workflow (Auftrag → INSPECT-Datei) ---- */
#workflow{padding:44px 34px 34px;border-top:1px solid var(--line);
  background:rgba(3,8,16,.55);backdrop-filter:blur(3px);}
#workflow .wf-head{text-align:center;max-width:760px;margin:0 auto 34px;}
#workflow .wf-head h2{font-size:clamp(22px,2.4vw,30px);color:#fff;line-height:1.2;margin-top:4px;}
#workflow .wf-head p{color:var(--muted);font-size:13.5px;margin-top:8px;line-height:1.6;}
.wf-steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;
  max-width:1240px;margin:0 auto;}
.wf-line{position:absolute;top:27px;left:9%;right:9%;height:2px;z-index:0;border-radius:2px;
  background:linear-gradient(90deg,rgba(0,217,255,.08),rgba(0,217,255,.5) 25%,rgba(61,220,132,.5) 55%,rgba(46,127,224,.5) 80%,rgba(46,127,224,.08));}
.wf-flow{position:absolute;top:25px;width:46px;height:6px;border-radius:4px;z-index:0;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  filter:blur(1px);animation:dataFlow 6s linear infinite;}
.wf-flow.f2{animation-delay:3s;background:linear-gradient(90deg,transparent,var(--green),transparent);}
.wf-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:9px;padding:0 6px;transition:transform .3s;}
.wf-step:hover{transform:translateY(-5px);}
.wf-step{--sc:#00d9ff;}
.wf-step.c2{--sc:#39c0ba;}
.wf-step.c3{--sc:#3ddc84;}
.wf-step.c4{--sc:#5aa9f0;}
.wf-step.c5{--sc:#2e7fe0;}
.wf-ic{position:relative;width:54px;height:54px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:23px;color:var(--sc);
  border:1.4px solid rgba(0,217,255,.55);box-shadow:0 0 22px rgba(0,217,255,.22);
  border:1.4px solid color-mix(in srgb,var(--sc) 60%,transparent);
  background:rgba(4,12,22,.95);
  box-shadow:0 0 22px color-mix(in srgb,var(--sc) 25%,transparent);
  animation:floatY 4.6s ease-in-out infinite;transition:box-shadow .3s;}
.wf-step.c2 .wf-ic{animation-delay:.4s;}
.wf-step.c3 .wf-ic{animation-delay:.8s;}
.wf-step.c4 .wf-ic{animation-delay:1.2s;}
.wf-step.c5 .wf-ic{animation-delay:1.6s;}
.wf-step:hover .wf-ic{box-shadow:0 0 34px color-mix(in srgb,var(--sc) 50%,transparent);}
.wf-ic::after{content:"";position:absolute;inset:-1.4px;border-radius:50%;
  border:1.4px solid rgba(0,217,255,.6);
  border:1.4px solid color-mix(in srgb,var(--sc) 65%,transparent);
  animation:ringPulse 2.8s ease-out infinite;}
.wf-step.c2 .wf-ic::after{animation-delay:.55s;}
.wf-step.c3 .wf-ic::after{animation-delay:1.1s;}
.wf-step.c4 .wf-ic::after{animation-delay:1.65s;}
.wf-step.c5 .wf-ic::after{animation-delay:2.2s;}
.wf-num{position:absolute;top:-5px;right:-5px;width:20px;height:20px;border-radius:50%;
  background:var(--sc);color:#02121c;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 12px rgba(0,217,255,.55);
  box-shadow:0 0 12px color-mix(in srgb,var(--sc) 60%,transparent);}
.wf-step h4{font-size:14.2px;color:#fff;line-height:1.3;}
.wf-step p{font-size:11.8px;color:var(--muted);line-height:1.5;max-width:200px;margin:0;}
@media (max-width:900px){
  #workflow{padding:32px 16px 26px;}
  .wf-steps{grid-template-columns:1fr 1fr;gap:22px 12px;}
  .wf-line,.wf-flow{display:none;}
}
@media (max-width:560px){.wf-steps{grid-template-columns:1fr;}}

/* ---- Klapp-Karten (Vorderseite/Rückseite, 3D-Flip beim Zeigen) ----
   Beide Seiten liegen im selben Grid-Feld: die Karte ist damit immer so
   hoch wie die längere Seite – nichts wird abgeschnitten oder gescrollt. */
.flip{position:relative;perspective:1100px;cursor:pointer;outline:none;}
.flip-inner{position:relative;display:grid;width:100%;
  transform-style:preserve-3d;transition:transform .7s cubic-bezier(.35,.1,.2,1);}
.flip.on .flip-inner{transform:rotateY(180deg);}
@media (hover:hover){.flip:hover .flip-inner{transform:rotateY(180deg);}}
.flip-face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:14px;border:1px solid var(--line);padding:20px 19px;
  background:linear-gradient(165deg,rgba(10,19,35,.96),rgba(7,13,25,.96));
  display:flex;flex-direction:column;gap:12px;overflow:hidden;
  transition:border-color .3s,box-shadow .3s;}
.flip:hover .flip-face{border-color:rgba(0,217,255,.5);
  box-shadow:0 14px 44px rgba(0,0,0,.45),0 0 26px rgba(0,217,255,.1);}
.flip:focus-visible .flip-face{border-color:var(--cyan);}
.flip-face h3{font-size:17.5px;color:#fff;display:flex;gap:10px;align-items:center;margin:0;}
.flip-front>p{font-size:13.5px;color:var(--muted);line-height:1.65;margin:0;}
.flip-back{transform:rotateY(180deg);}
.flip-hint{margin-top:auto;align-self:flex-end;width:30px;height:30px;flex:0 0 auto;
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--cyan);border:1px solid rgba(0,217,255,.35);
  background:rgba(0,217,255,.06);transition:box-shadow .3s,border-color .3s;}
.flip:hover .flip-hint{border-color:var(--cyan);box-shadow:0 0 12px rgba(0,217,255,.35);}
.flip-hint .ic{transition:transform .45s;}
.flip:hover .flip-hint .ic{transform:rotate(180deg);}
/* Variante für die Ausgangslage-Karten (roter Akzent oben) */
.flip-prob .flip-face{border-top:2px solid rgba(224,76,60,.55);}
.flip-prob .flip-face h3{font-size:15.5px;line-height:1.35;}
.flip-prob .ic-w{width:40px;height:40px;border-radius:10px;border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;color:#e0704c;flex:0 0 auto;}
.flip-prob .flip-back p{font-size:13px;color:#c6d6ea;line-height:1.6;margin:0;}

/* ---- Warum-Kacheln + Fußnote ---- */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:16px;margin-top:26px;}
.why-item{background:#081020;border:1px solid var(--line);border-radius:14px;padding:18px 17px;
  transition:transform .3s,border-color .3s;}
.why-item:hover{transform:translateY(-4px);border-color:rgba(0,217,255,.4);}
.why-item .ic-w{width:38px;height:38px;border-radius:10px;border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;color:var(--cyan);margin-bottom:11px;}
.why-item h4{font-size:14.5px;color:#fff;margin-bottom:6px;}
.why-item p{font-size:12.6px;color:var(--muted);line-height:1.6;margin:0;}
.sw-foot{margin-top:22px;font-size:13.2px;color:var(--muted);line-height:1.65;
  border-left:2px solid var(--cyan);padding:2px 0 2px 14px;max-width:940px;}
.sw-foot b{color:#dbe6f5;font-weight:600;}
@media (max-width:900px){
  #tiers{padding:18px 16px 4px;gap:14px;}
  .tier-body{grid-template-columns:1fr;}
  #quickfeat{padding:14px 16px 6px;}
}