/* lage: Farben und Leiste für beide Seiten, danach die Wand (Fläche = Gewicht,
   Farbe = Region, Grund ist nur die Fuge). Die Thema-Ansicht ergänzt thema.css. */
:root {
  --grund: #DCE1E6;
  --tinte: #16202B;
  --tinte-leise: #3D4A58;
  --deutschland: #26384F;
  --europa: #2C6E8A;
  --welt: #8A4B3C;
  --offen: #56606C;
  --fehler: #8A4B3C;
  --auf-flaeche: #FFFFFF;
  --auf-flaeche-leise: rgba(255, 255, 255, .88);
  --auf-flaeche-aus: rgba(255, 255, 255, .32);
  /* Thema-Ansicht: das helle Blatt unter dem Kopf und seine Haarlinien. */
  --blatt: #F5F7F9;
  --linie: #CDD4DB;
  --fuge: 3px;
  --leiste: 46px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0E141B;
    --tinte: #E3E8EE;
    --tinte-leise: #A9B4C0;
    /* Abends gedeckt, aber hell genug, um sich vom Grund abzuheben
       (Fläche ≥ 3:1 zum Grund, Fußzeile ≥ 4,5:1 zur Fläche). */
    --deutschland: #4A6890;
    --europa: #286A86;
    --welt: #9A5543;
    --offen: #5A636E;
    --fehler: #E39A86;
    --auf-flaeche: #F2F4F6;
    --auf-flaeche-leise: rgba(242, 244, 246, .92);
    --auf-flaeche-aus: rgba(242, 244, 246, .3);
    --blatt: #161E27;
    --linie: #2C3845;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Die Wand füllt das Fenster und scrollt nie; die Thema-Ansicht scrollt. */
.wand, .wand body { height: 100%; overflow: hidden; }
/* iPad-Safari: die sichtbare Höhe, auch wenn die Adressleiste ein- und ausfährt. */
@supports (height: 100dvh) { .wand, .wand body { height: 100dvh; } }
body {
  background: var(--grund);
  color: var(--tinte);
  font-family: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--europa); color: var(--auf-flaeche); }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; border-radius: 3px; }

/* Die eine Bewegung beim Öffnen: Die Kachel wächst zum Kopf des Themas und
   beim Zurückgehen wieder zur Kachel (Seitenwechsel als View Transition). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(kopf) { animation-duration: .45s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
}

.leiste {
  height: var(--leiste);
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 18px;
  font-size: 14px;
}
.leiste h1 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.leiste .stand { color: var(--tinte-leise); }
.leiste .stand.fehler { color: var(--fehler); font-weight: 600; }
.farbe-titel { margin-left: auto; }
.legende { display: flex; gap: 16px; list-style: none; font-weight: 700; }
.legende li { display: flex; align-items: center; gap: 7px; }
.legende li::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--farbe); }
.leiste .hinweis { color: var(--tinte-leise); }
@media (max-width: 720px) {
  .leiste { gap: 12px; padding: 0 12px; font-size: 13px; }
  .leiste .hinweis { display: none; }
  .legende { margin-left: auto; gap: 10px; }
}

.wand main { position: relative; height: calc(100% - var(--leiste)); }
/* Die Fläche rückt um eine halbe Fuge ein: So ist die Fuge am Rand so breit
   wie zwischen zwei Kacheln. */
.feld { position: absolute; inset: var(--fuge); list-style: none; }
.leer { padding: 48px 18px; max-width: 60ch; font-size: 16px; line-height: 1.5; color: var(--tinte-leise); }

.kachel {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border: var(--fuge) solid var(--grund);
  border-radius: 10px;
  background: var(--farbe);
  background-clip: padding-box;
  color: var(--auf-flaeche);
  overflow: hidden;
}
/* Das Nachführen: Kacheln gleiten ruhig auf ihr neues Gewicht. */
.feld.lebt .kachel {
  transition: left .5s cubic-bezier(.16, 1, .3, 1), top .5s cubic-bezier(.16, 1, .3, 1),
              width .5s cubic-bezier(.16, 1, .3, 1), height .5s cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) { .feld.lebt .kachel { transition: none; } }

.kachel h2 {
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.02em;
  hyphens: auto;
  -webkit-hyphens: auto;
  /* Wer trennen darf, entscheidet wand.js (titelSetzen): kurze Wörter und
     Namen stecken in .ganz und trennen nie. Für die übrigen, langen Wörter
     gilt: mindestens vier Buchstaben je Seite. */
  hyphenate-limit-chars: 10 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  /* Kein Notumbruch mitten im Wort: Passt ein Wort nicht, merkt das die
     Einpassung (wand.js) und macht die Schrift kleiner. */
  text-wrap: balance;
}
.kachel .satz {
  margin-top: 12px;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 450;
  color: var(--auf-flaeche-leise);
}
.kachel .meta {
  margin-top: auto;
  padding-top: 8px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--auf-flaeche-leise);
}
.kachel h2 .ganz { hyphens: none; -webkit-hyphens: none; }
.kachel .meta span { white-space: nowrap; }
/* Messkachel: gleiche Maße und Schrift, unsichtbar, ohne Bewegung. */
.kachel.mess { visibility: hidden; left: 0; top: 0; pointer-events: none; transition: none; }
.kachel .meta b { font-weight: 800; color: var(--auf-flaeche); }
/* Die ganze Kachel öffnet das Thema; der Link liegt unsichtbar darüber. */
.kachel .oeffnen { position: absolute; inset: 0; border-radius: 7px; z-index: 1; }
.kachel .oeffnen:focus-visible { outline: 3px solid var(--auf-flaeche); outline-offset: -6px; }
.kachel:has(.oeffnen:hover) { filter: brightness(1.07); }