/* ===== Participant child row ===== */
#participantsTable tbody tr.shown td { background-color: rgba(13,110,253,0.08); }
#participantsTable tr.child td { padding: 0 !important; }
.child-participant-row { background: #16162a; border-top: 1px solid #2e2e4e; }
html.light-mode .child-participant-row { background: #f0f0f8; border-top: 1px solid #dee2e6; }

/* ===== Base ===== */
body {
  background-color: #1a1a2e;
  color: #c8c8d0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ===== Navbar ===== */
.navbar {
  background-color: #16162a;
  padding: 0.5rem 1rem;
}

.navbar-brand img {
  height: 40px;
  width: auto;
}

.navbar .nav-link {
  color: #c8c8d0;
  font-size: 1.1rem;
  padding: 0.5rem 1rem;
}

.navbar .nav-link:hover {
  color: #ffffff;
}

/* ===== Gradient accent line ===== */
.gradient-line {
  height: 3px;
  background: linear-gradient(to right, #e44d90, #c13584, #833ab4, #5851db, #405de6, #2a7ae4);
}

/* ===== Forms ===== */
.form-label,
.form-check-label {
  color: #c8c8d0;
}

/* ===== Page heading ===== */
.page-heading {
  font-size: 2.8rem;
  font-weight: 700;
  color: #cccccc;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

/* ===== Centered card layout (login, register, approve, forgot password) ===== */
.centered-layout {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.centered-card {
  width: 100%;
  max-width: 400px;
}

/* ===== Landing page ===== */
.hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1rem;
}

/* The wordmark. The login page carried its own inline copy of this gradient,
   which is how it went on showing the old product name long after everything
   else had been renamed -- the brand is split across two elements, so no
   search for that name ever matched it. One definition now, and the second
   half takes the gradient wherever the mark is used. */
.brand-wordmark {
  font-weight: 700;
  color: #ffffff;
}

.brand-wordmark span {
  background: linear-gradient(to right, #e44d90, #405de6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero h1 { font-size: 3rem; }

/* On the sign-in and registration cards, where it sits above a form. */
.brand-wordmark-sm { font-size: 2.5rem; }

.hero p {
  font-size: 1.15rem;
  color: #9090a8;
  /* Wide enough for roughly 70 characters a line. The old strapline was one
     sentence and sat happily in 540px; three sentences at that width become a
     narrow column six lines deep. */
  max-width: 640px;
  margin: 0 auto 2rem;
  text-wrap: pretty;
}

.features {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.features-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.features-group-label {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #5555a0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 820px;
}

.features-group-label::before,
.features-group-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #2e2e4e;
}

.features-group-cards {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.feature-card {
  background-color: #16162a;
  border: 1px solid #2e2e4e;
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 220px;
  text-align: center;
}

.feature-card .icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.feature-card h6 {
  color: #ffffff;
  margin-bottom: 0.4rem;
}

.feature-card p {
  font-size: 0.85rem;
  color: #7070a0;
  margin: 0;
}

/* ===== Language submenu ===== */
.dropdown-menu .dropstart {
  position: relative;
}

.dropdown-menu .dropstart > .dropdown-menu {
  display: none;
  position: absolute;
  right: 100%;
  left: auto;
  top: 0;
  min-width: 120px;
}

.dropdown-menu .dropstart:hover > .dropdown-menu {
  display: block;
}

/* ===== SweetAlert2 ===== */
.swal2-popup {
  background-color: #22223a;
  color: #c8c8d0;
}

footer {
  background-color: #16162a;
  color: #5050a0;
  text-align: center;
  padding: 1rem;
  font-size: 0.8rem;
}

/* ===== App badge (participant / tag badges — replaces hardcoded inline styles) ===== */
.app-badge {
  background:   #2a2a4a;
  border:       1px solid #555;
  color:        #ddd;
  font-weight:  normal;
}

/* ===== Schedule grid ===== */
.schedule-grid {
  font-size: 0.85rem;
}
.schedule-grid th,
.schedule-grid td {
  text-align: center;
  vertical-align: middle;
  padding: 0.3rem 0.2rem;
  white-space: nowrap;
}
.schedule-name-col {
  text-align: left !important;
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: #1a1a2e;
  width: 160px;
  min-width: 160px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schedule-cell {
  cursor: pointer;
  transition: background-color 0.1s;
}
.schedule-cell.on {
  background-color: #0d6efd !important;
}
.schedule-cell:hover:not(.on) {
  background-color: rgba(255,255,255,0.12) !important;
}
.schedule-wrapper {
}

html.light-mode .schedule-name-col          { background-color: #f0f2f5; }
html.light-mode .schedule-cell.on           { background-color: #0d6efd !important; color: #fff; }
html.light-mode .schedule-cell:hover:not(.on) { background-color: rgba(0,0,0,0.07) !important; }

.schedule-task-btn {
  font-size: 0.7rem;
  padding: 0 2px;
  line-height: 1.2;
  background: transparent;
  border: none;
  color: #fff;
  white-space: nowrap;
}
.schedule-task-btn:hover,
.schedule-task-btn:focus {
  background: rgba(255,255,255,0.2);
  color: #fff;
  box-shadow: none;
}

.task-slot-cell {
  cursor: pointer;
  transition: background-color 0.1s;
  white-space: nowrap;
}
.task-slot-cell:hover:not(.assigned) {
  background-color: rgba(255,255,255,0.06) !important;
}
.task-slot-cell.assigned {
  background-color: #198754 !important;
  color: #fff;
  font-size: 0.75rem;
  white-space: nowrap;
  cursor: pointer;
}
.task-slot-cell.assigned:hover { background-color: #157347 !important; }
.task-name-text { cursor: text; flex: 1; min-width: 280px; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

html.light-mode .task-slot-cell.assigned  { background-color: #198754 !important; color: #fff !important; }

/* ===== Email recipient cards ===== */
.email-card {
  position: relative;
  background: #1e1e38;
  border: 1px solid #2e2e4e;
  border-radius: 8px;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  min-width: 140px;
  max-width: 220px;
  cursor: pointer;
  transition: border-color 0.15s, opacity 0.15s;
  user-select: none;
}
.email-card:hover { border-color: #555580; }
.email-card.unchecked { opacity: 0.4; }
.email-card input[type="checkbox"] {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}
.email-card-name  { font-size: 0.88rem; color: #c8c8d0; font-weight: 500; margin-bottom: 0.1rem; }
.email-card-email { font-size: 0.75rem; color: #7070a0; }
.email-card-tags  { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }

html.light-mode .email-card               { background: #f8f9fa; border-color: #dee2e6; }
html.light-mode .email-card:hover         { border-color: #adb5bd; }
html.light-mode .email-card-name          { color: #212529; }
html.light-mode .email-card-email         { color: #6c757d; }

/* ===== Dark accordion ===== */
.accordion-dark .accordion-item {
  background-color: #16162a;
  border-color: #2e2e4e;
  color: #c8c8d0;
}
.accordion-dark .accordion-button {
  background-color: #1e1e38;
  color: #c8c8d0;
  box-shadow: none;
}
.accordion-dark .accordion-button:not(.collapsed) {
  background-color: #22223a;
  color: #ffffff;
  box-shadow: none;
}
.accordion-dark .accordion-button::after {
  filter: invert(0.8);
}
.accordion-dark .accordion-body {
  background-color: #16162a;
}

/* ===== LIGHT MODE ===== */

html.light-mode body {
  background-color: #f0f2f5;
  color: #212529;
}

/* Navbar */
html.light-mode .navbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid #dee2e6;
}
html.light-mode .navbar .nav-link          { color: #495057 !important; }
html.light-mode .navbar .nav-link:hover,
html.light-mode .navbar .nav-link.active   { color: #0d6efd !important; }
html.light-mode .navbar .navbar-toggler    { border-color: rgba(0,0,0,.15); }
html.light-mode .navbar .navbar-toggler-icon { filter: invert(1); }
html.light-mode #navEventname             { color: #6c757d !important; }

/* Page heading */
html.light-mode .page-heading { color: #212529; }

/* Bootstrap utility class overrides */
html.light-mode .bg-dark        { background-color: #ffffff !important; }
html.light-mode .text-white     { color: #212529 !important; }
html.light-mode .border-secondary { border-color: #dee2e6 !important; }
/* Badges normally have white text; once .bg-dark is flipped to white in
   light mode (above) the text becomes invisible. Force a dark colour
   and a slightly darker border so the badge is still readable. */
html.light-mode .badge.bg-dark  { color: #212529 !important; border-color: #adb5bd !important; }

/* Form labels */
html.light-mode .form-label,
html.light-mode .form-check-label { color: #212529; }

/* Form controls */
html.light-mode .form-control,
html.light-mode .form-select {
  background-color: #ffffff !important;
  color:            #212529 !important;
  border-color:     #ced4da !important;
}
html.light-mode .form-control::placeholder { color: #adb5bd !important; }
html.light-mode textarea.form-control {
  background-color: #ffffff !important;
  color:            #212529 !important;
}

/* Dropdowns */
html.light-mode .dropdown-menu-dark {
  --bs-dropdown-bg:                #cccccc;
  --bs-dropdown-color:             #212529;
  --bs-dropdown-link-color:        #212529;
  --bs-dropdown-link-hover-color:  #212529;
  --bs-dropdown-link-hover-bg:     #f8f9fa;
  --bs-dropdown-link-active-bg:    #e9ecef;
  --bs-dropdown-link-active-color: #212529;
  --bs-dropdown-divider-bg:        #dee2e6;
  --bs-dropdown-border-color:      #dee2e6;
}

/* Tables */
html.light-mode .table-dark {
  --bs-table-bg:             #ffffff;
  --bs-table-striped-bg:     #f8f9fa;
  --bs-table-color:          #212529;
  --bs-table-border-color:   #dee2e6;
  --bs-table-striped-color:  #212529;
  --bs-table-hover-bg:       rgba(0,0,0,0.06);
  --bs-table-hover-color:    #212529;
}
/* Override per-page dark hover rules (database.html, documents.html, merchandise.html) */
html .table-db    tbody tr:hover td,
html .doc-table   tbody tr:hover td,
html .merch-table tbody tr:hover td { background-color: rgba(255,255,255,0.07); }
html.light-mode .table-db    tbody tr:hover td,
html.light-mode .doc-table   tbody tr:hover td,
html.light-mode .merch-table tbody tr:hover td { background-color: rgba(0,0,0,0.06); }
html.light-mode .merch-table th { background-color: #f8f9fa !important; color: #6c757d; border-color: #dee2e6 !important; }
html.light-mode .merch-table td { background-color: #ffffff !important; color: #212529; border-color: #dee2e6 !important; }
html.light-mode .table-dark > :not(caption) > * > * {
  color:             #212529;
  border-bottom-color: #dee2e6;
}
html.light-mode .dataTables_wrapper { color: #212529; }
html.light-mode .dataTables_wrapper .dataTables_filter input,
html.light-mode .dataTables_wrapper .dataTables_length select {
  background-color: #ffffff;
  color:            #212529;
  border:           1px solid #ced4da;
  border-radius:    4px;
}
html.light-mode .page-link {
  background-color: #ffffff;
  border-color:     #dee2e6;
  color:            #0d6efd;
}
html.light-mode .page-item.disabled .page-link {
  background-color: #f8f9fa;
  color:            #6c757d;
}

/* Modals */
html.light-mode .modal-content.bg-dark     { background-color: #ffffff !important; }
html.light-mode .modal-header.border-secondary,
html.light-mode .modal-footer.border-secondary { border-color: #dee2e6 !important; }
html.light-mode .btn-close-white           { filter: invert(1) grayscale(100%) brightness(0.5); }

/* Landing page */
html.light-mode .brand-wordmark { color: #212529; }
html.light-mode .hero p   { color: #6c757d; }
html.light-mode .feature-card {
  background-color: #ffffff;
  border-color:     #dee2e6;
}
html.light-mode .feature-card h6 { color: #212529; }
html.light-mode .feature-card p  { color: #6c757d; }
html.light-mode .event-card      { background: #ffffff !important; border-color: #dee2e6 !important; }

/* ===== Event cards (landing page, logged-in view) ===== */
.event-card {
  background-color: #16162a;
  border: 1px solid #2e2e4e;
  border-radius: 12px;
  overflow: hidden;
  max-width: 440px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
  display: block;
}
.event-card:hover {
  border-color: #5851db;
  transform: translateY(-2px);
  color: inherit;
  text-decoration: none;
}
.event-card-body {
  padding: 1rem 1.5rem 1.5rem;
}
.event-card-banner {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: contain;
  display: block;
  background-color: #0e0e20;
  padding: 0.5rem;
  box-sizing: border-box;
}
.event-card-banner.hidden {
  display: none;
}
.event-card-banner-placeholder {
  width: 100%;
  aspect-ratio: 2 / 1;
  background: linear-gradient(135deg, #1e1e38, #0e0e20);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #ccc;
  padding: 0 1.25rem;
  white-space: nowrap;
  overflow: hidden;
}
.event-card-banner-placeholder.hidden {
  display: none;
}
.event-card-name {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-card-date,
.event-card-location {
  font-size: 0.85rem;
  color: #7070a0;
  margin: 0;
}
.event-card-date {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.light-mode .event-card-name                    { color: #212529; }
html.light-mode .event-card-date,
html.light-mode .event-card-location                { color: #6c757d; }

/* SweetAlert2 */
html.light-mode .swal2-popup         { background-color: #ffffff; color: #212529; }
html.light-mode .swal2-title         { color: #212529; }
html.light-mode .swal2-html-container { color: #212529; }

/* Footer */
html.light-mode footer { background-color: #f8f9fa; color: #6c757d; }

/* Kanban */
html.light-mode .kanban-col        { background: #ffffff !important; border-color: #dee2e6 !important; }
html.light-mode .kanban-col-header { color: #212529 !important; border-bottom-color: #dee2e6 !important; }
html.light-mode .kanban-card   { background: #f8f9fa !important; border-color: #dee2e6 !important; color: #212529 !important; }
html.light-mode .kanban-card:hover { background: #e9ecef !important; border-color: #adb5bd !important; }
html.light-mode .kanban-card-ticket { color: #212529 !important; }
html.light-mode .kanban-card-id     { color: #adb5bd !important; }
html.light-mode .kanban-card-footer { color: #6c757d !important; }

/* Todo child-row edit area */
html.light-mode #todosTable tr.dt-hasChild + tr > td { background: #f8f9fa !important; }

/* Budget page */
html.light-mode .budget-section-header {
  background-color: #cccccc;
  border-color: #dee2e6;
}
.budget-section-header h4                    { color: #cccccc; }
html.light-mode .budget-section-header h4    { color: #212529; }
html.light-mode .budget-section-total        { color: #495057; }

html.light-mode .budget-post                 { background-color: #ffffff; border-color: #dee2e6; }
html.light-mode .drag-handle                 { color: #adb5bd; }
html.light-mode .budget-post-header          { background-color: #dddddd; }
html.light-mode .budget-post-header:hover    { background-color: #f8f9fa; }
html.light-mode .budget-post-title           { color: #212529; }
html.light-mode .budget-post-title .chevron  { color: #adb5bd; }
html.light-mode .budget-post-summary         { color: #6c757d; }
html.light-mode .budget-post-summary .post-total { color: #212529; }
html.light-mode .budget-post-body            { border-top-color: #dee2e6; }

html.light-mode .budget-items-table th {
  color: #6c757d;
  border-bottom-color: #dee2e6;
}
html.light-mode .budget-items-table td       { color: #212529; }
html.light-mode .budget-items-table td.col-total { color: #212529; }
html.light-mode .budget-items-table tr:not(.add-row):hover td { background-color: #f0f2f5; }

html.light-mode .budget-item-input {
  background-color: #ffffff;
  border-color: #ced4da;
  color: #212529;
}
html.light-mode .budget-item-input:focus     { border-color: #86b7fe; background-color: #ffffff; color: #212529; }

html.light-mode .btn-add-item                { background: #e9ecef; border-color: #ced4da; color: #212529; }
html.light-mode .btn-add-item:hover          { background: #dee2e6; color: #212529; }
html.light-mode .btn-delete-item             { color: #adb5bd; }

html.light-mode .add-post-row input {
  background-color: #ffffff;
  border-color: #ced4da;
  color: #212529;
}
html.light-mode .add-post-row input:focus    { border-color: #86b7fe; background-color: #ffffff; color: #212529; }

html.light-mode .grand-total-bar             { background-color: #ffffff; border-color: #dee2e6; }
html.light-mode .grand-total-item .label     { color: #6c757d; }
html.light-mode .grand-total-item .amount    { color: #212529; }

html.light-mode #budgetSelect {
  background-color: #ffffff;
  border-color: #ced4da;
  color: #212529;
}

/* Dark accordion in light mode */
html.light-mode .accordion-dark .accordion-item        { background-color: #ffffff; border-color: #dee2e6; color: #212529; }
html.light-mode .accordion-dark .accordion-button      { background-color: #f8f9fa; color: #212529; box-shadow: none; }
html.light-mode .accordion-dark .accordion-button:not(.collapsed) { background-color: #e9ecef; color: #212529; box-shadow: none; }
html.light-mode .accordion-dark .accordion-button::after { filter: none; }
html.light-mode .accordion-dark .accordion-body        { background-color: #ffffff; }

/* App badge in light mode */
html.light-mode .app-badge {
  background:  #e9ecef !important;
  border:      1px solid #ced4da !important;
  color:       #212529 !important;
}


/* ===== Participant bulk-action submenu ===== */
.participant-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
.participant-submenu-parent:hover > .participant-submenu {
  display: block;
}


.admin-only { display: none; }
.auth-only  { display: none; }
.event-only { display: none; }

.nav-divider {
  color: #2e2e4e;
  user-select: none;
  cursor: default;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Event zone — accent color when an event is selected (Option 3) */
.event-zone-active .event-only .nav-link,
.event-zone-active .event-only .dropdown-toggle {
  color: #a78bfa;
}
.event-zone-active .event-only .nav-link:hover,
.event-zone-active .event-only .dropdown-toggle:hover,
.event-zone-active .event-only .nav-link.show,
.event-zone-active .event-only .dropdown-toggle.show {
  color: #c4b5fd;
}
.event-zone-active .event-only .nav-link.active {
  color: #ffffff;
}
.event-zone-active .nav-divider {
  color: #6b46c1;
}

/* Event zone — dimmed/hint state when logged in but no event selected (Option 4) */
.event-zone-inactive .event-only .nav-link,
.event-zone-inactive .event-only .dropdown-toggle {
  opacity: 0.35;
  pointer-events: none;
}
.event-zone-inactive .nav-divider {
  opacity: 0.35;
}

/* ===== Pricing (index.html) ===== */
.pricing-section {
  background: #1a1a2e;
  padding: 4rem 1.5rem 3rem;
  border-top: 1px solid #2e2e4e;
}
.pricing-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.pricing-heading {
  color: #ffffff;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.4rem;
}
.pricing-subheading {
  color: #7070a0;
  text-align: center;
  margin-bottom: 2.5rem;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}
.pricing-card {
  position: relative;
  background-color: #16162a;
  border: 1px solid #2e2e4e;
  border-radius: 12px;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, border-color 0.15s;
}
.pricing-card:hover {
  transform: translateY(-3px);
  border-color: #5851db;
}
.pricing-card-featured {
  border-color: #5851db;
  box-shadow: 0 8px 28px rgba(88, 81, 219, 0.25);
}
.pricing-badge {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(to right, #e44d90, #5851db);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
}
.pricing-tier {
  color: #e0e0f0;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.pricing-price {
  color: #ffffff;
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.pricing-price span {
  color: #7070a0;
  font-size: 0.85rem;
  font-weight: 400;
  margin-left: 0.25rem;
}
.pricing-blurb {
  color: #8a8ab0;
  font-size: 0.9rem;
  margin-bottom: 1.2rem;
  min-height: 2.6em;
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  flex: 1;
}
.pricing-features li {
  color: #b0b0d0;
  font-size: 0.9rem;
  padding: 0.4rem 0 0.4rem 1.4rem;
  position: relative;
  border-bottom: 1px solid rgba(46, 46, 78, 0.6);
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-features li::before {
  content: "✓";
  color: #5851db;
  position: absolute;
  left: 0;
  font-weight: 700;
}
.pricing-cta {
  width: 100%;
}

html.light-mode .pricing-section {
  background: #f8f9fc;
  border-top-color: #dee2e6;
}
html.light-mode .pricing-heading { color: #212529; }
html.light-mode .pricing-subheading { color: #6c757d; }
html.light-mode .pricing-card {
  background: #ffffff;
  border-color: #dee2e6;
}
html.light-mode .pricing-tier { color: #212529; }
html.light-mode .pricing-price { color: #212529; }
html.light-mode .pricing-price span { color: #6c757d; }
html.light-mode .pricing-blurb,
html.light-mode .pricing-features li { color: #495057; }
html.light-mode .pricing-features li { border-bottom-color: #e9ecef; }

/* ===== Impressum (legal notice at the bottom of index.html) ===== */
.impressum {
  background: #16162a;
  border-top: 1px solid #2e2e4e;
  padding: 2.5rem 1.5rem 0;
}
.impressum-inner {
  max-width: 720px;
  margin: 0 auto;
  color: #8a8ab0;
  font-size: 0.9rem;
  line-height: 1.55;
}
.impressum-heading {
  color: #e0e0f0;
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1.1rem;
}
.impressum p {
  margin-bottom: 0.9rem;
}
.impressum strong {
  color: #e0e0f0;
  display: block;
  margin-bottom: 0.15rem;
}
.impressum a {
  color: #8888c8;
  text-decoration: none;
}
.impressum a:hover {
  color: #b0b0e0;
  text-decoration: underline;
}

html.light-mode .impressum {
  background: #f5f5f8;
  border-top-color: #dee2e6;
}
html.light-mode .impressum-inner { color: #6c757d; }
html.light-mode .impressum-heading,
html.light-mode .impressum strong { color: #212529; }
html.light-mode .impressum a { color: #5851db; }

/* ===== Preparation megamenu ===== */
.droneboost-mega-menu {
  min-width: 680px;
  padding: 0;
  background: #16162a;
  border: 1px solid rgba(255,255,255,0.25);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.droneboost-mega-menu .d-flex { flex-wrap: wrap; }
.droneboost-mega-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: #d0d0e8;
  border-radius: 6px;
  flex: 1 1 40%;
  transition: background 0.15s;
}
@media (max-width: 576px) {
  .droneboost-mega-menu { min-width: 0; width: 100%; }
  .droneboost-mega-item { flex: 1 1 100%; }
}
.droneboost-mega-item:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
}
.droneboost-mega-icon {
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 2px;
  opacity: 0.75;
  flex-shrink: 0;
}
.droneboost-mega-title {
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 0.3rem;
  color: #e8e8f8;
}
.droneboost-mega-arrow {
  font-size: 0.65rem;
  opacity: 0.6;
  vertical-align: middle;
}
.droneboost-mega-desc {
  font-size: 0.78rem;
  color: #8080a8;
  line-height: 1.4;
}
html.light-mode .droneboost-mega-menu {
  background: #ffffff;
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
html.light-mode .droneboost-mega-item { color: #333; }
html.light-mode .droneboost-mega-item:hover { background: rgba(0,0,0,0.05); color: #000; }
html.light-mode .droneboost-mega-title { color: #111; }
html.light-mode .droneboost-mega-desc  { color: #666; }

/* ===== Cog button & panel (language + theme) ===== */
.nav-cog-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #c8c8d0;
  padding: .4rem .5rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  font-size: 1rem;
  transition: color .15s, background .15s;
}
.nav-cog-btn:hover,
.nav-cog-btn.active { color: #fff; background: rgba(255,255,255,.08); }

.nav-cog-panel {
  position: fixed;
  z-index: 1050;
  background: #16162a;
  border: 1px solid #2e2e4e;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  min-width: 200px;
  overflow: hidden;
}
.nav-cog-section-title {
  padding: .5rem 1rem .25rem;
  font-size: .72rem;
  font-weight: 700;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.lang-option {
  width: 100%;
  display: flex;
  align-items: center;
  padding: .45rem 1rem .45rem 2.25rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .875rem;
  color: #c8c8d0;
  text-align: left;
  transition: background .1s;
  position: relative;
}
.lang-option:hover { background: rgba(255,255,255,.06); color: #fff; }
.lang-option.active { font-weight: 600; color: #fff; }
.lang-option.active::before {
  content: '✓';
  position: absolute;
  left: .875rem;
  font-size: .75rem;
  color: #0d6efd;
}
.nav-cog-divider {
  border: none;
  border-top: 1px solid #2e2e4e;
  margin: .25rem 0;
}
.nav-cog-theme { padding: .5rem 1rem .75rem; }

html.light-mode .nav-cog-btn { color: #495057; }
html.light-mode .nav-cog-btn:hover,
html.light-mode .nav-cog-btn.active { color: #212529; background: rgba(0,0,0,.06); }
html.light-mode .nav-cog-panel {
  background: #fff;
  border-color: #dee2e6;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
html.light-mode .nav-cog-section-title { color: #868e96; }
html.light-mode .lang-option { color: #495057; }
html.light-mode .lang-option:hover { background: rgba(0,0,0,.04); color: #212529; }
html.light-mode .lang-option.active { color: #212529; }
html.light-mode .nav-cog-divider { border-color: #dee2e6; }

/* ── Before/after comparison ─────────────────────────────────────────────────
   Shared by the landing page showcase and the boosting page. The original sits
   exactly over the boosted one and is revealed with clip-path: the obvious
   alternative, a clipping div whose inner image is resized as the divider
   moves, forces a layout pass on every mousemove and visibly flickers. */

.compare {
  position: relative;
  overflow: hidden;
  background: #101214;
  border-radius: 10px;
  touch-action: pan-y;
  cursor: ew-resize;
}
.compare:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.compare, .compare * { -webkit-user-select: none; user-select: none; }
.compare img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;      /* never the event target; the frame handles it */
}
.compare .compare-before { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.compare-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: #fff;
  will-change: left;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
  pointer-events: none;
}
.compare-handle span {
  position: absolute; top: 50%; left: 50%;
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.compare-handle span::before {
  content: "\2194";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #222; font-size: 16px;
}
.compare-tag {
  position: absolute; top: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 4px;
  background: rgba(0,0,0,.62); color: #fff; backdrop-filter: blur(3px);
  pointer-events: none;
}
.compare .tag-before { left: 12px; }
.compare .tag-after  { right: 12px; }

/* While dragging the pointer leaves the frame, so the selection guard has to
   cover the document rather than just the comparison. */
body.is-dragging, body.is-dragging * {
  -webkit-user-select: none; user-select: none;
  cursor: ew-resize !important;
}

/* ── Landing page showcase ───────────────────────────────────────────────── */

/* Full container width makes a 3:2 stage ~820px tall, which pushes the
   feature cards off the fold entirely. */
.showcase { max-width: 900px; margin: 0 auto 3rem; }
.showcase-head { margin-bottom: 1rem; }
.showcase-head h2 { font-size: 1.35rem; margin: 0 0 .25rem; }
.showcase-head p { margin: 0; opacity: .7; font-size: .95rem; }

/* The samples are 1024x768. Matching the stage to them means no crop. */
.showcase-stage { aspect-ratio: 4 / 3; }
.showcase-stage img { height: 100%; object-fit: cover; }

.showcase-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  margin-top: .7rem;
}
.showcase-thumb {
  position: relative;
  padding: 0; border: 2px solid transparent; border-radius: 8px;
  background: none; overflow: hidden; cursor: pointer; line-height: 0;
  transition: border-color .15s ease;
}
/* Dim the picture, not the button: dimming the whole thing takes the caption
   with it and the labels stop being readable. */
.showcase-thumb img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  opacity: .55; transition: opacity .15s ease;
}
.showcase-thumb span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .35rem .5rem;
  font-size: .72rem; line-height: 1.2; text-align: left;
  color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.72));
}
.showcase-thumb:hover img, .showcase-thumb:focus-visible img { opacity: .85; }
.showcase-thumb:focus-visible { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: 2px; }
.showcase-thumb.is-active img { opacity: 1; }
.showcase-thumb.is-active { border-color: var(--bs-primary, #0d6efd); }

@media (max-width: 575px) {
  .showcase-picker { grid-template-columns: repeat(2, 1fr); }
  .compare-tag { font-size: 10px; padding: 3px 7px; }
}