/* ===================================================================
   SUPPORT (24.09.2026)

   Filipe: „es soll alles hoch profissionell gemacht werden aber so
   einfach wie möglich, will nichts kompliziertes oder zu viel. kurz
   und knapp und extrem geil."

   Deshalb kein eigenes Aussehen: Kästen, Knöpfe und Marken kommen aus
   start.css und module.css, so wie auf jeder anderen Seite. Hier steht
   nur, was es woanders nicht gibt — das Melde-Feld, die Bildvorschau,
   die Karte einer Meldung und das Zahlenband des Eingangs.

   Eine eigene Farbwelt hätte die Seite fremd wirken lassen. Wer im
   schlechtesten Moment etwas meldet, soll nicht zusätzlich merken,
   dass er woanders ist.
   =================================================================== */

.s-titel {
  font-size: 1.05rem; font-weight: 700; letter-spacing: .01em;
  margin: 0 0 12px;
}
.s-zahl {
  display: inline-block; margin-left: 8px; padding: 1px 9px;
  border-radius: 999px; font-size: .8rem; font-weight: 700;
  background: color-mix(in srgb, var(--akzent) 15%, transparent);
  color: var(--akzent);
}

/* ---------- Melden ------------------------------------------------- */

.s-melden {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  padding: 18px 18px 16px;
  margin-bottom: 22px;
}
/* Für die Leitung rutscht der Melde-Kasten unter den Eingang.

   NICHT ueber `order` (24.09.2026, nachgemessen): `.inhalt` ist in
   start.css ein gewoehnlicher Block, kein Flex-Behaelter -- `order`
   haette dort gar nichts getan, und die Klasse waere eine Regel
   gewesen, die aussieht, als wirke sie. Verschoben wird der Kasten
   deshalb im DOM (support.js), und dieser Abstand gilt dann. */
.s-melden--unten { margin-top: 26px; margin-bottom: 0; }

.s-feld { display: block; }
.s-feld__schild {
  display: block; margin-bottom: 6px;
  font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-still);
}
.s-melden textarea {
  width: 100%; box-sizing: border-box;
  padding: 11px 12px;
  font: inherit; font-size: .95rem; line-height: 1.5;
  color: var(--text);
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  resize: vertical; min-height: 96px;
}
.s-melden textarea:focus {
  outline: 2px solid var(--akzent); outline-offset: 1px;
  border-color: transparent;
}

.s-bild {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px;
}
.s-bild__name { font-size: .8rem; color: var(--text-still); }

.s-vorschau { margin-top: 12px; }
.s-vorschau img {
  display: block; max-width: 100%; max-height: 260px;
  width: auto; height: auto;
  border-radius: var(--radius-klein);
  border: 1px solid var(--rand);
}

.s-knopfreihe {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px;
}
.s-hinweis { font-size: .83rem; color: var(--text-still); }

/* ---------- Der Eingang -------------------------------------------- */

.s-eingang__kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

/* Das Zahlenband: je Stand eine Zahl gross, das Wort klein darunter.
   Dieselbe Bauart wie in den Personenkacheln -- man vergleicht mit dem
   Auge, statt eine Zeile zu lesen. */
/* Das Zahlenband: je Stand eine Zahl gross, das Wort klein darunter --
   und seit dem 25.09.2026 jede in einem eigenen kleinen Feld. Drei
   nackte Zahlen nebeneinander lasen sich als EINE Angabe ("0 1 0");
   mit Rand und Fase sind es drei Auskuenfte. */
.s-bilanz { display: flex; gap: 10px; flex-wrap: wrap; }
.s-bilanz__feld {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 68px; padding: 8px 13px 7px;
  border: 1px solid var(--rand);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  background: linear-gradient(163deg,
    rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, .012) 100%);
}
.s-bilanz__zahl {
  font-size: 1.42rem; font-weight: 700; line-height: 1.1; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.s-bilanz__wort {
  font-size: .72rem; color: var(--text-still);
  letter-spacing: .04em; text-transform: uppercase;
}
/* EINE NULL IST KEINE WARNUNG. Vorher war die Zahl bei "neu" IMMER
   rot -- auch die 0, und damit stand dauerhaft ein roter Punkt auf der
   Seite, an dem nichts war. Eine Warnung, die immer kommt, ist keine
   Warnung mehr; dieselbe Erkenntnis steht im Projektgedaechtnis vom
   03.09.2026. `data-leer` setzt support.js. */
.s-bilanz__feld[data-stand="neu"]:not([data-leer="ja"]) .s-bilanz__zahl { color: var(--warn); }
.s-bilanz__feld[data-stand="neu"]:not([data-leer="ja"]) {
  border-color: color-mix(in srgb, var(--warn) 38%, var(--rand));
  background: linear-gradient(163deg,
    color-mix(in srgb, var(--warn) 9%, transparent) 0%,
    rgba(255, 255, 255, .012) 100%);
}

.s-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 16px; }
.s-filter__knopf {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px;
  font: inherit; font-size: .84rem; font-weight: 600;
  color: var(--text-still);
  background: transparent;
  border: 1px solid var(--rand);
  cursor: pointer;
}
.s-filter__knopf:hover { color: var(--text); border-color: var(--akzent); }
.s-filter__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.s-filter__knopf[aria-pressed="true"] {
  color: var(--akzent);
  border-color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 12%, transparent);
}
.s-filter__zahl { font-size: .78rem; opacity: .8; }

/* ---------- Eine Meldung ------------------------------------------- */

/* =====================================================================
   DIE MELDEKARTE IM HAUS-STIL (25.09.2026)

   Filipe zum Bildschirmfoto des Eingangs: "lass das bitte auch geiler
   aussehen bitte."

   WAS VORHER DA WAR: ein flacher Kasten mit runden Ecken und einem
   3 px breiten Strich links. Funktional richtig -- aber die einzige
   Flaeche im Haus, die weder die Fase noch die Leuchtschiene traegt.
   Neben einer Kachel oder einem Dialog sah sie aus wie aus einer
   anderen Anwendung.

   UEBERNOMMEN WIRD, WAS ES SCHON GIBT, nicht etwas Neues erfunden:
   dieselbe `--fase` wie ueberall, dieselbe Bauart der Leuchtschiene
   wie an `.dialog` und an jeder Kachel, derselbe dunkle Verlauf. Eine
   zweite Formensprache waere ein zweites Haus.

   DIE SCHIENE TRAEGT DIE STANDFARBE (`--s`) und nicht den Akzent: An
   ihr liest man ab, ob etwas neu ist, bevor man ein Wort liest. Sie
   ist gedeckt beigemischt, nicht als Leuchtbalken -- augenschonend
   ist Vorgabe, nicht Geschmack.
   ===================================================================== */
.s-karte {
  --s: var(--text-still);
  position: relative;
  padding: 16px 18px 15px 22px;
  margin-bottom: 12px;
  border: 1px solid var(--rand);
  border-radius: 0;
  /* Dieselbe Fase wie an Kachel und Dialog. Wer sie spaeter aendert,
     aendert sie an EINER Stelle -- `--fase` steht im Grundblatt. */
  clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--s) 13%, transparent) 0%,
      color-mix(in srgb, var(--s) 4%, transparent) 16%,
      transparent 44%),
    linear-gradient(163deg, #131b27 0%, #0b1017 62%, #080c13 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 -1px 0 rgba(0, 0, 0, .45),
    0 14px 30px -20px rgba(0, 0, 0, .9);
  overflow: hidden;
}

/* Die Leuchtschiene -- dieselbe Bauart wie an `.dialog`, nur in der
   Farbe des Stands. Sie ersetzt den alten flachen Strich links. */
.s-karte::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--s) 52%, #fff) 0%,
    var(--s) 24%,
    color-mix(in srgb, var(--s) 42%, transparent) 100%);
  box-shadow:
    0 0 8px 0 color-mix(in srgb, var(--s) 45%, transparent),
    3px 0 18px -4px color-mix(in srgb, var(--s) 34%, transparent);
  z-index: 1;
}

/* Beim Daruebergehen tritt die Karte einen Schritt vor -- ohne
   Bewegung, ohne Aufblitzen. Nur Rand und Schatten. */
.s-karte:hover {
  border-color: color-mix(in srgb, var(--s) 32%, var(--rand));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 -1px 0 rgba(0, 0, 0, .45),
    0 18px 38px -20px rgba(0, 0, 0, .95);
}
.s-karte[data-stand="neu"] { --s: var(--warn); }
.s-karte[data-stand="in_arbeit"] { --s: var(--akzent); }
/* --k-gut ist die Hausfarbe fuer "passt, erledigt, freigegeben"
   (gate.css). Gemessen nachgesehen, nicht geraten: --gut gibt es
   nicht, und ein Ersatzwert in Klammern haette hier still eine
   sechste Gruenschattierung ins Haus gebracht. */
.s-karte[data-stand="erledigt"] { --s: var(--k-gut); opacity: .82; }

/* Wer aus einer Benachrichtigung kommt, soll sehen, welche gemeint
   ist -- ohne Blinken, ohne Bewegung. */
.s-karte[data-hervor="ja"] {
  border-color: var(--akzent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--akzent) 45%, transparent);
}

.s-karte__kopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 9px;
}
.s-marke {
  padding: 2px 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--s) 16%, transparent);
  color: var(--s);
}
.s-karte__von { font-size: .88rem; font-weight: 600; color: var(--text); }
.s-karte__zeit { font-size: .78rem; color: var(--text-still); margin-left: auto; }

.s-karte__text {
  margin: 0; font-size: .95rem; line-height: 1.55; color: var(--text);
  /* Absätze bleiben erhalten. Wer „Schritt 1 … Schritt 2 …"
     untereinander schreibt, soll es so wiederfinden. */
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.s-karte__wo { margin: 8px 0 0; font-size: .78rem; color: var(--text-still); }

.s-karte__bild { margin-top: 11px; }
.s-karte__bild img {
  display: block; max-width: 100%; max-height: 300px;
  width: auto; height: auto;
  border: 1px solid var(--rand);
  border-radius: 0;
  /* Kleine Fase, damit das Bild zur Karte gehoert und nicht wie ein
     aufgeklebtes Rechteck darauf liegt. */
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .95);
  transition: border-color var(--tempo, .18s);
}
/* Dass man es anklicken kann, sagt bisher nur der Mauszeiger-Text.
   Ein heller werdender Rand sagt es beim Daruebergehen -- ohne
   Bewegung, ohne Vergroessern: `prefers-reduced-motion` braucht hier
   nichts abzuschalten, weil sich nichts bewegt. */
.s-karte__bild a:hover img,
.s-karte__bild a:focus-visible img {
  border-color: color-mix(in srgb, var(--akzent) 55%, var(--rand));
}
.s-karte__bild a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* =====================================================================
   DAS BILD NEBEN DEN TEXT, NICHT DARUNTER (25.09.2026)

   Im Bildschirmfoto stand ein hochkantes Handybild unter zwei Zeilen
   Text -- und rechts daneben eine handbreite leere Flaeche ueber die
   ganze Kartenhoehe. Eine Meldung mit Bild war damit dreimal so hoch
   wie noetig, und im Eingang sah man weniger davon auf einmal.

   ERST AB 760 px, und das ist der Punkt: Auf dem Handy gibt es keine
   zweite Spalte, dort bleibt alles untereinander. Gefragt wird nach
   dem PLATZ, nicht nach dem Geraet.

   `auto` UND NICHT EINE FESTE BREITE fuer die Bildspalte: Gibt es kein
   Bild, greift die ganze Regel gar nicht erst (`:has`). Eine feste
   Breite waere eine Luecke bei jeder Meldung ohne Bild -- und die sind
   die Mehrzahl.
   ===================================================================== */
@media (min-width: 760px) {
  .s-karte:has(.s-karte__bild) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "kopf    kopf"
      "text    bild"
      "wo      bild"
      "antwort bild"
      "tun     bild";
    column-gap: 20px;
    align-items: start;
  }
  .s-karte:has(.s-karte__bild) > .s-karte__kopf { grid-area: kopf; }
  .s-karte:has(.s-karte__bild) > .s-karte__text { grid-area: text; }
  .s-karte:has(.s-karte__bild) > .s-karte__wo { grid-area: wo; }
  .s-karte:has(.s-karte__bild) > .s-antwort { grid-area: antwort; }
  .s-karte:has(.s-karte__bild) > .s-karte__tun { grid-area: tun; }
  .s-karte:has(.s-karte__bild) > .s-karte__bild {
    grid-area: bild; margin-top: 0; align-self: start;
  }
  /* 180 UND NICHT 260 (gemessen 25.09.2026). Bei 260 war die Karte
     330 px hoch, obwohl der Text zwei Zeilen hat -- die Bildspalte gab
     die Hoehe vor, und links stand eine leere Flaeche. Das Bild ist
     anklickbar ("In voller Groesse ansehen"), eine Vorschau reicht
     also. Ein Handy-Bildschirmfoto ist bei 180 px noch als solches zu
     erkennen; darum geht es an dieser Stelle. */
  .s-karte:has(.s-karte__bild) > .s-karte__bild img { max-height: 180px; }
}
.s-karte__bild a:focus-visible img { outline: 2px solid var(--akzent); outline-offset: 2px; }

.s-antwort {
  margin-top: 12px; padding: 10px 12px;
  background: color-mix(in srgb, var(--akzent) 8%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--akzent) 50%, transparent);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}
.s-antwort__schild {
  display: block; margin-bottom: 4px;
  font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--akzent);
}
.s-antwort__text {
  margin: 0; font-size: .9rem; line-height: 1.5; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.s-karte__tun { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }

.s-leer {
  padding: 22px 16px; text-align: center;
  font-size: .92rem; color: var(--text-still);
  background: var(--flaeche);
  border: 1px dashed var(--rand);
  border-radius: var(--radius-klein);
}

/* ---------- Am Handy ------------------------------------------------ */

@media (max-width: 560px) {
  .s-melden { padding: 15px 14px 14px; }
  .s-karte { padding: 13px 14px 12px; }
  .s-karte__zeit { margin-left: 0; width: 100%; }
  .s-bilanz { gap: 14px; }
  .s-eingang__kopf { gap: 10px; }
}