/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   Der Kobold in der Kopfleiste — v4.779 (Figur), v4.780 (Reaktionen), v4.783 (Kostüme, Anlässe,
   Überraschungen, Verstecken, Abseilen). Peters Wunsch (08.09.2026): „ein bisschen als Gag und Spaß“.
   Regeln: eine Transform je Bild, keine Layoutarbeit; nur die Figur ist anklickbar, nie die Bahn;
   bei Mein Konto → Bewegungen „Aus“ steht alles still; Hell und Dunkel; keine Töne, keine Sprechblasen.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
/* Die Bahn reicht bis an die Fahnen und die rechten Knöpfe heran (negativer Rand = der Zwischenraum der Zeile), damit der Kobold
   beim Verstecken genau an ihrer Kante verschwindet und nicht kurz davor in der Luft. */
/* Kein overflow:hidden: das nähme Schild, Nikolausmütze und Schirm den Kopf ab. Der Ausschnitt klemmt nur links und rechts
   (Verstecken) und unten, nach oben bleiben 16 Bildpunkte Luft in den Rand der Kopfleiste. */
.thKobold{flex:1 1 auto;min-width:0;align-self:stretch;position:relative;overflow:visible;clip-path:inset(-16px 0 0 0);margin:0 -8px;pointer-events:none;min-height:38px}
@media(max-width:980px){.thKobold,.thKoboldFrei{display:none!important}}
.thKobold .kb{position:absolute;left:0;bottom:2px;width:32px;height:28px;will-change:transform;pointer-events:auto;cursor:pointer;touch-action:none}
.thKobold .kb.getragen{cursor:grabbing}
.thKobold .kb.weg{visibility:hidden}
.thKobold .kbHop,.thKoboldFrei .kbHop{width:32px;height:28px}
.thKobold svg,.thKoboldFrei svg{width:32px;height:28px;display:block;overflow:visible}
.thKobold .kb.links svg,.thKoboldFrei .kb.links svg{transform:scaleX(-1)}
.thKobold .kbPunkte rect,.thKobold .kbZ rect,.thKoboldFrei .kbZ rect{fill:var(--sbFaint,#93a5ba)}

/* ── Gelenke: feste Drehpunkte im Koordinatensystem der Figur (view-box), damit Hüte und Handgegenstände
      den Drehpunkt nicht verschieben ─────────────────────────────────────────────────────────────── */
.thKobold .kbAuge,.thKoboldFrei .kbAuge{transform-box:fill-box;transform-origin:center}
.thKobold .kbRumpf,.thKoboldFrei .kbRumpf{transform-box:view-box;transform-origin:16px 20px}
.thKobold .kbArmL,.thKoboldFrei .kbArmL{transform-box:view-box;transform-origin:4px 10px}
.thKobold .kbArmR,.thKoboldFrei .kbArmR{transform-box:view-box;transform-origin:28px 10px}
.thKobold .kbBein,.thKoboldFrei .kbBein{transform-box:fill-box;transform-origin:center top}

/* ── Zubehör: alles unsichtbar, bis eine Klasse es zeigt ──────────────────────────────────────── */
.thKobold .kbHut,.thKobold .kbHand,.thKobold .kbTrage,.thKobold .kbDecke,.thKobold .kbBrille,.thKobold .kbSchal,.thKobold .kbAugeX,.thKobold .kbUhr,.thKobold .kbSchild,.thKobold .kbLaptop,
.thKoboldFrei .kbHut,.thKoboldFrei .kbHand,.thKoboldFrei .kbTrage,.thKoboldFrei .kbDecke,.thKoboldFrei .kbBrille,.thKoboldFrei .kbSchal,.thKoboldFrei .kbAugeX,.thKoboldFrei .kbUhr,.thKoboldFrei .kbSchild,.thKoboldFrei .kbLaptop{display:none}
.thKobold .kb.hut-zoll .hutZoll,.thKobold .kb.hut-helm .hutHelm,.thKobold .kb.hut-kapitaen .hutKapitaen,.thKobold .kb.hut-nikolaus .hutNikolaus,.thKobold .kb.hut-schirm .hutSchirm{display:block}
.thKobold .kb.hoert .hutKopfhoerer{display:block}
.thKobold .kb.hand-rechner .handRechner,.thKobold .kb.hand-kalender .handKalender,.thKobold .kb.hand-umschlag .handUmschlag,.thKobold .kb.hand-mondkuchen .handMondkuchen{display:block}
.thKobold .kb.trinkt .handTasse,.thKobold .kb.lehnt .handTasse,.thKobold .kb.isst .handBrot,.thKobold .kb.uhr .kbUhr,.thKobold .kb.schild .kbSchild{display:block}
.thKobold .kb.brille .kbBrille,.thKobold .kb.schal .kbSchal{display:block}
.thKobold .kb.traegt .trageKarton{display:block}
.thKobold .kb.paket .tragePaket{display:block}
.thKobold .kb.schwindlig .kbAugeX{display:block}
.thKobold .kb.tippt .kbLaptop{display:block}
html[data-theme="dark"] .thKobold .kb.schlaeft.tief .kbDecke{display:block}
/* Hände frei, wenn getippt, gewinkt oder geklettert wird */
.thKobold .kb.tippt .kbHand,.thKobold .kb.tippt .kbTrage,.thKobold .kb.tippt .kbUhr,.thKobold .kb.winkt .kbHand,.thKobold .kb.klettert .kbHand,.thKobold .kb.klettert .kbTrage,.thKobold .kb.haengt .kbHand,.thKobold .kb.getragen .kbTrage,.thKobold .kb.freut .kbHand,.thKobold .kb.schild .kbHand,.thKobold .kb.schild .kbTrage,.thKobold .kb.uhr .kbHand,.thKobold .kb.trinkt .kbHand:not(.handTasse),.thKobold .kb.lehnt .kbHand:not(.handTasse),.thKobold .kb.isst .kbHand:not(.handBrot),.thKobold .kb.traegt .kbHand,.thKobold .kb.paket .kbHand,.thKobold .kb.paket .trageKarton{display:none}

/* ── Grundzustände (v4.779/780) ───────────────────────────────────────────────────────────────── */
.thKobold .kb.blinzelt .kbAuge,.thKobold .kb.schlaeft .kbAuge,.thKoboldFrei .kb.blinzelt .kbAuge{transform:scaleY(.15)}
.thKobold .kb.schautL .kbAuge,.thKoboldFrei .kb.schautL .kbAuge{transform:translateX(-2px)}
.thKobold .kb.schautR .kbAuge,.thKoboldFrei .kb.schautR .kbAuge{transform:translateX(2px)}
.thKobold .kb.lugt .kbAuge{transform:scaleY(1.25)}
.thKobold .kb.geht .b1,.thKoboldFrei .kb.klettert .b1{animation:kbSchritt .32s steps(1) infinite}
.thKobold .kb.geht .b2,.thKoboldFrei .kb.klettert .b2{animation:kbSchritt .32s steps(1) infinite;animation-delay:.16s}
.thKobold .kb.geht .kbRumpf{animation:kbWippe .32s steps(1) infinite}
.thKobold .kb.geht .kbArmL{animation:kbPendel .64s steps(1) infinite}
.thKobold .kb.geht .kbArmR{animation:kbPendel .64s steps(1) infinite;animation-delay:.32s}
.thKobold .kb.steht .kbRumpf,.thKoboldFrei .kb.steht .kbRumpf{animation:kbAtmen 2.4s steps(2) infinite}
.thKobold .kb.winkt .kbArmR,.thKoboldFrei .kb.winkt .kbArmR{animation:kbWinken .36s steps(1) infinite}
.thKobold .kb.winkt .kbRumpf,.thKoboldFrei .kb.winkt .kbRumpf{animation:kbNeigen .72s steps(1) infinite}
.thKobold .kb.denkt .kbRumpf{transform:rotate(7deg)}
.thKobold .kbPunkte{opacity:0}
.thKobold .kb.denkt .kbPunkte{opacity:1}
.thKobold .kb.denkt .p1{animation:kbPunkt 1.5s steps(1) infinite}
.thKobold .kb.denkt .p2{animation:kbPunkt 1.5s steps(1) infinite;animation-delay:.5s}
.thKobold .kb.denkt .p3{animation:kbPunkt 1.5s steps(1) infinite;animation-delay:1s}
.thKobold .kb.schlaeft .kbRumpf{animation:kbAtmen 3.6s steps(3) infinite}
.thKobold .kbZ{opacity:0}
.thKobold .kb.schlaeft .kbZ{animation:kbZ 2.4s steps(4) infinite}
.thKobold .kb.schlaeft .z2{animation-delay:1.2s}
.thKobold .kb.hopst .kbHop{animation:kbHop .5s ease-out}
.thKobold .kb.freut .kbHop{animation:kbHop .4s ease-out 2}
.thKobold .kb.freut .kbArmL{transform:rotate(150deg)}
.thKobold .kb.freut .kbArmR{transform:rotate(-150deg)}
.thKobold .kbRuf{opacity:0}
.thKobold .kb.freut .kbRuf,.thKobold .kb.erschrickt .kbRuf{opacity:1}
.thKobold .kb.tippt .kbRumpf{transform:translateY(1px)}
.thKobold .kb.tippt .kbArmR{animation:kbTippen .16s steps(1) infinite}
.thKobold .kb.tippt .kbArmL{animation:kbTippen .16s steps(1) infinite;animation-delay:.08s}
.thKobold .kb.tippt .s1{animation:kbBildschirm .5s steps(1) infinite}
.thKobold .kb.tippt .s2{animation:kbBildschirm .7s steps(1) infinite}
.thKobold .kb.tippt .s3{animation:kbBildschirm .9s steps(1) infinite}
.thKobold .kb.erschrickt .kbHop{animation:kbSchreck .36s steps(2)}
.thKobold .kb.erschrickt .kbAuge{transform:scaleY(1.3)}

/* ── Neue Zustände (v4.783) ───────────────────────────────────────────────────────────────────── */
/* schwindlig: Kreuzaugen, Rumpf taumelt, sitzt */
.thKobold .kb.schwindlig .kbRumpf{animation:kbTaumel .5s steps(1) infinite}
/* sitzen: Beine nach vorn, Füße weg, alles vier Bildpunkte tiefer */
.thKobold .kb.sitzt .kbHop,.thKoboldFrei .kb.sitzt .kbHop{transform:translateY(4px)}
.thKobold .kb.sitzt .kbBein,.thKoboldFrei .kb.sitzt .kbBein{transform:rotate(-90deg)}
.thKobold .kb.sitzt .kbFuss,.thKoboldFrei .kb.sitzt .kbFuss{display:none}
.thKobold .kb.sitzt.hopst .kbHop{animation:none}
/* strecken (morgens) */
.thKobold .kb.streckt .kbRumpf{transform:scaleY(1.06)}
.thKobold .kb.streckt .kbArmL{transform:rotate(172deg)}
.thKobold .kb.streckt .kbArmR{transform:rotate(-172deg)}
/* gähnen (abends): Augen fast zu, Hand vor den Mund, Kopf leicht zurück */
.thKobold .kb.gaehnt .kbAuge{transform:scaleY(.3)}
.thKobold .kb.gaehnt .kbArmR{transform:rotate(-150deg)}
.thKobold .kb.gaehnt .kbRumpf{transform:rotate(-4deg)}
/* trinken / anlehnen mit Kaffee */
.thKobold .kb.trinkt .kbArmR,.thKobold .kb.lehnt .kbArmR{animation:kbSchluck 1.6s steps(1) infinite}
.thKobold .kb.lehnt .kbRumpf{transform:rotate(9deg) translateX(1px)}
.thKobold .kb.lehnt .kbArmL{transform:rotate(-12deg)}
.thKobold .kbDampf{animation:kbDampf 1.2s steps(2) infinite}
.thKobold .kbDampf.d2{animation-delay:.6s}
/* essen (mittags) */
.thKobold .kb.isst .kbArmR{animation:kbKauen .5s steps(1) infinite}
.thKobold .kb.isst .kbAuge{transform:scaleY(.6)}
/* auf die Uhr sehen (überfällige Fristen): Arm hoch, Blick zur Uhr, Fuß tippt */
.thKobold .kb.uhr .kbArmR{transform:rotate(-118deg)}
.thKobold .kb.uhr .kbRumpf{transform:rotate(5deg)}
.thKobold .kb.uhr .b2{animation:kbTipp .3s steps(1) infinite}
/* Hände abklopfen (Sync fertig) */
.thKobold .kb.klopft .kbArmL{animation:kbKlopfL .24s steps(1) infinite}
.thKobold .kb.klopft .kbArmR{animation:kbKlopfR .24s steps(1) infinite;animation-delay:.12s}
/* zuhören (Linda spricht): Kopfhörer, Kopf nickt */
.thKobold .kb.hoert .kbRumpf{animation:kbNicken .5s steps(1) infinite}
/* tragen (Karton in der Verpackung, Paket beim Sync): Arme halten, kein Pendeln */
.thKobold .kb.traegt .kbArmL,.thKobold .kb.paket .kbArmL{animation:none;transform:rotate(38deg)}
.thKobold .kb.traegt .kbArmR,.thKobold .kb.paket .kbArmR{animation:none;transform:rotate(-38deg)}
/* hängen (Seil, Maus): Arme oben, Beine baumeln */
.thKobold .kb.haengt .kbArmL,.thKobold .kb.getragen .kbArmL,.thKoboldFrei .kb.haengt .kbArmL{animation:none;transform:rotate(168deg)}
.thKobold .kb.haengt .kbArmR,.thKobold .kb.getragen .kbArmR,.thKoboldFrei .kb.haengt .kbArmR{animation:none;transform:rotate(-168deg)}
.thKobold .kb.haengt .kbBein,.thKobold .kb.getragen .kbBein,.thKoboldFrei .kb.haengt .kbBein{animation:kbBaumeln .7s steps(1) infinite}
.thKobold .kb.getragen .b2,.thKoboldFrei .kb.haengt .b2{animation-delay:.35s}
/* klettern: Arme greifen wechselnd, Beine treten */
.thKoboldFrei .kb.klettert .kbArmL{animation:kbGriff .5s steps(1) infinite}
.thKoboldFrei .kb.klettert .kbArmR{animation:kbGriff .5s steps(1) infinite;animation-delay:.25s}
/* landen nach dem Loslassen */
.thKobold .kb.landet .kbHop{animation:kbLand .5s ease-out}
/* Moonwalk: Schritte rückwärts, Körper nach hinten gelehnt, Arme ruhig */
.thKobold .kb.moonwalk .b1{animation:kbSchritt .32s steps(1) infinite reverse}
.thKobold .kb.moonwalk .b2{animation:kbSchritt .32s steps(1) infinite reverse;animation-delay:.16s}
.thKobold .kb.moonwalk .kbRumpf{transform:rotate(-9deg)}
.thKobold .kb.moonwalk .kbArmL{transform:rotate(18deg)}
.thKobold .kb.moonwalk .kbArmR{transform:rotate(-18deg)}
/* Rad schlagen */
.thKobold .kb.rad .kbHop{animation:kbRad .9s ease-in-out;transform-origin:center}
.thKobold .kb.rad .kbArmL{transform:rotate(172deg)}
.thKobold .kb.rad .kbArmR{transform:rotate(-172deg)}
/* Schild hochhalten (neue Fassung): Arm angehoben, Schild steht über dem Kopf */
.thKobold .kb.schild .kbArmR{transform:rotate(-58deg)}
.thKobold .kbSchildText{font:700 8px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-style:normal;fill:#1c1f26}

/* ── Fahrzeuge und Flieger in der Bahn ────────────────────────────────────────────────────────── */
.thKobold .kbLkw{position:absolute;left:0;bottom:1px;width:34px;height:16px;display:none;will-change:transform}
.thKobold .kbLkw.faehrt{display:block}
.thKobold .kbLkw svg{width:34px;height:16px;display:block}
.thKobold .kbLkw.faehrt .kbRadL,.thKobold .kbLkw.faehrt .kbRadR{animation:kbRollen .3s steps(1) infinite}
.thKobold .kbFlieger{position:absolute;left:0;top:3px;width:14px;height:8px;display:none;will-change:transform}
.thKobold .kbFlieger.fliegt{display:block}
.thKobold .kbFlieger svg{width:14px;height:8px;display:block}

/* ── Der freie Kobold (Abseilen zur Begrüßung) ────────────────────────────────────────────────── */
.thKoboldFrei{position:fixed;left:0;top:0;width:0;height:0;overflow:visible;pointer-events:none;z-index:8;display:none}
.thKoboldFrei.aktiv{display:block}
.thKoboldFrei .kbSeil{position:absolute;width:2px;background:var(--sbFaint,#93a5ba);opacity:.8}
.thKoboldFrei .kb{position:absolute;width:32px;height:28px;will-change:transform}

/* ── Bilder ───────────────────────────────────────────────────────────────────────────────────── */
@keyframes kbSchritt{0%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes kbWippe{0%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes kbPendel{0%{transform:rotate(14deg)}50%{transform:rotate(-14deg)}}
@keyframes kbAtmen{0%{transform:scaleY(1)}50%{transform:scaleY(.94)}}
@keyframes kbWinken{0%{transform:rotate(-150deg)}50%{transform:rotate(-115deg)}}
@keyframes kbNeigen{0%{transform:rotate(-5deg)}50%{transform:rotate(3deg)}}
@keyframes kbPunkt{0%{opacity:0}33%{opacity:1}}
@keyframes kbZ{0%{opacity:0;transform:translate(0,0)}25%{opacity:1;transform:translate(1px,-2px)}75%{opacity:1;transform:translate(3px,-6px)}100%{opacity:0;transform:translate(4px,-8px)}}
@keyframes kbHop{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes kbTippen{0%{transform:rotate(-55deg)}50%{transform:rotate(-72deg)}}
@keyframes kbBildschirm{0%{opacity:1}50%{opacity:.25}}
@keyframes kbSchreck{0%{transform:translate(0,0)}50%{transform:translate(-3px,-4px)}100%{transform:translate(0,0)}}
@keyframes kbTaumel{0%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes kbSchluck{0%{transform:rotate(-95deg)}55%{transform:rotate(-140deg)}}
@keyframes kbDampf{0%{opacity:1;transform:translateY(0)}50%{opacity:.35;transform:translateY(-2px)}}
@keyframes kbKauen{0%{transform:rotate(-112deg)}50%{transform:rotate(-132deg)}}
@keyframes kbTipp{0%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes kbKlopfL{0%{transform:rotate(-40deg)}50%{transform:rotate(-70deg)}}
@keyframes kbKlopfR{0%{transform:rotate(40deg)}50%{transform:rotate(70deg)}}
@keyframes kbNicken{0%{transform:translateY(0)}50%{transform:translateY(1px)}}
@keyframes kbBaumeln{0%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@keyframes kbGriff{0%{transform:rotate(160deg)}50%{transform:rotate(200deg)}}
@keyframes kbLand{0%{transform:translateY(-4px)}55%{transform:translateY(0)}75%{transform:translateY(-2px)}100%{transform:translateY(0)}}
@keyframes kbRad{0%{transform:rotate(0) translateY(0)}50%{transform:rotate(180deg) translateY(4px)}100%{transform:rotate(360deg) translateY(0)}}
@keyframes kbRollen{0%{transform:translateY(0)}50%{transform:translateY(-1px)}}

/* Mein Konto → Bewegungen „Aus“: alles steht (die Systemeinstellung allein lässt ihn laufen — Peters Wunsch) */
html[data-motion="aus"] .thKobold *,html[data-motion="aus"] .thKoboldFrei *{animation:none!important}
html[data-motion="aus"] .thKobold .kbLkw,html[data-motion="aus"] .thKobold .kbFlieger,html[data-motion="aus"] .thKoboldFrei{display:none!important}