/* Pořadí vrstev: základ prvků < sdílené komponenty < styl návrhu (bez vrstvy). */
@layer zaklad, spolecne;

/* ==========================================================================
   CENOTVOR.CZ · NÁVRH 5 „PETROLEJOVÁ KOSTRA"
   --------------------------------------------------------------------------
   Finální skladba sekcí z návrhů 1–3 sjednocená do jednoho systému:
   – tmavé petrolejové pásy (hero, pro koho, patička) se zaoblenými hranami
     leží na krémovém papíře; ostatní sekce střídají krémovou a bílou,
   – Galindo (jen řez 400) nese H1, všechny H2, názvy a ceny tarifů, čísla kroků
     a slogan v CTA; všechno ostatní je SUSE (H3 tučně 700),
   – jedna karta podle aplikace (.karta v app.css): bílá, 2px linka #b7d1cc,
     rádius 1rem, stín karty; při najetí petrolejová (u volitelných oranžová),
   – oranžová jen na akce a drobné akcenty (pomlčka nadtitulku, štítky),
   – tři druhy pohybu: odhalení hero, odhalení sekcí scrollem (CSS view timeline)
     a podpisové efekty sekcí (cestička, pásy profesí, „píše…", přepočet).

   Obsah souboru
     1. Design systém (tokeny)       8. Jak to funguje      15. CTA
     2. Základ prvků (@layer zaklad)  9. Funkce              16. Patička
     3. Layout a plochy              10. Pro koho            17. Podstránky, 404
     4. Komponenty                   11. Reference           18. Sdílené části
     5. Hlavička a menu              12. Ukázky              19. Pohyb
     6. Hero                         13. Ceník
     7. Problém                      14. Časté otázky
   Breakpointy (mobile-first, min-width):
     30rem (480 px) · 48rem (768 px) · 64rem (1024 px) · 80rem (1280 px)
     · 120rem (1920 px) · 160rem (2560 px)
   ========================================================================== */

/* ==========================================================================
   1. DESIGN SYSTÉM
   ========================================================================== */
:root {
  /* --- paleta značky (z aplikace Cenotvor) --- */
  --petrol-950: #002a2a;            /* patička */
  --petrol-900: #00302f;            /* nejhlubší scéna, hlavička po odscrollování */
  --petrol-850: #00403f;            /* tmavý pás (registrace v aplikaci) */
  --petrol-800: #004d4d;            /* hluboká petrolejová – nadpisy na papíře */
  --petrol-700: #075d5d;            /* tmavá petrolejová */
  --petrol-500: #167f7f;            /* značková petrolejová */
  --petrol-300: #8fd3cf;            /* světlá petrolejová pro text na tmavé (7,6 : 1) */
  --petrol-100: #e6f2f1;            /* světlý petrolejový podklad */
  --krem: #f9f6f2;                  /* papír nabídek */
  --bila: #ffffff;
  --inkoust: #173b3b;
  --sedozelena: #526161;
  --linka: #b7d1cc;
  --oranz: #e87522;                 /* dekor: pomlčky, výběr */
  --oranz-tmava: #b8520e;           /* pozadí tlačítek a oranžový text na světlé (4,9 : 1) */
  --oranz-hover: #a14709;
  --oranz-svetla: #f6a45e;          /* oranžová na tmavé (5,8 : 1) */
  --oranz-plocha: #fff0e3;
  --oranz-listek: color-mix(in oklab, var(--oranz) 16%, var(--krem));   /* ≈ #f7e3d5 – lístky „Nahrazuje…“ a oranžové značky v pozadí */

  /* motivy hero ukázky – světlé odstíny čitelné na tmavé (≥ 5 : 1 na #00403f),
     smí se objevit jen ve slově „přizpůsobí" */
  --motiv-petrolejovy: #5cc4c4;
  --motiv-modry: #8fb0ec;
  --motiv-fialovy: #b9a0e6;
  --motiv-zeleny: #6fcf8e;
  --motiv-svetla: var(--motiv-petrolejovy);

  /* --- sémantické tokeny (světlý papír; tmavé pásy je přemapují, viz 3.) --- */
  --color-primary: var(--petrol-500);
  --color-primary-dark: var(--petrol-700);
  --color-primary-surface: var(--petrol-100);
  --color-secondary: var(--petrol-800);
  --color-background: var(--krem);
  --color-surface: var(--bila);
  --color-text: var(--inkoust);
  --color-heading: var(--petrol-800);
  --color-muted: var(--sedozelena);          /* 6,6 : 1 na bílé, 6,2 : 1 na krémové */
  --color-border: var(--linka);
  --color-accent: var(--oranz);
  /* hlavní tlačítko na světlé ploše jako v aplikaci: střední oranžová, pod myší přeliv tmavší */
  --color-accent-strong: var(--oranz);
  --color-accent-hover: #c95d12;
  --color-accent-text: var(--oranz-tmava);
  --color-on-accent: var(--bila);
  --color-focus: var(--oranz-tmava);
  --color-nadtitulek: var(--petrol-700);

  /* --- mezery: 4px mřížka --- */
  --space-1: 0.25rem;  /*   4 px */
  --space-2: 0.5rem;   /*   8 px */
  --space-3: 0.75rem;  /*  12 px */
  --space-4: 1rem;     /*  16 px */
  --space-5: 1.5rem;   /*  24 px */
  --space-6: 2rem;     /*  32 px */
  --space-7: 3rem;     /*  48 px */
  --space-8: 4rem;     /*  64 px */
  --space-9: 6rem;     /*  96 px */
  --space-10: 8rem;    /* 128 px */
  --space-sekce: clamp(6rem, 3rem + 8vw, 12rem);   /* jediné odsazení sekcí (96–192 px) */

  /* --- typografie: poměr ~1,25, základ 17 px jako v aplikaci --- */
  --font-text: 'SUSE', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Galindo', 'SUSE', system-ui, sans-serif;   /* jen řez 400, nikdy tučně */
  --text-sm: 1rem;          /* nejmenší písmo webu = 16 px */
  --text-base: 1.0625rem;   /* 17 px */
  --text-lg: 1.1875rem;     /* 19 px */
  --text-xl: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem);
  --text-2xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --h1: clamp(2.5rem, 1.2rem + 3.6vw, 5.5rem);
  --h2: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem);
  --h3: clamp(1.3125rem, 1.2rem + 0.45vw, 1.625rem);
  --h4: 1.3125rem;
  --h5: 1.125rem;
  --h6: 1rem;
  --lh-text: 1.65;          /* odstavce 1,5–1,8 */
  --lh-nadpis: 1.15;
  --lh-display: 1.04;

  /* --- tvary a stíny: tři rádiusy pro celý web + oblouk tmavých pásů --- */
  --radius-sm: 0.375rem;    /* tlačítka, pole */
  --radius-md: 0.625rem;    /* menší bloky, štítky souborů */
  --radius-lg: 1rem;        /* karty, panely */
  --radius-pill: 999px;     /* přepínače, kolečka */
  --radius-pas: clamp(1.5rem, 0.9rem + 2.4vw, 3rem);   /* hrany tmavých pásů */
  --line: 0.0625rem;        /* vlasová linka */
  --line-silna: 0.125rem;   /* linka karet (jako v aplikaci) */
  /* stín začíná přímo u hrany a plynule slábne – žádná druhá linka pod obrysem */
  --shadow-card: 0 1px 2px rgb(23 59 59 / 0.06), 0 14px 26px -14px rgb(23 59 59 / 0.32);
  --shadow-raised: 0 4px 8px rgb(23 59 59 / 0.16), 0 30px 56px -18px rgb(23 59 59 / 0.48);
  --shadow-tma: 0 2px 4px rgb(0 20 20 / 0.2), 0 18px 36px -14px rgb(0 20 20 / 0.55);

  /* --- layout --- */
  --kontejner: min(85%, 90rem);      /* web max. 85 % šířky */
  --mira: min(42rem, 70vw);          /* text max. 70 % obrazovky */
  --vyska-hlavicky: 4.5rem;

  /* --- pohyb --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pruzna: cubic-bezier(0.34, 1.4, 0.64, 1);
  --doba: 0.26s;

  interpolate-size: allow-keywords;  /* plynulé otevírání <details> */
  color-scheme: light;
}

/* zvýrazněné slovo v hero se barví podle aktuálního motivu ukázky (zaklad.js) */
:root[data-motiv-ukazky='modry'] { --motiv-svetla: var(--motiv-modry); }
:root[data-motiv-ukazky='fialovy'] { --motiv-svetla: var(--motiv-fialovy); }
:root[data-motiv-ukazky='zeleny'] { --motiv-svetla: var(--motiv-zeleny); }

/* ==========================================================================
   2. ZÁKLAD PRVKŮ
   Ve vrstvě „zaklad": sdílené komponenty (cookie lišta, dialogy) je přebijí
   svou třídou, všechno ostatní v návrhu vyhrává.
   ========================================================================== */
@layer zaklad {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  /* každá změna barvy pod myší je plynulá – stejně jako odkazy v menu
     (prvky s vlastním přechodem si ho nastavují samy a tenhle přebijí) */
  a,
  button,
  summary,
  label {
    transition:
      color var(--doba),
      background-color var(--doba),
      border-color var(--doba),
      outline-color var(--doba),
      text-decoration-color var(--doba);
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: var(--krem);
  }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  /* kotva dojede tak, aby nadtitulek sekce stál 64 px pod hlavičkou – bez proužku
     předchozí sekce a bez zbytečně velkého odsazení. Horní hrana sekce (i zaoblené rohy)
     zajede pod hlavičku, ta je po odscrollování plná. Platí na všech šířkách. */
  html { scroll-padding-top: var(--vyska-hlavicky); }
  .sekce[id] { scroll-margin-block-start: calc(var(--space-8) - var(--space-sekce)); }

  /* velké monitory: všechno o kus větší, ať 4K nevypadá jako mravenci */
  @media (min-width: 120rem) { html { font-size: 112.5%; } }
  @media (min-width: 160rem) { html { font-size: 137.5%; } }

  body {
    margin: 0;
    font-family: var(--font-text);
    font-size: var(--text-base);
    line-height: var(--lh-text);
    color: var(--color-text);
    background: var(--krem);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }

  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: var(--lh-nadpis);
    color: var(--color-heading);
    text-wrap: balance;
  }

  /* H1 a H2 nese Galindo, H3–H6 SUSE */
  h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--h1); line-height: var(--lh-display); letter-spacing: -0.01em; }
  h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--h2); line-height: 1.06; letter-spacing: -0.005em; }
  h3 { font-size: var(--h3); font-weight: 700; letter-spacing: -0.01em; }
  h4 { font-size: var(--h4); font-weight: 700; }
  h5 { font-size: var(--h5); font-weight: 700; }
  h6 { font-size: var(--h6); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

  p { margin: 0; text-wrap: pretty; }
  /* slovo se spojovníkem (e-mail, Je-li) obalí build.js – nesmí se rozdělit na konci řádku */
  .bez-zlomu { white-space: nowrap; }
  ul, ol { margin: 0; padding: 0; }
  img, picture, svg { display: block; max-inline-size: 100%; }
  img { block-size: auto; }
  a { color: var(--color-primary-dark); text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
  a:hover { color: var(--color-accent-hover); }
  strong { font-weight: 700; }
  button { font: inherit; }
  figure, blockquote { margin: 0; }

  :focus-visible {
    outline: 0.1875rem solid var(--color-focus);
    outline-offset: 0.1875rem;
    border-radius: var(--radius-sm);
  }

  ::selection { background: var(--oranz-plocha); color: var(--inkoust); }
}

.ikona {
  inline-size: 1em;
  block-size: 1em;
  flex: none;
  fill: currentColor;
}

.ikona--sipka-nahoru { rotate: -90deg; }   /* o celých 90° – ikona zůstane ostrá */

/* plovoucí tlačítko „nahoru" vpravo dole: kolečko v hluboké petrolejové (jako
   posuvník), pod myší tmavší oranžová. Ukáže se až za úvodem (.je-videt
   ze script.js); dokud je dole cookie lišta, schová se, ať se nepřekrývají. */
.plovouci-nahoru {
  position: fixed;
  z-index: 80;
  inset-block-end: var(--space-5);
  inset-inline-end: var(--space-5);
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background: var(--petrol-800);
  color: var(--bila);
  box-shadow: 0 0 0 0.125rem rgb(255 255 255 / 0.5), var(--shadow-card);
  font-size: 1.125rem;
  opacity: 0;
  translate: 0 1rem;
  visibility: hidden;
  transition: opacity var(--doba), translate var(--doba) var(--ease-out), visibility 0s var(--doba), background-color var(--doba);
}

.plovouci-nahoru.je-videt {
  opacity: 1;
  translate: none;
  visibility: visible;
  transition: opacity var(--doba), translate var(--doba) var(--ease-out), visibility 0s, background-color var(--doba);
}

.plovouci-nahoru:hover { background: #c95d12; }
.plovouci-nahoru:focus-visible { outline: 0.1875rem solid var(--oranz-svetla); outline-offset: 0.1875rem; }

body:has(.cookie-lista:not([hidden])) .plovouci-nahoru,
body:has(.paticka-okno.je-otevrene) .plovouci-nahoru,
body:has(.dialog[open]) .plovouci-nahoru { visibility: hidden; opacity: 0; }

@media (min-width: 64rem) {
  .plovouci-nahoru { inset-block-end: var(--space-6); inset-inline-end: var(--space-6); inline-size: 3.5rem; block-size: 3.5rem; }
}

.preskocit {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: -10rem;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--oranz-tmava);
  color: var(--bila);
  font-weight: 700;
}

.preskocit:focus { inset-block-start: var(--space-4); }

/* ==========================================================================
   3. LAYOUT A PLOCHY
   ========================================================================== */
/* Posuvník stránky: bez šipek, průhledná dráha, posouvátko v hluboké petrolejové
   s průhledným lemem (užší, než je plocha na chycení), pod myší tmavší oranžová.
   Chrome a Safari kreslí podle ::-webkit-scrollbar; scrollbar-color by v Chromu
   tyhle styly vypnul (a vrátil šipky), proto ho dostane jen Firefox. */
::-webkit-scrollbar { inline-size: 0.75rem; block-size: 0.75rem; }
::-webkit-scrollbar-button { display: none; inline-size: 0; block-size: 0; }
::-webkit-scrollbar-track { background-color: transparent; }
::-webkit-scrollbar-corner { background-color: transparent; }
::-webkit-scrollbar-thumb {
  border: 0.1875rem solid transparent;
  border-radius: 0.75rem;
  background-color: var(--petrol-800);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #c95d12; }

@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--petrol-800) transparent; }
}

/* tlačítka mění barvu stejně plynule jako odkazy v menu (křivka z aplikace
   udělala skoro celou změnu hned na začátku a působila skokově) */
.tlacitko { --prechod-dlazdice: var(--doba) ease; }

.kontejner {
  inline-size: var(--kontejner);
  margin-inline: auto;
}

.sekce {
  position: relative;
  padding-block: var(--space-sekce);
}

.sekce--krem { background: var(--krem); }

/* Značka Cenotvoru v pozadí – jako v Cenotvoří šabloně v aplikaci (dekorace-strany):
   kreslí ji maska, barva je značková petrolejová smíchaná s papírem (v aplikaci
   20 %, tady o kousek jemněji), přetéká přes okraj obrazovky a na mobilu se
   nekreslí – úzká obrazovka je celá obsah a značka by ho jen podbarvila. */
.sekce--znak {
  isolation: isolate;   /* značka (z-index −1) zůstane nad plochou sekce, pod obsahem */
  overflow-x: clip;     /* přesah za okraj nesmí roztáhnout stránku do šířky */
}

@media (min-width: 48rem) {
  .sekce--znak::before,
  .sekce--znak-reference::after {
    content: '';
    position: absolute;
    z-index: -1;
    inline-size: clamp(16rem, 22vw, 26rem);
    aspect-ratio: 1;
    background-color: color-mix(in oklab, var(--petrol-500) 14%, var(--krem));
    -webkit-mask: url('/znacka/znak.svg?v=ec8235de83') center / contain no-repeat;
    mask: url('/znacka/znak.svg?v=ec8235de83') center / contain no-repeat;
    pointer-events: none;
  }

  /* Funkce: vpravo nahoře, kus za pravým okrajem a horním koncem zajede pod bílou sekci nad ní */
  .sekce--znak-vpravo::before { inset-block-start: -5rem; inset-inline-end: -6rem; }

  /* Ceník: vlevo u nadpisu, kus za levým okrajem */
  .sekce--znak-vlevo::before { inset-block-start: var(--space-8); inset-inline-start: -7rem; }

  /* Reference: větší vlevo dole (kousek zajede pod bublinu), menší vpravo nahoře u nadpisu */
  .sekce--znak-reference::before { inset-block-start: 52%; inset-inline-start: 14%; inline-size: clamp(14rem, 19vw, 23rem); }
  .sekce--znak-reference::after { inset-block-start: 17%; inset-inline-start: 77%; inline-size: clamp(8.5rem, 10.5vw, 12.5rem); }

  /* další značky rozházené jakoby náhodně – různé velikosti a polohy, některé
     z větší části schované (za okrajem obrazovky, pod bublinou, pod bílou sekcí níž) */
  .znaky {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }

  .znaky i {
    position: absolute;
    inset-block-start: var(--y);
    inset-inline-start: var(--x);
    inline-size: var(--w);
    aspect-ratio: 1;
    background-color: color-mix(in oklab, var(--petrol-500) 14%, var(--krem));
    -webkit-mask: url('/znacka/znak.svg?v=ec8235de83') center / contain no-repeat;
    mask: url('/znacka/znak.svg?v=ec8235de83') center / contain no-repeat;
  }

  .znaky--reference i:nth-child(1) { --x: -3%; --y: 10%; --w: clamp(5rem, 7vw, 8rem); }      /* za levým okrajem */
  .znaky--reference i:nth-child(2) { --x: 33%; --y: 12%; --w: clamp(2.75rem, 3.5vw, 4rem); }
  .znaky--reference i:nth-child(3) { --x: 60%; --y: 4%;  --w: clamp(2rem, 2.5vw, 3rem); }
  .znaky--reference i:nth-child(4) { --x: 95%; --y: 34%; --w: clamp(8rem, 11vw, 13rem); }    /* skoro celý za pravým okrajem */
  .znaky--reference i:nth-child(5) { --x: 64%; --y: 58%; --w: clamp(6rem, 8vw, 9.5rem); }    /* vykukuje zpod bubliny */
  .znaky--reference i:nth-child(6) { --x: 49%; --y: 90%; --w: clamp(6rem, 8vw, 9rem); }      /* zajíždí pod bílou sekci níž */
  .znaky--reference i:nth-child(7) { --x: 86%; --y: 76%; --w: clamp(3rem, 4vw, 4.5rem); }
  .znaky--reference i:nth-child(8) { --x: 22%; --y: 31%; --w: clamp(1.75rem, 2vw, 2.5rem); }

  /* Ceník: sekce je vysoká – značky po stranách, kolem přepínače, zpod karty
     tarifů a dole pod tmavý pás s otázkami */
  /* zpoza levého okraje karty Minitvoru: levý okraj karet = střed − půl šířky
     řady tarifů (85 % stránky, nejvýš 74 rem); pod kartu zajede asi třetinou */
  .znaky--cenik i:nth-child(1) { --w: 8rem; --x: calc(50% - min(42.5%, 37rem) - 5.5rem); --y: 49%; }
  .znaky--cenik i:nth-child(2) { --x: 93%; --y: 5%;  --w: clamp(7rem, 9vw, 10.5rem); }   /* za pravým okrajem nahoře */
  .znaky--cenik i:nth-child(3) { --x: 21%; --y: 13%; --w: clamp(2.25rem, 2.75vw, 3.25rem); }
  .znaky--cenik i:nth-child(4) { --x: 72%; --y: 19%; --w: clamp(3rem, 4vw, 4.75rem); }
  .znaky--cenik i:nth-child(5) { --x: 95%; --y: 64%; --w: clamp(5rem, 6.5vw, 7.5rem); }  /* za pravým okrajem */
  .znaky--cenik i:nth-child(6) { --x: 3%;  --y: 80%; --w: clamp(3.5rem, 4.5vw, 5.5rem); }
  .znaky--cenik i:nth-child(7) { --x: 58%; --y: 94%; --w: clamp(6rem, 8vw, 9.5rem); }    /* zajíždí pod otázky */
  .znaky--cenik i:nth-child(8) { --x: 86%; --y: 41%; --w: clamp(1.75rem, 2vw, 2.5rem); }

  /* Funkce: „had" – od velké značky v pravém horním rohu se doleva vlní
     a zmenšuje (dolů, nahoru, dolů) */
  .znaky--funkce i:nth-child(1) { --x: 74%; --y: 8.5rem; --w: clamp(10.5rem, 13vw, 15.5rem); }
  .znaky--funkce i:nth-child(2) { --x: 64.5%; --y: 5rem; --w: clamp(7rem, 9.5vw, 11rem); }
  .znaky--funkce i:nth-child(3) { --x: 58.5%; --y: 10rem; --w: clamp(3.5rem, 4.5vw, 5.5rem); }
  /* velká slabě oranžová značka v pozadí závěrečných tlačítek, středem na jejich středu
     (tlačítka končí sekci: od spodku je dělí spodní odsazení sekce a půl jejich výšky) */
  .znaky--funkce i:nth-child(4) {
    --w: clamp(13rem, 17vw, 19rem);
    --x: calc(50% - var(--w) / 2);
    --y: calc(100% - var(--space-sekce) - 1.75rem - var(--w) / 2);
    background-color: var(--oranz-listek);
  }

  /* totéž v bílých sekcích (Jak to funguje, Ukázky): značka na středu, oranžová
     smíchaná s bílou (zaoblená sekce má vlastní vrstvu, značka tak zůstane nad její plochou) */
  .skupina-tlacitek--znak { position: relative; }
  .skupina-tlacitek--znak::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: clamp(13rem, 17vw, 19rem);
    aspect-ratio: 1;
    translate: -50% -50%;
    background-color: var(--oranz-listek);
    -webkit-mask: url('/znacka/znak.svg?v=ec8235de83') center / contain no-repeat;
    mask: url('/znacka/znak.svg?v=ec8235de83') center / contain no-repeat;
    pointer-events: none;
  }

  /* na užších obrazovkách by had vlezl do nadpisu – kreslí se až od 80 rem */
  .znaky--funkce i:nth-child(-n + 3) { display: none; }
  @media (min-width: 80rem) { .znaky--funkce i:nth-child(-n + 3) { display: block; } }
}

/* světlá sekce jako list na papíře – zaoblené hrany stejně jako tmavé pásy */
/* zaoblená sekce leží nad sousedními, ať pod ni může zajet značka z pozadí */
.sekce--zaoblena { z-index: 1; border-radius: var(--radius-pas); }

/* oblé sekce (bílé, tmavé pásy, úvod, zápatí) mají kolem sebe měkký šedý stín,
   nahoře i dole stejný. Leží nad sousedními (z-index), takže je vidět na obou stranách. */
.sekce--zaoblena,
.pas-tmavy,
.paticka {
  z-index: 1;
  box-shadow: 0 0 2.5rem rgb(0 0 0 / 0.12), 0 0 0.75rem rgb(0 0 0 / 0.05);
}
.paticka { position: relative; }
/* u tmavých pásů o kousek silnější, jinak by u tmavé hrany splynul */
.pas-tmavy,
.paticka { box-shadow: 0 0 3rem rgb(0 0 0 / 0.28), 0 0 1rem rgb(0 0 0 / 0.1); }
.sekce--bila { background: var(--bila); }

/* Tmavý petrolejový pás: přemapuje tokeny, takže tlačítka, linky i nadpisy
   uvnitř se přepnou samy. Totéž dostane hlavička, patička a 404. */
.pas-tmavy,
.hlavicka,
.paticka,
.stranka-chyba,
.pravni__hlava {
  --color-text: var(--bila);
  --color-heading: var(--bila);
  --color-muted: #bcd2d0;                     /* 7,7 : 1 na #00403f */
  --color-border: rgb(255 255 255 / 0.18);
  --color-accent-text: var(--oranz-svetla);
  --color-focus: var(--oranz-svetla);
  --color-nadtitulek: var(--petrol-300);
  /* tlačítka jako v aplikaci na tmavém panelu: světlejší oranžová s tmavým písmem,
     pod myší přeliv tmavou oranžovou a bílé písmo */
  --tl-hlavni-pozadi: #f6a45e;
  --tl-hlavni-text: #173b3b;
  --tl-hlavni-preliv: #c95d12;
  --tl-hlavni-text-hover: #ffffff;
  color-scheme: dark;
  color: var(--color-text);
}

/* cookie lišta a dialogy jsou vždy papírové – i když leží v tmavé stránce (404) */
.cookie-lista,
.dialog,
.paticka-okno {
  --color-text: var(--inkoust);
  --color-heading: var(--petrol-800);
  --color-muted: var(--sedozelena);
  --color-border: var(--linka);
  --color-accent-text: var(--oranz-tmava);
  --color-focus: var(--oranz-tmava);
  --tl-hlavni-pozadi: var(--color-accent-strong);
  --tl-hlavni-text: var(--color-on-accent);
  --tl-hlavni-preliv: var(--color-accent-hover);
  --tl-hlavni-text-hover: var(--color-on-accent);
  color-scheme: light;
  color: var(--color-text);
}

/* pás leží na papíře jako list: zaoblené hrany v místě přechodu */
.pas-tmavy {
  position: relative;
  background: var(--petrol-850);
  border-radius: var(--radius-pas);
}

/* hlava sekce: nadtitulek + H2 vlevo, perex vpravo dole (od notebooku) */
.hlava-sekce {
  display: grid;
  gap: var(--space-4) var(--space-6);
  margin-block-end: var(--space-8);
}

.hlava-sekce__titul {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.hlava-sekce__perex {
  max-inline-size: var(--mira);
  font-size: var(--text-xl);
  color: var(--color-muted);
}

@media (min-width: 64rem) {
  .hlava-sekce {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
  }
  .hlava-sekce__titul { grid-column: 1 / span 7; }
  .hlava-sekce__perex {
    grid-column: 8 / span 5;
    padding-block-end: 0.35em;
    padding-inline-start: var(--space-5);
    border-inline-start: var(--line-silna) solid var(--oranz);
  }
}

.nadpis-sekce { max-inline-size: 18ch; }

/* hlavička sekce na střed (bez perexu) */
.hlava-sekce--stred { justify-items: center; text-align: center; }
.hlava-sekce--stred .hlava-sekce__titul { justify-items: center; }

@media (min-width: 64rem) {
  .hlava-sekce--stred { grid-template-columns: 1fr; }
  .hlava-sekce--stred .hlava-sekce__titul { grid-column: 1; }
}

/* přípisek: krátká poznámka v čárkovaném rámečku (jako tip), nakřivo.
   Na mobilu pod nadpisem vpravo, od notebooku v pravém horním rohu sekce. */
.pripisek {
  justify-self: end;
  max-inline-size: 21rem;
  padding: var(--space-4) var(--space-5);
  border: var(--line-silna) dashed var(--oranz-svetla);
  border-radius: var(--radius-lg);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--oranz-svetla);
  rotate: 3deg;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* přípisek na světlé ploše: celý v tmavší oranžové (text čitelný 4,9 : 1) */
.pripisek--svetly { border-color: var(--oranz-tmava); color: var(--oranz-tmava); }
.pripisek--svetly .pripisek__ikona { background: var(--oranz-tmava); color: var(--bila); }

/* ikona v kolečku – jako žárovka u tipů, barvy pro tmavý pás */
.pripisek__ikona {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background: var(--oranz-svetla);
  color: var(--petrol-850);
  font-size: 1.375rem;
}

/* tablet a menší notebook (do 80 rem): hlavička Pro koho to je na střed (nadtitulek,
   nadpis i přípisek) – přišpendlený přípisek v rohu by tu do nadpisu narážel */
@media (min-width: 40rem) and (max-width: 79.99rem) {
  .pas-tmavy--pro-koho .hlava-sekce { justify-items: center; text-align: center; }
  .pas-tmavy--pro-koho .hlava-sekce__titul { justify-items: center; }
  .pas-tmavy--pro-koho .pripisek { justify-self: center; text-align: start; }
}

/* tablet a menší notebook: v Ukázkách přípisek nad nadpisem (vpravo nahoře, jako v rohu na desktopu) */
@media (min-width: 40rem) and (max-width: 79.99rem) {
  #ukazky .hlava-sekce--pripisek .pripisek { order: -1; margin-block: 0 var(--space-3); }
}

/* do 80 rem: přípisek v toku pod nadpisem – víc vzduchu nad ním, méně pod ním */
@media (max-width: 79.99rem) {
  .hlava-sekce--pripisek .pripisek { margin-block-start: var(--space-5); }
  .hlava-sekce--pripisek,
  .pas-tmavy--pro-koho .hlava-sekce.hlava-sekce--pripisek { margin-block-end: var(--space-7); }
}

/* mobil: kolem přípisku víc vzduchu (nad ním od nadpisu, pod ním k pásům) */
@media (max-width: 39.99rem) {
  .hlava-sekce--pripisek .pripisek { margin-block-start: var(--space-6); }
  .hlava-sekce--pripisek,
  .pas-tmavy--pro-koho .hlava-sekce.hlava-sekce--pripisek { margin-block-end: var(--space-8); }
}

@media (min-width: 64rem) {
  .hlava-sekce--pripisek { position: relative; grid-template-columns: 1fr; }
  .hlava-sekce--pripisek .hlava-sekce__titul { grid-column: 1; }
}

/* od 80 rem přípisek nakřivo v pravém horním rohu sekce */
@media (min-width: 80rem) {
  .hlava-sekce--pripisek .pripisek {
    position: absolute;
    inset-block-start: -3rem;
    inset-inline-end: 0;
    max-inline-size: 28rem;
    font-size: var(--text-xl);
    rotate: 5deg;
  }
}

/* nadtitulek: pomlčka z ikonové sady Cenotvoru (klínek) + verzálky */
.nadtitulek {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--color-nadtitulek);
}

.nadtitulek::before,
.pomlcka {
  content: '';
  flex: none;
  inline-size: 1.5rem;
  block-size: 0.5rem;
  background: var(--oranz);
  mask: url('/znacka/pomlcka-ikona.svg?v=66fd903d27') center / 100% 100% no-repeat;
}

.text-velky {
  max-inline-size: var(--mira);
  font-size: var(--text-xl);
}

/* ==========================================================================
   4. KOMPONENTY
   ========================================================================== */

/* --- tlačítka: mechaniku přelivu řeší sdílené tlacitka.css, tady jen skupiny --- */
.tlacitko { font-family: var(--font-text); }

.skupina-tlacitek {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.skupina-tlacitek--pod {
  justify-content: center;
  margin-block-start: var(--space-8);
}

/* MOBIL: dvojice tlačítek v sekcích přes celou šířku (jako v úvodu) */
@media (max-width: 29.99rem) {
  .problem__text .skupina-tlacitek,
  .skupina-tlacitek--pod { justify-self: stretch; }
  .problem__text .skupina-tlacitek .tlacitko,
  .skupina-tlacitek--pod .tlacitko { flex: 1 1 100%; }
}

/* MOBIL: pod dvojicí tlačítek oranžová značka jako na desktopu (tam ji kreslí
   pravidla od 48 rem). Vrstvu (isolation) nese sekce, ne skupina tlačítek –
   značka tak leží pod veškerým obsahem sekce, i pod textem nad tlačítky. */
@media (max-width: 47.99rem) {
  #problem { isolation: isolate; }
  .problem__text .skupina-tlacitek,
  .skupina-tlacitek--pod { position: relative; }
  .problem__text .skupina-tlacitek::before,
  .skupina-tlacitek--pod::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 12rem;
    aspect-ratio: 1;
    translate: -50% -50%;
    background-color: var(--oranz-listek);
    -webkit-mask: url('/znacka/znak.svg?v=ec8235de83') center / contain no-repeat;
    mask: url('/znacka/znak.svg?v=ec8235de83') center / contain no-repeat;
    pointer-events: none;
  }
}

.odkaz-sipka {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  color: var(--petrol-700);
  text-decoration: underline;
  text-decoration-color: var(--linka);
  text-decoration-thickness: var(--line-silna);
}

.odkaz-sipka .ikona { inline-size: 0.9em; block-size: 0.9em; transition: transform var(--doba) var(--ease-out); }
.odkaz-sipka:hover { color: var(--oranz-hover); text-decoration-color: currentColor; }
.odkaz-sipka:hover .ikona { transform: translate(0.15em, -0.15em); }

/* --- karta: jeden tvar pro celý web (vzor .karta z aplikace) -------------
   Linka je skutečný okraj (border), ne obrys kreslený dovnitř: je to vnější
   hrana karty v její šířce, obsah ani štítky ji nepřekryjí a stín začíná až za ní. */
.karta,
.dlazdice,
.ukazka-karta,
.bublina,
.otazka {
  border: var(--line-silna) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.karta,
.dlazdice,
.ukazka-karta,
.bublina { box-shadow: var(--shadow-card); }

.karta {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
}

.karta__text { color: var(--color-muted); }
.karta__text strong { color: var(--color-text); }

/* karta na tmavém pásu: stejný tvar, průsvitná plocha */
.karta--tma {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-4);
  background: rgb(255 255 255 / 0.05);
  border-color: rgb(255 255 255 / 0.18);
  box-shadow: none;
}

/* --- odznak ikony: kolečko, společné pro kroky, funkce, otázky ----------- */
.odznak {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background: var(--petrol-100);
  color: var(--petrol-800);
  font-size: 1.25rem;
  /* jen barvy – otočení nebo zvětšení by ikonu rasterizovalo a rozmazalo */
  transition: background-color var(--doba), color var(--doba);
}

.odznak--tma {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  font-size: 0.875rem;
  background: rgb(255 255 255 / 0.1);
  color: var(--bila);
}

/* --- štítek ------------------------------------------------------------- */
.stitek {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* skrytý štítek (např. „Vlastní vzhled nabídky" mimo Ultratvor) – sdílené
   [hidden] je ve vrstvě, display výš by ho jinak přebil */
.stitek[hidden] { display: none; }

/* --- tip (žárovka): tlumená karta ---------------------------------------- */
.tip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-inline-size: 52rem;
  margin-block-start: var(--space-8);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--petrol-100);
  outline: var(--line-silna) dashed var(--linka);
  outline-offset: calc(var(--line-silna) * -1);
}

.tip__ikona {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 4rem;
  block-size: 4rem;
  border-radius: 50%;
  background: var(--bila);
  color: var(--oranz-tmava);
  font-size: 1.875rem;
}

/* tip bez nápisu „Tip:" – sám o sobě větší a v petrolejové */
.tip__text a { font-weight: 700; }

.tip__text {
  align-self: center;
  font-size: var(--text-xl);
  line-height: 1.55;
  color: var(--petrol-700);
}

/* ==========================================================================
   5. HLAVIČKA A MENU (z návrhu 2)
   ========================================================================== */
.hlavicka {
  position: sticky;
  top: 0;
  z-index: 50;
  /* linka dole je stín, ne rámeček – hlavička tak má přesně --vyska-hlavicky
     a úvod pod ní zajede celý (rámeček nahoře odkrýval 1px pruh pozadí stránky) */
  box-shadow: inset 0 calc(var(--line) * -1) 0 transparent;
  transition: background-color 0.3s, box-shadow 0.3s;
}

/* po odscrollování plná tmavá lišta (žádné rozostření) */
.hlavicka.je-posunuta {
  background: var(--petrol-900);
  box-shadow: inset 0 calc(var(--line) * -1) 0 rgb(255 255 255 / 0.1);
}

.hlavicka__obal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-block-size: var(--vyska-hlavicky);
}

.hlavicka__logo { flex: none; }
.hlavicka__logo img { inline-size: auto; block-size: 2.125rem; }

.hlavicka__hamburger {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  margin-inline-end: calc(var(--space-3) * -1);
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.hlavicka__hamburger .ikona { inline-size: 1.25rem; block-size: 1.25rem; }

/* mobilní menu = popover přes celou obrazovku, položky číslované jako kapitoly */
.menu {
  inset: 0;
  inline-size: 100%;
  max-inline-size: none;
  block-size: 100dvh;
  max-block-size: none;
  margin: 0;
  padding: var(--space-4) 7.5% var(--space-7);
  border: 0;
  background: var(--petrol-900);
  color: var(--color-text);
  overflow-y: auto;
}

.menu:popover-open {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  opacity: 1;
  transform: none;
  transition: opacity 0.3s ease, transform 0.4s var(--ease-out), display 0.4s allow-discrete, overlay 0.4s allow-discrete;
}

@starting-style {
  .menu:popover-open { opacity: 0; transform: translateY(-1rem); }
}

/* i zavírání je plynulé: zavřené menu (jen na mobilu, na desktopu je to lišta)
   odjede a zmizí stejnou cestou, display a overlay počkají na konec */
@media (max-width: 63.99rem) {
  .menu:not(:popover-open) {
    opacity: 0;
    transform: translateY(-1rem);
    transition: opacity 0.3s ease, transform 0.4s var(--ease-out), display 0.4s allow-discrete, overlay 0.4s allow-discrete;
  }
}

.menu__hlava {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-block-size: 3.5rem;
}

.menu__logo { inline-size: auto; block-size: 2.125rem; }

.menu__zavrit {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  padding: var(--space-3);
  border: var(--line-silna) solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.menu__zavrit .ikona { inline-size: 1rem; block-size: 1rem; }

.menu__seznam {
  list-style: none;
  display: grid;
}

.menu__seznam li { border-bottom: var(--line) solid var(--color-border); }

.menu__odkaz {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-3);
  font-size: clamp(1.625rem, 1.3rem + 2.4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: inherit;
  text-decoration: none;
}

/* před každou položkou oranžová pomlčka z ikonové sady (jako u nadtitulků);
   u aktivní sekce ji nahradí značka Cenotvoru */
.menu__odkaz::before {
  content: '';
  flex: none;
  align-self: center;
  inline-size: 1.25rem;
  block-size: 0.4rem;
  background: var(--oranz-svetla);
  -webkit-mask: url('/znacka/pomlcka-ikona.svg?v=66fd903d27') center / 100% 100% no-repeat;
  mask: url('/znacka/pomlcka-ikona.svg?v=66fd903d27') center / 100% 100% no-repeat;
}

.menu__odkaz[aria-current]::before { display: none; }

/* aktivní sekce: před názvem malá značka Cenotvoru (jako u aktivní stránky
   v hlavním panelu aplikace), text se nebarví. Pod myší světlá oranžová jako
   značka; po kliknutí se barva hned vrátí (.je-kliknuto, dokud myš neodjede) */
.menu__odkaz:hover { color: var(--oranz-svetla); }
.menu__odkaz.je-kliknuto { color: inherit; }

.menu__odkaz[aria-current]::after {
  content: '';
  order: -1;
  flex: none;
  align-self: center;
  /* roste s písmem položky (na tabletu větší než na mobilu); je širší než pomlčka,
     záporný okraj to vyrovná, ať názvy položek zůstanou pod sebou */
  inline-size: 0.8em;
  block-size: 0.8em;
  margin-inline: calc((1.25rem - 0.8em) / 2);
  background: var(--oranz-svetla);
  -webkit-mask: url('/znacka/znak.svg?v=ec8235de83') center / contain no-repeat;
  mask: url('/znacka/znak.svg?v=ec8235de83') center / contain no-repeat;
}

.menu__akce {
  display: grid;
  gap: var(--space-4);
  margin-block-start: auto;
}

/* v mobilním menu přes celou obrazovku mají akce plnou výšku (nízké jsou jen v liště) */
.menu__akce .tlacitko--nizke { min-block-size: 3rem; padding-block: 0.75rem; }
.menu__akce .tlacitko--terciarni { box-shadow: inset 0 0 0 0.0625rem var(--color-border); }
/* v mobilním menu je hlavní akce nahoře (palec na ni dosáhne první), v liště zůstává vpravo */
.menu__akce .tlacitko--hlavni { order: -1; }


/* desktop: obyčejná lišta, popover se neuplatní */
@media (min-width: 64rem) {
  .hlavicka__logo img { block-size: 2.375rem; }
  /* výška hlavního tlačítka v aplikaci (Pole.tsx: min-h-10, py-2, px-4) */
  .menu__akce .tlacitko--nizke { min-block-size: 2.5rem; padding: 0.5rem 1rem; }
  .menu__akce .tlacitko--hlavni { order: 0; }
  .menu__akce .tlacitko--terciarni { box-shadow: none; }
  .menu__akce .tlacitko--terciarni:hover { box-shadow: inset 0 0 0 0.0625rem var(--color-border); }
  .hlavicka__hamburger,
  .menu__hlava { display: none; }

  .menu,
  .menu:not(:popover-open) {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--space-6);
    inline-size: auto;
    block-size: auto;
    padding: 0;
    background: none;
    overflow: visible;
  }

  .menu__seznam { display: flex; gap: var(--space-1); }
  .menu__seznam li { border: 0; }

  .menu__odkaz {
    position: relative;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-muted);
    transition: color var(--doba);
  }

  .menu__odkaz::before { content: none; }

  .menu__odkaz:hover { color: var(--oranz-svetla); }
  .menu__odkaz.je-kliknuto { color: var(--color-muted); }

  /* značka aktivní sekce: před názvem si plynule udělá místo – vyroste z nulové
     šířky a název i sousední odkazy se odsunou do boku (žádné vyhrazené mezery) */
  .menu__odkaz { gap: 0; align-items: baseline; }

  .menu__odkaz::after {
    content: '';
    order: -1;
    flex: none;
    inline-size: 0;
    aspect-ratio: 1;
    min-block-size: 0;   /* jinak by prázdný obsah držel výšku řádku a značka nebyla čtverec */
    margin-inline-end: 0;
    opacity: 0;
    background: var(--oranz-svetla);
    -webkit-mask: url('/znacka/znak.svg?v=ec8235de83') center / contain no-repeat;
    mask: url('/znacka/znak.svg?v=ec8235de83') center / contain no-repeat;
    transition: inline-size 0.35s var(--ease-out), margin-inline-end 0.35s var(--ease-out), opacity 0.25s ease;
  }

  /* spodní hrana značky na účaří textu – střed pak sedí na ose písmen
     (mezi výškou malých písmen a verzálek), nezávisle na řádkování */
  .menu__odkaz[aria-current]::after {
    inline-size: 0.75rem;
    margin-inline-end: var(--space-2);
    opacity: 1;
  }

  .menu__akce {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: 0;
  }
}

@media (min-width: 64rem) and (max-width: 79.99rem) {
  .menu { gap: var(--space-4); }
  .menu__odkaz { padding-inline: var(--space-2); }
}

/* ==========================================================================
   6. HERO (z návrhu 2) – tmavá scéna s reflektorem
   ========================================================================== */
.hero {
  overflow: clip;
  isolation: isolate;
  margin-block-start: calc(var(--vyska-hlavicky) * -1);
  padding-block: calc(var(--vyska-hlavicky) + var(--space-6)) var(--space-9);
  /* hero je vždy o kousek vyšší než okno (o zaoblení pásu + 1 rem), takže oblé rohy
     na první obrazovce nikdy nejsou vidět; nikdy ale nižší než 48 rem, ať se obsah
     na nízkých noteboocích nemačká. svh = výška bez lišt prohlížeče */
  display: grid;
  align-content: center;
  min-block-size: max(48rem, calc(100vh + var(--radius-pas) + 1rem));
  min-block-size: max(48rem, calc(100svh + var(--radius-pas) + 1rem));
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  background:
    radial-gradient(70% 55% at 80% 30%, rgb(22 127 127 / 0.32) 0%, transparent 70%),
    linear-gradient(180deg, var(--petrol-900) 0%, var(--petrol-850) 70%);
}

.hero__obal {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.hero__text {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

/* hutnější řádkování než ostatní nadpisy a o kus víc vzduchu pod nadpisem */
.hero__nadpis {
  /* flex sloupec: záporné okraje řádků (rezerva pro diakritiku) se mezi sebou
     nesmí slučovat – v obyčejném toku by se z -0,34em a -0,18em stalo jen -0,34em
     a mezi řádky by přibylo 0,18em navíc oproti řádkům zalomeným uvnitř */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-inline-size: none;
  line-height: 1.1;
  /* víc místa pod nadpisem – tah štětcem pod „přizpůsobí" je výraznější než dřív */
  margin-block-end: var(--space-6);
}

/* řádek nadpisu = maska, ze které text vyjede (pohyb viz 19.) */
.radek {
  display: block;
  /* ořez jen svisle (text vyjíždí zespoda); do stran ne – čárka nad „í" na konci
     slova v Galindu přečnívá doprava za šířku písmene */
  overflow: visible clip;
  /* rezerva pro háčky a čárky nahoře, ocásky (p, j, y) a tah pod slovem dole */
  padding-block: 0.18em 0.34em;
  margin-block: -0.18em -0.34em;
}

/* blok, ne inline-block: inline-block ve vlastním řádku přidával k řádkování mezeru
   navíc, takže zalomený řádek (na mobilu) měl jiné řádkování než sousední */
.radek__text { display: block; }

/* slovo „přizpůsobí" mění barvu s motivem ukázky */
.hero__zvyrazneni {
  position: relative;
  display: inline-block;
  color: var(--motiv-svetla);
  transition: color 1.1s var(--ease-out);
  white-space: nowrap;
}

/* tah štětcem pod slovem (img/tah-stetec.png, 547 × 33 px, z Grafika/cara2.png):
   obrázek je jen tvar (maska), barva je --oranz; výška podle poměru stran.
   Uprostřed se zvedá do oblouku, proto sedí o kus níž pod slovem. */
.hero__zvyrazneni::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -0.07em;
  aspect-ratio: 547 / 33;
  translate: 0 50%;
  background: var(--oranz);
  -webkit-mask: url('/img/tah-stetec.png?v=5afed25c81') center / 100% 100% no-repeat;
  mask: url('/img/tah-stetec.png?v=5afed25c81') center / 100% 100% no-repeat;
}

.hero__perex {
  max-inline-size: 34rem;
  font-size: var(--text-xl);
  color: var(--color-muted);
}

.hero__text .skupina-tlacitek { margin-block-start: var(--space-4); }

/* mobil: tlačítka přes celou šířku, ať nevznikají nestejné řádky */
@media (max-width: 29.99rem) {
  .hero__text .skupina-tlacitek { justify-self: stretch; }
  .hero__text .skupina-tlacitek .tlacitko { flex: 1 1 100%; }
}


/* Chameloun s nabídkou: menší scéna, ať tlapy drží okno a nevisí ve vzduchu */
.hero__vizual {
  position: relative;
  isolation: isolate;
  inline-size: min(100%, 23rem);
  justify-self: center;
}

/* Mobil a tablet: Chameloun s ukázkou hned pod nadpisem, pak podnadpis a tlačítka.
   Textový sloupec se rozpustí (display: contents) a jeho části se seřadí v mřížce hero.
   Scéna je menší, aby pod ní byl vidět aspoň začátek podnadpisu. */
@media (max-width: 63.99rem) {
  .hero__obal { gap: 0; justify-items: start; }
  .hero__text { display: contents; }
  .hero__nadpis { order: 1; margin-block-end: var(--space-6); }
  .hero__vizual { order: 2; inline-size: min(100%, 19rem); margin-block-end: var(--space-7); }
  .hero__perex { order: 3; }
  .hero__text .skupina-tlacitek { order: 4; margin-block-start: var(--space-7); justify-self: stretch; }
}

/* mobil: nadpis úvodu na střed (zbytek zůstává zarovnaný vlevo) */
@media (max-width: 39.99rem) {
  .hero__nadpis { justify-self: stretch; align-items: center; text-align: center; }
}

/* tablet na výšku (od 40 rem – iPad mini má 744 px): úvod celý na střed */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .hero__obal { justify-items: center; text-align: center; }
  .hero__nadpis { align-items: center; margin-block-end: var(--space-7); }
  .hero__perex { margin-inline: auto; }
  .hero__text .skupina-tlacitek { justify-content: center; justify-self: center; }
}

/* reflektor: světlý kruh za Chamelounem, ať petrolejový maskot nesplyne s pozadím */
.hero__vizual::before {
  content: '';
  position: absolute;
  inset: 4% -30% 14%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(230 242 241 / 0.5) 0%, rgb(230 242 241 / 0.2) 50%, rgb(230 242 241 / 0) 100%);
}

/* měkký kužel světla shora (jen vedle textu; pod textem by byla vidět jeho horní hrana) */
.hero__vizual::after {
  content: none;
  position: absolute;
  inset: -40% -25% 25%;
  z-index: -2;
  background: radial-gradient(45% 100% at 50% 0%, rgb(230 242 241 / 0.14) 0%, rgb(230 242 241 / 0.05) 55%, rgb(230 242 241 / 0) 100%);
}

@media (min-width: 64rem) {
  .hero { padding-block-end: var(--space-8); }
  .hero__obal {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-6);
  }
  .hero__text { grid-column: 1 / span 7; }
  /* scéna roste s výškou okna (výška scény ≈ 1,6 × šířka), ve sloupcích 8–12
     zarovnaná doleva – blíž k textu */
  .hero__vizual { grid-column: 8 / span 5; justify-self: start; inline-size: min(100%, clamp(24rem, 52svh, 44rem)); }
  .hero__vizual::after { content: ''; }
}

/* Chameloun (homepage.png) má 1138 px na šířku – víc se roztáhnout nesmí, jinak by byl
   rozmazaný. Na hustých displejích proto scéna roste nejvýš do 1138 px / hustota;
   Chameloun je o 3rem (sloupek koleček) užší než scéna. Mobil a tablet se vejdou vždy. */
@media (min-width: 64rem) and (min-resolution: 1.75dppx), (min-width: 64rem) and (-webkit-min-device-pixel-ratio: 1.75) {
  .hero__vizual { max-inline-size: calc(650px + 3rem); }
}
@media (min-width: 64rem) and (min-resolution: 2dppx), (min-width: 64rem) and (-webkit-min-device-pixel-ratio: 2) {
  .hero__vizual { max-inline-size: calc(569px + 3rem); }
}
@media (min-width: 64rem) and (min-resolution: 2.5dppx), (min-width: 64rem) and (-webkit-min-device-pixel-ratio: 2.5) {
  .hero__vizual { max-inline-size: calc(455px + 3rem); }
}
@media (min-width: 64rem) and (min-resolution: 3dppx), (min-width: 64rem) and (-webkit-min-device-pixel-ratio: 3) {
  .hero__vizual { max-inline-size: calc(379px + 3rem); }
}

/* --- ovládání ukázky: svislý sloupek koleček vpravo od nabídky -------------
   Scéna s Chamelounem uhne doleva o šířku sloupku; spodní kolečko sedí na úrovni
   spodního okraje obrázku. Bez popisků. */
.hero .ukazka {
  --kolecko: 2rem;
  position: relative;
  padding-inline-end: calc(var(--kolecko) + var(--space-4));
}

.hero .ukazka__ovladani {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--space-3);
}

.hero .ukazka__motivy {
  flex-direction: column;
  gap: var(--space-3);
}

.hero .ukazka__motiv {
  inline-size: var(--kolecko);
  block-size: var(--kolecko);
  border: 0;
  box-shadow: inset 0 0 0 0.125rem rgb(255 255 255 / 0.85);
  transition: box-shadow 0.26s ease, outline-color 0.26s ease;
}

/* pod myší se bílý obrys přebarví na světlou oranžovou – stejně jako u pauzy */
.hero .ukazka__motiv:hover { box-shadow: inset 0 0 0 0.125rem var(--oranz-svetla); }

/* vybraný motiv: bílý prstenec kolem kolečka */
.hero .ukazka__motiv[aria-pressed='true'] {
  outline: 0.125rem solid var(--bila);
  outline-offset: 0.1875rem;
}

.hero .ukazka__motiv:focus-visible,
.hero .ukazka__pauza:focus-visible {
  outline: 0.1875rem solid var(--color-focus);
  outline-offset: 0.1875rem;
}

/* pauza: stejný bílý obrys jako kolečka motivů, průhledná;
   pod myší obrys i znak světle oranžové – jako vedlejší tlačítka na tmavé ploše */
.hero .ukazka__pauza {
  display: grid;
  place-items: center;
  inline-size: var(--kolecko);
  block-size: var(--kolecko);
  min-block-size: 0;
  margin-block-start: var(--space-2);
  padding: 0;
  border-radius: 50%;
  border: 0;
  box-shadow: inset 0 0 0 0.125rem rgb(255 255 255 / 0.85);
  background: transparent;
  color: var(--bila);
  text-decoration: none;
  opacity: 1;
  transition: box-shadow 0.26s ease, color 0.26s ease;
}

.hero .ukazka__pauza:hover {
  box-shadow: inset 0 0 0 0.125rem var(--oranz-svetla);
  color: var(--oranz-svetla);
}

.ukazka__pauza-znak { display: grid; place-items: center; }
.ukazka__pauza-znak--pauza { inline-size: 0.75rem; block-size: 0.8rem; }
.ukazka__pauza-znak--spustit .ikona { inline-size: 0.55rem; block-size: 0.8rem; margin-inline-start: 0.125rem; }

/* běží → znak pauzy; zastaveno → zobáček (spustit) */
.ukazka__pauza-znak--spustit,
.ukazka__pauza[aria-pressed='true'] .ukazka__pauza-znak--pauza { display: none; }
.ukazka__pauza[aria-pressed='true'] .ukazka__pauza-znak--spustit { display: grid; }

@media (max-width: 29.99rem) {
  .hero .ukazka { --kolecko: 1.75rem; }
}

/* ==========================================================================
   7. PROBLÉM (z návrhu 1) – zával vlevo, text vpravo
   ========================================================================== */
.problem {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.problem__text {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.problem__text .skupina-tlacitek { margin-block-start: var(--space-2); }

@media (max-width: 63.99rem) {
  .problem__text .skupina-tlacitek { justify-self: center; justify-content: center; }
}

/* mobil a tablet: obrázek mezi oběma odstavci – textový sloupec se rozpustí
   a jeho části se seřadí v mřížce sekce */
@media (max-width: 63.99rem) {
  .problem { gap: var(--space-5); justify-items: start; }
  .problem__text { display: contents; }
  .problem__text > :nth-child(-n + 3) { order: 1; }
  .problem__obrazek { order: 2; justify-self: stretch; margin-block: var(--space-5); }
  .problem__text > :nth-child(n + 4) { order: 3; }
}

.problem__obrazek { position: relative; }

/* koště jako kurzor nad hromadou (jen myš); aktivní bod je ve štětinách */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-rozhaneni] { cursor: url('/img/koste.svg?v=0bb43b403e') 8 40, auto; }
}


/* odlet: zrychluje se (jako po máchnutí) a nabírá rotaci */
.soubor.je-pryc {
  transition:
    translate var(--let, 0.9s) cubic-bezier(0.4, 0, 0.9, 0.6),
    rotate var(--let, 0.9s) cubic-bezier(0.4, 0, 0.9, 0.6);
}

/* návrat: snesou se zpátky jeden po druhém a měkce dosednou */
.soubor.je-zpet {
  transition:
    translate 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--zpozdeni, 0ms),
    rotate 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--zpozdeni, 0ms);
}
.problem__soubory { list-style: none; }

/* „přílohy" jako malé karty kolem závalu
   Stojí rovně a v klidu (natočené drobné ikony i písmo mají na obrazovce schodovité
   hrany). Nad obrázkem je kurzor koště: štítek, o který zavadí, odletí za okraj
   obrazovky (script.js zapíše dráhu do --rx/--ry/--rot), po odjetí myši se vrátí. */
.soubor {
  --rx: 0px;
  --ry: 0px;
  --rot: 0deg;
  position: absolute;
  translate: var(--rx) var(--ry);
  rotate: var(--rot);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bila);
  outline: var(--line-silna) solid var(--linka);
  outline-offset: calc(var(--line-silna) * -1);
  box-shadow: var(--shadow-card);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--inkoust);
}

.soubor .ikona {
  inline-size: 1.125em;
  block-size: 1.125em;
  color: var(--oranz-tmava);
  shape-rendering: geometricPrecision;
}
/* rozmístění kolem hromady; na užších displejích jen část, ať se nepřekrývají */
.soubor--1 { inset-block-start: 6%; inset-inline-start: 6%; }
.soubor--2 { display: none; inset-block-start: 16%; inset-inline-end: 6%; }
.soubor--3 { inset-block-end: 14%; inset-inline-start: 9%; }
.soubor--4 { display: none; inset-block-end: 26%; inset-inline-end: 11%; }
.soubor--5 { display: none; inset-block-start: 42%; inset-inline-start: 4%; }
.soubor--6 { display: none; inset-block-start: -3%; inset-inline-start: 38%; }
.soubor--7 { display: none; inset-block-end: -2%; inset-inline-end: 20%; }

/* mobil: jen dvě verze nabídky nad sebou (gradace v3 → v4), u krajů, ať nezakrývají oči */
@media (max-width: 47.99rem) {
  .soubor { max-inline-size: 92%; white-space: normal; }
  .soubor--1,
  .soubor--3 { display: none; }
  .soubor--4 { display: inline-flex; inset-block: 2% auto; inset-inline: 2% auto; }
  .soubor--5 { display: inline-flex; inset-block: auto -4%; inset-inline: auto 0; }
}

/* tablet na výšku (40–48 rem): víc bublin kolem hromady – nahoře a dole, ať nezakrývají oči */
@media (min-width: 40rem) and (max-width: 47.99rem) {
  .soubor { max-inline-size: none; white-space: nowrap; }
  .soubor--1 { display: inline-flex; inset-block: 21% auto; inset-inline: auto 3%; }
  .soubor--4 { inset-block: 30% auto; inset-inline: 1% auto; }
  .soubor--3 { display: inline-flex; inset-block: auto 2%; inset-inline: 4% auto; }
  .soubor--5 { inset-block: auto 15%; inset-inline: auto 1%; }
  .soubor--6 { display: inline-flex; inset-block: 7% auto; inset-inline: 28% auto; }
}

@media (min-width: 48rem) {
  .soubor--2,
  .soubor--5 { display: inline-flex; }
}

@media (min-width: 64rem) {
  .problem { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
  .problem__obrazek { grid-column: 1 / span 7; grid-row: 1; margin-inline-end: var(--space-5); }
  .problem__text { grid-column: 8 / span 5; grid-row: 1; }
  .soubor--4,
  .soubor--6,
  .soubor--7 { display: inline-flex; }
}

/* ==========================================================================
   8. JAK TO FUNGUJE (z návrhu 3) – kroky na cestičce, lístečky na pásce
   ========================================================================== */
.kroky-obal { position: relative; }

.cesticka { display: none; }

.kroky {
  list-style: none;
  position: relative;
  display: grid;
  gap: var(--space-8);
}

/* mobil a tablet: kroky pod sebou, odznaky spojené vlnitou tečkovanou cestičkou.
   Každý krok kromě posledního kreslí úsek od svého odznaku k dalšímu
   (přes mezeru mezi kroky), takže cestička končí přesně v posledním bodě. */
.krok:not(:last-child)::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset-block: 2rem calc((var(--space-8) + 2rem) * -1);
  inset-inline-start: 2rem;
  inline-size: 4rem;
  translate: -50% 0;
  background: linear-gradient(var(--krok-barva), var(--krok-dalsi, var(--krok-barva)));
  /* každý úsek jiná křivka, ať cesta nepůsobí jako opakovaný vzor */
  -webkit-mask: var(--vlna) center / 100% 100% no-repeat;
  mask: var(--vlna) center / 100% 100% no-repeat;
}

.krok--1 { --vlna: url('/img/cesticka-vlna-1.svg?v=b3f052119b'); }
.krok--2 { --vlna: url('/img/cesticka-vlna-2.svg?v=5729532b38'); }

.krok {
  --krok-barva: var(--petrol-500);
  position: relative;
  display: grid;
  grid-template-columns: 4rem 1fr;
  align-content: start;   /* kratší kroky nenatahují řádky – nadpisy drží jednu výšku */
  column-gap: var(--space-5);
  row-gap: var(--space-3);
  align-items: start;
}

/* tři kroky = tři odstíny petrolejové, od značkové po hlubokou */
.krok--1 { --krok-dalsi: var(--petrol-700); }
.krok--2 { --krok-barva: var(--petrol-700); --krok-dalsi: var(--petrol-800); }
.krok--3 { --krok-barva: var(--petrol-800); }

.krok > :not(.krok__ikona, .krok__cislo) { grid-column: 2; }

/* číslo kroku jako odznak na kolečku s ikonou */
.krok__cislo {
  position: absolute;
  z-index: 2;
  inset-block-start: -0.5rem;
  inset-inline-start: 2.5rem;
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  background: var(--bila);
  box-shadow: 0 0 0 var(--line-silna) var(--krok-barva), var(--shadow-card);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--krok-barva);
  pointer-events: none;
}

/* velký odznak kroku: stejné kolečko jako .odznak, jen plné a větší */
.krok__ikona {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  inline-size: 4rem;
  block-size: 4rem;
  border-radius: 50%;
  background: var(--krok-barva);
  color: var(--bila);
  font-size: 1.5rem;
  box-shadow: 0 0 0 0.5rem var(--petrol-100);
}

.krok__nadpis {
  position: relative;
  align-self: end;
  min-block-size: 2rem;
  padding-block-start: var(--space-4);
}

.krok__text { position: relative; color: var(--color-muted); max-inline-size: 30rem; }

/* „Nahrazuje…" jako lísteček přilepený páskou; nahrazené věci přeškrtnuté */
.krok__stitek {
  position: relative;
  justify-self: start;
  margin-block-start: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 0.125rem 0.125rem var(--radius-md) 0.125rem;
  background: var(--oranz-listek);
  box-shadow: 0 0.5rem 1rem -0.625rem rgb(120 60 10 / 0.45);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5;
  color: var(--inkoust);
  rotate: -1.5deg;
}

.krok--2 .krok__stitek { rotate: 1.25deg; }

/* kousek lepicí pásky */
.krok__stitek::before {
  content: '';
  position: absolute;
  inset-block-start: -0.5rem;
  inset-inline-start: 50%;
  inline-size: 3.5rem;
  block-size: 1rem;
  translate: -50% 0;
  rotate: 3deg;
  background: rgb(255 255 255 / 0.7);
  box-shadow: 0 0 0 0.0625rem rgb(23 59 59 / 0.08);
}

/* zalomení jen na desktopu (lísteček je tam úzký a dlouhý text by se zlomil nahodile) */
.jen-desktop { display: none; }

@media (min-width: 64rem) {
  .jen-desktop { display: inline; }
}

/* desktop: tři kroky vedle sebe na vlnité cestičce */
@media (min-width: 64rem) {
  .kroky {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-7);
    padding-block-start: var(--space-4);
  }

  .krok:not(:last-child)::after { display: none; }

  .krok {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .krok > :not(.krok__ikona, .krok__cislo) { grid-column: 1; }

  .krok__ikona {
    grid-row: auto;
    inline-size: 5rem;
    block-size: 5rem;
    font-size: 1.875rem;
  }

  .krok__cislo { inset-inline-start: calc(50% + 1.25rem); }
  .krok__nadpis { padding-block-start: var(--space-3); }
  .krok__stitek { justify-self: center; }

  .cesticka {
    display: block;
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(var(--space-4) + 2.5rem - 3.75rem);
    inline-size: 100%;
    block-size: 7.5rem;
    overflow: visible;
  }

  .cesticka { container-type: inline-size; }
  .cesticka__vyrez { block-size: 100%; overflow: hidden; }
  /* SVG má vždy plnou šířku cestičky, výřez kolem něj se jen rozšiřuje */
  .cesticka__svg { display: block; inline-size: 100cqi; max-inline-size: none; block-size: 100%; }

  .cesticka__linka {
    fill: none;
    stroke: var(--petrol-500);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 2 12;
    vector-effect: non-scaling-stroke;
  }


  #jak-to-funguje .tip { margin-inline: auto; }
}

/* ==========================================================================
   9. FUNKCE (z návrhu 3) – asymetrická mřížka dlaždic
   ========================================================================== */
.funkce {
  list-style: none;
  display: grid;
  gap: var(--space-4);
}

.dlazdice {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  /* bez náklonu a 3D: ikony i text by se rozmazaly; mění se jen barvy */
  transition: border-color var(--doba), box-shadow var(--doba);
}

.dlazdice__nadpis { font-size: var(--h4); }

/* Štítek tarifu u funkcí, které nejsou v Minitvoru (podle config/tarify.php v aplikaci).
   Tvar grafické pomlčky: rovná horní hrana, spodní se jemně zužuje doprava
   (/img/pomlcka-stitek.svg?v=72f8cc8860). Visí z horní linky kartičky kousek od pravého okraje
   a kryje ji. Uvádí se jen nejnižší tarif, vyšší funkci má taky. Je to odkaz na ceník.
   Barvy jako tlačítko na tmavém v aplikaci, jen obráceně: v klidu světlá oranžová
   s tmavým písmem, pod myší tmavá oranžová s bílým písmem. */
/* ořez až na vnější hraně okraje, aby štítek mohl překrýt horní linku
   (bez podpory overflow-clip-margin se ořízne o tloušťku linky níž – nevadí) */
.dlazdice:has(.dlazdice__zalozka) { overflow: clip; overflow-clip-margin: var(--line-silna); }

.dlazdice__zalozka {
  position: absolute;
  z-index: 1;
  inset-block-start: calc(var(--line-silna) * -1);
  inset-inline-end: var(--space-5);
  padding: 0.375rem var(--space-5) 0.625rem var(--space-4);   /* text výš – spodní hrana se zužuje */
  background: var(--oranz-svetla);
  color: var(--inkoust);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  -webkit-mask: url('/img/pomlcka-stitek.svg?v=72f8cc8860') center / 100% 100% no-repeat;
  mask: url('/img/pomlcka-stitek.svg?v=72f8cc8860') center / 100% 100% no-repeat;
  transition: background-color var(--doba), color var(--doba);
}

.dlazdice__zalozka:hover { background: #c95d12; color: var(--bila); }
.dlazdice__zalozka:focus-visible { outline: 0.1875rem solid var(--color-focus); outline-offset: 0.125rem; -webkit-mask: none; mask: none; }

/* při vjetí kartičky do obrazu se vysune zpod horní linky (kartička ho nahoře ořízne) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dlazdice__zalozka {
      animation: vysunout-shora linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 35%;
    }
  }
}

@keyframes vysunout-shora {
  from { transform: translateY(-100%); }
}
.dlazdice__text { color: var(--color-muted); }

/* pod myší jen petrolejový obrys, stín se nemění */
.dlazdice:hover { border-color: var(--petrol-500); }
/* ve funkcích je odznak zaoblený čtvereček; pod myší se plynule zakulatí do kolečka
   a vybarví (mění se jen tvar a barva – žádné otočení, ikona zůstává ostrá) */
.dlazdice .odznak {
  border-radius: var(--radius-md);
  transition: background-color var(--doba), color var(--doba), border-radius 0.4s var(--ease-out);
}

.dlazdice:hover .odznak { border-radius: 50%; background: var(--petrol-500); color: var(--bila); }

.dlazdice--velka .dlazdice__nadpis { font-size: var(--h3); }

/* --- velká dlaždice: Klikací nabídka (tmavá petrolejová) --- */
.dlazdice--klikaci {
  background: radial-gradient(120% 90% at 100% 100%, var(--petrol-500) 0%, var(--petrol-800) 70%);
  border-color: transparent;
  background-origin: border-box;
  color: var(--bila);
}

.dlazdice--klikaci:hover { border-color: transparent; }
.dlazdice--klikaci .dlazdice__nadpis { color: var(--bila); }
.dlazdice--klikaci .dlazdice__text { color: rgb(255 255 255 / 0.85); max-inline-size: 28rem; }
.dlazdice--klikaci .odznak { background: rgb(255 255 255 / 0.14); color: var(--bila); }
.dlazdice--klikaci:hover .odznak { background: var(--bila); color: var(--petrol-800); }

/* „Zkuste si to": tři balíčky jako v nabídce, návštěvník si sám vybere a přijme.
   Úzká dlaždice (mobil, tablet ~320 px) se řídí šířkou dlaždice, ne obrazovky. */
.dlazdice--klikaci { container-type: inline-size; }

.zkuste { position: relative; margin-block-start: var(--space-5); }
.zkuste[hidden] { display: none; }

.zkuste__vyzva {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oranz-svetla);
}

.zkuste__karty {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  padding-block-start: var(--space-4);   /* místo pro štítek nad kartou */
}

.zkuste__karta {
  position: relative;
  display: grid;
  gap: 0.25rem;
  justify-items: center;
  align-content: start;
  padding: 0 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bila);
  color: var(--inkoust);
  font: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 0.75rem 1.5rem -0.75rem rgb(0 0 0 / 0.5);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.zkuste__karta:hover { transform: translateY(-0.25rem); }
.zkuste__karta:focus-visible { outline: 0.1875rem solid var(--oranz-svetla); outline-offset: 0.25rem; }

.zkuste__karta[aria-pressed='true'],
.zkuste__karta[aria-pressed='true']:hover {
  z-index: 1;
  transform: scale(1.06);
  box-shadow: 0 0 0 0.1875rem var(--oranz), 0 0 0 0.5rem rgb(232 117 34 / 0.28), 0 1rem 2rem -0.75rem rgb(0 0 0 / 0.55);
}

.zkuste__nazev {
  inline-size: 100%;
  padding: 0.625rem 0.25rem;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--petrol-500);
  color: var(--bila);
  font-size: var(--text-sm);
  font-weight: 700;
}

.zkuste__cena { margin-block-start: 0.375rem; font-size: 0.9375rem; font-weight: 800; color: var(--petrol-800); white-space: nowrap; }
.zkuste__karta i { display: block; inline-size: 62%; block-size: 0.3rem; border-radius: var(--radius-pill); background: rgb(23 59 59 / 0.12); }
.zkuste__karta i + i { inline-size: 42%; }

/* štítek nad doporučenou kartou – jako v nabídce */
.zkuste__stitek {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% -100%;
  padding: 0.125rem 0.5rem;
  background: var(--oranz);
  color: var(--petrol-950);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* lišta jako ve skutečné nabídce */
.zkuste__lista {
  display: flex;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: rgb(0 0 0 / 0.22);
}

.zkuste__odmitnout,
.zkuste__prijmout {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.zkuste__odmitnout { border: 0.125rem solid rgb(255 255 255 / 0.35); color: rgb(255 255 255 / 0.8); }

.zkuste__prijmout {
  border: 0;
  background: var(--oranz-svetla);
  color: var(--petrol-950);
  cursor: pointer;
  transition: background-color var(--doba), color var(--doba);
}

.zkuste__prijmout:not(:disabled):hover { background: var(--oranz-tmava); color: var(--bila); }
.zkuste__prijmout:disabled { opacity: 0.45; cursor: default; }
.zkuste__prijmout:focus-visible { outline: 0.1875rem solid var(--oranz-svetla); outline-offset: 0.1875rem; }

/* potvrzení: okénko přes lištu (spodní hranou na ní), dlaždici nenatahuje, zavírá se křížkem */
.zkuste__hotovo {
  position: absolute;
  z-index: 5;
  inset-inline: 0;
  inset-block-end: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--oranz-svetla);
  color: var(--petrol-950);
  box-shadow: 0 1.5rem 3rem -0.75rem rgb(0 0 0 / 0.6);
  animation: zkuste-vyjet 0.35s var(--ease-out);
}

.zkuste__hotovo[hidden] { display: none; }
.zkuste__hotovo p { margin: 0.125rem 0 0; font-weight: 700; font-size: var(--text-base); line-height: 1.45; }

.zkuste__fajfka {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--petrol-950);
  color: var(--oranz-svetla);
}

.zkuste__fajfka .ikona { inline-size: 1rem; block-size: 1rem; }

.zkuste__zavrit {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  margin: -0.25rem -0.25rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--petrol-950);
  cursor: pointer;
}

.zkuste__zavrit .ikona { inline-size: 0.875rem; block-size: 0.875rem; }
.zkuste__zavrit:hover { background: rgb(0 0 0 / 0.12); }
.zkuste__zavrit:focus-visible { outline: 0.1875rem solid var(--petrol-950); outline-offset: 0.125rem; }

@keyframes zkuste-vyjet {
  from { opacity: 0; translate: 0 0.75rem; }
}

@container (max-width: 26rem) {
  .zkuste__karty { gap: var(--space-2); }
  .zkuste__nazev { padding: 0.5rem 0.125rem; font-size: 0.75rem; }
  .zkuste__cena { font-size: 0.6875rem; }
  .zkuste__stitek { font-size: 0.5625rem; padding: 0.0625rem 0.375rem; }
  .zkuste__odmitnout,
  .zkuste__prijmout { padding-inline: 0.375rem; }
  .zkuste__hotovo { gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); }
  .zkuste__hotovo p { font-size: var(--text-sm); }
  .zkuste__fajfka { inline-size: 1.75rem; block-size: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .zkuste__hotovo { animation: none; }
  .zkuste__karta { transition: none; }
}

/* --- velká dlaždice: Automatický přepočet s funkční ukázkou --- */
.dlazdice--prepocet { border-color: var(--petrol-500); }

.prepocet {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-3);
}

.prepocet[hidden] { display: none; }

.prepocet__pole {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.prepocet__legenda {
  margin-block-end: var(--space-2);
  padding: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--petrol-700);
}

.prepocet__radek {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--petrol-100);
  font-size: var(--text-sm);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.prepocet__radek--zaklad { font-weight: 700; }

.prepocet__volba {
  position: relative;
  grid-template-columns: auto 1fr auto;
  background: var(--bila);
  box-shadow: inset 0 0 0 var(--line-silna) var(--linka);
  cursor: pointer;
  transition: box-shadow var(--doba), background-color var(--doba);
}

.prepocet__volba input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* zaškrtávátko je znak „O" z loga – jako v nabídkách */
.prepocet__znak {
  inline-size: 1.125rem;
  block-size: 1.3125rem;
  background: var(--linka);
  mask: url('/znacka/znak-vnitrek-obrys.svg?v=b91f5ecc26') center / contain no-repeat;
  transition: background-color var(--doba);
}

.prepocet__nazev { font-weight: 600; }
.prepocet__cena { font-weight: 700; white-space: nowrap; }

/* volitelná položka: výběr je oranžový */
.prepocet__volba:hover { box-shadow: inset 0 0 0 var(--line-silna) var(--oranz); }
.prepocet__volba:has(input:checked) { box-shadow: inset 0 0 0 var(--line-silna) var(--oranz); background: var(--oranz-plocha); }
.prepocet__volba:has(input:checked) .prepocet__znak { background: var(--oranz); mask-image: url('/znacka/znak.svg?v=ec8235de83'); }
.prepocet__volba:has(input:focus-visible) { outline: 0.1875rem solid var(--color-focus); outline-offset: 0.125rem; }

.prepocet__vysledek {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: radial-gradient(75% 105% at 50% 100%, var(--petrol-500) 0%, var(--petrol-800) 100%);
  color: var(--bila);
  font-variant-numeric: tabular-nums;
}

.prepocet__soucet,
.prepocet__zaloha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.prepocet__soucet strong {
  display: inline-block;
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.prepocet__zaloha { color: rgb(255 255 255 / 0.85); }

/* rozložení mřížky – na mobilu malé dlaždice úsporně: ikona vlevo, text vpravo */
@media (max-width: 39.99rem) {
  .dlazdice:not(.dlazdice--velka) {
    grid-template-columns: auto 1fr;
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    padding: var(--space-5) var(--space-4);
  }
  .dlazdice:not(.dlazdice--velka) .odznak { grid-row: span 2; }
  /* se štítkem tarifu nahoře víc místa, ať štítek nesedí na nadpisu */
  .dlazdice:not(.dlazdice--velka):has(.dlazdice__zalozka) { padding-block-start: calc(var(--space-5) + 1.75rem); }
}

@media (min-width: 40rem) {
  .funkce { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dlazdice--velka { grid-column: span 2; }
}

/* dvousloupcové rozložení podle desktopu: Klikací nabídka vlevo přes dva řádky
   a vedle ní dvě malé dlaždice; na konci zrcadlově Automatický přepočet vpravo
   přes dva řádky a vlevo od něj poslední dvě malé */
@media (min-width: 40rem) and (max-width: 79.99rem) {
  .funkce { grid-auto-flow: row dense; }
  .dlazdice--klikaci { grid-column: 1; grid-row: 1 / span 2; grid-template-rows: auto auto auto 1fr; }
  .dlazdice--klikaci .zkuste { align-self: end; }
  .dlazdice--prepocet { grid-column: 2; grid-row: 5 / span 2; }
}

@media (min-width: 80rem) {
  .funkce {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row dense;
  }
  .dlazdice--klikaci { grid-column: 1 / span 2; grid-row: 1 / span 2; grid-template-rows: auto auto auto 1fr; }
  .dlazdice--klikaci .zkuste { align-self: end; }
  .dlazdice--prepocet { grid-column: 3 / span 2; grid-row: 3 / span 2; }
  .dlazdice--velka { padding: var(--space-7) var(--space-6); }
}

/* ==========================================================================
   10. PRO KOHO (z návrhu 2) – nekonečné pásy profesí na tmavém pásu
   ========================================================================== */
/* dlouhý plynulý přechod: petrolejová záře nahoře nad nadpisem (ohnisko kousek vpravo od jeho začátku) se pomalu
   rozlévá přes celou sekci a doprava dolů tmavne až do nejhlubší petrolejové */
.pas-tmavy--pro-koho {
  overflow: clip;
  background:
    radial-gradient(85% 90% at 50% 100%, rgb(22 127 127 / 0.5) 0%, rgb(22 127 127 / 0.3) 22%, rgb(22 127 127 / 0.12) 48%, transparent 80%),
    linear-gradient(180deg, var(--petrol-950) 0%, var(--petrol-900) 45%, var(--petrol-850) 100%);
}

.pas-tmavy--pro-koho .hlava-sekce { margin-block-end: var(--space-9); }

.pasy {
  display: grid;
  gap: var(--space-2);
  overflow: clip;
  /* okraje pásů se rozplynou do scény */
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.pas {
  display: flex;
  inline-size: max-content;
  border-block: var(--line) solid var(--color-border);
}

.pas + .pas { border-block-start: 0; }

.pas__stopa {
  list-style: none;
  display: flex;
  flex: none;
  align-items: center;
}

.pas__slovo {
  display: flex;
  align-items: center;
  padding-block: var(--space-2);
  font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2.375rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: color var(--doba);
}

/* oddělovač mezi slovy: pomlčka z ikonové sady */
.pas__slovo::after {
  content: '';
  flex: none;
  inline-size: 0.6em;
  block-size: 0.2em;
  margin-inline: 0.45em;
  background: var(--oranz);
  mask: url('/znacka/pomlcka-ikona.svg?v=66fd903d27') center / 100% 100% no-repeat;
}

/* rytmus řezů SUSE: plné a vlasové slovo se střídají, v druhém pásu obráceně */
.pas__slovo:nth-child(odd) { font-weight: 700; color: var(--bila); }
.pas__slovo:nth-child(even) { font-weight: 250; color: var(--color-muted); }
.pas--zpet .pas__slovo:nth-child(odd) { font-weight: 250; color: var(--color-muted); }
.pas--zpet .pas__slovo:nth-child(even) { font-weight: 700; color: var(--bila); }

/* slovo pod kurzorem se přebarví do barev značky */
.pas__slovo:nth-child(odd):hover { color: var(--oranz-svetla); }
.pas__slovo:nth-child(even):hover { color: var(--petrol-300); }

/* pásy profesí jsou světlé na tmavé sekci – krémový podklad, plná slova hluboká petrolejová,
   vlasová značková petrolejová (rytmus plné/vlasové zůstává), linky světle petrolejové */
.pas {
  background: var(--krem);
  border-color: var(--linka);
}
.pas .pas__slovo:nth-child(odd) { color: var(--petrol-800); }
.pas .pas__slovo:nth-child(even) { color: var(--petrol-500); }
.pas--zpet .pas__slovo:nth-child(odd) { color: var(--petrol-500); }
.pas--zpet .pas__slovo:nth-child(even) { color: var(--petrol-800); }
.pas .pas__slovo:hover { color: var(--oranz-tmava); }

/* mobil a tablet: písmo pod 24 px už není „velký text", značková petrolejová má na krémové
   jen 4,45 : 1 – o 2 % tmavší vlasová slova splní 4,5 : 1 (4,63), okem rozdíl nepoznáte */
@media (max-width: 63.99rem) {
  .pas:not(.pas--zpet) .pas__slovo:nth-child(even):not(:hover),
  .pas--zpet .pas__slovo:nth-child(odd):not(:hover) { color: #167c7c; }
}

.neosvedci {
  display: grid;
  gap: var(--space-5);
  margin-block-start: var(--space-9);
}

.neosvedci__nadpis { font-size: var(--h3); }

.neosvedci__seznam {
  list-style: none;
  display: grid;
  gap: var(--space-4);
}

/* „Zatím." jako orámovaná destička nakřivo (z návrhu 3), ve světlé oranžové na tmavém pásu */
.zatim {
  display: inline-block;
  margin-inline-start: var(--space-1);
  padding: 0 var(--space-2);
  border: var(--line-silna) solid currentColor;
  border-radius: var(--radius-sm);
  font-style: normal;
  font-weight: 700;
  color: var(--oranz-svetla);
  rotate: -5deg;
}

@media (min-width: 48rem) {
  .neosvedci__seznam { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
}

/* ==========================================================================
   11. REFERENCE (z návrhu 3) – bublina rozepsané zprávy
   ========================================================================== */
.bublina {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  max-inline-size: 50rem;
  margin: var(--space-4) auto var(--space-5);
  padding: var(--space-8) var(--space-5) var(--space-7);
  text-align: center;
}

/* ocásek bubliny: obrys (::before) a výplň (::after) téhož trojúhelníku */
.bublina::before,
.bublina::after {
  content: '';
  position: absolute;
  inset-inline-start: 18%;
  clip-path: polygon(0 0, 100% 0, 10% 100%);
}

.bublina::before {
  inset-block-end: calc(-1.5rem - var(--line-silna));
  inline-size: 2.875rem;
  block-size: 1.5rem;
  translate: -0.125rem 0;
  background: var(--linka);
}

.bublina::after {
  inset-block-end: -1.125rem;
  inline-size: 2.5rem;
  block-size: calc(1.125rem + 0.0625rem);   /* o pixel přes okraj, ať spoj neprosvítá */
  background: var(--bila);
}

/* „píše…" – tři tečky */
.bublina__pise {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  display: inline-flex;
  gap: 0.375rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--petrol-500);
  box-shadow: 0 0 0 0.375rem var(--krem);
  translate: -50% -50%;
}

.bublina__pise i {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--bila);
}

/* text bubliny v SUSE (display písmo patří jen nadpisům) */
.bublina__text p {
  max-inline-size: 22ch;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.125rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--petrol-800);
  text-wrap: balance;
}

/* ==========================================================================
   12. UKÁZKY (z návrhu 3) – hlavní karta + 2 × 2, náhledy v barvách vzhledů
   Barvy šablon jsou jediné „cizí" barvy webu – patří k náhledům.
   ========================================================================== */
.ukazky {
  list-style: none;
  display: grid;
  gap: var(--space-5);
}

.ukazka-karta {
  /* barvy vzhledu (z config/sablony.php v aplikaci) */
  --u-hlavni: #167f7f;
  --u-akcent: #e87522;
  --u-plocha: #f9f6f2;
  --u-tmava: #0d4949;

  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-4) var(--space-6);
  transition: border-color var(--doba), box-shadow var(--doba);
}

.ukazka-karta:hover { border-color: var(--petrol-500); box-shadow: var(--shadow-raised); }

.ukazka-karta--elegantni { --u-hlavni: #780466; --u-akcent: #deb140; --u-plocha: #fbf5f1; --u-tmava: #4d0241; }
.ukazka-karta--formalni { --u-hlavni: #233587; --u-akcent: #ffcc00; --u-plocha: #f5f6fa; --u-tmava: #16215a; }
.ukazka-karta--hranaty { --u-hlavni: #000000; --u-akcent: #00ffea; --u-plocha: #ffffff; --u-tmava: #000000; }
.ukazka-karta--kresleny { --u-hlavni: #edd500; --u-akcent: #3a3a2e; --u-plocha: #fffbe6; --u-tmava: #3a3a2e; }

.ukazka-karta__popisky {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding-inline: var(--space-2);
}

.ukazka-karta__vzhled {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* dvojtečka barev vzhledu před názvem */
.ukazka-karta__vzhled::before {
  content: '';
  inline-size: 1.75rem;
  block-size: 0.875rem;
  flex: none;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--u-hlavni) 50%, var(--u-akcent) 50%);
  box-shadow: 0 0 0 0.0625rem rgb(23 59 59 / 0.15);
}

.ukazka-karta__obor { font-size: var(--h3); }
.ukazka-karta__typ { color: var(--color-muted); }
.ukazka-karta__popis { max-inline-size: 30rem; }
.ukazka-karta__odkaz { margin-block-start: var(--space-3); }

/* karty jsou klikací celé přes odkaz (čtečkám zůstává odkazem jen text) */
.odkaz-sipka.ukazka-karta__odkaz::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}

/* --- náhled nabídky z CSS tvarů ----------------------------------------
   Společná kostra (záhlaví, titulek, řádky, tři varianty, spodní lišta),
   každý vzhled si ji přetvaruje po svém. */
.nahled {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  background: var(--u-plocha);
  box-shadow: inset 0 0 0 0.0625rem rgb(23 59 59 / 0.08);
  overflow: hidden;
}

.nahled i { display: block; position: absolute; }

.nahled__hlava { inset: 0 0 auto; block-size: 24%; background: var(--u-hlavni); }

.nahled__titulek {
  inset-block-start: 32%;
  inset-inline-start: 8%;
  inline-size: 46%;
  block-size: 6%;
  border-radius: var(--radius-pill);
  background: rgb(23 23 23 / 0.75);
}

/* akcentová čárka pod titulkem */
.nahled__titulek::after {
  content: '';
  position: absolute;
  inset-block-start: 170%;
  inset-inline-start: 0;
  inline-size: 22%;
  block-size: 70%;
  border-radius: var(--radius-pill);
  background: var(--u-akcent);
}

.nahled__text {
  inset-block-start: 33%;
  inset-inline-end: 8%;
  inline-size: 28%;
  block-size: 3%;
  border-radius: var(--radius-pill);
  background: rgb(23 23 23 / 0.16);
  box-shadow: 0 0.5rem 0 rgb(23 23 23 / 0.16), 0 1rem 0 rgb(23 23 23 / 0.1);
}

.nahled__karty {
  position: absolute;
  inset: 54% 8% -8%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5%;
  align-items: stretch;
}

.nahled__karty i { position: relative; }

.nahled__karta {
  border-radius: 0.375rem;
  background:
    linear-gradient(var(--u-hlavni) 0 0) top / 100% 30% no-repeat,
    linear-gradient(rgb(23 23 23 / 0.14) 0 0) 50% 48% / 60% 0.25rem no-repeat,
    linear-gradient(rgb(23 23 23 / 0.14) 0 0) 50% 62% / 44% 0.25rem no-repeat,
    #fff;
  box-shadow: 0 0.375rem 0.75rem -0.375rem rgb(23 23 23 / 0.35);
  transition: transform 0.5s var(--ease-pruzna);
}

.nahled__karta--vybrana {
  outline: 0.1875rem solid var(--u-akcent);
  transform: translateY(-0.5rem);
}

.nahled__pruh {
  inset: auto 0 0;
  block-size: 13%;
  background: var(--u-tmava);
}

/* tlačítko v liště */
.nahled__pruh::after {
  content: '';
  position: absolute;
  inset-block: 25%;
  inset-inline-end: 6%;
  inline-size: 22%;
  border-radius: 0.25rem;
  background: var(--u-akcent);
}

.ukazka-karta:hover .nahled__karta { transform: translateY(-0.25rem); }
.ukazka-karta:hover .nahled__karta--vybrana { transform: translateY(-1rem); }

/* Cenotvoří: oblouky v záhlaví jako v aplikaci */
.ukazka-karta--cenotvori .nahled__hlava {
  background:
    radial-gradient(circle at 92% 160%, rgb(255 255 255 / 0.16) 0 38%, transparent 38.5%),
    radial-gradient(circle at 78% 190%, rgb(255 255 255 / 0.1) 0 46%, transparent 46.5%),
    var(--u-hlavni);
}

/* Elegantní (z návrhu 6): bez zaoblení (v aplikaci radius 0), tenké zlaté linky,
   dvojitá linka pod záhlavím, titulek na střed s ornamentem (linka – kosočtverec – linka) */
.ukazka-karta--elegantni .nahled { border-radius: 0; }

.ukazka-karta--elegantni .nahled__hlava {
  block-size: 14%;
  box-shadow: 0 0.1875rem 0 -0.0625rem var(--u-plocha), 0 0.25rem 0 -0.0625rem var(--u-akcent), 0 0.4375rem 0 -0.125rem var(--u-plocha), 0 0.5rem 0 -0.125rem var(--u-akcent);
}

.ukazka-karta--elegantni .nahled__titulek {
  inset-block-start: 26%;
  inset-inline-start: 30%;
  inline-size: 40%;
  block-size: 3.5%;
  border-radius: 0;
  background: var(--u-hlavni);
}

/* ornament: dvě zlaté vlasové linky a kosočtverec uprostřed */
.ukazka-karta--elegantni .nahled__titulek::after {
  inset-block-start: 300%;
  inset-inline-start: 10%;
  inline-size: 80%;
  block-size: 0.0625rem;
  border-radius: 0;
  background:
    linear-gradient(90deg, var(--u-akcent) 0 44%, transparent 44% 56%, var(--u-akcent) 56%);
}

.ukazka-karta--elegantni .nahled__text {
  inset-block-start: calc(26% + 1.375rem);
  inset-inline: calc(50% - 0.25rem) auto;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 0;
  background: var(--u-akcent);
  box-shadow: none;
  rotate: 45deg;
}

.ukazka-karta--elegantni .nahled__karty { inset-block-start: 50%; gap: 4%; }

.ukazka-karta--elegantni .nahled__karta {
  border-radius: 0;
  background:
    linear-gradient(var(--u-akcent) 0 0) 50% 22% / 30% 0.0625rem no-repeat,
    linear-gradient(rgb(23 23 23 / 0.16) 0 0) 50% 40% / 56% 0.1875rem no-repeat,
    linear-gradient(rgb(23 23 23 / 0.12) 0 0) 50% 52% / 40% 0.1875rem no-repeat,
    #fff;
  box-shadow: inset 0 0 0 0.0625rem color-mix(in oklab, var(--u-akcent) 70%, transparent);
}

/* vybraná varianta: dvojitý tenký rámeček (zlatý uvnitř, švestkový venku) */
.ukazka-karta--elegantni .nahled__karta--vybrana {
  outline: 0.0625rem solid var(--u-hlavni);
  outline-offset: 0.1875rem;
  box-shadow: inset 0 0 0 0.0625rem var(--u-akcent);
}

.ukazka-karta--elegantni .nahled__pruh { block-size: 11%; }
.ukazka-karta--elegantni .nahled__pruh::after { border-radius: 0; inset-block: 30%; background: transparent; box-shadow: inset 0 0 0 0.0625rem var(--u-akcent); }

/* Formální: ostré rohy, záhlaví nahoře se žlutou linkou, linkované varianty,
   žlutá linka nad vybranou variantou */
.ukazka-karta--formalni .nahled { border-radius: 0.125rem; }

.ukazka-karta--formalni .nahled__hlava {
  block-size: 20%;
  background: linear-gradient(var(--u-akcent) 0 0) bottom / 100% 0.25rem no-repeat, var(--u-hlavni);
}

.ukazka-karta--formalni .nahled__titulek { inset-block-start: 29%; border-radius: 0.125rem; background: var(--u-hlavni); }
.ukazka-karta--formalni .nahled__titulek::after { border-radius: 0; }
.ukazka-karta--formalni .nahled__text { inset-block-start: 30%; }
.ukazka-karta--formalni .nahled__karty { gap: 3%; }

.ukazka-karta--formalni .nahled__karta {
  border-radius: 0.125rem;
  background:
    linear-gradient(var(--u-hlavni) 0 0) top / 100% 22% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 0.75rem, rgb(23 23 23 / 0.08) 0.75rem 0.8125rem),
    #fff;
}

.ukazka-karta--formalni .nahled__karta--vybrana { outline: 0; box-shadow: inset 0 0.3125rem 0 var(--u-akcent), 0 0.375rem 0.75rem -0.375rem rgb(23 23 23 / 0.35); }

/* Hranatý: nula rádiusů, silné černé obrysy, tyrkysový posunutý stín */
.ukazka-karta--hranaty .nahled { border-radius: 0; box-shadow: inset 0 0 0 0.1875rem #000; }
.ukazka-karta--hranaty .nahled__hlava { block-size: 20%; background: linear-gradient(var(--u-akcent) 0 0) 8% 50% / 14% 40% no-repeat, #000; }
.ukazka-karta--hranaty .nahled__titulek { border-radius: 0; background: #000; block-size: 8%; }
.ukazka-karta--hranaty .nahled__titulek::after { border-radius: 0; background: #000; inset-block-start: 160%; inline-size: 60%; block-size: 40%; }
.ukazka-karta--hranaty .nahled__text { border-radius: 0; }

.ukazka-karta--hranaty .nahled__karta {
  border-radius: 0;
  background:
    linear-gradient(#000 0 0) top / 100% 26% no-repeat,
    linear-gradient(rgb(0 0 0 / 0.2) 0 0) 50% 50% / 60% 0.25rem no-repeat,
    #fff;
  box-shadow: inset 0 0 0 0.1875rem #000, 0.3125rem 0.3125rem 0 #000;
}

.ukazka-karta--hranaty .nahled__karta--vybrana { outline: 0; box-shadow: inset 0 0 0 0.1875rem #000, 0.3125rem 0.3125rem 0 var(--u-akcent); }
.ukazka-karta--hranaty .nahled__pruh::after { border-radius: 0; }

/* Kreslený: žluté záhlaví s vlnkou, „ručně" kreslené obrysy */
.ukazka-karta--kresleny .nahled__hlava {
  block-size: 26%;
  background: var(--u-hlavni);
  mask: radial-gradient(0.6rem 0.5rem at 50% 100%, transparent 98%, #000) 0 0 / 1.2rem 100%;
}

.ukazka-karta--kresleny .nahled__titulek { background: var(--u-tmava); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; }
.ukazka-karta--kresleny .nahled__titulek::after { background: var(--u-hlavni); box-shadow: 0 0 0 0.0625rem var(--u-tmava); }

.ukazka-karta--kresleny .nahled__karta {
  border: var(--line-silna) solid var(--u-tmava);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  background:
    linear-gradient(var(--u-hlavni) 0 0) top / 100% 28% no-repeat,
    linear-gradient(rgb(23 23 23 / 0.2) 0 0) 50% 52% / 56% 0.25rem no-repeat,
    #fff;
  box-shadow: none;
}

.ukazka-karta--kresleny .nahled__karta--vybrana { outline: 0; box-shadow: 0 0 0 0.25rem var(--u-hlavni); }
.ukazka-karta--kresleny .nahled__pruh { background: var(--u-tmava); }
.ukazka-karta--kresleny .nahled__pruh::after { background: var(--u-hlavni); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; }

/* hlavní karta: větší název (SUSE), náhled na celou výšku */
.ukazka-karta--hlavni .ukazka-karta__obor {
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.625rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

@media (min-width: 48rem) {
  .ukazky { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ukazka-karta--hlavni {
    grid-column: 1 / -1;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-5);
  }
}

@media (min-width: 80rem) {
  .ukazky { grid-template-columns: 1.3fr 1fr 1fr; }
  .ukazka-karta--hlavni {
    grid-column: 1;
    grid-row: 1 / span 2;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    align-content: start;
    align-items: start;
  }
  .ukazka-karta--hlavni .nahled { aspect-ratio: auto; block-size: 100%; min-block-size: 16rem; }
}

#ukazky .tip { margin-inline: auto; }

/* ==========================================================================
   13. CENÍK – struktura z návrhu 1, barvy karet z návrhu 3
   ========================================================================== */
.cenik {
  display: grid;
  justify-items: center;
  gap: var(--space-7);
}

/* přepínač období: obě volby stejně široké, tmavá „pilulka" (::before)
   pod zvolenou volbou plynule přejede do boku */
.prepinac-obdobi {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--bila);
  outline: var(--line-silna) solid var(--linka);
  outline-offset: calc(var(--line-silna) * -1);
  box-shadow: var(--shadow-card);
}

.prepinac-obdobi::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset-block: var(--space-1);
  inset-inline-start: var(--space-1);
  inline-size: calc((100% - 3 * var(--space-1)) / 2);
  border-radius: var(--radius-pill);
  background: var(--petrol-500);
  transition: translate 0.4s var(--ease-out);
}

.prepinac-obdobi:has(.prepinac-obdobi__volba:last-of-type input:checked)::before {
  translate: calc(100% + var(--space-1)) 0;
}

@media (prefers-reduced-motion: reduce) {
  .prepinac-obdobi::before { transition: none; }
}

.prepinac-obdobi__volba { position: relative; }

.prepinac-obdobi__volba input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.prepinac-obdobi__volba span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-weight: 700;
  color: var(--petrol-800);
  white-space: nowrap;
  transition: background-color var(--doba), color var(--doba);
}

.prepinac-obdobi__volba input:checked + span { color: var(--bila); }

/* prohlížeče bez :has() – bez pilulky, zvolená volba se jen podbarví */
@supports not selector(:has(*)) {
  .prepinac-obdobi::before { display: none; }
  .prepinac-obdobi__volba input:checked + span { background: var(--petrol-500); }
}
.prepinac-obdobi__volba input:focus-visible + span { outline: 0.1875rem solid var(--color-focus); outline-offset: 0.125rem; }
.prepinac-obdobi .stitek--sleva { margin: 0; }

/* mobil a tablet: přepínač období blíž k nadpisu i ke kartám */
@media (max-width: 63.99rem) {
  #cenik .hlava-sekce { margin-block-end: var(--space-6); }
  #cenik .tarify { padding-block-start: var(--space-7); }
}

.tarify {
  list-style: none;
  display: grid;
  gap: var(--space-10) var(--space-6);
  inline-size: 100%;
  max-inline-size: 23rem;
  padding-block-start: var(--space-9);
}

.tarif {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--bila);
  /* linka je skutečný okraj (ne obrys dovnitř) – pásy hlavy, ceny a výzvy
     tak vždy leží uvnitř ní a nepřečnívají */
  border: var(--line-silna) solid var(--linka);
  text-align: center;
  transition: border-color var(--doba);
}

/* tarif je volitelný – při najetí oranžová linka */
.tarif:hover { border-color: var(--oranz); }

.tarif__obrazek {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: var(--space-3);
  z-index: 1;
  inline-size: 6.5rem;
  translate: 0 -72%;
  filter: drop-shadow(0 0.5rem 0.75rem rgb(23 59 59 / 0.2));
  transition: translate 0.5s var(--ease-out);
}

.tarif__obrazek--mini { inline-size: 5rem; translate: 0 -60%; }
.tarif:hover .tarif__obrazek { translate: 0 -80%; }
.tarif:hover .tarif__obrazek--mini { translate: 0 -68%; }

/* chameleon i krokodýl sedí níž a pod myší povyskočí jen kousek */
.tarif__obrazek--celo { translate: 0 -58%; }
.tarif:hover .tarif__obrazek--celo { translate: 0 -62%; }
.tarif__obrazek--ultra { translate: 0 -65%; }
.tarif:hover .tarif__obrazek--ultra { translate: 0 -69%; }

/* při skoku přímo na kartu tarifu zůstane vidět i zvíře, které nad ní vykukuje */
.tarif { scroll-margin-block-start: 6rem; }

.tarif__hlava {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-5) var(--space-4);
  border-radius: calc(var(--radius-lg) - var(--line-silna)) calc(var(--radius-lg) - var(--line-silna)) 0 0;
  background: radial-gradient(90% 190% at 50% 200%, var(--petrol-500) 0%, var(--petrol-800) 100%);
  color: var(--bila);
}

.tarif__nazev {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.125rem;
  line-height: 1.1;
  color: inherit;
}

.tarif__perex { color: rgb(255 255 255 / 0.85); }

.tarif__seznam {
  list-style: none;
  flex: 1;
  padding: var(--space-3) var(--space-5);
}

.tarif__seznam li { padding-block: var(--space-2); }
.tarif__seznam li + li { border-top: var(--line-silna) solid var(--petrol-100); }
.tarif__seznam strong { color: var(--petrol-800); }

.tarif__cena {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--petrol-700);
  color: var(--bila);
}

.tarif__castka { font-family: var(--font-display); font-size: 2.125rem; line-height: 1; }
.tarif__obdobi { font-weight: 600; }
.tarif__obdobi s { margin-inline-start: var(--space-1); opacity: 0.85; font-weight: 400; }

/* přepínač období – čistě CSS přes :has */
.tarif__cena--rok { display: none; }
.cenik:has(input[value='rok']:checked) .tarif__cena--rok { display: flex; }
.cenik:has(input[value='rok']:checked) .tarif__cena--mesic { display: none; }

/* výzva je celá spodní část karty: oranžový pruh přes celou šířku uvnitř
   okraje karty (rohy o tloušťku linky menší) */
.tarif__tlacitko {
  margin: auto 0 0;
  min-block-size: 4.5rem;
  border-radius: 0 0 calc(var(--radius-lg) - var(--line-silna)) calc(var(--radius-lg) - var(--line-silna));
  font-size: var(--text-lg);
}

/* doporučený tarif: linka jako ostatní (oranžová až při najetí) a záře po obvodu
   jako doporučená karta v aplikaci (sablony/cenotvori.css): od každé hrany jeden
   přechod se zrychleně ubývajícím spádem. Leží v pozadí karty, takže barevné pásy
   (hlava, cena, výzva) ji zakryjí a ukáže se jen na světlém seznamu. */
.tarif--doporuceny {
  --sirka-zare: 2rem;
  --spad-zare:
    color-mix(in oklab, var(--oranz) 48%, transparent) 0,
    color-mix(in oklab, var(--oranz) 37%, transparent) calc(var(--sirka-zare) * 0.14),
    color-mix(in oklab, var(--oranz) 26%, transparent) calc(var(--sirka-zare) * 0.3),
    color-mix(in oklab, var(--oranz) 15%, transparent) calc(var(--sirka-zare) * 0.5),
    color-mix(in oklab, var(--oranz) 6%, transparent) calc(var(--sirka-zare) * 0.73),
    transparent var(--sirka-zare);
  background-image:
    linear-gradient(90deg, var(--spad-zare)),
    linear-gradient(270deg, var(--spad-zare)),
    linear-gradient(180deg, var(--spad-zare)),
    linear-gradient(0deg, var(--spad-zare));
}


/* „Skvělý parťák": stejný tvar pomlčky jako štítky tarifu u funkcí, jen zrcadlený –
   stojí rovnou spodní hranou na horní hraně karty (/img/pomlcka-stitek-nad.svg?v=eb2f13006e) */
.tarif__samolepka {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--space-5);
  translate: 0 -100%;
  padding: var(--space-4) var(--space-5) var(--space-2) var(--space-4);   /* text níž – horní hrana se zužuje */
  background: var(--oranz);
  color: var(--petrol-950);   /* nejtmavší petrolejová na oranžové (5,1 : 1), černou v paletě nemáme */
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  -webkit-mask: url('/img/pomlcka-stitek-nad.svg?v=eb2f13006e') center / 100% 100% no-repeat;
  mask: url('/img/pomlcka-stitek-nad.svg?v=eb2f13006e') center / 100% 100% no-repeat;
}

.cenik__poznamky {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  text-align: center;
  color: var(--color-muted);
}

.cenik__poznamky p:first-child {
  font-weight: 650;
  color: var(--petrol-800);
}

/* ikona vedle textu (ne v řádku – tam ji Chrome kreslil dole uříznutou);
   při zalomení na mobilu zůstane vlevo nahoře */
.cenik__info {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-2);
}

/* celé pixely a bez ořezu: při 1,5em (25,5 px) padala spodní a pravá hrana ikony
   na půl pixelu a SVG ji usekl */
.cenik__info .ikona {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  overflow: visible;
  margin-block-start: 0.1em;
  color: var(--petrol-500);
}

/* íčko v boxíku o betě (okno objednávky): stejně velké jako řádek textu (1,5 rem),
   takže sedí na střed prvního řádku */
.dialog__beta .ikona {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin: 0;
  overflow: visible;
}

/* mobil a tablet: text se láme na víc řádků – ikona nad ním, na středu, ať nevychyluje osu */
@media (max-width: 63.99rem) {
  .cenik__info { flex-direction: column; align-items: center; }
}

@media (min-width: 64rem) {
  .tarify {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-inline-size: 74rem;
    align-items: stretch;
  }
}

/* ==========================================================================
   14. ČASTÉ OTÁZKY (tvary z návrhu 3) – karty <details>, dva sloupce
   ========================================================================== */
.otazky {
  display: grid;
  gap: var(--space-3) var(--space-5);
  align-items: start;
}

.otazky__sloupec {
  display: grid;
  gap: var(--space-3);
}

.otazka { transition: border-color var(--doba), box-shadow var(--doba); }
.otazka:hover { border-color: var(--petrol-500); }
.otazka[open] { border-color: var(--petrol-500); box-shadow: var(--shadow-card); }

.otazka__otazka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.4;
  color: var(--petrol-800);
  list-style: none;
  cursor: pointer;
}

.otazka__otazka::-webkit-details-marker { display: none; }

/* šipka v kolečku (stejný odznak jako u funkcí): dolů = zavřeno, nahoru = otevřeno */
.otazka__sipka {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: var(--petrol-100);
  color: var(--petrol-800);
  transition: background-color var(--doba), color var(--doba);
}

/* šipka je geometricky na středu, ale „V" působí výš (váha je v ramenech) –
   opticky ji posuneme o pixel dolů, otevřenou o pixel nahoru */
.otazka__sipka .ikona {
  inline-size: 0.75rem;
  block-size: 0.875rem;
  translate: 0 0.0625rem;
  rotate: 90deg;
  transition: rotate 0.45s var(--ease-out), translate 0.45s var(--ease-out);
}

.otazka__otazka:hover .otazka__sipka { background: var(--petrol-500); color: var(--bila); }
.otazka[open] .otazka__sipka { background: var(--petrol-800); color: var(--bila); }
.otazka[open] .otazka__sipka .ikona { rotate: -90deg; translate: 0 -0.0625rem; }

.otazka::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.4s var(--ease-out), content-visibility 0.4s allow-discrete;
}

.otazka[open]::details-content { block-size: auto; }

/* Se skriptem se výška animuje přes Web Animations (plynule ve všech prohlížečích,
   viz script.js) – CSS přechod obsahu se vypne, ať se neperou. Během zavírání
   (.je-zavira) se šipka a barvy vrací hned, ne až po dojetí. */
.js-details .otazka::details-content { transition: none; }
details.je-animace { overflow: hidden; }
.otazka.je-zavira .otazka__sipka .ikona { rotate: 90deg; translate: 0 0.0625rem; }

.otazka__odpoved {
  padding: 0 var(--space-5) var(--space-5);
  max-inline-size: var(--mira);
  color: var(--color-muted);
}

/* mobil a tablet: odpověď přes celou šířku karty (míra 70 % okna by ji zbytečně zúžila) */
@media (max-width: 63.99rem) {
  .otazka__odpoved { max-inline-size: none; }
}

@media (min-width: 48rem) {
  .otazky { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* pravý sloupec začíná níž, aby oba končily na stejné spodní linii (nad ním má
     místo oko); přesné odsazení dopočítá script.js, tohle je výchozí odhad bez JS */
  .otazky__sloupec:last-child { margin-block-start: var(--odsazeni-sloupce, calc(4.75rem + var(--space-3))); }
}

/* otázky na tmavém pásu: průsvitné karty jako .karta--tma, světlá petrolejová
   pod myší, otevřená otázka má šipku ve světlé oranžové */
/* výrazný přechod: v pravém horním rohu přesně barva oka (#045b5b – převládající
   petrolejová obrázku), doleva dolů tmavne až k nejhlubší petrolejové */
.pas-tmavy--otazky {
  overflow: clip;
  /* mobil: pevná velikost kolem oka, ve vysoké sekci by procenta táhla pruh dolů */
  background: radial-gradient(26rem 30rem at 100% 0%, #045b5b 0%, #045b5b 20%, var(--petrol-900) 100%);
}

.pas-tmavy--otazky .kontejner { position: relative; z-index: 1; }

.otazky__oko {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 10rem;
  translate: 18% -18%;
  pointer-events: none;
}

@media (min-width: 64rem) {
  /* oko nad pravým sloupcem (ten začíná o otázku níž), střed přechodu přesně pod okem:
     střed oka = 4 rem od pravého okraje + půl šířky, 3 rem shora + půl výšky */
  .otazky__oko { inline-size: 21rem; inset-block-start: 3rem; inset-inline-end: 4rem; translate: none; }
  .pas-tmavy--otazky {
    background: radial-gradient(60rem 48rem at calc(100% - 14.5rem) 13.5rem, #045b5b 0%, #045b5b 26%, var(--petrol-900) 100%);
  }
}

.pas-tmavy .otazka { background: rgb(255 255 255 / 0.05); }
.pas-tmavy .otazka:hover { border-color: var(--petrol-300); }
.pas-tmavy .otazka[open] { border-color: var(--petrol-300); background: rgb(255 255 255 / 0.08); box-shadow: none; }
.pas-tmavy .otazka__otazka { color: var(--bila); }
.pas-tmavy .otazka__sipka { background: rgb(255 255 255 / 0.12); color: var(--bila); }
.pas-tmavy .otazka__otazka:hover .otazka__sipka { background: var(--petrol-300); color: var(--petrol-900); }
.pas-tmavy .otazka[open] .otazka__sipka { background: var(--oranz-svetla); color: var(--petrol-900); }
.pas-tmavy .otazka.je-zavira { border-color: var(--color-border); background: rgb(255 255 255 / 0.05); }
.pas-tmavy .otazka.je-zavira .otazka__sipka { background: rgb(255 255 255 / 0.12); color: var(--bila); }

/* ==========================================================================
   15. ZÁVĚREČNÉ CTA – přímo na papíře, bez panelu; chameleon vedle textu,
   svisle na střed
   ========================================================================== */
.sekce--cta { padding-block: var(--space-sekce); }

.cta {
  display: grid;
  gap: var(--space-7);
}

.cta__text {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
}

.cta__nadpis {
  max-inline-size: 15ch;
  font-size: clamp(2.25rem, 1.3rem + 3.8vw, 4.75rem);
  line-height: var(--lh-display);
}

/* zvýrazněná část nadpisu ve značkové petrolejové (jako „přizpůsobí" v úvodu) */
.cta__zvyrazneni { color: var(--petrol-500); }

.cta__perex {
  font-size: var(--text-xl);
  color: var(--color-muted);
}

.cta__text .tlacitko { margin-block-start: var(--space-2); }

.cta__obrazek {
  justify-self: center;
  inline-size: min(70%, 17rem);
}

/* mobil a tablet: ilustrace hned pod nadpisem (jako Chameloun v úvodu), pak perex a tlačítko */
@media (max-width: 63.99rem) {
  .cta { gap: 0; }
  .cta__text { display: contents; }
  .cta__nadpis { order: 1; margin-block-end: var(--space-6); }
  .cta__obrazek { order: 2; margin-block-end: var(--space-6); }
  .cta__perex { order: 3; }
  .cta__text .tlacitko { order: 4; margin-block-start: var(--space-5); justify-self: start; }
}

/* tablet: závěrečná výzva celá na střed (jako úvod) */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .cta { justify-items: center; text-align: center; }
  .cta__nadpis { margin-inline: auto; }
  .cta__text .tlacitko { justify-self: center; }
}

/* stín na zemi pod chameleonovýma nohama (stojí v pravé části obrázku),
   rozmazaná elipsa za obrázkem – ať nevisí ve vzduchu */
.cta__obrazek {
  position: relative;
  isolation: isolate;
}

.cta__obrazek::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset-block-end: 0;
  inset-inline-start: 40%;
  inline-size: 86%;
  aspect-ratio: 6 / 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 48 47 / 0.38), rgb(0 48 47 / 0.14) 60%, transparent);
}

@media (min-width: 64rem) {
  /* text a obrázek těsně vedle sebe, dvojice jako celek na středu stránky */
  .cta {
    grid-template-columns: minmax(0, 43rem) minmax(0, 26rem);
    justify-content: center;
    align-items: center;
    column-gap: var(--space-8);
  }

  .cta__obrazek { inline-size: 100%; }
}

/* zrcadlová varianta: ilustrace i se stínem otočená, na desktopu vlevo a text vpravo */
/* jednosloupcové uspořádání (mobil, tablet): původní směr – koňská hlava vlevo */
@media (min-width: 64rem) {
  .cta--zrcadlo .cta__obrazek { scale: -1 1; }
}

@media (min-width: 64rem) {
  /* záměrná výjimka z 85 % šířky webu: koridor 90 %, ilustrace u levého
     mezi ilustrací a textem pevná mezera 8 rem, dvojice na středu */
  .sekce--cta .kontejner { inline-size: min(90%, 96rem); }
  .cta--zrcadlo {
    /* první sloupec o 4 rem širší než ilustrace, ilustrace v něm vpravo –
       stín (po otočení vybíhá doleva) tak zůstane celý na obrazovce */
    grid-template-columns: minmax(0, 30rem) fit-content(43rem);
    column-gap: var(--space-10);
    justify-content: center;
  }
  .cta--zrcadlo .cta__obrazek { order: -1; justify-self: end; inline-size: min(100%, 26rem); }
}

/* ==========================================================================
   16. PATIČKA (z návrhu 2) – claim v SUSE, kontakt, mapa webu, zákonné údaje
   ========================================================================== */
.paticka {
  padding-block: var(--space-9) var(--space-6);
  border-start-start-radius: var(--radius-pas);
  border-start-end-radius: var(--radius-pas);
  background: var(--petrol-950);
  color: var(--color-muted);
}

.paticka a { color: var(--bila); text-decoration: none; }
.paticka a:hover { color: var(--oranz-svetla); }

.paticka__horni {
  display: grid;
  gap: var(--space-7);
  padding-block-end: var(--space-8);
}

.paticka__claim {
  max-inline-size: 18ch;
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.375rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--bila);
  text-wrap: balance;
}

/* mobil a tablet: heslo větší (původní velikost), na desktopu menší vedle kontaktu */
@media (max-width: 63.99rem) {
  .paticka__claim { font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem); }
}

.paticka__nadpis {
  margin-block-end: var(--space-3);
  font-family: var(--font-text);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--petrol-300);
}

.paticka__text { margin-block-end: var(--space-3); }

.paticka__email {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.875rem);
  font-weight: 650;
  overflow-wrap: anywhere;
}

/* malá písmena adresy mají těžiště níž než střed řádku – ikona o kousek dolů */
.paticka__email .ikona { color: var(--oranz-svetla); translate: 0 0.1em; }

.paticka__stred {
  display: grid;
  gap: var(--space-7);
  padding-block: var(--space-7);
  border-block-start: var(--line) solid rgb(255 255 255 / 0.14);
}

.paticka__logo { justify-self: start; }
.paticka__logo img { inline-size: auto; block-size: 2.5rem; }

.paticka__sloupce {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--space-6);
}

.paticka__sloupec ul { list-style: none; display: grid; gap: var(--space-2); }

/* sloupec „O webu" (provozovatel, tiráž, cookies) jen na mobilu – na širších
   obrazovkách jsou ty odkazy ve spodním pásu vedle autora */
.paticka__sloupec--o-webu { display: none; }
.paticka__sloupec--o-webu .paticka__vysunout { display: inline; color: var(--bila); line-height: inherit; text-align: start; }
.paticka__sloupec--o-webu .paticka__sipky { display: none; }   /* na mobilu bez šipek – jako ostatní odkazy */
.paticka__sloupec--o-webu .paticka__vysunout:hover { color: var(--oranz-svetla); }
.paticka__nezalomit { white-space: nowrap; }

@media (max-width: 47.99rem) {
  .paticka__sloupec--o-webu { display: block; }
  .paticka__spodek .paticka__vysouvace { display: none; }
}

.paticka__odkaz-tlacitko {
  padding: 0;
  border: 0;
  background: none;
  color: var(--bila);
  text-align: start;
  cursor: pointer;
}

.paticka__odkaz-tlacitko:hover { color: var(--oranz-svetla); }

.paticka__spodek {
  display: grid;
  gap: var(--space-4);
  padding-block-start: var(--space-6);
  border-top: var(--line) solid rgb(255 255 255 / 0.14);
  font-size: var(--text-sm);
}

/* odkazy „Provozovatel" a „Nastavení cookies" – každý otevře okénko, které
   vyjede od spodní hrany okna */
.paticka__vysouvace {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  justify-self: start;
  align-self: end;
}

.paticka__vysunout {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-muted);
  font: inherit;
  cursor: pointer;
}

.paticka__vysunout:hover { color: var(--oranz-svetla); }
/* šipka nahoru; pod myší pod ní zespodu vyjede druhá – dvojitá šipka */
.paticka__sipky {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: 0.625rem;
  block-size: 0.625rem;
}

.paticka__vysunout-sipka {
  grid-area: 1 / 1;
  inline-size: 0.5rem;
  block-size: 0.625rem;
  rotate: -90deg;
  transition: translate var(--doba) var(--ease-out), opacity var(--doba);
}

.paticka__vysunout-sipka + .paticka__vysunout-sipka { opacity: 0; translate: 0 0.5rem; }
.paticka__vysunout:hover .paticka__vysunout-sipka:first-child,
.paticka__vysunout:focus-visible .paticka__vysunout-sipka:first-child { translate: 0 -0.1875rem; }
.paticka__vysunout:hover .paticka__vysunout-sipka + .paticka__vysunout-sipka,
.paticka__vysunout:focus-visible .paticka__vysunout-sipka + .paticka__vysunout-sipka { opacity: 1; translate: 0 0.1875rem; }

/* okénko nad stránkou: vyjede od spodní hrany okna nad odkazem; zavřené je
   pod hranou okna a stránku neprodlužuje (fixed se do délky stránky nepočítá) */
.paticka-okno {
  position: fixed;
  z-index: 85;
  inset-block-end: 0;
  inset-inline-start: calc((100% - var(--kontejner)) / 2 - var(--space-5));
  /* stejné bílé okénko jako Nastavení cookies (hlavička a křížek z dialogu) */
  inline-size: min(30rem, 100% - 2 * var(--space-4));
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 -0.75rem 2rem rgb(0 20 20 / 0.3), inset 0 0 0 var(--line) var(--linka);
  translate: 0 100%;
  visibility: hidden;
  transition: translate 0.45s var(--ease-out), visibility 0s 0.45s;
}

.paticka-okno.je-otevrene {
  translate: none;
  visibility: visible;
  transition: translate 0.45s var(--ease-out), visibility 0s;
}

.paticka-okno:focus { outline: none; }

.paticka-okno__udaje { display: grid; gap: var(--space-4); margin: 0; }
.paticka-okno__udaje dt { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oranz-tmava); }
.paticka-okno__udaje dd { margin: 0; line-height: 1.5; }
/* jméno vlevo, web vpravo u okraje okna; na mobilu web pod jménem */
.paticka-okno__vedle { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: var(--space-3); }

@media (max-width: 39.99rem) {
  .paticka-okno__vedle { flex-direction: column; align-items: flex-start; }
}
.paticka-okno__udaje a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--petrol-700); text-underline-offset: 0.2em; }
.paticka-okno__udaje a .ikona { inline-size: 0.85em; block-size: 0.85em; }
.paticka-okno__udaje a:hover { color: var(--oranz-tmava); }

/* odkaz v okně Nastavení cookies stejně jako ostatní odkazy webu (společné styly okna ho dědí v barvě textu) */
.dialog__text a { color: var(--color-primary-dark); text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; font-weight: 600; }
.dialog__text a:hover { color: var(--color-accent-hover); }
.paticka-okno__doplnit { color: var(--color-muted); font-style: italic; }


@media (prefers-reduced-motion: reduce) {
  .paticka-okno,
  .paticka-okno.je-otevrene { transition: none; }
}

/* Nastavení cookies (dialog ze společných částí) se tu chová stejně jako okénko
   s provozovatelem: vyjede od spodní hrany okna vlevo, stránku nezatemní;
   kliknutí mimo ho zavře (zaklad.js). Platí i pro „Nastavím si to" z cookie lišty. */
.dialog[data-cookie-dialog] {
  inset: auto auto 0 calc((100% - var(--kontejner)) / 2 - var(--space-5));
  inline-size: min(30rem, 100% - 2 * var(--space-4));
  max-block-size: calc(100dvh - var(--space-6));
  margin: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -0.75rem 2rem rgb(0 20 20 / 0.3), inset 0 0 0 var(--line) var(--linka);
  opacity: 1;
  translate: 0 100%;
  animation: none;
  transition: translate 0.45s var(--ease-out), display 0.45s allow-discrete, overlay 0.45s allow-discrete;
}

.dialog[data-cookie-dialog][open] { translate: none; }

@starting-style {
  .dialog[data-cookie-dialog][open] { translate: 0 100%; }
}

.dialog:focus { outline: none; }
.dialog[data-cookie-dialog]::backdrop { background: transparent; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .dialog[data-cookie-dialog] { transition: none; }
}

/* autor webu: dvouřádkový text a vedle logo, odkazem je jen logo */
.paticka__autor {
  display: inline-flex;
  align-items: flex-end;   /* text i logo sedí na spodní hraně */
  gap: 1.25rem;
  justify-self: start;
  color: var(--color-muted);
  line-height: 1.3;
  text-align: end;
}

/* účaří spodního řádku na spodní hraně loga (bez místa pro dolní dotahy) */
.paticka__autor-text { margin-block-end: -0.3em; }

/* mobil a tablet: text u Pakoně zarovnaný doleva */
@media (max-width: 63.99rem) {
  .paticka__autor { text-align: start; }
}

.paticka__autor-odkaz { display: block; border-radius: var(--radius-sm); transition: opacity var(--doba); }
.paticka__autor-odkaz:hover { opacity: 0.8; }
.paticka__autor-logo { display: block; inline-size: auto; block-size: 2.5rem; }

@media (min-width: 48rem) {
  .paticka__horni { grid-template-columns: 1.5fr 1fr; align-items: start; }
  .paticka__sloupce { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .paticka__spodek { grid-template-columns: 1fr auto; align-items: end; }
  .paticka__autor { justify-self: end; }
}

@media (min-width: 64rem) {
  .paticka__stred { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .paticka__logo { grid-column: 1 / span 4; }
  .paticka__sloupce { grid-column: 6 / span 7; }
}

/* ==========================================================================
   17. PODSTRÁNKY (právní texty) A 404
   ========================================================================== */
.pravni__hlava {
  margin-block-start: calc(var(--vyska-hlavicky) * -1);
  padding-block: calc(var(--vyska-hlavicky) + var(--space-8)) var(--space-9);
  border-end-start-radius: var(--radius-pas);
  border-end-end-radius: var(--radius-pas);
  background:
    radial-gradient(60% 90% at 90% 0%, rgb(22 127 127 / 0.32) 0%, transparent 70%),
    linear-gradient(180deg, var(--petrol-900) 0%, var(--petrol-850) 100%);
}

.pravni__hlava .kontejner {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.pravni__nadpis { max-inline-size: 20ch; font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem); }

.drobecky {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.drobecky a { color: var(--bila); }

/* oddělovač drobečků: pomlčka z ikonové sady */
.drobecky li + li::before {
  content: '';
  display: inline-block;
  inline-size: 1rem;
  block-size: 0.375rem;
  margin-inline-end: var(--space-3);
  vertical-align: 0.15em;
  background: var(--oranz);
  mask: url('/znacka/pomlcka-ikona.svg?v=66fd903d27') center / 100% 100% no-repeat;
}

.pravni__ucinnost {
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  border: var(--line-silna) solid var(--color-border);
  font-weight: 600;
}

.pravni__telo { padding-block: var(--space-8) var(--space-sekce); }

/* obsah vlevo a text vpravo; na užších obrazovkách pod sebou */
.pravni__obal {
  display: grid;
  gap: var(--space-6);
}

/* mobil a tablet: sloupec nesmí růst podle obsahu – široká tabulka by stránku roztáhla
   a telefon by ji celou zmenšil; tabulka se místo toho posouvá ve svém rámečku */
@media (max-width: 63.99rem) {
  .pravni__obal { grid-template-columns: minmax(0, 1fr); }
}

/* hlavička i tělo stránky stejně široké jako obsah + text, ať nadpis začíná nad obsahem */
@media (min-width: 64rem) {
  .pravni__hlava .kontejner,
  .pravni__obal { inline-size: min(var(--kontejner), 17rem + 46rem + var(--space-8)); }
}

@media (min-width: 64rem) {
  .pravni__obal {
    grid-template-columns: 17rem minmax(0, 46rem);
    justify-content: center;
    align-items: start;
    gap: var(--space-8);
  }
  .pravni__obsah {
    position: sticky;
    inset-block-start: calc(var(--vyska-hlavicky) + var(--space-5));
    max-block-size: calc(100dvh - var(--vyska-hlavicky) - var(--space-7));
    overflow-y: auto;
  }
  /* na desktopu je obsah vždy rozbalený – nadpis je jen popisek */
  .pravni__obsah-nadpis { pointer-events: none; }
  .pravni__obsah-nadpis::after { display: none; }
}

/* --- obsah dokumentu --- */
.pravni__obsah {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--petrol-100);
}

.pravni__obsah-nadpis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--petrol-700);
  list-style: none;
  cursor: pointer;
}

.pravni__obsah-nadpis::-webkit-details-marker { display: none; }

/* šipka sbalení (jen mobil a tablet) */
.pravni__obsah-nadpis::after {
  content: '';
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-inline-end: var(--line-silna) solid currentColor;
  border-block-end: var(--line-silna) solid currentColor;
  rotate: 45deg;
  translate: 0 -0.15rem;
  transition: rotate 0.3s var(--ease-out);
}

.pravni__obsah[open] .pravni__obsah-nadpis::after { rotate: -135deg; translate: 0 0.15rem; }

.pravni__obsah ol {
  list-style: none;
  display: grid;
  gap: var(--space-1);
  margin-block-start: var(--space-4);
}

.pravni__obsah a {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--petrol-800);
  text-decoration: none;
}

.pravni__obsah a:hover { color: var(--oranz-tmava); }
.pravni__obsah a[aria-current] { background: var(--bila); font-weight: 700; }
.pravni__obsah .cislo-kapitoly { flex: none; min-inline-size: 1.25rem; color: var(--oranz-tmava); font-weight: 700; }

/* --- text dokumentu na bílém listu --- */
.text-dokumentu {
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--bila);
  box-shadow: 0 0 0 var(--line-silna) var(--linka);
  font-size: var(--text-lg);
  line-height: 1.7;
}

@media (min-width: 48rem) {
  .text-dokumentu { padding: var(--space-8) var(--space-8); }
}

.text-dokumentu > * + * { margin-block-start: var(--space-4); }

/* kapitoly oddělené linkou, nadpis písmem textu (display písmo patří velkým nadpisům) */
.text-dokumentu h2 {
  scroll-margin-block-start: var(--space-5);   /* výšku hlavičky už přičítá scroll-padding-top na html */
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-6);
  border-block-start: var(--line) solid var(--linka);
  font-family: var(--font-text);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--petrol-800);
}

.text-dokumentu h2 .cislo-kapitoly { color: var(--oranz-tmava); }
.text-dokumentu h3 { margin-block-start: var(--space-6); font-family: var(--font-text); font-size: var(--text-xl); font-weight: 700; color: var(--petrol-800); }
.text-dokumentu > h2:first-child { margin-block-start: 0; padding-block-start: 0; border: 0; }
.text-dokumentu > p:first-child { font-size: var(--text-xl); color: var(--petrol-700); }
.text-dokumentu p,
.text-dokumentu li { color: var(--inkoust); }
.text-dokumentu strong { color: var(--petrol-800); }
.text-dokumentu ul,
.text-dokumentu ol { padding-inline-start: var(--space-5); display: grid; gap: var(--space-2); }
.text-dokumentu li::marker { color: var(--oranz-tmava); }
.text-dokumentu a { color: var(--petrol-700); font-weight: 600; text-underline-offset: 0.2em; }
.text-dokumentu a:hover { color: var(--oranz-hover); }
.text-dokumentu code { font-size: 0.9em; padding: 0.05em 0.35em; border-radius: var(--radius-sm); background: var(--petrol-100); }

/* linka je skutečný okraj (ne obrys dovnitř) – tmavá hlavička tabulky ji tak nepřekryje */
.tabulka-obal {
  overflow-x: auto;
  border: var(--line-silna) solid var(--linka);
  border-radius: var(--radius-lg);
  background: var(--bila);
}

.text-dokumentu table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-base); line-height: 1.5; }
.text-dokumentu th,
.text-dokumentu td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; }

.text-dokumentu th {
  background: var(--petrol-800);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--bila);
}

.text-dokumentu tr + tr td { border-top: var(--line) solid var(--linka); }

/* --- 404: pozadí jako registrace v aplikaci --- */
.stranka-chyba {
  display: grid;
  min-block-size: 100dvh;
  background: linear-gradient(180deg, var(--petrol-850) 0%, var(--petrol-700) 100%);
}

.chyba {
  display: grid;
  align-content: center;
  justify-items: center;
  padding-block: var(--space-7);
  text-align: center;
}

/* rytmus: logo, oči, pak 404 + nadpis těsně u sebe, perex a tlačítka s odstupem */
.chyba > * { margin: 0; }
.chyba__logo { margin-block-end: var(--space-7); }
.chyba__logo img { inline-size: auto; block-size: 2.5rem; }

/* Chamelounovy oči (obrázek 720 px = 2× zobrazené šířky) */
.chyba__oci { display: block; inline-size: min(100%, 22.5rem); margin-block-end: var(--space-6); }
.chyba__oci img { display: block; inline-size: 100%; block-size: auto; }

.chyba__stitek {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--petrol-300);
  margin-block-end: var(--space-5);
}

.chyba__stitek::before {
  content: '';
  inline-size: 1.5rem;
  block-size: 0.5rem;
  background: var(--oranz);
  mask: url('/znacka/pomlcka-ikona.svg?v=66fd903d27') center / 100% 100% no-repeat;
}

.chyba__nadpis { max-inline-size: 16ch; font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem); }

.chyba__perex {
  max-inline-size: 36rem;
  margin-block-start: 2.5rem;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-muted);
}

.chyba .skupina-tlacitek { justify-content: center; margin-block-start: var(--space-7); }

/* ==========================================================================
   18. SDÍLENÉ ČÁSTI – ovládání hero ukázky na tmavé scéně, dialogy
   ========================================================================== */
.ukazka__ovladani { color: var(--color-text); }
.ukazka__nazev-motivu { color: var(--color-text); }
.ukazka__motiv { box-shadow: inset 0 0 0 0.1875rem var(--petrol-850); border-color: rgb(255 255 255 / 0.85); }
.ukazka__motiv[aria-pressed='true'] { outline-color: var(--bila); }
.ukazka__motiv:focus-visible,
.ukazka__pauza:focus-visible { outline-color: var(--color-focus); }
.ukazka__pauza { color: var(--color-muted); opacity: 1; }
.ukazka__pauza:hover { color: var(--color-text); }

.dialog::backdrop { background: rgb(0 30 30 / 0.7); backdrop-filter: none; }
.dialog__zavrit .ikona,
.paticka-okno .dialog__zavrit .ikona { inline-size: 1.125rem; block-size: 1.125rem; }

/* ==========================================================================
   19. POHYB
   a) hero: H1 vyjíždí po řádcích zpoza masky (při načtení)
   b) odhalení sekcí scrollem (CSS view timeline, bez JS)
   c) podpisové efekty: cestička kroků, pásy profesí, „píše…", mini volba,
      poletující přílohy, poskočení součtu (script.js)
   Prohlížeče bez podpory a lidé s omezeným pohybem vidí vše hned a celé.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* a) */
  .radek__text { animation: vyjet 1.1s var(--ease-out) both; animation-delay: 0.15s; }
  .radek:nth-child(2) .radek__text { animation-delay: 0.27s; }
  .radek:nth-child(3) .radek__text { animation-delay: 0.39s; }
  /* tah se odkryje zleva doprava, jako když jede štětec (roztažení by kresbu deformovalo) */
  .hero__zvyrazneni::after { animation: odkryt-tah 0.9s var(--ease-out) 1s both; }

  /* c) nekonečné animace; stojí mimo obrazovku ([data-pauza-mimo].je-mimo ze script.js) */
  .pas__stopa { animation: pas-jizda 70s linear infinite; }
  .pas--zpet .pas__stopa { animation-direction: reverse; animation-duration: 80s; }
  .pas--pomaly .pas__stopa { animation-duration: 60s; }
  .pasy:hover .pas__stopa,
  .pasy:focus-within .pas__stopa { animation-play-state: paused; }

  .bublina__pise i { animation: tecka 1.4s ease-in-out infinite; }
  .bublina__pise i:nth-child(2) { animation-delay: 0.2s; }
  .bublina__pise i:nth-child(3) { animation-delay: 0.4s; }


  [data-pauza-mimo].je-mimo,
  [data-pauza-mimo].je-mimo * { animation-play-state: paused; }

  /* součet v přepočtu při změně krátce poskočí */
  .prepocet__soucet strong.je-zmena { animation: poskok 0.45s var(--ease-pruzna); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* b) */
    .hlava-sekce,
    .problem__obrazek,
    .neosvedci__seznam,
    .bublina,
    .ukazka-karta,
    .tarif,
    .tip,
    .otazky__sloupec,
    .cta {
      animation: odhalit linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }

    /* položky mřížek s lehkým zpožděním za sebou */
    .tarif:nth-child(2) { animation-range: entry 5% entry 42%; }
    .tarif:nth-child(3) { animation-range: entry 10% entry 48%; }

  }
}

/* --------------------------------------------------------------------------
   CESTIČKA KROKŮ: script.js přidá .je-pripravena (vše zhasnuté) a po vjetí
   do obrazu .je-videt. Cestička se kreslí postupně a každý krok se ve chvíli,
   kdy k němu dojede, rozsvítí a jednou zapulzuje. Časování:
   krok 1 hned, krok 2 po polovině cesty, krok 3 na konci.
   -------------------------------------------------------------------------- */
.kroky-obal {
  --cesta-start: 0.3s;
  --cesta-usek: 1.3s;     /* úsek mezi dvěma kroky */
}

/* --k = pořadí kroku (0–2); --od = krok, od kterého se přehrává (klik na odznak) */
.krok--1 { --k: 0; }
.krok--2 { --k: 1; }
.krok--3 { --k: 2; }
.krok { --dosazeni: calc(var(--cesta-start) + (var(--k) - var(--od, 0)) * var(--cesta-usek)); }

.kroky-obal[data-od='1'] { --od: 1; }
.kroky-obal[data-od='2'] { --od: 2; }

/* pulzující kroužek kolem odznaku */
.krok__ikona::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0.25rem var(--oranz);
  opacity: 0;
  pointer-events: none;
}

/* zhasnuto: odznak světlý, cestička skrytá */
.je-pripravena .krok__ikona {
  background: var(--petrol-100);
  color: var(--krok-barva);
}
.je-pripravena .krok__cislo { opacity: 0.4; }
.je-pripravena .krok:not(:last-child)::after { clip-path: inset(0 0 100% 0); }
/* cestička vede zleva doprava (x 200 → 1000 z 1200); odkrývá ji výřez, který se rozšiřuje
   zleva doprava (animovaná šířka obalu – překreslí se vždy; animace ořezu, masky nebo
   krytu nad SVG se v některých prohlížečích nepřekreslovala) */
.je-pripravena .cesticka__vyrez { inline-size: 16.6%; }

/* jede: mobil – úsek za krokem se odkryje shora dolů */
.je-videt .krok:not(:last-child)::after {
  animation: odkryt-usek var(--cesta-usek) linear var(--dosazeni) both;
}

/* jede: desktop – výřez se rozšíří od zvoleného kroku (16,6 / 50 / 83,4 %) k poslednímu */
.je-videt .cesticka__vyrez {
  --cesta-od: calc(16.6% + var(--od, 0) * 33.4%);
  animation: odkryt-cesticku calc(var(--cesta-usek) * (2 - var(--od, 0))) linear var(--cesta-start) both;
}

@keyframes odkryt-cesticku {
  from { inline-size: var(--cesta-od); }
  to { inline-size: 83.4%; }
}

/* dosažený krok se rozsvítí a zapulzuje */
.je-videt .krok__ikona {
  animation: rozsvitit-krok 0.5s ease-out var(--dosazeni) both;
}
.je-videt .krok__ikona::after {
  animation: pulz-krok 1.1s ease-out var(--dosazeni) 2;
}
.je-videt .krok__cislo {
  animation: rozsvitit-cislo 0.5s ease-out var(--dosazeni) both;
}

/* kroky před zvoleným: bez animace, rozsvícené, cestička za nimi nakreslená */
.je-videt[data-od='1'] .krok--1 .krok__ikona,
.je-videt[data-od='2'] :is(.krok--1, .krok--2) .krok__ikona {
  animation: none;
  background: var(--krok-barva);
  color: var(--bila);
}
.je-videt[data-od='1'] .krok--1 .krok__cislo,
.je-videt[data-od='2'] :is(.krok--1, .krok--2) .krok__cislo {
  animation: none;
  opacity: 1;
}
.je-videt[data-od='1'] .krok--1 .krok__ikona::after,
.je-videt[data-od='2'] :is(.krok--1, .krok--2) .krok__ikona::after { animation: none; }
.je-videt[data-od='1'] .krok--1::after,
.je-videt[data-od='2'] :is(.krok--1, .krok--2)::after {
  animation: none;
  clip-path: none;
}

/* odznaky jdou kliknout – přehrají cestu od daného kroku; na desktopu to napoví hover */
.je-pripravena .krok__ikona { cursor: pointer; }
.je-pripravena .krok__ikona:focus-visible {
  outline: 0.1875rem solid var(--color-focus);
  outline-offset: 0.625rem;
}

@media (hover: hover) and (pointer: fine) {
  .je-pripravena .krok__ikona { transition: box-shadow 0.25s ease; }
  .je-pripravena .krok__ikona:hover {
    box-shadow: 0 0 0 0.5rem var(--petrol-100), 0 0 0 0.6875rem var(--oranz);
  }
  .je-pripravena .krok:has(.krok__ikona:hover) .krok__cislo {
    box-shadow: 0 0 0 var(--line-silna) var(--oranz), var(--shadow-card);
    color: var(--oranz-tmava);
  }
}

@keyframes odkryt-usek {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes rozsvitit-krok {
  from { background: var(--petrol-100); color: var(--krok-barva); }
  to { background: var(--krok-barva); color: var(--bila); }
}

@keyframes rozsvitit-cislo {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

@keyframes pulz-krok {
  0% { opacity: 0.9; scale: 1; }
  100% { opacity: 0; scale: 1.6; }
}

@keyframes vyjet {
  from { transform: translateY(110%); }
}

@keyframes odkryt-tah {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes odhalit {
  from { opacity: 0; translate: 0 2.5rem; }
}

@keyframes pas-jizda {
  to { transform: translateX(-100%); }
}


@keyframes tecka {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-0.25rem); }
}

@keyframes poskok {
  40% { transform: scale(1.12); }
}

/* omezený pohyb: pásy profesí jako obyčejný zalomený seznam */
@media (prefers-reduced-motion: reduce) {
  .pasy { inline-size: var(--kontejner); margin-inline: auto; mask-image: none; }
  .pas { inline-size: auto; justify-content: center; border: 0; }
  .pas__stopa { flex: 1 1 auto; min-inline-size: 0; flex-wrap: wrap; justify-content: center; }
  .pas__stopa[aria-hidden='true'],
  .pas__slovo:last-child::after { display: none; }
  .pas__slovo { font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); padding-block: var(--space-1); }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;   /* výjimka: přístupnost má přednost */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   DLAŽDICE FUNKCÍ: nevysouvají se podle scrollu (velká dlaždice vedle malých by
   při zastavení na kraji obrazovky nekončila ve stejné lince), ale jednou celé.
   script.js přidá mřížce .je-pripravena a každé dlaždici po vjetí do obrazu
   .je-videt. Sousedé v řadě se rozjedou kousek po sobě.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .funkce.je-pripravena .dlazdice:not(.je-videt) { opacity: 0; }
  .funkce.je-pripravena .dlazdice.je-videt { animation: odhalit 0.7s var(--ease-out) both; }
  .funkce.je-pripravena .dlazdice:nth-child(4n + 2) { animation-delay: 0.08s; }
  .funkce.je-pripravena .dlazdice:nth-child(4n + 3) { animation-delay: 0.16s; }
  .funkce.je-pripravena .dlazdice:nth-child(4n) { animation-delay: 0.24s; }
}


@layer spolecne {
/* ==========================================================================
   PÍSMA (sdílené všemi návrhy)
   Hostovaná u nás, stejné soubory jako v aplikaci Cenotvor.
   Galindo – jen velké nadpisy (jediný řez 400, nikdy tučně).
   SUSE – všechno ostatní (proměnný řez 100–800).
   Dva soubory na rodinu: základní latinka a rozšířená s háčky a kroužky,
   prohlížeč stáhne jen to, co stránka opravdu použije.
   ========================================================================== */

@font-face {
  font-family: 'Galindo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonty/galindo-latin.woff2?v=bdaefd847f') 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: 'Galindo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonty/galindo-latin-ext.woff2?v=afa1cfa47e') 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: 'SUSE';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonty/suse-latin.woff2?v=ebac5d8045') 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: 'SUSE';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonty/suse-latin-ext.woff2?v=6764dfbfa3') 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;
}


/* ==========================================================================
   UKÁZKA V HERO (sdílená komponenta všech návrhů)
   V okně, které drží Chameloun, se posouvají skutečné snímky ukázkové
   nabídky z aplikace (mobilní zobrazení, jeden snímek na barevný motiv).
   Chameloun je namalovaný v petrolejové – ostatní motivy jsou posun odstínu
   filtrem; bílé a šedé oči hue-rotate nemění, takže zůstanou, jak jsou.
   Tmavší motivy se neztmavují jen jasem (zešedlo by i bělmo očí): jas se sníží
   méně a zvedne se kontrast – tělo ztmavne, bílá zůstane bílá.
   ========================================================================== */

/* --- barevné motivy: jen barva Chamelouna a ovládání ------------------- */
.ukazka {
  --n-prechod: 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  --chameloun-filtr: none;
  margin: 0;
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.ukazka[data-motiv='modry'] { --chameloun-filtr: hue-rotate(38deg) saturate(1.25) brightness(0.9) contrast(1.15); }
.ukazka[data-motiv='fialovy'] { --chameloun-filtr: hue-rotate(88deg) saturate(1.1) brightness(0.88) contrast(1.18); }
.ukazka[data-motiv='zeleny'] { --chameloun-filtr: hue-rotate(-42deg) saturate(1.1) brightness(0.88) contrast(1.2); }

/* --- scéna: Chameloun s průhledným „oknem", za ním nabídka ----------------- */
.ukazka__scena {
  position: relative;
  width: 100%;
  aspect-ratio: 1138 / 1854;
}

/* Okno přesně podle průhledné plochy v ilustraci (homepage.png 1138 × 1854 px):
   horní hrana pod rameny, levý okraj pod prsty, pravý pod paží, mírný náklon jako na kresbě. */
.ukazka__okno {
  position: absolute;
  left: 5%;
  top: 35.2%;
  width: 75.6%;  /* pravý okraj v Chamelounově levé dlani */
  height: 61.8%; /* spodní roh pod spodní tlapou */
  transform: rotate(1.7deg);
  transform-origin: 0 0;
  border-radius: 2.2% / 1.6%;
  overflow: hidden;
  background: transparent;
  box-shadow:
    0 0.15rem 0.4rem rgb(8 44 44 / 0.18),
    0 1.5rem 3rem -1rem rgb(8 44 44 / 0.45);
  z-index: 1;
}

/* Vrstvy: Chameloun (hlava, tělo, rameno) POD nabídkou, nabídka, a nad ní
   táž ilustrace maskovaná jen na ruce – prsty i dlaně kartu drží, ale tělo
   ani poloprůhledný stín u ramen do karty nezasahují. */
.ukazka__chameloun {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ukazka__chameloun--ruce {
  z-index: 2;
  -webkit-mask: url('/znacka/ruce-chameloun.svg?v=946a5fc4cd') 0 0 / 100% 100% no-repeat;
  mask: url('/znacka/ruce-chameloun.svg?v=946a5fc4cd') 0 0 / 100% 100% no-repeat;
}

.ukazka__chameloun img {
  display: block;
  width: 100%;
  height: 100%;
  filter: var(--chameloun-filtr);
  transition: filter var(--n-prechod);
}

/* --- snímek nabídky v okně -------------------------------------------- */
.snimek {
  container-type: inline-size;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Stránka nabídky se posouvá ve výřezu, který končí rovně pod lištou (o 2 px níž
   než její horní hrana). Pod zaoblenou spodní hranou okna pak leží jen lišta –
   dřív se na oblině vyhlazovaná lišta mísila se světlou stránkou pod ní ve světlý lem.
   Výšku lišty (--lista, v cqi okna) nastavuje zaklad.js podle motivu. */
.snimek__vyrez {
  position: absolute;
  inset: 0 0 calc(var(--lista, 0px) - 2px) 0;
  overflow: hidden;
  background: #f9f6f2;
}

.snimek__posuvnik {
  position: relative;
  display: grid;          /* snímky motivů leží na sobě, viditelný je jen aktivní */
  will-change: transform;
  transition: opacity 0.45s ease;
}

.snimek__posuvnik.je-prelinani { opacity: 0; }

.snimek__stranka,
.snimek__lista img,
.snimek__panel img {
  grid-area: 1 / 1;
  display: block;
  inline-size: 100%;
  block-size: auto;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.snimek__stranka.je-aktivni,
.snimek__lista img.je-aktivni,
.snimek__panel img.je-aktivni { opacity: 1; }

/* spodní lišta nabídky je ve skutečnosti přichycená – tady taky */
.snimek__lista {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
}

/* lišty motivů se mohou lišit výškou (dva řádky souhrnu) – všechny ke spodní hraně */
.snimek__lista img { align-self: end; }

/* stisknuté tlačítko na konci ukázky naskočí hned, ne pomalým prolnutím */
.snimek__lista img.snimek__lista-stisk { transition-duration: 0.12s; }

/* záplaty původního stavu (nevybraná karta, nezaškrtnuté políčko) nad konečným
   snímkem; při kliknutí rychle zmizí a ukáže skutečný vybraný stav */
.snimek__zaplata {
  position: absolute;
  block-size: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.snimek__zaplata.je-videt { opacity: 1; transition: none; }

/* kroužek „kliknutí" na vybraném balíčku a doplňcích */
.snimek__klik {
  position: absolute;
  inline-size: 12cqi;
  block-size: 12cqi;
  margin: -6cqi 0 0 -6cqi;
  border-radius: 50%;
  border: 0.8cqi solid #e87522;
  opacity: 0;
  pointer-events: none;
}

.snimek__klik.je-kliknuto { animation: snimek-klik 0.9s ease-out forwards; }

@keyframes snimek-klik {
  0% { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* --- ovládání pod ukázkou: čtyři motivy + pauza ------------------------- */
.ukazka__ovladani {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  font-size: 1rem;
}

.ukazka__motivy {
  display: inline-flex;
  gap: 0.5rem;
}

.ukazka__motiv {
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  border: 0.1875rem solid transparent;
  outline: 0.125rem solid transparent;
  cursor: pointer;
  background: var(--motiv-barva);
  box-shadow: inset 0 0 0 0.1875rem rgb(255 255 255 / 0.9);
  transition: outline-color 0.2s ease;
}

.ukazka__motiv[aria-pressed='true'] { outline-color: var(--motiv-barva); outline-offset: 0.125rem; }
.ukazka__motiv:focus-visible { outline: 0.1875rem solid var(--color-focus, #b8520e); outline-offset: 0.1875rem; }
.ukazka__motiv--petrolejovy { --motiv-barva: #167f7f; }
.ukazka__motiv--modry { --motiv-barva: #234f9a; }
.ukazka__motiv--fialovy { --motiv-barva: #57348c; }
.ukazka__motiv--zeleny { --motiv-barva: #00591b; }

.ukazka__nazev-motivu {
  min-inline-size: 9.5em;
  font-weight: 600;
}

.ukazka__pauza {
  font: inherit;
  font-size: 1rem;
  color: inherit;
  background: none;
  border: 0;
  padding: 0.5rem 0.25rem;
  min-block-size: 2.75rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  opacity: 0.8;
}

.ukazka__pauza:hover { opacity: 1; }
.ukazka__pauza:focus-visible { outline: 0.1875rem solid var(--color-focus, #b8520e); outline-offset: 0.125rem; border-radius: 0.25rem; }

@media (prefers-reduced-motion: reduce) {
  .ukazka,
  .ukazka * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/* ==========================================================================
   UKÁZKA V HERO – DESKTOPOVÁ VARIANTA (.ukazka--desktop)
   Okno prohlížeče se skutečnými snímky nabídky na počítači (sloupec s nabídkou, 960 px).
   Týž Chameloun jako v ostatních návrzích, menší, se drží pravého horního
   rohu okna: horní hrana okna sedí pod rameny, pravá hrana pod paží.
   ========================================================================== */

/* cqi níž se počítají ze šířky celé ukázky (kontejner musí být předek scény,
   jinak by se odsazení scény vztahovalo k šířce obrazovky) */
.ukazka--desktop { container-type: inline-size; }

.ukazka--desktop .ukazka__scena {
  inline-size: 100%;
  aspect-ratio: auto;
  /* nahoře místo pro hlavu Chamelouna, vpravo pro paži, která okno obtáčí */
  padding-block-start: 15cqi;
  padding-inline-end: 5cqi;
}

/* --- okno prohlížeče ---------------------------------------------------- */
.ukazka--desktop .ukazka__okno {
  position: relative;
  inset: auto;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 10.4;
  display: flex;
  flex-direction: column;
  transform: none;
  border-radius: 1.1cqi;
  background: #fff;
  box-shadow:
    0 0.15rem 0.4rem rgb(8 44 44 / 0.14),
    0 2.5rem 4rem -1.5rem rgb(8 44 44 / 0.45);
  outline: 0.0625rem solid rgb(8 44 44 / 0.08);
}

.prohlizec__lista {
  display: flex;
  align-items: center;
  gap: 1.6cqi;
  flex: none;
  padding: 1.1cqi 1.6cqi;
  background: #eef1f0;
  border-block-end: 0.0625rem solid rgb(8 44 44 / 0.08);
  font-family: 'SUSE', system-ui, sans-serif;
}

.prohlizec__tecky { display: inline-flex; gap: 0.7cqi; }

.prohlizec__tecky i {
  inline-size: 1.05cqi;
  block-size: 1.05cqi;
  border-radius: 50%;
  background: #c9d2d0;
}

.prohlizec__adresa {
  flex: 1;
  max-inline-size: 60cqi;
  margin-inline: auto;
  padding: 0.45cqi 1.4cqi;
  border-radius: 999px;
  background: #fff;
  color: #5e7676;
  font-size: 1.15cqi;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ukazka--desktop .snimek {
  position: relative;
  flex: 1;
  min-block-size: 0;
}

/* --- Chameloun nad pravým horním rohem --------------------------------- */
/* Týž obrázek jako v hero ostatních návrhů (homepage.png 1138 × 1854 px).
   Pravý horní roh karty, kterou na kresbě drží, leží na 76,5 % šířky a 37,8 % výšky
   obrázku – ten bod posadíme na pravý horní roh okna. Levá ruka pak svírá horní hranu
   okna, pravá paže obtáčí jeho bok a spodní ruka (na kresbě drží kartu zespodu)
   visí přes nabídku. */
.ukazka__chameloun--roh {
  z-index: 2;
  --sirka: 24cqi;
  inset: calc(15cqi - var(--sirka) * 1.629 * 0.378) auto auto calc(95cqi - var(--sirka) * 0.765);
  inline-size: var(--sirka);
  block-size: calc(var(--sirka) * 1.629);
  /* karta je na kresbě nakloněná o 1,7°, okno ne – srovnat kolem rohu */
  rotate: -1.7deg;
  transform-origin: 76.5% 37.8%;
}



/* ==========================================================================
   TLAČÍTKA JAKO V APLIKACI (zapíná se souborem sdilene.txt v návrhu)
   Převzato z aplikace Cenotvor (resources/css/app.css → .prelivem,
   Rozvrzeni/Pole.tsx): při najetí se tmavší barva „přelije" z obou stran
   ke kurzoru a pod kurzorem zůstane díra ve tvaru znaku Cenotvoru, kterou
   je vidět klidová barva tlačítka. Polohu kurzoru zapisuje zaklad.js do --x/--y.
   Tokeny: --color-accent-strong, --color-accent-hover, --color-on-accent,
   --color-primary, --color-primary-dark, --color-primary-surface,
   --color-secondary, --color-border, --color-focus, --radius-sm.
   ========================================================================== */

@property --sjeti {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

.tlacitko {
  /* dokud kurzor nepřijde, stojí díra nad tlačítkem – přeliv je celý */
  --x: 0px;
  --y: -100px;
  --barva-prelivu: transparent;
  --prechod-dlazdice: 260ms cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 3rem;
  padding: 0.75rem 1.5rem;
  border: 0.0625rem solid transparent;
  border-radius: var(--radius-sm, 0.375rem);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--prechod-dlazdice),
    border-color var(--prechod-dlazdice),
    color var(--prechod-dlazdice);
}

.tlacitko .ikona { inline-size: 1.05em; block-size: 1.05em; }

.tlacitko:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}

/* přeliv: dvě vrstvy téže barvy kotvené vlevo a vpravo, potkají se u kurzoru */
.tlacitko::after {
  content: '';
  position: absolute;
  /* Přes rámeček tlačítka, ne jen přes vnitřek: absolutně umístěný potomek
     začíná uvnitř rámečku, takže kolem přelivu zůstával proužek klidové
     barvy – na tmavé ploše problikával jako světlý rám. Šířka rámečku je
     v .tlacitko 1/16 rem; maska díky tomu sedí i na --x/--y, které se měří
     od vnější hrany tlačítka. */
  inset: -0.0625rem;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--barva-prelivu), var(--barva-prelivu)),
    linear-gradient(var(--barva-prelivu), var(--barva-prelivu));
  background-position: left center, right center;
  background-repeat: no-repeat;
  background-size:
    calc((var(--x) + 0.5px) * var(--sjeti)) 100%,
    calc((100% - var(--x) + 0.5px) * var(--sjeti)) 100%;
  transition: opacity var(--prechod-dlazdice);
  /* maska: velké neprůhledné plátno s dírou ve tvaru znaku uprostřed (díra ≈ 14 px) */
  -webkit-mask-image: url('/znacka/dira-znak.svg?v=3535e2c003');
  mask-image: url('/znacka/dira-znak.svg?v=3535e2c003');
  -webkit-mask-size: 3200px 3200px;
  mask-size: 3200px 3200px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: calc(var(--x) - 1600px) calc(var(--y) - 1600px);
  mask-position: calc(var(--x) - 1600px) calc(var(--y) - 1600px);
}

@keyframes sjeti-prelivu {
  from { --sjeti: 0; }
}

@keyframes obrys-po-prelivu {
  from, to { outline-color: transparent; }
}

@media (hover: hover) {
  .tlacitko:hover {
    /* krajní bod pod přelivem (vyhlazení oblin) – obrys v barvě přelivu uvnitř */
    outline: 1px solid var(--barva-prelivu);
    outline-offset: -1px;
    animation: obrys-po-prelivu 260ms;
  }

  .tlacitko:hover::after {
    opacity: 1;
    transition: none;
    animation: sjeti-prelivu 260ms ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tlacitko:hover::after { animation: none; }
}

/* --- varianty (Pole.tsx: hlavni, petrolejove, vedlejsi, terciarni) ---
   Barvy hlavní akce jdou přes proměnné, aby je tmavá plocha mohla přepnout
   jako v aplikaci (.panel-tmavy): světlejší oranžová #f6a45e s tmavým písmem,
   pod myší přeliv tmavou #c95d12 a bílé písmo. Tmavá plocha v návrhu nastaví:
     --tl-hlavni-pozadi: #f6a45e;  --tl-hlavni-text: #173b3b;
     --tl-hlavni-preliv: #c95d12;  --tl-hlavni-text-hover: #fff; */
.tlacitko--hlavni {
  --barva-prelivu: var(--tl-hlavni-preliv, var(--color-accent-hover));
  background-color: var(--tl-hlavni-pozadi, var(--color-accent-strong));
  color: var(--tl-hlavni-text, var(--color-on-accent));
}

.tlacitko--hlavni:hover { color: var(--tl-hlavni-text-hover, var(--color-on-accent)); }

.tlacitko--petrolejove {
  --barva-prelivu: var(--color-primary-dark);
  background-color: var(--color-primary);
  color: #fff;
}

.tlacitko--petrolejove:hover { color: #fff; }

/* Obrysové akce přeliv nedostávají – v aplikaci „nemají co přelít". */
.tlacitko--vedlejsi::after,
.tlacitko--vedlejsi-tma::after { content: none; }

/* vedlejší na světlé ploše (Pole.tsx vedlejsi): bílá s linkou,
   pod myší mátová plocha a linka petrolejové 40 % */
.tlacitko--vedlejsi {
  background-color: var(--color-surface, #fff);
  border-color: var(--color-border);
  color: var(--color-text);
}

.tlacitko--vedlejsi:hover {
  background-color: var(--color-primary-surface);
  border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
  color: var(--color-text);
  outline: none;
}

/* vedlejší na tmavé ploše: průhledná s bílou linkou;
   pod myší se linka i písmo přebarví na světlou oranžovou (oranžová na tmavém) */
.tlacitko--vedlejsi-tma {
  background-color: transparent;
  border-color: rgb(255 255 255 / 0.55);
  color: #fff;
}

.tlacitko--vedlejsi-tma:hover {
  border-color: #f6a45e;
  color: #f6a45e;
  outline: none;
}

.tlacitko--text {
  background: none;
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  padding-inline: 0.75rem;
}

.tlacitko--text::after { content: none; }
.tlacitko--text:hover { color: var(--color-accent-hover); outline: none; }

.tlacitko--velke { min-block-size: 3.5rem; padding: 1rem 2rem; font-size: 1.125rem; }

/* nízké tlačítko do lišty (aplikace: ZAKLAD_TLACITKA + TLACITKO_NIZKE, výška 2,5rem → bez min. výšky, py-1.5) */
.tlacitko--nizke { min-block-size: 0; padding: 0.375rem 1rem; }

/* doprovodná akce (aplikace: terciarni, ovládání lišty editoru – „Náhled", „Kopírovat odkaz"):
   bez plochy i obrysu; pod myší jen vnitřní linka v barvě linek plochy.
   Linka je stín uvnitř, ne border – tlačítko pod myší neposkočí. */
.tlacitko--terciarni {
  background: transparent;
  color: var(--color-text);
  font-weight: 500;
}

.tlacitko--terciarni::after { content: none; }

.tlacitko--terciarni:hover {
  color: var(--color-text);
  outline: none;
  box-shadow: inset 0 0 0 0.0625rem var(--color-border);
}
.tlacitko--siroke { inline-size: 100%; }


/* ==========================================================================
   SDÍLENÉ KOMPONENTY: cookie lišta, dialogová okna, přepínače, segmenty
   Berou si barvy, rádiusy a mezery z design systému návrhu (tokeny :root),
   takže v každém návrhu vypadají „jeho" – a přitom je kód jen jednou.
   Povinné tokeny: --color-primary, --color-secondary, --color-background, --color-surface,
   --color-text, --color-muted, --color-accent, --color-accent-strong, --color-on-accent,
   --color-border, --color-focus, --radius-sm/md/lg, --space-1…8, --font-text, --font-display,
   --shadow-card, --shadow-raised.
   ========================================================================== */

/* --- cookie lišta -------------------------------------------------------- */
.cookie-lista {
  position: fixed;
  z-index: 90;
  inset: auto var(--space-3) var(--space-3) var(--space-3);
  display: grid;
  gap: var(--space-4);
  max-inline-size: 40rem;
  margin-inline: auto;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  border: 0.125rem solid var(--color-border);
  box-shadow: var(--shadow-raised);
  animation: cookie-prijezd 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cookie-lista[hidden] { display: none; }

.cookie-lista__nadpis {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  line-height: 1.15;
  color: var(--color-secondary);
}

.cookie-lista__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.cookie-lista__akce {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* mobil: lišta nesmí zabrat půl obrazovky */
@media (max-width: 47.99rem) {
  .cookie-lista {
    inset: auto var(--space-2) var(--space-2);
    gap: var(--space-3);
    padding: var(--space-4);
  }
  .cookie-lista__nadpis { margin-block-end: var(--space-1); font-size: 1.25rem; }
  .cookie-lista__text { line-height: 1.5; }
  .cookie-lista__akce .tlacitko { flex: 1 1 auto; min-block-size: 2.75rem; padding-block: var(--space-2); }
  .cookie-lista__akce .tlacitko--text { flex-basis: 100%; min-block-size: 2.5rem; }
}

/* od tabletu v pravém dolním rohu – vlevo by zakryla hlavní tlačítka v úvodu */
@media (min-width: 48rem) {
  .cookie-lista {
    inset-inline-start: auto;
    inset-inline-end: var(--space-5);
    inset-block-end: var(--space-5);
  }
}

@keyframes cookie-prijezd {
  from { opacity: 0; transform: translateY(1.5rem); }
}

/* --- dialogová okna (nastavení cookies, volba tarifu) -------------------- */
.dialog {
  inline-size: min(34rem, calc(100% - var(--space-5)));
  max-block-size: calc(100dvh - var(--space-6));
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-raised);
  overscroll-behavior: contain;
}

.dialog::backdrop {
  background: rgb(0 40 40 / 0.55);
  backdrop-filter: blur(3px);
}

.dialog[open] { animation: dialog-otevreni 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.dialog[open]::backdrop { animation: dialog-pozadi 0.35s ease; }

@keyframes dialog-otevreni {
  from { opacity: 0; transform: translateY(1rem) scale(0.98); }
}

@keyframes dialog-pozadi {
  from { opacity: 0; }
}

/* zavírání je taky plynulé: okno i pozadí zmizí, display a overlay počkají na konec
   (kde to prohlížeč neumí, zavře se okamžitě jako dřív) */
.dialog,
.dialog::backdrop {
  transition: opacity 0.25s ease, display 0.25s allow-discrete, overlay 0.25s allow-discrete;
}

.dialog:not([open]),
.dialog:not([open])::backdrop { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .dialog,
  .dialog::backdrop { transition: none; }
}

.dialog__obsah {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5);
}

@media (min-width: 40rem) {
  .dialog__obsah { padding: var(--space-6); }
}

/* křížek na ose nadpisu: spodek ikony sedí na účaří (prvního) řádku nadpisu,
   takže je ve výšce malých písmen – nezávisle na velikosti písma */
.dialog__hlavicka {
  display: flex;
  align-items: first baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

/* okno tarifu: nad nadpisem je nadtitulek – křížek patří k nadpisu (poslední řádek) */
.dialog--tarif .dialog__hlavicka { align-items: last baseline; }

/* s větším nadpisem (desktop) jde osa písmen výš než malá písmena – křížek se
   posune úměrně růstu nadpisu (clamp níž kopíruje clamp velikosti .dialog__nadpis):
   0 při 1,75rem, 0,15rem při 2,25rem */
.dialog__hlavicka .dialog__zavrit { translate: 0 calc(-1 * clamp(0rem, 0.36vw - 0.105rem, 0.15rem)); }

.dialog__nadtitulek {
  margin: 0 0 var(--space-1);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.dialog__nadpis {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  line-height: 1.1;
  color: var(--color-secondary);
}

.dialog__text {
  margin: 0;
  line-height: 1.6;
}

.dialog__text a { color: inherit; text-underline-offset: 0.2em; }

.dialog__zavrit {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.dialog__zavrit:hover { background: var(--color-background); }
.dialog__zavrit:focus-visible { outline: 0.1875rem solid var(--color-focus); outline-offset: 0.125rem; }
.dialog__zavrit .ikona { inline-size: 1.125rem; block-size: 1.125rem; }

.dialog__paticka {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.dialog__paticka--sloupec {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

/* informace o betě pod tlačítkem v okně objednávky */
.dialog__beta {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md, 0.75rem);
  background: var(--color-primary-surface, #eef6f6);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
}

.dialog__beta .ikona {
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  overflow: visible;
  margin-block-start: 0.05em;
  color: var(--color-primary);
}

.dialog__mikro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-muted);
}

/* --- volby cookies s přepínačem ------------------------------------------ */
.volby {
  display: grid;
  gap: var(--space-2);
}

.volba {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-background);
  cursor: pointer;
}

.volba__popis {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.volba__popis strong {
  display: block;
  font-size: 1rem;
  color: var(--color-text);
}

.volba__prepinac {
  appearance: none;
  position: relative;
  inline-size: 2.75rem;
  block-size: 1.5rem;
  margin: 0.125rem 0 0;
  border-radius: 999px;
  background: var(--color-border);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.volba__prepinac::after {
  content: '';
  position: absolute;
  inset-block-start: 0.1875rem;
  inset-inline-start: 0.1875rem;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.volba__prepinac:checked { background: var(--color-primary); }
.volba__prepinac:checked::after { transform: translateX(1.25rem); }
.volba__prepinac:disabled { opacity: 0.6; cursor: not-allowed; }
.volba__prepinac:focus-visible { outline: 0.1875rem solid var(--color-focus); outline-offset: 0.125rem; }

/* --- segmentová volba (období, bonus) ------------------------------------ */
.segment {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.segment[hidden] { display: none; }

.segment__otazka {
  margin-bottom: var(--space-2);
  padding: 0;
  font-weight: 700;
}

.segment__volba {
  position: relative;
  display: block;
  cursor: pointer;
}

.segment__volba input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.segment__text {
  display: block;
  padding: var(--space-3) var(--space-4) var(--space-3) 3rem;
  border-radius: var(--radius-md);
  border: 0.125rem solid var(--color-border);
  background: var(--color-surface);
  font-weight: 600;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* volba jedné z možností = kolečko (jako kolecko-vyberu v nabídce), ne čtvereček */
.segment__text::before {
  content: '';
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: 1.05rem;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.125rem var(--color-border);
  background: var(--color-surface);
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.segment__text small {
  display: block;
  margin-top: 0.125rem;
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-muted);
}

.segment__volba:hover .segment__text { border-color: var(--color-accent); }
.segment__volba:hover .segment__text::before { box-shadow: inset 0 0 0 0.125rem var(--color-accent); }

.segment__volba input:checked + .segment__text {
  border-color: var(--color-accent);
  background: color-mix(in oklab, var(--color-accent) 7%, var(--color-surface));
}

/* vybraná: kolečko nahradí značka Cenotvoru v oranžové – jako zvolená varianta
   v Cenotvořím vzhledu nabídky (kolecko-vyberu + fajfka-vyberu se znakem) */
.segment__volba input:checked + .segment__text::before {
  border-radius: 0;
  box-shadow: none;
  background: var(--color-accent);
  -webkit-mask: url('/znacka/znak.svg?v=ec8235de83') center / contain no-repeat;
  mask: url('/znacka/znak.svg?v=ec8235de83') center / contain no-repeat;
}

.segment__volba input:focus-visible + .segment__text {
  outline: 0.1875rem solid var(--color-focus);
  outline-offset: 0.125rem;
}

.stitek--sleva {
  display: inline-block;
  margin-inline-start: var(--space-1);
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  background: var(--color-accent-strong);
  color: var(--color-on-accent);
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  vertical-align: 0.1em;
}

/* u Ultratvoru roční platba nabízí slevu NEBO vlastní vzhled – oba štítky
   s malým „nebo" mezi nimi, ať je jasné, že se bude vybírat jedno z dvou */
.segment__stitky { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.375rem; margin-inline-start: var(--space-1); vertical-align: 0.1em; }
.segment__stitky .stitek--sleva { margin: 0; vertical-align: baseline; }
.segment__nebo { font-size: 0.875rem; font-weight: 600; font-style: italic; color: var(--color-muted); }
.segment__nebo[hidden],
.stitek--vzhled[hidden] { display: none; }

.stitek--vzhled {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  /* petrolejový, ať okno vedle oranžové slevy a tlačítka není přeoranžované */
  box-shadow: inset 0 0 0 0.125rem var(--color-primary);
  color: var(--color-primary-dark);
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
}

/* --- pomocné ------------------------------------------------------------- */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-lista,
  .dialog[open],
  .dialog[open]::backdrop { animation: none; }
}

}