/* Jiří Ďoubek, web: styly nového vzhledu (od 15. 10. 2026, úvodní stránky všech pěti jazyků).
   Podstránky (zásady ve všech jazycích a 404.html) dál používají assets/styles.css.
   Čisté CSS bez závislostí. Jen světlý režim (úvod, blok hovoru a kontakt jsou tmavé plochy,
   ne tmavý režim). Styly cílí na třídy, protože editor webu obaluje texty do <span>.
   Zdroj: _redesign-2026-10/navrh/a-tmavy-uvod/styles.css (návrh); po 15. 10. 2026 se upravuje jen tento soubor
   a při změně se zvedá verze ?v= ve všech pěti úvodních stránkách. */

/* ============================================================
   0. PÍSMO
   Schibsted Grotesk, variabilní písmo (řezy 400 až 900), licence SIL OFL 1.1 (viz OFL.txt ve složce pisma/).
   Soubory jsou uložené na vlastním webu ve složce assets/fonts/, z Google Fonts se nic nenačítá.
   Cesty jsou relativní k tomuto souboru. Oba soubory se přednačítají v hlavičce stránky.
   ============================================================ */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Azbuka pro ukrajinskou verzi (14. 10. 2026): Schibsted Grotesk ji nemá. Doplňuje ji Inter Tight (variabilní písmo,
   licence SIL OFL 1.1, z Google Fonts jen podmnožina „cyrillic“, 17 kB) pod stejným názvem rodiny a jen pro znaky
   azbuky (unicode-range podle Google Fonts). Latinka i čísla zůstávají ve Schibsted Grotesk, ostatní jazyky se
   nemění a soubor si prohlížeč stáhne jen na stránce, kde azbuka je. */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/inter-tight-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Záložní písmo pro chvíli, než se Schibsted Grotesk načte: systémové písmo roztažené na stejnou
   šířku textu, aby se po výměně písma nezměnilo zalomení řádků a tlačítko úvodu neposkočilo.
   Poměry šířek jsou změřené v Chrome na macOS proti Helvetica Neue (400: 1,03, 600 až 700: 1,005,
   800: 1,04). Pro Roboto (Android) jsou to odhady, ověřit na telefonu. */
@font-face {
  font-family: "Schibsted Grotesk Zaloha";
  font-weight: 400 500;
  src: local("Helvetica Neue"), local("Arial"), local("Roboto");
  size-adjust: 103%;
}
@font-face {
  font-family: "Schibsted Grotesk Zaloha";
  font-weight: 600 700;
  src: local("Helvetica Neue Bold"), local("Arial Bold"), local("Roboto Bold");
  size-adjust: 100.5%;
}
@font-face {
  font-family: "Schibsted Grotesk Zaloha";
  font-weight: 800 900;
  src: local("Helvetica Neue Bold"), local("Arial Bold"), local("Roboto Bold");
  size-adjust: 104%;
}

/* ============================================================
   1. HODNOTY
   ============================================================ */
:root {
  color-scheme: light;

  /* Barvy: světlá stránka */
  --b-stranka: #FFFFFF;
  --b-plocha: #F2F3F8;
  --b-text: #14162B;
  --b-text-2: #474B63;
  --b-linka: #D9DBE6;
  --b-linka-silna: #7E829E;
  --b-odkaz: #2A3180;
  --b-jantar: #E8A33A;
  --b-jantar-svetly: #F1B95C;
  --b-chyba: #A3271C;

  /* Barvy: tmavý pruh. Jedna plná barva změřená z levého okraje studiových fotek, bez přechodu. */
  --b-tma: #1C1D39;
  --b-tma-dno: #13111F;
  --b-na-tme: #FFFFFF;
  --b-na-tme-2: #C9CBDF;
  --b-linka-tma: rgba(255, 255, 255, .2);
  --b-linka-tma-slaba: rgba(255, 255, 255, .1);
  --b-obrys-tma: rgba(255, 255, 255, .5);
  --b-najeti-tma: rgba(255, 255, 255, .08);
  --b-chyba-tma: #FFB4A8;

  /* Pomocné hodnoty */
  --b-tisk: #000000;
  --stin-menu: 0 1.25rem 2rem -1rem rgba(20, 22, 43, .35); /* jen pod rozbaleným menu, které překrývá stránku */

  /* Písmo */
  --pismo: "Schibsted Grotesk", "Schibsted Grotesk Zaloha", "Helvetica Neue", Arial, sans-serif;
  --v-h1: clamp(min(1.875rem, max(1.6875rem, 7.7vw)), 4.05vw, 3.5rem); /* 30 až 56 px, pod 390 px šířky 27 až 30 px (nadpis drží čtyři řádky). Od 1100 px ho úvod omezuje šířkou sloupce vedle postavy (oddíl 5) */
  --v-h2: clamp(1.625rem, 1.25rem + 1.5vw, 2.25rem); /* 26 až 36 px */
  --v-h3: 1.25rem;                                   /* 20 px */
  --v-cena: 1.625rem;                                /* 26 px: cena je výraznější než název nabídky (20 px) */
  --v-uvod: clamp(1.0625rem, 1rem + .35vw, 1.25rem); /* 17 až 20 px */
  --v-text: 1.0625rem;                               /* 17 px */
  --v-maly: .9375rem;                                /* 15 px */
  --radek: 1.6;
  --radek-nadpis: 1.12;
  --prostrkani-nadpis: -0.02em;

  /* Mezery */
  --m-1: .25rem;
  --m-2: .5rem;
  --m-3: .75rem;
  --m-4: 1rem;
  --m-5: 1.5rem;
  --m-6: 2rem;
  --m-7: 3rem;
  --m-8: 4rem;
  --m-9: 6rem;
  --m-10: 8rem;

  /* Rozměry */
  --okraj: 1.25rem;
  --sirka: 75rem;
  --sirka-textu: 36rem;      /* souvislý text 17 px: 65 až 75 znaků na řádek */
  --sirka-textu-maly: 30rem; /* totéž pro text 15 px */
  --hlavicka: 3.75rem;
  --cil: 2.75rem;            /* nejmenší dotykový cíl, 44 px */
  --cena-od: 1.625rem;       /* sloupec slova „od“ před částkou (počítač); částka začíná hned za ním */
  --cena-sloupec: 14.5rem;   /* pravý sloupec ceníku s cenou, podmínkami a odkazem (počítač) */
  --akce-sirka: 10.5rem;     /* místo pro odkaz vedle popisku „Co je v ceně“ (telefon); delší jazyky níže */
  --r: 6px;                  /* zaoblení jen u tlačítek a polí */
  --prechod: .15s ease;
}

@media (min-width: 43.75em) {
  :root { --okraj: 2rem; }
}
/* Hranice rozvržení jsou v jednotkách em (1em = 16 px při běžném nastavení), aby se řídily
   i velikostí písma nastavenou v prohlížeči: 38.75em = 620 px, 43.75em = 700 px, 53.75em = 860 px,
   62.5em = 1000 px, 75em = 1200 px. */
@media (min-width: 75em) {
  :root { --hlavicka: 4.25rem; --cena-sloupec: 16.5rem; }
}
/* Cizí jazyky: delší zápis částky („30.000 CZK/Monat“) a delší text odkazu u nabídky.
   Česká stránka se tím nemění. Hodnoty ověřit na skutečných překladech. */
:root:lang(de), :root:lang(pl) { --akce-sirka: 13rem; }
@media (min-width: 62.5em) {
  :root:lang(de), :root:lang(en), :root:lang(pl), :root:lang(uk) { --cena-sloupec: 16.5rem; }
}

/* ============================================================
   2. ZÁKLAD
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hlavicka) + 1.25rem);   /* jediné odsazení kotev pod lepivou hlavičku */
}

body {
  margin: 0;
  font-family: var(--pismo);
  font-size: var(--v-text);
  font-weight: 400;
  line-height: var(--radek);
  color: var(--b-text);
  background: var(--b-stranka);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: var(--radek-nadpis);
  letter-spacing: var(--prostrkani-nadpis);
  text-wrap: balance;
}
h2 { font-size: var(--v-h2); }
h3 { font-size: var(--v-h3); line-height: 1.25; }

p, figure, dl, dd { margin: 0; }
p { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
strong { font-weight: 700; }
button, input, select, textarea { font: inherit; color: inherit; }

a {
  color: var(--b-odkaz);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--b-odkaz);
  outline-offset: 2px;
  border-radius: 2px;
}
.na-tme :focus-visible { outline-color: var(--b-jantar); }

.container {
  width: min(100% - 2 * var(--okraj), var(--sirka));
  margin-inline: auto;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--m-4);
  top: -6rem;
  z-index: 100;
  max-width: calc(100% - 2 * var(--m-4));
  padding: var(--m-3) var(--m-4);
  background: var(--b-jantar);
  color: var(--b-text);
  font-weight: 600;
  border-radius: var(--r);
}
.skip-link:focus { top: var(--m-3); }

/* ============================================================
   3. TLAČÍTKA A ODKAZY
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cil);
  padding: .5rem 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: var(--v-text);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--prechod), border-color var(--prechod), color var(--prechod);
}

/* Jantarová výplň patří jen hlavní výzvě úvodu a odeslání formuláře. */
.btn-primary {
  background: var(--b-jantar);
  border-color: var(--b-jantar);
  color: var(--b-text);
}
.btn-primary:hover { background: var(--b-jantar-svetly); border-color: var(--b-jantar-svetly); }

.btn-lg {
  min-height: 3.25rem;
  padding: .75rem 1.5rem;
}

.btn-outline {
  border-color: var(--b-odkaz);
  color: var(--b-odkaz);
  background: transparent;
}
.btn-outline:hover { background: var(--b-odkaz); color: var(--b-na-tme); }

.odkaz { font-weight: 600; }

/* ============================================================
   4. HLAVIČKA
   Nad úvodem je tmavá (stejná plná barva jako pruh úvodu). Jakmile úvod odroluje,
   přidá web.js třídu .posunuto a hlavička je světlá s tmavým tlačítkem.
   Bez JavaScriptu zůstává tmavá a neleze se stránkou.
   ============================================================ */
.site-header {
  --h-plocha: var(--b-tma);
  --h-text: var(--b-na-tme);
  --h-text-2: var(--b-na-tme-2);
  --h-linka: var(--b-linka-tma);
  --h-linka-slaba: var(--b-linka-tma-slaba);
  --h-fokus: var(--b-jantar);
  --h-aktivni: var(--b-jantar);
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--h-plocha);
  color: var(--h-text);
  border-bottom: 1px solid transparent;
}
.site-header.posunuto {
  --h-plocha: var(--b-stranka);
  --h-text: var(--b-text);
  --h-text-2: var(--b-text-2);
  --h-linka: var(--b-linka);
  --h-linka-slaba: var(--b-linka);
  --h-fokus: var(--b-odkaz);
  --h-aktivni: var(--b-text);
  border-bottom-color: var(--b-linka);
}
html:not(.js) .site-header { position: static; }
.site-header :focus-visible { outline-color: var(--h-fokus); }

.nav-wrap {
  display: flex;
  align-items: center;
  gap: var(--m-3);
  min-height: var(--hlavicka);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--cil);
  margin-right: auto;
  color: var(--h-text);
  font-size: var(--v-text);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.nav-links a {
  display: flex;
  align-items: center;
  min-height: var(--cil);
  color: var(--h-text-2);
  font-size: var(--v-maly);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--h-text); }
.nav-links a.active {
  color: var(--h-text);
  text-decoration: underline;
  text-decoration-color: var(--h-aktivni);
  text-decoration-thickness: 2px;
  text-underline-offset: .45em;
}

.lang-switch { display: flex; align-items: center; }
.lang-flag { display: none; }
.lang-current,
.lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cil);
  min-height: var(--cil);
  font-size: var(--v-maly);
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--h-text-2);
}
.lang-current { color: var(--h-text); font-weight: 700; }
.lang-link:hover { color: var(--h-text); text-decoration: underline; }

/* Výzva v hlavičce: nad úvodem obrysová, po odrolování úvodu tmavá s bílým textem.
   Stav se mění naráz spolu s hlavičkou, proto bez přechodu. */
.nav-cta {
  transition: none;
  border-color: var(--b-obrys-tma);
  color: var(--h-text);
  font-size: var(--v-maly);
  white-space: nowrap;
}
.nav-cta:hover { border-color: var(--b-na-tme); background: var(--b-najeti-tma); }
.site-header.posunuto .nav-cta {
  background: var(--b-tma);
  border-color: var(--b-tma);
  color: var(--b-na-tme);
}
.site-header.posunuto .nav-cta:hover { background: var(--b-odkaz); border-color: var(--b-odkaz); }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: var(--cil);
  height: var(--cil);
  margin-right: -.625rem;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 1.375rem;
  height: 2px;
  background: var(--h-text);
  transition: transform var(--prechod), opacity var(--prechod);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Úzká obrazovka: jméno, výzva a tlačítko menu. Navigace a jazyky jsou v menu.
   Hranice je 1200 px: s položkou „Certifikace a ocenění“ (150 px) se řádkové menu s jazyky a výzvou
   do užšího okna nevejde (při 1120 px přesahovala výzva okraj obsahu o 45 px). */
@media (max-width: 74.9375em) {
  .nav-wrap {
    flex-wrap: wrap;
    min-height: 0;
    padding-block: calc((var(--hlavicka) - var(--cil)) / 2);
  }
  .nav-cta { padding-inline: .875rem; }

  /* Bez JavaScriptu: řádkové menu pod jménem, položky se zalamují, bez linek. */
  .nav-menu {
    order: 10;
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--m-4);
  }
  .nav-links { display: contents; }   /* položky a jazyky sdílejí řádky, hlavička má dva řádky navíc */
  html:not(.js) .nav-toggle { display: none; }

  /* S JavaScriptem: menu je sbalené a otevírá se jako překryv, stránku neodsouvá. */
  html.js .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--hlavicka));
    max-height: calc(100dvh - var(--hlavicka));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--m-2) var(--okraj) var(--m-5);
    background: var(--h-plocha);
    border-top: 1px solid var(--h-linka);
    border-bottom: 1px solid var(--h-linka);
    box-shadow: var(--stin-menu);
  }
  html.js .nav-menu.open { display: block; }
  html.js .nav-links { display: block; }
  html.js .nav-links a {
    min-height: 3rem;
    font-size: var(--v-text);
    border-bottom: 1px solid var(--h-linka-slaba);
  }
  html.js .lang-switch { margin-top: var(--m-4); margin-left: -.75rem; gap: var(--m-1); }
}

@media (max-width: 24em) {
  .nav-wrap { gap: var(--m-2); }
  .nav-cta { padding-inline: .5rem; }
}
/* Do 356 px šířky se výzva zalomí na dva řádky, aby se jméno, výzva a tlačítko menu vešly vedle sebe. */
@media (max-width: 22.25em) {
  .brand { font-size: var(--v-maly); }
  .nav-cta { max-width: 7.25rem; white-space: normal; line-height: 1.15; }
}
/* Hodně zvětšené písmo na úzké obrazovce: hlavička je vysoká, proto se nelepí k hornímu okraji.
   Zůstává ale kotvou pro rozbalené menu (position: relative), jinak by se menu otevřelo až pod úvodem. */
@media (max-width: 18em) {
  .site-header { position: relative; }
}

@media (min-width: 75em) {
  .nav-toggle { display: none; }
  .brand { margin-right: var(--m-6); }
  .nav-menu { display: flex; align-items: center; flex: 1; gap: var(--m-5); }
  .nav-links { display: flex; gap: var(--m-5); }
  .lang-switch { margin-left: auto; }
  .nav-cta { margin-left: var(--m-3); }
}

/* ============================================================
   5. ÚVOD: tmavý pruh s portrétem
   Klidný úvod „Menší postava“ (rozhodnutí Jiřího z 11. 10. 2026): pod tlačítkem už nic není a text je nižší než postava.
   Prvek .hero má v index.html třídu .uvod-klidny natrvalo: rozvržení a fotku určují pravidla
   .hero.uvod-klidny, texty obecná pravidla .hero-*.
   Telefon (do 739 px): busta (hlava a celá ramena) vpravo nahoře, vlevo od ní jméno a role
   svisle na střed busty, pod nimi nadpis a text.
   Od 740 px šířky: dva sloupce. Vlevo celý text (role, nadpis, odstavec, tlačítko s odkazem),
   vpravo postava po pás, která stojí na spodní hraně pruhu. Postava má pevnou velikost danou
   šířkou sloupce (208 až 250 px), na množství textu nezávisí. Výšku pruhu určuje vyšší z obou sloupců.
   Od 1000 px stojí postava nad čtvrtým sloupcem řádku faktů („Profil“). Od 1100 px se písmo nadpisu
   počítá ze šířky levého sloupce, aby nadpis zůstal na dvou řádcích; v užším okně má tři řádky.
   Hranice 740 px (46.25em): od ní se vedle sloupce postavy vejde tlačítko s odkazem na jeden řádek.
   Stejnou hranici má prvek <source media> u fotky v index.html.
   Soubory: assets/img/uvod-klidny/, vyrábí _redesign-2026-10/navrh/a-tmavy-uvod/_nastroje/fotka_uvod.py. Postava 512 : 703, busta 300 : 318.
   Průhlednost má fotka přímo v souboru, ve stylech není žádná maska.
   Starší stavby jsou v gitu: velké úvody třetí verze (commit 54ef150), klidný úvod čtvrté verze
   s nadpisem přes celou šířku a postavou vysokou podle textu (commit 64fa1f2).
   ============================================================ */
.na-tme { color: var(--b-na-tme); }
.na-tme a:not(.btn) { color: var(--b-na-tme); }

.hero {
  overflow: hidden;
  background: var(--b-tma);
}

.hero-kdo {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .625rem;
  font-size: var(--v-text);
  line-height: 1.4;
}
/* Jméno má střední řez (tučně je v hlavičce), na telefonu vedle busty je o stupeň silnější (níže). */
.hero-jmeno { font-weight: 500; }
.hero-role { color: var(--b-na-tme-2); }

.hero-title {
  margin-top: var(--m-4);
  font-size: var(--v-h1);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: var(--prostrkani-nadpis);
  text-wrap: balance;
}
.hero-veta { display: block; }

.lead {
  margin-top: var(--m-5);
  max-width: 40rem;
  font-size: var(--v-uvod);
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--m-3) var(--m-5);
  margin-top: var(--m-6);
}
.hero-odkaz {
  display: inline-flex;
  align-items: center;
  min-height: var(--cil);
  font-weight: 600;
}

.hero.uvod-klidny {
  /* Tablet: sloupec postavy 208 až 240 px. Textu vedle něj zůstane aspoň 444 px, aby se tlačítko
     a odkaz „Služby a ceník“ vešly vedle sebe (potřebují 441 px). */
  --uk-sloupec: clamp(13rem, 100% - 29.25rem, 15rem);
  /* Největší šířka postavy: 250 px (výška 343 px, hlava 113 px). Postava vyplní šířku svého sloupce
     až po tuto mez, výšku má z poměru stran souboru. Od množství textu vedle ní se neodvíjí. */
  --uk-postava: 15.625rem;
  --uk-nad: var(--m-5);      /* nejmenší mezera mezi horní hranou pruhu a horním okrajem fotky */
  /* Postava stojí za spodní hranou pruhu a ta ji rovně řízne: soubor přesahuje hranu o 1 px, přesah
     ořízne overflow pruhu. Žádný tmavý proužek pod postavou ani přechod do ztracena. Košile je
     v souboru ztlumená, s bílým řádkem faktů pod pruhem nesplyne. */
  --uk-pata: -1px;
  /* Odsazení textu od horní a spodní hrany pruhu: 3rem, do šířky 1099 px a v nízkém okně 2rem. */
  --uk-odsazeni: var(--m-7);
  /* Telefon: šířka busty 126 px (okno 320 px) až 152 px, na 390 px je to 140 px (hlava 72 px).
     Strop 40vw drží bustu malou i při hodně zvětšeném písmu. Výška je 1,06 šířky (soubor 300 : 318). */
  --uk-busta: min(clamp(7.875rem, 20vw + 3.875rem, 9.5rem), 40vw);
  --uk-busta-vyska: calc(var(--uk-busta) * 1.06);
}
/* Úvodní odstavec nejvýš 65 znaků na řádek i při menším písmu (jazykové verze). */
.hero.uvod-klidny .lead { max-width: min(40rem, 32em); }

/* Telefon (do 739 px): busta vpravo nahoře, vlevo od ní jméno a role svisle na střed busty, pod nimi
   nadpis a text ve sloupci. Busta má vlastní soubor, spodek se do barvy pruhu ztrácí přímo v souboru. */
@media (max-width: 46.1875em) {
  .hero-inner {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--m-7);
  }
  .hero-title { margin-top: var(--m-2); }
  .lead { margin-top: var(--m-3); }
  .hero-actions { margin-top: var(--m-4); }
  .hero.uvod-klidny .hero-inner { position: relative; }
  .hero.uvod-klidny .hero-foto {
    position: absolute;
    top: var(--m-2);
    right: 0;
    width: var(--uk-busta);
    height: var(--uk-busta-vyska);
  }
  .hero.uvod-klidny .hero-foto picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .hero.uvod-klidny .hero-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .hero.uvod-klidny .hero-kdo {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    gap: .125rem;
    min-height: calc(var(--uk-busta-vyska) + var(--m-2));
    padding-top: var(--m-2);
    padding-right: calc(var(--uk-busta) + var(--m-3));
  }
  .hero.uvod-klidny .hero-jmeno { font-weight: 600; }
  .hero.uvod-klidny .hero-role { font-size: var(--v-maly); text-wrap: balance; }
}
/* Hodně zvětšené písmo na telefonu (okno užší než 20em, tedy 320 px při běžném písmu): vedle busty
   už není na jméno a roli místo, busta proto stojí nad nimi a řádek se jménem má celou šířku. */
@media (max-width: 19.9375em) {
  .hero.uvod-klidny .hero-foto {
    position: static;
    order: -1;
    margin-top: var(--m-2);
  }
  .hero.uvod-klidny .hero-kdo {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 .625rem;
    min-height: 0;
    padding-top: 0;
    padding-right: 0;
  }
}

/* Od 740 px: dva sloupce, vlevo text, vpravo postava. Pořadí v kódu se nemění.
   Postava je běžná buňka mřížky s pevnou šířkou a výškou z poměru stran (512 : 703), takže místo
   pro ni je známé ještě před načtením souboru a pruh při načítání neposkočí. Stojí na spodní hraně
   pruhu. Když je text nižší než postava, je svisle na střed a pruh je vysoký podle postavy. */
@media (min-width: 46.25em) {
  .hero.uvod-klidny .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--uk-sloupec);
    column-gap: var(--m-5);
  }
  .hero.uvod-klidny .hero-text {
    align-self: center;
    padding-block: var(--uk-odsazeni);
  }
  .hero.uvod-klidny .hero-foto {
    align-self: end;
    justify-self: center;
    width: min(100%, var(--uk-postava));
    margin-top: var(--uk-nad);
    margin-bottom: var(--uk-pata);
  }
  .hero.uvod-klidny .hero-foto picture { display: block; }
  .hero.uvod-klidny .hero-foto img {
    width: 100%;
    height: auto;
    aspect-ratio: 512 / 703;
  }
}
/* Tablet a úzké okno počítače (740 až 1099 px): nadpis má vedle postavy tři řádky, proto menší odsazení
   a mezery mezi částmi textu, aby nad postavou nezůstalo moc volného pruhu. */
@media (min-width: 46.25em) and (max-width: 68.6875em) {
  .hero.uvod-klidny { --uk-odsazeni: var(--m-6); }
  .hero.uvod-klidny .hero-title { margin-top: var(--m-3); }
  .hero.uvod-klidny .lead { margin-top: var(--m-4); }
  .hero.uvod-klidny .hero-actions { margin-top: var(--m-5); }
}
/* Počítač (od 1000 px): sloupec postavy je čtvrtý sloupec řádku faktů pod úvodem (mřížka faktů je
   1 : 1,2 : 1,6 : 1, čtvrtý sloupec je tedy 1/4,8 šířky). Postava tak stojí přesně nad údajem „Profil“.
   V užším okně (do 1215 px) by byl sloupec užší než postava, proto má nejmíň 15rem. */
@media (min-width: 62.5em) {
  .hero.uvod-klidny { --uk-sloupec: max(100% / 4.8, 15rem); }
  /* Jméno stojí o pár řádků výš v hlavičce na stejné svislici. Řádek nad nadpisem proto na široké
     obrazovce ukazuje jen roli, jméno v něm zůstává pro čtečky a pro stav bez stylů. */
  .hero-jmeno {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hero-role { color: var(--b-na-tme); font-weight: 500; }
}
/* Od 1100 px (68.75em) má nadpis vedle postavy dva řádky: písmo se počítá ze šířky levého sloupce,
   41 px (okno 1100 px) až 49 px (od 1264 px). V užším okně má nadpis tři řádky v běžné velikosti
   (30 až 44 px): písmo, které by se tam vešlo na dva řádky (36 až 41 px), by bylo skoro stejně velké
   jako nadpisy sekcí (35 px). */
@media (min-width: 68.75em) {
  .hero.uvod-klidny {
    /* Šířka levého sloupce, spočítaná ze šířky okna stejně jako .container a sloupec postavy
       (velikost písma se nedá odvodit z procent šířky rodiče). Do 100vw se počítá i posuvník okna,
       proto 1rem rezervy. */
    --uk-obsah: min(100vw - 2 * var(--okraj), var(--sirka));
    --uk-vedle: calc(var(--uk-obsah) - max(var(--uk-obsah) / 4.8, 15rem) - var(--m-5) - 1rem);
    /* Delší věta českého nadpisu je široká 17,8násobek velikosti písma. Dělitel 18,4 nechává 3 % rezervy
       na záložní písmo. V jiném jazyce větu změřit a dělitel nastavit znovu; když se nadpis na dva
       řádky nevejde, zalomí se na tři a nic nepřekryje. */
    --uk-nadpis-sirka: 18.4;
  }
  .hero.uvod-klidny .hero-title { font-size: min(var(--v-h1), var(--uk-vedle) / var(--uk-nadpis-sirka)); }
}

/* Nízké okno notebooku (1366 x 768 a nižší): menší odsazení a mezery, postava smí blíž k horní hraně
   pruhu. Její velikost se nemění. */
@media (min-width: 62.5em) and (max-height: 820px) {
  .hero.uvod-klidny { --uk-odsazeni: var(--m-6); --uk-nad: var(--m-4); }
  .hero-title { margin-top: var(--m-3); }
  .lead { margin-top: var(--m-4); }
  .hero-actions { margin-top: var(--m-5); }
}
/* Tisk: pruh je na papíře bílý a postava na průhledném pozadí by na něm zůstala s bílou košilí
   na bílé. Fotka se proto netiskne a text úvodu je obyčejný sloupec. */
@media print {
  .hero.uvod-klidny .hero-foto { display: none; }
  .hero.uvod-klidny .hero-inner { display: block; padding-bottom: 0; }
  .hero.uvod-klidny .hero-text { padding-block: 0; }
  .hero.uvod-klidny .hero-kdo { min-height: 0; padding-right: 0; }
  .hero.uvod-klidny .hero-title { font-size: var(--v-h1); }
}

/* ============================================================
   6. ŘÁDEK FAKTŮ
   ============================================================ */
.fakta { border-bottom: 1px solid var(--b-linka); }

.fakta-seznam {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--m-2) var(--m-5);
  padding-top: var(--m-4);
}
.fakt dt {
  font-size: var(--v-maly);
  line-height: 1.4;
  color: var(--b-text-2);
}
.fakt dd { font-weight: 500; }
/* Odkaz je blok s výplní (dotyková výška 44 px), takže se popisek a dvouřádkový údaj nepřekryjí. */
.fakt a {
  display: inline-block;
  padding-block: var(--m-1) 1.0625rem;
  line-height: 1.35;
  overflow-wrap: anywhere;   /* při hodně zvětšeném písmu se dlouhé slovo zalomí, nepřeteče */
  color: var(--b-text);
  text-decoration-color: var(--b-linka-silna);
}
.fakt a:hover { color: var(--b-odkaz); text-decoration-color: currentColor; }

@media (min-width: 53.75em) {
  .fakta-seznam {
    grid-template-columns: 1fr 1.2fr 1.6fr 1fr;
    gap: 0;
    padding-top: 0;
  }
  .fakt { padding: var(--m-4) var(--m-5) 0; border-left: 1px solid var(--b-linka); }
  .fakt:first-child { padding-left: 0; border-left: 0; }
}

/* ============================================================
   7. SEKCE OBECNĚ
   ============================================================ */
.section { padding-block: var(--m-8); }
.pruh { background: var(--b-plocha); }

.section-intro { font-size: var(--v-uvod); line-height: 1.5; max-width: var(--sirka-textu); }

@media (min-width: 53.75em) {
  .section { padding-block: var(--m-9); }
  .section.pruh { padding-block: 5rem; }
  .section.about { padding-top: var(--m-10); }
  .section.nabidky { padding-top: 5.5rem; }
  .section-head-dvoji {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--m-8);
    align-items: start;
  }
}
@media (max-width: 53.6875em) {
  .section-head-dvoji h2 { margin-bottom: var(--m-4); }
}

/* ============================================================
   8. SLUŽBY A CENÍK
   Každá nabídka je jeden řádek. V kódu jde název, cena s poznámkami a odkazem a popis.
   Seznam „Co je v ceně“ má jen první řádek (audit jedné platformy) a je rozbalený.
   Telefon: vše pod sebou, cena hned pod názvem, odkaz vlevo pod popisem (u auditu na řádku popisku seznamu).
   Tablet: vlevo název s cenou, vpravo popis. Počítač: název, popis a cena ve třech sloupcích.
   ============================================================ */
.cenik { margin-top: var(--m-5); }

.cenik-hlava {
  padding-bottom: var(--m-4);
  border-bottom: 2px solid var(--b-text);
}
.cenik-titul { font-size: var(--v-h3); line-height: 1.25; letter-spacing: -0.01em; }
/* Zásada o procentu z rozpočtu: zvýrazněná věta na konci úvodu sekce. */
.cenik-zasada { font-weight: 600; }

.nabidka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-block: var(--m-4) var(--m-2);
  border-bottom: 1px solid var(--b-linka);
}
/* Telefon: obaly ceny a popisu se rozpustí a jejich části jdou do mřížky řádku jednotlivě.
   Každá část má pevný řádek mřížky (název 1, cena 2, cena v druhé měně 3, podmínky 4, popis 5,
   seznam a odkaz 6), takže pořadí drží, i když některá část chybí nebo v cizím jazyce přibude.
   Popisek seznamu a odkaz sdílejí šestý řádek: popisek vlevo, odkaz vpravo. */
.nabidka-cena,
.nabidka-popis { display: contents; }
.nabidka-hlava,
.price,
.price-eur,
.price-pozn,
.nabidka-text { grid-column: 1 / -1; }
.nabidka-hlava { grid-row: 1; }
.price { grid-row: 2; }
.price-eur { grid-row: 3; }
.price-pozn { grid-row: 4; }
.nabidka-text { grid-row: 5; }
.nabidka-vice { grid-column: 1 / -1; grid-row: 6; }
.nabidka-akce {
  grid-column: 2;
  grid-row: 6;
  align-self: start;
  justify-self: end;
  position: relative;      /* leží nad seznamem „Co je v ceně“, se kterým u auditu sdílí řádek */
  z-index: 1;
}
/* Řádek bez seznamu: odkaz stojí vlevo pod textem. */
.nabidka:not(:has(.nabidka-vice)) .nabidka-akce { grid-column: 1 / -1; justify-self: start; }

.nabidka h3 { font-size: var(--v-h3); }
/* Dlouhý název (školení): výčet platforem v závorce stojí na vlastním řádku běžnou velikostí,
   aby se název nelámal uprostřed „Google Ads“. Text názvu se tím nemění. */
.nabidka-upresneni {
  display: block;
  margin-top: .125rem;
  font-size: var(--v-text);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
}
.nabidka-znacka {
  margin-bottom: var(--m-1);
  font-size: var(--v-maly);
  font-weight: 600;
  line-height: 1.3;
}

.price {
  margin-top: var(--m-2);
  font-size: var(--v-cena);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: var(--prostrkani-nadpis);
  font-variant-numeric: tabular-nums;
}
.price-castka { white-space: nowrap; }
.price-od,
.price-jednotka {
  font-size: var(--v-maly);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--b-text-2);
}
/* Přibližná částka v druhé měně (jen cizí jazyky, česká stránka ji nemá). */
.price-eur {
  margin-top: .125rem;
  font-size: var(--v-maly);
  line-height: 1.4;
  color: var(--b-text-2);
}
/* Cizí zápis částky má v čísle tečku nebo čárku, která by s číslicemi stejné šířky dostala šířku číslice. */
:lang(de) .price, :lang(en) .price, :lang(pl) .price { font-variant-numeric: normal; }
/* Podmínky, které určují cenu (rozpětí, hodiny v ceně, příplatek), jsou vidět hned pod částkou. */
.price-pozn {
  margin-top: var(--m-2);
  font-size: var(--v-maly);
  line-height: 1.4;
}
.price-pozn li + li { margin-top: var(--m-1); }

.nabidka-text { margin-top: .625rem; }
.nabidka-text p { max-width: var(--sirka-textu); }
.nabidka-text p + p { margin-top: var(--m-2); }
.price-fit { color: var(--b-text-2); }
.price-fit strong { color: var(--b-text); font-weight: 600; }

.nabidka-vice { margin-top: var(--m-1); }
.nabidka-vice summary {
  display: inline-flex;
  align-items: center;
  gap: var(--m-2);
  min-height: var(--cil);
  color: var(--b-odkaz);
  font-size: var(--v-maly);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.nabidka-vice summary::-webkit-details-marker { display: none; }
.nabidka-vice summary::before,
.faq-item summary::after {
  content: "";
  flex: none;
  width: .75rem;
  height: .75rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}
.nabidka-vice[open] summary::before,
.faq-item[open] summary::after {
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}
.nabidka-vice summary:hover { text-decoration: underline; }
.nabidka-vice ul {
  padding: 0 0 var(--m-3) 1.25rem;
  font-size: var(--v-maly);
  list-style: square;
}
.nabidka-vice li { padding-left: .125rem; }
.nabidka-vice li + li { margin-top: var(--m-1); }
.nabidka-vice li::marker { color: var(--b-linka-silna); }

.nabidka-akce { margin-top: var(--m-1); }
.nabidka .odkaz.nabidka-akce {
  display: inline-flex;
  align-items: center;
  min-height: var(--cil);
  font-size: var(--v-maly);
}
.nabidka .btn.nabidka-akce { padding-inline: .875rem; font-size: var(--v-maly); }

/* Doporučený první krok: jediná podbarvená položka s jantarovou hranou.
   Jen ona přesahuje mřížku stránky, linky ostatních řádků drží mřížku. */
.nabidka.doporucena {
  margin-inline: calc(-1 * var(--okraj));
  padding-inline: var(--okraj);
  background: var(--b-plocha);
  box-shadow: inset 4px 0 0 var(--b-jantar);
  border-bottom-color: transparent;
}

.pricing-note {
  margin-top: 1.25rem;
  max-width: var(--sirka-textu);
  color: var(--b-text-2);
}
.pricing-note strong { color: var(--b-text); }

/* Telefon: popisek seznamu nechá vpravo místo pro odkaz, se kterým sdílí řádek. Když se nevejde
   (delší jazyk, užší displej), zalomí se popisek na dva řádky a odkaz nepřekryje. */
@media (max-width: 43.6875em) {
  .nabidka-vice summary { max-width: calc(100% - var(--akce-sirka)); }
}
/* Nejužší displej a hodně zvětšené písmo: odkaz má vlastní řádek pod popiskem seznamu. */
@media (max-width: 19.9375em) {
  .nabidka-vice summary { max-width: none; }
  .nabidka-akce { grid-column: 1 / -1; grid-row: 7; justify-self: start; }
}

@media (min-width: 43.75em) {
  .cenik { margin-top: var(--m-7); }
  .pricing-note { margin-top: var(--m-5); }
  .nabidka {
    grid-template-columns: 15rem minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--m-6);
    padding-block: var(--m-5);
  }
  .nabidka-hlava { grid-column: 1; grid-row: 1; }
  .nabidka-cena { display: block; grid-column: 1; grid-row: 2; }
  .nabidka-popis { display: block; grid-column: 2; grid-row: 1 / span 2; }
  .nabidka-text { margin-top: 0; }
  .nabidka-akce { margin-top: var(--m-2); }
  .nabidka .btn.nabidka-akce { margin-top: var(--m-3); padding-inline: 1.125rem; font-size: var(--v-text); }
}

@media (min-width: 62.5em) {
  .nabidka {
    grid-template-columns: 17rem minmax(0, 1fr) var(--cena-sloupec);
    grid-template-rows: auto;
    column-gap: var(--m-7);
    padding-block: var(--m-6);
  }
  .nabidka-cena { grid-column: 3; grid-row: 1; }
  .nabidka-popis { grid-column: 2; grid-row: 1; }
  .nabidka.doporucena {
    margin-inline: calc(-1 * var(--m-5));
    padding-inline: var(--m-5);
  }
  /* Sloupec ceny má jednu levou hranu: částka, podmínky i odkaz začínají na stejné
     svislici. Slovo „od“ je vyvěšené vlevo před ní. Sloupec částky se řídí šířkou textu, takže unese
     i delší cizí zápis měny. */
  .price {
    display: grid;
    grid-template-columns: var(--cena-od) max-content minmax(0, 1fr);
    align-items: baseline;
    column-gap: .375rem;
    margin-top: -.25rem;     /* účaří částky sedí na první řádek názvu a popisu */
  }
  .price-od { grid-column: 1; text-align: right; }
  .price-castka { grid-column: 2; }
  .price-jednotka { grid-column: 3; white-space: nowrap; }
  .price-eur,
  .price-pozn,
  .nabidka-akce { margin-left: calc(var(--cena-od) + .375rem); }
  .pricing-note { margin-left: calc(17rem + var(--m-7)); }
}

/* Úvodní hovor zdarma: jediná tmavá plocha uprostřed stránky, cíl kotvy #hovor (tlačítko v hlavičce
   a hlavní tlačítko úvodu). Odsazení pod lepivou hlavičku dělá scroll-padding-top na prvku html. */
.free-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: var(--m-6);
  margin-inline: calc(-1 * var(--okraj));
  padding: 1.75rem var(--okraj);
  background: var(--b-tma);
}
.free-intro-title { font-size: var(--v-h2); line-height: var(--radek-nadpis); }
.free-intro-title em { font-style: normal; }
/* Nadpis a věta vlevo, kulatá fotka s rukou u brýlí vpravo, jako na dnešním webu (Jiří 14. 10. 2026).
   Na telefonu stojí fotka vedle nadpisu a věta pod nimi přes celou šířku (obal slov se tam rozpustí v mřížce),
   od 700 px stojí fotka vedle nadpisu i věty a je svisle na jejich středu. */
.free-intro-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nadpis foto" "veta veta";
  align-items: center;
  column-gap: var(--m-4);
}
.free-intro-slova { display: contents; }
.free-intro-title { grid-area: nadpis; }
.free-intro-lead { grid-area: veta; margin-top: var(--m-3); max-width: 30rem; color: var(--b-na-tme-2); }
.free-intro-foto { grid-area: foto; width: 5rem; }
.free-intro-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }

/* Dva termíny se vejdou vedle sebe i na telefonu (od 360 px), na nejužším displeji jsou pod sebou. */
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr)); gap: var(--m-3); }
.slots[hidden] { display: none; }
.slot {
  display: grid;
  gap: .125rem;
  padding: .75rem 1rem;
  border: 1px solid var(--b-obrys-tma);
  border-radius: var(--r);
  text-decoration: none;
  transition: background-color var(--prechod), border-color var(--prechod);
}
.slot:hover { border-color: var(--b-jantar); background: var(--b-najeti-tma); }
.slot-when { display: flex; flex-wrap: wrap; gap: 0 .5rem; font-weight: 700; }
.slot-time { font-weight: 400; }
.slot-cta { font-size: var(--v-maly); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; color: var(--b-na-tme-2); }
.slot:hover .slot-cta { color: var(--b-na-tme); }
.slots-note { margin-top: var(--m-3); font-size: var(--v-maly); color: var(--b-na-tme-2); }
/* Bez termínů zbyde v bloku jen nadpis a tato věta: mezeru nad ní dělá mřížka bloku. */
.slots[hidden] + .slots-note { margin-top: 0; }
/* Odkaz v poznámce pod termíny je řádkový prvek (do 14. 10. 2026 inline-block): v němčině, polštině a ukrajinštině
   za ním stojí čárka, která by jinak mohla začít nový řádek. Výplň zvětšuje plochu pro klepnutí i tak. */
.slots-note a { display: inline; padding-block: var(--m-1); }

@media (min-width: 43.75em) {
  .free-intro {
    gap: var(--m-5);
    margin-top: var(--m-8);
    margin-inline: 0;
    padding: var(--m-7) var(--m-6);
  }
  .free-intro-text { grid-template-areas: "slova foto"; column-gap: var(--m-6); }
  .free-intro-slova { display: block; grid-area: slova; }
  .free-intro-foto { width: 7rem; }
}
/* Dva sloupce (text vlevo, termíny vpravo) až tam, kde má text vedle kulaté fotky dost místa: od 1240 px má nadpis
   aspoň 440 px a láme se do dvou řádků. Bez fotky to stačilo od 1000 px, s fotkou by tam nadpis měl čtyři řádky. */
@media (min-width: 77.5em) {
  .free-intro {
    grid-template-columns: minmax(18rem, 1fr) minmax(0, 27rem);
    align-items: center;
    gap: var(--m-8);
    padding: var(--m-7);
  }
}

/* ============================================================
   9. JAK SPOLUPRÁCE PROBÍHÁ: tři kroky na lince
   ============================================================ */
.kroky-osa {
  margin-top: var(--m-6);
  counter-reset: krok;
}
.krok {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  counter-increment: krok;
}
.krok::before {
  content: counter(krok);
  font-size: var(--v-h2);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--prostrkani-nadpis);
  font-variant-numeric: tabular-nums;
}
.krok-telo {
  position: relative;
  padding: 0 0 var(--m-6) var(--m-5);
  border-left: 2px solid var(--b-text);
}
.krok:last-child .krok-telo { padding-bottom: 0; }
.krok-telo::before {
  content: "";
  position: absolute;
  left: -6px;
  top: .5rem;
  width: 10px;
  height: 10px;
  background: var(--b-jantar);
  outline: 3px solid var(--b-plocha);
}
.krok h3 { line-height: 1.4; }
.krok p { margin-top: var(--m-2); max-width: var(--sirka-textu); }

@media (min-width: 53.75em) {
  .kroky-osa {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--m-7);
  }
  .krok { display: block; }
  .krok::before {
    display: block;
    font-size: var(--v-h2);
    padding-bottom: var(--m-4);
  }
  .krok-telo {
    padding: var(--m-5) var(--m-7) 0 0;
    border-left: 0;
    border-top: 2px solid var(--b-text);
  }
  .krok:last-child .krok-telo { padding-right: 0; }
  .krok-telo::before { left: 0; top: -6px; }
}

/* ============================================================
   10. O MNĚ
   ============================================================ */
.about h2 { max-width: 20ch; }

.about-grid { margin-top: var(--m-6); }
/* Pod 860 px je fotka nad textem, nejvýš 480 px široká: na tabletu na výšku by jinak byla přes celou šířku
   (tvář přes půl obrazovky) a větší než její největší soubor. Ve dvou sloupcích je sloupec užší, mez se neuplatní. */
.about-media { max-width: 30rem; }
.about-media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 0;
}
.about-body { margin-top: var(--m-5); max-width: var(--sirka-textu); }
.about-body p + p { margin-top: var(--m-4); }
.about-body p:first-child { font-size: var(--v-uvod); line-height: 1.5; }

@media (min-width: 53.75em) {
  .about-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--m-8);
    align-items: start;
    margin-top: var(--m-7);
  }
  .about-media img { aspect-ratio: 3 / 4; }
  /* Text je po zkrácení druhého odstavce nižší než fotka (od 1264 px šířky okna o 134 px): stojí proto
     svisle na střed proti ní, volné místo se rozdělí nad text a pod něj. Kde je text vyšší než fotka
     (okno do 1067 px), nemění se nic: fotka zůstává nahoře a text začíná na její horní hraně. */
  .about-body { margin-top: 0; align-self: center; }
}

/* Časová osa: na široké obrazovce vodorovná, délka úseku odpovídá počtu let */
.timeline { margin-top: var(--m-8); }
.timeline-title { font-size: var(--v-h3); }
.timeline-osa { margin-top: var(--m-5); }
.timeline-osa li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .125rem;
  padding: 0 0 var(--m-5) var(--m-5);
  border-left: 2px solid var(--b-text);
}
.timeline-osa li:last-child { padding-bottom: 0; }
.timeline-osa li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: .4rem;
  width: 10px;
  height: 10px;
  background: var(--b-text);
  outline: 3px solid var(--b-stranka);
}
.timeline-osa li.tl-ted::before { background: var(--b-jantar); }
.tl-period { font-size: var(--v-maly); color: var(--b-text-2); }
.tl-role { font-weight: 700; line-height: 1.35; }
.tl-org { font-size: var(--v-maly); line-height: 1.45; color: var(--b-text-2); }
/* Poznámka k jedné položce osy (umístění Plné Peněženky): menší než název, s odkazy na zdroj. */
.tl-pozn {
  margin-top: var(--m-2);
  max-width: var(--sirka-textu-maly);
  font-size: var(--v-maly);
  line-height: 1.5;
  color: var(--b-text-2);
}
.tl-odkazy { display: flex; flex-wrap: wrap; gap: 0 var(--m-4); font-size: var(--v-maly); }
.tl-odkazy a { display: inline-flex; align-items: center; min-height: var(--cil); font-weight: 500; }

@media (min-width: 53.75em) {
  .timeline-osa {
    display: flex;
    flex-direction: row-reverse;
  }
  .timeline-osa li {
    flex: 1 1 0;
    align-content: start;
    padding: var(--m-4) var(--m-5) 0 0;
    border-left: 0;
    border-top: 2px solid var(--b-text);
  }
  .timeline-osa li::before { left: 0; top: -6px; }
  /* délky úseků: 2014 až 2020 je 6 let, 2020 až 2025 je 5 let, od roku 2025 necelé 2 roky */
  .timeline-osa li:nth-child(3) { flex-grow: 6; }
  .timeline-osa li:nth-child(2) { flex-grow: 5; }
  .timeline-osa li:nth-child(1) { flex: 1.8 0 15rem; padding-right: 0; }
}

/* Dovednosti: prosté seznamy */
.expertise {
  display: grid;
  gap: var(--m-6);
  margin-top: var(--m-7);
}
.exp-card h3,
.cred-label {
  display: block;
  padding-bottom: var(--m-2);
  margin-bottom: var(--m-3);
  border-bottom: 1px solid var(--b-linka);
  font-size: var(--v-text);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.exp-card li { font-size: var(--v-text); line-height: 1.45; }
.exp-card li + li { margin-top: .375rem; }
/* Počet sloupců se řídí místem: při zvětšeném písmu nebo na nejužším displeji je sloupec jeden. */
.exp-platformy ul { columns: 2 9rem; column-gap: var(--m-5); }
.exp-platformy li { break-inside: avoid; }
.credentials { display: grid; gap: var(--m-5); align-content: start; }
.cred-item { font-size: var(--v-text); line-height: 1.45; }

@media (min-width: 38.75em) {
  .expertise { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m-7) var(--m-6); }
}
@media (min-width: 62.5em) {
  .expertise { grid-template-columns: 1.7fr 1fr 1.15fr 1fr; gap: var(--m-7); margin-top: var(--m-8); }
}

/* ============================================================
   11. JAK PRACUJI: tři zásady vedle sebe
   ============================================================ */
.how { padding-top: 0; }
.how .container { padding-top: var(--m-8); border-top: 1px solid var(--b-linka); }
.zasady { display: grid; gap: var(--m-6); margin-top: var(--m-6); }
.zasada p { margin-top: var(--m-2); max-width: var(--sirka-textu); }

@media (min-width: 53.75em) {
  .how .container { padding-top: var(--m-9); }
  .zasady { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--m-7); margin-top: var(--m-7); }
}

/* ============================================================
   12. CERTIFIKACE A OCENĚNÍ
   Jedna sekce, dva bloky: nejdřív osobní certifikace, za nimi oceněné kampaně agentury.
   Oceněná kampaň je výsledek týmu a cena patří agentuře a klientovi, proto blok vypadá jinak než
   osobní certifikáty: řádky na lince jako v ceníku, bez loga, bez odznaku a bez velkých číslic.
   Záznam: název kampaně s agenturou v závorce, ocenění (odstavec na každé) a moje role. Řádek s oceněním
   je sám odkazem na oficiální výsledky.
   Telefon a užší tablet: vše pod sebou. Od 860 px: vlevo název s agenturou, vpravo ocenění a role.
   Od 1200 px mají oba sloupce stejné levé svislice jako název a popis v řádku ceníku.
   Další záznam je další položka seznamu.
   ============================================================ */
.oceneni { margin-top: var(--m-7); }
/* Úvodní věta říká, komu ocenění patří. Hlavní barvou textu, není to poznámka pod čarou.
   Je o něco širší než běžný odstavec, aby se na počítači vešla pod nadpis na jeden řádek. */
.oceneni-uvod { margin-top: var(--m-3); max-width: 44rem; }
.oceneni-seznam { margin-top: var(--m-5); border-top: 2px solid var(--b-text); }
.oceneni-zaznam {
  padding-block: var(--m-4);
  border-bottom: 1px solid var(--b-linka);
}
/* Název kampaně má stejné písmo jako název certifikátu (17 px, řez 600): ocenění agentury nesmí být
   typograficky nad osobními certifikacemi. Agentura je součástí názvu každého záznamu (v závorce,
   tlumeně jako vydavatel u certifikátu), aby záznam čtený samostatně neztratil, komu ocenění patří.
   Na telefonu stojí na řádku názvu, když se vejde. Slova v závorce drží pohromadě pevné mezery v HTML
   (při hodně zvětšeném písmu se závorka smí zalomit, nepřeteče). Řádky názvu se nevyrovnávají
   (text-wrap: wrap), aby se na úzkém telefonu na druhý řádek přesunula celá závorka, ne půlka názvu. */
.oceneni-zaznam h3 { font-size: var(--v-text); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; text-wrap: wrap; }
.oceneni-agentura { font-size: var(--v-maly); font-weight: 400; letter-spacing: 0; color: var(--b-text-2); }
.oceneni-text { margin-top: var(--m-2); }
.oceneni-vysledek,
.oceneni-role { max-width: var(--sirka-textu); }
/* Role je hlavní barvou textu a její popisek tučněji, stejně jako „Vhodné pro:“ v ceníku. */
.oceneni-role { margin-top: var(--m-1); }
.oceneni-role strong { font-weight: 600; }
/* Řádek s oceněním je odkaz na oficiální výsledky: barva a podtržení jako u ostatních odkazů v textu.
   Dotyková plocha: odkaz je řádkový prvek a svislá výplň řádkového prvku výšku řádku nemění, jen zvětší
   plochu, na kterou jde klepnout: písmo zabírá na výšku 21 px, s výplní 12 px nahoře a dole je to 45 px
   (nejmenší dotykový cíl je 44 px). Plocha přesahuje řádek o 9 px nahoru a dolů, nad název a nad roli,
   na které se neklepá; position: relative ji drží nad písmem role (jinak by jí role ubrala 2 px).
   Dva odkazy pod sebou (dvě ocenění jedné kampaně) proto dělí mezera 20 px: jejich plochy se nepřekryjí
   a zbudou mezi nimi 2 px. Stejnou mezeru má pak i role pod druhým oceněním, aby druhé ocenění
   nevypadalo, že patří k roli, a první nestálo zvlášť. */
.oceneni-odkaz { position: relative; padding-block: .75rem; }
.oceneni-vysledek + .oceneni-vysledek,
.oceneni-vysledek + .oceneni-vysledek + .oceneni-role { margin-top: 1.25rem; }
/* Počítač s myší (okno od 860 px): velká dotyková plocha není potřeba, odkaz je vysoký jako řádek textu
   (27 px), dvě ocenění jedné kampaně stojí hned pod sebou a role za nimi s běžnou mezerou. Užší okno
   a každý dotykový displej si nechávají plochu 45 px. */
@media (min-width: 53.75em) and (hover: hover) and (pointer: fine) {
  .oceneni-odkaz { padding-block: .1875rem; }
  .oceneni-vysledek + .oceneni-vysledek { margin-top: 0; }
  .oceneni-vysledek + .oceneni-vysledek + .oceneni-role { margin-top: var(--m-1); }
}

.certs-grid { margin-top: var(--m-5); }
.cert-card {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--m-4);
  align-items: start;
  padding-block: var(--m-4);
  border-top: 1px solid var(--b-linka);
}
.cert-badge { width: 3.5rem; height: 3.5rem; object-fit: contain; }
img.cert-badge { mix-blend-mode: multiply; }
.cert-card h3 { font-size: var(--v-text); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.cert-udaje {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--m-3);
  margin-top: .125rem;
  font-size: var(--v-maly);
  color: var(--b-text-2);
}
.cert-verify {
  display: inline-flex;
  align-items: center;
  min-height: var(--cil);
  margin-bottom: -.625rem;
  font-size: var(--v-maly);
  font-weight: 600;
}

@media (min-width: 43.75em) {
  .certs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--m-6); margin-top: var(--m-6); }
  .oceneni { margin-top: var(--m-8); }
  .oceneni-seznam { margin-top: var(--m-6); }
}
/* Dva sloupce až od 860 px: v užším okně je blok s názvem vedle textu vyšší než s názvem nad textem
   (změřeno při 700 px: 1 440 proti 1 270 px, při 768 px: 1 325 proti 1 237 px). */
@media (min-width: 53.75em) {
  .oceneni-zaznam {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: var(--m-6);
    padding-block: var(--m-5);
  }
  /* Název stojí vedle textu: stejná výška řádku jako text, první řádky obou sloupců tak leží na jedné lince.
     Agentura je v úzkém sloupci vždy na vlastním řádku pod názvem. */
  .oceneni-zaznam h3 { grid-column: 1; line-height: var(--radek); }
  .oceneni-agentura { display: block; }
  .oceneni-text { grid-column: 2; margin-top: 0; }
}
@media (min-width: 62.5em) {
  .certs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--m-7); }
}
/* Od 1200 px mají sloupce stejné levé svislice jako název a popis v řádku ceníku (17rem a mezera 3rem).
   Třetí sloupec (dřív odkaz na výsledky) odpadl a vpravo od textu po něm zůstávalo asi 300 px volna.
   Ocenění a role proto smějí být široké jako úvodní věta bloku (44rem, řádek do 90 znaků): jsou to
   krátké texty o jednom až dvou řádcích, nejdelší ocenění se vejde na jeden řádek a záznamy jsou
   stejně vysoké. */
@media (min-width: 75em) {
  .oceneni-zaznam {
    grid-template-columns: 17rem minmax(0, 1fr);
    column-gap: var(--m-7);
  }
  .oceneni-vysledek,
  .oceneni-role { max-width: 44rem; }
}

/* ============================================================
   13. ČASTÉ DOTAZY
   ============================================================ */
.faq-list { margin-top: var(--m-5); border-bottom: 1px solid var(--b-linka); }
.faq-item { border-top: 1px solid var(--b-linka); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m-4);
  min-height: 3.5rem;
  padding-block: var(--m-3);
  font-size: var(--v-text);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { color: var(--b-odkaz); }
.faq-item summary:hover { color: var(--b-odkaz); }
.faq-a { padding: 0 var(--m-6) var(--m-5) 0; max-width: calc(var(--sirka-textu) + var(--m-6)); }
/* Odkaz za odpovědí (celý ceník): vlastní řádek s dotykovou výškou. */
.faq-dal { margin-top: calc(-1 * var(--m-4)); padding-bottom: var(--m-3); }
.faq-dal a { display: inline-flex; align-items: center; min-height: var(--cil); font-weight: 600; }

@media (min-width: 53.75em) {
  .faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--m-8);
    align-items: start;
  }
  .faq-grid h2 { position: sticky; top: calc(var(--hlavicka) + var(--m-6)); }
  .faq-list { margin-top: 0; }
  .faq-item summary { min-height: 4rem; }
}

/* ============================================================
   14. KONTAKT: tmavý pruh jako závěr
   ============================================================ */
.contact { background: var(--b-tma); }
.contact h2 { max-width: 18ch; }
.contact .section-intro { margin-top: var(--m-4); color: var(--b-na-tme-2); }

.jistoty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
  gap: var(--m-5) var(--m-5);
  margin-top: var(--m-6);
}
/* Čtyři krátké názvy pod jantarovou linkou, bez druhého řádku (celé věty stojí jinde na stránce). */
.jistota {
  padding-top: var(--m-3);
  border-top: 2px solid var(--b-jantar);
}
.jistota-nazev { display: block; font-weight: 600; line-height: 1.3; text-wrap: balance; }   /* ve dvou řádcích nezůstane na druhém jedno slovo */

.contact-grid { margin-top: var(--m-7); }

.form-row { margin-bottom: var(--m-4); }
.form-row label {
  display: block;
  margin-bottom: .375rem;
  font-size: var(--v-maly);
  font-weight: 500;
  line-height: 1.35;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: .625rem .875rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background-color: var(--b-stranka);
  color: var(--b-text);
  line-height: 1.4;
}
.contact-form textarea { min-height: 8.5rem; resize: vertical; }
.contact-form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--b-text) 50%),
    linear-gradient(135deg, var(--b-text) 50%, transparent 50%);
  background-position: right 1.125rem center, right .75rem center;
  background-size: .375rem .375rem;
  background-repeat: no-repeat;
}
.contact-form ::placeholder { color: var(--b-text-2); opacity: 1; }
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: 3px solid var(--b-jantar);
  outline-offset: 2px;
  border-radius: var(--r);
}
.contact-form [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--b-chyba); }

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

.contact-form .btn { margin-top: var(--m-2); }
.form-status { margin-top: var(--m-4); font-weight: 600; }
.form-status:empty { display: none; }
.form-status.ok,
.form-status.pending { padding-left: var(--m-3); border-left: 3px solid var(--b-jantar); }
.form-status.err { padding-left: var(--m-3); border-left: 3px solid var(--b-chyba-tma); color: var(--b-chyba-tma); }
.form-note {
  margin-top: var(--m-4);
  max-width: var(--sirka-textu-maly);
  font-size: var(--v-maly);
  line-height: 1.55;
  color: var(--b-na-tme-2);
}
.form-note a { display: inline-block; padding-block: .125rem; }
/* Závorka s odkazem se nezalomí: odkaz je inline-block, takže by jinak „(“ mohla zůstat sama na konci řádku (320 px). */
.bez-zlomu { white-space: nowrap; }

/* Přímé kontakty bez fotky: fotka s rukou u brýlí stojí v bloku hovoru zdarma (Jiří 14. 10. 2026). */
.contact-aside { margin-top: var(--m-7); }
.aside-lead { font-size: var(--v-h3); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; text-wrap: balance; }
.contact-meta { margin-top: var(--m-4); }
.contact-meta li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: center;
  min-height: var(--cil);
  padding-block: .375rem;
  border-top: 1px solid var(--b-linka-tma);
  line-height: 1.4;
}
.contact-meta li:last-child { border-bottom: 1px solid var(--b-linka-tma); }
.meta-label { font-size: var(--v-maly); color: var(--b-na-tme-2); }
.contact-meta a { display: inline-flex; align-items: center; min-width: 0; min-height: var(--cil); font-weight: 600; overflow-wrap: anywhere; }

/* Dvojice polí jsou vedle sebe jen tam, kde má každé pole aspoň 15rem, jinak pod sebou. */
.form-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); column-gap: var(--m-4); }

@media (min-width: 53.75em) {
  .contact-head {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--m-8);
    align-items: start;
  }
  .contact .section-intro { margin-top: var(--m-1); }
  .jistoty { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--m-6); margin-top: var(--m-7); }
  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--m-8);
    align-items: start;
  }
  /* Přímé kontakty zůstávají při vyplňování formuláře na očích. */
  .contact-aside { position: sticky; top: calc(var(--hlavicka) + var(--m-6)); margin-top: 0; }
}

/* ============================================================
   15. PATIČKA
   ============================================================ */
.site-footer {
  background: var(--b-tma-dno);
  color: var(--b-na-tme-2);
  font-size: var(--v-maly);
}
.footer-inner {
  display: grid;
  gap: var(--m-4);
  padding-block: var(--m-6);
}
.footer-brand { display: grid; gap: .125rem; }
.footer-brand strong { color: var(--b-na-tme); font-size: var(--v-text); }
.footer-meta { display: flex; flex-wrap: wrap; gap: 0 var(--m-5); }
.footer-meta a { display: inline-flex; align-items: center; min-height: var(--cil); }
.footer-copy, .footer-legal { line-height: 1.5; }

@media (min-width: 53.75em) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--m-3) var(--m-7);
  }
  .footer-legal { grid-column: 1 / -1; max-width: 32rem; }
  .footer-copy { text-align: right; }
  .footer-meta { justify-content: flex-end; }
  .footer-brand { grid-row: 1; }
  .footer-copy { grid-column: 2; }
}

/* ============================================================
   16. POHYB A TISK
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .site-header { position: static; }
  .nav-menu, .nav-toggle, .nav-cta, .contact-form { display: none !important; }
  .hero, .contact, .site-header, .site-footer, .free-intro { background: none !important; color: var(--b-tisk) !important; }
  .na-tme, .na-tme a, .hero-role { color: var(--b-tisk) !important; }
  details > * { display: block !important; }
}

/* ============================================================
   17. JAZYKOVÉ VERZE (en, de, pl, uk)
   Doplněno s anglickou verzí 14. 10. 2026 (_redesign-2026-10/navrh/a-tmavy-uvod/en/POPIS-EN.md). Jen pravidla pro prvky, které česká stránka
   nemá (věta o kurzu, poznámka o jazyce spolupráce), a pravidla omezená na jazyk stránky přes :root:lang().
   Česká stránka se jimi nemění. Pravidla výše se tu nepřepisují, jen doplňují. Selektor jazyka vždy
   s :root, ne samotné :lang(en): odkazy přepínače jazyků mají vlastní atribut lang a samotné :lang(en)
   by zasáhlo i odkaz EN na české stránce.
   Blok o českém trhu (#czech-market a protějšky) vlastní pravidla nemá: je to sekce .section.pruh
   s nadpisem a mřížkou .zasady jako sekce Jak pracuji (oddíl 11).
   ============================================================ */

/* Hlavička s pěti jazyky, všechny jazyky (14. 10. 2026): s pěti kódy přesahovala výzva při 1200 px okraj
   obsahu, česky o 9 px, anglicky o 16 px. Položky přepínače jsou proto v řádkovém menu užší, 36 místo 44 px
   (výška zůstává 44 px). V rozbaleném menu pod 1200 px beze změny. */
@media (min-width: 75em) {
  .lang-current,
  .lang-link { min-width: 2.25rem; }
}

/* Úvod, angličtina: dělitel písma nadpisu (oddíl 5). Delší věta („Get a local PPC specialist on your side.“)
   je široká 18,35násobek velikosti písma, s rezervou 3 % na záložní písmo 18,9 (čeština 17,8 a 18,4). */
@media (min-width: 68.75em) {
  :root:lang(en) .hero.uvod-klidny { --uk-nadpis-sirka: 18.9; }
}

/* Poznámka o jazyce spolupráce (němčina, polština, ukrajinština): stránka mluví jazykem návštěvníka, hovory
   běží anglicky. Předchozí vzhled (do 15. 10. 2026) ji měl pod úvodem jako podbarvený rámeček („Gut zu wissen:“, „Warto wiedzieć:“).
   V novém vzhledu stojí v úvodu hned pod tlačítky jako krátká poznámka na tmavém pruhu: menší písmo,
   tlumená barva, jantarová svislá linka vlevo jako u hlášek formuláře (oddíl 14), úvodní slova bílá
   a tučnější. Bez podbarvení a rámečku, ty nový vzhled nepoužívá. Na světlém podkladu (kdyby stála
   jinde) má barvy textu stránky. Kód: poslední prvek v .hero-text, za .hero-actions:
   <p class="lang-note" data-de-only><strong>Gut zu wissen:</strong> Diese Seite ist auf Deutsch. …</p> */
.lang-note {
  max-width: min(40rem, 32em);
  margin-top: var(--m-5);
  padding-left: var(--m-3);
  border-left: 3px solid var(--b-jantar);
  font-size: var(--v-maly);
  line-height: 1.5;
  color: var(--b-text-2);
}
.lang-note strong { color: var(--b-text); font-weight: 600; }
.na-tme .lang-note { color: var(--b-na-tme-2); }
.na-tme .lang-note strong { color: var(--b-na-tme); }
@media (max-width: 46.1875em) {
  .hero .lang-note { margin-top: var(--m-4); }
}

/* Věta o kurzu pod ceníkem (jazyky s přibližnou částkou v druhé měně, třída z předchozího vzhledu, i pro zlotý):
   menší písmo a tlumená barva, na počítači pod poznámkou k ceníku na stejné svislici jako popisy nabídek. */
.eur-note {
  margin-top: var(--m-2);
  max-width: var(--sirka-textu-maly);
  font-size: var(--v-maly);
  line-height: 1.5;
  color: var(--b-text-2);
}
@media (min-width: 62.5em) {
  .eur-note { margin-left: calc(17rem + var(--m-7)); }
}

/* Ceník, počítač: anglicky se „from“ (32 px) do sloupce slova „od“ (1.625rem) nevešlo a lámalo se („fro|m“),
   sloupec je proto 2.25rem. Jednotka stojí v cizích jazycích bez mezery („CZK 2,500/hour“, „2.500 CZK/Stunde“,
   „2 500 CZK/godz.“, „2 500 CZK/год“, stejně jako přibližná částka pod ní): mezeru mřížky mezi částkou
   a jednotkou vrací záporný okraj. */
@media (min-width: 62.5em) {
  :root:lang(en) { --cena-od: 2.25rem; }
  :root:not(:lang(cs)) .price-jednotka { margin-left: -.375rem; }
}
/* Ukrajinsky: s číslicemi stejné šířky stála tečka ve zkratce „/міс.“ odtržená od písmen. */
:root:lang(uk) .price-jednotka { font-variant-numeric: normal; }

/* Ceník, angličtina a polština: tlačítko u doporučené nabídky („Get a no-obligation quote“, „Wycena bez
   zobowiązań“) se při 17 px do sloupce ceny (222 až 240 px) nevešlo a lámalo se na dva řádky. Má proto na
   tabletu i počítači písmo 15 px a užší výplň jako na telefonu (jeden řádek). */
@media (min-width: 43.75em) {
  :root:lang(en) .nabidka .btn.nabidka-akce,
  :root:lang(pl) .nabidka .btn.nabidka-akce { padding-inline: .875rem; font-size: var(--v-maly); }
}
/* Telefon, angličtina a němčina: odkaz u nabídky stojí vždy na vlastním řádku pod popisem (u první nabídky pod
   seznamem „What’s included“). Vedle popisku seznamu se tlačítko vešlo až od 400 px šířky, v užším okně se
   s popiskem překrývalo. Polsky totéž jen pod 390 px (od 390 px se tlačítko a popisek „Co jest w cenie“ vejdou). */
@media (max-width: 43.6875em) {
  :root:lang(en) .nabidka-vice summary,
  :root:lang(de) .nabidka-vice summary { max-width: none; }
  :root:lang(en) .nabidka .nabidka-akce,
  :root:lang(de) .nabidka .nabidka-akce { grid-column: 1 / -1; grid-row: 7; justify-self: start; }
}
@media (max-width: 24.3125em) {
  :root:lang(pl) .nabidka-vice summary { max-width: none; }
  :root:lang(pl) .nabidka .nabidka-akce { grid-column: 1 / -1; grid-row: 7; justify-self: start; }
}

/* Hlavička od 1200 px, němčina: s nejdelšími položkami („Zertifikate und Auszeichnungen“ 223 px) přesahovala výzva
   okraj obsahu o 59 px. Užší mezery mezi položkami (16 místo 24 px), u jména (24 místo 32 px) a u výzvy a užší
   položky přepínače (32 px): rezerva 21 px při 1200 px, 85 px od 1264 px. */
@media (min-width: 75em) {
  :root:lang(de) .nav-menu,
  :root:lang(de) .nav-links { gap: var(--m-4); }
  :root:lang(de) .brand { margin-right: var(--m-5); }
  :root:lang(de) .nav-cta { margin-left: var(--m-2); padding-inline: .875rem; }
  :root:lang(de) .lang-current,
  :root:lang(de) .lang-link { min-width: 2rem; }
}
/* Hlavička 1200 až 1279 px, ukrajinština (měřeno s Inter Tight): výzva přesahovala o 26 px. Mezery menu 16 px,
   mezera za jménem 24 px: rezerva 22 px. Od 1280 px je místa dost (38 px). */
@media (min-width: 75em) and (max-width: 79.9375em) {
  :root:lang(uk) .nav-menu,
  :root:lang(uk) .nav-links { gap: var(--m-4); }
  :root:lang(uk) .brand { margin-right: var(--m-5); }
}
/* Úvod od 1100 px, dělitel písma nadpisu (oddíl 5): německy má nadpis tři řádky (druhá věta je 28,2násobek písma,
   na dva řádky by písmo mělo jen 31 px), nejdelší řádek 18,07 a 3 % rezervy na záložní písmo = 18,6. Ukrajinsky
   je delší věta 19,675násobek písma, s rezervou 20,3, nadpis má dva řádky. Polsky zůstává 18,4 (tři řádky). */
@media (min-width: 68.75em) {
  :root:lang(de) .hero.uvod-klidny { --uk-nadpis-sirka: 18.6; }
  :root:lang(uk) .hero.uvod-klidny { --uk-nadpis-sirka: 20.3; }
}
/* Úvod, polština, nejužší telefon (do 323 px): „Reklama w Czechach?“ je 10,76násobek písma a při 27 px se do
   sloupce 288 px nevešla (nadpis měl pět řádků). Při 26 px má čtyři řádky jako česky. */
@media (max-width: 20.1875em) {
  :root:lang(pl) .hero.uvod-klidny .hero-title { font-size: 1.625rem; }
}
/* Tlačítko termínu, němčina: „Diesen Termin möchte ich“ se lámalo tak, že „ich“ zůstalo samo na druhém řádku. */
:root:lang(de) .slot-cta { text-wrap: balance; }
/* Nejužší okno a hodně zvětšené písmo (pod 20em: okno užší než 320 px, nebo telefon s písmem 150 až 200 %),
   všechny jazyky: při písmu 200 % se do okna 320 až 360 px nevešla delší slova a nezalomitelné úseky
   („recommendations“, „Verify certificate“, „CZK 19,900“, závorka s odkazem pod formulářem, česky
   „(jak nakládám s daty).“) a stránka přetékala. Tady se smí zalomit i uvnitř slova a nezalomitelné úseky
   se uvolní. Původně jen pro angličtinu, 14. 10. 2026 rozšířeno na všechny jazyky. */
@media (max-width: 19.9375em) {
  main { overflow-wrap: anywhere; }
  .price-castka,
  .bez-zlomu { white-space: normal; }
}

/* Termíny hovoru v cizích jazycích: zkrácený den („Fri 23 Oct“, „Mi., 21. Okt.“) je kratší než český celý
   („Pátek 23. 10.“), takže v termínech vedle sebe (dva až čtyři sloupce, okno od 356 px) stál čas u kratšího
   termínu vedle dne a u ostatních pod ním. Tam má čas vždy vlastní řádek pod dnem, jako české termíny.
   V jednom sloupci (okno užší než 356 px) zůstává vedle dne, také jako v češtině. */
@media (min-width: 22.25em) {
  :root:not(:lang(cs)) .slot-time { flex-basis: 100%; }
}

@media print {
  .lang-note, .lang-note strong { color: var(--b-tisk) !important; }
}

/* ============================================================
   18. SOUHLASOVÁ LIŠTA COOKIEBOT (převzato z assets/styles.css, platí od 20. 9. 2026)
   Souhlasová lišta Cookiebot: pod 1280 px ji přilepíme ke spodní hraně.
   Od 1280 px ji Cookiebot sám dělá jako plný spodní pruh, pod touto hranicí
   ji centruje doprostřed okna (karta 900 px, na mobilu 359 px) a překryje tím
   hlavičku i headline. Výšku to nemění, jen pozici. Vyšší specifičnost
   (html body #id.trida) je nutná, protože Cookiebot vkládá vlastní styly
   s !important až za náš soubor. Při změně vzhledu lišty zkontrolovat,
   jestli třída CybotEdge a hranice 1280 px pořád platí.
   ============================================================ */
@media (max-width: 1279px) {
  html body #CybotCookiebotDialog.CybotEdge {
    top: auto !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    max-height: 78vh !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}