/* =====================================================================
   Werkstofftechnik-Wissen  v1.0
   Zentrale Stylesheet-Datei  –  keine Frameworks, reines CSS
   ---------------------------------------------------------------------
   Struktur dieser Datei:
     1. Farbvariablen (zentrale Farbpalette)
     2. Grundeinstellungen (Reset, Schrift)
     3. Kopfbereich (Header)
     4. Navigation
     5. Hauptbereich (Main) und Überschriften
     6. Tabellen (Download-Liste)
     7. Fußbereich (Footer)
     8. Anzeige auf Smartphone/Tablet (Media Queries)
   ===================================================================== */

/* ---------- 1. Farbvariablen ------------------------------------------
   Alle Farben sind zentral definiert.
   Eine Farbe hier ändern => gilt automatisch für die ganze Website. */
:root {
  --farbe-header:  #37474f;   /* dunkles Stahlblau-Grau: Header, Footer  */
  --farbe-akzent:  #00796b;   /* gedecktes Petrol: Links, H2, Nav aktiv  */
  --farbe-hintergrund: #fafafa; /* warmes Hellgrau: Seitenhintergrund    */
  --farbe-text:    #212121;   /* fast schwarz: Textfarbe                 */
  --farbe-box:     #ffffff;   /* weiß: Inhaltsfelder, Tabellenzellen     */
  --farbe-linie:   #cfd8dc;   /* hellgrau: Trennlinien, Tabellenrahmen   */
}

/* ---------- 2. Grundeinstellungen ------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;     /* Abstände zählen in die Breite hinein */
}

body {
  font-family: sans-serif;    /* bewusst simpel, überall vorhanden    */
  font-size: 1rem;            /* ca. 16 Pixel                         */
  line-height: 1.6;           /* gute Lesbarkeit bei langen Texten    */
  color: var(--farbe-text);
  background-color: var(--farbe-hintergrund);
}

/* Skip-Link: erst bei Tastaturfokus sichtbar (Barrierefreiheit) */
.skip-link {
  position: absolute;
  left: -9999px;              /* außerhalb des Bildschirms            */
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
  background: var(--farbe-box);
  padding: 0.5rem 1rem;
  z-index: 10;                /* liegt über allem anderen             */
}

/* ---------- 3. Kopfbereich (Header) ----------------------------------- */
header {
  background-color: var(--farbe-header);
  color: var(--farbe-box);
  padding: 1.5rem 1rem;
}

header h1 {                   /* Titel im Kopfbereich                 */
  font-size: 1.5rem;
}

header p {                    /* kurzes Motto darunter                */
  font-size: 0.95rem;
}

/* ---------- 4. Navigation --------------------------------------------- */
nav {
  background-color: var(--farbe-header);
  padding: 0 1rem 0.75rem;
}

nav ul {
  list-style: none;           /* keine Aufzählungspunkte              */
  display: flex;              /* Punkte nebeneinander                 */
  flex-wrap: wrap;            /* umbrechen bei wenig Platz            */
  gap: 0.25rem;
}

nav a {
  display: block;
  padding: 0.4rem 0.8rem;
  color: var(--farbe-box);
  text-decoration: none;      /* kein Unterstrich                     */
  border-radius: 4px;
}

nav a:hover,                  /* Maus darüber                        */
nav a:focus {                 /* Tastaturfokus                       */
  background-color: var(--farbe-akzent);
}

nav a[aria-current="page"] {  /* die gerade offene Seite             */
  background-color: var(--farbe-akzent);
  font-weight: bold;
}

/* ---------- 5. Hauptbereich und Überschriften -------------------------- */
main {
  max-width: 55rem;           /* begrenzte Zeilenlänge, gut lesbar   */
  margin: 0 auto;             /* mittig ausrichten                   */
  padding: 1.5rem 1rem;
  background-color: var(--farbe-box);
}

main h2 {
  color: var(--farbe-akzent);
  margin: 1.5rem 0 0.5rem;
}

main h3 {
  margin: 1rem 0 0.4rem;
}

main p {
  margin-bottom: 0.8rem;
}

a {                           /* Links im Text                        */
  color: var(--farbe-akzent);
}

img {                         /* Grafiken passen sich der Breite an   */
  max-width: 100%;
  height: auto;
}

/* ---------- 6. Tabellen (Download-Liste) ------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;  /* doppelte Rahmenlinien vermeiden     */
  margin: 1rem 0;
}

th, td {
  border: 1px solid var(--farbe-linie);
  padding: 0.4rem 0.6rem;
  text-align: left;
}

th {
  background-color: var(--farbe-linie);
}

/* ---------- Formeln (Berechnungsgrundlagen) ------------ */
.formel {
  font-family: serif;
  font-size: 1.15rem;
  text-align: center;
  padding: 0.6rem;
  margin: 1rem 2rem;
  border: 1px solid var(--farbe-linie);
  border-radius: 4px;
  background-color: var(--farbe-hintergrund);
}

/* ---------- 7. Fußbereich (Footer) ------------------------------------- */
footer {
  background-color: var(--farbe-header);
  color: var(--farbe-box);
  padding: 1rem;
  text-align: center;
  font-size: 0.9rem;
}

footer a {
  color: var(--farbe-box);
  margin: 0 0.5rem;
}

/* ---------- 8. Anzeige auf Smartphone/Tablet --------------------------- */

/* Ab ca. 600 Pixel: etwas engere Abstände */
@media (max-width: 600px) {
  header { padding: 1rem; }
  main   { padding: 1rem 0.75rem; }
}

/* Sehr kleine Fenster (Smartphone): Schrift etwas kleiner */
@media (max-width: 400px) {
  body { font-size: 0.95rem; }
}