/* =====================================================================
   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;
}

/* ---------------------------------------------------------------------
   DAS FENSTER BEIM EINSTELLEN (22.09.2026)
   ---------------------------------------------------------------------
   Zwei Datumsfelder nebeneinander, solange Platz ist. `1fr 1fr` waere
   hier falsch: Ein Datumsfeld hat eine natuerliche Breite (es zeigt
   immer TT.MM.JJJJ und daneben das Kalendersymbol), und auf 400 px
   ergaeben zwei Spalten zwei zu enge. `auto-fit` mit einer Mindest-
   breite bricht genau dann um, wenn es noetig ist -- gemessen, nicht
   an einer Zahl von gestern geraten.
   --------------------------------------------------------------------- */
.m-neu__fenster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.m-neu__fenster-feld { min-width: 0; }

.m-neu input[type="date"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  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: .92rem;
}

/* Das Kalendersymbol kommt vom Browser und ist dunkel -- auf dunklem
   Grund unsichtbar. `invert` dreht es um, ohne ein eigenes Bild
   mitzuliefern, das bei jedem Browser anders sitzen wuerde. */
.m-neu input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .62;
  cursor: pointer;
}
.m-neu input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.m-neu__fenster-satz { margin: 8px 0 14px; }

/* ---------------------------------------------------------------------
   DIE KATEGORIELEISTE (22.09.2026)
   ---------------------------------------------------------------------
   Die Knoepfe selbst sind `.schritt` aus gate.css -- Groesse, Rand,
   Fokusring und der gedrueckte Auftritt kommen von dort. Hier steht
   nur, was diese Leiste zusaetzlich hat: die Zahl daneben.
   --------------------------------------------------------------------- */
.m-kat__knopf { display: inline-flex; align-items: center; gap: 7px; }

.m-kat__zahl {
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-leise);
}
.m-kat__knopf[aria-pressed="true"] .m-kat__zahl { color: inherit; }

/* EINE LEERE KATEGORIE WIRD GRAU, NICHT VERSTECKT. Wer "Abgelaufen"
   sucht und den Knopf nicht findet, weiss nicht, ob es nichts gibt
   oder ob er ihn uebersieht. Eine 0 ist eine Antwort.

   Nicht `disabled`: Ein leerer Filter bleibt anklickbar, sonst kaeme
   man aus ihm auch nicht wieder heraus, wenn das letzte Stueck darin
   gerade jemand genommen hat. */
.m-kat__knopf[data-leer="ja"]:not([aria-pressed="true"]) { opacity: .55; }

/* ---------------------------------------------------------------------
   VON WANN BIS WANN, AUF DER KARTE
   ---------------------------------------------------------------------
   Der Zustand traegt die Farbe, der Zeitraum den Text. Gemessen auf
   der Kartenflaeche (rgba(9,13,22,.89) zu 94 %) ueber dem hellsten
   Punkt der Buehne: 7,8 / 7,4 / 6,5 / 5,7 zu 1 -- alle deutlich ueber
   den geforderten 4,5.
   --------------------------------------------------------------------- */
.m-karte__zeit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 8px 0 0;
  font-size: .82rem;
  color: var(--text-leise);
}

.m-karte__zeit-marke {
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--zustandsfarbe) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--zustandsfarbe) 12%, transparent);
  color: var(--zustandsfarbe);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.m-karte__zeit                            { --zustandsfarbe: var(--k-neutral); }
.m-karte__zeit[data-zustand="frei"]       { --zustandsfarbe: var(--k-gut); }
.m-karte__zeit[data-zustand="spaeter"]    { --zustandsfarbe: var(--akzent); }
.m-karte__zeit[data-zustand="abgelaufen"] { --zustandsfarbe: var(--k-warn); }
.m-karte__zeit[data-zustand="benutzt"]    { --zustandsfarbe: var(--k-neutral); }

/* ---------------------------------------------------------------------
   BEARBEITEN UND ENTFERNEN (22.09.2026)
   ---------------------------------------------------------------------
   Filipe: "will ich dass die rechte und linke hand es auch bearbeiten
   und loeschen koennen."

   Die zwei Knoepfe stehen UNTER dem Nehmen-Knopf und sind leise
   (`.knopf-still`). Wer auf diese Seite kommt, will etwas holen --
   verwalten tun zwei oder drei Leute. Gleich laute Knoepfe machten aus
   jeder Karte eine Entscheidung mit drei Ausgaengen.
   --------------------------------------------------------------------- */
.m-karte__verwalten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
}

/* ---------------------------------------------------------------------
   DAS FORMULAR IN DER KARTE
   ---------------------------------------------------------------------
   Kein Kasten vor der Seite: Der bisherige Text muss sichtbar sein,
   waehrend man ihn aendert, und daneben soll stehen, welches Stueck
   gemeint ist. Ein Dialog haette beides verdeckt.
   --------------------------------------------------------------------- */
.m-bearb {
  margin: 10px 0 0;
  padding: 12px;
  border: 1px solid var(--rand-hell);
  border-radius: var(--radius-klein, 10px);
  background: color-mix(in srgb, var(--tinte) 88%, #ffffff 12%);
}

.m-bearb__feld { margin-bottom: 10px; }

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

.m-bearb input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .62;
  cursor: pointer;
}

.m-bearb__hinweis {
  margin: 0 0 10px;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--text-leise);
}

/* LEER HEISST UNSICHTBAR -- kein leerer Absatz, der die Knoepfe
   verschiebt, sobald ein Fehler kommt. `:empty` braucht dafuer keine
   zweite Klasse, die jemand vergessen kann. */
.m-bearb__fehler {
  margin: 0 0 10px;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--k-warn);
}
.m-bearb__fehler:empty { display: none; }

.m-bearb__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

/* ---------------------------------------------------------------------
   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; }
  /* Ohne Farben traegt der Rand die Unterscheidung -- die
     Zustandsmarke waere sonst ein Wort ohne Umriss. */
  .m-karte__zeit-marke { border: 1px solid CanvasText; }
  .m-kat__knopf[aria-pressed="true"] { border: 2px solid Highlight; }
  .m-kat__knopf[data-leer="ja"] { opacity: 1; }
  .m-bearb { border: 1px solid CanvasText; }
  .m-karte__verwalten { border-top: 1px solid CanvasText; }
}

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