/* ============================================

   QROVA Landing — Dark Tech Theme

   ============================================ */




/* === Kill browser/theme pink — force gold everywhere === */
.dqm-landing, .dqm-landing * {
    accent-color: #17a05b !important;
    -webkit-tap-highlight-color: transparent !important;
    outline-color: #17a05b !important;
}
.dqm-landing *:focus {
    outline-color: #17a05b !important;
}
.dqm-landing *:focus-visible {
    outline: 2px solid rgba(201,169,98,0.5) !important;
    outline-offset: 2px;
}
.dqm-landing *::selection {
    background: #17a05b !important;
    color: #111 !important;
}
.dqm-landing *::-moz-selection {
    background: #17a05b !important;
    color: #111 !important;
}
.dqm-landing button:active,
.dqm-landing a:active,
.dqm-landing [role="button"]:active {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}
.dqm-burger:focus, .dqm-burger:active,
.dqm-burger span {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
.dqm-burger.active span {
    background: #fff !important;
}

/* --- Reset & Base --- */

.dqm-landing {

    -webkit-overflow-scrolling: touch;

    --brand: #17a05b;

    --brand-glow: rgba(201,169,98,0.2);

    --bg-dark: #ffffff;

    --bg-card: rgba(255,255,255,0.97);

    --glass-border: rgba(14,32,51,0.11);

    --text-primary: #0e2033;

    --text-secondary: #5c6f82;

    --text-muted: #5c6f82;

    --radius: 16px;

    --radius-sm: 12px;

    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    color: var(--text-primary);

    line-height: 1.6;

    overflow-x: hidden;

    position: relative;

}



.dqm-landing *, .dqm-landing *::before, .dqm-landing *::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

    -webkit-tap-highlight-color: transparent !important;

    -webkit-touch-callout: none;

}

.dqm-landing a,

.dqm-landing button,

.dqm-landing input,

.dqm-landing [role="button"] {

    outline: none;

}



/* ============================================

   TOP BAR

   ============================================ */

.dqm-topbar {

    position: fixed;

    top: 34px;

    left: 0;

    right: 0;

    z-index: 10000;

    display: flex;

    align-items: center;

    padding: 0 32px;

    height: 80px;

    background: rgba(255,255,255,0);

    border-bottom: 1px solid rgba(14,32,51,0.09);

    transition: background 0.3s;

}

.dqm-topbar.scrolled {

    background: rgba(255,255,255,0);

}

.dqm-topbar-logo {

    display: flex;

    align-items: center;

    text-decoration: none;

    margin-right: auto;

}

.dqm-topbar-logo img {

    height: 72px;

    width: auto;

}

.dqm-topbar-links {

    display: flex;

    gap: 24px;

    margin-right: 32px;

}

/* --- Language Dropdown --- */

.dqm-lang-drop {

    position: relative;

    margin-right: 16px;

    z-index: 10001;

}

.dqm-lang-current {

    display: flex;

    align-items: center;

    gap: 6px;

    background: rgba(14,32,51,0.09);

    border: 1px solid rgba(14,32,51,0.13);

    border-radius: 10px;

    padding: 6px 10px;

    cursor: pointer;

    transition: all 0.2s;

    color: var(--text-secondary);

    font-size: 0.8rem;

    font-weight: 500;

}

.dqm-lang-current:hover {

    background: rgba(14,32,51,0.15);

    border-color: rgba(14,32,51,0.18);

    color: #fff;

}

.dqm-lang-current,

.dqm-lang-option {

    -webkit-tap-highlight-color: transparent;

    -webkit-touch-callout: none;

    outline: none;

}

.dqm-lang-current:focus,

.dqm-lang-current:active,

.dqm-lang-option:focus,

.dqm-lang-option:active {

    outline: none;

    -webkit-tap-highlight-color: transparent;

    background-color: inherit;

}

.dqm-lang-flag {

    display: flex;

    align-items: center;

}

.dqm-lang-flag svg,

.dqm-lang-option svg {

    border-radius: 2px;

    flex-shrink: 0;

}

.dqm-lang-code {

    font-weight: 600;

    letter-spacing: 0.5px;

}

.dqm-lang-chevron {

    transition: transform 0.25s;

    opacity: 0.6;

    pointer-events: none;

}

.dqm-lang-drop.open .dqm-lang-chevron {

    transform: rotate(180deg);

}

.dqm-lang-list {

    position: absolute;

    top: calc(100% + 6px);

    left: 50%;

    transform: translateX(-50%) scale(0.95);

    min-width: 160px;

    background: rgba(255,255,255,0.99);

    border: 1px solid rgba(14,32,51,0.13);

    border-radius: 12px;

    padding: 6px;

    opacity: 0;

    visibility: hidden;

    transition: all 0.2s ease;

    backdrop-filter: blur(20px);

    box-shadow: 0 12px 32px rgba(14,32,51,0.16);

}

.dqm-lang-drop.open .dqm-lang-list {

    opacity: 1;

    visibility: visible;

    transform: translateX(-50%) scale(1);

}

.dqm-lang-option {

    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    padding: 8px 12px;

    border: none;

    border-radius: 8px;

    background: transparent;

    color: var(--text-secondary);

    font-size: 0.85rem;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.15s;

    text-align: left;

}

.dqm-lang-option:hover {

    background: rgba(14,32,51,0.11);

    color: #fff;

}

.dqm-lang-option.active {

    background: rgba(201,169,98,0.15) !important;

    color: var(--brand) !important;

    font-weight: 600;

}

/* Mobile dropdown in menu */

.dqm-lang-drop-mobile {

    margin: 12px auto;

    margin-right: auto;

    margin-left: auto;

    width: fit-content;

}

.dqm-lang-drop-mobile .dqm-lang-list {

    left: 0;

    transform: translateX(0) scale(0.95);

}

.dqm-lang-drop-mobile.open .dqm-lang-list {

    transform: translateX(0) scale(1);

}

@media (max-width: 992px) {

    .dqm-topbar > .dqm-lang-drop:not(.dqm-lang-drop-mobile) {

        margin-right: 10px;

    }

}

.dqm-topbar-link {

    color: var(--text-secondary);

    text-decoration: none;

    font-size: 0.88rem;

    font-weight: 500;

    transition: color 0.2s;

}

.dqm-topbar-link:hover { color: #fff; }

.dqm-topbar-actions {

    display: flex;

    align-items: center;

    gap: 12px;

}

.dqm-topbar-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    border-radius: 10px;

    background: rgba(14,32,51,0.09);

    border: 1px solid rgba(14,32,51,0.11);

    color: var(--text-secondary);

    text-decoration: none;

    cursor: pointer;

    transition: all 0.2s;

}

.dqm-topbar-icon:hover {

    background: rgba(201,169,98,0.15);

    border-color: rgba(201,169,98,0.3);

}

.dqm-topbar-icon:focus,

.dqm-topbar-icon:active {

    outline: none;

    background: rgba(201,169,98,0.15);

    -webkit-tap-highlight-color: transparent;

    color: var(--brand);

}

.dqm-topbar-btn {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 8px 18px;

    border-radius: 999px;

    background: linear-gradient(135deg, var(--brand), #21b86c);

    color: #fff;

    text-decoration: none;

    font-size: 0.85rem;

    font-weight: 600;

    transition: all 0.2s;

}

.dqm-topbar-btn:hover {

    transform: translateY(-1px);

    box-shadow: 0 4px 20px rgba(201,169,98,0.3);

    color: #fff;

    text-decoration: none;

}



/* ============================================

   BURGER MENU (MOBILE)

   ============================================ */

.dqm-burger {

    display: none;

    flex-direction: column;

    gap: 5px;

    background: none;

    border: none;

    cursor: pointer;

    padding: 8px;

    z-index: 1003;

    position: relative;

    -webkit-tap-highlight-color: transparent;

}

.dqm-burger span {

    display: block;

    width: 24px;

    height: 2px;

    background: #fff;

    border-radius: 2px;

    transition: all 0.3s ease;

    transform-origin: center;

}

.dqm-burger.active span:nth-child(1) {

    transform: rotate(45deg) translate(5px, 5px);

}

.dqm-burger.active span:nth-child(2) {

    opacity: 0;

    transform: scaleX(0);

}

.dqm-burger.active span:nth-child(3) {

    transform: rotate(-45deg) translate(5px, -5px);

}

/* Force kill pink background on burger all states */
.dqm-burger,
.dqm-burger:hover,
.dqm-burger:focus,
.dqm-burger:active,
.dqm-burger:focus-visible,
.dqm-burger.active {
    background: transparent !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-appearance: none !important;
    border: none !important;
}




/* Mobile Menu Overlay */

.dqm-mobile-menu {

    position: fixed;

    top: 0;

    right: -100%;

    width: 80%;

    max-width: 320px;

    height: 100vh;

    background: rgba(255,255,255,0);

    border-left: 1px solid rgba(0, 229, 255, 0.1);

    z-index: 1001;

    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    overflow-y: auto;

}

.dqm-mobile-menu.open {

    right: 0;

}

.dqm-mobile-menu-inner {

    padding: 100px 24px 40px;

    display: flex;

    flex-direction: column;

    gap: 6px;

}

.dqm-mobile-link {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px 16px;

    border-radius: 12px;

    color: var(--text-primary);

    text-decoration: none;

    font-size: 0.95rem;

    font-weight: 500;

    transition: background 0.2s;

    background: none;

    border: none;

    cursor: pointer;

    width: 100%;

    text-align: left;

    -webkit-tap-highlight-color: transparent;

    position: relative;

}

.dqm-mobile-link:hover,

.dqm-mobile-link:active {

    background: rgba(0, 229, 255, 0.08);

}

.dqm-mobile-link small {

    position: static;

    display: block;

    font-size: 0.65rem;

    margin-left: auto;

    color: var(--text-muted);

    font-weight: 400;

}

.dqm-mobile-link-cta {

    background: rgba(201,169,98,.12) !important;

    border: 1px solid rgba(201,169,98,.25);

    margin-top: 8px;

}

.dqm-mobile-link-cta span {

    color: var(--brand);

    font-weight: 600;

}

.dqm-mobile-divider {

    height: 1px;

    background: rgba(14,32,51,0.09);

    margin: 8px 0;

}



/* Mobile menu backdrop */

.dqm-menu-backdrop {

    position: fixed;

    inset: 0;

    background: rgba(14,32,51,0.16);

    z-index: 1000;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s;

}

.dqm-menu-backdrop.active {

    opacity: 1;

    pointer-events: auto;

}



/* Sticky AI chat button — base (hidden on desktop, shown on mobile via @media) */

.dqm-sticky-chat {

    display: none;

    position: fixed;

    bottom: 18px;

    right: 16px;

    cursor: pointer;

    z-index: 10001;

    -webkit-tap-highlight-color: transparent;

}

.dqm-sticky-chat:active {

    transform: scale(0.92);

}



@media (max-width: 992px) {

    .dqm-burger {

        display: flex;

    }

    .dqm-topbar-links,

    .dqm-topbar-actions {

        display: none !important;

    }

    .dqm-sticky-chat {

        display: flex;

    }

}



/* ============================================

   AI CHAT WIDGET

   ============================================ */

.dqm-chat-widget {

    position: fixed;

    bottom: 24px;

    right: 24px;

    width: 380px;

    height: 520px;

    background: #ffffff;

    border: 1px solid rgba(14,32,51,0.13);

    border-radius: 16px;

    box-shadow: 0 20px 60px rgba(14,32,51,0.16);

    display: none;

    flex-direction: column;

    z-index: 10000;

    overflow: hidden;

}

.dqm-chat-widget.open { display: flex; }

.dqm-chat-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 20px;

    background: linear-gradient(135deg, rgba(201,169,98,0.15), rgba(56,189,248,0.1));

    border-bottom: 1px solid rgba(14,32,51,0.09);

}

.dqm-chat-header-title {

    font-weight: 700;

    font-size: 0.95rem;

    color: #fff;

}

.dqm-chat-header-sub {

    font-size: 0.75rem;

    color: var(--text-muted);

}

.dqm-chat-close {

    background: none;

    border: none;

    color: var(--text-secondary);

    cursor: pointer;

    padding: 4px;

}

.dqm-chat-close:hover { color: #fff; }

.dqm-chat-messages {

    flex: 1;

    overflow-y: auto;

    padding: 16px;

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.dqm-chat-msg {

    max-width: 85%;

    padding: 10px 14px;

    border-radius: 12px;

    font-size: 0.88rem;

    line-height: 1.5;

}

.dqm-chat-msg.bot {

    background: rgba(14,32,51,0.09);

    color: var(--text-primary);

    align-self: flex-start;

    border-bottom-left-radius: 4px;

}

.dqm-chat-msg.user {

    background: linear-gradient(135deg, var(--brand), #21b86c);

    color: #fff;

    align-self: flex-end;

    border-bottom-right-radius: 4px;

}

.dqm-chat-input-wrap {

    display: flex;

    padding: 12px 16px;

    border-top: 1px solid rgba(14,32,51,0.09);

    gap: 8px;

}

.dqm-chat-input {

    flex: 1;

    padding: 10px 14px;

    background: rgba(14,32,51,0.09);

    border: 1px solid rgba(14,32,51,0.13);

    border-radius: 10px;

    color: #fff;

    font-size: 0.88rem;

    outline: none;

}

.dqm-chat-input:focus { border-color: var(--brand); }

.dqm-chat-send {

    width: 38px;

    height: 38px;

    border-radius: 10px;

    background: var(--brand);

    border: none;

    color: #fff;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: background 0.2s;

}

.dqm-chat-send:hover { background: #0096b7; }

.dqm-chat-typing {

    display: flex;

    gap: 4px;

    padding: 10px 14px;

    align-self: flex-start;

}

.dqm-chat-typing span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--text-muted);

    animation: dqm-typing 1.2s ease-in-out infinite;

}

.dqm-chat-typing span:nth-child(2) { animation-delay: 0.2s; }

.dqm-chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dqm-typing {

    0%,100% { opacity: 0.3; transform: translateY(0); }

    50% { opacity: 1; transform: translateY(-4px); }

}



@media (max-width: 640px) {

    .dqm-topbar { padding: 0 16px; }

    .dqm-topbar-links { display: none; }

    .dqm-topbar-btn span { display: none; }

    .dqm-topbar-btn { padding: 8px 12px; }

    .dqm-chat-widget { width: calc(100% - 16px); right: 8px; bottom: 8px; height: 70vh; }

}



/* --- Background (disabled fixed for performance) --- */

.dqm-bg-fixed {

    display: none;

}



/* --- Animations --- */

[data-animate] {

    opacity: 0;

    transform: translateY(40px);

    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

}

[data-animate="fade-right"] {

    transform: translateX(-60px);

}

[data-animate="fade-left"] {

    transform: translateX(60px);

}

[data-animate="fade-up"] {

    transform: translateY(40px);

}

[data-animate].dqm-visible {

    opacity: 1;

    transform: translate(0, 0);

}



/* --- Shimmer line on cards --- */

@keyframes dqm-shimmer {

    0% { transform: translateX(-100%); }

    100% { transform: translateX(200%); }

}



/* --- Gradient text pulse --- */

@keyframes dqm-gradient-shift {

    0%, 100% { background-position: 0% 50%; }

    50% { background-position: 100% 50%; }

}

.dqm-gradient-text {

    background-size: 200% 200%;

    animation: dqm-gradient-shift 4s ease-in-out infinite;

}



/* --- Glow Pulse --- */

.dqm-pulse {

    display: inline-block;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--brand);

    margin-right: 8px;

    animation: dqm-pulse-anim 2s ease-in-out infinite;

}

@keyframes dqm-pulse-anim {

    0%, 100% { box-shadow: 0 0 0 0 var(--brand-glow); }

    50% { box-shadow: 0 0 0 12px transparent; }

}



/* --- Section spacing --- */

.dqm-landing section {

    position: relative;

    z-index: 1;

    max-width: 100%;

    margin: 0;

    padding: 100px 24px;

    background: var(--bg-dark);

}

.dqm-landing section > h2,

.dqm-landing section > p.dqm-section-sub,

.dqm-landing section > .dqm-features-grid,

.dqm-landing section > .dqm-steps,

.dqm-landing section > .dqm-cases-grid,

.dqm-landing section > .dqm-pricing-grid,

.dqm-landing section > .dqm-hero-actions,

.dqm-landing section > a {

    max-width: 1200px;

    margin-left: auto;

    margin-right: auto;

}



.dqm-landing h2 {

    font-size: clamp(1.8rem, 4vw, 2.6rem);

    font-weight: 700;

    text-align: center;

    margin-bottom: 12px;

    letter-spacing: -0.02em;

}



.dqm-section-sub {

    text-align: center;

    color: var(--text-secondary);

    font-size: 1.1rem;

    margin-bottom: 56px;

}



/* ============================================

   HERO

   ============================================ */

.dqm-hero {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: left;

    min-height: 100vh;

    padding: 140px 24px 0 10% !important;

    margin: 0 !important;

    max-width: 100% !important;

    width: 100%;

    background-color: transparent !important;

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    overflow: visible;

}



.dqm-hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(

        to bottom,

        rgba(255,255,255,0) 0%,

        rgba(255,255,255,0) 40%,

        rgba(255,255,255,0) 70%,

        rgba(255,255,255,0) 100%

    );

    z-index: 1;

}



.dqm-hero::after {

    content: '';

    position: absolute;

    bottom: -60px;

    left: 0;

    right: 0;

    height: 160px;

    background: linear-gradient(to bottom, transparent 0%, transparent 100%);

    z-index: 10;

    pointer-events: none;

}



.dqm-hero-content {

    position: relative;

    z-index: 2;

    max-width: 620px;

    text-align: left;

}



.dqm-hero-badge {

    display: inline-flex;

    align-items: center;

    background: var(--bg-card);

    border: 1px solid var(--glass-border);

    border-radius: 999px;

    padding: 8px 20px;

    font-size: 0.85rem;

    color: var(--brand);

    font-weight: 500;

    margin-bottom: 24px;

    letter-spacing: 0.02em;

}



.dqm-hero h1 {

    font-size: clamp(2rem, 5vw, 3.2rem);

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -0.03em;

    margin-bottom: 20px;

}



.dqm-gradient-text {

    background: linear-gradient(135deg, var(--brand) 0%, #21b86c 50%, #0e8a4b 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: #17a05b;

    background-clip: text;

}



.dqm-hero-sub {

    font-size: 1.1rem;

    color: var(--text-secondary);

    line-height: 1.7;

    margin-bottom: 32px;

    max-width: 540px;

}



.dqm-hero-actions {

    display: flex;

    gap: 16px;

    flex-wrap: wrap;

    margin-bottom: 48px;

    justify-content: flex-start;

}





/* Hero info row */

.dqm-hero-info-row {

    display: flex;

    gap: 24px;

    margin-bottom: 32px;

    flex-wrap: wrap;

}

.dqm-hero-info-item {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 0.85rem;

    color: var(--text-secondary);

}



/* Hero Stats */

.dqm-hero-stats {

    display: flex;

    gap: 32px;

    justify-content: flex-start;

}

.dqm-hero-stat {

    display: flex;

    flex-direction: column;

}

.dqm-hero-stat strong {

    font-size: 1.4rem;

    color: var(--brand);

    font-weight: 700;

}

.dqm-hero-stat span {

    font-size: 0.8rem;

    color: var(--text-muted);

    text-transform: uppercase;

    letter-spacing: 0.08em;

    margin-top: 2px;

}



/* ============================================

   AI HOLOGRAM

   ============================================ */

.dqm-hero {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.dqm-hologram {

    position: fixed;

    right: 2%;

    bottom: 5%;

    width: 35%;

    max-height: 90vh;

    transition: width 0.6s ease, right 0.6s ease, bottom 0.6s ease;

    display: flex;

    flex-direction: column;

    align-items: center;

    z-index: 9999;

    opacity: 0;

    pointer-events: none;

}

.dqm-hologram.holo-visible {

    opacity: 1;

    pointer-events: auto;

    animation: holoAppear 2s ease-out forwards;

}

.dqm-hologram.holo-dismiss {

    animation: holoDismiss 1.5s ease-in forwards;

    pointer-events: none;

}

.dqm-hologram-img {

    width: 100%;

    max-width: 160px;

    height: auto;

    opacity: 0.8;

    filter: drop-shadow(0 0 30px rgba(201,169,98,.4)) drop-shadow(0 0 60px rgba(201,169,98,.25));

    animation: holoFloat 4s ease-in-out infinite;

    transition: opacity 0.6s ease, filter 0.6s ease;

}

.dqm-hologram-bubble {

    background: rgba(201,169,98,.12);

    border: 1px solid rgba(201,169,98,.3);

    border-radius: 16px;

    padding: 18px 24px;

    margin-top: -12%;

    position: relative;

    z-index: 20;

    text-align: center;

    opacity: 0;

    transform: translateY(10px);

    pointer-events: none;

}

.dqm-hologram-bubble.bubble-show {

    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;

    transition: opacity 0.6s ease, transform 0.6s ease;

}

.dqm-hologram-bubble p {

    color: #e0f7ff;

    font-size: 1rem;

    margin: 0 0 14px;

    font-weight: 500;

}

.dqm-hologram-btns {

    display: flex;

    gap: 10px;

    justify-content: center;

}

.dqm-hologram-btn {

    padding: 8px 20px;

    border-radius: 999px;

    font-size: 0.85rem;

    font-weight: 600;

    cursor: pointer;

    border: none;

    transition: all 0.3s;

}

.dqm-hologram-btn-start {
    background:transparent !important;
    color: #17a05b !important;
    font-weight: 700 !important;
    border: 2px solid #17a05b !important;
    text-shadow: none !important;
}

.dqm-hologram-btn-start:hover {

    background: #0096b7;

    box-shadow: 0 0 20px rgba(201,169,98,.4);

}

.dqm-hologram-btn-later {
    background: rgba(14,32,51,0.15) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border: 2px solid rgba(14,32,51,0.18) !important;
    backdrop-filter: blur(8px) !important;
}

.dqm-hologram-btn-later:hover {

    background: rgba(14,32,51,0.17);

    color: #fff;

}



/* Topbar chat notification badge */

.dqm-topbar-notif {

    position: relative;

}

.dqm-topbar-notif::after {

    content: '';

    position: absolute;

    top: -2px;

    right: -2px;

    width: 10px;

    height: 10px;

    background: #17a05b;

    border-radius: 50%;

    box-shadow: 0 0 8px rgba(201,169,98,.6);

    animation: notifPulse 2s ease-in-out infinite;

}

.dqm-topbar-tooltip {

    position: absolute;

    top: calc(100% + 10px);

    right: 0;

    background: rgba(255,255,255,0);

    border: 1px solid rgba(201,169,98,.3);

    border-radius: 10px;

    padding: 10px 16px;

    color: #e0f7ff;

    font-size: 0.82rem;

    white-space: nowrap;

    opacity: 0;

    transform: translateY(-5px);

    pointer-events: none;

    box-shadow: 0 4px 20px rgba(14,32,51,0.14);

}

.dqm-topbar-tooltip.tooltip-show {

    opacity: 1;

    transform: translateY(0);

    transition: opacity 0.5s ease, transform 0.5s ease;

}



@keyframes holoAppear {

    0% { opacity: 0; transform: scale(0.7); filter: blur(10px); }

    50% { opacity: 0.6; transform: scale(0.85); filter: blur(3px); }

    100% { opacity: 1; transform: scale(1); filter: blur(0); }

}

@keyframes holoDismiss {

    0% { opacity: 1; transform: scale(1); filter: blur(0); }

    100% { opacity: 0; transform: scale(0.8); filter: blur(8px); }

}

@keyframes holoFloat {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-12px); }

}

@keyframes notifPulse {

    0%, 100% { opacity: 1; transform: scale(1); }

    50% { opacity: 0.5; transform: scale(1.3); }

}



/* Hologram mini widget mode on scroll */

.dqm-hologram.holo-mini {
    opacity: 1 !important;
    pointer-events: auto !important;

    width: 120px;

    right: 20px;

    bottom: 90px;

    cursor: pointer;

}

.dqm-hologram.holo-mini .dqm-hologram-bubble {

    display: none;

}

.dqm-hologram.holo-mini .dqm-hologram-img {

    opacity: 0.7;

    filter: drop-shadow(0 0 15px rgba(201,169,98,.35));

}

.dqm-hologram.holo-mini:hover .dqm-hologram-img {

    opacity: 1;

    filter: drop-shadow(0 0 25px rgba(201,169,98,.5));

}



/* Scroll to Top */

.dqm-scroll-top {

    position: fixed;

    bottom: 24px;

    right: 24px;

    -webkit-tap-highlight-color: transparent;

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: rgba(255,255,255,0.92);

    border: 1px solid rgba(201,169,98,.3);

    color: var(--brand);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 9998;

    opacity: 0;

    transform: translateY(20px);

    pointer-events: none;

    transition: opacity 0.3s, transform 0.3s, background 0.3s;

}

.dqm-scroll-top.visible {

    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;

}

.dqm-scroll-top:hover {

    background: var(--brand);

    color: #fff;

    box-shadow: 0 0 20px rgba(201,169,98,.35);

}

.dqm-scroll-top:focus,

.dqm-scroll-top:active,

.dqm-scroll-top:focus-visible {

    background: rgba(255,255,255,0.92);

    color: var(--brand);

    outline: none;

    box-shadow: none;

}

@media (max-width: 992px) {

    .dqm-scroll-top {

        right: auto;

        left: 16px;

    }

}



@media (max-width: 992px) {

    .dqm-hologram {

        display: none;

    }

}



/* ============================================

   BUTTONS

   ============================================ */

.dqm-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 14px 28px;

    border-radius: 999px;

    font-size: 0.95rem;

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    border: none;

    position: relative;

    overflow: hidden;

}



.dqm-btn-primary {

    background: linear-gradient(135deg, var(--brand) 0%, #21b86c 100%);

    color: #fff;

    box-shadow: 0 4px 24px var(--brand-glow), 0 1px 3px rgba(14,32,51,0.07);

}

.dqm-btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 40px var(--brand-glow), 0 2px 6px rgba(14,32,51,0.1);

    color: #fff;

    text-decoration: none;

}



.dqm-btn-glass {

    background: var(--bg-card);

    color: var(--text-primary);

    border: 1px solid var(--glass-border);

}

.dqm-btn-glass:hover {

    background: rgba(255,255,255,0.82);

    border-color: var(--brand);

    color: var(--text-primary);

    text-decoration: none;

    transform: translateY(-2px);

}



.dqm-btn-full { width: 100%; justify-content: center; }



.dqm-btn-lg {

    padding: 18px 36px;

    font-size: 1.05rem;

}



/* ============================================

   FEATURE CARDS

   ============================================ */

.dqm-features-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

}



.dqm-feature-card {

    background: var(--bg-card);

    border: 1px solid var(--glass-border);

    border-radius: var(--radius);

    padding: 36px 28px;

    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    position: relative;

    overflow: hidden;

}

.dqm-feature-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 2px;

    background: linear-gradient(90deg, transparent, var(--brand), transparent);

    opacity: 0;

    transition: opacity 0.4s;

}

.dqm-feature-card:hover {

    transform: translateY(-6px);

    border-color: rgba(201,169,98,.2);

    box-shadow: 0 20px 60px rgba(14,32,51,0.1), 0 0 40px var(--brand-glow);

}

.dqm-feature-card:hover::before {

    opacity: 1;

}

.dqm-feature-card::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 40%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(14,32,51,0.05), transparent);

    transform: translateX(-100%);

}

.dqm-feature-card:hover::after {

    animation: dqm-shimmer 0.8s ease forwards;

}



.dqm-feature-icon {

    width: 56px;

    height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(201,169,98,.08);

    border: 1px solid rgba(201,169,98,.15);

    border-radius: var(--radius-sm);

    margin-bottom: 20px;

    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}

.dqm-feature-card:hover .dqm-feature-icon {

    transform: scale(1.1) rotate(-3deg);

    background: rgba(201,169,98,.15);

    box-shadow: 0 0 24px rgba(201,169,98,.2);

}



.dqm-feature-card h3 {

    font-size: 1.15rem;

    font-weight: 700;

    margin-bottom: 10px;

    color: var(--text-primary);

}

.dqm-feature-card p {

    font-size: 0.92rem;

    color: var(--text-secondary);

    line-height: 1.6;

}



/* ============================================

   HOW IT WORKS

   ============================================ */

.dqm-steps {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0;

    margin-top: 56px;

}



.dqm-step {

    text-align: center;

    flex: 0 0 240px;

    padding: 32px 24px;

    background: var(--bg-card);

    border: 1px solid var(--glass-border);

    border-radius: var(--radius);

    transition: all 0.3s;

}

.dqm-step:hover {

    border-color: rgba(201,169,98,.2);

    transform: translateY(-4px);

}



.dqm-step-num {

    font-size: 2.2rem;

    font-weight: 800;

    background: linear-gradient(135deg, var(--brand), #0e8a4b);

    background-size: 200% 200%;

    -webkit-background-clip: text;

    -webkit-text-fill-color: #17a05b;

    background-clip: text;

    margin-bottom: 16px;

    animation: dqm-gradient-shift 3s ease-in-out infinite;

}



.dqm-step h3 {

    font-size: 1.05rem;

    font-weight: 700;

    margin-bottom: 8px;

}

.dqm-step p {

    font-size: 0.88rem;

    color: var(--text-secondary);

}



.dqm-step-line {

    width: 60px;

    height: 2px;

    background: linear-gradient(90deg, var(--brand), transparent);

    flex-shrink: 0;

    position: relative;

    overflow: hidden;

}

.dqm-step-line::after {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 50%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(14,32,51,0.18), transparent);

    animation: dqm-line-flow 2s ease-in-out infinite;

}

@keyframes dqm-line-flow {

    0% { left: -50%; }

    100% { left: 150%; }

}



/* ============================================

   USE CASES

   ============================================ */

.dqm-cases-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin-top: 56px;

}



.dqm-case {

    background: var(--bg-card);

    border: 1px solid var(--glass-border);

    border-radius: var(--radius);

    padding: 28px 24px;

    text-align: center;

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}

.dqm-case:hover {

    transform: translateY(-4px);

    border-color: rgba(201,169,98,.15);

    box-shadow: 0 12px 40px rgba(14,32,51,0.07);

}



.dqm-case-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 64px;

    height: 64px;

    border-radius: 16px;

    background: rgba(201,169,98,.08);

    border: 1px solid rgba(201,169,98,.12);

    margin-bottom: 18px;

    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;

}

.dqm-case:hover .dqm-case-icon {

    background: rgba(201,169,98,.12);

    transform: scale(1.08);

    box-shadow: 0 0 24px rgba(201,169,98,.2);

}



.dqm-case h3 {

    font-size: 1rem;

    font-weight: 700;

    margin-bottom: 8px;

}

.dqm-case p {

    font-size: 0.85rem;

    color: var(--text-secondary);

    line-height: 1.5;

}



/* ============================================

   VIDEO EXPLAINER

   ============================================ */

.dqm-video-section {

    background: var(--bg-dark);

    position: relative;

    z-index: 1;

}

.dqm-video-inner {

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1.2fr;

    gap: 48px;

    align-items: center;

}

.dqm-video-badge {

    display: inline-block;

    padding: 6px 16px;

    border-radius: 999px;

    background: rgba(0, 229, 255, 0.1);

    border: 1px solid rgba(0, 229, 255, 0.25);

    color: #17a05b;

    font-size: 0.8rem;

    font-weight: 600;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    margin-bottom: 20px;

}

.dqm-video-text h2 {

    font-size: clamp(1.6rem, 3vw, 2.2rem);

    font-weight: 700;

    margin-bottom: 16px;

    line-height: 1.3;

}

.dqm-video-text p {

    color: var(--text-secondary);

    font-size: 1.05rem;

    line-height: 1.7;

    margin-bottom: 24px;

}

.dqm-video-list {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.dqm-video-list li {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--text-primary);

    font-size: 0.95rem;

}

.dqm-video-player {

    position: relative;

}

.dqm-video-glow {

    position: absolute;

    inset: -20px;

    background: radial-gradient(ellipse at center, rgba(201,169,98,.12) 0%, transparent 70%);

    border-radius: 24px;

    z-index: 0;

    pointer-events: none;

}

.dqm-video-player video {

    position: relative;

    z-index: 1;

    width: 100%;

    border-radius: 16px;

    border: 1px solid rgba(0, 229, 255, 0.15);

    box-shadow: 0 8px 40px rgba(14,32,51,0.14), 0 0 30px rgba(0, 229, 255, 0.08);

    background: #000;

}

.dqm-video-player video:hover {

    border-color: rgba(0, 229, 255, 0.3);

    box-shadow: 0 8px 40px rgba(14,32,51,0.14), 0 0 50px rgba(0, 229, 255, 0.15);

}



@media (max-width: 768px) {

    .dqm-video-inner {

        grid-template-columns: 1fr;

        gap: 32px;

    }

}



/* ============================================

   PRICING

   ============================================ */

.dqm-pricing-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

    margin-top: 56px;

    align-items: start;

}



.dqm-price-card {

    background: var(--bg-card);

    border: 1px solid var(--glass-border);

    border-radius: var(--radius);

    padding: 40px 32px;

    text-align: center;

    position: relative;

    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}

.dqm-price-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 20px 60px rgba(14,32,51,0.1);

}



.dqm-price-popular {

    border-color: var(--brand);

    box-shadow: 0 0 40px var(--brand-glow);

    transform: scale(1.04);

}

.dqm-price-popular:hover {

    transform: scale(1.04) translateY(-6px);

}



/* .dqm-price-badge — defined later with gold gradient (line ~5446) */



.dqm-price-name {

    font-size: 1.1rem;

    font-weight: 600;

    color: var(--text-secondary);

    margin-bottom: 16px;

    text-transform: uppercase;

    letter-spacing: 0.06em;

}



.dqm-price-amount {

    font-size: 3rem;

    font-weight: 800;

    margin-bottom: 28px;

    line-height: 1;

}

.dqm-price-currency {

    font-size: 1.4rem;

    vertical-align: super;

    margin-right: 4px;

    font-weight: 600;

    color: var(--text-secondary);

}

.dqm-price-period {

    font-size: 0.9rem;

    font-weight: 400;

    color: var(--text-muted);

    margin-left: 4px;

}



.dqm-price-features {

    list-style: none;

    text-align: left;

    margin-bottom: 32px;

}

.dqm-price-features li {

    padding: 8px 0;

    font-size: 0.92rem;

    color: var(--text-secondary);

    border-bottom: 1px solid rgba(14,32,51,0.06);

}

.dqm-price-features li:last-child {

    border-bottom: none;

}



/* ============================================

   CTA

   ============================================ */

.dqm-cta {

    text-align: center;

    position: relative;

}

.dqm-cta h2 {

    font-size: clamp(1.6rem, 3.5vw, 2.4rem);

    margin-bottom: 16px;

}

.dqm-cta p {

    color: var(--text-secondary);

    font-size: 1.1rem;

    margin-bottom: 32px;

}



.dqm-cta-glow {

    position: absolute;

    width: 400px;

    height: 400px;

    background: radial-gradient(circle, var(--brand-glow) 0%, transparent 70%);

    border-radius: 50%;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: -1;

    opacity: 0.4;

}



/* ============================================

   RESPONSIVE

   ============================================ */

@media (max-width: 992px) {

    .dqm-hero {

        min-height: 100vh;

        background-position: right center !important;

        background-size: cover !important;

        padding-top: 300px !important;

    }

    .dqm-hero-content {

        max-width: 100%;

    }

    .dqm-hero-sub {

        max-width: 100%;

        margin-left: auto;

        margin-right: auto;

    }

    .dqm-hero-actions {

        justify-content: center;

    }

    .dqm-hero-stats {

        justify-content: center;

    }

    .dqm-features-grid,

    .dqm-cases-grid,

    .dqm-pricing-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .dqm-steps {

        flex-direction: column;

        gap: 16px;

    }

    .dqm-step-line {

        width: 2px;

        height: 40px;

        background: linear-gradient(180deg, var(--brand), transparent);

    }

    .dqm-step {

        flex: none;

        width: 100%;

        max-width: 340px;

    }

}



@media (max-width: 640px) {

    .dqm-landing section {

        padding: 60px 16px;

    }

    .dqm-features-grid,

    .dqm-cases-grid,

    .dqm-pricing-grid {

        grid-template-columns: 1fr;

    }

    .dqm-hero h1 {

        font-size: 1.8rem;

    }

    .dqm-hero-stats {

        flex-direction: row;

        gap: 0;

        width: 100%;

        background: rgba(255,255,255,0);

        border: 1px solid rgba(201,169,98,.12);

        border-radius: 14px;

        padding: 14px 0;

        margin-top: 24px;

    }

    .dqm-hero-stat {

        flex: 1;

        align-items: center;

        text-align: center;

        border-right: 1px solid rgba(14,32,51,0.11);

    }

    .dqm-hero-stat:last-child {

        border-right: none;

    }

    .dqm-hero-stat strong {

        font-size: 1.1rem;

    }

    .dqm-hero-stat span {

        font-size: 0.65rem;

    }

    .dqm-price-popular {

        transform: none;

    }

    .dqm-price-popular:hover {

        transform: translateY(-6px);

    }

}



/* ============================================

   FOOTER

   ============================================ */

.dqm-footer {

    background: #060a16;

    border-top: 1px solid rgba(14,32,51,0.08);

    padding: 60px 24px 0;

    position: relative;

    z-index: 1;

}

.dqm-footer-inner {

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1fr;

    gap: 40px;

    padding-bottom: 40px;

}
/* footer-inner overridden below */

.dqm-footer-logo {

    margin-bottom: 16px;

}

.dqm-footer-logo img {

    height: 80px;

    width: auto;

}

.dqm-footer-col p {

    font-size: 0.85rem;

    color: var(--text-muted);

    line-height: 1.6;

}

.dqm-footer-col h4 {

    font-size: 0.8rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: var(--text-secondary);

    margin-bottom: 16px;

}

.dqm-footer-col a {

    display: block;

    font-size: 0.88rem;

    color: var(--text-muted);

    text-decoration: none;

    padding: 4px 0;

    transition: color 0.2s;

}

.dqm-footer-col a:hover {

    color: var(--brand);

}

.dqm-footer-hours {

    margin-top: 8px;

    font-size: 0.82rem;

    color: var(--text-muted);

}

.dqm-footer-payments {

    display: flex;

    gap: 8px;

    margin-top: 16px;

    flex-wrap: wrap;

}

.dqm-footer-payments svg {

    opacity: 0.6;

    transition: opacity 0.3s;

}

.dqm-footer-payments svg:hover {

    opacity: 1;

}

.dqm-footer-bottom {

    max-width: 1200px;

    margin: 0 auto;

    border-top: 1px solid rgba(14,32,51,0.08);

    padding: 20px 0;

    text-align: center;

    font-size: 0.8rem;

    color: var(--text-muted);

}



@media (max-width: 768px) {

    .dqm-footer-inner {

        grid-template-columns: 1fr 1fr;

        gap: 28px;

    }

}

@media (max-width: 480px) {

    .dqm-footer-inner {

        grid-template-columns: 1fr;

    }

    .dqm-hero {

        background-position: 80% center !important;

        background-size: cover !important;

        background-repeat: no-repeat !important;

        padding: 110px 16px 40px 16px !important;

    }

    .dqm-hero-overlay {

        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%) !important;

    }

    .dqm-hero h1 {

        font-size: 1.5rem;

    }

    .dqm-topbar-logo img {

        height: 50px;

    }

}



/* ============================================

   SCROLLBAR

   ============================================ */

.dqm-landing::-webkit-scrollbar {

    width: 6px;

}

.dqm-landing::-webkit-scrollbar-track {

    background: var(--bg-dark);

}

.dqm-landing::-webkit-scrollbar-thumb {

    background: var(--brand);

    border-radius: 3px;

}



/* ============================================

   SELECTION

   ============================================ */

.dqm-landing ::selection {

    background: var(--brand);

    color: #fff;

}



/* ============================================

   CABINET / AUTH — shared variables

   ============================================ */

:root {

    --dqm-primary: var(--brand, #17a05b);

    --dqm-primary-dark: #0096b7;

    --dqm-bg: #ffffff;

    --dqm-bg-card: #ffffff;

    --dqm-bg-card-hover: #eff3f6;

    --dqm-text: #0e2033;

    --dqm-text-secondary: #5c6f82;

    --dqm-border: rgba(148,163,184,0.15);

    --dqm-success: #10b981;

    --dqm-danger: #ef4444;

    --dqm-warning: #f59e0b;

    --dqm-radius: 12px;

}



.dqm-cabinet *, .dqm-auth-wrap * {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



/* ===== SHARED BUTTONS (cabinet/auth) ===== */

.dqm-cabinet .dqm-btn,

.dqm-auth-wrap .dqm-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 12px 28px;

    border-radius: 999px;

    font-weight: 600;

    font-size: 15px;

    text-decoration: none;

    transition: all 0.2s;

    border: 2px solid transparent;

    cursor: pointer;

    font-family: inherit;

}

.dqm-cabinet .dqm-btn-primary,

.dqm-auth-wrap .dqm-btn-primary {

    background:transparent;

    color: #fff;

    border-color: var(--dqm-primary);

}

.dqm-cabinet .dqm-btn-primary:hover,

.dqm-auth-wrap .dqm-btn-primary:hover {

    background: var(--dqm-primary-dark);

    transform: translateY(-1px);

    box-shadow: 0 8px 24px rgba(201,169,98,0.3);

    color: #fff;

}

.dqm-cabinet .dqm-btn-outline { background: transparent; color: var(--dqm-text); border-color: var(--dqm-border); }

.dqm-cabinet .dqm-btn-outline:hover { border-color: var(--dqm-primary); color: var(--dqm-primary); }

.dqm-cabinet .dqm-btn-sm { padding: 8px 16px; font-size: 13px; }

.dqm-cabinet .dqm-btn-full { width: 100%; justify-content: center; }



/* ===== AUTH / LOGIN ===== */

.dqm-auth-wrap {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px 20px;

    background: transparent;

    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    position: relative;

    overflow: hidden;

}

.dqm-auth-wrap * {

    -webkit-tap-highlight-color: transparent !important;

    box-sizing: border-box;

}

.dqm-auth-bg {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(ellipse 600px 400px at 20% 20%, rgba(201,169,98,0.08), transparent),

        radial-gradient(ellipse 500px 500px at 80% 80%, rgba(99,102,241,0.06), transparent);

    pointer-events: none;

}

.dqm-auth-card {

    position: relative;

    background: rgba(255,255,255,0.97);

    border: 1px solid rgba(14,32,51,0.11);

    border-radius: 20px;

    padding: 44px 40px;

    width: 440px;

    max-width: 100%;

    backdrop-filter: blur(20px);

    box-shadow: 0 24px 64px rgba(14,32,51,0.14);

}

.dqm-auth-logo-link {

    display: block;

    text-align: center;

    margin-bottom: 28px;

    text-decoration: none;

}

.dqm-auth-logo-img {

    height: 56px;

    width: auto;

}

.dqm-auth-error {

    display: flex;

    align-items: center;

    gap: 8px;

    background: rgba(239,68,68,0.1);

    border: 1px solid rgba(239,68,68,0.25);

    color: #fca5a5;

    padding: 12px 16px;

    border-radius: 10px;

    font-size: 13px;

    margin-bottom: 20px;

}

.dqm-auth-error svg { stroke: #f87171; flex-shrink: 0; }

.dqm-auth-tabs {

    display: flex;

    gap: 4px;

    margin-bottom: 28px;

    background: rgba(14,32,51,0.06);

    border-radius: 12px;

    padding: 4px;

}

.dqm-auth-tab {

    flex: 1;

    padding: 10px;

    border: none;

    background: none;

    color: #5c6f82;

    font-weight: 600;

    font-size: 14px;

    cursor: pointer;

    transition: all 0.25s;

    border-radius: 10px;

}

.dqm-auth-tab:hover { color: #e4eaef; }

.dqm-auth-tab.active {

    background: #fff;

    color: #ffffff;

    box-shadow: 0 2px 8px rgba(14,32,51,0.05);

}

.dqm-auth-form .dqm-form-group { margin-bottom: 18px; }

.dqm-auth-form label {

    display: block;

    font-size: 12px;

    font-weight: 600;

    color: #5c6f82;

    margin-bottom: 6px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}

.dqm-input-icon {

    position: relative;

}

.dqm-input-icon svg {

    position: absolute;

    left: 14px;

    top: 50%;

    transform: translateY(-50%);

    stroke: #5c6f82;

    pointer-events: none;

}

.dqm-input-icon input {

    padding-left: 42px !important;

}

.dqm-auth-form input[type="text"],

.dqm-auth-form input[type="email"],

.dqm-auth-form input[type="password"] {

    width: 100%;

    padding: 13px 16px;

    background: rgba(14,32,51,0.06);

    border: 1px solid rgba(14,32,51,0.13);

    border-radius: 10px;

    color: #0e2033;

    font-size: 15px;

    font-family: inherit;

    outline: none;

    transition: all 0.2s;

}

.dqm-auth-form input:focus {

    border-color: #17a05b;

    background: rgba(201,169,98,0.04);

    box-shadow: 0 0 0 3px rgba(201,169,98,0.1);

}

.dqm-auth-form input::placeholder {

    color: #475569;

}

.dqm-auth-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 24px;

}

.dqm-remember {

    display: flex !important;

    align-items: center;

    gap: 8px;

    color: #5c6f82;

    font-size: 13px;

    cursor: pointer;

}

.dqm-remember input[type="checkbox"] {

    accent-color: #17a05b;

    width: 16px;

    height: 16px;

}

.dqm-auth-link {

    color: #17a05b;

    font-size: 13px;

    text-decoration: none;

    transition: color 0.2s;

}

.dqm-auth-link:hover { color: #21b86c; }

.dqm-auth-submit {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: 100%;

    padding: 14px;

    border: none;

    border-radius: 12px;

    background:transparent;

    color: #fff;

    font-size: 15px;

    font-weight: 600;

    font-family: inherit;

    cursor: pointer;

    transition: all 0.25s;

    box-shadow: 0 4px 16px rgba(201,169,98,0.25);

}

.dqm-auth-submit:hover {

    transform: translateY(-1px);

    box-shadow: 0 8px 24px rgba(201,169,98,0.35);

}

.dqm-auth-submit:active {

    transform: translateY(0);

}

.dqm-auth-footer {

    text-align: center;

    margin-top: 24px;

    padding-top: 20px;

    border-top: 1px solid rgba(14,32,51,0.09);

}

.dqm-auth-footer a {

    color: #5c6f82;

    font-size: 13px;

    text-decoration: none;

    transition: color 0.2s;

}

.dqm-auth-footer a:hover { color: #17a05b; }

@media (max-width: 480px) {

    .dqm-auth-card { padding: 32px 24px; }

}



/* ===== CABINET ===== */

.dqm-cabinet {

    display: flex;

    min-height: 80vh;

    background: var(--dqm-bg);

    color: var(--dqm-text);

    font-family: 'Inter', -apple-system, sans-serif;

}



/* Sidebar */

.dqm-sidebar {

    width: 240px;

    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,1));

    border-right: 1px solid rgba(148,163,184,0.06);

    padding: 28px 14px 20px;

    display: flex;

    flex-direction: column;

    flex-shrink: 0;

}

.dqm-sidebar-logo {

    font-size: 20px;

    font-weight: 700;

    color: #0e2033;

    margin-bottom: 36px;

    padding: 0 12px;

    letter-spacing: -0.03em;

}

.dqm-sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }

.dqm-nav-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 12px;

    border-radius: 10px;

    color: rgba(203,213,225,0.85);

    text-decoration: none;

    font-weight: 500;

    font-size: 13px;

    letter-spacing: 0.01em;

    transition: all 0.2s;

    position: relative;

}

.dqm-nav-icon {

    flex-shrink: 0;

    opacity: 0.5;

    transition: opacity 0.2s;

}

.dqm-nav-item:hover {

    color: rgba(248,250,252,0.8);

    background: rgba(14,32,51,0.05);

}

.dqm-nav-item:hover .dqm-nav-icon { opacity: 0.8; }

.dqm-nav-item.active {

    color: #0e2033;

    background: rgba(201,169,98,0.1);

}

.dqm-nav-item.active .dqm-nav-icon { opacity: 1; color: var(--dqm-primary); }

.dqm-nav-item.active::before {

    content: '';

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 3px;

    height: 20px;

    border-radius: 0 3px 3px 0;

    background: var(--dqm-primary);

}

.dqm-sidebar-user {

    border-top: 1px solid rgba(148,163,184,0.06);

    padding-top: 16px;

    display: flex;

    flex-direction: column;

    gap: 8px;

}

.dqm-sidebar-user-info {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 0 8px;

    font-size: 13px;

    font-weight: 500;

    color: rgba(148,163,184,0.5);

}

.dqm-logout {

    display: flex;

    align-items: center;

    gap: 6px;

    color: rgba(148,163,184,0.35);

    text-decoration: none;

    font-size: 12px;

    padding: 6px 8px;

    border-radius: 8px;

    transition: all 0.2s;

}

.dqm-logout:hover {

    color: var(--dqm-danger);

    background: rgba(239,68,68,0.05);

}



/* Main */

.dqm-main {

    flex: 1;

    padding: 32px;

    overflow-y: auto;

}

.dqm-main h1 {

    font-size: 28px;

    font-weight: 800;

    margin: 0 0 24px;

    color: #fff;

}

.dqm-view { display: none; }

.dqm-view.active { display: block; }

.dqm-view-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 24px;

}



/* Stats */

.dqm-pub-stats {

    display: flex;

    gap: 20px;

    margin-bottom: 24px;

    flex-wrap: wrap;

}

.dqm-pub-stat {

    background: var(--dqm-bg-card);

    border: 1px solid var(--dqm-border);

    border-radius: var(--dqm-radius);

    padding: 24px 32px;

    flex: 1;

    min-width: 160px;

}

.dqm-pub-stat .stat-val {

    font-size: 32px;

    font-weight: 800;

    color: var(--dqm-primary);

}

.dqm-pub-stat .stat-lbl {

    font-size: 13px;

    color: var(--dqm-text-secondary);

    margin-top: 4px;

}



/* Cards */

.dqm-pub-card {

    background: var(--dqm-bg-card);

    border: 1px solid var(--dqm-border);

    border-radius: var(--dqm-radius);

    padding: 24px;

    margin-bottom: 20px;

}

.dqm-pub-card h2, .dqm-pub-card h3 {

    font-size: 16px;

    font-weight: 600;

    margin: 0 0 16px;

    color: #fff;

}

.dqm-pub-row {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}

.dqm-pub-half { flex: 1; min-width: 280px; }



/* QR Grid */

.dqm-pub-qr-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 24px;

}

.dqm-pub-qr-card {

    background: linear-gradient(135deg, rgba(255,255,255,0.97), rgba(255,255,255,1));

    border: 1px solid rgba(148,163,184,0.08);

    border-radius: 16px;

    padding: 0;

    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);

    overflow: hidden;

    position: relative;

}

.dqm-pub-qr-card::before {

    content: '';

    position: absolute;

    top: 0; left: 0; right: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, rgba(201,169,98,0.3), transparent);

}

.dqm-pub-qr-card:hover {

    border-color: rgba(201,169,98,0.2);

    transform: translateY(-2px);

    box-shadow: 0 20px 40px rgba(14,32,51,0.1), 0 0 60px rgba(201,169,98,0.06);

}

.dqm-pub-qr-card.qr-paused { opacity: 0.75; }

.dqm-pub-qr-card.qr-inactive { opacity: 0.55; }

.dqm-pub-qr-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 20px 0;

}

.dqm-pub-qr-status-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    position: relative;

}

.dqm-pub-qr-status-dot.active {

    background: #10b981;

    box-shadow: 0 0 8px rgba(16,185,129,0.5);

}

.dqm-pub-qr-status-dot.paused {

    background: #f59e0b;

    box-shadow: 0 0 8px rgba(245,158,11,0.5);

}

.dqm-pub-qr-status-dot.off { background: #475569; }

.dqm-pub-qr-type-badge {

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.2px;

    color: rgba(203,213,225,0.85);

}

.dqm-pub-qr-img {

    text-align: center;

    padding: 20px 20px 16px;

    margin: 0;

    background: none;

}

.dqm-pub-qr-img img {

    width: 160px;

    height: 160px;

    border-radius: 12px;

    background: #fff;

    padding: 12px;

    transition: transform 0.3s;

}

.dqm-pub-qr-card:hover .dqm-pub-qr-img img { transform: scale(1.03); }

.dqm-pub-qr-img.dimmed img { opacity: 0.35; filter: grayscale(0.5); }

.dqm-pub-qr-body { padding: 0 20px 16px; }

.dqm-pub-qr-name {

    font-weight: 600;

    font-size: 15px;

    color: #f1f5f9;

    margin-bottom: 4px;

    letter-spacing: -0.01em;

}

.dqm-pub-qr-link {

    display: block;

    font-size: 12px;

    color: rgba(201,169,98,0.7);

    text-decoration: none;

    margin-bottom: 14px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    transition: color 0.2s;

}

.dqm-pub-qr-link:hover { color: var(--dqm-primary); }

.dqm-pub-qr-metrics { display: flex; gap: 24px; }

.dqm-metric { display: flex; flex-direction: column; }

.dqm-metric-val {

    font-size: 18px;

    font-weight: 700;

    color: #0e2033;

    line-height: 1;

}

.dqm-metric-lbl {

    font-size: 10px;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    color: rgba(148,163,184,0.5);

    margin-top: 2px;

}

.dqm-pub-qr-actions {

    display: flex;

    border-top: 1px solid rgba(148,163,184,0.06);

}

.dqm-act-btn {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 14px 0;

    border: none;

    background: none;

    color: rgba(148,163,184,0.4);

    cursor: pointer;

    transition: all 0.2s;

    position: relative;

}

.dqm-act-btn:not(:last-child)::after {

    content: '';

    position: absolute;

    right: 0;

    top: 25%;

    height: 50%;

    width: 1px;

    background: rgba(148,163,184,0.06);

}

.dqm-act-btn:hover {

    color: var(--dqm-primary);

    background: rgba(201,169,98,0.05);

}

.dqm-act-btn.dqm-act-danger:hover {

    color: var(--dqm-danger);

    background: rgba(239,68,68,0.05);

}

.dqm-act-btn svg { pointer-events: none; }



/* Create form */

.dqm-create-layout { display: flex; gap: 32px; flex-wrap: wrap; }

.dqm-create-form { flex: 1; min-width: 300px; }

.dqm-create-preview { flex: 0 0 300px; }

.dqm-pub-form-group { margin-bottom: 16px; }

.dqm-pub-form-group label {

    display: block;

    font-size: 13px;

    font-weight: 600;

    color: var(--dqm-text-secondary);

    margin-bottom: 6px;

}

.dqm-pub-form-group input,

.dqm-pub-form-group select {

    width: 100%;

    padding: 10px 14px;

    background: rgba(14,32,51,0.08);

    border: 1px solid var(--dqm-border);

    border-radius: 8px;

    color: var(--dqm-text);

    font-size: 14px;

    outline: none;

}

.dqm-pub-form-group input:focus,

.dqm-pub-form-group select:focus { border-color: var(--dqm-primary); }

.dqm-pub-form-row { display: flex; gap: 16px; }

.dqm-pub-form-row .dqm-pub-form-group { flex: 1; }



/* Type grid */

.dqm-type-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 8px;

}

.dqm-type-option {

    padding: 12px 8px;

    text-align: center;

    border: 1px solid var(--dqm-border);

    border-radius: 8px;

    cursor: pointer;

    font-size: 12px;

    font-weight: 500;

    color: var(--dqm-text-secondary);

    transition: all 0.15s;

}

.dqm-type-option span { display: block; font-size: 22px; margin-bottom: 4px; }

.dqm-type-option:hover { border-color: var(--dqm-primary); color: var(--dqm-primary); }

.dqm-type-option.selected {

    background: rgba(201,169,98,0.15);

    border-color: var(--dqm-primary);

    color: var(--dqm-primary);

}



/* Preview box */

.dqm-preview-box {

    background: var(--dqm-bg-card);

    border: 1px solid var(--dqm-border);

    border-radius: var(--dqm-radius);

    padding: 24px;

    text-align: center;

    position: sticky;

    top: 32px;

}

.dqm-preview-placeholder { padding: 60px 20px; color: var(--dqm-text-secondary); font-size: 14px; }

.dqm-preview-box img { max-width: 220px; border-radius: 8px; margin-bottom: 12px; }

.dqm-preview-url { font-size: 13px; color: var(--dqm-primary); word-break: break-all; }



/* Filters */

.dqm-pub-filters { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }

.dqm-pub-filters select {

    padding: 8px 14px;

    background: var(--dqm-bg-card);

    border: 1px solid var(--dqm-border);

    border-radius: 8px;

    color: var(--dqm-text);

    font-size: 13px;

}



/* PRO badges & upgrade */

.dqm-pro-badge {

    display: inline-block;

    padding: 2px 8px;

    background: linear-gradient(135deg, var(--dqm-primary), #0e8a4b);

    color: #fff;

    font-size: 9px;

    font-weight: 800;

    border-radius: 4px;

    letter-spacing: 1px;

    cursor: pointer;

    vertical-align: middle;

    margin-left: 6px;

}

.dqm-pro-badge:hover { opacity: 0.85; }

.dqm-upgrade-hint {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 14px 16px;

    background: rgba(201,169,98,0.06);

    border: 1px dashed rgba(201,169,98,0.2);

    border-radius: 10px;

    color: rgba(203,213,225,0.85);

    font-size: 13px;

    cursor: pointer;

    transition: all 0.2s;

}

.dqm-upgrade-hint:hover {

    border-color: var(--dqm-primary);

    color: var(--dqm-primary);

    background: rgba(201,169,98,0.1);

}



/* Subscription */

.dqm-sub-card {

    background: linear-gradient(135deg, rgba(255,255,255,0.97), rgba(255,255,255,1));

    border: 1px solid rgba(148,163,184,0.08);

    border-radius: 16px;

    padding: 28px;

    margin-bottom: 32px;

    position: relative;

    overflow: hidden;

}

.dqm-sub-card::before {

    content: '';

    position: absolute;

    top: 0; left: 0; right: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, rgba(201,169,98,0.4), transparent);

}

.dqm-sub-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }

.dqm-sub-plan-badge {

    display: inline-block;

    padding: 4px 14px;

    border-radius: 999px;

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 8px;

}

.dqm-sub-price { font-size: 36px; font-weight: 800; color: #0e2033; line-height: 1; }

.dqm-sub-price span { font-size: 14px; font-weight: 500; color: rgba(148,163,184,0.5); }

.dqm-sub-usage { margin-bottom: 20px; }

.dqm-sub-usage-header { display: flex; justify-content: space-between; font-size: 13px; color: rgba(203,213,225,0.85); margin-bottom: 8px; }

.dqm-sub-progress { height: 6px; background: rgba(148,163,184,0.1); border-radius: 3px; overflow: hidden; }

.dqm-sub-progress-bar { height: 100%; border-radius: 3px; transition: width 0.5s ease; }

.dqm-sub-features { display: flex; flex-wrap: wrap; gap: 8px 24px; }

.dqm-sub-feature { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(203,213,225,0.85); }



/* Plan cards */

.dqm-sub-plans { width: 100%; }
.dqm-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}
.dqm-plans-grid .dqm-plan-card {
    min-height: 100%;
    padding: 28px 20px;
}
@media(max-width:1100px) { .dqm-plans-grid { gap: 14px; } .dqm-plans-grid .dqm-plan-card { padding: 24px 16px; } }
@media(max-width:900px) { .dqm-plans-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

.dqm-plan-card {

    background: linear-gradient(135deg, rgba(255,255,255,0.97), rgba(255,255,255,1));

    border: 1px solid rgba(148,163,184,0.08);

    border-radius: 16px;

    padding: 28px;

    position: relative;

    transition: all 0.3s;

}

.dqm-plan-card:hover {

    border-color: rgba(201,169,98,0.2);

    transform: translateY(-2px);

    box-shadow: 0 16px 32px rgba(14,32,51,0.07);

}

.dqm-plan-card.current {

    border-color: rgba(201,169,98,0.3);

    box-shadow: 0 0 40px rgba(201,169,98,0.06);

}

.dqm-plan-popular {

    position: absolute;

    top: -1px; left: 50%; transform: translateX(-50%);

    background: var(--dqm-primary);

    color: #fff;

    padding: 4px 16px;

    border-radius: 0 0 8px 8px;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

}

.dqm-plan-name { font-size: 14px; font-weight: 600; color: rgba(203,213,225,0.85); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }

.dqm-plan-price { font-size: 32px; font-weight: 800; color: #0e2033; margin-bottom: 20px; line-height: 1; }

.dqm-plan-price span { font-size: 13px; font-weight: 500; color: rgba(148,163,184,0.4); }

.dqm-plan-features { margin-bottom: 20px; }

.dqm-plan-feat {

    display: flex; align-items: center; gap: 8px;

    font-size: 13px; color: rgba(148,163,184,0.5);

    padding: 6px 0; border-bottom: 1px solid rgba(148,163,184,0.04);

}



/* Toast */

.dqm-pub-toast {

    position: fixed;

    bottom: 20px; right: 20px;

    padding: 14px 24px;

    border-radius: 10px;

    color: #fff;

    font-weight: 600;

    font-size: 14px;

    z-index: 10000;

    animation: dqm-fadein 0.3s ease;

}

.dqm-pub-toast.success { background: var(--dqm-success); }

.dqm-pub-toast.error { background: var(--dqm-danger); }

@keyframes dqm-fadein {

    from { opacity: 0; transform: translateY(20px); }

    to { opacity: 1; transform: translateY(0); }

}



/* Cabinet responsive */

@media (max-width: 768px) {

    .dqm-cabinet { flex-direction: column; }

    .dqm-sidebar {

        width: 100%;

        border-right: none;

        border-bottom: 1px solid rgba(148,163,184,0.06);

        padding: 12px;

    }

    .dqm-sidebar-logo { margin-bottom: 12px; font-size: 18px; }

    .dqm-sidebar-nav { display: flex; flex-direction: row; gap: 2px; overflow-x: auto; }

    .dqm-nav-item { white-space: nowrap; padding: 8px 12px; font-size: 12px; gap: 6px; }

    .dqm-nav-item.active::before { display: none; }

    .dqm-sidebar-user { display: none; }

    .dqm-main { padding: 20px; }

    .dqm-type-grid { grid-template-columns: repeat(3, 1fr); }

    .dqm-create-preview { flex: 0 0 100%; }

}

/* ===== Analytics V3 — Clean ===== */
.dqm-an-header {
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px;
}
.dqm-an-header h1 { margin:0; font-size:22px; font-weight:600; color:var(--dqm-text,#0e2033); }
.dqm-an-controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.dqm-an-select {
    background:var(--dqm-bg-card,#ffffff); border:1px solid rgba(14,32,51,0.11); color:var(--dqm-text,#0e2033);
    padding:7px 28px 7px 12px; border-radius:8px; font-size:13px; cursor:pointer; outline:none;
    -webkit-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 10px center;
}
.dqm-an-select:focus { border-color:#17a05b; }
.dqm-an-btn-export {
    display:inline-flex; align-items:center; gap:5px; background:rgba(201,169,98,0.1); color:#17a05b;
    border:1px solid rgba(201,169,98,0.2); padding:7px 12px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer;
}
.dqm-an-btn-export:hover { background:rgba(201,169,98,0.18); }

/* Stats row */
.dqm-an-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:20px; }
.dqm-an-stat {
    display:flex; flex-direction:column; align-items:center; padding:14px 10px;
    background:var(--dqm-bg-card,#ffffff); border:1px solid rgba(14,32,51,0.09); border-radius:10px;
}
.dqm-an-stat-num { font-size:22px; font-weight:700; color:var(--dqm-text,#0e2033); line-height:1.2; }
.dqm-an-stat-label { font-size:11px; color:var(--dqm-text-secondary,#5c6f82); margin-top:4px; text-transform:uppercase; letter-spacing:0.5px; }

/* Upgrade */
.dqm-an-upgrade {
    display:flex; align-items:center; gap:16px; padding:20px; margin-bottom:20px;
    background:linear-gradient(135deg,rgba(201,169,98,0.06),rgba(99,102,241,0.06));
    border:1px dashed rgba(201,169,98,0.25); border-radius:12px;
}
.dqm-an-upgrade strong { color:var(--dqm-text,#0e2033); font-size:15px; display:block; margin-bottom:4px; }
.dqm-an-upgrade p { color:var(--dqm-text-secondary,#5c6f82); font-size:13px; margin:0; line-height:1.4; }
.dqm-an-btn-upgrade {
    flex-shrink:0; padding:8px 20px; background:transparent; color:#fff;
    border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
}

/* AI Insights */
.dqm-an-insights {
    display:flex; gap:12px; padding:16px 20px; margin-bottom:16px;
    background:linear-gradient(135deg,rgba(201,169,98,0.05),rgba(139,92,246,0.05));
    border:1px solid rgba(201,169,98,0.12); border-radius:10px;
}
.dqm-an-insights-icon { font-size:18px; flex-shrink:0; margin-top:2px; }
.dqm-an-insights ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.dqm-an-insights li { font-size:12px; color:var(--dqm-text-secondary,#5c6f82); line-height:1.5; }
.dqm-an-insights li strong { color:var(--dqm-text,#0e2033); }

/* Chart */
.dqm-an-chart-box {
    margin-bottom:20px; padding:16px; height:220px;
    background:var(--dqm-bg-card,#ffffff); border:1px solid rgba(14,32,51,0.09); border-radius:10px;
}

/* Scan Log */
.dqm-an-log-header {
    display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;
}
.dqm-an-log-header h3 { margin:0; font-size:15px; font-weight:600; color:var(--dqm-text,#0e2033); }
.dqm-an-search {
    background:var(--dqm-bg-card,#ffffff); border:1px solid rgba(14,32,51,0.11); color:var(--dqm-text,#0e2033);
    padding:6px 12px; border-radius:6px; font-size:12px; outline:none; width:180px;
}
.dqm-an-search:focus { border-color:#17a05b; }
.dqm-an-search::placeholder { color:#5c6f82; }

.dqm-an-log-wrap {
    max-height:420px; overflow-y:auto; border:1px solid rgba(14,32,51,0.09); border-radius:10px;
    background:var(--dqm-bg-card,#ffffff);
    scrollbar-width:thin; scrollbar-color:rgba(14,32,51,0.11) transparent;
}
.dqm-an-log-wrap::-webkit-scrollbar { width:4px; }
.dqm-an-log-wrap::-webkit-scrollbar-thumb { background:rgba(14,32,51,0.13); border-radius:4px; }

.dqm-an-log { width:100%; border-collapse:collapse; font-size:12px; }
.dqm-an-log thead { position:sticky; top:0; z-index:2; }
.dqm-an-log thead th {
    background:rgba(255,255,255,0.97); backdrop-filter:blur(8px);
    padding:10px 10px; text-align:left; font-size:11px; font-weight:600;
    color:var(--dqm-text-secondary,#5c6f82); text-transform:uppercase; letter-spacing:0.5px;
    border-bottom:1px solid rgba(14,32,51,0.11); white-space:nowrap;
}
.dqm-an-log tbody td {
    padding:8px 10px; border-bottom:1px solid rgba(14,32,51,0.05);
    color:var(--dqm-text,#0e2033); white-space:nowrap;
}
.dqm-an-log tbody tr:hover { background:rgba(14,32,51,0.04); }
.dqm-an-log tbody tr:last-child td { border-bottom:none; }

.dqm-an-new {
    display:inline-block; font-size:9px; font-weight:700; color:#10b981;
    background:rgba(16,185,129,0.12); padding:1px 5px; border-radius:3px; vertical-align:middle; margin-left:4px;
}

@media (max-width:768px) {
    .dqm-an-stats { grid-template-columns:repeat(2,1fr); }
    .dqm-an-header { flex-direction:column; align-items:flex-start; }
    .dqm-an-controls { width:100%; }
    .dqm-an-select { flex:1; min-width:0; }
    .dqm-an-log-header { flex-direction:column; align-items:flex-start; }
    .dqm-an-search { width:100%; }
}

/* Top bar strip */
#dqm-topbar-strip { font-size: 13px; }
#dqm-topbar-strip button, #dqm-topbar-strip a { transition: opacity .2s; }
#dqm-topbar-strip button:hover, #dqm-topbar-strip a:hover { opacity: 0.7; }

/* Support/AI widgets */
#dqm-support-chat, #dqm-ai-chat { max-height: 80vh; }
#dqm-fab-support { transition: transform .2s; }
#dqm-fab-support:hover { transform: scale(1.1); }

/* City map links */
.dqm-an-log a { color: #17a05b !important; }
.dqm-an-log a:hover { color: #e0c77a !important; }

@media (max-width: 768px) {
    #dqm-topbar-strip { padding: 4px 10px; font-size: 12px; }
    #dqm-support-chat, #dqm-ai-chat { width: calc(100vw - 32px) !important; right: 16px !important; bottom: 60px !important; }
    #dqm-fab-support { width: 44px !important; height: 44px !important; font-size: 20px !important; }
}
/* ===== LIVE TICKER ===== */
.dqm-ticker{padding:0;background:rgba(255,255,255,0.97);border-bottom:1px solid rgba(14,32,51,0.09);overflow:hidden;position:fixed;top:0;left:0;right:0;z-index:10001;height:34px;display:flex;align-items:center}
.dqm-ticker-track{width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.dqm-ticker-inner{display:flex;gap:0;align-items:center;white-space:nowrap;font-size:.82rem;color:#8296a8;letter-spacing:.01em;justify-content:center}
.dqm-ticker-item{display:inline-flex;align-items:center;gap:6px;padding:0 6px}
.dqm-ticker-dot{width:6px;height:6px;border-radius:50%;background:transparent;display:inline-block;opacity:.7;animation:dqm-pulse 2s ease-in-out infinite}
.dqm-ticker-sep{color:#8296a8;padding:0 10px;font-size:.7rem}
.dqm-ticker-inner strong{color:var(--brand);font-weight:700}
@keyframes dqm-pulse{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
@media(max-width:768px){.dqm-ticker{height:32px;position:fixed;top:36px !important;left:0;right:0;z-index:10001;background:rgba(255,255,255,0.97) !important}.dqm-ticker-inner{justify-content:flex-start;animation:dqm-marquee 18s linear infinite}.dqm-ticker-item{font-size:.78rem;padding:0 4px}.dqm-ticker-sep{padding:0 8px}}
@media(max-width:480px){.dqm-ticker{height:32px}.dqm-ticker-inner{animation-duration:14s}.dqm-ticker-item{font-size:.74rem}}
@keyframes dqm-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===== SOCIAL PROOF ===== */
.dqm-social-proof{padding:48px 20px;border-top:1px solid rgba(14,32,51,0.09);border-bottom:1px solid rgba(14,32,51,0.09);background:rgba(14,32,51,0.04)}
.dqm-proof-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:40px 60px;max-width:1100px;margin:0 auto}
.dqm-proof-item{text-align:center}
.dqm-proof-number{font-size:2.4rem;font-weight:900;color:#17a05b !important;-webkit-text-fill-color:#17a05b !important;line-height:1;margin-bottom:6px}
.dqm-proof-label{color:#8296a8;font-size:.9rem}

/* ===== INTEGRATIONS ===== */
/* === Integrations — pro marquee === */
.dqm-integrations{padding:80px 0;text-align:center;overflow:hidden}
.dqm-integ-header{padding:0 20px;margin-bottom:48px}
.dqm-integ-label{display:inline-block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--brand);background:rgba(201,169,98,.1);border:1px solid rgba(201,169,98,.2);border-radius:999px;padding:6px 18px;margin-bottom:16px}
.dqm-integ-marquee{position:relative;width:100%;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);margin-bottom:16px}
.dqm-integ-track{display:flex;gap:20px;width:max-content;animation:dqm-integ-scroll 30s linear infinite}
.dqm-integ-marquee-rev .dqm-integ-track{animation:dqm-integ-scroll-rev 35s linear infinite}
.dqm-integ-card{display:flex;align-items:center;gap:12px;background:rgba(14,32,51,0.05);border:1px solid rgba(14,32,51,0.10);border-radius:14px;padding:14px 24px;white-space:nowrap;font-size:.9rem;font-weight:600;color:#8296a8;transition:border-color .3s,transform .3s,background .3s;cursor:default;flex-shrink:0}
.dqm-integ-card:hover{border-color:rgba(201,169,98,.4);background:rgba(201,169,98,.06);transform:translateY(-2px)}
.dqm-integ-icon{width:28px;height:28px;flex-shrink:0}
@keyframes dqm-integ-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes dqm-integ-scroll-rev{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
@media(max-width:768px){.dqm-integ-card{padding:10px 16px;font-size:.82rem;border-radius:10px;gap:8px}.dqm-integ-icon{width:22px;height:22px}.dqm-integ-track{gap:12px}.dqm-integrations{padding:60px 0}}

/* ===== DETAILED USE CASES ===== */
.dqm-detailed-cases{padding:80px 20px;text-align:center}
.dqm-dcases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;max-width:1100px;margin:0 auto;text-align:left}
.dqm-dcase{background:rgba(14,32,51,0.05);border:1px solid rgba(14,32,51,0.11);border-radius:18px;padding:28px;transition:border-color .25s,transform .25s}
.dqm-dcase:hover{border-color:var(--brand);transform:translateY(-4px)}
.dqm-dcase-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:18px;border-radius:14px;background:rgba(201,169,98,.1);border:1px solid rgba(201,169,98,.15)}.dqm-dcase-icon svg{width:26px;height:26px;color:var(--brand)}.dqm-dcase:hover .dqm-dcase-icon{background:rgba(201,169,98,.18);border-color:rgba(201,169,98,.3)}
.dqm-dcase h3{margin:0 0 8px;font-size:1.1rem;color:#fff}
.dqm-dcase p{color:#8296a8;font-size:.9rem;line-height:1.6;margin:0 0 16px}
.dqm-dcase-tags{display:flex;flex-wrap:wrap;gap:6px}
.dqm-dcase-tags span{background:rgba(var(--brand-rgb,201,169,98),.15);color:var(--brand);font-size:.75rem;font-weight:600;padding:3px 10px;border-radius:20px}

/* ===== COMPARISON TABLE ===== */
.dqm-comparison{padding:80px 20px;text-align:center;background:rgba(14,32,51,0.04)}
.dqm-compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:1100px;margin:0 auto}
.dqm-compare-table{width:100%;border-collapse:collapse;border-radius:18px;overflow:hidden;font-size:.95rem}
.dqm-compare-table th,.dqm-compare-table td{padding:14px 20px;text-align:center;border-bottom:1px solid rgba(14,32,51,0.09)}
.dqm-compare-table th{background:rgba(14,32,51,0.06);font-weight:700;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;color:#8296a8}
.dqm-compare-table th.dqm-ours{color:var(--brand);background:rgba(var(--brand-rgb,201,169,98),.1)}
.dqm-compare-table td.dqm-ours{background:rgba(var(--brand-rgb,201,169,98),.05)}
.dqm-compare-table td:first-child{text-align:left;color:#8296a8}
.dqm-compare-table tr:last-child td{border-bottom:none}
.dqm-compare-table tr:hover td{background:rgba(14,32,51,0.05)}
.dqm-check{color:#4ade80;font-size:1.1rem}
.dqm-cross{color:#f87171;font-size:1.1rem}
.dqm-partial{color:#fbbf24;font-size:1rem}

/* ===== TESTIMONIALS ===== */
.dqm-testimonials{padding:80px 20px;text-align:center}
.dqm-reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;max-width:1100px;margin:0 auto;text-align:left}
.dqm-review{background:rgba(14,32,51,0.06);border:1px solid rgba(14,32,51,0.11);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:16px}
.dqm-stars{color:#fbbf24;font-size:1rem;letter-spacing:2px}
.dqm-review-text{color:#8296a8;font-size:.95rem;line-height:1.7;flex:1}
.dqm-review-author{display:flex;align-items:center;gap:12px}
.dqm-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--brand),rgba(var(--brand-rgb,201,169,98),.6));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;color:#fff;flex-shrink:0}
.dqm-author-name{font-weight:700;font-size:.9rem;color:#fff}
.dqm-author-role{color:#8296a8;font-size:.8rem}

/* ===== FAQ ===== */
/* ===== FAQ — clean accordion ===== */.dqm-faq{padding:80px 20px;text-align:center;background:transparent}.dqm-faq h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:8px;color:#fff}.dqm-faq .dqm-section-sub{color:#8296a8;margin-bottom:40px}.dqm-faq-list{max-width:720px;margin:0 auto;text-align:left}.dqm-faq-item{border-bottom:1px solid rgba(14,32,51,0.10);overflow:hidden}.dqm-faq-q{width:100%;background:transparent !important;border:none !important;color:#8296a8;font-size:.95rem;font-weight:500;text-align:left;padding:20px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;line-height:1.5;outline:none !important;-webkit-tap-highlight-color:transparent !important;appearance:none !important;box-shadow:none !important;transition:none !important}.dqm-faq-q:hover,.dqm-faq-q:focus,.dqm-faq-q:active,.dqm-faq-q:focus-visible{color:#8296a8 !important;background:transparent !important;outline:none !important;box-shadow:none !important;border:none !important}.dqm-faq-chevron{width:18px;height:18px;flex-shrink:0;transition:transform .3s ease;color:#8296a8}.dqm-faq-item.open .dqm-faq-q{color:#8296a8}.dqm-faq-item.open .dqm-faq-chevron{transform:rotate(180deg);color:#8296a8}.dqm-faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .25s ease;color:#8296a8;font-size:.9rem;line-height:1.7}.dqm-faq-item.open .dqm-faq-a{max-height:300px;padding-bottom:20px}

/* Ticker spacer */
.dqm-ticker + .dqm-mobile-menu, .dqm-ticker + * {margin-top:0}
.dqm-ticker-spacer{display:none}
@media(max-width:768px){.dqm-ticker-spacer{display:block;height:32px}}

/* === Upgrade Modal === */
.dqm-modal-overlay{position:fixed;inset:0;background:rgba(14,32,51,0.16);z-index:99999;backdrop-filter:blur(4px)}
.dqm-modal-box{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#f7f9fb;border:1px solid rgba(14,32,51,0.13);border-radius:18px;padding:36px;max-width:440px;width:90%;z-index:100000;text-align:center}
.dqm-modal-box h3{color:#fff;font-size:1.2rem;margin:0 0 12px}
.dqm-modal-box p{color:#8296a8;font-size:.95rem;line-height:1.5;margin:0 0 8px}
.dqm-modal-features{color:var(--brand,#17a05b) !important;font-size:.9rem}
.dqm-modal-actions{display:flex;gap:12px;justify-content:center;margin-top:24px}
.dqm-btn-upgrade{background:transparent;color:#111;border:none;border-radius:10px;padding:12px 28px;font-weight:700;font-size:.95rem;cursor:pointer;transition:transform .2s}
.dqm-btn-upgrade:hover{transform:translateY(-2px)}
.dqm-btn-secondary{background:rgba(14,32,51,0.09);color:#fff;border:1px solid rgba(14,32,51,0.13);border-radius:10px;padding:12px 28px;font-size:.95rem;cursor:pointer}
.dqm-btn-secondary:hover{background:rgba(14,32,51,0.13)}
/* Transparent bg checkbox */
.dqm-pub-checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;color:#8296a8;font-size:.9rem}
.dqm-pub-checkbox-label input[type=checkbox]{width:18px;height:18px;accent-color:#17a05b;cursor:pointer}
.dqm-pro-badge-inline{background:transparent;color:#111;font-size:.65rem;font-weight:700;padding:2px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.05em}
/* Guest preview watermark */
.dqm-guest-preview{position:relative;display:inline-block}
.dqm-guest-preview::after{content:'DEMO';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-30deg);font-size:48px;font-weight:900;color:#8296a8;pointer-events:none;letter-spacing:8px;text-shadow:0 2px 8px rgba(14,32,51,0.1)}

/* ===== PROMO BAR ===== */
.dqm-promo-bar{position:fixed;top:0;left:0;right:0;z-index:10002;background:linear-gradient(135deg,#1a1510 0%,#0d1117 100%);border-bottom:1px solid rgba(201,169,98,.2);padding:8px 0;font-size:.82rem;--promo-h:36px}
.dqm-promo-inner{display:flex;align-items:center;justify-content:center;gap:10px;max-width:1200px;margin:0 auto;padding:0 16px;flex-wrap:nowrap}
.dqm-promo-inner span{color:#8296a8}
.dqm-promo-inner strong{color:#17a05b}
.dqm-promo-btn{display:inline-block;background:transparent;color:#17a05b;font-size:.75rem;font-weight:700;padding:4px 14px;border:1px solid rgba(201,169,98,.4);border-radius:6px;text-decoration:none;white-space:nowrap;transition:transform .2s}
.dqm-promo-btn:hover{transform:translateY(-1px);color:#17a05b;border-color:#17a05b}
.dqm-promo-close{background:none;border:none;color:#8296a8;font-size:1.2rem;cursor:pointer;padding:0 4px;line-height:1;margin-left:8px}
.dqm-promo-close:hover{color:#fff}

/* Adjust ticker and topbar positions for promo bar */
.dqm-ticker{top:var(--promo-h, 36px) !important}
.dqm-topbar{top:calc(var(--promo-h, 36px) + 34px) !important}

/* ===== HERO TRUST BADGES ===== */
.dqm-hero-trust{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:32px;animation:fadeInUp .6s ease both}
.dqm-hero-trust-item{display:inline-flex;align-items:center;gap:5px;font-size:.82rem;color:#8296a8;font-weight:500}
.dqm-hero-trust-sep{color:#8296a8;font-size:.6rem}

@media(max-width:768px){
    .dqm-promo-bar{font-size:.72rem}
    .dqm-promo-inner{gap:6px;text-align:center;flex-wrap:wrap}
    .dqm-promo-inner svg{display:none}
    .dqm-hero-trust{gap:6px}
    .dqm-hero-trust-item{font-size:.75rem}
}
/* ===== ROI CALCULATOR ===== */
.dqm-roi-section{padding:80px 5% 80px;max-width:1200px;margin:0 auto}
.dqm-roi-calc{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:48px}
.dqm-roi-inputs{display:flex;flex-direction:column;gap:20px}
.dqm-roi-field label{display:block;font-size:.85rem;color:#8296a8;margin-bottom:6px;font-weight:600}
.dqm-roi-input-wrap{position:relative;display:flex;align-items:center;background:rgba(14,32,51,0.06);border:1px solid rgba(14,32,51,0.13);border-radius:12px;padding:0 14px;transition:border-color .25s,box-shadow .25s}
.dqm-roi-input-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(201,169,98,.15)}
.dqm-roi-input-wrap svg{flex-shrink:0;color:#8296a8}
.dqm-roi-input-wrap input{flex:1;background:transparent;border:none;padding:14px 10px;color:#fff;font-size:1rem;outline:none;font-family:inherit;-moz-appearance:textfield}
.dqm-roi-input-wrap input::-webkit-outer-spin-button,.dqm-roi-input-wrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dqm-roi-pct{color:#8296a8;font-size:.9rem;font-weight:600}
.dqm-roi-hint{font-size:.72rem;color:#8296a8;margin-top:4px;padding-left:2px}

.dqm-roi-results{display:flex;flex-direction:column;gap:16px}
.dqm-roi-result-card{background:rgba(14,32,51,0.05);border:1px solid rgba(14,32,51,0.11);border-radius:16px;padding:24px;text-align:center}
.dqm-roi-main{background:linear-gradient(135deg,rgba(201,169,98,.08) 0%,rgba(201,169,98,.02) 100%);border-color:rgba(201,169,98,.2)}
.dqm-roi-result-label{font-size:.8rem;color:#8296a8;text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:8px}
.dqm-roi-result-value{font-size:2.4rem;font-weight:800;color:#fff;line-height:1.1}
.dqm-roi-main .dqm-roi-result-value{font-size:3rem;background:transparent;-webkit-background-clip:text;-webkit-text-fill-color:#17a05b;background-clip:text}
.dqm-roi-result-sub{font-size:.78rem;color:#8296a8;margin-top:4px}
.dqm-roi-result-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.dqm-roi-result-row .dqm-roi-result-value{font-size:1.6rem}
.dqm-roi-green{color:#4ade80 !important;-webkit-text-fill-color:#4ade80 !important}

@media(max-width:768px){
    .dqm-roi-section{padding:60px 5%}
    .dqm-roi-calc{grid-template-columns:1fr;gap:24px}
    .dqm-roi-result-row{grid-template-columns:1fr}
    .dqm-roi-main .dqm-roi-result-value{font-size:2.2rem}
}
/* ===== UPGRADED SECTIONS ===== */

/* Features grid upgrade */
.dqm-features {
    padding: 80px 5%;
    max-width: 1200px;
    margin: 0 auto;
}
.dqm-features h2,
.dqm-how-it-works h2,
.dqm-pricing h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 800;
    text-align: center;
    margin-bottom: 8px;
}
.dqm-section-sub {
    text-align: center;
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 48px;
}
.dqm-features-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}
.dqm-feature-card {
    background: rgba(255,255,255,0.72) !important;
    border: 1px solid rgba(14,32,51,0.09) !important;
    border-radius: 18px !important;
    padding: 32px 28px !important;
    backdrop-filter: blur(12px);
    transition: all .35s cubic-bezier(.16,1,.3,1) !important;
    position: relative;
    overflow: hidden;
}
.dqm-feature-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(201,169,98,.2) !important;
    box-shadow: 0 20px 50px rgba(14,32,51,0.1), 0 0 30px rgba(201,169,98,.06) !important;
}
.dqm-feature-card::before {
    background:transparent !important;
}
.dqm-feature-icon {
    width: 56px !important;
    height: 56px !important;
    background: rgba(201,169,98,.08) !important;
    border: 1px solid rgba(201,169,98,.12) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    transition: all .35s !important;
}
.dqm-feature-card:hover .dqm-feature-icon {
    background: rgba(201,169,98,.14) !important;
    border-color: rgba(201,169,98,.25) !important;
    box-shadow: 0 0 24px rgba(201,169,98,.12) !important;
    transform: scale(1.08) !important;
}
.dqm-feature-card h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 8px !important;
}
.dqm-feature-card p {
    font-size: .88rem !important;
    color:#8296a8 !important;
    line-height: 1.6 !important;
}

/* How it Works upgrade */
.dqm-how-it-works {
    padding: 80px 5%;
    max-width: 1000px;
    margin: 0 auto;
}
.dqm-steps {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0 !important;
    justify-content: center !important;
    position: relative !important;
}
.dqm-step {
    flex: 1 !important;
    text-align: center !important;
    padding: 0 20px !important;
    position: relative !important;
    background: rgba(255,255,255,0.62) !important;
    border: 1px solid rgba(14,32,51,0.09) !important;
    border-radius: 18px !important;
    padding: 36px 24px 28px !important;
    margin: 0 8px !important;
    transition: all .35s !important;
}
.dqm-step:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(201,169,98,.15) !important;
    box-shadow: 0 16px 40px rgba(14,32,51,0.09) !important;
}
.dqm-step-num {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(201,169,98,.15), rgba(201,169,98,.05)) !important;
    border: 1px solid rgba(201,169,98,.2) !important;
    color: #17a05b !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 20px !important;
}
.dqm-step h3 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 8px !important;
}
.dqm-step p {
    font-size: .85rem !important;
    color:#8296a8 !important;
    line-height: 1.5 !important;
}
.dqm-step-line {
    display: none !important;
}

/* Pricing upgrade */
.dqm-pricing {
    padding: 80px 5%;
    max-width: 1100px;
    margin: 0 auto;
}
.dqm-pricing-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    align-items: start !important;
}
.dqm-price-card {
    background: rgba(255,255,255,0.72) !important;
    border: 1px solid rgba(14,32,51,0.09) !important;
    border-radius: 20px !important;
    padding: 36px 28px !important;
    text-align: center !important;
    transition: all .35s !important;
    position: relative !important;
}
.dqm-price-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 50px rgba(14,32,51,0.1) !important;
}
.dqm-price-popular {
    border-color: rgba(201,169,98,.3) !important;
    background: linear-gradient(180deg, rgba(201,169,98,.06) 0%, rgba(255,255,255,0.82) 40%) !important;
    transform: scale(1.03) !important;
}
.dqm-price-popular:hover {
    transform: scale(1.03) translateY(-6px) !important;
    box-shadow: 0 20px 60px rgba(201,169,98,.1), 0 0 40px rgba(201,169,98,.06) !important;
}
.dqm-price-badge {
    position: absolute !important;
    top: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(135deg, #17a05b, #21b86c) !important;
    color: #ffffff !important;
    font-size: .7rem !important;
    font-weight: 800 !important;
    padding: 5px 20px !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    white-space: nowrap !important;
}
.dqm-price-name {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color:#8296a8 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    margin-bottom: 12px !important;
}
.dqm-price-amount {
    font-size: 3rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    line-height: 1 !important;
    margin-bottom: 24px !important;
}
.dqm-price-currency {
    font-size: 1.4rem !important;
    vertical-align: super !important;
    color:#8296a8 !important;
    margin-right: 2px !important;
}
.dqm-price-period {
    font-size: .85rem !important;
    font-weight: 500 !important;
    color:#8296a8 !important;
}
.dqm-price-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 28px !important;
    text-align: left !important;
}
.dqm-price-features li {
    padding: 8px 0 !important;
    font-size: .88rem !important;
    color:#8296a8 !important;
    border-bottom: 1px solid rgba(14,32,51,0.06) !important;
}
.dqm-price-features li:last-child {
    border-bottom: none !important;
}
.dqm-price-popular .dqm-price-amount {
    background: linear-gradient(135deg, #17a05b, #e8d5a3) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Section titles gradient text */
.dqm-section-title {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 800;
    text-align: center;
    margin-bottom: 8px;
}

/* Mobile overrides */
@media(max-width:768px) {
    .dqm-features-grid {
        grid-template-columns: 1fr !important;
    }
    .dqm-steps {
        flex-direction: column !important;
    }
    .dqm-step {
        margin: 0 0 12px !important;
    }
    .dqm-pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .dqm-price-popular {
        transform: none !important;
    }
    .dqm-price-popular:hover {
        transform: translateY(-4px) !important;
    }
}
/* Feature icon SVG color */
.dqm-feature-icon{color:#17a05b}
.dqm-feature-card:hover .dqm-feature-icon{color:#21b86c}

/* Step icons */
.dqm-step-num{color:#17a05b}
.dqm-step-num svg{stroke:#17a05b}
/* ===== USE CASES — match Features style ===== */
.dqm-use-cases{padding:80px 5%;max-width:1200px;margin:0 auto}
.dqm-use-cases h2{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800;text-align:center;margin-bottom:48px}
.dqm-cases-grid{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:20px !important;margin-top:0 !important}
.dqm-case{background:rgba(255,255,255,0.72) !important;border:1px solid rgba(14,32,51,0.09) !important;border-radius:18px !important;padding:32px 24px !important;text-align:center !important;transition:all .35s cubic-bezier(.16,1,.3,1) !important;position:relative !important;overflow:hidden !important}
.dqm-case::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:transparent;opacity:0;transition:opacity .35s}
.dqm-case:hover{transform:translateY(-6px) !important;border-color:rgba(201,169,98,.2) !important;box-shadow:0 20px 50px rgba(14,32,51,0.1),0 0 30px rgba(201,169,98,.06) !important}
.dqm-case:hover::before{opacity:1}
.dqm-case-icon{width:60px !important;height:60px !important;background:rgba(201,169,98,.08) !important;border:1px solid rgba(201,169,98,.12) !important;border-radius:14px !important;display:flex !important;align-items:center !important;justify-content:center !important;margin:0 auto 20px !important;transition:all .35s !important}
.dqm-case:hover .dqm-case-icon{background:rgba(201,169,98,.14) !important;border-color:rgba(201,169,98,.25) !important;box-shadow:0 0 24px rgba(201,169,98,.12) !important;transform:scale(1.08) !important}
.dqm-case h3{font-size:1.05rem !important;font-weight:700 !important;color:#fff !important;margin-bottom:8px !important}
.dqm-case p{font-size:.85rem !important;color:#8296a8 !important;line-height:1.5 !important}

@media(max-width:768px){
    .dqm-cases-grid{grid-template-columns:1fr !important}
}

/* Hero video background */
.dqm-hero{position:relative;overflow:hidden;background:transparent}
.dqm-hero-video{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;transform:translate(-50%,-50%);z-index:0;object-fit:cover;pointer-events:none}
.dqm-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.57) 0%,rgba(255,255,255,0.72) 60%,transparent 100%);z-index:1}
.dqm-hero-content{position:relative;z-index:2}
.dqm-hero-stats{position:relative;z-index:2}
.dqm-hero-trust{position:relative;z-index:2}

/* Body background image */
body{background:#ffffff !important}

/* Animated body background */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(2px 2px at 20% 30%,rgba(201,169,98,.4),transparent),radial-gradient(2px 2px at 70% 20%,rgba(201,169,98,.3),transparent),radial-gradient(3px 3px at 40% 70%,rgba(201,169,98,.25),transparent),radial-gradient(2px 2px at 80% 60%,rgba(201,169,98,.35),transparent),radial-gradient(2px 2px at 10% 80%,rgba(201,169,98,.2),transparent),radial-gradient(3px 3px at 60% 40%,rgba(201,169,98,.3),transparent),radial-gradient(2px 2px at 90% 90%,rgba(201,169,98,.25),transparent),radial-gradient(2px 2px at 50% 10%,rgba(201,169,98,.35),transparent);background-size:300% 300%;animation:dqmParticles 25s ease-in-out infinite}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 600px 600px at 30% 50%,rgba(201,169,98,.06),transparent),radial-gradient(ellipse 500px 500px at 70% 30%,rgba(201,169,98,.04),transparent);background-size:200% 200%;animation:dqmGlow 15s ease-in-out infinite alternate}
@keyframes dqmParticles{0%{background-position:0% 0%}25%{background-position:50% 100%}50%{background-position:100% 50%}75%{background-position:30% 80%}100%{background-position:0% 0%}}
@keyframes dqmGlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Global mobile fix */
html,body{max-width:100vw;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,video,svg,table,pre,code,iframe{max-width:100%}

@media(max-width:768px){
.dqm-hero{padding:300px 16px 40px 16px !important}
.dqm-hero h1{font-size:1.6rem !important;text-align:center}
.dqm-hero-sub{font-size:.9rem !important;text-align:center}
.dqm-hero-badge{justify-content:center;font-size:.75rem}
.dqm-hero-actions{flex-direction:column;align-items:center;gap:10px}
.dqm-hero-actions a{width:100%;text-align:center;justify-content:center}
.dqm-hero-trust{flex-wrap:wrap;justify-content:center;font-size:.72rem;gap:4px}
.dqm-hero-content{text-align:center;max-width:100%}
.dqm-topbar{padding:0 12px !important}
.dqm-topbar-actions{display:none}
.dqm-topbar-left{gap:8px}
.dqm-topbar-logo img{height:44px !important}
.dqm-burger{display:flex !important}
.dqm-landing section{padding:40px 14px !important}
.dqm-landing h2{font-size:1.4rem !important}
.dqm-features-grid,.dqm-pricing-grid,.dqm-cases-grid{grid-template-columns:1fr !important;gap:14px}
.dqm-steps{flex-direction:column !important;gap:14px}
.dqm-step{width:100% !important;max-width:100%}
.dqm-compare-table{font-size:.7rem}
.dqm-compare-table th,.dqm-compare-table td{padding:8px 6px}
.dqm-roi-grid{grid-template-columns:1fr !important}
.dqm-roi-results{grid-template-columns:1fr !important}
.dqm-video-inner{flex-direction:column !important}
.dqm-video-text,.dqm-video-player{width:100% !important;max-width:100%}
/* removed */
.dqm-footer-col{width:100% !important}
.dqm-promo-bar .dqm-promo-inner{font-size:.7rem;gap:6px}
.dqm-ticker{font-size:.7rem;height:28px}
.dqm-sticky-cta{display:flex !important}
.dqm-hero-video{min-width:auto;width:100%;height:100%;object-fit:cover}
}

@media(max-width:480px){
.dqm-hero h1{font-size:1.35rem !important}
.dqm-hero-sub{font-size:.82rem !important}
.dqm-hero-stats{flex-wrap:wrap}
.dqm-hero-stat{flex:0 0 48%;border-right:none !important;border-bottom:1px solid rgba(14,32,51,0.09);padding:10px 0}
.dqm-hero-stat:nth-last-child(-n+2){border-bottom:none}
.dqm-landing h2{font-size:1.2rem !important}
.dqm-topbar-logo span{display:none}
}

/* Mobile header/hero/hologram fixes */
@media(max-width:768px){
.dqm-promo-bar{position:fixed;top:0;z-index:10002;width:100%;padding:4px 0 !important;height:28px;overflow:hidden;margin:0 !important;border:none !important}
.dqm-ticker{position:fixed;top:28px !important;z-index:10001;margin:0 !important;gap:0;padding:0 !important;height:28px !important;border:none !important}
.dqm-topbar{position:fixed;top:56px !important;z-index:10000;margin:0 !important;padding:0 12px;gap:0;border-top:none !important;border-bottom:none !important}
.dqm-hero{padding-top:300px !important}
.dqm-topbar-logo img{height:48px !important}
}

/* Mobile header/hero/hologram fixes */
@media(max-width:768px){
.dqm-promo-bar{position:fixed;top:0;z-index:10002;width:100%;padding:4px 0 !important;height:28px;overflow:hidden;margin:0 !important;border:none !important}
.dqm-ticker{position:fixed;top:28px !important;z-index:10001;margin:0 !important;gap:0;padding:0 !important;height:28px !important;border:none !important}
.dqm-topbar{position:fixed;top:56px !important;z-index:10000;margin:0 !important;padding:0 12px;gap:0;border-top:none !important;border-bottom:none !important}
.dqm-hero{padding-top:300px !important}
.dqm-topbar-logo img{height:48px !important}
}

/* Hologram chat label */
.dqm-holo-chat-label{display:flex;align-items:center;gap:6px;margin-bottom:8px;justify-content:center}
.dqm-holo-chat-label svg{flex-shrink:0}
.dqm-holo-chat-label span{color:#17a05b;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}

/* === Chat toggle button in header === */
.dqm-chat-toggle-btn{position:relative !important}
.dqm-chat-toggle-btn svg{stroke:#17a05b !important}
.dqm-chat-badge{position:absolute;top:-2px;right:-4px;background:#17a05b;color:#ffffff;font-size:.5rem;font-weight:800;padding:1px 4px;border-radius:6px;line-height:1.2;letter-spacing:.02em}

/* === Chat widget — desktop === */
.dqm-chat-widget{
    background:rgba(255,255,255,0) !important;
    border:1px solid rgba(201,169,98,.15) !important;
    border-radius:16px !important;
    box-shadow:0 20px 60px rgba(14,32,51,0.16),0 0 0 1px rgba(201,169,98,.08) !important;
    backdrop-filter:blur(20px) !important;-webkit-backdrop-filter:blur(20px) !important;
    overflow:hidden !important;
}
.dqm-chat-header{
    display:flex !important;align-items:center !important;justify-content:space-between !important;
    padding:14px 18px !important;
    background:rgba(201,169,98,.06) !important;
    border-bottom:1px solid rgba(201,169,98,.1) !important;
}
.dqm-chat-header-left{display:flex;align-items:center;gap:10px}
.dqm-chat-avatar{
    width:36px;height:36px;border-radius:10px;
    background:rgba(201,169,98,.12);border:1px solid rgba(201,169,98,.2);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.dqm-chat-avatar svg{stroke:#17a05b !important;width:18px !important;height:18px !important}
.dqm-chat-header-title{font-size:.88rem !important;font-weight:700 !important;color:#fff !important}
.dqm-chat-header-sub{font-size:.7rem !important;color:#8296a8 !important;display:flex;align-items:center;gap:4px}
.dqm-chat-online{width:6px;height:6px;border-radius:50%;background:#22c55e;display:inline-block;animation:dqm-pulse 2s ease-in-out infinite}
@keyframes dqm-pulse{0%,100%{opacity:1}50%{opacity:.4}}
button.dqm-chat-close{
    background:rgba(14,32,51,0.06) !important;border:none !important;
    color:#8296a8 !important;cursor:pointer !important;
    padding:6px !important;border-radius:8px !important;transition:all .2s !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
}
button.dqm-chat-close:hover{color:#fff !important;background:rgba(14,32,51,0.13) !important}
.dqm-chat-messages{
    background:transparent !important;padding:16px !important;
    overflow-y:auto !important;flex:1 !important;
}
.dqm-chat-msg{
    line-height:1.55 !important;font-size:.86rem !important;
    padding:10px 14px !important;margin-bottom:10px !important;
}
.dqm-chat-msg.bot{
    background:rgba(201,169,98,.06) !important;
    border:1px solid rgba(201,169,98,.08) !important;
    border-radius:14px 14px 14px 4px !important;
    color:#8296a8 !important;
}
.dqm-chat-msg.user{
    background:rgba(14,32,51,0.09) !important;
    border:1px solid rgba(14,32,51,0.09) !important;
    border-radius:14px 14px 4px 14px !important;
    color:#fff !important;
}
.dqm-chat-input-wrap{
    display:flex !important;align-items:center !important;
    gap:8px !important;padding:12px 14px !important;
    border-top:1px solid rgba(201,169,98,.08) !important;
    background:rgba(255,255,255,0) !important;
}
.dqm-chat-input{
    flex:1 !important;
    background:rgba(14,32,51,0.06) !important;
    border:1px solid rgba(14,32,51,0.11) !important;
    border-radius:10px !important;
    padding:10px 14px !important;
    color:#fff !important;font-size:.86rem !important;
    outline:none !important;
}
.dqm-chat-input:focus{border-color:rgba(201,169,98,.3) !important}
.dqm-chat-send{
    width:40px !important;height:40px !important;min-width:40px !important;
    border-radius:10px !important;
    background:transparent !important;
    border:none !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    cursor:pointer !important;transition:all .2s !important;
    text-decoration:none !important;
}
.dqm-chat-send:hover{opacity:.7 !important}
.dqm-chat-send svg{stroke:#17a05b !important;width:20px !important;height:20px !important}
/* QR Generator */
.dqm-generator{padding:80px 5% 60px;max-width:1200px;margin:0 auto}
.dqm-generator-header{text-align:center;margin-bottom:48px}
.dqm-gen-wrap{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start}
.dqm-gen-form{background:rgba(201,169,98,.04);border:1px solid rgba(201,169,98,.1);border-radius:20px;padding:32px}
.dqm-gen-types{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.dqm-gen-type{background:rgba(14,32,51,0.08);border:1px solid rgba(14,32,51,0.13);border-radius:10px;padding:8px 14px;color:#8296a8;font-size:.85rem;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s}
.dqm-gen-type:hover{border-color:rgba(201,169,98,.3);color:#fff}
.dqm-gen-type.active{background:rgba(201,169,98,.15);border-color:rgba(201,169,98,.4);color:#17a05b}
.dqm-gen-fields{margin-bottom:20px}
.dqm-gen-fields label{display:block;color:#8296a8;font-size:.8rem;margin-bottom:6px;margin-top:12px}
.dqm-gen-fields label:first-child{margin-top:0}
.dqm-gen-input{width:100%;background:rgba(14,32,51,0.09);border:1px solid rgba(14,32,51,0.13);border-radius:10px;padding:12px 14px;color:#fff;font-size:.9rem;outline:none;transition:border-color .2s;box-sizing:border-box}
.dqm-gen-input:focus{border-color:rgba(201,169,98,.4)}
.dqm-gen-input::placeholder{color:#8296a8}
textarea.dqm-gen-input{resize:vertical}
select.dqm-gen-input{appearance:none;cursor:pointer}
.dqm-gen-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dqm-gen-custom{margin:20px 0;padding-top:20px;border-top:1px solid rgba(14,32,51,0.09)}
.dqm-gen-color{width:44px;height:44px;border:2px solid rgba(14,32,51,0.13);border-radius:10px;cursor:pointer;padding:2px;background:transparent}
.dqm-gen-size-wrap{display:flex;align-items:center;gap:10px}
.dqm-gen-range{flex:1;accent-color:#17a05b;height:4px}
#gen-size-val{color:#8296a8;font-size:.8rem;min-width:45px}
.dqm-gen-create{width:100%;justify-content:center;gap:8px;padding:14px !important;font-size:1rem !important}
.dqm-gen-preview{position:sticky;top:100px}
.dqm-gen-preview-box{background:rgba(14,32,51,0.05);border:1px solid rgba(201,169,98,.1);border-radius:20px;padding:32px;display:flex;align-items:center;justify-content:center;min-height:320px}
.dqm-gen-placeholder{text-align:center;color:#8296a8}
.dqm-gen-placeholder p{margin-top:16px;font-size:.9rem}
#gen-canvas{border-radius:12px;max-width:100%}
.dqm-gen-download{width:100%;margin-top:16px;justify-content:center;gap:8px;background:#fff !important;color:#ffffff !important;border:none !important;border-radius:12px !important;padding:14px !important;font-weight:700;font-size:.95rem;letter-spacing:.02em}
.dqm-gen-download:hover{background:#f0f0f0 !important;transform:translateY(-1px)}

/* Auth Modal */
.dqm-auth-overlay{position:fixed;inset:0;background:rgba(14,32,51,0.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px}
.dqm-auth-modal{background:rgba(255,255,255,0);border:1px solid rgba(201,169,98,.15);border-radius:24px;padding:40px;max-width:420px;width:100%;position:relative;box-shadow:0 20px 60px rgba(14,32,51,0.16)}
.dqm-auth-close{position:absolute;top:16px;right:16px;background:none;border:none;color:#8296a8;font-size:24px;cursor:pointer;padding:4px 8px;border-radius:8px;transition:all .2s}
.dqm-auth-close:hover{color:#fff;background:rgba(14,32,51,0.11)}
.dqm-auth-header{text-align:center;margin-bottom:28px}
.dqm-auth-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid rgba(201,169,98,.3);margin-bottom:16px}
.dqm-auth-header h3{color:#fff;font-size:1.3rem;margin:0 0 8px}
.dqm-auth-header p{color:#8296a8;font-size:.9rem;margin:0}
.dqm-auth-buttons{display:flex;flex-direction:column;gap:10px}
.dqm-auth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px;border-radius:12px;border:1px solid rgba(14,32,51,0.15);background:rgba(14,32,51,0.08);color:#fff;font-size:.9rem;cursor:pointer;transition:all .2s;font-weight:500}
.dqm-auth-btn:hover{background:rgba(14,32,51,0.13);border-color:rgba(14,32,51,0.18)}
.dqm-auth-google{background:rgba(66,133,244,.1);border-color:rgba(66,133,244,.2)}
.dqm-auth-google:hover{background:rgba(66,133,244,.2)}
.dqm-auth-facebook{background:rgba(24,119,242,.1);border-color:rgba(24,119,242,.2)}
.dqm-auth-facebook:hover{background:rgba(24,119,242,.2)}
.dqm-auth-apple{background:rgba(14,32,51,0.11);border-color:rgba(14,32,51,0.18)}
.dqm-auth-divider{text-align:center;color:#8296a8;font-size:.8rem;margin:6px 0;position:relative}
.dqm-auth-divider::before,.dqm-auth-divider::after{content:'';position:absolute;top:50%;width:calc(50% - 20px);height:1px;background:rgba(14,32,51,0.13)}
.dqm-auth-divider::before{left:0}
.dqm-auth-divider::after{right:0}
.dqm-auth-email-form{display:flex;flex-direction:column}
.dqm-auth-terms{text-align:center;color:#8296a8;font-size:.75rem;margin-top:20px}
.dqm-auth-terms a{color:rgba(201,169,98,.6)}

@media(max-width:768px){
.dqm-gen-wrap{grid-template-columns:1fr;gap:20px}
.dqm-gen-preview{position:static;min-height:auto}
.dqm-gen-types{gap:6px}
.dqm-gen-type{padding:6px 10px;font-size:.78rem}
.dqm-gen-row{grid-template-columns:1fr}
.dqm-generator{padding:40px 4% 32px}
.dqm-generator-header{margin-bottom:28px}
.dqm-generator-header h2{font-size:1.3rem !important}
.dqm-gen-form{padding:20px 16px;border-radius:14px}
.dqm-gen-canvas-wrap{min-width:auto;min-height:auto;padding:16px}
#gen-canvas{max-width:100%}
.dqm-gen-style-picker{margin-top:12px}
.dqm-gen-style-label{font-size:.65rem;margin-bottom:8px}
.dqm-gen-pro-features{gap:6px}
.dqm-gen-pro-row{padding:8px 12px;font-size:.78rem;border-radius:8px}
.dqm-gen-pro-row svg{width:16px;height:16px}
.dqm-gen-btn{padding:12px;font-size:.85rem}
.dqm-gen-dl{padding:10px 16px;font-size:.78rem}
.dqm-gen-modal{padding:24px 18px;max-width:92%;border-radius:16px}
.dqm-gen-modal h3{font-size:1rem}
.dqm-gen-modal p{font-size:.82rem}
/* Pricing mobile */
.dqm-pricing{padding:40px 4% !important}
.dqm-pricing h2{font-size:1.3rem !important}
.dqm-price-card{padding:24px 18px !important;border-radius:14px !important}
.dqm-price-amount{font-size:2rem !important}
.dqm-price-features{font-size:.82rem !important}
.dqm-price-features li{padding:6px 0 !important}
.dqm-price-footer{margin-top:20px;padding:14px 16px}
.dqm-price-footer p{font-size:.72rem}
.dqm-price-trial-info{font-size:.62rem}
/* Mobile: hide hologram, show only chat widget */
.dqm-hologram{display:none !important}
/* Sticky chat button — clean icon, no circle */
button.dqm-sticky-chat,
button.dqm-sticky-chat[id] {
    display:flex !important;
    width:52px !important;height:52px !important;
    bottom:18px !important;right:16px !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    z-index:10001 !important;
    align-items:center !important;justify-content:center !important;
    padding:0 !important;
    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
}
button.dqm-sticky-chat svg {
    width:34px !important;height:34px !important;
    stroke:#17a05b !important;
    filter:drop-shadow(0 2px 8px rgba(201,169,98,.5)) !important;
    transition:all .2s ease !important;
}
button.dqm-sticky-chat:active svg {
    transform:scale(.9) !important;
    filter:drop-shadow(0 1px 4px rgba(201,169,98,.6)) !important;
}
/* Chat widget — fullscreen app-like */
.dqm-chat-widget{
    position:fixed !important;
    width:100% !important;height:100% !important;
    right:0 !important;bottom:0 !important;left:0 !important;top:0 !important;
    border-radius:0 !important;border:none !important;
    z-index:10002 !important;
    background:rgba(255,255,255,0) !important;
}
.dqm-chat-header{
    padding:16px 18px !important;
    background:linear-gradient(135deg,rgba(201,169,98,.1),rgba(255,255,255,0)) !important;
    border-bottom:1px solid rgba(201,169,98,.12) !important;
}
.dqm-chat-header-title{font-size:.92rem !important}
.dqm-chat-header-sub{font-size:.72rem !important;color:#8296a8 !important}
.dqm-chat-close{
    width:40px !important;height:40px !important;min-width:40px !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    border-radius:50% !important;background:rgba(14,32,51,0.09) !important;
    color:#8296a8 !important;font-size:1.2rem !important;
}
.dqm-chat-messages{
    padding:16px 14px !important;flex:1 !important;
    -webkit-overflow-scrolling:touch !important;
}
.dqm-chat-msg{
    padding:12px 16px !important;font-size:.88rem !important;
    max-width:82% !important;border-radius:14px !important;line-height:1.5 !important;
}
.dqm-chat-msg.bot{
    background:rgba(201,169,98,.08) !important;
    border:1px solid rgba(201,169,98,.12) !important;
}
.dqm-chat-msg.user{
    background:rgba(14,32,51,0.09) !important;
    border:1px solid rgba(14,32,51,0.11) !important;
}
.dqm-chat-input-wrap{
    padding:12px 14px !important;gap:10px !important;
    border-top:1px solid rgba(201,169,98,.08) !important;
    background:rgba(255,255,255,0) !important;
}
.dqm-chat-input{
    padding:14px 16px !important;font-size:.9rem !important;
    border-radius:14px !important;
    background:rgba(14,32,51,0.06) !important;
    border:1px solid rgba(14,32,51,0.11) !important;
    color:#fff !important;
}
.dqm-chat-input:focus{border-color:rgba(201,169,98,.3) !important}
/* Comparison table mobile */
.dqm-compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dqm-compare-table{min-width:600px}
/* Auth modal mobile */
.dqm-auth-modal{padding:24px 16px}
/* FAQ mobile */
.dqm-faq-q{padding:14px 12px !important;font-size:.88rem !important}
.dqm-faq-a{padding:0 12px 14px !important;font-size:.82rem !important}
}
/* === GLOBAL PINK KILL — force gold on all interactive states === */
*:focus,*:focus-visible,*:active{outline-color:rgba(201,169,98,.5) !important}
::selection{background:rgba(201,169,98,.3) !important;color:#fff !important}
::-moz-selection{background:rgba(201,169,98,.3) !important;color:#fff !important}
a:hover,a:focus,a:active{color:#17a05b !important;outline:none !important}
button:hover,button:focus,button:active,
input[type="submit"]:hover,input[type="submit"]:focus,
input[type="button"]:hover,input[type="button"]:focus{outline:none !important;box-shadow:none !important}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid rgba(201,169,98,.4) !important;outline-offset:2px}
input:focus,select:focus,textarea:focus{border-color:rgba(201,169,98,.4) !important;box-shadow:0 0 0 2px rgba(201,169,98,.1) !important;outline:none !important}
input[type="range"]::-webkit-slider-thumb{background:#17a05b !important}
input[type="range"]::-moz-range-thumb{background:#17a05b !important}
input[type="range"]::-webkit-slider-runnable-track{background:rgba(201,169,98,.2) !important}
input[type="color"]{border-color:rgba(201,169,98,.2) !important}
input[type="color"]:focus{border-color:rgba(201,169,98,.5) !important}
.dqm-gen-type:focus,.dqm-gen-type:active{outline:none !important;box-shadow:none !important}
.dqm-btn:hover,.dqm-btn:focus,.dqm-btn:active{outline:none !important;box-shadow:none !important}
.dqm-auth-btn:focus,.dqm-auth-btn:active{outline:none !important;box-shadow:none !important}
/* WP core pink overrides */
.wp-element-button:hover,.wp-block-button__link:hover{background:#17a05b !important;color:#ffffff !important}
a:where(:not(.wp-element-button)){text-decoration:none}
:root{--wp--preset--color--vivid-red:#17a05b !important;--wp--preset--color--luminous-vivid-orange:#17a05b !important;--wp--preset--color--vivid-cyan-blue:#17a05b !important;--wp--preset--color--vivid-purple:#17a05b !important}
/* === CTA section fix === */
.dqm-cta{padding:80px 20px;text-align:center;position:relative}
.dqm-cta-inner{max-width:600px;margin:0 auto}
.dqm-cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* === Footer structure fix === */
.dqm-footer{background:#060a16;border-top:1px solid rgba(14,32,51,0.08);padding:60px 24px 0;position:relative;z-index:1}
/* removed */
.dqm-footer-brand{max-width:320px}
.dqm-footer-logo{font-size:1.6rem;font-weight:800;letter-spacing:.04em;color:#fff;margin-bottom:12px}
.dqm-footer-desc{font-size:.88rem;color:#8296a8;line-height:1.6}
.dqm-footer-links{display:flex;gap:48px}
.dqm-footer-col h4{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#8296a8;margin-bottom:14px}
.dqm-footer-col a{display:block;font-size:.88rem;color:#8296a8;text-decoration:none;padding:4px 0;transition:color .2s}
.dqm-footer-col a:hover{color:#8296a8}
.dqm-footer-bottom{max-width:1100px;margin:0 auto;border-top:1px solid rgba(14,32,51,0.09);padding:20px 0;text-align:center;font-size:.78rem;color:#8296a8}
@media(max-width:768px){
/* removed */
.dqm-footer-links{flex-wrap:wrap;gap:32px}
.dqm-footer-brand{max-width:100%}
}

/* === Footer professional === */
.dqm-footer-inner{max-width:1100px;margin:0 auto;display:grid !important;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px}
.dqm-footer-brand-col{display:flex;flex-direction:column;gap:12px}
.dqm-footer-logo-link{display:inline-block}
.dqm-footer-logo-img{height:36px;width:auto}
.dqm-footer-desc{font-size:.85rem;color:#8296a8;line-height:1.6;margin:0}
@media(max-width:768px){.dqm-footer-inner{grid-template-columns:1fr 1fr !important;gap:28px}}
@media(max-width:480px){.dqm-footer-inner{grid-template-columns:1fr !important}}


/* === Google login button === */
.dqm-auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:#8296a8;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.dqm-auth-divider::before,.dqm-auth-divider::after{content:"";flex:1;height:1px;background:rgba(14,32,51,0.11)}
.dqm-google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px;border-radius:12px;border:1px solid rgba(14,32,51,0.15);background:rgba(14,32,51,0.09);color:#fff !important;font-size:.9rem;cursor:pointer;transition:all .2s;font-weight:500;text-decoration:none !important}
.dqm-google-btn:hover{background:rgba(14,32,51,0.13);border-color:rgba(14,32,51,0.18);color:#fff !important;text-decoration:none !important}

/* === Login form text visibility fix === */
.dqm-auth-form label{color:#8296a8 !important;font-size:12px;font-weight:600}
.dqm-auth-form input[type="text"],.dqm-auth-form input[type="email"],.dqm-auth-form input[type="password"]{color:#0e2033 !important;background:rgba(14,32,51,0.09) !important;border-color:rgba(14,32,51,0.18) !important}
.dqm-auth-form input::placeholder{color:#5c6f82 !important}
.dqm-remember{color:#8296a8 !important}
.dqm-auth-footer a{color:#8296a8 !important}
.dqm-auth-footer a:hover{color:#17a05b !important}

/* Trust Badges */
.dqm-badges{display:flex !important;flex-flow:row wrap !important;justify-content:center !important;align-items:center !important;gap:8px 14px !important;margin-top:20px !important}
.dqm-badge-item{display:inline-flex !important;align-items:center !important;gap:6px;background:rgba(201,169,98,.06);border:1px solid rgba(201,169,98,.12);border-radius:50px;padding:6px 14px;font-size:.76rem;color:#8296a8;font-weight:500;white-space:nowrap}
@media(max-width:768px){.dqm-badges{gap:6px 8px !important}.dqm-badge-item{font-size:.68rem;padding:4px 10px}}

/* === Dark theme for blog posts and pages === */
body.single-post,
body.page:not(.page-id-272):not(.page-id-287):not(.page-id-273) {
    background: #ffffff !important;
    color: #e8ecf0 !important;
}
body.single-post .site-header,
body.page:not(.page-id-272):not(.page-id-287):not(.page-id-273) .site-header {
    display: none !important;
}
body.single-post .site-footer,
body.page:not(.page-id-272):not(.page-id-287):not(.page-id-273) .site-footer {
    display: none !important;
}
body.single-post .entry-title,
body.single-post .page-header {
    display: none !important;
}
body.single-post .page-content,
body.single-post .entry-content,
body.page .page-content {
    max-width: 860px !important;
    margin: 0 auto !important;
    padding: 40px 24px !important;
    color: #8296a8 !important;
    font-family: "Segoe UI", Inter, -apple-system, sans-serif !important;
    line-height: 1.7 !important;
}
body.single-post h1, body.single-post h2, body.single-post h3,
body.page h1, body.page h2, body.page h3 {
    color: #0e2033 !important;
    font-weight: 700 !important;
}
body.single-post h1 { font-size: 2rem !important; margin-bottom: 16px !important; }
body.single-post h2 { font-size: 1.5rem !important; margin: 32px 0 12px !important; border-bottom: 1px solid rgba(201,169,98,.15); padding-bottom: 8px; }
body.single-post h3 { font-size: 1.2rem !important; margin: 24px 0 8px !important; color: #17a05b !important; }
body.single-post p { margin-bottom: 16px !important; color: #5c6f82 !important; }
body.single-post a { color: #17a05b !important; text-decoration: none !important; }
body.single-post a:hover { text-decoration: underline !important; }
body.single-post ul, body.single-post ol { color: #5c6f82 !important; padding-left: 24px !important; margin-bottom: 16px !important; }
body.single-post li { margin-bottom: 6px !important; }
body.single-post strong { color: #e4eaef !important; }
body.single-post img { max-width: 100% !important; height: auto !important; border-radius: 12px !important; margin: 16px 0 !important; }
body.single-post table { width: 100%; border-collapse: collapse; margin: 20px 0; }
body.single-post th, body.single-post td { padding: 10px 14px; border: 1px solid rgba(148,163,184,.15); color: #5c6f82; font-size: .9rem; }
body.single-post th { background: rgba(201,169,98,.08); color: #17a05b; font-weight: 700; }
body.single-post blockquote { border-left: 3px solid #17a05b; padding-left: 16px; color: #5c6f82; font-style: italic; margin: 20px 0; }

/* CTA block in posts */
body.single-post .entry-content div[style*="background"] {
    border-radius: 16px !important;
    margin: 32px 0 !important;
}

/* === Styled Comment Form === */
body.single-post .comments-area,
body.single-post #comments {
    max-width: 860px;
    margin: 48px auto 0;
    padding: 0 24px;
}
body.single-post .comments-title,
body.single-post #reply-title {
    color: #0e2033 !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    margin-bottom: 24px !important;
}
body.single-post #reply-title small {
    display: block;
    margin-top: 8px;
}
body.single-post #reply-title small a {
    color: #17a05b !important;
    font-size: .85rem;
}
body.single-post .comment-form label {
    color: #5c6f82 !important;
    font-size: .88rem !important;
    font-weight: 600 !important;
    display: block !important;
    margin-bottom: 6px !important;
}
body.single-post .comment-form input[type="text"],
body.single-post .comment-form input[type="email"],
body.single-post .comment-form input[type="url"],
body.single-post .comment-form textarea {
    width: 100% !important;
    background: rgba(14,32,51,0.06) !important;
    border: 1px solid rgba(148,163,184,.15) !important;
    border-radius: 12px !important;
    color: #e4eaef !important;
    padding: 14px 16px !important;
    font-size: .92rem !important;
    font-family: "Segoe UI", Inter, -apple-system, sans-serif !important;
    transition: border-color .25s, box-shadow .25s !important;
    outline: none !important;
    -webkit-appearance: none !important;
}
body.single-post .comment-form input:focus,
body.single-post .comment-form textarea:focus {
    border-color: rgba(201,169,98,.5) !important;
    box-shadow: 0 0 0 3px rgba(201,169,98,.1) !important;
}
body.single-post .comment-form textarea {
    min-height: 140px !important;
    resize: vertical !important;
}
body.single-post .comment-form .form-submit input[type="submit"],
body.single-post .comment-form .submit {
    background:transparent !important;
    color: #17a05b !important;
    border: 1px solid rgba(201,169,98,.4) !important;
    border-radius: 12px !important;
    padding: 14px 32px !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all .25s !important;
    font-family: inherit !important;
    letter-spacing: .02em !important;
}
body.single-post .comment-form .form-submit input[type="submit"]:hover,
body.single-post .comment-form .submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(201,169,98,.3) !important;
}
body.single-post .comment-form p {
    margin-bottom: 18px !important;
}
body.single-post .comment-form .comment-notes {
    color: #5c6f82 !important;
    font-size: .82rem !important;
}
body.single-post .comment-form .required-field-message {
    color: #5c6f82 !important;
}
body.single-post .comment-form .required {
    color: #17a05b !important;
}
/* Comment list */
body.single-post .comment-list {
    list-style: none !important;
    padding: 0 !important;
}
body.single-post .comment-list .comment {
    background: rgba(14,32,51,0.05) !important;
    border: 1px solid rgba(148,163,184,.1) !important;
    border-radius: 16px !important;
    padding: 20px 24px !important;
    margin-bottom: 16px !important;
}
body.single-post .comment-author {
    color: #17a05b !important;
    font-weight: 700 !important;
}
body.single-post .comment-author img {
    border-radius: 50% !important;
    margin-right: 10px !important;
}
body.single-post .comment-metadata {
    color: #5c6f82 !important;
    font-size: .78rem !important;
}
body.single-post .comment-metadata a {
    color: #5c6f82 !important;
}
body.single-post .comment-content p {
    color: #5c6f82 !important;
}
body.single-post .comment-reply-link {
    color: #17a05b !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
}
/* Logged in as */
body.single-post .logged-in-as {
    color: #5c6f82 !important;
    font-size: .85rem !important;
}
body.single-post .logged-in-as a {
    color: #17a05b !important;
}
/* Cookie consent checkbox */
body.single-post .comment-form-cookies-consent label {
    color: #5c6f82 !important;
    font-size: .82rem !important;
    font-weight: 400 !important;
}
/* Fix ALL buttons text visibility on dark theme */
body.single-post button,
body.single-post .wp-element-button,
body.single-post .wp-block-button__link,
body.single-post a.wp-element-button,
body.page button,
body.page .wp-element-button,
body.page .wp-block-button__link {
    color: #17a05b !important;
    background:transparent !important;
    border: 1px solid rgba(201,169,98,.4) !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    cursor: pointer !important;
}
body.single-post button:hover,
body.single-post .wp-element-button:hover,
body.page button:hover,
body.page .wp-element-button:hover {
    box-shadow: 0 6px 20px rgba(201,169,98,.3) !important;
    transform: translateY(-1px) !important;
}
/* Navigation / utility buttons - white text */
body.single-post .nav-links a,
body.single-post .page-numbers,
body.page .nav-links a {
    color: #17a05b !important;
    background: rgba(14,32,51,0.06) !important;
    border: 1px solid rgba(201,169,98,.2) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
}
body.single-post .nav-links a:hover,
body.page .nav-links a:hover {
    background: rgba(201,169,98,.1) !important;
}




/* FIX: Ticker marquee on ALL screens + ticker dots green */
@keyframes dqm-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.dqm-ticker-inner{animation:dqm-marquee 25s linear infinite!important;display:flex!important;gap:0!important;width:max-content!important}
.dqm-ticker-dot{background:#4ade80!important}
.dqm-ticker{display:flex!important;visibility:visible!important;opacity:1!important}

/* FIX: All elements visible immediately */
[data-animate]{opacity:1!important;transform:none!important}

/* === Unified Button Styles === */
.dqm-btn-primary,
.dqm-gen-btn,
.dqm-price-btn,
.dqm-topbar-btn,
.dqm-hologram-btn-start,
.dqm-gc-generate,
.dqm-gc-download,
.dqm-gc-hbtn,
.dqm-gc-modal-btn-primary,
.dqm-seo-btn-primary,
.dqm-seo-sticky-btn,
.dqm-sticky-cta-btn,
.dqm-promo-btn,
#gen-create,
#pub-save-qr,
input[type="submit"] {
    background: transparent !important;
    border: 1px solid rgba(201,169,98,.5) !important;
    color: #17a05b !important;
    border-radius: 10px !important;
    transition: all .2s ease;
}

.dqm-btn-primary:hover,
.dqm-gen-btn:hover,
.dqm-price-btn:hover,
.dqm-topbar-btn:hover,
.dqm-hologram-btn-start:hover,
.dqm-gc-generate:hover,
.dqm-gc-download:hover,
.dqm-gc-hbtn:hover,
.dqm-gc-modal-btn-primary:hover,
.dqm-seo-btn-primary:hover,
.dqm-seo-sticky-btn:hover,
.dqm-sticky-cta-btn:hover,
.dqm-promo-btn:hover,
#gen-create:hover,
#pub-save-qr:hover,
input[type="submit"]:hover {
    background: rgba(201,169,98,.08) !important;
    border-color: #17a05b !important;
    box-shadow: 0 0 15px rgba(201,169,98,.15);
    color: #17a05b !important;
}

/* Glass buttons */
.dqm-btn-glass,
.dqm-hologram-btn-later,
.dqm-gc-modal-btn-glass,
.dqm-seo-btn-glass {
    background: transparent !important;
    border: 1px solid rgba(14,32,51,0.18) !important;
    color:#8296a8 !important;
}

.dqm-btn-glass:hover,
.dqm-hologram-btn-later:hover,
.dqm-gc-modal-btn-glass:hover,
.dqm-seo-btn-glass:hover {
    border-color: rgba(14,32,51,0.18) !important;
    color:#8296a8 !important;
}

/* Generator type buttons */
.dqm-gen-type {
    background: transparent !important;
    border: 1px solid rgba(14,32,51,0.15) !important;
    color:#8296a8 !important;
}
.dqm-gen-type svg { stroke: currentColor !important; }
.dqm-gen-type:hover {
    border-color: rgba(201,169,98,.3) !important;
    color:#8296a8 !important;
}
.dqm-gen-type.active {
    border-color: #17a05b !important;
    color: #17a05b !important;
    background: rgba(201,169,98,.06) !important;
}
.dqm-gen-type.active svg { stroke: #17a05b !important; }
.dqm-gen-pro-type { opacity: .45 !important; }

/* Dot style buttons */
.dqm-gen-dot {
    background: rgba(14,32,51,0.06) !important;
    border: 1px solid rgba(14,32,51,0.18) !important;
    color:#8296a8 !important;
}
.dqm-gen-dot svg {
    width: 28px !important;
    height: 28px !important;
}
.dqm-gen-dot:hover {
    border-color: rgba(201,169,98,.5) !important;
    color: #17a05b !important;
}
.dqm-gen-dot.active {
    border-color: #17a05b !important;
    color: #17a05b !important;
    background: rgba(201,169,98,.1) !important;
}

/* Icon buttons (no border) */
.dqm-burger, .dqm-lang-current,
.dqm-promo-close, .dqm-faq-q, .dqm-scroll-top,
.dqm-gc-modal-close, .dqm-captcha-box {
    border: none !important;
    background: transparent !important;
}
/* Header action icons — visible with subtle bg */
.dqm-topbar-actions .dqm-topbar-icon {
    background: rgba(14,32,51,0.09) !important;
    border: 1px solid rgba(14,32,51,0.13) !important;
    border-radius: 10px !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.dqm-topbar-actions .dqm-topbar-icon:hover {
    background: rgba(201,169,98,.1) !important;
    border-color: rgba(201,169,98,.25) !important;
}

/* SVG icons in buttons */
.dqm-btn svg, .dqm-gen-btn svg, .dqm-gen-dl svg,
.dqm-topbar-btn svg,
.dqm-price-btn svg, .dqm-hologram-btn-start svg,
#gen-create svg { stroke: currentColor !important; }

/* Ticker dot */
.dqm-ticker-dot { background: #4ade80 !important; }

/* Color inputs */
.dqm-gen-colors input[type="color"] {
    border: 1px solid rgba(14,32,51,0.18) !important;
    background: transparent !important;
}

/* PRO tooltip */
.dqm-pro-tooltip {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translate(-50%, -100%);
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 1px solid rgba(201,169,98,.3);
    border-radius: 8px;
    padding: 8px 14px;
    white-space: nowrap;
    font-size: .72rem;
    color: #17a05b;
    font-weight: 600;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s, transform .2s;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(14,32,51,0.14);
}
.dqm-pro-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(201,169,98,.3);
}
.dqm-pro-tooltip.show {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 4px));
}

/* Pricing disabled features */
.dqm-price-disabled {
    color: rgba(148,163,184,.3) !important;
    text-decoration: line-through;
}
.dqm-price-desc {
    color:#8296a8;
    font-size: .82rem;
    margin: 0 0 16px;
}

/* Pricing trial & footer */
.dqm-price-trial-info {
    color:#8296a8;
    font-size: .68rem;
    margin: 10px 0 0;
    line-height: 1.4;
    text-align: center;
}
.dqm-price-footer {
    margin-top: 32px;
    text-align: center;
    padding: 20px 24px;
    background: rgba(201,169,98,.04);
    border: 1px solid rgba(201,169,98,.1);
    border-radius: 12px;
}
.dqm-price-footer p {
    color:#8296a8;
    font-size: .8rem;
    margin: 0;
    line-height: 1.5;
}
.dqm-price-footer strong {
    color: #17a05b;
}

/* === Partner Program Section === */
.dqm-partner-cta{padding:80px 5%;max-width:1200px;margin:0 auto}
.dqm-partner-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.dqm-partner-text h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:#fff;margin:8px 0 12px}
.dqm-partner-text p{color:#8296a8;font-size:.92rem;line-height:1.6;margin:0 0 20px}
.dqm-partner-perks{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.dqm-partner-perks span{background:rgba(201,169,98,.08);border:1px solid rgba(201,169,98,.15);color:#17a05b;font-size:.72rem;font-weight:600;padding:4px 12px;border-radius:8px}
.dqm-partner-card{background:rgba(255,255,255,0.82);border:1px solid rgba(201,169,98,.12);border-radius:16px;padding:28px;max-width:360px}
.dqm-partner-card-label{color:#8296a8;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.dqm-partner-card-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(14,32,51,0.09);color:#8296a8;font-size:.85rem}
@media(max-width:768px){
.dqm-partner-inner{grid-template-columns:1fr}
.dqm-partner-cta{padding:40px 4%}
.dqm-partner-card{max-width:100%}
}

/* === Sticky Partner Widget (mobile) === */
.dqm-sticky-partner{
    display:none;position:fixed;bottom:80px;right:16px;z-index:10001;
    width:52px;height:52px;
    background:transparent;border:none;
    text-decoration:none;
    align-items:center;justify-content:center;gap:2px;
    flex-direction:column;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.dqm-sticky-partner svg{
    width:34px !important;height:34px !important;
    filter:drop-shadow(0 2px 8px rgba(201,169,98,.5));
}
.dqm-sticky-partner span{
    color:#17a05b;font-size:.65rem;font-weight:800;
    letter-spacing:.03em;
    filter:drop-shadow(0 1px 4px rgba(201,169,98,.5));
}
@media(max-width:992px){
    .dqm-sticky-partner{display:flex}
}

/* === Newsletter Section === */
.dqm-newsletter{padding:60px 5%;max-width:700px;margin:0 auto;text-align:center}
.dqm-newsletter-inner{background:rgba(201,169,98,.04);border:1px solid rgba(201,169,98,.1);border-radius:20px;padding:40px 32px}
.dqm-newsletter-icon{font-size:2.5rem;margin-bottom:12px}
.dqm-newsletter h2{color:#fff;font-size:1.4rem;font-weight:800;margin:0 0 8px}
.dqm-newsletter p{color:#8296a8;font-size:.9rem;margin:0 0 20px;line-height:1.5}
.dqm-newsletter-form{display:flex;gap:8px;max-width:460px;margin:0 auto}
.dqm-newsletter-form input{flex:1;padding:14px 16px;background:rgba(14,32,51,0.06);border:1px solid rgba(14,32,51,0.13);border-radius:10px;color:#fff;font-size:.9rem;outline:none;font-family:inherit}
.dqm-newsletter-form input:focus{border-color:rgba(201,169,98,.3)}
.dqm-newsletter-form input::placeholder{color:#8296a8}
.dqm-newsletter-form button{padding:14px 24px;background:linear-gradient(135deg,#17a05b,#21b86c);color:#ffffff;border:none;border-radius:10px;font-weight:700;font-size:.88rem;cursor:pointer;white-space:nowrap;font-family:inherit;transition:all .2s}
.dqm-newsletter-form button:hover{box-shadow:0 4px 16px rgba(201,169,98,.3)}
.dqm-newsletter-hint{color:#8296a8;font-size:.7rem;margin-top:12px}
@media(max-width:600px){.dqm-newsletter-form{flex-direction:column}.dqm-newsletter-inner{padding:28px 20px}}

/* === Global Select/Dropdown Fix — dark theme === */
select,
.dqm-cabinet select,
.dqm-invoice-app select,
select.dqm-inv-i,
select.dqm-inv-input,
select.dqm-gen-input,
.dqm-pub-form-group select,
.dqm-pub-filters select,
.dqm-an-select {
    background: #f7f9fb !important;
    color: #fff !important;
    border: 1px solid rgba(14,32,51,0.15) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c9a962' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 32px !important;
    cursor: pointer !important;
}
select:focus,
.dqm-cabinet select:focus {
    border-color: rgba(201,169,98,.4) !important;
    outline: none !important;
}
select option,
.dqm-cabinet select option {
    background: #f7f9fb !important;
    color: #fff !important;
    padding: 8px !important;
}
/* Input fields global dark fix */
.dqm-cabinet input[type=text],
.dqm-cabinet input[type=email],
.dqm-cabinet input[type=number],
.dqm-cabinet input[type=tel],
.dqm-cabinet input[type=url],
.dqm-cabinet input[type=date],
.dqm-cabinet input[type=password],
.dqm-cabinet textarea {
    background: rgba(14,32,51,0.06) !important;
    color: #fff !important;
    border: 1px solid rgba(14,32,51,0.13) !important;
    border-radius: 8px !important;
}
.dqm-cabinet input:focus,
.dqm-cabinet textarea:focus,
.dqm-cabinet select:focus {
    border-color: rgba(201,169,98,.3) !important;
}
.dqm-cabinet input::placeholder,
.dqm-cabinet textarea::placeholder {
    color:#8296a8 !important;
}
/* Date input icon color */
.dqm-cabinet input[type=date]::-webkit-calendar-picker-indicator {
    filter: invert(0.7) !important;
}

/* Invoice generator selects */
.dqm-invoice-app select {
    background: #f7f9fb !important;
    color: #fff !important;
}
.dqm-invoice-app select option {
    background: #f7f9fb !important;
    color: #fff !important;
}
/* Landing page generator selects */
.dqm-landing select,
.dqm-landing select.dqm-gen-input {
    background: #f7f9fb !important;
    color: #fff !important;
}
.dqm-landing select option {
    background: #f7f9fb !important;
    color: #fff !important;
}
/* Modal selects */
.dqm-gen-modal select,
.dqm-gen-modal-overlay select {
    background: #f7f9fb !important;
    color: #fff !important;
}


/* ---------------------------------------------------------------
   Heller Stil - Nachtrag zur Palettenumstellung (Testkopie)
   Was die Farbtabelle nicht abdecken konnte, steht hier einmal sauber.
   --------------------------------------------------------------- */
body, html { background: #ffffff; color: #0e2033; }

/* Der Hero trug ein dunkles Foto mit Video darueber. Hell traegt die Schrift. */
.dqm-hero { background: linear-gradient(180deg,#f4f8f6 0%,#ffffff 64%) !important; }
.dqm-hero-video, .dqm-hero-overlay { display: none !important; }
.dqm-hero h1 { color: #0e2033; }
.dqm-hero p { color: #5c6f82; }

/* Verlaufstext -> eine Farbe, sonst ist die Schrift unsichtbar. */
.dqm-gradient-text, [class*="gradient-text"] {
  background: none !important;
  color: #17a05b !important;
  -webkit-text-fill-color: #17a05b !important;
  animation: none !important;
}

/* Karten: heller Grund, feiner Rand, weicher Schatten statt Glasflaeche. */
.dqm-card, .dqm-feature-card, .dqm-pricing-card, .dqm-stat-card, .dqm-box {
  background: #ffffff;
  border: 1px solid #e4eaef;
  box-shadow: 0 6px 18px rgba(14,32,51,.06);
  backdrop-filter: none;
}

/* Eingabefelder */
input, select, textarea { background:#fff; color:#0e2033; border:1px solid #e4eaef; }
input::placeholder, textarea::placeholder { color:#8296a8; }
input:focus, select:focus, textarea:focus { border-color:#17a05b; outline:none;
  box-shadow:0 0 0 3px rgba(23,160,91,.18); }

/* Schrift der Vorlage */
body { font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; }
h1,h2,h3 { letter-spacing:-.02em; }

/* ---------------------------------------------------------------
   Nachbesserung 2 - Stellen, die die Farbtabelle nicht sauber traf
   --------------------------------------------------------------- */

/* 1. Hauptknopf: gefuellt, nicht als Umriss.
      Eine spaetere Regel im Stylesheet hatte ihn auf transparent gesetzt -
      das war fuer die dunkle Oberflaeche gedacht und wirkt auf Hell unsichtbar. */
.dqm-btn-primary, .dqm-gen-btn, .dqm-price-btn, .dqm-topbar-btn,
.dqm-gc-generate, .dqm-seo-btn-primary, .dqm-sticky-cta-btn, .dqm-promo-btn,
#gen-create, #pub-save-qr, input[type="submit"], button[type="submit"] {
  background: #17a05b !important;
  color: #ffffff !important;
  border: 1px solid #17a05b !important;
  box-shadow: 0 8px 20px rgba(23,160,91,.24) !important;
}
.dqm-btn-primary:hover, .dqm-gen-btn:hover, .dqm-price-btn:hover,
#gen-create:hover, input[type="submit"]:hover, button[type="submit"]:hover {
  background: #0e8a4b !important; border-color: #0e8a4b !important; color: #fff !important;
}
/* Der zweite Knopf bleibt ruhig: weiss mit Rand. */
.dqm-btn-secondary, .dqm-btn-ghost, .dqm-hero .dqm-btn:not(.dqm-btn-primary) {
  background: #fff !important; color: #0e2033 !important; border: 1px solid #e4eaef !important;
  box-shadow: none !important;
}

/* 2. Werbeleiste oben: dunkel darf sie bleiben, aber dann mit heller Schrift. */
.dqm-promo-bar { background: #0e2033 !important; background-image: none !important; }
.dqm-promo-bar, .dqm-promo-bar * { color: #ffffff !important; }
.dqm-promo-bar strong, .dqm-promo-bar b { color: #7fe3ae !important; }
.dqm-promo-btn { background: #17a05b !important; color: #fff !important; }

/* 3. Abzeichen ueber der Ueberschrift: helle Pille statt dunkler Kachel. */
.dqm-hero-badge {
  background: #e8f6ee !important; color: #0e8a4b !important;
  border: 1px solid #bee6d1 !important;
}
.dqm-hero-badge * { color: #0e8a4b !important; }

/* 4. Schrift, die durch die Umstellung fast durchsichtig wurde.
      Ursache: helle Texte standen als rgba(255,255,255,…) da und wurden
      mit den Flaechen zusammen umgerechnet. */
[style*="rgba(14,32,51,0.18)"], [style*="rgba(14,32,51,.18)"] { color: #5c6f82 !important; }

/* 5. Fusszeile und Seitennavigation hell. */
.dqm-footer, .qrova-sitenav, .qrova-gbp-strip {
  background: #f7f9fb !important; border-top: 1px solid #e4eaef !important;
}
.dqm-footer, .dqm-footer *, .qrova-sitenav, .qrova-sitenav *,
.qrova-gbp-strip, .qrova-gbp-strip * { color: #5c6f82 !important; }
.dqm-footer a:hover, .qrova-sitenav a:hover { color: #17a05b !important; }
.dqm-footer h3, .dqm-footer h4, .qrova-sitenav h3 { color: #0e2033 !important; }

/* ---------------------------------------------------------------
   Nachbesserung 3 - Anmeldung und Registrierung
   Der Bereich war fuer dunklen Grund gebaut: helle Schrift, Umriss-Knoepfe,
   Glasflaechen. Auf Weiss braucht er volle Flaechen und dunkle Schrift.
   --------------------------------------------------------------- */
.dqm-auth-wrap, .dqm-auth, .dqm-login-box, .dqm-auth-card, .dqm-auth-panel {
  background: #ffffff !important;
  border: 1px solid #e4eaef !important;
  box-shadow: 0 18px 50px rgba(14,32,51,.10) !important;
  backdrop-filter: none !important;
  color: #0e2033 !important;
}
.dqm-auth-wrap *, .dqm-auth *, .dqm-login-box * { color: #0e2033; }
.dqm-auth-wrap label, .dqm-auth label, .dqm-login-box label {
  color: #5c6f82 !important; font-weight: 600 !important; letter-spacing: .04em;
}
.dqm-auth-wrap input, .dqm-auth input, .dqm-login-box input {
  background: #ffffff !important; color: #0e2033 !important;
  border: 1px solid #e4eaef !important; border-radius: 11px !important;
}
.dqm-auth-wrap input::placeholder, .dqm-login-box input::placeholder { color: #8296a8 !important; }

/* Reiter "Anmelden / Registrieren": der aktive gefuellt, der andere ruhig. */
.dqm-auth-tab, .dqm-tab-btn {
  background: #f7f9fb !important; color: #5c6f82 !important;
  border: 1px solid #e4eaef !important;
}
.dqm-auth-tab.active, .dqm-tab-btn.active, .dqm-auth-tab[aria-selected="true"] {
  background: #17a05b !important; color: #ffffff !important; border-color: #17a05b !important;
}
/* Der Knopf darunter ist die Hauptaktion - gefuellt, nicht als Umriss. */
.dqm-auth-wrap button, .dqm-auth-wrap .dqm-btn-primary,
.dqm-login-box button[type="submit"], .dqm-auth-submit {
  background: #17a05b !important; color: #ffffff !important;
  border: 1px solid #17a05b !important; box-shadow: 0 8px 20px rgba(23,160,91,.24) !important;
}
.dqm-auth-wrap a { color: #0e8a4b !important; }
/* Anmeldung ueber Google bleibt weiss mit Rand - so kennt man es. */
.dqm-google-btn, [class*="google"] button, button[class*="google"] {
  background: #ffffff !important; color: #0e2033 !important; border: 1px solid #e4eaef !important;
  box-shadow: none !important;
}

/* =====================================================================
   QROVA – neues Seitenbild (Testkopie neu.qrova.io)
   Ein Abschnitt, ein Gedanke, ein Blickfang. Viel Weissraum, ruhige Farben.
   Reihenfolge und Aufbau nach den Vorlagen vom 17.09.2026.
   ===================================================================== */
.q {
  --gruen:#17A05B; --gruen-d:#0E8A4B; --gruen-h:#E8F6EE; --gruen-r:#C7E8D6;
  --navy:#0E2033; --navy-2:#22364C; --grau:#5C6F82; --grau-h:#8296A8;
  --papier:#fff; --flaeche:#F7F9FB; --linie:#E4EAEF; --linie-z:#EFF3F6;
  --r-gross:22px; --r-karte:16px; --r-knopf:12px;
  --s-gross:0 24px 70px rgba(14,32,51,.10);
  --s-karte:0 10px 30px rgba(14,32,51,.07);
}
.q *{box-sizing:border-box}
.q-huelle{max-width:1280px;margin:0 auto;padding:0 24px}
.q-abschnitt{padding-block:104px;position:relative}
.q-abschnitt--flaeche{background:var(--flaeche)}

/* Nummer + Bezeichnung ueber der Ueberschrift */
.q-marke{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.q-marke b{display:grid;place-items:center;min-width:38px;height:28px;padding:0 9px;border-radius:8px;
  background:var(--flaeche);color:var(--grau-h);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.q-marke span{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--grau-h);font-weight:700}

.q h2{font-size:clamp(30px,3.4vw,46px);line-height:1.06;letter-spacing:-.028em;font-weight:800;margin:0 0 18px;color:var(--navy)}
.q h2 i{font-style:normal;color:var(--gruen)}
.q-lead{font-size:18.5px;line-height:1.55;color:var(--grau);margin:0 0 30px;max-width:56ch}

/* Haken-Liste */
.q-liste{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:14px}
.q-liste li{display:flex;align-items:flex-start;gap:13px;font-size:16.5px;font-weight:600;color:var(--navy-2)}
.q-liste svg{flex:none;width:24px;height:24px;margin-top:-1px}

/* Knoepfe */
.q-knopf{display:inline-flex;align-items:center;justify-content:center;gap:11px;height:58px;padding:0 30px;
  border-radius:var(--r-knopf);font-size:16.5px;font-weight:700;border:1px solid transparent;text-decoration:none}
.q-knopf--voll{background:var(--gruen);color:#fff;box-shadow:0 12px 26px rgba(23,160,91,.26)}
.q-knopf--voll:hover{background:var(--gruen-d);color:#fff}
.q-knopf--rand{background:#fff;color:var(--navy);border-color:var(--linie)}
.q-knopf--rand:hover{border-color:var(--gruen);color:var(--gruen)}
.q-knopfreihe{display:flex;gap:16px;flex-wrap:wrap;align-items:center}

/* Handschrift-Notiz */
.q-notiz{font-family:Caveat,"Segoe Script",cursive;font-size:24px;line-height:1.2;color:var(--navy-2);position:relative}
.q-notiz svg{display:block;margin-top:4px}

/* Zweispalter */
.q-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:center}
.q-zwei--eng{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}

/* Karten */
.q-karte{background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);padding:26px;box-shadow:var(--s-karte)}
.q-karte h3{margin:0 0 8px;font-size:17px;font-weight:700;color:var(--navy)}
.q-karte p{margin:0;font-size:14.5px;line-height:1.55;color:var(--grau)}
.q-ikon{width:46px;height:46px;border-radius:13px;background:var(--gruen-h);display:grid;place-items:center;margin-bottom:16px}
.q-ikon svg{width:23px;height:23px;stroke:var(--gruen-d);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.q-raster-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.q-raster-6{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}

/* Vertrauensleiste */
.q-vertrauen{display:grid;grid-template-columns:repeat(5,1fr);gap:0;text-align:center}
.q-vertrauen>div{padding:0 18px;border-left:1px solid var(--linie-z)}
.q-vertrauen>div:first-child{border-left:0}
.q-vertrauen .zahl{font-size:clamp(24px,2.5vw,32px);font-weight:800;letter-spacing:-.02em;color:var(--navy);display:block;margin-bottom:4px}
.q-vertrauen .bez{font-size:13.5px;color:var(--grau);line-height:1.35}
.q-vertrauen .sym{width:46px;height:46px;border-radius:13px;background:var(--gruen-h);display:grid;place-items:center;margin:0 auto 14px}
.q-vertrauen .sym svg{width:23px;height:23px;stroke:var(--gruen-d);fill:none;stroke-width:1.8}

/* Problem / Loesung */
.q-problem li{display:flex;gap:14px;margin-bottom:22px}
.q-problem .kreis{width:42px;height:42px;border-radius:12px;background:#FDEDED;display:grid;place-items:center;flex:none}
.q-problem .kreis svg{width:20px;height:20px;stroke:#C0524C;fill:none;stroke-width:1.9}
.q-problem b{display:block;font-size:16px;color:var(--navy);margin-bottom:3px}
.q-problem span{font-size:14.5px;line-height:1.5;color:var(--grau)}
.q-loesung{background:var(--gruen-h);border:1px solid var(--gruen-r);border-radius:var(--r-gross);padding:30px}

/* Branchen */
.q-branche{background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);overflow:hidden;
  box-shadow:var(--s-karte);display:flex;flex-direction:column}
.q-branche .bild{aspect-ratio:4/3;background:var(--flaeche);position:relative;display:grid;place-items:center}
.q-branche .bild .schild{width:62%;max-width:150px}
.q-branche .inhalt{padding:20px}
.q-branche h3{margin:12px 0 6px;font-size:16.5px;font-weight:700}
.q-branche p{margin:0;font-size:13.5px;line-height:1.5;color:var(--grau)}

/* Integrationen */
.q-integration{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--linie);
  border-radius:14px;padding:15px 18px;box-shadow:var(--s-karte)}
.q-integration .logo{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--flaeche)}
.q-integration b{display:block;font-size:15px;font-weight:700;color:var(--navy);line-height:1.2}
.q-integration span{display:block;font-size:12.5px;color:var(--grau-h);margin-top:2px}

@media (max-width:1100px){
  .q-zwei,.q-zwei--eng{grid-template-columns:1fr;gap:44px}
  .q-raster-6{grid-template-columns:repeat(3,1fr)}
  .q-vertrauen{grid-template-columns:repeat(3,1fr);row-gap:32px}
  .q-vertrauen>div:nth-child(4){border-left:0}
}
@media (max-width:760px){
  .q-abschnitt{padding-block:64px}
  .q-raster-3,.q-raster-6{grid-template-columns:1fr}
  .q-vertrauen{grid-template-columns:repeat(2,1fr)}
  .q-vertrauen>div{border-left:0}
  .q-knopf{width:100%}
  .q h2{font-size:clamp(26px,7vw,34px)}
}

/* ---------- Hero im neuen Aufbau + Produktszene ---------- */
.dqm-hero.q{padding:96px 0 44px !important;min-height:0 !important;display:block !important;
  background:linear-gradient(180deg,#F4F8F6 0%,#FFFFFF 62%) !important}
.dqm-hero-gitter{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:40px;align-items:start;
  max-width:1440px;margin:0 auto;padding:0 24px}
.dqm-hero .dqm-augenbraue{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#8296A8;font-weight:700;margin:0 0 22px}
.dqm-hero.q h1{font-size:clamp(42px,5vw,78px) !important;line-height:.99 !important;letter-spacing:-.033em !important;
  font-weight:800 !important;margin:0 0 28px !important;text-align:left !important;color:#0E2033 !important}
.dqm-hero.q .dqm-hero-sub{font-size:20px;line-height:1.5;color:#5C6F82;max-width:560px;margin:0 0 32px;text-align:left}
.dqm-hero.q .dqm-hero-actions{margin-bottom:26px;justify-content:flex-start}
.dqm-hero-trust{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:60px}
.dqm-hero-trust-item{display:flex;align-items:center;gap:8px;font-size:14.5px;color:#5C6F82;font-weight:500}
.dqm-hero-siegel{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.dqm-siegel{display:flex;align-items:center;gap:11px;font-size:13.5px;line-height:1.3;font-weight:600;color:#22364C}
.dqm-hero-notiz{transform:rotate(-7deg)}
.q-mitte{text-align:center;max-width:760px;margin:0 auto 52px}
.q-marke--mitte{justify-content:center}
.q-lead--mitte{margin-inline:auto}

.q-szene{position:relative;min-height:600px}
.q-dash{position:absolute;top:0;right:-40px;width:min(760px,100%);background:#fff;border:1px solid #E4EAEF;
  border-radius:22px;box-shadow:0 24px 70px rgba(14,32,51,.10);overflow:hidden;display:grid;grid-template-columns:172px 1fr}
.q-dash-hinweis{position:absolute;top:12px;right:16px;z-index:3;background:rgba(14,32,51,.72);color:#fff;font-size:10px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:7px}
.q-dash-seite{background:#FBFCFD;border-right:1px solid #EFF3F6;padding:16px 12px}
.q-dash-logo{margin:2px 0 16px 4px}
.q-dash-nav{display:flex;flex-direction:column;gap:2px}
.q-dash-nav a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;font-size:12.5px;font-weight:500;color:#5C6F82}
.q-dash-nav a.aktiv{background:#E8F6EE;color:#0E8A4B;font-weight:700}
.q-dash-nav i{width:14px;height:14px;flex:none;background:currentColor;opacity:.45;border-radius:3px}
.q-dash-haupt{padding:16px 18px 18px}
.q-dash-kopf{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:12px}
.q-dash-kopf h3{margin:0;font-size:17px;font-weight:800;color:#0E2033}
.q-dash-kopf p{margin:2px 0 0;font-size:11.5px;color:#8296A8}
.q-dash-datum{display:flex;align-items:center;gap:7px;border:1px solid #E4EAEF;border-radius:10px;padding:7px 11px;
  font-size:11.5px;font-weight:600;white-space:nowrap;color:#22364C}
.q-dash-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:13px}
.q-dash-kpi>div{border:1px solid #EFF3F6;border-radius:13px;padding:11px 12px}
.q-dash-kpi b{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:#0E2033}
.q-dash-kpi span{display:block;font-size:11px;color:#8296A8;margin:2px 0 6px}
.q-dash-kpi em{font-style:normal;font-size:11px;font-weight:700;color:#17A05B}
.q-dash-reiter{display:flex;gap:6px;margin-bottom:12px}
.q-dash-reiter span{font-size:11.5px;font-weight:600;color:#5C6F82;padding:6px 12px;border-radius:999px;background:#F3F6F8}
.q-dash-reiter span.an{background:#0E2033;color:#fff}
.q-dash-diagramme{display:grid;grid-template-columns:1fr 200px;gap:12px}
.q-dash-karte{border:1px solid #EFF3F6;border-radius:14px;padding:12px}
.q-dash-karte h4{margin:0 0 8px;font-size:12px;font-weight:700;color:#0E2033}
.q-dash-legende{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.q-dash-legende div{display:flex;align-items:center;gap:7px;font-size:11px;color:#5C6F82}
.q-dash-legende i{width:8px;height:8px;border-radius:50%}

.q-menue{position:absolute;left:8px;top:150px;width:192px;background:#1A1A18;border-radius:12px;padding:20px 16px 16px;
  box-shadow:0 14px 40px rgba(14,32,51,.14);transform:rotate(-2.2deg);color:#F3EFE6;z-index:4}
.q-menue p{font-family:Caveat,cursive;font-size:29px;line-height:1.05;margin:0 0 14px;color:#F3EFE6}
.q-menue .q-qr{background:#fff;padding:7px;border-radius:7px;width:94px}
.q-menue small{display:block;margin-top:11px;font-size:9px;letter-spacing:.22em;color:#B9B2A4}
.q-telefon{position:absolute;left:-14px;top:290px;width:182px;height:360px;background:#0B0E12;border-radius:30px;padding:9px;
  box-shadow:0 26px 60px rgba(14,32,51,.26);z-index:6}
.q-telefon-schirm{width:100%;height:100%;border-radius:23px;background:#15191F;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px}
.q-rahmen{position:relative;width:116px;height:116px}
.q-rahmen .q-qr{background:#fff;padding:8px;border-radius:5px}
.q-ecke{position:absolute;width:22px;height:22px;border:3px solid #17A05B}
.q-ecke.lo{left:-7px;top:-7px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.q-ecke.ro{right:-7px;top:-7px;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.q-ecke.lu{left:-7px;bottom:-7px;border-right:0;border-top:0;border-radius:0 0 0 6px}
.q-ecke.ru{right:-7px;bottom:-7px;border-left:0;border-top:0;border-radius:0 0 6px 0}
.q-oeffnen{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.95);color:#12202F;font-size:11px;
  font-weight:700;padding:7px 13px;border-radius:999px}
.q-rechnung{position:absolute;right:-16px;bottom:0;width:246px;background:#fff;border-radius:12px;padding:15px 17px;
  box-shadow:0 14px 40px rgba(14,32,51,.12);border:1px solid #EFF3F6;z-index:5}
.q-rechnung-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.q-rechnung-kopf b{font-size:16px;font-weight:800;color:#0E2033}
.q-bezahlt{background:#E8F6EE;color:#0E8A4B;font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:999px}
.q-rechnung-nr{font-size:11px;color:#8296A8;margin:-8px 0 11px}
.q-zeile{display:flex;justify-content:space-between;font-size:11.5px;padding:5px 0;color:#5C6F82}
.q-zeile b{color:#0E2033;font-weight:600}
.q-summe{border-top:1px solid #EFF3F6;margin-top:5px;padding-top:9px}
.q-summe b{font-size:14px;font-weight:800}

@media (max-width:1180px){.q-dash{right:-90px;width:720px}.q-rechnung,.dqm-hero-notiz{display:none}}
@media (max-width:920px){
  .dqm-hero-gitter{grid-template-columns:1fr;gap:48px}
  .q-szene{min-height:0;display:flex;flex-direction:column;gap:20px;align-items:center}
  .q-dash,.q-telefon{position:static}
  .q-dash{width:100%;max-width:640px;grid-template-columns:1fr}
  .q-dash-seite,.q-menue{display:none}
  .dqm-hero.q h1{font-size:clamp(34px,8vw,46px) !important}
  .dqm-hero-trust{gap:14px;margin-bottom:38px}
  .dqm-hero-siegel{gap:20px}
}
@media (max-width:560px){.q-dash-kpi{grid-template-columns:repeat(2,1fr)}.q-dash-diagramme{grid-template-columns:1fr}}


/* Der KI-Assistent stand mitten in der Produktszene. Er bleibt erreichbar,
   sitzt aber wie ueblich unten rechts - und ueberdeckt nichts mehr. */
.dqm-hologram{position:fixed !important;right:18px !important;bottom:56px !important;left:auto !important;
  top:auto !important;width:96px !important;height:auto !important;z-index:40 !important;transform:none !important}
.dqm-hologram-img{width:96px !important;height:auto !important;filter:drop-shadow(0 10px 24px rgba(14,32,51,.22))}
.dqm-hologram-bubble{right:0 !important;left:auto !important;bottom:104px !important;max-width:230px}
@media (max-width:920px){.dqm-hologram{width:72px !important}.dqm-hologram-img{width:72px !important}}


/* Kopfzeile liegt fest oben; der Hero braucht darunter Luft, sonst schiebt sich
   das Dashboard unter die Navigation. */
.dqm-hero.q{padding-top:150px !important}
.q-szene{margin-top:14px}
/* Der Assistent sass trotz fixer Position noch im Bild - er gehoert ganz nach unten. */
.dqm-hologram{bottom:64px !important;top:auto !important}
@media (max-width:920px){.dqm-hero.q{padding-top:110px !important}}


/* ---------- Kopfleiste: sichtbarer Grund statt Durchsicht ----------
   Vorher war sie vollstaendig transparent - beim Scrollen lief der Seiteninhalt
   darunter durch und die Navigation wurde unleserlich. */
.dqm-topbar{
  background:rgba(255,255,255,.92) !important;
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid #EFF3F6 !important;
  box-shadow:0 1px 0 rgba(14,32,51,.03), 0 8px 24px rgba(14,32,51,.04) !important;
}
.dqm-topbar a, .dqm-topbar span, .dqm-topbar button{color:#22364C}
.dqm-topbar a:hover{color:#17A05B}

/* Logo: QR nimmt die Textfarbe des Umfeldes an. Hell = dunkle Buchstaben,
   dunkel = weisse. Das goldene Zeichen und OVA bleiben unveraendert. */
.dqm-topbar-logo{color:#0E2033;display:inline-flex;align-items:center}
.dqm-footer-logo-link{color:#0E2033;display:inline-flex;align-items:center}
.dqm-footer.dunkel .dqm-footer-logo-link, .q-dunkel .dqm-topbar-logo{color:#ffffff}
.q-dash-logo{color:#0E2033}


/* Sicherheitsnetz: wo kein Umfeld eine Farbe vorgibt, bleibt QR dunkel. */
.qrova-marke, svg[aria-label="QROVA"]{color:#0E2033}
/* Auf dunklen Flaechen (Fusszeile, Menuekarte, Kabinett-Kopf) wird QR weiss. */
.q-dunkel svg[aria-label="QROVA"], .dqm-footer--dunkel svg[aria-label="QROVA"],
[data-grund="dunkel"] svg[aria-label="QROVA"]{color:#ffffff}


/* Der Assistent war 334 px hoch, weil die Sprechblase mitzaehlte, und belegte
   damit die halbe rechte Bildschirmseite. Die Blase schwebt jetzt darueber,
   statt den Block in die Hoehe zu ziehen. */
.dqm-hologram{height:auto !important;width:88px !important;display:block !important}
.dqm-hologram-img{width:88px !important;height:auto !important;display:block}
.dqm-hologram-bubble{position:absolute !important;bottom:calc(100% + 10px) !important;right:0 !important;
  left:auto !important;top:auto !important;width:max-content;max-width:240px}
@media (max-width:920px){.dqm-hologram,.dqm-hologram-img{width:66px !important}}


/* Die Sprechblase des Assistenten oeffnete sich von selbst und legte sich ueber das
   Dashboard. Sie erscheint jetzt erst bei Beruehrung - der Chat bleibt ueber das
   Symbol in der Kopfleiste und ueber die Figur selbst erreichbar. */
.dqm-hologram-bubble{opacity:0;visibility:hidden;transition:opacity .18s ease}
.dqm-hologram:hover .dqm-hologram-bubble,
.dqm-hologram:focus-within .dqm-hologram-bubble{opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){.dqm-hologram-bubble{transition:none}}


/* ---------- Bewegung der Wortmarke ----------
   Der Rahmen zeichnet sich einmal, die Module erscheinen nacheinander,
   das Gold schimmert ruhig weiter. Einmalig beim Laden, kein Dauerzappeln. */
.q-logo-rahmen{stroke-dasharray:224;stroke-dashoffset:0}
.q-logo--an .q-logo-rahmen{animation:q-zeichnen 1.1s ease forwards}
.q-logo--an .q-logo-modul{opacity:0;animation:q-auftauchen .34s ease forwards;
  animation-delay:calc(.75s + var(--n,1) * .07s)}
.q-logo--an .q-logo-gold{animation:q-schimmer 5s ease-in-out 2s infinite}
@keyframes q-zeichnen{from{stroke-dashoffset:224}to{stroke-dashoffset:0}}
@keyframes q-auftauchen{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@keyframes q-schimmer{0%,100%{fill:#E8A020}50%{fill:#F2C060}}
.q-logo-modul{transform-box:fill-box;transform-origin:center}

@media (prefers-reduced-motion:reduce){
  .q-logo--an .q-logo-rahmen,
  .q-logo--an .q-logo-modul,
  .q-logo--an .q-logo-gold{animation:none !important;opacity:1 !important;stroke-dashoffset:0 !important}
}


/* ---------- Klapplisten und Menues im hellen Stil ---------- */
.dqm-lang-list, .dqm-dropdown, .dqm-menu-drop, [class*="dropdown"]{
  background:#ffffff !important;
  border:1px solid #E4EAEF !important;
  border-radius:14px !important;
  box-shadow:0 14px 40px rgba(14,32,51,.10) !important;
  overflow:hidden;
}
.dqm-lang-option, .dqm-dropdown a, .dqm-dropdown button{
  color:#22364C !important; background:transparent !important; border:0 !important;
}
.dqm-lang-option:hover, .dqm-dropdown a:hover{background:#F7F9FB !important;color:#0E2033 !important}
.dqm-lang-option.active{background:#E8F6EE !important;color:#0E8A4B !important;font-weight:700}

/* =====================================================================
   QROVA - die uebrigen Abschnitte im neuen Bild
   ---------------------------------------------------------------------
   Nur Aussehen. Kein Text, keine Zahl, keine Verknuepfung wird angefasst -
   der Inhalt steht so bei Google und bleibt, wie er ist.
   Aufbau, Abstaende und Farben folgen den Vorlagen vom 17.09.2026.
   ===================================================================== */

/* ---------- Grundrhythmus aller Abschnitte ---------- */
.dqm-landing section{padding-block:96px;position:relative}
.dqm-landing section:nth-of-type(even){background:#F7F9FB}
.dqm-landing .dqm-hero{background:linear-gradient(180deg,#F4F8F6 0%,#FFFFFF 62%) !important}
.dqm-landing section > .dqm-section-header,
.dqm-landing section > h2,
.dqm-landing section > .dqm-generator-header,
.dqm-landing section > .dqm-integ-header{max-width:1280px;margin-inline:auto;padding-inline:24px}

.dqm-landing h2{font-size:clamp(30px,3.4vw,46px) !important;line-height:1.06 !important;
  letter-spacing:-.028em !important;font-weight:800 !important;color:#0E2033 !important;margin:0 0 16px !important}
.dqm-landing .dqm-section-sub{font-size:18.5px;line-height:1.55;color:#5C6F82;max-width:58ch;margin:0 auto 46px}
.dqm-landing h3{font-size:17.5px;font-weight:700;color:#0E2033;letter-spacing:-.01em}

/* ---------- Karten: heller Grund, feiner Rand, ruhiger Schatten ---------- */
.dqm-feature-card, .dqm-integ-card, .dqm-step, .dqm-case-card, .dqm-uc-card,
.dqm-price-card, .dqm-faq-item, .dqm-detail-card{
  background:#ffffff !important;
  border:1px solid #E4EAEF !important;
  border-radius:16px !important;
  box-shadow:0 8px 24px rgba(14,32,51,.06) !important;
  backdrop-filter:none !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dqm-feature-card:hover, .dqm-uc-card:hover, .dqm-case-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(14,32,51,.10) !important;
  border-color:#C7E8D6 !important;
}
@media (prefers-reduced-motion:reduce){
  .dqm-feature-card,.dqm-uc-card,.dqm-case-card{transition:none}
  .dqm-feature-card:hover,.dqm-uc-card:hover,.dqm-case-card:hover{transform:none}
}

/* Symbolkachel in Gruen - das Kennzeichen der Vorlagen */
.dqm-feature-icon, .dqm-step-icon, .dqm-uc-icon, .dqm-case-icon{
  width:48px !important;height:48px !important;border-radius:13px !important;
  background:#E8F6EE !important;display:grid !important;place-items:center !important;
  margin-bottom:16px !important;color:#0E8A4B !important;border:0 !important;
}
.dqm-feature-icon svg, .dqm-step-icon svg, .dqm-uc-icon svg{
  width:23px;height:23px;stroke:#0E8A4B;fill:none;stroke-width:1.9;
}

/* ---------- Funktionen ---------- */
.dqm-features-grid{display:grid !important;grid-template-columns:repeat(3,1fr) !important;
  gap:20px !important;max-width:1280px;margin-inline:auto;padding-inline:24px}
.dqm-feature-card{padding:26px !important}
.dqm-feature-card p{font-size:14.5px;line-height:1.55;color:#5C6F82;margin:0}

/* ---------- Drei Schritte ---------- */
.dqm-steps{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:26px !important;
  max-width:1280px;margin-inline:auto;padding-inline:24px;counter-reset:q-schritt}
.dqm-step{padding:30px !important;counter-increment:q-schritt;position:relative}
.dqm-step::before{content:counter(q-schritt,decimal-leading-zero);display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;background:#17A05B;color:#fff;font-weight:800;font-size:16px;
  margin-bottom:18px;font-variant-numeric:tabular-nums}
.dqm-step-number{display:none !important}

/* ---------- Integrationen ---------- */
.dqm-integ-card{padding:16px 18px !important;display:flex !important;align-items:center !important;
  gap:12px !important;min-width:190px}
.dqm-integ-card span{font-size:14.5px;font-weight:700;color:#0E2033}
.dqm-integ-marquee{mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
@media (prefers-reduced-motion:reduce){.dqm-integ-marquee *{animation:none !important}}

/* ---------- Branchen und Anwendungsfaelle ---------- */
.dqm-uc-grid, .dqm-cases-grid, .dqm-detailed-grid{display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;gap:20px !important;
  max-width:1280px;margin-inline:auto;padding-inline:24px}
.dqm-uc-card, .dqm-case-card, .dqm-detail-card{padding:26px !important}
.dqm-uc-card h3, .dqm-case-card h3{margin:0 0 7px}
.dqm-uc-card p, .dqm-case-card p{font-size:14px;line-height:1.55;color:#5C6F82;margin:0}

/* ---------- ROI-Rechner ---------- */
.dqm-roi-section{background:#F7F9FB !important}
.dqm-roi-wrap, .dqm-roi-grid{background:#fff !important;border:1px solid #E4EAEF !important;
  border-radius:22px !important;box-shadow:0 18px 50px rgba(14,32,51,.08) !important;padding:32px !important;
  max-width:1120px;margin-inline:auto}
.dqm-roi-result, .dqm-roi-output{background:#E8F6EE !important;border:1px solid #C7E8D6 !important;
  border-radius:16px !important;color:#0E2033 !important}
.dqm-roi-result *, .dqm-roi-output *{color:#0E2033 !important}
.dqm-roi-value{color:#0E8A4B !important;font-weight:800 !important}
input[type="range"]{accent-color:#17A05B}

/* ---------- Preise ---------- */
.dqm-pricing-grid{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:20px !important;
  max-width:1280px;margin-inline:auto;padding-inline:24px;align-items:start}
.dqm-price-card{padding:30px 26px !important;position:relative}
.dqm-price-card.featured, .dqm-price-card.popular, .dqm-price-card--pro{
  border-color:#17A05B !important;box-shadow:0 20px 50px rgba(23,160,91,.14) !important;
}
.dqm-price-badge{background:#17A05B !important;color:#fff !important;border-radius:999px !important;
  font-size:11px !important;font-weight:800 !important;letter-spacing:.06em;text-transform:uppercase;padding:5px 13px !important}
.dqm-price-amount, .dqm-price-value{font-size:40px !important;font-weight:800 !important;
  letter-spacing:-.03em !important;color:#0E2033 !important}
.dqm-price-card ul{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:10px}
.dqm-price-card li{display:flex;gap:10px;font-size:14px;line-height:1.45;color:#22364C;align-items:flex-start}

/* ---------- Vergleichstabelle ---------- */
.dqm-comparison table{background:#fff;border:1px solid #E4EAEF;border-radius:16px;overflow:hidden}
.dqm-comparison th{background:#FBFCFD !important;color:#8296A8 !important;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase}
.dqm-comparison td{border-color:#EFF3F6 !important}
.dqm-comparison .dqm-check, .dqm-check{color:#17A05B !important;font-weight:800}
.dqm-comparison .dqm-cross, .dqm-cross{color:#C3CED8 !important}

/* ---------- FAQ als ruhiges Akkordeon ---------- */
.dqm-faq-item{padding:0 !important;margin-bottom:12px;overflow:hidden}
.dqm-faq-question, .dqm-faq-item > button, .dqm-faq-item > summary{
  padding:20px 24px !important;font-size:16px !important;font-weight:700 !important;color:#0E2033 !important;
  background:transparent !important;border:0 !important;width:100%;text-align:left;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.dqm-faq-answer{padding:0 24px 20px !important;font-size:15px;line-height:1.6;color:#5C6F82 !important}
.dqm-faq-item[open], .dqm-faq-item.active{border-color:#C7E8D6 !important;background:#FCFEFD !important}

/* ---------- Schluss-Aufruf ---------- */
.dqm-cta{background:#0E2033 !important;border-radius:26px;max-width:1180px;margin:0 auto;
  padding:64px 48px !important}
.dqm-cta h2, .dqm-cta h3{color:#fff !important}
.dqm-cta p{color:#AEC0D2 !important}
.dqm-cta .dqm-btn-primary{background:#17A05B !important;border-color:#17A05B !important}

/* ---------- Fusszeile ---------- */
.dqm-footer{background:#F7F9FB !important;border-top:1px solid #E4EAEF !important;padding-block:56px 32px}
.dqm-footer h4, .dqm-footer h3{color:#0E2033 !important;font-size:12.5px !important;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700 !important}
.dqm-footer a{color:#5C6F82 !important}
.dqm-footer a:hover{color:#17A05B !important}

/* ---------- Kleinere Bildschirme ---------- */
@media (max-width:1100px){
  .dqm-features-grid, .dqm-uc-grid, .dqm-cases-grid, .dqm-detailed-grid{grid-template-columns:repeat(2,1fr) !important}
  .dqm-pricing-grid{grid-template-columns:repeat(2,1fr) !important}
  .dqm-steps{grid-template-columns:1fr !important}
}
@media (max-width:760px){
  .dqm-landing section{padding-block:58px}
  .dqm-features-grid, .dqm-uc-grid, .dqm-cases-grid, .dqm-detailed-grid,
  .dqm-pricing-grid{grid-template-columns:1fr !important}
  .dqm-cta{padding:44px 24px !important;border-radius:20px}
  .dqm-roi-wrap, .dqm-roi-grid{padding:22px !important}
}

/* =====================================================================
   Bloecke 03, 04, 06, 07 - Aufbau nach den Vorlagen
   ===================================================================== */

/* ---------- 04: Buehne mit dem grossen QR-Schild ---------- */
.q-feature-buehne{position:relative;min-height:430px;display:grid;place-items:center}
.q-schild{background:#fff;border:1px solid #E4EAEF;border-radius:20px;padding:26px 24px 20px;
  box-shadow:0 26px 60px rgba(14,32,51,.12);width:266px;text-align:center;position:relative;z-index:2}
.q-schild-qr{width:186px;margin:0 auto 16px;position:relative}
.q-schild-qr::before,.q-schild-qr::after{content:"";position:absolute;width:30px;height:30px;border:3px solid #17A05B}
.q-schild-qr::before{left:-10px;top:-10px;border-right:0;border-bottom:0;border-radius:7px 0 0 0}
.q-schild-qr::after{right:-10px;bottom:-10px;border-left:0;border-top:0;border-radius:0 0 7px 0}
.q-schild svg[aria-label="QROVA"]{margin:0 auto}
.q-schild small{display:block;margin-top:7px;font-size:11px;letter-spacing:.06em;color:#8296A8;font-weight:600}

.q-etikett{position:absolute;display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #E4EAEF;
  border-radius:14px;padding:12px 16px;box-shadow:0 12px 32px rgba(14,32,51,.10);z-index:3;white-space:nowrap}
.q-etikett i{width:34px;height:34px;border-radius:10px;background:#E8F6EE;display:grid;place-items:center;flex:none}
.q-etikett i svg{width:17px;height:17px}
.q-etikett b{display:block;font-size:14px;font-weight:700;color:#0E2033;line-height:1.2}
.q-etikett span{display:block;font-size:12px;color:#8296A8;margin-top:2px}
.q-etikett--1{left:-18px;top:16%}
.q-etikett--2{left:-34px;bottom:22%}
.q-etikett--3{right:-26px;top:22%}
.q-etikett--4{right:-16px;bottom:16%}
.q-notiz--oben{position:absolute;left:4%;top:-34px;transform:rotate(-4deg);z-index:4}

/* Sechs Karten in einer Reihe wie in der Vorlage */
.q-raster-6.dqm-features-grid{grid-template-columns:repeat(6,1fr) !important;gap:16px !important}
.q-raster-6 .q-karte{padding:22px 18px !important}
.q-raster-6 .q-karte h3{font-size:15.5px;margin:0 0 6px}
.q-raster-6 .q-karte p{font-size:13px;line-height:1.5}
.q-raster-6 .q-ikon{width:42px;height:42px;margin-bottom:14px}

/* ---------- 06: drei Schritte ---------- */
.q-schritte{align-items:stretch}
.q-schritt{display:flex;flex-direction:column;padding:28px !important}
.q-schritt-kopf{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.q-schritt-nr{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:#17A05B;color:#fff;font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;flex:none}
.q-schritt-bez{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8296A8;font-weight:700}
.q-schritt h3{margin:0 0 8px;font-size:20px}
.q-schritt p{margin:0 0 20px;font-size:14.5px;line-height:1.55;color:#5C6F82}
.q-schritt-bild{margin-top:auto;background:#F7F9FB;border:1px solid #EFF3F6;border-radius:14px;
  padding:20px;display:grid;place-items:center;min-height:170px}
.q-schritt-qr{width:130px}
.q-aufsteller{background:#1A1A18;border-radius:10px;padding:16px 14px 12px;width:136px;text-align:center;color:#F3EFE6;
  box-shadow:0 10px 26px rgba(14,32,51,.16)}
.q-aufsteller p{font-family:Caveat,cursive;font-size:22px;line-height:1.05;margin:0 0 10px;color:#F3EFE6}
.q-aufsteller .q-qr{background:#fff;padding:6px;border-radius:6px;width:84px;margin:0 auto}
.q-aufsteller small{display:block;margin-top:9px;font-size:8px;letter-spacing:.2em;color:#B9B2A4}
.q-mini-dash{background:#fff;border:1px solid #E4EAEF;border-radius:12px;padding:14px;width:100%;
  box-shadow:0 8px 22px rgba(14,32,51,.07)}
.q-mini-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;font-weight:700;color:#0E2033}
.q-mini-kopf em{font-style:normal;color:#17A05B;font-size:12px}

/* ---------- 07: Branchen ---------- */
.q-branchen-merkmale{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:center}
.q-branchen-merkmale>div{display:flex;flex-direction:column;align-items:center}
.q-branchen-merkmale .q-ikon{margin-bottom:10px}
.q-branchen-merkmale b{font-size:15px;color:#0E2033}
.q-branchen-merkmale span{font-size:12.5px;color:#8296A8;margin-top:2px}

.q-branchen{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.q-branche{text-decoration:none;color:inherit}
.q-branche .bild{aspect-ratio:4/3;background:linear-gradient(160deg,#F2F6F4,#E9EFEC);
  display:grid;place-items:center;border-bottom:1px solid #EFF3F6}
.q-schild-klein{background:#1A1A18;color:#F3EFE6;border-radius:9px;padding:14px 12px;width:118px;text-align:center;
  box-shadow:0 10px 26px rgba(14,32,51,.18)}
.q-schild-klein p{font-family:Caveat,cursive;font-size:17px;line-height:1.1;margin:0 0 9px;color:#F3EFE6}
.q-schild-klein .q-qr{background:#fff;padding:5px;border-radius:5px;width:74px;margin:0 auto}
.q-schild-klein--hell{background:#fff;color:#0E2033;border:1px solid #E4EAEF}
.q-schild-klein--hell p{color:#0E2033}
.q-branche .inhalt{padding:20px}
.q-branche .q-ikon{width:40px;height:40px;margin-bottom:12px}
.q-branche h3{margin:0 0 6px;font-size:16.5px}
.q-branche p{margin:0;font-size:13.5px;line-height:1.5;color:#5C6F82}

/* ---------- 03: Problem und Loesung ---------- */
.dqm-problem .q-loesung{align-self:stretch}
.dqm-problem .q-problem li:last-child{margin-bottom:0}

@media (max-width:1100px){
  .q-raster-6.dqm-features-grid{grid-template-columns:repeat(3,1fr) !important}
  .q-branchen{grid-template-columns:repeat(2,1fr)}
  .q-etikett--1,.q-etikett--2,.q-etikett--3,.q-etikett--4{position:static;margin:8px 6px;display:inline-flex}
  .q-feature-buehne{min-height:0}
  .q-notiz--oben{display:none}
}
@media (max-width:760px){
  .q-raster-6.dqm-features-grid{grid-template-columns:1fr !important}
  .q-branchen,.q-branchen-merkmale{grid-template-columns:1fr}
  .q-schritte{grid-template-columns:1fr}
}


/* Eine spaetere Regel im alten Stylesheet setzte diese Behaelter auf display:block
   und hebelte damit das Raster aus. Hier wird es festgeschrieben. */
.q-zwei, .q-zwei--eng{display:grid !important}
.q-raster-3{display:grid !important;grid-template-columns:repeat(3,1fr) !important}
.q-raster-6{display:grid !important}
.q-branchen{display:grid !important}
.q-vertrauen{display:grid !important}
.q-branchen-merkmale{display:grid !important}
.q-schritte{display:grid !important}
.q-liste{display:flex !important}
.q-knopfreihe{display:flex !important}
.q-marke{display:flex !important}
.q-problem{display:block !important}
.q-problem li{display:flex !important}
.q-feature-buehne{display:grid !important}


/* In den neuen Bloecken steht der Text links, wie in den Vorlagen.
   Nur die ausdruecklich mittigen Koepfe bleiben zentriert. */
.q .q-zwei, .q .q-zwei--eng, .q .q-zwei h2, .q .q-zwei--eng h2,
.q .q-zwei .q-lead, .q .q-zwei--eng .q-lead, .q .q-loesung,
.q-karte, .q-branche, .q-schritt{text-align:left !important}
.q-mitte, .q-mitte h2, .q-mitte .q-lead{text-align:center !important}
.q h2{margin-inline:0 !important}
.q-mitte h2{margin-inline:auto !important}


/* ---------- Block 01: Hero nach hero.png ---------- */
.dqm-hero.q{padding:132px 0 56px !important;background:#fff !important}
.dqm-hero-gitter{grid-template-columns:minmax(0,560px) minmax(0,1fr) !important;gap:24px !important;
  align-items:center !important;max-width:1520px !important}
.dqm-hero.q h1{font-size:clamp(40px,4.4vw,68px) !important;line-height:1.04 !important;margin:0 0 24px !important}
.dqm-hero.q .dqm-hero-sub{font-size:19.5px;line-height:1.52;max-width:500px;margin:0 0 30px}
.dqm-hero .dqm-augenbraue{font-size:13.5px;letter-spacing:.2em;margin:0 0 20px}
.dqm-hero.q .dqm-hero-actions{margin-bottom:22px;gap:14px}
.dqm-hero.q .q-knopf{height:56px;font-size:16px}
.dqm-hero-trust{gap:24px;margin-bottom:46px;font-weight:500}
.dqm-hero-siegel{gap:26px}
.dqm-siegel span{font-size:13.5px;line-height:1.25}
.dqm-hero-notiz{font-size:21px;transform:rotate(-4deg);margin-left:6px}

.dqm-hero-szene{position:static !important;min-height:0 !important;display:block !important}
.dqm-hero-szene picture, .dqm-hero-szene img{display:block;width:100%;height:auto;max-width:none}
.dqm-hero-szene img{border-radius:0}

/* ---------- Funktionsleiste unter dem Hero ---------- */
.dqm-funktionsleiste{border-top:1px solid #EFF3F6;background:#fff;padding-block:30px}
.q-funktionen{display:grid !important;grid-template-columns:repeat(5,1fr);gap:0}
.q-funktionen > div{display:flex;gap:14px;align-items:flex-start;padding:4px 26px;border-left:1px solid #EFF3F6}
.q-funktionen > div:first-child{border-left:0;padding-left:0}
.q-funktionen .sym{width:34px;height:34px;flex:none;display:grid;place-items:center}
.q-funktionen .sym svg{width:30px;height:30px}
.q-funktionen b{display:block;font-size:15px;font-weight:700;color:#0E2033;margin-bottom:4px}
.q-funktionen span{display:block;font-size:13.5px;line-height:1.45;color:#5C6F82}

@media (max-width:1200px){
  .dqm-hero-gitter{grid-template-columns:minmax(0,46%) minmax(0,1fr) !important}
  .q-funktionen{grid-template-columns:repeat(3,1fr);row-gap:24px}
  .q-funktionen > div:nth-child(4){border-left:0;padding-left:0}
}
@media (max-width:920px){
  .dqm-hero.q{padding:104px 0 36px !important}
  .dqm-hero-gitter{grid-template-columns:1fr !important;gap:34px !important}
  .dqm-hero.q h1{font-size:clamp(34px,8vw,46px) !important}
  .q-funktionen{grid-template-columns:1fr;row-gap:20px}
  .q-funktionen > div{border-left:0;padding:0}
  .dqm-hero-notiz{display:none}
}

/* =====================================================================
   Block 02 - Vertrauensleiste nach 2.png
   ===================================================================== */
.q-vertrauensblock{padding-block:88px 72px !important;background:#fff !important;position:relative;overflow:hidden}
/* Der weiche Bogen links oben aus der Vorlage */
.q-vertrauensblock::before{content:"";position:absolute;left:-14%;top:-30%;width:46%;height:150%;
  border-radius:50%;background:radial-gradient(circle at 60% 50%,#F0F7F3 0%,rgba(240,247,243,0) 68%);pointer-events:none}

.q-vb-kopf{position:relative;text-align:center;max-width:820px;margin:0 auto 52px}
.q-vb-augenbraue{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:#8296A8;font-weight:700;margin:0 0 20px}
.q-vertrauensblock h2{font-size:clamp(30px,3.6vw,48px) !important;line-height:1.1 !important;letter-spacing:-.028em;
  font-weight:800 !important;color:#0E2033 !important;margin:0 0 18px !important;text-align:center !important}
.q-vertrauensblock h2 i{font-style:normal;color:#17A05B}
.q-vb-lead{font-size:18px;line-height:1.55;color:#5C6F82;margin:0 auto;max-width:62ch;text-align:center}

.q-vb-notiz{position:absolute;right:-40px;top:-6px;font-family:Caveat,"Segoe Script",cursive;font-size:22px;
  line-height:1.22;color:#0E2033;transform:rotate(-7deg);text-align:left;display:block;width:190px}
.q-vb-notiz svg{display:block;margin:2px 0 0 52px}

/* ---------- Fuenf Kennzahlen ---------- */
.q-vb-zahlen{display:grid !important;grid-template-columns:repeat(5,1fr);gap:0;
  border-block:1px solid #EFF3F6;padding-block:38px;margin-bottom:44px;position:relative}
.q-vb-zahlen > div{text-align:center;padding:0 20px;border-left:1px solid #EFF3F6;
  display:flex;flex-direction:column;align-items:center}
.q-vb-zahlen > div:first-child{border-left:0}
.q-vb-zahlen .kachel{width:56px;height:56px;border-radius:15px;background:#EEF8F2;display:grid;place-items:center;margin-bottom:20px}
.q-vb-zahlen .kachel svg{width:28px;height:28px}
.q-vb-zahlen .kachel--flagge{background:transparent;padding:0}
.q-vb-zahlen .kachel--flagge svg{width:56px;height:56px}
.q-vb-zahlen .dqm-proof-number{font-size:clamp(26px,2.7vw,34px);font-weight:800;letter-spacing:-.025em;
  color:#0E2033;line-height:1.1;font-variant-numeric:tabular-nums}
.q-vb-zahlen .dqm-proof-label{font-size:15px;color:#5C6F82;margin-top:6px}

/* ---------- Kundenzeile ---------- */
.q-vb-kundenkopf{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12.5px;
  letter-spacing:.2em;text-transform:uppercase;color:#8296A8;font-weight:700;margin:0 0 30px;text-align:center}
.q-vb-logos{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.q-logo-wort{color:#A9B7C4;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  transition:color .18s ease}
.q-logo-wort:hover{color:#5C6F82}
.q-lw-skript{font-family:Caveat,cursive;font-size:27px;font-weight:600}
.q-lw-serif{font-family:Georgia,"Times New Roman",serif;font-size:19px;letter-spacing:.12em}
.q-lw-serif em{font-style:normal;font-size:12px;letter-spacing:.24em;display:block;text-align:center;margin-top:-2px}
.q-lw-versal{font-size:20px;font-weight:800;letter-spacing:.06em}
.q-lw-sans{font-size:23px;font-weight:700;letter-spacing:-.01em}
.q-lw-amt{font-size:15px;font-weight:600;line-height:1.15;text-align:left}
.q-lw-amt em{font-style:normal;display:block;font-size:12px;letter-spacing:.06em}
.q-lw-museum{font-size:14px;font-weight:600;line-height:1.2;text-align:left}
.q-lw-museum em{font-style:normal;display:block;font-size:17px;font-weight:700;letter-spacing:-.01em}

@media (max-width:1100px){
  .q-vb-notiz{display:none}
  .q-vb-zahlen{grid-template-columns:repeat(3,1fr);row-gap:34px}
  .q-vb-zahlen > div:nth-child(4){border-left:0}
  .q-vb-logos{justify-content:center;gap:30px}
}
@media (max-width:700px){
  .q-vertrauensblock{padding-block:56px 48px !important}
  .q-vb-zahlen{grid-template-columns:repeat(2,1fr);padding-block:28px}
  .q-vb-zahlen > div{border-left:0;padding:0}
  .q-vb-zahlen .kachel{width:46px;height:46px;margin-bottom:14px}
  .q-vb-logos{gap:22px}
  .q-logo-wort{font-size:15px}
  .q-lw-skript{font-size:21px}
  .q-lw-sans,.q-lw-versal{font-size:17px}
}


/* Block 02 - Feinschliff nach dem ersten Blick */
/* Die Zahlen standen gruen (Regel aus der alten Oberflaeche); in der Vorlage sind sie navy. */
.q-vb-zahlen .dqm-proof-number{color:#0E2033 !important}
.q-vb-zahlen .dqm-proof-label{color:#5C6F82 !important}

/* Die Notiz stand ueber der Ueberschrift - sie gehoert weiter nach rechts und oben. */
.q-vb-notiz{right:-150px;top:-18px;width:210px;font-size:21px}
.q-vb-notiz svg{margin-left:62px;height:74px}
@media (max-width:1400px){.q-vb-notiz{right:-60px}}
@media (max-width:1240px){.q-vb-notiz{display:none}}

/* Ueberschrift schmaler halten, damit sie der Notiz nicht begegnet. */
.q-vb-kopf{max-width:720px}

/* Made in Germany braucht zwei ruhige Zeilen. */
.q-vb-zahlen .dqm-proof-item:last-child .dqm-proof-number{font-size:clamp(20px,2vw,26px);line-height:1.18}


/* Die Zahlen sollen navy sein wie in der Vorlage. Eine spaetere Regel faerbte sie
   gruen - hier mit hoeherer Genauigkeit zurueckgeholt. */
section.q-vertrauensblock .q-vb-zahlen .dqm-proof-item b.dqm-proof-number,
section.q-vertrauensblock .q-vb-zahlen .dqm-proof-item .dqm-proof-number{
  color:#0E2033 !important; -webkit-text-fill-color:#0E2033 !important;
}
section.q-vertrauensblock .q-vb-zahlen .dqm-proof-item .dqm-proof-label{color:#5C6F82 !important}

/* =====================================================================
   Block 03 - Problem zu Loesung
   Zwei Textspalten oben, die Szene darunter (sie ragt nach oben zwischen
   die Spalten), unten der hellgruene Streifen mit drei Punkten und Knopf.
   ===================================================================== */
.q-problem-loesung{padding-block:92px 76px;background:#fff;position:relative;overflow:hidden}
.q-problem-loesung .q-huelle{position:relative}

.q-pl-spalten{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;align-items:start;position:relative;z-index:2}

.q-pl-augenbraue{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:#8296A8;
  font-weight:700;margin:0 0 20px}
.q-problem-loesung h2{font-size:clamp(28px,3.2vw,42px) !important;line-height:1.1 !important;
  letter-spacing:-.028em;font-weight:800 !important;color:#0E2033 !important;margin:0 0 18px !important;
  text-align:left !important}
.q-pl-grau{color:#8296A8}
.q-problem-loesung h2 i{font-style:normal;color:#17A05B}
.q-pl-text{font-size:17px;line-height:1.6;color:#5C6F82;margin:0 0 30px;max-width:44ch}

.q-pl-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px;max-width:46ch}
.q-pl-liste li{display:flex;gap:16px;align-items:flex-start}
.q-pl-kreis{width:44px;height:44px;border-radius:50%;background:#FDECEC;display:grid;place-items:center;flex:none}
.q-pl-kreis svg{width:21px;height:21px}
.q-pl-liste b{display:block;font-size:16px;font-weight:700;color:#0E2033;margin-bottom:5px}
.q-pl-liste span span{font-size:14.5px;line-height:1.5;color:#5C6F82;display:block}

.q-pl-notiz{font-family:Caveat,"Segoe Script",cursive;font-size:21px;line-height:1.2;display:block}
.q-pl-notiz--links{margin-top:34px;color:#3B5068;transform:rotate(-3deg)}
.q-pl-notiz--links svg{display:block;margin-top:2px}
.q-pl-notiz--rechts{color:#17A05B;transform:rotate(-5deg);position:absolute;right:-24px;top:-10px;
  width:180px;text-align:left}
.q-pl-notiz--rechts svg{display:block;margin:4px 0 0 46px}
.q-pl-rechts{position:relative;padding-right:150px}

/* Die Szene ragt nach oben und liegt hinter der rechten Textspalte */
.q-pl-bild{position:relative;z-index:1;margin:-120px 0 0 auto;width:calc(100% - 180px);max-width:1120px}
.q-pl-bild img{display:block;width:100%;height:auto}

/* Hellgruener Streifen unten */
.q-pl-streifen{position:relative;z-index:2;margin-top:28px;background:#EFF9F3;border:1px solid #D6EEE1;
  border-radius:20px;padding:24px 28px;display:grid;grid-template-columns:repeat(3,1fr) auto;
  gap:26px;align-items:center}
.q-pl-streifen > div{display:flex;gap:14px;align-items:flex-start}
.q-pl-sym{width:42px;height:42px;border-radius:12px;background:#fff;display:grid;place-items:center;flex:none;
  box-shadow:0 4px 12px rgba(14,32,51,.06)}
.q-pl-sym svg{width:21px;height:21px}
.q-pl-streifen b{display:block;font-size:15px;font-weight:700;color:#0E2033;margin-bottom:4px}
.q-pl-streifen span{display:block;font-size:13.5px;line-height:1.45;color:#5C6F82}
.q-pl-streifen .q-knopf{height:52px;white-space:nowrap}

@media (max-width:1200px){
  .q-pl-rechts{padding-right:0}
  .q-pl-notiz--rechts{position:static;width:auto;margin-top:22px;transform:rotate(-3deg)}
  .q-pl-notiz--rechts svg{display:none}
  .q-pl-bild{margin:26px 0 0;width:100%}
}
@media (max-width:900px){
  .q-problem-loesung{padding-block:58px 52px}
  .q-pl-spalten{grid-template-columns:1fr;gap:40px}
  .q-pl-streifen{grid-template-columns:1fr;gap:20px}
  .q-pl-streifen .q-knopf{width:100%}
  .q-pl-notiz--links svg{width:96px}
}

/* =====================================================================
   Block 04 - Produkt-Features
   ===================================================================== */
.q-features{padding-block:88px 84px;background:#fff}
.q-f-oben{display:grid !important;grid-template-columns:minmax(0,46%) minmax(0,1fr);
  gap:30px;align-items:center;margin-bottom:52px}

.q-features .q-marke{margin-bottom:24px}
.q-features h2{font-size:clamp(30px,3.5vw,46px) !important;line-height:1.08 !important;
  letter-spacing:-.03em;font-weight:800 !important;color:#0E2033 !important;margin:0 0 20px !important;
  text-align:left !important}
.q-features h2 i{font-style:normal;color:#17A05B}
.q-f-text{font-size:17.5px;line-height:1.6;color:#5C6F82;margin:0 0 32px;max-width:50ch}

.q-f-knoepfe{display:flex;gap:18px;align-items:stretch;flex-wrap:wrap;margin-bottom:26px}
.q-f-video{display:inline-flex;align-items:center;gap:14px;background:#fff;border:1px solid #E4EAEF;
  border-radius:12px;padding:0 24px;height:58px;box-shadow:0 6px 18px rgba(14,32,51,.05);text-decoration:none}
.q-f-video:hover{border-color:#17A05B}
.q-f-video b{display:block;font-size:16px;font-weight:700;color:#0E2033;line-height:1.2}
.q-f-video span span{display:block;font-size:13px;color:#8296A8;margin-top:2px}

.q-f-haken{display:flex;gap:30px;flex-wrap:wrap}
.q-f-haken span{display:flex;align-items:center;gap:9px;font-size:15px;color:#22364C;font-weight:500}
.q-f-haken svg{width:17px;height:17px;flex:none}

.q-f-bild img{display:block;width:100%;height:auto}

/* Sechs Karten in einer Reihe */
.q-f-karten{display:grid !important;grid-template-columns:repeat(6,1fr) !important;gap:16px !important}
.q-f-karte{background:#fff !important;border:1px solid #E4EAEF !important;border-radius:16px !important;
  padding:22px 20px !important;box-shadow:0 6px 18px rgba(14,32,51,.05) !important;text-align:left !important}
.q-f-karte .q-ikon{width:44px;height:44px;margin-bottom:16px}
.q-f-karte h3{margin:0 0 7px;font-size:15.5px;font-weight:700;color:#0E2033;line-height:1.25}
.q-f-karte p{margin:0;font-size:13.5px;line-height:1.5;color:#5C6F82}

@media (max-width:1200px){
  .q-f-karten{grid-template-columns:repeat(3,1fr) !important}
}
@media (max-width:900px){
  .q-features{padding-block:58px 56px}
  .q-f-oben{grid-template-columns:1fr;gap:34px}
  .q-f-karten{grid-template-columns:repeat(2,1fr) !important}
  .q-f-knoepfe .q-knopf,.q-f-video{width:100%;justify-content:center}
}
@media (max-width:560px){
  .q-f-karten{grid-template-columns:1fr !important}
  .q-f-haken{gap:14px}
}



/* ---- wiederhergestellt 18.09.: block05.css ---- */

/* =====================================================================
   Block 05 - Live Dashboard
   Links Text, rechts die Dashboard-Ansicht in leichter Perspektive.
   Die Ansicht wird nicht als Bild geladen, sondern gebaut - so stehen
   dort die echten Zahlen aus der Datenbank.
   ===================================================================== */
.q-dashboard{padding-block:92px 96px;background:#fff;position:relative;overflow:hidden}
.q-dashboard::before{content:"";position:absolute;right:-10%;top:-20%;width:56%;height:140%;
  border-radius:50%;background:radial-gradient(circle at 50% 50%,#F2F8F5 0%,rgba(242,248,245,0) 70%);pointer-events:none}

.q-db-gitter{display:grid !important;grid-template-columns:minmax(0,34%) minmax(0,1fr);
  gap:44px;align-items:center;position:relative}

.q-db-links{position:relative}
.q-dashboard h2{font-size:clamp(30px,3.5vw,48px) !important;line-height:1.06 !important;letter-spacing:-.03em;
  font-weight:800 !important;color:#0E2033 !important;margin:0 0 20px !important;text-align:left !important}
.q-dashboard h2 i{font-style:normal;color:#17A05B}
.q-db-text{font-size:17.5px;line-height:1.6;color:#5C6F82;margin:0 0 30px;max-width:40ch}

.q-db-haken{list-style:none;margin:0 0 34px;padding:0;display:flex;flex-direction:column;gap:16px}
.q-db-haken li{display:flex;align-items:center;gap:14px;font-size:17px;font-weight:600;color:#0E2033}
.q-db-haken-kreis{width:26px;height:26px;border-radius:50%;background:#17A05B;display:grid;place-items:center;flex:none}
.q-db-haken-kreis svg{width:15px;height:15px}

.q-db-knopf{height:62px;font-size:17px}
.q-db-fein{margin:20px 0 0;font-size:14px;color:#8296A8}
.q-db-fein span{margin:0 10px;color:#C9D4DD}

/* Schwebende Karte */
.q-db-schwebe{margin-top:44px;background:#fff;border:1px solid #E9EEF2;border-radius:20px;padding:22px 24px 24px;
  box-shadow:0 22px 48px rgba(14,32,51,.12);max-width:250px;position:relative;z-index:3}
.q-db-schwebe-ikon{width:46px;height:46px;border-radius:13px;background:#EEF8F2;display:grid;place-items:center;margin-bottom:18px}
.q-db-schwebe-ikon svg{width:23px;height:23px}
.q-db-schwebe b{display:block;font-size:17px;font-weight:600;color:#3B5068;line-height:1.35;margin-bottom:14px}
.q-db-schwebe strong{display:block;font-size:38px;font-weight:800;letter-spacing:-.03em;color:#17A05B;line-height:1;
  font-variant-numeric:tabular-nums}
.q-db-schwebe-fuss{display:block;margin-top:8px;font-size:14px;line-height:1.4;color:#8296A8}

.q-db-notiz{position:absolute;left:265px;bottom:6px;font-family:Caveat,"Segoe Script",cursive;font-size:21px;
  line-height:1.2;color:#0E2033;transform:rotate(-6deg);width:210px;display:block}
.q-db-notiz svg{display:block;margin-top:2px}

/* ---------- Das Fenster ---------- */
.q-db-rechts{position:relative;perspective:2000px}
.q-db-fenster{display:grid !important;grid-template-columns:170px minmax(0,1fr);
  background:#fff;border:1px solid #E9EEF2;border-radius:18px;overflow:hidden;
  box-shadow:0 34px 80px rgba(14,32,51,.16);transform:rotateY(-7deg) rotateX(1.5deg);transform-origin:left center;
  font-size:12px;line-height:1.35;color:#0E2033}

.q-db-seite{background:#FBFCFD;border-right:1px solid #EFF3F6;padding:20px 14px}
.q-db-logo{display:block;margin:0 0 22px 8px;color:#0E2033}
.q-db-logo svg{display:block;height:22px;width:auto}
.q-db-nav{display:flex;flex-direction:column;gap:3px}
.q-db-nav span{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;
  font-size:12.5px;font-weight:500;color:#5C6F82}
.q-db-nav span.ist-aktiv{background:#EAF7F0;color:#0E8A4B;font-weight:700}
.q-db-nav svg{width:16px;height:16px;flex:none;fill:none}
.q-db-nav span.ist-aktiv svg{fill:currentColor}

.q-db-inhalt{padding:16px 18px 20px;min-width:0}
.q-db-kopfleiste{display:flex;align-items:center;gap:12px;justify-content:flex-end;margin-bottom:16px}
.q-db-live{margin-right:auto;display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;
  color:#0E8A4B;background:#EAF7F0;border-radius:99px;padding:5px 11px}
.q-db-live i{width:6px;height:6px;border-radius:50%;background:#17A05B;display:block}
.q-db-glocke svg{width:17px;height:17px;display:block}
.q-db-konto{display:flex;align-items:center;gap:9px}
.q-db-avatar{width:30px;height:30px;border-radius:50%;background:#EAF7F0;display:grid;place-items:center;flex:none}
.q-db-avatar svg{width:17px;height:17px}
.q-db-konto b{display:block;font-size:12px;font-weight:700;color:#0E2033;line-height:1.2}
.q-db-konto em{display:block;font-style:normal;font-size:10.5px;color:#8296A8}

.q-db-gruss{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.q-db-gruss b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;color:#0E2033;margin-bottom:4px}
.q-db-gruss span{font-size:12px;color:#8296A8}
.q-db-zeitraum{display:inline-flex !important;align-items:center;gap:8px;border:1px solid #E9EEF2;border-radius:10px;
  padding:8px 12px;font-size:11.5px;font-weight:600;color:#3B5068 !important;white-space:nowrap;flex:none}
.q-db-zeitraum svg{width:14px;height:14px}

.q-db-kennzahlen{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:10px;margin-bottom:12px}
.q-db-kennzahlen > div{border:1px solid #EFF3F6;border-radius:13px;padding:13px 14px 14px;background:#fff}
.q-db-kz-ikon{display:grid;place-items:center;width:26px;height:26px;margin-bottom:12px}
.q-db-kz-ikon svg{width:21px;height:21px}
.q-db-kennzahlen b{display:block;font-size:23px;font-weight:800;letter-spacing:-.03em;color:#0E2033;line-height:1.05;
  font-variant-numeric:tabular-nums}
.q-db-kennzahlen > div > span:last-child{display:block;margin-top:4px;font-size:11.5px;color:#8296A8}

.q-db-unten{display:grid !important;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) !important;gap:10px}
.q-db-karte{border:1px solid #EFF3F6;border-radius:13px;padding:14px 15px;background:#fff;min-width:0}
.q-db-kartentitel{font-size:13px;font-weight:800;color:#0E2033;letter-spacing:-.01em}
.q-db-kartenkopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.q-db-kartenkopf > span{font-size:11px;font-weight:600;color:#17A05B;white-space:nowrap}

/* Verlauf */
.q-db-reiter{display:flex;align-items:center;gap:4px;margin-bottom:12px}
.q-db-reiter > span{font-size:11.5px;font-weight:600;color:#8296A8;padding:5px 9px;border-radius:8px}
.q-db-reiter > span.ist-aktiv{color:#0E2033;font-weight:800;box-shadow:inset 0 -2px 0 #17A05B;border-radius:0}
.q-db-wahl{margin-left:auto;border:1px solid #E9EEF2;border-radius:8px;padding:5px 10px !important;color:#3B5068 !important}
.q-db-diagramm{position:relative;display:grid !important;grid-template-columns:28px minmax(0,1fr);height:112px}
.q-db-achse{display:flex;flex-direction:column;justify-content:space-between;font-size:9.5px;color:#A9B7C4;
  text-align:right;padding-right:6px;font-variant-numeric:tabular-nums}
.q-db-svg{width:100%;height:112px;display:block;border-left:1px solid #F2F5F8;border-bottom:1px solid #F2F5F8}
.q-db-spitze{position:absolute;transform:translate(-50%,-120%);background:#fff;border:1px solid #E9EEF2;border-radius:9px;
  padding:6px 9px;box-shadow:0 6px 16px rgba(14,32,51,.1);white-space:nowrap;pointer-events:none;margin-left:28px}
.q-db-spitze b{display:block;font-size:11.5px;font-weight:800;color:#0E2033}
.q-db-spitze em{display:block;font-style:normal;font-size:10px;color:#8296A8}
.q-db-tage{display:flex;justify-content:space-between;margin:7px 0 0 28px;font-size:9.5px;color:#A9B7C4}

/* Geraete */
.q-db-geraete{display:flex !important;flex-direction:column;align-items:center}
.q-db-geraete .q-db-kartentitel{align-self:flex-start;margin-bottom:8px}
.q-db-ring{width:104px;margin:2px 0 12px}
.q-db-ring svg{width:100%;height:auto;display:block}
.q-db-legende{list-style:none;margin:0;padding:0;align-self:stretch;display:flex;flex-direction:column;gap:7px}
.q-db-legende li{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#5C6F82}
.q-db-legende i{width:9px;height:9px;border-radius:50%;flex:none}
.q-db-legende b{font-weight:800;color:#0E2033;font-variant-numeric:tabular-nums}

/* Arten */
.q-db-arten table{width:100%;border-collapse:collapse;font-size:11.5px}
.q-db-arten th{text-align:left;font-weight:600;color:#A9B7C4;font-size:10px;padding:0 0 7px;border-bottom:1px solid #F2F5F8}
.q-db-arten th:not(:first-child),.q-db-arten td:not(:first-child){text-align:right}
.q-db-arten td{padding:9px 0;border-bottom:1px solid #F7F9FB;color:#5C6F82}
.q-db-arten tr:last-child td{border-bottom:0}
.q-db-arten td:first-child{color:#0E2033;font-weight:600}
.q-db-arten td b{font-weight:800;color:#0E2033;font-variant-numeric:tabular-nums}
.q-db-punkt{display:inline-block;width:18px;height:18px;border-radius:6px;background:#EAF7F0;margin-right:8px;
  vertical-align:-4px}

/* Standorte */
.q-db-orte ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.q-db-orte li{display:flex;align-items:center;gap:9px;font-size:11.5px}
.q-db-flagge{width:17px;height:12px;border-radius:2px;overflow:hidden;display:flex;flex-direction:column;flex:none;
  box-shadow:0 0 0 1px rgba(14,32,51,.07)}
.q-db-flagge i{flex:1}
.q-db-ortname{color:#3B5068;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-db-orte b{margin-left:auto;font-weight:800;color:#0E2033;font-variant-numeric:tabular-nums}

@media (max-width:1240px){
  .q-db-gitter{grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:32px}
  .q-db-fenster{transform:none}
  .q-db-notiz{display:none}
}
@media (max-width:980px){
  .q-dashboard{padding-block:58px 60px}
  .q-db-gitter{grid-template-columns:1fr;gap:38px}
  .q-db-schwebe{max-width:none;margin-top:32px}
  .q-db-fenster{grid-template-columns:1fr}
  .q-db-seite{display:none}
  .q-db-unten{grid-template-columns:1fr !important}
  .q-db-knopf{width:100%;justify-content:center}
}
@media (max-width:620px){
  .q-db-kennzahlen{grid-template-columns:repeat(2,1fr) !important}
  .q-db-kopfleiste .q-db-konto em{display:none}
  .q-db-gruss{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .q-db-fenster{transform:none}
}


/* ---- wiederhergestellt 18.09.: block05c.css ---- */

/* =====================================================================
   Block 05 - zweite Fassung: Trendabzeichen, Funkenkurven, Miniaturen,
   Zeilenpfeile, Europakarte, Auswahlpfeile.
   ===================================================================== */
.q-db-kennzahlen > div{display:flex !important;flex-direction:column;padding:13px 13px 12px}
.q-db-kz-name{display:block;margin-top:4px;font-size:11.5px;color:#8296A8}
.q-db-kz-fuss{display:flex !important;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:11px}
.q-db-trend{display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:11px;font-weight:800;
  color:#0E8A4B;white-space:nowrap}
.q-db-trend svg{width:9px;height:9px;flex:none}
.q-db-trend.ist-minus{color:#C0524C}
.q-db-funke{width:56px;height:26px;flex:none;display:block}

/* Auswahl- und Aufklapp-Pfeile wie in der Vorlage */
.q-db-chevron{display:inline-flex;align-items:center;margin-left:auto;padding-left:6px;font-style:normal}
.q-db-chevron svg{width:12px;height:12px;display:block}
.q-db-nav span .q-db-chevron{opacity:.55}
.q-db-zeitraum .q-db-chevron,.q-db-wahl .q-db-chevron{margin-left:4px;padding-left:0}
.q-db-konto .q-db-chevron{margin-left:2px;padding-left:0}

/* Miniaturen und Zeilenpfeile in der Tabelle */
.q-db-mini{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;background:#F2F5F8;
  margin-right:8px;vertical-align:-5px;padding:2px;overflow:hidden}
.q-db-mini svg{width:100%;height:100%;display:block}
.q-db-arten td:last-child{width:14px;padding-left:6px}
.q-db-zeilenpfeil svg{width:13px;height:13px;display:block}

/* Standorte mit Karte dahinter */
.q-db-ortegitter{position:relative}
.q-db-europa{position:absolute;right:-6px;top:-4px;width:96px;height:auto;opacity:.85;pointer-events:none}
.q-db-orte ul{position:relative;z-index:1}

@media (max-width:620px){
  .q-db-funke{width:44px}
  .q-db-europa{display:none}
}


/* ---- wiederhergestellt 18.09.: block05-mobil.css ---- */

/* =====================================================================
   Block 05 - Telefon (bis 700 px)
   Eigene Komposition, kein verkleinerter Schreibtisch-Entwurf:
   Ueberschrift, kurze Beschreibung, Dashboard, Schaltflaeche.
   Reihenfolge wird ueber display:contents + order gesetzt, damit die
   Schaltflaeche unter das Dashboard rutscht.
   ===================================================================== */
@media (max-width:700px){

  .q-dashboard{padding-block:48px 52px !important;background:#fff !important}
  .q-dashboard::before{display:none}
  .q-dashboard .q-huelle{padding-inline:20px;max-width:none}

  .q-db-gitter{display:flex !important;flex-direction:column;gap:0;align-items:stretch}
  .q-db-links{display:contents}

  /* Was auf dem Telefon nicht in die Komposition gehoert */
  .q-dashboard .q-marke,
  .q-db-text:not(.q-db-text--mobil),
  .q-db-haken,
  .q-db-fein,
  .q-db-schwebe,
  .q-db-notiz,
  .q-db-szene,
  .q-db-geraete{display:none !important}

  .q-db-text--mobil{display:block !important}

  /* Reihenfolge */
  .q-dashboard h2{order:1}
  .q-db-text--mobil{order:2}
  .q-db-rechts{order:3}
  .q-db-knopf{order:4}

  /* ---------- Ueberschrift ---------- */
  .q-dashboard h2{font-size:34px !important;line-height:1.04 !important;letter-spacing:-.032em !important;
    font-weight:800 !important;color:#0E2033 !important;margin:0 0 12px !important;text-align:left !important;
    text-wrap:balance}
  .q-db-zeile2,.q-dashboard h2 i{color:#17A05B !important;font-style:normal}

  /* ---------- Beschreibung ---------- */
  .q-db-text--mobil{font-size:16.5px;line-height:1.5;color:#5C6F82;margin:0 0 26px;max-width:none}

  /* ---------- Dashboard ---------- */
  .q-db-rechts{margin:0 0 26px;perspective:none}
  .q-db-fenster{grid-template-columns:1fr !important;border-radius:22px;transform:none;
    box-shadow:0 10px 28px rgba(14,32,51,.10);border-color:#E9EEF2}
  .q-db-inhalt{padding:14px 14px 16px}

  .q-db-kopfleiste{margin-bottom:12px;gap:8px}
  .q-db-live{font-size:10px;padding:4px 9px}
  .q-db-glocke{display:none}
  .q-db-konto b{font-size:11px}
  .q-db-konto em{display:none}
  .q-db-avatar{width:26px;height:26px}

  .q-db-gruss{flex-direction:row;align-items:center;gap:10px;margin-bottom:12px}
  .q-db-gruss b{font-size:14.5px;margin-bottom:2px}
  .q-db-gruss > div > span{font-size:11px}
  .q-db-zeitraum{padding:6px 9px;font-size:10px}
  .q-db-zeitraum svg{width:12px;height:12px}

  /* Vier Kennzahlen als 2x2 */
  .q-db-kennzahlen{grid-template-columns:repeat(2,1fr) !important;gap:8px;margin-bottom:8px}
  .q-db-kennzahlen > div{padding:11px 11px 10px}
  .q-db-kz-ikon{width:22px;height:22px;margin-bottom:8px}
  .q-db-kz-ikon svg{width:18px;height:18px}
  .q-db-kennzahlen b{font-size:20px}
  .q-db-kz-name{font-size:10.5px}
  .q-db-kz-fuss{margin-top:8px}
  .q-db-trend{font-size:10px}
  .q-db-funke{width:42px;height:22px}

  .q-db-unten{grid-template-columns:1fr !important;gap:8px}
  .q-db-karte{padding:12px 12px 13px;border-radius:12px}

  /* Verlaufskurve */
  .q-db-reiter{margin-bottom:10px}
  .q-db-reiter > span{font-size:10.5px !important;padding:3px 5px !important}
  .q-db-wahl{font-size:9.5px !important;padding:4px 6px !important}
  .q-db-diagramm{height:96px;margin-top:8px}
  .q-db-svg{height:96px}
  .q-db-spitze{padding:5px 7px}
  .q-db-spitze b{font-size:10.5px}
  .q-db-spitze em{font-size:9px}
  .q-db-tage{font-size:9px}

  /* Standorte wird auf dem Telefon zu "Top Laender" */
  .q-db-orte .q-db-kartentitel{font-size:12.5px}
  .q-db-orte .q-db-kartentitel{font-size:0}
  .q-db-nur-mobil{font-style:normal;font-size:12.5px;display:inline}
  .q-db-orte > .q-db-ortegitter > ul:first-of-type{display:none}
  .q-db-laenderliste{display:flex !important;flex-direction:column;gap:9px;list-style:none;margin:0;padding:0;
    position:relative;z-index:1}
  .q-db-laenderliste li{display:flex;align-items:center;gap:9px;font-size:12px}
  .q-db-laenderliste b{margin-left:auto;font-weight:800;color:#0E2033;font-variant-numeric:tabular-nums}
  .q-db-europa{display:none}

  /* QR-Code-Arten bleibt als Beleg fuer die QR-Aktivitaet */
  .q-db-arten table{font-size:11px}
  .q-db-mini{width:18px;height:18px;margin-right:6px}

  /* ---------- Schaltflaeche ---------- */
  .q-db-knopf{width:100%;justify-content:center;height:52px;font-size:16px;border-radius:13px;margin:0}
}

/* Auf grossen Schirmen bleibt alles wie gehabt */
.q-db-text--mobil,.q-db-laenderliste,.q-db-nur-mobil{display:none}


/* ---- wiederhergestellt 18.09.: block05-mobil2.css ---- */

/* =====================================================================
   Block 05 - Telefon, Feinschliff
   Seitenmass auf 20 px gebracht und die Vorschau kompakter gesetzt:
   Kennzahlen 2x2, darunter der Verlauf ueber die volle Breite und
   nebeneinander QR-Code-Arten und Top Laender.
   ===================================================================== */
@media (max-width:700px){

  /* Nur ein Seitenmass, nicht Sektion plus Huelle */
  .q-dashboard{padding-inline:0 !important}
  .q-dashboard .q-huelle{padding-inline:20px !important}

  /* Begruessung einzeilig halten */
  .q-db-gruss{align-items:center;gap:8px;margin-bottom:10px}
  .q-db-gruss > div > span{display:none}
  .q-db-gruss b{margin-bottom:0}

  /* Kennzahlen kompakter */
  .q-db-kennzahlen > div{padding:10px 10px 9px}
  .q-db-kz-ikon{width:20px;height:20px;margin-bottom:6px}
  .q-db-kz-ikon svg{width:17px;height:17px}
  .q-db-kennzahlen b{font-size:19px}
  .q-db-kz-name{font-size:10px;margin-top:3px}
  .q-db-kz-fuss{margin-top:7px}
  .q-db-funke{width:38px;height:20px}

  /* Untere Reihe: Verlauf breit, darunter zwei schmale Karten */
  .q-db-unten{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px}
  .q-db-verlauf{grid-column:1 / -1}
  .q-db-karte{padding:11px 11px 12px}
  .q-db-kartenkopf{margin-bottom:8px}
  .q-db-kartenkopf > span{display:none}

  /* QR-Code-Arten: nur Art und Scans, das passt in die halbe Breite */
  .q-db-arten table{font-size:10px}
  .q-db-arten th{font-size:9px;padding-bottom:5px}
  .q-db-arten td{padding:7px 0}
  .q-db-arten th:nth-child(2),.q-db-arten td:nth-child(2),
  .q-db-arten th:nth-child(4),.q-db-arten td:nth-child(4){display:none}
  .q-db-mini{width:16px;height:16px;margin-right:5px;vertical-align:-4px}

  /* Top Laender */
  .q-db-laenderliste li{font-size:11px;gap:7px}
  .q-db-flagge{width:15px;height:11px}

  .q-db-inhalt{padding:12px 12px 14px}
}


/* ---- wiederhergestellt 18.09.: block06.css ---- */

/* =====================================================================
   Block 06 - So einfach geht's
   Drei Karten nebeneinander, dazwischen die gruenen Pfeile.
   Die Reihe braucht mehr Breite als der uebrige Inhalt, sonst wird die
   Eingabemaske in Karte 01 unleserlich klein.
   ===================================================================== */
.q-schritte-block{padding-block:88px 92px;background:linear-gradient(180deg,#FBFCFD 0%,#fff 46%);position:relative;overflow:hidden}
.q-schritte-block .q-huelle{max-width:1400px;position:relative}

.q-sb-kopf{text-align:center;max-width:760px;margin:0 auto 46px;position:relative}
.q-schritte-block h2{font-size:clamp(30px,3.6vw,48px) !important;line-height:1.08 !important;letter-spacing:-.03em;
  font-weight:800 !important;color:#0E2033 !important;margin:0 0 14px !important;text-align:center !important}
.q-schritte-block h2 i{font-style:normal;color:#17A05B}
.q-sb-lead{font-size:18px;line-height:1.5;color:#5C6F82;margin:0;text-align:center}
.q-sb-notiz{position:absolute;right:-250px;top:-38px;width:210px;font-family:Caveat,"Segoe Script",cursive;
  font-size:22px;line-height:1.2;color:#17A05B;transform:rotate(-7deg);text-align:left;display:block}
.q-sb-notiz svg{display:block;margin:2px 0 0 96px}

/* ---------- Die Reihe ---------- */
.q-sb-reihe{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:26px;
  align-items:stretch;position:relative}
.q-sb-karte{background:#fff;border:1px solid #EFF3F6;border-radius:22px;padding:26px 26px 0;
  box-shadow:0 10px 30px rgba(14,32,51,.05);display:flex !important;flex-direction:column;overflow:hidden;min-width:0}

.q-sb-kartenkopf{display:flex;gap:18px;align-items:flex-start;margin-bottom:22px}
.q-sb-nr{width:52px;height:52px;border-radius:50%;background:#17A05B;color:#fff;display:grid;place-items:center;
  font-size:19px;font-weight:800;letter-spacing:-.02em;flex:none}
.q-sb-bez{margin:2px 0 7px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8296A8;font-weight:700}
.q-sb-karte h3{margin:0 0 9px;font-size:23px;font-weight:800;letter-spacing:-.025em;color:#0E2033;line-height:1.15;
  text-align:left}
.q-sb-text{margin:0;font-size:15px;line-height:1.5;color:#5C6F82}

.q-sb-bild{margin-top:auto;margin-inline:-26px;margin-bottom:0}

/* ---------- Karte 01: die Eingabemaske ---------- */
.q-sb-maske{margin-inline:0;margin-bottom:26px;background:#F7F9FB;border:1px solid #EFF3F6;border-radius:16px;
  padding:16px;display:grid !important;grid-template-columns:minmax(0,1fr) 150px;gap:14px;align-items:start}
.q-sb-formtitel{display:block;font-size:12.5px;font-weight:800;color:#0E2033;margin-bottom:11px}
.q-sb-formtitel--klein{margin-top:14px}
.q-sb-arten{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.q-sb-arten span{font-size:10px;font-weight:600;color:#5C6F82;background:#fff;border:1px solid #E9EEF2;
  border-radius:7px;padding:4px 7px;white-space:nowrap}
.q-sb-arten span.ist-aktiv{background:#CFEEDD;border-color:#CFEEDD;color:#0E8A4B}
.q-sb-feld{background:#fff;border:1px solid #E9EEF2;border-radius:9px;padding:9px 11px;font-size:11px;color:#8296A8;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-sb-design{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.q-sb-vorschau{width:42px;height:42px;border:1.5px solid #17A05B;border-radius:9px;background:#fff;display:grid;
  place-items:center;padding:4px;flex:none}
.q-sb-vorschau svg{width:100%;height:100%;display:block}
.q-sb-farben{display:flex;gap:6px}
.q-sb-farben i{width:14px;height:14px;border-radius:50%;display:block}
.q-sb-schalter{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #E9EEF2;
  border-radius:9px;padding:6px 9px;font-size:10.5px;font-weight:600;color:#3B5068;white-space:nowrap}
.q-sb-schalter i{width:24px;height:14px;border-radius:99px;background:#17A05B;position:relative;display:block}
.q-sb-schalter i::after{content:"";position:absolute;right:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#fff}

.q-sb-qr{background:#fff;border:1px solid #E9EEF2;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:10px}
.q-sb-qrbild{display:block;background:#fff}
.q-sb-qrbild svg{width:100%;height:auto;display:block}
.q-sb-knopf{height:38px;font-size:11.5px;padding-inline:12px;gap:7px;white-space:nowrap}

/* ---------- Karte 02: das Foto ---------- */
.q-sb-foto img{display:block;width:100%;height:auto}

/* ---------- Karte 03: Telefon und Nutzen ---------- */
.q-sb-analyse{display:grid !important;grid-template-columns:minmax(0,132px) minmax(0,1fr);gap:14px;
  align-items:start;margin-inline:0;margin-bottom:26px}
.q-sb-telefon{position:relative;border:6px solid #1B2430;border-radius:26px;background:#1B2430;
  box-shadow:0 16px 34px rgba(14,32,51,.18);overflow:hidden}
.q-sb-kerbe{position:absolute;left:50%;top:0;transform:translateX(-50%);width:46px;height:12px;
  background:#1B2430;border-radius:0 0 9px 9px;z-index:2}
.q-sb-schirm{background:#F7F9FB;border-radius:20px;padding:18px 9px 11px;display:flex;flex-direction:column;gap:8px}
.q-sb-wortmarke{display:block;margin:0 0 3px 3px;color:#0E2033}
.q-sb-wortmarke svg{display:block;height:15px;width:auto}
.q-sb-tkarte{background:#fff;border-radius:11px;padding:9px 9px 10px;box-shadow:0 2px 7px rgba(14,32,51,.05)}
.q-sb-tkopf{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:7px}
.q-sb-tkopf b{font-size:11.5px;font-weight:800;color:#0E2033}
.q-sb-tkopf em{font-style:normal;font-size:9px;font-weight:700;color:#0E8A4B;background:#EAF7F0;border-radius:99px;
  padding:3px 6px;white-space:nowrap}
.q-sb-tkurve{width:100%;height:46px;display:block}
.q-sb-tgeraete{display:flex;align-items:center;gap:9px}
.q-sb-tring{width:50px;height:50px;flex:none}
.q-sb-tgeraete ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;min-width:0}
.q-sb-tgeraete li{display:flex;align-items:center;gap:5px;font-size:8.5px;color:#5C6F82;white-space:nowrap}
.q-sb-tgeraete i{width:6px;height:6px;border-radius:50%;flex:none}
.q-sb-tgeraete b{font-weight:800;color:#0E2033}

.q-sb-nutzen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.q-sb-nutzen li{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #EFF3F6;border-radius:13px;
  padding:12px 13px;box-shadow:0 5px 14px rgba(14,32,51,.05)}
.q-sb-nikon{width:30px;height:30px;border-radius:9px;background:#EEF8F2;display:grid;place-items:center;flex:none}
.q-sb-nikon svg{width:17px;height:17px}
.q-sb-nutzen b{display:block;font-size:13.5px;font-weight:700;color:#0E2033;line-height:1.2}
.q-sb-nutzen em{display:block;font-style:normal;font-size:11.5px;color:#8296A8;margin-top:2px}

/* ---------- Die Pfeile zwischen den Karten ---------- */
.q-sb-pfeil{position:absolute;top:47%;z-index:3;pointer-events:none}
.q-sb-pfeil--1{left:calc(33.333% - 30px)}
.q-sb-pfeil--2{left:calc(66.666% - 30px)}

@media (max-width:1560px){
  .q-sb-notiz{right:-20px;top:-64px}
  .q-sb-notiz svg{display:none}
}
@media (max-width:1100px){
  .q-sb-reihe{grid-template-columns:1fr !important;gap:22px}
  .q-sb-pfeil{display:none}
  .q-sb-maske{grid-template-columns:minmax(0,1fr) 170px}
  .q-sb-analyse{grid-template-columns:minmax(0,150px) minmax(0,1fr)}
}
@media (max-width:640px){
  .q-schritte-block{padding-block:56px 58px}
  .q-sb-notiz{display:none}
  .q-sb-maske{grid-template-columns:1fr}
  .q-sb-qr{flex-direction:row;align-items:center}
  .q-sb-qrbild{width:96px;flex:none}
  .q-sb-knopf{flex:1;justify-content:center}
  .q-sb-analyse{grid-template-columns:1fr}
  .q-sb-telefon{max-width:170px;margin:0 auto}
}


/* ---- wiederhergestellt 18.09.: block07.css ---- */

/* =====================================================================
   Block 07 - Branchen
   Kopf zweispaltig, darunter eine waagerechte Bahn mit Karten.
   ===================================================================== */
.q-branchen-block{padding-block:86px 90px;background:#fff;position:relative;overflow:hidden}
.q-branchen-block::before{content:"";position:absolute;right:-12%;top:-26%;width:48%;height:130%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#F1F8F4 0%,rgba(241,248,244,0) 70%);pointer-events:none}
.q-branchen-block .q-huelle{max-width:1400px;position:relative}

.q-br-kopf{display:grid !important;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:start;
  margin-bottom:44px;position:relative}
.q-branchen-block h2{font-size:clamp(30px,3.5vw,48px) !important;line-height:1.08 !important;letter-spacing:-.03em;
  font-weight:800 !important;color:#0E2033 !important;margin:0 0 16px !important;text-align:left !important}
.q-branchen-block h2 i{font-style:normal;color:#17A05B}
.q-br-lead{font-size:17.5px;line-height:1.55;color:#5C6F82;margin:0;max-width:44ch}

.q-br-merkmale{display:flex !important;align-items:flex-start;gap:0;padding-top:34px}
.q-br-merkmale > div{text-align:center;padding:0 30px;border-left:1px solid #EFF3F6;display:flex;
  flex-direction:column;align-items:center}
.q-br-merkmale > div:first-child{border-left:0}
.q-br-mikon{width:50px;height:50px;border-radius:14px;background:#EEF8F2;display:grid;place-items:center;margin-bottom:14px}
.q-br-mikon svg{width:25px;height:25px}
.q-br-merkmale b{display:block;font-size:16px;font-weight:700;color:#0E2033;margin-bottom:4px;white-space:nowrap}
.q-br-merkmale > div > span:last-child{font-size:13.5px;color:#8296A8;white-space:nowrap}

.q-br-notiz{position:absolute;right:-6px;top:-58px;width:200px;font-family:Caveat,"Segoe Script",cursive;
  font-size:22px;line-height:1.2;color:#17A05B;transform:rotate(-7deg);text-align:left;display:block}
.q-br-notiz svg{display:block;margin:2px 0 0 104px}

/* ---------- Die Bahn ---------- */
.q-br-bahn{position:relative}
.q-br-spur{display:grid !important;grid-auto-flow:column;grid-auto-columns:minmax(0,calc((100% - 4 * 20px) / 5));
  gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:0;padding-bottom:6px;
  scrollbar-width:none}
.q-br-spur::-webkit-scrollbar{display:none}

.q-br-karte{display:flex !important;flex-direction:column;background:#fff;border:1px solid #EFF3F6;border-radius:18px;
  overflow:hidden;text-decoration:none;box-shadow:0 8px 24px rgba(14,32,51,.05);scroll-snap-align:start;
  transition:transform .2s ease,box-shadow .2s ease;min-width:0}
.q-br-karte:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(14,32,51,.1)}
.q-br-bild{display:block;aspect-ratio:297/223;background:#F2F5F8;overflow:hidden}
.q-br-bild img{display:block;width:100%;height:100%;object-fit:cover}
.q-br-bild--schild{display:grid !important;place-items:center;background:linear-gradient(140deg,#EFF5F1,#E3EDE7);padding:16px}

.q-br-inhalt{display:block;padding:18px 18px 22px}
.q-br-zeile{display:flex !important;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.q-br-ikon{width:40px;height:40px;border-radius:12px;background:#EEF8F2;display:grid;place-items:center;flex:none}
.q-br-ikon svg{width:21px;height:21px}
.q-br-rund{width:34px;height:34px;border-radius:50%;border:1px solid #E4EAEF;background:#fff;display:grid;
  place-items:center;flex:none;transition:border-color .2s ease,background .2s ease}
.q-br-rund svg{width:16px;height:16px}
.q-br-karte:hover .q-br-rund{border-color:#17A05B;background:#EEF8F2}
.q-br-karte b{display:block;font-size:17px;font-weight:700;color:#0E2033;letter-spacing:-.015em;margin-bottom:7px}
.q-br-text{display:block;font-size:14px;line-height:1.5;color:#5C6F82}

.q-br-nav{position:absolute;top:36%;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid #E9EEF2;
  box-shadow:0 8px 20px rgba(14,32,51,.12);display:grid;place-items:center;cursor:pointer;z-index:4;padding:0;
  transition:opacity .2s ease}
.q-br-nav svg{width:20px;height:20px}
.q-br-nav--zurueck{left:-23px}
.q-br-nav--vor{right:-23px}
.q-br-nav.ist-aus{opacity:.32;pointer-events:none}

.q-br-fuss{margin-top:36px}
.q-br-knopf{height:58px;font-size:16px}

@media (max-width:1460px){
  .q-br-nav--zurueck{left:6px}
  .q-br-nav--vor{right:6px}
}
@media (max-width:1240px){
  .q-br-kopf{grid-template-columns:1fr;gap:30px}
  .q-br-merkmale{padding-top:0}
  .q-br-merkmale > div{padding-inline:22px}
  .q-br-merkmale > div:first-child{padding-left:0}
  .q-br-notiz{display:none}
  .q-br-spur{grid-auto-columns:minmax(0,calc((100% - 2 * 20px) / 3))}
}
@media (max-width:860px){
  .q-branchen-block{padding-block:56px 58px}
  .q-br-spur{grid-auto-columns:minmax(0,calc((100% - 20px) / 2))}
  .q-br-merkmale{flex-wrap:wrap;gap:22px;justify-content:center}
  .q-br-merkmale > div{border-left:0;padding-inline:8px}
}
@media (max-width:560px){
  .q-br-spur{grid-auto-columns:minmax(0,82%)}
  .q-br-nav{display:none}
  .q-br-knopf{width:100%;justify-content:center}
}


/* ---- wiederhergestellt 18.09.: block08.css ---- */

/* =====================================================================
   Block 08 - Buchhaltung & Rechnungen
   Links Text, rechts eine Szene aus drei Ebenen: Rechnungsuebersicht,
   davor die Rechnungsvorlage, daneben Belege und DATEV.
   ===================================================================== */
.q-buch{padding-block:100px 112px;background:#fff;position:relative;overflow:hidden}
.q-buch-gitter{display:grid !important;grid-template-columns:minmax(0,370px) minmax(0,1fr);
  gap:56px;align-items:center;position:relative}

.q-buch-links{position:relative;z-index:2}
.q-buch h2{font-size:48px !important;line-height:1.06 !important;letter-spacing:-.035em;
  font-weight:800 !important;color:#0E2033 !important;margin:0 0 22px !important;text-align:left !important}
.q-buch h2 i{font-style:normal;color:#17A05B}
.q-buch-text{font-size:17px;line-height:1.6;color:#5C6F82;margin:0 0 28px}

.q-buch-haken{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-direction:column;gap:14px}
.q-buch-haken li{display:flex;align-items:center;gap:13px;font-size:16.5px;font-weight:600;color:#0E2033}
.q-buch-kreis{width:25px;height:25px;border-radius:50%;background:#17A05B;display:grid;place-items:center;flex:none}
.q-buch-kreis svg{width:14px;height:14px}

.q-buch-knoepfe{display:flex;gap:16px;align-items:stretch;flex-wrap:wrap}
.q-buch-knopf{height:56px;font-size:16px;border-radius:13px}
.q-buch-video{display:inline-flex;align-items:center;gap:13px;background:#fff;border:1px solid #E4EAEF;
  border-radius:13px;padding:0 22px;height:56px;box-shadow:0 6px 18px rgba(14,32,51,.05);text-decoration:none}
.q-buch-video:hover{border-color:#17A05B}
.q-buch-video b{display:block;font-size:15.5px;font-weight:700;color:#0E2033;line-height:1.2}
.q-buch-video span span{display:block;font-size:12.5px;color:#8296A8;margin-top:2px}

/* ---------- rechte Szene ---------- */
.q-buch-rechts{position:relative;min-height:560px}

.q-buch-fenster{background:#fff;border:1px solid #E9EEF2;border-radius:20px;
  box-shadow:0 28px 66px rgba(14,32,51,.14);padding:22px 24px 18px;
  width:86%;margin-left:auto}
.q-buch-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.q-buch-kopf b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;color:#0E2033;margin-bottom:4px}
.q-buch-kopf > div > span{font-size:12.5px;color:#8296A8}
.q-buch-neu{display:inline-flex;align-items:center;gap:7px;background:#17A05B;color:#fff;border-radius:10px;
  padding:9px 14px;font-size:12.5px;font-weight:700;white-space:nowrap;flex:none}
.q-buch-neu svg{width:13px;height:13px;flex:none}

.q-buch-reiter{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid #EFF3F6;padding-bottom:12px;margin-bottom:16px}
.q-buch-reiter span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#8296A8;
  padding:6px 10px;border-radius:9px;white-space:nowrap}
.q-buch-reiter span.ist-aktiv{background:#EAF7F0;color:#0E8A4B;font-weight:800}
.q-buch-reiter i{font-style:normal;font-size:11px;font-weight:800;background:#F2F5F8;color:#3B5068;
  border-radius:6px;padding:2px 6px;font-variant-numeric:tabular-nums}
.q-buch-reiter span.ist-aktiv i{background:#fff;color:#0E8A4B}

.q-buch-zahlen{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:12px}
.q-buch-zahlen > div{border:1px solid #EFF3F6;border-radius:13px;padding:14px 15px;background:#fff}
.q-buch-zikon{display:grid;place-items:center;width:26px;height:26px;margin-bottom:10px}
.q-buch-zikon svg{width:21px;height:21px}
.q-buch-zahlen b{display:block;font-size:23px;font-weight:800;letter-spacing:-.03em;color:#0E2033;
  line-height:1.05;font-variant-numeric:tabular-nums}
.q-buch-zahlen > div > span:last-child{display:block;margin-top:4px;font-size:11.5px;color:#8296A8}
.q-buch-fuss{margin:14px 0 0;font-size:11px;color:#A9B7C4;line-height:1.4}

/* Rechnungsvorlage davor */
.q-buch-beleg{position:absolute;left:0;bottom:-34px;width:300px;background:#fff;border:1px solid #EFF3F6;
  border-radius:16px;box-shadow:0 26px 60px rgba(14,32,51,.16);padding:18px 18px 16px;z-index:3;
  transform:rotate(-1.4deg)}
.q-buch-muster{position:absolute;top:12px;right:14px;font-size:9.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#A9B7C4;background:#F2F5F8;border-radius:5px;padding:3px 7px}
.q-buch-belegkopf{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.q-buch-wortmarke svg{height:18px;width:auto;display:block}
.q-buch-belegnr{font-size:10px;color:#8296A8;text-align:right;margin-top:16px}
.q-buch-belegnr em{display:block;font-style:normal}
.q-buch-belegtitel{display:block;font-size:19px;font-weight:800;color:#0E2033;letter-spacing:-.02em;margin-bottom:10px}
.q-buch-empfaenger{margin:0 0 14px;font-size:11px;line-height:1.5;color:#5C6F82}
.q-buch-posten{width:100%;border-collapse:collapse;font-size:10.5px}
.q-buch-posten th{text-align:left;font-weight:700;color:#0E2033;padding:0 0 6px;border-bottom:1px solid #EFF3F6}
.q-buch-posten th:not(:first-child),.q-buch-posten td:not(:first-child){text-align:right}
.q-buch-posten td{padding:7px 0;color:#5C6F82;border-bottom:1px solid #F7F9FB}
.q-buch-summen{display:flex;flex-direction:column;gap:5px;margin-top:10px;font-size:10.5px;color:#5C6F82}
.q-buch-summen span{display:flex;justify-content:space-between;gap:10px}
.q-buch-summen b{font-weight:600;color:#3B5068;font-variant-numeric:tabular-nums}
.q-buch-gesamt{padding-top:6px;border-top:1px solid #EFF3F6;font-weight:800;color:#0E2033}
.q-buch-gesamt b{font-weight:800;color:#0E2033;font-size:12px}
.q-buch-bezahlt{display:flex;align-items:center;gap:9px;margin-top:14px;background:#EAF7F0;border-radius:11px;
  padding:9px 11px;position:relative}
.q-buch-haken-klein{width:22px;height:22px;border-radius:50%;background:#17A05B;display:grid;place-items:center;flex:none}
.q-buch-haken-klein svg{width:12px;height:12px}
.q-buch-bezahlt b{display:block;font-size:11.5px;font-weight:800;color:#0E8A4B}
.q-buch-bezahlt em{display:block;font-style:normal;font-size:10px;color:#5C9C7C}
.q-buch-dank{margin-left:auto;font-style:normal;font-family:Caveat,"Segoe Script",cursive;font-size:17px;
  color:#0E2033;transform:rotate(-6deg)}

/* Belege und DATEV */
.q-buch-karte{position:absolute;background:#fff;border:1px solid #EFF3F6;border-radius:15px;
  box-shadow:0 16px 40px rgba(14,32,51,.10);padding:15px 16px;z-index:2}
.q-buch-belege{right:-18px;top:54%;width:252px}
.q-buch-belege b{display:block;font-size:13.5px;font-weight:800;color:#0E2033;margin-bottom:10px}
.q-buch-ablage{border:1.5px dashed #D9E2E9;border-radius:11px;padding:16px 12px;text-align:center;background:#FBFCFD}
.q-buch-ablage svg{width:24px;height:24px;margin:0 auto 8px;display:block}
.q-buch-ablage span{display:block;font-size:11.5px;color:#3B5068;line-height:1.45}
.q-buch-ablage em{font-style:normal;font-weight:700;color:#0E2033}
.q-buch-ablage small{display:block;margin-top:5px;font-size:10px;color:#A9B7C4}

.q-buch-datev{right:-18px;bottom:-16px;width:296px;display:flex !important;align-items:center;gap:12px;
  text-decoration:none;color:#0E2033;transition:transform .2s ease,box-shadow .2s ease}
.q-buch-datev:hover{transform:translateY(-2px);box-shadow:0 22px 48px rgba(14,32,51,.15)}
.q-buch-datev b{display:block;font-size:13.5px;font-weight:800;color:#0E2033;margin-bottom:3px}
.q-buch-datev em{display:block;font-style:normal;font-size:11.5px;color:#8296A8;line-height:1.4}
.q-buch-datev i{margin-left:auto;width:36px;height:36px;border-radius:50%;background:#EAF7F0;color:#17A05B;
  display:grid;place-items:center;flex:none}
.q-buch-datev i svg{width:17px;height:17px}

/* Notiz */
.q-buch-notiz{position:absolute;right:-96px;top:2%;width:150px;display:block;z-index:4;
  font-family:Caveat,"Segoe Script",cursive;font-size:21px;line-height:1.2;color:#17A05B;
  transform:rotate(-5deg);text-align:left}
.q-buch-notiz em{font-style:normal;display:block}
.q-buch-notiz svg{display:block;margin:2px 0 0 34px}

@media (max-width:1240px){
  .q-buch-gitter{grid-template-columns:1fr;gap:44px}
  .q-buch-notiz{display:none}
  .q-buch-fenster{width:100%;margin-left:0}
  .q-buch-rechts{min-height:0;padding-bottom:0}
  .q-buch-beleg{position:static;width:100%;transform:none;margin-top:18px}
  .q-buch-karte{position:static;width:100%;margin-top:14px}
  .q-buch-datev{width:100%}
}
@media (max-width:767px){
  .q-buch{padding-block:56px 60px}
  .q-buch h2{font-size:32px !important}
  .q-buch-knopf,.q-buch-video{width:100%;justify-content:center}
  .q-buch-zahlen{grid-template-columns:1fr !important}
  .q-buch-reiter{gap:5px}
  .q-buch-reiter span{font-size:11.5px;padding:5px 8px}
}


/* =====================================================================
   Block 09 - Integrationen
   Links Text mit Haken und zwei Schaltflaechen, rechts der Kreis:
   QROVA in der Mitte, die Anbindungen auf der Bahn ringsum.
   ===================================================================== */
.q-integ{padding-block:100px 96px;background:#FBFCFD;position:relative;overflow:hidden}
.q-integ-gitter{display:grid !important;grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:60px;align-items:center}

.q-integ-links{position:relative;z-index:2}
.q-integ h2{font-size:50px !important;line-height:1.06 !important;letter-spacing:-.035em;
  font-weight:800 !important;color:#0E2033 !important;margin:0 0 22px !important;text-align:left !important}
.q-integ h2 i{font-style:normal;color:#17A05B}
.q-integ-text{font-size:17px;line-height:1.6;color:#5C6F82;margin:0 0 28px;max-width:400px}

.q-integ-haken{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-direction:column;gap:14px}
.q-integ-haken li{display:flex;align-items:center;gap:13px;font-size:16.5px;font-weight:600;color:#0E2033}
.q-integ-kreis{width:25px;height:25px;border-radius:50%;background:#17A05B;display:grid;place-items:center;flex:none}
.q-integ-kreis svg{width:14px;height:14px}

.q-integ-knoepfe{display:flex;gap:16px;align-items:stretch;flex-wrap:wrap}
.q-integ-knopf{height:56px;font-size:16px;border-radius:13px}
.q-integ-video{display:inline-flex;align-items:center;gap:13px;background:#fff;border:1px solid #E4EAEF;
  border-radius:13px;padding:0 22px;height:56px;box-shadow:0 6px 18px rgba(14,32,51,.05);text-decoration:none}
.q-integ-video:hover{border-color:#17A05B}
.q-integ-video > svg{flex:0 0 26px;min-width:26px}
.q-integ-video b{display:block;font-size:15.5px;font-weight:700;color:#0E2033;line-height:1.2}
.q-integ-video span span{display:block;font-size:12.5px;color:#8296A8;margin-top:2px}

/* ---------- rechte Seite ---------- */
.q-integ-rechts{position:relative}

.q-integ-kreisfeld{position:relative;width:100%;max-width:620px;margin:0 auto;aspect-ratio:560/500}
.q-integ-bahnen{position:absolute;inset:0;width:100%;height:100%}

.q-integ-mitte{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:190px;height:190px;border-radius:50%;background:#fff;border:1px solid #E4EFE8;
  box-shadow:0 22px 54px rgba(14,32,51,.12);display:grid;place-content:center;justify-items:center;
  gap:9px;text-align:center;z-index:3}
.q-integ-wortmarke svg{height:26px;width:auto;display:block}
.q-integ-mitte em{font-style:normal;font-size:12px;line-height:1.4;color:#8296A8}

.q-int-karte{position:absolute;transform:translate(-50%,-50%);width:186px;background:#fff;
  border:1px solid #EAEFF3;border-radius:14px;box-shadow:0 12px 30px rgba(14,32,51,.09);
  padding:12px 14px;display:flex;align-items:center;gap:11px;z-index:2}
.q-int-ikon{flex:0 0 34px;min-width:34px;height:34px;border-radius:10px;background:#F4F8F6;
  display:grid;place-items:center}
.q-int-ikon svg{width:20px;height:20px}
.q-int-karte b{display:block;font-size:13px;font-weight:800;color:#0E2033;line-height:1.2}
.q-int-karte em{display:block;font-style:normal;font-size:11px;color:#8296A8;line-height:1.35;margin-top:3px}

.q-int--o1{left:50%;top:10%}
.q-int--o2{left:82.9%;top:30%}
.q-int--o3{left:82.9%;top:70%}
.q-int--o4{left:50%;top:90%}
.q-int--o5{left:17.1%;top:70%}
.q-int--o6{left:17.1%;top:30%}

.q-integ-notiz{position:absolute;right:-8px;top:-24px;width:170px;display:block;z-index:4;
  font-size:21px;line-height:1.2;color:#17A05B;transform:rotate(-4deg);text-align:left}
.q-integ-notiz em{font-style:normal;display:block}
.q-integ-notiz svg{margin:2px 0 0 38px}

.q-integ-frage{display:flex;align-items:center;gap:13px;background:#fff;border:1px dashed #C9DCD2;
  border-radius:15px;padding:15px 18px;margin-top:8px;text-decoration:none;color:#0E2033;
  max-width:460px;margin-left:auto;margin-right:auto;transition:border-color .2s ease,transform .2s ease}
.q-integ-frage:hover{border-color:#17A05B;transform:translateY(-2px)}
.q-integ-fikon{flex:0 0 38px;min-width:38px;height:38px;border-radius:11px;background:#EAF7F0;
  display:grid;place-items:center}
.q-integ-fikon svg{width:21px;height:21px}
.q-integ-frage b{display:block;font-size:14px;font-weight:800;color:#0E2033}
.q-integ-frage em{display:block;font-style:normal;font-size:12.5px;color:#8296A8;margin-top:2px}
.q-integ-frage i{margin-left:auto;color:#17A05B;flex:none}
.q-integ-frage i svg{width:20px;height:20px}

/* ---------- Streifen unten ---------- */
.q-integ-streifen{display:grid !important;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px;
  padding-top:34px;border-top:1px solid #E7EDF2}
.q-integ-streifen > div{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.q-integ-sikon{width:34px;height:34px;border-radius:10px;background:#EAF7F0;display:grid;place-items:center;
  margin-bottom:6px}
.q-integ-sikon svg{width:19px;height:19px}
.q-integ-streifen b{font-size:14.5px;font-weight:800;color:#0E2033}
.q-integ-streifen > div > span:last-child{font-size:12.5px;color:#8296A8}

@media (max-width:1180px){
  .q-integ-gitter{grid-template-columns:1fr;gap:48px}
  .q-integ h2{font-size:40px !important}
  .q-integ-notiz{display:none}
}
@media (max-width:820px){
  .q-integ{padding-block:56px 60px}
  .q-integ h2{font-size:32px !important}
  .q-integ-knopf,.q-integ-video{width:100%;justify-content:center}
  /* Auf dem Telefon wird aus dem Kreis eine Liste */
  .q-integ-kreisfeld{aspect-ratio:auto;display:flex;flex-direction:column;gap:10px;max-width:none}
  .q-integ-bahnen{display:none}
  .q-integ-mitte{position:static;transform:none;width:100%;height:auto;border-radius:16px;
    padding:18px;flex-direction:row;margin-bottom:4px}
  .q-int-karte{position:static;transform:none;width:100%}
  .q-integ-streifen{grid-template-columns:1fr;gap:18px;margin-top:40px}
}

/* Block 05 - Feinschliff: Reiterzeile passt exakt, Karte behaelt ihre Breite */
.q-db-reiter > span{padding:3px 6px !important}
.q-db-wahl{font-size:10px !important;padding:4px 7px !important}
@media (min-width:1241px){
  .q-db-schwebe{width:232px;max-width:none}
}

/* Block 05 - Sprechblase: der Hoechstwert liegt am oberen Rand, deshalb haengt
   die Blase unter dem Punkt statt darueber - sonst deckt sie die Reiterzeile zu */
.q-db-spitze{transform:translate(-50%,14%) !important}
.q-db-diagramm{margin-top:10px}

/* Block 06 - Nachbesserung: im Telefon wurde die Geraete-Legende abgeschnitten */
.q-sb-analyse{grid-template-columns:minmax(0,156px) minmax(0,1fr) !important;align-items:center}
.q-sb-schirm{padding-inline:11px}
.q-sb-tring{width:44px;height:44px}
.q-sb-tgeraete{gap:7px}
.q-sb-tgeraete li{font-size:8px;gap:4px}
.q-sb-tgeraete i{width:5px;height:5px}
@media (max-width:1100px){
  .q-sb-analyse{grid-template-columns:minmax(0,170px) minmax(0,1fr) !important}
}
@media (max-width:640px){
  .q-sb-analyse{grid-template-columns:1fr !important}
}

/* Block 06 - Nutzenkarten: Titel sollen einzeilig bleiben */
.q-sb-nutzen li{padding:11px 12px;gap:10px}
.q-sb-nikon{width:28px;height:28px}
.q-sb-nutzen b{font-size:12.5px}
.q-sb-nutzen em{font-size:11px}

/* Block 06 - Nutzen einzeilig */
.q-sb-nutzen b{font-size:12px;white-space:nowrap}
.q-sb-nutzen em{white-space:nowrap}
@media (min-width:1101px){
  .q-sb-analyse{grid-template-columns:minmax(0,146px) minmax(0,1fr) !important}
}

/* Block 06 - Telefon-Geraetekarte: Ring und Legende passen nebeneinander nicht
   in die Telefonbreite, deshalb Ring oben, Legende darunter */
@media (min-width:1101px){
  .q-sb-analyse{grid-template-columns:minmax(0,156px) minmax(0,1fr) !important}
}
.q-sb-tgeraete{flex-direction:column;align-items:center;gap:8px}
.q-sb-tring{width:52px;height:52px}
.q-sb-tgeraete ul{align-self:stretch;gap:5px}
.q-sb-tgeraete li{font-size:8.5px;gap:5px}
.q-sb-tgeraete i{width:6px;height:6px}

/* Block 07 - Karte randlos: dqm-uc-card bringt eigenes Innenmass mit,
   das Foto soll aber bis an die Kartenkante gehen */
.q-br-karte{padding:0 !important}

/* Block 05 - Notiz und Karte ruecken: die schwebende Karte sitzt jetzt
   rechts aussen, daher wanderte die Notiz unter das Kleingedruckte;
   die Europakarte war zu praesent und lag ueber den Zahlen */
@media (min-width:1241px){
  .q-db-notiz{left:22px;bottom:-78px;width:200px}
}
.q-db-europa{width:82px;right:-12px;top:-10px;opacity:.5}

/* Block 05 - Notiz in den Fluss: absolut positioniert lag sie ueber Knopf und
   Haken. Jetzt steht sie unter dem Kleingedruckten, der Pfeil zeigt hoch zur
   schwebenden Karte - wie in der Vorlage */
@media (min-width:1241px){
  .q-db-notiz{position:static;display:block;margin:30px 0 0 12px;width:215px;bottom:auto;left:auto;
    transform:rotate(-6deg)}
  .q-db-notiz svg{width:104px;height:46px;margin:-2px 0 0 118px}
}

/* Block 05 - Karte tiefer: sie deckte das Kleingedruckte zu.
   Unten mehr Luft, damit die Karte nicht beschnitten wird */
.q-dashboard{padding-block:92px 132px}
@media (min-width:1241px){
  .q-db-schwebe{bottom:-118px}
}
@media (max-width:980px){
  .q-dashboard{padding-block:58px 60px}
}

/* Block 05 - letzte Luft: die Karte stand exakt auf der Sektionskante */
@media (min-width:1241px){ .q-dashboard{padding-bottom:152px} }

/* Block 05 - Notiz-Einzug: die Pfeilspitze lag hinter der schwebenden Karte.
   Die Karte ragt bei uns weiter in die Textspalte als in der Vorlage, deshalb
   faengt die Notiz frueher an und der Pfeil endet knapp vor der Karte */
@media (min-width:1241px){
  .q-db-notiz{margin-left:66px}
}

/* Block 05 - Karte nach rechts: in der Vorlage steht die schwebende Karte
   RECHTS neben der Textspalte und liegt auf dem Fenster, nicht auf dem Text.
   Dadurch bekommt die Notiz samt Pfeil ihren Platz wie im Original */
@media (min-width:1241px){
  .q-db-schwebe{right:-266px}
}

/* Block 05 - Kartenhoehe: die Karte hing unter dem Fenster heraus,
   in der Vorlage schliesst sie etwa mit der Fensterunterkante ab */
@media (min-width:1241px){
  .q-db-schwebe{bottom:-68px}
  .q-dashboard{padding-bottom:104px}
}

/* Block 05 - Seitenmass exakt 20 px: die Sektion bringt aus dem Grundgeruest
   14 px mit, die Huelle legt nur die restlichen 6 px drauf */
@media (max-width:700px){
  .q-dashboard .q-huelle{padding-inline:6px !important}
}

/* Block 05 - Begruessung einzeilig: auf 335 px Breite brach sie um */
@media (max-width:700px){
  .q-db-zeitraum{display:none !important}
  .q-db-gruss{margin-bottom:12px}
  .q-db-gruss b{font-size:15px;white-space:nowrap}
}

/* Block 05 - Telefon: Kartentitel "Top Laender" sichtbar machen und die
   Artenliste sauber in die halbe Kartenbreite legen */
@media (max-width:767px){
  .q-db-nur-mobil{display:inline !important;font-size:12.5px;font-weight:800;color:#0E2033}
  .q-db-orte .q-db-kartentitel{font-size:0 !important}
  .q-db-arten table{table-layout:fixed;width:100%}
  .q-db-arten td:first-child,.q-db-arten th:first-child{width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .q-db-arten td:nth-child(3),.q-db-arten th:nth-child(3){width:38px}
}

/* Block 05 - Telefon: Titel links (die Regel .q-db-orte b schob auch den
   Kartentitel nach rechts) und Tabellenrahmen aus dem Grundgeruest abstellen */
@media (max-width:767px){
  .q-db-orte .q-db-kartentitel{margin-left:0 !important;margin-right:auto}
  .q-db-arten table,.q-db-arten th,.q-db-arten td{border-left:0 !important;border-right:0 !important;background:transparent !important}
  .q-db-arten th{border-bottom:1px solid #F2F5F8 !important}
  .q-db-arten td{border-bottom:1px solid #F7F9FB !important}
  .q-db-arten tr:last-child td{border-bottom:0 !important}
}

/* =====================================================================
   Block 05 - Schreibtisch nach Mass
   Zahlen aus 5.png ausgemessen und auf unsere Inhaltsbreite (1352 px)
   umgerechnet; Massstab der Vorlage 1645 Bildpunkte = 1352 CSS-Punkte.
     Textspalte 373 | Spalt 83 | Fenster 896
     Ueberschrift Zeile 2 = 370 breit  -> Schriftgrad 56
     Knopf 56 hoch, schwebende Karte 166 breit, 242 hoch
   ===================================================================== */
@media (min-width:1241px){
  .q-dashboard{padding-block:110px 120px}
  .q-db-gitter{grid-template-columns:minmax(0,373px) minmax(0,1fr) !important;gap:83px !important}

  .q-dashboard h2{font-size:56px !important;line-height:1.02 !important;letter-spacing:-.035em !important;
    margin:0 0 26px !important}
  .q-db-text{font-size:17.5px;line-height:1.6;margin:0 0 30px;max-width:none}
  .q-db-haken{gap:15px;margin-bottom:33px}
  .q-db-haken li{font-size:16.5px}
  .q-db-knopf{height:56px;font-size:17px;padding-inline:28px;border-radius:13px}
  .q-db-fein{margin-top:26px;font-size:13.5px}

  .q-db-fenster{border-radius:22px}

  .q-db-schwebe{width:166px;max-width:none;right:-213px;padding:18px 18px 20px;border-radius:18px}
  .q-db-schwebe-ikon{width:40px;height:40px;border-radius:12px;margin-bottom:14px}
  .q-db-schwebe-ikon svg{width:20px;height:20px}
  .q-db-schwebe b{font-size:16px;margin-bottom:12px}
  .q-db-schwebe strong{font-size:34px}
  .q-db-schwebe-fuss{font-size:13px;margin-top:7px}
}

/* Block 05 - Schreibtisch, zweiter Anlauf
   Die Vorlage wurde in einer anderen Schrift gesetzt: bei gleicher
   Buchstabenhoehe braucht unser Inter fuer "auf einen Blick." 404 statt
   350 Punkte. Deshalb bleibt der Schriftgrad gross (54) und die Textspalte
   waechst auf 412, damit die Zeile nicht dreizeilig umbricht. */
@media (min-width:1241px){
  .q-db-gitter{grid-template-columns:minmax(0,412px) minmax(0,1fr) !important;gap:79px !important}
  .q-dashboard h2{font-size:54px !important;line-height:1.03 !important}
  .q-db-schwebe{right:-152px}
}

/* Block 05 - Schreibtisch: Laenderliste gehoert nur aufs Telefon.
   Die Regel .q-db-orte ul hatte das schwaechere .q-db-laenderliste{display:none}
   ueberstimmt, dadurch standen Staedte UND Laender untereinander. */
.q-db-orte .q-db-laenderliste{display:none}
@media (max-width:767px){
  .q-db-orte .q-db-laenderliste{display:flex !important}
  .q-db-orte > .q-db-ortegitter > ul:first-of-type{display:none !important}
}
/* Schwebende Karte: "Mehr Reichweite." passte bei 166 Punkten Breite nicht
   mehr in eine Zeile; Kleingedrucktes eine Spur kleiner, damit die Karte es
   nicht anschneidet */
@media (min-width:1241px){
  .q-db-schwebe b{font-size:15px;line-height:1.35}
  .q-db-fein{font-size:13px}
}

/* Block 05 - Tabelle und Karte aufraeumen (auf allen Breiten):
   das Grundgeruest zeichnete graue Kopfzellen und senkrechte Linien in die
   Artentabelle; die Punktekarte lag ausserdem auf den Ortsnamen */
.q-db-arten table,.q-db-arten th,.q-db-arten td{border-left:0 !important;border-right:0 !important;
  background:transparent !important}
.q-db-arten th{border-bottom:1px solid #F2F5F8 !important}
.q-db-arten td{border-bottom:1px solid #F7F9FB !important}
.q-db-arten tr:last-child td{border-bottom:0 !important}
.q-db-europa{width:72px;right:-14px;top:-12px;opacity:.42}

/* =====================================================================
   Block 05 - Szene randlos
   In der Vorlage ist der Hintergrund kein Streifen mit Kante, sondern ein
   durchgehend unscharfer Raum. Deshalb ein einziges, stark weichgezeichnetes
   Bild hinter dem Fenster, das ueber alle vier Seiten hinausragt und per
   Maske ins Weiss auslaeuft - so entsteht nirgends eine sichtbare Kante.
   ===================================================================== */
.q-db-szene--links,.q-db-szene--rechts{display:none !important}
.q-db-szene{position:absolute;inset:-70px -90px -90px -130px;z-index:0;display:block;overflow:hidden;
  pointer-events:none;border-radius:0}
.q-db-szene img{display:block;width:100%;height:100%;object-fit:cover;opacity:.92}
.q-db-szene{
  -webkit-mask-image:radial-gradient(125% 115% at 42% 52%,#000 38%,rgba(0,0,0,.65) 62%,rgba(0,0,0,0) 84%);
  mask-image:radial-gradient(125% 115% at 42% 52%,#000 38%,rgba(0,0,0,.65) 62%,rgba(0,0,0,0) 84%)}
@media (max-width:1240px){
  .q-db-szene{display:none !important}
}

/* Block 05 - Szene hinter den Text legen: sie ragte ueber die Textspalte und
   ueberdeckte Ueberschrift und Absatz. Textspalte bekommt eine Ebene darueber,
   die Szene ragt links nur noch bis in den Spalt. */
.q-db-links{position:relative;z-index:2}
.q-db-szene{inset:-60px -80px -80px -72px}
.q-db-szene img{opacity:1}
.q-db-szene{
  -webkit-mask-image:radial-gradient(128% 118% at 46% 50%,#000 46%,rgba(0,0,0,.72) 70%,rgba(0,0,0,0) 88%);
  mask-image:radial-gradient(128% 118% at 46% 50%,#000 46%,rgba(0,0,0,.72) 70%,rgba(0,0,0,0) 88%)}

/* =====================================================================
   Block 05 - Hintergrund als Farbe, nicht als Bild
   Aus 5.png gemessen: Grundton 253,253,254; zur unteren Mitte hin
   verdichtet er sich auf 238,241,243, oben in der Mitte liegt ein Hauch
   Kuehle (249,252,252). Genau das wird hier nachgebaut - zwei sehr
   schwache Radialverlaeufe auf hellem Grund, ueber die volle Fensterbreite.
   Das eingesetzte Foto entfaellt komplett.
   ===================================================================== */
.q-db-szene,.q-db-szene--links,.q-db-szene--rechts{display:none !important}
.q-dashboard::before{display:none !important}

.q-dashboard{
  background-color:#FDFDFE !important;
  background-image:
    radial-gradient(88% 66% at 70% 80%, rgba(203,214,222,.36) 0%, rgba(203,214,222,0) 66%),
    radial-gradient(66% 52% at 54% 4%, rgba(212,228,223,.24) 0%, rgba(212,228,223,0) 72%) !important;
  background-repeat:no-repeat !important;
  background-size:100% 100%,100% 100% !important;
}

/* Das Fenster bleibt eine eigene Ebene mit eigenem Weiss */
.q-db-fenster{background:#fff}

/* Auf dem Telefon ruhiger: nur ein flacher Verlauf am unteren Rand */
@media (max-width:767px){
  .q-dashboard{
    background-image:radial-gradient(120% 44% at 50% 100%, rgba(203,214,222,.28) 0%, rgba(203,214,222,0) 74%) !important;
  }
}

/* =====================================================================
   Block 05 - Blaetter zurueck hinter das Fenster
   Zwei Sicherungen gegen jede sichtbare Kante:
     1. das Bild ist reinweiss aufgehellt und wird MULTIPLIZIEREND
        aufgetragen - reines Weiss laesst den Untergrund unveraendert;
     2. zusaetzlich blendet eine Radialmaske die Elementkanten komplett aus.
   Die Blaetter schauen dadurch nur hinter dem Dashboard hervor.
   ===================================================================== */
@media (min-width:1241px){
  .q-db-szene{display:block !important;position:absolute;inset:-54px -70px -66px -104px;z-index:0;
    overflow:visible;pointer-events:none}
  .q-db-szene img{display:block;width:100%;height:100%;object-fit:cover;opacity:1;mix-blend-mode:multiply}
  .q-db-szene{
    -webkit-mask-image:radial-gradient(112% 104% at 48% 52%,#000 50%,rgba(0,0,0,.58) 74%,rgba(0,0,0,0) 93%);
    mask-image:radial-gradient(112% 104% at 48% 52%,#000 50%,rgba(0,0,0,.58) 74%,rgba(0,0,0,0) 93%)}
}

/* Block 05 - Reihenfolge der Kurzform: inset:auto stand hinter left/top und
   hat beides wieder zurueckgesetzt */
@media (min-width:1241px){
  .q-db-szene{inset:auto;left:-23.85% !important;top:-5.70% !important;
    width:127.89% !important;height:112.28% !important;right:auto !important;bottom:auto !important}
}

/* =====================================================================
   QROVA BLOCK 05 - EXACT BACKGROUND
   Vorgabe uebernommen: weisse Grundflaeche, darauf sehr weich gezeichnetes
   Pflanzenfoto im Uebergang zwischen Text und Dashboard, darueber ein
   weisser Schleier. Das Dashboard bleibt eine eigene Ebene im Vordergrund.
   Alle frueheren Hintergrundversuche sind hier abgeschaltet.
   ===================================================================== */
.q-db-szene{display:none !important}

.q-dashboard{
  position:relative;
  isolation:isolate;
  width:100%;
  overflow:hidden;
  background:#ffffff !important;
  background-image:none !important;
}

.q-dashboard::before{
  content: !important;
  display:block !important;
  position:absolute;
  left:34%;
  top:-12%;
  width:30%;
  height:125%;
  z-index:-2;
  background-image:url("../../../../uploads/2026/03/block05-botanik.webp");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  filter:blur(18px);
  transform:scale(1.08);
  opacity:.28;
  border-radius:0;
  pointer-events:none;
}

.q-dashboard::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.98) 24%,
    rgba(255,255,255,.86) 34%,
    rgba(255,255,255,.72) 41%,
    rgba(255,255,255,.90) 48%,
    rgba(255,255,255,.98) 56%,
    rgba(255,255,255,1) 64%,
    rgba(255,255,255,1) 100%);
}

.q-dashboard > *{position:relative;z-index:1}

@media (min-width:1200px){
  .q-dashboard::before{left:37%;width:22%;top:-10%;height:120%;filter:blur(20px);opacity:.25}
  .q-dashboard::after{
    background:linear-gradient(90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.99) 27%,
      rgba(255,255,255,.84) 38%,
      rgba(255,255,255,.70) 43%,
      rgba(255,255,255,.90) 50%,
      rgba(255,255,255,.98) 58%,
      rgba(255,255,255,1) 67%,
      rgba(255,255,255,1) 100%)}
}

@media (min-width:1600px){
  .q-dashboard::before{left:39%;width:20%;opacity:.23;filter:blur(22px)}
}

@media (max-width:767px){
  .q-dashboard::before{left:42%;width:28%;height:110%;filter:blur(20px);opacity:.16}
  .q-dashboard::after{
    background:linear-gradient(90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.96) 42%,
      rgba(255,255,255,.88) 52%,
      rgba(255,255,255,.98) 66%,
      rgba(255,255,255,1) 100%)}
}

/* =====================================================================
   BLOCK 05 - Pflanze sichtbar machen
   Die Vorgabewerte gehen von einem kraeftigen Foto aus. Das gelieferte Bild
   ist aber schon selbst fast weiss (Median 249), dazu kam blur(20px), das die
   duennen Blaetter vollends ins Weiss zieht. Rechnung:
     Endwert = 255 - (255-Quelle) * opacity * (1 - Weissschleier)
     alt:  opacity .25 x Schleier .70 -> Unterschied zu Weiss ca. 4 Punkte
     neu:  opacity .82 x Schleier .38 -> Unterschied zu Weiss ca. 50 Punkte
   Aufbau und Platzierung bleiben unveraendert.
   ===================================================================== */
.q-dashboard::before{filter:blur(8px) !important;opacity:.82 !important}
.q-dashboard::after{
  background:linear-gradient(90deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.99) 24%,
    rgba(255,255,255,.72) 33%,
    rgba(255,255,255,.38) 40%,
    rgba(255,255,255,.62) 47%,
    rgba(255,255,255,.92) 55%,
    rgba(255,255,255,1) 63%,
    rgba(255,255,255,1) 100%) !important}
@media (min-width:1600px){
  .q-dashboard::before{filter:blur(9px) !important;opacity:.78 !important}
}
@media (max-width:767px){
  .q-dashboard::before{filter:blur(8px) !important;opacity:.55 !important}
  .q-dashboard::after{
    background:linear-gradient(90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.90) 42%,
      rgba(255,255,255,.62) 52%,
      rgba(255,255,255,.94) 66%,
      rgba(255,255,255,1) 100%) !important}
}

/* =====================================================================
   BLOCK 05 - Pflanze statt Streifen
   Der Kasten war 334 breit und 1156 hoch, das Bild dagegen quer. Mit
   background-size:cover blieb davon nur ein stark vergroesserter senkrechter
   Streifen aus der Bildmitte uebrig - deshalb sah man ein Band und keine
   Pflanze. Jetzt liegt ein Hochformat-Ausschnitt zugrunde, der Kasten ist
   flacher, und eine weiche Maske loest seine Kanten auf.
   ===================================================================== */
.q-dashboard::before{
  top:7% !important;
  height:74% !important;
  background-size:cover !important;
  background-position:center top !important;
  filter:blur(10px) !important;
  opacity:.86 !important;
  -webkit-mask-image:radial-gradient(72% 66% at 50% 48%,#000 34%,rgba(0,0,0,.55) 62%,rgba(0,0,0,0) 86%) !important;
  mask-image:radial-gradient(72% 66% at 50% 48%,#000 34%,rgba(0,0,0,.55) 62%,rgba(0,0,0,0) 86%) !important;
}
@media (min-width:1200px){
  .q-dashboard::before{left:36% !important;width:24% !important}
}
@media (min-width:1600px){
  .q-dashboard::before{left:38% !important;width:21% !important;opacity:.82 !important}
}
@media (max-width:767px){
  .q-dashboard::before{left:40% !important;width:30% !important;top:12% !important;height:62% !important;
    opacity:.55 !important}
}

/* =====================================================================
   BLOCK 05 - kein zusaetzlicher Weichzeichner
   Die Vorlagenwerte gehen von einem scharfen Foto aus. Das gelieferte Bild
   ist bereits unscharf aufgenommen - ein zweiter Weichzeichner loescht die
   Blattformen und laesst nur Flecken uebrig. Deshalb filter:none.
   ===================================================================== */
.q-dashboard::before{filter:none !important;opacity:.88 !important}
@media (min-width:1600px){ .q-dashboard::before{filter:none !important;opacity:.84 !important} }
@media (max-width:767px){ .q-dashboard::before{filter:none !important;opacity:.6 !important} }

/* =====================================================================
   BLOCK 05 - einfach: Bild als Hintergrund, Dashboard darueber
   Keine Masken, keine Schleier, keine Verlaeufe. Das Foto liegt als
   Hintergrund der Sektion, das Fenster deckt es zum groessten Teil ab -
   sichtbar bleiben nur die Blaetter, die links daneben hervorschauen.
   ===================================================================== */
.q-dashboard::before{display:none !important}
.q-dashboard::after{display:none !important}
.q-db-szene{display:none !important}

.q-dashboard{
  background-color:#ffffff !important;
  background-image:url("../../../../uploads/2026/03/block05-botanik.webp") !important;
  background-repeat:no-repeat !important;
  background-size:auto 60% !important;
  background-position:38% center !important;
}

@media (min-width:1600px){
  .q-dashboard{background-position:40% center !important;background-size:auto 58% !important}
}
@media (max-width:1240px){
  .q-dashboard{background-size:auto 40% !important;background-position:92% 12% !important}
}
@media (max-width:767px){
  .q-dashboard{background-size:auto 26% !important;background-position:96% 8% !important}
}

/* Block 05 - Pflanze noch etwas nach rechts, damit sie das Kleingedruckte
   nicht beruehrt */
.q-dashboard{background-position:41% 74% !important}
@media (min-width:1600px){ .q-dashboard{background-position:42% 74% !important} }

/* =====================================================================
   Kopfleiste und Block 03 aufraeumen
   1. Die runden Kaesten hinter dem WhatsApp- und dem Chat-Zeichen fallen weg -
      die Zeichen stehen frei in der Leiste.
   2. Logo im Kopf groesser (34 -> 46) und mehr Luft daneben.
   3. Im gruenen Streifen von Block 03 waren die Sinnbilder zu klein und sassen
      nicht auf einer Linie mit der Ueberschrift.
   ===================================================================== */
.dqm-topbar-actions .dqm-topbar-icon{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  width:auto !important;
  height:40px !important;
  padding:0 8px !important;
  box-shadow:none !important;
}
.dqm-topbar-actions .dqm-topbar-icon:hover{
  background:transparent !important;border:0 !important;
  transform:translateY(-1px);
}
.dqm-topbar-actions .dqm-topbar-icon svg{width:24px;height:24px;display:block}
.dqm-topbar-actions{gap:6px}
.dqm-chat-badge{top:-2px;right:0}

.dqm-topbar-logo svg{height:46px !important;width:auto}
.dqm-topbar-logo{margin-right:10px}

/* ---------- Block 03: gruener Streifen ---------- */
.q-pl-streifen > div{align-items:center !important;gap:16px !important}
.q-pl-sym{width:52px !important;height:52px !important;border-radius:14px !important;
  background:#fff !important;border:1px solid #DCEEE4 !important;
  box-shadow:0 4px 12px rgba(14,32,51,.07) !important;flex:none !important}
.q-pl-sym svg{width:26px !important;height:26px !important;display:block}
.q-pl-streifen b{font-size:15.5px !important;margin-bottom:5px !important}
.q-pl-streifen span{font-size:13.5px !important;line-height:1.45 !important}

/* Sinnbilder wieder gruen: eine Grundregel faerbte alle SVG in Kopfleiste und
   Streifen auf die Textfarbe um */
.q-pl-sym svg{stroke:#0E8A4B !important;fill:none !important}
.dqm-topbar-actions .dqm-chat-toggle-btn svg{stroke:#17A05B !important;fill:none !important}
.dqm-topbar-actions .dqm-topbar-icon svg *{stroke:inherit}

/* =====================================================================
   Burger-Menue auf allen Breiten
   Die Leiste zeigt nur noch Logo, Sprache, WhatsApp, Chat, Anmelden und den
   Burger. Die Navigation faehrt als Tafel von rechts ein, dahinter ein
   dunkler Schleier. Der Burger wird dabei zum Kreuz.
   ===================================================================== */
.dqm-topbar-logo svg{height:34px !important}
.dqm-topbar-logo{margin-right:0}

.dqm-topbar-links{display:none !important}
.dqm-burger{display:flex !important;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;cursor:pointer;background:transparent;border:0;
  margin-left:4px;order:9}
.dqm-burger span{display:block;height:2px;width:24px;border-radius:2px;background:#0E2033;
  transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s ease}
.dqm-burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.dqm-burger.active span:nth-child(2){opacity:0}
.dqm-burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Die Tafel */
.dqm-mobile-menu{
  background:#ffffff !important;
  border-left:1px solid #EFF3F6 !important;
  width:100% !important;max-width:360px !important;
  box-shadow:-24px 0 60px rgba(14,32,51,0);
  transition:right .42s cubic-bezier(.16,1,.3,1),box-shadow .42s ease !important;
  display:block !important;
}
.dqm-mobile-menu.open{box-shadow:-24px 0 60px rgba(14,32,51,.16)}
.dqm-mobile-menu-inner{padding:110px 22px 40px !important}
.dqm-mobile-link{
  color:#0E2033 !important;background:#fff;border:1px solid transparent;
  transition:background .18s ease,border-color .18s ease,transform .18s ease}
.dqm-mobile-link:hover{background:#F7F9FB;border-color:#EFF3F6;transform:translateX(2px)}
.dqm-mobile-link small{display:block;width:100%;font-size:11.5px;color:#8296A8;margin-top:2px}
.dqm-mobile-link svg{flex:none}
.dqm-mobile-divider{height:1px;background:#EFF3F6;margin:12px 4px}
.dqm-mobile-link-cta{background:#17A05B !important;color:#fff !important;justify-content:center;
  font-weight:700;margin-top:6px}
.dqm-mobile-link-cta:hover{background:#0E8A4B !important;border-color:transparent}
.dqm-mobile-link-cta svg{stroke:#fff !important}

/* Der Schleier dahinter */
.dqm-menu-backdrop{
  position:fixed;inset:0;background:rgba(14,32,51,.42);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;z-index:1000}
.dqm-menu-backdrop.active{opacity:1;visibility:visible}

body.dqm-menu-offen{overflow:hidden}

/* Burger: kurzer Weg. Die Tafel parkte bei right:-100% der Fensterbreite
   (ueber 1500 px) und waere quer ueber den Schirm gefahren. Jetzt liegt sie
   genau eine Tafelbreite ausserhalb */
.dqm-mobile-menu{right:-380px !important}
.dqm-mobile-menu.open{right:0 !important}

/* Burger: Feinschliff
   - Bedienelemente wieder nach rechts, sonst kleben sie links am Logo
   - erster Menuepunkt lag hinter der Leiste
   - Beschriftungen einzeilig, Zusatz rechts daneben */
.dqm-topbar-actions{margin-left:auto}
.dqm-mobile-menu-inner{padding-top:148px !important}
.dqm-mobile-link{flex-wrap:wrap}
.dqm-mobile-link > span{white-space:nowrap}
.dqm-mobile-link small{width:100%;margin-top:3px}

/* =====================================================================
   Kopfleiste ohne Balken, Bedienung rechts senkrecht
   - die Leiste selbst wird durchsichtig, es bleiben Logo, Sprache,
     Anmelden und der Burger
   - der Burger liegt fest ueber allem, damit das Kreuz beim offenen
     Menue sichtbar bleibt
   - WhatsApp und Chat wandern in eine senkrechte Leiste am rechten Rand
   - die schwebende LISA-Figur entfaellt
   ===================================================================== */
.dqm-topbar{
  background:transparent !important;
  backdrop-filter:none !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}
.dqm-topbar.scrolled,.dqm-topbar.dqm-topbar--scrolled{
  background:transparent !important;box-shadow:none !important;border-bottom:0 !important}

/* Logo doppelt so gross, Bewegung bleibt */
.dqm-topbar-logo svg{height:68px !important;width:auto}
.dqm-topbar-logo{margin-right:0}

/* Sprache neben den Zugang, ohne Kasten */
.dqm-lang-drop{order:7;margin-left:auto}
.dqm-topbar-actions{order:8;margin-left:10px}
.dqm-lang-current{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  padding:6px 6px !important;gap:6px}
.dqm-lang-flag svg{border-radius:3px;display:block}
.dqm-lang-code{font-weight:700;color:#0E2033}

/* WhatsApp und Chat oben raus */
.dqm-topbar-actions .dqm-topbar-icon{display:none !important}

/* Burger: kein Rahmen, immer obenauf */
.dqm-burger{
  position:fixed !important;top:26px;right:22px;z-index:1200 !important;
  background:transparent !important;border:0 !important;outline:0 !important;box-shadow:none !important;
  order:9}
.dqm-burger:focus,.dqm-burger:focus-visible{outline:0 !important;box-shadow:none !important}

/* Schwebende Figur und alte Klebeknoepfe weg */
.dqm-hologram,.dqm-sticky-chat,.dqm-sticky-partner{display:none !important}

/* ---------- Senkrechte Leiste rechts ---------- */
.q-leiste{
  position:fixed;right:18px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:12px;z-index:900}
.q-leiste-knopf{
  position:relative;width:52px;height:52px;border-radius:16px;border:1px solid #E9EEF2;
  background:#fff;box-shadow:0 10px 26px rgba(14,32,51,.12);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.q-leiste-knopf:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(14,32,51,.18)}
.q-leiste-wa{color:#25D366}
.q-leiste-wa:hover{border-color:#25D366}
.q-leiste-chat{color:#17A05B}
.q-leiste-chat:hover{border-color:#17A05B}
.q-leiste-knopf svg{display:block}
.q-leiste-knopf em{
  position:absolute;right:62px;top:50%;transform:translateY(-50%) translateX(6px);
  background:#0E2033;color:#fff;font-style:normal;font-size:12.5px;font-weight:600;
  padding:6px 11px;border-radius:9px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease}
.q-leiste-knopf:hover em{opacity:1;transform:translateY(-50%) translateX(0)}
.q-leiste-punkt{
  position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;
  background:#17A05B;box-shadow:0 0 0 3px rgba(23,160,91,.18)}

@media (max-width:767px){
  .q-leiste{right:12px;gap:10px}
  .q-leiste-knopf{width:46px;height:46px;border-radius:14px}
  .q-leiste-knopf em{display:none}
  .dqm-topbar-logo svg{height:48px !important}
  .dqm-burger{top:18px;right:14px}
}

/* Sprachwahl endgueltig ohne Rahmen: der goldene Rand sass auf
   .dqm-lang-current mit !important aus dem Grundgeruest */
.dqm-lang-current{
  border:0 !important;border-color:transparent !important;border-radius:0 !important;
  padding:8px 6px !important;background:transparent !important;box-shadow:none !important}
.dqm-lang-current:hover{background:transparent !important;border:0 !important}

/* Sprachwahl per Kennung: der goldene Rand kam aus einer Regel mit hoeherer
   Gewichtung, deshalb hier ueber die ID */
#dqm-lang-toggle{
  border:0 !important;border-width:0 !important;border-color:transparent !important;
  border-radius:0 !important;background:transparent !important;box-shadow:none !important;
  padding:8px 4px !important}
#dqm-lang-toggle:hover{background:transparent !important;border:0 !important}
/* Leiste beim offenen Menue sicher nach vorn */
body.q-menue-auf .dqm-topbar{z-index:1300 !important}

/* =====================================================================
   Menue: Auftritt und Abgang, Burger ohne Rand, Original-Logo
   - der goldene Rand am Burger kam aus derselben Regel wie beim Sprachknopf
   - die Tafel faehrt jetzt mit leichter Drehung und Tiefe herein und
     fliegt beim Schliessen nach hinten weg
   - die Eintraege setzen versetzt nach, einer nach dem anderen
   - im Zeichen des Assistenten war die SVG-Breite auf 2.4px gequetscht
   ===================================================================== */
#dqm-burger{
  border:0 !important;border-width:0 !important;border-color:transparent !important;
  border-radius:0 !important;background:transparent !important;box-shadow:none !important;
  outline:0 !important;padding:0 10px !important}
#dqm-burger:hover,#dqm-burger:focus,#dqm-burger:focus-visible,#dqm-burger:active{
  border:0 !important;background:transparent !important;box-shadow:none !important;outline:0 !important}

/* Original-Logo der Seite */
.q-kopflogo{height:68px !important;width:auto !important;display:block}
@media (max-width:767px){ .q-kopflogo{height:46px !important} }

/* ---------- Tafel: Auftritt ---------- */
.dqm-mobile-menu{
  right:0 !important;
  transform:translateX(112%) scale(.96) rotateY(8deg);
  transform-origin:right center;
  perspective:1200px;
  opacity:0;
  transition:transform .52s cubic-bezier(.22,1,.28,1),opacity .34s ease !important;
  will-change:transform,opacity;
}
.dqm-mobile-menu.open{transform:translateX(0) scale(1) rotateY(0);opacity:1}

/* Eintraege setzen versetzt nach */
.dqm-mobile-menu .dqm-mobile-link,.dqm-mobile-menu .dqm-mobile-divider{
  opacity:0;transform:translateX(26px);
  transition:opacity .34s ease,transform .44s cubic-bezier(.22,1,.28,1)}
.dqm-mobile-menu.open .dqm-mobile-link,.dqm-mobile-menu.open .dqm-mobile-divider{
  opacity:1;transform:translateX(0)}
.dqm-mobile-menu.open .dqm-mobile-menu-inner > *:nth-child(1){transition-delay:.10s}
.dqm-mobile-menu.open .dqm-mobile-menu-inner > *:nth-child(2){transition-delay:.15s}
.dqm-mobile-menu.open .dqm-mobile-menu-inner > *:nth-child(3){transition-delay:.20s}
.dqm-mobile-menu.open .dqm-mobile-menu-inner > *:nth-child(4){transition-delay:.25s}
.dqm-mobile-menu.open .dqm-mobile-menu-inner > *:nth-child(5){transition-delay:.30s}
.dqm-mobile-menu.open .dqm-mobile-menu-inner > *:nth-child(6){transition-delay:.35s}
.dqm-mobile-menu.open .dqm-mobile-menu-inner > *:nth-child(7){transition-delay:.40s}
.dqm-mobile-menu.open .dqm-mobile-menu-inner > *:nth-child(8){transition-delay:.45s}
.dqm-mobile-menu.open .dqm-mobile-menu-inner > *:nth-child(9){transition-delay:.50s}
.dqm-mobile-menu.open .dqm-mobile-menu-inner > *:nth-child(10){transition-delay:.55s}

/* ---------- Kreuz in der Tafel ---------- */
.q-menue-zu{
  position:absolute;top:22px;right:22px;width:44px;height:44px;border-radius:50%;
  background:#F7F9FB;border:1px solid #EFF3F6;display:grid;place-items:center;cursor:pointer;
  z-index:5;padding:0;opacity:0;transform:scale(.8);
  transition:opacity .3s ease .22s,transform .3s cubic-bezier(.22,1,.28,1) .22s,background .18s ease}
.q-menue-zu:hover{background:#EEF3F7}
.dqm-mobile-menu.open .q-menue-zu{opacity:1;transform:scale(1)}
.q-menue-zu svg{display:block}

/* ---------- Zeichen in der rechten Leiste ---------- */
.q-leiste-knopf svg{width:24px !important;height:24px !important;display:block !important}
.q-leiste-chat svg{stroke:#17A05B !important;fill:none !important}
.q-leiste-wa svg{fill:#25D366 !important;stroke:none !important}

@media (prefers-reduced-motion:reduce){
  .dqm-mobile-menu{transition:opacity .2s ease !important;transform:none !important}
  .dqm-mobile-menu .dqm-mobile-link,.dqm-mobile-menu .dqm-mobile-divider{transform:none;transition:opacity .2s ease}
}

/* Assistenten-Zeichen nicht mehr zusammengedrueckt: als Flex-Kind wurde das
   SVG auf 2 px Breite gequetscht - jetzt feste Breite, kein Schrumpfen */
.q-leiste-knopf{overflow:visible}
.q-leiste-knopf svg{flex:0 0 24px !important;min-width:24px !important;max-width:24px !important}
.q-leiste-knopf em{position:absolute !important}
.q-leiste-punkt{position:absolute !important}

/* Menue: offener Zustand durchsetzen.
   Der Klapp-Zustand blieb haengen - die spaetere Regel fuer reduzierte
   Bewegung setzte transform:none!important und stach den offenen Zustand aus.
   Deshalb hier mit gleicher Gewichtung, und die Bewegungsregel schaltet nur
   noch die Dauer herunter statt die Verschiebung zu loeschen. */
.dqm-mobile-menu.open{
  transform:translateX(0) scale(1) rotateY(0) !important;opacity:1 !important}
.dqm-mobile-menu.open .dqm-mobile-link,
.dqm-mobile-menu.open .dqm-mobile-divider{opacity:1 !important;transform:translateX(0) !important}
.dqm-mobile-menu.open .q-menue-zu{opacity:1 !important;transform:scale(1) !important}
@media (prefers-reduced-motion:reduce){
  .dqm-mobile-menu{transition:transform .15s linear,opacity .15s linear !important}
  .dqm-mobile-menu .dqm-mobile-link,
  .dqm-mobile-menu .dqm-mobile-divider{transition:opacity .15s linear !important;transition-delay:0s !important}
}

/* =====================================================================
   Menue: Bewegung ueber "right" statt ueber transform
   Die Transformation wurde in dieser Umgebung nicht durchgesetzt - der
   offene Zustand blieb haengen. Die Verschiebung ueber right hat hier
   nachweislich funktioniert, also laeuft die Tafel darueber:
   hereinfahren mit weichem Ausschwingen, hinausfahren wie weggeworfen.
   ===================================================================== */
.dqm-mobile-menu{
  transform:none !important;
  opacity:1 !important;
  right:-420px !important;
  transition:right .55s cubic-bezier(.22,1,.28,1),box-shadow .5s ease !important;
  perspective:none !important;
}
.dqm-mobile-menu.open{right:0 !important}

/* Eintraege blenden nacheinander auf, ohne Verschiebung */
.dqm-mobile-menu .dqm-mobile-link,
.dqm-mobile-menu .dqm-mobile-divider{
  transform:none !important;opacity:0 !important;
  transition:opacity .38s ease !important}
.dqm-mobile-menu.open .dqm-mobile-link,
.dqm-mobile-menu.open .dqm-mobile-divider{opacity:1 !important}

/* Kreuz erscheint mit */
.q-menue-zu{transform:none !important;opacity:0 !important;
  transition:opacity .3s ease .18s,background .18s ease !important}
.dqm-mobile-menu.open .q-menue-zu{opacity:1 !important}

/* Kreuz immer sichtbar: die Einblendung verschluckte es */
.q-menue-zu{opacity:1 !important;transform:none !important;z-index:10 !important;
  position:absolute !important;top:20px !important;right:20px !important;
  width:46px !important;height:46px !important;border-radius:50% !important;
  background:#F2F6F9 !important;border:1px solid #E4EAEF !important;
  display:grid !important;place-items:center !important;cursor:pointer}
.q-menue-zu:hover{background:#E7EEF3 !important}

/* Kreuz als freies Element ueber allem: innerhalb der Tafel blieb es unsichtbar */
.q-menue-zu{display:none !important;position:fixed !important;top:78px !important;right:26px !important;
  z-index:1400 !important;width:46px !important;height:46px !important;border-radius:50% !important;
  background:#F2F6F9 !important;border:1px solid #E4EAEF !important;place-items:center !important;
  box-shadow:0 6px 18px rgba(14,32,51,.12) !important;cursor:pointer;opacity:1 !important}
.dqm-mobile-menu.open ~ .q-menue-zu,
.dqm-mobile-menu.open .q-menue-zu,
body.q-menue-auf .q-menue-zu{display:grid !important}
body.q-menue-auf .dqm-burger{visibility:hidden}

/* Kreuz-Zeichen sichtbar: das SVG wurde wie in der rechten Leiste auf
   Nullbreite gequetscht */
.q-menue-zu svg{width:22px !important;height:22px !important;min-width:22px !important;
  flex:0 0 22px !important;display:block !important;stroke:#0E2033 !important;fill:none !important}

/* Assistenten-Zeichen voll gefuellt - die Fuellung wurde von einer
   Grundregel (svg{fill:none}) ausgehebelt, deshalb direkt auf den Pfad */
.q-leiste-chat svg{fill:#17A05B !important;stroke:none !important}
.q-leiste-chat svg path{fill:#17A05B !important;stroke:none !important}
.q-leiste-chat svg circle{fill:#ffffff !important;stroke:none !important}
.q-leiste-wa svg path{fill:#25D366 !important;stroke:none !important}

/* Leiste beim offenen Menue nach hinten.
   Das Kreuz sitzt in der Tafel; die Tafel bildet mit z-index 1001 eine eigene
   Ebene, innerhalb derer das Kreuz nicht hoeher steigen kann. Die Leiste stand
   mit 1300 darueber und fing den Klick ab. Da Sprache, Anmelden und Burger bei
   offenem Menue ohnehin ausgeblendet sind, darf die Leiste nach hinten. */
body.q-menue-auf .dqm-topbar{z-index:900 !important;pointer-events:none !important}
body.q-menue-auf .dqm-topbar *{pointer-events:none !important}

/* Assistenten-Knopf bekommt seine Plaette zurueck.
   WhatsApp ist ein Link und behaelt den weissen Untergrund, der Assistent ist
   ein <button> - dem nimmt eine Grundregel der Vorlage den Hintergrund weg.
   Deshalb hier ueber die Kennung mit Nachdruck. */
#q-leiste-chat{
  background:#ffffff !important;
  border:1px solid #E9EEF2 !important;
  border-radius:16px !important;
  box-shadow:0 10px 26px rgba(14,32,51,.12) !important;
  width:52px !important;height:52px !important;
  display:flex !important;align-items:center !important;justify-content:center !important}
#q-leiste-chat:hover{background:#ffffff !important;border-color:#17A05B !important}

/* =====================================================================
   Kopfleiste klebt wieder beim Blaettern
   Ich hatte sie beim Umbau auf position:relative gesetzt - dadurch lief sie
   mit dem Inhalt weg. Sie ist wieder fest angeheftet: oben durchsichtig,
   ab 50 px Blaetterweg legt sich Weiss mit feiner Kante darunter, damit der
   Text nicht durchscheint. Die Klasse .scrolled setzt das vorhandene Skript.
   ===================================================================== */
.dqm-topbar{
  position:fixed !important;
  left:0;right:0;
  z-index:1002 !important;
  transition:background .25s ease,box-shadow .25s ease,border-color .25s ease,backdrop-filter .25s ease !important;
}
.dqm-topbar.scrolled{
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:saturate(140%) blur(10px) !important;
  -webkit-backdrop-filter:saturate(140%) blur(10px) !important;
  border-bottom:1px solid #EFF3F6 !important;
  box-shadow:0 6px 24px rgba(14,32,51,.06) !important;
}
/* beim geblaetterten Zustand das Logo etwas kleiner, damit die Leiste flach bleibt */
.dqm-topbar.scrolled .q-kopflogo{height:48px !important;transition:height .25s ease}
.q-kopflogo{transition:height .25s ease}

/* Block 08 - Nachbesserung
   - "Mehr als QR-Codes." brach bei 48px in der 370er Spalte um
   - die Rechnungsvorlage lag auf den Kennzahlen
   - die Notiz stiess an den rechten Rand und an den Knopf */
@media (min-width:1241px){
  .q-buch h2{font-size:42px !important;line-height:1.08 !important}
  .q-buch-gitter{grid-template-columns:minmax(0,390px) minmax(0,1fr);gap:48px}
  .q-buch-rechts{min-height:640px}
  .q-buch-fenster{width:82%;margin-left:auto;margin-right:26px}
  .q-buch-beleg{left:-10px;bottom:-70px;width:286px}
  .q-buch-belege{right:0;top:auto;bottom:86px;width:238px}
  .q-buch-datev{right:0;bottom:-48px;width:282px}
  .q-buch-notiz{right:-72px;top:-8%;width:132px}
  .q-buch-notiz svg{margin-left:26px;width:46px;height:66px}
  .q-buch{padding-bottom:150px}
}

/* Block 08 - Ueberschrift einzeilig pro Zeile: "Mehr als QR-Codes." brach
   trotz 42px noch um, die Zeilen werden ohnehin per <br> gesetzt */
@media (min-width:1241px){
  .q-buch h2{font-size:40px !important;white-space:nowrap}
}

/* Block 08 - Mustertabelle aufraeumen: das Grundgeruest zeichnete Zellrahmen
   und die Spalten liefen ineinander */
.q-buch-posten{table-layout:fixed}
.q-buch-posten,.q-buch-posten th,.q-buch-posten td{
  border-left:0 !important;border-right:0 !important;background:transparent !important}
.q-buch-posten th{border-bottom:1px solid #EFF3F6 !important;padding-bottom:6px !important}
.q-buch-posten td{border-bottom:1px solid #F7F9FB !important;padding:7px 0 !important}
.q-buch-posten tr:last-child td{border-bottom:0 !important}
.q-buch-posten th:nth-child(1),.q-buch-posten td:nth-child(1){width:46%;padding-right:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-buch-posten th:nth-child(2),.q-buch-posten td:nth-child(2){width:14%}
.q-buch-posten th:nth-child(3),.q-buch-posten td:nth-child(3){width:20%}
.q-buch-posten th:nth-child(4),.q-buch-posten td:nth-child(4){width:20%}

/* =====================================================================
   Burger sass am Bildschirmrand fest und lag damit im dunklen Hinweis-
   band - dort sind die dunklen Striche nicht zu sehen. Er gehoert in die
   Kopfzeile selbst, gleich hinter "Anmelden".
   ===================================================================== */
#dqm-burger{
  position:static !important;top:auto !important;right:auto !important;
  margin-left:14px;align-self:center}
@media (max-width:767px){ #dqm-burger{margin-left:8px} }

/* Block 09 - Feinschliff: die Ueberschrift brach in vier Zeilen und die
   beiden Schaltflaechen rutschten untereinander. Linke Spalte breiter. */
.q-integ-gitter{grid-template-columns:minmax(0,560px) minmax(0,1fr) !important}
.q-integ-text{max-width:460px}
.q-integ-knopf{padding:0 24px}
.q-integ-video{padding:0 18px}
@media (max-width:1180px){
  .q-integ-gitter{grid-template-columns:1fr !important}
}

/* Der Pfeil der Notiz lag auf dem Wort DATEV - Notiz hoeher setzen */
.q-integ-notiz{top:-66px !important;right:10px !important}

/* =====================================================================
   Block 11 - Preise
   Links Ueberschrift, Haken und das Foto mit Notiz, rechts drei Tarife.
   Die mittlere Karte steht hervor und traegt das Band.
   ===================================================================== */
.q-preise{padding-block:100px 96px;background:#fff;position:relative;overflow:hidden}
.q-preise-gitter{display:grid !important;grid-template-columns:minmax(0,330px) minmax(0,1fr);
  gap:48px;align-items:start}

.q-preise-links{position:relative}
.q-preise h2{font-size:46px !important;line-height:1.06 !important;letter-spacing:-.035em;
  font-weight:800 !important;color:#0E2033 !important;margin:0 0 20px !important;text-align:left !important}
.q-preise h2 i{font-style:normal;color:#17A05B}
.q-preise-text{font-size:16.5px;line-height:1.6;color:#5C6F82;margin:0 0 26px}

.q-preise-haken{list-style:none;margin:0 0 34px;padding:0;display:flex;flex-direction:column;gap:13px}
.q-preise-haken li{display:flex;align-items:center;gap:12px;font-size:15.5px;font-weight:600;color:#0E2033}
.q-preise-kreis{width:23px;height:23px;border-radius:50%;background:#17A05B;display:grid;place-items:center;flex:none}
.q-preise-kreis svg{width:13px;height:13px}

.q-preise-bild{position:relative;max-width:300px}
.q-preise-bild img{display:block;width:100%;height:auto;border-radius:20px;
  box-shadow:0 22px 50px rgba(14,32,51,.16)}
.q-preise-notiz{position:absolute;right:-118px;top:16px;width:150px;display:block;z-index:3;
  font-size:20px;line-height:1.2;color:#17A05B;transform:rotate(-4deg);text-align:left}
.q-preise-notiz em{font-style:normal;display:block}
.q-preise-notiz svg{margin:4px 0 0 -6px;transform:scaleX(-1)}

/* ---------- Karten ---------- */
.q-preise-karten{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;align-items:start;padding-top:14px}

.q-pr-karte{position:relative;background:#fff;border:1px solid #EAEFF3;border-radius:20px;
  padding:26px 22px 24px;display:flex;flex-direction:column;
  box-shadow:0 10px 30px rgba(14,32,51,.06)}
.q-pr-karte--top{border:1.6px solid #17A05B;box-shadow:0 26px 60px rgba(23,160,91,.16);
  transform:translateY(-14px);padding-top:32px}
.q-pr-band{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:#17A05B;color:#fff;border-radius:9px;padding:7px 15px;white-space:nowrap;
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}

.q-pr-kopf b{display:block;font-size:25px;font-weight:800;letter-spacing:-.02em;color:#0E2033;margin-bottom:7px}
.q-pr-kopf p{margin:0 0 18px;font-size:13.5px;line-height:1.45;color:#8296A8;min-height:39px}

.q-pr-betrag{display:flex;align-items:baseline;gap:7px;margin-bottom:20px;
  padding-bottom:18px;border-bottom:1px solid #F0F4F7}
.q-pr-betrag span{font-size:44px;font-weight:800;letter-spacing:-.04em;color:#0E2033;line-height:1;
  font-variant-numeric:tabular-nums}
.q-pr-karte--top .q-pr-betrag span{color:#17A05B}
.q-pr-betrag em{font-style:normal;font-size:14px;color:#8296A8;font-weight:600}

.q-pr-liste{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.q-pr-liste li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.4;color:#3B5068}
.q-pr-haken,.q-pr-kreuz{flex:0 0 18px;min-width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;margin-top:1px}
.q-pr-haken{background:#17A05B}
.q-pr-kreuz{background:#D3DCE4}
.q-pr-haken svg,.q-pr-kreuz svg{width:11px;height:11px}
.q-pr-liste .q-pr-aus{color:#A9B7C4}
.q-pr-liste .q-pr-stark{color:#0E8A4B;font-weight:700}
.q-pr-liste em{display:block;font-style:normal;font-weight:400;font-size:11.5px;color:#8296A8;
  margin-top:3px;line-height:1.4}

.q-pr-knopf{display:flex;align-items:center;justify-content:center;gap:9px;height:50px;
  border-radius:12px;font-size:14.5px;font-weight:700;text-decoration:none;border:1px solid transparent;
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.q-pr-knopf--voll{background:#17A05B;color:#fff;box-shadow:0 12px 26px rgba(23,160,91,.26)}
.q-pr-knopf--voll:hover{background:#12854B;color:#fff}
.q-pr-knopf--rand{background:#fff;color:#0E2033;border-color:#E4EAEF}
.q-pr-knopf--rand:hover{border-color:#17A05B;color:#17A05B}
.q-pr-knopf svg{flex:0 0 18px;min-width:18px}
.q-pr-fein{margin:11px 0 0;font-size:10.5px;line-height:1.45;color:#A9B7C4;text-align:center}

/* ---------- Fuss und Streifen ---------- */
.q-preise-fuss{margin-top:40px;display:flex;flex-direction:column;gap:12px}
.q-preise-agentur{margin:0;font-size:14.5px;line-height:1.6;color:#3B5068;
  background:#F6FAF8;border:1px solid #E2EFE8;border-radius:14px;padding:16px 20px}
.q-preise-agentur a{color:#17A05B;font-weight:700}
.q-preise-recht{margin:0;font-size:11.5px;line-height:1.6;color:#A9B7C4}
.q-preise-recht strong{color:#8296A8}

.q-preise-streifen{display:grid !important;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px;
  padding-top:32px;border-top:1px solid #E7EDF2}
.q-preise-streifen > div{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.q-pr-sikon{width:34px;height:34px;border-radius:10px;background:#EAF7F0;display:grid;place-items:center;
  margin-bottom:7px}
.q-pr-sikon svg{width:19px;height:19px}
.q-preise-streifen b{font-size:14.5px;font-weight:800;color:#0E2033}
.q-preise-streifen > div > span:last-child{font-size:12.5px;color:#8296A8;line-height:1.4}

@media (max-width:1180px){
  .q-preise-gitter{grid-template-columns:1fr;gap:40px}
  .q-preise-notiz{display:none}
  .q-preise-bild{max-width:260px}
  .q-preise-streifen{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .q-preise{padding-block:56px 60px}
  .q-preise h2{font-size:32px !important}
  .q-preise-karten{grid-template-columns:1fr !important;gap:22px;padding-top:20px}
  .q-pr-karte--top{transform:none;margin-top:8px}
  .q-pr-kopf p{min-height:0}
  .q-preise-streifen{grid-template-columns:1fr;gap:18px;margin-top:32px}
}

/* Block 11 - Feinschliff: die Ueberschrift brach in vier Zeilen, und die
   Notiz ragte in die Kartenspalte. Spalte breiter, Schrift kleiner,
   Notiz nach oben ueber das Foto. */
.q-preise-gitter{grid-template-columns:minmax(0,370px) minmax(0,1fr) !important}
.q-preise h2{font-size:40px !important}
.q-preise-bild{max-width:270px;margin-top:8px}
.q-preise-notiz{right:-4px !important;top:-52px !important;width:136px;font-size:19px}
.q-preise-notiz svg{width:54px;height:50px;margin:2px 0 0 26px;transform:none}
@media (max-width:1180px){
  .q-preise-gitter{grid-template-columns:1fr !important}
}

/* Die Notiz lag auf dem Foto - dem Bild Luft nach oben geben */
.q-preise-bild{margin-top:62px !important}
.q-preise-notiz{top:-62px !important}

/* =====================================================================
   Handy-Durchgang 18.09.2026
   1. Die schwebende Leiste stand in der Bildschirmmitte und lag auf dem
      Text jedes Abschnitts. Sie gehoert nach unten rechts.
   2. Das Hinweisband oben ist 28 px hoch mit overflow:hidden - der Satz
      brach auf zwei Zeilen und wurde abgeschnitten. Jetzt eine Zeile.
   ===================================================================== */
@media (max-width:820px){
  .q-leiste{
    top:auto !important;bottom:18px !important;right:12px !important;
    transform:none !important;flex-direction:column !important;gap:10px !important}
  .q-leiste-knopf{width:46px !important;height:46px !important;border-radius:14px !important}
  .q-leiste-knopf em{display:none !important}

  .dqm-promo-bar .dqm-promo-inner{
    flex-wrap:nowrap !important;gap:7px !important;padding:0 10px !important;
    font-size:10.5px !important;line-height:20px !important}
  .dqm-promo-inner > span:first-child{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .dqm-promo-btn{font-size:10px !important;padding:3px 9px !important;flex:none}
  .dqm-promo-close{font-size:1rem !important;margin-left:4px !important;flex:none}
}

/* Nachtrag: im Hinweisband ist das erste Kind das Blitz-Zeichen, nicht der
   Satz - deshalb griff "span:first-child" ins Leere. Statt den Satz
   abzuschneiden darf das Band auf dem Handy zwei Zeilen hoch sein; die
   Hoehe steuert --promo-h, an der Ticker und Kopfzeile haengen. */
@media (max-width:820px){
  html{--promo-h:48px}
  .dqm-promo-bar{height:auto !important;min-height:48px;overflow:visible !important;
    padding:6px 0 !important;display:flex;align-items:center}
  .dqm-promo-bar .dqm-promo-inner{
    flex-wrap:wrap !important;justify-content:center;row-gap:2px !important;
    column-gap:7px !important;padding:0 34px 0 10px !important;
    font-size:10.5px !important;line-height:1.35 !important;width:100%}
  .dqm-promo-inner > svg{flex:0 0 13px;min-width:13px;width:13px;height:13px}
  .dqm-promo-inner > span{flex:1 1 auto;min-width:0;text-align:left}
  .dqm-promo-btn{font-size:10px !important;padding:3px 9px !important;flex:none}
  .dqm-promo-close{position:absolute;right:8px;top:50%;transform:translateY(-50%);
    font-size:1.1rem !important;margin:0 !important}
}

/* =====================================================================
   Handy: Kopfbereich aufgeraeumt.
   Bisher standen drei Baender uebereinander - Hinweisband, Laufschrift
   und Kopfzeile - und darunter noch 300 px Leerraum. Die Laufschrift ist
   auf dem Telefon nur Rauschen (sie wiederholt Aussagen, die weiter unten
   ohnehin stehen) und lief seitlich ueber. Sie entfaellt, das Hinweisband
   darf dafuer zwei Zeilen hoch sein.
   ===================================================================== */
@media (max-width:820px){
  .dqm-ticker,.dqm-ticker-spacer{display:none !important}
  html{--promo-h:52px}
  .dqm-promo-bar{height:52px !important;min-height:0;overflow:hidden !important;
    padding:5px 0 !important}
  .dqm-promo-bar .dqm-promo-inner{
    padding:0 30px 0 10px !important;font-size:10px !important;line-height:1.3 !important;
    column-gap:6px !important;row-gap:1px !important;align-content:center}
  .dqm-promo-btn{font-size:9.5px !important;padding:2px 8px !important}
  .dqm-promo-bar .dqm-promo-inner button.dqm-promo-close{
    border:0 !important;background:transparent !important;box-shadow:none !important;
    outline:0 !important;padding:0 !important;width:22px;height:22px;line-height:22px}
  .dqm-topbar{top:52px !important}
  .dqm-hero{padding-top:150px !important}
}

/* Die Auszeichnungszeile ueber der Ueberschrift lag noch knapp unter der
   Kopfzeile - etwas mehr Abstand */
@media (max-width:820px){ .dqm-hero{padding-top:168px !important} }

/* =====================================================================
   Handy: Dreiergruppen sauber untereinander statt "zwei und ein Waisenkind".
   Im Branchen-Block standen Flexibel/Messbar/Zukunftssicher als umbrechende
   Reihe - zwei nebeneinander, das dritte allein und mittig darunter.
   Auf dem Telefon liest sich eine Zeile je Merkmal besser: Zeichen links,
   Text rechts, alles auf einer Kante.
   ===================================================================== */
@media (max-width:820px){
  .q-br-merkmale{flex-direction:column !important;align-items:stretch !important;
    flex-wrap:nowrap !important;gap:14px !important}
  .q-br-merkmale > div{
    display:grid !important;grid-template-columns:auto minmax(0,1fr) !important;
    column-gap:13px;row-gap:1px;align-items:center;text-align:left !important}
  .q-br-merkmale > div > .q-br-mikon{grid-row:1 / span 2;align-self:center;margin:0 !important}
  .q-br-merkmale > div > b{align-self:end}
  .q-br-merkmale > div > span:last-child{align-self:start}
}

/* =====================================================================
   Handy: Branchen-Spur war zu Streifen zerquetscht.
   Die Karten tragen zusaetzlich die alte Klasse .dqm-uc-grid, und deren
   Handy-Regel setzt grid-template-columns. Sobald eine Spaltenvorlage
   steht, greift grid-auto-columns nicht mehr - die sechs Karten teilten
   sich die Bildschirmbreite und wurden 2 px schmal. Vorlage abschalten.
   ===================================================================== */
.q-branchen-block .q-br-spur.dqm-uc-grid{
  grid-template-columns:none !important;
  grid-auto-flow:column !important}
@media (max-width:560px){
  .q-branchen-block .q-br-spur.dqm-uc-grid{grid-auto-columns:82% !important}
}
@media (min-width:561px) and (max-width:820px){
  .q-branchen-block .q-br-spur.dqm-uc-grid{grid-auto-columns:calc((100% - 20px) / 2) !important}
}

/* Die Spur lief nur ueber 299 von 390 px - links und rechts blieb totes
   Feld. Auf dem Telefon soll sie ueber die volle Breite wischen, mit
   kleinem Anlauf am Rand. */
@media (max-width:820px){
  .q-branchen-block .q-br-spur.dqm-uc-grid{
    width:100vw !important;max-width:100vw !important;
    margin-left:50% !important;transform:translateX(-50%);
    padding-inline:20px !important;
    grid-auto-columns:78vw !important;
    scroll-padding-inline:20px}
  .q-branchen-block .q-br-karte{scroll-snap-align:start}
  .q-branchen-block .q-br-spur.dqm-uc-grid{scroll-snap-type:x mandatory}
}

/* =====================================================================
   Handy: Anmelden gehoert in die Kopfzeile.
   Eine Grundregel blendete den ganzen Aktionsbereich aus (display:none) -
   damit verschwand auch die einzige Schaltflaeche zur Anmeldung, und der
   Weg dorthin lag nur noch im Klappmenue. Auf einer Seite, die Anmeldungen
   bringen soll, ist das teuer. Zeichen fuer WhatsApp/Chat bleiben draussen,
   die sitzen in der Leiste unten rechts.
   ===================================================================== */
@media (max-width:820px){
  .dqm-topbar-actions{display:flex !important;align-items:center;margin-left:auto}
  .dqm-topbar-actions .dqm-topbar-icon{display:none !important}
  .dqm-topbar .dqm-topbar-btn{
    display:inline-flex !important;align-items:center;gap:6px;
    height:36px;padding:0 13px !important;border-radius:10px;
    font-size:12.5px;font-weight:700;white-space:nowrap}
  .dqm-topbar .dqm-topbar-btn svg{flex:0 0 14px;min-width:14px;width:14px;height:14px}
  /* Platz schaffen: das Kuerzel neben der Flagge kann weg, die Sprache
     steht ohnehin im Klappmenue */
  .dqm-lang-code{display:none !important}
  .dqm-lang-current{padding:6px 8px !important;gap:4px !important}
}
@media (max-width:400px){
  .dqm-topbar .dqm-topbar-btn{padding:0 10px !important;font-size:12px}
  .dqm-topbar-logo img{height:40px !important}
}

/* Die Beschriftung war durch eine alte Handy-Regel ausgeblendet -
   ein reines Zeichen sagt niemandem, dass hier der Zugang liegt */
@media (max-width:820px){
  .dqm-topbar .dqm-topbar-btn span{display:inline !important}
}

/* =====================================================================
   Block 12 - Jetzt starten
   Links Ueberschrift, Haken, zwei Schaltflaechen und die Notiz mit Pfeil,
   rechts das Telefon mit der Erfolgskarte. Unten vier Hinweise.
   ===================================================================== */
.q-jetzt{padding-block:96px 90px;background:#F7FAF9;position:relative;overflow:hidden}
.q-js-gitter{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:56px;align-items:center}

.q-js-links{position:relative;z-index:2}
.q-jetzt h2{font-size:46px !important;line-height:1.08 !important;letter-spacing:-.035em;
  font-weight:800 !important;color:#0E2033 !important;margin:0 0 20px !important;text-align:left !important}
.q-jetzt h2 i{font-style:normal;color:#17A05B}
.q-js-text{font-size:17px;line-height:1.6;color:#5C6F82;margin:0 0 26px;max-width:470px}

.q-js-haken{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-direction:column;gap:13px}
.q-js-haken li{display:flex;align-items:center;gap:13px;font-size:16.5px;font-weight:600;color:#0E2033}
.q-js-kreis{width:24px;height:24px;border-radius:50%;background:#17A05B;display:grid;place-items:center;flex:none}
.q-js-kreis svg{width:13px;height:13px}

.q-js-knoepfe{display:flex;gap:16px;align-items:stretch;flex-wrap:wrap}
.q-js-knopf{height:58px;font-size:16.5px;border-radius:13px;padding:0 26px}
.q-js-video{display:inline-flex;align-items:center;gap:13px;background:#fff;border:1px solid #E4EAEF;
  border-radius:13px;padding:0 20px;height:58px;box-shadow:0 6px 18px rgba(14,32,51,.05);text-decoration:none}
.q-js-video:hover{border-color:#17A05B}
.q-js-video > svg{flex:0 0 26px;min-width:26px}
.q-js-video b{display:block;font-size:15.5px;font-weight:700;color:#0E2033;line-height:1.2}
.q-js-video span span{display:block;font-size:12.5px;color:#8296A8;margin-top:2px}

.q-js-notiz{display:flex;align-items:flex-start;gap:8px;margin-top:20px;
  font-size:21px;line-height:1.2;color:#17A05B;transform:rotate(-2deg)}
.q-js-notiz svg{flex:0 0 70px;min-width:70px;margin-top:-6px}
.q-js-notiz em{font-style:normal;display:block;padding-top:16px}

/* ---------- rechte Seite ---------- */
.q-js-rechts{position:relative;display:flex;justify-content:center}
.q-js-geraet{position:relative;width:100%;max-width:300px}
.q-js-geraet img{display:block;width:100%;height:auto;border-radius:22px;
  box-shadow:0 28px 64px rgba(14,32,51,.20)}
.q-js-erfolg{position:absolute;left:-34px;bottom:34px;width:242px;background:#fff;
  border:1px solid #E6EFEA;border-radius:16px;padding:15px 17px;
  box-shadow:0 20px 44px rgba(14,32,51,.14);text-align:left}
.q-js-haken-gross{width:34px;height:34px;border-radius:50%;background:#17A05B;
  display:grid;place-items:center;margin-bottom:9px}
.q-js-haken-gross svg{width:19px;height:19px}
.q-js-erfolg b{display:block;font-size:15px;font-weight:800;color:#0E2033;margin-bottom:3px}
.q-js-erfolg em{display:block;font-style:normal;font-size:12px;line-height:1.45;color:#8296A8}

.q-js-notiz2{position:absolute;right:-72px;top:-52px;width:132px;display:block;z-index:3;
  font-size:20px;line-height:1.2;color:#17A05B;transform:rotate(-3deg);text-align:left}
.q-js-notiz2 em{font-style:normal;display:block}
.q-js-notiz2 svg{margin:2px 0 0 30px}

/* ---------- Streifen ---------- */
.q-js-streifen{display:grid !important;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:62px;
  padding-top:32px;border-top:1px solid #E4EDE8}
.q-js-streifen > div{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.q-js-sikon{width:34px;height:34px;border-radius:10px;background:#E9F6EF;display:grid;place-items:center;
  margin-bottom:7px}
.q-js-sikon svg{width:19px;height:19px}
.q-js-streifen b{font-size:14.5px;font-weight:800;color:#0E2033}
.q-js-streifen > div > span:last-child{font-size:12.5px;color:#8296A8;line-height:1.4}

@media (max-width:1180px){
  .q-js-gitter{grid-template-columns:1fr;gap:44px}
  .q-js-notiz2{display:none}
  .q-jetzt h2{font-size:38px !important}
  .q-js-streifen{grid-template-columns:repeat(2,1fr);margin-top:44px}
}
@media (max-width:820px){
  .q-jetzt{padding-block:56px 60px}
  .q-jetzt h2{font-size:31px !important}
  .q-jetzt h2 br{display:none}
  .q-js-knopf,.q-js-video{width:100%;justify-content:center}
  .q-js-notiz{justify-content:center;transform:none;font-size:19px;margin-top:18px}
  .q-js-geraet{max-width:250px}
  .q-js-erfolg{position:static;width:100%;max-width:300px;margin:16px auto 0}
  .q-js-streifen{grid-template-columns:1fr;gap:18px;margin-top:36px}
}

/* Der Telefonausschnitt ist hochkant und wurde dadurch ueber 700 px hoch -
   der Abschnitt wuchs unnoetig. Hoehe deckeln, Ausschnitt auf den QR-Teil. */
.q-js-geraet{max-width:290px}
.q-js-geraet img{height:520px;object-fit:cover;object-position:center 18%}
@media (max-width:820px){
  .q-js-geraet{max-width:240px}
  .q-js-geraet img{height:400px}
}

/* Die zweite Notiz stand ausserhalb der Spalte und wurde abgeschnitten */
.q-js-notiz2{right:6px !important;top:-58px !important}

/* =====================================================================
   Block 13 - FAQ & Support
   Drei Spalten: links Ueberschrift, Haken und Kontaktkarte, in der Mitte
   die Fragenliste, rechts Bild, Notiz und der direkte Draht.
   Die Fragen tragen weiter ihre alten Klassen - hier nur neues Kleid.
   ===================================================================== */
.q-faq{padding-block:96px 90px;background:#fff;position:relative;overflow:hidden}
.q-fa-gitter{display:grid !important;
  grid-template-columns:minmax(0,330px) minmax(0,1fr) minmax(0,240px);
  gap:48px;align-items:start}

.q-fa-links{position:relative}
.q-faq h2{font-size:40px !important;line-height:1.08 !important;letter-spacing:-.035em;
  font-weight:800 !important;color:#0E2033 !important;margin:0 0 18px !important;text-align:left !important}
.q-faq h2 i{font-style:normal;color:#17A05B}
.q-fa-text{font-size:16px;line-height:1.6;color:#5C6F82;margin:0 0 24px}

.q-fa-haken{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:12px}
.q-fa-haken li{display:flex;align-items:center;gap:12px;font-size:15.5px;font-weight:600;color:#0E2033}
.q-fa-kreis{width:23px;height:23px;border-radius:50%;background:#17A05B;display:grid;place-items:center;flex:none}
.q-fa-kreis svg{width:13px;height:13px}

.q-fa-kontakt{background:#F4FAF7;border:1px solid #DFEFE7;border-radius:18px;padding:22px 22px 20px}
.q-fa-kikon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#fff;
  border:1px solid #E3EFE9;margin-bottom:12px}
.q-fa-kikon svg{width:22px;height:22px}
.q-fa-kontakt > b{display:block;font-size:18px;font-weight:800;color:#0E2033;margin-bottom:5px}
.q-fa-kontakt > em{display:block;font-style:normal;font-size:13.5px;line-height:1.5;color:#5C6F82;margin-bottom:16px}
.q-fa-knopf{width:100%;height:50px;font-size:15px;border-radius:12px}
.q-fa-kontakt small{display:block;margin-top:10px;font-size:11.5px;color:#8FA3B4;text-align:center}

/* ---------- Fragenliste ---------- */
.q-fa-mitte .dqm-faq-list{display:flex;flex-direction:column;gap:10px;max-width:none;margin:0}
.q-fa-mitte .dqm-faq-item{background:#fff;border:1px solid #E9EEF2;border-radius:14px;overflow:hidden;
  box-shadow:0 4px 14px rgba(14,32,51,.04);transition:border-color .2s ease,box-shadow .2s ease}
.q-fa-mitte .dqm-faq-item:hover{border-color:#CFE3D8}
.q-fa-mitte .dqm-faq-item.active{border-color:#17A05B;box-shadow:0 12px 30px rgba(23,160,91,.10)}
.q-fa-mitte .dqm-faq-q{width:100%;display:flex !important;align-items:center;justify-content:space-between;
  gap:14px;background:#fff !important;border:0 !important;box-shadow:none !important;
  padding:17px 20px !important;text-align:left;cursor:pointer;
  font-size:15.5px;font-weight:700;color:#0E2033 !important;line-height:1.4}
.q-fa-mitte .dqm-faq-chevron{flex:0 0 19px;min-width:19px;width:19px;height:19px;color:#8296A8;
  transition:transform .25s ease}
.q-fa-mitte .dqm-faq-item.active .dqm-faq-chevron{transform:rotate(180deg);color:#17A05B}
.q-fa-mitte .dqm-faq-a{padding:0 20px 18px;font-size:14.5px;line-height:1.6;color:#5C6F82;
  background:#F8FBF9;border-top:1px solid #EEF4F0;padding-top:15px}

/* ---------- rechte Spalte ---------- */
.q-fa-rechts{position:relative;padding-top:52px}
.q-fa-notiz{position:absolute;left:4px;top:-34px;width:132px;display:block;z-index:3;
  font-size:19px;line-height:1.2;color:#17A05B;transform:rotate(-3deg);text-align:left}
.q-fa-notiz em{font-style:normal;display:block}
.q-fa-notiz svg{margin:2px 0 0 30px}
.q-fa-bild{display:block;width:100%;height:auto;border-radius:16px;
  box-shadow:0 18px 40px rgba(14,32,51,.14);margin-bottom:16px}

.q-fa-draht{background:#fff;border:1px solid #E9EEF2;border-radius:16px;padding:16px 16px 12px;
  box-shadow:0 8px 24px rgba(14,32,51,.06)}
.q-fa-draht > b{display:block;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#8296A8;margin-bottom:12px}
.q-fa-draht a{display:flex;align-items:center;gap:11px;padding:9px 0;text-decoration:none;
  border-top:1px solid #F2F5F8}
.q-fa-draht a:first-of-type{border-top:0;padding-top:0}
.q-fa-dikon{flex:0 0 32px;min-width:32px;height:32px;border-radius:10px;background:#F4F8F6;
  display:grid;place-items:center}
.q-fa-dikon svg{width:18px;height:18px}
.q-fa-draht a b{display:block;font-size:13.5px;font-weight:700;color:#0E2033}
.q-fa-draht a em{display:block;font-style:normal;font-size:12px;color:#8296A8;margin-top:1px}

/* ---------- Streifen ---------- */
.q-fa-streifen{display:grid !important;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px;
  padding-top:30px;border-top:1px solid #E7EDF2}
.q-fa-streifen > div{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.q-fa-sikon{width:34px;height:34px;border-radius:10px;background:#EAF7F0;display:grid;place-items:center;
  margin-bottom:7px}
.q-fa-sikon svg{width:19px;height:19px}
.q-fa-streifen b{font-size:14.5px;font-weight:800;color:#0E2033}
.q-fa-streifen > div > span:last-child{font-size:12.5px;color:#8296A8;line-height:1.4}

@media (max-width:1240px){
  .q-fa-gitter{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px}
  .q-fa-rechts{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);
    gap:24px;align-items:center;padding-top:0}
  .q-fa-notiz{display:none}
  .q-fa-bild{margin-bottom:0}
}
@media (max-width:820px){
  .q-faq{padding-block:56px 60px}
  .q-faq h2{font-size:31px !important}
  .q-fa-gitter{grid-template-columns:1fr;gap:32px}
  .q-fa-rechts{grid-template-columns:1fr;gap:16px}
  .q-fa-mitte .dqm-faq-q{font-size:14.5px;padding:15px 16px !important}
  .q-fa-mitte .dqm-faq-a{font-size:13.5px;padding-left:16px;padding-right:16px}
  .q-fa-streifen{grid-template-columns:1fr;gap:18px;margin-top:36px}
}

/* Korrektur Block 13:
   1. Die Mechanik schaltet die Klasse "open", nicht "active" - ich hatte auf
      den falschen Namen gestylt, deshalb standen alle Antworten offen.
   2. Zusammenklappen laeuft ueber max-height; meine Polsterung hat das
      ausgehebelt. Jetzt beides in einer Regel, damit es zusammenpasst.
   3. Die Fragenfarbe kam aus einer Themenregel - ueber die Kennung erzwungen.
   ===================================================================== */
#faq .q-fa-mitte .dqm-faq-a{
  max-height:0 !important;overflow:hidden !important;
  padding-top:0 !important;padding-bottom:0 !important;border-top:0 !important;
  transition:max-height .3s ease,padding .25s ease}
#faq .q-fa-mitte .dqm-faq-item.open .dqm-faq-a{
  max-height:460px !important;padding-top:15px !important;padding-bottom:18px !important;
  border-top:1px solid #EEF4F0 !important}
#faq .q-fa-mitte .dqm-faq-item.open{border-color:#17A05B;box-shadow:0 12px 30px rgba(23,160,91,.10)}
#faq .q-fa-mitte .dqm-faq-item.open .dqm-faq-chevron{transform:rotate(180deg);color:#17A05B}
#faq .q-fa-mitte .dqm-faq-q,
#faq .q-fa-mitte .dqm-faq-q:hover,
#faq .q-fa-mitte .dqm-faq-q:focus,
#faq .q-fa-mitte .dqm-faq-q:focus-visible,
#faq .q-fa-mitte .dqm-faq-item.open .dqm-faq-q{
  color:#0E2033 !important;font-size:15.5px !important;font-weight:700 !important}
#faq .q-fa-mitte .dqm-faq-chevron{color:#8296A8}

/* Die geoeffnete Frage bekam aus einer Themenregel einen beigen Untergrund -
   das beisst sich mit dem gruenen Kleid */
#faq .q-fa-mitte .dqm-faq-item.open .dqm-faq-q,
#faq .q-fa-mitte .dqm-faq-q:hover{background:#fff !important}
#faq .q-fa-mitte .dqm-faq-item.open .dqm-faq-a{background:#F8FBF9 !important}

/* =====================================================================
   Block 14 - Sicherheit & Datenschutz
   Links Ueberschrift, Haken und Schaltflaeche; Mitte sechs Karten im
   3x2-Raster; rechts die Status-Tafel mit Notiz; unten der Streifen.
   ===================================================================== */
.q-sicher{padding-block:96px 90px;background:#FBFCFD;position:relative;overflow:hidden}
.q-si-gitter{display:grid !important;
  grid-template-columns:minmax(0,320px) minmax(0,1fr) minmax(0,266px);
  gap:44px;align-items:start}

.q-si-links{position:relative}
.q-sicher h2{font-size:42px !important;line-height:1.07 !important;letter-spacing:-.035em;
  font-weight:800 !important;color:#0E2033 !important;margin:0 0 18px !important;text-align:left !important}
.q-sicher h2 i{font-style:normal;color:#17A05B}
.q-si-text{font-size:15.5px;line-height:1.65;color:#5C6F82;margin:0 0 26px}

.q-si-haken{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:12px}
.q-si-haken li{display:flex;align-items:center;gap:12px;font-size:15.5px;font-weight:600;color:#0E2033}
.q-si-kreis{width:23px;height:23px;border-radius:50%;background:#17A05B;display:grid;place-items:center;flex:none}
.q-si-kreis svg{width:13px;height:13px}
.q-si-knopf{height:54px;font-size:15.5px;border-radius:12px;padding:0 24px}

/* ---------- Karten ---------- */
.q-si-mitte{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:16px}
.q-si-karte{background:#fff;border:1px solid #EAEFF3;border-radius:16px;padding:20px 18px 18px;
  box-shadow:0 6px 20px rgba(14,32,51,.05);transition:border-color .2s ease,transform .2s ease}
.q-si-karte:hover{border-color:#CFE3D8;transform:translateY(-2px)}
.q-si-kikon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#EAF7F0;
  margin-bottom:14px}
.q-si-kikon svg{width:23px;height:23px}
.q-si-karte b{display:block;font-size:15.5px;font-weight:800;color:#0E2033;margin-bottom:7px;line-height:1.25}
.q-si-karte p{margin:0;font-size:13px;line-height:1.55;color:#5C6F82}

/* ---------- Status-Tafel ---------- */
.q-si-rechts{position:relative;padding-top:58px}
.q-si-notiz{position:absolute;left:2px;top:-30px;width:170px;display:block;z-index:3;
  font-size:19px;line-height:1.2;color:#17A05B;transform:rotate(-3deg);text-align:left}
.q-si-notiz em{font-style:normal;display:block}
.q-si-notiz svg{margin:2px 0 0 40px}

.q-si-tafel{background:#0E2033;border-radius:20px;padding:22px 20px 20px;color:#fff;
  box-shadow:0 24px 54px rgba(14,32,51,.22)}
.q-si-schild{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:rgba(23,160,91,.22);margin-bottom:14px}
.q-si-schild svg{width:24px;height:24px}
.q-si-tafel > b{display:block;font-size:17px;font-weight:800;margin-bottom:4px}
.q-si-tafel > em{display:block;font-style:normal;font-size:12.5px;color:#93A6B7;margin-bottom:16px}
.q-si-status{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:11px}
.q-si-status li{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.4;color:#DCE6EE}
.q-si-status svg{flex:0 0 15px;min-width:15px;width:15px;height:15px;margin-top:1px}
.q-si-avv{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:11px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  font-size:12.5px;font-weight:700;color:#fff !important;text-decoration:none}
.q-si-avv:hover{background:rgba(23,160,91,.28);border-color:#17A05B}
.q-si-avv svg{flex:0 0 15px;min-width:15px}

/* ---------- Streifen ---------- */
.q-si-streifen{display:grid !important;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:56px;
  padding-top:30px;border-top:1px solid #E4EAEF}
.q-si-streifen > div{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.q-si-sikon{width:34px;height:34px;border-radius:10px;background:#EAF7F0;display:grid;place-items:center;
  margin-bottom:7px}
.q-si-sikon svg{width:19px;height:19px}
.q-si-streifen b{font-size:13.5px;font-weight:800;color:#0E2033;line-height:1.3}
.q-si-streifen > div > span:last-child{font-size:12px;color:#8296A8;line-height:1.4}

@media (max-width:1240px){
  .q-si-gitter{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:36px}
  .q-si-mitte{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .q-si-rechts{grid-column:1 / -1;padding-top:0;max-width:420px}
  .q-si-notiz{display:none}
  .q-si-streifen{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .q-sicher{padding-block:56px 60px}
  .q-sicher h2{font-size:31px !important}
  .q-si-gitter{grid-template-columns:1fr;gap:30px}
  .q-si-mitte{grid-template-columns:1fr !important;gap:12px}
  .q-si-knopf{width:100%;justify-content:center}
  .q-si-rechts{max-width:none}
  .q-si-streifen{grid-template-columns:1fr;gap:16px;margin-top:34px}
}

/* Deutsche Komposita sprengen schmale Karten - "Auftragsverarbeitungsvertrag"
   stand ueber den Rand hinaus. Trennen erlauben. */
.q-si-karte p,.q-si-karte b,.q-si-status li{overflow-wrap:break-word;hyphens:auto}
.q-si-avv{height:auto;min-height:42px;padding:9px 12px;line-height:1.35;text-align:left}

/* =====================================================================
   Handy: Rasterfelder duerfen nicht breiter werden als der Bildschirm.
   Ein Rasterfeld hat von Haus aus min-width:auto - laenger Inhalt drueckt
   die Spur dann ueber den Rand, auch wenn die Spalte "1fr" heisst.
   Deshalb ueberall minmax(0,1fr) und min-width:0 auf den Kindern.
   ===================================================================== */
@media (max-width:820px){
  .q-fa-gitter,.q-si-gitter,.q-integ-gitter,.q-preise-gitter,.q-js-gitter,.q-buch-gitter{
    grid-template-columns:minmax(0,1fr) !important}
  .q-fa-gitter > *,.q-si-gitter > *,.q-integ-gitter > *,.q-preise-gitter > *,
  .q-js-gitter > *,.q-buch-gitter > *{min-width:0}
  .q-fa-rechts{grid-template-columns:minmax(0,1fr) !important}
  .q-si-mitte{grid-template-columns:minmax(0,1fr) !important}
}

/* =====================================================================
   Block 15 - Kontakt & Beratung
   Links Ueberschrift, Haken und Erstberatung; Mitte das Formular;
   rechts die Kontaktkarten mit Notiz; unten der Streifen.
   ===================================================================== */
.q-kontakt{padding-block:96px 90px;background:#fff;position:relative;overflow:hidden}
.q-ko-gitter{display:grid !important;
  grid-template-columns:minmax(0,330px) minmax(0,1fr) minmax(0,272px);
  gap:40px;align-items:start}

.q-ko-links{position:relative}
.q-kontakt h2{font-size:40px !important;line-height:1.08 !important;letter-spacing:-.035em;
  font-weight:800 !important;color:#0E2033 !important;margin:0 0 18px !important;text-align:left !important}
.q-kontakt h2 i{font-style:normal;color:#17A05B}
.q-ko-text{font-size:15.5px;line-height:1.65;color:#5C6F82;margin:0 0 24px}

.q-ko-haken{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px}
.q-ko-haken li{display:flex;align-items:center;gap:12px;font-size:15.5px;font-weight:600;color:#0E2033}
.q-ko-kreis{width:23px;height:23px;border-radius:50%;background:#17A05B;display:grid;place-items:center;flex:none}
.q-ko-kreis svg{width:13px;height:13px}

.q-ko-beratung{background:#F4FAF7;border:1px solid #DFEFE7;border-radius:18px;padding:20px}
.q-ko-bikon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#fff;
  border:1px solid #E3EFE9;margin-bottom:12px}
.q-ko-bikon svg{width:22px;height:22px}
.q-ko-beratung > b{display:block;font-size:17px;font-weight:800;color:#0E2033;margin-bottom:4px}
.q-ko-beratung > em{display:block;font-style:normal;font-size:13px;color:#5C6F82;margin-bottom:15px}
.q-ko-bknopf{width:100%;height:50px;font-size:14.5px;border-radius:12px;padding:0 16px;text-align:center}

/* ---------- Formular ---------- */
.q-ko-formular{background:#fff;border:1px solid #E9EEF2;border-radius:20px;padding:26px 24px 22px;
  box-shadow:0 14px 38px rgba(14,32,51,.07);display:flex;flex-direction:column;gap:14px}
.q-ko-formular > b{font-size:20px;font-weight:800;color:#0E2033;letter-spacing:-.02em}
.q-ko-fsub{margin:-10px 0 4px;font-size:13.5px;color:#8296A8}
.q-ko-reihe{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.q-ko-formular label{display:block;font-size:13px;font-weight:600;color:#3B5068}
.q-ko-formular label i{font-style:normal;color:#17A05B}
.q-ko-formular input,.q-ko-formular textarea{
  width:100%;margin-top:6px;border:1px solid #E1E8EE;border-radius:11px;background:#FBFCFD;
  padding:12px 14px;font-size:14.5px;color:#0E2033;font-family:inherit;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.q-ko-formular textarea{resize:vertical;min-height:104px;line-height:1.55}
.q-ko-formular input::placeholder,.q-ko-formular textarea::placeholder{color:#AFBECB}
.q-ko-formular input:focus,.q-ko-formular textarea:focus{
  outline:0;border-color:#17A05B;background:#fff;box-shadow:0 0 0 3px rgba(23,160,91,.12)}
.q-ko-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.q-ko-senden{height:54px;font-size:16px;border-radius:12px;width:100%;margin-top:2px}
.q-ko-senden:disabled{opacity:.65;cursor:default}
.q-ko-melden{margin:0;font-size:13.5px;line-height:1.5;min-height:0}
.q-ko-melden.ist-gut{color:#0E8A4B;font-weight:600}
.q-ko-melden.ist-fehler{color:#C0392B;font-weight:600}
.q-ko-fein{margin:0;display:flex;align-items:flex-start;gap:8px;font-size:11.5px;line-height:1.5;color:#8296A8}
.q-ko-fein svg{flex:0 0 14px;min-width:14px;margin-top:2px}
.q-ko-fein a{color:#17A05B;text-decoration:underline}

/* ---------- Kontaktkarten ---------- */
.q-ko-rechts{position:relative;padding-top:56px;display:flex;flex-direction:column;gap:12px}
.q-ko-notiz{position:absolute;left:0;top:-26px;width:160px;display:block;z-index:3;
  font-size:19px;line-height:1.2;color:#17A05B;transform:rotate(-3deg);text-align:left}
.q-ko-notiz em{font-style:normal;display:block}
.q-ko-notiz svg{margin:2px 0 0 52px}

.q-ko-karte{display:block;background:#fff;border:1px solid #EAEFF3;border-radius:16px;padding:16px 17px;
  text-decoration:none;box-shadow:0 6px 18px rgba(14,32,51,.05);
  transition:border-color .2s ease,transform .2s ease}
a.q-ko-karte:hover{border-color:#17A05B;transform:translateY(-2px)}
.q-ko-kikon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#EAF7F0;
  margin-bottom:11px}
.q-ko-kikon svg{width:20px;height:20px}
.q-ko-karte b{display:block;font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:#8296A8;margin-bottom:3px}
.q-ko-karte strong{display:block;font-size:15.5px;font-weight:800;color:#0E2033;margin-bottom:4px;
  overflow-wrap:break-word}
.q-ko-karte em{display:block;font-style:normal;font-size:12px;line-height:1.45;color:#8296A8}
.q-ko-karte--still{background:#FBFCFD}

/* ---------- Streifen ---------- */
.q-ko-streifen{display:grid !important;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px;
  padding-top:30px;border-top:1px solid #E7EDF2}
.q-ko-streifen > div{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.q-ko-sikon{width:34px;height:34px;border-radius:10px;background:#EAF7F0;display:grid;place-items:center;
  margin-bottom:7px}
.q-ko-sikon svg{width:19px;height:19px}
.q-ko-streifen b{font-size:14px;font-weight:800;color:#0E2033;line-height:1.3}
.q-ko-streifen > div > span:last-child{font-size:12px;color:#8296A8;line-height:1.4}

@media (max-width:1240px){
  .q-ko-gitter{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:34px}
  .q-ko-rechts{grid-column:1 / -1;padding-top:0;display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .q-ko-notiz{display:none}
}
@media (max-width:820px){
  .q-kontakt{padding-block:56px 60px}
  .q-kontakt h2{font-size:30px !important}
  .q-ko-gitter{grid-template-columns:minmax(0,1fr) !important;gap:26px}
  .q-ko-rechts{grid-template-columns:minmax(0,1fr) !important}
  .q-ko-reihe{grid-template-columns:minmax(0,1fr) !important}
  .q-ko-formular{padding:20px 16px 18px}
  .q-ko-streifen{grid-template-columns:1fr;gap:16px;margin-top:34px}
}

/* Korrektur Block 15:
   - Der Sendeknopf ist ein <button>; eine Grundregel der Vorlage nimmt
     Schaltflaechen den Hintergrund. Nur mit Nachdruck zu halten.
   - Das WhatsApp-Zeichen wurde von der Regel svg{fill:none} entfaerbt,
     deshalb die Farbe direkt auf den Pfad. */
#kontakt .q-ko-senden{
  background:#17A05B !important;color:#fff !important;border:0 !important;
  box-shadow:0 12px 26px rgba(23,160,91,.26) !important}
#kontakt .q-ko-senden:hover{background:#12854B !important;color:#fff !important}
#kontakt .q-ko-senden:disabled{background:#8FC4A9 !important;box-shadow:none !important}
#kontakt .q-ko-kikon svg path[fill]{fill:#25D366 !important}
#kontakt .q-ko-bknopf{background:#17A05B !important;color:#fff !important}
#kontakt .q-ko-bknopf:hover{background:#12854B !important;color:#fff !important}

/* =====================================================================
   Nacharbeit 18.09. nach Alexanders Handy-Aufnahmen
   ===================================================================== */

/* 1. Das Kreuz im Klappmenue trug einen goldenen Rahmen aus einer
      Grundregel der Vorlage. Es ist eine Schaltflaeche - blank machen. */
#dqm-mobile-menu #q-menue-zu,
#dqm-mobile-menu #q-menue-zu:hover,
#dqm-mobile-menu #q-menue-zu:focus,
#dqm-mobile-menu #q-menue-zu:focus-visible,
#dqm-mobile-menu #q-menue-zu:active{
  border:0 !important;border-width:0 !important;border-color:transparent !important;
  background:transparent !important;box-shadow:none !important;outline:0 !important;
  border-radius:12px !important;padding:6px !important}
#dqm-mobile-menu #q-menue-zu:hover{background:#F2F5F8 !important}

/* 2. Die Zeichen im Klappmenue standen in unterschiedlichen Staerken und
      Groessen nebeneinander. Eine Groesse, eine Spur, kein Zappeln. */
.dqm-mobile-menu .dqm-mobile-link > svg{
  flex:0 0 22px !important;min-width:22px !important;width:22px !important;height:22px !important}
.dqm-mobile-menu .dqm-mobile-link{gap:14px}

/* 3. Formularfelder trugen den goldenen Rahmen der Vorlage. */
#kontakt .q-ko-formular input[type="text"],
#kontakt .q-ko-formular input[type="email"],
#kontakt .q-ko-formular input[type="tel"],
#kontakt .q-ko-formular textarea{
  border:1px solid #E1E8EE !important;border-radius:11px !important;background:#FBFCFD !important;
  box-shadow:none !important}
#kontakt .q-ko-formular input:focus,
#kontakt .q-ko-formular textarea:focus{
  border-color:#17A05B !important;background:#fff !important;
  box-shadow:0 0 0 3px rgba(23,160,91,.12) !important;outline:0 !important}

/* 4. Einwilligung nach DSGVO */
.q-ko-zustimmung{display:flex !important;align-items:flex-start;gap:10px;
  font-size:12.5px !important;font-weight:400 !important;line-height:1.5;color:#5C6F82 !important;
  background:#FBFCFD;border:1px solid #EDF1F5;border-radius:12px;padding:12px 13px;cursor:pointer}
.q-ko-zustimmung input[type="checkbox"]{
  appearance:auto;-webkit-appearance:checkbox;
  flex:0 0 17px;min-width:17px;width:17px;height:17px;margin:1px 0 0;
  accent-color:#17A05B;cursor:pointer}
.q-ko-zustimmung span{display:block}
.q-ko-zustimmung a{color:#17A05B;text-decoration:underline}
.q-ko-zustimmung i{font-style:normal;color:#17A05B}

/* 5. Der Hinweis unter dem Knopf brach den Link in eine eigene Spalte. */
.q-ko-fein{display:block !important;position:relative;padding-left:20px}
.q-ko-fein svg{position:absolute;left:0;top:3px}

/* 6. Die weichen Farbschleier der Abschnitte sind fuer breite Schirme
      gerechnet. Auf dem Telefon decken sie die halbe Breite ab und sehen
      aus wie eine harte Kante quer durch den Block. */
@media (max-width:820px){
  .q-vertrauensblock::before,.q-dashboard::before,.q-branchen-block::before{display:none !important}
}

/* 7. Bilder sollen auf dem Telefon die Breite nutzen, nicht als Briefmarke
      in der Mitte stehen. */
@media (max-width:820px){
  .q-preise-bild{max-width:none !important;margin-top:36px !important}
  .q-preise-bild img{width:100% !important;height:300px;object-fit:cover;object-position:center 30%}
  .q-js-geraet{max-width:none !important}
  .q-js-geraet img{height:340px !important}
  .q-fa-bild{width:100% !important;height:200px;object-fit:cover}
}

/* 8. Die drei Zusicherungen unter den Hero-Schaltflaechen brachen als
      zentrierte Reihe in drei verschieden eingerueckte Zeilen um. Auf dem
      Telefon gehoeren sie untereinander auf eine Kante. */
@media (max-width:820px){
  .dqm-hero-trust{
    display:flex !important;flex-direction:column !important;flex-wrap:nowrap !important;
    align-items:flex-start !important;justify-content:flex-start !important;
    gap:10px !important;width:fit-content;margin-inline:auto}
  .dqm-hero-trust > *{display:flex;align-items:center;gap:8px;white-space:nowrap}
}

/* =====================================================================
   Block 16 - Jetzt starten (Abschluss)
   Links Text, Mitte Karte mit Schaltflaechen und echtem QR-Code,
   rechts das Foto. Unten der Streifen.
   ===================================================================== */
.q-abschluss{padding-block:96px 88px;background:#F7FAF9;position:relative;overflow:hidden}
.q-ab-gitter{display:grid !important;
  grid-template-columns:minmax(0,330px) minmax(0,1fr) minmax(0,300px);
  gap:44px;align-items:center}

.q-abschluss h2{font-size:44px !important;line-height:1.06 !important;letter-spacing:-.035em;
  font-weight:800 !important;color:#0E2033 !important;margin:0 0 18px !important;text-align:left !important}
.q-abschluss h2 i{font-style:normal;color:#17A05B}
.q-ab-text{font-size:16px;line-height:1.6;color:#5C6F82;margin:0 0 24px}
.q-ab-haken{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.q-ab-haken li{display:flex;align-items:center;gap:12px;font-size:15.5px;font-weight:600;color:#0E2033}
.q-ab-kreis{width:23px;height:23px;border-radius:50%;background:#17A05B;display:grid;place-items:center;flex:none}
.q-ab-kreis svg{width:13px;height:13px}

/* ---------- Mitte ---------- */
.q-ab-mitte{display:flex;flex-direction:column;gap:30px}
.q-ab-karte{background:#fff;border:1px solid #E9EEF2;border-radius:20px;padding:22px;
  box-shadow:0 14px 38px rgba(14,32,51,.07);display:flex;flex-direction:column;gap:12px}
.q-ab-knopf{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;
  border-radius:13px;font-size:16px;font-weight:700;text-decoration:none;border:1px solid transparent}
.q-ab-knopf svg{flex:0 0 18px;min-width:18px}
.q-ab-knopf--rand{background:#fff;color:#0E2033;border-color:#E4EAEF}
.q-ab-knopf--rand:hover{border-color:#17A05B;color:#17A05B}
.q-ab-fein{margin:2px 0 0;font-size:12.5px;color:#8296A8;text-align:center}

.q-ab-qrreihe{display:flex;align-items:center;justify-content:center;gap:26px}
.q-ab-notiz1{font-size:20px;line-height:1.2;color:#17A05B;transform:rotate(-3deg);
  text-align:left;display:block;flex:none}
.q-ab-notiz1 em{font-style:normal;display:block}
.q-ab-notiz1 svg{margin:4px 0 0 -4px}
.q-ab-qr{margin:0;text-align:center}
.q-ab-qr img{display:block;width:156px;height:156px;border-radius:14px;background:#fff;
  padding:8px;border:1px solid #E9EEF2;box-shadow:0 10px 26px rgba(14,32,51,.08)}
.q-ab-qr figcaption{margin-top:10px}
.q-ab-qr figcaption b{display:block}
.q-ab-qr figcaption b svg{height:20px;width:auto;display:inline-block}
.q-ab-qr figcaption span{display:block;font-size:11.5px;color:#8296A8;margin-top:3px;letter-spacing:.04em}

/* ---------- rechts ---------- */
.q-ab-rechts{position:relative}
.q-ab-notiz2{position:absolute;right:4px;top:-72px;width:158px;display:block;z-index:3;
  font-size:19px;line-height:1.2;color:#17A05B;transform:rotate(-3deg);text-align:left}
.q-ab-notiz2 em{font-style:normal;display:block}
.q-ab-notiz2 svg{margin:2px 0 0 48px}
.q-ab-bild{display:block;width:100%;height:auto;border-radius:18px;
  box-shadow:0 22px 50px rgba(14,32,51,.16)}

/* ---------- Streifen ---------- */
.q-ab-streifen{display:grid !important;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px;
  padding-top:30px;border-top:1px solid #E4EDE8}
.q-ab-streifen > div{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.q-ab-sikon{width:34px;height:34px;border-radius:10px;background:#E9F6EF;display:grid;place-items:center;
  margin-bottom:7px}
.q-ab-sikon svg{width:19px;height:19px}
.q-ab-streifen b{font-size:14px;font-weight:800;color:#0E2033;line-height:1.3}
.q-ab-streifen > div > span:last-child{font-size:12px;color:#8296A8;line-height:1.4}

@media (max-width:1240px){
  .q-ab-gitter{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start}
  .q-ab-rechts{grid-column:1 / -1}
  .q-ab-notiz2{display:none}
  .q-abschluss h2{font-size:36px !important}
  .q-ab-streifen{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .q-abschluss{padding-block:56px 58px}
  .q-abschluss h2{font-size:30px !important}
  .q-abschluss h2 br{display:none}
  .q-ab-gitter{grid-template-columns:minmax(0,1fr) !important;gap:28px}
  .q-ab-qrreihe{flex-direction:column;gap:14px}
  .q-ab-notiz1{transform:none;text-align:center;font-size:18px}
  .q-ab-notiz1 svg{display:none}
  .q-ab-streifen{grid-template-columns:1fr;gap:16px;margin-top:34px}
}

/* =====================================================================
   Fussbereich auf dem Telefon: Linkspalten als Aufklapper.
   Der Behaelter .q-fuss-liste wird erst im Browser gesetzt - auf breiten
   Schirmen ist er durchsichtig (display:contents), dort bleibt alles wie
   bisher. Die Links stehen unveraendert im HTML, nur eingeklappt.
   ===================================================================== */
.q-fuss-liste{display:contents}
.q-fuss-pfeil{display:none}

@media (max-width:820px){
  .q-fuss-klapp{border-bottom:1px solid rgba(130,150,168,.22);padding:0 !important;margin:0 !important}
  .q-fuss-klapp > h4,
  .q-fuss-klapp > .qrova-sitenav__h{
    display:flex !important;align-items:center;justify-content:space-between;gap:12px;
    margin:0 !important;padding:15px 2px !important;cursor:pointer;
    font-size:14.5px !important;font-weight:800 !important;letter-spacing:.02em;
    user-select:none;-webkit-tap-highlight-color:transparent}
  .q-fuss-klapp .q-fuss-pfeil{
    display:grid;place-items:center;flex:0 0 22px;min-width:22px;height:22px;
    border-radius:7px;background:rgba(130,150,168,.14);
    transition:transform .25s ease,background .2s ease}
  .q-fuss-klapp .q-fuss-pfeil svg{width:14px;height:14px}
  .q-fuss-klapp.ist-auf .q-fuss-pfeil{transform:rotate(180deg);background:rgba(23,160,91,.18);color:#17A05B}

  .q-fuss-klapp .q-fuss-liste{
    display:block;max-height:0;overflow:hidden;
    transition:max-height .3s ease,padding .25s ease;padding-bottom:0}
  .q-fuss-klapp.ist-auf .q-fuss-liste{max-height:760px;padding-bottom:14px}
  .q-fuss-klapp .q-fuss-liste a{display:block;padding:9px 2px;font-size:14px;line-height:1.4}

  /* Der Markenblock bleibt offen - dort stehen keine Linklisten */
  .dqm-footer-inner,.qrova-sitenav__inner{
    display:block !important;padding-inline:4px}
  .dqm-footer-brand-col{margin-bottom:18px}
}

/* =====================================================================
   Alt-Abschnitte im neuen Kleid
   Generator, Anwendungsbeispiele, Video, Vergleich, Partner, Newsletter.
   Es wird ausschliesslich umgestylt - die Auszeichnung bleibt unangetastet,
   damit Mechanik, Uebersetzung und Verlinkung unveraendert weiterlaufen.
   Grundmasse wie in den Bloecken 01-16: 40px Ueberschrift, Karten mit
   1px #EAEFF3 und 16-20px Radius, Zeichen in 34-46px Kacheln auf #EAF7F0.
   ===================================================================== */

/* ---------- gemeinsame Kopfzeilen ---------- */
.dqm-generator,.dqm-detailed-cases,.dqm-video-section,
.dqm-comparison,.dqm-partner-cta,.dqm-newsletter{
  background:#fff !important;padding:92px 24px 86px !important;position:relative}
.dqm-detailed-cases,.dqm-comparison{background:#FBFCFD !important}
.dqm-partner-cta{background:#F7FAF9 !important}

.dqm-generator h2,.dqm-detailed-cases h3,.dqm-video-section h2,
.dqm-comparison h3,.dqm-partner-cta h2,.dqm-newsletter h2{
  font-size:40px !important;line-height:1.08 !important;letter-spacing:-.035em !important;
  font-weight:800 !important;color:#0E2033 !important;margin:0 0 14px !important}
.dqm-generator .dqm-section-sub,.dqm-detailed-cases .dqm-section-sub,
.dqm-comparison .dqm-section-sub,.dqm-video-section .dqm-section-sub{
  font-size:16.5px !important;line-height:1.6 !important;color:#5C6F82 !important;
  max-width:640px;margin:0 auto 44px !important}
.dqm-section-label,.dqm-generator .dqm-section-label{
  display:inline-block;font-size:12.5px !important;letter-spacing:.2em !important;
  text-transform:uppercase;color:#8296A8 !important;font-weight:700 !important;margin-bottom:14px !important}

/* ---------- QR-Generator ---------- */
.dqm-generator .dqm-generator-header{text-align:center;margin-bottom:40px}
.dqm-gen-wrap{max-width:1180px;margin:0 auto;gap:34px !important}
.dqm-gen-form,.dqm-gen-preview{
  background:#fff !important;border:1px solid #E9EEF2 !important;border-radius:20px !important;
  box-shadow:0 12px 34px rgba(14,32,51,.06) !important;padding:26px 24px !important}
.dqm-gen-step-label{
  font-size:12.5px !important;font-weight:800 !important;letter-spacing:.12em;text-transform:uppercase;
  color:#8296A8 !important;margin:0 0 12px !important}
.dqm-gen-types{gap:8px !important}
.dqm-gen-type{
  background:#FBFCFD !important;border:1px solid #E6EDF2 !important;border-radius:12px !important;
  color:#3B5068 !important;font-size:12.5px !important;font-weight:600 !important;
  padding:10px 8px !important;box-shadow:none !important;transition:border-color .18s ease,background .18s ease}
.dqm-gen-type:hover{border-color:#BFDDCC !important;background:#fff !important}
.dqm-gen-type.active{
  background:#EAF7F0 !important;border-color:#17A05B !important;color:#0E8A4B !important;font-weight:800 !important}
.dqm-gen-type svg{flex:0 0 20px;min-width:20px}
.dqm-gen-pro-tag{background:#17A05B !important;color:#fff !important;border-radius:5px !important}
.dqm-gen-input,.dqm-gen-fields input,.dqm-gen-fields select,.dqm-gen-fields textarea{
  border:1px solid #E1E8EE !important;border-radius:11px !important;background:#FBFCFD !important;
  color:#0E2033 !important;font-size:14.5px !important;padding:12px 14px !important;box-shadow:none !important}
.dqm-gen-input:focus,.dqm-gen-fields input:focus,.dqm-gen-fields textarea:focus{
  border-color:#17A05B !important;background:#fff !important;
  box-shadow:0 0 0 3px rgba(23,160,91,.12) !important;outline:0 !important}
.dqm-gen-input::placeholder,.dqm-gen-fields input::placeholder{color:#AFBECB !important}
.dqm-gen-btn{
  background:#17A05B !important;color:#fff !important;border:0 !important;border-radius:12px !important;
  height:52px !important;font-size:15.5px !important;font-weight:700 !important;
  box-shadow:0 12px 26px rgba(23,160,91,.26) !important}
.dqm-gen-btn:hover{background:#12854B !important}
.dqm-gen-dl{
  background:#fff !important;color:#0E2033 !important;border:1px solid #E4EAEF !important;
  border-radius:11px !important;font-weight:700 !important}
.dqm-gen-dl:hover{border-color:#17A05B !important;color:#17A05B !important}
.dqm-gen-canvas-wrap{background:#FBFCFD !important;border:1px solid #EEF2F6 !important;border-radius:16px !important}
.dqm-gen-hint,.dqm-gen-after{color:#8296A8 !important;font-size:12.5px !important}
.dqm-gen-style-opt{border:1px solid #E6EDF2 !important;border-radius:10px !important;background:#fff !important}
.dqm-gen-style-opt.active{border-color:#17A05B !important;box-shadow:0 0 0 2px rgba(23,160,91,.14) !important}

/* ---------- Anwendungsbeispiele ---------- */
.dqm-detailed-cases{text-align:center}
.dqm-dcases-grid{max-width:1180px;margin:0 auto;gap:18px !important}
.dqm-dcase{
  background:#fff !important;border:1px solid #EAEFF3 !important;border-radius:18px !important;
  padding:24px 22px !important;text-align:left !important;
  box-shadow:0 8px 24px rgba(14,32,51,.05) !important;
  transition:border-color .2s ease,transform .2s ease}
.dqm-dcase:hover{border-color:#CFE3D8 !important;transform:translateY(-3px)}
.dqm-dcase-icon{
  display:grid !important;place-items:center;width:46px !important;height:46px !important;
  border-radius:14px !important;background:#EAF7F0 !important;color:#17A05B !important;
  margin-bottom:16px !important;border:0 !important}
.dqm-dcase-icon svg{width:23px;height:23px;stroke:#17A05B !important}
.dqm-dcase h3{font-size:17px !important;font-weight:800 !important;color:#0E2033 !important;
  margin:0 0 9px !important;line-height:1.3 !important;letter-spacing:-.01em !important}
.dqm-dcase p{font-size:14px !important;line-height:1.6 !important;color:#5C6F82 !important;margin:0 0 14px !important}
.dqm-dcase-tags{display:flex;flex-wrap:wrap;gap:7px}
.dqm-dcase-tags span{
  background:#F2F7F4 !important;color:#3B5068 !important;border:1px solid #E4EDE8 !important;
  border-radius:8px !important;font-size:11.5px !important;font-weight:600 !important;padding:5px 10px !important}

/* ---------- Video ---------- */
.dqm-video-section{background:#F7FAF9 !important}
.dqm-video-inner{max-width:1180px;margin:0 auto;gap:44px !important}
.dqm-video-badge{
  display:inline-block;background:#EAF7F0 !important;color:#0E8A4B !important;border:0 !important;
  border-radius:9px !important;font-size:12px !important;font-weight:800 !important;
  letter-spacing:.1em;text-transform:uppercase;padding:7px 13px !important;margin-bottom:16px !important}
.dqm-video-text p{font-size:16.5px !important;line-height:1.65 !important;color:#5C6F82 !important}
.dqm-video-list li{font-size:15px !important;color:#0E2033 !important}
.dqm-video-player{border-radius:20px !important;overflow:hidden;
  box-shadow:0 24px 56px rgba(14,32,51,.16) !important;border:1px solid #E9EEF2 !important}
.dqm-video-player video{display:block;width:100%;height:auto}
.dqm-video-glow{display:none !important}

/* ---------- Vergleich ---------- */
.dqm-comparison{text-align:center}
.dqm-compare-wrap{max-width:1100px;margin:0 auto;border:1px solid #E9EEF2;border-radius:18px;
  background:#fff;box-shadow:0 10px 30px rgba(14,32,51,.05);overflow:hidden}
.dqm-compare-table{border-collapse:collapse !important;width:100%;background:#fff !important}
.dqm-compare-table th,.dqm-compare-table td{
  border:0 !important;border-bottom:1px solid #F0F4F7 !important;
  padding:13px 14px !important;font-size:14px !important;color:#3B5068 !important;text-align:center}
.dqm-compare-table thead th{
  background:#FBFCFD !important;color:#0E2033 !important;font-weight:800 !important;
  font-size:13.5px !important;border-bottom:1px solid #E7EDF2 !important}
.dqm-compare-table td:first-child,.dqm-compare-table th:first-child{text-align:left !important;font-weight:600}
.dqm-compare-table .dqm-ours{background:#F4FAF7 !important;color:#0E2033 !important;font-weight:700 !important}
.dqm-compare-table thead .dqm-ours{background:#EAF7F0 !important;color:#0E8A4B !important}
.dqm-compare-table tr:last-child td{border-bottom:0 !important}
.dqm-check{color:#17A05B !important;font-weight:800}
.dqm-cross{color:#C6D0D9 !important}
.dqm-partial{color:#E0A106 !important;font-size:12.5px}

/* ---------- Partner ---------- */
.dqm-partner-inner{max-width:1180px;margin:0 auto;gap:44px !important}
.dqm-partner-text p{font-size:16.5px !important;line-height:1.65 !important;color:#5C6F82 !important}
.dqm-partner-perks li{font-size:15px !important;color:#0E2033 !important}
.dqm-partner-card{
  background:#fff !important;border:1px solid #E9EEF2 !important;border-radius:20px !important;
  box-shadow:0 16px 40px rgba(14,32,51,.08) !important;color:#0E2033 !important}
.dqm-partner-card-label{color:#8296A8 !important;font-size:12px !important;letter-spacing:.1em;text-transform:uppercase}
.dqm-partner-card-row{border-bottom:1px solid #F0F4F7 !important}
.dqm-partner-cta .dqm-btn-primary{
  background:#17A05B !important;color:#fff !important;border:0 !important;border-radius:12px !important;
  box-shadow:0 12px 26px rgba(23,160,91,.26) !important}
.dqm-partner-cta .dqm-btn-primary:hover{background:#12854B !important}

/* ---------- Newsletter ---------- */
.dqm-newsletter{background:#0E2033 !important}
.dqm-newsletter h2{color:#fff !important}
.dqm-newsletter-inner{max-width:760px;margin:0 auto;text-align:center}
.dqm-newsletter-icon{
  display:grid !important;place-items:center;width:52px;height:52px;border-radius:16px;
  background:rgba(23,160,91,.2) !important;margin:0 auto 18px !important}
.dqm-newsletter-icon svg{width:26px;height:26px;stroke:#7FE3AE !important}
.dqm-newsletter p{color:#A8BBCB !important;font-size:16px !important;line-height:1.6 !important}
.dqm-newsletter-form input{
  border:1px solid rgba(255,255,255,.18) !important;background:rgba(255,255,255,.07) !important;
  color:#fff !important;border-radius:12px !important;padding:14px 16px !important;font-size:15px !important}
.dqm-newsletter-form input::placeholder{color:#8DA3B6 !important}
.dqm-newsletter-form input:focus{border-color:#17A05B !important;outline:0 !important;
  box-shadow:0 0 0 3px rgba(23,160,91,.2) !important}
.dqm-newsletter-form button{
  background:#17A05B !important;color:#fff !important;border:0 !important;border-radius:12px !important;
  font-weight:700 !important;padding:14px 26px !important}
.dqm-newsletter-form button:hover{background:#12854B !important}
.dqm-newsletter-hint{color:#7E94A8 !important;font-size:12px !important}

/* ---------- Telefon ---------- */
@media (max-width:820px){
  .dqm-generator,.dqm-detailed-cases,.dqm-video-section,
  .dqm-comparison,.dqm-partner-cta,.dqm-newsletter{padding:56px 18px 58px !important}
  .dqm-generator h2,.dqm-detailed-cases h3,.dqm-video-section h2,
  .dqm-comparison h3,.dqm-partner-cta h2,.dqm-newsletter h2{font-size:29px !important}
  .dqm-gen-wrap,.dqm-dcases-grid,.dqm-video-inner,.dqm-partner-inner{
    grid-template-columns:minmax(0,1fr) !important;gap:20px !important}
  .dqm-gen-form,.dqm-gen-preview{padding:18px 15px !important}
  .dqm-gen-types{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .dqm-gen-type{font-size:11px !important;padding:9px 5px !important}
  .dqm-dcase{padding:20px 17px !important}
  .dqm-compare-wrap{border-radius:14px}
  .dqm-compare-table th,.dqm-compare-table td{padding:10px 9px !important;font-size:12.5px !important}
}

/* Die Ueberschrift der Rassel ist ein h3, nicht h2 - sonst blieb sie
   dunkel auf dunklem Grund */
.dqm-newsletter h3{font-size:34px !important;line-height:1.1 !important;letter-spacing:-.03em !important;
  font-weight:800 !important;color:#fff !important;margin:0 0 12px !important}
@media (max-width:820px){ .dqm-newsletter h3{font-size:26px !important} }

/* =====================================================================
   Kundenbereich im neuen Kleid
   Nur Stil - die Auszeichnung bleibt unangetastet, damit alle Ansichten,
   Formulare und Aufrufe unveraendert weiterlaufen.
   Aus der dunklen Vorlage sind zwei Dinge uebrig geblieben: das schwarze
   Band ganz oben (#111) und Goldtoene (rgba(201,169,98,...)) an Navigation,
   Karten und Knoepfen. Beides wird ersetzt.
   ===================================================================== */

/* ---------- Band ganz oben ---------- */
#dqm-topbar-strip{
  background:#fff !important;border-bottom:1px solid #E9EEF2 !important;
  box-shadow:0 1px 0 rgba(14,32,51,.02) !important}
#dqm-topbar-strip a,#dqm-topbar-strip button,#dqm-topbar-strip span{color:#0E2033 !important}
#dqm-topbar-strip svg[aria-label="QROVA"],#dqm-topbar-strip .qrova-marke{color:#0E2033 !important}
#dqm-topbar-strip svg[aria-label="QROVA"] *{fill:currentColor}
#dqm-topbar-strip .dqm-topbar-icon,
#dqm-topbar-strip a[href*="wa.me"],
#dqm-topbar-strip button{
  background:#fff !important;border:1px solid #E9EEF2 !important;border-radius:11px !important;
  box-shadow:none !important}
#dqm-topbar-strip .dqm-topbar-icon:hover,#dqm-topbar-strip button:hover{border-color:#17A05B !important}

/* ---------- Seitenleiste ---------- */
.dqm-sidebar{background:#fff !important;border-right:1px solid #EDF1F5 !important}
.dqm-nav-item{
  color:#5C6F82 !important;border-radius:11px !important;font-weight:600 !important;
  border-left:0 !important;transition:background .18s ease,color .18s ease}
.dqm-nav-item:hover{background:#F4F7F9 !important;color:#0E2033 !important}
.dqm-nav-item.active{
  background:#EAF7F0 !important;color:#0E8A4B !important;font-weight:800 !important;
  box-shadow:inset 3px 0 0 #17A05B}
.dqm-nav-icon{opacity:1 !important}
.dqm-nav-item svg{stroke:currentColor !important}

/* ---------- Karten und Kennzahlen ---------- */
.dqm-pub-card,.dqm-pub-stat,.dqm-module-card,.dqm-an-stat{
  background:#fff !important;border:1px solid #EAEFF3 !important;border-radius:18px !important;
  box-shadow:0 8px 24px rgba(14,32,51,.05) !important}
.dqm-pub-card h2,.dqm-view-header h1,.dqm-view-header h2{
  color:#0E2033 !important;font-weight:800 !important;letter-spacing:-.02em !important}
.dqm-pub-stat .stat-val,.dqm-an-stat-num{
  color:#0E2033 !important;font-weight:800 !important;font-variant-numeric:tabular-nums}
.dqm-pub-stat .stat-lbl,.dqm-an-stat-label{color:#8296A8 !important}
.dqm-module-card-icon{
  background:#EAF7F0 !important;color:#17A05B !important;border:0 !important;border-radius:14px !important}
.dqm-module-card-icon svg{stroke:#17A05B !important}
.dqm-mc-header{background:#F7FAF9 !important;border-bottom:1px solid #EEF3F6 !important}
.dqm-mc-features li{color:#3B5068 !important}
.dqm-mc-cta{
  background:#fff !important;color:#0E8A4B !important;border:1px solid #CFE3D8 !important;
  border-radius:12px !important;font-weight:700 !important}
.dqm-mc-cta:hover{background:#EAF7F0 !important;border-color:#17A05B !important}

/* ---------- Knoepfe ---------- */
#dqm-cabinet .dqm-btn-primary{
  background:#17A05B !important;color:#fff !important;border:0 !important;border-radius:12px !important;
  font-weight:700 !important;box-shadow:0 10px 22px rgba(23,160,91,.24) !important}
#dqm-cabinet .dqm-btn-primary:hover{background:#12854B !important}
#dqm-cabinet .dqm-btn:not(.dqm-btn-primary){
  background:#fff !important;color:#0E2033 !important;border:1px solid #E4EAEF !important;
  border-radius:11px !important;font-weight:600 !important}
#dqm-cabinet .dqm-btn:not(.dqm-btn-primary):hover{border-color:#17A05B !important;color:#17A05B !important}

/* ---------- Felder ---------- */
#dqm-cabinet input[type="text"],#dqm-cabinet input[type="url"],#dqm-cabinet input[type="email"],
#dqm-cabinet input[type="tel"],#dqm-cabinet input[type="number"],#dqm-cabinet input[type="date"],
#dqm-cabinet input[type="search"],#dqm-cabinet select,#dqm-cabinet textarea,
.pub-field,.dqm-an-search{
  border:1px solid #E1E8EE !important;border-radius:11px !important;background:#FBFCFD !important;
  color:#0E2033 !important;box-shadow:none !important}
#dqm-cabinet input:focus,#dqm-cabinet select:focus,#dqm-cabinet textarea:focus,
.pub-field:focus,.dqm-an-search:focus{
  border-color:#17A05B !important;background:#fff !important;outline:0 !important;
  box-shadow:0 0 0 3px rgba(23,160,91,.12) !important}
.dqm-pub-form-group label{color:#3B5068 !important;font-weight:600 !important}

/* ---------- QR-Typ-Auswahl ---------- */
.dqm-type-option{
  background:#FBFCFD !important;border:1px solid #E6EDF2 !important;border-radius:12px !important;
  color:#3B5068 !important;font-weight:600 !important}
.dqm-type-option:hover{border-color:#BFDDCC !important;background:#fff !important}
.dqm-type-option.active,.dqm-type-option.selected{
  background:#EAF7F0 !important;border-color:#17A05B !important;color:#0E8A4B !important;font-weight:800 !important}

/* ---------- Sprache und mobile Bedienelemente ---------- */
#dqm-cabinet .dqm-lang-current,#dqm-topbar-strip .dqm-lang-current,
.dqm-mobile-menu-btn,.dqm-mobile-nav-close{
  background:#fff !important;border:1px solid #E9EEF2 !important;color:#0E2033 !important;
  border-radius:11px !important;box-shadow:none !important}
.dqm-lang-option{color:#3B5068 !important;background:#fff !important;border:0 !important}
.dqm-lang-option:hover{background:#F4F7F9 !important}
.dqm-lang-option.active{background:#EAF7F0 !important;color:#0E8A4B !important;font-weight:700 !important}

/* ---------- Hinweise auf den Pro-Tarif ---------- */
#dqm-cabinet [class*="upgrade"],#dqm-cabinet .dqm-pro-hint{
  background:#F7FAF9 !important;border:1px dashed #CFE3D8 !important;border-radius:14px !important;
  color:#5C6F82 !important}

/* ---------- Begruessungsfenster ---------- */
.dqm-sp-head,#dqm-onboarding,.dqm-onboarding-card{
  background:#fff !important;border:1px solid #E9EEF2 !important;border-radius:18px !important;
  color:#0E2033 !important;box-shadow:0 20px 48px rgba(14,32,51,.14) !important}
.dqm-sp-head *,#dqm-onboarding p,.dqm-onboarding-card p{color:#5C6F82 !important}
.dqm-sp-head b,#dqm-onboarding b,.dqm-onboarding-card b,
#dqm-onboarding h3,.dqm-onboarding-card h3{color:#0E2033 !important}

/* ---------- Tabellen ---------- */
#dqm-cabinet table{border-collapse:collapse !important;background:#fff !important}
#dqm-cabinet th{
  background:#FBFCFD !important;color:#0E2033 !important;font-weight:800 !important;
  border-bottom:1px solid #E7EDF2 !important}
#dqm-cabinet td{border-bottom:1px solid #F2F5F8 !important;color:#3B5068 !important}
#dqm-cabinet tr:hover td{background:#FBFCFD !important}

@media (max-width:820px){
  #dqm-topbar-strip{padding-inline:12px !important}
  .dqm-pub-card,.dqm-pub-stat,.dqm-module-card{border-radius:14px !important}
}

/* =====================================================================
   Wortmarke: die Bausteine starteten mit opacity:0 und tauchten erst nach
   rund einer Sekunde auf. Laeuft die Bewegung nicht - pausierte Seite,
   eingeschraenkte Bewegung, alter Browser - bleibt das Zeichen leer. Das
   ist beim Firmenzeichen nicht hinnehmbar: Grundzustand jetzt sichtbar,
   die Einblendung laeuft trotzdem.
   ===================================================================== */
.q-logo--an .q-logo-modul{opacity:1 !important}
.q-logo--an .q-logo-rahmen{stroke-dashoffset:0}

/* Begruessungsfenster im Kundenbereich war noch dunkelblau */
#dqm-ob-card{background:#fff !important;border:1px solid #E9EEF2 !important;
  border-radius:18px !important;box-shadow:0 20px 48px rgba(14,32,51,.16) !important}
#dqm-ob-card,#dqm-ob-card p,#dqm-ob-card span{color:#5C6F82 !important}
#dqm-ob-card b,#dqm-ob-card strong,#dqm-ob-card h3,#dqm-ob-card h4{color:#0E2033 !important}
#dqm-ob-card button{border-radius:11px !important}