/* ===========================================================================
   mam-jahn.de - WHMCS Client-Area Theme
   ERZEUGTE DATEI - nicht direkt bearbeiten.
   Quelle: build/partials/*.css - danach 'bash build.sh' ausfuehren.
   =========================================================================== */

/* ---- Quelle: 00-tokens.css ---------------------------------------- */
/* ============================================================================
   mam-jahn.de - WHMCS Theme
   00 - Design-Tokens, Schrift, Basis
   ----------------------------------------------------------------------------
   ACHTUNG: Diese Datei ersetzt die custom.css des Eltern-Themes "nexus"
   vollständig (WHMCS lädt nur EINE custom.css und löst sie Child-zuerst auf).
   Deshalb müssen hier ALLE Variablen definiert sein, die nexus/theme.min.css
   erwartet - sonst fallen dort Farben auf "unset" zurück.
   ========================================================================== */

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- Marke ---------------------------------------------------------- */
    --mj-brand:        #3b82f6;
    --mj-brand-light:  #60a5fa;
    --mj-brand-dark:   #1d4ed8;
    --mj-brand-a10:    rgba(59, 130, 246, .10);
    --mj-brand-a15:    rgba(59, 130, 246, .15);
    --mj-brand-a20:    rgba(59, 130, 246, .20);
    --mj-brand-a25:    rgba(59, 130, 246, .25);
    --mj-brand-a40:    rgba(59, 130, 246, .40);
    --mj-brand-a60:    rgba(59, 130, 246, .60);

    /* ---- Flächen ------------------------------------------------------- */
    --mj-black:        #000000;
    --mj-surface:      #09090b;
    --mj-surface-2:    #0f0f12;
    --mj-surface-3:    #18181b;
    --mj-line:         #27272a;
    --mj-line-soft:    #1f1f23;
    --mj-line-strong:  #3f3f46;

    /* ---- Text ----------------------------------------------------------- */
    --mj-text:         #fafafa;
    --mj-text-2:       #d4d4d8;
    --mj-muted:        #a1a1aa;
    /* Bewusst heller als zinc-500 (#71717a): das ergab auf --mj-surface nur
       4,1:1 und lag damit unter der Schwelle von 4,5:1 für Fließtext.
       #8b8b96 kommt auf rund 5,9:1 und bleibt trotzdem klar zurückgenommen. */
    --mj-muted-2:      #8b8b96;
    --mj-on-brand:     #09090b;

    /* ---- Akzente je Produktbereich -------------------------------------- */
    --mj-acc-games:    #22c55e;
    --mj-acc-vserver:  #22c55e;
    --mj-acc-vds:      #f97316;
    --mj-acc-web:      #8b5cf6;
    --mj-acc-net:      #0ea5e9;
    --mj-acc-dedi:     #f59e0b;

    /* ---- Status --------------------------------------------------------- */
    --mj-ok:           #22c55e;
    --mj-warn:         #f59e0b;
    --mj-err:          #ef4444;
    --mj-info:         #3b82f6;

    /* ---- Form ----------------------------------------------------------- */
    --mj-r-sm:         8px;
    --mj-r-md:         14px;
    --mj-r-lg:         20px;
    --mj-r-xl:         24px;
    --mj-r-pill:       9999px;
    --mj-glow:         0 8px 30px rgba(59, 130, 246, .25);
    --mj-shadow:       0 10px 40px rgba(0, 0, 0, .6);
    --mj-font:         'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* =====================================================================
       Rückwärts-Zuordnung auf die Variablen des Eltern-Themes "nexus".
       Damit wird der große, nicht überschriebene Teil von theme.min.css
       automatisch dunkel - ohne jede Regel einzeln nachzubauen.
       ===================================================================== */

    --white: #ffffff;

    /* Neutralskala umgedreht: nexus benutzt "50" als hellste Fläche und
       "900" als dunkelste Schriftfarbe. Im Dunkelmodus tauschen die Rollen. */
    --neutral-50:  #0c0c0e;
    --neutral-100: #000000;
    --neutral-200: #1f1f23;
    --neutral-300: #27272a;
    --neutral-400: #3f3f46;
    --neutral-500: #71717a;
    --neutral-600: #a1a1aa;
    --neutral-700: #d4d4d8;
    --neutral-800: #e4e4e7;
    --neutral-900: #fafafa;
    --neutral-950: #ffffff;

    --primary-50:  var(--mj-brand-a10);
    --primary-100: var(--mj-brand-a15);
    --primary-200: var(--mj-brand-a20);
    --primary-300: var(--mj-brand-a25);
    --primary-400: var(--mj-brand-a40);
    --primary-500: var(--mj-brand);
    --primary-600: var(--mj-brand);
    --primary-700: var(--mj-brand-light);
    --primary-800: var(--mj-brand-light);
    --primary-900: var(--mj-brand-dark);
    --primary-950: var(--mj-brand-dark);

    --primary:           var(--mj-brand);
    --primary-lifted:    var(--mj-brand-light);
    --primary-accented:  var(--mj-brand-dark);

    --secondary:           var(--mj-muted);
    --secondary-lifted:    var(--mj-text-2);
    --secondary-accented:  var(--mj-text);

    --success:           var(--mj-ok);
    --success-lifted:    #16a34a;
    --success-accented:  #15803d;

    --info:           var(--mj-brand);
    --info-lifted:    var(--mj-brand-light);
    --info-accented:  var(--mj-brand-dark);

    --notice:           #8b5cf6;
    --notice-lifted:    #a78bfa;
    --notice-accented:  #7c3aed;

    --warning:           var(--mj-warn);
    --warning-lifted:    #fbbf24;
    --warning-accented:  #d97706;

    --error:           var(--mj-err);
    --error-lifted:    #f87171;
    --error-accented:  #dc2626;

    --grayscale:           var(--mj-line);
    --grayscale-lifted:    var(--mj-surface-3);
    --grayscale-accented:  var(--mj-surface-2);

    --neutral:           var(--mj-muted);
    --neutral-lifted:    var(--mj-muted-2);
    --neutral-accented:  var(--mj-line-strong);

    --text-inverted:  var(--mj-on-brand);
    --text-muted:     var(--mj-muted-2);
    --text-lifted:    var(--mj-muted);
    --text-accented:  var(--mj-text-2);
    --text:           var(--mj-text);

    --border-muted:     var(--mj-line-soft);
    --border:           var(--mj-line);
    --border-lifted:    var(--mj-line-strong);
    --border-accented:  #52525b;

    --bg:           var(--mj-surface);
    --bg-muted:     var(--mj-surface-2);
    --bg-lifted:    var(--mj-black);
    --bg-accented:  var(--mj-surface-2);
    --bg-inverted:  var(--mj-black);

    --yellow-200:   #fde047;
    --yellow-300:   #facc15;
    --teal-300:     #5eead4;
    --teal-400:     #2dd4bf;
    --emerald-300:  #6ee7b7;
    --pink-400:     #f472b6;

    --text-xs: .6875rem;
    --text-sm: .78125rem;
    --text-md: .875rem;
    --text-lg: 1rem;

    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    --rounding-sm: var(--mj-r-sm);
    --rounding-md: var(--mj-r-md);
    --rounding-lg: var(--mj-r-lg);

    --letter-spacing: 0em;
    --disabled-opacity: 35%;
}

/* ============================================================================
   Basis
   ========================================================================== */

html,
body {
    background-color: var(--mj-black);
    color: var(--mj-text);
    font-family: var(--mj-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-size: 15px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--mj-text);
    font-family: var(--mj-font);
    font-weight: 800;
    letter-spacing: -.02em;
}

h1, .h1 { font-weight: 900; }

p { color: var(--mj-text-2); }

small,
.small,
.text-muted {
    color: var(--mj-muted-2);
}

hr { border-top-color: var(--mj-line-soft); }

a {
    color: var(--mj-brand);
    transition: color .2s ease;
}

a:hover,
a:focus {
    color: var(--mj-brand-light);
    text-decoration: none;
}

code, pre, kbd, samp {
    font-family: var(--mj-font);
    background-color: var(--mj-surface-3);
    color: var(--mj-brand-light);
    border-radius: var(--mj-r-sm);
}

pre {
    padding: 1rem;
    border: 1px solid var(--mj-line-soft);
}

/* Fokus bleibt sichtbar - Tastaturbedienung nicht kaputtmachen. */
:focus-visible {
    outline: 2px solid var(--mj-brand);
    outline-offset: 2px;
}

::selection {
    background-color: var(--mj-brand-a40);
    color: #bfdbfe;
}

/* Scrollbar wie auf der Hauptseite */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--mj-brand) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
    background: var(--mj-brand);
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover { background: var(--mj-brand-light); }

@keyframes mj-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

@keyframes mj-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Wiederverwendbarer Glow-Blob als Hintergrunddeko. */
.mj-glow-blob {
    position: absolute;
    border-radius: var(--mj-r-pill);
    filter: blur(120px);
    background: var(--mj-brand-a10);
    pointer-events: none;
    z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        /* Nutzerwunsch schlägt Design - deshalb hier bewusst !important */
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* ---- Quelle: 10-layout.css ---------------------------------------- */
/* ============================================================================
   10 - Seitengerüst: Kopfbereich, Navigation, Brotkrumen, Fußbereich
   ----------------------------------------------------------------------------
   Das Eltern-Theme nexus setzt in sass/_layout.scss an mehreren Stellen harte
   helle Werte (header.header{background:#fff}, .navbar a{color:#444},
   .toolbar .nav-link{border:1px solid #e5e5e5}). Die werden hier gezielt ersetzt.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Kopfbereich
   ------------------------------------------------------------------------ */

header.header,
header#header.header {
    position: relative;
    z-index: 1030;
    background-color: rgba(9, 9, 11, .92);
    border-bottom: 1px solid var(--mj-line-soft);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: background-color .3s ease, box-shadow .3s ease;
}

/* Zustand nach dem Scrollen - wird von js/mj-theme.js gesetzt. */
header.header.mj-nav--scrolled {
    background-color: rgba(9, 9, 11, .98);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .55);
}

header.header .navbar {
    min-height: 68px;
    padding: 0;
}

header.header .navbar a {
    color: var(--mj-muted);
}

header.header .navbar a:hover {
    color: var(--mj-text);
}

header.header .btn {
    font-size: 14px;
}

header.header .btn:focus,
header.header .btn.focus {
    box-shadow: none;
}

/* ---- obere Leiste (nur für angemeldete Kunden) ------------------------- */

header.header .topbar,
header.header .mj-topbar {
    margin: 0;
    padding: 4px 0;
    background-color: var(--mj-black);
    border-bottom: 1px solid var(--mj-line-soft);
    color: var(--mj-muted);
    font-size: 13px;
}

header.header .topbar .btn {
    line-height: 1;
    background-color: transparent;
    border: 0;
    color: var(--mj-muted);
}

header.header .topbar .btn:hover {
    color: var(--mj-text);
}

header.header .topbar .active-client {
    line-height: 1;
}

header.header .topbar .active-client .input-group-text {
    padding: .25rem;
    font-size: 12px;
    color: var(--mj-muted-2);
    background-color: transparent;
    border: 0;
}

header.header .topbar .active-client .btn {
    color: var(--mj-muted);
    background-color: transparent;
    border: 0;
}

header.header .topbar .active-client .btn.btn-active-client span {
    border-bottom: 1px dashed var(--mj-line-strong);
}

header.header .topbar .active-client .btn.btn-active-client:hover span {
    border-bottom-color: var(--mj-brand);
}

/* Benachrichtigungsliste im Popover */
.client-alerts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.client-alerts li {
    border-bottom: 1px solid var(--mj-line-soft);
}

.client-alerts li:last-child {
    border-bottom: 0;
}

.client-alerts li a {
    display: block;
    padding: 10px 12px;
    color: var(--mj-text-2);
}

.client-alerts li a:hover {
    background-color: var(--mj-surface-3);
    color: var(--mj-text);
}

.client-alerts li.none {
    padding: 10px 12px;
    color: var(--mj-muted-2);
}

.client-alerts .message {
    display: inline-block;
    margin-left: 6px;
}

/* ---- Markenzeichen ------------------------------------------------------ */

header.header .navbar-brand,
header.header .mj-brandmark {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    margin: 0;
    line-height: 1;
}

header.header .logo-img {
    max-width: 260px;
    max-height: 44px;
    width: auto;
    height: auto;
}

.mj-brandmark-sub {
    margin-top: 2px;
    color: var(--mj-muted-2);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
}

/* ---- Werkzeugleiste rechts ---------------------------------------------- */

header.header .toolbar {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 0;
}

header.header .toolbar .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: .5rem .85rem;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    background-color: transparent;
    color: var(--mj-muted);
    font-size: 13px;
    font-weight: 600;
    overflow: visible;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

header.header .toolbar .nav-link:hover {
    border-color: var(--mj-brand-a60);
    background-color: var(--mj-brand-a10);
    color: var(--mj-text);
}

header.header .toolbar .nav-link .badge {
    position: absolute;
    top: -7px;
    right: -7px;
    padding: 3px 6px;
    min-width: 19px;
    background-color: var(--mj-brand);
    color: var(--mj-on-brand);
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--mj-r-pill);
}

.mj-btn-site {
    color: var(--mj-brand) !important;  /* schlägt .navbar a{color} des Elternteils */
}

.mj-btn-site:hover {
    color: var(--mj-brand-light) !important;
}

/* ---- Suchfeld im Kopfbereich -------------------------------------------- */

header.header .search {
    width: 300px;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    background-color: var(--mj-surface-3);
    overflow: hidden;
}

header.header .search .btn,
header.header .search .form-control {
    border: 0;
    background-color: transparent;
    box-shadow: none;
}

header.header .search .btn {
    color: var(--mj-muted-2);
}

header.header .search .form-control {
    color: var(--mj-text);
}

header.header .search .form-control::placeholder {
    color: var(--mj-muted-2);
}

header.header .search:focus-within {
    border-color: var(--mj-brand-a60);
}

header.header .search .input-group-prepend .btn {
    background-color: transparent;
}

/* ---- Hauptnavigation ---------------------------------------------------- */

header.header .main-navbar-wrapper {
    padding: 0;
    border-top: 1px solid var(--mj-line-soft);
}

header.header #nav {
    gap: 28px;
}

header.header .navbar-nav {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    margin-bottom: 6px;
}

header.header .navbar-nav > li > a {
    position: relative;
    display: inline-block;
    padding: 10px 2px;
    color: var(--mj-muted);
    font-size: 15px;
    font-weight: 600;
    transition: color .2s ease;
}

header.header .navbar-nav > li > a:hover {
    color: var(--mj-text);
}

/* Aktiver Punkt bekommt den Markenstrich wie auf der Hauptseite. */
header.header .navbar-nav > li.active > a,
header.header .navbar-nav > li > a.active {
    color: var(--mj-brand);
}

header.header .navbar-nav > li.active > a::after,
header.header .navbar-nav > li > a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    border-radius: var(--mj-r-pill);
    background-color: var(--mj-brand);
}

/* Aufklappmenüs der Navigation */
header.header .navbar .dropdown-menu {
    margin-top: 6px;
    padding: 6px;
    min-width: 210px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-md);
    box-shadow: var(--mj-shadow);
}

header.header .navbar .dropdown-menu > li,
header.header .navbar .dropdown-item {
    padding: 0;
    background-color: transparent;
}

header.header .navbar .dropdown-menu a.dropdown-item {
    display: block;
    padding: 9px 12px !important;  /* Elternteil setzt px-2 py-0 als Utility */
    border-radius: var(--mj-r-sm);
    color: var(--mj-muted);
    font-size: 14px;
    font-weight: 500;
}

header.header .navbar .dropdown-menu a.dropdown-item:hover,
header.header .navbar .dropdown-menu a.dropdown-item:focus {
    background-color: var(--mj-surface-3);
    color: var(--mj-brand);
}

header.header .navbar .dropdown-divider {
    margin: 5px 0;
    border-top-color: var(--mj-line-soft);
}

/* Eingeklapptes Menü auf schmalen Schirmen */
@media (max-width: 1199.98px) {
    header.header .navbar-collapse {
        margin: 0 -15px;
        padding: 12px 15px 16px;
        background-color: var(--mj-black);
        border-top: 1px solid var(--mj-line-soft);
    }

    header.header .navbar-collapse .navbar-nav {
        gap: 0;
    }

    header.header .navbar-collapse .navbar-nav > li {
        border-bottom: 1px solid var(--mj-line-soft);
    }

    header.header .navbar-collapse .navbar-nav > li:last-child {
        border-bottom: 0;
    }

    header.header .navbar-collapse .navbar-nav > li > a {
        display: block;
        padding: 13px 2px;
    }

    header.header .navbar-collapse .search {
        width: 100%;
    }

    header.header #nav {
        gap: 0;
    }
}

/* ---------------------------------------------------------------------------
   Brotkrumen
   ------------------------------------------------------------------------ */

.master-breadcrumb {
    background-color: var(--mj-surface-2);
    border-bottom: 1px solid var(--mj-line-soft);
}

.master-breadcrumb .breadcrumb {
    margin: 0;
    padding: 11px 0;
    background-color: transparent;
    font-size: 13px;
}

.master-breadcrumb .breadcrumb a {
    color: var(--mj-muted);
}

.master-breadcrumb .breadcrumb a:hover {
    color: var(--mj-brand);
}

.master-breadcrumb .breadcrumb .breadcrumb-item.active {
    color: var(--mj-text-2);
}

.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--mj-line-strong);
}

/* ---------------------------------------------------------------------------
   Inhaltsbereich
   ------------------------------------------------------------------------ */

section#main-body {
    margin: 0;
    padding: 40px 0 64px;
    background-color: var(--mj-black);
    min-height: calc(100vh - 320px);
}

/* .primary-bg-color setzt das Elternteil auf --bg-lifted; hier nur absichern. */
.primary-bg-color {
    background-color: var(--mj-black);
}

/* ---------------------------------------------------------------------------
   Hinweisbänder
   ------------------------------------------------------------------------ */

.network-issue-alert {
    margin: 0;
    padding: 11px 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    font-size: 14px;
}

.verification-banner {
    padding: 12px 0;
    background-color: var(--mj-surface-2);
    border-bottom: 1px solid var(--mj-line-soft);
    color: var(--mj-text-2);
    font-size: 14px;
}

.verification-banner .text {
    margin-left: 8px;
}

.verification-banner .close {
    color: var(--mj-muted);
    opacity: 1;
    text-shadow: none;
}

.verification-banner .close:hover {
    color: var(--mj-text);
}

.verification-banner.email-verification i,
.verification-banner.user-validation i {
    color: var(--mj-warn);
}

/* ---------------------------------------------------------------------------
   Ladeschleier
   ------------------------------------------------------------------------ */

#fullpage-overlay {
    background-color: rgba(0, 0, 0, .88);
    color: var(--mj-text);
}

#fullpage-overlay .msg {
    display: inline-block;
    padding: 20px;
    max-width: 420px;
    color: var(--mj-text-2);
}

/* ---------------------------------------------------------------------------
   Fußbereich
   ------------------------------------------------------------------------ */

footer.footer {
    position: relative;
    margin: 0;
    padding: 0 0 24px;
    background-color: var(--mj-black);
    color: var(--mj-text-2);
    font-size: 14px;
}

/* Leuchtende Trennlinie oben - reine Deko. */
.mj-footer-accentline {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--mj-brand-a60), transparent);
    box-shadow: 0 0 20px var(--mj-brand-a40);
}

.mj-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px 28px;
    padding: 52px 0 40px;
}

@media (min-width: 576px) {
    .mj-footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .mj-footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }
}

.mj-footer-col { min-width: 0; }

/* Die Markenspalte braucht mehr Platz als die drei Linklisten: auf der
   zweispaltigen Stufe läuft sie deshalb über die volle Breite. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .mj-footer-brand { grid-column: 1 / -1; }
}

.mj-footer-logo {
    max-width: 230px;
    height: auto;
}

.mj-footer-logo-link {
    display: inline-block;
    margin-bottom: 16px;
}

.mj-footer-claim {
    max-width: 380px;
    margin-bottom: 18px;
    color: var(--mj-muted);
    font-size: 14px;
    line-height: 1.65;
}

.mj-footer-social {
    margin: 0;
    padding: 0;
}

.mj-footer-head {
    margin: 0 0 14px;
    color: var(--mj-brand);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.mj-footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mj-footer-links li {
    margin-bottom: 9px;
}

.mj-footer-links a {
    display: inline-block;
    color: var(--mj-muted-2);
    font-size: 14px;
    font-weight: 500;
    transition: color .2s ease, transform .2s ease;
}

.mj-footer-links a:hover {
    color: var(--mj-brand);
    transform: translateX(3px);
}

/* ---- untere Zeile ------------------------------------------------------- */

.mj-footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--mj-line);
    text-align: center;
}

@media (min-width: 768px) {
    .mj-footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.mj-footer-bottom-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

footer.footer .copyright {
    margin: 0;
    color: var(--mj-muted-2);
    font-size: 13px;
}

footer.footer .nav-link {
    color: var(--mj-muted);
}

footer.footer .nav-link:hover {
    color: var(--mj-brand);
}

footer.footer .btn {
    padding: .35rem 1rem;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    background-color: transparent;
    color: var(--mj-muted);
    font-size: 13px;
}

footer.footer .btn:hover {
    border-color: var(--mj-brand-a60);
    color: var(--mj-text);
    background-color: var(--mj-brand-a10);
}

footer.footer .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--mj-r-pill);
}

footer.footer .notices {
    margin: 20px 0 0;
    color: var(--mj-muted-2);
    font-size: 13px;
    text-align: center;
}

/* ---- Statuspille -------------------------------------------------------- */

.mj-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .35rem .9rem;
    border: 1px solid rgba(34, 197, 94, .45);
    border-radius: var(--mj-r-pill);
    background-color: rgba(34, 197, 94, .12);
    color: var(--mj-ok);
    font-size: 12px;
    font-weight: 700;
}

.mj-status-pill:hover {
    border-color: var(--mj-ok);
    color: var(--mj-ok);
    background-color: rgba(34, 197, 94, .2);
}

.mj-status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--mj-r-pill);
    background-color: var(--mj-ok);
    box-shadow: 0 0 8px var(--mj-ok);
    animation: mj-pulse 2s ease-in-out infinite;
}

/* ---------------------------------------------------------------------------
   Rückkehrknopf des Administrators
   ------------------------------------------------------------------------ */

.btn-return-to-admin {
    background-color: var(--mj-surface-3) !important;  /* Elternteil nutzt !important */
    color: var(--mj-text-2) !important;
    border: 1px solid var(--mj-line) !important;
}

.btn-return-to-admin:hover {
    background-color: var(--mj-line) !important;
    color: var(--mj-text) !important;
}


/* ---- Quelle: 12-navbar.css ---------------------------------------- */
/* ============================================================================
   12 - Kopfleiste nach dem Vorbild von mam-jahn.de
   ----------------------------------------------------------------------------
   Eine Zeile: Logo links, Seiten mittig, Sprache / Warenkorb / Konto rechts.
   Ueberschreibt die Regeln aus 10-layout.css fuer header.header.
   ========================================================================== */

header.header.mj-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid rgba(39, 39, 42, .5);
    background: rgba(9, 9, 11, .82);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transition: background-color .3s ease, box-shadow .3s ease;
}

header.header.mj-navbar.mj-nav--scrolled {
    background: rgba(9, 9, 11, .92);
    box-shadow: 0 20px 40px -30px rgba(0, 0, 0, .9);
}

.mj-navbar-inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}

header.header .mj-navbar-row {
    min-height: 74px;
    padding: 0;
    transition: min-height .3s ease;
}

header.header.mj-nav--scrolled .mj-navbar-row { min-height: 60px; }

/* Marke */
header.header .mj-brandmark {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    transition: transform .2s ease;
}

header.header .mj-brandmark:hover { transform: scale(1.04); }

header.header .mj-logo {
    height: 34px;
    width: auto;
    max-width: none;
    transition: height .3s ease;
}

header.header.mj-nav--scrolled .mj-logo { height: 30px; }

/* Seiten mittig */
header.header .mj-navbar-collapse {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
}

header.header .mj-navlinks {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
}

header.header .mj-navlinks > li { margin: 0; }

header.header .mj-navlinks > li > a.nav-link {
    display: inline-block;
    padding: .5rem .8rem;
    color: var(--mj-muted);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    border: 0;
    border-radius: var(--mj-r-pill);
    transition: color .15s ease, background-color .15s ease;
}

header.header .mj-navlinks > li > a.nav-link:hover {
    color: var(--mj-text);
    background: rgba(255, 255, 255, .04);
}

header.header .mj-navlinks > li > a.nav-link.is-active {
    position: relative;
    color: var(--mj-brand);
}

header.header .mj-navlinks > li > a.nav-link.is-active::after {
    content: "";
    position: absolute;
    left: .8rem;
    right: .8rem;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--mj-brand);
}

/* Rechts: Sprache, Warenkorb, Konto */
header.header .mj-navtools {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: 0 0 0 auto;
    padding: 0;
}

header.header .mj-navtools > li { margin: 0; }

header.header .mj-lang {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    background: rgba(24, 24, 27, .6);
}

header.header .mj-lang-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: var(--mj-r-pill);
    color: var(--mj-muted-2);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

header.header .mj-lang-item:hover { color: var(--mj-text); text-decoration: none; }
header.header .mj-lang-item.is-active { background: var(--mj-surface-3); color: var(--mj-text); }
header.header .mj-lang-item .iti-flag { transform: scale(.9); }

header.header .mj-cart-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--mj-line);
    border-radius: 50%;
    background: rgba(24, 24, 27, .6);
    color: var(--mj-text);   /* weiss, damit der Warenkorb auf dunklem Grund sichtbar ist */
    font-size: 15px;
}

header.header .mj-cart-btn:hover { border-color: var(--mj-brand-a60); background: var(--mj-brand-a10); color: var(--mj-text); }

header.header .mj-cart-btn .badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--mj-r-pill);
    background: var(--mj-brand);
    color: var(--mj-on-brand);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 18px;
}

header.header .mj-login-btn {
    margin-left: 4px;
    padding: .5rem 1.15rem;
    border-radius: var(--mj-r-pill);
    font-size: 13.5px;
    font-weight: 700;
}

/* Konto-Menue (WHMCS secondary navbar) als Pille */
header.header .mj-navtools > li.dropdown > a.nav-link,
header.header .mj-navtools > li.dropdown > a.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .45rem 1rem;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    background: rgba(24, 24, 27, .6);
    color: var(--mj-text);
    font-size: 13.5px;
    font-weight: 600;
}

header.header .mj-navtools .dropdown-menu { right: 0; left: auto; margin-top: 8px; }

/* Angemeldet: zweite, schmale Zeile mit den WHMCS-Bereichen */
header.header .mj-subnav {
    min-height: 44px;
    padding: 0;
    border-top: 1px solid rgba(39, 39, 42, .5);
    background: rgba(15, 15, 18, .6);
}

header.header .mj-subnav-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    padding: 0;
}

header.header .mj-subnav-list > li > a {
    display: inline-block;
    padding: .55rem .8rem;
    color: var(--mj-muted);
    font-size: 13px;
    font-weight: 600;
    border: 0;
}

header.header .mj-subnav-list > li > a:hover,
header.header .mj-subnav-list > li.active > a { color: var(--mj-text); }

/* Topbar (angemeldet) an die Breite anpassen */
header.header .mj-topbar .mj-navbar-inner { min-height: 40px; }

/* Burger */
header.header .mj-burger {
    display: none;
    margin-left: auto;
    padding: 8px 10px;
    border: 1px solid var(--mj-line);
    border-radius: 12px;
    color: var(--mj-text);
    font-size: 16px;
    background: transparent;
}

@media (max-width: 991.98px) {
    header.header .mj-burger { display: inline-block; }
    header.header .mj-navbar-collapse { display: none; flex: 0 0 100%; flex-direction: column; align-items: stretch; padding: 12px 0 16px; }
    header.header .mj-navbar-collapse.show { display: flex; }
    header.header .mj-navbar-inner { flex-wrap: wrap; }
    header.header .mj-navlinks { flex-direction: column; align-items: stretch; gap: 2px; }
    header.header .mj-navlinks > li > a.nav-link { display: block; padding: .7rem .9rem; }
    header.header .mj-navlinks > li > a.nav-link.is-active::after { display: none; }
    header.header .mj-navtools { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--mj-line-soft); }
}

/* nexus: .navbar-light .navbar-nav .nav-link { color: rgba(0,0,0,.5) } ist
   spezifischer als header.header .mj-cart-btn - deshalb hier nachgezogen,
   sonst bleiben Warenkorb und Glocke dunkelgrau. */
header.header .navbar-light .navbar-nav .nav-link.mj-cart-btn,
header.header .navbar-light .navbar-nav button.nav-link.mj-cart-btn,
header.header .mj-navtools .mj-cart-btn i { color: var(--mj-text) !important; }
header.header .navbar-light .navbar-nav .nav-link.mj-cart-btn:hover,
header.header .navbar-light .navbar-nav .nav-link.mj-cart-btn:focus { color: var(--mj-text) !important; border-color: var(--mj-brand-a60); background: var(--mj-brand-a10); }


/* ---- Quelle: 13-navbar-client.css ---------------------------------------- */
/* ============================================================================
   13 - Kopfleiste, angemeldet: Kundenbereich als Menue neben Hardware,
   Glocke und Admin-Rueckweg rechts. Kein zweiter Balken, keine Topbar.
   ========================================================================== */

header.header .mj-clientmenu-panel {
    min-width: 780px;
    padding: 20px 22px 18px;
    border: 1px solid var(--mj-line);
    border-radius: 18px;
    background: var(--mj-surface-2);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}

header.header .mj-clientmenu-panel.show {
    display: grid;
    grid-template-columns: repeat(3, minmax(210px, 1fr));
    gap: 10px 28px;
}

header.header .mj-clientmenu-col { min-width: 0; }

header.header .mj-clientmenu-panel .dropdown-header {
    padding: 4px 12px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--mj-line-soft);
    color: var(--mj-brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

header.header .mj-clientmenu-panel a.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--mj-text-2);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
header.header .mj-clientmenu-panel a.dropdown-item::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--mj-line-strong); transition: background .15s ease; }
header.header .mj-clientmenu-panel a.dropdown-item:hover::before { background: var(--mj-brand); }
header.header .mj-clientmenu-panel .dropdown-divider { margin: 8px 12px; border-color: var(--mj-line-soft); }

header.header .mj-clientmenu-panel a.dropdown-item:hover { background: var(--mj-surface-3); color: var(--mj-text); }
header.header .mj-clientmenu-col--solo { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--mj-line-soft); }
header.header .mj-clientmenu-panel a.mj-clientmenu-solo { margin: 0; padding: 8px 14px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-pill); background: var(--mj-surface-3); color: var(--mj-text); font-weight: 700; }
header.header .mj-clientmenu-panel a.mj-clientmenu-solo::before { display: none; }
header.header .mj-clientmenu-panel a.mj-clientmenu-solo i { color: var(--mj-brand); }
header.header .mj-clientmenu-panel a.mj-clientmenu-solo:hover { border-color: var(--mj-brand-a60); }

header.header .mj-bell { position: relative; }
header.header .mj-admin-return { color: #f87171; border-color: rgba(239, 68, 68, .4); }
header.header .mj-admin-return:hover { color: #fca5a5; }

/* Konto-Pille: langen Namen kuerzen */
header.header .mj-navtools > li.dropdown > a.nav-link,
header.header .mj-navtools > li.dropdown > a.dropdown-toggle {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Menues der Kopfleiste: nur die Liste, kein zusaetzlicher Rahmen dahinter */
header.header .navbar .dropdown-menu {
    padding: 8px;
    border: 1px solid var(--mj-line);
    border-radius: 16px;
    background: var(--mj-surface-2);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}

header.header .navbar .dropdown-menu::before,
header.header .navbar .dropdown-menu::after { display: none; }

@media (max-width: 991.98px) {
    header.header .mj-clientmenu-panel { min-width: 0; }
    header.header .mj-clientmenu-panel.show { grid-template-columns: 1fr; }
}

/* Benachrichtigungen (Popover) im Theme-Look statt weiss */
body .popover {
    max-width: 360px;
    border: 1px solid var(--mj-line);
    border-radius: 16px;
    background: var(--mj-surface-2);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}
body .popover .popover-header {
    border-bottom: 1px solid var(--mj-line-soft);
    border-radius: 16px 16px 0 0;
    background: var(--mj-surface-3);
    color: var(--mj-text);
    font-weight: 700;
}
body .popover .popover-body { color: var(--mj-text-2); }
body .popover .arrow::before { border-bottom-color: var(--mj-line); border-top-color: var(--mj-line); }
body .popover .arrow::after { border-bottom-color: var(--mj-surface-3); border-top-color: var(--mj-surface-2); }
body .popover ul.client-alerts { margin: 0; padding: 0; list-style: none; }
body .popover ul.client-alerts li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: transparent;
    color: var(--mj-text-2);
    text-decoration: none;
}
body .popover ul.client-alerts li a:hover { background: var(--mj-surface-3); color: var(--mj-text); }
body .popover ul.client-alerts li a i { color: var(--mj-brand); }
body .popover ul.client-alerts li.none { padding: 10px 12px; color: var(--mj-muted); }

/* Landauswahl neben dem MwSt.-Schalter */
.mj-taxbar { gap: 10px; flex-wrap: wrap; align-items: center; }
.mj-taxcountry { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--mj-brand); }
.mj-taxcountry select.form-control { width: auto; min-width: 200px; padding: 6px 30px 6px 12px; border-radius: var(--mj-r-pill); font-size: 13px; font-weight: 600; }

/* Ohne Brotkrume: Inhalt bekommt oben etwas Luft */
body #main-body { padding-top: 28px; }


/* ---- Quelle: 20-components.css ---------------------------------------- */
/* ============================================================================
   20 - Bedienelemente: Knöpfe, Formulare, Karten, Meldungen, Dialoge
   ----------------------------------------------------------------------------
   Bootstrap 4.5.3. Das Eltern-Theme nexus definiert in sass/_buttons.scss und
   _forms.scss viele helle Festwerte (#fff, #ccc, #333) - die werden hier ersetzt.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Knöpfe
   ------------------------------------------------------------------------ */

.btn {
    border-radius: var(--mj-r-pill);
    font-weight: 600;
    letter-spacing: -.01em;
    transition: background-color .2s ease, border-color .2s ease,
                color .2s ease, transform .12s ease, box-shadow .2s ease;
}

/* Ein <button class="btn"> ohne Variante behält sonst den hellgrauen
   Standardfond des Browsers (buttonface). Betrifft im echten WHMCS unter
   anderem den Benachrichtigungsknopf in der oberen Leiste. */
button.btn {
    background-color: transparent;
    border-color: transparent;
}

.btn:active {
    transform: scale(.97);
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 3px var(--mj-brand-a25);
}

/* ---- primär: die Signatur der Marke ------------------------------------ */

.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    padding: .55rem 1.5rem;
    background: var(--mj-brand);
    border: 1px solid var(--mj-brand);
    color: var(--mj-on-brand);
    font-weight: 700;
    box-shadow: var(--mj-glow);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--mj-brand-light);
    border-color: var(--mj-brand-light);
    color: var(--mj-on-brand);
}

.btn-primary.disabled,
.btn-primary:disabled {
    background: var(--mj-line);
    border-color: var(--mj-line);
    color: var(--mj-muted-2);
    box-shadow: none;
}

/* ---- sekundär ---------------------------------------------------------- */

.btn-default,
.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--mj-line);
    color: var(--mj-text-2);
}

.btn-default:hover,
.btn-secondary:hover,
.btn-default:focus,
.btn-secondary:focus {
    background-color: rgba(255, 255, 255, .06);
    border-color: var(--mj-line-strong);
    color: var(--mj-text);
}

.btn-default:active,
.btn-default.active,
.btn-secondary:active {
    background-color: var(--mj-surface-3);
    border-color: var(--mj-line-strong);
    color: var(--mj-text);
}

/* Elternteil erzwingt für den deaktivierten Zustand weiß mit !important. */
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus {
    background-color: transparent !important;
    border-color: var(--mj-line-soft) !important;
    color: var(--mj-muted-2) !important;
}

.btn-outline-primary {
    background-color: transparent;
    border: 1px solid var(--mj-brand-a60);
    color: var(--mj-brand);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--mj-brand);
    border-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

/* ---- Statusknöpfe ------------------------------------------------------ */

.btn-success {
    background-color: var(--mj-ok);
    border-color: var(--mj-ok);
    color: var(--mj-on-brand);
    font-weight: 700;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #16a34a;
    border-color: #16a34a;
    color: var(--mj-on-brand);
}

/* #ef4444 trägt weißen Text nur mit 3,8:1. #dc2626 kommt auf 4,8:1 und
   erfüllt damit die Schwelle - deshalb hier bewusst dunkler als --mj-err. */
.btn-danger {
    background-color: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.btn-warning {
    background-color: var(--mj-warn);
    border-color: var(--mj-warn);
    color: var(--mj-on-brand);
    font-weight: 700;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #d97706;
    border-color: #d97706;
    color: var(--mj-on-brand);
}

.btn-info {
    background-color: var(--mj-brand);
    border-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--mj-brand-light);
    border-color: var(--mj-brand-light);
    color: var(--mj-on-brand);
}

.btn-light,
.btn-outline-light {
    background-color: transparent;
    border: 1px solid var(--mj-line);
    color: var(--mj-text-2);
}

.btn-light:hover,
.btn-outline-light:hover {
    background-color: rgba(255, 255, 255, .06);
    border-color: var(--mj-line-strong);
    color: var(--mj-text);
}

.btn-link {
    color: var(--mj-brand);
    box-shadow: none;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--mj-brand-light);
    text-decoration: underline;
}

/* ---- Größen ----------------------------------------------------------- */

.btn-lg,
.btn-group-lg > .btn {
    padding: .8rem 2rem;
    font-size: 16px;
    border-radius: var(--mj-r-pill);
}

.btn-sm,
.btn-group-sm > .btn {
    padding: .35rem 1rem;
    font-size: 13px;
    border-radius: var(--mj-r-pill);
}

.btn-xs,
.btn-group-xs > .btn {
    padding: .18rem .6rem;
    font-size: 12px;
    line-height: 1.5;
    border-radius: var(--mj-r-pill);
}

/* Gruppierte Knöpfe brauchen wieder eckige Innenkanten. */
.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-block {
    display: block;
    width: 100%;
}

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

label,
.form-control-label {
    color: var(--mj-text-2);
    font-size: 14px;
    font-weight: 600;
}

.form-control,
.custom-select,
textarea,
textarea.form-control,
select.form-control {
    background-color: var(--mj-surface-3);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-md);
    color: var(--mj-text);
    font-family: var(--mj-font);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:focus,
.custom-select:focus,
textarea.form-control:focus {
    background-color: var(--mj-surface-3);
    border-color: var(--mj-brand);
    color: var(--mj-text);
    box-shadow: 0 0 0 3px var(--mj-brand-a20);
    outline: 0;
}

.form-control::placeholder,
textarea::placeholder {
    color: var(--mj-muted-2);
    opacity: 1;
}

.form-control[readonly],
.form-control[disabled],
.form-control:disabled {
    background-color: var(--mj-surface-2);
    color: var(--mj-muted);
    opacity: 1;
}

/* Ohne diesen Block färbt Chrome ausgefüllte Felder weiß ein. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--mj-text);
    -webkit-box-shadow: 0 0 0 1000px var(--mj-surface-3) inset;
    box-shadow: 0 0 0 1000px var(--mj-surface-3) inset;
    caret-color: var(--mj-text);
    transition: background-color 100000s ease-in-out 0s;
}

/* Auswahlliste: Pfeil hell nachzeichnen, sonst verschwindet er im Dunkeln. */
.custom-select,
select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3e%3cpath fill='%23a1a1aa' d='M0 0l4 5 4-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 8px 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2rem;
}

select.form-control option {
    background-color: var(--mj-surface-2);
    color: var(--mj-text);
}

.form-group {
    margin-bottom: 1.15rem;
}

/* ---- zusammengesetzte Felder -------------------------------------------- */

.input-group-text {
    background-color: var(--mj-surface-2);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-md) 0 0 var(--mj-r-md);
    color: var(--mj-muted);
}

.input-group > .input-group-append > .input-group-text {
    border-radius: 0 var(--mj-r-md) var(--mj-r-md) 0;
}

.input-group-merge .form-control {
    border-left: 0;
}

.input-group .btn-reveal-pw {
    border: 1px solid var(--mj-line);
    border-left: 0;
    border-radius: 0 var(--mj-r-md) var(--mj-r-md) 0;
    background-color: var(--mj-surface-3);
    color: var(--mj-muted);
}

.input-group .btn-reveal-pw:hover,
.input-group .btn-reveal-pw:active {
    background-color: var(--mj-surface-3);
    border-color: var(--mj-line-strong);
    color: var(--mj-brand);
}

.pw-input {
    height: initial;
}

.custom-file-label {
    background-color: var(--mj-surface-3);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-md) 0 0 var(--mj-r-md);
    color: var(--mj-muted);
}

.custom-file-label::after {
    background-color: var(--mj-surface-2);
    border-left: 1px solid var(--mj-line);
    color: var(--mj-text-2);
}

.custom-control-label {
    color: var(--mj-text-2);
    font-weight: 500;
}

.custom-control-label::before {
    background-color: var(--mj-surface-3);
    border-color: var(--mj-line);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--mj-brand);
    border-color: var(--mj-brand);
}

/* ---- Fehlerzustände ---------------------------------------------------- */

.form-group .field-error-msg {
    color: var(--mj-err);
    font-size: 13px;
}

.has-error .form-control,
.form-control.is-invalid {
    border-color: var(--mj-err);
}

.has-error .form-control:focus,
.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .22);
}

.form-control.is-warning {
    border-color: var(--mj-warn);
}

.form-control.is-warning:focus {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .22);
}

.invalid-feedback,
.warning-feedback {
    color: var(--mj-err);
    font-size: 13px;
}

/* ---- Auswahlkästchen (iCheck) ------------------------------------------ */

/* Die Sprite-Grafik ist hell. Statt sie zu ersetzen, wird sie invertiert -
   so bleibt das Elternteil-Asset nutzbar und der Haken sichtbar. */
.icheckbox_square-blue,
.iradio_square-blue {
    filter: invert(1) hue-rotate(180deg) brightness(1.15);
}

body .icheckbox_square-blue.checked,
body .iradio_square-blue.checked,
body .icheckbox_square-blue.hover,
body .iradio_square-blue.hover {
    filter: invert(1) hue-rotate(180deg) brightness(1.35);
}

/* ---- Umschalter --------------------------------------------------------- */

.bootstrap-switch {
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    overflow: hidden;
}

.bootstrap-switch .bootstrap-switch-handle-off {
    background-color: var(--mj-surface-3);
    color: var(--mj-muted);
}

.bootstrap-switch .bootstrap-switch-handle-on {
    background-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

.bootstrap-switch .bootstrap-switch-label {
    background-color: var(--mj-line);
}

/* ---------------------------------------------------------------------------
   Karten
   ------------------------------------------------------------------------ */

.card {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
}

.card-header {
    padding: 14px 20px;
    background-color: transparent;
    border-bottom: 1px solid var(--mj-line-soft);
    color: var(--mj-text);
    font-weight: 700;
}

.card-header:first-child {
    border-radius: var(--mj-r-lg) var(--mj-r-lg) 0 0;
}

.card-body {
    padding: 20px;
    color: var(--mj-text-2);
}

.card-footer {
    padding: 14px 20px;
    background-color: transparent;
    border-top: 1px solid var(--mj-line-soft);
    color: var(--mj-muted);
}

.card-footer:last-child {
    border-radius: 0 0 var(--mj-r-lg) var(--mj-r-lg);
}

.card-title {
    margin: 0 0 16px;
    color: var(--mj-text);
    font-size: 20px;
    font-weight: 800;
}

.card-header .card-title {
    margin: 0;
    font-size: 16px;
}

/* Das Elternteil erzwingt in _layout.scss overflow:visible und 32px Innenabstand. */
.primary-content .card {
    margin-bottom: 16px;
    border-radius: var(--mj-r-lg);
}

.primary-content .card.mw-540 {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

.primary-content .card.mw-750 {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------------------------------------------------------------------------
   Meldungen
   ------------------------------------------------------------------------ */

.alert {
    padding: 14px 18px;
    border-radius: var(--mj-r-md);
    border-width: 1px;
    border-style: solid;
    font-size: 14px;
}

.alert-info {
    background-color: var(--mj-brand-a10);
    border-color: var(--mj-brand-a40);
    color: #bfdbfe;
}

.alert-success {
    background-color: rgba(34, 197, 94, .12);
    border-color: rgba(34, 197, 94, .38);
    color: #86efac;
}

.alert-warning {
    background-color: rgba(245, 158, 11, .12);
    border-color: rgba(245, 158, 11, .38);
    color: #fcd34d;
}

.alert-danger {
    background-color: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .38);
    color: #fca5a5;
}

.alert-secondary,
.alert-light,
.alert-dark {
    background-color: var(--mj-surface-2);
    border-color: var(--mj-line);
    color: var(--mj-text-2);
}

.alert-link {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

.alert-link:hover {
    color: inherit;
    opacity: .85;
}

.alert h2,
.alert h3,
.alert h4 {
    color: inherit;
    font-size: 17px;
}

.alert ul {
    margin-bottom: 0;
    padding-left: 20px;
}

/* Elternteil färbt .alert:has(form) und :has(small) auf weiß. */
.alert:has(form),
.alert:has(small) {
    background-color: var(--mj-surface-2);
    border-color: var(--mj-line);
    color: var(--mj-text-2);
}

/* ---------------------------------------------------------------------------
   Abzeichen
   ------------------------------------------------------------------------ */

.badge {
    padding: .35em .7em;
    border-radius: var(--mj-r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
}

.badge-primary,
.badge-info {
    background-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

.badge-success { background-color: var(--mj-ok);   color: var(--mj-on-brand); }
.badge-warning { background-color: var(--mj-warn); color: var(--mj-on-brand); }
.badge-danger  { background-color: var(--mj-err);  color: #fff; }

.badge-dark,
.badge-secondary,
.badge-light {
    background-color: var(--mj-line);
    color: var(--mj-text-2);
}

.label {
    display: inline-block;
    padding: .25em .7em .3em;
    border-radius: var(--mj-r-pill);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

/* ---------------------------------------------------------------------------
   Dialoge
   ------------------------------------------------------------------------ */

.modal-backdrop.show {
    background-color: #000;
    opacity: .78;
}

.modal .modal-dialog {
    max-width: 700px;
}

.modal-content {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-lg);
    box-shadow: var(--mj-shadow);
}

/* Das Elternteil setzt den Kopf per !important auf --bg. */
.modal-content .modal-header,
.modal .modal-header {
    padding: 16px 20px;
    background-color: var(--mj-surface-2) !important;
    border-bottom: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg) var(--mj-r-lg) 0 0;
    color: var(--mj-text) !important;
}

.modal-title {
    color: var(--mj-text);
    font-size: 17px;
    font-weight: 800;
}

.modal-body {
    padding: 20px;
    color: var(--mj-text-2);
}

.modal-footer {
    padding: 14px 20px;
    background-color: transparent;
    border-top: 1px solid var(--mj-line-soft);
}

.modal-footer .loader {
    color: var(--mj-muted-2);
    font-size: 13px;
}

.close {
    color: var(--mj-muted);
    opacity: 1;
    text-shadow: none;
}

.close:hover,
.close:focus {
    color: var(--mj-text);
    opacity: 1;
}

/* ---- Sprach- und Währungsdialog ---------------------------------------- */

.modal-localisation .modal-content {
    background-color: var(--mj-surface);
}

.modal-localisation .modal-body {
    background-color: var(--mj-surface);
    background-image: none;  /* Elternteil legt hier img/worldmap.png darunter */
}

.modal-localisation .h5 {
    color: var(--mj-text);
}

.modal-localisation .modal-footer {
    border: 0;
}

.modal-localisation .item-selector .item {
    display: block;
    margin: 3px 0;
    padding: 7px 4px;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-sm);
    color: var(--mj-text-2);
    font-size: 14px;
    text-align: center;
}

.modal-localisation .item-selector .item:hover {
    background-color: var(--mj-surface-3);
    border-color: var(--mj-line-strong);
    color: var(--mj-text);
}

.modal-localisation .item-selector .item.active {
    background-color: var(--mj-brand-a20);
    border-color: var(--mj-brand);
    color: var(--mj-brand);
}

/* ---------------------------------------------------------------------------
   Aufklappmenüs außerhalb der Navigation
   ------------------------------------------------------------------------ */

.dropdown-menu {
    padding: 6px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-md);
    box-shadow: var(--mj-shadow);
}

.dropdown-item {
    border-radius: var(--mj-r-sm);
    color: var(--mj-text-2);
    font-size: 14px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--mj-surface-3);
    color: var(--mj-text);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--mj-brand-a20);
    color: var(--mj-brand);
}

.dropdown-divider {
    border-top-color: var(--mj-line-soft);
}

/* ---------------------------------------------------------------------------
   Blätterung
   ------------------------------------------------------------------------ */

.pagination {
    font-size: 14px;
}

.page-link {
    margin: 0 2px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-sm) !important;  /* Elternteil rundet nur außen */
    color: var(--mj-text-2);
}

.page-link:hover {
    background-color: var(--mj-surface-3);
    border-color: var(--mj-line);
    color: var(--mj-text);
}

.page-item.active .page-link {
    background-color: var(--mj-brand);
    border-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

.page-item.disabled .page-link {
    background-color: var(--mj-surface);
    border-color: var(--mj-line-soft);
    color: var(--mj-muted-2);
}

/* ---------------------------------------------------------------------------
   Reiter
   ------------------------------------------------------------------------ */

.nav-tabs {
    border-bottom: 1px solid var(--mj-line);
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-radius: var(--mj-r-sm) var(--mj-r-sm) 0 0;
    color: var(--mj-muted);
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    border-color: transparent transparent var(--mj-line-strong);
    color: var(--mj-text);
}

.nav-tabs .nav-link.active {
    background-color: var(--mj-surface);
    border-color: var(--mj-line) var(--mj-line) var(--mj-surface);
    color: var(--mj-brand);
}

.nav-pills .nav-link.active {
    background-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

/* ---------------------------------------------------------------------------
   Fortschritt
   ------------------------------------------------------------------------ */

.progress {
    height: 8px;
    background-color: var(--mj-surface-3);
    border-radius: var(--mj-r-pill);
}

.progress-bar {
    background-color: var(--mj-brand);
}

.password-strength-meter .progress {
    margin-bottom: 6px;
}

.password-strength-meter p {
    margin-bottom: 14px;
    color: var(--mj-muted);
    font-size: 13px;
}

/* ---------------------------------------------------------------------------
   Listengruppen (Grundgestalt)
   ------------------------------------------------------------------------ */

.list-group {
    border-radius: var(--mj-r-md);
}

.list-group-item {
    background-color: transparent;
    border-color: var(--mj-line-soft);
    color: var(--mj-text-2);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--mj-surface-3);
    color: var(--mj-text);
}

.list-group-item.active {
    background-color: var(--mj-brand-a15);
    border-color: var(--mj-line-soft);
    color: var(--mj-brand);
}

.list-group-item.disabled {
    background-color: transparent;
    color: var(--mj-muted-2);
}

/* ---------------------------------------------------------------------------
   Kurzhinweise
   ------------------------------------------------------------------------ */

.tooltip-inner {
    background-color: var(--mj-surface-3);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-sm);
    color: var(--mj-text);
    font-size: 12px;
}

.tooltip .arrow::before {
    border-top-color: var(--mj-line);
    border-bottom-color: var(--mj-line);
}

.popover {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-md);
    box-shadow: var(--mj-shadow);
}

.popover-header {
    background-color: var(--mj-surface-2);
    border-bottom: 1px solid var(--mj-line-soft);
    color: var(--mj-text);
}

.popover-body {
    color: var(--mj-text-2);
}

.popover .arrow::after {
    border-top-color: var(--mj-surface);
    border-bottom-color: var(--mj-surface);
}


/* ---------------------------------------------------------------------------
   Nachgemessen auf cp.mam-jahn.de
   ------------------------------------------------------------------------ */

/* Bootstrap-Utilities mit !important – nur mit !important zu schlagen */
.text-muted { color: var(--mj-muted) !important; }
.bg-light   { background-color: var(--mj-surface) !important; }
.bg-white   { background-color: var(--mj-surface) !important; }

/* Bootstrap-3-Labels (Status in Dashboard-Listen): weiß auf kräftigem Grün
   kam nur auf 2,3:1. Getönte Pillen wie bei .status-* */
.label-default,
.label-secondary {
    background-color: var(--mj-surface-3);
    border: 1px solid var(--mj-line);
    color: var(--mj-text-2);
}

.label-success {
    background-color: rgba(34, 197, 94, .15);
    border: 1px solid rgba(34, 197, 94, .4);
    color: #86efac;
}

.label-info,
.label-primary {
    background-color: var(--mj-brand-a15);
    border: 1px solid var(--mj-brand-a40);
    color: var(--mj-brand-light);
}

.label-warning {
    background-color: rgba(245, 158, 11, .15);
    border: 1px solid rgba(245, 158, 11, .4);
    color: #fcd34d;
}

.label-danger {
    background-color: rgba(239, 68, 68, .15);
    border: 1px solid rgba(239, 68, 68, .4);
    color: #fca5a5;
}

/* Umschalter-Plugin: eigene Farbklassen schlagen die Grundregel */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
    background: var(--mj-brand);
    color: var(--mj-on-brand);
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning {
    background: var(--mj-surface-3);
    color: var(--mj-text-2);
}

.bootstrap-switch .bootstrap-switch-label {
    background: var(--mj-line-strong);
}


/* ---- Quelle: 30-clientarea.css ---------------------------------------- */
/* ============================================================================
   30 - Kundenbereich: Begrüßung, Kacheln, Panels, Tabellen, Seitenleiste
   ----------------------------------------------------------------------------
   Ersetzt die hellen Festwerte aus nexus/sass/_client-home.scss (.tile auf
   #f8f8f8, .card-header auf #fff), _sidebar.scss und _tables.scss.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Begrüßung über dem Dashboard
   ------------------------------------------------------------------------ */

.mj-welcome {
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    padding: 28px 28px 26px;
    background:
        radial-gradient(ellipse 60% 120% at 8% 0%, var(--mj-brand-a15), transparent 65%),
        var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-xl);
}

.mj-welcome .mj-glow-blob {
    top: -140px;
    right: -100px;
    width: 300px;
    height: 300px;
}

.mj-welcome-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

@media (min-width: 768px) {
    .mj-welcome-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.mj-welcome-title {
    margin: 0 0 6px;
    color: var(--mj-text);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 900;
    letter-spacing: -.025em;
}

.mj-welcome-sub {
    margin: 0;
    max-width: 56ch;
    color: var(--mj-muted);
    font-size: 15px;
}

.mj-welcome-action {
    flex-shrink: 0;
}

.mj-welcome-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: .7rem 1.6rem;
    background: var(--mj-brand);
    border: 0;
    border-radius: var(--mj-r-pill);
    color: var(--mj-on-brand);
    font-size: 14px;
    font-weight: 700;
    box-shadow: var(--mj-glow);
    transition: background-color .2s ease, transform .15s ease;
}

.mj-welcome-btn:hover {
    background: var(--mj-brand-light);
    color: var(--mj-on-brand);
    transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   Kachelleiste
   ------------------------------------------------------------------------ */

.tiles {
    margin-bottom: 24px;
}

/* Die Kacheln liegen in .row.no-gutters nebeneinander. Statt der Trennlinie
   des Elternteils bekommt jede Kachel einen eigenen Rahmen und Abstand. */
.tiles .row.no-gutters {
    gap: 0;
}

.tiles > .row > div {
    padding: 6px;
}

.tiles .tile {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 18px 20px 14px;
    height: 100%;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-right: 1px solid var(--mj-line-soft);  /* Elternteil setzt hier #ccc */
    border-radius: var(--mj-r-lg);
    color: var(--mj-text);
    text-decoration: none;
    transition: transform .3s ease, border-color .3s ease, background-color .3s ease;
}

.tiles .tile:hover {
    background-color: var(--mj-surface-2);
    border-color: var(--mj-brand-a60);
    transform: translateY(-4px);
    cursor: pointer;
}

.tiles .tile .stat {
    margin-top: 14px;
    color: var(--mj-text);
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
}

.tiles .tile .title {
    margin-top: 4px;
    color: var(--mj-muted-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.tiles .tile .highlight {
    margin-top: 12px;
    height: 3px;
    border-radius: var(--mj-r-pill);
}

.tiles .tile i {
    position: absolute;
    top: 14px;
    right: 18px;
    color: rgba(255, 255, 255, .07);
    font-size: 54px;
    line-height: 1;
    transition: color .3s ease, transform .3s ease;
}

.tiles .tile:hover i {
    color: rgba(255, 255, 255, .12);
    transform: scale(1.08);
}

/* Das Elternteil entfernt auf schmalen Schirmen Rahmen - hier nicht nötig,
   weil jede Kachel ohnehin eigenständig gerahmt ist. */
@media (max-width: 991.98px) {
    .tiles div:nth-child(1) > .tile,
    .tiles div:nth-child(2) > .tile {
        border-bottom: 1px solid var(--mj-line-soft);
    }
}

/* ---- Akzentfarben der Kacheln ------------------------------------------- */

.bg-color-blue          { background-color: var(--mj-brand); }
.bg-color-green,
.bg-color-lime          { background-color: var(--mj-ok); }
.bg-color-red,
.bg-color-pomegranate   { background-color: var(--mj-err); }
.bg-color-gold,
.bg-color-sun-flower    { background-color: var(--mj-warn); }
.bg-color-orange        { background-color: var(--mj-acc-vds); }
.bg-color-purple,
.bg-color-amethyst      { background-color: var(--mj-acc-web); }
.bg-color-pink,
.bg-color-magenta       { background-color: #f472b6; }
.bg-color-teal,
.bg-color-turquoise,
.bg-color-emerald       { background-color: #2dd4bf; }
.bg-color-midnight-blue,
.bg-color-wet-asphalt   { background-color: var(--mj-brand-dark); }
.bg-color-silver,
.bg-color-asbestos      { background-color: var(--mj-line-strong); }

/* ---------------------------------------------------------------------------
   Panels des Dashboards
   ------------------------------------------------------------------------ */

.client-home-cards .card,
.primary-content .client-home-cards .card {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-top: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
    font-size: 14px;
}

.client-home-cards .card-header,
.primary-content .client-home-cards .card .card-header {
    background-color: transparent;  /* Elternteil setzt #fff */
    border-bottom: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg) var(--mj-r-lg) 0 0;
    font-weight: 700;
}

.client-home-cards .card-title {
    margin: 0;
    color: var(--mj-text);
    font-size: 15px;
    font-weight: 700;
}

.client-home-cards .card-header .btn,
.primary-content .client-home-cards .card .card-header .btn {
    padding: .28rem .8rem;
    background-color: transparent;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    color: var(--mj-text-2);
    font-size: 12px;
    font-weight: 600;
}

.client-home-cards .card-header .btn:hover,
.primary-content .client-home-cards .card .card-header .btn:hover {
    background-color: var(--mj-brand);
    border-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

.client-home-cards .card-body {
    padding: 0;
}

.client-home-cards .card-body p {
    padding: 14px 20px;
    margin: 0;
    color: var(--mj-muted);
}

.client-home-cards .list-group {
    max-height: 190px;
    overflow: auto;
    border-radius: 0;
    border-top: 1px solid var(--mj-line-soft) !important;   /* Elternteil nutzt !important */
    border-bottom: 1px solid var(--mj-line-soft) !important;
}

.client-home-cards .list-group .list-group-item,
.primary-content .client-home-cards .card .list-group .list-group-item {
    padding: 9px 20px;
    border: 0;
    border-bottom: 1px solid var(--mj-line-soft);
    background-color: transparent;
    color: var(--mj-text-2);
}

.client-home-cards .list-group .list-group-item:last-child {
    border-bottom: 0;
}

.client-home-cards .card-footer,
.primary-content .client-home-cards .card .card-footer {
    background-color: transparent;  /* Elternteil setzt white */
    border-top: 1px solid var(--mj-line-soft);
    border-radius: 0 0 var(--mj-r-lg) var(--mj-r-lg);
}

.client-home-cards .card-footer .btn-view-more,
.primary-content .client-home-cards .card .card-footer .btn-view-more {
    color: var(--mj-brand);
    font-size: 13px;
}

.client-home-cards small {
    color: var(--mj-muted-2);
}

.client-home-cards .btn-success,
.primary-content .client-home-cards .card .btn-success {
    background-color: var(--mj-brand);
    border-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

.client-home-cards .btn-success:hover,
.primary-content .client-home-cards .card .btn-success:hover {
    background-color: var(--mj-brand-light);
    border-color: var(--mj-brand-light);
}

/* ---- Akzentkanten der Panels -------------------------------------------- */

.card-accent-blue,
.card-accent-midnight-blue      { border-top: 3px solid var(--mj-brand); }
.card-accent-green,
.card-accent-lime,
.card-accent-wet-asphalt        { border-top: 3px solid var(--mj-ok); }
.card-accent-red,
.card-accent-pomegranate        { border-top: 3px solid var(--mj-err); }
.card-accent-gold,
.card-accent-sun-flower         { border-top: 3px solid var(--mj-warn); }
.card-accent-orange             { border-top: 3px solid var(--mj-acc-vds); }
.card-accent-purple,
.card-accent-amethyst,
.card-accent-pink               { border-top: 3px solid var(--mj-acc-web); }
.card-accent-magenta            { border-top: 3px solid #f472b6; }
.card-accent-teal,
.card-accent-turquoise,
.card-accent-emerald            { border-top: 3px solid #2dd4bf; }
.card-accent-silver,
.card-accent-asbestos           { border-top: 3px solid var(--mj-line-strong); }
.card-accent-brand-cpanel-orange { border-top: 3px solid var(--mj-acc-dedi); }
.card-accent-brand-xovinow-blue  { border-top: 3px solid var(--mj-brand-dark); }

/* ---- Dienstliste im Panel ----------------------------------------------- */

.div-service-item {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.div-service-name > span {
    color: var(--mj-text-2);
}

.div-service-status .label {
    color: #fff;
}

.div-service-buttons .dropdown-item {
    font-size: 13px;
}

.btn-view-more.disabled {
    color: var(--mj-muted-2);
    cursor: default;
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Seitenleiste
   ------------------------------------------------------------------------ */

.sidebar .card-sidebar,
.sidebar .card {
    margin-bottom: 14px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
    overflow: hidden;
}

.sidebar .card-header {
    padding: 13px 18px;
    background-color: transparent;
    border-bottom: 1px solid var(--mj-line-soft);
    color: var(--mj-text);
    font-weight: 700;
}

.sidebar .card-title,
.sidebar .card-sidebar .panel-title {
    margin: 0;
    color: var(--mj-text);
    font-size: 14px;
    font-weight: 700;
}

.sidebar .card-minimise {
    color: var(--mj-muted-2);
    cursor: pointer;
    font-weight: 400;
    transition: transform .2s ease;
}

.sidebar .card-minimise.minimised {
    transform: rotate(180deg);
}

.sidebar .card-footer {
    background-color: transparent;
    border-top: 1px solid var(--mj-line-soft);
}

.sidebar .list-group {
    font-size: 14px;
    border-radius: 0;
}

.sidebar .list-group-item {
    position: relative;
    padding: 10px 18px;
    border: 0;
    border-bottom: 1px solid var(--mj-line-soft);
    background-color: transparent;
    color: var(--mj-text-2);
    font-weight: 500;
    transition: background-color .2s ease, color .2s ease;
}

.sidebar .list-group-item:last-child {
    border-bottom: 0;
}

.sidebar .list-group-item:hover {
    background-color: var(--mj-surface-3);
    color: var(--mj-text);
}

/* Aktiver Eintrag: getönter Fond plus Markenkante links. */
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus {
    background-color: var(--mj-brand-a15);
    color: var(--mj-brand);
    font-weight: 600;
}

.sidebar .list-group-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--mj-brand);
}

.sidebar .list-group-item.disabled {
    color: var(--mj-muted-2);
}

.sidebar .list-group-item .badge {
    background-color: var(--mj-surface-3);
    color: var(--mj-muted);
}

.sidebar .list-group-item.active .badge {
    background-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

.sidebar-menu-item-wrapper {
    display: flex;
    flex-flow: row;
    align-items: center;
}

.sidebar-menu-item-icon-wrapper {
    margin-right: 9px;
    color: var(--mj-muted-2);
}

.sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper {
    color: var(--mj-brand);
}

.sidebar-menu-item-label {
    overflow: auto;
}

.sidebar-menu-item-badge {
    margin-left: auto;
}

.sidebar .alert {
    padding: 11px 16px;
    margin-bottom: 6px;
}

/* Filterknöpfe in der Seitenleiste */
.view-filter-btns .list-group-item.active i.fa-dot-circle {
    color: var(--mj-brand);
}

/* ---------------------------------------------------------------------------
   Tabellen
   ------------------------------------------------------------------------ */

.table-container {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
    padding: 6px 14px 14px;
}

table.table,
.table {
    color: var(--mj-text-2);
    margin-bottom: 0;
}

.table thead th,
table.table thead th {
    padding: 12px 14px;
    background-color: transparent;
    border-top: 0;
    border-bottom: 1px solid var(--mj-line);
    color: var(--mj-muted-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table td,
table.table td {
    padding: 13px 14px;
    border-top: 0;
    border-bottom: 1px solid var(--mj-line-soft);
    color: var(--mj-text-2);
    vertical-align: middle;
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table tbody tr {
    transition: background-color .18s ease;
}

/* Die Zeilen der Dienst- und Rechnungslisten sind per onclick anklickbar. */
.table-list tbody tr {
    cursor: pointer;
}

.table-hover tbody tr:hover,
.table-list tbody tr:hover,
table.table tbody tr:hover {
    background-color: var(--mj-surface-3);
    color: var(--mj-text);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;  /* Elternteil zeichnet helle Zebrastreifen */
}

.table td strong,
.table th {
    color: var(--mj-text);
}

.table a {
    color: var(--mj-brand);
}

/* ---------------------------------------------------------------------------
   DataTables
   ------------------------------------------------------------------------ */

.dataTables_wrapper {
    color: var(--mj-muted);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    margin-left: 8px;
    padding: .4rem .8rem;
    background-color: var(--mj-surface-3);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-md);
    color: var(--mj-text);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--mj-brand);
    box-shadow: 0 0 0 3px var(--mj-brand-a20);
    outline: 0;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--mj-muted-2);
    font-size: 13px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: .3rem .7rem;
    border-radius: var(--mj-r-sm);
    color: var(--mj-text-2) !important;  /* DataTables setzt inline !important */
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--mj-surface-3) !important;
    border-color: var(--mj-line) !important;
    color: var(--mj-text) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--mj-brand) !important;
    border-color: var(--mj-brand) !important;
    color: var(--mj-on-brand) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--mj-muted-2) !important;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    color: var(--mj-muted-2);
}

table.dataTable tbody tr {
    background-color: transparent;
}

.dataTables_empty,
td.dataTables_empty {
    padding: 28px 14px !important;  /* DataTables setzt eigenen Innenabstand */
    color: var(--mj-muted-2);
    text-align: center;
}

#tableLoading {
    padding: 24px 0;
    color: var(--mj-muted-2);
}

/* ---------------------------------------------------------------------------
   Statusanzeigen
   ------------------------------------------------------------------------ */

.status,
span.status {
    display: inline-block;
    padding: .3em .85em .35em;
    border: 1px solid transparent;
    border-radius: var(--mj-r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-active,
.status-paid,
.status-answered,
.status-completed {
    background-color: rgba(34, 197, 94, .14);
    border-color: rgba(34, 197, 94, .4);
    color: #86efac;
}

.status-pending,
.status-open,
.status-inprogress,
.status-customer-reply {
    background-color: rgba(245, 158, 11, .14);
    border-color: rgba(245, 158, 11, .4);
    color: #fcd34d;
}

.status-suspended,
.status-overdue,
.status-unpaid,
.status-fraud {
    background-color: rgba(239, 68, 68, .14);
    border-color: rgba(239, 68, 68, .4);
    color: #fca5a5;
}

.status-terminated,
.status-cancelled,
.status-closed,
.status-refunded,
.status-expired,
.status-draft {
    background-color: rgba(161, 161, 170, .12);
    border-color: var(--mj-line-strong);
    color: var(--mj-muted);
}

/* ---------------------------------------------------------------------------
   Ueberschriften mit Linie, Ticketansicht, Rechnungen
   ------------------------------------------------------------------------ */

.header-lined {
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--mj-line-soft);
}

.header-lined h1,
.header-lined h2,
.header-lined h3 {
    margin: 0;
    color: var(--mj-text);
}

.card.view-ticket {
    background-color: var(--mj-surface);
}

.card.view-ticket .posted-by {
    background-color: var(--mj-surface-2);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
    color: var(--mj-muted);
}

/* Ausgabe der Rechnungsansicht */
.invoice-container,
.invoice-details {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
    color: var(--mj-text-2);
}


/* ---------------------------------------------------------------------------
   Nachgemessen auf cp.mam-jahn.de: nexus stellt "body" vor die Dashboard- und
   Seitenleistenregeln und setzt Karten-Fuß, Kopfknöpfe und btn-success hell.
   Gleiche Ketten hier, später geladen, gewinnen.
   ------------------------------------------------------------------------ */

body .primary-content .client-home-cards .card .card-header .btn,
body .primary-content .client-home-cards .mc-promo-manage .card-header .btn,
body .primary-content .client-home-cards .mc-promo-login .card-header .btn {
    padding: .28rem .8rem;
    background: transparent;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    color: var(--mj-text-2);
}

body .primary-content .client-home-cards .card .card-header .btn:hover,
body .primary-content .client-home-cards .mc-promo-manage .card-header .btn:hover,
body .primary-content .client-home-cards .mc-promo-login .card-header .btn:hover {
    background: var(--mj-brand);
    border-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

body .primary-content .client-home-cards .card .card-footer,
body .primary-content .client-home-cards .mc-promo-manage .card-footer,
body .primary-content .client-home-cards .mc-promo-login .card-footer {
    background: transparent;
    border-top: 1px solid var(--mj-line-soft);
}

body .primary-content .client-home-cards .card .btn-success,
body .primary-content .client-home-cards .mc-promo-manage .btn-success,
body .primary-content .client-home-cards .mc-promo-login .btn-success {
    background: var(--mj-brand);
    border-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

body .sidebar .btn-success {
    background: var(--mj-brand);
    border-color: var(--mj-brand);
    border-radius: var(--mj-r-pill);
    color: var(--mj-on-brand);
    font-weight: 700;
}

body .sidebar .btn-success:hover,
body .sidebar .btn-success:focus {
    background: var(--mj-brand);
    border-color: var(--mj-brand);
    filter: brightness(1.1);
    color: var(--mj-on-brand);
}

/* Listen-Tabellen: nexus setzt thead th und td auf weiß, Rahmen #ddd */
.dataTables_wrapper table.table-list {
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
    overflow: hidden;
}

table.table-list thead th {
    padding: 12px 14px;
    background-color: var(--mj-surface-2);
    border-bottom: 1px solid var(--mj-line);
    color: var(--mj-muted-2);
}

.dataTables_wrapper table.table-list thead th.sorting,
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
    background-color: var(--mj-surface-2);
    color: var(--mj-text-2);
}

.table-list > tbody > tr > td {
    background-color: transparent;
}

.table-list > tbody > tr:hover > td {
    background-color: var(--mj-surface-3);
}

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    background-color: var(--mj-surface-3);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-md);
    color: var(--mj-text);
}

/* ---------------------------------------------------------------------------
   Kaskaden-Analyse auf cp.mam-jahn.de: zwei Stellen, an denen nexus deutlich
   stärkere Ketten benutzt als die bisherigen Regeln oben.
   ------------------------------------------------------------------------ */

/* Status-Label in der Dienstliste: nexus setzt .div-service-status .label weiß.
   Die Farbe hängt an der Variante, deshalb je Variante eine Regel. */
.div-service-status .label.label-success   { color: #86efac; }
.div-service-status .label.label-info,
.div-service-status .label.label-primary   { color: var(--mj-brand-light); }
.div-service-status .label.label-warning   { color: #fcd34d; }
.div-service-status .label.label-danger    { color: #fca5a5; }
.div-service-status .label.label-default,
.div-service-status .label.label-secondary { color: var(--mj-text-2); }

/* Suchfeld und Längenwahl der Listen-Tabellen:
   nexus stellt "body .dataTables_wrapper .dataTables_filter label .form-control" */
html body .dataTables_wrapper .dataTables_filter label .form-control,
html body .dataTables_wrapper .dataTables_length label .form-control,
html body .dataTables_wrapper .dataTables_length label select {
    background-color: var(--mj-surface-3);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-md);
    color: var(--mj-text);
}

html body .dataTables_wrapper .dataTables_filter label .form-control:focus {
    border-color: var(--mj-brand);
    box-shadow: 0 0 0 3px var(--mj-brand-a20);
}

/* ---------------------------------------------------------------------------
   Abnahme-Rundgang: Produktdetails und Rechnungsansicht
   ------------------------------------------------------------------------ */

/* Produktdetails: hellgraue Symbolkarte mit weisser Schrift (nexus #efefef) */
div.product-details div.product-icon {
    background-color: var(--mj-surface-2);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
    color: var(--mj-text);
}
div.product-details div.product-icon i,
div.product-details div.product-icon .fa,
div.product-details div.product-icon .fas,
div.product-details div.product-icon .far,
div.product-details div.product-icon .fal { color: var(--mj-brand); }
div.product-details div.product-icon .product-name,
div.product-details div.product-icon h3,
div.product-details div.product-icon strong { color: var(--mj-text); }
div.product-details div.product-icon small,
div.product-details div.product-icon .text-muted { color: var(--mj-muted) !important; }

.product-status { border-radius: var(--mj-r-pill); font-weight: 700; letter-spacing: .04em; }
.product-status-active     { background-color: rgba(34,197,94,.18);  color: #86efac; }
.product-status-pending    { background-color: rgba(245,158,11,.18); color: #fcd34d; }
.product-status-suspended,
.product-status-fraud      { background-color: rgba(239,68,68,.18);  color: #fca5a5; }
.product-status-terminated,
.product-status-cancelled  { background-color: var(--mj-surface-3);  color: var(--mj-muted); }

div.product-details-tab-container,
.tab-content.bg-white.product-details-tab-container {
    background-color: var(--mj-surface) !important;  /* Utility .bg-white mit !important */
    border: 1px solid var(--mj-line-soft);
    border-radius: 0 var(--mj-r-lg) var(--mj-r-lg) var(--mj-r-lg);
}

/* Rechnungsansicht (viewinvoice.php lädt nexus/invoice.css statt theme.css) */
.invoice-container { background-color: var(--mj-surface); color: var(--mj-text-2); }
.invoice-container h3, .invoice-container h4, .invoice-container strong { color: var(--mj-text); }
.invoice-container .table th { background-color: var(--mj-surface-2); color: var(--mj-muted-2); border-color: var(--mj-line); }
.invoice-container .table td { border-color: var(--mj-line-soft); color: var(--mj-text-2); }
.invoice-container td.total-row,
.invoice-container .total-row {
    background-color: var(--mj-surface-3);
    color: var(--mj-text);
    font-weight: 600;
}
.invoice-container .card-title.bg-info,
.invoice-container .bg-info { background-color: var(--mj-surface-2) !important; color: var(--mj-text) !important; }
.invoice-container .card { background-color: var(--mj-surface-2); border-color: var(--mj-line-soft); }

.invoice-status { font-weight: 900; letter-spacing: .02em; text-transform: uppercase; }
/* Der Status steht als span mit Zustandsklasse IN .invoice-status (viewinvoice.tpl) */
.invoice-status .paid        { color: var(--mj-ok); }
.invoice-status .unpaid      { color: var(--mj-err); }
.invoice-status .collections { color: var(--mj-warn); }
.invoice-status .cancelled,
.invoice-status .refunded,
.invoice-status .draft       { color: var(--mj-muted); }

/* Bootstrap-Utilities, die in Rechnung und Produktdetails auftauchen */
.text-white .invoice-container, .invoice-container .text-white { color: var(--mj-text) !important; }


/* ---------------------------------------------------------------------------
   Produktdetails: Reiter (Serverinformationen, Konfigurierbare Optionen, ...)
   nexus faerbt den Reiter beim Ueberfahren weiss - hier dunkel, Text sichtbar.
   ------------------------------------------------------------------------ */
html body .product-details-tab-container .nav-tabs .nav-link,
html body ul.nav-tabs.product-details-tabs .nav-link,
html body .product-details-tab-container + .nav-tabs .nav-link {
    color: var(--mj-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px 12px 0 0;
}
html body .nav-tabs .nav-link:hover,
html body .nav-tabs .nav-link:focus,
html body .nav-tabs .nav-item.show .nav-link,
html body .nav-tabs .nav-link.active:hover {
    color: var(--mj-text);
    background: var(--mj-surface-3);
    border-color: var(--mj-line) var(--mj-line) transparent;
}
html body .nav-tabs .nav-link.active,
html body .nav-tabs .nav-item.show .nav-link.active {
    color: var(--mj-brand);
    background: var(--mj-surface-2);
    border-color: var(--mj-line) var(--mj-line) var(--mj-surface-2);
}
html body .nav-tabs .nav-link i { color: inherit; }
html body .tab-content.product-details-tab-container,
html body div.product-details-tab-container {
    background: var(--mj-surface-2);
    border: 1px solid var(--mj-line);
    border-radius: 0 16px 16px 16px;
    color: var(--mj-text-2);
}
html body .product-details-tab-container .tab-pane .row > div { color: var(--mj-text-2); }
html body .product-details-tab-container .tab-pane strong,
html body .product-details-tab-container .tab-pane b { color: var(--mj-text); }

/* Lange Werte (SSH-Key, Tokens) in den Produktdetails umbrechen statt ueberlaufen */
html body .product-details-tab-container,
html body .product-details-tab-container .tab-pane { overflow: hidden; }
html body .product-details-tab-container .tab-pane .row > div,
html body .product-details-tab-container td,
html body .product-details-tab-container dd,
html body .product-details-tab-container p {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Produktdetails > Zusaetzliche Information: lange Werte (SSH-Key) umbrechen */
html body .product-details-tab-container .tab-pane .row,
html body .product-details-tab-container .tab-pane .row > div {
    min-width: 0;
}
html body .product-details-tab-container .tab-pane .row > div:not(:first-child) {
    overflow-wrap: anywhere;
    word-break: break-all;
    font-family: var(--mj-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: 12.5px;
    line-height: 1.5;
}


/* ---- Rechnungsansicht: Guthaben-Kasten (viewinvoice.tpl, .card-header.bg-success) ---- */
body .primary-content .card > .card-header.bg-success {
    background: var(--mj-brand-a15) !important;
    border-bottom: 1px solid var(--mj-brand-a40);
    color: var(--mj-text) !important;
}
body .primary-content .card > .card-header.bg-success .card-subtitle { margin: 0; color: var(--mj-text); font-size: 15px; font-weight: 800; }
body .primary-content .card .input-group .btn-success,
body .primary-content .card .input-group .btn-success:focus {
    background: var(--mj-brand);
    border: 1px solid var(--mj-brand);
    color: var(--mj-on-brand);
    font-weight: 700;
    opacity: 1;
}
body .primary-content .card .input-group .btn-success:hover { filter: brightness(1.1); color: var(--mj-on-brand); }
body .primary-content .card .input-group .form-control { border-radius: var(--mj-r-md) 0 0 var(--mj-r-md); }
body .primary-content .card .input-group .btn-success { border-radius: 0 var(--mj-r-md) var(--mj-r-md) 0; }

/* Seitenleiste "Faellige Rechnungen": beide Knoepfe gleich gross, untereinander */
body .sidebar .card-body .btn-sm,
body .sidebar .list-group-item .btn-sm { display: inline-flex; align-items: center; gap: 6px; margin: 4px 6px 0 0; padding: 7px 14px; border-radius: var(--mj-r-pill); font-size: 12.5px; font-weight: 700; }
body .sidebar .btn-default.btn-sm { border: 1px solid var(--mj-line); background: var(--mj-surface-3); color: var(--mj-text-2); }
body .sidebar .btn-default.btn-sm:hover { border-color: var(--mj-line-strong); color: var(--mj-text); }

/* ---- Sammelzahlung (masspay.tpl): nexus setzt Summenzeilen und Trenner hell ---- */
body .primary-content .table tr.masspay-total td,
body .primary-content .table tr.masspay-total th {
    background: var(--mj-surface-2) !important;
    border-color: var(--mj-line-soft) !important;
    color: var(--mj-text-2) !important;
    font-weight: 600;
}
body .primary-content .table tr.masspay-total:last-child td {
    background: var(--mj-brand-a10) !important;
    color: var(--mj-text) !important;
    font-size: 15px;
    font-weight: 800;
}
body .primary-content .table td.bg-default {
    background: transparent !important;
    padding-top: 18px;
    color: var(--mj-text) !important;
    font-weight: 800;
}
body .primary-content .table tr.masspay-invoice-detail td { color: var(--mj-text-2); font-size: 13px; }
body .primary-content .table tr.masspay-invoice-detail td:last-child { color: var(--mj-text); font-weight: 700; white-space: nowrap; }
body .primary-content .card.bg-default { background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); border: 1px solid var(--mj-line); border-radius: var(--mj-r-xl); }
body .primary-content .card.bg-default .card-header { background: transparent; border-bottom: 1px solid var(--mj-line-soft); color: var(--mj-text); }
body .primary-content .card.bg-default .card-title { font-size: 15px; font-weight: 800; }
body .primary-content #btnMassPayMakePayment { padding: 12px 20px; border-radius: var(--mj-r-pill); font-weight: 800; box-shadow: 0 14px 30px -12px var(--mj-brand-a60); }


/* ---- Quelle: 31-clientarea-pages.css ---------------------------------------- */
/* ============================================================================
   31 - Kundenbereich, Seiten im Kartenstil (Block 1: Dienste, Rechnungen,
   Angebote, Guthaben, Produktdetails). Gemeinsame Bausteine: .mj-page-head,
   .mj-card, .mj-facts, .mj-list (DataTables), .mj-notice, .mj-pill-btn
   ========================================================================== */

/* ---- Seitenkopf ---------------------------------------------------------- */
.primary-content .mj-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin: 4px 0 22px; }
.primary-content .mj-page-head h1 { margin: 0 0 4px; color: var(--mj-text); font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; }
.primary-content .mj-page-head p { margin: 0; color: var(--mj-muted-2); font-size: 14px; }
.primary-content .mj-page-btn { padding: 10px 18px; border-radius: var(--mj-r-pill); font-weight: 700; white-space: nowrap; }
.primary-content .btn.mj-page-btn.btn-default { border: 1px solid var(--mj-line); background: var(--mj-surface-2); color: var(--mj-text-2); }
.primary-content .btn.mj-page-btn.btn-default:hover { border-color: var(--mj-line-strong); color: var(--mj-text); }

/* ---- Karte und Fakten ---------------------------------------------------- */
.primary-content .mj-card {
    position: relative;
    margin: 0 0 18px;
    padding: 22px 24px;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-xl);
    background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}
.primary-content .mj-card h2 { margin: 0 0 14px; color: var(--mj-text); font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.primary-content .mj-card h2 i { margin-right: 6px; color: var(--mj-brand); }
.primary-content .mj-card--side { background: var(--mj-surface); }
.primary-content .mj-two { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 991.98px) { .primary-content .mj-two { grid-template-columns: 1fr; } }

.primary-content dl.mj-facts { margin: 0; }
.primary-content dl.mj-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--mj-line-soft); font-size: 13.5px; }
.primary-content dl.mj-facts > div:last-child { border-bottom: 0; }
.primary-content dl.mj-facts dt { margin: 0; color: var(--mj-muted-2); font-weight: 600; }
.primary-content dl.mj-facts dd { margin: 0; color: var(--mj-text); font-weight: 700; text-align: right; }
.primary-content dl.mj-facts--rows > div { justify-content: flex-start; }
.primary-content dl.mj-facts--rows dt { flex: 0 0 220px; }
.primary-content dl.mj-facts--rows dd { flex: 1 1 auto; text-align: left; font-weight: 600; }
.primary-content dl.mj-facts--inline { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.primary-content dl.mj-facts--inline > div { padding: 0; border: 0; gap: 8px; }
.primary-content dl.mj-facts code { padding: 2px 8px; border-radius: 6px; background: var(--mj-surface-3); color: var(--mj-text); font-size: 12.5px; }
.primary-content .mj-prewrap { white-space: pre-wrap; word-break: break-all; }

.primary-content .mj-note { display: flex; gap: 8px; margin: 12px 0 0; color: var(--mj-muted-2); font-size: 12.5px; line-height: 1.55; }
.primary-content .mj-note i { margin-top: 2px; color: var(--mj-brand); }

.primary-content .mj-notice { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 14px 18px; border: 1px solid var(--mj-line); border-radius: 16px; background: var(--mj-surface-2); color: var(--mj-text-2); font-size: 13.5px; }
.primary-content .mj-notice > div { flex: 1 1 auto; }
.primary-content .mj-notice > i { font-size: 18px; color: var(--mj-brand); }
.primary-content .mj-notice.is-warning { border-color: rgba(245, 158, 11, .45); } .primary-content .mj-notice.is-warning > i { color: #fbbf24; }
.primary-content .mj-notice.is-danger  { border-color: rgba(239, 68, 68, .45); }  .primary-content .mj-notice.is-danger > i  { color: var(--mj-err); }
.primary-content .mj-notice.is-success { border-color: rgba(34, 197, 94, .45); }  .primary-content .mj-notice.is-success > i { color: var(--mj-ok); }

.primary-content .btn.mj-pill-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--mj-r-pill); font-size: 13px; font-weight: 700; white-space: nowrap; }
.primary-content .btn.mj-pill-btn.btn-default { border: 1px solid var(--mj-line); background: var(--mj-surface-2); color: var(--mj-text-2); }
.primary-content .btn.mj-pill-btn.btn-default:hover { border-color: var(--mj-line-strong); color: var(--mj-text); }
.primary-content .btn.mj-pill-btn--danger { color: #fca5a5; }
.primary-content .btn.mj-pill-btn--danger:hover { border-color: rgba(239, 68, 68, .5); color: #fecaca; }

/* ---- Listen (DataTables als Kartenzeilen) -------------------------------- */
.primary-content .mj-list.table-container { padding: 6px 18px 12px; border-color: var(--mj-line); border-radius: var(--mj-r-xl); background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); }
.primary-content .mj-list-table thead th { padding: 14px 12px 10px; }
.primary-content .mj-list-table tbody td { padding: 16px 12px; }
.primary-content .mj-list-table tbody tr:hover td { background: var(--mj-surface-3); }
.primary-content .mj-list-table tbody tr:hover td:first-child { border-radius: 12px 0 0 12px; }
.primary-content .mj-list-table tbody tr:hover td:last-child { border-radius: 0 12px 12px 0; }
.primary-content .mj-list-icon { width: 56px; }
.primary-content .mj-list-ico { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-right: 6px; border-radius: 10px; background: var(--mj-brand-a15); color: var(--mj-brand); font-size: 14px; vertical-align: middle; }
.primary-content .mj-list-ico.is-off { background: var(--mj-surface-3); color: var(--mj-muted); }
.primary-content .mj-list-main strong { color: var(--mj-text); font-size: 14.5px; }
.primary-content .mj-list-sub { display: block; margin-top: 3px; color: var(--mj-muted-2); font-size: 12.5px; }
.primary-content .mj-list-sub i { margin-right: 4px; color: var(--mj-brand); }
.primary-content .mj-list-price b { color: var(--mj-text); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.primary-content .mj-list-price small { display: block; color: var(--mj-muted-2); font-size: 12px; }
.primary-content .mj-list-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.primary-content .mj-list-status { white-space: nowrap; text-align: right; }
.primary-content .mj-list-go { margin-left: 10px; color: var(--mj-muted); font-size: 11px; }
.primary-content .mj-list-table tbody tr:hover .mj-list-go { color: var(--mj-brand); }
.primary-content .mj-list .dataTables_filter input { border-radius: var(--mj-r-pill); }
.primary-content .mj-list .dataTables_wrapper .listtable { padding-top: 6px; }
@media (max-width: 767.98px) { .primary-content .mj-list-icon { display: none; } }

/* ---- Guthaben ------------------------------------------------------------ */
.primary-content .mj-amount-wrap { position: relative; margin: 0 0 12px; }
.primary-content .mj-amount { height: auto; padding: 14px 18px; border-radius: 14px; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.primary-content .mj-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.primary-content .mj-quick-btn { padding: 7px 14px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-pill); background: var(--mj-surface-2); color: var(--mj-text-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.primary-content .mj-quick-btn:hover { border-color: var(--mj-line-strong); color: var(--mj-text); }
.primary-content .mj-quick-btn.is-active { border-color: var(--mj-brand); background: var(--mj-brand-a15); color: var(--mj-brand); }
.primary-content .mj-label { display: block; margin: 0 0 6px; color: var(--mj-muted-2); font-size: 12px; font-weight: 700; }
.primary-content .mj-form .form-control, .primary-content .mj-form .custom-select { height: auto; padding: 11px 14px; border: 1px solid var(--mj-line); border-radius: 12px; background-color: var(--mj-surface-3); color: var(--mj-text); }
.primary-content .mj-form .form-control:focus { border-color: var(--mj-brand); box-shadow: 0 0 0 3px var(--mj-brand-a20); }
.primary-content .btn.mj-submit { margin-top: 18px; padding: 14px 20px; border-radius: var(--mj-r-pill); font-size: 15px; font-weight: 800; box-shadow: 0 14px 30px -12px var(--mj-brand-a60); }
.primary-content .mj-form-actions { display: flex; gap: 8px; margin-top: 8px; }
.primary-content .mj-pw-row { display: flex; gap: 8px; }
.primary-content .mj-pw-row .form-control { flex: 1 1 auto; }

/* ---- Produktdetails ------------------------------------------------------ */
.primary-content .mj-pd-hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 14px;
    padding: 26px 28px;
    overflow: hidden;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-xl);
    background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%);
}
.primary-content .mj-pd-hero::before { content: ""; position: absolute; inset: -1px -1px auto -1px; height: 160px; background: radial-gradient(60% 90% at 20% 0%, var(--mj-brand-a20) 0%, transparent 70%); pointer-events: none; }
.primary-content .mj-pd-hero.product-status-suspended::before, .primary-content .mj-pd-hero.product-status-terminated::before, .primary-content .mj-pd-hero.product-status-cancelled::before { background: radial-gradient(60% 90% at 20% 0%, rgba(239, 68, 68, .18) 0%, transparent 70%); }
.primary-content .mj-pd-ident { position: relative; display: flex; align-items: center; gap: 18px; min-width: 0; }
.primary-content .mj-pd-icon { display: inline-grid; place-items: center; flex: 0 0 60px; width: 60px; height: 60px; border-radius: 18px; background: var(--mj-brand-a15); color: var(--mj-brand); font-size: 24px; }
.primary-content .mj-pd-group { display: block; color: var(--mj-muted-2); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.primary-content .mj-pd-hero h1 { margin: 2px 0 6px; color: var(--mj-text); font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; }
.primary-content .mj-pd-host { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--mj-brand-a40); border-radius: var(--mj-r-pill); background: var(--mj-brand-a10); color: var(--mj-brand); font-size: 12.5px; font-weight: 700; }
.primary-content .mj-pd-side { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.primary-content .label.status.mj-pd-status { padding: 8px 16px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.primary-content .mj-pd-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
@media (max-width: 767.98px) { .primary-content .mj-pd-side { align-items: flex-start; } }

.primary-content .mj-pd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 18px; }
.primary-content .mj-fact { padding: 14px 16px; border: 1px solid var(--mj-line); border-radius: 16px; background: var(--mj-surface); }
.primary-content .mj-fact span { display: block; margin-bottom: 4px; color: var(--mj-muted-2); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.primary-content .mj-fact b { display: block; color: var(--mj-text); font-size: 15px; font-weight: 800; }
.primary-content .mj-fact small { color: var(--mj-muted-2); font-size: 12px; }
.primary-content .mj-fact.is-danger { border-color: rgba(239, 68, 68, .45); }

.primary-content .mj-pd-hook:empty { display: none; }

/* Reiter */
.primary-content .mj-tabs.nav-tabs { gap: 6px; margin: 0 0 -1px; padding: 0 6px; border: 0; }
.primary-content .mj-tabs .nav-link { padding: 10px 16px; border: 1px solid transparent; border-radius: 12px 12px 0 0; background: transparent; color: var(--mj-muted-2); font-size: 13.5px; font-weight: 700; }
.primary-content .mj-tabs .nav-link:hover { color: var(--mj-text); background: var(--mj-surface-2); }
.primary-content .mj-tabs .nav-link.active { border-color: var(--mj-line) var(--mj-line) transparent; background: linear-gradient(180deg, #121216 0%, #121216 100%); color: var(--mj-brand); }
.primary-content .mj-tab-content { padding: 22px 24px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-xl); background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); }
.primary-content .mj-tab-content.product-details-tab-container { border-top-left-radius: 0; }
.primary-content .mj-pd-links { margin: 14px 0 0; display: flex; gap: 8px; }
.primary-content .mj-module { margin-top: 14px; text-align: left; }
.primary-content .mj-usage { display: flex; flex-wrap: wrap; gap: 24px; }
.primary-content .mj-usage-item { flex: 1 1 200px; text-align: center; }
.primary-content .mj-usage-item h4 { margin: 0 0 8px; color: var(--mj-text); font-size: 14px; font-weight: 800; }
.primary-content .mj-usage-item p { margin: 6px 0 0; color: var(--mj-muted-2); font-size: 13px; }

/* Downloads und Zusatzprodukte */
.primary-content .mj-dl-list, .primary-content .mj-addon-list { display: flex; flex-direction: column; gap: 10px; }
.primary-content .mj-dl { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--mj-line); border-radius: 14px; background: var(--mj-surface); }
.primary-content .mj-dl b { color: var(--mj-text); }
.primary-content .mj-dl p { margin: 2px 0 0; color: var(--mj-muted-2); font-size: 13px; }
.primary-content .mj-addon { padding: 16px 18px; border: 1px solid var(--mj-line); border-radius: 16px; background: var(--mj-surface); }
.primary-content .mj-addon-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.primary-content .mj-addon-head b { color: var(--mj-text); font-size: 14.5px; }
.primary-content .mj-addon-actions { margin-top: 10px; }
.primary-content .mj-addon-actions:empty { display: none; }

/* ============================================================================
   Feinschliff nach erster Sichtung (13.09.): Reiter als eine Pillen-Reihe,
   Kacheln gleichmaessig, Listen linksbuendig, Seitenleiste im Kartenlook
   ========================================================================== */

/* Reiter: eine Reihe, mittig, bei Platzmangel seitlich scrollbar */
.primary-content .mj-pd-tabs { margin-top: 4px; }
.primary-content .mj-tabs.nav-tabs { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 0 12px; padding: 6px; overflow-x: auto; border: 1px solid var(--mj-line); border-radius: var(--mj-r-pill); background: var(--mj-surface); scrollbar-width: none; }
.primary-content .mj-tabs.nav-tabs::-webkit-scrollbar { display: none; }
.primary-content .mj-tabs .nav-item { flex: 1 1 auto; }
.primary-content .mj-tabs .nav-link { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: var(--mj-r-pill); background: transparent; color: var(--mj-muted-2); font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-align: center; }
.primary-content .mj-tabs .nav-link i { font-size: 12px; }
.primary-content .mj-tabs .nav-link:hover { background: var(--mj-surface-3); color: var(--mj-text); }
.primary-content .mj-tabs .nav-link.active { border: 0; background: var(--mj-brand); color: var(--mj-on-brand); box-shadow: 0 8px 20px -10px var(--mj-brand-a60); }
.primary-content .mj-tab-content, .primary-content .mj-tab-content.product-details-tab-container { border-radius: var(--mj-r-xl); }
.primary-content .responsive-tabs-sm-connector { display: none; }

/* Kacheln: gleich breit, Label einzeilig, Akzentlinie oben wie in der Kasse */
.primary-content .mj-pd-facts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.primary-content .mj-fact { position: relative; overflow: hidden; padding: 16px 18px 14px; }
.primary-content .mj-fact::after { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--mj-brand-a60), transparent); }
.primary-content .mj-fact span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.primary-content .mj-pd-hero::after { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--mj-brand), transparent); }
.primary-content .mj-pd-side { align-items: flex-end; }
.primary-content .mj-pd-actions { flex-direction: row; }

/* Listen: links ausgerichtet, Inhalt mittig zur Zeile, Hostname einzeilig */
.primary-content .mj-list-table thead th,
.primary-content .mj-list-table tbody td { text-align: left !important; vertical-align: middle; }
.primary-content .mj-list-table th.text-center, .primary-content .mj-list-table td.text-center { text-align: left !important; }
.primary-content .mj-list-main { display: flex; align-items: center; gap: 10px; }
.primary-content .mj-list-main strong { white-space: nowrap; }
.primary-content .mj-list-main .mj-list-sub { margin: 0; white-space: nowrap; }
.primary-content .mj-list-table td.mj-list-main { display: table-cell; }
.primary-content .mj-list-table td.mj-list-main > * { vertical-align: middle; }
.primary-content .mj-list-table td.mj-list-main strong { display: inline-block; }
.primary-content .mj-list-table td.mj-list-main .mj-list-sub { display: block; margin-top: 3px; }
.primary-content .mj-list-price { white-space: nowrap; }
.primary-content .mj-list-price small { display: inline; margin-left: 4px; }
.primary-content .mj-list-status { text-align: right !important; }
.primary-content .mj-list-status .label.status { vertical-align: middle; }
.primary-content .mj-list .dataTables_wrapper .dataTables_info { padding-top: 8px; }
.primary-content .mj-list .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: var(--mj-r-pill); }
.primary-content .mj-list .dataTables_length select { border-radius: var(--mj-r-pill); }

/* Status-Pillen: Text mittig, gleiche Hoehe */
.primary-content .label.status { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 12px; line-height: 1; }

/* Seitenleiste im Kartenlook */
body .sidebar .card, body .sidebar .card-sidebar { margin-bottom: 14px; border: 1px solid var(--mj-line); border-radius: 18px; background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); overflow: hidden; }
body .sidebar .card-header { padding: 12px 16px; border-bottom: 1px solid var(--mj-line-soft); background: transparent; }
body .sidebar .card-title, body .sidebar .card-sidebar .panel-title { color: var(--mj-muted-2); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
body .sidebar .card-body { padding: 14px 16px; color: var(--mj-text-2); font-size: 13.5px; line-height: 1.55; }
body .sidebar .list-group { padding: 6px; }
body .sidebar .list-group-item { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--mj-text-2); font-size: 13.5px; font-weight: 600; }
body .sidebar .list-group-item:hover { background: var(--mj-surface-3); color: var(--mj-text); }
body .sidebar .list-group-item.active, body .sidebar .list-group-item.active:hover { background: var(--mj-brand-a15); color: var(--mj-brand); }
body .sidebar .list-group-item.active::before { display: none; }
body .sidebar .list-group-item .badge { margin-left: auto; min-width: 22px; padding: 3px 7px; border-radius: var(--mj-r-pill); background: var(--mj-surface-3); color: var(--mj-text-2); font-size: 11px; }
body .sidebar .list-group-item.active .badge { background: var(--mj-brand); color: var(--mj-on-brand); }
body .sidebar .card-minimise { color: var(--mj-muted-2); }

/* Seitenleiste, Fusszeile mit Knoepfen ("Alle bezahlen" / "Guthaben hinzufuegen"):
   WHMCS setzt float-left/right, in der schmalen Spalte rutscht das schief.
   Untereinander, volle Breite, gleiche Hoehe. */
body .sidebar .card-footer { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
body .sidebar .card-footer .btn,
body .sidebar .card-footer .btn.btn-sm,
body .sidebar .card-footer .btn-block { display: inline-flex; align-items: center; justify-content: center; gap: 6px; float: none !important; width: 100%; margin: 0; padding: 9px 14px; border-radius: var(--mj-r-pill); font-size: 13px; font-weight: 700; }
body .sidebar .card-footer .btn-success { border: 1px solid var(--mj-brand); background: var(--mj-brand); color: var(--mj-on-brand); }
body .sidebar .card-footer .btn-default { border: 1px solid var(--mj-line); background: var(--mj-surface-3); color: var(--mj-text-2); }
body .sidebar .card-footer .btn-default:hover { border-color: var(--mj-line-strong); color: var(--mj-text); }
body .sidebar .card-footer::after { display: none; }


/* ---- Zahlung eingegangen (/bezahlt, site/bezahlt.tpl) -------------------- */
.mj-paid-page { padding: 40px 0 60px; }
.mj-paid { position: relative; max-width: 760px; margin: 0 auto; padding: 44px 40px 34px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-xl); background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); text-align: center; overflow: hidden; }
.mj-paid::before { content: ""; position: absolute; inset: -1px -1px auto -1px; height: 220px; background: radial-gradient(60% 90% at 50% 0%, rgba(34, 197, 94, .18) 0%, transparent 70%); pointer-events: none; }
.mj-paid > * { position: relative; }
.mj-paid-icon { display: inline-grid; place-items: center; width: 84px; height: 84px; margin-bottom: 18px; border-radius: 50%; background: rgba(34, 197, 94, .18); color: var(--mj-ok); font-size: 36px; box-shadow: 0 0 0 12px rgba(34, 197, 94, .06); }
.mj-paid-eyebrow { display: block; margin-bottom: 6px; color: var(--mj-ok); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mj-paid h1 { margin: 0 0 10px; color: var(--mj-text); font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; }
.mj-paid-lead { max-width: 540px; margin: 0 auto 24px; color: var(--mj-text-2); font-size: 15px; line-height: 1.6; }
.mj-paid-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 24px; }
.mj-paid-fact { padding: 14px 12px; border: 1px solid var(--mj-line); border-radius: 14px; background: var(--mj-surface); }
.mj-paid-fact span { display: block; margin-bottom: 4px; color: var(--mj-muted-2); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mj-paid-fact b { display: block; color: var(--mj-text); font-size: 15px; font-weight: 800; }
.mj-paid-sub { margin: 0 0 10px; color: var(--mj-muted-2); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.mj-paid-services { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; text-align: left; }
.mj-paid-svc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--mj-line); border-radius: 14px; background: var(--mj-surface); color: var(--mj-text-2); text-decoration: none; }
.mj-paid-svc:hover { border-color: var(--mj-brand-a60); color: var(--mj-text); text-decoration: none; }
.mj-paid-svc > i { display: inline-grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: var(--mj-brand-a15); color: var(--mj-brand); }
.mj-paid-svc > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.mj-paid-svc b { display: block; color: var(--mj-text); font-size: 14px; }
.mj-paid-svc small { display: block; color: var(--mj-muted-2); font-size: 12px; }
.mj-paid-note { display: flex; gap: 8px; justify-content: center; margin: 0 0 22px; color: var(--mj-muted-2); font-size: 12.5px; }
.mj-paid-note i { margin-top: 2px; color: var(--mj-brand); }
.mj-paid-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mj-paid-actions .btn.mj-pill-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: var(--mj-r-pill); font-size: 13.5px; font-weight: 700; }
.mj-paid-actions .btn.mj-pill-btn.btn-default { border: 1px solid var(--mj-line); background: var(--mj-surface-2); color: var(--mj-text-2); }
.mj-paid-actions .btn.mj-pill-btn.btn-default:hover { border-color: var(--mj-line-strong); color: var(--mj-text); }
.mj-paid-foot { margin: 18px 0 0; font-size: 13px; }
.mj-paid-foot a { color: var(--mj-muted-2); }

/* Kopfkarte: Titel links, Status oben rechts, Aktionen darunter - unabhaengig
   davon, wie viele Knoepfe oder Marken es sind (vorher rutschte die rechte
   Spalte bei langen Knopftexten unter den Titel). */
.primary-content .mj-pd-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px 18px; }
.primary-content .mj-pd-side { display: contents; }
.primary-content .mj-pd-badges { position: relative; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.primary-content .label.status.mj-pd-status--cancel { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .12); color: #fcd34d; }
.primary-content .mj-pd-actions { position: relative; grid-column: 1 / -1; justify-content: flex-start; }
@media (max-width: 575.98px) {
    .primary-content .mj-pd-hero { grid-template-columns: minmax(0, 1fr); }
    .primary-content .mj-pd-badges { justify-content: flex-start; order: -1; }
}

/* Meine Dienste: beendete Dienste ein-/ausblenden */
.primary-content .mj-list .btn.mj-ended-toggle { margin: 14px 0 2px; color: var(--mj-muted-2); }
.primary-content .mj-list .btn.mj-ended-toggle:hover, .primary-content .mj-list .btn.mj-ended-toggle[aria-pressed="true"] { color: var(--mj-text); }


/* ---- Quelle: 32-invoice.css ---------------------------------------- */
/* ============================================================================
   32 - Rechnungsansicht (templates/mamjahn/viewinvoice.tpl)
   Eigenstaendige Seite ohne Kopf-/Fussleiste, gleicher Kartenstil wie die Kasse.
   ========================================================================== */

body.mj-inv-page {
    margin: 0;
    background: #09090b;
    color: var(--mj-text-2);
    font-family: var(--mj-font);
    -webkit-font-smoothing: antialiased;
}

/* Schmale Kopfzeile: Logo links, Werkzeuge rechts */
.mj-inv-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 24px;
}
.mj-inv-brand img { height: 30px; }
.mj-inv-tools { display: flex; gap: 8px; }
.mj-inv-tools .btn { border-radius: var(--mj-r-pill); font-weight: 700; }
.mj-inv-tools .btn-default { border: 1px solid var(--mj-line); background: var(--mj-surface-2); color: var(--mj-text-2); }
.mj-inv-tools .btn-default:hover { border-color: var(--mj-line-strong); color: var(--mj-text); }

.mj-inv { max-width: 1180px; margin: 0 auto; padding: 8px 24px 40px; }

/* Rueckmeldung nach Zahlung */
.mj-inv-alert {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 1px solid var(--mj-line);
    border-radius: 16px;
    background: var(--mj-surface-2);
}
.mj-inv-alert i { margin-top: 2px; font-size: 18px; color: var(--mj-brand); }
.mj-inv-alert b { display: block; color: var(--mj-text); }
.mj-inv-alert span { font-size: 13.5px; }
.mj-inv-alert.is-success { border-color: rgba(34, 197, 94, .4); } .mj-inv-alert.is-success i { color: var(--mj-ok); }
.mj-inv-alert.is-danger  { border-color: rgba(239, 68, 68, .4); }  .mj-inv-alert.is-danger i  { color: var(--mj-err); }

/* Kopf */
.mj-inv-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 6px 0 24px; }
.mj-inv-head h1 { margin: 0 0 10px; color: var(--mj-text); font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.mj-inv-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--mj-muted-2); font-size: 13px; }
.mj-inv-meta i { margin-right: 4px; color: var(--mj-brand); }
.mj-inv-meta b { color: var(--mj-text); font-weight: 700; }

.mj-inv-status span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    background: var(--mj-surface-2);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.mj-inv-status span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(255, 255, 255, .06); }
.mj-inv-status .paid   { border-color: rgba(34, 197, 94, .4); color: var(--mj-ok); }
.mj-inv-status .unpaid { border-color: rgba(239, 68, 68, .4); color: var(--mj-err); }
.mj-inv-status .collections { border-color: rgba(245, 158, 11, .4); color: var(--mj-warn); }

/* Zwei Spalten */
.mj-inv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.mj-inv-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.mj-inv-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }
.mj-inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 991.98px) {
    .mj-inv-grid { grid-template-columns: 1fr; }
    .mj-inv-side { position: static; }
}
@media (max-width: 575.98px) { .mj-inv-parties { grid-template-columns: 1fr; } }

/* Karte */
.mj-inv-card {
    position: relative;
    padding: 22px 24px;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-xl);
    background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}
.mj-inv-card h2 { margin: 0 0 14px; color: var(--mj-text); font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.mj-inv-card h2 i { margin-right: 6px; color: var(--mj-brand); }
.mj-inv-card address { margin: 0; color: var(--mj-text-2); font-size: 13.5px; line-height: 1.7; }
.mj-inv-card address b { color: var(--mj-text); }
.mj-inv-notes { color: var(--mj-text-2); font-size: 13.5px; line-height: 1.6; }
.mj-inv-foot { margin: 10px 0 0; color: var(--mj-muted-2); font-size: 12px; }
.mj-inv-empty { color: var(--mj-muted); text-align: center; }

/* Tabellen */
.mj-inv-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mj-inv-table th {
    padding: 0 10px 10px 0;
    border-bottom: 1px solid var(--mj-line);
    color: var(--mj-muted-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
}
.mj-inv-table td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--mj-line-soft); color: var(--mj-text-2); vertical-align: top; }
.mj-inv-table td:last-child, .mj-inv-table th:last-child { padding-right: 0; }
.mj-inv-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mj-inv-table tbody td.num { color: var(--mj-text); font-weight: 700; }
.mj-inv-table td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.mj-inv-table td sup { color: var(--mj-brand); }
.mj-inv-table tfoot td { padding: 8px 10px 8px 0; border: 0; color: var(--mj-muted-2); text-align: right; }
.mj-inv-table tfoot tr:first-child td { padding-top: 14px; }
.mj-inv-table tfoot td.num { color: var(--mj-text); font-weight: 700; }
.mj-inv-table tfoot tr.is-total td { padding-top: 12px; border-top: 1px solid var(--mj-line); color: var(--mj-text); font-size: 15px; font-weight: 800; }
.mj-inv-table tfoot tr.is-total td.num { color: var(--mj-brand); font-size: 1.25rem; letter-spacing: -.02em; }
.mj-inv-table a { color: var(--mj-brand); }

/* Rechte Spalte: Betrag und Bezahlen */
.mj-inv-pay { overflow: hidden; }
.mj-inv-pay::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--mj-brand), transparent); }
.mj-inv-eyebrow { display: block; color: var(--mj-muted-2); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mj-inv-amount { display: block; margin: 6px 0 8px; color: var(--mj-brand); font-size: 2.4rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.mj-inv-due { display: flex; align-items: center; gap: 6px; color: var(--mj-muted-2); font-size: 13px; }
.mj-inv-due b { color: var(--mj-text); }
.mj-inv-due.is-paid { color: var(--mj-ok); font-weight: 700; }
.mj-inv-gateway { margin: 18px 0 0; }
.mj-inv-gateway label, .mj-inv-credit label { display: block; margin: 0 0 6px; color: var(--mj-muted-2); font-size: 12px; font-weight: 700; }
.mj-inv-page .custom-select,
.mj-inv-page .form-control {
    height: auto;
    padding: 10px 14px;
    border: 1px solid var(--mj-line);
    border-radius: 12px;
    background-color: var(--mj-surface-3);
    color: var(--mj-text);
    font-size: 14px;
}
.mj-inv-page .custom-select { padding-right: 34px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23a1a1aa' stroke-width='1.6' d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.mj-inv-page .form-control:focus, .mj-inv-page .custom-select:focus { border-color: var(--mj-brand); box-shadow: 0 0 0 3px var(--mj-brand-a20); outline: 0; }
.mj-inv-paybtn { margin-top: 16px; }
.mj-inv-paybtn form { margin: 0; }
.mj-inv-paybtn .btn, .mj-inv-paybtn input[type="submit"], .mj-inv-paybtn button {
    display: block;
    width: 100%;
    padding: 14px 20px;
    border: 0;
    border-radius: var(--mj-r-pill);
    background: var(--mj-brand);
    color: var(--mj-on-brand);
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 14px 30px -12px var(--mj-brand-a60);
    cursor: pointer;
}
.mj-inv-paybtn .btn:hover, .mj-inv-paybtn input[type="submit"]:hover { filter: brightness(1.08); color: var(--mj-on-brand); }
.mj-inv-paybtn img { max-width: 100%; }

/* Guthaben */
.mj-inv-credit p { margin: 0 0 12px; color: var(--mj-text-2); font-size: 13px; line-height: 1.55; }
.mj-inv-credit p b { color: var(--mj-text); }
.mj-inv-credit-row { display: flex; gap: 8px; }
.mj-inv-credit-row .form-control { flex: 1 1 auto; min-width: 0; }
.mj-inv-credit-row .btn { flex: 0 0 auto; padding: 10px 16px; border: 0; border-radius: 12px; background: var(--mj-brand); color: var(--mj-on-brand); font-weight: 700; white-space: nowrap; }
.mj-inv-credit-row .btn:hover { filter: brightness(1.08); color: var(--mj-on-brand); }

.mj-inv-download { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px dashed var(--mj-line); border-radius: 14px; color: var(--mj-text-2); font-size: 13px; font-weight: 700; }
.mj-inv-download:hover { border-color: var(--mj-brand-a60); color: var(--mj-brand); text-decoration: none; }
.mj-inv-back { margin: 26px 0 0; text-align: center; font-size: 13px; }
.mj-inv-back a { color: var(--mj-muted-2); }
.mj-inv-back a:hover { color: var(--mj-text); }
.mj-inv-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 10px 0 0; font-size: 12px; }
.mj-inv-legal a { color: var(--mj-muted); }
.mj-inv-legal a:hover { color: var(--mj-text); }

/* QR (Zahlungscode aus Modulen) */
.mj-inv-qr { text-align: center; }
.mj-inv-qr img { max-width: 220px; border-radius: 12px; background: #fff; padding: 8px; }

/* Druck: heller Hintergrund, keine Karten-Deko */
@media print {
    body.mj-inv-page { background: #fff; color: #222; }
    .mj-inv-card { border-color: #ddd; background: #fff; box-shadow: none; }
    .mj-inv-card h2, .mj-inv-head h1, .mj-inv-table td, .mj-inv-table tfoot td, .mj-inv-card address { color: #111; }
    .mj-inv-grid { grid-template-columns: 1fr; }
}


/* ---- Quelle: 33-support.css ---------------------------------------- */
/* ============================================================================
   33 - Support (Block 2): Tickets, Ticket oeffnen, Ticketansicht (Chat),
   Wissensdatenbank, Ankuendigungen, Downloads, Netzwerkstatus, Kontakt
   ========================================================================== */

/* ---- Gemeinsam --------------------------------------------------------- */
.primary-content .mj-steps--page { display: flex; align-items: center; margin: -6px 0 22px; padding: 0; list-style: none; color: var(--mj-muted-2); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.primary-content .mj-steps--page li { display: inline-flex; align-items: center; gap: 8px; }
.primary-content .mj-steps--page li + li::before { content: ""; display: block; width: 36px; height: 1px; margin: 0 12px; background: var(--mj-line); }
.primary-content .mj-steps--page li span { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--mj-line-strong); border-radius: 50%; font-size: 11px; letter-spacing: 0; }
.primary-content .mj-steps--page li.is-active { color: var(--mj-text); }
.primary-content .mj-steps--page li.is-active span { border-color: var(--mj-brand); background: var(--mj-brand); color: var(--mj-on-brand); box-shadow: 0 0 0 4px var(--mj-brand-a20); }
.primary-content .mj-steps--page li.is-done span { border-color: var(--mj-brand-a60); color: var(--mj-brand); }

.primary-content .mj-two--wide { grid-template-columns: minmax(0, 1fr) 340px; }
.primary-content .mj-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 575.98px) { .primary-content .mj-grid-2 { grid-template-columns: 1fr; } }
.primary-content .mj-form .form-group { margin-bottom: 16px; }
.primary-content .mj-form textarea.form-control { border-radius: 14px; }
.primary-content .mj-form .custom-file-label { height: auto; padding: 10px 14px; border: 1px solid var(--mj-line); border-radius: 12px 0 0 12px; background: var(--mj-surface-3); color: var(--mj-muted-2); }
.primary-content .mj-form .custom-file-label::after { height: auto; padding: 10px 14px; border-left: 1px solid var(--mj-line); border-radius: 0; background: var(--mj-surface-2); color: var(--mj-text-2); }
.primary-content .mj-form .input-group-append .btn { border: 1px solid var(--mj-line); border-radius: 0 12px 12px 0; background: var(--mj-surface-2); color: var(--mj-text-2); }
.primary-content .mj-form .input-group-append .btn:hover { color: var(--mj-text); }

.primary-content .mj-crumb { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--mj-muted-2); font-size: 12.5px; font-weight: 700; }
.primary-content .mj-crumb:hover { color: var(--mj-brand); text-decoration: none; }
.primary-content .mj-article-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; color: var(--mj-muted-2); font-size: 13px; }
.primary-content .mj-article-meta i { margin-right: 4px; color: var(--mj-brand); }
.primary-content .mj-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-pill); background: var(--mj-surface-2); color: var(--mj-text-2); font-size: 11.5px; font-weight: 700; }
.primary-content .mj-tag--danger { border-color: rgba(239, 68, 68, .45); color: #fca5a5; }
.primary-content .mj-tag--warning { border-color: rgba(245, 158, 11, .45); color: #fbbf24; }
.primary-content .mj-tag--ok { border-color: rgba(34, 197, 94, .45); color: var(--mj-ok); }
.primary-content .mj-tag--info { border-color: var(--mj-brand-a40); color: var(--mj-brand); }
.primary-content .mj-empty { padding: 26px 16px; color: var(--mj-muted); text-align: center; }

.primary-content .mj-search { position: relative; display: flex; gap: 8px; margin: 0 0 20px; }
.primary-content .mj-search > i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--mj-muted-2); pointer-events: none; }
.primary-content .mj-search .form-control { height: auto; padding: 13px 16px 13px 44px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-pill); background: var(--mj-surface-2); color: var(--mj-text); font-size: 14.5px; }
.primary-content .mj-search .form-control:focus { border-color: var(--mj-brand); box-shadow: 0 0 0 3px var(--mj-brand-a20); }
.primary-content .mj-search .btn { padding: 0 22px; }

.primary-content .mj-pager .pagination { gap: 6px; }
.primary-content .mj-pager .page-link { border: 1px solid var(--mj-line); border-radius: var(--mj-r-pill); background: var(--mj-surface-2); color: var(--mj-text-2); font-size: 13px; font-weight: 700; }
.primary-content .mj-pager .page-item.active .page-link { border-color: var(--mj-brand); background: var(--mj-brand); color: var(--mj-on-brand); }
.primary-content .mj-pager .page-item.disabled .page-link { opacity: .4; }

/* ---- Tickets: Liste ------------------------------------------------------- */
.primary-content .mj-list-dept { white-space: nowrap; color: var(--mj-text-2); font-weight: 600; }
.primary-content .mj-ticket-link { color: inherit; text-decoration: none; }
.primary-content .mj-ticket-link:hover { text-decoration: none; }
.primary-content .ticket-subject.unread::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--mj-brand); vertical-align: middle; }
.primary-content .mj-list-status-left { white-space: nowrap; }

/* ---- Ticket oeffnen: Abteilungen ----------------------------------------- */
.primary-content .mj-dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.primary-content .mj-dept { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-xl); background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); color: var(--mj-text-2); text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.primary-content .mj-dept:hover { transform: translateY(-2px); border-color: var(--mj-brand-a60); color: var(--mj-text); text-decoration: none; }
.primary-content .mj-dept-icon { display: inline-grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; background: var(--mj-brand-a15); color: var(--mj-brand); font-size: 20px; }
.primary-content .mj-dept-body { flex: 1 1 auto; min-width: 0; }
.primary-content .mj-dept-body b { display: block; color: var(--mj-text); font-size: 15px; }
.primary-content .mj-dept-body small { display: block; margin-top: 2px; color: var(--mj-muted-2); font-size: 12.5px; line-height: 1.45; }
.primary-content .mj-dept-go { color: var(--mj-muted); }
.primary-content .mj-dept:hover .mj-dept-go { color: var(--mj-brand); }

.primary-content .mj-tips { margin-top: 6px; padding: 14px 16px; border: 1px dashed var(--mj-line); border-radius: 14px; color: var(--mj-text-2); font-size: 12.5px; line-height: 1.5; }
.primary-content .mj-tips b { display: block; margin-bottom: 6px; color: var(--mj-text); }
.primary-content .mj-tips ul { margin: 0; padding-left: 18px; }
.primary-content .mj-tips li { margin: 2px 0; }

.primary-content .mj-kbsuggest { margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--mj-brand-a40); border-radius: 16px; background: var(--mj-brand-a10); }
.primary-content .mj-kbsuggest h3 { margin: 0 0 4px; color: var(--mj-text); font-size: 14.5px; font-weight: 800; }
.primary-content .mj-kbsuggest h3 i { color: #fbbf24; margin-right: 6px; }
.primary-content .mj-kbsuggest p { margin: 0 0 10px; color: var(--mj-text-2); font-size: 13px; }

.primary-content .mj-done { text-align: center; padding: 40px 24px; }
.primary-content .mj-done-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 50%; background: rgba(34, 197, 94, .15); color: var(--mj-ok); font-size: 26px; }
.primary-content .mj-done h2 { margin: 0 0 8px; font-size: 1.3rem; }
.primary-content .mj-done h2 a { color: var(--mj-brand); }
.primary-content .mj-done p { max-width: 520px; margin: 0 auto 18px; color: var(--mj-text-2); }

/* ---- Ticketansicht: Chat ------------------------------------------------- */
.primary-content .mj-ticket-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 0 0 18px; padding: 22px 26px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-xl); background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); position: relative; overflow: hidden; }
.primary-content .mj-ticket-head::after { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--mj-brand), transparent); }
.primary-content .mj-ticket-no { display: inline-block; margin-bottom: 4px; color: var(--mj-brand); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.primary-content .mj-ticket-head h1 { margin: 0 0 10px; color: var(--mj-text); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.primary-content .mj-ticket-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--mj-muted-2); font-size: 13px; }
.primary-content .mj-ticket-meta i { margin-right: 4px; color: var(--mj-brand); }
.primary-content .mj-ticket-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.primary-content .mj-chat { display: flex; flex-direction: column; gap: 16px; margin: 0 0 18px; }
.primary-content .mj-msg { display: flex; gap: 12px; max-width: 88%; }
.primary-content .mj-msg.is-client { align-self: flex-end; flex-direction: row-reverse; }
.primary-content .mj-msg-avatar { display: inline-grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; margin-top: 4px; border-radius: 50%; background: var(--mj-surface-3); color: var(--mj-text-2); font-size: 15px; }
.primary-content .mj-msg.is-staff .mj-msg-avatar { background: var(--mj-brand-a15); color: var(--mj-brand); }
.primary-content .mj-msg-body { min-width: 0; padding: 14px 18px; border: 1px solid var(--mj-line); border-radius: 18px; background: var(--mj-surface); }
.primary-content .mj-msg.is-staff .mj-msg-body { border-color: var(--mj-brand-a40); background: linear-gradient(180deg, var(--mj-brand-a10), transparent 70%), var(--mj-surface); border-top-left-radius: 6px; }
.primary-content .mj-msg.is-client .mj-msg-body { border-top-right-radius: 6px; }
.primary-content .mj-msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 8px; font-size: 12.5px; }
.primary-content .mj-msg-head .posted-by-name { color: var(--mj-text); font-weight: 800; }
.primary-content .mj-msg-head .posted-on { margin-left: auto; color: var(--mj-muted-2); }
.primary-content .mj-msg-head .requestor-badge { padding: 2px 8px; border-radius: var(--mj-r-pill); background: var(--mj-surface-3); color: var(--mj-text-2); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.primary-content .mj-msg.is-staff .requestor-badge { background: var(--mj-brand-a20); color: var(--mj-brand); }
.primary-content .mj-msg-text { color: var(--mj-text-2); font-size: 14px; line-height: 1.6; word-break: break-word; }
.primary-content .mj-msg-text p:last-child { margin-bottom: 0; }
.primary-content .mj-msg-text pre, .primary-content .mj-msg-text code { background: var(--mj-surface-3); color: var(--mj-text); border-radius: 8px; }
.primary-content .mj-msg-text pre { padding: 12px 14px; }
.primary-content .mj-msg-ip { margin-top: 10px; color: var(--mj-muted); font-size: 11.5px; }
.primary-content .mj-msg-files { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--mj-line-soft); font-size: 12.5px; }
.primary-content .mj-msg-files b { color: var(--mj-text-2); }
.primary-content .mj-msg-files .attachment-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.primary-content .mj-file { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-pill); background: var(--mj-surface-2); color: var(--mj-text-2); font-size: 12px; font-weight: 600; }
.primary-content a.mj-file:hover { border-color: var(--mj-brand-a60); color: var(--mj-brand); text-decoration: none; }
.primary-content .mj-file.is-gone { opacity: .5; text-decoration: line-through; }
.primary-content .mj-msg-rating { margin-top: 10px; }
.primary-content .mj-reply { scroll-margin-top: 90px; }
@media (max-width: 767.98px) { .primary-content .mj-msg { max-width: 100%; } }

/* ---- Wissensdatenbank / Downloads --------------------------------------- */
.primary-content .mj-kb-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 0 0 20px; }
.primary-content .mj-kb-cat { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-xl); background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); color: var(--mj-text-2); text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.primary-content .mj-kb-cat:hover { transform: translateY(-2px); border-color: var(--mj-brand-a60); text-decoration: none; color: var(--mj-text); }
.primary-content .mj-kb-cat-icon { display: inline-grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; background: var(--mj-brand-a15); color: var(--mj-brand); font-size: 18px; }
.primary-content .mj-kb-cat-body { flex: 1 1 auto; min-width: 0; }
.primary-content .mj-kb-cat-body b { display: block; color: var(--mj-text); font-size: 14.5px; }
.primary-content .mj-kb-cat-body small { display: block; margin-top: 2px; color: var(--mj-muted-2); font-size: 12.5px; }
.primary-content .mj-kb-cat-count { flex: 0 0 auto; padding: 4px 10px; border-radius: var(--mj-r-pill); background: var(--mj-surface-3); color: var(--mj-text-2); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.primary-content .mj-kb-list { display: flex; flex-direction: column; }
.primary-content .mj-kb-item { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-top: 1px solid var(--mj-line-soft); color: var(--mj-text-2); text-decoration: none; }
.primary-content .mj-kb-item:first-child { border-top: 0; }
.primary-content .mj-kb-item:hover { color: var(--mj-text); text-decoration: none; }
.primary-content .mj-kb-item:hover .mj-list-go { color: var(--mj-brand); }
.primary-content .mj-kb-item > i:first-child { display: inline-grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; background: var(--mj-surface-3); color: var(--mj-brand); font-size: 13px; }
.primary-content .mj-kb-item > span { flex: 1 1 auto; min-width: 0; }
.primary-content .mj-kb-item b { display: block; color: var(--mj-text); font-size: 14px; }
.primary-content .mj-kb-item small { display: block; margin-top: 2px; color: var(--mj-muted-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.primary-content .mj-article { color: var(--mj-text-2); font-size: 15px; line-height: 1.7; }
.primary-content .mj-article h1, .primary-content .mj-article h2, .primary-content .mj-article h3, .primary-content .mj-article h4 { margin: 1.4em 0 .5em; color: var(--mj-text); font-weight: 800; letter-spacing: -.01em; }
.primary-content .mj-article h2 { font-size: 1.25rem; } .primary-content .mj-article h3 { font-size: 1.05rem; }
.primary-content .mj-article > :first-child { margin-top: 0; }
.primary-content .mj-article img { max-width: 100%; border-radius: 12px; }
.primary-content .mj-article pre { padding: 14px 16px; border-radius: 12px; background: var(--mj-surface-3); color: var(--mj-text); }
.primary-content .mj-article code { padding: 2px 6px; border-radius: 6px; background: var(--mj-surface-3); color: var(--mj-text); font-size: .9em; }
.primary-content .mj-article a { color: var(--mj-brand); }
.primary-content .mj-article table { width: 100%; border-collapse: collapse; }
.primary-content .mj-article td, .primary-content .mj-article th { padding: 8px 10px; border-bottom: 1px solid var(--mj-line-soft); }
.primary-content .mj-vote h2 { margin-bottom: 10px; }
.primary-content .mj-vote-row { display: flex; gap: 8px; }

/* ---- Ankuendigungen ------------------------------------------------------ */
.primary-content .mj-news { display: flex; flex-direction: column; gap: 14px; margin: 0 0 18px; }
.primary-content .mj-news-item { margin: 0; }
.primary-content .mj-news-date { margin-bottom: 6px; color: var(--mj-muted-2); font-size: 12.5px; font-weight: 700; }
.primary-content .mj-news-date i { margin-right: 4px; color: var(--mj-brand); }
.primary-content .mj-news-item h2 { margin: 0 0 10px; font-size: 1.25rem; }
.primary-content .mj-news-item h2 a { color: var(--mj-text); }
.primary-content .mj-news-item h2 a:hover { color: var(--mj-brand); text-decoration: none; }
.primary-content .mj-news-text { color: var(--mj-text-2); font-size: 14px; line-height: 1.6; }
.primary-content .mj-news-text p:last-child { margin-bottom: 0; }
.primary-content .mj-news-foot { display: flex; gap: 8px; margin-top: 14px; }

/* ---- Netzwerkstatus ------------------------------------------------------ */
.primary-content .mj-status-table th, .primary-content .mj-status-table td { font-size: 13.5px; }
.primary-content .mj-status-table td b { color: var(--mj-text); }
.primary-content .mj-issue { margin: 0 0 14px; border-left: 3px solid var(--mj-brand-a60); }
.primary-content .mj-issue.is-critical { border-left-color: var(--mj-err); }
.primary-content .mj-issue.is-high { border-left-color: var(--mj-warn); }
.primary-content .mj-issue-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.primary-content .mj-issue-status { display: block; margin-bottom: 2px; color: var(--mj-muted-2); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.primary-content .mj-issue-head h2 { margin: 0; font-size: 1.15rem; }
.primary-content .mj-issue-affect { margin: 0 0 8px; color: var(--mj-text-2); font-size: 13.5px; }
.primary-content .mj-issue-affect b { color: var(--mj-text); }
.primary-content .mj-issue-text { margin-top: 12px; color: var(--mj-text-2); font-size: 14px; line-height: 1.6; }
.primary-content .mj-issue .mj-notice { margin: 12px 0 0; }

/* ---- Kontakt ------------------------------------------------------------- */
.primary-content .mj-contact-ways { display: flex; flex-direction: column; gap: 8px; }
.primary-content .mj-contact-way { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--mj-line); border-radius: 14px; background: var(--mj-surface-2); color: var(--mj-text-2); text-decoration: none; }
.primary-content .mj-contact-way:hover { border-color: var(--mj-brand-a60); color: var(--mj-text); text-decoration: none; }
.primary-content .mj-contact-way > i { display: inline-grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: var(--mj-brand-a15); color: var(--mj-brand); }
.primary-content .mj-contact-way b { display: block; color: var(--mj-text); font-size: 13.5px; }
.primary-content .mj-contact-way small { display: block; color: var(--mj-muted-2); font-size: 12px; }

/* ---- Feedback ------------------------------------------------------------ */
.primary-content .mj-feedback-block { margin: 18px 0; padding: 16px 18px; border: 1px solid var(--mj-line); border-radius: 16px; background: var(--mj-surface); }
.primary-content .mj-rate-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.primary-content .mj-rate-label { margin: 0 6px; color: var(--mj-muted-2); font-size: 12px; font-weight: 700; }
.primary-content .mj-rate { position: relative; margin: 0; cursor: pointer; }
.primary-content .mj-rate input { position: absolute; opacity: 0; }
.primary-content .mj-rate span { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--mj-line); border-radius: 50%; background: var(--mj-surface-2); color: var(--mj-text-2); font-size: 13px; font-weight: 700; }
.primary-content .mj-rate input:checked + span { border-color: var(--mj-brand); background: var(--mj-brand); color: var(--mj-on-brand); }
.primary-content .mj-rate:hover span { border-color: var(--mj-brand-a60); }


/* ---- Betroffene Dienste: Status farbig ----------------------------------- */
.primary-content .mj-svc-select option.is-ok { color: #4ade80; }
.primary-content .mj-svc-select option.is-warn { color: #fbbf24; }
.primary-content .mj-svc-select option.is-err { color: #f87171; }
.primary-content .mj-svc-select option.is-muted { color: #a1a1aa; }
.primary-content .mj-svc-legend { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--mj-text-2); }
.primary-content .mj-svc-legend b { color: var(--mj-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.primary-content .mj-svc-legend small { padding: 2px 8px; border-radius: var(--mj-r-pill); background: var(--mj-surface-3); font-weight: 700; }
.primary-content .mj-svc-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--mj-muted); box-shadow: 0 0 0 3px rgba(255, 255, 255, .06); }
.primary-content .mj-svc-legend.is-ok .mj-svc-dot { background: var(--mj-ok); } .primary-content .mj-svc-legend.is-ok small { color: var(--mj-ok); }
.primary-content .mj-svc-legend.is-warn .mj-svc-dot { background: var(--mj-warn); } .primary-content .mj-svc-legend.is-warn small { color: #fbbf24; }
.primary-content .mj-svc-legend.is-err .mj-svc-dot { background: var(--mj-err); } .primary-content .mj-svc-legend.is-err small { color: #f87171; }

/* ---- Support-Zeiten ------------------------------------------------------ */
.primary-content .mj-hours { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--mj-brand-a40); border-radius: 14px; background: var(--mj-brand-a10); color: var(--mj-text-2); font-size: 12.5px; line-height: 1.5; }
.primary-content .mj-hours > i { margin-top: 2px; color: var(--mj-brand); font-size: 16px; }
.primary-content .mj-hours b { display: block; color: var(--mj-text); font-size: 13px; }
.primary-content .mj-hours--wide { margin: 0 0 18px; padding: 16px 20px; font-size: 13.5px; }


/* ---- Quelle: 34-account.css ---------------------------------------- */
/* ============================================================================
   34 - Konto (Block 3): Meine Daten, Kontakte, Zahlungsmethoden, Sicherheit,
   Benutzer, Profil, Passwort, E-Mails
   ========================================================================== */

/* Formulare */
.primary-content .mj-account .mj-card { margin-bottom: 18px; }
.primary-content .mj-span-2 { grid-column: 1 / -1; }
.primary-content .mj-form select.form-control:not(.custom-select) { height: auto; padding: 11px 14px; border: 1px solid var(--mj-line); border-radius: 12px; background-color: var(--mj-surface-3); color: var(--mj-text); }
.primary-content .mj-form .form-control[disabled] { background-color: var(--mj-surface-2); color: var(--mj-muted); opacity: 1; }
.primary-content .mj-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 8px; margin: 4px 0 0; padding: 12px 16px; border: 1px solid var(--mj-line); border-radius: 16px; background: rgba(18, 18, 22, .92); backdrop-filter: blur(10px); }
.primary-content .mj-page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.primary-content .mj-subhead { margin: 18px 0 8px; color: var(--mj-muted-2); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.primary-content .mj-tiplist { margin: 0 0 14px; padding-left: 18px; color: var(--mj-text-2); font-size: 13px; line-height: 1.55; }
.primary-content .mj-tiplist li { margin: 4px 0; }

/* Haekchen-Zeilen */
.primary-content .mj-checks { display: flex; flex-direction: column; gap: 6px; }
.primary-content .mj-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--mj-line); border-radius: 12px; background: var(--mj-surface); color: var(--mj-text-2); font-size: 13.5px; font-weight: 600; line-height: 1.45; cursor: pointer; transition: border-color .15s ease; }
.primary-content .mj-check:hover { border-color: var(--mj-line-strong); color: var(--mj-text); }
.primary-content .mj-check input { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--mj-brand); cursor: pointer; }
.primary-content .mj-check input:checked + span { color: var(--mj-text); }
.primary-content .mj-check--desc b { display: block; color: var(--mj-text); }
.primary-content .mj-check--desc small { display: block; margin-top: 2px; color: var(--mj-muted-2); font-size: 12.5px; font-weight: 500; }
.primary-content .mj-checks--radio { flex-direction: row; flex-wrap: wrap; margin-bottom: 10px; }
.primary-content .mj-checks--radio .mj-check { flex: 1 1 auto; }
.primary-content .mj-perm-list { margin-bottom: 14px; }
.primary-content .mj-perm-list.w-hidden { display: none; }
.primary-content .mj-switch { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 12px; color: var(--mj-text); font-weight: 700; }

/* Kontakte: Auswahl */
.primary-content .mj-contact-pick { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--mj-line); border-radius: 16px; background: var(--mj-surface); }
.primary-content .mj-contact-pick-row { display: flex; gap: 8px; }
.primary-content .mj-contact-pick-row .custom-select { flex: 1 1 auto; height: auto; padding: 10px 34px 10px 14px; border: 1px solid var(--mj-line); border-radius: 12px; background-color: var(--mj-surface-3); color: var(--mj-text); }
.primary-content .mj-danger-zone { border-color: rgba(239, 68, 68, .35); }
.primary-content .mj-danger-zone h2 i { color: var(--mj-err); }

/* Zahlungsmethoden */
.primary-content .mj-pay-list { display: flex; flex-direction: column; gap: 12px; }
.primary-content .mj-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-xl); background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); }
.primary-content .mj-pay.is-default { border-color: var(--mj-brand-a60); }
.primary-content .mj-pay-icon { display: inline-grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 14px; background: var(--mj-brand-a15); color: var(--mj-brand); font-size: 20px; }
.primary-content .mj-pay-body { flex: 1 1 220px; min-width: 0; }
.primary-content .mj-pay-body b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--mj-text); font-size: 14.5px; }
.primary-content .mj-pay-body small { display: block; margin-top: 2px; color: var(--mj-muted-2); font-size: 12.5px; }
.primary-content .mj-pay-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.primary-content .mj-pay-actions .btn.disabled { opacity: .45; pointer-events: none; }

/* Benutzer */
.primary-content .mj-user-list { display: flex; flex-direction: column; gap: 12px; }
.primary-content .mj-user { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-xl); background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); }
.primary-content .mj-user.is-owner { border-color: var(--mj-brand-a40); }
.primary-content .mj-user.is-invite { border-style: dashed; background: var(--mj-surface); }
.primary-content .mj-user-avatar { display: inline-grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--mj-brand-a15); color: var(--mj-brand); font-size: 17px; }
.primary-content .mj-user-body { flex: 1 1 240px; min-width: 0; }
.primary-content .mj-user-body b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--mj-text); font-size: 14.5px; }
.primary-content .mj-user-body small { display: block; margin-top: 3px; color: var(--mj-muted-2); font-size: 12.5px; }
.primary-content .mj-user-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.primary-content .mj-user-actions .btn.disabled { opacity: .45; pointer-events: none; }

/* 2FA-Karte */
.primary-content .mj-2fa { border-color: rgba(245, 158, 11, .4); }
.primary-content .mj-2fa.is-on { border-color: rgba(34, 197, 94, .4); }
.primary-content .mj-2fa-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.primary-content .mj-2fa-icon { display: inline-grid; place-items: center; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 16px; background: rgba(245, 158, 11, .15); color: #fbbf24; font-size: 24px; }
.primary-content .mj-2fa.is-on .mj-2fa-icon { background: rgba(34, 197, 94, .15); color: var(--mj-ok); }
.primary-content .mj-2fa-body { flex: 1 1 320px; }
.primary-content .mj-2fa-body h2 { margin: 0 0 6px; }
.primary-content .mj-2fa-body p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--mj-text-2); font-size: 13.5px; }
.primary-content .mj-2fa-actions { display: flex; gap: 8px; }

/* Modale im Theme-Look */
body .mj-modal .modal-content { border: 1px solid var(--mj-line); border-radius: 20px; background: var(--mj-surface-2); color: var(--mj-text); }
body .mj-modal .modal-header, body .mj-modal .modal-footer { border-color: var(--mj-line-soft); }
body .mj-modal .modal-title { font-size: 1.05rem; font-weight: 800; }
body .mj-modal .modal-body p { color: var(--mj-text-2); }
body .mj-modal .close { color: var(--mj-text); opacity: .7; text-shadow: none; }

/* E-Mail-Popup */
body.mj-popup { margin: 0; padding: 18px; background: #09090b; color: var(--mj-text-2); font-family: var(--mj-font); }
body.mj-popup .mj-popup-card { border: 1px solid var(--mj-line); border-radius: 18px; background: var(--mj-surface); overflow: hidden; }
body.mj-popup .mj-popup-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--mj-line-soft); }
body.mj-popup .mj-popup-icon { display: inline-grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; background: var(--mj-brand-a15); color: var(--mj-brand); }
body.mj-popup .mj-popup-head h2 { margin: 6px 0 0; color: var(--mj-text); font-size: 15px; font-weight: 800; }
body.mj-popup .mj-popup-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
body.mj-popup .mj-popup-body { background: #fff; }
body.mj-popup .mj-popup-body iframe { display: block; }
body.mj-popup .mj-popup-foot { padding: 12px 18px; border-top: 1px solid var(--mj-line-soft); text-align: right; }
body.mj-popup .mj-file { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-pill); background: var(--mj-surface-2); color: var(--mj-text-2); font-size: 12px; }
body.mj-popup .btn.mj-pill-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--mj-r-pill); font-size: 13px; font-weight: 700; }

/* Zahlungsmethode bearbeiten (nexus-Vorlage, nur Optik) */
.primary-content #frmManagePaymentMethod .form-control, .primary-content #frmManagePaymentMethod .custom-select { height: auto; padding: 11px 14px; border: 1px solid var(--mj-line); border-radius: 12px; background-color: var(--mj-surface-3); color: var(--mj-text); }
.primary-content #frmManagePaymentMethod label { color: var(--mj-muted-2); font-size: 12px; font-weight: 700; }
.primary-content #innerBillingContactsContainer label { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--mj-line); border-radius: 12px; background: var(--mj-surface); color: var(--mj-text-2); font-size: 13px; }
.primary-content #innerBillingContactsContainer label .name { color: var(--mj-text); }

/* Sprache als Pillen mit Flagge */
.primary-content .mj-langpills { display: flex; flex-wrap: wrap; gap: 8px; }
.primary-content .mj-langpill { position: relative; margin: 0; cursor: pointer; }
.primary-content .mj-langpill input { position: absolute; opacity: 0; width: 0; height: 0; }
.primary-content .mj-langpill span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-pill); background: var(--mj-surface-3); color: var(--mj-text-2); font-size: 13px; font-weight: 700; }
.primary-content .mj-langpill span img { border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
.primary-content .mj-langpill span i { color: var(--mj-muted-2); }
.primary-content .mj-langpill:hover span { border-color: var(--mj-line-strong); color: var(--mj-text); }
.primary-content .mj-langpill input:checked + span { border-color: var(--mj-brand); background: var(--mj-brand-a15); color: var(--mj-text); box-shadow: 0 0 0 3px var(--mj-brand-a20); }
.primary-content .mj-langpill input:disabled + span { opacity: .5; cursor: not-allowed; }

/* E-Mail-Verlauf: Hinweis rechts statt Knopf */
.primary-content .mj-list-open { color: var(--mj-muted-2); font-size: 12.5px; font-weight: 700; }
.primary-content .mj-list-table tbody tr:hover .mj-list-open { color: var(--mj-brand); }

/* Sicherheit: WHMCS blendet per w-hidden um - muss gegen unsere Flex-Regeln gewinnen */
.primary-content .mj-2fa-body p.w-hidden, .primary-content .twofa-config-link.w-hidden { display: none !important; }
.primary-content .mj-grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.primary-content .mj-grid-cards .mj-card { margin: 0; }

/* ---- Telefonnummer mit Laendervorwahl (intl-tel-input, alte Klassennamen) ----
   nexus liefert eine weisse Liste mit hellgrauem Text - hier alles auf Theme-Farben. */
body .intl-tel-input { width: 100%; }
body .intl-tel-input .selected-flag { padding: 0 8px 0 12px; border-radius: 12px 0 0 12px; background: transparent; }
body .intl-tel-input .selected-flag:hover, body .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag { background: var(--mj-surface-2) !important; }
body .intl-tel-input .selected-dial-code { color: var(--mj-text); font-weight: 700; }
body .intl-tel-input .iti-arrow { border-top-color: var(--mj-muted-2); }
body .intl-tel-input .iti-arrow.up { border-bottom-color: var(--mj-muted-2); }
body .intl-tel-input .country-list {
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--mj-line) !important;
    border-radius: 14px;
    background: var(--mj-surface-2) !important;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9) !important;
    color: var(--mj-text-2);
    scrollbar-width: thin;
    scrollbar-color: var(--mj-line-strong) transparent;
}
body .intl-tel-input .country-list .country { padding: 8px 10px; border-radius: 9px; color: var(--mj-text-2); font-size: 13.5px; }
body .intl-tel-input .country-list .country .country-name { color: var(--mj-text); font-weight: 600; }
body .intl-tel-input .country-list .country .dial-code { color: var(--mj-muted-2); }
body .intl-tel-input .country-list .country.highlight,
body .intl-tel-input .country-list .country:hover { background: var(--mj-brand-a15) !important; color: var(--mj-text); }
body .intl-tel-input .country-list .country.highlight .country-name { color: var(--mj-brand); }
body .intl-tel-input .country-list .divider { margin: 6px 4px; border-bottom: 1px solid var(--mj-line-soft) !important; }
body .intl-tel-input .country-list .flag-box { margin-right: 8px; }
body .intl-tel-input .country-list::-webkit-scrollbar { width: 8px; }
body .intl-tel-input .country-list::-webkit-scrollbar-thumb { border-radius: 8px; background: var(--mj-line-strong); }
body .intl-tel-input input.form-control { padding-left: 84px !important; }


/* ---- Quelle: 35-proxmox.css ---------------------------------------- */
/* ============================================================================
   35 - Proxmox VE VPS & Cloud (ModulesGarden) im Kundenbereich
   ----------------------------------------------------------------------------
   Das Modul rendert sein Panel in #layers2 und stellt dort 118 CSS-Variablen
   bereit (resources/build/css.php). Genau dafür sind sie gedacht: wir setzen
   sie auf die Theme-Tokens. "html body" liegt eine Stufe über der Modulregel
   "#layers2, #layers2-body", unabhängig von der Ladereihenfolge.

   Gemessen am 12.09.2026 auf cp.mam-jahn.de, Modulversion 4.3.0.
   ========================================================================== */

html body #layers2,
html body #layers2-body {
    /* Grundflächen und Text */
    --text-default:          var(--mj-text-2);
    --app-background:        transparent;
    --text-module-name:      var(--mj-text);
    --text-module-version:   var(--mj-muted-2);
    --text-headers:          var(--mj-brand);
    --text-primary:          var(--mj-brand-light);
    --table-lines:           var(--mj-line-soft);
    --icon-default:          var(--mj-muted);

    /* Seitenmenü des Moduls */
    --menu-text:             var(--mj-text-2);
    --menu-icons:            var(--mj-muted);
    --menu-background:       var(--mj-surface);
    --menu-submenu-text:     var(--mj-text-2);
    --menu-submenu-background: var(--mj-surface-2);

    /* Karten (Widgets), Dialoge, Aufklappmenüs */
    --widget-text:           var(--mj-text-2);
    --widget-background:     var(--mj-surface);
    --widget-border:         var(--mj-line-soft);
    --modal-text:            var(--mj-text-2);
    --modal-background:      var(--mj-surface);
    --modal-border:          var(--mj-line);
    --dropdown-text:         var(--mj-text-2);
    --dropdown-background:   var(--mj-surface);
    --dropdown-border:       var(--mj-line);

    /* Formulare */
    --input-text:            var(--mj-text);
    --input-background:      var(--mj-surface-3);
    --input-border:          var(--mj-line);
    --input-label-text:      var(--mj-text-2);
    --input-label-background: var(--mj-surface-2);
    --select-dropdown-text:  var(--mj-text-2);
    --select-dropdown-text-active: var(--mj-brand-light);
    --select-dropdown-background: var(--mj-surface);
    --select-items-text:     var(--mj-text-2);
    --select-items-background: var(--mj-surface-3);
    --select-items-remove-button: var(--mj-brand-light);
    --switcher-knob:         var(--mj-text);
    --switcher-inactive-background: var(--mj-line-strong);
    --switcher-active-background:   var(--mj-brand);
    --code-box-text:         var(--mj-brand-light);
    --code-box-background:   var(--mj-surface-3);
    --tooltip-icon:          var(--mj-line-strong);
    --tooltip-text:          var(--mj-text);
    --tooltip-background:    var(--mj-surface-3);
    --hint-default-text:     var(--mj-muted);

    /* Meldungen */
    --alert-default-text:            var(--mj-text-2);
    --alert-default-background:      var(--mj-surface-2);
    --alert-outline-default-text:    var(--mj-text-2);
    --alert-outline-default-border:  var(--mj-line);
    --alert-outline-default-background: var(--mj-surface);
    --alert-info-background:         rgba(59, 130, 246, .14);
    --alert-outline-info-background: var(--mj-surface);
    --alert-success-background:      rgba(34, 197, 94, .14);
    --alert-outline-success-background: var(--mj-surface);
    --alert-warning-background:      rgba(245, 158, 11, .14);
    --alert-outline-warning-background: var(--mj-surface);
    --alert-danger-background:       rgba(239, 68, 68, .14);
    --alert-outline-danger-background: var(--mj-surface);

    /* Labels und Badges */
    --label-default-text:            var(--mj-text-2);
    --label-default-background:      var(--mj-surface-3);
    --label-outline-default-text:    var(--mj-text-2);
    --label-outline-default-border:  var(--mj-line);
    --label-status-default-text:     var(--mj-text-2);
    --badge-default-text:            var(--mj-text-2);
    --badge-default-background:      var(--mj-surface-3);
    --badge-default-border:          var(--mj-line);
    --badge-outline-default-text:    var(--mj-text-2);
    --badge-outline-default-border:  var(--mj-line);

    /* Knöpfe */
    --btn-plain-default-text:              var(--mj-text-2);
    --btn-plain-default-background:        var(--mj-surface-3);
    --btn-plain-default-background-hover:  var(--mj-line);
    --btn-plain-default-background-active: var(--mj-line-strong);
    --btn-outline-default-text:            var(--mj-muted);
    --btn-outline-default-text-hover:      var(--mj-text);
    --btn-outline-default-text-active:     var(--mj-text);
    --btn-outline-default-border:          var(--mj-line);
    --btn-outline-default-border-hover:    var(--mj-brand-a60);
    --btn-outline-default-border-active:   var(--mj-brand);
    --btn-outline-primary-text:            var(--mj-brand-light);
    --btn-outline-primary-border:          var(--mj-brand-a60);
    --btn-outline-secondary-text:          var(--mj-muted);
    --btn-outline-secondary-border:        var(--mj-line);
    --btn-outline-success-text:            #86efac;
    --btn-outline-success-border:          rgba(34, 197, 94, .5);
    --btn-outline-info-text:               var(--mj-brand-light);
    --btn-outline-info-border:             var(--mj-brand-a60);
    --btn-outline-warning-text:            #fcd34d;
    --btn-outline-warning-border:          rgba(245, 158, 11, .5);
    --btn-outline-danger-text:             #fca5a5;
    --btn-outline-danger-border:           rgba(239, 68, 68, .5);
    --btn-link-default-text:               var(--mj-brand);
    --btn-link-default-text-hover:         var(--mj-brand-light);
    --btn-link-default-text-active:        var(--mj-brand-light);
    --icon-btn-default-text:               var(--mj-muted);
    --icon-btn-default-text-hover:         var(--mj-text);
    --icon-btn-primary-text:               var(--mj-brand);
    --icon-btn-secondary-text:             var(--mj-muted);
    --icon-btn-success-text:               var(--mj-ok);
    --icon-btn-info-text:                  var(--mj-brand-light);
    --icon-btn-warning-text:               var(--mj-warn);
    --icon-btn-danger-text:                var(--mj-err);

    /* Kacheln (Service Actions, Service Management) */
    --tile-btn-text:             var(--mj-text-2);
    --tile-btn-background:       var(--mj-surface);
    --tile-btn-border:           var(--mj-line-soft);
    --tile-btn-text-hover:       var(--mj-text);
    --tile-btn-background-hover: var(--mj-surface-2);

    /* Fortschrittsbalken und Schieberegler (Ressourcen, Neuinstallation) */
    --progressbar-default-fill:     var(--mj-brand);
    --progressbar-default-unfill:   var(--mj-surface-3);
    --progressbar-primary-unfill:   var(--mj-surface-3);
    --progressbar-success-unfill:   var(--mj-surface-3);
    --progressbar-info-unfill:      var(--mj-surface-3);
    --progressbar-warning-unfill:   var(--mj-surface-3);
    --progressbar-danger-unfill:    var(--mj-surface-3);
    --slider-primary-background:    var(--mj-line);
    --slider-primary-marks-text:    var(--mj-muted);
    --slider-primary-marks-background: var(--mj-line-strong);
    --slider-primary-text:          var(--mj-text);
    --slider-danger-background:     var(--mj-line);
    --slider-danger-marks-text:     var(--mj-muted);
    --slider-danger-marks-background: var(--mj-line-strong);
    --slider-danger-text:           var(--mj-text);
}

/* ---------------------------------------------------------------------------
   Was die Variablen nicht abdecken: Radien, Schriften, Overlay, Tabellen
   ------------------------------------------------------------------------ */

html body #layers2 .lu-app,
html body #layers2 .lu-app-main {
    font-family: var(--mj-font);
}

/* Kacheln wie die Theme-Karten */
html body #layers2 .lu-tile {
    border-radius: var(--mj-r-lg);
    transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
}

html body #layers2 .lu-tile:hover {
    border-color: var(--mj-brand-a60);
    transform: translateY(-3px);
}

html body #layers2 .lu-tile__title {
    font-weight: 600;
}

/* Karten */
html body #layers2 .lu-widget {
    border-radius: var(--mj-r-lg);
    overflow: hidden;
}

html body #layers2 .lu-widget__header {
    border-bottom: 1px solid var(--mj-line-soft);
}

html body #layers2 .lu-top__title {
    color: var(--mj-text);
    font-weight: 700;
}

/* Abschnittsüberschriften "Service Actions" / "Service Management" */
html body #layers2 .lu-tiles-wrapper h3,
html body #layers2 .lu-tiles-wrapper h4,
html body #layers2 .lu-tiles-wrapper .lu-tiles__title {
    color: var(--mj-text);
    font-weight: 800;
    letter-spacing: -.02em;
}

/* Lade-Overlay war reines Weiß mit 86 Prozent Deckung */
html body #layers2 .lu-preloader-container--overlay {
    background-color: rgba(9, 9, 11, .8);
}

/* Tabellen im Panel */
html body #layers2 .lu-table th {
    color: var(--mj-muted-2);
    border-color: var(--mj-line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

html body #layers2 .lu-table td {
    color: var(--mj-text-2);
    border-color: var(--mj-line-soft);
}

html body #layers2 .lu-table tbody tr:hover td {
    background-color: var(--mj-surface-3);
}

html body #layers2 .lu-no-data {
    color: var(--mj-muted-2);
}

/* Formularfelder und Knöpfe */
html body #layers2 .lu-form-control,
html body #layers2 .lu-input-group {
    border-radius: var(--mj-r-md);
}

html body #layers2 .lu-form-control:focus {
    border-color: var(--mj-brand);
    box-shadow: 0 0 0 3px var(--mj-brand-a20);
}

html body #layers2 .lu-btn,
html body #layers2 .lu-icon-btn {
    border-radius: var(--mj-r-pill);
}

html body #layers2 .lu-btn--primary {
    background-color: var(--mj-brand);
    border-color: var(--mj-brand);
    color: var(--mj-on-brand);
    font-weight: 700;
}

html body #layers2 .lu-btn--primary:hover {
    background-color: var(--mj-brand-light);
    border-color: var(--mj-brand-light);
    color: var(--mj-on-brand);
}

/* Blätterung der Modultabellen (DataTables) */
html body #layers2 .dataTables_paginate .paginate_button {
    border-radius: var(--mj-r-sm);
    color: var(--mj-text-2) !important;   /* DataTables setzt eigene !important-Regeln */
}

html body #layers2 .dataTables_paginate .paginate_button.current {
    background: var(--mj-brand) !important;
    border-color: var(--mj-brand) !important;
    color: var(--mj-on-brand) !important;
}


/* ---- Quelle: 36-auth.css ---------------------------------------- */
/* ============================================================================
   36 - Anmeldung (Block 4): Registrierung, Passwort vergessen, 2FA-Abfrage,
   Backup-Code, E-Mail bestaetigen, Konto wechseln, Einladung
   ========================================================================== */

.primary-content .mj-auth-single { max-width: 520px; margin: 8px auto 30px; }
.primary-content .mj-auth-single--wide { max-width: 860px; }
.primary-content .mj-auth-box { position: relative; overflow: hidden; padding: 30px 32px; }
.primary-content .mj-auth-box::after { content: ""; position: absolute; left: 32px; right: 32px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--mj-brand), transparent); }
.primary-content .mj-auth-brandrow { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 22px; }
.primary-content .mj-auth-brandrow h1 { margin: 4px 0 4px; color: var(--mj-text); font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.primary-content .mj-auth-brandrow p { margin: 0; color: var(--mj-muted-2); font-size: 13.5px; line-height: 1.5; }
.primary-content .mj-auth-icon { display: inline-grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 16px; background: var(--mj-brand-a15); color: var(--mj-brand); font-size: 21px; }
.primary-content .mj-auth-icon.is-ok { background: rgba(34, 197, 94, .15); color: var(--mj-ok); }
.primary-content .mj-auth-center { text-align: center; }
.primary-content .mj-auth-center h1 { margin: 12px 0 8px; color: var(--mj-text); font-size: 1.35rem; font-weight: 800; }
.primary-content .mj-auth-center p.mj-note { justify-content: center; }
.primary-content .mj-auth-bigicon { display: inline-grid; place-items: center; width: 72px; height: 72px; margin: 6px 0 4px; border-radius: 50%; background: var(--mj-brand-a15); color: var(--mj-brand); font-size: 30px; }
.primary-content .mj-auth-bigicon.is-ok { background: rgba(34, 197, 94, .15); color: var(--mj-ok); }
.primary-content .mj-auth-bigicon.is-warn { background: rgba(245, 158, 11, .15); color: #fbbf24; }
.primary-content .mj-auth-bigicon.is-err { background: rgba(239, 68, 68, .15); color: var(--mj-err); }
.primary-content .mj-auth-foot { margin: 14px 0 0; color: var(--mj-muted-2); font-size: 13px; text-align: center; }
.primary-content .mj-auth-foot a { color: var(--mj-brand); font-weight: 700; }
.primary-content .mj-auth-box .btn.mj-submit { margin-top: 6px; }

/* Codes */
.primary-content .mj-code { text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; letter-spacing: .12em; }
.primary-content .mj-codebox { padding: 16px 18px; border: 1px dashed var(--mj-brand-a60); border-radius: 14px; background: var(--mj-brand-a10); color: var(--mj-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.4rem; font-weight: 700; letter-spacing: .12em; text-align: center; user-select: all; }
.primary-content .mj-codebox--text { font-family: inherit; font-size: 15px; letter-spacing: 0; user-select: text; }
.primary-content .mj-codebox--text span { color: var(--mj-muted-2); font-weight: 500; }

/* 2FA-Abfrage: WHMCS-Markup in $challenge (Eingabefeld + Knopf) */
.primary-content .mj-2fa-form .form-control, .primary-content .mj-2fa-form input[type="text"] { height: auto; padding: 12px 14px; border: 1px solid var(--mj-line); border-radius: 12px; background: var(--mj-surface-3); color: var(--mj-text); text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 20px; letter-spacing: .2em; }
.primary-content .mj-2fa-form .btn, .primary-content .mj-2fa-form input[type="submit"] { display: block; width: 100%; margin-top: 12px; padding: 13px 20px; border: 0; border-radius: var(--mj-r-pill); background: var(--mj-brand); color: var(--mj-on-brand); font-size: 15px; font-weight: 800; box-shadow: 0 14px 30px -12px var(--mj-brand-a60); }
.primary-content .mj-2fa-form p, .primary-content .mj-2fa-form label { color: var(--mj-text-2); font-size: 13.5px; }
.primary-content .mj-2fa-form img { display: block; margin: 0 auto 12px; border-radius: 12px; background: #fff; padding: 6px; }
.primary-content form.w-hidden { display: none !important; }

/* Passwortstaerke */
.primary-content .mj-pwmeter { margin: 6px 0 12px; }
.primary-content .mj-pwmeter .progress { height: 6px; border-radius: 6px; background: var(--mj-surface-3); }
.primary-content .mj-pwmeter .progress-bar { border-radius: 6px; }
.primary-content .mj-pwmeter p { margin: 6px 0 0; color: var(--mj-muted-2) !important; font-size: 12px; text-align: left; }
.primary-content #passwdFeedback { border-radius: 12px; }

/* Konto wechseln */
.primary-content .mj-acct-list { display: flex; flex-direction: column; gap: 8px; }
.primary-content .mj-acct { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--mj-line); border-radius: 14px; background: var(--mj-surface); color: var(--mj-text-2); text-decoration: none; }
.primary-content .mj-acct:hover { border-color: var(--mj-brand-a60); color: var(--mj-text); text-decoration: none; }
.primary-content .mj-acct.disabled { opacity: .5; pointer-events: none; }
.primary-content .mj-acct-avatar { display: inline-grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; background: var(--mj-brand-a15); color: var(--mj-brand); }
.primary-content .mj-acct-body { flex: 1 1 auto; min-width: 0; }
.primary-content .mj-acct-body b { display: block; color: var(--mj-text); }
.primary-content .mj-acct-body small { display: flex; gap: 6px; margin-top: 4px; }

/* Registrierung: verknuepfte Konten (Google/Facebook) aus WHMCS */
.primary-content #registration .social-accounts, .primary-content #registration .linked-accounts { margin-bottom: 18px; }

/* Login (bestehend): Feinschliff auf Kartenlook */
.primary-content .mj-auth-card { border-radius: var(--mj-r-xl); }
.primary-content .mj-auth-card .form-control { border-radius: 12px; }
.primary-content .mj-auth-card .input-group-text { border-radius: 12px 0 0 12px; }
.primary-content .mj-auth-card .btn-reveal-pw { border-radius: 0 12px 12px 0; }
.primary-content .mj-auth-card #login { padding: 13px 20px; border-radius: var(--mj-r-pill); font-weight: 800; box-shadow: 0 14px 30px -12px var(--mj-brand-a60); }

/* ---- Registrierung: nexus setzt .field auf weiss, hier hart uebersteuert ---- */
body #registration input.field, body #registration select.field, body #registration textarea.field,
body #registration .form-control, body #registration .custom-select,
body .primary-content .field.form-control {
    height: auto !important;
    padding: 11px 14px !important;
    border: 1px solid var(--mj-line) !important;
    border-radius: 12px !important;
    background: var(--mj-surface-3) !important;
    color: var(--mj-text) !important;
    box-shadow: none !important;
    font-size: 14px;
}
body #registration select.field, body #registration .custom-select { padding-right: 34px !important; line-height: 1.4; }
body #registration .field:focus, body #registration .form-control:focus { border-color: var(--mj-brand) !important; box-shadow: 0 0 0 3px var(--mj-brand-a20) !important; }
body #registration .field::placeholder { color: var(--mj-muted-2); }
body #registration .mj-label small { color: var(--mj-muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
body #registration .intl-tel-input input.field { padding-left: 84px !important; }

/* ---- Registrierung: volle Breite, Seitenleiste weg (steht doppelt im Kopf) ---- */
body #main-body .row:has(#registration) > .col-lg-4 { display: none; }
body #main-body .row:has(#registration) > .primary-content { flex: 0 0 100%; max-width: 100%; }
body #registration .mj-two--wide { grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; }
body #registration .mj-card { padding: 26px 28px; }
body #registration .mj-grid-2 { gap: 0 18px; }
body #registration .form-group { margin-bottom: 16px; }
body #registration .intl-tel-input { width: 100%; }
@media (max-width: 991.98px) { body #registration .mj-two--wide { grid-template-columns: 1fr; } }

/* Telefon: Vorwahl-Block fest 92px, Eingabe dahinter (ID-Selektor schlaegt Inline-Stil) */
body #registration .intl-tel-input, body #registration .iti { width: 100%; display: block; }
body #registration .intl-tel-input .flag-container, body #registration .iti__flag-container { left: 0; }
body #registration .intl-tel-input .selected-flag, body #registration .iti__selected-flag { width: 92px !important; padding: 0 6px 0 14px !important; display: flex; align-items: center; gap: 6px; }
body #registration .intl-tel-input .selected-dial-code, body #registration .iti__selected-dial-code { margin: 0; color: var(--mj-text); font-size: 14px; font-weight: 700; }
body #registration #inputPhone, body #registration input#inputPhone.field { padding-left: 104px !important; }

/* Captcha: Text oben, darunter Bild und Feld nebeneinander (Bootstrap-row aufgehoben) */
body #registration .mj-card .row.justify-content-center, body #registration .text-center.row { margin: 0; }
body #registration .col-md-8.mx-auto { flex: 0 0 100%; max-width: 100%; padding: 0; }
body #registration #default-captcha-domainchecker { display: grid !important; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; margin: 0 0 14px !important; padding: 0 !important; }
body #registration #default-captcha-domainchecker > p { grid-column: 1 / -1; margin: 0 0 4px; color: var(--mj-muted-2); font-size: 12.5px; line-height: 1.5; text-align: left; }
body #registration #default-captcha-domainchecker > .col-6 { flex: none !important; width: auto !important; max-width: none !important; padding: 0 !important; }
body #registration .captchaimage img { display: block; height: 44px; width: auto; border-radius: 10px; border: 1px solid var(--mj-line); image-rendering: auto; }
body #registration #inputCaptcha { width: 100%; float: none !important; text-align: center; letter-spacing: .15em; font-weight: 700; }

/* Login, rechte Spalte: Titel ueber dem Text, alles buendig in einer Linie */
.primary-content .mj-aside-item { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; row-gap: 2px; align-items: start; margin-bottom: 20px; }
.primary-content .mj-aside-item i { grid-row: 1 / span 2; grid-column: 1; }
.primary-content .mj-aside-item h3 { grid-column: 2; margin: 8px 0 0; font-size: 15px; }
.primary-content .mj-aside-item p { grid-column: 2; margin: 0; font-size: 13.5px; }


/* ---- Quelle: 37-upgrade.css ---------------------------------------- */
/* ============================================================================
   37 - Block 5 im Kundenbereich: Upgrade, Kuendigung, Zugriff verweigert
   ========================================================================== */

.primary-content .mj-upg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 0 0 18px; }
.primary-content .mj-upg-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-xl); background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset; transition: transform .2s ease, border-color .2s ease; }
.primary-content .mj-upg-card:hover { transform: translateY(-2px); border-color: var(--mj-brand-a60); }
.primary-content .mj-upg-card.is-current { opacity: .75; }
.primary-content .mj-upg-card.is-recommended { border-color: var(--mj-brand-a60); box-shadow: 0 30px 60px -30px var(--mj-brand-a40); }
.primary-content .mj-upg-badge { position: absolute; top: 16px; right: 16px; padding: 4px 10px; border-radius: var(--mj-r-pill); background: var(--mj-surface-3); color: var(--mj-text-2); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.primary-content .mj-upg-badge.is-rec { background: var(--mj-brand); color: var(--mj-on-brand); }
.primary-content .mj-upg-group { color: var(--mj-muted-2); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.primary-content .mj-upg-card h2 { margin: 0; color: var(--mj-text); font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.primary-content .mj-upg-desc { color: var(--mj-text-2); font-size: 13px; line-height: 1.55; }
.primary-content .mj-upg-features { flex: 1 1 auto; margin: 4px 0; padding: 0; list-style: none; }
.primary-content .mj-upg-features li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--mj-line-soft); font-size: 13px; }
.primary-content .mj-upg-features li span { color: var(--mj-muted-2); }
.primary-content .mj-upg-features li b { color: var(--mj-text); }
.primary-content .mj-upg-features li b .fa-check { color: var(--mj-ok); }
.primary-content .mj-upg-features li b .fa-xmark { color: var(--mj-muted); }
.primary-content .mj-upg-price { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--mj-line-soft); }
.primary-content .mj-upg-price b { color: var(--mj-text); font-size: 1.3rem; font-weight: 800; }
.primary-content .mj-upg-price small { margin-left: 6px; color: var(--mj-muted-2); font-size: 12.5px; }
.primary-content .mj-upg-card .btn.mj-submit { margin-top: 8px; }

/* Optionen aendern */
.primary-content .mj-upg-opts { display: flex; flex-direction: column; gap: 10px; }
.primary-content .mj-upg-opt { display: grid; grid-template-columns: 1.1fr 1fr auto 1.3fr; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--mj-line); border-radius: 14px; background: var(--mj-surface); }
.primary-content .mj-upg-opt-name { color: var(--mj-text); font-weight: 700; font-size: 14px; }
.primary-content .mj-upg-opt-cur span { display: block; color: var(--mj-muted-2); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.primary-content .mj-upg-opt-cur b { color: var(--mj-text-2); font-weight: 600; }
.primary-content .mj-upg-arrow { color: var(--mj-brand); }
.primary-content .mj-upg-arrow-inline { margin: 0 6px; color: var(--mj-brand); font-size: 11px; }
.primary-content .mj-upg-opt-new .form-group { margin: 0; }
.primary-content .mj-upg-qty { display: flex; align-items: center; gap: 8px; }
.primary-content .mj-upg-qty .form-control { width: 90px; }
.primary-content .mj-upg-qty span { color: var(--mj-text-2); font-size: 13px; }
@media (max-width: 767.98px) { .primary-content .mj-upg-opt { grid-template-columns: 1fr; } .primary-content .mj-upg-arrow { display: none; } }

/* Zusammenfassung */
.primary-content .mj-promo-row { display: flex; gap: 8px; }
.primary-content .mj-promo-row .form-control { flex: 1 1 auto; }
.primary-content .mj-upg-side .mj-inv-eyebrow { display: block; color: var(--mj-muted-2); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.primary-content .mj-upg-side .mj-inv-amount { display: block; margin: 6px 0 4px; color: var(--mj-brand); font-size: 2.2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }

/* Kuendigung */
.primary-content .mj-checks--radio .mj-check--desc, .primary-content .mj-checks--radio .mj-check span b { display: block; color: var(--mj-text); }
.primary-content .mj-checks--radio .mj-check span small { display: block; margin-top: 2px; color: var(--mj-muted-2); font-size: 12px; font-weight: 500; }
.primary-content .mj-perm-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

/* ---- Zahlung ausfuehren (invoice-payment.tpl) --------------------------- */
.primary-content .mj-pay-select { margin: 0 0 14px; }
.primary-content .mj-pay-select .three-column-grid, .primary-content .mj-pay-select .two-column-grid { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 0 12px; align-items: center; margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--mj-line); border-radius: 14px; background: var(--mj-surface); }
.primary-content .mj-pay-select .two-column-grid { grid-template-columns: auto auto 1fr auto; }
.primary-content .mj-pay-select .paymethod-info { color: var(--mj-text-2); font-size: 13.5px; }
.primary-content .mj-pay-select .paymethod-info label { margin: 0; color: inherit; font-weight: 600; cursor: pointer; }
.primary-content .mj-pay-select .paymethod-info i { color: var(--mj-brand); }
.primary-content .mj-pay-select > .paymethod-info { padding: 12px 14px; border: 1px solid var(--mj-line); border-radius: 14px; background: var(--mj-surface); }
.primary-content .mj-pay-select > .paymethod-info label { display: flex; align-items: center; gap: 10px; color: var(--mj-text); }
.primary-content .mj-pay-select .paymethod-info input[type="radio"] { width: 18px; height: 18px; accent-color: var(--mj-brand); }
.primary-content .mj-pay-inputs .form-group.row { display: block; margin: 0 0 14px; }
.primary-content .mj-pay-inputs .form-group.row > label { display: block; margin: 0 0 6px; padding: 0; color: var(--mj-muted-2); font-size: 12px; font-weight: 700; text-align: left !important; }
.primary-content .mj-pay-inputs .form-group.row > [class*="col-"] { flex: none; max-width: 100%; padding: 0; }
.primary-content .mj-pay-inputs .form-control { height: auto; padding: 11px 14px; border: 1px solid var(--mj-line); border-radius: 12px; background: var(--mj-surface-3); color: var(--mj-text); }
.primary-content .mj-pay-inputs .field-error-msg { display: none; color: #fca5a5; font-size: 12px; }
.primary-content .mj-pay-inputs .form-check-inline { margin-right: 14px; color: var(--mj-text-2); }
.primary-content .mj-pay-form .submit-container { margin: 10px 0 0; }
.primary-content .mj-pay-form .gateway-errors { border-radius: 14px; }
/* Gateway-Eigenmarkup (z. B. PayPal: Kontoauswahl + Logo-Kacheln) */
.primary-content .mj-pay-form #paymentGatewayInput img { max-width: 160px; height: auto; }
.primary-content .mj-pay-form #paymentGatewayInput .btn, .primary-content .mj-pay-form #paymentGatewayInput label.btn { display: flex; align-items: center; justify-content: center; min-height: 52px; margin: 0 0 8px; padding: 10px 16px; border: 1px solid var(--mj-line); border-radius: 14px; background: #fff; }
.primary-content .mj-pay-form #paymentGatewayInput .btn.active, .primary-content .mj-pay-form #paymentGatewayInput label.btn.active { border-color: var(--mj-brand); box-shadow: 0 0 0 3px var(--mj-brand-a20); }
.primary-content .mj-pay-form #paymentGatewayInput .list-group-item, .primary-content .mj-pay-form #paymentGatewayInput .form-control[disabled] { border: 1px solid var(--mj-line); border-radius: 12px; background: var(--mj-surface-3); color: var(--mj-text-2); }
.primary-content .mj-pay-form #paymentGatewayInput p { color: var(--mj-text-2); font-size: 13.5px; }
.primary-content .mj-pay-summary { position: sticky; top: 96px; }
.primary-content .mj-pay-summary .mj-inv-eyebrow { display: block; color: var(--mj-muted-2); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.primary-content .mj-pay-summary .mj-inv-amount { display: block; margin: 6px 0 8px; color: var(--mj-brand); font-size: 2.2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.primary-content .mj-pay-summary-no { display: inline-flex; align-items: center; gap: 6px; color: var(--mj-muted-2); font-size: 12.5px; font-weight: 700; }
.primary-content .mj-pay-summary-no i { color: var(--mj-brand); }
.primary-content .mj-pay-items { max-height: 320px; margin: 14px 0 0; overflow: auto; scrollbar-width: thin; }
.primary-content .mj-pay-items .mj-inv-table td { font-size: 12.5px; padding: 8px 8px 8px 0; }

/* ---- Kuendigung (clientareacancelrequest.tpl) ---------------------------- */
.primary-content .mj-cx { align-items: start; }
.primary-content .mj-cx-form, .primary-content .mj-cx-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.primary-content .mj-cx .mj-card { margin: 0; }
.primary-content .mj-cx .mj-card > h2 { margin: 0 0 14px; }
.primary-content .mj-cx-lead { margin: -8px 0 14px; color: var(--mj-muted-2); font-size: 13px; line-height: 1.55; }
.primary-content .mj-cx-eyebrow { color: var(--mj-muted-2); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* Dienst */
.primary-content .mj-cx-service { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.primary-content .mj-cx-service-icon { display: inline-grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; background: var(--mj-brand-a15); color: var(--mj-brand); font-size: 19px; }
.primary-content .mj-cx-service-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.primary-content .mj-cx-service-body b { color: var(--mj-text); font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.primary-content .mj-cx-service-body code { padding: 0; background: none; color: var(--mj-muted-2); font-size: 12.5px; word-break: break-all; }
.primary-content .mj-cx-service-facts { display: flex; gap: 28px; margin: 0; }
.primary-content .mj-cx-service-facts dt { color: var(--mj-muted-2); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.primary-content .mj-cx-service-facts dd { margin: 2px 0 0; color: var(--mj-text); font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.primary-content .mj-cx-service-facts dd small { color: var(--mj-muted-2); font-size: 12px; font-weight: 500; }

/* Zeitpunkt: zwei gleich grosse Karten */
.primary-content .mj-cx-when { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.primary-content .mj-cx-opt { position: relative; display: block; margin: 0; cursor: pointer; }
.primary-content .mj-cx-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.primary-content .mj-cx-opt-box { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px; border: 1px solid var(--mj-line); border-radius: 16px; background: var(--mj-surface); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.primary-content .mj-cx-opt-box > i { margin-bottom: 4px; color: var(--mj-muted-2); font-size: 18px; }
.primary-content .mj-cx-opt-box b { color: var(--mj-text); font-size: 15px; font-weight: 800; }
.primary-content .mj-cx-opt-box small { color: var(--mj-text-2); font-size: 12.5px; font-weight: 500; line-height: 1.5; }
.primary-content .mj-cx-opt-box small strong { color: var(--mj-text); }
.primary-content .mj-cx-opt-badge { position: absolute; top: 14px; right: 14px; padding: 3px 9px; border-radius: var(--mj-r-pill); background: var(--mj-surface-3); color: var(--mj-muted-2); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.primary-content .mj-cx-opt:hover .mj-cx-opt-box { border-color: var(--mj-line-strong); }
.primary-content .mj-cx-opt input:focus-visible + .mj-cx-opt-box { box-shadow: 0 0 0 3px var(--mj-brand-a40); }
.primary-content .mj-cx-opt input:checked + .mj-cx-opt-box { border-color: var(--mj-brand); background: var(--mj-brand-a10); box-shadow: 0 0 0 1px var(--mj-brand) inset; }
.primary-content .mj-cx-opt input:checked + .mj-cx-opt-box > i { color: var(--mj-brand); }
.primary-content .mj-cx-opt input:checked + .mj-cx-opt-box .mj-cx-opt-badge { background: var(--mj-brand); color: var(--mj-on-brand); }
.primary-content .mj-cx-opt--danger input:checked + .mj-cx-opt-box { border-color: rgba(239, 68, 68, .7); background: rgba(239, 68, 68, .08); box-shadow: 0 0 0 1px rgba(239, 68, 68, .7) inset; }
.primary-content .mj-cx-opt--danger input:checked + .mj-cx-opt-box > i { color: #f87171; }
.primary-content .mj-cx-confirm { margin-top: 12px; border-color: rgba(239, 68, 68, .45); background: rgba(239, 68, 68, .06); color: #fecaca; }
.primary-content .mj-cx-confirm input { accent-color: #ef4444; }

/* Grund */
.primary-content .mj-cx-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.primary-content .mj-cx-reason { padding: 9px 15px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-pill); background: var(--mj-surface); color: var(--mj-text-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.primary-content .mj-cx-reason:hover { border-color: var(--mj-line-strong); color: var(--mj-text); }
.primary-content .mj-cx-reason:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--mj-brand-a40); }
.primary-content .mj-cx-reason[aria-pressed="true"] { border-color: var(--mj-brand); background: var(--mj-brand-a15); color: var(--mj-text); }
.primary-content .mj-cx textarea.form-control { min-height: 96px; resize: vertical; }
.primary-content .mj-cx-error { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: #fca5a5; font-size: 13px; font-weight: 600; }

/* Absenden */
.primary-content .mj-cx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.primary-content .btn.mj-cx-submit { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 1px solid #dc2626; border-radius: var(--mj-r-pill); background: #dc2626; color: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 14px 30px -14px rgba(220, 38, 38, .8); }
.primary-content .btn.mj-cx-submit:hover { border-color: #b91c1c; background: #b91c1c; color: #fff; }
.primary-content .mj-cx-actions .mj-pill-btn { padding: 12px 20px; font-size: 14px; }

/* Seitenspalte */
.primary-content .mj-cx-info { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; color: var(--mj-text-2); font-size: 13px; line-height: 1.55; }
.primary-content .mj-cx-info li { display: flex; gap: 10px; }
.primary-content .mj-cx-info i { flex: 0 0 16px; margin-top: 3px; color: var(--mj-muted-2); text-align: center; }
.primary-content .mj-cx-alt { display: flex; flex-wrap: wrap; gap: 8px; }

/* Bestaetigung */
.primary-content .mj-cx-done { max-width: 640px; margin: 0 auto; padding: 40px 32px; text-align: center; }
.primary-content .mj-cx-done-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 16px; border-radius: 50%; background: rgba(34, 197, 94, .15); color: var(--mj-ok); font-size: 26px; }
.primary-content .mj-cx-done h2 { margin: 0 0 6px; color: var(--mj-text); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.primary-content .mj-cx-done-service { margin: 0 0 22px; color: var(--mj-muted-2); font-size: 13.5px; }
.primary-content .mj-cx-done-service code { padding: 0; background: none; color: inherit; }
.primary-content .mj-cx-done-list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px; padding: 18px 20px; border: 1px solid var(--mj-line); border-radius: 16px; background: var(--mj-surface); list-style: none; color: var(--mj-text-2); font-size: 13.5px; line-height: 1.55; text-align: left; }
.primary-content .mj-cx-done-list li { display: flex; gap: 12px; }
.primary-content .mj-cx-done-list i { flex: 0 0 16px; margin-top: 3px; color: var(--mj-brand); text-align: center; }
.primary-content .mj-cx-done-list b { color: var(--mj-text); }
.primary-content .mj-cx-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

@media (max-width: 575.98px) {
    .primary-content .mj-cx-when { grid-template-columns: 1fr; }
    .primary-content .mj-cx-service-facts { width: 100%; }
}
/* display:flex der Bausteine wuerde das hidden-Attribut aushebeln */
.primary-content .mj-cx [hidden] { display: none !important; }

/* ---- Zahlungsseite: mit Guthaben bezahlen -------------------------------- */
.primary-content .mj-paycredit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0; padding: 20px 24px; border-color: rgba(34, 197, 94, .35); }
.primary-content .mj-paycredit.is-full { background: linear-gradient(180deg, rgba(34, 197, 94, .09) 0%, #0c0c0f 100%); }
.primary-content .mj-paycredit-icon { display: inline-grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 14px; background: rgba(34, 197, 94, .15); color: var(--mj-ok); font-size: 18px; }
.primary-content .mj-paycredit-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; }
.primary-content .mj-paycredit-body b { color: var(--mj-text); font-size: 15.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.primary-content .mj-paycredit-body span { color: var(--mj-text-2); font-size: 13px; line-height: 1.5; }
.primary-content .btn.mj-paycredit-btn { padding: 12px 22px; border-color: var(--mj-ok); background: var(--mj-ok); color: #04140a; font-size: 14px; font-weight: 800; box-shadow: 0 14px 30px -14px rgba(34, 197, 94, .7); }
.primary-content .btn.mj-paycredit-btn:hover { border-color: #16a34a; background: #16a34a; color: #04140a; }
.primary-content .mj-paycredit-or { display: flex; align-items: center; gap: 14px; margin: 16px 0; color: var(--mj-muted-2); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.primary-content .mj-paycredit-or::before, .primary-content .mj-paycredit-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--mj-line-soft); }
@media (max-width: 575.98px) { .primary-content .btn.mj-paycredit-btn { width: 100%; justify-content: center; } }


/* ---- Quelle: 38-module-fluxpanel.css ---------------------------------------- */
/* ============================================================================
   38 - Modulausgabe im Dienst (FluxPanel WireGuard: Geraete/Peers)
   Das Modul liefert Bootstrap-3-Markup (label, panel, form-inline). nexus ist
   Bootstrap 4 und kennt diese Klassen nicht - deshalb hier komplett gestaltet.
   Alles haengt an .mj-module (clientareaproductdetails.tpl).
   ========================================================================== */

.primary-content .mj-module > .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px !important; }
.primary-content .mj-module > .row > [class*="col-"] { flex: none; max-width: none; width: auto; padding: 14px 16px; border: 1px solid var(--mj-line); border-radius: 14px; background: var(--mj-surface); color: var(--mj-text); font-size: 14px; font-weight: 600; line-height: 1.5; font-variant-numeric: tabular-nums; }
.primary-content .mj-module > .row strong { display: block; margin: 0 0 2px; color: var(--mj-muted-2); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.primary-content .mj-module > .row br { display: none; }
.primary-content .mj-module code { padding: 0; background: none; color: var(--mj-brand-light, var(--mj-brand)); font-family: var(--mj-font); font-size: 14px; font-weight: 600; word-break: break-all; }

/* Bootstrap-3-Labels */
.primary-content .mj-module .label { display: inline-block; padding: 3px 10px; border-radius: var(--mj-r-pill); font-size: 11.5px; font-weight: 700; line-height: 1.5; }
.primary-content .mj-module .label-success { border: 1px solid rgba(34, 197, 94, .4); background: rgba(34, 197, 94, .12); color: #86efac; }
.primary-content .mj-module .label-warning { border: 1px solid rgba(245, 158, 11, .4); background: rgba(245, 158, 11, .12); color: #fcd34d; }
.primary-content .mj-module .label-default { border: 1px solid var(--mj-line); background: var(--mj-surface-2); color: var(--mj-muted-2); }

/* Bootstrap-3-Panels */
.primary-content .mj-module .panel { margin: 0 0 16px; border: 1px solid var(--mj-line); border-radius: 16px; background: var(--mj-surface); overflow: hidden; }
.primary-content .mj-module .panel-success { border-color: rgba(34, 197, 94, .4); }
.primary-content .mj-module .panel-heading { padding: 14px 18px; border-bottom: 1px solid var(--mj-line-soft); color: var(--mj-text); font-size: 14.5px; }
.primary-content .mj-module .panel-body { padding: 18px; }
.primary-content .mj-module .panel-body > :last-child { margin-bottom: 0; }
.primary-content .mj-module .text-muted { color: var(--mj-muted-2) !important; font-size: 13.5px; }

/* Geraet hinzufuegen: Feld und Knopf in einer Zeile, Knopf immer sichtbar */
.primary-content .mj-module > .panel form.form-inline { display: flex; flex-flow: row nowrap; align-items: stretch; gap: 10px; margin: 0 0 16px !important; }
.primary-content .mj-module > .panel form.form-inline .form-control { flex: 1 1 auto; width: auto; min-width: 0; max-width: 420px; height: auto; padding: 11px 14px; border: 1px solid var(--mj-line); border-radius: 12px; background: var(--mj-surface-3); color: var(--mj-text); }
.primary-content .mj-module > .panel form.form-inline .form-control:focus { border-color: var(--mj-brand); box-shadow: 0 0 0 3px var(--mj-brand-a20); }
body .primary-content .mj-module > .panel .btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; visibility: visible !important; opacity: 1 !important; padding: 10px 18px; border-radius: var(--mj-r-pill); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
body .primary-content .mj-module > .panel .btn-sm { padding: 6px 14px; font-size: 12.5px; }
body .primary-content .mj-module > .panel .btn-success,
body .primary-content .mj-module > .panel .btn-primary { border: 1px solid var(--mj-brand) !important; background: var(--mj-brand) !important; color: var(--mj-on-brand) !important; box-shadow: 0 10px 24px -12px var(--mj-brand-a60); }
body .primary-content .mj-module > .panel .btn-success:hover,
body .primary-content .mj-module > .panel .btn-primary:hover { filter: brightness(1.1); }
body .primary-content .mj-module > .panel .btn-default { border: 1px solid var(--mj-line) !important; background: var(--mj-surface-2) !important; color: var(--mj-text-2) !important; }
body .primary-content .mj-module > .panel .btn-default:hover { border-color: var(--mj-line-strong) !important; color: var(--mj-text) !important; }
body .primary-content .mj-module > .panel .btn-danger { border: 1px solid rgba(239, 68, 68, .45) !important; background: rgba(239, 68, 68, .1) !important; color: #fca5a5 !important; }
body .primary-content .mj-module > .panel .btn-danger:hover { background: rgba(239, 68, 68, .2) !important; color: #fecaca !important; }

/* Geraeteliste */
.primary-content .mj-module .panel .table { margin: 0; color: var(--mj-text-2); font-size: 13.5px; }
.primary-content .mj-module .panel .table th { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--mj-line); color: var(--mj-muted-2); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.primary-content .mj-module .panel .table td { padding: 12px; border: 0; border-bottom: 1px solid var(--mj-line-soft); background: transparent !important; color: var(--mj-text); vertical-align: middle; }
.primary-content .mj-module .panel .table tr:last-child td { border-bottom: 0; }
.primary-content .mj-module .panel .table td.text-right { white-space: nowrap; }
.primary-content .mj-module .panel .table td.text-right form + form { margin-left: 6px; }

/* Neue Konfiguration */
.primary-content .mj-module textarea.form-control { border: 1px solid var(--mj-line); border-radius: 12px; background: #08080a; color: var(--mj-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.55; }
.primary-content .mj-module .alert { border-radius: 12px; font-size: 13.5px; }

@media (max-width: 767.98px) {
    .primary-content .mj-module > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .primary-content .mj-module > .panel form.form-inline { flex-wrap: wrap; }
    .primary-content .mj-module > .panel form.form-inline .form-control { max-width: none; flex-basis: 100%; }
    .primary-content .mj-module .panel .table td.text-right { white-space: normal; }
}

/* 30-clientarea setzt in diesem Reiter alle Spalten ausser der ersten auf
   Monospace 12,5px (fuer SSH-Keys). Die Kacheln des Moduls davon ausnehmen. */
html body .product-details-tab-container .tab-pane .mj-module > .row > div:not(:first-child) {
    font-family: var(--mj-font);
    font-size: 14px;
    word-break: normal;
}
html body .product-details-tab-container .tab-pane .mj-module > .row > div:not(:first-child) strong { font-size: 11px; }


/* ---- Quelle: 40-orderform.css ---------------------------------------- */
/* ============================================================================
   40 - Bestellformular (standard_cart / mamjahn_cart)
   ----------------------------------------------------------------------------
   Das Original in orderforms/standard_cart/css/style.css arbeitet mit hellen
   Festwerten: #058 als Blau, #f8f8f8 und #eee als Flächen, #666 für die
   Bestellübersicht. Alle sichtbaren Stellen werden hier dunkel nachgezogen.
   Layout (float, 25/75 Prozent) bleibt unangetastet.
   ========================================================================== */

body #order-standard_cart {
    color: var(--mj-text-2);
    font-family: var(--mj-font);
}

/* ---------------------------------------------------------------------------
   Seitenleiste der Kategorien
   ------------------------------------------------------------------------ */

body #order-standard_cart .cart-sidebar .card,
body #order-standard_cart .cart-sidebar .panel,
body #order-standard_cart .cart-sidebar .card-sidebar {
    margin-bottom: 14px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
    overflow: hidden;
}

body #order-standard_cart .cart-sidebar .card-header,
body #order-standard_cart .cart-sidebar .panel-heading {
    padding: 13px 18px;
    background-color: transparent;
    border-bottom: 1px solid var(--mj-line-soft);
    color: var(--mj-text);
    font-weight: 700;
}

body #order-standard_cart .cart-sidebar h3,
body #order-standard_cart .sidebar-collapsed h3,
body #order-standard_cart .cart-sidebar .panel-title,
body #order-standard_cart .cart-sidebar .card-title {
    margin: 0;
    color: var(--mj-text);
    font-size: 14px;
    font-weight: 700;
}

body #order-standard_cart .cart-sidebar .card-footer,
body #order-standard_cart .cart-sidebar .panel-footer {
    background-color: transparent;
    border-top: 1px solid var(--mj-line-soft);
}

body #order-standard_cart .cart-sidebar .list-group-item {
    position: relative;
    margin: 0;
    padding: 10px 18px;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--mj-line-soft);
    color: var(--mj-text-2);
    font-size: 14px;
    font-weight: 500;
}

body #order-standard_cart .cart-sidebar .list-group-item:first-child {
    border-radius: 0;
}

body #order-standard_cart .cart-sidebar .list-group-item:last-child {
    border-bottom: 0;
}

body #order-standard_cart .cart-sidebar .list-group-item:hover {
    background-color: var(--mj-surface-3);
    color: var(--mj-text);
}

body #order-standard_cart .cart-sidebar .list-group-item.active,
body #order-standard_cart .cart-sidebar .list-group-item.active:hover {
    background-color: var(--mj-brand-a15);
    color: var(--mj-brand);
    font-weight: 600;
}

body #order-standard_cart .cart-sidebar .list-group-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--mj-brand);
}

body #order-standard_cart .cart-sidebar .list-group-item .badge {
    background-color: var(--mj-surface-3);
    color: var(--mj-muted);
}

body #order-standard_cart .cart-sidebar .card-minimise,
body #order-standard_cart .cart-sidebar .panel-minimise {
    color: var(--mj-muted-2);
    cursor: pointer;
}

body #order-standard_cart .sidebar-collapsed {
    margin-top: 20px;
    padding: 12px 16px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
}

/* ---------------------------------------------------------------------------
   Kopfzeilen und Trenner
   ------------------------------------------------------------------------ */

body #order-standard_cart .cart-body .header-lined {
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--mj-line-soft);
}

body #order-standard_cart .cart-body .header-lined h1 {
    margin-bottom: 6px;
    color: var(--mj-text);
    font-weight: 900;
    letter-spacing: -.025em;
}

body #order-standard_cart .cart-body .header-lined p {
    margin: 0;
    color: var(--mj-muted);
}

body #order-standard_cart .font-size-36 { font-size: clamp(1.75rem, 3.4vw, 2.3rem); }
body #order-standard_cart .font-size-30 { font-size: 1.6rem; }
body #order-standard_cart .font-size-24 { font-size: 1.35rem; }
body #order-standard_cart .font-size-22 { font-size: 1.2rem; }

/* Abschnittstrenner: im Original eine Linie mit zentriertem blauen Text
   auf weißem Fond. */
body #order-standard_cart .sub-heading,
body #order-standard_cart .sub-heading-borderless {
    height: 0;
    margin-top: 34px;
    margin-bottom: 34px;
    border-top: 1px solid var(--mj-line);
    text-align: center;
}

body #order-standard_cart .sub-heading-borderless {
    border-top: 0;
}

body #order-standard_cart .sub-heading span,
body #order-standard_cart .sub-heading-borderless span {
    display: inline-block;
    position: relative;
    top: -13px;
    padding: 0 18px;
    background: var(--mj-black);
    color: var(--mj-text);
    font-size: 15px;
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Produktkarten
   ------------------------------------------------------------------------ */

body #order-standard_cart .products {
    margin: 14px 0;
}

body #order-standard_cart .products .product,
body #order-standard_cart .products .mj-product {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    padding: 0;
    margin: 0 0 22px;
    background: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-xl);
    transition: transform .3s ease, border-color .3s ease;
}

/* Akzent-Glow oben rechts, erscheint beim Ueberfahren. */
body #order-standard_cart .products .product::after {
    content: "";
    position: absolute;
    top: -110px;
    right: -110px;
    width: 240px;
    height: 240px;
    border-radius: var(--mj-r-pill);
    background: var(--mj-brand-a20);
    filter: blur(90px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}

body #order-standard_cart .products .product:hover {
    transform: translateY(-4px);
    border-color: var(--mj-brand-a60);
}

body #order-standard_cart .products .product:hover::after {
    opacity: 1;
}

body #order-standard_cart .products .product header {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 18px 22px 14px;
    background: transparent;      /* Original: #f8f8f8 */
    border-bottom: 1px solid var(--mj-line-soft);
    border-radius: 0;
}

body #order-standard_cart .products .product header span {
    margin: 0;
    color: var(--mj-text);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

body #order-standard_cart .products .product header .qty {
    float: right;
    color: var(--mj-muted-2);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

body #order-standard_cart .products .product div.product-desc {
    position: relative;
    z-index: 1;
    float: none;
    flex: 1 1 auto;
    width: auto;
    padding: 16px 22px 6px;
    font-size: 14px;
    color: var(--mj-muted);
}

body #order-standard_cart .products .product div.product-desc p {
    margin-bottom: 12px;
    color: var(--mj-muted);
}

body #order-standard_cart .products .product div.product-desc ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body #order-standard_cart .products .product div.product-desc li {
    position: relative;
    padding: 5px 0 5px 24px;
    color: var(--mj-text-2);
    font-size: 14px;
    font-weight: 500;
}

/* Haken statt Aufzählungspunkt.
   WHMCS 9.0 liefert Font Awesome Pro 6.7 aus (die Angabe "5.10.1" in
   theme.yaml stammt noch vom Elternteil). Der Stapel deckt Pro und Free
   in Version 6 und 5 ab, damit das Zeichen auch nach einem Wechsel steht.
   font-weight 900 wählt innerhalb der Familie den soliden Schnitt. */
body #order-standard_cart .products .product div.product-desc li::before {
    content: "\f00c";
    position: absolute;
    left: 0;
    top: 6px;
    color: var(--mj-brand);
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free",
                 "Font Awesome 5 Pro", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: 12px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

body #order-standard_cart .products .product span.feature-value {
    color: var(--mj-text);
    font-weight: 700;
}

body #order-standard_cart .products .product select {
    width: 100%;
    text-overflow: ellipsis;
}

body #order-standard_cart .products .product footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    float: none;
    width: auto;
    margin: 0;
    margin-top: auto;
    padding: 16px 22px 20px;
    border-top: 1px solid var(--mj-line-soft);
    font-size: 14px;
    text-align: left;
}

body #order-standard_cart .products .product div.product-pricing {
    margin: 0;
    color: var(--mj-muted-2);
    font-size: 12px;
    line-height: 1.5;
}

body #order-standard_cart .products .product div.product-pricing span.price {
    display: block;
    color: var(--mj-text);
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
}

body #order-standard_cart .products .product div.product-pricing small {
    color: var(--mj-muted-2);
}

.mj-price-label {
    display: block;
    color: var(--mj-muted-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Bestellknopf als Pille in Markenfarbe. */
body #order-standard_cart .btn-order-now,
body #order-standard_cart .mj-btn-order {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: .6rem 1.4rem;
    background: var(--mj-brand);
    border: 0;
    border-radius: var(--mj-r-pill);
    color: var(--mj-on-brand);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--mj-glow);
    transition: background-color .2s ease, transform .15s ease;
}

body #order-standard_cart .btn-order-now:hover,
body #order-standard_cart .mj-btn-order:hover {
    background: var(--mj-brand-light);
    color: var(--mj-on-brand);
    transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   Warenkorb
   ------------------------------------------------------------------------ */

body #order-standard_cart .view-cart-items-header {
    margin: 0;
    padding: 12px 16px;
    background-color: var(--mj-surface-2);   /* Original: #058 */
    border: 1px solid var(--mj-line-soft);
    border-bottom: 0;
    border-radius: var(--mj-r-lg) var(--mj-r-lg) 0 0;
    color: var(--mj-muted-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body #order-standard_cart .view-cart-items {
    margin: 0 0 22px;
    border-bottom: 0;                        /* Original: 2px solid #058 */
    border-radius: 0 0 var(--mj-r-lg) var(--mj-r-lg);
}

body #order-standard_cart .view-cart-items .item {
    margin: 0;
    padding: 16px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-top: 0;
    font-size: 14px;
}

body #order-standard_cart .view-cart-items .item:nth-child(even) {
    background-color: var(--mj-surface);     /* Original: #eee als Zebrastreifen */
}

body #order-standard_cart .view-cart-items .item:last-child {
    border-radius: 0 0 var(--mj-r-lg) var(--mj-r-lg);
}

body #order-standard_cart .view-cart-items .item-title {
    color: var(--mj-text);
    font-size: 1.05rem;
    font-weight: 700;
}

body #order-standard_cart .view-cart-items .item-group {
    color: var(--mj-muted-2);
    font-size: 13px;
}

body #order-standard_cart .view-cart-items .item-domain {
    color: var(--mj-brand);
    font-size: 13px;
}

body #order-standard_cart .view-cart-items .item-price {
    text-align: right;
}

body #order-standard_cart .view-cart-items .item-price span {
    color: var(--mj-text);
    font-size: 1.25rem;
    font-weight: 800;
}

body #order-standard_cart .view-cart-items .item-price .cycle {
    color: var(--mj-muted-2);
    font-size: 12px;
    font-weight: 500;
}

body #order-standard_cart .view-cart-items .item-qty {
    text-align: center;
}

body #order-standard_cart .view-cart-items .item-qty input {
    margin-bottom: 6px;
    padding: 5px;
    height: auto;
    text-align: center;
}

body #order-standard_cart .btn-remove-from-cart {
    color: var(--mj-muted-2);
}

body #order-standard_cart .btn-remove-from-cart:hover {
    color: var(--mj-err);
}

body #order-standard_cart .empty-cart {
    margin: -22px 8px 0 0;
    text-align: right;
}

body #order-standard_cart .empty-cart .btn {
    margin: 0;
    padding: 5px 14px;
    background-color: var(--mj-surface-2);   /* Original: #058 */
    border: 1px solid var(--mj-line-soft);
    border-top: 0;
    border-radius: 0 0 var(--mj-r-sm) var(--mj-r-sm);
    color: var(--mj-muted);
    font-size: 12px;
}

body #order-standard_cart .empty-cart .btn:hover {
    color: var(--mj-err);
}

body #order-standard_cart .view-cart-empty {
    padding: 44px 16px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-top: 0;
    border-radius: 0 0 var(--mj-r-lg) var(--mj-r-lg);
    color: var(--mj-muted);
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Bestellübersicht
   ------------------------------------------------------------------------ */

body #order-standard_cart .order-summary {
    margin: 0 0 22px;
    padding: 0;
    background-color: transparent;           /* Original: #666 */
    border-bottom: 0;
    border-radius: var(--mj-r-lg);
}

body #order-standard_cart .order-summary h2 {
    margin: 0;
    padding: 14px 18px;
    background-color: var(--mj-surface-2);
    border: 1px solid var(--mj-line-soft);
    border-bottom: 0;
    border-radius: var(--mj-r-lg) var(--mj-r-lg) 0 0;
    color: var(--mj-text);
    font-size: 1.05rem;
    font-weight: 800;
    text-align: left;
}

body #order-standard_cart .summary-container {
    margin: 0;
    padding: 18px;
    min-height: 100px;
    background-color: var(--mj-surface);     /* Original: #f8f8f8 */
    border: 1px solid var(--mj-line-soft);
    border-top: 0;
    border-radius: 0 0 var(--mj-r-lg) var(--mj-r-lg);
    font-size: 14px;
}

body #order-standard_cart .order-summary .product-name {
    display: block;
    color: var(--mj-text);
    font-size: 1.05rem;
    font-weight: 700;
}

body #order-standard_cart .order-summary .product-group {
    display: block;
    margin: 0 0 6px;
    color: var(--mj-muted-2);
    font-style: normal;
    font-size: 13px;
}

body #order-standard_cart .order-summary .subtotal {
    margin: 0;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--mj-line-soft);
    font-size: 1.05rem;
}

body #order-standard_cart .order-summary .summary-totals,
body #order-standard_cart .order-summary .bordered-totals {
    margin: 8px 0;
    padding: 8px 0;
    border-top: 1px solid var(--mj-line-soft);
    border-bottom: 1px solid var(--mj-line-soft);
}

body #order-standard_cart .order-summary .recurring-totals {
    margin: 8px 0 0;
    padding: 0;
}

body #order-standard_cart .order-summary .recurring-charges {
    color: var(--mj-muted-2);
    font-size: 13px;
    font-style: normal;
    text-align: right;
}

body #order-standard_cart .order-summary .total-due-today {
    color: var(--mj-muted);
}

body #order-standard_cart .order-summary .total-due-today span {
    display: block;
    text-align: right;
}

body #order-standard_cart .order-summary .total-due-today .amt {
    color: var(--mj-brand);
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
}

body #order-standard_cart .order-summary .total-due-today-padded {
    margin: 20px 0;
}

body #order-standard_cart .order-summary .loader {
    color: var(--mj-muted-2);
}

body #order-standard_cart .order-summary i.fa-trash {
    color: var(--mj-muted-2);
}

body #order-standard_cart .order-summary i.fa-trash:hover {
    color: var(--mj-err);
}

body #order-standard_cart .order-summary .btn-continue-shopping,
body #order-standard_cart .btn-continue-shopping {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    color: var(--mj-muted);
    font-size: 14px;
}

body #order-standard_cart .btn-continue-shopping:hover {
    color: var(--mj-brand);
}

body #order-standard_cart .btn-checkout {
    width: 100%;
    padding: .9rem 2rem;
    background: var(--mj-brand);
    border: 0;
    border-radius: var(--mj-r-pill);
    color: var(--mj-on-brand);
    font-size: 16px;
    font-weight: 700;
    box-shadow: var(--mj-glow);
}

body #order-standard_cart .btn-checkout:hover {
    background: var(--mj-brand-light);
    color: var(--mj-on-brand);
}

body #order-standard_cart .btn-checkout.disabled {
    background: var(--mj-line);
    color: var(--mj-muted-2);
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Gutschein und Steuerrechner
   ------------------------------------------------------------------------ */

body #order-standard_cart .view-cart-tabs .nav-tabs {
    border-bottom: 0;
}

body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link {
    color: var(--mj-muted);
}

body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-bottom: 0;
    border-radius: var(--mj-r-md) var(--mj-r-md) 0 0;
    color: var(--mj-brand);
}

body #order-standard_cart .view-cart-tabs .tab-content {
    padding: 16px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: 0 var(--mj-r-md) var(--mj-r-md) var(--mj-r-md);
}

body #order-standard_cart .view-cart-tabs .promo .form-group {
    margin-bottom: 10px;
}

body #order-standard_cart .view-cart-promotion-code {
    color: var(--mj-ok);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Produktkonfiguration
   ------------------------------------------------------------------------ */

body #order-standard_cart .product-info {
    margin: 0 0 22px;
    padding: 14px 18px;
    background-color: var(--mj-surface);     /* Original: #f8f8f8 */
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
    font-size: 14px;
}

body #order-standard_cart .product-info .product-title {
    margin: 0 0 6px;
    color: var(--mj-text);
    font-size: 1.5rem;
    font-weight: 800;
}

body #frmConfigureProduct .form-group {
    margin-bottom: 1.4rem;
}

body #frmConfigureProduct label {
    color: var(--mj-text-2);
    font-weight: 600;
}

body #frmConfigureProduct .form-control {
    color: var(--mj-text);
}

body #order-standard_cart .field-help-text {
    display: block;
    margin-top: 6px;
    margin-bottom: 10px;
    color: var(--mj-muted-2);
    font-size: 12px;
    font-weight: 400;
}

/* ---- Hostname-Auswahl -------------------------------------------------- */
/* Markup aus mamjahn_cart/configureproduct.tpl: links die Auswahl
   #mjHostMode, rechts die Gruppe .mj-host-custom mit dem WHMCS-Feld
   #inputHostname. Sichtbarkeit steuert js/mj-hostname.js über [hidden]. */

body #order-standard_cart .mj-host-block .field-help-text {
    display: block;
    margin-top: 7px;
    margin-bottom: 0;
    color: var(--mj-muted-2);
    font-size: 12px;
    line-height: 1.5;
}

body #order-standard_cart .mj-host-hint:empty {
    display: none;
}

body #order-standard_cart .mj-host-custom {
    animation: mj-fade-up .25s ease;
}

body #order-standard_cart select.mj-host-mode--custom {
    border-color: var(--mj-brand-a60);
}

body #order-standard_cart .mj-host-invalid,
body #order-standard_cart .mj-host-invalid:focus {
    border-color: var(--mj-err);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .2);
}

body #order-standard_cart .mj-host-note--ok    { color: var(--mj-ok); }
body #order-standard_cart .mj-host-note--error { color: #fca5a5; }

/* ---- Zusatzoptionen als anklickbare Karten ------------------------------ */

body #order-standard_cart .panel-addon {
    overflow: hidden;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
    font-size: 14px;
    text-align: center;
    transition: border-color .2s ease, transform .2s ease;
}

body #order-standard_cart .panel-addon:hover {
    border-color: var(--mj-brand-a60);
    transform: translateY(-2px);
    cursor: pointer;
}

body #order-standard_cart .panel-addon .panel-body {
    padding: 16px;
    border-radius: 0;
    color: var(--mj-muted);
}

body #order-standard_cart .panel-addon .panel-body label {
    color: var(--mj-text);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

body #order-standard_cart .panel-addon .panel-price {
    padding: 8px;
    background-color: var(--mj-surface-2);   /* Original: #e8e8e8 */
    color: var(--mj-text-2);
    font-weight: 600;
}

body #order-standard_cart .panel-addon .panel-add {
    display: block;
    padding: 9px;
    background-color: var(--mj-surface-3);   /* Original: #5cb85c */
    border-radius: 0;
    color: var(--mj-muted);
    font-weight: 700;
}

body #order-standard_cart .panel-addon-selected {
    border-color: var(--mj-brand);
    background-color: var(--mj-brand-a10);
}

body #order-standard_cart .panel-addon-selected .panel-add {
    background-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

/* ---- Domainauswahl im Bestellweg ---------------------------------------- */

body #order-standard_cart .domain-selection-options {
    background: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
    overflow: hidden;
}

body #order-standard_cart .domain-selection-options .option {
    margin: 0;
    padding: 16px 18px;
    background-color: transparent;
    border-bottom: 1px solid var(--mj-line-soft);
}

body #order-standard_cart .domain-selection-options .option:last-child {
    border-bottom: 0;
}

body #order-standard_cart .domain-selection-options .option:hover {
    background-color: var(--mj-surface-3);
}

body #order-standard_cart .domain-selection-options .option-selected {
    background: var(--mj-brand-a10);
}

body #order-standard_cart .domain-selection-options .option-selected label {
    color: var(--mj-text);
    font-weight: 700;
}

body #order-standard_cart .domain-selection-options .domain-input-group input::placeholder {
    color: var(--mj-muted-2);
}

body #order-standard_cart .addon-promo-container {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
}

body #order-standard_cart .addon-promo-container h3 {
    color: var(--mj-text);
}

body #order-standard_cart .addon-promo-container .description {
    color: var(--mj-muted);
}

/* ---------------------------------------------------------------------------
   Kasse
   ------------------------------------------------------------------------ */

body #order-standard_cart .field,
body #order-standard_cart .form-control {
    background-color: var(--mj-surface-3);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-md);
    color: var(--mj-text);
}

body #order-standard_cart .form-control:focus,
body #order-standard_cart .field:focus {
    border-color: var(--mj-brand);
    box-shadow: 0 0 0 3px var(--mj-brand-a20);
    outline: 0;
}

body #order-standard_cart .field[disabled],
body #order-standard_cart .field[readonly],
body #order-standard_cart .form-control[disabled],
body #order-standard_cart .form-control[readonly] {
    background-color: var(--mj-surface-2);
    color: var(--mj-muted);
    opacity: 1;
}

body #order-standard_cart .field::placeholder,
body #order-standard_cart .form-control::placeholder {
    color: var(--mj-muted-2);
}

body #order-standard_cart .field-icon i,
body #order-standard_cart .prepend-icon .field-icon i {
    color: var(--mj-muted-2);
}

body #order-standard_cart textarea.field {
    min-height: 90px;
}

/* Auswahl bestehender Konten */
body #order-standard_cart .account-select-container {
    margin: 0;
    border-right: 0;
}

body #order-standard_cart .account-select-container div.account {
    padding: 14px;
    background: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-right: 1px solid var(--mj-line-soft);
    color: var(--mj-text-2);
}

body #order-standard_cart .account-select-container div.account:not(.border-bottom) {
    border-bottom: 0;
}

body #order-standard_cart .account-select-container div.account.active {
    background: var(--mj-brand-a10);
    border-color: var(--mj-brand-a40);
    color: var(--mj-text);
}

/* Zahlungsarten */
body #order-standard_cart .cc-input-container {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
    color: var(--mj-text-2);
}

body #order-standard_cart .cc-input-container .paymethod-info {
    color: var(--mj-muted);
}

body #order-standard_cart .cc-input-container ul li {
    color: var(--mj-text-2);
}

body #frmCheckout #creditCardInputFields {
    padding: 16px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
}

body #frmCheckout #creditCardInputFields input::placeholder {
    color: var(--mj-muted-2);
}

body #order-standard_cart .checkout-security-msg {
    margin: 22px 0;
    padding-left: 72px;
    background-color: transparent;
    border: 0;
    color: var(--mj-muted-2);
    font-size: 13px;
}

body #order-standard_cart .checkout-security-msg i {
    float: left;
    margin-left: -48px;
    color: var(--mj-ok);
    font-size: 2.6em;
}

body #order-standard_cart .checkout-error-feedback {
    margin-bottom: 18px;
}

body #order-standard_cart .express-checkout-buttons .separator {
    color: var(--mj-muted-2);
}

body #order-standard_cart .apply-credit-container {
    padding: 14px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
}

body #order-standard_cart .panel-taxes {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
}

/* ---------------------------------------------------------------------------
   Bestätigungsseite
   ------------------------------------------------------------------------ */

body #order-standard_cart .order-confirmation {
    padding: 22px;
    text-align: center;
}

body #order-standard_cart .order-confirmation span {
    display: inline-block;
    margin-top: 6px;
    color: var(--mj-brand);
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

body #order-standard_cart .order-confirmation-addon-output {
    margin: 16px 0;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Domainsuche und Preistabellen
   ------------------------------------------------------------------------ */

.domain-checker-container,
.domain-checker-bg {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
}

.domain-checker-available {
    color: var(--mj-ok);
}

.domain-checker-invalid,
.transfer-not-eligible {
    color: var(--mj-err);
}

.transfer-eligible {
    color: var(--mj-ok);
}

.domain-checker-result-headline {
    color: var(--mj-text);
    font-weight: 700;
}

.domain-bulk-domain-well,
.domain-bulk-options-box,
.domain-disclaimer-area,
.domain-step-options {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
    color: var(--mj-text-2);
}

.domain-promo-box {
    background: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
    color: var(--mj-text-2);
}

.domain-promo-box h3 {
    color: var(--mj-text);
}

.domain-promo-box .text-primary {
    color: var(--mj-brand) !important;  /* Bootstrap-Utility setzt !important */
}

.spotlight-tld,
.spotlight-tld-container {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
    color: var(--mj-text-2);
}

.spotlight-tld .invalid {
    color: var(--mj-err);
}

.suggested-domains .card-header {
    background-color: var(--mj-surface-2);
    color: var(--mj-text);
}

.suggested-domains .list-group-item {
    background-color: var(--mj-surface);
    border-color: var(--mj-line-soft);
    color: var(--mj-text-2);
}

.suggested-domains .price {
    color: var(--mj-text);
    font-weight: 700;
}

.suggested-domains .extension {
    color: var(--mj-brand);
}

.domain-pricing .tld-row,
.domain-pricing .tld-pricing-header > div {
    background-color: var(--mj-surface);
    border-color: var(--mj-line-soft);
    color: var(--mj-text-2);
}

.domain-pricing .tld-row.highlighted {
    background-color: var(--mj-surface-3);
}

.domain-pricing .tld-row.no-tlds {
    color: var(--mj-muted-2);
}

.domain-pricing .featured-tld {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
}

.domain-tld-pricing-table-responsive,
a.domain-tld-pricing-category {
    color: var(--mj-text-2);
}

/* ---------------------------------------------------------------------------
   Verlängerungen
   ------------------------------------------------------------------------ */

.service-renewals .service-renewal,
.addon-renewals .service-renewal {
    background-color: var(--mj-surface);
    border-bottom: 1px solid var(--mj-line-soft);
    color: var(--mj-text-2);
}

.service-renewals .service-renewal:nth-child(even),
.addon-renewals .service-renewal:nth-child(even) {
    background-color: var(--mj-surface);
}

.service-renewals .service-renewal h3 {
    color: var(--mj-text);
}

.service-renewals .div-renewal-period-label {
    color: var(--mj-muted-2);
}

.service-renewals .div-renewal-ineligible {
    color: var(--mj-muted-2);
}

/* ---------------------------------------------------------------------------
   Werbeflächen von MarketConnect
   ------------------------------------------------------------------------ */

body #order-standard_cart .mc-promo {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
    color: var(--mj-text-2);
}

body #order-standard_cart .mc-promo .header {
    background-color: var(--mj-surface-2);
    border-bottom: 1px solid var(--mj-line-soft);
}

body #order-standard_cart .mc-promo .body {
    background-color: var(--mj-surface);
    border-top: 0;
    border-radius: 0 0 var(--mj-r-md) var(--mj-r-md);
}

body #order-standard_cart .mc-promo .headline {
    color: var(--mj-text);
}

body #order-standard_cart .mc-promo .tagline,
body #order-standard_cart .mc-promo .text {
    color: var(--mj-muted);
}

body #order-standard_cart .mc-promo .price {
    color: var(--mj-text);
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Responsiv: unter 768px stehen Seitenleiste und Inhalt untereinander
   ------------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    body #order-standard_cart .cart-sidebar,
    body #order-standard_cart .cart-body,
    body #order-standard_cart .secondary-cart-body,
    body #order-standard_cart .secondary-cart-sidebar {
        float: none;
        width: 100%;
    }

    body #order-standard_cart .products .product footer {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    body #order-standard_cart .btn-order-now,
    body #order-standard_cart .mj-btn-order {
        justify-content: center;
    }
}


/* ---------------------------------------------------------------------------
   Nachgemessen auf cp.mam-jahn.de: nexus stellt seinen Warenkorb-Regeln
   "body" und teils weitere Klassen voran (theme.css, Bereich
   "body #order-standard_cart ..."). Die folgenden Regeln spiegeln genau diese
   Ketten, damit sie bei gleicher Stärke durch die spätere Ladeposition gewinnen
   oder das Elternteil um eine Klasse übertreffen.
   ------------------------------------------------------------------------ */

/* Produktkarten: nexus setzt .product und header auf white */
body #order-standard_cart .cart-body .products .product {
    padding: 0;
    background: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-xl);
}

body #order-standard_cart .cart-body .products .product header {
    margin: 0;
    background: transparent;
    border-bottom: 1px solid var(--mj-line-soft);
}

body #order-standard_cart .cart-body .products .product footer {
    margin: 0;
    margin-top: auto;
}

/* Bestellknopf: nexus färbt ihn mit --bg-inverted, bei uns wäre das schwarz */
body #order-standard_cart .products .product footer .btn-order-now,
body #order-standard_cart .products .product footer .mj-btn-order {
    padding: .6rem 1.4rem;
    background: var(--mj-brand);
    border-color: var(--mj-brand);
    border-radius: var(--mj-r-pill);
    color: var(--mj-on-brand);
}

body #order-standard_cart .products .product footer .btn-order-now:hover,
body #order-standard_cart .products .product footer .btn-order-now:focus,
body #order-standard_cart .products .product footer .mj-btn-order:hover {
    background: var(--mj-brand-light);
    border-color: var(--mj-brand-light);
    color: var(--mj-on-brand);
}

/* Seitenleiste: die Kategorienkarte trägt .panel, nexus macht .panel-heading white */
body #order-standard_cart .panel .panel-heading {
    background: transparent;
    border-radius: 0;
    color: var(--mj-text);
}

body #order-standard_cart .panel .panel-footer {
    background: transparent;
}

body #order-standard_cart .panel label {
    color: var(--mj-text-2);
}

/* Abschnittstrenner: nexus setzt #f8f9fa auf den span */
body #order-standard_cart .sub-heading span,
body #order-standard_cart .sub-heading span.primary-bg-color,
body #order-standard_cart .sub-heading-borderless span.primary-bg-color {
    background: var(--mj-black);
    color: var(--mj-text);
}

/* Reiter Gutschein / Steuer im Warenkorb */
body #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs a[aria-expanded=true],
body #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs a[aria-selected=true],
body #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs a.active {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-bottom: 0;
    border-radius: var(--mj-r-md) var(--mj-r-md) 0 0;
    color: var(--mj-brand);
}

/* Kassenknopf */
body #order-standard_cart .text-right .btn-checkout {
    background: var(--mj-brand);
    border-color: var(--mj-brand);
    border-radius: var(--mj-r-pill);
    color: var(--mj-on-brand);
}

body #order-standard_cart .text-right .btn-checkout:hover,
body #order-standard_cart .text-right .btn-checkout:focus {
    background: var(--mj-brand-light);
    border-color: var(--mj-brand-light);
    color: var(--mj-on-brand);
}

/* Beschriftungen: standard_cart setzt label auf #666 */
body #order-standard_cart label,
body #order-standard_cart .control-label,
body #order-standard_cart .radio,
body #order-standard_cart .radio-inline,
body #order-standard_cart .checkbox {
    color: var(--mj-text-2);
}

body #order-standard_cart .account-select-container .address,
body #order-standard_cart .account-select-container .address strong {
    color: var(--mj-text);
}

body #order-standard_cart .cart-body .view-cart-empty {
    background-color: var(--mj-surface);
}

body #order-standard_cart .domain-selection-options .option-selected {
    background: var(--mj-brand-a10);
}

/* MarketConnect-Werbung: Knopf mit dunkler Schrift auf dunklem Grund */
body #order-standard_cart .mc-promo .btn-add,
body #order-standard_cart .mc-promo .btn-add .text {
    background: var(--mj-brand);
    border-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

/* ---------------------------------------------------------------------------
   Abnahme-Rundgang: Preis brach in schmalen Karten um ("3,30" / "EUR").
   Preisblock und Knopf duerfen jetzt untereinander rutschen, der Preis
   selbst bleibt einzeilig.
   ------------------------------------------------------------------------ */
body #order-standard_cart .cart-body .products .product footer {
    flex-wrap: wrap;
    gap: 12px 14px;
}

body #order-standard_cart .products .product div.product-pricing {
    flex: 1 1 150px;
    min-width: 0;
}

body #order-standard_cart .products .product div.product-pricing span.price {
    white-space: nowrap;
    font-size: clamp(1.4rem, 1.5vw + .6rem, 1.9rem);
}

body #order-standard_cart .products .product footer .btn-order-now,
body #order-standard_cart .products .product footer .mj-btn-order {
    flex: 0 1 auto;
    max-width: 100%;
    justify-content: center;
}

/* ---------------------------------------------------------------------------
   Kartenvarianten (Auswahl des Kunden nach dem Rundgang)
   - .mj-products--compact auf #products: ohne Merkmalsliste, grosser Preis
   - .mj-popular auf einer Karte: Verlaufsrahmen plus Stern-Badge. Gesetzt von
     products.tpl, wenn die Beschreibung das Wort [beliebt] enthaelt.
   ------------------------------------------------------------------------ */
body #order-standard_cart .mj-products--compact .product div.product-desc { display: none; }
body #order-standard_cart .mj-products--compact .product header { border-bottom: 0; padding-bottom: 4px; }
body #order-standard_cart .mj-products--compact .product footer { border-top: 0; padding-top: 6px; }
body #order-standard_cart .mj-products--compact .products .product div.product-pricing span.price,
body #order-standard_cart .mj-products--compact .product div.product-pricing span.price { font-size: 2.2rem; }

body #order-standard_cart .cart-body .products .product.mj-popular {
    border-color: transparent;
    background:
        linear-gradient(var(--mj-surface), var(--mj-surface)) padding-box,
        linear-gradient(135deg, var(--mj-brand), var(--mj-brand-a40), #27272a) border-box;
    border: 1.5px solid transparent;
}
body #order-standard_cart .products .product.mj-popular::before {
    content: "°5  " attr(data-popular-label);
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 3px 12px 4px;
    border-radius: 0 0 12px 12px;
    background: var(--mj-brand);
    color: var(--mj-on-brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}
body #order-standard_cart .products .product.mj-popular header { padding-top: 26px; }

/* ---------------------------------------------------------------------------
   Kategorienleiste oben statt Seitenleiste links
   Die Seitenleiste nahm ein Viertel der Breite und liess drei Karten je Reihe
   nur 265px. Jetzt liegen Kategorien als Pillen ueber dem Inhalt, der Inhalt
   nutzt die volle Breite. Layout-Floats des Originals bleiben unangetastet,
   nur die Breiten aendern sich.
   ------------------------------------------------------------------------ */
html body #order-standard_cart .cart-sidebar {
    float: none;
    width: 100%;
    padding: 0 15px;
    margin-bottom: 8px;
}

html body #order-standard_cart .cart-body {
    float: none;
    width: 100%;
}

html body #order-standard_cart .cart-sidebar .card,
html body #order-standard_cart .cart-sidebar .panel,
html body #order-standard_cart .cart-sidebar .card-sidebar {
    display: inline-flex;
    vertical-align: top;
    width: auto;
    margin: 0 10px 12px 0;
    background: transparent;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

html body #order-standard_cart .cart-sidebar .card-header,
html body #order-standard_cart .cart-sidebar .panel-heading,
html body #order-standard_cart .cart-sidebar .card-footer,
html body #order-standard_cart .cart-sidebar .panel-footer {
    display: none;
}

html body #order-standard_cart .cart-sidebar .collapsable-card-body,
html body #order-standard_cart .cart-sidebar .list-group {
    display: flex !important;   /* das Elternteil schaltet per Inline-Style display:none/block */
    flex-direction: row;        /* Bootstrap setzt .list-group auf column */
    flex-wrap: wrap;
    gap: 8px;
    border: 0;
    border-radius: 0;
}

html body #order-standard_cart .cart-sidebar .list-group-item {
    width: auto !important;     /* Bootstrap: .list-group-item { width: 100% } */
    flex: 0 0 auto;
    padding: .45rem 1rem;
    margin: 0;
    border: 1px solid var(--mj-line) !important;
    border-radius: var(--mj-r-pill) !important;
    background: var(--mj-surface);
    color: var(--mj-muted);
    font-size: 13px;
    font-weight: 600;
}

html body #order-standard_cart .cart-sidebar .list-group-item:hover {
    border-color: var(--mj-line-strong);
    color: var(--mj-text);
}

html body #order-standard_cart .cart-sidebar .list-group-item.active,
html body #order-standard_cart .cart-sidebar .list-group-item.active:hover {
    background: var(--mj-brand-a15);
    border-color: var(--mj-brand);
    color: var(--mj-brand);
}

html body #order-standard_cart .cart-sidebar .list-group-item.active::before { display: none; }

/* Das eingeklappte Mobil-Menue des Originals wird dadurch ueberfluessig */
html body #order-standard_cart .sidebar-collapsed { display: none; }

/* Warenkorb-Ansicht behaelt Inhalt links / Uebersicht rechts */
@media (max-width: 991.98px) {
    body #order-standard_cart .secondary-cart-body,
    body #order-standard_cart .secondary-cart-sidebar { float: none; width: 100%; }
}

/* ---------------------------------------------------------------------------
   Produktkarte wie auf der Hauptseite, zweite Fassung: groesser, mit
   Akzentschimmer oben, Namens-Pille, grosser Kennzahl, Merkmalen als
   Zeilenliste und Preis/Button in einer Zeile. Markup von js/mj-products.js.
   Alle Farben ueber var(--mj-brand*), damit die Gruppen-Akzente greifen.
   ------------------------------------------------------------------------ */

/* Mehr Platz: im Warenkorb duerfen Kopf, Inhalt und Fuss bis 1320px breit
   werden, drei Karten je Reihe bekommen dann 420px statt 360px */
@media (min-width: 1400px) {
    html body:has(#order-standard_cart) .container { max-width: 1320px; }
}
@media (min-width: 1600px) {
    html body:has(#order-standard_cart) .container { max-width: 1440px; }
}

html body #order-standard_cart .products .product.mj-product {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-xl);
    background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 40px -30px rgba(0, 0, 0, .8);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Akzentschimmer und Lichtkante am oberen Rand */
html body #order-standard_cart .products .product.mj-product::before {
    content: '';
    position: absolute;
    inset: -1px -1px auto -1px;
    height: 220px;
    background: radial-gradient(60% 80% at 50% 0%, var(--mj-brand-a20) 0%, transparent 70%);
    pointer-events: none;
}

html body #order-standard_cart .products .product.mj-product::after {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    top: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--mj-brand), transparent);
}

html body #order-standard_cart .products .product.mj-product:hover {
    transform: translateY(-4px);
    border-color: var(--mj-brand-a60);
    box-shadow: 0 30px 60px -30px var(--mj-brand-a40);
}

@media (prefers-reduced-motion: reduce) {
    html body #order-standard_cart .products .product.mj-product,
    html body #order-standard_cart .products .product.mj-product:hover { transition: none; transform: none; }
}

/* Kopf: Pille mit Namen, darunter die Kennzahl, darunter die Verfuegbarkeit */
html body #order-standard_cart .cart-body .products .product header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 4px;
    padding: 30px 30px 18px;
    border: 0;
    background: transparent;
}

html body #order-standard_cart .products .product header .mj-pname {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    font-size: inherit;
}

html body #order-standard_cart .products .product header .mj-pname__name {
    display: inline-flex;
    align-items: center;
    padding: .3rem .8rem;
    border: 1px solid var(--mj-brand-a40);
    border-radius: var(--mj-r-pill);
    background: var(--mj-brand-a10);
    color: var(--mj-brand);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

html body #order-standard_cart .products .product header .mj-pname__value {
    color: var(--mj-text);
    font-size: 2.9rem;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    white-space: nowrap;
}

/* Name ohne Kennzahl (z. B. "Konfigurator"): kleiner und auf Hoehe der
   Kennzahl der Nachbarkarten, damit die Merkmallisten buendig liegen */
html body #order-standard_cart .products .product header .mj-pname__value--solo {
    font-size: 2.1rem;
    margin-top: 44px;
}

html body #order-standard_cart .products .product header .mj-pname__unit {
    margin-left: 6px;
    color: var(--mj-muted-2);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0;
}

html body #order-standard_cart .products .product header .qty.mj-pqty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    float: none;
    margin-top: 8px;
    color: var(--mj-muted-2);
    font-size: 12.5px;
}

html body #order-standard_cart .products .product header .qty.mj-pqty::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mj-brand);
    box-shadow: 0 0 0 3px var(--mj-brand-a20);
}

/* Merkmale als Zeilen mit Trennlinien, Haken im runden Akzentfeld */
html body #order-standard_cart .products .product div.product-desc { padding: 0 30px 18px; }

html body #order-standard_cart .products .product div.product-desc ul {
    padding: 6px 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--mj-line-soft);
    border-radius: 0;
}

html body #order-standard_cart .products .product div.product-desc li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--mj-line-soft);
    color: var(--mj-text-2);
    font-size: 14.5px;
}

html body #order-standard_cart .products .product div.product-desc li:last-child { border-bottom: 0; }

html body #order-standard_cart .products .product div.product-desc li::before {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mj-brand-a15);
    color: var(--mj-brand);
    font-size: 10px;
}

html body #order-standard_cart .products .product span.feature-value {
    color: var(--mj-text);
    font-weight: 700;
}

/* Fuss: "AB" klein, Preis gross, Button rechts daneben */
html body #order-standard_cart .cart-body .products .product footer {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 30px 30px;
    border: 0;
    background: transparent;
}

html body #order-standard_cart .products .product div.product-pricing {
    flex: 1 1 auto;
    text-align: left;
}

html body #order-standard_cart .products .product div.product-pricing .mj-price-label {
    display: block;
    margin-bottom: 4px;
    color: var(--mj-muted-2);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

html body #order-standard_cart .products .product div.product-pricing span.price {
    display: inline;
    color: var(--mj-text);
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -.03em;
}

html body #order-standard_cart .products .product div.product-pricing br { display: none; }

html body #order-standard_cart .products .product div.product-pricing .cycle {
    color: var(--mj-muted-2);
    font-size: 13px;
}

html body #order-standard_cart .products .product footer .btn {
    padding: .8rem 1.4rem;
    border: 0;
    border-radius: var(--mj-r-pill);
    background: var(--mj-brand);
    color: var(--mj-on-brand);
    font-size: 14.5px;
    font-weight: 700;
    box-shadow: 0 8px 24px -10px var(--mj-brand-a60);
}

html body #order-standard_cart .products .product footer .btn:hover {
    background: var(--mj-brand-light);
    color: var(--mj-on-brand);
}

/* Schmale Bildschirme: Preis und Button untereinander */
@media (max-width: 420px) {
    html body #order-standard_cart .cart-body .products .product footer { flex-wrap: wrap; }
    html body #order-standard_cart .products .product footer .btn { width: 100%; }
    html body #order-standard_cart .products .product header .mj-pname__value { font-size: 2.4rem; }
}


/* ---------------------------------------------------------------------------
   Produktkarten: mehr Luft zwischen den Reihen, gleichmaessig
   ------------------------------------------------------------------------ */
/* Die Karte fuellt ihre Spalte zu 100% Hoehe (row-eq-height), ein Rand an
   der Karte selbst wuerde ins Leere laufen - der Abstand sitzt an der Spalte */
html body #order-standard_cart .cart-body .products .row.row-eq-height > [class*="col-"] { margin-bottom: 32px; }
html body #order-standard_cart .cart-body .products .product.mj-product { margin-bottom: 0; }
html body #order-standard_cart .cart-body .products .row.row-eq-height { margin-bottom: -32px; }
html body #order-standard_cart .products .product div.product-desc { flex: 1 1 auto; }

/* ---------------------------------------------------------------------------
   Konfigurator wie auf der Hauptseite (cart.php?a=confproduct)
   Markup-Ergaenzungen von js/mj-configurator.js: .mj-opt-head, .mj-chips.
   Die Slider sind ion.rangeSlider 2.1 (Skin "Modern"); dessen Stylesheet
   laedt WHMCS erst im Seitenkoerper, deshalb hier mit hoher Spezifitaet.
   ------------------------------------------------------------------------ */

/* Produktkasten: Name gross, Merkmale als Chips */
html body #order-standard_cart .product-info {
    padding: 22px 24px;
    background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-xl);
}

html body #order-standard_cart .product-info .product-title {
    margin: 0 0 12px;
    font-size: 1.35rem;
    letter-spacing: -.02em;
}

html body #order-standard_cart .mj-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

html body #order-standard_cart .mj-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: .35rem .75rem;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    background: rgba(255, 255, 255, .03);
    color: var(--mj-text-2);
    font-size: 12.5px;
    line-height: 1.2;
}

html body #order-standard_cart .mj-chip i { color: var(--mj-brand); font-size: 10px; }
html body #order-standard_cart .mj-chip b { color: var(--mj-text); font-weight: 600; }

/* Optionen: jede in einer eigenen Zeile mit Kopf (Name links, Wert rechts) */
html body #frmConfigureProduct .form-group.mj-opt { margin-bottom: 26px; }

html body #frmConfigureProduct .mj-opt--slider .mj-opt-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

html body #frmConfigureProduct .mj-opt-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

html body #frmConfigureProduct .mj-opt-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mj-text);
    font-size: 14px;
    font-weight: 600;
}

html body #frmConfigureProduct .mj-opt-name i {
    width: 18px;
    color: var(--mj-brand);
    font-size: 14px;
    text-align: center;
}

html body #frmConfigureProduct .mj-opt-value {
    color: var(--mj-text);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

html body #frmConfigureProduct .mj-opt-value .mj-opt-num { font-size: 17px; }
html body #frmConfigureProduct .mj-opt-value .mj-opt-unit { color: var(--mj-text-2); font-weight: 600; }

html body #frmConfigureProduct .mj-opt-value .mj-opt-price {
    margin-left: 6px;
    color: var(--mj-muted-2);
    font-size: 12px;
    font-weight: 500;
}

/* ion.rangeSlider: Spur, Fuellung, Griff, Skala */
html body #frmConfigureProduct .irs {
    height: 44px;
    margin: 2px 10px 0;         /* Platz fuer den Griff an beiden Enden */
    font-family: inherit;
}

html body #frmConfigureProduct .irs-with-grid { height: 48px; }

html body #frmConfigureProduct .irs .irs-line {
    top: 12px;
    height: 6px;
    border: 0;
    border-radius: var(--mj-r-pill);
    background: var(--mj-surface-3);
}

html body #frmConfigureProduct .irs .irs-line-left,
html body #frmConfigureProduct .irs .irs-line-mid,
html body #frmConfigureProduct .irs .irs-line-right {
    height: 6px;
    background: transparent;
}

html body #frmConfigureProduct .irs .irs-bar,
html body #frmConfigureProduct .irs .irs-bar-edge {
    top: 12px;
    height: 6px;
    border: 0;
    border-radius: var(--mj-r-pill);
    background: linear-gradient(90deg, var(--mj-brand-a60), var(--mj-brand));
}

html body #frmConfigureProduct .irs .irs-slider {
    top: 5px;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    border: 3px solid var(--mj-brand);
    border-radius: 50%;
    background: var(--mj-surface);
    box-shadow: 0 0 0 4px var(--mj-brand-a20);
    cursor: grab;
    transition: box-shadow .15s ease, transform .15s ease;
}

html body #frmConfigureProduct .irs .irs-slider:hover,
html body #frmConfigureProduct .irs .irs-slider.state_hover { transform: scale(1.08); box-shadow: 0 0 0 6px var(--mj-brand-a25); }
html body #frmConfigureProduct .irs .irs-slider:active { cursor: grabbing; }
html body #frmConfigureProduct .irs .irs-slider::before { display: none; }   /* Skin Modern: kleiner Stift ueber dem Griff */

/* Wert- und Grenzblasen aus: der Wert steht rechts im Kopf */
html body #frmConfigureProduct .irs .irs-single,
html body #frmConfigureProduct .irs .irs-from,
html body #frmConfigureProduct .irs .irs-to,
html body #frmConfigureProduct .irs .irs-min,
html body #frmConfigureProduct .irs .irs-max { display: none; }

html body #frmConfigureProduct .irs .irs-grid { bottom: 0; height: 18px; }
html body #frmConfigureProduct .irs .irs-grid-pol { display: none; }
html body #frmConfigureProduct .irs .irs-grid-text {
    bottom: 0;
    color: var(--mj-muted-2);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* Auswahlfelder: Label wie die Slider-Kopfzeile */
html body #frmConfigureProduct .mj-opt--field > label {
    color: var(--mj-text);
    font-size: 14px;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Laufzeit als Pillen (Konfigurator): das Dropdown #inputBillingcycle bleibt
   im DOM und wird von js/mj-configurator.js gespiegelt; Rabatt-Badge oben
   rechts, Gesamtpreis der Laufzeit klein darunter.
   ------------------------------------------------------------------------ */
html body #order-standard_cart select.mj-cycle-select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    opacity: 0;
    pointer-events: none;
}

html body #order-standard_cart .mj-cycles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 6px;
}

html body #order-standard_cart .mj-cycle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 116px;
    padding: .55rem 1.1rem .5rem;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    background: var(--mj-surface);
    color: var(--mj-text-2);
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}

html body #order-standard_cart .mj-cycle:hover {
    border-color: var(--mj-line-strong);
    color: var(--mj-text);
}

html body #order-standard_cart .mj-cycle:focus-visible {
    outline: 2px solid var(--mj-brand);
    outline-offset: 2px;
}

html body #order-standard_cart .mj-cycle.is-active {
    border-color: var(--mj-brand);
    background: var(--mj-brand);
    color: var(--mj-on-brand);
}

html body #order-standard_cart .mj-cycle__label {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

html body #order-standard_cart .mj-cycle__price {
    margin-top: 1px;
    font-size: 11.5px;
    font-weight: 500;
    opacity: .8;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

html body #order-standard_cart .mj-cycle__badge {
    position: absolute;
    top: -9px;
    right: 10px;
    padding: 1px 7px;
    border: 1px solid var(--mj-brand-a40);
    border-radius: var(--mj-r-pill);
    background: var(--mj-surface-2);
    color: var(--mj-brand);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

html body #order-standard_cart .mj-cycle.is-active .mj-cycle__badge {
    border-color: var(--mj-brand);
    background: var(--mj-on-brand);
}


/* ---- Quelle: 45-checkout.css ---------------------------------------- */
/* ============================================================================
   45 - Warenkorb-Uebersicht und Kasse (mamjahn_cart/viewcart.tpl, checkout.tpl)
   Zweispaltig: links die Schritte, rechts die klebrige Bestelluebersicht.
   ========================================================================== */

/* ---- Rahmen und Kopf ---------------------------------------------------- */
body #order-standard_cart .mj-co-wrap { max-width: 1180px; margin: 0 auto; }
body #order-standard_cart .mj-co-body { padding: 0; }

body #order-standard_cart .mj-co-head { margin: 6px 0 26px; }
body #order-standard_cart .mj-co-head h1 { margin: 0 0 6px; color: var(--mj-text); font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; }
body #order-standard_cart .mj-co-head p { margin: 0; color: var(--mj-muted-2); font-size: 14px; }

/* Fortschritt 1 -> 2 -> 3 */
body #order-standard_cart .mj-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    color: var(--mj-muted-2);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
body #order-standard_cart .mj-steps li { display: inline-flex; align-items: center; gap: 8px; }
body #order-standard_cart .mj-steps li + li::before {
    content: "";
    display: block;
    width: 44px;
    height: 1px;
    margin: 0 14px;
    background: var(--mj-line);
}
body #order-standard_cart .mj-steps li span {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--mj-line-strong);
    border-radius: 50%;
    font-size: 11px;
    letter-spacing: 0;
}
body #order-standard_cart .mj-steps li.is-active { color: var(--mj-text); }
body #order-standard_cart .mj-steps li.is-active span { border-color: var(--mj-brand); background: var(--mj-brand); color: var(--mj-on-brand); box-shadow: 0 0 0 4px var(--mj-brand-a20); }
body #order-standard_cart .mj-steps li.is-done span { border-color: var(--mj-brand-a60); color: var(--mj-brand); }
body #order-standard_cart .mj-steps li.is-done + li::before { background: var(--mj-brand-a40); }

/* Umschalter "schon Kunde / neues Konto" (nur Gaeste) */
body #order-standard_cart .mj-co-switch { display: flex; gap: 8px; margin: 0 0 18px; }
body #order-standard_cart .mj-co-switch .btn { border-radius: var(--mj-r-pill); }

/* ---- Zwei Spalten ------------------------------------------------------- */
body #order-standard_cart .mj-co {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 28px;
    align-items: start;
}
@media (max-width: 991.98px) {
    body #order-standard_cart .mj-co { grid-template-columns: 1fr; }
}

body #order-standard_cart .mj-co-main {
    min-width: 0;
    padding: 14px 30px 30px;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-xl);
    background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
    counter-reset: mjstep;
}

/* Zwischenueberschriften werden zu nummerierten Schritten */
body #order-standard_cart .mj-co-main .sub-heading,
body #order-standard_cart .mj-co-main .sub-heading-borderless {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 26px 0 16px;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}
body #order-standard_cart .mj-co-main .sub-heading::before,
body #order-standard_cart .mj-co-main .sub-heading-borderless::before {
    counter-increment: mjstep;
    content: counter(mjstep);
    display: inline-grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mj-brand-a15);
    color: var(--mj-brand);
    font-size: 13px;
    font-weight: 800;
}
body #order-standard_cart .mj-co-main .sub-heading::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--mj-line-soft); }
body #order-standard_cart .mj-co-main .sub-heading span,
body #order-standard_cart .mj-co-main .sub-heading span.primary-bg-color,
body #order-standard_cart .mj-co-main .sub-heading-borderless span.primary-bg-color {
    position: static;
    padding: 0;
    background: none !important;
    color: var(--mj-text);
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: none;
}
/* Nur die Ueberschriften sichtbarer Bloecke zaehlen (w-hidden = display:none) */
body #order-standard_cart .mj-co-main .w-hidden .sub-heading::before { counter-increment: none; }

/* Konten-Auswahl als Karten */
body #order-standard_cart .mj-co-main .account-select-container .row { margin: 0 -6px; }
body #order-standard_cart .mj-co-main .account-select-container .row > [class*="col-"] { padding: 0 6px; margin-bottom: 12px; }
body #order-standard_cart .mj-co-main .account-select-container div.account,
body #order-standard_cart .mj-co-main .account-select-container div.account.border-bottom {
    height: 100%;
    padding: 16px 18px;
    border: 1px solid var(--mj-line) !important;
    border-radius: 16px;
    background: var(--mj-surface);
    transition: border-color .2s ease, background .2s ease;
}
body #order-standard_cart .mj-co-main .account-select-container div.account.active { border-color: var(--mj-brand-a60) !important; background: var(--mj-brand-a10); }
body #order-standard_cart .mj-co-main .account-select-container .address { display: block; margin-top: 6px; color: var(--mj-muted-2); font-size: 12.5px; }
body #order-standard_cart .mj-co-main .account-select-container label { margin: 0; width: 100%; cursor: pointer; }

/* Guthaben und Zahlungsarten */
body #order-standard_cart .mj-co-main .apply-credit-container { margin-bottom: 14px; padding: 16px 18px; border-radius: 16px; }
body #order-standard_cart .mj-co-main .apply-credit-container p { margin: 0 0 8px; color: var(--mj-text); font-weight: 700; }
body #order-standard_cart .mj-co-main .apply-credit-container label.radio { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 0; padding: 0; color: var(--mj-text-2); font-size: 13.5px; font-weight: 500; line-height: 1.5; cursor: pointer; }
body #order-standard_cart .mj-co-main .apply-credit-container label.radio span span { color: var(--mj-text); font-weight: 700; }
body #order-standard_cart .mj-co-main #paymentGatewaysContainer { margin: 0; padding: 16px 18px; border: 1px solid var(--mj-line-soft); border-radius: 16px; background: var(--mj-surface); }
body #order-standard_cart .mj-co-main #paymentGatewaysContainer p.small { margin: 0 0 10px; color: var(--mj-muted-2); }
body #order-standard_cart .mj-co-main #paymentGatewaysContainer .text-center { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
body #order-standard_cart .mj-co-main #paymentGatewaysContainer .radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 16px;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    background: var(--mj-surface-2);
    color: var(--mj-text-2);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
body #order-standard_cart .mj-co-main #paymentGatewaysContainer .radio-inline:hover { border-color: var(--mj-line-strong); color: var(--mj-text); }
body #order-standard_cart .mj-co-main #creditCardInputFields { margin-top: 14px; border-radius: 16px; }

/* Anmerkungen */
body #order-standard_cart .mj-co-main textarea { min-height: 96px; border-radius: 14px; }

/* ---- Rechte Spalte ------------------------------------------------------ */
body #order-standard_cart .mj-co-side {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body #order-standard_cart .mj-co-summary {
    position: relative;
    overflow: hidden;
    padding: 22px 24px 20px;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-xl);
    background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%);
}
body #order-standard_cart .mj-co-summary::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--mj-brand), transparent);
}
body #order-standard_cart .mj-co-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
body #order-standard_cart .mj-co-summary-head h2 { margin: 0; color: var(--mj-text); font-size: 1.05rem; font-weight: 800; }
body #order-standard_cart .mj-co-summary-edit { flex: 0 0 auto; padding: 4px 10px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-pill); color: var(--mj-muted-2); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
body #order-standard_cart .mj-co-summary-edit:hover { border-color: var(--mj-brand-a60); color: var(--mj-brand); text-decoration: none; }

body #order-standard_cart .mj-co-items { margin: 0 0 14px; padding: 0; list-style: none; }
body #order-standard_cart .mj-co-items li {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--mj-line-soft);
}
body #order-standard_cart .mj-co-items li:first-child { border-top: 0; padding-top: 0; }
body #order-standard_cart .mj-co-items li > i {
    display: inline-grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--mj-brand-a15);
    color: var(--mj-brand);
    font-size: 14px;
}
body #order-standard_cart .mj-co-items li b { display: block; color: var(--mj-text); font-size: 14px; font-weight: 700; }
body #order-standard_cart .mj-co-items li small { display: block; color: var(--mj-muted-2); font-size: 12.5px; }
body #order-standard_cart .mj-co-items li code {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--mj-surface-3);
    color: var(--mj-text-2);
    font-size: 11.5px;
}

body #order-standard_cart .mj-co-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding: 16px 0 4px;
    border-top: 1px solid var(--mj-line);
}
body #order-standard_cart .mj-co-total span { color: var(--mj-muted-2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
body #order-standard_cart .mj-co-total strong { color: var(--mj-brand); font-size: 2.1rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
body #order-standard_cart .mj-co-vat { display: flex; gap: 8px; margin: 12px 0 0; color: var(--mj-muted-2); font-size: 12px; line-height: 1.5; text-align: left; }
body #order-standard_cart .mj-co-vat i { margin-top: 2px; color: var(--mj-brand); }

body #order-standard_cart .mj-co-tos {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--mj-line);
    border-radius: 14px;
    background: var(--mj-surface);
    color: var(--mj-text-2);
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
}
body #order-standard_cart .mj-co-tos input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--mj-brand); }
body #order-standard_cart .mj-co-tos a { color: var(--mj-brand); font-weight: 700; }

body #order-standard_cart .btn.mj-co-submit {
    padding: 16px 22px;
    border-radius: var(--mj-r-pill);
    font-size: 15.5px;
    font-weight: 800;
    box-shadow: 0 14px 30px -12px var(--mj-brand-a60);
}
body #order-standard_cart .mj-co-secure { display: block; margin: 0; padding: 0 4px; color: var(--mj-muted-2); font-size: 11.5px; line-height: 1.5; text-align: center; }
body #order-standard_cart .mj-co-secure i { margin-right: 4px; color: var(--mj-ok); }
body #order-standard_cart .mj-co-secure strong { color: var(--mj-text-2); }

/* ---- Widerrufs-Hinweis --------------------------------------------------- */
body #order-standard_cart .mj-norefund {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 18px;
    border: 1px solid rgba(245, 158, 11, .45);
    border-radius: var(--mj-r-xl);
    background: linear-gradient(180deg, rgba(245, 158, 11, .10), rgba(245, 158, 11, .04));
    text-align: left;
    transition: border-color .25s ease, background .25s ease;
}
body #order-standard_cart .mj-norefund.is-ok {
    border-color: var(--mj-brand-a60);
    background: linear-gradient(180deg, var(--mj-brand-a10), transparent);
}
body #order-standard_cart .mj-norefund-icon {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(245, 158, 11, .18);
    color: #fbbf24;
    font-size: 16px;
}
body #order-standard_cart .mj-norefund.is-ok .mj-norefund-icon { background: var(--mj-brand-a15); color: var(--mj-brand); }
body #order-standard_cart .mj-norefund-body { min-width: 0; }
body #order-standard_cart .mj-norefund h4 { margin: 4px 0 6px; color: var(--mj-text); font-size: 14.5px; font-weight: 800; }
body #order-standard_cart .mj-norefund p { margin: 0 0 10px; color: var(--mj-text-2); font-size: 12.5px; line-height: 1.55; }
body #order-standard_cart .mj-norefund-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 1px solid var(--mj-line);
    border-radius: 12px;
    background: rgba(0, 0, 0, .25);
    color: var(--mj-text);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
}
body #order-standard_cart .mj-norefund-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--mj-brand); cursor: pointer; }
body #order-standard_cart .mj-norefund-links { margin: 0; font-size: 12px; }
body #order-standard_cart .mj-norefund-links a { color: var(--mj-brand); font-weight: 600; }
body .mj-norefund-modal .modal-content { border: 1px solid var(--mj-line); border-radius: 20px; background: var(--mj-surface-2); color: var(--mj-text); }
body .mj-norefund-modal .modal-header,
body .mj-norefund-modal .modal-footer { border-color: var(--mj-line-soft); }
body .mj-norefund-modal .modal-title { display: flex; align-items: center; gap: 10px; font-weight: 800; }
body .mj-norefund-modal .modal-title i { color: #fbbf24; }
body .mj-norefund-modal .modal-body p { color: var(--mj-text-2); line-height: 1.6; }
body .mj-norefund-modal .close { color: var(--mj-text); opacity: .7; text-shadow: none; }

/* ---- Warenkorb-Uebersicht (viewcart.tpl) --------------------------------- */
body #order-standard_cart.mj-viewcart .cart-body > .row { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; margin: 0; }
body #order-standard_cart.mj-viewcart .cart-body > .row > .secondary-cart-body,
body #order-standard_cart.mj-viewcart .cart-body > .row > .secondary-cart-sidebar { width: auto; max-width: none; flex: none; padding: 0; }
body #order-standard_cart.mj-viewcart .secondary-cart-sidebar { position: sticky; top: 96px; }
@media (max-width: 991.98px) {
    body #order-standard_cart.mj-viewcart .cart-body > .row { grid-template-columns: 1fr; }
    body #order-standard_cart.mj-viewcart .secondary-cart-sidebar { position: static; }
}

body #order-standard_cart.mj-viewcart .view-cart-items { display: flex; flex-direction: column; gap: 14px; margin: 0 0 12px; }
body #order-standard_cart.mj-viewcart .view-cart-items .item,
body #order-standard_cart.mj-viewcart .view-cart-items .item:last-child {
    position: relative;
    padding: 22px 24px;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-xl);
    background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}
body #order-standard_cart.mj-viewcart .view-cart-items .item::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--mj-brand-a60), transparent);
}
body #order-standard_cart.mj-viewcart .view-cart-items .item-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 1.15rem; }
body #order-standard_cart.mj-viewcart .view-cart-items .item-title .btn-link { padding: 2px 8px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-pill); color: var(--mj-muted-2); font-size: 11.5px; font-weight: 700; }
body #order-standard_cart.mj-viewcart .view-cart-items .item-title .btn-link:hover { border-color: var(--mj-brand-a60); color: var(--mj-brand); text-decoration: none; }
body #order-standard_cart.mj-viewcart .view-cart-items .item-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; width: auto; }
body #order-standard_cart.mj-viewcart .mj-cart-host {
    display: inline-flex;
    width: auto;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--mj-brand-a40);
    border-radius: var(--mj-r-pill);
    background: var(--mj-brand-a10);
    color: var(--mj-brand);
    font-size: 12px;
    font-weight: 700;
}
body #order-standard_cart.mj-viewcart .mj-cart-opts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
body #order-standard_cart.mj-viewcart .mj-cart-opts li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--mj-line-soft); font-size: 12.5px; line-height: 1.4; }
body #order-standard_cart.mj-viewcart .mj-cart-opts li span { flex: 1 1 auto; color: var(--mj-muted-2); }
@media (max-width: 575.98px) { body #order-standard_cart.mj-viewcart .mj-cart-opts { grid-template-columns: 1fr; } }
body #order-standard_cart.mj-viewcart .mj-cart-opts li b { color: var(--mj-text); font-weight: 700; text-align: right; white-space: nowrap; }
body #order-standard_cart.mj-viewcart .view-cart-items .item-price span { font-size: 1.5rem; }
body #order-standard_cart.mj-viewcart .view-cart-items .item-price .cycle { display: block; font-size: 12px; }
body #order-standard_cart.mj-viewcart .view-cart-items .btn-remove-from-cart { width: 30px; height: 30px; padding: 0; border: 1px solid var(--mj-line); border-radius: 50%; }
body #order-standard_cart.mj-viewcart .view-cart-items .btn-remove-from-cart:hover { border-color: var(--mj-err); }
body #order-standard_cart.mj-viewcart .empty-cart { margin: 0 0 18px; text-align: right; }
body #order-standard_cart.mj-viewcart .empty-cart .btn { border: 1px solid var(--mj-line); border-radius: var(--mj-r-pill); background: transparent; }
body #order-standard_cart.mj-viewcart .view-cart-empty { border: 1px dashed var(--mj-line); border-radius: var(--mj-r-xl); }

/* Angebotscode kompakt */
body #order-standard_cart.mj-viewcart .view-cart-tabs { margin-top: 8px; }
body #order-standard_cart.mj-viewcart .view-cart-tabs .nav-tabs { border: 0; margin: 0 0 8px; }
body #order-standard_cart.mj-viewcart .view-cart-tabs .nav-tabs .nav-link,
body #order-standard_cart.mj-viewcart .view-cart-tabs .nav-tabs a.active { padding: 0 2px 6px; border: 0; background: none; color: var(--mj-muted-2); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
body #order-standard_cart.mj-viewcart .view-cart-tabs .tab-content { border: 1px solid var(--mj-line); border-radius: 16px; background: var(--mj-surface); }
body #order-standard_cart.mj-viewcart .view-cart-tabs .promo { display: flex; gap: 10px; align-items: center; }
body #order-standard_cart.mj-viewcart .view-cart-tabs .promo .form-group { flex: 1 1 auto; margin: 0; }
body #order-standard_cart.mj-viewcart .view-cart-tabs .promo form { display: flex; gap: 10px; align-items: center; width: 100%; }
body #order-standard_cart.mj-viewcart .view-cart-tabs .promo .btn-block { width: auto; margin: 0; padding: 9px 18px; border-radius: var(--mj-r-pill); white-space: nowrap; }

/* Bestelluebersicht rechts im gleichen Kartenstil */
body #order-standard_cart.mj-viewcart .order-summary { position: relative; overflow: hidden; border: 1px solid var(--mj-line); border-radius: var(--mj-r-xl); background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); }
body #order-standard_cart.mj-viewcart .order-summary::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--mj-brand), transparent); }
body #order-standard_cart.mj-viewcart .order-summary h2 { border: 0; background: none; padding: 22px 24px 8px; }
body #order-standard_cart.mj-viewcart .summary-container { border: 0; background: none; padding: 0 24px 22px; }
body #order-standard_cart.mj-viewcart .total-due-today { padding: 16px 0 6px; border-top: 1px solid var(--mj-line); text-align: right; }
body #order-standard_cart.mj-viewcart .total-due-today .amt { display: block; color: var(--mj-brand); font-size: 2.1rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
body #order-standard_cart.mj-viewcart .total-due-today span:not(.amt) { color: var(--mj-muted-2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
body #order-standard_cart.mj-viewcart .mj-cart-actions { margin-top: 16px; text-align: center; }
body #order-standard_cart.mj-viewcart .mj-cart-actions .btn-checkout { padding: 16px 22px; border-radius: var(--mj-r-pill); font-size: 15.5px; font-weight: 800; box-shadow: 0 14px 30px -12px var(--mj-brand-a60); }
body #order-standard_cart.mj-viewcart .mj-cart-actions .btn-continue-shopping { display: inline-block; margin-top: 10px; color: var(--mj-muted-2); font-size: 13px; font-weight: 600; }
body #order-standard_cart.mj-viewcart .mj-cart-actions .btn-continue-shopping:hover { color: var(--mj-text); text-decoration: none; }
body #order-standard_cart.mj-viewcart .mj-cart-actions .mj-co-vat { text-align: left; }
body #order-standard_cart.mj-viewcart .summary-container > div.clearfix,
body #order-standard_cart.mj-viewcart .summary-container .bordered-totals > div,
body #order-standard_cart.mj-viewcart .summary-container .recurring-totals { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; color: var(--mj-text-2); font-size: 13.5px; }
body #order-standard_cart.mj-viewcart .summary-container .subtotal { padding: 0 0 7px; font-size: 14px; }
body #order-standard_cart.mj-viewcart .summary-container .recurring-totals .recurring-charges { text-align: right; color: var(--mj-muted-2); font-size: 12.5px; }
body #order-standard_cart.mj-viewcart .summary-container .recurring-totals .cost { color: var(--mj-text); font-weight: 700; }

/* ---- Bestellbestaetigung, Fehler, Zusatzprodukte (Block 5) --------------- */
body #order-standard_cart .mj-done-card { position: relative; max-width: 720px; margin: 0 auto; padding: 40px 36px 32px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-xl); background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); text-align: center; overflow: hidden; }
body #order-standard_cart .mj-done-card::after { content: ""; position: absolute; left: 36px; right: 36px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--mj-brand), transparent); }
body #order-standard_cart .mj-done-icon { display: inline-grid; place-items: center; width: 76px; height: 76px; margin-bottom: 16px; border-radius: 50%; background: rgba(34, 197, 94, .15); color: var(--mj-ok); font-size: 32px; box-shadow: 0 0 0 10px rgba(34, 197, 94, .06); }
body #order-standard_cart .mj-done-icon.is-err { background: rgba(239, 68, 68, .15); color: var(--mj-err); box-shadow: 0 0 0 10px rgba(239, 68, 68, .06); }
body #order-standard_cart .mj-done-card h1 { margin: 0 0 8px; color: var(--mj-text); font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; }
body #order-standard_cart .mj-done-lead { margin: 0 0 18px; color: var(--mj-text-2); font-size: 15px; }
body #order-standard_cart .mj-done-no { display: inline-flex; flex-direction: column; gap: 4px; margin: 0 0 18px; padding: 14px 28px; border: 1px dashed var(--mj-brand-a60); border-radius: 16px; background: var(--mj-brand-a10); }
body #order-standard_cart .mj-done-no span { color: var(--mj-muted-2); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
body #order-standard_cart .mj-done-no b { color: var(--mj-text); font-size: 1.6rem; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
body #order-standard_cart .mj-done-text { margin: 0 0 18px; color: var(--mj-muted-2); font-size: 13.5px; line-height: 1.6; }
body #order-standard_cart .mj-done-card .mj-notice { text-align: left; }
body #order-standard_cart .mj-notice { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 14px 18px; border: 1px solid var(--mj-line); border-radius: 16px; background: var(--mj-surface-2); color: var(--mj-text-2); font-size: 13.5px; }
body #order-standard_cart .mj-notice > div { flex: 1 1 auto; }
body #order-standard_cart .mj-notice > i { font-size: 18px; color: var(--mj-brand); }
body #order-standard_cart .mj-notice.is-warning { border-color: rgba(245, 158, 11, .45); } body #order-standard_cart .mj-notice.is-warning > i { color: #fbbf24; }
body #order-standard_cart .mj-notice.is-danger { border-color: rgba(239, 68, 68, .45); } body #order-standard_cart .mj-notice.is-danger > i { color: var(--mj-err); }
body #order-standard_cart .mj-notice.is-success { border-color: rgba(34, 197, 94, .45); } body #order-standard_cart .mj-notice.is-success > i { color: var(--mj-ok); }
body #order-standard_cart .btn.mj-pill-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--mj-r-pill); font-size: 13px; font-weight: 700; white-space: nowrap; }
body #order-standard_cart .btn.mj-pill-btn.btn-default { border: 1px solid var(--mj-line); background: var(--mj-surface-2); color: var(--mj-text-2); }
body #order-standard_cart .mj-done-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 6px 0 20px; }
body #order-standard_cart .mj-done-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--mj-line); border-radius: 14px; background: var(--mj-surface); color: var(--mj-text-2); text-align: left; text-decoration: none; }
body #order-standard_cart .mj-done-link:hover { border-color: var(--mj-brand-a60); color: var(--mj-text); text-decoration: none; }
body #order-standard_cart .mj-done-link > i { display: inline-grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: var(--mj-brand-a15); color: var(--mj-brand); }
body #order-standard_cart .mj-done-link b { display: block; color: var(--mj-text); font-size: 13.5px; }
body #order-standard_cart .mj-done-link small { display: block; color: var(--mj-muted-2); font-size: 12px; }
body #order-standard_cart .btn.mj-done-btn { display: inline-flex; width: auto; min-width: 280px; }
body #order-standard_cart .order-confirmation-addon-output { margin: 0 0 16px; text-align: left; }
body #order-standard_cart .mj-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Zusatzprodukte */
body #order-standard_cart .mj-addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
body #order-standard_cart .mj-addon-card { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 24px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-xl); background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); }
body #order-standard_cart .mj-addon-card:hover { border-color: var(--mj-brand-a60); }
body #order-standard_cart .mj-addon-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--mj-brand-a15); color: var(--mj-brand); font-size: 18px; }
body #order-standard_cart .mj-addon-card h2 { margin: 4px 0 0; color: var(--mj-text); font-size: 1.15rem; font-weight: 800; }
body #order-standard_cart .mj-addon-desc { flex: 1 1 auto; margin: 0; color: var(--mj-text-2); font-size: 13.5px; line-height: 1.55; }
body #order-standard_cart .mj-addon-card .mj-label { display: block; margin: 6px 0 4px; color: var(--mj-muted-2); font-size: 12px; font-weight: 700; }
body #order-standard_cart .mj-addon-card .custom-select { height: auto; padding: 10px 34px 10px 14px; border: 1px solid var(--mj-line); border-radius: 12px; background-color: var(--mj-surface-3); color: var(--mj-text); }
body #order-standard_cart .mj-addon-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--mj-line-soft); }
body #order-standard_cart .mj-addon-price b { display: block; color: var(--mj-text); font-size: 1.3rem; font-weight: 800; }
body #order-standard_cart .mj-addon-price small { color: var(--mj-muted-2); font-size: 12px; }

/* ---- Kasse: mehr Luft, groessere Kaesten (Feinschliff 13.09.) ------------- */
body #order-standard_cart .mj-co-wrap { max-width: 1320px; }
body #order-standard_cart .mj-co-head { margin: 8px 0 30px; }
body #order-standard_cart .mj-co-head h1 { font-size: 2.3rem; }
body #order-standard_cart .mj-co-head p { font-size: 15px; }
body #order-standard_cart .mj-co { grid-template-columns: minmax(0, 1fr) 440px; gap: 32px; }
body #order-standard_cart .mj-co-main { padding: 24px 36px 36px; }
body #order-standard_cart .mj-co-main .sub-heading, body #order-standard_cart .mj-co-main .sub-heading-borderless { margin: 30px 0 18px; }
body #order-standard_cart .mj-co-main .sub-heading::before, body #order-standard_cart .mj-co-main .sub-heading-borderless::before { flex-basis: 34px; width: 34px; height: 34px; font-size: 14px; }
body #order-standard_cart .mj-co-main .sub-heading span, body #order-standard_cart .mj-co-main .sub-heading span.primary-bg-color { font-size: 17px; }
body #order-standard_cart .mj-co-main .account-select-container div.account, body #order-standard_cart .mj-co-main .account-select-container div.account.border-bottom { padding: 20px 22px; border-radius: 18px; font-size: 15px; }
body #order-standard_cart .mj-co-main .account-select-container .row > [class*="col-"] { margin-bottom: 14px; }
body #order-standard_cart .mj-co-main .account-select-container .address { font-size: 13.5px; }
body #order-standard_cart .mj-co-main .apply-credit-container { padding: 20px 22px; border-radius: 18px; }
body #order-standard_cart .mj-co-main .apply-credit-container p { font-size: 15px; }
body #order-standard_cart .mj-co-main .apply-credit-container label.radio { font-size: 14.5px; margin-top: 10px; }
body #order-standard_cart .mj-co-main #paymentGatewaysContainer { padding: 20px 22px; border-radius: 18px; }
body #order-standard_cart .mj-co-main #paymentGatewaysContainer .radio-inline { padding: 11px 18px; font-size: 14.5px; }
body #order-standard_cart .mj-co-main textarea { min-height: 120px; padding: 14px 16px; font-size: 14.5px; }
body #order-standard_cart .mj-co-main .form-control { font-size: 14.5px; }

body #order-standard_cart .mj-co-side { gap: 18px; }
body #order-standard_cart .mj-co-summary { padding: 26px 28px 24px; }
body #order-standard_cart .mj-co-summary-head h2 { font-size: 1.2rem; }
body #order-standard_cart .mj-co-summary-head { margin-bottom: 18px; }
body #order-standard_cart .mj-co-items li { padding: 14px 0; gap: 14px; }
body #order-standard_cart .mj-co-items li > i { flex-basis: 40px; width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
body #order-standard_cart .mj-co-items li b { font-size: 15px; }
body #order-standard_cart .mj-co-items li small { font-size: 13px; }
body #order-standard_cart .mj-co-items li code { font-size: 12.5px; padding: 3px 9px; }
body #order-standard_cart .mj-co-total { padding: 20px 0 6px; }
body #order-standard_cart .mj-co-total strong { font-size: 2.5rem; }
body #order-standard_cart .mj-co-vat { font-size: 12.5px; margin-top: 12px; }
body #order-standard_cart .mj-norefund { padding: 22px 22px 20px; gap: 16px; }
body #order-standard_cart .mj-norefund-icon { flex-basis: 42px; width: 42px; height: 42px; font-size: 18px; }
body #order-standard_cart .mj-norefund h4 { font-size: 15.5px; }
body #order-standard_cart .mj-norefund p { font-size: 13.5px; }
body #order-standard_cart .mj-norefund-check { padding: 12px 14px; font-size: 13.5px; }
body #order-standard_cart .mj-norefund-links { font-size: 12.5px; }
body #order-standard_cart .mj-co-tos { padding: 16px 18px; font-size: 13.5px; }
body #order-standard_cart .btn.mj-co-submit { padding: 18px 24px; font-size: 16.5px; }
body #order-standard_cart .mj-co-secure { font-size: 12px; }
@media (max-width: 991.98px) { body #order-standard_cart .mj-co { grid-template-columns: 1fr; } body #order-standard_cart .mj-co-main { padding: 18px 20px 26px; } }

/* Bestellbestaetigung: breiter, Kacheln buendig, Pfeil mit Abstand */
body #order-standard_cart .mj-done-card { max-width: 860px; padding: 48px 44px 40px; }
body #order-standard_cart .mj-done-card h1 { font-size: 2.2rem; }
body #order-standard_cart .mj-done-lead { font-size: 16px; }
body #order-standard_cart .mj-done-no { padding: 16px 34px; }
body #order-standard_cart .mj-done-no b { font-size: 1.8rem; }
body #order-standard_cart .mj-done-text { font-size: 14px; max-width: 620px; margin-left: auto; margin-right: auto; }
body #order-standard_cart .mj-done-next { grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px 0 26px; }
body #order-standard_cart .mj-done-link { align-items: flex-start; padding: 16px; }
body #order-standard_cart .mj-done-link > i { margin-top: 2px; width: 40px; height: 40px; flex-basis: 40px; }
body #order-standard_cart .mj-done-link b { font-size: 14.5px; margin-bottom: 2px; }
body #order-standard_cart .mj-done-link small { font-size: 12.5px; line-height: 1.45; }
body #order-standard_cart .btn.mj-done-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 300px; padding: 16px 28px; }
@media (max-width: 767.98px) { body #order-standard_cart .mj-done-next { grid-template-columns: 1fr; } body #order-standard_cart .mj-done-card { padding: 32px 22px 28px; } }

/* ---- Warenkorb: Angebotscode-Symbol, Summenzeilen ohne doppelte Linien ------ */
body #order-standard_cart.mj-viewcart .view-cart-tabs .promo .prepend-icon { position: relative; }
body #order-standard_cart.mj-viewcart .view-cart-tabs .promo .prepend-icon .field-icon { position: absolute; left: 0; top: 0; bottom: 0; width: 44px; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--mj-muted-2); pointer-events: none; z-index: 2; }
body #order-standard_cart.mj-viewcart .view-cart-tabs .promo .prepend-icon .field-icon i { font-size: 14px; }
body #order-standard_cart.mj-viewcart .view-cart-tabs .promo .prepend-icon input.field { padding-left: 44px !important; }
body #order-standard_cart.mj-viewcart .summary-container .subtotal,
body #order-standard_cart.mj-viewcart .summary-container .bordered-totals,
body #order-standard_cart.mj-viewcart .summary-container .bordered-totals > div,
body #order-standard_cart.mj-viewcart .summary-container .recurring-totals { border: 0 !important; margin: 0; }
body #order-standard_cart.mj-viewcart .summary-container > div.clearfix,
body #order-standard_cart.mj-viewcart .summary-container .bordered-totals > div,
body #order-standard_cart.mj-viewcart .summary-container .recurring-totals { padding: 9px 0; border-bottom: 1px solid var(--mj-line-soft) !important; align-items: baseline; }
body #order-standard_cart.mj-viewcart .summary-container .subtotal { padding-top: 0; }
body #order-standard_cart.mj-viewcart .summary-container .recurring-totals { border-bottom: 0 !important; }
body #order-standard_cart.mj-viewcart .summary-container .recurring-charges { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
body #order-standard_cart.mj-viewcart .summary-container .recurring-charges > span { display: inline-flex; gap: 6px; align-items: baseline; white-space: nowrap; }
body #order-standard_cart.mj-viewcart .summary-container .recurring-charges br { display: none; }
body #order-standard_cart.mj-viewcart .summary-container .float-left, body #order-standard_cart.mj-viewcart .summary-container .pull-left { float: none !important; }
body #order-standard_cart.mj-viewcart .summary-container .float-right, body #order-standard_cart.mj-viewcart .summary-container .pull-right { float: none !important; color: var(--mj-text); font-weight: 700; font-variant-numeric: tabular-nums; }
body #order-standard_cart.mj-viewcart .total-due-today { border-top: 1px solid var(--mj-line) !important; margin-top: 4px; }

/* ---- Kasse: mehr Abstand zwischen Schritt-Nummer und Kasten ---------------- */
body #order-standard_cart .mj-co-main .sub-heading, body #order-standard_cart .mj-co-main .sub-heading-borderless { margin: 34px 0 22px; }
body #order-standard_cart .mj-co-main .sub-heading:first-child { margin-top: 10px; }


/* ---- Quelle: 50-pages.css ---------------------------------------- */
/* ============================================================================
   50 - Einzelseiten: Startseite, Anmeldung, Wissensdatenbank, Fehlerseiten
   ----------------------------------------------------------------------------
   Ersetzt unter anderem die hellen Festwerte aus nexus/sass/_home.scss
   (.action-icon-btns a{background-color:#fff}, .input-group-wrapper auf #fff).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Hero der Portal-Startseite
   ------------------------------------------------------------------------ */

.mj-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    padding: clamp(48px, 8vw, 92px) 0 clamp(40px, 6vw, 72px);
    background:
        radial-gradient(ellipse 80% 55% at 50% 34%, var(--mj-brand-a15), transparent 70%);
    text-align: center;
}

.mj-hero .mj-glow-blob {
    top: -160px;
    left: 50%;
    width: 520px;
    height: 420px;
    margin-left: -260px;
}

.mj-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: 0 auto;
    padding: 0 16px;
}

.mj-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    padding: .4rem 1rem;
    border: 1px solid var(--mj-brand-a40);
    border-radius: var(--mj-r-pill);
    background-color: var(--mj-brand-a10);
    color: var(--mj-brand);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
}

.mj-hero-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--mj-r-pill);
    background-color: var(--mj-brand);
    box-shadow: 0 0 8px var(--mj-brand);
    animation: mj-pulse 2s ease-in-out infinite;
}

.mj-hero-title {
    margin: 0 0 18px;
    color: var(--mj-text);
    font-size: clamp(2.1rem, 6vw, 4rem);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -.035em;
}

.mj-hero-accent {
    display: block;
    color: var(--mj-brand);
}

.mj-hero-lead {
    max-width: 62ch;
    margin: 0 auto 32px;
    color: var(--mj-muted);
    font-size: clamp(.95rem, 1.6vw, 1.1rem);
    line-height: 1.7;
}

.mj-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 14px;
    margin-bottom: 38px;
}

@media (min-width: 576px) {
    .mj-hero-actions {
        flex-direction: row;
        align-items: center;
    }
}

.mj-hero-actions .btn {
    padding: .85rem 2.2rem;
    font-size: 15px;
}

.mj-hero-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.mj-hero-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .5rem 1rem;
    background-color: rgba(9, 9, 11, .7);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    color: var(--mj-text-2);
    font-size: 13px;
    font-weight: 600;
}

.mj-hero-stat i {
    color: var(--mj-brand);
}

/* ---------------------------------------------------------------------------
   Abschnitte
   ------------------------------------------------------------------------ */

.mj-section {
    position: relative;
    padding: clamp(36px, 5vw, 56px) 0 0;
}

.mj-section-head {
    margin-bottom: 30px;
    text-align: center;
}

.mj-section-title {
    margin: 0 0 8px;
    color: var(--mj-text);
    font-size: clamp(1.5rem, 3.2vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.03em;
}

.mj-section-accent {
    color: var(--mj-brand);
}

.mj-section-sub {
    max-width: 58ch;
    margin: 0 auto;
    color: var(--mj-muted);
    font-size: 15px;
}

/* ---------------------------------------------------------------------------
   Produktgruppen-Karten
   ------------------------------------------------------------------------ */

.mj-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 576px) {
    .mj-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .mj-grid { grid-template-columns: repeat(3, 1fr); }
}

.mj-gcard {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 26px 24px 22px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-xl);
    color: var(--mj-text-2);
    text-decoration: none;
    transition: transform .3s ease, border-color .3s ease;
}

.mj-gcard::after {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 230px;
    height: 230px;
    border-radius: var(--mj-r-pill);
    background: var(--mj-brand-a20);
    filter: blur(90px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}

.mj-gcard:hover {
    transform: translateY(-4px);
    border-color: var(--mj-brand-a60);
    color: var(--mj-text-2);
    text-decoration: none;
}

.mj-gcard:hover::after {
    opacity: 1;
}

.mj-gcard-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    background-color: var(--mj-brand-a10);
    border: 1px solid var(--mj-brand-a40);
    border-radius: var(--mj-r-md);
    color: var(--mj-brand);
    font-size: 20px;
}

.mj-gcard-title {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    color: var(--mj-text);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.mj-gcard-text {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    margin: 0 0 20px;
    color: var(--mj-muted);
    font-size: 14px;
    line-height: 1.65;
}

.mj-gcard-foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--mj-line-soft);
}

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

.mj-gcard-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--mj-brand);
    font-size: 14px;
    font-weight: 700;
    transition: gap .2s ease;
}

.mj-gcard:hover .mj-gcard-cta {
    gap: 12px;
}

/* ---------------------------------------------------------------------------
   Schnellzugriffe
   ------------------------------------------------------------------------ */

.mj-quick {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 768px) {
    .mj-quick { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 992px) {
    .mj-quick { grid-template-columns: repeat(5, 1fr); }
}

.mj-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 24px 14px 20px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
    color: var(--mj-text-2);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: transform .3s ease, border-color .3s ease, background-color .3s ease;
}

.mj-quick-item:hover {
    transform: translateY(-4px);
    background-color: var(--mj-surface-2);
    border-color: var(--mj-brand-a60);
    color: var(--mj-text);
    text-decoration: none;
}

.mj-quick-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background-color: var(--mj-brand-a10);
    border: 1px solid var(--mj-brand-a40);
    border-radius: var(--mj-r-pill);
    color: var(--mj-brand);
    font-size: 22px;
    transition: background-color .3s ease, transform .3s ease;
}

.mj-quick-item:hover .mj-quick-icon {
    background-color: var(--mj-brand-a20);
    transform: scale(1.06);
}

/* ---------------------------------------------------------------------------
   Startseite des Elternteils: Schnellzugriffe und Kartenspalten
   ------------------------------------------------------------------------ */

/* Greift nur, falls irgendwo noch das Original-Markup benutzt wird. */
.action-icon-btns a,
#main-body .action-icon-btns a {
    margin: 0 0 12px;
    padding: 18px 0 20px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
    color: var(--mj-text-2);
    font-weight: 600;
    text-decoration: none;
    transition: transform .3s ease, border-color .3s ease;
}

.action-icon-btns a:hover,
#main-body .action-icon-btns a:hover {
    transform: translateY(-3px);
    border-color: var(--mj-brand-a60);
    color: var(--mj-text);
}

.action-icon-btns a .ico-container i {
    color: var(--mj-brand);
}

.card-columns.home .card {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-xl);
}

.card-columns.home .pricing-card-title {
    color: var(--mj-text);
    font-weight: 800;
}

/* ---------------------------------------------------------------------------
   Domainsuche auf der Startseite
   ------------------------------------------------------------------------ */

.home-domain-search {
    padding: 30px 0;
    background-color: var(--mj-surface);
    border-top: 1px solid var(--mj-line-soft);
    border-bottom: 1px solid var(--mj-line-soft);
}

.home-domain-search h2 {
    margin: 0;
    color: var(--mj-text);
}

.home-domain-search .tld-logos {
    color: var(--mj-muted-2);
}

.home-domain-search .input-group-wrapper,
#frmDomainHomepage .input-group-wrapper {
    margin: 16px 0;
    padding: 6px;
    background-color: var(--mj-surface-3);   /* Original: #fff */
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
}

.home-domain-search .input-group-wrapper .form-control {
    background-color: transparent;
    border: 0;
    color: var(--mj-text);
}

.home-domain-search .input-group-wrapper .form-control:focus {
    box-shadow: none;
}

#frmDomainHomepage .btn {
    border-radius: var(--mj-r-pill) !important;  /* Elternteil setzt !important */
    margin: 0 2px !important;
}

#frmDomainHomepage #btnTransfer {
    background: transparent;
    border: 1px solid var(--mj-line);
    color: var(--mj-text-2);
}

#frmDomainHomepage #btnTransfer:hover {
    background: var(--mj-surface-3);
    border-color: var(--mj-line-strong);
    color: var(--mj-text);
}

#btnDomainContinue {
    background: var(--mj-brand);
    color: var(--mj-on-brand);
}

/* ---------------------------------------------------------------------------
   Anmeldung und Registrierung
   ------------------------------------------------------------------------ */

.mj-auth-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
    max-width: 1040px;
    margin: 0 auto;
    padding: 12px 0 24px;
}

@media (min-width: 992px) {
    .mj-auth-wrap {
        grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
        gap: 44px;
    }
}

.mj-auth-card {
    position: relative;
    overflow: hidden;
    padding: 38px 34px 30px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-xl);
    box-shadow: var(--mj-shadow);
}

.mj-auth-head {
    margin-bottom: 26px;
}

.mj-auth-title {
    margin: 0 0 6px;
    color: var(--mj-text);
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -.025em;
}

.mj-auth-sub {
    margin: 0;
    color: var(--mj-muted);
    font-size: 14px;
}

.mj-auth-foot {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--mj-line-soft);
    color: var(--mj-muted-2);
    font-size: 14px;
}

.mj-auth-foot a {
    color: var(--mj-brand);
    font-weight: 700;
}

/* ---- Merkmalsspalte rechts ---------------------------------------------- */

.mj-auth-aside {
    padding: 8px 0;
}

.mj-auth-aside h2 {
    margin: 0 0 22px;
    color: var(--mj-text);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.025em;
}

.mj-aside-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

.mj-aside-item i {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--mj-brand-a10);
    border: 1px solid var(--mj-brand-a40);
    border-radius: var(--mj-r-md);
    color: var(--mj-brand);
    font-size: 16px;
}

.mj-aside-item h3 {
    margin: 0 0 3px;
    color: var(--mj-text);
    font-size: 15px;
    font-weight: 700;
}

.mj-aside-item p {
    margin: 0;
    color: var(--mj-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* ---- Formulare der Anmeldung -------------------------------------------- */

.login-form .form-control:focus {
    border-color: var(--mj-brand);
}

.login-form #inputPassword:focus {
    border-right: 0;
}

.providerLinkingFeedback:not(:empty) {
    margin-bottom: 16px;
}

#registration .field,
#registration .form-control {
    border-radius: var(--mj-r-md);
}

#registration .card,
#personalInformation {
    background-color: var(--mj-surface);
}

.select-account {
    margin: 20px auto;
    padding: 0;
    border-top: 1px solid var(--mj-line-soft);
}

.select-account a {
    display: block;
    padding: 12px;
    border-bottom: 1px solid var(--mj-line-soft);
    color: var(--mj-text-2);
    text-decoration: none;
}

.select-account a:hover {
    background-color: var(--mj-surface-3);
    color: var(--mj-text);
}

.continue-container,
.invite-box {
    margin: 32px auto;
    padding: 22px;
    max-width: 520px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
    color: var(--mj-text-2);
}

/* ---------------------------------------------------------------------------
   Captcha und Zwei-Faktor
   ------------------------------------------------------------------------ */

.captcha-container,
.default-captcha,
.recaptcha-container {
    color: var(--mj-text-2);
}

.captcha-container .form-control {
    background-color: var(--mj-surface-3);
}

.two-factor-auth,
.backup-code {
    color: var(--mj-text-2);
}

.backup-code {
    padding: 14px;
    background-color: var(--mj-surface-3);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-md);
    color: var(--mj-brand-light);
    font-size: 18px;
    letter-spacing: .1em;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Wissensdatenbank, Ankündigungen, Downloads
   ------------------------------------------------------------------------ */

.card.kb-category,
.primary-content .card.kb-category {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
    transition: transform .3s ease, border-color .3s ease;
}

.card.kb-category:hover {
    transform: translateY(-3px);
    border-color: var(--mj-brand-a60);
}

.kb-article h1,
.kb-article h2,
.kb-article h3 {
    color: var(--mj-text);
}

.kb-article,
.announcement,
.download-item {
    color: var(--mj-text-2);
}

.announcement h3 a,
.download-item h3 a {
    color: var(--mj-text);
}

.announcement h3 a:hover,
.download-item h3 a:hover {
    color: var(--mj-brand);
}

/* ---------------------------------------------------------------------------
   Markdown-Editor (assets/css/bootstrap-markdown.min.css wird NACH custom.css
   geladen und setzt weisse Flaechen - deshalb hoehere Spezifitaet + !important)
   ------------------------------------------------------------------------ */

body .primary-content .md-editor,
body .md-editor {
    border: 1px solid var(--mj-line) !important;
    border-radius: 14px;
    background: var(--mj-surface-3) !important;
    overflow: hidden;
}
body .md-editor.active { border-color: var(--mj-brand) !important; box-shadow: 0 0 0 3px var(--mj-brand-a20) !important; }

body .md-editor > .md-header,
body .md-editor .md-footer {
    padding: 8px 10px !important;
    background: var(--mj-surface-2) !important;
    border-color: var(--mj-line-soft) !important;
    color: var(--mj-muted-2) !important;
    font-size: 12px;
}
body .md-editor > .md-header .btn-group { display: inline-flex; gap: 2px; }
body .md-editor > .md-header .btn,
body .md-editor > .md-header .btn-default,
body .md-editor > .md-header .btn-sm {
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--mj-text-2) !important;
    box-shadow: none !important;
}
body .md-editor > .md-header .btn:hover,
body .md-editor > .md-header .btn.active { border-color: var(--mj-line) !important; background: var(--mj-surface-3) !important; color: var(--mj-text) !important; }
body .md-editor > .md-header .btn-primary,
body .md-editor > .md-header .btn.btn-primary { border-color: var(--mj-brand) !important; background: var(--mj-brand) !important; color: var(--mj-on-brand) !important; border-radius: var(--mj-r-pill) !important; }
body .md-editor .md-controls .md-control { color: var(--mj-muted-2) !important; }
body .md-editor .md-controls .md-control:hover { color: var(--mj-text) !important; }

body .md-editor > textarea,
body .md-editor > textarea:focus,
body .md-editor > .md-preview,
body .md-editor .md-input {
    padding: 14px 16px !important;
    border-top: 1px solid var(--mj-line-soft) !important;
    border-bottom: 1px solid var(--mj-line-soft) !important;
    background: var(--mj-surface-3) !important;
    color: var(--mj-text) !important;
    font-family: var(--mj-font) !important;
    font-size: 14px !important;
    line-height: 1.6;
}
body .md-editor > textarea::placeholder { color: var(--mj-muted-2); }
body .md-editor > .md-preview { color: var(--mj-text-2) !important; }
body .md-editor > .md-preview pre, body .md-editor > .md-preview code { background: var(--mj-surface-2); color: var(--mj-text); border-radius: 8px; }
body .md-editor > .md-preview a { color: var(--mj-brand); }

/* Vollbild */
body .md-editor.md-fullscreen-mode { background: var(--mj-surface) !important; }
body .md-editor.md-fullscreen-mode .md-input,
body .md-editor.md-fullscreen-mode .md-preview { background: var(--mj-surface) !important; color: var(--mj-text) !important; }
body .md-editor.md-fullscreen-mode .btn { color: var(--mj-text-2) !important; }
body .md-editor.md-fullscreen-mode .md-fullscreen-controls a { color: var(--mj-text-2); }

/* ---------------------------------------------------------------------------
   Soziale Konten
   ------------------------------------------------------------------------ */

.social-accounts .btn,
.btn-social {
    border: 1px solid var(--mj-line);
    color: var(--mj-muted);
}

.social-accounts .btn:hover,
.btn-social:hover {
    border-color: var(--mj-brand-a60);
    color: var(--mj-brand);
}

/* ---------------------------------------------------------------------------
   Serverstatus und Fehlerseiten
   ------------------------------------------------------------------------ */

.error-heading {
    color: var(--mj-text);
    font-weight: 900;
}

.server-status .table,
.server-status td {
    color: var(--mj-text-2);
}

/* ---------------------------------------------------------------------------
   Partnerprogramm
   ------------------------------------------------------------------------ */

.affiliate-stats,
.affiliate-referrals {
    color: var(--mj-text-2);
}

.affiliate-stats .stat {
    color: var(--mj-text);
    font-weight: 800;
}

/* ---------------------------------------------------------------------------
   Akzent je Produktgruppe: die Vorlagen setzen mj-acc-* (Startseite) bzw.
   data-mj-accent (Warenkorb). Weil alles ueber var(--mj-brand) faerbt, reicht
   es, die Markenvariable im jeweiligen Container umzubiegen.
   ------------------------------------------------------------------------ */
.mj-gcard.mj-acc-vserver, body #order-standard_cart[data-mj-accent="vserver"], html[data-mj-accent="vserver"] #order-standard_cart { --mj-brand: var(--mj-acc-vserver); --mj-brand-light: #4ade80; }
.mj-gcard.mj-acc-games,   body #order-standard_cart[data-mj-accent="games"], html[data-mj-accent="games"] #order-standard_cart   { --mj-brand: var(--mj-acc-games);   --mj-brand-light: #4ade80; }
.mj-gcard.mj-acc-vds,     body #order-standard_cart[data-mj-accent="vds"], html[data-mj-accent="vds"] #order-standard_cart     { --mj-brand: var(--mj-acc-vds);     --mj-brand-light: #fb923c; }
.mj-gcard.mj-acc-web,     body #order-standard_cart[data-mj-accent="web"], html[data-mj-accent="web"] #order-standard_cart     { --mj-brand: var(--mj-acc-web);     --mj-brand-light: #a78bfa; }
.mj-gcard.mj-acc-net,     body #order-standard_cart[data-mj-accent="net"], html[data-mj-accent="net"] #order-standard_cart     { --mj-brand: var(--mj-acc-net);     --mj-brand-light: #38bdf8; }
.mj-gcard.mj-acc-dedi,    body #order-standard_cart[data-mj-accent="dedi"], html[data-mj-accent="dedi"] #order-standard_cart    { --mj-brand: var(--mj-acc-dedi);    --mj-brand-light: #fbbf24; }

/* Die getoenten Ableitungen (a10..a60) sind feste rgba-Werte der Markenfarbe;
   fuer die Akzente werden sie aus der Akzentfarbe neu gebildet. */
.mj-gcard[class*="mj-acc-"]:not(.mj-acc-brand),
body #order-standard_cart[data-mj-accent]:not([data-mj-accent="brand"]),
html[data-mj-accent] #order-standard_cart {
    --mj-brand-a10: color-mix(in srgb, var(--mj-brand) 10%, transparent);
    --mj-brand-a15: color-mix(in srgb, var(--mj-brand) 15%, transparent);
    --mj-brand-a20: color-mix(in srgb, var(--mj-brand) 20%, transparent);
    --mj-brand-a25: color-mix(in srgb, var(--mj-brand) 25%, transparent);
    --mj-brand-a40: color-mix(in srgb, var(--mj-brand) 40%, transparent);
    --mj-brand-a60: color-mix(in srgb, var(--mj-brand) 60%, transparent);
    --mj-glow: 0 8px 30px color-mix(in srgb, var(--mj-brand) 25%, transparent);
}



/* ---- Quelle: 60-site.css ---------------------------------------- */
/* ============================================================================
   60 - Oeffentliche Seiten (Startseite, /vserver, /vds, ...)
   ----------------------------------------------------------------------------
   Nachbau der Next.js-Marketingseite mam-jahn.de innerhalb des Themes.
   Alles unter .mj-site; die Seite bricht aus dem Bootstrap-Container aus
   (volle Breite) und setzt sich innen ihre eigene Breite (.mj-wrap).
   Akzentfarbe je Seite ueber data-mj-accent am Wrapper (siehe 50-pages.css).
   ========================================================================== */

.mj-site {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: clip;
    color: var(--mj-text-2);
}

.mj-site[data-mj-accent="vserver"], .mj-site[data-mj-accent="games"] { --mj-brand: var(--mj-acc-vserver); --mj-brand-light: #4ade80; }
.mj-site[data-mj-accent="vds"]  { --mj-brand: var(--mj-acc-vds);  --mj-brand-light: #fb923c; }
.mj-site[data-mj-accent="web"]  { --mj-brand: var(--mj-acc-web);  --mj-brand-light: #a78bfa; }
.mj-site[data-mj-accent="net"]  { --mj-brand: var(--mj-acc-net);  --mj-brand-light: #38bdf8; }
.mj-site[data-mj-accent="dedi"] { --mj-brand: var(--mj-acc-dedi); --mj-brand-light: #fbbf24; }
.mj-site[data-mj-accent]:not([data-mj-accent="brand"]) {
    --mj-brand-a10: color-mix(in srgb, var(--mj-brand) 10%, transparent);
    --mj-brand-a15: color-mix(in srgb, var(--mj-brand) 15%, transparent);
    --mj-brand-a20: color-mix(in srgb, var(--mj-brand) 20%, transparent);
    --mj-brand-a25: color-mix(in srgb, var(--mj-brand) 25%, transparent);
    --mj-brand-a40: color-mix(in srgb, var(--mj-brand) 40%, transparent);
    --mj-brand-a60: color-mix(in srgb, var(--mj-brand) 60%, transparent);
}

.mj-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

.mj-wrap--narrow { max-width: 960px; }

/* Ein Akzent je Karte (Startseite: jede Gruppe in ihrer Farbe) */
.mj-acc-vserver, .mj-acc-games { --mj-brand: var(--mj-acc-vserver); --mj-brand-light: #4ade80; }
.mj-acc-vds  { --mj-brand: var(--mj-acc-vds);  --mj-brand-light: #fb923c; }
.mj-acc-web  { --mj-brand: var(--mj-acc-web);  --mj-brand-light: #a78bfa; }
.mj-acc-net  { --mj-brand: var(--mj-acc-net);  --mj-brand-light: #38bdf8; }
.mj-acc-dedi { --mj-brand: var(--mj-acc-dedi); --mj-brand-light: #fbbf24; }
[class*="mj-acc-"]:not(.mj-acc-brand) {
    --mj-brand-a10: color-mix(in srgb, var(--mj-brand) 10%, transparent);
    --mj-brand-a15: color-mix(in srgb, var(--mj-brand) 15%, transparent);
    --mj-brand-a20: color-mix(in srgb, var(--mj-brand) 20%, transparent);
    --mj-brand-a25: color-mix(in srgb, var(--mj-brand) 25%, transparent);
    --mj-brand-a40: color-mix(in srgb, var(--mj-brand) 40%, transparent);
    --mj-brand-a60: color-mix(in srgb, var(--mj-brand) 60%, transparent);
}

/* ---------------------------------------------------------------------------
   Hero der Website (groesser als der Portal-Hero in 50-pages.css)
   ------------------------------------------------------------------------ */
.mj-shero {
    position: relative;
    padding: clamp(72px, 12vw, 150px) 0 clamp(48px, 7vw, 88px);
    text-align: center;
    overflow: hidden;
}

.mj-shero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 0%, var(--mj-brand-a25) 0%, transparent 70%),
        linear-gradient(180deg, transparent 60%, var(--mj-black) 100%);
    pointer-events: none;
}

.mj-shero--compact { padding-top: clamp(56px, 9vw, 110px); }

.mj-shero-inner {
    position: relative;
    z-index: 1;
    max-width: 920px;
    margin: 0 auto;
    padding: 0 20px;
}

.mj-shero-title {
    margin: 0 0 18px;
    color: var(--mj-text);
    font-size: clamp(2.4rem, 5.2vw, 4.4rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.05;
    text-wrap: balance;
}

.mj-shero-title .mj-hero-accent { color: var(--mj-brand); }

.mj-shero-lead {
    max-width: 760px;
    margin: 0 auto 32px;
    color: var(--mj-muted);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 500;
    line-height: 1.6;
}

.mj-shero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.mj-shero-actions .btn,
.mj-shero-actions .btn.btn-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 54px;
    padding: 0 2rem;
    border-width: 1px;
    border-style: solid;
    line-height: 1;
    font-size: 16px;
    font-weight: 700;
}
.mj-shero-actions .btn.btn-primary { border-color: var(--mj-brand); }

.mj-shero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

/* Umschalter Pakete / Konfigurator */
.mj-mode {
    display: inline-flex;
    gap: 4px;
    margin-top: 10px;
    padding: 6px;
    border: 1px solid var(--mj-line);
    border-radius: 18px;
    background: rgba(24, 24, 27, .8);
}

.mj-mode button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: .65rem 1.4rem;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--mj-muted-2);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.mj-mode button:hover { color: var(--mj-text-2); }

.mj-mode button.is-active {
    background: var(--mj-brand);
    color: var(--mj-on-brand);
    box-shadow: 0 0 20px var(--mj-brand-a40);
}

/* ---------------------------------------------------------------------------
   Abschnitte
   ------------------------------------------------------------------------ */
.mj-ssection { padding: clamp(40px, 6vw, 80px) 0; }

.mj-ssection--line { border-top: 1px solid var(--mj-line-soft); }

.mj-ssection-head { margin-bottom: 40px; }
.mj-ssection-head--center { text-align: center; }

.mj-ssection-title {
    margin: 0 0 10px;
    color: var(--mj-text);
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
}

.mj-ssection-title .mj-section-accent { color: var(--mj-brand); }

.mj-ssection-sub {
    max-width: 640px;
    margin: 0;
    color: var(--mj-muted);
    font-size: 15.5px;
    font-weight: 500;
}

.mj-ssection-head--center .mj-ssection-sub { margin: 0 auto; }

/* Produkt-Showcase (Startseite) */
.mj-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

@media (min-width: 1100px) {
    .mj-showcase { grid-template-columns: repeat(3, 1fr); }
}

.mj-scard {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid var(--mj-brand-a25);
    border-radius: 24px;
    background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease;
}

.mj-scard::after {
    content: "";
    position: absolute;
    top: -96px;
    right: -96px;
    width: 256px;
    height: 256px;
    border-radius: 50%;
    background: var(--mj-brand-a20);
    filter: blur(100px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
}

.mj-scard:hover { transform: translateY(-4px); border-color: var(--mj-brand-a60); color: inherit; text-decoration: none; }
.mj-scard:hover::after { opacity: 1; }

.mj-scard-icon {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border: 1px solid var(--mj-brand-a40);
    border-radius: 16px;
    background: var(--mj-brand-a10);
    color: var(--mj-brand);
    font-size: 20px;
}

.mj-scard-title { margin: 0 0 8px; color: var(--mj-text); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.mj-scard-text { margin: 0 0 18px; color: var(--mj-muted); font-size: 14px; font-weight: 500; line-height: 1.6; }

.mj-scard-list { list-style: none; margin: 0 0 22px; padding: 0; }
.mj-scard-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
    color: var(--mj-text-2);
    font-size: 14px;
    font-weight: 600;
}
.mj-scard-list i { color: var(--mj-brand); font-size: 12px; }

.mj-scard-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--mj-line-soft);
}

.mj-scard-from { color: var(--mj-muted-2); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mj-scard-price { display: block; color: var(--mj-text); font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.mj-scard-price small { color: var(--mj-muted-2); font-size: .8rem; font-weight: 600; letter-spacing: 0; }
.mj-scard-cta { display: inline-flex; align-items: center; gap: 8px; color: var(--mj-brand); font-size: 14px; font-weight: 700; white-space: nowrap; }
.mj-scard:hover .mj-scard-cta i { transform: translateX(3px); }
.mj-scard-cta i { transition: transform .2s ease; }

/* Merkmale (Startseite "Entwickelt fuer Performance") */
.mj-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.mj-feature {
    position: relative;
    padding: 30px;
    border: 1px solid var(--mj-line);
    border-radius: 24px;
    background: linear-gradient(135deg, #131317 0%, #0b0b0e 60%);
    transition: transform .2s ease, border-color .2s ease;
}

.mj-feature:hover { transform: translateY(-4px); border-color: var(--mj-brand-a40); }

.mj-feature-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }

.mj-feature-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--mj-brand-a25);
    border-radius: 12px;
    background: var(--mj-brand-a10);
    color: var(--mj-brand);
    font-size: 18px;
}

.mj-feature h3 { margin: 0; color: var(--mj-text); font-size: 1.1rem; font-weight: 700; }
.mj-feature p { margin: 0; color: var(--mj-muted); font-size: 14px; line-height: 1.65; }

/* Info-Leiste (Standort, DDoS, Netzwerk, Hardware) */
.mj-infobar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.mj-info {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--mj-line-soft);
    border-radius: 18px;
    background: rgba(24, 24, 27, .4);
}

.mj-info-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 36px;
    height: 36px;
    border: 1px solid var(--mj-brand-a25);
    border-radius: 11px;
    background: var(--mj-brand-a10);
    color: var(--mj-brand);
    font-size: 14px;
}

.mj-info-label { margin: 0; color: var(--mj-muted-2); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mj-info-value { margin: 0; color: var(--mj-text-2); font-size: 14px; font-weight: 600; line-height: 1.4; }

.mj-infobar-more { display: flex; justify-content: flex-end; margin-top: 10px; }
.mj-infobar-more a { color: var(--mj-muted-2); font-size: 12.5px; font-weight: 700; }
.mj-infobar-more a:hover { color: var(--mj-brand); text-decoration: none; }

/* "In jedem Tarif inklusive" */
.mj-included {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}

.mj-included li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--mj-line-soft);
    border-radius: 14px;
    background: rgba(24, 24, 27, .4);
    color: var(--mj-text-2);
    font-size: 14px;
    font-weight: 600;
    list-style: none;
}

.mj-included { padding: 0; margin: 0; }
.mj-included li i { color: var(--mj-brand); font-size: 13px; }

/* FAQ */
.mj-faq {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 14px;
    align-items: start;
}

.mj-faq details {
    border: 1px solid var(--mj-line);
    border-radius: 18px;
    background: rgba(13, 13, 16, .6);
    overflow: hidden;
    transition: border-color .2s ease;
}

.mj-faq details[open], .mj-faq details:hover { border-color: var(--mj-brand-a40); }

.mj-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    color: var(--mj-text);
    font-size: 1.02rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.mj-faq summary::-webkit-details-marker { display: none; }
.mj-faq summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    color: var(--mj-muted-2);
    transition: transform .3s ease;
}
.mj-faq details[open] summary::after { transform: rotate(180deg); }
.mj-faq details[open] summary { color: var(--mj-brand); }

.mj-faq-body { padding: 0 20px 20px; color: var(--mj-muted); font-size: 14.5px; line-height: 1.7; }

/* Grosser Abschluss-Aufruf */
.mj-scta {
    position: relative;
    padding: clamp(48px, 7vw, 90px) 24px;
    border: 1px solid var(--mj-line);
    border-radius: 32px;
    background:
        radial-gradient(ellipse 60% 80% at 50% 0%, var(--mj-brand-a25), transparent 70%),
        linear-gradient(180deg, #121216, #0a0a0d);
    text-align: center;
    overflow: hidden;
}

.mj-scta .mj-ssection-title { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.mj-scta .mj-shero-actions { margin-top: 26px; }

/* Bewegung: Abschnitte gleiten beim Erscheinen nach oben (JS setzt is-visible) */
.mj-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.mj-reveal.is-visible { opacity: 1; transform: none; }
.no-js .mj-reveal, .mj-reveal--now { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .mj-reveal { opacity: 1; transform: none; transition: none; }
    .mj-scard, .mj-feature { transition: none; }
}

/* Header-Navigation der Website */
.mj-sitenav .nav-link.is-active { color: var(--mj-brand) !important; }
.mj-sitenav .nav-link.is-active::after {
    content: "";
    display: block;
    height: 2px;
    margin-top: 2px;
    border-radius: 2px;
    background: var(--mj-brand);
}

/* Seiten ohne Portal-Breadcrumb: Abstand zum Kopf */
.mj-site--page { margin-top: -20px; }


/* ---- Quelle: 61-site-components.css ---------------------------------------- */
/* ============================================================================
   61 - Bausteine der oeffentlichen Seiten: Tarifkarten, Konfigurator,
   Pillen, Schalter, Anfrage-Formular, Hardware-Karten, Status, Rechtstexte
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Tarifkarten (site/_plans.tpl) - gleiche Gestalt wie im Warenkorb
   ------------------------------------------------------------------------ */
.mj-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.mj-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-xl);
    background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 40px -30px rgba(0, 0, 0, .8);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.mj-plan::before {
    content: "";
    position: absolute;
    inset: -1px -1px auto -1px;
    height: 220px;
    background: radial-gradient(60% 80% at 50% 0%, var(--mj-brand-a20) 0%, transparent 70%);
    pointer-events: none;
}

.mj-plan::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--mj-brand), transparent);
}

.mj-plan:hover { transform: translateY(-4px); border-color: var(--mj-brand-a60); box-shadow: 0 30px 60px -30px var(--mj-brand-a40); }
.mj-plan--popular { border-color: var(--mj-brand-a60); }

.mj-plan-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
    padding: .25rem .7rem;
    border-radius: var(--mj-r-pill);
    background: var(--mj-brand);
    color: var(--mj-on-brand);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
}

.mj-plan-head { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 30px 30px 18px; }

.mj-plan-name {
    display: inline-flex;
    padding: .3rem .8rem;
    border: 1px solid var(--mj-brand-a40);
    border-radius: var(--mj-r-pill);
    background: var(--mj-brand-a10);
    color: var(--mj-brand);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mj-plan-value { color: var(--mj-text); font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.mj-plan-value small { margin-left: 6px; color: var(--mj-muted-2); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.mj-plan-stock { color: #ef4444; font-size: 12px; font-weight: 700; }

.mj-plan-list { flex: 1 1 auto; margin: 0; padding: 6px 30px 18px; list-style: none; }
.mj-plan-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--mj-line-soft);
    color: var(--mj-text-2);
    font-size: 14.5px;
}
.mj-plan-list li:first-child { border-top: 1px solid var(--mj-line-soft); }
.mj-plan-list li b { color: var(--mj-text); font-weight: 700; }
.mj-plan-list li i {
    display: inline-grid;
    place-items: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mj-brand-a15);
    color: var(--mj-brand);
    font-size: 10px;
}

.mj-plan-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 14px 30px 30px; }
.mj-plan-from { display: block; margin-bottom: 4px; color: var(--mj-muted-2); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.mj-plan-price { color: var(--mj-text); font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.mj-plan-price small { color: var(--mj-muted-2); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.mj-plan-btn { padding: .8rem 1.4rem; border-radius: var(--mj-r-pill); font-weight: 700; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Konfigurator (site/_flex.tpl) und Anfrage-Formular (site/dedicated.tpl)
   ------------------------------------------------------------------------ */
.mj-flex {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: clamp(22px, 4vw, 40px);
    border: 1px solid var(--mj-line);
    border-radius: 28px;
    background: linear-gradient(180deg, #121216 0%, #0b0b0e 100%);
    box-shadow: 0 0 0 1px var(--mj-brand-a10) inset;
}

.mj-flex-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.mj-flex-title { margin: 0; color: var(--mj-text); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.mj-flex-monthly { text-align: right; color: var(--mj-text-2); font-size: 1.1rem; font-weight: 800; }
.mj-flex-monthly small { color: var(--mj-muted-2); font-size: 12px; font-weight: 600; }
.mj-flex-base { display: block; color: var(--mj-muted-2); font-size: 11px; font-weight: 600; }

.mj-flex-rows { display: flex; flex-direction: column; gap: 26px; }
.mj-flex-row .mj-opt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mj-flex-row .mj-opt-name { display: inline-flex; align-items: center; gap: 8px; color: var(--mj-text); font-size: 14px; font-weight: 600; }
.mj-flex-row .mj-opt-name i { width: 18px; color: var(--mj-brand); text-align: center; }
.mj-flex-row .mj-opt-value { color: var(--mj-text); font-size: 15px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mj-flex-row .mj-opt-value b { font-size: 17px; }
.mj-flex-row .mj-opt-unit { color: var(--mj-text-2); font-weight: 600; }
.mj-flex-row .mj-opt-price { margin-left: 6px; color: var(--mj-muted-2); font-size: 12px; font-weight: 500; }

/* Nativer Range-Slider im Look der Hauptseite; --pct setzt das Skript */
.mj-range {
    --pct: 0%;
    width: 100%;
    height: 6px;
    margin: 6px 0 0;
    border-radius: var(--mj-r-pill);
    background: linear-gradient(90deg, var(--mj-brand) 0%, var(--mj-brand) var(--pct), var(--mj-surface-3) var(--pct), var(--mj-surface-3) 100%);
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
}
.mj-range::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    border: 3px solid var(--mj-brand);
    border-radius: 50%;
    background: var(--mj-surface);
    box-shadow: 0 0 0 4px var(--mj-brand-a20);
    -webkit-appearance: none;
    appearance: none;
    cursor: grab;
    transition: box-shadow .15s ease, transform .15s ease;
}
.mj-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 3px solid var(--mj-brand);
    border-radius: 50%;
    background: var(--mj-surface);
    box-shadow: 0 0 0 4px var(--mj-brand-a20);
    cursor: grab;
}
.mj-range:hover::-webkit-slider-thumb, .mj-range:focus-visible::-webkit-slider-thumb { transform: scale(1.08); box-shadow: 0 0 0 6px var(--mj-brand-a25); }
.mj-range:focus-visible { outline: none; }
.mj-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px var(--mj-brand-a40); }

.mj-range-marks { display: flex; justify-content: space-between; margin-top: 8px; }
/* Marken exakt unter ihrer Position auf dem Regler (Regler-Daumen 22px breit) */
.mj-range-marks--placed { position: relative; display: block; height: 18px; margin: 8px 11px 0; }
.mj-range-marks--placed button { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.mj-range-marks--placed button.is-first { transform: translateX(-11px); }
.mj-range-marks--placed button.is-last { transform: translateX(calc(-100% + 11px)); }
.mj-range-marks button { padding: 0 2px; border: 0; background: transparent; color: var(--mj-muted-2); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.mj-range-marks button:hover { color: var(--mj-brand); }

/* Ja/Nein als Schalter */
.mj-flex-toggle {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 16px 20px;
    border: 1px solid var(--mj-line);
    border-radius: 18px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}
.mj-flex-toggle:hover { border-color: var(--mj-line-strong); }
.mj-flex-toggle.is-on { border-color: var(--mj-brand-a60); background: var(--mj-brand-a10); }
.mj-flex-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mj-flex-toggle-switch { position: relative; flex: 0 0 44px; height: 24px; border-radius: var(--mj-r-pill); background: var(--mj-surface-3); transition: background-color .2s ease; }
.mj-flex-toggle-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s ease; }
.mj-flex-toggle.is-on .mj-flex-toggle-switch { background: var(--mj-brand); }
.mj-flex-toggle.is-on .mj-flex-toggle-switch::after { transform: translateX(20px); }
.mj-flex-toggle-text { display: flex; flex-direction: column; gap: 2px; color: var(--mj-text-2); font-size: 14px; }
.mj-flex-toggle-text b { color: var(--mj-text); }
.mj-flex-toggle-text small { color: var(--mj-muted-2); font-size: 12px; }
.mj-flex-toggle-text [data-mj-opt-price] { color: var(--mj-muted-2); font-size: 12px; }

/* Pillen (Auswahl) */
.mj-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.mj-pill {
    padding: .5rem 1rem;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    background: var(--mj-surface);
    color: var(--mj-text-2);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.mj-pill:hover { border-color: var(--mj-line-strong); color: var(--mj-text); }
.mj-pill.is-active { border-color: var(--mj-brand); background: var(--mj-brand); color: var(--mj-on-brand); }

/* Laufzeit-Pillen (gleiche Gestalt wie im Warenkorb) */
.mj-flex .mj-cycles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.mj-flex .mj-cycle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 116px;
    padding: .55rem 1.1rem .5rem;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    background: var(--mj-surface);
    color: var(--mj-text-2);
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.mj-flex .mj-cycle.is-active { border-color: var(--mj-brand); background: var(--mj-brand); color: var(--mj-on-brand); }
.mj-flex .mj-cycle__label { font-size: 14px; font-weight: 700; white-space: nowrap; }
.mj-flex .mj-cycle__price { margin-top: 1px; font-size: 11.5px; font-weight: 500; opacity: .8; white-space: nowrap; }
.mj-flex .mj-cycle__badge {
    position: absolute;
    top: -9px;
    right: 10px;
    padding: 1px 7px;
    border: 1px solid var(--mj-brand-a40);
    border-radius: var(--mj-r-pill);
    background: var(--mj-surface-2);
    color: var(--mj-brand);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}
.mj-flex .mj-cycle.is-active .mj-cycle__badge { border-color: var(--mj-brand); background: var(--mj-on-brand); }

.mj-flex-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 22px; border-top: 1px solid var(--mj-line-soft); }
.mj-flex-total { color: var(--mj-brand); }
.mj-flex-btn { padding: .9rem 1.8rem; border-radius: var(--mj-r-pill); font-weight: 700; }

.mj-flex .mj-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mj-site .mj-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mj-site .mj-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: .35rem .75rem;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    background: rgba(255, 255, 255, .03);
    color: var(--mj-text-2);
    font-size: 12.5px;
    line-height: 1.2;
    text-decoration: none;
}
.mj-site .mj-chip i { color: var(--mj-brand); font-size: 10px; }
.mj-site .mj-chip b { color: var(--mj-text); font-weight: 600; }
.mj-site a.mj-chip:hover { border-color: var(--mj-brand-a60); color: var(--mj-text); text-decoration: none; }

.mj-inquiry textarea.form-control { min-height: 130px; }
.mj-inquiry .mj-infobar-more { margin: 0; }
.mj-inquiry label { color: var(--mj-text-2); font-size: 13px; font-weight: 600; }

/* Hardware-Seite: eine Karte je Produktgruppe */
.mj-hwcard { margin-bottom: 20px; padding: 26px; border: 1px solid var(--mj-brand-a25); border-radius: 24px; background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); }
.mj-hwcard-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 18px; }
.mj-hwcard-head > div { flex: 1 1 300px; }
.mj-hwcard-head .mj-scard-icon { margin: 0; }
.mj-note { display: flex; gap: 10px; align-items: flex-start; border-radius: 16px; }

/* Status */
.mj-statusbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border: 1px solid color-mix(in srgb, #22c55e 40%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, #22c55e 10%, transparent);
    color: var(--mj-text);
    font-size: 15px;
}
.mj-statusbar .mj-status-dot, .mj-feature .mj-status-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px color-mix(in srgb, #22c55e 25%, transparent); }

/* Rechtstexte */
.mj-legal-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.mj-legal-head .mj-feature-icon { flex: 0 0 48px; height: 48px; }
.mj-legal-intro { padding: 22px 26px; border: 1px solid var(--mj-line); border-radius: 18px; background: rgba(24, 24, 27, .5); color: var(--mj-text-2); font-size: 15.5px; line-height: 1.7; }
.mj-legal-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.mj-legal-item { padding: 22px 26px; border: 1px solid var(--mj-line-soft); border-radius: 18px; background: rgba(13, 13, 16, .7); }
.mj-legal-item h2 { margin: 0 0 8px; color: var(--mj-text); font-size: 1.15rem; font-weight: 700; }
.mj-legal-item p { margin: 0 0 8px; color: var(--mj-muted); font-size: 14.5px; line-height: 1.7; }
.mj-legal-item p:last-child { margin-bottom: 0; }
.mj-dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; margin: 0; }
.mj-dl dt { color: var(--mj-muted-2); font-size: 12.5px; font-weight: 600; }
.mj-dl dd { margin: 0; color: var(--mj-text-2); font-size: 14px; }
@media (max-width: 560px) { .mj-dl { grid-template-columns: 1fr; } .mj-dl dd { margin-bottom: 6px; } }

/* Stufen-Slider: Marken sind die Werte selbst (10 GB, 25 GB, ...) */
.mj-range-marks--steps button.is-active { color: var(--mj-brand); }
.mj-flex-toggle-text b i { margin-right: 4px; color: var(--mj-brand); font-size: 13px; }
.mj-flex-toggle-text b [data-mj-opt-price] { margin-left: 4px; font-weight: 600; }


/* ---- Quelle: 63-site-plans5.css ---------------------------------------- */
/* ============================================================================
   63 - Tarifkarten 5 je Reihe (KVM, VDS) wie auf mam-jahn.de, kompakter
   ========================================================================== */

@media (min-width: 1200px) {
    .mj-plans--5 { grid-template-columns: repeat(5, 1fr); gap: 16px; }
}

@media (min-width: 900px) and (max-width: 1199.98px) {
    .mj-plans--5 { grid-template-columns: repeat(3, 1fr); }
}

.mj-plans--5 .mj-plan-head { padding: 22px 20px 12px; gap: 8px; }
.mj-plans--5 .mj-plan-name { font-size: 11px; padding: .25rem .65rem; }
.mj-plans--5 .mj-plan-value { font-size: 2rem; }
.mj-plans--5 .mj-plan-value small { font-size: .85rem; }
.mj-plans--5 .mj-plan-list { padding: 4px 20px 12px; }
.mj-plans--5 .mj-plan-list li { padding: 9px 0; gap: 10px; font-size: 12.5px; }
.mj-plans--5 .mj-plan-list li i { flex-basis: 20px; width: 20px; height: 20px; font-size: 10px; }
.mj-plans--5 .mj-plan-foot { flex-wrap: wrap; align-items: center; padding: 10px 20px 22px; gap: 10px; }
.mj-plans--5 .mj-plan-price { font-size: 1.55rem; }
.mj-plans--5 .mj-plan-btn { padding: .6rem 1rem; font-size: 13px; }
.mj-plans--5 .mj-plan-badge { top: 14px; right: 14px; }

.mj-plan-note { display: block; margin-top: 4px; color: var(--mj-muted-2); font-size: 10.5px; font-weight: 600; line-height: 1.3; }
.mj-flex-foot .mj-plan-note { margin-top: 6px; }
.mj-scard-foot .mj-plan-note { margin-top: 2px; }

/* Hinweis unter den Paketen: "Kein passendes Paket dabei?" */
.mj-flexhint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 20px;
    padding: 14px 18px;
    border: 1px solid var(--mj-line);
    border-radius: 16px;
    background: rgba(24, 24, 27, .5);
    color: var(--mj-text-2);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.mj-flexhint:hover { border-color: var(--mj-brand-a60); color: var(--mj-text); }
.mj-flexhint i { color: var(--mj-brand); }


/* ---- Quelle: 64-site-ideas.css ---------------------------------------- */
/* ============================================================================
   64 - Umsetzungen aus ideen.md: Brutto/Netto-Umschalter, Beliebt-Karte,
   Vergleichstabelle, Warenkorb-Erinnerung, Kennzahlen, Kopfleisten-Menue offen
   ========================================================================== */

/* Kopfleiste: offenes Menue faerbt den Punkt nicht mehr schwarz */
header.header .mj-navlinks > li.dropdown.show > a.nav-link,
header.header .mj-navlinks > li.dropdown > a.nav-link:focus {
    background: rgba(255, 255, 255, .06);
    color: var(--mj-text);
}
header.header .mj-navlinks > li.dropdown > a.nav-link::after { margin-left: 6px; opacity: .6; }
header.header .mj-clientmenu-col--solo { align-self: end; }
header.header .mj-clientmenu-panel a.mj-clientmenu-solo { margin-top: 0; }
header.header .mj-clientmenu-panel a.mj-clientmenu-solo i { margin-right: 6px; color: var(--mj-brand); font-size: 11px; }
header.header .mj-clientmenu-panel .dropdown-divider { margin: 4px 10px; border-color: var(--mj-line-soft); }

/* Idee 1: Brutto/Netto */
.mj-taxbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.mj-taxtoggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    background: rgba(24, 24, 27, .5);
    color: var(--mj-text-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.mj-taxtoggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mj-taxtoggle .mj-flex-toggle-switch { flex-basis: 36px; height: 20px; }
.mj-taxtoggle .mj-flex-toggle-switch::after { width: 14px; height: 14px; }
.mj-taxtoggle input:checked ~ .mj-flex-toggle-switch { background: var(--mj-brand); }
.mj-taxtoggle input:checked ~ .mj-flex-toggle-switch::after { transform: translateX(16px); }

/* Idee 2: Beliebt-Karte hervorheben */
.mj-plan--popular { box-shadow: 0 0 0 1px var(--mj-brand-a40), 0 24px 60px -30px var(--mj-brand-a60); }
.mj-plan--popular::before { height: 260px; background: radial-gradient(60% 80% at 50% 0%, var(--mj-brand-a25) 0%, transparent 70%); }
.mj-plan--popular .mj-plan-btn { box-shadow: 0 10px 28px -10px var(--mj-brand-a60); }

/* Idee 3: Vergleichstabelle */
.mj-compare { margin-top: 24px; border: 1px solid var(--mj-line); border-radius: 18px; background: rgba(13, 13, 16, .6); overflow: hidden; }
.mj-compare summary {
    display: flex; align-items: center; gap: 10px; padding: 16px 20px;
    color: var(--mj-text); font-size: 14.5px; font-weight: 700; cursor: pointer; list-style: none;
}
.mj-compare summary::-webkit-details-marker { display: none; }
.mj-compare summary i { color: var(--mj-brand); }
.mj-compare-scroll { overflow-x: auto; padding: 0 20px 20px; }
.mj-compare-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mj-compare-table th, .mj-compare-table td { padding: 10px 12px; border-bottom: 1px solid var(--mj-line-soft); text-align: left; white-space: nowrap; }
.mj-compare-table thead th { color: var(--mj-brand); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.mj-compare-table thead th small { display: block; color: var(--mj-text); font-size: 13px; letter-spacing: 0; text-transform: none; }
.mj-compare-table tbody th { color: var(--mj-muted); font-weight: 600; }
.mj-compare-table td { color: var(--mj-text-2); font-weight: 600; }
.mj-compare-price td b { color: var(--mj-text); font-size: 15px; }

/* Idee 6: Warenkorb-Erinnerung */
.mj-cartbar { border-bottom: 1px solid var(--mj-brand-a25); background: var(--mj-brand-a10); }
.mj-cartbar .mj-navbar-inner { justify-content: space-between; min-height: 44px; color: var(--mj-text); font-size: 13.5px; font-weight: 600; }
.mj-cartbar i { margin-right: 6px; color: var(--mj-brand); }
.mj-cartbar .btn { padding: .35rem .9rem; border-radius: var(--mj-r-pill); font-size: 12.5px; }

/* Idee 9: Kennzahlen */
.mj-stats { margin-top: 18px; }


/* ---- Quelle: 65-site-wireguard.css ---------------------------------------- */
/* ============================================================================
   65 - WireGuard-Seite (site/wireguard.tpl) + Zusaetze der Tarifkarte:
   Kurzbeschreibung und Netzwerk-Upgrade-Stufen (site/_plans.tpl)
   ========================================================================== */

.mj-plan-desc { color: var(--mj-muted-2); font-size: 13px; line-height: 1.5; }
.mj-plan-upg { margin: 0 30px 6px; padding: 14px 0 0; border-top: 1px solid var(--mj-line-soft); }
.mj-plan-upg-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--mj-muted-2); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.mj-plan-upg-title i { color: var(--mj-brand); font-size: 12px; }
.mj-plan-upg-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.mj-plan-upg-step { padding: 5px 11px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-pill); background: var(--mj-surface-2); color: var(--mj-text-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.mj-plan-upg-step b { color: var(--mj-text); font-weight: 700; }
.mj-plan-upg-step.is-included { border-color: var(--mj-brand-a40); background: var(--mj-brand-a15); color: var(--mj-brand-light, var(--mj-brand)); }

.mj-wg .mj-wg-facts { justify-content: center; margin: -6px 0 8px; }
.mj-wg .mj-wg-note { max-width: 640px; margin: 22px auto 0; color: var(--mj-muted-2); font-size: 13px; line-height: 1.6; text-align: center; }

/* Einrichtung: vier Schritte in fester Reihenfolge */
.mj-wg-setup { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.mj-wg-setup li { position: relative; padding: 24px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-xl); background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset; }
.mj-wg-setup li + li::before { content: ""; position: absolute; top: 43px; left: -17px; width: 17px; height: 1px; background: var(--mj-brand-a40); }
.mj-wg-setup-no { display: inline-grid; place-items: center; width: 38px; height: 38px; margin: 0 0 16px; border-radius: 12px; background: var(--mj-brand-a15); color: var(--mj-brand-light, var(--mj-brand)); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mj-wg-setup h3 { margin: 0 0 6px; color: var(--mj-text); font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.mj-wg-setup p { margin: 0; color: var(--mj-text-2); font-size: 13.5px; line-height: 1.6; }

/* Kopf: Fakten-Pillen gehoeren optisch zum Hero, nicht zum naechsten Abschnitt */
.mj-wg .mj-shero { padding-bottom: clamp(28px, 4vw, 44px); }
.mj-wg .mj-wg-facts { margin: 0 0 clamp(20px, 4vw, 48px); }

/* Vorteile: sechs Karten -> 3 x 2 statt 4 + 2 */
.mj-wg .mj-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mj-wg .mj-feature { height: 100%; }

/* Einsatzszenarien: 2 x 2 Karten */
.mj-wg-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mj-wg-case { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-xl); background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset; }
.mj-wg-case .mj-feature-icon { flex: 0 0 auto; }
.mj-wg-case h3 { margin: 2px 0 6px; color: var(--mj-text); font-size: 1rem; font-weight: 800; }
.mj-wg-case p { margin: 0; color: var(--mj-text-2); font-size: 13.5px; line-height: 1.6; }

/* Technische Daten: Zeilen laufen in zwei Spalten */
.mj-wg-specs { columns: 2; column-gap: 0; margin: 0; padding: 8px 0; border: 1px solid var(--mj-line); border-radius: var(--mj-r-xl); background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); }
.mj-wg-specs > div { display: flex; justify-content: space-between; gap: 18px; margin: 0 28px; padding: 13px 0; border-bottom: 1px solid var(--mj-line-soft); font-size: 13.5px; break-inside: avoid; }
.mj-wg-specs dt { color: var(--mj-muted-2); font-weight: 500; }
.mj-wg-specs dd { margin: 0; color: var(--mj-text); font-weight: 600; text-align: right; }

@media (max-width: 991.98px) {
    .mj-wg .mj-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mj-wg-setup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mj-wg-setup li + li::before { display: none; }
}
@media (max-width: 767.98px) {
    .mj-wg-cases { grid-template-columns: 1fr; }
    .mj-wg-specs { columns: 1; }
}
@media (max-width: 575.98px) {
    .mj-wg .mj-features { grid-template-columns: 1fr; }
    .mj-wg-setup { grid-template-columns: 1fr; }
    .mj-plan-upg { margin-left: 20px; margin-right: 20px; }
    .mj-wg-specs > div { flex-direction: column; gap: 2px; }
    .mj-wg-specs dd { text-align: left; }
}