/* =========================================
   atlas.css: Taubenatlas (#2582)
   Farben nur aus den Tokens der Bausteine. Fünf Stufen einer Farbreihe aus --farbe-marke.
   Schrift nie unter 1rem (#2194); SVG-Text in rem, damit er mit der Grafik lesbar bleibt.
   ========================================= */

.atlas {
  --atlas-0: var(--farbe-neutral-bg, #f1f3f5);
  --atlas-1: color-mix(in srgb, var(--farbe-marke) 14%, var(--farbe-flaeche, #fff));
  --atlas-2: color-mix(in srgb, var(--farbe-marke) 32%, var(--farbe-flaeche, #fff));
  --atlas-3: color-mix(in srgb, var(--farbe-marke) 52%, var(--farbe-flaeche, #fff));
  --atlas-4: color-mix(in srgb, var(--farbe-marke) 74%, var(--farbe-flaeche, #fff));
  --atlas-5: var(--farbe-marke-dunkel, var(--farbe-marke));
  font-variant-numeric: tabular-nums;
}

.atlas .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Kopf ---------- */
.atlas-kopf {
  display: grid;
  gap: var(--abstand-md, 16px);
  margin-bottom: var(--abstand-lg, 24px);
}

.atlas-kopf h1 {
  margin: 0 0 var(--abstand-xs, 4px);
}

.atlas-unterzeile {
  margin: 0;
  max-width: 62ch;
  color: var(--farbe-text-gedaempft);
}

.atlas-steuerung {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--abstand-sm, 8px) var(--abstand-md, 16px);
}

.atlas-jahr {
  display: grid;
  gap: var(--abstand-xs, 4px);
  font-weight: 600;
}

.atlas-jahr select {
  min-height: 44px;
  min-width: 7.5rem;
  padding: 0 var(--abstand-sm, 8px);
  border: 1px solid var(--farbe-rand-steuerelement);
  border-radius: var(--radius-feld, 8px);
  background: var(--farbe-flaeche);
  font: inherit;
}

.atlas-steuerung .knopf {
  min-height: 44px;
}

@media (min-width: 720px) {
  .atlas-kopf {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.atlas-meldung {
  margin-bottom: var(--abstand-lg, 24px);
}

/* ---------- Leitsatz ---------- */
.atlas-satz {
  margin: 0 0 var(--abstand-xl, 32px);
  font-size: var(--schrift-gross, 1.125rem);
  line-height: 1.6;
  max-width: 66ch;
}

.atlas-zahl {
  color: var(--farbe-marke);
  font-weight: 800;
  white-space: nowrap;
}

/* ---------- Abschnitte ---------- */
.atlas-block {
  margin: 0 0 var(--abstand-xl, 32px);
  padding-top: var(--abstand-lg, 24px);
  border-top: 1px solid var(--farbe-linie);
}

.atlas-block__kopf {
  margin-bottom: var(--abstand-md, 16px);
}

.atlas-block h2 {
  margin: 0 0 var(--abstand-xs, 4px);
}

.atlas-hinweis {
  margin: 0;
  max-width: 66ch;
  color: var(--farbe-text-gedaempft);
}

.atlas-fazit {
  margin: var(--abstand-md, 16px) 0 0;
  max-width: 66ch;
}

.atlas-leer {
  color: var(--farbe-text-gedaempft);
  list-style: none;
}

/* ---------- Karte ---------- */
.atlas-karte-wrap {
  display: grid;
  gap: var(--abstand-md, 16px);
}

@media (min-width: 760px) {
  .atlas-karte-wrap {
    grid-template-columns: minmax(0, 1fr) 15rem;
    align-items: start;
  }
}

.atlas-karte {
  margin: 0;
  padding: var(--abstand-sm, 8px);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte, 12px);
}

.atlas-karte svg {
  display: block;
  width: 100%;
  height: auto;
}

.atlas-flaeche {
  stroke: var(--farbe-flaeche, #fff);
  stroke-width: 3;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.2s ease-out;
}

.atlas-flaeche:hover {
  filter: brightness(0.94);
}

.atlas-flaeche:focus-visible {
  outline: none;
  stroke: var(--farbe-fokus);
  stroke-width: 7;
}

.atlas-flaeche.ist-gewaehlt {
  stroke: var(--farbe-akzent, var(--farbe-text));
  stroke-width: 7;
}

.stufe-0 { fill: var(--atlas-0); background: var(--atlas-0); }
.stufe-1 { fill: var(--atlas-1); background: var(--atlas-1); }
.stufe-2 { fill: var(--atlas-2); background: var(--atlas-2); }
.stufe-3 { fill: var(--atlas-3); background: var(--atlas-3); }
.stufe-4 { fill: var(--atlas-4); background: var(--atlas-4); color: var(--farbe-text-auf-marke); }
.stufe-5 { fill: var(--atlas-5); background: var(--atlas-5); color: var(--farbe-text-auf-marke); }

.atlas-name {
  font-size: 2.25rem;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: var(--farbe-text);
  paint-order: stroke;
  stroke: var(--farbe-flaeche, #fff);
  stroke-width: 6;
  stroke-linejoin: round;
  pointer-events: none;
}

.atlas-name--hell {
  fill: var(--farbe-text-auf-marke, #fff);
  stroke: var(--farbe-marke-dunkel, var(--farbe-marke));
}

.atlas-gebiet {
  padding: var(--abstand-md, 16px);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte, 12px);
  box-shadow: var(--schatten-karte, 0 2px 8px rgba(0, 0, 0, 0.06));
}

.atlas-gebiet:focus {
  outline: none;
}

.atlas-gebiet:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 2px;
}

.atlas-gebiet__name {
  margin: 0;
}

.atlas-gebiet__zahl {
  margin: var(--abstand-xs, 4px) 0 0;
}

.atlas-gebiet__zahl strong {
  font-size: var(--schrift-display, 2.5rem);
  line-height: 1;
  color: var(--farbe-marke);
}

.atlas-gebiet__text {
  margin: var(--abstand-sm, 8px) 0 var(--abstand-md, 16px);
  color: var(--farbe-text-gedaempft);
}

.atlas-mini {
  display: block;
  width: 100%;
  max-width: 15rem;
  height: auto;
}

.atlas-mini__balken { fill: var(--farbe-marke); }
.atlas-mini__leer { fill: var(--farbe-linie); }

.atlas-legende {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--abstand-sm, 8px);
  color: var(--farbe-text-gedaempft);
}

.atlas-legende__feld {
  width: 2rem;
  height: 0.75rem;
  border-radius: 3px;
}

.atlas-legende__text:first-child { margin-right: var(--abstand-xs, 4px); }
.atlas-legende__text:last-child { margin-left: var(--abstand-xs, 4px); }

.atlas-tabelle-auf {
  margin-top: var(--abstand-md, 16px);
}

.atlas-tabelle-auf > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  color: var(--farbe-link);
}

.atlas-rangliste {
  display: grid;
  gap: 2px;
  margin: var(--abstand-sm, 8px) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: rang;
}

.atlas-rangliste li { counter-increment: rang; }

.atlas-rang__knopf {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--abstand-sm, 8px);
  border: 0;
  border-radius: var(--radius-feld, 8px);
  background: transparent;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.atlas-rang__knopf::before {
  content: counter(rang) ".";
  color: var(--farbe-text-gedaempft);
}

.atlas-rang__knopf:hover { background: var(--farbe-neutral-bg); }
.atlas-rang__knopf:focus-visible { outline: 3px solid var(--farbe-fokus); outline-offset: -3px; }
.atlas-rang__wert { font-weight: 700; }

/* ---------- Verlauf ---------- */
.atlas-verlauf {
  display: grid;
  gap: var(--abstand-lg, 24px);
}


.atlas-reihe { margin: 0; }

.atlas-reihe__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--abstand-sm, 8px);
  margin-bottom: var(--abstand-xs, 4px);
  font-weight: 600;
}

.atlas-reihe__kopf strong {
  font-size: var(--schrift-titel, 1.375rem);
  white-space: nowrap;
}

.atlas-balken {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.atlas-balken__wert { fill: var(--atlas-3); }
.atlas-balken__wert.ist-spitze { fill: var(--atlas-5); }
.reihe-notfall .atlas-balken__wert { fill: color-mix(in srgb, var(--farbe-notfall, #b42318) 55%, var(--farbe-flaeche, #fff)); }
.reihe-notfall .atlas-balken__wert.ist-spitze { fill: var(--farbe-notfall, #b42318); }
.reihe-tot .atlas-balken__wert { fill: color-mix(in srgb, var(--farbe-text-gedaempft) 45%, var(--farbe-flaeche, #fff)); }
.reihe-tot .atlas-balken__wert.ist-spitze { fill: var(--farbe-text); }
.atlas-balken__zukunft { fill: var(--farbe-linie); }

.atlas-balken__zahl,
.atlas-balken__monat {
  font-size: 1rem;
  text-anchor: middle;
}

.atlas-balken__zahl { font-weight: 700; fill: var(--farbe-text); }
.atlas-balken__monat { fill: var(--farbe-text-gedaempft); }

/* ---------- Zeitraster ---------- */
.atlas-raster {
  overflow-x: auto;
}

.atlas-zeit {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  table-layout: fixed;
}

.atlas-zeit th {
  font-weight: 600;
  color: var(--farbe-text-gedaempft);
  text-align: center;
  white-space: nowrap;
}

/* Allgemeine Tabellenköpfe (components.css: thead dunkel, Sortier-Zeiger) gelten hier nicht. */
.atlas-zeit thead,
.atlas-zeit th,
.atlas-zeit thead th,
.atlas-zeit thead th:hover {
  background: transparent;
  border: 0;
  padding: 0 0 4px;
  color: var(--farbe-text-gedaempft);
  letter-spacing: 0;
  cursor: default;
  font-size: var(--schrift-klein, 1rem);
}
.atlas-zeit tbody th { width: 2.25rem; text-align: left; }

.atlas-zeit td {
  height: 2.5rem;
  border-radius: 6px;
  text-align: center;
  font-weight: 700;
}

.atlas-zeit td.stufe-0 { color: transparent; }
.atlas-zeit td.stufe-1,
.atlas-zeit td.stufe-2,
.atlas-zeit td.stufe-3 { color: var(--farbe-text); }

@media (max-width: 420px) {
  .atlas-zeit thead th { writing-mode: vertical-rl; transform: rotate(180deg); height: 3.5rem; }
  .atlas-zeit__wert { visibility: hidden; }
}

/* ---------- Brennpunkte ---------- */
.atlas-orte {
  display: grid;
  gap: var(--abstand-md, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .atlas-orte { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--abstand-xl, 32px); }
}

.atlas-ort {
  display: grid;
  gap: 6px;
}

.atlas-ort__kopf {
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-sm, 8px);
}

.atlas-ort__name { font-weight: 600; }

.atlas-ort__spur {
  height: 0.625rem;
  border-radius: 999px;
  background: var(--farbe-neutral-bg);
  overflow: hidden;
}

.atlas-ort__balken {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--farbe-marke);
}

.atlas-ort .atlas-mini { max-width: 100%; height: 2rem; }

/* ---------- Grenzen ---------- */
.atlas-grenzen ul {
  margin: var(--abstand-sm, 8px) 0 var(--abstand-md, 16px);
  padding-left: 1.25rem;
  max-width: 70ch;
}

.atlas-grenzen li + li { margin-top: var(--abstand-xs, 4px); }

.atlas-quelle {
  margin: 0;
  max-width: 70ch;
  color: var(--farbe-text-gedaempft);
}

@media (prefers-reduced-motion: reduce) {
  .atlas-flaeche { transition: none; }
}

/* ---------- Druckblatt (eine A4-Seite) ---------- */
@media print {
  @page { size: A4; margin: 10mm 12mm; }

  body * { visibility: hidden; }
  #atlas, #atlas * { visibility: visible; }

  #atlas {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: 10pt;
    color: #000;
  }

  .atlas-steuerung,
  #atlas-meldung,
  .atlas-tabelle-auf,
  .atlas-gebiet,
  .atlas-legende__text { display: none !important; }

  .atlas-kopf { margin-bottom: 4mm; display: block; }
  .atlas-kopf h1 { font-size: 20pt; }
  .atlas-unterzeile { font-size: 10pt; }
  .atlas-satz { font-size: 11pt; margin-bottom: 4mm; }

  .atlas-block {
    margin: 0 0 3mm;
    padding-top: 2mm;
    break-inside: avoid;
  }

  .atlas-block h2 { font-size: 12pt; }
  .atlas-hinweis, .atlas-fazit, .atlas-quelle, .atlas-grenzen li { font-size: 8.5pt; }

  .atlas-karte-wrap { display: block; }
  .atlas-karte { border: 0; padding: 0; }
  .atlas-karte svg { max-height: 46mm; width: auto; margin: 0 auto; }
  .atlas-unterzeile { display: none; }
  .atlas-kopf h1 { font-size: 16pt !important; }
  .atlas-satz { font-size: 10pt !important; margin-bottom: 2mm !important; line-height: 1.4; }
  .atlas-block { margin-bottom: 1.5mm !important; padding-top: 1.5mm !important; }
  .atlas-legende { margin-top: 0; }
  #atlas .atlas-zeit__wert { visibility: hidden; }
  .atlas-fazit { margin-top: 1mm; }
  .atlas-grenzen ul { padding-left: 4mm; }
  .atlas-grenzen li, .atlas-quelle { font-size: 7.5pt !important; line-height: 1.3; }
  .atlas-grenzen li + li { margin-top: 0; }
  .atlas-zeit { border-spacing: 1.5px; }
  .atlas-zeit tbody th { width: 8mm; }
  .atlas-block__kopf { margin-bottom: 2mm; }
  .atlas-raster { overflow: visible; }

  .atlas-verlauf { grid-template-columns: repeat(3, 1fr); gap: 4mm; }
  .atlas-reihe__kopf { font-size: 9pt; }
  .atlas-reihe__kopf strong { font-size: 11pt; }

  #atlas .atlas-zeit td,
  #atlas .atlas-zeit th,
  #atlas .atlas-zeit thead th,
  #atlas .atlas-zeit thead th:hover {
    height: 2.8mm;
    padding: 0;
    font-size: 7pt;
    line-height: 1;
    border-radius: 2px;
    vertical-align: middle;
  }
  #atlas .atlas-reihe svg { max-height: 30mm; }

  .atlas-orte { grid-template-columns: repeat(3, 1fr); gap: 2mm 6mm; }
  .atlas-orte li:nth-child(n + 7) { display: none; }
  .atlas-ort .atlas-mini { display: none; }

  .atlas-grenzen ul { margin: 1mm 0; }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}