/*
 * JumpQR — Admin UI
 * Extends Bootstrap 5.3. Custom styles only where Bootstrap utilities fall short.
 */

:root {
    --sidebar-width: 220px;
    --topbar-height: 52px;
    --sidebar-bg: #ffffff;
    --sidebar-border: #e9ecef;
    --sidebar-link: #4b5563;
    --sidebar-link-hover-bg: #f3f4f6;
    --sidebar-link-active-bg: #eff6ff;
    --sidebar-link-active: #1d4ed8;
    --sidebar-label: #9ca3af;
    --brand-primary: #1d4ed8;
    --topbar-bg: #111827;
}

/* ── Reset / Base ───────────────────────────────────────────────── */
body.admin-body { background: #f8fafc; overflow-x: hidden; }

/* ── Topbar ─────────────────────────────────────────────────────── */
.admin-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
    height: var(--topbar-height);
    background: var(--topbar-bg) !important;
    padding: 0 1rem;
    display: flex; align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.brand-icon { color: #60a5fa; font-size: 1.05rem; }
.brand-badge {
    font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    background: rgba(255,255,255,.12); color: rgba(255,255,255,.65);
    padding: .15rem .45rem; border-radius: 4px; line-height: 1.4;
}
.opacity-60 { opacity: .6; }

/* ── Layout ─────────────────────────────────────────────────────── */
.admin-layout {
    display: flex;
    padding-top: var(--topbar-height);
    min-height: 100vh;
}
.admin-main {
    flex: 1; min-width: 0; overflow-x: hidden;
}
.admin-content { padding: 1.5rem; }

/* ── Desktop Sidebar ────────────────────────────────────────────── */
.admin-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    min-height: calc(100vh - var(--topbar-height));
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    overflow-y: auto;
    position: sticky;
    top: var(--topbar-height);
    height: calc(100vh - var(--topbar-height));
}

/* ── Mobile Sidebar ─────────────────────────────────────────────── */
.admin-sidebar-mobile { width: var(--sidebar-width) !important; }
.sidebar-toggle { line-height: 1; }

/* ── Sidebar Nav ────────────────────────────────────────────────── */
.sidebar-section { padding: .5rem 0 .25rem; }
.sidebar-section--bottom { margin-top: auto; border-top: 1px solid var(--sidebar-border); padding-top: .75rem; }

.sidebar-label {
    font-size: .67rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .09em; color: var(--sidebar-label);
    padding: .25rem .9rem .15rem;
    display: block;
}

.sidebar-link {
    display: flex; align-items: center; gap: .55rem;
    padding: .38rem .9rem;
    font-size: .84rem; color: var(--sidebar-link);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .12s, color .12s, border-color .12s;
    border-radius: 0;
    cursor: pointer;
    line-height: 1.4;
}
.sidebar-link i { font-size: .95rem; flex-shrink: 0; width: 1.1rem; text-align: center; }
.sidebar-link:hover { background: var(--sidebar-link-hover-bg); color: #111827; }
.sidebar-link.active {
    background: var(--sidebar-link-active-bg);
    color: var(--sidebar-link-active);
    border-left-color: var(--brand-primary);
    font-weight: 600;
}
.sidebar-link--danger { color: #dc2626 !important; }
.sidebar-link--danger:hover { background: #fef2f2 !important; }

/* ── Page Header ─────────────────────────────────────────────────── */
.page-header { margin-bottom: 1.25rem; }
.page-header h1 { font-size: 1.2rem; font-weight: 700; margin-bottom: .15rem; }
.page-header .page-subtitle { color: #6b7280; font-size: .85rem; }

/* ── Cards ───────────────────────────────────────────────────────── */
.card { border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: none; }
.card-header { background: #f9fafb; border-bottom: 1px solid #e5e7eb; font-weight: 600; padding: .65rem 1rem; font-size: .9rem; }

/* ── Stat Cards ──────────────────────────────────────────────────── */
.stat-card { border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; padding: 1rem 1rem .8rem; }
.stat-card .stat-icon { font-size: 1.35rem; width: 2.4rem; height: 2.4rem; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-card .stat-icon.icon-blue   { background: #dbeafe; color: #1d4ed8; }
.stat-card .stat-icon.icon-green  { background: #dcfce7; color: #15803d; }
.stat-card .stat-icon.icon-purple { background: #ede9fe; color: #7c3aed; }
.stat-card .stat-icon.icon-amber  { background: #fef3c7; color: #b45309; }
.stat-card .stat-icon.icon-red    { background: #fee2e2; color: #dc2626; }
.stat-card .stat-icon.icon-cyan   { background: #cffafe; color: #0e7490; }
.stat-value { font-size: 1.6rem; font-weight: 800; color: #111827; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-label { font-size: .78rem; color: #6b7280; margin-top: .25rem; font-weight: 500; }

/* ── Quick Actions ───────────────────────────────────────────────── */
.quick-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.quick-action-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .42rem .85rem; font-size: .83rem; font-weight: 500;
    border-radius: 8px; text-decoration: none; transition: all .12s;
    border: 1px solid;
}

/* ── Empty State ─────────────────────────────────────────────────── */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 3rem 2rem; text-align: center;
}
.empty-state-icon { font-size: 2.5rem; color: #d1d5db; margin-bottom: .75rem; }
.empty-state-title { font-size: .95rem; font-weight: 600; color: #374151; margin-bottom: .35rem; }
.empty-state-text { font-size: .83rem; color: #9ca3af; margin-bottom: 1rem; max-width: 280px; }

/* ── Tables ──────────────────────────────────────────────────────── */
.table-card { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.table > :not(caption) > * > * { padding: .45rem .75rem; vertical-align: middle; }
.table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 600; background: #f9fafb; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover tbody tr:hover td { background: #f9fafb; }

/* ── Badges (semantic) ───────────────────────────────────────────── */
.badge { font-size: .72rem; font-weight: 600; padding: .28em .6em; border-radius: 5px; }
.badge-active  { background: #dcfce7; color: #15803d; }
.badge-paused  { background: #fef3c7; color: #b45309; }
.badge-expired { background: #fee2e2; color: #dc2626; }
.badge-blocked { background: #fee2e2; color: #dc2626; }
.badge-revoked { background: #fee2e2; color: #dc2626; }
.badge-admin   { background: #dbeafe; color: #1d4ed8; }
.badge-user    { background: #f3f4f6; color: #4b5563; }
.badge-type    { background: #f3f4f6; color: #4b5563; }
.badge-pw      { background: #fef3c7; color: #b45309; }
.badge-utm     { background: #dbeafe; color: #1d4ed8; }
.badge-yes     { background: #fef3c7; color: #b45309; }
.badge-no      { background: #f9fafb;  color: #9ca3af; border: 1px solid #e5e7eb; }
.badge-pending   { background: #fef3c7; color: #b45309; }
.badge-approved  { background: #dcfce7; color: #15803d; }
.badge-rejected  { background: #fee2e2; color: #dc2626; }
.badge-converted { background: #dbeafe; color: #1d4ed8; }
.badge-open      { background: #fee2e2; color: #dc2626; }
.badge-reviewed  { background: #fef3c7; color: #b45309; }
.badge-closed    { background: #f3f4f6; color: #4b5563; }
.badge-available     { background: #dcfce7; color: #15803d; }
.badge-reserved      { background: #dbeafe; color: #1d4ed8; }
.badge-static-wifi   { background: #eff6ff; color: #1d4ed8; }
.badge-static-vcard  { background: #f5f3ff; color: #7c3aed; }
.badge-static-text   { background: #f3f4f6; color: #374151; }
.badge-static-geo    { background: #fff1f2; color: #c2410c; }

/* ── Action Buttons ──────────────────────────────────────────────── */
.btn-xs { padding: .2rem .5rem; font-size: .73rem; }
.action-group { display: flex; gap: .3rem; justify-content: flex-end; align-items: center; flex-wrap: nowrap; }

/* ── Monospace link ─────────────────────────────────────────────── */
.link-mono { font-family: monospace; font-size: .88rem; font-weight: 600; color: #111827; text-decoration: none; }
.link-mono:hover { color: #1d4ed8; }
.link-sub { display: block; font-size: .72rem; color: #9ca3af; }

/* ── Copy button ─────────────────────────────────────────────────── */
.btn-copy { transition: background .15s, color .15s; }

/* ── Upload zone ────────────────────────────────────────────────── */
.upload-zone { border: 2px dashed #d1d5db; border-radius: 10px; padding: 2rem; text-align: center; position: relative; background: #fafafa; transition: border-color .15s; }
.upload-zone:hover, .upload-zone:focus-within { border-color: #3b82f6; background: #f0f9ff; }
.upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* ── Inline bar ─────────────────────────────────────────────────── */
.bar-inline { display: inline-block; height: 8px; background: #bfdbfe; border-radius: 4px; margin-right: .375rem; vertical-align: middle; }

/* ── Distribution bars ──────────────────────────────────────────── */
.dist-bar-wrap { flex: 1; background: #f1f5f9; border-radius: 4px; height: 8px; overflow: hidden; }
.dist-bar { height: 100%; background: #3b82f6; border-radius: 4px; min-width: 2px; }

/* ── Section divider in forms ────────────────────────────────────── */
.section-divider { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #9ca3af; border-top: 1px solid #f1f5f9; padding-top: 1.1rem; margin-bottom: .875rem; margin-top: .25rem; }

/* ── Form help text ─────────────────────────────────────────────── */
.form-help { display: flex; align-items: flex-start; gap: .5rem; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 7px; padding: .6rem .75rem; font-size: .8rem; color: #0369a1; margin-top: .4rem; }
.form-help i { flex-shrink: 0; margin-top: .05rem; }

/* ── Self row highlight ──────────────────────────────────────────── */
.row-self > td { background-color: rgba(220, 252, 231, .3) !important; }

/* ── UTM grid ───────────────────────────────────────────────────── */
.utm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }

/* ── Info strip ─────────────────────────────────────────────────── */
.info-strip { display: flex; align-items: center; gap: 1rem; padding: .65rem .875rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; flex-wrap: wrap; }

/* ── Code block ─────────────────────────────────────────────────── */
.code-block { background: #1e293b; color: #e2e8f0; padding: 1.25rem; border-radius: 8px; font-family: monospace; font-size: .8125rem; line-height: 1.7; overflow-x: auto; white-space: pre-wrap; }

/* ── Key display ────────────────────────────────────────────────── */
.key-display { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: .75rem 1rem; font-family: monospace; font-size: .85rem; word-break: break-all; }

/* ── Danger zone ─────────────────────────────────────────────────── */
.danger-zone { border: 1px solid #fecaca; border-radius: 8px; padding: 1rem; background: #fff5f5; }
.danger-zone-title { font-size: .8rem; font-weight: 700; color: #dc2626; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }

/* ── Public layout header ───────────────────────────────────────── */
.public-nav .nav-link { color: rgba(255,255,255,.75); }
.public-nav .nav-link:hover { color: #fff; }

/* ── Accessibility ───────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(29, 78, 216, .25); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .admin-content { padding: 1rem; }
    .utm-grid { grid-template-columns: 1fr; }
    .stat-value { font-size: 1.35rem; }
    .table > :not(caption) > * > * { padding: .35rem .5rem; }
}
@media (max-width: 575px) {
    .admin-content { padding: .75rem; }
}

/* ── Dashed card border (coming soon etc.) ──────────────────────────── */
.card.border-dashed { border-style: dashed !important; border-color: #d1d5db !important; }
.card.border-dashed .card-header { background: #f9fafb; }

/* ── QR Design Presets (template grid) ─────────────────────────────── */
.qr-preset-btn {
    display: flex; flex-direction: column; align-items: center;
    width: 76px; padding: .4rem .3rem; gap: .3rem;
    border: 1.5px solid #e5e7eb; border-radius: 8px;
    background: #fff; cursor: pointer; text-align: center;
    transition: border-color .12s, box-shadow .12s;
}
.qr-preset-btn:hover { border-color: #93c5fd; background: #f0f9ff; }
.qr-preset-btn.active { border-color: var(--brand-primary); box-shadow: 0 0 0 2px rgba(29,78,216,.15); background: #eff6ff; }
.qr-preset-swatch { width: 52px; height: 52px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.55rem; border: 1px solid rgba(0,0,0,.06); }
.qr-preset-name { font-size: .62rem; color: #6b7280; line-height: 1.1; display: block; }

/* ── QR Logo Preset Grid ────────────────────────────────────────────── */
.qr-logo-preset-label {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 74px; min-height: 78px;
    border: 1.5px solid #e5e7eb; border-radius: 10px;
    background: #fff; cursor: pointer; text-align: center;
    transition: border-color .12s, background .12s, box-shadow .12s;
    padding: .55rem .2rem .4rem;
    font-size: .65rem; color: #6b7280; line-height: 1.2;
    user-select: none;
}
.qr-logo-preset-label i { font-size: 1.7rem; color: #374151; margin-bottom: .3rem; display: block; }
.qr-logo-preset-label:hover { border-color: #93c5fd; background: #f0f9ff; }
.btn-check:checked + .qr-logo-preset-label {
    border-color: var(--brand-primary);
    background: #eff6ff;
    box-shadow: 0 0 0 2px rgba(29,78,216,.15);
    color: var(--brand-primary);
    font-weight: 600;
}
.btn-check:checked + .qr-logo-preset-label i { color: var(--brand-primary); }

/* ── QR Logo Upload Preview ─────────────────────────────────────── */
.qr-logo-upload-preview { max-height: 72px; max-width: 144px; object-fit: contain; border-radius: 6px; border: 1px solid #e5e7eb; padding: 4px; background: #fff; margin-top: .5rem; }

/* ════════════════════════════════════════════════════════════════════════════
   JumpQR — Public Marketing Page (Etappe 30.1)
   CI Colors: Navy #020617 · Graphite #111827 · Slate #475569
              Blue #2563EB · Light Blue #EFF6FF · BG #F8FAFC
   ════════════════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ─────────────────────────────────────────────────── */
:root {
    --jq-navy:       #020617;
    --jq-graphite:   #111827;
    --jq-slate:      #475569;
    --jq-blue:       #2563EB;
    --jq-blue-dark:  #1d4ed8;
    --jq-light-blue: #EFF6FF;
    --jq-bg:         #F8FAFC;
    --jq-white:      #FFFFFF;
    --jq-border:     #E2E8F0;
}

/* ── Body ──────────────────────────────────────────────────────────────────── */
body.jq-public-body {
    background: var(--jq-bg);
    color: var(--jq-graphite);
}
body.jq-public-body footer { margin-top: 0; background: var(--jq-white); }

/* ── Public Navbar ─────────────────────────────────────────────────────────── */
.public-nav {
    background: var(--jq-navy);
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background .25s ease, box-shadow .25s ease;
}
.public-nav.is-scrolled {
    background: rgba(2,6,23,.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 24px rgba(0,0,0,.28);
}
@media (prefers-reduced-motion: reduce) {
    .public-nav { transition: none !important; }
}
.jq-nav-inner {
    display: flex;
    align-items: center;
    height: 58px;
}
.jq-brand {
    color: white !important;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.025em;
    text-decoration: none;
    flex-shrink: 0;
}
.jq-brand-qr { color: #60a5fa; }

/* Desktop center links */
.jq-nav-links {
    display: flex;
    align-items: center;
    gap: .25rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Desktop right actions */
.jq-nav-actions { margin-left: auto; }

/* Nav link — underline hover */
.jq-nav-link {
    color: rgba(255,255,255,.72) !important;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    padding: .375rem .625rem;
    border-radius: 6px;
    position: relative;
    transition: color .15s;
    white-space: nowrap;
}
.jq-nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: .625rem;
    right: .625rem;
    height: 1px;
    background: rgba(255,255,255,.45);
    transform: scaleX(0);
    transition: transform .2s ease;
    transform-origin: left;
}
.jq-nav-link:hover,
.jq-nav-link:focus-visible { color: #fff !important; }
.jq-nav-link:hover::after  { transform: scaleX(1); }
.jq-nav-link:focus-visible { outline: 2px solid rgba(255,255,255,.4); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .jq-nav-link { transition: none !important; }
    .jq-nav-link::after { transition: none !important; }
}

.jq-nav-dashboard {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* Nav register CTA button */
.jq-btn-nav-cta {
    background: rgba(255,255,255,.1);
    color: white !important;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 7px;
    padding: .3rem .85rem;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.jq-btn-nav-cta:hover, .jq-btn-nav-cta:focus-visible {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.4);
    color: white !important;
}
.jq-btn-nav-cta:focus-visible { outline: 2px solid rgba(255,255,255,.4); outline-offset: 2px; }

/* Language switcher */
.jq-lang-switcher {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    overflow: hidden;
}
.jq-lang-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,.5);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .25rem .45rem;
    cursor: pointer;
    transition: color .12s, background .12s;
    line-height: 1;
}
.jq-lang-btn:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.07); }
.jq-lang-btn.is-active { color: #fff; background: rgba(255,255,255,.12); }
.jq-lang-btn:focus-visible { outline: 2px solid rgba(255,255,255,.4); outline-offset: -2px; }

/* Mobile hamburger */
.jq-nav-toggler {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 7px;
    cursor: pointer;
    margin-left: .25rem;
    transition: border-color .15s, background .15s;
}
.jq-nav-toggler:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.jq-nav-toggler:focus-visible { outline: 2px solid rgba(255,255,255,.4); outline-offset: 2px; }
.jq-toggler-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,.8);
    border-radius: 2px;
}

/* Offcanvas */
.jq-offcanvas {
    width: 300px !important;
    background: var(--jq-navy);
}
.jq-offcanvas-header {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.jq-offcanvas-close {
    background: transparent;
    border: none;
    color: rgba(255,255,255,.5);
    font-size: 1.1rem;
    padding: .25rem;
    cursor: pointer;
    border-radius: 6px;
    line-height: 1;
    transition: color .12s;
}
.jq-offcanvas-close:hover  { color: #fff; }
.jq-offcanvas-close:focus-visible { outline: 2px solid rgba(255,255,255,.4); outline-offset: 2px; }
.jq-offcanvas-body { padding: 1.25rem; }
.jq-offcanvas-nav {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: 1.5rem;
}
.jq-offcanvas-link {
    color: rgba(255,255,255,.75);
    text-decoration: none;
    font-size: .9375rem;
    font-weight: 500;
    padding: .6rem .75rem;
    border-radius: 8px;
    display: block;
    transition: background .12s, color .12s;
}
.jq-offcanvas-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.jq-offcanvas-actions {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.06);
}
.jq-offcanvas-btn-outline {
    display: block;
    text-align: center;
    padding: .625rem;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px;
    color: rgba(255,255,255,.8);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: border-color .15s, background .15s;
}
.jq-offcanvas-btn-outline:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); color: white; }
.jq-offcanvas-btn-primary {
    display: block;
    text-align: center;
    padding: .625rem;
    background: var(--jq-blue);
    border: none;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    font-size: .875rem;
    font-weight: 600;
    transition: background .15s;
}
.jq-offcanvas-btn-primary:hover { background: var(--jq-blue-dark); color: white; }

/* ── Shared Section Utilities ──────────────────────────────────────────────── */
.jq-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--jq-blue);
    margin-bottom: .625rem;
}
.jq-section-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--jq-blue);
    margin-bottom: .5rem;
}
.jq-section-title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    color: var(--jq-navy);
    letter-spacing: -.02em;
    line-height: 1.25;
    margin-bottom: .625rem;
}
.jq-section-sub {
    font-size: .9375rem;
    color: var(--jq-slate);
    line-height: 1.65;
    max-width: 540px;
    margin-bottom: 0;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.jq-btn-primary {
    background: var(--jq-blue);
    color: white;
    border: none;
    border-radius: 9px;
    padding: .725rem 1.625rem;
    font-weight: 600;
    font-size: .9375rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: background .18s, box-shadow .18s, transform .18s;
    will-change: transform;
}
.jq-btn-primary:hover, .jq-btn-primary:focus-visible {
    background: var(--jq-blue-dark);
    color: white;
    box-shadow: 0 4px 18px rgba(37,99,235,.32);
    transform: translateY(-1px);
}
.jq-btn-primary:focus-visible { outline: 2px solid var(--jq-blue); outline-offset: 3px; }
.jq-btn-ghost {
    background: transparent;
    border: 1.5px solid var(--jq-border);
    color: var(--jq-graphite);
    border-radius: 9px;
    padding: .725rem 1.625rem;
    font-weight: 500;
    font-size: .9375rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: border-color .18s, background .18s, transform .18s;
    will-change: transform;
}
.jq-btn-ghost:hover, .jq-btn-ghost:focus-visible {
    border-color: #94a3b8;
    background: var(--jq-white);
    color: var(--jq-graphite);
    transform: translateY(-1px);
}
.jq-btn-ghost:focus-visible { outline: 2px solid var(--jq-slate); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .jq-btn-primary, .jq-btn-ghost { transition: background .15s, border-color .15s !important; transform: none !important; will-change: auto; }
    .jq-btn-primary:hover, .jq-btn-ghost:hover { transform: none; }
}

/* ── Hero Section ──────────────────────────────────────────────────────────── */
.jq-hero {
    background-position: 50% 50%;
  background-repeat: no-repeat;
    border-bottom: 1px solid var(--jq-border);
	background-size: cover;
}
.py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.jq-hero-title {
    font-size: clamp(1.85rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--jq-navy);
    line-height: 1.18;
    letter-spacing: -.03em;
    margin-bottom: 1rem;
}
.jq-hero-sub {
    font-size: 1.0625rem;
    color: var(--jq-slate);
    line-height: 1.68;
    max-width: 480px;
}
.jq-hero-svg {
    max-width: 300px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 32px rgba(2,6,23,.09));
}

/* ── Q&A Section ───────────────────────────────────────────────────────────── */
.jq-qa-section {
    padding: 5rem 0;
    background: var(--jq-white);
    border-bottom: 1px solid var(--jq-border);
}
.jq-accordion .accordion-item {
    border: 1.5px solid var(--jq-border) !important;
    border-radius: 10px !important;
    margin-bottom: .625rem;
    overflow: hidden;
}
.jq-accordion .accordion-button {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--jq-graphite);
    background: var(--jq-white);
    border-radius: 10px !important;
    padding: .9375rem 1.25rem;
    gap: .75rem;
    box-shadow: none !important;
    transition: background .15s, color .15s;
}
.jq-accordion .accordion-button:not(.collapsed) {
    color: var(--jq-navy);
    background: var(--jq-light-blue);
    border-radius: 10px 10px 0 0 !important;
}
.jq-accordion .accordion-button::after { margin-left: auto; flex-shrink: 0; }
.jq-accordion .accordion-body {
    padding: 1rem 1.25rem 1.375rem 1.25rem;
    padding-left: calc(1.25rem + 28px + .75rem); /* indent past icon */
    color: var(--jq-slate);
    font-size: .9375rem;
    line-height: 1.72;
    background: #fafcff;
}
.jq-qa-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: .875rem;
}
.jq-qa-tag {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--jq-blue);
    background: var(--jq-light-blue);
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    padding: .2rem .55rem;
}

/* ── Q&A Mini Icon & Animation ─────────────────────────────────────────────── */
.jq-qa-icon { flex-shrink: 0; }
.jq-icon-arrow { transform-origin: 21px 17px; }

.accordion-button:not(.collapsed) .jq-icon-arrow {
    animation: jq-jump .4s ease-out;
}
@keyframes jq-jump {
    0%   { transform: translate(0, 0) scale(1); }
    45%  { transform: translate(2px, -3px) scale(1.08); }
    100% { transform: translate(0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .jq-icon-arrow { animation: none !important; transition: none !important; }
    .jq-btn-primary, .jq-btn-ghost, .jq-btn-cta { transition: none !important; }
}

/* ── Trust / Target Group Section ──────────────────────────────────────────── */
.jq-trust-section {
    padding: 5rem 0;
    background: var(--jq-bg);
    border-bottom: 1px solid var(--jq-border);
}
.jq-trust-card {
    background: var(--jq-white);
    border: 1.5px solid var(--jq-border);
    border-radius: 10px;
    padding: 1.25rem .875rem;
    text-align: center;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--jq-graphite);
    line-height: 1.4;
    transition: border-color .15s, box-shadow .15s;
}
.jq-trust-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 2px 12px rgba(37,99,235,.09);
}
.jq-trust-icon {
    font-size: 1.625rem;
    margin-bottom: .5rem;
    display: block;
    line-height: 1;
}

/* ── Final CTA Section ─────────────────────────────────────────────────────── */
.jq-cta-section {
    padding: 5rem 0;
    background: var(--jq-navy);
}
.jq-eyebrow--light { color: #60a5fa; }
.jq-cta-title { color: white !important; }
.jq-cta-sub { color: #94a3b8 !important; }
.jq-btn-cta {
    background: var(--jq-blue);
    color: white;
    border: none;
    border-radius: 8px;
    padding: .875rem 2rem;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.875rem;
    transition: background .15s, transform .15s, box-shadow .15s;
}
.jq-btn-cta:hover, .jq-btn-cta:focus {
    background: var(--jq-blue-dark);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37,99,235,.4);
}

/* ── Public Footer ─────────────────────────────────────────────────────────── */
.jq-public-footer { background: var(--jq-white); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .jq-hero { text-align: center; }
    .jq-hero .jq-hero-sub { max-width: 100%; margin-left: auto; margin-right: auto; }
    .jq-hero .d-flex.gap-3 { justify-content: center; }
    .jq-hero-svg { max-width: 220px; margin-top: 1rem; }
}
@media (max-width: 767px) {
    .jq-qa-section, .jq-trust-section, .jq-cta-section { padding: 3.5rem 0; }
    .jq-accordion .accordion-body { padding-left: 1.25rem; }
}

/* ── DataTables ────────────────────────────────────────────────────────────── */
div.dt-layout-row { margin-bottom: .75rem; }
div.dt-search { display: flex; align-items: center; gap: .4rem; }
div.dt-search label { margin-bottom: 0; font-size: .82rem; color: #6b7280; white-space: nowrap; }
div.dt-search input.dt-input {
    font-size: .82rem;
    padding: .28rem .55rem;
    border: 1px solid #d1d5db;
    border-radius: .375rem;
    outline: none;
    max-width: 220px;
}
div.dt-search input.dt-input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(29,78,216,.15); }
table.dataTable thead th { white-space: nowrap; }
table.dataTable thead .dt-orderable-asc .dt-column-order::before,
table.dataTable thead .dt-orderable-desc .dt-column-order::after { opacity: .35; }

/* ════════════════════════════════════════════════════════════════════════════
   JumpQR — Public Marketing Page Etappe 30.1 (redesign)
   New open Q&A layout, illustration placeholders, features, targets, trust
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Nav additions (legacy placeholder — see full nav rules above) ──────────── */

/* ── Hero additions ─────────────────────────────────────────────────────────── */
.jq-hero-trust {
    font-size: .8125rem;
    color: var(--jq-slate);
    margin-top: .875rem;
    margin-bottom: 0;
    letter-spacing: .01em;
}
.jq-hero-bg-pattern {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(37,99,235,.06) 0%, transparent 60%),
        radial-gradient(circle at 80% 20%, rgba(37,99,235,.04) 0%, transparent 50%);
    border-radius: inherit;
}

/* ── Illustration Placeholder ───────────────────────────────────────────────── */
.jq-illustration {
    position: relative;
    border-radius: 16px;
    border: 1px solid var(--jq-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    gap: 1rem;
}
.illustration-layer-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.illustration-layer-phone {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 16px rgba(2,6,23,.09));
}
.illustration-layer-scanline {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}
.jq-illustration-caption {
    position: relative;
    z-index: 4;
    font-size: .72rem;
    color: #94a3b8;
    text-align: center;
    line-height: 1.4;
    max-width: 260px;
    margin: 0;
    font-style: italic;
}
/* Hero illustration wider */
.illustration-hero {

}

/* Scan line animation — subtle, respects prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
    .jq-scanline-line {
        animation: jq-scanline 2.4s ease-in-out infinite;
        transform-origin: left center;
    }
    @keyframes jq-scanline {
        0%   { opacity: 0; transform: translateY(-18px); }
        20%  { opacity: .55; }
        80%  { opacity: .55; }
        100% { opacity: 0; transform: translateY(18px); }
    }
}
@media (prefers-reduced-motion: reduce) {
    .jq-scanline-line { animation: none !important; }
}

/* ── Q&A Open Sections ──────────────────────────────────────────────────────── */
.jq-qa-wrapper { border-top: 1px solid var(--jq-border); }
.jq-qa-section {
    padding: 5rem 0;
    background: var(--jq-white);
    border-bottom: 1px solid var(--jq-border);
}
.jq-qa-section--alt {
    background: var(--jq-bg);
}
.jq-qa-question {
    font-size: clamp(1.3rem, 2.8vw, 1.9rem);
    font-weight: 700;
    color: var(--jq-navy);
    line-height: 1.28;
    letter-spacing: -.025em;
    margin-bottom: 1.25rem;
}
.jq-qa-answer {
    font-size: .9375rem;
    color: var(--jq-slate);
    line-height: 1.75;
    margin-bottom: .875rem;
}
.jq-qa-answer:last-child { margin-bottom: 0; }
.jq-qa-text { padding-top: .25rem; }

/* Mobile: always show text before illustration */
@media (max-width: 991px) {
    .jq-qa-section { padding: 3.5rem 0; }
    .jq-qa-visual { order: 1; }
    .jq-qa-text   { order: 0; }
    .jq-qa-question { font-size: 1.35rem; }
}

/* ── Section Header ─────────────────────────────────────────────────────────── */
.jq-section-header {
    max-width: 640px;
    margin-bottom: 3rem;
}
.jq-section-header.text-center { max-width: 580px; margin-left: auto; margin-right: auto; }

/* ── Features Block ─────────────────────────────────────────────────────────── */
.jq-features-section {
    padding: 5rem 0;
    background: var(--jq-white);
    border-bottom: 1px solid var(--jq-border);
}
.jq-features-header {
    max-width: 640px;
    margin-bottom: 3rem;
}

/* ── Target Groups Block ────────────────────────────────────────────────────── */
.jq-targets-section {
    padding: 5rem 0;
    background: var(--jq-bg);
    border-bottom: 1px solid var(--jq-border);
}
.jq-target-card {
    background: var(--jq-white);
    border: 1px solid var(--jq-border);
    border-radius: 12px;
    padding: 1.5rem 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    transition: border-color .15s, box-shadow .15s;
}
.jq-target-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 2px 16px rgba(37,99,235,.08);
}
.jq-target-icon {
    font-size: 1.4rem;
    color: var(--jq-blue);
}
.jq-target-title {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--jq-graphite);
}
.jq-target-desc {
    font-size: .8375rem;
    color: var(--jq-slate);
    line-height: 1.55;
}

/* ── Trust / DSGVO Block ────────────────────────────────────────────────────── */
.jq-dsgvo-section {
    padding: 5rem 0;
    background: var(--jq-white);
    border-bottom: 1px solid var(--jq-border);
}
.jq-trust-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .875rem;
}
.jq-trust-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: .9375rem;
    color: var(--jq-graphite);
    line-height: 1.55;
}
.jq-trust-check {
    font-size: 1.05rem;
    color: var(--jq-blue);
    flex-shrink: 0;
    margin-top: .125rem;
}

/* ── Premium CTA Block ──────────────────────────────────────────────────────── */
.jq-cta-premium {
    padding: 6rem 0;
    background: #080e1c;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.04);
}
.jq-cta-premium-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -.03em;
    line-height: 1.2;
    margin-bottom: 1rem;
}
.jq-cta-premium-sub {
    font-size: 1.0625rem;
    color: rgba(255,255,255,.6);
    line-height: 1.7;
    max-width: 480px;
    margin-bottom: 0;
}
.jq-cta-trust-list {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .625rem;
}
.jq-cta-trust-list li {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .9rem;
    color: rgba(255,255,255,.65);
    font-weight: 500;
}
.jq-cta-trust-list li i {
    color: #60a5fa;
    font-size: .9rem;
    flex-shrink: 0;
}
.jq-orb--cta-1 {
    width: 500px; height: 500px;
    background: var(--jq-blue);
    top: -150px; right: -100px;
    opacity: .05;
    filter: blur(80px);
}
.jq-orb--cta-2 {
    width: 300px; height: 300px;
    background: #60a5fa;
    bottom: -80px; left: -60px;
    opacity: .04;
    filter: blur(70px);
}

/* ── CTA Buttons ────────────────────────────────────────────────────────────── */
.jq-btn-cta {
    background: var(--jq-blue);
    color: white;
    border: none;
    border-radius: 9px;
    padding: .875rem 2rem;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: background .18s, transform .18s, box-shadow .18s;
    will-change: transform;
}
.jq-btn-cta:hover, .jq-btn-cta:focus-visible {
    background: var(--jq-blue-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37,99,235,.38);
}
.jq-btn-cta:focus-visible { outline: 2px solid var(--jq-blue); outline-offset: 3px; }
.jq-btn-cta-outline {
    background: transparent;
    color: rgba(255,255,255,.8);
    border: 1.5px solid rgba(255,255,255,.28);
    border-radius: 8px;
    padding: .875rem 2rem;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: border-color .18s, background .18s, transform .18s;
    will-change: transform;
	
    gap: .5rem;
    margin-top: 1.875rem;
}
.jq-btn-cta-outline:hover, .jq-btn-cta-outline:focus-visible {
    border-color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.07);
    color: white;
    transform: translateY(-2px);
}
.jq-btn-cta-outline:focus-visible { outline: 2px solid rgba(255,255,255,.5); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .jq-btn-cta, .jq-btn-cta-outline { transition: background .15s, border-color .15s !important; transform: none !important; will-change: auto; }
}
@media (max-width: 575px) {
    .jq-cta-premium { padding: 4rem 0; }
    .jq-cta-premium-title { font-size: 1.75rem; }
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.jq-public-footer {
    background: var(--jq-white);
    border-top: 1px solid var(--jq-border);
    padding: 2rem 0;
}
.jq-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.jq-footer-brand {
    display: flex;
    align-items: center;
    gap: .875rem;
    flex-wrap: wrap;
}
.jq-footer-logo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--jq-navy);
    letter-spacing: -.025em;
}
.jq-footer-tagline {
    font-size: .8125rem;
    color: #94a3b8;
}
.jq-footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem .875rem;
}
.jq-footer-link {
    font-size: .8125rem;
    color: #6b7280;
    text-decoration: none;
    transition: color .12s;
}
.jq-footer-link:hover { color: var(--jq-graphite); }

@media (max-width: 575px) {
    .jq-footer-inner { flex-direction: column; align-items: flex-start; }
    .jq-features-section, .jq-targets-section, .jq-dsgvo-section,
    .jq-contact-section { padding: 3.5rem 0; }
}

/* ============================================================
   DataTables Export Buttons (Etappe 34.2)
   ============================================================ */
.dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .5rem .75rem .25rem;
}
.dt-export-btn {
    font-size: .75rem !important;
    padding: .2rem .55rem !important;
    line-height: 1.4 !important;
    border-color: #dee2e6 !important;
    color: #495057 !important;
    background: #fff !important;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-radius: 5px !important;
}
.dt-export-btn:hover,
.dt-export-btn:focus {
    background: #f8f9fa !important;
    border-color: #adb5bd !important;
    color: #111827 !important;
    box-shadow: none !important;
}
.dt-export-btn.active { background: #f1f5f9 !important; }
.dt-btn-label { display: inline; }
div.dt-layout-row:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .25rem .75rem .25rem;
    border-bottom: 1px solid #f1f3f5;
}
div.dt-search {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem 0;
}
div.dt-search input {
    font-size: .8125rem;
    padding: .25rem .5rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    line-height: 1.4;
}
@media (max-width: 575px) {
    .dt-btn-label { display: none; }
    .dt-export-btn { padding: .2rem .4rem !important; }
}

/* ============================================================
   Wizard — Goal-based QR Creation (Etappe 40)
   ============================================================ */

/* ── Overview cards ──────────────────────────────────────────── */
.wizard-overview-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    transition: box-shadow .15s, border-color .15s;
}
.wizard-overview-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    border-color: #d1d5db;
}
.wizard-overview-card--active {
    border-color: #1B5E20;
    box-shadow: 0 0 0 1px #1B5E20;
}
.wizard-overview-card--active:hover {
    box-shadow: 0 4px 16px rgba(27,94,32,.15), 0 0 0 1px #1B5E20;
}
.wizard-overview-card--soon {
    opacity: .72;
    pointer-events: none;
}
.wizard-overview-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.wizard-overview-body { flex: 1; }

/* ── Step blocks ─────────────────────────────────────────────── */
.wizard-step {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem 1.25rem 1.25rem 1.25rem;
    margin-bottom: 1rem;
}
.wizard-step--done {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

/* ── Step badge ──────────────────────────────────────────────── */
.wizard-step-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--jq-graphite, #111827);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.wizard-step-badge--done {
    background: #16a34a;
}
.wizard-step-badge--sm {
    width: 26px;
    height: 26px;
    font-size: .72rem;
}

/* ── QR preview in result ────────────────────────────────────── */
.wizard-qr-preview {
    max-width: 240px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

/* ── Result action buttons ───────────────────────────────────── */
.wizard-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.25rem;
}
.wizard-result-actions .btn {
    padding: .55rem 1.1rem;
}

/* ── Voting ──────────────────────────────────────────────────── */
.voting-option-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
}
.voting-option-badge--a { background: #dcfce7; color: #166534; }
.voting-option-badge--b { background: #fee2e2; color: #991b1b; }
.voting-option-badge--c { background: #dbeafe; color: #1d4ed8; }
.voting-option-badge--d { background: #fef3c7; color: #b45309; }
.voting-option-badge--e { background: #ede9fe; color: #7c3aed; }
.voting-option-badge--f { background: #ccfbf1; color: #0f766e; }
.voting-option-badge--g { background: #ffe4e6; color: #be123c; }
.voting-option-badge--h { background: #e0f2fe; color: #0369a1; }
.voting-option-badge--i { background: #ecfccb; color: #4d7c0f; }
.voting-option-badge--j { background: #fef9c3; color: #78350f; }

.voting-option-card {
    border-width: 2px;
}

.voting-badge-a {
    background: #166534;
    color: #fff;
    font-size: .88rem;
}
.voting-badge-b {
    background: #991b1b;
    color: #fff;
    font-size: .88rem;
}

.voting-qr-preview-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    border: 2px dashed;
}
.voting-qr-preview-placeholder--a { border-color: #86efac; background: #f0fdf4; }
.voting-qr-preview-placeholder--b { border-color: #fca5a5; background: #fef2f2; }

/* ── Multi-Variant / A/B Variants ────────────────────────────── */
.variant-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #1d4ed8;
    border-radius: 8px;
    padding: 1rem;
}
.variant-card--inactive {
    opacity: .7;
    border-style: dashed;
    border-left-style: dashed;
}
.variant-weight-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 22px;
    padding: 0 6px;
    background: #1d4ed8;
    color: #fff;
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 700;
}
.variant-dist-label {
    font-size: .78rem;
    font-weight: 600;
    color: #1d4ed8;
}

/* Variant color palette A–J (letter badges in wizard) */
.variant-badge { display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:4px;font-size:.7rem;font-weight:700;flex-shrink:0; }
.variant-badge--a,.variant-color-a { background:#e8f5e9;color:#166534; }
.variant-badge--b,.variant-color-b { background:#fef2f2;color:#991b1b; }
.variant-badge--c,.variant-color-c { background:#dbeafe;color:#1d4ed8; }
.variant-badge--d,.variant-color-d { background:#fff3e0;color:#c2410c; }
.variant-badge--e,.variant-color-e { background:#ede9fe;color:#7c3aed; }
.variant-badge--f,.variant-color-f { background:#ccfbf1;color:#0f766e; }
.variant-badge--g,.variant-color-g { background:#f3f4f6;color:#374151; }
.variant-badge--h,.variant-color-h { background:#fce7f3;color:#db2777; }
.variant-badge--i,.variant-color-i { background:#fef3c7;color:#b45309; }
.variant-badge--j,.variant-color-j { background:#e0e7ff;color:#1e3a5f; }

/* Variant row in wizard form */
.mv-variant-row {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: .75rem 1rem;
    position: relative;
}

/* Multi-variant result cards */
.mv-result-card {
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
}
.mv-result-card-header {
    padding: .6rem 1rem;
    font-weight: 600;
    font-size: .88rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.mv-result-card-body {
    padding: .75rem 1rem;
}
.jq-phone-scanner-svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.jq-phone-scanner-svg .jq-phone-scanline,
.jq-phone-scanner-svg .jq-phone-scanline-glow {
    animation: jqPhoneScanMove 2.2s ease-in-out infinite;
}

@keyframes jqPhoneScanMove {
    0% {
        transform: translateY(-28px);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        transform: translateY(28px);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jq-phone-scanner-svg .jq-phone-scanline,
    .jq-phone-scanner-svg .jq-phone-scanline-glow {
        animation: none;
        transform: none;
        opacity: 1;
    }
}

/* ============================================================
   JumpQR — Etappe 30.2: Highlight Strip + Cookie Banner
   ============================================================ */

/* ── Highlight Strip (zwischen Hero und Q&A) ──────────────── */
.jq-highlights-section {
    padding: 3.5rem 0;
    background: var(--jq-white);
    border-bottom: 1px solid var(--jq-border);
}
.jq-highlights-headline {
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    font-weight: 700;
    color: var(--jq-navy);
    letter-spacing: -.02em;
    line-height: 1.3;
    margin-bottom: 2.25rem;
    text-align: center;
}
.jq-highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 2.5rem;
}
.jq-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.jq-highlight-icon {
    font-size: 1.05rem;
    color: var(--jq-blue);
    flex-shrink: 0;
    margin-top: .175rem;
    width: 1.1rem;
    text-align: center;
}
.jq-highlight-title {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--jq-graphite);
    margin-bottom: .15rem;
}
.jq-highlight-desc {
    display: block;
    font-size: .8125rem;
    color: var(--jq-slate);
    line-height: 1.55;
}
@media (max-width: 991px) {
    .jq-highlights-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2rem; }
}
@media (max-width: 575px) {
    .jq-highlights-section { padding: 2.5rem 0; }
    .jq-highlights-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ── Cookie / Privacy Banner ──────────────────────────────── */
.jq-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--jq-navy);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: .875rem 0;
}
.jq-cookie-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.jq-cookie-text {
    color: rgba(255,255,255,.78);
    font-size: .8125rem;
    line-height: 1.6;
    margin: 0;
    flex: 1;
    min-width: 220px;
}
.jq-cookie-actions {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.jq-cookie-link {
    color: rgba(255,255,255,.55);
    font-size: .8125rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    transition: color .15s;
}
.jq-cookie-link:hover { color: rgba(255,255,255,.85); }
/* Primary consent button */
.jq-cookie-btn {
    background: var(--jq-blue);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: .375rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    line-height: 1.5;
}
.jq-cookie-btn:hover { background: var(--jq-blue-dark); }
/* Outline variant (Reject / Settings buttons) */
.jq-cookie-btn--outline {
    background: transparent;
    border-color: rgba(255,255,255,.35);
    color: rgba(255,255,255,.75);
    font-weight: 500;
}
.jq-cookie-btn--outline:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.6);
    color: #fff;
}
.jq-cookie-btn:focus-visible,
.jq-cookie-btn--outline:focus-visible {
    outline: 2px solid rgba(255,255,255,.45);
    outline-offset: 2px;
}
/* Footer "Cookie-Einstellungen" button — exactly matches .jq-footer-link */
.jq-footer-link-btn {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    /* inherits .jq-footer-link color/hover from the shared rule */
}
@media (max-width: 575px) {
    .jq-cookie-inner    { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .jq-cookie-actions  { width: 100%; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
    .jq-cookie-btn, .jq-cookie-link { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   JumpQR — Etappe 49: Homepage Motion & SEO
   GPU-friendly: transform + opacity only. prefers-reduced-motion respected.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Scroll Progress Bar ───────────────────────────────────────────────────── */
.jq-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--jq-blue);
    z-index: 9990;
    transition: width .1s linear;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .jq-scroll-progress { display: none; }
}

/* ── Sticky Nav Scrolled State ─────────────────────────────────────────────── */
.public-nav.is-scrolled {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(2,6,23,.92) !important;
    box-shadow: 0 1px 20px rgba(0,0,0,.25);
    transition: background .2s, box-shadow .2s;
}
@media (prefers-reduced-motion: reduce) {
    .public-nav.is-scrolled { transition: none !important; }
}

/* ── Motion / Reveal System ────────────────────────────────────────────────── */
/*
   Elements with .jq-reveal are hidden when .jq-motion-ready is on <body>.
   JS adds .jq-motion-ready and then uses IntersectionObserver to add .is-visible.
   Without JS, all content remains visible (no .jq-motion-ready = no hiding).
*/
@media (prefers-reduced-motion: no-preference) {
    .jq-motion-ready .jq-reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
        will-change: opacity, transform;
    }
    .jq-motion-ready .jq-reveal--left:not(.is-visible) {
        transform: translateX(-24px);
    }
    .jq-motion-ready .jq-reveal--right:not(.is-visible) {
        transform: translateX(24px);
    }
    .jq-motion-ready .jq-reveal--scale:not(.is-visible) {
        transform: scale(.95);
        opacity: 0;
    }
    .jq-motion-ready .jq-reveal.jq-delay-1 { transition-delay: .1s; }
    .jq-motion-ready .jq-reveal.jq-delay-2 { transition-delay: .2s; }
    .jq-motion-ready .jq-reveal.jq-delay-3 { transition-delay: .3s; }
    .jq-motion-ready .jq-reveal.jq-delay-4 { transition-delay: .4s; }
    .jq-motion-ready .jq-reveal.jq-delay-5 { transition-delay: .5s; }
}
.jq-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* ── Floating Hero Orbs ────────────────────────────────────────────────────── */
.jq-hero { position: relative; overflow: hidden; }
.jq-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .07;
    pointer-events: none;
    will-change: transform;
}
.jq-orb--1 {
    width: 400px; height: 400px;
    background: var(--jq-blue);
    top: -80px; left: -100px;
}
.jq-orb--2 {
    width: 280px; height: 280px;
    background: #60a5fa;
    bottom: -40px; right: -60px;
}
@media (prefers-reduced-motion: no-preference) {
    .jq-orb--1 { animation: jq-float 10s ease-in-out infinite; }
    .jq-orb--2 { animation: jq-float 14s ease-in-out infinite reverse; }
    @keyframes jq-float {
        0%, 100% { transform: translateY(0) translateX(0); }
        33%       { transform: translateY(-18px) translateX(8px); }
        66%       { transform: translateY(10px) translateX(-6px); }
    }
}
@media (prefers-reduced-motion: reduce) {
    .jq-orb { animation: none !important; }
}

/* ── Stats Counter Section ─────────────────────────────────────────────────── */
.jq-stats-section {
    padding: 4rem 0;
    background: var(--jq-navy);
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.jq-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: center;
}
.jq-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
}
.jq-stat-value {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -.04em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.jq-stat-unit {
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-weight: 700;
    color: #60a5fa;
    letter-spacing: -.02em;
}
.jq-stat-label {
    font-size: .8125rem;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}
.jq-stats-headline {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 600;
    color: rgba(255,255,255,.65);
    text-align: center;
    margin-bottom: 2.5rem;
    letter-spacing: .01em;
}
@media (max-width: 575px) {
    .jq-stats-section { padding: 3rem 0; }
    .jq-stats-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── Bento Features Grid ───────────────────────────────────────────────────── */
.jq-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: stretch;
}
.jq-bento-card {
    background: var(--jq-white);
    border: 1px solid var(--jq-border);
    border-radius: 14px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    height: 100%;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    will-change: transform;
}
.jq-bento-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 4px 22px rgba(37,99,235,.09);
    transform: translateY(-3px);
}
.jq-bento-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--jq-light-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--jq-blue);
    flex-shrink: 0;
    margin-bottom: .375rem;
}
.jq-bento-title {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--jq-graphite);
    line-height: 1.3;
    margin-bottom: .1rem;
}
.jq-bento-desc {
    font-size: .8375rem;
    color: var(--jq-slate);
    line-height: 1.62;
    flex: 1;
}
@media (max-width: 991px) {
    .jq-bento-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .jq-bento-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .jq-bento-card { transition: border-color .15s, box-shadow .15s !important; transform: none !important; will-change: auto; }
    .jq-bento-card:hover { transform: none; }
}

/* ── Enhanced Target Card Hover (micro-interaction) ────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .jq-target-card {
        transition: border-color .2s, box-shadow .2s, transform .2s;
        will-change: transform;
    }
    .jq-target-card:hover {
        transform: translateY(-3px);
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   JumpQR — Etappe 49.1: Homepage Visual Polish & Navigation Refinement
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Hero eyebrow ───────────────────────────────────────────────────────────── */
.jq-hero-title {
    /* Increase spacing from eyebrow */
    margin-top: .25rem;
}

/* ── Section header / title rhythm ─────────────────────────────────────────── */
.jq-section-title { margin-bottom: .75rem; }
.jq-section-sub   { margin-bottom: 0; }

/* ── Footer — unified link styling (button = link) ──────────────────────────── */
.jq-footer-link,
.jq-footer-link-btn {
    font-size: .8125rem;
    color: #6b7280;
    text-decoration: none;
    transition: color .12s;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
}
.jq-footer-link:hover,
.jq-footer-link-btn:hover { color: var(--jq-graphite); }
.jq-footer-link:focus-visible,
.jq-footer-link-btn:focus-visible {
    outline: 2px solid var(--jq-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Footer enhanced ────────────────────────────────────────────────────────── */
.jq-public-footer {
    background: var(--jq-white);
    border-top: 1px solid var(--jq-border);
    padding: 2.25rem 0;
}
.jq-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.jq-footer-brand { gap: 1rem; }
.jq-footer-logo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--jq-navy);
    letter-spacing: -.025em;
}
.jq-footer-tagline { font-size: .8125rem; color: #94a3b8; }
.jq-footer-links { gap: .375rem 1rem; }

/* ── Consistent section padding ─────────────────────────────────────────────── */
.jq-highlights-section { padding: 3.5rem 0; }
.jq-qa-section          { padding: 4.5rem 0; }
.jq-features-section    { padding: 5rem 0; }
.jq-targets-section     { padding: 5rem 0; }
.jq-dsgvo-section       { padding: 5rem 0; }

@media (max-width: 767px) {
    .jq-qa-section, .jq-features-section,
    .jq-targets-section, .jq-dsgvo-section { padding: 3.5rem 0; }
    .jq-highlights-section { padding: 2.75rem 0; }
}
@media (max-width: 575px) {
    .jq-footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Error Pages (Etappe 50)
   ============================================================ */
.jq-error-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 0;
    background: var(--jq-dark, #0d1117);
}
.jq-error-inner {
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}
.jq-error-code {
    font-size: clamp(5rem, 18vw, 8rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--jq-blue, #3b82f6), #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.jq-error-title {
    font-size: clamp(1.4rem, 4vw, 1.875rem);
    font-weight: 700;
    color: var(--jq-white, #fff);
    margin-top: 1.25rem;
}
.jq-error-text {
    margin-top: .75rem;
    color: rgba(255,255,255,.55);
    font-size: .975rem;
    line-height: 1.6;
}