/* ==========================================================================
   Simulationen — das Kachelraster im zweiten Reiter der Bibliothek
   Ergaenzt assets/css/app.css und verwendet ausschliesslich dessen
   Tokens (ARCHITEKTUR §7). Keine eigenen Farbwerte, damit die Kacheln
   in allen 20 Themes lesbar bleiben.

   Eine Kachel ist KEIN Kasten (docs/DESIGN.md §6: «Verboten: Kaesten
   mit Rahmen und Radius um Inhalt»). Sie ist eine Spalte: Bild, Titel,
   Beschrieb, Autor, Fachthemen, Handlung. Getrennt sind die Kacheln
   allein durch den Abstand im Raster — keine Flaeche, kein Rahmen,
   kein Radius. Den einen Radius traegt das Bild, weil ein Bild eine
   Kante hat.

   Die Ausnahme ist der Look «Karte»: dort IST die Flaeche der Inhalt
   des Looks (docs/DESIGN.md §8.1), und die Kachel bekommt sie wie jede
   andere Gruppe — §6 dieser Datei, mit denselben Tokens wie
   assets/css/looks/karte.css. Die Look-Datei selbst bleibt unberuehrt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Die Reiterleiste
   Dieselbe Form wie die Typleiste des Materialbrowsers (.typ-knopf aus
   app.css): Textknopf, aktiver Reiter mit 2-px-Unterstrich in der
   Akzentfarbe. Hier sind es Links statt Knoepfe, sonst nichts Neues.
   -------------------------------------------------------------------------- */

.bibreiter {
	display: flex;
	align-items: center;
	gap: var(--raum-3);
	margin-bottom: var(--raum-3);
	box-shadow: inset 0 -1px 0 0 var(--border);
}

.bibreiter .typ-knopf {
	text-decoration: none;
	min-height: 34px;
}

/* Der aktive Reiter sitzt auf der Linie der Leiste, nicht darueber */
.bibreiter .typ-knopf.ist-aktiv {
	box-shadow: inset 0 -2px 0 0 var(--accent);
}

/* --------------------------------------------------------------------------
   2. Das Raster
   `auto-fill` statt gezaehlter Spalten: die Spaltenzahl richtet sich
   damit von selbst nach der Breite des INHALTS, nicht nach der des
   Fensters — die Leiste ist von 320 bis 520 px verstellbar und in der
   Variante «fokus» eingeklappt (docs/DESIGN.md §8), und eine
   Fenster-Media-Query saehe davon nichts.

   `min(18rem, 100%)` statt `18rem`: unter 288 px Inhaltsbreite (Handy
   mit eingeblendeter Leiste) waere eine starre Mindestspur breiter als
   das Feld und die Seite liefe waagrecht ueber (docs/DESIGN.md §7,
   «kein waagrechter Ueberlauf»).

   `align-items: start`: Kacheln einer Reihe beginnen oben buendig und
   duerfen verschieden hoch sein — eine Kachel ohne Bild ist kuerzer,
   und das ist die Wahrheit ueber sie, nicht ein Fehler.
   -------------------------------------------------------------------------- */

.simkacheln {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
	align-items: start;
	gap: var(--raum-5); /* 24 px */
	margin: var(--raum-5) 0 0;
	padding: 0;
	list-style: none;
}

/* --------------------------------------------------------------------------
   3. Die Kachel
   Eine Spalte ohne Flaeche, ohne Rahmen, ohne Radius, ohne Polster.
   `position: relative` traegt nur die Klickflaeche des Knopfes (§5).
   -------------------------------------------------------------------------- */

.simkachel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--raum-2);
	min-width: 0;
}

/* Das Bild im Seitenverhaeltnis 16:10. Es ist das einzige Element der
   Kachel mit einer Ecke — die kleine (--radius-sm), nicht die grosse
   der Dialoge. */
.simkachel-bild {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top center;
	border-radius: var(--radius-sm);
	margin-bottom: var(--raum-1);
}

/* --------------------------------------------------------------------------
   4. Die Zeilen der Kachel
   -------------------------------------------------------------------------- */

.simkachel-titel {
	margin: 0;
	font-size: var(--t-1);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.008em;
	color: var(--text);
	overflow-wrap: anywhere;
}

/* Drei Zeilen, dann bricht der Satz ab. Die Auslassung entsteht beim
   Zeichnen, nicht im Markup: im DOM steht der ganze Satz. */
.simkachel-beschrieb {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--t-0);
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.simkachel-autor {
	margin: 0;
	color: var(--text-faint);
	font-size: var(--t--1);
	line-height: 1.4;
}

.simkachel-tags {
	margin: 0;
	color: var(--text-faint);
	font-size: var(--t--2);
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   5. Die Handlung
   Ein Wort, ein Knopf, eine Kachel. Der Knopf ist leise (kein
   gefuellter Primaerknopf — docs/DESIGN.md §6 «Hoechstens ein primaerer
   Knopf je Ansicht»), und seine ::after-Flaeche legt sich ueber die
   ganze Kachel: sichtbar ist der Knopf, anklickbar ist alles.

   Der Knopf traegt sein Polster nach innen; damit sein Wort auf
   derselben Kante steht wie Titel und Beschrieb, zieht ihn ein
   negativer Rand um genau dieses Polster zurueck. `--einzug` haelt
   beide Werte zusammen, damit sie nicht auseinanderlaufen koennen.
   -------------------------------------------------------------------------- */

.simkachel-knopf {
	--einzug: var(--raum-3);
	align-self: start;
	margin-top: var(--raum-1);
	margin-inline-start: calc(-1 * var(--einzug));
	padding-inline: var(--einzug);
	text-decoration: none;
}

.simkachel-knopf::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-sm);
}

/* Die ganze Kachel antwortet auf den Zeiger: der Titel nimmt die
   Linkfarbe an, der Knopf seine leise Flaeche (aus app.css). */
.simkachel:hover .simkachel-titel,
.simkachel:focus-within .simkachel-titel {
	color: var(--link);
}

/* Die Tastatur sieht die ganze Kachel, nicht nur das Wort: der Ring
   liegt auf der Klickflaeche, in Staerke und Farbe wie der Ring aus
   app.css. */
.simkachel-knopf:focus-visible {
	outline: none;
}

.simkachel-knopf:focus-visible::after {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   6. Look «Karte»
   Der eine Look, der Flaechen statt Linien setzt (docs/DESIGN.md §8.1).
   Dort bekommt die Kachel dieselbe Flaeche wie jede Listengruppe —
   gleiche Tokens, gleiche Werte wie in assets/css/looks/karte.css; die
   Look-Datei bleibt unangetastet. Das Bild fuellt die Flaeche bis an
   ihre Innenkante und rundet sich mit ihr.
   -------------------------------------------------------------------------- */

[data-look="karte"] .simkachel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--raum-3);
}

/* karte.css setzt das Polster aller Knoepfe auf --raum-5; der negative
   Rand muss mitgehen, sonst steht das Wort eingerueckt. */
[data-look="karte"] .simkachel-knopf {
	--einzug: var(--raum-5);
}