/* =============================================
   TM24 ANKAUF – HEADER + TOPBAR + UTILITIES
   Scoped: .ankauf-topbar, .ankauf-header, 
           .ankauf-icon-link, .lang-pill
   ============================================= */

/* ===== TOPBAR ===== */
.ankauf-topbar {
    background: linear-gradient(90deg, #1a1278 0%, #2E2BCB 50%, #1a1278 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 8px 0;
    text-align: center;
}

.ankauf-topbar-inner {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}

.ankauf-topbar-inner span {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .ankauf-topbar-inner {
        gap: 12px;
        font-size: 11px;
    }
}

/* ===== CSS VARIABLES ===== */
:root {
    --tm-blue: #2E2BCB;
    --tm-blue-light: rgba(46, 43, 203, 0.08);
    --tm-blue-hover: #2220a8;
    --tm-dark: #0f172a;
    --tm-gray: #f6f6f8;
    --tm-text: #1e293b;
    --tm-text-headline: #0f172a;
    --tm-text-body: #1e293b;
    --tm-text-secondary: #475569;
    --tm-text-muted: #64748b;
    --tm-muted: #888;
    --tm-border: #e2e8f0;
    --tm-success: #16a34a;
    --radius-lg: 16px;
    --radius-pill: 50px;
}

body {
    font-family: 'Figtree', sans-serif;
    background: var(--tm-gray);
    margin: 0;
    padding: 0;
    color: var(--tm-text-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== LOGO ===== */
.shop-logo {
    flex: 0 0 auto;
    text-decoration: none;
    line-height: 0;
}

.shop-logo img {
    display: block;
    max-height: 28px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
}

@media (max-width: 767px) {
    .shop-logo img {
        max-height: 22px;
        max-width: 100px;
    }
}

.ankauf-logo,
.b2b-logo {
    font-weight: 900 !important;
    font-size: 20px !important;
    color: var(--tm-blue) !important;
    text-decoration: none !important;
}

.ankauf-logo span,
.b2b-logo span {
    color: #0f172a !important;
}

/* ===== NAVIGATION PILLS ===== */
.nav-link-top {
    color: #1e293b !important;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: 0.2s;
}

.nav-link-top:hover,
.nav-link-top.active {
    color: var(--tm-blue) !important;
}

/* ===== HEADER UTILITY LINKS ===== */
.ankauf-icon-link,
.header-icon-link {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    color: #1e293b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    border: 1px solid #e2e8f0 !important;
    white-space: nowrap !important;
}

.ankauf-icon-link:hover,
.header-icon-link:hover {
    background: #e2e8f0 !important;
    color: var(--tm-blue) !important;
    text-decoration: none !important;
    border-color: rgba(46, 43, 203, 0.2) !important;
}

.ankauf-icon-link i,
.header-icon-link i {
    font-size: 14px !important;
    color: var(--tm-blue) !important;
}

.ankauf-icon-link span,
.header-icon-link span {
    color: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* ===== SPRACH-PILLS ===== */
.desktop-lang-switch {
    display: flex !important;
    gap: 2px !important;
    align-items: center !important;
}

.lang-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    background: #f1f5f9 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    border: 1px solid #e2e8f0 !important;
    min-width: 32px !important;
}

.lang-pill:hover {
    background: #e2e8f0 !important;
    color: #1e293b !important;
    text-decoration: none !important;
}

.lang-pill.active {
    background: var(--tm-blue) !important;
    color: #fff !important;
    border-color: var(--tm-blue) !important;
}

/* =================================================================
   HEADER GRID – EINZIGE FÜHRENDE DEFINITION
   Alle anderen Dateien (wizard, footer, overlays, ankauf.css) wurden
   bereinigt. Header-Layout wird NUR hier definiert.
   ================================================================= */

/* ---- Ankauf-Header Wrapper ---- */
.ankauf-header {
    background: #fff;
    border-bottom: 1px solid var(--tm-border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* ---- Desktop: 3-Spalten-Grid (Logo | Suche | Icons) ---- */
.tm24-header-grid {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    align-items: center;
    gap: 16px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 12px 20px;
}

.tm24-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.tm24-header-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tm24-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- Header-Suche ---- */
.header-suche-wrapper {
    flex: 1 1 320px;
    min-width: 0;
    max-width: 560px;
    margin: 0 20px;
    position: relative;
    z-index: 200;
}

.header-suche-wrapper .suche-input {
    width: 100%;
    min-width: 0;
    padding: 10px 16px 10px 40px;
    font-size: 16px; /* 16px verhindert iOS-Zoom bei Fokus */
    border-radius: 50px !important;
    background: #f0f0f5;
    box-shadow: none;
    border: 1px solid #e0e0e6;
    outline: none;
    transition: all 0.3s;
}

.header-suche-wrapper .suche-input:focus {
    background: #fff;
    box-shadow: 0 2px 12px rgba(46, 43, 203, 0.15);
    border-color: #2E2BCB;
}

.header-suche-wrapper .suche-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 14px;
    font-size: 14px;
    color: #888;
}

.header-suche-wrapper .suche-ergebnisse {
    z-index: 9999;
}

/* =================================================================
   MOBILE: ≤768px → Flex-Wrap + Suche eigene Zeile
   ================================================================= */
@media (max-width: 768px) {
    .tm24-header-grid {
        display: flex;
        flex-wrap: wrap;
        grid-template-columns: none;
        padding: 10px 16px;
        gap: 8px;
    }

    .tm24-header-left {
        flex: 1 1 auto;
        min-width: 0;
        gap: 8px;
        flex-wrap: wrap;
    }

    /* Pills auf kleinen Geräten unter das Logo */
    .tm24-header-left .ankauf-pills,
    .tm24-header-left .tm24-pill-nav {
        flex: 1 1 100%;
        order: 2;
    }

    .tm24-header-right {
        flex: 0 0 auto;
    }

    .tm24-header-center {
        display: flex;
        flex: 1 1 100%;
        order: 3;
        margin-top: 4px;
    }

    .header-suche-wrapper {
        flex: 1 1 100%;
        width: 100%;
        order: 3;
        margin: 0;
        max-width: 100%;
    }

    /* B2B-Pills auf Mobile ausblenden */
    .b2b-pills {
        display: none;
    }

    /* Icon-Links: nur Icon, Text verstecken */
    .tm24-header-right > a.ankauf-icon-link {
        padding: 6px 10px;
        font-size: 12px;
    }
    .tm24-header-right > a.ankauf-icon-link span {
        display: none;
    }

    /* Burger-Button sichtbar */
    .ankauf-burger-btn {
        display: flex;
    }
}