/* Die Übersicht der Werkzeuge — was allein diese Seite betrifft.
 *
 * Tafel und Bausteine stehen in `gemeinsam/`; hier stehen die Karten, die
 * Gruppen und das Suchfeld. Eine Farbe wird nicht hingeschrieben, sondern aus
 * der Tafel geholt.
 *
 * Bis dahin führte diese Seite ihre eigene Tafel mit denselben Werten und
 * schaltete über `prefers-color-scheme`. Jetzt gilt auch hier `data-thema` an
 * der Wurzel, und der Schalter im Kopf wirkt für alle Werkzeuge zugleich —
 * sie teilen sich eine Adresse und damit den Speicher des Browsers.
 */

/* Das obere Polster steht am Rumpf und nicht am `body`: Die Kopfleiste geht
   über die volle Fensterbreite und bleibt beim Rollen stehen. */
body {
  padding: 0 0 3rem;
}

.rumpf {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 0;
}

/* ------------------------------------------------------------------- Kopf */

/* Die Kopfleiste steht in `bausteine.css` und ist hier dieselbe wie in jeder
   Anwendung: `.kopf` mit `.kopf__marke`, `.kopf__titel`, `.kopf__unterzeile`
   und `.kopf__aktionen`. Bis dahin führte diese Seite einen eigenen
   `.seitenkopf` mit 40-px-Zeichen und 24-px-Titel, und dieselben zwei Regeln
   standen ein zweites Mal in `gemeinsam/seiten.css`.

   Der Ton bleibt Blau — `--ton-app` aus der Tafel ist es bereits, und das
   Zeichen des Hauses trägt ihn auch. */

/* ------------------------------------------------------------------ Suche */

.suche {
  margin-bottom: 1.25rem;
}

.leer {
  display: none;
  padding: 1rem 0;
  color: var(--text-leise);
}

/* ------------------------------------------------------------------ Karten */

.gruppe {
  margin-bottom: 1.6rem;
}

/* Die Sachgebiete sind Wegweiser, keine Überschriften: klein, in Versalien
   und zurückhaltend, damit die Namen der Anwendungen führen. */
.gruppe > h2 {
  margin: 0 0 0.5rem 0.1rem;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-leise);
}

.karten {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

/* Jedes Sachgebiet hat seinen Ton aus der gemeinsamen Tafel. `--farbe` ist
   derselbe Griff wie in den Anwendungen: Der Abschnitt setzt ihn, und was
   darin liegt, greift ihn ab. Denselben Ton tragen die Zeichen der
   Anwendungen — dort steht er als Hexwert in der Datei, weil ein `<img>`
   die CSS dieser Seite nicht kennt. */
.gruppe[data-ton="violett"] { --farbe: var(--ton-violett); }
.gruppe[data-ton="blau"] { --farbe: var(--ton-blau); }
.gruppe[data-ton="petrol"] { --farbe: var(--ton-petrol); }

/* Eine Spalte, damit die Leiste unten an den Rand rücken kann: Das Raster
   zieht jede Karte einer Reihe auf dieselbe Höhe, und `margin-top: auto` an
   `.karte__leiste` schiebt ZIP und Fassung dorthin — so stehen sie in einer
   Reihe auf einer Linie, wie lang der Satz darüber auch ist. */
.karte {
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.85rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--farbe, var(--primaer));
  border-radius: 5px;
  color: inherit;
  text-decoration: none;
}

.karte:hover {
  border-color: var(--farbe, var(--primaer));
  background: color-mix(in srgb, var(--farbe, var(--primaer)) 8%, var(--flaeche));
}

/* Der Kopf einer Karte — nicht `.kopf`: So heißt in `bausteine.css` die
   Kopfleiste einer Anwendung, und die bringt Rahmen, Polster und `sticky`
   mit. */
.karte__kopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Alles, was in einer Karte liegt, trägt ihren Namen. `.name`, `.satz` und
   `.zip` hießen bis September 2026 so, wie es gerade passte — Namen, die
   jedes andere Stilblatt dieser Seite ebenso hätte beanspruchen können. Wer
   die gemeinsamen Bausteine einbindet, erbt ihre Namen; ein eigener gehört
   deshalb an seinen Baustein gebunden. */
.karte__zeichen {
  font-size: 1rem;
  line-height: 1;
}

/* Wo eine Anwendung ein eigenes Zeichen mitbringt, steht es statt des
   Sinnbilds. Die Höhe folgt der Schrift, damit die Zeile nicht springt. */
.karte__zeichen--bild {
  display: block;
  width: 1.15em;
  height: 1.15em;
  border-radius: 3px;
}

/* Der Name führt die Karte und soll nicht als Verweis auffallen — die ganze
   Karte ist einer. Die beiden Deklarationen standen bis September 2026 in
   jeder der neun Kacheln als `style`-Attribut. */
.karte__name {
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

/* Eine Anwendung, die noch in Erprobung ist.
 *
 * Das Abzeichen steht im Kopf der Karte neben dem Namen und nicht im Satz
 * darunter: Wer die Liste überfliegt, liest die Namen. Ocker und nicht rot —
 * es ist ein Hinweis und keine Warnung; rot heißt im ganzen Haus, dass etwas
 * schiefgegangen ist.
 *
 * `flex-wrap` am Kartenkopf gehört dazu: Ein langer Name und das Abzeichen
 * daneben brauchen auf einer schmalen Karte zwei Zeilen. Für die Karten ohne
 * Abzeichen ändert es nichts, sie haben nur zwei Kinder. */
.karte__kopf { flex-wrap: wrap; }

.karte__beta {
  flex: none;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--ton-ocker);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ton-ocker);
}

.karte__satz {
  margin-top: 0.3rem;
  font-size: 13px;
  color: var(--text-leise);
}

/* Die Zeile am Fuß der Karte: links das ZIP, rechts die Fassung. Bis
 * September 2026 stand die Fassung im Kopf neben dem Namen und brach dort
 * einen langen Namen um; hier unten ist Platz. Der Abstand zum Satz ist ein
 * Polster und kein Rand — der Rand oben gehört `auto`, siehe `.karte`. */
.karte__leiste {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.45rem;
}

.karte__zip {
  display: inline-block;
  font-size: 13px;
  color: var(--text-leise);
  text-decoration: none;
  white-space: nowrap;
}

.karte__zip:hover {
  color: var(--primaer);
  text-decoration: underline;
}

/* Die Fassung, die gerade am Server steht — gelesen beim Aufruf aus
 * `<kurzurl>/stand.txt`, siehe das Skript am Ende von `index.html`. Leise und
 * klein: Sie ist eine Auskunft für den, der sie sucht. `tabular-nums`, damit
 * „1.10“ und „1.9“ nicht verschieden breit dastehen. */
.karte__fassung {
  flex: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-leise);
}

/* ------------------------------------------------------------------- Fuß */

/* Hier steht keiner mehr. Bis September 2026 baute diese Datei `.fuss` ein
   zweites Mal — linksbündig und 13 px, während der geerbte Baustein mittig
   und 12 px steht. Der Fuß dieser Seite ist jetzt derselbe wie in jeder
   Anwendung und kommt aus `gemeinsam/bausteine.css`. */