/* ===========================================================================
   Pracujem v Nemecku — web pre uchádzačov
   Jakub · 3. 10. 2026 · úloha #52 / J1b

   JEDEN SÚBOR, ŽIADNA ZÁVISLOSŤ, ŽIADNY BUILD. Žiadne externé písmo (SF Pro je
   systémové, presne ako v appke), žiadna knižnica na ikony, žiadna mapa.

   PALETA JE LENKINA a ani jedna hodnota nie je nová:
   `design/praca-v-nemecku/03-vizual.md` časť 1, odvodené pre web sú dve
   (`--hover`, obrys fokusu) a ani jedna z nich nie je nová farba — `--hover`
   je presne tá plocha, ktorú appka používa pre stlačený stav.
   Názvy rolí sú anglické a sú tie isté ako v `03-vizual.md` 1.6 a
   `web/BEST-PRACTICES.md` 6.1, aby sa appka a web dali porovnať.

   V KOMPONENTE NIE JE HEX. Je tam názov role. (`BEST-PRACTICES.md` 6.1)
   VEĽKOSTI PÍSMA SÚ V `rem`, nikdy v px — to je ekvivalent Dynamic Type
   a bez neho stránka neprežije 200 % priblíženie.
   =========================================================================== */

/* --- 1 · Paleta ---------------------------------------------------------- */
:root {
  --bg: #F3F4F6;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #E7E9ED;
  --surface-muted: #EDEEF1;
  --text-primary: #14161C;
  --text-secondary: #5B6170;
  --text-disabled: #868C99;
  --separator: #DFE1E7;
  --control-border: #7A8190;      /* opravené 2. 10. (bolo #878E9D, 3,0:1) */
  --accent: #1E50C8;
  --accent-fill: #1E50C8;
  --accent-pressed: #163FA3;
  --accent-tint: #E8EEFC;
  --danger: #C32F26;
  --danger-tint: #FDECEA;
  --success: #16704A;
  --success-tint: #E6F2EC;
  --warning: #8A5A00;
  --warning-tint: #FCF2DF;

  /* odvodené pre web — nie nové farby, nové použitia existujúcich */
  --hover: #F3F4F6;               /* = pozadie, teda „stlačené" z appky */
  --card-border: transparent;     /* vo svetle karta rám NEMÁ */
  --tag-bg: #F3F4F6;
  --bar: rgba(255, 255, 255, .88);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0D0F13;
    --surface: #171A21;
    --surface-raised: #1F232C;
    --surface-sunken: #090A0D;
    --surface-muted: #0D0F13;
    --text-primary: #EDEFF3;
    --text-secondary: #A2A9B6;
    --text-disabled: #6B7280;
    --separator: #2A2F39;
    --control-border: #6B7280;
    --accent: #7FA3FF;
    --accent-fill: #2F5FE0;
    --accent-pressed: #2449B0;
    --accent-tint: #16203A;
    --danger: #FF8E82;
    --danger-tint: #2A1613;
    --success: #5FD39B;
    --success-tint: #10251C;
    --warning: #E8B44F;
    --warning-tint: #2A2008;

    --hover: #1F232C;             /* = povrch-zdvihnutý */
    --card-border: #2A2F39;       /* v tme má karta rám — plochy sú od seba 1,1:1 */
    --tag-bg: #1F232C;
    --bar: rgba(23, 26, 33, .88);
  }
}

/* --- 2 · Základ ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;           /* body 17 */
  line-height: 1.375rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1 }

/* Čísla v tabuľkovej šírke — mzdy pod sebou musia byť pod sebou. */
.cislo { font-variant-numeric: tabular-nums }

/* Odkaz v texte je PODČIARKNUTÝ. Vedomá odchýlka od `03-vizual.md` 9.1:
   na webe je nepodčiarknutý odkaz informácia nesená len farbou. */
a { color: var(--accent) }
a:hover { color: var(--accent-pressed) }

/* Fokus klávesnice. `outline: none` bez náhrady je zakázané — bez tohto obrysu
   sa web nedá preklikať. Kontrast `akcent` na `pozadie`: 6,3:1 / 7,8:1. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important }
}

/* Preskakovací odkaz na obsah — prvá vec v DOM, viditeľná až pri fokuse. */
.preskoc {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface);
  color: var(--accent);
  padding: .75rem 1rem;
  border: 1px solid var(--separator);
  border-radius: 0 0 .875rem 0;
}
.preskoc:focus { left: 0 }

/* --- 3 · Typografická škála — `03-vizual.md` 2.2 ------------------------- */
.t-velky   { font-size: 2.125rem;  line-height: 2.5625rem; font-weight: 700; letter-spacing: -.02em }
.t1        { font-size: 1.75rem;   line-height: 2.125rem;  font-weight: 700; letter-spacing: -.02em }
.t2        { font-size: 1.375rem;  line-height: 1.75rem;   font-weight: 700; letter-spacing: -.01em }
.t3        { font-size: 1.25rem;   line-height: 1.5625rem; font-weight: 600 }
.nadpisok  { font-size: 1.0625rem; line-height: 1.375rem;  font-weight: 600 }
.podnadpis { font-size: .9375rem;  line-height: 1.25rem }
.poznamka  { font-size: .8125rem;  line-height: 1.125rem }
.stitok-t  { font-size: .75rem;    line-height: 1rem }
.nadsek    { font-size: .6875rem;  line-height: .8125rem; font-weight: 600;
             letter-spacing: .6px; text-transform: uppercase }
.druhotny  { color: var(--text-secondary) }

/* --- 4 · Hlavička ------------------------------------------------------- */
.hlavicka {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: .0625rem solid var(--separator);
}
.hlavicka > .pas {
  min-height: 3.75rem;            /* 60 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 0 1rem;
}
/* Názov stránky ako obyčajný text, celý v `text`, BEZ akcentu na druhom slove.
   Nie je to wordmark a netvári sa ním (U6). Wordmark je na webe raz — v pásme. */
.hlavicka .nazov {
  font-size: 1.0625rem;
  line-height: 1.375rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
}
.hlavicka .vpravo { display: flex; align-items: center; gap: 1.25rem }
.hlavicka a.tichy,
.hlavicka a.spat {
  color: var(--accent);
  font-size: .9375rem;
  min-height: 2.75rem;            /* cieľ 44 */
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  text-decoration: none;
}
.hlavicka a.tichy:hover,
.hlavicka a.spat:hover { text-decoration: underline }

/* --- 5 · Obsahový pás --------------------------------------------------- */
.pas { padding: 0 1rem }
.pas-obsah { padding: 0 1rem }

/* --- 6 · Navigačná cestička --------------------------------------------- */
.cesticka {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .375rem;
  min-height: 2.75rem;
  font-size: .8125rem;
  line-height: 1.125rem;
  color: var(--text-secondary);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cesticka li { display: flex; align-items: center; gap: .375rem }
.cesticka a { color: var(--accent) }
.cesticka [aria-current="page"] { color: var(--text-primary) }

/* --- 7 · Filtre: rad čipov ---------------------------------------------- */
.filtre {
  display: flex;
  align-items: center;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: .25rem;
}
/* Kým je niektorý panel otvorený, rad čipov NESMIE orezávať.
   `overflow-x: auto` totiž podľa CSS prepne aj zvislú os z `visible` na `auto`
   — a panel, ktorý visí pod radom ako `position: absolute`, sa tým oreže na
   výšku toho radu a je neviditeľný. Filter sa potom tvári, že nefunguje:
   človek klikne na čip, v DOM sa panel otvorí, ale na obrazovke nie je nič.
   Triedu prepína `web.js` pri otváraní a zatváraní panelov.
   Nájdené 3. 10. 2026, keď Fero hlásil „filter nefunguje" v Safari aj v Chrome. */
.filtre.panel-otvoreny { overflow: visible }
.filtre::-webkit-scrollbar { display: none }
.cip {
  min-height: 2.75rem;
  border-radius: 1.375rem;
  padding: 0 .875rem;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  flex: none;
  background: var(--surface);
  border: 1px solid var(--control-border);
  font: inherit;
  font-size: .9375rem;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
}
.cip:hover { background: var(--hover) }
/* Zapnutý čip nesie informáciu TROMI spôsobmi — plná plocha, hrúbka písma,
   krížik na zrušenie. Farba je tretia v poradí, nie prvá. */
.cip[aria-pressed="true"],
.cip.zapnuty {
  background: var(--accent-fill);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  padding: 0 1rem;
}
.cip .krizik { font-size: .625rem; font-weight: 700 }
.zoradenie { margin-left: auto; flex: none }

/* Rozbalený panel čipu */
.cip-obal { position: relative; flex: none }
.panel {
  position: absolute;
  z-index: 15;
  top: calc(100% + .25rem);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: .875rem;
  box-shadow: 0 .625rem 1.875rem rgba(0, 0, 0, .14);
  padding: .375rem;
  min-width: min(16.375rem, calc(100vw - 2rem));
  max-height: 60vh;
  overflow-y: auto;
}
@media (prefers-color-scheme: dark) {
  .panel { box-shadow: 0 .625rem 1.875rem rgba(0, 0, 0, .5) }
}
.panel button {
  width: 100%;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 .625rem;
  border: 0;
  border-radius: .5625rem;
  background: transparent;
  font: inherit;
  font-size: .9375rem;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.panel button:hover { background: var(--hover) }
.panel .zaskrt {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: .4375rem;
  border: 2px solid var(--control-border);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.panel button[aria-pressed="true"] .zaskrt {
  background: var(--accent-fill);
  border-color: transparent;
}
.panel .pocet {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}
/* Vypnutý riadok (nula ponúk) je JEDINÉ miesto na webe s `text-neaktívny`
   a NIKDY nenesie informáciu — vedľa je vždy počet, teda `0`. */
.panel button[disabled] { color: var(--text-disabled); cursor: default }
.panel button[disabled] .zaskrt { border-color: var(--separator) }
.panel button[disabled] .pocet { color: var(--text-disabled) }

/* --- 8 · Karta ponuky — presne tá istá ako v appke (5.2) ---------------- */
.zoznam { list-style: none; margin: 0; padding: 0 }
.karta {
  display: block;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  padding: 1rem;
  margin-bottom: .75rem;
  color: inherit;
  text-decoration: none;
}
.karta:hover { background: var(--hover) }
/* Od 5. 10. 2026 (Fero) je najväčším textom karty **názov pozície**, nie mzda.
   Dovtedy platilo opačné pravidlo („mzda je najväčší text na karte“, 03-vizual.md 5.2):
   porovnávanie mzdy sa bralo ako prvý dôvod, prečo niekto appku otvorí. Fero to obrátil —
   človek najprv hľadá, ČO to je za prácu, a až potom za koľko. Mzda si nechala tabulárne
   číslice, lebo mzdy stoja na kartách pod sebou a porovnávajú sa medzi nimi. */
.karta .mzda {
  font-size: 1.0625rem;
  line-height: 1.375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: .375rem;
}
.karta .mzda span {
  display: block;
  font-size: .8125rem;
  line-height: 1.125rem;
  font-weight: 400;
  color: var(--text-secondary);
  margin-top: .125rem;
}
/* Ponuka bez zverejnenej mzdy (Q35, Fero 3. 10. 2026). „Mzda je najväčší
   text" platí pre ČÍSLO. Keby „Mzda neuvedená" dostalo 22 Bold, najväčší text
   na karte by bol údaj, ktorý tam nie je — a karta by vyzerala ako chyba,
   nie ako ponuka. Zostáva na svojom mieste a vo svojom riadku, len prestane
   kričať. Lenka to ešte nevidela — `OTAZKY.md` J31. */
.karta .mzda.bez-mzdy {
  font-size: .9375rem;
  line-height: 1.375rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.karta .pozicia { font-size: 1.375rem; line-height: 1.75rem; font-weight: 700; letter-spacing: -.01em }
.karta .miesto  { font-size: .8125rem; line-height: 1.125rem; margin-top: .5rem }
.karta .rezim   { font-size: .8125rem; line-height: 1.125rem; color: var(--text-secondary) }
.karta .stitky  { display: flex; gap: .375rem; flex-wrap: wrap; margin-top: .75rem }

/* Stlmená plocha je v tomto dizajne vyhradená NEPLATNEJ ponuke (5.3).
   Nepreložená ponuka stlmená NIE JE — zamieňať tie dva stavy by bola chyba. */
.stlmene {
  background: var(--surface-muted);
  border: 1px dashed var(--control-border);
}
.stlmene .mzda, .stlmene .pozicia, .stlmene .miesto, .stlmene .hodnota { color: var(--text-secondary) }

/* --- 9 · Štítky (5.7) --------------------------------------------------- */
.stitok {
  min-height: 1.5rem;
  border-radius: .5rem;
  padding: .125rem .5rem;
  display: inline-flex;
  align-items: center;
  font-size: .75rem;
  line-height: 1rem;
  background: var(--tag-bg);
  border: 1px solid var(--separator);
  color: var(--text-secondary);
  white-space: nowrap;
}
.stitok.vyrazny { background: var(--surface); border: 1.5px solid var(--text-primary);
                  color: var(--text-primary); font-weight: 600 }
.stitok.nove    { background: var(--accent-tint); border-color: transparent;
                  color: var(--accent); font-weight: 600 }
.stitok.zla     { background: var(--danger-tint); border-color: transparent;
                  color: var(--danger); font-weight: 600 }
/* `Po nemecky`: paleta `pozor`, nie `chyba` — nie je to chyba a prejde to samo.
   Kontrast 5,3:1 vo svetle, 8,46:1 v tme. Nesie SLOVO, nikdy vlajku. */
.stitok.jazyk   { background: var(--warning-tint); border-color: transparent;
                  color: var(--warning); font-weight: 600 }

/* --- 10 · Skupina riadkov (5.4) ----------------------------------------- */
.nadsekcia {
  font-size: .6875rem;
  line-height: .8125rem;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0 0 .5rem .25rem;
  margin: 1.5rem 0 0;
}
.skupina {
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: .875rem;
  overflow: hidden;
  margin: 0;
}
.skupina .riadok {
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .625rem 1rem;
  border-top: .0625rem solid var(--separator);
}
.skupina .riadok:first-child { border-top: 0 }
.skupina .kluc    { font-size: .9375rem; line-height: 1.25rem; color: var(--text-secondary); flex: none; margin: 0 }
.skupina .hodnota { font-size: .9375rem; line-height: 1.25rem; font-weight: 600; text-align: right; margin: 0 }
/* Mzda je NAJVÄČŠÍ text stránky — väčší než `h1`. Google číta značku,
   človek číta číslo (koncept 7.2). */
.skupina .mzda-riadok { padding: 1rem; border-bottom: .0625rem solid var(--separator) }
.skupina .mzda-riadok .velka {
  font-size: 1.75rem;
  line-height: 2.125rem;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin: .375rem 0 0;
}
.skupina .mzda-riadok .pod { font-size: .8125rem; line-height: 1.125rem;
                             color: var(--text-secondary); margin: .125rem 0 0 }
/* Detail ponuky bez zverejnenej mzdy — to isté ako na karte. Pod týmto
   riadkom je `payNote`, keď ho inzerát má; to je potom jediné, čo o plate
   vieme, a nesmie to vyzerať ako podtitulok k veľkému nič. */
.skupina .mzda-riadok .velka.bez-mzdy {
  font-size: 1.0625rem;
  line-height: 1.375rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-secondary);
}

/* --- 11 · Blok a pásik (5.10) ------------------------------------------- */
.blok {
  border-radius: .875rem;
  padding: 1rem;
  border: 1.5px solid var(--accent);
  background: var(--accent-tint);
}
.blok > .hlava {
  font-size: 1.0625rem;
  line-height: 1.375rem;
  font-weight: 600;
  color: var(--accent);
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  margin: 0;
}
.blok > .telo { font-size: 1.0625rem; line-height: 1.375rem; color: var(--text-primary); margin: .375rem 0 0 }
.blok.pozor { border-color: var(--warning); background: var(--warning-tint) }
.blok.pozor > .hlava { color: var(--warning) }
.blok.chyba { border-color: var(--danger); background: var(--danger-tint) }
.blok.chyba > .hlava { color: var(--danger) }

.pasik {
  border-radius: .875rem;
  padding: .75rem 1rem;
  border: 1.5px solid var(--warning);
  background: var(--warning-tint);
}
.pasik > .hlava {
  font-size: .8125rem;
  line-height: 1.125rem;
  font-weight: 600;
  color: var(--warning);
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  margin: 0;
}
.pasik > .telo { font-size: .8125rem; line-height: 1.125rem; margin: .1875rem 0 0 }

/* --- 12 · Tri dôvody ---------------------------------------------------- */
.dovody { list-style: none; margin: 0; padding: 0 }
.dovody li { display: flex; gap: .75rem; margin-top: .875rem }
.dovody .ikona {
  width: 1.875rem;
  height: 1.875rem;
  flex: none;
  border-radius: .5rem;
  border: 1px solid var(--separator);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}
.dovody b    { display: block; font-size: .9375rem; line-height: 1.25rem; color: var(--text-primary) }
/* `li > span > span`, NIE `.dovody span` (Ferov nález 16. 10. 2026, snímka
   z `/ponuka/umyvac-riadu-gran-abwa`). Pôvodný zápis chytal KAŽDÝ vnorený
   `<span>`, teda aj `<span lang="de">Lebenslauf</span>` uprostred vety —
   a `display: block` ho vyhodil na vlastný riadok, takže za ním zostala
   bodka samotná na treťom riadku. Vyzeralo to ako nedorobený text. Táto
   cesta chytá presne ten jeden `<span>`, ktorý je druhým riadkom dôvodu,
   a jazykovú značku vo vete necháva na pokoji. */
.dovody li > span > span { display: block; font-size: .8125rem; line-height: 1.125rem; color: var(--text-secondary) }

/* --- 13 · Pásmo Appka --------------------------------------------------- */
/* Plocha POVRCH, nie `akcent-tón`: `03-vizual.md` 10.4 — wordmark smie ležať
   len na `pozadie` alebo `povrch`, nikdy na podfarbení. Rám v akcente zostal,
   takže pásmo je stále zjavne naše.
   Pamätať sa to dá tak: akcentový TÓN = malý blok pri tlačidle (detail),
   POVRCH s akcentovým rámom = pásmo s wordmarkom (zoznam, stránka Appka). */
.pasmo {
  background: var(--surface);
  border: 1.5px solid var(--accent);
  border-radius: .875rem;
  padding: 1.5rem;
}
/* Ochranná zóna wordmarku: vnútro pásma 24 + ďalších 18 = 42 pt (10.2).
   Zóna platí pre wordmark, nie pre celé pásmo. */
.wordmark-zona { padding: 1.125rem }
.wordmark {
  font-size: 2.375rem;            /* 38 */
  line-height: 2.625rem;
  font-weight: 700;
  letter-spacing: -.8px;
  margin: 0;
}
.wordmark span { display: block }
.wordmark .akcent { color: var(--accent) }

/* Odznak App Store — OFICIÁLNY ASSET OD APPLE, od 14. 10. 2026 skutočný.
   Súbory: `public/app-store-sk-black.svg` a `public/app-store-sk-white.svg`
   (slovenský „Stiahnuť na App Store", Apple Marketing Tools — odkiaľ presne
   a kedy stiahnuté je v `STAV.md`).

   ČO SA TU NESMIE. Odznak sa neprekresľuje, neprebarvuje, needituje a
   nedeformuje — Apple ho dáva hotový a platí to, ako prišiel. CSS tu preto robí
   presne dve veci: dá mu šírku a podrží jeho vlastný pomer strán. Tmavý režim
   NEPREBARVUJE čiernu verziu filtrom, ale prepne na BIELU verziu od Apple — a
   robí to `<picture>` v HTML, nie táto trieda. Vybrať si z verzií, ktoré Apple
   dodáva, dovolené je; vyrobiť si tretiu nie.

   ŽIADNY HOVER. Zmena pozadia pod odznakom alebo jeho stlmenie je zásah do
   vzhľadu assetu. Odozvu na klávesnicu dáva `:focus-visible` (časť 2), ktorý
   kreslí obrys VEDĽA odznaku, nie do neho.

   VOĽNÉ MIESTO. Apple žiada okolo odznaku aspoň 1/4 jeho výšky. Pri šírke 10rem
   je výška 160 / 2,9916 = 53,5 px, teda treba 13,4 px. Nad odznakom je
   `.medzera` (24 px), pod ním `.pod-16` (16 px) a po stranách vnútro pásma
   (24 px) — podmienka je splnená a táto trieda preto žiadny vlastný odstup
   nepridáva. Keby sa tie odstupy menili, treba to prepočítať.

   Klikacia plocha má 160 × 53,5 px, teda viac než 44 pt v oboch smeroch. */
.odznak { display: block; width: 10rem; max-width: 100% }
.odznak img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 119.66407 / 40;   /* presne pomer assetu — miesto drží aj pred načítaním */
}

/* Zástupná plocha. Kreslí sa LEN vtedy, keď je `appStoreUrl` v
   `generator/konfig.json` prázdny — dnes nie je a táto vetva sa negeneruje.
   Zostáva tu zámerne: odznak Apple sa bez funkčného odkazu ukazovať nesmie,
   takže keby sa pole raz vyprázdnilo, stránka musí mať čo nakresliť. */
.odznak-zastupny {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 2.75rem;
  width: 10rem;
  border: 1.5px dashed var(--control-border);
  border-radius: .5rem;
  font-size: .6875rem;
  line-height: 1.2;
  color: var(--text-secondary);
  text-decoration: none;
  padding: .25rem;
}

/* --- 14 · Tlačidlá (5.1) ------------------------------------------------ */
.tlacidlo {
  min-height: 3.5rem;
  border-radius: .875rem;
  background: var(--accent-fill);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .0625rem;
  cursor: pointer;
  border: 1px solid transparent;
  text-align: center;
  padding: .5rem .875rem;
  text-decoration: none;
  font: inherit;
  width: 100%;
}
.tlacidlo:hover { background: var(--accent-pressed); color: #fff }
.tlacidlo .popis { font-size: 1rem; line-height: 1.3125rem; font-weight: 600 }
.tlacidlo .cena  { font-size: .8125rem; line-height: 1.0625rem; color: rgba(255, 255, 255, .82) }
.tlacidlo + .tlacidlo { margin-top: .75rem }
.tlacidlo.druhotne {
  min-height: 3.25rem;
  background: var(--surface);
  color: var(--text-primary);
  border: 1.5px solid var(--control-border);
}
.tlacidlo.druhotne:hover { background: var(--hover); color: var(--text-primary) }
.tlacidlo.druhotne .cena { color: var(--text-secondary) }
.tlacidlo.tiche { min-height: 3rem; background: transparent; color: var(--accent); border: 0 }
.tlacidlo.tiche:hover { background: var(--hover); color: var(--accent-pressed) }

/* --- 15 · Prázdny stav (časť 6) ---------------------------------------- */
.prazdne { text-align: center; padding: 3rem 1rem 1.5rem }
.prazdne .kruh {
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 2.375rem;
  background: var(--tag-bg);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.prazdne h2 { margin: 0; font-size: 1.375rem; line-height: 1.75rem; font-weight: 700; letter-spacing: -.01em }
.prazdne p  { margin: .5rem auto 0; color: var(--text-secondary); max-width: 30ch }
.prazdne .akcia { margin-top: 1.5rem; text-align: left; max-width: 24rem; margin-inline: auto }
.prazdne.vnutri { padding: 2rem 1rem 1rem }
.prazdne.vnutri .kruh { width: 4.125rem; height: 4.125rem; border-radius: 2.0625rem }
.prazdne.vnutri h2 { font-size: 1.25rem; line-height: 1.5625rem; font-weight: 600 }

/* --- 16 · Prilepená dolná lišta (mobil) -------------------------------- */
/* Tá istá dolná lišta ako v appke (5.1), len bez bezpečnej zóny iPhonu —
   na webe pod ňou sedí adresný riadok prehliadača. */
.lista-dole {
  position: sticky;
  bottom: 0;
  z-index: 18;
  background: var(--bar);
  backdrop-filter: blur(20px);
  border-top: .0625rem solid var(--separator);
  padding: .75rem 1rem;
}

/* --- 17 · Pätička ------------------------------------------------------ */
.paticka {
  background: var(--surface);
  border-top: .0625rem solid var(--separator);
  padding: 1.5rem 1rem;
  margin-top: 2rem;
}
.paticka .stlpce { display: flex; gap: 3rem; flex-wrap: wrap }
.paticka .stlpec { min-width: 9.375rem }
.paticka h2 {
  margin: 0 0 .5rem;
  font-size: .6875rem;
  line-height: .8125rem;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.paticka ul { list-style: none; margin: 0; padding: 0 }
.paticka li a {
  display: block;
  font-size: .8125rem;
  line-height: 1.125rem;
  padding: .5rem 0;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}
.paticka .fakt {
  font-size: .8125rem;
  line-height: 1.125rem;
  color: var(--text-secondary);
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: .0625rem solid var(--separator);
}

/* --- 18 · Telo textu --------------------------------------------------- */
h1 { margin: 0 }
.sekcia { font-size: 1.25rem; line-height: 1.5625rem; font-weight: 600; margin: 1.5rem 0 0 }
.odstavec { font-size: 1.0625rem; line-height: 1.5rem; margin: .5rem 0 0; max-width: 75ch }
.odrazky { margin: .5rem 0 0; padding-left: 1.25rem }
.odrazky li { font-size: 1.0625rem; line-height: 1.5rem; margin-top: .25rem }
.medzera    { height: 1.5rem }
.medzera.s  { height: .75rem }
.medzera.l  { height: 2rem }
[lang="de"] { font-style: normal }

/* --- 18c · Blog -------------------------------------------------------- */
/* LENKA PRE BLOG DIZAJN NEKRESLILA (`design/praca-v-nemecku-web-uchadzaci/`
   má koncept, wireframy a mockupy pre zoznam a detail ponuky, blog v nich
   nie je) — `OTAZKY.md` J114. Preto tu nie je ani jedna nová farba, ani jedna
   nová veľkosť písma a ani jedna nová miera: výpis článkov stojí na `.t2`,
   `.poznamka` a `.odstavec`, oddeľovač je `--separator` a odstupy sú tie isté
   `.medzera`, ktoré má zvyšok webu. Šírka stĺpca je `.odstavec` (75ch) —
   to je to, čo zadanie žiada ako „riadok, ktorý sa dá sledovať očami". */
.blog-vypis { list-style: none; margin: 1.5rem 0 0; padding: 0 }
.blog-vypis li {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: .0625rem solid var(--separator);
}
/* Posledný článok spodnú linku NEMÁ — pod ňou už nič nie je a vyzeralo by to
   ako zoznam, ktorý sa nedonačítal. Pri jednom článku je to celý rozdiel
   medzi „jeden článok" a „niečo sa pokazilo" (zadanie 15. 10. 2026). */
.blog-vypis li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0 }
.blog-vypis h2 { margin: 0 }
.blog-vypis h2 a { text-decoration: none }
.blog-vypis h2 a:hover { text-decoration: underline }

/* Tabuľka zdrojov v článku. Je to dôkazová časť textu, takže sa číta — nie
   prehliada —, a preto NIE JE vo vodorovnom posúvaní: text, ktorý treba ťahať
   do strany, nikto nečíta. Na širokej obrazovke je to tabuľka, pod 48 rem sa
   každý riadok prekreslí na blok s názvami stĺpcov pred hodnotami. Názov berie
   z `data-stlpec`, ktorý píše generátor z hlavičky tabuľky — takže to platí
   pre každú ďalšiu tabuľku v každom ďalšom článku bez zmeny CSS. */
.tabulka { margin: 1rem 0 0 }
table.udaje {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.25rem;
  text-align: left;
}
table.udaje th,
table.udaje td {
  padding: .5rem .5rem .5rem 0;
  border-bottom: .0625rem solid var(--separator);
  vertical-align: top;
}
table.udaje th { font-weight: 600; color: var(--text-secondary) }
/* Dlhá adresa v bunke nerozšíri tabuľku za okraj obrazovky. */
table.udaje td code { overflow-wrap: anywhere }
table.udaje a { overflow-wrap: anywhere }

@media (max-width: 47.9375rem) {
  table.udaje thead { position: absolute; left: -9999px }
  table.udaje tr { display: block; padding: .75rem 0; border-bottom: .0625rem solid var(--separator) }
  table.udaje tr:last-child { border-bottom: 0 }
  table.udaje td { display: block; border: 0; padding: 0 0 .375rem }
  table.udaje td:last-child { padding-bottom: 0 }
  /* Názov stĺpca pred hodnotou. Bez neho je z tabuľky na telefóne tri riadky
     textu bez toho, čo ktorý znamená. */
  table.udaje td::before {
    content: attr(data-stlpec) ": ";
    color: var(--text-secondary);
    font-size: .8125rem;
  }
  /* Bunka bez názvu stĺpca (tabuľka bez hlavičky) dvojbodku nedostane. */
  table.udaje td[data-stlpec=""]::before { content: "" }
}

/* --- 18d · Videá ------------------------------------------------------- */
/* LENKA PRE VIDEÁ DIZAJN NEKRESLILA — to isté ako pri blogu (`OTAZKY.md` J114,
   teraz J125). Preto tu nie je ani jedna nová farba, ani jedna nová veľkosť
   písma a ani jedna nová miera: výpis videí je ten istý zoznam ako `.blog-vypis`
   (dedí z neho všetko a mení len názov triedy), náhľad má zaoblenie karty
   (1rem), plocha pod ním je `--surface-sunken` a text v rohu je `.stitok-t`.

   NA STRÁNKE VIDEA JE NÁHĽAD TLAČIDLO, VO VÝPISE ODKAZ, a nie je to
   nedôslednosť. Na stránke videa je to `<button>`, pretože nikam nevedie — po
   stlačení sa na jeho mieste objaví prehrávač; odkaz, ktorý nie je odkaz, by
   čítačka ohlásila nepravdivo a klávesnica by s ním zaobchádzala ako s odkazom
   (Enter áno, medzerník nie). Vo výpise sa naopak ide na stránku videa, takže
   tam je to `<a>` — a je to celá karta, nie obrázok s odkazom a titulok
   s odkazom (dva odkazy na to isté miesto sú v čítačke dva riadky toho
   istého). Plocha, rám, zaoblenie a 16 : 9 sú pre oba rámy to isté, a tak sú
   napísané raz.

   `aspect-ratio: 16 / 9` je tu dvakrát — na obrázku aj na ráme —, a nie je to
   zdvojenie: miesto musí držať aj PRED stiahnutím náhľadu (inak stránka pri
   načítaní poskočí) a potom ešte raz, keď `<img>` nahradí `<iframe>`. */

/* VÝPIS JE OD 16. 10. 2026 MRIEŽKA KARIET, nie zoznam s linkami medzi
   položkami (Ferov pokyn: *„náhľady videa a dole len krátky popis, lebo tie
   fotky videí sú pekné"*). Oddeľovač zmizol zámerne: keď je najväčšou vecou
   položky obrázok s rámom, linka pod ním je druhá vodorovná čiara na tom istom
   mieste. Mriežka je TÁ ISTÁ, akú majú karty ponúk (`.zoznam` v časti 19) —
   jeden stĺpec na telefóne, dva od 48 rem, `gap: 1.5rem`, a tretí stĺpec
   nepribudne ani na 1440. Žiadna nová miera a žiadny nový zlom. */
.videa-vypis { list-style: none; margin: 1.5rem 0 0; padding: 0 }
.videa-vypis li { margin-bottom: 1.5rem }
.videa-vypis li:last-child { margin-bottom: 0 }
/* Celá karta je `<a>`. `color: inherit` a `text-decoration: none` sú to isté
   odstrojenie, aké má `.karta` — podčiarknutie by prebehlo aj cez dátum
   a popis, teda cez tri odstavce. Pri myši sa podčiarkne titulok a rozsvieti
   kruh so šípkou; to je celé zvýraznenie, ktoré karta ponúk tiež má. */
/* `:hover` je tu kvôli `a:hover { color: var(--accent-pressed) }` v časti 2 —
   bez neho by sa pri myši zmodral CELÝ text karty (titulok, dátum aj popis),
   lebo žiadny z nich vlastnú farbu nemá a farbu dedí z `<a>`. Karta ponuky
   to nerobí len preto, že `.pozicia`, `.mzda` a `.miesto` si farbu nastavujú
   samy. Dve triedy prebijú `a:hover`. */
.video-karta,
.video-karta:hover { display: block; color: inherit; text-decoration: none }
.video-karta h2 { margin: .75rem 0 0 }
/* Karta položky, ktorá je LEN TEXT (20. 10. 2026, `J212`). Náhľad je vlastnosť
   videa, takže pri texte na karte nie je a titulok je prvý — tých .75rem nad
   ním by potom bola medzera nad ničím. Žiadna nová trieda tu nie je zámerne:
   stačí, že nadpis je prvý prvok karty. */
.video-karta h2:first-child { margin-top: 0 }
.video-karta:hover h2 { text-decoration: underline }
/* Jedna veta pod náhľadom. `line-clamp` je POISTKA, nie spôsob krátenia —
   kráti sa na vetu v `prva_veta()` v generátore, aby na karte nestála
   trojbodka v strede vety. Toto drží kartu v mriežke aj vtedy, keď sa raz do
   `kratkyPopis` napíšu tri vety. */
.video-popis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.video { margin: 1.5rem 0 0 }
.video-spust,
.video-nahlad {
  display: block;
  position: relative;
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--surface-sunken);
}
/* Odstrojenie tlačidla. Odkaz vo výpise nič z toho nepotrebuje. */
.video-spust {
  width: 100%;
  padding: 0;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
}
.video-spust img,
.video-nahlad img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* Kruh so šípkou v strede náhľadu. Plocha je biela s priehľadnosťou a šípka
   akcentová — a je to jediné miesto na webe, kde je biela natvrdo aj v tme:
   leží na fotografii, nie na ploche z palety, takže `--surface` by sa raz
   stratil v svetlom zábere a raz v tmavom. Informáciu nenesie sama (vedľa je
   dĺžka a nad ňou titulok) a `aria-label` tlačidla hovorí „Prehrať video". */
.video-hrat {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-fill);
}
/* `content-box` NIE JE ozdoba, bez neho tam ŠÍPKA NEBOLA. Web má v časti 1
   `* { box-sizing: border-box }`, takže `width: 32` a `padding: 1rem` znamenalo
   32 − 16 − 16 = 0 px na samotnú kresbu: z kruhu zostala biela škvrna bez
   šípky a vyzerala ako obrázok, ktorý sa nedonačítal. Platilo to od začiatku
   a na stránke videa aj vo výpise; všimlo sa to 16. 10. 2026 pri náhľadoch
   vo výpise. `content-box` vráti kresbe jej 32 px a kruh má 64 px. */
.video-hrat svg {
  box-sizing: content-box;
  background: rgba(255, 255, 255, .92);
  border-radius: 50%;
  padding: 1rem;
  box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .25);
}
.video-spust:hover .video-hrat svg,
.video-karta:hover .video-hrat svg { background: #fff }
/* Dĺžka v pravom dolnom rohu. Tmavá plocha s bielym textom je kontrast 14:1
   a platí nad svetlým aj tmavým záberom; `tabular-nums` drží dvojbodku na
   mieste, keď je videí vedľa seba viac. */
.video-dlzka {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  background: rgba(0, 0, 0, .78);
  color: #fff;
  border-radius: .25rem;
  padding: .125rem .375rem;
  font-size: .75rem;
  line-height: 1rem;
  font-variant-numeric: tabular-nums;
}
.video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 1rem;
  background: var(--surface-sunken);
}

/* --- 18e · Mapa na stránke ponuky -------------------------------------- */
/* LENKA PRE MAPU DIZAJN NEKRESLILA — to isté ako pri blogu a videách. Preto tu
   nie je ani jedna nová farba, ani jedna nová veľkosť písma a ani jedna nová
   miera: rám je zaoblenie karty (1rem) a `--card-border`, plocha je
   `--surface-sunken`, nadpis je `.nadsek` a veta pod ním `.poznamka`.

   PRED KLIKNUTÍM JE TO TLAČIDLO, PO KLIKNUTÍ RÁM S MAPOU — ten istý vzor, akú
   má video, vrátane dôvodu, prečo je to `<button>` a nie odkaz: nikam to
   nevedie, mapa sa objaví na jeho mieste.

   POMER 16 : 9 JE NA OBOCH a nie je to zdvojenie: miesto musí držať aj PRED
   zobrazením mapy (inak stránka po kliknutí poskočí) a potom ešte raz, keď
   tlačidlo nahradí `<iframe>`. */
.mapa { margin: 1.5rem 0 0 }
.mapa-spust,
.mapa iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  background: var(--surface-sunken);
}
.mapa-spust {
  margin: .5rem 0 0;
  padding: 0;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  /* Špendlík a názov mesta v strede plochy — jediný obsah tlačidla. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .375rem;
}
.mapa-spust:hover { background: var(--hover) }
.mapa-bod { color: var(--accent-fill); line-height: 0 }
.mapa-text { display: flex; flex-direction: column; align-items: center }
/* „Zobraziť mapu" je ten text, ktorý hovorí, čo sa stane — preto je druhotný
   a menší než názov mesta, nie naopak. */
.mapa-text span { color: var(--text-secondary); font-size: .8125rem; line-height: 1rem }
.mapa iframe { margin: .5rem 0 0; border-color: var(--card-border) }

/* --- 18b · Niekoľko tried namiesto `style="…"` -------------------------- */
/* Vo vygenerovanom HTML nie je ANI JEDEN inline `style`, a nie je to vkus:
   bez inline štýlov môže mať stránka `Content-Security-Policy` so
   `style-src 'self'` (`firebase.json`). Toto je tá cena — šesť tried. */
.bez-okraja  { margin: 0 }
.pod-16      { margin: 1rem 0 0 }
.pod-6       { margin: .375rem 0 0 }
.text-vlavo  { text-align: left }
.silny       { color: var(--text-primary) }
.varovanie   { color: var(--danger); margin: .75rem 0 0 }
.panel .rada { padding: .5rem .625rem; margin: 0 }
/* Na mobile je hlavná akcia v prilepenej lište, na desktope v stĺpci — toto je
   to, čo zabráni, aby tam bola dvakrát. */
.len-desktop { display: none }

/* --- 19 · Dve šírky: mobil je hlavný rám, desktop je ten istý web ------ */
/* Tablet 768: dva stĺpce kariet. Odvodené, Lenka to nekreslila (koncept 7.2). */
@media (min-width: 48rem) {
  .zoznam { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start }
  .karta { margin-bottom: 0 }
  /* Výpis videí dedí mriežku ponúk, nie vlastnú (časť 18d). `align-items:
     start` je tu podstatné: karty sú rôzne vysoké (titulok na jeden alebo dva
     riadky) a bez neho by sa krátka karta natiahla na výšku vedľajšej a jej
     popis by visel v prázdne. */
  .videa-vypis { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start }
  .videa-vypis li { margin-bottom: 0 }
}

/* Desktop 960+: obsah 960 centrovaný. Tretí stĺpec kariet NEPRIBUDNE ani na
   1440 — tri karty v rade pri dvanástich ponukách vyzerajú ako katalóg.
   Prečo 960 a nie 1320 ako na webe pre firmy: tam je tabuľka a šírka je
   funkcia, tu sa čítajú ponuky a 960 drží riadok na ~75 znakov. */
@media (min-width: 64rem) {
  .hlavicka > .pas { min-height: 4.5rem; padding: 0 }
  .hlavicka > .pas,
  .pas-obsah,
  .paticka > div { width: 60rem; margin: 0 auto; padding: 0 }

  /* Detail: 600 + 24 + 336 = 960. Umiestnenie je v mriežke, takže poradie
     v DOM zostáva to mobilné (fakty → appka → popis) a nič sa needituje
     dvakrát. Vedľajší stĺpec je prilepený pri skrolovaní. */
  .detail { display: grid; grid-template-columns: 37.5rem 21rem; gap: 1.5rem; align-items: start }
  .detail > .d-fakty   { grid-column: 1; grid-row: 1 }
  .detail > .d-text    { grid-column: 1; grid-row: 2 }
  .detail > .d-podobne { grid-column: 2; grid-row: 3 }

  /* PREČO JE PANEL V OBALE A NIE PRILEPENÝ SÁM (Ferov nález 16. 10. 2026,
     snímka z `/ponuka/umyvac-riadu-gran-abwa`).

     Do dneška bol `position: sticky` priamo na `.d-akcia` s `grid-row: 1 / span 2`
     a očakávalo sa, že ho mriežka zastaví na konci druhého riadka. NEZASTAVILA:
     prilepený prvok sa posúval ďalej po celej výške `.detail` a kreslil sa
     PONAD „Podobné ponuky" v treťom riadku — namerané prekrytie bolo 319 px.
     Navyše sa kreslil navrchu aj bez `z-index`, lebo polohovaný prvok má
     prednosť pred prvkom v toku, nech je v DOM kdekoľvek.

     Obal je bežný prvok mriežky, drží presne prvé dva riadky (`align-self:
     stretch`, inak by sa zmrštil na výšku panela a panel by sa nelepil vôbec)
     a prilepenie je AŽ V ŇOM. Tým je koniec posúvania tam, kde končí druhý
     riadok, a tretí riadok je pod panelom nedotknutý. */
  .detail > .d-akcia-obal { grid-column: 2; grid-row: 1 / span 2; align-self: stretch }
  .d-akcia-obal > .d-akcia { position: sticky; top: 6rem }

  /* Bočný stĺpec má 21 rem. `.zoznam` má od 48 rem dva stĺpce kariet — to je
     pravidlo pre domovskú stránku, kde je naň 60 rem. Tu sa dve karty po
     197 px do 336 px nezmestili a zoznam pretekal 36 px za okraj obrazovky;
     nadpisy pozícií sa lámali po slabikách. V bočnom stĺpci je teda zoznam
     jednostĺpcový — tak, ako je na telefóne. */
  .d-podobne .zoznam { display: block }
  .d-podobne .karta { margin-bottom: .75rem }
  .d-podobne .karta:last-child { margin-bottom: 0 }

  /* Dolná lišta je vec palca na telefóne. Na desktope je tlačidlo v bloku. */
  .lista-dole { display: none }

  .len-desktop { display: block }

  .pasmo-dvojica { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start }
}