/* =============================================================================
   osetreniemotora.sk — nový dizajn
   Kostra je prevzatá z osetreniepodvozku.sk, paleta je značková BG: čierne
   plochy a žltá #ffdf1b ako jediný akcent — presne ako bgprod.com a ako logo
   v hlavičke. Žltá je vždy VÝPLŇ (tlačidlo, štítok, číslo kroku), nikdy text
   na bielom — na to je --znacka-text.
   ========================================================================== */

:root {
  /* Žltá #ffdf1b je z loga BG (tú istú mali aj tlačidlá v pôvodnom Divi).
     Čierna nesie celý web, žltá je jediný akcent — dvojfarebnosť je zámer,
     BG nemá tretiu značkovú farbu. */
  --noc: #111111;
  --noc-mekka: #1c1c1e;
  --znacka: #ffdf1b;          /* výplň: tlačidlá, štítky, čísla krokov */
  --znacka-tmava: #ebcb00;    /* hover výplne */
  --znacka-svetla: #ffdf1b;   /* štítky na tmavom podklade */
  --znacka-text: #111111;     /* tá istá rola, ale ako TEXT na svetlom */
  --na-znacke: #111111;       /* text na žltej ploche */
  /* BG nemá tretiu značkovú farbu — akcent je tá istá žltá. Červená z podvozku
     tu nemá čo robiť. Fókusový rámik je výnimka: žltý na bielom nie je vidieť. */
  --akcent: #ffdf1b;
  --akcent-tmava: #ebcb00;
  --fokus: #111111;
  /* upozornenie pri povinnom poli — jediné miesto, kde je na webe červená */
  --povinne: #d92b1f;
  --hrdza: #8e1a1e;
  --dym: #f4f4f5;
  --dym-tmava: #e4e4e7;
  --papier: #fff;
  --text: #18181b;
  --text-tlmeny: #5c5c66;
  --linka: #e1e1e6;
  --linka-tmava: rgba(255, 255, 255, 0.16);

  --sirka: 1180px;
  --sirka-uzka: 760px;
  --radius: 3px;

  --pismo-display: 'Montserrat', 'Segoe UI', Helvetica, Arial, sans-serif;
  --pismo-text: 'Open Sans', 'Segoe UI', Helvetica, Arial, sans-serif;

  --tien: 0 1px 2px rgba(17, 17, 17, 0.06), 0 8px 24px rgba(17, 17, 17, 0.08);
  --tien-vyssi: 0 2px 4px rgba(17, 17, 17, 0.08), 0 18px 48px rgba(17, 17, 17, 0.16);
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font: 400 17px/1.75 var(--pismo-text);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--znacka-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--znacka-tmava);
}

h1,
h2,
h3,
h4 {
  font-family: var(--pismo-display);
  color: var(--noc);
  margin: 0 0 0.6em;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

h1 {
  font-weight: 800;
  font-size: clamp(2.5rem, 6.4vw, 4.6rem);
  letter-spacing: -0.035em;
}

h2 {
  font-weight: 700;
  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
}

h3 {
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1.1em;
}

p:last-child {
  margin-bottom: 0;
}

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- stavebné diely */

.obal {
  width: 100%;
  max-width: var(--sirka);
  margin: 0 auto;
  padding: 0 24px;
}

.obal--uzky {
  max-width: var(--sirka-uzka);
}

.sekcia {
  padding: clamp(56px, 8vw, 104px) 0;
}

.sekcia--dym {
  background: var(--dym);
}

.sekcia--noc {
  background: var(--noc);
  color: rgba(255, 255, 255, 0.82);
}

.sekcia--noc h2,
.sekcia--noc h3 {
  color: #fff;
}

/* technický štítok — malý veľký-písmenový popisok so značkou vľavo */
.stitok {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font: 700 0.8125rem/1 var(--pismo-display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--znacka-svetla);
}

/* čiarka pred štítkom je jediné miesto, kde sa červená z loga objaví aj v texte */
.stitok::before {
  content: '';
  width: 26px;
  height: 3px;
  background: var(--akcent);
}

.sekcia--dym .stitok,
.sekcia .stitok {
  color: var(--znacka-text);
}

.sekcia--dym .stitok::before,
.sekcia .stitok::before {
  background: var(--akcent);
}

.hlava-sekcie {
  max-width: 46ch;
  margin-bottom: clamp(32px, 4vw, 56px);
}

/* :not(.stitok) je dôležité — inak toto pravidlo prebije veľkosť štítku
   a technické štítky v sekciách narastú z 11 px na 17 px */
.hlava-sekcie p:not(.stitok) {
  color: var(--text-tlmeny);
  font-size: 1.0625rem;
}

.sekcia--noc .hlava-sekcie p:not(.stitok) {
  color: rgba(255, 255, 255, 0.72);
}

/* tlačidlá */
.tlacidlo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid var(--znacka);
  border-radius: var(--radius);
  background: var(--znacka);
  color: var(--na-znacke);
  cursor: pointer;
  padding: 15px 28px;
  font: 700 0.8125rem/1 var(--pismo-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tlacidlo:hover {
  background: var(--znacka-tmava);
  border-color: var(--znacka-tmava);
  color: var(--na-znacke);
}

/* Na tmavomodrých plochách by bolo modré tlačidlo na modrom nečitateľné —
   tam sa obracia na biele s tmavým textom (rovnako to rieši dinitrol.com). */
.hero .tlacidlo:not(.tlacidlo--obrys),
.sekcia--noc .tlacidlo:not(.tlacidlo--obrys) {
  background: #fff;
  border-color: #fff;
  color: var(--noc);
}

.hero .tlacidlo:not(.tlacidlo--obrys):hover,
.sekcia--noc .tlacidlo:not(.tlacidlo--obrys):hover {
  background: var(--dym);
  border-color: var(--dym);
  color: var(--znacka-tmava);
}

.tlacidlo--obrys {
  background: transparent;
  border-color: currentColor;
  color: var(--noc);
}

.tlacidlo--obrys:hover {
  background: var(--noc);
  border-color: var(--noc);
  color: #fff;
}

.hero .tlacidlo--obrys {
  color: #fff;
}

.hero .tlacidlo--obrys:hover {
  background: #fff;
  border-color: #fff;
  color: var(--noc);
}

/* --------------------------------------------------------------------- hlavička */

.hlavicka {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--linka);
  backdrop-filter: saturate(140%) blur(8px);
}

.hlavicka__obal {
  display: flex;
  align-items: center;
  /* s prepínačom jazykov je lišta tesná — menší odstup drží položky na jednom riadku */
  gap: 14px;
  min-height: 72px;
}

.hlavicka__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.hlavicka__logo img {
  height: 44px;
  width: auto;
}

.hlavicka__menu {
  display: flex;
  gap: 4px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  /* bez toho sa ul zmestí tak, že sa názvy zalomia na dva riadky */
  flex: 0 0 auto;
}

.hlavicka__menu a {
  display: block;
  padding: 10px 9px;
  white-space: nowrap;
  color: var(--noc);
  font: 600 0.875rem/1 var(--pismo-display);
  text-decoration: none;
  border-radius: var(--radius);
}

.hlavicka__menu a:hover,
.hlavicka__menu a[aria-current='page'] {
  color: var(--znacka-text);
}

.hlavicka__telefon {
  font: 700 0.9375rem/1 var(--pismo-display);
  color: var(--noc);
  text-decoration: none;
  white-space: nowrap;
}

.hlavicka__telefon:hover {
  color: var(--znacka-text);
}

.hlavicka .tlacidlo {
  padding: 12px 20px;
  font-size: 0.75rem;
}

/* prepínač jazykov — drobný, aby nekonkuroval menu ani tlačidlu */
.jazyky {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.jazyky a,
.jazyky__aktivny {
  padding: 6px 7px;
  font: 700 0.75rem/1 var(--pismo-display);
  letter-spacing: 0.06em;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-tlmeny);
}

.jazyky a:hover {
  color: var(--znacka-text);
  background: var(--dym);
}

.jazyky__aktivny {
  color: var(--noc);
  background: var(--dym);
}

.hamburger {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  position: relative;
}

.hamburger span,
.hamburger span::before,
.hamburger span::after {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  background: var(--noc);
  transform: translateX(-50%);
  content: '';
}

.hamburger span {
  top: 50%;
  transform: translate(-50%, -50%);
}

.hamburger span::before {
  top: -6px;
  left: 0;
  transform: none;
}

.hamburger span::after {
  top: 6px;
  left: 0;
  transform: none;
}

@media (max-width: 1040px) {
  .hlavicka__menu,
  .hlavicka .tlacidlo {
    display: none;
  }

  /* Na mobile je lišta tesná: aktívny jazyk netreba ukazovať, stačí odkaz na
     ten druhý. Bez toho stránka pretekala doprava (435 px pri okne 375 px). */
  .jazyky {
    order: 1;
    margin-left: auto;
    gap: 0;
  }

  .jazyky__aktivny {
    display: none;
  }

  .jazyky a {
    padding: 6px 5px;
  }

  .hlavicka__logo img {
    height: 34px;
  }

  .hamburger {
    margin-left: 4px;
  }

  /* telefón necháme v lište stále — na mobile je to najčastejšia akcia */
  .hlavicka__telefon {
    margin-left: auto;
    order: 2;
  }

  .hamburger {
    display: block;
    order: 3;
    margin-left: 12px;
  }

  body.menu-otvorene .hlavicka__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    margin: 0;
    padding: 8px 16px 20px;
    background: #fff;
    border-bottom: 1px solid var(--linka);
    box-shadow: var(--tien);
  }

  body.menu-otvorene .hlavicka__menu a {
    padding: 14px 8px;
    font-size: 1rem;
    border-bottom: 1px solid var(--linka);
  }
}

/* ------------------------------------------------------------------------- hero */

.hero {
  position: relative;
  /* rovnaká čierna ako hlavička, aby na seba nadväzovali bez švíku */
  background: #000;
  color: #fff;
  overflow: hidden;
}

.hero__obrazok {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Krytie fotky. Nastavenie je **rovnaké pre mobil, tablet aj desktop** —
     overené, že gradient aj výrez `cover` vychádzajú naprieč pomermi strán
     takmer identicky (rozdiel jasu do 5 %), takže tablet nie je zvláštny prípad
     a media query by tu nič neriešila. Hero bol tmavý ako celok: pri 0,38 mal
     po prekryve jas okolo 4 % z bielej. */
  opacity: 0.55;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Čierny prekryv, nie modrý. Pôvodne tu bola natvrdo zapísaná tmavomodrá
     z DINITROLu rgba(19,44,76) — nie token, takže prežila výmenu palety
     a hero ťahalo do modra, kým hlavička je čierna. */
  background: linear-gradient(105deg, rgba(0, 0, 0, 0.86) 10%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0.25) 100%);
}

.hero__obal {
  position: relative;
  z-index: 1;
  padding: clamp(64px, 11vw, 132px) 24px clamp(48px, 7vw, 92px);
}

.hero__text {
  max-width: 100%;
}

.hero h1 {
  color: #fff;
  margin-bottom: 0.4em;
}

.hero h1 span {
  display: block;
}

/* Na väčších displejoch držíme každý riadok nadpisu vcelku; na mobile nie —
   dlhší text by inak pretiekol von z obrazovky. */
@media (min-width: 600px) {
  .hero h1 span {
    white-space: nowrap;
  }
}

.hero h1 span + span {
  color: var(--akcent);
}

.hero__popis {
  max-width: 54ch;
  margin-bottom: 0;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.86);
}

/* Odstup nad tlacidlami drzi TENTO prvok, nie `.hero__popis`.
   Stranky sluzieb maju namiesto popisu `podnadpis`, ktory spodny margin nema —
   tlacidla sa tam potom lepili tesne pod text. */
.hero__tlacidla {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.hero--strucny .hero__obal {
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.hero--strucny h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
}

.hero--strucny .hero__text {
  max-width: 30ch;
}

/* pás s voľnými termínmi — jediná vec na stránke, ktorá sa mení každý deň */
/* Voľné termíny sú to, čo zákazník hľadá hneď po cene — pás preto nesplýva
   s hero fotkou, ale má vlastnú farbu značky. */
.terminy {
  position: relative;
  z-index: 1;
  background: var(--znacka);
}

.terminy__obal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.termin {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--pismo-display);
  color: #fff;
}

.termin__miesto {
  font: 700 0.6875rem/1 var(--pismo-display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.72);
}

.termin__mesiac {
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}

.termin__popis {
  font-family: var(--pismo-text);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.78);
}

/* Na mobile sa „BANSKÁ BYSTRICA" nezmestí vedľa mesiaca a riadky sa rozsypú
   do rôznych výšok. Názov prevádzky preto ide na vlastný riadok. */
@media (max-width: 700px) {
  .terminy__obal {
    gap: 14px;
  }

  .termin {
    flex-wrap: wrap;
    gap: 3px 10px;
    width: 100%;
  }

  .termin__miesto {
    flex: 0 0 100%;
  }
}

/* ----------------------------------------------------------------- karty služieb */

.karty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 28px;
}

/* dve karty vedľa seba — pri porovnaní dvoch prípravkov sú širšie a čitateľnejšie */
.karty--dve {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  max-width: 900px;
}

.karta {
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.karta:hover {
  box-shadow: var(--tien-vyssi);
  transform: translateY(-2px);
}

.karta__obrazok {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}

.karta__telo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 24px 26px;
}

.karta__pripravok {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 4px 9px;
  border: 1px solid var(--linka);
  border-radius: 2px;
  font: 700 0.625rem/1.4 var(--pismo-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--znacka-svetla);
  background: var(--dym);
}

.karta h3 {
  margin-bottom: 0.5em;
}

.karta p {
  color: var(--text-tlmeny);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* kde je služba dostupná — vlastný riadok pod nadpisom, nie v štítku,
   inak sa dlhší text zalomí a nadpisy kariet potom nesedia v jednej línii */
.karta__kde {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 0.7em;
  font: 600 0.8125rem/1.4 var(--pismo-display);
  color: var(--znacka-text);
}

.karta__kde::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-1px);
}

.karta__odkaz {
  margin-top: auto;
  padding-top: 18px;
  font: 700 0.8125rem/1 var(--pismo-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--znacka-text);
  text-decoration: none;
}

.karta__odkaz::after {
  content: ' →';
}

/* odkaz mimo web — šípka nahor, rovnako ako to značí isatrade.sk */
.karta__odkaz--externy::after {
  content: ' ↗';
}

/* Doména je jeden dlhý token bez medzier — `optimalizaciavykonumotora.sk` má
   28 znakov a pri 375 px z karty pretekala. Rozpal 0,02 em ju aj so šípkou
   udrží na jednom riadku (0,03 em je posledná hodnota, ktorá sa ešte zmestí —
   pri 0,04 em odskočí šípka sama na druhý riadok). `overflow-wrap` je poistka
   pre prípad ešte dlhšej adresy. */
.karta__odkaz--externy {
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.karta__odkaz:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------- kalkulačka ceny (signatúra) */

.kalkulacka {
  background: var(--papier);
  border: 1px solid var(--linka);
  border-top: 3px solid var(--akcent);
  border-radius: var(--radius);
  box-shadow: var(--tien);
  overflow: hidden;
}

/* hľadanie triedy podľa modelu — pomôcka nad výberom triedy */
.kalkulacka__hladanie {
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--linka);
  background: var(--dym);
}

.kalkulacka__napoveda {
  margin: -6px 0 12px;
  font-size: 0.875rem;
  color: var(--text-tlmeny);
}

.kalkulacka__pole {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  background: var(--papier);
  color: var(--text);
  padding: 12px 14px;
  font: 400 1rem/1.4 var(--pismo-text);
}

.kalkulacka__pole:focus {
  outline: none;
  border-color: var(--znacka-svetla);
  box-shadow: 0 0 0 3px rgba(126, 169, 223, 0.35);
}

.kalkulacka__vysledky {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.navrh {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  text-align: left;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  background: var(--papier);
  cursor: pointer;
  padding: 8px 12px;
}

.navrh:hover {
  border-color: var(--znacka-svetla);
  background: #fff;
}

.navrh__model {
  font: 600 0.875rem/1.2 var(--pismo-display);
  color: var(--noc);
}

.navrh__trieda {
  font-size: 0.75rem;
  color: var(--text-tlmeny);
}

.kalkulacka__nenasli {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-tlmeny);
}

.kalkulacka__vyber {
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--linka);
}

.kalkulacka__popisok {
  display: block;
  margin-bottom: 14px;
  font: 700 0.6875rem/1 var(--pismo-display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-tlmeny);
}

.triedy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Natívny výber tried — používa sa len na mobile, na desktope sú tlačidlá.
   Vzhľad je zhodný s výbermi vo formulári, len sa naň nedá použiť `.formular`. */
.triedy__vyber {
  display: none;
  width: 100%;
  appearance: none;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  background-color: var(--dym);
  background-image: linear-gradient(45deg, transparent 50%, var(--znacka) 50%),
    linear-gradient(135deg, var(--znacka) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  color: var(--text);
  padding: 13px 42px 13px 14px;
  font: 600 1rem/1.4 var(--pismo-display);
}

.triedy__vyber:focus {
  background-color: var(--papier);
  border-color: var(--znacka-svetla);
}

.trieda {
  border: 1px solid var(--linka);
  border-radius: 2px;
  background: var(--papier);
  color: var(--noc);
  cursor: pointer;
  padding: 9px 14px;
  font: 600 0.8125rem/1 var(--pismo-display);
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.trieda:hover {
  border-color: var(--znacka-svetla);
}

.trieda[aria-pressed='true'] {
  background: var(--znacka);
  border-color: var(--znacka-text);
  color: #fff;
}

.kalkulacka__vysledok {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  align-items: end;
  gap: 24px;
  padding: 26px 24px;
}

.cena {
  display: block;
}

.cena__popisok {
  display: block;
  margin-bottom: 6px;
  font: 700 0.625rem/1.3 var(--pismo-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-tlmeny);
}

.cena__hodnota {
  display: block;
  font: 700 clamp(1.5rem, 3vw, 2.1rem) / 1 var(--pismo-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--noc);
}

.cena__hodnota small {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--text-tlmeny);
}

.cena--spolu .cena__hodnota {
  color: var(--akcent);
}

.kalkulacka__priklady {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 4px;
  border-top: 1px dashed var(--linka);
  font-size: 0.875rem;
  color: var(--text-tlmeny);
}

/* Na mobile sa štyri stĺpce výsledku nezmestia — kalkulačka má overflow:hidden,
   takže tlačidlo „Objednať" aj príklady vozidiel boli odrezané. Ceny preto idú
   pod seba ako riadky s popiskom vľavo a sumou vpravo; vedľa seba sa popisky
   aj sumy zalamovali každá inak a blok vyzeral rozhádzane. */
@media (max-width: 760px) {
  .kalkulacka__vysledok {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 6px 18px 20px;
  }

  .kalkulacka__vysledok .cena {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--linka);
  }

  .kalkulacka__vysledok .cena--spolu {
    border-bottom: 0;
  }

  .kalkulacka__vysledok .cena__popisok {
    margin-bottom: 0;
    /* užšie preloženie, aby sa najdlhší popisok zmestil na jeden riadok */
    letter-spacing: 0.08em;
  }

  .kalkulacka__vysledok .cena__hodnota {
    font-size: 1.1875rem;
    white-space: nowrap;
  }

  .kalkulacka__vysledok .tlacidlo {
    margin-top: 12px;
    text-align: center;
  }

  .kalkulacka__priklady {
    margin-top: 14px;
    padding-top: 12px;
  }

  .kalkulacka__vyber,
  .kalkulacka__hladanie {
    padding: 20px 18px 16px;
  }

  /* 14 rôzne širokých tlačidiel vytvorilo na úzkej obrazovke rozhádzanú mriežku
     s dierami. Telefón dostane namiesto nich natívny výber. */
  .triedy {
    display: none;
  }

  .triedy__vyber {
    display: block;
    width: 100%;
  }
}

.kalkulacka__poznamka {
  margin: 16px 0 0;
  font-size: 0.8125rem;
  color: var(--text-tlmeny);
}

/* ------------------------------------------------------------- tabuľka cenníka */

.cennik {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.cennik caption {
  padding-bottom: 14px;
  font-size: 0.875rem;
  color: var(--text-tlmeny);
  text-align: left;
}

.cennik th,
.cennik td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--linka);
  text-align: left;
  vertical-align: top;
}

.cennik thead th {
  border-bottom: 2px solid var(--noc);
  font: 700 0.6875rem/1.3 var(--pismo-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--noc);
  white-space: nowrap;
}

.cennik th[scope='row'] {
  font: 700 0.9375rem/1.4 var(--pismo-display);
  color: var(--noc);
  width: 22%;
}

.cennik__priklady {
  font-size: 0.875rem;
  color: var(--text-tlmeny);
}

.cennik__cena {
  font: 700 1.0625rem/1.4 var(--pismo-display);
  color: var(--noc);
  white-space: nowrap;
  text-align: right;
}

.cennik__cena span {
  display: block;
  font: 400 0.75rem/1.2 var(--pismo-text);
  color: var(--text-tlmeny);
}

.cennik tbody tr:hover {
  background: var(--dym);
}

.cennik__poznamka {
  margin-top: 18px;
  font-size: 0.875rem;
  color: var(--text-tlmeny);
}

/* výzva hneď pod cenníkom — v Divi mala každá karta vlastné „Objednať" */
.cennik__vyzva {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
}

.cennik__vyzva span {
  font-size: 0.9375rem;
  color: var(--text-tlmeny);
}

@media (max-width: 720px) {
  .cennik,
  .cennik tbody,
  .cennik tr,
  .cennik td,
  .cennik th {
    display: block;
  }

  .cennik thead {
    display: none;
  }

  .cennik tr {
    padding: 16px 0;
    border-bottom: 1px solid var(--linka);
  }

  .cennik th,
  .cennik td {
    padding: 0;
    border: 0;
  }

  .cennik th[scope='row'] {
    width: auto;
    font-size: 1.0625rem;
  }

  .cennik__cena {
    text-align: left;
    margin-top: 8px;
  }

  .cennik__cena::before {
    content: attr(data-popisok) ': ';
    font: 400 0.8125rem/1 var(--pismo-text);
    color: var(--text-tlmeny);
  }
}

/* ---------------------------------------------------------------- postup zásahu */

/* dva stĺpce cez CSS columns, nie grid — kroky tak idú zhora nadol v prvom
   stĺpci a až potom v druhom, čo je pri číslovanom postupe jediné čitateľné */
.postup {
  counter-reset: krok;
  columns: 2;
  column-gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 860px) {
  .postup {
    columns: 1;
  }
}

/* krátky postup nemá zmysel lámať do dvoch stĺpcov */
.postup--jeden {
  columns: 1;
  max-width: 760px;
}

.krok {
  counter-increment: krok;
  position: relative;
  break-inside: avoid;
  padding: 18px 0 18px 58px;
  border-bottom: 1px solid var(--linka);
}

.sekcia--noc .krok {
  border-color: var(--linka-tmava);
}

.krok::before {
  content: counter(krok, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 20px;
  font: 700 0.875rem/1 var(--pismo-display);
  font-variant-numeric: tabular-nums;
  color: var(--znacka-text);
}

.sekcia--noc .krok::before {
  color: var(--znacka-svetla);
}

.krok h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.25em;
  font-size: 1.0625rem;
}

/* kroky, ktoré sa robia len vtedy, keď je na podvozku hrdza */
.krok__podmienka {
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font: 700 0.625rem/1.3 var(--pismo-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--znacka-text);
  white-space: nowrap;
}

.sekcia--noc .krok__podmienka {
  color: var(--znacka-svetla);
}

.sekcia--noc .krok h3 {
  color: #fff;
}

.krok p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-tlmeny);
}

.sekcia--noc .krok p {
  color: rgba(255, 255, 255, 0.66);
}

/* príplatky v kroku postupu — suma vpravo, aby sa dala prečítať na jeden pohľad */
.priplatky {
  margin: 12px 0 0;
  padding: 12px 14px;
  list-style: none;
  border: 1px solid var(--linka);
  border-left: 3px solid var(--akcent);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.sekcia:not(.sekcia--noc) .priplatky {
  background: var(--papier);
}

.priplatky li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 5px 0;
  font-size: 0.875rem;
}

.priplatky__nadpis {
  padding-top: 0;
  padding-bottom: 6px;
  font: 700 0.625rem/1 var(--pismo-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--akcent);
}

.sekcia--noc .priplatky__nadpis {
  color: #e8736a;
}

.priplatky b {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font: 700 1rem/1.3 var(--pismo-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--noc);
}

.sekcia--noc .priplatky b {
  color: #fff;
}

.priplatky b small {
  font: 400 0.6875rem/1 var(--pismo-text);
  color: var(--text-tlmeny);
}

.sekcia--noc .priplatky b small {
  color: rgba(255, 255, 255, 0.55);
}

/* ------------------------------------------------------------- údaje a parametre */

.parametre {
  margin: 0;
  border-top: 1px solid var(--linka);
}

.parametre div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linka);
}

.parametre dt {
  font-size: 0.9375rem;
  color: var(--text-tlmeny);
}

.parametre dd {
  margin: 0;
  font: 700 0.9375rem/1.5 var(--pismo-display);
  font-variant-numeric: tabular-nums;
  color: var(--noc);
}

/* zoznam s fajkou */
.zoznam {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* keď je zoznam sám pod nadpisom na plnú šírku, dva stĺpce sa čítajú lepšie */
.zoznam--dva {
  columns: 2;
  column-gap: 56px;
}

.zoznam--dva li {
  break-inside: avoid;
}

@media (max-width: 720px) {
  .zoznam--dva {
    columns: 1;
  }
}

/* platnosť cenníka — ako štítok, vo vete odseku ju nikto nevidí */
.platnost {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 20px;
  padding: 8px 14px;
  border: 1px solid var(--linka);
  border-left: 3px solid var(--akcent);
  border-radius: 3px;
  background: var(--dym);
  font-size: 0.8125rem;
  color: var(--text-tlmeny);
}

/* na sivej sekcii by štítok v sivej splynul */
.sekcia--dym .platnost {
  background: #fff;
}

.platnost strong {
  font: 700 0.9375rem/1 var(--pismo-display);
  color: var(--noc);
}

/* ukážka servisného protokolu — dve strany vedľa seba ako náhľad */
.protokol {
  margin: 0;
}

.protokol__strany {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.blok .protokol__strany img,
.protokol__strany img {
  width: 100%;
  height: auto;
  display: block;
  /* Obrázky v .blok majú pomer 4:3 a orezanie — strana A4 sa tým zrezala.
     Pomer A4 zapisujeme natvrdo, aby si prehliadač vyhradil miesto ešte pred
     načítaním (obrázky sú lazy a inak by mali nulovú výšku a stránka skákala). */
  aspect-ratio: 1240 / 1754;
  object-fit: contain;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--tien);
  transition: transform 0.12s ease;
}

.blok .protokol__strany:hover img,
.protokol__strany:hover img {
  transform: translateY(-2px);
}

.protokol figcaption {
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--text-tlmeny);
}

/* ukážka technického listu DINITROL */
.schema {
  margin: 0;
}

.schema img {
  width: 100%;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  background: #fff;
}

.schema figcaption {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--text-tlmeny);
}

.sekcia--noc .schema figcaption {
  color: rgba(255, 255, 255, 0.6);
}

.zoznam li {
  position: relative;
  padding: 10px 0 10px 32px;
  border-bottom: 1px solid var(--linka);
}

.sekcia--noc .zoznam li {
  border-color: var(--linka-tmava);
}

.zoznam li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 19px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--znacka);
  border-bottom: 2px solid var(--znacka);
  transform: rotate(-45deg);
}

/* ----------------------------------------------------------------- striedavé bloky */

.blok {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

/* blok nasledujúci po kartách potrebuje odstup, inak sa naň nalepí */
.karty + .blok {
  margin-top: clamp(36px, 5vw, 64px);
}

/* Deliaca čiara patrí medzi bloky, nie nad prvý. Predtým to riešil
   :first-of-type, ktorý ale prestal sedieť, keď nad blokom pribudol nadpis sekcie. */
.blok + .blok {
  margin-top: clamp(36px, 5vw, 64px);
  padding-top: clamp(36px, 5vw, 64px);
  border-top: 1px solid var(--linka);
}

.blok img {
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* Striedanie strán riadi trieda, nie :nth-of-type — ten počítal aj nadpisový
   div v sekcii a obrázok potom skákal na nesprávnu stranu. */
.blok--obratene .blok__obrazok {
  order: -1;
}

@media (min-width: 860px) {
  .blok--obratene .blok__obrazok {
    order: 0;
  }

  .blok--obratene .blok__text {
    order: 1;
  }
}

/* ------------------------------------------------------------------- kontaktný pás */

.kontaktny-pas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 32px;
}

.kontaktny-pas h3 {
  margin-bottom: 0.4em;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.kontaktny-pas p,
.kontaktny-pas a {
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.78);
}

.kontaktny-pas a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.kontaktny-pas a:hover {
  color: var(--znacka-svetla);
}

.kontaktny-pas__velky {
  display: block;
  font: 700 1.375rem/1.3 var(--pismo-display);
  color: #fff;
  text-decoration: none;
}

/* ----------------------------------------------------------------------- formulár */

.formular {
  background: var(--papier);
  border: 1px solid var(--linka);
  border-top: 3px solid var(--akcent);
  border-radius: var(--radius);
  box-shadow: var(--tien);
  padding: clamp(24px, 4vw, 40px);
}

.formular__telo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.pole {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  grid-column: 1 / -1;
}

.pole--pol {
  grid-column: span 1;
}

@media (max-width: 620px) {
  .pole--pol {
    grid-column: 1 / -1;
  }
}

.pole__stitok {
  font: 600 0.75rem/1 var(--pismo-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tlmeny);
}

.formular input[type='text'],
.formular input[type='tel'],
.formular input[type='email'],
.formular select,
.formular textarea {
  width: 100%;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  background: var(--dym);
  color: var(--text);
  padding: 13px 14px;
  font: 400 1rem/1.4 var(--pismo-text);
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.formular input:focus,
.formular select:focus,
.formular textarea:focus {
  background: var(--papier);
  border-color: var(--znacka-svetla);
}

.formular select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--znacka) 50%),
    linear-gradient(135deg, var(--znacka) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.formular textarea {
  resize: vertical;
  min-height: 110px;
}

.suhlas__riadok {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.suhlas__riadok input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--znacka-text);
  flex: 0 0 auto;
}

.suhlas__riadok label {
  font-size: 0.875rem;
  color: var(--text-tlmeny);
}

.formular__spodok {
  grid-column: 1 / -1;
}

.formular__sprava {
  grid-column: 1 / -1;
  font-weight: 600;
}

.formular__sprava.je-chyba {
  color: var(--hrdza);
}

.pole-pasca {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular [hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------- pocitadla */

.cisla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px;
  /* zarovnanie doľava v širokých stĺpcoch vyzeralo rozhádzane — čísla sedia
     na tretinách sekcie a vpravo zostávala diera */
  text-align: center;
}

.cislo__hodnota {
  display: block;
  font: 800 clamp(2.4rem, 5vw, 3.6rem) / 1 var(--pismo-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: #fff;
}

.cislo__popisok {
  display: block;
  margin-top: 8px;
  font: 700 0.6875rem/1 var(--pismo-display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.6);
}

/* -------------------------------------------------------------------------- mapa */

.mapa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

.mapa__karta h3 {
  margin-bottom: 0.3em;
  font-size: 1.0625rem;
}

.mapa__karta p {
  margin-bottom: 14px;
  color: var(--text-tlmeny);
  font-size: 0.9375rem;
}

.mapa__ramik {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 16 / 10;
  background: var(--dym) url(img/mapa-podklad.svg) center / cover no-repeat;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  overflow: hidden;
}

.mapa__ramik iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.mapa__spustit {
  border: 0;
  border-radius: var(--radius);
  background: var(--znacka);
  color: var(--na-znacke);
  cursor: pointer;
  padding: 11px 22px;
  font: 700 0.8125rem/1 var(--pismo-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.mapa__spustit:hover {
  background: var(--znacka-tmava);
}

.mapa__poznamka {
  font-size: 0.75rem;
  color: var(--text-tlmeny);
}

.mapa__odkaz {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.875rem;
}

/* ------------------------------------------------------------------------ pätička */

.paticka {
  /* Tieň bez rozostrenia pretiahne farbu pätičky pod koniec dokumentu. Bez neho
     svieti pri dojazde na doraz (iOS rubber-band) biela plocha pod pätičkou. */
  box-shadow: 0 50vh 0 50vh var(--noc);
  background: var(--noc);
  color: rgba(255, 255, 255, 0.62);
  padding: clamp(40px, 6vw, 64px) 0 28px;
  font-size: 0.9375rem;
}

.paticka__mriezka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--linka-tmava);
}

.paticka h3 {
  /* Dva riadky drzime natvrdo: „Servisne centrum Banska Bystrica" sa zalomi,
     ostatne nadpisy nie, a adresy pod nimi by potom zacinali v inej vyske. */
  min-height: 2.7em;
  margin-bottom: 0.7em;
  font: 700 0.6875rem/1.35 var(--pismo-display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.5);
}

.paticka ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.paticka li {
  margin-bottom: 8px;
}

.paticka a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.paticka a:hover {
  color: var(--znacka-svetla);
}

.paticka__spodok {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  padding-top: 22px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.45);
}

/* --------------------------------------------------------------------- pravný text */

.pravny-text h2 {
  margin-top: 1.8em;
  font-size: 1.375rem;
}

.pravny-text h3 {
  margin-top: 1.6em;
  font-size: 1.125rem;
}

.pravny-text p {
  font-size: 1rem;
  color: var(--text);
}

/* ------------------------------------------------------------------ cookie lišta */

.cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: var(--noc);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.875rem;
  line-height: 1.6;
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.28);
}

.cookies[hidden] {
  display: none;
}

.cookies__text {
  flex: 1 1 320px;
}

.cookies__text p {
  margin: 0;
}

.cookies__tlacidla {
  display: flex;
  gap: 10px;
}

.cookies button {
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  padding: 10px 20px;
  font: 700 0.8125rem/1 var(--pismo-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cookies__odmietnut {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.cookies__odmietnut:hover {
  border-color: #fff;
}

.cookies__prijat {
  background: #fff;
  color: var(--noc);
}

.cookies__prijat:hover {
  background: var(--dym);
  color: var(--znacka-tmava);
}

@media (max-width: 600px) {
  .cookies {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  /* v stĺpci by sa flex-basis 320px chápal ako výška a lišta by zabrala pol obrazovky */
  .cookies__text {
    flex: 0 0 auto;
  }

  .cookies__tlacidla {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------- doplnky */

.preskocit {
  position: absolute;
  left: -9999px;
}

.preskocit:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--noc);
  color: #fff;
  border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================================
   osetreniemotora.sk — sekcie, ktoré podvozok nemá
   Kostra vyššie je spoločná; tu je len to, čo si vyžiadala štruktúra tohto webu:
   dvojúrovňové menu, karty služieb s ikonou systému, príznaky, countery,
   cenník s variantmi a dlaždice ďalších služieb.
   ========================================================================== */

/* --- žltá ako akcent v nadpise -------------------------------------------- */
.akcent {
  display: block;
  color: var(--znacka);
}

.hero__podnadpis {
  margin: 10px 0 0;
  font: 600 clamp(1rem, 2.2vw, 1.375rem)/1.3 var(--pismo-display);
  letter-spacing: 0.02em;
  color: var(--znacka);
}

/* Na tmavom je žlté tlačidlo značkovejšie než biele, ktoré si niesol podvozok. */
.hero .tlacidlo:not(.tlacidlo--obrys),
.sekcia--noc .tlacidlo:not(.tlacidlo--obrys) {
  background: var(--znacka);
  border-color: var(--znacka);
  color: var(--na-znacke);
}
.hero .tlacidlo:not(.tlacidlo--obrys):hover,
.sekcia--noc .tlacidlo:not(.tlacidlo--obrys):hover {
  background: var(--znacka-tmava);
  border-color: var(--znacka-tmava);
  color: var(--na-znacke);
}
.hero .tlacidlo--obrys,
.sekcia--noc .tlacidlo--obrys {
  color: #fff;
}
.hero .tlacidlo--obrys:hover,
.sekcia--noc .tlacidlo--obrys:hover {
  background: #fff;
  border-color: #fff;
  color: var(--noc);
}

/* --- dvojúrovňové menu ---------------------------------------------------- */
/* Rozbaľuje sa na :hover aj :focus-within, takže sa dá prejsť klávesnicou.
   Na mobile (menu je vtedy zvislý zoznam) je podmenu rozbalené natrvalo. */
.ma-podmenu {
  position: relative;
}

.podmenu__nazov {
  display: inline-block;
  padding: 8px 0;
  font: inherit;
  color: inherit;
  cursor: default;
  white-space: nowrap;
}

.ma-podmenu.je-aktivna > .podmenu__nazov {
  color: var(--znacka-text);
  font-weight: 700;
}

.podmenu {
  position: absolute;
  top: 100%;
  left: -14px;
  z-index: 40;
  display: grid;
  gap: 2px;
  min-width: 210px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--noc);
  border-top: 3px solid var(--znacka);
  box-shadow: var(--tien-vyssi);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.ma-podmenu:hover > .podmenu,
.ma-podmenu:focus-within > .podmenu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.podmenu a {
  display: block;
  padding: 9px 18px;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  white-space: nowrap;
}

.podmenu a:hover,
.podmenu a[aria-current="page"] {
  background: var(--znacka);
  color: var(--na-znacke);
}

/* --- úvodný odsek na domovskej -------------------------------------------- */
.uvod {
  text-align: center;
}

.uvod h2 {
  margin-top: 6px;
}

/* --- karty služieb s ikonou systému --------------------------------------- */
.karty--tri {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.karta__ikona {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
  background: var(--noc);
}

.karta__ikona img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.karta__cena {
  margin: 10px 0 0;
  font-family: var(--pismo-display);
  font-size: 0.9375rem;
  color: var(--text-tlmeny);
}

.karta__cena strong {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.karta__cena small {
  font-size: 0.75rem;
}

/* Pripravované služby — bez odkazu, ale NIE stlmené priehľadnosťou.
   Žltá ikona na svetlosivom podklade pri opacity 0,72 prakticky zmizla.
   Že ide o pripravované služby, povie štítok „Čoskoro" nad sekciou; dlaždica
   si preto drží tmavý podklad ako ostatné karty, len o odtieň svetlejší. */
.karta--tlmena .karta__ikona {
  background: var(--noc-mekka);
}

.karta--tlmena h3 {
  color: var(--text-tlmeny);
}

/* --- vysvetľujúce bloky („Prečo…") ---------------------------------------- */
.vysvetlenia {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-top: 42px;
}

.vysvetlenie {
  padding-top: 20px;
  border-top: 3px solid var(--znacka);
}

.vysvetlenie h3 {
  margin: 0 0 10px;
  font: 700 1.125rem/1.35 var(--pismo-display);
}

.vysvetlenie p {
  margin: 0;
  color: var(--text-tlmeny);
}

/* --- tmavý pás „Preventívna údržba" --------------------------------------- */
.pas-prevencie {
  text-align: center;
}

.pas-prevencie h2 {
  margin: 8px 0 14px;
}

.pas-prevencie p {
  margin: 0 auto 26px;
  max-width: 62ch;
}

/* --- príznaky („Kedy zasiahnuť") ------------------------------------------ */
.priznaky {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 42px;
  counter-reset: priznak;
}

.priznak {
  position: relative;
  padding: 28px 24px 26px;
  background: var(--papier);
  border: 1px solid var(--linka);
  border-radius: var(--radius);
}

/* číslo je dekorácia, nie poradie zásahu — preto counter, nie <ol> */
.priznak::before {
  counter-increment: priznak;
  content: counter(priznak);
  position: absolute;
  top: -1px;
  left: 24px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  background: var(--znacka);
  color: var(--na-znacke);
  font: 700 0.9375rem/1 var(--pismo-display);
}

.priznak h3 {
  margin: 22px 0 10px;
  font: 700 1.0625rem/1.4 var(--pismo-display);
}

.priznak p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-tlmeny);
}

/* --- prípravky ------------------------------------------------------------ */
.blok__plny-nazov {
  margin: -6px 0 12px;
  font: 600 0.8125rem/1.4 var(--pismo-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tlmeny);
}

/* --- cenník s variantmi --------------------------------------------------- */
.cennik__popis p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-tlmeny);
}

.cennik__detaily {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-tlmeny);
}

.cennik__detaily span {
  font-weight: 700;
  color: var(--text);
}

/* --- obrázok pred a po ---------------------------------------------------- */
.galeria {
  text-align: center;
}

.galeria img {
  margin: 0 auto;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
}

.galeria__popis {
  margin: 14px 0 0;
  font-size: 0.875rem;
  color: var(--text-tlmeny);
}

/* --- countery ------------------------------------------------------------- */
.countery {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 42px;
  text-align: center;
}

.counter {
  padding: 26px 18px;
  border: 1px solid var(--linka-tmava);
  border-radius: var(--radius);
}

.counter__cislo {
  display: block;
  font: 800 clamp(2.5rem, 6vw, 3.75rem)/1 var(--pismo-display);
  font-variant-numeric: tabular-nums;
  color: var(--znacka);
}

.counter__popis {
  display: block;
  margin-top: 10px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.72);
}

/* --- dlaždice ďalších služieb --------------------------------------------- */
/* Šesť položiek do troch stĺpcov, nie do šiestich — pri 170 px sa názvy typu
   „Dekarbonizácia motora – benzín" lámali na tri riadky a rad pôsobil rozhádzane.
   Tri stĺpce dajú 3 + 3, čo je vyrovnané, a názov sa zmestí na dva riadky. */
.dlazdice {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 36px;
}

.dlazdica {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--dym);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font: 600 0.9375rem/1.35 var(--pismo-display);
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Ikona má vlastnú tmavú plôšku — žltá na svetlosivom podklade dlaždice
   prakticky zaniká (ten istý problém ako pri kartách pripravovaných služieb). */
.dlazdica__ikona {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  background: var(--noc);
  border-radius: var(--radius);
}

.dlazdica img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.dlazdica:hover {
  background: var(--noc);
  color: #fff;
}

/* na tmavom pozadí by tmavá plôška splynula */
.dlazdica:hover .dlazdica__ikona {
  background: rgba(255, 255, 255, 0.12);
}

/* --- výzva na záver ------------------------------------------------------- */
.vyzva {
  text-align: center;
}

.vyzva h2 {
  margin: 8px 0 14px;
}

.vyzva p {
  margin: 0 auto 26px;
  max-width: 60ch;
}

.vyzva__tlacidla {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* --- potvrdenie a 404 ----------------------------------------------------- */
.potvrdenie {
  text-align: center;
}

.potvrdenie h1 {
  margin: 8px 0 16px;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  color: #fff;
}

.potvrdenie p {
  margin: 0 auto 14px;
  max-width: 60ch;
}

.potvrdenie .tlacidlo {
  margin-top: 18px;
}

/* --- drobnosti ------------------------------------------------------------ */
.poznamka {
  font-size: 0.875rem;
  color: var(--text-tlmeny);
}

/* prevádzka bez zápisu v Google Maps nemá odkaz „otvoriť v Maps" */
.mapa__bez-zapisu {
  margin: 12px 0 0;
  font-size: 0.8125rem;
  color: var(--text-tlmeny);
}

/* --- mobil ---------------------------------------------------------------- */
@media (max-width: 980px) {
  /* v rozbalenom menu je podmenu súčasťou zoznamu, nie plávajúcou vrstvou */
  .podmenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 0 16px;
    background: transparent;
    border-top: 0;
    border-left: 2px solid var(--znacka);
    box-shadow: none;
  }

  .podmenu a {
    padding: 7px 0;
  }

  .podmenu a:hover,
  .podmenu a[aria-current="page"] {
    background: transparent;
    color: var(--znacka);
  }

  .podmenu__nazov {
    font-weight: 700;
    opacity: 0.7;
  }
}

/* --- hlavička je tesná ----------------------------------------------------- */
/* Dve rozbaľovacie položky majú dlhé názvy („Dekarbonizácia motora/sania"),
   takže lišta praská skôr než na podvozku. Preto menšie písmo, menšie logo
   a vlastné kratšie tlačidlo. */
.podmenu__nazov {
  padding: 10px 9px;
  font: 600 0.875rem/1 var(--pismo-display);
  border-radius: var(--radius);
}

.hlavicka__logo img {
  width: 104px;
  height: auto;
}

.tlacidlo--maly {
  padding: 12px 18px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

@media (min-width: 981px) and (max-width: 1320px) {
  .hlavicka__menu a,
  .podmenu__nazov {
    padding: 10px 6px;
    font-size: 0.8125rem;
  }

  .hlavicka__telefon {
    font-size: 0.875rem;
  }
}

/* =============================================================================
   Tmavá hlavička
   Pôvodný web mal lištu čiernu s bielym písmom a žltou aktívnou položkou —
   Miro ju tak chce aj tu. Prebíja svetlú hlavičku prevzatú z podvozku.
   Logo BG je na čiernom podklade, takže na čiernej lište splynie tak, ako
   to bolo na starom webe.
   ========================================================================== */

/* Pozadie je ČISTÁ ČIERNA #000, nie --noc (#111) a bez priehľadnosti:
   logo BG je JPEG s napečeným čiernym podkladom, takže pri akomkoľvek inom
   odtieni sa okolo neho ukáže obdĺžnik. Overené — najčastejšia farba v logu
   je presne rgb(0,0,0). Keď sa logo raz vymení za PNG s priehľadnosťou,
   dá sa vrátiť na var(--noc). */
.hlavicka {
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: none;
}

/* rovnaká čierna aj pod rozbaleným mobilným menu */
body.menu-otvorene .hlavicka__menu {
  background: #000;
}

/* Položky menu.
   POZOR na `>` — bez neho tieto pravidlá platili aj na odkazy v rozbaľovacom
   podmenu a prebili ich vlastný štýl (rovnaká špecificita, ale tento blok je
   v súbore nižšie). Aktívna položka podmenu potom mala žlté písmo na žltom
   podklade a nebolo ju vidieť. */
.hlavicka__menu > li > a,
.podmenu__nazov {
  color: rgba(255, 255, 255, 0.88);
}

.hlavicka__menu > li > a:hover,
.hlavicka__menu > li > a:focus-visible,
.hlavicka__menu > li > a[aria-current='page'],
.ma-podmenu:hover > .podmenu__nazov,
.ma-podmenu:focus-within > .podmenu__nazov,
.ma-podmenu.je-aktivna > .podmenu__nazov {
  color: var(--znacka);
}

/* Nájazd myšou musí byť vidieť aj na položke, ktorá je práve aktívna.
   Aktívna skupina je už žltá, takže samotná zmena farby na nej nič neurobí —
   „Sanie" sa z bielej rozsvietilo, „Motor" na vlastnej stránke nie. Preto má
   hover navyše vlastný podklad, ktorý je nezávislý od stavu položky. */
.hlavicka__menu > li > a,
.podmenu__nazov {
  transition: background-color 0.15s ease, color 0.15s ease;
}

.hlavicka__menu > li > a:hover,
.hlavicka__menu > li > a:focus-visible,
.ma-podmenu:hover > .podmenu__nazov,
.ma-podmenu:focus-within > .podmenu__nazov {
  background: rgba(255, 255, 255, 0.12);
}

/* Kde práve si — trvalá žltá linka pod aktívnou položkou. Odlíši sa tým od
   nájazdu, ktorý je len podklad. */
.hlavicka__menu > li > a[aria-current='page'],
.ma-podmenu.je-aktivna > .podmenu__nazov {
  box-shadow: inset 0 -2px 0 var(--znacka);
}

/* Odkazy v podmenu. Rovnaké oddelenie stavov ako v hornej lište: „kde práve si"
   je plná žltá plocha, nájazd myšou je len svetlý podklad. Predtým mali oboje
   plnú žltú, takže sa na stránke, ktorá v podmenu je, nedalo rozoznať, nad
   ktorou položkou stojí myš.
   POZOR na poradie — `:hover` aj `[aria-current]` majú rovnakú špecificitu
   (0,2,1), takže rozhoduje, čo je v súbore nižšie. Zopakované tu zámerne,
   aby to prežilo ďalšie pravidlá pre hlavičku nad týmto blokom. */
.podmenu a {
  color: rgba(255, 255, 255, 0.86);
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* nájazd na bežnú položku */
.podmenu a:hover,
.podmenu a:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: var(--znacka);
}

/* kde práve si — musí byť nižšie než hover, inak by ho hover prebil */
.podmenu a[aria-current='page'] {
  background: var(--znacka);
  color: var(--na-znacke);
  font-weight: 700;
}

/* nájazd na aktívnu položku — tmavší odtieň žltej, nech je odozva aj tu */
.podmenu a[aria-current='page']:hover,
.podmenu a[aria-current='page']:focus-visible {
  background: var(--znacka-tmava);
  color: var(--na-znacke);
}

/* telefón */
.hlavicka__telefon {
  color: #fff;
}

.hlavicka__telefon:hover {
  color: var(--znacka);
}

/* prepínač jazykov */
.jazyky a {
  color: rgba(255, 255, 255, 0.6);
}

.jazyky a:hover {
  color: var(--znacka);
  background: transparent;
}

.jazyky__aktivny {
  color: var(--znacka);
  background: rgba(255, 255, 255, 0.1);
}

/* hamburger — prúžky musia byť biele, inak na čiernej zmiznú */
.hamburger span,
.hamburger span::before,
.hamburger span::after {
  background: #fff;
}

/* Podmenu je tiež tmavé, takže na tmavej lište potrebuje vlastný okraj,
   inak splynie s hlavičkou a nie je vidieť, kde začína. */
.podmenu {
  background: #1c1c1e;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

/* fókus na tmavom: čierny rámik by nebolo vidieť */
.hlavicka :focus-visible {
  outline-color: var(--znacka);
}

@media (max-width: 1040px) {
  /* rozbalené menu je panel pod lištou — musí byť tmavý rovnako ako lišta */
  body.menu-otvorene .hlavicka__menu {
    background: #000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  body.menu-otvorene .hlavicka__menu a {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
}

@media (max-width: 980px) {
  /* v rozbalenom menu je podmenu súčasťou zoznamu — bez vlastného pozadia */
  .podmenu {
    background: transparent;
    box-shadow: none;
  }

  /* v zvislom zozname je podklad na celú šírku rušivý, stačí farba písma */
  .hlavicka__menu > li > a:hover,
  .ma-podmenu:hover > .podmenu__nazov {
    background: transparent;
  }
}

/* =============================================================================
   Obrázky prípravkov — celá plechovka, nie výrez
   `.blok img` (prevzaté z podvozku) vnucuje pomer 4:3 s `object-fit: cover`.
   Fotky prípravkov BG sú ale na výšku (pomer 0,39 – 0,56), takže z plechovky
   zostal stredný pás bez hrdla aj dna. Tu sa to prebíja vyššou špecificitou —
   `.bloky .blok__obrazok img` (0,3,0) proti `.blok img` (0,1,1) — presne ako
   na to upozorňuje PLAN, časť „Na čo si dať pozor".
   ========================================================================== */

/* Bez dlaždice. Fotky prípravkov aj zariadení sú PNG s priehľadným pozadím,
   takže ležia priamo na podklade sekcie — akýkoľvek vlastný podklad by okolo
   nich kreslil obdĺžnik, ktorý sa s pozadím sekcie nezhoduje. */
.bloky .blok__obrazok {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.bloky .blok__obrazok img {
  aspect-ratio: auto;
  object-fit: contain;
  width: auto;
  max-width: 100%;
  max-height: 340px;
  border-radius: 0;
}

@media (max-width: 760px) {
  .bloky .blok__obrazok img {
    max-height: 260px;
  }
}

/* =============================================================================
   Povinné polia
   Hviezdička je pri popisku poľa, nie v `placeholder` — vnútri placeholderu sa
   nedá zafarbiť a po vyplnení poľa zmizne aj s informáciou, že pole je povinné.
   ========================================================================== */

/* Červená len na tento účel. `--akcent` je na tomto webe žltá, tá by na bielom
   podklade nebola vidieť, a značková farba by tu aj tak mýlila — hviezdička nie
   je ozdoba, ale upozornenie. */
.povinna {
  color: var(--povinne);
  font-weight: 700;
}

/* rovnaká veľkosť aj farba ako riadok so súhlasom hneď pod tým */
.formular__povinne {
  margin: 4px 0 14px;
  font-size: 0.875rem;
  color: var(--text-tlmeny);
}

/* =============================================================================
   Kontaktný pás na stránke Kontakty
   Vlastné triedy zámerne — `.kontaktny-pas` prevzatý z podvozku je navrhnutý
   pre tmavú sekciu (odkazy `#fff`) a mriežku má priamo na `<section>`.
   V svetlej sekcii s obalom navyše z toho vzniklo biele na bielom.
   ========================================================================== */

.kontakt-pas__mriezka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}

.kontakt-pas__polozka h3 {
  margin: 0 0 10px;
  font: 700 0.8125rem/1 var(--pismo-display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.6);
}

/* telefón a mail sú to hlavné, čo na tejto stránke návštevník hľadá */
.kontakt-pas__udaj {
  display: inline-block;
  font: 700 clamp(1.125rem, 2.2vw, 1.5rem)/1.3 var(--pismo-display);
  color: var(--znacka);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.kontakt-pas__udaj:hover,
.kontakt-pas__udaj:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.kontakt-pas__hodiny {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.82);
}

.kontakt-pas__hodiny b {
  color: #fff;
  font-weight: 600;
}

/* =============================================================================
   Postup s fotkou prístrojového vybavenia
   Pôvodný web mal kroky vľavo a zariadenie vpravo — tu to isté, len zariadenie
   drží šírku a kroky sa mu prispôsobia. Bez `postup.obrazok` zostáva zoznam
   cez celú šírku v dvoch stĺpcoch (`.postup`).
   ========================================================================== */

.postup-obal {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 280px);
  gap: 48px;
  align-items: start;
  margin-top: 42px;
}

/* pri fotke vedľa už nie je miesto na dva stĺpce krokov */
.postup--uzky {
  grid-template-columns: 1fr;
  margin-top: 0;
}

.postup__zariadenie {
  margin: 0;
  padding: 24px;
  text-align: center;
  position: sticky;
  top: 96px;
}

.postup__zariadenie img {
  margin: 0 auto;
  max-height: 320px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.postup__zariadenie figcaption {
  margin-top: 14px;
  font: 600 0.8125rem/1.4 var(--pismo-display);
  color: var(--text-tlmeny);
}

@media (max-width: 900px) {
  .postup-obal {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* na mobile nech je zariadenie nad krokmi — je to úvod k tomu, čo sa deje */
  .postup__zariadenie {
    position: static;
    order: -1;
    max-width: 320px;
    margin: 0 auto;
  }
}

/* prípravok bez fotky — text cez celú šírku, nie prázdne miesto po obrázku */
.blok--bez-obrazka {
  grid-template-columns: 1fr;
}

/* Fotky sady nad názvom: zatvorený kufrík a jeho obsah vedľa seba — zákazník
   tak hneď vidí, o ktorý kufrík ide aj čo v ňom je. */
.sada__fotky {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  margin: -4px 0 16px;
}

.sada__fotky img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* =============================================================================
   Prístrojové vybavenie služby + zoznam ATF adaptérov
   Zatiaľ len na stránke prevodovky. Fotky sú PNG s priehľadným pozadím, takže
   rovnako ako inde nemajú vlastnú dlaždicu a ležia priamo na podklade sekcie.
   ========================================================================== */

.vybavenie {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 42px;
}

.vybavenie__obrazok {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  margin-bottom: 18px;
}

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

.vybavenie__kus h3 {
  margin: 0 0 8px;
  font: 700 1.0625rem/1.35 var(--pismo-display);
}

.vybavenie__kus p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-tlmeny);
}

/* --- zoznam adaptérov podľa značky ----------------------------------------- */
/* Pre zákazníka je to odpoveď na „máte adaptér na moje auto?", takže značky
   nesmú byť schované v drobnom texte. */
.adaptery {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--linka);
}

.adaptery h3 {
  margin: 0 0 8px;
  font: 700 1.25rem/1.3 var(--pismo-display);
}

.adaptery__perex {
  margin: 0;
  max-width: 62ch;
  color: var(--text-tlmeny);
}

.sady {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 28px;
}

.sada {
  padding: 20px 22px;
  background: var(--dym);
  border-radius: var(--radius);
  border-left: 3px solid var(--znacka);
}

.sada h4 {
  margin: 0 0 8px;
  font: 700 0.8125rem/1 var(--pismo-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.sada p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-tlmeny);
}

@media (max-width: 760px) {
  .vybavenie__obrazok {
    height: 160px;
  }
}

/* =============================================================================
   Delenie dlhych slov

   Nemcina sklada slova do jedneho kusu — „Bremsflüssigkeitswechsel" ma 24 znakov
   a v nadpise karty na mobile (375 px) o kusok pretekalo. `hyphens: auto` deli
   podla slovnika jazyka stranky, takze sa zapina len tam, kde je `lang="de"`;
   slovencinu a anglictinu to nechava tak, ako vyzerali doteraz. `overflow-wrap`
   je poistka pre pripad, ze prehliadac nemecky slovnik nema.
   ========================================================================== */

:lang(de) h1,
:lang(de) h2,
:lang(de) h3,
:lang(de) h4 {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* docasny oznam (O.OZNAM) — okno pri nacitani, raz za navstevu */
.oznam {
  max-width: min(520px, calc(100vw - 32px));
  padding: 28px 28px 24px;
  border: 0;
  border-top: 4px solid var(--znacka);
  border-radius: var(--radius);
  background: var(--papier);
  color: var(--text);
  box-shadow: var(--tien-vyssi);
}

.oznam::backdrop {
  background: rgba(17, 17, 17, 0.6);
}

.oznam__nadpis {
  margin: 0 0 12px;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--noc);
}

.oznam p {
  margin: 0 0 10px;
}

.oznam__tlacidla {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin: 18px 0 0;
}