/* ============================================================
   martynkovaV6.css · WEB 6.0 · vzhled webu Elišky Martynkové
   Vznikl 1. 10. 2026 převodem náhledu v Podklady/.
   Stavba stránky je inspirovaná drimalka.com, ale soubor ani třídy
   se po cizí značce nejmenují (Eliška 2. 10. 2026).

   VŠECHNO je omezené na .d6, takže se projeví jen na stránkách,
   které mají <body class="d6">. Ostatních 25 stránek dál drží
   Klapku z navrh.css a tenhle soubor se jich nedotkne.

   Rozhodnutí, která to nese, jsou v brands/eliska/vizual.md,
   sekce "Web 6.0 beta · směr Dřímalka".
   ============================================================ */

/* Střídmá paleta z Klapky: papír, inkoust, jediný akcent oranžová.
   Z Dřímalka je převzatá jen stavba stránky (pruh, hero s fotkou, čísla, pás citací, střídání ploch) a patkové nadpisy.
   Nadpisy jdou přepnout zpět na Archivo jednou proměnnou --head. */
.d6{--papir:#F5F4F0; --papir-2:#EDEBE5; --ink:#14120F; --ink-2:#1E1B17; --ink-soft:#5B5850; --line:#DEDBD2; --bila:#fff;
  --oranz:#F25C05; --oranz-tm:#A93C00; --oranz-na-tmave:#FF8A3D;
  --r:8px; --r-velky:14px;
  --head:"Crimson Pro",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --cisla:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif}
.d6 *{box-sizing:border-box}
html.d6{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.d6{margin:0;background:var(--papir);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased}
.d6 h1, .d6 h2, .d6 h3{font-family:var(--head);font-weight:700;letter-spacing:-.015em;margin:0;text-wrap:balance}
.d6 p{margin:0;text-wrap:pretty}
.d6 a{color:inherit}
.d6 img, .d6 video{max-width:100%}
.d6 .strana{max-width:1180px;margin:0 auto;padding:0 clamp(16px,3vw,28px)}
.d6 .eyebrow{font:600 13px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:10px}
.d6 .eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--oranz);flex:none}
.d6 .tmava .eyebrow{color:#CFCBC0}
.d6 .tmava .eyebrow::before{background:var(--oranz-na-tmave)}
/* tlačítka */
.d6 .tl{display:inline-flex;align-items:center;gap:8px;padding:15px 26px;border-radius:var(--r);font:600 16px/1 var(--sans);text-decoration:none;border:2px solid var(--ink);background:var(--ink);color:var(--papir);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.d6 .tl:hover{background:var(--oranz);border-color:var(--oranz);color:var(--ink)}
.d6 .tl.druhe{background:transparent;color:var(--ink)}
.d6 .tl.druhe:hover{background:var(--ink);border-color:var(--ink);color:var(--papir)}
.d6 .tmava .tl{background:var(--papir);border-color:var(--papir);color:var(--ink)}
.d6 .tmava .tl:hover{background:var(--oranz-na-tmave);border-color:var(--oranz-na-tmave);color:var(--ink)}
.d6 .tmava .tl.druhe{background:transparent;color:var(--papir);border-color:#8C877C}
.d6 .tmava .tl.druhe:hover{background:var(--papir);border-color:var(--papir);color:var(--ink)}
.d6 .tl:focus-visible, .d6 a:focus-visible, .d6 .ukazka-media:focus-visible{outline:3px solid var(--oranz);outline-offset:3px}
.d6 .tmava .tl:focus-visible, .d6 .tmava a:focus-visible{outline-color:var(--oranz-na-tmave)}
/* náhledový pruh a oznamovací pruh */
.d6 .nahled{background:#fff;border-bottom:1px solid var(--line);text-align:center;padding:7px 12px;font:500 12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.d6 .oznameni{background:var(--ink);color:var(--papir);text-align:center;padding:10px 16px;font-size:15px;line-height:1.4}
.d6 .oznameni b{color:var(--oranz-na-tmave);font-weight:600}
.d6 .oznameni a{text-underline-offset:3px}
/* hlavička */
.d6 .hlavicka{background:var(--papir);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.d6 .nav{display:flex;justify-content:space-between;align-items:center;padding:14px clamp(16px,3vw,28px);position:relative}
.d6 .nav-logo{font:700 22px/1 var(--head);letter-spacing:-.01em;text-decoration:none}
.d6 .nav-seznam{display:none;list-style:none;margin:0;padding:0;gap:28px;align-items:center}
.d6 .nav-seznam a{font:500 15px/1 var(--sans);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.d6 .nav-seznam a:hover{border-bottom-color:var(--ink)}
.d6 .nav-seznam .tl{padding:11px 18px;font-size:15px;border-bottom:2px solid var(--ink)}
.d6 .nav-prepinac{position:absolute;opacity:0;pointer-events:none}
.d6 .nav-tlacitko{font:600 14px/1 var(--sans);cursor:pointer;padding:10px 16px;border:2px solid var(--ink);border-radius:var(--r)}
.d6 .nav-prepinac:focus-visible + .nav-tlacitko{outline:3px solid var(--oranz);outline-offset:3px}
.d6 .nav-prepinac:checked ~ .nav-seznam{display:flex;flex-direction:column;align-items:flex-start;gap:16px;position:absolute;top:100%;left:calc(clamp(16px,3vw,28px) * -1);right:calc(clamp(16px,3vw,28px) * -1);background:var(--papir);padding:16px clamp(16px,3vw,28px) 24px;border-bottom:1px solid var(--line)}
@media (min-width:900px){
.d6 .nav-seznam{display:flex}
.d6 .nav-tlacitko{display:none}
}
/* hero */
.d6 .hero{padding:clamp(36px,6vw,80px) 0 clamp(36px,6vw,72px);display:grid;gap:clamp(28px,4vw,56px)}
.d6 .hero-text{display:flex;flex-direction:column;gap:22px;padding-bottom:0}
.d6 .hero h1{font-size:clamp(36px,6vw,72px);line-height:1.08;letter-spacing:-.025em}
/* Cerna cast je vlastni blok, aby oranzovy pruh zacinal na novem radku a nelamal se
   doprostred vety. Bez toho to text-wrap:balance rozhodi na tri roztrepene radky. */
.d6 .hero h1 .radek{display:block}
/* Oranzovy pruh je kresleny jako pozadi-obrazek, ne jako cela plocha radku.
   Inline box Crimson Pro italic ma 1,107em, ale inkoust pisma jen 0,906em (zmereno
   v Chromiu 1. 10.). Pruh proto kopiruje inkoust: vyska .95em, zacatek .19em od vrsku.
   Pismo ma barvu papiru (--papir), aby pruh pusobil jako vyrez. Kontrast 3,02:1,
   coz na velky nadpis (72px) staci, na drobny text ne. */
.d6 .hero h1 em{font-style:italic;color:var(--papir);background-image:linear-gradient(var(--oranz),var(--oranz));background-repeat:no-repeat;background-size:100% .92em;background-position:0 .19em;padding:0 .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.d6 .hero-sub{font-size:clamp(16px,1.7vw,18px);color:#3A372F}
.d6 .hero-tl{display:flex;flex-wrap:wrap;gap:12px}
.d6 .hero-cisla{display:flex;flex-wrap:wrap;gap:10px 26px;padding-top:22px;margin-top:6px;border-top:1px solid var(--line)}
.d6 .hero-cisla div{display:flex;align-items:baseline;gap:7px;font-size:14px;line-height:1.3;color:var(--ink-soft)}
.d6 .hero-cisla b{font:700 30px/1 var(--cisla);letter-spacing:-.03em;color:var(--ink)}
.d6 .hero-foto{position:relative;align-self:end;max-width:460px;margin:0 auto;width:100%}
.d6 .hero-foto img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 12%;border-radius:var(--r-velky);background:var(--papir-2)}
.d6 .hero-odznaky{position:absolute;left:-6px;bottom:22px;width:230px;display:flex;flex-direction:column;gap:8px}
.d6 .hero-odznak{position:static;background:var(--bila);border:1px solid var(--line);border-radius:var(--r);padding:11px 15px;font-size:14px;line-height:1.3;width:100%}
.d6 .hero-odznak b{display:block;font:700 17px/1.15 var(--head)}
@media (min-width:900px){
.d6 .hero{grid-template-columns:1.15fr 1fr;align-items:stretch}
.d6 .hero-foto{align-self:stretch}
.d6 .hero-foto img{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-position:50% 18%}
.d6 .hero-foto{margin:0;max-width:none}
.d6 .hero-odznaky{left:-28px}
}
/* pás citací */
.d6 .pas{background:var(--papir-2);border-block:1px solid var(--line);overflow:hidden;padding:15px 0}
.d6 .pas-maska{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.d6 .pas-draha{display:flex;gap:30px;white-space:nowrap;width:max-content;animation:jizda 60s linear infinite;font:italic 600 21px/1.2 var(--head);align-items:center}
.d6 .pas-draha span small{font:500 13px/1 var(--sans);font-style:normal;letter-spacing:.05em;color:var(--ink-soft);margin-left:9px;text-transform:uppercase}
.d6 .pas-draha i{font-style:normal;color:var(--oranz);font-size:10px}
@keyframes jizda{to{transform:translateX(-50%)}}
/* sekce a jejich plochy */
.d6 .sekce{padding:clamp(52px,8vw,104px) 0}
.d6 .sekce.alt{background:var(--papir-2)}
.d6 .sekce.tmava{background:var(--ink);color:var(--papir);position:relative;overflow:hidden}
.d6 .sekce.tmava > .strana{position:relative;z-index:1}
.d6 .hlava{display:grid;gap:12px;margin-bottom:clamp(26px,4vw,48px)}
.d6 .hlava h2{font-size:clamp(34px,5vw,56px);line-height:1.05}
.d6 .hlava p{color:var(--ink-soft)}
.d6 .tmava .hlava p{color:#CFCBC0}
.d6 .ukazky{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(clamp(16px,3vw,28px) * -1);padding-inline:clamp(16px,3vw,28px);scroll-padding-inline:clamp(16px,3vw,28px);-webkit-overflow-scrolling:touch}
.d6 .ukazka{flex:0 0 82%;scroll-snap-align:start;margin:0}
.d6 .ukazka-media{display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;position:relative;overflow:hidden;cursor:pointer;background:var(--ink);border-radius:var(--r);-webkit-appearance:none;appearance:none}
.d6 .ukazka-media video{width:100%;height:100%;object-fit:cover;display:block}
.d6 .ukazka-ikona{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(20,18,15,.72);color:var(--papir);display:inline-flex;align-items:center;justify-content:center}
.d6 .ukazka.sound .ukazka-ikona{background:var(--oranz);color:var(--ink)}
.d6 .ukazka-ikona .i-on{display:none}
.d6 .ukazka.sound .ukazka-ikona .i-off{display:none}
.d6 .ukazka.sound .ukazka-ikona .i-on{display:block}
.d6 .ukazka figcaption{margin-top:12px;font-size:16px;color:var(--ink-soft);line-height:1.4}
.d6 .ukazka figcaption strong{display:block;font:700 22px/1.15 var(--head);color:var(--ink);margin-bottom:3px}
@media (min-width:700px){
.d6 .ukazky{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin-inline:0;padding-inline:0}
.d6 .ukazka{flex:none}
}
/* služby */
.d6 .sluzby{display:grid;gap:18px}
.d6 .sluzba{position:relative;background:var(--bila);border:1px solid var(--line);border-radius:var(--r-velky);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:14px;text-decoration:none;transition:border-color .15s}
.d6 .sluzba:hover{border-color:var(--ink)}
.d6 .sluzba .stitek{font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.d6 .sluzba .stitek.vyber{position:absolute;top:0;right:clamp(24px,3vw,34px);transform:translateY(-50%);background:var(--oranz);color:var(--ink);padding:7px 12px;border-radius:var(--r)}
.d6 .sluzba h3{font-size:clamp(28px,3vw,34px);line-height:1.05}
.d6 .sluzba .popis{font-size:17px;line-height:1.65;color:#3A372F}
.d6 .cena{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.d6 .cena strong{display:block;font:700 clamp(34px,3.6vw,44px)/1 var(--cisla);letter-spacing:-.04em;white-space:nowrap}
.d6 .cena span{display:block;font-size:15px;color:var(--ink-soft);margin-top:6px}
.d6 .sluzba .sipka{font:600 16px/1 var(--sans);border-bottom:2px solid var(--oranz);align-self:flex-start;padding-bottom:4px}
@media (min-width:900px){
.d6 .sluzby{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.d6 .b2b{margin-top:18px;border:1px solid var(--ink);border-radius:var(--r-velky);padding:clamp(24px,4vw,44px);display:grid;gap:22px;align-items:center}
.d6 .b2b h3{font-size:clamp(28px,3.6vw,40px);line-height:1.05;margin:10px 0 12px}
.d6 .b2b p{}
.d6 .b2b .na-miru{font-size:15px;color:var(--ink-soft);margin-top:12px}
@media (min-width:900px){
.d6 .b2b{grid-template-columns:1fr auto}
}
/* reference na tmavém */
.d6 .reference{display:grid;gap:16px}
.d6 .ref{background:var(--ink-2);border:1px solid #3A362F;border-radius:var(--r-velky);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:22px;margin:0}
.d6 .ref blockquote{margin:0;font-size:17px;line-height:1.65;color:#E9E6DD}
.d6 .ref blockquote::before{content:"“";display:block;font:700 64px/.7 var(--head);color:var(--oranz-na-tmave);margin-bottom:10px}
.d6 .ref footer{display:flex;align-items:center;gap:12px;margin-top:auto}
.d6 .ref footer > div{display:flex;flex-direction:column;gap:3px;min-width:0}
.d6 .ref img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;background:#3A362F}
.d6 .ref cite{font:700 19px/1.15 var(--head);font-style:normal;display:block;color:var(--papir)}
.d6 .ref footer .stitek{color:#B4B0A5;font-size:14px;line-height:1.3}
@media (min-width:700px){
.d6 .reference{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px){
.d6 .reference{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.d6 .znacky{margin-top:34px;padding-top:26px;border-top:1px solid #3A362F}
.d6 .znacky p.eyebrow{margin-bottom:14px}
.d6 .znacky ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;font:600 20px/1.2 var(--head);color:#E9E6DD}
/* články */
.d6 .clanky{display:grid;gap:18px}
.d6 .clanek{background:var(--bila);border:1px solid var(--line);border-radius:var(--r-velky);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;transition:border-color .15s}
.d6 .clanek:hover{border-color:var(--ink)}
.d6 .foto-misto{background:var(--papir-2);display:flex;align-items:center;justify-content:center}
.d6 .foto-misto span{font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:9px}
.d6 .foto-misto span::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid var(--oranz)}
/* skutečná fotka v kartě článku: vyplní box bez ohledu na jeho poměr (u mensi karty na šířku se výška natahuje) */
.d6 .foto-misto:has(img){position:relative;overflow:hidden}
.d6 .foto-misto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.d6 .clanek .stitek{font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.d6 .clanek h3{font-size:clamp(24px,2.4vw,28px);line-height:1.15}
.d6 .clanek p{color:var(--ink-soft);font-size:16.5px;line-height:1.6}
.d6 .clanek .sipka{align-self:flex-start;font:600 16px/1.3 var(--sans);color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px}
.d6 .clanek .stitek-pill{align-self:flex-start;background:var(--oranz);color:var(--ink);font:700 13px/1 var(--sans);padding:6px 10px;border-radius:var(--r)}
.d6 .clanek-velky{padding:clamp(16px,2vw,28px);gap:clamp(18px,2vw,24px)}
.d6 .clanek-velky .foto-misto{aspect-ratio:16/9;border-radius:var(--r-velky)}
.d6 .clanek-velky .clanek-telo{display:flex;flex-direction:column;gap:12px;padding:0 4px 4px}
.d6 .clanek-velky h3{font-size:clamp(28px,3vw,38px);line-height:1.1}
.d6 .clanek-mensi .foto-misto{aspect-ratio:16/9}
.d6 .clanek-mensi .clanek-telo{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:clamp(20px,2.4vw,28px)}
.d6 .clanky-sloupec{display:grid;gap:18px}
.d6 .dalsi{margin-top:26px}
@media (min-width:640px){
.d6 .clanek-mensi{flex-direction:row}
.d6 .clanek-mensi .foto-misto{aspect-ratio:auto;flex:0 0 38%}
}
@media (min-width:900px){
.d6 .clanky{grid-template-columns:1.15fr 1fr;align-items:stretch}
.d6 .clanky-sloupec{grid-template-rows:1fr 1fr}
.d6 .clanek-velky{height:100%}
.d6 .clanek-velky .foto-misto{flex:1;aspect-ratio:auto;min-height:260px}
.d6 .clanek-mensi .foto-misto{flex:0 0 36%}
}
/* závěrečná výzva: jediný přechod barvy, jako v Klapce */
.d6 .cta{background:linear-gradient(135deg,var(--oranz-tm),var(--ink) 70%);color:var(--papir);padding:clamp(56px,9vw,112px) 0}
.d6 .cta .strana{display:grid;gap:24px}
.d6 .cta h2{}
.d6 .cta h2{font-size:clamp(42px,7.4vw,88px);line-height:1}
.d6 .cta p{font-size:clamp(18px,2vw,21px);color:#E9E6DD}
.d6 .cta .tl{background:var(--papir);border-color:var(--papir);color:var(--ink)}
.d6 .cta .tl:hover{background:var(--oranz-na-tmave);border-color:var(--oranz-na-tmave);color:var(--ink)}
/* bokeh v závěrečné výzvě: rozpitá kolečka, čisté CSS, bez skriptu */
.d6 .cta{position:relative;overflow:hidden}
.d6 .cta .strana{position:relative;z-index:1}
.d6 .bokeh{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.5}
.d6 .bokeh i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;
  background:radial-gradient(circle,var(--c) 0,var(--c) 38%,transparent 72%);filter:blur(calc(var(--b) + 4px));opacity:var(--o);mix-blend-mode:screen;
  animation:plout var(--t) ease-in-out var(--w) infinite alternate,dech var(--p) ease-in-out var(--w) infinite alternate;will-change:transform,opacity}
.d6 .bokeh i.kruh{background:radial-gradient(circle,transparent 0,transparent 52%,var(--c) 68%,transparent 74%),radial-gradient(circle,var(--c) 0,transparent 66%)}
@keyframes plout{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(var(--dx),var(--dy),0) scale(1.18)}}
@keyframes dech{from{opacity:calc(var(--o) * .35)}to{opacity:var(--o)}}
@media (prefers-reduced-motion:reduce){
.d6 .bokeh i{animation:none}
}
/* patička */
@media (min-width:800px){
}
@media (prefers-reduced-motion:reduce){
.d6 .pas-draha{animation:none}
html.d6{scroll-behavior:auto}
.d6 *{transition:none!important}
}

/* ------------------------------------------------------------
   Lišta souhlasu s cookies
   souhlas.js si nese vlastní styly a má v nich Klapčinu signální
   červenou #D7263D. V Dřímalce je akcent oranžový, takže by na
   stránce svítily dvě různé "hlavní" barvy vedle sebe.
   Přebarvuje se jen pod .d6, ostatních 25 stránek zůstává červených.
   Text na oranžové je inkoust, ne bílá · kontrast 5,62:1 místo 3,33:1
   (tlačítko je drobný text, tam 3,33 nestačí, viz vizual.md).
   ------------------------------------------------------------ */
.d6 .souhlas-btn--ano{background:var(--oranz);color:var(--ink);border-color:var(--oranz)}
.d6 .souhlas-btn--ano:hover{background:var(--oranz-tm);color:var(--papir);border-color:var(--oranz-tm)}
.d6 #souhlas-ulozit{background:var(--oranz);color:var(--ink);border-color:var(--oranz)}
.d6 #souhlas-ulozit:hover{background:var(--oranz-tm);color:var(--papir);border-color:var(--oranz-tm)}

/* ============================================================
   KOLIZE JMEN TŘÍD s navrh.css (2. 10. 2026)

   Oba soubory se načítají na stejné stránce a devět jmen tříd
   se v nich potkává se zcela jiným významem:
     cena, eyebrow, i-off, i-on, nav, nav-logo, ref, sound, tmava

   Specificita .d6 .x nad .x stačí jen na vlastnosti, které tady
   opravdu stojí. Co V6 nedeklaruje, to z navrh.css proteče.
   Nejhorší případ: navrh.css má .ref jako kolečko s fotkou
   (width:92px), takže citace na úvodu byly 92 px široké sloupce.

   Tenhle blok vypíná jen ty prosakující vlastnosti. Nerovná se
   to resetu · co V6 nastavuje samo, se tu neopakuje.
   ============================================================ */

/* .nav · navrh.css počítá s obalem .container, injektovaná navigace ho nemá */
/* kontejner navigace je od 2. 10. globální v navrh.css · tady zbývá
   jen vypnout to, co z navrh.css protéká skrz kolizi jména .nav */
.d6 .nav{box-shadow:none;backdrop-filter:none;transform:none}
/* min-height u loga se NEruší · je to dotyková plocha 44 px podle WCAG.
   2. 10. jsem ji omylem vypnula a úvod měl kvůli tomu nižší hlavičku než zbytek webu. */
.d6 .nav-logo{height:auto}

/* .ref · v navrh.css je to kolečko s fotkou, tady karta citace */
.d6 .ref{width:auto;height:auto;align-items:stretch;text-align:left;
  margin-top:0;text-decoration:none;border-top:0;padding-top:clamp(22px,2.6vw,30px)}
.d6 .ref img{height:46px}

/* .cena · v navrh.css je to řádek s cenou v hlavičce nabídky */
.d6 .cena{position:static;height:auto;max-width:none;margin:0;
  text-align:left;text-transform:none}

.d6 .eyebrow{margin-bottom:0}

/* Zalomení výzvy řídí <br>, ne vyvažovač řádků · viz navrh.css. */
.d6 .cta h2{text-wrap:normal}

/* Odkazy v textu mají oranžové podtržení i na úvodu (Eliška 2. 10. 2026). */
.d6 p a, .d6 li a, .d6 blockquote a, .d6 figcaption a{
  text-decoration:none;text-decoration-thickness:2px;text-underline-offset:3px}
.d6 p a:hover, .d6 li a:hover, .d6 blockquote a:hover, .d6 figcaption a:hover{
  text-decoration:underline;text-decoration-color:var(--oranz)}
.d6 .sluzba, .d6 .tl, .d6 .sipka, .d6 .nav a{text-decoration:none}

/* ============================================================
   KOMPONENTY PODSTRÁNEK (2. 10. 2026)

   Úvod je zdroj pravdy pro vzhled. Tyhle prvky na něm nejsou,
   ale podstránky je potřebují. Jsou proto postavené z jeho
   stavebnic: papírové plochy, bílé karty s rámečkem a rádiusem,
   Crimson Pro na nadpisy, Archivo na čísla, oranžová na akcenty
   a na plochy, inkoust na text.

   Používá je Firemní produkce, počítá se s nimi i pro Kurz
   na zakázku a Studio na míru.
   ============================================================ */

/* --- Hero podstránky ---------------------------------------
   Menší než na úvodu: nadpis 34-62 px místo 36-72, fotka vedle
   textu ve stejné mřížce. */
.d6 .hero-str{padding:clamp(32px,5vw,64px) 0 clamp(32px,5vw,56px);display:grid;gap:clamp(28px,4vw,52px)}
.d6 .hero-str h1{font-size:clamp(34px,5vw,62px);line-height:1.06}
.d6 .hero-str .hero-text{display:flex;flex-direction:column;gap:20px}
.d6 .hero-str .hero-sub{font-size:clamp(16px,1.7vw,18px);color:#3A372F}
@media(min-width:900px){.d6 .hero-str{grid-template-columns:1.15fr .85fr;align-items:center}}

/* --- Místo na fotku nebo video ------------------------------
   Placeholder, dokud nejsou podklady. Čárkovaný rámeček, ať je
   na první pohled jasné, že to není hotový prvek. */
.d6 .media-misto{display:flex;align-items:center;justify-content:center;text-align:center;
  border:2px dashed var(--line);border-radius:var(--r-velky);background:var(--papir-2);
  color:var(--ink-soft);font:600 13px/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  padding:24px;min-height:220px}
.d6 .media-misto.na-vysku{aspect-ratio:4/5}
.d6 .media-misto.na-sirku{aspect-ratio:16/9}

/* --- Sliby: co slíbím a co ne -------------------------------
   Dvě karty vedle sebe. Vlevo sliby s oranžovou odrážkou,
   vpravo to, co neslibuju · tlumené, bez oranžové. */
.d6 .sliby{display:grid;gap:20px}
@media(min-width:860px){.d6 .sliby{grid-template-columns:1.1fr .9fr}}
.d6 .slib-karta{background:var(--bila);border:1px solid var(--line);border-radius:var(--r-velky);
  padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:16px}
.d6 .slib-karta.tlumena{background:var(--papir-2);border-style:dashed}
.d6 .slib-karta h3{font-size:clamp(21px,2.1vw,26px);line-height:1.1}
.d6 .slib-karta ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.d6 .slib-karta li{position:relative;padding-left:26px;font-size:17px;line-height:1.6;color:#3A372F}
.d6 .slib-karta li::before{content:"";position:absolute;left:0;top:.52em;width:10px;height:10px;
  border-radius:50%;background:var(--oranz)}
.d6 .slib-karta.tlumena li::before{background:none;border:2px solid var(--ink-soft);
  width:10px;height:10px;box-sizing:border-box}

/* --- Postup: číslované kroky --------------------------------
   Číslo je v Archivu jako čísla na úvodu, krok je karta. */
.d6 .postup{display:grid;gap:16px;counter-reset:krok}
@media(min-width:760px){.d6 .postup{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.d6 .postup{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}}
.d6 .krok{background:var(--bila);border:1px solid var(--line);border-radius:var(--r-velky);
  padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;gap:10px}
.d6 .krok b{font:700 15px/1 var(--cisla);letter-spacing:.04em;color:var(--oranz-tm)}
.d6 .krok h3{font-size:19px;line-height:1.15}
.d6 .krok p{font-size:15.5px;line-height:1.6;color:var(--ink-soft);margin:0}

/* --- Otázky: rozbalovací seznam -----------------------------
   <details> bez knihovny. Oranžové znaménko plus se při otevření
   změní na minus. Klávesnicí ovladatelné, protože je to nativní prvek. */
.d6 .otazky{display:grid;gap:0}
.d6 .otazka{border-bottom:1px solid var(--line)}
.d6 .otazka summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font:700 clamp(18px,1.9vw,21px)/1.3 var(--head)}
.d6 .otazka summary::-webkit-details-marker{display:none}
.d6 .otazka summary::after{content:"";position:absolute;right:8px;top:50%;width:16px;height:2px;
  background:var(--oranz)}
.d6 .otazka summary::before{content:"";position:absolute;right:15px;top:50%;width:2px;height:16px;
  background:var(--oranz);transform:translateY(-50%);transition:opacity .15s}
.d6 .otazka[open] summary::before{opacity:0}
.d6 .otazka summary:focus-visible{outline:3px solid var(--oranz);outline-offset:3px}
.d6 .otazka p{margin:0 0 20px;font-size:17px;line-height:1.7;color:#3A372F}

/* --- Poznámka pod sekcí ------------------------------------- */
.d6 .pozn{margin-top:20px;font-size:16px;line-height:1.65;color:var(--ink-soft)}
.d6 .pozn strong{color:var(--ink)}

/* --- Případovka ---------------------------------------------
   Text a citace vlevo, ukázka vpravo. Citace používá kartu .ref
   z úvodu, jen na světlé ploše, takže si bere papírové barvy. */
.d6 .pripadovka{display:grid;gap:clamp(22px,3vw,34px)}
@media(min-width:900px){.d6 .pripadovka{grid-template-columns:1.1fr .9fr;align-items:start}}
.d6 .pripadovka-text{display:grid;gap:22px}
.d6 .pripadovka-text > .hlava{margin-bottom:0}   /* nadpis je v levém sloupci, pravý sloupec s fotkou začíná ve stejné výšce */
.d6 .pripadovka-text > p{font-size:18px;line-height:1.7;color:#3A372F;margin:0}
.d6 .pripadovka .ref{background:var(--bila);border-color:var(--line)}
.d6 .pripadovka .ref p{color:#3A372F;font-size:17px;line-height:1.65;margin:0}
.d6 .pripadovka .ref p::before{content:"“";display:block;font:700 56px/.7 var(--head);
  color:var(--oranz);margin-bottom:10px}
.d6 .pripadovka .ref cite{color:var(--ink)}
.d6 .pripadovka .ref footer .stitek{color:var(--ink-soft)}

/* --- Dvě karty vedle sebe ----------------------------------- */
@media(min-width:760px){.d6 .sluzby.dve{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.d6 .sluzby.dve{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- Zvýraznění v nadpisu podstránky ------------------------
   Stejný oranžový pruh jako na úvodu, jen menší písmo. */
.d6 .hero-str h1 em{font-style:italic;color:var(--papir);
  background-image:linear-gradient(var(--oranz),var(--oranz));background-repeat:no-repeat;
  background-size:100% .92em;background-position:0 .19em;padding:0 .1em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* --- Hierarchie: podstránka neopakuje gesta úvodu (2. 10. 2026)
   Porovnání drimalka.com s jeho podstránkou /ai-content-producer:
   úvod má řečnický nadpis, pruh čísel i pás citací, podstránka
   nic z toho. Dělá to hierarchii: úvod je značka, podstránka je
   jedno téma. U nás proto oranžový pruh v nadpisu, pruh čísel
   a pás citací zůstávají jen na úvodu. */
.d6 .hero-str h1{letter-spacing:-.02em}

/* Čísla u sekce, kde mají kontext · menší než pruh na úvodu. */
.d6 .cisla-sekce{display:flex;flex-wrap:wrap;gap:8px 24px;padding-top:16px;
  border-top:1px solid var(--line)}
.d6 .cisla-sekce div{display:flex;align-items:baseline;gap:6px;font-size:14px;
  line-height:1.3;color:var(--ink-soft)}
.d6 .cisla-sekce b{font:700 24px/1 var(--cisla);letter-spacing:-.03em;color:var(--ink)}
.d6 .pripadovka-bok{display:grid;gap:18px;align-content:start}
/* Fotka ze zákulisí v případovce (Firemní produkce): čtvercový ořez, kamera a monitor nahoře */
.d6 .pripadovka-foto{margin:0}
.d6 .pripadovka-foto img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 32%;border-radius:var(--r-velky);background:var(--papir-2)}
.d6 .pripadovka-foto figcaption{margin-top:10px;font-size:14px;line-height:1.4;color:var(--ink-soft)}
.d6 .tmava .pripadovka-foto figcaption{color:#B4B0A5}

/* --- Čtvrtá služba jako pruh pod trojicí (2. 10. 2026) ------
   Fotky nejsou rovnocenná čtvrtá služba, jsou doplněk k natáčení.
   Čtvrtá karta proto sedí přes celou šířku pod třemi dlaždicemi
   a je nižší: nadpis vlevo, text vpravo. */
.d6 .sluzba.pruh{margin-top:16px;display:grid;gap:10px 28px;padding:clamp(20px,2.4vw,26px)}
.d6 .sluzba.pruh h3{font-size:clamp(21px,2.1vw,26px);margin-top:4px}
.d6 .sluzba.pruh .popis{margin:0}
@media(min-width:760px){.d6 .sluzba.pruh{grid-template-columns:.9fr 2.1fr;align-items:center}}

/* --- Poznámka pod dvojicí karet přes celou šířku ------------- */
.d6 .pozn{max-width:none}

/* --- Závěrečná výzva: tlačítko si nebere celou šířku ---------
   .cta .strana je mřížka a položky se v ní roztahují. */
.d6 .cta .strana{justify-items:start}

/* --- Případovka na tmavé ploše ------------------------------
   Sekce „Jak to vypadá hotové" je od 2. 10. tmavá, stejně jako
   reference na úvodu. Citace si proto bere tmavou kartu .ref,
   jak vypadá na úvodu, a světlé přepisy odtud mizí. */
.d6 .tmava .pripadovka-text > p{color:#CFCBC0}
.d6 .tmava .pripadovka .ref{background:var(--ink-2);border-color:#3A362F}
.d6 .tmava .pripadovka .ref p{color:#E9E6DD}
.d6 .tmava .pripadovka .ref p::before{color:var(--oranz-na-tmave)}
.d6 .tmava .pripadovka .ref cite{color:var(--papir)}
.d6 .tmava .pripadovka .ref footer .stitek{color:#B4B0A5}
.d6 .tmava .media-misto{background:rgba(245,244,240,.04);border-color:#3A362F;color:#B4B0A5}
.d6 .tmava .cisla-sekce{border-top-color:#3A362F}
.d6 .tmava .cisla-sekce div{color:#B4B0A5}
.d6 .tmava .cisla-sekce b{color:var(--papir)}

/* --- Blok s cenou a tlačítkem (2. 10. 2026) ------------------ */
.d6 .cena-blok{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;
  background:var(--bila);border:1px solid var(--line);border-radius:var(--r-velky);
  padding:clamp(22px,2.6vw,30px)}
.d6 .cena-blok .cena{margin:0;padding:0;border:0}

/* --- Srovnání před a po (2. 10. 2026) ------------------------
   Studio potřebuje tabulku „teď / po instalaci". Není to tabulka
   s daty, ale dvojice tvrzení, takže je to mřížka karet, ne <table>.
   Na mobilu jde pod sebe a stavy se označí štítkem. */
.d6 .srovnani{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-velky);overflow:hidden}
.d6 .srovnani-hlava{display:none}
.d6 .srovnani-radek{display:grid;gap:6px;background:var(--bila);padding:clamp(18px,2.2vw,24px)}
.d6 .srovnani-radek b{font:600 12px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft)}
.d6 .srovnani-radek span{font-size:17px;line-height:1.55}
.d6 .srovnani-radek span:nth-of-type(1){color:var(--ink-soft)}
.d6 .srovnani-radek span:nth-of-type(1)::before{content:"Teď: ";font-weight:600;color:var(--ink-soft)}
.d6 .srovnani-radek span:nth-of-type(2)::before{content:"Po instalaci: ";font-weight:600;color:var(--oranz-tm)}
@media(min-width:860px){
  .d6 .srovnani-hlava{display:grid;grid-template-columns:.8fr 1.1fr 1.3fr;gap:24px;
    background:var(--papir-2);padding:14px clamp(18px,2.2vw,24px);
    font:600 12px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
  .d6 .srovnani-hlava span:first-child{grid-column:2}
  .d6 .srovnani-radek{grid-template-columns:.8fr 1.1fr 1.3fr;gap:24px;align-items:baseline}
  .d6 .srovnani-radek span::before{content:none !important}
}

/* Postup o čtyřech krocích místo pěti. */
@media(min-width:1100px){.d6 .postup.ctyri{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* --- Pás značek na světlé ploše (2. 10. 2026) ----------------
   Na úvodu sedí v tmavé sekci referencí, proto má světlé písmo
   #E9E6DD. Na Kurzu na zakázku je na papíře a mělo kontrast
   1,13:1, tedy prakticky neviditelné. Barva se teď řídí plochou. */
.d6 .znacky li{color:var(--ink)}
.d6 .tmava .znacky li{color:#E9E6DD}
.d6 .znacky{border-top-color:var(--line)}
.d6 .tmava .znacky{border-top-color:#3A362F}

/* --- Blok s cenou: odsazení a tlačítko vpravo (2. 10. 2026) --
   Eliška: „boxy jsou moc nalepené na sobě, tlačítko zarovnat
   na pravou stranu." Blok s cenou se dotýkal karet pod sebou
   a tlačítko sedělo hned vedle textu. */
.d6 .cena-blok{justify-content:space-between;margin-bottom:clamp(20px,3vw,32px)}
.d6 .cena-blok .tl{margin-left:auto}
.d6 .cena-blok + .sliby{margin-top:0}


/* --- Pás značek: kolečka mezi jmény a na střed (2. 10. 2026) --
   Eliška: „chybí mi kulaté ikonky, ty tam chci a zarovnat na střed."
   Kolečka jsou stejná jako oddělovače v běžícím pásu citací na úvodu. */
.d6 .znacky ul{justify-content:center;align-items:center;gap:0 18px}
.d6 .znacky p.eyebrow{justify-content:center}
.d6 .znacky li{display:flex;align-items:center;gap:0 18px}
.d6 .znacky li:not(:last-child)::after{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--oranz);flex:none;opacity:.9}

/* --- Ručně kreslená spojnice mezi kroky (2. 10. 2026) --------
   Eliška: „můžeme mezi nimi udělat nějakou free style pojící linku,
   jakoby to někdo kreslil rukou?" Je to jedna nepravidelná křivka
   v SVG, tečkovaná s kulatými konci, takže působí tahem od ruky.
   Jen na širokém monitoru, kde kroky stojí v řadě · pod sebou
   by spojnice nedávala smysl. Dekorace, proto aria-hidden přes CSS. */
@media(min-width:1100px){
  .d6 .postup{position:relative;padding-top:34px}
  .d6 .postup::before{content:"";position:absolute;top:0;left:6%;right:6%;height:34px;
    background:url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201000%2040%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M4%2024%20C%2090%208,%20150%2030,%20250%2017%20C%20340%206,%20400%2031,%20500%2021%20C%20600%2011,%20650%2032,%20750%2019%20C%20840%208,%20905%2028,%20996%2018%22%20fill=%22none%22%20stroke=%22%23F25C05%22%20stroke-width=%222.6%22%20stroke-linecap=%22round%22%20stroke-dasharray=%220.1%209%22%20opacity=%220.85%22/%3E%3C/svg%3E") no-repeat center/100% 100%;pointer-events:none}
}

/* --- Perex sekce se nezalamuje zbytečně (2. 10. 2026) --------
   Eliška: „nauč se prosím nezalamovat text, který není potřeba
   zalomit." Perex pod nadpisem byl zúžený na 54 znaků, přestože
   měl k dispozici přes 110. Dvě věty se kvůli tomu lámaly na
   čtyři krátké řádky a vpravo zbývalo prázdné místo.
   72 znaků je pořád v pohodlné míře pro čtení, ale text zabere
   dva řádky místo čtyř. */
.d6 .hlava p{}


/* ============================================================
   ŠÍŘKU TEXTU URČUJE OBAL, NE PRAVIDLO (2. 10. 2026)

   Eliška: „já nechci rozhodovat, kolik řádků má mít text.
   Ať se zalomí podle wrapperu a ne násilím."

   Do té doby měly odstavce pevné `max-width` v znacích (46ch,
   54ch, 62ch, 64ch, 72ch). Text se tím lámal podle čísla, které
   jsem vymyslela, ne podle místa, které měl. Všechny ty hodnoty
   jsou pryč.

   Kde má být text užší, řeší to OBAL: hero má text v užším
   sloupci mřížky vedle fotky, karta má svoji šířku, případovka
   svůj sloupec. Nikde se šířka nevnucuje odstavci samotnému.
   ============================================================ */

/* --- Hero podstránky bez fotky (2. 10. 2026) -----------------
   Rozcestníky jako Služby nemají v heru obrázek. Jeden sloupec,
   text se zalomí podle obalu, ne podle pravidla. */
.d6 .hero-str.bez-fotky{grid-template-columns:1fr;padding-bottom:clamp(12px,2vw,24px)}
@media(min-width:900px){.d6 .hero-str.bez-fotky{grid-template-columns:1fr;padding-bottom:clamp(12px,2vw,24px)}}

/* --- Kontakt: formulář a postranní poznámky (2. 10. 2026) ----
   Formulář sám se nepřepisoval · má Turnstile, honeypot a vlastní
   skript js/kontakt.js. Přenesl se doslova a styly .cform drží dál
   navrh.css. Tady je jen obal a vzhled v jazyce úvodu. */
.d6 .kontakt-mrizka{display:grid;gap:clamp(22px,3vw,34px)}
@media(min-width:900px){.d6 .kontakt-mrizka{grid-template-columns:1.3fr .7fr;align-items:start}}
.d6 .kontakt-formular{background:var(--bila);border:1px solid var(--line);
  border-radius:var(--r-velky);padding:clamp(24px,3vw,34px)}
.d6 .kontakt-bok{display:grid;gap:18px;align-content:start}
.d6 .kontakt-bok .pozn{margin:0}

/* --- Mřížka ukázek z práce ---------------------------------- */
.d6 .vidgrid{display:grid;gap:18px;margin:0}
@media(min-width:700px){.d6 .vidgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.d6 .vidgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.d6 .vidcard{display:grid;gap:12px;text-decoration:none;background:var(--bila);
  border:1px solid var(--line);border-radius:var(--r-velky);padding:14px;
  transition:border-color .15s}
.d6 .vidcard:hover{border-color:var(--ink)}
.d6 .vid-thumb{position:relative;display:block;border-radius:var(--r);overflow:hidden;
  aspect-ratio:16/9;background:var(--papir-2)}
.d6 .vid-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.d6 .vid-play{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;
  background:rgba(20,18,15,.72);display:flex;align-items:center;justify-content:center}
.d6 .vid-play svg{width:20px;height:20px;fill:var(--papir)}
.d6 .vid-cap{display:grid;gap:3px;padding:0 4px 6px}
.d6 .vid-cap b{font:700 19px/1.15 var(--head)}
.d6 .vid-cap span{font-size:15px;color:var(--ink-soft);line-height:1.4}

/* Poznámka pod formulářem byla světlá (v Klapce seděla na tmavém
   pruhu), na bílé kartě měla kontrast 1,10:1. Barva podle plochy. */
.d6 .cform-pozn{color:var(--ink-soft);font-size:14px;line-height:1.55}
.d6 .cform-pozn a{color:var(--oranz-tm);font-weight:600}
.d6 .cform label{color:var(--ink)}

/* Postup o třech krocích (Nástroje · „proč cenu ukazuju dopředu"). */
@media(min-width:1100px){.d6 .postup.ctyri:has(> .krok:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ============================================================
   FORMULÁŘ NA SVĚTLÉ PLOŠE (3. 10. 2026)

   Eliška: „formulář je nepřehledný." Byl. Políčka měla rámeček
   rgba(245,244,240,.16), tedy papírovou barvu na 16 % krytí,
   a pozadí papír na 6 %. To je styl pro TMAVÝ pruh, kde formulář
   stál v Klapce. Na bílé kartě po nich nebylo vidět skoro nic.

   Stejná příčina jako u patičky a pásu značek: komponenta
   navržená pro tmavou plochu přenesená na světlou.
   ============================================================ */
.d6 .cform{display:grid;gap:20px}
.d6 .cform .row{display:grid;gap:20px}
@media(min-width:620px){.d6 .cform .row{grid-template-columns:1fr 1fr}}
.d6 .cform > div{display:grid;gap:7px}

.d6 .cform label{font:600 14px/1.3 var(--sans);color:var(--ink);letter-spacing:0;text-transform:none}
.d6 .cform input,
.d6 .cform select,
.d6 .cform textarea{
  width:100%;box-sizing:border-box;
  background:var(--bila);
  border:1.5px solid #8C877C;   /* 3,58:1 na bílé · WCAG 1.4.11 chce u ovládacích prvků 3:1 */
  border-radius:var(--r);
  padding:13px 14px;
  font:400 16px/1.4 var(--sans);   /* 16px · pod 16 px iPhone při psaní zoomuje */
  color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.d6 .cform textarea{min-height:140px;resize:vertical}
.d6 .cform input::placeholder,
.d6 .cform textarea::placeholder{color:#6E6A61}   /* 5,39:1 na bílé · placeholder je text, chce 4,5:1 */
.d6 .cform input:hover,
.d6 .cform select:hover,
.d6 .cform textarea:hover{border-color:var(--ink-soft)}
.d6 .cform input:focus,
.d6 .cform select:focus,
.d6 .cform textarea:focus{
  outline:none;border-color:var(--oranz);
  box-shadow:0 0 0 3px rgba(242,92,5,.18);
}
.d6 .cform select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%2314120F' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:20px;
  padding-right:42px}
.d6 .cform .cform-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.d6 .cform button[type=submit]{justify-self:start;margin-top:4px}

/* --- Dvě rovnocenné karty (3. 10. 2026) ----------------------
   Eliška: „tohle vypadá, že Odkud jdu je důležitější než Jak pracuju."
   Měla pravdu. Použila jsem dvojici .sliby, kde je levá karta
   zvýrazněná a pravá tlumená · ta je určená na „co slíbím"
   a „co neslíbím", kde ta nerovnost dává smysl. Tady ne.
   Modifikátor .rovne obě karty srovná. */
.d6 .sliby.rovne{grid-template-columns:1fr}
@media(min-width:860px){.d6 .sliby.rovne{grid-template-columns:1fr 1fr}}
.d6 .sliby.rovne .slib-karta{background:var(--bila);border-style:solid}


/* ============================================================
   ZEĎ PŘÍBĚHŮ (3. 10. 2026)

   Eliška: „zachovat tento design a použít stejně dynamické
   dlaždice jako má Dřímalka, velikost se přizpůsobuje obsahu
   na výšku. Mezi to vložit ukázky práce a pár fotek."

   Karta citace zůstává přesně ta z referencí na úvodu. Mezi ně
   se míchají odkazy na videa a fotky z natáčení pro Raiffeisenbank.

   Výška se řídí obsahem · proto CSS sloupce, ne mřížka. V mřížce
   by se všechny dlaždice v řádku natáhly na nejvyšší z nich.
   ============================================================ */
.d6 .zed{column-count:1;column-gap:20px}
@media(min-width:720px){.d6 .zed{column-count:2}}
@media(min-width:1080px){.d6 .zed{column-count:3}}
.d6 .dlazdice{break-inside:avoid;margin:0 0 20px;display:block;
  background:var(--ink-2);border:1px solid #3A362F;border-radius:var(--r-velky);
  overflow:hidden;transition:border-color .15s}
.d6 .dlazdice:hover{border-color:#6E6A61}

/* citace · stejná jako na úvodu */
.d6 .dlazdice.citat{padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:22px}
.d6 .dlazdice.citat blockquote{margin:0;font-size:17px;line-height:1.65;color:#E9E6DD}
.d6 .dlazdice.citat blockquote::before{content:"“";display:block;font:700 64px/.7 var(--head);
  color:var(--oranz-na-tmave);margin-bottom:10px}
.d6 .dlazdice.citat footer{display:flex;align-items:center;gap:12px;margin-top:auto}
.d6 .dlazdice.citat img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;background:#3A362F}
.d6 .dlazdice.citat cite{font:700 19px/1.15 var(--head);font-style:normal;display:block;color:var(--papir)}
.d6 .dlazdice.citat .stitek{color:#B4B0A5;font-size:14px;line-height:1.3;letter-spacing:0;
  text-transform:none;font-weight:400}

/* video · odkaz na ukázku */
.d6 .dlazdice.video{text-decoration:none}
.d6 .dl-nahled{position:relative;display:block;aspect-ratio:16/9;background:#3A362F}
.d6 .dl-nahled img{width:100%;height:100%;object-fit:cover;display:block}
.d6 .dl-play{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;
  background:rgba(20,18,15,.78);display:flex;align-items:center;justify-content:center}
.d6 .dl-play svg{width:22px;height:22px;fill:var(--papir)}
.d6 .dlazdice.video:hover .dl-play{background:var(--oranz)}
.d6 .dlazdice.video:hover .dl-play svg{fill:var(--ink)}
.d6 .dl-popis{display:grid;gap:3px;padding:16px clamp(18px,2.2vw,22px) 18px}
.d6 .dl-popis b{font:700 19px/1.15 var(--head);color:var(--papir)}
.d6 .dl-popis span{font-size:15px;line-height:1.4;color:#B4B0A5}

/* foto z natáčení */
.d6 .dlazdice.foto{padding:0}
.d6 .dlazdice.foto img{width:100%;height:auto;display:block}
.d6 .dlazdice.foto figcaption{padding:14px clamp(18px,2.2vw,22px) 16px;font-size:14px;
  line-height:1.4;color:#B4B0A5}

/* --- Pozvánka na jinou stránku (3. 10. 2026) -----------------
   Malý pruh místo celé sekce: nadtitulek, nadpis a tlačítko
   na jednom řádku. Používá Kontakt, aby neopakoval ukázky
   práce, které žijí na Příbězích. */
.d6 .pozvanka{display:grid;gap:20px;align-items:center;
  background:var(--bila);border:1px solid var(--line);border-radius:var(--r-velky);
  padding:clamp(24px,3vw,34px)}
@media(min-width:760px){.d6 .pozvanka{grid-template-columns:1fr auto}}
.d6 .pozvanka h2{font-size:clamp(26px,3vw,36px);line-height:1.08;margin-top:8px}

/* Odkaz pod referencemi na úvodu · vede na celou zeď příběhů. */
.d6 .odkaz-pribehy{margin-top:clamp(24px,3vw,34px)}



/* --- Navigace má JEN jednu linku (3. 10. 2026, podruhé) ------
   Opravovala jsem to už v navrh.css, ale tam to nestačilo:
   pravidlo pro odkazy v textu `.d6 li a:hover` má vyšší
   specificitu (0,2,2) než `.nav-links a:hover` (0,2,1), a navíc
   se tenhle soubor načítá později. Při najetí tak byly dvě
   oranžové linky · podtržení textu a rámeček pod položkou.
   Oprava proto musí být tady, ne tam. */
.d6 .nav a,
.d6 .nav a:hover,
.d6 .nav a:focus-visible,
.d6 .nav-links a,
.d6 .nav-links a:hover,
.d6 .nav-links a:focus-visible{text-decoration:none}


/* ============================================================
   ČLÁNEK · třetí úroveň stránek (3. 10. 2026)

   Styl je převzatý z náhledu, který Eliška schválila 30. 9.
   (`Podklady/nahled-web-v6-2026-10-01/clanek.html`, reakce „Cool").
   Vzor je drimalka.com/inspirace-zdarma.

   Podle pravidla tří úrovní ve vizual.md nemá článek hero s fotkou,
   oranžový pruh v nadpisu, pruh čísel ani pás citací. Má úzký
   sloupec textu, perex, odkaz zpět a na konci další články.

   Patička se nepřenášela · od 2. 10. je sdílená a vkládá ji sync.
   ============================================================ */
.d6 .clanek-hlava{padding:clamp(28px,4vw,48px) 0 0}
.d6 .uzky{max-width:720px;margin:0 auto;padding:0 clamp(16px,3vw,28px)}
.d6 .zpet{font:400 15px/1.3 var(--sans);color:var(--ink-soft);text-decoration:none;display:inline-block}
.d6 .zpet:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.d6 .clanek-hlava h1{font-size:clamp(40px,6.4vw,56px);line-height:1.06;letter-spacing:-.02em;margin-top:16px}
.d6 .perex{font:400 clamp(22px,3vw,26px)/1.5 var(--head);color:#333029;margin-top:26px;max-width:66ch}
.d6 .meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:32px;padding:22px 0;border-top:1px solid var(--line);font-size:15px;color:var(--ink-soft)}
.d6 .titulni-foto{max-width:720px;margin:clamp(24px,3vw,36px) auto 0;padding:0 clamp(16px,3vw,28px)}
.d6 .titulni-foto img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-velky);background:var(--papir-2)}
.d6 .text{font:400 clamp(17px,1.9vw,19px)/1.55 var(--sans);color:var(--ink);padding-top:clamp(30px,4vw,48px);padding-bottom:clamp(40px,6vw,72px)}
.d6 .text p{margin-top:1.05em}
.d6 .text p + ul{margin-top:.35em}
.d6 .text p:first-child{margin-top:0}
.d6 .text strong{font-weight:700}
.d6 .text a{color:var(--ink);text-decoration-color:var(--oranz);text-decoration-thickness:2px;text-underline-offset:3px}
.d6 .text a:hover{background:var(--oranz);text-decoration-color:transparent}
.d6 .text h2{font-size:clamp(26px,3.4vw,30px);line-height:1.2;margin:clamp(40px,5vw,52px) 0 20px}
.d6 .text h3{font-size:clamp(22px,2.8vw,24px);line-height:1.25;margin:32px 0 12px}
.d6 .text ul{margin:.6em 0 0;padding-left:1.3em}
.d6 .text li{margin-top:.15em;padding-left:.2em}
.d6 .text li::marker{color:var(--oranz)}
.d6 .tabulka-obal{margin:1.6em 0 0;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-velky);background:var(--bila)}
.d6 .tabulka-obal table{width:100%;border-collapse:collapse;font:400 16px/1.5 var(--sans);min-width:460px}
.d6 .tabulka-obal th{font:600 12px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-align:left;background:var(--papir-2);padding:14px 18px}
.d6 .tabulka-obal td{padding:14px 18px;border-top:1px solid var(--line);vertical-align:top}
.d6 .tabulka-obal td:first-child{font-weight:500}
.d6 .callout{margin:1.8em 0 0;padding:clamp(20px,3vw,28px);background:var(--papir-2);border:1px solid var(--line);border-radius:var(--r-velky);font:400 17px/1.55 var(--sans)}
.d6 .callout p{margin:0}
.d6 .callout strong{font-weight:600}
.d6 .callout--cta{background:var(--bila);border-color:var(--ink)}
.d6 .callout--cta p{font-size:18px}
.d6 .sipka-odkaz{display:inline-block;margin-top:16px;font:600 16px/1.3 var(--sans);color:var(--ink);text-decoration:none!important;border-bottom:1px solid var(--ink);padding-bottom:2px}
.d6 .sipka-odkaz:hover{background:transparent!important;border-bottom-color:var(--oranz)}
.d6 .faq-list{margin-top:1.2em;border-top:1px solid var(--line)}
.d6 .faq-list details{border-bottom:1px solid var(--line)}
.d6 .faq-list summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;font:700 clamp(19px,2.4vw,21px)/1.3 var(--head);position:relative}
.d6 .faq-list summary::-webkit-details-marker{display:none}
.d6 .faq-list summary::after{content:"";position:absolute;right:4px;top:50%;width:11px;height:11px;margin-top:-8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .15s}
.d6 .faq-list details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.d6 .faq-list summary:focus-visible{outline:3px solid var(--oranz);outline-offset:2px}
.d6 .faq-list details p{margin:0 0 18px;font:400 16px/1.55 var(--sans);color:var(--ink-soft)}
.d6 .dalsi-clanky{display:grid;gap:18px}
.d6 .dalsi-clanky .clanek-telo{padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;gap:12px;flex:1}
.d6 .dalsi-clanky .stitek{font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.d6 .dalsi-clanky h3{font-size:clamp(22px,2.2vw,25px);line-height:1.15}
@media (min-width:900px){.d6 .dalsi-clanky{grid-template-columns:repeat(3,1fr)}}

/* Mřížka dalších článků v přehledu (3. 10. 2026). */
.d6 .clanky-mrizka{display:grid;gap:20px;margin-top:20px}
@media(min-width:700px){.d6 .clanky-mrizka{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.d6 .clanky-mrizka{grid-template-columns:repeat(3,minmax(0,1fr))}}
.d6 .clanky-mrizka .clanek-mensi{flex-direction:column}
.d6 .clanky-mrizka .clanek-mensi .foto-misto{aspect-ratio:16/9;flex:none}

/* --- Tělo článku v běžné váze (3. 10. 2026) ------------------
   Eliška: „články jsou psané tučným písmem, vůbec to není čtivé."
   CSS žádalo váhu 400, ale odkaz na Google Fonts načítal
   u Crimson Pro jen 600 a 700. Prohlížeč proto sáhl po nejbližší
   dostupné, tedy polotučné, a celý text článku vypadal tučně.
   Váha 400 se doplnila do odkazu na všech stránkách. */
.d6 .text{font-weight:400}
.d6 .text p, .d6 .text li{font-weight:400}

/* --- Posuvník ceny a doplňky na Produkci (3. 10. 2026) -------
   Posuvník řídí js/cena-podcastu.js, markup se přenesl doslova. */
.d6 .cena-tahlo{display:grid;gap:10px;margin-top:4px}
.d6 .cena-stitek{font:600 12px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:0}
.d6 .cena-delka{font:600 17px/1.3 var(--sans);margin:0}
.d6 .cena-tahlo input[type=range]{width:100%;accent-color:var(--oranz);margin:4px 0}
.d6 .cena-skala{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft)}
.d6 .cena-vysledek{font:700 clamp(34px,3.6vw,44px)/1 var(--cisla);letter-spacing:-.04em;margin:8px 0 0}
.d6 .doplnky{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:0;
  border:1px solid var(--line);border-radius:var(--r-velky);overflow:hidden;background:var(--bila)}
.d6 .doplnky li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;
  padding:16px clamp(18px,2.2vw,24px);border-top:1px solid var(--line);font-size:17px}
.d6 .doplnky li:first-child{border-top:0}
.d6 .doplnky .cena{color:var(--ink-soft);font-size:16px}
.d6 .pod-sekci{font-size:clamp(21px,2.1vw,26px);line-height:1.1;margin:clamp(30px,4vw,44px) 0 0}

/* --- Mřížka fotek a trojice formátů (3. 10. 2026) -------------
   Obojí vzniklo pro případovou studii Raiffeisenbank. Na stránce
   byly Klapčiny .rf-photos a .rf-embeds, které se s indexem
   nepotkávaly. Drží stejné proměnné jako zbytek V6.

   Fotky jedou ve sloupcích, ne v mřížce, aby si každá nechala
   svůj poměr stran. Stejný princip jako .zed, jen na světlé ploše. */
.d6 .foto-mrizka{column-count:2;column-gap:14px}
@media(min-width:720px){.d6 .foto-mrizka{column-count:3;column-gap:16px}}
@media(min-width:1080px){.d6 .foto-mrizka{column-count:4;column-gap:18px}}
.d6 .foto-mrizka img{break-inside:avoid;display:block;width:100%;height:auto;
  margin:0 0 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--papir-2)}
@media(min-width:720px){.d6 .foto-mrizka img{margin-bottom:16px}}
@media(min-width:1080px){.d6 .foto-mrizka img{margin-bottom:18px}}

/* Tři formáty vedle sebe. Každé video má jiný poměr stran, proto se
   nikde nenastavuje výška · karty se zarovnávají nahoře a rostou
   podle videa. */
.d6 .formaty{display:grid;gap:20px;align-items:start}
@media(min-width:860px){.d6 .formaty{grid-template-columns:repeat(3,minmax(0,1fr))}}
.d6 .format{margin:0;background:var(--bila);border:1px solid var(--line);
  border-radius:var(--r-velky);overflow:hidden;display:flex;flex-direction:column}
/* Všechna tři videa mají stejně vysoké okno a dosedají doprostřed.
   Bez toho svislé 9:16 přeroste zbylá dvě na dvojnásobek a sekce se
   rozjede. Takhle je rozdíl v poměru stran vidět vedle sebe, což je
   přesně to, co ta sekce ukazuje. */
.d6 .format video{display:block;width:100%;height:clamp(240px,26vw,330px);
  object-fit:contain;background:var(--ink-2)}
.d6 .format figcaption{display:grid;gap:3px;padding:16px clamp(16px,2vw,20px) 18px}
.d6 .format figcaption b{font:600 16px/1.25 var(--sans)}
.d6 .format figcaption span{font-size:14px;line-height:1.5;color:var(--ink-soft)}
.d6 .format figcaption a{color:var(--oranz-tm);text-decoration:underline;text-underline-offset:3px}

/* --- Kvíz kalkulaček ve V6 (3. 10. 2026) ----------------------
   Obě kalkulačky si nesly Klapčin kvíz: ostré rohy, šedé karty,
   nadpis otázky v 16px. Značkování se nesmí sáhnout, protože na
   něj míří calc.js, takže se stejné třídy jen převlékají pod .d6.
   Pruh kolem je od 3. 10. oranžový (viz navrh.css). */
.d6 .quiz-progress{max-width:300px}
.d6 .q-label{font:600 12px/1 var(--sans);letter-spacing:.1em}
.d6 .qpanel .q{font:700 clamp(21px,2.4vw,28px)/1.15 var(--head);margin-bottom:20px}
.d6 .opt{border:1px solid var(--line);border-radius:var(--r-velky);background:var(--bila);
  font:500 16px/1.4 var(--sans);color:var(--ink);padding:18px 20px;box-shadow:none;
  transition:border-color .15s,transform .15s}
.d6 .opt:hover{border-color:var(--ink);transform:none;box-shadow:none}
.d6 .opt.active{background:var(--oranz);border-color:var(--oranz);color:var(--ink);box-shadow:none}
.d6 .opt .sub{font-size:13.5px;color:var(--ink-soft);opacity:1;margin-top:5px}
.d6 .opt.active .sub{color:#4A2000}
.d6 .hint{font-size:14px;line-height:1.6;margin-top:16px}
.d6 .quiz-back,.d6 .quiz-restart{font:600 15px/1 var(--sans)}

.d6 .result-card{border:1px solid var(--line);border-radius:var(--r-velky);
  background:var(--bila);box-shadow:none;padding:clamp(26px,3vw,34px) clamp(22px,2.6vw,30px) 8px}
.d6 .result-card::before{background:var(--oranz)}
.d6 .result-lbl{font:600 12px/1 var(--sans);letter-spacing:.1em;color:var(--ink-soft);margin-bottom:12px}
/* Číslo bylo vyřezané z přechodu průhledným písmem · ve V6 je to
   prostě číslo v číslicovém řezu, stejně jako ceny na indexu. */
.d6 .result-amt{font:700 clamp(38px,6vw,54px)/1 var(--cisla);letter-spacing:-.04em;
  background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
.d6 .result-note{font-size:15px;line-height:1.6;color:var(--ink-soft);margin-top:14px}
.d6 .rozpad-toggle{font:600 12px/1 var(--sans);letter-spacing:.1em;color:var(--oranz-tm);
  border-top:1px solid var(--line);padding:16px 0}
.d6 .rozpad .radek{border-color:var(--line)}
.d6 .incl li{font-size:15.5px;line-height:1.6;color:var(--ink-soft);padding-left:24px}
.d6 .incl li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;
  border-radius:50%;background:var(--oranz)}
.d6 .dph-note{font-size:13.5px;line-height:1.55;color:var(--ink-soft)}

/* Klapčina tlačítka uvnitř .d6 (3. 10. 2026)
   Kalkulačky dostaly .d6 na <body> a tím se na ně pustilo V6 pravidlo
   .d6 a{color:inherit}. To má specifičnost (0,1,1) a přebilo Klapčino
   .btn-primary{color:...} (0,1,0), takže tlačítko „Napište mi" vyšlo
   černé písmo na černém pozadí. Nebylo ho vidět vůbec.
   Tahle pravidla mají (0,2,0), takže vyhrají, a zároveň tlačítka
   převlékají do podoby .tl z indexu. */
.d6 .btn,
.d6 .btn--primary,
.d6 .btn-primary,
.d6 .btn-light,
.d6 .cta-btn,
.d6 .submit-btn{display:inline-flex;align-items:center;gap:8px;padding:15px 26px;
  border-radius:var(--r);font:600 16px/1 var(--sans);text-decoration:none;
  border:2px solid var(--ink);background:var(--ink);color:var(--papir);
  cursor:pointer;box-shadow:none;transition:background .15s,border-color .15s,color .15s}
.d6 .btn:hover,
.d6 .btn--primary:hover,
.d6 .btn-primary:hover,
.d6 .btn-light:hover,
.d6 .cta-btn:hover,
.d6 .submit-btn:hover{background:var(--oranz);border-color:var(--oranz);color:var(--ink);
  transform:none;filter:none}

/* Odkazy v textu kalkulaček · .d6 a{color:inherit} je jinak odbarví na
   obyčejný text a nepoznáte, že se na ně dá kliknout. */
.d6 .hint a,
.d6 .slib-karta a,
.d6 .dph-note a{color:var(--oranz-tm);text-decoration:underline;text-underline-offset:3px}

/* Odkaz „Přeskočit na obsah" pro ovládání klávesnicí (3. 10. 2026)
   Stejná past jako u tlačítek: .d6 a{color:inherit} (0,1,1) přebilo
   .skip-link{color:var(--cream)} (0,1,0), takže po zaostření tabulátorem
   vyšel inkoust na inkoustu, 1,00:1. Byl vidět, ale nedal se přečíst. */
.d6 .skip-link{background:var(--ink);color:var(--papir);border-radius:0 0 var(--r) 0;
  font:600 14px/1 var(--sans);padding:14px 20px}
.d6 .skip-link:focus-visible{outline:2px solid var(--oranz);outline-offset:2px}

/* --- Rozcestník (3. 10. 2026) ---------------------------------
   Stránka pro odkaz v bio. Zůstává úzký sloupec s fotkou a proužky,
   protože o rytmu rozhodla Eliška zvlášť. Mění se jen vzhled: řezy,
   polomery a oranžová z indexu místo Klapčiných ostrých hran. */
.d6 .rc-name{font:700 26px/1.1 var(--head)}
.d6 .rc-tagline{font:600 14px/1.3 var(--sans);color:var(--oranz-tm)}
.d6 .rc-bio{font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:none}
.d6 .rc-photo{border:2px solid var(--line)}
.d6 .rc-social a{border:1px solid var(--line);background:var(--bila);color:var(--ink)}
.d6 .rc-social a:hover{border-color:var(--ink);transform:none;box-shadow:none}
.d6 .rc-section-label{font:600 12px/1 var(--sans);letter-spacing:.1em;color:var(--ink-soft)}
.d6 .rc-callout,
.d6 .rc-card{background:var(--bila);border:1px solid var(--line);border-radius:var(--r-velky);box-shadow:none}
.d6 .rc-callout::before,
.d6 .rc-card::before{background:var(--oranz);height:3px}
.d6 .rc-card:hover{border-color:var(--ink);transform:none;box-shadow:none}
.d6 .rc-card--featured{border-color:var(--oranz)}
.d6 .rc-callout h2,
.d6 .rc-card h2,
.d6 .rc-consult h2{font-family:var(--head);line-height:1.15}
.d6 .rc-callout p,
.d6 .rc-card p{color:var(--ink-soft);font-size:15px;line-height:1.6}
.d6 .rc-price{font:600 12.5px/1 var(--sans);letter-spacing:.06em;color:var(--ink-soft)}
.d6 .rc-strip{border-radius:var(--r-velky);border:1px solid var(--line);background:var(--bila)}
.d6 .rc-strip:hover{background:var(--papir-2);border-color:var(--ink);transform:none}
.d6 .rc-strip-ikona{background:var(--papir-2);color:var(--oranz-tm)}
.d6 .rc-strip-text strong{font:600 16px/1.3 var(--sans);color:var(--ink)}
.d6 .rc-strip-text span{color:var(--ink-soft)}
.d6 .rc-strip-sipka{color:var(--oranz-tm)}
.d6 .rc-consult{border-radius:var(--r-velky)}
.d6 .rc-consult .rc-price{color:#CFCBC0}
/* Odznak v kartě · Klapka ho dávala do rohu s přechodem */
.d6 .rc-card .badge{background:var(--oranz);color:var(--ink);border-radius:var(--r);
  font:600 11px/1 var(--sans);padding:6px 10px;box-shadow:none;border:0}

/* .link-arrow je Klapčin textový odkaz se šipkou · .d6 a{color:inherit}
   by ho odbarvilo na obyčejný text. */
.d6 .link-arrow{color:var(--oranz-tm);font:600 15px/1 var(--sans)}
.d6 .link-arrow:hover{color:var(--ink)}

/* Moje první video (4. 10. 2026) */
.d6 .tl.brzy{align-self:flex-start;background:var(--papir-2);border-color:var(--line);color:var(--ink-soft);cursor:default;pointer-events:none}
.d6 .hero-text > .pozn{margin:0}
.d6 .foto-siroka{margin:clamp(20px,3vw,32px) 0 0}
.d6 .foto-siroka img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-velky);background:var(--papir-2)}
.d6 .postup.moduly{grid-template-columns:1fr}
@media(min-width:760px){.d6 .postup.moduly{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.d6 .postup.moduly{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.d6 .moduly .krok h3{font-size:clamp(21px,2vw,24px);line-height:1.12}
.d6 .moduly .krok ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.d6 .moduly .krok li{position:relative;padding-left:22px;font-size:16px;line-height:1.55;color:#3A372F}
.d6 .moduly .krok li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--oranz)}
.d6 .moduly .krok p{margin:0;font-size:17px;line-height:1.55;color:#3A372F}
.d6 .cena-karta{justify-content:center}
.d6 .cena-karta .cena{margin:0;padding:0;border:0;display:grid;gap:8px}
.d6 .cena-karta .cena strong{font:700 clamp(44px,6vw,64px)/1 var(--cisla);letter-spacing:-.03em}
.d6 .cena-karta .cena span{font-size:16px;line-height:1.55;color:var(--ink-soft)}
.d6 .garance{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:clamp(28px,4vw,44px)}
.d6 .garance img{width:112px;height:auto;display:block}
.d6 .garance .hlava{margin:0}
@media(min-width:700px){.d6 .garance{flex-direction:row;align-items:center;gap:32px}.d6 .garance img{width:136px}}
.d6 .upsell{margin-top:clamp(28px,4vw,44px)}
.d6 .upsell .cena{margin:0;padding:0;border:0}
.d6 .postup.moduly::before{display:none}
.d6 .sluzba .hodnota{margin:0;padding-top:14px;border-top:1px solid var(--line);font:600 15px/1.2 var(--sans);color:var(--ink-soft)}

/* Stránka Služby po přestavbě na jeden směr (17. 10. 2026)
   Firemní produkce stojí sama v mřížce (jedno dítě = plná šířka) jako vedoucí
   karta, pod ní mezinadpis a zbytek ve dvou sloupcích, Konzultace zase sama
   dole. Mezery řeší layout, ne marginy na kartách · .hlava má vlastní
   margin-bottom, chybí jen odsazení shora mezi mřížkami. */
.d6 .sluzby.jedna{grid-template-columns:1fr}
.d6 .hlava-dalsi{margin-top:clamp(40px,5vw,64px)}
.d6 .sluzby-konz{margin-top:18px}
/* Konzultace je placená rada, ne produkce · tlumená plocha ji odliší od
   vedoucí karty, která má stejnou šířku. */
.d6 .sluzby-konz .sluzba{background:var(--papir-2)}

/* Jediná ukázka na střed (17. 10. 2026). Mřížka .ukazky je stavěná na tři
   kusy vedle sebe, jedno video by v ní stálo v třetině šířky a vypadalo
   zapomenuté. Šířka je omezená, ať se 16:9 nerozlije přes celou stránku. */
.d6 .ukazka-jedna{max-width:780px;margin-inline:auto}
.d6 .ukazka-jedna .ukazka{flex:none}

/* Dvě kartičky postupu vedle sebe (17. 10. 2026). Bez tohohle drží .postup.ctyri
   na širokém okně čtyři sloupce a dvě karty by stály v levé polovině s dírou
   vedle sebe. Tečkovaná linka nad kartami zůstává stejná jako u trojice. */
@media(min-width:760px){.d6 .postup.dve{grid-template-columns:repeat(2,minmax(0,1fr))}}