@charset "UTF-8";
/* ==========================================================================
   FALK efekt s.r.o. — hlavní styl
   Odvozeno z Adobe XD (falkefekt_web_20_vyroba.xd, artboard 1920 px).
   Rozměry jsou zapsané jako podíl návrhové šířky 1920 px, takže na velkých
   obrazovkách sedí návrh 1 : 1 a níž se plynule zmenšuje.
   ========================================================================== */

/* ------------------------------------------------------------- fonty ----- */
@font-face { font-family: Poppins; font-style: normal; font-weight: 200; font-display: swap;
  src: url(/pisma/poppins-200-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 200; font-display: swap;
  src: url(/pisma/poppins-200-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/pisma/poppins-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/pisma/poppins-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/pisma/poppins-500-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/pisma/poppins-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/pisma/poppins-600-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/pisma/poppins-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/pisma/poppins-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/pisma/poppins-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Náhrada za Segoe Script (systémový font Microsoftu bez webové licence). */
@font-face { font-family: "Falk Rukopis"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/pisma/falk-rukopis-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Falk Rukopis"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/pisma/falk-rukopis-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ------------------------------------------------------------- tokeny ---- */
:root {
  --fialova: #8C2583;
  --fialova-svetla: #BD39B2;
  --modra: #0072DB;
  --modra-svetla: #3AA1FF;
  --cerna: #000;
  --bila: #fff;
  --seda-sekce: #F2F2F2;
  --seda-kontakty: #E3E3E3;
  --seda-pole: #F1F1F1;
  --seda-placeholder: #ACACAC;
  --seda-gdpr: #747474;

  --gradient: linear-gradient(324deg, #0072db 0%, #0072db 24.9%, #5c3fa1 50.3%, #7f2c8b 69.3%, #8c2583 74.7%, #8c2583 100%);
  --gradient-footer: linear-gradient(320deg, #0072db 0%, #255ec4 16.6%, #5c3fa1 44%, #7f2c8b 64.4%, #8c2583 75.4%, #8c2583 100%);

  /* měřítko návrhu: 1 návrhový px */
  --w: clamp(1440px, 100vw, 1920px);
  --px: calc(var(--w) / 1920);
  --sirka: min(73.854vw, 1418px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(70 * var(--px)); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: Poppins, "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  font-size: calc(21 * var(--px));
  line-height: 1.55;
  color: var(--cerna);
  background: var(--bila);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--modra); outline-offset: 3px; border-radius: 4px; }

.obsah { width: var(--sirka); margin-inline: auto; }
.skryte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.preskocit {
  position: absolute; left: 50%; translate: -50% -120%;
  z-index: 200; background: var(--bila); color: var(--fialova);
  padding: .75rem 1.25rem; border-radius: 0 0 12px 12px; font-weight: 600;
}
.preskocit:focus { translate: -50% 0; }

/* ------------------------------------------------------------ typografie - */
.h2 {
  margin: 0;
  font-size: calc(50 * var(--px));
  font-weight: 700;
  line-height: 1.2;
  color: var(--fialova);
  text-align: center;
}
.perex-sekce {
  margin: calc(23 * var(--px)) auto 0;
  max-width: calc(1000 * var(--px));
  text-align: center;
}
.zvyrazneni { color: var(--fialova); font-weight: 500; }

/* --------------------------------------------------------------- hlavicka */
.hlavicka {
  position: fixed; inset: 0 0 auto; z-index: 100;
  overflow: visible; display: flex; align-items: center;
  height: calc(92 * var(--px));
  transition: background-color .25s ease, height .25s ease, box-shadow .25s ease;
}
.hlavicka__vnitrek {
  position: relative; z-index: 1;
  width: calc(1521 * var(--px)); margin-left: calc(179 * var(--px));
  display: flex; align-items: center;
}
.hlavicka__logo { display: flex; align-items: center; flex: 0 0 auto; margin-top: calc(7 * var(--px)); }
.hlavicka__logo svg { width: calc(120 * var(--px)); height: auto; transition: width .25s ease; }

.hlavicka nav { margin-left: calc(119 * var(--px)); }
.menu { display: flex; align-items: center; gap: calc(70 * var(--px)); list-style: none; margin: 0; padding: 0; }
.menu a {
  font-size: calc(19 * var(--px)); font-weight: 600; color: var(--bila);
  text-decoration: none; padding-block: calc(6 * var(--px));
  border-bottom: 2px solid transparent; transition: border-color .2s ease, color .2s ease;
}
.menu a:hover, .menu a[aria-current="true"] { border-bottom-color: currentColor; }

.hlavicka__kontakt { margin-left: auto; display: flex; align-items: center; gap: calc(55 * var(--px)); }
.hlavicka__kontakt a {
  display: inline-flex; align-items: center; gap: calc(10 * var(--px));
  font-size: calc(16 * var(--px)); font-weight: 500; color: var(--bila); text-decoration: none;
}
.hlavicka__kontakt svg { width: calc(18 * var(--px)); height: auto; }
.hlavicka__kontakt svg path, .hlavicka__kontakt svg rect { stroke: currentColor; fill: none; }
.hlavicka__kontakt a:hover { text-decoration: underline; }

/* stav po odscrollování – bílý pruh, fialové menu */
.hlavicka.je-prilepena {
  background: var(--bila); height: calc(50 * var(--px));
  box-shadow: 0 2px 18px rgb(0 0 0 / .08);
}
.hlavicka.je-prilepena .hlavicka__logo svg { width: calc(73 * var(--px)); }
.hlavicka.je-prilepena .menu a { color: var(--fialova); }
.hlavicka.je-prilepena .hlavicka__kontakt a { color: var(--modra); }
.hlavicka .logo-gradient { display: none; }
.hlavicka .logo-bila { display: block; }
.hlavicka.je-prilepena .logo-gradient { display: block; }
.hlavicka.je-prilepena .logo-bila { display: none; }

.prepinac-menu { display: none; }

/* ------------------------------------------------------------------- hero */
.hero { position: relative; height: calc(833 * var(--px)); overflow: hidden; background: #0b1428; }
.hero__snimky { position: absolute; inset: 0; }
.hero__snimek {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.1s ease;
  background-size: cover; background-position: center;
}
.hero__snimek.je-aktivni { opacity: 1; }
.hero__snimek::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(4 12 30 / .72) 0%, rgb(4 12 30 / .38) 42%, rgb(4 12 30 / 0) 70%);
}
.hero__obsah { position: relative; z-index: 2; width: var(--sirka); margin-inline: auto; padding-top: calc(194 * var(--px)); }
.hero__nadpis {
  margin: 0; color: var(--bila); font-weight: 700;
  font-size: calc(157 * var(--px)); line-height: .95; letter-spacing: -.01em;
}
.hero__perex {
  margin: calc(35 * var(--px)) 0 0; color: var(--bila);
  font-size: calc(45 * var(--px)); font-weight: 600; line-height: 1.2;
  max-width: calc(588 * var(--px));
}
.hero__cta { margin-top: calc(84 * var(--px)); margin-bottom: 0; }

.hero__tecky {
  position: absolute; z-index: 3; left: 50%; translate: -50% 0;
  bottom: calc(49 * var(--px)); display: flex; gap: calc(12 * var(--px));
}
.hero__tecka {
  width: calc(9 * var(--px)); height: calc(9 * var(--px)); min-width: 8px; min-height: 8px;
  padding: 0; border: 2px solid var(--bila); border-radius: 50%;
  background: transparent; cursor: pointer;
}
.hero__tecka.je-aktivni { background: var(--bila); }

/* Stékající barva v pravém horním rohu – v XD součást tmavého menu.
   Kotví se na pravý okraj, protože 1764 + 156 = 1920. */
/* Po přilepení lišty se efekt zmenší na 60 % (156 -> 93,6 px). */
.hlavicka__barva {
  position: absolute; top: 0; right: 0;
  width: calc(156 * var(--px)); line-height: 0; pointer-events: none;
  transition: width .25s ease;
}
.hlavicka.je-prilepena .hlavicka__barva {
  /* Po odrolování je lišta bílá a stékající barva by přes ni přetékala
     dolů na obsah. Zmenší se proto celá tak, aby se do lišty vešla —
     ořezávat ji nejde, uťalo by to kapky uprostřed tvaru. Nad úvodním
     sliderem, kde je lišta průhledná, stéká dál přes celý hero. */
  width: auto;
  /* Necelá výška lišty: kapky se tak nedotýkají její spodní hrany
     a je vidět, že stékají do prázdna, ne že jsou uťaté. */
  height: 78%;
}
.hlavicka.je-prilepena .hlavicka__barva svg { width: auto; height: 100%; }
.hlavicka__barva svg { width: 100%; height: auto; display: block; }

.hero__odznak { position: absolute; z-index: 3; right: calc(165 * var(--px)); bottom: calc(9 * var(--px)); }
.hero__odznak svg { width: calc(237 * var(--px)); height: auto; }

/* --------------------------------------------------------------- tlačítka */
.tlacitko {
  --vyska: calc(101 * var(--px));
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(18 * var(--px));
  min-height: var(--vyska); padding-inline: calc(46 * var(--px));
  border: 0; border-radius: 999px; cursor: pointer;
  color: var(--bila); font-family: inherit; font-size: calc(20 * var(--px)); font-weight: 600;
  text-decoration: none; background: var(--gradient); background-size: 235% 235%;
  background-position: 0% 50%;
  transition: background-position .45s ease, transform .2s ease, box-shadow .2s ease;
}
.tlacitko:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 12px 28px rgb(140 37 131 / .28); }
.tlacitko:active { transform: translateY(0); }
.tlacitko svg { width: calc(16 * var(--px)); height: auto; flex: 0 0 auto; }
.tlacitko svg path { stroke: currentColor; fill: none; }
.tlacitko--male { --vyska: calc(76 * var(--px)); min-width: calc(303 * var(--px)); }

/* ------------------------------------------------------------- sekce úvod */
.sekce { padding-block: calc(170 * var(--px)) calc(140 * var(--px)); }
.sekce--seda { background: var(--seda-sekce); }
.sekce--uvod { padding-block: calc(90 * var(--px)) calc(91 * var(--px)); }
.sekce--reference { padding-block: calc(170 * var(--px)) calc(118 * var(--px)); }
.sekce--proc { padding-block: calc(175 * var(--px)) calc(107 * var(--px)); }
.sekce--ukazka {
  position: relative; background: transparent;
  padding-block: calc(184 * var(--px)) calc(187 * var(--px));
}
.sekce--ukazka::before {
  content: ""; position: absolute; inset: 0 0 auto; height: calc(747 * var(--px));
  background: var(--seda-sekce);
}
.sekce--ukazka > .obsah { position: relative; }
.sekce--sluzby { padding-block: calc(150 * var(--px)) calc(169 * var(--px)); }
.sekce--kontakt {
  position: relative; background: transparent;
  padding-block: calc(177 * var(--px)) 0;
}
.sekce--kontakt::before {
  content: ""; position: absolute; inset: 0 0 auto; height: calc(1047 * var(--px));
  background: var(--seda-sekce);
}
.sekce--kontakt > .obsah { position: relative; }
.sekce--poptavka { padding-block: calc(179 * var(--px)) calc(96 * var(--px)); }

.uvod__rukopis {
  display: inline-block; font-family: "Falk Rukopis", Poppins, cursive;
  font-weight: 700; font-size: calc(27 * var(--px)); line-height: 1.05;
  color: var(--cerna); vertical-align: middle; margin-inline: calc(8 * var(--px));
}
.uvod__rukopis svg { width: calc(18 * var(--px)); display: inline-block; vertical-align: baseline; margin-left: calc(6 * var(--px)); }
.uvod__rukopis svg path { stroke: var(--fialova); fill: none; }

/* Rukopis vede na poptávkový formulář. Šipka na konci to naznačuje,
   tak ať se podle toho i chová.

   Klikací plocha je záměrně vyšší než samotné písmo. Rukopis je úzký
   a leží uvnitř odstavce, takže se do něj špatně trefuje – svislé
   odsazení to spraví, aniž by se cokoli posunulo. */
.uvod__rukopis { text-decoration: none; cursor: pointer;
  padding-block: calc(8 * var(--px)); margin-block: calc(-8 * var(--px));
  transition: color .16s ease, translate .16s ease; }
.uvod__rukopis:hover, .uvod__rukopis:focus-visible { color: var(--modra); }
.uvod__rukopis:hover svg, .uvod__rukopis:focus-visible svg { translate: calc(4 * var(--px)) 0; }
.uvod__rukopis svg { transition: translate .16s ease; }
.uvod__rukopis:hover svg path, .uvod__rukopis:focus-visible svg path { stroke: var(--modra); }
.uvod__rukopis:focus-visible { outline: 2px solid var(--modra); outline-offset: 3px;
  border-radius: calc(4 * var(--px)); }

/* ------------------------------------------------------------- reference  */
.reference-mrizka {
  margin-top: calc(161 * var(--px));
  display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(40 * var(--px));
}
.dlazdice {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: none; aspect-ratio: 446 / 363; border-radius: calc(24 * var(--px));
  overflow: hidden; font-family: inherit; color: inherit; text-align: left;
}
.dlazdice__ramecek {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  box-shadow: 0 10px 30px rgb(0 0 0 / .12);
  transition: box-shadow .35s ease;
}
.dlazdice__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Fotografie „před“ se při najetí odkryje setřením zprava doleva. */
.dlazdice__foto--pred {
  clip-path: inset(0 0 0 100%);
  transition: clip-path .55s cubic-bezier(.4, 0, .2, 1);
}
.dlazdice:hover .dlazdice__ramecek,
.dlazdice:focus-visible .dlazdice__ramecek { box-shadow: 0 18px 44px rgb(0 0 0 / .22); }
.dlazdice:hover .dlazdice__foto--pred,
.dlazdice:focus-visible .dlazdice__foto--pred { clip-path: inset(0 0 0 0); }
.dlazdice__popisek {
  position: absolute; left: 0; right: 0; bottom: calc(16 * var(--px));
  z-index: 6; text-align: center; font-size: calc(20 * var(--px));
  color: var(--bila); text-shadow: 0 2px 12px rgb(0 0 0 / .8);
  opacity: 0; transition: opacity .3s ease;
}
.dlazdice:hover .dlazdice__popisek, .dlazdice:focus-visible .dlazdice__popisek { opacity: 1; }
.dlazdice__stitek {
  position: absolute; z-index: 6; top: calc(14 * var(--px)); left: calc(14 * var(--px));
  padding: calc(4 * var(--px)) calc(14 * var(--px)); border-radius: 999px;
  background: rgb(255 255 255 / .92); color: var(--fialova);
  font-size: calc(14 * var(--px)); font-weight: 600; opacity: 0; transition: opacity .3s ease;
}
/* Štítek stavu. „Po“ je vidět rovnou, při najetí se prohodí za „Před“
   spolu s fotografií — tak je poznat, co je výchozí stav. */
.dlazdice__stitek--po { opacity: 1; }
.dlazdice:hover .dlazdice__stitek--po,
.dlazdice:focus-visible .dlazdice__stitek--po { opacity: 0; }
.dlazdice:hover .dlazdice__stitek--pred,
.dlazdice:focus-visible .dlazdice__stitek--pred { opacity: 1; }

.stred { margin-top: calc(155 * var(--px)); text-align: center; }
.sekce--poptavka .stred { margin-top: calc(78 * var(--px)); }

/* -------------------------------------------------------------- výhody -- */
.vyhody { margin-top: calc(76 * var(--px)); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(40 * var(--px)); }
.vyhoda { text-align: center; }
.vyhoda__ikona { height: calc(80 * var(--px)); display: flex; align-items: center; justify-content: center; }
.vyhoda__ikona svg { width: auto; height: 100%; }
.vyhoda p { margin: calc(28 * var(--px)) auto 0; font-size: calc(22 * var(--px)); font-weight: 600; line-height: 1.35; max-width: calc(330 * var(--px)); }

/* ------------------------------------------------------------- ukázka --- */
.ukazka { display: grid; grid-template-columns: calc(505 * var(--px)) 1fr; gap: calc(90 * var(--px)); align-items: center; }
.ukazka__nadpis { margin: 0; font-size: calc(50 * var(--px)); font-weight: 700; line-height: 1.15; color: var(--fialova); }
.ukazka__text { margin: calc(28 * var(--px)) 0 0; }
.ukazka__vyzva { margin: calc(24 * var(--px)) 0 0; color: var(--fialova); font-weight: 500; display: flex; align-items: flex-end; gap: calc(12 * var(--px)); }
.ukazka__vyzva svg { width: calc(26 * var(--px)); flex: 0 0 auto; }
.ukazka__vyzva svg path { stroke: var(--fialova); fill: none; }
.ukazka__foto { position: relative; border-radius: calc(30 * var(--px)); overflow: hidden; aspect-ratio: 831 / 677; box-shadow: 0 24px 60px rgb(0 0 0 / .18); cursor: pointer; border: 0; padding: 0; background: none; width: 100%; }
.ukazka__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ukazka__foto .je-pred {
  clip-path: inset(0 0 0 100%);
  transition: clip-path .7s cubic-bezier(.4, 0, .2, 1);
}
.ukazka__foto:hover .je-pred,
.ukazka__foto:focus-visible .je-pred { clip-path: inset(0 0 0 0); }
/* Na myši řídí odkrytí vodorovná poloha kurzoru (JS nastavuje clip-path
   přímo na obrázku), přechod je proto krátký, ať stíhá. */
.ukazka__foto.je-rizeno-kurzorem .je-pred { transition: none; }

/* --------------------------------------------------- celoplošná fotografie */
/* Barevné bubliny mají v XD režim prolnutí „color“: převezmou odstín
   a sytost bubliny, ale jas fotografie – proto vycházejí tmavé a syté.
   Aby se prolnutí dostalo až k fotce, nesmí mezi ní a bublinami vzniknout
   další vrstva (z-index, opacity, transform ani mix-blend-mode na obalu). */
.foto-pas { position: relative; isolation: isolate; height: calc(1239 * var(--px)); overflow: hidden; background: #10131c; }
.foto-pas img { width: 100%; height: 100%; object-fit: cover; }
.foto-pas__gradient {
  position: absolute; top: calc(645 * var(--px)); right: calc(205 * var(--px));
  width: calc(599 * var(--px)); line-height: 0; pointer-events: none;
}
.foto-pas__gradient svg { width: 100%; height: auto; display: block; }
.foto-pas__popisek {
  position: absolute; z-index: 3; top: calc(779 * var(--px)); right: calc(210 * var(--px));
  color: var(--bila); font-weight: 200; font-size: calc(74 * var(--px));
  line-height: .68; text-align: right; margin: 0;
}
/* Loop podle grafického manuálu: bubliny se pomalu prolínají přes sebe.
   Transformace sedí přímo na skupině, která nese „mix-blend-mode: color“ –
   kdyby byla na obalu, uzavřela by prolnutí do vlastní vrstvy. */
.foto-pas__gradient svg { overflow: visible; }
.foto-pas__gradient .bublina {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: bublina-plava 16s ease-in-out infinite;
  will-change: transform;
}
.foto-pas__gradient .bublina--2 { animation-duration: 19s; animation-delay: -4.5s; }
.foto-pas__gradient .bublina--3 { animation-duration: 22s; animation-delay: -9s; }
.foto-pas__gradient .bublina--4 { animation-duration: 18s; animation-delay: -13s; }
@keyframes bublina-plava {
  0%, 100% { transform: translate(0, 0) scale(1);            opacity: .84; }
  25%      { transform: translate(14px, -10px) scale(1.06);  opacity: 1; }
  50%      { transform: translate(4px, 12px) scale(.96);     opacity: .9; }
  75%      { transform: translate(-13px, -4px) scale(1.03);  opacity: 1; }
}

/* -------------------------------------------------------------- služby -- */
.sluzby { margin-top: calc(215 * var(--px)); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(114 * var(--px)) calc(40 * var(--px)); }
.sluzba { text-align: center; text-decoration: none; color: inherit; display: block; padding: calc(10 * var(--px)); border-radius: calc(18 * var(--px)); transition: transform .25s ease; }
.sluzba__ikona { height: calc(96 * var(--px)); display: flex; align-items: flex-end; justify-content: center; }
.sluzba__ikona svg { width: auto; height: 100%; transition: transform .25s ease; }
.sluzba__nazev { margin: calc(26 * var(--px)) auto 0; font-size: calc(20 * var(--px)); font-weight: 500; line-height: 1.35; max-width: calc(230 * var(--px)); }
.sluzba:hover { transform: translateY(-4px); }
.sluzba:hover .sluzba__ikona svg { transform: scale(1.08); }
.sluzba:hover .sluzba__ikona svg [stroke] { stroke: var(--fialova); }
.sluzba:hover .sluzba__nazev { color: var(--fialova); }

/* ------------------------------------------------------------- kontakty - */
.kontakty-box {
  margin-top: calc(148 * var(--px)); background: var(--seda-kontakty);
  border-radius: calc(55 * var(--px)); padding: calc(97 * var(--px)) calc(136 * var(--px)) calc(84 * var(--px));
}
.kontakty-mrizka { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(77 * var(--px)) calc(64 * var(--px)); }
.kontakt { display: grid; grid-template-columns: 1fr calc(201 * var(--px)); gap: calc(24 * var(--px)); align-items: center; }
.kontakt__jmeno { margin: 0; font-size: calc(22 * var(--px)); font-weight: 700; line-height: 1.25; }
.kontakt__funkce { margin: 0; font-size: calc(22 * var(--px)); font-weight: 500; line-height: 1.25; }
.kontakt__radek { margin-top: calc(14 * var(--px)); display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.kontakt__radek a {
  display: inline-flex; align-items: center; gap: calc(14 * var(--px));
  font-size: calc(22 * var(--px)); font-weight: 600; color: var(--fialova); text-decoration: none;
}
.kontakt__radek a:hover { text-decoration: underline; }
.kontakt__radek svg { width: calc(24 * var(--px)); flex: 0 0 auto; }
.kontakt__radek svg [stroke] { stroke: var(--fialova); }
.kontakt__foto { width: calc(201 * var(--px)); height: calc(201 * var(--px)); border-radius: 50%; overflow: hidden; background: #C7C7C7; }
.kontakt__foto img { width: 100%; height: 100%; object-fit: cover; }

.kontakty-paticka { margin-top: calc(86 * var(--px)); display: flex; flex-wrap: wrap; gap: calc(20 * var(--px)) calc(64 * var(--px)); color: var(--fialova); font-size: calc(20 * var(--px)); line-height: 1.4; }
.kontakty-paticka strong { font-weight: 700; }

/* ------------------------------------------------------------- formulář - */
/* Formulář je v XD posunutý o 30 px doprava (281–1699 px), šířka zůstává 1418. */
.formular { margin-top: calc(100 * var(--px)); margin-left: calc(30 * var(--px)); margin-right: calc(-30 * var(--px)); }
.formular__radek { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(46 * var(--px)); margin-top: calc(26 * var(--px)); }
.formular__zprava { margin-top: calc(42 * var(--px)); }
.formular__nadpis-maly { margin: calc(28 * var(--px)) 0 0; font-size: calc(22 * var(--px)); font-weight: 600; }

.pole {
  width: 100%; min-height: calc(61 * var(--px));
  padding: calc(14 * var(--px)) calc(28 * var(--px));
  border: 1px solid transparent; border-radius: calc(38 * var(--px));
  background: var(--seda-pole); font-family: inherit; font-size: calc(17 * var(--px)); color: var(--cerna);
  transition: border-color .2s ease, background-color .2s ease;
}
.pole::placeholder { color: var(--seda-placeholder); }
.pole:focus { border-color: var(--fialova); background: var(--bila); outline: none; }
.pole--zprava { min-height: calc(266 * var(--px)); border-radius: calc(38 * var(--px)); resize: vertical; }
.pole.je-chybne { border-color: #C0392B; background: #FDF3F2; }

.chyba-pole { margin: calc(8 * var(--px)) 0 0 calc(28 * var(--px)); color: #C0392B; font-size: calc(15 * var(--px)); }

/* vlastní rozbalovací nabídka služeb */
.vyber { position: relative; max-width: calc(471 * var(--px)); }
.vyber__spoust {
  width: 100%; min-height: calc(61 * var(--px));
  display: flex; align-items: center; justify-content: space-between; gap: calc(20 * var(--px));
  padding: calc(12 * var(--px)) calc(24 * var(--px)) calc(12 * var(--px)) calc(35 * var(--px));
  background: var(--seda-pole); border: 1px solid transparent; border-radius: calc(31 * var(--px));
  font-family: inherit; font-size: calc(22 * var(--px)); font-weight: 600; text-align: left; cursor: pointer;
}
.vyber__spoust svg { width: calc(23 * var(--px)); flex: 0 0 auto; transition: transform .25s ease; }
.vyber__spoust svg path { fill: var(--fialova); }
.vyber.je-otevreny .vyber__spoust svg { transform: rotate(90deg); }
.vyber__nabidka {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; right: 0;
  margin: 0; padding: calc(20 * var(--px)) calc(28 * var(--px));
  list-style: none; background: var(--seda-kontakty); border-radius: calc(31 * var(--px));
  box-shadow: 0 18px 40px rgb(0 0 0 / .16); display: none; max-height: calc(430 * var(--px)); overflow-y: auto;
}
.vyber.je-otevreny .vyber__nabidka { display: block; }
.vyber__polozka { display: flex; align-items: flex-start; gap: calc(16 * var(--px)); padding: calc(7 * var(--px)) 0; cursor: pointer; font-size: calc(20 * var(--px)); font-weight: 500; }
.vyber__polozka input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Zaškrtávátko má tvar značky z loga FALK efekt – pilulka s okem,
   které se po zaškrtnutí přesune doprava. */
.prepinac, .vyber__ctverec, .gdpr__ctverec {
  position: relative; flex: 0 0 auto; display: inline-block;
  width: calc(2.05em * var(--pomer, 1)); height: calc(1.08em * var(--pomer, 1));
  border: calc(.1em * var(--pomer, 1)) solid var(--fialova);
  border-radius: 999px; background: var(--bila);
  transition: background-color .22s ease, border-color .22s ease;
}
.prepinac::after, .vyber__ctverec::after, .gdpr__ctverec::after {
  content: ""; position: absolute; top: 50%; left: calc(.16em * var(--pomer, 1));
  translate: 0 -50%;
  width: calc(.62em * var(--pomer, 1)); height: calc(.62em * var(--pomer, 1));
  border-radius: 50%; background: var(--fialova);
  transition: left .22s cubic-bezier(.4, 0, .2, 1), background-color .22s ease;
}
input:checked + .prepinac,
.vyber__polozka input:checked + .vyber__ctverec,
.gdpr input:checked + .gdpr__ctverec { background: var(--fialova); }
input:checked + .prepinac::after,
.vyber__polozka input:checked + .vyber__ctverec::after,
.gdpr input:checked + .gdpr__ctverec::after {
  left: calc(100% - .78em * var(--pomer, 1)); background: var(--bila);
}
input:focus-visible + .prepinac,
.vyber__polozka input:focus-visible + .vyber__ctverec,
.gdpr input:focus-visible + .gdpr__ctverec { outline: 3px solid var(--modra); outline-offset: 3px; }

.vyber__ctverec { margin-top: calc(4 * var(--px)); }

.gdpr { margin-top: 0; display: flex; align-items: flex-start; gap: calc(12 * var(--px)); font-size: calc(14 * var(--px)); color: var(--seda-gdpr); cursor: pointer; }
.gdpr input { position: absolute; opacity: 0; width: 0; height: 0; }
.gdpr__ctverec { --pomer: 1.15; margin-top: calc(2 * var(--px)); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hlaska { margin: calc(24 * var(--px)) 0 0; padding: calc(18 * var(--px)) calc(28 * var(--px)); border-radius: calc(24 * var(--px)); font-size: calc(18 * var(--px)); }
.hlaska--uspech { background: #EAF7EE; color: #1E7A3C; }
.hlaska--chyba { background: #FDF3F2; color: #C0392B; }

/* -------------------------------------------------------------- patička - */
/* Rozvržení podle XD: sloupce začínají na 281, 681, 947, 1329 a 1652 px. */
.paticka { background: var(--gradient-footer); color: var(--bila); min-height: calc(460 * var(--px)); }
.paticka__vnitrek {
  width: var(--sirka); margin-left: calc(281 * var(--px));
  padding-top: calc(123 * var(--px));
  display: grid; align-items: start;
  grid-template-columns: calc(400 * var(--px)) calc(266 * var(--px)) calc(382 * var(--px)) calc(323 * var(--px)) auto;
}
.paticka__logo { margin-top: 0; }
.paticka__logo svg { width: calc(179 * var(--px)); height: auto; }

.paticka__menu { list-style: none; margin: calc(-2 * var(--px)) 0 0; padding: 0; }
.paticka__menu a { display: block; font-size: calc(17 * var(--px)); font-weight: 500; line-height: calc(26 * var(--px)); text-decoration: none; }
.paticka__menu a:hover { text-decoration: underline; }
.paticka p { margin: 0; font-size: calc(17 * var(--px)); line-height: calc(24 * var(--px)); }
.paticka__spojeni { margin-top: calc(28 * var(--px)); display: grid; gap: 0; }
.paticka__spojeni a { display: inline-flex; align-items: center; gap: calc(12 * var(--px)); font-size: calc(17 * var(--px)); line-height: calc(26 * var(--px)); text-decoration: none; }
.paticka__spojeni svg { width: calc(19 * var(--px)); flex: 0 0 auto; }
.paticka__spojeni svg [stroke] { stroke: var(--bila); }
.paticka__spojeni a:hover { text-decoration: underline; }
p.paticka__udaje { margin-top: calc(2 * var(--px)); line-height: calc(25 * var(--px)); }
.paticka__instagram { justify-self: start; margin-top: calc(-1 * var(--px)); }
.paticka__instagram svg { width: calc(46 * var(--px)); height: auto; }
.paticka__instagram svg path { fill: var(--bila); }

/* --------------------------------------------------------------- lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: rgb(0 0 0 / .85); padding: calc(56 * var(--px)) calc(179 * var(--px));
  overflow-y: auto;
}
.lightbox[open], .lightbox.je-otevreny { display: block; }
.lightbox__hlava { display: flex; align-items: center; justify-content: space-between; }
.lightbox__hlava svg { width: calc(90 * var(--px)); height: auto; }

.lightbox__zavrit {
  width: calc(48 * var(--px)); height: calc(48 * var(--px)); min-width: 40px; min-height: 40px;
  border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: var(--bila);
  font-size: calc(26 * var(--px)); line-height: 1; cursor: pointer;
}
.lightbox__zavrit:hover { background: rgb(255 255 255 / .25); }
.lightbox__mrizka { margin-top: calc(60 * var(--px)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(34 * var(--px)); }
.lightbox__popisek { margin: 0 0 calc(20 * var(--px)); color: var(--bila); font-size: calc(30 * var(--px)); font-weight: 400; }
.lightbox__mrizka img { width: 100%; border-radius: calc(8 * var(--px)); }
.lightbox__nazev { margin: calc(40 * var(--px)) 0 0; color: var(--bila); font-size: calc(22 * var(--px)); text-align: center; }

/* -------------------------------------------------------- menší displeje - */
@media (max-width: 1199px) {
  :root { --w: 1440px; --sirka: min(100% - 48px, 900px); }

  .prepinac-menu {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; width: 44px; height: 44px; padding: 10px;
    background: none; border: 0; cursor: pointer;
    /* Tlačítko barvu textu nedědí samo od sebe – bez toho byly čárky černé. */
    color: var(--bila);
  }
  .prepinac-menu .carka { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
  .hlavicka { color: var(--bila); height: 64px; }
  .hlavicka__vnitrek { width: min(100% - 48px, 900px); margin-inline: auto; }
  .hlavicka nav { margin-left: 0; }
  .hlavicka__logo svg, .hlavicka.je-prilepena .hlavicka__logo svg { width: 74px; }
  .hlavicka.je-prilepena { color: var(--fialova); height: 56px; }
  .hlavicka.je-prilepena .prepinac-menu { color: var(--fialova); }
  .hlavicka__logo svg { width: 62px; }
  .hlavicka__barva { width: 88px; }
  .hlavicka.je-prilepena .hlavicka__barva { width: 53px; }
  .hlavicka__vnitrek { gap: 16px; }

  .menu {
    position: fixed; inset: 64px 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bila); padding: 8px 24px 24px; box-shadow: 0 18px 30px rgb(0 0 0 / .18);
    transform: translateY(-130%); transition: transform .3s ease;
  }
  .menu.je-otevrene { transform: translateY(0); }
  .menu a { color: var(--fialova); font-size: 19px; padding: 14px 0; border-bottom: 1px solid #EEE; display: block; }
  .hlavicka.je-prilepena .menu a { color: var(--fialova); }
  .hlavicka__kontakt { display: none; }

  .hero { height: 78vh; min-height: 520px; }
  .hero__obsah { padding-top: 130px; }
  .hero__nadpis { font-size: clamp(52px, 11vw, 118px); }
  .hero__perex { font-size: clamp(22px, 4.2vw, 36px); max-width: 22ch; }
  .hero__odznak { right: 24px; bottom: 20px; }
  .hero__odznak svg { width: 180px; }
  .hero__tecky { bottom: 24px; }
  .hero__barva { width: 96px; }

  body { font-size: 17px; }
  .h2, .ukazka__nadpis { font-size: clamp(28px, 5vw, 40px); }
  .sekce { padding-block: 64px; }

  .tlacitko { --vyska: 60px; padding-inline: 30px; font-size: 16px; gap: 12px; }
  .tlacitko svg { width: 13px; }

  .reference-mrizka { grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 48px; }
  .dlazdice { border-radius: 18px; }
  .dlazdice__foto--pred, .ukazka__foto .je-pred { transition-duration: .45s; }
  .dlazdice__popisek, .dlazdice__stitek { font-size: 13px; opacity: 1; }
  .stred { margin-top: 56px; }

  .vyhody { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; margin-top: 48px; }
  .vyhoda__ikona { height: 64px; }
  .vyhoda p { font-size: 17px; margin-top: 18px; }

  .ukazka { grid-template-columns: 1fr; gap: 32px; }
  .ukazka__text { font-size: 17px; }

  .foto-pas { height: 62vw; min-height: 260px; }
  .foto-pas__popisek { right: 24px; top: auto; bottom: 16%; font-size: clamp(26px, 5.6vw, 56px); }
  .foto-pas__gradient { right: 6%; top: auto; bottom: 6%; width: 62vw; }

  .sluzby { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; margin-top: 48px; }
  .sluzba__ikona { height: 68px; }
  .sluzba__nazev { font-size: 16px; margin-top: 16px; }

  .kontakty-box { border-radius: 32px; padding: 36px 28px; margin-top: 44px; }
  .kontakty-mrizka { grid-template-columns: 1fr; gap: 32px; }
  .kontakt { grid-template-columns: 1fr 96px; gap: 16px; }
  .kontakt__jmeno, .kontakt__funkce, .kontakt__radek a { font-size: 17px; }
  .kontakt__radek svg { width: 18px; }
  .kontakt__foto { width: 96px; height: 96px; }
  .kontakty-paticka { font-size: 16px; margin-top: 32px; gap: 12px 32px; }

  .formular { margin-top: 40px; margin-inline: 0; }
  .formular__radek { grid-template-columns: 1fr; gap: 14px; }
  .pole { min-height: 52px; font-size: 16px; padding: 12px 20px; border-radius: 26px; }
  .pole--zprava { min-height: 180px; }
  .vyber { max-width: none; }
  .vyber__spoust { font-size: 17px; min-height: 52px; border-radius: 26px; padding: 10px 18px; }
  .vyber__nabidka { border-radius: 22px; padding: 14px 18px; max-height: 300px; }
  .vyber__polozka { font-size: 16px; }
  .formular__nadpis-maly { font-size: 17px; }
  .gdpr { font-size: 13px; }

  .paticka { min-height: 0; padding-block: 40px; }
  .paticka__vnitrek {
    width: min(100% - 48px, 900px); margin-inline: auto; padding-top: 0;
    grid-template-columns: 1fr 1fr; gap: 28px;
  }
  .paticka__logo { grid-column: 1 / -1; margin-top: 0; }
  .paticka__logo svg { width: 150px; }
  .paticka__instagram { justify-self: start; margin-top: 0; }
  .paticka__instagram svg { width: 38px; }

  .lightbox { padding: 24px; }
  .lightbox__mrizka { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
  .lightbox__popisek { font-size: 18px; margin-bottom: 10px; }
  .lightbox__hlava svg { width: 66px; }
}

/* Bez myši se výzva k přejetí nezobrazuje a fotografie se střídá sama. */
@media (hover: none), (max-width: 1199px) {
  .ukazka__vyzva { display: none; }
  .ukazka__foto .je-pred { animation: ukazka-automat 9s ease-in-out infinite; }
}
@keyframes ukazka-automat {
  0%, 12%   { clip-path: inset(0 0 0 100%); }
  42%, 58%  { clip-path: inset(0 0 0 0); }
  88%, 100% { clip-path: inset(0 0 0 100%); }
}

@media (max-width: 640px) {
  :root { --sirka: calc(100% - 40px); }
  .reference-mrizka { grid-template-columns: 1fr; }
  .vyhody, .sluzby { grid-template-columns: 1fr; }
  .paticka__vnitrek { grid-template-columns: 1fr; }
  .kontakt { grid-template-columns: 1fr 80px; }
  .kontakt__foto { width: 80px; height: 80px; }
}

/* ------------------------------------------------------ cookies lišta ---
   Rozvržení podle lišty WebPages: barevný proužek na horní hraně, ikona,
   text a tři tlačítka v řadě. Podrobné nastavení se rozbalí až na vyžádání.
   „Přijmout vše“ a „Jen nezbytné“ mají schválně stejnou velikost i váhu –
   lišta nesmí návštěvníka tlačit k souhlasu.                              */
.paticka__cookies {
  padding: 0; border: 0; background: none; color: inherit; font: inherit;
  font-size: calc(17 * var(--px)); font-weight: 500; line-height: calc(26 * var(--px));
  cursor: pointer; text-align: left;
}
.paticka__cookies:hover { text-decoration: underline; }

.cookies {
  position: fixed; z-index: 350; left: 50%; bottom: calc(24 * var(--px));
  translate: -50% 0; width: min(calc(1418 * var(--px)), calc(100vw - 32px));
  background: var(--bila); color: var(--cerna);
  border-radius: calc(26 * var(--px));
  box-shadow: 0 22px 60px rgb(0 0 0 / .26);
  padding: calc(30 * var(--px)) calc(34 * var(--px)) calc(28 * var(--px));
  animation: cookies-prijezd .4s cubic-bezier(.2, .7, .3, 1);
  overflow: hidden;
}
.cookies[hidden] { display: none; }
.cookies::before {
  content: ""; position: absolute; inset: 0 0 auto; height: calc(6 * var(--px));
  background: var(--gradient-footer);
}
@keyframes cookies-prijezd {
  from { opacity: 0; translate: -50% 24px; }
  to   { opacity: 1; translate: -50% 0; }
}

.cookies__zavrit {
  position: absolute; top: calc(16 * var(--px)); right: calc(16 * var(--px));
  display: grid; place-items: center;
  width: calc(32 * var(--px)); height: calc(32 * var(--px));
  border: 1px solid #E7E9F2; border-radius: 50%;
  background: var(--bila); color: var(--seda-gdpr); cursor: pointer;
  font-size: calc(13 * var(--px)); line-height: 1;
}
.cookies__zavrit:hover { color: var(--cerna); border-color: #C6CAD8; }

.cookies__vnitrek {
  display: flex; align-items: center; gap: calc(22 * var(--px));
}
.cookies__ikona {
  flex: 0 0 auto; display: grid; place-items: center;
  width: calc(56 * var(--px)); height: calc(56 * var(--px));
  border-radius: calc(16 * var(--px));
  background: var(--gradient-footer); color: var(--bila);
}
.cookies__ikona svg { width: calc(28 * var(--px)); height: calc(28 * var(--px)); }

.cookies__text { flex: 1; min-width: 0; }
.cookies__nadpis { margin: 0; font-size: calc(21 * var(--px)); font-weight: 700; }
.cookies__popis {
  margin: calc(7 * var(--px)) 0 0; max-width: calc(720 * var(--px));
  font-size: calc(15 * var(--px)); line-height: 1.6; color: #4A4A4A;
}
.cookies__popis a { color: var(--fialova); font-weight: 600; }

.cookies__tlacitka { flex: 0 0 auto; display: flex; gap: calc(10 * var(--px)); }
.cookies__tl {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: calc(158 * var(--px)); padding: calc(14 * var(--px)) calc(22 * var(--px));
  border: 2px solid transparent; border-radius: calc(10 * var(--px));
  font: 600 calc(15 * var(--px))/1 Poppins, sans-serif; cursor: pointer;
  transition: filter .15s ease, background-color .15s ease, border-color .15s ease;
}
/* Přijmout i odmítnout mají shodnou barvu i rozměr – lišta nesmí
   návštěvníka tlačit k jedné z voleb. Liší se pouze popiskem. */
.cookies__tl--prijmout,
.cookies__tl--odmitnout { background: var(--gradient-footer); color: var(--bila); }
.cookies__tl--prijmout:hover,
.cookies__tl--odmitnout:hover { filter: brightness(1.08); }
.cookies__tl--nastaveni { background: var(--bila); border-color: #D4D8E6; color: var(--cerna); }
.cookies__tl--nastaveni:hover { border-color: var(--fialova); color: var(--fialova); }

.cookies__podrobne {
  margin-top: calc(24 * var(--px)); padding-top: calc(22 * var(--px));
  border-top: 1px solid #EDEFF4;
  display: flex; align-items: center; gap: calc(30 * var(--px)); flex-wrap: wrap;
}
.cookies__podrobne[hidden] { display: none; }
.cookies__volby { flex: 1; display: flex; flex-wrap: wrap; gap: calc(14 * var(--px)) calc(34 * var(--px)); }
.volba { display: inline-flex; align-items: center; gap: calc(12 * var(--px)); font-size: calc(15 * var(--px)); font-weight: 600; cursor: pointer; }
.volba input { position: absolute; opacity: 0; width: 0; height: 0; }
.volba--zamcena { cursor: default; opacity: .65; }
.volba__pozn { font-weight: 400; color: var(--seda-gdpr); }
.cookies__tl--ulozit { background: var(--bila); border-color: var(--fialova); color: var(--fialova); }
.cookies__tl--ulozit:hover { background: #F7ECF6; }

@media (max-width: 1199px) {
  .paticka__cookies { font-size: 17px; line-height: 1.6; }
  .cookies {
    left: 12px; right: 12px; bottom: 12px; width: auto; translate: none;
    border-radius: 20px; padding: 22px 18px 18px;
  }
  @keyframes cookies-prijezd { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0; } }
  .cookies__vnitrek { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cookies__ikona { width: 46px; height: 46px; border-radius: 13px; }
  .cookies__ikona svg { width: 23px; height: 23px; }
  .cookies__tlacitka { width: 100%; flex-direction: column; }
  .cookies__tl { width: 100%; min-width: 0; padding: 13px 18px; font-size: 15px; }
  .cookies__podrobne { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 18px; padding-top: 16px; }
  .cookies__nadpis { font-size: 19px; }
  .cookies__popis { font-size: 14.5px; }
  .cookies__volby { gap: 12px 22px; }
  .volba { font-size: 14.5px; }
}

/* --------------------------------------------------------------------------
   Stránka, která na webu není.
   Hlavička je bílá a leží přes obsah — na světlém pozadí by logo ani
   nabídka nebyly vidět. Sekce proto dostane tmavé pozadí jako úvodní
   plocha a odsazení, aby text nezačínal pod hlavičkou.
   -------------------------------------------------------------------------- */
.sekce--nenalezeno {
  background: #0b1428;
  color: var(--bila);
  padding-block: calc(280 * var(--px)) calc(180 * var(--px));
}

.sekce--nenalezeno .h2,
.sekce--nenalezeno strong {
  color: var(--bila);
}

.sekce--nenalezeno a:not(.tl) {
  color: var(--bila);
}

/* --------------------------------------------------------------------------
   Prvek „Výzva k akci“.
   Barevný pruh s krátkým textem a tlačítkem. Přechod je stejný jako
   v patičce, aby pruh nepůsobil jako cizí prvek.
   -------------------------------------------------------------------------- */
.sekce--vyzva {
  background: var(--prechod, linear-gradient(90deg, #8C2583, #1668D6));
  color: var(--bila);
  text-align: center;
}

.sekce--vyzva .h2,
.vyzva__text {
  color: var(--bila);
}

.vyzva__text {
  max-width: calc(720 * var(--px));
  margin: calc(18 * var(--px)) auto 0;
}

.vyzva__tlacitko {
  margin-top: calc(34 * var(--px));
}

/* Tlačítko na barevném pruhu je bílé s tmavým textem — přechodové
   tlačítko by se s pozadím slilo. */
.sekce--vyzva .tlacitko {
  background: var(--bila);
  color: #1D2233;
}

/* Prvek „Vlastní HTML“. Vložený obsah (mapa, widget) se roztáhne na
   šířku obsahu a na úzkém displeji se nepřeleje ven. */
.kod-prvek {
  max-width: 100%;
  overflow-x: auto;
}

.kod-prvek iframe,
.kod-prvek img,
.kod-prvek video {
  display: block;
  max-width: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   Prvek „Otázky a odpovědi“.
   Rozbalování obstará prohlížeč přes <details>; styl jen schová
   systémovou šipku a dá řádkům vzhled zbytku webu.
   -------------------------------------------------------------------------- */
.faq {
  max-width: calc(820 * var(--px));
  margin: calc(40 * var(--px)) auto 0;
}

.faq__polozka {
  border-bottom: 1px solid #E1E3EC;
}

.faq__otazka {
  position: relative;
  padding: calc(22 * var(--px)) calc(46 * var(--px)) calc(22 * var(--px)) 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

/* Systémová šipka pryč — kreslíme si vlastní, aby vypadala stejně
   ve všech prohlížečích. */
.faq__otazka::-webkit-details-marker { display: none; }

.faq__otazka::after {
  position: absolute;
  top: 50%;
  right: calc(8 * var(--px));
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--fialova, #8C2583);
  border-bottom: 2px solid var(--fialova, #8C2583);
  content: '';
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease;
}

.faq__polozka[open] .faq__otazka::after {
  transform: translateY(-30%) rotate(-135deg);
}

.faq__odpoved {
  padding: 0 calc(46 * var(--px)) calc(24 * var(--px)) 0;
  color: var(--slabe, #4A5064);
}

/* --------------------------------------------------------------------------
   Prvek „Citace zákazníka“.
   Text je větší než běžný odstavec — citace má být to první, co na
   sekci padne do oka. Uvozovky kreslí styl, aby se nemusely psát.
   -------------------------------------------------------------------------- */
.citace {
  max-width: calc(780 * var(--px));
  margin: 0 auto;
  text-align: center;
}

.citace__text {
  margin: 0;
  font-size: calc(26 * var(--px));
  font-weight: 600;
  line-height: 1.45;
}

.citace__text::before { content: '„'; }
.citace__text::after  { content: '“'; }

.citace__podpis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--px));
  margin-top: calc(28 * var(--px));
}

/* S fotografií se podpis srovná do řádku vedle ní. */
.citace__podpis--s-fotkou {
  flex-direction: row;
  justify-content: center;
  gap: calc(14 * var(--px));
  text-align: left;
}

.citace__foto {
  width: calc(56 * var(--px));
  height: calc(56 * var(--px));
  border-radius: 50%;
  object-fit: cover;
}

.citace__jmeno { display: block; font-weight: 700; }
.citace__role  { color: var(--slabe, #4A5064); font-size: calc(15 * var(--px)); }

/* --------------------------------------------------------------------------
   Prvek „Video“.
   Poměr stran drží rámeček, aby stránka po načtení přehrávače
   neposkočila.
   -------------------------------------------------------------------------- */
.video {
  position: relative;
  max-width: calc(900 * var(--px));
  margin: calc(34 * var(--px)) auto 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-velka, 18px);
  background: #0b1428;
}

.video__nahled,
.video__ramec {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.video__spustit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  background: rgb(11 20 40 / .28);
  cursor: pointer;
}

.video__spustit:hover { background: rgb(11 20 40 / .40); }

/* Trojúhelník se skládá z okrajů — nepotřebuje obrázek ani písmo. */
.video__sipka {
  width: 0;
  height: 0;
  margin-left: 6px;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 28px solid #fff;
}

/* --------------------------------------------------------------------------
   Prvek „Videoslider“.
   Posouvání obstará prohlížeč přes scroll-snap — funguje prstem
   i kolečkem a nepotřebuje k tomu skript.
   -------------------------------------------------------------------------- */
.videopas {
  display: flex;
  gap: calc(20 * var(--px));
  margin-top: calc(34 * var(--px));
  padding-bottom: calc(10 * var(--px));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.videopas__polozka {
  flex: 0 0 min(calc(520 * var(--px)), 82%);
  margin: 0;
  scroll-snap-align: center;
}

.videopas .video { margin-top: 0; }

.videopas__popis {
  margin-top: calc(10 * var(--px));
  color: var(--slabe, #4A5064);
  font-size: calc(15 * var(--px));
}

/* Prvek „Odpočet a odemčení“. */
.odpocet {
  display: flex;
  justify-content: center;
  gap: calc(18 * var(--px));
  margin-top: calc(30 * var(--px));
}

.odpocet__kus {
  min-width: calc(92 * var(--px));
  padding: calc(16 * var(--px)) calc(10 * var(--px));
  border-radius: var(--r-velka, 18px);
  background: #F1F2F8;
  text-align: center;
}

.odpocet__kus strong {
  display: block;
  font-size: calc(34 * var(--px));
  line-height: 1.1;
}

.odpocet__kus span {
  color: var(--slabe, #4A5064);
  font-size: calc(14 * var(--px));
}

.odpocet__text { max-width: calc(680 * var(--px)); margin: calc(16 * var(--px)) auto 0; }
.odpocet__tlacitko { margin-top: calc(28 * var(--px)); }

/* Copyright v patičce. */
.paticka__copyright {
  margin: 0;
  color: rgb(255 255 255 / .62);
  font-size: calc(13.5 * var(--px));
}

/* --------------------------------------------------------------------------
   Spodní řádek patičky — copyright a právní odkazy.
   Na telefonu jde pod sebe; vedle sebe by se odkazy zlomily doprostřed.
   -------------------------------------------------------------------------- */
.paticka__spodek {
  display: flex;
  flex-wrap: wrap;
  gap: calc(14 * var(--px)) calc(28 * var(--px));
  align-items: center;
  justify-content: space-between;
  max-width: calc(1240 * var(--px));
  margin: calc(26 * var(--px)) auto 0;
  padding-top: calc(20 * var(--px));
  border-top: 1px solid rgb(255 255 255 / .14);
}

.paticka__pravni {
  display: flex;
  flex-wrap: wrap;
  gap: calc(24 * var(--px));
  margin: 0;
}

.paticka__odkaz {
  padding: 0;
  border: 0;
  background: none;
  color: rgb(255 255 255 / .78);
  font: inherit;
  font-size: calc(13.5 * var(--px));
  text-decoration: none;
  cursor: pointer;
}

.paticka__odkaz:hover { color: var(--bila); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Delší text s odstavci a mezinadpisy (zásady, obchodní podmínky).
   Šířka je omezená na necelých 70 znaků na řádek — přes celou stránku
   se dlouhý text čte špatně.
   -------------------------------------------------------------------------- */
.text-dokument {
  max-width: calc(760 * var(--px));
  margin: calc(28 * var(--px)) auto 0;
}

.text-dokument--vlevo { text-align: left; }

.text-dokument p {
  margin: 0 0 calc(16 * var(--px));
  line-height: 1.7;
}

.text-dokument__nadpis {
  margin: calc(34 * var(--px)) 0 calc(12 * var(--px));
  color: var(--fialova, #8C2583);
  font-size: calc(20 * var(--px));
}

.text-dokument__nadpis:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   Drobnosti přesunuté ze značek do stylu.
   Vložené style="…" u každého prvku zvětšují stránku a nástroje na
   kontrolu webu je počítají jako chybu. Vzhled zůstává stejný.
   -------------------------------------------------------------------------- */
.bez-okraje { margin: 0; }

/* Barevné prolnutí bublin ve fotopásu — dřív bylo zapsané u každé
   skupiny přímo v SVG. */
.bublina {
  mix-blend-mode: color;
  isolation: isolate;
}

/* Reference nad první devítku. Samotný atribut „hidden“ nestačí —
   pravidlo pro dlaždici s vlastním zobrazením ho přebíjí. */
.dlazdice.je-skryta { display: none; }

/* Odstavec s tlačítkem „Více referencí“, když už není co odkrývat. */
.stred.je-skryta { display: none; }