/* QueryCue Core — Store/Konto Widgets.
   Design-Tokens aus der QueryCue-Palette (Elementor Global Colors).
   Bewusst KEIN Rot, kein knalliges Grün — ruhig, professionell (Typeform-Niveau). */

.qcc-auth,
.qcc-price,
.qcc-thanks,
.qcc-dash,
.qcc-cl {
    --qcc-primary: #276A7E;
    --qcc-primary-hover: #1f5666;
    --qcc-on-primary: #ffffff;
    --qcc-text: #18191D;
    --qcc-muted: rgba(24, 25, 29, .56);
    --qcc-border: rgba(112, 112, 112, .22);
    --qcc-card: #ffffff;
    --qcc-bg: #EEEEEE;
    --qcc-field-bg: #ffffff;
    --qcc-radius: 12px;
    --qcc-radius-sm: 10px;
    --qcc-ok-bg: #e8f2f4;
    --qcc-ok-text: #1f5666;
    --qcc-err-bg: #f6ece9;
    --qcc-err-text: #8a4b3c;

    color: var(--qcc-text);
    font-family: inherit;
    box-sizing: border-box;
}
.qcc-auth *, .qcc-price *, .qcc-thanks *, .qcc-dash *, .qcc-cl * { box-sizing: border-box; }

/* =====================================================================
   Konto-Widget (Login / Registrierung)
   ===================================================================== */
/* Schlicht per Default: kein Karten-Chrome — nur zentriertes, kompaktes Formular.
   Karte/Hintergrund/Rahmen kann bei Bedarf über die Elementor-Container-Controls
   ergänzt werden. */
.qcc-auth {
    max-width: 400px;
    margin: 0 auto;
}
.qcc-auth--in { text-align: center; }
.qcc-auth__welcome { margin: 0; }

/* Hard-Switch — segmentierter Umschalter (Login | Registrieren), vom Root
   [data-view] gesteuert (kein JS-Klassenwechsel nötig). */
.qcc-auth .qcc-switch {
    position: relative;
    display: flex;
    gap: 4px;
    margin: 0 auto 24px;
    padding: 4px;
    background: var(--qcc-asw-bar, #e3e6ea);
    border-radius: 999px;
}
.qcc-auth .qcc-switch__btn {
    position: relative;
    z-index: 1;
    flex: 1;
    background: transparent;
    border: 0;
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--qcc-asw-text, var(--qcc-muted));
    cursor: pointer;
    font-family: inherit;
    transition: color .2s, background .2s;
}
.qcc-auth .qcc-switch__btn:hover {
    color: var(--qcc-asw-text-h, var(--qcc-text));
    background: var(--qcc-asw-bg-h, transparent);
}
/* Aktiv-Fallback (ohne JS): Karte direkt am Button. */
.qcc-auth[data-view="login"] .qcc-switch__btn[data-view="login"],
.qcc-auth[data-view="register"] .qcc-switch__btn[data-view="register"] {
    background: var(--qcc-asw-bg-a, var(--qcc-card));
    color: var(--qcc-asw-text-a, var(--qcc-text));
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
/* Gleitender Indikator (per JS positioniert); Fallback-Karte am Button entfällt, sobald bereit. */
.qcc-switch__thumb {
    position: absolute; top: 50%; left: 0; z-index: 0; width: 0; height: 0;
    background: var(--qcc-asw-bg-a, var(--qcc-card)); border-radius: 999px; box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    transform: translate(0, -50%);
    transition: transform .32s cubic-bezier(.45, .05, .15, 1), width .32s cubic-bezier(.45, .05, .15, 1);
    pointer-events: none;
}
.qcc-auth .qcc-switch.is-ready .qcc-switch__btn { background: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .qcc-switch__thumb { transition: none; } }

/* Panes — Standard/ohne JS: einfache Umschaltung (funktioniert immer). */
.qcc-auth__pane { display: none; flex-direction: column; gap: 14px; }
.qcc-auth[data-view="login"] .qcc-auth__pane[data-view="login"],
.qcc-auth[data-view="register"] .qcc-auth__pane[data-view="register"] { display: flex; }

/* Mit JS (.is-anim am Wrapper): sanfter Crossfade + Höhen-Animation. */
.qcc-auth__panes.is-anim { position: relative; overflow: hidden; transition: height .32s cubic-bezier(.45, .05, .15, 1); }
.qcc-auth__panes.is-anim .qcc-auth__pane {
    display: flex; position: absolute; top: 0; left: 0; width: 100%;
    opacity: 0; transform: translateY(6px); pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
}
.qcc-auth[data-view="login"]    .qcc-auth__panes.is-anim .qcc-auth__pane[data-view="login"],
.qcc-auth[data-view="register"] .qcc-auth__panes.is-anim .qcc-auth__pane[data-view="register"] {
    opacity: 1; transform: none; pointer-events: auto; z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
    .qcc-auth__panes.is-anim, .qcc-auth__panes.is-anim .qcc-auth__pane { transition: none; }
}

/* Zwei Felder nebeneinander (Vorname/Nachname) — Platzhalter statt Labels */
.qcc-auth__row { display: flex; gap: 12px; }
.qcc-auth__row > .qcc-auth__input { flex: 1; min-width: 0; }

.qcc-auth__input {
    width: 100%;
    padding: 13px 15px;
    font-size: 15px;
    font-family: inherit;
    color: var(--qcc-text);
    background: var(--qcc-field-bg);
    border: 1px solid var(--qcc-border);
    border-radius: var(--qcc-radius-sm);
    transition: border-color .15s, box-shadow .15s;
}
.qcc-auth__input:focus {
    outline: none;
    border-color: var(--qcc-primary);
    box-shadow: 0 0 0 3px rgba(39, 106, 126, .14);
}
.qcc-auth__input::placeholder { color: var(--qcc-muted); }

/* Einwilligung — WICHTIG: Link explizit auf 13px setzen, sonst überschreibt die
   Elementor-Kit-Regel `.elementor-kit-N a { font-size: … }` die Größe. Die
   höhere Spezifität (.qcc-auth … a) gewinnt gegen die Kit-Regel. */
.qcc-auth .qcc-auth__consent,
.qcc-auth .qcc-auth__consent span,
.qcc-auth .qcc-auth__consent a {
    font-size: 13px;
    line-height: 1.5;
}
.qcc-auth .qcc-auth__consent {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    color: var(--qcc-muted);
    cursor: pointer;
}
.qcc-auth .qcc-auth__consent input { margin-top: 2px; accent-color: var(--qcc-primary); }
.qcc-auth .qcc-auth__consent a {
    color: var(--qcc-primary);
    font-weight: 600;
    text-decoration: underline;
}

/* 2-Klassen-Spezifität + appearance:none — schlägt Theme-/Kit-`button`-Regeln,
   die sonst wieder einen (runden) Rand um den Button legen. */
.qcc-auth .qcc-auth__submit {
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    color: var(--qcc-on-primary);
    background: var(--qcc-primary);
    border: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: var(--qcc-radius-sm);
    cursor: pointer;
    transition: background .15s;
}
.qcc-auth .qcc-auth__submit:hover { background: var(--qcc-primary-hover); }

.qcc-auth__hint { margin: 0; font-size: 12px; color: var(--qcc-muted); text-align: center; }

.qcc-auth__switch {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--qcc-muted);
    text-align: center;
}
/* „Jetzt registrieren"/„Anmelden" als reiner Text-Link (kein Button-Chrome).
   2-Klassen-Spezifität, damit Theme/Kit keinen Rahmen aufzwingt. */
.qcc-auth .qcc-auth__link {
    background: none;
    border: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--qcc-primary);
    text-decoration: underline;
    cursor: pointer;
}
.qcc-auth .qcc-switch__btn { -webkit-appearance: none; appearance: none; outline: none; }

.qcc-auth__notice { padding: 13px 15px; border-radius: var(--qcc-radius-sm); font-size: 14px; margin-bottom: 16px; }
.qcc-auth__notice--ok { background: var(--qcc-ok-bg); color: var(--qcc-ok-text); }
.qcc-auth__notice--err { background: var(--qcc-err-bg); color: var(--qcc-err-text); }

/* Honeypot — für echte Nutzer unsichtbar, für Bots ein Köder */
.qcc-auth__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* =====================================================================
   Pricing-Widget
   ===================================================================== */
.qcc-price { text-align: center; }

/* Segmentierte Switcher (Monat/Jahr · Menge · Scope) — gemeinsame Basis mit
   gleitendem Indikator (.qcc-price__thumb, per JS positioniert). Farben laufen
   über CSS-Variablen, damit die Elementor-Controls zuverlässig gewinnen. */
.qcc-price__toggle, .qcc-price__qty, .qcc-price__scopesw {
    position: relative; display: inline-flex; padding: 4px;
    background: var(--qcc-sw-bar, #e3e6ea); border-radius: 999px;
}
.qcc-price .qcc-price__toggle { margin: 0 auto 32px; }
.qcc-price .qcc-price__qty, .qcc-price .qcc-price__scopesw { margin-top: 12px; }

.qcc-price__thumb {
    position: absolute; top: 50%; left: 0; z-index: 0; width: 0; height: 0;
    border-radius: 999px; background: var(--qcc-sw-bg-a, var(--qcc-primary));
    transform: translate(0, -50%);
    transition: transform .32s cubic-bezier(.45,.05,.15,1), width .32s cubic-bezier(.45,.05,.15,1);
    pointer-events: none;
}

.qcc-price .qcc-price__toggle button,
.qcc-price .qcc-price__qty button,
.qcc-price .qcc-price__scopesw button {
    position: relative; z-index: 1;
    border: none; outline: none; -webkit-appearance: none; appearance: none;
    background: transparent; cursor: pointer; font-family: inherit;
    padding: 9px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.3;
    color: var(--qcc-sw-text, var(--qcc-muted)); transition: color .2s;
}
.qcc-price .qcc-price__qty button, .qcc-price .qcc-price__scopesw button { padding: 6px 15px; font-size: 13px; }
.qcc-price .qcc-price__toggle button:hover,
.qcc-price .qcc-price__qty button:hover,
.qcc-price .qcc-price__scopesw button:hover { color: var(--qcc-sw-text-h, var(--qcc-text)); background: var(--qcc-sw-bg-h, transparent); }
/* Aktiv: Textfarbe + Fallback-Hintergrund (falls JS/Thumb noch nicht bereit). */
.qcc-price .qcc-price__toggle button.is-active,
.qcc-price .qcc-price__qty button.is-active,
.qcc-price .qcc-price__scopesw button.is-active {
    color: var(--qcc-sw-text-a, #fff);
    background: var(--qcc-sw-bg-a, var(--qcc-primary));
}
/* Sobald der Thumb positioniert ist (.is-ready am Container), übernimmt er den Hintergrund. */
.qcc-price .qcc-price__toggle.is-ready button.is-active,
.qcc-price .qcc-price__qty.is-ready button.is-active,
.qcc-price .qcc-price__scopesw.is-ready button.is-active { background: transparent; }

.qcc-price__save { font-size: 11px; color: inherit; opacity: .85; margin-left: 6px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .qcc-price__thumb { transition: none; } }

.qcc-price__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    align-items: stretch; text-align: left;
}
@media (max-width: 880px) { .qcc-price__grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

.qcc-price__col {
    position: relative; display: flex; flex-direction: column;
    background: var(--qcc-card); border: 1px solid var(--qcc-border);
    border-radius: 16px; padding: 30px 26px;
}
.qcc-price__col--highlight {
    border-width: 2px; border-color: var(--qcc-primary);
    box-shadow: 0 14px 34px rgba(39, 106, 126, .12);
}
.qcc-price__badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--qcc-primary); color: #fff; font-size: 12px; font-weight: 700;
    padding: 5px 13px; border-radius: 999px; white-space: nowrap;
}
.qcc-price__title { font-size: 18px; font-weight: 700; color: var(--qcc-text); margin-bottom: 14px; }
/* Trennlinie unterhalb des Preises */
.qcc-price__amount-wrap {
    min-height: 44px; margin-bottom: 0; padding-bottom: 22px;
    border-bottom: 1px solid var(--qcc-border);
}
.qcc-price__amount { font-size: 32px; font-weight: 800; color: var(--qcc-text); }
.qcc-price__per { font-size: 14px; font-weight: 500; color: var(--qcc-muted); }
/* Trennlinie unterhalb der Auflistung */
.qcc-price__feats {
    list-style: none; margin: 22px 0 0; padding: 0 0 24px; flex: 1;
    border-bottom: 1px solid var(--qcc-border);
}
.qcc-price__cta-wrap { margin-top: 24px; }
.qcc-price__feat { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; font-size: 14px; color: var(--qcc-text); }
.qcc-price__ico { font-weight: 700; line-height: 1.4; }
.qcc-price__feat--in .qcc-price__ico { color: var(--qcc-primary); }
.qcc-price__feat--out { color: var(--qcc-muted); }
.qcc-price__feat--out .qcc-price__ico { color: #c3c8cf; }

/* Buttons (Pricing + Checkout) — 2-Klassen-Spezifität + appearance:none gegen
   Theme-/Kit-Ränder. */
.qcc-price .qcc-buy-button,
.qcc-price .qcc-buy-form button,
.qcc-buy-button {
    display: inline-block; width: 100%; text-align: center; cursor: pointer;
    background: var(--qcc-primary); color: var(--qcc-on-primary);
    border: none; outline: none; -webkit-appearance: none; appearance: none;
    padding: 13px 22px; font-size: 15px; font-weight: 600; font-family: inherit;
    border-radius: var(--qcc-radius-sm); text-decoration: none; transition: background .15s;
}
.qcc-price .qcc-buy-button:hover,
.qcc-price .qcc-buy-form button:hover,
.qcc-buy-button:hover { background: var(--qcc-primary-hover); color: var(--qcc-on-primary); }
.qcc-price .qcc-buy-form { margin: 0; }
.qcc-buy-button--disabled { opacity: .5; pointer-events: none; }

/* Toggle-Sichtbarkeit: nur Preis + CTA der aktiven Abrechnung (NICHT die Umschalt-Buttons) */
.qcc-price[data-active-billing="monthly"] .qcc-price__amount[data-billing="yearly"],
.qcc-price[data-active-billing="monthly"] .qcc-price__cta[data-billing="yearly"],
.qcc-price[data-active-billing="yearly"]  .qcc-price__amount[data-billing="monthly"],
.qcc-price[data-active-billing="yearly"]  .qcc-price__cta[data-billing="monthly"] { display: none; }

/* =====================================================================
   Danke-/Bestätigungs-Widget (W4)
   ===================================================================== */
.qcc-thanks { max-width: 520px; margin: 0 auto; }
.qcc-thanks__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    border: 2px solid var(--qcc-primary); color: var(--qcc-primary);
    font-size: 26px; font-weight: 700; margin-bottom: 18px; line-height: 1;
}
.qcc-thanks--cancel .qcc-thanks__icon { border-color: var(--qcc-muted); color: var(--qcc-muted); }
.qcc-thanks__title { font-size: 24px; font-weight: 700; color: var(--qcc-text); margin: 0 0 10px; }
.qcc-thanks__text { font-size: 15px; line-height: 1.6; color: var(--qcc-muted); margin: 0 0 22px; }
.qcc-thanks .qcc-thanks__btn {
    display: inline-block; background: var(--qcc-primary); color: #fff; text-decoration: none;
    border: none; outline: none; -webkit-appearance: none; appearance: none;
    padding: 13px 26px; border-radius: var(--qcc-radius-sm); font-size: 15px; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: background .15s;
}
.qcc-thanks .qcc-thanks__btn:hover { background: var(--qcc-primary-hover); color: #fff; }

/* =====================================================================
   Dashboard-Widget (W3) — Enterprise App-Shell (Sidebar + Content)
   ===================================================================== */
.qcc-dash {
    --qcc-dash-side: 256px;
    --qcc-dash-side-bg: #ffffff;
    --qcc-dash-canvas: #f6f7f9;
    --qcc-dash-accent: var(--qcc-primary);
    --qcc-dash-muted: rgba(24, 25, 29, .55);

    display: grid;
    grid-template-columns: var(--qcc-dash-side) 1fr;
    min-height: 640px;
    background: var(--qcc-dash-canvas);
    border: 1px solid var(--qcc-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 16px 40px rgba(16, 24, 40, .06);
    color: var(--qcc-text);
    font-size: 14px;
}
.qcc-dash__ico { flex: none; }

/* ---- Sidebar ---- */
.qcc-dash__side {
    background: var(--qcc-dash-side-bg);
    border-right: 1px solid var(--qcc-border);
    padding: 20px 14px;
    display: flex; flex-direction: column; gap: 4px;
}
.qcc-dash__brand {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px 20px; font-size: 16px; font-weight: 700; color: var(--qcc-text);
}
.qcc-dash__brand .qcc-dash__ico { color: var(--qcc-dash-accent); }
.qcc-dash__nav { display: flex; flex-direction: column; gap: 2px; }
.qcc-dash .qcc-dash__navbtn {
    display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
    background: transparent; border: none; outline: none; -webkit-appearance: none; appearance: none;
    cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500;
    color: var(--qcc-dash-muted); padding: 10px 12px; border-radius: 10px;
    transition: background .12s, color .12s;
}
.qcc-dash .qcc-dash__navbtn:hover { background: rgba(16, 24, 40, .04); color: var(--qcc-text); }
.qcc-dash .qcc-dash__navbtn.is-active { background: rgba(39, 106, 126, .10); color: var(--qcc-dash-accent); font-weight: 600; }

.qcc-dash__user {
    margin-top: auto; display: flex; align-items: center; gap: 10px;
    padding: 12px 8px 4px; border-top: 1px solid var(--qcc-border);
}
.qcc-dash__avatar {
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    background: var(--qcc-dash-accent); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.qcc-dash__avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.qcc-dash__user-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.qcc-dash__user-name { font-weight: 600; font-size: 13px; color: var(--qcc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qcc-dash__user-mail { font-size: 12px; color: var(--qcc-dash-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qcc-dash__logout { color: var(--qcc-dash-muted); display: flex; padding: 6px; border-radius: 8px; }
.qcc-dash__logout:hover { color: var(--qcc-text); background: rgba(16, 24, 40, .05); }

/* ---- Content ---- */
.qcc-dash__content { padding: 30px 34px; overflow: auto; }
/* Sichtbarkeit über die is-active-Klasse (vom Renderer gesetzt, vom JS umgeschaltet) —
   NICHT über eine hartkodierte Section-Liste. Eine solche Liste vergisst man beim
   nächsten neuen Tab (genau so blieb „produkte" unsichtbar). Generisch = drift-sicher. */
.qcc-dash__panel { display: none; }
.qcc-dash__panel.is-active { display: block; }

.qcc-dash__topbar { margin-bottom: 24px; }
.qcc-dash__ptitle { font-size: 22px; font-weight: 700; color: var(--qcc-text); margin: 0; letter-spacing: -.01em; }
.qcc-dash__sub { color: var(--qcc-dash-muted); font-size: 14px; margin: 5px 0 0; }
.qcc-dash__muted { color: var(--qcc-dash-muted); }
.qcc-dash__mb { margin: 0 0 16px; }
.qcc-dash__mt { margin-top: 16px; }

/* KPI-Kacheln */
.qcc-dash__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.qcc-dash__tile { background: var(--qcc-card); border: 1px solid var(--qcc-border); border-radius: 14px; padding: 18px 20px; }
.qcc-dash__tile-ico {
    width: 38px; height: 38px; border-radius: 10px; margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(39, 106, 126, .10); color: var(--qcc-dash-accent);
}
.qcc-dash__tile-label { font-size: 13px; color: var(--qcc-dash-muted); }
.qcc-dash__tile-value { font-size: 19px; font-weight: 700; color: var(--qcc-text); margin-top: 3px; }

/* Karten */
.qcc-dash__card { background: var(--qcc-card); border: 1px solid var(--qcc-border); border-radius: 14px; padding: 22px 24px; }
.qcc-dash__card + .qcc-dash__card { margin-top: 16px; }
/* In den Grids (Produkte, Downloads) liegen die Karten NEBENeinander — dort erledigt
   `gap` den Abstand. Die Stapel-Regel oben würde jede Karte ab der zweiten 16px nach
   unten drücken (die erste bleibt oben → schiefe Reihen). Im Grid daher zurücksetzen. */
.qcc-dash__prodgrid .qcc-dash__card + .qcc-dash__card,
.qcc-dash__dlgrid .qcc-dash__card + .qcc-dash__card { margin-top: 0; }
.qcc-dash__ctitle { font-size: 13px; font-weight: 600; color: var(--qcc-dash-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }

/* Key-Chip */
.qcc-dash__keychip {
    display: flex; align-items: center; gap: 8px;
    background: var(--qcc-dash-canvas); border: 1px solid var(--qcc-border); border-radius: 10px; padding: 12px 14px;
}
.qcc-dash__keychip code {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--qcc-text);
}
.qcc-dash .qcc-dash__copy, .qcc-dash .qcc-dash__eye {
    display: flex; flex: none; background: none; border: none; outline: none; -webkit-appearance: none; appearance: none;
    cursor: pointer; color: var(--qcc-dash-muted); padding: 4px; border-radius: 6px; font-family: inherit;
}
.qcc-dash .qcc-dash__copy:hover, .qcc-dash .qcc-dash__eye:hover { color: var(--qcc-dash-accent); background: rgba(39, 106, 126, .08); }
.qcc-dash .qcc-dash__eye.is-on { color: var(--qcc-dash-accent); }

/* Produkte-Raster (weitere Lizenz kaufen) */
.qcc-dash__prodgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
/* Die GANZE Karte ist klickbar — bleibt aber ein <div> (kein <button>, das Theme-/
   Elementor-Button-Stile erben und die Karten-Optik zerstören würde). Der Kauf läuft
   über ein verstecktes Formular in der Karte, das per JS abgeschickt wird. */
.qcc-dash__prod {
    display: flex; flex-direction: column; padding: 24px; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.qcc-dash__prod:hover { border-color: rgba(39, 106, 126, .38); box-shadow: 0 6px 20px rgba(24, 25, 29, .07); transform: translateY(-2px); }
.qcc-dash__prod:focus-visible { outline: 2px solid var(--qcc-dash-accent); outline-offset: 2px; }

/* Kopfzeile: Icon-Badge + Scope-Chip */
.qcc-dash__prod-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.qcc-dash__prod-ico { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(39, 106, 126, .10); color: var(--qcc-dash-accent); }
.qcc-dash__prod-ico .qcc-dash__ico { width: 22px; height: 22px; }
.qcc-dash__pill--scope { background: rgba(39, 106, 126, .10); color: var(--qcc-dash-accent); }

/* Name + Preis */
.qcc-dash__prod-name { font-weight: 700; font-size: 17px; color: var(--qcc-text); margin-bottom: 12px; }
.qcc-dash__prod-priceline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.qcc-dash__prod-amount { font-weight: 700; font-size: 18px; letter-spacing: 0em; color: var(--qcc-text); line-height: 1.1; }
.qcc-dash__prod-period { font-size: 13px; color: var(--qcc-dash-muted); }
.qcc-dash__prod-note { font-size: 12.5px; line-height: 1.45; color: var(--qcc-dash-muted); margin: 8px 0 0; }

/* Mengen-Switcher (1/2/3 Lizenzen). Buttons EXPLIZIT gestylt (Hintergrund/Rand/Farbe),
   damit kein Theme-/Elementor-Button-Stil durchschlägt. */
.qcc-dash__qtyrow { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.qcc-dash__qtylabel { font-size: 12.5px; color: var(--qcc-dash-muted); }
.qcc-dash .qcc-dash__qty { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--qcc-border); border-radius: 999px; background: var(--qcc-card); }
.qcc-dash .qcc-dash__qty button {
    -webkit-appearance: none; appearance: none; border: 0; background: transparent;
    color: var(--qcc-dash-muted); font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
    min-width: 30px; padding: 6px 10px; border-radius: 999px; cursor: pointer; box-shadow: none;
    transition: background .12s ease, color .12s ease;
}
.qcc-dash .qcc-dash__qty button:hover { color: var(--qcc-text); }
.qcc-dash .qcc-dash__qty button.is-active { background: var(--qcc-dash-accent); color: #fff; }

/* CTA als schlichter Text unten (kein Button-Look), Trennlinie darüber, Pfeil dahinter.
   Die ganze Karte ist klickbar; beim Hover wird der Text unterstrichen. */
.qcc-dash__prod-cta { margin-top: auto; padding-top: 18px; color: var(--qcc-dash-accent); font-weight: 600; font-size: 14px; }
.qcc-dash__prod-cta::before { content: ""; display: block; height: 1px; background: var(--qcc-border); margin: 0 0 18px; }
.qcc-dash__prod-cta::after { content: " \2192"; }
.qcc-dash__prod:hover .qcc-dash__prod-cta { text-decoration: underline; }

/* Lizenz-Karte */
.qcc-dash__lic + .qcc-dash__lic { margin-top: 16px; }
.qcc-dash__lic-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.qcc-dash__lic-type { font-weight: 600; color: var(--qcc-text); }
.qcc-dash__lic-meta { display: flex; align-items: center; gap: 8px; color: var(--qcc-dash-muted); font-size: 13px; margin-top: 14px; }
.qcc-dash__lic-meta .qcc-dash__ico { width: 16px; height: 16px; }

.qcc-dash__pill { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.qcc-dash__pill--ok { background: rgba(39, 106, 126, .12); color: var(--qcc-dash-accent); }

/* Listen (Domains / Bestellungen) */
.qcc-dash__list { display: flex; flex-direction: column; }
.qcc-dash__lrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--qcc-border); }
.qcc-dash__lrow:first-child { padding-top: 0; }
.qcc-dash__lrow:last-child { border-bottom: none; padding-bottom: 0; }
.qcc-dash__lrow-main { display: flex; align-items: center; gap: 10px; color: var(--qcc-text); min-width: 0; }
.qcc-dash__lrow-main .qcc-dash__ico { color: var(--qcc-dash-muted); }
.qcc-dash__lrow-side { display: flex; align-items: center; gap: 12px; flex: none; }

/* Downloads */
.qcc-dash__dlgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.qcc-dash__dl { display: flex; flex-direction: column; align-items: flex-start; }
.qcc-dash__dl-ico { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(39, 106, 126, .10); color: var(--qcc-dash-accent); margin-bottom: 14px; }
.qcc-dash__dl-title { font-weight: 600; color: var(--qcc-text); margin-bottom: 4px; }

/* Profil */
.qcc-dash__profile { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.qcc-dash__profile-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.qcc-dash__profile-name { font-size: 18px; font-weight: 700; color: var(--qcc-text); }

/* Leerzustand */
.qcc-dash__empty { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--qcc-dash-muted); padding: 44px 24px; }
.qcc-dash__empty .qcc-dash__ico { width: 30px; height: 30px; margin-bottom: 12px; }
.qcc-dash__empty p { margin: 0; }

/* Buttons */
.qcc-dash .qcc-dash__btn {
    display: inline-flex; align-items: center; gap: 8px; text-align: center; cursor: pointer; text-decoration: none;
    background: var(--qcc-dash-accent); color: #fff; border: none; outline: none;
    -webkit-appearance: none; appearance: none; font-family: inherit;
    padding: 10px 18px; border-radius: var(--qcc-radius-sm); font-size: 14px; font-weight: 600; transition: background .15s, color .15s;
}
.qcc-dash .qcc-dash__btn:hover { background: var(--qcc-primary-hover); color: #fff; }
.qcc-dash .qcc-dash__btn .qcc-dash__ico { width: 16px; height: 16px; }
.qcc-dash .qcc-dash__btn--ghost { background: transparent; color: var(--qcc-text); border: 1px solid var(--qcc-border); }
.qcc-dash .qcc-dash__btn--ghost:hover { background: rgba(16, 24, 40, .04); color: var(--qcc-text); }

@media (max-width: 820px) {
    .qcc-dash { grid-template-columns: 1fr; }
    .qcc-dash__side { border-right: none; border-bottom: 1px solid var(--qcc-border); }
    .qcc-dash__nav { flex-direction: row; flex-wrap: wrap; }
    .qcc-dash .qcc-dash__navbtn { width: auto; }
    .qcc-dash__user { margin-top: 12px; }
    .qcc-dash__content { padding: 24px 20px; }
}

/* Ergebnis-Meldung (Danke-/Abbruch, Interim-Shortcode) */
.qcc-result { padding: 16px 18px; border-radius: var(--qcc-radius-sm); font-size: 15px; }
.qcc-result--ok { background: var(--qcc-ok-bg); color: var(--qcc-ok-text); }
.qcc-result--cancel { background: #f4ede2; color: #7a5a2a; }
.qcc-notice { color: #8a4b3c; }

/* =====================================================================
   Bild-Wechsel-Widget (vorher/nachher, Slideshow)
   Effekt rein per CSS über [data-effect]; JS setzt nur .is-active um.
   ===================================================================== */
.qcc-imgx {
    --qcc-imgx-dur: 600ms;
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    box-sizing: border-box;
}
.qcc-imgx__stage {
    position: relative;
    width: 100%;
    height: 320px;
}
.qcc-imgx__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity var(--qcc-imgx-dur) ease, transform var(--qcc-imgx-dur) ease;
    -webkit-user-select: none;
    user-select: none;
}
.qcc-imgx__img.is-active { opacity: 1; }

/* Klick-Modus: Cursor signalisiert Interaktion. */
.qcc-imgx[data-trigger="tap"] { cursor: pointer; }

/* --- Effekte: inaktiver Startzustand → aktiv fährt auf Null zurück --- */
.qcc-imgx[data-effect="slide-left"]  .qcc-imgx__img { transform: translateX(24px); }
.qcc-imgx[data-effect="slide-right"] .qcc-imgx__img { transform: translateX(-24px); }
.qcc-imgx[data-effect="slide-up"]    .qcc-imgx__img { transform: translateY(24px); }
.qcc-imgx[data-effect="slide-down"]  .qcc-imgx__img { transform: translateY(-24px); }
.qcc-imgx[data-effect="zoom"]        .qcc-imgx__img { transform: scale(1.08); }

.qcc-imgx[data-effect="slide-left"]  .qcc-imgx__img.is-active,
.qcc-imgx[data-effect="slide-right"] .qcc-imgx__img.is-active,
.qcc-imgx[data-effect="slide-up"]    .qcc-imgx__img.is-active,
.qcc-imgx[data-effect="slide-down"]  .qcc-imgx__img.is-active,
.qcc-imgx[data-effect="zoom"]        .qcc-imgx__img.is-active { transform: none; }

/* Drehen (3D) */
.qcc-imgx[data-effect="flip"] .qcc-imgx__stage { perspective: 1000px; }
.qcc-imgx[data-effect="flip"] .qcc-imgx__img {
    transform: rotateY(90deg);
    backface-visibility: hidden;
}
.qcc-imgx[data-effect="flip"] .qcc-imgx__img.is-active { transform: rotateY(0deg); }

.qcc-imgx--empty {
    line-height: 1.5;
    padding: 24px;
    text-align: center;
    color: rgba(24, 25, 29, .56);
    border: 1px dashed rgba(112, 112, 112, .4);
    border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .qcc-imgx__img { transition-duration: 1ms; transform: none !important; }
}

/* =====================================================================
   Vergleichs-Widget (Free vs. Pro) — Funktions-Vergleichstabelle
   Immer sichtbar (kein Akkordeon). Ein einziges Grid mit Subgrid-Zeilen:
   dadurch sind die Spalten zeilenübergreifend ausgerichtet und die Zell-
   Hintergründe füllen IMMER die volle Zeilenhöhe (auch bei 2-zeiligem Text).
   Erste Spalte = inhaltsbreit (längste Funktion), Wertespalten gleich breit.
   ===================================================================== */
.qcc-cmp {
    --qcc-cmp-col: 160px;
    --qcc-cmp-radius: 16px;
    --qcc-cmp-head-bg: #ffffff;
    --qcc-cmp-head-text: #18191D;
    --qcc-cmp-pro-head-bg: #276A7E;
    --qcc-cmp-pro-head-text: #ffffff;
    --qcc-cmp-pro-bg: rgba(39,106,126,.05);
    --qcc-cmp-group-bg: #f5f6f5;
    --qcc-cmp-group-text: rgba(24,25,29,.6);
    --qcc-cmp-feat-text: #26272A;
    --qcc-cmp-val-text: #55565A;
    --qcc-cmp-check: #276A7E;
    --qcc-cmp-check-bg: rgba(39,106,126,.1);
    --qcc-cmp-muted: rgba(24,25,29,.28);
    --qcc-cmp-hover: rgba(39,106,126,.035);
    --qcc-cmp-border: rgba(112,112,112,.18);

    display: grid;
    /* Volle Breite: erste Spalte füllt den Rest, Wertespalten gleich breit. */
    grid-template-columns: minmax(0, 1fr) var(--qcc-cmp-col) var(--qcc-cmp-col);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background: var(--qcc-cmp-head-bg);
    border: 1px solid var(--qcc-cmp-border);
    border-radius: var(--qcc-cmp-radius);
    overflow: hidden;
    box-sizing: border-box;
}
.qcc-cmp * { box-sizing: border-box; }

/* Kopf & Zeilen teilen die Spalten des Eltern-Grids (Subgrid) → exakte Ausrichtung. */
.qcc-cmp__head,
.qcc-cmp__row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: stretch; /* Zellen füllen die volle Zeilenhöhe */
}

/* Kopfzeile */
.qcc-cmp__head { border-bottom: 2px solid var(--qcc-cmp-border); }
.qcc-cmp__hcell {
    padding: 18px 22px;
    font-weight: 700;
    color: var(--qcc-cmp-head-text);
    background: var(--qcc-cmp-head-bg);
    display: flex; flex-direction: column; gap: 3px;
    align-items: center; justify-content: center; text-align: center;
}
.qcc-cmp__hcell--feat { align-items: flex-start; text-align: left; }
.qcc-cmp__hcell--pro { background: var(--qcc-cmp-pro-head-bg); color: var(--qcc-cmp-pro-head-text); }
.qcc-cmp__hsub { font-size: 12px; font-weight: 500; opacity: .82; }

/* Kategorie-Band (immer sichtbar, kein Button) */
.qcc-cmp__grouphead {
    grid-column: 1 / -1;
    padding: 11px 22px;
    background: var(--qcc-cmp-group-bg);
    color: var(--qcc-cmp-group-text);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    border-top: 1px solid var(--qcc-cmp-border);
}
.qcc-cmp__head + .qcc-cmp__grouphead { border-top: none; }

/* Datenzeilen */
.qcc-cmp__cell {
    padding: 14px 22px;
    min-height: 52px;
    color: var(--qcc-cmp-val-text);
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.qcc-cmp__cell--feat {
    justify-content: flex-start; text-align: left;
    color: var(--qcc-cmp-feat-text); font-weight: 500;
    overflow-wrap: break-word; word-break: break-word;
}
.qcc-cmp__cell--pro { background: var(--qcc-cmp-pro-bg); }
.qcc-cmp__row + .qcc-cmp__row .qcc-cmp__cell { border-top: 1px solid var(--qcc-cmp-border); }
.qcc-cmp__row:hover .qcc-cmp__cell { background: var(--qcc-cmp-hover); }
.qcc-cmp__row:hover .qcc-cmp__cell--pro { background: var(--qcc-cmp-pro-bg); }

/* Werte */
.qcc-cmp__yes {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--qcc-cmp-check-bg); color: var(--qcc-cmp-check);
    display: inline-flex; align-items: center; justify-content: center;
}
.qcc-cmp__no { color: var(--qcc-cmp-muted); font-size: 18px; line-height: 1; }
.qcc-cmp__txt { font-weight: 600; color: var(--qcc-cmp-feat-text); font-size: 14px; }
.qcc-cmp__cell--pro .qcc-cmp__txt { color: var(--qcc-cmp-check); }
.qcc-cmp__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 560px) {
    /* Spaltenbreite steuert der responsive Elementor-Control (px/%, per Breakpoint). */
    .qcc-cmp__hcell, .qcc-cmp__cell { padding: 12px 12px; }
    .qcc-cmp__grouphead { padding: 10px 12px; }
    .qcc-cmp__hcell--feat, .qcc-cmp__cell--feat { padding-left: 14px; }
}

/* =====================================================================
   Preise-Widget v2 — Mengen-/Scope-Switcher, Gruppen, Tooltips, Hinweise
   ===================================================================== */
/* Sichtbarkeit: Abrechnung (Bill-Block), Menge (data-qty), Scope (data-scope) */
.qcc-price[data-active-billing="monthly"] .qcc-price__bill[data-billing="yearly"],
.qcc-price[data-active-billing="yearly"]  .qcc-price__bill[data-billing="monthly"] { display: none; }

.qcc-price__amount[data-qty], .qcc-price__mininote[data-qty], .qcc-price__scope[data-qty] { display: none; }
.qcc-price[data-active-qty="1"] .qcc-price__amount[data-qty="1"],
.qcc-price[data-active-qty="2"] .qcc-price__amount[data-qty="2"],
.qcc-price[data-active-qty="3"] .qcc-price__amount[data-qty="3"] { display: inline-block; }
.qcc-price[data-active-qty="1"] .qcc-price__mininote[data-qty="1"],
.qcc-price[data-active-qty="2"] .qcc-price__mininote[data-qty="2"],
.qcc-price[data-active-qty="3"] .qcc-price__mininote[data-qty="3"] { display: block; }
.qcc-price[data-active-qty="1"] .qcc-price__scope[data-qty="1"],
.qcc-price[data-active-qty="2"] .qcc-price__scope[data-qty="2"],
.qcc-price[data-active-qty="3"] .qcc-price__scope[data-qty="3"] { display: inline-flex; }

.qcc-price__amount[data-scope], .qcc-price__cta[data-scope], .qcc-price__scope[data-scope] { display: none; }
.qcc-price[data-active-scope="single"]    .qcc-price__amount[data-scope="single"],
.qcc-price[data-active-scope="unlimited"] .qcc-price__amount[data-scope="unlimited"] { display: inline-block; }
.qcc-price[data-active-scope="single"]    .qcc-price__cta[data-scope="single"],
.qcc-price[data-active-scope="unlimited"] .qcc-price__cta[data-scope="unlimited"] { display: block; }
.qcc-price[data-active-scope="single"]    .qcc-price__scope[data-scope="single"],
.qcc-price[data-active-scope="unlimited"] .qcc-price__scope[data-scope="unlimited"] { display: inline-flex; }

/* Beschreibung + Preis-Bereich */
.qcc-price__desc { font-size: 13.5px; color: var(--qcc-muted); margin: -6px 0 16px; }
.qcc-price__amount-wrap { border-bottom: none; padding-bottom: 8px; min-height: auto; }
.qcc-price__mininote { font-size: 12px; color: var(--qcc-muted); margin-top: 6px; }

/* Scope-Badge + Switcher-Pills */
.qcc-price__meta { margin: 6px 0 2px; }
.qcc-price__scopewrap { display: flex; }
.qcc-price__scope { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.3; color: var(--qcc-muted); font-weight: 600; }
.qcc-price__scope svg { opacity: .7; flex: 0 0 auto; }
/* (Switcher-Buttons + Container werden oben im vereinheitlichten Block gestylt.) */
.qcc-price__morenote { font-size: 11.5px; color: var(--qcc-muted); margin: 8px 0 0; }

/* CTA + Hinweise */
.qcc-price__cta-wrap { margin: 16px 0 0; }
.qcc-price__vat { font-size: 11.5px; color: var(--qcc-muted); text-align: center; margin-top: 8px; }
.qcc-price__trust { font-size: 12px; color: var(--qcc-muted); text-align: center; margin-top: 16px; }
.qcc-price__compare { text-align: center; margin: 26px 0 0; }
.qcc-price__compare a { color: var(--qcc-primary); font-weight: 600; text-decoration: none; font-size: 14.5px; }

/* Feature-Liste: Gruppen + Tooltips */
.qcc-price__feats { flex: 1; border-bottom: none; margin-top: 18px; padding-bottom: 6px; }
.qcc-price__fgroup {
    list-style: none; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--qcc-muted); margin: 16px 0 6px; padding: 0;
}
.qcc-price__feats .qcc-price__fgroup:first-child { margin-top: 0; }
.qcc-price__ftext { position: relative; }
.qcc-price__info {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; margin-left: 5px; vertical-align: middle;
    border: 1px solid var(--qcc-border); border-radius: 50%;
    background: transparent; color: var(--qcc-muted); font-size: 10px; font-weight: 700;
    cursor: pointer; line-height: 1; padding: 0;
}
.qcc-price__info:hover { color: var(--qcc-primary); border-color: var(--qcc-primary); }
.qcc-price__tip {
    display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 5;
    width: 230px; max-width: 78vw; padding: 10px 12px;
    background: var(--qcc-text); color: #fff; font-size: 12.5px; line-height: 1.45; font-weight: 400;
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.qcc-price__feat.is-open .qcc-price__tip { display: block; }

/* =====================================================================
   Support-Tickets (Dashboard-Sektion „Support")
   Status-Chips tragen die Farbe der Bedeutung, nicht der Laune:
   Violett = wir sind dran, Teal = in Arbeit, Grau = der Kunde ist am Zug.
   ===================================================================== */
.qcc-tk__notice {
    display: flex; align-items: flex-start; gap: 10px;
    background: #eef7f9; border: 1px solid #bfdde4; color: #1d4d59;
    border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; font-size: 14px; line-height: 1.55;
    animation: qcc-notice-in .3s cubic-bezier(.2, .8, .3, 1);
}
.qcc-tk__notice svg { flex: none; margin-top: 2px; }
.qcc-tk__notice--ok { background: #edf7f0; border-color: #bfe0cb; color: #1d5232; }
.qcc-tk__notice--error { background: #fdf0f0; border-color: #f0c2c2; color: #7a2323; }

@keyframes qcc-notice-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* Das gerade angelegte Ticket kurz hervorheben — der Blick soll es finden. */
.qcc-dash .qcc-tk__row.is-new { animation: qcc-row-in 1.8s ease-out; }
@keyframes qcc-row-in {
    0%   { background: rgba(39, 106, 126, .16); }
    100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .qcc-tk__notice, .qcc-dash .qcc-tk__row.is-new { animation: none; }
}

/* ---- Liste ---- */
.qcc-tk__list { display: flex; flex-direction: column; }
.qcc-dash .qcc-tk__row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 14px 4px; border-bottom: 1px solid var(--qcc-border);
    text-decoration: none; color: inherit; transition: background .12s;
}
.qcc-dash .qcc-tk__row:last-child { border-bottom: none; }
.qcc-dash .qcc-tk__row:hover { background: rgba(16, 24, 40, .03); }
.qcc-tk__row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qcc-tk__subject { font-weight: 600; color: var(--qcc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qcc-tk__meta { font-size: 12.5px; color: var(--qcc-dash-muted); }

/* ---- Status-Chip ---- */
.qcc-tk__chip {
    flex: none; display: inline-flex; align-items: center;
    padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.qcc-tk__chip--open              { background: rgba(108, 52, 165, .12); color: #6C34A5; }
.qcc-tk__chip--in-progress       { background: rgba(95, 180, 194, .18); color: #2f7f8d; }
.qcc-tk__chip--awaiting-customer { background: rgba(16, 24, 40, .07);  color: #4a5262; }
.qcc-tk__chip--closed            { background: rgba(16, 24, 40, .05);  color: #98a2b3; }

/* ---- Detail ---- */
.qcc-dash .qcc-tk__back {
    display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 500;
    color: var(--qcc-dash-muted); text-decoration: none;
}
.qcc-dash .qcc-tk__back:hover { color: var(--qcc-dash-accent); }
.qcc-tk__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding-bottom: 16px; border-bottom: 1px solid var(--qcc-border);
}
.qcc-tk__title { font-size: 17px; font-weight: 700; color: var(--qcc-text); }
.qcc-tk__turn {
    margin: 14px 0 0; padding: 11px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
    background: rgba(16, 24, 40, .05); color: var(--qcc-text);
}
.qcc-tk__turn--ours { background: rgba(95, 180, 194, .14); color: #2f7f8d; }

/* ---- Verlauf ---- */
.qcc-tk__thread { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 4px; }
.qcc-tk__msg {
    border: 1px solid var(--qcc-border); border-radius: 12px; padding: 14px 16px;
    background: #fff;
}
.qcc-tk__msg--staff { background: rgba(39, 106, 126, .05); border-color: rgba(39, 106, 126, .18); }
.qcc-tk__msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; font-size: 13px; }
.qcc-tk__msg-body { font-size: 14px; line-height: 1.65; color: var(--qcc-text); overflow-wrap: anywhere; }

/* Anhänge im Verlauf — festes Raster.
   Die Höhen-Regel allein reichte nicht: Themes und Elementor setzen fast immer ein
   globales `img { width: 100% }`, das gewinnt gegen `width: auto`. Deshalb bekommen die
   Kacheln eine feste Größe und das Bild füllt sie per object-fit. */
.qcc-tk__files {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 10px; margin-top: 14px;
}
.qcc-dash .qcc-tk__file {
    display: block; position: relative; margin: 0; padding: 0;
    aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--qcc-border); background: rgba(16, 24, 40, .04);
    transition: transform .14s, box-shadow .14s;
}
.qcc-dash .qcc-tk__file:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(16, 24, 40, .12);
}
.qcc-dash .qcc-tk__file img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; border-radius: 0; margin: 0; max-width: none;
}

.qcc-tk__closed {
    margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; font-size: 13.5px;
    background: rgba(16, 24, 40, .05); color: var(--qcc-dash-muted);
}

/* ---- Formulare (Platzhalter statt Labels — Projektkonvention) ---- */
.qcc-tk__form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.qcc-tk__reply { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--qcc-border); }
.qcc-dash .qcc-tk__input {
    width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px; color: var(--qcc-text);
    background: #fff; border: 1px solid var(--qcc-border); border-radius: 10px; padding: 12px 14px;
    outline: none; transition: border-color .12s, box-shadow .12s;
}
.qcc-dash .qcc-tk__input:focus {
    border-color: var(--qcc-dash-accent);
    box-shadow: 0 0 0 3px rgba(39, 106, 126, .12);
}
.qcc-tk__textarea { resize: vertical; min-height: 96px; line-height: 1.6; }

/* ---- Upload-Zone ---- */
.qcc-tk__upload { width: 100%; display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; }

.qcc-dash .qcc-tk__drop {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; box-sizing: border-box; padding: 18px 16px; margin: 0;
    border: 1.5px dashed var(--qcc-border); border-radius: 12px;
    background: rgba(16, 24, 40, .015); color: var(--qcc-dash-muted);
    text-align: center; cursor: pointer;
    transition: border-color .14s, background .14s, color .14s;
}
.qcc-dash .qcc-tk__drop:hover,
.qcc-dash .qcc-tk__drop:focus-visible,
.qcc-dash .qcc-tk__drop.is-over {
    border-color: var(--qcc-dash-accent);
    background: rgba(39, 106, 126, .06);
    color: var(--qcc-dash-accent);
    outline: none;
}
.qcc-tk__drop.is-over { border-style: solid; }
.qcc-tk__drop-ico { flex: none; }
.qcc-tk__drop-text { line-height: 1.45; }
/* Das echte Feld verstecken — aber erreichbar lassen (Klick aufs Label löst es aus). */
.qcc-tk__drop input[type="file"] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Voll = keine weitere Datei mehr möglich. Die Zone sagt das, statt still zu schlucken. */
.qcc-tk__upload.is-full .qcc-tk__drop { opacity: .45; pointer-events: none; }

/* ---- Vorschau der gewählten Dateien ---- */
.qcc-tk__previews {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px;
}
.qcc-tk__previews:empty { display: none; }

.qcc-tk__preview {
    position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--qcc-border); background: rgba(16, 24, 40, .05);
    opacity: 0; transform: scale(.92);
    animation: qcc-pop .26s cubic-bezier(.2, .8, .3, 1) forwards;
}
.qcc-tk__preview img {
    display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; margin: 0;
    opacity: 0; transition: opacity .22s;
}
.qcc-tk__preview.is-loaded img { opacity: 1; }
.qcc-tk__preview.is-going { animation: qcc-pop-out .16s ease forwards; }

@keyframes qcc-pop {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes qcc-pop-out {
    to { opacity: 0; transform: scale(.9); }
}

.qcc-dash .qcc-tk__preview-x {
    position: absolute; top: 5px; right: 5px; z-index: 2;
    width: 22px; height: 22px; padding: 0; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    border: none; outline: none; -webkit-appearance: none; appearance: none;
    border-radius: 50%; cursor: pointer; font-size: 15px; font-family: inherit;
    background: rgba(16, 24, 40, .62); color: #fff;
    transition: background .12s;
}
.qcc-dash .qcc-tk__preview-x:hover { background: rgba(16, 24, 40, .85); }

.qcc-tk__preview-name {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px;
    font-size: 10.5px; color: #fff; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: linear-gradient(to top, rgba(16, 24, 40, .78), transparent);
}

.qcc-tk__hint { color: var(--qcc-dash-muted); line-height: 1.5; margin: 0; }

/* ---- Absende-Knopf mit Ladezustand ---- */
.qcc-dash .qcc-tk__submit { display: inline-flex; align-items: center; gap: 9px; }
.qcc-tk__spinner { display: none; }
.qcc-dash .qcc-tk__submit.is-busy { opacity: .8; cursor: progress; }
.qcc-dash .qcc-tk__submit.is-busy .qcc-tk__spinner {
    display: block; width: 14px; height: 14px; flex: none;
    border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
    animation: qcc-spin .7s linear infinite;
}
@keyframes qcc-spin { to { transform: rotate(360deg); } }

/* Während des Absendens den Rest des Formulars beruhigen. */
.qcc-tk__form.is-submitting .qcc-tk__input,
.qcc-tk__form.is-submitting .qcc-tk__upload { opacity: .55; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .qcc-tk__preview { animation: none; opacity: 1; transform: none; }
    .qcc-dash .qcc-tk__submit.is-busy .qcc-tk__spinner { animation-duration: 2s; }
    .qcc-dash .qcc-tk__file:hover { transform: none; }
}

@media (max-width: 640px) {
    .qcc-tk__head { flex-direction: column; }
    .qcc-dash .qcc-tk__row { flex-wrap: wrap; }
}

/* =====================================================================
   Changelog-Eintrag (Elementor-Widget „QueryCue Changelog-Eintrag")
   Ein Widget = ein Release. Die Vorgaben sind so gesetzt, dass das Widget
   ohne eine einzige Einstellung schon richtig aussieht.
   ===================================================================== */
.qcc-cl {
    --qcc-cl-accent: var(--qcc-primary, #276A7E);
    --qcc-cl-divider: var(--qcc-border, rgba(112, 112, 112, .22));

    /* Farben der vier Marken. Bedeutung, nicht Laune:
       Violett = neu (das Akzent-Violett der Marke), Grün = behoben,
       Rot = Sicherheit, Bernstein = schneller. */
    --qcc-cl-feat: #6C34A5;  --qcc-cl-feat-bg: rgba(108, 52, 165, .10);
    --qcc-cl-fix:  #2E6B3E;  --qcc-cl-fix-bg:  rgba(46, 107, 62, .10);
    --qcc-cl-sec:  #9B3A34;  --qcc-cl-sec-bg:  rgba(155, 58, 52, .10);
    --qcc-cl-perf: #8A6100;  --qcc-cl-perf-bg: rgba(138, 97, 0, .10);

    display: block;
    padding: 30px 0;
    border-bottom: 1px solid var(--qcc-cl-divider);
    color: var(--qcc-text, #18191D);
    font-size: 16px;
    line-height: 1.6;
}

/* ---- Kopfzeile ---- */
.qcc-cl__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }

.qcc-cl__ver {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 15px; font-weight: 700;
    padding: 3px 10px; border-radius: 7px;
    background: rgba(16, 24, 40, .05);
    border: 1px solid var(--qcc-cl-divider);
    color: inherit;
}
/* Die neueste Version trägt die Akzentfarbe — man soll sie finden, ohne zu suchen. */
.qcc-cl--latest .qcc-cl__ver {
    background: var(--qcc-cl-accent);
    border-color: var(--qcc-cl-accent);
    color: #fff;
}

.qcc-cl__date {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 13.5px;
    color: var(--qcc-muted, rgba(24, 25, 29, .56));
}

.qcc-cl__latest {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 2px 9px; border-radius: 999px;
    background: color-mix(in srgb, var(--qcc-cl-accent) 12%, transparent);
    border: 1px solid var(--qcc-cl-accent);
    color: var(--qcc-cl-accent);
}

.qcc-cl__title {
    font-size: 23px; font-weight: 700; line-height: 1.2;
    margin: 4px 0 14px; max-width: 40ch;
    color: inherit;
}

/* ---- Einträge ---- */
.qcc-cl__items {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 11px;
    max-width: 70ch;
}
.qcc-cl__item { display: flex; gap: 12px; align-items: flex-start; margin: 0; }

.qcc-cl__tag {
    flex: none;
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 5px; border: 1px solid;
    margin-top: 3px; min-width: 52px; text-align: center;
    white-space: nowrap;
}
.qcc-cl__tag--feat { color: var(--qcc-cl-feat); border-color: var(--qcc-cl-feat); background: var(--qcc-cl-feat-bg); }
.qcc-cl__tag--fix  { color: var(--qcc-cl-fix);  border-color: var(--qcc-cl-fix);  background: var(--qcc-cl-fix-bg); }
.qcc-cl__tag--sec  { color: var(--qcc-cl-sec);  border-color: var(--qcc-cl-sec);  background: var(--qcc-cl-sec-bg); }
.qcc-cl__tag--perf { color: var(--qcc-cl-perf); border-color: var(--qcc-cl-perf); background: var(--qcc-cl-perf-bg); }

.qcc-cl__text {
    font-size: 15.5px; line-height: 1.55;
    color: var(--qcc-muted, rgba(24, 25, 29, .62));
    overflow-wrap: anywhere;
}
.qcc-cl__text b,
.qcc-cl__text strong { color: var(--qcc-text, #18191D); font-weight: 650; }
.qcc-cl__text code {
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .88em;
    background: rgba(16, 24, 40, .05); border-radius: 4px; padding: 1px 5px;
}

.qcc-cl__pro {
    display: inline-block;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--qcc-cl-feat); border: 1px solid var(--qcc-cl-feat);
    border-radius: 4px; padding: 1px 5px; margin-left: 4px;
    vertical-align: 1px; white-space: nowrap;
}

@media (max-width: 600px) {
    .qcc-cl__item { flex-direction: column; gap: 6px; }
    .qcc-cl__tag { margin-top: 0; align-self: flex-start; }
}