/*
  ================================================================
  reset.css
  ================================================================
  Browser haben eigene Standard-Styles (margin, padding, Schriften).
  Diese Datei setzt alles auf saubere Nullwerte zurück, damit die
  Seite in Chrome, Firefox und Safari GLEICH aussieht.

  Diese Technik nennt man "CSS Reset" — es ist das erste
  Stylesheet das in jeder professionellen Seite geladen wird.
  ================================================================
*/

/* ---------------------------------------------------------------
   Box-Sizing: Die natürlichste Regel in CSS.

   Standard (content-box): width = Inhalt OHNE padding/border.
   Das bedeutet: ein div mit width:200px + padding:20px ist
   insgesamt 240px breit. Verwirrend!

   border-box: width = Inhalt MIT padding/border.
   Ein div mit width:200px + padding:20px bleibt 200px breit.
   Das ist viel einfacher beim Layouten.

   *  = alle Elemente
   ::before / ::after = CSS-generierte Pseudo-Elemente
--------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------------
   HTML & Body Basis
   font-size: 100% = 16px (Browser-Standard nicht überschreiben)
   scroll-behavior: smooth = sanftes Scrollen bei Anker-Links (#id)
--------------------------------------------------------------- */
html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  /* min-height: 100svh = "small viewport height" — sicherer als
     100vh auf Mobilgeräten, weil svh die Browser-Leiste ignoriert */
  min-height: 100svh;
  line-height: 1.5;          /* Standardzeilenhöhe */
  -webkit-font-smoothing: antialiased;  /* Schärfere Schrift auf macOS/iOS */
  text-rendering: optimizeSpeed;        /* Performance beim Text-Rendern */
}

/* ---------------------------------------------------------------
   Listen ohne Style (werden explizit per Klasse wieder gestylt)
--------------------------------------------------------------- */
ul, ol {
  list-style: none;
}

/* ---------------------------------------------------------------
   Bilder & Media: nie breiter als ihr Container
--------------------------------------------------------------- */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* ---------------------------------------------------------------
   Formulare: Schrift vom Body erben (Browser überschreiben das sonst)
--------------------------------------------------------------- */
input, button, textarea, select {
  font: inherit;
}

/* ---------------------------------------------------------------
   Typografischer Überlauf: Lange Wörter brechen um, kein
   horizontaler Scroll durch zu lange Links oder Strings.
--------------------------------------------------------------- */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------
   Anker-Links: Text-Decoration entfernen (wird per Klasse gesetzt)
--------------------------------------------------------------- */
a {
  text-decoration: none;
  color: inherit;
}