/* =========================================================
   Hub Systems – hub-systems.de
   Gestaltungsprinzip: Die Dachmarke bleibt grau.
   Farbe gehoert ausschliesslich den Systemen.
   ========================================================= */

/* ---- Optional: Schriften selbst hosten (DSGVO-sicher) ----
   Dateien nach /assets/fonts/ legen, dann diesen Block aktivieren
   und in --font-display / --font-body die Namen voranstellen.

@font-face{font-family:"Archivo";src:url("../fonts/archivo-800.woff2") format("woff2");font-weight:800;font-display:swap;}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plexsans-400.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plexsans-600.woff2") format("woff2");font-weight:600;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/plexmono-500.woff2") format("woff2");font-weight:500;font-display:swap;}
--------------------------------------------------------- */

:root{
  /* Flaechen */
  --ink-900:#0A1018;
  --ink-800:#101A25;
  --ink-700:#17242F;
  --line-dark:#243546;
  --paper:#EDF1F3;
  --card:#FFFFFF;
  --line:#D6DEE4;

  /* Text */
  --text:#0D1720;
  --text-muted:#56697A;
  --text-on-dark:#F2F6F8;
  --text-on-dark-muted:#93A7B7;

  /* Systemfarben – die einzigen Farben der Seite */
  --ch:#2FAE9E;   /* Clean-Hub   */
  --ph:#E3A032;   /* POS-Hub     */
  --oh:#6B7BF0;   /* Office-Hub  */
  --ih:#A06FD6;   /* ISO-Hub     */

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap:1180px;
  --gutter:clamp(20px, 5vw, 48px);
  --radius:4px;
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{max-width:100%;display:block;}
a{color:inherit;}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter);}

.section{padding-block:clamp(64px,9vw,120px);}
.section--dark{background:var(--ink-900);color:var(--text-on-dark);}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin:0 0 18px;
}
.section--dark .eyebrow{color:var(--text-on-dark-muted);}

h1,h2,h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.04;margin:0;}
h2{font-size:clamp(30px,4.4vw,52px);}
h3{font-size:20px;letter-spacing:-.01em;line-height:1.2;}

p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}

.lead{font-size:clamp(17px,2vw,20px);color:var(--text-muted);max-width:56ch;}
.section--dark .lead{color:var(--text-on-dark-muted);}

/* ---------- Kopfzeile ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,16,24,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease;
}
.site-header.is-stuck{border-bottom-color:var(--line-dark);}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:66px;}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text-on-dark);}
.brand__mark{width:26px;height:26px;flex:none;}
.brand__name{
  font-family:var(--font-mono);font-size:13px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
}

.nav{display:flex;align-items:center;gap:28px;}
.nav a{
  font-size:14px;text-decoration:none;color:var(--text-on-dark-muted);
  transition:color .2s ease;
}
.nav a:hover{color:var(--text-on-dark);}

/* ---------- Schaltflaechen ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border-radius:var(--radius);
  font-family:var(--font-body);font-size:15px;font-weight:600;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn--primary{background:var(--text-on-dark);color:var(--ink-900);}
.btn--ghost{border-color:var(--line-dark);color:var(--text-on-dark);}
.btn--ghost:hover{border-color:var(--text-on-dark-muted);}
.btn--dark{background:var(--ink-900);color:var(--text-on-dark);}
.btn--small{padding:9px 16px;font-size:13.5px;}

/* ---------- Bühne ---------- */
.hero{
  background:var(--ink-900);color:var(--text-on-dark);
  padding-block:clamp(58px,8vw,104px) clamp(64px,9vw,110px);
  border-bottom:1px solid var(--line-dark);
}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,72px);align-items:center;}
.hero h1{font-size:clamp(40px,7vw,80px);margin-bottom:24px;}
.hero h1 span{display:block;}
.hero h1 .is-quiet{color:var(--text-on-dark-muted);}
.hero__text .lead{margin-bottom:32px;}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;}

/* ---------- Ereignis-Log (Signatur der Seite) ---------- */
.log{
  background:var(--ink-800);
  border:1px solid var(--line-dark);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9);
}
.log__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 16px;border-bottom:1px solid var(--line-dark);background:var(--ink-700);
}
.log__title{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-on-dark);}
.log__note{font-family:var(--font-mono);font-size:11px;color:var(--text-on-dark-muted);}
.log__list{list-style:none;margin:0;padding:8px 0;min-height:326px;}
.log__row{
  display:grid;grid-template-columns:34px 62px minmax(0,1fr);
  gap:12px;align-items:baseline;
  padding:9px 16px;
  font-family:var(--font-mono);font-size:12.5px;line-height:1.45;
  border-left:2px solid transparent;
}
.log__row.is-new{animation:logIn .45s ease both;}
@keyframes logIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.log__tag{font-weight:500;letter-spacing:.08em;}
.log__time{color:#5C7185;}
.log__text{color:var(--text-on-dark);}
.log__text b{font-weight:500;color:var(--text-on-dark-muted);}

.log__row[data-sys="ch"]{border-left-color:var(--ch);}
.log__row[data-sys="ph"]{border-left-color:var(--ph);}
.log__row[data-sys="oh"]{border-left-color:var(--oh);}
.log__row[data-sys="ih"]{border-left-color:var(--ih);}
.log__row[data-sys="ch"] .log__tag{color:var(--ch);}
.log__row[data-sys="ph"] .log__tag{color:var(--ph);}
.log__row[data-sys="oh"] .log__tag{color:var(--oh);}
.log__row[data-sys="ih"] .log__tag{color:var(--ih);}

/* ---------- Manifest ---------- */
.manifest{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,64px);align-items:start;}
.manifest__body{font-size:clamp(18px,2.1vw,21px);line-height:1.55;max-width:60ch;}
.manifest__body strong{font-weight:600;}

/* ---------- Systeme ---------- */
.systems{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:44px;}
.system{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px 26px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.system::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--accent);border-radius:var(--radius) var(--radius) 0 0;
}
.system:hover{transform:translateY(-4px);box-shadow:0 18px 40px -26px rgba(13,23,32,.55);border-color:#C3CFD8;}
.system__head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.system__code{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  color:#fff;background:var(--accent);padding:4px 8px;border-radius:3px;
}
.system__status{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);margin-left:auto;
}
.system__claim{color:var(--text-muted);margin:8px 0 18px;}
.system__list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:9px;}
.system__list li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.5;}
.system__list li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--accent);
}
.system__link{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;
  text-decoration:none;color:var(--text);border-bottom:1px solid var(--line);
  padding-bottom:4px;align-self:flex-start;transition:border-color .2s ease,color .2s ease;
}
.system__link:hover{color:var(--accent);border-bottom-color:var(--accent);}
.system__link[aria-disabled="true"]{color:var(--text-muted);pointer-events:none;border-bottom-style:dashed;}

/* ---------- Fundament (Spezifikationstabelle) ---------- */
.spec{margin-top:44px;border-top:1px solid var(--line-dark);}
.spec__row{
  display:grid;grid-template-columns:34px minmax(0,.5fr) minmax(0,1fr);
  gap:clamp(16px,3vw,40px);
  padding:22px 0;border-bottom:1px solid var(--line-dark);align-items:baseline;
}
.spec__no{font-family:var(--font-mono);font-size:12px;color:#4C6274;}
.spec__key{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.01em;}
.spec__val{color:var(--text-on-dark-muted);font-size:15.5px;}

/* ---------- Kontakt ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;}
.contact__card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;}
.contact__row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px;}
.contact__row:last-of-type{border-bottom:0;}
.contact__row dt{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin:0;}
.contact__row dd{margin:0;text-align:right;}
.contact__card a{text-decoration:none;border-bottom:1px solid var(--line);}
.contact__card a:hover{border-bottom-color:var(--text);}

/* ---------- Fusszeile ---------- */
.site-footer{background:var(--ink-900);color:var(--text-on-dark-muted);padding-block:52px 36px;font-size:14.5px;}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:36px;}
.footer h4{
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-on-dark);margin:0 0 14px;
}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.footer a{text-decoration:none;transition:color .2s ease;}
.footer a:hover{color:var(--text-on-dark);}
.footer__dot{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:9px;vertical-align:middle;}
.footer__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line-dark);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;
}

/* ---------- Rechtstexte ---------- */
.legal{max-width:74ch;}
.legal h2{margin-bottom:24px;}
.legal h3{margin:34px 0 10px;}
.legal p, .legal li{color:var(--text-muted);}
.legal ul{padding-left:20px;}
.legal .todo{
  background:#FFF6DC;border:1px solid #E8CE86;border-radius:var(--radius);
  padding:14px 16px;font-size:15px;color:#6A5314;
}

/* ---------- Einblenden beim Scrollen ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1;transform:none;}

/* ---------- Tastaturfokus ---------- */
a:focus-visible,.btn:focus-visible{outline:2px solid var(--ch);outline-offset:3px;border-radius:2px;}
.skip{
  position:absolute;left:-9999px;top:12px;
  background:#fff;color:var(--text);padding:10px 16px;border-radius:var(--radius);z-index:100;
}
.skip:focus{left:var(--gutter);}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:960px){
  .hero__grid,.manifest,.contact{grid-template-columns:1fr;}
  .systems{grid-template-columns:1fr;}
  .footer__grid{grid-template-columns:1fr 1fr;}
  .nav{display:none;}
}
@media (max-width:560px){
  body{font-size:16px;}
  .spec__row{grid-template-columns:1fr;gap:6px;padding:18px 0;}
  .spec__no{display:none;}
  .log__row{grid-template-columns:30px minmax(0,1fr);row-gap:2px;}
  .log__time{grid-column:2;font-size:11px;}
  .log__text{grid-column:2;}
  .log__list{min-height:340px;}
  .footer__grid{grid-template-columns:1fr;gap:28px;}
  .contact__row{flex-direction:column;gap:2px;}
  .contact__row dd{text-align:left;}
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  .reveal{opacity:1;transform:none;}
}