/* HKJF-Design fuer das Ehrungsportal.
   Eine zentrale Datei mit Design-Tokens statt verstreuter Inline-Styles und
   handgetippter Farbwerte (Issue #12). Vorbild ist die Website (hkjf.de).
   Alle Assets selbst gehostet - keine CDN, keine Google-Fonts (Datenschutz). */

/* --- Schrift: Fira Sans Condensed, selbst gehostet ------------------------ */
@font-face {
  font-family: "Fira Sans Condensed";
  src: url("../fonts/FiraSansCondensed-400-latin.3904ba23da34.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fira Sans Condensed";
  src: url("../fonts/FiraSansCondensed-600-latin.db9d32b9ef92.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fira Sans Condensed";
  src: url("../fonts/FiraSansCondensed-700-latin.9402071051fe.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- Farb-Tokens (je einmal definiert) ----------------------------------- */
:root {
  --hkjf-navy:     #2a3366;  /* Primaer, Tiefblau */
  --hkjf-navy-900: #20284f;  /* abgedunkelt, Tiefe/Hover */
  --hkjf-rot:      #dd0935;  /* Sekundaer, offizieller CD-Wert */
  --hkjf-rot-900:  #a30828;  /* Link-Hover */
  --hkjf-creme:    #f9f4ea;  /* Primaer, Sand (Seitenhintergrund) */
  --hkjf-hellblau: #bbd8e9;  /* Nav-Text auf Navy, Wert wie hkjf.de */
  --hkjf-tinte:    #1b2138;  /* Text auf Creme */
  --ehr-ease:      cubic-bezier(.4, 0, .2, 1);  /* einheitliche Bewegungskurve */

  /* Bootstrap an die Marke binden, damit Buttons/Alerts/Fehler die HKJF-
     Farben nutzen statt des Bootstrap-Blau/-Rot (#0d6efd, #dc3545). */
  --bs-primary:        #2a3366;
  --bs-primary-rgb:    42, 51, 102;
  --bs-danger:         #dd0935;
  --bs-danger-rgb:     221, 9, 53;
  /* .alert-danger liest NICHT --bs-danger, sondern die Subtle-/Emphasis-Tokens
     (sonst bliebe das Alert Bootstrap-rosa). Tint/Shade des HKJF-Rots. */
  --bs-danger-bg-subtle:     #f8ced7;
  --bs-danger-border-subtle: #f19dae;
  --bs-danger-text-emphasis: #580415;
  --bs-link-color:     #dd0935;
  --bs-link-color-rgb: 221, 9, 53;
  --bs-link-hover-color: #a30828;
}

/* --- Grundgeruest -------------------------------------------------------- */
html, body {
  background-color: var(--hkjf-creme);
}
body {
  font-family: "Fira Sans Condensed", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--hkjf-tinte);
  /* Platz fuer die feste Hauptmenueleiste; mit Admin-Menue mehr (Body-Klasse). */
  padding-top: 120px;
}
body.has-admin-menu {
  padding-top: 180px;
}
h1, h2, h3, h4 {
  color: var(--hkjf-navy);
  font-weight: 700;
}
a {
  color: var(--hkjf-rot);
  text-decoration: none;
}
a:hover {
  color: var(--hkjf-rot-900);
  text-decoration: underline;
}

/* --- Buttons (Marke) ----------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--hkjf-navy);
  --bs-btn-border-color: var(--hkjf-navy);
  --bs-btn-hover-bg: var(--hkjf-navy-900);
  --bs-btn-hover-border-color: var(--hkjf-navy-900);
  --bs-btn-active-bg: var(--hkjf-navy-900);
  --bs-btn-active-border-color: var(--hkjf-navy-900);
}
.btn-danger {
  --bs-btn-bg: var(--hkjf-rot);
  --bs-btn-border-color: var(--hkjf-rot);
  --bs-btn-hover-bg: var(--hkjf-rot-900);
  --bs-btn-hover-border-color: var(--hkjf-rot-900);
}

/* --- Kopfband wie die Website: Creme, rote Oberkante -------------------- */
.ehr-header {
  background: var(--hkjf-creme);
  border-top: 4px solid var(--hkjf-rot);      /* Feuerwehr-Signal, wie hkjf.de */
  box-shadow: 0 1px 0 rgba(42, 51, 102, .08);
  min-height: 84px;
  z-index: 1050;                              /* ueber dem Sektions-Band */
}
.ehr-header .navbar-brand img { height: 56px; width: auto; }

/* Hamburger-Dropdown: weiss, rote Oberkante, einheitliche Navy-Eintraege */
.ehr-dropdown {
  background: #fff;
  border: 1px solid #e7e9f0;
  border-top: 3px solid var(--hkjf-rot);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 30px rgba(42, 51, 102, .18);
}
.ehr-dropdown .nav-link,
.ehr-dropdown .dropdown-item {
  color: var(--hkjf-navy);
  font-weight: 500;
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .85rem; border-radius: 8px;
}
.ehr-dropdown .nav-link i,
.ehr-dropdown .dropdown-item i { color: var(--hkjf-navy); width: 1.2em; text-align: center; }
.ehr-dropdown .nav-link:hover,
.ehr-dropdown .nav-link.active,
.ehr-dropdown .dropdown-item:hover { background: var(--hkjf-creme); color: var(--hkjf-navy); }

/* Sektions-Nav (Navy-Band): lesbare Links statt ausgewaschen, aktiv weiss
   mit rotem Unterstrich (greift den Website-Motiv auf). */
.ehr-subnav { background: var(--hkjf-navy); top: 84px; z-index: 1040; }
.ehr-subnav .nav-link {
  color: var(--hkjf-hellblau);
  font-weight: 500;
  position: relative;
}
.ehr-subnav .nav-link:hover,
.ehr-subnav .nav-link:focus { color: #ffffff; }
.ehr-subnav .nav-link.active { color: #ffffff; font-weight: 700; }
/* Roter Unterstrich wächst beim Hover ein (Website-Motiv), aktiv bleibt er stehen. */
.ehr-subnav .nav-link::after {
  content: ""; position: absolute; left: .6rem; right: .6rem; bottom: 1px;
  height: 3px; background: var(--hkjf-rot); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ehr-ease);
}
.ehr-subnav .nav-link:hover::after,
.ehr-subnav .nav-link.active::after { transform: scaleX(1); }
/* Trenner zwischen den Subnav-Gruppen (Start | Zu bearbeiten | Erledigt | Alle) */
.ehr-subnav-trenner {
  display: inline-block; width: 1px; height: 1.4rem;
  background: rgba(255, 255, 255, .35); margin: 0 .4rem;
}

/* --- Fehlertexte in HKJF-Rot statt Bootstrap-Rot ------------------------- */
.text-danger,
.invalid-feedback,
.errorlist {
  color: var(--hkjf-rot) !important;
}
.errorlist {
  list-style: none;
  padding-left: 0;
  margin-top: .25rem;
}

/* --- Status-Verlauf (wo steckt der Antrag: Kreis -> HKJF) ----------------- */
.ehr-statusverlauf {
  border: 1px solid var(--hkjf-hellblau);
  border-left-width: 4px;
  border-radius: .5rem;
  background: #fff;
  padding: .85rem 1rem;
}
.ehr-statusverlauf-schritte {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
}
.ehr-statusverlauf-chip {
  font-size: .85rem;
  font-weight: 600;
  padding: .4rem .6rem;
}
.ehr-statusverlauf-pfeil {
  color: var(--hkjf-navy);
  opacity: .5;
}
.ehr-statusverlauf-text {
  margin: .55rem 0 0;
  font-weight: 600;
  color: var(--hkjf-tinte);
}
/* Linke Kante signalisiert den Gesamtstand. */
.ehr-status-genehmigt { border-left-color: var(--bs-success); }
.ehr-status-abgelehnt { border-left-color: var(--hkjf-rot); }
.ehr-status-wartet    { border-left-color: var(--bs-warning); }

/* --- Wellen-Motiv (Signatur-Element von hkjf.de) ------------------------- */
.ehr-welle {
  display: block; width: 100%;
  height: clamp(28px, 4vw, 46px); line-height: 0;
}
.ehr-welle--flip { transform: scaleY(-1); }

/* --- Navy-CTA-Band mit Wellen-Übergang (wie die Sektionen auf der Website) */
.ehr-cta-band {
  background: var(--hkjf-navy);
  color: #fff;
}
/* Die (navyfarbene) Welle sitzt oberhalb des Bandes und läuft in die Creme-
   Fläche darüber aus - genau der Website-Übergang. */
.ehr-cta-band > .ehr-welle {
  position: absolute; left: 0; right: 0; bottom: calc(100% - 1px);
}
.ehr-cta-band h1, .ehr-cta-band h2, .ehr-cta-band h3 { color: #fff; }
.ehr-cta-band .ehr-cta-text { color: var(--hkjf-hellblau); }

/* --- Politur: Marken-Karte für Inhaltsflächen ---------------------------- */
.ehr-karte {
  background: #fff;
  border: 1px solid #e7e9f0;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(42, 51, 102, .06);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.ehr-danke-icon {
  font-size: 3.25rem;
  line-height: 1;
  color: var(--bs-success);
}

/* --- Abschnittstitel mit rotem Balken (Website-Signatur) ----------------- */
.ehr-titel {
  position: relative;
  padding-bottom: .5rem;
  margin-bottom: 1rem;
}
.ehr-titel::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 64px; height: 5px; border-radius: 3px;
  background: var(--hkjf-rot);
}
/* Zentrierte Variante (Balken mittig unter dem Titel). */
.ehr-titel--center { text-align: center; }
.ehr-titel--center::after { left: 50%; transform: translateX(-50%); }

/* --- Pill-Badges (Website nutzt durchgängig runde Badges) ----------------- */
.badge { border-radius: 999px; }

/* --- Navy-Footer mit Wellen-Übergang ------------------------------------- */
.ehr-footer {
  background: var(--hkjf-navy-900);
  color: #fff;
}
.ehr-footer > .ehr-welle {
  position: absolute; left: 0; right: 0; bottom: calc(100% - 1px);
}
.ehr-footer-logo { height: 54px; width: auto; margin-bottom: .9rem; }
.ehr-footer-claim {
  text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; font-size: .82rem; line-height: 1.5;
  color: var(--hkjf-hellblau); margin: 0;
}
.ehr-footer-h {
  font-size: 1rem; color: #fff; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .7rem;
}
.ehr-footer-nav { list-style: none; padding: 0; margin: 0; }
.ehr-footer-nav li { margin-bottom: .45rem; }
.ehr-footer-nav a { color: var(--hkjf-hellblau); text-decoration: none; }
.ehr-footer-nav a:hover { color: #fff; text-decoration: underline; }
.ehr-footer-hr { border-color: rgba(255, 255, 255, .18); margin: 1.5rem 0 1rem; }
.ehr-footer-copy { color: rgba(255, 255, 255, .7); font-size: .85rem; }

/* --- Micro-Interactions (Stark, Punkt 5) --------------------------------- */
/* Buttons reagieren auf Druck (scale) mit weicher Kurve. */
.btn {
  transition: transform .12s var(--ehr-ease),
              box-shadow .2s var(--ehr-ease),
              background-color .2s var(--ehr-ease),
              border-color .2s var(--ehr-ease),
              color .2s var(--ehr-ease);
}
.btn:active { transform: scale(.97); }
/* Fokusring in Hellblau (wie hkjf.de), auch für Tom Select. */
.form-control:focus,
.form-select:focus,
.ts-wrapper.focus .ts-control {
  border-color: var(--hkjf-navy);
  box-shadow: 0 0 0 3px rgba(186, 215, 233, .45);
}
/* Karten können als anklickbare Fläche „anheben“ (Modifier .ehr-karte--hover). */
.ehr-karte {
  transition: box-shadow .2s var(--ehr-ease),
              border-color .2s var(--ehr-ease),
              transform .2s var(--ehr-ease);
}
.ehr-karte--hover:hover {
  box-shadow: 0 16px 40px rgba(42, 51, 102, .18);
  border-color: var(--hkjf-navy);
  transform: translateY(-2px);
}

/* --- Listen: Marken-Hover + Pill-Filterleiste (Mittel-Reskin) ------------ */
table.table-hover { --bs-table-hover-bg: rgba(186, 215, 233, .28); }
.ehr-listbar .btn,
#filterBox .btn { border-radius: 999px; }
#filterBox .form-control,
#filterBox .form-select { border-radius: 999px; }