:root {
  --zelena: #005041;
  --zelena-temna: #00382e;
  --zelena-svetla: #006352;
  --zlata: #b8934a;
  --zlata-globoka: #8c6e32;
  --zlata-svetla: #e2caa1;
  --zlata-crta: rgba(226, 202, 161, 0.38);
  --smetana: #faf7ef;
  --smetana-temna: #ece6d8;
  --crnilo: #1f1a12;
  --siva: #6c6252;
  --besedilo-svetlo: rgba(250, 247, 239, 0.82);
  --besedilo-tiho: rgba(250, 247, 239, 0.6);
  /* EB Garamond ima polno podporo za sumnike, Lato in Cormorant je nimata */
  --naslov: "EB Garamond", Georgia, serif;
  --telo: "EB Garamond", Georgia, serif;
  --oznaka: "EB Garamond", Georgia, serif;
  --skript: "Pinyon Script", "EB Garamond", Georgia, cursive;
  --znak-pisava: var(--skript);
  --radij: 12px;
  --radij-s: 8px;
  --radij-gumb: 6px;
  --sirina: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--telo);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.66;
  color: var(--smetana);
  background: var(--zelena);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
/* zaobljeni robovi: slike v vsebini, brez junaka in zastavic */
figure img, .seznam img, .galerija img, .galerija-bled img { border-radius: var(--radij); }
a { color: inherit; }
/* Pravilo barv po vzoru hotelske strani narocnika:
   na temni zeleni in cez fotografije so napisi KREMASTI, nikoli zlati;
   zlata je rezervirana za drobne oznake na kremastih razdelkih, tanke crte,
   ikone, znak, pecat in za cel zlat pas. Zlat preliv na crkah ostane samo na znaku. */
.prelivi { position: absolute; width: 0; height: 0; overflow: hidden; }
.znak { color: var(--zlata-svetla); }
/* temni razdelki: naslovi in poudarki kremasti */
.temna h1, .temna h2, .temna h3, .temna .okusi-zakljucek, .temna .manifest .citat,
.temna .citat blockquote, .temna .zgodba h3, .temna .okus h3, .temna .seznam h3,
.temna .trojica strong, .junak h1, .junak h2, .pas-slika h2, .pas-slika h3 {
  color: var(--smetana);
}
/* drobne oznake na temnem: svetla zlata samo kot namig, brez preliva */
.temna .oznaka, .temna .okus-st, .temna .dejstva strong, .temna .noga h4, .noga h4,
.temna .kontakt-velik small, .junak .oznaka {
  color: var(--zlata-svetla);
}
.temna .okus .sestavini, .temna .navdih, .temna .avtor, .junak .avtor { color: var(--besedilo-tiho); }
/* kremasti razdelki: naslovi zeleni, oznake globoko zlate */
.svetla h1, .svetla h2, .svetla h3, .svetla .zgodba h3, .svetla .manifest .citat,
.svetla .okusi-zakljucek, .svetla .okus h3, .svetla .seznam h3, .svetla .trojica strong,
.svetla .citat blockquote { color: var(--zelena); }
.svetla .okus .okus-opis { color: var(--siva); }

h1, h2, h3 { font-family: var(--naslov); font-weight: 400; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5vw, 4.25rem); text-transform: uppercase; letter-spacing: 0.06em; color: var(--smetana); }
h2 { font-size: clamp(2rem, 3.6vw, 3.05rem); text-transform: none; letter-spacing: 0.005em; line-height: 1.16; color: var(--smetana); }
h3 { font-size: 1.65rem; font-weight: 500; }
strong { font-weight: 500; }
h1 em, h2 em { font-style: italic; }
p + p { margin-top: 1em; }

.wrap { width: min(var(--sirina), calc(100% - 48px)); margin: 0 auto; }
.mreza { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.mreza > *, .galerija > *, .seznam > li > *, .trojica > li, .koraki > li, .okusi > li, .ikone > li { min-width: 0; }
.s1-5 { grid-column: 1 / 6; }
.s1-6 { grid-column: 1 / 7; }
.s1-7 { grid-column: 1 / 8; }
.s1-8 { grid-column: 1 / 9; }
.s6-13 { grid-column: 6 / 13; }
.s7-13 { grid-column: 7 / 13; }
.s8-13 { grid-column: 8 / 13; }

.oznaka {
  font-family: var(--oznaka); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--zlata); display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
}
.oznaka::before { content: ""; width: 28px; height: 1px; background: var(--zlata); }
.velik { font-family: var(--telo); font-weight: 400; font-size: 1.14rem; line-height: 1.7; }
.tih { color: var(--besedilo-tiho); }
.podpis { font-size: 0.95rem; color: var(--besedilo-tiho); margin-top: 10px; font-style: italic; }

/* tanka zlata crta s pikama, kot na junaku */
.crta { position: relative; height: 1px; width: min(520px, 100%); margin: 22px 0 20px; background: linear-gradient(90deg, var(--zlata) 0%, rgba(192, 154, 85, 0.25) 100%); }
.crta::before, .crta::after { content: ""; position: absolute; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--zlata); }
.crta::before { left: 0; }
.crta::after { right: 0; background: rgba(192, 154, 85, 0.5); }

/* gumbi: obrobljeni kot v celostni podobi */
.gumb {
  display: inline-block; background: transparent; color: var(--zlata-svetla); text-decoration: none;
  font-family: var(--telo); font-weight: 400; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 16px 28px; border: 1px solid var(--zlata); border-radius: var(--radij-gumb); cursor: pointer;
  transition: background .2s, color .2s;
}
.gumb:hover { background: var(--zlata); color: var(--zelena-temna); }
/* na temnem in cez fotografijo: kremast obrobljen gumb, kot na hotelski strani */
.temna .gumb, .junak .gumb, .pas-slika .gumb { color: var(--smetana); border-color: rgba(250, 247, 239, 0.55); }
.temna .gumb:hover, .junak .gumb:hover, .pas-slika .gumb:hover { background: var(--smetana); color: var(--zelena-temna); border-color: var(--smetana); }
.temna .povezava, .pas-slika .povezava { color: var(--smetana); border-color: rgba(250, 247, 239, 0.5); }
.gumb-obroba { color: var(--besedilo-svetlo); border-color: var(--zlata-crta); }
.gumb-obroba:hover { background: transparent; color: var(--zlata-svetla); border-color: var(--zlata); }
.povezava { display: inline-block; max-width: 100%; text-decoration: none; border-bottom: 1px solid var(--zlata); padding-bottom: 3px; color: var(--zlata-svetla); font-family: var(--telo); font-weight: 400; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; overflow-wrap: break-word; }
.povezava:hover { color: #fff; border-color: #fff; }
.povezava::after { content: " \2192"; font-style: normal; }
.gumbi { display: flex; gap: 16px 30px; align-items: center; flex-wrap: wrap; margin-top: 26px; }

/* glava: temno zelena, prosojna nad junakom, ob drsenju strnjena */
.glava {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
/* preliv sega pod glavo, da meni ostane berljiv nad svetlo fotografijo */
.glava::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 152%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 42, 34, 0.96) 0%, rgba(0, 42, 34, 0.92) 40%, rgba(0, 42, 34, 0.78) 58%, rgba(0, 42, 34, 0.3) 80%, rgba(0, 42, 34, 0) 100%);
  transition: opacity .35s ease;
}
.glava.pomik::after { opacity: 0; }
.glava::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--zlata) 50%, transparent 100%);
  opacity: 0; transition: opacity .35s ease;
}
.glava.pomik {
  background: rgba(0, 42, 34, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--zlata-crta); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.glava.pomik::before { opacity: 0.85; }
.glava .wrap { display: flex; align-items: center; justify-content: space-between; height: 96px; transition: height .35s ease; }
.glava.pomik .wrap { height: 74px; }
.znak { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--zlata-svetla); font-family: var(--znak-pisava); font-style: normal; font-weight: 400; font-size: 2.05rem; letter-spacing: 0.01em; text-transform: none; line-height: 1.25; white-space: nowrap; }
.znak svg { width: 40px; height: 40px; stroke: url(#zlato); fill: none; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: transform .35s ease; }
.znak:hover svg { transform: rotate(-8deg); }
.znak em { font-style: normal; }
.glava-desno { display: flex; align-items: center; gap: 34px; }
.meni { display: flex; gap: 32px; list-style: none; align-items: center; }
.meni a {
  position: relative; text-decoration: none; font-family: var(--telo); font-weight: 400; font-size: 0.74rem;
  letter-spacing: 0.17em; text-transform: uppercase; color: rgba(250, 247, 239, 0.88); padding: 6px 0;
  transition: color .25s ease;
}
.meni a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--zlata);
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.meni a:hover { color: var(--zlata-svetla); }
.meni a:hover::after, .meni a.aktivna::after { transform: scaleX(1); }
.meni a.aktivna { color: var(--zlata-svetla); }
.meni-gumb { display: none; background: none; border: 1px solid var(--zlata-crta); border-radius: var(--radij-gumb); color: var(--zlata-svetla); font-family: var(--telo); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 10px 14px; cursor: pointer; transition: border-color .25s ease; }
.meni-gumb:hover { border-color: var(--zlata); }
.jeziki { position: relative; }
.jeziki-gumb {
  display: flex; align-items: center; gap: 9px; background: rgba(250, 247, 239, 0.06); cursor: pointer;
  border: 1px solid var(--zlata-crta); border-radius: var(--radij-gumb); padding: 8px 12px; color: rgba(250, 247, 239, 0.88);
  font-family: var(--telo); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.14em;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.jeziki-gumb:hover { border-color: var(--zlata); color: var(--zlata-svetla); background: rgba(192, 154, 85, 0.12); }
.zastava { width: 20px; height: 13px; flex: none; display: block; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 3px; object-fit: cover; }
.puscica { width: 10px; height: 7px; flex: none; transition: transform .2s; }
.jeziki.odprt .puscica { transform: rotate(180deg); }
.jeziki-seznam {
  display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; min-width: 196px;
  list-style: none; background: rgba(0, 42, 34, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--zlata-crta); border-radius: var(--radij-s); padding: 6px 0; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
}
.jeziki.odprt .jeziki-seznam { display: block; }
.jeziki-seznam a {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px; text-decoration: none;
  color: rgba(250, 247, 239, 0.85); font-family: var(--telo); font-weight: 300; font-size: 0.92rem; letter-spacing: 0.02em;
  transition: background .2s ease, color .2s ease;
}
.jeziki-seznam a:hover { background: rgba(192, 154, 85, 0.14); color: var(--zlata-svetla); }
.jeziki-seznam a.aktivna { color: var(--zlata-svetla); }

/* razdelki */
section { padding: 96px 0; }
.temna + .temna, .svetla + .svetla { border-top: 1px solid var(--zlata-crta); }
.svetla { background: var(--smetana); color: var(--crnilo); }
.svetla h2, .svetla h3 { color: var(--zelena); }
.svetla .tih, .svetla .podpis { color: var(--siva); }
.svetla .oznaka { color: var(--zelena); }
.svetla .oznaka::before { background: var(--zelena); }
.svetla .gumb { color: var(--zlata-globoka); border-color: var(--zlata-globoka); }
.svetla .gumb:hover { background: var(--zlata-globoka); color: var(--smetana); border-color: var(--zlata-globoka); }
.svetla .povezava { color: var(--zelena); border-color: var(--zelena); }
.svetla .povezava:hover { color: var(--crnilo); border-color: var(--crnilo); }
.svetla + .svetla { border-top-color: rgba(0, 80, 65, 0.18); }
.svetla .crta { background: linear-gradient(90deg, var(--zelena) 0%, rgba(0, 80, 65, 0.2) 100%); }
.svetla .crta::before { background: var(--zelena); }
.svetla .crta::after { background: rgba(0, 80, 65, 0.45); }

/* junak: celozaslonska fotografija, besedilo levo, ikone spodaj */
.junak {
  /* visina junaka sledi razmerju slike 2:1, da se slika ne odreze */
  position: relative; padding: 0; min-height: calc(45vw - 9px); display: flex; flex-direction: column; justify-content: space-between;
  background-color: var(--zelena-temna);
  background-image: url("../images/junak-otok.jpg");
  /* cover, da slika zapolni ves junak; usidrana desno, zato se odreze samo
     prazno jezero na levi, skatli ostaneta celi */
  background-repeat: no-repeat; background-position: right center; background-size: cover;
}
.junak::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(180deg, rgba(0, 42, 34, 0) 0%, rgba(0, 42, 34, 0.5) 100%); pointer-events: none; }
/* senca samo pod besedilnim stolpcem na levi, fotografija na desni ostane cista */
.junak::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(100deg, rgba(0, 38, 31, 0.52) 0%, rgba(0, 38, 31, 0.34) 28%, rgba(0, 38, 31, 0.12) 46%, rgba(0, 38, 31, 0) 60%); }
.junak .wrap { position: relative; z-index: 1; }
.junak-vsebina { max-width: 600px; padding: 118px 0 26px; }
.junak-vsebina h1 { text-shadow: 0 2px 30px rgba(0, 26, 21, 0.85), 0 1px 5px rgba(0, 26, 21, 0.55); }
.junak-vsebina .velik { color: var(--smetana); font-size: 1.3rem; max-width: 46ch; text-shadow: 0 1px 20px rgba(0, 26, 21, 0.92), 0 1px 4px rgba(0, 26, 21, 0.65); }
.junak-vsebina .gumb { margin-top: 36px; background: rgba(0, 34, 28, 0.3); text-shadow: 0 1px 10px rgba(0, 26, 21, 0.75); }
.junak-vsebina .gumb:hover { background: var(--smetana); text-shadow: none; }
.ikone { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--zlata-crta); margin-top: 24px; }
.ikone li { display: flex; align-items: center; gap: 16px; padding: 26px 22px; border-left: 1px solid var(--zlata-crta); font-size: 0.95rem; font-weight: 300; line-height: 1.4; color: var(--smetana); }
.ikone li:first-child { border-left: 0; padding-left: 0; }
.ikone svg { width: 36px; height: 36px; flex: none; stroke: url(#zlato); fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.junak-ozek {
  position: relative;
  background-color: var(--zelena-temna);
  background-image: linear-gradient(90deg, rgba(0, 48, 39, 0.96) 0%, rgba(0, 48, 39, 0.86) 45%, rgba(0, 48, 39, 0.5) 100%), url("../images/junak-legenda.jpg");
  background-size: cover; background-position: center; padding: 176px 0 84px;
}
/* vsaka podstran ima svojo fotografijo v naslovnem pasu */
.junak-izdelki { background-image: linear-gradient(90deg, rgba(0, 48, 39, 0.96) 0%, rgba(0, 48, 39, 0.86) 45%, rgba(0, 48, 39, 0.5) 100%), url("../images/hero-izdelki.jpg"); }
.junak-partnerji { background-image: linear-gradient(90deg, rgba(0, 48, 39, 0.96) 0%, rgba(0, 48, 39, 0.86) 45%, rgba(0, 48, 39, 0.5) 100%), url("../images/hero-partnerji.jpg"); }
.junak-kontakt { background-image: linear-gradient(90deg, rgba(0, 48, 39, 0.96) 0%, rgba(0, 48, 39, 0.86) 45%, rgba(0, 48, 39, 0.5) 100%), url("../images/hero-kontakt.jpg"); }
.foto-vir { margin-top: 30px; font-size: 0.76rem; letter-spacing: 0.08em; color: var(--besedilo-tiho); text-transform: uppercase; }
.foto-znak {
  position: absolute; right: 26px; bottom: 8px; z-index: 2; margin: 0;
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(250, 247, 239, 0.55);
}
.avtor { display: block; font-style: normal; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zlata); margin-top: 5px; }
.svetla .avtor { color: var(--zelena); }
.galerija-bled { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.galerija-bled figure { margin: 0; }
.galerija-bled figure > img { border-radius: var(--radij); }
.galerija-bled a, .galerija-bled .okvir { display: block; overflow: hidden; border-radius: var(--radij); }
.galerija-bled img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s ease; }
.galerija-bled figure:hover img { transform: scale(1.045); }
.preskoci {
  position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--zlata); color: var(--zelena-temna);
  padding: 12px 20px; font-family: var(--telo); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
}
.preskoci:focus { left: 12px; top: 12px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--zlata); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.hero-podstran { padding: 168px 0 72px; }
.hero-podstran h1 { max-width: 22ch; font-size: clamp(2.3rem, 4.4vw, 4rem); text-wrap: balance; }
.hero-podstran .velik { max-width: 54ch; margin-top: 26px; color: var(--besedilo-svetlo); }

/* trije okusi */
.naslov-sredina { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.naslov-sredina .podnaslov { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 16px; color: var(--zlata-svetla); font-family: var(--naslov); font-size: 1.3rem; font-style: italic; }
.naslov-sredina .podnaslov svg { width: 22px; height: 22px; stroke: var(--zlata); fill: none; stroke-width: 1.3; }
.okusi-glava { max-width: 700px; margin-bottom: 52px; }
.okusi-glava h2 { margin-bottom: 20px; font-family: var(--skript); text-transform: none; letter-spacing: 0; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.3; }
.okusi-glava .velik { max-width: 52ch; }
.okusi { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.okus {
  display: flex; flex-direction: column; border: 1px solid var(--zlata-crta); border-radius: 10px;
  overflow: hidden; background: rgba(0, 42, 34, 0.35); transition: border-color .3s ease, transform .3s ease;
}
.okus:hover { border-color: var(--zlata); transform: translateY(-4px); }
.okus-slika { padding: 10px 10px 0; }
.okus-slika img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.okus-telo { padding: 24px 24px 28px; }
.okus-st { font-family: var(--telo); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--zlata); margin-bottom: 12px; }
.okus h3 { font-family: var(--naslov); font-weight: 500; font-size: 1.7rem; letter-spacing: 0.01em; color: var(--smetana); margin-bottom: 10px; }
.okus .okus-opis { color: var(--besedilo-svetlo); font-size: 1rem; margin-bottom: 12px; }
.okus .sestavini { color: var(--zlata); font-family: var(--telo); font-weight: 400; font-size: 0.92rem; letter-spacing: 0.01em; }
.okusi-zakljucek { text-align: center; margin: 60px auto 0; max-width: 46ch; font-family: var(--skript); font-size: 1.5rem; font-style: normal; color: var(--zlata-svetla); line-height: 1.45; }
.okusi-zakljucek svg { width: 22px; height: 22px; stroke: url(#zlato); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; margin: 14px auto 0; display: block; }
.svetla .okusi-zakljucek svg, .svetla .trojica svg { stroke: url(#zeleno); }

/* trojica (koraki, partnerji) */
.trojica { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.trojica li { border-top: 1px solid var(--zlata); padding-top: 22px; }
.trojica svg { width: 40px; height: 40px; stroke: url(#zlato); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.trojica strong { font-family: var(--oznaka); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.2em; text-transform: uppercase; display: block; margin-bottom: 10px; color: var(--zlata-svetla); }
.trojica p { color: var(--besedilo-svetlo); font-size: 1.05rem; }
.svetla .trojica li { border-top-color: var(--zelena); }
.svetla .trojica svg { stroke: var(--zelena); }
.svetla .trojica strong { color: var(--zelena); font-family: var(--naslov); font-size: 1.7rem; letter-spacing: 0; text-transform: none; }
.svetla .trojica p { color: var(--siva); }

/* kremast pas z ikonami, kot na plakatu */
/* pas stirih prednosti po vzoru plakata narocnika: kremasta plosca z dvojnim
   zlatim okvirjem na zeleni podlagi, zlate linijske ikone */
/* plosca visi cez rob razdelka, tako da je njena sredina na prelomu
   med zelenim razdelkom in fotografskim pasom, kot pojavno okno */
.pas-svetel { background: var(--zelena); color: var(--crnilo); padding: 0; position: relative; z-index: 2; }
.pas-svetel .plosca { transform: translateY(50%); }
/* karkoli pride za plavajoco plosco, dobi prostor za njeno spodnjo polovico */
.pas-svetel + .pas-slika, .pas-svetel + section, .pas-svetel + div { padding-top: 200px; }
.plosca.plosca-3 { grid-template-columns: repeat(3, 1fr); }
/* kratka razlicica: samo ikona in ena vrstica napisa */
.plosca-kratka .celica { padding: 20px 18px 22px; gap: 8px; }
.plosca-kratka strong { font-size: 0.86rem; letter-spacing: 0.12em; margin-bottom: 0; }
/* plosca v junaku visi cez spodnji rob fotografije v kremast razdelek pod njo */
.plosca-junak { transform: translateY(68%); position: relative; z-index: 3; }
.junak + .svetla, .junak + .pas-svetel { padding-top: 196px; }
.pas-svetel .wrap { display: block; }
.plosca {
  position: relative; background: var(--smetana); border: 1px solid var(--zlata);
  border-radius: var(--radij); padding: 9px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  box-shadow: 0 20px 44px rgba(0, 26, 21, 0.24);
}
.plosca::after {
  content: ""; position: absolute; inset: 6px; border: 1px solid rgba(184, 147, 74, 0.5);
  border-radius: 7px; pointer-events: none;
}
.plosca .celica { padding: 24px 22px 26px; border-left: 1px solid rgba(184, 147, 74, 0.32); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; min-width: 0; }
.plosca .celica:first-child { border-left: 0; }
.plosca .celica > div { min-width: 0; }
.plosca svg { width: 40px; height: 40px; flex: none; stroke: var(--zlata-globoka); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.plosca strong { display: block; font-family: var(--oznaka); font-weight: 600; font-size: 0.93rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--zelena-temna); margin-bottom: 6px; }
.plosca p { font-size: 0.95rem; color: var(--siva); line-height: 1.45; }

/* ENA ZLATA NA TEMNEM: napisi, crte, ikone in pecat v nogi in na zelenih
   razdelkih uporabljajo isti odtenek --zlata-svetla (Kevin, 21. 9. 2026) */
.temna .oznaka::before, .noga .oznaka::before, .junak .oznaka::before { background: var(--zlata-svetla); }
.temna .crta, .junak .crta { background: linear-gradient(90deg, var(--zlata-svetla) 0%, rgba(226, 202, 161, 0.22) 100%); }
.temna .crta::before, .junak .crta::before { background: var(--zlata-svetla); }
.temna .crta::after, .junak .crta::after { background: rgba(226, 202, 161, 0.5); }
.noga .gumb { color: var(--zlata-svetla); border-color: var(--zlata-svetla); }
.noga .gumb:hover { background: var(--zlata-svetla); color: var(--zelena-temna); }
.temna .seznam, .temna .faq, .temna .koraki li, .temna .trojica li { border-top-color: var(--zlata-svetla); }

/* prodajna mesta na strani Kontakt */
.prodajna { list-style: none; display: grid; gap: 10px; }
.prodajna li { position: relative; padding-left: 22px; font-size: 1.05rem; }
.prodajna li::before {
  content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px;
  border: 1px solid var(--zlata-globoka); border-radius: 50%;
}
.temna .prodajna li::before { border-color: var(--zlata-svetla); }
/* podpis avtorja pod manifestom */
.podpis-avtor {
  margin-top: 18px; font-family: var(--skript); font-size: 1.5rem; line-height: 1.3;
  color: var(--zlata-globoka);
}
.temna .podpis-avtor { color: var(--zlata-svetla); }

/* bloki izdelkov: enotno pokoncno razmerje slike, poravnano z besedilom */
.izdelek-slika { align-self: center; overflow: hidden; border-radius: var(--radij); }
.izdelek-slika img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s ease; }
.izdelek-slika:hover img { transform: scale(1.03); }

/* seznam izdelkov */
.seznam { list-style: none; border-top: 1px solid var(--zlata); }
.seznam li {
  display: grid; grid-template-columns: 210px 1fr auto; gap: 38px; align-items: center;
  padding: 26px 20px 26px 0; border-bottom: 1px solid var(--zlata-crta);
  transition: background .3s ease, padding .3s ease;
}
.seznam li:hover { background: rgba(192, 154, 85, 0.06); padding-left: 16px; padding-right: 16px; }
.svetla .seznam li:hover { background: rgba(0, 80, 65, 0.05); }
.seznam img { width: 210px; aspect-ratio: 4 / 3; object-fit: cover; }
.seznam h3 { color: var(--zlata-svetla); margin-bottom: 6px; }
.seznam p { color: var(--besedilo-svetlo); max-width: 56ch; font-size: 1.05rem; }
.svetla .seznam { border-top-color: var(--zelena); }
.svetla .seznam li { border-bottom-color: rgba(0, 80, 65, 0.18); }
.svetla .seznam h3 { color: var(--zelena); }
.svetla .seznam p { color: var(--siva); }

/* svetle razlicice preostalih gradnikov */
.svetla .zgodba h3 { color: var(--zelena); }
.svetla .zgodba-stevilka { color: var(--zelena); }
.svetla .manifest p { color: var(--siva); }
.svetla .manifest .citat { color: var(--zelena); }
.svetla .okusi-zakljucek { color: var(--zelena); }
.svetla .naslov-sredina .podnaslov { color: var(--zelena); }
.svetla .naslov-sredina .podnaslov svg { stroke: var(--zelena); }
.svetla .okusi-zakljucek svg { stroke: var(--zelena); }
.temna .faq { border-top-color: var(--zlata); }
.temna .faq details { border-bottom-color: var(--zlata-crta); }
.temna .faq summary { color: var(--zlata-svetla); }
.temna .faq summary::after { color: var(--besedilo-tiho); }
.temna .faq details p { color: var(--besedilo-svetlo); }
.temna .koraki li { border-top-color: var(--zlata); }
.temna .koraki li::before { color: var(--zlata-svetla); }
.temna .koraki strong { color: var(--zlata-svetla); }
.temna .koraki p { color: var(--besedilo-svetlo); }

/* dejstva */
.dejstva { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.dejstva li { padding: 22px 0; border-bottom: 1px solid var(--zlata-crta); display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
.dejstva strong { font-family: var(--oznaka); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zlata); padding-top: 5px; }
.dejstva span { color: var(--besedilo-svetlo); }
.svetla .dejstva li { border-bottom-color: rgba(0, 80, 65, 0.18); }
.svetla .dejstva strong { color: var(--zelena); }
.svetla .dejstva span { color: var(--crnilo); }

/* osrednji uvodni blok in centrirane glave razdelkov, po vzoru hotelske strani */
/* uvodni razdelek: besedilo levo, fotografija zbirke desno */
.uvod { position: relative; padding: 92px 0; overflow: hidden; }
.uvod .wrap { position: relative; }
.uvod .mreza { align-items: center; }
.glava-sredina .oznaka { justify-content: center; }
.glava-sredina .oznaka::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.uvod h2 { text-transform: none; letter-spacing: 0; font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 22px; line-height: 1.2; }
.uvod .velik { max-width: 48ch; }
.uvod-besedilo { position: relative; }
.uvod figure img { border-radius: var(--radij); }
.risba {
  position: absolute; top: -52px; left: -78px; width: 250px; height: auto;
  stroke: var(--zelena); fill: none; stroke-width: 1; opacity: .07; pointer-events: none; z-index: 0;
}
.temna .risba, .zlat .risba { stroke: var(--zlata); opacity: .12; }
.glava-sredina { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.glava-sredina h2 { margin-bottom: 18px; }
.glava-sredina .tih { max-width: 56ch; margin: 0 auto; }
.noga-cta { margin-top: 22px; display: inline-block; font-size: 0.72rem; padding: 13px 20px; }

/* zlat razdelek, tretja barva po vzoru hotelske strani */
.zlat { background: linear-gradient(135deg, #d2b276 0%, #c6a463 100%); color: var(--zelena-temna); }
.zlat h2, .zlat h3 { color: var(--zelena-temna); background-image: none; -webkit-text-fill-color: currentColor; }
.zlat .oznaka { color: var(--zelena-temna); background-image: none; -webkit-text-fill-color: currentColor; }
.zlat .oznaka::before { background: var(--zelena-temna); }
.zlat p, .zlat .podpis, .zlat .tih { color: rgba(0, 48, 39, 0.82); }
.zlat .avtor { color: var(--zelena-temna); background-image: none; -webkit-text-fill-color: currentColor; }
.zlat .crta { background: linear-gradient(90deg, var(--zelena-temna) 0%, rgba(0, 48, 39, 0.25) 100%); }
.zlat .crta::before { background: var(--zelena-temna); }
.zlat .crta::after { background: rgba(0, 48, 39, 0.5); }
.zlat .gumb { color: var(--zelena-temna); border-color: var(--zelena-temna); }
.zlat .gumb:hover { background: var(--zelena-temna); color: var(--smetana); }

/* celozaslonski fotografski pas s središčnim napisom */
.pas-slika {
  position: relative; padding: 132px 0; text-align: center; background-size: cover; background-position: center;
  background-image: linear-gradient(rgba(0, 42, 34, 0.68), rgba(0, 42, 34, 0.74)), url("../images/pas-zora.jpg");
  border-top: 1px solid var(--zlata-crta); border-bottom: 1px solid var(--zlata-crta);
}
.pas-slika h2 { font-family: var(--skript); text-transform: none; letter-spacing: 0; max-width: 20ch; margin: 0 auto; font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: 1.3; }
.pas-slika p { color: var(--besedilo-svetlo); max-width: 52ch; margin: 22px auto 0; }
.pas-slika .gumb { margin-top: 32px; }
.pas-slika .avtor { display: block; margin-top: 34px; opacity: .85; color: rgba(250, 247, 239, 0.8); text-shadow: 0 1px 10px rgba(0, 26, 21, .8); }
/* svetlejsi pas z jezerom, naslov v serifu (po vzoru hotelske strani) */
.pas-slika.pas-jezero {
  background-image: linear-gradient(rgba(0, 38, 31, 0.44), rgba(0, 38, 31, 0.5)), url("../images/pas-jezero.jpg");
  /* zamaknjeno desno, da labod pride bolj levo; navpicno usidrano na dno,
     tako da se ob nizjem pasu slika odreze zgoraj, ne spodaj */
  background-position: 78% bottom;
  padding: 92px 0;
}
.pas-slika.pas-jezero h2 { font-family: var(--naslov); font-size: clamp(2rem, 3.6vw, 3.05rem); max-width: 22ch; text-shadow: 0 1px 24px rgba(0, 26, 21, .6); }
.pas-slika.pas-jezero p { text-shadow: 0 1px 16px rgba(0, 26, 21, .7); }
@media (max-width: 760px) {
  .pas-slika, .pas-slika.pas-jezero { padding: 84px 0; }
  /* na telefonu pas reze sliko mocno vodoravno, zato labod nazaj proti sredini */
  .pas-slika.pas-jezero { background-position: 42% bottom; }
}

/* zlat pecat z napisom v krogu, po vzoru zige na skatli */
.pecat { width: 132px; height: 132px; display: block; margin-bottom: 22px; }
.pecat-obroc { fill: none; stroke: url(#zlato); stroke-width: 2; }
.pecat-obroc.tanek { stroke-width: 1; opacity: .6; }
.pecat-napis { fill: url(#zlato); font-family: var(--oznaka); font-size: 17px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; }
.pecat-zvon path { fill: none; stroke: url(#zlato); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.geslo { font-family: var(--telo); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--besedilo-tiho); margin: 6px 0 14px; }

/* tonski napis v skriptu, kot vtis na skatli */
.vodni-znak {
  position: absolute; right: -4%; bottom: -3.2rem; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--skript); font-size: clamp(3.5rem, 9vw, 9rem); line-height: 1;
  color: rgba(250, 247, 239, 0.032); white-space: nowrap;
}
.svetla .vodni-znak { color: rgba(0, 80, 65, 0.04); }
/* razlicica, ki se izteka cez zgornji rob razdelka in z leve strani */
.vodni-znak-vrh { right: auto; left: -5%; bottom: auto; top: -3.6rem; }
@media (max-width: 960px) { .vodni-znak { display: none; } }

/* velik znak v ozadju razdelka, ki se izteka cez rob */
.ima-znak { position: relative; overflow: hidden; }
.ima-znak > .wrap { position: relative; z-index: 1; }
.znak-ozadje {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  width: clamp(420px, 48vw, 760px); height: auto; top: 50%; right: -10%;
  transform: translateY(-50%) rotate(-4deg);
  fill: rgba(250, 247, 239, 0.04); stroke: none;
}
.znak-ozadje.levo { right: auto; left: -12%; transform: translateY(-50%) rotate(4deg); }
.svetla .znak-ozadje { fill: rgba(0, 80, 65, 0.035); }
.zlat .znak-ozadje { fill: rgba(0, 56, 46, 0.08); }
/* pakiranja v eni vrsti (29. 9. 2026) */
.paketi { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.paketi li { display: flex; flex-direction: column; border: 1px solid var(--zlata-crta); border-radius: var(--radij); overflow: hidden; background: rgba(0, 30, 24, 0.22); transition: border-color .3s ease; }
.paketi li:hover { border-color: var(--zlata-svetla); }
.paketi img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.paketi .paket-telo { padding: 22px 24px 26px; }
.paketi h3 { color: var(--zlata-svetla); margin-bottom: 6px; }
.paketi p { color: var(--besedilo-svetlo); font-size: 1.05rem; }
@media (max-width: 860px) { .paketi { grid-template-columns: 1fr; max-width: 460px; } }

/* razlicne velikosti vodnih zigov (29. 9. 2026) */
.znak-ozadje.mali { width: clamp(300px, 32vw, 500px); }
.znak-ozadje.velik { width: clamp(560px, 62vw, 980px); }
/* geslo, ki se kot vodni znak ponavlja ob spodnjem robu razdelka */
.vodni-trak {
  position: absolute; left: 0; bottom: -0.3em; z-index: 0; margin: 0; width: max-content;
  pointer-events: none; user-select: none; white-space: nowrap;
  font-family: var(--skript); font-size: clamp(2.2rem, 3.8vw, 3.4rem); line-height: 1.2;
  color: rgba(250, 247, 239, 0.05);
}
.svetla .vodni-trak { color: rgba(0, 80, 65, 0.07); }
@media (max-width: 960px) { .znak-ozadje { display: none; } }
.okusi-razdelek { position: relative; overflow: hidden; }
.okusi-razdelek .wrap { position: relative; z-index: 1; }

/* kartice okusov so zelene tudi na kremastem razdelku (Kevin, 21. 9. 2026) */
.svetla .okus { background: var(--zelena); border-color: var(--zelena-temna); }
.svetla .okus:hover { border-color: var(--zlata); }
.svetla .okus h3 { color: var(--smetana); }
.svetla .okus .okus-opis, .svetla .okus p { color: var(--besedilo-svetlo); }
.svetla .okus .okus-st { color: var(--zlata-svetla); }
.svetla .okus .sestavini, .svetla .okus .navdih { color: var(--besedilo-tiho); }
/* pas s citatom in zakljucnim pozivom */
.pas .mreza { align-items: center; }
.pas .gumb { margin-top: 18px; }

.pas { background: var(--zelena-svetla); border-top: 1px solid var(--zlata-crta); border-bottom: 1px solid var(--zlata-crta); padding: 100px 0; }
.pas .mreza { align-items: center; }
.pas h2 { font-family: var(--skript); font-size: clamp(2.2rem, 4.4vw, 3.8rem); font-style: normal; font-weight: 400; max-width: 20ch; text-transform: none; letter-spacing: 0; line-height: 1.25; }
.pas p { color: var(--besedilo-svetlo); max-width: 44ch; margin-top: 26px; }
.pas .gumb { margin-top: 32px; }

/* zgodba */
.zgodba p { max-width: 62ch; }
.zgodba h3 { margin: 40px 0 10px; color: var(--zlata-svetla); }
.zgodba h3:first-of-type { margin-top: 0; }
.zgodba-stevilka { font-style: italic; color: var(--zlata); margin-right: 12px; font-weight: 400; }
.manifest { text-align: center; max-width: 760px; margin: 0 auto; }
.manifest .oznaka { justify-content: center; }
.manifest .oznaka::after { content: ""; width: 28px; height: 1px; background: var(--zlata); }
.manifest p { color: var(--besedilo-svetlo); font-size: 1.15rem; margin-top: 22px; }
.manifest .citat { font-family: var(--skript); font-size: 2.1rem; font-style: normal; color: var(--zlata-svetla); margin-top: 40px; line-height: 1.35; }

/* koraki */
.koraki { list-style: none; counter-reset: k; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.koraki li { border-top: 1px solid var(--zelena); padding-top: 18px; }
.koraki li::before { counter-increment: k; content: counter(k, decimal-leading-zero); font-family: var(--naslov); font-size: 1.6rem; font-style: italic; color: var(--zelena); display: block; margin-bottom: 12px; }
.koraki strong { display: block; font-family: var(--naslov); font-size: 1.5rem; font-weight: 500; margin-bottom: 6px; color: var(--zelena); }
.koraki p { color: var(--siva); font-size: 1.05rem; }

/* FAQ */
.faq { border-top: 1px solid var(--zelena); }
.faq details { border-bottom: 1px solid rgba(0, 80, 65, 0.18); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-family: var(--naslov); font-size: 1.55rem; font-weight: 500; display: flex; justify-content: space-between; gap: 20px; color: var(--zelena); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--siva); font-family: var(--telo); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--siva); padding-bottom: 22px; max-width: 64ch; }

/* galerija */
.galerija { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.galerija figure { margin: 0; overflow: hidden; border-radius: var(--radij); }
.galerija img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s ease; }
.galerija figure:hover img { transform: scale(1.04); }
.galerija figcaption { padding: 0 2px; }

/* obrazec: kremasta kartica z zaobljenimi robovi in pravimi polji */
.obrazec {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; align-content: start;
  background: var(--smetana); color: var(--crnilo);
  border: 1px solid var(--zlata); border-radius: var(--radij);
  padding: 34px 32px 36px; box-shadow: 0 20px 46px rgba(0, 26, 21, 0.22);
}
.svetla .obrazec { box-shadow: 0 14px 34px rgba(0, 56, 46, 0.1); }
.obrazec label {
  display: grid; gap: 7px; font-family: var(--oznaka); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--zlata-globoka);
}
.obrazec .polno { grid-column: 1 / -1; }
.obrazec input, .obrazec select, .obrazec textarea {
  font-family: var(--telo); font-size: 1.02rem; color: var(--crnilo);
  background: #fffdf7; border: 1px solid rgba(0, 80, 65, 0.22); border-radius: var(--radij-s);
  padding: 12px 14px; transition: border-color .2s ease, box-shadow .2s ease;
  width: 100%; min-width: 0;
}
.obrazec ::placeholder { color: rgba(31, 26, 18, 0.42); }
.obrazec select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 2l5 4 5-4' fill='none' stroke='%238c6e32' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
.obrazec select option { color: var(--crnilo); background: var(--smetana); }
.obrazec input:focus, .obrazec select:focus, .obrazec textarea:focus {
  outline: none; border-color: var(--zlata-globoka); box-shadow: 0 0 0 3px rgba(140, 110, 50, 0.15);
}
.obrazec textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.obrazec .gumb {
  justify-self: start; margin-top: 8px; color: var(--zlata-globoka); border-color: var(--zlata-globoka);
}
.obrazec .gumb:hover { background: var(--zlata-globoka); color: var(--smetana); border-color: var(--zlata-globoka); }
.obrazec .hvala { grid-column: 1 / -1; color: var(--zelena); }

.kontakt-velik { list-style: none; }
.kontakt-velik li + li { margin-top: 22px; }
.kontakt-velik small { display: block; font-family: var(--oznaka); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zlata); margin-bottom: 4px; }
.kontakt-velik a, .kontakt-velik span { font-family: var(--naslov); font-size: clamp(1.7rem, 2.8vw, 2.4rem); text-decoration: none; color: var(--smetana); line-height: 1.15; }
.kontakt-velik a:hover { color: var(--zlata-svetla); }
.kontakt-velik a.povezava { font-family: var(--telo); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
.svetla .kontakt-velik small { color: var(--zelena); }
.svetla .kontakt-velik a, .svetla .kontakt-velik span { color: var(--crnilo); }
.svetla .kontakt-velik a:hover { color: var(--zelena); }

/* noga */
.noga { background: var(--zelena-temna); color: var(--besedilo-tiho); padding: 74px 0 32px; border-top: 1px solid var(--zlata-crta); font-size: 1rem; }
.noga p { max-width: 34ch; }
.noga ul { gap: 11px; }
.noga .znak { display: inline-flex; margin-bottom: 14px; font-size: 1.85rem; }
.noga h4 { font-family: var(--oznaka); font-size: 0.9rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zlata-svetla); font-weight: 600; margin-bottom: 14px; }
.noga ul { list-style: none; display: grid; gap: 8px; }
.noga a { text-decoration: none; }
.noga a:hover { color: var(--zlata-svetla); }
.noga .spodaj { grid-column: 1 / 13; border-top: 1px solid var(--zlata-crta); padding-top: 20px; margin-top: 30px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 0.9rem; }

/* globoka zlata #8c6e32 na kremastih razdelkih: na svetli podlagi je berljiva (4,5:1),
   na temno zeleni bi imela komaj 1,9:1, zato tam ostanejo svetlejsi odtenki iste barve */
.svetla .oznaka { color: var(--zlata-globoka); }
.svetla .oznaka::before { background: var(--zlata-globoka); }
.svetla .zgodba-stevilka { color: var(--zlata-globoka); }
.svetla .naslov-sredina .podnaslov { color: var(--zlata-globoka); }
.svetla .naslov-sredina .podnaslov svg { stroke: var(--zlata-globoka); }
.svetla .avtor { color: var(--zlata-globoka); }
.svetla .crta { background: linear-gradient(90deg, var(--zlata-globoka) 0%, rgba(140, 110, 50, 0.22) 100%); }
.svetla .crta::before { background: var(--zlata-globoka); }
.svetla .crta::after { background: rgba(140, 110, 50, 0.5); }
.svetla .seznam { border-top-color: var(--zlata-globoka); }
.svetla .trojica li { border-top-color: var(--zlata-globoka); }

@media (max-width: 960px) {
  .mreza { grid-template-columns: 1fr; gap: 32px; }
  .mreza > * { grid-column: auto !important; }
  .trojica, .koraki, .dejstva, .okusi { grid-template-columns: 1fr; }
  .dejstva li { grid-template-columns: 1fr; gap: 4px; }
  .galerija { grid-template-columns: 1fr 1fr; }
  .galerija figure { grid-column: auto !important; }
  .galerija-bled { grid-template-columns: 1fr 1fr; gap: 20px; }
  .junak-ozek { background-position: 65% center; padding: 64px 0 56px; }
  .obrazec { grid-template-columns: 1fr; padding: 26px 22px 28px; }
  .ikone { grid-template-columns: 1fr 1fr; }
  .ikone li { border-left: 0; padding-left: 0; border-top: 1px solid var(--zlata-crta); }
  .ikone li:nth-child(-n+2) { border-top: 0; }
  .pas-svetel { padding: 54px 0; }
  .pas-svetel .plosca, .plosca-junak { transform: none; }
  .junak + .svetla, .junak + .pas-svetel { padding-top: 64px; }
  .pas-svetel + .pas-slika { padding-top: 84px; }
  .plosca { grid-template-columns: 1fr 1fr; }
  .plosca .celica { padding: 22px 18px; }
  .plosca .celica:nth-child(odd) { border-left: 0; }
  .plosca .celica:nth-child(n+3) { border-top: 1px solid rgba(184, 147, 74, 0.32); }
  .junak { background-image: linear-gradient(180deg, rgba(0, 42, 34, 0.5) 0%, rgba(0, 42, 34, 0.35) 55%, rgba(0, 42, 34, 0.2) 100%), url("../images/junak-otok.jpg"); background-size: cover; background-position: 58% center; min-height: 0; }
  .junak-vsebina { padding: 64px 0 40px; }
  .meni { display: none; position: absolute; top: 100%; left: 0; right: 0; background: rgba(0, 42, 34, 0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--zlata-crta); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3); flex-direction: column; gap: 0; padding: 10px 24px 18px; align-items: stretch; }
  .glava .wrap, .glava.pomik .wrap { height: 72px; }
  .junak-vsebina, .hero-podstran { padding-top: 124px; }
  .junak-ozek { padding-top: 132px; }
  .meni.odprt { display: flex; }
  .meni a { display: block; padding: 14px 0; border-bottom: 0; }
  .meni-gumb { display: block; }
  .hero-podstran h1 { max-width: none; }
  figure[style*="sticky"] { position: static !important; }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  section { padding: 60px 0; }
  .pas { padding: 64px 0; }
  .seznam li { grid-template-columns: 96px 1fr; gap: 18px; }
  .seznam img { width: 96px; }
  .seznam li > a { grid-column: 2; }
  .galerija { grid-template-columns: 1fr; }
  .wrap { width: calc(100% - 32px); }
  .znak { font-size: 1.05rem; letter-spacing: 0; gap: 7px; }
  .znak svg { width: 22px; height: 22px; }
  /* na ozkem zaslonu zvonec v glavi odpade, sicer napis zleze pod gumb Meni */
  .glava .znak svg { display: none; }
  .glava-desno { gap: 12px; }
  .meni-gumb { padding: 9px 11px; font-size: 0.66rem; }
  .jeziki-gumb { padding: 7px 9px; gap: 7px; }
  .ikone { grid-template-columns: 1fr; }
  .ikone li { border-top: 1px solid var(--zlata-crta); padding: 16px 0; }
  .ikone li:nth-child(-n+2) { border-top: 1px solid var(--zlata-crta); }
  .ikone li:first-child { border-top: 0; }
  .plosca { grid-template-columns: 1fr; }
  .plosca .celica { border-left: 0; }
  .plosca .celica + .celica { border-top: 1px solid rgba(184, 147, 74, 0.32); }
}

/* zelo ozki telefoni (do 380 px): glava se mora spraviti v sirino */
@media (max-width: 380px) {
  .glava .wrap { width: calc(100% - 24px); }
  .jeziki-gumb > span { display: none; }
  .jeziki-gumb { padding: 8px 9px; gap: 6px; }
  .meni-gumb { padding: 9px 11px; }
  .znak { font-size: 0.96rem; }
}
/* video razdelek: posnetek je nizke locljivosti (480x272), zato ozji okvir */
.video-blok {
  max-width: 640px; margin: 0 auto; border-radius: var(--radij); overflow: hidden;
  border: 1px solid var(--zlata-crta); box-shadow: 0 20px 44px rgba(0, 26, 21, 0.18);
  background: var(--zelena-temna);
}
.svetla .video-blok { border-color: rgba(140, 110, 50, 0.35); }
.video-blok video { width: 100%; height: auto; display: block; }
/* Naslovnica po novih besedilih (29. 9. 2026): podnaslov "Cokoladni zvon" in geslo pod opisom */
.junak-vsebina .junak-pod { font-family: var(--skript); font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.2; color: var(--zlata-svetla); margin-top: 10px; text-shadow: 0 1px 20px rgba(0, 26, 21, 0.92), 0 1px 4px rgba(0, 26, 21, 0.65); }
.junak-vsebina .junak-geslo { font-family: var(--skript); font-size: 1.45rem; color: var(--smetana); margin-top: 18px; text-shadow: 0 1px 20px rgba(0, 26, 21, 0.92), 0 1px 4px rgba(0, 26, 21, 0.65); }
.manifest .citat { margin-top: 26px; }

/* ===== Popravki po sestanku 3. 10. 2026 ===== */
/* pakiranja na svetli podlagi + oznaka premium */
.svetla .paketi li { background: #fffdf7; border-color: rgba(0, 80, 65, 0.18); }
.svetla .paketi li:hover { border-color: var(--zlata-globoka); }
.svetla .paketi h3 { color: var(--zelena); }
.svetla .paketi p { color: var(--siva); }
.paket-znacka { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border: 1px solid var(--zlata-globoka); border-radius: 999px; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--zlata-globoka); background: rgba(184, 147, 74, 0.08); }
.temna .paket-znacka { border-color: var(--zlata-svetla); color: var(--zlata-svetla); }
/* dogajanje na Bledu (namesto galerije) */
.dogodek { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; max-width: 860px; margin: 0 auto; padding: 44px 48px; border: 1px solid rgba(0, 80, 65, 0.18); border-radius: var(--radij); background: #fffdf7; }
.dogodek-ikona { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--zlata-globoka); }
.dogodek-ikona svg { width: 54px; height: 54px; fill: none; stroke: var(--zlata-globoka); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.dogodek h2 { margin-bottom: 14px; }
.dogodek p { color: var(--siva); }
.dogodek .gumbi { margin-top: 22px; }
/* zemljevid in seznam prodajnih mest (3. 10. 2026: zemljevid manjsi, seznam ob njem) */
.kje-mreza { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 34px; }
.zemljevid { margin: 0; border-radius: var(--radij); overflow: hidden; box-shadow: 0 18px 40px rgba(0, 40, 32, 0.12); }
.zemljevid svg { display: block; width: 100%; height: auto; }
.prodajna-mesta { list-style: none; display: grid; gap: 0; border-top: 1px solid rgba(0, 80, 65, 0.16); }
.prodajna-mesta li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid rgba(0, 80, 65, 0.16); }
.prodajna-mesta .st { flex: none; width: 30px; height: 30px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; background: var(--zelena); color: var(--smetana); font-weight: 600; font-size: 0.95rem; border: 2px solid var(--zlata); }
.prodajna-mesta strong { display: block; color: var(--zelena); font-size: 1.15rem; font-weight: 500; line-height: 1.3; }
.prodajna-mesta span { display: block; color: var(--siva); font-size: 0.98rem; }
.mesto-maps { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; padding: 5px 13px 5px 10px; border: 1px solid rgba(140, 110, 50, 0.45); border-radius: 999px; color: var(--zlata-globoka); text-decoration: none; font-size: 0.84rem; letter-spacing: 0.04em; line-height: 1.2; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.mesto-maps svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.prodajna-mesta .mesto-maps span { display: inline; color: inherit; font-size: inherit; }
.mesto-maps:hover, .mesto-maps:focus-visible { background: var(--zelena); border-color: var(--zelena); color: var(--smetana); }
@media (max-width: 960px) {
  .kje-mreza { grid-template-columns: 1fr; gap: 28px; }
  .dogodek { grid-template-columns: 1fr; padding: 32px 26px; gap: 22px; text-align: center; }
  .dogodek-ikona { margin: 0 auto; }
}

/* Domov: slika vdove obrezana na kvadrat, da je po visini usklajena z besedilom (3. 10. 2026) */
.slika-vdova img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 62% center; }

/* ===== Video na naslovnici (6. 10. 2026) ===== */
/* brez overflow: hidden, ker plosca s stirimi prednostmi sega v naslednji razdelek; z-index 3 jo dvigne nad razdelke (glava ima 40) */
.junak-z-videom { z-index: 3; }
.junak-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none; }
/* ob prvem predvajanju sta glava in vsebina junaka skriti, nato se mehko pojavita */
.junak-uvod .junak-z-videom .junak-vsebina,
.junak-uvod .junak-z-videom .plosca-junak,
.junak-uvod .glava { opacity: 0; visibility: hidden; transition: opacity 1.8s ease, visibility 0s linear 1.8s; }
.junak-uvod.junak-razkrit .junak-z-videom .junak-vsebina,
.junak-uvod.junak-razkrit .junak-z-videom .plosca-junak { opacity: 1; visibility: visible; transition: opacity 1.8s ease, visibility 0s; }
.junak-uvod.glava-vidna .glava { opacity: 1; visibility: visible; transition: opacity 1.8s ease, visibility 0s, background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.junak-uvod .junak-z-videom::before { opacity: 0; transition: opacity 1.8s ease; }
.junak-uvod.junak-razkrit .junak-z-videom::before { opacity: 1; }

/* gumb za zvok na naslovnici (6. 10. 2026), viden od zacetka, tudi ko je vsebina junaka se skrita */
.junak-zvok {
  position: absolute; top: 116px; right: max(24px, calc((100vw - 1200px) / 2)); z-index: 3;
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 12px;
  border: 1px solid rgba(250, 247, 239, 0.55); border-radius: 999px; cursor: pointer;
  background: rgba(0, 34, 28, 0.45); color: var(--smetana); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--telo); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.junak-zvok:hover, .junak-zvok:focus-visible { background: var(--smetana); color: var(--zelena-temna); border-color: var(--smetana); }
.junak-zvok svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.junak-zvok .zvocnik { fill: currentColor; fill-opacity: .15; }
.junak-zvok .valovi { display: none; }
.junak-zvok.vklopljen .valovi { display: inline; }
.junak-zvok.vklopljen .precrta { display: none; }
@media (max-width: 600px) { .junak-zvok { top: 88px; right: 16px; padding: 8px 12px 8px 10px; font-size: 0.72rem; } }

/* po koncu videa (zadnja slika ostane) se gumb za zvok mehko skrije (6. 10. 2026, v5) */
.junak-zvok { transition: background .25s ease, border-color .25s ease, color .25s ease, opacity .8s ease, visibility 0s; }
.junak-zvok.junak-zvok-konec { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .8s ease, visibility 0s linear .8s; }

/* obrazec (8. 10. 2026): skrito polje za robote in sporocilo ob napaki */
.obrazec .past { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.obrazec-napaka { margin: 0; color: #9b2c1f; font-weight: 600; font-size: 0.95rem; }

/* telefon in tablica (9. 10. 2026): video naslovnice se konca 24 px pod vrhom plosce s karticami (--pod nastavi skripta
   videa), spodnji del plosce je na kremasti podlagi; brez skripte je --pod 0 in vse ostane kot prej */
@media (max-width: 960px) {
  .junak-z-videom { background: linear-gradient(var(--zelena-temna), var(--zelena-temna)) top / 100% calc(100% - var(--pod, 0px)) no-repeat, var(--smetana); }
  .junak-z-videom .junak-video { bottom: auto; height: calc(100% - var(--pod, 0px)); }
  .junak-z-videom::before, .junak-z-videom::after { bottom: var(--pod, 0px); }
}

/* telefon (9. 10. 2026, Neza): plosca s stirimi karticami v mrezi 2 x 2 namesto ene pod drugo */
@media (max-width: 600px) {
  .plosca { grid-template-columns: 1fr 1fr; }
  .plosca .celica { padding: 18px 10px 20px; gap: 6px; }
  .plosca .celica + .celica { border-top: 0; }
  .plosca .celica:nth-child(even) { border-left: 1px solid rgba(184, 147, 74, 0.32); }
  .plosca .celica:nth-child(n+3) { border-top: 1px solid rgba(184, 147, 74, 0.32); }
  .plosca svg { width: 30px; height: 30px; }
  .plosca strong { font-size: 0.72rem; letter-spacing: 0.08em; margin-bottom: 4px; }
  .plosca p { font-size: 0.82rem; line-height: 1.35; }
}

/* dolge besede (nemscina, italijanscina) ne smejo seci cez rob telefona (9. 10. 2026: stranka "na mojem telefonu segajo ven");
   besede se delijo po pravilih jezika strani (lang), predolga beseda se prelomi samo, ce sicer ne gre */
h1, h2, h3, p, li, label, .gumb, .oznaka, .povezava { overflow-wrap: anywhere; }
.gumb { max-width: 100%; }
@media (max-width: 600px) {
  h1, h2, h3, .gumb, .oznaka { -webkit-hyphens: auto; hyphens: auto; }
  :lang(de) p, :lang(it) p, :lang(de) li, :lang(it) li { -webkit-hyphens: auto; hyphens: auto; }
}

/* telefon (9. 10. 2026, Neza): nizja naslovnica, da se vidi vec videa. Gumb za zvok je ikona v vrstici z gumbom
   "Odkrijte zgodbo" (napis ostane za bralnike zaslona), besedilo zato zacne takoj pod glavo; manjsi naslov in razmiki */
@media (max-width: 600px) {
  .junak-z-videom .junak-vsebina { padding-top: 92px; padding-bottom: 26px; }
  .junak-z-videom h1 { font-size: 2rem; }
  .junak-z-videom .junak-pod { margin-top: 6px; }
  .junak-z-videom .crta { margin-top: 14px; margin-bottom: 14px; }
  .junak-z-videom .junak-geslo { margin-top: 10px; }
  .junak-z-videom .junak-vsebina .gumb { margin-top: 22px; }
  .junak-zvok { top: auto; bottom: calc(var(--pod, 0px) + 56px); right: 16px; padding: 10px; gap: 0; }
  .junak-zvok span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* telefon in tablica (9. 10. 2026, Neza): plosca s karticami je pod videom in se pokaze takoj ob nalaganju, ne sele po uvodu */
@media (max-width: 960px) {
  .junak-uvod .junak-z-videom .plosca-junak { opacity: 1; visibility: visible; transition: none; }
}
/* gumb "Odkrijte zgodbo" pusti prostor ikoni za zvok na desni (dolg nemski napis) */
@media (max-width: 600px) {
  .junak-z-videom .junak-vsebina .gumb { max-width: calc(100% - 64px); }
}
/* telefon in tablica (9. 10. 2026, Neza "tu je prevec prostora"): pod karticami na strani Cokoladni zvon je bilo 254 px praznega,
   ker je odmik 200 px za prekrivanje na racunalniku veljal tudi tu; zdaj je razmik spodaj enak kot zgoraj */
@media (max-width: 960px) {
  .pas-svetel { padding-bottom: 0; }
  .pas-svetel + section, .pas-svetel + div, .pas-svetel + .pas-slika { padding-top: 56px; }
}

/* 9. 10. 2026 (Neza): navedbe fotografij v glavi podstrani majhne, v spodnjem desnem kotu slike */
.hero-podstran { position: relative; }
.hero-podstran .foto-vir { position: absolute; right: 16px; bottom: 10px; margin: 0; max-width: calc(100% - 32px); text-align: right;
  font-size: 0.62rem; letter-spacing: 0.08em; opacity: 0.85; }
/* navedba izdelovalca v nogi */
.noga .izdelava a { color: var(--zlata-svetla); }

@media (max-width: 600px) {
  /* vec prostora levo in desno na vseh straneh (glava ostane, kot je) */
  .wrap { width: calc(100% - 48px); }
  /* noga v dveh stolpcih: Stran | Kontakt, nato Podjetje; znak in spodnja vrstica cez obe */
  .noga .mreza { grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 30px; }
  .noga .mreza > * { grid-column: auto !important; }
  .noga .mreza > .s1-5, .noga .mreza > div:nth-child(4), .noga .mreza > .spodaj { grid-column: 1 / -1 !important; }
  .noga .spodaj { flex-direction: column; }
  /* zunanji gumbi (s puscico): manjsi notranji odmik, da puscica ostane v vrstici z besedilom */
  .gumb[target="_blank"] { padding: 14px 16px; letter-spacing: 0.12em; }
}
@media (max-width: 380px) { .glava .wrap { width: calc(100% - 24px); } }
/* telefon (9. 10. 2026, Neza "video je se vedno previsok"): naslovnica se nizja, manjse pisave in razmiki v njej */
@media (max-width: 600px) {
  .junak-z-videom .junak-vsebina { padding-top: 86px; padding-bottom: 22px; }
  .junak-z-videom h1 { font-size: 1.75rem; }
  .junak-z-videom .junak-pod { font-size: 1.35rem; margin-top: 4px; }
  .junak-z-videom .crta { margin-top: 12px; margin-bottom: 12px; }
  .junak-z-videom .junak-vsebina .velik { font-size: 1.05rem; }
  .junak-z-videom .junak-geslo { font-size: 1.15rem; margin-top: 8px; }
  .junak-z-videom .junak-vsebina .gumb { margin-top: 18px; padding: 13px 22px; }
  .junak-zvok { bottom: calc(var(--pod, 0px) + 50px); }
}
/* telefon (12. 10. 2026, Neza "hero video na mobilni naj bo se nizji") */
@media (max-width: 600px) {
  .junak-z-videom .junak-vsebina { padding-top: 80px; padding-bottom: 18px; }
  .junak-z-videom h1 { font-size: 1.6rem; line-height: 1.08; }
  .junak-z-videom .junak-pod { font-size: 1.25rem; margin-top: 2px; }
  .junak-z-videom .crta { margin-top: 10px; margin-bottom: 10px; }
  .junak-z-videom .junak-vsebina .velik { font-size: 1rem; line-height: 1.4; }
  .junak-z-videom .junak-geslo { font-size: 1.05rem; margin-top: 6px; }
  .junak-z-videom .junak-vsebina .gumb { margin-top: 14px; padding: 11px 18px; }
  .junak-zvok { bottom: calc(var(--pod, 0px) + 42px); padding: 9px; }
}

/* Pinyon Script namesto Playball (12. 10. 2026, Neza): Pinyon je tanjsa in manjsa, zato so manjsi pisani napisi vecji za cetrtino */
.znak { font-size: 2.25rem; }
.noga .znak { font-size: 2.1rem; }
.junak-vsebina .junak-pod { font-size: clamp(2.05rem, 3.6vw, 2.9rem); }
.junak-vsebina .junak-geslo { font-size: 1.85rem; }
.okusi-zakljucek { font-size: 1.85rem; }
.manifest .citat { font-size: 2.5rem; }
@media (max-width: 600px) {
  .znak { font-size: 1.3rem; }
  .junak-z-videom .junak-pod { font-size: 1.6rem; }
  .junak-z-videom .junak-geslo { font-size: 1.35rem; }
}
.podpis-avtor { font-size: 1.85rem; }
@media (max-width: 380px) { .glava .znak { font-size: 1.12rem; } }

/* ===== Piskotki (12. 10. 2026): pasica, povezave v nogi, podstran ===== */
.piskotki { position: fixed; z-index: 60; left: 24px; bottom: 24px; max-width: 460px; padding: 22px 24px 20px;
  background: var(--smetana); color: var(--crnilo); border: 1px solid var(--zlata-crta); border-radius: var(--radij);
  box-shadow: 0 18px 50px rgba(0, 26, 21, 0.35); font-size: 0.98rem; line-height: 1.5; }
.piskotki[hidden] { display: none; }
.piskotki-naslov { font-family: var(--oznaka); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zelena); margin: 0 0 8px; }
.piskotki p { margin: 0 0 14px; }
.piskotki a { color: var(--zelena); }
/* enakovredna gumba (zavrnitev ni skrita ali manjsa) */
.piskotki-gumbi { display: flex; gap: 12px; flex-wrap: wrap; }
.piskotki-gumbi .gumb { flex: 1 1 140px; color: var(--zelena-temna); border-color: var(--zelena); background: transparent; padding: 13px 18px; }
.piskotki-gumbi .gumb:hover { background: var(--zelena); color: var(--smetana); }
@media (max-width: 600px) { .piskotki { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 18px 18px 16px; } }
.noga .piskotki-nastavitve { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.noga .piskotki-nastavitve:hover, .noga .piskotki-noga a:hover { color: var(--zlata-svetla); }
.pravno .wrap { max-width: 820px; }
.pravno h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 34px 0 10px; }
.pravno h2:first-child { margin-top: 0; }
.tabela-ovoj { overflow-x: auto; margin: 16px 0 18px; }
.tabela-piskotki { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tabela-piskotki th, .tabela-piskotki td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--zlata-crta); vertical-align: top; }
.tabela-piskotki th { font-family: var(--oznaka); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--zelena); }
.pravno .gumb { color: var(--zlata-globoka); border-color: var(--zlata-globoka); }
/* opomba o zasebnosti pod obrazcem (14. 10. 2026) */
.obrazec-zasebnost { margin: 0; font-size: 0.88rem; color: var(--siva); }
.obrazec-zasebnost a { color: var(--zelena); }
/* tabela piskotkov na telefonu: vsaka vrstica je kartica z oznakami (14. 10. 2026) */
@media (max-width: 600px) {
  .tabela-piskotki thead { display: none; }
  .tabela-piskotki, .tabela-piskotki tbody, .tabela-piskotki tr, .tabela-piskotki td { display: block; width: 100%; }
  .tabela-piskotki tr { border: 1px solid var(--zlata-crta); border-radius: var(--radij); padding: 10px 14px; margin-bottom: 12px; }
  .tabela-piskotki td { border: 0; padding: 4px 0; }
  .tabela-piskotki td::before { content: attr(data-oznaka); display: block; font-family: var(--oznaka); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--zelena); }
  .tabela-ovoj { overflow: visible; }
}
/* telefon in tablica (14. 10. 2026, Neza): ko video obstane, se pogled mehko premakne na desni del zadnje slike,
   da je vrecka Blejske sladke legende cela (na zadnji sliki je od 57 do 98 % sirine) */
@media (max-width: 960px) {
  .junak-z-videom .junak-video { object-position: 50% 50%; transition: object-position 1.6s ease; }
  .junak-z-videom.video-koncan .junak-video { object-position: 100% 50%; }
}
/* telefon (14. 10. 2026, Neza "se bolj znizaj hero video") */
@media (max-width: 600px) {
  .junak-z-videom .junak-vsebina { padding-top: 78px; padding-bottom: 16px; }
  .junak-z-videom h1 { font-size: 1.48rem; }
  .junak-z-videom .junak-pod { font-size: 1.42rem; margin-top: 0; }
  .junak-z-videom .crta { margin-top: 8px; margin-bottom: 8px; }
  .junak-z-videom .junak-vsebina .velik { font-size: 0.96rem; line-height: 1.35; }
  .junak-z-videom .junak-geslo { font-size: 1.2rem; margin-top: 4px; }
  .junak-z-videom .junak-vsebina .gumb { margin-top: 12px; padding: 10px 16px; }
  .junak-zvok { bottom: calc(var(--pod, 0px) + 36px); }
}
/* telefon (14. 10. 2026, Neza): brez vrstice "Ugrizni, zamizi in si zazeli" na naslovnici, naslov prelomljen pred zadnjo besedo */
.prelom-tel { display: none; }
@media (max-width: 600px) {
  .prelom-tel { display: inline; }
  .junak-z-videom .junak-geslo { display: none; }
}

/* ===== Telefon, razlicica B (14. 10. 2026, Neza): video 16:9 pod glavo in NAD besedilom, ne za njim.
   Vidi se cela slika (tudi vrecka ob koncu), besedilo je na temno zeleni podlagi pod videom. ===== */
@media (max-width: 600px) {
  .junak-z-videom::before, .junak-z-videom::after { display: none; }
  .junak-z-videom .junak-video { position: relative; inset: auto; display: block; width: 100%; height: auto !important; aspect-ratio: 16 / 9; margin-top: 72px; z-index: 0; object-position: 50% 50%; }
  .junak-z-videom.video-koncan .junak-video { object-position: 50% 50%; }
  .junak-z-videom .junak-vsebina { padding-top: 18px; }
  .junak-zvok { top: 80px; bottom: auto; right: 10px; }
  /* besedilo ni vec cez video, zato se glava in vsebina pokazeta takoj (brez 18-sekundnega uvoda) */
  .junak-uvod .junak-z-videom .junak-vsebina, .junak-uvod .glava { opacity: 1; visibility: visible; transition: none; }
}
/* telefon, razlicica B (14. 10. 2026, Neza): geslo "Ugrizni, zamizi in si zazeli" spet vidno, vecje pisave in razmiki,
   ker besedilo ni vec cez video in ima prostor */
@media (max-width: 600px) {
  .junak-z-videom .junak-geslo { display: block; font-size: 1.6rem; margin-top: 12px; }
  .junak-z-videom .junak-vsebina { padding-top: 30px; padding-bottom: 44px; }
  .junak-z-videom h1 { font-size: 2.05rem; line-height: 1.1; }
  .junak-z-videom .junak-pod { font-size: 1.85rem; margin-top: 6px; }
  .junak-z-videom .crta { margin-top: 18px; margin-bottom: 18px; }
  .junak-z-videom .junak-vsebina .velik { font-size: 1.12rem; line-height: 1.5; }
  .junak-z-videom .junak-vsebina .gumb { margin-top: 26px; padding: 14px 24px; }
}
@media (max-width: 380px) { .junak-z-videom h1 { font-size: 1.72rem; } }

/* video izdelave na strani Cokoladni zvon (Neza, 16. 10. 2026): pod "Oblika z zgodbo", cez celo sirino */
.video-okvir { position: relative; border-radius: 6px; overflow: hidden; background: #0b1f1a; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }
.video-okvir video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.video-izdelava .junak-zvok.izdelava-zvok { top: 16px; right: 16px; bottom: auto; }
.video-izdelava .junak-zvok.izdelava-zvok[hidden] { display: none; }
@media (max-width: 600px) { .video-izdelava .junak-zvok.izdelava-zvok { top: 10px; right: 10px; } }
/* 16. 10. 2026: video v svoji sekciji (svetla), video levo cez 7 stolpcev, besedilo desno */
.izdelava-razdelek .mreza { align-items: center; }
.izdelava-besedilo { padding-left: 24px; }
@media (max-width: 960px) { .izdelava-besedilo { padding-left: 0; } }