/* Okno projektu (12. 11. 2026, claude): po kliknutí na projekt sa namiesto bielej karty na boku otvorí okno cez celú
   obrazovku. Informácie nesie živá scéna, ktorá je pri každom projekte iná; spoločné je len ovládanie a čitateľná karta
   s textom (stojí, aj keď sa scéna hýbe). Farby len z premenných v :root index.html, písma z pisma/, najmenší text 14 px. */
.okno { position: fixed; inset: 0; z-index: 40; color: var(--svetla); background: radial-gradient(ellipse 75% 70% at 50% 45%, color-mix(in srgb, var(--bridlica) 42%, var(--noc)) 0%, var(--noc) 72%) var(--noc); opacity: 0; transition: opacity .35s ease, background-color .4s ease; }
.okno[hidden], .okno [hidden] { display: none !important; }
.okno.zap { opacity: 1; }
.okno-otvorene .hore, .okno-otvorene .menu, .okno-otvorene .ovladace, .okno-otvorene .navrh { visibility: hidden; }
.ok-scena { position: absolute; inset: 0; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
.ok-scena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ok-scena svg { position: absolute; display: block; overflow: visible; }

/* hlavička */
.ok-hlava { position: absolute; z-index: 3; left: var(--okraj); right: var(--okraj); top: 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; pointer-events: none; }
.ok-hlava > * { pointer-events: auto; }
.ok-titul { min-width: 0; max-width: 560px; }
.ok-pil { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--svetla) 22%, transparent); background: color-mix(in srgb, var(--noc) 70%, transparent); font-size: 14px; text-decoration: none; transition: background-color .15s, transform .12s; }
.ok-pil:active { transform: scale(.97); }
.ok-pil.hl { background: var(--ruzova); border-color: var(--ruzova); color: var(--cierna); }
.ok-typ { display: block; margin-top: 16px; font: 400 14px "M", monospace; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--svetla) 62%, var(--bridlica2)); }
.ok-titul h2 { margin: 6px 0 6px; font: 800 clamp(32px, 3.6vw, 50px)/1.02 "D", sans-serif; letter-spacing: -.02em; }
.ok-titul p { margin: 0; font-size: 16px; line-height: 1.5; color: color-mix(in srgb, var(--svetla) 78%, var(--bridlica2)); max-width: 480px; }
.ok-titul .ok-model { margin-top: 14px; }
.ok-tl { display: flex; gap: 6px; }
.ok-tl button { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--svetla) 22%, transparent); background: color-mix(in srgb, var(--noc) 70%, transparent); font: 14px "M", monospace; transition: background-color .15s, transform .12s; }
.ok-tl button:active { transform: scale(.94); }
.ok-tl button[aria-pressed="true"] { color: var(--ruzova); border-color: var(--ruzova); }
.ok-tl svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* karta s textom kapitoly: miesto určuje scéna (vpravo, vľavo, dole) */
.ok-karta { position: absolute; z-index: 3; width: min(440px, calc(100vw - 2 * var(--okraj))); max-height: calc(100vh - 290px); max-height: calc(100dvh - 290px); overflow: auto; overscroll-behavior: contain; padding: 18px 20px 20px; border-radius: 16px; background: color-mix(in srgb, var(--cierna) 88%, transparent); border: 1px solid color-mix(in srgb, var(--svetla) 14%, transparent); box-shadow: 0 30px 70px color-mix(in srgb, var(--cierna) 60%, transparent); transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.okno[data-miesto="vpravo"] .ok-karta { right: var(--okraj); top: 50%; transform: translateY(-46%); }
.okno[data-miesto="vlavo"] .ok-karta { left: var(--okraj); top: 52%; transform: translateY(-40%); }
.okno[data-miesto="dole"] .ok-karta { left: 50%; bottom: 92px; width: min(760px, calc(100vw - 2 * var(--okraj))); max-height: 34vh; transform: translateX(-50%); }
.okno[data-miesto="vlavo-dole"] .ok-karta { left: var(--okraj); bottom: 92px; max-height: 46vh; }
.ok-karta.zmena { opacity: 0; }
.ok-k-hl { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ok-k-hl span { font: 400 14px "M", monospace; color: var(--ruzova); }
.ok-k-hl h3 { margin: 0; flex: 1; min-width: 0; font: 400 14px "M", monospace; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--svetla) 70%, var(--bridlica2)); }
.ok-strany { display: flex; align-items: center; gap: 4px; font: 14px "M", monospace; color: color-mix(in srgb, var(--svetla) 70%, var(--bridlica2)); }
.ok-strany button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--svetla) 20%, transparent); display: grid; place-items: center; }
.ok-strany button:disabled { opacity: .35; cursor: default; }
.ok-karta p { margin: 0 0 10px; font-size: 16px; line-height: 1.6; }
.ok-karta p.ok-pozn { font-size: 14px; color: color-mix(in srgb, var(--svetla) 66%, var(--bridlica2)); }
.ok-karta figure { margin: 0; }
.ok-karta img, .ok-karta video { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--svetla) 12%, transparent); background: var(--noc); }
.ok-karta figure.vyska img, .ok-karta figure.vyska video { width: auto; max-width: 100%; max-height: 52vh; margin: 0 auto; }
.ok-karta figcaption { margin-top: 8px; font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--svetla) 72%, var(--bridlica2)); }
.ok-karta figcaption b { display: block; font: 800 16px "D", sans-serif; color: var(--svetla); margin-bottom: 2px; }
.ok-cipy { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ok-cipy span { font: 14px "M", monospace; padding: 5px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--svetla) 18%, transparent); }
.ok-karta a.ok-odkaz, .ok-karta button.ok-odkaz { display: inline-flex; margin-top: 4px; font-size: 15px; color: var(--svetla); text-decoration: underline; text-decoration-color: var(--ruzova); text-underline-offset: 5px; }
.ok-karta .schema { margin: 4px 0 10px; }
.ok-karta .ok-stav { display: grid; gap: 8px; margin: 4px 0 12px; padding: 0; list-style: none; }
.ok-karta .ok-stav li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; font-size: 15px; line-height: 1.5; }
.ok-karta .ok-stav li::before { content: "○"; color: color-mix(in srgb, var(--svetla) 50%, var(--bridlica2)); font: 15px "M", monospace; }
.ok-karta .ok-stav li.hotove::before { content: "●"; color: var(--ruzova); }
.ok-karta .ok-kroky { counter-reset: k; display: grid; gap: 6px; margin: 2px 0 14px; padding: 0; list-style: none; }
.ok-karta .ok-kroky li { counter-increment: k; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 15px; line-height: 1.45; color: color-mix(in srgb, var(--svetla) 70%, var(--bridlica2)); }
.ok-karta .ok-kroky li::before { content: counter(k); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 12px "M", monospace; border: 1.5px solid color-mix(in srgb, var(--svetla) 35%, transparent); }
.ok-karta .ok-kroky li.h { color: var(--svetla); }
.ok-karta .ok-kroky li.h::before { content: "✓"; background: var(--svetla); color: var(--cierna); border-color: var(--svetla); }
.ok-karta .ok-kroky li.r { color: var(--svetla); }
.ok-karta .ok-kroky li.r::before { border-color: var(--ruzova); color: var(--ruzova); }
.ok-karta .ok-kroky em { font-style: normal; color: var(--ruzova); font-size: 14px; }
.ok-karta .ok-stav2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ok-karta .ok-stav2 h4 { margin: 0 0 6px; font: 14px "M", monospace; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--svetla) 60%, var(--bridlica2)); }
@media (max-width: 520px) { .ok-karta .ok-stav2 { grid-template-columns: 1fr; gap: 4px; } }
.ok-karta .ok-krok { display: inline-block; margin-bottom: 10px; font: 14px "M", monospace; padding: 4px 9px; border-radius: 7px; background: color-mix(in srgb, var(--ruzova) 18%, transparent); color: var(--svetla); }

/* kapitoly a ďalší projekt dole */
.ok-dole { position: absolute; z-index: 3; left: var(--okraj); right: var(--okraj); bottom: 20px; display: flex; justify-content: space-between; align-items: center; gap: 14px; pointer-events: none; }
.ok-dole > * { pointer-events: auto; }
.ok-kapitoly { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: color-mix(in srgb, var(--noc) 78%, transparent); border: 1px solid color-mix(in srgb, var(--svetla) 12%, transparent); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.ok-kapitoly::-webkit-scrollbar { display: none; }
.ok-kapitoly button { flex: none; height: 38px; padding: 0 14px; border-radius: 999px; font-size: 14px; white-space: nowrap; color: color-mix(in srgb, var(--svetla) 80%, var(--bridlica2)); transition: background-color .15s, color .15s; }
.ok-kapitoly button b { font: 400 14px "M", monospace; color: color-mix(in srgb, var(--svetla) 50%, var(--bridlica2)); margin-right: 7px; }
.ok-kapitoly button[aria-current="true"] { background: var(--svetla); color: var(--cierna); }
.ok-kapitoly button[aria-current="true"] b { color: var(--ruzova); }
.ok-dalsi { display: flex; align-items: center; gap: 10px; flex: none; font: 14px "M", monospace; color: color-mix(in srgb, var(--svetla) 66%, var(--bridlica2)); }
@media (hover: hover) and (pointer: fine) {
  .ok-pil:hover, .ok-tl button:hover, .ok-strany button:not(:disabled):hover { background-color: color-mix(in srgb, var(--svetla) 10%, transparent); }
  .ok-pil.hl:hover { background-color: color-mix(in srgb, var(--ruzova) 86%, var(--svetla)); }
  .ok-kapitoly button:not([aria-current="true"]):hover { background-color: color-mix(in srgb, var(--svetla) 10%, transparent); }
}

/* kapitola Kto na tom robí: okno sa zprůhlední a ukáže dielňu s tabuľou a postavičkami, karta je tam, kde býval list */
.okno.dielna { background: transparent; pointer-events: none; }
.okno.dielna .ok-scena { opacity: 0; }
.okno.dielna .ok-hlava, .okno.dielna .ok-karta, .okno.dielna .ok-dole { pointer-events: auto; }
.okno.dielna .ok-hlava { pointer-events: none; }
.okno.dielna .ok-titul p, .okno.dielna .ok-titul .ok-model { display: none; }
.okno.dielna .ok-titul h2 { font-size: clamp(26px, 2.6vw, 36px); }
.okno.dielna[data-miesto] .ok-karta { right: 12px; left: auto; top: 12px; bottom: 12px; width: min(460px, calc(100vw - 24px)); max-height: none; transform: none; }
.okno.dielna .ok-hlava .ok-tl { margin-right: min(472px, calc(100vw - 12px)); }
.okno .ok-scena { transition: opacity .4s ease; }

/* scény: spoločné drobnosti */
.sc-stitok { position: absolute; left: 0; top: 0; white-space: nowrap; font: 400 14px "M", monospace; letter-spacing: .04em; color: var(--svetla); pointer-events: none; padding: 3px 8px; border-radius: 7px; background: color-mix(in srgb, var(--cierna) 82%, transparent); }
.sc-stitok b { color: var(--ruzova); font-weight: 400; margin-left: 6px; }
.sc-zdroj { position: absolute; font: 400 14px "M", monospace; color: color-mix(in srgb, var(--svetla) 58%, var(--bridlica2)); }

/* BydliHub: maketa 3D */
.sc-maketa { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 62% 42%; }
.sc-doska { position: absolute; left: 62%; top: 58%; width: 760px; height: 500px; margin: -250px 0 0 -380px; transform-style: preserve-3d; }
.sc-plocha { position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(135deg, var(--papier), color-mix(in srgb, var(--papier) 82%, var(--bridlica2))); box-shadow: 0 40px 80px color-mix(in srgb, var(--cierna) 60%, transparent); }
.sc-plocha::before { content: ""; position: absolute; inset: 18px; border-radius: 12px; background-image: linear-gradient(color-mix(in srgb, var(--bridlica2) 22%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--bridlica2) 22%, transparent) 1px, transparent 1px); background-size: 40px 40px; }
.sc-stlpec { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; transform-style: preserve-3d; }
.sc-stlpec i { position: absolute; display: block; backface-visibility: hidden; }
.sc-stlpec .v { inset: 0; background: color-mix(in srgb, var(--bridlica) 70%, var(--svetla)); }
.sc-stlpec .s1, .sc-stlpec .s2, .sc-stlpec .s3, .sc-stlpec .s4 { left: 0; top: 0; width: 26px; height: var(--h); transform-origin: 0 0; background: var(--bridlica); }
.sc-stlpec .s1 { transform: translateY(26px) rotateX(-90deg); background: color-mix(in srgb, var(--bridlica) 84%, var(--cierna)); }
.sc-stlpec .s2 { transform: rotateX(-90deg) translateZ(0); }
.sc-stlpec .s3 { transform: translateX(26px) rotateZ(90deg) rotateX(-90deg); background: color-mix(in srgb, var(--bridlica) 70%, var(--cierna)); }
.sc-stlpec .s4 { transform: rotateZ(90deg) rotateX(-90deg); }
.sc-stlpec.hl .v { background: var(--ruzova); }
.sc-stlpec.hl .s1, .sc-stlpec.hl .s3 { background: color-mix(in srgb, var(--ruzova) 70%, var(--cierna)); }
.sc-spendlik { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.sc-spendlik i { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 14px "D", sans-serif; color: var(--cierna); background: var(--ruzova); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ruzova) 25%, transparent); font-style: normal; }
.sc-billboard { position: absolute; left: 60px; top: 40px; width: 300px; height: 188px; transform-origin: 50% 100%; border-radius: 10px; overflow: hidden; border: 4px solid var(--cierna); background: var(--noc); box-shadow: 0 20px 40px color-mix(in srgb, var(--cierna) 50%, transparent); }
.sc-billboard img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Správa: pás kontroly */
.sc-pas { position: absolute; inset: 0; }
.sc-pas .pas { position: absolute; left: 4%; right: calc(var(--okraj) + 480px); height: 64px; border-radius: 32px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--bridlica) 85%, var(--cierna)) 0 22px, var(--bridlica) 22px 44px); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--svetla) 10%, transparent); }
.sc-pas .pas.ide { animation: pas 1.4s linear infinite; }
@keyframes pas { to { background-position: 44px 0; } }
.sc-pas .brana { position: absolute; width: 150px; margin-left: -75px; border-radius: 14px 14px 6px 6px; border: 2px solid color-mix(in srgb, var(--svetla) 30%, transparent); background: color-mix(in srgb, var(--cierna) 70%, transparent); text-align: center; padding-top: 10px; font: 400 14px "M", monospace; letter-spacing: .1em; text-transform: uppercase; }
.sc-pas .luc { position: absolute; left: 10px; right: 10px; height: 3px; border-radius: 2px; background: var(--ruzova); box-shadow: 0 0 14px var(--ruzova); }
.sc-pas .sanka { position: absolute; font: 400 14px "M", monospace; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--svetla) 62%, var(--bridlica2)); }
.sc-inz { position: absolute; left: 0; top: 0; width: 220px; padding: 10px 12px; border-radius: 10px; background: var(--papier); color: var(--cierna); box-shadow: 0 14px 30px color-mix(in srgb, var(--cierna) 45%, transparent); font-size: 14px; line-height: 1.35; will-change: transform; }
.sc-inz b { display: block; font: 800 15px "D", sans-serif; margin-bottom: 3px; }
.sc-inz small { display: block; font: 400 14px "M", monospace; color: var(--bridlica); }
.sc-inz em { position: absolute; right: 8px; top: -11px; font: 400 14px "M", monospace; font-style: normal; padding: 1px 7px; border-radius: 6px; background: var(--cierna); color: var(--svetla); }
.sc-inz.kapitola { background: var(--svetla); box-shadow: 0 0 0 2px var(--ruzova), 0 14px 30px color-mix(in srgb, var(--cierna) 45%, transparent); cursor: pointer; pointer-events: auto; }
.sc-inz.kapitola.vybrana { box-shadow: 0 0 0 3px var(--ruzova), 0 0 30px color-mix(in srgb, var(--ruzova) 55%, transparent); }
.sc-inz .peciatka { position: absolute; right: 10px; bottom: 8px; font: 800 14px "D", sans-serif; color: var(--ruzova); border: 2px solid var(--ruzova); border-radius: 6px; padding: 0 6px; transform: rotate(-8deg); opacity: 0; }
.sc-inz.preslo .peciatka { opacity: 1; }
.sc-inz.vratene { box-shadow: 0 0 0 2px var(--bridlica2), 0 14px 30px color-mix(in srgb, var(--cierna) 45%, transparent); }

/* mobil: scéna hore, karta pod ňou, kapitoly dole */
/* Ponuka a reklama: hárok A4 vyjde zo štrbiny, reklamy sa rozložia do vejára */
.sc-tlac { position: absolute; inset: 0; perspective: 1400px; }
.sc-tlac .skupina { position: absolute; transform-style: preserve-3d; }
.sc-tlac .sterbina { position: absolute; left: -10px; top: 0; height: 14px; border-radius: 7px; background: var(--cierna); box-shadow: 0 0 0 1px color-mix(in srgb, var(--svetla) 18%, transparent), 0 10px 20px rgba(0,0,0,.45); z-index: 2; }
.sc-tlac .vystup { position: absolute; left: 0; top: 7px; overflow: hidden; }
.sc-tlac .list-a4 { position: absolute; left: 10px; top: 0; margin: 0; transition: filter .3s; }
.sc-tlac .list-a4 img { width: 100%; display: block; border-radius: 3px; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.sc-tlac figcaption { opacity: 0; transition: opacity .3s; margin-top: 8px; font: 14px "M", monospace; color: color-mix(in srgb, var(--svetla) 78%, var(--bridlica2)); white-space: nowrap; }
.sc-tlac .vybrany figcaption { opacity: 1; }
.sc-tlac .peciatka { position: absolute; left: 6%; top: 34%; padding: 6px 10px; border: 2px solid var(--ruzova); border-radius: 6px; color: var(--ruzova); background: color-mix(in srgb, var(--noc) 78%, transparent); font: 14px "M", monospace; letter-spacing: .05em; opacity: 0; transform: rotate(7deg) scale(1.4); transition: opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1); }
.sc-tlac .peciatka.zap { opacity: 1; transform: rotate(7deg) scale(1); }
.sc-tlac .rek { position: absolute; left: 0; top: 0; margin: 0; transition: filter .3s; }
.sc-tlac .rek img { width: 100%; display: block; border-radius: 8px; box-shadow: 0 16px 34px rgba(0,0,0,.5); border: 1px solid color-mix(in srgb, var(--svetla) 14%, transparent); }
.sc-tlac .tlmene { filter: brightness(.5) saturate(.7); }
@media (prefers-reduced-motion: reduce) { .sc-tlac .peciatka, .sc-tlac .rek, .sc-tlac .list-a4 { transition: none; } }
@media (max-width: 760px) {
  .sc-pas .pas { right: 4%; }
  .ok-hlava { top: 12px; }
  .ok-titul h2 { font-size: 30px; }
  .ok-titul p { display: none; }
  .ok-typ { margin-top: 12px; }
  /* scéna je medzi nadpisom (výšku nadpisu zmeria okno.js do --ok-hore) a kartou dole */
  .ok-hlava .ok-tl { position: absolute; right: 0; top: 0; }
  .ok-titul { max-width: none; }
  .ok-scena { top: var(--ok-hore, 130px); height: auto; bottom: calc(44vh + 10px); bottom: calc(44dvh + 10px); }
  .okno[data-miesto] .ok-karta { left: 8px; right: 8px; top: auto; bottom: 74px; width: auto; max-height: calc(44vh - 70px); max-height: calc(44dvh - 70px); transform: none; }
  .ok-dole { left: 8px; right: 8px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  .ok-dalsi { display: none; }
  .okno.dielna[data-miesto] .ok-karta { left: 8px; right: 8px; top: auto; bottom: 74px; width: auto; max-height: 64vh; }
  .okno.dielna .ok-hlava .ok-tl { margin-right: 0; }
}
/* Bez 3D: okno bez scény, všetky kapitoly pod sebou ako text */
.okno.text .ok-scena { display: none; }
.okno.text .ok-titul .ok-model { display: inline-flex; }



@media (prefers-reduced-motion: reduce) { .okno, .ok-karta, .ok-scena { transition: none !important; } .sc-pas .pas.ide { animation: none !important; } }
.pokoj .sc-pas .pas.ide { animation-play-state: paused !important; }

/* Pokojný detail projektu (13. 11. 2026, Iskor: „prerob to do pokojného štýlu a to bude vidno ako prvotné“): všetky kapitoly pod sebou
   ako vecný článok v troch farbách úvodu (papier, čierna, ružová; v tmavom režime naopak), bez scény. Kapitoly dole posúvajú k sekcii.
   Tlačidlo v hlavičke prepne na animované okno so scénou. Bez 3D používa ten istý vzhľad. */
.okno.text { --t: var(--cierna); --t-bg: var(--papier); --t-tlm: color-mix(in srgb, var(--cierna) 70%, var(--papier)); --t-ram: color-mix(in srgb, var(--cierna) 12%, transparent); background: var(--t-bg); color: var(--t); color-scheme: light; }
@media (prefers-color-scheme: dark) { .okno.text { --t: var(--papier); --t-bg: var(--cierna); --t-tlm: color-mix(in srgb, var(--papier) 70%, var(--cierna)); --t-ram: color-mix(in srgb, var(--papier) 13%, transparent); color-scheme: dark; } }
/* článok je cez celú plochu: hlavička a lišta kapitol musia byť nad ním, inak by ich tlačidlá nešli stlačiť */
.okno.text .ok-hlava, .okno.text .ok-dole { z-index: 4; }
.okno.text .ok-hlava { left: 0; right: 0; top: 0; padding: 16px var(--okraj) 18px; background: color-mix(in srgb, var(--t-bg) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--t-ram); }
.okno.text .ok-titul { max-width: 760px; }
.okno.text .ok-titul h2 { color: var(--t); font-size: clamp(30px, 3vw, 42px); }
.okno.text .ok-typ, .okno.text .ok-titul p { color: var(--t-tlm); }
.okno.text .ok-pil, .okno.text .ok-tl button { color: var(--t); background: transparent; border-color: var(--t-ram); }
.okno.text .ok-pil.hl { background: var(--ruzova); border-color: var(--ruzova); color: var(--cierna); }
.okno.text .ok-tl button[aria-pressed="true"] { color: var(--ruzova); border-color: var(--ruzova); }
.okno.text[data-miesto] .ok-karta { inset: 0; width: auto; max-height: none; transform: none; border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: calc(var(--ok-hore, 200px) + 32px) max(var(--okraj), calc((100% - 760px) / 2)) 130px; scroll-behavior: auto; }
.okno.text .ok-karta section { margin: 0; padding: 30px 0 26px; border-top: 1px solid var(--t-ram); }
.okno.text .ok-karta section:first-child { border-top: 0; padding-top: 0; }
.okno.text .ok-k-hl h3 { color: var(--t-tlm); }
.okno.text .ok-karta p { color: var(--t); font-size: 17px; line-height: 1.65; max-width: 68ch; }
.okno.text .ok-karta p.ok-pozn { color: var(--t-tlm); font-size: 15px; }
.okno.text .ok-karta figure { margin: 0 0 22px; }
.okno.text .ok-karta img, .okno.text .ok-karta video { border-color: var(--t-ram); background: var(--t-bg); }
.okno.text .ok-karta figcaption { color: var(--t-tlm); }
.okno.text .ok-karta figcaption b { color: var(--t); }
.okno.text .ok-cipy span { border-color: var(--t-ram); color: var(--t); }
.okno.text .ok-karta a.ok-odkaz, .okno.text .ok-karta button.ok-odkaz { color: var(--t); }
.okno.text .ok-karta .ok-krok { color: var(--t); }
.okno.text .ok-karta .ok-kroky li { color: var(--t-tlm); }
.okno.text .ok-karta .ok-kroky li.h, .okno.text .ok-karta .ok-kroky li.r { color: var(--t); }
.okno.text .ok-karta .ok-kroky li::before { border-color: var(--t-ram); }
.okno.text .ok-karta .ok-kroky li.h::before { background: var(--t); color: var(--t-bg); border-color: var(--t); }
.okno.text .ok-karta .ok-stav li::before { color: var(--t-tlm); }
.okno.text .ok-karta .ok-stav li.hotove::before { color: var(--ruzova); }
.okno.text .ok-karta .ok-stav2 h4 { color: var(--t-tlm); }
.okno.text .ok-kapitoly { background: color-mix(in srgb, var(--t-bg) 94%, transparent); border-color: var(--t-ram); }
.okno.text .ok-kapitoly button, .okno.text .ok-kapitoly button b { color: var(--t-tlm); }
.okno.text .ok-kapitoly button[aria-current="true"] { background: var(--t); color: var(--t-bg); }
.okno.text .ok-kapitoly button[aria-current="true"] b { color: var(--ruzova); }
.okno.text .ok-dalsi { color: var(--t-tlm); }
@media (hover: hover) and (pointer: fine) {
  .okno.text .ok-pil:hover, .okno.text .ok-tl button:hover { background-color: color-mix(in srgb, var(--t) 6%, transparent); }
  .okno.text .ok-kapitoly button:not([aria-current="true"]):hover { background-color: color-mix(in srgb, var(--t) 6%, transparent); }
}
/* viac obrázkov alebo videí v kapitole: dve stĺpce na počítači, nadpis a texty cez celú šírku */
.okno.text .ok-karta section.ok-mriezka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; align-items: start; }
.okno.text .ok-karta section.ok-mriezka > :not(figure) { grid-column: 1 / -1; }
.okno.text .ok-karta section.ok-mriezka > figure.vyska img { max-height: 520px; }
@media (max-width: 760px) { .okno.text .ok-karta section.ok-mriezka { grid-template-columns: 1fr; } }
/* zbalená hlavička pri posúvaní článku dole: zmizne typ, krátky popis a tlačidlo 3D siete, názov sa zmenší a ostane v jednom riadku
   s tlačidlom späť; hore sa hlavička zase roztiahne. Prechod krátky (0,22 s), pri obmedzenom pohybe bez animácie. */
.okno.text .ok-hlava { transition: padding .22s ease, box-shadow .22s ease; }
.okno.text .ok-typ, .okno.text .ok-titul p, .okno.text .ok-titul .ok-model { max-height: 140px; overflow: hidden; transition: opacity .18s ease, max-height .22s ease, margin .22s ease; }
.okno.text .ok-titul h2 { transition: font-size .22s ease, margin .22s ease; }
.okno.text.zbalena .ok-hlava { padding-top: 10px; padding-bottom: 10px; box-shadow: 0 10px 24px -18px rgba(0,0,0,.35); }
.okno.text.zbalena .ok-typ, .okno.text.zbalena .ok-titul p, .okno.text.zbalena .ok-titul .ok-model { opacity: 0; max-height: 0; margin: 0; pointer-events: none; }
/* v zbalenej lište je späť a názov v jednom riadku; skrytý typ, popis a 3D tlačidlo idú do vlastných riadkov s nulovou výškou,
   aby nezaberali šírku (inak sa názov skrátil na „Bydl…“) */
.okno.text.zbalena .ok-titul { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; min-width: 0; }
.okno.text.zbalena .ok-titul > * { grid-column: 1 / -1; }
.okno.text.zbalena #okSpat { grid-column: 1; grid-row: 1; }
.okno.text.zbalena .ok-titul h2 { grid-column: 2; grid-row: 1; font-size: 22px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.okno.text.zbalena .ok-hlava .ok-tl { align-self: center; }
@media (max-width: 760px) {
  .okno.text.zbalena .ok-titul { display: block; }
  .okno.text.zbalena .ok-titul h2 { font-size: 19px; margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .okno.text .ok-hlava, .okno.text .ok-titul > * { transition: none !important; } }
/* meranie hlavičky v okno.js (zmerajHlavu): na chvíľu bez prechodu, aby prepnutie stavu nič neanimovalo */
.okno.meria .ok-hlava, .okno.meria .ok-hlava * { transition: none !important; }
/* kapitola V skratke: problém, čo som postavil, čo z toho má firma (v karte scény aj v pokojnom článku) */
.ok-skratka { margin: 0; display: grid; gap: 14px; }
.ok-skratka dt { font: 400 12px "M", monospace; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.ok-skratka dd { margin: 3px 0 0; font-size: 16px; line-height: 1.55; }
.okno.text .ok-skratka { gap: 18px; }
.okno.text .ok-skratka dt { opacity: 1; color: var(--t-tlm); }
.okno.text .ok-skratka dd { font-size: 18px; line-height: 1.6; color: var(--t); max-width: 62ch; }
/* tlačidlo prepnutia pohľadu (pokojný ↔ animovaný) */
.ok-tl button.ok-prep { width: auto; padding: 0 16px; border-radius: 999px; font: 600 14px "B", sans-serif; white-space: nowrap; }
@media (max-width: 760px) {
  .okno.text .ok-hlava { padding: 12px 12px 14px; }
  .okno.text .ok-hlava .ok-tl { top: 12px; right: 12px; }
  .okno.text[data-miesto] .ok-karta { padding: calc(var(--ok-hore, 150px) + 22px) 16px 120px; }
  .ok-tl button.ok-prep { padding: 0 11px; font-size: 13px; }
  .okno.text .ok-karta p { font-size: 16px; }
}

/* Čo to rieši pre firmu (Quorkeeper, 13. 11. 2026, vetva cv-hore): predajný nadpis, čo stojí nechať to tak a služby,
   ktoré boli samostatnými sekciami úvodu; v animovanom okne aj v pokojnom detaile */
.ok-firma .ok-firma-n { margin: 0 0 14px; font: 800 20px/1.3 "D", sans-serif; }
.ok-firma h4 { margin: 16px 0 4px; font: 14px "M", monospace; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--svetla) 60%, var(--bridlica2)); }
.ok-firma ul { margin: 0; padding: 0; list-style: none; }
.ok-firma li { display: grid; justify-items: start; gap: 3px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--svetla) 12%, transparent); font-size: 15px; line-height: 1.5; }
.ok-firma li span { color: color-mix(in srgb, var(--svetla) 72%, var(--bridlica2)); }
.ok-firma .ok-zdroj { font: 12.5px/1.5 "M", monospace; color: inherit; text-decoration: underline; text-decoration-color: var(--ruzova); text-underline-offset: 3px; }
.ok-karta .ok-firma button.ok-odkaz { padding: 0; border: 0; background: none; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.okno.text .ok-firma .ok-firma-n { max-width: 32ch; font-size: clamp(22px, 2.4vw, 28px); color: var(--t); }
.okno.text .ok-firma h4 { color: var(--t-tlm); }
.okno.text .ok-firma li { max-width: 68ch; border-top-color: var(--t-ram); font-size: 17px; color: var(--t); }
.okno.text .ok-firma li span, .okno.text .ok-firma .ok-zdroj { color: var(--t-tlm); }