/* LamBit Webdesign – Design Tokens
   Erzeugt aus tokens.json. Diese Datei ist die einzige Quelle für Farben, Schrift,
   Abstände, Radien, Schatten und Breiten. Werte nur hier ändern, nie in der Seite. */

/* Schriften – selbst gehostet, keine Google-Fonts-Einbindung (DSGVO) */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-Variable-Italic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root,
[data-theme="light"] {
  /* Farben – helles Theme */
  --coral-50: #FFF1EC; /* Hellste Korallentönung; Grundlage für primary-subtle (hell). */
  --coral-100: #FFDCD1; /* Zarte Flächen, Illustrationen, Hover auf coral-50. */
  --coral-300: #FF8A70; /* Helle Koralle; Links, Hover und Fokusring im dunklen Theme. */
  --coral-500: #EF5B3C; /* Markenkoralle aus dem Logo. Für Logo, Illustrationen und Akzente ab 24px; nicht für Fließtext oder weiße Schrift (3,4:1 auf Weiß). */
  --coral-600: #C93F22; /* Arbeits-Koralle: Button-Flächen mit weißer Schrift und Links auf Weiß/Sand (≥4,7:1). */
  --coral-700: #A8361D; /* Hover/Pressed für coral-600-Flächen. */
  --coral-900: #5C2012; /* Dunkelste Koralle für seltene Akzente auf hellen Korallenflächen. */
  --neutral-900: #23272F; /* Tinte aus dem Logo; Grundwert für text (hell) und dunkle Flächen. */
  --neutral-800: #2A2F37; /* Erhöhte Flächen im dunklen Theme. */
  --neutral-700: #3D434D; /* Sekundäre dunkle Flächen, Überschriften-Varianten. */
  --neutral-500: #5F6570; /* Grundwert für text-muted (hell). */
  --neutral-400: #8A909A; /* Formular-Rahmen auf Weiß und Sand (≥3:1). */
  --neutral-200: #D5D8DD; /* Deaktivierte Elemente, Trennlinien mit mehr Gewicht. */
  --neutral-100: #E6E7EA; /* Haarlinien, dekorative Rahmen. */
  --neutral-50: #F4F4F5; /* Neutrale Hintergrundfläche ohne Linktext. */
  --sand: #FAF7F5; /* Warmes Off-White („Wolle“) für Abschnittsflächen. */
  --white: #FFFFFF; /* Reinweiß; Seitenhintergrund hell. */
  --night-900: #16191F; /* Seitenhintergrund dunkel. */
  --night-800: #1F232A; /* Flächen dunkel. */
  --wool-light: #F3F1EE; /* Text im dunklen Theme. */
  --bg: var(--white); /* Seitenhintergrund. */
  --surface: var(--sand); /* Abschnitte und Karten, die sich vom Hintergrund absetzen. */
  --surface-raised: var(--white); /* Erhöhte Elemente: Karten auf surface, Dropdowns, Dialoge. */
  --text: var(--neutral-900); /* Haupttext auf bg, surface, surface-raised und primary-subtle (≥11:1 beide Themes). */
  --text-muted: var(--neutral-500); /* Nebentext, Metadaten auf bg, surface, surface-raised (≥5,5:1 hell, ≥6:1 dunkel). */
  --border: var(--neutral-100); /* Dekorative Haarlinien und Kartenrahmen; nicht für Formularfelder. */
  --border-control: var(--neutral-400); /* Rahmen von Eingabefeldern, Checkboxen, Secondary-Buttons auf bg und surface (≥3:1). */
  --brand: var(--coral-500); /* Reine Markenfarbe: Logo, Illustrationen, große Zier-Elemente ≥24px. Nie für kleinen Text. */
  --primary: var(--coral-600); /* Primär-Buttons und aktive Zustände; Beschriftung in on-primary. */
  --primary-hover: var(--coral-700); /* Hover/Pressed von primary; Beschriftung in on-primary. */
  --on-primary: var(--white); /* Text und Icons auf primary und primary-hover (≥4,9:1 beide Themes). */
  --primary-subtle: var(--coral-50); /* Hervorgehobene Flächen, Badges, ausgewählte Zeilen; Text darauf in text oder link. */
  --link: var(--coral-600); /* Links und Text-Buttons auf bg, surface, surface-raised und primary-subtle (≥4,5:1). */
  --focus-ring: var(--coral-500); /* 2px Fokusring mit 2px Abstand, auf allen Flächen ≥3:1. */
  --success: #1E7A4C; /* Erfolg: Text und Icons auf bg, surface und success-subtle (≥4,5:1). Immer mit Icon oder Wort, nie nur Farbe. */
  --success-subtle: #EAF6EF; /* Erfolg: Hintergrund von Meldungen; Text darauf in success oder text. */
  --warning: #9A5B00; /* Warnung: Text und Icons auf bg, surface und warning-subtle (≥4,5:1). Immer mit Icon oder Wort, nie nur Farbe. */
  --warning-subtle: #FFF4E0; /* Warnung: Hintergrund von Meldungen; Text darauf in warning oder text. */
  --danger: #B0103A; /* Fehler: Text und Icons auf bg, surface und danger-subtle (≥4,5:1). Immer mit Icon oder Wort, nie nur Farbe. */
  --danger-subtle: #FCEBEF; /* Fehler: Hintergrund von Meldungen; Text darauf in danger oder text. */
  --info: #2458C6; /* Hinweis: Text und Icons auf bg, surface und info-subtle (≥4,5:1). Immer mit Icon oder Wort, nie nur Farbe. */
  --info-subtle: #EAF1FE; /* Hinweis: Hintergrund von Meldungen; Text darauf in info oder text. */

  /* Schatten – helles Theme */
  --shadow-sm: 0 1px 2px rgba(35,39,47,0.06), 0 1px 3px rgba(35,39,47,0.08);
  --shadow-md: 0 4px 8px -2px rgba(35,39,47,0.08), 0 2px 4px -2px rgba(35,39,47,0.06);
  --shadow-lg: 0 16px 32px -8px rgba(35,39,47,0.16), 0 4px 8px -4px rgba(35,39,47,0.08);
}

:root {
  /* Schriftfamilien */
  --font-display: "Outfit", "Figtree", system-ui, sans-serif;
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Schriftstile: Größe / Zeilenhöhe / Gewicht / Laufweite */
  --type-display-size: 56px;
  --type-display-line: 60px;
  --type-display-weight: 700;
  --type-display-tracking: -0.02em;
  --type-h1-size: 44px;
  --type-h1-line: 52px;
  --type-h1-weight: 700;
  --type-h1-tracking: -0.02em;
  --type-h2-size: 34px;
  --type-h2-line: 42px;
  --type-h2-weight: 700;
  --type-h2-tracking: -0.015em;
  --type-h3-size: 26px;
  --type-h3-line: 34px;
  --type-h3-weight: 600;
  --type-h3-tracking: -0.01em;
  --type-h4-size: 20px;
  --type-h4-line: 28px;
  --type-h4-weight: 600;
  --type-h4-tracking: -0.005em;
  --type-lead-size: 20px;
  --type-lead-line: 32px;
  --type-lead-weight: 400;
  --type-lead-tracking: 0;
  --type-body-size: 17px;
  --type-body-line: 28px;
  --type-body-weight: 400;
  --type-body-tracking: 0;
  --type-body-sm-size: 15px;
  --type-body-sm-line: 24px;
  --type-body-sm-weight: 400;
  --type-body-sm-tracking: 0;
  --type-label-size: 15px;
  --type-label-line: 20px;
  --type-label-weight: 600;
  --type-label-tracking: 0;
  --type-caption-size: 13px;
  --type-caption-line: 18px;
  --type-caption-weight: 500;
  --type-caption-tracking: 0;
  --type-eyebrow-size: 13px;
  --type-eyebrow-line: 16px;
  --type-eyebrow-weight: 600;
  --type-eyebrow-tracking: 0.08em;
  --type-code-size: 15px;
  --type-code-line: 24px;
  --type-code-weight: 400;
  --type-code-tracking: 0;

  /* Abstände – 4px-Raster */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radien */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Breiten */
  --container: 1200px;
  --content: 720px;
  --breakpoint-md: 640px;
  --breakpoint-lg: 1024px;
}

/* Dunkles Theme – nur die Werte, die sich ändern */
[data-theme="dark"] {
  --bg: var(--night-900);
  --surface: var(--night-800);
  --surface-raised: var(--neutral-800);
  --text: var(--wool-light);
  --text-muted: #A9AEB6;
  --border: #3A404A;
  --border-control: #7A808B;
  --brand: var(--coral-500);
  --primary: #F26A4D;
  --primary-hover: var(--coral-300);
  --on-primary: var(--neutral-900);
  --primary-subtle: #3A2520;
  --link: var(--coral-300);
  --focus-ring: var(--coral-300);
  --success: #4CC38A;
  --success-subtle: #17281F;
  --warning: #F5B43C;
  --warning-subtle: #2C2414;
  --danger: #FF6F91;
  --danger-subtle: #2E1A21;
  --info: #7AA7FF;
  --info-subtle: #18233A;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.5);
  --shadow-lg: 0 16px 40px -8px rgba(0,0,0,0.6);
}

/* Systemvorgabe, solange der Besucher nichts gewählt hat */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--night-900);
    --surface: var(--night-800);
    --surface-raised: var(--neutral-800);
    --text: var(--wool-light);
    --text-muted: #A9AEB6;
    --border: #3A404A;
    --border-control: #7A808B;
    --brand: var(--coral-500);
    --primary: #F26A4D;
    --primary-hover: var(--coral-300);
    --on-primary: var(--neutral-900);
    --primary-subtle: #3A2520;
    --link: var(--coral-300);
    --focus-ring: var(--coral-300);
    --success: #4CC38A;
    --success-subtle: #17281F;
    --warning: #F5B43C;
    --warning-subtle: #2C2414;
    --danger: #FF6F91;
    --danger-subtle: #2E1A21;
    --info: #7AA7FF;
    --info-subtle: #18233A;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.5);
    --shadow-lg: 0 16px 40px -8px rgba(0,0,0,0.6);
  }
}

/* Schriftstile als Hilfsklassen. Die Bausteine in bundle.css bringen ihre Stile
   selbst mit; diese Klassen sind für eigenes Markup. */
.lb-type-display { font-family: var(--font-display); font-size: var(--type-display-size); line-height: var(--type-display-line); font-weight: var(--type-display-weight); letter-spacing: var(--type-display-tracking); }
.lb-type-h1 { font-family: var(--font-display); font-size: var(--type-h1-size); line-height: var(--type-h1-line); font-weight: var(--type-h1-weight); letter-spacing: var(--type-h1-tracking); }
.lb-type-h2 { font-family: var(--font-display); font-size: var(--type-h2-size); line-height: var(--type-h2-line); font-weight: var(--type-h2-weight); letter-spacing: var(--type-h2-tracking); }
.lb-type-h3 { font-family: var(--font-display); font-size: var(--type-h3-size); line-height: var(--type-h3-line); font-weight: var(--type-h3-weight); letter-spacing: var(--type-h3-tracking); }
.lb-type-h4 { font-family: var(--font-display); font-size: var(--type-h4-size); line-height: var(--type-h4-line); font-weight: var(--type-h4-weight); letter-spacing: var(--type-h4-tracking); }
.lb-type-lead { font-family: var(--font-sans); font-size: var(--type-lead-size); line-height: var(--type-lead-line); font-weight: var(--type-lead-weight); letter-spacing: var(--type-lead-tracking); }
.lb-type-body { font-family: var(--font-sans); font-size: var(--type-body-size); line-height: var(--type-body-line); font-weight: var(--type-body-weight); letter-spacing: var(--type-body-tracking); }
.lb-type-body-sm { font-family: var(--font-sans); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight); letter-spacing: var(--type-body-sm-tracking); }
.lb-type-label { font-family: var(--font-sans); font-size: var(--type-label-size); line-height: var(--type-label-line); font-weight: var(--type-label-weight); letter-spacing: var(--type-label-tracking); }
.lb-type-caption { font-family: var(--font-sans); font-size: var(--type-caption-size); line-height: var(--type-caption-line); font-weight: var(--type-caption-weight); letter-spacing: var(--type-caption-tracking); }
.lb-type-eyebrow { font-family: var(--font-mono); font-size: var(--type-eyebrow-size); line-height: var(--type-eyebrow-line); font-weight: var(--type-eyebrow-weight); letter-spacing: var(--type-eyebrow-tracking); }
.lb-type-code { font-family: var(--font-mono); font-size: var(--type-code-size); line-height: var(--type-code-line); font-weight: var(--type-code-weight); letter-spacing: var(--type-code-tracking); }
.lb-type-eyebrow { text-transform: uppercase; }

/* Mobil kleinere Überschriften (siehe Brandbook, Kapitel Typografie) */
@media (max-width: 640px) {
  :root {
    --type-display-size: 34px; --type-display-line: 42px;
    --type-h1-size: 34px; --type-h1-line: 42px;
    --type-h2-size: 28px; --type-h2-line: 36px;
  }
}

/* Grundlagen, damit eine leere Seite schon richtig aussieht */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--type-body-size); line-height: var(--type-body-line); }
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }