/* stuv Software Suite · dünne Projektschicht über stuv.css (Präfix sw-).
   App-Stil wie die übrigen Werkzeuge. Einziger abgeleiteter Wert ist das
   Leuchten beim Überfahren: Ring und Schein aus --stuv-akzent-heller und
   --stuv-akzent-hell, nach dem Muster des Fokusrings von .stuv-pille-feld. */

/* Ganze Höhe des Fensters: Kopf, Inhalt, Fuß. Grid statt Flex, damit die
   1fr-Zeilen der Kacheln eine feste Höhe bekommen. */
body.stuv-app {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.stuv-app .sw-inhalt {
  width: 100%;
  grid-template-rows: auto 1fr;
  gap: var(--stuv-s6);
  padding-bottom: var(--stuv-s4);
}

/* Zehn Kacheln: quer 5 × 2, hochkant 2 × 5 – so passt alles ohne Scrollen.
   Wird das Fenster zu klein, wachsen die Zeilen und die Seite scrollt. */
.sw-raster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(min-content, 1fr);
  gap: var(--stuv-s4);
}
/* Kachel: ganze Karte ist der Link. Logo oben, Adresse unten. */
.stuv-app a.sw-kachel {
  container-type: inline-size;
  height: 100%;
  padding: var(--stuv-s5);
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: var(--stuv-s3);
  color: var(--stuv-text);
  text-decoration: none;
  transition: border-color var(--stuv-dauer-kurz) var(--stuv-ease),
              box-shadow var(--stuv-dauer-kurz) var(--stuv-ease);
}
/* Alle Logos gleich hoch, damit die Rauten gleich groß sind. Das breiteste
   (Vorlagebericht, 3,5 : 1) bestimmt die Grenze: 28 % der Kachelbreite. */
.sw-logo { margin: 0; line-height: 0; }
.sw-logo img { display: block; height: min(56px, 28cqi); width: auto; max-width: 100%; }
.sw-zweck { color: var(--stuv-text-2); }
.sw-adresse {
  grid-row: 3;
  align-self: end;
  font-size: var(--stuv-app-klein);
  color: var(--sw-adresse, var(--stuv-text-3));
  overflow-wrap: break-word;
}

/* Abwechslung: Hintergründe im Dreierwechsel Weiß – Blau hell – Rot hell
   (die hellste Stufe der CI-Farbwelten). Der Dreierwechsel sorgt dafür,
   dass bei 5 wie bei 2 Spalten keine zwei Nachbarn gleich sind, weder
   neben- noch untereinander. Kein Grün: im App-Stil nur für „positiv“.
   Auf Farbe reicht Ink 50 % für die Adresse nicht mehr, deshalb 70 %. */
.stuv-app .sw-raster > li:nth-child(3n+2) > a.sw-kachel:not(.sw-kachel--festival) { background: var(--stuv-blau-heller); --sw-adresse: var(--stuv-text-2); }
.stuv-app .sw-raster > li:nth-child(3n) > a.sw-kachel:not(.sw-kachel--festival) { background: var(--stuv-rot-heller); --sw-adresse: var(--stuv-text-2); }

/* Campuslichter ist eine eigene Festivalmarke: weißes Logo auf dem
   Festival-Blau der CI (--stuv-festival-basis), Text weiß wie auf den
   Plakaten. Das Logo selbst bleibt unverändert. */
.stuv-app a.sw-kachel--festival { background: var(--stuv-festival-basis); border-color: var(--stuv-festival-basis); }
.sw-kachel--festival .sw-zweck,
.sw-kachel--festival .sw-adresse { color: var(--stuv-text-auf-rot-2); }

/* Überfahren oder Tastatur: kurz aufleuchten, dann ruhiger Ring. */
.stuv-app a.sw-kachel:hover,
.stuv-app a.sw-kachel:focus-visible {
  border-color: var(--stuv-akzent-hell);
  box-shadow: 0 0 0 2px var(--stuv-akzent-heller);
  animation: sw-leuchten var(--stuv-dauer-reveal) var(--stuv-ease-aus);
}
.stuv-app a.sw-kachel:hover .sw-adresse,
.stuv-app a.sw-kachel:focus-visible .sw-adresse { color: var(--stuv-akzent-dunkel); }
.stuv-app a.sw-kachel--festival:hover .sw-adresse,
.stuv-app a.sw-kachel--festival:focus-visible .sw-adresse { color: var(--stuv-text-auf-akzent); }
.stuv-app a.sw-kachel:focus-visible { outline: var(--stuv-fokus); outline-offset: 2px; }

@keyframes sw-leuchten {
  0%   { box-shadow: 0 0 0 0 var(--stuv-akzent-heller); }
  35%  { box-shadow: 0 0 0 4px var(--stuv-akzent-heller), 0 0 28px 6px var(--stuv-akzent-hell); }
  100% { box-shadow: 0 0 0 2px var(--stuv-akzent-heller); }
}
@media (prefers-reduced-motion: reduce) {
  .stuv-app a.sw-kachel:hover,
  .stuv-app a.sw-kachel:focus-visible { animation: none; }
}

/* Hochkant ist die Höhe knapp: Logos kleiner, die Adresse entfällt (sie
   steht ohnehin im Link und erscheint beim Überfahren in der Statuszeile).
   Steht bewusst hinter den Grundregeln der Kachel, sonst gewinnen die. */
@media (orientation: portrait), (max-width: 900px) {
  .sw-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stuv-s3); }
  .stuv-app a.sw-kachel { grid-template-rows: auto 1fr; padding: var(--stuv-s4); }
  .sw-logo img { height: min(44px, 28cqi); }
  .sw-adresse { display: none; }
}

/* Fuß: Impressum, klein und leise (Muster stuv Tix). */
.sw-fuss {
  max-width: var(--stuv-app-breite);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--stuv-s6) var(--stuv-s4);
  font-size: var(--stuv-app-klein);
}
.sw-fuss nav { display: flex; flex-wrap: wrap; gap: var(--stuv-s2) var(--stuv-s4); }
.stuv-app .sw-fuss a { color: var(--stuv-text-2); }

/* Schmale Fenster: Kacheln kompakter, damit zehn Stück auf einen Schirm passen. */
@media (max-width: 640px) {
  .stuv-app .sw-inhalt { gap: var(--stuv-s3); padding-bottom: var(--stuv-s3); }
  .stuv-app a.sw-kachel { padding: var(--stuv-s3); gap: var(--stuv-s1); }
  .sw-raster { gap: var(--stuv-s2); }
  .sw-zweck { font-size: var(--stuv-app-klein); line-height: 1.35; }
  .sw-logo img { height: min(36px, 28cqi); }
  .sw-fuss { padding: 0 var(--stuv-s4) var(--stuv-s3); }
}