:root {
    --primary-color: #003F7D;
    --primary-dark-color: #00538A;
}
@media (min-width:560px){
    .tab-search .row-main {
        background-image: url("../images/usa/search.webp");
    }
}

/* =========================================================================
   USA-REISEN EXPERTE · Camper IBE · Header & Footer
   Gemeinsames Stylesheet für usa-header.html und usa-footer.html
   -------------------------------------------------------------------------
   Offizielle Farbpalette ("USA FINAL"):
     --usa-navy    #003F7D   Navi-Leiste, Überschriften (primär)
     --usa-red     #D1111F   Akzent: Icons, Links-Hover, aktiver Schritt
     --usa-beige   #C9C7BB   Hintergrund (Footer & Schrittleiste)
     --usa-light   #F9F9F9   Navi-Text, helle Icon-Kreise
     #FFFFFF                 Weiß
   Einbinden:  <link rel="stylesheet" href="usa-ibe.css">
   ========================================================================= */

:root{
    --usa-navy:#003F7D;
    --usa-navy-2:#00538A;    /* helleres Navy (Hover) */
    --usa-red:#D1111F;
    --usa-red-dark:#A50E19;  /* erledigter Schritt */
    --usa-beige:#C9C7BB;
    --usa-light:#F9F9F9;
    --usa-circle:#ECEBE6;    /* helle Icon-Kreise in der Top-Leiste */
    --usa-text:#4a4a4a;
    --usa-font:"Helvetica Neue",Arial,"Segoe UI",sans-serif;
}
.usa *{ box-sizing:border-box !important; }
.usa{ font-family:var(--usa-font) !important; color:var(--usa-text) !important; line-height:1.4 !important; }
.usa a{ text-decoration:none !important; color:inherit !important; }

/* ---------- HEADER : Top-Leiste ---------- */
.usa-topbar{ background:#fff !important; }
.usa-topbar-inner{
    display:flex !important; align-items:center !important; justify-content:space-between !important;
    gap:24px !important; padding:14px 24px !important; max-width:1280px !important; margin:0 auto !important; flex-wrap:wrap !important;
}
.usa-logo img{ height:39px !important; width:auto !important; display:block !important; }
.usa-utils{ display:flex !important; align-items:center !important; gap:34px !important; flex-wrap:wrap !important; }
.usa-util{ display:flex !important; align-items:center !important; gap:12px !important; }
.usa-util .ico{
    width:44px !important; height:44px !important; border-radius:50% !important; background:var(--usa-circle) !important;
    display:flex !important; align-items:center !important; justify-content:center !important; flex:0 0 auto !important;
    transition:background .15s !important;
}
.usa-util .ico svg{ width:20px !important; height:20px !important; fill:var(--usa-red) !important; transition:fill .15s !important; }
.usa-util:hover .ico{ background:var(--usa-navy) !important; }
.usa-util:hover .ico svg{ fill:#fff !important; }
.usa-util-txt small{ display:block !important; font-size:12px !important; color:#777 !important; margin-bottom:2px !important; }
.usa-util-txt .lnk{ color:var(--usa-red) !important; font-weight:700 !important; font-size:14px !important; }
.usa-util-txt .lnk:hover{ color:var(--usa-navy) !important; text-decoration:underline !important; }

/* ---------- HEADER : Navy Navi-Leiste ---------- */
.usa-nav{ background:var(--usa-navy) !important; }
.usa-nav-inner{
    display:flex !important; align-items:center !important; justify-content:space-between !important;
    max-width:1280px !important; margin:0 auto !important; padding:0 24px !important;
}
.usa-menu{ list-style:none !important; margin:0 !important; padding:0 !important; display:flex !important; }
.usa-menu > li{ position:relative !important; }
.usa-menu > li > a{
    display:block !important; color:var(--usa-light) !important; font-weight:400 !important; letter-spacing:.4px !important;
    text-transform:uppercase !important; font-size:13.5px !important; padding:16px 15px !important; white-space:nowrap !important;
}
.usa-menu > li > a:hover,
.usa-menu > li:hover > a{ color:#fff !important; }
.usa-menu > li.has-sub > a::after{ content:"⌄" !important; margin-left:6px !important; font-size:12px !important; }

/* Dropdown – Ebene 1 */
.usa-sub{
    position:absolute !important; top:100% !important; left:0 !important; min-width:270px !important; background:#fff !important;
    box-shadow:0 12px 30px rgba(0,0,0,.18) !important; list-style:none !important; margin:0 !important; padding:0 !important;
    opacity:0 !important; visibility:hidden !important; transform:translateY(6px) !important; transition:.15s !important; z-index:40 !important;
}
.usa-menu > li:hover .usa-sub{ opacity:1 !important; visibility:visible !important; transform:none !important; }
.usa-sub > li{ position:relative !important; }
.usa-sub > li + li{ border-top:1px solid #e4e2da !important; }
.usa-sub > li > a{
    display:flex !important; align-items:center !important; justify-content:space-between !important; gap:16px !important;
    padding:14px 22px !important; color:var(--usa-navy) !important; font-size:13.5px !important; font-weight:400 !important;
    text-transform:uppercase !important; letter-spacing:.4px !important;
}
.usa-sub > li.has-sub2 > a::after{ content:"›" !important; color:#9aa7b4 !important; font-size:20px !important; line-height:1 !important; }
.usa-sub > li:hover > a{ color:var(--usa-red) !important; }
.usa-sub > li:hover > a::after{ color:var(--usa-red) !important; }

/* Dropdown – Ebene 2 (Flyout) */
.usa-sub2{
    position:absolute !important; top:0 !important; left:100% !important; min-width:260px !important; background:#fff !important;
    box-shadow:0 12px 30px rgba(0,0,0,.18) !important; list-style:none !important; margin:0 !important; padding:0 !important;
    opacity:0 !important; visibility:hidden !important; transform:translateX(6px) !important; transition:.15s !important; z-index:41 !important;
}
.usa-sub > li.has-sub2:hover > .usa-sub2{ opacity:1 !important; visibility:visible !important; transform:none !important; }
.usa-sub2 > li + li{ border-top:1px solid #e4e2da !important; }
.usa-sub2 a{ display:block !important; padding:13px 22px !important; color:var(--usa-navy) !important; font-size:13.5px !important;
    font-weight:400 !important; text-transform:uppercase !important; letter-spacing:.4px !important; line-height:1.35 !important; }
.usa-sub2 a:hover{ color:var(--usa-red) !important; }

.usa-search-btn{
    background:none !important; border:0 !important; cursor:pointer !important; padding:14px 4px 14px 18px !important;
    border-left:1px solid rgba(249,249,249,.3) !important; margin-left:6px !important;
}
.usa-search-btn svg{ width:22px !important; height:22px !important; fill:var(--usa-light) !important; }
.usa-search-btn:hover svg{ fill:#fff !important; }
.usa-burger{ display:none !important; }

/* =========================================================================
   IBE-native Schrittleiste (Suchen · Auswählen · Anpassen)
   Stylt die von der IBE (xnetco/AngularJS) selbst gerenderte .navbar-tabs.
   Bewusst NICHT in .usa gekapselt. !important überstimmt das IBE-Theme.
   ========================================================================= */
.navbar-tabs{
    /* margin-top positioniert die helle Leiste UNTER der navy Navi. 40px gleicht aus,
       dass unser Header höher ist als der Header-Container der IBE und die Navi sonst in
       die Tab-Leiste ragt. Falls der Header-Container später genug Höhe bekommt, kann der
       Wert reduziert/entfernt werden. L/R/B = 0 neutralisiert die negativen .row-Margins. */
    /*margin:40px 0 0 0 !important;*/
    padding:0 !important; background:var(--usa-light) !important; font-family:var(--usa-font) !important;
}
.navbar-tabs .nav-pills{
    display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:16px !important;
    list-style:none !important; margin:0 !important; padding:12px 24px !important;
}
.navbar-tabs .tab-pill{
    display:flex !important; align-items:center !important; float:none !important; list-style:none !important;
    margin:0 !important; padding:0 !important; background:none !important;
    font-weight:700 !important; font-size:14px !important; line-height:1 !important;
}
/* Von der IBE ausgeblendete Tabs (Neue Suche / Zurück zur Auswahl) verborgen lassen –
   sonst zeigt unser display:flex sie fälschlich an. */
.navbar-tabs .tab-pill.ng-hide{ display:none !important; }
.navbar-tabs .tab-pill a{
    color:var(--usa-navy) !important; text-decoration:none !important; cursor:pointer !important;
    padding:0 !important; background:none !important; transition:color .15s !important;
}
.navbar-tabs .tab-pill + .tab-pill::before{
    content:"»" !important; color:var(--usa-red) !important; font-weight:400 !important; margin-right:16px !important;
}
.navbar-tabs .tab-pill.active a{ color:var(--usa-red) !important; }
.navbar-tabs .tab-pill.disabled a{ color:#9a988e !important; cursor:default !important; }
.navbar-tabs .tab-pill:not(.active):not(.disabled) a{ color:var(--usa-red-dark) !important; }
.navbar-tabs .tab-pill:not(.disabled) a:hover{ color:var(--usa-red) !important; }

/* ---------- FOOTER ---------- */
.usa-footer{ background:var(--usa-light) !important; color:var(--usa-text) !important; padding:48px 0 40px !important; }
.usa-footer-grid{
    max-width:1280px !important; margin:0 auto !important; padding:0 40px !important;
    display:grid !important; grid-template-columns:1.1fr 1fr 1.3fr 1fr !important; gap:40px !important;
}
.usa-footer h4{
    font-size:15px !important; letter-spacing:.5px !important; text-transform:uppercase !important;
    color:var(--usa-navy) !important; margin:0 0 20px !important; font-weight:700 !important;
}
.usa-footer ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
.usa-footer ul li{ margin-bottom:14px !important; }
.usa-footer a:hover{ color:var(--usa-red) !important; }

.usa-contact-row{ display:flex !important; align-items:center !important; gap:12px !important; margin-bottom:16px !important; }
.usa-contact-row .ico{
    width:34px !important; height:34px !important; border-radius:50% !important; background:var(--usa-red) !important;
    display:flex !important; align-items:center !important; justify-content:center !important; flex:0 0 auto !important;
    transition:background .15s !important;
}
.usa-contact-row .ico svg{ width:16px !important; height:16px !important; fill:var(--usa-light) !important; }
.usa-contact-row:hover .ico{ background:var(--usa-navy) !important; }

.usa-social{ display:flex !important; gap:14px !important; margin-bottom:28px !important; }
.usa-social a{
    width:40px !important; height:40px !important; border-radius:50% !important; background:var(--usa-red) !important;
    display:flex !important; align-items:center !important; justify-content:center !important; transition:background .15s !important;
}
.usa-social svg{ width:20px !important; height:20px !important; fill:var(--usa-light) !important; }
.usa-social a:hover{ background:var(--usa-navy) !important; }
.usa-footer-logo img{ max-width:152px !important; height:auto !important; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
    .usa-footer-grid{ grid-template-columns:1fr 1fr !important; gap:32px !important; }
    .usa-topbar-inner{ flex-direction:column !important; align-items:flex-start !important; gap:18px !important; }
    .usa-utils{ gap:22px !important; }
    /* Mobil: nur WhatsApp-Kontakt zeigen */
    .usa-util--phone, .usa-util--anfrage{ display:none !important; }

    .usa-nav-inner{ flex-wrap:wrap !important; }
    .usa-burger{
        display:flex !important; align-items:center !important; gap:8px !important; color:#fff !important; font-weight:700 !important;
        background:none !important; border:0 !important; padding:15px 24px !important; cursor:pointer !important; font-size:14px !important;
        text-transform:uppercase !important;
    }
    .usa-burger svg{ width:24px !important; height:24px !important; fill:#fff !important; }

    .usa-menu{ display:none !important; }
    .usa-menu.is-open{ display:block !important; width:100% !important; order:3 !important; padding-bottom:6px !important; }
    .usa-menu > li{ position:static !important; border-top:1px solid rgba(249,249,249,.18) !important; }
    .usa-menu > li > a{ padding:14px 24px !important; }
    .usa-menu > li.has-sub > a::after{ float:right !important; }

    .usa-sub, .usa-sub2{
        position:static !important; width:100% !important; min-width:0 !important; box-shadow:none !important;
        opacity:1 !important; visibility:visible !important; transform:none !important; display:none !important;
    }
    .usa-menu > li.open > .usa-sub{ display:block !important; }
    .usa-sub > li.open > .usa-sub2{ display:block !important; }
    .usa-sub > li > a{ padding-left:38px !important; }
    .usa-sub2{ background:#f2f1ec !important; }
    .usa-sub2 a{ padding-left:52px !important; }
}
@media (max-width:560px){
    .usa-footer-grid{ grid-template-columns:1fr !important; }
    .usa-logo img{ height:33px !important; }
    .usa-utils{ flex-direction:column !important; align-items:flex-start !important; }
}