/* Šablona WOW ukázky — kostra a komponenty (SABLONA.md).
   Barvy doplní build z hera (--paper, --ink, --dark, --accent …), charakter
   DNA (tvary, rytmus animací) je v dna/<dna>.css. Tady se u dalšího klienta
   nemění nic. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-text), system-ui, sans-serif;
       font-weight: 300; font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, blockquote, figure, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }

/* --- mřížka a typografie (studie 85 webů: kontrast měřítek ≥ 5,6×, řádek ~50 znaků) --- */
.wrap { max-width: 1280px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 80px); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; }
.popisek { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; color: var(--muted); }
.nadpis { font-family: var(--f-head), Georgia, serif; font-weight: 400; font-size: clamp(40px, 5.4vw, 88px);
          line-height: 1.04; letter-spacing: -.01em; }
.nadpis em, .citat em { font-style: italic; color: var(--accent-text); }
h3 { font-family: var(--f-head), Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1.2; }
p { max-width: 25em; }
.maly { font-size: 14px; color: var(--muted); }
.cena { font-family: var(--f-head), Georgia, serif; font-size: 20px; white-space: nowrap; }
.cislo-nav, .cislo-rubriky { display: none; }   /* čísla navigace a rubrik zapíná DNA (EDITORIAL) */
.jen-pro-ctecku { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.tlacitko { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding-inline: 28px; border-radius: var(--r-btn);
            background: var(--btn, var(--dark)); color: var(--on-btn, var(--on-dark)); font: 400 13px/1 var(--f-text), sans-serif; letter-spacing: .16em;
            text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer; transition: transform .3s var(--ease), background .3s; }
.tlacitko:hover { transform: translateY(-2px); background: var(--accent); }
.tlacitko svg { transition: transform .3s var(--ease); }
.tlacitko:hover svg { transform: translateX(4px); }
.odkaz { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; font-size: 13px; letter-spacing: .16em;
         text-transform: uppercase; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 4px;
         transition: background-size .35s var(--ease); }
.odkaz:hover { background-size: 30% 1px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skok { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--dark); color: var(--on-dark); padding: 10px 16px; }
.skok:focus { top: 16px; }

/* --- hero: rastr FINALu + rozhraní v HTML na naměřených místech --- */
.hero { position: relative; }
/* Hero přes celou šířku (full bleed) a celý blok textu vždy v okně (Karel, 2026-10-01).
   Na okně širším než 16:9 by hero zvětšené na šířku bylo vyšší než obrazovka — ořízne se
   proto nahoře a dole, ale jen mimo blok textu (--text-top … --text-bot z masky textu).
   Až když se blok textu nevejde ani tak (poměr okna nad ~2,1 : 1), hero se zmenší
   a pruhy po stranách vyplní tatáž fotka rozostřená (záchrana pro ultrawide). */
.hero {
  --s: min(calc(100vw / var(--hero-w)), calc(100svh / var(--text-h)));
  --hfull: calc(var(--hero-h) * var(--s));
  --hvis: min(var(--hfull), 100svh);
  --ty: clamp(0px, calc(var(--text-mid) * var(--s) - var(--hvis) / 2), calc(var(--hfull) - var(--hvis)));
}
/* hero celé (stranka.json "hero_cely": SIGNATURE — rám výlohy je kompozice): vejde se celé do okna,
   pruhy po stranách vyplní rozostřená tatáž fotka (Karel 2026-10-11) */
.hero-cely .hero { --s: min(calc(100vw / var(--hero-w)), calc(100svh / var(--hero-h))); }
.hero-fit { position: relative; width: 100%; height: var(--hvis); overflow: hidden; background: center / cover no-repeat; }
.hero-fit::before { content: ""; position: absolute; inset: -40px; background: inherit; filter: blur(28px) saturate(1.05); }
.hero-platno { position: relative; z-index: 1; width: var(--hero-w); height: var(--hero-h); transform-origin: 0 0; color: var(--hero-ui);
               transform: translate(max(0px, calc((100vw - var(--hero-w) * var(--s)) / 2)), calc(-1 * var(--ty))) scale(var(--s)); }
.hero-platno > * { position: absolute; }
.hero-scena { inset: 0; background: 0 0 / 100% 100% no-repeat; }
.hero-platno a { color: var(--hero-ui); text-decoration: none; white-space: nowrap; }
.hero-logo { font-family: var(--f-text), sans-serif; line-height: 1; }
/* skutečné logo zájemce: obrázek přes celý změřený box (tools/hero_ui.py) */
.hero-logo-obr { display: block; } .hero-logo-obr img { display: block; width: 100%; height: 100%; }
/* výšku nese atribut height z build.py (podle jádra loga) */
.logo-obr { display: block; width: auto; max-width: 100%; }
.hlavicka .logo.s-obrazkem { letter-spacing: 0; overflow: visible; }
.paticka-logo { margin: 0 0 16px; }
.hero-nav a, .hero-nav span { position: absolute; font-family: var(--f-text), sans-serif; line-height: 1; white-space: nowrap; }
.hero-nav a { padding-bottom: 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .25s ease; }
.hero-nav a:hover, .hero-nav a:focus-visible { background-size: calc(100% - 2px) 1px; }
.hero-cta { font-family: var(--f-text), sans-serif; line-height: 1; height: 29px; }
.hero-cta svg { position: absolute; right: 0; top: 1px; transition: transform .25s ease; }
.hero-cta::after { content: ""; position: absolute; left: 0; top: var(--cta-linka, 27px); width: 100%; height: var(--cta-linka-h, 2px); background: currentColor; }
.hero-cta:hover svg { transform: translateX(6px); }
/* Dvě plátna hera (PIPELINE §7, Karel 2026-10-01): na výšku mobilní FINAL, na šířku desktopový.
   Rozhoduje poměr stran okna, ne šířka — telefon na šířku dostane desktopové 2 : 1. */
.hero-mobil { display: none; }
@media (max-aspect-ratio: 1/1) { .hero.ma-mobil { display: none; } .hero-mobil { display: block; } }
/* ikona menu z mobilního FINALu: čárky na změřených místech, dotyková plocha zvětšená */
.hero-menu { background: none; border: 0; padding: 0; cursor: pointer; color: var(--hero-ui); }
.hero-menu span { position: absolute; left: 0; width: 100%; background: currentColor; border-radius: 1px; }
.hero-menu::before { content: ""; position: absolute; inset: -18px; }
/* menu přes celou obrazovku: odkazy, objednání a kontakt na klik (vše z obsah.json) */
/* menu jako panel shora, ne přes celou obrazovku; zbytek stránky ztlumený (Karel, 2026-10-03:
   odkazy jednotně formálním písmem → panel může být nižší) */
.menu-mobil { position: fixed; inset: 0 0 auto; z-index: 70; max-height: 100dvh; background: var(--paper); color: var(--ink);
              overflow-y: auto; display: flex; flex-direction: column; gap: 22px; padding: 16px 24px 26px;
              box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--dark) 45%, transparent); }
.menu-mobil[hidden] { display: none; }
.menu-hlava { display: flex; align-items: center; justify-content: space-between; min-height: 52px;
              padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
/* textové logo v liště a menu = totéž jako v heru (písmo, řez, prostrkání z hero.json; Karel 2026-10-03) */
.hlavicka .logo, .menu-logo, .obri { font-family: var(--logo-f, var(--f-text)), sans-serif; font-weight: var(--logo-w, 400);
                              letter-spacing: var(--logo-ls, .2em); text-transform: var(--logo-tt, none); }
.menu-logo { font-size: 17px; }
.menu-mobil .zavrit { width: 48px; height: 48px; margin-right: -12px; display: grid; place-items: center;
                      background: none; border: 0; color: var(--ink); cursor: pointer; }
.menu-odkazy { list-style: none; margin: 0; padding: 0; display: grid; }
.menu-odkazy li + li { border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.menu-odkazy a { display: flex; justify-content: space-between; align-items: center; padding: 15px 0;
                 font: 400 16px/1.2 var(--f-text), sans-serif; letter-spacing: .18em; text-transform: uppercase;
                 color: var(--ink); text-decoration: none; }
.menu-odkazy a::after { content: "→"; letter-spacing: 0; color: var(--muted); transition: transform .2s ease; }
.menu-odkazy a:hover::after, .menu-odkazy a:focus-visible::after { transform: translateX(4px); color: var(--accent-text); }
.menu-cta { align-self: flex-start; }
.menu-kontakt { list-style: none; margin: 0; padding: 20px 0 0; display: grid; gap: 12px; font-size: 16px;
                border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.menu-kontakt li { display: flex; align-items: center; gap: 12px; }
.menu-kontakt .ikona { width: 20px; height: 20px; flex: none; color: var(--accent); }
.menu-kontakt a { color: inherit; text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  .menu-mobil:not([hidden]) .menu-odkazy li { animation: vyjet .6s var(--ease) both; animation-delay: calc(.05s + var(--i, 0) * .06s); }
  .menu-mobil:not([hidden]) .menu-cta, .menu-mobil:not([hidden]) .menu-kontakt { animation: vyjet .6s var(--ease) .25s both; }
}
/* ikona menu v lepicí liště — jen tam, kde není místo na navigaci */
.hlavicka-menu { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; padding: 0;
                 background: none; border: 0; color: var(--ink); cursor: pointer; }
.hlavicka-menu span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; }
.hlavicka-menu span:nth-child(1) { top: 15px; } .hlavicka-menu span:nth-child(2) { top: 21px; } .hlavicka-menu span:nth-child(3) { top: 27px; }
/* CTA jako tlačítko (výplň / obrys) — rozměr, zaoblení a barvy změřené z FINALu (tools/hero_ui.py) */
.hero-cta.hero-tlacitko { box-sizing: border-box; transition: filter .25s ease, background-color .25s ease; }
.hero-cta.hero-tlacitko::after { display: none; }
.hero-cta.hero-tlacitko .cta-text { position: absolute; line-height: 1; white-space: nowrap; }
.hero-cta.hero-tlacitko svg { right: auto; }
.hero-cta.vypln:hover, .hero-cta.vypln:focus-visible { filter: brightness(1.08); }
.hero-cta.obrys:hover, .hero-cta.obrys:focus-visible { background: color-mix(in srgb, currentColor 8%, transparent); }
.hero-platno a:focus-visible { outline: 2px solid var(--hero-ui); outline-offset: 6px; }
/* nadpis hera jako vrstva: fotka stojí, řádky vyjedou zespodu z masky */
.hero-nadpis { position: absolute; inset: 0; pointer-events: none; transform-origin: 40% 60%; }
.nadpis-radek { position: absolute; overflow: hidden; }
.nadpis-radek img { display: block; width: 100%; height: 100%; }
/* kreslené rozhraní: průhledné odkazy přes rastr (tools/hero_kreslene.py) */
.hero-plochy, .hero-plochy-nav { inset: 0; position: absolute; transform-origin: 40% 60%; pointer-events: none; }
/* hamburger kreslený kódem (plocha typu menu s "kresli": true) — v obraze ikona být nemusí */
.hero-plocha span { position: absolute; left: 8%; right: 8%; height: 9%; background: var(--plocha-ui); border-radius: 1px; }
.hero-plocha span:nth-child(1) { top: 20%; } .hero-plocha span:nth-child(2) { top: 46%; } .hero-plocha span:nth-child(3) { bottom: 20%; }
.hero-plocha { position: absolute; display: block; box-sizing: border-box; padding: 0; border: 0; background: transparent;
               border-radius: var(--r, 8px); cursor: pointer; pointer-events: auto; transition: background-color .25s ease, box-shadow .25s ease; }
/* zvýraznění podle toho, co plocha kryje: předmět ztmavne celý, slovo dostane linku, logo nic */
.hero-plocha.zv-plocha:hover { background: color-mix(in srgb, var(--plocha-ui) 10%, transparent); }
.hero-platno .hero-plocha.zv-plocha:focus-visible { outline: 2px solid var(--plocha-ui); outline-offset: 4px;
               background: color-mix(in srgb, var(--plocha-ui) 10%, transparent); }
.hero-pismo { position: absolute; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease, ease); }
/* slovo se při najetí prokreslí zleva doprava (Karel 2026-10-09: písmena se „prokreslují", ne obdélník) */
.hero-plocha.zv-pismo + .hero-pismo { clip-path: inset(0 100% 0 0); transition: opacity .15s, clip-path .55s cubic-bezier(.65, 0, .35, 1); }
.hero-plocha.zv-pismo:hover + .hero-pismo, .hero-plocha.zv-pismo:focus-visible + .hero-pismo { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .hero-plocha.zv-pismo + .hero-pismo { clip-path: none; } }
.hero-plocha.zv-pismo:hover + .hero-pismo, .hero-plocha.zv-pismo:focus-visible + .hero-pismo { opacity: 1; }
.hero-platno .hero-plocha.zv-pismo:focus-visible { outline: none; }
.hero-plocha.zv-stin + .hero-pismo { opacity: 1; transition: filter .35s var(--ease, ease); }
.hero-plocha.zv-stin:hover + .hero-pismo, .hero-plocha.zv-stin:focus-visible + .hero-pismo {
  filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--plocha-ui) 30%, transparent)); }
.hero-platno .hero-plocha.zv-stin:focus-visible { outline: none; }
.hero-platno .hero-plocha.zv-zadne:focus-visible { outline: 2px solid var(--plocha-ui); outline-offset: 4px; }

/* předěl pod herem: tvar spodní hrany v barvě následující sekce (tvar dává DNA) */
/* výška oblouku: podle volného místa pod textem, i když je hero dole oříznuté */
.predel { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; display: block; fill: var(--paper); z-index: 2;
          height: max(0px, min(calc(var(--predel-a) * var(--s)), calc(var(--hvis) - var(--text-bot) * var(--s) + var(--ty) - 10px))); }

/* --- lepicí hlavička po heru --- */
.hlavicka { position: fixed; inset: 0 0 auto; z-index: 30; background: color-mix(in srgb, var(--paper) 92%, transparent);
            backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); transform: translateY(-100%); transition: transform .4s var(--ease); }
.hlavicka.je-videt { transform: none; }
.hlavicka .wrap { display: flex; align-items: center; gap: 36px; min-height: 68px; }
.hlavicka .logo { font-size: 20px; text-decoration: none; }
.hlavicka nav { display: flex; gap: 28px; margin-left: auto; }
.hlavicka nav a { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.hlavicka .tlacitko { height: 42px; padding-inline: 20px; }

/* --- provozní pás: první praktická odpověď pod herem (kdy, kde, jak) --- */
.pas { background: var(--paper-2); border-bottom: 1px solid var(--line); padding-block: 26px; }
.pas ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px clamp(28px, 5vw, 72px); }
.pas li { display: inline-flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 400; letter-spacing: .01em; color: var(--ink); }
.kruh { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%;
        background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-text); }
.kruh .ikona { width: 20px; height: 20px; }
.dlazdice .kruh.velky { width: 64px; height: 64px; margin-bottom: 18px; }
.dlazdice .kruh.velky .ikona { width: 28px; height: 28px; }
.nz { white-space: nowrap; }
.pas + .sekce { padding-top: clamp(48px, 6vw, 88px); }

/* --- ikony u praktických informací --- */
.ikona { width: 18px; height: 18px; flex: none; }
.ikona-nadpis { width: 22px; height: 22px; color: var(--accent-text); margin-right: 10px; vertical-align: -3px; }
.detaily dt { display: inline-flex; align-items: center; gap: 10px; }
.detaily dt .ikona { color: var(--accent-text); }
.telefon .kruh { background: color-mix(in srgb, var(--on-dark) 14%, transparent); color: var(--on-dark); }
.paticka .s-ikonami li { display: flex; align-items: center; gap: 10px; }
.paticka .s-ikonami .ikona { width: 16px; height: 16px; color: var(--on-dark-muted); }

/* --- sekce --- */
.sekce { padding-block: clamp(48px, 6vw, 88px); position: relative; }   /* mezi sekcemi < 200 px (test kostry 2026-10-11: hluchá místa) */
.hlava { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 72px); }
.tmava { background: var(--dark); color: var(--on-dark); }
.tmava .popisek, .tmava .maly { color: var(--on-dark-muted); }
.tmava .nadpis em, .tmava .citat em { color: var(--accent-on-dark); }
.druha { background: var(--paper-2); }

/* rám fotky — tvar dává DNA (--ram) */
.ram { overflow: hidden; border-radius: var(--ram); background: var(--paper-2); }
.ram img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
a:hover .ram img, .dlazdice:hover .ram img { transform: scale(1.04); }

/* --- nabídka: bento --- */
.bento-nabidka { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(210px, auto); gap: 24px; }
.dlazdice { border-radius: var(--r-tile); background: var(--tile); padding: 28px; display: grid; gap: 8px; align-content: end; position: relative; }
.dlazdice.hlavni { grid-column: 1 / 7; grid-row: span 2; padding: 0; background: none; align-content: stretch; grid-template-rows: 1fr auto; gap: 18px; }
.dlazdice.hlavni .ram { min-height: 380px; border-radius: var(--ram-velky); }
.dlazdice.hlavni .popis-hlavni { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.dlazdice.hlavni h3 { font-size: 32px; }
.dlazdice.s-fotkou { padding: 10px 10px 22px; grid-template-rows: 1fr auto; gap: 14px; align-content: stretch; }   /* podklad drží fotku i popisek pohromadě */
.dlazdice.s-fotkou .ram { border-radius: calc(var(--r-tile) - 8px); }
.dlazdice.s-fotkou .text { display: grid; gap: 6px; padding-inline: 12px; }
.dlazdice.s-fotkou .ram { min-height: 200px; }
.dlazdice .radek { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.dlazdice .cislo-polozky { font-family: var(--f-head), serif; font-style: italic; font-size: 72px; line-height: 1; color: var(--accent-text); opacity: .9; margin-bottom: 12px; }
.bento-nabidka > .dlazdice:not(.hlavni) { grid-column: span 3; }
/* úzké dlaždice: název a cena pod sebou (jinak dlouhý název přeteče) */
.bento-nabidka > .dlazdice:not(.hlavni) .radek { flex-direction: column; align-items: flex-start; gap: 2px; }
/* textové dlaždice: obsah od shora; barevné střídání tmavá / akcent nese rytmus nabídky */
.dlazdice.textova { align-content: start; overflow: hidden; }
.dlazdice.textova:nth-of-type(odd) { background: var(--dark); color: var(--on-dark); }
.dlazdice.textova:nth-of-type(even) { background: var(--accent); color: var(--on-accent); }
.dlazdice.textova .maly { color: inherit; opacity: .78; }
.dlazdice.textova .kruh { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
.dlazdice.textova .cislo-polozky { color: inherit; }
.ikona-dekor { position: absolute; right: -28px; bottom: -28px; width: 150px; height: 150px; opacity: .1; stroke-width: 1; pointer-events: none; }
.kava { margin-top: 48px; display: grid; grid-template-columns: auto 1fr; gap: 24px 48px; align-items: baseline;
        border-top: 1px solid var(--line); padding-top: 28px; }
.kava ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 32px; }
.kava li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted var(--line); padding-bottom: 6px; }

/* --- o nás --- */
.onas { overflow-x: clip; }   /* plocha / obrys posunutý za fotkou (DNA) nesmí na telefonu rozšířit stránku */
.onas .grid { align-items: center; }
.onas .foto { grid-column: 1 / 6; position: relative; }
/* O nás: jiný rám než klenba v nabídce — dva stejné rámy po sobě působí jako opakovaný modul */
.onas .foto .ram { aspect-ratio: 4 / 5; border-radius: var(--ram-onas, var(--ram-velky)); position: relative; z-index: 1; }
.onas .foto::before { content: ""; position: absolute; inset: 28px -28px -28px 28px; border: 1px solid var(--accent-on-dark);
                      border-radius: var(--ram-onas, var(--ram-velky)); opacity: .55; pointer-events: none; }
.onas .foto .odznak { z-index: 2; }
.onas .text { grid-column: 7 / -1; display: grid; gap: 28px; }
.citat { font-family: var(--f-head), Georgia, serif; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.15; }
.velke-cislo { display: flex; align-items: baseline; gap: 20px; border-top: 1px solid var(--on-dark-line); padding-top: 24px; }
.velke-cislo .maly { font-size: inherit; }   /* popis čísla velikostí jako odstavec nad ním (Karel, 2026-10-03) */
.velke-cislo b { font-family: var(--f-head), serif; font-weight: 400; font-size: clamp(64px, 7vw, 112px); line-height: .9; }
.odznak { position: absolute; right: -54px; bottom: 48px; width: 136px; height: 136px; color: var(--on-dark); }
.odznak svg { width: 100%; height: 100%; animation: tocit 24s linear infinite; }
.odznak text { font: 400 11.5px var(--f-text), sans-serif; letter-spacing: .28em; text-transform: uppercase; fill: currentColor; }
.odznak .stred { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-head), serif; font-style: italic; font-size: 26px; }
.odznak .znak { width: 44%; height: auto; }
@keyframes tocit { to { transform: rotate(360deg); } }

/* --- běžící pás --- */
.marquee { overflow: hidden; background: var(--accent); color: var(--on-accent); padding-block: 22px; }
.marquee .stopa { display: flex; width: max-content; animation: jet var(--marquee-t) linear infinite; }
.marquee span { font-family: var(--f-head), serif; font-size: clamp(24px, 2.6vw, 38px); white-space: nowrap; padding-inline: 28px; display: inline-flex; align-items: center; gap: 56px; }
.marquee span::after { content: "✦"; font-size: .5em; opacity: .7; }
@keyframes jet { to { transform: translateX(-50%); } }

/* --- praktické info: bento --- */
/* Kontakt: mapa je největší dlaždice; fotka jen volitelně (foto-info), ve výchozím stavu ne —
   v kontaktní sekci návštěvník hledá kde a jak, ne atmosféru (Karel, zkouška 01). */
/* Kontakt kompaktně: mapa je jedna dlaždice z řady, ne dominanta — nese jen polohu (Karel, zkouška 01) */
/* nahoře jak se objednat (telefon + formulář), dole praktické: co vědět, kdy, kde */
.bento-info { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; grid-template-areas:
  "tel tel tel tel frm frm frm frm frm frm frm frm"
  "det det det hod hod hod map map map hvz hvz hvz"; }
.bento-info.bez-hodnoceni { grid-template-areas:
  "tel tel tel tel frm frm frm frm frm frm frm frm"
  "det det det det hod hod hod hod map map map map"; }
/* „Kde nás najdete" → mapa s adresou je první a velká, telefon v řadě pod ní (nadpis = otázka) */
.bento-info.adresa-prvni { grid-template-areas: "map map map map map map map map tel tel tel tel" "frm frm frm frm frm frm frm frm det det det det" "hod hod hod hod hvz hvz hvz hvz det det det det"; }
.bento-info.adresa-prvni.bez-hodnoceni { grid-template-areas: "map map map map map map map map tel tel tel tel" "frm frm frm frm frm frm frm frm hod hod hod hod" "det det det det det det det det hod hod hod hod"; }
.bento-info.adresa-prvni .mapa .pod h3 { font-size: clamp(24px, 2.2vw, 34px); }
.bento-info .hodiny { grid-area: hod; } .bento-info .mapa { grid-area: map; } .bento-info .foto-info { display: none; }
.bento-info .detaily { grid-area: det; } .bento-info .hodnoceni { grid-area: hvz; } .bento-info .telefon { grid-area: tel; }
.bento-info .formular { grid-area: frm; }
.bento-info .dlazdice { align-content: start; gap: 14px; }
.hodiny dl { display: grid; gap: 8px; }
.hodiny dl div, .detaily dl div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px dotted var(--line); padding-bottom: 6px; font-size: 15px; }
.hodiny dt, .detaily dt { color: var(--muted); }
.mapa { padding: 0 !important; overflow: hidden; grid-template-rows: 1fr auto; grid-template-columns: 1fr; }  /* 1fr: jinak sloupec převezme 300 px z iframu */
.mapa img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; display: block; }
/* mapa Google: obal drží velikost dlaždice, iframe ji vyplní absolutně (jinak zůstane 300 × 150) */
.mapa .gmapa-obal { position: relative; min-height: 200px; }
.mapa .gmapa { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.mapa .pod .odkaz { justify-self: start; margin-top: 8px; }
.mapa .pod { padding: 18px 24px 22px; display: grid; gap: 4px; }
.mapa .pod h3 { font-size: 19px; }
.foto-info { padding: 0 !important; overflow: hidden; background: none !important; }
.foto-info .ram { height: 100%; min-height: 200px; border-radius: var(--r-tile); }
.hodnoceni { background: var(--accent) !important; color: var(--on-accent); align-content: space-between !important; overflow: hidden; position: relative; }
.hodnoceni .kruh { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
.hodnoceni .dolni { display: grid; gap: 6px; position: relative; z-index: 1; }
.hodnoceni b { font-family: var(--f-head), serif; font-weight: 400; font-size: 56px; line-height: 1; }
.hodnoceni .maly { color: inherit; opacity: .85; }
.telefon { background: var(--dark) !important; color: var(--on-dark); align-content: space-between !important; overflow: hidden; position: relative; }
.telefon .horni { display: flex; align-items: center; gap: 14px; }
.telefon .horni h3 { font-size: 24px; }
.telefon .dolni { display: grid; gap: 6px; position: relative; z-index: 1; }
.telefon .maly { color: var(--on-dark-muted); }
.telefon .cislo { font-family: var(--f-head), serif; font-size: 28px; text-decoration: none; white-space: nowrap; }
.telefon .mail { font-size: 15px; color: var(--on-dark-muted); text-decoration: none; overflow-wrap: anywhere; }
.telefon .cislo:hover, .telefon .mail:hover { text-decoration: underline; }
.telefon .vyzvy { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 12px; }
.telefon .odkaz { color: var(--on-dark); }
.telefon .maly { color: var(--on-dark-muted); }
.formular { grid-template-columns: 1fr 1.4fr; gap: 32px 48px !important; align-items: start; }
.formular form, .kontakt-formular form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.pole { display: grid; gap: 6px; }
.pole.cele { grid-column: 1 / -1; }
.pole label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pole input, .pole textarea { font: inherit; font-size: 15px; color: var(--ink); background: transparent; border: 0;
       border-bottom: 1px solid var(--ink-2); padding: 10px 2px; border-radius: 0; }
.pole textarea { min-height: 90px; resize: vertical; }
.pole input:focus, .pole textarea:focus { border-bottom-color: var(--accent); }
.formular .odeslat, .kontakt-formular .odeslat { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.formular .stav, .kontakt-formular .stav { font-size: 14px; color: var(--accent-text); max-width: none; }
form .hp { position: absolute; left: -9999px; opacity: 0; }   /* honeypot */
/* místo pro hlášku je rezervované: kdyby se hláška při opravě pole schovala, formulář se
   zkrátí, tlačítko poskočí a klik na „Odeslat" se nepočítá (nalezeno testem) */
.pole .chyba { font-size: 13px; line-height: 1.4; color: #a3261c; min-height: 18px; }
.pole input[aria-invalid], .pole textarea[aria-invalid] { border-bottom-color: #a3261c; }
.pole .navrh { display: block; margin-top: 4px; background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--accent-text); text-decoration: underline; cursor: pointer; }
.telefon-pole { display: flex; gap: 10px; align-items: end; }
.telefon-pole select { font: inherit; font-size: 15px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink-2); padding: 10px 2px; height: 100%; }
.telefon-pole input { flex: 1; min-width: 0; }

/* --- patička: velký moment --- */
.paticka { background: var(--dark); color: var(--on-dark); padding-block: 64px 32px; overflow: hidden; }
.paticka .sloupce { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; }   /* název + popis, odkazy */
.paticka .maly { color: var(--on-dark-muted); }
.paticka h4 { margin: 0 0 16px; font: 400 12px/1 var(--f-text), sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); }
.paticka ul { display: grid; gap: 8px; font-size: 15px; }
.paticka a { text-decoration: none; } .paticka a:hover { text-decoration: underline; }
.obri { font-family: var(--logo-f, var(--f-text)), sans-serif; font-weight: var(--logo-w, 300); font-size: 23vw; line-height: .8; letter-spacing: var(--logo-ls, .12em);
        text-align: center; margin: 72px 0 24px; white-space: nowrap; opacity: .95; }
.pravni { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--on-dark-muted);
          border-top: 1px solid var(--on-dark-line); padding-top: 20px; }

/* --- varianty modulů (linka/PRAVIDLA_STRANKY_DNA.md §4); vybírá je stranka.json --- */
/* nabídka: plakát — názvy položek obřím písmem, jedna velká fotka */
.plakat { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: start; }
.plakat-seznam { grid-column: 1 / 8; margin: 0; padding: 0; list-style: none; }
.plakat-radek { display: grid; grid-template-columns: 52px 1fr auto; column-gap: 20px; row-gap: 4px; align-items: baseline;
                padding: 22px 0 20px; border-top: 2px solid var(--ink); }
.plakat-radek:last-child { border-bottom: 2px solid var(--ink); }
.plakat-radek h3 { font-size: clamp(30px, 4vw, 64px); line-height: 1.2; transition: transform .35s var(--ease), color .35s; }
.plakat-radek .maly { grid-column: 2; }
.plakat-radek .cena { grid-column: 3; grid-row: 1; font-size: clamp(18px, 1.6vw, 26px); }
.plakat-cislo { font-size: 14px; font-weight: 600; letter-spacing: .1em; color: var(--accent-text); }
.plakat-radek:hover h3 { transform: translateX(10px); color: var(--accent-text); }
.plakat-foto { grid-column: 8 / -1; position: sticky; top: 96px; margin: 0; display: grid; gap: 12px; }
.plakat-foto .ram { aspect-ratio: 4 / 5; }

/* pás s čísly — fakta jako typografický úder */
.cisla { padding-block: clamp(48px, 6vw, 88px); border-block: 2px solid var(--ink); }
.cisla ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.cisla li { display: grid; gap: 8px; }
.cisla b { font-family: var(--f-head), serif; font-weight: 400; font-size: clamp(64px, 8vw, 132px); line-height: 1.05; }   /* desetinná čárka „4,8" nesmí do popisku */
.cisla li:first-child b { color: var(--accent-text); }

/* o nás: citát přes celou šířku */
.citat-obri { font-size: clamp(44px, 6.2vw, 108px); line-height: 1.22; max-width: 20ch; margin: 22px 0 clamp(48px, 6vw, 88px); }
.onas-pod { align-items: end; }
.onas-citat .foto { grid-column: 1 / 5; }
.onas-citat .foto .ram { aspect-ratio: 4 / 3; border-radius: var(--ram); }
.onas-citat .text { grid-column: 6 / 9; display: grid; gap: 14px; }   /* sloupec mezera od plochy za fotkou (BOLD) */
.onas-citat .velke-cislo { grid-column: 9 / -1; }

/* kontakt ve dvou sloupcích: obří telefon a údaje × formulář */
.kontakt-udaje { grid-column: 1 / 6; display: grid; align-content: start; gap: 6px; }
.kontakt-formular { grid-column: 7 / -1; display: grid; gap: 10px; align-content: start; }
.kontakt-formular form { margin-top: 18px; }
.cislo-obri { font-family: var(--f-head), serif; font-size: clamp(40px, 4.6vw, 76px); line-height: 1; text-decoration: none; white-space: nowrap; }
a.cislo-obri:hover { color: var(--accent-text); }   /* jen odkaz (telefon), ne adresa */
.kontakt-udaje .mail { text-decoration: none; color: var(--muted); }
.kontakt-blok { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.kontakt-blok .odkaz { justify-self: start; margin-top: 6px; }
.kontakt-blok.hodiny dl { display: grid; gap: 6px; }
.kontakt-detaily { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; font-size: 15px; }
.kontakt-detaily li { display: flex; gap: 10px; align-items: center; }
.kontakt-detaily .ikona { color: var(--accent-text); }

/* o nás: přes hranu (BOLD) — fotka přes pravý okraj, citát vstupuje do fotky na černých štítcích */
.onas-presah { position: relative; overflow: hidden; min-height: 100svh; display: grid; align-items: center; }
.presah-foto { position: absolute; top: clamp(80px, 11vw, 160px); bottom: clamp(80px, 11vw, 160px); left: 50%; right: 0; margin: 0; }
.presah-foto .ram { height: 100%; border-radius: 0; }
.onas-presah .text { grid-column: 1 / 7; position: relative; z-index: 1; display: grid; gap: 28px; }   /* sloupec končí před fotkou; jen citát na štítku do ní vstupuje */
.onas-presah .citat-stitek { width: max-content; max-width: min(15ch, 62vw); }
.citat-stitek { font-size: clamp(44px, 5.8vw, 104px); line-height: 1.22; max-width: 15ch; }
.citat-stitek span { background: var(--ink); color: var(--paper); padding: .02em .14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.onas .citat-stitek em { color: color-mix(in srgb, var(--accent) 45%, #fff); }   /* na černém štítku světlý akcent */
.presah-pod { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: end; max-width: calc(50vw - max(0px, (100vw - 1280px) / 2) - clamp(20px, 5vw, 80px) - 40px); }   /* končí před fotkou */
.onas-presah .velke-cislo { border-top: 4px solid var(--ink); padding-top: 14px; }

/* písmo přes hranu fotky: horní půlka na fotce (světlá), dolní na papíře (tmavá) */
/* titulek leží uvnitř figury u spodní hrany a je posunutý o půl své výšky dolů → dělicí čára = hrana fotky
   vždy, i během animací a paralaxy (dřív samostatný blok: hrana a půlka písma se rozjely) */
.titulek-wrap { position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(50%); z-index: 2; }
.pres-hranu { position: relative; display: block; margin: 0; font-family: var(--f-head), serif; font-weight: 400; line-height: 1.1; }
.pres-hranu > span { display: block; }
.pres-hranu .ph-dole { color: var(--ink); clip-path: inset(50% -1em -1em -1em); }
.pres-hranu .ph-nahore { position: absolute; inset: 0; color: var(--paper); clip-path: inset(-1em -1em 50% -1em);
                         text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.titulek-foto { margin: 0; position: relative; }
.titulek-foto .ram { aspect-ratio: 21 / 9; border-radius: 0; max-height: 78svh; width: 100%; }
.titulek-polozky { font-size: clamp(56px, 9vw, 168px); }
.titulek-pod { display: flex; justify-content: space-between; align-items: baseline; gap: 32px; margin: calc(clamp(56px, 9vw, 168px) * .62) 0 clamp(40px, 5vw, 72px); }   /* místo pro spodní půlku titulku */
.titulek-pod p { font-size: clamp(18px, 1.5vw, 22px); }
.titulek-pod .cena { font-size: clamp(28px, 2.6vw, 44px); }
.plakat-seznam.dva-sloupce { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; margin: 0; padding: 0; list-style: none; }
.plakat-seznam.dva-sloupce .plakat-radek:last-child { border-bottom: 0; }
.plakat-seznam.dva-sloupce .plakat-radek h3 { font-size: clamp(24px, 2.4vw, 40px); }
.nabidka-titulek .kava { margin-top: 48px; }

/* slovo z fotky — písmena vyplněná fotkou, fotka se v nich posouvá se scrollem */
.slovo-z-fotky { overflow: hidden; padding-block: clamp(24px, 4vw, 56px); }
/* obrys písmen vyplněných fotkou — dává tvar čitelný i tam, kde je fotka světlá jako papír (Karel 2026-10-08) */
.slovo { -webkit-text-stroke: clamp(1.5px, .012em, 4px) var(--ink); paint-order: stroke fill; }
.slovo { margin: 0; max-width: none; text-align: center; font-family: var(--f-head), serif; font-size: 25vw; line-height: .95;
         background-size: cover; background-position: 50% 50%; -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .slovo { color: var(--ink); background: none; } }

/* kontakt s telefonem přes hranu fotky místa */
.cislo-pres { display: block; text-decoration: none; color: inherit; }
.titulek-cislo { font-size: clamp(48px, 8.4vw, 156px); white-space: nowrap; }
.cislo-pres:hover .ph-dole { color: var(--accent-text); }
.kontakt-foto .siroky-udaje { margin-top: calc(clamp(48px, 8.4vw, 156px) * .62 + clamp(24px, 3vw, 40px)); }

/* kontakt přes celou šířku */
.siroky-tel { display: grid; gap: 4px; margin-bottom: clamp(32px, 4vw, 56px); }
.siroky-tel .cislo-obri { font-size: clamp(48px, 7.4vw, 132px); }
.siroky-tel .mail { color: var(--muted); text-decoration: none; }
.kontakt-obri-adresa .cislo-obri { white-space: normal; }
.hlava .nadpis-z-fotky { text-align: left; padding-block: .04em; }
body .hlava .nadpis.nadpis-z-fotky.kratky { font-size: clamp(160px, 30vw, 520px); line-height: 1.05; width: auto; }   /* jedno krátké slovo („KAM?") — obří, fotka v písmenech čitelná */
.hlava .nadpis-z-fotky em { color: transparent; }
.siroky-tel .slovo-adresa { display: block; text-align: left; font-size: clamp(72px, 12.5vw, 230px); line-height: 1.1; padding-block: .04em; white-space: normal; }   /* písmena dost tlustá, aby fotka byla čitelná */
.kontakt-obri-adresa .odkaz { justify-self: start; margin-top: 10px; }
.kontakt-blok h3 a { color: inherit; text-decoration: none; }
/* každý telefon na klik reaguje na najetí stejně — soudržnost odkazů (Karel 2026-10-08) */
a[href^="tel:"] { transition: color .2s ease; }
a[href^="tel:"]:hover, a[href^="tel:"]:focus-visible { color: var(--accent-text); }
.tmava a[href^="tel:"]:hover, .paticka a[href^="tel:"]:hover, .telefon a[href^="tel:"]:hover, .menu-mobil a[href^="tel:"]:hover { color: var(--accent-on-dark); }
.siroky-udaje { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.siroky-udaje .kontakt-blok { margin-top: 0; }
.siroky-udaje .kontakt-detaily { grid-template-columns: 1fr; margin-top: 4px; }
.siroky-formular { display: grid; grid-template-columns: 4fr 8fr; gap: 32px; margin-top: clamp(40px, 5vw, 72px); padding-top: 28px; border-top: 2px solid var(--ink); }
.kontakt-formular form { margin-top: 0; }

/* patička: poslední výzva */
.paticka-vyzva .vyzva-obri { display: block; font-family: var(--f-head), serif; font-size: clamp(48px, 8.6vw, 160px); line-height: .9;
                             text-decoration: none; white-space: nowrap; margin: 20px 0 40px; }
.paticka-vyzva .vyzva-obri span { color: var(--accent-on-dark); display: inline-block; transition: transform .35s var(--ease); }
.paticka-vyzva .vyzva-obri:hover span { transform: translateX(14px); }
.paticka-vyzva .popisek { color: var(--on-dark-muted); }
.vyzva-radek { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; margin-bottom: 64px; }
.vyzva-radek ul { display: flex; gap: 28px; }
.paticka-vyzva .tlacitko { background: var(--accent-on-dark); color: var(--dark); }   /* na tmavé i terakotové ploše čitelné */

/* systém nadpisů „obri" (BOLD): obří slovo přes celou šířku okna, bez popisku; sekce ho ořízne.
   Proklad ≥ 1: diakritika nesmí sahat do řádku nad sebou — u řádků stejné barvy to vypadá jako chyba
   (Karel 2026-10-08); těsný proklad jen tam, kde se řádky barevně liší a zalomení je pevné. */
.nadpisy-obri .sekce { overflow-x: clip; }
.nadpisy-obri .hlava .nadpis { font-size: clamp(56px, 9.6vw, 184px); line-height: 1.22; width: calc(100% + (100vw - 100%) / 2 - clamp(20px, 5vw, 80px)); max-width: none; }   /* přes celou šířku okna, slovo se nikdy neusekne */
.nadpisy-obri .hlava { margin-bottom: clamp(32px, 4vw, 64px); }

/* manifest — jedna věta o podniku obřím písmem */
.manifest { padding-block: clamp(56px, 7vw, 104px); }
.manifest-veta { font-family: var(--f-head), serif; font-size: clamp(44px, 6.8vw, 124px); line-height: 1.22; max-width: 16ch; }
.manifest-dalsi { margin-top: clamp(24px, 3vw, 40px); font-size: clamp(18px, 1.5vw, 22px); max-width: 30em; color: var(--muted); }

/* nabídka: dělená obrazovka od okraje k okraji — fotka drží při scrollu */
.nabidka-deleny { padding-bottom: 0; }
.deleny { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.deleny-foto { margin: 0; min-height: 100svh; }   /* přes celou výšku sekce — pod fotkou nesmí zůstat prázdno */
.deleny-foto .ram { height: 100%; border-radius: 0; }
.deleny-obsah { padding: 0 calc(max(0px, (100vw - 1280px) / 2) + clamp(20px, 5vw, 80px)) clamp(80px, 10vw, 140px) clamp(20px, 5vw, 80px); }   /* pravá hrana na mřížce stránky */
.deleny .plakat-radek h3 { font-size: clamp(24px, 2.3vw, 40px); }   /* o stupeň pod nadpisem sekce */
.kava-sloupec { grid-template-columns: 1fr; margin-top: 40px; border-top: 0; padding-top: 0; }   /* pod silnou linkou seznamu ne druhá linka */
.deleny-obsah .hlava { margin-top: clamp(8px, 2vw, 32px); }
.deleny-obsah .hlava .nadpis { font-size: clamp(44px, 5.2vw, 96px); width: auto; }   /* nadpis v polovině vedle fotky */
/* fotka sekce nesmí doléhat na hero (Karel 2026-10-08) — běžné horní odsazení sekce zůstává */
.onas-pas .cisla-pas { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-self: end; }
.cisla-pas li { display: grid; gap: 6px; }
.cisla-pas b { font-family: var(--f-head), serif; font-weight: 400; font-size: clamp(40px, 4.4vw, 76px); line-height: 1.05; }
.cisla-pas .maly { color: var(--on-dark-muted); }
.kava-sloupec ul { grid-template-columns: 1fr 1fr; }

/* o nás: fotka přes celou šířku, citát přes ni; spodek ztmavený kvůli čitelnosti */
.fotka-pres { position: relative; margin: 0; min-height: 92svh; display: grid; align-items: end; overflow: hidden; color: #fff; }
.fotka-pres .ram { position: absolute; inset: 0; border-radius: 0; }
.fotka-pres::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(10, 8, 6, .82) 100%); }
.fotka-pres .wrap { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(48px, 6vw, 88px); }
.fotka-pres .popisek { color: rgba(255, 255, 255, .8); }
.fotka-pres .citat-obri { margin-bottom: 0; color: #fff; }
.fotka-pres .citat em { color: color-mix(in srgb, var(--accent) 45%, #fff); }   /* přes fotku vždy světlý — nezávisle na barvě tmavých sekcí */
.onas-pas { padding-block: clamp(48px, 6vw, 88px); }
.onas-pas .text { grid-column: 1 / 7; display: grid; gap: 12px; }
.onas-pas .velke-cislo { grid-column: 8 / -1; align-self: end; }

/* o nás: kruh — fotka jako talíř přes pravý okraj, text po oblouku (jazyk hera BOLD) */
.onas-kruh { overflow: hidden; min-height: 92svh; display: grid; align-items: center; }
.onas-kruh .text { grid-column: 1 / 7; display: grid; gap: 22px; position: relative; z-index: 1; }
.velke-cislo.nad { flex-direction: column; align-items: flex-start; gap: 6px; }
.onas-kruh { min-height: 100svh; }
.onas-kruh .citat { font-size: clamp(44px, 5.6vw, 100px); }   /* vrchol stránky pod herem */
.kruh-foto { position: absolute; right: calc(max(0px, (100vw - 1280px) / 2) + clamp(20px, 5vw, 80px)); top: 50%; transform: translateY(-50%); width: min(46vw, 820px); aspect-ratio: 1; margin: 0; }   /* celý v okně — useknutý text po oblouku je artefakt */
.kruh-foto .ram { position: absolute; inset: 7%; border-radius: 50%; }
.kruh-text { position: absolute; inset: 0; width: 100%; height: 100%; animation: tocit 60s linear infinite; }
.kruh-text text { font: 600 7.2px var(--f-text), sans-serif; letter-spacing: .32em; text-transform: uppercase; fill: currentColor; }

/* předěl: šikmý střih horní hrany (BOLD) — sekce s vlastním pozadím přesahuje do předchozí */
.predel-sikmy { --sikmo: 5vw; clip-path: polygon(0 var(--sikmo), 100% 0, 100% 100%, 0 100%); margin-top: calc(-1 * var(--sikmo));
                padding-top: calc(var(--sikmo) + clamp(80px, 11vw, 160px)); z-index: 1; }

/* --- animace: jen když běží JS a uživatel nechce omezit pohyb; bez nich je stránka úplná --- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .js [data-anim] { opacity: 0; transform: translateY(var(--anim-dist)); transition: opacity var(--anim-t) var(--ease), transform var(--anim-t) var(--ease);
                    transition-delay: calc(var(--i, 0) * var(--anim-stagger)); }
  .js [data-anim].je-uvnitr { opacity: 1; transform: none; }
  /* nástup celého hera podle DNA — záloha; hlavní WOW je animace prvku uvnitř hera, kterou určí koncept
     (PIPELINE „Animace hera"). Scéna, vrstva nadpisu i klikací plochy mají vždy stejný nástup, aby seděly. */
  .js .hero-scena, .js .hero-plochy, .js .hero-nadpis { animation: var(--hero-nastup, usadit 2.8s var(--ease) both); transform-origin: 40% 60%; }
  /* rozmazaná výplň krajů (ultrawide) naskočí až po nástupu — jinak je při odkrývání vidět pod scénou */
  .js .hero-fit::before { animation: objevit .4s ease 1.8s both; }
  .dna-bold      { --hero-nastup: nastup-strih 1.1s cubic-bezier(.7, 0, .2, 1) both; }
  .dna-editorial { --hero-nastup: nastup-stranka 1.6s cubic-bezier(.65, 0, .35, 1) both; }
  .dna-clean     { --hero-nastup: nastup-svetlo 2.2s ease both; }
  .dna-signature { --hero-nastup: nastup-zaostrit 2.4s cubic-bezier(.19, 1, .22, 1) both; }
  .dna-organic   { --hero-nastup: nastup-oblouk 2s cubic-bezier(.22, .61, .36, 1) both; }
  .dna-playful   { --hero-nastup: nastup-poskok 1.3s cubic-bezier(.34, 1.56, .64, 1) both; }
  /* hero s nadpisem jako vrstvou: scéna a plochy stojí, animuje se jen nadpis */
  .js .ma-nadpis .hero-scena, .js .ma-nadpis .hero-plochy { animation: none; }
  .js .nadpis-radek img { animation: nadpis-vyjet 1.1s cubic-bezier(.7, 0, .2, 1) both; animation-delay: calc(.35s + var(--r) * .16s); }
  .js .hero-logo, .js .hero-nav a, .js .hero-nav span, .js .hero-menu, .js .hero-cta { animation: vyjet .9s var(--ease) both; animation-delay: calc(.6s + var(--i, 0) * .08s); }
  .js .hero-cta { animation-delay: 1.3s; }
  [data-parallax] img { will-change: transform; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee .stopa, .odznak svg, .kruh-text { animation: none; }
  [data-parallax] img { transform: none !important; }
}
/* --- pohyby zapínané ze stranka.json "pohyb" (body[data-pohyb]); jen bez omezení pohybu ---
   Scroll-driven animace v CSS (animation-timeline); kde je prohlížeč nemá, prvek zůstane
   v klidové podobě — stránka je úplná i bez nich (SABLONA §6, DESIGN_REFERENCE §11). */
.obri { max-width: none; width: 100%; }   /* <p> nesmí mít šířku odstavce — název se pak vystrčil doprava */
.obri span { display: inline-block; }
.obri span:last-child { letter-spacing: 0; }
@media (prefers-reduced-motion: no-preference) {
  /* hero se při scrollu přibližuje — kamera najíždí; klikací plochy se zvětšují s ním */
  @supports (animation-timeline: scroll()) {
    [data-pohyb~="hero-pribliz"] .hero-desktop .hero-scena,
    [data-pohyb~="hero-pribliz"] .hero-desktop .hero-plochy,
    [data-pohyb~="hero-pribliz"] .hero-desktop .hero-nadpis {
      animation: var(--hero-nastup, usadit 2.8s var(--ease) both), pribliz linear both; animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100svh; }
    /* hero s nadpisem jako vrstvou: při načtení stojí, při scrollu se přibližuje celé i s nadpisem */
    [data-pohyb~="hero-pribliz"] .ma-nadpis .hero-scena, [data-pohyb~="hero-pribliz"] .ma-nadpis .hero-plochy,
    [data-pohyb~="hero-pribliz"] .ma-nadpis .hero-nadpis { animation: pribliz linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
    /* slovo z fotky: fotka se v písmenech posouvá se scrollem */
    .slovo { animation: slovo-posun linear both; animation-timeline: view(); }
    /* fotka o nás najíždí přes hranu zprava */
    [data-pohyb~="foto-pres-hranu"] .presah-foto { animation: pres-hranu linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    /* písmena obřího názvu v patičce vyjíždějí zespodu, po sobě */
    [data-pohyb~="pismena-paticka"] .obri { overflow: hidden; }
    [data-pohyb~="pismena-paticka"] .obri span { animation: pismeno-vyjet linear both; animation-timeline: view();
      animation-range: entry calc(var(--p) * 6%) cover calc(30% + var(--p) * 6%); }
  }
  /* obří nadpisy se odkrývají po řádcích zespodu (řádky rozdělí sablona.js) */
  [data-pohyb~="nadpisy-odkryti"] .radek-maska { display: block; overflow: hidden; padding-block: .06em; margin-block: -.06em; }
  [data-pohyb~="nadpisy-odkryti"] .radek-maska > span { display: block; transform: translateY(105%); transition: transform .7s var(--ease); transition-delay: calc(var(--r) * .09s); }
  [data-pohyb~="nadpisy-odkryti"] .je-uvnitr .radek-maska > span { transform: none; }
  /* štítky citátu se „tisknou" zleva doprava, řádek po řádku */
  [data-pohyb~="stitky-tisk"] .citat-stitek span { background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 0 / 0% 100%;
    color: transparent; transition: background-size .9s var(--ease) .15s, color .3s ease .8s; }
  [data-pohyb~="stitky-tisk"] .citat-stitek.je-uvnitr span { background-size: 100% 100%; color: var(--paper); }
  [data-pohyb~="stitky-tisk"] .citat-stitek em { transition: color .3s ease .8s; }
  [data-pohyb~="stitky-tisk"] .citat-stitek:not(.je-uvnitr) em { color: transparent; }
}
/* nabídka: výměna fotky při najetí na položku — prostřih zleva (clip-path) */
.deleny-foto .ram { position: relative; }
.deleny-foto .vymena { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 100% 0 0);
                       transition: clip-path .55s var(--ease); }
.deleny-foto .vymena.je-videt { clip-path: inset(0 0 0 0); }
.plakat-radek[data-foto] { cursor: pointer; }
.plakat-radek[data-foto]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@keyframes nadpis-vyjet { from { transform: translateY(105%); } to { transform: none; } }
@keyframes slovo-posun { from { background-position: 50% 0%; } to { background-position: 50% 100%; } }
@keyframes pribliz { from { scale: 1; } to { scale: 1.14; } }
@keyframes pres-hranu { from { translate: 22% 0; } to { translate: 0 0; } }
@keyframes pismeno-vyjet { from { translate: 0 105%; } to { translate: 0 0; } }
@keyframes objevit { from { opacity: 0; } to { opacity: 1; } }
@keyframes nastup-strih { from { clip-path: inset(100% 0 0 0); transform: translateY(6%); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes nastup-stranka { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes nastup-svetlo { from { filter: brightness(1.7) saturate(.4); opacity: .2; } to { filter: none; opacity: 1; } }
@keyframes nastup-zaostrit { from { filter: blur(14px); transform: scale(1.04); } to { filter: none; transform: none; } }
@keyframes nastup-oblouk { from { clip-path: ellipse(0% 0% at 50% 100%); } to { clip-path: ellipse(120% 140% at 50% 100%); } }
@keyframes nastup-poskok { from { opacity: 0; transform: translateY(5%) rotate(-1.5deg) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes usadit { from { transform: scale(1.06); } to { transform: none; } }
@keyframes vyjet { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* --- responzivita --- */
@media (max-width: 1024px) {
  .bento-nabidka > .dlazdice:not(.hlavni) { grid-column: span 6; }
  .dlazdice.hlavni { grid-column: 1 / -1; grid-row: auto; }
  .kava { grid-template-columns: 1fr; } .kava ul { grid-template-columns: repeat(2, 1fr); }
  .onas .foto { grid-column: 1 / 6; } .onas .text { grid-column: 6 / -1; }
  .bento-info { grid-template-areas: "tel tel tel tel tel tel tel tel tel tel tel tel" "frm frm frm frm frm frm frm frm frm frm frm frm"
                "det det det det det det hod hod hod hod hod hod" "map map map map map map hvz hvz hvz hvz hvz hvz"; }
  .bento-info.bez-hodnoceni { grid-template-areas: "tel tel tel tel tel tel tel tel tel tel tel tel" "frm frm frm frm frm frm frm frm frm frm frm frm"
                "det det det det det det hod hod hod hod hod hod" "map map map map map map map map map map map map"; }
  .bento-info.adresa-prvni, .bento-info.adresa-prvni.bez-hodnoceni { grid-template-areas: "map map map map map map map map map map map map"
                "tel tel tel tel tel tel tel tel tel tel tel tel" "frm frm frm frm frm frm frm frm frm frm frm frm" "det det det det det det hod hod hod hod hod hod"; }
  .hlavicka nav { display: none; } .hlavicka .tlacitko { margin-left: auto; } .hlavicka-menu { display: block; }
}
@media (max-width: 700px) {
  .hlavicka .wrap { gap: 12px; min-height: 60px; }
  .hlavicka .logo { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hlavicka .logo-obr { height: auto; max-height: 40px; width: auto; }
  .hlavicka .tlacitko { display: none; } .hlavicka-menu { margin-left: auto; }   /* objednání je v menu */
  .grid, .bento-nabidka, .bento-info, .plakat { grid-template-columns: 1fr; }
  .grid > *, .bento-nabidka > .dlazdice:not(.hlavni) { grid-column: 1 / -1 !important; }
  .bento-info { grid-template-areas: "tel" "frm" "det" "hod" "map" "hvz"; }
  .bento-info.adresa-prvni { grid-template-areas: "map" "tel" "frm" "det" "hod" "hvz"; }
  .bento-info.adresa-prvni.bez-hodnoceni { grid-template-areas: "map" "tel" "frm" "det" "hod"; }
  .bento-info.bez-hodnoceni { grid-template-areas: "tel" "frm" "det" "hod" "map"; }
  .kava ul, .formular, .formular form, .kontakt-formular form { grid-template-columns: 1fr; }
  .odznak { right: 12px; bottom: -40px; width: 110px; height: 110px; }
  .onas .text { margin-top: 40px; }   /* odznak přesahuje fotku o 40 px — „O mně" mu nesmí sedět na hraně */
  .paticka .sloupce { grid-template-columns: 1fr; }
  .plakat-seznam, .plakat-foto, .onas-citat .foto, .onas-citat .text, .onas-citat .velke-cislo,
  .kontakt-udaje, .kontakt-formular { grid-column: 1 / -1; }
  .plakat-foto { position: static; grid-row: 1; }
  .deleny { grid-template-columns: 1fr; }
  .plakat-seznam.dva-sloupce { grid-template-columns: 1fr; }
  .titulek-foto .ram { aspect-ratio: 4 / 3; }
  .titulek-pod { flex-direction: column; gap: 8px; }
  .titulek-cislo { white-space: normal; }
  .siroky-udaje, .siroky-formular { grid-template-columns: 1fr; }
  .deleny-foto { position: static; height: 62svh; }
  .deleny-obsah { padding-top: 8px; }
  .kava-sloupec ul { grid-template-columns: 1fr; }
  .onas-pas .text, .onas-pas .velke-cislo, .onas-pas .cisla-pas { grid-column: 1 / -1; }
  .onas-presah { display: block; min-height: 0; }
  .presah-foto { position: relative; inset: auto; height: 62svh; margin: 0 0 36px 12vw; }
  .onas-presah .text { grid-column: 1 / -1; }
  .presah-pod { grid-template-columns: 1fr; max-width: none; }
  .onas-kruh { display: block; padding-bottom: 0; }
  .onas-kruh .text { grid-column: 1 / -1; }
  .kruh-foto { position: relative; right: auto; top: auto; transform: none; width: 92vw; margin: 40px auto 48px; }
  .onas-kruh { padding-bottom: 0; }
  .fotka-pres { min-height: 80svh; }
  .plakat-radek { grid-template-columns: 36px 1fr auto; }
  .kontakt-detaily { grid-template-columns: 1fr; }
  .paticka-vyzva .vyzva-obri { font-size: 11vw; }
  /* provozní pás: sloupce vedle sebe, ikona nad textem — pod sebou to působilo jako
     mechanický seznam (Karel, 2026-10-02; pohyb zamítnut — informace se mají číst hned) */
  .pas { padding-block: 22px; }
  .pas ul { display: grid; grid-template-columns: repeat(var(--sloupce, 3), 1fr); gap: 18px 0; }
  .pas li { flex-direction: column; text-align: center; gap: 10px; font-size: 15px; line-height: 1.3; padding-inline: 6px; }
  .pas li:not(:nth-child(3n+1)) { border-left: 1px solid var(--line); }
  .pas ul[style*="--sloupce:2"] li { border-left: 0; }
  .pas ul[style*="--sloupce:2"] li:nth-child(even) { border-left: 1px solid var(--line); }
  .pas .kruh { width: 40px; height: 40px; }
  /* čitelnost na telefonu: odstavce 18 px, drobný text 17 px, verzálky s prostrkáním
     15–16 px — 12–14 px bylo na menších telefonech nečitelné a 14/16 px pořád na hraně
     (Karel, 2026-10-02); celá škála posunutá, aby zůstal rozdíl mezi úrovněmi;
     16 px v polích formuláře zároveň brání iPhonu přiblížit stránku při psaní */
  body { font-size: 18px; }
  .popisek { font-size: 16px; letter-spacing: .14em; }
  .odkaz, .tlacitko, .pole label, .paticka h4 { font-size: 15px; }
  .maly, .pravni, .pole .chyba, .pole .navrh, .formular .stav, .kontakt-formular .stav { font-size: 17px; }
  .pas li, .hodiny dl div, .detaily dl div, .paticka ul, .telefon .mail,
  .pole input, .pole textarea, .telefon-pole select { font-size: 17px; }
  /* drobné texty v řezu 400: Light (300) v tlumené barvě na telefonu bledne */
  .popisek, .maly, .pravni, .odkaz, .pole label, .paticka h4, .pas li,
  .hodiny dl div, .detaily dl div { font-weight: 400; }
  /* „Dobré vědět": název nad hodnotou — vedle sebe se hodnota v 17 px lámala do úzkého sloupce */
  .detaily dl div { flex-direction: column; justify-content: flex-start; gap: 2px; }
  .detaily dd { text-align: left; padding-left: 30px; }
}

/* ---------- patičky podle DNA (2026-10-09): obří logo jen BOLD; ostatní z vlastního konceptu ---------- */
.pat-logo { font-family: var(--logo-f, var(--f-head)), serif; font-weight: var(--logo-w, 400); letter-spacing: var(--logo-ls, .2em); font-size: 26px; line-height: 1; }
.pat-radek { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px 32px; align-items: center; padding-block: 32px; border-top: 1px solid var(--on-dark-line); }
.pat-radek > :first-child { grid-column: 1 / 4; }
.pat-radek > .maly { grid-column: 4 / 9; margin: 0; }
.pat-radek ul { grid-column: 9 / -1; display: flex; gap: 28px; justify-content: flex-end; }
@media (max-width: 700px) { .pat-radek > :nth-child(n) { grid-column: 1 / -1; justify-content: flex-start; } }
.pat-radek .maly a { color: inherit; }
.pat-stred { width: calc((100% - 11 * 32px) / 12 * 8 + 7 * 32px); margin-inline: auto; }   /* vystředěný blok na 8 sloupcích mřížky */
@media (max-width: 700px) { .pat-stred { width: auto; } }

/* bod dne na časové ose hera (CLEAN, Karel 2026-10-09): krátký text k denní době na čele desky pod bodem
   (bez spojnice a bez hodiny); y = střed čela desky. Verzálky s prostrkáním jako CTA hera — „vyryto v hraně". */
.hero-bod-dne { position: absolute; margin: 0; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font-family: var(--f-text), sans-serif; font-weight: 400; font-size: 17px; line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: var(--hero-ui); }

/* výrazná atmosféra: tlačítko na barevné ploše sytou barvou akcentu z hera (paleta "accent-fill") */
.atm-colorful .paticka-vyzva .tlacitko { background: var(--accent-fill); color: var(--on-accent-fill); }

/* ---------- probarvení všech odkazů po najetí (Karel 2026-10-11, všechny DNA) ----------
   Text i šipka (svg kreslené currentColor) přejdou do akcentu; na tmavých plochách akcent pro tmavé.
   Tlačítka s výplní ztmavnou. Jen barva — žádná změna rozměrů (viz blikání 2026-10-11). */
:root { --hover-barva: var(--accent-text); }
.tmava, .paticka, .sekce.druha.tmava { --hover-barva: var(--accent-on-dark); }
body main a:not(.tlacitko):not(.hero-plocha):hover, body main a:not(.tlacitko):not(.hero-plocha):focus-visible,
body footer a:not(.tlacitko):hover, body footer a:not(.tlacitko):focus-visible,
body .hlavicka nav a:hover, body summary:hover, body summary:focus-visible { color: var(--hover-barva) !important; }
body main a:not(.tlacitko):hover *:not(span[class*="kruh"]), body footer a:not(.tlacitko):hover *, body summary:hover * { color: inherit; }
body a:hover svg, body summary:hover svg, body button:hover svg { color: inherit; }
body .tlacitko { transition: filter .25s ease, background-color .25s ease, color .25s ease; }
body .tlacitko:hover, body .tlacitko:focus-visible { filter: brightness(.86) saturate(1.15); }

/* aktuální sekce v liště: tenká linka pod odkazem v barvě písma — barvou se značí jen najetí,
   aby se všechny odkazy chovaly stejně (Karel 2026-10-11: „Menu“ se probarvovalo jinak) */
body .hlavicka nav a[aria-current] { text-decoration: underline 1px; text-decoration-color: currentColor; text-underline-offset: 8px; }
/* neviditelné vrstvy zvýraznění písma (hero-pismo) nesmí rozšířit stránku na mobilu */
html, body { overflow-x: clip; }