/* =========================================================================
   codeLAB365 · Design System
   Ein gemeinsames Stylesheet für alle Projektseiten.
   Einbinden mit:  <link rel="stylesheet" href="codelab365.css">
   Alle Klassen sind mit  cl-  präfixiert und lassen sich gefahrlos
   in bestehende Seiten einfügen.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ---------- 1. Design-Tokens ---------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Marke */
  --cl-navy:      #002E59;   /* Logo-Blau           */
  --cl-navy-600:  #003F78;   /* Hover / heller      */
  --cl-navy-700:  #001F42;   /* dunkler             */
  --cl-signal:    #0BA9CC;   /* „Schaltkreis"-Cyan  */
  --cl-signal-600:#0894B4;

  /* Neutrale Flächen (hell) */
  --cl-bg:        #F5F8FC;
  --cl-surface:   #FFFFFF;
  --cl-surface-2: #EEF3F9;
  --cl-line:      #DCE4EE;
  --cl-text:      #0E2136;
  --cl-muted:     #5A6B80;

  /* Semantisch */
  --cl-primary:      var(--cl-navy);
  --cl-primary-hover:var(--cl-navy-600);
  --cl-on-primary:   #FFFFFF;
  --cl-accent:       var(--cl-signal);
  --cl-link:         var(--cl-navy-600);
  --cl-focus:        var(--cl-signal);

  /* Status */
  --cl-ok:   #1F9D6B;
  --cl-warn: #C9840E;
  --cl-err:  #C43D3D;

  /* Typografie */
  --cl-font-display: 'Space Grotesk', system-ui, sans-serif;
  --cl-font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --cl-font-mono:    'Space Mono', ui-monospace, 'JetBrains Mono', monospace;

  /* Radius / Schatten / Layout */
  --cl-radius:    14px;
  --cl-radius-sm: 10px;
  --cl-radius-pill: 999px;
  --cl-shadow:    0 1px 2px rgba(0,35,66,.06), 0 10px 30px -16px rgba(0,46,89,.28);
  --cl-shadow-lg: 0 4px 10px rgba(0,35,66,.08), 0 24px 48px -20px rgba(0,46,89,.35);
  --cl-ring:      0 0 0 3px color-mix(in srgb, var(--cl-focus) 45%, transparent);
  --cl-maxw:      1160px;

  /* Abstände */
  --cl-space-1: .375rem;
  --cl-space-2: .75rem;
  --cl-space-3: 1.25rem;
  --cl-space-4: 2rem;
  --cl-space-5: 3.25rem;
  --cl-space-6: 5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cl-bg:        #0A1622;
    --cl-surface:   #0F1E2E;
    --cl-surface-2: #13273A;
    --cl-line:      #21374D;
    --cl-text:      #E7EEF6;
    --cl-muted:     #96A9BF;

    --cl-primary:      #1C4B7A;
    --cl-primary-hover:#245F97;
    --cl-on-primary:   #F2F8FF;
    --cl-link:         #6FC7E2;
    --cl-signal:       #34C0DF;
    --cl-shadow:    0 1px 2px rgba(0,0,0,.4), 0 12px 34px -18px rgba(0,0,0,.7);
    --cl-shadow-lg: 0 4px 12px rgba(0,0,0,.45), 0 26px 54px -22px rgba(0,0,0,.75);
  }
}

/* Manuelles Umschalten möglich:  <html data-theme="dark">  */
[data-theme="dark"] {
  --cl-bg:#0A1622; --cl-surface:#0F1E2E; --cl-surface-2:#13273A;
  --cl-line:#21374D; --cl-text:#E7EEF6; --cl-muted:#96A9BF;
  --cl-primary:#1C4B7A; --cl-primary-hover:#245F97; --cl-on-primary:#F2F8FF;
  --cl-link:#6FC7E2; --cl-signal:#34C0DF;
}
[data-theme="light"] {
  --cl-bg:#F5F8FC; --cl-surface:#FFFFFF; --cl-surface-2:#EEF3F9;
  --cl-line:#DCE4EE; --cl-text:#0E2136; --cl-muted:#5A6B80;
  --cl-primary:#002E59; --cl-primary-hover:#003F78; --cl-on-primary:#FFFFFF;
  --cl-link:#003F78; --cl-signal:#0BA9CC;
}

/* ---------- 2. Reset & Grundlagen ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--cl-font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cl-text);
  background: var(--cl-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--cl-font-display);
  color: var(--cl-text);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.15rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1rem; }

a { color: var(--cl-link); text-decoration-color: color-mix(in srgb, var(--cl-link) 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

hr { border: none; border-top: 1px solid var(--cl-line); margin: var(--cl-space-4) 0; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--cl-ring);
  border-radius: var(--cl-radius-sm);
}

::selection { background: color-mix(in srgb, var(--cl-signal) 30%, transparent); }

/* ---------- 3. Layout ----------------------------------------------------- */
.cl-container { width: 100%; max-width: var(--cl-maxw); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.cl-section   { padding-block: var(--cl-space-5); }
.cl-stack > * + * { margin-top: var(--cl-space-3); }

.cl-grid { display: grid; gap: var(--cl-space-3); }
.cl-grid--cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ---------- 4. Kopf- & Fußzeile ------------------------------------------ */
.cl-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--cl-surface) 85%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--cl-line);
}
.cl-header__inner {
  display: flex; align-items: center; gap: var(--cl-space-3);
  min-height: 64px;
}
.cl-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--cl-text); font-weight: 600; }
.cl-brand svg, .cl-brand img { width: 34px; height: 34px; }
.cl-brand__name { font-family: var(--cl-font-display); font-size: 1.15rem; letter-spacing: -0.01em; }
.cl-brand__name b { color: var(--cl-navy-600); }
@media (prefers-color-scheme: dark){ .cl-brand__name b { color: var(--cl-signal); } }
.cl-header__spacer { margin-left: auto; }

.cl-footer {
  border-top: 1px solid var(--cl-line);
  color: var(--cl-muted);
  font-size: .9rem;
  padding-block: var(--cl-space-4);
  margin-top: var(--cl-space-5);
}
.cl-footer a { color: inherit; }

/* ---------- 5. Eyebrow / Labels ------------------------------------------ */
.cl-eyebrow {
  font-family: var(--cl-font-mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cl-muted);
  display: inline-flex; align-items: center; gap: .55rem;
}
.cl-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cl-signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cl-signal) 22%, transparent);
}
.cl-muted { color: var(--cl-muted); }
.cl-lead  { font-size: 1.12rem; color: var(--cl-muted); max-width: 60ch; }

/* ---------- 6. Buttons ---------------------------------------------------- */
.cl-btn {
  --_bg: var(--cl-primary); --_fg: var(--cl-on-primary); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--cl-font-body); font-weight: 600; font-size: .95rem; line-height: 1;
  padding: .72rem 1.15rem; border-radius: var(--cl-radius-pill);
  background: var(--_bg); color: var(--_fg); border: 1.5px solid var(--_bd);
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cl-btn:hover { background: var(--cl-primary-hover); transform: translateY(-1px); }
.cl-btn:active { transform: translateY(0); }
.cl-btn--ghost  { --_bg: transparent; --_fg: var(--cl-text); --_bd: var(--cl-line); }
.cl-btn--ghost:hover { --_bg: var(--cl-surface-2); background: var(--cl-surface-2); border-color: var(--cl-navy-600); }
.cl-btn--signal { --_bg: var(--cl-signal); --_fg: #04222B; }
.cl-btn--signal:hover { background: var(--cl-signal-600); }
.cl-btn--sm { padding: .48rem .85rem; font-size: .85rem; }

/* ---------- 7. Chips / Tags / Badges ------------------------------------- */
.cl-chip {
  font-family: var(--cl-font-body); font-size: .85rem; font-weight: 500;
  padding: .42rem .9rem; border-radius: var(--cl-radius-pill);
  border: 1.5px solid var(--cl-line); background: var(--cl-surface);
  color: var(--cl-muted); cursor: pointer;
  transition: all .16s ease;
}
.cl-chip:hover { border-color: var(--cl-navy-600); color: var(--cl-text); }
.cl-chip[aria-pressed="true"], .cl-chip.is-active {
  background: var(--cl-primary); color: var(--cl-on-primary); border-color: var(--cl-primary);
}

.cl-tag {
  font-family: var(--cl-font-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cl-navy-600);
  background: color-mix(in srgb, var(--cl-signal) 12%, var(--cl-surface));
  border: 1px solid color-mix(in srgb, var(--cl-signal) 30%, transparent);
  padding: .2rem .5rem; border-radius: 6px; display: inline-block;
}
@media (prefers-color-scheme: dark){ .cl-tag { color: var(--cl-signal); } }

.cl-badge {
  font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: var(--cl-radius-pill);
  background: var(--cl-surface-2); color: var(--cl-muted);
}
.cl-badge--ok   { background: color-mix(in srgb, var(--cl-ok) 15%, transparent);   color: var(--cl-ok); }
.cl-badge--warn { background: color-mix(in srgb, var(--cl-warn) 15%, transparent); color: var(--cl-warn); }
.cl-badge--err  { background: color-mix(in srgb, var(--cl-err) 15%, transparent);  color: var(--cl-err); }

/* ---------- 8. Karten ---------------------------------------------------- */
.cl-card {
  background: var(--cl-surface);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius);
  padding: var(--cl-space-3);
  box-shadow: var(--cl-shadow);
}
.cl-card--pad { padding: var(--cl-space-4); }

/* ---------- 9. Formulare ------------------------------------------------- */
.cl-label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; color: var(--cl-text); }
.cl-input, .cl-select, .cl-textarea {
  width: 100%; font: inherit; color: var(--cl-text);
  background: var(--cl-surface); border: 1.5px solid var(--cl-line);
  border-radius: var(--cl-radius-sm); padding: .6rem .8rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cl-input:focus, .cl-select:focus, .cl-textarea:focus {
  border-color: var(--cl-signal); box-shadow: var(--cl-ring); outline: none;
}
.cl-textarea { min-height: 120px; resize: vertical; }

/* ---------- 10. Tabellen ------------------------------------------------- */
.cl-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cl-table th, .cl-table td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--cl-line); }
.cl-table thead th {
  font-family: var(--cl-font-mono); font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--cl-muted); font-weight: 700;
}
.cl-table tbody tr:hover { background: var(--cl-surface-2); }

/* ---------- 11. Utilities ------------------------------------------------- */
.cl-center     { text-align: center; }
.cl-flex       { display: flex; gap: var(--cl-space-2); align-items: center; }
.cl-flex-wrap  { flex-wrap: wrap; }
.cl-hidden     { display: none !important; }
.cl-mono       { font-family: var(--cl-font-mono); }
.cl-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 12. Bewegung reduzieren -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}