/* ==========================================================================
   Seetalbrunnen Schafisheim
   Dizajn 1:1 prema hausdergaerten.ch — sve vrednosti izmerene na originalu
   pri širini 1440px (vidi README).
   ========================================================================== */

/* ---------- Fontovi — sa sopstvenog servera (assets/fonts), bez poziva ka Google-u ----------
   Syne 400 i Roboto 300/400 (+ 300 italic za citate); latinični podskup, woff2.
   Preuzeto sa Google Fonts (licenca SIL OFL). Roboto je varijabilni font 300–400. */
@font-face {
  font-family: "Syne"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/syne-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 300 400; font-display: swap;
  src: url("../fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto"; font-style: italic; font-weight: 300; font-display: swap;
  src: url("../fonts/roboto-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Boje — izmerene na originalu */
  --dark:       #1b1612;   /* rgb(27,22,18)    tamne sekcije, footer */
  --offwhite:   #fdfdfd;   /* rgb(253,253,253) tekst na tamnom */
  --beige:      #eae5df;   /* rgb(234,229,223) svetla sekcija */
  --tan:        #9e8b71;   /* rgb(158,139,113) CTA / citat traka */
  --accent:     #766550;   /* rgb(118,101,80)  eyebrow na svetlom */
  --accent-deep: #6b5b48;   /* eyebrow/labele na beige (kontrast 5.2:1; #766550 bi bio 4.5) */
  --tan-deep:   #816f58;   /* pozadina tan blokova sa belim tekstom (kontrast 4.75:1; #9e8b71 bi bio 3.2) */
  --grey:       #f5f5f5;   /* rgb(245,245,245) */
  --white:      #ffffff;

  /* Brend Seetalbrunnen — samo za statuse i fokus */
  --green:      #566f54;
  --green-dark: #455a43;

  /* Statusi — prigušeni tonovi, kontrast teksta ≥ 4.5:1 na svetloj pozadini */
  --ok:         #436b40;   /* Verfügbar / Bezugsbereit */
  --taken:      #a3473b;   /* Vermietet */
  --reserved:   #8a5c17;   /* Reserviert */

  --ff-head: "Syne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-body: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Mere originala */
  --wrap: 1188px;          /* sadržaj 1188px pri 1440px */
  --gut: 24px;
  --header-h: 181px;       /* visina zaglavlja originala */

  /* Sistem linija — potpisni element originala: 0.8px #FDFDFD */
  --rule: rgba(253,253,253,.92);
  --rule-dark: rgba(27,22,18,.38);
  --rule-gap: clamp(18px, 2.9vw, 42px);   /* linija je 42px levo od teksta @1440 */

  /* Skaliranje celog dizajna iznad 1440px (kao Wix original: platno 1440 rasteže se sa ekranom).
     --zoom postavlja mali skript u <head> (build.ps1) = širina / 1440; ispod 1441px je 1. */
  --zoom: 1;
}
@media (min-width: 1441px) { body { zoom: var(--zoom); } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: clamp(1rem, 1.32vw, 1.1875rem);   /* 19px @1440 */
  line-height: 1.4;                             /* 26.6/19 */
  color: var(--dark);
  background: var(--white);
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }   /* width/height atributi samo rezervišu prostor (bez skakanja), ne fiksiraju visinu */
a { color: inherit; }
button { font: inherit; color: inherit; }

/* ---------- Tipografija ---------- */
h1, h2, h3, h4 { font-family: var(--ff-head); font-weight: 400; margin: 0; }
h1, h2 { text-transform: uppercase; }   /* kao original: naslovi sekcija velikim slovima (h3 i tekst normalno) */

h1 {                                   /* 59px / lh 53.1 = 0.9 @1440 */
  font-size: clamp(2.3rem, 4.1vw, 3.6875rem);
  line-height: .9;
}
h2 {                                   /* 50px / lh 55 = 1.1 @1440 */
  font-size: clamp(1.95rem, 3.47vw, 3.125rem);
  line-height: 1.1;
}
h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.15; }

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

/* eyebrow: Syne 16px, letter-spacing 4.8px (=0.3em), boja #766550 */
.eyebrow {
  font-family: var(--ff-head);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.6rem;
}
.eyebrow--light { color: var(--offwhite); }

.lead { font-size: clamp(1.05rem, 1.45vw, 1.3rem); }
.muted { color: rgba(27,22,18,.62); }
.small { font-size: .9rem; }
.note { font-size: .82rem; line-height: 1.55; color: rgba(27,22,18,.66); }
.section--dark .note, .section--tan .note { color: rgba(253,253,253,.6); }

/* ---------- Raspored ---------- */
/* sadržaj je tačno 1188px širok pri 1440px — ivica na 126px kao na originalu */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: calc(860px + 2 * var(--gut)); }

.section { padding-block: clamp(62px, 7.6vw, 110px); }
.section--tight { padding-block: clamp(44px, 5vw, 72px); }

.section--beige { background: var(--beige); color: var(--dark); }
.section--grey,
.section--sand  { background: var(--grey);  color: var(--dark); }
.section--dark  { background: var(--dark);  color: var(--offwhite); }
.section--tan   { background: var(--tan-deep); color: var(--offwhite); }
.section--dark .eyebrow, .section--tan .eyebrow { color: var(--offwhite); }

.section-head { max-width: 860px; margin-bottom: clamp(34px, 4.4vw, 62px); }

/* ---------- Vertikalna linija uz sadržaj (potpis originala) ----------
   Linija stoji 42px levo od teksta, u levoj margini sadržaja. */
.ruled {
  border-left: .8px solid var(--rule);
  /* izvlači se levo koliko ima mesta (42px @1440); na užim ekranima ostaje ≥10px od ivice ekrana */
  margin-left: calc(-1 * min(var(--rule-gap), max(var(--gut) - 10px, (100vw / var(--zoom) - var(--wrap)) / 2 - 10px)));
  padding-left: var(--rule-gap);
}
.section--beige .ruled, .section--grey .ruled, .section--sand .ruled,
.cta--beige .ruled, .section--light .ruled { border-left-color: var(--rule-dark); }

.split { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4.4vw, 70px); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: center; } }
.split--text-first > :first-child { order: -1; }

.facts-lines { margin: 2.6rem 0 0; line-height: 1.7; }

/* ---------- Zaglavlje ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  height: clamp(96px, 12.6vw, 181px);
  display: flex; align-items: center;
  transition: background .35s ease, height .35s ease;
}
/* Pri skrolovanju: svetlo zaglavlje + ORIGINALAN logo u svojim bojama */
.site-header.is-solid {
  background: rgba(253,253,253,.97);
  height: clamp(82px, 7vw, 104px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(27,22,18,.12);
}
.site-header.is-solid .header-logo--filter img,
.site-header.is-solid .header-logo--filter svg { filter: none; }
.site-header.is-solid .menu-btn span { background: var(--dark); }
.site-header.is-solid .btn-anfragen { border-color: var(--dark); color: var(--dark); }
.site-header.is-solid .btn-anfragen:hover { background: var(--dark); color: var(--offwhite); }

/* Dok je meni otvoren, zaglavlje je providno nad tamnim overlayem */
body.nav-open .site-header,
body.nav-open .site-header.is-solid { background: transparent; box-shadow: none; backdrop-filter: none; }
body.nav-open .site-header .menu-btn span { background: var(--offwhite); }
body.nav-open .site-header .header-logo--filter img,
body.nav-open .site-header .header-logo--filter svg { filter: brightness(0) invert(1); }
body.nav-open .site-header .btn-anfragen { border-color: var(--offwhite); color: var(--offwhite); }
body.nav-open .site-header .btn-anfragen:hover { background: var(--offwhite); color: var(--dark); }
.header-inner {
  width: 100%; max-width: 1360px; margin-inline: auto;
  padding-inline: clamp(20px, 2.9vw, 41px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
}
.header-logo { grid-column: 2; justify-self: center; }          /* logo centriran kao na originalu */
.header-logo img, .header-logo svg {
  height: clamp(54px, 6.4vw, 92px); width: auto;                /* original 249×108 @1440; 3. 10. smanjeno na 92 px („na kompjuteru malo manji“) */
  transition: height .35s ease;
}
.site-header.is-solid .header-logo img { height: clamp(46px, 4vw, 58px); }
.header-logo--filter img, .header-logo--filter svg { filter: brightness(0) invert(1); }

.menu-btn {
  grid-column: 1; justify-self: start;
  display: inline-flex; flex-direction: column; justify-content: center; gap: 7px;
  width: 35px; height: 35px; padding: 0;                        /* 35×35 @1440 */
  background: none; border: 0; cursor: pointer;
}
.menu-btn span { display: block; height: 1.2px; width: 35px; background: var(--offwhite); transition: transform .3s, opacity .25s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.2px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.2px) rotate(-45deg); }

.btn-anfragen {                                                 /* 103×36, ivica 0.8px */
  grid-column: 3; justify-self: end;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 103px; height: 36px; padding: 0 14px;
  border: .8px solid var(--offwhite);
  font-family: var(--ff-head); font-size: 14px; letter-spacing: .02em;
  color: var(--offwhite); text-decoration: none; text-transform: uppercase;
  transition: background .25s, color .25s;
}
.btn-anfragen:hover { background: var(--offwhite); color: var(--dark); }
/* Početna: dugme „Wohnungen“ diskretno privlači pažnju — tanak prsten koji se svakih 3.6 s širi i bledi,
   plus kratak svetlosni prelaz preko dugmeta. Boje prate dugme (belo nad slikom, tamno kad je zaglavlje belo). */
.btn-anfragen--pulse { position: relative; overflow: visible; }
.btn-anfragen--pulse::before {
  content: ""; position: absolute; inset: -1px; border: .8px solid currentColor; opacity: 0; pointer-events: none;
  animation: btn-ring 3.6s ease-out infinite;
}
.btn-anfragen--pulse::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 120% 0;
  animation: btn-shine 3.6s ease-in-out infinite;
}
.btn-anfragen--pulse:hover::before, .btn-anfragen--pulse:hover::after { animation: none; opacity: 0; }
@keyframes btn-ring  { 0% { transform: scale(1); opacity: .85; } 55% { transform: scale(1.3, 1.9); opacity: 0; } 100% { opacity: 0; } }
@keyframes btn-shine { 0%, 55% { background-position: 120% 0; } 85%, 100% { background-position: -30% 0; } }
/* Telefon: „Wohnungen" je duže od „Anfragen" — kompaktno dugme i manji logo, logo ostaje centriran */
@media (max-width: 480px) {
  .header-inner { gap: 8px; padding-inline: 14px; }
  .header-logo img, .site-header.is-solid .header-logo img { height: 50px; }   /* 3. 10.: veći logo na telefonu (bio 42) */
  .btn-anfragen { min-width: 0; height: 34px; padding: 0 7px; font-size: 11px; letter-spacing: .02em; }
}
@media (max-width: 400px) {
  .header-logo img, .site-header.is-solid .header-logo img { height: 45px; }   /* 360 px: logo ne sme da dodirne dugme */
}
@media (max-width: 340px) {
  .header-logo img, .site-header.is-solid .header-logo img { height: 40px; }
}

/* ---------- Overlay navigacija ---------- */
.nav-overlay {
  position: fixed; inset: 0; z-index: 65;
  background: var(--dark);
  display: flex; align-items: center; justify-content: center;   /* centrirano */
  padding-inline: clamp(24px, 5.2vw, 75px);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }
.nav-overlay ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.nav-overlay li { margin: 0; }
.nav-overlay a {
  display: block;
  font-family: var(--ff-body); font-weight: 300;
  font-size: clamp(1rem, 1.25vw, 1.125rem);        /* 18px @1440 */
  line-height: 1.4;
  padding: 11px 0;                                  /* razmak ~45px između stavki */
  color: var(--offwhite); text-decoration: none;
  text-transform: uppercase; letter-spacing: .04em;
  transition: color .2s;
}
.nav-overlay a:hover { color: var(--tan); }
.nav-overlay a[aria-current="page"] { color: #8f3d02; }   /* aktivna stavka kao na originalu */
body.nav-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100vh / var(--zoom));   /* vh/vw se ne skaliraju sa zoom-om, zato deljenje */
  display: flex;
  color: var(--offwhite);
  background: var(--dark);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media picture { display: block; width: 100%; height: 100%; }   /* <picture> sa uspravnom slikom za telefon */
.hero__media img { width: 100%; height: 100%; object-fit: cover; animation: hero-zoom 9s ease-out forwards; }
/* jedva primetno uvećanje hero slike pri učitavanju (jedini pokret na sajtu; isključeno kod „smanji pokrete“) */
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.05); } }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,.6);                       /* ravan 60% preklop, bez gradijenta */
}
.hero__inner {
  position: relative; z-index: 2; width: 100%;
  display: flex; align-items: stretch;
  padding-top: clamp(120px, 19vw, 274px);   /* citat počinje na y≈274 kao na originalu */
  padding-bottom: clamp(48px, 6vw, 90px);
}
.hero__inner > .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  align-items: start;
  width: 100%;
}
.hero__quote {                                      /* gore-levo, uzak stubac */
  grid-column: 1; grid-row: 1;
  font-family: var(--ff-body); font-weight: 300; font-style: italic;
  font-size: clamp(1.15rem, 1.7vw, 1.53rem);        /* 24.5px @1440 */
  line-height: 1.3;
  max-width: 15ch;
  margin: 0;
  color: var(--offwhite);
}
.hero h1 {                                          /* dole-desno */
  grid-column: 2; grid-row: 2;
  align-self: end;
  max-width: 13ch;
  margin: 0;
  color: var(--white);
}
.hero__sub {
  grid-column: 2; grid-row: 2;
  align-self: end;
  margin: 0;
  transform: translateY(calc(100% + 1.2rem));
  max-width: 44ch;
  color: rgba(253,253,253,.9);
}
@media (max-width: 860px) {
  .hero__inner > .wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; row-gap: 2.2rem; }
  .hero__quote { grid-column: 1; grid-row: 1; max-width: 22ch; }
  .hero h1 { grid-column: 1; grid-row: 2; max-width: 18ch; }
  .hero__sub { grid-column: 1; grid-row: 3; transform: none; margin-top: 1.2rem; align-self: start; }
}

/* Početna: visina prati proporciju slike (aussen-2 ≈ 2500×1809 → 72 % širine), da se vidi cela zgrada;
   najmanje ceo ekran, najviše 125 % ekrana. Telefon/uspravni tablet: tačno ceo ekran (odluka korisnika
   3. 10. 2026: slika do dna prvog ekrana), a traka „Wohnung finden“ ispod je tamna, kao početak sekcije Projekt. */
/* visina 80 % od ranije (3. 10. 2026: slika odsečena po 10 % gore i dole, object-fit: cover seče po sredini) */
.hero--clean { min-height: clamp(calc(80vh / var(--zoom)), calc(57.6vw / var(--zoom)), calc(100vh / var(--zoom))); }
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .hero--clean { min-height: 80vh; min-height: 80svh; }
  .hero--clean .hero__inner { padding-top: 0; }
}
/* Početna: čistija slika — svetliji preklop; tamnije samo gore (logo, meni) i dole (naslov) */
.hero--clean::after {
  /* gore tamnije (logo, meni, dugme) — korisnik 3. 10.: „malo tamnije gore gde je logo“ */
  background: linear-gradient(to bottom, rgba(0,0,0,.62) 0, rgba(0,0,0,.34) 14%, rgba(0,0,0,.12) 30%, rgba(0,0,0,.12) 52%, rgba(0,0,0,.58) 100%);
}
/* Kao na hausdergaerten.ch (slika 78 % preko tamne pozadine): jače boje i malo tamnije, samo CSS — slika ostaje ista */
.hero--clean .hero__media img { filter: saturate(1.28) contrast(1.06) brightness(.86); }

/* Podstranice: niži hero */
.hero--page { min-height: clamp(420px, 56vh, 620px); }
.hero--page .hero__inner > .wrap { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: end; }
.hero--page .eyebrow { grid-column: 1; grid-row: 1; }
.hero--page h1 { grid-column: 1; grid-row: 2; align-self: start; max-width: 17ch; }

/* ---------- Statusna traka ---------- */
.statusbar {
  background: var(--dark); color: var(--offwhite);
  padding-block: 20px;
  font-family: var(--ff-head); font-size: 16px; letter-spacing: .3em; text-transform: uppercase;
}
.statusbar .wrap { display: flex; flex-wrap: wrap; gap: 10px 48px; }
/* Početna: bela traka ispod heroa sa brzim izborom (linkovi na filtriranu listu) */
.statusbar--light { background: var(--white); color: var(--dark); }
.statusbar--light .wrap { gap: 10px 36px; }
.statusbar--light .statusbar__label { color: var(--accent); }
.statusbar--light a { text-decoration: none; border-bottom: .8px solid transparent; transition: border-color .2s; }
.statusbar--light a:hover { border-bottom-color: var(--dark); }
@media (max-width: 560px) { .statusbar--light .wrap { gap: 8px 22px; } .statusbar--light { font-size: 13px; letter-spacing: .22em; } }
/* Telefon / uspravni tablet: hero je ceo ekran, pa je traka tamna — početak crnog bloka „Projekt“ (mora posle belih pravila) */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .statusbar--light { background: var(--dark); color: var(--offwhite); padding: 26px 0 4px; }
  .statusbar--light .statusbar__label { color: var(--tan); }
  .statusbar--light a:hover { border-bottom-color: var(--offwhite); }
}

/* ---------- Brojke ---------- */
.figures { background: var(--dark); color: var(--offwhite); padding-block: clamp(26px, 3vw, 44px); }
/* uvek tri u redu — i na mobilnom; poravnate preko cele širine sadržaja */
.figures__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-items: stretch; }
/* svaka brojka ima vertikalnu liniju levo — kao na originalu; sadržaj poravnat dole,
   da brojke i labele stoje u istoj liniji i kad jedna ima prefiks („ab CHF“) */
.figure {
  display: flex; flex-direction: column; justify-content: flex-end;
  border-left: .8px solid var(--rule);
  padding-left: clamp(10px, 1.5vw, 22px);
  padding-right: clamp(6px, 1vw, 16px);
}
.figures--light .figure { border-left-color: var(--rule-dark); }
.figure__num {
  display: block;
  font-family: var(--ff-head); font-weight: 400;
  font-size: clamp(1.55rem, 3.1vw, 2.8rem);         /* ~45px @1440, ~25px na mobilnom */
  line-height: 1.05;
  margin-bottom: .3em;
}
/* mali prefiks iznad brojke („ab CHF“) */
.figure__pre { display: block; font-size: .4em; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .3em; opacity: .85; }
.figure__label {
  display: block;
  font-family: var(--ff-head); font-weight: 400;
  font-size: clamp(.68rem, 1.15vw, 1.05rem);        /* ~17px @1440, ~11px na mobilnom */
  line-height: 1.25;
  color: var(--offwhite);
}
/* Brojke na svetloj pozadini (npr. etape bezuga) */
.figures--light { background: transparent; padding-block: 0; color: var(--dark); }
.figures--light .figure__num { color: var(--dark); }
.figures--light .figure__label { color: var(--accent); }

/* ---------- Kartice pregleda (ravne, bez kutije) ---------- */
.cards { display: grid; grid-template-columns: 1fr; gap: clamp(34px, 3.6vw, 52px) clamp(10px, 1vw, 14px); }
@media (min-width: 760px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { display: block; text-decoration: none; color: inherit; }
.card__media { overflow: hidden; aspect-ratio: 3 / 2; background: rgba(27,22,18,.07); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding: 22px 0 0; }
.card__title {                                      /* isto kao eyebrow */
  font-family: var(--ff-head); font-weight: 400;
  font-size: 16px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .85rem;
}
.card__text { margin: 0; }

/* ---------- Traka sa citatom ---------- */
.quoteband { background: var(--tan-deep); color: var(--offwhite); padding-block: clamp(52px, 6vw, 88px); }

/* ---------- Materialisierung: traka „Auf einen Blick" ---------- */
.figures--facts .eyebrow { margin-bottom: clamp(18px, 2vw, 26px); }
.figures__grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .figures__grid--4 { grid-template-columns: repeat(2, 1fr); row-gap: 22px; } }

/* ---------- Materialisierung: editorijalni redovi ----------
   Levo naziv kategorije (lepi se pri skrolu), desno stavke razdvojene linijama 0.8px */
.spec-rows { border-top: .8px solid rgba(27,22,18,.3); }
.spec-row {
  display: grid; grid-template-columns: 1fr; gap: 20px 48px;
  padding-block: clamp(32px, 4vw, 56px);
  border-bottom: .8px solid rgba(27,22,18,.3);
}
@media (min-width: 900px) {
  .spec-row { grid-template-columns: 5fr 7fr; }
  .spec-row__head { position: sticky; top: clamp(96px, 8vw, 128px); align-self: start; }
}
.spec-row__head .eyebrow { margin-bottom: .9rem; }
.spec-row__head h3 { font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.1; }
.spec-items { list-style: none; margin: 0; padding: 0; }
.spec-items li { padding: 14px 0; border-top: .8px solid rgba(27,22,18,.14); }
.spec-items li:first-child { border-top: 0; padding-top: 2px; }
.spec-row__img { margin: clamp(22px, 2.6vw, 34px) 0 0; }
/* Slike uz kategoriju (11. 10. 2026): dve kolone; kod neparnog broja prva slika ide preko cele širine. Klik = uvećanje */
.spec-bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1vw, 14px); margin: clamp(22px, 2.6vw, 34px) 0 0; }
.spec-bilder figure { margin: 0; }
.spec-bilder figure:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.spec-bilder a { background: rgba(27,22,18,.07); }
.spec-bilder img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.spec-bilder figcaption { font-size: .9rem; line-height: 1.4; color: rgba(27,22,18,.62); margin-top: 8px; }
.quoteband p {
  font-family: var(--ff-body); font-weight: 300; font-style: italic;
  font-size: clamp(1.5rem, 3.1vw, 2.8rem);
  line-height: 1.2; max-width: 18ch; margin: 0;
}

/* ---------- Mediji ---------- */
.media { background: rgba(27,22,18,.07); overflow: hidden; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--tall { aspect-ratio: 3 / 4; }
.media--wide { aspect-ratio: 3 / 2; }

/* Crtež naselja (Projekt na početnoj, kao na originalu): PNG sa providnom pozadinom na tamnoj sekciji,
   oznake kuća sa tankom linijom iznad krova; položaji u % slike, pa prate svaku širinu. */
.sketch { position: relative; }
.sketch img { width: 100%; height: auto; display: block; }
/* crtež dobija širu kolonu od teksta (kao na originalu) i sme malo preko desne ivice sadržaja */
@media (min-width: 900px) {
  .split--sketch { grid-template-columns: 1fr 1.35fr; align-items: center; }
  .split--sketch .sketch { margin-right: calc(-1 * min(var(--gut) + 40px, (100vw / var(--zoom) - var(--wrap)) / 2 + var(--gut))); }
}
.sketch__label {
  position: absolute; transform: translate(-50%, -100%);
  font-family: var(--ff-head); font-size: clamp(9px, .95vw, 14px); letter-spacing: .22em; text-transform: uppercase;
  color: var(--offwhite); white-space: nowrap; padding-bottom: clamp(16px, 2.4vw, 34px); line-height: 1;
}
.sketch__label::after { content: ""; position: absolute; left: 50%; bottom: 0; width: .8px; height: clamp(11px, 1.9vw, 26px); background: var(--offwhite); }
/* oznaka ispod zgrade (linija ide nagore) — kad iznad krova nema mesta jer je tu druga kuća */
.sketch__label--below { transform: translate(-50%, 0); padding-bottom: 0; padding-top: clamp(16px, 2.4vw, 34px); }
.sketch__label--below::after { bottom: auto; top: 0; }
/* Interaktivna polja preko kuća: hover/fokus = meko osvetljenje kuće + kartica sa podacima; klik = lista te kuće.
   Polja i oznake dele data-haus; site.js dodaje .is-hot i polju i oznaci. */
.sketch__hot { position: absolute; display: block; text-decoration: none; color: inherit; z-index: 2; outline: none; }
/* aktivna kuća iznad oznaka (z 3): inače natpis «HAUS B» probija kroz karticu ispod kuće */
.sketch__hot.is-hot, .sketch__hot:hover, .sketch__hot:focus-visible { z-index: 6; }
/* osvetljenje: obris kuće iz 3D modela (SVG), tan preko tamne podloge; screen ostavlja bele linije bele */
.sketch__flaechen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.sketch__flaechen path { fill: var(--tan); fill-opacity: 0; fill-rule: evenodd; transition: fill-opacity .3s ease; }
.sketch__flaechen path.is-hot { fill-opacity: .5; }
.sketch__label { transition: color .25s, text-shadow .25s; z-index: 3; }
.sketch__label.is-hot { color: #fff; text-shadow: 0 0 10px rgba(253,253,253,.85); }
.sketch__card {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, 8px); z-index: 5;
  min-width: 190px; padding: 12px 14px 11px; background: var(--dark); border: .8px solid rgba(253,253,253,.45);
  font-family: var(--ff-body); font-size: .82rem; line-height: 1.45; color: var(--offwhite); text-align: left; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s; pointer-events: none;
}
.sketch__card strong { display: block; font-family: var(--ff-head); font-weight: 400; font-size: 1rem; letter-spacing: .04em; margin-bottom: 4px; }
.sketch__card span { display: block; }
.sketch__card b { font-weight: 400; color: #fff; }
.sketch__card em { display: block; margin-top: 7px; font-style: normal; font-family: var(--ff-head); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--tan); }
.sketch__hot--left .sketch__card { left: auto; right: 0; transform: translate(0, 8px); }
.sketch__hot.is-hot .sketch__card, .sketch__hot:hover .sketch__card, .sketch__hot:focus-visible .sketch__card { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.sketch__hot--left.is-hot .sketch__card, .sketch__hot--left:hover .sketch__card, .sketch__hot--left:focus-visible .sketch__card { transform: translate(0, 0); }
@media (max-width: 760px) { .sketch__card { display: none; } }   /* telefon: dodir odmah vodi na listu */

/* Meki prelaz između stranica (View Transitions, Chrome/Edge/Safari; drugde bez efekta) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms ease-out both vt-out; }
::view-transition-new(root) { animation: 260ms ease-in both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; } }
/* Uvod sa slikom (tekst levo, slika desno) umesto samog naslova — npr. iznad kartica kuća */
.intro-split { margin-bottom: clamp(34px, 4.4vw, 62px); }
.media-caption { font-size: .9rem; line-height: 1.5; color: rgba(27,22,18,.62); margin: 12px 0 0; }
.media-caption a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.media-caption a:hover { color: var(--dark); }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(12px, 1vw, 14px); }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gallery figcaption {
  font-family: var(--ff-head); font-size: 16px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent); margin-top: 14px;
}
.section--dark .gallery figcaption, .section--tan .gallery figcaption { color: var(--offwhite); }
/* 8 slika: 4 / 2 kolone — nikad slika sama u redu */
.gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery--4 figcaption { font-size: 13px; letter-spacing: .2em; margin-top: 10px; }
@media (max-width: 900px) { .gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Stranica Galerie (11. 10. 2026): 3 / 2 / 1 kolona, iznad filter po prostoru (site.js, [data-galerie-filter]) */
.gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px) clamp(12px, 1vw, 14px); }
.gallery--3 figcaption { font-size: 13px; letter-spacing: .2em; margin-top: 10px; }
@media (max-width: 900px) { .gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery--3 { grid-template-columns: 1fr; } }
.gallery figure[hidden] { display: none; }
/* Galerie auf dem Handy ohne Detailbilder (Waschbecken, WC, Plattenbelag; Wunsch 14. 10. 2026) */
@media (max-width: 560px) { .gallery figure[data-ohne-handy] { display: none; } }
.galerie-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: clamp(26px, 3vw, 40px); }
.galerie-filter button {
  font-family: var(--ff-head); font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dark); background: transparent; border: .8px solid rgba(27,22,18,.3);
  padding: 11px 16px; min-height: 44px; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.galerie-filter button:hover { border-color: var(--dark); }
.galerie-filter button[aria-pressed="true"] { background: var(--dark); border-color: var(--dark); color: var(--offwhite); }
.galerie-filter button:focus-visible { outline: 2px solid var(--tan); outline-offset: 2px; }
.galerie-filter__zahl { font-size: .9rem; color: rgba(27,22,18,.62); margin-left: 6px; }

/* Slika koja se uvećava na klik (galerija, tlocrti, planovi) */
a[data-lightbox] { display: block; position: relative; cursor: zoom-in; overflow: hidden; }
a[data-lightbox] img { transition: transform .6s ease; }
a[data-lightbox]:hover img { transform: scale(1.03); }
a[data-lightbox].plan:hover img { transform: none; }

/* Tlocrt / plan: bela podloga, ceo plan vidljiv (bez sečenja) */
.plan-figure { margin: 0; }
.plan-figure + .plan-figure { margin-top: clamp(22px, 3vw, 40px); }   /* drugi list (Untergeschoss kod Gewerbe) */
.plan-figure a, .plan-figure > img { background: var(--white); border: .8px solid rgba(27,22,18,.16); padding: clamp(8px, 1.4vw, 18px); }
.plan-figure img { width: 100%; height: auto; object-fit: contain; }
/* Ausschnitt des Geschossplans (--ax/--ay/--aw/--ah = Anteile, build.ps1) mit eingefärbter Wohnung (Maske, Multiplikation) */
.plan-figure a { display: block; }
.plan__fenster { position: relative; display: block; overflow: hidden; }
.plan-figure[style*="--aw"] .plan__fenster { aspect-ratio: calc(var(--aw) * 1.4146) / var(--ah); }
.plan-figure[style*="--aw"] .plan__fenster img { position: absolute; width: calc(100% / var(--aw)); height: auto; aspect-ratio: 1.4146; max-width: none; left: calc(-100% * var(--ax) / var(--aw)); top: calc(-100% * var(--ay) / var(--ah)); }
/* Maske (weiss mit Alpha): als tan Fläche über dem Plan, multipliziert, damit die Linien sichtbar bleiben */
.plan__maske { mix-blend-mode: multiply; pointer-events: none; filter: brightness(0) invert(.78) sepia(.5) saturate(1.4) brightness(1.02); opacity: .9; }
.plan-figure figcaption { font-size: .9rem; color: rgba(27,22,18,.62); margin-top: 12px; }
.section--dark .plan-figure figcaption { color: rgba(253,253,253,.7); }
.section--dark .plan-figure a { border-color: transparent; }

/* ---------- Rundgang durch eine Wohnung (/wohnungen/#rundgang) ----------
   Bühne 16:9: zwei Bildebenen (weiches Überblenden) + Video mit der Kamerafahrt; daneben Raum, Text und Grundriss mit Standorten. */
#rundgang { scroll-margin-top: var(--kopf-h, 104px); }
.rundgang { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 46px); align-items: start; }
@media (min-width: 1000px) { .rundgang { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); } }
.rundgang__buehne { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0f0c0a; }
.rundgang__buehne img, .rundgang__buehne video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rundgang__buehne img { opacity: 0; transition: opacity .6s ease; transform-origin: var(--kb, 50% 50%); }
.rundgang__buehne img.is-da { opacity: 1; }
.rundgang__buehne img.is-oben { z-index: 1; }
.rundgang__buehne img.is-fahrt { animation: rg-fahrt 7s ease-out forwards; }   /* Standbilder: langsame Fahrt ins Bild */
@keyframes rg-fahrt { from { transform: scale(1); } to { transform: scale(1.09); } }
.rundgang__buehne video { z-index: 2; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.rundgang__buehne.is-film video { opacity: 1; }
.rundgang__vermerk { position: absolute; left: 14px; top: 14px; z-index: 3; padding: 7px 10px 6px; background: rgba(27,22,18,.55); color: var(--offwhite); font-family: var(--ff-head); font-size: 10px; line-height: 1; letter-spacing: .3em; text-transform: uppercase; }
.rundgang__pfeil { position: absolute; top: 50%; z-index: 3; width: 46px; height: 46px; margin-top: -23px; padding: 0 0 4px; display: flex; align-items: center; justify-content: center; border: .8px solid rgba(253,253,253,.85); background: rgba(27,22,18,.38); color: var(--offwhite); font-family: var(--ff-body); font-size: 26px; line-height: 1; cursor: pointer; transition: background .25s, color .25s; }
.rundgang__pfeil:hover { background: var(--offwhite); color: var(--dark); }
.rundgang__pfeil--zurueck { left: 14px; }
.rundgang__pfeil--weiter { right: 14px; }
.rundgang__nr { margin: 0 0 .9rem; font-family: var(--ff-head); font-size: 13px; letter-spacing: .3em; color: var(--tan); }
.rundgang__raum { font-size: clamp(1.45rem, 2.2vw, 1.95rem); text-transform: uppercase; }
.rundgang__text { margin: .9rem 0 0; min-height: 4.9em; color: rgba(253,253,253,.82); }
.rundgang__plan { position: relative; margin-top: clamp(14px, 1.6vw, 22px); padding: 10px; background: var(--white); }
.rundgang__plan img { display: block; width: 100%; height: auto; }
.rundgang__orte { position: absolute; inset: 10px; margin: 0; padding: 0; list-style: none; }
.rundgang__orte button { position: absolute; left: var(--x); top: var(--y); width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--white); border-radius: 50%; background: var(--tan-deep); color: var(--offwhite); font-family: var(--ff-head); font-size: 12px; line-height: 1; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.rundgang__orte button:hover { background: var(--dark); }
.rundgang__orte button[aria-current="true"] { background: var(--dark); transform: scale(1.22); outline: 2px solid var(--tan-deep); outline-offset: 2px; z-index: 1; }
.rundgang__orte button:focus-visible, .rundgang__pfeil:focus-visible { outline: 2px solid var(--tan); outline-offset: 3px; }
.rundgang__steuer { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: clamp(18px, 2vw, 26px); }
.rundgang__steuer a { color: var(--offwhite); }
.rundgang__hinweis { margin-top: clamp(22px, 2.6vw, 34px); max-width: 860px; }
@media (max-width: 560px) {
  .rundgang__pfeil { width: 40px; height: 40px; margin-top: -20px; font-size: 22px; }
  .rundgang__pfeil--zurueck { left: 8px; }
  .rundgang__pfeil--weiter { right: 8px; }
  .rundgang__vermerk { left: 8px; top: 8px; }
  .rundgang__text { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .rundgang__buehne img.is-fahrt { animation: none; } }
@media print { #rundgang { display: none; } }

/* Distanzskizze (Lage) */
.distanz { margin: 0; }
.distanz svg { width: 100%; height: auto; display: block; overflow: visible; }
.distanz__ring circle { fill: none; stroke: rgba(27,22,18,.22); stroke-width: .8; }
.distanz__ringtext text { font-family: var(--ff-head); font-size: 13px; letter-spacing: .12em; fill: var(--accent); text-anchor: middle; }
.distanz__linie path { stroke: rgba(27,22,18,.35); stroke-width: .8; fill: none; }
.distanz__punkt circle { fill: var(--tan); }
.distanz__ort text { font-family: var(--ff-head); font-size: 19px; fill: var(--dark); }
.distanz__mitte { fill: var(--dark); }
.distanz__titel { font-family: var(--ff-head); font-size: 15px; letter-spacing: .3em; text-transform: uppercase; fill: var(--dark); }
.distanz__nord path { stroke: var(--dark); stroke-width: .8; fill: none; }
.distanz__nord text { font-family: var(--ff-head); font-size: 13px; fill: var(--dark); }
@media (max-width: 560px) {
  .distanz__ort text { font-size: 26px; }
  .distanz__zeit { display: none; }                 /* na telefonu samo imena — vremena su u tabeli */
  .distanz__titel { font-size: 20px; }
  .distanz__ringtext text { font-size: 18px; }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(27,22,18,.94);
  display: flex; align-items: center; justify-content: center; padding: 64px clamp(12px, 5vw, 80px) 72px;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: var(--white); }
.lightbox__cap { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; color: var(--offwhite); font-size: .95rem; padding: 0 70px; }
.lightbox button {
  position: absolute; background: none; border: .8px solid rgba(253,253,253,.6); color: var(--offwhite);
  width: 46px; height: 46px; cursor: pointer; font-size: 22px; line-height: 1; transition: background .2s, color .2s;
}
.lightbox button:hover { background: var(--offwhite); color: var(--dark); }
.lightbox__close { top: 14px; right: 14px; }
.lightbox__prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 14px; top: 50%; transform: translateY(-50%); }
.lightbox [hidden] { display: none; }

/* ---------- Tabela činjenica ---------- */
.facts { width: 100%; border-collapse: collapse; }
.facts th, .facts td { text-align: left; vertical-align: top; padding: 16px 0; border-bottom: 1px solid rgba(27,22,18,.16); }
.facts th {
  font-family: var(--ff-head); font-weight: 400;
  font-size: 16px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent); width: 38%; padding-right: 24px;
}
.facts td ul { margin: 0; padding-left: 1.1em; }
.section--dark .facts th, .section--tan .facts th { color: var(--offwhite); }
.section--dark .facts th, .section--dark .facts td,
.section--tan .facts th, .section--tan .facts td { border-bottom-color: rgba(253,253,253,.24); }

/* ---------- Putevi i vremena ---------- */
.traveltable { width: 100%; border-collapse: collapse; }
.traveltable caption {
  text-align: left; font-family: var(--ff-head); font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  padding-bottom: 18px;
}
.traveltable th, .traveltable td { text-align: left; padding: 13px 16px 13px 0; border-bottom: 1px solid rgba(27,22,18,.16); }
.traveltable thead th {
  font-family: var(--ff-head); font-weight: 400;
  font-size: 16px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent);
}
.traveltable tbody th { font-weight: 300; font-family: var(--ff-body); }
.traveltable td:last-child, .traveltable th:last-child { padding-right: 0; }
.tables-3 { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 4.4vw, 62px); }
@media (min-width: 880px) { .tables-3 { grid-template-columns: 1fr 1fr; } }
.tables-3 > :first-child { grid-column: 1 / -1; }

/* Ratgeber-Artikel: lesbare Zeilenlänge, ruhige Zwischentitel */
.prose { max-width: 68ch; }
.prose .lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; margin-bottom: 1.6em; }
.prose h2 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.15; letter-spacing: .02em; margin: 2.2em 0 .8em; }
.prose h3 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); margin: 1.6em 0 .5em; }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.2em; }
.prose li { margin-bottom: .55em; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose a:hover { color: var(--dark); }
.prose .note { margin-top: 2em; }
.checkliste { counter-reset: punkt; list-style: none; padding-left: 0 !important; }
.checkliste li { counter-increment: punkt; position: relative; padding: 14px 0 14px 52px; border-top: .8px solid rgba(27,22,18,.16); margin: 0; }
.checkliste li:last-child { border-bottom: .8px solid rgba(27,22,18,.16); }
.checkliste li::before { content: counter(punkt); position: absolute; left: 0; top: 10px; font-family: var(--ff-head); font-size: 1.6rem; line-height: 1; color: var(--accent); }
.minuten { list-style: none; padding-left: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
@media (max-width: 560px) { .minuten { grid-template-columns: 1fr; } }
.minuten li { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.minuten span { font-family: var(--ff-head); font-size: 1.25rem; min-width: 4.2em; color: var(--dark); }

/* Lage: Alltag als Kacheln — grosse Minutenzahl, Ziel, Hinweis (3 × 2 / 2 × 3) */
.alltag__titel { font-family: var(--ff-head); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; }
.alltag__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .alltag__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.alltag__grid li { background: var(--white); padding: clamp(18px, 2.2vw, 28px) clamp(16px, 2vw, 26px); display: flex; flex-direction: column; gap: 4px; }
.alltag__zeit { font-family: var(--ff-head); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; color: var(--dark); margin-bottom: 10px; }
.alltag__zeit small { font-size: .32em; letter-spacing: .12em; text-transform: uppercase; margin-left: .35em; color: var(--accent); }
.alltag__ziel { font-family: var(--ff-head); font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--dark); }   /* i u tamnoj sekciji (regionalne stranice) */
.section--dark .alltag__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* regionalne stranice: 4 pločice 2×2 uz tekst */
.section--dark .alltag__titel { color: var(--tan); }
.alltag__info { font-size: .92rem; color: rgba(27,22,18,.66); }

/* ---------- Liste opreme ---------- */
.speclist { margin-bottom: clamp(40px, 4.6vw, 64px); }
.speclist:last-child { margin-bottom: 0; }
.speclist h3 {
  font-family: var(--ff-head); font-weight: 400;
  font-size: 16px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid rgba(27,22,18,.16);
}
.speclist ul { list-style: none; margin: 0; padding: 0; columns: 1; }
@media (min-width: 840px) { .speclist ul { columns: 2; column-gap: 62px; } }
.speclist li { position: relative; padding-left: 22px; margin-bottom: 12px; break-inside: avoid; }
.speclist li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--accent); }

/* ---------- Dugmad ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 30px;
  border: .8px solid var(--dark); background: transparent; color: var(--dark);
  font-family: var(--ff-head); font-size: 14px; letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.btn:hover { background: var(--dark); color: var(--offwhite); }
.btn--light { border-color: var(--offwhite); color: var(--offwhite); }
.btn--light:hover { background: var(--offwhite); color: var(--dark); }
.btn--outline { /* osnovno dugme je već obris — zadržano radi čitljivosti u markupu */ }
/* na tamnim i tan površinama je dugme belo (.cta je podrazumevano tan) */
.section--dark .btn, .section--tan .btn, .quoteband .btn, .cta .btn { border-color: var(--offwhite); color: var(--offwhite); }
.section--dark .btn:hover, .section--tan .btn:hover, .quoteband .btn:hover, .cta .btn:hover { background: var(--offwhite); color: var(--dark); }
.cta--beige .btn { border-color: var(--dark); color: var(--dark); }
.cta--beige .btn:hover { background: var(--dark); color: var(--offwhite); }

/* ---------- CTA blok ---------- */
.cta { background: var(--tan-deep); color: var(--offwhite); padding-block: clamp(70px, 9vw, 128px); position: relative; overflow: hidden; }
/* Znak u pozadini, ton u tonu (kao original) */
.cta::after {
  content: ""; position: absolute; right: clamp(16px, 7vw, 120px); bottom: 0;
  width: clamp(150px, 24vw, 340px); aspect-ratio: 56.7 / 80.2;
  background: url("../icons/znak.svg") no-repeat center bottom / contain;
  pointer-events: none;
}
.cta > .wrap { position: relative; z-index: 1; }
.cta--beige::after { display: none; }
.cta h2 { max-width: 13ch; margin: 0 0 1.6rem; }
.cta p { max-width: 52ch; margin: 0 0 2.2rem; color: var(--offwhite); }
.cta .eyebrow { color: var(--offwhite); }
.cta--dark { background: var(--dark); }
.cta--beige { background: var(--beige); color: var(--dark); }
.cta--beige .eyebrow { color: var(--accent); }
.cta--beige p { color: rgba(27,22,18,.7); }

/* ---------- Preuzimanja ---------- */
.dl-hero { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .dl-hero { grid-template-columns: 1fr 1fr; } }
.dl-big {
  display: flex; flex-direction: column; justify-content: space-between; gap: 34px;
  padding: clamp(30px, 3.6vw, 50px);
  background: var(--dark); color: var(--offwhite); text-decoration: none;
  min-height: 220px; transition: background .25s;
}
.dl-big:hover { background: #2a231d; }
.dl-big span.t { font-family: var(--ff-head); font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1.1; }
.dl-big span.m { font-family: var(--ff-head); font-size: 16px; letter-spacing: .3em; text-transform: uppercase; color: var(--tan); }
.dl-big--tan { background: var(--tan-deep); }
.dl-big--tan:hover { background: #75644f; }
.dl-big--tan span.m { color: rgba(253,253,253,.9); }

.dl-group { margin-top: clamp(42px, 5vw, 68px); }
.dl-group h3 {
  font-family: var(--ff-head); font-weight: 400;
  font-size: 16px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent);
  padding-bottom: 14px; border-bottom: 1px solid rgba(27,22,18,.16); margin-bottom: 0;
}
.dl-list { list-style: none; margin: 0; padding: 0; }
.dl-list li { border-bottom: 1px solid rgba(27,22,18,.16); }
.dl-list a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 2px; text-decoration: none; transition: color .2s, padding .2s; }
.dl-list a:hover { color: var(--accent); padding-left: 8px; }
.dl-list .fmt { font-family: var(--ff-head); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: rgba(27,22,18,.64); } /* .45 → .64: kontrast 2.9 → 5.2:1 */
/* Downloads: sličice planova (prave slike arhitekte) umesto liste; klik otvara PDF */
.plan-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
@media (max-width: 900px) { .plan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan-card { display: block; text-decoration: none; color: inherit; }
.plan-card__img {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--white); border: .8px solid rgba(27,22,18,.16); padding: 8px;
  transition: border-color .2s;
}
.plan-card__img img { width: 100%; height: 100%; object-fit: contain; }
.plan-card:hover .plan-card__img { border-color: var(--dark); }
.plan-card__t { display: block; margin-top: 12px; font-size: .95rem; line-height: 1.35; }
.plan-card__f { display: block; margin-top: 4px; font-family: var(--ff-head); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: rgba(27,22,18,.64); }
/* Downloads: Broschüre — Titelseite gross + Text/Buttons, darunter alle Seiten als Vorschau (Lightbox) */
.brochure { display: grid; grid-template-columns: 1fr; gap: clamp(22px, 3vw, 48px); align-items: center; margin-top: clamp(22px, 2.6vw, 34px); }
@media (min-width: 900px) { .brochure { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.brochure__cover { display: block; border: .8px solid rgba(27,22,18,.16); transition: border-color .2s; }
.brochure__cover:hover { border-color: var(--dark); }
.brochure__cover img { display: block; width: 100%; height: auto; aspect-ratio: 1.414 / 1; object-fit: cover; }
.brochure__text .btn-row { margin-top: 1.4em; }
.brochure__meta { margin-top: 1.2em; font-family: var(--ff-head); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: rgba(27,22,18,.64); }
.brochure-pages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); margin-top: clamp(18px, 2vw, 26px); }
@media (max-width: 900px) { .brochure-pages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.brochure-pages a { display: block; border: .8px solid rgba(27,22,18,.16); transition: border-color .2s; }
.brochure-pages a:hover { border-color: var(--dark); }
.brochure-pages img { display: block; width: 100%; height: auto; aspect-ratio: 1.414 / 1; object-fit: cover; }

/* Lage: linkovi na regionalne stranice (Wohnen bei Lenzburg, Aarau …) */
.region-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.region-links li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: .8px solid rgba(27,22,18,.2); }
.region-links a { font-family: var(--ff-head); font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--dark); text-decoration: none; }
.region-links a:hover { color: var(--accent-deep); }
.region-links span { font-size: .9rem; color: var(--accent-deep); white-space: nowrap; }

/* ---------- Lista stanova ---------- */
/* Raspored po kući (zahtev 9. 10., kao hausdergaerten.ch/wohnungen):
   računar ≥1181: naslov + tabela levo, crtež kuće desno (lepi se dok se tabela skroluje)
   tablet 701–1180: naslov levo, crtež desno, kartice stanova ispod
   telefon ≤700: crtež, naslov, kartice */
.house-block {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "sketch" "head" "table";
  margin-bottom: clamp(48px, 5.4vw, 78px);
}
.house-block:last-child { margin-bottom: 0; }
.house-block > .house-head { grid-area: head; }
.house-block > .house-sketch { grid-area: sketch; }
.house-block > .wtable { grid-area: table; }
@media (min-width: 701px) and (max-width: 1180px) {
  .house-block { grid-template-columns: minmax(0, 1fr) min(44%, 460px); grid-template-areas: "head sketch" "table table"; column-gap: 26px; }
  .house-block > .house-head { align-self: end; }
}
/* od 9. 10.: tabela levo + crtež desno već od 1181 px (kao hausdergaerten.ch) */
@media (min-width: 1181px) {
  .house-block { grid-template-columns: minmax(0, 1fr) clamp(280px, calc(100% - 990px), 420px); grid-template-areas: "head sketch" "table sketch"; grid-template-rows: auto 1fr; column-gap: clamp(28px, 3vw, 44px); }
  /* crtež ostaje vidljiv ispod zaglavlja i trake sa filterima dok se redovi skroluju */
  .house-block > .house-sketch { align-self: start; position: sticky; top: calc(clamp(82px, 7vw, 104px) + 92px); }
  /* kompaktna tabela (8 kolona): NK i brutto kao 2. i 3. red ispod nettomiete, linkovi jedan ispod drugog */
  .wtable .col-nk, .wtable .col-netto { display: none; }
  .wtable .col-miete .miete-nk, .wtable .col-miete .miete-netto { display: block; font-size: .78rem; line-height: 1.35; color: rgba(27,22,18,.6); }
  .wtable .col-miete .miete-netto { margin-top: 3px; }
  .wtable thead .th-zusatz { display: block; font-size: 11px; letter-spacing: .12em; }
  .wtable td { padding-top: 11px; padding-bottom: 11px; }
  .row-links { flex-direction: column; align-items: flex-end; gap: 5px; }
}
/* Lista je na računaru šira od teksta (sadržaj 1188px): do 1392px pri 1440px, da tabela i crtež stanu jedno pored drugog */
@media (min-width: 1341px) {
  .liste-breit { margin-inline: calc(-1 * clamp(0px, (100vw / var(--zoom) - var(--wrap)) / 2 - var(--gut), 102px)); }
}
.row-links { display: inline-flex; align-items: center; gap: inherit; }
.wtable .miete-nk, .wtable thead .th-zusatz { display: none; }
@media (min-width: 1181px) { .wtable thead th .th-zusatz { display: block; } }
.house-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 26px;
  padding-bottom: 16px; border-bottom: 1px solid rgba(27,22,18,.16);
}
.house-head h3 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); }
.house-head__text { display: flex; flex-direction: column; gap: 10px; }
/* Crtež kuće (Higgsfield, ..\Seetalbrunnen-Zeichnungen): izabrani stan se boji preko SVG poligona */
.house-sketch { position: relative; margin: 0; width: 100%; }
.house-sketch img { display: block; width: 100%; height: auto; }
.house-sketch__hint { font-size: .82rem; color: rgba(27,22,18,.56); text-align: center; margin-top: 4px; }
@media (max-width: 1180px) { .house-sketch__hint { display: none; } }
/* Wohnung auf der Zeichnung: SVG-Polygone (build.ps1, data/skizze-einheiten.json) über dem Bild; .is-on = hervorgehoben.
   Die Polygone sind die genau sichtbaren Flächen der Wohnung im 3D-Modell; multiply hält die Linien darunter schwarz. */
.house-sketch__bild { position: relative; }
.hs-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; mix-blend-mode: multiply; }
.hs-overlay path { fill: var(--tan); fill-opacity: 0; fill-rule: evenodd; stroke: none; transition: fill-opacity .22s; }
.hs-overlay path.is-on { fill-opacity: .82; }
.wtable tbody tr[data-slug] { cursor: default; }
.wtable tbody tr.is-sel, .wtable tbody tr.is-sel:hover { background: var(--beige); }
.house-sketch__label {
  position: absolute; transform: translate(-50%, -100%);
  font-family: var(--ff-head); font-size: clamp(9px, .8vw, 12px); letter-spacing: .2em; text-transform: uppercase;
  color: var(--dark); white-space: nowrap; padding-bottom: clamp(12px, 1.6vw, 22px); line-height: 1;
}
.house-sketch__label::after { content: ""; position: absolute; left: 50%; bottom: 0; width: .8px; height: clamp(8px, 1.2vw, 16px); background: var(--dark); }
.house-sketch__label--below { transform: translate(-50%, 0); padding-bottom: 0; padding-top: clamp(12px, 1.6vw, 22px); }
.house-sketch__label--below::after { bottom: auto; top: 0; }
@media (max-width: 700px) { .house-block > .house-sketch { margin-bottom: 6px; } }
.house-head .meta { font-family: var(--ff-head); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }

.wtable { width: 100%; border-collapse: collapse; font-size: clamp(.9rem, 1.1vw, .95rem); }
.wtable thead th {
  font-family: var(--ff-head); font-weight: 400;
  font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  text-align: left; padding: 16px 9px 14px 0; border-bottom: 1px solid rgba(27,22,18,.16); line-height: 1.3; vertical-align: bottom;
}
/* 10 kolona (sa Nebenkosten/Brutto): dugi naslovi smeju da se prelome, podaci ne; razmaci su tesni da sve stane u 1188px */
.wtable td { padding: 15px 9px 15px 0; border-bottom: 1px solid rgba(27,22,18,.16); vertical-align: middle; white-space: nowrap; }
.wtable tbody tr { transition: background .18s; }
.wtable tbody tr:hover { background: var(--grey); }
.wtable td:last-child, .wtable th:last-child { padding-right: 0; text-align: right; }
.wtable .num { white-space: nowrap; }
.wtable .wname { font-family: var(--ff-head); }
.wtable a.detail, a.link-more {
  font-family: var(--ff-head); font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor;
}
.wtable a.detail:hover, a.link-more:hover { color: var(--dark); }

/* Status: tačka + reč — nikad samo boja */
.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-head); font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 10px 6px 9px; white-space: nowrap; line-height: 1.2;
}
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.status--frei       { color: var(--ok);       background: rgba(67,107,64,.12); }
.status--weg        { color: var(--taken);    background: rgba(163,71,59,.10); }
.status--reserviert { color: var(--reserved); background: rgba(138,92,23,.12); }

/* Izdati redovi: prigušeni, status ostaje pun */
.wtable tr.is-taken td { color: rgba(27,22,18,.62); }
.wtable tr.is-taken td.wname { color: rgba(27,22,18,.66); }

/* Akcije u redu: Details + Bewerben */
.row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; white-space: nowrap; }
.btn-apply {
  display: inline-flex; align-items: center; height: 32px; padding: 0 11px;
  border: .8px solid var(--dark); color: var(--dark); text-decoration: none;
  font-family: var(--ff-head); font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.btn-apply:hover { background: var(--dark); color: var(--offwhite); }
/* Srednje širine (tablet): akcije jedna ispod druge, zaglavlja se lome — tabela ne izlazi iz sadržaja */
@media (min-width: 1181px) and (max-width: 1340px) {
  .row-actions { flex-direction: column; align-items: flex-end; gap: 8px; }
  .wtable thead th { white-space: normal; letter-spacing: .1em; }
}

/* Datum useljenja: tačka + tekst, JS dopisuje „noch X Tage" / „Bezugsbereit" */
.bezug-badge { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; line-height: 1.3; color: var(--accent); }
.bezug-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tan); flex: none; }
.bezug-badge.is-ready { color: var(--ok); font-weight: 400; }
.bezug-badge.is-ready::before { background: var(--ok); }
.house-head .meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.house-head .meta .bezug-badge { font-family: var(--ff-body); font-size: .92rem; letter-spacing: 0; text-transform: none; }
.meta__sep { opacity: .5; }

/* ---------- Kartice kuća (Wohnungen, iznad filtera) ---------- */
.house-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.house-cards__note { margin-bottom: clamp(30px, 3.6vw, 48px); }
@media (max-width: 1000px) { .house-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Telefon: kuće u jednom redu koji se prevlači (umesto 3 reda kartica) */
@media (max-width: 560px) {
  .house-cards {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px;
    margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) 6px; scrollbar-width: none;
  }
  .house-cards::-webkit-scrollbar { display: none; }
  .house-card { flex: 0 0 42%; scroll-snap-align: start; padding: 16px 14px 14px; }
}
.house-card {
  font: inherit; color: var(--dark); text-align: left; cursor: pointer;
  background: var(--white); border: .8px solid rgba(27,22,18,.2);
  padding: 20px 18px 18px; display: flex; flex-direction: column; gap: 9px;
  transition: border-color .2s, background .2s, color .2s;
}
.house-card:hover { border-color: var(--dark); }
/* crtež kuće na kartici: crne linije na belom; na izabranoj (tamnoj) kartici invertovan u belo */
.house-card__img { display: block; width: 100%; height: auto; margin: -4px 0 2px; mix-blend-mode: multiply; }
.house-card[aria-pressed="true"] .house-card__img { filter: invert(1); mix-blend-mode: screen; }
.house-card__name { font-family: var(--ff-head); font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.05; }
.house-card__date { font-size: .86rem; color: rgba(27,22,18,.62); }
.house-card .bezug-badge { font-size: .86rem; }
.house-card__avail { font-size: .92rem; margin-top: auto; padding-top: 6px; }
.house-card__avail strong { font-family: var(--ff-head); font-weight: 400; font-size: 1.15em; }
.house-card[aria-pressed="true"] { background: var(--dark); border-color: var(--dark); color: var(--offwhite); }
.house-card[aria-pressed="true"] .house-card__date,
.house-card[aria-pressed="true"] .bezug-badge { color: rgba(253,253,253,.82); }

.filterbar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-bottom: clamp(30px, 3.4vw, 46px); }
/* Računar: traka sa filterima se lepi ispod zaglavlja dok se lista skroluje (na telefonu je previsoka) */
@media (min-width: 901px) {
  .filterbar {
    position: sticky; top: clamp(82px, 7vw, 104px); z-index: 40;
    background: var(--white); padding: 14px 0;
    box-shadow: 0 .8px 0 rgba(27,22,18,.14);
  }
}
.filterbar label { font-family: var(--ff-head); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.filterbar select, .filterbar input {
  font-family: var(--ff-body); font-weight: 300; font-size: 1rem;
  padding: 11px 15px; border: .8px solid rgba(27,22,18,.22); background: var(--white); color: var(--dark); min-width: 160px;
}
.filterbar select:focus, .filterbar input:focus { outline: 2px solid var(--tan); outline-offset: -2px; }
.filter-count { font-size: .9rem; color: rgba(27,22,18,.66); margin-left: auto; }
.filterbar .toggle {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 11px 15px; border: .8px solid rgba(27,22,18,.22); background: var(--white);
  font-family: var(--ff-body); font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--dark);
  transition: border-color .2s;
}
.filterbar .toggle:hover { border-color: var(--accent); }
.filterbar .toggle input { width: 17px; height: 17px; min-width: 0; margin: 0; padding: 0; border: 0; accent-color: var(--ok); }
.filterbar .toggle:has(input:checked) { border-color: var(--ok); color: var(--ok); }
/* Telefon (11. 10. 2026, korisnik: „zašto je ovako“ — tri reda labela + polje zauzimala su pola ekrana):
   dve kolone, mala labela iznad polja. Red 1: Haus | Zimmer, red 2: Sortieren | Nur verfügbare, ispod broj jedinica. */
@media (max-width: 560px) {
  .filterbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; align-items: end; }
  .filterbar label { font-size: 11px; letter-spacing: .18em; }
  .filterbar select { min-width: 0; width: 100%; padding: 10px 10px; }
  .filterbar label[for="f-haus"] { grid-area: 1 / 1; }
  .filterbar #f-haus { grid-area: 2 / 1; }
  .filterbar label[for="f-zimmer"] { grid-area: 1 / 2; }
  .filterbar #f-zimmer { grid-area: 2 / 2; }
  .filterbar label[for="f-sort"] { grid-area: 3 / 1; margin-top: 8px; }
  .filterbar #f-sort { grid-area: 4 / 1; }
  .filterbar .toggle { grid-area: 4 / 2; justify-self: stretch; padding: 10px 10px; font-size: .95rem; letter-spacing: 0; }
  .filter-count { grid-area: 5 / 1 / 6 / -1; margin: 6px 0 0; }
}

.wtable .col-mob { display: none; }
.wtable .miete-netto { display: none; }   /* Netto als 2. Zeile unter dem Brutto nur auf der Handy-Karte (Desktop: eigene Spalte) */

/* Telefon/tablet: kompaktna kartica u 3 reda umesto 7
   W 101                         ● VERFÜGBAR
   OG · 3.5 Zimmer · 81.69 m² · Aussen 37.30 m²
   CHF 1'870.00                Details  BEWERBEN */
@media (max-width: 1180px) {   /* 10 kolona stane tek od ~1180px; ispod toga kartice (701–1180: dve u redu) */
  .wtable thead { display: none; }
  .wtable, .wtable tbody { display: block; width: 100%; }
  /* Kompaktna kartica u 3 reda (odluka 3. 10.: „da se više stanova vidi odjednom“):
       W 101                         ● VERFÜGBAR
       OG, 3.5 Zimmer, 81.69 m², Aussen 37.30 m²
       CHF 1'870.00 / brutto 2'150.00      Details  BEWERBEN                                              */
  .wtable tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name status" "info info" "miete actions";
    align-items: center; gap: 3px 10px;
    border: 1px solid rgba(27,22,18,.16); margin-bottom: 8px; padding: 9px 12px 10px;
  }
  .wtable td { display: block; border: 0; padding: 0; text-align: left; white-space: normal; line-height: 1.3; }
  .wtable td.col-det { display: none; }
  .wtable td.wname { grid-area: name; font-size: 1.02rem; }
  .wtable td.col-mob { display: block; grid-area: info; font-size: .8rem; color: rgba(27,22,18,.66); }
  .wtable td.col-miete { grid-area: miete; font-family: var(--ff-head); font-size: .95rem; margin-top: 3px; }
  .wtable td.col-miete .miete-netto { display: block; font-family: var(--ff-body); font-size: .74rem; color: rgba(27,22,18,.6); margin: 1px 0 0; white-space: nowrap; }
  .wtable td.col-status { grid-area: status; justify-self: end; }
  .wtable td.col-actions { grid-area: actions; justify-self: end; align-self: end; }
  .wtable .status { padding: 3px 8px 3px 7px; font-size: 11px; letter-spacing: .1em; }
  .wtable tr.is-taken td.col-mob { color: rgba(27,22,18,.6); }
  .row-actions { gap: 10px; }
  .wtable a.detail { font-size: 12px; letter-spacing: .1em; }
  .btn-apply { height: 28px; padding: 0 9px; font-size: 12px; letter-spacing: .08em; }
}
/* Telefon: «Grundriss» und «Details» übereinander, damit die drei Aktionen nicht in den Mietzins laufen */
@media (max-width: 560px) {
  .row-links { flex-direction: column; align-items: flex-end; gap: 6px; }
  .btn-apply { padding: 0 8px; letter-spacing: .06em; }
}
@media (min-width: 701px) and (max-width: 1180px) {
  .wtable tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .wtable tr { margin-bottom: 0; }
  .wtable tr[style*="display: none"] { display: none; }   /* filter sakriva red i u mreži */
}

/* ---------- Detalj stana ---------- */
.unit-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 28px; margin-bottom: 26px; }
.unit-top .breadcrumb { margin-bottom: 0; }
.unit-pager { display: flex; gap: 26px; margin-left: auto; }
.unit-pager a {
  font-family: var(--ff-head); font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); text-decoration: none; white-space: nowrap;
}
.unit-pager a:hover { color: var(--dark); }

/* Mobilna traka „Bewerben" — samo na telefonu, nestaje kad je forma na ekranu */
.mobilebar { display: none; }
@media (max-width: 760px) {
  .mobilebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom));
    background: rgba(253,253,253,.97); backdrop-filter: blur(8px);
    border-top: .8px solid rgba(27,22,18,.2);
    transition: transform .3s ease;
  }
  .mobilebar.is-hidden { transform: translateY(110%); }
  .mobilebar__info { font-size: .9rem; color: rgba(27,22,18,.7); }
  .mobilebar__info strong { display: block; font-family: var(--ff-head); font-weight: 400; font-size: 1.1rem; color: var(--dark); }
  .mobilebar .btn { margin: 0; }
  body:has(.mobilebar) .site-footer { padding-bottom: 76px; }
  body.nav-open .mobilebar { transform: translateY(110%); }
}

.obj-key {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: rgba(27,22,18,.16); border: 1px solid rgba(27,22,18,.16);
  margin-bottom: clamp(34px, 4vw, 54px);
}
/* Besonnung (Wohnungsseite): drei Tage als Kacheln + Schattenbilder mit Schieberegler */
.sonne-tage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(27,22,18,.16); border: 1px solid rgba(27,22,18,.16); margin-bottom: clamp(22px, 3vw, 36px); }
.sonne-tag { background: var(--white); padding: clamp(16px, 2vw, 24px) clamp(14px, 1.8vw, 22px); }
.sonne-tag p { margin: 0; }
.sonne-tag__name { font-family: var(--ff-head); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px !important; }
.sonne-tag__std { font-family: var(--ff-head); font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.1; }
.sonne-tag__zeit { font-size: .92rem; color: rgba(27,22,18,.66); margin-top: 4px !important; }
.sonne-tag__aussen { display: block; font-size: .92rem; margin-top: 8px; padding-top: 8px; border-top: .8px solid rgba(27,22,18,.14); }
.sonne-layout { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: clamp(24px, 3.4vw, 52px); align-items: start; }
.sonne-layout .sonne-tage { grid-template-columns: 1fr; margin-bottom: 0; }
.sonne-layout .section-head { margin-bottom: 0; }
@media (max-width: 900px) { .sonne-layout { grid-template-columns: 1fr; } .sonne-layout .sonne-tage { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sonne-film { margin: 0; }
.sonne-film__bild { position: relative; background: #f5f5f5; }
.sonne-film__bild img { display: block; width: 100%; height: auto; }
.sonne-film__umriss { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sonne-film__umriss path { fill: var(--tan); fill-opacity: .55; stroke: var(--tan-deep); stroke-width: 2.6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sonne-film__steuer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 14px 0 6px; }
.sonne-film__tage { display: flex; gap: 6px; flex-wrap: wrap; }
.sonne-film__tage button { font: 400 12px/1 var(--ff-head); letter-spacing: .14em; text-transform: uppercase; padding: 10px 12px; border: .8px solid rgba(27,22,18,.4); background: transparent; color: var(--dark); cursor: pointer; }
.sonne-film__tage button[aria-pressed="true"] { background: var(--dark); border-color: var(--dark); color: var(--offwhite); }
.sonne-film__zeitleiste { display: flex; align-items: center; gap: 12px; flex: 1 1 320px; min-width: 0; }
.sonne-film__zeitleiste input[type="range"] { flex: 1; min-width: 0; accent-color: var(--tan-deep); }
.sonne-film__zeit { font-family: var(--ff-head); font-size: 13px; letter-spacing: .08em; white-space: nowrap; min-width: 150px; }
.sonne-film__play { width: 38px; height: 38px; flex: none; border: .8px solid var(--dark); background: transparent; cursor: pointer; display: grid; place-items: center; }
.sonne-film__play span { width: 0; height: 0; border-left: 10px solid var(--dark); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 2px; }
.sonne-film__play.is-an span { width: 10px; height: 12px; border: 0; margin: 0; border-left: 3px solid var(--dark); border-right: 3px solid var(--dark); }
.sonne-film figcaption { font-size: .82rem; color: rgba(27,22,18,.6); margin-top: 6px; }
@media (max-width: 700px) {
  .sonne-tage, .sonne-layout .sonne-tage { grid-template-columns: 1fr; }
  .sonne-tag { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: baseline; }
  .sonne-tag__name { grid-column: 1 / -1; }
  .sonne-tag__zeit { margin-top: 0 !important; text-align: right; }
  .sonne-tag__aussen { grid-column: 1 / -1; }
  .sonne-film__zeit { min-width: 0; }
  .sonne-film__bild { margin: 0 calc(-1 * var(--gut)); }
  .sonne-film__tage { width: 100%; flex-wrap: nowrap; }
  .sonne-film__tage button { flex: 1; padding: 10px 4px; font-size: 11px; letter-spacing: .06em; }
}
@media print { #sonne .sonne-film__steuer { display: none; } }

/* Stranica stana: ključni podaci levo, crtež kuće desno (≤ 900 px: crtež iznad podataka) */
.unit-intro { display: grid; grid-template-columns: 1fr 300px; gap: clamp(22px, 3vw, 44px); align-items: start; margin-bottom: clamp(34px, 4vw, 54px); }
.unit-intro .obj-key { margin-bottom: 0; }
.house-sketch--unit { width: 100%; }
.house-sketch--unit figcaption { font-family: var(--ff-head); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); text-align: center; margin-top: 6px; }
@media (max-width: 900px) {
  .unit-intro { grid-template-columns: 1fr; }
  .house-sketch--unit { order: -1; max-width: 340px; margin: 0 auto; }
}
.obj-key div { background: var(--white); padding: 24px 20px; }
.obj-key dt { font-family: var(--ff-head); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.obj-key dd { margin: 0; font-family: var(--ff-head); font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.1; }

/* ---------- Kontakt osobe ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(22px, 2.6vw, 38px); }
.person { border-top: 1px solid rgba(27,22,18,.2); padding-top: 26px; }
.section--dark .person, .section--tan .person { border-top-color: rgba(253,253,253,.28); }
.person h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); margin-bottom: .5rem; }
.person .role { font-size: .95rem; color: rgba(27,22,18,.62); margin-bottom: 1.1em; line-height: 1.45; }
.section--dark .person .role, .section--tan .person .role { color: rgba(253,253,253,.72); }
.person a { color: var(--accent); text-decoration: none; }
.section--dark .person a, .section--tan .person a { color: var(--offwhite); }
.person a:hover { text-decoration: underline; }
.person .line { display: block; margin-bottom: 5px; }

/* ---------- Formular ---------- */
.form { max-width: 820px; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 24px 30px; }
@media (min-width: 680px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--ff-head); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.field input, .field textarea {
  font-family: var(--ff-body); font-weight: 300; font-size: 1rem;
  padding: 13px 0; border: 0; border-bottom: 1px solid rgba(27,22,18,.26);
  background: transparent; color: var(--dark);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); } /* 2px linija: jasan fokus bez pomeranja rasporeda */

.radiogroup { grid-column: 1 / -1; margin-top: 8px; }
.radiogroup > span.legend { display: block; font-family: var(--ff-head); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 15px; }
.radiolist { display: flex; flex-wrap: wrap; gap: 11px 13px; }
.radiolist label {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border: .8px solid rgba(27,22,18,.22);
  cursor: pointer; transition: border-color .2s;
}
.radiolist label:hover { border-color: var(--accent); }
.radiolist input { accent-color: var(--accent); margin: 0; }
.form .btn { margin-top: 38px; }
.form-note { margin-top: 20px; }
.radiogroup--half { grid-column: auto; }
.btn--solid { background: var(--dark); color: var(--offwhite); border-color: var(--dark); }
.btn--solid:hover { background: transparent; color: var(--dark); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8em; }
.unit-state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 1.4em; }

/* ---------- Prijava za stan ---------- */
.apply-grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 72px); align-items: start; }
@media (min-width: 1000px) { .apply-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.apply-summary {
  background: var(--white); border: .8px solid rgba(27,22,18,.2);
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px); margin-bottom: clamp(28px, 3vw, 40px);
}
.apply-summary .eyebrow { margin-bottom: .7rem; }
.apply-summary__unit { font-family: var(--ff-head); font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.1; margin: 0 0 .4em; }
.apply-summary__meta { margin: 0; color: rgba(27,22,18,.72); }
.apply-aside { border-top: .8px solid rgba(27,22,18,.3); padding-top: 26px; }
@media (min-width: 1000px) { .apply-aside { position: sticky; top: clamp(96px, 8vw, 128px); } }
.people--stack { grid-template-columns: 1fr; }

.check { display: flex; gap: 13px; align-items: flex-start; margin-top: 30px; cursor: pointer; font-size: .96rem; line-height: 1.45; }
.check input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); }
.check a { color: inherit; }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.field-error { display: block; margin-top: 8px; font-size: .86rem; color: var(--taken); }
.form [aria-invalid="true"] { border-bottom-color: var(--taken) !important; }
.form-status:empty { display: none; }
.form-status { margin-top: 18px; padding: 14px 16px; border-left: 2px solid currentColor; font-size: .95rem; }
.form-status.is-error { color: var(--taken); background: rgba(163,71,59,.07); }
.form-status.is-info  { color: var(--accent); background: rgba(118,101,80,.08); }
.form button[disabled] { opacity: .55; cursor: wait; }
.form-success { background: var(--white); border: .8px solid rgba(27,22,18,.2); padding: clamp(28px, 3.4vw, 46px); }
.form-success h3 { font-size: clamp(1.4rem, 2.3vw, 2rem); margin-bottom: .6em; }
.form-success::before { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); margin-bottom: 20px; }

/* ---------- Brza prijava iz liste stanova (kartica sa desne strane) ---------- */
.apply-dialog {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: clamp(28px, 4vw, 46px) clamp(22px, 3.4vw, 44px) 40px;
  width: min(580px, 100%); max-width: 100%; height: 100%; max-height: 100%;
  border: 0; border-left: .8px solid rgba(27,22,18,.2);
  background: var(--white); color: var(--dark); overflow-y: auto; overscroll-behavior: contain;
}
.apply-dialog[open] { animation: bd-rein .35s ease; }
@keyframes bd-rein { from { transform: translateX(48px); opacity: 0; } }
.apply-dialog::backdrop { background: rgba(27,22,18,.55); }
body:has(.apply-dialog[open]) { overflow: hidden; }
.apply-dialog__close {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; cursor: pointer;
  background: none; border: .8px solid rgba(27,22,18,.3); font-size: 22px; line-height: 1;
  transition: background .2s, color .2s;
}
.apply-dialog__close:hover { background: var(--dark); color: var(--offwhite); }
.apply-dialog .eyebrow { margin-bottom: .9rem; }
.apply-dialog__title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.05; margin: 0 52px .5em 0; }
.apply-dialog__meta { margin: 0 0 .5em; color: rgba(27,22,18,.72); }
.apply-dialog__links { margin: 0 0 clamp(22px, 2.6vw, 30px); padding-bottom: clamp(18px, 2.2vw, 24px); border-bottom: .8px solid rgba(27,22,18,.2); }
.apply-dialog__links a { color: var(--accent); font-size: .95rem; }
.apply-dialog .form-grid { grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.apply-dialog .bd-gruppe { display: contents; border: 0; margin: 0; padding: 0; }
.apply-dialog .bd-gruppe[hidden] { display: none; }
.apply-dialog .field textarea { min-height: 84px; }
.apply-dialog .check { margin-top: 24px; font-size: .9rem; }
.apply-dialog .form .btn, .apply-dialog .btn { margin-top: 26px; width: 100%; }
/* Telefon: sve preko cele širine, samo kratka polja (Erwachsene/Kinder, Firma/Nutzung) jedno pored drugog */
@media (max-width: 480px) {
  .apply-dialog .form-grid { gap: 16px 18px; }
  .apply-dialog .form-grid > .field { grid-column: 1 / -1; }
}

/* ---------- Slične jedinice (kod izdatog stana) ---------- */
.similar { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.similar-card {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 22px 20px; background: var(--white); border: .8px solid rgba(27,22,18,.2);
  text-decoration: none; color: var(--dark); transition: border-color .2s;
}
.similar-card:hover { border-color: var(--dark); }
.similar-card__name { font-family: var(--ff-head); font-size: 1.3rem; line-height: 1.1; }
.similar-card__meta { font-size: .92rem; color: rgba(27,22,18,.65); }
.similar-card__price { font-family: var(--ff-head); margin: 4px 0 8px; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid rgba(27,22,18,.16); }
.faq details { border-bottom: 1px solid rgba(27,22,18,.16); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 46px 24px 0; position: relative; font-family: var(--ff-head); font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--accent); }
.faq details[open] summary::after { content: "\2013"; }
.faq .answer { padding: 0 0 28px; max-width: 68ch; color: rgba(27,22,18,.75); }

/* ---------- Podnožje ---------- */
/* Original: linija preko vrha, vertikalna podela na ~58%, linija iznad donje trake.
   Sadržaj je uvučen 41px, linije idu od ivice do ivice. */
.site-footer {
  background: var(--dark); color: var(--offwhite);
  border-top: .8px solid var(--rule);
  padding-block: 0;
}
.site-footer > .wrap { max-width: none; padding-inline: clamp(20px, 2.9vw, 41px); }
.footer-grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(34px, 4vw, 58px);
  padding-block: clamp(48px, 5.4vw, 78px);
}
/* Footer: links Logo + Navigation, Mitte Karte (unten bündig), rechts Adressen (an den rechten Rand) */
.footer-karte { order: 3; }
@media (min-width: 820px) {
  .footer-grid { grid-template-columns: 58% 1fr; gap: 0; }
  .footer-adressen {
    border-left: .8px solid var(--rule);
    padding-left: clamp(26px, 3.4vw, 50px);
  }
  .footer-karte { grid-column: 1 / -1; margin-top: clamp(34px, 4vw, 50px); }
}
@media (min-width: 1100px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 1.25fr) minmax(0, 1fr); align-items: stretch; }
  .footer-karte { order: 0; grid-column: auto; margin-top: 0; align-self: end; padding-inline: clamp(20px, 2.6vw, 40px); }
  .footer-adressen { justify-self: end; width: 100%; max-width: 360px; }
}
.footer-karte__bild { display: block; background: #fdfdfd; border: .8px solid var(--rule); }
.footer-karte__bild img { display: block; width: 100%; height: auto; transition: opacity .25s; }
.footer-karte__bild:hover img { opacity: .9; }
.site-footer .footer-karte__text { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin: 14px 0 0; }
.site-footer .footer-karte__text a { text-decoration: underline; text-underline-offset: 4px; }
.site-footer .footer-karte__osm { margin: 6px 0 0; font-size: 11px; color: rgba(253,253,253,.6); }
.site-footer .logo img, .site-footer .logo svg { height: clamp(62px, 6vw, 86px); width: auto; filter: brightness(0) invert(1); margin-bottom: 24px; }
.site-footer p { font-size: 14px; line-height: 1.6; color: rgba(253,253,253,.8); }
.site-footer h4 { font-family: var(--ff-head); font-weight: 400; font-size: 16px; letter-spacing: .3em; text-transform: uppercase; color: var(--tan); margin-bottom: 18px; }
.site-footer .footer-h4-2 { margin-top: clamp(28px, 3.4vw, 46px); }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--tan); }
.footer-nav { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: 11px; }
.footer-nav a { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: rgba(253,253,253,.85); }
.footer-bottom {
  margin-top: 0; padding-block: 26px;
  border-top: .8px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; align-items: center;
  font-size: 13px; color: rgba(253,253,253,.8);
}
.footer-bottom nav { display: flex; gap: clamp(24px, 4vw, 62px); flex-wrap: wrap; order: -1; }
.footer-bottom nav a { text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom .copy { text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Ostalo ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--tan); outline-offset: 3px; }
section[id], [id="liste"] { scroll-margin-top: clamp(96px, 8vw, 128px); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--white); color: var(--dark); padding: 12px 20px; }
.skip:focus { left: 10px; top: 10px; }
.todo { display: inline-block; background: #fff4d6; border: 1px dashed #c9a227; color: #7a5c00; padding: 2px 9px; font-size: .8rem; }
.breadcrumb { font-family: var(--ff-head); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 26px; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--dark); }

/* Blago pojavljivanje pri skrolu (klasu dodaje JS samo za elemente ispod ekrana) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.cards .card.reveal:nth-child(2), .figures__grid .figure.reveal:nth-child(2), .gallery figure.reveal:nth-child(4n+2) { transition-delay: .1s; }
.cards .card.reveal:nth-child(3), .figures__grid .figure.reveal:nth-child(3), .gallery figure.reveal:nth-child(4n+3) { transition-delay: .2s; }
.cards .card.reveal:nth-child(4), .gallery figure.reveal:nth-child(4n+4) { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero__media img { animation: none; }
  .btn-anfragen--pulse::before, .btn-anfragen--pulse::after { animation: none; opacity: 0; }
  @view-transition { navigation: none; }
}

/* ---------- /wohnungen kao hausdergaerten.ch/wohnungen (9. 10. 2026) ----------
   1) kartice kuća na tan podlozi (kao tan sekcija na originalu): beli crteži, bela slova; izabrana kuća svetla
   2) lista na blago sivom (beige) dnu, redovi kao svetle trake, crtež kuće bez belog pravougaonika (multiply)
   3) telefon: crtež kuće se lepi ispod zaglavlja dok se stanovi listaju, dodir na stan ga boji na crtežu */
.section--haeuser { background: var(--tan); color: var(--offwhite); padding-top: clamp(34px, 4vw, 64px); padding-bottom: clamp(26px, 3vw, 46px); }
.section--haeuser .house-cards__note { color: rgba(253,253,253,.88); margin-bottom: 0; }
.section--haeuser .house-card { background: transparent; border-color: rgba(253,253,253,.5); color: var(--offwhite); }
.section--haeuser .house-card:hover { border-color: var(--offwhite); background: rgba(253,253,253,.06); }
/* crtež: crne linije na belom → invert = bele linije na crnom → screen = bele linije na tan podlozi */
.house-card__img--weiss { display: none; }
.section--haeuser .house-card__img { display: none; }
.section--haeuser .house-card__img--weiss { display: block; mix-blend-mode: normal; filter: none; }
.section--haeuser .house-card__date, .section--haeuser .house-card .bezug-badge { color: rgba(253,253,253,.88); }
.section--haeuser .house-card .bezug-badge::before { background: var(--offwhite); }
.section--haeuser .house-card .bezug-badge.is-ready { color: var(--offwhite); }
/* izabrana kuća: svetla kartica, tamna slova i crtež */
.section--haeuser .house-card[aria-pressed="true"] { background: var(--offwhite); border-color: var(--offwhite); color: var(--dark); }
.section--haeuser .house-card[aria-pressed="true"] .house-card__img { display: block; filter: none; mix-blend-mode: multiply; }
.section--haeuser .house-card[aria-pressed="true"] .house-card__img--weiss { display: none; }
.section--haeuser .house-card[aria-pressed="true"] .house-card__date,
.section--haeuser .house-card[aria-pressed="true"] .bezug-badge { color: var(--accent); }
.section--haeuser .house-card[aria-pressed="true"] .bezug-badge::before { background: var(--tan); }
.intro-split--ohne-abstand { margin-bottom: 0; }

.liste-sektion { --zeile: #f4f2ef; --zeile-hover: #fbfaf8; --zeile-sel: #d9d0c4; }
@media (min-width: 901px) { .liste-sektion .filterbar { background: var(--beige); } }
/* sticky element izoluje blend → podloga u istom sloju, pa beli papir crteža postaje bež */
.liste-sektion .house-sketch__bild { background: var(--beige); }
.liste-sektion .house-sketch img { mix-blend-mode: multiply; }
.liste-sektion .house-head { border-bottom: 0; padding-bottom: 6px; }
.liste-sektion .house-block { scroll-margin-top: calc(var(--kopf-h, 80px) + 24px); }
@media (min-width: 901px) { .liste-sektion .house-block { scroll-margin-top: calc(var(--kopf-h, 104px) + 110px); } }
/* računar: redovi kao svetle trake sa razmakom (kao original) */
@media (min-width: 1181px) {
  .liste-sektion .wtable { border-collapse: separate; border-spacing: 0 5px; }
  .liste-sektion .wtable thead th { border-bottom: 0; }
  .liste-sektion .wtable td { background: var(--zeile); border-bottom: 0; transition: background .18s; padding-top: 8px; padding-bottom: 8px; }
  /* kompaktnije (kao original): netto + brutto u dva reda; NK su u brutto sadržane i stoje na stranici stana */
  .liste-sektion .wtable .col-miete .miete-nk { display: none; }
  .liste-sektion .wtable .col-miete .miete-netto { line-height: 1.25; margin-top: 2px; }
  .liste-sektion .row-links { gap: 3px; }
  .liste-sektion .wtable td:first-child, .liste-sektion .wtable thead th:first-child { padding-left: 14px; }
  .liste-sektion .wtable td:last-child { padding-right: 14px; }
  .liste-sektion .wtable tbody tr:hover { background: transparent; }
  .liste-sektion .wtable tbody tr:hover td { background: var(--zeile-hover); }
  .liste-sektion .wtable tbody tr.is-sel, .liste-sektion .wtable tbody tr.is-sel:hover { background: transparent; }
  .liste-sektion .wtable tbody tr.is-sel td { background: var(--zeile-sel); }
}
/* tablet i telefon: manje kartice (svetla traka bez okvira) */
@media (max-width: 1180px) {
  .liste-sektion .wtable tr { background: var(--zeile); border: 0; margin-bottom: 5px; padding: 7px 10px 8px; gap: 2px 10px; transition: background .18s; }
  .liste-sektion .wtable tr.is-sel { background: var(--zeile-sel); }
  .liste-sektion .wtable td.wname { font-size: .96rem; }
  .liste-sektion .wtable td.col-mob { font-size: .76rem; }
  .liste-sektion .wtable td.col-miete { font-size: .9rem; margin-top: 2px; }
  .liste-sektion .wtable td.col-miete .miete-netto { font-size: .7rem; }
  .liste-sektion .wtable .status { padding: 2px 7px 2px 6px; font-size: 10px; }
  .liste-sektion .wtable a.detail { font-size: 11px; }
  .liste-sektion .btn-apply { height: 26px; padding: 0 8px; font-size: 11px; }
}
@media (max-width: 700px) {
  /* crtež kuće ostaje vidljiv dok se listaju stanovi te kuće; --kopf-h postavlja site.js (visina zaglavlja) */
  .liste-sektion .house-block > .house-sketch {
    position: sticky; top: var(--kopf-h, 66px); z-index: 6; background: var(--beige);
    margin: 0 calc(-1 * var(--gut)) 4px; padding: 6px var(--gut) 4px; width: auto;
  }
  .liste-sektion .house-sketch__bild { width: min(100%, calc(30vh * 4 / 3)); margin: 0 auto; }
  .liste-sektion .row-links { gap: 3px; }
}

/* ---------- Štampa: stranica stana kao exposé (dugme „Exposé drucken“), ostale stranice bez menija/footera ---------- */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.35; overflow: visible; }
  .site-header, .nav-overlay, .site-footer, .cta, .quoteband, .statusbar, .mobilebar, .skip,
  .unit-pager, .btn-row, .lightbox, .apply-dialog, .form, .link-more, .house-cards, .house-cards__note,
  .filterbar, .filter-count, .section--sand, .similar, #bewerbung .section-head, .footer-karte, [data-print] { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero { min-height: 0; height: 62mm; page-break-inside: avoid; }
  .hero__media img { animation: none; transform: none; }
  .hero__inner { padding: 8mm 0; }
  .hero::after { background: rgba(0,0,0,.4); }
  .hero--page h1 { font-size: 24pt; }
  .section { padding-block: 7mm; }
  .section--beige, .section--grey, .section--sand { background: #fff; }
  .wrap { max-width: none; padding-inline: 0; }
  .unit-top { margin-bottom: 4mm; }
  .obj-key { gap: 2mm; margin-bottom: 6mm; }
  .obj-key div { border: .5pt solid #bbb; padding: 3mm 4mm; }
  .obj-key dd { font-size: 13pt; }
  .split { display: block; }
  .split .media { display: none; }
  h2 { font-size: 18pt; }
  .eyebrow { font-size: 9pt; margin-bottom: 3mm; }
  #grundriss { page-break-before: always; }
  .plan-figure a { border: 0; padding: 0; }
  .plan-figure img { max-height: 170mm; width: auto; max-width: 100%; margin-inline: auto; }
  .plan-figure figcaption a { display: none; }
  .speclist ul { columns: 2; }
  .apply-grid { display: block; }
  .apply-aside { border: 0; padding: 0; }
  .people, .people--stack { grid-template-columns: 1fr 1fr; }
  a { color: inherit; text-decoration: none; }
  .status, .bezug-badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Kontrast auf Beige (WCAG AA): Eyebrows, Formular-Labels, Legenden */
.section--beige .eyebrow, .cta--beige .eyebrow,
.section--beige .field label, .section--beige .radiogroup > span.legend,
.section--beige .filterbar label { color: var(--accent-deep); }