/* Vögel auf der Navigation (nur dev, Test seit 30.10.2026) — Mechanik in files/layout/js/voegel.js.
   Das Skript legt div.hs-voegel in #header und darin je Vogel span.hs-vogel[data-art] >
   span.hs-vogel__blick > svg. Lage per transform (Fußpunkt = Oberkante des Buchstabens),
   Blickrichtung per scale am __blick, alles andere über die Zustandsklassen unten. */
.hs-voegel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.hs-vogel {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--hs-vogel-b, 21px);
  opacity: 0;
  will-change: transform;
}
.hs-vogel--da { opacity: 1; }
.hs-vogel__blick {
  display: block;
  translate: -50% -100%;
  transform-origin: 50% 100%;
  transition: scale .14s ease-out;
}
.hs-vogel--links .hs-vogel__blick { scale: -1 1; }
.hs-vogel svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
/* Im Dunkeln ein Hauch Kontur, sonst verschwinden Gimpelkopf und dunkle Schwänze im Grund */
html[data-theme="dark"] .hs-vogel svg { filter: drop-shadow(0 0 .6px rgb(255 255 255 / .55)); }

/* ── Arten: Blaumeise, Rotkehlchen, Gimpel */
.hs-vogel[data-art="meise"] {
  --ruecken: #a3b23a; --bauch: #f3cf3a; --brust: #f3cf3a; --kopf: #fbfbf7; --kappe: #2f86d0;
  --wange: #fbfbf7; --streif: #1f3550; --kragen: #1f3550; --kehle: #1f3550;
  --fluegel: #3478c0; --binde: #f4f4f0; --schnabel: #2b2b2b; --beine: #5d6a80;
}
.hs-vogel[data-art="rotkehlchen"] {
  --ruecken: #8b7650; --bauch: #f2ebdf; --brust: #e8692c; --kopf: #e8692c; --kappe: #8b7650;
  --wange: #e8692c; --kehle: #e8692c; --fluegel: #75623f; --schnabel: #2b2b2b; --beine: #8a6f55;
}
.hs-vogel[data-art="gimpel"] {
  --ruecken: #8e939b; --bauch: #e8e6e2; --brust: #e0503a; --kopf: #1c1c1e; --kappe: #1c1c1e;
  --wange: #e0503a; --kehle: #1c1c1e; --fluegel: #25262a; --binde: #e9e9e9; --schnabel: #1c1c1e;
  --beine: #6a5a50; --schwanz: #1c1c1e;
}
.hs-vogel__ruecken { fill: var(--ruecken); }
.hs-vogel__schwanz { fill: var(--schwanz, var(--fluegel)); }
.hs-vogel__bauch { fill: var(--bauch); }
.hs-vogel__brust { fill: var(--brust); }
.hs-vogel__kopf { fill: var(--kopf); }
.hs-vogel__kappe { fill: var(--kappe); }
.hs-vogel__wange { fill: var(--wange); }
.hs-vogel__streif { fill: var(--streif, transparent); }
.hs-vogel__kragen { fill: none; stroke: var(--kragen, transparent); stroke-width: 1.5; }
.hs-vogel__kehle { fill: var(--kehle); }
.hs-vogel__fluegel, .hs-vogel__schwinge { fill: var(--fluegel); }
.hs-vogel__binde { fill: var(--binde, transparent); }
.hs-vogel__auge { fill: #1b1b1b; }
.hs-vogel__glanz { fill: #fff; }
.hs-vogel__schnabel { fill: var(--schnabel); }
.hs-vogel__beine { fill: none; stroke: var(--beine); stroke-width: 1.3; stroke-linecap: round; }

.hs-vogel__leib {
  transform-box: view-box;
  transform-origin: 20px 31px;
  transition: transform .18s ease-out;
}
.hs-vogel__schwinge {
  display: none;
  transform-box: view-box;
  transform-origin: 18px 16.4px;
}

/* beobachtet den Zeiger: aufgerichtet, Kopf hoch */
.hs-vogel--wach .hs-vogel__leib { transform: rotate(-8deg) scale(1, 1.06); }

/* Flug: Schwinge statt angelegtem Flügel, Beine angezogen */
.hs-vogel--fliegt :is(.hs-vogel__fluegel, .hs-vogel__binde, .hs-vogel__beine) { display: none; }
.hs-vogel--fliegt .hs-vogel__schwinge {
  display: inline;
  animation: hs-vogel-schlag .13s ease-in-out infinite alternate;
}
.hs-vogel--gleitet .hs-vogel__schwinge { animation-duration: .3s; }
@keyframes hs-vogel-schlag {
  from { transform: scaleY(1); }
  to   { transform: scaleY(-.75); }
}

/* Landen: kurz einfedern */
.hs-vogel--landet .hs-vogel__leib { animation: hs-vogel-landen .28s ease-out; }
@keyframes hs-vogel-landen {
  40% { transform: scale(1.1, .86); }
}

/* Tun im Sitzen (Namen beginnen mit hs-vogel-tun → das Skript räumt danach ab) */
.hs-vogel--picken .hs-vogel__leib { animation: hs-vogel-tun-picken .5s ease-in-out; }
@keyframes hs-vogel-tun-picken {
  25%, 45% { transform: rotate(28deg); }
  35% { transform: rotate(20deg); }
  70% { transform: rotate(0); }
}
.hs-vogel--huepfen .hs-vogel__blick { animation: hs-vogel-tun-huepfen .32s ease-out; }
@keyframes hs-vogel-tun-huepfen {
  45% { translate: -50% -125%; }
}
.hs-vogel--umschauen .hs-vogel__leib { animation: hs-vogel-tun-umschauen .9s ease-in-out; }
@keyframes hs-vogel-tun-umschauen {
  30%, 55% { transform: rotate(-12deg); }
  75% { transform: rotate(4deg); }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse), (max-width: 1023px) {
  .hs-voegel { display: none; }
}