/*
  Design-Tokens Sprachcafé
  Quelle: docs/design/references/ (Login, Ankündigung, Dateien, Logo)
  „gemessen“ = aus den Screenshots gelesen
  „geschätzt“ = nicht direkt messbar (Radius unter DPR-Annahme, Abstände, Schatten, Hover, Fokus)
  „abgeleitet“ = aus einem Messwert angepasst, damit WCAG 2.2 AA gilt

  Kontrast Text auf Fläche (WCAG 2.2)
  15.91  #222222 auf #ffffff     Text auf Fläche
  14.85  #222222 auf #f7f7f7    Text auf Seite und deaktiviertem Feld
  14.17  #222222 auf #ecf3f5    Text auf sekundärer Fläche
  13.47  #222222 auf #ececec    Text auf Meta-Fläche
  12.59  #222222 auf #dfe6e8    Text auf sekundärem Rand
  11.16  #222222 auf #d8d8d8    Text auf Chrom-Grau
   6.15  #3a6875 auf #ffffff    Türkis-Text, Fokusring
   5.74  #3a6875 auf #f7f7f7    Türkis-Text auf Seite
   5.47  #3a6875 auf #ecf3f5    gewählte Sprache
   5.10  #6e6e6e auf #ffffff    gedämpfter Text
   4.76  #6e6e6e auf #f7f7f7    gedämpfter Text auf Seite / Disabled
   4.54  #6e6e6e auf #ecf3f5    gedämpfter Text auf Sekundärfläche
  10.47  #6b2b2b auf #ffffff    Fehlertext
   9.77  #6b2b2b auf #f7f7f7    Fehlertext auf Seite
   5.10  #ffffff auf #427585    Schrift auf primärem Hover
   3.86  #ffffff auf #4e8a9c    nur Button-Schrift, fett, mindestens 19px

  Nicht als Text- oder Button-Fläche verwenden
   4.31  #3a6875 auf #d8d8d8    unter 4.5, kein Fließtext auf Chrom-Grau
   3.86  #4e8a9c auf #ffffff    Türkis ist keine Textfarbe
   3.58  #6e6e6e auf #d8d8d8    gedämpfter Text auf Chrom-Grau
   2.71  #4e8a9c auf #d8d8d8    primäre Fläche auf Chrom-Grau, unter 3:1
   4.17  #7c7c7c auf #ffffff    gemessener Platzhalter, unter 4.5
*/

:root {
  --color-primary: #4e8a9c; /* gemessen: Median der Türkisflächen, Login-Button und aktive Datei-Navigation */
  --color-primary-hover: #427585; /* abgeleitet: 85 % des gemessenen RGB, Weiß darauf 5.10:1 */
  --color-primary-text: #3a6875; /* abgeleitet: 75 % des gemessenen RGB, Text und Links */

  --color-bg: #ffffff; /* gemessen: Ankündigung und Dateiliste */
  --color-bg-subtle: #f7f7f7; /* gemessen: Login-Karte und Seitenleiste */
  --color-bg-chrome: #d8d8d8; /* gemessen: Login-Hintergrund und Datei-Kopfleiste */
  --color-bg-secondary: #ecf3f5; /* gemessen: Fläche des sekundären Login-Buttons */
  --color-bg-meta: #ececec; /* gemessen: Meta-Chip in der Ankündigung */

  --color-text: #222222; /* gemessen: häufigster dunkler Textpixel in der Login-Karte */
  --color-text-muted: #6e6e6e; /* abgeleitet: gemessener Platzhalter #7c7c7c hat auf Weiß nur 4.17:1 */
  --color-text-on-primary: #ffffff; /* gemessen: Schrift auf dem Login-Button */

  --color-border: #cdcdcd; /* gemessen: Rand der Login-Felder */
  --color-border-secondary: #dfe6e8; /* gemessen: Rand des sekundären Login-Buttons */
  --color-error: #6b2b2b; /* abgeleitet: keine Markenfarbe, nur Fehlertext und Fehlerrand */

  --radius: 8px; /* geschätzt: Kartenecke rundet über 16 Bildpixel, Annahme Retina 2× */

  --space-1: 4px; /* geschätzt */
  --space-2: 8px; /* geschätzt */
  --space-3: 12px; /* geschätzt */
  --space-4: 16px; /* geschätzt */
  --space-5: 24px; /* geschätzt */
  --space-6: 32px; /* geschätzt */
  --space-7: 48px; /* geschätzt */

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", Tahoma, sans-serif;
  --text-body: 1rem; /* 16px */
  --leading-body: 1.5;
  --text-title: 1.75rem; /* geschätzt aus der großen Ankündigungsüberschrift */
  --leading-title: 1.25;
  --text-date: 1.375rem;
  --leading-date: 1.3;
  --text-button: 1.1875rem; /* 19px, fett: Weiß auf #4e8a9c gilt dann als großer Text */
  --weight-regular: 400;
  --weight-bold: 700;

  --shadow-card: 0 1px 2px rgb(34 34 34 / 0.06), 0 8px 24px rgb(34 34 34 / 0.08); /* geschätzt, Login-Karte hat einen weichen Schatten */

  --focus-width: 3px; /* geschätzt, in den Screenshots nicht sichtbar */
  --focus-offset: 3px; /* geschätzt */
  --target-min: 44px;
}

/* Komponenten. Farben, Abstände, Schrift und Schatten kommen aus docs/design/tokens.css und werden davorgesetzt. */

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

body {
  margin: 0;
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

.wrap {
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--space-4);
}

header.site {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
}

header.site form { display: flex; inline-size: 100%; }

.lang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  border: 0;
  padding: 0;
  inline-size: 100%;
  justify-content: flex-start;
}

.lang legend {
  float: inline-start;
  width: fit-content;
  padding: 0;
  margin-inline-end: var(--space-2);
  font-weight: var(--weight-bold);
}

.lang button {
  min-height: var(--target-min);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.lang button[aria-current="true"] {
  background: var(--color-bg-secondary);
  color: var(--color-primary-text);
  border: 2px solid var(--color-primary-text);
  font-weight: var(--weight-bold);
}

a.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: fit-content;
  max-inline-size: 100%;
  color: inherit;
  text-decoration: none;
}

.mark {
  inline-size: 2rem;
  block-size: 2rem;
  flex: 0 0 auto;
  color: var(--color-text);
}

.mark svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

h1, h2 { font-weight: var(--weight-bold); line-height: var(--leading-title); }
h1 { font-size: var(--text-title); margin: 0; }
h2 { font-size: var(--text-date); margin-block: 0 var(--space-2); margin-inline: 0; }

.intro { margin-block: 0 var(--space-5); margin-inline: 0; }

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  margin-block-end: var(--space-4);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding-inline: var(--space-3);
  border-radius: var(--radius);
  background: var(--color-bg-meta);
  color: var(--color-text);
  font-weight: var(--weight-bold);
}

.badge.postponed {
  background: var(--color-bg-secondary);
  color: var(--color-primary-text);
}

.badge svg { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }

.when {
  margin-block: var(--space-3) var(--space-1);
  margin-inline: 0;
  font-size: var(--text-date);
  font-weight: var(--weight-bold);
  line-height: var(--leading-date);
}

.muted { color: var(--color-text-muted); margin: 0; }
.struck { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--color-text); }
.place { margin-block: var(--space-2) 0; margin-inline: 0; }
.map { color: var(--color-primary-text); font-weight: var(--weight-bold); }

.calendar {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-primary-text);
  font-weight: var(--weight-bold);
}

.more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  color: var(--color-text);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.more:hover { border-color: var(--color-primary-text); }

.icon-dir { width: 1.25rem; height: 1.25rem; }
[dir="rtl"] .icon-dir { transform: scaleX(-1); }

footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}

footer p { margin: 0; }
footer a,
.legal-body a { color: var(--color-primary-text); font-weight: var(--weight-bold); }

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.legal-body p,
.legal-body ul,
.legal-body ol { margin: 0 0 var(--space-3); }

.legal-body ul,
.legal-body ol { padding-inline-start: 1.25rem; }

:focus-visible {
  outline: var(--focus-width) solid var(--color-primary-text);
  outline-offset: var(--focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}