/* ministerien-start.css -- die Startseite der Ministerien (seit 25.09.2026).
 *
 * Die Haeuser mit Bezug zu Verteidigung oder Foerderung, in der
 * Reihenfolge der Bundesregierung, je ein
 * Gebaeudefoto und der Name DARUNTER, nicht darauf: die Namen sind
 * lang ("... fuer Forschung, Technologie und Raumfahrt"), und
 * auf einem Foto muesste ein Verlauf sie tragen. Darunter stehen sie
 * auf Creme und brauchen nichts.
 *
 * WARUM GEBAEUDE UND KEINE WAPPEN
 *
 * Kein Bundesministerium fuehrt ein eigenes Wappen. Alle sechzehn
 * tragen dasselbe Zeichen: den Bundesadler mit Flaggenstreifen und
 * ihrem Namen. Sechzehn gleiche Adler unterscheiden nichts, und den
 * Bundesadler duerfen nur Bundesbehoerden fuehren -- dieselbe
 * Abwaegung wie beim Landeswappen in setup-organigramme-logos.sql.
 *
 * Ein Haus, dessen Organigramm gelesen ist, ist ein Verweis. Die
 * uebrigen stehen da, sind aber nicht anklickbar: eine Kachel, die auf
 * eine leere Seite fuehrt, waere eine Zusage, die nicht gehalten wird.
 */

.mn-start .wb-abschnitt__dek { margin-bottom: 12px; }
.mn-start .wb-trefferzeile { margin: 0 0 24px; font-size: .8125rem; color: var(--wb-leise); }

.mn-haeuser {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 32px 20px;
  margin: 0; padding: 0; list-style: none;
}

.mn-haus {
  display: flex; flex-direction: column; gap: 12px;
  color: var(--wb-text); text-decoration: none;
}
.mn-haus__bild {
  position: relative; display: block; aspect-ratio: 16 / 9;
  border-radius: 8px; overflow: hidden; background: var(--wb-tief);
}
.mn-haus__bild img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.01); transition: transform .45s ease;
}
/* Ohne Foto: Hausgruen mit dem Kuerzel, damit das Raster ruhig bleibt. */
.mn-haus__ersatz {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 1.75rem; color: rgba(255, 255, 255, .72);
  letter-spacing: .02em;
}

.mn-haus__text { display: grid; gap: 4px; }
.mn-haus__kurz {
  font-family: var(--mono); font-size: .6875rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--wb-leise);
}
.mn-haus__name {
  font-family: var(--serif); font-weight: 700; font-size: 1rem; line-height: 1.4;
  color: var(--wb-tief); text-wrap: pretty; hyphens: manual;
}
.mn-haus__stand {
  display: flex; align-items: baseline; gap: 8px;
  font-size: .75rem; line-height: 1.5; color: var(--wb-leise);
}
.mn-haus__stand::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  transform: translateY(-1px); background: var(--wb-rand); border: 1px solid var(--wb-still);
}
.mn-haus--da .mn-haus__stand { color: var(--wb-tief); font-weight: 600; }
.mn-haus--da .mn-haus__stand::before { background: var(--sttext-green, #0E7C5A); border-color: var(--sttext-green, #0E7C5A); }

a.mn-haus:hover .mn-haus__bild img,
a.mn-haus:focus-visible .mn-haus__bild img { transform: scale(1.05); }
a.mn-haus:hover .mn-haus__name,
a.mn-haus:focus-visible .mn-haus__name { text-decoration: underline; text-underline-offset: 3px; }
a.mn-haus:focus-visible { outline: 3px solid var(--wb-tief); outline-offset: 4px; border-radius: 8px; }

/* Urheber der gezeigten Fotos, gesammelt unter dem Raster. */
.mn-nachweis {
  margin: 40px 0 0; max-width: 60rem;
  font-size: .6875rem; line-height: 1.6; color: var(--wb-leise);
}
.mn-nachweis b {
  font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .mn-haus__bild img { transition: none; }
  a.mn-haus:hover .mn-haus__bild img, a.mn-haus:focus-visible .mn-haus__bild img { transform: scale(1.01); }
}