/* werkstattlinie.css v0.1
 * Design System per Regel #17
 * Author: Thomas Schüller
 * License: CC BY 4.0
 * Used in: NOSCERE, alle HTML-Outputs
 */

:root {
  /* ===== COLOR TOKENS ===== */
  --bg: #0b0908;
  --bg-alt: #12100e;
  --bg-input: rgba(168,131,92,0.03);
  --fg: #c8bfb4;
  --fg-mute: rgba(200,191,180,0.7);
  --fg-faint: rgba(200,191,180,0.4);

  --accent: #a8835c;
  --accent-bright: #d4b88a;
  --accent-amber: #c4a97a;
  --accent-soft: rgba(168,131,92,0.08);

  --border: rgba(168,131,92,0.15);
  --border-soft: rgba(168,131,92,0.07);

  /* Evidence / status colors */
  --green: #7eb8a0;
  --amber: #c4a97a;
  --red: #c47a7a;
  --blue: #8b9dc3;
  --purple: #9b87b2;

  /* ===== TYPOGRAPHY TOKENS ===== */
  --serif: 'Cormorant Garamond', 'DejaVu Serif', Georgia, serif;
  --mono: 'Azeret Mono', 'JetBrains Mono', 'DejaVu Sans Mono', monospace;
  --sans: 'Inter', 'DejaVu Sans', system-ui, sans-serif;

  --fs-xs: 9px;
  --fs-sm: 11px;
  --fs-base: 14.5px;
  --fs-lg: 16px;
  --fs-xl: 22px;
  --fs-2xl: 28px;

  --lh-tight: 1.4;
  --lh-base: 1.7;
  --lh-loose: 1.8;

  /* ===== SPACING TOKENS ===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ===== RADII ===== */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* ===== FOCUS RING (WCAG) ===== */
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  text-rendering: optimizeLegibility;
}

/* ===== ACCESSIBILITY ===== */
*:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-sm);
}
.wl-skip {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--accent);
  color: var(--bg);
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  z-index: 999;
}
.wl-skip:focus {
  top: var(--sp-2);
  left: var(--sp-2);
}
.wl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== EBENEN ===== */
.ebene-paper {
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 30px;
  font-size: 16px;
  line-height: 1.75;
}
.ebene-werkzeug {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.ebene-homepage {
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== COMPONENTS ===== */

/* Header */
.wl-header {
  border-bottom: 1px solid var(--border);
  background: rgba(11,9,8,0.96);
  backdrop-filter: blur(14px);
  padding: var(--sp-3) var(--sp-4);
  position: sticky;
  top: 0;
  z-index: 10;
}
.wl-header__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 960px;
  margin: 0 auto;
}
.wl-header__title {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.13em;
  color: var(--accent);
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.wl-header__ver {
  font-size: var(--fs-xs);
  color: rgba(168,131,92,0.3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1px 5px;
}
.wl-header__sub {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(168,131,92,0.3);
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* Card */
.wl-card {
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}

/* Buttons */
.wl-btn {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 5px 11px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.wl-btn:hover { background: rgba(168,131,92,0.14); border-color: var(--accent); }
.wl-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.wl-btn--primary {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}
.wl-btn--primary:hover { background: var(--accent-bright); }
.wl-btn--ghost { background: transparent; }

/* Inputs */
.wl-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 12px;
  color: var(--fg);
  font-family: var(--serif);
  font-size: var(--fs-base);
  outline: none;
  transition: border-color 0.15s;
}
.wl-input:focus-visible { border-color: var(--accent); outline: var(--focus-ring); outline-offset: 0; }
.wl-input::placeholder { color: rgba(168,131,92,0.25); }
.wl-input--mono { font-family: var(--mono); font-size: var(--fs-sm); }

/* Tags / Badges */
.wl-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  color: var(--accent);
  text-transform: uppercase;
}
.wl-tag--green { background: rgba(126,184,160,0.12); border-color: rgba(126,184,160,0.3); color: var(--green); }
.wl-tag--amber { background: rgba(196,169,122,0.12); border-color: rgba(196,169,122,0.3); color: var(--amber); }
.wl-tag--red { background: rgba(196,122,122,0.12); border-color: rgba(196,122,122,0.3); color: var(--red); }
.wl-tag--blue { background: rgba(139,157,195,0.12); border-color: rgba(139,157,195,0.3); color: var(--blue); }

/* Box (info / notice) */
.wl-box {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-3) 0;
}
.wl-box--green { border-left-color: var(--green); }
.wl-box--red { border-left-color: var(--red); }
.wl-box--blue { border-left-color: var(--blue); }

/* Stop indicator (schließungsregel) */
.wl-stop {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--red);
  background: rgba(196,122,122,0.08);
  border: 1px solid rgba(196,122,122,0.25);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Step (pipeline) */
.wl-step {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(168,131,92,0.4);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.wl-step__num {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 600;
  color: var(--accent);
}

/* Table */
.wl-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.wl-table th {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.wl-table td {
  padding: 6px var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
  color: var(--fg-mute);
  line-height: 1.55;
}
.wl-table tr:last-child td { border-bottom: none; }

/* Footer */
.wl-footer {
  border-top: 1px solid var(--border-soft);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(11,9,8,0.97);
  backdrop-filter: blur(14px);
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(168,131,92,0.3);
  letter-spacing: 0.04em;
}

/* Map (location/diagram) */
.wl-map {
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(168,131,92,0.12); border-radius: var(--r-sm); }
::-webkit-scrollbar-thumb:hover { background: rgba(168,131,92,0.25); }

/* Print mode */
@media print {
  body { background: #fff !important; color: #1a1a1a !important; }
  .wl-header, .wl-footer, .no-print { display: none !important; }
  .wl-tag, .wl-box { background: #f5f5f0 !important; border-color: #ccc !important; color: #333 !important; }
  .wl-tag--green { color: #2d7a4a !important; }
  .wl-tag--amber { color: #b8860b !important; }
  .wl-tag--red { color: #a0392b !important; }
  .wl-tag--blue { color: #2c5aa0 !important; }
  .wl-table { border-color: #ccc !important; }
  .wl-table th { background: #f0f0f0 !important; color: #333 !important; border-bottom-color: #ccc !important; }
  .wl-table td { color: #2a2a2a !important; border-bottom-color: #eee !important; }
  @page { margin: 20mm 18mm; }
}