/* ==========================================================================
   Header - REFINED PREMIUM NAVIGATION
   ========================================================================== */

.ts-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--ts-header-height);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border-bottom: 1px solid var(--ts-dark-tertiary);
    z-index: 10001;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.ts-header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 1px 6px rgba(26, 29, 35, 0.06);
}

.ts-header .ts-container {
    padding-top: 0;
    padding-bottom: 0;
    height: 100%;
}

.ts-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 100%;
    width: 100%;
}

/* Logo - LEFT */
.ts-logo {
    justify-self: start;
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    z-index: 10002;
}

.ts-logo .custom-logo-link img,
.ts-logo img.custom-logo,
img.custom-logo {
    width: auto !important;
    height: 55px !important;
    max-height: 55px !important;
}

.ts-logo .custom-logo-link {
    display: inline-flex;
    align-items: center;
    height: 100%;
}

a.ts-logo {
    font-family: var(--ts-font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ts-white);
    text-decoration: none;
    letter-spacing: -0.01em;
}

a.ts-logo span {
    color: var(--ts-accent);
    font-weight: 600;
}

/* Navigation - TRUE CENTER */
.ts-nav {
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.ts-nav-menu {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}

/* RIGHT section: Phone + Cart + Mobile Toggle */
.ts-header-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Header Phone Link */
.ts-header-phone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ts-silver-light, #e8e8e8);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: rgba(26, 29, 35, 0.1);
    border: 1px solid rgba(26, 29, 35, 0.3);
    transition: all 0.3s ease;
    position: relative;
    z-index: 10002;
}

.ts-header-phone:hover {
    background: rgba(26, 29, 35, 0.2);
    border-color: rgba(26, 29, 35, 0.5);
    color: #ffffff;
}

.ts-header-phone svg {
    width: 18px;
    height: 18px;
    color: #1a1d23;
    flex-shrink: 0;
}

.ts-header-phone-text {
    font-family: var(--ts-font-body, 'Outfit', sans-serif);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.ts-cart-link {
    color: var(--ts-white);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10002;
}

/* Mobile Toggle */
.ts-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 10002;
}

.ts-nav-menu li {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   DESKTOP NAVIGATION - REFINED PREMIUM STYLE
   Clean, elegant, matches dark glassmorphism aesthetic
   ========================================================================== */

.ts-nav-menu a,
.ts-nav-menu li a,
.ts-nav-menu .menu-item a,
.ts-nav-menu .menu-item-type-custom a,
.ts-nav-menu .current-menu-item a,
.ts-nav-menu .current_page_item a {
    /* Reset */
    all: unset !important;
    
    /* Typography - Clean sans-serif for nav */
    font-family: var(--ts-font-body, 'Outfit', sans-serif) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    
    /* Color */
    color: var(--ts-silver) !important;
    
    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.5rem 0 !important;
    margin: 0 !important;
    position: relative !important;
    cursor: pointer !important;
    
    /* Clean look */
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    
    /* Smooth transition */
    transition: color 0.3s ease !important;
}

/* Underline effect */
.ts-nav-menu a::after,
.ts-nav-menu li a::after,
.ts-nav-menu .menu-item a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 1px !important;
    background: var(--ts-accent) !important;
    transition: width 0.3s ease !important;
}

/* Hover state */
.ts-nav-menu a:hover,
.ts-nav-menu li a:hover,
.ts-nav-menu .menu-item a:hover,
.ts-nav-menu .menu-item-type-custom a:hover,
.ts-nav-menu .current-menu-item a:hover,
.ts-nav-menu .current_page_item a:hover {
    color: var(--ts-accent) !important;
    background: none !important;
    background-color: transparent !important;
}

/* Underline on hover */
.ts-nav-menu a:hover::after,
.ts-nav-menu li a:hover::after,
.ts-nav-menu .menu-item a:hover::after {
    width: 100% !important;
}

/* Active/Current page indicator */
.ts-nav-menu .current-menu-item > a,
.ts-nav-menu .current_page_item > a {
    color: var(--ts-accent) !important;
}

.ts-nav-menu .current-menu-item > a::after,
.ts-nav-menu .current_page_item > a::after {
    width: 100% !important;
    background: var(--ts-accent) !important;
}

/* ==========================================================================
   END NAVIGATION STYLES
   ========================================================================== */

/* Cart hover */
.ts-cart-link:hover {
    opacity: 0.7;
}

.ts-cart-link svg {
    width: 22px;
    height: 22px;
}

.ts-cart-count {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 18px;
    height: 18px;
    background: #1a1d23;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.ts-menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--ts-white);
    border-radius: 999px;
    transition: all 0.3s ease;
}

.ts-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: rotate(45deg) translateY(7px);
}

.ts-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.ts-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: rotate(-45deg) translateY(-7px);
}

/* Mobile Nav */
.ts-mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20vh;
}

.ts-mobile-nav[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
}

.ts-mobile-nav-inner {
    width: 100%;
    max-width: 400px;
    padding: 0 2rem;
}

.ts-mobile-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: center;
}

.ts-mobile-menu li {
    margin-bottom: 0;
    width: 100%;
}

.ts-mobile-menu a {
    display: block;
    width: 100%;
    padding: 1.25rem 0;
    color: var(--ts-silver) !important;
    font-family: var(--ts-font-body, 'Outfit', sans-serif);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background: none !important;
    border-bottom: 1px solid var(--ts-dark-tertiary);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.ts-mobile-menu a:hover {
    color: var(--ts-accent) !important;
}

.ts-mobile-menu .current-menu-item a,
.ts-mobile-menu .current_page_item a {
    color: var(--ts-accent) !important;
    background: none !important;
}

body.mobile-menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}

/* Admin bar */
.admin-bar .ts-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .ts-header {
        top: 46px;
    }
}

@media (max-width: 600px) {
    .admin-bar .ts-header {
        top: 0;
    }
}

/* Responsive */
@media (max-width: 1199px) {
    /* Simplify header layout for mobile - 2 columns instead of 3 */
    .ts-header-inner {
        grid-template-columns: 1fr auto;
    }
    
    /* Hide desktop nav completely */
    .ts-nav {
        display: none;
    }
    
    .ts-nav-menu {
        display: none;
    }
    
    .ts-menu-toggle {
        display: flex;
    }
    
    :root {
        --ts-header-height: 70px;
    }
    
    /* Mobile header right - proper alignment */
    .ts-header-right {
        gap: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    
    /* Hide phone text on tablet, keep icon */
    .ts-header-phone-text {
        display: none;
    }
    
    /* Consistent icon button styling */
    .ts-header-phone,
    .ts-cart-link,
    .ts-menu-toggle {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        flex-shrink: 0;
    }
    
    .ts-header-phone {
        background: transparent;
        border: none;
        border-radius: 8px;
    }
    
    .ts-header-phone svg {
        width: 22px;
        height: 22px;
    }
    
    .ts-header-phone:hover {
        background: rgba(26, 29, 35, 0.1);
    }
    
    .ts-cart-link svg {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 768px) {
    .ts-logo .custom-logo-link img,
    .ts-logo img.custom-logo,
    img.custom-logo {
        height: 40px !important;
        max-height: 40px !important;
    }
    
    a.ts-logo {
        font-size: 1.35rem;
    }
    
    :root {
        --ts-header-height: 65px;
    }
}

@media (max-width: 640px) {
    .ts-logo .custom-logo-link img,
    .ts-logo img.custom-logo,
    img.custom-logo {
        height: 36px !important;
        max-height: 36px !important;
    }
    
    :root {
        --ts-header-height: 60px;
    }
}

@media (max-width: 480px) {
    .ts-logo .custom-logo-link img,
    .ts-logo img.custom-logo,
    img.custom-logo {
        height: 34px !important;
        max-height: 34px !important;
    }
    
    :root {
        --ts-header-height: 58px;
    }
    
    /* Even tighter spacing on small phones */
    .ts-header-right {
        gap: 0.25rem;
    }
    
    .ts-header-phone,
    .ts-cart-link,
    .ts-menu-toggle {
        width: 36px;
        height: 36px;
    }
    
    .ts-header-phone svg,
    .ts-cart-link svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 360px) {
    .ts-logo .custom-logo-link img,
    .ts-logo img.custom-logo,
    img.custom-logo {
        height: 32px !important;
        max-height: 32px !important;
    }
    
    :root {
        --ts-header-height: 56px;
    }
    
    .ts-header-right {
        gap: 0.15rem;
    }
    
    .ts-header-phone,
    .ts-cart-link,
    .ts-menu-toggle {
        width: 34px;
        height: 34px;
    }
}
/* ==========================================================================
   24.09.2026, Nachtrag zur Kopfzeile. Gemessen, nicht geraten.
   
   1. LUFT ZWISCHEN LOGO UND MENUE. Das Raster ist 1fr auto 1fr, und weil das
      Menue alles nimmt, was uebrig ist, schrumpfen die Aussenspalten genau auf
      ihren Inhalt. Gemessen war der Abstand zwischen Logo und erstem Menuepunkt
      0 Pixel bei 1024, 1280, 1366, 1440 und 1920. Beim alten quadratischen Logo
      fiel das nicht auf, weil es nur 55 Pixel breit war. Mit dem freigestellten
      Logo stand "ESG Scheibe.deStart" aneinander.
      30 Pixel Innenabstand rechts kosten das Menue nichts: die Mittelspalte
      wurde dabei sogar breiter, 739 statt 731 bei 1280, weil das Logo mit
      45 statt 55 Pixel Hoehe schmaler ist.

   2. DIE TELEFONNUMMER WAR FAST NICHT ZU LESEN. Sie stand auf
      var(--ts-silver-light), also #6f747d, gedacht fuer die dunkle Kopfzeile
      von tanzspiegel.de. Hier ist die Kopfzeile weiss. Gemessener Kontrast
      2,54 zu 1, verlangt sind 4,5. Mit dem Blau der Seite sind es 7,23.
      ⛔ vsgscheibe.de hat denselben Fehler, dort ebenfalls 2,54 gemessen.
      Nicht angefasst, eine Seite nach der anderen.

   Die Logo-Hoehe selbst steht NICHT hier, sie steht im Customizer als
   logo_height, weil dessen Inline-CSS im Kopf jede Regel aus dieser Datei
   ueberschreibt. Dort auf 45 gesetzt.
   ========================================================================== */

.ts-logo {
    padding-right: 30px;
}

.ts-header-phone,
.ts-header-phone .ts-header-phone-text {
    color: #1a1d23;
}

.ts-header-phone:hover,
.ts-header-phone:hover .ts-header-phone-text {
    color: #1a1d23;
}

@media (max-width: 768px) {
    /* Auf dem Handy ist die Nummer nur ein Zeichen, und daneben steht der Korb.
       Dort waere der Innenabstand verschenkte Breite. */
    .ts-logo {
        padding-right: 8px;
    }
}