/* ---------------------------------------------------------------------------
   Stadt-Auswertungen (Verwaltung) und die Kennzahlen-Kacheln.
   --------------------------------------------------------------------------- */

/* Die Kennzahl-Kacheln kommen aus der bestehenden Komponente (.kennzahlen /
   .kennzahl in seiten/pruefbericht.css) – hier nur die Feinheiten, die in den
   Auswertungen dazukommen: Werte wie „38,4–99,1" brauchen etwas weniger Größe,
   damit sie nicht umbrechen. */
.seite-auswertung .kennzahl__wert { font-size: 1.6rem; }
.seite-auswertung .kennzahl__label strong { color: var(--farbe-text); font-weight: 700; }

/* Zwei Lesarten derselben Zahlen: sachlich und zugespitzt nebeneinander */
.lesarten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--abstand-mittel);
    margin-top: var(--abstand-mittel);
}
.lesart {
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-mittel);
    padding: var(--abstand-mittel);
    background: var(--farbe-flaeche);
}
.lesart--wissenschaftlich { border-left: 4px solid var(--farbe-sekundaer); }
.lesart--presse { border-left: 4px solid var(--farbe-warnung); background: var(--farbe-warnung-flaeche); }
.lesart__titel {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--farbe-text-leise);
}
.lesart__schlagzeile {
    margin: 0 0 0.6rem;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--farbe-primaer);
}
.lesart__text { margin: 0 0 0.6rem; font-size: 0.95rem; line-height: 1.5; }
.lesart__text--leise { font-size: 0.85rem; color: var(--farbe-text-leise); }
.lesart__hinweis { min-height: 1.2em; }

/* Diagramme */
.diagramm { margin: var(--abstand-mittel) 0 0; }
.diagramm + .diagramm { margin-top: var(--abstand-gross); }
.diagramm__titel { font-size: 1.05rem; color: var(--farbe-primaer); margin: 0 0 0.3rem; }
.diagramm__erklaerung { font-size: 0.88rem; color: var(--farbe-text-leise); margin: 0 0 var(--abstand-klein); }
.diagramm__inhalt { overflow-x: auto; }
.diagramm__flaeche { width: 100%; min-width: 520px; height: auto; display: block; }

.diagramm__label { font-size: 13px; fill: var(--farbe-text); }
.diagramm__wert { font-size: 13px; font-weight: 700; fill: var(--farbe-text); }
.diagramm__achse { font-size: 11px; fill: var(--farbe-text-leise); }
.diagramm__gitter { stroke: var(--farbe-rahmen); stroke-width: 1; }
.diagramm__linie { fill: none; stroke: var(--farbe-sekundaer); stroke-width: 3; stroke-linejoin: round; }
.diagramm__marke { fill: var(--farbe-sekundaer); stroke: #ffffff; stroke-width: 2; }

/* Jeder Datenpunkt ist mit der Tastatur erreichbar – der Fokus muss sichtbar sein. */
.diagramm__punkt:focus-visible {
    outline: 3px solid var(--farbe-sekundaer);
    outline-offset: 2px;
}
.diagramm__punkt:hover rect,
.diagramm__punkt:hover circle { filter: brightness(1.08); }

.diagramm__tabelle-schalter {
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--farbe-link);
    list-style: none;
    padding: 0.3rem 0;
}
.diagramm__tabelle-schalter::-webkit-details-marker { display: none; }
.diagramm__tabelle-schalter::before { content: "▸ "; }
details[open] > .diagramm__tabelle-schalter::before { content: "▾ "; }
.diagramm__tabelle { margin-top: 0.5rem; }

/* Städteübersicht – dasselbe Raster wie die Kennzahl-Kacheln darüber,
   damit beide Reihen dieselbe Rhythmik haben. */
.staedte-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--abstand-mittel);
}
.stadt-kachel {
    display: block;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-mittel);
    padding: var(--abstand-mittel);
    text-decoration: none;
    color: inherit;
}
.stadt-kachel:hover { border-color: var(--farbe-sekundaer); box-shadow: 0 2px 10px rgba(0, 0, 0, .07); }
.stadt-kachel:focus-visible { outline: 3px solid var(--farbe-sekundaer); outline-offset: 2px; }
.stadt-kachel__name {
    display: block;              /* sonst klebt der Name an der ersten Zahl */
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--farbe-primaer);
}
.stadt-kachel__zahlen {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--farbe-text-leise);
}
.stadt-kachel__zahlen strong { color: var(--farbe-text); }

/* Methodik-Kasten: gehört zu jeder Veröffentlichung von Zahlen */
.methodik {
    border-left: 4px solid var(--farbe-sekundaer);
    background: var(--farbe-flaeche-gedaempft);
    padding: var(--abstand-mittel);
    border-radius: 0 var(--radius-mittel) var(--radius-mittel) 0;
    font-size: 0.9rem;
}
.methodik dt { font-weight: 700; color: var(--farbe-primaer); }
.methodik dd { margin: 0 0 0.5rem; }

/* Einbettungscode für die Fachstellen */
.veroeffentlichung__code {
    width: 100%;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.82rem;
    padding: 0.6rem;
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-klein);
    background: var(--farbe-flaeche-gedaempft);
}