@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/*
 * NEUROVEXA / HDC-Host24 – Gemeinsames Design-System
 * ------------------------------------------------------------
 * Wird von allen Bereichen geladen (Landing, Auth, Kundenbereich, Dashboard, Legacy-Layout).
 * Theme: <html data-theme="dark|light">, gespeichert in localStorage "hdc_theme".
 *
 * 1. Tokens (--hdc-*)
 * 2. Kompatibilitäts-Mapping: Landing-Variablen (modern-theme.css) und
 *    Kundenseiten-Variablen (--bg, --card, --t1 … aus den Seiten-<style>-Blöcken)
 *    werden auf die Tokens gemappt. Selektor html[data-theme] hat höhere
 *    Spezifität als :root und gewinnt daher immer.
 * 3. Basis, Komponenten, Header/Footer, Landing, Auth, Toastr, Legacy.
 */

/* ============================================================
   1. Tokens
   ============================================================ */
:root,
html[data-theme="dark"] {
  color-scheme: dark;

  --hdc-brand-1: #150773;
  --hdc-brand-2: #5333ed;
  --hdc-brand-3: #2cd4d9;
  --hdc-primary: #7c5cfc;
  --hdc-primary-strong: #5333ed;
  --hdc-primary-soft: rgba(124, 92, 252, 0.14);
  --hdc-primary-glow: rgba(124, 92, 252, 0.35);
  --hdc-accent: #2cd4d9;
  --hdc-accent-soft: rgba(44, 212, 217, 0.14);

  --hdc-success: #22c55e;
  --hdc-success-soft: rgba(34, 197, 94, 0.14);
  --hdc-warning: #f59e0b;
  --hdc-warning-soft: rgba(245, 158, 11, 0.14);
  --hdc-danger: #f87171;
  --hdc-danger-soft: rgba(248, 113, 113, 0.14);
  --hdc-info: #38bdf8;
  --hdc-info-soft: rgba(56, 189, 248, 0.14);

  --hdc-bg: #090818;
  --hdc-bg-2: #0e0c22;
  --hdc-surface: #13112b;
  --hdc-surface-2: #1a1836;
  --hdc-surface-3: #221f42;
  --hdc-overlay: rgba(9, 8, 24, 0.82);
  --hdc-border: rgba(255, 255, 255, 0.08);
  --hdc-border-strong: rgba(255, 255, 255, 0.16);

  --hdc-text: #eeedff;
  --hdc-text-2: #b3b0d6;
  --hdc-text-3: #7d7aa3;
  --hdc-on-primary: #ffffff;

  --hdc-nav-bg: rgba(12, 10, 32, 0.86);
  --hdc-header-bg: rgba(13, 10, 38, 0.94);
  --hdc-header-text: #ece9ff;
  --hdc-footer-bg: #07061a;
  --hdc-topbar-bg: #070616;
  --hdc-input-bg: rgba(255, 255, 255, 0.04);
  --hdc-input-border: rgba(255, 255, 255, 0.12);

  --hdc-grad: linear-gradient(135deg, #150773 0%, #5333ed 50%, #2cd4d9 100%);
  --hdc-grad-primary: linear-gradient(135deg, #5333ed 0%, #7c5cfc 55%, #2cd4d9 130%);
  --hdc-grad-soft: linear-gradient(135deg, rgba(83, 51, 237, 0.16) 0%, rgba(44, 212, 217, 0.08) 100%);

  --hdc-radius-xs: 6px;
  --hdc-radius-sm: 8px;
  --hdc-radius: 12px;
  --hdc-radius-lg: 16px;
  --hdc-radius-xl: 22px;

  --hdc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --hdc-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  --hdc-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.5);
  --hdc-ring: 0 0 0 3px rgba(124, 92, 252, 0.35);

  --hdc-font: 'Inter', 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hdc-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="light"] {
  color-scheme: light;

  --hdc-primary: #5333ed;
  --hdc-primary-strong: #3f22d6;
  --hdc-primary-soft: rgba(83, 51, 237, 0.09);
  --hdc-primary-glow: rgba(83, 51, 237, 0.22);
  --hdc-accent: #0e9fa6;
  --hdc-accent-soft: rgba(14, 159, 166, 0.1);

  --hdc-success: #16a34a;
  --hdc-success-soft: rgba(22, 163, 74, 0.1);
  --hdc-warning: #d97706;
  --hdc-warning-soft: rgba(217, 119, 6, 0.1);
  --hdc-danger: #dc2626;
  --hdc-danger-soft: rgba(220, 38, 38, 0.08);
  --hdc-info: #0284c7;
  --hdc-info-soft: rgba(2, 132, 199, 0.09);

  --hdc-bg: #f4f5fb;
  --hdc-bg-2: #eceefa;
  --hdc-surface: #ffffff;
  --hdc-surface-2: #f6f7fc;
  --hdc-surface-3: #eceef8;
  --hdc-overlay: rgba(15, 14, 40, 0.45);
  --hdc-border: rgba(23, 20, 70, 0.09);
  --hdc-border-strong: rgba(23, 20, 70, 0.18);

  --hdc-text: #14132e;
  --hdc-text-2: #4a4a6a;
  --hdc-text-3: #8a8aa6;

  --hdc-nav-bg: rgba(255, 255, 255, 0.9);
  --hdc-topbar-bg: #14102f;
  --hdc-footer-bg: #110d33;
  --hdc-input-bg: #ffffff;
  --hdc-input-border: rgba(23, 20, 70, 0.16);

  --hdc-grad-soft: linear-gradient(135deg, rgba(83, 51, 237, 0.08) 0%, rgba(44, 212, 217, 0.06) 100%);

  --hdc-shadow-sm: 0 1px 2px rgba(20, 19, 46, 0.06);
  --hdc-shadow: 0 6px 24px rgba(20, 19, 46, 0.07);
  --hdc-shadow-lg: 0 18px 50px rgba(20, 19, 46, 0.12);
  --hdc-ring: 0 0 0 3px rgba(83, 51, 237, 0.2);
}

/* ============================================================
   2. Kompatibilitäts-Mapping
   ============================================================ */
html[data-theme],
html:root {
  /* modern-theme.css (Landing) */
  --accent: var(--hdc-primary);
  --accent-dark: var(--hdc-primary-strong);
  --accent-glow: var(--hdc-primary-glow);
  --accent-subtle: var(--hdc-primary-soft);
  --bg-2: var(--hdc-bg-2);
  --bg-card: var(--hdc-surface);
  --bg-card-hover: var(--hdc-surface-2);
  --border-strong: var(--hdc-border-strong);
  --text-primary: var(--hdc-text);
  --text-secondary: var(--hdc-text-2);
  --text-muted: var(--hdc-text-3);
  --nav-bg: var(--hdc-nav-bg);
  --nav-text: var(--hdc-text);
  --topbar-bg: var(--hdc-topbar-bg);
  --modal-bg: var(--hdc-surface);
  --input-bg: var(--hdc-input-bg);
  --input-border: var(--hdc-input-border);
  --input-text: var(--hdc-text);
  --section-alt: var(--hdc-bg-2);
  --shadow-card: var(--hdc-shadow);

  /* Kundenseiten (profile, kvm, webspace, teamspeak, plesk, accounting …) */
  --bg: var(--hdc-bg);
  --card: var(--hdc-surface);
  --border: var(--hdc-border);
  --border-h: var(--hdc-border-strong);
  --t1: var(--hdc-text);
  --t2: var(--hdc-text-2);
  --t3: var(--hdc-text-3);
  --cyan: var(--hdc-accent);
  --font: var(--hdc-font);
  --gradient: var(--hdc-grad);
  --shadow: var(--hdc-shadow-sm);
  --shadow-h: var(--hdc-shadow);
  --r: var(--hdc-radius);
  --r-sm: var(--hdc-radius-sm);
  --r-lg: var(--hdc-radius-lg);
}

/* ============================================================
   3. Basis
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; }
body {
  background-color: var(--hdc-bg) !important;
  color: var(--hdc-text) !important;
  font-family: var(--hdc-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color .25s var(--hdc-ease), color .25s var(--hdc-ease);
}
h1, h2, h3, h4, h5, h6 { font-family: var(--hdc-font); letter-spacing: -0.01em; }
::selection { background: var(--hdc-primary); color: #fff; }
:focus-visible { outline: 2px solid var(--hdc-primary); outline-offset: 2px; }
img { max-width: 100%; }

* { scrollbar-width: thin; scrollbar-color: var(--hdc-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--hdc-border-strong); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   4. Komponenten (neu, präfixiert)
   ============================================================ */
.hdc-card {
  background: var(--hdc-surface);
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-radius-lg);
  box-shadow: var(--hdc-shadow-sm);
  color: var(--hdc-text);
}
.hdc-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--hdc-border);
}
.hdc-card__title {
  display: flex; align-items: center; gap: .6rem; margin: 0;
  font-size: 1rem; font-weight: 700; color: var(--hdc-text) !important;
}
.hdc-card__body { padding: 1.25rem 1.35rem; }

.hdc-icon-badge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2rem; height: 2rem; border-radius: 10px; font-size: .85rem;
  background: var(--hdc-primary-soft); color: var(--hdc-primary);
}
.hdc-icon-badge--accent { background: var(--hdc-accent-soft); color: var(--hdc-accent); }
.hdc-icon-badge--warning { background: var(--hdc-warning-soft); color: var(--hdc-warning); }
.hdc-icon-badge--success { background: var(--hdc-success-soft); color: var(--hdc-success); }
.hdc-icon-badge--info { background: var(--hdc-info-soft); color: var(--hdc-info); }

.hdc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.6rem; padding: .6rem 1.2rem;
  border-radius: var(--hdc-radius); border: 1px solid transparent;
  font: 600 .875rem/1.2 var(--hdc-font); letter-spacing: .01em;
  text-decoration: none !important; cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--hdc-ease), box-shadow .18s var(--hdc-ease), background .18s var(--hdc-ease), border-color .18s, color .18s;
}
.hdc-btn:hover { transform: translateY(-1px); }
.hdc-btn:active { transform: translateY(0); }
.hdc-btn--primary { background: var(--hdc-grad-primary); color: #fff !important; box-shadow: 0 6px 18px var(--hdc-primary-glow); }
.hdc-btn--primary:hover { box-shadow: 0 10px 26px var(--hdc-primary-glow); color: #fff !important; }
.hdc-btn--ghost { background: var(--hdc-surface-2); border-color: var(--hdc-border); color: var(--hdc-text) !important; }
.hdc-btn--ghost:hover { border-color: var(--hdc-border-strong); background: var(--hdc-surface-3); }
.hdc-btn--icon { width: 2.25rem; min-height: 2.25rem; padding: 0; border-radius: 10px; }
.hdc-btn--sm { min-height: 2rem; padding: .4rem .8rem; font-size: .8rem; border-radius: 10px; }

.hdc-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .7rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--hdc-primary-soft); color: var(--hdc-primary);
}
.hdc-pill--success { background: var(--hdc-success-soft); color: var(--hdc-success); }
.hdc-pill--warning { background: var(--hdc-warning-soft); color: var(--hdc-warning); }
.hdc-pill--danger { background: var(--hdc-danger-soft); color: var(--hdc-danger); }

.hdc-input,
.hdc-textarea {
  display: block; width: 100%;
  padding: .7rem .9rem; border-radius: var(--hdc-radius);
  background: var(--hdc-input-bg); color: var(--hdc-text);
  border: 1px solid var(--hdc-input-border);
  font: 400 .9rem/1.55 var(--hdc-font);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.hdc-input::placeholder, .hdc-textarea::placeholder { color: var(--hdc-text-3); }
.hdc-input:focus, .hdc-textarea:focus { outline: none; border-color: var(--hdc-primary); box-shadow: var(--hdc-ring); }
.hdc-textarea { resize: vertical; min-height: 9rem; }

/* Theme-Toggle (überall gleich) */
.hdc-theme-toggle {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0 !important;
  border-radius: 10px; border: 1px solid var(--hdc-border-strong) !important;
  background: var(--hdc-surface-2) !important; color: var(--hdc-text) !important;
  cursor: pointer; font-size: .95rem; line-height: 1;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.hdc-theme-toggle:hover { background: var(--hdc-primary-soft) !important; border-color: var(--hdc-primary) !important; color: var(--hdc-primary) !important; }
.hdc-theme-toggle i { color: inherit !important; font-size: inherit !important; }

/* ============================================================
   5. Bootstrap-/Vendor-Bausteine vereinheitlichen
   ============================================================ */
.card {
  background-color: var(--hdc-surface);
  border-color: var(--hdc-border);
  border-radius: var(--hdc-radius-lg);
  color: var(--hdc-text);
}
.card-header, .card-footer { background-color: transparent; border-color: var(--hdc-border); }

.form-control,
.form-select,
select.form-control,
.custom-select {
  background-color: var(--hdc-input-bg) !important;
  border: 1px solid var(--hdc-input-border) !important;
  color: var(--hdc-text) !important;
  border-radius: var(--hdc-radius) !important;
  font-family: var(--hdc-font);
  transition: border-color .18s, box-shadow .18s !important;
}
.form-control:focus,
.form-select:focus,
.custom-select:focus { border-color: var(--hdc-primary) !important; box-shadow: var(--hdc-ring) !important; outline: none; }
.form-control::placeholder { color: var(--hdc-text-3) !important; }
.form-control:disabled, .form-control[readonly] { opacity: .75; }
select option { background: var(--hdc-surface); color: var(--hdc-text); }
.form-check-input:checked,
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--hdc-primary) !important; border-color: var(--hdc-primary) !important; }

.btn { border-radius: var(--hdc-radius); font-weight: 600; font-family: var(--hdc-font); }
.btn-primary {
  background: var(--hdc-grad-primary) !important;
  border: 0 !important; color: #fff !important;
  box-shadow: 0 6px 18px var(--hdc-primary-glow) !important;
}
.btn-primary:hover, .btn-primary:focus { color: #fff !important; transform: translateY(-1px); box-shadow: 0 10px 26px var(--hdc-primary-glow) !important; }
.btn-light, .btn-secondary.btn-soft, .btn-outline-secondary {
  background: var(--hdc-surface-2) !important; border: 1px solid var(--hdc-border) !important; color: var(--hdc-text) !important;
}
.btn-danger { background: var(--hdc-danger) !important; border-color: var(--hdc-danger) !important; color: #fff !important; }
.btn-success { background: var(--hdc-success) !important; border-color: var(--hdc-success) !important; color: #fff !important; }

.alert { border-radius: var(--hdc-radius); border: 1px solid var(--hdc-border); }
.alert-warning { background: var(--hdc-warning-soft) !important; color: var(--hdc-text) !important; border-color: rgba(245, 158, 11, .35) !important; }
.alert-danger { background: var(--hdc-danger-soft) !important; color: var(--hdc-text) !important; border-color: rgba(248, 113, 113, .35) !important; }
.alert-success { background: var(--hdc-success-soft) !important; color: var(--hdc-text) !important; border-color: rgba(34, 197, 94, .35) !important; }
.alert-info { background: var(--hdc-info-soft) !important; color: var(--hdc-text) !important; border-color: rgba(56, 189, 248, .35) !important; }
.alert .alert-heading, .alert p { color: inherit !important; }

.dropdown-menu {
  background: var(--hdc-surface) !important; border: 1px solid var(--hdc-border) !important;
  border-radius: var(--hdc-radius) !important; box-shadow: var(--hdc-shadow-lg) !important;
}
.dropdown-item { color: var(--hdc-text-2) !important; border-radius: 8px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--hdc-primary-soft) !important; color: var(--hdc-text) !important; }

.modal-content {
  background: var(--hdc-surface) !important; color: var(--hdc-text) !important;
  border: 1px solid var(--hdc-border) !important; border-radius: var(--hdc-radius-lg) !important;
  box-shadow: var(--hdc-shadow-lg) !important;
}
.modal-header, .modal-footer { border-color: var(--hdc-border) !important; }

.table { color: var(--hdc-text); }
.table > :not(caption) > * > * { background-color: transparent; color: inherit; border-color: var(--hdc-border); }

.page-link { background: var(--hdc-surface) !important; border-color: var(--hdc-border) !important; color: var(--hdc-text-2) !important; }
.page-item.active .page-link { background: var(--hdc-primary) !important; border-color: var(--hdc-primary) !important; color: #fff !important; }

/* Toastr (Benachrichtigungen aus app/notifications/sendAlert.php) */
#toast-container > div {
  border-radius: var(--hdc-radius) !important;
  box-shadow: var(--hdc-shadow-lg) !important;
  opacity: 1 !important;
  font-family: var(--hdc-font);
  padding: 15px 15px 15px 52px !important;
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
}
#toast-container > .toast-success { background-color: #15803d !important; }
#toast-container > .toast-error { background-color: #b91c1c !important; }
#toast-container > .toast-info { background-color: #4c33d6 !important; }
#toast-container > .toast-warning { background-color: #b45309 !important; }
#toast-container .toast-title { font-weight: 700; }
#toast-container .toast-progress { opacity: .35; }

/* ============================================================
   6. Landing-Header (resources/additional/header_landing.php)
   ============================================================ */
.header-transparent,
html body .header-transparent {
  position: relative !important;
  z-index: 1000;
  background: var(--hdc-header-bg) !important;
  overflow: visible !important;
}
.xs-top-bar,
html body .header-transparent .xs-top-bar {
  background: var(--hdc-topbar-bg) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
  padding: 6px 0 !important;
}
.xs-top-bar *,
.xs-top-bar-info li p,
.xs-top-bar-info li a,
.top-menu a { color: #b9b4e0 !important; font-size: .78rem !important; }
.xs-top-bar-info li a:hover,
.top-menu a:hover { color: #fff !important; }
.xs-top-bar-info .icon { color: var(--hdc-brand-3) !important; margin-right: .35rem; }
.xs-top-bar .hdc-theme-toggle { width: 1.9rem; height: 1.9rem; border-radius: 8px; background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .14) !important; color: #e8e6ff !important; }
.xs-top-bar .hdc-theme-toggle:hover { background: rgba(255, 255, 255, .14) !important; color: #fff !important; }
.top-menu-right > li { margin-left: .35rem; }
.user-menu-trigger { border-radius: 8px !important; }
.user-menu-trigger:hover { background: rgba(255, 255, 255, .1) !important; }

.xs-header,
html body .header-transparent .xs-header {
  background: var(--hdc-header-bg) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .02);
}
.xs-header .xs-logo-wraper { padding-top: 10px; padding-bottom: 10px; }
.nav-menu > li > a,
.nav-menu > .mega-menus > a,
.xs-header .db-header-menu > li > a { color: var(--hdc-header-text) !important; font-weight: 600 !important; border-radius: 10px !important; }
.nav-menu > li > a:hover,
.nav-menu > li.active > a,
.xs-header .db-header-menu > li > a:hover { color: #fff !important; background: rgba(255, 255, 255, .08) !important; }
.xs-menu-tools li a { color: var(--hdc-header-text) !important; border-radius: 10px; }
.xs-menu-tools li a:hover { color: var(--hdc-brand-3) !important; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background: var(--hdc-header-text) !important; }

.megamenu-panel,
.user-menu-dropdown,
.db-drop-panel { background: var(--hdc-surface) !important; border: 1px solid var(--hdc-border) !important; box-shadow: var(--hdc-shadow-lg) !important; }
.db-drop-panel::before { background: var(--hdc-surface) !important; border-color: var(--hdc-border) !important; }
.user-menu-dropdown a,
.db-drop-item { color: var(--hdc-text-2) !important; }
.user-menu-dropdown a:hover,
.db-drop-item:hover { background: var(--hdc-primary-soft) !important; color: var(--hdc-text) !important; }
.user-menu-dropdown a .icon,
.user-menu-dropdown a .fa,
.db-drop-item i { color: var(--hdc-text-3) !important; }
.user-menu-dropdown a:hover .icon,
.user-menu-dropdown a:hover .fa,
.db-drop-item:hover i { color: var(--hdc-primary) !important; }
.db-drop-label { color: var(--hdc-text-3) !important; }
.user-menu-divider,
.db-drop-section + .db-drop-section { background: var(--hdc-border) !important; border-color: var(--hdc-border) !important; }
.megamenu-panel .media { border-radius: 12px; padding: .6rem; transition: background .15s; }
.megamenu-panel .media:hover { background: var(--hdc-primary-soft); }

/* Mobile-Navigation */
.nav-menus-wrapper { background-color: var(--hdc-surface) !important; }
@media (min-width: 992px) {
  .xs-header .nav-menus-wrapper,
  .xs-header .nav-menu { background: transparent !important; }
}
@media (max-width: 991px) {
  .xs_nav-portrait .nav-menu > li > a,
  .xs_nav-portrait .nav-menu > .mega-menus > a { color: var(--hdc-text) !important; }
}
@media (max-width: 991px) {
  .xs-top-bar-info { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .9rem; margin: 0; }
  .xs-top-bar .col-md-6 { flex: 0 0 100%; max-width: 100%; }
  .top-menu-right { justify-content: center !important; margin-top: .25rem; }
  .xs-header .db-hdr-row { flex-wrap: wrap !important; }
  .db-hdr-row .nav-menus-wrapper { padding-left: 0 !important; }
}
@media (max-width: 991px) {
  /* Template zeigt im Mobil-Header ein zweites Logo neben dem Burger */
  .xs-header .nav-header .nav-brand { display: none !important; }
  .xs-header .nav-header { display: flex; justify-content: flex-end; }
}
@media (max-width: 575px) {
  .xs-top-bar-info li:nth-child(2) { display: none; }
  .db-header-menu { flex-wrap: wrap !important; gap: .25rem; }
  .db-header-menu > li { margin-right: 0 !important; }
}

/* ============================================================
   7. Landing-Inhalte
   ============================================================ */
.xs-banner.banner-v7.inner-banner {
  background: var(--hdc-grad) !important;
  padding: 90px 0 70px !important;
  min-height: 260px !important;
}
.xs-banner.banner-v7.inner-banner .banner-title { color: #fff !important; letter-spacing: -0.01em; text-transform: none; }
.xs-banner.banner-v7.inner-banner .breadcrumbs li,
.xs-banner.banner-v7.inner-banner .breadcrumbs li a { color: rgba(255, 255, 255, .78) !important; }
.xs-banner.banner-v7.inner-banner .breadcrumbs li a:hover { color: #fff !important; }

.xs-section-padding { padding-top: clamp(3rem, 7vw, 5.5rem) !important; padding-bottom: clamp(3rem, 7vw, 5.5rem) !important; }
.heading-sub-title { color: var(--hdc-primary) !important; }
.heading-title span, .xs-heading .heading-title span {
  background: var(--hdc-grad-primary); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--hdc-primary) !important;
}

.xs-single-pricing,
.xs-service-block,
.why-choose-us-block,
.xs-single-team,
.xs-vps-block,
.feature-v2 .xs-feature-group {
  background: var(--hdc-surface) !important;
  border: 1px solid var(--hdc-border) !important;
  border-radius: var(--hdc-radius-xl) !important;
  box-shadow: var(--hdc-shadow-sm) !important;
}
.xs-single-pricing:hover,
.xs-service-block:hover,
.why-choose-us-block:hover { border-color: var(--hdc-primary) !important; box-shadow: var(--hdc-shadow), 0 0 0 1px var(--hdc-primary-soft) !important; }
.xs-single-pricing.active { border-color: var(--hdc-primary) !important; box-shadow: 0 0 0 1px var(--hdc-primary), var(--hdc-shadow) !important; }
.xs-single-pricing .pricing-header { background: var(--hdc-grad-soft) !important; }
.xs-single-pricing .pricing-badge { background: var(--hdc-grad-primary) !important; }
.xs-service-block .service-img { background: var(--hdc-primary-soft) !important; border-radius: 14px !important; }

.call-to-action-section { background: var(--hdc-grad) !important; }
.call-to-action-section .btn-secondary { background: #fff !important; color: var(--hdc-brand-2) !important; }

/* Startseite (home.php) */
.hdc-hero__stats { box-shadow: var(--hdc-shadow); }
.hdc-hero__title .hdc-glow-text { background: var(--hdc-grad-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Landing (landing.php) – Hero mit Illustration */
.landing-hero-section { position: relative; isolation: isolate; }
.landing-hero-section::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 420px at 15% 20%, rgba(44, 212, 217, .16), transparent 65%),
    radial-gradient(600px 400px at 85% 80%, rgba(124, 92, 252, .22), transparent 65%);
}
.landing-hero-section .banner-sub-title { color: var(--hdc-brand-3) !important; }
.landing-hero-section .banner-title { color: #fff !important; font-weight: 800 !important; letter-spacing: -0.02em; }
.landing-hero-section .feature-icon {
  background: rgba(255, 255, 255, .1) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  backdrop-filter: blur(6px);
}
.landing-hero-section .feature-label { color: #fff !important; }
.landing-hero-section .btn { border-radius: 999px !important; }
.landing-hero .btn-hero-primary { box-shadow: 0 10px 28px rgba(0, 0, 0, .25) !important; }
@media (max-width: 991px) {
  .landing-hero-section .xs-banner-image { margin-top: 2rem; }
  .landing-hero-section .banner-6-content { text-align: left; }
}
@media (max-width: 575px) {
  .landing-hero-buttons.landing-hero { flex-direction: column; align-items: stretch; }
  .landing-hero-buttons.landing-hero .btn { width: 100%; justify-content: center; }
}

/* Rechtliche Seiten (Impressum, AGB, Widerruf, Elterninfo, Datenschutz) */
.legal-section, .xs-section-padding .legal-content { color: var(--hdc-text-2); }
.legal-section h3, .legal-section h4 { color: var(--hdc-text) !important; }
html[data-theme] .legal-notice-page .legal-card,
html[data-theme] .parentinformation-page .parentinformation-card,
html[data-theme] .terms-of-service-page .terms-card,
html[data-theme] .withdrawal-page .withdrawal-card,
html[data-theme] .hdc-legal-card {
  background: var(--hdc-surface) !important;
  border: 1px solid var(--hdc-border) !important;
  border-radius: var(--hdc-radius-xl) !important;
  box-shadow: var(--hdc-shadow) !important;
}
html[data-theme] .legal-notice-page .legal-intro,
html[data-theme] .parentinformation-page .parentinformation-intro,
html[data-theme] .terms-of-service-page .terms-intro,
html[data-theme] .withdrawal-page .withdrawal-intro { background: var(--hdc-grad-soft) !important; }
html[data-theme] .legal-notice-page .legal-disclaimer,
html[data-theme] .parentinformation-page .info-box,
html[data-theme] .terms-of-service-page .info-box,
html[data-theme] .withdrawal-page .withdrawal-form-box { background: var(--hdc-surface-2) !important; border-color: var(--hdc-border) !important; }
html[data-theme] .legal-notice-page [class*="legal-"],
html[data-theme] .parentinformation-page [class*="parentinformation-"],
html[data-theme] .terms-of-service-page [class*="terms-"],
html[data-theme] .withdrawal-page [class*="withdrawal-"] { border-color: var(--hdc-border) !important; }
html[data-theme] .hdc-legal-card { padding: clamp(1.25rem, 4vw, 2.5rem); color: var(--hdc-text-2); overflow-wrap: anywhere; }
html[data-theme] .hdc-legal-card strong { color: var(--hdc-text); }
html[data-theme] .hdc-legal-card p { line-height: 1.75; }

/* ============================================================
   8. Auth (Login, Registrierung, Passwort vergessen)
   ============================================================ */
.hdc-auth-card,
.xs-form-group.form-style-2 {
  background: var(--hdc-surface) !important;
  border: 1px solid var(--hdc-border) !important;
  border-radius: var(--hdc-radius-xl) !important;
  box-shadow: var(--hdc-shadow-lg) !important;
  padding: clamp(1.4rem, 4vw, 2.5rem) !important;
}
.hdc-auth-card .form-control,
.xs-form-group.form-style-2 .form-control { min-height: 3rem; margin-bottom: .9rem; }
.hdc-auth-card .xs-btn-wraper .btn,
.xs-form-group.form-style-2 .xs-btn-wraper .btn { width: 100%; min-height: 3rem; }
.hdc-auth-card .form-info,
.xs-form .form-info { margin-top: 1.1rem; text-align: center; color: var(--hdc-text-2) !important; }
.hdc-auth-card .form-info a { font-weight: 600; }
.forgot-password-wraper a { color: var(--hdc-primary) !important; font-weight: 600; font-size: .875rem; }
.custom-control-label { color: var(--hdc-text-2) !important; }
.hdc-auth-lead { color: var(--hdc-text-2) !important; text-align: center; margin: -.25rem 0 1.4rem; }
.hdc-auth-icon {
  width: 3.25rem; height: 3.25rem; margin: 0 auto 1rem; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
  background: var(--hdc-grad-primary); color: #fff; box-shadow: 0 10px 26px var(--hdc-primary-glow);
}
.hdc-auth-label { display: block; font-size: .8rem !important; font-weight: 600 !important; color: var(--hdc-text-2) !important; margin-bottom: .35rem !important; }
.hdc-pass-rules { list-style: none; padding: .9rem 1rem; margin: 0 0 1rem; border-radius: var(--hdc-radius); background: var(--hdc-surface-2); border: 1px solid var(--hdc-border); }
.hdc-pass-rules p { margin: 0 0 .25rem !important; font-size: .8rem !important; color: var(--hdc-text-2) !important; }
.hdc-pass-rules p:last-child { margin-bottom: 0 !important; }
.hdc-pass-rules p.valid { color: var(--hdc-success) !important; }
.hdc-pass-rules p.invalid { color: var(--hdc-text-3) !important; }
@media (max-width: 575px) {
  #register-form .form-control { margin-bottom: .75rem; }
}

/* ============================================================
   9. Footer (resources/additional/footer_landing.php)
   ============================================================ */
.xs-footer-section,
.xs-footer-section .footer-group { background: var(--hdc-footer-bg) !important; background-image: none !important; }
.xs-footer-section .footer-group { border-top: 1px solid rgba(255, 255, 255, .06); }
.xs-footer-section .footer-main { padding-top: clamp(2.5rem, 6vw, 4.5rem) !important; padding-bottom: 2rem !important; }
.xs-footer-section .footer-bottom-bar { padding-top: 1.25rem; padding-bottom: 1.25rem; }
@media (max-width: 767px) {
  .xs-footer-section .footer-widget { margin-bottom: 1.75rem; }
  .xs-footer-section .footer-bottom-bar,
  .xs-footer-section .text-md-right { text-align: center !important; }
}

/* ============================================================
   10. Kundenseiten mit header_landing (…_ownlayout)
   Seiten-Styles nutzen --card/--t1/--bg; Hero-Bereiche bleiben im Brand-Verlauf.
   ============================================================ */
html[data-theme="dark"] .pf-page,
html[data-theme="dark"] .tx-page { background: transparent !important; }
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { color-scheme: dark; }

/* ============================================================
   11. Legacy-Layout (resources/additional/head.php + header.php, Velzon)
   Velzon-Variablen auf die Tokens mappen.
   ============================================================ */
html.hdc-legacy[data-theme] {
  --vz-body-bg: var(--hdc-bg);
  --vz-body-color: var(--hdc-text);
  --vz-secondary-bg: var(--hdc-surface);
  --vz-tertiary-bg: var(--hdc-surface-2);
  --vz-card-bg: var(--hdc-surface);
  --vz-card-bg-custom: var(--hdc-surface);
  --vz-border-color: var(--hdc-border);
  --vz-border-color-translucent: var(--hdc-border);
  --vz-heading-color: var(--hdc-text);
  --vz-emphasis-color: var(--hdc-text);
  --vz-secondary-color: var(--hdc-text-2);
  --vz-body-secondary-color: var(--hdc-text-2);
  --vz-light: var(--hdc-surface-2);
  --vz-light-rgb: 26, 24, 54;
  --vz-input-bg: var(--hdc-input-bg);
  --vz-input-border-custom: var(--hdc-input-border);
  --vz-header-bg: var(--hdc-header-bg);
  --vz-header-item-color: var(--hdc-header-text);
  --vz-topnav-bg: var(--hdc-surface);
  --vz-topnav-item-color: var(--hdc-text-2);
  --vz-topnav-item-active-color: var(--hdc-primary);
  --vz-footer-bg: var(--hdc-bg);
  --vz-footer-color: var(--hdc-text-3);
  --vz-primary: var(--hdc-primary);
  --vz-link-color: var(--hdc-primary);
  --vz-link-hover-color: var(--hdc-accent);
  --vz-dropdown-bg: var(--hdc-surface);
  --vz-dropdown-link-color: var(--hdc-text-2);
}
html.hdc-legacy[data-theme="light"] { --vz-light-rgb: 246, 247, 252; }
html.hdc-legacy .page-content { background: transparent; }
html.hdc-legacy #page-topbar { background: var(--hdc-header-bg) !important; border-bottom: 1px solid var(--hdc-border); backdrop-filter: blur(16px); }
html.hdc-legacy .app-menu,
html.hdc-legacy .navbar-menu { background: var(--hdc-surface) !important; border-color: var(--hdc-border) !important; }
html.hdc-legacy .card { box-shadow: var(--hdc-shadow-sm); }
html.hdc-legacy .footer { background: transparent !important; color: var(--hdc-text-3) !important; border-top: 1px solid var(--hdc-border); }
html.hdc-legacy .text-muted { color: var(--hdc-text-3) !important; }
html.hdc-legacy .bg-light { background-color: var(--hdc-surface-2) !important; }
html.hdc-legacy .hdc-theme-fab {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1050;
  box-shadow: var(--hdc-shadow-lg);
}

/* ============================================================
   12. Unterseiten – Template-Korrekturen (Über uns, Kontakt, Bestellseiten …)
   ============================================================ */
/* Titel-Links in Karten (z. B. Kontakt „Finde uns“) waren dunkel auf dunkel */
.xs-title a,
.xs-title a:visited { color: var(--hdc-text) !important; text-decoration: none !important; }
.xs-title a:hover { color: var(--hdc-primary) !important; }
.contact-info-group .xs-title,
.single-contact-info .xs-title { color: var(--hdc-text) !important; }

/* Banner-Hintergrundbild (verwaschener Schriftzug) dezenter und sauber beschnitten */
.xs-banner.banner-v7.inner-banner .welcome-bg { opacity: .1 !important; max-width: 46%; max-height: 100%; overflow: hidden; }
.xs-banner.banner-v7.inner-banner .welcome-bg img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
@media (max-width: 767px) { .xs-banner.banner-v7.inner-banner .welcome-bg { display: none; } }

/* Team-Karten: einheitliches Bildformat + lesbare Namen auf hellen Fotos */
.xs-single-team { border-radius: var(--hdc-radius-xl) !important; overflow: hidden !important; margin-bottom: 1.5rem; padding: 0 !important; }
.xs-single-team > img { display: block; width: 100% !important; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; filter: none !important; }
.xs-single-team::before { background: linear-gradient(0deg, rgba(8, 6, 26, .95) 0%, rgba(8, 6, 26, .55) 30%, rgba(8, 6, 26, 0) 60%) !important; opacity: 1 !important; z-index: 0; }
.xs-single-team:hover::before { background: rgba(13, 10, 38, .88) !important; }
.xs-single-team > .team-bio { padding: 1.25rem 1.35rem !important; }
.xs-single-team .team-bio h4 { color: #fff !important; font-size: 1.1rem !important; font-weight: 700 !important; margin-bottom: .2rem !important; }
.xs-single-team .team-bio p,
.xs-single-team .team-description p { color: rgba(255, 255, 255, .82) !important; font-style: normal !important; font-size: .85rem !important; }
.xs-single-team .team-hover-content { padding: 2rem 1.5rem !important; display: flex; flex-direction: column; justify-content: flex-end; }
.xs-single-team .simple-social-list li a { color: #fff !important; }
.xs-single-team .simple-social-list li a:hover { color: var(--hdc-brand-3) !important; }

/* Büro-/Karriere-Collage: gleichmäßiges Raster statt verschobener Kacheln */
.office-interface-group-content,
.office-interface-group-content.content-1,
.office-interface-group-content.content-2 {
  margin: 0 0 1.5rem !important; height: 340px; border-radius: var(--hdc-radius-xl); overflow: hidden;
  box-shadow: var(--hdc-shadow) !important; position: relative; top: auto !important;
}
.office-interface-group-content > img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: center 20%; display: block; }
.join-with-us-wraper {
  min-height: 0 !important; height: 340px; margin: 0 0 1.5rem !important; padding: 2rem !important;
  justify-content: center; border-radius: var(--hdc-radius-xl);
  background: var(--hdc-grad) !important; box-shadow: 0 18px 40px rgba(83, 51, 237, .3) !important;
}
.join-with-us-wraper .join-with-us-content h2 { color: #fff !important; font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important; margin-bottom: 1.4rem !important; }
@media (max-width: 767px) {
  .office-interface-group-content, .join-with-us-wraper { height: 260px; }
}

/* Video-Vorschau (Über uns) */
.intro-video { border-radius: var(--hdc-radius-xl) !important; overflow: hidden; box-shadow: var(--hdc-shadow-lg); }
.intro-video img { width: 100%; display: block; }

/* Partner-Logos (Owl-Carousel auf Unterseiten) */
.single-client { display: flex !important; align-items: center; justify-content: center; height: 90px; padding: 1rem 1.25rem; border-radius: var(--hdc-radius-lg); background: var(--hdc-surface); border: 1px solid var(--hdc-border); }
.single-client img { width: auto !important; max-width: 100%; max-height: 40px; object-fit: contain; }

/* Vorteile-Kacheln (Über uns) */
.why-choose-us-block { padding: 2rem 1.5rem !important; text-align: center; }
.why-choose-us-block .choose-us-img img { width: 72px !important; height: 72px; object-fit: contain; margin: 0 auto; }

/* Kontakt-Icons */
.contact-info-icon img { width: 104px; height: 104px; object-fit: contain; margin: 0 auto; }

/* Allgemein: Bilder in Inhaltsbereichen nie verzerren */
.xs-section-padding img:not([width]):not(.brand-logo-img) { height: auto; }
@media (min-width: 992px) {
  .row > .offset-lg-2:has(> .office-interface-group-content) { margin-left: 0 !important; flex: 0 0 50% !important; max-width: 50% !important; }
}

/* Webspace-Vergleichstabelle (Template .pricing-matrix) */
.pricing-matrix { background: var(--hdc-surface) !important; border: 1px solid var(--hdc-border); border-radius: var(--hdc-radius-xl); overflow: hidden; box-shadow: var(--hdc-shadow) !important; }
.pricing-matrix .pricing-matrix-item,
.pricing-matrix .pricing-feature-group,
.pricing-matrix .pricing-image { background: var(--hdc-surface) !important; }
.pricing-matrix .pricing-image { background: var(--hdc-grad-soft) !important; display: flex; align-items: center; justify-content: center; }
.pricing-matrix .pricing-image img { max-height: 190px; width: auto; object-fit: contain; }
.pricing-matrix .pricing-feature-item { background: transparent !important; }
.pricing-matrix .pricing-feature-item:nth-child(even) { background: var(--hdc-surface-2) !important; }
.pricing-matrix > .row [class^=col-] .pricing-feature-item,
.pricing-matrix > .row [class^=col-] .pricing-feature-group,
.pricing-matrix > .row [class^=col-] .pricing-image { border-color: var(--hdc-border) !important; }
.pricing-matrix .pricing-feature,
.pricing-matrix .pricing-feature-item { color: var(--hdc-text-2) !important; }
.pricing-matrix > .row [class^=col-]:first-child .pricing-feature { color: var(--hdc-text) !important; font-weight: 600; }
.pricing-matrix .pricing-feature > i { color: var(--hdc-success) !important; }
.pricing-feature-group::before,
.pricing-feature-group::after { background: none !important; }
.pricing-matrix .pricing-feature { background: transparent !important; }
.pricing-matrix .pricing-matrix-item,
.pricing-matrix .pricing-feature-item,
.pricing-matrix .pricing-feature,
.pricing-matrix .owl-item { border-color: var(--hdc-border) !important; }
.pricing-matrix .gap { background: var(--hdc-surface-2) !important; border-color: var(--hdc-border) !important; }
@media (min-width: 992px) {
  /* Bildzelle und Paketköpfe gleich hoch, sonst sind Beschriftungen und Werte um eine Zeile versetzt */
  .pricing-matrix .pricing-image,
  .pricing-matrix .pricing-feature-group { height: 360px !important; min-height: 0 !important; box-sizing: border-box; }
  .pricing-matrix .pricing-feature-group { display: flex; flex-direction: column; justify-content: center; }
}

/* Feature-Kästen (Domain-Bestellseite u. a.): Überlappung des Templates auflösen, Brand-Verlauf statt Template-Blau */
.xs-feature-section { background: transparent !important; padding: 1rem 0 0; }
.xs-feature-section + .included-feature-list { margin-top: 0 !important; }
.xs-feature-group {
  background: var(--hdc-grad) !important; border-radius: var(--hdc-radius-xl) !important;
  box-shadow: 0 18px 40px rgba(83, 51, 237, .28) !important; margin-bottom: 1.5rem;
}
.xs-feature-group .xs-title, .xs-feature-group p { color: #fff !important; }
.xs-feature-group p { opacity: .85; }
.xs-feature-group .feature-img img { max-width: 120px; height: auto; object-fit: contain; }