/* Passklar motion (static/js/motion.js). Final states are plain CSS/HTML; nothing here hides content. */
:root{--flap:#22211F;--flap-2:#1A1917;--flap-fg:#F6F4F0;--flap-seam:#050505;--hl:#FBE4E1}

/* split-flap tiles: an aria-hidden overlay on top of the real text while a cell flips (no layout shift) */
.fl-cell{position:relative;display:inline-block;color:transparent}
.fl-row{position:absolute;left:0;top:50%;transform:translateY(-50%);display:inline-flex;white-space:nowrap;z-index:2;pointer-events:none}
.clock .fl-row{left:auto;right:0}
.fl{position:relative;display:inline-block;width:.66em;height:1.36em;margin-right:1px;perspective:9em;line-height:1.36em;font-weight:600;font-variant-numeric:tabular-nums}
.fl:last-child{margin-right:0}
.fl .h{position:absolute;left:0;right:0;height:50%;overflow:hidden;color:var(--flap-fg);text-align:center;backface-visibility:hidden}
.fl .t,.fl .ft{top:0;background:var(--flap);border-radius:2px 2px 0 0}
.fl .b,.fl .fb{bottom:0;background:var(--flap-2);border-radius:0 0 2px 2px}
.fl .h i{display:block;height:1.36em;font-style:normal}
.fl .b i,.fl .fb i{transform:translateY(-50%)}
.fl .ft{transform-origin:50% 100%;z-index:2;visibility:hidden}
.fl .fb{transform-origin:50% 0;z-index:2;visibility:hidden}
.fl::after{content:"";position:absolute;left:0;right:0;top:calc(50% - .5px);height:1px;background:var(--flap-seam);z-index:3}

.b-head .fl .h{color:#fff;background:#2B2A28}
.b-head .fl .b,.b-head .fl .fb{background:#1F1E1C}

/* "Zuletzt geändert" under the board */
.b-chg{border-top:1.5px solid #000;margin-top:14px;padding-top:10px;font-size:13.5px}
.b-chg h3{font-size:13px;font-weight:700;margin:0 0 6px}
.b-chg ul{list-style:none}
.b-chg li{display:flex;gap:6px;padding:6px 0;border-bottom:1px solid var(--rule)}
.b-chg li a{font-weight:600;text-decoration:none}
.b-chg li a:hover{text-decoration:underline;text-decoration-color:var(--red)}
.b-chg li .d{margin-left:auto;color:var(--grey);white-space:nowrap}
.b-chg-cap{font-size:12px;color:var(--grey);margin-top:6px}

/* pass page: big summit temperature next to the profile */
.pf-wrap.has-t{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:0 32px;align-items:end}
.pf-big{border-top:2px solid #000;padding:14px 0 10px}
.pf-big .k{font-size:14px;font-weight:600}
.pf-big .v{font-family:"Inter Display";font-weight:800;font-size:clamp(72px,9vw,128px);letter-spacing:-.06em;line-height:.9;color:var(--red);margin-top:6px}
.pf-big .s{font-size:13.5px;margin-top:10px;color:var(--grey)}
@media (max-width:900px){.pf-wrap.has-t{display:block}.pf-big{margin-top:16px}}

/* map: changed today = static ring + 3 pulses (motion.js); legend swatch */
.mk-ring{pointer-events:none}
.mk-pulse{pointer-events:none;opacity:0;transform-box:fill-box;transform-origin:center}
.lg-chg{display:inline-block;width:13px;height:13px;border:1.8px solid var(--red);border-radius:50%;vertical-align:-2px}
.mk-ic.chg{overflow:visible}
.mk-ic.chg i{position:relative;z-index:1;box-shadow:0 0 0 2px #fff,0 0 0 3.8px var(--red)}
.mk-ic b.mk-pulse{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border:2px solid var(--red);border-radius:50%;display:block;transform-box:border-box}
.mk-ic.low b.mk-pulse{width:9px;height:9px;margin:-4.5px 0 0 -4.5px}
/* noise-limit layer: fades in and out (SVG fallback and Leaflet paths) */
.map .g-db,.map .lf-noise{transition:opacity .5s cubic-bezier(.2,.7,.2,1)}
.map:not(.l-db) .g-db{display:inline;opacity:0;pointer-events:none}
.map:not(.l-db) .lf-noise{opacity:0;pointer-events:none}
/* webcam cross-fade: the previous image fades out above the new one */
.cam-img img.pk-ghost,.tile-img img.pk-ghost{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;pointer-events:none}

/* preview build */
.pv-banner{background:var(--red);color:#fff;font-size:13.5px}
.pv-banner .wrap{padding-top:8px;padding-bottom:8px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.pv-banner b{font-weight:700}
.pv-note{display:block;font-size:12.5px;color:var(--grey);margin-top:6px}

/* motion off (OS setting or footer switch): every final state, no transitions */
@media (prefers-reduced-motion:reduce){
  .fl-row{display:none}
  .map .g-db,.map .lf-noise{transition:none}
}
[data-motion="off"] .fl-row{display:none}
[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after{transition:none!important;animation:none!important}