/* Geschenkkorb Guru: Navigation auf echte Seiten (13.09.). Ergänzt Kopf und Fuss aus
   f3.css und global.css, wird auf allen Seiten nach diesen geladen. Aufbau leicht an
   Loop & Tie angelehnt: wenige Punkte, ein Aufklappfeld, rechts Anmelden. */

.head nav.main{align-items:center;gap:24px}
.head nav.main a{color:var(--ink-2)}
.head nav.main a.aktiv{color:var(--ink)}
.head nav.main a.aktiv::after{transform:scaleX(1);background:var(--gold)}

/* Aufklappfeld „Anlässe" */
.nav-auf{position:relative;display:flex;align-items:center;gap:1px}
.head .nav-pfeil{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin:0;padding:0;border:0;border-radius:6px;background:transparent;color:var(--ink-3);cursor:pointer;line-height:0;box-shadow:none;min-height:0}
.head .nav-pfeil:hover{color:var(--ink);background:transparent}
.nav-pfeil svg{transition:transform .22s var(--out-quad,ease)}
.nav-auf.offen .nav-pfeil svg{transform:rotate(180deg)}
.nav-panel{position:absolute;top:calc(100% + 24px);left:50%;z-index:5;min-width:292px;padding:8px;display:grid;gap:2px;background:var(--white);border-radius:16px;box-shadow:0 26px 60px rgba(24,23,18,.14),0 0 0 1px var(--line-2);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .18s ease,transform .25s var(--out-quad,ease),visibility 0s linear .25s}
.nav-panel::before{content:"";position:absolute;left:0;right:0;top:-26px;height:26px}
.nav-auf.offen .nav-panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
@media (hover:hover){.nav-auf:hover .nav-panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}.nav-auf:hover .nav-pfeil svg{transform:rotate(180deg)}}
.head nav.main .nav-panel a{display:grid;gap:1px;padding:11px 14px;border-radius:10px;text-decoration:none;color:var(--ink)}
.head nav.main .nav-panel a::after{content:none}
.head nav.main .nav-panel a:hover,.head nav.main .nav-panel a[aria-current]{background:var(--cream)}
.nav-panel b{font-weight:500;font-size:14.5px;line-height:1.35}
.nav-panel span{font-size:13px;line-height:1.35;color:var(--ink-3)}

/* Rechts: Anmelden statt Telefon */
.head .anmelden{font-size:14px;color:var(--ink-2);text-decoration:none;padding:6px 8px;border-radius:var(--pill);white-space:nowrap}
.head .anmelden:hover{color:var(--ink);background:var(--cream)}
.head .tel{display:none}

/* Burger früher, damit die fünf Punkte nie gequetscht werden */
@media (max-width:1120px){.head nav.main{display:none}.head .burger{display:inline-flex}.head .anmelden{display:none}.head .head-actions{margin-left:auto}}

/* Burger-Menü */
.menue-nav a.aktiv{color:var(--gold-deep)}
.menue-nav a:has(+ .menue-unter){border-bottom:0}
.menue-unter{display:grid;gap:0;padding:0 0 10px 2px;border-bottom:1px solid var(--line-2)}
.menue-nav .menue-unter a{font-family:var(--sans);font-size:15.5px;line-height:1.3;padding:7px 0 7px 16px;border:0;color:var(--ink-2);position:relative}
.menue-nav .menue-unter a::before{content:"";position:absolute;left:0;top:50%;width:8px;height:1.5px;background:var(--gold)}
.menue-nav .menue-unter a[aria-current]{color:var(--gold-deep)}
.menue-fuss .btn{flex:1 1 auto}

/* Fuss mit fünf Spalten */
.foot-in{grid-template-columns:1.5fr repeat(4,1fr);gap:40px}
@media (max-width:1180px){.foot-in{grid-template-columns:repeat(4,1fr);gap:40px 28px}.foot-brand{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--black-line)}.foot-brand p{margin:0}}
@media (max-width:760px){.foot-in{grid-template-columns:1fr 1fr}}

/* Warenkorb im Kopf, auf allen Seiten (Direktbestellung 14.09.) */
.head .cartlink{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--ink);text-decoration:none;flex:none;transition:background-color .15s}
.head .cartlink:hover{background:var(--cream)}
.head .cartzahl{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#6FA52C;color:#fff;font:600 11px/18px var(--sans);text-align:center}
@media (max-width:520px){.head .cartlink{width:34px;height:34px}.head .cartlink svg{width:18px;height:18px}}

/* Handy: Kopf mit Warenkorb, Angebotsknopf und Menü passt auch bei 360 px (16.09.)
   23.09.: Julian: Logo, Warenkorb und Menüknopf zu klein, der Menüknopf klebte am Rand und
   war schwer zu treffen. Gemessen war auf Shopseiten reichlich Platz (169 px frei bei 390),
   eng ist nur die Startseite mit dem Angebotsknopf (40 px frei). Deshalb eine zweite Stufe
   für kleine Geräte. Die Trefferfläche der beiden Knöpfe reicht unsichtbar über den Rand
   hinaus, damit ein Daumen sie sicher erwischt, ohne dass sie optisch grösser wirken. */
/* Julian 23.09.: Der Angebotsknopf gehört am Handy nicht in die Kopfzeile. Auf der Anfrageseite
   stand er sogar neben sich selbst. Er steht im Menü an vorletzter Stelle, der Weg bleibt also da.
   Ohne ihn ist Platz: bei 360 px bleiben rund 70 px frei, auch mit dem grösseren Logo. */
@media (max-width:520px){.head .head-actions .btn{display:none!important}}
@media (max-width:520px){.head .head-in{gap:8px!important;padding:9px 12px 9px 14px!important}.head .brand img{height:25px!important;width:auto}.head .head-actions{gap:6px!important}.head .cartlink{width:42px!important;height:42px!important}.head .cartlink svg{width:22px!important;height:22px!important}.head .burger{width:42px!important;height:42px!important}.head .burger svg{width:23px!important;height:23px!important}.head .cartlink,.head .burger{position:relative}.head .cartlink::after,.head .burger::after{content:"";position:absolute;inset:-5px}}
@media (max-width:340px){.head .brand img{height:21px!important}.head .cartlink,.head .burger{width:38px!important;height:38px!important}}