:root {
    --bg: #fbf8ee;
    --ink: #2a2a24;
    --muted: #7a7766;
    --yellow: #f6c600;
    --yellow-dark: #c99f00;
    --green: #2e9d57;
    --green-dark: #1f6b3a;
    --red: #d6402f;
    --card: #ffffff;
    --line: #eadfb8;
    --radius: 22px;
    --shadow: 0 6px 0 rgba(0, 0, 0, .08), 0 14px 30px rgba(120, 100, 0, .12);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
    line-height: 1.5;
    padding-bottom: env(safe-area-inset-bottom);
}

.hero {
    background:
        radial-gradient(circle at 85% 20%, #fff7c2 0 60px, transparent 61px),
        linear-gradient(#cfe9fb, #f1f8ff 70%, var(--bg));
    padding: 28px 16px 70px;
    text-align: center;
}

.kicker {
    margin: 0 0 8px;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--green-dark);
    font-weight: 700;
}

h1 {
    margin: 0;
    font-size: clamp(2rem, 9vw, 3.4rem);
    line-height: 1.05;
    font-weight: 900;
}

.hl {
    background: var(--yellow);
    padding: 0 .25em;
    border-radius: 10px;
    display: inline-block;
    transform: rotate(-2deg);
}

.lead {
    max-width: 34rem;
    margin: 14px auto 0;
    color: #4a4a3e;
}

main {
    max-width: 640px;
    margin: -48px auto 0;
    padding: 0 16px;
    display: grid;
    gap: 18px;
}

.card {
    background: var(--card);
    border: 3px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 18px;
    box-shadow: var(--shadow);
}

h2 { margin: 0 0 4px; font-size: 1.3rem; }
.sub { margin: 0 0 14px; color: var(--muted); font-size: .95rem; }

/* status card */
.status { text-align: center; border-width: 4px; transition: border-color .3s, background .3s; }
.status[data-state="open"] { border-color: var(--green); background: #f2fbf4; }
.status[data-state="closed"] { border-color: var(--red); background: #fff4f2; }

.mascot { width: 150px; height: auto; margin: -6px auto 0; display: block; }
.status[data-state="open"] .mascot { animation: hop 1s ease-in-out infinite; }
.status[data-state="closed"] .mascot { animation: snooze 3s ease-in-out infinite; }
.status[data-state="unknown"] .mascot { animation: wobble 2.4s ease-in-out infinite; }

.status-label { margin: 6px 0 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }

.status-word {
    margin: 0;
    font-size: clamp(3.2rem, 18vw, 6rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
}
.status[data-state="open"] .status-word { color: var(--green); }
.status[data-state="closed"] .status-word { color: var(--red); }
.status[data-state="unknown"] .status-word { color: var(--yellow-dark); font-size: clamp(2.2rem, 12vw, 4rem); }

.status-line { margin: 10px 0 0; font-size: 1.1rem; font-weight: 700; min-height: 3.2em; }
.status-meta { margin: 6px 0 0; font-size: .85rem; color: var(--muted); }

/* buttons */
.btn-row { display: grid; gap: 12px; }

button { font: inherit; cursor: pointer; }

.big {
    width: 100%;
    min-height: 68px;
    border: 0;
    border-radius: 18px;
    font-size: 1.25rem;
    font-weight: 900;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 0 rgba(0, 0, 0, .22);
    transition: transform .08s, box-shadow .08s;
    -webkit-tap-highlight-color: transparent;
}
.big:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0, 0, 0, .22); }
.big:focus-visible, .ghost:focus-visible { outline: 4px solid #1d6fd1; outline-offset: 3px; }
.big.open { background: var(--green); }
.big.closed { background: var(--red); }
.big.shake { background: var(--yellow); color: #4a3a00; }
.big[disabled] { opacity: .55; pointer-events: none; }
.ico { font-size: 1.6rem; }

.ghost {
    margin-top: 12px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 2px dashed var(--red);
    background: transparent;
    color: var(--red);
    font-weight: 700;
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.toast { margin: 12px 0 0; min-height: 1.5em; text-align: center; font-weight: 700; color: var(--green-dark); }
.toast.err { color: var(--red); }

.oracle-out { margin: 16px 0 0; font-size: 1.1rem; font-weight: 700; text-align: center; min-height: 3em; }
.shaking { animation: shake .5s; }

/* table */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 6px; border-bottom: 1px dashed var(--line); }
th { width: 42%; font-weight: 700; }
tr.today { background: #fff8d2; }
tr.today th::after { content: " · heute"; color: var(--yellow-dark); font-weight: 400; font-size: .85em; }
.muted { color: var(--muted); }
.note { margin: 12px 0 0; font-size: .95rem; font-weight: 700; }

.story p { margin: 0; }

footer { margin-top: 40px; text-align: center; background: #b5d9a6; }
footer p { max-width: 560px; margin: 0 auto; padding: 8px 16px 28px; font-size: .8rem; color: #35502c; }

@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes snooze { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes wobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes shake {
    0%, 100% { transform: translateX(0) rotate(0); }
    20% { transform: translateX(-8px) rotate(-3deg); }
    40% { transform: translateX(8px) rotate(3deg); }
    60% { transform: translateX(-6px) rotate(-2deg); }
    80% { transform: translateX(6px) rotate(2deg); }
}

@media (min-width: 560px) {
    .btn-row { grid-template-columns: 1fr 1fr; }
    .card { padding: 28px 28px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* form fields */
.field { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 14px; }
.field input, .field textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 12px 14px;
    font: inherit;
    font-weight: 400;
    border: 3px solid var(--line);
    border-radius: 14px;
    background: #fffdf5;
    color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: 4px solid #1d6fd1; outline-offset: 2px; border-color: #1d6fd1; }
.counter { margin: -6px 0 12px; text-align: right; font-size: .8rem; color: var(--muted); }

/* excuse archive */
.excuse-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.excuse-list li { background: #fffaf0; border: 2px dashed var(--line); border-radius: 14px; padding: 12px 14px; }
.ex-text { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.ex-meta { margin: 6px 0 0; font-size: .8rem; color: var(--muted); }
.badge { display: inline-block; padding: 1px 9px; border-radius: 999px; font-weight: 700; margin-right: 6px; color: #fff; }
.badge.bad { background: var(--red); }
.badge.good { background: var(--green); }
.badge.neutral { background: var(--yellow-dark); }

.links { margin-top: 4px; }
.linkbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 11px 16px;
    border: 3px solid var(--yellow);
    border-radius: 14px;
    background: var(--yellow);
    color: #4a3a00;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .18);
}
.linkbtn.alt { background: #fff; box-shadow: none; }
.linkbtn:focus-visible, .back:focus-visible { outline: 4px solid #1d6fd1; outline-offset: 3px; }

.pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .9rem; }
.pager .linkbtn { padding: 8px 12px; }

.hero.small { padding-bottom: 60px; }
.back { display: inline-block; margin-bottom: 10px; color: var(--green-dark); font-weight: 700; }

/* village scenes: whole picture visible, sides crop first on narrow screens */
.scene { overflow: hidden; line-height: 0; }
.stage {
    position: relative;
    width: max(100%, 700px);
    left: 50%;
    transform: translateX(-50%);
}
.stage img { display: block; width: 100%; height: auto; }
.stage .walkers { position: absolute; inset: 0; }
.scene-foot { background: linear-gradient(to bottom, var(--bg), #d6ebf9); padding-top: 30px; }
.hero.small { padding-bottom: 60px; }

/* collapsible archive / form */
.fold { margin-top: 14px; border: 3px solid var(--line); border-radius: 16px; background: #fffdf5; }
.fold > summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 16px;
    min-height: 48px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: "▾"; font-size: 1.2rem; transition: transform .2s; }
.fold[open] > summary::after { transform: rotate(180deg); }
.fold > summary:focus-visible { outline: 4px solid #1d6fd1; outline-offset: 2px; border-radius: 12px; }
.fold[open] { padding-bottom: 16px; }
.fold > :not(summary) { margin-left: 14px; margin-right: 14px; }
.fold .ghost.more { display: block; margin-top: 4px; }

/* "Eigene Ausrede einreichen": looks like the oracle button, still unfolds the form */
.fold-btn { border: 0; background: none; border-radius: 0; }
.fold-btn[open] { padding-bottom: 0; }
.fold-btn > summary { padding: 0; min-height: 68px; justify-content: center; }
.fold-btn > summary::after { display: none; }
.fold-btn > :not(summary) { margin: 14px 0 0; }

/* town sign sits in the kicker line, so the header keeps its height */
.kicker { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ortsschild { width: 88px; height: auto; flex: none; transform: rotate(-3deg); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .15)); }

/* superhero rescue: dog walker, mother, pram and hero share one 60s cycle (started together via body.go) */
body { position: relative; }
.stage .front { position: absolute; inset: 0; }
.stage.narrow .church-front { display: none; }
.stage .church-front { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stage .cast { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 40; }
.hero-fly { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: translate(var(--sx, -999px), var(--sy, -999px)); }
.h { position: absolute; left: 0; top: 0; overflow: visible; opacity: 0; }
.hw { transform: translateY(calc(var(--u, 1) * -36px)) scale(var(--u, 1)) rotate(var(--a)); }
.hs { transform: scale(calc(var(--u, 1) * -1), var(--u, 1)); }
.d-m { transform: translateX(-130px); }
.c-m { transform: translateX(-250px); }
.c-p { transform: translateX(-160px); }
.c-run, .c-halt, .c-worry, .d-walk { opacity: 1; }
.c-stand, .c-walk, .c-hearts, .c-smile, .d-stand, .d-poop { opacity: 0; }
.c-leg-a, .c-leg-b, .c-wleg-a, .c-wleg-b, .d-leg-a, .d-leg-b { transform-box: fill-box; transform-origin: 50% 0; }
.c-wheel, .c-hs { transform-box: fill-box; transform-origin: 50% 50%; }
.d-tail { transform-box: fill-box; transform-origin: 100% 0; }
.cape, .cape-s { transform-box: fill-box; }
.cape { transform-origin: 100% 50%; }
.cape-s { transform-origin: 80% 0; }
.puff { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }

.go .d-m { animation: d-m 60.0s linear infinite; }
.go .d-walk { animation: d-walk 60.0s steps(1) infinite; }
.go .d-stand { animation: d-stand 60.0s steps(1) infinite; }
.go .d-leg-a { animation: c-swing .7s ease-in-out infinite alternate; }
.go .d-leg-b { animation: c-swing .7s ease-in-out infinite alternate-reverse; }
.go .d-bob { animation: c-bob .35s ease-in-out infinite alternate; }
.go .d-dogbob { animation: c-bob .3s ease-in-out infinite alternate; }
.go .d-tail { animation: c-swing .5s ease-in-out infinite alternate; }
.go .d-strain { animation: d-strain .35s ease-in-out infinite alternate; }
.go .d-poop { animation: d-poop 60.0s linear infinite; }
.go .d-stink { animation: d-stink 1s ease-in-out infinite alternate; }
.go .d-stink.s2 { animation-delay: -.5s; }

.go .c-p { animation: c-p 60.0s linear infinite; }
.go .c-m { animation: c-m 60.0s linear infinite; }
.go .c-wheel { animation: c-wheel 60.0s linear infinite; }
.go .c-run { animation: c-run 60.0s steps(1) infinite; }
.go .c-stand { animation: c-stand 60.0s steps(1) infinite; }
.go .c-walk { animation: c-walk 60.0s steps(1) infinite; }
.go .c-leg-a { animation: c-swing .3s ease-in-out infinite alternate; }
.go .c-leg-b { animation: c-swing .3s ease-in-out infinite alternate-reverse; }
.go .c-wleg-a { animation: c-swing .65s ease-in-out infinite alternate; }
.go .c-wleg-b { animation: c-swing .65s ease-in-out infinite alternate-reverse; }
.go .c-bob { animation: c-bob .15s ease-in-out infinite alternate; }
.go .c-lean { animation: c-lean 60.0s linear infinite; }
.go .c-halt { animation: c-halt 60.0s steps(1) infinite; }
.go .c-worry { animation: c-worry 60.0s steps(1) infinite; }
.go .c-smile { animation: c-smile 60.0s steps(1) infinite; }
.go .c-blink { animation: c-blink 1.6s steps(1) infinite; }
.go .c-hearts { animation: c-hearts 60.0s linear infinite; }
.go .c-hs1 { animation: c-sway 2.3s ease-in-out infinite alternate; }
.go .c-hs2 { animation: c-sway 2.9s ease-in-out infinite alternate-reverse; }
.go .c-hs3 { animation: c-sway 2.6s ease-in-out -1.1s infinite alternate; }

.go .hero-fly { animation: h-move 60.0s linear infinite; }
.go .h-in { animation: h-in 60.0s steps(1) infinite; }
.go .h-stand { animation: h-stand 60.0s steps(1) infinite; }
.go .h-bend { animation: h-bend 60.0s steps(1) infinite; }
.go .h-stand2 { animation: h-stand2 60.0s steps(1) infinite; }
.go .h-out { animation: h-out 60.0s steps(1) infinite; }
.go .puff { animation: puff .9s linear infinite; }
.go .cape { animation: h-flap .12s ease-in-out infinite alternate; }
.go .cape-s { animation: h-capes 1.4s ease-in-out infinite alternate; }
.go .h-hover { animation: h-hover 1.1s ease-in-out infinite alternate; }

@keyframes d-m { 0% { transform: translateX(-130px); } 37.375%, 44.042% { transform: translateX(767px); } 67.5%, 100% { transform: translateX(1330px); } }
@keyframes d-walk { 0% { opacity: 1; } 37.375% { opacity: 0; } 44.042%, 100% { opacity: 1; } }
@keyframes d-stand { 0% { opacity: 0; } 37.375% { opacity: 1; } 44.042%, 100% { opacity: 0; } }
@keyframes d-strain { to { transform: translateY(.9px); } }
@keyframes d-poop { 0%, 40.0% { opacity: 0; transform: translateY(-9px); } 40.667% { opacity: 1; transform: translateY(0); } 76.042% { opacity: 1; transform: translateY(0); } 76.058%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes d-stink { from { opacity: .15; transform: translateY(0); } to { opacity: .8; transform: translateY(-2px); } }

@keyframes c-m { 0%, 35.333% { transform: translateX(-250px); } 55.208%, 61.542% { transform: translateX(704px); } 78.097%, 100% { transform: translateX(1300px); } }
@keyframes c-p { 0%, 35.333% { transform: translateX(-160px); } 53.333%, 61.542% { transform: translateX(704px); } 78.097%, 100% { transform: translateX(1300px); } }
@keyframes c-wheel { 0%, 35.333% { transform: rotate(0); } 53.333%, 61.542% { transform: rotate(7935deg); } 78.097%, 100% { transform: rotate(13408deg); } }
@keyframes c-run { 0% { opacity: 1; } 55.208%, 100% { opacity: 0; } }
@keyframes c-stand { 0% { opacity: 0; } 55.208% { opacity: 1; } 61.542%, 100% { opacity: 0; } }
@keyframes c-walk { 0%, 61.525% { opacity: 0; } 61.542%, 78.097% { opacity: 1; } 78.114%, 100% { opacity: 0; } }
@keyframes c-lean { 0%, 55.125% { transform: rotate(10deg); } 55.875%, 100% { transform: rotate(0deg); } }
@keyframes c-halt { 0% { opacity: 1; } 55.208%, 100% { opacity: 0; } }
@keyframes c-worry { 0%, 53.317% { opacity: 1; } 53.333%, 100% { opacity: 0; } }
@keyframes c-smile { 0%, 53.317% { opacity: 0; } 53.333%, 100% { opacity: 1; } }
@keyframes c-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes c-swing { from { transform: rotate(-26deg); } to { transform: rotate(26deg); } }
@keyframes c-bob { to { transform: translateY(-1.6px); } }
@keyframes c-hearts { 0%, 55.375% { opacity: 0; } 56.375%, 61.208% { opacity: 1; } 62.375%, 100% { opacity: 0; } }
@keyframes c-sway { from { transform: translate(-13px, 3px) rotate(-8deg); } to { transform: translate(13px, -6px) rotate(8deg); } }

@keyframes h-move {
    0%, 47.833% { transform: translate(var(--sx), var(--sy)); animation-timing-function: cubic-bezier(.3, .15, .2, 1); }
    53.333%, 80.875% { transform: translate(var(--lx), var(--ly)); animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
    83.542%, 100% { transform: translate(var(--ex), var(--ey)); }
}
@keyframes h-in { 0%, 47.833% { opacity: 0; } 47.85% { opacity: 1; } 53.333%, 100% { opacity: 0; } }
@keyframes h-stand { 0%, 53.317% { opacity: 0; } 53.333%, 65.858% { opacity: 1; } 65.875%, 100% { opacity: 0; } }
@keyframes h-bend { 0%, 74.358% { opacity: 0; } 74.375%, 77.858% { opacity: 1; } 77.875%, 100% { opacity: 0; } }
@keyframes h-stand2 { 0%, 77.858% { opacity: 0; } 77.875%, 80.858% { opacity: 1; } 80.875%, 100% { opacity: 0; } }
@keyframes h-out { 0%, 80.858% { opacity: 0; } 80.875%, 83.542% { opacity: 1; } 83.558%, 100% { opacity: 0; } }
@keyframes puff { 0% { transform: translateX(0) scale(.4); opacity: .95; } 100% { transform: translateX(-120px) scale(1.7); opacity: 0; } }
@keyframes h-flap { from { transform: scaleY(.8) skewY(-4deg); } to { transform: scaleY(1.1) skewY(4deg); } }
@keyframes h-capes { from { transform: rotate(-5deg); } to { transform: rotate(7deg); } }
@keyframes h-hover { from { transform: translateY(0); } to { transform: translateY(-2px); } }

/* hot air balloon drifting back and forth across the whole page */
.balloon { position: absolute; left: 0; top: 0; width: var(--bs, 150px); transform: translate(var(--bx, 0px), var(--by, 0px)); }
.go .balloon { animation: b-x 17s ease-in-out -6s infinite alternate, b-y 76s ease-in-out -31s infinite alternate; }
.balloon svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .12)); }
.b-sway { transform-origin: 50% 8%; }
.go .b-sway { animation: b-sway 3.8s ease-in-out infinite alternate; }
.go .b-bob { animation: b-bob 3.4s ease-in-out infinite alternate; }
.b-flame { transform-box: fill-box; transform-origin: 50% 100%; }
.go .b-flame { animation: b-flame .35s ease-in-out infinite alternate; }
.go .b-flame.b2 { animation-duration: .27s; }
.go .b-pony { transform-box: fill-box; transform-origin: 0 50%; animation: b-pony 1.2s ease-in-out infinite alternate; }
@keyframes b-x { from { transform: translate(0px, var(--by0, 0px)); } to { transform: translate(var(--bw, 600px), var(--by0, 0px)); } }
@keyframes b-y { from { top: 0; } to { top: var(--bh, 1800px); } }
@keyframes b-sway { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
@keyframes b-bob { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
@keyframes b-flame { from { transform: scale(.85, .8); opacity: .85; } to { transform: scale(1.1, 1.15); opacity: 1; } }
@keyframes b-pony { from { transform: rotate(-6deg); } to { transform: rotate(7deg); } }

.hs2 { transform: scale(var(--u, 1)); }
.h-wave-arm { transform-box: view-box; }
.go .h-wave { animation: h-wave 60.0s steps(1) infinite; }
.go .h-wave-arm { animation: h-wavearm .45s ease-in-out infinite alternate; }
@keyframes h-wave { 0%, 65.858% { opacity: 0; } 65.875%, 74.358% { opacity: 1; } 74.375%, 100% { opacity: 0; } }
@keyframes h-wavearm { from { transform: rotate(-22deg); } to { transform: rotate(30deg); } }
@media (prefers-reduced-motion: reduce) { .cast, .sky { display: none; } }