/* Kopfzeile: leichte Bewegung beim Drüberfahren (08.10.2026, Michas Wunsch).
   Eigene Datei nach fusszeile.css, styles.css bleibt unberührt.
   Nur mit Maus und ohne „weniger Bewegung“; am Handy ändert sich nichts.
   Bewegt wird über translate/rotate/scale statt transform, damit die vorhandenen
   transform-Animationen (Sonne beim Umschalten, Herz-Hüpfer) unberührt bleiben. */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

  /* 1. Menüpunkte: der gezeigte hebt sich leicht, die anderen treten zurück,
        der Strich kommt von links und läuft nach rechts wieder weg. */
  .main-nav a { transition: color .2s, opacity .3s ease, translate .3s var(--ease); }
  .main-nav:has(a:hover) a:not(:hover) { opacity: .42; }
  .main-nav a:hover { color: var(--paper); translate: 0 -1px; }
  .main-nav a::after { transform-origin: right; transition-duration: .35s; }
  .main-nav a:hover::after { transform-origin: left; }

  /* 2. Logo: hebt sich ein wenig, der Spruch daneben wird hell. */
  .wordmark .brand-logo { transition: scale .4s var(--ease), translate .4s var(--ease); }
  .wordmark:hover .brand-logo { scale: 1.05; translate: 0 -1px; }
  .wordmark small { transition: color .25s; }
  .wordmark:hover small,
  :root[data-theme="light"] .wordmark:hover small { color: var(--paper); }

  /* 3. Symbole (Hell/Dunkel, Lupe, Merkliste, Tasche): weicher Glaskreis dahinter. */
  .header-tools :is(.header-icon, .bag-open) { position: relative; isolation: isolate; transition: scale .2s var(--ease); }
  .header-tools :is(.header-icon, .bag-open)::before {
    position: absolute;
    z-index: -1;
    inset: -2px -4px;
    border: 1px solid var(--glass-edge);
    border-radius: 999px;
    background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.13), rgba(255,255,255,.025) 72%);
    box-shadow: inset 0 1px 0 var(--glass-glint), 0 6px 16px rgba(0,0,0,.28);
    content: "";
    opacity: 0;
    scale: .55;
    pointer-events: none;
    transition: opacity .22s ease, scale .4s cubic-bezier(.34,1.5,.64,1);
  }
  .header-tools .bag-open::before { inset: -6px -6px -6px -8px; }
  .header-tools :is(.header-icon, .bag-open):is(:hover, :focus-visible)::before { opacity: 1; scale: 1; }
  .header-tools :is(.header-icon, .bag-open):active { scale: .92; }

  :root[data-theme="light"] .header-tools :is(.header-icon, .bag-open)::before {
    background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.95), rgba(255,255,255,.45) 72%);
    box-shadow: inset 0 1px 0 var(--glass-glint), 0 5px 14px rgba(var(--ink-rgb),.12);
  }
  /* Der helle Modus blendete Symbole beim Drüberfahren auf 60 % ab, jetzt zeigt der Kreis die Reaktion. */
  :root[data-theme="light"] button:is(.header-icon, .bag-open):hover { opacity: 1; }

  /* 4. Hell/Dunkel: nichts dreht sich (18.10.2026, Micha: „beim Drüberfahren soll sich das nicht drehen, irgendwas anderes“).
        Die Sonne geht an: ihr Kreis füllt sich weich, die Strahlen rücken ein Stück nach außen. Im hellen Modus füllt sich
        der Mond. Füllung über fill-opacity, weil fill: none → currentColor nicht weich übergeht. Das Drehen beim Klicken
        (extras.css/wechsel.css) bleibt. */
  .theme-icon :is(.theme-sun, .theme-moon) { fill: currentColor; fill-opacity: 0; transition: fill-opacity .35s ease; }
  .theme-icon .theme-rays { transform-box: fill-box; transform-origin: center; transition: scale .45s var(--ease); }
  .theme-toggle:hover :is(.theme-sun, .theme-moon) { fill-opacity: 1; }
  .theme-toggle:hover .theme-rays { scale: 1.16; }

  /* 5. Lupe: sucht einmal kurz hin und her. */
  .search-icon { transition: scale .3s var(--ease); }
  .search-open:hover .search-icon { scale: 1.1; animation: kopf-lupe .9s var(--ease); }

  /* 6. Merkliste: Herzschlag (nicht während des Hüpfers beim Merken). */
  .saved-open:not(.is-bumping):hover > span { animation: kopf-herz .85s ease-in-out; }

  /* 7. Tasche: schwingt am Henkel, der Zählerkreis wird hell. */
  .bag-icon { transform-origin: 50% 18%; }
  .bag-open:hover .bag-icon { animation: kopf-tasche .85s var(--ease); }
  .bag-count { transition: border-color .25s, scale .35s cubic-bezier(.34,1.5,.64,1); }
  .bag-open:hover .bag-count { border-color: currentColor; scale: 1.08; }

  /* 8. Sprache: die nicht gewählte Flagge hebt sich und bekommt Farbe (Farbe stand schon in wechsel.css). */
  .language-choice:not(.is-active):hover { color: var(--paper); }
  .language-choice .flagge svg { transition: filter .3s ease, opacity .3s ease, translate .3s var(--ease); }
  .language-choice:not(.is-active):hover .flagge svg { translate: 0 -1px; }
}

@keyframes kopf-lupe {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  25% { translate: -2px -1px; rotate: -12deg; }
  55% { translate: 1px -2px; rotate: 7deg; }
  80% { translate: .5px 0; rotate: -2deg; }
}
@keyframes kopf-herz {
  0%, 64%, 100% { scale: 1; }
  18% { scale: 1.2; }
  32% { scale: .95; }
  48% { scale: 1.1; }
}
@keyframes kopf-tasche {
  0%, 100% { rotate: 0deg; }
  22% { rotate: -12deg; }
  46% { rotate: 8deg; }
  68% { rotate: -4deg; }
  86% { rotate: 1.5deg; }
}

/* Shop im Menü sticht heraus (20.10.2026, Michas „hier soll Shop ein bisschen herausstechen“): feine runde Umrandung wie ein
   kleiner Knopf, beim Drüberfahren hell gefüllt, auf der Shop-Seite selbst gefüllt (aria-current). Gilt auch im Drop-Modus,
   server.mjs setzt den Shop-Link dort ebenfalls auf /shop. */
.site-header .main-nav a[href="/shop"] { margin: -7px 0; padding: 7px 13px; border: 1px solid color-mix(in srgb, var(--paper) 50%, transparent); border-radius: 999px; color: var(--paper); font-weight: 700; transition: color .2s, background-color .25s ease, border-color .25s ease, opacity .3s ease, translate .3s var(--ease); }
.site-header .main-nav a[href="/shop"]::after { display: none; }
.site-header .main-nav a[href="/shop"][aria-current="page"],
:root[data-theme="light"] .site-header .main-nav a[href="/shop"][aria-current="page"] { border-color: var(--paper); color: var(--black); background: var(--paper); }
.mobile-nav a[href="/shop"] { font-weight: 700; }

/* Drüberfahren (20.10.2026, „soll cool animiert sein“): die Buchstaben (shop-eingang.js) rollen leicht versetzt nach oben
   weg, von unten kommen dieselben in der Gegenfarbe nach, und die Füllung steigt im selben Tempo von unten in den Knopf.
   So stehen die neuen Buchstaben immer schon auf der Füllung, nie dunkel auf dunkel. Maus weg: alles rollt zurück. */
.site-header .main-nav a[href="/shop"] { position: relative; overflow: hidden; isolation: isolate; }
.site-header .main-nav a[href="/shop"]::before { position: absolute; z-index: -1; inset: 0; background: var(--paper); content: ""; transform: scaleY(0); transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.7, 0, .2, 1); }
.menue-rolle { display: inline-flex; overflow: hidden; vertical-align: top; }
.menue-zeichen { position: relative; display: inline-block; transition: translate .45s cubic-bezier(.7, 0, .2, 1) calc(var(--i, 0) * 30ms); }
.menue-zeichen::after { position: absolute; top: 100%; left: 0; color: var(--black); content: attr(data-z); }
.site-header .main-nav a[href="/shop"][aria-current="page"] .menue-zeichen::after { color: var(--black); }
@media (hover: hover) and (pointer: fine) {
  .site-header .main-nav a[href="/shop"]:hover { border-color: var(--paper); }
  .site-header .main-nav a[href="/shop"]:hover::before { transform: scaleY(1); }
  .site-header .main-nav a[href="/shop"]:hover .menue-zeichen { translate: 0 -100%; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .main-nav a[href="/shop"]::before, .menue-zeichen { transition: none; }
}

/* Heller Modus vorerst aus (27.10.2026, Micha: „beim Draufklicken cool animiert Coming Soon, in Bearbeitung“), Skript
   store.js startThemeToggle. Die Sonne flackert wie eine Glühbirne, die nicht angeht. Unter der Kopfzeile rollt vom Knopf
   (oben rechts) ein Absperrband nach links ab, leicht schräg, oben und unten Warnstreifen, in der Mitte läuft die Schrift.
   Nach knapp drei Sekunden reißt es ab: kippt, fällt ein Stück und verblasst. Bewegt werden clip-path (nur beim Abrollen),
   transform und opacity. --bald-top: Unterkante der Kopfzeile, gemessen beim Tippen. */
.theme-toggle.is-flackert .theme-icon { animation: birne-flackert .9s linear both; }
@keyframes birne-flackert {
  0%, 9%, 21%, 36%, 58%, 100% { opacity: 1; }
  5%, 16%, 30%, 44% { opacity: .15; }
  12%, 26% { opacity: .7; }
  48% { opacity: .35; }
}
.theme-toggle.is-flackert .theme-sun { animation: birne-glimmt .9s linear both; }
@keyframes birne-glimmt {
  0%, 100% { fill-opacity: 0; }
  10%, 24% { fill-opacity: 1; }
  14%, 30% { fill-opacity: .2; }
}

.bald-band {
  position: fixed; z-index: 29; top: var(--bald-top, 62px); right: -24px; left: -24px; display: flex; height: 46px;
  align-items: center; overflow: hidden; color: var(--black); background: var(--paper);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .5); pointer-events: none; visibility: hidden; transform-origin: 100% 0;
}
/* Warnstreifen oben und unten */
.bald-band::before, .bald-band::after {
  position: absolute; right: 0; left: 0; height: 6px;
  background: repeating-linear-gradient(-45deg, var(--black) 0 7px, var(--paper) 7px 14px); content: "";
}
.bald-band::before { top: 0; }
.bald-band::after { bottom: 0; }
.bald-lauf { display: flex; flex: none; white-space: nowrap; animation: bald-laeuft 11s linear infinite; }
.bald-lauf > span { display: flex; align-items: center; gap: 14px; padding-right: 14px; }
.bald-lauf b { font: 800 19px/1 var(--display); letter-spacing: -.02em; }
.bald-lauf i { font: 9px/1 var(--mono); font-style: normal; letter-spacing: .16em; }
.bald-lauf i::after { margin-left: 14px; content: "✕"; font-size: 10px; }
@keyframes bald-laeuft { to { transform: translateX(-50%); } }

.bald-band.is-da { visibility: visible; animation: band-rollt .5s cubic-bezier(.3, .9, .3, 1) both; }
.bald-band.is-weg { visibility: visible; animation: band-reisst .42s cubic-bezier(.6, 0, .8, .4) both; }
@keyframes band-rollt {
  0% { clip-path: inset(0 0 0 100%); transform: rotate(0deg); }
  70% { clip-path: inset(0); transform: rotate(-2.4deg); }
  100% { clip-path: inset(0); transform: rotate(-1.6deg); }
}
@keyframes band-reisst {
  0% { opacity: 1; transform: rotate(-1.6deg); }
  25% { opacity: 1; transform: rotate(-3.5deg) translateY(4px); }
  100% { opacity: 0; transform: rotate(5deg) translateY(46px); }
}
@media (max-width: 680px) {
  .bald-band { height: 40px; }
  .bald-lauf b { font-size: 16px; }
  .bald-lauf i { font-size: 8px; letter-spacing: .13em; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle.is-flackert .theme-icon, .theme-toggle.is-flackert .theme-sun { animation: none; }
  .bald-lauf { animation: none; }
  .bald-band.is-da { animation: bald-sanft .2s ease both; }
  .bald-band.is-weg { animation: bald-sanft .2s ease reverse both; }
}
@keyframes bald-sanft { from { opacity: 0; } to { opacity: 1; } }