/* =================================================================
   A.IT-SOLUTIONS — COMING-SOON / UMBAU-SEITE
   Lane (geerbt aus V2, R1): „Grüner Pixel-Baukasten" — hell,
   verspielt-professionell. Smaragd #0FAE74 · Mint #33E0A1 ·
   Tinte #191B20 · Archivo + IBM Plex Mono, alles self-hosted.
   Regel: Pixel sind AN oder AUS — steps()-Easing, keine Fades
   auf Markenelementen. Keine externen Requests, DSGVO-sauber.
   Konzept: Die Marke baut sich gerade selbst (Pixmark-Montage).
   ================================================================= */

@font-face{font-family:'Archivo';src:url('../fonts/Archivo-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('../fonts/PlexMono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --bg:#F5F6F8;
  --card:#FFFFFF;
  --ink:#191B20;
  --ink-2:#2B2D33;
  --dim:#6B7079;
  --line:rgba(25,27,32,.14);
  --line-2:rgba(25,27,32,.07);
  --green:#0FAE74;
  --green-deep:#0C8F60;
  --green-text:#0B7B52; /* nur für Kleintext: 4,9:1 auf --bg, 4,7:1 auf --mint-soft */
  --mint:#33E0A1;
  --mint-soft:#DFF8EC;
  --on-green:#FFFFFF;

  --sans:'Archivo',-apple-system,sans-serif;
  --mono:'Plex Mono',ui-monospace,monospace;

  --r-card:22px;
  --r-el:12px;
  --steps:steps(4,end);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100svh;display:flex;flex-direction:column;
  /* Bauplan-Raster: flache 1px-Hairlines (kein Farbverlauf im Sinne der Lane) */
  background-image:linear-gradient(rgba(25,27,32,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(25,27,32,.04) 1px,transparent 1px);
  background-size:44px 44px}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--mint);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--green-deep);outline-offset:3px;border-radius:4px}

/* Smaragd-Pixel als Cursor auf Interaktivem (V2-Signature, 0 JS) */
a,button{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Crect width='16' height='16' x='1' y='1' rx='4' fill='%230FAE74' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 9 9, pointer}

.skip-link{position:fixed;top:-100px;left:1rem;z-index:30;background:var(--green);color:var(--ink);padding:.6rem 1rem;border-radius:8px;font-weight:700;transition:top .2s}
.skip-link:focus{top:1rem}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Mint-Quadrat statt Punkt (V2-Signature) */
.dotpx{display:inline-block;width:.17em;height:.17em;border-radius:22%;background:var(--green);margin-left:.14em;transform:translateY(-.04em)}

/* Pop-in-Elemente sind IMMER sichtbar per Default — JS versteckt sie nur
   unmittelbar vor dem Eintritt (nie über CSS gaten: hidden Tabs!) */

/* ---------- KOPF ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(1.1rem,3vw,1.8rem) clamp(1.25rem,4.5vw,3.5rem)}
.top__logo img{width:auto;height:clamp(40px,5.5vw,52px)}
.top__label{font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:.6em;white-space:nowrap}
.blip{display:inline-block;width:.6em;height:.6em;border-radius:22%;background:var(--green);
  animation:blink 1.2s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- BÜHNE ---------- */
.stage{flex:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:center;gap:clamp(2rem,6vw,5.5rem);width:100%;max-width:1200px;
  margin:0 auto;padding:clamp(1rem,3vh,2.6rem) clamp(1.25rem,4.5vw,3.5rem)}

.status{display:inline-flex;align-items:center;gap:.65em;font-family:var(--mono);font-weight:500;
  font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  border:1.5px solid var(--line);border-radius:999px;padding:.5em 1.1em;background:var(--card)}
.status .blip{width:.7em;height:.7em}

.stage__title{font-weight:900;font-size:clamp(2.3rem,4.7vw,4.3rem);line-height:1.04;
  letter-spacing:-.02em;text-wrap:balance;margin-top:.95rem}
.hl{font-style:normal;background-image:linear-gradient(var(--mint),var(--mint));background-repeat:no-repeat;
  background-size:0% 34%;background-position:0 78%;transition:background-size .5s steps(5,end) .15s;
  padding:0 .06em;margin:0 -.06em}
.hl.in{background-size:100% 34%}
.no-js .hl{background-size:100% 34%}

.stage__sub{margin-top:1rem;font-size:1.06rem;color:var(--ink-2);max-width:44ch;text-wrap:pretty}

/* Moin-Karte mit Avatar */
.hello{display:flex;gap:1.1rem;align-items:flex-start;background:var(--card);
  border:1.5px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1rem,2.2vw,1.35rem);margin-top:1.5rem;max-width:33rem;
  box-shadow:12px 12px 0 var(--mint-soft)}
.hello__avatar{width:64px;height:64px;flex:0 0 auto;border-radius:50%;
  transition:transform .18s steps(2,end)}
.hello:hover .hello__avatar,.hello__avatar.hop{transform:translateY(-5px)}
.hello__body b{font-size:1.06rem;font-weight:700}
.hello__body p{margin-top:.3rem;font-size:.95rem;color:var(--ink-2);text-wrap:pretty}

.btn{display:inline-flex;align-items:center;gap:.55em;font-weight:700;border-radius:var(--r-el);
  padding:.78em 1.25em;line-height:1.2;transition:transform .16s steps(2,end),background-color .16s steps(2,end),box-shadow .16s steps(2,end)}
/* Ink auf Smaragd (6,0:1) statt Weiß (2,9:1) — AA; Hover = binärer Flip auf Tinte */
.btn--green{background:var(--green);color:var(--ink)}
.btn--green:hover{background:var(--ink);color:var(--on-green);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--mint)}
.btn--green:active{transform:translate(0,0);box-shadow:none}
.hello .btn{margin-top:.85rem;word-break:break-all}

.proofline{margin-top:1.35rem;font-family:var(--mono);font-weight:500;font-size:.74rem;
  letter-spacing:.16em;color:var(--dim)}

/* ---------- PIXMARK-BAUSTELLE ---------- */
.site{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.4rem;min-width:0}
.pxgrid{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1.3vw,12px);
  width:min(100%,clamp(230px,29vw,345px));padding:clamp(14px,1.8vw,18px);
  border:1.5px dashed var(--line);border-radius:var(--r-card);background:var(--card)}
.cell{aspect-ratio:1;border-radius:18%;border:1.5px dashed var(--line-2);background:transparent}
.cell--g{background:var(--green);border-color:transparent}
.cell--d{background:var(--ink);border-color:transparent}

/* Bau-Pixel: der „Arbeiter", der die Zellen setzt (Optik wie der Pixel-Cursor) */
.builder{position:absolute;background:var(--mint);border:2px solid #fff;border-radius:18%;
  opacity:0;pointer-events:none;box-shadow:3px 3px 0 rgba(25,27,32,.18)}
.builder.on{opacity:1}

/* Fertig-Puff: kurze Pixel-Konfetti über der Baustelle */
.puff{position:absolute;width:10px;height:10px;border-radius:3px;background:var(--green);
  pointer-events:none;z-index:2}
.puff--mint{background:var(--mint)}
.puff--ink{background:var(--ink)}
.puff.t2{opacity:.35}

/* Pixel-Spur am Cursor (nur feine Zeiger, nie auf Touch) */
.trailpx{position:fixed;width:10px;height:10px;border-radius:3px;background:var(--green);
  pointer-events:none;z-index:5}
.trailpx--mint{background:var(--mint)}
.trailpx.t2{opacity:.35}

.buildlog{font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:.6em;
  max-width:100%;text-align:center}
.cursorpx{display:inline-block;width:.62em;height:.9em;background:var(--green);border-radius:2px;
  animation:blink 1s steps(1,end) infinite;flex:0 0 auto}

/* Pause-Schalter für die Montage (WCAG 2.2.2) — leise Mono-Zeile */
.logpause{font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);border-bottom:1.5px dashed var(--line);
  padding-bottom:.15em;margin-top:-.4rem}
.logpause:hover{color:var(--green-text);border-color:var(--green-text)}
.is-paused .blip,.is-paused .cursorpx{animation:none}

/* ---------- FUSS ---------- */
.base{display:flex;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;flex-wrap:wrap;
  border-top:1.5px solid var(--line-2);margin-top:auto;
  padding:1.1rem clamp(1.25rem,4.5vw,3.5rem) 1.3rem;
  font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.base a{color:var(--ink-2);border-bottom:1.5px solid var(--line);padding-bottom:.1em}
.base a:hover{color:var(--green);border-color:var(--green)}
.base__legal{display:flex;gap:1.25em}

/* ---------- RECHTSSEITEN ---------- */
.legal{width:100%;max-width:760px;margin:0 auto;padding:clamp(1.5rem,4vw,3rem) clamp(1.25rem,4.5vw,2rem) 4rem}
.legal__back{display:inline-block;font-family:var(--mono);font-weight:500;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  border-bottom:1.5px solid var(--line);padding-bottom:.15em;margin-bottom:2.2rem}
.legal__back:hover{color:var(--green);border-color:var(--green)}
.legal__title{font-weight:900;font-size:clamp(2.1rem,5vw,3.2rem);letter-spacing:-.02em;line-height:1.05;
  overflow-wrap:anywhere;hyphens:auto}
.legal__meta{font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-top:.6rem}
.legal__note{background:var(--mint-soft);border:1.5px solid rgba(15,174,116,.35);border-radius:var(--r-card);
  padding:1.1rem 1.3rem;margin:1.8rem 0}
.legal__note .lbl{display:block;font-family:var(--mono);font-weight:500;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-text);margin-bottom:.4rem}
.legal__body h2{font-weight:900;font-size:1.3rem;letter-spacing:-.01em;margin:2.2rem 0 .6rem}
.legal__body h2 .n{font-family:var(--mono);font-weight:500;font-size:.8rem;color:var(--green-text);
  letter-spacing:.1em;margin-right:.7em;vertical-align:.15em}
.legal__body p,.legal__body li{color:var(--ink-2)}
.legal__body ul{margin:.6rem 0 .6rem 1.2rem;list-style:square}
.legal__body li::marker{color:var(--green)}
.legal__body a{color:var(--ink);border-bottom:1.5px solid var(--green);padding-bottom:.05em}
.legal__body a:hover{color:var(--green)}
.legal__body code{font-family:var(--mono);font-size:.88em;background:var(--card);
  border:1px solid var(--line-2);border-radius:6px;padding:.08em .35em}
.ph{background:var(--mint-soft);border-radius:5px;padding:.05em .3em}

/* ---------- 404 ---------- */
.nf{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:2rem clamp(1.25rem,4.5vw,3.5rem);gap:.4rem}
.nf__code{font-family:var(--mono);font-weight:500;font-size:.85rem;letter-spacing:.2em;color:var(--green-text)}
.nf__title{font-weight:900;font-size:clamp(1.9rem,5vw,3.4rem);letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
.nf__text{color:var(--ink-2);max-width:40ch;text-wrap:pretty}
.nf .btn{margin-top:1.2rem}

/* ---------- RESPONSIVE ---------- */
@media (max-width:920px){
  .stage{grid-template-columns:minmax(0,1fr);gap:2.6rem;padding-top:1rem;
    justify-items:center;align-content:center;text-align:center}
  .stage>div:first-child{display:flex;flex-direction:column;align-items:center}
  .stage__sub{margin-left:auto;margin-right:auto}
  .hello{text-align:left}
  .pxgrid{width:min(100%,300px)}
}
@media (max-width:480px){
  .top__label span.mmx{display:none}
  .stage__title{font-size:clamp(2.15rem,10.5vw,2.6rem)}
  .hello{flex-direction:column;align-items:flex-start;gap:.8rem;box-shadow:8px 8px 0 var(--mint-soft)}
  .base{justify-content:center;text-align:center}
}

/* Kurze Desktop-Viewports: alles in einen Screen quetschen */
@media (min-width:921px) and (max-height:800px){
  .top{padding-top:1rem;padding-bottom:1rem}
  .stage{padding-top:.75rem;padding-bottom:1.25rem}
  .stage__title{font-size:clamp(2.1rem,4vw,3.5rem)}
  .hello{margin-top:1.2rem}
  .pxgrid{width:min(100%,clamp(210px,24vw,290px))}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .blip,.cursorpx{animation:none}
  .hl,.btn,.hello__avatar,.skip-link{transition:none}
  .hl{background-size:100% 34%}
  .hello:hover .hello__avatar,.btn--green:hover,.hello__avatar.hop{transform:none}
  .logpause{display:none} /* Loop läuft bei RM gar nicht erst */
  .builder,.puff,.trailpx{display:none}
}