/* =========================================================================
   KI GEO Check Pro — Project specific public additions on top of Webflow.

   This file is intentionally small. The public visual foundation is the
   AD Promotion Webflow export under:

     /assets/css/normalize.css
     /assets/css/webflow.css
     /assets/css/adp-website.css

   custom.css only contains styles that are required by the KI GEO Check Pro
   application itself and that Webflow does not already provide:
     • Scan preview status indicator and animated state dot
     • GEO score placeholder (gradient number)
     • Public error alert for the domain form
     • Opportunity calculator inputs and metrics layout
     • Client logo trust strip (CSS-only marquee, reduced-motion safe)

   No Webflow rules, typography, buttons, cards or footer styling are
   duplicated here. No old kgcp design system tokens are kept.
   ========================================================================= */


/* ---------- AD Promotion — verbindliche Farbpalette (26.06.2026) ------
   Single source of truth für die Markenfarben des öffentlichen Bereichs.
   Das Report-Theme (report-theme-adp.css) spiegelt dieselben Werte für die
   Scan-Ergebnisseite. Reine Farbtokens — kein Layout, keine Funktion. */
:root {
    /* Marke (Verlauf für Buttons, "colored-text", Score-Zahl) */
    --adp-pink: #E54A92;
    --adp-purple: #6D52E7;
    --adp-gradient: linear-gradient(90deg, #E54A92 0%, #6D52E7 100%);

    /* Status / Ampel */
    --adp-positive: #6BEF69;          /* Grün – "Stark" */
    --adp-warning:  #F6C453;          /* Gelb/Amber – "Solide" */
    --adp-negative: #FF6B72;          /* Warn-Rot – Texte / "Ausbaufähig" / 0 % */
    --adp-negative-strong: #E5484D;   /* kräftiger Akzent – linke Balken / Borders */
    --adp-check: #73F29A;             /* Grün – Häkchen-Icon / Rahmen (Stärken) */

    /* Score-Ring – rot → gelb → grün je nach Punktzahl */
    --adp-ring-low:  #E6444B;
    --adp-ring-mid:  #F6C453;
    --adp-ring-high: #5FD66B;

    /* Flächen / Rahmen */
    --adp-positive-bg: rgba(115, 242, 154, 0.06);  /* "Stärken"-Panel */
    --adp-negative-bg: rgba(255, 107, 114, 0.06);  /* "Schwächen"-Panel */
    --adp-chip-bg:     rgba(255, 107, 114, 0.14);  /* rote Chips/Pills */
    --adp-chip-border: rgba(255, 107, 114, 0.45);  /* Rahmen rote Chips/Pills */
}


/* ---------- Local Urbanist font loading bridge ------------------------
   adp-website.css declares `font-family: Urbanist, sans-serif;` but the
   original Webflow export relied on Google Fonts to serve the Urbanist
   typeface. This project ships the same family locally under
   `public/assets/fonts/Urbanist/static/`. The @font-face blocks below
   make the local files available under the exact `Urbanist` family name
   for the same weight set the Webflow CSS uses (300, 400, 500, 600, 700).

   This is intentionally a font loading bridge only. It is not a
   typography recreation, does not redefine sizes / line-heights /
   letter-spacing / colors, and does not duplicate any AD Promotion or
   Webflow design rules.
   --------------------------------------------------------------------- */

@font-face {
    font-family: 'Urbanist';
    src: url('/assets/fonts/Urbanist/static/Urbanist-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Urbanist';
    src: url('/assets/fonts/Urbanist/static/Urbanist-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Urbanist';
    src: url('/assets/fonts/Urbanist/static/Urbanist-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Urbanist';
    src: url('/assets/fonts/Urbanist/static/Urbanist-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Urbanist';
    src: url('/assets/fonts/Urbanist/static/Urbanist-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ---------- Public error alert (domain form) -------------------------- */

.kgcp-error {
    background: linear-gradient(135deg, rgba(251, 113, 133, 0.12), rgba(94, 84, 243, 0.05));
    border: 1px solid rgba(251, 113, 133, 0.45);
    border-radius: 6px;
    color: #ffd5dc;
    padding: 16px 20px;
    margin: 0 0 20px;
    font-family: Urbanist, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

.kgcp-error strong { color: #ff7a9c; margin-right: 6px; }


/* ---------- Scan preview status block --------------------------------- */

.kgcp-status {
    position: relative;
}

.kgcp-status::after {
    content: "";
    position: absolute;
    top: 1.75rem;
    right: 1.75rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #6c52e8;
    box-shadow: 0 0 14px #6c52e8;
    animation: kgcp-status-pulse 2.2s ease-in-out infinite;
}

.kgcp-status[data-status="failed"]::after {
    background: #ff7a9c;
    box-shadow: 0 0 14px #ff7a9c;
    animation: none;
}

.kgcp-status[data-status="ready"]::after,
.kgcp-status[data-status="complete"]::after,
.kgcp-status[data-status="preview_ready"]::after,
.kgcp-status[data-status="technical_ready"]::after {
    background: #6bef69;
    box-shadow: 0 0 14px #6bef69;
    animation: none;
}

@keyframes kgcp-status-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}


/* ---------- GEO score placeholder (gradient number) ------------------- */

.kgcp-score-placeholder {
    font-family: Urbanist, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #cac7cf;
    margin: 0.25rem 0 0.5rem;
}

.kgcp-score-placeholder strong {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(107deg, #E54A92, #6D52E7);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 2.5rem;
    font-weight: 700;
    margin-right: 0.25rem;
    display: inline-block;
}


/* ---------- Opportunity calculator ------------------------------------ */

.kgcp-opportunity h2 { margin-top: 0; }

.kgcp-opportunity-intro {
    color: #cac7cf;
    font-family: Urbanist, sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    margin: 0.25rem 0 1rem;
}

.kgcp-opportunity-note {
    background: linear-gradient(135deg, rgba(94, 84, 243, 0.10), rgba(229, 74, 146, 0.05));
    border: 1px solid #363447;
    border-radius: 6px;
    color: #cac7cf;
    padding: 0.85rem 1.1rem;
    margin: 0 0 1rem;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    line-height: 1.5;
}

.kgcp-opportunity-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: stretch;
    gap: 1rem;
    background: rgba(67, 65, 89, 0.28);
    border: 1px solid #363447;
    border-radius: 6px;
    padding: 1.5rem;
    margin: 0.85rem 0 1.4rem;
}

.kgcp-opportunity-metric {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
}

.kgcp-opportunity-metric-label {
    color: #a4a2b6;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.kgcp-opportunity-metric-sub {
    display: block;
    margin-top: 2px;
    color: #8b8a9d;
    font-weight: 500;
    letter-spacing: 1.2px;
}

.kgcp-opportunity-metric-value {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(107deg, #E54A92, #6D52E7);
    -webkit-background-clip: text;
    background-clip: text;
    font-family: Urbanist, sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 1.85rem);
    font-weight: 700;
    line-height: 1.2;
    margin-top: auto;
    padding-top: 0.6rem;
}

.kgcp-opportunity-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.25rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.kgcp-opportunity-input {
    display: flex;
    flex-direction: column;
    color: #cac7cf;
    font-family: Urbanist, sans-serif;
}

.kgcp-opportunity-input span {
    margin-bottom: 0.5rem;
    font-size:1rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #9a97ad;
}

.kgcp-opportunity-input input,
.kgcp-opportunity-input select {
    background-color: rgba(255, 255, 255, 0.04);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 14px 16px;
    font-family: Urbanist, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.kgcp-opportunity-input input::placeholder {
    color: #7c7a8c;
}

.kgcp-opportunity-input input:hover,
.kgcp-opportunity-input select:not(:disabled):hover {
    border-color: rgba(255, 255, 255, 0.22);
    background-color: rgba(255, 255, 255, 0.06);
}

.kgcp-opportunity-input input:focus,
.kgcp-opportunity-input select:focus {
    outline: none;
    border-color: rgba(140, 110, 243, 0.85);
    box-shadow: 0 0 0 3px rgba(140, 110, 243, 0.18);
    background-color: rgba(255, 255, 255, 0.07);
}

.kgcp-opportunity-input select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a97ad' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 42px;
    cursor: pointer;
}

.kgcp-opportunity-input select:disabled {
    color: #c9c6d6;
    opacity: 1;
    cursor: default;
}

.kgcp-opportunity-disclaimer {
    color: #a4a2b6;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    line-height: 1.5;
    margin: 0.75rem 0 0;
}

/* Pending state: "Business Interpretation" while the scan is still running. */
.kgcp-bi-pending {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 6px;
}

.kgcp-bi-pending-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-top: 8px;
    border-radius: 50%;
    background: #6d52e7;
    box-shadow: 0 0 0 0 rgba(109, 82, 231, 0.5);
    animation: kgcpBiPulse 1.6s ease-out infinite;
}

@keyframes kgcpBiPulse {
    0% { box-shadow: 0 0 0 0 rgba(109, 82, 231, 0.45); opacity: 1; }
    70% { box-shadow: 0 0 0 10px rgba(109, 82, 231, 0); opacity: 0.65; }
    100% { box-shadow: 0 0 0 0 rgba(109, 82, 231, 0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .kgcp-bi-pending-dot { animation: none; }
}

/* Pending state: preliminary-estimate note above the opportunity calculator. */
.kgcp-prelim-note {
    margin: 0.25rem 0 1.1rem;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(109, 82, 231, 0.06);
    border: 1px solid rgba(109, 82, 231, 0.18);
    color: #c7d2ea;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    line-height: 1.55;
}

.kgcp-prelim-note strong {
    color: #e6ecfa;
}


/* ---------- Webflow partners marquee — animation bridge --------------- *
 * The Webflow `home-three-partners-section` markup is driven at runtime by
 * Webflow's IX2 engine via inline `transform` styles. The static markup
 * shipped here has no runtime, so the `.clients` track would stay still.
 *
 * The rules below are scoped strictly to the Webflow classes that compose
 * this section (`.home-three-partners-section .clients` and its two
 * `.clients-marque` children) and provide the minimum needed for a smooth
 * horizontal loop. They never alter vendor CSS and add no broad overrides.
 */

.home-three-partners-section .clients {
    animation: kgcp-partners-marquee 40s linear infinite;
    will-change: transform;
}

.home-three-partners-section .clients:hover {
    animation-play-state: paused;
}

/* The partial always renders exactly two `.clients-marque` rows (the
 * duplicate is required for marquee continuity), so each row owns half of
 * the `.clients` track and the keyframes can translate by -50%. */
.home-three-partners-section .clients-marque {
    flex: 0 0 50%;
}

@keyframes kgcp-partners-marquee {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .home-three-partners-section .clients {
        animation: none !important;
        transform: none !important;
    }
    .kgcp-status::after { animation: none !important; }
    .kgcp-tablet-form-section .tablet-wrap { transform: none !important; }
}


/* ---------- Tablet domain scan form ----------------------------------- *
 * The public domain scan form sits inside the AD Promotion Webflow tablet
 * mockup (`tablet-animation` > `tablet-wrap` > `tablet-inner` > `ipad-mockup`).
 * The .ipad-shape SVG drives the tablet aspect ratio; the form layer is
 * absolutely positioned inside the visible screen area, matching the same
 * offsets adp-website.css uses for .ipad-screen (top:4% left:3% w:93.8%
 * h:91.6%). Everything below is scoped to .kgcp-tablet-form-section so it
 * cannot leak into the header, footer, customer projects, admin or report
 * views. No card/button/typography systems are duplicated here.
 */

.kgcp-tablet-form-section {
    position: relative;
    overflow: hidden;
}

/* ---------- Horizontal overflow safety (public homepage only) -------- *
 * The 3D rotateX on `.tablet-wrap` slightly extends the painted box past
 * the section bounds at the start of the scroll-tilt animation, which on
 * some viewports introduces a hairline of horizontal scroll to the right.
 * The tablet section itself already clips with `overflow: hidden` above,
 * but the body/html still need a final safety clip to guarantee no
 * sideways scroll on any viewport.
 *
 * Scoped via `:has(.kgcp-tablet-form-section)` so admin/report pages that
 * do NOT contain the tablet section are completely unaffected. No vendor
 * CSS is overridden — this is a single defensive rule for the public
 * homepage flow only. */
html:has(.kgcp-tablet-form-section),
body:has(.kgcp-tablet-form-section) {
    overflow-x: clip;
}

/* The bezel must never intercept clicks on the form input or button. */
.kgcp-tablet-form-section .ipad-shape {
    pointer-events: none;
}

/* Provide perspective on the tablet animation wrapper (the ANCESTOR of
 * the transformed element) so the rotateX produces a real 3D depth
 * effect on the tablet group, instead of the orthographic squish that
 * happens when `perspective` is set on the same element being rotated.
 * `transform-style: preserve-3d` ensures the bezel image and the form
 * layer stay coplanar inside the tilted tablet. Scoped strictly to the
 * tablet section so admin / report views are unaffected. */
.kgcp-tablet-form-section .tablet-animation {
    perspective: 1400px;
    perspective-origin: 50% 60%;
}

/* Tilt is applied via CSS custom properties set by /assets/js/app.js. The
 * .kgcp-tablet-animated marker class is added by the JS once it has taken
 * over animation, so the tablet stays upright by default for users without
 * JS or with prefers-reduced-motion. The transform is applied to
 * `.tablet-wrap` so the tablet bezel AND the form layer inside it move
 * together as one physical object. */
.kgcp-tablet-form-section .tablet-wrap {
    transform-origin: 50% 100%;
    transform-style: preserve-3d;
}

.kgcp-tablet-form-section.kgcp-tablet-animated .tablet-wrap {
    transform: translate3d(0, var(--kgcp-tablet-translate, 42px), 0)
               rotateX(var(--kgcp-tablet-tilt, 14deg));
    will-change: transform;
}

.kgcp-tablet-form-section.kgcp-tablet-reduced-motion .tablet-wrap {
    transform: none;
}

/* Form layer — overlays the screen cutout of .ipad-shape exactly. */
.kgcp-tablet-form-section .kgcp-tablet-form-layer {
    position: absolute;
    z-index: 2;
    top: 4%;
    left: 3%;
    width: 93.8%;
    height: 91.6%;
    border-radius: 10px;
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(94, 84, 243, 0.20), rgba(15, 13, 37, 0) 55%),
        radial-gradient(120% 100% at 100% 100%, rgba(230, 3, 91, 0.16), rgba(15, 13, 37, 0) 55%),
        #0f0d25;
    color: #fff;
    overflow: hidden;
}

.kgcp-tablet-form-section .kgcp-tablet-form-panel {
    position: relative;
    width: 100%;
    height: 100%;
    padding: clamp(20px, 4.2%, 56px) clamp(24px, 6%, 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(8px, 1.4%, 16px);
    font-family: Urbanist, sans-serif;
    overflow: auto;
}

.kgcp-tablet-form-section .kgcp-tablet-form-eyebrow {
    color: #a4a2b6;
    font-family: Urbanist, sans-serif;
    font-size: clamp(0.875rem, 0.9vw, 0.875rem);
    font-weight: 600;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    margin: 0;
}

.kgcp-tablet-form-section .kgcp-tablet-form-title {
    color: #fff;
    font-family: Urbanist, sans-serif;
    font-size: clamp(1.5rem, 3.4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
}

.kgcp-tablet-form-section .kgcp-tablet-form-copy {
    color: #cac7cf;
    font-family: Urbanist, sans-serif;
    font-size: clamp(0.875rem, 1.2vw, 1.05rem);
    line-height: 1.55;
    margin: 0;
    max-width: 60ch;
}

.kgcp-tablet-form-section .kgcp-tablet-form-privacy {
    color: #a4a2b6;
    font-size: clamp(0.875rem, 0.85vw, 0.875rem);
    line-height: 1.45;
}

.kgcp-tablet-form-section .kgcp-tablet-form-actions {
    margin-top: clamp(6px, 1.2%, 14px);
}

.kgcp-tablet-form-section .kgcp-tablet-form-actions .form-element-wrapper {
    margin-bottom: 12px;
}

.kgcp-tablet-form-section .kgcp-error {
    margin: 0;
}

/* ---------- Public homepage polish (scoped, on top of Webflow) -------- *
 * Small, scoped additions for the public homepage only. Every selector is
 * namespaced to a project class (`kgcp-…`) or composed with the existing
 * Webflow hooks already present in resources/views/public/home.php and
 * resources/views/public/partials/client_logos.php. No global Webflow
 * rules are overridden and no broad/global selectors are introduced.
 *
 * Goals:
 *   • Hero atmosphere — subtle purple/pink radial glow behind the hero
 *     so the dark navy base picks up the same mood as the AD Promotion
 *     reference pages without using `service-hero-banner.morgan`.
 *   • Hero compaction — tighten desktop padding on the hero so the
 *     tablet starts higher on the first screen.
 *   • Hero copy — refine the lead paragraph and present the two
 *     KI / GEO explanations as a compact two-column block on desktop.
 *   • Tablet visibility — reduce the gap between the hero and the
 *     tablet section, and bring the customer projects strip closer.
 *   • Privacy note — narrower / tighter so it does not feel like a
 *     stacked paragraph block inside the tablet.
 * --------------------------------------------------------------------- */

/* Hero atmosphere: subtle radial glows behind the navy hero-wrapper.
 * Uses two ::before / ::after layers so the navy `hero-wrapper`
 * background defined in adp-website.css (#0f0d25) stays intact. */
.kgcp-hero-atmosphere {
    position: relative;
    isolation: isolate;
}

.kgcp-hero-atmosphere::before,
.kgcp-hero-atmosphere::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
}

.kgcp-hero-atmosphere::before {
    top: -180px;
    left: -160px;
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, rgba(94, 84, 243, 0.45) 0%, rgba(94, 84, 243, 0) 70%);
}

.kgcp-hero-atmosphere::after {
    top: 40%;
    right: -200px;
    width: 680px;
    height: 680px;
    background: radial-gradient(circle, rgba(230, 3, 91, 0.32) 0%, rgba(230, 3, 91, 0) 70%);
}

/* Keep the navbar and hero contents above the glow layers. */
.kgcp-hero-atmosphere > .navbar,
.kgcp-hero-atmosphere > .service-hero-banner {
    position: relative;
    z-index: 1;
}

/* Hero compaction — tighten the very tall vendor padding (220px/160px)
 * on desktop so the tablet appears sooner. The padding-top sets the
 * visual gap from the navbar/logo down to the H1, the padding-bottom
 * sets half of the gap from the teaser paragraph down to the tablet
 * (the other half is `.kgcp-tablet-form-section.section-scroll-animation`
 * `padding-top` below). These two halves are tuned so logo→H1 and
 * teaser→tablet read as the same rhythm. Stays generous enough to keep
 * the hero premium and never collides with the navbar. */
.kgcp-hero-atmosphere .kgcp-hero-banner {
    padding-top: 120px;
    padding-bottom: 64px;
}

/* Hero teaser — replaces the wide vendor `padding-top-bottom-thirty`
 * spacing with a tighter, more readable max-width and softer color.
 * The teaser is the only paragraph above the tablet; the detailed
 * KI Sichtbarkeit / GEO explanation lives below the tablet (see the
 * `.kgcp-tablet-explainer*` rules further down). */
.service-hero-heading-wrapper .kgcp-hero-lead,
.service-hero-heading-wrapper .kgcp-hero-teaser {
    max-width: 760px;
    margin: 22px auto 0;
    padding: 0;
    color: #cac7cf;
    font-size: 1.05rem;
    line-height: 1.55;
}

/* Stack hero teaser tighter on mobile. */
@media (max-width: 767px) {
    .kgcp-hero-atmosphere .kgcp-hero-banner {
        padding-top: 96px;
        padding-bottom: 44px;
    }
    .service-hero-heading-wrapper .kgcp-hero-lead,
    .service-hero-heading-wrapper .kgcp-hero-teaser {
        font-size: 1rem;
        margin-top: 18px;
    }
    .kgcp-hero-atmosphere::before,
    .kgcp-hero-atmosphere::after {
        filter: blur(60px);
        opacity: 0.4;
    }
}

/* Tablet visibility — set the top padding of the scroll-animation section
 * to complement the hero `padding-bottom` above so the gap from the teaser
 * paragraph to the tablet matches the gap from the logo to the H1. The
 * bezel/form layout itself stays untouched. */
.kgcp-tablet-form-section.section-scroll-animation {
    padding-top: 56px;
}

@media (max-width: 767px) {
    .kgcp-tablet-form-section.section-scroll-animation {
        padding-top: 32px;
    }
}

/* Privacy note compaction inside the tablet — narrower width and
 * tighter top spacing so it no longer reads as a tall paragraph block. */
.kgcp-tablet-form-section .kgcp-tablet-form-privacy {
    max-width: 52ch;
    margin-top: 4px;
}

/* Customer projects section — give the projects strip a calm, premium
 * rhythm: a clear breathing gap above the heading so it feels connected
 * to (but distinct from) the explainer block above, and noticeably more
 * room between the heading and the logo marquee so the wordmark row
 * does not feel glued to the title. Bottom margin / footer breathing
 * room from the Webflow `abstand-unten` class is preserved. */
.kgcp-projects-section.home-three-partners-section.abstand-unten {
    margin-top: 56px;
}

.kgcp-projects-section .kgcp-projects-heading.text-align-center.abstand {
    margin-bottom: 72px;
}

@media (max-width: 767px) {
    .kgcp-projects-section.home-three-partners-section.abstand-unten {
        margin-top: 32px;
        margin-bottom: 60px;
    }
    .kgcp-projects-section .kgcp-projects-heading.text-align-center.abstand {
        margin-bottom: 40px;
    }
}

/* ---------- KI Sichtbarkeit / GEO explainer (below the tablet) -------- *
 * Compact two-column supporting information block, rendered by
 * resources/views/public/home.php just after the tablet section. The
 * block intentionally sits between the tablet and the customer projects
 * strip so it can carry the long-form KI Sichtbarkeit / GEO explanation
 * without pushing the tablet itself down. All selectors are scoped to
 * `.kgcp-tablet-explainer` so they cannot leak into other sections.
 *
 * Selectors and why each one is needed:
 *   .kgcp-tablet-explainer        — section wrapper, provides vertical
 *                                   rhythm above the projects strip.
 *   .kgcp-tablet-explainer-grid   — two-column desktop layout, stacks
 *                                   to one column on mobile.
 *   .kgcp-tablet-explainer-card   — subtle card surface that matches the
 *                                   dark navy hero atmosphere without
 *                                   competing visually with the tablet.
 *   .kgcp-tablet-explainer-eyebrow — small uppercase label above the copy.
 *   .kgcp-tablet-explainer-copy   — explanation paragraph styling.
 */
/* Section padding is the rhythm between the tablet bottom and the cards.
 * The explainer block is wrapped inside the same `.container-video` as
 * the tablet (see home.php) so the grid below shares the tablet's exact
 * effective inner width — the outer-left edge of the left card aligns
 * with the tablet's left edge and the outer-right edge of the right
 * card aligns with the tablet's right edge. */
.kgcp-tablet-explainer {
    padding: 48px 0 24px;
    position: relative;
    z-index: 1;
}

.kgcp-tablet-explainer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 28px;
    /* No `max-width` here on purpose: the parent `.container-video`
     * already enforces the tablet's max-width (83.125em) and 4em
     * horizontal padding, so the grid naturally inherits the tablet
     * width and the cards line up with the tablet's edges. */
    width: 100%;
    margin: 0 auto;
}

.kgcp-tablet-explainer-card {
    padding: 22px 24px;
    background: rgba(94, 84, 243, 0.06);
    border: 1px solid rgba(202, 199, 207, 0.10);
    border-radius: 10px;
    color: #d8d6df;
    text-align: left;
}

.kgcp-tablet-explainer-eyebrow {
    margin: 0 0 8px;
    color: #a4a2b6;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.kgcp-tablet-explainer-copy {
    margin: 0;
    color: #d8d6df;
    font-family: Urbanist, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

.kgcp-tablet-explainer-copy strong {
    color: #fff;
}

@media (max-width: 767px) {
    .kgcp-tablet-explainer {
        padding: 32px 0 16px;
    }
    .kgcp-tablet-explainer-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .kgcp-tablet-explainer-card {
        padding: 16px 18px;
    }
    .kgcp-tablet-explainer-copy {
        font-size:1rem;
        line-height: 1.55;
    }
}

/* Mobile: the tablet aspect ratio (1181x798) makes the screen tight on
 * narrow viewports. Keep the bezel visible but allow the inner panel to
 * stack tightly and scroll if the form needs more vertical room. The 3D
 * tilt is disabled on small screens to avoid layout shifts. */
@media (max-width: 767px) {
    .kgcp-tablet-form-section.kgcp-tablet-animated .tablet-wrap {
        transform: none;
    }
    .kgcp-tablet-form-section .kgcp-tablet-form-layer {
        border-radius: 6px;
    }
    .kgcp-tablet-form-section .kgcp-tablet-form-panel {
        padding: 12px 14px;
        gap: 6px;
        justify-content: flex-start;
    }
    .kgcp-tablet-form-section .kgcp-tablet-form-title {
        font-size: 1.15rem;
        line-height: 1.2;
    }
    .kgcp-tablet-form-section .kgcp-tablet-form-copy {
        font-size:1rem;
        line-height: 1.4;
    }
    .kgcp-tablet-form-section .kgcp-tablet-form-eyebrow {
        font-size:1rem;
        letter-spacing: 1.6px;
    }
    .kgcp-tablet-form-section .kgcp-tablet-form-privacy {
        font-size:1rem;
    }
}

/* ---------- Tablet form content centering ---------------------------- *
 * The tablet form previously rendered as a flex column with its children
 * stretched to the panel's left edge, so eyebrow, title, copy, form and
 * privacy line all read as left-anchored. To match the premium product
 * screen reference, the inner content is centered horizontally inside
 * the tablet screen area: the panel becomes a centered column with a
 * controlled max-width, every text element is center-aligned and capped
 * with a comfortable max-width, and the form (input + submit) stays
 * full-width inside that centered column so the call-to-action remains
 * wide and clickable.
 *
 * All rules are scoped to `.kgcp-tablet-form-section .kgcp-tablet-form-*`
 * so no Webflow form or button class is overridden globally.            */
.kgcp-tablet-form-section .kgcp-tablet-form-panel {
    align-items: center;
    text-align: center;
}

.kgcp-tablet-form-section .kgcp-tablet-form-eyebrow,
.kgcp-tablet-form-section .kgcp-tablet-form-title,
.kgcp-tablet-form-section .kgcp-tablet-form-copy,
.kgcp-tablet-form-section .kgcp-tablet-form-privacy {
    margin-left: auto;
    margin-right: auto;
}

/* Cap text width so long lines never reach the bezel edges. */
.kgcp-tablet-form-section .kgcp-tablet-form-title {
    max-width: 22ch;
}
.kgcp-tablet-form-section .kgcp-tablet-form-copy {
    max-width: 52ch;
}

/* Centered form column. Around 82% of the screen area on desktop, capped
 * to a comfortable reading width. The input and submit remain full width
 * inside this column via the existing Webflow `.input-field-2 / .w-button`
 * styles. */
.kgcp-tablet-form-section .kgcp-tablet-form-actions {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.kgcp-tablet-form-section .kgcp-tablet-form-actions form {
    width: 100%;
}

.kgcp-tablet-form-section .kgcp-tablet-form-actions .input-field-2,
.kgcp-tablet-form-section .kgcp-tablet-form-actions .form-submit-button {
    width: 100%;
    display: block;
}

/* Label sits above the input and follows the same centered rhythm as the
 * rest of the tablet copy. */
.kgcp-tablet-form-section .kgcp-tablet-form-actions .form-label {
    display: block;
    text-align: center;
}

/* Privacy note — compact, centered. */
.kgcp-tablet-form-section .kgcp-tablet-form-privacy {
    max-width: 48ch;
}

/* Mobile: allow the centered column to use the full available width so
 * the input/button stay easy to tap and no horizontal scroll appears. */
@media (max-width: 767px) {
    .kgcp-tablet-form-section .kgcp-tablet-form-actions {
        width: 100%;
        max-width: none;
    }
    .kgcp-tablet-form-section .kgcp-tablet-form-title {
        max-width: 18ch;
    }
    .kgcp-tablet-form-section .kgcp-tablet-form-copy,
    .kgcp-tablet-form-section .kgcp-tablet-form-privacy {
        max-width: 38ch;
    }
}

/* ------------------------------------------------------------------ */
/* Public preview: inline analysis progress card (scoped, additive).   */
/* Driven by public/assets/js/scan_preview.js while a scan is running. */
/* ------------------------------------------------------------------ */
.kgcp-progress {
    margin-top: 18px;
}
.kgcp-progress-bar-track {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
.kgcp-progress-bar-fill {
    position: relative;
    height: 100%;
    width: 2%;
    background: linear-gradient(90deg, #E54A92 0%, #6D52E7 100%);
    border-radius: 999px;
    transition: width 650ms cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 12px rgba(94, 84, 243, 0.55);
    overflow: hidden;
}
/* Scanning light that sweeps the FULL track left→right repeatedly, so the
 * bar reads as "alive / working" independent of the current fill width. */
.kgcp-progress-bar-track { position: relative; }
.kgcp-progress-bar-track::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 38%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-120%);
    animation: kgcp-bar-scan 1.8s ease-in-out infinite;
    pointer-events: none;
}
/* Freeze + hide the sweep the moment the preview is complete. */
.kgcp-preview-progress[data-complete] .kgcp-progress-bar-track::after {
    animation: none;
    opacity: 0;
}
@keyframes kgcp-bar-scan {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(330%); }
}
.kgcp-progress-step {
    margin: 0;
    font-weight: 600;
    color: #fff;
}
.kgcp-progress-count {
    margin: 4px 0 0;
    opacity: 0.7;
}
.kgcp-progress-steps {
    list-style: none;
    padding: 16px 0 0;
    margin: 16px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    /* All six stages on a single row. Sized to stay on one line inside the
     * 1100px progress card (same width as every other result box). */
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    font-size:1rem;
}
.kgcp-progress-steps li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    opacity: 0.45;
    color: #cfcde0;
    line-height: 1.2;
    transition: opacity 220ms ease, color 220ms ease;
}
.kgcp-step-label { min-width: 0; }
/* A single row of six is unreadable on phones: relax to a wrapping grid
 * there only (desktop/tablet keep the one-row layout). */
@media (max-width: 720px) {
    .kgcp-progress-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        font-size:1rem;
    }
}
.kgcp-progress-steps li[data-state="done"] {
    opacity: 1;
    color: #fff;
}
.kgcp-progress-steps li[data-state="active"] {
    opacity: 1;
    color: #fff;
    font-weight: 600;
}
/* ---- Stage marker: a 22px disc that morphs pending → active → done ---- */
.kgcp-step-marker {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    transition: background 220ms ease, border-color 220ms ease;
}
.kgcp-step-spinner,
.kgcp-step-check {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
/* Active: brand-coloured pulsing ring + rotating spinner arc. */
.kgcp-progress-steps li[data-state="active"] .kgcp-step-marker {
    border-color: rgba(94, 84, 243, 0.85);
    animation: kgcp-step-pulse 1.3s ease-in-out infinite;
}
.kgcp-step-spinner {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 2px solid rgba(94, 84, 243, 0.25);
    border-top-color: #8b80ff;
}
.kgcp-progress-steps li[data-state="active"] .kgcp-step-spinner {
    opacity: 1;
    animation: kgcp-step-spin 0.8s linear infinite;
}
/* Done: filled green disc with a popping checkmark. */
.kgcp-progress-steps li[data-state="done"] .kgcp-step-marker {
    border-color: #6bef69;
    background: #6bef69;
    box-shadow: 0 0 10px rgba(107, 239, 105, 0.5);
}
.kgcp-step-check {
    color: #06210f;
    font-size:16px;
    font-weight: 800;
    line-height: 1;
}
.kgcp-progress-steps li[data-state="done"] .kgcp-step-check {
    opacity: 1;
    animation: kgcp-step-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes kgcp-step-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(94, 84, 243, 0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(94, 84, 243, 0); }
}
@keyframes kgcp-step-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes kgcp-step-pop {
    0%   { transform: translate(-50%, -50%) scale(0.2); }
    70%  { transform: translate(-50%, -50%) scale(1.25); }
    100% { transform: translate(-50%, -50%) scale(1); }
}
/* Respect reduced-motion: keep the state colours, drop the motion. */
@media (prefers-reduced-motion: reduce) {
    .kgcp-progress-bar-track::after,
    .kgcp-progress-steps li[data-state="active"] .kgcp-step-marker,
    .kgcp-progress-steps li[data-state="active"] .kgcp-step-spinner,
    .kgcp-progress-steps li[data-state="done"] .kgcp-step-check {
        animation: none;
    }
    .kgcp-progress-bar-track::after { opacity: 0; }
    .kgcp-progress-bar-fill { transition: width 200ms linear; }
}

/* ---------- Premium live progress card (above the tablet) ----------
 * Sits between the page hero and the tablet video. Reuses the dark
 * `.contact-form-two` surface but spans the full suite width so the
 * progress bar reads as a premium dashboard signal — never as a raw
 * technical debug line. All selectors are scoped under
 * `.kgcp-preview-progress*` so they cannot leak elsewhere. */
.kgcp-preview-progress-card {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    padding: 26px 30px;
}
.kgcp-preview-progress-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    color: #a4a2b6;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.kgcp-preview-progress-title {
    margin: 0 0 4px;
    color: #fff;
    font-family: Urbanist, sans-serif;
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    line-height: 1.25;
}
.kgcp-preview-progress-intro {
    padding-top: 6px;
    padding-bottom: 14px;
    max-width: 64ch;
}
.kgcp-preview-progress .kgcp-progress-bar-track {
    height: 12px;
    margin-bottom: 10px;
}
.kgcp-preview-progress-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.kgcp-preview-progress-meta .kgcp-progress-step {
    flex: 1 1 auto;
    min-width: 0;
}
.kgcp-preview-progress-meta .kgcp-progress-count {
    margin: 0;
    flex: 0 0 auto;
    color: #a4a2b6;
}
/* Estimated countdown: a touch brighter than the muted step counter so the
   "noch ca. 0:45" reads as the live signal; the step text stays secondary. */
.kgcp-progress-eta {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* NOTE: the visible bar width + completion are owned entirely by the client
 * stage stepper in scan_preview.js (it sets 100% only when the final stage
 * turns green, then reloads). We deliberately do NOT force the fill width or
 * dim the card from the backend `data-status` here: the backend now finalizes
 * within a second or two, and such a rule would snap the bar to full while the
 * stepper is still on an earlier stage (bar/checklist out of sync). */


/* ============================================================ *
 * Scan preview page additions — Phase 3B polish.
 *
 * All selectors below are scoped to .kgcp-preview-* so they
 * cannot leak into the homepage, admin, report or any other
 * view. No Webflow rule, typography, button or card system is
 * duplicated; we sit on top of the existing `.contact-form-two`
 * card surface and add only the structure we need.
 * ============================================================ */

/* ---------- Persistent tablet video (Part 1) ---------- *
 * CSS-only tablet frame so the inner video screen can enforce a
 * true 16:9 aspect ratio. The placeholder (.kgcp-preview-video
 * with its play button + overlay) and the YouTube iframe injected
 * by /assets/js/scan_preview.js share the exact same dimensions,
 * which fixes the previous height mismatch where the iframe was
 * stretched into the tablet's ~3:2 screen cutout. Click-to-load
 * privacy behaviour is unchanged. */
.kgcp-preview-tablet-section {
    /* Padding ties the tablet to the surrounding form column
     * without colliding with the page hero above or the score
     * suite directly below. */
    padding: 12px 0 28px;
    margin-bottom: 18px;
}
.kgcp-preview-video-tablet {
    /* Shares the 1100px max-width of the score suite and result shell so
     * the video, the GEO Preview Score and the category cards all stack
     * edge-to-edge at one consistent width. The 16:9 screen below dictates
     * the actual visible height. */
    position: relative;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 18px 18px 26px;
    border-radius: 22px;
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(94, 84, 243, 0.16), rgba(15, 13, 37, 0) 55%),
        radial-gradient(120% 100% at 100% 100%, rgba(230, 3, 91, 0.12), rgba(15, 13, 37, 0) 55%),
        #0f0d25;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 24px 60px rgba(15, 13, 37, 0.55);
    box-sizing: border-box;
}
.kgcp-preview-video-frame {
    /* Decorative top device chrome — keeps the tablet visually
     * recognisable without depending on an SVG bezel. */
    position: relative;
    height: 14px;
    margin-bottom: 12px;
}
.kgcp-preview-video-camera {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
}
.kgcp-preview-video-screen {
    /* The 16:9 inner viewport. Both the placeholder visuals and
     * the injected iframe live inside this box so their rendered
     * dimensions are guaranteed to match. */
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #0f0d25;
}
.kgcp-preview-video {
    /* Placeholder fills the 16:9 screen. Once the iframe is
     * injected by scan_preview.js it inherits the same box via
     * `.kgcp-preview-video iframe` below. */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(94, 84, 243, 0.22), rgba(15, 13, 37, 0) 55%),
        radial-gradient(120% 100% at 100% 100%, rgba(230, 3, 91, 0.18), rgba(15, 13, 37, 0) 55%),
        #0f0d25;
    color: #fff;
    font-family: Urbanist, sans-serif;
    text-align: center;
}
.kgcp-preview-video-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(52px, 12%, 84px);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #E54A92, #6D52E7);
    color: #fff;
    font-size: clamp(1.3rem, 2.6vw, 2rem);
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(15, 13, 37, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
}
.kgcp-preview-video-button:focus {
    outline: 2px solid #fff;
    outline-offset: 4px;
}
.kgcp-preview-video-play {
    transform: translateX(2px);
    line-height: 1;
}
.kgcp-preview-video-overlay {
    /* Title + copy + fallback link sit at the bottom of the 16:9
     * screen area so they never overlap the centered play button. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(10px, 2.5%, 22px) clamp(14px, 4%, 36px);
    background: linear-gradient(to top, rgba(15, 13, 37, 0.82), rgba(15, 13, 37, 0));
    pointer-events: none;
}
.kgcp-preview-video-overlay .kgcp-preview-video-link {
    pointer-events: auto;
}
.kgcp-preview-video-eyebrow {
    margin: 0 0 4px;
    color: #a4a2b6;
    font-size: clamp(0.875rem, 0.9vw, 0.875rem);
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}
.kgcp-preview-video-title {
    margin: 0 0 4px;
    color: #fff;
    font-size: clamp(0.9rem, 1.4vw, 1.15rem);
    font-weight: 700;
    line-height: 1.25;
}
.kgcp-preview-video-copy {
    /* Auto side-margins centre the 60ch text block under the title;
     * without them the capped block pins to the left of the wide overlay. */
    margin: 0 auto 2px;
    color: #d8d6df;
    font-size: clamp(0.875rem, 1vw, 0.9rem);
    line-height: 1.4;
    max-width: 60ch;
}
.kgcp-preview-video-fallback {
    margin: 4px 0 0;
    font-size: clamp(0.875rem, 0.9vw, 0.875rem);
    color: #cac7cf;
}
.kgcp-preview-video-fallback a {
    color: #cac7cf;
    text-decoration: underline;
}
/* When the user has clicked play the injected iframe fills the
 * same 16:9 screen box. `inset: 0` plus width/height 100% guarantee
 * the iframe shares identical dimensions with the placeholder. */
.kgcp-preview-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    border-radius: 0;
}
.kgcp-preview-video[data-loaded="1"] .kgcp-preview-video-button,
.kgcp-preview-video[data-loaded="1"] .kgcp-preview-video-overlay {
    display: none;
}
.kgcp-preview-video[data-loaded="1"] {
    cursor: default;
}
@media (max-width: 639px) {
    .kgcp-preview-video-tablet {
        max-width: 100%;
        padding: 12px 12px 18px;
        border-radius: 16px;
    }
    .kgcp-preview-video-frame {
        height: 10px;
        margin-bottom: 8px;
    }
}

/* ============================================================ *
 * Picture-in-Picture video (ready state).
 *
 * On the ready page the explainer video leaves the document flow and
 * becomes a floating mini-player docked bottom-right, so the visitor reads
 * the score (auto-scrolled into view) while the video stays one click away.
 * A control bar (injected by scan_preview.js) lets them ENLARGE it into a
 * centered modal or CLOSE it. Toggling dock⇄enlarge never touches the
 * <iframe>, so playback continues uninterrupted across the transition.
 * ============================================================ */
.kgcp-preview-tablet-section.is-docked,
.kgcp-preview-tablet-section.is-expanded {
    position: fixed;
    z-index: 1200;
    margin: 0;
    padding: 0;
}
.kgcp-preview-tablet-section.is-docked {
    right: clamp(12px, 2vw, 24px);
    bottom: clamp(12px, 2vw, 24px);
    width: min(360px, 86vw);
    animation: kgcp-pip-in 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.kgcp-preview-tablet-section.is-expanded {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(960px, 92vw);
}
.kgcp-preview-tablet-section.is-docked .kgcp-preview-video-tablet,
.kgcp-preview-tablet-section.is-expanded .kgcp-preview-video-tablet {
    max-width: 100%;
}
.kgcp-preview-tablet-section.is-docked .kgcp-preview-video-tablet {
    padding: 8px 10px 12px;
    box-shadow: 0 22px 55px rgba(8, 7, 20, 0.6);
}
/* The big caption only makes sense at full size — hide it in the tiny dock. */
.kgcp-preview-tablet-section.is-docked .kgcp-preview-video-overlay {
    display: none;
}

/* Control bar (title + enlarge + close) injected above the tablet screen. */
.kgcp-pip-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 2px 8px;
}
.kgcp-pip-bar-title {
    font-size:1rem;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #a4a2b6;
}
.kgcp-pip-actions {
    display: flex;
    gap: 6px;
}
.kgcp-pip-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease;
}
.kgcp-pip-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}
.kgcp-pip-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
/* Active state for the scroll-sync toggle (video follows the scroll). */
.kgcp-pip-btn.is-active {
    background: linear-gradient(135deg, #E54A92, #6D52E7);
    border-color: transparent;
    color: #fff;
}

/* Dimmed backdrop behind the enlarged modal. */
.kgcp-pip-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: rgba(8, 7, 20, 0.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: kgcp-pip-fade 0.2s ease;
}

@keyframes kgcp-pip-in {
    from { opacity: 0; transform: translateY(16px) scale(0.95); }
    to   { opacity: 1; transform: none; }
}
@keyframes kgcp-pip-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .kgcp-preview-tablet-section.is-docked { animation: none; }
    .kgcp-pip-backdrop { animation: none; }
}

/* ---------- Prominent GEO Preview Score (Part 2) ---------- */
.kgcp-preview-score-hero {
    padding: 36px 28px;
}
.kgcp-preview-score-eyebrow {
    margin: 0;
    color: #a4a2b6;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}
.kgcp-preview-score-value {
    /* Override the legacy inline font-size that used to render the
     * score; now driven by .kgcp-score-placeholder strong gradient
     * styling for visual consistency with category cards. */
    margin: 6px 0 10px;
    font-family: Urbanist, sans-serif;
    line-height: 1;
}
.kgcp-preview-score-value strong {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(107deg, #E54A92, #6D52E7);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: clamp(3.2rem, 7vw, 5rem);
    font-weight: 700;
    line-height: 1;
    display: inline-block;
}
.kgcp-preview-score-scale {
    color: #a4a2b6;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    font-weight: 600;
    margin-left: 8px;
}
.kgcp-preview-score-summary {
    margin: 8px auto 0;
    max-width: 64ch;
    color: #cac7cf;
    font-size: 1rem;
    line-height: 1.55;
}

/* ---------- 3 by 2 category grid (Part 2) ---------- *
 * Forces a readable three-column layout on desktop (six cards =
 * exactly two rows), two-column on tablet, single-column on
 * mobile. `minmax(0, 1fr)` is required so long German headings can
 * wrap inside the grid track instead of forcing horizontal scroll. */
.kgcp-preview-score-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
@media (max-width: 1023px) {
    .kgcp-preview-score-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 639px) {
    .kgcp-preview-score-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}
.kgcp-preview-score-card {
    /* `min-width: 0` allows the grid item to shrink below its
     * intrinsic content width so long category names wrap inside the
     * card instead of forcing a horizontal scroll bar. */
    min-width: 0;
    max-width: none;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    overflow: visible;
}
.kgcp-preview-score-card-title {
    /* Long German headings (e.g. "Maschinenlesbarkeit",
     * "Vertrauenssignale") must wrap inside narrow grid tracks
     * without overlapping or being cut. Reduced base font size and
     * a controlled line-height keep the title readable across all
     * desktop column widths. */
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    line-height: 1.25;
    margin: 0 0 4px;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}
.kgcp-preview-score-card-headline,
.kgcp-preview-score-card-body {
    overflow-wrap: break-word;
    word-break: normal;
}
.kgcp-preview-score-card-section-title {
    margin: 10px 0 4px;
}
.kgcp-preview-score-card-list {
    margin: 0 0 6px 18px;
    padding: 0;
}
.kgcp-preview-score-card-list li {
    margin: 2px 0;
    overflow-wrap: break-word;
}

/* ---------- Compact technical note (Part 2) ---------- *
 * Visually quieter than other cards so it reads as supporting
 * information instead of an error. Sits below the category grid. */
.kgcp-preview-technical-note {
    background: rgba(94, 84, 243, 0.05);
    border: 1px solid rgba(202, 199, 207, 0.18);
    padding: 18px 22px;
    border-radius: 6px;
}
.kgcp-preview-technical-note h3 {
    font-size: 1rem;
    margin: 0 0 6px;
}
.kgcp-preview-technical-note p,
.kgcp-preview-technical-note li {
    color: #cac7cf;
    line-height: 1.55;
}

/* Mobile polish: tighten the tablet padding and the score hero so
 * the score remains prominent without dominating the small viewport. */
@media (max-width: 639px) {
    .kgcp-preview-tablet-section {
        padding: 6px 0 18px;
    }
    .kgcp-preview-score-hero {
        padding: 26px 18px;
    }
    .kgcp-preview-score-card {
        padding: 22px 20px;
    }
}

/* ============================================================ *
 * Premium GEO preview hero + cards (Phase 3B polish v2).
 *
 * These selectors layer on top of the earlier `.kgcp-preview-*`
 * scope and are only active when the redesigned markup variants
 * `.kgcp-preview-score-hero--premium` and
 * `.kgcp-preview-score-card--premium` are present. All selectors
 * remain scoped so they cannot affect the homepage, admin, report
 * or any other view, and no vendor file (normalize, webflow,
 * adp-website) is modified.
 * ============================================================ */

/* ---------- Status tone palette (display-only mapping) ---------- *
 * The four tones map 1:1 to ScoreNormalizer statuses
 * (strong / ok / weak / missing) but are derived in the view, not
 * in the backend. They tint the score ring, status pills, mini
 * meters and card borders consistently. */
.kgcp-preview-score-hero--premium,
.kgcp-preview-score-card--premium {
    --kgcp-tone-color: #cac7cf;
    --kgcp-tone-bg: rgba(94, 84, 243, 0.08);
    --kgcp-tone-border: rgba(202, 199, 207, 0.22);
}
.kgcp-preview-score-hero--premium[data-tone="strong"],
.kgcp-preview-score-card--premium[data-tone="strong"] {
    --kgcp-tone-color: #6bef69;
    --kgcp-tone-bg: rgba(107, 239, 105, 0.12);
    --kgcp-tone-border: rgba(107, 239, 105, 0.32);
}
.kgcp-preview-score-hero--premium[data-tone="ok"],
.kgcp-preview-score-card--premium[data-tone="ok"] {
    --kgcp-tone-color: #6D52E7;
    --kgcp-tone-bg: rgba(94, 84, 243, 0.14);
    --kgcp-tone-border: rgba(94, 84, 243, 0.36);
}
.kgcp-preview-score-hero--premium[data-tone="weak"],
.kgcp-preview-score-card--premium[data-tone="weak"] {
    --kgcp-tone-color: #ff7a9c;
    --kgcp-tone-bg: rgba(230, 3, 91, 0.12);
    --kgcp-tone-border: rgba(230, 3, 91, 0.34);
}
.kgcp-preview-score-hero--premium[data-tone="missing"],
.kgcp-preview-score-card--premium[data-tone="missing"] {
    --kgcp-tone-color: #ff7a9c;
    --kgcp-tone-bg: rgba(230, 3, 91, 0.10);
    --kgcp-tone-border: rgba(230, 3, 91, 0.32);
}

/* ---------- Premium score hero ---------- *
 * Two-column layout: a 160x160 SVG radial score ring on the left,
 * eyebrow / title / one-liner / status pill on the right. On
 * smaller screens the ring stacks above the text. The card sits
 * on the existing `.contact-form-two` dark surface so it stays
 * visually consistent with the rest of the report. */
.kgcp-preview-score-hero--premium {
    padding: 36px 32px;
    overflow: hidden;
    position: relative;
}
.kgcp-preview-score-hero--premium::before {
    /* Subtle brand glow behind the ring, kept very low opacity so
     * the score remains the focal point. */
    content: "";
    position: absolute;
    top: -40%;
    left: -10%;
    width: 60%;
    height: 180%;
    background: radial-gradient(closest-side, rgba(94, 84, 243, 0.18), rgba(15, 13, 37, 0) 70%);
    pointer-events: none;
}
.kgcp-preview-score-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}
.kgcp-preview-score-ring-wrap {
    position: relative;
    width: 200px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}
.kgcp-preview-score-ring {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.kgcp-preview-score-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 10;
}
.kgcp-preview-score-ring-fill {
    fill: none;
    stroke: url(#kgcp-ring-grad);
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 600ms ease;
}
.kgcp-preview-score-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    line-height: 1;
}
.kgcp-preview-score-ring-value {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(107deg, #E54A92, #6D52E7);
    -webkit-background-clip: text;
    background-clip: text;
    font-family: Urbanist, sans-serif;
    font-size: clamp(2.8rem, 5vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
}
.kgcp-preview-score-ring-scale {
    color: #a4a2b6;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    font-weight: 600;
    margin-top: 4px;
    letter-spacing: 0.5px;
}
.kgcp-preview-score-hero-text {
    min-width: 0;
}
.kgcp-preview-score-hero--premium .kgcp-preview-score-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    color: #a4a2b6;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.kgcp-preview-eyebrow-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6bef69;
    box-shadow: 0 0 0 4px rgba(107, 239, 105, 0.18);
}
.kgcp-preview-score-hero-title {
    margin: 0 0 8px;
    font-family: Urbanist, sans-serif;
    color: #fff;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
}
.kgcp-preview-score-hero-line {
    margin: 0 0 14px;
    color: #cac7cf;
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    line-height: 1.55;
    max-width: 56ch;
}
.kgcp-preview-score-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--kgcp-tone-bg);
    border: 1px solid var(--kgcp-tone-border);
    color: #fff;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    font-weight: 500;
}
.kgcp-preview-score-hero-pill strong {
    color: var(--kgcp-tone-color);
    font-weight: 700;
}
.kgcp-preview-pill-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kgcp-tone-color);
}

/* ---------- Premium category cards ---------- *
 * Each card is a flex column so the chip rows stack predictably
 * regardless of available data, and `min-width: 0` lets long
 * German category names wrap inside narrow grid tracks. The
 * left border accent uses the tone palette to give the six cards
 * an at-a-glance visual rhythm. */
.kgcp-preview-score-card--premium {
    padding: 22px 22px 20px;
    gap: 0;
    position: relative;
    border-left: 3px solid var(--kgcp-tone-border);
}
.kgcp-preview-score-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.kgcp-preview-score-card--premium .kgcp-preview-score-card-title {
    /* Slightly smaller than the previous version so the title and
     * the numeric score share the header row comfortably even in a
     * narrow 3-column grid track. */
    margin: 0;
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.25;
    flex: 1 1 auto;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}
.kgcp-preview-score-card-score {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    flex-shrink: 0;
    font-family: Urbanist, sans-serif;
    line-height: 1;
}
.kgcp-preview-score-card-score-value {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(107deg, #E54A92, #6D52E7);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: clamp(1.4rem, 2vw, 1.75rem);
    font-weight: 700;
    line-height: 1;
}
.kgcp-preview-score-card-score-scale {
    color: #8c8a9d;
    font-size:1rem;
    font-weight: 600;
    letter-spacing: 0.4px;
}
.kgcp-preview-score-card-score-placeholder {
    color: #6f6d7e;
    font-size: 1.2rem;
    font-weight: 700;
}
.kgcp-preview-score-card-meter {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
    margin-bottom: 14px;
}
.kgcp-preview-score-card-meter-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--kgcp-tone-color);
    transition: width 600ms ease;
}
.kgcp-preview-score-card-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--kgcp-tone-bg);
    border: 1px solid var(--kgcp-tone-border);
    color: var(--kgcp-tone-color);
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.kgcp-preview-score-card--premium .kgcp-preview-score-card-headline {
    margin: 0 0 4px;
    color: #fff;
    font-size:1rem;
    line-height: 1.35;
}
.kgcp-preview-score-card--premium .kgcp-preview-score-card-body {
    margin: 0 0 12px;
    color: #cac7cf;
    font-size:1rem;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: normal;
    /* Limit the wall-of-text feeling without dropping data: clamp
     * the inline summary to three lines on supporting browsers. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kgcp-preview-score-card-chiprow {
    margin-top: 8px;
}
.kgcp-preview-score-card-chiprow-label {
    margin: 0 0 4px;
    color: #a4a2b6;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.kgcp-preview-score-card-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.kgcp-preview-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size:1rem;
    line-height: 1.3;
    font-family: Urbanist, sans-serif;
    color: #ececf2;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    max-width: 100%;
    overflow-wrap: anywhere;
}
.kgcp-preview-chip--positive {
    color: #d6f5e2;
    background: rgba(107, 239, 105, 0.10);
    border-color: rgba(107, 239, 105, 0.30);
}
.kgcp-preview-chip--positive::before {
    content: "✓";
    color: #6bef69;
    font-weight: 700;
}
.kgcp-preview-chip--improvement {
    color: #ffd9e8;
    background: rgba(230, 3, 91, 0.10);
    border-color: rgba(230, 3, 91, 0.32);
}
.kgcp-preview-chip--improvement::before {
    content: "↑";
    color: #ff7a9c;
    font-weight: 700;
}

/* ---------- Support cards (technical note, warnings, business) ---------- *
 * Small visual upgrade only: an eyebrow row above the heading and
 * consistent typography. Keeps these blocks visibly in the same
 * design family as the score hero without becoming heavy. */
.kgcp-preview-supportcard {
    padding: 22px 24px;
}
.kgcp-preview-supportcard-eyebrow {
    margin: 0 0 4px;
    color: #a4a2b6;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.kgcp-preview-supportcard h3 {
    margin: 0 0 6px;
    color: #fff;
    font-family: Urbanist, sans-serif;
    font-size: 1.05rem;
    line-height: 1.3;
}
.kgcp-preview-supportcard-list {
    margin: 8px 0 0 0;
    padding: 0 0 0 18px;
}
.kgcp-preview-supportcard-list li {
    margin: 2px 0;
}

/* ---------- Responsive tuning ---------- */
@media (max-width: 767px) {
    .kgcp-preview-score-hero--premium {
        padding: 28px 22px;
    }
    .kgcp-preview-score-hero-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        text-align: center;
    }
    .kgcp-preview-score-ring-wrap {
        width: 168px;
    }
    .kgcp-preview-score-hero-line {
        margin-left: auto;
        margin-right: auto;
    }
    .kgcp-preview-score-hero-pill {
        margin: 0 auto;
    }
}
@media (max-width: 639px) {
    .kgcp-preview-score-card--premium {
        padding: 20px 18px 18px;
    }
    .kgcp-preview-score-card--premium .kgcp-preview-score-card-body {
        -webkit-line-clamp: 4;
    }
}

/* ============================================================ *
 * Score suite shell (Phase 3B polish v3).
 *
 * The "suite" wraps both the GEO Preview Score hero AND the 3×2
 * category grid in a single container with one shared max width.
 * This guarantees that the hero's left/right edges align exactly
 * with the first/third card columns below it, so the score area
 * reads as one cohesive enterprise dashboard block instead of a
 * narrow card floating above a wider grid.
 *
 * Implementation notes:
 *   • `.kgcp-preview-score-suite` carries the shared max-width.
 *   • The hero (`.kgcp-preview-score-hero--premium`) uses the
 *     existing dark `.contact-form-two` surface but overrides
 *     its inherited 626px cap so it fills 100% of the suite.
 *     We also set the override inline on the element itself in
 *     the view (`style="max-width:none;width:100%;"`) for extra
 *     safety against cascade order.
 *   • A premium-sized gap (clamp) separates hero and grid.
 *   • The grid was already `display:grid` and full-width, so
 *     placing it inside the same suite keeps it edge-aligned
 *     with the hero by construction.
 *
 * All selectors stay namespaced under `.kgcp-preview-*`.
 * ============================================================ */
.kgcp-preview-score-suite {
    max-width: 1300px;
    margin: 0 auto 30px;
    display: block;
    width: 100%;
}
/* Hero spans the full suite width. We use `!important` to win
 * against the legacy `.contact-form-two { max-width: 626px; }`
 * rule in adp-website.css without touching the vendor file. */
.kgcp-preview-score-suite > .kgcp-preview-score-hero--premium {
    max-width: none !important;
    width: 100%;
    margin: 0 0 clamp(24px, 3vw, 40px);
}
/* Grid lives inside the same suite, edge-aligned with the hero
 * above it. We override the legacy `.kgcp-preview-score-grid`
 * margin-bottom so the suite controls the outer rhythm. */
.kgcp-preview-score-suite > .kgcp-preview-score-grid {
    margin-bottom: 0;
    width: 100%;
}

/* Tighten the suite gap on small viewports — the hero stacks
 * vertically and the cards become 1 column, so the breathing
 * room between them can shrink slightly without feeling cramped. */
@media (max-width: 767px) {
    .kgcp-preview-score-suite {
        margin-bottom: 24px;
    }
    .kgcp-preview-score-suite > .kgcp-preview-score-hero--premium {
        margin-bottom: 20px;
    }
}

/* On very wide screens, line the progress card width up with the
 * score suite so the live progress, the tablet area, the score
 * hero and the category grid all share a consistent visual axis. */
@media (min-width: 1024px) {
    .kgcp-preview-progress-card {
        max-width: 1300px;
    }
}

/* ============================================================ *
 * Result shell (Phase 3B polish v4).
 *
 * Wraps every result-supporting panel — "Zur technischen Vorschau",
 * "Hinweise zur Vorschau", "Business Interpretation", the
 * opportunity calculator and "Vollanalyse anfordern" — in a single
 * centered container that shares the score-suite max-width
 * (1100px). The panels therefore align edge-to-edge with the
 * GEO Preview Score hero and the 3×2 category grid above, so the
 * whole result area reads as one dashboard.
 *
 * `.kgcp-preview-result-panel` overrides the legacy
 * `.contact-form-two { max-width: 626px }` rule from adp-website.css
 * without touching that vendor file. It also tightens the dense
 * 80px/70px form padding so support panels feel like calm reading
 * blocks instead of large form cards.
 * ============================================================ */
.kgcp-preview-result-shell {
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
}
.kgcp-preview-result-shell > .kgcp-preview-result-panel,
.kgcp-preview-result-shell > .kgcp-opportunity {
    max-width: none !important;
    width: 100%;
    padding: 24px 26px;
    margin: 0 0 20px;
    box-sizing: border-box;
}
.kgcp-preview-result-shell > .kgcp-preview-result-panel:last-child,
.kgcp-preview-result-shell > .kgcp-opportunity:last-child {
    margin-bottom: 0;
}
.kgcp-preview-result-shell > .kgcp-preview-result-panel.kgcp-preview-technical-note {
    /* Quieter visual treatment is already defined upstream; just
     * keep the same outer rhythm as the other result panels. */
    padding: 22px 26px;
}
@media (max-width: 639px) {
    .kgcp-preview-result-shell > .kgcp-preview-result-panel {
        padding: 20px 18px;
        margin-bottom: 16px;
    }
}

/* ============================================================ *
 * Result category card — top accent + overflow note (v4).
 *
 * Adds the same magenta→purple top accent strip that the
 * explanation cards use, so the six data cards belong to the
 * same visual product family as the "Wie der Preview Score
 * entsteht" module. The accent is purely decorative and uses
 * the existing kgcp-preview-* namespace.
 * ============================================================ */
.kgcp-preview-score-card--premium {
    /* Switch the previous solid left border accent off so the new
     * top accent strip can carry the visual rhythm on its own. */
    border-left: 0;
    overflow: hidden;
}
.kgcp-preview-score-card--premium::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(230, 3, 91, 0.7), rgba(94, 84, 243, 0.7));
    opacity: 0.85;
    pointer-events: none;
}
.kgcp-preview-score-card-more {
    margin: 10px 0 0;
    color: #a4a2b6;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    line-height: 1.4;
    font-style: italic;
}

/* ============================================================ *
 * Permanent GEO Vorschau explanation section.
 *
 * Sits between the scan preview result area and the
 * "Brands, die wir sichtbar machen" marquee. All selectors are
 * scoped under `.kgcp-preview-explain*` so they cannot leak into
 * the homepage, footer, marquee, score grid or any other view.
 * No global card/grid rules are introduced. Visuals are pure
 * CSS (no icon library, no external assets).
 * ============================================================ */
.kgcp-preview-explain {
    /* Surrounding rhythm: enough breathing room above (the lead
     * placeholder card sits directly above) and below (the brand
     * marquee starts right after). */
    padding: 70px 15px 80px;
    background: transparent;
}
.kgcp-preview-explain-inner {
    /* Same outer width as the score suite so the explanation grid
     * visually aligns with the score grid above. */
    max-width: 1300px;
    margin: 0 auto;
}
.kgcp-preview-explain-head {
    text-align: center;
    margin: 0 auto 40px;
    max-width: 720px;
}
.kgcp-preview-explain-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: #a4a2b6;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}
.kgcp-preview-explain-title {
    margin: 0 0 14px;
    color: #fff;
    font-family: Urbanist, sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
}
.kgcp-preview-explain-intro {
    margin: 0;
    color: #cac7cf;
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    line-height: 1.6;
}
.kgcp-preview-explain-grid {
    /* Desktop 3×2. `minmax(0, 1fr)` lets long German words wrap
     * inside narrow tracks instead of forcing horizontal scroll. */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
@media (max-width: 1023px) {
    .kgcp-preview-explain-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 639px) {
    .kgcp-preview-explain-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}
.kgcp-preview-explain-card {
    /* Reuses the same dark panel + magenta/purple accent
     * vocabulary as the existing score cards, without
     * inheriting `.contact-form-two` (which carries an
     * unrelated 626px max-width cap). Flex column ensures
     * every card in a row reaches the same height even when
     * one copy block is shorter than its neighbours. */
    position: relative;
    min-width: 0;
    background: #19173299;
    border: 1px solid rgba(202, 199, 207, 0.12);
    border-radius: 10px;
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    height: 100%;
}
.kgcp-preview-explain-card-body {
    /* Text block grows to fill the available vertical space so
     * the decorative visual always sits flush at the bottom of
     * each card — this is what gives the six cards a balanced,
     * coherent "product module" feel even with varying copy
     * lengths. */
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}
.kgcp-preview-explain-card::before {
    /* Subtle brand accent strip on the top edge — mirrors the
     * left accent the score cards use, kept very low-key so the
     * section reads as supporting context, not as a result. */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(230, 3, 91, 0.7), rgba(94, 84, 243, 0.7));
    opacity: 0.85;
}
.kgcp-preview-explain-card-eyebrow {
    margin: 0;
    color: #a4a2b6;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.kgcp-preview-explain-card-title {
    margin: 0;
    color: #fff;
    font-family: Urbanist, sans-serif;
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}
.kgcp-preview-explain-card-copy {
    margin: 0;
    color: #cac7cf;
    font-size:1rem;
    line-height: 1.55;
    overflow-wrap: break-word;
}
.kgcp-preview-explain-visual {
    margin-top: auto;
    padding: 12px 14px;
    background: rgba(15, 13, 37, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    /* Fixed height so every card's bottom mockup zone aligns
     * across the grid regardless of how much copy a card carries
     * above it — this is what gives the six cards a single,
     * coherent product rhythm. */
    min-height: 104px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---------- Individual abstract SVG mockups per card -------------
 * Each `.kgcp-preview-explain-mock--<visual>` renders a unique
 * abstract SVG matched to the card topic (visibility, clarity,
 * structure, trust, quality, score). They share the same outer
 * height + container so the six cards remain perfectly aligned in
 * the grid. None of the SVGs contain readable labels, file names,
 * endpoint names, provider names, or scoring weights — so they
 * cannot leak internal scan mechanics. */
.kgcp-preview-explain-mock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
}
.kgcp-preview-explain-svg {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 80px;
}

/* Soft closing note below the grid. */
.kgcp-preview-explain-note {
    margin: 30px auto 0;
    max-width: 720px;
    text-align: center;
    color: #a4a2b6;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    line-height: 1.55;
}

/* ---------- Full-width score composition card ---------- */
/* Sits below the six-card grid. Two columns on desktop (text on
 * the left, qualitative weighting bars on the right); stacked on
 * narrower viewports. Uses public-friendly weighting labels
 * (Hoch / Mittel / Ergänzend) — no exact percentages, no formula
 * details, to keep the scoring internals proprietary. */
.kgcp-preview-explain-score-card {
    position: relative;
    margin-top: 22px;
    background: #19173299;
    border: 1px solid rgba(202, 199, 207, 0.12);
    border-radius: 12px;
    padding: 28px 28px 26px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    overflow: hidden;
}
.kgcp-preview-explain-score-card::before {
    /* Matches the accent strip on the six small cards so the big
     * card visually belongs to the same module. */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(230, 3, 91, 0.7), rgba(94, 84, 243, 0.7));
    opacity: 0.85;
}
.kgcp-preview-explain-score-card-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.kgcp-preview-explain-score-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.kgcp-preview-explain-score-row {
    display: grid;
    /* Label – track – weight badge. The badge column is a fixed
     * width so all three Hoch / Mittel / Ergänzend badges share
     * the exact same width and align cleanly down the right edge
     * of the bars. minmax(0,…) on the first two tracks prevents
     * long German compounds from forcing horizontal scroll. */
    grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) 86px;
    align-items: center;
    gap: 12px;
    font-family: Urbanist, sans-serif;
}
.kgcp-preview-explain-score-label {
    color: #fff;
    font-size:1rem;
    font-weight: 600;
    overflow-wrap: break-word;
    hyphens: auto;
}
.kgcp-preview-explain-score-track {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.kgcp-preview-explain-score-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #E54A92, #6D52E7);
    /* Per-level qualitative fill widths. We avoid exact percentages
     * because the actual scoring formula is intentionally not
     * disclosed publicly. */
    width: 60%;
}
.kgcp-preview-explain-score-row[data-level="high"] .kgcp-preview-explain-score-fill { width: 92%; }
.kgcp-preview-explain-score-row[data-level="medium"] .kgcp-preview-explain-score-fill { width: 60%; }
.kgcp-preview-explain-score-row[data-level="supporting"] .kgcp-preview-explain-score-fill {
    width: 38%;
    background: linear-gradient(90deg, rgba(230, 3, 91, 0.55), rgba(94, 84, 243, 0.55));
}
.kgcp-preview-explain-score-weight {
    /* Compact capsule pill — same width and height for Hoch /
     * Mittel / Ergänzend so the right edge of the composition
     * card reads as one calm column instead of three different
     * blocky badges. Matches the visual weight of the mock tag
     * used in the six explanation cards. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 86px;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(94, 84, 243, 0.14);
    border: 1px solid rgba(94, 84, 243, 0.25);
    color: #fff;
    font-size:1rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}
.kgcp-preview-explain-score-row[data-level="medium"] .kgcp-preview-explain-score-weight {
    background: rgba(245, 177, 76, 0.16);
    border-color: rgba(245, 177, 76, 0.3);
}
.kgcp-preview-explain-score-row[data-level="supporting"] .kgcp-preview-explain-score-weight {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #cac7cf;
}

/* Tablet: two-column grid keeps six cards 2-up; score card stacks. */
@media (max-width: 1023px) {
    .kgcp-preview-explain-score-card {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 26px 24px 24px;
    }
}

@media (max-width: 639px) {
    .kgcp-preview-explain {
        padding: 50px 15px 60px;
    }
    .kgcp-preview-explain-head {
        margin-bottom: 28px;
    }
    .kgcp-preview-explain-card {
        padding: 20px 18px 18px;
    }
    .kgcp-preview-explain-score-card {
        padding: 22px 18px 20px;
    }
    .kgcp-preview-explain-score-row {
        /* On phones the label/track/weight layout collapses to
         * label + weight on top, track full-width below — keeps
         * everything readable without any horizontal scroll. */
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 6px;
    }
    .kgcp-preview-explain-score-track {
        grid-column: 1 / -1;
    }
}

/* ============================================================ *
 * Traffic-light scan result cards (Phase 3B polish v5).
 *
 * Simplifies the six public scan result category cards into a
 * calm, premium dashboard. The cards keep their existing premium
 * shell (`.kgcp-preview-score-card--premium`) — these selectors
 * only adjust the inner rhythm, swap the heavy status pill for a
 * compact state label, retint the meter via a traffic-light
 * palette (red / amber / green) driven by `data-tlight`, and
 * replace the old chip rows with compact Stark / Pruefen signal
 * lists. Backend scoring, thresholds and signal data remain
 * unchanged — the view abstracts technical wording at render
 * time only.
 *
 * `data-tlight` values: red (0..39), amber (40..69), green
 * (70..100), neutral (no score). The mapping is computed in
 * `resources/views/public/scan_preview.php`.
 *
 * All selectors stay namespaced under `.kgcp-*` and no vendor
 * CSS (normalize, webflow, adp-website) is touched.
 * ============================================================ */

/* Traffic-light palette — display only. */
.kgcp-preview-score-card--premium[data-tlight="green"] {
    --kgcp-tl-color: #6bef69;
    --kgcp-tl-bg: rgba(107, 239, 105, 0.12);
    --kgcp-tl-border: rgba(107, 239, 105, 0.42);
}
.kgcp-preview-score-card--premium[data-tlight="amber"] {
    --kgcp-tl-color: #ff7a9c;
    --kgcp-tl-bg: rgba(230, 3, 91, 0.12);
    --kgcp-tl-border: rgba(230, 3, 91, 0.42);
}
.kgcp-preview-score-card--premium[data-tlight="red"] {
    --kgcp-tl-color: #ff7a9c;
    --kgcp-tl-bg: rgba(230, 3, 91, 0.12);
    --kgcp-tl-border: rgba(230, 3, 91, 0.42);
}
.kgcp-preview-score-card--premium[data-tlight="neutral"] {
    --kgcp-tl-color: #8c8a9d;
    --kgcp-tl-bg: rgba(255, 255, 255, 0.05);
    --kgcp-tl-border: rgba(255, 255, 255, 0.12);
}

/* Equal heights + clean rhythm. The card already uses flex
 * column from the legacy `.kgcp-preview-score-card` rule, so we
 * just enforce stretch on the parent grid and let the footer
 * push to the bottom via `margin-top:auto`. */
.kgcp-preview-score-grid {
    align-items: stretch;
}
.kgcp-preview-score-card--premium.kgcp-score-card {
    height: 100%;
    gap: 0;
}

/* Retint the existing meter with the traffic-light colour. The
 * meter element and width % are unchanged — only the fill colour
 * is driven by `--kgcp-tl-color` so 70/100 reads green at a
 * glance, 40..69 amber, 0..39 red. */
.kgcp-preview-score-card--premium[data-tlight] .kgcp-preview-score-card-meter-fill {
    background: var(--kgcp-tl-color);
}

/* Compact state label. Replaces the old large upper-case pill
 * with a small, calm chip that pairs a coloured dot with the
 * text state (Stark / Solide / Schwach) — colour + text so the
 * status never relies on colour alone. */
.kgcp-score-card-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    background: var(--kgcp-tl-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--kgcp-tl-border, rgba(255, 255, 255, 0.12));
    color: var(--kgcp-tl-color, #cac7cf);
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    align-self: flex-start;
}
.kgcp-score-card-state-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--kgcp-tl-color, #cac7cf);
    flex-shrink: 0;
}

/* Short status sentence. Calm, two-line maximum on desktop. */
.kgcp-score-summary {
    margin: 0 0 14px;
    color: #cac7cf;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kgcp-score-summary--pending {
    color: #a4a2b6;
}

/* Stacked signal sections (Stark above Pruefen) so each group can
 * use the full card width on desktop, tablet and mobile. Each group
 * still hosts a max-2 short list. */
.kgcp-score-signals {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 12px;
}
.kgcp-score-signal-group {
    display: block;
    width: 100%;
}
.kgcp-score-signal-label {
    margin: 0 0 4px;
    color: #a4a2b6;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.kgcp-score-signal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kgcp-score-signal-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #ececf2;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    line-height: 1.35;
}
.kgcp-score-signal-row--empty {
    color: #8c8a9d;
    font-style: italic;
}
/* Two-column variant for long flat lists (e.g. web mentions). Collapses to a
   single column on narrow screens. */
.kgcp-score-signal-list--cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
}
@media (max-width: 640px) {
    .kgcp-score-signal-list--cols { grid-template-columns: 1fr; }
}
.kgcp-score-signal-text a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(158, 193, 255, 0.35);
}
.kgcp-score-signal-text a:hover {
    color: #b9aef5;
    border-bottom-color: #b9aef5;
}
.kgcp-score-signal-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-top: 1px;
    position: relative;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.kgcp-score-signal-row[data-kind="positive"] .kgcp-score-signal-mark {
    background: rgba(107, 239, 105, 0.18);
    border-color: rgba(107, 239, 105, 0.5);
}
.kgcp-score-signal-row[data-kind="positive"] .kgcp-score-signal-mark::after {
    content: "";
    display: block;
    width: 4px;
    height: 8px;
    border-right: 2px solid #6bef69;
    border-bottom: 2px solid #6bef69;
    /* Small nudge to optically centre the rotated checkmark inside the circle:
     * after rotate(45deg) the visible glyph sits slightly low-right of the
     * bounding box centre, so we shift it up and to the left by 1px. */
    transform: translate(-1px, -1px) rotate(45deg);
}
.kgcp-score-signal-row[data-kind="check"] .kgcp-score-signal-mark {
    background: rgba(230, 3, 91, 0.28);
    border-color: #ff7a9c;
}
.kgcp-score-signal-row[data-kind="check"] .kgcp-score-signal-mark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 6px;
    background: #ff7a9c;
    border-radius: 1px;
    /* Exclamation-style pictogram: the 6px bar sits above the dot.
     * Shift up by 2px from centre so the bar+gap+dot combo is optically
     * balanced inside the 16px circle. */
    transform: translate(-50%, calc(-50% - 2px));
}
.kgcp-score-signal-row[data-kind="check"] .kgcp-score-signal-mark::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    background: #ff7a9c;
    border-radius: 50%;
    /* Dot sits 4px below centre, completing the exclamation glyph paired
     * with the ::after bar above. */
    transform: translate(-50%, calc(-50% + 4px));
}
.kgcp-score-signal-text {
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}

/* Locked teaser rows: keep every signal list at three rows. The real signals
   render first; remaining slots are real-looking rows (coloured severity mark
   stays sharp, so the amber/green icon is clearly visible) whose title + text
   are softly blurred — readable enough to tell "there is more here", but not
   the specifics. Preview only — never in the full report. */
.kgcp-score-signal-row--locked {
    pointer-events: none;
}
.kgcp-score-signal-row--locked .kgcp-score-signal-body {
    flex: 1 1 auto;
    filter: blur(2.2px);
    opacity: 0.78;
    user-select: none;
}

.kgcp-score-signal-locked {
    list-style: none;
}

/* Reusable padlock overlay for any blurred teaser region (weakness rows,
   competitor names, gated questions). The wrapper (.kgcp-lock-wrap) is
   positioned; the overlay fills it with a centred gold padlock + unlock prompt
   and is itself the click target (scrolls to the report CTA). Preview only. */
.kgcp-lock-wrap {
    position: relative;
}
.kgcp-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    text-decoration: none;
    background: linear-gradient(180deg, rgba(19, 24, 42, 0.45), rgba(19, 24, 42, 0.72));
    color: #ff7a9c;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: color 0.15s ease;
}
.kgcp-lock-overlay:hover {
    color: #f7d987;
}
.kgcp-lock-badge {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, rgba(230, 3, 91, 0.3), rgba(230, 3, 91, 0.08));
    border: 1px solid rgba(230, 3, 91, 0.55);
    box-shadow: 0 0 22px rgba(230, 3, 91, 0.25);
}

/* Footer note — muted, aligned at card bottom for equal heights. */
.kgcp-score-card-footer {
    margin: auto 0 0;
    padding-top: 10px;
    color: #8c8a9d;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    line-height: 1.4;
    font-style: italic;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
}

/* Hide legacy heavy elements that the new traffic-light template
 * no longer renders. Defensive scoping protects against any
 * cached markup variants while the new view ships. */
.kgcp-preview-score-card--premium .kgcp-preview-score-card-status-pill,
.kgcp-preview-score-card--premium .kgcp-preview-score-card-headline,
.kgcp-preview-score-card--premium .kgcp-preview-score-card-chiprow,
.kgcp-preview-score-card--premium .kgcp-preview-score-card-chips,
.kgcp-preview-score-card--premium > .kgcp-preview-score-card-body,
.kgcp-preview-score-card--premium .kgcp-preview-score-card-more {
    display: none !important;
}
/* The score number scale gets a tiny breathing space adjustment
 * so "/ 100" reads as a unit. */
.kgcp-preview-score-card-score-scale {
    margin-left: 4px;
}

/* Mobile polish. */
@media (max-width: 639px) {
    .kgcp-score-summary {
        font-size:1rem;
    }
    .kgcp-score-card-footer {
        font-size:1rem;
    }
}

/* ============================================================ *
 * Gesamtüberblick strip — compact dashboard glance above the six
 * detail cards. One traffic-light mini-bar + score per category, so the
 * visitor grasps the whole picture at once and the detailed cards below
 * read as supporting depth instead of a wall of text. Same data only.
 * ============================================================ */
.kgcp-preview-overview {
    margin: 0 0 clamp(22px, 3vw, 34px);
}
.kgcp-preview-overview-eyebrow {
    margin: 0 0 12px;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #a4a2b6;
}
.kgcp-preview-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.kgcp-preview-overview-item {
    --kgcp-tl-color: #8c8a9d;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 13px 16px;
    border-radius: 14px;
    background: rgba(109, 82, 231, 0.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.kgcp-preview-overview-item[data-tlight="green"]   { --kgcp-tl-color: #6bef69; }
.kgcp-preview-overview-item[data-tlight="amber"]   { --kgcp-tl-color: #ff7a9c; }
.kgcp-preview-overview-item[data-tlight="red"]     { --kgcp-tl-color: #ff7a9c; }
.kgcp-preview-overview-item[data-tlight="neutral"] { --kgcp-tl-color: #8c8a9d; }
.kgcp-preview-overview-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.kgcp-preview-overview-name {
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    font-weight: 600;
    color: #e8e6f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kgcp-preview-overview-score {
    flex: 0 0 auto;
    font-family: Urbanist, sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    color: var(--kgcp-tl-color);
}
.kgcp-preview-overview-scale {
    margin-left: 2px;
    font-size:1rem;
    font-weight: 600;
    color: #8a8898;
}
.kgcp-preview-overview-bar {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.kgcp-preview-overview-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--kgcp-tl-color);
}
@media (max-width: 900px) {
    .kgcp-preview-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .kgcp-preview-overview-grid { grid-template-columns: 1fr; }
}

/* Calmer detail cards: the overview now carries the at-a-glance scores, so the
 * per-card signal lists can sit a touch quieter underneath. */
.kgcp-preview-score-card .kgcp-score-signal-text {
    font-size:1rem;
    color: #ececf4;
    font-weight: 600;
}

/* Score hero, integrated dashboard version: ring + rating stacked in the left
 * column (rating tied directly under the score), and the six category mini-bars
 * docked inside the box under a divider — one cohesive premium card. */
.kgcp-preview-score-hero-aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.kgcp-preview-score-hero-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--kgcp-tone-bg);
    border: 1px solid var(--kgcp-tone-border);
    color: var(--kgcp-tone-color);
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.kgcp-preview-hero-categories {
    position: relative;
    margin-top: clamp(20px, 2.6vw, 28px);
    padding-top: clamp(20px, 2.6vw, 26px);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* ============================================================ *
 * Category detail cards as a single-column accordion.
 *
 * Collapsed = a calm row (status dot + title + score + one-line summary).
 * Expanded = strengths (left, green) vs weaknesses (right, red), plus a
 * centred link to the lead form. Native <details>/<summary> drive it — no
 * JS, and it survives the seamless AJAX reveal automatically.
 * ============================================================ */
.kgcp-preview-score-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.kgcp-score-acc-card {
    padding: 0;
    display: block;
    overflow: hidden;
    /* Lighter, "lifted" surface so the cards feel less gloomy than the very
     * dark page behind them — still on-theme, not white. */
    background: linear-gradient(180deg, #2a2658 0%, #232050 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.kgcp-score-acc {
    display: block;
}
.kgcp-score-acc-head {
    display: block;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}
.kgcp-score-acc-head::-webkit-details-marker { display: none; }
.kgcp-score-acc-head::marker { content: ""; }
.kgcp-score-acc-head:focus-visible {
    outline: 2px solid rgba(94, 84, 243, 0.7);
    outline-offset: -2px;
    border-radius: 12px;
}
.kgcp-score-acc-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.kgcp-score-acc-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.kgcp-score-acc-title-wrap .kgcp-preview-score-card-title {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
    font-weight: 700;
}
.kgcp-score-acc-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}
.kgcp-score-acc-meta .kgcp-preview-score-card-score-value {
    -webkit-text-fill-color: currentColor;
    background: none;
    color: var(--kgcp-tl-color, #cac7cf);
}
.kgcp-score-acc-meta .kgcp-preview-score-card-score-scale {
    color: #8a8898;
    font-size:1rem;
    font-weight: 600;
    margin-left: 2px;
}
/* Status word (Stark / Solide / Ausbaufähig / Schwach) replaces the per-card
 * number; it follows the same traffic-light colour the number used. */
.kgcp-score-acc-meta .kgcp-preview-score-card-status-word {
    color: var(--kgcp-tl-color, #cac7cf);
    font-size:1rem;
    font-weight: 700;
    white-space: nowrap;
}
/* +/- toggle indicator */
.kgcp-score-acc-icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}
.kgcp-score-acc-icon::before,
.kgcp-score-acc-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #cfcde0;
    border-radius: 2px;
    transform: translate(-50%, -50%);
}
.kgcp-score-acc-icon::before { width: 12px; height: 2px; }
.kgcp-score-acc-icon::after  { width: 2px; height: 12px; transition: opacity 0.2s ease, transform 0.2s ease; }
.kgcp-score-acc[open] .kgcp-score-acc-icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}
/* --- Discoverability: make the accordion header obviously interactive ------ */
/* Hover lift on the whole row (desktop). */
.kgcp-score-acc-head:hover { background: transparent; }
/* A "Details" / "Schliessen" text cue next to the +/- toggle, so it is clear
   the card opens — important on mobile where there is no hover. */
.kgcp-score-acc-meta::after {
    content: "Details";
    order: 2;
    font-size:1rem;
    font-weight: 600;
    color: #b9aef5;
    white-space: nowrap;
}
.kgcp-score-acc[open] .kgcp-score-acc-meta::after {
    content: "Schliessen";
    color: #8a8898;
}
/* Render the +/- as a small round button so it reads as a control. */
.kgcp-score-acc-meta .kgcp-score-acc-icon {
    order: 3;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(158, 193, 255, 0.12);
    border: 1px solid rgba(158, 193, 255, 0.30);
    transition: background 0.18s ease, border-color 0.18s ease;
}
.kgcp-score-acc-meta .kgcp-score-acc-icon::before,
.kgcp-score-acc-meta .kgcp-score-acc-icon::after { background: #b9aef5; }
.kgcp-score-acc-head:hover .kgcp-score-acc-icon {
    background: rgba(158, 193, 255, 0.22);
    border-color: rgba(158, 193, 255, 0.55);
}
.kgcp-score-acc-summary {
    display: block;
    margin-top: 8px;
    color: #d4d2e2;
    font-size:1rem;
    line-height: 1.45;
}
.kgcp-score-acc-body {
    padding: 4px 24px 22px;
}
/* Strengths vs weaknesses, side by side. */
.kgcp-score-signals--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 6px;
}
.kgcp-score-signals--split .kgcp-score-signal-group {
    padding: 14px 16px;
    border-radius: 12px;
    /* Glass panels: faint translucent violet fill + blur so the content reads calmly. */
    background: rgba(109, 82, 231, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.kgcp-score-signals--split .kgcp-score-signal-group[data-kind="positive"] {
    background:
        linear-gradient(0deg, rgba(107, 239, 105, 0.06), rgba(107, 239, 105, 0.06)),
        rgba(109, 82, 231, 0.05);
    border-color: rgba(107, 239, 105, 0.2);
}
.kgcp-score-signals--split .kgcp-score-signal-group[data-kind="check"] {
    background:
        linear-gradient(0deg, rgba(230, 3, 91, 0.06), rgba(230, 3, 91, 0.06)),
        rgba(109, 82, 231, 0.05);
    border-color: rgba(230, 3, 91, 0.2);
}
.kgcp-score-signals--split .kgcp-score-signal-group[data-kind="positive"] .kgcp-score-signal-label { color: #6bef69; }
.kgcp-score-signals--split .kgcp-score-signal-group[data-kind="check"]    .kgcp-score-signal-label { color: #ff7a9c; }
/* Centred link to the lead form. */
.kgcp-score-card-footer {
    text-align: center;
    margin: 16px 0 0;
}
.kgcp-score-report-link {
    display: inline-block;
    color: #b9b6ff;
    font-family: Urbanist, sans-serif;
    font-size:1rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(185, 182, 255, 0.4);
    padding-bottom: 1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.kgcp-score-report-link:hover {
    color: #fff;
    border-color: #fff;
}
@media (max-width: 639px) {
    .kgcp-score-acc-head { padding: 16px 16px; }
    .kgcp-score-acc-body { padding: 4px 16px 18px; }
    .kgcp-score-signals--split { grid-template-columns: 1fr; gap: 12px; }
}

/* Plain-language note under each signal so the term is understandable, not
 * jargon. The signal label + note stack in a column next to the mark. */
.kgcp-score-signal-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.kgcp-score-signal-note {
    font-size:1rem;
    color: #c8c6da;
    line-height: 1.45;
    /* Always render as a uniform two-line block: short notes reserve two
     * lines, longer ones are clamped to two so every row aligns top-to-bottom.
     * min-height must match the element's OWN font-size (1.45em line box × 2),
     * otherwise short notes reserve less than two real lines and misalign. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.45em * 2);
}
.kgcp-score-signals--split .kgcp-score-signal-row { align-items: flex-start; }
.kgcp-score-signals--split .kgcp-score-signal-mark { margin-top: 3px; }
.kgcp-score-signals--split .kgcp-score-signal-list { gap: 12px; }

/* ============================================================
   Scan-preview / report page width: the shared Webflow utility
   .container-width-eleven-hundred caps content at 1100px, but this page
   (and any later report) must use the site-wide 1300px column. Scope the
   override to the scan-preview body (it always carries data-scan-uuid;
   lead_confirmation.php, which also uses the class, does not) so no other
   page is affected. The .kgcp-preview-* shells above are already 1300.
   ============================================================ */
body[data-scan-uuid] .container-width-eleven-hundred { max-width: 1300px; }

/* ============================================================
   Report page glass surface: the accordion category cards use the vendor
   .contact-form-two background (#19173299). On the scan-preview page only
   (body[data-scan-uuid]) align them to the unified violet glass so every
   card shares one transparent surface. Scoped + double-class so other pages
   that use .contact-form-two (lead form, calculator) are untouched.
   ============================================================ */
body[data-scan-uuid] .kgcp-preview-score-card.contact-form-two {
    background: rgba(109, 82, 231, 0.06);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 40px rgba(0, 0, 0, 0.30);
}

/* ============================================================
   Scan-preview page: align the logo block to the homepage. The vendor
   .section-title-block adds 50px top padding; the homepage logo sits ~16px
   from the top, so match it here (scoped to the scan page via the
   data-scan-uuid body) now that the Scan-ID line is hidden and the logo
   renders at its full 105px width (105x67, height:auto) like the homepage.
   ============================================================ */
body[data-scan-uuid] .section-title-block { padding-top: 16px; }

/* ============================================================
   Footer quick-links: render the original AD Promotion two-row layout on
   desktop. The bundled Webflow CSS only switches .quick-links to a grid below
   991px; on desktop it stays a single flex row, which spreads the 9 links +
   social icon across the full width (1 row). The current footer export uses a
   5-column / 2-row grid on desktop, so force that here to match the source
   1:1. Items flow row-first: row 1 = Google · GEO&KI · Social Media · Website
   · Insights, row 2 = Impressum · Datenschutz · AGB · ADP 1 · LinkedIn.
   ============================================================ */
@media screen and (min-width: 992px) {
    .footer-two .footer-bottom-main-wrapper .quick-links {
        display: grid;
        grid-template-columns: repeat(5, auto);
        grid-template-rows: auto auto;
        grid-auto-flow: row;
        column-gap: 45px;
        row-gap: 10px;
        justify-content: end;
        align-items: center;
    }
}

/* ---------- Footer contact addresses — clean left-aligned stack -------- *
 * `.body-small-text` is `display:flex`, which turns the labelled address
 * blocks (label + <br> + street + <br> + city) into separate flex items that
 * stagger to the right instead of stacking. Render the address blocks as
 * plain left-aligned block text so the label, street and city all share the
 * same left edge in one clean column. */
.footer-information-wrapper .body-small-text.location {
    display: block;
    max-width: 22rem;
    text-align: left;
}