/* ============================================================
   RESET & TYPOGRAPHY
   ------------------------------------------------------------
   Umfangreicher CSS-Reset kombiniert mit modernem Typografie-
   Setup. Ziel ist ein 
   konsistentes, barrierefreies Grundgerüst für das gesamte 
   Projekt.
============================================================ */

/* 1. UNIVERSAL RESET
   ------------------------------------------------------------
   Setzt box-sizing, entfernt Margin/Padding, definiert globale
   Transition-Standards für sanfte Animationen.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Transitions werden gezielt in Komponenten gesetzt (Buttons/Links/etc.) */
}

/* 2. HTML5 DISPLAY-ROLE RESET
   ------------------------------------------------------------
   Stellt sicher, dass HTML5-Semantikteile in alten Browsern 
   korrekt als Block-Elemente angezeigt werden.
*/
article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
  display: block;
}

/* 3. LISTEN UND TABELLEN RESET
   ------------------------------------------------------------
   Entfernt Standard-List-Stile und Tabellenabstände/Ränder.
*/
ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 4. ZITAT UND CODE RESET
   ------------------------------------------------------------
   Entfernt bei <blockquote> und <q> Standardsymbole, stellt 
   Code-Blöcke neutral dar.
*/
blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
  content: '';
  content: none;
}

/* 5. MEDIA ELEMENT RESET
   ------------------------------------------------------------
   Passt Bilder, Videos, Canvas, SVGs so an, dass sie nie 
   außerhalb ihres Containers liegen und block-level sind.
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 6. FORM ELEMENT RESET
   ------------------------------------------------------------
   Entfernt Standard-Stile von Formular-Elementen, setzt 
   Browser-Defaults zurück auf das geerbte Font- und Farbverhalten.
*/
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background: none;
  border: none;
  color: inherit;
  margin: 0;
  padding: 0;
  cursor: pointer;
  appearance: none; /* Entfernt native OS-Styles (z.B. Safari, iOS) */
}

/* Entfernt standardmäßige Pfeile bei number-inputs in Chrome/Edge */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* Entfernt standardmäßige Pfeile bei range-input in Firefox */
input[type="range"]::-moz-range-thumb {
  border: none;
  background: none;
}

/* 7. LINK RESET
   ------------------------------------------------------------
   Entfernt Unterstreichungen, setzt Farbe auf inherit; 
   interaktives Feedback bei Hover mittels Opazitätswechsel.
*/
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 3px;
  border-radius: 8px;
}

/* 8. TYPOGRAFIE-GRUNDWERT IM ROOT
   ------------------------------------------------------------
   Definiert das System-Font-Stack, Basis-Font-Size und
   line-height für beste Lesbarkeit. Hintergrund- und 
   Textfarben über CSS-Variablen gesteuert.
*/
html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 100%; /* 16px */
  line-height: 1.5;
  background-color: var(--background);
  color: var(--foreground);
  scroll-behavior: smooth; /* Sanfte Scroll-Animation */
}

/* 9. BASE-TYPED ELEMENTS
   ------------------------------------------------------------
   Setzt basis-Styles für Überschriften, Absätze, Listen etc.
   Diese Werte können in components/styles.css oder Inline
   überschrieben werden.
*/
body {
  min-height: 100vh;
  width: 100%;
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  color: var(--foreground);
}

p {
  margin-bottom: 1rem;
  color: var(--foreground);
}

ul, ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.5rem;
}

small {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* 10. FOCUS- UND OUTLINE-STYLES
   ------------------------------------------------------------
   - Entfernt standardmäßige Browser-Outlines in favor von 
     individuell definierten Focus-Outlines in components/styles.css 
     oder per Inline-CSS.
   - ARIA-Nutzer sehen dennoch Fokus über Border-/Box-Shadow-Styles.
*/
:focus {
  outline: none;
}

/* 11. CSS-VARIABLEN (LIGHT & DARK MODE)
   ------------------------------------------------------------
   Definiert umfassende Farbpalette, um leicht zwischen 
   Light- und Dark-Mode wechseln zu können. 
   Kann in Header- oder globaler Stylesheet-Map überschrieben werden.
*/
:root {
  /* LIGHT MODE Variablen */
  --background: #FFFFFF;            /* Weißer Seitenhintergrund */
  --foreground: #1D1D1F;            /* Haupttext, fast Schwarz */
  --text-secondary: #3C3C4399;      /* Sekundärer Text, 60% Opazität */
  --accent: #0071E3;                /* Akzentfarbe (Buttons, Links) */
  --accent-hover: #005BBB;          /* Dunkleres Blau bei Hover */
  --btn-bg: #0071E3;                /* Button Hintergrund (Blau) */
  --btn-text: #FFFFFF;              /* Button Text (Weiß) */
  --card-bg: #F2F2F7;               /* Hellgrau für Karten/Hintergründe */
  --header-bg: rgba(255, 255, 255, 0.75); /* Halbtransparentes Weiß (Header) */
  --footer-bg: #F2F2F7;             /* Hellgrau für Footer */
  --border-color: #D2D2D7;          /* Dezenter Grauton für Ränder */
  --cookie-bg: rgba(0, 0, 0, 0.7);  /* Dunkles Overlay für Cookie-Banner */
  --cookie-text: #FFFFFF;           /* Weißer Text im Cookie-Banner */
  --shadow-color: rgba(0, 0, 0, 0.1); /* Sanfter Schatten für Karten */
  --spacer: 1rem;                   /* Basisabstand (16px) */
  --spacer-half: 0.5rem;            /* Halber Abstand (8px) */
  --spacer-double: 2rem;            /* Doppelter Abstand (32px) */
}

/* DARK MODE Variablen, aktiv durch prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #000000;          /* Schwarzer Seitenhintergrund */
    --foreground: #F5F5F7;          /* Haupttext, fast Weiß */
    --text-secondary: #8E8E93;      /* Sekundärer Text, Grauton */
    --accent: #0A84FF;              /* Helleres Blau im Dark Mode */
    --accent-hover: #0060DF;        /* Dunkler Blau für Hover */
    --btn-bg: #0A84FF;              /* Button Hintergrund (hellblau) */
    --btn-text: #FFFFFF;            /* Button Text (Weiß) */
    --card-bg: #1C1C1E;             /* Dunkelgrau für Karten/Hintergründe */
    --header-bg: rgba(0, 0, 0, 0.75); /* Halbtransparentes Schwarz (Header) */
    --footer-bg: #1C1C1E;           /* Dunkelgrau für Footer */
    --border-color: #3A3A3C;        /* Dunkler Grauton für Ränder */
    --cookie-bg: rgba(255, 255, 255, 0.7); /* Helles Overlay für Cookie-Banner */
    --cookie-text: #000000;         /* Schwarzer Text im Cookie-Banner */
    --shadow-color: rgba(255, 255, 255, 0.1); /* Sanfter heller Schatten */
  }
}

/* 12. REDUCED MOTION-POLITIK
   ------------------------------------------------------------
   Für Benutzer mit "prefers-reduced-motion", schaltet Animationen
   und Übergänge weitestgehend ab, um Beschwerden zu vermeiden.
*/
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 13. FERTIG: Übergänge für Interaktionserleichterung
   ------------------------------------------------------------
   Alle interaktiven Elemente erhalten minimalste Dauer (0.2s),
   damit das Erlebnis fluide bleibt, ohne lange Wartezeiten.
*/