/* =====================================================================
   MY OWN ROADIE – Hell & Dunkel mit Seitenleiste (auf Bootstrap 5.3)
   --hv-accent       Linien, Rahmen, Icons (hell: Oliv, dunkel: Limette)
   --hv-accent-fill  Flächen wie Buttons und Badges (Limette) – Text darauf: --hv-on-accent
   --hv-agency       alles, was nur die Agentur betrifft (Violett) – hebt sich vom Band-Bereich ab
   --hv-tech         alles, was Techniker betrifft (Orange)
   ===================================================================== */

/* ---------- Farben HELL ---------- */
:root,
[data-bs-theme="light"] {
  --hv-bg:            #f4f4f0;
  --hv-surface:       #ffffff;
  --hv-surface-2:     #f0f0ec;
  --hv-surface-3:     #e6e6e0;
  --hv-border:        #e2e2dc;
  --hv-border-strong: #cfcfc6;
  --hv-text:          #1c1c22;
  --hv-heading:       #0b0b12;
  --hv-muted:         #66666f;
  --hv-nav-text:      #4a4a54;
  --hv-label:         #4d4d57;
  --hv-input-bg:      #ffffff;
  --hv-placeholder:   #a1a1a8;
  --hv-accent:        #5b8a00;
  --hv-accent-rgb:    91, 138, 0;
  --hv-accent-hover:  #4a7300;
  --hv-accent-text:   #3f6100;
  --hv-accent-soft:   rgba(200, 255, 46, .32);
  --hv-accent-fill:   #c8ff2e;
  --hv-accent-fill-hover: #b6f00f;
  --hv-on-accent:     #0b0b12;
  --hv-agency:        #6a4cf5;
  --hv-agency-text:   #4f33cf;
  --hv-agency-soft:   rgba(106, 76, 245, .07);
  --hv-agency-active: rgba(106, 76, 245, .15);
  --hv-agency-border: rgba(106, 76, 245, .25);
  --hv-tech:          #ea580c;
  --hv-tech-text:     #c2410c;
  --hv-tech-soft:     rgba(234, 88, 12, .07);
  --hv-tech-active:   rgba(234, 88, 12, .15);
  --hv-tech-border:   rgba(234, 88, 12, .28);
  --hv-studio:        #5b8a00;
  --hv-studio-text:   #3f6100;
  --hv-studio-soft:   rgba(200, 255, 46, .14);
  --hv-studio-active: rgba(200, 255, 46, .38);
  --hv-studio-border: rgba(91, 138, 0, .32);
  --hv-network:        #db2777;
  --hv-network-text:   #be185d;
  --hv-network-soft:   rgba(219, 39, 119, .07);
  --hv-network-active: rgba(219, 39, 119, .15);
  --hv-network-border: rgba(219, 39, 119, .3);
  --hv-topbar-bg:     rgba(255, 255, 255, .88);
  --hv-card-shadow:   0 1px 2px rgba(11, 11, 18, .05);
  --hv-fc-bg-opacity: .85;
  --hv-today-ring:    #ffd000;
  --hv-backdrop:      .45;
  --brand-dot:        #0b0b12;
  --brand-ring:       var(--hv-surface);

  --bs-body-bg-rgb: 244, 244, 240;
  --bs-body-color-rgb: 28, 28, 34;
  --bs-emphasis-color: #000;
  --bs-link-color-rgb: 28, 28, 34;
  --bs-link-hover-color-rgb: 63, 97, 0;
}

/* ---------- Farben DUNKEL ---------- */
[data-bs-theme="dark"] {
  --hv-bg:            #0b0b12;
  --hv-surface:       #13131b;
  --hv-surface-2:     #1b1b25;
  --hv-surface-3:     #252532;
  --hv-border:        #262633;
  --hv-border-strong: #3a3a4a;
  --hv-text:          #e8e8ee;
  --hv-heading:       #ffffff;
  --hv-muted:         #8a8a99;
  --hv-nav-text:      #b4b4c0;
  --hv-label:         #b9b9c5;
  --hv-input-bg:      #0e0e16;
  --hv-placeholder:   #5c5c6a;
  --hv-accent:        #c8ff2e;
  --hv-accent-rgb:    200, 255, 46;
  --hv-accent-hover:  #d6ff5c;
  --hv-accent-text:   #d4ff5a;
  --hv-accent-soft:   rgba(200, 255, 46, .12);
  --hv-accent-fill:   #c8ff2e;
  --hv-accent-fill-hover: #d6ff5c;
  --hv-on-accent:     #0b0b12;
  --hv-agency:        #a58bff;
  --hv-agency-text:   #c2b2ff;
  --hv-agency-soft:   rgba(165, 139, 255, .09);
  --hv-agency-active: rgba(165, 139, 255, .2);
  --hv-agency-border: rgba(165, 139, 255, .28);
  --hv-tech:          #fb923c;
  --hv-tech-text:     #fdba74;
  --hv-tech-soft:     rgba(251, 146, 60, .09);
  --hv-tech-active:   rgba(251, 146, 60, .2);
  --hv-tech-border:   rgba(251, 146, 60, .3);
  --hv-studio:        #c8ff2e;
  --hv-studio-text:   #d4ff5a;
  --hv-studio-soft:   rgba(200, 255, 46, .05);
  --hv-studio-active: rgba(200, 255, 46, .14);
  --hv-studio-border: rgba(200, 255, 46, .26);
  --hv-network:        #f472b6;
  --hv-network-text:   #f9a8d4;
  --hv-network-soft:   rgba(244, 114, 182, .09);
  --hv-network-active: rgba(244, 114, 182, .2);
  --hv-network-border: rgba(244, 114, 182, .32);
  --hv-topbar-bg:     rgba(19, 19, 27, .88);
  --hv-card-shadow:   none;
  --hv-fc-bg-opacity: .8;
  --hv-today-ring:    #ffe600;
  --hv-backdrop:      .7;
  --brand-dot:        #ffffff;
  --brand-ring:       var(--hv-surface);

  --bs-body-bg-rgb: 11, 11, 18;
  --bs-body-color-rgb: 232, 232, 238;
  --bs-emphasis-color: #fff;
  --bs-link-color-rgb: 255, 255, 255;
  --bs-link-hover-color-rgb: 200, 255, 46;
}

/* ---------- Gemeinsam (Bootstrap-Variablen) ---------- */
:root,
[data-bs-theme] {
  --hv-sidebar-w: 250px;
  --hv-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hv-brand-font: "Unbounded", var(--hv-font);

  --bs-body-font-family: var(--hv-font);
  --bs-body-font-size: .9rem;
  --bs-body-line-height: 1.55;
  --bs-body-bg: var(--hv-bg);
  --bs-body-color: var(--hv-text);
  --bs-heading-color: var(--hv-heading);
  --bs-secondary-color: var(--hv-muted);
  --bs-secondary-bg: var(--hv-surface-2);
  --bs-tertiary-bg: var(--hv-surface);
  --bs-border-color: var(--hv-border);
  --bs-primary: var(--hv-accent);
  --bs-primary-rgb: var(--hv-accent-rgb);
  --bs-link-color: var(--hv-heading);
  --bs-link-hover-color: var(--hv-accent-text);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 12px;
  --bs-border-radius-xl: 16px;
}

body.hv-body {
  background: var(--hv-bg);
  color: var(--hv-text);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; }
::selection { background: rgba(200, 255, 46, .45); color: #0b0b12; }
code { color: var(--hv-accent-text); }

/* Logo (Icon + Schriftzug): public/assets/brand/brand.css */

/* =====================================================================
   Grundlayout
   ===================================================================== */
.hv-main { min-height: 100vh; display: flex; flex-direction: column; }
.hv-content { flex: 1; width: 100%; max-width: 1320px; padding: 2rem 2.5rem 3rem; }

@media (min-width: 768px) {
  .hv-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--hv-sidebar-w);
    z-index: 1030;
  }
  .hv-main { margin-left: var(--hv-sidebar-w); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  :root, [data-bs-theme] { --hv-sidebar-w: 220px; }
  .hv-content { padding: 1.5rem 1.5rem 2.5rem; }
}
@media (max-width: 767.98px) {
  .hv-sidebar { --bs-offcanvas-width: 280px; --bs-offcanvas-bg: var(--hv-surface); }
  .hv-content { padding: 1.25rem 1rem 2rem; }
  .form-control, .form-select { font-size: 16px !important; } /* verhindert Zoom auf dem iPhone */
}

/* =====================================================================
   Seitenleiste
   ===================================================================== */
.hv-sidebar-inner {
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  background: var(--hv-surface);
  border-right: 1px solid var(--hv-border);
}
.hv-sidebar-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1.25rem 1rem 1rem;
}

.hv-sidebar-brand { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; min-width: 0; }

/* Paket unter dem Logo (Premium, Agentur, Hauptadmin …) */
.hv-plan {
  display: inline-flex; align-items: center; gap: .35rem;
  max-width: 100%;
  padding: .2rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--hv-accent-rgb), .45);
  background: var(--hv-accent-soft);
  color: var(--hv-heading);
  font-size: .7rem; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hv-plan i { color: var(--hv-accent-text); }

/* Knopf „+ Neu“ unter dem Logo – je Rolle das, was man am häufigsten anlegt */
.hv-side-new { padding: 0 1rem .75rem; }
.hv-side-new .dropdown-menu { min-width: calc(100% - 2rem); }
/* Einträge in derselben Schrift wie das Menü – das Menü wird so breit wie der längste Eintrag */
.hv-side-new .dropdown-item { font-size: .875rem; font-weight: 500; padding: .4rem .85rem; }

/* Band-Wechsler über „+ Neu“ (Agenturen, mehrere Bands) */
.hv-side-switch { padding: 0 1rem .6rem; }
.hv-side-switch .dropdown-menu { width: calc(100% - 2rem); max-height: 60vh; overflow-y: auto; }
.hv-side-switch-btn {
  width: 100%;
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .6rem;
  border: 1px solid var(--hv-border); border-radius: 10px;
  background: transparent; color: var(--hv-heading);
  font-weight: 600; text-align: left;
}
.hv-side-switch-btn:hover, .hv-side-switch-btn[aria-expanded="true"] { background: var(--hv-accent-soft); }
.hv-side-switch-btn::after { margin-left: auto; }
.hv-side-switch-avatar {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.8rem; height: 1.8rem; border-radius: 8px;
  background: var(--hv-accent-soft); color: var(--hv-accent-text);
  font-size: .72rem; font-weight: 700;
}
.hv-side-switch-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hv-side-nav { flex: 1; overflow-y: auto; scrollbar-width: thin; padding: .25rem .75rem 1rem; }

/* Menügruppen – auf-/zuklappbar (details/summary) */
.hv-side-group { margin-bottom: .35rem; }
.hv-side-group--plain { padding-bottom: .35rem; margin-bottom: .5rem; border-bottom: 1px solid var(--hv-border); }
.hv-side-group-head {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .75rem .4rem;
  border-radius: 8px;
  font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--hv-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color .15s, background .15s;
}
.hv-side-group-head::-webkit-details-marker { display: none; }
.hv-side-group-head:hover { color: var(--hv-heading); background: var(--hv-surface-2); }
.hv-side-group-head > i:first-child { font-size: .85rem; }
.hv-side-group[open] > .hv-side-group-head { color: var(--hv-text); }
.hv-side-group[data-hv-nav-active] > .hv-side-group-head { color: var(--hv-accent-text); }
.hv-side-chevron { margin-left: auto; font-size: .7rem; transition: transform .2s; }
.hv-side-group:not([open]) .hv-side-chevron { transform: rotate(-90deg); }
.hv-side-group-badge { margin-left: auto; }
.hv-side-group-badge + .hv-side-chevron { margin-left: .4rem; }
.hv-side-group[open] .hv-side-group-badge { display: none; }
.hv-side-group[open] .hv-side-group-badge + .hv-side-chevron { margin-left: auto; }
.hv-side-group-body { padding: .1rem 0 .25rem; }
.hv-side-label {
  display: flex; align-items: center; gap: .4rem;
  font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--hv-muted);
  padding: .75rem .75rem .45rem;
}
.hv-side-link {
  position: relative;
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .75rem;
  margin-bottom: 2px;
  border-radius: 8px;
  font-size: .875rem; font-weight: 500;
  color: var(--hv-nav-text);
  transition: background .15s, color .15s;
}
.hv-side-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; opacity: .8; }
.hv-side-link:hover { background: var(--hv-surface-2); color: var(--hv-heading); }
.hv-side-link.active { background: var(--hv-accent-soft); color: var(--hv-heading); }
.hv-side-link.active i { color: var(--hv-accent-text); opacity: 1; }
.hv-side-link.active::before {
  content: "";
  position: absolute; left: -.75rem; top: 22%; bottom: 22%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--hv-accent);
}
.hv-side-badge {
  margin-left: auto;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px;
  background: var(--hv-accent-fill); color: var(--hv-on-accent);
  font-size: .7rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.hv-side-section { margin-top: 1rem; padding-top: .5rem; border-top: 1px solid var(--hv-border); }
.hv-side-section .hv-side-label { color: var(--hv-accent-text); }

/* Agentur: eigene, violett hinterlegte Fläche ganz oben – darunter folgt mit „Eure Bands“ der Band-Bereich */
.hv-side-group--agency {
  margin: .25rem 0 .5rem;
  padding: .35rem .4rem .3rem;
  border: 1px solid var(--hv-agency-border);
  border-left: 3px solid var(--hv-agency);
  border-radius: 10px;
  background: var(--hv-agency-soft);
}
.hv-side-agency-head {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .5rem .45rem;
  color: var(--hv-agency-text);
}
.hv-side-agency-head > i { font-size: .95rem; }
.hv-side-agency-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.hv-side-agency-title > span {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
}
.hv-side-agency-title > small {
  font-size: .78rem; font-weight: 600;
  color: var(--hv-heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hv-side-group--agency .hv-side-link { padding: .5rem .6rem; }
.hv-side-group--agency .hv-side-link i { color: var(--hv-agency-text); }
.hv-side-group--agency .hv-side-link:hover { background: var(--hv-agency-active); }
.hv-side-group--agency .hv-side-link.active { background: var(--hv-agency-active); }
.hv-side-group--agency .hv-side-link.active i { color: var(--hv-agency-text); }
.hv-side-group--agency .hv-side-link.active::before { left: -.4rem; background: var(--hv-agency); }
.hv-side-divider {
  display: flex; align-items: center; gap: .5rem;
  margin: .9rem 0 .2rem;
  padding: 0 .75rem;
  font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--hv-muted);
}
.hv-side-divider::after { content: ""; flex: 1; height: 1px; background: var(--hv-border); }

/* Techniker: dieselbe Fläche wie die Agentur, nur in Orange – die Regeln oben nutzen die --hv-agency-Farben */
.hv-side-group--technician,
.hv-technician-badge {
  --hv-agency: var(--hv-tech);
  --hv-agency-text: var(--hv-tech-text);
  --hv-agency-soft: var(--hv-tech-soft);
  --hv-agency-active: var(--hv-tech-active);
  --hv-agency-border: var(--hv-tech-border);
}

/* Studio: das Wichtigste für Bands – dieselbe Fläche in Lime, mit Kacheln statt Zeilen */
.hv-side-group--studio {
  --hv-agency: var(--hv-studio);
  --hv-agency-text: var(--hv-studio-text);
  --hv-agency-soft: var(--hv-studio-soft);
  --hv-agency-active: var(--hv-studio-active);
  --hv-agency-border: var(--hv-studio-border);
}

/* Bühne frei: das Netzwerk – dieselbe Fläche in Pink, mit großen Kacheln für die wichtigsten Börsen */
.hv-side-group--network {
  --hv-agency: var(--hv-network);
  --hv-agency-text: var(--hv-network-text);
  --hv-agency-soft: var(--hv-network-soft);
  --hv-agency-active: var(--hv-network-active);
  --hv-agency-border: var(--hv-network-border);
}
.hv-side-tile--feature { gap: .25rem; padding: .7rem .7rem .6rem; font-size: .88rem; }
.hv-side-tile--feature i { font-size: 1.25rem; }
.hv-side-news {
  flex: none;
  padding: .05rem .45rem; border-radius: 6px;
  background: var(--hv-network); color: #fff;
  font-size: .66rem; font-weight: 700; white-space: nowrap;
}

/* Startseite: Hinweis auf neue Gigs in der Gig-Börse – in der Farbe von „Bühne frei“ */
.hv-home-news {
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem 1rem;
  border: 1px solid var(--hv-network-border); border-radius: 12px;
  background: var(--hv-network-soft); color: var(--hv-heading);
  text-decoration: none;
}
.hv-home-news:hover { background: var(--hv-network-active); color: var(--hv-heading); }
.hv-home-news > i { font-size: 1.5rem; color: var(--hv-network-text); }
.hv-home-news strong { display: block; }
.hv-home-news small { color: var(--hv-muted); }
.hv-home-news-btn { background: var(--hv-network); color: #fff; font-weight: 600; white-space: nowrap; }

/* Band & Crew: große Reiter für Mitglieder und Zugänge – der offene mit Rahmen in Limette */
.hv-team-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; }
.hv-team-tab {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .9rem 1rem;
  border: 1px solid var(--hv-border-strong); border-radius: 12px;
  background: var(--hv-surface); color: var(--hv-heading);
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.hv-team-tab:hover { border-color: var(--hv-accent); color: var(--hv-heading); }
.hv-team-tab.active { border: 2px solid var(--hv-accent); padding: calc(.9rem - 1px) calc(1rem - 1px); background: var(--hv-accent-soft); }
.hv-team-tab > i { font-size: 1.6rem; line-height: 1; color: var(--hv-muted); }
.hv-team-tab.active > i { color: var(--hv-accent-text); }
.hv-team-tab-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 700; }
.hv-team-tab-count {
  padding: .05rem .5rem; border-radius: 6px;
  background: var(--hv-surface-2); color: var(--hv-muted);
  font-size: .72rem; font-weight: 600;
}
.hv-team-tab.active .hv-team-tab-count { background: var(--hv-accent-fill); color: var(--hv-on-accent); }
.hv-team-tab small { display: block; margin-top: .15rem; color: var(--hv-muted); }

/* Inhalt der farbigen Flächen: zwei Spalten – Zeilen, breite Kacheln und Karten gehen über beide */
.hv-side-items { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: .4rem; }
.hv-side-items > * { grid-column: 1 / -1; }
.hv-side-items > .hv-side-tile--tile,
.hv-side-items > .hv-side-tile--button { grid-column: auto; }
.hv-side-sublabel {
  padding: .55rem .2rem .3rem;
  font-size: .66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--hv-muted);
}
.hv-side-agency-head + .hv-side-items > .hv-side-sublabel:first-child { padding-top: 0; }

.hv-side-tile {
  position: relative;
  display: flex; flex-direction: column; gap: .3rem;
  min-width: 0;
  margin-bottom: .4rem;
  padding: .6rem .65rem .55rem;
  border: 1px solid var(--hv-agency-border);
  border-radius: 9px;
  background: var(--hv-surface);
  color: var(--hv-heading);
  font-size: .8rem; font-weight: 600; line-height: 1.25;
  transition: background .15s, border-color .15s;
}
.hv-side-tile:hover { border-color: var(--hv-agency); color: var(--hv-heading); }
.hv-side-tile.active { border-color: var(--hv-agency); background: var(--hv-agency-active); }
.hv-side-tile i { font-size: 1.15rem; line-height: 1; color: var(--hv-agency-text); }
.hv-side-tile small { font-size: .72rem; font-weight: 500; color: var(--hv-muted); }
/* Schmale Seitenleiste (Tablet): Beschriftungen brechen um statt abgeschnitten zu werden */
.hv-side-tile-title { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.hv-side-tile-row { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.hv-side-tile-row .hv-side-tile-title { flex: 1; }
.hv-side-tile .hv-side-badge { position: absolute; top: .45rem; right: .45rem; }

/* Nächster Gig: Karte mit Datum, Ort und Uhrzeit */
.hv-side-tile--gig { border-color: var(--hv-agency); gap: .2rem; }
.hv-side-tile-kicker {
  display: flex; align-items: center; gap: .35rem;
  font-size: .7rem; font-weight: 600;
  color: var(--hv-agency-text);
}
.hv-side-tile-kicker i { font-size: .85rem; }
.hv-side-tile--gig .hv-side-tile-title,
.hv-side-tile--gig small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hauptpunkte der Bands (Start, Kalender, Gigs, Nachrichten): große Kacheln, zwei nebeneinander – in Limette, damit
   sie neben den farbigen Flächen nicht untergehen; eine übrige Kachel geht über beide Spalten */
.hv-side-quick {
  --hv-agency: var(--hv-accent);
  --hv-agency-text: var(--hv-accent-text);
  --hv-agency-border: var(--hv-border-strong);
  --hv-agency-active: var(--hv-accent-soft);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem;
  padding-bottom: .75rem;
}
.hv-side-quick > .hv-side-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hv-side-tile--quick {
  align-items: center; justify-content: center; gap: .35rem;
  margin-bottom: 0; padding: .8rem .4rem .7rem;
  background: var(--hv-surface-2);
  font-size: .85rem; text-align: center;
}
.hv-side-tile--quick i { font-size: 1.5rem; }
.hv-side-tile--quick:hover { background: var(--hv-accent-soft); }

/* Kleine Knöpfe (Photo Drop, Export) */
.hv-side-tile--button { flex-direction: row; align-items: center; gap: .3rem; padding: .45rem .4rem; font-size: .74rem; }
.hv-side-tile--button i { font-size: .95rem; }

/* Speicher: Füllbalken mit Angabe darunter */
.hv-side-tile--storage { gap: .4rem; }

/* Nicht im Paket: grau mit Schloss – Kachel gestrichelt, Zeile mit „ab <Paket>“ */
.hv-side-tile--locked { border-style: dashed; background: transparent; color: var(--hv-muted); }
.hv-side-tile--locked i { color: var(--hv-muted); }
.hv-side-link--locked { color: var(--hv-muted); }
.hv-side-lock { margin-left: auto; font-size: .7rem; font-weight: 500; color: var(--hv-muted); white-space: nowrap; }

/* Website: Punkt zeigt, ob sie online ist */
.hv-side-status { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--hv-border-strong); }
.hv-side-status.is-online { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }

/* Speicher: Füllbalken */
.hv-side-meter { display: block; height: 5px; border-radius: 3px; background: var(--hv-surface-3); overflow: hidden; }
.hv-side-meter > span { display: block; height: 100%; border-radius: 3px; background: var(--hv-agency); }
.hv-side-meter.is-warning > span { background: #f59e0b; }
.hv-side-meter.is-danger > span { background: #ef4444; }

/* Kennzeichnung von Agentur- und Techniker-Seiten – gleiche Farbe wie die Fläche im Menü */
.hv-agency-badge,
.hv-technician-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .15rem .55rem;
  border: 1px solid var(--hv-agency-border);
  border-radius: 999px;
  background: var(--hv-agency-soft);
  color: var(--hv-agency-text);
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}

/* ---------- Hell/Dunkel-Schalter ---------- */
/* ---------- Notfall-Button: Support kontaktieren ---------- */
.hv-side-support { padding: .85rem 1rem 0; border-top: 1px solid var(--hv-border); }
.hv-support-btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .5rem .75rem;
  border: 1px solid rgba(220, 53, 69, .55); border-radius: 9px;
  background: rgba(220, 53, 69, .1); color: #e35d6a;
  font-size: .8rem; font-weight: 600;
  transition: background .15s, color .15s;
}
.hv-support-btn:hover { background: #dc3545; color: #fff; }
.hv-icon-btn--support { color: #e35d6a; border-color: rgba(220, 53, 69, .55); }

.hv-side-theme { padding: .85rem 1rem 0; }
.hv-theme-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px;
  background: var(--hv-surface-2);
  border: 1px solid var(--hv-border);
  border-radius: 10px;
}
.hv-theme-switch button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .4rem .5rem;
  border: 0; border-radius: 7px;
  background: transparent;
  color: var(--hv-muted);
  font-size: .78rem; font-weight: 500;
  transition: background .15s, color .15s;
}
.hv-theme-switch button:hover { color: var(--hv-heading); }
.hv-theme-switch button.active {
  background: var(--hv-surface);
  color: var(--hv-heading);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.hv-theme-switch button.active i { color: var(--hv-accent-text); }

/* ---------- Benutzer + Logout ---------- */
.hv-side-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .85rem 1rem .9rem;
}
.hv-user-chip {
  display: flex; align-items: center; gap: .65rem; min-width: 0;
  margin: -.35rem; padding: .35rem; border-radius: 10px;
  color: inherit; transition: background .15s;
}
.hv-user-chip:hover, .hv-user-chip.active { background: var(--hv-surface-2); }
.hv-user-chip.active .hv-avatar { border-color: var(--hv-accent); }
.hv-avatar {
  flex: 0 0 34px; height: 34px; border-radius: 50%;
  background: var(--hv-accent-soft);
  border: 1px solid rgba(var(--hv-accent-rgb), .45);
  color: var(--hv-heading); font-size: .8rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.hv-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.hv-user-name, .hv-user-role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-user-name { font-size: .85rem; font-weight: 600; color: var(--hv-heading); }
.hv-user-role { font-size: .72rem; color: var(--hv-muted); }
.hv-logout {
  flex: 0 0 34px; height: 34px;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--hv-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  transition: .15s;
}
.hv-logout:hover { background: var(--hv-accent-soft); color: var(--hv-accent-text); }

/* ---------- Handy-Kopfzeile & Icon-Buttons ---------- */
.hv-topbar {
  position: sticky; top: 0; z-index: 1020;
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem 1rem;
  background: var(--hv-topbar-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hv-border);
}
.hv-topbar { --brand-ring: var(--hv-bg); }
.hv-icon-btn {
  position: relative;
  width: 40px; height: 40px;
  border: 1px solid var(--hv-border); border-radius: 8px;
  background: var(--hv-surface); color: var(--hv-heading);
  font-size: 1.2rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.hv-icon-btn:hover { background: var(--hv-surface-2); }
.hv-icon-btn .bi-list { font-size: 1.35rem; }
.hv-burger-dot {
  position: absolute; top: 7px; right: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hv-accent);
  box-shadow: 0 0 0 2px var(--hv-surface);
}
.hv-guest-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 10; }

/* ---------- Handy-Leiste unten: Hauptpunkte + Menü (x-band-manager.tab-bar) ---------- */
/* --hv-tabbar-h: Höhe der Leiste – Speicherleisten u. Ä., die unten kleben, rücken darüber */
@media (max-width: 767.98px) {
  .hv-has-tabbar { --hv-tabbar-h: calc(62px + env(safe-area-inset-bottom)); }
  .hv-has-tabbar .hv-main { padding-bottom: var(--hv-tabbar-h); }
}
.hv-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex; align-items: stretch;
  height: var(--hv-tabbar-h, 62px);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--hv-topbar-bg);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--hv-border);
}
.hv-tab {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  padding: .3rem .15rem;
  border: 0; background: none;
  color: var(--hv-muted); text-decoration: none;
  font-size: .68rem; font-weight: 600;
}
.hv-tab-icon {
  position: relative;
  display: grid; place-items: center;
  width: 46px; height: 28px; border-radius: 999px;
  font-size: 1.2rem;
  transition: background .15s;
}
.hv-tab-label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-tab:hover { color: var(--hv-heading); }
.hv-tab.active { color: var(--hv-heading); }
.hv-tab.active .hv-tab-icon { background: var(--hv-accent-soft); color: var(--hv-accent-text); }
.hv-tab-badge {
  position: absolute; top: -4px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--hv-accent); color: #0b0b12;
  font-size: .65rem; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--hv-surface);
}
.hv-tab .hv-burger-dot { top: 3px; right: 9px; }

/* ---------- Suche (Strg+K): Feld in der Seitenleiste und Fenster ---------- */
.hv-side-search { padding: 0 1rem .75rem; }
.hv-search-btn {
  width: 100%;
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .7rem;
  border: 1px solid var(--hv-border); border-radius: 10px;
  background: var(--hv-input-bg); color: var(--hv-muted);
  font-size: .85rem; text-align: left;
  transition: border-color .15s, color .15s;
}
.hv-search-btn:hover, .hv-search-btn:focus-visible { border-color: rgba(var(--hv-accent-rgb), .6); color: var(--hv-heading); }
.hv-search-btn span { flex: 1; }
.hv-search-btn kbd, .hv-search-foot kbd {
  padding: .1rem .35rem; border: 1px solid var(--hv-border); border-radius: 6px;
  background: var(--hv-surface-2); color: var(--hv-muted); box-shadow: none;
  font-family: inherit; font-size: .7rem; font-weight: 600;
}
@media (min-width: 576px) {
  .hv-search .modal-dialog { max-width: 620px; margin-top: 10vh; }
  .hv-search .modal-content { border-radius: 16px; overflow: hidden; }
}
.hv-search-head { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--hv-border); }
.hv-search-head > .bi-search { color: var(--hv-muted); font-size: 1.1rem; }
.hv-search-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--hv-heading); font-size: 1.05rem; }
.hv-search-input::-webkit-search-cancel-button { display: none; }
.hv-search-body { padding: .5rem; }
@media (min-width: 576px) {
  .hv-search-body { max-height: 60vh; }
}
.hv-search-section { padding: .6rem .75rem .25rem; color: var(--hv-muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hv-search-item { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border-radius: 10px; color: var(--hv-heading); text-decoration: none; }
.hv-search-item > .bi {
  flex: none; width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 9px; background: var(--hv-surface-2); color: var(--hv-muted);
}
.hv-search-item.active { background: var(--hv-accent-soft); color: var(--hv-heading); }
.hv-search-item.active > .bi { background: var(--hv-accent); color: #0b0b12; }
.hv-search-text { display: flex; flex-direction: column; min-width: 0; }
.hv-search-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-search-text small { color: var(--hv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-search-empty { margin: 0; padding: 1.5rem .75rem; color: var(--hv-muted); text-align: center; }
.hv-search-foot { gap: 1.25rem; padding: .55rem 1rem; border-top: 1px solid var(--hv-border); color: var(--hv-muted); font-size: .75rem; }
.hv-search-foot kbd { margin-right: .15rem; }

/* ---------- Impersonation-Leiste ---------- */
.hv-impersonate {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem;
  padding: .5rem 1rem;
  background: var(--hv-accent-fill); color: var(--hv-on-accent);
  font-size: .82rem; font-weight: 500;
}

/* ---------- Footer ---------- */
.hv-footer {
  padding: 1.1rem 2.5rem;
  border-top: 1px solid var(--hv-border);
  font-size: .75rem;
  color: var(--hv-muted);
}

/* =====================================================================
   Login / Gäste
   ===================================================================== */
.hv-guest {
  --brand-ring: var(--hv-bg);
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 3rem 0;
  background: radial-gradient(ellipse at top, rgba(200, 255, 46, .12), transparent 60%), var(--hv-bg);
}
.hv-guest-brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 2rem; padding: 0 1rem; }
.hv-claim {
  font-family: var(--hv-brand-font);
  font-size: clamp(1.5rem, 4.5vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--hv-heading);
  margin: 1.75rem 0 .35rem;
}
.hv-claim span { color: var(--hv-accent-text); }
.hv-sub {
  margin: 0;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: var(--hv-muted);
}

/* =====================================================================
   Typografie
   ===================================================================== */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--hv-font);
  font-weight: 600;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--hv-heading);
}
.h3, h3 { font-size: 1.35rem; }
.h4, h4 { font-size: 1.15rem; }
.h5, h5 { font-size: 1rem; }
.fw-bold { font-weight: 600 !important; }

/* =====================================================================
   Links – Textlinks in Akzentfarbe, damit sie sich vom Fließtext abheben
   ===================================================================== */
.hv-link { font-weight: 500; color: var(--hv-accent-text); }
.hv-link:hover { color: var(--hv-accent-text); text-decoration: underline; text-underline-offset: 2px; }

/* Zurück-Link über der Seitenüberschrift */
.hv-back {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-bottom: .35rem;
  font-size: .8rem; font-weight: 500;
  color: var(--hv-accent-text);
}
.hv-back .bi { transition: transform .15s; }
.hv-back:hover { color: var(--hv-accent-text); text-decoration: underline; text-underline-offset: 2px; }
.hv-back:hover .bi { transform: translateX(-2px); }

/* =====================================================================
   Karten, Listen, Fenster
   ===================================================================== */
.card {
  --bs-card-bg: var(--hv-surface);
  --bs-card-border-color: var(--hv-border);
  --bs-card-cap-bg: transparent;
  --bs-card-border-radius: 12px;
  --bs-card-inner-border-radius: 11px;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-spacer-y: 1.25rem;
  --bs-card-cap-padding-x: 1.25rem;
  --bs-card-cap-padding-y: .85rem;
  color: var(--hv-text);
  box-shadow: var(--hv-card-shadow);
}
.card-header { font-size: .875rem; font-weight: 600; color: var(--hv-heading); }
.card-header a:not(.btn) { font-weight: 500; color: var(--hv-accent-text); }
.card-header a:not(.btn):hover { text-decoration: underline; text-underline-offset: 2px; }
a.card { transition: border-color .15s, transform .15s; }
a.card:hover { border-color: var(--hv-border-strong); transform: translateY(-1px); }
.shadow-sm { box-shadow: var(--hv-card-shadow) !important; }

.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-color: var(--hv-text);
  --bs-list-group-border-color: var(--hv-border);
  --bs-list-group-action-hover-bg: var(--hv-surface-2);
  --bs-list-group-action-hover-color: var(--hv-heading);
  --bs-list-group-action-color: var(--hv-text);
  --bs-list-group-item-padding-x: 1.25rem;
  --bs-list-group-item-padding-y: .75rem;
}

.modal {
  --bs-modal-bg: var(--hv-surface);
  --bs-modal-color: var(--hv-text);
  --bs-modal-border-color: var(--hv-border);
  --bs-modal-border-radius: 14px;
  --bs-modal-header-border-color: var(--hv-border);
  --bs-modal-footer-border-color: var(--hv-border);
}
.modal-backdrop { --bs-backdrop-opacity: var(--hv-backdrop); }

/* Aufklappbare Gruppen (z. B. Gastspielverträge pro Jahr) – aufgeklappt in Akzentfarbe */
.accordion {
  --bs-accordion-bg: var(--hv-surface);
  --bs-accordion-color: var(--hv-text);
  --bs-accordion-border-color: var(--hv-border);
  --bs-accordion-border-radius: 12px;
  --bs-accordion-inner-border-radius: 11px;
  --bs-accordion-btn-color: var(--hv-heading);
  --bs-accordion-btn-bg: var(--hv-surface);
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: .85rem;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(var(--hv-accent-rgb), .25);
  --bs-accordion-active-color: var(--hv-accent-text);
  --bs-accordion-active-bg: var(--hv-accent-soft);
}
.accordion-button { font-size: .875rem; }
.accordion-button:hover { background-color: var(--hv-surface-2); }
.accordion-button:not(.collapsed):hover { background-color: var(--hv-accent-soft); }
.accordion-button:not(.collapsed) { box-shadow: inset 0 -1px 0 var(--hv-border); }
.accordion-button::after {
  background-image: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") center / contain no-repeat;
}
.accordion-button:not(.collapsed)::after { background-image: none; }

/* =====================================================================
   Formulare
   ===================================================================== */
.form-label { font-size: .8rem; font-weight: 500; color: var(--hv-label); margin-bottom: .35rem; }
.form-control, .form-select {
  background-color: var(--hv-input-bg);
  border: 1px solid var(--hv-border);
  border-radius: 8px;
  color: var(--hv-text);
  font-size: .875rem;
  padding: .55rem .8rem;
}
.form-select { padding-right: 2.25rem; }
.form-control::placeholder { color: var(--hv-placeholder); }
.form-control:focus, .form-select:focus {
  background-color: var(--hv-input-bg);
  color: var(--hv-heading);
  border-color: var(--hv-accent);
  box-shadow: 0 0 0 3px rgba(var(--hv-accent-rgb), .25);
}
/* Datei-Auswahl: Feld und „Datei auswählen“-Button deutlich in Akzentfarbe */
.form-control[type="file"] {
  background-color: var(--hv-accent-soft);
  border: 1px dashed rgba(var(--hv-accent-rgb), .6);
  cursor: pointer;
}
.form-control[type="file"]:hover:not(:disabled) { border-color: var(--hv-accent); }
.form-control::file-selector-button {
  padding: .55rem 1rem;
  margin: -.55rem -.8rem;
  margin-inline-end: .8rem;
  background-color: var(--hv-accent-fill);
  color: var(--hv-on-accent);
  font-weight: 600;
  border-inline-end: 0;
  cursor: pointer;
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button { background-color: var(--hv-accent-fill-hover); }
.form-check-input { background-color: var(--hv-input-bg); border-color: var(--hv-border-strong); }
.form-check-input:checked { background-color: var(--hv-accent); border-color: var(--hv-accent); }
.form-check-input:focus { border-color: var(--hv-accent); box-shadow: 0 0 0 3px rgba(var(--hv-accent-rgb), .25); }
/* Auf Limette (dunkel) braucht das Häkchen dunkle statt weiße Farbe */
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230b0b12' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230b0b12'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230b0b12'/%3e%3c/svg%3e");
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  --bs-btn-font-family: var(--hv-font);
  --bs-btn-font-size: .85rem;
  --bs-btn-font-weight: 500;
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: .5rem;
  --bs-btn-border-radius: 8px;
  text-transform: none;
  letter-spacing: 0;
}
.btn-sm {
  --bs-btn-font-size: .78rem;
  --bs-btn-padding-x: .7rem;
  --bs-btn-padding-y: .3rem;
  --bs-btn-border-radius: 6px;
}
.btn-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--hv-on-accent);
  --bs-btn-bg: var(--hv-accent-fill);
  --bs-btn-border-color: var(--hv-accent-fill);
  --bs-btn-hover-color: var(--hv-on-accent);
  --bs-btn-hover-bg: var(--hv-accent-fill-hover);
  --bs-btn-hover-border-color: var(--hv-accent-fill-hover);
  --bs-btn-active-color: var(--hv-on-accent);
  --bs-btn-active-bg: var(--hv-accent-fill-hover);
  --bs-btn-active-border-color: var(--hv-accent-fill-hover);
  --bs-btn-disabled-color: var(--hv-on-accent);
  --bs-btn-disabled-bg: var(--hv-accent-fill);
  --bs-btn-disabled-border-color: var(--hv-accent-fill);
  --bs-btn-focus-shadow-rgb: var(--hv-accent-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--hv-accent-text);
  --bs-btn-border-color: rgba(var(--hv-accent-rgb), .55);
  --bs-btn-hover-color: var(--hv-on-accent);
  --bs-btn-hover-bg: var(--hv-accent-fill);
  --bs-btn-hover-border-color: var(--hv-accent-fill);
  --bs-btn-active-color: var(--hv-on-accent);
  --bs-btn-active-bg: var(--hv-accent-fill);
  --bs-btn-active-border-color: var(--hv-accent-fill);
}
.btn-secondary {
  --bs-btn-color: var(--hv-text);
  --bs-btn-bg: var(--hv-surface-2);
  --bs-btn-border-color: var(--hv-border);
  --bs-btn-hover-color: var(--hv-heading);
  --bs-btn-hover-bg: var(--hv-surface-3);
  --bs-btn-hover-border-color: var(--hv-border-strong);
  --bs-btn-active-color: var(--hv-heading);
  --bs-btn-active-bg: var(--hv-surface-3);
  --bs-btn-active-border-color: var(--hv-border-strong);
}
.btn-outline-secondary {
  --bs-btn-color: var(--hv-nav-text);
  --bs-btn-border-color: var(--hv-border);
  --bs-btn-hover-color: var(--hv-heading);
  --bs-btn-hover-bg: var(--hv-surface-2);
  --bs-btn-hover-border-color: var(--hv-border-strong);
  --bs-btn-active-color: var(--hv-heading);
  --bs-btn-active-bg: var(--hv-surface-2);
  --bs-btn-active-border-color: var(--hv-border-strong);
}

/* Auswahl im Kalender-Fenster (überschreibt app.css) */
.btn-check:checked + .btn {
  border: 1px solid var(--hv-accent);
  background: var(--hv-accent-soft);
  color: var(--hv-heading);
}

/* =====================================================================
   Tabellen
   ===================================================================== */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--hv-text);
  --bs-table-border-color: var(--hv-border);
  --bs-table-hover-bg: var(--hv-surface-2);
  --bs-table-striped-bg: var(--hv-surface-2);
  font-size: .85rem;
}
.table > :not(caption) > * > * { padding: .75rem 1rem; }
.table-sm > :not(caption) > * > * { padding: .45rem 1rem; }
.table thead th {
  font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--hv-muted);
  white-space: nowrap;
}
.card .table tbody tr:last-child > * { border-bottom: 0; }

/* =====================================================================
   Badges, Meldungen
   ===================================================================== */
.badge { font-weight: 500; font-size: .72rem; border-radius: 6px; padding: .38em .62em; }
.badge.bg-primary, .text-bg-primary { background-color: var(--hv-accent-fill) !important; color: var(--hv-on-accent) !important; }
.badge.text-bg-light {
  background: var(--hv-surface-2) !important;
  color: var(--hv-muted) !important;
  border-color: var(--hv-border) !important;
}
.alert { border-radius: 10px; font-size: .875rem; }
.hv-flash { display: flex; align-items: flex-start; gap: .6rem; }
.hv-flash i { font-size: 1rem; line-height: 1.35; }
.status-dot { width: .7rem; height: .7rem; }

/* Nachrichten: eigene Nachrichten leicht in Akzentfarbe hinterlegt */
.card.border-dark {
  border-color: rgba(var(--hv-accent-rgb), .45) !important;
  background: rgba(var(--hv-accent-rgb), .07);
}

/* =====================================================================
   FullCalendar (Ampel-Kalender)
   ===================================================================== */
.fc {
  --fc-border-color: var(--hv-border);
  --fc-page-bg-color: var(--hv-surface);
  --fc-neutral-bg-color: var(--hv-surface-2);
  --fc-today-bg-color: transparent;
  --fc-highlight-color: rgba(var(--hv-accent-rgb), .2);
  --fc-button-text-color: var(--hv-text);
  --fc-button-bg-color: var(--hv-surface-2);
  --fc-button-border-color: var(--hv-border);
  --fc-button-hover-bg-color: var(--hv-surface-3);
  --fc-button-hover-border-color: var(--hv-border-strong);
  --fc-button-active-bg-color: var(--hv-accent-fill);
  --fc-button-active-border-color: var(--hv-accent-fill);
}
.fc .fc-toolbar { flex-wrap: wrap; gap: .5rem; }
.fc .fc-toolbar-title { font-size: 1.1rem; font-weight: 600; color: var(--hv-heading); }
.fc .fc-button { font-size: .8rem; font-weight: 500; padding: .4rem .75rem; border-radius: 8px; box-shadow: none !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active { color: var(--hv-on-accent); }
.fc .fc-col-header-cell-cushion {
  color: var(--hv-muted);
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}
.fc .fc-daygrid-day-number { color: var(--hv-text); font-size: .8rem; }
.fc .fc-bg-event { opacity: var(--hv-fc-bg-opacity); }
.fc .fc-bg-event .fc-event-title { color: var(--hv-heading); }

/* Kalendereintrag im Kästchen: Uhrzeit + Titel */
.fc .hv-av-label {
  display: flex; flex-direction: column;
  padding: 1.5rem .3rem .2rem;
  color: #0b0b12; font-size: .72rem; line-height: 1.2;
  overflow: hidden;
}
.fc .fc-bg-event { overflow: hidden; }
.fc .hv-av-time { font-weight: 700; }
.fc .hv-av-text {
  font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.fc .fc-multimonth .hv-av-label { display: none; }

/* Heute: kräftiger gelber Rahmen über allen Einträgen */
.fc .fc-daygrid-day.fc-day-today { position: relative; background: transparent; }
.fc .fc-daygrid-day.fc-day-today::after {
  content: ""; display: block; position: absolute; inset: 0; z-index: 5;
  border: 4px solid var(--hv-today-ring); border-radius: 3px;
  box-shadow: 0 0 10px 1px var(--hv-today-ring), inset 0 0 6px var(--hv-today-ring);
  pointer-events: none;
}
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { font-weight: 700; color: var(--hv-heading); }
.fc .fc-multimonth-title { color: var(--hv-heading); font-size: 1rem; }
@media (max-width: 575.98px) {
  .fc .fc-toolbar-title { font-size: 1rem; }
}

/* Mobil: lange Einträge höchstens zwei Zeilen – die Kästchen bleiben gleich hoch, egal wie lang der Titel ist */
@media (max-width: 767.98px) {
  .fc .fc-daygrid-event .fc-event-main-frame { display: block; }
  .fc .fc-daygrid-event .fc-event-time { display: none; }
  .fc .fc-daygrid-event .fc-event-title,
  .fc .fc-daygrid-dot-event .fc-event-title,
  .fc .fc-daygrid-block-event .fc-event-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere; white-space: normal;
    font-size: .65rem; line-height: 1.2;
  }
  .fc .fc-daygrid-dot-event .fc-daygrid-event-dot { display: none; }
  .fc .fc-daygrid-more-link { font-size: .65rem; }
  .fc .hv-av-label { padding-top: 1.3rem; font-size: .65rem; }
}

/* =====================================================================
   Assistent (Veranstalter: Band für einen Abend finden) – Schritte oben, ohne JavaScript alles untereinander
   ===================================================================== */
.hv-wizard > .card + .card { margin-top: 1rem; }
.hv-wizard.is-js > .card + .card { margin-top: 0; }
.hv-wizard-steps {
  display: none; list-style: none; padding: 0; margin: 0 0 1rem;
  gap: .5rem; counter-reset: none;
}
.hv-wizard.is-js .hv-wizard-steps { display: flex; }
.hv-wizard-steps li {
  flex: 1 1 0; display: flex; align-items: center; gap: .5rem;
  padding: .55rem .7rem; border-radius: 10px;
  border: 1px solid var(--hv-border); background: var(--hv-surface-2);
  color: var(--hv-muted); font-size: .85rem; line-height: 1.2;
}
.hv-wizard-steps li.is-reachable { cursor: pointer; color: var(--hv-text); }
.hv-wizard-steps li.is-done { border-color: rgba(var(--hv-accent-rgb), .45); }
.hv-wizard-steps li.is-active { border-color: var(--hv-accent-fill); background: rgba(var(--hv-accent-rgb), .12); color: var(--hv-heading); font-weight: 600; }
.hv-wizard-num {
  flex: none; display: inline-grid; place-items: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--hv-surface-3); font-weight: 700; font-size: .8rem;
}
.hv-wizard-steps li.is-active .hv-wizard-num,
.hv-wizard-steps li.is-done .hv-wizard-num { background: var(--hv-accent-fill); color: var(--hv-on-accent); }
.hv-wizard:not(.is-js) [data-wz-next],
.hv-wizard:not(.is-js) [data-wz-prev] { display: none; }
.hv-wizard-summary dd { color: var(--hv-heading); }
@media (max-width: 575.98px) {
  .hv-wizard-steps { gap: .3rem; }
  .hv-wizard-steps li { justify-content: center; padding: .45rem; }
  .hv-wizard-steps li:not(.is-active) .hv-wizard-label { display: none; }
}

/* Hinweis über dem Kalender: auf dem Handy erst lange tippen – nur auf Touch-Geräten sichtbar */
.hv-cal-touch-hint { display: none; }
@media (hover: none) and (pointer: coarse) {
  .hv-cal-touch-hint {
    display: flex; align-items: center; gap: .75rem;
    margin-bottom: 1rem; padding: .85rem 1rem;
    border: 2px solid var(--hv-accent-fill); border-radius: 12px;
    background: rgba(var(--hv-accent-rgb), .14);
    color: var(--hv-heading); font-size: .9rem; line-height: 1.35;
  }
  .hv-cal-touch-hint .bi {
    flex: none; font-size: 1.9rem; color: var(--hv-accent-text);
    animation: hv-touch-press 1.6s ease-in-out infinite;
  }
  .hv-cal-touch-hint strong { display: block; font-size: 1rem; }
}
@keyframes hv-touch-press {
  0%, 100% { transform: scale(1); }
  40%, 60% { transform: scale(.82); }
}
@media (prefers-reduced-motion: reduce) {
  .hv-cal-touch-hint .bi { animation: none; }
}

/* =====================================================================
   Formatierungs-Legende (Markdown)
   ===================================================================== */
.hv-md-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .35rem;
  margin-top: .4rem;
  font-size: .72rem; color: var(--hv-muted);
  opacity: .7; transition: opacity .15s;
}
textarea:focus + .hv-md-legend,
.hv-md-legend:hover { opacity: 1; }
.hv-md-label { display: inline-flex; align-items: center; gap: .3rem; margin-right: .1rem; }
.hv-md-chip {
  display: inline-flex; align-items: center; gap: .1rem;
  padding: .1rem .5rem;
  border: 1px solid var(--hv-border); border-radius: 6px;
  background: var(--hv-surface-2); color: var(--hv-text);
  font-size: .72rem; line-height: 1.5;
  transition: border-color .15s, color .15s;
}
.hv-md-chip:hover { border-color: rgba(var(--hv-accent-rgb), .5); color: var(--hv-heading); }
.hv-md-syntax { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--hv-accent-text); }

/* =====================================================================
   Agentur-Kalender: Filter-Chips, Gig-Anfragen umrandet, gesperrte Tage gestreift
   ===================================================================== */
.hv-cal-filters .hv-cal-chip { display: inline-flex; align-items: center; gap: .1rem; border-radius: 999px; }
.hv-cal-filters .btn-check:not(:checked) + .hv-cal-chip { opacity: .55; text-decoration: line-through; }
.fc .fc-daygrid-event { white-space: normal; }
.fc .fc-daygrid-block-event .fc-event-title { font-weight: 600; font-size: .75rem; }
.fc .fc-h-event.hv-cal-request, .fc .fc-v-event.hv-cal-request { background: transparent !important; border-style: dashed; border-width: 2px; }
.fc .hv-cal-request .fc-event-title, .fc .hv-cal-request .fc-event-time { color: var(--hv-heading); }
.fc .fc-h-event.hv-cal-blocked {
  opacity: .75;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .28) 0 6px, transparent 6px 12px);
}
.fc .fc-h-event.hv-cal-agency, .fc .fc-v-event.hv-cal-agency { border-left-width: 4px; border-left-color: var(--hv-heading); }
.fc .fc-list-event.hv-cal-request .fc-list-event-title { font-style: italic; }

/* =====================================================================
   Administration → Benutzer: Konten klappen ihre Zugänge auf
   ===================================================================== */
.hv-users-toggle i { display: inline-block; transition: transform .15s; }
.hv-users-toggle:not(.collapsed) i { transform: rotate(90deg); }
.hv-users-accesses > td { background: var(--hv-surface-2); }
.hv-users-accesses .list-group-item { background: transparent; }

/* =====================================================================
   Ungespeicherte Änderungen: schwebende Leiste (unsaved.js) und
   hervorgehobener Speichern-Button – auch in den festen Speicherleisten
   der Rider, Setlists, Songs und des Website Creators
   ===================================================================== */
.hv-savebar {
  position: fixed; z-index: 1040;
  left: 1.5rem; right: 1.5rem; bottom: 1rem;
  max-width: 640px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem .6rem .6rem 1rem;
  border: 2px solid var(--hv-accent); border-radius: 14px;
  background: var(--hv-surface);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .45);
  animation: hv-savebar-in .25s ease-out;
}
.hv-savebar[hidden] { display: none; }
.hv-savebar-text { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.hv-savebar-text > .bi { flex-shrink: 0; font-size: 1.25rem; color: var(--hv-accent); }
.hv-savebar-text strong { display: block; color: var(--hv-heading); font-size: .92rem; }
.hv-savebar-text small { display: block; color: var(--hv-muted); font-size: .78rem; }
.hv-savebar .btn { flex-shrink: 0; white-space: nowrap; }
@media (min-width: 768px) {
  .hv-savebar { left: calc(var(--hv-sidebar-w) + 1.5rem); }
}
@media (max-width: 767.98px) {
  .hv-savebar {
    left: .5rem; right: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom));
    gap: .6rem; padding: .5rem .5rem .5rem .75rem;
  }
  .hv-savebar-text small { display: none; }
}
@keyframes hv-savebar-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

.hv-save-attention,
.rd-savebar:has(.rd-dirty:not([hidden])) .btn-primary,
.wc-panel-foot:has(.wc-dirty:not([hidden])) .btn-primary,
.hv-savebar .btn-primary { animation: hv-save-pulse 1.8s ease-out infinite; }
@keyframes hv-save-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--hv-accent-rgb), .6); }
  70%  { box-shadow: 0 0 0 10px rgba(var(--hv-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--hv-accent-rgb), 0); }
}

/* Feste Speicherleisten: bei Änderungen deutlich abgesetzt */
.rd-savebar:has(.rd-dirty:not([hidden])),
.wc-panel-foot:has(.wc-dirty:not([hidden])) {
  background: var(--hv-surface);
  border-top: 2px solid var(--hv-accent);
  box-shadow: 0 -10px 24px -14px rgba(0, 0, 0, .4);
}
.rd-savebar .rd-dirty:not([hidden]),
.wc-panel-foot .wc-dirty:not([hidden]) { font-weight: 600; font-size: .88rem; }
.rd-savebar .btn, .wc-panel-foot .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 575.98px) {
  .rd-savebar { gap: .6rem; }
  .rd-savebar .rd-dirty:not([hidden]) { font-size: .8rem; line-height: 1.25; }
}

@media (prefers-reduced-motion: reduce) {
  .hv-savebar, .hv-save-attention,
  .rd-savebar .btn-primary, .wc-panel-foot .btn-primary, .hv-savebar .btn-primary { animation: none; }
}