/* ============================================
   BASE STYLEGUIDE — Baukasten
   Gilt fuer alle Projekte. Nicht direkt aendern.
   Projekt-spezifische Overrides in STYLEGUIDE.css
   ============================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { min-height: 100vh; text-rendering: optimizeSpeed; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ---- Spacing-Scale (4px Basis) ---- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 80px;
  --space-16: 128px;
}

/* ---- Typografie-Skala ---- */
:root {
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
}

/* ---- Radius-Skala ---- */
:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
}

/* ---- Shadow-Skala ---- */
:root {
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.20), 0 4px 8px rgba(0,0,0,0.10);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.25), 0 8px 16px rgba(0,0,0,0.12);
}

/* ---- Transitions ---- */
:root {
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-xslow: 600ms ease;
}

/* ---- Farb-Slots (vom Projekt-Styleguide befuellt) ---- */
:root {
  --color-primary: #0f766e;
  --color-primary-rgb: 15, 118, 110;
  --color-secondary: #14b8a6;
  --color-accent: #0f766e;
  --color-bg: #ffffff;
  --color-surface: #f8f8f8;
  --color-text: #1a1a1a;
  --color-text-muted: #666666;
  --color-border: rgba(0,0,0,0.10);
  --color-border-strong: rgba(0,0,0,0.20);
  --color-success: #22c55e;
  --color-error: #ef4444;
  --color-warning: #f59e0b;

  /* Schrift-Slots */
  --font-headline: 'Poppins', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ---- Basis-Typografie ---- */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1, h2, h3, h4 {
  font-family: var(--font-headline);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

h1 { font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl)); }
h2 { font-size: clamp(var(--text-3xl), 3.5vw, var(--text-5xl)); }
h3 { font-size: clamp(var(--text-2xl), 2.5vw, var(--text-3xl)); }
h4 { font-size: var(--text-xl); }

p {
  max-width: 65ch;
  color: var(--color-text-muted);
}

/* ---- Container ---- */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 5vw, 2.5rem);
  width: 100%;
}

/* ---- Grid-Helfer ---- */
.row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.row--between { justify-content: space-between; }
.row--center  { justify-content: center; }

@media (max-width: 768px) {
  .row { flex-direction: column; }
}

/* ---- Accessibility ---- */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================
   UTILITY-KLASSEN
   Mini-Tailwind fuer statische Seiten.
   Jede Klasse mappt auf einen Token — keine
   eigenen Werte erfinden.
   ============================================ */

/* ---- Accessibility ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ---- Text Alignment ---- */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

/* ---- Text Color ---- */
.text-primary { color: var(--color-primary); }
.text-muted   { color: var(--color-text-muted); }
.text-white   { color: #ffffff; }
.text-inherit { color: inherit; }

/* ---- Font Size (maps to --text-* tokens) ---- */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }
.text-5xl  { font-size: var(--text-5xl); }

/* ---- Font Weight ---- */
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* ---- Font Family ---- */
.font-headline { font-family: var(--font-headline); }
.font-body     { font-family: var(--font-body); }

/* ---- Line Height ---- */
.leading-tight  { line-height: 1.15; }
.leading-snug   { line-height: 1.35; }
.leading-normal { line-height: 1.65; }
.leading-loose  { line-height: 1.85; }

/* ---- Letter Spacing ---- */
.tracking-tight  { letter-spacing: -0.02em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide   { letter-spacing: 0.05em; }

/* ---- Display ---- */
.block        { display: block; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.hidden       { display: none; }

/* ---- Flex Utilities ---- */
.flex-col     { flex-direction: column; }
.flex-row     { flex-direction: row; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.flex-none    { flex: none; }
.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* ---- Gap (maps to --space-* tokens) ---- */
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }

/* ---- Margin (maps to --space-* tokens) ---- */
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }

.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-5  { margin-bottom: var(--space-5); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }

/* ---- Padding (maps to --space-* tokens) ---- */
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }

.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }

.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }

/* ---- Width ---- */
.w-full { width: 100%; }
.w-auto { width: auto; }
.max-w-prose { max-width: 65ch; }
.max-w-screen { max-width: 100vw; }

/* ---- Height ---- */
.h-full   { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* ---- Position ---- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; top: 0; }

/* ---- Overflow ---- */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* ---- Border Radius (maps to --radius-* tokens) ---- */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-2xl  { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ---- Shadow (maps to --shadow-* tokens) ---- */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-none { box-shadow: none; }

/* ---- Background Color ---- */
.bg-primary { background-color: var(--color-primary); }
.bg-surface { background-color: var(--color-surface); }
.bg-white   { background-color: #ffffff; }
.bg-black   { background-color: #000000; }
.bg-transparent { background-color: transparent; }

/* ---- Transition (maps to --transition-* tokens) ---- */
.transition-fast  { transition: all var(--transition-fast); }
.transition-base  { transition: all var(--transition-base); }
.transition-slow  { transition: all var(--transition-slow); }
.transition-none  { transition: none; }

/* ---- Opacity ---- */
.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ---- Cursor ---- */
.cursor-pointer { cursor: pointer; }

/* ---- Whitespace ---- */
.nowrap { white-space: nowrap; }
.break-words { overflow-wrap: break-word; }

/* ---- Z-Index ---- */
.z-10  { z-index: 10; }
.z-20  { z-index: 20; }
.z-50  { z-index: 50; }
.z-100 { z-index: 100; }

/* ---- Responsive Overrides ---- */
@media (max-width: 768px) {
  .md\:hidden     { display: none; }
  .md\:text-left  { text-align: left; }
  .md\:flex-col   { flex-direction: column; }
  .md\:text-center { text-align: center; }
}

@media (min-width: 769px) {
  .md\:flex-row   { flex-direction: row; }
}

@media (max-width: 480px) {
  .sm\:hidden     { display: none; }
  .sm\:text-sm    { font-size: var(--text-sm); }
  .sm\:text-base  { font-size: var(--text-base); }
  .sm\:p-3        { padding: var(--space-3); }
  .sm\:gap-3      { gap: var(--space-3); }
}