/* ==================================================================
   ARGIO · Theme Tokens & Base
   ================================================================== */
@font-face{
  font-family:"Neue Haas Unica";
  src:url("../fonts/NeueHaasUnica-Regular.woff2") format("woff2"),
      url("../fonts/NeueHaasUnica-Regular.woff") format("woff");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

@font-face{
  font-family:"Neue Haas Unica";
  src:url("../fonts/NeueHaasUnica-Medium.woff2") format("woff2"),
      url("../fonts/NeueHaasUnica-Medium.woff") format("woff");
  font-style:normal;
  font-weight:500;
  font-display:swap;
}

@font-face{
  font-family:"Neue Haas Unica";
  src:url("../fonts/NeueHaasUnica-Bold.woff2") format("woff2"),
      url("../fonts/NeueHaasUnica-Bold.woff") format("woff");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}

:root{
  /* Brand (allgemein) – bleibt für Light & Dark gleich */
  --brand-from:#3758F9;
  --brand-to:#7AA2FF;
  --grad-1:#3758F9;
  --grad-2:#C026D3;
  --grad-3:#F59E0B;

  /* Space (blau) – Dateien/DMS/Repos */
  --space-from:#1F5EFF;
  --space-to:#7AA2FF;

  /* Cluster (grün) – Team/Collab */
  --cluster-from:#19BD7A;
  --cluster-to:#7EF7C1;

  /* Void (magenta) – Souveränität/Identität/Backup/Compliance */
  --void-from:#C026D3;
  --void-to:#9333EA;

  /* Cortex (orange) – RAG/KI/Automationen */
  --cortex-from:#F59E0B;
  --cortex-to:#FBBF24;

  /* Neutrals – LIGHT MODE (Default) */
  --bg:#f5f5f7;
  --bg-soft:#eef1f7;
  --panel:#ffffff;
  --muted:#e5e7f0;
  --border:#e0e4f1;
  --fg:#111827;
  --fg-dim:#6b7280;

  /* Accents & State */
  --accent:#3b82f6;
  --ok:#16a34a;
  --warn:#f59e0b;
  --err:#ef4444;

  /* Layout */
  --radius-1:10px;
  --radius-2:14px;
  --radius-3:18px;
  --gap:18px;
  --container:1200px;

  /* Effects – dezente, «Apple-esque» Schatten */
  --shadow-1:0 3px 10px rgba(15,23,42,.07);
  --shadow-2:0 10px 24px rgba(15,23,42,.10);
  --ring:0 0 0 3px rgba(59,130,246,.30);

  /* Body-Hintergrund (kann pro Theme überschrieben werden) */
  --body-bg:#f5f5f7;
}

/* DARK MODE: überschreibt nur Neutrals & Effekte */
html[data-theme="dark"]{
  --bg:#0B0C0E;
  --bg-soft:#0F1115;
  --panel:#101216;
  --muted:#171A20;
  --border:#232731;
  --fg:#EEF2F7;
  --fg-dim:#AEB7C4;

  --shadow-1:0 4px 10px rgba(0,0,0,.28);
  --shadow-2:0 10px 22px rgba(0,0,0,.34);
  --ring:0 0 0 3px rgba(122,162,255,.22);
  --grad-1:#251EC5;
  --grad-2:#810072;
  --grad-3:#EB1B17;

  /* Dezent grauer Dark‑Hintergrund, ohne bunte Schleier */
  --body-bg:radial-gradient(120% 120% at 50% 0,#111827,#020617);
}

/* Base Reset */
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  text-rendering:optimizeLegibility;
  background:var(--body-bg);
  color-scheme:light;
}
body{
  margin:0;
  font-family:"Neue Haas Unica",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.5;
  background:var(--body-bg);
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--fg);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{
  outline:2px solid transparent;
  outline-offset:2px;
  box-shadow:var(--ring);
}
button{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

button,
input,
select,
textarea{
  font:inherit;
}

html[data-theme="dark"]{
  color-scheme:dark;
}

/* Containers & Grid */
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.grid{display:grid;gap:var(--gap)}
.grid.col-2{grid-template-columns:1fr 1fr}
.grid.col-3{grid-template-columns:1fr 1fr 1fr}
@media (max-width:980px){.grid.col-2,.grid.col-3{grid-template-columns:1fr}}

/* Typography */
h1,h2,h3,h4{margin:0 0 6px;line-height:1.15}
h1,h2,h3{text-wrap:balance}
h1{font-size:38px;letter-spacing:-.01em}
h2{font-size:26px;letter-spacing:-.01em}
h3{font-size:18px}
p{margin:10px 0;line-height:1.6}
.lead{color:var(--fg-dim);line-height:1.6}
.muted{color:var(--fg-dim)}
small,.small{font-size:13px;color:var(--fg-dim)}

/* Headline Gradient (Argio Brand: blau → violett → orange) */
.headline-grad{
  background:linear-gradient(90deg,var(--grad-1),var(--grad-2),var(--grad-3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Chips, Tags, Pills */
.chip,.tag{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--border);border-radius:999px;
  background:var(--muted);color:var(--fg-dim);padding:1px 10px 0;min-height:25px;font-size:12px;
  text-align:center;
  line-height:1.05;
  vertical-align:middle;
}
.tag{color:#0b1220;background:linear-gradient(90deg,var(--brand-from),var(--brand-to));border-color:transparent}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:1px 8px 0;
  min-height:19px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-soft);
  color:var(--fg-dim);
  font-size:11px;
  letter-spacing:.01em;
  text-align:center;
  line-height:1.05;
  vertical-align:middle;
}
.pill--ok{
  border-color:rgba(22,163,74,.35);
  background:rgba(22,163,74,.05);
  color:var(--ok);
}
.pill--warn{
  border-color:rgba(245,158,11,.35);
  background:rgba(245,158,11,.05);
  color:var(--warn);
}
.pill--err{
  border-color:rgba(239,68,68,.4);
  background:rgba(239,68,68,.06);
  color:var(--err);
}
.page-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:1px 10px 0;
  min-height:21px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-soft);
  color:var(--fg-dim);
  font-size:11px;
  letter-spacing:.04em;
  margin-bottom:10px;
  text-align:center;
  line-height:1.05;
  vertical-align:middle;
}

.skip-link{
  position:absolute;
  left:16px;
  top:12px;
  z-index:100;
  padding:10px 14px;
  border-radius:12px;
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-1);
  transform:translateY(-140%);
  transition:transform .16s ease;
}

.skip-link:focus-visible{
  transform:translateY(0);
}

/* OSS App Icon – gemeinsame Grundform */
.oss-icon{
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  flex:0 0 36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  aspect-ratio:1/1;
  background:linear-gradient(135deg,var(--oss-from,#4b5563),var(--oss-to,#9ca3af));
  color:#ffffff;
  box-shadow:var(--shadow-1);
}
.oss-icon svg{
  width:20px;
  height:20px;
  stroke:currentColor;
  stroke-width:2;
}
.oss-icon img{
  width:20px;
  height:20px;
  display:block;
}

/* OSS-App-spezifische Gradients */
.oss-opencloud   { --oss-from:#1f5eff; --oss-to:#60a5fa; }
.oss-onlyoffice  { --oss-from:#4f46e5; --oss-to:#7c3aed; }
.oss-appflowy    { --oss-from:#22c55e; --oss-to:#a3e635; }
.oss-calcom      { --oss-from:#0ea5e9; --oss-to:#22d3ee; }
.oss-openxchange { --oss-from:#2563eb; --oss-to:#38bdf8; }
.oss-matrix      { --oss-from:#16a34a; --oss-to:#4ade80; }
.oss-documenso   { --oss-from:#ec4899; --oss-to:#f97316; }
.oss-paperless   { --oss-from:#f97316; --oss-to:#fbbf24; }
.oss-erpnext     { --oss-from:#6366f1; --oss-to:#0ea5e9; }
.oss-zammad      { --oss-from:#f59e0b; --oss-to:#fb923c; }
.oss-vaultwarden { --oss-from:#0f172a; --oss-to:#4b5563; }
.oss-icon.oss-argio{background:#101216}
.oss-nanomdm     { --oss-from:#0ea5e9; --oss-to:#22c55e; }
.oss-gitlab      { --oss-from:#f97316; --oss-to:#ef4444; }
.oss-zed         { --oss-from:#0f172a; --oss-to:#3b82f6; }

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:transparent;color:var(--fg);border:1px solid var(--border);
  padding:10px 14px;border-radius:12px;cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease,transform .15s ease;
  background-clip:padding-box; /* verhindert helle Kante */
  font-weight:500;
  line-height:1;
}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn:hover{border-color:var(--accent);box-shadow:var(--ring)}
.btn.primary{
  position:relative;
  border:1px solid var(--accent);
  background:transparent;
  color:var(--accent);
  font-weight:700;
  box-shadow:none;
}
.btn.primary:hover{background:rgba(59,130,246,.06)}
.btn.primary:focus-visible{box-shadow:var(--ring)}
.btn.primary:active{transform:scale(.98)}

/* Theme Toggle */
.theme-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  width:60px;
  height:28px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--muted);
  color:var(--fg);
  cursor:pointer;
  padding:0 8px;
  box-shadow:0 4px 10px rgba(15,23,42,.16);
}

.theme-toggle::before{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:24px;
  height:22px;
  border-radius:999px;
  background:var(--panel);
  transform:translateX(0);
  transition:transform .18s ease,background .18s ease;
}

.theme-toggle svg{
  width:14px;
  height:14px;
  z-index:1;
  transition:opacity .15s ease,color .15s ease;
  opacity:.8;
}

.theme-toggle .icon-moon{
  opacity:.55;
}

/* Light Mode: Sonne aktiv */
html:not([data-theme="dark"]) .theme-toggle .icon-sun{
  opacity:1;
  color:#facc15;
}
html:not([data-theme="dark"]) .theme-toggle .icon-moon{
  opacity:.35;
  color:var(--fg-dim);
}

/* Dark Mode: Thumb rechts, Mond aktiv */
html[data-theme="dark"] .theme-toggle{
  background:#111827;
}
html[data-theme="dark"] .theme-toggle::before{
  transform:translateX(28px);
  background:#020617;
}
html[data-theme="dark"] .theme-toggle .icon-sun{
  opacity:.3;
  color:var(--fg-dim);
}
html[data-theme="dark"] .theme-toggle .icon-moon{
  opacity:1;
  color:#facc15;
}

/* Cards & Panels */
.card{
  background:var(--panel);
  border:0;
  border-radius:var(--radius-2);
  padding:20px 20px 18px;
  box-shadow:var(--shadow-1);
}
.band{
  background:var(--panel);
  border:0;
  border-radius:var(--radius-2);
  box-shadow:var(--shadow-1);
}
.band .head{
  display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(122,162,255,.06),transparent);
  border-top-left-radius:var(--radius-2);border-top-right-radius:var(--radius-2);
}
.band .body{padding:14px 16px 10px}

/* Karten-Border in Dark‑Mode etwas deutlicher, aber nicht hart */
html[data-theme="dark"] .card,
html[data-theme="dark"] .band{
  border-color:transparent;
}

/* Feature List */
.features{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media (max-width:980px){.features{grid-template-columns:1fr}}
.feat{display:flex;gap:10px;align-items:flex-start;background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:10px}
.feat .icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  padding:0;
}
.feat .icon svg{
  width:18px;
  height:18px;
}
.feat .icon.oss-icon{
}

/* Gradient helpers */
.grad-space{background:linear-gradient(90deg,var(--space-from),var(--space-to))}
.grad-cluster{background:linear-gradient(90deg,var(--cluster-from),var(--cluster-to))}
.grad-void{background:linear-gradient(90deg,var(--void-from),var(--void-to))}
.grad-cortex{background:linear-gradient(90deg,var(--cortex-from),var(--cortex-to))}

/* Navigation */
.nav{
  position:sticky;top:0;z-index:20;
  background:transparent;
  border-bottom:none;
}
.nav-row{
  display:flex;align-items:center;gap:18px;
  justify-content:flex-start;
  padding:10px 18px;
  margin:10px auto 14px;
  border-radius:999px;
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-1);
}
.brand{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  flex:0 0 auto;
}
.nav .brand{
  margin-right:auto;
}
.brand img{height:26px;width:auto;display:block}
.nav .topnav{display:flex;gap:14px;margin-left:0;align-items:center}
.nav .topnav a{padding:9px 10px 7px;border-radius:10px;line-height:1.05}
.nav .topnav a:hover{background:var(--muted)}
.nav .topnav a[aria-current="page"]{
  background:var(--muted);
  font-weight:500;
}
.nav-toggle{display:none;align-items:center;gap:8px;background:transparent;border:1px solid var(--border);color:var(--fg);border-radius:10px;padding:9px 10px 7px;cursor:pointer;line-height:1.05}
.nav-toggle svg{width:18px;height:18px}
@media (max-width:860px){
  .nav{position:relative}
  .nav-toggle{display:flex}
  .nav-row{position:relative}
  .nav .topnav{
    display:none;
    position:absolute;
    left:0;right:0;top:calc(100% + 10px);
    flex-direction:column;
    align-items:flex-start;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    box-shadow:var(--shadow-2);
  }
  .nav-toggle[aria-expanded="true"] + .topnav{display:flex}
  .topnav.open{display:flex}
  .nav .topnav a{width:100%}
  .nav .theme-toggle{margin-left:auto}
}

@media (max-width:480px){
  .container{padding:0 14px}
  .nav-row{gap:12px;padding:10px 12px}
  .theme-toggle{
    width:54px;
    height:26px;
    padding:0 7px;
  }
  .theme-toggle::before{
    top:2px;
    left:2px;
    width:22px;
    height:20px;
  }
  html[data-theme="dark"] .theme-toggle::before{
    transform:translateX(28px);
  }
  body{background-attachment:scroll}
}

/* Utilities */
.line{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:12px 0}
.kbd{border:1px solid var(--border);background:var(--muted);padding:0 8px;border-radius:6px}
.right{margin-left:auto}
.small{font-size:13px}
.visually-hidden{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.icon-btn{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:10px;
  background:transparent;
  color:var(--fg-dim);
  cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease,color .15s ease,background .15s ease;
}
.icon-btn:hover{
  border-color:var(--accent);
  color:var(--fg);
  background:var(--bg-soft);
  box-shadow:var(--ring);
}
.icon-btn svg{
  width:16px;
  height:16px;
}

/* Footer */
footer{border-top:1px solid var(--border);padding:28px 0 36px;margin-top:32px}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer .brand img{height:24px;width:auto}
footer .legal a{color:var(--fg-dim);text-decoration:underline}
footer .legal a:hover{color:var(--fg)}

.site-footer{
  margin-top:0;
  padding:40px 0 32px;
  background:transparent;
}

.footgrid{
  display:grid;
  gap:32px;
}

.footgrid > *{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
}

.foot-copy{
  margin:0;
  max-width:34rem;
  color:var(--fg-dim);
  line-height:1.6;
}

.foot-links{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.foot-links > strong,
.foot-heading{
  display:block;
  margin:0;
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fg-dim);
}

.foot-link-columns{
  display:grid;
  gap:8px 18px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:360px;
}

.foot-link-columns a,
.foot-muted-link{
  color:var(--fg-dim);
  transition:color .15s ease, opacity .15s ease;
}

.foot-link-columns a:hover,
.foot-link-columns a:focus-visible,
.foot-muted-link:hover,
.foot-muted-link:focus-visible{
  color:var(--fg);
}

.foot-contact{
  display:flex;
  flex-direction:column;
}

.foot-contact-bottom{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:0;
}

.foot-contact-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.foot-contact .btn{
  align-self:flex-start;
}

.foot-address{
  color:var(--fg-dim);
  line-height:1.6;
}

.foot-email{
  font-weight:500;
}

.site-meta{
  border-top:1px solid var(--border);
  padding:18px 0 24px;
}

.site-meta__inner{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}

.site-meta__links{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
}

.site-meta__link,
.site-meta__updated{
  color:var(--fg-dim);
}

.site-meta__link:hover,
.site-meta__link:focus-visible{
  color:var(--fg);
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

@media (min-width:900px){
  .footgrid{
    grid-template-columns:1.2fr .95fr .9fr;
  }
}

@media (min-width:640px){
  .site-meta__inner{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }
}

@media (max-width:640px){
  .footgrid{
    gap:24px;
  }
  .foot-link-columns{
    max-width:none;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px 14px;
  }
}


/* NAV data-open fallback (für JS, das data-open auf #topnav setzt) */
@media (max-width:860px){
  .topnav[data-open="true"]{display:flex}
}