:root{
  --g:#8cff00;
  --g2:#c8ff66;
  --bg:#010201;
  --panel:rgba(3,8,3,.76);
  --line:rgba(140,255,0,.56);
  --soft:rgba(140,255,0,.10);
  --white:#f7f9f4;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#010201;color:var(--white);font-family:Arial,Helvetica,sans-serif}
body{min-height:100svh;overflow-x:hidden}
.screen{
  position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 74% 34%,rgba(140,255,0,.17),transparent 22%),
    radial-gradient(circle at 26% 58%,rgba(140,255,0,.05),transparent 30%),
    linear-gradient(135deg,#010201 0%,#061006 48%,#010201 100%);
  isolation:isolate;
}
.screen::before{
  content:"";position:absolute;inset:10px;z-index:1;pointer-events:none;
  border:1px solid rgba(140,255,0,.62);
  clip-path:polygon(0 0,18% 0,20% 2%,42% 2%,44% 0,76% 0,78% 2%,100% 2%,100% 96%,98% 98%,79% 98%,77% 100%,44% 100%,42% 98%,2% 98%,0 96%);
  box-shadow:inset 0 0 30px rgba(140,255,0,.06),0 0 20px rgba(140,255,0,.08);
}
.screen::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,transparent 0 79px,rgba(140,255,0,.022) 80px),
    repeating-linear-gradient(0deg,transparent 0 79px,rgba(140,255,0,.016) 80px);
}
.noise{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.18;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.03) 0 1px,transparent 1.2px),
    radial-gradient(circle at 70% 60%,rgba(140,255,0,.04) 0 1px,transparent 1.2px);
  background-size:17px 17px,23px 23px;
}
.scan{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.18;
  background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(140,255,0,.028) 5px,transparent 6px);
  animation:scanMove 8s linear infinite;
}
.mesh{
  position:absolute;z-index:0;left:4%;top:10%;width:58%;height:70%;opacity:.28;
  background:
    linear-gradient(90deg,transparent 49.8%,rgba(140,255,0,.18) 50%,transparent 50.2%),
    linear-gradient(0deg,transparent 49.8%,rgba(140,255,0,.12) 50%,transparent 50.2%);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse at 50% 50%,#000 0 45%,transparent 78%);
}
.frame{
  position:absolute;z-index:2;pointer-events:none;border:1px solid rgba(140,255,0,.16);
}
.frame-a{left:3%;top:9%;width:38%;height:72%;border-radius:36% 7% 22% 8%}
.frame-b{right:7%;top:11%;width:31%;height:67%;border-radius:50%;opacity:.46}
.micro{
  position:absolute;z-index:5;color:rgba(183,255,66,.62);font-size:.48rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase
}
.micro-1{left:26px;top:54px}.micro-2{left:26px;top:72px}.micro-3{right:28px;bottom:46px;text-align:right}
.hero{
  position:relative;z-index:6;width:min(1380px,96vw);min-height:min(820px,92svh);
  display:grid;grid-template-columns:minmax(0,1.13fr) minmax(360px,.87fr);align-items:center;
}
.copy{position:relative;z-index:8;padding:20px 0 72px 54px}
.date{color:var(--g2);font-size:.76rem;font-weight:900;letter-spacing:.48em;margin-bottom:12px}
.title-shell{position:relative;width:min(800px,96%)}
.eyebrow{
  color:#fff;font-size:clamp(2.7rem,5.1vw,5.1rem);font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  text-shadow:0 3px 18px #000
}
h1{
  position:relative;margin:7px 0 0;font-size:clamp(6rem,12.5vw,12.4rem);line-height:.76;letter-spacing:.015em;
  color:rgba(5,12,3,.2);-webkit-text-stroke:2px var(--g2);text-transform:uppercase;
  text-shadow:0 0 8px var(--g),0 0 22px rgba(140,255,0,.78),0 0 62px rgba(140,255,0,.30),0 18px 40px rgba(0,0,0,.86);
  animation:titleBreath 4.6s ease-in-out infinite;
}
h1::before{
  content:"";position:absolute;left:-2%;right:-7%;top:51%;height:2px;
  background:linear-gradient(90deg,transparent,var(--g),#fff,var(--g),transparent);box-shadow:0 0 15px var(--g);
  animation:titleScan 4.1s ease-in-out infinite;
}
.title-bars{display:flex;gap:7px;margin-top:14px;width:63%}
.title-bars span{height:7px;background:var(--g);box-shadow:0 0 8px rgba(140,255,0,.5)}
.title-bars span:nth-child(1){width:8%}.title-bars span:nth-child(2){width:13%}.title-bars span:nth-child(3){width:22%}.title-bars span:nth-child(4){width:15%}.title-bars span:nth-child(5){width:9%}
.quote-panel{
  position:relative;width:min(760px,94%);margin-top:28px;padding:20px 30px 18px;
  background:linear-gradient(90deg,rgba(140,255,0,.05),rgba(0,0,0,.75) 28%,rgba(0,0,0,.62));
  border-top:1px solid rgba(140,255,0,.44);border-bottom:1px solid rgba(140,255,0,.30);
  box-shadow:inset 0 0 25px rgba(140,255,0,.025),0 18px 40px rgba(0,0,0,.25);
}
.quote-panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 14px,rgba(140,255,0,.02) 15px);
}
.quote-panel p{position:relative;z-index:2;margin:0;text-align:center;font-size:clamp(1.02rem,1.45vw,1.3rem);line-height:1.45;font-weight:700}
.quote-panel .accent{margin-top:7px}.quote-panel strong{color:var(--g);text-shadow:0 0 13px rgba(140,255,0,.5)}
.q-corner{position:absolute;width:22px;height:22px;z-index:3}.q1{left:0;top:0;border-left:2px solid var(--g);border-top:2px solid var(--g)}.q2{right:0;bottom:0;border-right:2px solid var(--g);border-bottom:2px solid var(--g)}
.signal{display:flex;align-items:center;gap:10px;width:91%;margin:13px auto -3px}
.signal span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--g));opacity:.72}.signal span:last-child{transform:scaleX(-1)}
.signal i{width:34px;height:14px;position:relative}
.signal i::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 26%,var(--g) 27% 31%,transparent 32% 42%,var(--g) 43% 48%,transparent 49% 56%,var(--g) 57% 61%,transparent 62%);filter:drop-shadow(0 0 6px var(--g))}
.count-head{
  width:min(810px,98%);display:flex;align-items:center;gap:12px;margin:18px 0 13px;color:var(--g);
  font-size:.72rem;font-weight:900;letter-spacing:.48em;text-transform:uppercase
}
.count-head span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--g))}.count-head span:last-child{transform:scaleX(-1)}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;width:min(820px,98%)}
.cell{
  position:relative;overflow:hidden;padding:19px 8px 15px;text-align:center;
  background:
    linear-gradient(180deg,rgba(17,31,8,.92),rgba(1,4,1,.97)),
    repeating-linear-gradient(0deg,transparent 0 11px,rgba(140,255,0,.03) 12px);
  border:1px solid rgba(140,255,0,.82);
  clip-path:polygon(12% 0,88% 0,100% 18%,100% 82%,88% 100%,12% 100%,0 82%,0 18%);
  box-shadow:inset 0 0 34px rgba(140,255,0,.09),0 0 20px rgba(140,255,0,.17);
}
.cell::before{
  content:"";position:absolute;left:-35%;top:0;width:25%;height:100%;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(185,255,80,.22),transparent);animation:cellSweep 5.2s linear infinite;
}
.cell-code{position:absolute;top:6px;right:14px;color:rgba(183,255,66,.46);font-size:.42rem;letter-spacing:.12em}
.cell-cut{position:absolute;width:22px;height:22px}.cell-cut.tl{left:3px;top:3px;border-left:1px solid var(--g);border-top:1px solid var(--g)}.cell-cut.br{right:3px;bottom:3px;border-right:1px solid var(--g);border-bottom:1px solid var(--g)}
.num{position:relative;z-index:2;font-size:clamp(2.7rem,5.1vw,5rem);line-height:.92;font-weight:900;font-variant-numeric:tabular-nums;color:#fafff7;text-shadow:0 0 9px rgba(255,255,255,.35),0 0 21px rgba(140,255,0,.56)}
.lab{position:relative;z-index:2;margin-top:9px;color:var(--g);font-size:.68rem;font-weight:900;letter-spacing:.22em}
.footer{width:min(820px,98%);margin-top:22px;display:flex;justify-content:center;align-items:center;gap:12px;color:rgba(255,255,255,.72);font-size:.69rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.footer i{width:5px;height:5px;border-radius:50%;background:var(--g);box-shadow:0 0 9px var(--g)}
.finished{display:none;width:min(820px,98%);margin-top:26px;color:var(--g);font-size:clamp(1.6rem,3vw,3rem);font-weight:900;text-align:center;text-transform:uppercase;text-shadow:0 0 24px rgba(140,255,0,.55)}
.visual{position:relative;align-self:stretch;min-height:700px;overflow:visible}
.visual::before{
  content:"";position:absolute;right:-8%;top:6%;width:118%;height:89%;background:
  radial-gradient(ellipse at 54% 44%,rgba(140,255,0,.22),transparent 29%),
  radial-gradient(ellipse at 54% 48%,rgba(140,255,0,.07),transparent 56%);filter:blur(7px)
}
.portrait{position:absolute;z-index:7;right:-6%;bottom:-5%;width:min(123%,700px);height:auto;filter:drop-shadow(-2px 0 0 rgba(140,255,0,.6)) drop-shadow(0 0 15px rgba(140,255,0,.34)) drop-shadow(0 30px 46px rgba(0,0,0,.8))}
.orb,.target{position:absolute;border-radius:50%;z-index:2;pointer-events:none}
.orb{border:1px solid rgba(140,255,0,.18)}.orb-1{width:460px;height:460px;left:-55px;top:78px;animation:spin 22s linear infinite}.orb-2{width:300px;height:300px;left:25px;top:160px;border-style:dashed;animation:spinBack 15s linear infinite}
.target{border:1px solid rgba(140,255,0,.10)}.target-1{width:520px;height:520px;left:-86px;top:49px}.target-2{width:170px;height:170px;left:91px;top:225px}
.orb::before,.orb::after,.target::before,.target::after{content:"";position:absolute;left:50%;top:50%;background:rgba(140,255,0,.18)}
.orb::before,.target::before{width:100%;height:1px;transform:translate(-50%,-50%)}.orb::after,.target::after{width:1px;height:100%;transform:translate(-50%,-50%)}
.data-stack{position:absolute;z-index:8;right:3%;bottom:8%;display:flex;flex-direction:column;gap:4px;text-align:right;color:rgba(183,255,66,.58);font-size:.48rem;font-weight:900;letter-spacing:.16em}
.portrait-glitch{position:absolute;z-index:8;left:-15%;width:54%;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 9px,rgba(140,255,0,.34) 10px 12px,transparent 13px 18px);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 76%,transparent)}
.pg-1{top:11%;height:28%;opacity:.65;animation:glitch1 4.3s steps(1,end) infinite}.pg-2{top:39%;height:24%;opacity:.38;animation:glitch2 5.6s steps(1,end) infinite}.pg-3{top:63%;height:20%;opacity:.22;animation:glitch3 6.8s steps(1,end) infinite}
.portrait-scanline{position:absolute;z-index:9;right:-4%;top:8%;width:96%;height:2px;background:linear-gradient(90deg,transparent,var(--g2),transparent);box-shadow:0 0 18px var(--g);opacity:.36;animation:portraitScan 5.6s ease-in-out infinite}
.portrait-grid{position:absolute;z-index:6;left:-13%;top:15%;width:48%;height:67%;background:repeating-linear-gradient(0deg,transparent 0 14px,rgba(140,255,0,.10) 15px);opacity:.44}
.bottom-console{position:absolute;z-index:7;left:50%;bottom:12px;transform:translateX(-50%);width:min(820px,70vw);display:grid;grid-template-columns:1fr 90px 1fr;align-items:center;gap:14px}
.console-left,.console-right{display:flex;gap:7px}.console-right{justify-content:flex-end}.console-left span,.console-right span{height:5px;background:var(--g);opacity:.45;box-shadow:0 0 6px rgba(140,255,0,.45)}.console-left span:nth-child(1),.console-right span:nth-child(4){width:14%}.console-left span:nth-child(2),.console-right span:nth-child(3){width:23%}.console-left span:nth-child(3),.console-right span:nth-child(2){width:34%}.console-left span:nth-child(4),.console-right span:nth-child(1){width:20%}
.console-core{color:var(--g);font-size:2rem;font-weight:900;text-align:center;text-shadow:0 0 13px rgba(140,255,0,.6);border:1px solid rgba(140,255,0,.35);padding:4px 8px;clip-path:polygon(14% 0,86% 0,100% 30%,100% 70%,86% 100%,14% 100%,0 70%,0 30%)}
@keyframes scanMove{to{transform:translateY(6px)}}@keyframes titleBreath{0%,100%{filter:brightness(1)}50%{filter:brightness(1.16)}}@keyframes titleScan{0%{transform:translateX(-7%);opacity:.2}50%{opacity:.9}100%{transform:translateX(7%);opacity:.2}}@keyframes cellSweep{0%{left:-38%}36%,100%{left:132%}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes spinBack{to{transform:rotate(-360deg)}}@keyframes portraitScan{0%,100%{top:8%;opacity:.04}50%{top:82%;opacity:.42}}@keyframes glitch1{0%,80%,100%{transform:translateX(0)}82%{transform:translateX(-12px)}84%{transform:translateX(8px)}86%{transform:translateX(-4px)}88%{transform:translateX(0)}}@keyframes glitch2{0%,74%,100%{transform:translateX(0)}76%{transform:translateX(10px)}78%{transform:translateX(-6px)}80%{transform:translateX(4px)}82%{transform:translateX(0)}}@keyframes glitch3{0%,68%,100%{transform:translateX(0)}70%{transform:translateX(-7px)}72%{transform:translateX(5px)}74%{transform:translateX(0)}}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:24px}.copy{order:2;padding:0 12px 80px;text-align:center}.visual{order:1;min-height:335px;margin-bottom:-12px}.portrait{right:50%;bottom:-3%;width:min(74vw,440px);transform:translateX(50%)}.visual::before{right:50%;transform:translateX(50%);width:80%;height:82%}.orb,.target,.portrait-glitch,.portrait-scanline,.portrait-grid,.data-stack,.micro{display:none}.title-shell,.quote-panel,.count-head,.countdown,.footer,.finished{margin-left:auto;margin-right:auto}.title-bars{margin-left:auto;margin-right:auto}.bottom-console{display:none}
}
@media(max-width:650px){
  .screen::before{inset:6px}.hero{width:100vw}.copy{padding:0 9px 46px}.visual{min-height:260px}.portrait{width:min(81vw,355px)}.date{font-size:.64rem;letter-spacing:.28em}.eyebrow{font-size:clamp(2rem,10vw,3.1rem);letter-spacing:.08em}h1{font-size:clamp(4.4rem,22vw,6.7rem);-webkit-text-stroke:1.5px var(--g2)}.quote-panel{width:96%;padding:16px 13px}.quote-panel p{font-size:1rem}.count-head{width:95%;letter-spacing:.28em}.countdown{width:96%;grid-template-columns:repeat(2,1fr);gap:9px}.num{font-size:3rem}.footer{width:92%;flex-wrap:wrap;line-height:1.6;letter-spacing:.09em}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* =========================================================
   MOBILE FIX 2026-08-19
   Nur für Smartphones. Desktop bleibt unverändert.
   ========================================================= */
@media (max-width:650px){

  html, body{
    width:100% !important;
    overflow-x:hidden !important;
  }

  .screen{
    min-height:100svh !important;
    overflow:visible !important;
    display:block !important;
    padding:0 0 24px !important;
  }

  .screen::before{
    inset:5px !important;
  }

  .hero{
    width:100% !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    padding:0 !important;
    margin:0 !important;
  }

  /* Portrait zuerst, aber deutlich kleiner und komplett sichtbar */
  .visual{
    order:1 !important;
    position:relative !important;
    width:100% !important;
    min-height:235px !important;
    height:235px !important;
    margin:0 0 -8px !important;
    overflow:hidden !important;
  }

  .visual::before{
    width:72% !important;
    height:88% !important;
    right:50% !important;
    top:4% !important;
    transform:translateX(50%) !important;
  }

  .portrait{
    position:absolute !important;
    right:50% !important;
    bottom:-8px !important;
    transform:translateX(50%) !important;
    width:auto !important;
    height:245px !important;
    max-width:none !important;
    object-fit:contain !important;
    filter:
      drop-shadow(-1px 0 0 rgba(140,255,0,.55))
      drop-shadow(0 0 10px rgba(140,255,0,.26))
      drop-shadow(0 18px 32px rgba(0,0,0,.72)) !important;
  }

  /* Die technischen Portrait-Effekte auf Mobile ausblenden */
  .orb,
  .target,
  .portrait-glitch,
  .portrait-scanline,
  .portrait-grid,
  .data-stack,
  .micro,
  .bottom-console{
    display:none !important;
  }

  /* Inhalt direkt unter dem Portrait */
  .copy{
    order:2 !important;
    width:100% !important;
    padding:0 14px 24px !important;
    text-align:center !important;
  }

  .date{
    margin:8px 0 8px !important;
    font-size:.62rem !important;
    letter-spacing:.30em !important;
  }

  .title-shell{
    width:100% !important;
    margin:0 auto !important;
  }

  .eyebrow{
    font-size:clamp(2rem,10.5vw,2.9rem) !important;
    letter-spacing:.07em !important;
    line-height:1 !important;
  }

  h1{
    margin:5px auto 0 !important;
    font-size:clamp(4rem,21vw,5.8rem) !important;
    line-height:.78 !important;
    -webkit-text-stroke:1.4px var(--g2) !important;
  }

  .title-bars{
    width:62% !important;
    margin:10px auto 0 !important;
    justify-content:center !important;
  }

  /* Leitsatz kompakter */
  .quote-panel{
    width:94% !important;
    margin:20px auto 0 !important;
    padding:15px 13px 13px !important;
  }

  .quote-panel p{
    font-size:.94rem !important;
    line-height:1.34 !important;
  }

  .quote-panel .accent{
    margin-top:6px !important;
  }

  .signal{
    margin-top:9px !important;
  }

  /* Countdown deutlich früher und in einer Reihe */
  .count-head{
    width:94% !important;
    margin:14px auto 10px !important;
    gap:7px !important;
    font-size:.62rem !important;
    letter-spacing:.28em !important;
  }

  .countdown{
    width:94% !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:5px !important;
  }

  .cell{
    min-width:0 !important;
    padding:12px 3px 10px !important;
  }

  .cell-code{
    display:none !important;
  }

  .num{
    font-size:clamp(1.85rem,10.5vw,2.7rem) !important;
    line-height:.95 !important;
  }

  .lab{
    margin-top:6px !important;
    font-size:.48rem !important;
    letter-spacing:.12em !important;
  }

  .footer{
    width:92% !important;
    margin:14px auto 0 !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:5px 8px !important;
    font-size:.55rem !important;
    line-height:1.35 !important;
    letter-spacing:.08em !important;
  }

  .footer i{
    width:3px !important;
    height:3px !important;
  }
}