/*
   Hub Control — Gestaltung.

   Die Farben, Schriften und Maße kommen aus hub-systems.de. Ein Kunde
   soll dasselbe Blau sehen, egal ob er auf der Webseite oder im Konto
   ist. Deshalb sind die Variablen unverändert übernommen — wer sie
   dort ändert, ändert sie hier mit.
*/

@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{
  --ink-900:#0A1018;
  --ink-800:#101A25;
  --ink-700:#17242F;
  --line-dark:#243546;
  --paper:#EDF1F3;
  --card:#FFFFFF;
  --line:#D6DEE4;

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

  /* Systemfarben — dieselben wie auf hub-systems.de.
     Rot ist neu: QSS-Hub fehlte in der Palette. */
  --ch:#2FAE9E;
  --ph:#E3A032;
  --oh:#6B7BF0;
  --ih:#A06FD6;
  --qh:#D9534F;

  --gruen:#1E7A44;
  --orange:#B45309;
  --rot:#B91C1C;

  --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,Menlo,Consolas,monospace;

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

*{box-sizing:border-box;}

body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--font-body);line-height:1.6;
}

.kopf{background:var(--ink-900);color:var(--text-on-dark);}
.kopf__innen{
  max-width:var(--wrap);margin:0 auto;padding:16px var(--gutter);
  display:flex;align-items:center;gap:32px;flex-wrap:wrap;
}

.marke{text-decoration:none;color:var(--text-on-dark);font-family:var(--font-display);
  font-weight:800;font-size:1.125rem;letter-spacing:-.01em;}
.marke__wort--leicht{color:var(--text-on-dark-muted);}

.navi{display:flex;gap:4px;}
.navi a{
  color:var(--text-on-dark-muted);text-decoration:none;padding:8px 14px;
  border-radius:var(--radius);font-size:.9375rem;
  /* 44 px: auch am Telefon bedienbar */
  min-height:44px;display:inline-flex;align-items:center;
}
.navi a[aria-current]{background:var(--ink-700);color:var(--text-on-dark);}

.inhalt{max-width:var(--wrap);margin:0 auto;padding:32px var(--gutter);}

.seitenkopf{display:flex;align-items:flex-start;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:24px;}
.seitenkopf h1{font-family:var(--font-display);font-weight:800;font-size:1.5rem;margin:0 0 4px;}

.karte{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;margin-bottom:20px;}
.karte__titel{font-size:1rem;margin:0 0 16px;font-weight:600;}

table{width:100%;border-collapse:collapse;}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top;}
th{font-size:.8125rem;color:var(--text-muted);font-weight:600;}
.daten{font-family:var(--font-mono);font-size:.875rem;}

.knopf{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;
  border-radius:var(--radius);background:var(--ink-900);color:#fff;border:0;
  font:inherit;font-size:.9375rem;cursor:pointer;text-decoration:none;min-height:44px;}
.knopf--still{background:transparent;color:var(--text);border:1px solid var(--line);}
.knopf--text{background:transparent;color:var(--text-muted);padding:8px 10px;border:0;}
.knopfreihe{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

.feld{margin-bottom:16px;}
.feld__beschriftung{display:block;font-size:.875rem;font-weight:600;margin-bottom:6px;}
.feld__eingabe{width:100%;padding:11px 12px;font:inherit;min-height:44px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;}
.feld__hinweis{display:block;font-size:.8125rem;color:var(--text-muted);margin-top:6px;}
.feldreihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}

.streifen{padding:12px 16px;border-radius:var(--radius);margin-bottom:20px;
  border:1px solid var(--line);background:var(--card);border-left-width:3px;}
.streifen--erfolg{border-left-color:var(--gruen);}
.streifen--warnung{border-left-color:var(--orange);}
.streifen--fehler{border-left-color:var(--rot);color:var(--rot);}

.marke-produkt{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;}
.punkt{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto;}

.abzeichen{display:inline-block;padding:2px 8px;border-radius:999px;
  font-size:.75rem;border:1px solid var(--line);background:var(--paper);}
.abzeichen--gruen{color:var(--gruen);border-color:var(--gruen);}
.abzeichen--orange{color:var(--orange);border-color:var(--orange);}
.abzeichen--rot{color:var(--rot);border-color:var(--rot);}

.leise{color:var(--text-muted);}
.klein{font-size:.875rem;}
.winzig{font-size:.75rem;}

.leerzustand{background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);
  padding:48px 24px;text-align:center;}