/* ===============================================================
   CarAPI Frontend — Local Fonts (DSGVO-konform)
   No external requests to fonts.googleapis.com
   =============================================================== */

/* ── Inter (Latin, woff2) ──────────────────────────────────────── */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/inter/inter-latin-300-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter/inter-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter/inter-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter/inter-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter/inter-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/inter/inter-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/inter/inter-latin-900-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Material Symbols Rounded (lokal, subsetted) ─────────────────
 * 2026-08-17: War die komplette Variable Font mit ~3000 Icons und allen
 * Achsen (FILL/GRAD/opsz/wght) = 5,1 MB. Bei font-display:block blieben die
 * Icons unsichtbar, bis diese Datei geladen war — auf Mobilfunk mehrere
 * Sekunden. Jetzt auf die tatsaechlich genutzten Icons subsetted und die
 * Achsen auf die im Code verwendeten Werte fixiert (FILL 0, wght 400,
 * GRAD 0, opsz 24).
 * 2026-08-17 Update: 13 Icons aus der iconMap in app.js (compress,
 * qr_code_2, scale, sync_alt, swap_driving_apps, download, upload,
 * vertical_align_bottom, rv_hookup, water_drop, luggage, sync,
 * architecture) fehlten im Subset und fielen auf Klartext zurueck.
 * Subset enthaelt GENAU die im Frontend genutzten Icons — Stand 20260824: 79 Stueck,
 * 10 KB. Erzeugt mit fontTools aus der Vollversion von Google Fonts.
 *
 * Neue Icons brauchen ein neues Subset, sonst erscheint ein leeres Kaestchen.
 * Zwei Fallstricke dabei:
 *   1. Icons stehen nicht nur woertlich im Markup, sondern auch in PHP-Arrays
 *      ('icon' => 'palette'). Beide Schreibweisen einsammeln, sonst fehlen sie.
 *   2. Material Symbols bildet Icons als LIGATUREN ab. Wird per --text
 *      subsettet, zieht der Subsetter ueber die Buchstaben die Huelle aller
 *      ~4200 Ligaturen herein und die Datei wird 295 KB gross. Richtig ist:
 *      erst die Ligaturtabelle auf die gewuenschten Namen beschneiden, dann
 *      nach Glyphen subsetten. */
@font-face {
    font-family: 'Material Symbols Rounded';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../fonts/material-symbols/MaterialSymbolsRounded.woff2?v=20260826b') format('woff2');
}
.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ===============================================================
   CarAPI Frontend — Pixel Perfect Design System
   Inspired by: bydrive.com reference screenshot
   =============================================================== */

/* ── Variables ────────────────────────────────────────────────── */
:root {
    --c-black:    #0a0a0a;
    --c-dark:     #1a1a1a;
    --c-grey-900: #262626;
    --c-grey-700: #525252;
    --c-grey-500: #737373;
    --c-grey-300: #d4d4d4;
    --c-grey-200: #e5e5e5;
    --c-grey-100: #f5f5f5;
    --c-grey-50:  #fafafa;
    --c-white:    #ffffff;
    --c-accent:   #2563eb;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --radius-sm:  0.375rem;
    --radius-md:  0.625rem;
    --radius-lg:  1rem;
    --radius-xl:  1.5rem;
    --radius-full: 9999px;

    --shadow-sm:  0 1px 2px rgba(0,0,0,.05);
    --shadow-md:  0 4px 12px rgba(0,0,0,.08);
    --shadow-lg:  0 12px 40px rgba(0,0,0,.12);
    --shadow-xl:  0 25px 60px rgba(0,0,0,.15);

    --transition: .25s cubic-bezier(.4,0,.2,1);
}

/* ── Reset for our pages ──────────────────────────────────────── */
body.carapi-page {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    color: var(--c-dark);
    background: var(--c-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

body.carapi-page *,
body.carapi-page *::before,
body.carapi-page *::after {
    box-sizing: border-box;
}

body.carapi-page img {
    max-width: 100%;
    height: auto;
}

.carapi-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ═════════════════════════════════════════════════════════════════
   HEADER (single nav bar)
   ═════════════════════════════════════════════════════════════════ */
.carapi-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--c-grey-200);
}

/* WP Admin Toolbar fix */
body.admin-bar .carapi-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .carapi-header {
        top: 46px;
    }
}

.carapi-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Logo */
.carapi-logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: var(--c-black);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -.02em;
    flex-shrink: 0;
}

.carapi-logo svg {
    color: var(--c-black);
}

/* Global logo image size — overrides all inline width/height */
.carapi-logo img,
.carapi-logo-img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain;
}

/* Footer logo (inverted, slightly smaller) */
.carapi-footer .carapi-logo-img {
    width: 20px !important;
    height: 20px !important;
}

/* Nav */
.carapi-nav {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-left: auto;
}

.carapi-nav a,
.carapi-nav-dropdown-trigger {
    text-decoration: none;
    color: var(--c-grey-700);
    font-size: .85rem;
    font-weight: 500;
    transition: color var(--transition), background var(--transition);
    position: relative;
    padding: .35rem .85rem;
    border-radius: var(--radius-full);
}

.carapi-nav > a:hover,
.carapi-nav > a.active,
.carapi-nav-dropdown-trigger:hover,
.carapi-nav-dropdown-trigger.active {
    color: var(--c-black);
    background: var(--c-grey-100);
}

/* Active page pill */
.carapi-nav-active {
    background: var(--c-grey-100) !important;
    color: var(--c-black) !important;
}

/* Header actions */
.carapi-header-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
}

/* Dezenter Trenner zwischen Navigation und Login/Register */
.carapi-header-sep {
    width: 1px;
    height: 1.35rem;
    margin: 0 .5rem 0 .25rem;
    background: var(--c-grey-200);
    flex-shrink: 0;
}

/* Login / Register Buttons */
.carapi-btn-login {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
    color: var(--c-grey-700);
    font-size: .85rem;
    font-weight: 500;
    padding: .5rem 1rem;
    border-radius: var(--radius-full);
    transition: all var(--transition);
}

.carapi-btn-login .material-symbols-rounded,
.carapi-btn-register .material-symbols-rounded {
    font-size: 1.05rem;
    line-height: 1;
}

.carapi-btn-login:hover {
    color: var(--c-black);
    background: var(--c-grey-100);
}

.carapi-btn-register {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
    color: var(--c-white);
    background: var(--c-black);
    font-size: .85rem;
    font-weight: 600;
    padding: .5rem 1.15rem;
    border-radius: var(--radius-full);
    transition: all var(--transition);
}

.carapi-btn-register:hover {
    background: var(--c-grey-900);
}

/* Ticket CTA (logged-in users) */
.carapi-btn-ticket {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    text-decoration: none;
    color: var(--c-white);
    background: var(--c-black);
    font-size: .85rem;
    font-weight: 600;
    padding: .5rem 1.25rem .5rem 1rem;
    border-radius: var(--radius-full);
    transition: all var(--transition);
    white-space: nowrap;
}

.carapi-btn-ticket .material-symbols-rounded {
    font-size: 16px;
}

.carapi-btn-ticket:hover {
    background: var(--c-grey-900);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Account Dropdown */
.carapi-account-dropdown {
    position: relative;
}

.carapi-account-btn {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: var(--c-grey-100);
    border: none;
    border-radius: var(--radius-full);
    padding: .5rem .75rem .5rem .6rem;
    cursor: pointer;
    font-family: var(--font);
    font-size: .85rem;
    font-weight: 500;
    color: var(--c-grey-700);
    transition: all var(--transition);
}

.carapi-account-btn:hover {
    background: var(--c-grey-200);
    color: var(--c-black);
}

.carapi-account-btn .material-symbols-rounded {
    font-size: 20px;
}

.carapi-account-chevron {
    font-size: 18px !important;
    transition: transform .2s ease;
}

.carapi-account-dropdown.open .carapi-account-chevron {
    transform: rotate(180deg);
}

.carapi-account-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dropdown menu */
.carapi-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.1);
    padding: .5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all .2s ease;
    z-index: 10000;
}

.carapi-account-dropdown.open .carapi-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.carapi-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    text-decoration: none;
    color: var(--c-grey-700);
    font-size: .85rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all .15s ease;
}

.carapi-dropdown-menu a:hover {
    background: var(--c-grey-100);
    color: var(--c-black);
}

.carapi-dropdown-menu a .material-symbols-rounded {
    font-size: 20px;
    color: var(--c-grey-500);
}

.carapi-dropdown-divider {
    height: 1px;
    background: var(--c-grey-200);
    margin: .35rem 0;
}

.carapi-dropdown-logout {
    color: #dc2626 !important;
}

.carapi-dropdown-logout .material-symbols-rounded {
    color: #dc2626 !important;
}

/* Hamburger toggle */
.carapi-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: .5rem;
    width: 36px;
    height: 36px;
}

.carapi-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--c-black);
    border-radius: 2px;
    transition: all .3s ease;
    transform-origin: center;
}

.carapi-menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.carapi-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.carapi-menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu — right sidebar drawer */
.carapi-mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: #ffffff;
    z-index: 10002;
    padding: 80px 1.5rem 2rem;
    flex-direction: column;
    gap: 1.5rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: -8px 0 40px rgba(0,0,0,.15);
    display: flex;
    visibility: hidden;
}

.carapi-mobile-menu.active {
    transform: translateX(0);
    visibility: visible;
}

/* Backdrop overlay for mobile sidebar */
.carapi-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.carapi-mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

.carapi-mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.carapi-mobile-nav > a {
    text-decoration: none;
    color: var(--c-black);
    font-size: 1rem;
    font-weight: 600;
    padding: .85rem 0;
    border-bottom: 1px solid var(--c-grey-100);
    transition: color var(--transition);
}

.carapi-mobile-nav > a:hover {
    color: var(--c-accent);
}

.carapi-mobile-account {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding-top: .5rem;
    margin-top: auto;
}

.carapi-mobile-account .carapi-btn-login,
.carapi-mobile-account .carapi-btn-register {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.5rem;
    font-size: .95rem;
    text-align: center;
}

.carapi-mobile-account .carapi-btn-ticket {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.5rem;
    font-size: .95rem;
    text-align: center;
    border-radius: var(--radius-full);
}

/* ═════════════════════════════════════════════════════════════════
   HERO — Absolute positioning for full control
   ═════════════════════════════════════════════════════════════════ */
.carapi-hero {
    position: relative;
    height: 100vh;
    min-height: 700px;
    max-height: 1000px;
    background: var(--c-white);
    overflow: visible;
}

/* Top 60% grey, bottom 40% white — hard transition */
.carapi-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        #efefef 0%,
        #efefef 53%,
        #ffffff 55%,
        #ffffff 100%);
    z-index: 0;
}

body.admin-bar .carapi-hero {
    height: calc(100vh - 32px);
}

/* Text block — top center */
.carapi-hero-text {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    text-align: center;
    width: 100%;
    max-width: 700px;
    padding: 0 2rem;
}

body.admin-bar .carapi-hero-text {
    top: calc(18% + 32px);
}

@media screen and (max-height: 850px) {
    .carapi-hero-text {
        top: 12%; 
    }
    body.admin-bar .carapi-hero-text {
        top: calc(12% + 32px);
    }
}

.carapi-hero-eyebrow {
    display: inline-block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--c-accent);
    font-weight: 600;
    margin-bottom: 1rem;
}

.carapi-hero-headline {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1.05;
    color: var(--c-black);
    margin: 0 0 1.5rem;
}

.carapi-hero-headline em {
    font-style: normal;
    color: var(--c-grey-500);
}

.carapi-hero-cta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.carapi-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    box-sizing: border-box;
    padding: .875rem 2.25rem;
    background: var(--c-black);
    color: var(--c-white);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-full);
    transition: all var(--transition);
    border: 2px solid var(--c-black);
    text-align: center;
}

.carapi-hero-cta:hover {
    background: var(--c-white);
    color: var(--c-black);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.carapi-hero-cta--secondary {
    background: transparent;
    color: var(--c-black);
    border-color: #a3a3a3;
}

.carapi-hero-cta--secondary:hover {
    background: var(--c-black);
    color: var(--c-white);
    border-color: var(--c-black);
}

@media (max-width: 640px) {
    .carapi-hero-cta-row {
        flex-wrap: nowrap;
        width: 100%;
    }
    .carapi-hero-cta-row .carapi-hero-cta {
        flex: 1 1 50%;
        min-width: 0;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Car image — absolute, bottom center */
.carapi-hero-car {
    position: absolute;
    bottom: 00px; /* space for search bar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 100%;
    max-width: 1000px;
    pointer-events: none;
}

.carapi-hero-car-img {
    width: 100%;
    height: auto;
    display: block;
}

.carapi-hero-search {
    position: absolute;
    bottom: 75px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 90%;
    max-width: 760px;
}

.carapi-hero-search .carapi-demo-widget {
    box-shadow: var(--shadow-xl);
    background: var(--c-white);
}

/* ═════════════════════════════════════════════════════════════════
   HERO ANIMATED DEMO CARDS (one at a time, chat-like)
   ═════════════════════════════════════════════════════════════════ */
.carapi-hero-cards {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1000px;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.carapi-demo-card {
    position: absolute;
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: 12px;
    padding: .85rem 1.1rem;
    min-width: 180px;
    max-width: 210px;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
    opacity: 0;
}

/* Left cards — slide in from left edge of 1000px container */
.carapi-demo-card--left { left: 12%; }
.carapi-demo-card--1 { bottom: 340px; animation: chatSlideLeft 30s ease infinite 0s; }
.carapi-demo-card--2 { bottom: 290px; animation: chatSlideLeft 30s ease infinite 10s; }
.carapi-demo-card--3 { bottom: 240px; animation: chatSlideLeft 30s ease infinite 20s; }

/* Right cards — slide in from right edge of 1000px container */
.carapi-demo-card--right { right: 12%; }
.carapi-demo-card--4 { bottom: 370px; animation: chatSlideRight 30s ease infinite 5s; }
.carapi-demo-card--5 { bottom: 310px; animation: chatSlideRight 30s ease infinite 15s; }
.carapi-demo-card--6 { bottom: 260px; animation: chatSlideRight 30s ease infinite 25s; }

@keyframes chatSlideLeft {
    0%   { opacity: 0; transform: translateX(-20px); }
    2%   { opacity: 1; transform: translateX(0); }
    13%  { opacity: 1; transform: translateX(0); }
    16%  { opacity: 0; transform: translateX(10px); }
    100% { opacity: 0; }
}

@keyframes chatSlideRight {
    0%   { opacity: 0; transform: translateX(20px); }
    2%   { opacity: 1; transform: translateX(0); }
    13%  { opacity: 1; transform: translateX(0); }
    16%  { opacity: 0; transform: translateX(-10px); }
    100% { opacity: 0; }
}

/* Card inner elements */
.carapi-demo-card-badge {
    display: inline-block;
    background: rgba(0,0,0,.05);
    color: var(--c-grey-500);
    font-size: .6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: .15rem .45rem;
    border-radius: 4px;
    margin-bottom: .4rem;
}

.carapi-demo-card-badge--green {
    background: rgba(22,101,52,.08);
    color: #166534;
}

.carapi-demo-card-title {
    font-size: .85rem;
    font-weight: 700;
    color: var(--c-black);
    margin-bottom: .35rem;
    letter-spacing: -.3px;
}

.carapi-demo-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .15rem 0;
    border-top: 1px solid rgba(0,0,0,.04);
    gap: 1rem;
}

.carapi-demo-card-row span {
    font-size: .6rem;
    color: var(--c-grey-500);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.carapi-demo-card-row strong {
    font-size: .75rem;
    font-weight: 600;
    color: var(--c-grey-700);
}

.carapi-demo-card-code {
    margin-top: .2rem;
}

.carapi-demo-card-code code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: .6rem;
    line-height: 1.5;
    color: var(--c-grey-500);
    display: block;
}

/* ═════════════════════════════════════════════════════════════════
   BRAND LOGO SLIDER (infinite scroll, container-constrained)
   ═════════════════════════════════════════════════════════════════ */
.carapi-brand-slider-section {
    padding: 5rem 0 3rem;
    background: var(--c-white);
}

.carapi-brand-slider-fade {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.carapi-brand-slider-track {
    display: flex;
    width: max-content;
    animation: brandScroll 30s linear infinite;
}

.carapi-brand-slide {
    flex-shrink: 0;
    width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
}

.carapi-brand-slide img {
    height: auto;
    max-height: 18px;
    max-width: 70px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .45;
    transition: all var(--transition);
}

.carapi-brand-slide img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

@keyframes brandScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ═════════════════════════════════════════════════════════════════
   PARTNER LOGO SLIDER (infinite scroll, card-style — logos are mixed
   light/dark so each gets its own contrast-safe card instead of the
   grayscale-on-transparent treatment used for vehicle brands)
   ═════════════════════════════════════════════════════════════════ */
.carapi-partner-section {
    padding: 5rem 0;
    background: var(--c-grey-50);
}

/* Sits directly under the hero, in place of the old vehicle-brand slider —
   quieter than the standalone section further down the page used to be:
   a small centered label instead of an eyebrow + big heading. */
.carapi-partner-section--hero {
    padding: 3rem 0 4rem;
    background: transparent;
}

.carapi-partner-label {
    display: block;
    text-align: center;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--c-grey-500);
}

.carapi-partner-section--hero .carapi-partner-slider-fade {
    margin-top: 1.5rem;
}

.carapi-partner-slider-fade {
    position: relative;
    overflow: hidden;
    margin-top: 3rem;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.carapi-partner-slider-track {
    display: flex;
    align-items: center;
    width: max-content;
    padding: 8px 0;
    animation: partnerScroll 32s linear infinite;
}

.carapi-partner-slide {
    flex-shrink: 0;
    width: 168px;
    height: 92px;
    margin: 0 .6rem;
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.25rem;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.carapi-partner-slide img {
    max-height: 36px;
    max-width: 128px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .45;
    transition: all var(--transition);
}

.carapi-partner-slide:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.carapi-partner-slide:hover {
    transform: translateY(-2px);
    border-color: var(--c-grey-300);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

@keyframes partnerScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ═════════════════════════════════════════════════════════════════
   EXAMPLE SECTION (Grid + Mock Popover)
   ═════════════════════════════════════════════════════════════════ */
.carapi-example-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    align-items: start;
    margin-top: 4rem;
}

.carapi-example-data .carapi-result-tab-content {
    max-height: none;
    overflow: visible;
}

@media (max-width: 900px) {
    .carapi-example-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ═════════════════════════════════════════════════════════════════
   GENERIC SECTIONS
   ═════════════════════════════════════════════════════════════════ */
.carapi-section {
    padding: 6rem 0;
}

.carapi-section--light {
    background: var(--c-grey-50);
}

.carapi-section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 3.5rem;
}

.carapi-section-eyebrow {
    display: inline-block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--c-accent);
    font-weight: 700;
    margin-bottom: .75rem;
}

.carapi-data-coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: var(--c-grey-900);
    color: var(--c-white);
    padding: .4rem 1rem;
    border-radius: 999px;
    margin: .5rem 0 1rem;
}

.carapi-section-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--c-black);
    letter-spacing: -1px;
    margin: 0 0 .75rem;
}

.carapi-section-header p {
    color: var(--c-grey-500);
    font-size: 1.1rem;
}

/* ═════════════════════════════════════════════════════════════════
   FEATURES GRID
   ═════════════════════════════════════════════════════════════════ */
.carapi-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.carapi-feature-card {
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: var(--radius-xl);
    padding: 2.5rem 2rem;
    transition: all var(--transition);
}

.carapi-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.carapi-feature-icon {
    margin-bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--c-grey-100);
    border-radius: var(--radius-lg);
    color: var(--c-black);
}

.carapi-feature-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    color: var(--c-black);
}

.carapi-feature-card p {
    color: var(--c-grey-500);
    font-size: .95rem;
    margin: 0;
    line-height: 1.6;
}

/* Coming-soon variant */
.carapi-feature-card--coming-soon {
    border-style: dashed;
    opacity: .75;
    pointer-events: none;
}

.carapi-feature-card--coming-soon:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--c-grey-200);
}

/* Nav badge (Bald) */
.carapi-nav-badge {
    display: inline-block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    background: var(--c-grey-900);
    color: var(--c-white);
    padding: .15rem .45rem;
    border-radius: 4px;
    line-height: 1.4;
    font-family: var(--font);
}

/* Feature card badge (Demnächst) */
.carapi-feature-badge {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    background: var(--c-grey-100);
    color: var(--c-grey-500);
    padding: .15rem .5rem;
    border-radius: 4px;
    line-height: 1.4;
    vertical-align: middle;
    font-family: var(--font);
    border: 1px solid var(--c-grey-200);
}

/* ═════════════════════════════════════════════════════════════════
   DEMO WIDGET (Horizontal Pill)
   ═════════════════════════════════════════════════════════════════ */
.carapi-demo-widget {
    max-width: 760px;
    margin: 0 auto;
    background: transparent;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    padding: .4rem .4rem .4rem .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    position: relative;
    z-index: 1;
    overflow: visible;
}

/* Animated Search Border */
.carapi-demo-widget::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--c-white);
    border-radius: inherit;
    z-index: -1;
}

@property --border-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.carapi-demo-widget::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: conic-gradient(from var(--border-angle), transparent 70%, var(--c-accent) 100%);
    border-radius: inherit;
    animation: carapiSpinBorder 3s linear infinite;
    z-index: -2;
}

@keyframes carapiSpinBorder {
    0% { --border-angle: 0deg; }
    100% { --border-angle: 360deg; }
}

/* Pill Tabs */
.carapi-widget-tabs {
    display: flex;
    background: var(--c-grey-100);
    border-radius: var(--radius-full);
    padding: .2rem;
    flex-shrink: 0;
}

.carapi-widget-tab {
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    padding: .65rem 1.15rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--c-grey-500);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    font-family: var(--font);
}

.carapi-widget-tab.active {
    background: var(--c-white);
    color: var(--c-black);
    box-shadow: var(--shadow-sm);
}

/* Icon-only tab (HSN/TSN back arrow) */
.carapi-widget-tab--icon {
    padding: .65rem .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Tab Content Areas */
.carapi-widget-panel {
    display: none;
    flex: 1;
    min-width: 0;
}

.carapi-widget-panel.active {
    display: flex;
    align-items: center;
    gap: .5rem;
    animation: fadeSlide .3s ease;
}

@keyframes fadeSlide {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Inputs */
.carapi-widget-input {
    flex: 1;
    min-width: 0;
    padding: .75rem 1rem;
    border: none;
    background: transparent;
    font-size: .95rem;
    color: var(--c-black);
    outline: none;
    font-family: var(--font);
    border-radius: var(--radius-full);
}

.carapi-widget-input::placeholder {
    color: var(--c-grey-300);
}

.carapi-widget-input:focus {
    background: var(--c-grey-50);
    border-radius: var(--radius-full);
}

.carapi-widget-input--short {
    max-width: 130px;
    text-transform: uppercase;
}

/* Search Button */
.carapi-widget-btn {
    background: var(--c-black);
    color: var(--c-white);
    border: none;
    border-radius: var(--radius-full);
    padding: .75rem 1.75rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    font-family: var(--font);
    margin-left: auto;
}

.carapi-widget-btn:hover {
    background: #000;
    transform: scale(1.03);
    box-shadow: var(--shadow-md);
}

/* Loading Spinner */
.carapi-widget-loading {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.carapi-widget-loading.visible {
    display: flex;
}

.carapi-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid var(--c-grey-200);
    border-top-color: var(--c-black);
    border-radius: 50%;
    animation: spin .6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.carapi-btn-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .6s linear infinite;
    vertical-align: middle;
}

/* Fahrzeugwahl — custom searchable dropdowns */
.carapi-widget-dd-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.carapi-widget-dd-wrap .carapi-widget-input {
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .82rem;
    padding: .65rem .75rem;
}

.carapi-widget-dd-wrap .carapi-widget-input:disabled {
    opacity: .35;
    cursor: default;
}

.carapi-widget-dd-list {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 220px;
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
    z-index: 200;
    max-height: 260px;
    overflow-y: auto;
    padding: .35rem;
    animation: fadeSlide .15s ease;
}

.carapi-widget-dd-list.open {
    display: block;
}

.carapi-widget-dd-list .carapi-dd-search {
    display: block;
    width: calc(100% - 1rem);
    margin: .35rem .5rem;
    padding: .5rem .65rem;
    border: 1px solid var(--c-grey-200);
    border-radius: 8px;
    font-size: .82rem;
    font-family: var(--font);
    outline: none;
    background: var(--c-grey-50);
    color: var(--c-black);
}

.carapi-widget-dd-list .carapi-dd-search:focus {
    border-color: var(--c-black);
}

.carapi-widget-dd-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .45rem .75rem;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    font-family: var(--font);
    font-size: .78rem;
    font-weight: 500;
    color: var(--c-black);
    transition: background .1s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.carapi-widget-dd-item:hover {
    background: var(--c-grey-50);
}

/* Engine popover */
.carapi-widget-engines {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
    z-index: 200;
    max-height: 280px;
    overflow-y: auto;
    animation: fadeSlide .2s ease;
}

.carapi-widget-engines-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .75rem 1rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-grey-500);
    border-bottom: 1px solid var(--c-grey-100);
    position: sticky;
    top: 0;
    background: var(--c-white);
    z-index: 1;
}

.carapi-widget-engines-list {
    padding: .35rem;
}

.carapi-widget-engine-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem .75rem;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    font-family: var(--font);
    transition: background .12s ease;
}

.carapi-widget-engine-item:hover {
    background: var(--c-grey-50);
}

.carapi-widget-engine-name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--c-black);
}

.carapi-widget-engine-hsn {
    font-size: .72rem;
    font-weight: 600;
    color: var(--c-grey-400);
    background: var(--c-grey-50);
    padding: .2rem .5rem;
    border-radius: 5px;
    white-space: nowrap;
}

/* Results — popover below search bar */
#carapi-results:empty {
    display: none;
}

#carapi-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    z-index: 9999;
}

.carapi-result-card {
    width: 100%;
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.12);
    animation: popoverIn .35s cubic-bezier(.16,1,.3,1);
}

@keyframes popoverIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Spec icon */
.carapi-spec-icon {
    font-size: 16px;
    vertical-align: -3px;
    margin-right: 4px;
    color: var(--c-accent);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.carapi-result-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--c-grey-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.carapi-result-header h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--c-black);
    letter-spacing: -.3px;
}

.carapi-result-header-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

.carapi-result-header-left {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

.carapi-result-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.carapi-result-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--c-grey-100);
    border-radius: 50%;
    cursor: pointer;
    color: var(--c-grey-500);
    transition: all .2s ease;
}

.carapi-result-close:hover {
    background: var(--c-grey-200);
    color: var(--c-black);
}

.carapi-result-years {
    display: inline-block;
    margin-top: .3rem;
    font-size: .8rem;
    color: var(--c-grey-500);
    font-weight: 500;
}

.carapi-result-badge {
    background: var(--c-grey-100);
    padding: .35rem .75rem;
    border-radius: var(--radius-sm);
    font-size: .75rem;
    font-weight: 700;
    color: var(--c-grey-700);
    letter-spacing: .5px;
    white-space: nowrap;
}

/* Result tabs */
.carapi-result-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--c-grey-200);
    padding: 0 2rem;
}

.carapi-result-tab {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .85rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--font);
    font-size: .82rem;
    font-weight: 600;
    color: var(--c-grey-500);
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}

.carapi-result-tab .material-symbols-rounded {
    font-size: 18px;
}

.carapi-result-tab:hover {
    color: var(--c-black);
}

.carapi-result-tab.active {
    color: var(--c-black);
    border-bottom-color: var(--c-black);
}

/* Tab content panels */
.carapi-result-tab-content {
    display: none;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.carapi-result-tab-content::-webkit-scrollbar { width: 6px; }
.carapi-result-tab-content::-webkit-scrollbar-track { background: var(--c-grey-50); }
.carapi-result-tab-content::-webkit-scrollbar-thumb { background: var(--c-grey-200); border-radius: 10px; }
.carapi-result-tab-content::-webkit-scrollbar-thumb:hover { background: var(--c-grey-300); }

.carapi-result-tab-content.active {
    display: block;
    animation: fadeSlide .25s ease;
}

.carapi-result-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.carapi-result-spec {
    padding: 1rem 1.25rem;
    border-right: 1px solid var(--c-grey-100);
    border-bottom: 1px solid var(--c-grey-100);
}

.carapi-result-spec:nth-child(3n) {
    border-right: none;
}

.carapi-result-spec dt {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .75px;
    color: var(--c-grey-500);
    margin-bottom: .2rem;
}

.carapi-result-spec dd {
    margin: 0;
    font-size: .9rem;
    font-weight: 700;
    color: var(--c-black);
}

/* Fitments table */
.carapi-result-fitments {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--c-grey-200);
}

.carapi-result-fitments h4 {
    margin: 0 0 .75rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .75px;
    color: var(--c-grey-500);
}

.carapi-result-fitments table {
    width: 100%;
    border-collapse: collapse;
}

.carapi-result-fitments th {
    text-align: left;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-grey-500);
    padding: .4rem 0;
    border-bottom: 1px solid var(--c-grey-200);
}

.carapi-result-fitments td {
    padding: .5rem 0;
    font-size: .85rem;
    color: var(--c-black);
    border-bottom: 1px solid var(--c-grey-100);
}

/* Gutachten / Wheel Fitment Groups */
.carapi-wheel-group { 
    background: #fff; 
    border: 1px solid var(--c-grey-200); 
    border-radius: 12px; 
    margin-bottom: 1rem; 
}
.carapi-wheel-header { 
    display: flex; 
    align-items: center; 
    gap: .75rem; 
    padding: 1rem 1.25rem; 
    background: var(--c-grey-50); 
    border-bottom: 1px solid var(--c-grey-200); 
    cursor: pointer; 
    user-select: none; 
    transition: background .2s ease;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}
.carapi-wheel-header:hover { background: var(--c-grey-100); }
.carapi-wheel-group:not(.open) .carapi-wheel-header {
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
    border-bottom: none;
}
.carapi-wheel-header h4 { margin: 0; font-size: 1rem; flex: 1; display:flex; align-items:center; gap: .3rem; font-weight:800; letter-spacing: -.2px;}
.carapi-wheel-header .carapi-wheel-meta { font-size: .75rem; font-weight: 500; color: var(--c-grey-500); }
.carapi-wheel-header .carapi-toggle { font-size: 1.25rem; color: var(--c-grey-400); transition: transform 0.2s; }
.carapi-wheel-group.open .carapi-toggle { transform: rotate(180deg); color: var(--c-black); }
.carapi-wheel-body { display: none; padding: 0; }
.carapi-wheel-group.open .carapi-wheel-body { display: block; animation: fadeSlide .25s ease; }

.carapi-et-variant { padding: 1rem 1.25rem; border-bottom: 1px solid var(--c-grey-100); }
.carapi-et-variant:last-child { border-bottom: none; }
.carapi-et-label { font-size: .85rem; font-weight: 700; color: var(--c-black); margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; }
.carapi-et-label .carapi-src { font-size: .7rem; color: var(--c-grey-400); font-weight: 500; padding: .1rem .4rem; background: var(--c-grey-50); border: 1px solid var(--c-grey-200); border-radius: 4px; }

.carapi-tire-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.carapi-tire { display: inline-flex; align-items: center; gap: .25rem; background: var(--c-grey-50); border: 1px solid var(--c-grey-200); border-radius: 6px; padding: .2rem .5rem; font-size: .75rem; font-family: monospace; font-weight:600;}
.carapi-axle { font-size: .6rem; font-weight: 800; border-radius: 4px; padding: .1rem .3rem; text-transform: uppercase; font-family: var(--font); }
.carapi-axle.va { background: #e0f2fe; color: #0284c7; } /* Blue for front */
.carapi-axle.ha { background: #ffe4e6; color: #e11d48; } /* Rose for rear */
.carapi-axle.va-ha { background: #dcfce7; color: #166534; } /* Green for both */

/* Tooltips for codes */
.carapi-tire-codes {
    margin-left: .25rem;
    display: inline-flex;
    gap: 3px;
    align-items: center;
}
.carapi-code-tooltip {
    position: relative;
    font-size: .55rem;
    color: var(--c-grey-600);
    background: var(--c-grey-200);
    padding: 2px 4px;
    border-radius: 4px;
    cursor: help;
    font-weight: 700;
    font-family: var(--font);
}
.carapi-code-tooltip:hover {
    background: var(--c-grey-300);
    color: var(--c-black);
}
.carapi-code-tooltip::before,
.carapi-code-tooltip::after {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: all .2s ease;
    z-index: 9999;
    pointer-events: none;
}
.carapi-code-tooltip::before {
    content: '';
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent transparent;
    border-top-color: var(--c-black);
}
.carapi-code-tooltip::after {
    content: attr(data-tooltip);
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--c-black);
    color: var(--c-white);
    padding: .5rem .75rem;
    border-radius: 6px;
    font-size: .65rem;
    font-weight: 500;
    white-space: pre-wrap;
    width: max-content;
    max-width: 260px;
    line-height: 1.4;
    text-align: left;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}
.carapi-code-tooltip:hover::before,
.carapi-code-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.carapi-result-error {
    max-width: 760px;
    margin: 2rem auto 0;
    padding: 1rem 1.5rem;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: var(--radius-md);
    text-align: center;
    font-size: .9rem;
    animation: fadeSlide .3s ease;
}

/* ═════════════════════════════════════════════════════════════════
   PRICING
   ═════════════════════════════════════════════════════════════════ */
.carapi-pricing-section {
    text-align: center;
}

.carapi-pricing-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--c-black);
    letter-spacing: -1px;
    margin: 0 0 .5rem;
}

.carapi-pricing-header p {
    color: var(--c-grey-500);
    font-size: 1.05rem;
    margin: 0 0 2rem;
}

/* Toggle */
.carapi-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 3rem;
}

.carapi-toggle-label {
    font-size: .9rem;
    font-weight: 500;
    color: var(--c-grey-700);
}

.carapi-switch {
    position: relative;
    width: 48px;
    height: 26px;
}

.carapi-switch input { opacity: 0; width: 0; height: 0; }

.carapi-switch .slider {
    position: absolute;
    inset: 0;
    background: var(--c-grey-300);
    border-radius: 26px;
    cursor: pointer;
    transition: background var(--transition);
}

.carapi-switch .slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: var(--c-white);
    border-radius: 50%;
    transition: transform var(--transition);
    box-shadow: var(--shadow-sm);
}

.carapi-switch input:checked + .slider {
    background: var(--c-black);
}

.carapi-switch input:checked + .slider::before {
    transform: translateX(22px);
}

.carapi-badge-discount {
    background: #dcfce7;
    color: #166534;
    font-size: .7rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: var(--radius-full);
}

/* Cards */
.carapi-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: center;
}

.carapi-pricing-card {
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: var(--radius-xl);
    padding: 2.5rem 2rem;
    text-align: left;
    position: relative;
    transition: all var(--transition);
}

.carapi-pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

/* Free plan — deliberately understated so it doesn't compete with the paid cards */
.carapi-pricing-free-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
    padding: 1.5rem 2rem;
    background: var(--c-grey-50);
    border: 1px solid var(--c-grey-200);
    border-radius: var(--radius-xl);
}
.carapi-pricing-free-info {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.carapi-pricing-free-info h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-black);
    margin: 0 0 .2rem;
}
.carapi-pricing-free-info p {
    font-size: .85rem;
    color: var(--c-grey-500);
    margin: 0;
}
.carapi-pricing-free-banner .carapi-pricing-btn {
    white-space: nowrap;
}
@media (max-width: 768px) {
    .carapi-pricing-free-banner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .carapi-pricing-free-banner .carapi-pricing-btn {
        width: 100%;
        text-align: center;
    }
}

.carapi-pricing-card--featured {
    border: 2px solid var(--c-black);
    box-shadow: var(--shadow-md);
    transform: scale(1.04);
    z-index: 2;
}

.carapi-pricing-card--featured:hover {
    transform: scale(1.04) translateY(-6px);
}

.carapi-pricing-popular {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-black);
    color: var(--c-white);
    padding: .3rem 1.1rem;
    border-radius: var(--radius-full);
    font-size: .75rem;
    font-weight: 700;
}

.carapi-pricing-card h3 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    color: var(--c-black);
}

.carapi-pricing-amount {
    display: flex;
    align-items: baseline;
    gap: .15rem;
    margin-bottom: .75rem;
}

.carapi-pricing-currency {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-black);
}

.carapi-pricing-value {
    font-size: 3.25rem;
    font-weight: 900;
    color: var(--c-black);
    letter-spacing: -2px;
    line-height: 1;
    transition: opacity .3s ease;
}

.carapi-pricing-value--custom {
    font-size: 2.25rem;
}

.carapi-pricing-period {
    font-size: .9rem;
    color: var(--c-grey-500);
    margin-left: .25rem;
}

.carapi-pricing-desc {
    color: var(--c-grey-500);
    font-size: .9rem;
    margin-bottom: 1.5rem;
    min-height: 42px;
}

.carapi-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.carapi-pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .45rem 0;
    font-size: .9rem;
    color: var(--c-grey-700);
}

.carapi-pricing-features li svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #16a34a;
    margin-top: 2px;
}

.carapi-pricing-btn {
    display: block;
    width: 100%;
    padding: .85rem 0;
    text-align: center;
    border-radius: var(--radius-full);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition);
    cursor: pointer;
    font-family: var(--font);
}

.carapi-pricing-btn--outline {
    background: transparent;
    color: var(--c-black);
    border: 1.5px solid var(--c-grey-300);
}

.carapi-pricing-btn--outline:hover {
    border-color: var(--c-black);
    background: var(--c-grey-50);
}

.carapi-pricing-btn--dark {
    background: var(--c-black);
    color: var(--c-white);
    border: 1.5px solid var(--c-black);
}

.carapi-pricing-btn--dark:hover {
    background: var(--c-white);
    color: var(--c-black);
}

/* ═════════════════════════════════════════════════════════════════
   API DOCS
   ═════════════════════════════════════════════════════════════════ */
.carapi-docs-section {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 3rem;
    align-items: start;
}

/* Fallback: wenn keine Sidebar vorhanden */
.carapi-docs-content:only-child {
    grid-column: 1 / -1;
}

.carapi-docs-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.carapi-docs-sidebar h4 {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--c-grey-500);
    margin: 0 0 1rem;
}

.carapi-docs-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.carapi-docs-sidebar ul ul {
    padding-left: 1rem;
    margin-top: .35rem;
}

.carapi-docs-sidebar li {
    margin-bottom: .35rem;
}

.carapi-docs-sidebar a {
    text-decoration: none;
    color: var(--c-grey-500);
    font-size: .85rem;
    font-weight: 500;
    transition: color var(--transition);
}

.carapi-docs-sidebar a:hover,
.carapi-docs-sidebar a.active {
    color: var(--c-black);
    font-weight: 600;
}

.carapi-docs-content {
    min-width: 0;
}

.carapi-docs-content h2 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--c-black);
    margin: 0 0 .75rem;
}

.carapi-docs-content > p {
    color: var(--c-grey-500);
    font-size: 1rem;
}

.carapi-divider {
    border: 0;
    border-top: 1px solid var(--c-grey-200);
    margin: 2.5rem 0;
}

.carapi-endpoint-card {
    border: 1px solid var(--c-grey-200);
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--c-white);
}

.carapi-endpoint-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.25rem;
    background: var(--c-grey-50);
    border-bottom: 1px solid var(--c-grey-200);
    font-family: 'Fira Code', 'JetBrains Mono', monospace;
    font-size: .9rem;
}

.carapi-method {
    padding: .2rem .6rem;
    border-radius: var(--radius-sm);
    font-size: .75rem;
    font-weight: 700;
    color: var(--c-white);
}

.carapi-method-get  { background: #16a34a; }
.carapi-method-post { background: #2563eb; }
.carapi-method-info { background: #0284c7; }

.carapi-endpoint-card > p,
.carapi-endpoint-card > h3,
.carapi-endpoint-card > h4,
.carapi-endpoint-card > .carapi-code-block,
.carapi-endpoint-card > .carapi-docs-table {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}

/* h3-Kartentitel tragen inline style="margin-top:0" (Reset gegen den
   Browser-Default), landen dadurch aber ohne jeden Abstand oben links in
   der Ecke. padding-top wirkt trotzdem, weil es kein margin ist. */
.carapi-endpoint-card > h3 {
    padding-top: 1.5rem;
}

.carapi-code-block {
    background: var(--c-dark);
    color: #e5e5e5;
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    margin: 1rem 0;
}

.carapi-code-block pre {
    margin: 0;
    font-family: 'Fira Code', 'JetBrains Mono', monospace;
    font-size: .85rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-all;
}

.carapi-code-block .json-key { color: #7dd3fc; }
.carapi-code-block .json-string { color: #86efac; }
.carapi-code-block .json-number { color: #fde68a; }

.carapi-docs-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.carapi-docs-table th,
.carapi-docs-table td {
    padding: .65rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--c-grey-200);
    font-size: .9rem;
}

.carapi-docs-table th {
    background: var(--c-grey-50);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-grey-700);
}

.carapi-docs-table code,
.carapi-docs-content code,
.carapi-endpoint-card code {
    background: var(--c-grey-100);
    padding: .15rem .4rem;
    border-radius: var(--radius-sm);
    font-size: .85rem;
}

.carapi-code-block code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

.carapi-required {
    color: #dc2626;
    font-weight: 700;
}

/* ═════════════════════════════════════════════════════════════════
   FAQ SECTION
   ═════════════════════════════════════════════════════════════════ */
.carapi-faq-section {
    background: var(--c-white);
}

.carapi-faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.carapi-faq-item {
    border-bottom: 1px solid var(--c-grey-200);
}

.carapi-faq-item:first-child {
    border-top: 1px solid var(--c-grey-200);
}

.carapi-faq-item summary {
    list-style: none;
}

.carapi-faq-item summary::-webkit-details-marker {
    display: none;
}

.carapi-faq-item summary::marker {
    display: none;
    content: '';
}

.carapi-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 0;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--c-black);
    transition: color var(--transition);
    user-select: none;
}

.carapi-faq-question:hover {
    color: var(--c-accent);
}

.carapi-faq-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--c-grey-100);
    border-radius: 50%;
    transition: all var(--transition);
}

.carapi-faq-icon .material-symbols-rounded {
    font-size: 20px;
    color: var(--c-grey-500);
    transition: transform .3s ease;
}

.carapi-faq-item[open] .carapi-faq-icon {
    background: var(--c-black);
}

.carapi-faq-item[open] .carapi-faq-icon .material-symbols-rounded {
    color: var(--c-white);
    transform: rotate(45deg);
}

.carapi-faq-answer {
    padding: 0 0 1.5rem;
    animation: faqFadeIn .3s ease;
}

.carapi-faq-answer p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--c-grey-500);
    max-width: 90%;
}

@keyframes faqFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .carapi-features-grid,
    .carapi-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

    .carapi-pricing-card--featured {
        transform: none;
    }

    .carapi-pricing-card--featured:hover {
        transform: translateY(-6px);
    }
}

/* ═════════════════════════════════════════════════════════════════
   ACCOUNT DASHBOARD
   ═════════════════════════════════════════════════════════════════ */
.carapi-account {
    padding: 100px 0 4rem;
    min-height: 100vh;
    background: var(--c-grey-50);
}

.carapi-account-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.carapi-account-header h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--c-black);
    margin: 0;
    letter-spacing: -.5px;
}

.carapi-account-header p {
    color: var(--c-grey-500);
    margin: .25rem 0 0;
    font-size: .9rem;
}

/* Dashboard action buttons */
.carapi-account-action-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    font-size: .82rem;
    font-weight: 700;
    font-family: var(--font);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all .15s ease;
    cursor: pointer;
    background: var(--c-black);
    color: #fff;
    border: 1.5px solid var(--c-black);
}
.carapi-account-action-btn:hover {
    opacity: .85;
}
.carapi-account-action-btn .material-symbols-rounded {
    font-size: 18px;
}

.carapi-account-action-btn--logout {
    background: transparent;
    color: var(--c-grey-500);
    border-color: var(--c-grey-200);
}
.carapi-account-action-btn--logout:hover {
    color: var(--c-black);
    border-color: var(--c-grey-400);
    opacity: 1;
}

/* Stats cards */
.carapi-account-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.carapi-stat-card {
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: box-shadow .2s ease;
}

.carapi-stat-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.05);
}

.carapi-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--c-grey-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.carapi-stat-icon .material-symbols-rounded {
    font-size: 22px;
    color: var(--c-accent);
}

.carapi-stat-label {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-grey-500);
    margin-bottom: .25rem;
}

.carapi-stat-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--c-black);
}

.carapi-stat-sub {
    font-size: .75rem;
    color: var(--c-grey-500);
    margin-top: .25rem;
    display: block;
}

/* Usage bar */
.carapi-usage-bar {
    width: 100%;
    height: 6px;
    background: var(--c-grey-200);
    border-radius: 3px;
    overflow: hidden;
    margin-top: .35rem;
}

.carapi-usage-fill {
    height: 100%;
    background: var(--c-accent);
    border-radius: 3px;
    transition: width .5s ease;
}

/* Account sections */
.carapi-account-section {
    margin-bottom: 2rem;
    scroll-margin-top: 80px;
}

.carapi-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.carapi-section-title .material-symbols-rounded {
    font-size: 22px;
    color: var(--c-grey-500);
}

.carapi-section-title h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--c-black);
    margin: 0;
}

.carapi-account-card {
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: 14px;
    padding: 1.75rem;
}

/* Plan info */
.carapi-plan-info {
    margin-bottom: 1.5rem;
}

.carapi-plan-badge {
    display: inline-block;
    padding: .35rem 1rem;
    border-radius: var(--radius-full);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .5px;
    background: var(--c-grey-100);
    color: var(--c-grey-700);
}

.carapi-plan-badge--pro {
    background: var(--c-accent);
    color: var(--c-white);
}

.carapi-plan-badge--enterprise {
    background: var(--c-black);
    color: var(--c-white);
}

.carapi-plan-expiry {
    margin: .75rem 0 0;
    font-size: .85rem;
    color: var(--c-grey-500);
}

.carapi-plan-desc {
    margin: .5rem 0 0;
    font-size: .9rem;
    color: var(--c-grey-700);
    line-height: 1.5;
}

.carapi-plan-actions {
    display: flex;
    gap: .75rem;
    align-items: center;
}

.carapi-btn-cancel {
    background: none;
    border: 1px solid var(--c-grey-300);
    color: var(--c-grey-500);
    cursor: pointer;
    font-family: var(--font);
}

/* API Keys */
.carapi-key-row {
    margin-bottom: 1.25rem;
}

.carapi-key-row:last-of-type {
    margin-bottom: 1rem;
}

.carapi-key-field label {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-grey-500);
    margin-bottom: .4rem;
    font-weight: 600;
}

.carapi-key-value {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--c-grey-50);
    border: 1px solid var(--c-grey-200);
    border-radius: 10px;
    padding: .6rem 1rem;
}

.carapi-key-value code {
    flex: 1;
    font-size: .85rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--c-black);
    word-break: break-all;
}

.carapi-key-masked {
    color: var(--c-grey-500) !important;
    letter-spacing: 2px;
}

.carapi-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-grey-500);
    padding: .25rem;
    border-radius: 6px;
    transition: all .15s ease;
    display: flex;
    align-items: center;
}

.carapi-copy-btn:hover {
    background: var(--c-grey-200);
    color: var(--c-black);
}

.carapi-copy-btn .material-symbols-rounded {
    font-size: 18px;
}

.carapi-key-hint {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    color: var(--c-grey-500);
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: .6rem 1rem;
}

.carapi-key-hint .material-symbols-rounded {
    font-size: 18px;
    color: #f59e0b;
}

/* Settings form */
.carapi-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.carapi-form-group label {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-grey-500);
    margin-bottom: .35rem;
    font-weight: 600;
}

.carapi-form-group input {
    width: 100%;
    padding: .7rem 1rem;
    border: 1px solid var(--c-grey-200);
    border-radius: 10px;
    font-family: var(--font);
    font-size: .9rem;
    color: var(--c-black);
    background: var(--c-white);
    transition: border-color .2s ease;
    box-sizing: border-box;
}

.carapi-form-group input:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}

.carapi-form-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: .5rem;
}

.carapi-form-actions .carapi-btn-register {
    border: none;
    cursor: pointer;
    font-family: var(--font);
}

@media (max-width: 768px) {
    /* Header: hide desktop nav & auth, show hamburger */
    .carapi-nav { display: none; }
    .carapi-header-actions .carapi-btn-login,
    .carapi-header-actions .carapi-btn-register,
    .carapi-header-actions .carapi-btn-ticket,
    .carapi-header-actions .carapi-header-sep,
    .carapi-header-actions .carapi-account-dropdown { display: none; }
    .carapi-menu-toggle { display: flex; }
    /* .carapi-nav trägt normalerweise margin-left:auto und schiebt damit
       sich selbst UND die Actions/Hamburger nach rechts. Fällt .carapi-nav
       durch display:none weg, fehlt dieser Platzhalter komplett - der
       Hamburger klebt sonst direkt neben dem Logo statt am rechten Rand. */
    .carapi-header-actions { margin-left: auto; }

    .carapi-hero {
        height: auto;
        min-height: auto;
        max-height: none;
        padding-top: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body.admin-bar .carapi-hero {
        height: auto;
        padding-top: 92px;
    }

    /* Mobile demo cards — tiny, at screen edges */
    .carapi-hero-cards {
        display: block;
    }

    .carapi-demo-card {
        min-width: 55px;
        max-width: 65px;
        padding: .2rem .3rem;
        border-radius: 5px;
        font-size: .35rem;
    }

    .carapi-demo-card-badge { font-size: .25rem; padding: .05rem .2rem; }
    .carapi-demo-card-title { font-size: .35rem; margin: .1rem 0; }
    .carapi-demo-card-row { gap: .05rem; margin-bottom: .03rem; }
    .carapi-demo-card-row span { font-size: .28rem; }
    .carapi-demo-card-row strong { font-size: .28rem; }
    .carapi-demo-card-code { margin-top: .1rem; }
    .carapi-demo-card-code code { font-size: .24rem; padding: .05rem .15rem; }

    .carapi-demo-card--left { left: 15%; }
    .carapi-demo-card--right { right: 15%; }

    .carapi-hero-text {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        padding: 2rem 1.5rem 0;
    }

    body.admin-bar .carapi-hero-text {
        top: auto;
    }

    .carapi-hero-headline {
        font-size: 2.25rem;
        letter-spacing: -1px;
    }

    .carapi-hero-car {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        max-width: 100%;
    }

    .carapi-hero-search {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        width: 95%;
        margin: -1rem auto 1.5rem;
        z-index: 9999;
    }

    .carapi-hero-search .carapi-demo-widget {
        flex-direction: column;
        border-radius: var(--radius-xl);
        padding: .75rem;
    }

    .carapi-hero-search .carapi-widget-panel.active {
        flex-wrap: wrap;
    }

    /* Fahrzeugwahl panel — always column on mobile */
    .carapi-hero-search #panel-model.carapi-widget-panel.active {
        flex-direction: column;
    }

    .carapi-hero-search .carapi-widget-dd-wrap {
        width: 100%;
    }

    .carapi-hero-search .carapi-widget-input--short {
        max-width: none;
        flex: 1 1 40%;
    }

    .carapi-hero-search .carapi-widget-btn {
        width: 100%;
    }

    /* Brand slider smaller */
    .carapi-brand-slider-section {
        padding: 3rem 0 2rem;
    }

    .carapi-brand-slide {
        width: 80px;
        padding: 0 1rem;
    }

    .carapi-brand-slide img {
        height: 24px;
    }

    .carapi-partner-section {
        padding: 3rem 0 2rem;
    }

    .carapi-partner-slide {
        width: 130px;
        height: 76px;
        padding: .75rem 1rem;
    }

    .carapi-partner-slide img {
        max-height: 28px;
        max-width: 100px;
    }

    .carapi-docs-section {
        grid-template-columns: 1fr;
    }

    .carapi-docs-sidebar {
        position: static;
    }

    .carapi-section {
        padding: 4rem 0;
    }


    .carapi-result-specs {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Account dashboard mobile */
    .carapi-account-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .carapi-account-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .carapi-form-row {
        grid-template-columns: 1fr;
    }

    .carapi-plan-actions {
        flex-direction: column;
        width: 100%;
    }

    .carapi-plan-actions .carapi-btn-register,
    .carapi-plan-actions .carapi-btn-cancel {
        width: 100%;
        text-align: center;
    }
}

/* ═════════════════════════════════════════════════════════════════
   WordPress Content Pages (Impressum, Datenschutz, AGB etc.)
   ═════════════════════════════════════════════════════════════════ */
.carapi-wp-content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--c-grey-700);
}

.carapi-wp-content h2 {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--c-black);
    margin: 2.5rem 0 1rem;
}

.carapi-wp-content h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--c-black);
    margin: 2rem 0 .75rem;
}

.carapi-wp-content p {
    margin: 0 0 1.25rem;
}

.carapi-wp-content a {
    color: var(--c-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.carapi-wp-content a:hover {
    color: var(--c-black);
}

.carapi-wp-content ul,
.carapi-wp-content ol {
    margin: 0 0 1.25rem 1.5rem;
}

.carapi-wp-content li {
    margin-bottom: .4rem;
}

.carapi-wp-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.carapi-wp-content th,
.carapi-wp-content td {
    text-align: left;
    padding: .6rem .8rem;
    border-bottom: 1px solid var(--c-grey-200);
}

.carapi-wp-content th {
    font-weight: 700;
    color: var(--c-black);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.carapi-wp-content blockquote {
    border-left: 3px solid var(--c-accent);
    padding: .5rem 1.5rem;
    margin: 1.5rem 0;
    color: var(--c-grey-600);
    font-style: italic;
}

.carapi-content-page {
    padding-bottom: 4rem;
}

/* ═════════════════════════════════════════════════════════════════
   NAV DROPDOWN (Daten)
   ═════════════════════════════════════════════════════════════════ */
.carapi-nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.carapi-nav-dropdown-trigger {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}

.carapi-nav-dropdown-trigger .material-symbols-rounded {
    transition: transform .2s ease;
}

.carapi-nav-dropdown:hover .carapi-nav-dropdown-trigger .material-symbols-rounded {
    transform: rotate(180deg);
}

.carapi-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 16px);
    left: 0;
    transform: translateY(-4px);
    min-width: 340px;
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.1);
    padding: .5rem;
    opacity: 0;
    visibility: hidden;
    transition: all .2s ease;
    z-index: 10000;
}

.carapi-nav-dropdown:hover .carapi-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.carapi-nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    text-decoration: none;
    color: var(--c-grey-700);
    font-size: .85rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all .15s ease;
    white-space: nowrap;
}

.carapi-nav-dropdown-menu a:hover {
    background: var(--c-grey-100);
    color: var(--c-black);
}

.carapi-nav-dropdown-menu a .material-symbols-rounded {
    font-size: 20px;
    color: var(--c-grey-500);
}

.carapi-nav-dropdown-menu--wide {
    max-height: 80vh;
    overflow-y: auto;
}

.carapi-nav-dropdown--right .carapi-nav-dropdown-menu {
    left: auto;
    right: 0;
}

.cdropdown-section {
    display: block;
    padding: .6rem .75rem .3rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-grey-400);
}
.cdropdown-section:first-child {
    padding-top: .35rem;
}

.cdropdown-item {
    align-items: flex-start !important;
    position: relative;
    padding-right: 2.2rem !important;
}
.cdropdown-item .material-symbols-rounded { margin-top: 2px; }
.cdropdown-item strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--c-black);
    line-height: 1.2;
}
.cdropdown-item p {
    margin: 2px 0 0 0 !important;
    font-size: 0.75rem;
    color: var(--c-grey-500);
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
}
.cdropdown-item::after {
    content: 'arrow_forward';
    font-family: 'Material Symbols Rounded';
    display: block !important;
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    color: var(--c-grey-300);
    transition: color .15s, transform .15s;
}
.cdropdown-item:hover::after {
    color: var(--c-black);
    transform: translateY(-50%) translateX(2px);
}

/* Mobile Dropdown */
.carapi-mobile-dropdown {
    border-bottom: 1px solid var(--c-grey-100);
}

.carapi-mobile-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: .25rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-family: var(--font);
    text-decoration: none;
    color: var(--c-black);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 1rem 0;
    cursor: pointer;
    transition: color var(--transition);
}

.carapi-mobile-dropdown-trigger .material-symbols-rounded {
    transition: transform .2s ease;
}

.carapi-mobile-dropdown.open .carapi-mobile-dropdown-trigger .material-symbols-rounded {
    transform: rotate(180deg);
}

.carapi-mobile-dropdown-menu {
    display: none;
    padding: 0 0 .5rem 1rem;
}

.carapi-mobile-dropdown.open .carapi-mobile-dropdown-menu {
    display: block;
}

.carapi-mobile-dropdown-menu a {
    display: block;
    text-decoration: none;
    color: var(--c-grey-700);
    font-size: 1rem;
    font-weight: 500;
    padding: .6rem 0;
    transition: color var(--transition);
}

.carapi-mobile-dropdown-menu a:hover {
    color: var(--c-accent);
}

/* ═════════════════════════════════════════════════════════════════
   DATA PAGES
   ═════════════════════════════════════════════════════════════════ */
.carapi-data-page {
    padding-top: 0;
}

/* ── Data Hero ── */
.carapi-data-hero {
    padding: calc(60px + 5rem) 0 5rem;
    text-align: center;
    background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

body.admin-bar .carapi-data-hero {
    padding-top: calc(92px + 5rem);
}

.carapi-data-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(37,99,235,.04) 0%, transparent 70%);
    pointer-events: none;
}

.carapi-data-hero-headline {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1.05;
    color: var(--c-black);
    margin: .5rem 0 1.5rem;
}

.carapi-data-hero-headline em {
    font-style: normal;
    color: var(--c-grey-500);
}

.carapi-data-hero-sub {
    font-size: 1.1rem;
    color: var(--c-grey-500);
    max-width: 600px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

/* ── Stat Counters ── */
.carapi-data-stats {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
}

.carapi-data-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carapi-data-stat-number {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -2px;
    color: var(--c-black);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.carapi-data-stat-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--c-grey-500);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: .5rem;
}

/* ── Data Fields Grid ── */
.carapi-data-fields-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.carapi-data-field-card {
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all var(--transition);
}

.carapi-data-field-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.carapi-data-field-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--c-grey-100);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    color: var(--c-black);
}

.carapi-data-field-icon .material-symbols-rounded {
    font-size: 22px;
}

.carapi-data-field-card h3 {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .35rem;
    color: var(--c-black);
    letter-spacing: -.3px;
}

.carapi-data-field-card p {
    font-size: .8rem;
    color: var(--c-grey-500);
    margin: 0;
    line-height: 1.5;
}

/* ── JSON Preview ── */
.carapi-data-json-preview {
    max-width: 700px;
    margin: 0 auto;
    background: var(--c-dark);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.carapi-data-json-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.5rem;
    background: rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.carapi-data-json-method {
    display: inline-block;
    background: rgba(34,197,94,.15);
    color: #22c55e;
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.carapi-data-json-header code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: .78rem;
    color: var(--c-grey-300);
}

.carapi-data-json-code {
    padding: 1.5rem;
    margin: 0;
    overflow-x: auto;
}

.carapi-data-json-code code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: .78rem;
    line-height: 1.8;
    color: var(--c-grey-300);
    display: block;
    white-space: pre;
}

/* ── Auflagen Cards ── */
.carapi-data-auflagen-example {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.carapi-data-auflage-card {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    transition: all var(--transition);
}

.carapi-data-auflage-card:hover {
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.carapi-data-auflage-code {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 36px;
    background: var(--c-grey-100);
    color: var(--c-black);
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: .8rem;
    font-weight: 700;
    border-radius: 6px;
    padding: 0 .6rem;
}

.carapi-data-auflage-text {
    font-size: .9rem;
    color: var(--c-grey-700);
    line-height: 1.6;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .carapi-data-fields-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .carapi-nav-dropdown {
        display: none;
    }

    .carapi-data-hero {
        padding: 4rem 0 3rem;
    }

    .carapi-data-hero-sub {
        font-size: 1rem;
    }

    .carapi-data-stats {
        gap: 2rem;
    }

    .carapi-data-stat-number {
        font-size: 2.25rem;
    }

    .carapi-data-fields-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .carapi-data-field-card {
        padding: 1.25rem;
    }

    .carapi-data-auflage-card {
        flex-direction: column;
        gap: .75rem;
    }
}

@media (max-width: 480px) {
    .carapi-data-fields-grid {
        grid-template-columns: 1fr;
    }

    .carapi-data-stats {
        flex-direction: column;
        gap: 1.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   DEMO PAGES — shared + nav dropdown
   ═══════════════════════════════════════════════════════════════ */

/* Nav Dropdown */
.carapi-nav-dropdown { position: relative; }
.carapi-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.1);
    min-width: 340px;
    padding: .5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all .2s ease;
    z-index: 10000;
}
.carapi-nav-dropdown:hover .carapi-nav-dropdown-menu,
.carapi-nav-dropdown:focus-within .carapi-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.carapi-nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    text-decoration: none;
    color: var(--c-grey-700);
    font-size: .85rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all .15s ease;
    white-space: nowrap;
}
.carapi-nav-dropdown-menu a:not(.cdropdown-item)::after { display: none !important; }
.carapi-nav-dropdown-menu a:hover { background: var(--c-grey-100); color: var(--c-black); }
.carapi-nav-dropdown-menu a .material-symbols-rounded { font-size: 18px; color: var(--c-grey-400); }

/* Mobile dropdown */
.carapi-mobile-dropdown { display: flex; flex-direction: column; }
.carapi-mobile-dropdown-trigger {
    background: none; border: none; cursor: pointer;
    font-family: var(--font); font-size: 1.1rem; font-weight: 600;
    color: var(--c-black); padding: 1rem 0;
    border-bottom: 1px solid var(--c-grey-100);
    display: flex; align-items: center; gap: .3rem; text-align: left;
}
.carapi-mobile-dropdown-menu { display: none; flex-direction: column; padding-left: 1rem; }
.carapi-mobile-dropdown.open .carapi-mobile-dropdown-menu { display: flex; }
.carapi-mobile-dropdown-menu a {
    text-decoration: none; color: var(--c-grey-600);
    font-size: .95rem; font-weight: 500;
    padding: .6rem 0; border-bottom: 1px solid var(--c-grey-100);
}

/* Demo Hero */
.cdemo-hero {
    padding: 120px 0 4rem;
    background: linear-gradient(180deg, #f5f5f5 0%, #fff 100%);
    text-align: center;
}
.cdemo-hero--compact { padding: 120px 0 3rem; }
.cdemo-hero-inner { max-width: 700px; margin: 0 auto; }
.cdemo-hero-badge {
    display: inline-block;
    background: rgba(0,0,0,.06);
    color: var(--c-grey-600);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: .3rem .8rem;
    border-radius: var(--radius-full);
    margin-bottom: 1.25rem;
}
.cdemo-hero-title { font-size: clamp(2rem,5vw,3.5rem); font-weight: 900; letter-spacing: -1.5px; margin: 0 0 1rem; }
.cdemo-hero-sub { font-size: 1.05rem; color: var(--c-grey-500); max-width: 540px; margin: 0 auto 2rem; line-height: 1.65; }
.cdemo-tabs { display: inline-flex; background: var(--c-grey-100); border-radius: var(--radius-full); padding: .25rem; gap: .25rem; }
.cdemo-tab {
    display: flex; align-items: center; gap: .4rem;
    padding: .5rem 1.25rem;
    border: none; background: none; cursor: pointer;
    font-family: var(--font); font-size: .85rem; font-weight: 600;
    color: var(--c-grey-500); border-radius: var(--radius-full);
    transition: all .2s ease;
}
.cdemo-tab .material-symbols-rounded { font-size: 18px; }
.cdemo-tab.active { background: var(--c-white); color: var(--c-black); box-shadow: 0 2px 8px rgba(0,0,0,.08); }

/* Demo Main – Widget */
.cdemo-main { padding: 3rem 0 5rem; background: var(--c-white); }
.cdemo-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.cdemo-widget-col { display: flex; flex-direction: column; gap: 1.5rem; }
.cdemo-panel { display: none; }
.cdemo-panel.active { display: flex; flex-direction: column; gap: 1rem; }
.cdemo-panel-label {
    display: flex; align-items: center; gap: .4rem;
    font-size: .75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--c-grey-500);
}
.cdemo-panel-label .material-symbols-rounded { font-size: 16px; }
.cdemo-input-row { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.cdemo-field { display: flex; flex-direction: column; gap: .35rem; }
.cdemo-field label { font-size: .75rem; font-weight: 600; color: var(--c-grey-600); text-transform: uppercase; letter-spacing: .5px; }
.cdemo-field input {
    height: 44px; padding: 0 .875rem;
    border: 1.5px solid var(--c-grey-200);
    border-radius: 10px; font-family: var(--font);
    font-size: .9rem; color: var(--c-black);
    background: var(--c-white);
    transition: border-color .15s;
    outline: none; width: 120px;
}
.cdemo-field:last-of-type input { width: 100%; }
.cdemo-field input:focus { border-color: var(--c-accent, #3b82f6); }
.cdemo-btn {
    height: 44px; display: flex; align-items: center; gap: .4rem;
    padding: 0 1.25rem;
    background: var(--c-black); color: var(--c-white);
    border: none; border-radius: 10px; cursor: pointer;
    font-family: var(--font); font-size: .875rem; font-weight: 600;
    transition: background .15s;
    white-space: nowrap;
}
.cdemo-btn:hover { background: var(--c-grey-900); }
.cdemo-btn .material-symbols-rounded { font-size: 18px; }
.cdemo-hint {
    display: flex; align-items: center; gap: .4rem;
    font-size: .78rem; color: var(--c-grey-400);
}
.cdemo-hint .material-symbols-rounded { font-size: 16px; }
.cdemo-loading { display: flex; align-items: center; gap: .75rem; color: var(--c-grey-500); font-size: .9rem; }
.cdemo-spinner {
    width: 20px; height: 20px;
    border: 2px solid var(--c-grey-200);
    border-top-color: var(--c-black);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cdemo-error {
    padding: .75rem 1rem;
    background: #fef2f2; border: 1px solid #fecaca;
    border-radius: 10px; color: #b91c1c;
    font-size: .875rem;
}
.cdemo-result-card {
    background: var(--c-grey-50, #fafafa);
    border: 1px solid var(--c-grey-200);
    border-radius: 14px;
    padding: 1.25rem;
    animation: fadeSlideUp .25s ease;
}
@keyframes fadeSlideUp { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }
.cdemo-result-head {
    display: flex; align-items: center; gap: 1rem;
    padding-bottom: 1rem; border-bottom: 1px solid var(--c-grey-200);
    margin-bottom: 1rem;
}
.cdemo-result-logo { height: 28px; max-height: 28px; max-width: 60px; width: auto; object-fit: contain; }
.cdemo-result-head h3 { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.4px; }
.cdemo-result-head span { font-size: .8rem; color: var(--c-grey-500); }
.cdemo-result-badge {
    margin-left: auto; background: var(--c-black); color: var(--c-white);
    font-size: .72rem; font-weight: 700; letter-spacing: .5px;
    padding: .25rem .65rem; border-radius: var(--radius-full);
}
.cdemo-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cdemo-result-row { display: flex; flex-direction: column; gap: .15rem; }
.cdemo-result-row span { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--c-grey-500); }
.cdemo-result-row strong { font-size: .9rem; font-weight: 700; color: var(--c-black); }

/* Locked/masked demo fields — data is there, but blurred out behind an API-key wall */
.cdemo-locked-value {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--c-grey-400) !important;
    filter: blur(3px);
    user-select: none;
    transition: filter .2s ease;
}
.cdemo-result-row.cdemo-locked:hover .cdemo-locked-value { filter: blur(2px); }
.cdemo-locked-value em { font-style: normal; }
.cdemo-locked-value .material-symbols-rounded { font-size: 14px; }
.ckonfig-locked .material-symbols-rounded { font-size: 14px; }
.cdemo-locked-cta {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    padding: .75rem 1rem;
    background: var(--c-white);
    border: 1px dashed var(--c-grey-300);
    border-radius: 10px;
    font-size: .8rem;
    color: var(--c-grey-600);
}
.cdemo-locked-cta .material-symbols-rounded { font-size: 18px; color: var(--c-accent); }
.cdemo-locked-cta a {
    margin-left: auto;
    font-weight: 700;
    color: var(--c-accent);
    text-decoration: none;
    white-space: nowrap;
}
.cdemo-locked-cta a:hover { text-decoration: underline; }

/* Code Block */
.cdemo-code-col { position: sticky; top: 90px; }
.cdemo-code-block {
    background: #0f1117; border-radius: 14px;
    overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.cdemo-code-header {
    display: flex; align-items: center; gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.cdemo-code-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.cdemo-code-title { font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.4); margin-left: .25rem; flex: 1; }
.cdemo-code-badge {
    font-size: .7rem; font-weight: 700; padding: .15rem .5rem;
    border-radius: 5px; background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.5);
}
.cdemo-code-badge.ok { background: rgba(34,197,94,.2); color: #4ade80; }
.cdemo-code-badge.error { background: rgba(239,68,68,.2); color: #f87171; }
.cdemo-json { margin: 0; padding: 1.25rem; overflow-x: auto; }
.cdemo-json code {
    font-family: 'SF Mono','Fira Code',monospace;
    font-size: .78rem; line-height: 1.7;
    color: #a5f3fc; white-space: pre;
}
.cdemo-endpoint-info { margin-top: .75rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.cdemo-endpoint-row { display: flex; align-items: center; gap: .5rem; }
.cdemo-method {
    font-size: .65rem; font-weight: 800; text-transform: uppercase;
    padding: .2rem .5rem; border-radius: 5px; letter-spacing: .5px;
}
.cdemo-method.get { background: rgba(34,197,94,.12); color: #16a34a; }
.cdemo-endpoint-row code {
    font-size: .78rem; color: var(--c-grey-600);
    font-family: 'SF Mono','Fira Code',monospace;
}
.cdemo-ms { font-size: .8rem; color: var(--c-grey-400); font-variant-numeric: tabular-nums; }

/* How It Works */
.cdemo-how { padding: 4rem 0; background: var(--c-grey-50, #fafafa); border-top: 1px solid var(--c-grey-200); }
.cdemo-steps { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; }
.cdemo-step { text-align: center; max-width: 220px; padding: 1.5rem; }
.cdemo-step-num {
    font-size: 2rem; font-weight: 900; color: var(--c-grey-200);
    letter-spacing: -1px; line-height: 1; margin-bottom: .75rem;
}
.cdemo-step h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; }
.cdemo-step p { font-size: .85rem; color: var(--c-grey-500); line-height: 1.55; margin: 0; }
.cdemo-step-arrow { color: var(--c-grey-300); }
.cdemo-step-arrow .material-symbols-rounded { font-size: 28px; }

/* Nav Footer – links to other demos */
.cdemo-nav-footer { padding: 3rem 0; background: var(--c-white); border-top: 1px solid var(--c-grey-100); }
.cdemo-nav-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cdemo-nav-card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--c-grey-200);
    border-radius: 14px; text-decoration: none;
    color: var(--c-black); transition: all .2s;
}
.cdemo-nav-card:hover { border-color: var(--c-black); box-shadow: 0 4px 20px rgba(0,0,0,.07); }
.cdemo-nav-card > .material-symbols-rounded:first-child {
    font-size: 28px; color: var(--c-grey-400);
    background: var(--c-grey-100); border-radius: 10px;
    padding: .5rem; flex-shrink: 0;
}
.cdemo-nav-card div { flex: 1; }
.cdemo-nav-card strong { display: block; font-size: .85rem; font-weight: 700; }
.cdemo-nav-card span { display: block; font-size: .8rem; color: var(--c-grey-500); }
.cdemo-nav-card div span { display: block; }
.cdemo-nav-arrow { color: var(--c-grey-400); font-size: 20px !important; }

/* SEO Text Section */
.cdemo-seo-section { padding: 2rem 0 3rem; background: var(--c-white); }
.cdemo-seo-text {
    max-width: 760px;
    margin: 0 auto;
    font-size: .88rem;
    line-height: 1.7;
    color: var(--c-grey-500);
}
.cdemo-seo-text p { margin: 0 0 .75rem; }
.cdemo-seo-more { margin: 0; }
.cdemo-seo-more summary {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--c-grey-400);
    cursor: pointer;
    list-style: none;
    transition: color .15s;
}
.cdemo-seo-more summary::-webkit-details-marker { display: none; }
.cdemo-seo-more summary::before {
    content: 'expand_more';
    font-family: 'Material Symbols Rounded';
    font-size: 18px;
    transition: transform .2s;
}
.cdemo-seo-more[open] summary::before { transform: rotate(180deg); }
.cdemo-seo-more summary:hover { color: var(--c-grey-600); }
.cdemo-seo-more p {
    margin: .75rem 0 0;
    animation: fadeSlideUp .25s ease;
}

/* ═══════════════════════════════════════════════════════════════
   DEMO KONFIGURATOR
   ═══════════════════════════════════════════════════════════════ */
.ckonfig-section { padding: 2rem 0 5rem; }

/* Progress */
.ckonfig-progress {
    display: flex; align-items: center;
    gap: 0; margin-bottom: 3rem;
    overflow-x: auto; padding-bottom: .5rem;
}
.ckonfig-step-item { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.ckonfig-step-item span { font-size: .8rem; font-weight: 600; color: var(--c-grey-400); transition: color .2s; }
.ckonfig-step-item.active span { color: var(--c-black); }
.ckonfig-step-item.done span { color: var(--c-grey-500); }
.ckonfig-step-num {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--c-grey-200);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
    color: var(--c-grey-400);
    transition: all .2s; flex-shrink: 0;
}
.ckonfig-step-item.active .ckonfig-step-num {
    border-color: var(--c-black); background: var(--c-black); color: var(--c-white);
}
.ckonfig-step-item.done .ckonfig-step-num {
    border-color: var(--c-black); background: var(--c-black); color: var(--c-white);
}
.ckonfig-step-line { flex: 1; height: 2px; background: var(--c-grey-200); margin: 0 .75rem; min-width: 40px; }

/* Panels */
.ckonfig-panel { display: none; animation: fadeSlideUp .25s ease; }
.ckonfig-panel.active { display: block; }
.ckonfig-panel-header { margin-bottom: 1.5rem; }
.ckonfig-panel-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--c-accent, #3b82f6); margin-bottom: .4rem; }
.ckonfig-panel-header h2 { font-size: 1.75rem; font-weight: 900; letter-spacing: -.8px; margin: 0; }

/* Search */
.ckonfig-search-wrap {
    display: flex; align-items: center; gap: .6rem;
    border: 1.5px solid var(--c-grey-200); border-radius: 10px;
    padding: 0 .875rem; height: 44px; margin-bottom: 1.5rem;
    background: var(--c-white); transition: border-color .15s;
}
.ckonfig-search-wrap:focus-within { border-color: var(--c-black); }
.ckonfig-search-wrap .material-symbols-rounded { color: var(--c-grey-400); font-size: 20px; }
.ckonfig-search-wrap input { border: none; outline: none; font-family: var(--font); font-size: .9rem; flex: 1; color: var(--c-black); background: transparent; }

/* Breadcrumb */
.ckonfig-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
    padding: .75rem 1rem; background: var(--c-grey-50, #fafafa);
    border: 1px solid var(--c-grey-200); border-radius: 10px;
    margin-bottom: 1.25rem;
}
.ckonfig-bc-item { font-size: .85rem; font-weight: 600; color: var(--c-black); }

/* Brand Grid */
.ckonfig-brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .75rem;
}
.ckonfig-brand-card {
    display: flex; flex-direction: column; align-items: center; gap: .65rem;
    padding: 1rem .75rem;
    border: 1.5px solid var(--c-grey-200); border-radius: 12px;
    background: var(--c-white); cursor: pointer;
    transition: all .15s; font-family: var(--font);
}
.ckonfig-brand-card:hover { border-color: var(--c-black); box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-1px); }
body.carapi-page .ckonfig-brand-card img { width: 60px !important; height: 40px !important; max-width: 60px !important; max-height: 40px !important; object-fit: contain; flex-shrink: 0; margin: 0 auto; }
.ckonfig-brand-card span { font-size: .78rem; font-weight: 600; color: var(--c-grey-700); text-align: center; line-height: 1.2; }

/* List Items */
.ckonfig-list { display: flex; flex-direction: column; gap: .4rem; }
.ckonfig-list-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: .875rem 1rem;
    border: 1.5px solid var(--c-grey-200); border-radius: 10px;
    background: var(--c-white); cursor: pointer;
    font-family: var(--font); text-align: left; width: 100%;
    transition: all .15s; gap: 1rem;
}
.ckonfig-list-item:hover { border-color: var(--c-black); background: var(--c-grey-50, #fafafa); }
.ckonfig-li-name { font-size: .95rem; font-weight: 600; color: var(--c-black); flex-shrink: 0; }
.ckonfig-li-meta {
    display: flex; align-items: center; gap: .75rem;
    font-size: .78rem; color: var(--c-grey-500);
    flex-wrap: wrap; justify-content: flex-end;
}
.ckonfig-li-meta .material-symbols-rounded { font-size: 15px; vertical-align: middle; }
.ckonfig-ps-badge {
    background: var(--c-grey-100);
    padding: .15rem .5rem; border-radius: 5px;
    font-weight: 700; color: var(--c-grey-700);
    display: flex; align-items: center; gap: .2rem;
}
.ckonfig-ps-badge .material-symbols-rounded { font-size: 14px; }

/* No data */
.ckonfig-loading {
    display: flex; align-items: center; gap: .5rem;
    padding: 2rem; justify-content: center;
    color: var(--c-grey-500); font-size: .85rem;
}
.ckonfig-no-data {
    display: flex; align-items: center; gap: .6rem;
    color: var(--c-grey-500); font-size: .875rem;
    padding: 1.5rem; background: var(--c-grey-50, #fafafa);
    border-radius: 10px; border: 1px solid var(--c-grey-200);
}
.ckonfig-no-data .material-symbols-rounded { font-size: 20px; flex-shrink: 0; }

/* Result */
.ckonfig-result-wrap { animation: fadeSlideUp .3s ease; }
.ckonfig-result-success {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(34,197,94,.1); color: #15803d;
    font-size: .8rem; font-weight: 700;
    padding: .4rem 1rem; border-radius: var(--radius-full);
    margin-bottom: 1.5rem;
}
.ckonfig-result-icon { font-size: 18px !important; }
.ckonfig-result-header {
    display: flex; align-items: center; gap: 1.25rem;
    padding-bottom: 1.5rem; border-bottom: 1px solid var(--c-grey-200);
    margin-bottom: 1.5rem;
}
.ckonfig-result-header h2 { font-size: 1.5rem; font-weight: 900; letter-spacing: -.6px; margin: 0 0 .25rem; }
.ckonfig-result-sub { font-size: .85rem; color: var(--c-grey-500); }
.ckonfig-result-codes { display: flex; gap: .75rem; margin-left: auto; flex-shrink: 0; }
.ckonfig-code-box {
    display: flex; flex-direction: column; align-items: center;
    background: var(--c-grey-100); border-radius: 10px; padding: .6rem 1rem;
}
.ckonfig-code-box span { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--c-grey-500); }
.ckonfig-code-box strong { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ckonfig-result-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.ckonfig-spec { display: flex; align-items: flex-start; gap: .75rem; }
.ckonfig-spec .material-symbols-rounded { font-size: 20px; color: var(--c-grey-400); margin-top: .1rem; }
.ckonfig-spec label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--c-grey-500); display: block; margin-bottom: .1rem; }
.ckonfig-spec strong { font-size: .95rem; font-weight: 700; }
.ckonfig-result-api {
    background: var(--c-grey-50, #fafafa); border: 1px solid var(--c-grey-200);
    border-radius: 10px; padding: 1rem;
}
.ckonfig-api-note { font-size: .8rem; color: var(--c-grey-500); margin: .5rem 0 0; }
.ckonfig-locked {
    display: inline-flex; align-items: center; gap: .3rem;
    color: var(--c-grey-400); filter: blur(3px); user-select: none;
}
.ckonfig-locked em { font-style: normal; }
.ckonfig-locked-cta {
    display: flex; align-items: center; gap: .5rem;
    margin-top: 1rem; padding: .75rem 1rem;
    background: var(--c-white); border: 1px dashed var(--c-grey-300);
    border-radius: 10px; font-size: .8rem; color: var(--c-grey-600);
}
.ckonfig-locked-cta .material-symbols-rounded { font-size: 18px; color: var(--c-accent); }
.ckonfig-locked-cta a { margin-left: auto; font-weight: 700; color: var(--c-accent); text-decoration: none; white-space: nowrap; }
.ckonfig-locked-cta a:hover { text-decoration: underline; }
.ckonfig-restart {
    display: flex; align-items: center; gap: .4rem;
    margin-top: 2rem; padding: .75rem 1.5rem;
    border: 1.5px solid var(--c-grey-200); border-radius: var(--radius-full);
    background: var(--c-white); cursor: pointer;
    font-family: var(--font); font-size: .875rem; font-weight: 600;
    transition: all .15s;
}
.ckonfig-restart:hover { border-color: var(--c-black); background: var(--c-grey-50, #fafafa); }
.ckonfig-restart .material-symbols-rounded { font-size: 18px; }

/* ═══════════════════════════════════════════════════════════════
   DEMO TABELLE
   ═══════════════════════════════════════════════════════════════ */
.ctable-section { padding: 2rem 0 5rem; }
.ctable-filters {
    display: flex; align-items: center; gap: .75rem;
    flex-wrap: wrap; margin-bottom: 1.25rem;
}
.ctable-filter-field {
    display: flex; align-items: center; gap: .5rem;
    height: 38px; padding: 0 .875rem;
    border: 1.5px solid var(--c-grey-200); border-radius: 8px;
    background: var(--c-white); flex: 1; min-width: 180px;
    transition: border-color .15s;
}
.ctable-filter-field:focus-within { border-color: var(--c-black); }
.ctable-filter-field .material-symbols-rounded { color: var(--c-grey-400); font-size: 18px; flex-shrink: 0; }
.ctable-filter-field input { border: none; outline: none; font-family: var(--font); font-size: .875rem; flex: 1; background: transparent; }
.ctable-filters select {
    height: 38px; padding: 0 .75rem;
    border: 1.5px solid var(--c-grey-200); border-radius: 8px;
    font-family: var(--font); font-size: .875rem;
    background: var(--c-white); color: var(--c-black); cursor: pointer;
    outline: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .5rem center;
    padding-right: 2rem;
}
.ctable-filter-reset {
    display: flex; align-items: center; gap: .3rem;
    height: 38px; padding: 0 1rem;
    border: 1.5px solid var(--c-grey-200); border-radius: 8px;
    background: var(--c-white); cursor: pointer;
    font-family: var(--font); font-size: .8rem; font-weight: 600; color: var(--c-grey-600);
    transition: all .15s;
}
.ctable-filter-reset:hover { border-color: var(--c-black); color: var(--c-black); }
.ctable-filter-reset .material-symbols-rounded { font-size: 16px; }
.ctable-count { font-size: .8rem; font-weight: 600; color: var(--c-grey-500); white-space: nowrap; margin-left: auto; }

.ctable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-grey-200); border-radius: 12px; }
.ctable { width: 100%; border-collapse: collapse; }
.ctable-th {
    padding: .75rem 1rem;
    background: var(--c-grey-50, #fafafa);
    border-bottom: 1px solid var(--c-grey-200);
    font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    color: var(--c-grey-600); text-align: left; white-space: nowrap;
    user-select: none; position: relative;
}
.ctable-th.sorted { color: var(--c-black); }
.ctable-th-center { text-align: center !important; }
.ctable-th-right { text-align: right !important; }
.ctable-sort-icon { font-size: 16px !important; vertical-align: middle; color: var(--c-grey-400); }
.ctable-row { border-bottom: 1px solid var(--c-grey-100); cursor: pointer; transition: background .1s; }
.ctable-row:last-child { border-bottom: none; }
.ctable-row:hover { background: var(--c-grey-50, #fafafa); }
.ctable-row.selected { background: rgba(59,130,246,.04); }
.ctable-row td { padding: .75rem 1rem; font-size: .875rem; color: var(--c-black); white-space: nowrap; }
.ctable-brand-cell { display: flex; align-items: center; gap: .8rem; font-weight: 500; }
body.carapi-page .ctable-brand-cell img { width: 28px !important; height: 28px !important; object-fit: contain; flex-shrink: 0; }
.ctable-model { font-weight: 600; }
.ctable-code code {
    font-family: 'SF Mono','Fira Code',monospace;
    font-size: .78rem; background: var(--c-grey-100);
    padding: .15rem .45rem; border-radius: 5px;
}
.ctable-td-center { text-align: center; }
.ctable-td-right { text-align: right; }
.ctable-ps {
    font-weight: 700; background: var(--c-grey-100);
    padding: .15rem .5rem; border-radius: 5px; font-size: .82rem;
}
.ctable-empty {
    display: none; flex-direction: column; align-items: center;
    gap: .75rem; padding: 4rem 2rem; color: var(--c-grey-400);
    text-align: center;
}
.ctable-empty .material-symbols-rounded { font-size: 40px; }

/* Detail Panel */
.cdetail-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 9998;
    opacity: 0; visibility: hidden;
    transition: all .25s;
}
.cdetail-overlay.active { opacity: 1; visibility: visible; }
.cdetail-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 420px; max-width: 95vw;
    background: var(--c-white);
    box-shadow: -8px 0 40px rgba(0,0,0,.15);
    z-index: 9999;
    padding: 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.cdetail-panel.open { transform: translateX(0); }
.cdetail-close {
    position: absolute; top: 1rem; right: 1rem;
    width: 36px; height: 36px;
    background: var(--c-grey-100); border: none;
    border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.cdetail-close:hover { background: var(--c-grey-200); }
.cdetail-head {
    display: flex; align-items: center; gap: 1rem;
    padding-bottom: 1.25rem; border-bottom: 1px solid var(--c-grey-200);
    margin: 2rem 0 1.5rem;
}
.cdetail-logo { height: 28px; max-height: 28px; width: auto; max-width: 60px; object-fit: contain; }
.cdetail-head h2 { font-size: 1.1rem; font-weight: 800; letter-spacing: -.4px; margin: 0 0 .2rem; }
.cdetail-head span { font-size: .8rem; color: var(--c-grey-500); }
.cdetail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.cdetail-field { display: flex; flex-direction: column; gap: .2rem; }
.cdetail-field label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--c-grey-500); }
.cdetail-field strong { font-size: .95rem; font-weight: 700; }
.cdetail-api { background: var(--c-grey-50, #fafafa); border: 1px solid var(--c-grey-200); border-radius: 10px; padding: 1rem; }

/* Responsive */
/* 4-Step Dropdown Modellsuche */
.cdemo-step-row {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    transition: opacity .2s;
}
.cdemo-step-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-grey-500);
}
.cdemo-select-wrap { position: relative; }
.cdemo-step-search {
    width: 100%;
    height: 42px;
    padding: 0 .875rem;
    border: 1.5px solid var(--c-grey-200);
    border-radius: 10px;
    font-family: var(--font);
    font-size: .875rem;
    color: var(--c-black);
    background: var(--c-white);
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
}
.cdemo-step-search:not(:disabled):focus { border-color: var(--c-black); }
.cdemo-step-search:disabled { background: var(--c-grey-50, #fafafa); cursor: not-allowed; }
.cdemo-dropdown-list {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--c-white);
    border: 1.5px solid var(--c-grey-200);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    max-height: 220px;
    overflow-y: auto;
    z-index: 500;
    padding: .3rem;
}
.cdemo-dropdown-list.open { display: block; }
.cdemo-dd-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: .5rem .75rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font);
    font-size: .875rem;
    font-weight: 600;
    color: var(--c-black);
    text-align: left;
    transition: background .1s;
    gap: .1rem;
}
.cdemo-dd-item:hover { background: var(--c-grey-100); }
.cdemo-dd-sub {
    font-size: .72rem;
    font-weight: 400;
    color: var(--c-grey-500);
}
.cdemo-dd-empty {
    padding: .75rem;
    font-size: .8rem;
    color: var(--c-grey-400);
    text-align: center;
}

@media (max-width: 900px) {

    .cdemo-split { grid-template-columns: 1fr; }
    .cdemo-code-col { position: static; }
    .cdemo-nav-cards { grid-template-columns: 1fr; }
    .ckonfig-result-header { flex-wrap: wrap; }
    .ckonfig-result-codes { margin-left: 0; }
    .ckonfig-brand-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}
@media (max-width: 600px) {
    .cdemo-input-row { flex-direction: column; }
    .cdemo-field input { width: 100% !important; }
    .cdemo-steps { flex-direction: column; }
    .cdemo-step-arrow { display: none; }
    .ckonfig-list-item { flex-direction: column; align-items: flex-start; }
    .ckonfig-li-meta { justify-content: flex-start; }
    .ckonfig-result-specs { grid-template-columns: 1fr; }
    .ctable-filters { flex-direction: column; align-items: stretch; }
    .ctable-count { margin-left: 0; }
    .ctable-swipe-hint { display: block !important; }
}


/* ===============================================================
   CONTACT PAGE
   =============================================================== */

.carapi-contact-hero {
    padding: 6rem 0 3rem;
    text-align: center;
}
.carapi-contact-headline {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin: 1rem 0;
    color: var(--c-black);
}
.carapi-contact-headline em {
    font-style: normal;
    color: var(--c-accent);
    
    
    
}
.carapi-contact-sub {
    font-size: 1.15rem;
    color: var(--c-grey-500);
    max-width: 520px;
    margin: 0 auto;
}

.carapi-contact-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: start;
}

/* Form */
.carapi-contact-form-wrap {
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: 12px;
    padding: 2rem;
}
.carapi-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.carapi-form-group {
    margin-bottom: 1.25rem;
}
.carapi-form-group label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--c-grey-700);
    margin-bottom: .35rem;
}
.carapi-form-group label .required { color: #ef4444; }
.carapi-form-group input,
.carapi-form-group select,
.carapi-form-group textarea {
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid var(--c-grey-200);
    border-radius: 8px;
    font-family: var(--font);
    font-size: .95rem;
    background: var(--c-grey-50);
    color: var(--c-black);
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.carapi-form-group input:focus,
.carapi-form-group select:focus,
.carapi-form-group textarea:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    background: var(--c-white);
}
.carapi-form-group textarea { resize: vertical; min-height: 120px; }
.carapi-form-group select { cursor: pointer; }

.carapi-contact-submit {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 2rem;
    background: var(--c-black);
    color: var(--c-white);
    border: none;
    border-radius: 8px;
    font-family: var(--font);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .1s;
}
.carapi-contact-submit:hover { background: var(--c-grey-900); }
.carapi-contact-submit:active { transform: scale(.98); }
.carapi-contact-submit:disabled { opacity: .6; cursor: wait; }

.cf-submit-loading { display: inline-flex; align-items: center; gap: .4rem; }

.carapi-contact-result {
    margin-top: 1rem;
    padding: .75rem 1rem;
    border-radius: 8px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.carapi-contact-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.carapi-contact-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

@keyframes carapiSpin { to { transform: rotate(360deg); } }
.carapi-spin { animation: carapiSpin .8s linear infinite; }

/* Info Sidebar */
.carapi-contact-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.carapi-contact-info-card {
    background: var(--c-grey-50);
    border: 1px solid var(--c-grey-200);
    border-radius: 12px;
    padding: 1.25rem;
}
.carapi-contact-info-card .material-symbols-rounded {
    font-size: 24px;
    color: var(--c-accent);
    margin-bottom: .5rem;
    display: block;
}
.carapi-contact-info-card h3 {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .25rem;
    color: var(--c-black);
}
.carapi-contact-info-card p {
    font-size: .85rem;
    color: var(--c-grey-500);
    margin: 0;
    line-height: 1.5;
}
.carapi-contact-info-card a {
    color: var(--c-accent);
    text-decoration: none;
    font-weight: 500;
}

@media (max-width: 768px) {
    .carapi-contact-grid { grid-template-columns: 1fr; }
    .carapi-form-row { grid-template-columns: 1fr; }
    .carapi-contact-hero { padding: 4rem 0 2rem; }
}

/* ===============================================================
   CONTACT PAGE
   =============================================================== */

.carapi-contact-hero {
    padding: 6rem 0 3rem;
    text-align: center;
}
.carapi-contact-headline {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin: 1rem 0;
    color: var(--c-black);
}
.carapi-contact-headline em {
    font-style: normal;
    color: var(--c-accent);
    
    
    
}
.carapi-contact-sub {
    font-size: 1.15rem;
    color: var(--c-grey-500);
    max-width: 520px;
    margin: 0 auto;
}

.carapi-contact-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: start;
}

/* Form */
.carapi-contact-form-wrap {
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: 12px;
    padding: 2rem;
}
.carapi-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.carapi-form-group {
    margin-bottom: 1.25rem;
}
.carapi-form-group label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--c-grey-700);
    margin-bottom: .35rem;
}
.carapi-form-group label .required { color: #ef4444; }
.carapi-form-group input,
.carapi-form-group select,
.carapi-form-group textarea {
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid var(--c-grey-200);
    border-radius: 8px;
    font-family: var(--font);
    font-size: .95rem;
    background: var(--c-grey-50);
    color: var(--c-black);
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.carapi-form-group input:focus,
.carapi-form-group select:focus,
.carapi-form-group textarea:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    background: var(--c-white);
}
.carapi-form-group textarea { resize: vertical; min-height: 120px; }
.carapi-form-group select { cursor: pointer; }

.carapi-contact-submit {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 2rem;
    background: var(--c-black);
    color: var(--c-white);
    border: none;
    border-radius: 8px;
    font-family: var(--font);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .1s;
}
.carapi-contact-submit:hover { background: var(--c-grey-900); }
.carapi-contact-submit:active { transform: scale(.98); }
.carapi-contact-submit:disabled { opacity: .6; cursor: wait; }

.cf-submit-loading { display: inline-flex; align-items: center; gap: .4rem; }

.carapi-contact-result {
    margin-top: 1rem;
    padding: .75rem 1rem;
    border-radius: 8px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.carapi-contact-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.carapi-contact-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

@keyframes carapiSpin { to { transform: rotate(360deg); } }
.carapi-spin { animation: carapiSpin .8s linear infinite; }

/* Info Sidebar */
.carapi-contact-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.carapi-contact-info-card {
    background: var(--c-grey-50);
    border: 1px solid var(--c-grey-200);
    border-radius: 12px;
    padding: 1.25rem;
}
.carapi-contact-info-card .material-symbols-rounded {
    font-size: 24px;
    color: var(--c-accent);
    margin-bottom: .5rem;
    display: block;
}
.carapi-contact-info-card h3 {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .25rem;
    color: var(--c-black);
}
.carapi-contact-info-card p {
    font-size: .85rem;
    color: var(--c-grey-500);
    margin: 0;
    line-height: 1.5;
}
.carapi-contact-info-card a {
    color: var(--c-accent);
    text-decoration: none;
    font-weight: 500;
}

@media (max-width: 768px) {
    .carapi-contact-grid { grid-template-columns: 1fr; }
    .carapi-form-row { grid-template-columns: 1fr; }
    .carapi-contact-hero { padding: 4rem 0 2rem; }
}

/* ═════════════════════════════════════════════════════════════════
   FOOTER (DARK & MODERN)
   ═════════════════════════════════════════════════════════════════ */
/* Black overscroll background */
html {
    background-color: #0a0a0a;
}

.carapi-footer {
    background-color: #f5f5f5 !important;
    color: #374151 !important;
    padding: 5rem 0 0;
    font-size: 0.9rem;
    border-top: 1px solid #e5e7eb !important;
}

.carapi-footer .carapi-container {
    max-width: 1200px;
}

.carapi-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 0;
    padding-bottom: 2.5rem;
}

.carapi-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.carapi-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: #0f172a;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -.5px;
}

.carapi-footer-logo img,
.carapi-footer-logo svg {
    height: 22px;
    width: auto;
    filter: none;
}

.carapi-footer-brand p {
    color: #64748b;
    line-height: 1.6;
    margin: 0;
    font-size: .82rem;
    max-width: 250px;
}

/* Social icons */
.carapi-footer-social {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .25rem;
}

.carapi-footer-social a {
    color: #94a3b8;
    transition: color .2s;
}

.carapi-footer-social a:hover {
    color: #0f172a;
}

/* EU Order Withdrawal Button — sits inline next to the contact icon,
   styled as a real (but compact) pill button matching the site's outline
   button language instead of WooCommerce's default green button. */
a.carapi-footer-withdrawal-btn {
    display: inline-flex !important;
    align-items: center !important;
    height: 34px !important;
    line-height: 32px !important;
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 999px !important;
    padding: 0 .9rem !important;
    margin: 0 !important;
    float: none !important;
    font-family: var(--font) !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-decoration: none !important;
    transition: all .2s ease !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}
a.carapi-footer-withdrawal-btn:hover {
    background: #111111 !important;
    border-color: #111111 !important;
    color: #fff !important;
}

/* Link columns */
.carapi-footer-links h4 {
    color: #111111 !important;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 1.25rem;
}

.carapi-footer-links a {
    display: block;
    color: #6b7280 !important;
    text-decoration: none !important;
    margin-bottom: .7rem;
    transition: color .15s;
    font-size: .82rem;
    font-weight: 400;
}

.carapi-footer-links a:hover {
    color: #111111 !important;
}

/* Payment badges */
.carapi-footer-payments {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.carapi-pay-icon {
    height: 16px !important;
    max-height: 16px !important;
    width: auto !important;
    opacity: .35;
    filter: brightness(0) invert(.45);
    transition: opacity .2s;
}

.carapi-pay-icon:hover {
    opacity: .7;
}

/* Footer CTA */
body.carapi-page .carapi-footer-cta,
.carapi-footer-cta {
    display: inline-block !important;
    padding: .55rem 1.5rem !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    border-radius: var(--radius-full) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    transition: all var(--transition) !important;
    margin-top: .5rem !important;
    background: transparent !important;
}

body.carapi-page .carapi-footer-cta:hover,
.carapi-footer-cta:hover {
    background: rgba(255,255,255,.1) !important;
    border-color: rgba(255,255,255,.6) !important;
    color: #ffffff !important;
}
/* AI Section */
.carapi-footer-ai {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 1.5rem 0;
    border-top: 1px solid #e5e7eb;
}

.carapi-footer-ai-label {
    font-size: .75rem;
    color: #9ca3af;
    font-weight: 500;
    white-space: nowrap;
}

.carapi-footer-ai-logos {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.carapi-footer-ai-logos a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #9ca3af !important;
    text-decoration: none !important;
    font-size: .72rem;
    font-weight: 500;
    transition: color .2s;
}

.carapi-footer-ai-logos a:hover {
    color: #374151 !important;
}

/* Copyright bar */
.carapi-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0 2rem;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: .75rem;
}

/* Left: copyright + weblabs */
.carapi-footer-copy {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    color: #94a3b8;
    flex-wrap: wrap;
}
.carapi-footer-copy span {
    color: #94a3b8;
}
.carapi-footer-heart {
    color: #f43f5e;
}

.carapi-footer-weblabs {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    text-decoration: none;
    color: #64748b;
    font-size: .72rem;
    font-weight: 600;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: .15rem .45rem .15rem .3rem;
    transition: all .15s ease;
    line-height: 1;
}
.carapi-footer-weblabs:hover {
    border-color: #94a3b8;
    color: #0f172a;
}
.carapi-footer-weblabs img {
    border-radius: 3px;
    display: block;
}

/* Right: payments + legal in one row */
.carapi-footer-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
}

.carapi-footer-payments {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: nowrap;
}

.carapi-footer-legal {
    display: flex;
    gap: 1.25rem;
    justify-content: flex-end;
}

.carapi-footer-legal a {
    font-size: .72rem;
    color: #94a3b8;
    text-decoration: none;
    transition: color .15s;
}
.carapi-footer-legal a:hover {
    color: #0f172a;
}

/* Responsive */
@media (max-width: 900px) {
    .carapi-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .carapi-footer-brand {
        grid-column: 1 / -1;
        margin-bottom: 1rem;
    }
}

@media (max-width: 600px) {
    .carapi-footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .carapi-footer-links h4 { margin-bottom: .75rem; }
    .carapi-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    /* Right column: stack legal + payments vertically */
    .carapi-footer-right {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
        width: 100%;
    }
    .carapi-footer-legal {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: .75rem 1rem;
    }
    .carapi-footer-payments {
        flex-wrap: wrap;
        gap: .5rem;
    }
    /* AI logos smaller on mobile */
    .carapi-footer-ai-logos {
        gap: .6rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .carapi-footer-ai-logos a {
        font-size: .65rem;
        gap: .2rem;
    }
    .carapi-footer-ai-logos a svg {
        width: 13px;
        height: 13px;
    }
    .carapi-footer-ai-label {
        font-size: .68rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BLOG — Archive + Single
   ═══════════════════════════════════════════════════════════════ */

/* Archive hero */
.carapi-blog-archive {
    padding-top: 8rem;
    padding-bottom: 4rem;
}

.carapi-blog-hero {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 4rem;
}

.carapi-blog-hero h1 {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -1px;
    margin: .75rem 0 1rem;
    color: var(--c-black);
}

.carapi-blog-hero p {
    color: var(--c-grey-500);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Cards grid */
.carapi-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.carapi-blog-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-grey-200);
    overflow: hidden;
    transition: box-shadow .25s, transform .25s;
    background: var(--c-white);
}

.carapi-blog-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,.06);
    transform: translateY(-2px);
}

.carapi-blog-card-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
}

.carapi-blog-card-img {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--c-grey-100);
}

.carapi-blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.carapi-blog-card:hover .carapi-blog-card-img img {
    transform: scale(1.03);
}

.carapi-blog-card-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.carapi-blog-card-img--placeholder .material-symbols-rounded {
    font-size: 2.5rem;
    color: var(--c-grey-300);
}

.carapi-blog-card-body {
    padding: 1.5rem;
}

.carapi-blog-card-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .72rem;
    color: var(--c-grey-400);
    margin-bottom: .75rem;
}

.carapi-blog-card-cat {
    background: var(--c-accent-light, #eef2ff);
    color: var(--c-accent);
    font-size: .65rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.carapi-blog-card-body h2 {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 .5rem;
    letter-spacing: -.3px;
    color: var(--c-black);
}

.carapi-blog-card-body p {
    font-size: .85rem;
    color: var(--c-grey-500);
    line-height: 1.55;
    margin: 0;
}

.carapi-blog-card-read {
    display: inline-block;
    margin-top: 1rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--c-accent);
}

/* Pagination */
.carapi-blog-pagination {
    margin-top: 3rem;
    text-align: center;
}

.carapi-blog-pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: .5rem;
}

.carapi-blog-pagination a,
.carapi-blog-pagination span.current {
    padding: .5rem 1rem;
    font-size: .8rem;
    border-radius: var(--radius-md);
    text-decoration: none;
}

.carapi-blog-pagination a {
    color: var(--c-grey-600);
    border: 1px solid var(--c-grey-200);
    transition: all .15s;
}

.carapi-blog-pagination a:hover {
    background: var(--c-grey-100);
}

.carapi-blog-pagination span.current {
    background: var(--c-black);
    color: var(--c-white);
    border: 1px solid var(--c-black);
}

/* ──────── Single post ──────── */
.carapi-blog-single {
    padding-top: 8rem;
    padding-bottom: 4rem;
}

/* 2-column outer grid */
.carapi-blog-single-outer {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
    align-items: start;
}

/* Main content column */
.carapi-blog-single-main {
    min-width: 0;
}

.carapi-blog-single-header {
    margin-bottom: 2.5rem;
}

.carapi-blog-single-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .78rem;
    color: var(--c-grey-400);
    margin-bottom: 1rem;
}

.carapi-blog-single-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.2;
    color: var(--c-black);
    margin: 0;
}

.carapi-blog-single-excerpt {
    font-size: 1.15rem;
    color: var(--c-grey-500);
    line-height: 1.6;
    margin-top: 1rem;
}

.carapi-blog-single-hero-img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 2rem;
}

.carapi-blog-single-hero-img img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Blog body prose */
.carapi-blog-single-body {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--c-grey-700);
}

.carapi-blog-single-body h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 2.5rem 0 1rem;
    letter-spacing: -.5px;
    color: var(--c-black);
}

.carapi-blog-single-body h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 2rem 0 .75rem;
    color: var(--c-black);
}

.carapi-blog-single-body p {
    margin-bottom: 1.25rem;
}

.carapi-blog-single-body ul,
.carapi-blog-single-body ol {
    margin: 1rem 0 1.5rem 1.25rem;
}

.carapi-blog-single-body li {
    margin-bottom: .4rem;
}

.carapi-blog-single-body blockquote {
    border-left: 3px solid var(--c-accent);
    padding: .75rem 1.25rem;
    margin: 1.5rem 0;
    background: var(--c-grey-50, #f9fafb);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--c-grey-600);
    font-style: italic;
}

.carapi-blog-single-body code {
    background: var(--c-grey-100);
    padding: .15rem .4rem;
    border-radius: 4px;
    font-size: .9em;
}

.carapi-blog-single-body pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1.25rem;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 1.5rem 0;
    font-size: .85rem;
    line-height: 1.6;
}

.carapi-blog-single-body pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* Post navigation */
.carapi-blog-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--c-grey-200);
}

.carapi-blog-post-nav-link {
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    transition: background .15s;
}

.carapi-blog-post-nav-link:hover {
    background: var(--c-grey-100);
}

.carapi-blog-post-nav-next {
    text-align: right;
}

.carapi-blog-post-nav-label {
    font-size: .72rem;
    color: var(--c-grey-400);
    font-weight: 500;
}

.carapi-blog-post-nav-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--c-black);
}

/* CTA at bottom */
.carapi-blog-single-cta {
    margin-top: 3rem;
    padding: 2.5rem;
    background: var(--c-black);
    border-radius: var(--radius-lg);
    text-align: center;
}

.carapi-blog-single-cta h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    color: #fff;
}

.carapi-blog-single-cta p {
    color: var(--c-grey-400);
    font-size: .9rem;
    margin: 0 0 1.5rem;
}

.carapi-blog-single-cta-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* CTA Button Styles */
.carapi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--font);
    font-size: .88rem;
    font-weight: 700;
    padding: .7rem 1.5rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all .2s ease;
    cursor: pointer;
    border: none;
    line-height: 1.4;
}

.carapi-btn--primary {
    background: var(--c-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.carapi-btn--primary:hover {
    background: var(--c-accent-hover, #1a1a1a);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    color: #fff;
    text-decoration: none;
}

.carapi-btn--outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.3);
}

.carapi-btn--outline:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.5);
    color: #fff;
    text-decoration: none;
}

.carapi-btn--full {
    width: 100%;
}

/* ── Sticky Sidebar ─────────────────────────────────────────────── */
.carapi-blog-single-sidebar {
    min-width: 0;
}

.carapi-blog-sidebar-sticky {
    position: sticky;
    top: 6rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.carapi-blog-sidebar-cta {
    background: var(--c-black);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    text-align: center;
}

.carapi-sidebar-cta-icon {
    font-size: 2rem;
    color: var(--c-accent);
    margin-bottom: .5rem;
    display: block;
}

.carapi-blog-sidebar-cta h4 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 .5rem;
    letter-spacing: -.3px;
}

.carapi-blog-sidebar-cta p {
    font-size: .82rem;
    color: var(--c-grey-400);
    line-height: 1.5;
    margin: 0 0 1.25rem;
}

.carapi-blog-sidebar-cta .carapi-btn {
    font-size: .82rem;
    padding: .6rem 1rem;
}

.carapi-blog-sidebar-cta .carapi-btn + .carapi-btn {
    margin-top: .5rem;
}

.carapi-blog-sidebar-cta .carapi-btn--outline {
    border-color: rgba(255,255,255,.2);
    color: rgba(255,255,255,.7);
}

.carapi-blog-sidebar-links {
    background: var(--c-grey-50, #f9fafb);
    border: 1px solid var(--c-grey-200);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.carapi-blog-sidebar-links h5 {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-grey-400);
    font-weight: 700;
    margin: 0 0 .75rem;
}

.carapi-blog-sidebar-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.carapi-blog-sidebar-links li {
    margin-bottom: .4rem;
}

.carapi-blog-sidebar-links a {
    font-size: .85rem;
    color: var(--c-grey-600);
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem 0;
    transition: color .15s;
}

.carapi-blog-sidebar-links a:hover {
    color: var(--c-black);
}

/* Responsive blog */
@media (max-width: 1024px) {
    .carapi-blog-single-outer {
        grid-template-columns: 1fr;
    }
    /* Sidebar BELOW content on tablet/mobile */
    .carapi-blog-single-sidebar {
        order: 1;
    }
    .carapi-blog-sidebar-sticky {
        position: static;
        flex-direction: row;
        gap: 1rem;
    }
    .carapi-blog-sidebar-cta,
    .carapi-blog-sidebar-links {
        flex: 1;
    }
}

@media (max-width: 640px) {
    .carapi-blog-sidebar-sticky {
        flex-direction: column;
    }
    /* Links zuerst, dann CTA — vermeidet 2 dunkle CTAs hintereinander */
    .carapi-blog-sidebar-links {
        order: -1;
    }
    .carapi-blog-sidebar-cta {
        order: 1;
    }
}

@media (max-width: 768px) {
    .carapi-blog-grid {
        grid-template-columns: 1fr;
    }
    .carapi-blog-single-header h1 {
        font-size: 1.75rem;
    }
    .carapi-blog-post-nav {
        grid-template-columns: 1fr;
    }
    .carapi-blog-sidebar-sticky {
        flex-direction: column;
    }
}

/* ═══════════════════════════════════════════════════════════
   GUTACHTEN UPLOAD
   ═══════════════════════════════════════════════════════════ */
.carapi-gutachten-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    align-items: start;
}

.carapi-gutachten-upload-wrap .carapi-upload-box {
    border: 1px solid var(--c-grey-200);
    border-radius: 16px;
    padding: 2rem;
    background: #fff;
}

.carapi-gutachten-upload-wrap .carapi-upload-drop {
    border: 2px dashed var(--c-grey-300);
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: var(--c-grey-50);
    cursor: pointer;
    transition: all .2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

.carapi-gutachten-upload-wrap .carapi-upload-drop:hover {
    border-color: var(--c-grey-400);
    background: var(--c-grey-100);
}

.carapi-gutachten-upload-wrap .carapi-upload-drop.is-drag {
    border-color: #6366f1;
    background: #eef2ff;
}

.carapi-gutachten-upload-wrap .carapi-upload-drop strong {
    font-size: 1rem;
    color: var(--c-black);
}

.carapi-gutachten-upload-wrap .carapi-upload-drop span {
    font-size: .85rem;
    color: var(--c-grey-500);
}

.carapi-gutachten-upload-wrap .carapi-upload-note {
    width: 100%;
    min-height: 80px;
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--c-grey-200);
    border-radius: 10px;
    font-family: inherit;
    font-size: .875rem;
    color: var(--c-black);
    background: var(--c-grey-50);
    resize: vertical;
    transition: border-color .2s ease;
}

.carapi-gutachten-upload-wrap .carapi-upload-note:focus {
    outline: none;
    border-color: var(--c-black);
    background: #fff;
}

.carapi-gutachten-upload-wrap .carapi-upload-note::placeholder {
    color: var(--c-grey-400);
}

.carapi-gutachten-upload-wrap .carapi-upload-list {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.carapi-gutachten-upload-wrap .carapi-upload-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--c-grey-200);
    border-radius: 8px;
    margin-bottom: .5rem;
    background: var(--c-grey-50);
    font-size: .85rem;
}

.carapi-gutachten-upload-wrap .carapi-upload-list li span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.carapi-gutachten-upload-wrap .carapi-upload-list li button {
    background: none;
    border: none;
    color: var(--c-grey-400);
    cursor: pointer;
    font-size: .8rem;
    padding: .25rem .5rem;
    border-radius: 6px;
    transition: all .15s ease;
    white-space: nowrap;
}

.carapi-gutachten-upload-wrap .carapi-upload-list li button:hover {
    color: #ef4444;
    background: #fef2f2;
}

.carapi-gutachten-upload-wrap .carapi-upload-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.carapi-gutachten-upload-wrap .carapi-upload-actions .button-primary,
.carapi-gutachten-upload-wrap .carapi-upload-actions button[data-submit] {
    background: var(--c-black);
    color: #fff;
    border: none;
    padding: .75rem 2rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
}

.carapi-gutachten-upload-wrap .carapi-upload-actions button[data-submit]:hover:not(:disabled) {
    background: var(--c-grey-800);
    transform: translateY(-1px);
}

.carapi-gutachten-upload-wrap .carapi-upload-actions button[data-submit]:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.carapi-gutachten-upload-wrap .carapi-upload-status {
    font-size: .8rem;
    color: var(--c-grey-500);
}

.carapi-gutachten-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (max-width: 768px) {
    .carapi-gutachten-grid {
        grid-template-columns: 1fr;
    }
}

/* ═════════════════════════════════════════════════════════════════
   CHECKOUT / AUTH — shared by /subscribe, /register, /login
   Moved here from page-carapi-subscribe.php's inline <style> so the
   standalone /register and /login pages can use the same classes
   without depending on that template being loaded first.
   ═════════════════════════════════════════════════════════════════ */
.carapi-checkout-page {
    background-color: var(--c-grey-50);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.carapi-checkout-header {
    background: #fff;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--c-grey-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.carapi-checkout-main {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 0;
}
.carapi-checkout-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
}
.carapi-checkout-box {
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.03);
    border: 1px solid var(--c-grey-200);
}
.carapi-checkout-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.5px;
    margin-bottom: 2rem;
    color: var(--c-black);
}
.carapi-order-summary {
    background: var(--c-grey-50);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}
.carapi-order-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    color: var(--c-grey-700);
}
.carapi-order-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--c-grey-200);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--c-black);
}
.carapi-order-total small {
    font-size: .7rem;
    font-weight: 600;
    color: var(--c-grey-500);
    margin-left: .25rem;
}

.carapi-plan-card {
    border: 1px solid var(--c-grey-200);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.carapi-plan-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--c-grey-200);
}
.carapi-plan-card-name {
    font-size: 1rem;
    font-weight: 800;
    color: var(--c-black);
}
.carapi-plan-card-price {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--c-black);
    white-space: nowrap;
}
.carapi-plan-card-price small {
    font-size: .7rem;
    font-weight: 600;
    color: var(--c-grey-500);
    margin-left: .15rem;
}
.carapi-plan-card-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.carapi-plan-card-bullets li {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .85rem;
    color: var(--c-grey-700);
}
.carapi-plan-card-bullets svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--c-accent);
}
.carapi-legal-text {
    font-size: .75rem;
    color: var(--c-grey-500);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.carapi-legal-text a {
    color: var(--c-accent);
    text-decoration: underline;
}
.carapi-consent-check {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--c-grey-600);
    margin-bottom: 1.25rem;
    cursor: pointer;
}
.carapi-consent-check input {
    margin-top: .2rem;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--c-accent);
    cursor: pointer;
}
.carapi-consent-check a {
    color: var(--c-accent);
    text-decoration: underline;
}
.carapi-btn-pay:disabled,
.carapi-express-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}
.carapi-btn-pay {
    width: 100%;
    padding: 1.25rem;
    font-size: 1.1rem;
    display: flex;
    justify-content: center;
    gap: .5rem;
}
.carapi-btn-pay .carapi-loader {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: carapi-spin 1s linear infinite;
}
.carapi-btn-pay.loading .carapi-loader {
    display: block;
}
.carapi-btn-pay.loading span.btn-text {
    display: none;
}
@keyframes carapi-spin { 100% { transform: rotate(360deg); } }

.carapi-coupon-section {
    margin-bottom: 1.5rem;
}
.carapi-coupon-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: var(--c-accent);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    font-weight: 600;
    transition: opacity 0.2s;
}
.carapi-coupon-toggle:hover {
    opacity: 0.8;
}
.carapi-coupon-toggle .material-symbols-rounded {
    font-size: 18px;
    transition: transform 0.3s ease;
}
.carapi-coupon-toggle.active .material-symbols-rounded {
    transform: rotate(180deg);
}
.carapi-coupon-form {
    display: none;
    margin-top: .75rem;
    animation: carapi-coupon-slide-in 0.3s ease;
}
.carapi-coupon-form.visible {
    display: flex;
    gap: .5rem;
}
@keyframes carapi-coupon-slide-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.carapi-coupon-input {
    flex: 1;
    padding: .7rem 1rem;
    font-size: .9rem;
    border: 1px solid var(--c-grey-300);
    border-radius: 8px;
    background: var(--c-grey-50);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.carapi-coupon-input:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.carapi-coupon-input.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.carapi-coupon-input.success {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}
.carapi-coupon-apply {
    padding: .7rem 1.25rem;
    font-size: .85rem;
    font-weight: 700;
    border: 1px solid var(--c-accent);
    background: transparent;
    color: var(--c-accent);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: inherit;
}
.carapi-coupon-apply:hover {
    background: var(--c-accent);
    color: #fff;
}
.carapi-coupon-apply:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.carapi-coupon-message {
    font-size: .8rem;
    margin-top: .5rem;
    display: none;
}
.carapi-coupon-message.visible {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.carapi-coupon-message.success {
    color: #22c55e;
}
.carapi-coupon-message.error {
    color: #ef4444;
}
.carapi-coupon-applied {
    display: none;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    padding: .6rem 1rem;
    background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(34,197,94,0.04));
    border: 1px solid rgba(34,197,94,0.3);
    border-radius: 8px;
    font-size: .85rem;
    color: #16a34a;
    font-weight: 600;
}
.carapi-coupon-applied.visible {
    display: flex;
}
.carapi-coupon-applied .material-symbols-rounded {
    font-size: 18px;
}
.carapi-coupon-remove {
    margin-left: auto;
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    padding: 0;
    font-family: inherit;
}
.carapi-coupon-remove:hover {
    text-decoration: underline;
}
.carapi-discount-line {
    display: none;
    justify-content: space-between;
    margin-bottom: 1rem;
    color: #16a34a;
    font-size: .85rem;
    font-weight: 600;
}
.carapi-discount-line.visible {
    display: flex;
}

@media (max-width: 768px) {
    .carapi-checkout-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .carapi-checkout-main { padding: 8rem 0 4rem; }
    .carapi-checkout-box { padding: 1.5rem; }
}

.carapi-express-checkout {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.5rem;
}
.carapi-express-btn {
    flex: 1;
    height: 44px;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s;
}
.carapi-express-btn:hover { opacity: 0.9; }
.carapi-express-apple { background: #000; color: #fff; }
.carapi-express-google { background: #fff; border: 1px solid #dadce0; color: #3c4043; }
.carapi-express-google svg { height: 18px; }
.carapi-express-apple svg { height: 18px; fill: currentColor; }

.carapi-checkout-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin-bottom: 1.5rem;
}
.carapi-checkout-divider::before, .carapi-checkout-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--c-grey-200);
}
.carapi-checkout-divider span {
    padding: 0 1rem;
    color: var(--c-grey-500);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.carapi-auth-tabs {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--c-grey-200);
}
.carapi-auth-tab {
    flex: 1;
    padding: .75rem;
    text-align: center;
    font-size: .9rem;
    font-weight: 700;
    color: var(--c-grey-500);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: -1px;
    transition: color .2s, border-color .2s;
}
.carapi-auth-tab.active {
    color: var(--c-black);
    border-bottom-color: var(--c-accent);
}
.carapi-auth-form { display: none; flex-direction: column; gap: .9rem; }
.carapi-auth-form.active { display: flex; }
.carapi-auth-field label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--c-grey-700);
    margin-bottom: .35rem;
}
.carapi-auth-field input {
    width: 100%;
    padding: .8rem 1rem;
    font-size: .95rem;
    border: 1px solid var(--c-grey-300);
    border-radius: 8px;
    background: var(--c-grey-50);
    outline: none;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.carapi-auth-field input:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.carapi-auth-error {
    display: none;
    font-size: .85rem;
    color: #ef4444;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 8px;
    padding: .65rem .9rem;
}
.carapi-auth-error.visible { display: block; }
.carapi-auth-hint {
    font-size: .75rem;
    color: var(--c-grey-500);
    margin-top: -.4rem;
}

/* ═══════════════════════════════════════════════════════════════
   NAV — Zweispaltiges "Website"-Menue und Admin-Kennzeichnung
   2026-08-27: Das Website-Menue war mit zehn untereinander
   stehenden Eintraegen hoeher als der halbe Bildschirm. Demo und
   Daten stehen jetzt nebeneinander, "Leistungen" als Paar darunter.
   Unter 900px faellt es auf eine Spalte zurueck — die Desktop-Nav
   selbst verschwindet zwar schon bei 768px, aber dazwischen waeren
   zwei Spalten zu breit fuer das Sichtfeld.
   ═══════════════════════════════════════════════════════════════ */

.carapi-nav-dropdown-menu--zwei {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 .35rem;
    min-width: 660px;
}
.carapi-nav-dropdown-menu--zwei .cdropdown-voll { grid-column: 1 / -1; }
.carapi-nav-dropdown-menu--zwei .cdropdown-paar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 .35rem;
}

@media (max-width: 900px) {
    .carapi-nav-dropdown-menu--zwei { grid-template-columns: 1fr; min-width: 340px; }
    .carapi-nav-dropdown-menu--zwei .cdropdown-paar { grid-template-columns: 1fr; }
}

/* Kennzeichnung im Menue: rot = sehen nur Administratoren. */
.carapi-nav-badge {
    display: inline-block;
    margin-left: .4rem;
    vertical-align: middle;
    background: #dc2626;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.5;
    padding: .1rem .4rem;
    border-radius: var(--radius-full);
}

/* ── Statusseite ───────────────────────────────────────────
   Die Punktfarben liegen als eigene Variablen vor, damit der
   Footer-Punkt und die Seite dieselbe Ampel benutzen. */
:root{
    --c-status-gruen:#16a34a;
    --c-status-gelb:#d97706;
    --c-status-rot:#dc2626;
}

.carapi-status-punkt{
    display:inline-block;width:.6rem;height:.6rem;border-radius:var(--radius-full);
    background:var(--c-status-gruen);flex-shrink:0;
}
.carapi-status-punkt--gruen{background:var(--c-status-gruen)}
.carapi-status-punkt--gelb{background:var(--c-status-gelb)}
.carapi-status-punkt--rot{background:var(--c-status-rot)}

.carapi-status-kopf{padding:9rem 0 3rem}
.carapi-status-lage{display:flex;align-items:center;gap:.85rem}
.carapi-status-lage h1{margin:0;font-size:clamp(1.6rem,4vw,2.3rem);letter-spacing:-.02em;line-height:1.15}
.carapi-status-lage .carapi-status-punkt{width:.85rem;height:.85rem}
.carapi-status-lage--gruen .carapi-status-punkt{background:var(--c-status-gruen);box-shadow:0 0 0 5px #16a34a1f}
.carapi-status-lage--gelb  .carapi-status-punkt{background:var(--c-status-gelb);box-shadow:0 0 0 5px #d977061f}
.carapi-status-lage--rot   .carapi-status-punkt{background:var(--c-status-rot);box-shadow:0 0 0 5px #dc26261f}
.carapi-status-stand{margin:.9rem 0 0;color:var(--c-grey-500);font-size:.95rem}
.carapi-status-stand strong{color:var(--c-dark);font-variant-numeric:tabular-nums}

.carapi-status-bereiche .carapi-container{display:flex;flex-direction:column;gap:1.75rem}
.carapi-status-bereich{
    border:1px solid var(--c-grey-200);border-radius:var(--radius-lg);
    padding:1.35rem 1.5rem;background:var(--c-white);
}
.carapi-status-bereich header{display:flex;align-items:center;gap:.7rem;margin:0 0 1rem}
.carapi-status-bereich h2{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.01em}
.carapi-status-quote{
    margin-left:auto;font-size:.9rem;font-weight:600;color:var(--c-grey-700);
    font-variant-numeric:tabular-nums;
}
.carapi-status-balken{display:flex;gap:3px;align-items:stretch;height:34px}
.carapi-status-tag{
    flex:1 1 0;min-width:3px;border-radius:2px;background:var(--c-status-gruen);
    transition:transform .12s ease;
}
.carapi-status-tag:hover{transform:scaleY(1.12)}
.carapi-status-tag--teil{background:var(--c-status-gelb)}
.carapi-status-tag--aus{background:var(--c-status-rot)}
.carapi-status-bereich footer{
    display:flex;justify-content:space-between;margin:.55rem 0 0;
    font-size:.75rem;color:var(--c-grey-500);
}

.carapi-status-liste{display:flex;flex-direction:column;gap:1.25rem}
.carapi-status-vorfall{
    border:1px solid var(--c-grey-200);border-left:3px solid var(--c-status-gelb);
    border-radius:var(--radius-md);padding:1.4rem 1.6rem;background:var(--c-white);
}
.carapi-status-vorfall--ausfall{border-left-color:var(--c-status-rot)}
.carapi-status-vorfall-kopf{display:flex;align-items:flex-start;gap:1rem;margin:0 0 1rem}
.carapi-status-vorfall h3{margin:0;font-size:1.05rem;font-weight:600;line-height:1.35}
.carapi-status-marke{
    margin-left:auto;flex-shrink:0;font-size:.7rem;font-weight:600;letter-spacing:.05em;
    text-transform:uppercase;padding:.2rem .6rem;border-radius:var(--radius-full);
    background:#d977061a;color:#8a5a08;
}
.carapi-status-marke--ausfall{background:#dc26261a;color:#9b1c1c}
.carapi-status-vorfall-inhalt{display:grid;grid-template-columns:minmax(230px,.85fr) 2fr;gap:1.5rem 2.5rem;align-items:start}
.carapi-status-eckdaten{
    display:grid;grid-template-columns:1fr 1fr;
    gap:1rem 1.25rem;margin:0;padding:0;
}
.carapi-status-eckdaten dt{
    font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
    color:var(--c-grey-500);margin:0 0 .15rem;
}
.carapi-status-eckdaten dd{margin:0;font-size:.9rem;color:var(--c-dark)}
.carapi-status-text p{margin:0 0 .8rem;font-size:.94rem;line-height:1.65;color:var(--c-grey-700)}
.carapi-status-text p:last-child{margin-bottom:0}
.carapi-status-massnahme{color:var(--c-dark)!important}
.carapi-status-leer{color:var(--c-grey-700);font-size:.95rem}
.carapi-status-fussnote{
    margin:2rem 0 0;max-width:70ch;font-size:.85rem;line-height:1.6;color:var(--c-grey-500);
}

/* Footer-Anzeige — steht in der Markenspalte unter dem Logo.
   Eigene Zeile statt inline, damit sie nicht mit der Tagline verschwimmt. */
/* align-self/width: die Markenspalte ist ein Flex-Container — ohne das
   zieht sich der Link ueber die volle Spaltenbreite. */
.carapi-footer-brand .carapi-footer-status{
    display:inline-flex;align-items:center;gap:.4rem;
    align-self:flex-start;width:fit-content;max-width:100%;
    margin:.6rem 0 .2rem;
    background:none;border:0;padding:0;
    color:var(--c-grey-500);font-size:.78rem;font-weight:500;
    text-decoration:none;transition:color var(--transition);
}
.carapi-footer-brand .carapi-footer-status:hover{color:var(--c-dark)}
.carapi-footer-status .carapi-status-punkt{width:.5rem;height:.5rem}

@media (max-width:860px){
    .carapi-status-vorfall-inhalt{grid-template-columns:1fr;gap:1.25rem}
}
@media (max-width:600px){
    .carapi-status-kopf{padding:7rem 0 2rem}
    .carapi-status-balken{height:28px;gap:2px}
    .carapi-status-bereich{padding:1.1rem 1.15rem}
}

/* ── Fahrzeugbilder (Alpha) ──────────────────────────────── */
.cfzb-hinweis{
    display:inline-flex;align-items:center;gap:.5rem;margin:1.5rem 0 0;
    padding:.35rem .9rem;border-radius:var(--radius-full);
    background:var(--c-grey-100);color:var(--c-grey-700);
    font-size:.82rem;font-weight:500;
}
.cfzb-punkt{width:.5rem;height:.5rem;border-radius:var(--radius-full);background:#d97706;flex-shrink:0}
.cfzb-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.cfzb-karte{
    border:1px solid var(--c-grey-200);border-radius:var(--radius-lg);
    padding:1.75rem 1.6rem;background:var(--c-white);
}
.cfzb-karte .material-symbols-rounded{font-size:26px;color:var(--c-accent);margin-bottom:.75rem;display:block}
.cfzb-karte h3{margin:0 0 .5rem;font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
.cfzb-karte p{margin:0;font-size:.92rem;line-height:1.6;color:var(--c-grey-500)}
.cfzb-stand{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem 3rem}
.cfzb-spalte h3{display:flex;align-items:center;gap:.5rem;margin:0 0 .85rem;font-size:1rem;font-weight:700}
.cfzb-spalte h3 .material-symbols-rounded{font-size:20px}
.cfzb-ja{color:#16a34a}
.cfzb-offen{color:#d97706}
.cfzb-spalte ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.55rem}
.cfzb-spalte li{
    position:relative;padding-left:1rem;font-size:.93rem;line-height:1.55;color:var(--c-grey-700);
}
.cfzb-spalte li::before{
    content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--c-grey-300);
}
.cfzb-fussnote{margin:2rem 0 0;max-width:62ch;font-size:.9rem;line-height:1.65;color:var(--c-grey-500)}
.cfzb-recht{max-width:70ch;font-size:.95rem;line-height:1.7;color:var(--c-grey-700)}
.carapi-status-alpha{
    padding:.1rem .5rem;border-radius:var(--radius-full);
    background:var(--c-grey-100);color:var(--c-grey-500);
    font-size:.65rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}

/* ── Preisseite: Erweiterungsmodul ───────────────────────── */
.carapi-pricing-modul{
    text-align:left;margin-top:1.25rem;padding:1.75rem 2rem;
    border:1px dashed var(--c-grey-300);border-radius:var(--radius-xl);
    background:var(--c-grey-50);
    display:grid;grid-template-columns:minmax(220px,.9fr) 1.6fr;gap:1.25rem 2.5rem;align-items:start;
}
.carapi-pricing-modul-kopf h4{margin:.6rem 0 .3rem;font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
.carapi-pricing-modul-badge{
    display:inline-block;padding:.15rem .6rem;border-radius:var(--radius-full);
    background:var(--c-grey-200);color:var(--c-grey-700);
    font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
}
.carapi-pricing-modul-preis{margin:0;font-size:.88rem;color:var(--c-grey-500)}
.carapi-pricing-modul-liste{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.6rem}
.carapi-pricing-modul-liste li{
    position:relative;padding-left:1.1rem;font-size:.9rem;line-height:1.55;color:var(--c-grey-700);
}
.carapi-pricing-modul-liste li::before{
    content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--c-grey-300);
}
.carapi-pricing-modul-fuss{
    grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:1rem;padding-top:1.1rem;margin-top:.25rem;border-top:1px solid var(--c-grey-200);
    font-size:.85rem;color:var(--c-grey-500);
}
@media (max-width:820px){
    .carapi-pricing-modul{grid-template-columns:1fr;padding:1.5rem}
}

/* ── API-Docs: Alpha-Kennzeichnung als Badge statt Text ─────
   Vorher stand "GET · ALPHA" im gruenen Methoden-Pill und "[Alpha]" als
   Klammertext im Menue — beides liest sich wie ein Tippfehler, nicht wie
   ein Status. Ein eigenes Element macht "in Erprobung" auf einen Blick
   erkennbar, unabhaengig von der Methode (GET bleibt GET, gruen). */
.carapi-badge-alpha {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: .15rem .5rem;
    border-radius: var(--radius-sm);
    background: #fef3c7;
    color: #92400e;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.4;
}

.carapi-docs-sidebar li {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.carapi-docs-sidebar li .carapi-badge-alpha {
    background: transparent;
    border: 1px solid #f2d49b;
    color: #b1770f;
    font-size: .58rem;
    font-weight: 600;
    padding: 0 .35rem;
}

/* ── API-Docs: Rahmen um wichtige Regeln (Scope, Zwischenspeicherung) ── */
.carapi-docs-hint {
    background: var(--c-grey-50);
    border-left: 3px solid var(--c-accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: .9rem 1.1rem;
}

.carapi-endpoint-card > .carapi-docs-hint {
    margin: 0 1.25rem 1.25rem;
}

/* ── API-Docs: Beispiele als Liste statt Fliesstext ──────────
   Der Intelligence-Endpunkt hatte gut ein Dutzend Beispiele als
   unstrukturierte Absaetze hintereinander. Jedes Beispiel bekommt jetzt
   eine Kennung, seine Adresse(n) abgesetzt in Zeilen und die Erklaerung
   darunter — scannbar statt vorlesbar. */
.carapi-doc-examples {
    display: flex;
    flex-direction: column;
}

.carapi-doc-example {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--c-grey-100);
}

.carapi-doc-example:first-child {
    border-top: none;
}

.carapi-doc-example-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--c-grey-500);
    margin: 0 0 .5rem;
}

.carapi-doc-example-urls {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0 0 .5rem;
}

.carapi-doc-example-urls code {
    display: block;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
    padding: .4rem .6rem;
    border-radius: var(--radius-sm);
    background: var(--c-grey-50);
    border: 1px solid var(--c-grey-200);
    font-family: 'Fira Code', 'JetBrains Mono', monospace;
    font-size: .82rem;
    color: var(--c-dark);
}

.carapi-doc-example-desc {
    margin: 0;
    font-size: .89rem;
    line-height: 1.6;
    color: var(--c-grey-500);
}

/* ── Konto: mehrere API-Schlüssel ────────────────────────── */
.carapi-keys-intro {
    margin: 0 0 1.25rem;
    font-size: .88rem;
    color: var(--c-grey-500);
    line-height: 1.55;
}

.carapi-keys-leer {
    margin: 0 0 1.25rem;
    font-size: .88rem;
    color: var(--c-grey-500);
}

.carapi-key-eintrag {
    padding: .9rem 0;
    border-top: 1px solid var(--c-grey-100);
}

.carapi-key-eintrag:first-child {
    border-top: none;
}

.carapi-key-eintrag--widerrufen {
    opacity: .55;
}

.carapi-key-eintrag-haupt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.carapi-key-eintrag-info {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
    min-width: 0;
}

.carapi-key-eintrag-label {
    font-weight: 600;
    font-size: .92rem;
    color: var(--c-black);
}

.carapi-key-eintrag-wert {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: .82rem;
    color: var(--c-grey-500);
}

.carapi-key-mask-hinweis { font-size: .7rem; color: var(--c-grey-500); background: var(--c-grey-100); border-radius: var(--radius-full); padding: .15rem .5rem; }

.carapi-key-eintrag-meta {
    margin-top: .3rem;
    font-size: .78rem;
    color: var(--c-grey-500);
}

.carapi-key-status {
    flex-shrink: 0;
    padding: .2rem .6rem;
    border-radius: var(--radius-full);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.carapi-key-status--widerrufen {
    background: var(--c-grey-100);
    color: var(--c-grey-500);
}

.carapi-key-widerrufen-btn {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--c-grey-200);
    color: #98362d;
    border-radius: var(--radius-full);
    padding: .3rem .85rem;
    font-size: .78rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all .15s ease;
}

.carapi-key-widerrufen-btn:hover {
    background: #fef2f2;
    border-color: #fecaca;
}

.carapi-key-erstellen-form {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--c-grey-100);
}

.carapi-key-erstellen-form input[type="text"] {
    flex: 1;
    min-width: 220px;
    padding: .6rem .85rem;
    border: 1px solid var(--c-grey-200);
    border-radius: 10px;
    font-size: .88rem;
    font-family: var(--font);
}

.carapi-key-erstellen-form input[type="text"]:focus {
    outline: none;
    border-color: var(--c-accent);
}

.carapi-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--c-black);
    color: var(--c-white);
    border: none;
    border-radius: 10px;
    padding: .6rem 1.1rem;
    font-size: .88rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background .15s ease;
    white-space: nowrap;
}

.carapi-btn-primary:hover { background: var(--c-grey-900); }
.carapi-btn-primary:disabled { opacity: .5; cursor: default; }
.carapi-btn-primary .material-symbols-rounded { font-size: 18px; }

.carapi-keys-limit {
    margin: .6rem 0 1.25rem;
    font-size: .78rem;
    color: var(--c-grey-500);
}

.carapi-key-reveal {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.carapi-key-reveal-kopf {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    font-weight: 600;
    color: #166534;
    margin-bottom: 1rem;
}

.carapi-key-reveal-kopf .material-symbols-rounded {
    font-size: 18px;
}

.carapi-key-reveal .carapi-btn-cancel {
    margin-top: .5rem;
    padding: .45rem 1rem;
    border-radius: var(--radius-full);
    font-size: .82rem;
}

.carapi-copy-btn { gap: .3rem; }
.carapi-copy-label { font: 600 .75rem var(--font); }
.carapi-copy-btn--ok { color: #166534; background: #dcfce7; }
.carapi-copy-status { margin: .75rem 0 .5rem; font-size: .8rem; color: var(--c-grey-600); }
.carapi-copy-status--ok { color: #166534; }
.carapi-copy-status--fehler { color: #98362d; }
.carapi-copy-manuell { display: flex; align-items: flex-start; gap: .45rem; font-size: .78rem; color: var(--c-grey-600); }
.carapi-key-reveal .carapi-btn-cancel:disabled { opacity: .45; cursor: not-allowed; }

/* ── Nachladbare Reiter der Fahrzeugkarte ──────────────────────────────
   Werkstattdaten und Marktzahlen werden erst beim Anfassen des Reiters
   geholt (siehe LAZY_TABS in app.js). Farben und Abstaende kommen aus den
   Tokens oben, damit die Panels aussehen wie Fahrzeugdaten und Felgen --
   die erste Fassung brachte eigene Werte mit und fiel dadurch auf. */

/* Innenabstand wie .carapi-result-fitments. Die Reiterflaeche selbst hat
   bewusst keinen, den liefern sonst die Zellen von .carapi-result-specs. */
.carapi-lazy-block {
    padding: 1.5rem 2rem;
}
.carapi-lazy-block + .carapi-result-specs {
    margin-top: -.75rem;
}

.carapi-lazy-block h4 {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .75px;
    color: var(--c-grey-500);
}
.carapi-lazy-block h4 .material-symbols-rounded {
    font-size: 18px;
}

.carapi-lazy-kopf {
    margin: 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--c-grey-700);
}
.carapi-lazy-hinweis {
    margin: 0;
    font-size: .74rem;
    line-height: 1.55;
    color: var(--c-grey-500);
}
.carapi-lazy-leer {
    margin: 0;
    font-size: .84rem;
    color: var(--c-grey-500);
}

/* Skelett haelt die Hoehe, bis der Inhalt da ist. */
.carapi-lazy-skelett {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.carapi-lazy-skelett span {
    display: block;
    height: .85rem;
    border-radius: 4px;
    background: linear-gradient(90deg,
        var(--c-grey-100) 25%,
        var(--c-grey-200) 37%,
        var(--c-grey-100) 63%);
    background-size: 400% 100%;
    animation: carapi-lazy-schimmer 1.4s ease-in-out infinite;
}
.carapi-lazy-skelett span:nth-child(1) { width: 55%; }
.carapi-lazy-skelett span:nth-child(2) { width: 88%; }
.carapi-lazy-skelett span:nth-child(3) { width: 72%; }
.carapi-lazy-skelett span:nth-child(4) { width: 80%; }

@keyframes carapi-lazy-schimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Wer Bewegung im Betriebssystem abgeschaltet hat, bekommt eine ruhige
   Flaeche statt der Wanderanimation. */
@media (prefers-reduced-motion: reduce) {
    .carapi-lazy-skelett span {
        animation: none;
        background: var(--c-grey-100);
    }
}

/* Bestandszahl aus den KBA-Daten — die eine Zahl, die den Reiter traegt. */
.carapi-markt-zahl {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1.15rem 1.25rem;
    margin-bottom: 1.25rem;
    border-radius: 10px;
    background: var(--c-grey-50);
    border: 1px solid var(--c-grey-200);
}
.carapi-markt-zahl strong {
    font-size: 1.9rem;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--c-black);
}
.carapi-markt-zahl span {
    font-size: .84rem;
    color: var(--c-grey-700);
}
.carapi-markt-zahl em {
    font-style: normal;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-grey-500);
}

.carapi-markt-zahl + h4 {
    margin-bottom: .75rem;
}

.carapi-rueckruf-karte {
    padding: .9rem 1.1rem;
    margin-top: .7rem;
    border: 1px solid var(--c-grey-200);
    border-left: 3px solid var(--c-status-gelb, #d97706);
    border-radius: 8px;
}
.carapi-rueckruf-kopf {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .45rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-grey-500);
}
.carapi-rueckruf-status {
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--c-grey-100);
    color: var(--c-grey-700);
    font-weight: 700;
}
.carapi-rueckruf-gefahr {
    margin: 0 0 .45rem;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--c-grey-900);
}
.carapi-rueckruf-massnahme {
    margin: 0;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--c-grey-700);
}
.carapi-rueckruf-karte + .carapi-lazy-hinweis {
    margin-top: .9rem;
}

/* Hinweiszeile im Aufklappmenü der Fahrzeugwahl (lädt… / keine Treffer).
   Die Listen werden stufenweise nachgeladen, siehe ketteOeffnen() in app.js. */
.carapi-widget-dd-hinweis {
    padding: .8rem 1rem;
    font-size: .84rem;
    color: var(--c-grey-500);
}

/* ── Reiterleiste: waagerecht scrollbar ────────────────────────────────
   Mit fuenf Reitern passt die Leiste auf schmalen Fenstern nicht mehr in
   die Karte. Vorher wurde der letzte Reiter einfach abgeschnitten und war
   nicht erreichbar. Jetzt scrollt die Leiste, mit Wisch-Impuls auf
   Touch-Geraeten und ohne sichtbaren Balken. */
.carapi-result-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}
.carapi-result-tabs::-webkit-scrollbar {
    display: none;
}
.carapi-result-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
}
/* Der aktive Reiter wird per scrollIntoView in Sicht geholt; ein weicher
   Lauf ist dabei angenehmer als ein Sprung. */
@media (prefers-reduced-motion: no-preference) {
    .carapi-result-tabs {
        scroll-behavior: smooth;
    }
}
/* Auf schmalen Fenstern engere Reiter, damit mehr davon sichtbar sind. */
@media (max-width: 640px) {
    .carapi-result-tabs {
        padding: 0 1rem;
    }
    .carapi-result-tab {
        padding: .8rem .9rem;
    }
    .carapi-lazy-block {
        padding: 1.25rem 1rem;
    }
}

/* ── Ausführungswahl in der Fahrzeugkarte ──────────────────────────────
   Sichtbar nur, wenn ein HSN/TSN-Paar für mehrere Ausführungen gilt
   (model_selection_available). Bedienung wie die Modellauswahl oben. */
.carapi-variant-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .75rem 2rem;
    background: var(--c-grey-50);
    border-bottom: 1px solid var(--c-grey-200);
}
.carapi-variant-hinweis {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: var(--c-grey-700);
}
.carapi-variant-hinweis .material-symbols-rounded {
    font-size: 18px;
    color: var(--c-grey-500);
}

.carapi-variant-dd {
    position: relative;
}
.carapi-variant-btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .75rem .45rem .9rem;
    background: var(--c-white);
    border: 1px solid var(--c-grey-300);
    border-radius: 8px;
    font-family: var(--font);
    font-size: .8rem;
    font-weight: 600;
    color: var(--c-black);
    cursor: pointer;
    transition: border-color .15s ease;
}
.carapi-variant-btn:hover { border-color: var(--c-grey-500); }
.carapi-variant-btn .material-symbols-rounded {
    font-size: 18px;
    color: var(--c-grey-500);
    transition: transform .15s ease;
}
.carapi-variant-btn[aria-expanded="true"] .material-symbols-rounded {
    transform: rotate(180deg);
}

.carapi-variant-list {
    display: none;
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    z-index: 30;
    min-width: 288px;
    max-width: min(380px, 90vw);
    max-height: 320px;
    overflow-y: auto;
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}
.carapi-variant-list.open { display: block; }

.carapi-variant-item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    width: 100%;
    padding: .65rem .9rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--c-grey-100);
    font-family: var(--font);
    text-align: left;
    cursor: pointer;
}
.carapi-variant-item:last-child { border-bottom: none; }
.carapi-variant-item:hover { background: var(--c-grey-50); }
.carapi-variant-item.aktiv { background: var(--c-grey-100); }
.carapi-variant-name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--c-black);
}
.carapi-variant-sub {
    font-size: .72rem;
    color: var(--c-grey-500);
}

/* ── Felgen: Einbau-Angaben je ET-Variante ─────────────────────────────
   Eintragungsstatus, Zentrierring, Befestigung und Gutachten-PDF standen
   bisher ungenutzt in der Antwort. */
.carapi-fit-meta-zeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .65rem;
    margin: .3rem 0 .5rem;
}
.carapi-fit-status {
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.carapi-fit-frei {
    background: rgba(22, 163, 74, .12);
    color: var(--c-status-gruen, #16a34a);
}
.carapi-fit-eintragung {
    background: rgba(217, 119, 6, .12);
    color: var(--c-status-gelb, #d97706);
}
.carapi-fit-blockiert {
    background: rgba(220, 38, 38, .10);
    color: var(--c-status-rot, #dc2626);
}
.carapi-fit-unklar {
    background: var(--c-grey-100);
    color: var(--c-grey-500);
}
.carapi-fit-meta {
    font-size: .72rem;
    color: var(--c-grey-700);
}
.carapi-fit-pdf {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--c-accent);
    text-decoration: none;
}
.carapi-fit-pdf:hover { text-decoration: underline; }
.carapi-fit-pdf .material-symbols-rounded { font-size: 16px; }

@media (max-width: 640px) {
    .carapi-variant-bar { padding: .7rem 1rem; }
    .carapi-variant-list { right: auto; left: 0; }
}

/* Markenlogo im Herstellermenü: rechtsbündig an der Kante, der Name links.
   margin-left:auto schiebt es dorthin, die feste Box haelt alle Logos auf
   derselben rechten Flucht -- unabhaengig davon, ob ein Logo breit (Alfa)
   oder schmal (Audi) ist. Ein fehlendes Logo wird versteckt, nicht
   entfernt, sonst franst die Kante aus. */
.carapi-dd-logo {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-left: auto;
    object-fit: contain;
}
.carapi-dd-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}