/* ============================================================
   NASTAVITELNÉ HODNOTY — barvy, rozestupy, rozměry. Stejný princip
   jako nahoře v config.php: tohle je to, co se dá bez obav ladit.
   Zbytek souboru pod tím jsou technická pravidla, ke kterým se
   běžně vracet nemusíte.
   ============================================================ */

:root {
  --field:    #a2a2a2;   /* plocha stránky */
  --field-up: #937A62;   /* hlavička */
  --ink:      #000000;
  --ink-mid:  #342b23;
  --rule:     #6d6b65;

  --row1: 48px;          /* logo + záložky */
  --head-h: 132px;       /* náhradní hodnota, skript ji přepočítá */

  --gap: 12px;
  --pad: 24px;
  --okraj: 20px;         /* prázdné sloupce po stranách mřížky */
  --max-w: 1200px;       /* největší šířka obsahu, vodorovně na střed */

  /* Nejužší přijatelná buňka horní lišty. Když by při daném počtu
     buněk vyšla užší, lišta se sama zalomí do dalšího řádku. */
  --lista-min: 105px;

  /* Průměr plochy, po které doznívá zář světla v dělící čáře.
     Jádro zůstává kolem 9 px, tohle je jen dosah halo.
     Rychlost pohybu se nastavuje v site.js (LASER_RYCHLOST). */
  --pole: 34px;

  /* Nejdelší řádek textu v buňce přes celý řádek. Přes zhruba
     75 znaků se čtenář na konci řádku ztrácí. */
  --text-max: 70ch;

  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* ============================================================
   Font Montserrat — vlastní hosting, žádný požadavek na cizí server.
   Soubory nejsou součástí zipu (jsou moc velké na to nosit je
   pořád dokola) — viz assets/fonts/README.txt pro stažení.
   font-display: swap => text je vidět hned v systémovém písmu,
   Montserrat se dotáhne a přepne, jakmile je stažený.
   ============================================================ */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/montserrat-400.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/montserrat-600.ttf') format('truetype');
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-top: var(--head-h);
  background: var(--field);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
}


/* ---------- Hlavička: vždy viditelná ---------- */

.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  background: var(--field-up);
  border-bottom: 1px dotted var(--rule);
}

.hdr-1 {
  height: var(--row1);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

.mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 0;
  padding: 0 4px;
  text-decoration: none;
  color: inherit;
}

.mark:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Výška je NATVRDO v pixelech (odvozená od --row1), ne procenty.
   Procenta by se musela spolehlivě přenést přes .mark (flex uvnitř
   grid buňky) až k obrázku — v praxi se to nechovalo spolehlivě
   a logo se vykreslilo ve své přirozené (velké) velikosti. */
.logo {
  display: block;
  height: calc(var(--row1) - 8px);
  max-width: 100%;
  width: auto;
  object-fit: contain;
}


/* ---------- Záložky ---------- */

.nav {
  grid-column: 2 / 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.nav-a {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-mid);
  padding: 5px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.nav-a:hover { color: var(--ink); }
.nav-a.is-on { color: var(--ink); border-bottom-color: var(--ink); }


/* ---------- Přepínač jazyka ----------
   Jedna klikací plocha pro obě vlaječky, ne dvě zvlášť — na
   dotykové obrazovce se snáz trefí do jednoho vyššího terče
   než do dvou úzkých vedle sebe. */

.jazyk {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 2px;
  text-decoration: none;
  flex: none;
}

.jaz {
  width: 20px;
  height: auto;
  display: block;
  opacity: 0.35;
  transition: opacity 0.15s;
}

.jaz.is-on { opacity: 1; }
.jazyk:hover .jaz { opacity: 0.7; }
.jazyk:hover .jaz.is-on { opacity: 1; }

.jazyk:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}


/* ---------- Druhý řádek: údaje z LISTA ----------
   Počet sloupců není nikde napsaný. `auto-fit` udělá jeden sloupec
   pro každou buňku, co v HTML skutečně je, a rozdělí šířku rovným
   dílem. Přidání nebo skrytí buňky v config.php se tak projeví
   samo — sem se kvůli tomu nesahá.

   Když by při daném počtu vyšly buňky užší než --lista-min,
   zalomí se do dalšího řádku (na mobilu typicky 2 + 2). Výška
   hlavičky se dopočítá sama, protože site.js ji měří. */

.hdr-2 {
  position: relative;   /* kotva pro světlo v čáře, viz níže */
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2px var(--pad) 3px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--lista-min), 1fr));
  align-items: stretch;
}


/* ---- Světlo projíždějící dělící čárou ----
   Jádro je malé (kolem 9 px), ale plocha, po které zář doznívá,
   je mnohem větší — bez toho nemá halo kam vyzařovat a končí
   ostrou hranou. Proto --pole: jádro zabírá jen vnitřních zhruba
   16 % poloměru, zbytek je plynulý doběh do nuly.

   Lišta záměrně NEMÁ overflow: hidden. Ořezávalo by zář nahoru
   a světlo by svítilo jen do boků.

   --sirka a --doba dopočítá site.js: rychlost je zadaná v pixelech
   za sekundu, takže se tečka pohybuje stejně rychle na monitoru
   i na telefonu. Na širší liště trvá cyklus déle, protože je
   delší cesta. */

.hdr-2::before {
  content: "";
  position: absolute;
  left: 0;
  width: var(--pole);
  height: var(--pole);
  top: calc(var(--pole) / -2);   /* střed přesně na čáře */
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
      rgba(255, 255, 255, 1.00)   0%,
      rgba(255, 255, 255, 0.98)   9%,
      rgba(255, 255, 255, 0.80)  15%,
      rgba(255, 255, 255, 0.52)  23%,
      rgba(255, 255, 255, 0.32)  32%,
      rgba(255, 255, 255, 0.19)  42%,
      rgba(255, 255, 255, 0.10)  54%,
      rgba(255, 255, 255, 0.05)  68%,
      rgba(255, 255, 255, 0.02)  83%,
      rgba(255, 255, 255, 0)    100%);
  animation: lista-svetlo var(--doba, 20s) linear infinite;
}

/* Dráha: dojede za prostřední buňku, couvne o její šířku, pak
   pokračuje na konec — a totéž zrcadlově zpátky. Podíly času
   odpovídají délkám úseků, takže rychlost je po celé dráze
   stejná, i při couvnutí.

   Posun začíná na -půl plochy a končí na šířce mínus půl plochy,
   aby jádro dojelo přesně na oba kraje čáry. */

@keyframes lista-svetlo {
  0%    { transform: translateX(calc(var(--pole) / -2)); }
  19.9% { transform: translateX(calc(var(--sirka, 100%) * 0.66 - var(--pole) / 2)); }
  29.8% { transform: translateX(calc(var(--sirka, 100%) * 0.33 - var(--pole) / 2)); }
  50%   { transform: translateX(calc(var(--sirka, 100%) - var(--pole) / 2)); }
  69.9% { transform: translateX(calc(var(--sirka, 100%) * 0.34 - var(--pole) / 2)); }
  79.8% { transform: translateX(calc(var(--sirka, 100%) * 0.67 - var(--pole) / 2)); }
  100%  { transform: translateX(calc(var(--pole) / -2)); }
}

.soc {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  padding: 4px 6px;
  background: none;
  border: 0;
  font-family: inherit;
  color: var(--ink-mid);
  text-decoration: none;
  text-align: center;
}

.soc-link, .soc-copy, .soc-mail { cursor: pointer; }
.soc-text { cursor: default; }

.soc-l {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.soc-v {
  font-size: 14px;
  color: var(--ink);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-link:hover .soc-v, .soc-copy:hover .soc-v { text-decoration: underline; }

.soc:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

/* ---- Pozvánka ke kliknutí na e-mailovou buňku ----
   Běží jen do prvního kliknutí; pak skript přidá třídu
   'je-odkryto' a animace se sama zastaví — bez řádku JavaScriptu
   navíc.

   Bílá má proti barvě lišty (#937A62) kontrast 4,04:1, kdežto
   černá 5,20:1. Bílá fáze proto dostává měkký tmavý stín, který
   tu ztrátu čitelnosti dorovná. */

@keyframes mail-pozvanka {
  0%, 100% { color: var(--ink); text-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  50%      { color: #ffffff;    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); }
}

.soc-mail:not(.je-odkryto) .soc-v {
  animation: mail-pozvanka 3s ease-in-out infinite;
}


/* Potvrzení zkopírování — překryje hodnotu na okamžik po kliknutí. */
.soc-hotovo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--field-up);
  color: var(--ink);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
}

.soc-copy.je-hotovo .soc-hotovo { opacity: 1; }


/* ---------- Třetí řádek: novinka ----------
   Výška vychází čistě z obsahu: řádek s textem má výšku řádku
   písma + odsazení; prázdný řádek se smrští, ale nezmizí úplně. */

.hdr-obor {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 4px var(--pad);
  border-top: 1px solid var(--rule);
}

.obor:empty { display: none; }

.obor {
  margin: 0;
  width: 100%;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-mid);
}

/* Delší zprávy: čitelný sloupec, který se zalomí na víc řádků
   místo dalšího zmenšování písma. */
.obor.obor-zalom {
  white-space: normal;
  overflow: visible;
  max-width: 60ch;
  margin: 0 auto;
}

.obor-sep {
  font-style: normal;
  color: var(--rule);
  padding: 0 1.4em;
}

.jen-pro-cteni {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}


/* ============================================================
   MŘÍŽKA

   Řádek má tři sloty, na jakékoliv šířce okna — nikdy se
   nerozpadá pod sebe. Buňka je čtverec. Fotka zabírá jeden slot,
   text se roztáhne přes ty, co za ním v řádku zbývají.

   POZOR: `repeat(3, 1fr)` níže musí souhlasit s konstantou SLOTU
   v config.php.
   ============================================================ */

.main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--pad);
}

/* Všechny řádky v jedné mřížce, aby svislé mezery byly přesně
   stejné jako vodorovné. */
.mriz {
  display: grid;
  gap: var(--gap);
}

/* Postranní sloupce jsou prázdné — zbyly po číslech řad, která se
   už nevypisují. Drží šířku, aby se obsah nerozlil do uvolněného
   místa a fotky nezvětšily. */
.rada-obal {
  display: grid;
  grid-template-columns: var(--okraj) 1fr var(--okraj);
  column-gap: 10px;
  align-items: center;
}

/* align-items: center = buňky si drží vlastní výšku (fotka zůstane
   čtvercem) a výšku řádku určí ta vyšší z nich — v praxi text,
   jakmile se přestane vejít do výšky čtverce. */
.rada {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  align-items: center;
}

/* Umístění buňky. Třídy místo inline stylu — ten by zablokovala
   hlavička Content-Security-Policy v .htaccess. */
.p1 { grid-column-start: 1; }
.p2 { grid-column-start: 2; }
.p3 { grid-column-start: 3; }

.s1 { grid-column-end: span 1; }
.s2 { grid-column-end: span 2; }
.s3 { grid-column-end: span 3; }


/* ---------- Fotka ---------- */

.dlazdice {
  margin: 0;
  position: relative;
  aspect-ratio: 1 / 1;
  /* Průhledné, ne šedé — obrázek s průhledným pozadím tak splyne
     s plochou stránky místo aby seděl na šedém čtverci. */
  background: transparent;
  overflow: hidden;
  cursor: zoom-in;
}

.dlazdice img,
.dlazdice video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* Klik zachytává obal .dlazdice, ne samotný obrázek. */
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Video se nezvětšuje ani neotevírá — kurzor to má napovědět. */
.dlazdice.je-video { cursor: default; }

/* Zvětšená fotka — position:fixed, takže nescrolluje stránku pod
   sebou. Klik kamkoliv (i na samotný obrázek) zavře. */
.zvetseni {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.85);
  cursor: zoom-out;
}

.zvetseni img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


/* ---------- Textová buňka ----------
   Svisle na střed, vodorovně doleva s malým odstupem od kraje.
   O zalomení uvnitř rozhoduje HTML v .txt souboru. */

.text-bunka {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 18px 22px;
  color: var(--ink-mid);
  font-size: 14px;
  line-height: 1.6;
}

.text-bunka > *:first-child { margin-top: 0; }
.text-bunka > *:last-child  { margin-bottom: 0; }

.text-bunka p  { margin: 0 0 0.7em; }
.text-bunka b, .text-bunka strong { color: var(--ink); font-weight: 600; }
.text-bunka ul, .text-bunka ol { margin: 0 0 0.7em; padding-left: 1.1em; }
.text-bunka li { margin-bottom: 0.35em; }
.text-bunka a { color: var(--ink); }

.text-bunka h2, .text-bunka h3 {
  margin: 0 0 0.6em;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Vycentrování jednotlivého odstavce nebo nadpisu uvnitř textové
   buňky: <p class="stred">…</p>

   align-self: stretch tu není navíc. Textová buňka je svislý
   flexbox zarovnaný doleva, takže odstavec je široký jako jeho
   text, ne jako buňka — a text-align by v takové schránce neměl
   co posouvat. Až roztažením na plnou šířku dostane centrování
   smysl. */
.text-bunka .stred {
  align-self: stretch;
  text-align: center;
}


/* Na seznamu znamená "stred" něco jiného než na odstavci: řádky
   zůstanou vlevo (odrážky pod sebou) a vycentruje se celý blok.
   Píše se stejná třída, chování si najde samo podle značky.

   width: fit-content zúží seznam na jeho nejdelší položku —
   bez toho by zabral celou šířku a nebylo by co centrovat.
   Pak už stačí align-self (uvnitř buňky, což je flexbox) nebo
   margin auto (v textu přes celý řádek, kde je běžný tok). */
.text-bunka ul.stred,
.text-bunka ol.stred {
  align-self: center;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: left;
}


/* Text přes celý řádek. Šířka řádku by dala kolem 130 znaků na
   řádek (dvojnásobek pohodlné meze), proto se obsah uvnitř omezí
   a posadí na střed vodorovně i svisle. Zarovnání doleva uvnitř
   zůstává, aby měly odrážky i odstavce společnou levou hranu. */
.text-cely {
  align-items: center;
  padding: 34px 22px;
}

.text-cely .uvnitr {
  max-width: var(--text-max);
  width: 100%;
}

.text-cely .uvnitr > *:first-child { margin-top: 0; }
.text-cely .uvnitr > *:last-child  { margin-bottom: 0; }


/* ---------- Prázdný stav ---------- */

.prazdno { max-width: 52ch; padding: 56px 0; color: var(--ink-mid); }
.prazdno-h { color: var(--ink); font-weight: 600; margin-bottom: 18px; }
.prazdno p { margin: 0 0 10px; }

.prazdno code, .kontakt code {
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 5px;
  font-size: 0.9em;
}


/* ---------- Kontakt ----------
   Řádky jsou vodorovně na střed a popisek stojí na vlastním řádku
   nad hodnotou. Sloupcové zarovnání (popisek vlevo, hodnota vpravo)
   by při vycentrování stránky vypadalo rozházeně. */

.kontakt {
  max-width: 62ch;
  margin: 0 auto;
  padding: 40px 0 20px;
  text-align: center;
}

.k-jmeno {
  margin: 0 0 22px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.k-radek {
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}

.k-radek:first-of-type { border-top: 0; }

/* Prázdný řádek ('mezera') jen přidá vzduch. Vlastní čáru nemá —
   měl by ji hned pod sebou zdvojenou tou z následujícího řádku. */
.k-radek:empty { padding: 9px 0; border-top: 0; }

.k-label {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

.k-hodnota { min-width: 0; }

.k-pozn {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--ink-mid);
}

.k-zprava { color: var(--ink-mid); }

.mail-btn {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--field-up);
  border: 1px solid var(--rule);
  padding: 6px 12px;
  cursor: pointer;
}

.mail-btn:hover { border-color: var(--ink); }


/* ---------- Patička ---------- */

.ftr {
  max-width: var(--max-w);
  margin: 20px auto 0;
  padding: 28px var(--pad) 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-mid);
}

/* Delší právní věta se nesmí zalomit — místo toho se sama
   zmenší, aby patička měla vždy jen dva řádky. */
.ftr-legal {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ---------- Užší okna ----------
   Trojice slotů zůstává. Textová buňka získává šířku hlavně tím,
   že se zmenší její vlastní odsazení. */

@media (max-width: 700px) {
  .text-bunka { padding: 12px 14px; font-size: 13px; line-height: 1.5; }
  .text-bunka ul, .text-bunka ol { padding-left: 0.95em; }
  .text-bunka h2, .text-bunka h3 { font-size: 10px; letter-spacing: 0.10em; }
  .text-cely { padding: 24px 16px; }
}

@media (max-width: 560px) {
  :root { --pad: 12px; --gap: 6px; --okraj: 13px; --row1: 44px; --lista-min: 92px; }
  .nav { gap: 11px; }
  .nav-a { font-size: 10px; letter-spacing: 0.10em; }
  .jaz { width: 17px; }
  .soc { padding: 3px 4px; }
  .soc-l { font-size: 9px; }
  .soc-v { font-size: 12px; }
  .soc-hotovo { font-size: 12px; }
  .obor-sep { padding: 0 0.9em; }
  .text-bunka { padding: 10px 11px; font-size: 12px; }
  .k-jmeno { font-size: 19px; margin-bottom: 16px; }
}


/* ---------- Velmi úzké displeje ---------- */

@media (max-width: 360px) {
  :root { --row1: 42px; --lista-min: 84px; }
  .nav { gap: 8px; }
  .nav-a { font-size: 9px; letter-spacing: 0.08em; }
  .jaz { width: 16px; }
}


/* ---------- Nízké, ale široké obrazovky (notebooky) ----------
   Na šířku by se buňky vešly velké, ale na výšku pak není vidět
   skoro nic bez scrollování. --max-w se tu zmenší, aby bylo vidět
   víc řádků. 78vh je odhadnutá konstanta převzatá z předlohy, ne
   změřená v prohlížeči — může být potřeba doladit.

   Portrait: tohle pravidlo se nespustí a --max-w zůstane na
   základních 1200px. */
@media (orientation: landscape) and (min-width: 700px) {
  :root { --max-w: clamp(400px, 78vh, 1200px); }
}


/* ---------- Velké obrazovky ----------
   Mobil je navržený jako výchozí velikost; tady se čitelnost
   zvětší pro stůl. Novinkový řádek a patička mají svůj strop
   v JS (OBOR_MAX, FTR_MAX) — ten se mění tam, ne tady. */

@media (min-width: 900px) {
  :root { --row1: 58px; --lista-min: 130px; }

  body { font-size: 18px; }

  .nav { gap: 28px; }
  .nav-a { font-size: 15px; letter-spacing: 0.10em; }
  .jaz { width: 28px; }

  .soc-l { font-size: 13px; }
  .soc-v { font-size: 17px; }
  .soc-hotovo { font-size: 17px; }

  .text-bunka { font-size: 16px; }

  .k-jmeno { font-size: 32px; margin-bottom: 30px; }
  .k-label { font-size: 13px; }
  .mail-btn { font-size: 15px; padding: 9px 16px; }

  .ftr { font-size: 13px; }
}


/* Hlavička reaguje i na NÍZKÉ okno, nezávisle na šířce — na
   telefonu na šířku (široký, ale nízký) by jinak dostala plnou
   velikost a spolu s mřížkou by nezbylo skoro nic. Schválně je
   to na konci souboru, ať to vyhraje i nad pravidlem pro širokou
   obrazovku výš. */
@media (max-height: 450px) {
  :root { --row1: 40px; }

  .soc-l { font-size: 8px; }
  .soc-v { font-size: 10px; }
  .soc-hotovo { font-size: 10px; }
  .nav-a { font-size: 10px; }
  .jaz { width: 16px; }
}


/* Kdo si v systému vypnul animace, ať je nedostane ani tady.
   Týká se to jen přechodů. Video v mřížce i pozvánka na e-mailové
   buňce běží záměrně všem — u videa je pohyb obsah, u pozvánky
   jde o slabý efekt bez posunu čehokoliv po stránce. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}