/* ============================================================ BASE — Blitz & Glanz Gebäudereinigung Globalni stilski sloj: fontovi, reset, tipografija, layout, komponente. Troši varijable iz tokens.css. ============================================================ */ /* ---------- Fontovi (self-hosted, bez local() — G3) ---------- */ @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/nunito-sans-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/nunito-sans-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/nunito-sans-latin-700-normal.woff2") format("woff2"); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--h-header) + 1rem); -webkit-text-size-adjust: 100%; } body { font-family: var(--ff-body); font-size: 1rem; line-height: var(--lh-body); color: var(--c-ink); background: var(--c-paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video { display: block; max-width: 100%; } /* Bez ovoga se slika s atributima width/height stisne po sirini, a visina ostane iz atributa — slika izgleda razvucena u visinu. Pravila koja svjesno postavljaju visinu (.hero__media img, .svc__media img, .vn-half img) su specificnija i i dalje vaze. */ img { height: auto; } input, button, textarea, select { font: inherit; } ul[class], ol[class] { list-style: none; padding: 0; } /* ---------- Tipografija ---------- */ h1, h2, h3 { font-family: var(--ff-display); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--c-navy); text-wrap: balance; /* 🔴 Njemacke slozenice ("Treppenhausreinigung", "Datenschutzerklärung") su kao JEDNA rijec sire od 360px ekrana i gurale su cijelu stranicu u horizontalni scroll. break-word je sigurnosna mreza — pali se samo kad rijec stvarno ne stane, pa siri ekrani izgledaju nepromijenjeno. */ overflow-wrap: break-word; } /* Na uskim ekranima predugu rijec lomimo s crticom, ne nasumicno usred rijeci. `hyphens: auto` koristi njemacki rjecnik jer je . */ @media (max-width: 599px) { h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; } } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } .lead { font-size: var(--fs-lead); color: var(--c-body); } a { color: var(--c-navy); text-decoration-color: var(--c-gold); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--t-fast) var(--ease-out); } a:hover { color: var(--c-gold-deep); } strong { font-weight: 700; } ::selection { background: var(--c-gold); color: var(--c-dark); } /* ---------- Fokus (vidljiv, nikad ugašen) ---------- */ :focus-visible { outline: 3px solid var(--c-navy); outline-offset: 3px; border-radius: 2px; } .site-header :focus-visible, .section--dark :focus-visible, .site-footer :focus-visible, .mobile-bar :focus-visible, .hero :focus-visible, .nap-card :focus-visible { outline-color: var(--c-gold-bright); } /* ---------- Skip link ---------- */ .skip-link { position: fixed; top: .75rem; left: .75rem; z-index: var(--z-skip); transform: translateY(-400%); background: var(--c-dark); color: #fff; padding: .8rem 1.3rem; border-radius: var(--r-sm); text-decoration: none; font-weight: 700; transition: transform var(--t-fast) var(--ease-out); } .skip-link:focus-visible { transform: translateY(0); } /* ---------- Skriveno polje forme (CSS, bez type=hidden) ---------- */ .hp-feld { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; } /* ---------- Layout pomagala ---------- */ .wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--section-y); } .section--warm { background: var(--c-paper-warm); } .section--dark { background: var(--c-dark); color: var(--a-white-70); } .section--dark h2, .section--dark h3 { color: #fff; } .section-head { max-width: 52rem; margin-inline: auto; text-align: center; margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.25rem); } .section-head p { margin-top: 1.1rem; font-size: var(--fs-lead); color: var(--c-body); } .section--dark .section-head p { color: var(--a-white-70); } .flow > * + * { margin-top: 1em; } .flow h2 { margin-top: 2em; } .flow h3 { margin-top: 1.5em; } .page-offset { padding-top: calc(var(--h-header) + var(--section-y)); } /* ---------- Eyebrow (zlatna tačka + verzal) ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: .65rem; font-size: .8rem; font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-gold-deep); margin-bottom: 1.15rem; } .eyebrow::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c-gold); flex-shrink: 0; } .section--dark .eyebrow, .hero .eyebrow { color: var(--c-gold); } /* ---------- Ikone ---------- */ .icon { width: 1.25rem; height: 1.25rem; fill: currentColor; flex-shrink: 0; } .stars { display: inline-flex; gap: .18rem; color: var(--c-gold); } .stars .icon { width: 1.05rem; height: 1.05rem; } /* ---------- Dugmad ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .95rem 1.9rem; border-radius: var(--r-pill); font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .btn:hover { transform: translateY(-2px); } .btn .icon { width: 1.05em; height: 1.05em; } .btn--gold { background: var(--c-gold); color: var(--c-dark); } .btn--gold:hover { background: var(--c-gold-bright); color: var(--c-dark); } .btn--ghost { background: transparent; color: #fff; border-color: var(--a-white-30); } .btn--ghost:hover { border-color: var(--c-gold-bright); color: var(--c-gold-bright); } .btn--ghost-navy { background: transparent; color: var(--c-navy); border-color: #24346259; } .btn--ghost-navy:hover { border-color: var(--c-gold-deep); color: var(--c-gold-deep); } /* ---------- Header (fiksni, zatamnjena navy sa blurom) ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); background: #040813d9; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--a-white-10); } .site-header__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--h-header); } .brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; } .brand__mark { width: auto; height: 2.5rem; flex: none; display: block; } /* Bez podnaslova blok sadrzi samo ime, pa ga `align-items: center` na .brand sam poravna sa desktop navigacijom i telefonom. */ .brand__text { display: flex; align-items: center; } .brand__name { font-family: var(--ff-display); font-weight: 600; font-size: 1.5rem; color: #fff; letter-spacing: .01em; white-space: nowrap; line-height: 1; } .brand__name .amp { color: var(--c-gold); } .site-nav { display: flex; gap: clamp(1.1rem, 2vw, 2rem); } .site-nav a { color: var(--a-white-70); text-decoration: none; font-size: .93rem; font-weight: 600; letter-spacing: .02em; padding: .35rem 0; } .site-nav a:hover { color: var(--c-gold-bright); } .header-tel { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.15rem; border-radius: var(--r-pill); border: 1px solid var(--a-white-30); color: #fff; text-decoration: none; font-weight: 700; font-size: .93rem; white-space: nowrap; transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .header-tel:hover { border-color: var(--c-gold-bright); color: var(--c-gold-bright); } .header-tel .icon { width: 1rem; height: 1rem; color: var(--c-gold); } /* ---------- Hamburger i mobilni meni (2026-08-28) ---------- */ /* Dugme se pojavljuje tek kad je JS ziv — inace bi bilo mrtvo. */ .menue-knopf { display: none; } .menue-bereit .menue-knopf { display: none; flex-direction: column; align-items: center; gap: .15rem; flex: none; padding: .25rem .1rem; background: none; border: 0; color: #fff; cursor: pointer; font: inherit; } .menue-knopf__icon { width: 1.45rem; height: 1.45rem; display: block; } .menue-knopf__wort { font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--a-white-70); line-height: 1; } .menue-knopf:hover .menue-knopf__icon, .menue-knopf:focus-visible .menue-knopf__icon { color: var(--c-gold-bright); } .menue-panel { position: fixed; inset: 0; z-index: 160; display: flex; flex-direction: column; background: var(--c-dark); overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); } .menue-panel[hidden] { display: none; } .menue-offen { overflow: hidden; } .menue-panel__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem var(--gutter); border-bottom: 1px solid var(--a-white-10); min-height: var(--h-header); } .menue-panel__titel { font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--a-white-70); } .menue-panel__zu { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; background: none; border: 1px solid var(--a-white-20); border-radius: var(--r-sm); color: #fff; cursor: pointer; } .menue-panel__zu .icon { width: 1.15rem; height: 1.15rem; } .menue-panel__zu:hover, .menue-panel__zu:focus-visible { border-color: var(--c-gold-bright); color: var(--c-gold-bright); } .menue-panel__nav { flex: 1; padding: 1.2rem var(--gutter) 2rem; } ul.menue-liste { display: flex; flex-direction: column; gap: 1.3rem; } .menue-liste__top { display: block; font-family: var(--ff-display); font-size: 1.5rem; font-weight: 600; color: #fff; text-decoration: none; line-height: 1.1; } .menue-liste__top:hover, .menue-liste__top:focus-visible { color: var(--c-gold-bright); } ul.menue-liste__unter { display: flex; flex-direction: column; gap: .55rem; margin-top: .7rem; padding-left: .9rem; border-left: 1px solid var(--a-white-10); } .menue-liste__unter a { color: var(--a-white-70); text-decoration: none; font-size: .95rem; } .menue-liste__unter a:hover, .menue-liste__unter a:focus-visible { color: #fff; } .menue-liste__mehr { font-weight: 700; color: var(--c-gold) !important; } .menue-panel__fuss { padding: 1.1rem var(--gutter) 1.6rem; border-top: 1px solid var(--a-white-10); } .menue-panel__tel { display: flex; align-items: center; justify-content: center; gap: .55rem; padding: .8rem 1rem; border-radius: var(--r-pill); background: var(--c-gold); color: var(--c-dark); font-weight: 700; text-decoration: none; } .menue-panel__tel .icon { width: 1.05rem; height: 1.05rem; } @media (max-width: 960px) { .site-nav { display: none; } /* Hamburger preuzima tacno tamo gdje desktop navigacija nestaje. */ .menue-bereit .menue-knopf { display: inline-flex; } } @media (max-width: 767px) { /* Mreza 1fr / auto / 1fr: brend lijevo, telefon TACNO u sredini, hamburger desno. Sa `space-between` bi telefon bio pomjeren za pola razlike izmedju brenda i hamburgera (izmjereno: 19 px udesno), jer flex dijeli slobodan prostor, ne centrira. */ .site-header__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; } .brand { justify-self: start; } .header-tel { justify-self: center; } .menue-bereit .menue-knopf { justify-self: end; } .brand { flex-direction: column; align-items: center; gap: .25rem; } .brand__mark { height: 1.85rem; } .brand__name { font-size: .95rem; } .brand__text { text-align: center; } .header-tel { padding: .5rem .8rem; font-size: .82rem; gap: .35rem; } } @media (max-width: 420px) { .header-tel { padding: .45rem .7rem; font-size: .78rem; } .brand__name { font-size: .88rem; } } @media (prefers-reduced-motion: reduce) { .menue-panel { scroll-behavior: auto; } } /* ---------- Hero ---------- */ .hero { position: relative; display: flex; align-items: flex-end; min-height: 640px; min-height: 100svh; background: var(--c-dark); overflow: hidden; } .hero__media { position: absolute; inset: 0; } .hero__media picture, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; } .hero__media img { object-fit: cover; object-position: center; } /* Zatamnjenje preko hero fotografije. Posvijetljeno 04.09.2026 na zahtjev PO („malkice svjetlije") — svaka tacka gradijenta je spustena za oko 10 postotnih poena neprozirnosti. 🔴 Ovo je jedini sloj koji drzi citljivost bijelog teksta preko fotografije. Mjereno na najsvjetlijoj tacki ispod svakog teksta (canvas simulacija): h1 5,1:1 lead 5,8:1 trust traka 8,5:1 Prije izmjene je bilo 7,0 / 7,2 / 9,2. Minimum je 4,5:1 (WCAG 2.2 AA za normalan tekst). Ako se ide jos svjetlije, `lead` pada ispod granice — ponovo izmjeriti prije bilo kakve dalje promjene, ne procjenjivati okom. */ .hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, #040813c2 0%, #0408136b 52%, #04081333 100%), linear-gradient(180deg, #0408135c 0%, #04081330 40%, #040813a6 78%, #040813e0 100%); } .hero__in { position: relative; z-index: 1; width: 100%; padding-top: calc(var(--h-header) + 3rem); padding-bottom: clamp(2.75rem, 6vh, 5rem); } .hero h1 { color: #fff; max-width: 46rem; margin-bottom: 1.4rem; } .hero__lead { max-width: 40rem; color: var(--a-white-70); font-size: var(--fs-lead); margin-bottom: 2.2rem; } .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.75rem; } .hero__trust { display: flex; flex-wrap: wrap; gap: .8rem 2.2rem; padding-top: 1.5rem; border-top: 1px solid var(--a-white-20); } .hero__trust li { display: inline-flex; align-items: center; gap: .55rem; color: var(--a-white-70); font-size: .92rem; font-weight: 600; } .hero__trust .icon { width: 1.05rem; height: 1.05rem; color: var(--c-gold); } /* 🔴 Cilj (PO 04.09.2026): na telefonu se iznad pregiba mora vidjeti CIJELI hero, ukljucujuci social proof — dakle sve do sekcije „Kennen Sie das?". Dvije prepreke: fiksni header gore (4,25rem) i fiksna Schnellkontakt traka dolje (~66px). Zato je razmak gore smanjen, razmak dolje POVECAN toliko da traka ne prekrije zadnju stavku, a unutrasnji razmaci stisnuti da sadrzaj uopste stane. Izmjereno poslije izmjene: 375x812 -> cijeli hero staje iznad trake. Ako se hero-u doda jos jedan red teksta, ovo ponovo izmjeriti. */ @media (max-width: 767px) { .hero__in { padding-top: calc(var(--h-header) + .75rem); /* 66px = visina .mobile-bar; +.75rem da zadnji red ne dodiruje traku */ padding-bottom: calc(66px + .75rem); } .hero__lead { margin-bottom: 1.4rem; } .hero__cta { margin-bottom: 1.6rem; } .hero__trust { padding-top: 1rem; gap: .55rem 1.6rem; } /* Stavke se na uskom ekranu lome u dva reda; ikona tada mora stajati uz prvi red, a ne po sredini oba. */ .hero__trust li { align-items: flex-start; } .hero__trust .icon { flex: 0 0 auto; margin-top: .15rem; } } /* Niski telefoni (npr. 360x640). Tu ni smanjeni razmaci nisu dovoljni — sadrzaj je previsok — pa se na TAKO niskim ekranima dodatno smanjuju naslov i uvodni tekst. Uslov je visina ekrana, ne sirina: isti telefon u vodoravnom polozaju ima drugi problem i ne smije dobiti ovo pravilo. */ @media (max-width: 767px) and (max-height: 720px) { .hero h1 { font-size: 1.95rem; margin-bottom: .75rem; } .hero__lead { font-size: .95rem; margin-bottom: .9rem; } .hero__cta { gap: .55rem; margin-bottom: 1rem; } .hero__trust { padding-top: .8rem; gap: .4rem 1.2rem; } .hero__trust li { font-size: .84rem; } .hero__trust .icon { width: .95rem; height: .95rem; } } /* ---------- Kartice bolnih tačaka ---------- */ .pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1.25rem; } .pain-card { background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 1.8rem; box-shadow: var(--shadow-soft); } .pain-card .icon-ring { width: 2.7rem; height: 2.7rem; border-radius: 50%; background: #bba33926; color: var(--c-gold-deep); display: grid; place-items: center; margin-bottom: 1.15rem; } .pain-card .icon-ring .icon { width: 1.2rem; height: 1.2rem; } .pain-card h3 { font-family: var(--ff-body); font-size: 1.06rem; font-weight: 700; letter-spacing: 0; line-height: 1.35; margin-bottom: .6rem; } .pain-card p { color: var(--c-body); font-size: .96rem; } .pain-answer { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); text-align: center; } .pain-answer p { font-size: var(--fs-lead); color: var(--c-navy); max-width: 46rem; margin-inline: auto; margin-bottom: 1.6rem; } /* ---------- Numerisani redovi usluga (01–07) ---------- */ .svc { border-top: 1px solid var(--c-border); } .svc__row { display: grid; grid-template-columns: auto 1fr minmax(230px, 300px); gap: clamp(1.4rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(1.75rem, 1.4rem + 2vw, 2.9rem); border-bottom: 1px solid var(--c-border); } .svc__num { font-family: var(--ff-display); font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); color: var(--c-gold); line-height: 1; min-width: 3.4rem; } .svc__body h3 { margin-bottom: .55rem; } .svc__body p { color: var(--c-body); max-width: 46rem; } .svc__more { display: flex; flex-wrap: wrap; gap: .35rem 1.6rem; margin-top: .85rem; } .svc__more a { display: inline-flex; align-items: center; gap: .45rem; color: var(--c-navy); font-weight: 600; font-size: .95rem; text-decoration: none; border-bottom: 1px solid #24346240; transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .svc__more a:hover { color: var(--c-gold-deep); border-bottom-color: var(--c-gold-deep); } .svc__more .icon { color: var(--c-gold-deep); width: .9rem; height: .9rem; } .svc__media { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-paper-warm); } .svc__media picture, .svc__media img { width: 100%; height: 100%; } .svc__media img { object-fit: cover; transition: transform var(--t-slow) var(--ease-out); } .svc__row:hover .svc__media img { transform: scale(1.05); } /* Dachrinnenreinigung: covjek na ljestvama je bas uz gornju ivicu fotografije. Uz `object-fit: cover` i 16/9 okvir na mobitelu vrh se odsijeca pa se vide samo ljestve. Fokus se zato pomjera na gornju ivicu — ovo je jedina slika kojoj to treba. */ #hausmeisterservice .svc__media img { object-position: center top; } @media (max-width: 760px) { .svc__row { grid-template-columns: auto 1fr; } .svc__media { grid-column: 1 / -1; aspect-ratio: 16 / 9; } } /* ---------- Vorher / Nachher (tamna sekcija) ---------- */ .vn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .vn-card { border-radius: var(--r-md); overflow: hidden; background: var(--a-white-10); border: 1px solid var(--a-white-10); margin: 0; } .vn-card > img { width: 100%; height: auto; } .vn-card figcaption { padding: 1rem 1.3rem 1.15rem; font-size: .93rem; color: var(--a-white-70); } .vn-card figcaption strong { color: #fff; } .vn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .vn-half { position: relative; } .vn-half img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; } .vn-single { position: relative; } .vn-single img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .vn-tag { position: absolute; top: .8rem; left: .8rem; background: #040813cc; color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: .38rem .75rem; border-radius: var(--r-pill); } .vn-tag--gold { background: var(--c-gold); color: var(--c-dark); } @media (max-width: 860px) { .vn-grid { grid-template-columns: 1fr; } } /* ---------- Recenzije ---------- */ .rev-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem 2rem; margin-bottom: clamp(2.25rem, 2rem + 2vw, 3.5rem); } .rev-score { font-family: var(--ff-display); font-weight: 600; font-size: clamp(4.5rem, 3.5rem + 4vw, 7rem); line-height: 1; color: var(--c-navy); } .rev-meta { display: grid; gap: .4rem; justify-items: start; } .rev-meta span { color: var(--c-body); font-weight: 600; } .rev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; } .rev-card { background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 1.9rem; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 1.1rem; } .rev-card .icon-quote { width: 1.9rem; height: 1.9rem; color: var(--c-gold); } .rev-card blockquote { color: var(--c-body); font-size: .97rem; flex-grow: 1; } .rev-card footer { display: grid; gap: .3rem; } .rev-card cite { font-style: normal; font-weight: 700; color: var(--c-navy); font-size: .94rem; } .rev-card footer span { font-size: .82rem; color: var(--c-body); } .rev-link { margin-top: clamp(2.25rem, 2rem + 1.5vw, 3rem); text-align: center; } /* ---------- Einsatzgebiet — radar ---------- */ .einsatz__grid { display: grid; grid-template-columns: minmax(250px, 400px) 1fr; gap: clamp(2.25rem, 5vw, 4.5rem); align-items: center; } .radar { position: relative; aspect-ratio: 1; width: 100%; max-width: 400px; margin-inline: auto; } .radar::before, .radar::after { content: ""; position: absolute; background: #2434621f; } .radar::before { left: 50%; top: 2%; bottom: 2%; width: 1px; } .radar::after { top: 50%; left: 2%; right: 2%; height: 1px; } .radar .rc { position: absolute; border-radius: 50%; border: 1px solid; } .radar .rc1 { inset: 0; border-color: #24346247; } .radar .rc2 { inset: 16%; border-color: #24346233; } .radar .rc3 { inset: 32%; border-color: #24346224; } .radar .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #bba33966 0deg, #bba33900 80deg, #bba33900 360deg); animation: radar-sweep 7s linear infinite; } @keyframes radar-sweep { to { transform: rotate(360deg); } } .radar .core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--c-navy); color: #fff; font-weight: 800; font-size: .78rem; letter-spacing: .22em; padding: .55rem 1.05rem .55rem 1.25rem; border-radius: var(--r-pill); white-space: nowrap; box-shadow: 0 0 0 6px #24346226; } .chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.7rem; } .chips li { border: 1px solid #24346240; color: var(--c-navy); font-size: .88rem; font-weight: 600; padding: .42rem .95rem; border-radius: var(--r-pill); background: var(--a-white-70); } .chips--sub li { font-size: .8rem; padding: .32rem .8rem; color: var(--c-body); border-color: #24346226; } .chips-label { margin-top: 1.6rem; font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-gold-deep); } .chips-label + .chips { margin-top: .7rem; } .einsatz-note { margin-top: 1.5rem; color: var(--c-body); font-size: .95rem; } @media (max-width: 900px) { .einsatz__grid { grid-template-columns: 1fr; } } /* ---------- Über uns ---------- */ .about__grid { display: grid; grid-template-columns: minmax(260px, 430px) 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; } /* 🔴 U kodu tekst dolazi prije slike (da na mobitelu bude prvi). Na sirokom ekranu slika svejedno ostaje lijevo — ovdje se eksplicitno rasporedjuju po kolonama. */ .about__media { grid-column: 1; grid-row: 1; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-card); } .about__body { grid-column: 2; grid-row: 1; } .about__body p + p { margin-top: 1rem; } .about__body h2 { margin-bottom: 1.2rem; } .checklist { display: grid; gap: .95rem; margin-top: 1.9rem; } .checklist li { display: flex; gap: .8rem; align-items: flex-start; font-weight: 600; } .checklist .icon { color: var(--c-gold-deep); margin-top: .2rem; width: 1.15rem; height: 1.15rem; } @media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; } /* Jedna kolona: raspored se ponistava i sve ide redom iz koda — dakle tekst pa slika. */ .about__media, .about__body { grid-column: auto; grid-row: auto; } .about__media { max-width: 430px; } } /* ---------- Kontakt ---------- */ .contact__grid { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: stretch; } .nap-card { background: var(--c-dark); color: var(--a-white-70); border-radius: var(--r-md); padding: clamp(1.9rem, 3vw, 2.75rem); display: flex; flex-direction: column; gap: 1.35rem; } .nap-card h3 { color: #fff; margin-bottom: .25rem; } .nap-card a { color: #fff; text-decoration: none; } .nap-card a:hover { color: var(--c-gold-bright); } .nap-row { display: flex; gap: .85rem; align-items: flex-start; } .nap-row .icon { color: var(--c-gold); margin-top: .2rem; } .nap-row small { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--a-white-30); margin-bottom: .15rem; } .form { background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: clamp(1.9rem, 3vw, 2.75rem); box-shadow: var(--shadow-soft); display: grid; gap: 1.3rem; align-content: start; } .form label { font-weight: 700; font-size: .93rem; color: var(--c-navy); display: block; margin-bottom: .45rem; } .form input[type="email"], .form input[type="text"], .form input[type="tel"], .form textarea { width: 100%; border: 1px solid var(--c-field-border); border-radius: var(--r-sm); padding: .85rem 1rem; color: var(--c-ink); background: var(--c-paper); transition: border-color var(--t-fast) var(--ease-out); } .form input::placeholder, .form textarea::placeholder { color: #6e7a96cc; } .form textarea { resize: vertical; min-height: 9.5rem; } .form input[type="email"]:focus-visible, .form input[type="text"]:focus-visible, .form input[type="tel"]:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 1px; border-color: var(--c-navy); } .form .btn { justify-self: start; } .form-note { font-size: .85rem; color: var(--c-body); } .form-note a { color: var(--c-navy); } @media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } .form .btn { justify-self: stretch; } } /* ---------- Footer ---------- */ .site-footer { background: var(--c-dark); color: var(--a-white-70); padding-top: clamp(3.5rem, 3rem + 3vw, 5.5rem); } .footer__grid { display: grid; /* Zadnja kolona nosi kartu, zato je sira od liste linkova. */ grid-template-columns: 2fr 1fr 1.1fr 1.5fr; gap: 2.5rem; padding-bottom: 3rem; } .footer__title { color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.1rem; } .site-footer ul { display: grid; gap: .55rem; } .site-footer a { color: var(--a-white-70); text-decoration: none; } .site-footer a:hover { color: var(--c-gold-bright); } .footer__brand .brand__name { font-size: 1.6rem; } .footer__brand p { margin-top: .9rem; max-width: 30rem; font-size: .95rem; } .footer__trust { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem; font-weight: 600; font-size: .9rem; color: #fff; } .footer__trust .icon { color: var(--c-gold); width: 1rem; height: 1rem; } .footer__bottom { border-top: 1px solid var(--a-white-10); padding-block: 1.4rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; font-size: .85rem; text-wrap: balance; } /* Napomena o KI sadrzaju — mora biti citljiva, ne skrivena sitnim sivim slovima. */ .footer__ki { opacity: .78; } /* Kredit agencije — desno u zadnjem redu, diskretan, ne otima paznju od klijenta. */ /* Kredit agencije. Zelena je Rankerra brand boja i jedina boja na sajtu koja nije klijentova — zato stoji samo na imenu, ne na cijeloj recenici. Kontrast #13d08e na --c-dark (#040813) = 9,9:1, daleko iznad WCAG AA. */ .footer__credit { --c-rankerra: #13d08e; --c-rankerra-hell: #3ee7ab; } .footer__credit a { color: var(--c-rankerra); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; text-decoration-color: #13d08e73; transition: color var(--t-fast) var(--ease-out), text-decoration-color var(--t-fast) var(--ease-out); } .footer__credit a:hover, .footer__credit a:focus-visible { color: var(--c-rankerra-hell); text-decoration-color: currentColor; } @media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; gap: 2rem; } } /* ---------- Mobilna traka + WhatsApp ---------- */ .mobile-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-mobilebar); display: none; background: #040813f2; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--a-white-10); padding-bottom: env(safe-area-inset-bottom); } .mobile-bar a { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .65rem .25rem .75rem; color: #fff; text-decoration: none; font-size: .72rem; font-weight: 700; letter-spacing: .04em; } .mobile-bar a + a { border-left: 1px solid var(--a-white-10); } .mobile-bar .icon { color: var(--c-gold); width: 1.2rem; height: 1.2rem; } .whatsapp-floating { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: var(--z-whatsapp); width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--c-gold); color: var(--c-dark); display: none; place-items: center; box-shadow: var(--shadow-card); transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .whatsapp-floating:hover { background: var(--c-gold-bright); transform: translateY(-3px); } .whatsapp-floating .icon { width: 1.65rem; height: 1.65rem; } @media (max-width: 767px) { .mobile-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; } body { padding-bottom: 3.9rem; } } @media (min-width: 768px) { .whatsapp-floating { display: grid; } } /* ---------- Otkrivanje pri skrolu (progresivno, bez JS) ---------- */ @supports (animation-timeline: view()) { .reveal { animation: reveal-rise both; animation-timeline: view(); animation-range: entry 0% entry 55%; } @keyframes reveal-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } } /* ---------- Smanjeno kretanje ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ---------- Pravne stranice (Impressum, Datenschutz) ---------- */ .legal { max-width: 100%; } .legal h1 { margin-bottom: 1.5rem; } .legal h2 { font-size: var(--fs-h3); } .legal h3 { font-size: 1.06rem; font-family: var(--ff-body); font-weight: 700; } .legal p, .legal li { color: var(--c-body); } .legal a { color: var(--c-navy); } .legal address { font-style: normal; } /* ul[class] reset gasi tackice — pravne liste ih vracaju */ ul.legal-list { list-style: disc; padding-left: 1.35rem; } ul.legal-list > li + li { margin-top: .35rem; } .legal-stand { margin-top: 2.5rem; padding-top: 1.1rem; border-top: 1px solid var(--c-border); font-size: .9rem; color: var(--c-body); } /* ---------- Stranice usluga (landing page usluga x grad) ---------- */ /* Napomena: ul[class]/ol[class] reset gasi tackice i padding — zato se ovdje selektori pisu kao ol.brotkrume / ul.lp-mehr kad treba vratiti razmak. */ .brotkrume { padding-top: calc(var(--h-header) + 1.1rem); font-size: .85rem; color: var(--c-body); } ol.brotkrume__lista { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; } .brotkrume__lista li { display: flex; align-items: center; gap: .45rem; } .brotkrume__lista li + li::before { content: "/"; color: #00000040; } .brotkrume a { color: var(--c-navy); text-decoration: none; border-bottom: 1px solid #24346240; } .brotkrume a:hover { border-bottom-color: var(--c-gold-deep); } .brotkrume [aria-current="page"] { color: var(--c-body); } .lp-hero { padding-top: clamp(2rem, 1rem + 3vw, 3.5rem); } .lp-hero__grid { display: grid; grid-template-columns: 1fr minmax(260px, 430px); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; } /* 🔴 Bez `min-width: 0` grid kolona ne smije biti uza od svog najduzeg sadrzaja. „Treppenhausreinigung" je kao jedna rijec sira od telefona (350px na 360px ekranu), pa je gurala CIJELU stranicu u horizontalni scroll. Sa `min-width: 0` kolona se smije suziti, a naslov se prelomi crticom (`hyphens: auto` u tipografiji). Ne uklanjati — problem se vraca cim se pojavi duga njemacka slozenica. */ .lp-hero__body { min-width: 0; } .lp-hero__body h1 { margin-bottom: 1.2rem; } .lp-hero__body p + p { margin-top: 1rem; } .lp-hero__media { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-card); } .lp-hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.1rem; } @media (max-width: 900px) { .lp-hero__grid { grid-template-columns: 1fr; } /* 🔴 Ovdje je ranije stajalo `order: -1`, sto je na uskom ekranu diglo sliku IZNAD naslova. Odluka PO 04.09.2026: prvo H1, tekst i CTA dugmad, tek onda slika — posjetilac prvo mora vidjeti sta nudimo i kako da se javi. Ne vracati order. */ .lp-hero__media { max-width: 430px; } } .ablauf { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 2.5vw, 2rem); margin-top: 2.6rem; } .ablauf__card { background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: clamp(1.4rem, 2.5vw, 2rem); box-shadow: var(--shadow-soft); } .ablauf__num { display: block; font-family: var(--ff-display); font-size: 1.9rem; line-height: 1; color: var(--c-gold-deep); margin-bottom: .7rem; } .ablauf__card h3 { margin-bottom: .55rem; font-size: 1.18rem; font-family: var(--ff-body); font-weight: 700; } .ablauf__card p { color: var(--c-body); } /* 4 koraka -> 2x2. Osnovno pravilo (3 kolone) ostaje za 34 stranice sa 3 kartice. */ .ablauf--2x2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 860px) { .ablauf { grid-template-columns: 1fr; } } ul.lp-mehr { display: grid; gap: .7rem; margin-top: 1.6rem; } .lp-mehr a { display: inline-flex; align-items: center; gap: .5rem; color: var(--c-navy); font-weight: 600; } .lp-mehr .icon { color: var(--c-gold-deep); width: 1rem; height: 1rem; } .faq { margin-top: 2.4rem; } .faq__item { border-bottom: 1px solid var(--c-border); padding: 1.15rem 0; } .faq__item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 700; font-size: 1.06rem; color: var(--c-ink); } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary .icon { flex: none; width: 1.05rem; height: 1.05rem; color: var(--c-gold-deep); transition: transform var(--t-fast) var(--ease-out); } .faq__item[open] summary .icon { transform: rotate(180deg); } .faq__item > div { margin-top: .8rem; color: var(--c-body); } .faq__item > div p + p { margin-top: .8rem; } /* Interni link nazad na pocetnu (seo/03 §5.6) */ .lp-heim { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--c-border); color: var(--c-body); } .lp-heim a { color: var(--c-gold-deep); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; } /* ---------- Standorte-Uebersicht ---------- */ ul.standorte__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .7rem 1.6rem; margin-top: 1.3rem; } .standorte__liste a { display: inline-flex; align-items: center; gap: .5rem; color: var(--c-navy); font-weight: 600; } .standorte__liste .icon { color: var(--c-gold-deep); width: 1rem; height: 1rem; } .standorte__gruppe + .standorte__gruppe { margin-top: 3.2rem; } /* Verlinkte Staedte im Einsatzgebiet */ .chips__link { border-color: #24346273; } .chips__link a { color: var(--c-navy); text-decoration: none; } .chips__link a:hover { color: var(--c-gold-deep); } /* ---------- Dorada 2026-08-24: suptilnija kartica, ziviji FAQ, Ablauf broj ---------- */ /* Sve koristi postojece tokene. Bez promjene layouta, bez novih boja. */ /* Kartice: mirno podizanje na hover — ne skace, samo "diše" */ .pain-card, .ablauf__card { transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } @media (hover: hover) { .pain-card:hover, .ablauf__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: #bba33940; } } /* Ablauf: broj dobija tanku zlatnu liniju ispod — daje ritam koraka */ .ablauf__card { position: relative; overflow: hidden; } .ablauf__num { font-size: 2.3rem; letter-spacing: -.02em; margin-bottom: .95rem; padding-bottom: .55rem; position: relative; } .ablauf__num::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; width: 2.1rem; height: 2px; border-radius: var(--r-pill); background: var(--c-gold); } /* tanka zlatna traka uz gornju ivicu kartice, vidljiva tek na hover */ .ablauf__card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: var(--c-gold); opacity: 0; transition: opacity var(--t-fast) var(--ease-out); } @media (hover: hover) { .ablauf__card:hover::before { opacity: 1; } } /* FAQ: mekši red, jasniji hover, odgovor se otvara bez trzaja */ .faq__item { padding-inline: .25rem; transition: background var(--t-fast) var(--ease-out); border-radius: var(--r-sm); } .faq__item:first-of-type { border-block-start: 1px solid var(--c-border); } @media (hover: hover) { .faq__item:hover { background: var(--c-paper-warm); } } .faq__item summary { transition: color var(--t-fast) var(--ease-out); } @media (hover: hover) { .faq__item summary:hover { color: var(--c-navy); } } .faq__item[open] summary { color: var(--c-navy); } .faq__item > div { animation: faq-otvori var(--t-fast) var(--ease-out) both; } @keyframes faq-otvori { from { opacity: 0; transform: translateY(-.35rem); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .faq__item > div { animation: none; } .pain-card, .ablauf__card { transition: none; } .pain-card:hover, .ablauf__card:hover { transform: none; } } /* Link ispod FAQ-a */ .faq-mehr { margin-top: 1.8rem; text-align: center; } .faq-mehr a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--c-navy); text-decoration: none; border-bottom: 2px solid #bba33966; padding-bottom: .15rem; transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .faq-mehr a:hover { color: var(--c-gold-deep); border-bottom-color: var(--c-gold); } /* ---------- Padajuci meni u headeru (2026-08-25) ---------- */ /* Bez JS-a: otvara se na hover i na fokus tastaturom (:focus-within). Meni je ionako sakriven ispod 960px — mobilni ima svoju traku. */ .nav-drop { position: relative; display: flex; align-items: center; align-self: stretch; } .nav-drop__top { display: inline-flex; align-items: center; gap: .35rem; color: var(--a-white-70); text-decoration: none; font-size: .93rem; font-weight: 600; letter-spacing: .02em; padding: .35rem 0; } .nav-drop__top .icon { width: .8rem; height: .8rem; color: var(--c-gold); transition: transform var(--t-fast) var(--ease-out); } .nav-drop:hover .nav-drop__top, .nav-drop:focus-within .nav-drop__top { color: var(--c-gold-bright); } .nav-drop:hover .nav-drop__top .icon, .nav-drop:focus-within .nav-drop__top .icon { transform: rotate(180deg); } .nav-drop__panel { position: absolute; inset-block-start: 100%; inset-inline-start: 50%; transform: translate(-50%, .5rem); min-width: 15.5rem; background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: .6rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), visibility var(--t-fast); } /* nevidljivi most izmedju linka i panela da hover ne pukne u razmaku */ .nav-drop__panel::before { content: ""; position: absolute; inset-block-end: 100%; inset-inline: 0; height: .6rem; } .nav-drop:hover .nav-drop__panel, .nav-drop:focus-within .nav-drop__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .nav-drop__list { display: grid; } .nav-drop__list li { display: block; } .nav-drop__list a { display: block; padding: .5rem .7rem; border-radius: var(--r-sm); color: var(--c-ink); text-decoration: none; font-size: .92rem; font-weight: 600; line-height: 1.35; white-space: nowrap; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .nav-drop__list a:hover { background: var(--c-paper-warm); color: var(--c-navy); } /* 🔴 Selektor mora nositi .nav-drop__panel: bez toga `.site-nav a` (0,1,1) pobjeđuje `.nav-drop__more` (0,1,0) i link ispod usluga ostane bijel kao ostatak headera, iako je panel na bijeloj podlozi. Isto vrijedi za oba padajuća menija. */ .nav-drop__panel .nav-drop__more { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .45rem; padding: .6rem .7rem; border-block-start: 1px solid var(--c-border); color: var(--c-ink); text-decoration: none; font-size: .88rem; font-weight: 700; white-space: nowrap; transition: color var(--t-fast) var(--ease-out); } .nav-drop__panel .nav-drop__more .icon { width: .95rem; height: .95rem; color: var(--c-gold-deep); } .nav-drop__panel .nav-drop__more:hover { background: var(--c-paper-warm); color: var(--c-navy); } @media (prefers-reduced-motion: reduce) { .nav-drop__panel { transition: none; } .nav-drop__top .icon { transition: none; } } @media (max-width: 960px) { .nav-drop { display: none; } } /* Logo znak: na uskim ekranima manji, ispod 420px ostaje samo znak + ime */ @media (max-width: 640px) { .brand__mark { height: 2.15rem; } .brand { gap: .55rem; } } .footer__mark { width: auto; height: 3.1rem; display: block; margin-bottom: .9rem; } /* ---------- Preisrechner (2026-08-25) ---------- */ /* Cijene ne zive ovdje. Vidi src/_data/preisrechner.json. */ .rechner { margin-top: 2.6rem; padding: clamp(1.4rem, 3vw, 2.4rem); background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--shadow-card); } .rechner__head { margin-bottom: 1.6rem; } .rechner__head h3 { font-family: var(--ff-body); font-size: 1.24rem; font-weight: 700; margin-bottom: .4rem; } .rechner__head p { color: var(--c-body); font-size: .96rem; } .rechner__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } @media (max-width: 760px) { .rechner__grid { grid-template-columns: 1fr; } } .rechner__feld { display: flex; flex-direction: column; gap: .4rem; } .rechner__feld label { font-size: .88rem; font-weight: 700; color: var(--c-ink); } .rechner__feld small { font-size: .78rem; color: var(--c-body); line-height: 1.35; } .rechner select, .rechner input[type="number"] { width: 100%; padding: .7rem .8rem; font-family: var(--ff-body); font-size: .95rem; color: var(--c-ink); background: var(--c-paper); border: 1px solid var(--c-field-border); border-radius: var(--r-sm); transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .rechner select:focus-visible, .rechner input[type="number"]:focus-visible { border-color: var(--c-navy); box-shadow: 0 0 0 3px #2434621f; outline: 2px solid transparent; outline-offset: 2px; } .rechner__einheit { position: relative; display: flex; align-items: center; } .rechner__einheit input { padding-inline-end: 2.6rem; } .rechner__einheit span { position: absolute; inset-inline-end: .8rem; font-size: .9rem; font-weight: 700; color: var(--c-body); pointer-events: none; } .rechner__stufen { margin-top: 1.5rem; padding: 0; border: 0; } .rechner__stufen legend { padding: 0; margin-bottom: .6rem; font-size: .88rem; font-weight: 700; color: var(--c-ink); } .rechner__stufen { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; } .rechner__stufen legend { grid-column: 1 / -1; } @media (max-width: 760px) { .rechner__stufen { grid-template-columns: 1fr; } } .rechner__stufe { display: block; cursor: pointer; } .rechner__stufe input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .rechner__stufe-in { display: flex; flex-direction: column; gap: .2rem; height: 100%; padding: .8rem .9rem; background: var(--c-paper-warm); border: 1px solid var(--c-border); border-radius: var(--r-sm); transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); } .rechner__stufe-in strong { font-size: .95rem; } .rechner__stufe-in small { font-size: .78rem; color: var(--c-body); line-height: 1.35; } .rechner__stufe:hover .rechner__stufe-in { border-color: var(--c-field-border); } .rechner__stufe input:checked + .rechner__stufe-in { background: var(--c-paper); border-color: var(--c-navy); box-shadow: inset 0 0 0 1px var(--c-navy); } .rechner__stufe input:focus-visible + .rechner__stufe-in { outline: 2px solid var(--c-navy); outline-offset: 2px; } .rechner__fehlt { margin-top: 1rem; font-size: .88rem; font-weight: 700; color: var(--c-gold-deep); } .rechner__aktion { margin-top: 1.5rem; } .rechner__aktion .btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; } .rechner__ergebnis { margin-top: 1.8rem; padding-top: 1.6rem; border-block-start: 1px solid var(--c-border); animation: rechner-auf var(--t-slow) var(--ease-out) both; } @keyframes rechner-auf { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } } .rechner__label { font-size: .74rem; font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-gold-deep); margin-bottom: .35rem; } .rechner__preis { font-family: var(--ff-display); font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3rem); line-height: 1.05; color: var(--c-navy); } .rechner__waehrung { font-size: .6em; } .rechner__einheit-out { font-weight: 700; margin-top: .3rem; } .rechner__zusammen { font-size: .9rem; color: var(--c-body); margin-top: .5rem; } .rechner__hinweis { margin-top: 1rem; padding: .9rem 1rem; font-size: .86rem; line-height: 1.5; color: var(--c-body); background: var(--c-paper-warm); border-radius: var(--r-sm); } .rechner__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; } .rechner__noscript { margin-top: 1.2rem; font-size: .9rem; color: var(--c-body); } @media (prefers-reduced-motion: reduce) { .rechner__ergebnis { animation: none; } .rechner select, .rechner input, .rechner__stufe-in { transition: none; } } /* ---------- CSP-sigurne zamjene za inline stilove (2026-08-25) ---------- */ /* Produkcija salje Content-Security-Policy: style-src 'self'. To blokira SVAKI inline style="" atribut. Sprite sa ikonama je zbog toga na Vercelu bio VIDLJIV i gurao cijelu stranicu ~150px nize (bijela traka ispod headera na svih 40 stranica). Pravilo: nikad style="" u markupu — uvijek klasa ovdje. */ .ikone-sprite { display: none; } .naehe-standort { margin: 0; color: var(--c-ink); } .naehe-alle { background: var(--c-paper); padding-block: var(--section-y); } .naehe-alle__titel { font-size: var(--fs-h2); color: var(--c-ink); margin-block-end: 1.5rem; text-align: center; } /* ---------- Facility, ab-cijene, tehnika, referentni kupci (2026-08-27) ---------- */ /* Facility Management — dodatne usluge bez slika */ .facility { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding-block-start: clamp(2.2rem, 1.5rem + 2vw, 3.2rem); border-block-start: 1px solid var(--c-border); } .facility__kopf { max-width: 46rem; margin-bottom: 1.8rem; } .facility__kopf h3 { font-family: var(--ff-body); font-size: 1.3rem; font-weight: 700; margin-bottom: .4rem; } .facility__kopf p { color: var(--c-body); } ul.facility__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } @media (max-width: 900px) { ul.facility__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { ul.facility__grid { grid-template-columns: 1fr; } } .facility__grid li { display: flex; gap: .7rem; padding: 1rem 1.1rem; background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--shadow-soft); } .facility__grid .icon { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem; color: var(--c-gold-deep); } .facility__grid strong { display: block; margin-bottom: .2rem; font-size: 1rem; } .facility__grid span { font-size: .92rem; line-height: 1.5; color: var(--c-body); } /* Ab-cijene */ .preise { margin-top: 2.6rem; padding: clamp(1.4rem, 3vw, 2.4rem); background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--shadow-card); } .preise__head { margin-bottom: 1.8rem; } .preise__head h3 { font-family: var(--ff-body); font-size: 1.24rem; font-weight: 700; margin-bottom: .4rem; } .preise__head p { color: var(--c-body); font-size: .96rem; } .preise__gruppe + .preise__gruppe { margin-top: 1.9rem; } .preise__gruppe-kopf { margin-bottom: .7rem; } .preise__gruppe-kopf h4 { font-family: var(--ff-body); font-size: .78rem; font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-gold-deep); } .preise__gruppe-kopf p { font-size: .88rem; color: var(--c-body); margin-top: .15rem; } ul.preise__liste { display: grid; gap: 0; } .preise__posten { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; padding: .75rem 0; border-block-end: 1px solid var(--c-border); } .preise__posten:last-child { border-block-end: 0; } .preise__name { font-weight: 700; font-size: 1rem; } .preise__name a { color: var(--c-navy); text-decoration: none; border-bottom: 1px solid #24346240; } .preise__name a:hover { border-bottom-color: var(--c-gold-deep); } .preise__wert { display: flex; align-items: baseline; gap: .35rem; white-space: nowrap; } .preise__ab { font-size: .82rem; color: var(--c-body); } .preise__wert strong { font-family: var(--ff-display); font-size: 1.5rem; color: var(--c-navy); } .preise__einheit { font-size: .82rem; color: var(--c-body); } .preise__rechtlich { margin-top: 1.6rem; font-size: .82rem; color: var(--c-body); } .preise__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; } /* Tehnika i sredstva */ .technik { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.1rem, 2.5vw, 2rem); margin-top: 2.6rem; } @media (max-width: 860px) { .technik { grid-template-columns: 1fr; } } .technik__karte { padding: clamp(1.4rem, 2.5vw, 2rem); background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--shadow-soft); } .technik__karte h3 { font-family: var(--ff-body); font-size: 1.14rem; font-weight: 700; margin-bottom: .6rem; } .technik__karte p { color: var(--c-body); font-size: .95rem; } .technik__karte p + p { margin-top: .7rem; } .technik__karte strong { color: var(--c-ink); } /* Referentni kupci — zid logotipa (dozvola klijenta, 2026-08-28) */ .kunden > p { color: var(--c-body); } .kunden h3 { font-family: var(--ff-body); font-size: 1.3rem; font-weight: 700; margin-bottom: .4rem; } ul.kunden__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.8rem; } @media (max-width: 900px) { ul.kunden__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { ul.kunden__grid { grid-template-columns: 1fr; } } .kunden__karte { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; min-height: 8.5rem; padding: 1.25rem 1rem 1rem; background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-md); text-align: center; } /* Logotip se uklapa u fiksnu kutiju — nijedan se ne rasteze i ne izlazi iz okvira. */ .kunden__logo { display: block; width: auto; height: auto; max-width: 100%; max-height: 3.4rem; object-fit: contain; /* Blago prigusenje da osam razlicitih paleta ne nadglasa stranicu; puna boja na hover. */ filter: saturate(.85) contrast(1.02); opacity: .92; transition: opacity var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out); } .kunden__karte:hover .kunden__logo { filter: none; opacity: 1; } /* Kartica bez logotipa: ime se slaze u nasoj tipografiji, ista visina kao ostale. */ .kunden__karte--wort .kunden__wort { display: block; font-family: var(--ff-display); font-size: 1.3rem; line-height: 1.15; letter-spacing: .01em; color: var(--c-navy); max-width: 11ch; } .kunden__ort { font-size: .8rem; color: var(--c-body); } .kunden__fussnote { margin-top: 1.4rem; font-size: .8rem; line-height: 1.5; color: var(--c-body); opacity: .85; } @media (prefers-reduced-motion: reduce) { .kunden__logo { transition: none; } } /* Karta u footeru — Zwei-Klick-Loesung (2026-08-28). Prije klika se ne kontaktira nijedan Googleov server. Vidi partials/karte.njk. */ .karte { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: #0b1020; border: 1px solid var(--a-white-10); } .karte__platzhalter { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1rem; text-align: center; } .karte__pin { width: 1.5rem; height: 1.5rem; color: var(--c-gold); } .karte__ort { font-size: .88rem; line-height: 1.4; color: var(--a-white-70); } .karte__knopf { font: inherit; font-size: .85rem; font-weight: 700; color: var(--c-dark); background: var(--c-gold); border: 0; border-radius: var(--r-sm); padding: .5rem 1rem; cursor: pointer; transition: background var(--t-fast) var(--ease-out); } .karte__knopf:hover, .karte__knopf:focus-visible { background: var(--c-gold-bright); } .karte__hinweis { font-size: .72rem; line-height: 1.45; color: var(--a-white-30); max-width: 22ch; } .karte__hinweis a { color: var(--a-white-70); text-decoration: underline; } /* Iframe dobija klasu iz JS-a — inline style bi CSP odbacio. */ .karte__rahmen { display: block; width: 100%; height: 100%; border: 0; } @media (max-width: 960px) { /* Na dvije kolone karta ne treba biti visoka koliko i siroka. */ .karte { aspect-ratio: 16 / 10; } } /* ---------- Einwilligungsbanner (2026-08-28) ---------- Desktop: traka uz dno, tvrdo ogranicena na 10 % visine ekrana. Mobitel: stoji tacno na mjestu Schnellkontakt trake i pokriva je; kad posjetilac odluci, banner nestaje i traka se opet vidi (klasa `einwilligung-offen` na ). */ .einwilligung { position: fixed; bottom: 0; left: 0; right: 0; z-index: 140; display: flex; align-items: center; justify-content: center; gap: 1rem 1.5rem; flex-wrap: wrap; max-height: 10vh; overflow-y: auto; padding: .7rem var(--gutter); background: #040813f2; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--a-white-10); color: var(--a-white-70); font-size: .82rem; line-height: 1.4; } .einwilligung[hidden] { display: none; } .einwilligung__text { max-width: 62ch; } .einwilligung__text a { color: #fff; text-decoration: underline; } .einwilligung__knoepfe { display: flex; gap: .5rem; flex-shrink: 0; } /* Obje dugmadi su iste velicine i istog ranga — odbijanje ne smije biti teze od pristanka. */ .einwilligung__knopf { font: inherit; font-weight: 700; font-size: .82rem; line-height: 1; padding: .6rem 1.1rem; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .einwilligung__knopf--nein { background: transparent; border-color: var(--a-white-30); color: #fff; } .einwilligung__knopf--nein:hover, .einwilligung__knopf--nein:focus-visible { background: #ffffff1a; } .einwilligung__knopf--ja { background: var(--c-gold); color: var(--c-dark); } .einwilligung__knopf--ja:hover, .einwilligung__knopf--ja:focus-visible { background: var(--c-gold-bright); } @media (max-width: 767px) { .einwilligung { /* Otisak sto blizi .mobile-bar traci (3,9rem) — banner je pokriva dok stoji. */ max-height: none; gap: .3rem; padding: .4rem .7rem calc(.4rem + env(safe-area-inset-bottom)); font-size: .7rem; line-height: 1.3; text-align: center; } /* Recenica o kolacicima nije dio same odluke — na uskom ekranu ustupa mjesto. */ .einwilligung__lang { display: none; } .einwilligung__text { max-width: none; } .einwilligung__knoepfe { width: 100%; gap: .4rem; } .einwilligung__knopf { flex: 1; padding: .42rem .4rem; font-size: .76rem; } /* Dok se odlucuje, Schnellkontakt traka je sakrivena; poslije odluke se vraca. */ .einwilligung-offen .mobile-bar { display: none; } } @media (prefers-reduced-motion: reduce) { .einwilligung__knopf { transition: none; } }