/*
 * 0.jetzt – Theme über Landrick und den bisherigen Theme-Dateien.
 * Dunkle, fast schwarze Basis, Blau als Akzent, Glas-Flächen.
 * Hellmodus bleibt über den Umschalter verfügbar (html[data-theme="light"]).
 */

:root {
  --zj-accent: #2f6bff;
  --zj-accent-2: #5b8cff;
  --zj-accent-dark: #1f4fd6;
  --zj-accent-rgb: 47, 107, 255;
  --zj-radius: 16px;
  --zj-radius-sm: 10px;
  --zj-font: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --zj-ease: cubic-bezier(.2, .7, .2, 1);

  --bs-primary: #2f6bff;
  --bs-primary-rgb: 47, 107, 255;
  --bs-link-color: #2f6bff;
  --bs-link-hover-color: #1f4fd6;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --zj-bg: #04060b;
  --zj-bg-2: #070b14;
  --zj-surface: rgba(16, 22, 36, .62);
  --zj-surface-2: rgba(22, 30, 48, .72);
  --zj-surface-solid: #0c1220;
  --zj-border: rgba(148, 163, 184, .14);
  --zj-border-strong: rgba(148, 163, 184, .24);
  --zj-text: #e7ecf6;
  --zj-muted: #8d99b0;
  --zj-shadow: 0 10px 40px rgba(0, 0, 0, .45);
  --bs-body-bg: #04060b;
  --bs-body-color: #e7ecf6;
  --bs-border-color: rgba(148, 163, 184, .14);
  --bs-secondary-color: #8d99b0;
}

html[data-theme="light"] {
  --zj-bg: #f4f6fb;
  --zj-bg-2: #eef2fa;
  --zj-surface: rgba(255, 255, 255, .78);
  --zj-surface-2: rgba(255, 255, 255, .92);
  --zj-surface-solid: #ffffff;
  --zj-border: rgba(15, 23, 42, .08);
  --zj-border-strong: rgba(15, 23, 42, .14);
  --zj-text: #0b1736;
  --zj-muted: #5b6780;
  --zj-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

/* ---- Grundlayout ------------------------------------------------------- */

html, body {
  font-family: var(--zj-font);
}

body {
  background-color: var(--zj-bg) !important;
  color: var(--zj-text);
  -webkit-font-smoothing: antialiased;
}

html[data-theme="dark"] body {
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(var(--zj-accent-rgb), .18), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(91, 140, 255, .10), transparent 60%);
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .title, .heading {
  color: var(--zj-text);
  letter-spacing: -.01em;
}

.text-muted, .text-secondary, .form-text, small.text-muted {
  color: var(--zj-muted) !important;
}

.text-primary, a.text-primary {
  color: var(--zj-accent-2) !important;
}

a {
  color: var(--zj-accent-2);
  transition: color .15s var(--zj-ease);
}

a:hover {
  color: var(--zj-accent);
}

::selection {
  background: rgba(var(--zj-accent-rgb), .35);
}

.bg-light, .bg-white, .page-content.bg-light, section.bg-light, .bg-soft-light {
  background-color: transparent !important;
}

.bg-primary {
  background-color: var(--zj-accent) !important;
}

/* ---- Glas-Flächen ---------------------------------------------------------- */

.card, .zj-glass, .modal-content, .dropdown-menu, .offcanvas, .swal2-popup, .toast {
  background: var(--zj-surface) !important;
  border: 1px solid var(--zj-border) !important;
  border-radius: var(--zj-radius) !important;
  box-shadow: var(--zj-shadow) !important;
  color: var(--zj-text);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

.card .card-header, .card .card-footer {
  background: transparent !important;
  border-color: var(--zj-border) !important;
}

.card.shadow, .shadow, .shadow-lg, .shadow-md {
  box-shadow: var(--zj-shadow) !important;
}

.card.features:hover, .zj-lift:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--zj-accent-rgb), .45) !important;
}

.card.features, .zj-lift {
  transition: transform .2s var(--zj-ease), border-color .2s var(--zj-ease);
}

.border-primary {
  border-color: rgba(var(--zj-accent-rgb), .6) !important;
}

hr, .border-top, .border-bottom, .border {
  border-color: var(--zj-border) !important;
}

/* ---- Navigation (Startseite) ------------------------------------------------ */

#topnav, #topnav.nav-sticky {
  background: rgba(4, 6, 11, .55) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--zj-border);
  box-shadow: none !important;
}

html[data-theme="light"] #topnav, html[data-theme="light"] #topnav.nav-sticky {
  background: rgba(255, 255, 255, .7) !important;
}

#topnav .navigation-menu > li > a {
  color: var(--zj-text) !important;
}

#topnav .navigation-menu > li:hover > a, #topnav .navigation-menu > li.active > a {
  color: var(--zj-accent-2) !important;
}

#topnav .navigation-menu .submenu {
  background: var(--zj-surface-solid) !important;
  border: 1px solid var(--zj-border);
  border-radius: var(--zj-radius-sm);
}

footer, .footer, .footer-bar {
  background: rgba(4, 6, 11, .6) !important;
  border-top: 1px solid var(--zj-border);
  color: var(--zj-muted);
}

html[data-theme="light"] footer, html[data-theme="light"] .footer, html[data-theme="light"] .footer-bar {
  background: rgba(255, 255, 255, .6) !important;
}

.footer .footer-head, footer h5 {
  color: var(--zj-text) !important;
}

/* ---- Dashboard ------------------------------------------------------------------ */

.page-wrapper .page-content, .page-content {
  background: transparent !important;
}

.sidebar-wrapper, .sidebar-wrapper.sidebar-dark {
  background: rgba(7, 11, 20, .78) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-right: 1px solid var(--zj-border);
  box-shadow: none !important;
}

html[data-theme="light"] .sidebar-wrapper, html[data-theme="light"] .sidebar-wrapper.sidebar-dark {
  background: rgba(255, 255, 255, .82) !important;
}

.sidebar-wrapper .sidebar-menu li a, .sidebar-wrapper .sidebar-menu .nav-link {
  color: var(--zj-muted) !important;
  border-radius: 10px;
  margin: 2px 10px;
  transition: background .15s var(--zj-ease), color .15s var(--zj-ease);
}

.sidebar-wrapper .sidebar-menu li a:hover, .sidebar-wrapper .sidebar-menu li.active > a {
  color: var(--zj-text) !important;
  background: rgba(var(--zj-accent-rgb), .14);
}

.sidebar-wrapper .sidebar-menu li.active > a i {
  color: var(--zj-accent-2) !important;
}

.sidebar-wrapper .dropdown-header, .zj-nav-header {
  color: var(--zj-muted) !important;
  padding: 14px 22px 6px !important;
  font-size: .68rem !important;
  letter-spacing: .1em !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  display: block;
}

.top-header .header-bar {
  background: rgba(4, 6, 11, .55) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--zj-border);
  box-shadow: none !important;
}

html[data-theme="light"] .top-header .header-bar {
  background: rgba(255, 255, 255, .7) !important;
}

.btn-soft-light {
  background: rgba(148, 163, 184, .08) !important;
  border-color: var(--zj-border) !important;
  color: var(--zj-text) !important;
}

/* ---- Formulare ------------------------------------------------------------------- */

.form-control, .form-select, .input-group-text {
  background-color: rgba(10, 15, 26, .6) !important;
  border: 1px solid var(--zj-border-strong) !important;
  color: var(--zj-text) !important;
  border-radius: var(--zj-radius-sm) !important;
}

html[data-theme="light"] .form-control, html[data-theme="light"] .form-select, html[data-theme="light"] .input-group-text {
  background-color: #fff !important;
}

.form-control::placeholder {
  color: var(--zj-muted) !important;
  opacity: .8;
}

.form-control:focus, .form-select:focus {
  border-color: rgba(var(--zj-accent-rgb), .7) !important;
  box-shadow: 0 0 0 .22rem rgba(var(--zj-accent-rgb), .25) !important;
}

.form-label, label {
  color: var(--zj-text);
  font-weight: 500;
}

.form-check-input:checked {
  background-color: var(--zj-accent);
  border-color: var(--zj-accent);
}

.form-range::-webkit-slider-thumb {
  background: var(--zj-accent);
}

.form-range::-moz-range-thumb {
  background: var(--zj-accent);
}

input[type="range"] {
  accent-color: var(--zj-accent);
}

/* ---- Buttons ------------------------------------------------------------------------ */

.btn {
  border-radius: 12px;
  font-weight: 600;
  transition: transform .12s var(--zj-ease), box-shadow .2s var(--zj-ease), background .2s;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  --bs-btn-bg: #2f6bff;
  --bs-btn-border-color: #2f6bff;
  --bs-btn-hover-bg: #1f4fd6;
  --bs-btn-hover-border-color: #1f4fd6;
  --bs-btn-active-bg: #1f4fd6;
  background: linear-gradient(135deg, #4d82ff, #2456e6) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(var(--zj-accent-rgb), .35) !important;
}

.btn-primary:hover, .btn-primary:focus {
  box-shadow: 0 10px 30px rgba(var(--zj-accent-rgb), .5) !important;
  color: #fff !important;
}

.btn-outline-primary {
  color: var(--zj-accent-2) !important;
  border-color: rgba(var(--zj-accent-rgb), .6) !important;
  background: transparent !important;
}

.btn-outline-primary:hover {
  background: rgba(var(--zj-accent-rgb), .14) !important;
  color: var(--zj-text) !important;
}

.btn-soft-primary, .bg-soft-primary {
  background: rgba(var(--zj-accent-rgb), .14) !important;
  color: var(--zj-accent-2) !important;
  border-color: rgba(var(--zj-accent-rgb), .2) !important;
}

.btn-light, .btn-secondary {
  background: rgba(148, 163, 184, .12) !important;
  border-color: var(--zj-border) !important;
  color: var(--zj-text) !important;
}

/* ---- Tabellen, Badges, Alerts ------------------------------------------------------------ */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--zj-text);
  --bs-table-border-color: var(--zj-border);
  --bs-table-hover-bg: rgba(var(--zj-accent-rgb), .06);
  color: var(--zj-text) !important;
}

.table > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--zj-text);
  border-color: var(--zj-border) !important;
}

.table thead th {
  color: var(--zj-muted) !important;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.badge {
  border-radius: 999px;
  font-weight: 600;
}

.alert {
  border-radius: var(--zj-radius-sm) !important;
  border: 1px solid var(--zj-border) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.alert-warning { background: rgba(245, 158, 11, .12) !important; color: #fbbf24 !important; }
.alert-danger { background: rgba(239, 68, 68, .12) !important; color: #f87171 !important; }
.alert-success { background: rgba(34, 197, 94, .12) !important; color: #4ade80 !important; }
.alert-info { background: rgba(var(--zj-accent-rgb), .12) !important; color: var(--zj-accent-2) !important; }

html[data-theme="light"] .alert-warning { color: #92400e !important; }
html[data-theme="light"] .alert-danger { color: #991b1b !important; }
html[data-theme="light"] .alert-success { color: #166534 !important; }

.dropdown-item {
  color: var(--zj-text) !important;
  border-radius: 8px;
}

.dropdown-item:hover, .dropdown-item:focus {
  background: rgba(var(--zj-accent-rgb), .14) !important;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background: rgba(var(--zj-accent-rgb), .2) !important;
  color: var(--zj-text) !important;
}

.nav-tabs {
  border-color: var(--zj-border) !important;
}

.nav-tabs .nav-link {
  color: var(--zj-muted);
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
}

.nav-tabs .nav-link.active {
  background: transparent !important;
  color: var(--zj-text) !important;
  border-bottom-color: var(--zj-accent) !important;
}

/* SweetAlert2 */
.swal2-popup .swal2-title, .swal2-popup .swal2-html-container {
  color: var(--zj-text) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select {
  background: rgba(10, 15, 26, .6);
  border: 1px solid var(--zj-border-strong);
  color: var(--zj-text);
  border-radius: 8px;
}

/* Zurück-nach-oben */
#back-to-top {
  background: var(--zj-accent) !important;
}

/* ---- 0.jetzt-Bausteine ------------------------------------------------------------------- */

.zj-hero {
  padding: 160px 0 80px;
  position: relative;
}

.zj-hero .zj-eyebrow, .zj-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  background: rgba(var(--zj-accent-rgb), .12);
  border: 1px solid rgba(var(--zj-accent-rgb), .3);
  color: var(--zj-accent-2);
  font-size: .8rem;
  font-weight: 600;
}

.zj-gradient-text {
  background: linear-gradient(120deg, #9bb8ff, #2f6bff 55%, #7aa2ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.zj-stat {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--zj-text);
}

.zj-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--zj-accent-rgb), .14);
  color: var(--zj-accent-2);
  font-size: 1.35rem;
  flex: 0 0 auto;
}

.zj-price {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--zj-text);
}

.zj-price small {
  font-size: .9rem;
  font-weight: 500;
  color: var(--zj-muted);
}

.zj-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  background: rgba(148, 163, 184, .12);
  color: var(--zj-muted);
  border: 1px solid var(--zj-border);
}

.zj-chip.ok { background: rgba(34, 197, 94, .12); color: #4ade80; border-color: rgba(34, 197, 94, .25); }
.zj-chip.warn { background: rgba(245, 158, 11, .12); color: #fbbf24; border-color: rgba(245, 158, 11, .25); }
.zj-chip.bad { background: rgba(239, 68, 68, .12); color: #f87171; border-color: rgba(239, 68, 68, .25); }
.zj-chip.info { background: rgba(var(--zj-accent-rgb), .12); color: var(--zj-accent-2); border-color: rgba(var(--zj-accent-rgb), .25); }

html[data-theme="light"] .zj-chip.ok { color: #15803d; }
html[data-theme="light"] .zj-chip.warn { color: #b45309; }
html[data-theme="light"] .zj-chip.bad { color: #b91c1c; }

.zj-maintenance {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .9rem 1rem;
  border-radius: var(--zj-radius-sm);
  background: rgba(245, 158, 11, .1);
  border: 1px solid rgba(245, 158, 11, .3);
  color: #fbbf24;
}

html[data-theme="light"] .zj-maintenance { color: #92400e; }

.zj-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.zj-segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.zj-segmented label {
  cursor: pointer;
  padding: .7rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--zj-border-strong);
  background: rgba(148, 163, 184, .06);
  transition: border-color .15s, background .15s;
  min-width: 120px;
  margin: 0;
}

.zj-segmented input:checked + label {
  border-color: rgba(var(--zj-accent-rgb), .8);
  background: rgba(var(--zj-accent-rgb), .14);
  box-shadow: 0 0 0 3px rgba(var(--zj-accent-rgb), .15);
}

.zj-segmented input:disabled + label {
  opacity: .45;
  cursor: not-allowed;
}

.zj-summary {
  position: sticky;
  top: 96px;
}

.zj-kv {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0;
  border-bottom: 1px dashed var(--zj-border);
}

.zj-kv:last-child { border-bottom: 0; }
.zj-kv span:first-child { color: var(--zj-muted); }

.zj-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--zj-muted);
}

.zj-empty i { font-size: 2rem; display: block; margin-bottom: .5rem; color: var(--zj-accent-2); }

.zj-secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: .6rem .8rem;
  border-radius: 10px;
  background: rgba(var(--zj-accent-rgb), .1);
  border: 1px dashed rgba(var(--zj-accent-rgb), .45);
  word-break: break-all;
}

.zj-skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(148, 163, 184, .08), rgba(148, 163, 184, .18), rgba(148, 163, 184, .08));
  background-size: 200% 100%;
  animation: zj-shimmer 1.2s linear infinite;
  min-height: 1rem;
}

@keyframes zj-shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Mobil ---------------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .zj-hero { padding: 120px 0 50px; }
  .zj-summary { position: static; }
  .zj-price { font-size: 1.6rem; }
  .card { border-radius: 14px !important; }
}