/* ============================================================
   REWADI · Design System
   Kanonisches Stylesheet für REWADI Web-, KI- & Design-Projekte
   Version 1.0 · 2026
   ------------------------------------------------------------
   Quelle der Wahrheit:
   - Markenfarben & Schriften ........ REWADI Style Sheet (PDF)
   - Komponenten & Look .............. REWADI Karriereseite
   ------------------------------------------------------------
   Nutzung:
   <link rel="stylesheet" href="rewadi-design-system.css">

   Hell-Theme ist Standard. Dunkles Theme:
   - manuell:      <html data-theme="dark"> ... </html>
   - automatisch:  folgt prefers-color-scheme, solange
                   kein data-theme="light" gesetzt ist.

   Aufbau (4 Ebenen):
   1) Marken-Primitive  – rohe Farben/Schriften aus dem PDF
   2) Semantische Tokens – Bedeutung (--bg, --text, --primary …)
   3) Skalen            – Typo, Abstände, Radien, Schatten, Motion
   4) Komponenten + Utilities
   ============================================================ */

/* ============================================================
   1) MARKEN-PRIMITIVE  (PDF – unveränderlich)
   ============================================================ */
:root {
  /* Gold-Familie ------------------------------------------- */
  --rw-gold-300: #edd69a; /* helles Gold / Sand   */
  --rw-gold-500: #ceaf35; /* PRIMÄR-Gold (Marke)  */
  --rw-gold-700: #bc7201; /* Bronze / dunkles Gold */

  /* Terrakotta-Familie (Akzent) ---------------------------- */
  --rw-terra-300: #e79969; /* Pfirsich / hell      */
  --rw-terra-600: #ba4613; /* Rost / Terrakotta    */

  /* Neutrale Grautöne -------------------------------------- */
  --rw-grey-warm:    #7d6d6d; /* warmes Grau / Taupe */
  --rw-grey-cool:    #81808e; /* kühles Grau / Schiefer */
  --rw-grey-neutral: #777776; /* neutrales Grau */

  /* Exakte Logo-Farben (aus den Vektordaten) ---------------
     Für 1:1-Übereinstimmung mit dem Logo verwenden.          */
  --rw-logo-ink:  #1d1d1b; /* Anthrazit – Zahnrad & Schriftzug */
  --rw-logo-grey: #878787; /* Grau – Schraubenschlüssel */
  --rw-logo-gold: #dcb80e; /* Gold – Ähre */

  /* Erweiterte Digital-Neutralen (Web-Identität) ----------- */
  --rw-ink-900: #0b1320; /* Navy – Tiefdunkel  */
  --rw-ink-800: #0f1d2e; /* Navy 2             */
  --rw-ink-700: #122441; /* Navy 3             */
  --rw-ink-600: #16304d; /* Navy 4             */
  --rw-paper:   #ffffff;
  --rw-sand-50: #faf8f3; /* warmes Off-White   */
  --rw-sand-100:#f4efe5;
  --rw-sand-200:#e7e1d5; /* warme Trennlinie   */
  --rw-sand-300:#d8d0c0;
}

/* ============================================================
   2) SEMANTISCHE TOKENS  ·  Hell-Theme (Standard)
   ============================================================ */
:root {
  color-scheme: light;

  /* Flächen */
  --bg:            var(--rw-paper);
  --surface:       var(--rw-paper);
  --surface-2:     var(--rw-sand-50);
  --surface-3:     var(--rw-sand-100);
  --border:        var(--rw-sand-200);
  --border-strong: var(--rw-sand-300);

  /* Text */
  --text:        #1d1a15; /* warmes Fast-Schwarz */
  --text-soft:   #5a544b;
  --text-mute:   #8a8278;
  --text-invert: #ffffff;

  /* Marke */
  --primary:        var(--rw-gold-500);
  --primary-strong: var(--rw-gold-700);
  --primary-soft:   var(--rw-gold-300);
  --on-primary:     #20180a; /* Text auf Gold-Flächen */
  --accent:         var(--rw-terra-600);
  --accent-soft:    var(--rw-terra-300);
  --on-accent:      #ffffff;

  /* Status (markennah abgeleitet) */
  --success: #3a7d44;
  --warning: var(--rw-gold-700);
  --danger:  var(--rw-terra-600);
  --info:    #3a6ea5;

  /* Verläufe & Glanz */
  --gradient-brand: linear-gradient(135deg, var(--rw-gold-500) 0%, var(--rw-gold-700) 100%);
  --gradient-hot:   linear-gradient(120deg, var(--rw-gold-500) 0%, var(--rw-terra-600) 100%);

  /* Fokus-Ring */
  --ring: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent);
}

/* ============================================================
   2b) DUNKLES THEME
   Werte werden 1:1 in zwei Selektoren gespiegelt:
   manuell ([data-theme="dark"]) + automatisch (prefers).
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            var(--rw-ink-900);
  --surface:       var(--rw-ink-800);
  --surface-2:     var(--rw-ink-700);
  --surface-3:     var(--rw-ink-600);
  --border:        rgba(255, 255, 255, .12);
  --border-strong: rgba(255, 255, 255, .22);

  --text:        #e9eef7;
  --text-soft:   rgba(233, 238, 247, .78);
  --text-mute:   rgba(233, 238, 247, .55);
  --text-invert: #0b1320;

  --primary:        var(--rw-gold-500);
  --primary-strong: var(--rw-gold-300);
  --primary-soft:   rgba(206, 175, 53, .20);
  --on-primary:     #20180a;
  --accent:         var(--rw-terra-300);
  --accent-soft:    rgba(231, 153, 105, .22);
  --on-accent:      #20180a;

  --success: #5cc46c;
  --info:    #6ba4e0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:            var(--rw-ink-900);
    --surface:       var(--rw-ink-800);
    --surface-2:     var(--rw-ink-700);
    --surface-3:     var(--rw-ink-600);
    --border:        rgba(255, 255, 255, .12);
    --border-strong: rgba(255, 255, 255, .22);

    --text:        #e9eef7;
    --text-soft:   rgba(233, 238, 247, .78);
    --text-mute:   rgba(233, 238, 247, .55);
    --text-invert: #0b1320;

    --primary:        var(--rw-gold-500);
    --primary-strong: var(--rw-gold-300);
    --primary-soft:   rgba(206, 175, 53, .20);
    --on-primary:     #20180a;
    --accent:         var(--rw-terra-300);
    --accent-soft:    rgba(231, 153, 105, .22);
    --on-accent:      #20180a;

    --success: #5cc46c;
    --info:    #6ba4e0;
  }
}

/* ============================================================
   3) SKALEN  (Theme-unabhängig)
   ============================================================ */
:root {
  /* --- Schriftfamilien -----------------------------------
     Marke zuerst (Futura / Verdana), bewährte Web-Fonts als
     Fallback. Für Web-Projekte ggf. "Space Grotesk" + "Inter"
     via Google Fonts laden – sie sind die Fallbacks unten.   */
  --font-heading: "Futura", "Futura PT", "Century Gothic", "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Verdana Pro", "Verdana", "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-mono:    ui-monospace, "Cascadia Code", "Segoe UI Mono", Menlo, Consolas, monospace;

  /* --- Schriftgrößen (fluid) ------------------------------ */
  --fs-display: clamp(2.4rem, 5vw + 1rem, 4rem);
  --fs-h1:      clamp(2rem, 4vw + 1rem, 3.2rem);
  --fs-h2:      clamp(1.6rem, 2vw + 1rem, 2.4rem);
  --fs-h3:      1.3rem;
  --fs-h4:      1.05rem;
  --fs-lead:    clamp(1.05rem, .5vw + .95rem, 1.2rem);
  --fs-base:    1rem;   /* 16px */
  --fs-sm:      .875rem;
  --fs-xs:      .75rem;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.6;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-wide: .18em; /* Eyebrows / Labels */

  /* --- Abstände (4px-Raster) ------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Radien --------------------------------------------- */
  --radius-sm:  8px;
  --radius:     14px;
  --radius-lg:  22px;
  --radius-xl:  32px;
  --radius-pill: 999px;

  /* --- Schatten ------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
  --shadow-md: 0 10px 25px -10px rgba(15, 23, 42, .15), 0 4px 10px -2px rgba(15, 23, 42, .06);
  --shadow-lg: 0 30px 60px -20px rgba(15, 23, 42, .35);

  /* --- Bewegung ------------------------------------------- */
  --ease:     cubic-bezier(.2, .7, .2, 1);
  --dur-fast: .15s;
  --dur:      .25s;
  --dur-slow: .5s;

  /* --- Layout --------------------------------------------- */
  --container:        1200px;
  --container-narrow: 820px;
  --gutter:           clamp(16px, 4vw, 32px);
}

[data-theme="dark"] {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 12px 30px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, .7);
}

/* ============================================================
   4) BASE / RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--primary-strong); }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: color-mix(in srgb, var(--primary) 35%, transparent);
  color: var(--text);
}

hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: var(--space-8) 0;
}

/* ============================================================
   5) TYPOGRAFIE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: var(--lh-tight);
  letter-spacing: -.01em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }

p { margin: 0 0 var(--space-4); }

.display {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
  margin: 0 0 var(--space-5);
}

.lead {
  font-size: var(--fs-lead);
  color: var(--text-soft);
  line-height: var(--lh-snug);
}

small, .text-sm { font-size: var(--fs-sm); }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: .9em; }
code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .15em .4em;
}

/* Gold-Verlaufstext für Highlights */
.hl, .text-gradient {
  background: var(--gradient-hot);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Eyebrow / Kicker-Label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--primary-strong);
  margin: 0 0 var(--space-4);
}
.eyebrow__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* ============================================================
   6) LAYOUT-HELFER
   ============================================================ */
.container, .wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section {
  padding-block: clamp(64px, 8vw, 120px);
  background: var(--bg);
}
.section--alt { background: var(--surface-2); }
.section--dark {
  background: linear-gradient(135deg, var(--rw-ink-900) 0%, var(--rw-ink-700) 100%);
  color: #e9eef7;
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

.section__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-12);
}
.section__head .eyebrow { justify-content: center; }

.stack > * + * { margin-top: var(--space-4); }
.grid { display: grid; gap: var(--space-5); }

/* ============================================================
   6b) LOGO
   Assets in assets/logos/ – bevorzugt SVG einbinden.
   Hell:  rewadi-logo.svg | rewadi-mark.svg | rewadi-logo-horizontal.svg
   Dunkel: jeweils *-white.svg (weißer Knockout).
   Mindesthöhen: Icon 24px · Primär 40px · Horizontal 32px.
   ============================================================ */
.rw-logo { display: block; width: auto; height: auto; }
.rw-logo--xs { height: 28px; }
.rw-logo--sm { height: 40px; }
.rw-logo--md { height: 64px; }
.rw-logo--lg { height: 96px; }
/* Notfall-Inversion, falls nur die Farb-Datei verfügbar ist
   (besser: die mitgelieferte *-white.svg verwenden). */
[data-theme="dark"] .rw-logo--invert { filter: brightness(0) invert(1); }

/* ============================================================
   7) BUTTONS
   ============================================================ */
.btn {
  --_pad-y: 12px;
  --_pad-x: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--_pad-y) var(--_pad-x);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; }

.btn--lg    { --_pad-y: 16px; --_pad-x: 28px; }
.btn--sm    { --_pad-y: 9px;  --_pad-x: 14px; font-size: var(--fs-sm); }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--gradient-brand);
  color: var(--on-primary);
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--primary) 70%, transparent);
}
.btn--primary:hover {
  transform: translateY(-2px);
  color: var(--on-primary);
  box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--primary) 85%, transparent);
}

.btn--accent {
  background: var(--accent);
  color: var(--on-accent);
}
.btn--accent:hover { transform: translateY(-2px); filter: brightness(1.05); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--ghost:hover {
  background: var(--surface-2);
  border-color: var(--primary);
  color: var(--text);
}

.btn--link {
  background: none;
  border: none;
  color: var(--primary);
  padding-inline: 0;
  border-radius: 0;
}
.btn--link:hover { color: var(--primary-strong); text-decoration: underline; }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   8) BADGES / CHIPS
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.badge--accent { background: var(--accent-soft); color: var(--accent); }
.badge--neutral { background: var(--surface-3); color: var(--text-soft); }
.badge--outline {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-soft);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  font-size: var(--fs-sm);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-soft);
}

/* ============================================================
   9) CARDS
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-8);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}
.card h3 { margin-bottom: var(--space-2); }
.card p  { color: var(--text-soft); margin: 0; }

.card__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary-soft), transparent);
  color: var(--primary-strong);
  margin-bottom: var(--space-4);
}
.card__icon svg { width: 26px; height: 26px; }

/* nummerierte Feature-Karte */
.feature {
  padding: var(--space-8);
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.feature:hover { transform: translateY(-3px); border-color: var(--primary-soft); }
.feature__num {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 44px;
  line-height: 1;
  margin-bottom: var(--space-2);
  background: var(--gradient-hot);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.feature p { color: var(--text-soft); margin: 0; }

/* ============================================================
   10) STATS / KENNZAHLEN
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-8);
  text-align: center;
}
.stat__num {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(2.4rem, 4vw + 1rem, 3.6rem);
  line-height: 1;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-mute);
}

/* ============================================================
   11) FORMULARE
   ============================================================ */
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-soft);
}
.input, .textarea, .select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.textarea { min-height: 120px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-mute); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}
.input:disabled, .textarea:disabled, .select:disabled {
  background: var(--surface-2);
  color: var(--text-mute);
  cursor: not-allowed;
}
.field__hint { font-size: var(--fs-xs); color: var(--text-mute); }
.field__error { font-size: var(--fs-xs); color: var(--danger); }

/* ============================================================
   12) TABELLEN
   ============================================================ */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table th, .table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.table th {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: var(--fs-xs);
}
.table tbody tr:hover { background: var(--surface-2); }

/* ============================================================
   13) ALERTS / HINWEISE
   ============================================================ */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-left: 4px solid var(--primary);
}
.alert--success { border-left-color: var(--success); }
.alert--warning { border-left-color: var(--warning); }
.alert--danger  { border-left-color: var(--danger); }
.alert--info    { border-left-color: var(--info); }

/* ============================================================
   14) UTILITIES
   ============================================================ */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-muted  { color: var(--text-mute); }
.text-soft   { color: var(--text-soft); }
.text-primary{ color: var(--primary-strong); }

.bg-surface   { background: var(--surface); }
.bg-surface-2 { background: var(--surface-2); }
.bg-primary   { background: var(--primary); color: var(--on-primary); }

.rounded    { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.shadow     { box-shadow: var(--shadow-md); }
.border     { border: 1px solid var(--border); }

.flex     { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.wrap-flex { flex-wrap: wrap; }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }

.full { width: 100%; }
.hidden { display: none; }

/* ============================================================
   15) MOTION-PRÄFERENZEN
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}