/* MICE Kontor visual + motion + play system ("Pöppel-Plan"), spec: docs/VISUALS.md.
   Opt-in per page: {{style "theme/vis.css"}} + {{script "theme/vis.js"}} + {{template "partials/mice/vis-sprite.html.tmpl" .}}.
   Rules: ground stays Pressspan/white/ink; accents are fills and sticker grounds, never body text on light;
   text is never hidden for motion; every loop pauses; reduced motion shows the end state. */
:root {
  --gelb: #F7B500;    /* Verkehrsgelb RAL 1023: Ausflug; ink text 8.01 */
  --gruen: #008351;   /* Verkehrsgrün RAL 6024: Teamevent, Incentive; white text 4.81 */
  --orange: #FF7A1A;  /* Pöppel-Orange near RAL 2003: Firmenfeier; ink text 5.57 */
  --himmel: #5BB4E5;  /* Himmel/Wasser: sky, water, Tagung second colour; ink text 6.30 */
  --vis-line: 2.5px;
  --vis-ease: cubic-bezier(.2,.9,.3,1.2);
}
/* ---------- at-a-glance card: the key facts readable without interaction ---------- */
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0; margin: 1.25rem 0; background: var(--sheet); border: 2px solid var(--ink); color: var(--ink); }
.glance > div { padding: .8rem 1rem .9rem; border-right: 1px solid var(--card-edge); border-bottom: 1px solid var(--card-edge); display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .15rem; min-width: 0; }
.glance dt { font-size: .9375rem; color: var(--muted); font-weight: 500; }
.glance dd { margin: 0; font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem); line-height: 1.1; font-weight: 750; font-stretch: 78%; font-variant-numeric: tabular-nums; }
.glance dd small { display: block; font-size: .9375rem; font-weight: 500; font-stretch: 100%; color: var(--muted); margin-top: .2rem; }
.glance > div:first-child dd { background: linear-gradient(var(--gelb), var(--gelb)) 0 .78em / 100% .32em no-repeat; justify-self: start; width: fit-content; }
.glance.on-dark { background: var(--ink-deep); border-color: var(--brass); color: var(--sheet); }
.glance.on-dark dt, .glance.on-dark dd small { color: var(--foot-muted); }
.glance.on-dark > div { border-color: rgba(255,255,255,.18); }
.glance.on-dark > div:first-child dd { background-image: linear-gradient(rgba(247,181,0,.45), rgba(247,181,0,.45)); }
/* ---------- scenes: frames for data-driven SVG diagrams (charts, maps, timelines) and for slots ---------- */
.scene { margin: 1.5rem 0; }
.scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.scene figcaption { font-size: .9375rem; color: var(--muted); margin-top: .5rem; max-width: 60ch; }
.scene.sheet { background: var(--sheet); border: 1px solid var(--card-edge); padding: clamp(.75rem, 2vw, 1.5rem); }
.scene.dark { background: var(--ink-deep); padding: clamp(.75rem, 2vw, 1.5rem); }
.scene.dark figcaption { color: var(--foot-muted); }
.ln { fill: none; stroke: var(--ink); stroke-width: var(--vis-line); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ln-w { fill: none; stroke: #fff; stroke-width: var(--vis-line); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ol { stroke: var(--ink); stroke-width: var(--vis-line); stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.f-ink { fill: var(--ink); } .f-deep { fill: var(--ink-deep); } .f-white { fill: #fff; } .f-ground { fill: var(--ground); }
.f-gelb { fill: var(--gelb); } .f-gruen { fill: var(--gruen); } .f-orange { fill: var(--orange); } .f-himmel { fill: var(--himmel); }
.f-brick { fill: var(--stamp); } .f-brass { fill: var(--brass); } .f-rule { fill: var(--rule); }
.t-ink { fill: var(--ink); font-family: var(--face); font-weight: 700; font-stretch: 80%; }
.t-w { fill: #fff; font-family: var(--face); font-weight: 700; font-stretch: 80%; }
/* the Summenstrich ground line every scene stands on */
.baseline { stroke: var(--ink); stroke-width: var(--vis-line); vector-effect: non-scaling-stroke; }
/* ---------- raster slots: Grok Imagine assets per docs/VISUALS-shotlist.md (LFM.md: no hand-drawn illustration) ---------- */
.vis-slot { position: relative; overflow: hidden; aspect-ratio: var(--ar, 16 / 9); margin: 1.5rem 0; background: var(--ground); border: 2px dashed rgba(11,42,74,.5); }
@media (min-width: 900px) { .vis-slot.half { max-width: 40rem; } }
@media (max-width: 560px) { .vis-slot { aspect-ratio: var(--ar-m, var(--ar, 16 / 9)); } }
.vis-slot[data-slot]:not(:has(img, video))::after { content: "Bildplatz " attr(data-slot); position: absolute; left: .75rem; bottom: .6rem; font-size: .8125rem; font-weight: 600; color: var(--ink); }
.vis-slot:has(img, video) { border: 0; background: var(--ink-deep); }
.vis-slot img, .vis-slot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: object-position .7s var(--vis-ease), transform .7s var(--vis-ease), clip-path .9s var(--vis-ease); }
.vis-on .vis-slot[data-vis] img { clip-path: inset(0 0 0 100%); }
.vis-on .vis-slot[data-vis].is-in img { clip-path: inset(0); }
@media (hover: hover) { .vis-slot.zoom:hover img { transform: scale(1.04); } }
.vis-slot .swap { opacity: 0; transition: opacity .4s ease; }
@media (hover: hover) { .vis-slot:hover .swap { opacity: 1; } }
.vis-on [data-vis] .sticker.pop { transform: rotate(var(--tilt, -6deg)) scale(.6); transition: transform .45s cubic-bezier(.3,1.6,.5,1); transition-delay: var(--d, .3s); }
.vis-on [data-vis].is-in .sticker.pop { transform: rotate(var(--tilt, -6deg)); }
/* ---------- stickers: die-cut labels with one fact each ---------- */
.sticker { display: inline-grid; place-items: center; text-align: center; min-width: 6.5rem; min-height: 6.5rem; padding: .7rem; border-radius: 50%; background: var(--gelb); color: var(--ink); border: 2px solid var(--ink); outline: 4px solid #fff; outline-offset: 0; font-weight: 750; font-stretch: 80%; line-height: 1.05; font-size: 1.05rem; transform: rotate(var(--tilt, -6deg)); transition: transform .25s var(--vis-ease); }
.sticker b { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.sticker.gruen { background: var(--gruen); color: #fff; } .sticker.orange { background: var(--orange); } .sticker.himmel { background: var(--himmel); }
.sticker.flat { border-radius: 3px; min-height: 0; padding: .45rem .7rem; }
@media (hover: hover) { .sticker:hover { transform: rotate(0deg) scale(1.06); } }
/* ---------- buttons and press feedback (works with any page button) ---------- */
.vis-press { transition: transform .12s ease, box-shadow .12s ease; box-shadow: 0 4px 0 var(--ink-deep); }
.vis-press:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink-deep); }
.vis-press:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink-deep); }
/* ---------- pick-your-vibe: radio chips that swap a scene, CSS only via :has ---------- */
.vibe { border: 0; padding: 0; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.vibe legend { font-weight: 700; margin-bottom: .5rem; padding: 0; }
.vibe input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vibe label { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.9rem; padding: .45rem .9rem .45rem .5rem; background: var(--sheet); border: 2px solid var(--ink); cursor: pointer; font-weight: 650; transition: transform .15s var(--vis-ease), background-color .15s; user-select: none; }
.vibe label svg { width: 1.9rem; height: 1.9rem; flex: none; }
.vibe input:checked + label { background: var(--ink); color: #fff; transform: translateY(-2px); }
.vibe input:checked + label svg { background: #fff; border-radius: 50%; }
.vibe input:focus-visible + label { outline: 3px solid var(--ink); outline-offset: 3px; }
.vibe label:active { transform: translateY(1px); }
/* ---------- range slider with a pawn thumb ---------- */
.vis-range { -webkit-appearance: none; appearance: none; width: 100%; height: 2.75rem; background: transparent; cursor: pointer; }
.vis-range::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(var(--ink), var(--ink)) 0 / var(--fill, 50%) 100% no-repeat, var(--rule); border-radius: 0; }
.vis-range::-moz-range-track { height: 8px; background: var(--rule); }
.vis-range::-moz-range-progress { height: 8px; background: var(--ink); }
.vis-range::-webkit-slider-thumb { -webkit-appearance: none; width: 2rem; height: 2.4rem; margin-top: -1.05rem; background: var(--gelb); border: 2.5px solid var(--ink); border-radius: 50% 50% 35% 35% / 40% 40% 60% 60%; }
.vis-range::-moz-range-thumb { width: 2rem; height: 2.4rem; background: var(--gelb); border: 2.5px solid var(--ink); border-radius: 50% 50% 35% 35% / 40% 40% 60% 60%; }
.vis-range:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
/* ---------- pawn rows: one pawn per person (group size made visible) ---------- */
.crowd { display: flex; flex-wrap: wrap; gap: 2px; align-items: flex-end; min-height: 3.2rem; }
.crowd svg { width: 1.15rem; height: 1.6rem; flex: none; }
.crowd .off { opacity: .18; }
/* ---------- month / season strip ---------- */
.strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin: 1rem 0; }
.strip > * { position: relative; min-height: 4.2rem; padding: .35rem .2rem; background: var(--sheet); border: 1px solid var(--card-edge); font: inherit; font-size: .8125rem; font-weight: 700; color: var(--ink); text-align: center; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.strip button { cursor: pointer; transition: transform .15s var(--vis-ease); }
.strip button:hover { transform: translateY(-3px); }
.strip [aria-pressed="true"] { background: var(--ink); color: #fff; }
.strip i { display: block; width: 100%; height: var(--h, 20%); max-height: 2.2rem; background: var(--c, var(--himmel)); font-style: normal; }
@media (max-width: 560px) { .strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* ---------- cost stack ---------- */
.stack { display: grid; gap: .4rem; margin: 1rem 0; }
.stack > div { display: grid; grid-template-columns: minmax(7rem, 14rem) 1fr auto; gap: .75rem; align-items: center; }
.stack .bar { height: 1.6rem; background: var(--c, var(--himmel)); border: 2px solid var(--ink); width: var(--w, 50%); transform-origin: left center; }
.stack .num { font-weight: 700; }
@media (max-width: 560px) { .stack > div { grid-template-columns: 1fr auto; } .stack .bar { grid-column: 1 / -1; grid-row: 2; } }
/* ---------- quiz ---------- */
.quiz { background: var(--sheet); border: 2px solid var(--ink); padding: clamp(1rem, 3vw, 2rem); margin: 1.5rem 0; }
.quiz fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
.quiz legend { font-weight: 750; font-size: 1.125rem; margin-bottom: .6rem; padding: 0; }
.quiz output { display: block; font-weight: 650; margin: .5rem 0 1rem; }
/* ---------- pause control for loops longer than 5 s ---------- */
.vis-pause { font: inherit; font-size: .875rem; font-weight: 650; background: var(--sheet); color: var(--ink); border: 2px solid var(--ink); padding: .3rem .7rem; cursor: pointer; min-height: 2.75rem; }
.vis-pause[aria-pressed="true"] { background: var(--ink); color: #fff; }
/* ---------- motion: scenes only, never text; JS adds .vis-on to <html>, .is-in to [data-vis] ---------- */
@keyframes vis-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
@keyframes vis-hop { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-18%); } 55% { transform: translateY(0); } }
@keyframes vis-walk { from { transform: translateX(var(--from, 0)); } to { transform: translateX(var(--to, 0)); } }
@keyframes vis-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes vis-blink { 0%, 60%, 100% { opacity: 1; } 70%, 90% { opacity: .25; } }
.mv-bob, .mv-hop, .mv-sway, .mv-walk { transform-box: fill-box; transform-origin: 50% 100%; }
.vis-on [data-vis].is-in .mv-bob { animation: vis-bob 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.vis-on [data-vis].is-in .mv-hop { animation: vis-hop 1.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.vis-on [data-vis].is-in .mv-sway { animation: vis-sway 3s ease-in-out infinite; animation-delay: var(--d, 0s); }
.vis-on [data-vis].is-in .mv-walk { animation: vis-walk var(--dur, 9s) linear infinite alternate; }
.vis-on [data-vis].is-in .mv-blink { animation: vis-blink 2.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
/* entrance, one per scene: pieces drop onto the board, lines draw, bars grow */
.vis-on [data-vis] .mv-drop { transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(-30%) scale(.9); opacity: 0; transition: transform .6s var(--vis-ease), opacity .3s ease; transition-delay: var(--d, 0s); }
.vis-on [data-vis].is-in .mv-drop { transform: none; opacity: 1; }
.vis-on [data-vis] .mv-draw { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); transition: stroke-dashoffset 1.6s ease-out; transition-delay: var(--d, 0s); }
.vis-on [data-vis].is-in .mv-draw { stroke-dashoffset: 0; }
.vis-on [data-vis] .bar { transform: scaleX(.02); transition: transform .9s var(--vis-ease); transition-delay: var(--d, 0s); }
.vis-on [data-vis].is-in .bar { transform: none; }
.vis-paused [data-vis] * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .vis-on .vis-slot[data-vis] img, .vis-slot img { clip-path: none !important; transition: none !important; } .vis-on [data-vis] .sticker.pop { transform: rotate(var(--tilt, -6deg)) !important; }
  .vis-on [data-vis] *, .sticker, .vibe label, .vis-press, .strip button { animation: none !important; transition: none !important; }
  .vis-on [data-vis] .mv-drop, .vis-on [data-vis] .bar { transform: none; opacity: 1; }
  .vis-on [data-vis] .mv-draw { stroke-dashoffset: 0; }
  .vis-pause { display: none; }
}
@media print { .vis-pause { display: none; } }

/* Whole-page thread (VISUALS.md §11): a short dashed path with a field dot between sections, so the page reads as one board. */
.vis-step { position: relative; }
.vis-step::before { content: ""; display: block; width: 14px; height: 3.25rem; margin: 0 auto 1.25rem; background: radial-gradient(circle at 50% calc(100% - 7px), var(--gelb) 0 6px, var(--thread, var(--ink)) 6px 7px, transparent 7.5px) , linear-gradient(var(--thread, var(--ink)) 50%, transparent 0) 50% 0 / 2px 10px repeat-y; background-repeat: no-repeat, repeat-y; background-size: 14px 14px, 2px 10px; background-position: 50% 100%, 50% 0; opacity: .7; }
.vis-step.dark { --thread: #fff; }
/* Big at-a-glance fact: one figure, one line. */
.big-fact { display: grid; gap: .25rem; margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 6px solid var(--gelb); background: var(--sheet, #fff); color: var(--ink); }
.big-fact b { font: 700 clamp(2rem, 9vw, 3.25rem)/1 var(--face); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.big-fact span { font-size: 1rem; line-height: 1.35; }
.big-fact.gruen { border-color: var(--gruen); } .big-fact.orange { border-color: var(--orange); } .big-fact.himmel { border-color: var(--himmel); }

.vis-slot video { opacity: 0; transition: opacity .6s; } .vis-slot video.playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .vis-slot video { display: none; } }