/* ============ Projekt-Hub · Midas-Touch CI (AI & GEO) ============ */
:root{
  --bg:#F1F1EE; --surface:#FFFFFF; --surface-muted:#F4F4F1;
  --ink:#0C0D0F; --dark:#101114; --muted:#6B6E77; --muted2:#9A9DA4;
  --line:#E3E3DE; --accent:#8FE000; --accent-600:#7CC400;
  --r:18px; --r-sm:12px; --pill:999px;
  --shadow:0 20px 45px -30px rgba(12,13,15,.35);
  --font:'Inter',system-ui,Segoe UI,sans-serif;
  --display:'Space Grotesk','Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;line-height:1.6;font-size:15px}
/* dezentes Raster als Hero-Textur */
body.grid{background-image:linear-gradient(var(--line) 1px,transparent 1px),
  linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px;background-color:var(--bg)}
a{color:var(--ink)}
::selection{background:var(--accent);color:var(--ink)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#d5d5cf;border-radius:20px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;font-weight:700;margin:0}
.muted{color:var(--muted)} .muted2{color:var(--muted2)}

/* Eyebrow-Label (Lime-Quadrat + Caps) */
.eyebrow{display:inline-flex;gap:8px;align-items:center;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:11px;height:11px;background:var(--accent);flex:0 0 auto}

/* Logo / Wortmarke */
.brand{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--display);
  font-weight:700;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.brand .mark{width:26px;height:26px;border-radius:7px;display:block}
.brand .sub{color:var(--muted2);font-weight:600}

/* Buttons – Pillenform */
.btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);padding:.6rem 1.1rem;border-radius:var(--pill);
  font:inherit;font-weight:600;cursor:pointer;transition:.16s;white-space:nowrap}
.btn:hover{background:var(--surface-muted);transform:translateY(-1px)}
.btn.primary{background:var(--ink);color:#fff;border:0}
.btn.primary:hover{background:#000}
.btn.accent{background:var(--accent);color:var(--ink);border:0}
.btn.accent:hover{background:var(--accent-600)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.danger{color:#b42318;border-color:#f0c8c2}
.btn.danger:hover{background:#fbecea}
.btn.sm{padding:.42rem .8rem;font-size:.82rem}
.btn.icon{padding:.55rem;width:2.6rem;justify-content:center}
.btn .chip{width:12px;height:12px;background:var(--accent);flex:0 0 auto} /* Lime-Icon-Chip */
.btn.primary .chip{border-radius:2px}

/* Inputs */
input,textarea,select{font:inherit;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:.65rem .8rem;width:100%;
  transition:.16s;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(143,224,0,.28)}
textarea{resize:vertical}
label{font-size:.82rem;color:var(--muted);font-weight:600}

/* Cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.2rem 1.4rem;box-shadow:var(--shadow)}
.card.dark{background:var(--dark);color:#fff;border:0}
.card.dark .muted{color:rgba(255,255,255,.7)}
.pill{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .6rem;border-radius:var(--pill);
  background:var(--surface-muted);border:1px solid var(--line);font-size:.72rem;font-weight:700;color:var(--muted)}
.dot{width:.5rem;height:.5rem;border-radius:50%;display:inline-block;background:var(--muted2)}
.dot.running{background:var(--accent)}

/* Pixel-Block-Motiv (Treppe) */
.pixels{position:absolute;line-height:0;pointer-events:none}
.pixels i{display:inline-block;width:13px;height:13px;background:var(--accent)}
.pixels .r{display:block}.pixels .r+.r{margin-top:2px}
.pixels .r:nth-child(2){margin-left:15px}.pixels .r:nth-child(3){margin-left:30px}

/* spinner */
.spin{width:1em;height:1em;border:2px solid rgba(12,13,15,.15);border-top-color:var(--ink);
  border-radius:50%;display:inline-block;animation:sp .7s linear infinite;vertical-align:-.15em}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fade{animation:fade .22s ease both}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(12,13,15,.4);display:none;
  align-items:center;justify-content:center;z-index:50;padding:1rem}
.overlay.open{display:flex}
.modal{width:min(96vw,460px);animation:fade .2s ease both}