/* ============================================================
   Britta Karres — Grundlagen
   Tokens, Reset, Grundstile.

   Alle Schriftgrade sind aus Andreas Canva-Vorlage GEMESSEN, nicht
   geschaetzt: Vorlage bei ihrer eigenen Breite (1366 px) gerendert,
   Ink-Hoehe je Textzeile bestimmt und gegen Lato bei Grad 100
   umgerechnet. Die Messwerte stehen als Kommentar an jedem Token.
   ============================================================ */

:root {
  /* ---- Farben (Gestaltungsregeln Abschnitt 3) ---- */
  --gruen:       #3b431e;   /* Ueberschriften, Balken, Zitat */
  --gruen-hell:  #bbd455;   /* NUR Fusszeile. Weiss darauf traegt nicht (1,66:1) */
  --rot:         #cc0000;
  --sand:        #f4e9c8;   /* seit 31.08. heller - vorher Goldbeige #e7ce83 */
  --creme:       #fffaf1;
  --text:        #1a1a1a;   /* nicht reines Schwarz - ruhiger zu lesen */
  --papier:      #ffffff;

  --fokus:  #0b5fff;   /* nur fuer den Tastaturfokus, bewusst ausserhalb der Palette */

  /* ---- Schrift ---- */
  --schrift: 'Lato', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Lato kennt nur 100/300/400/700/900 - KEIN 500, KEIN 600. */
  --normal: 400;
  --fett:   700;

  /* ---- Schriftgrade: gemessen -> fluid ----
     Der obere Wert ist der Messwert aus der Vorlage.          gemessen */
  --grad-h1:     clamp(1.75rem, 1.15rem + 1.9vw, 2.45rem);  /* 39,1 px */
  --grad-h2:     clamp(1.55rem, 1.05rem + 1.6vw, 2.25rem);  /* 36,2 px */
  --grad-h3:     clamp(1.35rem, 1.00rem + 1.1vw, 1.85rem);  /* 30,0 px */
  --grad-claim:  clamp(1.15rem, 0.95rem + 0.7vw, 1.75rem);  /* 28,0 px */
  --grad-lead:   clamp(1.10rem, 0.95rem + 0.6vw, 1.60rem);  /* 25,8 px */
  --grad-nav:    clamp(1.00rem, 0.92rem + 0.3vw, 1.25rem);  /* 20,4 px */
  --grad-text:   clamp(1.05rem, 0.99rem + 0.3vw, 1.20rem);  /* 19,4 px */
  --grad-klein:  clamp(0.95rem, 0.91rem + 0.2vw, 1.06rem);  /* 18,3 px */

  /* ---- Zeilenabstand ----
     Die Vorlage steht bei 1,34. Fuer Fliesstext ist das zu eng:
     WCAG 1.4.12 verlangt Nutzbarkeit ab 1,5. Bewusst auf 1,6 gesetzt. */
  --zeile-text:  1.6;
  --zeile-titel: 1.2;

  /* ---- Masse ----
     Inhaltsbreite aus der Vorlage: Text von x 48 bis 1309 bei 1366 px
     Seitenbreite, also rund 1260 px Inhalt mit 50 px Rand. */
  --breite:      1280px;
  --breite-eng:   720px;   /* fuer reine Lesetexte: rund 70 Zeichen */
  --rand:        clamp(1.25rem, 4vw, 3rem);
  --spalte-luft: clamp(2rem, 5vw, 5.5rem);

  --abstand-1: 0.5rem;
  --abstand-2: 1rem;
  --abstand-3: 1.75rem;
  --abstand-4: 2.75rem;
  --abstand-5: 4rem;
  --abstand-6: 6rem;

  --radius: 6px;
}

/* ============================================================
   Reset
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--grad-text);
  font-weight: var(--normal);
  line-height: var(--zeile-text);
  -webkit-font-smoothing: antialiased;

  /* Damit die Fusszeile auch auf kurzen Seiten (Impressum, Datenschutz)
     unten sitzt und nicht mitten auf dem Schirm endet. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body > main { flex: 1 0 auto; }

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ============================================================
   Textelemente
   ============================================================ */

h1, h2, h3, h4 {
  margin: 0 0 var(--abstand-2);
  line-height: var(--zeile-titel);
  text-wrap: balance;
}

/* H1 und H2 tragen beide 700 - Lato hat kein 600. Unterschieden
   wird ueber Groesse und Farbe (Gestaltungsregeln Abschnitt 4). */
h1 { font-size: var(--grad-h1); font-weight: var(--fett); color: var(--rot); }
h2 { font-size: var(--grad-h2); font-weight: var(--fett); color: var(--gruen); }
h3 { font-size: var(--grad-h3); font-weight: var(--normal); color: var(--rot); }
h4 { font-size: var(--grad-text); font-weight: var(--fett); color: var(--text); }

p, ul, ol { margin: 0 0 var(--abstand-3); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.3em; }
li { margin-bottom: var(--abstand-1); }
li::marker { color: var(--gruen); }

strong, b { font-weight: var(--fett); }
em, i     { font-style: italic; }   /* Lato hat echte Kursivschnitte */

a {
  color: var(--text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--rot); }

/* Externe Links im Empfehlungsteil bekommen rel="noopener" im HTML. */

/* ============================================================
   Hilfsklassen
   ============================================================ */

.lauftext { font-size: var(--grad-lead); }
.klein    { font-size: var(--grad-klein); }

.eng { max-width: var(--breite-eng); }

/* Nur fuer Screenreader - z. B. Beschriftungen zu Icons */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sprungmarke: erste Taste auf jeder Seite */
.sprung {
  position: absolute;
  left: var(--abstand-2);
  top: -100%;
  z-index: 100;
  background: var(--papier);
  color: var(--text);
  padding: var(--abstand-2) var(--abstand-3);
  border: 3px solid var(--fokus);
  border-radius: var(--radius);
  font-weight: var(--fett);
}
.sprung:focus { top: var(--abstand-2); }

/* ============================================================
   Fokus, Bewegung, Auswahl
   ============================================================ */

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Markierung in Fusszeilengruen statt Sand: der neue Sand liegt mit 1,21:1
   so nah an Weiss, dass eine Auswahl kaum noch zu sehen waere. */
/* Das hidden-Attribut setzt nur display:none als Browservoreinstellung.
   Jede eigene display-Regel schlaegt sie - .schaltflaeche mit
   display:inline-block tat genau das, der Kontaktknopf war ohne
   JavaScript sichtbar und ohne Funktion. Deshalb hart nachgezogen. */
[hidden] { display: none !important; }

::selection { background: var(--gruen-hell); color: var(--text); }

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

/* ============================================================
   Druck
   ============================================================ */

@media print {
  .kopfzeile__navigation, .sprung { display: none; }
  body { font-size: 11pt; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}