/* ===================================================================
   Gemeinsame Ansicht für LIVE, Content, Technik, Community und Schutz.
   =================================================================== */

.eintrag-karte {
  padding: 15px 17px; margin-bottom: 10px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--rand);
  border-radius: var(--radius-klein);
}
.eintrag-karte[data-dringlich="hoch"]    { border-left-color: #d8656e; }
.eintrag-karte[data-dringlich="mittel"]  { border-left-color: #4b6c8a; }
.eintrag-karte[data-dringlich="niedrig"] { border-left-color: #3c4a5a; }
.eintrag-karte[data-status="erledigt"] { opacity: .55; }

.eintrag-kopf {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
}
.eintrag-titel { font-weight: 600; font-size: .96rem; flex: 1 1 240px; }

.marke-art {
  padding: 1px 9px; border-radius: 999px;
  background: rgba(63, 189, 245, .14); color: #7fd2fb;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}

/* Bewertung als Punktreihe statt als Zahl -- auf einen Blick erfassbar,
   und ohne Sterne, die im Dunkeln flimmern. */
.bewertung { display: inline-flex; gap: 3px; align-items: center; }
.bewertung__punkt {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(150, 186, 220, .22);
}
.bewertung__punkt[data-voll="ja"] { background: var(--akzent); }

.eintrag-text {
  margin: 9px 0 0; font-size: .87rem; color: var(--text-leise);
  line-height: 1.55; white-space: pre-wrap;
}

.eintrag-fuss {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 11px; font-size: .77rem; color: var(--text-still);
}
.eintrag-knoepfe { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }

.filter { display: flex; gap: 8px; margin: 0 0 20px; flex-wrap: wrap; }
.filter .schritt[aria-pressed="true"] {
  /* Gedrueckt = der "voll"-Auftritt des Knopf-Systems. Vorher stand
     hier eine eigene Flaeche, die den geschliffenen Rand ueberschrieb. */
  --f: var(--akzent);
  color: #fff;
  background:
    linear-gradient(color-mix(in srgb, var(--f) 20%, #121926),
                    color-mix(in srgb, var(--f) 12%, #0d1420)) padding-box,
    linear-gradient(150deg, var(--f),
                    color-mix(in srgb, var(--f) 45%, transparent)) border-box;
  box-shadow: 0 4px 16px -9px var(--f);
}


@media (max-width: 620px) {
  .eintrag-knoepfe { margin-left: 0; width: 100%; }
}

/* =====================================================================
   UNTERWEISUNGEN — beidseitig bestaetigen

   Drei Stufen, drei Farben. Die mittlere ("halb") ist die wichtigste:
   Ein Nachweis, bei dem nur einer unterschrieben hat, ist KEIN Nachweis.
   Wer das nicht sieht, haelt ihn fuer fertig -- und merkt es erst, wenn
   jemand danach fragt. Deshalb bekommt sie eine eigene, warnende Farbe
   und nicht einfach ein blasses Gruen.
   ===================================================================== */

.schulung { margin: 0 0 30px; }
.schulung__kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.schulung__unter {
  margin: 4px 0 0; max-width: 68ch;
  font-size: .86rem; line-height: 1.55; color: var(--text-leise);
}
.schulung__wahl { display: grid; gap: 4px; min-width: 0; }
.schulung__liste { display: grid; gap: 11px; }

.unterweisung {
  --stufe-ton: var(--text-still);
  position: relative; overflow: hidden;
  padding: 15px 17px 14px;
  border: 1px solid color-mix(in srgb, var(--stufe-ton) 26%, var(--rand));
  border-radius: var(--radius-klein);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--stufe-ton) 8%, transparent), transparent 55%),
    var(--flaeche);
}
.unterweisung::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--stufe-ton),
    color-mix(in srgb, var(--stufe-ton) 30%, transparent));
}
.unterweisung[data-stufe="offen"]  { --stufe-ton: #6f89a8; }
/* Bewusst warnend: halb bestaetigt sieht nach fertig aus, ist es aber
   nicht. Diese Verwechslung ist genau die, die einen Nachweis wertlos
   macht. */
.unterweisung[data-stufe="halb"]   { --stufe-ton: #e0a33c; }
.unterweisung[data-stufe="fertig"] { --stufe-ton: #4dab77; }

.unterweisung__kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 12px;
}
.unterweisung__titel { margin: 0 0 3px; font-size: .98rem; font-weight: 650; color: var(--text); }
.unterweisung__datei { margin: 0; font-size: .8rem; color: var(--ton, var(--akzent)); }
.unterweisung__text { margin: 5px 0 0; font-size: .85rem; color: var(--text-leise); }
.unterweisung__marke {
  flex: none; padding: 3px 11px;
  border: 1px solid color-mix(in srgb, var(--stufe-ton) 36%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--stufe-ton) 12%, transparent);
  color: var(--stufe-ton);
  font-size: .72rem; letter-spacing: .06em;
}

/* Die beiden Unterschriften nebeneinander -- man soll auf einen Blick
   sehen, WER fehlt, nicht nur DASS etwas fehlt. */
.unterschriften {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  margin-bottom: 12px;
}
.unterschrift {
  display: grid; gap: 2px;
  padding: 9px 12px;
  border: 1px solid var(--rand); border-radius: 8px;
  background: rgba(0, 0, 0, .18);
}
.unterschrift[data-da="ja"] {
  border-color: rgba(80, 167, 130, .32);
  background: rgba(80, 167, 130, .07);
}
.unterschrift__wer {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-still);
}
.unterschrift__wann { font-size: .84rem; color: var(--text); }
.unterschrift[data-da="nein"] .unterschrift__wann { color: var(--text-still); font-style: italic; }

.unterweisung__fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.unterweisung__fest { font-size: .82rem; color: #6fbd95; }
.unterweisung__wartet { font-size: .82rem; color: #e0b45c; }
/* Ausgetauschtes Dokument: Das ist der einzige Fall, in dem ein
   abgeschlossener Nachweis seinen Wert verliert -- und dann muss es
   auch laut sein. */
.unterweisung__warnung {
  padding: 3px 10px;
  border: 1px solid rgba(255, 154, 162, .4); border-radius: 999px;
  background: rgba(255, 154, 162, .1);
  color: var(--warn); font-size: .8rem; font-weight: 600;
}

.schulung__neu {
  margin-top: 18px; padding: 16px 17px;
  border: 1px dashed var(--rand); border-radius: var(--radius-klein);
  background: var(--flaeche);
}
.schulung__neu .neu__raster { margin-top: 12px; }
.schulung__neu .knopf { margin-top: 12px; }

@media (max-width: 560px) {
  .schulung__kopf { flex-direction: column; align-items: stretch; }
  .unterweisung__kopf { flex-direction: column; }
  .unterweisung__marke { align-self: flex-start; }
}

/* =====================================================================
   AMPEL UND RUECKMELDUNG

   Drei Stufen, drei Farben. Die Stufe steht IMMER da -- auch fuer den
   Creator, auch wenn sie "noch nicht angesehen" lautet. Das ist der
   ganze Sinn: Er soll sehen, wo er steht, ohne fragen zu muessen.
   ===================================================================== */

.ampel {
  --a-ton: #6f89a8;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 11px; padding-top: 11px;
  border-top: 1px solid var(--rand);
}
.ampel[data-stufe="gut"]        { --a-ton: #4dab77; }
.ampel[data-stufe="verbessern"] { --a-ton: #e0a33c; }
.ampel[data-stufe="offen"]      { --a-ton: #6f89a8; }

.ampel__marke {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 11px;
  border: 1px solid color-mix(in srgb, var(--a-ton) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--a-ton) 13%, transparent);
  color: var(--a-ton);
  font-size: .76rem; font-weight: 600;
}
.ampel__marke::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--a-ton);
  box-shadow: 0 0 8px color-mix(in srgb, var(--a-ton) 70%, transparent);
}
.ampel__von { font-size: .76rem; color: var(--text-still); }
/* Der Grund steht auf einer eigenen Zeile und in voller Breite --
   "noch verbessern" ohne Grund ist nicht umsetzbar, nur entmutigend.
   Deshalb darf er nicht in eine Ecke gequetscht werden. */
.ampel__grund {
  flex-basis: 100%; margin: 4px 0 0;
  padding: 8px 11px;
  border-left: 2px solid var(--a-ton);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--a-ton) 8%, transparent);
  font-size: .85rem; line-height: 1.5; color: var(--text);
}
.ampel .schritt { margin-left: auto; }

/* ---------- Der ausgeklappte Bereich ------------------------------------ */
.rueckmeldung {
  margin-top: 11px; padding: 13px 14px;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: rgba(0, 0, 0, .2);
}
.rueckmeldung__hinweis {
  margin: 0 0 12px; font-size: .84rem; color: var(--text-leise);
}
.rueckmeldung__bewerten { margin-bottom: 14px; }
.ampel__wahl { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.ampel__knopf {
  padding: 8px 14px;
  border: 1px solid var(--rand); border-radius: 999px;
  background: var(--flaeche);
  color: var(--text-leise);
  font: inherit; font-size: .84rem; cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.ampel__knopf[data-stufe="gut"]:hover,
.ampel__knopf[data-stufe="gut"][data-an="ja"] {
  border-color: rgba(77, 171, 119, .5); color: #6fbd95;
  background: rgba(77, 171, 119, .12);
}
.ampel__knopf[data-stufe="verbessern"]:hover,
.ampel__knopf[data-stufe="verbessern"][data-an="ja"] {
  border-color: rgba(224, 163, 60, .5); color: #e0b45c;
  background: rgba(224, 163, 60, .12);
}

/* ---------- Das Gespraech ------------------------------------------------ */
.nachrichten { display: grid; gap: 8px; margin-bottom: 12px; }
.nachrichten__leer { margin: 0; font-size: .84rem; color: var(--text-still); }
.nachricht {
  padding: 9px 12px;
  border: 1px solid var(--rand); border-radius: 9px;
  background: var(--flaeche);
}
/* Eigene Nachrichten heben sich ab -- in einem Gespraech will man auf
   einen Blick sehen, was man selbst gesagt hat. */
.nachricht[data-eigen="ja"] {
  border-color: color-mix(in srgb, var(--akzent) 26%, transparent);
  background: color-mix(in srgb, var(--akzent) 7%, var(--flaeche));
}
.nachricht__kopf {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 4px;
}
.nachricht__von { font-size: .8rem; font-weight: 650; color: var(--text); }
.nachricht__wann { font-size: .74rem; color: var(--text-still); }
.nachricht__weg {
  margin-left: auto;
  width: 24px; height: 24px;
  border: 0; border-radius: 6px;
  background: none; color: var(--text-still);
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.nachricht__weg:hover { color: var(--warn); background: rgba(255, 154, 162, .1); }
.nachricht__text {
  margin: 0; font-size: .87rem; line-height: 1.55; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.nachricht-neu { display: grid; gap: 8px; }
/* Aussehen, Rahmen, Schrift und Fokusring stehen seit dem 01.09.2026
   EINMAL in start.css (":where(.inhalt) :where(input, textarea, select)").
   Die Kopie, die hier stand, war Wort fuer Wort dieselbe -- und genau so
   entstehen zwei Feld-Optiken auf einer Seite, sobald eine der beiden
   verbessert wird. Hier bleibt nur, was WIRKLICH nur hier gilt. */
.nachricht-neu textarea { width: 100%; min-height: 44px; }
.nachricht-neu .knopf { justify-self: start; }

@media (max-width: 560px) {
  .ampel .schritt { margin-left: 0; }
  .ampel__knopf { flex: 1 1 auto; text-align: center; }
}

/* =====================================================================
   AGENTUR-EVENTS (07.09.2026)

   Ein Event ist die einzige Eintragsart, die eine LAUFZEIT hat. Alles
   andere in diesen Bereichen ist ein Vermerk zu einem Tag; ein Event
   ist eine Einladung, an der man teilnehmen kann -- oder eben nicht
   mehr. Deshalb ist der Zustand (kommt / läuft / vorbei) das Erste auf
   der Karte und nicht eine Fussnote.

   Farbe wird hier als AUSKUNFT eingesetzt, nicht als Schmuck: gedecktes
   Grün heisst "du kannst mitmachen", Bernstein "noch nicht", Grau
   "vorbei". Die Farben stammen aus derselben Familie wie die Ampel
   (--k-gut / --k-mittel), damit nicht zwei Bedeutungssysteme
   nebeneinander laufen. Und weil Farbe allein nie ausreicht, steht der
   Zustand zusaetzlich als WORT da ("läuft bis 30.09.2026").
   ===================================================================== */

.event-zeitraum {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 2px 0 10px;
  font-size: .82rem;
}
.event-zeitraum__marke {
  --f: var(--k-neutral);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--f) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--f) 12%, transparent);
  color: color-mix(in srgb, var(--f) 82%, #fff);
  font-weight: 600; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
/* Der Punkt davor ist reine Zierde und darf deshalb NICHT vorgelesen
   werden -- ein Screenreader saehe sonst ein Aufzaehlungszeichen mitten
   im Satz. */
.event-zeitraum__marke::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--f); flex: none;
}
.event-zeitraum[data-stand="laeuft"] .event-zeitraum__marke { --f: var(--k-gut); }
.event-zeitraum[data-stand="kommt"]  .event-zeitraum__marke { --f: var(--k-mittel); }
.event-zeitraum[data-stand="vorbei"] .event-zeitraum__marke { --f: var(--k-neutral); }
.event-zeitraum__spanne {
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

/* Ein vorbeigelaufenes Event bleibt lesbar, tritt aber zurueck. Kein
   display:none -- was gelaufen ist, will man nachschlagen koennen.
   Gedaempft wird nur die Flaeche, nicht die Schrift: Text unter 4.5:1
   waere nicht mehr lesbar, und "alt" ist kein Grund, jemanden
   auszuschliessen. */
.eintrag-karte[data-event="vorbei"] { opacity: .82; }

.event-block {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  background: rgba(255, 255, 255, .022);
}
.event-block__schild {
  margin: 0 0 4px;
  /* .74rem = 11.84 px, nicht .7rem. Die Schriftgroessen-Pruefung zieht
     die Grenze bei 11.5 px, und sie hat recht: In Grossbuchstaben mit
     Sperrung wirkt eine Schrift kleiner, als die Zahl sagt -- und das
     hier ist die Beschriftung, an der man die Regeln vom Aufgabenteil
     unterscheidet. */
  font-size: .74rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-still);
}
.event-block__text {
  margin: 0;
  font-size: .87rem; line-height: 1.6; color: var(--text);
  /* pre-line, nicht pre-wrap: Zeilenumbrueche bleiben (die Aufzaehlung
     ist der Sinn dieser Felder), aber eine versehentlich eingefuegte
     Einrueckung aus einer Chatnachricht reisst die Karte nicht auf. */
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* .feld-hinweis steht seit dem 07.09.2026 in aufgaben.css -- bei den
   uebrigen Formularstilen. Grund: Die Dashboard-Seite braucht ihn jetzt
   auch (Creator anlegen), laedt aber diese Datei hier nicht. Ein
   Formularbaustein, der in der Bereichsdatei liegt, ist nur so lange
   richtig, wie ihn keine zweite Seite braucht. */

@media (max-width: 560px) {
  /* Auf dem Handy untereinander: Marke und Spanne nebeneinander
     ergaeben bei "vorbei seit 30.09.2026" einen Umbruch mitten im
     Datum. */
  .event-zeitraum { gap: 6px; }
  .event-zeitraum__spanne { flex-basis: 100%; }
}