/* KOPFZEILE (kopf.js) - Bauer A.
   Umbau nach Felix' PDF (28.10.2026): Menue-Knopf, Logo, Hauptnavigation
   Pokémon, Topps (seit 29.10.2026 einfache Links), Neuheiten, Suchfeld mit
   Vorschlaegen, Konto, Warenkorb. Grundstil (header.site, .header-inner,
   .logo, .icon-btn, .account-area, .link-btn, .cart-btn) kommt weiter aus
   styles.css. Das Fundament legt hier nur so viel an, dass die neue
   Kopfzeile bei 320 - 2560 px nicht ueberlaeuft und Suche und Menue
   benutzbar sind; die Gestaltung macht Bauer A. */

/* Hauptnavigation als Liste (Links wie "Neuheiten"). */
.hauptnav-liste { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hauptnav-punkt { position: relative; }
.hauptnav-link {
  display: inline-flex; align-items: center; height: 40px; padding: 0 12px; white-space: nowrap;
  font-size: 14px; font-weight: 600; text-decoration: none; color: rgba(255,255,255,.78);
  transition: color .25s ease;
}
.hauptnav-link:hover, .hauptnav-link[aria-current="page"], .hauptnav-link.active { color: #fff; }
.hauptnav-link[aria-current="page"], .hauptnav-link.active { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 8px; }


/* Suchfeld in der Kopfzeile (ab 1200 px); darunter klappt die Lupe es als
   Leiste unter der Kopfzeile auf (.suche-offen). */
.kopf-suche { position: relative; display: none; align-items: center; flex: 0 1 340px; min-width: 0; margin-left: auto; }
.kopf-suche input {
  width: 100%; height: 40px; padding: 0 44px 0 14px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #fff;
  font: inherit; font-size: 14px; -webkit-appearance: none; appearance: none;
}
.kopf-suche input::placeholder { color: rgba(255,255,255,.7); }
.kopf-suche input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,39,.25); }
.kopf-suche-los {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 40px; padding: 0;
  border: none; background: none; color: #fff; cursor: pointer;
}
.such-vorschlaege[hidden] { display: none; }
#sucheOeffnen { margin-left: auto; }
@media (min-width: 1200px) {
  .kopf-suche { display: flex; }
  #sucheOeffnen { display: none; }
}
@media (max-width: 1199px) {
  header.site.suche-offen .kopf-suche {
    display: flex; position: absolute; left: 0; right: 0; top: 100%; margin: 0;
    padding: 10px 16px 12px; background: var(--navy); border-bottom: 1px solid rgba(201,162,39,.42);
  }
}

/* Menue-Knopf nur unter 1024 px; dort klappt er die Navigation als Feld
   unter der Kopfzeile auf (die Schublade von links baut Bauer A). */
.menue-knopf { display: none; }
@media (max-width: 1023px) {
  .menue-knopf { display: inline-grid; }
  .hauptnav { display: none; }
  header.site.menue-offen .hauptnav {
    display: block; position: absolute; left: 0; right: 0; top: 100%; width: auto; margin: 0;
    padding: 8px 16px 16px; border: 0; border-radius: 0; background: var(--navy);
    border-bottom: 1px solid rgba(201,162,39,.42);
    max-height: calc(100vh - var(--kopf-hoehe) - var(--leiste-hoehe)); overflow-y: auto;
  }
  header.site.menue-offen .hauptnav-liste { flex-direction: column; align-items: stretch; }
  header.site.menue-offen .hauptnav-link {
    flex: none; width: 100%; height: 44px; justify-content: space-between; border-radius: 8px;
  }
}

/* Handy: Menue, Logo, Lupe, Konto und Warenkorb passen bis 320 px in EINE
   Zeile (styles.css laesst sie sonst umbrechen - angemeldet mit mehr
   Knoepfen tun sie das weiter, statt seitlich ueberzustehen). */
@media (max-width: 380px) {
  .header-inner { gap: 4px; padding-left: 12px; padding-right: 12px; }
  .logo-bild { height: 30px; }
}

/* Angemeldet (Breitenpruefung fund2, 29.10.2026): mit Verwaltung, Konto
   und Abmelden stand der Warenkorb bei 1024-1100 px rechts ueber den Rand
   (neben der jetzt sichtbaren Navigation). Bis 1279 px zeigen Verwaltung
   und Abmelden deshalb nur ihr Zeichen (wie am Handy), die Beschriftung
   bleibt fuer Vorleser. Abgemeldet aendert sich nichts. */
@media (max-width: 1279px) {
  .account-area:has(#logoutBtn) .lbl {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .account-area:has(#logoutBtn) .link-btn .ico { display: block; }
  .account-area:has(#logoutBtn) .link-btn, .account-area:has(#logoutBtn) .admin-link {
    justify-content: center; min-width: 44px; padding: 0;
  }
}

/* Tippflaechen >= 44 px (SPEC §2) auf allen Touch-Breiten: styles.css macht
   die Knoepfe der Kopfzeile erst bis 640 px 44 px gross, darueber 40 px,
   den Konto-Link immer 40 px. Unter 1024 px (Menue-Knopf statt Navigation)
   gilt deshalb hier 44 px; schrumpfen duerfen die Knoepfe nicht (bei 641 px
   angemeldet wurden Menue und Lupe sonst schmaler). Das Logo bekommt eine
   44 px hohe Trefferflaeche, ohne selbst groesser zu werden. */
@media (max-width: 1023px) {
  header.site .icon-btn, header.site .link-btn, header.site .admin-link, header.site .cart-btn,
  header.site .account-link { flex-shrink: 0; min-width: 44px; height: 44px; }
  header.site .account-link { width: 44px; }
  header.site .logo { min-height: 44px; }
}