/* === Stadtkopierer Header (Farben & Suchfeld-Parameter) === */
:root{
  --brand:#5f1515;      /* dunkles Weinrot */
  --brand-2:#7a1313;    /* Hover-Farbe */
  --accent:#fca21c;     /* Gold/Orange */
  --nav-bg:#5f5f5f;     /* graue Navi-Leiste */
  --text:#000000;       /* Basis-Textfarbe */
  --muted:#770808;

  /* ← Hier Suchfeld steuern */
  --search-w: 820px;    /* Breite der Suche */
  --search-h: 46px;     /* Höhe der Suche (inkl. Border, dank border-box) */
}

/* Reset/Grundlagen */
*{box-sizing:border-box}
body{margin:0}
a{color:var(--brand);text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Grundgerüst */
.site-header{
  background: var(--brand) !important;
  color: var(--text) !important;
}
.site-header .header-wrap,
.site-header .nav-wrap{max-width:1800px;margin:0 auto;padding:10px 16px}

/* Alle Links im Header (weiß halten) */
header.site-header a,
header.site-header a:link,
header.site-header a:visited,
header.site-header a:active,
header.site-header a:hover,
header.site-header a:focus{
  color:#fff !important;
  text-decoration:none;
}

/* === Zeile 1: Logo + Suche (zentriert, schmal) === */
header.site-header .row-top{
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* links: Logo | Mitte: Suche | rechts: Spacer */
  gap:16px;
  align-items:center;
  margin-bottom:20px;
}
header.site-header .row-top .brand{
  grid-column:1;
  justify-self:start;
}
header.site-header .row-top .search{
  grid-column:2;
  justify-self:center;
  display:flex;
  align-items:center;
  width: var(--search-w);
  max-width: var(--search-w);
  height: var(--search-h);
  block-size: var(--search-h);        /* logisches Maß */
  border:2px solid var(--accent);
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  box-sizing:border-box;               /* Höhe inkl. Border */
}
header.site-header .row-top .search input{
  flex:1 1 0;                          /* darf schrumpfen */
  min-width:0;                         /* min-content umgehen */
  width:0;                             /* echtes Schrumpfen im Flex-Layout */
  height:100%;
  padding:0 10px;                      /* vertikale Höhe kommt vom Container */
  border:0;
  outline:0;
  font-size:16px;
  line-height:1;
  -webkit-appearance:none;
  appearance:none;
  box-sizing:border-box;
}
header.site-header .row-top .search button{
  flex:0 0 calc(var(--search-h) - 8px); /* kompakter Button passend zur Höhe */
  width:calc(var(--search-h) - 8px);
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
}
header.site-header .row-top .search svg{
  width:16px;height:16px;
}

/* === Zeile 2: Infoleiste === */
.row-info{
  margin-top:8px;
  font-size:.95rem; line-height:1.5;
  display:flex; gap:10px; flex-wrap:wrap;
  align-items:center; justify-content:center; text-align:center;
  color:#fff !important;
}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px;border-radius:600px;background:#5e5e5e;color:#fff}
.dot{opacity:.6}
.row-info .pill a{color:#fafafa !important}
.row-info .pill a:hover{color:var(--brand-2) !important}
.row-info svg{width:16px;height:16px;color:#fff;fill:#fff;stroke:#fff}
.row-info .pill svg [fill]{fill:#f8f4f4 !important}

/* === Zeile 3: Navigation === */
.main-nav{background:var(--nav-bg)}
.main-nav .nav-wrap{display:flex;align-items:center;gap:16px}

.hamburger{display:none}
.hamburger button{
  appearance:none;border:2px solid #fff;background:transparent;color:#fff;
  border-radius:8px;padding:8px 12px;cursor:pointer
}

.menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%}
.menu > li{position:relative}
.menu > li > a{
  display:block;color:#fff !important;padding:12px 14px;font-weight:400
}
.menu > li > a:hover{background:var(--brand-2)}
.menu > li.has-sub > a{background:var(--brand)}
.menu > li.has-sub:hover > a{background:var(--brand-2)}

/* Untermenü */
.submenu{
  position:absolute;left:0;top:100%;min-width:260px;background:#7a1313;color:#ffffff;
  border:1px solid transparent;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:8px;display:none;z-index:50
}
.submenu a{display:block;padding:10px 12px;border-radius:8px;color:#ffffff !important}
.submenu a:hover{background:var(--accent);color:#111 !important}

.menu > li.has-sub:focus-within > .submenu,
.menu > li.has-sub:hover > .submenu{display:block}

/* Responsive */
@media (max-width:1400px){
  header.site-header .row-top{
    grid-template-columns:1fr;  /* einspaltig */
  }
  header.site-header .row-top .brand{ justify-self:center; }
  header.site-header .row-top .search{
    grid-column:1;
    justify-self:center;
    width:min(var(--search-w), 92vw);
    max-width:min(var(--search-w), 92vw);
  }

  .hamburger{display:block}

  .menu{display:none;flex-direction:column;gap:0}
  .menu.open{display:flex}
  .menu > li > a{padding:14px 16px;border-top:1px solid rgba(255,255,255,.15)}

  .submenu{
    position:static;display:none;border:none;box-shadow:none;padding:0;background:transparent
  }
  .menu > li.has-sub.open > .submenu{display:block}
  .submenu a{padding:10px 16px;background:#7a1313;color:#ffffff !important}
}

/* Fokus (Accessibility) */
.main-nav .menu > li > a:focus-visible{
  outline:3px solid var(--brand-2);outline-offset:-3px;border-radius:8px
}

/* Header-Links: Typo */
header.site-header a{
  font-size:0.75rem;
  font-family:"sans-serif","Segoe UI",Roboto,Arial,sans-serif;
}

/* Dropdown-Typo angleichen */
header.site-header .submenu a{
  font-weight:500 !important;
  font-variation-settings:"wght" 500;
  font-synthesis-weight:none;
}

/* Warenkorb-Icon */
.nav-cart{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .5rem;color:#111;text-decoration:none}
.nav-cart .icon-cart{width:28px;height:28px;display:inline-block}
.nav-cart #cart-count{
  display:inline-block;min-width:18px;height:18px;padding:0 6px;border-radius:999px;
  background:#e11d48;color:#fff;font-size:12px;line-height:18px;text-align:center
}

/* === Finaler Guard (falls später noch CSS geladen wird) === */
header.site-header .row-top .search{
  width:var(--search-w) !important;
  max-width:var(--search-w) !important;
  height:var(--search-h) !important;
  block-size:var(--search-h) !important;
}
/* Logo-Größen zentral steuern */
:root{
  --logo-h: 60px;         /* Desktop-Höhe des Logos – hier kleiner/größer stellen */
  --logo-h-mobile: 32px;  /* Mobile-Höhe */
}

/* Logo links verkleinern */
header.site-header .row-top .brand{
  display:flex; align-items:center; /* sauber vertikal mittig */
}
header.site-header .row-top .brand img{
  height: var(--logo-h);
  width: auto;
  max-height: var(--logo-h);
  max-width: none;   /* überschreibt evtl. vorhandenes max-width:100% */
  display: block;
}

/* Optional: auf kleineren Screens noch kompakter */
@media (max-width: 1400px){
  header.site-header .row-top .brand img{
    height: var(--logo-h-mobile);
    max-height: var(--logo-h-mobile);
  }
}