Kacheln werden ein Raster -- dritter Anlauf, diesmal die FORM

Filipe zweimal davor: "das ist genau das gleiche" und "sorry aber ich
glaub du verstehst nicht was ich meine". Er hatte beide Male recht, und
ich weiss jetzt warum: Ich habe zweimal die OBERFLAECHE geaendert
(Mattglas, dann Leuchtschiene) und beide Male die FORM gelassen -- eine
breite Zeile, Zeichen links, Text daneben. Wer eine Zeile umlackiert,
bekommt eine lackierte Zeile.

AUS DREI BREITEN ZEILEN WIRD EIN RASTER AUS SECHS KARTEN.
Hochformat, Zeichen oben, Name unten, Schiene von links nach OBEN
gewandert (an einer hochkanten Karte wuerde ein Lichtbalken links sie
optisch halbieren). Die Zahl steht als Marke oben rechts statt in der
Namenszeile, der Pfeil unten rechts. `data-gross="ja"` behaelt das
Querformat -- so hebt sich die Kachel WIRKLICH ab, statt nur breiter zu
sein. Bei 1380 px passen jetzt sechs Karten nebeneinander statt drei.

BILDER: Kontrast 1,08 -> 1,14, Saettigung 1,10 -> 1,26, Glanz 0,34 ->
0,46, dazu ein neuer Durchgang "Tiefe" -- eine S-Kurve auf der
Helligkeit. Das ist NICHT mehr Kontrast: Kontrast dehnt alles gleich und
frisst Zeichnung in den Lichtern; die S-Kurve laesst die Mitte in Ruhe
(dort sitzt das Motiv) und arbeitet nur an den Enden. Gerechnet auf dem
Maximum der drei Kanaele, nicht je Kanal -- sonst wandert der Farbton
(ein dunkles Rot wuerde braun).

ANMELDESEITE: "Dogfather Universe" -> "SpicyMedia x DogFather" (das
Kreuz kleiner und leiser, sonst liest man drei Namen statt zwei), und
der Satz darunter nennt jetzt Manager, Scouts und Creator von Spicy
Media -- ohne DogFather.

ZAHLEN nur noch fuer DogFather. Beides zusammen, nicht nur die Kachel:
Eine Kachel ist ein Weg, keine Schranke -- wer die Adresse kennt, waere
weiterhin hineingekommen. Also auch in der Rechteliste auf ["admin"].

AUFGERAEUMT, weil pruef-struktur zu Recht rot wurde: start.css lief mit
202 KB in die 200-KB-Grenze. Der Grund war echter Ballast -- die Datei
trug DREI Generationen Kacheldesign uebereinander. Die ueberholten
Regeln sind weg (nur was der neue Entwurf nicht selbst setzt, bleibt),
der Entwurfstext dazu auf seine Lehre gekuerzt. 198,7 KB, und wichtiger:
nur noch EINE Stelle, an der eine Kachel beschrieben wird.

Gruen: buehne (38), css-klassen (15), leistung (50), start-ansicht (136),
handy (59), breiten (23), struktur (32).

NOCH OFFEN aus derselben Nachricht: die neue Rolle "Spicy Media" und die
Aenderung, dass Manager Creator anlegen duerfen. Beides greift in die
Rechte und in die CHECK-Regel der Personentabelle ein -- das kommt als
eigener Schritt mit Sicherung und eigener Pruefung, nicht nebenbei.

Co-Authored-By: Claude Opus 5 <[email protected]>

workspace/assets/css/start.css

@@ -4004,93 +4004,41 @@ body[data-fremde-sicht="ja"]::after {
 }
 
 /* =====================================================================
-   LEUCHTKASTEN — der zweite Anlauf, und diesmal ein anderes Ding
-   (07.09.2026, abends)
+   ZWEITER ANLAUF: MATTGLAS RAUS (07.09.2026)
 
-   Filipe zum ersten Anlauf: "das ist genau das gleiche ... ich wollte
-   eine krasse aenderung ... es muss einzigartig sein und der seite
-   angepasst." Und zum Hintergrund: "die sollen nicht durch die kacheln
-   gehen ... vielleicht ganz ganz ganz leicht durch zu sehen sein."
+   Die Kacheln lagen hinter `backdrop-filter: blur(16px)`. Auf einer
+   Seite mit siebzehn Kacheln heisst das: Der groesste Teil des
+   Hintergrundbildes ist verwaschen -- man sieht ein unscharfes Bild und
+   haelt das Bild fuer unscharf. Genau das hat Filipe gemeldet ("sehen
+   die sogar leicht verschwommen aus"), und ich hatte es selbst
+   eingebaut, mit der Begruendung, Kachel und Bild sollten
+   "zusammengehoeren". Sie gehoeren auch zusammen, wenn die Kachel ein
+   eigener Gegenstand ist; Mattglas war die falsche Antwort auf die
+   richtige Frage.
 
-   Er hat in beidem recht, und der zweite Satz erklaert den ersten.
-
-   DAS MATTGLAS WAR DER FEHLER. 16 px Weichzeichner hinter jeder Kachel
-   heisst: Unter jeder Kachel liegt eine verschwommene Fläche. Auf einer
-   Seite mit siebzehn Kacheln ist damit der grösste Teil des Bildes
-   verwaschen -- man sieht ein unscharfes Bild und hält das Bild für
-   unscharf. Genau das hat er gemeldet ("sehen die sogar leicht
-   verschwommen aus"), und ich hatte es selbst eingebaut, mit der
-   Begründung, Kachel und Bild sollten "zusammengehören". Sie gehören
-   auch zusammen, wenn die Kachel ein eigener Gegenstand ist -- Mattglas
-   war die falsche Antwort auf die richtige Frage.
-
-   WAS JETZT DA STEHT, IST EIN ANDERES DING, KEIN AUFGEHÜBSCHTES:
-
-     Die Kachel ist eine dunkle Platte, die in einer LEUCHTSCHIENE
-     steckt. Die Schiene ist die Farbe der Kategorie. Sie leuchtet nicht
-     nur am Rand -- sie WIRFT LICHT in die Platte hinein, das nach
-     rechts ausläuft. Deshalb ist die linke Kante scharf (dort sitzt sie
-     in der Schiene) und die rechte rund (dort ist sie frei).
-
-   Das ist der Unterschied zu vorher: Die Farbe war ein Strich AN der
-   Kachel; jetzt ist sie die Lichtquelle DER Kachel. Jede Kategorie
-   leuchtet in ihrem eigenen Licht, und man erkennt sie aus drei Metern
-   Entfernung, ohne ein Wort zu lesen.
-
-   Dazu drei Dinge, die eine Fläche zu einem Gegenstand machen und die
-   bleiben, weil sie richtig waren: Gewicht (zwei Schatten), Material-
-   stärke (Licht oben, Schatten unten) und Körnung. Neu dazu kommt der
-   GLANZ, der beim Überfahren über die Platte WANDERT -- so verhält sich
-   eine lackierte Oberfläche, wenn man den Kopf bewegt.
-
-   DURCHSICHT: 6 Prozent, und SCHARF. Genau das, worum er gebeten hat --
-   das Bild schimmert durch, ohne dass irgendwo etwas verwischt wird.
+   Seitdem: deckende Platte mit 6 % Durchsicht, und die SCHARF. Die
+   Form, die daraus wurde, steht weiter unten unter MODULKARTEN -- der
+   Entwurf von hier (Querformat mit Schiene links) hat nur einen
+   Nachmittag gehalten und ist dort vollstaendig ersetzt.
    ===================================================================== */
-.kachel {
-  /* Links scharf, rechts rund. Das ist die Silhouette, an der man diese
-     Oberfläche wiedererkennt -- und der einzige Teil des Entwurfs, der
-     schon aus zehn Metern wirkt. */
-  border-radius: 4px 20px 20px 4px;
 
-  /* DREI SCHICHTEN, von oben nach unten:
-       1. das Licht der Schiene, das nach rechts ausläuft
-       2. die Platte selbst, leicht von oben links beleuchtet
-       3. 6 % Durchsicht (die Farbe ist nicht ganz deckend)
-     Kein backdrop-filter mehr -- nichts wird verwischt. */
-  background:
-    /* STEILER ABFALL, nicht flächig. Beim ersten Anlauf reichte das
-       Licht bis 68 % -- damit war die Kachel eingefärbt statt
-       beleuchtet, und eingefärbt sieht billig aus. Licht nimmt mit dem
-       Quadrat der Entfernung ab; die Stufen bilden das nach: satt an
-       der Schiene, nach einem Fünftel schon deutlich weniger, nach
-       einem Drittel nur noch ein Hauch. Das ist der Unterschied
-       zwischen "farbige Kachel" und "Kachel, auf die Licht fällt". */
-    linear-gradient(90deg,
-      color-mix(in srgb, var(--ton) 40%, transparent) 0%,
-      color-mix(in srgb, var(--ton) 15%, transparent) 9%,
-      color-mix(in srgb, var(--ton) 5%, transparent) 22%,
-      color-mix(in srgb, var(--ton) 1.5%, transparent) 38%,
-      transparent 52%),
-    linear-gradient(163deg,
-      rgba(23, 31, 45, .95) 0%,
-      rgba(11, 15, 24, .95) 58%,
-      rgba(8, 11, 18, .95) 100%);
+/* WAS VON DIESEM ENTWURF BLEIBT (aufgeraeumt 07.09.2026).
+
+   Form, Flaeche, Schienenrichtung und Schatten stehen jetzt weiter
+   unten im Abschnitt MODULKARTEN -- die Kachel ist vom Quer- ins
+   Hochformat gewandert, und dabei hat sich jede einzelne dieser
+   Angaben geaendert.
+
+   Die alten Regeln hier stehen zu lassen waere doppelt schaedlich
+   gewesen: Sie kosten Bytes auf jeder Seite (die Datei lief in die
+   200-KB-Grenze von pruef-struktur), und vor allem waeren es ZWEI
+   Stellen, an denen dieselbe Kachel beschrieben wird. Genau daran
+   scheitert der Naechste, der etwas aendert: Er trifft die falsche.
+
+   Es bleibt, was der neue Entwurf NICHT selbst setzt. */
+.kachel {
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
-
-  /* MATERIALSTÄRKE: Licht oben, Schatten unten -- beide innen.
-     GEWICHT: zwei Schatten, ein enger dunkler direkt darunter und ein
-     weiter weicher. Ein einzelner Schatten sieht immer nach Aufkleber
-     aus; erst die Kombination liest sich als "liegt auf etwas".
-     Dazu innen links ein farbiger Saum: das Licht der Schiene, das auf
-     die Schnittkante der Platte fällt. */
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, .10),
-    inset 0 -1px 0 rgba(0, 0, 0, .50),
-    inset 2px 0 0 -1px color-mix(in srgb, var(--ton) 30%, transparent),
-    0 2px 5px -2px rgba(0, 0, 0, .55),
-    0 16px 34px -20px rgba(0, 0, 0, .88);
-
   border-color: color-mix(in srgb, var(--ton) 18%, rgba(150, 186, 220, .13));
   transition: border-color var(--tempo), transform var(--tempo), box-shadow var(--tempo);
 }
@@ -4140,23 +4088,16 @@ body[data-fremde-sicht="ja"]::after {
   transition: opacity var(--tempo), background-position .55s cubic-bezier(.35, 0, .2, 1);
 }
 
-/* DIE LEUCHTSCHIENE. Kein Strich am Rand mehr, sondern eine Lichtquelle:
-   ein heller Kern, darüber ein Schein, der nach beiden Seiten austritt.
-   Oben am hellsten -- Leuchtstoff altert nach unten, und genau diese
-   Ungleichmäßigkeit macht den Unterschied zu einem gemalten Balken. */
+/* Die Leuchtschiene und der wandernde Glanz stehen im Abschnitt
+   MODULKARTEN weiter unten -- dort liegt die Schiene OBEN statt links,
+   weil die Kachel hochkant ist. Hier bleibt nur, was der neue Entwurf
+   nicht selbst setzt: die Grunddeckkraft des Glanzes und seine
+   Ueberblendung. */
+.kachel::after {
+  opacity: .58;
+  transition: opacity var(--tempo), background-position .55s cubic-bezier(.35, 0, .2, 1);
+}
 .kachel::before {
-  width: 4px;
-  border-radius: 4px 0 0 4px;
-  background:
-    linear-gradient(180deg,
-      color-mix(in srgb, var(--ton) 55%, #fff) 0%,
-      var(--ton) 26%,
-      color-mix(in srgb, var(--ton) 82%, transparent) 72%,
-      color-mix(in srgb, var(--ton) 46%, transparent) 100%);
-  box-shadow:
-    0 0 9px 0 color-mix(in srgb, var(--ton) 55%, transparent),
-    3px 0 20px -3px color-mix(in srgb, var(--ton) 42%, transparent);
-  opacity: .92;
   transition: opacity var(--tempo), width var(--tempo), box-shadow var(--tempo);
 }
 
@@ -4519,3 +4460,257 @@ body[data-fremde-sicht="ja"]::after {
   .uhr { background: Canvas; box-shadow: none; border: 1px solid CanvasText; }
   .uhr__skala, .uhr__glas { display: none; }
 }
+
+
+/* =====================================================================
+   MODULKARTEN — die Kacheln werden ein Raster, keine Liste
+   (07.09.2026, dritter Anlauf)
+
+   Filipe zum zweiten Anlauf: "sorry aber ich glaub du verstehst nicht
+   was ich meine, ich sag ja ich will eine komplette änderung von den
+   kacheln, viel übersichtlicher ... es soll ganz anders aussehen wie
+   jetzt."
+
+   ---------------------------------------------------------------------
+   ER HAT RECHT, UND ICH WEISS JETZT WARUM
+
+   Zweimal habe ich die OBERFLÄCHE geändert -- Mattglas, dann
+   Leuchtschiene -- und beide Male blieb die FORM gleich: eine breite
+   Zeile, Zeichen links, Text daneben, Pfeil rechts. Drei davon passen
+   nebeneinander, siebzehn ergeben sechs Reihen. Wer eine Zeile
+   umlackiert, bekommt eine lackierte Zeile.
+
+   Was sich ändern musste, ist die Form:
+
+       AUS DREI BREITEN ZEILEN WIRD EIN RASTER AUS SECHS KARTEN.
+
+   Das ist der eigentliche Punkt hinter "übersichtlicher". Eine breite
+   Zeile zwingt das Auge, von links nach rechts zu LESEN -- siebzehnmal.
+   Eine kompakte Karte erkennt man an ihrer Form und ihrem Zeichen,
+   ohne ein Wort zu lesen; das Auge springt statt zu wandern. Bei
+   1380 px passen jetzt sechs Karten nebeneinander statt drei: Der
+   ganze Arbeitsbereich steht auf einem Bildschirm, ohne zu scrollen.
+
+   ---------------------------------------------------------------------
+   WAS SICH IM EINZELNEN ÄNDERT
+
+     FORM       Hochformat statt Querformat. Zeichen oben, Name unten --
+                die Leserichtung eines Menschen, der etwas SUCHT (erst
+                das Bild, dann der Name), nicht eines, der liest.
+
+     SCHIENE    Sie wandert von links nach OBEN. An einer hochkanten
+                Karte ist die lange Seite senkrecht; ein Lichtbalken
+                dort würde die Karte optisch halbieren. Oben liegt er
+                wie eine beschriftete Kante an einem Gerät.
+
+     ZEICHEN    Größer und in einer eigenen, beleuchteten Mulde. Es ist
+                jetzt das erste, was man sieht, und trägt deshalb mehr
+                Gewicht als vorher.
+
+     ZAHL       Nach oben rechts, als eigene Marke. Vorher stand sie in
+                derselben Zeile wie der Name und hat ihn gekürzt.
+
+     WASSER-    Größer und weiter unten -- sie füllt jetzt die untere
+     ZEICHEN    Hälfte der Karte und gibt jeder Kachel eine eigene
+                Silhouette. Bei sechs Karten nebeneinander ist genau das
+                der Unterschied zwischen "Raster" und "Sammlung".
+
+     GROSSE     `data-gross="ja"` nimmt zwei Spalten und bekommt das
+     KACHEL     Querformat von früher -- so hebt sie sich WIRKLICH ab,
+                statt nur breiter zu sein.
+
+   Material, Farben und Verhalten bleiben: beleuchtete Platte, Körnung,
+   Anheben statt Aufleuchten, jede Kategorie in ihrer Farbe. Das war
+   nicht das Problem.
+   ===================================================================== */
+
+.kacheln {
+  /* 214 px ist gemessen, nicht geraten: Bei 1380 px Inhaltsbreite und
+     12 px Abstand ergeben sich damit genau sechs Spalten (6 x 214 +
+     5 x 12 = 1344). Darunter greift auto-fill von selbst auf fünf,
+     vier, drei -- ohne eine einzige Umbruchschwelle, die man beim
+     nächsten Element nachziehen müsste. */
+  grid-template-columns: repeat(auto-fill, minmax(min(214px, 100%), 1fr));
+  gap: 12px;
+}
+
+.kachel {
+  border-radius: 16px;
+  /* Die Schiene liegt jetzt oben -- also gehört die Lichtkante des
+     Materials mit nach oben und der farbige Saum weg von links. */
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .10),
+    inset 0 -1px 0 rgba(0, 0, 0, .50),
+    0 2px 5px -2px rgba(0, 0, 0, .55),
+    0 16px 34px -20px rgba(0, 0, 0, .88);
+  background:
+    /* Das Licht der Schiene fällt jetzt von OBEN in die Platte. */
+    linear-gradient(180deg,
+      color-mix(in srgb, var(--ton) 30%, transparent) 0%,
+      color-mix(in srgb, var(--ton) 11%, transparent) 12%,
+      color-mix(in srgb, var(--ton) 3%, transparent) 30%,
+      transparent 58%),
+    linear-gradient(163deg,
+      rgba(23, 31, 45, .95) 0%,
+      rgba(11, 15, 24, .95) 58%,
+      rgba(8, 11, 18, .95) 100%);
+}
+
+/* DIE SCHIENE OBEN. Volle Breite, hell in der Mitte, zu den Ecken
+   auslaufend -- so sieht eine beleuchtete Kante aus, wenn die Lampe
+   dahinter mittig sitzt. Ein gleichmäßiger Balken sähe aufgeklebt aus. */
+.kachel::before {
+  left: 0; right: 0; top: 0; bottom: auto;
+  width: auto; height: 3px;
+  border-radius: 16px 16px 0 0;
+  background: linear-gradient(90deg,
+    color-mix(in srgb, var(--ton) 30%, transparent) 0%,
+    color-mix(in srgb, var(--ton) 55%, #fff) 34%,
+    var(--ton) 62%,
+    color-mix(in srgb, var(--ton) 34%, transparent) 100%);
+  box-shadow:
+    0 0 9px 0 color-mix(in srgb, var(--ton) 45%, transparent),
+    0 3px 20px -3px color-mix(in srgb, var(--ton) 38%, transparent);
+  opacity: .85;
+}
+.kachel:hover::before {
+  opacity: 1;
+  box-shadow:
+    0 0 14px 0 color-mix(in srgb, var(--ton) 70%, transparent),
+    0 5px 32px -3px color-mix(in srgb, var(--ton) 55%, transparent);
+}
+
+/* Der Glanz zieht jetzt von oben links nach unten rechts -- an einer
+   hochkanten Fläche ist das die Richtung, in der Licht fällt. */
+.kachel::after {
+  background:
+    linear-gradient(148deg,
+      transparent 24%,
+      rgba(255, 255, 255, .05) 38%,
+      rgba(255, 255, 255, .10) 46%,
+      rgba(255, 255, 255, .03) 54%,
+      transparent 70%),
+    radial-gradient(130% 120% at var(--mx) var(--my),
+      color-mix(in srgb, var(--ton) 24%, transparent), transparent 62%);
+  background-size: 100% 240%, 100% 100%;
+  background-position: 0 -30%, 0 0;
+}
+.kachel:hover::after { background-position: 0 130%, 0 0; }
+
+/* ---------- Der Aufbau der Karte ------------------------------------- */
+.kachel__link {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0;
+  padding: 15px 15px 14px;
+  /* Feste Mindesthöhe, damit alle Karten einer Reihe gleich hoch sind,
+     auch wenn eine Unterzeile fehlt. Ohne sie entsteht genau der
+     zerfranste Rand, den "übersichtlich" ausschließt. */
+  min-height: 152px;
+}
+
+.kachel__zeichen {
+  width: 46px; height: 46px;
+  margin: 0 0 auto;          /* schiebt den Text nach unten */
+  border-radius: 14px;
+}
+.kachel__svg { width: 25px; height: 25px; }
+
+.kachel__text {
+  width: 100%;
+  margin-top: 14px;
+  gap: 2px;
+}
+.kachel__name {
+  font-size: 1rem; font-weight: 700; letter-spacing: -.012em;
+  /* Zwei Zeilen erlaubt: "Calls & Protokolle" passt in einer Spalte von
+     214 px nicht in eine Zeile, und ein abgeschnittener Name ist auf
+     einer Übersichtsseite das Gegenteil von übersichtlich. */
+  white-space: normal;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.kachel__unter {
+  font-size: .765rem; line-height: 1.35;
+  color: var(--text-leise);
+  white-space: normal;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Die Zahl als Marke oben rechts -- neben dem Zeichen, nicht im Text.
+   Vorher stand sie in derselben Zeile wie der Name und hat ihn gekürzt. */
+.kachel__zahl {
+  position: absolute; top: 13px; right: 13px;
+  margin: 0; z-index: 2;
+  min-width: 28px; padding: 4px 9px;
+  font-size: .84rem;
+}
+/* Der Pfeil rückt in die untere rechte Ecke: Er ist die leiseste
+   Angabe der Karte und darf keinem Text im Weg stehen. */
+.kachel__pfeil {
+  position: absolute; right: 14px; bottom: 13px;
+  margin: 0; z-index: 2;
+  font-size: .95rem; line-height: 1;
+  color: color-mix(in srgb, var(--ton) 55%, var(--text-still));
+  transition: transform var(--tempo), color var(--tempo);
+}
+.kachel:hover .kachel__pfeil {
+  transform: translateX(3px);
+  color: color-mix(in srgb, var(--ton) 80%, #ffffff);
+}
+/* Das Merk-Zeichen (angepinnt) sitzt links neben der Zahl. */
+.kachel__merk { position: absolute; top: 15px; right: 52px; margin: 0; z-index: 2; }
+
+/* Das Wasserzeichen füllt die untere Hälfte -- es ist bei sechs Karten
+   nebeneinander das, was jede von ihnen unterscheidbar macht. */
+.kachel__wasserzeichen {
+  right: -20px; bottom: -20px;
+  width: 118px; height: 118px;
+  opacity: .085;
+}
+.kachel:hover .kachel__wasserzeichen {
+  opacity: .15;
+  transform: rotate(-8deg) translate(-3px, -3px) scale(1.05);
+}
+
+/* ---------- Die große Kachel ----------------------------------------- */
+/* Sie behält das Querformat von früher. Dadurch hebt sie sich WIRKLICH
+   ab: nicht "dieselbe Karte, nur breiter", sondern eine andere Form. */
+.kachel[data-gross="ja"] {
+  grid-column: span 2;
+}
+.kachel[data-gross="ja"] .kachel__link {
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+  padding: 18px 18px 18px 20px;
+  min-height: 152px;
+}
+.kachel[data-gross="ja"] .kachel__zeichen {
+  width: 62px; height: 62px; margin: 0; border-radius: 18px;
+}
+.kachel[data-gross="ja"] .kachel__svg { width: 32px; height: 32px; }
+.kachel[data-gross="ja"] .kachel__text { margin-top: 0; }
+.kachel[data-gross="ja"] .kachel__name { font-size: 1.22rem; -webkit-line-clamp: 1; }
+.kachel[data-gross="ja"] .kachel__unter { font-size: .84rem; -webkit-line-clamp: 1; }
+.kachel[data-gross="ja"] .kachel__wasserzeichen {
+  width: 158px; height: 158px; right: -24px; bottom: -30px;
+}
+
+@media (max-width: 560px) {
+  /* Auf dem Handy zwei Spalten. Eine einzige wäre wieder eine Liste --
+     und genau davon kommen wir gerade weg. Zwei Karten je Reihe passen
+     bei 390 px (2 x 172 + 12), und der Name bleibt zweizeilig lesbar. */
+  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+  .kachel__link { min-height: 138px; padding: 13px 13px 12px; }
+  .kachel[data-gross="ja"] { grid-column: span 2; }
+  .kachel[data-gross="ja"] .kachel__link { flex-direction: row; min-height: 96px; }
+  .kachel[data-gross="ja"] .kachel__zeichen { width: 48px; height: 48px; }
+  .kachel__zeichen { width: 40px; height: 40px; border-radius: 12px; }
+  .kachel__svg { width: 22px; height: 22px; }
+  .kachel__name { font-size: .93rem; }
+  .kachel__unter { font-size: .72rem; }
+  .kachel__wasserzeichen { width: 96px; height: 96px; }
+}