/* Gewerkschaft Underdog — Designsystem "Hell" v0.2.1
   Abgeleitet aus gdog.pro (dunkel). Für interne technische Oberflächen.
   Dokumentation: IT-Dokumentation/Handbücher/Webdesign-Hell_Designsystem_v0.2.1.md */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;500;600&family=Barlow:wght@400;500;600&display=swap');

:root{
  --gu-bg:#f5f0e8; --gu-surface:#fff; --gu-surface-alt:#faf7f1;
  --gu-ink:#0a0a0a; --gu-ink-muted:#5a5a52; --gu-ink-faint:#8a887e;
  --gu-red:#c8000a; --gu-red-dark:#9a0008;
  --gu-border:#dcd6c8; --gu-border-strong:#0a0a0a;
  --gu-ok:#00803a; --gu-ok-bg:#e6f4ec;
  --gu-warn:#8a6a00; --gu-warn-bg:#fbf3dd;
  --gu-fail:#c8000a; --gu-fail-bg:#fbe8e9;
  --gu-font-display:"Bebas Neue",sans-serif;
  --gu-font-condensed:"Barlow Condensed",sans-serif;
  --gu-font-body:"Barlow",sans-serif;
  --gu-space-xs:.5rem; --gu-space-sm:1rem; --gu-space-md:2rem;
  --gu-space-lg:4rem; --gu-space-xl:8rem;
  --gu-max-width:1280px; --gu-nav-height:72px;
}

*{box-sizing:border-box}
body{margin:0;background:var(--gu-bg);color:var(--gu-ink);
  font-family:var(--gu-font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}

/* Kopfzeile */
.gu-header{background:#0a0a0a;color:#f5f0e8;height:var(--gu-nav-height);
  display:flex;align-items:center;border-bottom:3px solid var(--gu-red)}
.gu-header__inner{max-width:var(--gu-max-width);margin:0 auto;width:100%;
  padding:0 var(--gu-space-sm);display:flex;align-items:center;
  justify-content:space-between;gap:var(--gu-space-md)}
.gu-header__brand{font-family:var(--gu-font-display);font-size:1.5rem;
  letter-spacing:.04em;text-transform:uppercase;margin:0}
.gu-header__nav{display:flex;gap:var(--gu-space-sm);flex-wrap:wrap}
.gu-header__nav a{color:#f5f0e8;text-decoration:none;
  font-family:var(--gu-font-condensed);text-transform:uppercase;
  letter-spacing:.08em;font-size:.875rem;padding:.25rem 0;
  border-bottom:2px solid transparent}
.gu-header__nav a:hover,.gu-header__nav a[aria-current]{border-bottom-color:var(--gu-red)}

/* Grundgerüst */
.gu-container{max-width:var(--gu-max-width);margin:0 auto;
  padding:var(--gu-space-md) var(--gu-space-sm)}
.gu-title{font-family:var(--gu-font-display);font-size:3rem;line-height:1.05;
  letter-spacing:.03em;text-transform:uppercase;margin:0 0 var(--gu-space-xs);
  padding-left:var(--gu-space-sm);border-left:8px solid var(--gu-red)}
.gu-subtitle{color:var(--gu-ink-muted);font-family:var(--gu-font-condensed);
  text-transform:uppercase;letter-spacing:.08em;font-size:.875rem;
  margin:0 0 var(--gu-space-md);padding-left:calc(var(--gu-space-sm) + 8px)}

/* Karten */
.gu-grid{display:grid;gap:var(--gu-space-sm);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.gu-card{background:var(--gu-surface);border:1px solid var(--gu-border);
  padding:var(--gu-space-sm)}
.gu-card__head{font-family:var(--gu-font-condensed);text-transform:uppercase;
  letter-spacing:.08em;font-size:.8125rem;color:var(--gu-ink-muted);
  border-bottom:1px solid var(--gu-border);padding-bottom:var(--gu-space-xs);
  margin-bottom:var(--gu-space-sm)}

/* Status */
.gu-status{display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--gu-font-condensed);text-transform:uppercase;
  letter-spacing:.08em;font-size:.8125rem;font-weight:600;padding:.25rem .625rem}
.gu-status--ok{background:var(--gu-ok-bg);color:var(--gu-ok)}
.gu-status--warn{background:var(--gu-warn-bg);color:var(--gu-warn)}
.gu-status--fail{background:var(--gu-fail-bg);color:var(--gu-fail)}
.gu-dot{width:10px;height:10px;display:inline-block;background:currentColor}

/* Tabelle */
.gu-table{width:100%;border-collapse:collapse;font-size:.9375rem}
.gu-table th{font-family:var(--gu-font-condensed);text-transform:uppercase;
  letter-spacing:.08em;font-size:.75rem;color:var(--gu-ink-muted);
  text-align:left;padding:.5rem;border-bottom:2px solid var(--gu-border-strong)}
.gu-table td{padding:.625rem .5rem;border-bottom:1px solid var(--gu-border);
  vertical-align:middle}
.gu-table tbody tr:nth-child(even){background:var(--gu-surface-alt)}
.gu-table__host{font-family:var(--gu-font-condensed);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em}

/* Weitere */
.gu-badge{display:inline-block;border:1px solid var(--gu-border-strong);
  font-family:var(--gu-font-condensed);text-transform:uppercase;
  letter-spacing:.08em;font-size:.75rem;padding:.125rem .5rem}
.gu-metric{font-family:var(--gu-font-display);font-size:2.5rem;line-height:1;
  letter-spacing:.02em}
.gu-metric__label{font-family:var(--gu-font-condensed);text-transform:uppercase;
  letter-spacing:.08em;font-size:.75rem;color:var(--gu-ink-muted)}
.gu-btn{display:inline-block;background:var(--gu-red);color:#f5f0e8;
  border:none;padding:.5rem 1.25rem;font-family:var(--gu-font-condensed);
  text-transform:uppercase;letter-spacing:.08em;font-size:.875rem;
  cursor:pointer;text-decoration:none}
.gu-btn:hover{background:var(--gu-red-dark)}
.gu-btn--ghost{background:transparent;color:var(--gu-ink);
  border:1px solid var(--gu-border-strong)}
.gu-btn--ghost:hover{background:var(--gu-ink);color:var(--gu-bg)}
.gu-footer{border-top:1px solid var(--gu-border);margin-top:var(--gu-space-lg);
  padding-top:var(--gu-space-sm);color:var(--gu-ink-faint);font-size:.8125rem}
.gu-mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.875rem}

@media (max-width:640px){
  .gu-title{font-size:2rem}
  .gu-header{height:auto;padding:var(--gu-space-xs) 0}
  .gu-header__inner{flex-direction:column;align-items:flex-start;gap:var(--gu-space-xs)}
}
@media print{
  .gu-header{background:#fff;color:#000;border-bottom:2px solid #000}
  .gu-header__nav{display:none}
  .gu-card{break-inside:avoid}
}