/* ── Kopf: Konto und Warenkorb (Christopher, 07.11.2026) ──────────────────────────
   Runde Knöpfe wie der Burger (grund.css), Zahl in Gold wie .sh-korb-zahl im Shop.
   Der Warenkorb trägt `hidden`, bis kopfkorb.js etwas im Korb gemessen hat. */
.kopf-konto, .kopf-korb{
  position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:42px; height:42px; border-radius:50%; background:var(--blau-zart); color:var(--blau);
  text-decoration:none; transition:background .25s, transform .25s var(--weich) }
.kopf-konto:hover, .kopf-korb:hover{ background:var(--blau); color:#fff; transform:translateY(-1px) }
.kopf-korb[hidden]{ display:none }
.kopf-korb-zahl{
  position:absolute; top:-3px; right:-3px; min-width:19px; height:19px; padding:0 5px; border-radius:99px;
  background:var(--gold); color:#2A2113; font-size:.7rem; font-weight:900; line-height:19px; text-align:center;
  box-shadow:0 0 0 2px rgba(255,255,255,.95) }
.schublade a[data-kopf-korb][hidden]{ display:none }
.schublade .kopf-korb-zahl{ position:static; display:inline-block; margin-left:.4em; vertical-align:middle; box-shadow:none }
@media (max-width:1060px){
  .kopf-konto, .kopf-korb{ width:40px; height:40px }
}
@media (max-width:420px){
  .kopf-rechts{ gap:.35rem }
  .kopf-rechts .knopf{ padding:.6em .9em; font-size:.82rem }
}