dogfather-universe/workspace/assets/css/material.css

/* =====================================================================
   material.css — Bilder und Videos zum Posten
   =====================================================================

   Auftrag vom 22.09.2026.

   DIE VORSCHAU IST DIE HAUPTSACHE. Wer entscheiden soll, ob er etwas
   postet, muss es sehen -- deshalb nimmt das Bild den groesseren Teil
   der Karte, und der Text steht darunter statt daneben.

   WAS VERGEBEN IST, TRITT ZURUECK -- aber verschwindet nicht. Es ist
   der Beleg dafuer, dass nichts zweimal gepostet wurde; ein leerer
   Platz waere die schlechtere Auskunft.

   Alle Farben kommen aus den Hausvariablen. `--ton` traegt die Seite
   (data-ton="42" am body), also faerbt sich das Neue automatisch mit,
   wenn die Kachelfarbe jemals wechselt.
   ===================================================================== */

/* ---------------------------------------------------------------------
   BEREITSTELLEN
   --------------------------------------------------------------------- */
.m-neu {
  margin: 0 0 26px;
  padding: 16px 18px;
  border: 1px solid var(--rand);
  border-left: 3px solid var(--ton, var(--akzent));
  border-radius: var(--radius-klein, 12px);
  background: color-mix(in srgb, var(--flaeche) 92%, transparent);
}

.m-neu__titel { margin: 0; font-size: 1rem; }

.m-neu__satz {
  margin: 4px 0 14px;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--text-leise);
  max-width: 62ch;
}

.m-neu__zeile { margin-bottom: 12px; }

.m-neu input[type="file"] {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--rand-hell);
  border-radius: var(--radius-klein, 10px);
  background: color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
}

.m-neu textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 60px;
  padding: 9px 11px;
  border: 1px solid var(--rand-hell);
  border-radius: var(--radius-klein, 10px);
  background: color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
  color: var(--text);
  font: inherit;
  font-size: .92rem;
  line-height: 1.5;
  resize: vertical;
}

.m-neu__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.m-neu__stand {
  font-size: .86rem;
  color: var(--text-leise);
}

/* ---------------------------------------------------------------------
   DIE LISTEN
   --------------------------------------------------------------------- */
.m-liste-block { margin: 0 0 30px; }

.m-kopf { margin-bottom: 12px; }

.m-kopf__titel { margin: 0; font-size: 1.05rem; }

.m-kopf__satz {
  margin: 3px 0 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text-leise);
}

/* DIE SPALTENBREITE WÄCHST MIT DEM BILDSCHIRM — und das ist der Punkt.

   Erster Entwurf war `minmax(min(100%, 240px), 1fr)`. Am Handy
   (412 px, also 380 px Inhalt) passen dann 240 + 14 + 240 = 494 px
   nicht nebeneinander, und es blieb bei EINER Spalte: gemessen
   3062 px Seitenhöhe für fünf Stücke. Bei zwanzig wären es zwölf
   Bildschirmlängen. Filipe am 22.09.: „es ist alles so lang gezogen,
   muss ewig scrollen um alles zu sehen das ist uncool und scheisse."

   Eine feste Umbruchschwelle wäre hier wieder „eine Rechnung von
   gestern" (siehe die Kopfleiste am 06.09., zweimal an einem Tag).
   Deshalb eine Regel: Die Mindestbreite ist der GRÖSSERE von 160 px
   und 22 % der Rasterbreite. Am Handy gewinnen die 160 px → zwei
   Spalten. Am Schreibtisch gewinnen die 22 % → die Karten werden
   breiter statt zahlreicher, ohne dass irgendwo eine Zahl steht, die
   beim nächsten Gerät nicht mehr stimmt.

   `min(100%, …)` bleibt davor: Ohne das sprengt eine Spalte den
   Rahmen, sobald der Bildschirm schmaler als die Mindestbreite ist. */
.m-raster {
  display: grid;
  gap: 14px;
  /* Der Rückfall zuerst: Versteht ein Browser das `max()` in `minmax()`
     nicht, wirft er die ZWEITE Zeile weg und behält diese. Dann sind
     die Karten am Schreibtisch etwas schmaler als gedacht — aber am
     Handy stehen immer noch zwei nebeneinander, und nichts läuft über
     den Rand. Ohne diese Zeile bliebe gar keine Spaltenregel übrig. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(160px, 22%)), 1fr));
}

.m-leer {
  grid-column: 1 / -1;
  margin: 8px 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text-leise);
}

/* ---------------------------------------------------------------------
   EINE KARTE
   --------------------------------------------------------------------- */
.m-karte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein, 12px);
  background: color-mix(in srgb, var(--flaeche) 94%, transparent);
  transition: border-color var(--tempo, .18s) ease,
              transform var(--tempo, .18s) ease;
}

.m-karte:hover {
  border-color: color-mix(in srgb, var(--ton, var(--akzent)) 45%, var(--rand));
  transform: translateY(-1px);
}

/* Ein festes Seitenverhaeltnis, damit das Raster nicht springt,
   waehrend die Bilder nachladen. 4:5 ist das Hochformat, in dem die
   meisten Beitraege ohnehin gepostet werden. */
.m-karte__schau {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--tinte) 86%, #ffffff 14%);
  border-bottom: 1px solid var(--rand);
  overflow: hidden;
}

.m-karte__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.m-karte__art,
.m-karte__weg-zeichen {
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-still);
}

.m-karte__weg-zeichen { font-size: 2rem; letter-spacing: 0; }

/* DER KOERPER FUELLT DEN REST DER KARTE. Ohne `flex: 1` haette er
   genau die Hoehe seines Inhalts, und `margin-top: auto` weiter unten
   haette nichts, wovon es sich abstossen koennte. */
.m-karte__koerper {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  padding: 13px 14px 14px;
}

.m-karte__name {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
  /* Ein Dateiname kann sehr lang sein -- zwei Zeilen genuegen, damit
     die Karten gleich hoch bleiben. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.m-karte__text {
  margin: 0;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--text-leise);
}

/* HIER FLUCHTET DIE KARTE.

   Das Raster macht alle Karten einer Zeile gleich hoch -- die Knoepfe
   standen trotzdem auf drei verschiedenen Hoehen, weil der eine
   Beschreibungstext zwei Zeilen hatte, der naechste eine und der
   dritte gar keine. Gemessen am 22.09.: 1127, 1155 und 1176 px.

   `margin-top: auto` schiebt den Fuss und alles danach (Zustand,
   Knopf) an den unteren Rand. Der Name bleibt oben, der Knopf steht
   bei allen auf derselben Linie -- ohne eine Mindesthoehe zu raten,
   die beim naechsten laengeren Text wieder falsch waere. */
.m-karte__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin: 2px 0 4px;
  margin-top: auto;
}

.m-karte__marke {
  padding: 2px 9px;
  border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 40%, transparent);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ton, var(--akzent));
}

.m-karte__leise { font-size: .78rem; color: var(--text-still); }

.m-karte__stand {
  margin: 0;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--text-leise);
}

.m-karte__stand--meins { color: var(--text); font-weight: 600; }

.m-karte__meldung {
  margin: 0;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--text);
}

.m-karte .knopf { min-height: 44px; }
.m-karte a.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* ---------------------------------------------------------------------
   WAS SCHON WEG IST
   ---------------------------------------------------------------------
   Es tritt zurueck, ohne zu verschwinden: Es ist der Beleg dafuer,
   dass nichts zweimal gepostet wurde. Kein Grau-in-Grau -- der Text
   muss lesbar bleiben, sonst kann man die Namen nicht nachlesen. */
.m-raster--weg .m-karte {
  background: color-mix(in srgb, var(--flaeche) 80%, transparent);
  border-style: dashed;
  /* QUER STATT HOCH. Beim ersten Blick mit echten Augen stand hier
     ein 16:9-Feld mit einem einzigen Zeichen darin -- 273 px Hoehe
     fuer nichts, fuenfmal untereinander. Filipe am 22.09.: "es ist
     alles so lang gezogen, muss ewig scrollen um alles zu sehen".

     Das Bild ist ohnehin nicht mehr da: Der Server liefert es nach
     dem Nehmen niemandem mehr aus. Was bleibt, ist die Auskunft --
     welches Stueck, und wer es hat. Die passt in eine Zeile. */
  flex-direction: row;
  align-items: stretch;
}

.m-raster--weg .m-karte:hover { transform: none; }

.m-raster--weg .m-karte__schau {
  aspect-ratio: 1;
  flex: 0 0 58px;
  border-bottom: none;
  border-right: 1px solid var(--rand);
}

.m-raster--weg .m-karte__weg-zeichen { font-size: 1.35rem; }

.m-raster--weg .m-karte__koerper {
  gap: 4px;
  padding: 11px 13px;
  justify-content: center;
}

/* Wofuer es gedacht war, hilft nur beim Aussuchen -- und aussuchen
   kann es hier niemand mehr. Der Name und der Zustand bleiben. */
.m-raster--weg .m-karte__text { display: none; }

.m-raster--weg .m-karte__fuss { margin: 0; }

/* Breitere Spalten, weil eine Zeile laenger als hoch ist. */
.m-raster--weg {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.m-laedt {
  margin: 18px 0;
  color: var(--text-leise);
  font-size: .92rem;
}

/* ---------------------------------------------------------------------
   KONTRASTMODUS UND BEWEGUNGSARMUT
   --------------------------------------------------------------------- */
@media (forced-colors: active) {
  .m-karte,
  .m-neu { border: 1px solid CanvasText; }
  .m-raster--weg .m-karte { border-style: dashed; }
  .m-karte__marke { border: 1px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  .m-karte { transition: none; }
  .m-karte:hover { transform: none; }
}