/* ===================================================================
   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. */
.s-bilanz { display: flex; gap: 18px; }
.s-bilanz__feld { display: flex; flex-direction: column; gap: 1px; }
.s-bilanz__zahl {
  font-size: 1.3rem; font-weight: 700; line-height: 1.1; color: var(--text);
}
.s-bilanz__wort { font-size: .75rem; color: var(--text-still); }
.s-bilanz__feld[data-stand="neu"] .s-bilanz__zahl { color: var(--warn); }

.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 ------------------------------------------- */

.s-karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  padding: 15px 16px 14px;
  margin-bottom: 12px;
}
/* Ein schmaler Streifen links sagt den Stand, bevor man liest --
   gedeckt beigemischt, nicht als Leuchtbalken. */
.s-karte { --s: var(--text-still); border-left: 3px solid color-mix(in srgb, var(--s) 55%, transparent); }
.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-radius: var(--radius-klein);
  border: 1px solid var(--rand);
}
.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; }
}