/* ═══════════════════════════════════════════════════════════════════════
   SALESI — koncept SIGNAL
   Vizualni jezik izhaja iz merjenja: bazna črta, umerjevalne črtice,
   odčitki z enotami. Nič ni okrasnega brez razloga.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Manrope';
  /* WOFF je isti nabor glifov, samo zapakiran z zlib: 165 KB -> 66 KB.
     TTF ostane kot rezerva za brskalnike brez podpore za WOFF. */
  src:url('Manrope-var.woff') format('woff'),
      url('Manrope-var.ttf') format('truetype-variations');
  font-weight:200 800;
  font-display:swap;
}

:root{
  /* platno */
  --crno:#F7F7F8;
  --plast-1:#FFFFFF;
  --plast-2:#EEEEF0;
  --plast-3:#DDDEE0;

  /* Pisava. Vrednosti so izbrane po izmerjenem kontrastu na #0B0C0D, ne po občutku. */
  --bela:#141516;
  --tekst-2:#4E5054;   /* ≈7:1  — besedilo */
  --tekst-3:#64666A;   /* ≈5:1  — drobne oznake z vsebino */
  --tekst-4:#7F8084;   /* samo okrasne številke */

  /* hairline */
  --crta:#DDDEE0;
  --crta-mocna:#C3C4C7;

  /* poudarek — zelena nosi vmesnik */
  --zelena:#4A5CBA;
  --zelena-glob:#37459B;
  --zelena-sij:rgba(74,92,186,.07);

  /* koral — natanko en element na pogled */
  --koral:#65E68C;

  /* mere */
  --r:18px;
  --r-mali:12px;
  --rob:clamp(24px,4vw,72px);
  --max:1600px;
  --gut:24px;

  /* gibanje */
  --lah:cubic-bezier(.22,.61,.36,1);
  --cas:300ms;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--crno);
  color:var(--bela);
  font-family:'Manrope',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
::selection{background:var(--zelena);color:#06181B}

/* tipkovnica mora videti, kje je — obroč sledi zaobljenosti elementa */
:focus-visible{
  outline:2px solid var(--zelena);
  outline-offset:3px;
  border-radius:4px;
}
.gumb:focus-visible,.spec:focus-visible{border-radius:999px}
.vrstica:focus-visible,.vir:focus-visible{outline-offset:-2px;border-radius:var(--r-mali)}
.preskoci{
  position:absolute;left:var(--rob);top:-70px;z-index:200;
  background:var(--bela);color:#0B0C0D;padding:12px 20px;border-radius:999px;
  font-size:13px;font-weight:600;transition:top var(--cas) var(--lah);
}
.preskoci:focus{top:16px}

/* ── mreža ────────────────────────────────────────────────────────────── */
.ovoj{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--rob)}
.mreza{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut)}

/* ── tipografska lestvica — trije razredi, nič vmes ───────────────────── */
.display{
  font-size:clamp(50px,7.6vw,134px);
  font-weight:250;
  line-height:.92;
  letter-spacing:-.038em;
}
.naslov{
  font-size:clamp(32px,4.4vw,66px);
  font-weight:280;
  line-height:1.02;
  letter-spacing:-.03em;
}
.podnaslov{
  font-size:clamp(21px,2vw,27px);
  font-weight:450;
  line-height:1.28;
  letter-spacing:-.015em;
}
.telo{font-size:17px;line-height:1.68;color:var(--tekst-2)}
.telo-v{font-size:clamp(18px,1.35vw,21px);line-height:1.6;color:var(--tekst-2);font-weight:350}

/* odčitek — mikro oznaka v jeziku merilnika */
.odcitek{
  font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--tekst-3);
}
.odcitek b{color:var(--zelena);font-weight:700}

/* ── glava razdelka: indeks + bazna črta do roba ──────────────────────── */
.sek-glava{
  display:flex;align-items:center;gap:22px;
  padding-bottom:22px;margin-bottom:clamp(46px,5vw,86px);
  border-bottom:1px solid var(--crta);
}
.sek-glava .idx{font-size:10.5px;font-weight:700;letter-spacing:.26em;color:var(--zelena)}
.sek-glava .ime{font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--tekst-3)}
.sek-glava .crtice{flex:1;height:9px;opacity:.5}

/* umerjevalne črtice — ponovljiv vzorec, ne slika */
.crtice{
  background-image:repeating-linear-gradient(90deg,
    var(--crta-mocna) 0 1px, transparent 1px 12px);
}
.crtice-v{
  background-image:repeating-linear-gradient(180deg,
    var(--crta-mocna) 0 1px, transparent 1px 12px);
}

section{padding:clamp(84px,9vw,168px) 0;position:relative}
section.tesno{padding-top:0}

/* ── gumbi ────────────────────────────────────────────────────────────── */
.gumb{
  display:inline-flex;align-items:center;gap:12px;
  height:52px;padding:0 28px;border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:.01em;
  background:var(--bela);color:#0B0C0D;
  transition:transform var(--cas) var(--lah), background var(--cas) var(--lah),
             box-shadow var(--cas) var(--lah);
  will-change:transform;
}
.gumb:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.gumb .puscica{transition:transform var(--cas) var(--lah)}
.gumb:hover .puscica{transform:translateX(4px)}

/* edini koralni element na pogled */
.gumb.poudarek{background:var(--koral);color:#fff}
.gumb.poudarek:hover{box-shadow:none}

.gumb.obroba{
  background:transparent;color:var(--bela);
  border:1px solid var(--crta-mocna);
}
.gumb.obroba:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.03)}

/* povezava z drsečo črto */
.povezava{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:600;color:var(--bela);
  padding-bottom:4px;position:relative;
}
.povezava::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--crta-mocna);
}
.povezava::before{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--zelena);z-index:1;
  transition:width var(--cas) var(--lah);
}
.povezava:hover::before{width:100%}

/* ═══ GLAVA ════════════════════════════════════════════════════════════ */
.glava{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background var(--cas) var(--lah), border-color var(--cas) var(--lah),
             backdrop-filter var(--cas) var(--lah);
  border-bottom:1px solid transparent;
}
.glava.plava{
  background:rgba(247,247,248,.72);
  /* Bolj prosojna glava potrebuje mocnejsi zabris, sicer se pod njo bere
     vsebina in napisi izgubijo rob. */
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  border-bottom-color:var(--crta);
}
.glava .vrsta{display:flex;align-items:center;gap:40px;height:94px}
.glava .znak{height:54px;width:auto;flex:none}
.glava nav{display:flex;gap:34px;margin-left:auto}
.glava nav a{
  font-size:13.5px;font-weight:500;color:var(--tekst-2);
  transition:color var(--cas) var(--lah);position:relative;
}
.glava nav a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;
  background:var(--zelena);transition:width var(--cas) var(--lah);
}
.glava nav a:hover{color:var(--bela)}
.glava nav a:hover::after{width:100%}
.glava .gumb{height:42px;padding:0 20px;font-size:12.5px}

/* ═══ HERO — naslovnica ════════════════════════════════════════════════ */
.hero{position:relative;padding:calc(94px + clamp(60px,7vw,120px)) 0 clamp(60px,7vw,110px);overflow:hidden}
.hero-mreza{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(32px,5vw,80px);align-items:center}

.hero-levo .odcitek{margin-bottom:clamp(28px,3vw,44px)}
.hero .display{margin-bottom:32px}
.hero .display .tanko{color:var(--tekst-3)}
.hero-uvod{max-width:46ch;margin-bottom:38px}
.hero-akcije{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:clamp(38px,4vw,58px)}

/* naslovniki — komu je namenjeno */
.naslovniki{display:flex;flex-wrap:wrap;gap:0 26px;padding-top:26px;border-top:1px solid var(--crta)}
.naslovniki span{font-size:13px;color:var(--tekst-3);position:relative;padding-left:16px}
.naslovniki span::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  background:var(--zelena);border-radius:50%;
}

/* ── umetniška kompozicija ────────────────────────────────────────────── */
.kompozicija{position:relative;aspect-ratio:1/1;display:grid;place-items:center}
.kompozicija .polje{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 46%,
    rgba(87,168,150,.13) 0%, rgba(87,168,150,.04) 34%, transparent 66%);
}
.kompozicija .obroci{position:absolute;inset:0;opacity:.5}
.kompozicija .obroci circle{fill:none;stroke:var(--crta-mocna);stroke-width:1}
.kompozicija .obroci circle.zivi{stroke:rgba(87,168,150,.24)}
.kompozicija .naprava{
  position:relative;z-index:3;width:92%;height:auto;
  filter:drop-shadow(0 60px 70px rgba(0,0,0,.72));
}
/* navpična merilna skala ob robu */
.kompozicija .skala{
  position:absolute;right:0;top:14%;bottom:14%;width:22px;
  opacity:.6;
}
.kompozicija .skala::before{
  content:"";position:absolute;right:0;top:0;bottom:0;width:9px;
  background-image:repeating-linear-gradient(180deg,
    var(--crta-mocna) 0 1px, transparent 1px 14px);
}
.kompozicija .skala::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--crta);
}
/* sled signala */
.sled{position:absolute;left:-4%;right:-4%;bottom:16%;z-index:2;opacity:.9}
.sled path{
  fill:none;stroke:var(--zelena);stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;
}
.sled.risi path{animation:risi 2.6s var(--lah) .5s forwards}
@keyframes risi{to{stroke-dashoffset:0}}

/* specifikacijske pilule — edino mesto za glass */
.spec{
  position:absolute;z-index:4;
  display:inline-flex;align-items:baseline;gap:8px;
  padding:11px 17px;border-radius:999px;
  background:rgba(20,22,24,.52);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 12px 34px rgba(0,0,0,.44);
  white-space:nowrap;
}
.spec b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.spec i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tekst-3)}
.spec-1{left:-2%;top:12%}
.spec-2{left:-4%;top:27%}
.spec-3{left:-2%;top:42%}
/* Ta pilula nosi dva parametra, zato je zapis drobnejši — sicer bi se pri
   ožjih zaslonih zaletela v pilulo levo od nje. */
.spec-4{right:-1%;top:22%}
.spec-5{left:8%;bottom:12%}
.spec-4 b{font-size:14px}

/* ═══ ZNAMKE ═══════════════════════════════════════════════════════════ */
/* ── neskončni trak znamk ──────────────────────────────────────────────
   Logotipi imajo razmerja od 7,4:1 do 0,8:1. Napis se bere po VIŠINI ČRK,
   znak po CELOTNI VELIKOSTI — zato ima vsak svojo višino, ne skupne škatle.
   Trak je podvojen; ko prva polovica odpotuje, druga stoji na njenem mestu,
   zato je premik brez šva. */
.trak{
  position:relative;overflow:hidden;
  padding:clamp(32px,3.6vw,50px) 0;
  border-block:1px solid var(--crta);
  /* logotipi se ob robu zmehčajo, ne odrežejo */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.trak-tir{
  display:flex;align-items:center;width:max-content;
  animation:potuj 46s linear infinite;
}
.trak:hover .trak-tir{animation-play-state:paused}
@keyframes potuj{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}      /* iz leve proti desni */
}
.trak-pol{display:flex;align-items:center;flex:none}
.znamka{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding-inline:clamp(30px,3.4vw,58px);flex:none;
}
.znamka img{
  width:auto;
  filter:brightness(0) invert(1);opacity:.42;
  transition:opacity var(--cas) var(--lah);
}
.znamka:hover img{opacity:.95}
.znamka[data-z="sorimex"] img{height:18px}
.znamka[data-z="elinkcare"] img{height:34px}
.znamka[data-z="lepu"] img{height:38px}
.znamka[data-z="getein"] img{height:20px}
.znamka[data-z="kawe"] img{height:25px}
/* FL Medical: logotip je tesno obrezan, zato nižja višina kot prej. */
.znamka[data-z="flmedical"] img{height:20px;opacity:.66}
.znamka[data-z="gima"] img{height:22px}
.znamka[data-z="multix"] img{height:20px}
.znamka[data-z="flmedical"]:hover img{opacity:1}
.znamka[data-z="zarys"] img{height:36px}
.znamka[data-z="ulma"] img{height:32px}     /* znak + napis, ne le napis */
@media (prefers-reduced-motion:reduce){
  .trak-tir{animation:none;transform:translateX(-50%)}
}
.znamka .ime-tekst{
  font-size:17px;font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.40);
  transition:color var(--cas) var(--lah);white-space:nowrap;
}
.znamka:hover img{opacity:.92}
.znamka:hover .ime-tekst{color:rgba(255,255,255,.92)}
.znamka .eks{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  font-size:8.5px;font-weight:800;letter-spacing:.2em;color:var(--zelena);
  white-space:nowrap;
}

/* ── vodni žig: znak kot tiha identifikacija ozadja ────────────────────
   Nikoli ne tekmuje z vsebino — 3–5 % motnosti, vedno odrezan ob robu,
   da deluje kot tisk pod površino, ne kot nalepka. */
/* Žig reže sam sebe. Razdelku ne smemo dati overflow:hidden, ker bi to
   ubilo lepljivo okno v programu. */
.zig{
  position:absolute;inset:0;overflow:hidden;
  pointer-events:none;z-index:0;
  color:var(--bela);opacity:.085;
}
.zig svg{position:absolute;height:auto;display:block}
.zig:not(.tri-d) path{fill:currentColor}
.zig.zelen{color:var(--zelena);opacity:.05}
.zig.desno svg{right:-13%;top:50%;transform:translateY(-50%);width:min(46vw,760px)}
.zig.levo svg{left:-15%;top:-14%;width:min(40vw,620px)}
.zig.noga svg{right:-5%;bottom:-34%;width:min(38vw,560px)}
.ovoj,.trak-tir,.sek-glava{position:relative;z-index:1}

/* ═══ PROGRAM — uredniški seznam, ne kartice ═══════════════════════════ */
.program{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:start}
.seznam{border-top:1px solid var(--crta)}
.vrstica{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;gap:22px;
  padding:clamp(22px,2.2vw,30px) 0;
  border-bottom:1px solid var(--crta);
  transition:padding-left var(--cas) var(--lah), border-color var(--cas) var(--lah);
}
.vrstica .st{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--tekst-4);
  transition:color var(--cas) var(--lah)}
.vrstica h3{font-size:clamp(22px,2.1vw,30px);font-weight:350;letter-spacing:-.02em;
  transition:color var(--cas) var(--lah)}
.vrstica .kaj{display:block;font-size:13.5px;color:var(--tekst-3);margin-top:5px;
  transition:color var(--cas) var(--lah)}
.vrstica .znak-plus{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--crta-mocna);
  display:grid;place-items:center;flex:none;
  transition:background var(--cas) var(--lah), border-color var(--cas) var(--lah),
             transform var(--cas) var(--lah);
}
.vrstica .znak-plus svg{width:11px;height:11px;stroke:var(--tekst-3);stroke-width:1.5;
  transition:stroke var(--cas) var(--lah)}
.vrstica:hover,.vrstica:focus-visible{padding-left:16px;border-bottom-color:var(--crta-mocna)}
.vrstica:hover .st,.vrstica:focus-visible .st{color:var(--zelena)}
.vrstica:hover .kaj,.vrstica:focus-visible .kaj{color:var(--tekst-2)}
.vrstica:hover .znak-plus,.vrstica:focus-visible .znak-plus{
  background:var(--zelena);border-color:var(--zelena);transform:translateX(3px)}
.vrstica:hover .znak-plus svg,.vrstica:focus-visible .znak-plus svg{stroke:#06181B}

/* okno s predogledom izdelka — sledi vrstici, ki jo gledaš */
/* Okno je KVADRATNO, ker so izdelki mešani: otoskop ima razmerje 0,29,
   FeNO 1,66. V ležečem oknu bi bili pokončni instrumenti obrezani. */
.okno{
  position:sticky;top:132px;
  border-radius:var(--r);border:1px solid var(--crta);
  background:linear-gradient(165deg,var(--plast-2) 0%, var(--plast-1) 100%);
  aspect-ratio:1/1;overflow:hidden;display:grid;place-items:center;
}
.okno::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 42%, var(--zelena-sij) 0%, transparent 62%);
}
/* Flex, ne grid: odstotna višina se v mreži z avtomatsko vrstico ne razreši,
   zato so se pokončni izdelki (otoskop 0,29) izrisali čez okno in bili obrezani.
   V flex vsebniku z določeno višino max-height:100% deluje. */
.okno .plast{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:9%;
  opacity:0;transform:scale(.965);
  transition:opacity 420ms var(--lah), transform 420ms var(--lah);
}
.okno .plast.vidna{opacity:1;transform:scale(1)}
.okno .plast img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  filter:drop-shadow(0 34px 40px rgba(0,0,0,.6));
}
/* Ležeči izdelki dobijo nekaj zraka ob straneh, pokončni pa smejo v polno
   višino — sicer se tanek instrument izgubi sredi kvadrata. */
.okno .plast[data-oblika="lezeca"] img{max-width:92%}
.okno .plast[data-oblika="pokoncna"] img{max-height:104%}
.okno .oznaka{
  position:absolute;left:22px;bottom:20px;z-index:5;
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tekst-3);
}
.okno .crtice-rob{position:absolute;left:22px;right:22px;top:20px;height:7px;opacity:.4}

/* ═══ IZPOSTAVLJENI IZDELKI — asimetrične kompozicije ══════════════════ */
.izpostavljen{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);align-items:center;
  padding:clamp(46px,5vw,86px) 0;
  border-bottom:1px solid var(--crta);
}
.izpostavljen:last-child{border-bottom:0}
.izpostavljen.obrnjen .slikovni{order:2}
.slikovni{
  position:relative;border-radius:var(--r);
  background:
    radial-gradient(circle at 52% 42%, var(--zelena-sij) 0%, transparent 60%),
    linear-gradient(165deg,var(--plast-2) 0%, var(--plast-1) 100%);
  border:1px solid var(--crta);
  aspect-ratio:5/4;padding:9%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* flex in ne grid — z grid postavitvijo se odstotna višina ne razreši in
   pokončna slika bi ušla iz panela (zdaj so vse ležeče, a slike se menjajo) */
.slikovni img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  filter:drop-shadow(0 44px 48px rgba(0,0,0,.62));
  transition:transform 600ms var(--lah);
}
.izpostavljen:hover .slikovni img{transform:scale(1.035)}
.slikovni .kot-crtice{position:absolute;left:24px;top:24px;width:64px;height:7px;opacity:.5}

.izpostavljen .vsebina .znamka-ime{
  font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--zelena);margin-bottom:16px;
}
.izpostavljen .vsebina h3{
  font-size:clamp(27px,2.9vw,42px);font-weight:300;letter-spacing:-.025em;line-height:1.08;
  margin-bottom:18px;
}
.izpostavljen .vsebina .opis{color:var(--tekst-2);margin-bottom:30px;max-width:46ch}
/* Poudarki proizvajalca — ne tabela s parametri, ampak tisto, kar
   proizvajalec sam postavlja v ospredje. Hairline med vrsticami, nič okvirjev. */
.poudarki{list-style:none;margin:0 0 30px;border-top:1px solid var(--crta)}
.poudarki li{
  position:relative;padding:13px 0 13px 19px;
  border-bottom:1px solid var(--crta);
  font-size:15px;line-height:1.5;color:var(--tekst-2);
}
.poudarki li::before{
  content:"";position:absolute;left:0;top:calc(13px + .62em);
  width:5px;height:5px;background:var(--zelena);border-radius:50%;
}
.poudarki b{color:var(--bela);font-weight:600}

/* Tehnika ne stoji na strani — pošljemo jo na zahtevo. Ta blok je zato
   tiha opomba s stikom, ne tabela, ki jo nihče ne prebere. */
.dokument{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border:1px solid var(--crta);border-radius:var(--r-mali);
  padding:20px 24px;
  background:linear-gradient(160deg,rgba(255,255,255,.022),transparent);
}
.dokument p{font-size:14.5px;line-height:1.55;color:var(--tekst-3);flex:1;min-width:210px;margin:0}
.dokument .povezava{flex:none}

/* ═══ ZAKAJ — uredniški stolpci ════════════════════════════════════════ */
.zakaj{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,2.6vw,44px)}
.zakaj > div{padding-top:26px;border-top:1px solid var(--crta-mocna)}
.zakaj .st{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--zelena);margin-bottom:22px}
.zakaj h3{font-size:clamp(19px,1.6vw,23px);font-weight:500;letter-spacing:-.015em;margin-bottom:12px}
.zakaj p{font-size:14.5px;line-height:1.62;color:var(--tekst-3)}

/* ═══ STATISTIKA — odčitki na umerjevalni črti ═════════════════════════ */
.stat-pas{border-block:1px solid var(--crta);padding:clamp(50px,5.4vw,88px) 0}
.stat-mreza{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,2.6vw,44px)}
.stat{position:relative;padding-left:26px}
.stat::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--crta-mocna)}
.stat .n{font-size:clamp(46px,5.2vw,80px);font-weight:200;line-height:.9;letter-spacing:-.045em}
/* enota stoji na osnovnici — merilnik, ne eksponent */
.stat .n em{font-style:normal;font-size:.36em;color:var(--zelena);font-weight:400;
  letter-spacing:-.01em;margin-left:.08em;vertical-align:baseline}
.stat .l{margin-top:16px;font-size:13px;color:var(--tekst-3);max-width:22ch;line-height:1.5}

/* ═══ POTEK — vodoravna os s postajami ═════════════════════════════════ */
.potek{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,40px);
  padding-top:52px}
.potek::before{content:"";position:absolute;left:0;right:0;top:12px;height:1px;background:var(--crta)}
.potek .postaja{position:relative}
.potek .postaja::before{
  content:"";position:absolute;left:0;top:-46px;width:9px;height:9px;border-radius:50%;
  background:var(--crno);border:1px solid var(--zelena);
  transition:background var(--cas) var(--lah), transform var(--cas) var(--lah);
}
.potek .postaja:hover::before{background:var(--zelena);transform:scale(1.35)}
.potek .postaja .st{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--zelena);margin-bottom:14px}
.potek .postaja h3{font-size:20px;font-weight:500;letter-spacing:-.015em;margin-bottom:10px}
.potek .postaja p{font-size:14.5px;line-height:1.6;color:var(--tekst-3)}

/* ═══ REFERENCE ════════════════════════════════════════════════════════ */
.reference{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px)}
.ustanove{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--crta);
  border:1px solid var(--crta);border-radius:var(--r);overflow:hidden}
.ustanove div{background:var(--crno);padding:clamp(24px,2.4vw,34px);transition:background var(--cas) var(--lah)}
.ustanove div:hover{background:var(--plast-1)}
.ustanove .n{font-size:clamp(24px,2.2vw,32px);font-weight:300;letter-spacing:-.02em;margin-bottom:8px}
.ustanove .o{font-size:13.5px;color:var(--tekst-3);line-height:1.55}

.izjava-mesto{
  border:1px dashed var(--crta-mocna);border-radius:var(--r);
  padding:clamp(26px,2.6vw,38px);margin-top:24px;
}
.izjava-mesto p{font-size:14.5px;color:var(--tekst-3);line-height:1.6}

/* ═══ VIRI ═════════════════════════════════════════════════════════════ */
.viri{border-top:1px solid var(--crta)}
.vir{
  display:grid;grid-template-columns:132px minmax(0,1fr) auto;align-items:center;
  gap:26px;padding:clamp(24px,2.4vw,32px) 0;border-bottom:1px solid var(--crta);
  transition:padding-left var(--cas) var(--lah);
}
.vir:hover{padding-left:16px}
.vir .kdaj{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--tekst-3);text-transform:uppercase}
.vir h3{font-size:clamp(18px,1.7vw,23px);font-weight:400;letter-spacing:-.015em}
.vir p{font-size:14px;color:var(--tekst-3);margin-top:5px}
.vir .strelica{color:var(--tekst-3);transition:color var(--cas) var(--lah),transform var(--cas) var(--lah)}
.vir:hover .strelica{color:var(--zelena);transform:translateX(5px)}

/* ═══ KONTAKT ══════════════════════════════════════════════════════════ */
.kontakt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px)}
.polja{display:grid;gap:20px;margin-top:6px}
.polje{position:relative}
.polje label{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tekst-3);margin-bottom:10px;
}
.polje input,.polje select,.polje textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--crta-mocna);
  padding:12px 0;font-size:16px;color:var(--bela);
  transition:border-color var(--cas) var(--lah);
}
.polje select{appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,var(--tekst-3) 50%),
  linear-gradient(135deg,var(--tekst-3) 50%,transparent 50%);
  background-position:calc(100% - 12px) 20px, calc(100% - 7px) 20px;
  background-size:5px 5px;background-repeat:no-repeat;padding-right:26px}
.polje select option{background:var(--plast-2);color:var(--bela)}
.polje input:focus,.polje select:focus,.polje textarea:focus{outline:none;border-bottom-color:var(--zelena)}
.polje textarea{min-height:118px;resize:vertical}
.polja-par{display:grid;grid-template-columns:1fr 1fr;gap:20px}

.podatki{display:flex;flex-direction:column;gap:1px;background:var(--crta);
  border:1px solid var(--crta);border-radius:var(--r);overflow:hidden}
.podatki > div{background:var(--crno);padding:clamp(22px,2.2vw,30px);
  transition:background var(--cas) var(--lah)}
.podatki > div:hover{background:var(--plast-1)}
.podatki .k{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tekst-3);margin-bottom:10px}
.podatki .v{font-size:clamp(18px,1.6vw,22px);font-weight:350;letter-spacing:-.015em;line-height:1.4}
.podatki .v a:hover{color:var(--zelena)}

/* ═══ NOGA ═════════════════════════════════════════════════════════════ */
.noga{border-top:1px solid var(--crta);padding:clamp(56px,6vw,96px) 0 40px}
.noga-mreza{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(28px,3vw,56px);
  padding-bottom:clamp(46px,5vw,80px)}
.noga .znak{height:50px;margin-bottom:26px}
.noga .opis{font-size:14.5px;color:var(--tekst-3);max-width:32ch;line-height:1.65}
.noga h4{font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tekst-3);margin-bottom:20px}
.noga ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.noga ul a{font-size:14.5px;color:var(--tekst-2);transition:color var(--cas) var(--lah)}
.noga ul a:hover{color:var(--bela)}
.noga-dno{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:28px;border-top:1px solid var(--crta);
  font-size:13px;color:var(--tekst-3)}

/* ═══ POJAV OB DRSENJU ═════════════════════════════════════════════════ */
/* Pojav ob drsenju skrijemo SAMO, kadar je JS na voljo (razred .js postavi
   skripta v glavi). Brez tega varovala bi napaka v JS pustila pol strani
   nevidne — na živi strani nesprejemljivo tveganje. */
.js .pojav{opacity:0;transform:translateY(18px);
  transition:opacity 700ms var(--lah), transform 700ms var(--lah)}
.js .pojav.viden{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .pojav{opacity:1;transform:none}
  .sled path{stroke-dashoffset:0}
}

/* ═══ ODZIVNOST ════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .hero-mreza{grid-template-columns:1fr;gap:52px}
  .kompozicija{max-width:560px;margin-inline:auto;width:100%}
  .program{grid-template-columns:1fr}
  /* width:min() namesto max-width — samodejni robovi v mreži izklopijo
     raztezanje in okno se skrči na vsebino, ki je nič (plasti so absolutne). */
  .okno{position:relative;top:0;width:min(100%,520px);margin:0 auto 8px}
  .znamke-vrsta{justify-content:center;gap:34px 44px}
  .zakaj{grid-template-columns:repeat(2,1fr);gap:34px}
  .stat-mreza{grid-template-columns:repeat(2,1fr);gap:38px}
  .potek{grid-template-columns:repeat(2,1fr);gap:40px}
  .reference,.kontakt{grid-template-columns:1fr}
  .noga-mreza{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  body{font-size:16px}
  .glava nav{display:none}
  .glava .vrsta{height:76px;gap:18px}
  .glava .znak{height:43px}          /* pri 54px se znak in gumb dotakneta roba */
  .glava .gumb{padding:0 16px;font-size:12px}
  .hero{padding-top:calc(76px + 46px)}
  .izpostavljen{grid-template-columns:1fr;gap:30px}
  .izpostavljen.obrnjen .slikovni{order:0}
  .dokument{align-items:flex-start;flex-direction:column;gap:14px}
  .zakaj,.stat-mreza,.potek,.ustanove,.polja-par{grid-template-columns:1fr}
  .potek{padding-top:0}
  .potek::before{display:none}
  .potek .postaja{padding-top:26px;border-top:1px solid var(--crta)}
  .potek .postaja::before{top:-5px}
  .vrstica{grid-template-columns:32px minmax(0,1fr) auto;gap:14px}
  .vir{grid-template-columns:1fr auto;gap:14px}
  .vir .kdaj{grid-column:1/-1}
  .noga-mreza{grid-template-columns:1fr}
  .spec-1{left:-1%;top:8%}
  .spec-2{left:-2%;top:24%}
  .spec-3{left:-1%;top:40%}
  .spec-4{right:-1%;top:18%}
  .spec-5{left:4%;bottom:6%}
  .spec-4 b{font-size:12px}
  .spec{padding:9px 13px}
  .spec b{font-size:13px}
}

/* ═══ PODSTRANI ════════════════════════════════════════════════════════ */

/* Naslov strani je zdaj celoten stavek, ne ena beseda — zato manjša
   stopnja kot na plakatu, a še vedno najvišja na strani. */
.hero .display{font-size:clamp(44px,6.6vw,116px);line-height:.96;letter-spacing:-.035em}
.hero .display .dodatek{
  display:block;margin-top:.3em;max-width:19ch;
  /* max(): na telefonu bi razmerje .335em padlo pod velikost osnovnega besedila */
  font-size:max(18px, .335em);font-weight:300;line-height:1.16;letter-spacing:-.02em;
  color:var(--tekst-3);
}

/* naslovni pas podstrani */
.pas{position:relative;padding:calc(94px + clamp(48px,5vw,86px)) 0 clamp(40px,4vw,64px)}
.pas .drobtine{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:26px;
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tekst-3);
}
.pas .drobtine a{transition:color var(--cas) var(--lah)}
.pas .drobtine a:hover{color:var(--bela)}
.pas .drobtine span{color:var(--tekst-4)}
.pas .drobtine em{font-style:normal;color:var(--bela)}
.pas h1{max-width:19ch;margin:16px 0 0}
.pas .uvod{max-width:60ch;margin-top:24px}

/* podmeni programa */
.podmeni{border-block:1px solid var(--crta);position:relative;z-index:2}
.podmeni .ovoj{display:flex;gap:4px;overflow-x:auto;padding-block:14px;scrollbar-width:none}
.podmeni .ovoj::-webkit-scrollbar{display:none}
.podmeni a{
  white-space:nowrap;padding:10px 18px;border-radius:999px;
  font-size:12.5px;font-weight:600;color:var(--tekst-3);
  transition:color var(--cas) var(--lah), background var(--cas) var(--lah);
}
.podmeni a:hover{color:var(--bela);background:rgba(255,255,255,.05)}
.podmeni a[aria-current="page"]{background:var(--bela);color:#0B0C0D}

/* kartice področij */
.podrocja{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.2vw,30px)}
.podrocje{
  display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--crta);background:var(--plast-1);
  transition:border-color var(--cas) var(--lah), transform var(--cas) var(--lah);
}
.podrocje:hover{border-color:var(--crta-mocna);transform:translateY(-3px)}
.podrocje .foto{
  height:210px;display:flex;align-items:center;justify-content:center;padding:26px;
  background:
    radial-gradient(circle at 52% 40%, var(--zelena-sij) 0%, transparent 62%),
    linear-gradient(165deg,var(--plast-2) 0%, var(--plast-1) 100%);
}
.podrocje .foto img{max-width:100%;max-height:100%;width:auto;height:auto;
  filter:drop-shadow(0 20px 22px rgba(0,0,0,.55))}
.podrocje .telo-p{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
.podrocje .sklop{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--zelena)}
.podrocje h3{font-size:24px;font-weight:400;letter-spacing:-.02em;margin:12px 0 8px}
.podrocje p{font-size:14.5px;line-height:1.55;color:var(--tekst-3);flex:1}
.podrocje .go{
  margin-top:22px;display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bela);
}
.podrocje:hover .go{color:var(--zelena)}

/* storitve */
.storitve{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,2.6vw,40px)}
.storitev{padding-top:26px;border-top:1px solid var(--crta-mocna)}
.storitev .glava-s{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:16px;flex-wrap:wrap}
.storitev h3{font-size:clamp(21px,1.9vw,26px);font-weight:450;letter-spacing:-.015em}
.storitev .znacka{
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--zelena);border:1px solid var(--zelena);border-radius:999px;padding:5px 12px;
  white-space:nowrap;
}
.storitev .telo{margin-bottom:20px}
.storitev .poudarki{margin-bottom:0}

/* o podjetju */
.onas-mreza{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(30px,3.2vw,56px)}
.onas-blok h3{font-size:clamp(20px,1.8vw,24px);font-weight:500;letter-spacing:-.015em;
  margin-bottom:14px}

.znamke-seznam{border-top:1px solid var(--crta)}
.znamka-vrstica{
  display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(20px,2.4vw,44px);
  align-items:center;padding:clamp(22px,2.4vw,32px) 0;border-bottom:1px solid var(--crta);
}
.znamka-vrstica .logo-p{display:flex;align-items:center;height:40px}
.znamka-vrstica .logo-p img{max-height:32px;max-width:170px;width:auto;
  filter:brightness(0) invert(1);opacity:.6;transition:opacity var(--cas) var(--lah)}
.znamka-vrstica:hover .logo-p img{opacity:1}
.znamka-vrstica h3{font-size:clamp(19px,1.7vw,23px);font-weight:500;letter-spacing:-.01em;
  margin-bottom:6px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.znamka-vrstica p{font-size:15px;line-height:1.6;color:var(--tekst-3)}
.eks-oznaka{
  font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--zelena);border:1px solid var(--zelena);border-radius:999px;padding:4px 10px;
}

.ustanove-opomba{margin-top:22px;font-size:14px;color:var(--tekst-3);max-width:56ch}

/* dokumentacija */
.prose-sredina{max-width:64ch;margin-bottom:clamp(40px,4vw,64px)}
.prose-sredina a{color:var(--zelena);font-weight:600}
.dok-mreza{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,2.6vw,44px)}
.dok-skupina{padding-top:24px;border-top:1px solid var(--crta-mocna)}
.dok-skupina h3{font-size:20px;font-weight:500;letter-spacing:-.01em;margin-bottom:16px}
.dok-skupina ul{list-style:none}
.dok-skupina li{
  position:relative;padding:11px 0 11px 17px;
  border-bottom:1px solid var(--crta);
  font-size:14.5px;line-height:1.5;color:var(--tekst-2);
}
.dok-skupina li::before{content:"";position:absolute;left:0;top:calc(11px + .6em);
  width:5px;height:5px;background:var(--zelena);border-radius:50%}

/* poziv na koncu strani */
.poziv{
  border:1px solid var(--crta);border-radius:var(--r);
  padding:clamp(36px,4vw,64px);
  background:
    radial-gradient(120% 140% at 88% 10%, var(--zelena-sij) 0%, transparent 58%),
    linear-gradient(165deg,var(--plast-2) 0%, var(--plast-1) 100%);
}
.poziv h2{max-width:16ch;margin-bottom:18px}
.poziv .telo{max-width:52ch;margin-bottom:30px}

/* pravne strani */
.pravno{max-width:70ch}
.pravno .clen{padding:0 0 clamp(26px,2.6vw,38px);border:0}
.pravno .clen h2{font-size:clamp(19px,1.7vw,23px);font-weight:500;letter-spacing:-.01em;
  margin-bottom:12px}

@media (max-width:1080px){
  .podrocja{grid-template-columns:repeat(2,1fr)}
  .storitve,.onas-mreza,.dok-mreza{grid-template-columns:1fr}
  .znamka-vrstica{grid-template-columns:150px minmax(0,1fr)}
}
@media (max-width:820px){
  .podrocja{grid-template-columns:1fr}
  .znamka-vrstica{grid-template-columns:1fr;gap:16px}
  .pas{padding-top:calc(76px + 40px)}
}

/* vaba za robote — vidna samo strojem */
.vaba{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ═══ MENI ZA TABLICE IN TELEFONE ══════════════════════════════════════
   Pod 1100 px prej ni bilo navigacije — do podstrani se je dalo priti
   samo prek noge. Zdaj se meni skrije za gumb in odpre čez cel zaslon. */

.meni-gumb{display:none}
.meni-poziv{display:none}

@media (max-width:1100px){
  .glava nav{display:none}
  .namizni-poziv{display:none}
  .meni-gumb{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:auto;width:46px;height:46px;padding:0 11px;
    border:1px solid var(--crta-mocna);border-radius:999px;
    transition:border-color var(--cas) var(--lah), background var(--cas) var(--lah);
  }
  .meni-gumb span{
    display:block;height:1.5px;background:var(--bela);border-radius:2px;
    transition:transform var(--cas) var(--lah), opacity var(--cas) var(--lah);
  }
  .meni-gumb:hover{border-color:rgba(255,255,255,.34)}

  /* odprt meni */
  .meni-odprt .meni-gumb span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .meni-odprt .meni-gumb span:nth-child(2){opacity:0}
  .meni-odprt .meni-gumb span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

  .meni-odprt .glava{
    background:rgba(247,247,248,.94);
    backdrop-filter:blur(22px) saturate(140%);
    -webkit-backdrop-filter:blur(22px) saturate(140%);
    border-bottom-color:var(--crta);
  }
  .meni-odprt .glava nav{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:fixed;left:0;right:0;top:var(--glava-h,76px);
    /* izrecna višina: iz top+bottom se ne razreši, dvh pa upošteva
       skrivajočo se vrstico brskalnika na telefonu */
    height:calc(100dvh - var(--glava-h,76px));
    max-height:calc(100vh - var(--glava-h,76px));
    padding:clamp(20px,4vw,44px) var(--rob) 40px;
    background:var(--crno);
    overflow-y:auto;
  }
  .meni-odprt .glava nav a{
    font-size:clamp(21px,4.6vw,30px);font-weight:350;letter-spacing:-.02em;
    color:var(--bela);padding:20px 0;border-bottom:1px solid var(--crta);
  }
  .meni-odprt .glava nav a::after{display:none}
  .meni-odprt .glava nav a[aria-current="page"]{color:var(--zelena)}
  .meni-odprt .meni-poziv{
    display:inline-flex;justify-content:center;align-self:flex-start;
    margin-top:32px;border-bottom:0;font-size:13px;
  }
  /* ko je meni odprt, se stran pod njim ne premika */
  .meni-odprt{overflow:hidden}
}

/* indeksi v formulah (SpO2, EtCO2) — brez dviga vrstice in brez razmika */
sub{font-size:.72em;line-height:0;vertical-align:-.22em;letter-spacing:0}

/* Obvestilo o zasebnosti ob obrazcu — GDPR zahteva informacijo ob zbiranju,
   ne le povezavo v nogi. */
.obvestilo-zasebnost{
  margin:18px 0 0;font-size:13px;line-height:1.55;color:var(--tekst-4);max-width:52ch;
}
.obvestilo-zasebnost a{color:var(--tekst-3);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--crta-mocna)}
.obvestilo-zasebnost a:hover{color:var(--zelena);text-decoration-color:var(--zelena)}


/* Okno s sliko se pokaže šele ob prehodu miške čez vrstico programa.
   Skrijemo cel okvir, ne le slike — sicer na strani stoji prazen okvirček.
   Kjer miške ni, okna sploh ni: mouseenter tam nikoli ne sproži, poleg tega
   bi se slika podvajala s seznamom. */
@media (hover:hover) and (min-width:1181px){
  .okno{opacity:0;visibility:hidden;
    transition:opacity 420ms var(--lah), visibility 0s linear 420ms}
  .okno:not(.caka){opacity:1;visibility:visible;
    transition:opacity 420ms var(--lah), visibility 0s}
}
@media (hover:none),(max-width:1180px){
  .okno{display:none}
}

/* Okno s povpraševanjem za dokumentacijo. Gumb v kartici izdelka ga odpre;
   obiskovalec ostane na strani, namesto da ga odnese v poštni odjemalec. */
.pov-ozadje{position:fixed;inset:0;z-index:9997;display:flex;align-items:center;
  justify-content:center;padding:clamp(16px,4vw,48px);overflow-y:auto;
  background:rgba(6,7,8,.82);backdrop-filter:blur(8px)}
.pov-ozadje[hidden]{display:none}
.pov-okvir{position:relative;width:min(100%,620px);border-radius:var(--r);
  background:var(--plast-1);border:1px solid var(--crta-mocna);
  padding:clamp(26px,3.4vw,44px);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pov-okvir h2{font-size:clamp(24px,2.6vw,34px);font-weight:280;letter-spacing:-.02em;
  line-height:1.1;margin:10px 0 0}
.pov-izdelek{margin:10px 0 24px;font-size:13px;color:var(--zelena);
  font-weight:600;letter-spacing:.02em}
.pov-zapri{position:absolute;top:14px;right:16px;width:38px;height:38px;
  border-radius:50%;border:1px solid var(--crta);background:transparent;
  color:var(--tekst-2);font-size:22px;line-height:1;cursor:pointer;
  transition:background 200ms var(--lah),color 200ms var(--lah)}
.pov-zapri:hover{background:rgba(255,255,255,.08);color:#fff}
.pov-dno{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
#pov-odziv{display:none;font-size:14px;font-weight:600}
body.pov-odprto{overflow:hidden}
/* Gumb je zdaj <button>, zato mu vrnemo videz povezave. */
.dokument button.povezava{border:0;background:none;padding:0 0 4px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:var(--bela)}

/* Seznam tehnične dokumentacije — vrstica na dokument. */
.pravno .dok-uvod{font-size:clamp(16px,1.2vw,18px);color:var(--tekst-2);
  max-width:64ch;margin-bottom:clamp(40px,4vw,64px)}
.dok-skupina{margin-bottom:clamp(38px,4vw,58px)}
.dok-skupina h2{display:flex;align-items:baseline;gap:12px;font-size:11px;
  font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--zelena);
  padding-bottom:14px;margin-bottom:2px;border-bottom:1px solid var(--crta)}
.dok-skupina .dok-st{font-size:10px;color:var(--tekst-4);letter-spacing:.1em}
ul.dokumenti{list-style:none;margin:0;padding:0}
ul.dokumenti li{margin:0}
ul.dokumenti a{display:grid;grid-template-columns:20px 1fr auto auto;align-items:center;
  gap:16px;padding:16px 4px;border-bottom:1px solid var(--crta);color:#fff;
  text-decoration:none;transition:background 240ms var(--lah),padding 240ms var(--lah)}
ul.dokumenti a:hover{background:rgba(255,255,255,.03);padding-left:12px;padding-right:12px}
ul.dokumenti .prenos{width:16px;height:16px;color:var(--tekst-4);
  transition:color 240ms var(--lah),transform 240ms var(--lah)}
ul.dokumenti a:hover .prenos{color:var(--zelena);transform:translateY(2px)}
ul.dokumenti a.na-zahtevo:hover .prenos{color:var(--koral);transform:none}
ul.dokumenti .ime{font-size:16px;font-weight:500;letter-spacing:-.01em}
ul.dokumenti a.na-zahtevo .ime{color:var(--tekst-2)}
ul.dokumenti .vrsta{font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tekst-3);white-space:nowrap}
ul.dokumenti .meta{font-size:12px;color:var(--tekst-4);white-space:nowrap;
  font-variant-numeric:tabular-nums}
@media (max-width:780px){
  ul.dokumenti a{grid-template-columns:20px 1fr;row-gap:4px}
  ul.dokumenti .vrsta,ul.dokumenti .meta{grid-column:2}
}

/* Bralnik: dokument se odpre na strani, brez prenosa. */
.bralnik{position:fixed;inset:0;z-index:9998;display:none;background:rgba(6,7,8,.86);
  backdrop-filter:blur(6px);padding:clamp(12px,3vw,40px)}
.bralnik.odprt{display:flex;flex-direction:column}
.bralnik-glava{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:0 4px 14px;color:#fff}
.bralnik-ime{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-right:auto}
.bralnik-ime span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tekst-3);margin-top:3px}
.bralnik-gumb{display:inline-flex;align-items:center;height:38px;padding:0 18px;
  border-radius:999px;border:1px solid var(--crta-mocna);background:transparent;
  color:#fff;font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:background 200ms var(--lah),border-color 200ms var(--lah)}
.bralnik-gumb:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.bralnik-gumb.zapri{background:var(--zelena);border-color:var(--zelena);color:#06181B}
.bralnik-okvir{flex:1;min-height:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--crta-mocna);background:#1a1c1f}
.bralnik-okvir iframe{width:100%;height:100%;border:0;display:block}
body.bralnik-odprt{overflow:hidden}

/* Žig na širokih zaslonih — zig-siroki
   Nad 1600 px se vsebina neha širiti in ob straneh nastane prazen rob.
   Žig je bil pripet na rob zaslona in omejen na 760 px, zato ga je odneslo
   v to praznino in odrezalo (pri 2560 px 331 px oziroma 43 % znaka).
   Tu ga pripnemo na stolpec vsebine, da je odnos do besedila enak povsod. */
@media (min-width:1601px){
  .zig.desno svg{
    right:calc(50% - min(100vw, var(--max))/2 - 90px);
    width:clamp(520px, 34vw, 1000px);
  }
  .zig.levo svg{
    left:calc(50% - min(100vw, var(--max))/2 - 120px);
    width:clamp(420px, 28vw, 820px);
  }
  .zig.noga svg{
    right:calc(50% - min(100vw, var(--max))/2 - 40px);
    width:clamp(400px, 26vw, 760px);
  }
  .zig.zelen{opacity:.055}
  .zig:not(.zelen){opacity:.03}
}

/* Žig: mehki robovi in odmiki, vezani na znak — zig-mehki-rob
   Težavi sta bili dve. Navpični odmiki so bili v odstotkih VIŠINE RAZDELKA,
   ta pa niha od 1000 do 4000 px: pri visokem razdelku je top:-14% pomenilo
   -564 px in od znaka je ostalo 18 px. Zato jih vežemo na znak sam prek
   transform, kjer se odstotek nanaša na element.
   Drugič, znak je ob robu razdelka odrezalo z ostro črto. Namesto tega
   ga ob robovih zabrišemo, da prehod ni viden. */
.zig{
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image:linear-gradient(to bottom,
    transparent 0, #000 14%, #000 86%, transparent 100%);
}
.zig.levo svg{top:0;transform:translateY(-24%)}
.zig.noga svg{bottom:0;transform:translateY(28%)}

/* 3D žig — iztiskani znak z lastnimi prelivi.
   fill:currentColor tu ne sme veljati, sicer se iztisk splošči v silhueto. */
/* Nižja motnost — žig naj daje globino, ne pa tekmuje z vsebino. */
.zig{opacity:.03}
.zig.zelen{opacity:.05}
.zig.tri-d{opacity:.055}
@media (min-width:1601px){
  .zig{opacity:.035}
  .zig.zelen{opacity:.055}
  .zig.tri-d{opacity:.06}
}

/* Stik v nogi — telefon in e-pošta. Ista stopnja kot .podatki .v na strani
   Kontakt, da se noga in kontaktna stran berta enako.
   padding-block dvigne klikljivo višino, ne da bi se noga vidno raztegnila. */
.noga-stik{margin-top:18px;font-size:16px;line-height:1.9;letter-spacing:-.01em}
.noga-stik a{color:var(--tekst-2);transition:color var(--cas) var(--lah);
  display:inline-block;padding-block:3px}
.noga-stik a:hover{color:var(--bela)}

/* CTA v glavi na tablici in telefonu — mobilni-cta
   Pod 1100 px je bil poziv skrit in dosegljiv sele v odprtem meniju; na
   telefonu je bila stran zato dolga devet zaslonov brez poti do povprasevanja.
   Izmerjeno pri 360 px: znak 43 + gumb 137 + hamburger 46 + dve vrzeli 36 =
   262 px od 312 px na voljo, torej 50 px rezerve. Gumb ostane .obroba, ne
   koralen, zato pravilo o eni koralni barvi na pogled ostane nedotaknjeno.
   CTA ostane viden v glavi, v odprtem meniju pa ga ne podvajamo. */
@media (max-width:1100px){
  .namizni-poziv{display:inline-flex}
  .meni-odprt .meni-poziv{display:none}
}

/* <picture> je samo ovoj za izbiro formata; display:contents poskrbi, da
   <img> ostane neposredni otrok flex vsebnika in se odstotne visine
   razresijo tako kot pred uvedbo WebP. */
picture{display:contents}

/* Reference v nogi. Vodoravni niz z odcitki, loceni s hairline crto nad njim.
   Stevilka nosi tezo, tip stoji ob njej, opis je tih. Nic novega v paleti,
   nic nove stopnje pisave: 18px je ista stopnja kot .podatki .v na Kontaktu. */
.noga-reference{padding-top:26px;margin-bottom:clamp(34px,3.4vw,52px);
  border-top:1px solid var(--crta)}
.noga-reference h4{margin-bottom:18px}
.noga-reference ul{list-style:none;display:flex;flex-wrap:wrap;gap:16px clamp(26px,3vw,52px)}
.noga-reference li{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.noga-reference li b{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--bela);
  font-variant-numeric:tabular-nums}
.noga-reference li span{font-size:14.5px;color:var(--tekst-2)}
.noga-reference li span.o{font-size:13px;color:var(--tekst-4);flex-basis:100%}
.noga-reference .ref-prazno{font-size:13.5px;color:var(--tekst-3);max-width:56ch;line-height:1.6}
.noga-reference .ref-prazno a{color:var(--zelena);font-weight:600}

/* Oznaka, da blok zaenkrat vidi samo prijavljeni skrbnik. Odstrani se skupaj
   s pogojem v footer.php, ko gre vsebina v javnost. */
.samo-admin{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--koral);border:1px dashed var(--koral);border-radius:999px;padding:5px 13px}
.samo-admin a{color:var(--koral);text-decoration:underline;text-underline-offset:3px}


/* SALESI — art-direction poliranje. Uveljavljeno 13. 8. 2026.
   Blok stoji na koncu datoteke in samo prepise posamezne vrednosti zgoraj.
   Nobene nove barve, nobene nove pisave, nobene nove sekcije. */

/* ── 1. GLAVA: vecja opticna teza znaka in navigacije ───────────────── */
.glava .znak{height:60px}
.glava nav{gap:30px}
.glava nav a{font-size:14px;font-weight:500;color:rgba(255,255,255,.80)}
.glava nav a:hover{color:#fff}

/* ── 3. NASLOV: ostaja tanek, samo tesnejsi tracking in vrstice ─────── */
.hero .display{letter-spacing:-.042em;line-height:.94}

/* ── 4. PODNASLOV: 12 % manjsi, zracnejse vrstice, ozji blok ───────── */
.hero .display .dodatek{font-size:max(17px,.295em);line-height:1.26;
  max-width:17ch;margin-top:.36em;color:rgba(255,255,255,.50)}

/* ── 5. UVOD: ozji editorialni blok, da ne deluje kot zid ─────────── */
/* Prava trostopenjska hierarhija zahteva poseg v predlogo; tu je samo mera. */
.hero-uvod{max-width:42ch;font-size:clamp(16.5px,1.15vw,18.5px);line-height:1.64}

/* ── 6. CTA: manj gumbast, brez sija, mirnejsi hover ──────────────── */
/* Pilule ostanejo pilule pri oznakah (.spec, .podmeni, .znacka) — samo
   gumbi dobijo mirnejsi radius, da niso videti kot spletni gradnik. */
.gumb{border-radius:10px;height:54px;padding:0 34px;font-size:13.5px;
  transition:background var(--cas) var(--lah),border-color var(--cas) var(--lah)}
.gumb:hover{transform:none;box-shadow:none}
.gumb.poudarek:hover{background:var(--koral-hover);box-shadow:none}
.gumb.obroba:hover{border-color:rgba(255,255,255,.30);background:rgba(255,255,255,.04)}
.glava .gumb{border-radius:9px;height:44px;padding:0 20px;font-size:13px}

/* ── 7. NAPRAVA: vecja prisotnost, naravnejsa senca ───────────────── */
/* Dve senci namesto ene: tesna kontaktna + mehka ambientalna. Tako izdelek
   stoji v prostoru in ni videti kot PNG, polozen na ozadje. */
.kompozicija .naprava{width:100%;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.55)) drop-shadow(0 54px 64px rgba(0,0,0,.62))}

/* ── 8. KROGI IN OKOLICA: priblizno 30 % manj intenzivno ───────────── */
/* Hkrati poenotimo turkizno: sij je bil #4FA8AF, vse ostalo na strani je
   #57A896. Tu je popravljeno na eno samo vrednost. */
.kompozicija .obroci{opacity:.30}
.kompozicija .obroci circle.zivi{stroke:rgba(87,168,150,.24)}
.kompozicija .polje{background:radial-gradient(circle at 50% 46%,
  rgba(87,168,150,.13) 0%, rgba(87,168,150,.04) 34%, transparent 66%)}
.kompozicija .skala{opacity:.28}
.sled{opacity:.5}
.sled path{stroke-width:1}

/* ── 9.+10. PILULE: hierarhija namesto petih enakovrednih znack ────── */
.spec{background:rgba(18,20,22,.44);border-color:rgba(255,255,255,.08);
  box-shadow:0 10px 26px rgba(0,0,0,.34);padding:10px 15px}
.spec-1{border-color:rgba(87,168,150,.34)}
.spec-1 b{font-size:17px;font-weight:600}
.spec-2,.spec-3{opacity:.66}
.spec-2 b,.spec-3 b{font-size:13px;font-weight:500}
.spec-4 b{font-size:15px;color:#fff}
/* ATS/ERS ni znacka, ampak tehnicna opomba — zato brez stekla in okvirja. */
.spec-5{background:none;border:0;box-shadow:none;padding:0;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.spec-5 i{font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.46)}

/* ── 11. CILJNE USTANOVE: informacijski pas, ne seznam ────────────── */
.naslovniki{gap:8px 24px;padding-top:22px}
.naslovniki span{font-size:12.5px;letter-spacing:.015em;
  color:rgba(255,255,255,.50);padding-left:14px}
.naslovniki span::before{width:3.5px;height:3.5px;top:.68em;opacity:.85}

/* ── 12. LOGOTIPI: enotna opticna visina in svetlost ──────────────── */
/* Prej so visine nihale od 18 do 38 px in flmedical je imel svojo motnost.
   Zdaj so v ozjem pasu 22–30 px in vsi na isti svetlosti. */
.trak{padding:clamp(40px,4.2vw,62px) 0}
.znamka{padding-inline:clamp(34px,4vw,68px)}
.znamka img{opacity:.58}
.znamka:hover img{opacity:1}
.znamka[data-z="sorimex"] img{height:22px}
.znamka[data-z="elinkcare"] img{height:30px}
.znamka[data-z="lepu"] img{height:30px}
.znamka[data-z="getein"] img{height:24px}
.znamka[data-z="kawe"] img{height:26px}
.znamka[data-z="flmedical"] img{height:19px;opacity:.58}
.znamka[data-z="flmedical"]:hover img{opacity:1}
.znamka[data-z="zarys"] img{height:30px}
.znamka[data-z="ulma"] img{height:28px}
.znamka .eks{top:-16px;font-size:8px;color:rgba(87,168,150,.85)}

/* ── Zascite za ozje zaslone ─────────────────────────────────────
   Blok poliranja stoji za medijskimi poizvedbami, zato bi brez tega prepisal
   tudi mobilne vrednosti: znak bi na telefonu zrasel s 43 na 60 px, pilule pa
   bi se povecale. Tu jih vrnemo v mero, sorazmerno z novimi namiznimi. */
@media (max-width:820px){
  .glava .znak{height:46px}
  .glava .gumb{height:42px;padding:0 16px;font-size:12px}
  .gumb{height:50px;padding:0 26px;font-size:13px}
  .spec{padding:8px 12px}
  .spec-1 b{font-size:14px}
  .spec-2 b,.spec-3 b{font-size:11.5px}
  .spec-4 b{font-size:12px}
  .spec-5 i{font-size:9.5px}
}

/* Fokusni obroc mora slediti novemu radiusu gumba, sicer bi ostal pilula. */
.gumb:focus-visible{border-radius:10px}

/* Hover terakote je odtenek iste barve, ne nova barva v paleti. */
:root{--koral-hover:#2ECA6A}
.gumb.poudarek:hover{background:var(--koral-hover)}

/* Svetlejsi odtenek zelene za hover na polni zeleni ploskvi (pasica piskotkov)
   in barva za sporocila o napaki. Oba sta odtenka obstojecih barv, ne novi
   barvi v paleti. Izmerjeno na #0B0C0D: 7,84 : 1 in 6,27 : 1. */
:root{--zelena-svetla:#6277D8;--napaka:#B3261E}

/* ── Zakljucni poziv na petrolu ─────────────────────────────────
   #124136 je najpogostejsa barva znaka, ne nova barva. Edina polna barvna
   ploskev na strani; vse ostalo ostane temno.
   Bela na petrolu doseze 11,44 : 1.
   Poudarek #57A896 tu pade na 4,06 : 1, zato na tej ploskvi preide na
   svetlejsi mint #8FD4C2 pri 6,74 : 1.
   Terakota loci od ploskve le 2,38 : 1, zato je primarni gumb tu bel
   (11,44 : 1). Terakota s tem ostane rezervirana za temne razdelke. */
:root{--petrol:#27327B;--petrol-svetla:#37459B;--mint:#AFC1FF}
.poziv-petrol{background:var(--petrol)
  radial-gradient(120% 150% at 88% 8%, var(--petrol-svetla) 0%, transparent 62%)}
/* .tesno ima padding-top:0, kar je prav za temne razdelke, za barvno
   ploskev pa bi pomenilo, da se pas zacne tik ob vsebini. */
.poziv-petrol{padding-top:clamp(84px,9vw,168px)}
/* Na barvni ploskvi obris nicesar ne locuje, zato pade. Vodoravni odmik
   prevzame .ovoj, navpicni ostane, da pas diha. */
.poziv-petrol .poziv{background:none;border:0;padding-inline:0}
.poziv-petrol .telo{color:rgba(255,255,255,.78)}
.poziv-petrol .odcitek b,.poziv-petrol .idx{color:var(--mint)}
.poziv-petrol .gumb.poudarek{background:#fff;color:#0B0C0D}
.poziv-petrol .gumb.poudarek:hover{background:rgba(255,255,255,.88)}

/* Nad 1000 px gre akcija na desno stran pasu. Prej je bila desna polovica
   prazna, ker je na crnem ozadju to mesto zapolnjeval zeleni preliv panela.
   Pod 1000 px ostane vse eno pod drugim, kot doslej. */
@media (min-width:1000px){
  .poziv-petrol .poziv{display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:clamp(40px,5vw,90px);align-items:center}
  .poziv-petrol .poziv h2{grid-column:1;grid-row:1;margin-bottom:14px}
  .poziv-petrol .poziv .telo{grid-column:1;grid-row:2;margin-bottom:0}
  .poziv-petrol .poziv .gumb{grid-column:2;grid-row:1 / span 2;justify-self:end}
}

/* ── Naslovi po popravku stopenj ──────────────────────────────────
   Oznaka razdelka je zdaj h2, kartice programa in storitve prav tako, noga h3.
   Videz mora ostati enak, zato novi stopnji dobita iste vrednosti. */
.sek-glava h2.ime{font-size:10.5px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--tekst-3)}
.podrocje h2{font-size:24px;font-weight:400;letter-spacing:-.02em;margin:12px 0 8px}
.storitev h2{font-size:clamp(21px,1.9vw,26px);font-weight:450;letter-spacing:-.015em}
.noga h3{font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tekst-3);margin-bottom:20px}
.noga-reference h3{margin-bottom:18px}

/* ── Kontrast na vsebinskem drobnem besedilu ─────────────────────────
   --tekst-4 je pri 3,79 : 1 pod AA. Za okrasne stevilke je to v redu, za
   pravno obvestilo in podatke o dokumentu ne. Ti dve mesti gresta na
   --tekst-3 pri 6,07 : 1. Drugod --tekst-4 ostane. */
.obvestilo-zasebnost{color:var(--tekst-3)}
ul.dokumenti .meta{color:var(--tekst-3)}

/* ── Klikljive povrsine na dotik ───────────────────────────────────
   Povecana je samo povrsina, ne pisava. Noga se razsiri za 4 px na vrstico. */
.noga ul{gap:8px}
.noga ul a{display:inline-block;padding-block:8px}
.podmeni a{padding-block:13px}

/* Naslov, ki ga slisi bralnik zaslona, oko pa ne. Ni display:none, ker bi
   ga bralniki tedaj preskocili. */
.samo-bralnik{position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}


/* ════════════════════════════════════════════════════════════════════
   SMER E — prehod na svetlo osnovo s toplo nevtralno osjo.
   Zetoni zgoraj so zamenjani. Spodaj so samo mesta, ki so bila trdo
   vezana na temno podlago. Vsak popravek je bil izmerjen na izrisani
   strani. Varnostna kopija prejsnjega sloga je v peskovniku.
   ════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════
   SALESI — smer E, prekrivni slog za PREDOGLED
   Ne spreminja teme. Nalozi se samo, kadar je v naslovu ?e=1.
   Vse vrednosti izhajajo iz istega sistema kot studija identitete.
   ══════════════════════════════════════════════════════════════════════ */


/* ── 1. Telo ─────────────────────────────────────────────────────────── */
body{ background:var(--crno); color:var(--bela); }

/* ── 2. Kjer je --bela sluzila kot PODLAGA in ne kot besedilo ────────── */
.preskoci{ background:#141516; color:#F7F7F8; }
.gumb{ background:#141516; color:#F7F7F8; }
.gumb:hover{ background:#3B3C3F; box-shadow:0 6px 18px rgba(20,21,22,.12); }
.gumb.obroba{ background:transparent; color:#37459B; border-color:#4A5CBA; }
.gumb.obroba:hover{ border-color:#37459B; background:#F5F7FF; }
.gumb.poudarek{ background:var(--koral); color:#fff; }
.podmeni a[aria-current="page"]{ background:#EEEEF0; color:#141516; }
.meni-gumb span{ background:#141516; }
.meni-gumb:hover{ border-color:#C3C4C7; }

/* ── 3. Kjer je --crno sluzil kot ploskev na temni strani ────────────── */
.potek .postaja::before{ background:#FFFFFF; }
.ustanove div,
.podatki > div{ background:#FFFFFF; border:1px solid #DDDEE0; }
.ustanove div:hover,
.podatki > div:hover{ background:#EEEEF0; }
.meni-odprt .glava nav{ background:#F7F7F8; }

/* ── 4. Glava ───────────────────────────────────────────────────────── */
.glava{ background:rgba(247,247,248,.88); border-bottom:1px solid #DDDEE0; }
.glava.plava{ background:rgba(247,247,248,.70); }
/* Bolj prosojna glava se ob drsenju dvakrat znajde nad temno ploskvijo, nad
   pasom Zaupanje in nad zakljuckom. Tam se pod tancico bere temna vsebina in
   sivi napisi izgubijo razmerje, zato gre pisava v glavi ob drsenju v crnilo.
   Nad papirjem da 15,3 : 1, nad temno ploskvijo pod tancico 5,9 : 1. */
.glava.plava nav > a{ color:#141516; }
/* Isto velja za znak. Pri indigu 600 je nad temno ploskvijo pod tancico
   ostalo 2,8 : 1, kar je pod mejo 3 : 1 za grafiko. Indigo 800 da 5,3 : 1
   nad temno in 10,2 : 1 nad papirjem. */
.glava.plava svg.znak{ color:#27327B; }
.glava nav a{ color:#4E5054; }
.glava nav a:hover,
.meni-odprt .glava nav a{ color:#141516; }
.podmeni a:hover{ background:#EEEEF0; }

/* ── 5. Ploskve, ki so bile temne ────────────────────────────────────── */
.okno,
.poziv{
  background:#EEEEF0;
  border:1px solid #DDDEE0;
}
/* Ploskev za izdelkom: mehak metin sij, ki se izteka v papir. Izrez naprave
   tako stoji na tleh in ne lebdi na sivini. Barvi sta iz zaklenjene palete,
   bleda meta in papir; besedila na tej ploskvi ni, zato ni razmerja za
   preverjanje. */
.slikovni,
.podrocje .foto{
  background:
    radial-gradient(circle at 50% 44%, #CFF6DC 0%, rgba(207,246,220,0) 66%),
    #F7F7F8;
  border:1px solid #DDDEE0;
}
.okno::before{ background:radial-gradient(circle at 50% 42%, rgba(74,92,186,.07) 0%, transparent 62%); }
.podrocje{ background:#FFFFFF; }
.pov-okvir{ background:#FFFFFF; box-shadow:0 30px 80px rgba(20,21,22,.18); }
.polje select option{ background:#FFFFFF; color:#141516; }

/* ── 6. Sence: na svetli podlagi so tople in komaj vidne ─────────────── */
.kompozicija .naprava{ filter:drop-shadow(0 18px 26px rgba(20,21,22,.16)); }
.okno .plast img{ filter:drop-shadow(0 14px 20px rgba(20,21,22,.14)); }
.podrocje .foto img{ filter:drop-shadow(0 10px 14px rgba(20,21,22,.13)); }
.spec{
  background:rgba(255,255,255,.72);
  border:1px solid #DDDEE0;
  box-shadow:0 6px 18px rgba(20,21,22,.07);
  color:#141516;
}
.spec-4 b{ color:#141516; }
.spec-5 i{ color:#64666A; }

/* ── 7. Logotipi partnerjev: na svetlem so crni, ne obrnjeni ─────────── */
.znamka img,
.znamka-vrstica .logo-p img{ filter:brightness(0); opacity:.62; }
.znamka:hover img{ opacity:1; }
.znamka .ime-tekst{ color:#7F8084; }
.znamka:hover .ime-tekst{ color:#141516; }

/* ── 8. Drobni popravki barve besedila ──────────────────────────────── */
.hero .display span,
.naslovniki span{ color:#64666A; }
.poziv-petrol .telo{ color:rgba(255,255,255,.82); }
ul.dokumenti a{ color:#141516; }
ul.dokumenti a:hover{ background:#EEEEF0; }
.pov-zapri:hover{ background:#EEEEF0; color:#141516; }

/* ── 9. Noga: edina velika temna ploskev na svetli strani ────────────── */
.noga{ background:#0B1034; color:#C3C4C7; border-top:0; }
.noga a,
.noga ul a{ color:#C3C4C7; }
/* Povezave v nogi ob prehodu v meto: ista poteza kot drobne oznake drugod.
   Ziva meta #65E68C na crnilu noge doseze 11,6 : 1. */
.noga a:hover,
.noga ul a:hover,
.noga-stik a:hover{ color:#65E68C; }
.noga .opis{ color:#9D9EA2; }
.noga .znak path,
.noga svg path{ fill:currentColor; }

/* ── 10. Obrazci ────────────────────────────────────────────────────── */
.polje input,.polje select,.polje textarea{
  color:#141516;
  background:#FFFFFF;
  border-bottom-color:#9D9EA2;
}
.polje input::placeholder,.polje textarea::placeholder{ color:#7F8084; }
.polje input:focus,.polje select:focus,.polje textarea:focus{
  border-bottom-color:#4A5CBA;
}

/* ── 11. Fokus: obrocek z odmikom, nikoli neposredno na komponenti ──── */
:focus-visible{ outline:2px solid #65E68C; outline-offset:2px; }
::selection{ background:#D2DDFF; color:#141516; }

/* ── 12. Kalibracijske crtice: opuscene, kot je predlagala studija ──── */
.crtice,.crtice-v,.kompozicija .skala::before{ background-image:none; }

/* ── 13. Bralnik dokumentov ostane temen — je pregledovalnik, ne stran ─ */
.bralnik{ background:rgba(11,16,52,.92); }
.bralnik-glava,.bralnik-gumb{ color:#fff; }

/* ══════════════════════════════════════════════════════════════════════
   POPRAVKI PO PRVEM PREGLEDU V BRSKALNIKU
   Vsak od teh je bil najden z merjenjem kontrasta na izrisani strani,
   ne z ugibanjem.
   ══════════════════════════════════════════════════════════════════════ */

/* ── A. Znak na temnih ploskvah ───────────────────────────────────
   znak.svg je zdaj plosk in privzeto pravilen za svetlo podlago.
   Na nogi in petrolnem pasu ga obrnemo v svetlo razlicico. */
.noga .znak [fill="#0A0A0A"], .poziv-petrol .znak [fill="#0A0A0A"]{ fill:#F7F7F8; }
.noga .znak [fill="#4A5CBA"], .poziv-petrol .znak [fill="#4A5CBA"]{ fill:#AFC1FF; }
.noga .znak [fill="#37459B"], .poziv-petrol .znak [fill="#37459B"]{ fill:#8298F1; }

/* ── B. Podnaslov v naslovni sekciji ────────────────────────────────
   .dodatek je bil bela pri 50 % — na svetli podlagi 1,03:1. */
.hero .display .dodatek{ color:#64666A; }

/* ── C. Temne ploskve: zetoni besedila se znotraj njih obrnejo nazaj ──
   Ker tema povsod uporablja zetone, en blok pokrije nogo, petrolni pas
   in bralnik hkrati. */
.noga, .poziv-petrol, .bralnik, .surface-temna{
  --bela:#F7F7F8;
  --tekst-2:#C3C4C7;
  --tekst-3:#9D9EA2;
  --tekst-4:#9D9EA2;
  --crta:rgba(255,255,255,.10);
  --crta-mocna:rgba(255,255,255,.18);
  --zelena:#AFC1FF;
  --zelena-glob:#AFC1FF;
}
.noga h3, .noga .noga-dno span, .noga .noga-dno{ color:#9D9EA2; }
.poziv-petrol h2, .poziv-petrol .naslov{ color:#F7F7F8; }

/* ── D. Oznaka „Ekskluzivno" ────────────────────────────────────────
   Trdo zapisana stara zelena pri 8 px je dala 2,26:1. */
.znamka .eks, .eks-oznaka{ color:#37459B; }
.noga .znamka .eks{ color:#AFC1FF; }

/* ── E. Drobne oznake v nogi ────────────────────────────────────────*/
.noga .noga-mreza h3{ color:#C3C4C7; }

/* ── F. Teza naslovov na svetli podlagi ──────────────────────────────
   Tanka pisava je na temnem delovala elegantno, na svetlem se je zdela
   siva. Kontrast je bil ves cas 15:1 — sla je za zaznano, ne izmerjeno
   sibkost. Dvig s 250/280 na 320 to odpravi, ne da bi naslov postal tezak. */
.display{ font-weight:320; }
.pov-okvir h2{ font-weight:340; }

/* ── G. Okrasni sledovi stare zelene ─────────────────────────────
   Sij, obroci in obroba pilule so bili trdo zapisani v rgba(74,92,186).
   Na svetli podlagi bi pustili zeleni pridih. */
.kompozicija .polje{ background:radial-gradient(circle at 50% 46%, rgba(74,92,186,.10) 0%, rgba(74,92,186,.03) 34%, transparent 66%); }
.kompozicija .obroci circle.zivi{ stroke:rgba(74,92,186,.22); }
.spec-1{ border-color:rgba(74,92,186,.30); }

/* ── H. Odprt meni na telefonu ────────────────────────────────────
   Glava je imela ob odprtem meniju trdo zapisano rgba(247,247,248,.94).
   Ni bila zeton, zato je zamenjava ni zajela in je na svetli strani
   glava postala crna, napis v znaku pa neviden. */
@media (max-width:1100px){
  .meni-odprt .glava{ background:rgba(247,247,248,.96); }
}

/* ── I. Bralnik ostane temen ─────────────────────────────────
   Ploskev je namenoma temna, zato mora biti privzeta barva besedila v njej
   svetla — sicer bi vsak nov element v bralniku podedoval temno. */
.bralnik{ color:#F7F7F8; }


/* ═══ SMER INDIGO — popravki, ki jih zamenjava zetonov ne pokrije ═══ */
.noga,.poziv-petrol,.bralnik,.surface-temna{--tekst-2:#AFC1FF;--tekst-3:#8298F1;--tekst-4:#8298F1;--zelena:#AFC1FF;--zelena-glob:#65E68C}
/* metina ploskev nosi temno besedilo — bela bi imela 1,5:1 */
.gumb.poudarek{background:var(--koral);color:#0B1034;font-weight:700}
.gumb.poudarek:hover{background:var(--koral-hover);color:#0B1034}
/* znak je zdaj enobarven in se barva prek currentColor */
svg.znak{color:var(--zelena)}
.noga svg.znak,.poziv-petrol svg.znak,.surface-temna svg.znak{color:#FFFFFF}

/* podpis sloga — ena poteza pod velikimi naslovi (znamka -> akcent) */
.hero .display::after,.pas h1::after{content:"";display:block;width:120px;height:3px;margin-top:30px;border-radius:2px;background:linear-gradient(to right,var(--zelena) 0 72px,var(--koral) 72px)}
.poziv-petrol .display::after,.surface-temna .display::after{background:linear-gradient(to right,#AFC1FF 0 72px,var(--koral) 72px)}
@media (max-width:820px){.hero .display::after,.pas h1::after{width:96px;margin-top:24px}}

/* sij ob kazalcu */
.poziv-petrol{position:relative;overflow:hidden}
.poziv-petrol::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(520px circle at var(--mx,88%) var(--my,8%),rgba(175,193,255,.20),transparent 66%);opacity:0;transition:opacity .5s var(--lah)}
@media (hover:hover){.poziv-petrol:hover::before{opacity:1}}
.poziv-petrol .ovoj{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.poziv-petrol::before{display:none}}

/* sij v obrobi kartic */
.podrocje{position:relative}
.podrocje::after{content:"";position:absolute;inset:0;border-radius:var(--r);padding:1.5px;z-index:4;pointer-events:none;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),#4A5CBA 0,rgba(74,92,186,.35) 45%,rgba(74,92,186,0) 75%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s var(--lah)}
@media (hover:hover){.podrocje:hover::after{opacity:1}}
@media (prefers-reduced-motion:reduce){.podrocje::after{display:none}}

/* meta krogci */
.vrstica .znak-plus{background:var(--koral);border-color:var(--koral)}
.vrstica .znak-plus svg{stroke:#0B1034}
.vrstica:hover .znak-plus,.vrstica:focus-visible .znak-plus{background:#006B31;border-color:#006B31;transform:translateX(3px)}
.vrstica:hover .znak-plus svg,.vrstica:focus-visible .znak-plus svg{stroke:#FFFFFF}

/* ═══ PROGRAM — ploščice področij ═════════════════════════════════════
   Razdelek je prej stal na temni indigo ploskvi s prelivom in sijem, ki je
   sledil kazalcu. Kartice so na njej izgubile obliko, izrezi naprav pa so
   lebdeli brez tal, ker so risani za svetlo podlago. Zdaj razdelek stoji na
   papirju, kartica pa je bela ploščica z lasnico in tiho senco.
   ═════════════════════════════════════════════════════════════════════ */

.page-template-page-program section:has(.podrocja){
  background:none;
  padding:clamp(36px,4.6vw,68px) 0 clamp(58px,7vw,104px);
  margin-top:0;
}
.page-template-page-program section:has(.podrocja)::before{display:none}

/* Sij ob kazalcu v obrobi odpade: na beli ploščici je bil videti kot napaka
   pri izrisu, ne kot poteza. Obliko nosita obroba in senca. */
.podrocje::after{display:none}

.podrocja{gap:clamp(18px,2vw,26px)}

.podrocje{
  background:#FFFFFF;
  border:1px solid #DDDEE0;
  border-radius:16px;
  box-shadow:0 1px 2px rgba(20,21,22,.04);
  transition:border-color 260ms var(--lah), box-shadow 260ms var(--lah),
             transform 260ms var(--lah);
}
@media (hover:hover){
  .podrocje:hover{
    border-color:#4A5CBA;
    box-shadow:0 16px 36px -20px rgba(39,50,123,.50);
    transform:translateY(-3px);
  }
}

/* Fotografija dobi zelo bledo indigo ploskev, da izrez naprave stoji na tleh
   in se ne zliva z belino kartice. */
.podrocje .foto{
  background:#EEF0FA;
  border:0;
  border-bottom:1px solid #E2E6F5;
  height:220px;
}
.podrocje .foto img{
  filter:drop-shadow(0 10px 18px rgba(20,21,22,.15));
  transition:transform 420ms var(--lah);
}
@media (hover:hover){
  .podrocje:hover .foto img{transform:scale(1.04)}
}

/* Oznaka sklopa nosi isto metino črtico kot naslovi razdelkov na naslovnici. */
.podrocje .sklop{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;letter-spacing:.16em;color:#37459B;
}
.podrocje .sklop::before{
  content:"";width:7px;height:7px;flex:none;border-radius:1px;background:#65E68C;
}
.podrocje h2,.podrocje h3{color:#141516;margin:14px 0 8px}
.podrocje p{color:#4E5054;font-size:15px;line-height:1.6}
.podrocje .telo-p{padding:24px 26px 26px}
.podrocje .go{
  color:#37459B;margin-top:24px;
  transition:color 260ms var(--lah), gap 260ms var(--lah);
}
@media (hover:hover){
  .podrocje:hover .go{color:#27327B;gap:13px}
}

/* Prva ploščica je izpostavljena: fotografija levo, besedilo desno. */
.page-template-page-program .podrocja>.podrocje:first-child{
  grid-column:1/-1;flex-direction:row;align-items:stretch;
}
.page-template-page-program .podrocja>.podrocje:first-child .foto{
  width:38%;height:auto;min-height:300px;
  border-bottom:0;border-right:1px solid #E2E6F5;
}
.page-template-page-program .podrocja>.podrocje:first-child .telo-p{
  padding:clamp(28px,3.4vw,52px);justify-content:center;
}
.page-template-page-program .podrocja>.podrocje:first-child h2{
  font-size:clamp(28px,2.6vw,38px);font-weight:300;
}
/* V široki ploščici besedilo ne sme raztegniti prostora do dna, sicer med
   opisom in povezavo zeva prazen pas. */
.page-template-page-program .podrocja>.podrocje:first-child p{
  max-width:54ch;font-size:16.5px;flex:0 1 auto;
}
@media (max-width:1080px){.page-template-page-program .podrocja>.podrocje:first-child{flex-direction:column}.page-template-page-program .podrocja>.podrocje:first-child .foto{width:100%;min-height:0;height:220px;border-right:0;border-bottom:1px solid #E2E6F5}}


/* ═══════════════════════════════════════════════════════════════════════
   Kje se uporablja — ikone in popravek vgnezdenih skatel
   22. avgust 2026
   ═══════════════════════════════════════════════════════════════════════ */

/* Pravilo `.ustanove div` zgoraj zajame tudi notranja .n in .o, zato je vsaka
   kartica dobila se dve vgnezdeni skatli z obrobo in odmikom. Videti je bilo
   kot okvir v okvirju. Notranja elementa vrnemo v ravnino. */
.ustanove > div > div{background:none;border:0;padding:0}
.ustanove > div{display:flex;flex-direction:column;align-items:flex-start}

/* Ikona vrste ustanove.
   Meta na papirju doseze 1,4 : 1 in zato ne more nositi poteze ikone.
   Ikona stoji na metini ploskvi s temno potezo, kar je tudi pravilo
   prirocnika znamke: metina ploskev vedno nosi temno vsebino.
   Razmerje #0B1034 na #65E68C je 11,65 : 1. */
.ustanove .ikona{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;flex:none;
  background:#65E68C;color:#0B1034;
  margin-bottom:clamp(14px,1.4vw,20px);
}
.ustanove .ikona svg{width:22px;height:22px;display:block}

/* Zadnja kartica v lihem seznamu je pustila prazno celico z drugacnim
   ozadjem. Naj se raztegne cez obe koloni, da mreza konca ravno. */
@media (min-width:721px){
  .ustanove > div:last-child:nth-child(odd){grid-column:1 / -1}
}


/* ═══════════════════════════════════════════════════════════════════════
   BARVNA SMER — avgust 2026
   Meta dobi dve vlogi. Ziva #65E68C ostane za drobne oznake: crtice,
   pike, poteze. Za ploskve, ki nosijo besedilo, gre v bledo #CFF6DC.
   Poziv na svetli podlagi je odslej indigo z belim besedilom, na temni
   podlagi pa bleda meta s crnilom. Ziva meta kot polna ploskev pod
   besedilom je na papirju delovala kot bonbon, ne kot medicinska znamka.

   Izmerjeno: belo na #4A5CBA 5,97 : 1 · belo na #37459B 8,34 : 1 ·
   #0B1034 na #CFF6DC 15,7 : 1.
   ═══════════════════════════════════════════════════════════════════════ */

.gumb.poudarek{background:#4A5CBA;color:#FFFFFF;font-weight:700}
.gumb.poudarek:hover{background:#37459B;color:#FFFFFF}

/* Na temnih ploskvah nosi poziv bledo meto. */
.poziv-petrol .gumb.poudarek,
.noga .gumb.poudarek,
.surface-temna .gumb.poudarek{background:#CFF6DC;color:#0B1034}
.poziv-petrol .gumb.poudarek:hover,
.noga .gumb.poudarek:hover,
.surface-temna .gumb.poudarek:hover{background:#B6EFC9;color:#0B1034}

/* Zakljucni pas je skoraj crn indigo namesto srednjega. Preliv ostane,
   da ploskev ni ravna, le izhodisce je nizje. */
.poziv-petrol{
  background:#0B1034
    radial-gradient(120% 150% at 88% 8%, #27327B 0%, transparent 62%);
}
.poziv-petrol::before{
  background:radial-gradient(520px circle at var(--mx,88%) var(--my,8%),
    rgba(175,193,255,.16), transparent 66%);
}

/* Metini krogci ob vrsticah programa: ziva meta je tu drobna oznaka in
   ostane, le besedilo v njej mora biti temno. */
.vrstica .znak-plus{background:#65E68C;border-color:#65E68C}
.vrstica .znak-plus svg{stroke:#0B1034}


/* ═══════════════════════════════════════════════════════════════════════
   Spustni meni v glavi — 22. avgust 2026
   Postavka »Program« je doslej samo preusmerila na pregledno stran.
   Zdaj pokaze podrocja in vsako je klikljivo neposredno.
   ═══════════════════════════════════════════════════════════════════════ */

.meni-skupina{position:relative;display:flex;align-items:center;gap:5px}
.meni-lok{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--tekst-2);border-radius:5px;
  transition:color var(--cas) var(--lah), background var(--cas) var(--lah);
}
.meni-lok:hover{color:var(--bela);background:rgba(74,92,186,.10)}
.meni-lok:focus-visible{outline:2px solid var(--znamka-700,#37459B);outline-offset:2px}
.meni-lok-znak{width:12px;height:12px;transition:transform var(--cas) var(--lah)}
.meni-lok[aria-expanded="true"] .meni-lok-znak{transform:rotate(180deg)}

.meni-spust{
  position:absolute;top:calc(100% + 14px);left:-14px;z-index:120;
  min-width:214px;padding:7px;
  background:#FFFFFF;border:1px solid #DDDEE0;border-radius:14px;
  box-shadow:0 2px 4px rgba(20,21,22,.05), 0 22px 48px -20px rgba(39,50,123,.42);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity 200ms var(--lah), transform 200ms var(--lah), visibility 200ms;
}
/* Nevidni most cez rezo, da meni ne izgine, ko gre kazalec proti njemu. */
.meni-spust::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}

.meni-skupina:hover .meni-spust,
.meni-skupina:focus-within .meni-spust,
.meni-skupina.odprt .meni-spust{opacity:1;visibility:visible;transform:none}

/* Samo imena podrocij, brez opisov: podmeni mora biti hiter za pregled. */
.meni-spust a{
  display:block;padding:9px 12px;border-radius:8px;
  font-size:14.5px;font-weight:500;letter-spacing:-.005em;line-height:1.35;
  color:var(--bela);text-decoration:none;white-space:nowrap;
  transition:background var(--cas) var(--lah), color var(--cas) var(--lah);
}
.meni-spust a:hover{background:#EEF0FA;color:#37459B}
.meni-spust a[aria-current="page"]{background:#EEF0FA;color:#37459B;font-weight:600}

/* Na dotik in na ozkih zaslonih se podmeni razpre v seznam pod postavko. */
@media (max-width:1100px){
  .meni-skupina{flex-wrap:wrap;width:100%;justify-content:flex-start}
  .meni-spust{
    position:static;min-width:0;width:100%;margin-top:10px;padding:6px;
    opacity:1;visibility:visible;transform:none;
    box-shadow:none;background:#F7F7F8;
    display:none;
  }
  .meni-spust::before{display:none}
  .meni-skupina.odprt .meni-spust{display:block}
  .meni-skupina:hover .meni-spust,
  .meni-skupina:focus-within .meni-spust{display:none}
  .meni-skupina.odprt:hover .meni-spust,
  .meni-skupina.odprt:focus-within .meni-spust{display:block}
  /* Na dotik mora gumb meriti vsaj 44 px. */
  .meni-lok{width:44px;height:44px}
  .meni-lok-znak{width:15px;height:15px}
}

@media (prefers-reduced-motion:reduce){
  .meni-spust,.meni-lok-znak,.meni-lok{transition:none}
}


/* ═══════════════════════════════════════════════════════════════════════
   Privzeta barva besedila na temnih ploskvah — 22. avgust 2026
   .poziv-petrol nima svoje barve besedila, zato podeduje temno #141516 z
   body, ploskev pa je #0B1034. To je 1,1 : 1. Danes se ne vidi samo zato,
   ker ima vsak element v pasu izrecno pravilo za barvo; prvi element brez
   njega bi bil neviden. Ista resitev je v temi ze uporabljena pri .bralnik,
   z istim pojasnilom.

   Vrednost je zapisana kot stevilka in ne kot zeton, ker ima --crno v tej
   datoteki se vedno ime iz temne palete in drzi najsvetlejso ploskev.
   Preimenovanje zetonov ostaja odprto.
   ═══════════════════════════════════════════════════════════════════════ */
.poziv-petrol,.surface-temna{color:#F7F7F8}


/* ═══════════════════════════════════════════════════════════════════════
   Program v glavi kot metin gumb — 26. avgust 2026
   Postavka doslej ni bila videti klikljiva, podmeni pa je bil bela plosca,
   ki je nad temnim herojem izpadla kot tujek. Zdaj je Program pilula v
   bledi meti, podmeni pa prosojna temna steklena plosca z metinim besedilom.

   Prosojno in ne popolnoma brez ploskve: meta kot besedilo na papirju
   doseze 1,40 : 1, torej bi bil podmeni ob zdrsnjeni svetli glavi neviden.
   Temna steklena plosca da meti 15,7 : 1 v obeh stanjih glave.
   ═══════════════════════════════════════════════════════════════════════ */

.glava .meni-skupina{
  height:38px;padding:0 5px 0 15px;gap:1px;
  background:#CFF6DC;border-radius:999px;
  transition:background var(--cas) var(--lah);
}
.glava .meni-skupina .meni-vrh{color:#0B1034;font-weight:600}
.glava .meni-skupina .meni-vrh::after{display:none}   /* pilula ne potrebuje podcrtaja */
.glava .meni-skupina .meni-lok{color:#0B1034;width:26px;height:26px}
.glava .meni-skupina .meni-lok:hover{background:rgba(11,16,52,.10);color:#0B1034}
.glava .meni-skupina:hover,
.glava .meni-skupina:focus-within{background:#B6EFC9}

/* Podmeni: prosojna temna plosca, metino besedilo. */
@media (min-width:1101px){
  .meni-spust{
    top:calc(100% + 12px);
    background:rgba(11,16,52,.92);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
            backdrop-filter:blur(18px) saturate(160%);
    border-color:rgba(207,246,220,.22);
    box-shadow:0 20px 50px -20px rgba(11,16,52,.65);
  }
  .meni-spust::before{top:-12px;height:12px}
  /* Natancnost mora presegati `.glava nav a` iz osnovnega sloga, sicer
     podmeni podeduje sivo barvo menija in na temni plosci pade na 2,3 : 1. */
  .glava nav .meni-spust a{color:#CFF6DC}
  .glava nav .meni-spust a:hover{background:rgba(207,246,220,.12);color:#65E68C}
  .glava nav .meni-spust a[aria-current="page"]{background:rgba(207,246,220,.16);color:#65E68C}
}

/* Na telefonu se podmeni razpre pod postavko; tam ostane svetel, ker stoji
   znotraj svetlega menija in bi temna plosca v njem delovala kot luknja. */
@media (max-width:1100px){
  .glava .meni-skupina{
    height:auto;padding:6px 6px 6px 14px;
    align-self:flex-start;width:auto;
  }
  .glava .meni-skupina .meni-lok{width:34px;height:34px}
}


/* ═══════════════════════════════════════════════════════════════════════
   Meni na telefonu — temna plosca, 26. avgust 2026
   Odprt meni je bil bela plosca, glava nad njo pa je nad temnim herojem
   nosila belo pisavo in bel znak. Rezultat je bila bela stran z nevidno
   glavo. Namesto krpanja izjem gre meni v temno: enaka ploskev kot pas
   Zaupanje in kot podmeni na namizju, zato je vmesnik povsod isti.

   Vrednosti so izpisane kot stevilke, ker so zetoni v tej datoteki se vedno
   poimenovani po temni paleti izpred prenove.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:1100px){

  .meni-odprt .glava,
  .meni-odprt .glava:not(.plava){
    background:#0B1034;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-bottom-color:rgba(207,246,220,.16);
  }
  /* Znak v glavi nosi bledo meto tudi ob odprtem meniju, da je barva ista
     kot nad herojem. Na plosci #0B1034 to da 15,7 : 1. */
  .meni-odprt .glava svg.znak{color:#CFF6DC}
  .meni-odprt .meni-gumb{border-color:rgba(255,255,255,.30)}
  .meni-odprt .meni-gumb span{background:#FFFFFF}

  /* Plosca menija zapolni zaslon pod glavo. */
  .meni-odprt .glava nav{
    background:#0B1034;
    padding:clamp(18px,4vw,30px) var(--rob) calc(var(--rob) + 18px);
    gap:0;
  }
  .meni-odprt .glava nav > a,
  .meni-odprt .glava nav .meni-vrh{
    color:#FFFFFF;
    font-size:clamp(19px,4.6vw,24px);font-weight:300;letter-spacing:-.02em;
    padding-block:16px;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .meni-odprt .glava nav > a:hover,
  .meni-odprt .glava nav > a[aria-current="page"]{color:#CFF6DC}

  /* Program: pilula odpade, postavka se obnasa kot vse ostale. */
  .meni-odprt .glava .meni-skupina{
    display:flex;flex-wrap:wrap;align-items:center;width:100%;
    background:none;padding:0;height:auto;border-radius:0;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .meni-odprt .glava .meni-skupina .meni-vrh{flex:1 1 auto;border-bottom:0}
  .meni-odprt .glava .meni-lok{
    color:#CFF6DC;width:44px;height:44px;flex:none;
    border:1px solid rgba(207,246,220,.28);border-radius:10px;
  }
  .meni-odprt .glava .meni-lok:hover{background:rgba(207,246,220,.12);color:#CFF6DC}

  /* Podrocja: zamaknjen seznam v meti, brez svoje plosce. */
  .meni-odprt .glava .meni-spust{
    width:100%;margin:0 0 10px;padding:2px 0 8px;
    background:none;border:0;box-shadow:none;border-radius:0;
  }
  /* Brez navpicne crte ob strani: zamik zadostuje, crta je bila odvec. */
  .meni-odprt .glava nav .meni-spust a{
    color:#CFF6DC;font-size:16px;font-weight:400;letter-spacing:0;
    padding:11px 0 11px 16px;border:0;border-radius:0;
  }
  .meni-odprt .glava nav .meni-spust a:hover,
  .meni-odprt .glava nav .meni-spust a[aria-current="page"]{
    background:none;color:#65E68C;
  }

  /* Tema poziva v meniju namenoma ne podvaja: ostane tisti v glavi
     (.namizni-poziv). Na temni plosci mora zato postati metin gumb,
     sicer bi ostal indigo napis na indigo podlagi. */
  .meni-odprt .glava .namizni-poziv,
  .meni-odprt .glava:not(.plava) .namizni-poziv{
    background:#CFF6DC;color:#0B1034;border-color:#CFF6DC;font-weight:700;
  }
  .meni-odprt .glava .namizni-poziv:hover{background:#B6EFC9;color:#0B1034}
}


/* ═══════════════════════════════════════════════════════════════════════
   Glava: prostor, znak, poziv — 26. avgust 2026

   Trije popravki. Prostor je bil enakomeren in zato ploscat: en sam razmik
   40 px med vsemi elementi. Zdaj so razmiki stopnjevani, znak dobi najvec
   zraka, poziv pa svoj odmik od zadnje postavke menija, da se bere kot
   locen ukaz in ne kot se ena postavka.

   Znak se poveca s 60 na 68 px, ob drsenju s 46 na 52 px. Samo od 1101 px
   navzgor: na telefonu je 43 px ze meja, pri kateri se znak in gumb
   dotakneta roba (glej opombo pri vrstici 645).

   Poziv postane polna ziva meta #65E68C s crnilom #0B1034, torej ista
   zelena kot pike v pasu Zaupanje. Razmerje 11,65 : 1.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:1101px){
  .glava .vrsta{height:100px;gap:clamp(30px,4.4vw,68px)}
  .glava .znak{height:68px}
  .glava.plava .vrsta{height:78px}
  .glava.plava .znak{height:52px}
  .glava nav{gap:clamp(18px,2vw,30px);align-items:center}
  /* Poziv se odmakne od menija in dobi vec notranjega prostora. */
  .glava .namizni-poziv{margin-left:clamp(12px,1.8vw,26px)}
  .glava .gumb{height:46px;padding:0 26px;font-size:14px;border-radius:10px}
}

/* Poziv v glavi je odslej polna ziva meta, na svetli in na temni podlagi. */
.glava .namizni-poziv,
.glava:not(.plava) .namizni-poziv,
.meni-odprt .glava .namizni-poziv,
.meni-odprt .glava:not(.plava) .namizni-poziv{
  background:#65E68C;border-color:#65E68C;color:#0B1034;font-weight:700;
}
.glava .namizni-poziv:hover,
.glava:not(.plava) .namizni-poziv:hover,
.meni-odprt .glava .namizni-poziv:hover{
  background:#4FDC7D;border-color:#4FDC7D;color:#0B1034;
}


/* -----------------------------------------------------------------
   Slike izdelkov, popravek 26. avgusta 2026

   Dvoje je bilo narobe. Senca pod izrezom je ostala iz temne zasnove:
   drop-shadow pri 62 odstotkih crne z zamikom 44 px je na svetli ploskvi
   dal temen madez, ki je bil pri majhni sliki vecji od naprave same.

   Drugo je razmerje okvirja na telefonu. Pri 5/4 je visino omejila visina
   okvirja, zato je pokoncna naprava dobila komaj petino sirine. Na ozkem
   zaslonu gre okvir v kvadrat in notranji rob z devetih na sest odstotkov,
   s cimer pokoncna slika zraste za priblizno 43 odstotkov.
   ----------------------------------------------------------------- */
.slikovni img{ filter:drop-shadow(0 14px 22px rgba(20,21,22,.16)); }
.podrocje .foto{ background-position:50% 44%; }

@media (max-width:640px){
  .slikovni{aspect-ratio:1/1;padding:6%}
}


/* ═══════════════════════════════════════════════════════════════════════
   Podstrani: vsebina iz urejevalnika in tarce na dotik
   26. avgust 2026

   Strani Dokumentacija, Splosni pogoji, Pravilnik o zasebnosti in Povratne
   informacije uporabljajo page.php in izpisejo the_content(). Naslovni pas
   in zakljucni poziv sta bila ze enaka kot drugod, telo pa ne: splosni
   ponastavitev sloga postavi margin na nic, `.pravno` pa ga ni vrnil.
   Odstavki in naslovi so zato stali drug na drugem brez ritma, telo je
   nosilo barvo naslovov, naslovi pa tezo 700, ki je drugod na strani ni.
   ═══════════════════════════════════════════════════════════════════════ */
.vsebina-strani{max-width:68ch}
.vsebina-strani > * + *{margin-top:18px}

.vsebina-strani p{font-size:17px;line-height:1.7;color:#4E5054}
.vsebina-strani strong,.vsebina-strani b{color:#141516;font-weight:600}

/* Naslov razdelka nosi isto metino ploscico kot naslovi razdelkov na
   naslovnici, da je jezik strani povsod isti. */
.vsebina-strani h2{
  position:relative;padding-left:22px;
  font-size:clamp(23px,2.1vw,29px);font-weight:300;
  letter-spacing:-.02em;line-height:1.25;color:#141516;
  margin-top:clamp(38px,4.4vw,58px);
}
.vsebina-strani h2::before{
  content:"";position:absolute;left:0;top:.5em;
  width:9px;height:9px;border-radius:1px;background:#65E68C;
}
.vsebina-strani h3{
  font-size:clamp(18px,1.4vw,20px);font-weight:600;letter-spacing:-.01em;
  line-height:1.35;color:#141516;margin-top:clamp(26px,3vw,38px);
}
.vsebina-strani h2 + p,.vsebina-strani h3 + p,
.vsebina-strani h2 + ul,.vsebina-strani h3 + ul{margin-top:12px}

.vsebina-strani ul,.vsebina-strani ol{padding-left:22px;margin-top:14px}
.vsebina-strani li{font-size:17px;line-height:1.65;color:#4E5054;margin-bottom:9px}
.vsebina-strani li::marker{color:#4A5CBA}
.vsebina-strani li:last-child{margin-bottom:0}

.vsebina-strani a{
  color:#37459B;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(55,69,155,.42);
  transition:color 260ms var(--lah), text-decoration-color 260ms var(--lah);
}
.vsebina-strani a:hover{color:#27327B;text-decoration-color:#27327B}

.vsebina-strani hr{border:0;border-top:1px solid #DDDEE0;margin-block:clamp(30px,4vw,48px)}
.vsebina-strani table{width:100%;border-collapse:collapse;margin-top:18px;font-size:15.5px}
.vsebina-strani th,.vsebina-strani td{padding:11px 14px;border-bottom:1px solid #DDDEE0;text-align:left}
.vsebina-strani th{
  background:#F7F7F8;color:#64666A;font-weight:700;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
}
.vsebina-strani blockquote{
  margin-top:22px;padding-left:clamp(16px,2vw,24px);
  border-left:3px solid #65E68C;color:#141516;font-size:19px;line-height:1.5;
}

/* Tarce na dotik. Pod 900 px mora biti vsaka povezava visoka vsaj 44 px,
   sicer je zadetek stvar srece. Prizadete so bile drobtine, povezave v
   nogi in pravne povezave v podnozju. */
@media (max-width:900px){
  .drobtine a{display:inline-flex;align-items:center;min-height:40px}
  .noga ul a,
  .noga-stik a,
  .noga-dno a{display:inline-flex;align-items:center;min-height:44px;padding-block:0}
  .noga-dno{line-height:1.4}
}


/* ═══════════════════════════════════════════════════════════════════════
   Znak v glavi je bleda meta na vseh straneh
   26. avgust 2026

   Na naslovnici je glava lebdela nad temnim herojem in znak je bil metin.
   Na podstraneh je bila glava svetla ploskev, zato je znak ostal indigo.
   Bleda meta na papirju da 1,19 : 1 in znak bi izginil, zato same barve ni
   mogoce prenesti; prenesti je treba ploskev pod njo.

   Glava na podstraneh je odslej v mirovanju temna, `#0B1034`, enako kot pas
   Zaupanje in odprt meni na telefonu. Ob drsenju dobi razred `plava` in se
   vrne v svetlo izvedbo z indigo znakom, tako kot doslej.

   Naslovnice to pravilo ne zadeva: tam glava lebdi prosojno nad herojem,
   kar ureja domov26.css.
   ═══════════════════════════════════════════════════════════════════════ */
body:not(.home) .glava:not(.plava){
  background:#0B1034;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom-color:rgba(207,246,220,.16);
}
body:not(.home) .glava:not(.plava) svg.znak{ color:#CFF6DC; }
body:not(.home) .glava:not(.plava) nav > a{ color:rgba(255,255,255,.86); }
body:not(.home) .glava:not(.plava) nav > a:hover,
body:not(.home) .glava:not(.plava) nav > a[aria-current="page"]{ color:#FFFFFF; }
body:not(.home) .glava:not(.plava) nav > a::after{ background:#65E68C; }

/* Pilula Program ostane bleda meta s crnilom, tako kot na naslovnici.
   V odprtem meniju na telefonu se ne uporablja, ker se razteza cez vso sirino
   in postane zelena plosca. */
body:not(.home):not(.meni-odprt) .glava:not(.plava) .meni-skupina{ background:#CFF6DC; }
body:not(.home):not(.meni-odprt) .glava:not(.plava) .meni-skupina .meni-vrh,
body:not(.home):not(.meni-odprt) .glava:not(.plava) .meni-lok{ color:#0B1034; }

body:not(.home) .glava:not(.plava) .meni-gumb{ border-color:rgba(255,255,255,.34); }
body:not(.home) .glava:not(.plava) .meni-gumb span{ background:#FFFFFF; }

body:not(.home) .glava:not(.plava) .gumb.poudarek{ background:#CFF6DC; color:#0B1034; }
body:not(.home) .glava:not(.plava) .gumb.obroba:not(.namizni-poziv){
  background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.36);
}

/* Postavka Program v odprtem meniju na telefonu se bere kot ostale postavke.
   Pravilo za temno glavo na podstraneh je prej pobarvalo napis v crnilo,
   zato je bil na temni plosci neberljiv. */
body.meni-odprt .glava .meni-skupina .meni-vrh{ color:#FFFFFF; }
body.meni-odprt .glava .meni-skupina .meni-vrh:hover{ color:#CFF6DC; }
body.meni-odprt .glava .meni-skupina .meni-lok{ color:#CFF6DC; }