/* Die Heinzelmütze (js/muetze.js): Wer zuständig ist, trägt sie. Roter Filz mit Falte und Glanz, Pelzkrempe und
   Bommel, 2.4px Tintenkante; sie sitzt schief oben auf dem Köpfchen und ragt darüber hinaus wie ein Sticker. */

.mutzkopf { --kh: 42px; position: relative; display: inline-flex; flex: none; }
.mutzkopf .koepfchen { display: block; }
.muetze { overflow: visible; }
/* die Krempe (78 % der Breite, Mitte auf 81 % der Höhe) liegt auf der gemessenen Linie unter dem Scheitel (kopfProfil in js/schild.js) */
.mutzkopf .muetze {
  position: absolute; left: calc(50% + var(--kh) * var(--m-dx, 0)); top: calc(var(--m-luft, 0px) + var(--kh) * var(--m-cy, .22));
  width: calc(var(--kh) * var(--m-sp, .5) * 1.12 / .78); height: auto; aspect-ratio: 48 / 40;
  translate: -50% -81%; rotate: -10deg; transform-origin: 50% 81%;
  filter: drop-shadow(0 1.5px 1px color-mix(in srgb, var(--tinte) 35%, transparent)); pointer-events: none;
  transition: top .2s var(--aus);
}
/* der zweite Kopf trägt sie spiegelverkehrt, damit die Zipfel auseinander zeigen */
.mutzkopf + .mutzkopf .muetze { scale: -1 1; rotate: 10deg; }
/* solange eine Mütze fliegt, wartet ihr Platz leer */
.muetze.wartet { opacity: 0 !important; transition: none !important; }
/* leer liegt sie weiss auf der Ablage: noch kümmert sich niemand */
.muetze.leer { --m-filz: #FFFFFF; --m-falte: #EFEADF; --m-glanz: transparent; --m-pelz: #FBF9F3; --m-kante: var(--tinte-leise); }

.muetzen-flug { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; overflow: visible; will-change: transform; filter: drop-shadow(0 3px 3px color-mix(in srgb, var(--tinte) 38%, transparent)); }
.fussel { position: fixed; left: 0; top: 0; z-index: 91; width: 0; height: 0; pointer-events: none; }
.fussel i { position: absolute; left: 0; top: 0; border-radius: 50%; background: var(--weiss); box-shadow: 0 0 0 1.2px var(--tinte); }

/* Rückseite: Wer ist zuständig? Nur der gewählte Kopf trägt die Mütze, mit der Maus schwebt sie über dem anderen */
.dran-wahl { row-gap: 18px; padding-top: 6px; }
.dran-wahl .wahl:has(.mutzkopf) { padding-left: 6px; }
.dran-wahl .mutzkopf { --kh: 42px; margin: -8px 0 -6px; }
.dran-wahl .mutzkopf .koepfchen { width: 36px; height: 42px; margin: 0; }
.dran-wahl .mutzkopf + .mutzkopf { margin-left: -16px; }
.dran-wahl .wahl[aria-checked="false"] .mutzkopf .muetze { opacity: 0; translate: -50% -140%; }
.dran-wahl .wahl .muetze.leer { width: 26px; height: auto; aspect-ratio: 48 / 40; margin: -4px -2px -2px -4px; }
@media (hover: hover) and (pointer: fine) {
  .dran-wahl .wahl[aria-checked="false"]:hover .mutzkopf .muetze { opacity: .4; translate: -50% -112%; transition: opacity .2s var(--aus), translate .3s var(--aus); }
}

/* To-do: Tippen gibt die Mütze reihum weiter, die Köpfchen steigen dabei hinter der Kante herauf.
   Vor der Mütze steht der Termin (ruf.css), dahinter, wer abgehakt hat, und das Kreuz */
.todo-punkt { grid-template-columns: 24px 44px minmax(0, 1fr) auto auto auto auto; }
.todo-muetze {
  display: flex; align-items: flex-end; justify-content: center; min-width: 40px; height: 44px; padding: 0 3px 4px;
  border: 0; border-radius: 4px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.todo-muetze.steigt { clip-path: inset(-40px -16px 0 -16px); }
.todo-muetze .mutzkopf { --kh: 30px; }
.todo-muetze .mutzkopf .koepfchen { width: 26px; height: 30px; }
.todo-muetze .mutzkopf + .mutzkopf { margin-left: -11px; }
.todo-muetze .muetze.leer { width: 24px; height: auto; aspect-ratio: 48 / 40; margin-bottom: 7px; opacity: .5; transition: opacity .15s var(--aus), translate .15s var(--aus); }
.todo-muetze:hover .muetze.leer { opacity: 1; translate: 0 -1px; }
.todo-muetze:focus-visible { outline: 0; box-shadow: none; }
:where(:root:not(.lichter)) .todo-muetze:focus-visible { outline: 3px solid var(--spot); outline-offset: -2px; box-shadow: inset 0 0 0 5px var(--tinte); }
/* mit Maus erscheint die leere Mütze erst an der Zeile, wie Griff und Kreuz */
@media (hover: hover) and (pointer: fine) {
  .todo-punkt:not(:hover, :focus-within) .todo-muetze.offen { opacity: 0; }
}

/* Schild, Unterprojekt und Programmzettel: wer dran ist, steht mit Mütze in der Fusszeile */
.dran { display: inline-flex; align-items: flex-end; margin: -7px 0 -3px; padding-top: 7px; }
/* auf dem Schild steht sie rechts bei der Nummer */
.schild-fuss-zeile .dran { margin-left: auto; }
.schild-fuss-zeile .dran + .nr { margin-left: 0; }
.dran .mutzkopf { --kh: 23px; }
.dran .mutzkopf .koepfchen { width: 20px; height: 23px; }
.dran .mutzkopf + .mutzkopf { margin-left: -7px; }

/* auf der Rampe: die grosse Mütze auf dem Puppenkopf, sie nickt mit */
.puppen-muetze { position: absolute; opacity: 0; rotate: -12deg; transform-origin: 50% 81%; filter: drop-shadow(0 3px 3px color-mix(in srgb, var(--tinte) 40%, transparent)); pointer-events: none; }
.puppen-muetze.links { scale: -1 1; rotate: 12deg; }
.puppen-muetze.auf { opacity: 1; }