/* ═══════════════════════════════════════════════════════════════════════
   JOBWOCHE — Firmenseite und Cockpits (21.08.2026)

   Der Dateiname ist enger als der Inhalt: hier stehen inzwischen die
   Stile ALLER Cockpits — Firmenseite, Gespraechsplatz und (seit dem
   Abend des 21.08.2026) auch Messestand und Standfenster. Sie in drei
   Dateien zu verteilen haette dieselben Regeln dreimal bedeutet.

   Ergaenzt public-pages.css und setzt dessen Tokens voraus (--p, --tx,
   --border, --shadow …). Wird NUR auf /firma/{slug} und dem Platzfenster
   geladen; der Rest des Auftritts sieht nichts davon.

   ══ Die Leitentscheidung: hell mit dunkler Buehne ═══════════════════

   Die Seite war ganz dunkel und sah damit aus wie ein Messestand. Sie
   ist aber eine oeffentliche Seite, die das ganze Jahr im Suchindex
   steht und neben allen anderen Seiten dieses Auftritts liegt. Hell ist
   die ehrlichere Umgebung.

   Genau eine Ausnahme: das Gespraechsfenster bleibt dunkel. Ein
   Videobild auf hellem Grund flimmert, und Dunkelheit rueckt das Bild in
   den Mittelpunkt — dieselbe Ueberlegung, aus der Kinosaele dunkel sind.

   ══ Praefix ════════════════════════════════════════════════════════

   fs-  fuer alles hier. bt- (Bewerbertag), rtc- (Gespraech) und ck-
   (Cockpit) bleiben unangetastet: sie gehoeren dem Messestand und
   werden hier nur stellenweise fuer den hellen Grund nachgezogen.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── hidden muss hidden bleiben ────────────────────────────────────────
   Das eingebaute [hidden] { display: none } des Browsers hat die
   Spezifitaet eines Typselektors und verliert deshalb gegen JEDE
   Klassenregel mit display. Genau das passierte am 21.08.2026: die
   schwarze "geschlossen"-Flaeche trug hidden und stand trotzdem da,
   weil .fs-zu display:flex setzt — mit dem Ergebnis, dass beide
   Zustaende gleichzeitig zu sehen waren.

   Die Regel steht bewusst GANZ OBEN und mit !important: sie ist keine
   Gestaltung, sondern die Zusicherung, auf der das Umschalten in
   seite.js beruht. */
[hidden] { display: none !important; }

/* ── Die Seite darf breiter sein als der Rest ──────────────────────────
   1100px reichen fuer Fliesstext, nicht fuer Videobild plus Spalte. */
.huelle-weit { max-width: 1520px; }

/* ═══ 1. Kopf der Firma ═══════════════════════════════════════════════ */

.fs-kopf {
  display: flex; align-items: center; gap: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin: 4px 0 16px;
  box-shadow: var(--shadow-sm);
}

/* Ein Firmenlogo ist selten quadratisch — meist liegt es quer. Ein
   quadratischer Kasten haette ein 3:1-Logo auf ein Drittel der Hoehe
   geschrumpft; feste Hoehe und mitwachsende Breite halten es lesbar. */
.fs-kopf-logo {
  flex: 0 0 auto;
  height: 84px;
  min-width: 84px; max-width: 260px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 10px 14px;
}
.fs-kopf-logo img { max-width: 100%; max-height: 64px; width: auto; object-fit: contain; }
.fs-kopf-logo:has(.platzhalter) { width: 84px; padding: 0; }

/* Ohne Logo: Initialen statt eines leeren Kastens. Ein grauer Rahmen
   sagt niemandem, wer hier sitzt. */
.fs-kopf-logo .platzhalter {
  font-family: var(--font-head);
  font-size: 30px; font-weight: 800; letter-spacing: 1px;
  color: var(--p-dark);
  background: var(--p-xlight);
  width: 100%; height: 100%;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
}

.fs-kopf-text { min-width: 0; flex: 1 1 auto; }

.fs-kopf-text h1 {
  font-family: var(--font-head);
  font-size: clamp(23px, 3.2vw, 33px);
  font-weight: 800; line-height: 1.15;
  color: var(--tx); margin: 0;
  letter-spacing: -.4px;
}

.fs-kopf-zeile {
  font-size: 16px; color: var(--tx2);
  margin: 6px 0 0; line-height: 1.45;
  max-width: 70ch;
}
.fs-kopf-zeile:empty { display: none; }

.fs-kopf-marken { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }

.fs-marke {
  font-size: 12.5px; font-weight: 600;
  color: var(--tx2);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 11px;
  text-decoration: none;
}
.fs-marke.stark {
  color: var(--p-hover);
  background: var(--p-xlight);
  border-color: var(--p-light);
}
a.fs-marke:hover { border-color: var(--p); color: var(--p-hover); }

/* ═══ 2. Das Gitter ═══════════════════════════════════════════════════
   Gespraech breit, Fakten schmal. Der Umbruch kommt bei 1080px — enger
   wuerde die Spalte das Videobild auf Briefmarkengroesse druecken. */

.fs-gitter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 18px;
  align-items: start;
}

.fs-mitte { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.fs-seite {
  display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
  /* Der Schatten der Karten wuerde am Rand des Scrollbereichs
     abgeschnitten — etwas Luft verhindert das. */
  padding: 2px;
  margin: -2px;
}

@media (max-width: 1080px) {
  .fs-gitter { grid-template-columns: minmax(0, 1fr); }
  .fs-seite {
    position: static; max-height: none; overflow: visible;
  }
}

/* ═══ 3. Helle Karte — der Grundbaustein ══════════════════════════════ */

.fs-karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-xs);
}

.fs-karte > h2 {
  font-family: var(--font-head);
  font-size: 12px; font-weight: 800;
  letter-spacing: .9px; text-transform: uppercase;
  color: var(--tx3);
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
  justify-content: space-between;
}

.fs-zahl {
  font-size: 11.5px; font-weight: 700;
  color: var(--p-hover); background: var(--p-xlight);
  border-radius: 999px; padding: 2px 8px;
  letter-spacing: 0;
}

.fs-leer {
  font-size: 13.5px; color: var(--tx3);
  margin: 0; line-height: 1.55;
}

.fs-fussnote {
  font-size: 12px; color: var(--tx3);
  line-height: 1.5; margin: 10px 0 0;
}
.fs-fussnote.hell { color: rgba(255,255,255,.55); }
.fs-fussnote.hell a { color: #7ee0d5; }

.fs-leise { background: var(--bg2); box-shadow: none; }

.fliesstext {
  font-size: 15.5px; line-height: 1.72; color: var(--tx2);
  max-width: 72ch;
}

/* Der Abstand zwischen Absaetzen ist eine Frage des Stils und nicht der
   Eingabe: der Text kommt als <p> an (App\Support\Fliesstext), nicht als
   zwei <br>. Mit <br> haetten sich Zeilenhoehe und Leerzeile addiert —
   der Grund fuer die klaffenden Luecken vom 21.08.2026. */
.fliesstext p { margin: 0 0 .85em; }
.fliesstext p:last-child { margin-bottom: 0; }

/* "Wir suchen" ist die Einladung an den Leser und bekommt deshalb etwas
   mehr Gewicht als der Rest — aber keine Signalfarbe: es ist eine
   Einladung und kein Alarm. */
.fs-suchen {
  border-left: 3px solid var(--p);
  background: linear-gradient(180deg, var(--p-xlight), var(--surface) 120px);
}
.fs-suchen .fliesstext { font-size: 16px; color: var(--tx); }

/* ═══ 4. Die Buehne ═══════════════════════════════════════════════════ */

.fs-buehne {
  background: var(--dunkel);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-md);
  padding: 16px 18px 18px;
  color: #fff;
  overflow: hidden;
}

.fs-buehne-kopf {
  display: flex; align-items: center; gap: 13px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 16px;
}

.fs-buehne-logo {
  width: 42px; height: 42px; flex: 0 0 42px;
  object-fit: contain;
  background: #fff; border-radius: var(--radius-sm);
  padding: 4px;
}

.fs-buehne-titel { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.fs-buehne-titel .wer {
  font-family: var(--font-head);
  font-size: 17px; font-weight: 700; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fs-buehne-titel .was {
  font-size: 12.5px; color: rgba(255,255,255,.6);
  letter-spacing: .2px;
}

/* Der Zustandspunkt der Firma: Sprechzeit ja/nein. NICHT zu verwechseln
   mit den Punkten an den Personenkacheln — die sagen, ob jemand sitzt. */
.fs-live {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 0 auto;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.12);
}
.fs-live i {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: 0 0 8px;
}
.fs-live[data-offen="1"] {
  color: #6ee7b7;
  background: rgba(110,231,183,.12);
  border-color: rgba(110,231,183,.32);
}
.fs-live[data-offen="1"] i { animation: fs-puls 2.2s ease-in-out infinite; }

@keyframes fs-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(110,231,183,.55); }
  70%      { box-shadow: 0 0 0 7px rgba(110,231,183,0); }
}
@media (prefers-reduced-motion: reduce) {
  .fs-live[data-offen="1"] i { animation: none; }
}

/* ── Zustand: geschlossen ──────────────────────────────────────────────
   Eine schwarze Flaeche im Bildformat. Sie sieht aus wie ein Videobild,
   das noch nicht laeuft — und genau das ist sie. */
.fs-zu {
  background: #000;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.09);
  aspect-ratio: 16 / 9;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 22px;
  gap: 3px;
}

.fs-zu-uhr { color: rgba(255,255,255,.3); margin-bottom: 10px; }

.fs-zu-satz {
  font-family: var(--font-head);
  font-size: clamp(16px, 2.3vw, 21px); font-weight: 700;
  color: #fff; margin: 0; line-height: 1.35;
  max-width: 34ch;
}

.fs-zu-zusatz {
  font-size: 14px; color: rgba(255,255,255,.72);
  margin: 8px 0 0; max-width: 44ch; line-height: 1.5;
}

.fs-zu-plan {
  font-size: 12.5px; color: rgba(255,255,255,.45);
  margin: 10px 0 0; max-width: 46ch;
}

/* Verweis auf einen laufenden Bewerbertag. Bewusst kraeftiger als der
   Sprechzeiten-Hinweis darueber: an diesem Tag ist er der Weg, und nicht
   eine Fussnote zu einer geschlossenen Tuer. */
.fs-zu-messe {
  display: inline-block; margin: 12px 0 0;
  font-size: 13.5px; font-weight: 700; color: #34d399;
  text-decoration: none; border-bottom: 1px solid rgba(52,211,153,.45);
  padding-bottom: 1px;
}
.fs-zu-messe:hover { color: #6ee7b7; border-bottom-color: #6ee7b7; }

.fs-zu-taten { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 18px; }

/* ── Zwei konkrete Termine auf der schwarzen Flaeche ───────────────────
   Sie stehen dort, wo bisher ein Knopf ins Ungewisse fuehrte. Eine
   Frage, die man mit einem Klick beantwortet, kommt weiter als eine
   Einladung, sich selbst etwas zu suchen. */
.fs-zu-vorspann {
  font-size: 13px; color: rgba(255,255,255,.55);
  margin: 20px 0 0; letter-spacing: .3px;
}

.fs-zu-termine { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }

.fs-termin {
  display: flex; flex-direction: column; align-items: center;
  gap: 1px;
  min-width: 152px;
  padding: 11px 18px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  text-decoration: none;
  transition: background .14s, border-color .14s, transform .14s;
}
.fs-termin:hover {
  background: rgba(255,255,255,.16);
  border-color: #6ee7b7;
  transform: translateY(-1px);
}
.fs-termin .tag {
  font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: #6ee7b7;
}
.fs-termin .datum { font-size: 13px; color: rgba(255,255,255,.72); }
.fs-termin .uhr {
  font-family: var(--font-head);
  font-size: 19px; font-weight: 800; color: #fff; margin-top: 2px;
}

/* Dieselben Termine in der hellen Seitenspalte. */
.fs-terminkarte { border-left: 3px solid var(--p); }
.fs-terminliste { display: flex; flex-direction: column; gap: 8px; }

.fs-termin.klein {
  flex-direction: row; align-items: baseline; gap: 8px;
  min-width: 0; padding: 10px 12px;
  background: var(--bg);
  border-color: var(--border);
}
.fs-termin.klein:hover {
  background: var(--p-xlight); border-color: var(--p); transform: none;
}
.fs-termin.klein .tag { color: var(--p-hover); font-size: 11px; flex: 0 0 auto; }
.fs-termin.klein .datum { color: var(--tx2); font-size: 12.5px; flex: 1 1 auto; }
.fs-termin.klein .uhr { color: var(--tx); font-size: 15px; margin: 0; flex: 0 0 auto; }

.fs-mehr {
  display: inline-block; margin-top: 11px;
  font-size: 12.5px; font-weight: 700; color: var(--p-hover);
  text-decoration: none;
}
.fs-mehr:hover { text-decoration: underline; }

/* ── Zustand: geoeffnet, aber noch kein Gespraech ──────────────────────
   Dieselbe Flaeche wie im geschlossenen Zustand. Ohne das schrumpfte die
   Buehne beim Umschalten auf eine flache Leiste zusammen, und die Seite
   sprang jedes Mal um mehrere hundert Pixel — bei einer Seite, deren
   Mitte das Videofenster ist, ist das der falsche Eindruck: da kommt
   gleich ein Bild, also gehoert der Platz dafuer schon dorthin.

   Sobald das Gespraech laeuft, gilt die Regel nicht mehr — dann steht
   dort das echte Bild (#bt-gespraech). */
.fs-offen > #bt-vorstufe {
  background: #000;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  min-height: clamp(260px, 30vw, 440px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 26px 28px;
}
.fs-offen > #bt-vorstufe[hidden] { display: none !important; }

/* Auf der schwarzen Flaeche darf das Eingabefeld nicht verschwinden. */
.fs-offen > #bt-vorstufe .bt-feld {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
}
.fs-offen > #bt-vorstufe .bt-feld::placeholder { color: rgba(255,255,255,.45); }
.fs-offen > #bt-vorstufe .bt-feld:focus {
  outline: none; border-color: #6ee7b7;
  box-shadow: 0 0 0 3px rgba(110,231,183,.22);
}

.fs-hinweis {
  font-size: 14.5px; color: rgba(255,255,255,.78);
  line-height: 1.6; margin: 0 0 4px;
}
.fs-hinweis a { color: #7ee0d5; }

.fs-satz {
  font-size: 14.5px; color: rgba(255,255,255,.85);
  line-height: 1.6; margin: 0 0 10px;
}
.fs-satz.leise { color: rgba(255,255,255,.62); font-size: 13.5px; }
.fs-satz strong { color: #fff; }

.fs-namezeile { display: flex; gap: 10px; flex-wrap: wrap; }
.fs-namezeile .bt-feld { flex: 1 1 220px; }

.fs-kasten {
  display: flex; gap: 9px; align-items: center;
  font-size: 14px; margin: 12px 0;
  color: rgba(255,255,255,.85);
}

/* Die Bedienleiste zwischen Bild und Chat — also dort, wo die Hand
   ohnehin ist. */
.fs-bedienung { margin-top: 12px; }

/* Die Warteraum- und Endekarten erben vom Bewerbertag; hier nur die
   Typografie nachziehen, damit sie zur Buehne passt. */
.fs-buehne .bt-warteraum h2 {
  font-family: var(--font-head);
  font-size: 19px; color: #fff; margin: 0 0 8px;
}
.fs-buehne .bt-warteraum p { color: rgba(255,255,255,.75); font-size: 14px; margin: 0 0 4px; }
.fs-buehne .bt-warteraum p.leise { color: rgba(255,255,255,.5); font-size: 12.5px; }

/* ═══ 5. Chat unter der Buehne ════════════════════════════════════════ */

.fs-chat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px 14px;
  box-shadow: var(--shadow-xs);
}

.fs-chat-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 0 11px;
  font-family: var(--font-head);
  font-size: 12px; font-weight: 800;
  letter-spacing: .9px; text-transform: uppercase;
  color: var(--tx3);
}

.fs-chat-hinweis {
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
  text-transform: none;
  color: var(--tx4);
  background: var(--bg2);
  border-radius: 999px; padding: 3px 9px;
}
.fs-chat-hinweis.laeuft {
  color: var(--p-hover); background: var(--p-xlight);
}

/* Die Liste erbt ihre Mechanik von .ck-chatliste aus public-pages.css;
   hier bekommt sie den hellen Grund. */
.fs-chat .ck-chatliste {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 128px; max-height: 260px;
  overflow-y: auto; padding: 11px 12px;
  display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: thin;
}

.fs-chat .ck-chatzeile {
  font-size: 14px; line-height: 1.5;
  color: var(--tx); background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px; max-width: 88%;
  align-self: flex-start;
  word-break: break-word;
}
.fs-chat .ck-chatzeile.selbst {
  align-self: flex-end;
  background: var(--p-xlight);
  border-color: var(--p-light);
}
.fs-chat .ck-chatzeile .wer {
  display: block; font-size: 11px; font-weight: 700;
  color: var(--tx3); margin-bottom: 2px;
}

.fs-chat .ck-leer { color: var(--tx3); font-size: 13.5px; margin: auto; text-align: center; }

.fs-chat .ck-chatform { display: flex; gap: 9px; margin-top: 11px; }
.fs-chat .ck-chatform input {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: 14.5px;
  padding: 10px 13px;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  background: var(--surface); color: var(--tx);
}
.fs-chat .ck-chatform input:focus {
  outline: none; border-color: var(--p);
  box-shadow: 0 0 0 3px var(--p-light);
}
.fs-chat .ck-chatform input:disabled { background: var(--bg2); color: var(--tx3); }
/* Ein Platzhalter, den man nicht lesen kann, ist ein leeres Feld mit
   Beigeschmack — im gesperrten Zustand wird er deshalb dunkler. */
.fs-chat .ck-chatform input::placeholder { color: var(--tx4); opacity: 1; }
.fs-chat .ck-chatform input:disabled::placeholder { color: var(--tx3); opacity: .85; }

.fs-chat .ck-chatform button {
  font: inherit; font-weight: 700; font-size: 14.5px;
  padding: 10px 18px;
  border: 0; border-radius: var(--radius);
  background: var(--p); color: #fff; cursor: pointer;
}
.fs-chat .ck-chatform button:hover:not(:disabled) { background: var(--p-dark); }
.fs-chat .ck-chatform button:disabled { background: var(--border2); cursor: default; }

/* ── Dunkle Fassung des Chats ──────────────────────────────────────────
   Im Standfenster des Ansprechpartners steht derselbe Baustein auf
   dunklem Grund. Eine Klasse statt einer zweiten Datei: der Aufbau ist
   identisch, nur die Farben sind es nicht. */
.fs-chat.dunkel {
  background: var(--dunkel);
  border-color: rgba(255,255,255,.09);
  color: #fff;
}
.fs-chat.dunkel .fs-chat-kopf { color: rgba(255,255,255,.55); }
.fs-chat.dunkel .fs-chat-hinweis { color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
.fs-chat.dunkel .fs-chat-hinweis.laeuft { color: #6ee7b7; background: rgba(110,231,183,.14); }
.fs-chat.dunkel .fs-fussnote { color: rgba(255,255,255,.5); }

.fs-chat.dunkel .ck-chatliste {
  background: rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.1);
}
.fs-chat.dunkel .ck-chatzeile {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: #fff;
}
.fs-chat.dunkel .ck-chatzeile.selbst {
  background: rgba(110,231,183,.16);
  border-color: rgba(110,231,183,.3);
}
.fs-chat.dunkel .ck-chatzeile .wer { color: rgba(255,255,255,.55); }
.fs-chat.dunkel .ck-leer { color: rgba(255,255,255,.5); }

.fs-chat.dunkel .ck-chatform input {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.2);
  color: #fff;
}
.fs-chat.dunkel .ck-chatform input::placeholder { color: rgba(255,255,255,.42); }
.fs-chat.dunkel .ck-chatform input:disabled { background: rgba(255,255,255,.04); }
.fs-chat.dunkel .ck-chatform input:focus {
  border-color: #6ee7b7; box-shadow: 0 0 0 3px rgba(110,231,183,.2);
}
.fs-chat.dunkel .ck-chatform button:disabled { background: rgba(255,255,255,.14); color: rgba(255,255,255,.45); }

/* ═══ 6. Ansprechpartner auf hellem Grund ═════════════════════════════
   _ck_leute.blade.php dient beiden Welten und bringt seine dunklen
   ck-Klassen mit. Statt einer zweiten Fassung der Datei wird sie hier
   fuer den hellen Grund nachgezogen — der Messestand bleibt unberuehrt. */

.fs-mitte #ck-leute-block,
.fs-mitte .ck-block {
  background: var(--surface) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-xs);
  margin-top: 0 !important;
}
.fs-mitte .ck-block > h2 { color: var(--tx3); }
.fs-mitte .ck-block > h2 .zahl { color: var(--p-hover); }
.fs-mitte .ck-block .ck-leer { color: var(--tx3); }

.fs-mitte .ck-leute {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
}

.fs-mitte .ck-person {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .14s, transform .14s, box-shadow .14s;
}
.fs-mitte .ck-person:hover:not(:disabled) {
  background: var(--surface);
  border-color: var(--p);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.fs-mitte .ck-person:disabled { opacity: 1; }
.fs-mitte .ck-person:disabled:hover { background: var(--bg); border-color: var(--border); }

.fs-mitte .ck-person .bild,
.fs-mitte .ck-person .platzhalter { background: var(--p-xlight); color: var(--p-dark); }
.fs-mitte .ck-person .name  { color: var(--tx); }
.fs-mitte .ck-person .rolle { color: var(--tx3); }

.fs-mitte .ck-punkt.offline { color: var(--tx4); }
.fs-mitte .ck-punkt.frei    { color: #0f8f6f; }
.fs-mitte .ck-punkt.busy    { color: #b45309; }
.fs-mitte .ck-punkt.break   { color: #c2410c; }

/* Ist geschlossen, sind die Kacheln nur noch Information: es hat keinen
   Sinn, an eine Tuer zu klopfen, hinter der ausdruecklich niemand
   wartet. */
.fs-zu-modus .fs-mitte .ck-person { pointer-events: none; opacity: .62; }

/* ═══ 7. Seitenspalte ═════════════════════════════════════════════════ */

.fs-punkt {
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
  text-transform: none;
  border-radius: 999px; padding: 3px 9px 3px 8px;
  display: inline-flex; align-items: center; gap: 6px;
}
.fs-punkt::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.fs-punkt.offen { color: #0f8f6f; background: #e7f7f2; }
.fs-punkt.zu    { color: var(--tx3); background: var(--bg2); }

.fs-plan { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fs-plan th {
  text-align: left; font-weight: 700; color: var(--tx3);
  width: 34px; padding: 5px 0; vertical-align: top;
}
.fs-plan td { padding: 5px 0; color: var(--tx2); }
.fs-plan tr.leer td { color: var(--tx4); }
.fs-plan tr.heute th, .fs-plan tr.heute td { color: var(--tx); font-weight: 700; }
.fs-plan tr.heute th::after {
  content: '·'; color: var(--p); font-weight: 900; margin-left: 3px;
}

.fs-zeit-zusatz {
  font-size: 13px; color: var(--tx2);
  background: var(--amber-bg);
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  padding: 8px 10px; margin: 11px 0 0;
  line-height: 1.5;
}

.fs-person { display: flex; gap: 11px; align-items: center; margin-bottom: 13px; }
.fs-person img {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--border);
}
.fs-person .name { font-weight: 700; font-size: 14.5px; color: var(--tx); }
.fs-person .rolle { font-size: 12.5px; color: var(--tx3); }

.fs-daten { margin: 0; font-size: 13.5px; }
.fs-daten dt {
  color: var(--tx3); font-size: 11.5px; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase;
  margin-top: 9px;
}
.fs-daten dt:first-child { margin-top: 0; }
.fs-daten dd { margin: 1px 0 0; color: var(--tx); word-break: break-word; }

.fs-stelle {
  display: block; text-decoration: none;
  padding: 10px 0 10px 14px;
  position: relative;
  border-top: 1px solid var(--border);
}
.fs-stelle:first-of-type { border-top: 0; padding-top: 2px; }
.fs-stelle::before {
  content: '›'; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  color: var(--p); font-weight: 800; font-size: 16px;
}
.fs-stelle .titel {
  display: block; font-size: 14px; font-weight: 700;
  color: var(--tx); line-height: 1.35;
}
.fs-stelle .meta { display: block; font-size: 12px; color: var(--tx3); margin-top: 2px; }
.fs-stelle:hover .titel { color: var(--p-hover); }

.fs-datei {
  display: flex; gap: 11px; align-items: center;
  text-decoration: none; padding: 9px 0;
  border-top: 1px solid var(--border);
}
.fs-datei:first-of-type { border-top: 0; }
.fs-datei .sym {
  flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: .5px;
  color: #b91c1c; background: #fee2e2;
  border-radius: 5px; padding: 4px 6px;
}
.fs-datei .name { display: block; font-size: 13.5px; font-weight: 600; color: var(--tx); }
.fs-datei .meta { display: block; font-size: 11.5px; color: var(--tx3); }
.fs-datei:hover .name { color: var(--p-hover); }

.fs-messe { font-size: 13.5px; padding: 8px 0; border-top: 1px solid var(--border); }
.fs-messe:first-of-type { border-top: 0; padding-top: 0; }
.fs-messe strong { display: block; color: var(--tx); }
.fs-messe span { display: block; color: var(--tx3); font-size: 12.5px; }

/* Datenaustausch in der hellen Spalte. */
.fs-karte .ck-ablage {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1.5px dashed var(--border2);
  border-radius: var(--radius);
  padding: 14px 12px; margin-top: 10px;
  color: var(--tx3); font-size: 13px; text-align: center;
  cursor: pointer;
}
.fs-karte .ck-ablage .sym { font-size: 19px; line-height: 1; }
.fs-karte .ck-ablage .klein { font-size: 11px; color: var(--tx4); }
.fs-karte .ck-ablage[aria-disabled="true"] { opacity: .55; cursor: default; }
.fs-karte .ck-ablage.drueber { border-color: var(--p); background: var(--p-xlight); }
.fs-karte .ck-leer { color: var(--tx3); font-size: 13px; }
.fs-karte .ck-datei { color: var(--tx); }
.fs-karte .ck-datei .name { color: var(--tx); font-size: 13px; }
.fs-karte .ck-datei .meta { color: var(--tx3); }
.fs-karte .ck-datei .taten a { color: var(--p-hover); }
.fs-karte .ck-fortschritt {
  height: 4px; background: var(--bg2); border-radius: 999px;
  overflow: hidden; margin-top: 8px;
}
.fs-karte .ck-fortschritt i { display: block; height: 100%; background: var(--p); width: 0; }

/* ── Das Kontaktformular ───────────────────────────────────────────────
   Es kommt aus dem Bestand und bringt .karte mit. Statt einer zweiten
   Fassung der Datei wird die Karte hier an die Nachbarn angeglichen —
   dieselbe Ueberlegung wie beim Ansprechpartner-Raster. */
.fs-mitte > .karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-xs);
  margin: 0;
}
.fs-mitte > .karte > h2 {
  font-family: var(--font-head);
  font-size: 12px; font-weight: 800;
  letter-spacing: .9px; text-transform: uppercase;
  color: var(--tx3); margin: 0 0 12px;
}
/* Der Vorspann des Formulars ist ein Satz und kein Aufsatz — der breite
   Fliesstext-Rahmen liess ihn eingerueckt wirken. */
.fs-mitte > .karte > .fliesstext { font-size: 14.5px; margin: 0 0 14px; }

/* ── Wunschtermin im Kontaktformular ───────────────────────────────────
   Zugeklappt, weil die meisten Anfragen keine Terminwuensche sind. Der
   Knopf "Termin vereinbaren" auf der Buehne klappt ihn auf. */
.wunschtermin {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  margin: 4px 0 16px;
}

.wunschtermin > summary {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius);
}
.wunschtermin > summary::-webkit-details-marker { display: none; }

/* Ein eigener Pfeil: der eingebaute sitzt je nach Browser woanders. */
.wunschtermin > summary::before {
  content: '›';
  font-size: 17px; font-weight: 800; color: var(--p);
  transform: rotate(0deg); transition: transform .15s;
  display: inline-block; width: 12px;
}
.wunschtermin[open] > summary::before { transform: rotate(90deg); }

.wunschtermin > summary:hover { background: var(--p-xlight); }
.wunschtermin > summary .titel { font-weight: 700; font-size: 14.5px; color: var(--tx); }
.wunschtermin > summary .dazu { font-size: 12.5px; color: var(--tx3); }

.wunschtermin[open] { background: var(--surface); border-color: var(--p-light); }

.wunsch-satz {
  font-size: 13.5px; color: var(--tx2);
  margin: 0; padding: 0 14px 10px;
}

.wunschtermin .raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; padding: 0 14px 14px;
}
.wunschtermin .feld label {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--tx3); text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 4px;
}
.wunschtermin input[type="datetime-local"] {
  width: 100%; font: inherit; font-size: 14.5px;
  padding: 9px 11px;
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--tx);
}
.wunschtermin input[type="datetime-local"]:focus {
  outline: none; border-color: var(--p);
  box-shadow: 0 0 0 3px var(--p-light);
}

/* Kurz hervorheben, wenn der Knopf von der Buehne hierher gefuehrt hat —
   sonst landet man auf einem Formular und sieht nicht, was gemeint war. */
.wunschtermin.geblinkt { animation: wunsch-blink 1.6s ease-out 1; }

@keyframes wunsch-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,169,157,0); }
  25%      { box-shadow: 0 0 0 5px rgba(0,169,157,.28); }
}
@media (prefers-reduced-motion: reduce) {
  .wunschtermin.geblinkt { animation: none; }
}

/* ═══ 8. Galerie und Video ════════════════════════════════════════════ */

.fs-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.fs-galerie figure { margin: 0; position: relative; }
.fs-galerie img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: block;
}
.fs-galerie figcaption {
  font-size: 12px; color: var(--tx3); margin-top: 5px; line-height: 1.4;
}

.fs-video { position: relative; }
.fs-video iframe, .fs-video video {
  width: 100%; aspect-ratio: 16 / 9; height: auto;
  border: 0; border-radius: var(--radius); display: block;
  background: #000;
}

/* ═══ 9. Knoepfe ══════════════════════════════════════════════════════ */

.fs-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  font: inherit; font-size: 14px; font-weight: 700;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.08);
  color: #fff; text-decoration: none; cursor: pointer;
  transition: background .14s, border-color .14s;
}
.fs-knopf:hover { background: rgba(255,255,255,.16); color: #fff; }

.fs-knopf.hell {
  background: #fff; color: var(--tx); border-color: #fff;
}
.fs-knopf.hell:hover { background: #f1f5f4; color: var(--tx); }

/* In hellen Karten (Seitenspalte) sieht derselbe Knopf anders aus. */
.fs-karte .fs-knopf {
  background: var(--bg2); color: var(--tx2);
  border-color: var(--border);
}
.fs-karte .fs-knopf:hover { background: var(--border); color: var(--tx); }

.fs-knopf.voll {
  width: 100%; margin-top: 12px;
  background: var(--p); color: #fff; border-color: var(--p);
}
.fs-karte .fs-knopf.voll { background: var(--p); color: #fff; border-color: var(--p); }
.fs-knopf.voll:hover,
.fs-karte .fs-knopf.voll:hover { background: var(--p-dark); border-color: var(--p-dark); color: #fff; }

/* ═══ 10. Bearbeitenleiste ════════════════════════════════════════════
   Nur fuer den Eigentuemer im Dokument. Sie klebt oben, weil man beim
   Bearbeiten nach unten liest und den Schalter trotzdem erreichen will. */

.fs-leiste {
  position: sticky; top: 0; z-index: 40;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px;
  background: #0f2436;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-md);
}

.fs-leiste-links  { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fs-leiste-rechts { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.fs-leiste-satz {
  font-size: 12.5px; color: rgba(255,255,255,.55);
}
.fs-leiste.bearbeitet .fs-leiste-satz { color: #7ee0d5; }

/* Kippschalter */
.fs-kipp {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-size: 13.5px; font-weight: 700;
  color: #fff; background: none; border: 0; cursor: pointer;
  padding: 0;
}
.fs-kipp .knebel {
  width: 40px; height: 22px; border-radius: 999px;
  background: rgba(255,255,255,.18);
  position: relative; transition: background .16s;
  flex: 0 0 40px;
}
.fs-kipp .knebel::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .16s;
}
.fs-kipp[aria-pressed="true"] .knebel { background: var(--p); }
.fs-kipp[aria-pressed="true"] .knebel::after { transform: translateX(18px); }

.fs-modus { display: inline-flex; border-radius: var(--radius); overflow: hidden; }
.fs-modus-knopf {
  font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 6px 11px; cursor: pointer;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.13);
  border-right-width: 0;
}
.fs-modus-knopf:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.fs-modus-knopf:last-child  { border-radius: 0 var(--radius) var(--radius) 0; border-right-width: 1px; }
.fs-modus-knopf:hover { background: rgba(255,255,255,.13); color: #fff; }
.fs-modus-knopf.aktiv { background: var(--p); color: #fff; border-color: var(--p); }

.fs-werkzeug {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 6px 11px; border-radius: var(--radius);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.8);
  cursor: pointer; text-decoration: none;
}
.fs-werkzeug:hover { background: rgba(255,255,255,.14); color: #fff; }
.fs-werkzeug.still { cursor: default; opacity: .6; }
.fs-werkzeug.still:hover { background: rgba(255,255,255,.07); }

.fs-leiste-meldung {
  flex: 1 1 100%; margin: 0;
  font-size: 13px; font-weight: 600;
  color: #7ee0d5;
}
.fs-leiste-meldung.fehler { color: #fca5a5; }

/* ── Was sich im Bearbeitenmodus aendert ────────────────────────────── */

[data-nur-bearbeiten] { display: none; }
.fs-bearbeiten [data-nur-bearbeiten] { display: block; }

.fs-bearbeiten [data-feld] {
  cursor: text;
  border-radius: 6px;
  outline: 1.5px dashed var(--border2);
  outline-offset: 3px;
  transition: outline-color .14s, background .14s;
}
.fs-bearbeiten [data-feld]:hover {
  outline-color: var(--p);
  background: var(--p-xlight);
}
.fs-buehne.fs-bearbeiten [data-feld]:hover,
.fs-bearbeiten .fs-buehne [data-feld]:hover { background: rgba(255,255,255,.08); }

/* Leere Felder zeigen im Bearbeitenmodus, was hineingehoert — sonst
   waere da nichts zum Anklicken. */
.fs-bearbeiten [data-feld]:empty::before,
.fs-bearbeiten [data-feld][data-leer]:empty::before {
  content: attr(data-leer);
  color: var(--tx4); font-style: italic;
}
.fs-bearbeiten [data-feld]:empty { display: block; min-height: 1.4em; }

.fs-feldbox {
  width: 100%; font: inherit;
  border: 1.5px solid var(--p);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--surface); color: var(--tx);
  box-shadow: 0 0 0 3px var(--p-light);
}
.fs-feldbox:focus { outline: none; }
textarea.fs-feldbox { min-height: 130px; resize: vertical; line-height: 1.6; }

.fs-feldtaten { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.fs-feldtaten button {
  font: inherit; font-size: 13px; font-weight: 700;
  padding: 7px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border2); background: var(--surface);
  color: var(--tx2); cursor: pointer;
}
.fs-feldtaten button.sichern {
  background: var(--p); border-color: var(--p); color: #fff;
}
.fs-feldtaten .wink { font-size: 11.5px; color: var(--tx4); }

/* ═══ 11. Dialog ══════════════════════════════════════════════════════ */

.fs-dialog {
  border: 0; border-radius: var(--radius-lg);
  padding: 0; width: min(560px, calc(100vw - 32px));
  box-shadow: var(--shadow-md);
  color: var(--tx);
}
.fs-dialog::backdrop { background: rgba(10,22,40,.55); }

.fs-dialog-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  margin: 0;
}
.fs-dialog-kopf h2 {
  font-family: var(--font-head); font-size: 18px; font-weight: 800;
  margin: 0; color: var(--tx);
}
.fs-dialog-zu {
  font: inherit; font-size: 17px; line-height: 1;
  background: none; border: 0; cursor: pointer; color: var(--tx3);
  padding: 4px 6px;
}

.fs-dialog-satz {
  font-size: 13.5px; color: var(--tx2); line-height: 1.55;
  margin: 0; padding: 14px 20px 0;
}

.fs-zeitplan { padding: 12px 20px 4px; }

.fs-zeitzeile {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.fs-zeitzeile:last-child { border-bottom: 0; }

.fs-zeitzeile .tag {
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 128px; font-size: 14px; font-weight: 600; color: var(--tx);
  cursor: pointer;
}

.fs-zeitzeile .paare { display: flex; gap: 10px; flex-wrap: wrap; flex: 1 1 auto; }
.fs-zeitzeile .paar { display: inline-flex; align-items: center; gap: 5px; }
.fs-zeitzeile .paar em { color: var(--tx4); font-style: normal; }
.fs-zeitzeile input[type="time"] {
  font: inherit; font-size: 13.5px;
  padding: 5px 7px;
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--tx);
}
.fs-zeitzeile.zu .paare { opacity: .35; pointer-events: none; }

.fs-dialog-feld { display: block; padding: 8px 20px 4px; }
.fs-dialog-feld span {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--tx3); text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 5px;
}
.fs-dialog-feld input {
  width: 100%; font: inherit; font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--tx);
}

/* Zwei Auswahlfelder nebeneinander im Kopf des Termindialogs. */
.fs-dialog-raster {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px 0;
}
.fs-dialog-feld.schmal { flex: 1 1 180px; padding: 0; }
.fs-dialog-feld select {
  width: 100%; font: inherit; font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--tx);
}

.fs-dialog-abschnitt {
  padding: 4px 20px 0; margin-top: 10px;
  border-top: 1px solid var(--border);
}
.fs-dialog-abschnitt h3 {
  font-family: var(--font-head);
  font-size: 12px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: var(--tx3);
  margin: 14px 0 4px;
}
.fs-dialog-hinweis {
  font-size: 12.5px; color: var(--tx3); line-height: 1.5;
  margin: 0 0 8px;
}
.fs-dialog-feld input[type="datetime-local"] {
  width: 100%; font: inherit; font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--tx);
}

/* Der Dialog kann laenger werden als der Schirm — im Termindialog stehen
   sieben Tage plus zwei Vorschlaege untereinander. */
.fs-dialog { max-height: calc(100vh - 40px); overflow-y: auto; }

.fs-dialog-fehler {
  margin: 10px 20px 0; padding: 9px 11px;
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  color: #b91c1c; font-size: 13px;
}

.fs-dialog-fuss {
  display: flex; justify-content: flex-end; gap: 9px;
  padding: 16px 20px; margin-top: 8px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.fs-dialog-fuss .fs-knopf { background: var(--bg2); color: var(--tx2); border-color: var(--border2); }
.fs-dialog-fuss .fs-knopf:hover { background: var(--border); color: var(--tx); }
.fs-dialog-fuss .fs-knopf.voll {
  width: auto; margin: 0; background: var(--p); color: #fff; border-color: var(--p);
}

/* ═══ 12. Handy ═══════════════════════════════════════════════════════
   Die Buehne behaelt ihre Breite und verliert nur Polster: das Videobild
   ist der Grund, warum die Seite geoeffnet wurde. */

@media (max-width: 720px) {
  .huelle-weit { padding: 0 12px; }

  .fs-kopf {
    flex-direction: column; align-items: flex-start;
    gap: 14px; padding: 16px;
  }
  .fs-kopf-logo { width: 72px; height: 72px; }
  .fs-kopf-text h1 { font-size: 24px; }
  .fs-kopf-zeile { font-size: 15px; }

  .fs-buehne { padding: 12px 13px 14px; border-radius: var(--radius); }
  .fs-buehne-kopf { gap: 10px; padding-bottom: 11px; margin-bottom: 13px; }
  /* Der Name darf umbrechen. Ein abgeschnittenes "Nordlicht Technik G…"
     neben einem Zustandsschild sieht nach Fehler aus — der Name ist das
     Wichtigste in dieser Zeile. */
  .fs-buehne-kopf { flex-wrap: wrap; }
  .fs-buehne-titel { flex: 1 1 60%; }
  .fs-buehne-titel .wer { font-size: 15.5px; white-space: normal; line-height: 1.25; }
  .fs-live { padding: 4px 9px 4px 8px; font-size: 11px; }

  /* Hochkant ist 16:9 zu flach — die Flaeche wuerde zu einem Streifen. */
  .fs-zu { aspect-ratio: 4 / 3; padding: 18px 14px; }
  .fs-zu-uhr { width: 36px; height: 36px; margin-bottom: 6px; }

  .fs-karte, .fs-chat { padding: 15px 16px; border-radius: var(--radius); }
  .fs-mitte .ck-block { padding: 15px 16px !important; }

  .fs-mitte .ck-leute { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
  .fs-galerie { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 9px; }

  /* Die Bedienleiste muss mit dem Daumen erreichbar bleiben: lieber
     umbrechen als schrumpfen. */
  .fs-bedienung { gap: 7px; }
  .fs-bedienung .rtc-knopf { font-size: 13px; padding: 9px 12px; }

  .fs-leiste { flex-direction: column; align-items: stretch; gap: 10px; }
  .fs-leiste-rechts { justify-content: flex-start; }
  .fs-leiste-satz { display: none; }

  .fs-zeitzeile .tag { flex: 1 1 100%; }
}

/* Sehr schmale Geraete: die Zeitpaare untereinander, sonst quetscht der
   Dialog zwei Uhrzeiten in eine 130px-Spalte. */
@media (max-width: 420px) {
  .fs-zeitzeile .paare { flex-direction: column; align-items: flex-start; }
  .fs-modus { width: 100%; }
  .fs-modus-knopf { flex: 1 1 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   13. Das Messe-Cockpit, hell
   ═══════════════════════════════════════════════════════════════════════

   Der Messestand war ganz dunkel — Spalten, Karten, Listen. Auf einem
   grossen Schirm sah das aus wie eine Steuerzentrale und nicht wie eine
   Veranstaltung, zu der man jemanden einlaedt.

   Er bekommt deshalb dieselbe Gestaltung wie die Firmenseite: helle
   Spalten, dunkle Buehne. Umgeschaltet wird ueber EINE Klasse am
   Wurzelelement (`.ck.hell`) — die Bausteine selbst (_ck_links,
   _ck_rechts, _ck_leute) bleiben unveraendert und dienen weiter beiden
   Welten. Wer die dunkle Fassung zurueck will, nimmt die Klasse weg.

   Der Rahmen (.ck, .ck-spalte, die Umbrueche) steht unveraendert in
   public-pages.css; hier stehen nur die Farben und die Feinheiten. */

.ck.hell { color: var(--tx); }

/* ── Karten ─────────────────────────────────────────────────────────── */

.ck.hell .ck-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 16px 18px;
  color: var(--tx);
}
.ck.hell .ck-block > h2 { color: var(--tx3); }
.ck.hell .ck-block > h2 .zahl { color: var(--p-hover); }
.ck.hell .ck-leer { color: var(--tx3); }

/* ── Marke der Veranstaltung ────────────────────────────────────────── */

.ck.hell .ck-marke { padding: 18px 16px 16px; }
.ck.hell .ck-marke img {
  background: #fff; border-radius: var(--radius-sm);
  max-height: 74px; width: auto; object-fit: contain;
}
.ck.hell .ck-marke .titel {
  color: var(--tx); font-family: var(--font-head);
  font-size: 16px; font-weight: 800; line-height: 1.25;
}
.ck.hell .ck-marke .ort { color: var(--tx3); }

/* ── Navigation ─────────────────────────────────────────────────────── */

.ck.hell .ck-navi a,
.ck.hell .ck-navi button {
  color: var(--tx2); font-weight: 600;
  border-radius: var(--radius-sm);
}
.ck.hell .ck-navi a:hover,
.ck.hell .ck-navi button:hover { background: var(--p-xlight); color: var(--p-hover); }
.ck.hell .ck-navi .sym { opacity: .9; color: var(--p); }

/* ── Ansprechpartner ────────────────────────────────────────────────── */

.ck.hell .ck-person {
  background: var(--bg);
  border: 1px solid var(--border);
  transition: border-color .14s, transform .14s, box-shadow .14s;
}
.ck.hell .ck-person:hover:not(:disabled) {
  background: var(--surface); border-color: var(--p);
  transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
.ck.hell .ck-person:disabled { opacity: 1; }
.ck.hell .ck-person:disabled:hover { background: var(--bg); border-color: var(--border); transform: none; }
.ck.hell .ck-person .bild,
.ck.hell .ck-person .platzhalter { background: var(--p-xlight); color: var(--p-dark); }
.ck.hell .ck-person .name  { color: var(--tx); }
.ck.hell .ck-person .rolle { color: var(--tx3); }

.ck.hell .ck-punkt.offline { color: var(--tx4); }
.ck.hell .ck-punkt.frei    { color: #0f8f6f; }
.ck.hell .ck-punkt.busy    { color: #b45309; }
.ck.hell .ck-punkt.break   { color: #c2410c; }

/* ── Programm ───────────────────────────────────────────────────────
   Die Zeilen standen zuerst weiss auf weiss da: der Kasten war zu sehen,
   sein Inhalt nicht. Ein Grund, in einer hellen Fassung JEDE Klasse des
   dunklen Bestands durchzugehen und nicht nur die auffaelligen. */

.ck.hell .ck-punktzeile + .ck-punktzeile { border-top-color: var(--border); }
.ck.hell .ck-punktzeile .uhr { color: var(--tx3); }
.ck.hell .ck-punktzeile .was .titel { color: var(--tx); }
.ck.hell .ck-punktzeile .was .wer   { color: var(--tx3); }
.ck.hell .ck-punktzeile.jetzt {
  background: var(--p-xlight);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.ck.hell .ck-punktzeile.jetzt .uhr { color: var(--p-hover); }
/* "laeuft gerade" traegt im Markup ein helles Gruen als Inline-Farbe. */
.ck.hell .ck-punktzeile.jetzt .was .wer[style] { color: var(--p-hover) !important; }

/* ── Chatzeilen ─────────────────────────────────────────────────────
   Der Messe-Chat baut anders auf als der der Firmenseite: Sprecher und
   Text stehen in einer Zeile (.wer + .text), nicht in einer Blase. */

.ck.hell .ck-chatzeile .wer  { color: var(--p-hover); }
.ck.hell .ck-chatzeile.eigen .wer { color: #1d4ed8; }
.ck.hell .ck-chatzeile .text { color: var(--tx2); }
.ck.hell .ck-chatzeile.hinweis { color: var(--tx4); }

/* ── Video-Beitraege ────────────────────────────────────────────────── */

.ck.hell .ck-video video,
.ck.hell .ck-video .platte {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #000;
}
.ck.hell .ck-video .titel { color: var(--tx); font-size: 13.5px; line-height: 1.35; }
.ck.hell .ck-video .wer   { color: var(--tx3); }
/* Die Laufzeit steht im Markup mit einer dunklen Inline-Farbe — auf
   hellem Grund waere sie unsichtbar. */
.ck.hell .ck-video .titel span { color: var(--tx3) !important; }

/* ── Vorschaubild eines Video-Beitrags ──────────────────────────────
   Gilt fuer beide Fassungen, hell wie dunkel: das Standbild bringt seine
   eigene Farbe mit. */

.ck-vorschau {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: #000;
  border-radius: var(--radius); overflow: hidden;
  cursor: pointer; line-height: 0;
}
.ck-vorschau img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  transition: transform .25s, filter .2s;
}
.ck-vorschau:hover img { transform: scale(1.03); filter: brightness(1.06); }

/* Der Abspielknopf ist ein Dreieck aus Rahmen — ein Zeichen aus der
   Schriftart haenge sonst an der Emoji-Schrift des Geraets, und die
   faellt je nach System anders oder gar nicht aus. */
.ck-play {
  position: absolute; inset: 0; margin: auto;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(15,36,54,.62);
  border: 2px solid rgba(255,255,255,.85);
  display: grid; place-items: center;
  transition: background .16s, transform .16s;
}
.ck-play::before {
  content: ''; display: block;
  width: 0; height: 0; margin-left: 4px;
  border-left: 15px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.ck-vorschau:hover .ck-play { background: var(--p); transform: scale(1.06); }
.ck-vorschau:focus-visible .ck-play { outline: 3px solid var(--p-light); }

.ck-dauer {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(0,0,0,.72); color: #fff;
  font-size: 11.5px; font-weight: 700; line-height: 1;
  padding: 4px 7px; border-radius: 5px;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .ck-vorschau img, .ck-play { transition: none; }
  .ck-vorschau:hover img { transform: none; }
}

/* ── Stellenanzeigen ────────────────────────────────────────────────── */

.ck.hell .ck-stelle { border-top-color: var(--border); }
.ck.hell .ck-stelle::before { color: var(--p); }
.ck.hell .ck-stelle .titel { color: var(--tx); }
.ck.hell .ck-stelle .meta  { color: var(--tx3); }
.ck.hell .ck-stelle .mehr  { color: var(--p-hover); }
.ck.hell .ck-stelle:hover .titel { color: var(--p-hover); }

/* ── Dateien und Ablage ─────────────────────────────────────────────── */

.ck.hell .ck-datei .name { color: var(--tx); }
.ck.hell .ck-datei .meta { color: var(--tx3); }
.ck.hell .ck-datei .taten a { color: var(--p-hover); }
.ck.hell .ck-datei + .ck-datei { border-top: 1px solid var(--border); padding-top: 8px; }

.ck.hell .ck-ablage {
  border: 1.5px dashed var(--border2);
  color: var(--tx3); background: var(--bg);
}
.ck.hell .ck-ablage:hover { border-color: var(--p); color: var(--p-hover); }
.ck.hell .ck-ablage.drueber { border-color: var(--p); background: var(--p-xlight); }
.ck.hell .ck-fortschritt { background: var(--bg2); }
.ck.hell .ck-fortschritt i { background: var(--p); }

/* ── Chat ───────────────────────────────────────────────────────────── */

.ck.hell .ck-chatliste {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ck.hell .ck-chatzeile {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--tx);
}
.ck.hell .ck-chatzeile.selbst { background: var(--p-xlight); border-color: var(--p-light); }
.ck.hell .ck-chatzeile .wer { color: var(--tx3); }

.ck.hell .ck-chatform input {
  background: var(--surface); border: 1px solid var(--border2); color: var(--tx);
}
.ck.hell .ck-chatform input::placeholder { color: var(--tx4); opacity: 1; }
.ck.hell .ck-chatform input:disabled { background: var(--bg2); color: var(--tx3); }
.ck.hell .ck-chatform input:focus {
  outline: none; border-color: var(--p); box-shadow: 0 0 0 3px var(--p-light);
}
.ck.hell .ck-chatform button { background: var(--p); color: #fff; border: 0; }
.ck.hell .ck-chatform button:hover:not(:disabled) { background: var(--p-dark); }
.ck.hell .ck-chatform button:disabled { background: var(--border2); }

/* ── Meine Daten ────────────────────────────────────────────────────── */

.ck.hell .ck-meinedaten { color: var(--tx2); font-size: 13px; line-height: 1.55; }
.ck.hell .ck-meinedaten strong { color: var(--tx); }
/* Die Feldbeschriftungen tragen im Markup eine helle Inline-Farbe. */
.ck.hell .ck-meinedaten span[style] { color: var(--tx3) !important; }

/* ── Die Buehne bleibt dunkel ───────────────────────────────────────── */

.ck.hell .bt-buehne {
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255,255,255,.08);
}

/* ═══════════════════════════════════════════════════════════════════════
   14. Messebausteine auf der Firmenseiten-Fassung (21.08.2026)

   Der Messestand hat am 21.08.2026 den Aufbau des Firmenprofils
   uebernommen: `fs-kopf`, `fs-gitter`, `.fs-karte`. Damit ist der
   Wrapper `.ck.hell` weggefallen — und mit ihm die 73 Regeln aus
   Abschnitt 13, die die Cockpit-Bausteine ueberhaupt erst hell machen.

   Drei Bausteine sind trotzdem geblieben, weil es sie nur waehrend
   einer Messe gibt: Programm (`.ck-punktzeile`), Impulsvortraege
   (`.ck-video`) und der Weg zu den anderen Ausstellern (`.ck-navi`).
   Ohne die Regeln hier stuenden sie in ihrer dunklen Grundfassung auf
   einer weissen Karte — weisse Schrift auf Weiss, genau die Falle aus
   docs/firmenseiten.md ("Die Falle beim Umfaerben").

   Der Bauplan ist derselbe wie bei `.fs-mitte .ck-person` weiter oben:
   `.fs-mitte` ist der helle Zusammenhang.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Programm ───────────────────────────────────────────────────────── */

.fs-mitte .ck-punktzeile + .ck-punktzeile { border-top-color: var(--border); }
.fs-mitte .ck-punktzeile .uhr        { color: var(--tx3); }
.fs-mitte .ck-punktzeile .was .titel { color: var(--tx); }
.fs-mitte .ck-punktzeile .was .wer   { color: var(--tx3); }
.fs-mitte .ck-punktzeile.jetzt {
  background: var(--p-xlight);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.fs-mitte .ck-punktzeile.jetzt .uhr { color: var(--p-hover); }

/* "laeuft gerade" trug im alten Markup eine helle Inline-Farbe und
   brauchte deshalb ein !important, um sie zu ueberschreiben. Hier ist es
   eine Klasse — eine Farbe im style-Attribut ist genau das, was sich beim
   naechsten Umfaerben wieder raecht. */
.fs-mitte .ck-punktzeile .jetzt-marke { color: var(--p-hover); font-weight: 700; }

/* ── Impulsvortraege ────────────────────────────────────────────────── */

.fs-mitte .ck-video + .ck-video { margin-top: 16px; }
.fs-mitte .ck-video video,
.fs-mitte .ck-video .platte {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #000;
}
.fs-mitte .ck-video .titel { color: var(--tx); font-size: 13.5px; line-height: 1.35; }
.fs-mitte .ck-video .wer   { color: var(--tx3); }
.fs-mitte .ck-video .titel .dauer { color: var(--tx3); font-weight: 400; }

/* ── Weitere Aussteller ─────────────────────────────────────────────── */

.fs-mitte .ck-navi a {
  color: var(--tx2); font-weight: 600;
  border-radius: var(--radius-sm);
}
.fs-mitte .ck-navi a:hover { background: var(--p-xlight); color: var(--p-hover); }
.fs-mitte .ck-navi .sym    { opacity: .9; color: var(--p); }

/* ── Knopf in der Nicht-live-Fassung ────────────────────────────────── */

.fs-knopf.stumm {
  background: transparent;
  color: var(--tx2);
  border: 1px solid var(--border);
}
.fs-knopf.stumm:hover { background: var(--bg); color: var(--tx); }

/* Wo man steht — im Kopf der Messebuehne. Kein <h1>: das steht seit dem
   21.08.2026 im Seitenkopf darueber. */
.bt-buehne-wo {
  color: rgba(255,255,255,.72);
  font-size: 13px; font-weight: 600; letter-spacing: .3px;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   15. Aufgeräumt (21.08.2026)

   Die Seite kam auf 16 Blöcke und 16 Knöpfe. Der Vergleich mit einem
   Mitbewerber machte den Unterschied deutlich: er kommt mit 5 Blöcken
   und 2 Knöpfen aus. Was hier steht, ist die Folge davon —
   Zusammenlegen, nicht Verschönern.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Die Infospalte steht links ────────────────────────────────────────
   Wer auf einer Firmenseite landet, fragt zuerst „wer ist das“ und erst
   dann „kann ich jetzt reden“. Auf dem Handy dreht sich die Reihenfolge
   um: dort zählt das Gesprächsfenster zuerst, weil man die Seite genau
   deswegen öffnet. */
.fs-gitter { grid-template-columns: 330px minmax(0, 1fr); }
.fs-seite  { order: 1; }
.fs-mitte  { order: 2; }

/* ── Eine Karte für „wer ist das“ ───────────────────────────────────── */
.fs-visit .fs-person { margin-bottom: 14px; }
.fs-visit .fs-daten  { margin: 0 0 16px; }

.fs-zeitblock,
.fs-messeblock {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 14px;
}
.fs-zeittitel {
  font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--tx3) !important;
  margin: 0 0 8px !important;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* ── Die zwei Handlungen ───────────────────────────────────────────────
   Gleich breit, untereinander, am Ende der Karte. Der zweite ist
   ruhiger gezeichnet — beide gleich laut hiesse wieder: keiner
   entscheidet. */
.fs-haupttaten {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 16px;
}
.fs-knopf.voll.still {
  background: transparent;
  color: var(--p-dark);
  border: 1px solid var(--p-light);
  box-shadow: none;
}
.fs-knopf.voll.still:hover { background: var(--p-xlight); }

/* ── Der Gesprächsbereich ──────────────────────────────────────────────
   Chat, Ansprechpartner und Datenaustausch waren drei Karten an drei
   Stellen. Jetzt ein Rahmen um alle drei: sie gehören zum selben
   Vorgang und sind ausserhalb eines Gesprächs wertlos. */
.fs-gespraech {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
/* Die Bausteine darin bringen ihre eigenen Rahmen mit — hier stören
   sie, der äussere trägt. */
.fs-gespraech > * {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.fs-gespraech > * + * { border-top: 1px solid var(--border) !important; }

.fs-austausch { padding: 18px 20px; }
.fs-austausch > h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--tx3);
  margin: 0 0 10px; display: flex; align-items: center; gap: 8px;
}
.fs-austausch .fs-fussnote { margin-top: 12px; }

/* ── Video bei den Einblicken ──────────────────────────────────────── */
.fs-firmenvideo { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.fs-firmenvideo > h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--tx3); margin: 0 0 10px;
}

/* „Über uns“ sitzt in derselben Karte wie „Wir suchen“, eine Stufe
   leiser — es ist die Fortsetzung, nicht ein neues Thema. */
#ueber-uns { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
#ueber-uns > h2 { font-size: 15px !important; }

/* ── Schmale Schirme ───────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .fs-gitter { grid-template-columns: minmax(0, 1fr); }
  /* Auf dem Handy zuerst das Gespräch: deswegen öffnet man die Seite. */
  .fs-mitte  { order: 1; }
  .fs-seite  { order: 2; position: static; max-height: none; overflow: visible; }
}

/* ═══════════════════════════════════════════════════════════════════════
   16. Eine Bühne für beide Wege (28.08.2026)
   ═══════════════════════════════════════════════════════════════════════

   Sprechstunde und Bewerbertag rendern seit heute dasselbe
   Gesprächsfenster (`_fs_buehne`). Was hier steht, sind die paar Stücke,
   die vorher nur die Messefassung hatte und die es jetzt in der
   gemeinsamen Fassung braucht.
   ═══════════════════════════════════════════════════════════════════════ */

/* Wer am Stand sitzt — VOR dem Anklopfen. Stand in der alten
   Messebühne als Inline-Farbe im Markup; eine Farbe im style-Attribut
   ist genau das, was sich beim nächsten Umfärben rächt. */
.fs-buehne-mitwem {
  margin: 0 0 14px;
  font-size: 14px; font-weight: 600;
  color: #6ee7b7;
}
.fs-buehne-mitwem strong { color: #fff; }

/* Die schwarze Fläche darf wachsen. `aspect-ratio` gibt nur die
   Wunschgröße vor — ohne dies liefe der längere Text der eigenen
   Standvorschau unten aus dem Kasten heraus, auf dem Handy schon bei
   vier Zeilen. */
.fs-zu {
  min-height: -webkit-fit-content;
  min-height: fit-content;
}

.fs-zu-fussnote {
  margin: 16px 0 0; max-width: 46ch;
  font-size: 12px; line-height: 1.55;
  color: rgba(255,255,255,.5);
}

/* Der Weg ins eigene Standfenster. Es ist derselbe Kasten wie
   „geschlossen“ — für den Betreiber ist die Standseite eine Vorschau
   und kein Zugang, und beides soll gleich aussehen. */
#bt-eigen .fs-zu-uhr { color: rgba(255,255,255,.35); }

/* ── Der eigene Name im Gesprächsfenster (03.09.2026) ─────────────────
   Steht dort, wo bis heute das Kollegenraster stand. Ansprechpartner ist
   seitdem, wer live geht — und der soll seinen Namen dort geradeziehen
   können, wo er live geht, nicht in der Pflegemaske. */
.ck-namenszeile { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ck-namenszeile .form-input { flex: 1 1 200px; min-width: 0; }
.ck-feldname {
  display: block; margin-bottom: 5px;
  font-size: 13px; font-weight: 700; color: var(--tx2);
}
.ck-feldhinweis { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--tx3); }
.ck-meldung {
  margin: 0 0 12px; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 13.5px; line-height: 1.55;
}
.ck-meldung.gut      { background: var(--p-xlight); color: var(--p-dark); border: 1px solid var(--p-light); }
.ck-meldung.schlecht { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }