/* =====================================================================
   FLEhub – zentrales Design-System (app.css)
   Schlicht & professionell: Anthrazit/Graustufen, Orange nur im Logo.
   ===================================================================== */
:root{
  --fl-ink:#1f232b;          /* Haupt-Dunkel (Header, Primärbutton) */
  --fl-ink-2:#2b303a;
  --fl-bg:#eef0f2;           /* Seitenhintergrund */
  --fl-card:#ffffff;
  --fl-border:#e2e5ea;
  --fl-border-2:#d3d8df;
  --fl-text:#1c2128;
  --fl-muted:#6b7280;
  --fl-muted-2:#9aa1ac;
  --fl-accent:#ff6b00;       /* Logo-Orange – sehr sparsam */
  --fl-green:#1a7a3c; --fl-red:#cc2b2b;
  --fl-radius:16px;          /* Karten */
  --fl-radius-s:10px;        /* Buttons/Inputs */
  --fl-shadow:0 1px 2px rgba(17,24,39,.06), 0 8px 24px rgba(17,24,39,.06);
  --fl-shadow-lg:0 10px 40px rgba(17,24,39,.14);
  --fl-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* Sanfte globale Politur (greift auch auf bestehende Seiten, ohne Layouts zu brechen) */
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--fl-font);
  background:
    radial-gradient(1200px 600px at 100% -10%, #f6f7f9 0%, rgba(246,247,249,0) 60%),
    radial-gradient(1000px 500px at -10% 110%, #f3f4f6 0%, rgba(243,244,246,0) 55%),
    var(--fl-bg);
  color:var(--fl-text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
::selection{ background:rgba(31,35,43,.12); }
/* dezente, moderne Scrollbar */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-thumb{ background:#c8cdd4; border-radius:8px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#aeb4bd; background-clip:content-box; }

/* ---- Wiederverwendbare Komponenten (Prefix .fl-) ---- */
.fl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:var(--fl-radius-s);border:1px solid transparent;
  font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease, border-color .15s;
  font-family:inherit;line-height:1;
}
.fl-btn:active{ transform:translateY(1px); }
.fl-btn-primary{ background:var(--fl-ink); color:#fff; box-shadow:0 2px 8px rgba(31,35,43,.25); }
.fl-btn-primary:hover{ background:var(--fl-ink-2); box-shadow:0 6px 18px rgba(31,35,43,.3); }
.fl-btn-ghost{ background:#fff; color:var(--fl-text); border-color:var(--fl-border-2); }
.fl-btn-ghost:hover{ background:#f7f8fa; border-color:#c2c8d0; }

.fl-input,.fl-card input,.fl-card select,.fl-card textarea{
  width:100%;padding:11px 13px;border:1px solid var(--fl-border-2);border-radius:var(--fl-radius-s);
  font-size:14px;background:#fff;color:var(--fl-text);font-family:inherit;transition:border-color .15s, box-shadow .15s;
}
.fl-input:focus{ outline:none;border-color:#b9bfc8;box-shadow:0 0 0 4px rgba(31,35,43,.08); }

/* Top-Leiste (für überarbeitete Seiten) */
.fl-top{
  background:var(--fl-ink);color:#fff;display:flex;align-items:center;gap:16px;
  padding:13px 22px;position:sticky;top:0;z-index:30;
  box-shadow:0 1px 0 rgba(255,255,255,.04), 0 6px 20px rgba(17,24,39,.18);
}
.fl-top img.logo{ height:34px;display:block; }
.fl-top .sp{ margin-left:auto; }
.fl-top .who{ font-size:12.5px;opacity:.82; }
.fl-top a.nav{
  color:#fff;text-decoration:none;font-size:12.5px;font-weight:600;
  background:rgba(255,255,255,.10);padding:8px 13px;border-radius:9px;transition:background .15s;
}
.fl-top a.nav:hover{ background:rgba(255,255,255,.2); }