/* Design «Zukunft» für modernhosting.ch - Steigerung von style.css (wird danach geladen).
   Bausteine wie in den neuen Anmeldeseiten: Glas-Karten mit Andock-Ecken und Kantenlicht,
   das dem Zeiger folgt, Planetenhorizont, Flugleiste mit Countdown T−3 … T−0, Startimpuls,
   Startrampe am Seitenende, Zeitachse «gestern → heute».
   Nur Tokens aus style.css (:root), keine Farbwerte in PHP/HTML, keine externen Quellen.
   Bewegung: nur transform/opacity, pausiert über die vorhandenen Klassen (.motion-paused,
   .motion-offscreen, .page-hidden) und steht bei «Bewegung reduzieren» still. */

@property --edge { syntax: '<angle>'; initial-value: 200deg; inherits: true; }

:root {
  --z-cyan-50: rgba(105, 225, 245, .5); --z-cyan-90: rgba(105, 225, 245, .9); --z-mint-55: rgba(154, 245, 212, .55); --z-mint-90: rgba(154, 245, 212, .9);
  --z-violet-75: rgba(164, 146, 255, .75); --z-horizon-glow: rgba(105, 225, 245, .2); --z-horizon-deep: rgba(26, 36, 72, .9);
  --z-halo: rgba(164, 146, 255, .26);
}

/* ---------- Telemetrie-Kennung (Dekoration, sprachneutral) ---------- */
.mod-code { position: absolute; top: 14px; right: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--faint); text-transform: uppercase; pointer-events: none; }
.mod-code b { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); animation: mod-blink 3.4s ease-in-out infinite; }
.shield-display .mod-code { right: auto; left: 18px; }
@keyframes mod-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Glas-Karten: Andock-Ecken und Kantenlicht ---------- */
.glass:not(.table-scroll), .terminal {
  --dock: var(--z-cyan-50);
  position: relative;
  background-image:
    linear-gradient(var(--dock), var(--dock)), linear-gradient(var(--dock), var(--dock)),
    linear-gradient(var(--dock), var(--dock)), linear-gradient(var(--dock), var(--dock));
  background-repeat: no-repeat;
  background-size: 16px 1.5px, 1.5px 16px, 16px 1.5px, 1.5px 16px;
  background-position: left 10px top 10px, left 10px top 10px, right 10px bottom 10px, right 10px bottom 10px;
}
.glass:not(.table-scroll):hover, .glass:not(.table-scroll):focus-within, .terminal:hover, .terminal:focus-within { --dock: var(--z-mint-90); }
.glass:not(.table-scroll):hover { border-color: var(--line-strong); }
.glass:not(.table-scroll):not(.animated-border)::after, .dock-card::after {
  content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: conic-gradient(from var(--edge, 200deg), transparent 0 55%, var(--z-cyan-90) 78%, var(--z-violet-75) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.glass:not(.table-scroll):not(.animated-border):hover::after, .glass:not(.table-scroll):not(.animated-border):focus-within::after,
.dock-card:hover::after, .dock-card:focus-within::after { opacity: 1; }

/* ---------- Planetenhorizont ---------- */
.hero-horizon { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 132px; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 38%); mask-image: linear-gradient(transparent, #000 38%); }
.hero-horizon::before {
  content: ''; position: absolute; top: 52px; left: 38%; width: 260vmax; height: 260vmax; margin-left: -130vmax; border-radius: 50%;
  border-top: 1px solid var(--z-mint-55);
  background: radial-gradient(circle at 50% 0, var(--z-horizon-glow), var(--z-horizon-deep) 5%, var(--bg-deep) 14%);
  box-shadow: 0 -6px 36px var(--z-horizon-glow), 0 -36px 130px var(--z-halo), inset 0 16px 60px var(--cyan-dim);
}
.final-horizon { height: 210px; }
.final-horizon::before { top: 112px; left: 50%; }
.page-sky-voll .hero-horizon { height: 230px; }
.page-sky-voll .hero-horizon::before { top: 130px; left: 30%; }

/* Kopf der Unterseiten: bewegtes Punktennetz wie im Hero */
.page-sky { position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 520px; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
.page-sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-sky-voll { inset: 0; height: auto; -webkit-mask-image: none; mask-image: none; }

/* ---------- Flugleiste (rechter Rand, ab 1240 px): Sektor 01-08, dann T−3 … T−0 ---------- */
.flight-rail { display: none; position: fixed; z-index: 40; right: 4px; top: 50%; translate: 0 -50%; flex-direction: column; list-style: none; margin: 0; padding: 12px 0; opacity: 0; transition: opacity .5s; pointer-events: none; }
@media (min-width: 1240px) { .flight-rail { display: flex; } }
.flight-rail.is-on { opacity: 1; }
.flight-rail li { position: relative; display: flex; align-items: center; justify-content: flex-end; height: 26px; padding-right: 17px; font: 500 9.5px/1 var(--mono); letter-spacing: .05em; color: var(--faint); }
.flight-rail li span { opacity: .75; transition: opacity .3s, color .3s; }
.flight-rail li::before { content: ''; position: absolute; right: 3px; top: 0; bottom: 0; width: 1px; background: var(--line-strong); }
.flight-rail li:first-child::before { top: 50%; }
.flight-rail li:last-child::before { bottom: 50%; }
.flight-rail li::after { content: ''; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border: 1px solid var(--faint); border-radius: 50%; background: var(--bg); transition: background .3s, border-color .3s, box-shadow .3s; }
.flight-rail li.is-past::before { background: linear-gradient(var(--violet), var(--cyan)); }
.flight-rail li.is-past::after { border-color: var(--violet); background: var(--violet); }
.flight-rail li.is-now span { color: var(--cyan); opacity: 1; }
.flight-rail li.is-now::after { border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.flight-rail li:nth-last-child(-n+4) span { color: var(--mint); }

/* ---------- Startimpuls beim Klick auf Bestell- und Login-Knöpfe ---------- */
.launch-fx { position: fixed; inset: 0; z-index: 70; overflow: hidden; pointer-events: none; visibility: hidden; }
.is-launching .launch-fx { visibility: visible; }
.launch-ring { position: absolute; left: var(--lx, 50%); top: var(--ly, 50%); width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2px solid var(--cyan); border-radius: 50%; opacity: 0; }
.launch-beam { position: absolute; left: var(--lx, 50%); top: var(--ly, 50%); width: 3px; height: 46vh; margin-left: -1.5px; border-radius: 3px; opacity: 0; transform: translateY(-100%);
  background: linear-gradient(to top, transparent, var(--cyan) 55%, var(--white)); box-shadow: 0 0 28px var(--cyan), 0 0 60px var(--violet); }
.is-launching .launch-ring { animation: launch-ring .9s cubic-bezier(.2, .7, .2, 1) both; }
.is-launching .launch-beam { animation: launch-beam 1.05s cubic-bezier(.5, 0, .9, .5) both; }
@keyframes launch-ring { from { transform: scale(.3); opacity: .95; } to { transform: scale(11); opacity: 0; } }
@keyframes launch-beam { 0% { opacity: 0; transform: translateY(-100%); } 12% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(-100% - 115vh)); } }

/* ---------- Kundenlogin: Andock-Chip im Kopf und Andock-Karte im Fuss ---------- */
.main-nav .nav-login { position: relative; min-height: 40px; padding-inline: 14px; border: 1px solid var(--line-strong); border-radius: 7px; transition: border-color .25s, box-shadow .25s, background .25s; }
.main-nav .nav-login:hover { border-color: var(--cyan); background: var(--cyan-dim); box-shadow: 0 0 26px var(--cyan-glow); color: var(--text); }
.main-nav .nav-login .icon { transition: transform .25s; }
.main-nav .nav-login:hover .icon { transform: translateX(3px); }
.dock-card { --dock: var(--z-cyan-50); position: relative; align-self: start; padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px;
  background-color: var(--surface);
  background-image: linear-gradient(var(--dock), var(--dock)), linear-gradient(var(--dock), var(--dock)), linear-gradient(var(--dock), var(--dock)), linear-gradient(var(--dock), var(--dock));
  background-repeat: no-repeat; background-size: 14px 1.5px, 1.5px 14px, 14px 1.5px, 1.5px 14px;
  background-position: left 9px top 9px, left 9px top 9px, right 9px bottom 9px, right 9px bottom 9px; }
.dock-card:hover, .dock-card:focus-within { --dock: var(--z-mint-90); }
.footer-top .dock-card .eyebrow { margin-bottom: 12px; }

/* ---------- Telemetrie-Module: Bewegung mit Sinn ---------- */
/* DNS-Zeitreise: ein Lesekopf fährt über die Versionen zurück */
.timeline-mini { container-type: inline-size; }
.timeline-mini::after { content: ''; position: absolute; left: 0; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; transform: translateX(100cqw); border: 1px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 14px var(--cyan); animation: scrub 8s ease-in-out infinite; }
@keyframes scrub { 0%, 8% { transform: translateX(100cqw); } 46%, 58% { transform: translateX(0); } 96%, 100% { transform: translateX(100cqw); } }
/* Git-Deploy: ein Lichtstreifen läuft über die Pipeline */
.code-label { position: relative; overflow: hidden; }
.code-label::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(154, 245, 212, .2) 50%, transparent 70%); transform: translateX(-100%); animation: sweep 4.5s ease-in-out infinite; }
@keyframes sweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
/* E-Mail: SPF, DKIM, DMARC leuchten nacheinander auf */
.protocol-tags span { animation: tag-on 4.5s ease-in-out infinite; }
.protocol-tags span:nth-child(2) { animation-delay: 1.5s; }
.protocol-tags span:nth-child(3) { animation-delay: 3s; }
@keyframes tag-on { 0%, 32%, 100% { color: var(--cyan); border-color: var(--line-strong); background: none; } 8%, 24% { color: var(--mint); border-color: var(--mint); background: var(--mint-dim); } }
/* KI-Console: Prüfbalken atmen, ein Suchlauf zieht darüber */
.scan-lines { position: relative; overflow: hidden; }
.scan-lines span { transform-origin: bottom; animation: bars 3.8s ease-in-out infinite; }
.scan-lines span:nth-child(2) { animation-delay: -.7s; }
.scan-lines span:nth-child(3) { animation-delay: -1.4s; }
.scan-lines span:nth-child(4) { animation-delay: -2.1s; }
.scan-lines span:nth-child(5) { animation-delay: -2.8s; }
.scan-lines::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(90deg, transparent, var(--cyan-glow), transparent); transform: translateX(-100%); animation: scan-x 4.2s linear infinite; }
@keyframes bars { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.62); } }
@keyframes scan-x { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
/* Sicherheit: Radar-Suchlauf hinter dem Schild */
.shield-display { overflow: hidden; }
.shield-art { position: relative; z-index: 1; }
.radar-sweep { position: absolute; z-index: 0; left: 50%; top: 30px; width: min(310px, calc(100% - 40px)); aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  border: 1px solid var(--line);
  background: conic-gradient(from 0deg, transparent 0 74%, rgba(105, 225, 245, .05) 84%, rgba(105, 225, 245, .24) 100%);
  animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Backups: Kopie 1 → 2 → 3, ein Datenpaket läuft von Station zu Station */
.route-connector > span { position: relative; overflow: hidden; }
.route-connector > span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--cyan), var(--mint), transparent); transform: translateX(-100%); opacity: 0; animation: packet 4.5s linear infinite; }
.backup-route > .route-connector:nth-child(2) > span::after { animation-delay: .5s; }
.backup-route > .route-connector:nth-child(4) > span::after { animation-delay: 2s; }
.backup-node > .icon { animation: node-glow 4.5s ease-in-out infinite; }
.backup-route > .backup-node:nth-child(3) > .icon { animation-delay: 1.5s; }
.backup-route > .backup-node:nth-child(5) > .icon { animation-delay: 3s; }
@keyframes packet { 0% { transform: translateX(-100%); opacity: 0; } 3% { opacity: 1; } 24% { transform: translateX(100%); opacity: 1; } 28%, 100% { transform: translateX(100%); opacity: 0; } }
@keyframes packet-v { 0% { transform: translateY(-100%); opacity: 0; } 3% { opacity: 1; } 24% { transform: translateY(100%); opacity: 1; } 28%, 100% { transform: translateY(100%); opacity: 0; } }
@keyframes node-glow { 0%, 30%, 100% { color: var(--cyan); filter: none; } 10% { color: var(--mint); filter: drop-shadow(0 0 8px var(--mint)); } }

/* ---------- Vergleich: von gestern zu heute ---------- */
.era-line { display: flex; align-items: center; gap: 14px; max-width: 560px; margin: -18px auto 34px; font: 500 12px/1 var(--mono); letter-spacing: .14em; color: var(--muted); }
.era-line i { position: relative; flex: 1; height: 1px; background: var(--line-strong); }
.era-line i::after { content: ''; position: absolute; inset: 0; background: var(--gradient); transform-origin: left; }
.era-line b { position: absolute; left: 100%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.era-line span:last-child { color: var(--mint); }
.comparison-now { position: relative; }
.comparison-now::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--violet), var(--cyan), var(--mint)); }
@media (prefers-reduced-motion: no-preference) {
  .js .era-line:not(.is-lit) i::after { transform: scaleX(0); }
  .js .era-line:not(.is-lit) b { left: 0; }
  .js .era-line.is-lit i::after { transition: transform 2.2s .2s cubic-bezier(.4, 0, .2, 1); }
  .js .era-line.is-lit b { transition: left 2.2s .2s cubic-bezier(.4, 0, .2, 1); }
  .js tr:not(.is-lit) > .comparison-now::before { transform: scaleY(0); }
  .js tr > .comparison-now::before { transform-origin: top; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
  .js tr > .comparison-before, .js tr > .comparison-now { transition: color .6s, background .6s; }
  .js tr.is-lit > .comparison-before { color: var(--faint); }
  .js tr:not(.is-lit) > .comparison-now { background: transparent; }
  .js tr.is-lit > .comparison-now .icon { filter: drop-shadow(0 0 5px var(--mint)); }
  .step-number { position: relative; }
  .step-number::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gradient); transform: scaleX(0); transform-origin: left; transition: transform 1.2s .3s cubic-bezier(.2, .7, .2, 1); }
  .launch-grid li.is-visible .step-number::after { transform: scaleX(1); }
}

/* ---------- Schluss: Startrampe, Countdown, Abheben ---------- */
.final-section { padding-bottom: 280px; }
.final-section .center-heading > .countdown { display: inline-flex; align-items: center; gap: 14px; margin: 30px 0 0; padding: 8px 18px 8px 14px; max-width: none; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--cyan-dim); font: 500 11px/1 var(--mono); letter-spacing: .18em; color: var(--muted); }
.cd-t { font: 700 27px/1 var(--title); letter-spacing: .02em; color: var(--cyan); }
.cd-n { font-weight: 700; }
.cd-fire .cd-t, .cd-fire .cd-text { color: var(--mint); }
.launch-pad { position: absolute; z-index: 0; left: 50%; margin-left: -37px; bottom: 90px; width: 74px; height: 116px; pointer-events: none; }
.pad-rocket { position: absolute; left: 0; bottom: 0; width: 100%; }
.pad-rocket-art { display: block; width: 100%; height: auto; overflow: visible; }
.pad-rocket-art .rocket-flame { opacity: .55; transform-origin: 300px 350px; }
.pad-smoke { position: absolute; left: 50%; bottom: -8px; width: 150px; height: 34px; margin-left: -75px; border-radius: 50%; background: radial-gradient(ellipse, rgba(164, 146, 255, .34), transparent 70%); opacity: 0; }
.cd-wait .pad-rocket-art .rocket-flame { opacity: 0; }
.cd-run .pad-rocket-art .rocket-flame { opacity: .8; }
.cd-run .pad-rocket { animation: pad-shake .12s linear infinite; }
.cd-run .pad-smoke { animation: smoke 1.2s ease-in-out infinite alternate; }
.cd-fire .pad-rocket { animation: liftoff 2.8s cubic-bezier(.55, 0, .85, .35) both; }
.cd-fire .pad-rocket-art .rocket-flame { opacity: 1; }
.cd-fire .pad-smoke { animation: smoke-burst 2.6s ease-out both; }
.cd-fire .actions .button:first-child { animation: cta-ready 1.6s ease-in-out 2.6s 3; }
@keyframes pad-shake { 0% { transform: translateX(-.6px); } 50% { transform: translateX(.6px); } 100% { transform: translateX(-.6px); } }
@keyframes smoke { from { opacity: .25; transform: scaleX(.9); } to { opacity: .6; transform: scaleX(1.1); } }
@keyframes smoke-burst { 0% { opacity: .6; transform: scale(1); } 30% { opacity: .85; } 100% { opacity: 0; transform: scale(2.6, 1.6); } }
@keyframes liftoff { 0% { transform: translateY(0); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-560px); opacity: 0; } }
@keyframes cta-ready { 0%, 100% { box-shadow: 0 0 0 var(--clear); } 50% { box-shadow: 0 0 46px var(--cyan-glow), 0 0 0 4px var(--cyan-dim); } }

/* ---------- 404: die Rakete hat den Kurs verloren ---------- */
.error-page { position: relative; overflow: hidden; }
.error-page .error-inner { position: relative; z-index: 1; }
.lost-rocket { position: absolute; z-index: 0; right: 8%; top: 8px; width: 96px; animation: drift 9s ease-in-out infinite alternate; }
.lost-rocket-art { display: block; width: 100%; height: auto; overflow: visible; }
.lost-rocket-art .rocket-flame { opacity: .4; }
@keyframes drift { from { transform: translate(0, 0) rotate(-4deg); } to { transform: translate(-22px, 18px) rotate(5deg); } }
.error-page { padding-bottom: 240px; }

/* ---------- Bewegung anhalten / reduzieren ---------- */
.motion-paused *, .motion-paused *::before, .motion-paused *::after { transition: none !important; }
.motion-paused .era-line i::after { transform: none !important; }
.motion-paused .era-line b { left: 100% !important; }
.motion-paused tr > .comparison-now::before { transform: none !important; }
.motion-paused tr > .comparison-before { color: var(--faint) !important; }
.motion-paused .step-number::after { transform: scaleX(1) !important; }
.motion-paused .cd-run .pad-rocket, .motion-paused .cd-fire .pad-rocket { animation: none; }
.motion-paused .lost-rocket { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .launch-fx { display: none; }
  .glass:not(.table-scroll), .terminal { transition: none; }
}

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 1180px) { .hero-horizon::before { left: 45%; } }
@media (max-width: 720px) {
  .hero-horizon { height: 100px; }
  .hero-horizon::before { top: 44px; left: 50%; }
  .final-horizon { height: 170px; }
  .final-horizon::before { top: 96px; }
  .final-section { padding-bottom: 260px; }
  .launch-pad { bottom: 74px; }
  .page-sky { height: 420px; }
  .page-sky-voll { height: auto; }
  .page-sky-voll .hero-horizon { height: 160px; }
  .page-sky-voll .hero-horizon::before { top: 100px; }
  .mod-code { top: 12px; right: 14px; font-size: 9.5px; }
  .shield-display .mod-code { right: auto; left: 14px; }
  .route-connector > span::after { background: linear-gradient(180deg, transparent, var(--cyan), var(--mint), transparent); animation-name: packet-v; }
  .glass:not(.table-scroll), .terminal { background-size: 14px 1.5px, 1.5px 14px, 14px 1.5px, 1.5px 14px; background-position: left 8px top 8px, left 8px top 8px, right 8px bottom 8px, right 8px bottom 8px; }
  .lost-rocket { width: 64px; right: 6%; }
  .error-page { padding-bottom: 180px; }
  .dock-card { padding: 18px 18px; }
}
@media (max-width: 420px) { .final-section .center-heading > .countdown { letter-spacing: .1em; gap: 10px; } }

/* ---------- Druck und erzwungene Farben ---------- */
@media print {
  .flight-rail, .launch-fx, .hero-horizon, .launch-pad, .page-sky, .era-line, .countdown, .radar-sweep, .mod-code, .lost-rocket { display: none !important; }
  .glass, .terminal, .dock-card { background-image: none !important; }
  .dock-card { background: none !important; border: 1px solid var(--print-text); }
  .glass::after, .dock-card::after, .comparison-now::before, .step-number::after { display: none !important; }
  .final-section, .error-page { padding-bottom: 24px !important; }
}
@media (forced-colors: active) {
  .flight-rail, .launch-fx, .hero-horizon, .launch-pad, .page-sky, .radar-sweep, .lost-rocket { display: none; }
  .glass, .terminal, .dock-card { background-image: none; }
  .glass::after, .dock-card::after { display: none; }
  .main-nav .nav-login { border-color: CanvasText; }
}