/* ═══════════════════════════════════════════════════════════════════════
   ÚVOD · css/uvod.css (V2, SPEC 4.1 a 4.5)
   Rozvržení a komponenty úvodní stránky a stránky Bezpečí. Tokeny, materiály,
   tlačítka a předměty (arch, polaroid, lístek…) jsou v css/zaklad.css (V1),
   karty, kolečka, nádoby, porovnání a karusel v css/komponenty.css (V3).
   Tady je jen to, co patří úvodu: kompozice sekcí a živá omalovánka.

   Pravidla souboru: žádný syrový HEX ani RGB (jen tokeny), zlomy jen 1160,
   1000, 900, 640, 560 (řádek výhod, SPEC 4.1.3) a 360 px, animuje se jen
   transform, translate, rotate, scale, opacity (a jednorázově clip-path).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── RYTMUS SEKCÍ ─────────────────────────────────────────────────────────
   Každá .km-sek má odsazení nahoře i dole; dvě vedle sebe by mezi sebou měly
   dvojnásobek (až 224 px prázdného stolu). Mezera mezi sekcemi je proto jen
   spodní odsazení té předchozí. Výjimka: plstěná nástěnka je barevný pás, uvnitř
   i za ní se dýchá celým odsazením. */
#obsah > .km-sek + .km-sek:not(.km-sek--plna){padding-top:0}
#obsah > .km-sek.km-sek--plna + .km-sek:not(.km-sek--plna){padding-top:var(--sekce)}

/* ═══ 4 · BANNERY ═══════════════════════════════════════════════════════ */
.km-hero{padding-block:var(--s5) 0}
.km-hero [data-ceka-nahled]{margin-bottom:var(--s5)}
.km-hero .km-ceka{margin-top:0}

.km-bannery{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px}
.km-bannery-male{display:grid;gap:20px;grid-auto-rows:minmax(330px,1fr)}
@media (max-width:1160px){
  .km-bannery{grid-template-columns:minmax(0,1fr)}
  .km-bannery-male{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}}
@media (max-width:640px){.km-bannery-male{grid-template-columns:minmax(0,1fr)}}

/* ── Velký banner: tři oblasti hlava / scéna / tělo (SPEC 4.1.2, doslova) ── */
.km-hero-velky{display:grid;padding:40px;min-height:680px;column-gap:28px;row-gap:20px;overflow:hidden;isolation:isolate;
  grid-template-columns:minmax(0,1fr) clamp(300px,47%,372px);
  grid-template-rows:auto 1fr;grid-template-areas:"hlava scena" "telo scena"}
/* kontejner pro velikost H1: nikdy shrink-to-fit (s align-self ve flexu se zúží na jedno slovo na řádek) */
.km-hero-hlava{grid-area:hlava;align-self:end;justify-self:stretch;container-type:inline-size;min-width:0}
.km-hero-telo{grid-area:telo;align-self:start;max-width:38ch}
.km-scena{grid-area:scena;align-self:center;position:relative;min-width:0}
.km-hero-hlava .km-t-h1-uvod{font-size:var(--t-h1-uvod);font-size:clamp(40px,16.3cqi,64px)}   /* SPEC: 16cqi; 16,3 kvůli poměru H1 : H2 ≥ 1,5 na 1440 px (kontrola 9.1), viz docs/tym/hotovo-V2.md */
@media (max-width:900px){
  .km-hero-velky{grid-template-columns:minmax(0,1fr);grid-template-rows:none;
    grid-template-areas:"hlava" "scena" "telo";padding:40px 32px;min-height:0}
  .km-scena{justify-self:center;width:min(100%,340px)}}
@media (max-width:640px){
  .km-hero-velky{padding:24px 20px}
  .km-scena{width:88%}}

.km-hero-hlava .km-t-h1-uvod{margin-top:var(--s4)}
.km-hero-telo .km-t-lead{color:var(--ink)}
.km-hero-cena{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s5)}
.km-hero-tl{margin-top:var(--s5)}
.km-hero-pod{margin-top:var(--s3)}
@media (max-width:900px){.km-hero-telo{max-width:none}}
@media (max-width:640px){.km-hero-tl{width:100%}}

/* „Most k tvoření“: oba texty tlačítka v jedné buňce mřížky, šířka se nemění.
   Skrytý text má visibility:hidden, takže čtečka slyší vždy jen ten viditelný. */
.km-tl-texty{display:grid}
.km-tl-texty > span{grid-area:1 / 1;transition:opacity var(--d-kratce) var(--ease),visibility 0s linear var(--d-kratce)}
.km-tl-most{opacity:0;visibility:hidden}
.km-hero-tl.je-most .km-tl-most{opacity:1;visibility:visible;transition-delay:0s}
.km-hero-tl.je-most [data-t="uvod.tlacitko"]{opacity:0;visibility:hidden}

/* ── Scéna: arch, polaroid, penál ─────────────────────────────────────── */
.km-scena-arch{position:relative}
/* arch je kontejner: řádek letteringu leží v jeho horním bílém okraji (7,5 % šířky) */
.km-hero-arch{container-type:inline-size;z-index:var(--z-predmet)}
.km-hero-arch > .km-ilustracni{bottom:calc(28px + 3cqi)}      /* nad penálem, který přesahuje spodek archu */

/* polaroid se zdrojovou fotkou přes levý horní roh archu; do textového sloupce nezasahuje (mezera 28 px) */
.km-hero-polaroid{position:absolute;z-index:var(--z-ozdoba);width:108px;left:-12px;top:-18px}
.km-hero-polaroid .km-polaroid-in{padding-bottom:14%}
/* polaroid z zaklad.css má u obrázku aspect-ratio, ale atribut height by ho přebil */
.km-hero-polaroid img,.km-navod-karta .km-polaroid img{height:auto}
.km-hero-polaroid-paska{--w-sirka:62px;--w-vyska:20px;--w-uhel:-7deg;left:50%;top:-11px;translate:-50% 0}
@media (max-width:640px){.km-hero-polaroid{display:none}}

/* štítky zástupky proti skutečnému výstupu: přepíná jediný atribut data-predloha na .km-scena */
.km-scena[data-predloha="ilustrace"] .km-jen-skutecna,
.km-scena[data-predloha="skutecna"] .km-jen-ilustrace{display:none}
.km-hero-pravda{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s3)}

/* ── Řádek nad kresbou (lettering, počítadlo) ─────────────────────────── */
/* zarovnaný vpravo: levý horní roh archu patří polaroidu se zdrojovou fotkou */
.km-arch-radek{position:absolute;z-index:var(--z-text);left:7.5cqi;right:7.5cqi;top:0;height:7.5cqi;
  display:grid;align-items:center;justify-items:end;pointer-events:none}
.km-arch-radek > [data-omal-cast]{grid-area:1 / 1;opacity:0;transition:opacity var(--d-kratce) var(--ease)}
.km-arch-radek[data-omal-radek="vyberte"] [data-omal-cast="vyberte"],
.km-arch-radek[data-omal-radek="pocet"] [data-omal-cast="pocet"],
.km-arch-radek[data-omal-radek="kousek"] [data-omal-cast="kousek"],
.km-arch-radek[data-omal-radek="z-fotky"] [data-omal-cast="z-fotky"]{opacity:1}
.km-arch-radek .km-ruka{font-size:16px}                         /* výška letteringu 1,1 em ≈ 18 px */
.km-omal-pocet{font:600 14px/1 var(--f-ui);color:var(--ink-dim);font-variant-numeric:tabular-nums}
.km-omal-pocet b{display:inline-block;font-weight:600;color:var(--ink)}
/* telefon: okraj archu je jen 21 px, řádek leží těsně nad archem ve výšce 20 px */
@media (max-width:640px){.km-arch-radek{left:0;right:0;top:-26px;height:20px}
  .km-scena{padding-top:26px}}

/* ── Živá omalovánka ──────────────────────────────────────────────────── */
.km-omal{position:relative;aspect-ratio:3 / 4;border-radius:1px;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.km-omal:focus-visible{outline-offset:6px}
.km-omal-plocha{position:absolute;inset:0;overflow:hidden}
.km-omal-foto,.km-omal-svg{position:absolute;inset:0;width:100%;height:100%}
.km-omal-foto{z-index:1;object-fit:contain;clip-path:inset(0 0 0 0);-webkit-user-drag:none}
.km-omal-svg{z-index:0;overflow:hidden}
/* barva sahá pod čáru: oblasti leží pod #km-cary; žádná oblast ani klon nemá filtr (4.1.2.1) */
.km-omal-svg .km-oblast{cursor:inherit}

/* obtažení pauzákem: pás sjede, fotka se synchronně odkrývá zdola (clip-path jednou, ≤ 0,15 Mpx) */
.km-omal-pauzak{position:absolute;inset:0;z-index:2;pointer-events:none;transform:translateY(-101%)}
.km-omal.je-obtahuje .km-omal-pauzak{transform:none;transition:transform 900ms var(--ease-prichod)}
.km-omal.je-obtahuje .km-omal-foto{clip-path:inset(100% 0 0 0);transition:clip-path 900ms var(--ease-prichod)}
.km-omal.je-obtazeno .km-omal-pauzak{transform:none;opacity:0;transition:opacity var(--d-kryt) linear}
.km-omal[data-rovnou] .km-omal-pauzak{display:none}

/* tečka barvy pod prstem: odezva do jednoho snímku, při rolování zmizí */
.km-omal-tecka{position:absolute;z-index:3;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;pointer-events:none;
  background:var(--b,var(--s-ruz));box-shadow:0 0 0 2px var(--list),1px 2px 4px rgb(var(--ink-rgb) / .28);
  scale:.5;opacity:0;transition:scale var(--d-rychle) var(--ease-prichod),opacity var(--d-stisk) linear}
.km-omal-tecka.je-videt{scale:1;opacity:1}

/* guma: list papíru 40 px přejede zprava doleva */
.km-omal-guma{position:absolute;z-index:3;top:-2%;bottom:-2%;left:0;width:40px;pointer-events:none;
  background:var(--list);box-shadow:-2px 0 10px -4px rgb(var(--ink-rgb) / .35),2px 0 10px -4px rgb(var(--ink-rgb) / .35);
  border-radius:var(--r-papir);will-change:transform}

/* nedostupná předloha (soubor chybí): zůstane fotka a penál zmizí, nic nepředstírá funkci */
.km-scena:has(.km-omal[data-nedostupne]) :is(.km-pastelky,[data-omal-za-me],.km-arch-radek){visibility:hidden}

/* ── Penál: 8 pastelek a guma, přesahuje spodek archu ─────────────────── */
.km-pastelky{position:relative;z-index:var(--z-ozdoba);display:flex;align-items:flex-end;justify-content:center;gap:2px;
  min-inline-size:0;margin:-44px 0 0;padding:16px 4px 2px;border:0}
.km-pastelka{position:relative;flex:1 1 0;min-width:0;max-width:40px;height:64px;display:grid;justify-items:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transform-origin:50% 100%;
  transition:translate var(--pruzina-magnet-doba) var(--pruzina-magnet),rotate var(--d-kratce) var(--ease)}
.km-pastelka input{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none}
/* tělo pastelky: obrys inkoustem (kontrast 15 : 1, WCAG 1.4.11), dřevo papírově bílé (hlídač oranžové) */
.km-pastelka-telo{position:relative;display:block;width:min(30px,100%);height:64px;
  filter:drop-shadow(1px 3px 2px rgb(var(--ink-rgb) / .22))}
.km-pastelka-telo::before,.km-pastelka-telo::after{content:"";position:absolute}
.km-pastelka-telo::before{inset:0;background:var(--ink);clip-path:polygon(50% 0,93% 27%,93% 100%,7% 100%,7% 27%)}
.km-pastelka-telo::after{top:3px;bottom:1.5px;left:calc(7% + 1.5px);right:calc(7% + 1.5px);
  clip-path:polygon(50% 0,100% 26%,100% 100%,0 100%,0 26%);
  background:
    linear-gradient(var(--ink),var(--ink)) 0 26% / 100% 1.2px no-repeat,
    linear-gradient(90deg,#0000 62%,rgb(var(--ink-rgb) / .13) 62%) 0 100% / 100% 74% no-repeat,
    linear-gradient(var(--b) 0 11%,var(--list) 11% 26%,var(--b) 26%)}
/* vybraná pastelka: vyjede o 12 px a dostane kroužek --kouzlo 3 px kolem obrysu (barva není jediný nositel, WCAG 1.4.1) */
.km-pastelka::before{content:"";position:absolute;left:50%;top:-4px;width:calc(min(30px,100%) * .86 + 7px);height:71px;translate:-50% 0;
  background:var(--kouzlo);clip-path:polygon(50% 0,100% 27%,100% 100%,0 100%,0 27%);opacity:0;transition:opacity var(--d-rychle) var(--ease)}
.km-pastelka:has(input:checked){translate:0 -12px}
.km-pastelka:has(input:checked)::before{opacity:1}
/* ostatní se o 2° skloní k vybrané, jako by se v penálu pohnuly */
.km-pastelka:has(~ .km-pastelka input:checked){rotate:2deg}
.km-pastelka:has(input:checked) ~ .km-pastelka{rotate:-2deg}
.km-pastelka:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:4px;border-radius:8px}
/* před koncem obtažení pastelky leží (pozvánka je vysune); bez JS a v klidné úrovni rovnou vybraná */
html.nastup .km-pastelky--spi .km-pastelka:has(input:checked){translate:0 0}
html.nastup .km-pastelky--spi .km-pastelka:has(input:checked)::before{opacity:0}

.km-guma{flex:none;align-self:flex-end;display:grid;place-items:center;width:var(--cil);height:var(--cil);margin:0 0 4px 6px;border:0;
  border-radius:var(--r-ovladani);background:var(--list);color:var(--ink);box-shadow:var(--stin-samolepka);cursor:pointer;
  transition:translate var(--d-rychle) var(--ease-stisk)}
.km-guma svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.km-guma:active{translate:0 1px}
.km-guma:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* dotyk: rozteč 44 px a vodorovné rolování, poslední pastelka napůl vykukuje */
html[data-vstup="dotyk"] .km-pastelky{justify-content:flex-start;gap:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  padding-inline:0;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 22px),#0000);mask:linear-gradient(90deg,#000 calc(100% - 22px),#0000)}
html[data-vstup="dotyk"] .km-pastelky::-webkit-scrollbar{display:none}
html[data-vstup="dotyk"] .km-pastelka{flex:0 0 44px;max-width:none}
html[data-vstup="dotyk"] .km-guma{margin-right:22px}

/* řádek pod penálem: dva textové odkazy (akce jsou tlačítka, vypadají jako odkaz) */
.km-pod-penalem{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:44px;margin-top:var(--s1)}
.km-pod-penalem .km-odkaz,.km-mama-akce .km-odkaz{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;
  background:none;font:600 15px/1.2 var(--f-ui);cursor:pointer;text-align:left}
.km-pod-penalem .km-odkaz svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){.km-pod-penalem{min-height:48px}.km-pod-penalem .km-odkaz{min-height:48px}}

/* ── Malé bannery: celé jsou odkaz, „To chci“ je jen vizuální ─────────────
   Rozpočet výšky: na 1440 px musí každý malý banner zůstat na 330 px, jinak
   by velký banner (stejný řádek mřížky) vyrostl pod ohyb 900 px (kontrola 9.1).
   Text je proto ve sloupci max 200 px nahoře a cena s tlačítkem v patce:
   u Animáku v jednom řádku pod magnetkami, u Starých fotek pod sebou vlevo
   od alba (album stojí vpravo dole a nad ním je místo pro širší nadpis). */
.km-banner-maly{position:relative;display:grid;grid-template-columns:minmax(0,min(200px,56%)) minmax(0,1fr);
  grid-template-rows:auto 1fr auto;grid-template-areas:"text ." ". ." "pata pata";
  min-height:330px;padding:32px;overflow:hidden;isolation:isolate;color:var(--ink);
  text-decoration:none;-webkit-tap-highlight-color:transparent;transition:translate var(--d-stred) var(--ease-prichod)}
.km-banner-text{grid-area:text;position:relative;z-index:var(--z-text);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2)}
.km-banner-h{margin-top:2px;white-space:nowrap}
.km-banner-h > span{display:block}
.km-banner-veta{font:500 15px/1.45 var(--f-ui)}
.km-banner-pata{grid-area:pata;position:relative;z-index:var(--z-text);display:flex;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3);margin-top:var(--s3)}
.km-banner-cena{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.km-banner-maly--animak .km-banner-cena{flex:1 1 0;flex-wrap:nowrap}
.km-banner-maly--animak .km-banner-cena .km-t-meta{max-width:18em}
/* Staré fotky: nadpis přes celou šířku (dva řádky, rovně), text a patka vlevo od alba */
.km-banner-maly--fotky{grid-template-areas:"text text" ". ." "pata ."}
.km-banner-maly--fotky .km-banner-text > :not(.km-banner-h){max-width:min(200px,56%)}
.km-banner-maly--fotky .km-banner-pata{grid-column:1 / -1;max-width:min(216px,60%);flex-direction:column;align-items:flex-start;gap:var(--s3)}
.km-banner-maly:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.km-banner-maly:active{scale:.985;transition-duration:var(--d-stisk)}
@media (hover:hover) and (pointer:fine){
  .km-banner-maly:hover{translate:0 -3px}
  .km-banner-maly:hover .km-tl--inkoust{--bg:var(--akce);--hrana:var(--akce-a)}}
@media (max-width:1160px){.km-banner-maly{min-height:300px}}
@media (max-width:640px){
  .km-banner-maly{padding:28px 24px}
  .km-banner-maly--animak .km-banner-pata{flex-wrap:wrap}
  .km-banner-maly--animak .km-banner-cena{flex-wrap:wrap;flex-basis:100%}}

/* Animák: dvířka ledničky (jen svislý úchyt) a dvě magnetky z magnetického papíru.
   Velikost a odsazení v % šířky banneru: na 1161 px je banner o čtvrtinu užší než na 1440. */
.km-lednice{position:absolute;inset:0;z-index:var(--z-predmet);pointer-events:none}
.km-lednice-uchyt{position:absolute;right:12px;top:32%;width:10px;height:120px;border-radius:var(--r-pill);
  background:var(--list);box-shadow:var(--stin-samolepka)}
.km-lednice .km-magnetka{position:absolute;pointer-events:auto;cursor:grab;-webkit-user-select:none;user-select:none}
.km-lednice .km-magnetka img{-webkit-user-drag:none;pointer-events:none}
.km-lednice .km-magnetka:active{cursor:grabbing}
.km-lednice-a{width:clamp(96px,31%,132px);right:10%;top:26px}
.km-lednice-b{width:clamp(80px,24.5%,104px);right:4%;top:108px}
@media (max-width:640px){.km-lednice-a{top:24px}.km-lednice-b{top:98px}}

/* Staré fotky: stránka alba s ukázkovým porovnáním a letteringem „Svatba, 1962“ */
.km-banner-album{position:absolute;z-index:var(--z-predmet);width:clamp(120px,36%,150px);right:22px;bottom:24px;margin:0}
.km-banner-album .km-album-foto{position:relative}
.km-banner-album-okno{position:absolute;inset:0;overflow:hidden}
.km-banner-album-okno .km-po{width:100%;height:100%}
.km-album-popisek{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;font-size:19px}
.km-banner-album > .km-ilustracni{bottom:40px;right:16px}

/* ═══ 5 · ŘÁDEK VÝHOD: text na stole, ikony se nepředvádějí ═════════════ */
.km-vyhody{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);margin-top:var(--s6);padding:0;list-style:none}
.km-vyhoda{display:flex;align-items:flex-start;gap:var(--s3);min-width:0}
.km-vyhoda b{display:block;font:550 16px/1.3 var(--f-ui);color:var(--ink)}
.km-vyhoda b + span{display:block;margin-top:2px;font:500 15px/1.4 var(--f-ui);color:var(--ink-dim)}
@media (max-width:900px){.km-vyhody{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.km-vyhody{grid-template-columns:minmax(0,1fr);gap:20px}}

/* ═══ 6 · KOLEČKA (vzhled V3, tady jen místo na stole) ══════════════════ */
.km-kategorie{padding-top:var(--s8)}
.km-sek-hlava--stred .km-titul{margin-top:var(--s4)}
.km-sek-hlava--stred .km-t-lead{margin-top:var(--s3)}

/* obecná hlavička vlevo: štítek, H2, perex pod sebou */
.km-sek-hlava > div > .km-titul{margin-top:var(--s4)}
.km-sek-hlava > div > .km-t-lead{max-width:36em;margin-top:var(--s3);color:var(--ink-dim)}

/* ═══ 9 · JAK TO FUNGUJE ════════════════════════════════════════════════ */
.km-kroky{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6);padding:0;list-style:none}
.km-krok{position:relative;min-width:0}
.km-krok-cislo{display:block;width:max-content;margin-bottom:var(--s4);font:var(--w-titul) 56px/1 var(--f-titul);color:var(--ink);
  font-variation-settings:"opsz" 72;text-shadow:3px 3px 0 var(--ps)}
.km-krok .km-t-h3{margin-bottom:var(--s2)}
.km-krok p{color:var(--ink-dim)}
/* ručně kreslená čárkovaná spojnice k dalšímu kroku; kreslí se podle rolování */
.km-krok-spojnice{top:21px;left:58px;width:calc(100% - 58px + var(--s6) - 10px);height:14px;--barva:var(--pole-linka);--tl:2.2}
html.nastup .km-krok-spojnice:not(.je-nakresleno){stroke-dashoffset:1}
.km-krok-spojnice.je-nakresleno{transition:stroke-dashoffset 900ms var(--ease-kresba)}
@supports (animation-timeline:view()){
  .km-krok-spojnice{animation:km-kresli linear both;animation-timeline:view();animation-range:entry 40% cover 45%}}
html[data-pohyb="klidna"] .km-krok-spojnice{stroke-dashoffset:0}
.km-jak-akce{display:flex;justify-content:center;margin-top:var(--s7)}

/* předváděčka kroku 3: pauzák se jednou odloupne a pod ním je obrázek */
.km-krok-ukazka{position:relative;width:128px;margin-top:var(--s5);--uhel:-2deg}
.km-krok-list{display:block;aspect-ratio:210 / 297;padding:7%;background:var(--list);box-shadow:var(--stin-zvednuta);
  border-radius:var(--r-papir);rotate:var(--uhel)}
.km-krok-list img{width:100%;height:100%;object-fit:contain}
.km-krok-kryt{position:absolute;inset:0;rotate:var(--uhel);transform-origin:0 0;border-radius:var(--r-papir)}
.km-krok-roh{position:absolute;right:0;bottom:0;width:26px;height:26px;
  background:linear-gradient(135deg,rgb(var(--ink-rgb) / .10) 0 50%,var(--list) 50%);
  box-shadow:-2px -2px 5px -2px rgb(var(--ink-rgb) / .3);clip-path:polygon(100% 0,0 100%,0 0)}
.km-krok-ukazka > .km-ilustracni{right:-10px;bottom:-10px}
html.nastup .km-krok-ukazka.V .km-krok-kryt{animation:km-odloupni 1100ms var(--ease-odjezd) 800ms both}
@keyframes km-odloupni{
  0%{transform:none;opacity:1}
  30%{transform:rotate(-4deg) translate(-2%,-3%);opacity:1}
  100%{transform:rotate(-26deg) translate(-38%,-70%);opacity:0}}
html[data-pohyb="klidna"] .km-krok-kryt{display:none}

@media (max-width:1000px){
  .km-kroky{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7) var(--s6)}
  .km-krok:nth-child(2n) .km-krok-spojnice{display:none}}
@media (max-width:640px){
  .km-kroky{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .km-krok{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:var(--s4)}
  .km-krok > :not(.km-krok-cislo){grid-column:2}
  .km-krok-cislo{grid-row:1 / span 3;font-size:44px}
  .km-krok-spojnice{display:none}}

/* ═══ 10 · BEZPEČÍ (jediný panel úvodu) ═════════════════════════════════ */
.km-bezpeci{padding:var(--s8) var(--s7)}
.km-bezpeci-hlava{max-width:44em;margin-bottom:var(--s7)}
.km-bezpeci-hlava .km-titul{margin-top:var(--s4)}
.km-bezpeci-hlava .km-t-lead{margin-top:var(--s3);color:var(--ink)}
@media (max-width:640px){.km-bezpeci{padding:var(--s7) var(--s4)}}

/* Cesta fotky: dráha nahoře, polaroid po ní jede podle rolování, zastávky pod ní */
.km-cesta{--sloup:calc((100% - 3 * var(--s5)) / 4);position:relative;margin-bottom:var(--s7)}
.km-cesta-draha{position:relative;height:44px;margin-bottom:var(--s3)}
.km-cesta-cara{position:absolute;top:21px;left:calc(var(--sloup) / 2);right:calc(var(--sloup) / 2);height:2px;opacity:.55;
  background:repeating-linear-gradient(90deg,var(--ink-dim) 0 8px,#0000 8px 16px)}
/* jezdec má šířku dráhy a polaroid sedí na jeho levém okraji: posun o 100 % = celá délka dráhy */
.km-cesta-jezdec{position:absolute;top:0;left:calc(var(--sloup) / 2);right:calc(var(--sloup) / 2);height:44px}
.km-cesta-polaroid{position:absolute;left:0;top:2px;width:34px;height:40px;translate:-50% 0;rotate:-6deg;padding:3px 3px 9px;
  background:var(--list);box-shadow:var(--stin-samolepka);border-radius:1px}
.km-cesta-polaroid::before{content:"";display:block;width:100%;height:100%;
  background:linear-gradient(var(--p-neb) 0 58%,var(--s-pis) 58%)}
.km-cesta-polaroid::after{content:"";position:absolute;left:9px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--s-mas)}
@supports (animation-timeline:view()){
  .km-cesta-jezdec{animation:km-cesta linear both;animation-timeline:view();animation-range:cover 18% cover 62%}}
@keyframes km-cesta{from{transform:translateX(0)}to{transform:translateX(100%)}}
.km-cesta-zastavky{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);padding:0;list-style:none}
.km-zastavka{min-width:0}
.km-zastavka-obr{width:120px;height:120px;margin:0 auto var(--s4);object-fit:contain}
.km-zastavka p{font-size:16px;line-height:1.55}
.km-zastavka b{font-weight:600}
@media (max-width:1000px){
  .km-cesta{padding-left:48px}
  .km-cesta-draha{position:absolute;left:0;top:44px;bottom:44px;width:40px;height:auto;margin:0}
  .km-cesta-cara{top:0;bottom:0;left:19px;right:auto;width:2px;height:auto;
    background:repeating-linear-gradient(180deg,var(--ink-dim) 0 8px,#0000 8px 16px)}
  .km-cesta-jezdec{top:0;bottom:0;left:0;right:auto;width:40px;height:auto}
  .km-cesta-polaroid{left:3px;top:0;translate:0 -50%}
  @supports (animation-timeline:view()){.km-cesta-jezdec{animation-name:km-cesta-svisle;animation-range:cover 22% cover 70%}}
  .km-cesta-zastavky{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .km-zastavka{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:var(--s4)}
  .km-zastavka-obr{width:88px;height:88px;margin:0}}
@keyframes km-cesta-svisle{from{transform:translateY(0)}to{transform:translateY(100%)}}

.km-bezpeci-karty{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);margin-bottom:var(--s5);padding:0;list-style:none}
.km-bezpeci-karty > li{display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s5);border-radius:var(--r-list);min-width:0}
.km-bezpeci-karty p{font-size:16px;line-height:1.55}
.km-bezpeci-karty b{font-weight:600}
@media (max-width:1000px){.km-bezpeci-karty{grid-template-columns:minmax(0,1fr)}}

.km-bezpeci-souhrn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s4) var(--s6);
  padding:var(--s6) var(--s6);border-radius:var(--r-ovladani)}
.km-sliby-vy{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);padding:0;list-style:none}
.km-sliby-vy li{display:flex;align-items:center;gap:var(--s2);font:500 16px/1.4 var(--f-ui)}
.km-sliby-vy svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--uspech);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1000px){.km-bezpeci-souhrn{grid-template-columns:minmax(0,1fr)}.km-sliby-vy{flex-direction:column}}
.km-bezpeci-drobne{margin-top:var(--s5);color:var(--ink)}
.km-bezpeci-drobne .km-odkaz{font-weight:600}

/* ═══ 11 · NA DÁREK (karty a mřížka V3) ═════════════════════════════════ */
.km-darky-pata{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s3) var(--s6);margin-top:var(--s5)}
.km-darky-pata .km-t-meta{max-width:52em}

/* ═══ 12 · NÁPADY Z DÍLNY ═══════════════════════════════════════════════ */
.km-napady{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7) var(--s6);padding:0;list-style:none}
.km-navod-karta{display:grid;grid-template-columns:148px minmax(0,1fr);align-items:start;gap:var(--s5);height:100%;
  color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
.km-navod-karta .km-polaroid{width:148px;transition:rotate var(--d-stred) var(--ease-prichod),translate var(--d-stred) var(--ease-prichod)}
.km-navod-karta .km-polaroid img{background:var(--t-lev)}
.km-navod-karta .km-polaroid figcaption{font-size:18px;bottom:6%}
.km-navod-paska{--w-sirka:74px;--w-vyska:22px;--w-uhel:-6deg;left:50%;top:-11px;translate:-50% 0}
.km-navod-telo{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);padding-top:var(--s2)}
.km-navod-veta{font:500 16px/1.5 var(--f-ui)}
.km-navod-karta .km-odkaz{margin-top:var(--s1)}
.km-navod-karta:focus-visible{outline:3px solid var(--focus);outline-offset:6px;border-radius:var(--r-list)}
@media (hover:hover) and (pointer:fine){
  .km-navod-karta:hover .km-polaroid{rotate:0deg;translate:0 -4px}
  .km-navod-karta:hover .km-odkaz{color:var(--kouzlo-h)}}
@media (max-width:1000px){.km-napady{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .km-napady{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;gap:var(--s4);overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--okraj));padding:var(--s4) var(--okraj) var(--s5);
    scroll-padding-inline:var(--okraj)}
  .km-napady::-webkit-scrollbar{display:none}
  .km-napady > li{scroll-snap-align:start}
  .km-navod-karta{grid-template-columns:minmax(0,1fr);padding:var(--s4) var(--s4) var(--s5);background:var(--list);
    box-shadow:var(--stin-karta);border-radius:var(--r-list)}
  .km-navod-karta .km-polaroid{width:min(64%,190px);margin-inline:auto}}

/* okno návodu (šířka 640 px) */
.km-okno--navod{width:min(640px,calc(100% - 32px))}
.km-okno--tip{width:min(540px,calc(100% - 32px))}
.km-navod-meta{margin-bottom:var(--s2)}
.km-okno .km-okno-nadpis{padding-right:40px}
.km-okno .km-okno-nadpis:focus{outline:none}
.km-navod-perex{margin-top:var(--s4)}
.km-navod-teze{display:block;margin-bottom:var(--s2);font:var(--w-titul) 21px/1.25 var(--f-titul);letter-spacing:-.01em}
.km-navod-udaje{display:grid;gap:var(--s3);margin-top:var(--s5);padding:var(--s4) var(--s5);border-radius:var(--r-mala);background:var(--papir-2)}
.km-navod-udaje dt{font:600 15px/1.3 var(--f-ui)}
.km-navod-udaje dd{margin:2px 0 0;font:500 16px/1.5 var(--f-ui)}
.km-navod-h{margin-top:var(--s6);font:var(--w-titul) var(--t-h3)/var(--lh-h3) var(--f-titul);letter-spacing:-.01em}
.km-navod-kroky{counter-reset:krok;margin-top:var(--s3);padding:0;list-style:none}
.km-navod-kroky li{counter-increment:krok;position:relative;min-height:32px;padding:3px 0 0 46px;line-height:1.55}
.km-navod-kroky li + li{margin-top:var(--s3)}
.km-navod-kroky li::before{content:counter(krok);position:absolute;left:0;top:0;width:32px;text-align:center;
  font:var(--w-titul) 26px/1 var(--f-titul);text-shadow:2px 2px 0 var(--s-lev)}
.km-navod-tip{margin-top:var(--s5);padding:var(--s4) var(--s5);border-radius:var(--r-mala);background:var(--t-mat)}
.km-navod-pozn{margin-top:var(--s4)}
.km-navod-tip b,.km-navod-pozn b{font-weight:600}
.km-navod-pozvanka{margin-top:var(--s5)}
.km-doplnit{padding:0 .12em;border-radius:3px;background:var(--t-mas);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.km-okno .km-okno-in > .km-tl--siroky{margin-top:var(--s6)}
.km-okno-zavrit svg{width:22px;height:22px;margin:auto;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.km-okno-zavrit-dole{display:none}
@media (max-width:640px){.km-okno-zavrit-dole{display:flex;justify-content:center;width:100%;min-height:var(--cil);margin-top:var(--s3);
  border:0;background:none;cursor:pointer;font:600 16px/1.2 var(--f-ui)}}

/* okno „Poslat svůj tip“ */
.km-okno-perex{margin-top:var(--s3);color:var(--ink-dim)}
.km-tip-form .km-pole textarea{min-height:120px}
.km-tip-form .km-zaskrt{margin-top:var(--s4)}
.km-pravidla-dilny{display:grid;gap:6px;margin:var(--s4) 0 var(--s5);padding:var(--s4) var(--s5);border-radius:var(--r-mala);background:var(--papir-2);list-style:none}
.km-pravidla-dilny li{position:relative;padding-left:18px;font:500 14px/1.45 var(--f-ui);color:var(--ink-dim)}
.km-pravidla-dilny li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:7px;background:var(--s-lev);
  border-radius:48% 52% 44% 56% / 58% 46% 54% 42%}        /* vosková tečka, tentýž tvar jako drobky */
.km-pravidla-dilny li:nth-child(2)::before{background:var(--s-neb)}
.km-pravidla-dilny li:nth-child(3)::before{background:var(--s-mat)}
.km-pravidla-dilny li:nth-child(4)::before{background:var(--s-ruz)}
.km-tip-hotovo,.km-dotaz-hotovo{outline:none}
.km-tip-hotovo{margin-top:var(--s4);padding:var(--s5);border-radius:var(--r-mala);background:var(--uspech-bg)}
.km-tip-hotovo-nadpis,.km-dotaz-hotovo-nadpis{display:flex;align-items:center;gap:var(--s2);color:var(--uspech);font:600 17px/1.3 var(--f-ui)}
.km-tip-hotovo-nadpis svg,.km-dotaz-hotovo-nadpis svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.km-tip-hotovo p + p{margin-top:var(--s2)}

/* chyby polí (vzhled .km-pole-chyba je v zaklad.css; tady ikona a textarea) */
.km-pole[data-chyba] textarea{border-color:var(--chyba)}
.km-pole-chyba[hidden]{display:none}
.km-pole-chyba svg{margin-top:1px}

/* ═══ 13 · MÁMA MÁMĚ: plstěná nástěnka ══════════════════════════════════ */
.km-mama{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:var(--s7) var(--s8);align-items:start}
.km-mama-hlava .km-titul{margin-top:var(--s4)}
/* na plsti jen inkoust od 17 px (kontrast v nejtmavším bodě zrna 4,99 : 1, SPEC 2.3) */
.km-mama-perex{margin-top:var(--s4);font:var(--w-text) var(--t-lead)/var(--lh-lead) var(--f-ui);color:var(--ink)}
.km-mama-bok > * + *{margin-top:var(--s6)}
.km-listky{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s5);align-items:start;padding:0;list-style:none}
.km-listky > .km-listek{translate:0 var(--posun,0px)}
.km-listek-paska{--w-sirka:92px;--w-vyska:24px;left:50%;top:-12px;translate:-50% 0}
.km-listek .km-listek-nadpis{margin-bottom:var(--s1)}
.km-listek-puvod .km-ruka{font-size:21px}
.km-mama-akce{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s6);margin-top:var(--s7)}
.km-mama-akce .km-odkaz{font-size:17px}
.km-listky--dalsi{margin-top:var(--s7);grid-template-columns:repeat(3,minmax(0,1fr))}
.km-listky--dalsi .km-listek-nadpis{font-size:18px}
@media (max-width:1160px){.km-listky--dalsi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){.km-mama{grid-template-columns:minmax(0,1fr)}.km-mama-hlava{max-width:36em}}
@media (max-width:640px){
  .km-listky:not(.km-listky--dalsi){grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:86%;gap:var(--s4);overflow-x:auto;
    overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--okraj));
    padding:var(--s5) var(--okraj) var(--s6);scroll-padding-inline:var(--okraj)}
  .km-listky:not(.km-listky--dalsi)::-webkit-scrollbar{display:none}
  .km-listky:not(.km-listky--dalsi) > .km-listek{scroll-snap-align:start;translate:none}
  .km-listky--dalsi{grid-template-columns:minmax(0,1fr)}
  .km-mama-akce{margin-top:var(--s4)}}

/* hlasování: pátý „lístek“, větší, čistý list bez linek, rovně (klikací věci stojí rovně) */
.km-hlasovani{position:relative;padding:var(--s6) var(--s5) var(--s5);background:var(--list);box-shadow:var(--stin-karta);border-radius:var(--r-papir)}
.km-hlasovani > .km-spendlik{top:-8px}
.km-hlas-form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);align-items:start}
.km-hlas-uvod p{margin-top:var(--s2)}
.km-hlas-moznosti{display:grid;gap:2px;min-inline-size:0;margin:0;padding:0;border:0}
.km-hlas-moznost{position:relative;display:flex;align-items:center;gap:var(--s3);min-height:var(--cil);padding:6px 12px;border-radius:var(--r-ovladani);
  cursor:pointer;font:500 16px/1.3 var(--f-ui);isolation:isolate}
.km-hlas-moznost input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--kouzlo)}
.km-hlas-moznost:has(input:checked){background:var(--t-lev)}
@media (hover:hover){.km-hlas-moznost:hover{background:var(--t-lev)}}
.km-hlas-nazev{flex:1;min-width:0}
/* výsledky (od 50 hlasů): pruh --s-lev pod názvem, procenta vpravo */
.km-hlas-procenta{flex:none;font:600 15px/1 var(--f-ui);font-variant-numeric:tabular-nums}
.km-hlas-pruh{position:absolute;z-index:-1;left:0;top:0;bottom:0;width:var(--p,0%);border-radius:inherit;background:rgb(var(--s-lev-rgb) / .35)}
.km-hlas-moznosti:disabled .km-hlas-moznost{cursor:default}
.km-hlas-pata{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.km-hlas-turnstile{min-height:0}
/* na tabletu je nástěnka v jednom sloupci: hlasování vedle hlavičky, možnosti ve dvou sloupcích */
@media (max-width:1000px) and (min-width:641px){.km-hlas-moznosti{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.km-hlasovani{padding:var(--s6) var(--s4) var(--s5)}}

/* ═══ 14 · CENY (nádoby a plánovač V3) ══════════════════════════════════ */
.km-ceny-sek .km-planovac{margin-bottom:var(--s7)}
.km-garance{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3) var(--s6);margin-top:var(--s7);padding:0;list-style:none}
.km-garance li{display:flex;align-items:flex-start;gap:var(--s2);font:500 16px/1.4 var(--f-ui);max-width:34em}
.km-garance-fajfka{flex:none;width:26px;height:21px;margin-top:-1px;fill:none;stroke:var(--uspech);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.km-ceny-platba,.km-ceny-kotva{max-width:46em;margin:var(--s4) auto 0;text-align:center}
.km-ceny-platba:empty{display:none}
@media (max-width:640px){.km-garance{flex-direction:column;align-items:flex-start}}

/* ═══ 15 · ČASTÉ DOTAZY ═════════════════════════════════════════════════ */
/* kostra dávala sekci ovesný panel (#otazky ve style.css); podle SPEC leží dotazy na stole */
#otazky{background:none}
.km-otazky{max-width:880px;margin-inline:auto}
.km-otazky-hlava{margin-bottom:var(--s6)}
.km-otazky-hlava .km-titul{margin-top:var(--s4)}
.km-otazky-hlava .km-t-lead{max-width:36em;margin-top:var(--s3);color:var(--ink-dim)}
.km-faq{border-top:1.5px solid var(--linka)}
.km-faq[aria-busy="true"]{min-height:320px}
.km-faq-pol{border-bottom:1.5px solid var(--linka)}
.km-faq-pol h3{margin:0;font:inherit}
.km-faq-ot{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);width:100%;min-height:64px;padding:var(--s4) 0;
  border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;font:600 18px/1.35 var(--f-ui);-webkit-tap-highlight-color:transparent}
.km-faq-ot:focus-visible{outline-offset:2px;border-radius:var(--r-papir)}
.km-faq-sip{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--papir-2);color:var(--ink);
  transition:rotate var(--pruzina-magnet-doba) var(--pruzina-magnet),background-color var(--d-rychle) var(--ease)}
.km-faq-sip svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.km-faq-ot[aria-expanded="true"] .km-faq-sip{rotate:180deg;background:var(--ink);color:var(--list)}
@media (hover:hover) and (pointer:fine){.km-faq-ot:hover .km-faq-sip{background:var(--p-lev)}
  .km-faq-ot[aria-expanded="true"]:hover .km-faq-sip{background:var(--ink)}}
/* odpověď se ukáže hned (výšku neanimujeme, SPEC 6.4), jen text jemně připluje */
.km-faq-odp{padding:0 var(--s8) var(--s5) 0;color:var(--ink-dim);animation:km-faq-odp var(--d-kratce) var(--ease-prichod)}
.km-faq-odp p + p{margin-top:var(--s3)}
@keyframes km-faq-odp{from{opacity:0;translate:0 -6px}}
@media (max-width:640px){.km-faq-ot{font-size:17px}.km-faq-odp{padding-right:0}}
.km-faq-chyba{padding:var(--s5) 0}

.km-dotaz{margin-top:var(--s7);padding:var(--s6);border-radius:var(--r-list)}
.km-dotaz-nadpis{margin-bottom:var(--s2)}
.km-dotaz-dvojice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s4)}
.km-dotaz-pata{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s5);margin-top:var(--s5)}
.km-dotaz-pozn{display:flex;align-items:flex-start;gap:var(--s2);max-width:30em}
.km-dotaz-pozn svg{width:18px;height:18px;flex:none;margin-top:1px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.km-dotaz-souhrn{margin-top:var(--s4)}
.km-dotaz-hotovo p + p{margin-top:var(--s2)}
.km-dotaz-echo{margin:var(--s4) 0;padding:var(--s4) var(--s5);border-radius:var(--r-mala);background:var(--papir-2);font:500 16px/1.55 var(--f-ui);color:var(--ink-dim);white-space:pre-line}
.km-dotaz-echo:empty{display:none}
@media (max-width:640px){.km-dotaz{padding:var(--s5) var(--s4)}.km-dotaz-dvojice{grid-template-columns:minmax(0,1fr)}
  .km-dotaz-pata .km-tl{width:100%}}

/* ═══ PLOVOUCÍ TLAČÍTKO (telefon a tablet do 900 px, 4.1.14) ════════════ */
.km-cta-palec{position:fixed;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:var(--z-palec);
  translate:0 0;transition:translate 280ms var(--ease-prichod)}
@starting-style{.km-cta-palec{translate:0 calc(100% + 24px + env(safe-area-inset-bottom))}}
.km-cta-palec.je-odjizdi{translate:0 calc(100% + 24px + env(safe-area-inset-bottom));transition:translate 200ms var(--ease-odjezd)}
.km-cta-palec .km-tl{width:100%;--zare:0 14px 28px -12px rgb(var(--ink-rgb) / .5)}
/* text tlačítka a vedle cena na světlé pilulce (gen:portret-od z katalogu, majitel 6. 10. 2026: „lepší CTA“) */
.km-cta-palec .km-tl{gap:10px}
.km-cta-cena{flex:none;padding:5px 10px 6px;border-radius:var(--r-pill);background:rgb(var(--list-rgb) / .22);font:700 14px/1 var(--f-ui);white-space:nowrap}
@media (min-width:901px){.km-cta-palec{display:none}}
html[data-pohyb="klidna"] .km-cta-palec{transition-duration:.01ms}

/* ═══ STRÁNKA BEZPEČÍ (/bezpeci, SPEC 4.5) ══════════════════════════════ */
.km-bez{padding-block:var(--s7) var(--sekce)}
.km-bez-hlava{max-width:720px}
.km-bez-hlava .km-t-lead{margin-top:var(--s4);color:var(--ink-dim)}
.km-bez-cesta{margin-block:var(--s7) var(--s8);padding:var(--s7) var(--s7) var(--s6)}
.km-bez-cesta .km-cesta{margin-bottom:0}
@media (max-width:640px){.km-bez-cesta{padding:var(--s6) var(--s4)}}
.km-bez-mriz{display:grid;grid-template-columns:minmax(0,720px) minmax(0,260px);justify-content:space-between;gap:var(--s8)}
.km-bez-text > section + section{margin-top:var(--s7)}
.km-bez-text h2{margin-bottom:var(--s3)}
.km-bez-text p + p,.km-bez-text ul + p{margin-top:var(--s3)}
/* odkaz na anglické znění zásad pro ty, kdo česky nečtou (a pro kontrolu přihlášení přes Google) */
.km-bez-jazyk{margin-top:var(--s3)}
.km-bez-text ul{display:grid;gap:var(--s2);margin-top:var(--s3);padding:0;list-style:none}
.km-bez-text ul li{position:relative;padding-left:22px}
.km-bez-text ul li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:7px;background:var(--s-mat);
  border-radius:48% 52% 44% 56% / 58% 46% 54% 42%}
.km-bez-lhuty li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);padding:var(--s2) 0 var(--s2) 22px;border-bottom:1.5px solid var(--linka)}
.km-bez-lhuty li::before{top:1.05em}
.km-bez-lhuty b{font-weight:600;text-align:right}
.km-bez-vy{padding:var(--s6);border-radius:var(--r-ovladani)}
.km-bez-vy h2{margin-bottom:var(--s3)}
.km-bez-obsah{position:sticky;top:calc(var(--hdr,84px) + var(--kat-h) + var(--s5));align-self:start}
.km-bez-obsah p{margin-bottom:var(--s3)}
.km-bez-obsah ol{display:grid;gap:2px;padding:0;list-style:none;border-left:1.5px solid var(--linka)}
.km-bez-obsah a{display:flex;align-items:center;min-height:40px;padding:4px 0 4px var(--s4);color:var(--ink);text-decoration:none;font:500 15px/1.3 var(--f-ui)}
@media (hover:hover){.km-bez-obsah a:hover{color:var(--kouzlo-h);text-decoration:underline;text-decoration-color:var(--kouzlo);text-underline-offset:4px}}
@media (max-width:1000px){.km-bez-mriz{grid-template-columns:minmax(0,1fr)}.km-bez-obsah{display:none}}
@media (max-width:640px){.km-bez-lhuty li{grid-template-columns:minmax(0,1fr)}.km-bez-lhuty b{text-align:left}}

/* ═══ OMEZENÝ POHYB: úvod v klidné úrovni ═══════════════════════════════
   Obecná pravidla (délky přechodů, smyčky) jsou v zaklad.css; tady jen to,
   co se u úvodu nesmí ani prolnout: pastelky nevyjíždějí, pauzák se nevysouvá. */
html[data-pohyb="klidna"] .km-pastelka{transition:none}
html[data-pohyb="klidna"] .km-omal-pauzak{display:none}
@media (prefers-reduced-motion:reduce){.km-omal-pauzak{display:none}.km-krok-kryt{display:none}}

/* ═══ VYSOKÝ KONTRAST ═══════════════════════════════════════════════════ */
@media (forced-colors:active){
  .km-pastelka-telo::before{background:CanvasText}
  .km-pastelka:has(input:checked)::before{background:Highlight}
  .km-guma,.km-faq-sip{border:2px solid transparent}
  .km-cesta-draha,.km-krok-roh{display:none}}