/* GENERISANO iz template-muster/style.css skriptom tools/build-tpl3-css.sh - ne mijenjati rucno, izmjene idu u muster pa ponovo generisati. Rucna pravila za live preview su u tpl3-live.css. */
.tpl3-scope {
  --dark-color: #c9a84c;
  --light-color: #e8ddbe;
  --secondary-color: #1e3a5f;
  --bg-color: #f5f3ef;
  --main-font: "Outfit", sans-serif;
  --title-color: #1a1a1a;
  --text-color: #2d2d2d;
  --black: #000;
  --title-size: 36px;
  --text-size: 19px;
  --navbar-height: 60px;
}
@font-face {
  font-family: "Outfit";
  src: url("/ftemplate3/tpl-assets/fonts/Outfit-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Outfit";
  src: url("/ftemplate3/tpl-assets/fonts/Outfit-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Outfit";
  src: url("/ftemplate3/tpl-assets/fonts/Outfit-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}
.tpl3-scope,
.tpl3-scope * {
  font-family: var(--main-font);
}
.tpl3-scope {
  background-color: var(--bg-color);
  
}
.tpl3-scope ::selection,
.tpl3-scope::selection {
  background-color: var(--dark-color); /* boja pozadine */
  color: #ffffff; /* boja teksta */
}
.tpl3-scope .section-padding-sm {
  padding: 25px 0;
}
.tpl3-scope .section-padding {
  padding: 50px 0;
}
.tpl3-scope .title-color {
  color: var(--secondary-color) !important;
}
.tpl3-scope .site-title {
  color: var(--title-color);
  font-size: var(--title-size);
  line-height: 1.3;
  font-weight: 600;
  margin: 0 auto;
}
.tpl3-scope .site-subtitle {
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  margin-bottom: 25px;
}
.tpl3-scope .title-mb {
  margin-bottom: 30px;
}
.tpl3-scope .light-bg {
  background-color: var(--light-color);
}
/* NAVBAR */
.tpl3-scope .navbar {
  padding: 15px 0;
  box-shadow: 0px 4px 15.6px 0px #00000040;
}
.tpl3-scope .navbar-brand {
  max-width: 200px;
  height: auto;
  max-height: 30px;
}
.tpl3-scope .navbar-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tpl3-scope .navbar-nav {
  gap: 28px;
  text-align: center;
}
.tpl3-scope .navbar-nav .nav-item .nav-link {
  color: var(--black);
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  padding: 0 20px;
}
.tpl3-scope .navbar-nav .nav-item:last-child .nav-link {
  background-color: var(--dark-color);
  color: #fff;
  padding: 12px 24px;
  border-radius: 18px;
}
/* Hamburger: no border, no focus ring, three thicker bars */
.tpl3-scope .navbar-toggler {
  position: relative;
  z-index: 1050; /* above .offcanvas (1045) so it stays clickable as the X */
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tpl3-scope .navbar-toggler:focus,
.tpl3-scope .navbar-toggler:focus-visible,
.tpl3-scope .navbar-toggler:active {
  outline: 0;
  box-shadow: none;
}
.tpl3-scope .navbar-toggler-icon {
  position: relative;
  display: block;
  width: 30px;
  height: 3px;
  background-image: none;
  background-color: var(--dark-color);
  border-radius: 2px;
  transition: background-color 0.3s ease;
}
.tpl3-scope .navbar-toggler-icon::before,
.tpl3-scope .navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--dark-color);
  border-radius: 2px;
  transition:
    top 0.3s ease,
    transform 0.3s ease;
}
.tpl3-scope .navbar-toggler-icon::before {
  top: -9px;
}
.tpl3-scope .navbar-toggler-icon::after {
  top: 9px;
}
/* Hamburger -> X (class toggled from main.js on offcanvas show/hide) */
.tpl3-scope .navbar-toggler.is-open .navbar-toggler-icon {
  background-color: transparent;
}
.tpl3-scope .navbar-toggler.is-open .navbar-toggler-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.tpl3-scope .navbar-toggler.is-open .navbar-toggler-icon::after {
  top: 0;
  transform: rotate(-45deg);
}
/* The toggler itself becomes the X, so hide Bootstrap's close button */
.tpl3-scope .offcanvas-header .btn-close {
  display: none;
}
/* HERO */
.tpl3-scope .hero-section {
  /* mobile: ~70% ekrana; >= 992 puna visina (vidi @media 992) */
  height: 70svh;
  min-height: 420px;
  max-height: 810px;
  overflow: hidden;
}
.tpl3-scope .hero-img {
  height: 100%;
}
.tpl3-scope .hero-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tpl3-scope .hero-disturber {
  right: 16px;
  bottom: 24px;
  width: 170px;
}
.tpl3-scope .hero-disturber img {
  display: block;
  width: 100%;
  height: auto;
}
.tpl3-scope .hero-disturber .dist-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  transform: rotate(13deg);
}
/* HERO-2 */
.tpl3-scope .hero-2-section {
  padding: 40px 0 60px;
  overflow: hidden; /* slika na desktopu izlazi iz containera udesno */
}
.tpl3-scope .hero-2-wrapper {
  gap: 30px;
}
.tpl3-scope .hero-2-section .site-title {
  max-width: 470px;
  margin: 0;
}
.tpl3-scope .hero-2 {
  width: 100%;
  max-width: 760px;
}
.tpl3-scope .hero-2 > img {
  display: block;
  width: 100%;
  height: auto;
}
/* disturber: blob je zarotiran, tekst ostaje vodoravan (po dizajnu) */
.tpl3-scope .hero-2 .hero-disturber {
  right: 0;
  bottom: -20px;
  width: 150px;
}
.tpl3-scope .hero-2 .hero-disturber img {
  transform: rotate(-12deg);
}
.tpl3-scope .hero-2 .hero-disturber .dist-text {
  padding: 14px 18px;
  font-size: 13px;
  transform: none;
  font-weight: 400;
}
/* HERO-3 */
.tpl3-scope .hero-3-section {
  --hero-h: clamp(
    300px,
    80cqw,
    560px
  ); /* visina vizuala (< 1200px: puna slika) */
  /* slika (791x810) ide od vrha stranice (pod navbarom) do dna heroa; --c = njena širina */
  --c: calc((var(--hero-h) + var(--navbar-height)) * 0.9765);
  position: relative;
  background-color: #fff;
  overflow: hidden;
}
.tpl3-scope .hero-3-visual {
  position: relative;
  height: var(--hero-h);
}
/* ista scena preko cijele sekcije (na malim ekranima i iza naslova), izblijedjela */
.tpl3-scope .hero-3-bg {
  position: absolute;
  inset: 0;
}
.tpl3-scope .hero-3-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 64%;
  opacity: 0.14;
}
/* < 1200px: puna slika preko cijelog vizuala */
.tpl3-scope .hero-3-img-full {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 70%;
}
/* >= 1200px: izrezani blob iz Figme, uz lijevi rub, dno na dnu heroa */
.tpl3-scope .hero-3-img {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  height: calc(var(--hero-h) + var(--navbar-height));
  width: auto;
  max-width: none;
}
/* disturber na donjem desnom rubu kruga, blob rotiran, tekst vodoravan */
.tpl3-scope .hero-3-visual .hero-disturber {
  right: 16px;
  bottom: 24px;
  width: 150px;
}
.tpl3-scope .hero-3-visual .hero-disturber img {
  transform: rotate(-12deg);
}
.tpl3-scope .hero-3-visual .hero-disturber .dist-text {
  padding: 14px 18px;
  font-size: 13px;
  transform: none;
}
.tpl3-scope .hero-3-content {
  position: relative;
  z-index: 1;
  padding-top: 30px;
  padding-bottom: 50px;
}
.tpl3-scope .hero-3-content .site-title {
  max-width: 470px;
  margin: 0;
}
/* HERO-4 */
.tpl3-scope .hero-4-section {
  padding-top: 40px;
  overflow: hidden;
}
.tpl3-scope .hero-4-section .site-title {
  margin: 0 0 30px;
}
/* slika (1440x505, luk gore, ravno dno) puna širina, dno sekcije = dno slike */
.tpl3-scope .hero-4-visual {
  position: relative;
}
.tpl3-scope .hero-4-visual > img {
  display: block;
  width: 100%;
  height: clamp(
    260px,
    60cqw,
    505px
  ); /* na malim ekranima se izreže sa strane, luk ostaje */
  object-fit: cover;
  object-position: 50% 100%;
}
/* disturber gore desno, blob rotiran, tekst vodoravan */
.tpl3-scope .hero-4-visual .hero-disturber {
  top: 10px;
  right: 16px;
  bottom: auto;
  width: 150px;
}
.tpl3-scope .hero-4-visual .hero-disturber img {
  transform: rotate(-12deg);
}
.tpl3-scope .hero-4-visual .hero-disturber .dist-text {
  padding: 14px 18px;
  font-size: 13px;
  transform: none;
}
/* TEXT & IMG */
.tpl3-scope .text-img-section {
  padding: 50px 0 25px;
}
.tpl3-scope .text-wrapper p {
  color: var(--text-color);
  font-size: var(--text-size);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 40px;
}
.tpl3-scope .text-wrapper ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  margin-bottom: 20px;
}
.tpl3-scope .text-wrapper ul li {
  position: relative;
  font-size: 18px;
  padding-left: 20px;
  color: var(--text-color);
  font-weight: 400;
  line-height: 1.5;
}
.tpl3-scope .text-wrapper ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(1.5em / 2); /* pola line-heighta = sredina prvog retka */
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: currentColor;
}
.tpl3-scope .text-wrapper ul li::marker {
  font-size: 10px;
}
/* mobile: tekst je centriran - tačkica ide u red teksta (inline ispred prve
   riječi), pa ostaje uz tekst i kad stavka ima više redova */
@container tpl3-stage (max-width: 991.98px) {
  .tpl3-scope .text-wrapper ul li {
    padding-left: 0;
  }
  .tpl3-scope .text-wrapper ul li::before {
    position: static;
    display: inline-block;
    vertical-align: middle;
    transform: none;
    margin-right: 8px;
  }
}
.tpl3-scope .text-wrapper p:last-child {
  margin-bottom: 0;
}
.tpl3-scope .angebot-text {
  max-width: 850px;
}
.tpl3-scope .btn-muster {
  display: block;
  width: fit-content;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  text-box: trim-both cap alphabetic;
  padding: 11px 22px;
  border: 2px solid var(--black);
  border-radius: 18px;
}
.tpl3-scope .btn-muster:hover {
  border: 2px solid var(--dark-color);
  background-color: var(--dark-color);
  color: #fff;
}
.tpl3-scope .text-img-wrapper {
  max-height: 480px;
}
.tpl3-scope .text-img-wrapper img {
  max-width: 100%;
  max-height: 480px;
  height: auto;
  object-fit: contain;
}
.tpl3-scope .img-btn:has(.btn-muster) .text-img-wrapper {
  margin-bottom: 25px;
}
.tpl3-scope .light-container {
  background-color: var(--light-color);
  padding: 40px;
  margin-top: 60px;
}
/* IFRAME */
.tpl3-scope .iframe-wrapper {
  height: 500px;
}
/* TOUR */
/* mobile: 3 equal columns, aligned to the top (buttons otherwise center their content) */
.tpl3-scope .tour-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.tpl3-scope .tour-thumb {
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.tpl3-scope .tour-thumb:focus-visible {
  outline: 2px solid var(--dark-color);
  outline-offset: 2px;
}
/* light frame drawn with box-shadow: grows outward, no layout shift, animatable */
.tpl3-scope .tour-thumb-img {
  --frame: 6px;
  position: relative;
  display: block;
  box-shadow: 0 0 0 0 var(--light-color);
  transition: box-shadow 0.3s ease;
}
.tpl3-scope .tour-thumb.is-active .tour-thumb-img {
  box-shadow: 0 0 0 var(--frame) var(--light-color);
}
.tpl3-scope .tour-thumb-img img {
  display: block;
  width: 100%;
  aspect-ratio: 340 / 200;
  object-fit: cover;
}
.tpl3-scope .tour-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: background-color 0.3s ease;
}
.tpl3-scope .tour-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent #fff;
  transform: translate(-40%, -50%);
}
.tpl3-scope .tour-thumb:hover .tour-play,
.tpl3-scope .tour-thumb.is-active .tour-play {
  background-color: rgba(255, 255, 255, 0.75);
}
.tpl3-scope .tour-thumb-title {
  display: block;
  padding-top: 12px; /* frame (6px) + 6px */
  color: var(--text-color);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}
.tpl3-scope .tour-frame {
  margin-top: 30px;
  padding: 10px;
  background-color: var(--light-color);
}
.tpl3-scope .tour-frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
}
/* TOUR – swiper varijanta: jedan rundgang po slajdu, strelice izvan okvira */
.tpl3-scope .tourSwiper .tour-frame {
  margin-top: 0;
}
.tpl3-scope .tour-swiper .prev-muster,
.tpl3-scope .tour-swiper .next-muster,
.tpl3-scope .gallery-swiper .prev-muster,
.tpl3-scope .gallery-swiper .next-muster {
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
}
/* SWIPER */
.tpl3-scope .swiperGallery {
  aspect-ratio: 16 /9;
  max-height: 720px;
  min-height: 400px;
}
.tpl3-scope .swiper-slide a {
  display: block;
  height: 100%; /* link za lightbox puni slajd */
}
.tpl3-scope .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* GALERIE u okviru (galerie-v2): beige okvir, swiper puni unutrašnjost */
.tpl3-scope .gallery-frame {
  padding: 10px;
  background-color: var(--light-color);
}
.tpl3-scope .gallery-frame .swiperGallery {
  aspect-ratio: 1124 / 650;
  max-height: 650px;
  min-height: 0;
}
/* GALERIE thumbnails ispod okvira (galerie-v3): 4 × 280×200, gap 20 */
.tpl3-scope .swiperGalleryThumbs {
  margin-top: 20px;
}
.tpl3-scope .swiperGalleryThumbs .swiper-slide {
  position: relative;
  aspect-ratio: 280 / 200;
  cursor: pointer;
}
/* neaktivne sličice zatamnjene, aktivna bez overlaya */
.tpl3-scope .swiperGalleryThumbs .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition: opacity 0.2s ease;
}
.tpl3-scope .swiperGalleryThumbs .swiper-slide-thumb-active::after {
  opacity: 0;
}
.tpl3-scope .next-muster,
.tpl3-scope .prev-muster {
  width: 40px; /* mobile, od 992px 55px */
  height: 40px;
  background-color: #1e3a5f;
  border-radius: 50%;
}
.tpl3-scope .next-muster {
  right: 15px;
}
.tpl3-scope .prev-muster {
  left: 15px;
}
.tpl3-scope .next-muster::after,
.tpl3-scope .prev-muster::after {
  content: "";
  display: block;
  width: 20px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.tpl3-scope .next-muster::after {
  background-image: url("/ftemplate3/tpl-assets/images/arr-r.svg");
}
.tpl3-scope .prev-muster::after {
  background-image: url("/ftemplate3/tpl-assets/images/arr-l.svg");
}
/* GALERIE grid (galerie-v4): 4 × 280×200, razmak 20, klik otvara lightbox */
.tpl3-scope .gallery-grid {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}
.tpl3-scope .gallery-item {
  display: block;
  aspect-ratio: 280 / 200;
}
.tpl3-scope .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* LIGHTBOX (lightbox2): centriran, overlay preko cijelog ekrana, muster strelice */
.lightbox {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.lightboxOverlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.lb-details {
  display: none !important;
}
.lb-loader .lb-cancel {
  background-image: none; /* loading.gif ne postoji u assets */
}
.lb-nav a.lb-prev {
  background: url("/ftemplate3/tpl-assets/images/arr-l.svg") 15px 48% no-repeat;
}
.lb-nav a.lb-next {
  background: url("/ftemplate3/tpl-assets/images/arr-r.svg") right 15px top 48% no-repeat;
}
/* LAGE – karta s pinom (lage-v2); pin se skalira s kartom (59px na 600px karti) */
.tpl3-scope .lage-map {
  position: relative;
  max-width: 600px;
}
.tpl3-scope .lage-map img {
  display: block;
}
.tpl3-scope .lage-pin {
  position: absolute;
  top: 36.8%; /* 172 / 467 */
  left: 50%; /* 300 / 600 */
  width: 9.83%; /* 59 / 600 */
}
.tpl3-scope .lage-section .site-subtitle {
  margin-bottom: 27px;
}
.tpl3-scope .lage-section .text-wrapper p {
  margin-bottom: 38px;
}
/* LAGE – tabela distanci (lage-v4): redovi 50px, crta 1px, ikone u zaglavlju */
.tpl3-scope .lage-table {
  --bs-table-bg: transparent;
  max-width: 591px;
}
/* selektori jači od globalnih .table pravila (line-height 1.7, zlatni thead) */
.tpl3-scope .lage-section .lage-table th,
.tpl3-scope .lage-section .lage-table td {
  font-size: 16px; /* mobile, od 992px 19px */
  line-height: 1.2;
  padding: 13px 2px; /* od 992px 13px 4px */
  border-bottom: 1px solid var(--black);
  vertical-align: middle;
}
.tpl3-scope .lage-section .lage-table thead tr th {
  background-color: transparent;
  font-weight: 700;
}
.tpl3-scope .lage-section .lage-table th:first-child,
.tpl3-scope .lage-section .lage-table td:first-child {
  width: 40%;
  padding-left: 0;
}
.tpl3-scope .lage-table .table-icon {
  height: 22px;
  width: auto;
}
/* LAGE – karta preko cijele širine (lage-v3), Figma 1440×795, pin na 720/239 */
.tpl3-scope .lage-map-section {
  position: relative;
  height: 420px;
  overflow: hidden;
}
.tpl3-scope .lage-map-section .lage-map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tpl3-scope .lage-map-section .lage-pin {
  top: 30.06%; /* 239 / 795 */
  left: 50%; /* 720 / 1440 */
  width: 59px;
}
@container tpl3-stage (min-width: 992px) {
  .tpl3-scope .lage-section .col-lg-5 .text-wrapper {
    max-width: 457px; /* širina tekst kolone u Figmi (lage-v2) */
  }
  /* lage-v4: tabela počinje 123px ispod vrha karte, karta 600px uz desni rub */
  .tpl3-scope .lage-table-col {
    padding-top: 123px;
  }
  .tpl3-scope .lage-section .lage-table th,
  .tpl3-scope .lage-section .lage-table td {
    font-size: var(--text-size);
    padding-left: 4px;
    padding-right: 4px;
  }
  .tpl3-scope .lage-section .row .lage-map {
    width: 100%; /* puni kolonu, max 600px; pin je u postocima pa se skalira */
  }
  .tpl3-scope .lage-map-section {
    height: 795px;
  }
}
/* HIGHLIGHTS – pozadina preko cijele širine (v2 slika + overlay 34 %, v3 zlatna), sadržaj u containeru */
.tpl3-scope .highlights-section {
  position: relative;
  isolation: isolate; /* vlastiti stacking context: slika 0, overlay 1, sadržaj 2 */
  padding: 50px 0 40px;
  color: #fff;
  overflow: hidden;
}
.tpl3-scope .highlights-section .container {
  position: relative;
  z-index: 2; /* iznad pozadine i overlaya */
}
.tpl3-scope .highlights-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
}
/* overlay #000 / 34 % – mora imati z-index jer ::before inače ostaje ispod slike koja dolazi poslije njega u DOM-u */
.tpl3-scope .highlights-section:not(.highlights-gold)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.34);
}
.tpl3-scope .highlights-gold {
  background-color: var(--dark-color);
}
.tpl3-scope .highlight-icon {
  display: block;
  width: 36px;
  height: 36px;
  margin: 0 auto 16px;
}
/* grid = Bootstrap .row.g-0, stavke = .col-md-6.col-lg-4 (1 / 2 / 3 kolone) */
.tpl3-scope .highlights-grid {
  max-width: 1033px;
  margin: 40px auto 0;
}
.tpl3-scope .highlight-item {
  padding: 20px 0;
}
.tpl3-scope .highlight-item p {
  max-width: 277px;
  font-size: 18px;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  margin: 0 auto;
}
.tpl3-scope .highlight-item p strong {
  font-weight: 700;
}
.tpl3-scope .highlights-note {
  font-size: var(--text-size);
  line-height: 1.3;
  color: #fff;
  margin-top: 40px;
}
/* mobile: jedna kolona, linija (277px) ispod svake stavke osim zadnje */
@container tpl3-stage (max-width: 767.98px) {
  .tpl3-scope .highlight-item {
    padding-bottom: 0;
  }
  .tpl3-scope .highlight-item p {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  }
  .tpl3-scope .highlight-item:last-child p {
    padding-bottom: 0;
    border-bottom: 0;
  }
}
/* tablet: dvije kolone, okomita linija između, vodoravna ispod svakog reda osim zadnjeg */
@container tpl3-stage (min-width: 768px) and (max-width: 991.98px) {
  .tpl3-scope .highlight-item {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  }
  .tpl3-scope .highlight-item:nth-child(2n) {
    border-left: 1px solid rgba(255, 255, 255, 0.45);
  }
  .tpl3-scope .highlight-item:nth-child(n + 5) {
    border-bottom: 0;
  }
}
/* IMAGE */
.tpl3-scope .image-section .image-wrapper {
  padding: 12px;
  background-color: var(--light-color);
}
.tpl3-scope .image-section .image-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 480px; /* mobile/tablet: visoka slika se izreže (object-fit: cover) */
  object-fit: cover;
}
/* KONTAKT */
.tpl3-scope .kontakt-section {
  padding: 25px 0 50px;
}
.tpl3-scope .kontakt-section form {
  background-color: var(--light-color);
  padding: 40px 35px;
}
/* tekst ispod forme (mobile) - isti razmak kao poravnanje s formom na desktopu */
.tpl3-scope .kontakt-section .col-lg-6 + .col-lg-5 .text-wrapper {
  padding-top: 40px;
}
.tpl3-scope .kontakt-form .form-title {
  color: var(--text-color);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 25px;
}
.tpl3-scope .kontakt-form .form-check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
}
.tpl3-scope .kontakt-form .form-check-inline {
  margin-right: 40px;
}
.tpl3-scope .kontakt-form .form-check-input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}
.tpl3-scope .kontakt-form .form-check-input:focus {
  border-color: #fff;
  box-shadow: none;
}
/* checked = tamni kvadrat sa bijelim okvirom, kao "Frau" u dizajnu */
.tpl3-scope .kontakt-form .form-check-input:checked {
  background-color: var(--text-color);
  background-image: none;
  border-color: #fff;
  box-shadow: inset 0 0 0 4px #fff;
}
.tpl3-scope .kontakt-form .form-check-label {
  color: var(--text-color);
  font-size: 18px;
  line-height: 1.2;
  cursor: pointer;
}
.tpl3-scope .kontakt-form .form-control {
  color: var(--text-color);
  font-size: 16px;
  line-height: 1.3;
  padding: 7px 10px;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.tpl3-scope .kontakt-form .form-control::placeholder {
  color: #757575;
}
.tpl3-scope .kontakt-form .form-control:focus {
  border: none;
  box-shadow: none;
}
.tpl3-scope .kontakt-form textarea.form-control {
  min-height: 110px;
  resize: vertical;
}
.tpl3-scope .kontakt-form .form-check-datenschutz {
  margin-bottom: 30px;
}
.tpl3-scope .kontakt-form .form-check-datenschutz .form-check-label {
  font-size: 13px;
}
.tpl3-scope .kontakt-form .form-check-datenschutz a {
  color: var(--text-color);
  font-weight: 700;
  text-decoration: none;
}
.tpl3-scope .kontakt-form .form-check-datenschutz a:hover {
  text-decoration: underline;
}
.tpl3-scope .btn-form {
  display: block;
  width: fit-content;
  min-width: 190px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #7a7a7a;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 25px;
  padding: 14px 30px;
  transition:
    color 0.3s ease,
    background-color 0.3s ease;
}
.tpl3-scope .btn-form:hover,
.tpl3-scope .btn-form:focus-visible {
  color: #fff;
  background-color: var(--text-color);
  border-color: var(--text-color);
}
.tpl3-scope .kontakt-info {
  margin-top: 45px;
}
.tpl3-scope .kontakt-info-title {
  color: var(--title-color);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
}
.tpl3-scope .kontakt-info-logo {
  display: block;
  width: 180px;
  height: auto;
  margin: 0 auto 20px;
}
.tpl3-scope .text-wrapper .kontakt-info-text {
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 12px;
}
.tpl3-scope .kontakt-info-text a {
  color: var(--text-color);
  text-decoration: none;
}
.tpl3-scope .kontakt-info-text a:hover {
  text-decoration: underline;
}
/* KONTAKT v3 – Figma „Kontakt 3“ (node 21-316): tekst 497 | gap 155 | fotka 176×217 + 62 + info 294, razmaci 20 */
/* unutrašnji .row.gx-5 (−24px) viri 12px van kolone; na telefonu je to rub
   ekrana pa nastaje horizontalni scroll - višak se samo odsiječe */
.tpl3-scope .kontakt-v3 {
  overflow-x: clip;
}
/* na telefonu uži razmak kolona (gx-3 umjesto gx-5) da red ne viri van ekrana */
@container tpl3-stage (max-width: 575.98px) {
  .tpl3-scope .kontakt-v3 .row.gx-5 {
    --bs-gutter-x: 1rem;
  }
}
.tpl3-scope .kontakt-v3 .kontakt-info {
  margin-top: 0;
}
/* od sm fotka i info stoje jedno uz drugo, logo uz lijevi rub; na xs sve centrirano */
@container tpl3-stage (min-width: 576px) {
  .tpl3-scope .kontakt-v3 .kontakt-info-logo {
    margin-left: 0;
  }
}
.tpl3-scope .kontakt-v3 .kontakt-info-text {
  margin-bottom: 20px;
}
.tpl3-scope .kontakt-person img {
  display: block;
  width: 176px;
  height: 217px;
  object-fit: cover;
  object-position: center top;
}
.tpl3-scope .kontakt-person figcaption {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--title-color);
  margin-top: 13px;
}
/* KONTAKT v5 – Figma 4. Kontakt frame (node 21-319): forma 614 bez pozadine (padding 40/35 tek od lg),
   gap 106, desna kolona 447 vertikalno centrirana, Senden zlatni tekst */
.tpl3-scope .kontakt-v5 form {
  background-color: transparent;
  padding: 0;
}
.tpl3-scope .kontakt-v5 .kontakt-info {
  margin-top: 0;
}
.tpl3-scope .kontakt-v5 .kontakt-info > * {
  margin: 0 0 40px;
}
.tpl3-scope .kontakt-v5 .kontakt-info > *:last-child {
  margin-bottom: 0;
}
/* forma po Figmi: naslov 19px → 25 → checkbox redovi (26px, razmak 22) → 13 → polja 36px (razmak 10, Bemerkung 80)
   → 24 → Datenschutz → 25 → Senden 146×34 */
.tpl3-scope .kontakt-v5 .form-title {
  font-size: 19px;
  margin-bottom: 25px;
}
.tpl3-scope .kontakt-v5 .form-check-group {
  margin-bottom: 22px;
}
.tpl3-scope .kontakt-v5 .form-check-group + .form-check-group {
  margin-bottom: 13px;
}
.tpl3-scope .kontakt-v5 .form-check-label {
  font-size: 19px;
  line-height: 26px;
}
.tpl3-scope .kontakt-v5 .form-check-input {
  width: 14px;
  height: 14px;
  margin-top: 6px;
}
.tpl3-scope .kontakt-v5 .form-check-input:checked {
  box-shadow: inset 0 0 0 3px #fff;
}
.tpl3-scope .kontakt-v5 .form-field {
  margin-bottom: 10px;
}
.tpl3-scope .kontakt-v5 .form-control {
  height: 36px;
  padding: 0 10px;
}
.tpl3-scope .kontakt-v5 textarea.form-control {
  height: 80px;
  min-height: 80px;
  padding: 7px 10px;
}
.tpl3-scope .kontakt-v5 .form-check-datenschutz {
  margin: 24px 0 25px;
}
.tpl3-scope .kontakt-v5 .form-check-datenschutz .form-check-input {
  margin-top: 1px;
}
.tpl3-scope .kontakt-v5 .btn-form {
  min-width: 146px;
  padding: 6px 37px; /* 6 + 20 + 6 + 2 border = 34 */
  line-height: 20px;
  border-radius: 18px;
  color: var(--dark-color);
}
/* desna kolona po Figmi: naslov 19px semibold → 40 → fotka → 20 → ime → 20 → kontakt → 40 → logo 200 → 20 → adresa */
.tpl3-scope .kontakt-v5 .kontakt-info-title {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 40px;
}
.tpl3-scope .kontakt-v5 .kontakt-person {
  margin-bottom: 20px;
}
.tpl3-scope .kontakt-v5 .kontakt-person figcaption {
  margin-top: 20px;
}
.tpl3-scope .kontakt-v5 .kontakt-info-logo {
  width: 200px;
  margin-bottom: 20px;
}
/* KONTAKT v2 – Figma „Kontakt 2“ (node 20-144): sekcija --dark-color, sve bijelo,
   tekst 447 | gap 106 | forma 627 (padding 40/35, pozadina #E8DDBE 23 %) */
.tpl3-scope .kontakt-gold {
  background-color: var(--dark-color);
  color: #fff;
}
.tpl3-scope .kontakt-gold .text-wrapper p,
.tpl3-scope .kontakt-gold .site-subtitle,
.tpl3-scope .kontakt-gold .kontakt-info-title,
.tpl3-scope .kontakt-gold .kontakt-info-text,
.tpl3-scope .kontakt-gold .kontakt-info-text a {
  color: #fff; /* .text-wrapper p ima --text-color, utility .text-white na wrapperu ga ne gazi */
}
.tpl3-scope .kontakt-gold .kontakt-info-logo {
  filter: brightness(0) invert(1); /* isti SVG logo, samo bijel */
}
.tpl3-scope .btn-muster-white {
  color: #fff;
  border-color: #fff;
}
.tpl3-scope .btn-muster-white:hover {
  color: var(--dark-color);
  background-color: #fff;
  border-color: #fff;
}
.tpl3-scope .kontakt-gold form {
  background-color: rgba(232, 221, 190, 0.23); /* --light-color na 23 % */
}
.tpl3-scope .kontakt-gold .kontakt-form .form-title,
.tpl3-scope .kontakt-gold .kontakt-form .form-check-label,
.tpl3-scope .kontakt-gold .kontakt-form .form-check-datenschutz a {
  color: #fff;
}
/* checked = zlatni kvadrat s bijelim okvirom (Figma „Frau“); Senden ostaje bijel sa sivim tekstom kao v1 */
.tpl3-scope .kontakt-gold .kontakt-form .form-check-input:checked {
  background-color: var(--dark-color);
}
.tpl3-scope .footer-section {
  background-color: var(--dark-color);
  padding: 25px 0;
}
.tpl3-scope .footer-menu {
  list-style: none;
  gap: 57px;
}
/* mobile: linkovi centrirani (desktop ostaje lijevo) */
@container tpl3-stage (max-width: 991.98px) {
  .tpl3-scope .footer-menu {
    justify-content: center;
  }
}
.tpl3-scope .footer-menu .nav-item .nav-link {
  color: #000;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.3;
}
/* ANGEBOT */
.tpl3-scope .angebot-section h2,
.tpl3-scope .angebot-section .text-wrapper p {
  margin-bottom: 30px;
}
.tpl3-scope .table {
  --bs-table-bg: transparent; /* redovi u boji pozadine kao u Figmi */
}
.tpl3-scope .table thead tr th {
  background-color: var(--dark-color);
  font-weight: 700;
}
.tpl3-scope .table tbody tr td,
.tpl3-scope .table thead tr th {
  font-size: 18px;
  line-height: 1.7;
}
/* ANGEBOT – mobile tabela u swiperu */
.tpl3-scope .lage-table-angebot tr {
  border: 2px solid var(--light-color);
}
.tpl3-scope .lage-table-angebot tbody tr th,
.tpl3-scope .lage-table-angebot tbody tr td {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 400;
  padding-top: 12px;
  padding-bottom: 12px;
}
/* strelice ispod tabele, lijevo i desno */
.tpl3-scope .angebotSwiper {
  padding-bottom: 80px;
}
.tpl3-scope .angebotSwiper .prev-muster,
.tpl3-scope .angebotSwiper .next-muster {
  top: auto;
  bottom: 0;
  margin-top: 0;
}
.tpl3-scope .angebotSwiper .prev-muster {
  left: 0;
}
.tpl3-scope .angebotSwiper .next-muster {
  right: 0;
}
/* ANGEBOT – isometrija + legenda */
.tpl3-scope .iso-wrapper,
.tpl3-scope .legend p {
  max-width: 465px;
  margin: 0 auto;
}
.tpl3-scope .legend p {
  font-size: var(--text-size);
  line-height: 1.3;
  color: #243a36;
  margin-top: 54px;
  margin-bottom: 0;
}
/* ANGEBOT – jedna tabela, na mobilnom strelica otvara detalje */
.tpl3-scope .table-angebot .table-arrow {
  width: 50px;
}
.tpl3-scope .table-angebot .toggle-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dark-color);
}
.tpl3-scope .table-angebot .toggle-row svg {
  transition: transform 0.2s ease;
}
.tpl3-scope .table-angebot .toggle-row.open svg {
  transform: rotate(180deg);
}
.tpl3-scope .table-angebot .hidden-row > td {
  padding: 0;
  background-color: var(--light-color);
}
.tpl3-scope .table-mobile {
  padding: 6px 15px;
}
.tpl3-scope .table-mobile-item {
  padding: 10px 0;
  font-size: 16px;
}
.tpl3-scope .table-mobile-item:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.tpl3-scope .table-mobile-item span {
  font-weight: 600;
}
/* ispod xl tabela ima 3 kolone + strelicu, pa su ćelije kompaktnije */
/* ANGEBOT – filter (selecti, slideri, checkbox) lijevo od tabele */
.tpl3-scope .angebot-filter-row {
  gap: 30px;
}
.tpl3-scope .dropdown-filters {
  gap: 20px;
  margin-bottom: 30px;
}
.tpl3-scope .filter-select-wrap {
  position: relative;
}
.tpl3-scope .filter-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--black);
  border-radius: 0;
  background-color: transparent;
  padding: 7px 50px 7px 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 32px; /* 32 + 2×7 + 2×1 = 48px kao u Figmi */
  color: var(--black);
  cursor: pointer;
}
.tpl3-scope .filter-select:focus {
  outline: none;
}
/* chevron desno, centriran u 26px ikoni iz Figme */
.tpl3-scope .filter-select-wrap::after {
  content: "";
  position: absolute;
  top: 45%;
  right: 24px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
.tpl3-scope .filter-wrapper {
  gap: 32px;
}
.tpl3-scope .filter-label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--black);
  margin-bottom: 8px;
}
.tpl3-scope .range-group {
  width: 263px;
  max-width: 100%;
}
.tpl3-scope .range-val {
  font-size: 14px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--black);
  margin-top: 8px;
}
/* dva native range inputa jedan preko drugog = min/max slider */
.tpl3-scope .range-slider {
  position: relative;
  height: 21px;
}
.tpl3-scope .range-slider::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  background-color: #d9d9d9;
}
.tpl3-scope .range-slider input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none; /* samo kružić prima klik */
}
.tpl3-scope .range-slider input[type="range"]:focus {
  outline: none;
}
.tpl3-scope .range-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 21px;
  background: transparent;
}
.tpl3-scope .range-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background-color: var(--dark-color);
  pointer-events: auto;
  cursor: pointer;
}
.tpl3-scope .range-slider input[type="range"]::-moz-range-track {
  height: 21px;
  background: transparent;
}
.tpl3-scope .range-slider input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background-color: var(--dark-color);
  pointer-events: auto;
  cursor: pointer;
}
.tpl3-scope .availability-wrap .filter-label {
  margin-bottom: 16px;
}
.tpl3-scope .availability-wrap .form-check {
  gap: 16px;
  padding-left: 0;
}
.tpl3-scope .availability-wrap .form-check-input {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border: 1px solid var(--black);
  border-radius: 0;
  background-color: transparent;
}
.tpl3-scope .availability-wrap .form-check-input:focus {
  box-shadow: none;
  border-color: var(--black);
}
.tpl3-scope .availability-wrap .form-check-input:checked {
  background-color: #fff;
  background-image: url("/ftemplate3/tpl-assets/images/checkmark.svg");
  background-size: 16px 12px;
  background-repeat: no-repeat;
  background-position: center;
}
.tpl3-scope .availability-wrap .form-check-label {
  font-size: 14px;
  line-height: 1.5;
  color: var(--black);
}
/* ANGEBOT – selecti + isometrija lijevo, slideri/checkbox + tabela desno */
.tpl3-scope .angebot-iso-row {
  gap: 30px;
}
.tpl3-scope .angebot-iso-row .dropdown-filters {
  margin-bottom: 7px;
}
.tpl3-scope .angebot-iso-row .legend p {
  margin-top: 52px;
}
.tpl3-scope .angebot-iso-row .filter-wrapper {
  flex-wrap: wrap;
  margin-bottom: 45px;
}
.tpl3-scope .angebot-iso-row .availability-wrap {
  width: 272px;
}
/* checkbox centriran na liniju slidera (label 24 + 7 + 12 = 43 = sredina slidera) */
.tpl3-scope .angebot-iso-row .availability-wrap .filter-label {
  margin-bottom: 7px;
}
@container tpl3-stage (min-width: 1400px) {
  .tpl3-scope .container.container-wide {
    max-width: 1344px; /* Figma Objektfinder 6: 1320px sadržaja */
  }
  .tpl3-scope .angebot-iso-row {
    gap: 117px;
  }
  .tpl3-scope .angebot-iso-row .iso-col {
    flex: 0 0 359px;
  }
  .tpl3-scope .angebot-iso-row .table-wrap {
    min-width: 0;
  }
  /* u Figmi red filtera (862px) viri 18px iz kolone (844px), ne lomi se */
  .tpl3-scope .angebot-iso-row .filter-wrapper {
    flex-wrap: nowrap;
  }
  .tpl3-scope .angebot-iso-row .range-group,
  .tpl3-scope .angebot-iso-row .availability-wrap {
    flex-shrink: 0;
  }
  /* vrijednosti u jednom redu, naslovi kolona smiju u dva reda kao u Figmi */
  .tpl3-scope .angebot-iso-row .table-angebot th,
  .tpl3-scope .angebot-iso-row .table-angebot td {
    padding-left: 5px;
    padding-right: 5px;
  }
  .tpl3-scope .angebot-iso-row .table-angebot td {
    white-space: nowrap;
  }
  /* dvoredni naslovi kolona zbijeniji, s više prostora gore/dolje */
  .tpl3-scope .angebot-iso-row .table-angebot thead th {
    line-height: 1.1;
    padding-top: 12px;
    padding-bottom: 12px;
    vertical-align: middle;
  }
}
@container tpl3-stage (max-width: 1199.98px) {
  .tpl3-scope .table-angebot thead tr th {
    font-size: 16px;
    padding: 12px 6px;
    vertical-align: middle;
  }
  .tpl3-scope .table-angebot tbody tr td {
    font-size: 16px;
    line-height: 1.3;
    padding: 12px 6px;
    vertical-align: middle;
  }
  .tpl3-scope .table-angebot .table-arrow {
    width: 36px;
  }
}
@container tpl3-stage (min-width: 992px) {
  .tpl3-scope > * {
    --title-size: 50px;
    --navbar-height: 65px;
  }
  .tpl3-scope .section-padding-sm {
    padding: 50px 0;
  }
  .tpl3-scope .section-padding {
    padding: 100px 0;
  }
  .tpl3-scope .site-subtitle {
    font-size: 27px;
  }
  .tpl3-scope .title-mb {
    margin-bottom: 60px;
  }
  /* NAVBAR */
  .tpl3-scope .navbar-nav {
    gap: 0;
    text-align: left;
  }
  .tpl3-scope .navbar-nav .nav-item .nav-link {
    font-size: 15px;
    padding: 0 20px;
  }
  .tpl3-scope .navbar-nav .nav-item:first-child .nav-link {
    padding-left: 0;
  }
  .tpl3-scope .navbar-nav .nav-item:last-child .nav-link {
    padding: 10px 20px;
  }
  /* HERO */
  .tpl3-scope .hero-section {
    height: calc(100vh - var(--navbar-height));
    min-height: 480px;
  }
  .tpl3-scope .hero-disturber {
    right: 47px;
    bottom: 52px;
    width: 215px;
  }
  .tpl3-scope .hero-disturber .dist-text {
    padding: 20px 32px;
    font-size: 18px;
  }
  /* HERO-2 */
  .tpl3-scope .hero-2-section {
    padding: 80px 0 95px;
  }
  .tpl3-scope .hero-2-wrapper {
    gap: 60px;
  }
  .tpl3-scope .hero-2-section .site-title {
    flex: 0 0 470px;
    margin-bottom: 40px; /* naslov sjedi malo iznad sredine slike */
  }
  .tpl3-scope .hero-2 {
    flex: 1 1 auto;
    min-width: 0;
    /* slika izlazi iz containera udesno: desni rub 20px od ruba ekrana,
       a na širokim ekranima najviše 110px izvan containera (kao u dizajnu na 1440) */
    margin-right: max(-110px, calc(20px - (100cqw - 100%) / 2));
  }
  .tpl3-scope .hero-2 .hero-disturber {
    right: 10px;
    bottom: -36px;
    width: 215px;
  }
  .tpl3-scope .hero-2 .hero-disturber .dist-text {
    padding: 20px 30px;
    font-size: 18px;
  }
  /* HERO-3 (992-1199: puna slika, naslov ispod; vidi @media 1200) */
  .tpl3-scope .hero-3-section {
    --hero-h: clamp(500px, 52cqw, 750px);
  }
  .tpl3-scope .hero-3-content {
    padding-top: 40px;
    padding-bottom: 70px;
  }
  .tpl3-scope .hero-3-visual .hero-disturber {
    right: 47px;
    bottom: 52px;
    width: 215px;
  }
  /* HERO-4 */
  .tpl3-scope .hero-4-section {
    padding-top: 63px;
  }
  .tpl3-scope .hero-4-section .site-title {
    margin-bottom: 58px;
  }
  .tpl3-scope .hero-4-visual > img {
    height: auto; /* prirodna proporcija 1440x505 */
  }
  .tpl3-scope .hero-4-visual .hero-disturber {
    top: 17px;
    right: 60px;
    width: 215px;
  }
  .tpl3-scope .hero-4-visual .hero-disturber .dist-text {
    padding: 20px 30px;
    font-size: 18px;
  }
  .tpl3-scope .hero-3-visual .hero-disturber .dist-text {
    padding: 20px 30px;
    font-size: 18px;
  }
  /* TEXT & IMG */
  .tpl3-scope .text-img-section {
    padding: 100px 0 50px;
  }
  .tpl3-scope .text-wrapper .btn-muster {
    font-size: 19px;
  }
  .tpl3-scope .img-btn:has(.btn-muster) .text-img-wrapper {
    margin-bottom: 50px;
  }
  /* IFRAME */
  .tpl3-scope .iframe-wrapper {
    height: 800px;
  }
  /* SWIPER strelice */
  .tpl3-scope .next-muster,
  .tpl3-scope .prev-muster {
    width: 55px;
    height: 55px;
  }
  .tpl3-scope .next-muster::after,
  .tpl3-scope .prev-muster::after {
    width: 28px;
    height: 23px;
  }
  /* HIGHLIGHTS: Figma 1440×626 – naslov na 100, grid 1033 na 226, fusnota na 330 u gridu */
  .tpl3-scope .highlights-section {
    padding: 100px 0 46px;
  }
  .tpl3-scope .highlights-grid {
    margin-top: 64px;
  }
  /* col-lg-4 = 3 × 344px (Figma 329/377/327), tekst 277 centriran u koloni */
  .tpl3-scope .highlight-item {
    padding: 2px 0 0;
  }
  /* okomite linije: kolone 2 i 3, kroz oba reda (2 → 279) */
  .tpl3-scope .highlight-item:not(:nth-child(3n + 1)) {
    border-left: 1px solid rgba(255, 255, 255, 0.45);
  }
  /* 1. red: 120px visok, vodoravna linija preko širine teksta (277) */
  .tpl3-scope .highlight-item:nth-child(-n + 3) {
    height: 120px;
  }
  .tpl3-scope .highlight-item:nth-child(-n + 3) p {
    height: 118px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  }
  /* 2. red: tekst 31px ispod linije, kolona do 279 */
  .tpl3-scope .highlight-item:nth-child(n + 4) {
    padding-top: 31px;
    height: 159px;
  }
  .tpl3-scope .highlights-note {
    margin-top: 51px;
  }
  /* v3 s ikonama: grid počinje 26px više (ikona 36 + 16), red 1 = 148, red 2 = 152,
     okomite linije od 30 do 300 (Figma 230 → 500) */
  .tpl3-scope .highlights-gold .highlights-grid {
    margin-top: 38px;
  }
  .tpl3-scope .highlights-gold .highlight-item {
    position: relative;
    border-left: 0;
  }
  .tpl3-scope .highlights-gold .highlight-item:not(:nth-child(3n + 1))::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.45);
  }
  .tpl3-scope .highlights-gold .highlight-item:nth-child(-n + 3) {
    height: 148px;
    padding-top: 0;
  }
  .tpl3-scope .highlights-gold .highlight-item:nth-child(-n + 3)::before {
    top: 30px;
  }
  .tpl3-scope .highlights-gold .highlight-item:nth-child(-n + 3) p {
    height: 96px; /* 148 − 36 − 16 */
  }
  .tpl3-scope .highlights-gold .highlight-item:nth-child(n + 4) {
    padding-top: 30px;
    height: 152px;
  }
  .tpl3-scope .highlights-gold .highlights-note {
    margin-top: 56px;
  }
  /* TOUR */
  .tpl3-scope .tour-thumbs {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 65px;
  }
  .tpl3-scope .tour-thumb {
    flex: 0 1 340px; /* 340px by design, shrinks on narrower containers */
  }
  .tpl3-scope .tour-thumb-img {
    --frame: 14px;
  }
  .tpl3-scope .tour-play {
    width: 48px;
    height: 48px;
  }
  .tpl3-scope .tour-play::after {
    border-width: 9px 0 9px 15px;
  }
  .tpl3-scope .tour-thumb-title {
    padding-top: 20px;
    font-size: 19px;
  }
  .tpl3-scope .tour-frame {
    margin-top: 45px;
    padding: 30px;
  }
  .tpl3-scope .tour-frame iframe {
    aspect-ratio: 16 / 9;
  }
  .tpl3-scope .tourSwiper .tour-frame,
  .tpl3-scope .gallery-frame {
    padding: 29px 28px;
  }
  /* strelice (55px) uvijek 50px izvan okvira: wrapper ostavlja 105px sa strane */
  .tpl3-scope .tour-swiper,
  .tpl3-scope .gallery-swiper {
    padding: 0 105px;
  }
  .tpl3-scope .tour-swiper .prev-muster,
  .tpl3-scope .gallery-swiper .prev-muster {
    left: 0;
  }
  .tpl3-scope .tour-swiper .next-muster,
  .tpl3-scope .gallery-swiper .next-muster {
    right: 0;
  }
  /* thumbs red poravnat s okvirom */
  .tpl3-scope .swiperGalleryThumbs {
    margin-left: 105px;
    margin-right: 105px;
  }
  .tpl3-scope .image-section .image-wrapper {
    padding: 24px;
    height: 685px; /* fiksna visina okvira, slika je ispunjava (object-fit: cover) */
  }
  .tpl3-scope .image-section .image-wrapper img {
    max-height: none;
  }
  /* KONTAKT */
  .tpl3-scope .kontakt-section {
    padding: 50px 0 100px;
  }
  .tpl3-scope .kontakt-info-logo {
    margin-left: 0;
  }
  /* tekstualna kolona poravnata s vrhom forme (padding forme = 40px) */
  .tpl3-scope .kontakt-section .col-lg-5 .text-wrapper {
    padding-top: 40px;
  }
  .tpl3-scope .kontakt-gold .col-lg-5 .text-wrapper {
    max-width: 447px; /* Figma Frame 41 = 446.59 */
  }
  /* v3 nema formu: tekst poravnat s vrhom fotke */
  .tpl3-scope .kontakt-v3 .col-lg-5 .text-wrapper {
    padding-top: 0;
  }
  /* bez bočnog paddinga: col-lg-6 (578) je uži od Figma okvira (614), pa sadržaj ostaje ~543 kao u Figmi */
  .tpl3-scope .kontakt-v5 form {
    padding: 40px 0;
  }
  .tpl3-scope .kontakt-v5 .kontakt-info-logo {
    margin-left: 0;
  }
  /* ANGEBOT */
  .tpl3-scope .angebot-section h2,
  .tpl3-scope .angebot-section .text-wrapper p {
    margin-bottom: 60px;
  }
  .tpl3-scope .angebot-filter-row {
    gap: 45px;
  }
  .tpl3-scope .filter-part {
    flex: 0 0 352px;
  }
  /* uz filter tabela ima manje mjesta: ćelije 4px bočno, ništa se ne lomi,
     pa se širine kolona ne mijenjaju kad filter sakrije/pokaže redove */
  .tpl3-scope .angebot-filter-row .table-wrap {
    min-width: 0;
  }
  .tpl3-scope .angebot-filter-row .table-angebot th,
  .tpl3-scope .angebot-filter-row .table-angebot td {
    font-size: 16px; /* 18px s placeholderima ne stane u 783px (Figma tabela viri 61px) */
    line-height: 32px; /* red ostaje 48px kao u Figmi */
    padding-left: 4px;
    padding-right: 4px;
    white-space: nowrap;
  }
}
/* HERO-2: na užim desktopima naslov je uži da slika zadrži širinu */
@container tpl3-stage (min-width: 992px) and (max-width: 1399.98px) {
  .tpl3-scope .hero-2-section .site-title {
    flex-basis: 40%;
    font-size: 42px;
  }
  .tpl3-scope .hero-2 .hero-disturber {
    width: 180px;
  }
  .tpl3-scope .hero-2 .hero-disturber .dist-text {
    padding: 16px 24px;
    font-size: 15px;
  }
}
/* HERO-3: od 1200px naslov je pored bloba, uvijek 45px desno od njegovog ruba */
@container tpl3-stage (min-width: 1200px) {
  .tpl3-scope .hero-3-img-full {
    display: none;
  }
  .tpl3-scope .hero-3-img {
    display: block;
  }
  .tpl3-scope .hero-3-visual .hero-disturber {
    right: calc(
      100% - var(--c) + 31px
    ); /* desni rub 31px unutar desnog ruba bloba */
    bottom: 10.5%;
  }
  .tpl3-scope .hero-3-section .hero-3-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--hero-h);
    display: flex;
    align-items: center;
    max-width: none;
    padding: 0 30px 0 calc(var(--c) + 80px); /* 80px razmaka od bloba */
  }
  .tpl3-scope .hero-3-content .site-title {
    max-width: 470px;
    font-size: 40px;
  }
}
@container tpl3-stage (min-width: 1400px) {
  .tpl3-scope .container {
    max-width: 1204px;
  }
  /* TOUR + GALERIE swiper: od 1400px ima mjesta pa okvir ide na punu širinu,
     strelice izlaze izvan containera (i dalje 50px od okvira) */
  .tpl3-scope .webcam-section,
  .tpl3-scope .swiper-section {
    overflow: hidden;
  }
  .tpl3-scope .tour-swiper,
  .tpl3-scope .gallery-swiper {
    padding: 0;
  }
  .tpl3-scope .swiperGalleryThumbs {
    margin-left: 0;
    margin-right: 0;
  }
  .tpl3-scope .tour-swiper .prev-muster,
  .tpl3-scope .gallery-swiper .prev-muster {
    left: -105px;
  }
  .tpl3-scope .tour-swiper .next-muster,
  .tpl3-scope .gallery-swiper .next-muster {
    right: -105px;
  }
  .tpl3-scope .hero-3-content .site-title {
    font-size: var(--title-size);
  }
}