/* Eigene Ergänzungen zu Bootstrap */

/* Leistungsabzeichen: dezente Farben der Stufen (Punkt + leicht getönter Hintergrund) */
.lp-abzeichen {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .1em .65em .1em .45em; border-radius: 999px; font-size: .875em; white-space: nowrap;
  background: var(--lp-grund, #f1f3f5); border: 1px solid var(--lp-rand, #dee2e6); color: #343a40;
}
.lp-abzeichen::before {
  content: ""; width: .85em; height: .85em; border-radius: 50%; flex: none;
  background: var(--lp-punkt, #adb5bd); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.lp-stufe-1 { --lp-grund: #f7efe7; --lp-rand: #e2c4a6; --lp-punkt: #b87333; }                          /* Bronze */
.lp-stufe-2 { --lp-grund: #f3f4f6; --lp-rand: #cfd4da; --lp-punkt: linear-gradient(135deg, #e9ecef, #9ea4ab); } /* Silber */
.lp-stufe-3 { --lp-grund: #fbf6e3; --lp-rand: #e8d58f; --lp-punkt: #d4af37; }                          /* Gold */
.lp-stufe-4 { --lp-grund: #fbf6e3; --lp-rand: #e8d58f; --lp-punkt: linear-gradient(135deg, #d4af37 50%, #2f64c8 50%); } /* Gold-Blau */
.lp-stufe-5 { --lp-grund: #fbf6e3; --lp-rand: #e8d58f; --lp-punkt: linear-gradient(135deg, #d4af37 50%, #2e8b4f 50%); } /* Gold-Grün */
.lp-stufe-6 { --lp-grund: #fbf6e3; --lp-rand: #e8d58f; --lp-punkt: linear-gradient(135deg, #d4af37 50%, #c0392b 50%); } /* Gold-Rot */

/* ---------------------------------------------------------------------------
   Grundlayout im Stil gängiger Feuerwehr-Verwaltungen:
   dunkle Seitenleiste links, helle Arbeitsfläche, weiße Karten
   --------------------------------------------------------------------------- */
:root {
  --ffw-rot: #c8102e;
  --ffw-leiste: #2b313b;
  --ffw-leiste-hover: #3a414d;
  --ffw-grund: #eef0f3;
  --ffw-zeile: #f3f4f6;
  --ffw-text-leise: #6c757d;
}
body.ffw { background: var(--ffw-grund); }
.ffw-layout { display: flex; min-height: 100vh; }

/* Seitenleiste */
/* !important, weil Bootstrap das Menü auf großen Bildschirmen sonst durchsichtig macht */
.ffw-sidebar { background: var(--ffw-leiste) !important; color: #fff; }
@media (min-width: 768px) {
  .ffw-sidebar { width: 88px; flex: none; position: sticky; top: 0; height: 100vh; }
}
.ffw-sidebar .offcanvas-body { display: flex; flex-direction: column; padding: .5rem 0; height: 100%; }
.ffw-sidebar-marke { display: flex; justify-content: center; padding: .5rem 0 .75rem; }
.ffw-sidebar-marke img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 50%; padding: 2px; }
.ffw-nav-link {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .6rem .25rem; color: #c9ced6; text-decoration: none; font-size: .7rem; text-align: center;
  border-left: 3px solid transparent;
}
.ffw-nav-link .bi { font-size: 1.35rem; line-height: 1; }
.ffw-nav-link:hover { background: var(--ffw-leiste-hover); color: #fff; }
.ffw-nav-link.aktiv { color: #fff; border-left-color: var(--ffw-rot); background: var(--ffw-leiste-hover); }
.ffw-nav-link.abmelden { color: #ff8a8a; background: none; border: 0; width: 100%; }
@media (max-width: 767.98px) {
  .ffw-nav-link { flex-direction: row; gap: .75rem; font-size: 1rem; padding: .75rem 1.25rem; }
}

/* Kopfzeile */
.ffw-inhalt { flex: 1; min-width: 0; }
.ffw-kopf {
  display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem;
  background: #fff; border-bottom: 3px solid var(--ffw-rot); min-height: 64px;
}
.ffw-kopf .ffw-name { font-weight: 600; font-size: 1.15rem; color: #2b313b; text-decoration: none; }
.ffw-kopf .ffw-wappen { height: 44px; width: auto; }
.ffw-kopf .ffw-logo { height: 48px; width: auto; margin-left: auto; }
.ffw-kopf .ffw-benutzer { font-size: .85rem; color: var(--ffw-text-leise); }
.ffw-platzhalter-bild {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 8px; background: var(--ffw-rot); color: #fff; font-size: 1.4rem;
}

/* Seitentitel */
.ffw-seitentitel { font-size: 1.6rem; font-weight: 400; color: #2b313b; margin: 1.25rem 0 1rem; }
.ffw-seitentitel small { font-size: .9rem; font-style: italic; color: var(--ffw-text-leise); }

/* Karten wie im Personalbogen */
.ffw-karte { background: #fff; border-radius: .5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); height: 100%; }
.ffw-karte-kopf { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem .4rem; font-size: 1.05rem; color: #3d4450; }
.ffw-karte-kopf .bi { color: var(--ffw-text-leise); }
.ffw-karte-inhalt { padding: 0 1rem 1rem; }

/* Daten-Zeilen: Bezeichnung | Wert, abwechselnd hinterlegt */
.ffw-daten { margin: 0; font-size: .9rem; }
.ffw-daten > div { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: .5rem; padding: .35rem .5rem; border-radius: .25rem; }
.ffw-daten > div:nth-child(even) { background: var(--ffw-zeile); }
.ffw-daten dt { font-weight: 600; color: #2b313b; overflow-wrap: anywhere; hyphens: auto; }
.ffw-daten dd { margin: 0; color: #495057; }
.ffw-daten .zusatz { font-size: .8em; color: var(--ffw-text-leise); font-style: italic; }

/* Leistungsabzeichen als Medaillen (Spalte im Personalbogen) */
.ffw-medaillen { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.ffw-medaille { display: flex; flex-direction: column; align-items: center; gap: .25rem; font-size: .7rem; color: var(--ffw-text-leise); text-align: center; }
.ffw-medaille-scheibe {
  width: 52px; height: 52px; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 26% 22%, #fff9 0 9%, transparent 10%), var(--lp-punkt, #adb5bd);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35), 0 1px 3px rgba(0, 0, 0, .25);
  display: flex; align-items: center; justify-content: center; color: rgba(0, 0, 0, .55); font-size: 1.3rem;
}

/* Platzhalterbild (gezeichnete Person) */
.ffw-foto-rahmen { width: 100%; max-width: 170px; }
.ffw-foto-rahmen .ffw-avatar { width: 100%; height: auto; display: block; border-radius: .5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.ffw-avatar-klein .ffw-avatar { display: block; border-radius: 50%; }

/* Foto bzw. Platzhalter */
.ffw-foto {
  width: 100%; max-width: 170px; aspect-ratio: 4 / 5; border-radius: .5rem; background: #dfe3e8;
  display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: #8a94a3; font-weight: 300;
}

/* Statuspunkt (z. B. G26.3 gültig / abgelaufen) */
.ffw-punkt { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-left: .35em; vertical-align: middle; }
.ffw-punkt.gruen { background: #198754; }
.ffw-punkt.gelb { background: #ffc107; }
.ffw-punkt.rot { background: #dc3545; }

/* Tabellen auf der Arbeitsfläche */
.ffw-tabelle { background: #fff; border-radius: .5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); overflow: hidden; }
.ffw-tabelle thead th { background: var(--ffw-zeile); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #5c6470; border-bottom: 0; }

/* Anmeldeseite */
.ffw-anmeldung-marken { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin: 2rem 0 1.25rem; }
.ffw-anmeldung-marken img { height: 90px; width: auto; }