/* === ICR CARS – Mobile/Desktop Fixes v5 (clean) === */

/* --- Desktop (default): alles wie vorher --- */
.menu-btn{ display:none; }            /* Burger nur auf Mobile sichtbar */
.nav-ig{ display:inline-flex; }       /* IG bleibt sichtbar am Desktop */
.nav-wa{ display:inline-flex; }       /* WA bleibt sichtbar am Desktop */

/* Kartenbilder: sauber füllen */
.card .media{ aspect-ratio: 16/9; }
.card .media img{ width:100% !important; height:100% !important; object-fit:cover !important; max-height:none !important; }

/* Footer-Spalten stacken */
@media (max-width: 640px){
  .foot .grid{ grid-template-columns: 1fr !important; row-gap:10px; }
  .foot .grid > *{ margin-bottom:6px; }
}

/* Abstand unter Sticky-Header im Hero */
@media (max-width: 640px){
  .site-header + .wrap.hero{ padding-top:24px !important; }
  .hero-copy h1{ margin-top:6px !important; line-height:1.12; }
}

/* --- Apple-Style Mobile Header (nur <=640px) --- */
@media (max-width: 640px){
  .site-header .wrap{ position:relative; flex-wrap:nowrap; }
  .site-header .brand span{ display:none; } /* kompaktes Logo */
  /* Menü standardmäßig zu, Burger sichtbar */
  .menu-btn{ 
    display:inline-flex; width:34px; height:34px; border:0; border-radius:50%;
    background: rgba(255,255,255,.12); color:#fff; align-items:center; justify-content:center;
  }
  /* WA komprimiert nur am Handy */
  .nav-wa{ width:34px; height:34px; padding:0 !important; border-radius:50%; align-items:center; justify-content:center; }
  .nav-wa span{ display:none !important; }
  /* IG am Handy ausblenden (Platz) */
  .nav-ig{ display:none !important; }
  /* Actions garantiert sichtbar (überschreibt alte v3-Regel) */
  .site-header .nav-actions{ display:inline-flex !important; margin-left:auto; gap:8px; }

  /* Dropdown-Navigation */
  .site-nav{
    display:none !important;
    position:absolute; left:0; right:0; top:100%;
    background: rgba(22,22,23,.98);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    padding: 8px 16px 12px; border-bottom:1px solid rgba(255,255,255,.08);
  }
  .site-header.open .site-nav{ display:grid !important; gap:8px; }
  .site-nav a{ display:block; padding:10px 2px; color:#fff; border-radius:8px; }
  .site-nav a:active{ background: rgba(255,255,255,.08); }

  body.menu-open{ overflow:hidden; }
}

/* Sicherheit: kein horizontales Scrollen durch Layouts */
html, body{ max-width:100%; overflow-x:hidden; }


/* === v6: Apple-like animation + Desktop zentriert === */

/* Desktop: Nav wirklich mittig, unabhängig von rechter Leiste */
@media (min-width: 861px){
  .site-header{
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
  .site-nav{ justify-self: center; }
  .nav-actions{ justify-self: end; margin-left: 0 !important; }
}

/* Mobile: animiertes Dropdown (wie Apple) */
@media (max-width: 640px){
  .site-header{ position: sticky; top: 0; z-index: 1000; }
  .site-header .wrap{ position: relative; }
  .site-nav{
    position: absolute; left: 0; width: 100vw; right: 0; top: 100%;
    background: rgba(22,22,23,.98);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    padding: 10px 16px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: grid !important;
    gap: 10px;
    /* Animationszustand (geschlossen) */
    opacity: 0; transform: translateY(-12px) scale(.98);
    visibility: hidden; pointer-events: none;
    transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
  }
  .site-header.open .site-nav{
    opacity: 1; transform: translateY(0) scale(1);
    visibility: visible; pointer-events: auto;
    transition: opacity .28s ease, transform .28s ease;
  }
  .site-nav a{ display:block; padding:12px 4px; color:#fff; border-radius:10px; font-weight:600; }
  .site-nav a:active{ background: rgba(255,255,255,.08); }

  /* Icons rechts: immer nebeneinander */
  .nav-actions{ display:flex !important; align-items:center; gap:8px; margin-left:auto; }
  .menu-btn{ display:inline-flex; width:34px; height:34px; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; align-items:center; justify-content:center; }
  .nav-wa{ width:34px; height:34px; padding:0 !important; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
  .nav-wa span{ display:none !important; }
  .nav-ig{ display:none !important; } /* Platz sparen auf Mobile */
}


/* === v7: Revert Desktop card size + keep Mobile cover only; fix desktop icon wrapping === */

/* Desktop: Karten wie vorher (kleiner), Icons rechts nicht umbrechen */
@media (min-width: 861px){
  .card .media{ aspect-ratio: auto !important; }
  .card .media img{
    max-height: 220px !important;
    height: auto !important;
    object-fit: contain !important;
  }
  .nav-actions{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px;
  }
}

/* Mobile: Bild füllt Karte (nur hier) */
@media (max-width: 640px){
  .card .media{ aspect-ratio: 16/9 !important; }
  .card .media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-height: none !important;
  }
}


/* === v8: Light header, white dropdown, IG/WA inline === */

/* 0) Header-Ton: helles Grau + dunkle Schrift (für Desktop und Mobile) */
.site-header{
  background: rgba(250, 250, 252, .86) !important; /* sehr helles Grau */
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}
.site-header a, .site-header nav a{ color:#111 !important; }
.site-header a:hover{ color:#000 !important; }
.site-header .brand, .site-header .logo{ color:#111 !important; }

/* 1) Desktop: IG & WA nebeneinander halten */
@media (min-width: 861px){
  .nav-actions{ display:flex !important; align-items:center; gap:10px; flex-wrap: nowrap !important; }
  .nav-actions a{ display:inline-flex !important; }
  .nav-ig, .nav-wa{ display:inline-flex !important; }
}

/* 2) Mobile: Icons nicht umbrechen + weißes Menü */
@media (max-width: 640px){
  .nav-actions{ display:inline-flex !important; align-items:center; gap:8px; flex-wrap: nowrap !important; }
  /* Weißes Dropdown wie Apple (mit sanfter Animation kommt bereits aus v6) */
  .site-nav{
    background: rgba(255,255,255,.98) !important;
    color:#111 !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
  }
  .site-nav a{ color:#111 !important; }
  .site-nav a:active{ background: rgba(0,0,0,.06) !important; }
}


/* === v10: Mobile fixes — WA + Burger sichtbar; IG ausblenden; saubere Zentrierung === */
@media (max-width: 640px){
  .top.site-header{ position: sticky; top: 0; z-index: 1000; }
  .top.site-header{ display:flex !important; align-items:center; }
  .top.site-header .nav-actions{
    margin-left:auto;
    display:flex !important; align-items:center; gap:8px;
    flex-wrap: nowrap !important; white-space: nowrap !important;
  }
  /* IG auf Mobile ausblenden, damit Burger immer Platz hat */
  .top.site-header .nav-ig{ display:none !important; }
  /* WA-Icon als runder Button, sauber vertikal mittig */
  .top.site-header .nav-wa{
    display:inline-flex !important; width:34px; height:34px; border-radius:50%;
    align-items:center; justify-content:center; padding:0 !important; line-height:1;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
  }
  .top.site-header .nav-wa span{ display:none !important; }

  /* Burger immer sichtbar und neben WA */
  .menu-btn{
    display:inline-flex !important; width:34px; height:34px; border:0; border-radius:50%;
    background: rgba(0,0,0,.08); color:#111; align-items:center; justify-content:center;
  }

  /* Dropdown relativ zum Header positionieren */
  .top.site-header .site-nav{ position:absolute; left:0; right:0; top:100%; }

  /* Brand etwas kompakter, damit rechts mehr Platz bleibt */
  .top.site-header .brand img{ max-width: 38px; height:auto; }
  .top.site-header .brand span{ display:none; }
}


/* === v11: Mobile IG icon visible + darker header === */

/* Header: tick darker grey */
.top.site-header{
  background: rgba(242,244,248,.92) !important; /* slightly darker */
}

/* Mobile: IG circle icon next to WA (left), keep menu at far right */
@media (max-width: 640px){
  .top.site-header .nav-actions{
    display:flex !important; align-items:center; gap:8px;
    flex-wrap: nowrap !important; white-space: nowrap !important;
  }
  /* order: IG (0), WA (1), menu (2) */
  .top.site-header .nav-ig{ order:0; }
  .top.site-header .nav-wa{ order:1; }
  .menu-btn{ order:2; }

  /* compact IG button */
  .top.site-header .nav-ig{
    display:inline-flex !important;
    width:34px; height:34px; border-radius:50%;
    align-items:center; justify-content:center;
    padding:0 !important; line-height:1;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
  }
  .top.site-header .nav-ig span{ display:none !important; }
}