/* Hudebniny Ladička – ukázkový web FORMA. Klaviatura, píšťaly a ladička: černý lak, slonovina kláves, červený filc.
   Písma: Gloock (nadpisy), Golos Text (text), obě SIL OFL, ve složce fonts/. */

@font-face{font-family:"Gloock";src:url(fonts/gloock-latin-ext.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Gloock";src:url(fonts/gloock-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos Text";src:url(fonts/golos-text-latin-ext.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Golos Text";src:url(fonts/golos-text-latin.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --lak:#0d0d0e;--lak-2:#161618;--slon:#f4efe0;--slon-2:#e8e1cb;
  --cerv:#b3171f;--cerv-tm:#8f1017;--cerv-slon:#a5131b;--cerv-sv:#ff6f75;--tlumeny:#b9b4a5;
  --okraj:clamp(20px,4.4vw,72px);
  --kz-h:clamp(84px,15svh,150px);
  --klav-h:clamp(176px,33svh,340px);
  --n:"Gloock","Times New Roman",Georgia,serif;
  --t:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fokus:#f4efe0;
  --cb:.62;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:clamp(17px,calc(15.2px + .3vw),20px);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px;scroll-padding-bottom:28px}
body{margin:0;background:var(--lak);color:var(--slon);font:400 1rem/1.55 var(--t);overflow-x:clip;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:400;margin:0}
p{margin:0 0 .8em}
img,svg{max-width:100%}
a{color:inherit}
::selection{background:var(--cerv);color:var(--slon)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap}
:focus-visible{outline:3px solid var(--fokus);outline-offset:3px}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
.preskocit{position:absolute;left:12px;top:-80px;z-index:100;background:var(--slon);color:var(--lak);padding:12px 18px;font-weight:700;text-decoration:none}
.preskocit:focus{top:12px;--fokus:#0d0d0e}

/* ---------- tlačítka ---------- */
.tl{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:56px;padding:0 28px;border:2px solid transparent;border-radius:0;font:600 1.05rem/1.1 var(--t);text-decoration:none;text-align:center;cursor:pointer;touch-action:manipulation;transition:background-color .17s,color .17s,transform .14s}
.tl b{font-weight:800;white-space:nowrap}
.tl:active{transform:translateY(2px)}
.tl-slon{background:var(--slon);color:var(--lak)}
.tl-slon:hover{background:#fff}
.tl-tmave{background:var(--lak);color:var(--slon)}
.tl-tmave:hover{background:#26262a}
.tl-okraj{border-color:currentColor;color:var(--slon);background:transparent}
.tl-okraj:hover{background:rgba(244,239,224,.12)}
.tl-okraj-t{border-color:var(--lak);color:var(--lak);background:transparent}
.tl-okraj-t:hover{background:rgba(13,13,14,.1)}
.tl-velke{min-height:64px;padding:0 38px;font-size:1.2rem}
.tl-lista{min-height:48px;padding:0 20px}
.odkaz-blok{display:inline-flex;align-items:center;min-height:44px;color:var(--slon);text-underline-offset:4px}
.fake{display:block;font-size:1rem;line-height:1.3;color:var(--tlumeny)}

/* ---------- záhlaví ---------- */
.lista{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;padding:0 var(--okraj);background:var(--lak)}
.znacka{display:inline-flex;align-items:center;min-height:48px;font:400 2.1rem/1 var(--n);letter-spacing:.01em;color:var(--slon);text-decoration:none}
.nav{display:flex;gap:2px;margin-left:auto;margin-right:12px}
.nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;font-weight:500;text-decoration:none;color:var(--slon)}
.nav a:hover{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:2px}

/* ---------- první obrazovka: klaviatura ---------- */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);grid-template-rows:minmax(250px,1fr) auto auto;column-gap:clamp(24px,3.2vw,56px);min-height:calc(100vh - 72px);min-height:calc(100svh - 72px);background:var(--lak);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 28%,rgba(255,255,255,.035) 37%,transparent 46%,transparent 53%,rgba(255,255,255,.05) 61%,transparent 70%)}
.hero-text{grid-area:1/1;align-self:center;position:relative;padding:clamp(14px,2.6vh,36px) 0 clamp(12px,2vh,24px) var(--okraj)}
.h1-male{display:block;font:500 clamp(1.15rem,2vw,1.7rem)/1.2 var(--t);color:var(--tlumeny);margin-bottom:.15em}
.h1-nazev{display:block;font:400 clamp(4.4rem,min(11.6vw,24svh),13rem)/.92 var(--n);letter-spacing:-.012em;color:var(--slon);margin-left:-.03em}
.hero-pod{margin:.7em 0 0;color:var(--tlumeny);font-size:1.1rem}
.hero-akce{grid-area:2/1/3/3;position:relative;display:flex;align-items:center;gap:clamp(20px,3vw,52px);padding:clamp(10px,1.8vh,22px) var(--okraj) clamp(24px,3.6vh,36px)}
.hero-cta{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
.stav{margin:0;min-width:0}
.hero-akce .stav{flex:0 0 34ch;max-width:34ch}
.stav-h{margin:0;font:700 clamp(1.3rem,1.7vw,1.6rem)/1.25 var(--t);min-height:1.25em}
.stav-d{margin:.15em 0 0;color:var(--tlumeny);line-height:1.4;min-height:2.8em;max-width:34ch}
.stav[data-stav="zavreno"] .stav-h{color:var(--cerv-sv)}
.uvod{grid-area:1/2;align-self:end;position:relative;padding:0 var(--okraj) 26px 0;max-width:46rem}
.uvod h2{font:400 clamp(2.2rem,3.8vw,3.7rem)/1.02 var(--n);margin-bottom:.35em}
.uvod p{font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.5;max-width:40ch}
.uvod .uvod-male{font-size:1rem;color:var(--tlumeny);max-width:46ch}
.uvod-js>p:last-child{margin-bottom:0}
.jen-dotyk{display:none}

/* klaviatura: celá šířka, 7 bílých a 5 černých kláves */
.manual-obal{grid-area:3/1/4/3;position:relative;background:var(--lak)}
.manual-lista{position:absolute;right:var(--okraj);bottom:calc(100% + clamp(18px,3vh,30px));z-index:3}
.manual-hint{display:none;margin:0;color:var(--tlumeny)}
.zvuk{min-height:44px;padding:0 16px;border:2px solid var(--tlumeny);background:transparent;color:var(--slon);font-weight:500;border-radius:0}
.zvuk b{font-weight:800}
.zvuk:hover{border-color:var(--slon)}
.zvuk[aria-pressed="false"]{color:var(--tlumeny)}
.manual{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;height:var(--klav-h);margin:0;padding:0;list-style:none;background:#000;border-top:14px solid var(--cerv);box-shadow:inset 0 10px 10px -8px rgba(0,0,0,.75)}
.k{margin:0;padding:0;min-width:0}
.k-b{position:relative;display:block;height:100%}
.k-c{position:absolute;top:0;z-index:2;width:calc((100% - 24px) / 7 * var(--cb));height:62%}
.c1{left:calc((((100% - 24px) / 7) + 4px) * 1 - 2px - (100% - 24px) / 7 * var(--cb) / 2 - (100% - 24px) / 7 * .06)}
.c2{left:calc((((100% - 24px) / 7) + 4px) * 2 - 2px - (100% - 24px) / 7 * var(--cb) / 2 + (100% - 24px) / 7 * .06)}
.c3{left:calc((((100% - 24px) / 7) + 4px) * 4 - 2px - (100% - 24px) / 7 * var(--cb) / 2 - (100% - 24px) / 7 * .07)}
.c4{left:calc((((100% - 24px) / 7) + 4px) * 5 - 2px - (100% - 24px) / 7 * var(--cb) / 2)}
.c5{left:calc((((100% - 24px) / 7) + 4px) * 6 - 2px - (100% - 24px) / 7 * var(--cb) / 2 + (100% - 24px) / 7 * .07)}
.klavesa{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;width:100%;height:100%;margin:0;border:0;border-radius:0;text-align:center;-webkit-tap-highlight-color:transparent;transition:transform .14s ease-out,box-shadow .14s ease-out}
.k-nazev{display:block;font-family:var(--n);font-size:clamp(1.15rem,1.9vw,1.75rem);line-height:1.1;padding:0 4px}
.k-b .klavesa{padding:0 2px calc(var(--klav-h) * .1);color:#17160f;--fokus:#0d0d0e;border-radius:0 0 .5rem .5rem;
  background:linear-gradient(180deg,#d6cdb2 0,#f7f1df 5%,#fbf8ee 38%,#f1ead4 84%,#dfd7bd 100%);
  box-shadow:inset 0 -12px 0 #ddd5bb,inset 0 -13px 0 rgba(0,0,0,.14),0 8px 0 #000}
.k-b .klavesa:hover{background:linear-gradient(180deg,#d6cdb2 0,#fbf6e6 5%,#fffdf6 38%,#f5eedb 84%,#e3dbc1 100%)}
.k-c .k-nazev{font-size:clamp(1.05rem,1.42vw,1.4rem)}
@media (max-width:1280px){:root{--cb:.72}}
@media (max-width:1100px){:root{--cb:.76}.k-c .k-nazev{font-size:1rem;letter-spacing:-.012em}}
@media (max-width:980px){:root{--cb:.82}}
@media (max-width:900px){:root{--cb:.9}}
.k-c .klavesa{padding:0 2px 14px;color:var(--slon);border-radius:0 0 .4rem .4rem;
  background:linear-gradient(180deg,#303034 0,#151517 9%,#0b0b0c 86%,#1f1f22 100%);
  box-shadow:inset 0 -9px 0 #1b1b1e,0 0 0 2px #000,0 7px 0 rgba(0,0,0,.7)}
.k-c .klavesa:hover{background:linear-gradient(180deg,#3b3b40 0,#1b1b1e 9%,#101012 86%,#26262a 100%)}
.k-b .klavesa:active,.k-b .klavesa[aria-expanded="true"]{transform:translateY(6px);box-shadow:inset 0 -14px 0 var(--cerv),0 2px 0 #000}
.k-c .klavesa:active,.k-c .klavesa[aria-expanded="true"]{transform:translateY(5px);box-shadow:inset 0 -12px 0 var(--cerv),0 0 0 2px #000,0 2px 0 rgba(0,0,0,.7)}
.k-b .klavesa[aria-expanded="true"] .k-nazev{transform:translateY(-4px)}
.k-b .klavesa:focus-visible{outline:4px solid #0d0d0e;outline-offset:-12px}
.k-c .klavesa:focus-visible{outline:4px solid var(--slon);outline-offset:-7px}

/* karta oddělení: na počítači široký „notový pult“ přes celou šířku nad klávesami */
.pult{grid-area:1/1/2/3;position:relative;min-width:0;margin:0 var(--okraj) clamp(16px,2.6vh,28px)}
.karta{display:none;position:absolute;inset:0;overflow:auto;background:var(--slon);color:var(--lak);--fokus:#0d0d0e;padding:clamp(18px,2.2vw,30px) clamp(22px,2.8vw,40px) clamp(18px,2.2vw,28px);box-shadow:0 22px 50px rgba(0,0,0,.55);overscroll-behavior:contain}
.karta.otevrena{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.66fr);grid-template-rows:auto 1fr;column-gap:clamp(20px,2.6vw,40px);row-gap:.5em;align-content:start}
.karta h3{grid-column:1;grid-row:1;font:400 clamp(2rem,3vw,3rem)/1.02 var(--n);outline:none}
.karta p{margin:0 0 .6em;line-height:1.45}
.karta-zavrit{grid-column:3;grid-row:1;justify-self:end;align-self:start;min-width:48px;min-height:48px;padding:0 16px;border:2px solid var(--lak);background:transparent;color:var(--lak);font-weight:700;border-radius:0}
.karta-zavrit:hover{background:var(--lak);color:var(--slon)}
.karta-v{grid-column:1;grid-row:2;margin:0}
.karta-sv{grid-column:2;grid-row:1/3;padding-top:.4em}
.karta-servis .sv{font-weight:800}
.karta-servis .sv-ne{color:var(--cerv)}
.karta-servis .sv-nic{color:#57524a}
.karta-pozn{color:#2f2b24}
.karta-akce{grid-column:3;grid-row:2;display:flex;flex-direction:column;align-items:stretch;gap:10px}
.karta-akce .tl{min-height:52px;padding:0 16px;font-size:1rem}
@media (min-width:981px){.hero.s-kartou .hero-text,.hero.s-kartou .uvod{visibility:hidden}}
/* notová osnova na kartě: nota stojí nad ťuknutou klávesou a výšku má podle tónu; na nízké obrazovce a telefonu se nekreslí */
.osnova{display:none}
.n0{--x:.0714;--s:-2}.n1{--x:.1343;--s:-2}.n2{--x:.2143;--s:-1}.n3{--x:.2943;--s:-1}.n4{--x:.3571;--s:0}.n5{--x:.5;--s:1}
.n6{--x:.5614;--s:1}.n7{--x:.6429;--s:2}.n8{--x:.7143;--s:2}.n9{--x:.7857;--s:3}.n10{--x:.8671;--s:3}.n11{--x:.9286;--s:4}
@media (min-width:981px) and (min-height:821px){
  .karta.otevrena{grid-template-rows:auto minmax(0,1fr) auto}
  .karta h3{font-size:clamp(2rem,3.2vw,4.4rem)}
  .karta p{font-size:clamp(1rem,1.22vw,1.45rem)}
  .karta.otevrena .osnova{--g:clamp(11px,1.9svh,24px);--l:#c9bf9f;display:block;position:relative;grid-column:1/-1;grid-row:3;height:calc(var(--g) * 4 + 2px);
    margin:calc(var(--g) * 1.6) calc(clamp(22px,2.8vw,40px) * -1) calc(var(--g) * .9);background:repeating-linear-gradient(180deg,var(--l) 0 2px,transparent 2px var(--g))}
  .nota{position:absolute;left:calc(100vw * var(--x) - var(--okraj));bottom:calc(var(--s) * var(--g) / 2 - var(--g) / 2 + 1px);width:calc(var(--g) * 2.1);height:var(--g);margin-left:calc(var(--g) * -1.05)}
  .n0,.n1{background:linear-gradient(var(--l),var(--l)) center/100% 2px no-repeat}
  .nota::before{content:"";position:absolute;left:calc(var(--g) * .36);top:0;width:calc(var(--g) * 1.38);height:var(--g);border-radius:50%;background:var(--cerv);transform:rotate(-20deg)}
  .nota::after{content:"";position:absolute;left:calc(var(--g) * 1.62);bottom:50%;width:2px;height:calc(var(--g) * 3.3);background:var(--cerv)}
  .nota i{position:absolute;right:calc(100% - var(--g) * .3);top:50%;transform:translateY(-50%);font:700 calc(var(--g) * 1.7)/1 var(--t);font-style:normal;color:var(--cerv)}
}

/* ---------- scéna: píšťaly ---------- */
.scena{position:relative;background:var(--lak)}
.podium{position:relative;overflow:hidden;padding:clamp(72px,12vh,140px) var(--okraj) calc(var(--kz-h) + clamp(48px,8vh,96px));background:linear-gradient(180deg,#0d0d0e 0,#121214 100%)}
.zed{position:absolute;inset:0;pointer-events:none}
.rad{position:absolute;left:50%;bottom:0;width:max(100%,1500px);height:100%;transform:translateX(-50%)}
.trubka{position:absolute;bottom:0;display:block;
  background:linear-gradient(90deg,#7f7867 0,#c9c2ac 13%,#f1ebd9 31%,#fffdf5 44%,#ece5d1 60%,#b7b09a 82%,#6f6959 100%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--m)),66% 100%,34% 100%,0 calc(100% - var(--m)))}
.trubka::before{content:"";position:absolute;left:11%;right:11%;bottom:var(--m);height:var(--mh);background:#0b0b0c;border-radius:50% 50% 0 0 / 34% 34% 0 0;box-shadow:0 .28rem 0 rgba(255,253,245,.55)}
.zed::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,13,14,.78) 0,rgba(13,13,14,0) 22%,rgba(13,13,14,0) 78%,rgba(13,13,14,.78) 100%)}
.konzole{position:absolute;left:0;right:0;bottom:0;z-index:2;height:var(--kz-h);border-top:12px solid var(--cerv);
  background:
    linear-gradient(90deg,transparent 28px,#0e0e10 28px 54px,transparent 54px) 0 0/308px 60% repeat-x,
    linear-gradient(90deg,transparent 78px,#0e0e10 78px 104px,transparent 104px) 0 0/308px 60% repeat-x,
    linear-gradient(90deg,transparent 159px,#0e0e10 159px 185px,transparent 185px) 0 0/308px 60% repeat-x,
    linear-gradient(90deg,transparent 207px,#0e0e10 207px 233px,transparent 233px) 0 0/308px 60% repeat-x,
    linear-gradient(90deg,transparent 255px,#0e0e10 255px 281px,transparent 281px) 0 0/308px 60% repeat-x,
    repeating-linear-gradient(90deg,transparent 0 42px,rgba(0,0,0,.55) 42px 44px),
    linear-gradient(180deg,#d4cbb0 0,#f7f2e2 12%,#efe8d2 100%)}
.stitky{position:relative;z-index:3;display:grid;gap:20px;width:min(760px,100%);margin:0 auto;padding:0;list-style:none}
.stitek{background:var(--cerv);color:var(--slon);padding:clamp(22px,3vw,44px) clamp(24px,3.6vw,56px) clamp(26px,3.2vw,48px);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.stitek-slovo{font:400 clamp(4rem,9.4vw,8.6rem)/.9 var(--n);margin:0 0 .14em}
.stitek-veta{margin:0;font:500 clamp(1.2rem,1.9vw,1.85rem)/1.38 var(--t);max-width:27ch}

/* živá scéna: pódium stojí na místě, píšťaly rostou s posouváním */
.scena.zivy{height:calc(100vh * 4);height:calc(100svh * 4)}
.zivy .podium{position:sticky;top:0;height:100vh;height:100svh;padding:0}
.zivy .trubka{will-change:transform}
.zivy .stitky{position:absolute;inset:0 0 var(--kz-h) 0;display:grid;place-items:center;width:auto;gap:0}
.zivy .stitek{grid-area:1/1;width:min(760px,calc(100% - 2 * var(--okraj)));opacity:0;transition:opacity .12s linear}
.zivy .stitek.on{opacity:1}

/* ---------- ceník: červený pás ---------- */
.cenik{background:var(--cerv);color:var(--slon);padding:clamp(56px,10vh,120px) var(--okraj) clamp(56px,9vh,110px)}
.cenik-hlava{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,4vw,64px);align-items:end}
.cenik h2{font:400 clamp(5.4rem,17vw,16rem)/.82 var(--n);margin-left:-.03em}
.cenik-vlozka{margin:0;font:500 clamp(1.25rem,2vw,1.9rem)/1.35 var(--t);max-width:26ch}
.cenik-rady{list-style:none;margin:clamp(40px,7vh,84px) calc(var(--okraj) * -1) 0;padding:0}
.cenik-rady li{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.84fr) minmax(0,.62fr);gap:clamp(12px,3vw,48px);align-items:center;padding:clamp(18px,3vh,32px) var(--okraj)}
.cenik-rady li:nth-child(odd){background:var(--cerv-tm)}
.cenik-rady h3,.cena{font:400 clamp(2.3rem,4.6vw,4.6rem)/1 var(--n)}
.cenik-rady p{margin:0;font-size:clamp(1.1rem,1.4vw,1.35rem);line-height:1.45;max-width:36ch}
.cenik-rady .cena{font:400 clamp(2.3rem,4.6vw,4.6rem)/1 var(--n);white-space:nowrap;text-align:right;max-width:none;font-variant-numeric:tabular-nums}
.cena-od{font-size:.5em}
.cenik-pozn{margin-top:clamp(36px,6vh,72px);background:var(--lak);padding:clamp(24px,3.4vw,52px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(18px,3vw,56px);align-items:start}
.cenik-pozn h3{font:400 clamp(2rem,3.4vw,3.2rem)/1.05 var(--n)}
.cenik-pozn ul{list-style:none;margin:0;padding:0;display:grid;gap:.9em}
.cenik-pozn li{line-height:1.5;max-width:52ch}
.cenik-doba{grid-column:2;margin:0;color:var(--tlumeny)}

/* ---------- obchod: zkouška ---------- */
.obchod{background:var(--lak);padding:clamp(72px,12vh,150px) var(--okraj) clamp(56px,9vh,110px)}
.obchod h2{margin:0 0 clamp(36px,6vh,72px);font:400 clamp(2.4rem,6.2vw,6.4rem)/1.03 var(--n)}
.obchod-1,.obchod-2{display:block}
.obchod-1{color:var(--tlumeny);margin-bottom:.2em}
.obchod-kroky{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px)}
.obchod-kroky li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,28px);align-items:start}
.krok-c{font:400 clamp(5.2rem,9vw,9rem)/.8 var(--n);color:var(--cerv-sv)}
.obchod-kroky h3{font:400 clamp(1.8rem,2.6vw,2.6rem)/1.1 var(--n);margin-bottom:.3em}
.obchod-kroky p{max-width:34ch}
.obchod-kroky .tl{margin-top:.5em}
.obchod-pozn{margin-top:clamp(36px,6vh,72px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,72px);color:var(--tlumeny)}
.obchod-pozn p{margin:0;max-width:44ch;font-size:1.1rem}

/* ---------- půjčovna: tmavý plakát ---------- */
.pujc{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,5vw,88px);align-items:center;background:var(--lak-2);padding:clamp(64px,10vh,120px) var(--okraj)}
.pujc-nad{margin:0 0 .1em;font:400 clamp(2.2rem,4.4vw,4.2rem)/1 var(--n);color:var(--cerv-sv)}
.pujc h2{font:400 clamp(4rem,9.4vw,9rem)/.9 var(--n);margin-left:-.03em}
.pujc-text{margin:1.1em 0 0;max-width:44ch;font-size:1.2rem}
.pujc-tl{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,4vh,40px)}
.pujc-popis{margin:0 0 .5em;font:400 clamp(1.5rem,2.2vw,2.2rem)/1.2 var(--n);color:var(--tlumeny)}
.pujc-pozn{margin:1.2em 0 0;font-size:1rem;color:var(--tlumeny)}
.pujc-seznam{list-style:none;margin:0;padding:0;font:400 clamp(2rem,3.7vw,3.8rem)/1.2 var(--n)}
.pujc-seznam li{display:flex;justify-content:space-between;align-items:baseline;gap:1em}
.pujc-cena{white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- jistoty: tři velké klávesy ---------- */
.jistoty{background:var(--lak);padding:clamp(64px,10vh,120px) 0 0}
.jistoty h2{padding:0 var(--okraj);margin-bottom:clamp(28px,5vh,56px);font:400 clamp(2.6rem,6vw,5.8rem)/1 var(--n);max-width:16ch}
.jistoty-pozn{margin:calc(-.6*clamp(28px,5vh,56px)) 0 clamp(20px,3.6vh,36px);padding:0 var(--okraj);color:var(--pozn,#c9c4b6)}
.jistoty-klavesy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:#000;border-top:14px solid var(--cerv);box-shadow:inset 0 10px 10px -8px rgba(0,0,0,.75)}
.zk{position:relative;color:#17160f;--fokus:#0d0d0e;padding:clamp(28px,5vh,56px) clamp(30px,4.6vw,76px) clamp(36px,6vh,72px);border-radius:0 0 .6rem .6rem;
  background:linear-gradient(180deg,#d6cdb2 0,#f7f1df 3%,#fbf8ee 30%,#f1ead4 90%,#dfd7bd 100%);box-shadow:inset 0 -12px 0 #ddd5bb,inset 0 -13px 0 rgba(0,0,0,.14)}
.zk:not(:last-child)::after{content:"";position:absolute;top:0;right:-3.4vw;z-index:2;width:6.8vw;height:34%;background:linear-gradient(180deg,#303034 0,#151517 9%,#0b0b0c 90%,#1f1f22 100%);border-radius:0 0 .4rem .4rem;box-shadow:0 0 0 2px #000}
.zk-cislo{margin:0 0 .1em;font:400 clamp(4.6rem,10.5vw,10rem)/.9 var(--n);color:var(--cerv-slon);white-space:nowrap}
.zk-j{font-size:.3em;margin-left:.1em;color:#17160f}
.zk h3{font:400 clamp(1.6rem,2.3vw,2.3rem)/1.1 var(--n);margin-bottom:.45em}
.zk p{line-height:1.5}

/* ---------- kdy hrajeme ---------- */
.navsteva{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:start;padding:clamp(72px,12vh,140px) var(--okraj);background:var(--lak)}
.navsteva h2{font:400 clamp(3.6rem,8.4vw,8rem)/.9 var(--n);margin:0 0 .25em -.02em}
.stav-velky .stav-h{font-size:clamp(1.6rem,2.6vw,2.4rem)}
.stav-velky .stav-d{font-size:1.1rem}
.tyden{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;list-style:none;margin:26px 0 14px;padding:0;border-top:12px solid var(--cerv);background:#000}
.tyden li{display:flex;align-items:flex-end;justify-content:center;height:68px;padding-bottom:9px;font:400 1.25rem/1 var(--n);border-radius:0 0 .35rem .35rem}
.tyden .otev{background:linear-gradient(180deg,#d6cdb2 0,#f7f1df 8%,#fbf8ee 50%,#efe8d2 100%);color:#17160f;box-shadow:inset 0 -8px 0 #ddd5bb}
.tyden .zav{background:linear-gradient(180deg,#303034 0,#151517 12%,#0b0b0c 100%);color:var(--slon);box-shadow:inset 0 -8px 0 #1b1b1e}
.tyden .dnes{box-shadow:inset 0 -12px 0 var(--cerv)}
.hodiny{margin:0 0 1em;color:var(--tlumeny)}
.nz{white-space:nowrap}
address{font-style:normal;font-size:1.2rem;line-height:1.5;margin:0 0 1.2em}
.nav-tl{display:flex;flex-wrap:wrap;gap:12px}

/* ladička: deska ze slonoviny místo plánku, komorní a a šest strun */
.ladeni{--fokus:#0d0d0e;background:linear-gradient(180deg,#f7f1df 0,#fbf8ee 34%,#f1ead4 100%);color:#17160f;border-top:12px solid var(--cerv);padding:clamp(22px,3vw,44px)}
.ladeni h3{font:400 clamp(2.4rem,4.4vw,4.4rem)/1 var(--n);margin-bottom:.3em}
.ladeni-text{margin:0;max-width:46ch;font-size:1.1rem}
.vidlice{display:block;width:100%;margin:clamp(14px,2.4vh,26px) 0 clamp(14px,2.4vh,26px);padding:10px 0;border:0;background:transparent;color:#17160f;-webkit-tap-highlight-color:transparent}
.vidlice svg{display:block;width:100%;height:auto;overflow:visible}
.vid{fill:currentColor}
.vid-s{fill:#fff;opacity:.2}
.vlna{fill:none;stroke:var(--cerv);stroke-width:5;opacity:0}
.zub{transform-box:fill-box;transform-origin:0 50%}
.vidlice:hover{color:var(--cerv-tm)}
.struny-h{margin:0 0 8px;font-weight:600}
.struny{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;list-style:none;margin:0;padding:0}
.struna{display:flex;align-items:flex-end;justify-content:center;width:100%;height:72px;padding:0 0 10px;border:0;border-radius:0 0 .35rem .35rem;background:linear-gradient(180deg,#303034 0,#151517 12%,#0b0b0c 100%);box-shadow:inset 0 -8px 0 #1b1b1e;color:var(--slon);font:400 1.5rem/1 var(--n);transition:transform .14s ease-out,box-shadow .14s ease-out}
.struna:hover{background:linear-gradient(180deg,#3b3b40 0,#1b1b1e 12%,#101012 100%)}
.struna:active,.struna.zni{transform:translateY(3px);box-shadow:inset 0 -11px 0 var(--cerv)}
.struna:focus-visible{outline:4px solid var(--fokus);outline-offset:2px}
.ladeni-pata{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-top:14px}
.ladeni-stav{margin:0;font-weight:600;min-height:1.55em}
.zvuk-t{border-color:#17160f;color:#17160f}
.zvuk-t:hover{border-color:var(--cerv)}
.zvuk-t[aria-pressed="false"]{color:#57524a}

/* ---------- konec ---------- */
.konec{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,88px);align-items:center;padding:clamp(72px,12vh,140px) var(--okraj);background:var(--cerv);color:var(--slon)}
.konec h2{font:400 clamp(3rem,6.6vw,6.2rem)/.95 var(--n);margin-bottom:.15em}
.konec-cislo{display:block;padding:0;border:0;background:none;font:400 clamp(3.2rem,8.4vw,8.4rem)/1.05 var(--n);color:var(--slon);text-align:left;white-space:nowrap;margin:.05em 0 .05em -.02em}
.konec-cislo:hover{text-decoration:underline;text-decoration-thickness:.05em;text-underline-offset:.12em}
.konec .fake{color:var(--slon);margin-bottom:1em}
.konec-levy p{max-width:36ch;font-size:1.25rem}
.konec-form{background:var(--lak);padding:clamp(22px,3vw,44px);scroll-margin-top:20px}
.konec-form h3{font:400 clamp(1.8rem,2.6vw,2.4rem)/1.1 var(--n);margin-bottom:.6em}
.pole{margin:0 0 14px}
.pole label{display:block;margin-bottom:6px;font-weight:600}
.pole input,.pole textarea{width:100%;min-height:52px;padding:12px 14px;border:2px solid var(--slon);border-radius:0;background:var(--slon);color:var(--lak);font-size:1.05rem}
.pole textarea{min-height:120px;resize:vertical}
.pole input:focus-visible,.pole textarea:focus-visible{outline:3px solid var(--cerv-sv);outline-offset:2px}
.pole-past{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.odpoved{margin:16px 0 0;padding:14px 16px;background:var(--slon);color:var(--lak);font-weight:600;outline:none}
.odpoved[hidden]{display:none}

/* ---------- patička ---------- */
.paticka{background:var(--lak);padding:44px var(--okraj) 64px;color:var(--tlumeny)}
.paticka p{margin:0 0 .5em;max-width:72ch}
.pat-znacka{font:400 1.5rem/1.2 var(--n);color:var(--slon)}
.pat-koncept{color:var(--slon-2)}

/* ---------- vysvětlení ukázky ---------- */
.pop{max-width:min(27rem,calc(100vw - 2rem));max-height:calc(100dvh - 1rem);overflow-y:auto;padding:1.4rem 1.4rem 1.5rem;border:0;border-top:12px solid var(--cerv);color:var(--lak);background:var(--slon);--fokus:#0d0d0e}
.pop::backdrop{background:rgba(13,13,14,.72)}
.pop h2{font:400 clamp(1.7rem,6vw,2.1rem)/1.1 var(--n);margin:0 0 .6rem}
.pop p{margin:0 0 1.2rem}
.pop .tl{width:100%}
/* náhrada bez popover (Safari < 17): okno a ztmavení přepíná is-open; bez :popover-open, aby starý prohlížeč pravidlo nezahodil */
.pop-fb{display:none;position:fixed;top:50%;left:50%;z-index:100;width:27rem;max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem);overflow:auto;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.pop-fb.is-open{display:block}
.pop-shade{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:99;background:rgba(13,13,14,.72)}
.pop-shade.is-open{display:block}

/* ---------- tablet a telefon ---------- */
@media (max-width:980px){
  .hero{display:flex;flex-direction:column;min-height:0}
  .hero-text,.uvod{align-self:stretch}
  .hero-text{padding:16px var(--okraj) 0}
  .h1-nazev{font-size:clamp(4.4rem,21vw,8.4rem)}
  .hero-akce{flex-direction:column;align-items:stretch;gap:10px;padding:12px var(--okraj) 4px}
  .hero-akce .stav{flex:0 0 auto;max-width:none}
  .tl-velke{width:100%;min-height:58px}
  .hero-text{order:1}.hero-akce{order:2}.manual-obal{order:3}.pult{order:4}.uvod{order:5}
  .uvod{padding:30px var(--okraj) 34px}
  .manual-lista{position:static;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:0 var(--okraj) 10px}
  .manual-hint{display:block}
  .uvod{max-width:none;padding:18px var(--okraj) 20px}
  .pult{position:relative;margin:0 var(--okraj)}
  .karta{position:relative;margin:18px 0 20px;overflow:visible}
  .karta.otevrena{display:flex;flex-direction:column}
  .karta.otevrena>*{flex:0 0 auto}
  .karta-sv{display:contents}
  .karta-servis{order:1}.karta-v{order:2}.karta-pozn{order:3}.karta-akce{order:4}
  .karta h3{margin:0 5.5rem .3em 0}
  .karta-zavrit{position:absolute;top:10px;right:10px}
  .karta-akce{flex-direction:row;flex-wrap:wrap;margin-top:.9em}
  .manual-obal{margin-top:0}
  .nav a{padding:0 10px}
  .cenik-hlava,.cenik-pozn,.obchod-kroky,.obchod-pozn,.navsteva,.konec,.pujc{grid-template-columns:1fr}
  .cenik-doba{grid-column:1}
  .cenik-rady li{grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:baseline}
  .cenik-rady p{grid-column:1/3;grid-row:2}
  .cenik-rady .cena{grid-column:2;grid-row:1}
  .jistoty-klavesy{grid-template-columns:1fr}
  .zk:not(:last-child)::after{display:none}
  .zk{border-radius:0}
}
@media (max-width:760px){
  .nav{display:none}
  html{scroll-padding-top:76px}
  .lista{position:fixed;top:0;left:0;right:0;z-index:70;height:60px;box-shadow:0 8px 20px rgba(0,0,0,.6);transform:translateY(-100%);visibility:hidden;transition:transform .22s ease-out,visibility 0s linear .22s}
  html.lista-vidi .lista{transform:none;visibility:visible;transition:transform .22s ease-out,visibility 0s}
  .znacka{font-size:1.9rem}
  .hero-text{padding-top:22px}
  .hero-text{order:1}.hero-akce{order:2}.manual-obal{order:3}.uvod{order:4}.pult{order:5}
  .h1-nazev{font-size:clamp(4.4rem,24.6vw,8.4rem)}
  .hero-pod{margin-top:.6em}
  .stav-d{min-height:1.4em}
  .manual-lista{padding-bottom:12px}
  /* svislá klaviatura: klávesy jsou vodorovné pruhy pod sebou, černé kratší a po pravé straně */
  .manual{display:flex;flex-direction:column;gap:3px;height:auto;margin:0 var(--okraj) 0 var(--okraj);border-top:0;border-right:16px solid var(--cerv);box-shadow:none;overflow:hidden}
  .k-b{height:64px}
  .k-c{position:relative;left:auto!important;top:auto;width:56%;height:44px;margin:-23.5px 0 -23.5px auto;z-index:2}
  .k-b .klavesa{flex-direction:row;justify-content:flex-start;align-items:center;padding:0 0 0 16px;border-radius:0 .5rem .5rem 0;
    background:linear-gradient(90deg,#d6cdb2 0,#f7f1df 4%,#fbf8ee 40%,#f1ead4 88%,#dfd7bd 100%);
    box-shadow:inset -12px 0 0 #ddd5bb,inset -13px 0 0 rgba(0,0,0,.14)}
  .k-c .klavesa{flex-direction:row;justify-content:center;align-items:center;padding:0 14px;border-radius:.4rem 0 0 .4rem;
    background:linear-gradient(90deg,#303034 0,#151517 5%,#0b0b0c 88%,#1f1f22 100%);
    box-shadow:inset -9px 0 0 #1b1b1e,0 0 0 2px #000}
  .k-b .klavesa:active,.k-b .klavesa[aria-expanded="true"]{transform:translateX(6px);box-shadow:inset -14px 0 0 var(--cerv)}
  .k-c .klavesa:active,.k-c .klavesa[aria-expanded="true"]{transform:translateX(5px);box-shadow:inset -12px 0 0 var(--cerv),0 0 0 2px #000}
  .k-b .klavesa[aria-expanded="true"] .k-nazev{transform:none}
  .k-nazev{font-size:1.35rem}
  .k-c .k-nazev{font-size:1.25rem}
  .k-b .klavesa:focus-visible{outline-offset:-10px}
  /* karta jako spodní list */
  .karta{position:fixed;inset:auto 0 0 0;z-index:60;margin:0;overflow:auto;max-height:min(74vh,560px);max-height:min(74svh,560px);padding:20px var(--okraj) 0;box-shadow:0 -18px 44px rgba(0,0,0,.65)}
  .karta h3{font-size:2.3rem;margin-right:5.2rem}
  .karta-akce{position:sticky;bottom:0;display:grid;gap:8px;margin:.5em calc(var(--okraj) * -1) 0;padding:12px var(--okraj) calc(14px + env(safe-area-inset-bottom));background:var(--slon);box-shadow:0 -12px 14px -12px rgba(0,0,0,.25)}
  .karta-akce .tl{min-height:48px;width:100%}
  html.list-otevren body{padding-bottom:min(74svh,560px)}
  html.list-otevren{scroll-padding-bottom:calc(min(74svh,560px) + 16px)}
  .stitek-veta{max-width:none}
  .cenik h2{font-size:clamp(5.2rem,26vw,9rem)}
  .cenik-rady .cena,.cenik-rady h3{font-size:2rem}
  .konec-cislo{font-size:clamp(3rem,13.4vw,5.6rem)}
  .tyden li{height:60px;font-size:1.15rem}
  .zk{padding:30px var(--okraj) 38px}
  .ladeni{padding-inline:16px}
  .struna{height:64px}
}
@media (min-width:981px) and (max-height:820px){
  .karta{padding:16px 28px 14px}
  .karta.otevrena{row-gap:.3em}
  .karta h3{font-size:clamp(1.8rem,2.3vw,2.3rem)}
  .karta p{line-height:1.36;margin-bottom:.4em}
  .karta-zavrit{min-width:44px;min-height:44px;padding:0 12px}
  .karta-akce{gap:6px}
  .karta-akce .tl{min-height:46px}
  .uvod .uvod-male{display:none}
  .uvod{padding-bottom:18px}
  .hero-akce{padding-bottom:clamp(16px,3vh,28px)}
}
@media (min-width:981px) and (max-height:720px){
  :root{--klav-h:clamp(150px,29svh,340px)}
}
@media (min-width:981px) and (max-width:1100px){.karta.otevrena{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.84fr)}}
@media (max-width:400px),(min-width:761px) and (max-width:900px){.tl-cislo{display:none}}
@media (max-width:350px){.struny{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (hover:none){.jen-mys{display:none}.jen-dotyk{display:block}}
@media (prefers-reduced-motion:no-preference){
  @media (max-width:760px){.karta.otevrena{animation:vyjed .24s ease-out}}
  .vidlice.zni .zub-h{animation:chvej-h 1.9s linear both}
  .vidlice.zni .zub-d{animation:chvej-d 1.9s linear both}
  .vidlice.zni .v1{animation:vlna 1.5s ease-out both}
  .vidlice.zni .v2{animation:vlna 1.5s ease-out .14s both}
  .vidlice.zni .v3{animation:vlna 1.5s ease-out .28s both}
}
@keyframes vyjed{from{transform:translateY(36px);opacity:0}to{transform:none;opacity:1}}
@keyframes vlna{0%{opacity:0;transform:translateX(-14px)}18%{opacity:1}100%{opacity:0;transform:translateX(16px)}}
@keyframes chvej-h{0.0%{transform:rotate(-0.750deg)}3.8%{transform:rotate(0.721deg)}7.7%{transform:rotate(-0.692deg)}11.5%{transform:rotate(0.663deg)}15.4%{transform:rotate(-0.635deg)}19.2%{transform:rotate(0.606deg)}23.1%{transform:rotate(-0.577deg)}26.9%{transform:rotate(0.548deg)}30.8%{transform:rotate(-0.519deg)}34.6%{transform:rotate(0.490deg)}38.5%{transform:rotate(-0.462deg)}42.3%{transform:rotate(0.433deg)}46.2%{transform:rotate(-0.404deg)}50.0%{transform:rotate(0.375deg)}53.8%{transform:rotate(-0.346deg)}57.7%{transform:rotate(0.317deg)}61.5%{transform:rotate(-0.288deg)}65.4%{transform:rotate(0.260deg)}69.2%{transform:rotate(-0.231deg)}73.1%{transform:rotate(0.202deg)}76.9%{transform:rotate(-0.173deg)}80.8%{transform:rotate(0.144deg)}84.6%{transform:rotate(-0.115deg)}88.5%{transform:rotate(0.087deg)}92.3%{transform:rotate(-0.058deg)}96.2%{transform:rotate(0.029deg)}100.0%{transform:rotate(-0.000deg)}}
@keyframes chvej-d{0.0%{transform:rotate(0.750deg)}3.8%{transform:rotate(-0.721deg)}7.7%{transform:rotate(0.692deg)}11.5%{transform:rotate(-0.663deg)}15.4%{transform:rotate(0.635deg)}19.2%{transform:rotate(-0.606deg)}23.1%{transform:rotate(0.577deg)}26.9%{transform:rotate(-0.548deg)}30.8%{transform:rotate(0.519deg)}34.6%{transform:rotate(-0.490deg)}38.5%{transform:rotate(0.462deg)}42.3%{transform:rotate(-0.433deg)}46.2%{transform:rotate(0.404deg)}50.0%{transform:rotate(-0.375deg)}53.8%{transform:rotate(0.346deg)}57.7%{transform:rotate(-0.317deg)}61.5%{transform:rotate(0.288deg)}65.4%{transform:rotate(-0.260deg)}69.2%{transform:rotate(0.231deg)}73.1%{transform:rotate(-0.202deg)}76.9%{transform:rotate(0.173deg)}80.8%{transform:rotate(-0.144deg)}84.6%{transform:rotate(0.115deg)}88.5%{transform:rotate(-0.087deg)}92.3%{transform:rotate(0.058deg)}96.2%{transform:rotate(-0.029deg)}100.0%{transform:rotate(0.000deg)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .vidlice.zni .v1{opacity:1}
}

/* ---------- rozměry píšťal ve stěně ---------- */
.t0{left:0.0000%;width:2.7742%;height:78.00%;--m:23.72%;--mh:6.67%}
.t1{left:3.2258%;width:2.7742%;height:82.45%;--m:22.70%;--mh:6.47%}
.t2{left:6.4516%;width:2.7742%;height:86.78%;--m:21.88%;--mh:6.30%}
.t3{left:9.6774%;width:2.7742%;height:91.01%;--m:21.20%;--mh:6.15%}
.t4{left:12.9032%;width:2.7742%;height:95.11%;--m:20.64%;--mh:6.03%}
.t5{left:16.1290%;width:2.7742%;height:99.08%;--m:20.16%;--mh:5.92%}
.t6{left:19.3548%;width:2.7742%;height:102.91%;--m:19.76%;--mh:5.83%}
.t7{left:22.5806%;width:2.7742%;height:106.60%;--m:19.42%;--mh:5.75%}
.t8{left:25.8065%;width:2.7742%;height:110.13%;--m:19.15%;--mh:5.69%}
.t9{left:29.0323%;width:2.7742%;height:113.49%;--m:18.93%;--mh:5.64%}
.t10{left:32.2581%;width:2.7742%;height:116.65%;--m:18.76%;--mh:5.60%}
.t11{left:35.4839%;width:2.7742%;height:119.60%;--m:18.64%;--mh:5.57%}
.t12{left:38.7097%;width:2.7742%;height:122.31%;--m:18.57%;--mh:5.56%}
.t13{left:41.9355%;width:2.7742%;height:124.71%;--m:18.55%;--mh:5.56%}
.t14{left:45.1613%;width:2.7742%;height:126.71%;--m:18.60%;--mh:5.58%}
.t15{left:48.3871%;width:2.7742%;height:128.00%;--m:18.75%;--mh:5.62%}
.t16{left:51.6129%;width:2.7742%;height:126.71%;--m:18.60%;--mh:5.58%}
.t17{left:54.8387%;width:2.7742%;height:124.71%;--m:18.55%;--mh:5.56%}
.t18{left:58.0645%;width:2.7742%;height:122.31%;--m:18.57%;--mh:5.56%}
.t19{left:61.2903%;width:2.7742%;height:119.60%;--m:18.64%;--mh:5.57%}
.t20{left:64.5161%;width:2.7742%;height:116.65%;--m:18.76%;--mh:5.60%}
.t21{left:67.7419%;width:2.7742%;height:113.49%;--m:18.93%;--mh:5.64%}
.t22{left:70.9677%;width:2.7742%;height:110.13%;--m:19.15%;--mh:5.69%}
.t23{left:74.1935%;width:2.7742%;height:106.60%;--m:19.42%;--mh:5.75%}
.t24{left:77.4194%;width:2.7742%;height:102.91%;--m:19.76%;--mh:5.83%}
.t25{left:80.6452%;width:2.7742%;height:99.08%;--m:20.16%;--mh:5.92%}
.t26{left:83.8710%;width:2.7742%;height:95.11%;--m:20.64%;--mh:6.03%}
.t27{left:87.0968%;width:2.7742%;height:91.01%;--m:21.20%;--mh:6.15%}
.t28{left:90.3226%;width:2.7742%;height:86.78%;--m:21.88%;--mh:6.30%}
.t29{left:93.5484%;width:2.7742%;height:82.45%;--m:22.70%;--mh:6.47%}
.t30{left:96.7742%;width:2.7742%;height:78.00%;--m:23.72%;--mh:6.67%}
/* FORMA-POLISH (generuje vizitka/tools/ukazky-polish.py) */
:where(html){scrollbar-color:#f4efe0 #0d0d0e}
:where(input,textarea){caret-color:#f4efe0}
:where(a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible){outline:3px solid #f4efe0;outline-offset:3px}
:where(a){text-underline-offset:.2em}
:where(table,dd,time,data,[class*=cen],[class*=price],[class*=hod],[class*=hours],[class*=doba],[class*=kc]){font-variant-numeric:tabular-nums}
/* /FORMA-POLISH */