/* ===============================
   COOKIE CHARACTER
================================ */

.cookie-character {
    --rotate: 0deg;
    --top-y: 0px;
    --eyeball-x: -2px;
    --eyeball-y: -2px;
    --eyeball-scale: 0.75;
    --mouth-y: 0px;
    --crack-offset: 38px;
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    transform: rotate(var(--rotate));
    transform-origin: 50% 100%;
}

/* Pieces (Krümel) */
.cookie-character .piece {
    fill: #f6a976;
    stroke-width: 0.5;
    stroke: #d5906e;
    position: absolute;
    width: 6px;
    height: 6px;
}

.cookie-character .piece.left {
    top: 15px;
    left: 4px;
}

.cookie-character .piece.right {
    top: 15px;
    right: 4px;
}

/* Top & Bottom Hälften */
.cookie-character .cc-top,
.cookie-character .cc-bottom {
    display: block;
    width: 40px;
    height: 40px;
    stroke-linecap: round;
    stroke-linejoin: round;
    position: relative;
    z-index: 1;
}

.cookie-character .cc-top .background,
.cookie-character .cc-bottom .background {
    fill: #f6a976;
}

.cookie-character .cc-top .shine,
.cookie-character .cc-bottom .shine {
    fill: #ffdaae;
}

.cookie-character .cc-top .dark,
.cookie-character .cc-bottom .dark {
    fill: #a96249;
}

.cookie-character .cc-top .border,
.cookie-character .cc-bottom .border {
    fill: none;
    stroke: #d5906e;
}

.cookie-character .cc-top .crack {
    fill: none;
    stroke: #a96249;
    stroke-width: 1.25;
    stroke-dasharray: 38px;
    stroke-dashoffset: var(--crack-offset);
}

/* Top-Hälfte */
.cookie-character .cc-top {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(var(--top-y));
}

/* Augen */
.cookie-character .eye {
    top: 14px;
    position: absolute;
    z-index: 2;
}

.cookie-character .eye.left {
    left: 9px;
}

.cookie-character .eye.right {
    right: 9px;
}

.cookie-character .eye svg {
    display: block;
    width: 10px;
    height: 10px;
    fill: #fff;
    stroke: #000;
    stroke-width: 0.75;
}

.cookie-character .eye::after {
    content: "";
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(var(--eyeball-x), var(--eyeball-y))
        scale(var(--eyeball-scale));
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background-color: #000;
}

/* Mund */
.cookie-character .mouth {
    width: 12px;
    height: 9px;
    position: absolute;
    left: 14px;
    top: 20px;
    fill: #d5393f;
    stroke-width: 0.75;
    z-index: 2;
    stroke: #000;
    stroke-linejoin: round;
    transform: translateY(var(--mouth-y));
}

/* ---- Cookie im Header platzieren ---- */

.cookie-header {
    display: flex;
    align-items: center;
    gap: 0.8em;
}