/* ================================================================
   TM24 UI-DESIGNSYSTEM — tm24-ui.css
   Version: 1.0.0 | UTF-8 (ohne BOM)
   Basis: Ankauf-Design (tm24.de/ankauf)
   KEINE Aenderungen an JTL-Core. Nur NOVAChild_TM24.
   ================================================================ */

/* ---- 1) DESIGN-TOKENS ---- */
:root {
    /* Primärfarben */
    --tm-blue: #2E2BCB;
    --tm-blue-dark: #1a18a0;
    --tm-blue-darker: #0f0e6e;
    --tm-blue-light: rgba(46, 43, 203, .08);
    --tm-blue-mid: rgba(46, 43, 203, .18);
    --tm-blue-glow: 0 6px 20px rgba(46, 43, 203, .28);
    --tm-blue-glow-lg: 0 10px 36px rgba(46, 43, 203, .38);

    /* Gradient (Hero / Topbar) */
    --tm-grad: linear-gradient(135deg, var(--tm-blue) 0%, var(--tm-blue-dark) 55%, var(--tm-blue-darker) 100%);
    --tm-grad-top: linear-gradient(90deg, #1a1278 0%, var(--tm-blue) 50%, #1a1278 100%);

    /* Neutral */
    --tm-bg: #f6f6f8;
    --tm-card: #ffffff;
    --tm-border: #eeeeee;
    --tm-border-strong: #dddddd;

    /* Text */
    --tm-txt: #111118;
    --tm-txt-s: #333333;
    --tm-muted: #888888;

    /* Status */
    --tm-green: #16a34a;
    --tm-red: #dc2626;
    --tm-orange: #ea580c;

    /* Radii */
    --tm-r: 16px;
    --tm-rs: 12px;
    --tm-pill: 50px;

    /* Schatten */
    --tm-s1: 0 2px 12px rgba(0, 0, 0, .05);
    --tm-s2: 0 4px 20px rgba(0, 0, 0, .08);
    --tm-s3: 0 8px 32px rgba(0, 0, 0, .10);

    /* Schrift */
    --tm-font: 'Figtree', 'Segoe UI', sans-serif;

    /* Uebergaenge */
    --tm-ease: 0.25s ease;
}

/* ---- 2) RESET / BASE ---- */
body,
html {
    font-family: var(--tm-font) !important;
    background-color: var(--tm-bg) !important;
    color: var(--tm-txt-s) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

a {
    color: var(--tm-blue) !important;
    text-decoration: none !important;
    transition: color var(--tm-ease) !important;
}

a:hover {
    color: var(--tm-blue-dark) !important;
    text-decoration: none !important;
}

/* ---- 3) CARDS / BOXEN ---- */
.tm24-card {
    background: var(--tm-card) !important;
    border: 2px solid var(--tm-border) !important;
    border-radius: var(--tm-r) !important;
    box-shadow: var(--tm-s1) !important;
    padding: 24px !important;
    transition: transform var(--tm-ease), box-shadow var(--tm-ease), border-color var(--tm-ease) !important;
}

.tm24-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--tm-s3) !important;
    border-color: rgba(46, 43, 203, .18) !important;
}

.tm24-card-sm {
    border-radius: var(--tm-rs) !important;
    padding: 16px !important;
}

/* ---- 4) BUTTONS ---- */
.tm24-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-family: var(--tm-font) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border-radius: var(--tm-pill) !important;
    padding: 13px 32px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all var(--tm-ease) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* Primaer-Button (blau) */
.tm24-btn-primary {
    background: var(--tm-blue) !important;
    color: #fff !important;
    box-shadow: var(--tm-blue-glow) !important;
}

.tm24-btn-primary:hover {
    background: var(--tm-blue-dark) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--tm-blue-glow-lg) !important;
}

/* Sekundaer-Button (weiss/Outline) */
.tm24-btn-outline {
    background: #fff !important;
    color: var(--tm-blue) !important;
    border: 2px solid var(--tm-border) !important;
}

.tm24-btn-outline:hover {
    border-color: var(--tm-blue) !important;
    background: var(--tm-blue-light) !important;
    color: var(--tm-blue) !important;
}

/* Ghost-Button (transparent) */
.tm24-btn-ghost {
    background: transparent !important;
    color: var(--tm-muted) !important;
    border: 2px solid var(--tm-border) !important;
}

.tm24-btn-ghost:hover {
    color: var(--tm-blue) !important;
    border-color: var(--tm-blue) !important;
    background: var(--tm-blue-light) !important;
}

/* ---- 5) CHIPS / PILLS (Filter, Tags) ---- */
.tm24-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #fff !important;
    border: 2px solid var(--tm-border) !important;
    border-radius: var(--tm-pill) !important;
    padding: 8px 18px !important;
    font-family: var(--tm-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--tm-txt-s) !important;
    cursor: pointer !important;
    transition: all var(--tm-ease) !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: var(--tm-s1) !important;
}

.tm24-chip:hover,
.tm24-chip.active {
    background: var(--tm-blue) !important;
    border-color: var(--tm-blue) !important;
    color: #fff !important;
    box-shadow: var(--tm-blue-glow) !important;
}

/* ---- 6) INPUTS / SUCHFELDER ---- */
.tm24-input {
    font-family: var(--tm-font) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border: 2px solid var(--tm-border) !important;
    border-radius: var(--tm-pill) !important;
    padding: 13px 24px !important;
    width: 100% !important;
    background: #fff !important;
    color: var(--tm-txt) !important;
    outline: none !important;
    transition: border-color var(--tm-ease), box-shadow var(--tm-ease) !important;
    box-shadow: var(--tm-s1) !important;
}

.tm24-input:focus {
    border-color: var(--tm-blue) !important;
    box-shadow: 0 0 0 3px var(--tm-blue-light) !important;
}

.tm24-input::placeholder {
    color: var(--tm-muted) !important;
    font-weight: 400 !important;
}

/* ---- 7) BADGES / LABELS ---- */
.tm24-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    border-radius: var(--tm-pill) !important;
    padding: 4px 12px !important;
    font-family: var(--tm-font) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .2px !important;
    text-transform: uppercase !important;
}

.tm24-badge-blue {
    background: var(--tm-blue-light) !important;
    color: var(--tm-blue) !important;
    border: 1px solid rgba(46, 43, 203, .2) !important;
}

.tm24-badge-green {
    background: rgba(22, 163, 74, .08) !important;
    color: var(--tm-green) !important;
    border: 1px solid rgba(22, 163, 74, .2) !important;
}

.tm24-badge-red {
    background: rgba(220, 38, 38, .08) !important;
    color: var(--tm-red) !important;
    border: 1px solid rgba(220, 38, 38, .2) !important;
}

/* ---- 8) TRUST-ELEMENTE (Versand, Garantie, etc.) ---- */
.tm24-trust-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
    flex-wrap: wrap !important;
    padding: 10px 0 !important;
}

.tm24-trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-family: var(--tm-font) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, .85) !important;
}

.tm24-trust-item svg,
.tm24-trust-item i {
    font-size: 13px !important;
    opacity: .8 !important;
}

/* ---- 9) SECTION-TITLE ---- */
.tm24-section-title {
    text-align: center !important;
    margin-bottom: 32px !important;
}

.tm24-section-title h2 {
    font-family: var(--tm-font) !important;
    font-weight: 900 !important;
    font-size: 28px !important;
    letter-spacing: -.5px !important;
    color: var(--tm-txt) !important;
    margin-bottom: 6px !important;
}

.tm24-section-title p {
    font-family: var(--tm-font) !important;
    color: var(--tm-muted) !important;
    font-size: 15px !important;
}

/* ---- 10) TABS ---- */
.tm24-tabs {
    display: flex !important;
    gap: 0 !important;
    border-bottom: 2px solid var(--tm-border) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.tm24-tabs::-webkit-scrollbar {
    display: none !important;
}

.tm24-tab-link {
    font-family: var(--tm-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tm-muted) !important;
    padding: 13px 22px !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
    cursor: pointer !important;
    transition: color var(--tm-ease), border-color var(--tm-ease) !important;
    white-space: nowrap !important;
    background: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

.tm24-tab-link:hover,
.tm24-tab-link.active {
    color: var(--tm-blue) !important;
    border-bottom-color: var(--tm-blue) !important;
}

/* ---- 11) PROGRESS BAR ---- */
.tm24-progress {
    background: var(--tm-border) !important;
    border-radius: var(--tm-pill) !important;
    height: 6px !important;
    overflow: hidden !important;
}

.tm24-progress-fill {
    height: 100% !important;
    border-radius: var(--tm-pill) !important;
    background: linear-gradient(90deg, var(--tm-blue), #4a47e0) !important;
    transition: width .5s ease !important;
}

/* ---- 12) DIVIDER ---- */
.tm24-divider {
    border: none !important;
    border-top: 1px solid var(--tm-border) !important;
    margin: 24px 0 !important;
}

/* ---- 13) RESPONSIVE GRID ---- */
.tm24-grid-auto {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 16px !important;
}

.tm24-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
}

.tm24-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
}

@media (max-width: 768px) {
    .tm24-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .tm24-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .tm24-trust-bar {
        gap: 12px !important;
    }

    .tm24-section-title h2 {
        font-size: 22px !important;
    }

    .tm24-btn {
        padding: 11px 22px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {

    .tm24-grid-4,
    .tm24-grid-3 {
        grid-template-columns: 1fr !important;
    }
}