/* css/pisma.css */
/* Písma (OFL, licence ve fonts/licence/): Domine 700 jen H1, displejová čísla a tisk na známce; Noticia Text 400/700 text, H2, rozhraní; 400 kurzíva jen poznámky.
   Záložní metriky (změřeno fontTools): Georgia Bold je na „Na ryby vedle farmy“ o 2,4 % širší než Domine 700 → size-adjust 97,6 %,
   aby H1 držel jeden řádek i před načtením písma (bez CLS); Georgia proti Noticii 400 užší → 106,6 %. */
@font-face { font-family: "Domine"; src: url("fonts/domine-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noticia Text"; src: url("fonts/noticia-text-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Noticia Text"; src: url("fonts/noticia-text-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noticia Text"; src: url("fonts/noticia-text-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Domine zaloha"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 700; size-adjust: 97.6%; ascent-override: 92%; descent-override: 24.5%; line-gap-override: 0%; }
@font-face { font-family: "Noticia zaloha"; src: local("Georgia"); font-weight: 400; size-adjust: 106.6%; ascent-override: 101%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: "Noticia zaloha"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 700; size-adjust: 104%; ascent-override: 103%; descent-override: 28%; line-gap-override: 0%; }

/* css/zaklad.css */
/* Srub Bezděkov – základ: tokeny, mřížka, typografie a komponenty (kolo 5: SJEDNOCENI.md › 2 a 5, ROZHODNUTI-KOLO-5.md).
   Barvy z fotek (KONCEPT.md › Barvy, ROZHODNUTI-KOLO-5 › 9): vápno (výjimka), inkoust a tma z kulatiny (fb-0554), víno jako akcent,
   len a sláma pro světlé plochy (fb-0257, fb-0084), známka (žlutá fb-0006), mulec (fb-0008).
   Systém: měkké předměty na světlém vápně, výrazné barvy jen jako jemné akcenty. Zaoblení je malá rodina odvozená ze známky (6 · 12 · 18 · 24), žádné pilulky
   ani kruhy; sekce se skládají ze čtyř vzorů (V1–V4), H2 má jednu velikost, popisek jednu podobu. Lokální hodnoty v CSS sekcí
   tokeny nepřebíjejí. */
:root {
  /* ---------- barvy a plochy (ROZHODNUTI-KOLO-5 › 9, KONCEPT › barvy): světlý základ, výrazné barvy jako jemné akcenty.
     Žádná velká plocha v sytém víně; tmavá plocha jen v neutrální tmě z kulatiny (OKLCH chroma ≤ 0,03). */
  --vapno: #F8F6F2;                                                  /* stránka, úvod, hlavička, menu, spodní lišta */
  --inkoust: #2D241F;      /* oklch .269 .016 51: kulatina ve stínu verandy fb-0554; text odstavců, H3, obrysy (14,1 : 1) */
  --vino: #6C222A;         /* oklch .369 .105 18: akcent; H1, H2, displej, odkazy, primární tlačítko, aktivní stav, fokus, ikony (10,2 : 1) */
  --vino-2: #55181E;       /* oklch .310 .090 18: najetí a stisk primárního tlačítka */
  --znamka: #D6C379;       /* žlutá ušní známka fb-0006: předmět 72, logo, štítky, výsledek, fokus na tmě */
  --znamka-hrana: #A38F4B;
  --mulec: #695F57;        /* oklch .493 .018 60: teplá šedá (hodnocení 5.2: tón 288 byl studený); stín kůry kulatiny fb-0554 při L mulce fb-0008; jen sekundární text (5,8 : 1 na vápně, 5,3 : 1 na --plocha-2, 4,8 : 1 na --plocha-3) */
  --tma: #291F19;          /* oklch .249 .019 53: neutrální tma z kulatiny; patička, hlavička nad patičkou (vápno 14,9 : 1) */
  --tma-hluboka: #1D1612;  /* oklch .207 .014 51: prohlížeč fotek, scrim menu, lišta návrhu */
  --ruzova: #F7D9DF;
  --ruzova-text: #8A3B52;  /* růžová známka telete fb-0371 ztmavená pro text na vápně (číslo 966799) */
  --pozn: #7A5C22;
  --chyba: #8C2A1E;
  --plocha-2: #F3ECE1;     /* oklch .946 .016 79: len a sláma za světla (fb-0257, sláma fb-0084); panel, pozadí rámu, sekce Termín */
  --plocha-3: #EAE0D1;     /* oklch .911 .023 78: obsazené dny, najetí na řádky a počitadla */
  --plocha-kulatina: #EEE3D2; /* oklch .920 .026 78: světlé dřevo kulatiny v interiéru (fb-0847, ech-06) zesvětlené; tón 68 četl do růžova, proto 78; plocha sekce Srub (třetí tón ploch, hodnocení 5.1), mulec 4,7 : 1 */
  --tma-2: color-mix(in srgb, var(--vapno) 7%, var(--tma));         /* panel a pozadí rámu na tmě */
  --cara: color-mix(in srgb, var(--inkoust) 30%, var(--vapno));
  --cara-tenka: color-mix(in srgb, var(--inkoust) 13%, var(--vapno));
  --cara-pole: color-mix(in srgb, var(--inkoust) 55%, var(--vapno));   /* rámeček pole formuláře: hranice pole ≥ 3 : 1 proti panelu i vnitřku (WCAG 1.4.11, final-4 P-06) */
  --na-tme: color-mix(in srgb, var(--vapno) 88%, var(--tma));
  --na-tme-2: color-mix(in srgb, var(--vapno) 72%, var(--tma));
  --cara-tma: color-mix(in srgb, var(--vapno) 16%, var(--tma));
  --pole: #FDFCFA;
  --fokus: var(--vino);
  /* role podle plochy (světlá / .tma): sekce, které umí obojí (Farma, Kolo), berou barvy jen odsud */
  --c-text: var(--inkoust);
  --c-text-1: var(--inkoust);
  --c-text-2: var(--mulec);
  --c-akcent: var(--vino);
  --c-cara: var(--cara-tenka);
  --c-panel: var(--plocha-2);
  --c-podklad: var(--vapno);

  /* ---------- zaoblení (2.1, ROZHODNUTI 3): rodina „měkký obdélník známky“, žádné pilulky ani kruhy */
  --r-1: 6px;                                              /* drobné prvky: vzorník, štítek, chyba v panelu, náhled */
  --r-2: 12px;                                             /* tlačítka, pole, počitadla, buňky kalendáře, šipky, čipy */
  --r-foto: clamp(12px, .6vw + 9.4px, 18px);               /* každý rám fotky včetně úvodu, mapy, lupa */
  --r-panel: clamp(18px, .6vw + 15.4px, 24px);             /* panely, souhrn, mapa Kola, menu */

  /* ---------- písma a typografická škála (2.4; H1 podle HERO.md, ROZHODNUTI 4) */
  --pismo-cislo: "Domine", "Domine zaloha", Georgia, serif;
  --pismo: "Noticia Text", "Noticia zaloha", Georgia, serif;
  --fs-h1: calc((4 * var(--sloupec) + 3 * var(--mezera-mrizky)) / 3.96);   /* úvod: tři řádky ve 4 sloupcích ≈ 106 px na 1440 */
  --fs-h2: clamp(36px, 2.2vw + 24px, 56px);                /* jediná velikost H2 */
  --fs-h3: clamp(21px, .3vw + 19.8px, 24px);
  --fs-lead: clamp(19px, .2vw + 18.2px, 21px);
  --fs-text: 18px;
  --fs-citace: clamp(19px, .3vw + 17.8px, 22px);
  --fs-ui: 16px;
  --fs-popis: clamp(14px, .1vw + 13.6px, 15px);
  --fs-displej: clamp(72px, 4.6vw + 54px, 120px);          /* číslo L, nejvýš jedno na sekci */
  --fs-cislo: clamp(32px, 1.15vw + 27.5px, 44px);          /* číslo M */
  --fs-odecet: clamp(20px, .4vw + 18.5px, 24px);           /* číslo S v řádcích */

  /* ---------- mřížka (2.3) */
  --ramec-max: 1312px;
  --okraj: max(clamp(16px, 4.45vw, 64px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));   /* výřez iPhonu na šířku (viewport-fit=cover, final-4 M07) */
  --ramec: min(var(--ramec-max), calc(100vw - 2 * var(--okraj)));
  --bok: max(var(--okraj), calc((100vw - var(--ramec-max)) / 2));
  --mezera-mrizky: 24px;
  --sloupec: calc((var(--ramec) - 11 * var(--mezera-mrizky)) / 12);

  /* ---------- mezery (2.2): škála 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 a sémantické tokeny */
  --mezera-sekce: clamp(72px, 5.5vw + 49px, 128px);
  --mezera-bloku: clamp(56px, 3.8vw + 41px, 96px);
  --mezera-hlavy: clamp(32px, 2.3vw + 23px, 56px);
  --mezera-h2-lead: clamp(16px, .75vw + 13px, 24px);
  --mezera-popisku: 12px;
  --mezera-sloupce: 32px;                                  /* mezi prvky textového sloupce (390: 24) */
  --panel-okraj: clamp(20px, 1.8vw + 13px, 40px);
  --hlavicka: 64px;
  --lista: 36px;
  --spodni-lista: 0px;

  /* ---------- poměry fotek (2.5): jen čtyři */
  --p-scena: 3 / 2;
  --p-detail: 4 / 3;
  --p-vyska: 100 / 135;
  --p-pas: 21 / 9;

  /* ---------- stín (2.6): jen známka 72 jako předmět a plovoucí vrstvy */
  --stin-predmet: 0 1px 0 rgba(41, 31, 25, .28), 0 14px 28px -10px rgba(24, 18, 14, .45);
  --stin-predmet-f: drop-shadow(0 1px 0 rgba(41, 31, 25, .32)) drop-shadow(0 10px 12px rgba(24, 18, 14, .34));
  --stin-predmet-f-zvednuty: drop-shadow(0 2px 0 rgba(41, 31, 25, .3)) drop-shadow(0 22px 22px rgba(24, 18, 14, .45));

  /* ---------- pohyb */
  --t-kratka: 180ms;
  --t-stredni: 400ms;
  --t-dlouha: 900ms;
  --ease-vystup: cubic-bezier(.2, .7, .2, 1);
  --ease-presun: cubic-bezier(.65, 0, .35, 1);

  color-scheme: light;
  scrollbar-color: color-mix(in srgb, var(--mulec) 70%, var(--vapno)) var(--vapno);
  accent-color: var(--vino);
}
@media (max-width: 899.98px) { :root { --fs-h1: calc(var(--ramec) / 10.2); } }           /* 834: H1 jedním řádkem přes rám */
@media (max-width: 767.98px) {
  :root { --hlavicka: 56px; --mezera-mrizky: 12px; --mezera-sloupce: 24px; --fs-h1: clamp(44px, 20vw - 26px, 52px); }
}
/* 320–339 px: H2 o 2 px menší (stále jedna velikost na šířku), aby se „pod Třemšínem 72“ s nezlomitelnými mezerami vešlo do 288 px */
@media (max-width: 339.98px) { :root { --fs-h2: 34px; } }
/* telefon na šířku (final-4 M06): nižší hlavička, aby z okna 375–430 px zbylo místo pro obsah */
@media (orientation: landscape) and (max-height: 500px) { :root { --hlavicka: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  background: var(--vapno);
}
/* odsazení cílů pod lepivou hlavičku a nad spodní lištu: scroll-margin cílů v obsahu a patičce, ne scroll-padding stránky
   (final-4 M01: s ním Chromium a WebKit při fokusu prvku v samotné lepivé hlavičce, třeba Menu nebo odkazu navigace, posunuly stránku) */
:where(main, .paticka) :where([id], a, button, input, textarea, select, summary, [tabindex]) {   /* nulová specificita: vlastní scroll-margin prvků (.pop, pole) vyhrává */
  scroll-margin-top: calc(var(--hlavicka) + 12px);
  scroll-margin-bottom: calc(var(--spodni-lista) + 12px);
}
@media (prefers-reduced-motion: no-preference) { html.je-pohyb { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--vapno);
  color: var(--inkoust);
  font-family: var(--pismo);
  font-size: var(--fs-text);
  line-height: 1.6;
  font-variant-numeric: lining-nums proportional-nums;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
::selection { background: var(--znamka); color: var(--inkoust); }
/* odkaz v textu: víno (5.7, ROZHODNUTI › 9); prvky, které jsou odkazem jen technicky (logo, navigace, rám fotky, tlačítko), mají vlastní barvu */
a { color: var(--vino); text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); text-underline-offset: .2em; }
.tma a { color: inherit; }
@media (hover: hover) { a:hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; } }
/* fokus kopíruje tvar prvku (outline sleduje border-radius), 3 px, odsazení 3 px */
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
/* textové odkazy mají fokus zaoblený jako malé prvky (SJEDNOCENI 2.1, final-4 V9) */
a:not(.tlacitko):not(.foto-odkaz):focus-visible { border-radius: var(--r-1); }
h1, h2, h3, h4 { margin: 0; font-weight: 700; text-wrap: balance; overflow-wrap: break-word; }   /* nezlomitelné „pod Třemšínem 72“ se zalomí jen při zvětšených rozestupech textu (final-4 P-08) */
/* nadpisy H1 a H2 nesou víno; H3 zůstává inkoustem (kontrast velikostí, ne barev) */
h1, h2 { color: var(--c-akcent); }
h1 { font-family: var(--pismo-cislo); font-size: var(--fs-h1); line-height: .98; letter-spacing: -.015em; }
h2 { font-family: var(--pismo); font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.012em; }
/* žádné Domine uvnitř H2 (zvýraznění slova jiným písmem je automatismus) */
h2 .cislo { font-family: inherit; font-size: inherit; letter-spacing: inherit; }
h3 { font-family: var(--pismo); font-size: var(--fs-h3); line-height: 1.25; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; }
button { font: inherit; color: inherit; }
input, textarea, select { font: inherit; font-size: 16px; }
figure, blockquote { margin: 0; }
[hidden] { display: none !important; }
.nezlom { white-space: nowrap; }   /* Wi-Fi a podobná slova s pomlčkou se nelámou */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.nezalomit { white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.preskocit { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--vapno); color: var(--inkoust); border-radius: var(--r-2); font-weight: 700; }
.preskocit:focus { top: 44px; }

/* ================================================================== sekce, plochy a konce sekcí (2.2, 2.7) */
.sekce { padding: var(--mezera-sekce) var(--bok) 0; }
/* .tma = neutrální tma z kulatiny (chroma ≤ 0,03), nikdy víno; přepíná role barev pro sekce, které umí obojí */
.tma {
  background: var(--tma); color: var(--vapno);
  --c-text: var(--vapno); --c-text-1: var(--na-tme); --c-text-2: var(--na-tme-2); --c-akcent: var(--vapno);
  --c-cara: var(--cara-tma); --c-panel: var(--tma-2); --c-podklad: var(--tma); --fokus: var(--znamka);
}
.sekce--plocha { background: var(--plocha-2); }
.sekce--plocha.sekce--kulatina { background: var(--plocha-kulatina); }
/* tmavé sekce a sekce před tmavou nebo před změnou plochy mají i spodní okraj; jinak dělí sekce jen horní okraj další */
.sekce.tma, .sekce:has(+ .tma), .sekce--plocha, .sekce:has(+ .sekce--plocha) { padding-bottom: var(--mezera-sekce); }
.mrizka { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mezera-mrizky); }
.ramec { max-width: var(--ramec-max); margin-inline: auto; }

/* ================================================================== 5.1 Hlava sekce: H2 + lead, bez nadpisku, čáry a známky */
.hlava > .lead, h2 + .lead { margin-top: var(--mezera-h2-lead); }
.hlava > .lead + * { margin-top: 24px; }
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 34em; }
.tma .lead { color: var(--na-tme); }
.text { max-width: 36em; }
.text + .text, .text p + p { margin-top: .8em; }
.cislo { font-family: var(--pismo-cislo); font-weight: 700; font-variant-numeric: lining-nums; letter-spacing: -.015em; }

/* ================================================================== vzory rozvržení sekce (SJEDNOCENI › 3), sdílené všemi sekcemi
   .vzor = rám 1312 s 12 sloupci. Hlava má jen dvě polohy: nahoře vlevo sl. 1–6 (V2, V3, V4) nebo nahoře v textovém sloupci V1.
   Zlomy jako úvod: ≥ 1200 plné, 900–1199 „1024“, 768–899 „834“, < 768 telefon. */
.vzor { max-width: var(--ramec-max); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mezera-mrizky); align-items: start; }
.vzor > .hlava { grid-column: 1 / 7; grid-row: 1; }
.vzor > * { min-width: 0; }

/* V1 „Fotka a sloupec“: fotka sl. 1–7 a sloupec 9–12 (nebo zrcadlově .v1--vpravo: sloupec 1–4, fotka 6–12), sloupec 8 (5) je vzduch.
   Hlava nahoře sloupce (horní hrana H2 opticky na horní hraně fotky), zbytek sloupce pod ní po 32 px; sloupec se zarovnává nahoru. */
.v1 { grid-template-rows: auto 1fr; }
.v1 > .v1__foto { grid-column: 1 / 8; grid-row: 1 / span 2; }
.v1 > .hlava { grid-column: 9 / -1; grid-row: 1; }
.v1 > .v1__zbytek { grid-column: 9 / -1; grid-row: 2; margin-top: var(--mezera-sloupce); }
.v1--vpravo > .v1__foto { grid-column: 6 / -1; }
.v1--vpravo > .hlava, .v1--vpravo > .v1__zbytek { grid-column: 1 / 5; }
.v1 > .hlava h2 { margin-top: -.1em; }
.v1__zbytek > * + * { margin-top: var(--mezera-sloupce); }
/* sekce B: když je textový sloupec delší než fotka (Pěšky, Kontakt), fotka zůstane v okně (lepí se), místo prázdné plochy pod ní */
@media (min-width: 900px) { .v1 > .v1__foto { position: sticky; top: calc(var(--hlavicka) + 24px); } }
/* displej L v úzkém textovém sloupci V1 nesmí přetéct (1200–1440: 4 sloupce 341–421 px) */
.v1__zbytek { container-type: inline-size; }
.v1__zbytek .displej { font-size: min(var(--fs-displej), 29cqi); overflow-wrap: break-word; }   /* číslo s jednotkou drží nbsp; zalomí se jen při zvětšených rozestupech (final-4 P-08) */

/* V2 „Hlava a řada“: nepovinný slot čísla sl. 9–12 na horní hraně H2; řada 1–3 fotek se společnou výškou (flex-grow = poměr),
   krajní hrany na sl. 1 a 12; tělo o --mezera-bloku níž (text 1–6 + citace 8–12, nebo detail 4 : 3 sl. 1–4 + text 6–11). */
.v2__cislo { grid-column: 9 / -1; grid-row: 1; }
.rada { grid-column: 1 / -1; display: flex; gap: var(--mezera-mrizky); align-items: flex-start; margin-top: var(--mezera-hlavy); }
.rada > figure { flex: var(--g, 1) 1 0; min-width: 0; }
.telo { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; margin-top: var(--mezera-bloku); }
.telo > * { min-width: 0; }
.telo__text { grid-column: 1 / 7; }
.telo__bok { grid-column: 8 / -1; }
.telo__detail { grid-column: 1 / 5; }
.telo__detail + .telo__text { grid-column: 6 / 12; }
.telo__text > * + * { margin-top: var(--mezera-sloupce); }

/* V4-malý (podblok): panel sl. 1–5 a fotka 3 : 2 sl. 7–12, zarovnané nahoru */
.v4m { margin-top: var(--mezera-bloku); }
.v4m > .panel { grid-column: 1 / 6; }
.v4m > .v4m__foto { grid-column: 7 / -1; }

/* dvojice H3 bloků pod podblokem (pravidla): sl. 1–5 a 7–11 */
.dvojice { margin-top: var(--mezera-bloku); }
.dvojice > :first-child { grid-column: 1 / 6; }
.dvojice > :nth-child(2) { grid-column: 7 / 12; }
.dvojice h3 + * { margin-top: 12px; }
.dvojice p + p { margin-top: .8em; }

@media (max-width: 1199.98px) {
  .v1 > .v1__foto { grid-column: 1 / 8; }
  .v1 > .hlava, .v1 > .v1__zbytek { grid-column: 8 / -1; }
  .v1--vpravo > .v1__foto { grid-column: 6 / -1; }
  .v1--vpravo > .hlava, .v1--vpravo > .v1__zbytek { grid-column: 1 / 6; }
  .v2__cislo { grid-column: 8 / -1; }
  .telo__detail { grid-column: 1 / 6; }
  .telo__detail + .telo__text { grid-column: 7 / -1; }
  .v4m > .panel { grid-column: 1 / 7; }
  .v4m > .v4m__foto { grid-column: 7 / -1; }
}
/* „834“: V1 = Hlava sl. 1–9, pod ní fotka přes šířku, zbytek pod ní; V4-malý pod sebou */
@media (max-width: 899.98px) {
  .vzor > .hlava { grid-column: 1 / 10; }
  /* číslo V2 pod hlavou jako na telefonu (final-4 TD-01: vedle hlavy sl. 1–9 jelo přes lead a H2) */
  .v2__cislo { grid-column: 1 / 10; grid-row: 2; margin-top: var(--mezera-sloupce); }
  .v1 { grid-template-rows: none; }
  .v1 > .hlava, .v1--vpravo > .hlava { grid-column: 1 / 10; grid-row: 1; }
  .v1 > .hlava h2 { margin-top: 0; }
  .v1 > .v1__foto, .v1--vpravo > .v1__foto { grid-column: 1 / -1; grid-row: 2; margin-top: var(--mezera-hlavy); }
  .v1 > .v1__zbytek, .v1--vpravo > .v1__zbytek { grid-column: 1 / 10; grid-row: 3; }
  .v4m > .panel, .v4m > .v4m__foto { grid-column: 1 / -1; }
  .v4m > .v4m__foto { margin-top: var(--mezera-sloupce); }
}
/* telefon: vše pod sebou; řada = první fotka 358 ve vlastním poměru, další po dvou 4 : 3 */
@media (max-width: 767.98px) {
  .vzor { display: block; }
  .v2__cislo { margin-top: var(--mezera-sloupce); }
  .rada { flex-wrap: wrap; row-gap: var(--mezera-sloupce); }
  .rada > figure:first-child { flex: 1 1 100%; }
  .rada > figure:not(:first-child) { flex: 1 1 0; }
  .rada > figure:not(:first-child) .ram { aspect-ratio: var(--p-detail); }
  .telo { display: block; }
  .telo > * + * { margin-top: var(--mezera-sloupce); }
  .v1 > .v1__zbytek { margin-top: 24px; }
  .dvojice > * + * { margin-top: var(--mezera-sloupce); }
}

/* ================================================================== 5.2 Rám fotky: zaoblení přes overflow, bez rámečku a stínu */
.ram { position: relative; overflow: hidden; border-radius: var(--r-foto); background: var(--plocha-2); }
.tma .ram { background: var(--tma-2); }
.ram--scena { aspect-ratio: var(--p-scena); }
.ram--detail { aspect-ratio: var(--p-detail); }
.ram--vyska { aspect-ratio: var(--p-vyska); }
.ram--pas { aspect-ratio: var(--p-pas); }
.ram img { width: 100%; height: 100%; object-fit: cover; }
.ram picture { height: 100%; }
/* rám jako odkaz do prohlížeče: hover jas, fokus kolem rámu se stejným zaoblením (odkaz uvnitř overflow by obrys ořízl) */
.foto-odkaz { display: block; position: relative; height: 100%; color: inherit; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.foto-odkaz img { transition: filter var(--t-kratka) var(--ease-vystup); }
@media (hover: hover) { .foto-odkaz:hover img { filter: brightness(1.04); } }
.foto-odkaz:focus-visible { outline: none; }
.ram:has(.foto-odkaz:focus-visible) { overflow: hidden; outline: 3px solid var(--fokus); outline-offset: 3px; }

/* ================================================================== 5.3 Popisek: jedna podoba (věta s faktem) */
.popisek { margin-top: var(--mezera-popisku); font-size: var(--fs-popis); line-height: 1.45; color: var(--mulec); text-align: start; max-width: 40em; }
.tma .popisek { color: var(--na-tme-2); }
.popisek .znamka--mala { display: none; }   /* malá známka u popisku je zrušená (5.9) */

/* ================================================================== 5.4 Citace hosta: visící uvozovka, nikdy na fotce */
.citace p { font-size: var(--fs-citace); line-height: 1.45; text-indent: -.42em; }
.citace footer { margin-top: 8px; font-size: var(--fs-popis); line-height: 1.45; color: var(--mulec); }
.tma .citace footer { color: var(--na-tme-2); }

/* ================================================================== 5.5 Displejové číslo s popisem: L / M / S */
.displej { color: var(--c-akcent); font-family: var(--pismo-cislo); font-weight: 700; font-size: var(--fs-displej); line-height: .92; letter-spacing: -.02em; font-variant-numeric: lining-nums; }
/* výsledek podtržený pruhem žluté známky (ROZHODNUTI › 9: žlutá jemně po celém webu, jen u výsledků) */
/* žlutá linka známky jen pod cenou (hodnocení 5.2: pod každým displejem působila jako automatismus): povolenka, účtenka, Celkem */
.displej--cena { text-decoration: underline; text-decoration-color: var(--znamka); text-decoration-thickness: .06em; text-underline-offset: .1em; text-decoration-skip-ink: none; }
.cislo-m { color: var(--c-akcent); font-family: var(--pismo-cislo); font-weight: 700; font-size: var(--fs-cislo); line-height: 1.05; letter-spacing: -.015em; }
.odecet { font-family: var(--pismo-cislo); font-weight: 700; font-size: var(--fs-odecet); line-height: 1.2; letter-spacing: -.01em; }
.cislo-popis { margin-top: 8px; font-size: var(--fs-popis); line-height: 1.45; color: var(--mulec); }
.tma .cislo-popis { color: var(--na-tme-2); }

/* ================================================================== poznámky návrhu: tichý okrový řádek kurzívou; výchozí stav skryté (lista.css) */
.pozn {
  display: inline;
  font-family: var(--pismo);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
  text-indent: 0;
  color: var(--pozn);
}
.pozn::before { content: "\2060"; }
.pozn:not(.pozn--blok) { margin-left: .35em; }
.tma .pozn { color: color-mix(in srgb, var(--znamka) 85%, var(--tma)); }
.pozn--blok { display: block; margin-top: 6px; }

/* ================================================================== 5.6 Tlačítka
   primární: plné víno (na tmavé --vapno); sekundární: obrys 1,5 px currentColor v inkoustu; výška 52 (malé 44), --r-2.
   Na tmavé je výchozí tlačítko primární (vápenné), obrysové jen s --obrys. */
.tlacitko {
  --_v: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: var(--_v); padding: 0 24px;
  /* obrys 1,5 px stínem dovnitř, ne rámečkem: Chromium rámečky zaokrouhluje na celé pixely zařízení (na DPR 1 by byl 1 px) */
  border: 0; box-shadow: inset 0 0 0 1.5px var(--_obrys, currentColor); border-radius: var(--r-2);
  background: transparent; color: var(--inkoust);
  font-family: var(--pismo); font-weight: 700; font-size: var(--fs-ui); line-height: 1.15;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-kratka) var(--ease-vystup), color var(--t-kratka) var(--ease-vystup), box-shadow var(--t-kratka) var(--ease-vystup), transform var(--t-kratka) var(--ease-vystup);
}
@media (hover: hover) { .tlacitko:hover { background: color-mix(in srgb, var(--inkoust) 8%, transparent); text-decoration: none; } }
.tlacitko:active { transform: scale(.97); }
/* tlačítka ve stísněných řadách (úvod, hlavička, spodní lišta) se při zvětšených rozestupech textu zalomí, místo aby přetekla okno (final-4 P-08) */
.uvod__akce .tlacitko, .lista-dole .tlacitko, .tlacitko--hlavicka { white-space: normal; text-align: center; }
.tlacitko--plne { --_obrys: transparent; background: var(--vino); color: var(--vapno); }
@media (hover: hover) { .tlacitko--plne:hover { background: var(--vino-2); } }
.tma .tlacitko, .tlacitko--svetle { --_obrys: transparent; background: var(--vapno); color: var(--tma); }
@media (hover: hover) { .tma .tlacitko:hover, .tlacitko--svetle:hover { background: #fff; color: var(--tma); } }
.tma .tlacitko--obrys, .tma .tlacitko.tlacitko--obrys { --_obrys: color-mix(in srgb, var(--vapno) 60%, transparent); background: transparent; color: var(--vapno); }
@media (hover: hover) { .tma .tlacitko--obrys:hover { --_obrys: var(--vapno); background: color-mix(in srgb, var(--vapno) 12%, transparent); color: var(--vapno); } }
.tlacitko--velke { --_v: 52px; }
.tlacitko--male { --_v: 44px; padding: 0 16px; font-size: 15px; }
.tlacitko[aria-disabled="true"], .tlacitko:disabled { opacity: .45; cursor: not-allowed; transform: none; }
@media (hover: hover) { .tlacitko[aria-disabled="true"]:hover, .tlacitko:disabled:hover { background: transparent; } .tlacitko--plne:disabled:hover { background: var(--vino); } }
/* textové tlačítko (odkaz s akcí): 16 / 700, podtržení 1 px, hover 2 px */
.odkaz { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-ui); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (hover: hover) { .odkaz:hover { text-decoration-thickness: 2px; } }
.ven { display: inline-block; width: .62em; height: .62em; margin-left: .22em; vertical-align: .02em; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ================================================================== 5.8 Panel: plná plocha, --r-panel, bez rámečku a stínu */
.panel { border-radius: var(--r-panel); background: var(--plocha-2); padding: var(--panel-okraj); }
.tma .panel { background: var(--tma-2); }
.sekce--plocha .panel { background: var(--vapno); }

/* ================================================================== 5.9 Štítek známky: malá známka + fakt o srubu */
.stitek { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-ui); line-height: 1.4; }
.stitek .znamka--mala { flex: none; vertical-align: 0; }

/* ================================================================== 5.10 Řádek seznamu */
.radek { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--cara-tenka); }
.radek:last-child { border-bottom: 0; }
.radek__nazev { font-weight: 700; font-size: var(--fs-text); line-height: 1.3; }
.radek__popis { grid-column: 1; margin-top: 4px; font-size: var(--fs-popis); line-height: 1.45; color: var(--mulec); }
.radek__cislo { font-family: var(--pismo-cislo); font-weight: 700; font-size: var(--fs-odecet); line-height: 1.2; text-align: right; font-variant-numeric: tabular-nums; }
.tma .radek { border-bottom-color: var(--cara-tma); }
.tma .radek__popis { color: var(--na-tme-2); }

/* ================================================================== 5.11 Pole formuláře, počitadlo, segmentový přepínač */
.pole { display: flex; flex-direction: column; gap: 8px; }
.pole label { font-weight: 700; font-size: var(--fs-ui); line-height: 1.3; }
.pole__nepov { font-weight: 400; color: var(--mulec); }
.pole input, .pole textarea, .pole select {
  min-height: 52px; padding: 12px 16px; color: var(--inkoust);
  border: 1.5px solid var(--cara-pole); border-radius: var(--r-2); background: var(--pole);
  transition: border-color var(--t-kratka) linear;
}
.sekce--plocha .pole :is(input, textarea, select) { background: var(--vapno); }
.pole textarea { resize: vertical; min-height: 104px; }
@media (hover: hover) { .pole :is(input, textarea, select):hover { border-color: var(--inkoust); } }   /* tmavší než --cara-pole */
.pole :is(input, textarea, select):focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-color: var(--inkoust); }
.pole :is(input, textarea)[aria-invalid="true"] { border-color: var(--chyba); }
.pole__chyba { display: flex; gap: 6px; align-items: baseline; font-size: var(--fs-popis); line-height: 1.4; color: var(--chyba); }
.pole__chyba:empty { display: none; }
.pole--zaskrt { flex-direction: row; align-items: center; gap: 12px; min-height: 44px; font-size: var(--fs-ui); font-weight: 400; cursor: pointer; }
.pole--zaskrt input { width: 24px; height: 24px; min-height: 0; margin: 0; padding: 0; border-radius: var(--r-1); }

/* počitadlo: vnější --r-2, vnitřní tlačítka 44 × 44 s rohem 8 px, − a + kreslené čarou, hodnota Domine 26 */
.krok { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--r-2); background: var(--plocha-2); }
.sekce--plocha .krok, .panel .krok { background: var(--vapno); }
.krok__btn { position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: calc(var(--r-2) - 4px); background: transparent; color: var(--inkoust); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--t-kratka) var(--ease-vystup), transform var(--t-kratka) var(--ease-vystup); }
.krok__btn::before, .krok__btn--plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: currentColor; border-radius: 1px; }
.krok__btn--plus::after { transform: rotate(90deg); }
@media (hover: hover) { .krok__btn:hover { background: var(--plocha-3); } }
.krok__btn:active { transform: scale(.94); }
.krok__btn:focus-visible { outline-offset: 0; }
.krok__btn[aria-disabled="true"], .krok__btn:disabled { opacity: .35; cursor: not-allowed; background: transparent; transform: none; }
.krok__hodnota { display: inline-block; min-width: 1.6em; text-align: center; font-family: var(--pismo-cislo); font-weight: 700; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
html.bez-js .krok__btn { display: none; }

/* segmentový přepínač (Kolo): skupina 44 px, --r-2 na krajích, vybrané plné */
.segment { display: inline-flex; flex-wrap: wrap; }
.segment > button { min-height: 44px; padding: 0 16px; margin-left: -1.5px; border: 0; box-shadow: inset 0 0 0 1.5px currentColor; border-radius: 0; background: transparent; color: inherit; font-size: 15px; cursor: pointer; }
.segment > button:first-child { margin-left: 0; border-radius: var(--r-2) 0 0 var(--r-2); }
.segment > button:last-child { border-radius: 0 var(--r-2) var(--r-2) 0; }
.segment > button { -webkit-tap-highlight-color: transparent; transition: background-color var(--t-kratka) var(--ease-vystup), color var(--t-kratka) var(--ease-vystup); }
/* fokus uvnitř tlačítka segmentu: obrys vně by přejel přes sousední tlačítko (final-4 TD-12); na vybraném v barvě textu */
.segment > button:focus-visible { position: relative; z-index: 1; outline-offset: -5px; }
.segment > button[aria-pressed="true"]:focus-visible { outline-color: currentColor; }
@media (hover: hover) { .segment > button:hover { background: color-mix(in srgb, currentColor 10%, transparent); } }
.segment > button[aria-pressed="true"] { background: var(--vino); box-shadow: inset 0 0 0 1.5px var(--vino); color: var(--vapno); font-weight: 700; }
.tma .segment > button { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--vapno) 55%, transparent); }
.tma .segment > button[aria-pressed="true"] { background: var(--vapno); box-shadow: none; color: var(--tma); }
@media (prefers-reduced-motion: reduce) { .segment > button { transition-duration: 0ms; } }

/* ================================================================== známka: předmět (tvar ze skutečné známky fb-0084, poměr 0,74, krk 0,33 × 0,25) */
.znamka { display: block; width: var(--zw, 98px); height: auto; aspect-ratio: 100 / 135; overflow: visible; flex: none; }
.znamka__plocha { fill: var(--znamka); }
.znamka__hrana { fill: none; stroke: var(--znamka-hrana); stroke-width: .9; vector-effect: non-scaling-stroke; }
.znamka__lesk { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.znamka__plast { mix-blend-mode: overlay; opacity: .7; }
.znamka__tisk { fill: var(--inkoust); fill-opacity: .92; font-family: var(--pismo-cislo); font-weight: 700; text-anchor: middle; }
.znamka--stin { filter: var(--stin-predmet-f); }
.znamka--prazdna .znamka__plocha { fill: transparent; }
/* malá stopa motivu (22 × 30) u faktu o srubu; jen číslo 72, bez stínu, nejvýš jedna na obrazovku */
.znamka--mala { --zw: 22px; display: inline-block; vertical-align: -.32em; filter: none; }
.znamka--mala .znamka__hrana { stroke-width: 1; }
.znamka--prazdna .znamka__hrana { stroke: currentColor; stroke-width: 1.5; }

@media (forced-colors: active) {
  /* vynucené barvy zahodí stín i pozadí: tlačítka dostanou skutečný rámeček, vybraná volba obrys zvýraznění (final-4 P-09) */
  .tlacitko, .segment > button { border: 1.5px solid ButtonText; }
  .segment > button[aria-pressed="true"], .okruh-k[aria-checked="true"] { outline: 2px solid Highlight; outline-offset: -4px; }
  .znamka__plocha { fill: Canvas; }
  .znamka__hrana { stroke: CanvasText; }
  .znamka__tisk { fill: CanvasText; }
}

/* lista/lista.css */
/* Lišta návrhu (fáze 3): tenký pruh nad hlavičkou v toku stránky, 36 px, dotykové plochy 44 px přes výšku řádku.
   Technika Chata Hutisko webla-bar, vzhled z tokenů webu (stín, vápno, žlutá známky jen u zapnutého spínače). */
.lista {
  --_bg: var(--tma-hluboka, #1D1612);
  --_fg: var(--vapno, #F8F6F2);
  --_akce: var(--znamka, #D6C379);
  --_tlum: color-mix(in srgb, var(--_fg) 70%, var(--_bg));
  --_cara: color-mix(in srgb, var(--_fg) 12%, var(--_bg));
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 36px;
  padding: 0 max(var(--okraj, 16px), calc((100vw - var(--ramec-max, 1312px)) / 2), env(safe-area-inset-right)) 0 max(var(--okraj, 16px), calc((100vw - var(--ramec-max, 1312px)) / 2), env(safe-area-inset-left));
  background: var(--_bg);
  color: var(--_fg);
  font: 400 13px/1 var(--pismo, "Noticia Text", Georgia, serif);
  letter-spacing: .005em;
}
.lista *, .lista *::before, .lista *::after { box-sizing: border-box; }
.lista button { color: inherit; font: inherit; letter-spacing: inherit; -webkit-tap-highlight-color: transparent; }
.lista :focus-visible { outline: 2px solid var(--_akce); outline-offset: 2px; border-radius: 2px; }
.lista__kdo { flex: 0 1 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--_tlum); white-space: nowrap; text-overflow: ellipsis; }
.lista__kdo b { color: var(--_fg); font-weight: 700; }
.lista__kdo-kratce { display: none; }
.lista__pozn {
  display: inline-flex; align-items: center; gap: .6rem;
  height: 44px; margin: -4px 0 -4px auto; padding: 0 0 0 .5rem;
  border: 0; background: none; color: var(--_tlum); cursor: pointer; white-space: nowrap;
}
@media (hover: hover) { .lista__pozn:hover { color: var(--_fg); } }
.lista__pozn[aria-pressed="true"] { color: var(--_fg); }
.lista__pocet { font-variant-numeric: tabular-nums lining-nums; }
.lista__spinac { position: relative; flex: none; width: 28px; height: 16px; border: 1px solid var(--_tlum); border-radius: 8px; transition: background-color var(--t-kratka, 180ms) ease, border-color var(--t-kratka, 180ms) ease; }
.lista__spinac::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--_tlum); transition: transform var(--t-kratka, 180ms) var(--ease-vystup, ease), background-color var(--t-kratka, 180ms) ease; }
.lista__pozn[aria-pressed="true"] .lista__spinac { background: var(--_akce); border-color: var(--_akce); }
.lista__pozn[aria-pressed="true"] .lista__spinac::after { transform: translateX(12px); background: var(--_bg); }
.lista__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* poznámky: výchozí stav vypnuté (i bez JS); zapnuté jen s třídou s-poznamkami */
html:not(.s-poznamkami) .pozn { display: none !important; }

@media (max-width: 47.99rem) {
  .lista { gap: .5rem; }
  .lista__kdo-plne { display: none; }
  .lista__kdo-kratce { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .lista *, .lista *::after { transition: none !important; } }
@media (forced-colors: active) { .lista__pozn[aria-pressed="true"] .lista__spinac { background: Highlight; } }
@media print { .lista { display: none; } }

/* css/hlavicka.css */
/* =================================================================== HLAVIČKA
   Lepivá a vždy vápenná (ROZHODNUTI-KOLO-5 › 9), i nad patičkou z neutrální tmy.
   Cena a akce přibudou vpravo až po odjetí výzvy úvodu (.hlavicka.je-uvod-akce; stavové třídy jsou na prvcích, ne na <html>, aby přepnutí nepřepočítalo styl celé stránky). */
.hlavicka {
  position: sticky; top: 0; z-index: 40;
  height: var(--hlavicka);
  padding: 0 var(--bok);
  /* plné vápno (hodnocení 5.1): přes průsvitnou hlavičku s rozostřením prosvítal stín známky 72 jako šedá skvrna */
  background: var(--vapno);
  color: var(--inkoust);
  border-bottom: 1px solid var(--cara-tenka);
}
.hlavicka__ramec { display: flex; align-items: center; gap: 20px; height: 100%; max-width: var(--ramec-max); margin: 0 auto; }
.logo, .nav a { color: inherit; }
.logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; flex: none; }
/* logo: malá žlutá známka i na vápně (žlutá jako jemný akcent, ROZHODNUTI › 9), hrana jako u předmětu */
.logo__znamka { width: 21px; height: 28px; overflow: visible; fill: var(--znamka); stroke: var(--znamka-hrana); stroke-width: 5; }
.logo__jmeno { font-family: var(--pismo-cislo); font-weight: 700; font-size: 20px; letter-spacing: -.01em; white-space: nowrap; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: var(--fs-ui); text-decoration: none; text-underline-offset: .35em; white-space: nowrap; }
@media (hover: hover) { .nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; } }
.nav a[aria-current="true"] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--vino); }
.hlavicka__hodnoceni { font-size: var(--fs-popis); white-space: nowrap; color: var(--mulec); }
.hlavicka__hodnoceni .cislo { font-size: 19px; margin-right: .2em; color: var(--vino); }
.tlacitko--hlavicka { --_v: 44px; padding: 0 16px; gap: .7em; font-size: 15px; min-width: 272px; }   /* stejná šířka před výběrem i po něm, menu neposkočí (final-4 V1) */
.tlacitko__cena { font-weight: 400; padding-left: .7em; border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
/* dokud je vidět cena a výzva úvodu, hlavička je neopakuje */
.hlavicka__hodnoceni, .tlacitko--hlavicka { transition: opacity var(--t-kratka) linear, visibility 0s; }
.hlavicka.je-uvod-akce .hlavicka__hodnoceni, .hlavicka.je-uvod-akce .tlacitko--hlavicka { opacity: 0; visibility: hidden; transition: opacity var(--t-kratka) linear, visibility 0s var(--t-kratka); }
.menu-tlacitko { display: none; }

/* menu (do 1099 px), kolo 5 (SJEDNOCENI 2.1, 2.6; paleta ROZHODNUTI › 9): plovoucí vápenný panel nad ztlumenou stránkou, ne celoobrazovková plocha.
   Telefon: list zdola s horními rohy --r-panel; 768–1099: panel pod hlavičkou vpravo se všemi rohy --r-panel. Stín předmětu
   (plovoucí vrstva), odkazy jako řádky seznamu (5.10) v H3, tlačítko a telefon z tokenů. */
.menu {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  max-height: calc(100dvh - var(--hlava-dole, 100px) - 16px);
  padding: 24px var(--okraj) calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 32px; overflow-y: auto; overscroll-behavior: contain;
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  box-shadow: 0 -1px 0 rgba(41, 31, 25, .16), 0 -14px 28px -10px rgba(24, 18, 14, .32);
  background: var(--vapno); color: var(--inkoust);
}
/* ztlumená stránka pod menu je skutečný prvek s posluchačem: iOS Safari pošle click jen „klikatelnému“ prvku (final-4 M03) */
.menu-zaclona { position: fixed; inset: 0; z-index: 55; background: color-mix(in srgb, var(--tma-hluboka) 48%, transparent); cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
html.je-menu .hlavicka { z-index: 70; background: var(--vapno); color: var(--inkoust); border-bottom-color: var(--cara-tenka); --fokus: var(--vino); }
.menu nav { display: flex; flex-direction: column; }
.menu nav a {
  display: flex; align-items: center; min-height: 52px; padding: 10px 0;
  font-family: var(--pismo); font-weight: 700; font-size: var(--fs-h3); line-height: 1.25;
  border-bottom: 1px solid var(--cara-tenka); text-decoration: none; color: var(--inkoust);
}
.menu nav a:last-child { border-bottom: 0; }
@media (hover: hover) { .menu nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } }
.menu__dole { display: flex; flex-direction: column; gap: 16px; }
.menu__termin { justify-content: space-between; width: 100%; }
.menu__kontakt { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-popis); color: var(--mulec); }
.menu__kontakt a { font-family: var(--pismo-cislo); font-weight: 700; font-size: var(--fs-odecet); text-decoration: none; color: var(--vino); min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 768px) {
  .menu { left: auto; right: var(--bok); bottom: auto; top: calc(var(--hlava-dole, 100px) + 12px); width: min(420px, calc(100vw - 2 * var(--okraj))); padding: 24px 32px 32px; border-radius: var(--r-panel); box-shadow: var(--stin-predmet); }
}

@media (max-width: 1279.98px) { .hlavicka__hodnoceni { display: none; } }
@media (max-width: 1099.98px) {
  .nav, .hlavicka__hodnoceni { display: none; }
  .tlacitko--hlavicka { margin-left: auto; }
  .menu-tlacitko {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 2px 0 12px; margin-right: -2px;
    border: 0; background: none; cursor: pointer; font-weight: 700; font-size: 16px; -webkit-tap-highlight-color: transparent;
  }
  .menu-tlacitko__cary { position: relative; width: 20px; height: 12px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
  html.je-menu .menu-tlacitko__cary { border-color: transparent; }
  html.je-menu .menu-tlacitko__cary::before, html.je-menu .menu-tlacitko__cary::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: currentColor; transform: rotate(45deg); }
  html.je-menu .menu-tlacitko__cary::after { transform: rotate(-45deg); }
}
@media (max-width: 767.98px) {
  .tlacitko--hlavicka { display: none; }
  .menu-tlacitko { margin-left: auto; }
  .logo__jmeno { font-size: 18px; }
}

/* spodní lišta: na telefonu cena, Vybrat termín, Zavolat (skrytá nad textem úvodu a při klávesnici);
   v sekci Termín (pod 1100 px, i na tabletu) cena s rozpisem a hlavní tlačítko kroku (termin.css, třída je-termin) */
.lista-dole { display: none; }
@media (max-width: 767.98px) { :root { --spodni-lista: 64px; } .lista-dole { display: flex; } }
@media (max-width: 1099.98px) {
  html.je-termin-lista { --spodni-lista: 72px; scroll-padding-bottom: calc(var(--spodni-lista) + 16px); }   /* fokus Tabem nezůstane pod lištou (final-4 P-12); jen dole, nahoře scroll-padding posouval stránku při fokusu v hlavičce (M01) */
  .lista-dole.je-termin { display: flex; }
  .lista-dole {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    align-items: center; gap: 8px; flex-wrap: wrap;   /* při zvětšených rozestupech textu se zalomí do dvou řad, nic nezajede pod tlačítka (final-4 P-08) */
    min-height: 64px; padding: 10px var(--okraj) calc(10px + env(safe-area-inset-bottom));
    /* kolo 5 (ROZHODNUTI 3, SJEDNOCENI 2.1 a 2.6): plovoucí vrstva = horní rohy --r-panel a stín předmětu obrácený nahoru */
    border-radius: var(--r-panel) var(--r-panel) 0 0;
    box-shadow: 0 -1px 0 rgba(41, 31, 25, .14), 0 -12px 24px -10px rgba(24, 18, 14, .28);
    background: var(--vapno); color: var(--inkoust);   /* plné vápno (final-4 M10: při 97 % prosvítal text sekce pod cenou) */
    transform: translateY(0);
  }
  html.je-pohyb .lista-dole { transition: transform var(--t-stredni) var(--ease-vystup), visibility 0s; }
  .lista-dole__cena { margin-right: auto; display: flex; text-decoration: none; flex-direction: column; gap: 2px; line-height: 1.15; font-size: var(--fs-popis); color: var(--mulec); min-width: 0; }
  .lista-dole__cena b { font-size: var(--fs-odecet); line-height: 1.1; color: var(--vino); white-space: nowrap; }
  .lista-dole .tlacitko { --_v: 44px; padding: 0 14px; }
  .lista-dole__ikona { display: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
  .lista-dole.je-uvod-text, .lista-dole.je-skryta, .lista-dole.je-formular, html.je-menu .lista-dole { transform: translateY(110%); visibility: hidden; }
  html.je-pohyb .lista-dole.je-uvod-text, html.je-pohyb .lista-dole.je-skryta { transition: transform var(--t-stredni) var(--ease-vystup), visibility 0s var(--t-stredni); }
}
/* 320–359 px (final-4 M02): cena, „Vybrat termín“ a „Zavolat“ se vedle sebe nevejdou; cena drží svou šířku, Zavolat je ikona 44 × 44
   (název odkazu zůstává „Zavolat“ ve skrytém textu) */
@media (max-width: 359.98px) {
  .lista-dole { gap: 6px; }
  .lista-dole__cena { flex: none; }
  .lista-dole .tlacitko { padding: 0 12px; }
  .lista-dole__tel { width: 44px; padding: 0 !important; }
  .lista-dole__ikona { display: block; }
  .lista-dole__tel-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* telefon na šířku (final-4 M06 a V11): nízká okna 360–430 px. Spodní lišta nižší; menu ve dvou sloupcích odkazů
   a výzva s telefonem vedle nich, aby se celé vešlo pod hlavičku bez useknutých řádků */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --spodni-lista: 56px; }
  html.je-termin-lista { --spodni-lista: 60px; }
  .lista-dole { min-height: 52px; padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  .menu { flex-direction: row; align-items: flex-start; gap: 32px; padding-top: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .menu nav { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 24px; align-content: start; }
  .menu nav a { min-height: 44px; padding: 6px 0; font-size: var(--fs-ui); }
  .menu nav a:nth-child(4) { border-bottom: 0; }
  .menu__dole { flex: 0 0 15rem; gap: 8px; }
  .menu__dole .tlacitko { --_v: 44px; }
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 768px) {
  .menu { width: min(760px, calc(100vw - 2 * var(--okraj))); top: calc(var(--hlava-dole, 84px) + 8px); padding: 20px 28px 24px; }
}

/* css/uvod.css */
/* =================================================================== 1 ÚVOD (kolo 5: HERO.md › 4, kompozice A „Rám a sloupec“; ROZHODNUTI-KOLO-5 1–4)
   ≥ 1200: srub fb-0554 v rámu přes sloupce 1–8 (866 × 660, --r-foto), text ve sloupcích 9–12. Horní hrana rámu = horní hrana
     verzálek H1, spodní hrana rámu = spodní hrana tlačítka (text sedí dolů přes margin-top: auto). Známka 72 (120 × 162)
     leží přes spodní hranu rámu 44 px od pravého rohu, na louce; je to odkaz do Farmy. Popisek pod rámem ve sloupcích 1–6.
   900–1199: stejná skladba, rám se roztáhne na výšku textového sloupce (cover 56 % 50 %), krátká věta.
   768–899: H1 jedním řádkem přes rám, pod ním rám přes šířku (výřez -t, 1,88), dva sloupce textu, známka 104.
   < 768: rám první (výřez -m, 4 : 3, těsně na srub), H1 „Na ryby / vedle farmy“, věta, 4,9, cena s tlačítkem; známka 58 vedle 1. řádku H1.
   Paleta (ROZHODNUTI-KOLO-5 › 9): úvod je na vápně, H1 a čísla vínem, text inkoustem, žlutou nese jen známka.
   Nic se při načtení nehýbe; známka reaguje na najetí, fokus a stisk (bez pohybu jen stínem). Žádný stín na rámu. */
.uvod {
  --zw: 136px;                                   /* šířka známky 72 (výška × 1,35); oprava 5.2: větší předmět (dřív 120) */
  padding: 28px var(--bok) var(--mezera-sekce);
}
.uvod__mrizka {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--mezera-mrizky);
  max-width: var(--ramec-max);
  margin: 0 auto;
}

/* ---------- rám srubu a známka */
.uvod__foto { grid-column: 1 / 9; grid-row: 1; position: relative; margin: 0; min-width: 0; }
.uvod__ram { aspect-ratio: 1732 / 1320; }      /* 866 × 660 */
.uvod__znamka {
  position: absolute; z-index: 2;
  right: 44px; bottom: calc(var(--zw) * -.675);
  display: block; width: var(--zw);
  color: inherit; text-decoration: none; border-radius: var(--r-1);
  -webkit-tap-highlight-color: transparent;
}
/* oprava 5.2: známka visí za dírku jako skutečný předmět; při najetí se zhoupne kolem dírky (pružně, 480 ms) a zvedne stín */
.uvod__znamka .znamka { --zw: 100%; width: 100%; transform-origin: 50% 9%; transition: transform 480ms cubic-bezier(.34, 1.4, .64, 1), filter var(--t-kratka) var(--ease-vystup); }
@media (hover: hover) { .uvod__znamka:hover .znamka { transform: rotate(-7deg); filter: var(--stin-predmet-f-zvednuty); } }
.uvod__znamka:focus-visible { outline: 3px solid var(--fokus); outline-offset: 4px; }
.uvod__znamka:focus-visible .znamka { filter: var(--stin-predmet-f-zvednuty); }   /* při fokusu bez natočení, roh by vyjel přes obrys (final-4 V10) */
.uvod__znamka:active .znamka { transform: scale(.97); transition-duration: 120ms; }
/* moment známky (hodnocení 5.1): při najetí nebo fokusu se známka zvedne a vedle ní vyjede věta, kam vede; bez pohybu jen prolnutím.
   Na dotyku věta není potřeba, ťuk vede rovnou do Farmy. */
.uvod__znamka-tip { position: absolute; right: calc(100% + 14px); top: 34%; padding: 9px 14px; border-radius: var(--r-2); background: var(--vapno); color: var(--inkoust); font-size: 15px; line-height: 1.3; white-space: nowrap; box-shadow: var(--stin-predmet); opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity var(--t-kratka) linear, transform var(--t-kratka) var(--ease-vystup); }
@media (hover: hover) { .uvod__znamka:hover .uvod__znamka-tip { opacity: 1; transform: none; } }
.uvod__znamka:focus-visible .uvod__znamka-tip { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .uvod__znamka-tip { transform: none; } }
@media (hover: none) { .uvod__znamka-tip { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .uvod__znamka:hover .znamka, .uvod__znamka:focus-visible .znamka, .uvod__znamka:active .znamka { transform: none; }
}

/* ---------- textový sloupec */
.uvod__text { grid-column: 9 / 13; grid-row: 1; display: flex; flex-direction: column; min-width: 0; }
.uvod__h1 { margin-top: -.06em; font-kerning: normal; }   /* barva z h1 (víno) */
.uvod__h1 > span { display: block; }
.uvod__spod { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 18px; }
.uvod__veta { font-size: var(--fs-text); line-height: 1.5; color: var(--inkoust); text-wrap: pretty; }
.uvod__veta--kratka { display: none; }
.uvod__veta .pozn { margin-left: .3em; }
.uvod__dukaz { font-size: var(--fs-ui); }
.uvod__dukaz a { display: inline-flex; align-items: baseline; min-height: 32px; color: var(--inkoust); text-decoration-color: var(--cara); }
.uvod__dukaz .cislo { margin-right: .4em; font-size: var(--fs-odecet); color: var(--vino); }   /* číslo S ze škály (24 / 20) */
.uvod__dukaz .ven { margin-left: .3em; }

.uvod__akce {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding-top: 14px;   /* bez čáry nad blokem (SJEDNOCENI › 9.11): od 4,9 ho dělí mezera 32 px */
}
.uvod__cena { display: flex; flex-direction: column; line-height: 1.2; }
.uvod__cena .cislo { font-size: var(--fs-cislo); line-height: 1.05; letter-spacing: -.015em; color: var(--vino); white-space: nowrap; }   /* číslo M ze škály (44 / 32) */
.uvod__cena-za, .uvod__2027 { font-size: var(--fs-popis); color: var(--mulec); }
.uvod__tecka { display: none; }

.uvod__popisek { grid-column: 1 / 7; grid-row: 2; max-width: 34em; }

/* 900–1199: rám na výšku textového sloupce, krátká věta */
@media (max-width: 1199.98px) {
  .uvod__foto { display: flex; flex-direction: column; }
  .uvod__ram { flex: 1; aspect-ratio: auto; min-height: 420px; }
  .uvod__ram :is(.foto-odkaz, picture) { position: absolute; inset: 0; }
  .uvod__ram img { object-position: 56% 50%; }
  .uvod__veta--plna { display: none; }
  .uvod__veta--kratka { display: block; }
  .uvod__spod { gap: 14px; }
  .uvod__akce .tlacitko { padding: 0 20px; }
  /* popisek pod rámem končí před známkou (final-4 TD-07: na 900–1120 px běžel pod ni) */
  .uvod__popisek { grid-column: 1 / 9; max-width: none; padding-right: calc(var(--zw) + 44px + 16px); }
}

/* 768–899: H1 jedním řádkem přes rám, rám přes šířku, pod ním dva sloupce (cena pod známkou odsazená) */
@media (max-width: 899.98px) {
  .uvod { --zw: 104px; }
  .uvod__text { display: contents; }
  .uvod__h1 { grid-column: 1 / -1; grid-row: 1; margin: 0 0 20px; white-space: nowrap; }
  .uvod__h1 > span { display: inline; }
  .uvod__foto { grid-column: 1 / -1; grid-row: 2; display: block; }
  .uvod__ram { aspect-ratio: 2048 / 1089; min-height: 0; }
  .uvod__ram :is(.foto-odkaz, picture) { position: static; }
  .uvod__ram img { object-position: 50% 50%; }
  .uvod__znamka { right: 40px; }
  /* oprava 5.1: popisek patří k fotce (12 px pod rámem, vlevo od známky), pod ním dva sloupce textu ve velikosti leadu */
  .uvod__spod { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--mezera-mrizky); align-content: start; padding-top: 36px; gap: 16px var(--mezera-mrizky); }
  .uvod__veta { font-size: var(--fs-lead); }
  .uvod__veta, .uvod__dukaz { grid-column: 1; }
  .uvod__veta--plna { display: block; }
  .uvod__veta--kratka { display: none; }
  .uvod__akce { grid-column: 2; grid-row: 1 / span 3; align-self: start; flex-direction: column; align-items: flex-start; margin-top: 4px; padding-top: 0; border-top: 0; gap: 20px; }
  .uvod__popisek { grid-column: 1 / -1; grid-row: 3; margin-top: var(--mezera-popisku, 12px); padding-right: 0; max-width: min(34em, calc(100% - var(--zw) - 72px)); }
}

/* nízká okna notebooků (final-4 TD-04; 1280 × 689, 1536 × 730, 1440 × 789): rám i text úvodu se vejdou do první obrazovky
   i s tlačítkem „Vybrat termín“. Rám je nejvýš okno bez lišty návrhu, hlavičky a okrajů (výřez cover na střed srubu),
   H1 se zmenší podle výšky okna a na plné šířce stojí krátká věta jako na 900–1199. */
@media (min-width: 900px) and (max-height: 860px) {
  .uvod__ram { max-height: calc(100svh - var(--lista) - var(--hlavicka) - 28px - 20px); }
  .uvod__h1 { font-size: min(var(--fs-h1), calc((100svh - var(--lista) - var(--hlavicka)) * .13)); }
  .uvod__spod { gap: 14px; }
}
@media (min-width: 1200px) and (max-height: 860px) {
  .uvod__veta--plna { display: none; }
  .uvod__veta--kratka { display: block; }
}

/* telefon (< 768): rám první, H1 „Na ryby“ / „vedle farmy“, známka přes spodní hranu rámu vedle prvního řádku H1 */
@media (max-width: 767.98px) {
  .uvod { --zw: 58px; padding: 12px var(--bok) var(--mezera-sekce); }
  .uvod__mrizka { grid-template-columns: minmax(0, 1fr); }
  .uvod__foto { grid-row: 1; }
  .uvod__ram { aspect-ratio: var(--p-detail); }   /* 4 : 3, 358 × 268 na 390 */
  .uvod__znamka { right: 16px; }
  .uvod__h1 { grid-row: 2; margin: 12px 0 0; line-height: 1.02; letter-spacing: -.02em; white-space: normal; }
  .uvod__h1-a { display: block !important; }
  .uvod__spod { grid-row: 3; display: flex; padding-top: 10px; gap: 6px; }
  .uvod__veta { font-size: 17px; line-height: 1.45; }
  .uvod__veta--plna { display: none; }
  .uvod__veta--kratka { display: block; }
  .uvod__dukaz a { min-height: 44px; align-items: center; }
  /* cena se zužuje (flex-basis 0, nejméně na své nejdelší slovo), tlačítko drží šířku; když se oba nevejdou ani tak
     (zvětšené rozestupy textu, WCAG 1.4.12), tlačítko spadne pod cenu, místo aby přeteklo okno (final-4 P-08) */
  .uvod__akce { align-self: stretch; flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 2px; padding-top: 0; border-top: 0; }
  .uvod__cena { display: block; white-space: nowrap; flex: 1 1 0; }
  .uvod__cena .cislo { display: block; }
  .uvod__cena-za, .uvod__2027 { font-size: 14px; }
  .uvod__cena-dlouhe { display: none; }
  .uvod__tecka { display: inline; }
  .uvod__akce .tlacitko { flex: none; padding: 0 18px; }
  .uvod__popisek { display: none; }
}
@media (max-width: 374.98px) {
  .uvod__ram { aspect-ratio: var(--p-scena); }
  .uvod__cena { white-space: normal; }
  .uvod__cena .cislo { font-size: 26px; }
  .uvod__tecka { display: none; }
  .uvod__2027 { display: block; }
  .uvod__akce .tlacitko { padding: 0 14px; font-size: 15px; }
}

/* telefon na šířku (final-4 M06): okno 360–430 px vysoké. Skladba jako na počítači: srub v rámu vlevo na výšku okna,
   vpravo H1, krátká věta, 4,9, cena a tlačítko; vše na první obrazovce. Popisek fotky je až v prohlížeči. */
@media (orientation: landscape) and (max-height: 500px) {
  .uvod { --zw: 52px; padding-top: 12px; }
  .uvod__mrizka { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .uvod__foto { grid-column: 1 / 7; grid-row: 1; display: block; }
  .uvod__ram { flex: none; aspect-ratio: auto; min-height: 0; max-height: none; height: calc(100svh - var(--lista) - var(--hlavicka) - 24px); }
  .uvod__ram :is(.foto-odkaz, picture) { position: absolute; inset: 0; }
  .uvod__ram img { object-position: 50% 50%; }
  .uvod__znamka { right: 16px; }
  .uvod__text { display: flex; flex-direction: column; grid-column: 7 / 13; grid-row: 1; }
  .uvod__h1 { margin: 0; white-space: normal; font-size: clamp(30px, 10svh, 42px); line-height: 1; letter-spacing: -.015em; }
  .uvod__h1 > span { display: inline; }
  .uvod__h1-a { display: block !important; }
  .uvod__spod { display: flex; flex-direction: column; grid-column: auto; grid-row: auto; margin-top: auto; padding-top: 10px; gap: 4px; }
  .uvod__veta { font-size: 15px; line-height: 1.4; }
  .uvod__veta--plna { display: none; }
  .uvod__veta--kratka { display: block; }
  .uvod__dukaz a { min-height: 44px; align-items: center; }
  .uvod__dukaz .cislo { font-size: 20px; }
  .uvod__akce { grid-column: auto; grid-row: auto; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; align-self: stretch; gap: 8px 16px; margin-top: 0; padding-top: 0; }
  .uvod__cena { display: block; white-space: nowrap; }
  .uvod__cena .cislo { display: block; font-size: 26px; }
  .uvod__cena-za, .uvod__2027 { font-size: 13px; }
  .uvod__cena-dlouhe, .uvod__tecka { display: none; }
  .uvod__2027 { display: block; }
  .uvod__akce .tlacitko { --_v: 44px; padding: 0 16px; }
  .uvod__popisek { display: none; }
}

/* css/srub.css */
/* =================================================================== 2 SRUB
   Kolo 5: vzor V2 (zaklad.css › vzory) beze zbytku; sekce nemá vlastní velikosti, rohy ani mezery. */

/* css/rybareni.css */
/* =================================================================== 3 RYBAŘENÍ
   Kolo 5: V1 s fotkou vpravo + podblok V4-malý + dvojice H3 (zaklad.css › vzory). Tady jen vnitřek panelu povolenky:
   displej L „500 Kč“ na levé hraně panelu, pod ním tři řádky rovnice se znaky na jedné svislici (× × =, kreslené čarou)
   a počitadly ze základu; výsledek je číslo M. Mezery ze škály (8 · 12 · 16 · 24 · 32). */
.povolenka > h3 + .povolenka__cena { margin-top: 24px; }
.povolenka__cena .displej { overflow-wrap: break-word; }   /* „500 Kč“ drží nbsp; zalomí se jen při zvětšených rozestupech (final-4 P-08) */
.povolenka__radek { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.povolenka__cena + .povolenka__radek { margin-top: 24px; }
.povolenka__znak { flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: var(--mulec); }
.povolenka__znak svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.povolenka__slovo { font-size: var(--fs-text); }
.povolenka__clen--vysledek { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--cara-tenka); border-radius: 0; }
.povolenka__vysledek { display: inline-block; font-variant-numeric: tabular-nums; }
.povolenka__kauce { max-width: 32em; margin-top: 16px; }
.povolenka__konec { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.povolenka__pridano { font-size: var(--fs-ui); font-weight: 700; }
.povolenka__pridano:empty { display: none; }

/* výsledek po změně krátce zežloutne (krytí podkladu, i v omezeném pohybu); čísla se převalí ze směru změny */
.povolenka__clen--vysledek.je-svit { animation: vysledek-svit 700ms var(--ease-vystup); }
@keyframes vysledek-svit { from { background-color: color-mix(in srgb, var(--znamka) 34%, transparent); } }
.je-zmena { animation: cislo-zmena 180ms var(--ease-vystup); }
.je-zmena.je-dolu { animation-name: cislo-zmena-dolu; }
@keyframes cislo-zmena { from { opacity: 0; transform: translateY(.45em); } }
@keyframes cislo-zmena-dolu { from { opacity: 0; transform: translateY(-.45em); } }
@media (prefers-reduced-motion: reduce) { .je-zmena, .je-zmena.je-dolu { animation: cislo-kryti 160ms linear; } }
@keyframes cislo-kryti { from { opacity: .3; } }

@media (max-width: 767.98px) {
  .povolenka__konec .tlacitko { width: 100%; }
}

/* css/rybnik.css */
/* =================================================================== 4 RYBNÍK „Rybník bez jména“
   Kolo 5: V2 s pásem (zaklad.css › vzory). Tady jen cesta vody: H3, pod ním tenká čára --mulec, první zastávka je skutečný
   obrys rybníka (ZABAGED) se slovy „bez jména“, pak šest jmen toků (text 18 / 700 jako název řádku). Bez pohybu.
   Na telefonu je ohniště pod pásem jako výřez 4 : 3 (-m) přes šířku; od 768 px řada jako na počítači. */
.voda { grid-column: 1 / -1; margin-top: var(--mezera-bloku); }
.voda__cesta {
  --cara-y: 46px;
  position: relative;
  display: grid; grid-template-columns: 136px repeat(6, minmax(0, 1fr));
  margin: 24px 0 0; padding: 0; list-style: none;
}
/* čára po proudu: od obrysu rybníka až za Labe, konec otevřený (moře) */
.voda__cesta::before { content: ""; position: absolute; left: 62px; right: 0; top: var(--cara-y); height: 1.5px; background: var(--mulec); }
.voda__zastavka { position: relative; padding: calc(var(--cara-y) + 16px) 12px 0 0; font-weight: 700; font-size: var(--fs-text); line-height: 1.3; }
.voda__zastavka:not(.voda__zastavka--rybnik)::before { content: ""; position: absolute; left: 0; top: calc(var(--cara-y) - 8px); width: 1.5px; height: 16px; background: var(--mulec); }
.voda__zastavka .pozn { display: block; margin: 4px 0 0; font-weight: 400; }
.voda__zastavka--rybnik { padding: 0; }
.voda__rybnik-jmeno { display: block; margin-top: -4px; white-space: nowrap; }   /* účaří stejně jako jména toků (obrys končí 20 px pod čárou) */
.voda__obrys { position: relative; z-index: 1; display: block; width: 66px; height: 70px; margin-top: calc(var(--cara-y) - 50px); fill: color-mix(in srgb, var(--mulec) 16%, var(--vapno)); stroke: var(--inkoust); stroke-linejoin: round; }  /* obrys ZABAGED zjednodušený a vyhlazený (oprava 5.1), hladina tónem mulce */
.voda__obrys path { vector-effect: non-scaling-stroke; stroke-width: 1.8; }

@media (max-width: 767.98px) {
  .rybnik .rada > figure:not(:first-child) { flex: 1 1 100%; }
}
/* svislá cesta vody pod 900 px (na 834 by se „Bezděkovský potok“ nevešel do sloupce) */
@media (max-width: 899.98px) {
  .voda__cesta { display: block; margin-top: 16px; }
  .voda__cesta::before { left: 33px; right: auto; top: 60px; bottom: 22px; width: 1.5px; height: auto; }
  .voda__zastavka { padding: 0 0 0 72px; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
  .voda__zastavka:not(.voda__zastavka--rybnik)::before { left: 33px; top: 50%; width: 16px; height: 1.5px; }
  .voda__zastavka--rybnik { padding: 0 0 8px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
  .voda__rybnik-jmeno { margin: 0; }
  .voda__obrys { margin: 0; }
}

/* css/farma.css */
/* =================================================================== 5 FARMA „Sousedé mají čísla“ (signature B)
   Paleta (ROZHODNUTI-KOLO-5 › 9): barvy jen z rolí --c-* (zaklad.css), takže sekce funguje na vápně i v .tma (neutrální tma z kulatiny).
   Varianta A (světlá Farma, NOTES › Kolo 5 – paleta): tah vínový s vápenným lemem, čísla vínem, známky na fotkách zůstávají skutečně žluté. Volná mřížka různých velikostí, žádné připnutí, žádné dorovnávání fotek.
   Linka (SVG cesta 3 px --znamka) je jeden plynulý tah přes skutečné polohy známek; počítá ji build (tools/farma-linka.mjs)
   z src/data/farma.json a src/data/znamky.json, JS ji jen kreslí posunem. */
/* kolo 5: vzor V3 (zaklad.css › vzory): Hlava sl. 1–6 nahoře vlevo jako ve V2, pod ní pole signature přes 12 sloupců.
   Okraje sekce z pravidla konců sekcí. Fotky stojí na sloupcových liniích (x po 111,33, y po 48, src/data/farma.json). */
.farma__scena { grid-column: 1 / -1; }

.farma__scena {
  /* počítač (od 900 px): volné rozložení v souřadnicích rámu 1312 (škáluje se přes cqw); polohy prvků jsou v src/data/farma.json
     a build je vepíše do style (--x, --y, --w; telefon --mx, --my, --mw), stejná data počítají statickou čáru */
  container-type: inline-size;
  position: relative;
  aspect-ratio: 1312 / var(--hd);   /* výška z vlastní šířky (cqw by se tu vztahovalo k oknu) */
  margin-top: var(--mezera-hlavy);
}
.farma__pole { display: contents; }
.farma__linka { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.farma__linka--m { display: none; }
/* tah 3 px vínem; pod ním vápenný lem, aby byl tah čitelný i tam, kde zajede do fotky ke známce */
/* oprava 5.2: jedna změna tónu uprostřed dlouhého vápenného pásu Rybaření až Hosté: Farma na světlé kulatině (C 0,026, jako Srub),
   ne tmavá plocha (ROZHODNUTI › 9, varianta A zůstává); lem tahu v barvě plochy */
.farma { --f-cara: var(--vino); --f-lem: color-mix(in srgb, var(--plocha-kulatina) 85%, transparent); }
.farma__cesta, .farma__lem { fill: none; stroke-linecap: round; stroke-linejoin: round; }  /* bez non-scaling-stroke: ten by přepočítal čárkování na px a na tabletu by čára nedojela */
.farma__cesta { stroke: var(--f-cara); stroke-width: 3; }
.farma__lem { stroke: var(--f-lem); stroke-width: 7; }
/* oprava 4: úsek od známky ke známce se dokreslí přechodem (plný pohyb); s omezeným pohybem naskočí celý */
html.je-pohyb .farma__cesta, html.je-pohyb .farma__lem { transition: stroke-dashoffset 760ms var(--ease-presun); }
@media (prefers-reduced-motion: reduce) { html.je-pohyb .farma__cesta, html.je-pohyb .farma__lem { transition: none; } }
.farma__foto, .farma__z72, .farma__telata, .farma__srub-text { position: absolute; left: calc(var(--x) * 100cqw / 1312); top: calc(var(--y) * 100cqw / 1312); width: calc(var(--w) * 100cqw / 1312); z-index: 1; }
.farma__popis { display: flex; flex-direction: column; gap: 4px; margin-top: var(--mezera-popisku); }
.farma__cislo { font-size: var(--fs-cislo); line-height: 1.05; color: var(--c-akcent); align-self: flex-start;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: .08em; text-underline-offset: .14em; text-decoration-skip-ink: none; }
/* oprava 5.2: bod čáry žlutou známky: když tah dojede ke známce na fotce, číslo pod ní se podtrhne (bez JS a bez pohybu hned) */
.farma__foto.je-dosazeno .farma__cislo, html.bez-js .farma__cislo { text-decoration-color: var(--znamka); }
html.je-pohyb .farma__cislo { transition: text-decoration-color 420ms var(--ease-vystup); }
@media (prefers-reduced-motion: reduce) { html.je-pohyb .farma__cislo { transition: none; } }
.farma__datum { font-size: var(--fs-popis); color: var(--c-text-2); }
.farma__foto--dvur .farma__popis { display: block; }
html.bez-cisel [data-cislo] { display: none; }

/* konec linky jako událost: známka srubu je vidět celá i předtím (hodnocení 5.1: vybledlá četla jako „nedostupná“);
   když k ní čára dojede, zvedne se a dosedne se stínem. Věta vedle má velikost H2 (horní hrana na horní hraně známky). */
.farma__z72 { z-index: 3; }
.farma__znamka { --zw: 100%; width: 100%; transform-origin: 50% 100%; }
/* když linka dojede, známka se zvedne a dosedne (jako položená na stůl); zpět bez animace. V omezeném pohybu jen krytí, skokem. */
@keyframes farma-dosedni {
  0% { transform: scale(.94); }
  45% { transform: translateY(-6px) rotate(-2deg); filter: var(--stin-predmet-f-zvednuty); }
  100% { transform: none; filter: var(--stin-predmet-f); }
}
html.je-pohyb .farma__z72.je-rozsvicena .farma__znamka { animation: farma-dosedni 560ms var(--ease-vystup) both; }
@media (prefers-reduced-motion: reduce) { .farma__znamka { transition: none !important; animation: none !important; } }
/* oprava 5.2: věta u známky srubu je odpověď, ne druhý nadpis sekce: velikost H3 (24 / 21), ne H2 */
.farma__srub-veta { font-family: var(--pismo); font-weight: 700; font-size: var(--fs-h3); line-height: 1.25; color: var(--c-akcent); text-wrap: balance; max-width: 18em; }
.farma__srub-veta { margin-top: .9em; }
.farma__srub-dodatek { margin-top: 6px; font-size: var(--fs-text); color: var(--c-text-2); }
/* telata: jedna věta o minulosti (data ve větě, ne sloupec čísel), vedle telete 589003 */
.farma__telata { color: var(--c-text-1); font-size: var(--fs-lead); line-height: 1.55; text-wrap: pretty; }
.farma__telata .pozn { display: block; margin: 10px 0 0; font-size: var(--fs-popis); }
.farma__popis .pozn { margin-left: 0; }

/* tablet a telefon (do 899 px): dvůr a věta o telatech nahoře v toku, pod nimi pole linky ve vlastních souřadnicích 358
   (fotky střídavě vpravo a vlevo v různých šířkách, čára přechází mezerami přes celou plochu), text srubu pod polem */
@media (max-width: 899.98px) {
  .farma__scena { container-type: normal; aspect-ratio: auto; display: flex; flex-direction: column; }
  .farma__foto--dvur, .farma__telata, .farma__srub-text { position: relative; left: auto; top: auto; width: auto; }
  .farma__telata { margin-top: var(--mezera-sloupce); max-width: 34em; }
  .farma__pole { display: block; position: relative; container-type: inline-size; width: 100%; max-width: 420px; align-self: center; aspect-ratio: 358 / var(--hm); margin-top: 48px; }
  .farma__linka--d { display: none; }
  .farma__linka--m { display: block; }
  .farma__pole .farma__foto, .farma__z72 { left: calc(var(--mx) * 100cqw / 358); top: calc(var(--my) * 100cqw / 358); width: calc(var(--mw) * 100cqw / 358); }
  /* konec Farmy na telefonu vlevo jako všechny hlavy webu (hodnocení 5.1); známka 72 stojí vlevo nad větou */
  .farma__srub-text { margin-top: 16px; width: 100%; max-width: 420px; align-self: center; text-align: left; }
  .farma__srub-veta { margin-top: 0; }
}
@media (max-width: 767.98px) {
  .farma__srub-dodatek { margin-top: 8px; }
}
/* 320–359 px se zapnutými poznámkami (final-4 M08): poznámka pod 589002 je dvouřádková a sahala by na známku srubu pod sebou;
   odsadí se vpravo od známky (šířka známky 84 jednotek pole + 12 px), takže se nepřekrývají */
@media (max-width: 359.98px) {
  html.s-poznamkami .farma__pole [data-p="589002"] .pozn { padding-left: calc(84 * 100cqw / 358 + 12px - var(--mx) * 100cqw / 358); }
}
/* rozsvícená známka 72 má stín předmětu i bez pohybu (omezený pohyb, bez JS) */
.farma__z72.je-rozsvicena .farma__znamka, html.bez-js .farma__znamka { filter: var(--stin-predmet-f); }
/* telefon: úsek ke známce dojede rychleji (520 ms), konec čáry visí v mezeře co nejkratší dobu */
@media (max-width: 899.98px) { html.je-pohyb .farma__cesta, html.je-pohyb .farma__lem { transition-duration: 520ms; } }
@media (prefers-reduced-motion: reduce) { html.je-pohyb .farma__cesta, html.je-pohyb .farma__lem { transition: none; } }

/* css/pesky.css */
/* =================================================================== 6 PĚŠKY „Na Třemšín po modré“
   Kolo 5 (SJEDNOCENI › 4 ř. 6): V1 s fotkou vlevo (vzor ze zaklad.css), displej L 10,1 km v textovém sloupci, „Nahoře je /
   není“ jako dva krátké seznamy. Podblok „detail a seznam“: lom 0,74 sl. 1–3 a tři trasy sl. 5–12 jako řádky seznamu (5.10)
   v tabulce (srovnání délky, převýšení a času), štítek „od dveří“ jednou nad nimi, citace infocentra pod nimi. */
.pesky__cesta p + p { margin-top: .8em; }
.pesky__cesta p + p { font-size: var(--fs-popis); line-height: 1.45; color: var(--mulec); }

/* dva krátké seznamy: H3, řádky s 1px čarou */
.nahore__h { font-size: var(--fs-h3); }
.nahore__h + .nahore__seznam { margin-top: 8px; }
.nahore__seznam + .nahore__h { margin-top: var(--mezera-sloupce); }
.nahore__seznam { padding: 0; list-style: none; font-size: var(--fs-text); line-height: 1.45; }
.nahore__seznam li { padding: 10px 0; border-bottom: 1px solid var(--cara-tenka); }
.nahore__seznam li:last-child { border-bottom: 0; padding-bottom: 0; }
.nahore__seznam:last-child li { color: var(--mulec); }

/* podblok: lom sl. 1–3, trasy sl. 5–12 */
.pesky__dalsi { margin-top: var(--mezera-bloku); }
.pesky__dalsi { grid-template-rows: auto 1fr; }
.pesky__lom { grid-column: 1 / 4; grid-row: 1 / span 2; }
.trasy__hlava { grid-column: 5 / -1; grid-row: 1; }
.trasy { grid-column: 5 / -1; grid-row: 2; }
.trasy__stitek { margin-top: 12px; }
.trasy__cas { margin-top: 16px; max-width: 40em; }
.trasy__tab { width: 100%; margin-top: var(--mezera-sloupce); border-collapse: collapse; }
.trasy__tab thead th { padding: 0 0 10px 24px; border-bottom: 1px solid var(--cara-tenka); font-size: var(--fs-popis); font-weight: 400; line-height: 1.45; color: var(--mulec); text-align: right; vertical-align: bottom; }
.trasy__tab thead th:first-child { padding-left: 0; text-align: left; }
.trasy__tab tbody th, .trasy__tab td { padding: 20px 0 20px 24px; border-bottom: 1px solid var(--cara-tenka); text-align: right; vertical-align: baseline; font-weight: 400; }
.trasy__tab tbody th { padding-left: 0; text-align: left; }
.trasy__tab tbody tr:last-child > * { border-bottom: 0; }
.trasy__tab .radek__nazev, .trasy__tab .radek__popis { display: block; }
.trasy__tab .radek__popis { max-width: 32em; }
.trasy__c { white-space: nowrap; font-size: var(--fs-text); font-variant-numeric: tabular-nums; }
.trasy__citace { margin-top: var(--mezera-sloupce); max-width: 30em; }

@media (max-width: 1199.98px) {
  .pesky__lom { grid-column: 1 / 5; }
  .trasy, .trasy__hlava { grid-column: 6 / -1; }
}
/* 768–899 (final-4 TD-05): lom vlevo vedle hlavy tras, tabulka pod nimi přes celou šířku (vedle lomu měla 398 px na 4 sloupce) */
@media (min-width: 768px) and (max-width: 899.98px) {
  .pesky__dalsi { grid-template-rows: auto auto; }
  .pesky__lom { grid-column: 1 / 5; grid-row: 1; }
  .trasy__hlava { grid-column: 6 / -1; grid-row: 1; }
  .trasy { grid-column: 1 / -1; grid-row: 2; margin-top: var(--mezera-sloupce); }
}
@media (max-width: 899.98px) {
  .nahore { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--mezera-mrizky); grid-auto-flow: column; grid-template-rows: auto auto; }
  .nahore__seznam + .nahore__h { margin-top: 0; }
}
/* telefon: lom 358 (výřez 4 : 3) nad trasami; řádek trasy = název a popis přes šířku, pod nimi tři hodnoty s popisky */
@media (max-width: 767.98px) {
  .nahore { display: block; }
  .nahore__seznam + .nahore__h { margin-top: var(--mezera-sloupce); }
  .pesky__lom { margin-top: var(--mezera-hlavy); }
  .pesky__lom .ram { aspect-ratio: var(--p-detail); }
  .trasy { margin-top: var(--mezera-sloupce); }
  .trasy__tab, .trasy__tab tbody, .trasy__tab tr { display: block; }
  .trasy__tab thead { display: none; }
  .trasy__tab tbody tr { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--cara-tenka); }
  .trasy__tab tbody tr:first-child { border-top: 1px solid var(--cara-tenka); }
  .trasy__tab tbody tr:last-child { border-bottom: 0; }
  .trasy__tab tbody th, .trasy__tab td { display: block; padding: 0; border: 0; text-align: left; }
  .trasy__tab tbody th { grid-column: 1 / -1; margin-bottom: 12px; }
  /* sloupce hodnot lícují napříč řádky (final-4 V3): řádky sdílejí mřížku těla tabulky */
  @supports (grid-template-columns: subgrid) {
    .trasy__tab tbody { display: grid; grid-template-columns: max-content max-content 1fr; column-gap: 24px; }
    .trasy__tab tbody tr { grid-column: 1 / -1; grid-template-columns: subgrid; }
  }
  .trasy__tab td.trasy__c::before { content: attr(data-l); display: block; margin-bottom: 2px; font-size: var(--fs-popis); color: var(--mulec); }
}

/* css/kolo.css */
/* =================================================================== 7 KOLO „Tři okruhy od dveří“
   Pás (kolo 5: světlý, ROZHODNUTI › 9). Mapa 7 sloupců vlevo (připnutá), vpravo nadpis, „Jaké máte kolo?“ a výběr okruhu. Mapa otevírá sekci
   (sousední Pěšky otvírají nadpisem). Okruhy: nevybrané tlumené, vybraný žlutý (--znamka nese jen předmět a vybraný
   okruh), start u srubu malá známka 22 × 30, lupa s rybníkem nahoře vpravo. Měřítko jen uvnitř mapy. */
/* kolo 5 (SJEDNOCENI › 3 V3, 4 ř. 7): Hlava sl. 1–6 nahoře vlevo (vzor ze zaklad.css), pod ní mapa jako panel sl. 1–7 lepivá,
   výběr sl. 9–12 na stejné horní hraně. Okraje sekce z pravidla konců sekcí.
   Paleta (ROZHODNUTI-KOLO-5 › 9): barvy jen z rolí --c-* (zaklad.css); na vápně mapa jako světlý panel --plocha-2,
   vybraný okruh vínem, start žlutou známkou (varianta A, NOTES › Kolo 5 – paleta). */
.kolo { --k-vybrany: var(--vino); --k-lupa: var(--vapno); --k-voda: color-mix(in srgb, var(--mulec) 22%, var(--vapno)); --k-stitek: color-mix(in srgb, var(--plocha-2) 88%, transparent); }
.mapa-kola { grid-column: 1 / 8; grid-row: 2; margin-top: var(--mezera-hlavy); position: sticky; top: calc(var(--hlavicka) + 24px); }
.kolo__vyber { grid-column: 9 / -1; grid-row: 2; margin-top: var(--mezera-hlavy); }

/* ---------- mapa */
.mapa-kola__plocha {
  position: relative; width: min(100%, calc((100svh - var(--hlavicka) - 120px) * 11500 / 12500)); margin-left: 0;
  container-type: inline-size;
  background: var(--c-panel);
  border-radius: var(--r-panel);
  overflow: hidden;
}
.mapa-kola__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mapa-kola__okruh {
  fill: none; stroke: var(--c-text-2); stroke-opacity: .5; stroke-width: 2; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round;
  transition: stroke-opacity var(--t-kratka) var(--ease-vystup), stroke var(--t-kratka) var(--ease-vystup);
}
.mapa-kola__okruh.je-sedi { stroke: var(--c-text); stroke-opacity: .7; }
.mapa-kola__okruh.je-vybrany { stroke: var(--k-vybrany); stroke-opacity: 1; stroke-width: 3; }
.mapa-kola__okruh.je-mimo { stroke-opacity: .14; }

.mapa-kola__misto {
  position: absolute; margin: 0; transform: translate(-50%, -50%);
  font-size: 14px; line-height: 1.2; color: var(--c-text-1); white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 6px var(--c-panel), 0 0 2px var(--c-panel);
}
.mapa-kola__misto--bod { transform: translate(10px, -50%); }
.mapa-kola__misto--bod::before { content: ""; position: absolute; left: -12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--c-text-1); }
.mapa-kola__misto--vlevo { transform: translate(calc(-100% + 6px), -150%); }
.mapa-kola__misto--bod-vlevo { transform: translate(calc(-100% - 10px), -50%); }
.mapa-kola__misto--bod-vlevo::after { content: ""; position: absolute; right: -12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--c-text-1); }
.mapa-kola__misto--padrt { transform: translate(0, -50%); }

.mapa-kola__start { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; pointer-events: none; }
.mapa-kola__znamka { width: 22px; height: 30px; fill: var(--znamka); stroke: var(--znamka-hrana); stroke-width: 2; }
.mapa-kola__start-popis { position: absolute; left: 30px; font-size: 14px; font-weight: 700; color: var(--c-text); text-shadow: 0 0 6px var(--c-panel); }

.mapa-kola__meritko { position: absolute; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-2); }
.mapa-kola__km { display: block; height: 7px; border: 1.5px solid var(--c-text-2); border-top: 0; }
.mapa-kola__sever { display: inline-flex; align-items: center; margin-right: 10px; font-weight: 700; color: var(--c-text-1); }
.mapa-kola__sever svg { width: 8px; height: 10px; margin-right: 4px; fill: currentColor; vertical-align: 0; }

/* lupa: srub a rybník ve vlastním měřítku (100 m) */
.lupa { position: absolute; top: 12px; right: 12px; width: 30cqw; aspect-ratio: 1; border: 1px solid var(--c-cara); border-radius: var(--r-foto); background: var(--k-lupa); }
.lupa__svg { display: block; width: 100%; height: 100%; }
.lupa__rybnik { fill: var(--k-voda); stroke: var(--c-text-2); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.lupa__cesta { fill: none; stroke: var(--c-text-2); stroke-width: 1.5; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.lupa__srub { fill: var(--znamka); stroke: var(--znamka-hrana); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.lupa__100 { stroke: var(--c-text-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lupa__popis { position: absolute; font-size: 12px; line-height: 1.2; color: var(--c-text-1); }
.lupa__popis--rybnik { left: 52%; top: 66%; max-width: 46%; }
.lupa__popis--srub { left: 34%; top: 37%; font-weight: 700; color: var(--c-text); }
.lupa__popis--100 { left: 3%; top: 87%; color: var(--c-text-2); }
.mapa-kola__k-lupe { position: absolute; width: 1px; top: calc(12px + 30cqw); height: calc(var(--srub-top) - 12px - 30cqw - 20px); background: var(--c-cara); }

.mapa-kola__popisek { max-width: 46em; }

/* ---------- výběr: segmentový přepínač (5.11) a okruhy jako řádky seznamu (5.10) s číslem M vpravo */
.kolo__otazka { font-weight: 700; font-size: var(--fs-ui); line-height: 1.3; }
.kolo__volby { margin-top: 12px; }
/* pod 1000 px segment přes šířku sloupce v jedné řadě, text se zalomí uvnitř tlačítka (final-4 TD-09: Elektrokolo padalo na druhý řádek) */
@media (max-width: 999.98px) {
  .kolo__volby { display: flex; flex-wrap: nowrap; width: 100%; }
  .kolo__volby > button { flex: 1 1 auto; padding: 4px 10px; line-height: 1.2; white-space: normal; }
}
.kolo__vysvetleni { min-height: 0; margin-top: 12px; font-size: var(--fs-popis); line-height: 1.45; color: var(--c-text-1); max-width: 32em; }
.kolo__vysvetleni:empty { margin-top: 0; }

.okruhy { margin-top: var(--mezera-sloupce); border-bottom: 1px solid var(--c-cara); }
.okruh-k {
  display: block; width: 100%; padding: 20px 0; border: 0; border-top: 1px solid var(--c-cara);
  background: none; color: var(--c-text-1); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: opacity var(--t-kratka) var(--ease-vystup), color var(--t-kratka) var(--ease-vystup);
}
.okruh-k:focus-visible { outline-offset: 4px; border-radius: var(--r-1); }
.okruh-k__hlava { display: flex; align-items: baseline; gap: 14px; }
.okruh-k__cara { flex: none; width: 28px; height: 3px; background: color-mix(in srgb, var(--c-text) 30%, transparent); transform: translateY(-6px); transition: background-color var(--t-kratka) var(--ease-vystup); }
.okruh-k__nazev { flex: 1; font-weight: 700; font-size: var(--fs-text); line-height: 1.3; }
.okruh-k__km { flex: none; font-size: var(--fs-cislo); line-height: 1; color: var(--c-akcent); }
.okruh-k__vic { display: block; padding-left: 42px; }
.okruh-k__veta { display: block; margin-top: 8px; font-weight: 400; font-size: var(--fs-popis); line-height: 1.45; }
.okruh-k__omez { display: block; font-weight: 400; margin-top: 4px; font-size: var(--fs-popis); line-height: 1.45; color: var(--c-text-2); }
@media (hover: hover) { .okruh-k:hover .okruh-k__nazev { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } }
.okruh-k[aria-checked="true"] { color: var(--c-text); }
.okruh-k[aria-checked="true"] .okruh-k__cara { background: var(--k-vybrany); height: 4px; }
.okruh-k.je-sedi .okruh-k__cara { background: var(--c-text); }
.okruh-k[aria-checked="true"].je-sedi .okruh-k__cara { background: var(--k-vybrany); }
/* nehodící se okruh ustoupí barvou, ne průhledností (final-4 P-05: při opacity .45 měl text 1,9–2,6 : 1); mulec drží AA */
.okruh-k.je-mimo, .okruh-k.je-mimo .okruh-k__km, .okruh-k.je-mimo .okruh-k__omez { color: var(--c-text-2); }
.okruh-k.je-mimo .okruh-k__cara { background: color-mix(in srgb, var(--c-text) 15%, transparent); }
.kolo__pozn { margin-top: 16px; max-width: 34em; }

@media (max-width: 1199.98px) {
  .mapa-kola { grid-column: 1 / 8; }
  .kolo__vyber { grid-column: 8 / -1; }
}
/* 900–1099: užší mapa, Třemšín vlevo od bodu na dva řádky jako na telefonu (final-4 TD-02: vyjížděl přes levou hranu panelu) */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .mapa-kola__misto--bod-vlevo { white-space: normal; width: 4.4em; text-align: right; line-height: 1.15; }
}
@media (max-width: 899.98px) {
  .mapa-kola { grid-column: 1 / -1; grid-row: 2; position: static; }
  .mapa-kola__plocha { width: 100%; }
  .kolo__vyber { grid-column: 1 / 10; grid-row: 3; margin-top: var(--mezera-bloku); }
}
@media (max-width: 767.98px) {
  .mapa-kola { margin-top: 24px; }
  .mapa-kola__misto, .mapa-kola__start-popis { font-size: 13px; }
  /* lupa na telefonu jako vložený pravý horní roh mapy (tam okruhy nevedou), vodítko k ní se nekreslí */
  .lupa { width: 35cqw; top: 8px; right: 8px; }
  .mapa-kola__k-lupe { display: none; }
  .mapa-kola__misto--padrt { transform: translate(6px, -50%); }
  .kolo__volby { display: flex; width: 100%; }
  .kolo__volby > button { flex: 1 1 auto; padding: 0 10px; }
  /* oprava 4: popisky lupy uvnitř rámu (rybník nad obrysem vlevo, 100 m nad čarou měřítka) */
  .lupa { width: 40cqw; }
  .lupa__popis { font-size: 11px; }
  .lupa__popis--rybnik { left: 47%; top: 64%; max-width: 51%; }
  .lupa__popis--100 { top: 78%; }
  /* štítky míst s podkladem, aby je trasa nepřeškrtla */
  .mapa-kola__misto { padding: 1px 5px; border-radius: var(--r-1); background: var(--k-stitek); text-shadow: none; }
  /* oprava 4: volba kola nad mapou, výsledek (změna mapy a věta) je hned pod tlačítky; seznam okruhů pod mapou */
  .kolo__ramec { display: flex; flex-direction: column; }
  .kolo__vyber { display: contents; }
  .kolo__ramec { align-items: stretch; }
  .kolo__ramec > .hlava { order: 1; }
  .kolo__kolo { order: 2; margin-top: var(--mezera-hlavy); }
  .mapa-kola { order: 3; }
  .okruhy { order: 4; margin-top: 24px; }
  .kolo__pozn { order: 5; }
  .kolo__vysvetleni:empty { display: none; }
  /* Třemšín: popisek vlevo od bodu na dva řádky, mimo trasu okruhu */
  .mapa-kola__misto--bod-vlevo { white-space: normal; width: 4.4em; text-align: right; line-height: 1.15; }
  .mapa-kola__meritko { right: 10px; bottom: 8px; font-size: 12px; }
  .okruh-k { padding: 16px 0; min-height: 56px; }
  .okruh-k:not([aria-checked="true"]) .okruh-k__vic { display: none; }
  html.bez-js .okruh-k .okruh-k__vic { display: block; }
  .okruh-k__vic { padding-left: 0; }
}

/* 320–359 px (final-4 M11): Třemšín menším písmem blíž bodu, „srub“ pod známkou (vpravo od ní ho ořízla hrana panelu) */
@media (max-width: 359.98px) {
  .mapa-kola__misto--bod-vlevo { font-size: 12px; width: 4.2em; transform: translate(calc(-100% - 8px), -50%); }
  .mapa-kola__misto--bod-vlevo::after { right: -10px; }
  .mapa-kola__start-popis { left: 6px; top: calc(100% + 1px); }
}
@media (prefers-reduced-motion: reduce) {
  .mapa-kola__okruh, .okruh-k { transition-duration: 0ms; }
}

/* css/hoste.css */
/* =================================================================== 8 HOSTÉ
   Kolo 5 (SJEDNOCENI › 4 ř. 8): V2 ze zaklad.css. Slot čísla sl. 9–12 (displej L 4,9, odečet S 5,0), řada mlha 3 : 2
   a výhled z verandy 4 : 3 na společné výšce (1440: 682 / 606 × 455), citace pod fotkou místo popisku (5.4c). */
.hoste__druhe { margin-top: 24px; }
.hoste__citace { margin-top: var(--mezera-popisku); max-width: 26em; }
.hoste__odkazy { display: flex; flex-wrap: wrap; gap: 0 24px; }
.hoste__odkazy .odkaz { min-height: 44px; }

/* telefon: druhá fotka řady přes šířku (jen dvě fotky), citace pod každou */
@media (max-width: 767.98px) {
  .hoste .rada > figure:not(:first-child) { flex-basis: 100%; }
}

/* css/termin.css */
/* =================================================================== 9 TERMÍN A CENA (kolo 5: REZERVACE.md, ROZHODNUTI-KOLO-5 › 6 a 9, SJEDNOCENI › 2, 5)
   V4 na --plocha-2 (len): hlava H2 7 sl. + ceník 5 sl.; deska = formulář, panel kroku 8 sl. a lepivá účtenka 4 sl. (od 1100 px), oba --vapno
   přímo na ploše sekce (nikdy panel v panelu). Pod 1100 px panel přes šířku, rozpis ve spodním listu, hlavní tlačítko ve spodní liště.
   Zaoblení: buňky, tlačítka, čipy, šipky a pole --r-2; chyba v panelu a vzorníky --r-1; panely --r-panel; fotka --r-foto. Žádné pilulky.
   Barvy: víno jen jako akcent (krajní dny výběru, vybraný čip, primární tlačítko, částka); pás pobytu žlutou známky ztlumenou do vápna;
   obsazenost jako souvislý pás --plocha-3 se šrafou (td::after, ne čtverce po dnech); den střídání hostů = půlka pásu (svisle). */
.termin__ramec { max-width: var(--ramec-max); margin: 0 auto; }
html:not(.js) .jen-js { display: none !important; }
html.js .jen-bezjs { display: none !important; }

/* ---------- hlava: H2 + lead sl. 1–7, ceník jako argument sl. 8–12 */
.termin__hlava { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mezera-mrizky); align-items: start; }
.termin__nadpis { grid-column: 1 / 8; }
.cenik { grid-column: 8 / -1; }
.cenik__radky { list-style: none; padding: 0; border-top: 1px solid var(--cara-tenka); }
.cenik .radek { padding: 14px 0; }
.cenik .radek:last-child { border-bottom: 1px solid var(--cara-tenka); }
.cenik .radek__cislo { color: var(--vino); }
.radek__cislo--text { font-family: var(--pismo); font-size: var(--fs-ui); color: var(--inkoust) !important; }
.cenik__overime { margin-top: 12px; font-size: var(--fs-popis); color: var(--mulec); }

/* ---------- deska */
.deska { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mezera-mrizky); align-items: start; margin-top: var(--mezera-hlavy); }
.pop { grid-column: 1 / 9; min-width: 0; scroll-margin-top: calc(var(--hlavicka) + 24px);  /* 24 px pod hlavičkou */ border-radius: var(--r-panel); background: var(--vapno); padding: var(--panel-okraj); }
.ucet { grid-column: 9 / -1; position: sticky; top: calc(var(--hlavicka) + 20px); min-width: 0; border-radius: var(--r-panel); background: var(--vapno); overflow: hidden; container-type: inline-size;
  display: flex; flex-direction: column; max-height: calc(100vh - var(--hlavicka) - 40px); }
/* hlavní tlačítko kroku je vždy vidět: delší rozpis (poznámky, volby) se posouvá uvnitř účtenky */
.ucet__obsah { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* delší rozpis: poslední řádek nad tlačítkem se rozplyne, nikdy nekončí useknutý v půli (ucet.js přepíná je-preteka / je-konec) */
.ucet__obsah.je-preteka:not(.je-konec) { -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), transparent); mask-image: linear-gradient(#000 calc(100% - 56px), transparent); }
.ucet__akce { flex: none; }
.poptavka__past { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- hlava panelu: Zpět, název kroku, ukazatel postupu */
.pop__hlava { margin-bottom: 28px; }
.pop__stav { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-bottom: 10px; }
.pop__stav { display: none; }
.pop__nazev, .pop__pocet { display: none; }
/* final-4 TD-11: tabletové pravidlo stojí až za výchozím skrytím, jinak by „krok N ze 4“ na 768–1099 px chybělo */
@media (max-width: 1099.98px) { .pop__stav { display: flex; } .pop__pocet { display: block; margin-left: auto; font-size: 16px; color: var(--inkoust); white-space: nowrap; } }
.pop__zpet { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: -4px; padding: 0 8px 0 4px; border: 0; border-radius: var(--r-2); background: none; color: var(--inkoust); font-weight: 700; font-size: var(--fs-ui); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: pointer; }
.pop__zpet svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .pop__zpet:hover { text-decoration-thickness: 2px; } }
.postup { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.postup button { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; min-height: 44px; padding: 0 0 4px; border: 0; border-radius: var(--r-2); background: none; color: var(--mulec); font-size: 15px; line-height: 1.3; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* oprava 5.2: čára kroku se při postupu plynule naplní zleva (400 ms); v omezeném pohybu skokem */
.postup__cara { display: block; height: 4px; border-radius: 0; background: linear-gradient(var(--vino), var(--vino)) no-repeat 0 0 / 0% 100%; background-color: var(--cara-tenka); transition: background-size var(--t-stredni) var(--ease-vystup), background-color var(--t-kratka) linear; }
.postup__c { font-family: var(--pismo-cislo); font-weight: 700; margin-right: .25em; }
.postup .je-hotovo .postup__cara, .postup [aria-current="step"] .postup__cara { background-size: 100% 100%; }
.postup .je-hotovo { color: var(--inkoust); }
.postup [aria-current="step"] { color: var(--inkoust); font-weight: 700; }
.postup [aria-disabled="true"] { cursor: not-allowed; }
@media (hover: hover) { .postup button:not([aria-disabled="true"]):not([aria-current]):hover .postup__nazev { text-decoration: underline; text-underline-offset: .2em; } .postup button:not([aria-disabled="true"]):not([aria-current]):hover .postup__cara { background-color: color-mix(in srgb, var(--vino) 55%, var(--cara-tenka)); } }
.pop__obnova { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: -12px 0 24px; padding: 12px 16px; border-radius: var(--r-1); background: color-mix(in srgb, var(--znamka) 22%, var(--vapno)); font-size: var(--fs-ui); line-height: 1.4; }

/* ---------- kroky */
.krok-p__h { scroll-margin-top: calc(var(--hlavicka) + 24px); }
.krok-p__h:focus { outline: none; }
/* nadpis kroku dostává fokus jen programově (tabindex="-1", není v pořadí Tab): bez rámečku, čtečka ho ohlásí */
.krok-p__h:focus-visible { outline: none; }
.krok-p__c { font-family: var(--pismo-cislo); color: var(--vino); }
html.js .krok-p:not(.je-aktivni) { display: none; }
html:not(.js) .krok-p + .krok-p { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--cara-tenka); }
html:not(.js) .krok-p.hotovo { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.je-pohyb:not(.je-firefox) .krok-p.je-prichod { animation: krok-prichod var(--t-kratka) var(--ease-vystup) both; }
  html.je-pohyb:not(.je-firefox) .krok-p.je-prichod.je-zpet { animation-name: krok-prichod-zpet; }
}
@keyframes krok-prichod { from { opacity: 0; transform: translateX(12px); } }
@keyframes krok-prichod-zpet { from { opacity: 0; transform: translateX(-12px); } }

/* ---------- kalendář */
.kal { margin-top: 12px; }
.kal__radek { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.kal__zprava { font-weight: 700; font-size: 19px; line-height: 1.35; color: var(--inkoust); }
.kal__zrusit { --_v: 40px; flex: none; }
.kal__pravidla { font-size: var(--fs-popis); line-height: 1.45; color: var(--mulec); max-width: 44em; }
.volby { margin-top: 20px; }
.volby__h { font-size: var(--fs-popis); font-weight: 700; color: var(--inkoust); }
.volby__rada { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }   /* final-4 TD-10: na 1100–1219 vedle účtenky by třetí čip vyjel pod ni */
.cip { display: inline-flex; align-items: baseline; gap: .45em; min-height: 44px; padding: 10px 14px; border: 1.5px solid var(--cara); border-radius: var(--r-2); background: var(--vapno); color: var(--inkoust); font-size: 15px; line-height: 1.2; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--t-kratka) var(--ease-vystup), border-color var(--t-kratka) var(--ease-vystup), color var(--t-kratka) var(--ease-vystup), transform var(--t-kratka) var(--ease-vystup); }
.cip b { font-weight: 700; }
@media (hover: hover) { .cip:hover { border-color: var(--inkoust); background: color-mix(in srgb, var(--inkoust) 5%, var(--vapno)); } }
.cip:active { transform: scale(.97); }
.cip[aria-pressed="true"] { background: var(--vino); border-color: var(--vino); color: var(--vapno); }

.kal__ovladani { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-top: 24px; margin-bottom: -48px; pointer-events: none; }
.kal__ovladani > * { pointer-events: auto; }
.kal__nazev-box { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.kal__sipka { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1.5px solid var(--cara); border-radius: var(--r-2); background: var(--vapno); color: var(--inkoust); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kal__sipka svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .kal__sipka:not([aria-disabled="true"]):hover { border-color: var(--inkoust); } }
/* ztlumí se ikona a rámeček, ne celé tlačítko: obrys fokusu zůstane plný (final-4 P-10) */
.kal__sipka[aria-disabled="true"] { color: color-mix(in srgb, var(--inkoust) 32%, var(--vapno)); border-color: color-mix(in srgb, var(--cara) 45%, var(--vapno)); cursor: not-allowed; }
.kal__mrizky { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; border-radius: var(--r-2); transition: box-shadow 400ms var(--ease-vystup); }
/* „Pokračovat“ bez termínu: mřížka se krátce orámuje žlutou známky, zpráva nad ní řekne proč */
.kal__mrizky.je-upozorneni { box-shadow: 0 0 0 8px color-mix(in srgb, var(--znamka) 38%, transparent); }
.mesic__hlava { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 2px 10px; min-height: 48px; padding: 12px 52px 0; text-align: center; }
.mesic__nazev { font-weight: 700; font-size: 19px; line-height: 1.25; }
.mesic__pozn { font-size: 14px; line-height: 1.25; color: var(--mulec); }
.mesic table { width: 100%; margin-top: 8px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.mesic th { padding: 0 0 6px; font-size: 13px; font-weight: 400; color: var(--mulec); }
.mesic td { position: relative; padding: 2px 1px; text-align: center; }
/* pás pobytu: souvislý přes buňky řádku, zaoblený na začátku a konci řádku; z krajních dnů vychází od jejich poloviny */
.mesic td.je-pas::before, .mesic td.je-nahled::before { content: ""; position: absolute; inset: 2px 0; background: color-mix(in srgb, var(--znamka) 44%, var(--vapno)); }
.mesic td.je-nahled::before { background: color-mix(in srgb, var(--znamka) 34%, var(--vapno)); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--znamka-hrana) 70%, transparent); }
.mesic td.pas-od::before { left: 50%; }
.mesic td.pas-do::before { right: 50%; }
.mesic td.pas-l::before { border-top-left-radius: var(--r-2); border-bottom-left-radius: var(--r-2); left: 1px; }
.mesic td.pas-r::before { border-top-right-radius: var(--r-2); border-bottom-right-radius: var(--r-2); right: 1px; }
.mesic td.pas-od.pas-l::before { left: 50%; }
.mesic td.pas-do.pas-r::before { right: 50%; }
.mesic td.je-obs::after { content: ""; position: absolute; inset: 2px 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--mulec) 18%, transparent) 6px 7px), var(--plocha-3); }
.mesic td.obs-od::after { left: 50%; border-top-left-radius: var(--r-2); border-bottom-left-radius: var(--r-2); }
.mesic td.obs-do::after { right: 50%; border-top-right-radius: var(--r-2); border-bottom-right-radius: var(--r-2); }
.mesic td.obs-l:not(.obs-od)::after { left: 1px; border-top-left-radius: var(--r-2); border-bottom-left-radius: var(--r-2); }
.mesic td.obs-r:not(.obs-do)::after { right: 1px; border-top-right-radius: var(--r-2); border-bottom-right-radius: var(--r-2); }
.den {
  position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 44px; padding: 0;
  border: 0; border-radius: var(--r-2); background: transparent; cursor: pointer;
  font-family: var(--pismo); font-size: 16px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--inkoust);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.den span { position: relative; }
@media (hover: hover) { .den.je-vybratelny:not(.je-od):not(.je-do):hover { box-shadow: inset 0 0 0 1.5px var(--inkoust); } }
.den:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; z-index: 2; }
.den.je-minule, .den.je-zavreno { color: color-mix(in srgb, var(--mulec) 45%, var(--vapno)); cursor: default; }
.den.je-nelze { color: color-mix(in srgb, var(--mulec) 72%, var(--vapno)); cursor: not-allowed; }
.den.je-obsazeno { color: var(--mulec); cursor: not-allowed; }
.den.je-obsazeno span { text-decoration: line-through; text-decoration-thickness: 1px; }
/* den střídání hostů: půlka pásu obsazenosti (td.obs-od / obs-do), číslo zůstává čitelné (rano = ráno odjíždějí předchozí, odpoledne = přijíždějí další) */
.den.je-odpoledne { color: var(--inkoust); }
.den.je-odpoledne span { text-decoration: none; }
.den.je-odpoledne:not(.je-vybratelny) { color: var(--mulec); }
.den.je-odpoledne.je-vybratelny { cursor: pointer; }
.den.je-leto-so span { font-weight: 700; }
.den.je-dnes { box-shadow: inset 0 0 0 1.5px var(--cara); }
.den.je-navrh { box-shadow: none; }
.den.je-navrh::after { content: ""; position: absolute; inset: 3px; border: 1.5px dashed var(--inkoust); border-radius: calc(var(--r-2) - 3px); pointer-events: none; }
.den.je-navrh span { font-weight: 700; }
.den.je-od, .den.je-do { background: var(--vino); color: var(--vapno); font-weight: 700; }
.den.je-od span, .den.je-do span { text-decoration: none; }
.den.je-kolize { box-shadow: inset 0 0 0 2px var(--chyba); }
@media (hover: hover) { .den.je-pres { box-shadow: inset 0 0 0 2px var(--chyba); cursor: not-allowed; } }
html.je-pohyb .den { transition: background-color 120ms linear, color 120ms linear, box-shadow 120ms linear; }
.kal__zima { margin-top: 14px; font-size: var(--fs-popis); color: var(--mulec); }
.mesic__plno { margin-top: 8px; text-align: center; font-size: 14px; color: var(--mulec); }

/* panel kolize a neplatného termínu: chyba uvnitř panelu (--r-1), nikdy slepá ulička */
.kal__alt { margin: 4px 0 8px; padding: 16px 18px; border-radius: var(--r-1); background: color-mix(in srgb, var(--chyba) 7%, var(--vapno)); font-size: var(--fs-ui); line-height: 1.45; }
.kal__alt:empty { display: none; }
.kal__alt p { font-weight: 700; color: var(--chyba); }
.kal__alt .volby__rada { flex-wrap: wrap; }

.kal__legenda { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--cara-tenka); font-size: 14px; line-height: 1.3; color: var(--mulec); }
.kal__legenda li { display: inline-flex; align-items: center; gap: 8px; }
.leg { position: relative; flex: none; width: 22px; height: 18px; border-radius: var(--r-1); border: 1px solid var(--cara); background: var(--vapno); }
.leg--obsazeno { width: 34px; border-color: transparent; background: repeating-linear-gradient(-45deg, transparent 0 4px, color-mix(in srgb, var(--mulec) 30%, transparent) 4px 5px), var(--plocha-3); }
.leg--stridani { border-color: var(--cara); background: linear-gradient(90deg, var(--plocha-3) 50%, var(--vapno) 50%); }
.leg--kraj { border-color: var(--vino); background: var(--vino); }
.leg--pas { margin-left: -6px; border-color: transparent; background: color-mix(in srgb, var(--znamka) 44%, var(--vapno)); }
.kal__ukazka { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--mulec); }

/* bez JS: věta s telefonem a dvě pole s datem */
.bezjs-termin { margin-top: 16px; }
.bezjs-termin__veta { font-size: var(--fs-lead); line-height: 1.5; max-width: 34em; }
.bezjs-termin__pole { display: grid; grid-template-columns: repeat(2, minmax(0, 15rem)); gap: 16px 24px; margin-top: 20px; }
@media (max-width: 419.98px) { .bezjs-termin__pole { grid-template-columns: minmax(0, 15rem); } }   /* bez JS: zástupný text data se vejde celý (final-4 R-11) */
.bezjs-termin__napoveda { margin-top: 12px; font-size: var(--fs-popis); color: var(--mulec); max-width: 40em; }

/* ---------- krok 2: počty a ložnice (počitadla na --plocha-2 jako v povolence: panel kroku je vápno, SJEDNOCENI 5.11) */
.sekce--plocha .pop .krok { background: var(--plocha-2); }
.pocty { margin-top: 28px; display: flex; flex-direction: column; gap: 24px; }
.pocty__radek { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px; }
.pocty__radek--ryby { justify-content: flex-start; padding-top: 24px; border-top: 1px solid var(--cara-tenka); }
.pocty__pole { display: flex; flex-direction: column; gap: 8px; }
.pocty__h { font-weight: 700; font-size: var(--fs-ui); }
.pocty__cislo { width: 8rem; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--cara); border-radius: var(--r-2); background: var(--pole); }
.pocty__tip { display: flex; align-items: center; min-height: 52px; font-size: var(--fs-ui); color: var(--mulec); }
.pocty__pozn { font-size: var(--fs-popis); color: var(--mulec); margin-top: -8px; }
.pocty__ryby { font-size: var(--fs-popis); line-height: 1.5; color: var(--inkoust); max-width: 40em; }
.pocty__ryby a { font-weight: 700; }
.krok__hodnota--text { min-width: 6.6em; font-family: var(--pismo); font-size: 17px; font-weight: 700; }
.loznice { display: flex; gap: 12px; }
.loznice__pokoj { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: var(--mulec); }
.loznice__lozka { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--cara); border-radius: var(--r-1); }
.lozko { position: relative; width: 30px; height: 17px; border: 1.5px solid var(--mulec); border-radius: 3px; }
.lozko::before { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 6px; border-radius: 1px; border: 1px solid var(--mulec); }
.lozko.je-obsazene { background: color-mix(in srgb, var(--znamka) 62%, var(--vapno)); border-color: var(--znamka-hrana); }
.lozko.je-obsazene::before { border-color: var(--znamka-hrana); }
html.je-pohyb .lozko { transition: background-color var(--t-kratka) linear, border-color var(--t-kratka) linear; }

/* ---------- krok 3: kontakt */
.kontakt-pole { display: grid; grid-template-columns: 1fr 1fr; gap: 20px var(--mezera-mrizky); margin-top: 24px; align-items: start; }
.kontakt-pole .pole--siroke { grid-column: 1 / -1; }
.kontakt-pole .pole :is(input, textarea) { background: var(--pole); scroll-margin-top: calc(var(--hlavicka) + 24px); scroll-margin-bottom: calc(var(--spodni-lista) + 24px); }
.kontakt-pole .pole > label { scroll-margin-top: calc(var(--hlavicka) + 24px); }
.pole__napoveda { margin-top: -4px; font-size: var(--fs-popis); line-height: 1.4; color: var(--mulec); }
.pole__pocitadlo { font-size: var(--fs-popis); color: var(--mulec); }
.pole__pocitadlo:empty { display: none; }
.pole__chyba::before { content: ""; flex: none; width: 14px; height: 14px; transform: translateY(2px); background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M8 1.5 15 14H1z'/%3E%3Cpath stroke='black' stroke-width='1.6' d='M8 6v4M8 11.4v1.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M8 1.5 15 14H1z'/%3E%3Cpath stroke='black' stroke-width='1.6' d='M8 6v4M8 11.4v1.4'/%3E%3C/svg%3E") center / contain no-repeat; }
.chyby-souhrn { margin-top: 20px; scroll-margin-top: calc(var(--hlavicka) + 16px); padding: 16px 18px; border-radius: var(--r-1); background: color-mix(in srgb, var(--chyba) 7%, var(--vapno)); color: var(--chyba); scroll-margin-top: calc(var(--hlavicka) + 24px); }
.chyby-souhrn:focus { outline: none; }
.chyby-souhrn__h { font-weight: 700; }
.chyby-souhrn ul { margin-top: 6px; padding-left: 1.1em; }
.chyby-souhrn a { color: var(--chyba); }

/* ---------- krok 4 a Hotovo: kontrola po řádcích (ne karty), podmínky, co bude dál */
.kontrola { margin-top: 20px; border-top: 1px solid var(--cara-tenka); }
.kontrola__blok { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--cara-tenka); }
.kontrola__h { grid-column: 1; font-weight: 700; font-size: 14px; line-height: 1.4; color: var(--mulec); }
.kontrola__upravit { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: -10px; }
.kontrola__obsah { grid-column: 1; min-width: 0; margin-top: 4px; font-size: var(--fs-ui); line-height: 1.5; overflow-wrap: anywhere; }   /* dlouhý e-mail se zalomí (final-4 R-3) */
.kontrola__obsah b { font-size: 17px; }
.kontrola__obsah .tlumene { color: var(--mulec); }
.kontrola__vzkaz { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.kontrola__vzkaz.je-cely { display: block; }
.kontrola__cely { margin-top: 2px; padding: 0; border: 0; background: none; color: var(--vino); font-size: var(--fs-popis); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; min-height: 32px; }
.tlacitko--text { --_obrys: transparent; padding-inline: 8px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (hover: hover) { .tlacitko--text:hover { background: transparent; text-decoration-thickness: 2px; } }
.podminky { margin-top: 24px; border-bottom: 1px solid var(--cara-tenka); }
.podminky summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; font-weight: 700; cursor: pointer; list-style: none; }
.podminky summary::-webkit-details-marker { display: none; }
.podminky summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform var(--t-kratka) var(--ease-vystup); }
.podminky[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.podminky ul { margin: 0 0 18px; padding-left: 1.1em; font-size: var(--fs-ui); line-height: 1.5; }
.podminky li + li { margin-top: 4px; }
.dal { margin-top: 28px; }
.dal__h { font-size: var(--fs-ui); font-weight: 700; }
.dal__body { margin-top: 10px; padding-left: 1.4em; font-size: var(--fs-ui); line-height: 1.5; max-width: 40em; }
.dal__body li + li { margin-top: 6px; }
.dal__body li::marker { font-family: var(--pismo-cislo); font-weight: 700; color: var(--vino); }
.k4-odeslat { margin-top: 28px; }
.k4-tel { margin-top: 20px; font-size: var(--fs-popis); color: var(--mulec); }
.k4-ucet { display: none; }
.akce { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.selhani { margin-top: 20px; padding: 18px; border-radius: var(--r-1); background: color-mix(in srgb, var(--chyba) 7%, var(--vapno)); }
.selhani__h { font-weight: 700; font-size: 19px; color: var(--chyba); }
.hotovo__ukazka { margin-top: 10px; font-weight: 700; font-size: 20px; line-height: 1.35; color: var(--vino); }
.hotovo__akce { margin-top: 28px; }
.hotovo__smazat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; padding: 12px 16px; border-radius: var(--r-1); background: color-mix(in srgb, var(--znamka) 22%, var(--vapno)); }
.hotovo__smazat p { font-weight: 700; margin-right: auto; }

/* ---------- účtenka (panel --vapno; hlava na ztlumené slámě, částka vínem) */
.ucet__hlava { position: relative; isolation: isolate; padding: 22px 28px 18px; color: var(--inkoust); }
.ucet__hlava::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(color-mix(in srgb, var(--plocha-2) 90%, transparent), color-mix(in srgb, var(--plocha-2) 90%, transparent)), var(--plocha-2) url("img/slama-960.webp") 40% 50% / cover no-repeat; }
.ucet__stitek { font-size: 14px; line-height: 1.4; color: var(--inkoust); }
.ucet__castka { display: block; margin-top: 4px; font-family: var(--pismo-cislo); font-weight: 700; font-size: min(60px, 15cqi); line-height: 1; letter-spacing: -.025em; white-space: nowrap; color: var(--vino); font-variant-numeric: lining-nums; }
.ucet__nadpis { margin-top: 6px; font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--vino); text-wrap: balance; }
.ucet__pod { margin-top: 8px; font-size: 15px; line-height: 1.4; }
.ucet__termin { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cara); font-size: 15px; line-height: 1.4; }
.ucet__termin b { display: block; }
.ucet__znamka { flex: none; width: 22px; height: 30px; fill: var(--znamka); stroke: var(--znamka-hrana); stroke-width: 4; overflow: visible; }
.ucet__telo { padding: 6px 28px 4px; }
.ucet__radek { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--cara-tenka); transition: background-color 600ms linear; }
.ucet__radek-nazev { font-size: var(--fs-ui); line-height: 1.35; }
.ucet__radek-castka { font-weight: 700; font-size: var(--fs-ui); font-variant-numeric: tabular-nums lining-nums; text-align: right; white-space: nowrap; }
.ucet__radek-castka.je-text { font-weight: 400; color: var(--mulec); white-space: normal; }
.ucet__radek-vypocet { grid-column: 1 / -1; margin-top: 1px; font-size: 14px; line-height: 1.4; color: var(--mulec); }
.ucet__radek .pozn { grid-column: 1 / -1; }
.ucet__celkem { border-bottom: 0; border-top: 1px solid var(--inkoust); margin-top: -1px; }
/* žlutá známky jako zvýraznění výsledku (ROZHODNUTI › 9): částka v hlavě účtenky a celkem podtržené linkou známky jako displejová čísla */
.ucet__celkem .ucet__radek-castka, .ucet__castka { text-decoration: underline; text-decoration-color: var(--znamka); text-decoration-thickness: .1em; text-underline-offset: .14em; text-decoration-skip-ink: none; }
.ucet__castka { text-decoration-thickness: .06em; }
.ucet__celkem .ucet__radek-nazev, .ucet__celkem .ucet__radek-castka { font-weight: 700; font-size: 18px; }
.ucet__skupina-h { margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--mulec); }
.ucet__zvlast > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; min-height: 40px; padding-top: 12px; margin-top: 0; list-style: none; cursor: pointer; }
.ucet__zvlast > summary::-webkit-details-marker { display: none; }
.ucet__zvlast > summary::after { content: ""; align-self: center; width: 8px; height: 8px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.ucet__zvlast[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.ucet__zvlast-souhrn { font-weight: 400; }
.ucet__zvlast[open] .ucet__zvlast-souhrn { display: none; }
@media (hover: hover) { .ucet__zvlast > summary:hover { color: var(--inkoust); } }
.ucet__zvlast > summary + .ucet__radek { padding-top: 6px; }
.ucet__nahore { margin-bottom: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--cara-tenka); }
.ucet__nahore .ucet__volby-h { margin-top: 10px; }
.ucet__jen-deska { display: none; }
#ucet .ucet__jen-deska { display: block; }
#ucet .ucet__nabidka { display: none; }
.ucet__veta { margin-top: 14px; font-size: 14px; line-height: 1.45; }
.ucet__veta + .ucet__veta { margin-top: 4px; }
.ucet__paticka { margin-top: 10px; padding-bottom: 16px; font-size: 14px; line-height: 1.45; color: var(--mulec); }
.ucet__radek.je-svit, .ucet__castka.je-svit { animation: svit 900ms var(--ease-vystup); }
/* změněná částka krátce zežloutne (jen barva pozadí, i v omezeném pohybu) */
@keyframes svit { 0%, 25% { background-color: color-mix(in srgb, var(--znamka) 48%, transparent); } to { background-color: transparent; } }
.ucet__castka.je-svit { border-radius: var(--r-1); }
.ucet__volby-h { margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--inkoust); }
.ucet__volby { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 10px; }
.ucet__volby .cip { justify-content: flex-start; white-space: normal; text-align: left; }
.ucet__cenik .ucet__radek:last-child { border-bottom: 0; }
/* prázdná účtenka nese ceník (hlava sekce je jen H2 a lead, kalendář je nad ohybem) */
#ucet .ucet__cenik { margin-top: 4px; }
/* „Přivezte…“ je v kroku 4 v Podmínkách a ve spodním listu; v lepivé účtence by tlačilo hlavní tlačítko pod okno */
#ucet .ucet__privezte { display: none; }
#ucet .ucet__cenik + .ucet__veta { margin-top: 20px; }
.ucet__akce { padding: 24px 28px 24px; }  /* bez čáry nad tlačítkem (SJEDNOCENI › 9.11), odděluje mezera */
.ucet__dal { width: 100%; white-space: normal; text-align: center; }
/* Zpět na předchozí krok na počítači pod hlavním tlačítkem (ukazatel kroků v panelu tak neposkočí, hodnocení 5.2) */
.ucet__zpet { display: flex; justify-content: center; width: 100%; margin: 8px 0 -8px; }
.ucet__zpet[hidden] { display: none; }
.ucet__dal[aria-busy="true"] { cursor: progress; }
.ucet__hotovo { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--vino); }
.ucet__hotovo::before { content: ""; width: 16px; height: 9px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(-45deg); }

/* ---------- konec sekce: louka (mimo tok poptávky, nejvýš 720 CSS px = W/2 zdroje) sl. 1–6 a vedle ní telefon majitelce sl. 8–11 */
.termin__konec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mezera-mrizky); align-items: start; margin-top: var(--mezera-bloku); }
.termin__louka { grid-column: 1 / 7; margin: 0; }
.termin__zavolat { grid-column: 8 / 12; }
.termin__zavolat-h { font-size: var(--fs-h3, 28px); line-height: 1.2; color: var(--inkoust); }
.termin__zavolat-veta { margin-top: 16px; font-size: var(--fs-text); line-height: 1.55; color: var(--inkoust); max-width: 30em; }
.termin__zavolat-kdo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 28px; }
/* oprava 5.2: telefon tu je jen odečet S (24 / 20) vínem; jako displej M stojí jednou, v Kontaktu */
.termin__tel { display: inline-flex; align-items: center; min-height: 48px; color: var(--vino); text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .termin__tel:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; } }

/* ---------- spodní list s rozpisem (telefon a tablet) */
.list { width: 100%; max-width: 640px; max-height: 85svh; margin: auto auto 0; padding: 0 0 calc(16px + env(safe-area-inset-bottom)); border: 0; border-radius: var(--r-panel) var(--r-panel) 0 0; background: var(--vapno); color: var(--inkoust); overflow: auto; overscroll-behavior: contain; box-shadow: var(--stin-predmet); container-type: inline-size; }
.list::backdrop { background: color-mix(in srgb, var(--tma-hluboka) 48%, transparent); }
/* otevřený list zamkne stránku pod sebou jako prohlížeč fotek (final-4 M13: tah po zatemnění posouval stránku) */
html:has(.list[open]) { overflow: hidden; }
.list__uchyt { width: 36px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: var(--cara); }
.list__hlava { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px 10px; background: var(--vapno); }
.list__h { font-size: 19px; }
.list .ucet__hlava { border-radius: var(--r-1); margin: 0 16px; }
.k4-ucet .ucet__hlava { border-radius: var(--r-1); }
.k4-ucet .ucet__telo { padding-inline: 0; }
.list .ucet__telo { padding-inline: 20px; }
@media (prefers-reduced-motion: no-preference) {
  html.je-pohyb:not(.je-firefox) .list[open] { animation: list-vyjede var(--t-stredni) var(--ease-vystup); }
}
@keyframes list-vyjede { from { transform: translateY(40px); opacity: .4; } }

/* ---------- spodní lišta v sekci Termín (pod 1100 px, když je panel kroku v okně): cena s rozpisem + hlavní tlačítko kroku */
.lista-dole__rozpis { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-right: auto; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; color: var(--mulec); font-size: var(--fs-popis); line-height: 1.15; text-align: left; cursor: pointer; }
.lista-dole__rozpis b { font-size: 22px; line-height: 1.1; color: var(--vino); white-space: nowrap; }
.lista-dole__rozpis span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.lista-dole__rozpis b.je-text { font-family: var(--pismo); font-size: 17px; }
.lista-dole.je-termin .lista-dole__cena, .lista-dole.je-termin .lista-dole__termin, .lista-dole.je-termin .lista-dole__tel { display: none; }
.lista-dole.je-termin .lista-dole__rozpis:not([hidden]), .lista-dole.je-termin .lista-dole__dal:not([hidden]) { display: flex; }
.lista-dole:not(.je-termin) .lista-dole__rozpis, .lista-dole:not(.je-termin) .lista-dole__dal { display: none; }

/* =================================================================== zlomy */
@media (max-width: 1099.98px) {
  .termin__nadpis { grid-column: 1 / 8; }
  .pop { grid-column: 1 / -1; }
  .ucet { display: none; }
  .k4-ucet:not(:empty) { display: block; margin-top: 28px; container-type: inline-size; }
  .termin__konec { grid-template-columns: minmax(0, 1fr); row-gap: var(--mezera-sloupce); }
  .termin__louka, .termin__zavolat { grid-column: 1 / -1; }
  .termin__louka { max-width: 720px; }
}
@media (max-width: 899.98px) {
  .termin__hlava { display: block; }
  .cenik { margin-top: var(--mezera-sloupce); max-width: 34em; }
}
/* tablet a telefon: jeden měsíc, švihnutí, šipky vedle názvu */
@media (max-width: 759.98px) {
  .kal__mrizky { grid-template-columns: 1fr; }
  .mesic__hlava { display: none; }
  .kal__ovladani { margin-bottom: 0; pointer-events: auto; }
  .kal__nazev-box { position: static; width: auto; height: auto; overflow: visible; clip-path: none; text-align: center; }
  .kal__nazev { font-weight: 700; font-size: 19px; line-height: 1.25; }
  .kal__nazev .mesic__pozn { display: block; font-weight: 400; }
  .kal__svih { font-size: 14px; color: var(--mulec); }
  .kal__mrizky { touch-action: pan-y; }
}
@media (max-width: 767.98px) {
  .pop { padding: 20px 16px 24px; }
  .pop__nazev:not([hidden]), .pop__pocet { display: block; font-weight: 700; font-size: 19px; }
  .pop__pocet { font-weight: 400; font-size: 16px; color: var(--inkoust); margin-left: auto; }
  .pop__stav { margin-bottom: 8px; }
  .postup { gap: 6px; }
  .postup button { gap: 0; min-height: 44px; justify-content: center; padding: 0; }
  .postup__nazev { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pop__hlava { margin-bottom: 20px; }
  .kal__radek { min-height: 52px; }
  .kal__zprava { font-size: 18px; }
  /* Zrušit výběr na telefonu jako textové tlačítko: zpráva výběru má víc místa */
  .kal__zrusit { --_obrys: transparent; padding: 0 4px; margin-right: -4px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
  .volby__rada { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 4px; scroll-padding-inline: 16px; }
  .volby__rada::-webkit-scrollbar { display: none; }
  /* náznak posunu: pravý okraj řady se rozplývá, dokud host nedojede na konec */
  #kal-volby-rada:not(.je-konec) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  .volby__rada > * { scroll-snap-align: start; flex: none; }
  .kal__alt .volby__rada { margin-inline: 0; padding-inline: 0; overflow: visible; flex-wrap: wrap; }
  .den { height: 46px; }
  .kal__legenda { gap: 8px 16px; }
  .pocty__radek { gap: 16px 24px; }
  .loznice { gap: 8px; }
  .lozko { width: 26px; }
  .kontakt-pole { grid-template-columns: 1fr; }
  .kontrola__blok { padding: 16px 0; }
  .ucet__hlava { padding: 20px 18px; }
  .ucet__telo { padding-inline: 18px; }
  .hotovo__akce .tlacitko { flex: 1 1 auto; }
}
@media (max-width: 359.98px) {
  /* final-4 M12: popis pod částkou ve spodní liště na jeden řádek (lišta nenaroste) */
  .lista-dole__rozpis span { font-size: 13px; white-space: nowrap; }
  /* final-4 M12: hlava panelu na 320 px na jeden řádek, u Zpět jen „Zpět“ (kam vede, čte čtečka) */
  .pop__zpet-kam { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 374.98px) {
  .pop { padding-inline: 10px; }
  .mesic td { padding: 2px 0; }
  .den { height: 44px; }
  .volby__rada { margin-inline: -10px; padding-inline: 10px; scroll-padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .krok-p.je-prichod, .list[open] { animation: none !important; }
  .postup__cara, .den, .cip { transition-duration: 0ms !important; }
  .ucet__radek.je-svit, .ucet__castka.je-svit { animation-duration: 900ms; }
}
@media (forced-colors: active) {
  .den.je-od, .den.je-do { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .mesic td.je-pas::before { background: none; border-top: 2px solid Highlight; border-bottom: 2px solid Highlight; }
  .den.je-obsazeno span { text-decoration: line-through; }
  .postup__cara { background: CanvasText; }
  .postup [aria-current="step"] .postup__cara, .postup .je-hotovo .postup__cara { background: Highlight; }
}


/* css/otazky.css */
/* =================================================================== 10 ČASTÉ OTÁZKY „Na co se hosté ptají“
   Kolo 5 (SJEDNOCENI › 4 ř. 10, 5.10): V2 „Hlava a seznam“ bez fotky. Hlava sl. 1–6, osm otázek ve dvou sloupcích sl. 1–6
   a 7–12, „Další otázky“ (textové tlačítko s ikonou) přes 12 sloupců. Řádek: odpověď napřed (v DOM je otázka první, čtečka
   čte otázku, pak odpověď), ikona + / − kreslená čarou 2 px, hover --plocha-3 s --r-1, čáry 1 px --cara-tenka. */
.otazky__hlavni { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin-top: var(--mezera-hlavy); }
.otazky__hlavni > .otazky__sloupec:first-child { grid-column: 1 / 7; }
.otazky__hlavni > .otazky__sloupec:last-child { grid-column: 7 / -1; }
.otazky__sloupec { display: grid; align-content: start; border-top: 1px solid var(--cara-tenka); }

.ot { border-bottom: 1px solid var(--cara-tenka); }
.ot__souhrn {
  position: relative; display: flex; flex-direction: column-reverse; gap: 4px;
  min-height: 64px; margin: 4px -8px; padding: 16px 52px 16px 8px; border-radius: var(--r-1);
  cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-kratka) var(--ease-vystup);
}
.ot__souhrn::-webkit-details-marker { display: none; }
.ot__souhrn::marker { content: ""; }
@media (hover: hover) { .ot__souhrn:hover { background: var(--plocha-3); } }
.ot__souhrn:focus-visible { outline-offset: 0; }
.ot__odpoved { font-weight: 700; font-size: var(--fs-h3); line-height: 1.25; }
.ot__otazka { font-size: var(--fs-popis); line-height: 1.45; color: var(--mulec); }
.ot__znak {
  position: absolute; right: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  fill: none; stroke: var(--vino); stroke-width: 2; stroke-linecap: round;
}
.ot__svisla { transition: opacity var(--t-kratka) var(--ease-vystup); }
.ot[open] > .ot__souhrn .ot__svisla, .otazky__dalsi[open] > .otazky__dalsi-souhrn .ot__svisla { opacity: 0; }
.ot__vic { padding: 0 52px 20px 0; font-size: var(--fs-text); line-height: 1.6; max-width: 36em; }
.ot__vic p + p { margin-top: 8px; }

/* další otázky: textové tlačítko (16 / 700, podtržení) s ikonou vlevo, výčet témat pod ním */
.otazky__dalsi { grid-column: 1 / -1; margin-top: var(--mezera-sloupce); }
.otazky__dalsi-souhrn {
  display: grid; grid-template-columns: 18px auto; column-gap: 12px; row-gap: 2px; align-items: center; justify-content: start;
  min-height: 44px; padding: 8px 0; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.otazky__dalsi-souhrn::-webkit-details-marker { display: none; }
.otazky__dalsi-souhrn::marker { content: ""; }
.otazky__dalsi-souhrn .ot__znak { position: static; margin: 0; grid-row: 1; grid-column: 1; }
.otazky__dalsi-nazev { grid-row: 1; grid-column: 2; font-weight: 700; font-size: var(--fs-ui); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (hover: hover) { .otazky__dalsi-souhrn:hover .otazky__dalsi-nazev { text-decoration-thickness: 2px; } }
.otazky__dalsi-pocet { grid-row: 2; grid-column: 2; font-size: var(--fs-popis); line-height: 1.45; color: var(--mulec); }
.otazky__dalsi-obsah { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mezera-mrizky); margin-top: 24px; }
.otazky__dalsi-obsah > .otazky__sloupec:first-child { grid-column: 1 / 7; }
.otazky__dalsi-obsah > .otazky__sloupec:last-child { grid-column: 7 / -1; }

@media (max-width: 899.98px) {
  .otazky__hlavni { display: block; }
  .otazky__dalsi-obsah { display: block; }
  .otazky__hlavni > .otazky__sloupec + .otazky__sloupec, .otazky__dalsi-obsah > .otazky__sloupec + .otazky__sloupec { border-top: 0; }
}
@media (max-width: 767.98px) {
  .ot__souhrn { padding-right: 44px; }
  .ot__znak { right: 8px; }
  .ot__vic { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .ot__svisla, .ot__souhrn { transition: none; } }

/* css/kontakt.css */
/* =================================================================== 11 KONTAKT „Bezděkov pod Třemšínem 72“
   Kolo 5 (SJEDNOCENI › 4 ř. 11): V1 s fotkou vpravo (vzor ze zaklad.css). Mapa je rám 3 : 2 s --r-foto (plakát z OSM v barvách
   webu, srub jako známka 72 44 × 60), textový sloupec: majitelka a telefon jako číslo M, cesty jako řádky seznamu (5.10),
   adresa, odkazy (textová tlačítka) a citace o majitelích. */
.mapa-k__plocha { background: var(--plocha-2); }
.mapa-k__plakat { position: absolute; inset: 0; display: block; }
.mapa-k__plakat img { width: 100%; height: 100%; object-fit: cover; }
.mapa-k__misto { position: absolute; margin: 0; transform: translate(-50%, -50%); font-size: 14px; line-height: 1.2; color: var(--inkoust); white-space: nowrap; pointer-events: none; text-shadow: 0 0 4px var(--plocha-2), 0 0 2px var(--plocha-2), 0 0 1px var(--plocha-2); }
.mapa-k__misto--sever { transform: translate(8px, 0); display: flex; align-items: center; gap: 4px; }
.mapa-k__misto--sever svg { width: 10px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.mapa-k__misto--ves { font-weight: 700; font-size: 15px; }
.mapa-k__misto--rybnik { color: var(--mulec); }
.mapa-k__srub { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.mapa-k__srub .znamka--mala { --zw: 44px; display: block; }
.mapa-k__srub .znamka__hrana { stroke: var(--inkoust); stroke-width: 1.5; }
.mapa-k__srub span { position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); font-weight: 700; font-size: 15px; text-shadow: 0 0 4px var(--plocha-2), 0 0 2px var(--plocha-2); }
.mapa-k__nacist { position: absolute; left: 16px; bottom: 16px; background: var(--vapno); }
@media (hover: hover) { .mapa-k__nacist:hover { background: color-mix(in srgb, var(--inkoust) 8%, var(--vapno)); } }
.mapa-k__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity var(--t-stredni) var(--ease-vystup); }
.mapa-k__plocha.je-mapa .mapa-k__iframe { opacity: 1; }
/* posuvná mapa OSM ztlumená do palety webu (teplá sépie, menší sytost), aby nepůsobila jako z cizího webu */
.mapa-k__iframe { filter: sepia(.32) saturate(.62) contrast(.96) brightness(1.02); }
.mapa-k__plocha.je-mapa .mapa-k__misto, .mapa-k__plocha.je-mapa .mapa-k__srub { display: none; }
.mapa-k__plocha.je-nacitani::after { content: "Načítám mapu…"; position: absolute; left: 16px; bottom: 16px; padding: 10px 14px; background: var(--vapno); font-size: var(--fs-popis); border-radius: var(--r-1); }
.mapa-k__kryt { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: 12px; background: transparent; }
.mapa-k__kryt .tlacitko { background: var(--vapno); }
@media (prefers-reduced-motion: reduce) { .mapa-k__iframe { transition: none; } }

/* textový sloupec */
.kontakt__majitelka { display: flex; flex-direction: column; align-items: flex-start; }
.kontakt__majitelka .cislo-popis { margin-top: 4px; }
.kontakt__tel { display: inline-flex; align-items: center; min-height: 48px; margin-top: 16px; color: var(--vino);   /* telefon jako číslo M vínem, stejně jako v celém webu (oprava 5.2) */
  text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .kontakt__tel:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; } }
.kontakt__mail { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-text); }

.kontakt__cesty { margin-inline: 0; margin-bottom: 0; }   /* horní okraj 32 px z .v1__zbytek (mezi e-mailem a cestami) */
.kontakt__cesty div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); column-gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--cara-tenka); align-items: baseline; }
.kontakt__cesty div:first-child { padding-top: 0; }
.kontakt__cesty div:last-child { border-bottom: 0; padding-bottom: 0; }
.kontakt__cesty dt { font-size: var(--fs-popis); line-height: 1.45; color: var(--mulec); }
.kontakt__cesty dd { margin: 0; font-size: var(--fs-text); line-height: 1.45; }
.kontakt__cesty .odecet { margin-right: .3em; }
.kontakt__adresa { font-size: var(--fs-text); line-height: 1.45; }
.kontakt__odkazy { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; }

/* pod 1200 px tlačítko „Načíst posuvnou mapu“ vpravo dole, vlevo dole by krylo popisek vsi (final-4 TD-03) */
@media (max-width: 1199.98px) {
  .mapa-k__nacist { left: auto; right: 16px; }
}
@media (max-width: 767.98px) {
  .mapa-k__misto { font-size: 12px; }
  .mapa-k__misto--ves, .mapa-k__srub span { font-size: 13px; }
  /* známka 44 × 60 by na telefonu kryla popisek rybníka */
  .mapa-k__misto--rybnik { left: 68.2% !important; top: 47% !important; }
  /* tlačítko „Načíst posuvnou mapu“ vpravo dole by krylo popisek vsi */
  .mapa-k__misto--ves { left: 24% !important; }
  .mapa-k__nacist { left: auto; right: 8px; bottom: 8px; }
}
/* 320–359 px: tlačítko zabere skoro celou spodní řadu, popisek vsi o řádek výš (final-4 M11) */
@media (max-width: 359.98px) {
  .mapa-k__misto--ves { top: 64% !important; left: 21% !important; }
}
/* fokus plakátu kolem celého rámu (odkaz uvnitř overflow by obrys ořízl) */
.mapa-k__plakat:focus-visible { outline: none; }
.mapa-k__plocha:has(.mapa-k__plakat:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }

/* css/paticka.css */
/* =================================================================== PATIČKA: logo a adresa, žádná velká známka s č. p. */
.pas-slamy { height: 48px; margin-top: var(--mezera-sekce); background: var(--tma) url("img/slama-pas-2000.webp") 0 50% / auto 100% repeat-x; }
.paticka { padding: 64px var(--bok) calc(64px + var(--spodni-lista)); }
.paticka a { color: var(--vapno); }
.paticka__ramec { max-width: var(--ramec-max); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mezera-mrizky); row-gap: var(--mezera-sloupce); align-items: start; }
.paticka__znacka { grid-column: 1 / 4; display: flex; align-items: center; gap: 12px; }
.paticka__logo { width: 21px; height: 28px; fill: var(--znamka); }
.paticka__jmeno { font-family: var(--pismo-cislo); font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.paticka__adresa { grid-column: 4 / 7; font-style: normal; color: var(--na-tme); }
.paticka__kontakt { grid-column: 7 / 10; color: var(--na-tme-2); }
.paticka__tel { font-size: var(--fs-odecet); line-height: 1.2; text-decoration: none; }
.paticka__odkazy { grid-column: 10 / -1; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; font-size: var(--fs-popis); }
.paticka__odkazy a { display: inline-flex; min-height: 44px; align-items: center; }
.paticka__zdroje { max-width: var(--ramec-max); margin: 40px auto 0; font-size: var(--fs-popis); color: var(--na-tme-2); }
.paticka__zdroje a { color: inherit; }
.paticka__plan { max-width: var(--ramec-max); margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--cara-tma); }
.paticka__plan ul { margin-top: 6px; padding-left: 1.1em; }
@media (max-width: 767.98px) {
  .paticka__znacka, .paticka__adresa, .paticka__kontakt, .paticka__odkazy { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .paticka__odkazy { align-items: flex-start; }
}

/* =================================================================== 404 (SJEDNOCENI › 4: V3 bez pole, H1 sl. 1–8, prázdná známka; ROZHODNUTI › 9: na vápně jako úvod) */
.stranka-404 { min-height: 100svh; display: flex; flex-direction: column; background: var(--vapno); }
.e404__hlavicka { display: flex; align-items: center; height: var(--hlavicka); padding: 0 var(--bok); border-bottom: 1px solid var(--cara-tenka); }
.e404__logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--inkoust); text-decoration: none; font-family: var(--pismo-cislo); font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.e404__logo svg { width: 21px; height: 28px; fill: var(--znamka); stroke: var(--znamka-hrana); stroke-width: 5; overflow: visible; }
.e404 { flex: 1; padding: var(--mezera-sekce) var(--bok); }
.e404__hlava { grid-column: 1 / 9; grid-row: 1; }
.e404__h1 { font-size: var(--fs-h1); }
.e404__text { margin-top: var(--mezera-h2-lead); }
.e404__akce { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--mezera-sloupce); }
.e404__znamka { --zw: 120px; grid-column: 10 / -1; grid-row: 1; justify-self: end; margin-top: 8px; color: var(--vino); }
@media (max-width: 767.98px) {
  .e404__vzor { display: flex; flex-direction: column; }
  .e404__znamka { --zw: 64px; order: -1; justify-self: auto; margin: 0 0 var(--mezera-sloupce); }
}

/* css/prohlizec.css */
/* =================================================================== PROHLÍŽEČ FOTEK (neprůhledné pozadí, LATKA › u vleku) */
.prohlizec { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--tma-hluboka); color: var(--vapno); }
.prohlizec::backdrop { background: var(--tma-hluboka); }
html:has(.prohlizec[open]) { overflow: hidden; }
/* fotka a popisek jako jeden blok na středu okna; popisek vlevo 12 px pod fotkou na její šířku (SJEDNOCENI 5.3, final-4 V5:
   dřív stál na pevné výšce dole a na středu). contain: inline-size = popisek nerozšíří sloupec, zalomí se na šířku fotky */
.prohlizec__obraz { position: absolute; inset: 64px max(72px, calc(env(safe-area-inset-right, 0px) + 64px)) 72px max(72px, calc(env(safe-area-inset-left, 0px) + 64px)); display: grid; grid-template-rows: auto auto; grid-template-columns: auto; justify-content: center; align-content: center; gap: 12px; }
.prohlizec__obraz img { justify-self: center; max-width: 100%; max-height: calc(100dvh - 64px - 72px - 76px); width: auto; height: auto; object-fit: contain; }
.prohlizec__popis { contain: inline-size; font-size: var(--fs-popis); color: var(--na-tme-2); text-align: start; }
.prohlizec__btn { position: absolute; display: grid; place-items: center; min-width: 52px; min-height: 52px; border: 1.5px solid color-mix(in srgb, var(--vapno) 60%, transparent); border-radius: var(--r-2); background: transparent; color: var(--vapno); cursor: pointer; font-weight: 700; font-size: var(--fs-ui); -webkit-tap-highlight-color: transparent; }
.prohlizec__btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (hover: hover) { .prohlizec__btn:hover { background: color-mix(in srgb, var(--vapno) 12%, transparent); border-color: var(--vapno); } }
.prohlizec__btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: no-preference) { .prohlizec__btn { transition: background-color var(--t-kratka) var(--ease-vystup), border-color var(--t-kratka) var(--ease-vystup), transform var(--t-kratka) var(--ease-vystup); } }
.prohlizec__btn:focus-visible { outline: 3px solid var(--znamka); outline-offset: 3px; }
.prohlizec__obraz img { border-radius: var(--r-foto); }
.prohlizec__zavrit { top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); padding: 0 24px; }
.prohlizec__predchozi { left: max(12px, env(safe-area-inset-left, 0px)); top: 50%; translate: 0 -50%; }   /* bezpečné okraje výřezu (final-4 M07) */
.prohlizec__dalsi { right: max(12px, env(safe-area-inset-right, 0px)); top: 50%; translate: 0 -50%; }
.prohlizec__popis { font-size: var(--fs-popis); line-height: 1.45; }
.prohlizec__pocet { margin-right: 12px; font-size: var(--fs-popis); color: var(--vapno); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prohlizec__pocet:empty { display: none; }
@media (max-width: 767.98px) {
  /* telefon: popisek hned pod fotkou (ne přišpendlený nad tlačítky), vlevo jako všechny popisky (SJEDNOCENI 5.3) */
  .prohlizec__obraz { inset: 76px max(8px, env(safe-area-inset-right, 0px)) 84px max(8px, env(safe-area-inset-left, 0px)); grid-template-columns: minmax(0, 1fr); }
  .prohlizec__obraz img { max-height: calc(100dvh - 76px - 84px - 112px); }
  .prohlizec__popis { justify-self: stretch; text-align: start; padding: 0 8px; }
  .prohlizec__predchozi, .prohlizec__dalsi { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); translate: none; }
}
/* telefon na šířku (final-4 M06, M07): šipky po stranách na středu výšky, fotka mezi nimi přes výšku okna, popisek pod ní */
@media (orientation: landscape) and (max-height: 500px) {
  .prohlizec__obraz { inset: 64px calc(max(12px, env(safe-area-inset-right, 0px)) + 64px) 12px calc(max(12px, env(safe-area-inset-left, 0px)) + 64px); grid-template-columns: auto; }
  .prohlizec__obraz img { max-height: calc(100dvh - 64px - 12px - 64px); }
  .prohlizec__popis { justify-self: stretch; padding: 0; }
  .prohlizec__predchozi, .prohlizec__dalsi { top: 50%; bottom: auto; translate: 0 -50%; }
}

/* css/pohyb.css */
/* =================================================================== OMEZENÍ POHYBU: přechody 0 ms, krytí do 120 ms; scroll bez plynulosti */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}