/*
	Theme Name:	XTRA Child
	Theme URI:	https://xtratheme.com/
	Description:	beOnline (beonline.ch) — child tema za Xtra, demo Hosting 2. wp-agent, clients/beonline/theme/xtra-child.
	Author:		Codevz / UndiWeb
	Author URI:	https://undiweb.net/
	Template:	xtra
	Version:	1.9.0
*/

/* ==========================================================================
   beOnline — pravila su numerisana (§); tokeni su u clients/beonline/DESIGN-TOKENS.md.
   Boje i fontovi teme zive u Codevz opcijama; ovde samo ono sto opcije ne pokrivaju.
   ========================================================================== */

/* §1 Roboto lokalno (fajlovi sa klona; Google fontovi su ugaseni u opcijama teme) */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/roboto/Roboto-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/roboto/Roboto-400-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: 400;
	font-display: swap;
	src: url('fonts/roboto/Roboto-400italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/roboto/Roboto-400italic-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: 500;
	font-display: swap;
	src: url('fonts/roboto/Roboto-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/roboto/Roboto-500-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: 600;
	font-display: swap;
	src: url('fonts/roboto/Roboto-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/roboto/Roboto-600-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: 700;
	font-display: swap;
	src: url('fonts/roboto/Roboto-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/roboto/Roboto-700-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;
}

/* §2 Tokeni — prefiks --beo- (plugin kalkulatora vec koristi --bo- na :root).
   Skala (DESIGN-TOKENS.md, sesija 03): razmaci 8/16/24/32/48/64/96 · radius 8 kartice / 4 dugmad · jedna senka · linija 1 px. */
:root {
	--beo-gold: #c89705;
	--beo-gold-hover: #bb8a00;
	--beo-gold-tint: rgba(200, 151, 5, 0.08);
	--beo-dark: #000119;
	--beo-light: #eaf1f2;
	--beo-white: #ffffff;
	--beo-text: #333447;
	--beo-muted: #4b5563;
	--beo-line: #d9e2e4;
	--beo-font: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	--beo-s1: 8px;
	--beo-s2: 16px;
	--beo-s3: 24px;
	--beo-s4: 32px;
	--beo-s5: 48px;
	--beo-s6: 64px;
	--beo-s7: 96px;
	--beo-radius: 8px;
	--beo-radius-sm: 4px;
	--beo-shadow: 0 8px 24px rgba(0, 1, 25, 0.08);
	--beo-btn-h: 48px;
	--beo-text-w: 720px;
	--beo-hdr-mobil: 96px;
}

/* §3 Osnovna tipografija — font za polja forme i dugmad (tema ih ne nasledjuje svuda) */
body.bo-site,
body.bo-site button,
body.bo-site input,
body.bo-site select,
body.bo-site textarea {
	font-family: var(--beo-font);
}

/* §4 Zaglavlje — „Kontakt" je na desktopu dugme; stavka menija postoji samo za mobilni meni.
   Bez ovoga Codevz racuna i nju u sirinu reda i gura „Über uns" u „…". */
.header_2 .sf-menu > li.bo-nur-mobil {
	display: none !important;
}

/* §5 Zaglavlje 1100–1279 px — 10 stavki mora da stane u jedan red (izmereno: na 1180 red pada ispod logoa,
   na 1100 meni se lomi u dva reda). Ispod 1100 preuzima mobilno zaglavlje (§6). */
@media screen and (max-width: 1279px) {
	.header_2 #menu_header_2 > li > a {
		font-size: 14px !important;
		padding-left: 6px !important;
		padding-right: 6px !important;
	}
}
@media screen and (max-width: 1140px) {
	.header_2 #menu_header_2 > li > a {
		font-size: 13px !important;
		padding-left: 4px !important;
		padding-right: 4px !important;
	}
	.header_2 .elms_right .cz_elm:nth-child(2) {
		margin-right: 18px !important;
	}
}

/* §6 Mobilno zaglavlje (red 4) vec od 1099 px nadole. Codevz ga pali tek na 768 (core-tablet.css), a izmedju
   769 i ~1099 desktop meni sa 10 stavki pada ispod logoa ili u dva reda (izmereno; 1100 staje). Ista pravila, sira granica. */
@media screen and (max-width: 1099px) {
	.header_1,
	.header_2,
	.header_3,
	.header_5,
	.header_5.onSticky {
		display: none !important;
	}
	.header_4,
	.cz_before_mobile_header,
	.cz_after_mobile_header,
	.Corpse_Sticky.cz_sticky_corpse_for_header_4 {
		display: block !important;
	}
}

/* §7 Podnozje — dugme „na vrh" (fiksno dole desno) ne sme da pokrije poslednju pravnu vezu. */
@media screen and (min-width: 769px) {
	.footer_2 .elms_right {
		padding-right: 56px;
	}
}
@media screen and (max-width: 768px) {
	/* Na telefonu Codevz centrira desnu grupu u DOM redosledu (Datenschutz · Impressum · AGB) — vrati AGB prvi. */
	.footer_2 .elms_right {
		display: flex;
		flex-direction: row-reverse;
		flex-wrap: wrap;
		justify-content: center;
	}
	/* Dugme „na vrh" stoji iznad mobilne trake; donja traka podnozja se podize iznad njega. */
	.footer_2 {
		padding-bottom: 64px;
	}
}

/* §8 Kalkulator (beOnline Quote Calculator) u paleti sajta — samo promenljive plugina unutar njegovog omotaca,
   core CSS plugina se ne menja. Dugme: zlatno sa TAMNIM tekstom (beli na zlatnom = 2,66:1). */
body.bo-site .beonline-calc {
	--bo-primary: var(--beo-dark);
	--bo-accent: var(--beo-gold);
	--bo-accent-hover: var(--beo-gold-hover);
	--bo-text: var(--beo-dark);
	--bo-bg: var(--beo-light);
	/* sivi tekst plugina (#6b7280) na nasoj svetloj pozadini = 4,23:1 (Lighthouse, cene opcija) → 6,61:1 */
	--bo-muted: #4b5563;
	font-family: var(--beo-font);
}
body.bo-site .beonline-calc .beonline-calc__submit,
body.bo-site .beonline-calc .beonline-calc__submit:hover {
	color: var(--beo-dark);
}

/* §9 Pocetna — kartice proizvoda: dugme „Mehr Infos" uvek na dnu kartice (Mobile nema listu, pa bi dugme
   stajalo vise od ostalih). Kartica je flex kolona; pravilo je vezano za widget dugmeta (Pomen zamka 10). */
.bo-karte > .elementor-widget-cz_button {
	margin-top: auto;
}

/* §10 Naslovi — bez automatskog deljenja reci (sesija 03: „An-schlussmöglichkeit" u H1 pocetne je ruzno, checklista §7).
   Duga rec koja ne staje ipak se prelama (overflow-wrap), a gde treba — rucni ­ u tekstu. */
body.bo-site h1,
body.bo-site h2,
body.bo-site h3 {
	hyphens: manual;
	-webkit-hyphens: manual;
	overflow-wrap: break-word;
}

/* §11 Telefonie — uredjaji za VoIP u mrezi (tri kolone, na telefonu jedna).
 * Kartica je kolona, cena (poslednji pasus) ide na dno — opisi su razlicite duzine, cene u istoj liniji. */
.bo-geraete {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin-top: 20px;
	text-align: center;
}
.bo-geraet {
	display: flex;
	flex-direction: column;
}
.bo-geraet > p:last-child {
	margin-top: auto;
	margin-bottom: 0;
}
.bo-geraet img {
	display: block;
	width: 160px;
	height: 160px;
	margin: 0 auto 16px;
	object-fit: contain;
}
.bo-geraet h3 {
	font-size: 22px;
	margin-bottom: 8px;
}
@media screen and (max-width: 768px) {
	.bo-geraete {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Sesija 03 — globalni vizuelni sloj (checklista skills/elementor/references/design-review.md).
   Klase postavljaju builderi (scripts/b3_lib.py); vrednosti su tokeni iz §2.
   ========================================================================== */

/* §12 Naslovna traka (bo-traka) — naslov nikad ne preklapa ilustraciju (checklista §1).
   Izmereno 17.09.: na 1280 i 1440 razmak tekst–slika je 90 px (kolone 25/50/25); na 1024 kolone padaju jedna ispod
   druge i desna ilustracija naraste na 871 x 1385 px (traka 1.771 px), na 390 prekriva H1. Zato se ilustracije gase
   vec od 1024 nadole, a traka je tekst na tint pozadini. Zaglavlje je tamo apsolutno, donja ivica na 94 px. */
.bo-traka .bo-kicker p {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--beo-muted);
}
.bo-traka .bo-titel h1 {
	margin: 8px 0 0;
	line-height: 1.2;
}
.bo-traka .bo-lead p {
	max-width: 600px;
	margin: 16px auto 0;
	font-size: 19px;
	line-height: 1.6;
	color: var(--beo-text);
}
.bo-traka .bo-traka__dugmad {
	margin-top: var(--beo-s4);
}
.bo-traka--ohne-bild .bo-traka__text {
	width: 100% !important;
	max-width: 760px;
	margin: 0 auto;
}
@media screen and (max-width: 1024px) {
	.bo-traka .bo-traka__bild {
		display: none !important;
	}
	.bo-traka.e-con {
		min-height: 0 !important;
		padding: calc(var(--beo-hdr-mobil) + 40px) 24px var(--beo-s5) !important;
	}
	.bo-traka .bo-traka__text {
		width: 100% !important;
		max-width: 640px;
		margin: 0 auto !important;
		padding: 0 !important;
	}
	.bo-traka .bo-lead p {
		font-size: 17px;
	}
}
@media screen and (max-width: 767px) {
	.bo-traka.e-con {
		padding: calc(var(--beo-hdr-mobil) + 24px) 16px var(--beo-s5) !important;
	}
}

/* §13 Sekcije i zaglavlja sekcija (bo-sekcija, bo-kopf) — ritam belo/tint dolazi iz buildera (checklista §6). */
.bo-kopf {
	width: 100%;
}
.bo-kopf--mitte {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.bo-kopf--mitte .cz_title_content,
.bo-ab-hinweis-wrap .cz_title_content,
.bo-diese-website-wrap .cz_title_content,
.bo-partnerschaft-wrap .cz_title_content {
	margin-left: auto;
	margin-right: auto;
}
.bo-kopf .bo-kicker p {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--beo-muted);
}
.bo-kopf .bo-kicker p::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 2px;
	margin-right: 10px;
	vertical-align: middle;
	background: var(--beo-gold);
}
.bo-kopf .bo-titel :is(h1, h2, h3) {
	margin: 0;
	line-height: 1.25;
}
.bo-kopf .bo-lead p {
	margin: 0;
	font-size: 19px;
	line-height: 1.6;
	color: var(--beo-text);
}
@media screen and (max-width: 767px) {
	.bo-kopf .bo-lead p {
		font-size: 17px;
	}
}
.bo-mitte,
.bo-mitte p {
	text-align: center;
}
/* Elementor daje widgetu u kontejneru max-width 100% selektorom „.elementor.elementor .e-con > .elementor-widget"
   (specificnost 0,4,0 — izmereno 17.09.), pa pravilo mora biti jace */
.bo-site .elementor.elementor .e-con > .elementor-widget.bo-textspalte,
.bo-site .elementor.elementor .e-con > .e-con-inner > .elementor-widget.bo-textspalte {
	width: 100%;
	max-width: var(--beo-text-w);
	margin-left: auto;
	margin-right: auto;
}
.bo-site .elementor.elementor .bo-split .e-con > .elementor-widget.bo-textspalte {
	margin-left: 0;
}
.bo-textspalte p {
	line-height: 1.7;
}
.bo-textspalte p:last-child {
	margin-bottom: 0;
}

/* §14 Kartice (bo-karten, bo-karte) — ista visina u redu, isti padding, dugme na dnu, bez podizanja (checklista §4). */
.bo-site .bo-karten {
	width: 100%;
}
.bo-site .bo-karten > .e-con.bo-karte {
	--width: auto;
	flex: 1 1 0%;
	min-width: 0;
	padding: 32px 28px;
	background: var(--beo-white);
	border: 1px solid var(--beo-line);
	border-radius: var(--beo-radius);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.bo-site .bo-karten--4 > .e-con.bo-karte { flex-basis: calc(25% - 18px); }
.bo-site .bo-karten--3 > .e-con.bo-karte { flex-basis: calc(33.333% - 16px); }
.bo-site .bo-karten--2 > .e-con.bo-karte { flex-basis: calc(50% - 12px); }
.bo-site .bo-karten--schmal {
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
}
@media screen and (max-width: 1024px) {
	.bo-site .bo-karten--4 > .e-con.bo-karte,
	.bo-site .bo-karten--3 > .e-con.bo-karte {
		flex-basis: calc(50% - 12px);
	}
}
@media screen and (max-width: 767px) {
	.bo-site .bo-karten > .e-con.bo-karte {
		flex-basis: 100%;
		padding: 24px 20px;
	}
}
/* na tint sekciji kartica je bela bez ivice (kontrast pozadine je dovoljan) */
.bo-site .bo-sekcija--tint .bo-karten > .e-con.bo-karte {
	border-color: transparent;
}
.bo-site .bo-karten > .e-con.bo-karte--hervor {
	background: var(--beo-light);
}
.bo-site .bo-sekcija--tint .bo-karten > .e-con.bo-karte--hervor {
	background: transparent;
	border: 1px solid #c3cfd2;
}
/* hover: zlatna gornja ivica 3 px, bez pomeranja i skaliranja */
.bo-site .bo-karten > .e-con.bo-karte--produkt:hover {
	box-shadow: inset 0 3px 0 var(--beo-gold), var(--beo-shadow);
}
/* dugme uvek na dnu kartice (Pomen zamka 10: pravilo na widgetu) */
.bo-site .bo-karte > .elementor-widget.bo-karte__cta {
	margin-top: auto;
}
.bo-karte__name :is(h2, h3) {
	margin: 0;
	line-height: 1.25;
}
.bo-karte .bo-karte__hinweis p {
	margin: 0;
	font-size: 15px;
	color: var(--beo-muted);
}

/* cena — najveci element kartice */
.bo-preis {
	margin: 0;
	line-height: 1.1;
	color: var(--beo-dark);
	font-variant-numeric: tabular-nums;
}
.bo-preis__vor,
.bo-preis__nach {
	font-size: 16px;
	font-weight: 500;
	color: var(--beo-muted);
}
.bo-preis__zahl {
	font-size: 44px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.bo-preis--text {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}
@media screen and (max-width: 767px) {
	.bo-preis__zahl { font-size: 40px; }
}

/* lista brzina/cena u kartici (Internet) */
.bo-site .bo-tarif .bo-tarif-liste {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}
.bo-tarif-liste li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--beo-line);
	font-variant-numeric: tabular-nums;
}
.bo-tarif-liste li:last-child {
	border-bottom: 0;
}
.bo-tarif__preis {
	font-weight: 700;
	white-space: nowrap;
}

/* §15 Prednosti sa ikonicom (Codevz service box u kartici) — jedna familija, 40 px u zlatnom krugu (checklista §9) */
.bo-site .bo-vorteil .services,
.bo-site .bo-vorteil .service_text,
.bo-site .bo-vorteil .service_text :is(h2, h3, p) {
	padding: 0 !important;
	text-align: left !important;
	box-shadow: none !important;
}
.bo-site .bo-vorteil .service_custom {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 80px !important;
	height: 80px !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
	border-radius: 50%;
	background: var(--beo-gold) !important;
}
.bo-site .bo-vorteil .service_custom i {
	position: static !important;
	top: auto !important;
	left: auto !important;
	width: auto !important;
	height: auto !important;
	transform: none !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 40px !important;
	line-height: 1 !important;
	color: var(--beo-dark) !important;
	background: none !important;
}
.bo-site .bo-vorteil .service_text :is(h2, h3) {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.3;
}
.bo-site .bo-vorteil .service_text .cz_wpe_content p {
	margin: 0;
	line-height: 1.6;
}

/* koraci (bo-schritte) */
.bo-schritt__nr {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	border-radius: 50%;
	background: var(--beo-dark);
	color: var(--beo-white);
	font-size: 20px;
	font-weight: 700;
}
.bo-schritt__text p {
	margin: 0;
}

/* §16 Dugmad — primarno je globalni stil teme (b3-01), sekundarno outline (sk_button u builderu).
   Oba iste visine (48); bez Codevz negativne donje margine. */
.bo-site .bo-btn .cz_btn {
	margin: 0;
}
/* Codevz tekst dugmeta ima vertical-align: middle -> dugme 49,5 px umesto 48 (izmereno 17.09.) */
.bo-site .cz_btn strong {
	vertical-align: baseline;
}
.bo-dugmad {
	width: 100%;
}
@media screen and (max-width: 767px) {
	.bo-dugmad > .elementor-widget-cz_button {
		width: 100%;
	}
	.bo-dugmad .cz_btn {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* §17 Traka partnera (bo-partner) — sivo, jace na hover (izvor je siva traka sa starog sajta) */
.bo-partner__liste {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 32px 40px;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bo-partner__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	margin: 0;
}
.bo-partner__item img {
	width: auto;
	max-width: 100%;
	height: 40px;
	/* jedna visina za sve (vektori, sesija 04) i jedan ton: sivo malo tamnije od izvornog, boja na hover.
	   Sama „grayscale + opacity" je svetle logotipe (snom) skoro izbrisala — mereno 17.09. */
	filter: grayscale(1) contrast(0.9) brightness(0.7);
	transition: filter 0.2s ease;
}
.bo-partner__item img:hover {
	filter: none;
}
@media screen and (max-width: 1024px) {
	.bo-partner__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
	.bo-partner__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
	.bo-partner__item img { height: 32px; }
}

/* §18 Support traka (kontakt CTA: §43) */
.bo-support-band {
	padding: 24px 32px;
	background: var(--beo-white);
	border: 1px solid var(--beo-line);
	border-radius: var(--beo-radius);
}
.bo-support__satz {
	margin: 0;
	font-size: 19px;
	line-height: 1.5;
}
.bo-support-band > .bo-support__text {
	flex: 1 1 420px;
}
@media screen and (max-width: 767px) {
	.bo-support-band { padding: 24px 20px; }
	.bo-support-band > .elementor-widget { width: 100%; }
	.bo-support__cta .cz_btn {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* §19 FAQ, konfigurator, forme */
.bo-faq-rahmen,
.bo-formular-rahmen {
	width: 100%;
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}
.bo-faq .cz_acc > div > div {
	margin-bottom: 12px;
}
.bo-faq .cz_acc_child i {
	color: var(--beo-dark);
}
.bo-rechner-sekcija .bo-kalkulator {
	width: 100%;
}

/* §20 Kontakt: adresa + forma (ikonice: §48; mapa: Google §49 po Markovoj odluci 26.09., rezerva staticna slika §48) */
.bo-kontakt-raster > .e-con.bo-karte--adresse {
	flex: 1 1 280px;
}
.bo-kontakt-raster > .e-con.bo-karte--formular {
	flex: 2 1 480px;
}
.bo-kontakt-raster > .e-con {
	padding: 32px 28px;
	background: var(--beo-white);
	border: 1px solid var(--beo-line);
	border-radius: var(--beo-radius);
}
.bo-sekcija--tint .bo-kontakt-raster > .e-con {
	border-color: transparent;
}
.bo-adresse p {
	margin: 0 0 16px;
	line-height: 1.6;
}
.bo-adresse a {
	display: inline-block;
	padding: 10px 0;
	color: var(--beo-dark);
	font-weight: 600;
}
/* OSM iframe mapa (sesije 03–08) zamenjena u sesiji 09: Google mapa (§49), rezerva staticna slika (§48); link ispod ostaje */
.bo-karte-osm__links {
	margin: 16px 0 0;
	text-align: center;
}
.bo-karte-osm__links a {
	display: inline-block;
	padding: 12px 4px;
	color: var(--beo-dark);
	font-weight: 600;
}

/* §21 Ostali blokovi: podela tekst/slika, PDF kartice, uredjaji, reference, „ab Januar 2027", skrivene cene */
.bo-split > .e-con.bo-split__text { flex: 1 1 420px; }
.bo-split > .e-con.bo-split__bild { flex: 1 1 360px; }
.bo-split__bild img {
	width: 100%;
	height: auto;
}
.bo-pdf-liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bo-pdf-liste li {
	margin: 0;
}
.bo-pdf-karte {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 24px;
	color: var(--beo-dark);
	background: var(--beo-white);
	border: 1px solid var(--beo-line);
	border-radius: var(--beo-radius);
	text-decoration: none;
	transition: box-shadow 0.2s ease;
}
.bo-pdf-karte:hover,
.bo-pdf-karte:focus {
	color: var(--beo-dark);
	box-shadow: inset 0 3px 0 var(--beo-gold), var(--beo-shadow);
}
.bo-pdf-karte .bo-ikona__svg {
	color: var(--beo-gold);
}
.bo-pdf-karte__titel {
	font-weight: 700;
	line-height: 1.3;
}
.bo-pdf-karte__typ {
	margin-top: auto;
	font-size: 15px;
	color: var(--beo-muted);
	text-decoration: underline;
}
.bo-geraet__bild {
	display: block;
	width: 200px;
	height: 200px;
	margin: 0 auto 8px;
	object-fit: contain;
}
.bo-geraet__text p {
	margin: 0;
	font-size: 17px;
}
.bo-geraet__preis {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.bo-site .bo-geraete-karten > .e-con.bo-karte > .bo-geraet__preis-wrap {
	margin-top: auto;
}
.bo-referenz__bild img {
	width: 100%;
	height: auto;
	border: 1px solid var(--beo-line);
	border-radius: var(--beo-radius-sm);
}
.bo-partnerschaft {
	margin: 0;
	text-align: center;
	color: var(--beo-muted);
}
.bo-partnerschaft a {
	color: var(--beo-dark);
	font-weight: 600;
}
.bo-wartung {
	padding: 20px 28px;
	border: 1px solid var(--beo-line);
	border-radius: var(--beo-radius);
	background: var(--beo-white);
}
.bo-sekcija--tint .bo-wartung {
	border-color: transparent;
}
.bo-wartung__text {
	margin: 0;
}
.bo-ab-hinweis {
	display: inline-block;
	margin: 0 auto;
	padding: 8px 20px;
	border-radius: 999px;
	background: var(--beo-dark);
	color: var(--beo-white);
	font-weight: 700;
	letter-spacing: 0.02em;
}
.bo-ab-hinweis-wrap {
	text-align: center;
}
/* cene koje cekaju Dejanovu potvrdu (D8) — u HTML-u, ne na ekranu */
.bo-price-pending,
.elementor-widget.bo-price-pending {
	display: none !important;
}

/* §22 Mete dodira >= 44 px (checklista §12, izmereno 17.09. na 390): pravne veze u podnozju (AGB 37 px),
   ikonica mobilnog menija (42 px), polja CF7 formi (43 px) */
.footer_2 .elms_right .elm_icon_text {
	display: inline-block;
	min-width: 44px;
	padding: 12px 6px;
	text-align: center;
}
.header_4 i.czico-063-menu-2 {
	width: 44px !important;
	height: 44px !important;
	line-height: 44px !important;
}
.bo-site .wpcf7 input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.bo-site .wpcf7 select {
	min-height: 48px;
}
.bo-site .wpcf7 .wpcf7-acceptance label,
.bo-site .wpcf7 .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
}
/* logo u mobilnom zaglavlju 150 x 38 -> meta 44 (padding + negativna margina: zaglavlje ostaje 88 px, logo na istom mestu) */
.bo-site .header_4 a.logo_is_img.logo {
	padding: 3px 0;
	margin: -3px 0;
}
/* Dugme „na vrh" (Codevz .backtotop): na telefonu pokriva cene desno u karticama i polja forme, a donja traka vec
   postoji — skriveno <= 767. Dok je konfigurator na ekranu skriva ga sam plugin (v1.5.1 stampa pravilo za
   `body.bqc-form-in-view`, pa vazi i kad se dugme pojavi kasnije); ovde je zato ostala samo granica 767. */
@media screen and (max-width: 767px) {
	.bo-site .backtotop {
		display: none !important;
	}
}

/* §23 Pocetna — hero (demo 8cae9d5): poruka + primarni CTA + sekundarni, ilustracija = slot home-hero */
.bo-hero .bo-hero__lead p {
	max-width: 560px;
	margin: 16px 0 0;
	font-size: 19px;
	line-height: 1.6;
	color: var(--beo-text);
}
.bo-hero .bo-hero__dugmad {
	margin-top: var(--beo-s4);
}
@media screen and (min-width: 1025px) {
	.bo-hero .bo-hero__bild .cz_image_in {
		width: 820px !important;
		margin: 150px 0 0 -250px !important;
	}
}
@media screen and (max-width: 1024px) {
	.bo-hero .bo-hero__lead p {
		margin-left: auto;
		margin-right: auto;
	}
	.bo-hero .bo-hero__dugmad {
		justify-content: center;
	}
	.bo-hero .bo-hero__bild img {
		max-width: 420px;
		margin: 0 auto;
	}
}
@media screen and (max-width: 767px) {
	.bo-hero .bo-hero__lead p {
		font-size: 17px;
	}
	.bo-hero .bo-hero__bild img {
		max-width: 280px;
	}
}

/* §24 BetterDocs u Xtra-i — omotac doka ima width 100% + padding 25 px sa content-box, pa strci 50 px
   (body overflow-x: hidden ga sece, zato scrollWidth to ne pokazuje — izmereno 17.09. na /docs/teamviewer/ 390) */
.bo-site .betterdocs-content-wrapper,
.bo-site .betterdocs-content-area,
.bo-site .betterdocs-content-inner-area {
	box-sizing: border-box;
	max-width: 100%;
}
/* Pretraga na /docs/: kolona `flex-flow: column wrap` meri naslov po max-content (424 px na 390), a traka pretrage
   ima width 100% + padding sa content-box (392 px) — oba strce preko desne ivice. Bez prelamanja kolone + border-box. */
.bo-site .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 {
	flex-wrap: nowrap;
	box-sizing: border-box;
	padding-left: 16px;
	padding-right: 16px;
}
.bo-site .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 > * {
	max-width: 100%;
}
.bo-site .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar {
	box-sizing: border-box;
	max-width: min(656px, 100%);
}
@media screen and (max-width: 767px) {
	.bo-site .betterdocs-search-heading h2.heading {
		font-size: 30px;
		line-height: 1.25;
	}
}

/* §25 Kontrast sitnog prigusenog teksta — tema ima globalno `p { opacity: 0.8 }` (Codevz opcija _css_p iz demo uvoza),
   pa --beo-muted na tint pozadini ispada 4,14:1 (Lighthouse 17.09., nadnaslovi sekcija). Bez providnosti: 6,6:1.
   Ostali pasusi zadrzavaju nameran izgled iz sesije 02 (DESIGN-TOKENS: tamna uz opacity .8 = #333447, 12,2:1). */
.bo-site .bo-kicker p,
.bo-site .bo-karte__hinweis p,
.bo-site p.bo-preis,
.bo-site .bo-partnerschaft,
.bo-site .wpcf7 p {
	opacity: 1; /* CF7 pakuje polja i dugme u <p> — bez ovoga forma izgleda izbledelo (dugme 80 %) */
}

/* §26 Sistem ilustracija (sesija 04) — nase SVG datoteke iz `clients/beonline/assets/illustrations/`.
   Stari demo rasteri su nosili belinu u samoj slici, pa su imali negativne margine; SVG je „pun", pa margine idu na 0. */
.bo-site .bo-illu img {
	display: block;
	max-width: 100%;
	height: auto;
}
@media screen and (min-width: 1025px) {
	/* hero pocetne: ilustracija puni svoju kolonu */
	.bo-hero .bo-hero__bild .cz_image_in {
		width: 100% !important;
		max-width: 620px !important;
		margin: 0 auto !important;
	}
	/* naslovna traka: ilustracije ostaju u koloni (demo je desnu izvlacio preko ivice ekrana) */
	.bo-traka .bo-traka__bild .cz_image_in {
		width: 100% !important;
		max-width: 300px !important;
		margin: 0 auto !important;
	}
	.bo-traka .bo-traka__bild--rechts .cz_image_in {
		max-width: 330px !important;
	}
	/* strane sa sopstvenom ilustracijom u traci (Webdesign, KI-Chatbot) — sira, 3:2 */
	.bo-traka .bo-traka__bild--rechts .img-slot-webdesign .cz_image_in,
	.bo-traka .bo-traka__bild--rechts .img-slot-ki-chatbot .cz_image_in {
		max-width: 380px !important;
		margin-left: -30px !important;
	}
}

/* ikonica proizvoda u kartici (pocetna) */

/* Kontakt CTA: od sesije 08 kompaktna tamna traka — §43 (bela kartica iz sesija 02/04 je povucena) */

/* Referenca ceka odobrenje klijenta — kartica postoji u strani, ali se ne prikazuje (kao `bo-price-pending` za cene) */
.bo-site .bo-ref-pending {
	display: none !important;
}
.bo-site .bo-referenz__bild img {
	border-radius: var(--beo-radius-sm);
	border: 1px solid var(--beo-line);
}

/* §27 Dugme u sadrzaju dokumenta (Gutenberg blok sa starog sajta, npr. „TeamViewer download") — sekundarno dugme
   sajta: outline tamno, visina 48, ista zaobljenja. Boja bloka („maximum yellow red") se ne koristi. */
.bo-site .betterdocs-content-area .wp-block-button__link,
.bo-site .betterdocs-single-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--beo-btn-h);
	padding: 0 24px;
	border: 2px solid var(--beo-dark);
	border-radius: var(--beo-radius-sm);
	background: transparent !important;
	color: var(--beo-dark) !important;
	font-family: var(--beo-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.bo-site .betterdocs-content-area .wp-block-button__link:hover,
.bo-site .betterdocs-content-area .wp-block-button__link:focus-visible,
.bo-site .betterdocs-single-content .wp-block-button__link:hover,
.bo-site .betterdocs-single-content .wp-block-button__link:focus-visible {
	background: var(--beo-dark) !important;
	color: var(--beo-white) !important;
}

/* §28 Mete za dodir na telefonu (WCAG 2.5.8, najmanje 24 px): veze u podnozju (telefon, e-posta, „Zur
   Wissensdatenbank"), mrvice i prelaz na prethodni/sledeci dokument bile su visoke 18–21 px (design review 17.09.). */
@media screen and (max-width: 767px) {
	.bo-site .footer_widget .textwidget a,
	.bo-site .betterdocs-breadcrumb .bread-link,
	.bo-site .docs-navigation a {
		display: inline-flex;
		align-items: center;
		min-height: 24px;
	}
}

/* §29 Pretraga dokumenata (BetterDocs modal): podrazumevana zelena (#00b884) nije iz palete sajta — aktivna kartica
   i njena ikonica idu na zlatnu/tamnu (setnja kao kupac, 17.09.). */
.bo-site .betterdocs-search-modal-layout-1 .betterdocs-tab-items.active {
	border-bottom-color: var(--beo-gold) !important;
}
.bo-site .betterdocs-search-modal-layout-1 .betterdocs-tab-items.active svg path {
	fill: var(--beo-gold) !important;
}

/* §30 Ikonice sajta — JEDNA familija: Lucide (child tema [23], shortcode `[bo_icon]`).
   Kartice: 28 px u zlatnom krugu 56 px; liste i sitniji redovi 20–24 px bez kruga.
   Codevz `czico-*` i Font Awesome ostaju samo tamo gde ih tema sama crta (strelice menija). */
.bo-site .bo-ikona {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--beo-dark);
	vertical-align: middle;
}
.bo-site .bo-ikona--krug {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--beo-gold);
}
.bo-site .bo-ikona__svg {
	display: block;
}
/* ikonica u kartici: razmak do naslova kao kod ranijeg Codevz kruga */
.bo-site .bo-karte .bo-ikona-wrap {
	margin-bottom: 20px;
}
/* Codevz krug u service box-u se vise ne koristi (ikonica je iznad njega) */
.bo-site .bo-vorteil .service_custom {
	display: none !important;
}
.bo-support-band > .bo-support__ikona {
	flex: 0 0 auto;
}
/* kvacice u Codevz listama: isti „check" iz Lucide familije (glif se menja maskom, markup ostaje) */
.bo-site .bo-liste i[class*="czico-072-check-mark"] {
	width: 1em;
	min-width: 0;
}
.bo-site .bo-liste i[class*="czico-072-check-mark"]::before {
	content: "";
	display: block;
	width: 1em;
	height: 1em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%20%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%20%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* ==========================================================================
   Sesija 07 — PREMIUM SLOJ: dubina (senke, gradijenti), 3D objekti, brojke, podnozje.
   Povratak jednom komandom (strane + child tema iz snimka od pre sesije 07):
     sh /root/cc-backups/beonline2/s07-pre/s07-rollback.sh
   ========================================================================== */
:root {
	--beo-shadow-card: 0 1px 2px rgba(0, 1, 25, 0.06), 0 14px 36px rgba(0, 1, 25, 0.08);
	--beo-shadow-card-hover: 0 2px 4px rgba(0, 1, 25, 0.07), 0 22px 48px rgba(0, 1, 25, 0.12);
	--beo-tint-top: #eef4f5;
	--beo-tint-bottom: #e3ecee;
}

/* §31 Sekcije na tint pozadini: blagi vertikalni gradijent. Boja sekcije (#eaf1f2, Elementor) ostaje osnova —
   design review i ritam belo/tint citaju nju; gradijent je samo sloj iznad (sredina gradijenta = #eaf1f2). */
.bo-site .bo-sekcija--tint {
	background-image: linear-gradient(180deg, var(--beo-tint-top) 0%, var(--beo-tint-bottom) 100%);
}

/* §32 Zlatna linija-akcent iznad naslova — ujednaceno za svako zaglavlje sekcije (i bez nadnaslova, npr.
   „Häufige Fragen", „Unsere Partner"); ranija crtica levo od nadnaslova (§13) se gasi.
   Elementor koristi ::before kontejnera za overlay pozadine (position:absolute, top/left, border promenljive) —
   zato se ovde vraca u tok (static) i brisu nasledjene osobine; bo-kopf nema overlay. */
.bo-site .bo-kopf::before {
	content: "";
	display: block;
	position: static;
	flex: 0 0 auto;
	opacity: 1;
	mix-blend-mode: normal;
	border: 0;
	transition: none;
	width: 40px;
	height: 3px;
	margin: 0 0 4px;
	border-radius: 2px;
	background: var(--beo-gold);
}
.bo-site .bo-kopf--mitte::before {
	margin-left: auto;
	margin-right: auto;
}
.bo-site .bo-kopf .bo-kicker p::before {
	display: none;
}

/* §33 Kartice: slojevita meka senka, ivica 1 px ostaje; hover podize karticu 3 px i jaca senku (na ovom sajtu
   dozvoljeno — nalog sesije 07). Samo na uredjajima sa misem; bez skoka rasporeda (transform). */
.bo-site .bo-karten > .e-con.bo-karte,
.bo-site .bo-kontakt-raster > .e-con,
.bo-site .bo-support-band,
.bo-site .bo-pdf-karte,
.bo-site .bo-wartung {
	box-shadow: var(--beo-shadow-card);
}
.bo-site .bo-karten > .e-con.bo-karte {
	transition: opacity 0.15s ease-out, transform 0.15s ease-out, box-shadow 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) {
	.bo-site .bo-karten > .e-con.bo-karte:hover {
		transform: translateY(-3px);
		box-shadow: var(--beo-shadow-card-hover);
	}
	.bo-site .bo-karten > .e-con.bo-karte--produkt:hover {
		box-shadow: inset 0 3px 0 var(--beo-gold), var(--beo-shadow-card-hover);
	}
	.bo-site .bo-pdf-karte:hover,
	.bo-site .bo-pdf-karte:focus {
		box-shadow: inset 0 3px 0 var(--beo-gold), var(--beo-shadow-card-hover);
	}
}

/* §34 Ulazna animacija kartica: fade-up 150 ms, jednom pri skrolu (js/beo-premium.js dodaje bo-reveal samo
   karticama ispod prvog ekrana). Samo opacity/transform — raspored se ne pomera (CLS 0). */
.bo-site .bo-reveal {
	opacity: 0;
	transform: translateY(10px);
}
.bo-site .bo-reveal.is-in {
	opacity: 1;
	transform: none;
}
.bo-site .bo-zahl.bo-reveal {
	transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
	.bo-site .bo-reveal {
		opacity: 1;
		transform: none;
	}
}

/* §35 Speedtest (Ookla, beonline.speedtestcustom.com) u modalu — 860 x 640, Esc i klik van prozora zatvaraju,
   iframe se ucitava tek na klik (js/beo-premium.js). Ookla ne salje X-Frame-Options, ali njen skript ne crta test u
   iframe-u na https strani dok nalog nema „HTTPS only" (18.09.) — zato je modal iskljucen (dugme otvara novi tab) i
   ukljucuje se klasom bo-speedtest--modal kad se nalog podesi. Stil ostaje spreman. */
.bo-modal {
	width: min(860px, calc(100vw - 32px));
	height: min(640px, calc(100vh - 32px));
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--beo-radius);
	background: var(--beo-white);
	box-shadow: 0 24px 64px rgba(0, 1, 25, 0.35);
	overflow: hidden;
}
.bo-modal::backdrop {
	background: rgba(0, 1, 25, 0.62);
}
.bo-modal__bar {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 56px;
	padding: 0 6px 0 20px;
	background: var(--beo-dark);
	border-bottom: 2px solid var(--beo-gold);
}
.bo-modal__titel {
	flex: 1 1 auto;
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--beo-white);
	opacity: 1;
}
.bo-modal__neu {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 15px;
	color: var(--beo-white);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.bo-modal__neu:hover,
.bo-modal__neu:focus {
	color: var(--beo-gold);
}
.bo-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--beo-radius-sm);
	background: transparent;
	color: var(--beo-white);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}
.bo-modal__close:hover,
.bo-modal__close:focus-visible {
	background: rgba(255, 255, 255, 0.12);
}
.bo-modal__body,
.bo-modal__frame {
	display: block;
	width: 100%;
	height: calc(100% - 56px);
	border: 0;
}
.bo-modal__frame {
	height: 100%;
}

/* §36 Brojke (bo-zahlen) — tamna traka sa cinjenicama iz content/ (2003, 20+ Jahre, 275+ Sender, 10 Gbit/s).
   Zlatna na tamnoj = 7,7:1; tekst beo 85 %. Nije bo-sekcija, pa ne kvari ritam belo/tint. */
.bo-site .bo-zahlen-band {
	background-color: var(--beo-dark);
	background-image: radial-gradient(ellipse 60% 120% at 50% 0%, rgba(200, 151, 5, 0.10) 0%, rgba(200, 151, 5, 0) 70%),
		linear-gradient(180deg, #000119 0%, #07102f 100%);
	border-top: 1px solid rgba(200, 151, 5, 0.55);
}
.bo-zahlen__liste {
	display: grid;
	grid-template-columns: repeat(var(--bo-zahlen, 4), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
.bo-zahl {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px 16px;
	text-align: center;
}
.bo-zahl + .bo-zahl {
	border-left: 1px solid rgba(234, 241, 242, 0.14);
}
.bo-zahl__wert {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--beo-gold);
	font-variant-numeric: tabular-nums;
}
.bo-zahl__text {
	max-width: 220px;
	font-size: 16px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.85);
}
@media screen and (max-width: 1024px) {
	.bo-zahlen__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 28px;
	}
	.bo-zahl:nth-child(odd) {
		border-left: 0;
	}
}
@media screen and (max-width: 767px) {
	.bo-zahl__wert {
		font-size: 36px;
	}
	.bo-zahl__text {
		font-size: 15px;
	}
}

/* §37 Podnozje: tamni gradijent + tanka zlatna linija po grebenu talasa (img/footer-welle.svg — isti oblik kao
   raniji JPG talas iz opcija teme, koji se ovim samo prekriva). Tekst: beli / sivi na #000119–#0a1233 >= 4,5:1. */
.bo-site footer.page_footer {
	background-image: url("img/footer-welle.svg?v=2"), linear-gradient(180deg, #000119 0, #000119 300px, #0a1233 100%) !important;
	background-size: 100% auto, 100% 100% !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: center top, center top !important;
}

/* §38 Hero pocetne — 3D cluster (b3_lib.hero_cluster): ruter u sredini, TV / telefon / smartfon oko njega, meke senke,
   zlatni sjaj i prsten (zlatna je u CSS-u, raster nosi samo jedan akcenat). Pozadina: radijalni gradijent tint -> belo
   + jedva vidljiva mreza (4 %). Lagan „float" (6 px, 5 s); prefers-reduced-motion ga gasi. Kutija ima aspect-ratio,
   slike width/height — raspored se ne pomera (CLS 0). Zaglavlje je `absolute` (194 px) — cluster pocinje ispod njega. */
.bo-site .bo-hero {
	position: relative;
	isolation: isolate;
	background-image: radial-gradient(ellipse 62% 78% at 27% 58%, #e3edef 0%, rgba(234, 241, 242, 0.62) 42%, rgba(255, 255, 255, 0) 74%);
}
.bo-site .bo-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: linear-gradient(rgba(0, 1, 25, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 1, 25, 0.04) 1px, transparent 1px);
	background-size: 44px 44px;
	background-position: center;
	-webkit-mask-image: radial-gradient(ellipse 58% 70% at 30% 58%, #000 0%, transparent 78%);
	mask-image: radial-gradient(ellipse 58% 70% at 30% 58%, #000 0%, transparent 78%);
}
.bo-site .bo-hero .bo-hero3d-wrap {
	width: 100%;
	max-width: 100%;
}
.bo-hero3d {
	position: relative;
	width: 100%;
	max-width: 600px;
	aspect-ratio: 600 / 440;
	margin: 0 auto;
}
.bo-hero3d__glow {
	position: absolute;
	left: 50%;
	top: 56%;
	width: 80%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(200, 151, 5, 0.18) 0%, rgba(200, 151, 5, 0.07) 38%, rgba(200, 151, 5, 0) 68%);
}
.bo-hero3d__ring {
	position: absolute;
	left: 50%;
	top: 83%;
	width: 90%;
	height: 21%;
	transform: translate(-50%, -50%);
	border: 1.5px solid rgba(200, 151, 5, 0.55);
	border-radius: 50%;
}
.bo-hero3d__ring::after {
	content: "";
	position: absolute;
	inset: 16% 13%;
	border: 1px dashed rgba(0, 1, 25, 0.15);
	border-radius: 50%;
}
/* bez filter: drop-shadow — na providnoj slici Chrome iscrta svetao pravougaonik preko pozadine ispod (izmereno
   18.09. na traci Internet: nestaje cim se filter ukloni); senku nosi sam render + zlatni prsten sa mekom senkom */
.bo-hero3d__obj {
	position: absolute;
	height: auto;
	max-width: none;
	animation: bo-float 5s ease-in-out infinite;
}
.bo-hero3d__obj--router { left: 24%; top: 41%; width: 52%; z-index: 3; }
.bo-hero3d__obj--tv { left: 4%; top: 16%; width: 25%; z-index: 2; animation-delay: -1.25s; }
.bo-hero3d__obj--telefon { left: 67%; top: 9%; width: 25%; animation-delay: -2.5s; }
.bo-hero3d__obj--smartphone { left: 82%; top: 44%; width: 13%; animation-delay: -3.75s; }
@keyframes bo-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}
@media screen and (min-width: 1025px) {
	.bo-hero3d { margin-top: 104px; }
}
@media screen and (max-width: 1024px) {
	.bo-hero3d { max-width: 440px; margin-top: 8px; }
}
@media screen and (max-width: 767px) {
	.bo-hero3d { max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
	.bo-hero3d__obj,
	.bo-site .bo-traka--3d .bo-traka__3d img {
		animation: none;
	}
}

/* §39 Naslovna traka sa 3D objektom (b3_lib.band(obj=…), klasa bo-traka--3d): tekst levo, JEDAN objekat strane desno
   (Internet ruter, Telefonie telefon, TV televizor …) sa senkom na svetlom gradijentu i zlatnim prstenom.
   Donja ivica trake ostaje #eaf1f2 (talas ispod trake pocinje tom bojom). Na <= 1024 objekat se gasi (§12). */
@media screen and (min-width: 1025px) {
	.bo-site .bo-traka--3d {
		background-image: radial-gradient(ellipse 40% 70% at 77% 44%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 45%, rgba(255, 255, 255, 0) 72%);
	}
	/* red trake u istoj sirini kao sadrzaj sekcija (1200 px) — tekst pocinje gde i kartice ispod */
	.bo-site .bo-traka--3d > .e-con-inner {
		width: 100%;
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
	.bo-site .bo-traka--3d .bo-traka__dugmad {
		justify-content: flex-start;
	}
	.bo-site .bo-traka--3d .bo-traka__dugmad .cz_btn_center {
		text-align: left;
	}
	.bo-site .bo-traka--3d .bo-traka__bild--rechts {
		position: relative;
	}
	/* prsten ispod objekta; ::before kontejnera je kod Elementora overlay (top/left/opacity iz njegovih promenljivih) */
	.bo-site .bo-traka--3d .bo-traka__bild--rechts::before {
		content: "";
		position: absolute;
		top: auto;
		left: 50%;
		bottom: 8%;
		opacity: 1;
		mix-blend-mode: normal;
		transition: none;
		width: 74%;
		height: 16%;
		transform: translateX(-50%);
		border: 1.5px solid rgba(200, 151, 5, 0.5);
		border-radius: 50%;
		background: radial-gradient(ellipse at center, rgba(0, 1, 25, 0.16) 0%, rgba(0, 1, 25, 0.05) 45%, rgba(0, 1, 25, 0) 72%);
		pointer-events: none;
	}
	.bo-site .bo-traka--3d .bo-traka__3d .cz_image_in {
		width: 100% !important;
		max-width: 340px !important;
		margin: 0 auto !important;
	}
	/* visoki predmeti (smartfon 456 x 800, stit, TV) ne smeju da prerastu traku: najvise 320 px visine */
	.bo-site .bo-traka--3d .bo-traka__3d img {
		display: block;
		width: auto;
		max-width: 100%;
		max-height: 320px;
		margin: 0 auto;
		animation: bo-float 5s ease-in-out infinite;
	}
}

/* §40 3D ikonice proizvoda (kartice na pocetnoj, 72 px) — isti set kao hero; Lucide ostaje u listama i ostalim
   karticama (jedna familija po sekciji). Iza ikonice mek zlatni krug (zlatna iz CSS-a, ne iz rastera). */
.bo-site .bo-3d-ikona {
	position: relative;
	width: 72px;
	height: 72px;
	margin-bottom: 12px;
}
.bo-site .bo-3d-ikona::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: linear-gradient(145deg, #f4f8f9 0%, #e2ebed 100%);
	box-shadow: inset 0 0 0 1px rgba(200, 151, 5, 0.4);
}
.bo-site .bo-karte--hervor .bo-3d-ikona::before {
	background: linear-gradient(145deg, #ffffff 0%, #eef3f4 100%);
}
.bo-site .bo-3d-ikona__img {
	position: relative;
	display: block;
	width: 72px;
	height: 72px;
}

/* §41 Über uns, „Über beOnline": 3D globus (isti set kao trake) sa zlatnim prstenom ispod; traka sa brojkama —
   isti razmak gore i dole (widget bez Elementorovog donjeg razmaka). */
.bo-site .bo-split__3d img {
	max-width: 480px;
	margin: 0 auto;
	animation: bo-float 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.bo-site .bo-split__3d img {
		animation: none;
	}
}
.bo-site .bo-zahlen-band .bo-zahlen,
.bo-site .bo-zahlen-band .bo-zahlen .elementor-widget-container {
	margin: 0;
}

/* §42 Zaglavlje bez treperenja (sesija 08, nalog §1). Snimljeno PRE izmene (scripts/s08/: video + zapis svakog kadra,
   1440/1280/1229/1152/390, brza mreza i hladno uz Slow 4G + CPU 4x): (1) ikonice zaglavlja su glifovi fonta czicons
   (84 KB, font-display: swap) — dok font ne stigne (0,2–1,6 s na hladnom ucitavanju) telefon u gornjoj traci, strelice
   menija i dugme menija na telefonu su kvadratici, pa „trepnu"; (2) Codevz animira `all` 0,22 s na redu 2 i sirinu
   `.row` 0,5 s pri prelazu sticky <-> normalno — pri povratku na vrh meni klizi ~20 px; (3) Roboto 500 (meni, traka)
   nije bio preload-ovan — meni se ~2 s posle prvog iscrtavanja pomeri 9 px (preload za >= 1100 px: functions.php [1]).
   Popravka na uzroku: glif crta Lucide maska (ista familija kao ostatak sajta, bez fonta), od prelaza ostaje samo
   klizanje reda pametnog sticky-ja (transform). Markup Codevz-a se ne menja. */
.bo-site .header_1 .elm_icon_text i::before,
.bo-site .header_4 .elm_icon_text i::before,
.bo-site .header_2 #menu_header_2 > li > a .cz_indicator::before,
.bo-site .header_4 i.icon_offcanvas_menu::before,
.bo-site .header_4 i.icon_mobile_offcanvas_menu::before {
	content: "" !important;
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--beo-ico) no-repeat center / contain;
	mask: var(--beo-ico) no-repeat center / contain;
	vertical-align: -0.125em;
}
.bo-site .header_1 a[href^="tel:"] i,
.bo-site .header_4 a[href^="tel:"] i {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13.832%2016.568a1%201%200%200%200%201.213-.303l.355-.465A2%202%200%200%201%2017%2015h3a2%202%200%200%201%202%202v3a2%202%200%200%201-2%202A18%2018%200%200%201%202%204a2%202%200%200%201%202-2h3a2%202%200%200%201%202%202v3a2%202%200%200%201-.8%201.6l-.468.351a1%201%200%200%200-.292%201.233%2014%2014%200%200%200%206.392%206.384%22%2F%3E%3C%2Fsvg%3E");
}
.bo-site .header_1 a[href^="mailto:"] i,
.bo-site .header_4 a[href^="mailto:"] i {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m22%207-8.991%205.727a2%202%200%200%201-2.009%200L2%207%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E");
}
.bo-site .header_2 #menu_header_2 > li > a .cz_indicator {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
}
.bo-site .header_4 i.icon_offcanvas_menu,
.bo-site .header_4 i.icon_mobile_offcanvas_menu {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16%22%2F%3E%3Cpath%20d%3D%22M4%2012h16%22%2F%3E%3Cpath%20d%3D%22M4%2018h16%22%2F%3E%3C%2Fsvg%3E");
}
/* donja fiksna navigacija na telefonu (Codevz „mobile_fixed_navigation": Home, Support, Telefon, Kontakt — server je
   salje samo kad wp_is_mobile() prepozna telefon, zato je prve reprodukcije bez Android UA nisu videle). Snimljeno
   hladnim ucitavanjem uz Android UA (scripts/s08/s08-hladno-repro.py --kolacic): ikonice su glifovi czicons —
   kvadratici ~1,2 s dok font ne stigne; kolacic traka se prvo iscrta na dnu, pa je mobile-nav.js ~0,8 s kasnije podigne
   iznad navigacije (bottom = visina navigacije + 5 px) — skok 82 px, Lighthouse CLS 0,032 na `/`.
   Popravka: Lucide maske umesto glifova; visina navigacije fiksna (77 px, izmereno 77,19), pa skripta uvek racuna
   82 px — isto rastojanje koje CSS daje kolacic traci od prvog iscrtavanja. */
.bo-site .xtra-fixed-mobile-nav > a i::before {
	content: "" !important;
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--beo-ico) no-repeat center / contain;
	mask: var(--beo-ico) no-repeat center / contain;
	vertical-align: -0.125em;
}
.bo-site .xtra-fixed-mobile-nav i.czico-064-home-4 {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2021v-8a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v8%22%20%2F%3E%3Cpath%20d%3D%22M3%2010a2%202%200%200%201%20.709-1.528l7-5.999a2%202%200%200%201%202.582%200l7%205.999A2%202%200%200%201%2021%2010v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%20%2F%3E%3C%2Fsvg%3E");
}
.bo-site .xtra-fixed-mobile-nav i.czico-010-support {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011h3a2%202%200%200%201%202%202v3a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-5Zm0%200a9%209%200%201%201%2018%200m0%200v5a2%202%200%200%201-2%202h-1a2%202%200%200%201-2-2v-3a2%202%200%200%201%202-2h3Z%22%20%2F%3E%20%3Cpath%20d%3D%22M21%2016v2a4%204%200%200%201-4%204h-5%22%20%2F%3E%3C%2Fsvg%3E");
}
.bo-site .xtra-fixed-mobile-nav i.czico-123-call {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13.832%2016.568a1%201%200%200%200%201.213-.303l.355-.465A2%202%200%200%201%2017%2015h3a2%202%200%200%201%202%202v3a2%202%200%200%201-2%202A18%2018%200%200%201%202%204a2%202%200%200%201%202-2h3a2%202%200%200%201%202%202v3a2%202%200%200%201-.8%201.6l-.468.351a1%201%200%200%200-.292%201.233%2014%2014%200%200%200%206.392%206.384%22%20%2F%3E%3C%2Fsvg%3E");
}
.bo-site .xtra-fixed-mobile-nav i.czico-088-envelope-of-white-paper {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m22%207-8.991%205.727a2%202%200%200%201-2.009%200L2%207%22%20%2F%3E%20%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%20%2F%3E%3C%2Fsvg%3E");
}
.bo-site .xtra-fixed-mobile-nav {
	height: 77px;
	box-sizing: border-box;
}
@media screen and (max-width: 768px) {
	.bo-site:has(.xtra-fixed-mobile-nav) .xtra-cookie {
		bottom: 82px;
	}
}
/* telefon i mejl u mobilnom zaglavlju: samo ikonice (mete 44 px); tekst ostaje kao pristupacno ime */
.bo-site .header_4 .elm_icon_text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 20px;
}
.bo-site .header_4 .elm_icon_text .it_text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
/* prelazi reda 2: samo klizanje pametnog sticky-ja; bez `all`, sirine i paddinga */
.bo-site .header_2,
.bo-site .header_2.onSticky {
	transition: transform .4s ease-in-out !important;
}
.bo-site .header_2 .row,
.bo-site .onSticky .row {
	transition: none !important;
}
/* uski telefoni (< 360 px): logo + telefon + mejl + meni ne staju u red od ~290 px (izmereno na 320: telefon pada ispod
   menija) — manji logo, mete ikonica ostaju 44 px */
@media screen and (max-width: 359px) {
	.bo-site .header_4 .logo img {
		width: 118px !important;
		height: auto !important;
	}
	.bo-site .header_4 .cz_elm {
		margin-right: 0 !important;
	}
}

/* §43 Kontakt CTA (sesija 08, nalog §2): kompaktan tamni pojas unutar kontejnera umesto bele kartice preko celog
   ekrana — max 1040 px, ~190 px visine na desktopu. #000119, tanka zlatna linija gore (isti prelaz kao linija podnozja,
   img/footer-welle.svg: providno -> zlatna 90 % -> providno), radius 8, blaga senka, mek zlatni sjaj iza slusalice.
   Linija i sjaj su slojevi pozadine, ne ::before — Elementor ::before kontejnera koristi za overlay (vidi §32).
   Kontrast (izracunat, najgori kraj gradijenta #050b2a): naslov beo 19,3:1 · recenica #c3cad6 11,7:1 · telefon
   zlatni 7,2:1 · e-mail #e6ebf2 16,1:1 · dugme (primarno, tamni tekst na zlatnoj) 7,7:1. Tablet (<= 1024): kolona, centrirano; telefon (<= 767): telefon i
   dugme pune sirine (mete dodira >= 48 px). */
.bo-site .bo-kontakt-cta .bo-kontakt-band {
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
	padding: 32px 40px;
	background:
		linear-gradient(90deg, rgba(200, 151, 5, 0) 0%, rgba(200, 151, 5, 0.9) 18%, rgba(200, 151, 5, 0.9) 82%, rgba(200, 151, 5, 0) 100%) center top / 100% 2px no-repeat,
		radial-gradient(ellipse 30% 95% at 9% 50%, rgba(200, 151, 5, 0.16) 0%, rgba(200, 151, 5, 0) 70%),
		linear-gradient(180deg, #000119 0%, #050b2a 100%);
	/* puna boja ispod gradijenata: bez nje axe (Lighthouse) racuna belu pozadinu sekcije i prijavi kontrast 1,2–2,7:1 */
	background-color: var(--beo-dark);
	border-radius: var(--beo-radius);
	box-shadow: 0 2px 4px rgba(0, 1, 25, 0.10), 0 18px 40px rgba(0, 1, 25, 0.18);
}
/* Elementor pun kontejner ima width: var(--width) = 100 % — u redu bi desna kolona (flex 0 0 auto) uzela svih 960 px,
   a leva 0 (izmereno pri prvom upisu: naslov slovo po slovo, ikonica 0 px zbog max-width 100 %) */
.bo-site .bo-kontakt-band > .bo-kontakt-band__links {
	flex: 1 1 0%;
	width: auto;
	min-width: 0;
}
.bo-site .bo-kontakt-band > .bo-kontakt-band__rechts {
	flex: 0 0 auto;
	width: auto;
}
.bo-site .bo-kontakt-band__links > .bo-kontakt-band__text {
	flex: 1 1 0%;
	width: auto;
	min-width: 0;
}
.bo-site .bo-kontakt-band p {
	opacity: 1; /* tema: p { opacity: .8 } (§25) */
}
.bo-site .bo-kontakt-band .cz_title_content {
	margin: 0;
}
.bo-site .bo-kontakt-band__titel h2 {
	margin: 0;
	color: var(--beo-white);
	line-height: 1.25;
	text-wrap: balance;
}
.bo-site .bo-kontakt-band__satz p {
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	color: #c3cad6;
}
.bo-site .bo-kontakt-band__tel,
.bo-site .bo-kontakt-band__mail {
	margin: 0;
	text-align: right;
}
.bo-site .bo-kontakt-band__tel {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.bo-site .bo-kontakt-band__tel a {
	display: inline-block;
	color: var(--beo-gold);
	text-decoration: none;
}
.bo-site .bo-kontakt-band__mail {
	font-size: 17px;
	line-height: 1.4;
}
.bo-site .bo-kontakt-band__mail a {
	color: #e6ebf2;
	text-decoration: underline;
	text-decoration-color: rgba(200, 151, 5, 0.6);
	text-underline-offset: 4px;
}
.bo-site .bo-kontakt-band__tel a:hover,
.bo-site .bo-kontakt-band__tel a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}
.bo-site .bo-kontakt-band__mail a:hover,
.bo-site .bo-kontakt-band__mail a:focus-visible {
	color: var(--beo-white);
	text-decoration-color: var(--beo-gold);
}
.bo-site .bo-kontakt-band a:focus-visible {
	outline: 2px solid var(--beo-gold);
	outline-offset: 3px;
	border-radius: 2px;
}
.bo-site .bo-kontakt-band__cta {
	margin-top: 8px;
}
/* 3D slusalica (96 px): umesto svetlog kruga iz §40 — mek zlatni sjaj na tamnom */
.bo-site .bo-3d-ikona.bo-kontakt-band__ikona {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	margin: 0;
}
.bo-site .bo-kontakt-band__ikona::before {
	background: radial-gradient(circle, rgba(200, 151, 5, 0.22) 0%, rgba(200, 151, 5, 0.07) 52%, rgba(200, 151, 5, 0) 70%);
	box-shadow: none;
}
.bo-site .bo-kontakt-band__ikona .bo-3d-ikona__img {
	width: 96px;
	height: 96px;
}
@media screen and (max-width: 1024px) {
	.bo-site .bo-kontakt-cta .bo-kontakt-band {
		padding: 32px 24px;
		text-align: center;
	}
	.bo-site .bo-kontakt-band > .bo-kontakt-band__links,
	.bo-site .bo-kontakt-band > .bo-kontakt-band__rechts,
	.bo-site .bo-kontakt-band__links > .bo-kontakt-band__text {
		flex: 0 0 auto;
		width: 100%;
	}
	.bo-site .bo-kontakt-band__tel,
	.bo-site .bo-kontakt-band__mail {
		text-align: center;
	}
	/* Codevz: .cz_title_content je display:table uz levu ivicu, omotac dugmeta .cz_btn_right je float:right */
	.bo-site .bo-kontakt-band .cz_title_content {
		margin-left: auto;
		margin-right: auto;
	}
	.bo-site .bo-kontakt-band__cta .cz_btn_right {
		float: none;
		text-align: center;
	}
	.bo-site .bo-kontakt-band__cta .cz_btn {
		display: inline-block;
	}
	.bo-site .bo-3d-ikona.bo-kontakt-band__ikona,
	.bo-site .bo-kontakt-band__ikona .bo-3d-ikona__img {
		width: 80px;
		height: 80px;
	}
}
@media screen and (max-width: 767px) {
	.bo-site .bo-kontakt-cta .bo-kontakt-band {
		padding: 28px 20px;
	}
	.bo-site .bo-kontakt-band__tel {
		font-size: 26px;
	}
	.bo-site .bo-kontakt-band__tel-wrap :is(.cz_title_content, .cz_wpe_content) {
		display: block;
		width: 100%;
	}
	.bo-site .bo-kontakt-band__tel a {
		display: block;
		padding: 10px 12px;
		border: 1px solid rgba(200, 151, 5, 0.55);
		border-radius: var(--beo-radius-sm);
	}
	.bo-site .bo-kontakt-band__mail a {
		display: inline-block;
		padding: 12px 0; /* meta dodira >= 44 px (design review: 43,8 px sa 10 px) */
	}
	.bo-site .bo-kontakt-band__cta {
		margin-top: 4px;
	}
	.bo-site .bo-kontakt-band__cta .cz_btn {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* §44 Liste-komponente (sesija 08, nalog §3): Xtra core.css `.cz_post_content ul { list-style: disc;
   margin: 0 0 30px; margin-inline-start: 40px }` (0,1,1) je jaca od naseg `.bo-pdf-liste` (0,1,0) — izmereno na
   /senderliste-2/: tacka pored svake PDF kartice i mreza pomerena 40 px udesno. Isti obrazac (grep svih strana):
   brojke (bo-zahlen__liste) i partneri (bo-partner__liste) — tamo su stavke flex, pa se tacka ne vidi, ali je mreza
   bila 40 px van sredine i imala 30 px ispod. Pravne strane (AGB, Datenschutz) zadrzavaju tacke. */
.bo-site :is(.bo-pdf-liste, .bo-partner__liste, .bo-zahlen__liste, .bo-adresse__liste) {
	margin: 0;
	padding: 0;
	list-style: none;
}
.bo-site :is(.bo-pdf-liste, .bo-partner__liste, .bo-zahlen__liste, .bo-adresse__liste) > li {
	list-style: none;
}

/* §45 3D ikonice iz serije moudesain1 van kartica proizvoda (sesija 08, nalog §4) — uvek cela sekcija 3D:
   Support traka (pitanje i odgovor, 64 px) i PDF kartice na Senderliste (dokument, 56 px, u redu sa naslovom). */
.bo-site .bo-3d-ikona.bo-support__ikona {
	width: 64px;
	height: 64px;
	margin: 0;
}
.bo-site .bo-support__ikona .bo-3d-ikona__img {
	width: 64px;
	height: 64px;
}
.bo-site .bo-pdf-karte {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 16px;
	row-gap: 2px;
	align-items: center;
	padding: 20px;
}
.bo-site .bo-pdf-karte__ikona {
	grid-row: 1 / span 2;
	position: relative;
	width: 56px;
	height: 56px;
}
.bo-site .bo-pdf-karte__ikona::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: linear-gradient(145deg, #f4f8f9 0%, #e2ebed 100%);
	box-shadow: inset 0 0 0 1px rgba(200, 151, 5, 0.4);
}
.bo-site .bo-pdf-karte__ikona .bo-3d-ikona__img {
	position: relative;
	display: block;
	width: 56px;
	height: 56px;
}
.bo-site .bo-pdf-karte__titel {
	align-self: end;
}
.bo-site .bo-pdf-karte__typ {
	align-self: start;
	margin-top: 0;
}

/* §46 Ikonice u formama (sesija 09, nalog §5): Lucide ikonica levo u svakom polju — CF7 (Kontakt, Webdesign, KI-Chatbot),
   korak 2 i korak 0 kalkulatora. Maska na OMOTACU polja (::before), ne pozadinska slika polja: Chrome pri automatskom
   popunjavanju gasi background-image polja (UA stil `:-internal-autofill-selected`, !important), pa bi ikonica nestala a
   razmak ostao. Sive (#6b7280, 4,8:1 na beloj), zlatne na fokusu (:focus-within). Placeholder ostaje; tekst ne ide preko
   ikonice (padding-left 44 px). Izmereno: CF7 polja 48 px (tekst od vrha omotaca), kalkulator: labela 20 px + 4, polje 44 px
   (napomena 92 px), korak 0 polje 48 px. Firma i Website (Anfrage Digital) nisu u listi naloga: building-2 i globe. */
.bo-site .wpcf7-form-control-wrap[data-name="your-name"],
.bo-site .wpcf7-form-control-wrap[data-name="your-email"],
.bo-site .wpcf7-form-control-wrap[data-name="your-phone"],
.bo-site .wpcf7-form-control-wrap[data-name="your-subject"],
.bo-site .wpcf7-form-control-wrap[data-name="your-message"],
.bo-site .wpcf7-form-control-wrap[data-name="your-company"],
.bo-site .wpcf7-form-control-wrap[data-name="your-website"],
.bo-site .bqc .bqc-field--name,
.bo-site .bqc .bqc-field--address,
.bo-site .bqc .bqc-field--zip,
.bo-site .bqc .bqc-field--city,
.bo-site .bqc .bqc-field--email,
.bo-site .bqc .bqc-field--phone,
.bo-site .bqc .bqc-field--note,
.bo-site .bqc .bqc-step0__combo {
	position: relative;
}
.bo-site .bqc .bqc-fields .bqc-field {
	--beo-form-ico-top: 37px; /* labela 20 px + 4 px + (44 - 18) / 2 */
}
.bo-site .wpcf7-form-control-wrap[data-name="your-name"]::before,
.bo-site .wpcf7-form-control-wrap[data-name="your-email"]::before,
.bo-site .wpcf7-form-control-wrap[data-name="your-phone"]::before,
.bo-site .wpcf7-form-control-wrap[data-name="your-subject"]::before,
.bo-site .wpcf7-form-control-wrap[data-name="your-message"]::before,
.bo-site .wpcf7-form-control-wrap[data-name="your-company"]::before,
.bo-site .wpcf7-form-control-wrap[data-name="your-website"]::before,
.bo-site .bqc .bqc-field--name::before,
.bo-site .bqc .bqc-field--address::before,
.bo-site .bqc .bqc-field--zip::before,
.bo-site .bqc .bqc-field--city::before,
.bo-site .bqc .bqc-field--email::before,
.bo-site .bqc .bqc-field--phone::before,
.bo-site .bqc .bqc-field--note::before,
.bo-site .bqc .bqc-step0__combo::before {
	content: "";
	position: absolute;
	z-index: 2;
	left: 14px;
	top: var(--beo-form-ico-top, 15px);
	width: 18px;
	height: 18px;
	background-color: #6b7280;
	-webkit-mask: var(--beo-ico) no-repeat center / contain;
	mask: var(--beo-ico) no-repeat center / contain;
	pointer-events: none;
	transition: background-color 0.15s ease;
}
.bo-site .wpcf7-form-control-wrap[data-name="your-name"]:focus-within::before,
.bo-site .wpcf7-form-control-wrap[data-name="your-email"]:focus-within::before,
.bo-site .wpcf7-form-control-wrap[data-name="your-phone"]:focus-within::before,
.bo-site .wpcf7-form-control-wrap[data-name="your-subject"]:focus-within::before,
.bo-site .wpcf7-form-control-wrap[data-name="your-message"]:focus-within::before,
.bo-site .wpcf7-form-control-wrap[data-name="your-company"]:focus-within::before,
.bo-site .wpcf7-form-control-wrap[data-name="your-website"]:focus-within::before,
.bo-site .bqc .bqc-field--name:focus-within::before,
.bo-site .bqc .bqc-field--address:focus-within::before,
.bo-site .bqc .bqc-field--zip:focus-within::before,
.bo-site .bqc .bqc-field--city:focus-within::before,
.bo-site .bqc .bqc-field--email:focus-within::before,
.bo-site .bqc .bqc-field--phone:focus-within::before,
.bo-site .bqc .bqc-field--note:focus-within::before,
.bo-site .bqc .bqc-step0__combo:focus-within::before {
	background-color: var(--beo-gold);
}
.bo-site .wpcf7-form-control-wrap[data-name="your-name"] {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%20%2F%3E%3C%2Fsvg%3E");
}
.bo-site .wpcf7-form-control-wrap[data-name="your-email"] {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m22%207-8.991%205.727a2%202%200%200%201-2.009%200L2%207%22%20%2F%3E%20%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%20%2F%3E%3C%2Fsvg%3E");
}
.bo-site .wpcf7-form-control-wrap[data-name="your-phone"] {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13.832%2016.568a1%201%200%200%200%201.213-.303l.355-.465A2%202%200%200%201%2017%2015h3a2%202%200%200%201%202%202v3a2%202%200%200%201-2%202A18%2018%200%200%201%202%204a2%202%200%200%201%202-2h3a2%202%200%200%201%202%202v3a2%202%200%200%201-.8%201.6l-.468.351a1%201%200%200%200-.292%201.233%2014%2014%200%200%200%206.392%206.384%22%20%2F%3E%3C%2Fsvg%3E");
}
.bo-site .wpcf7-form-control-wrap[data-name="your-subject"] {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.586%202.586A2%202%200%200%200%2011.172%202H4a2%202%200%200%200-2%202v7.172a2%202%200%200%200%20.586%201.414l8.704%208.704a2.426%202.426%200%200%200%203.42%200l6.58-6.58a2.426%202.426%200%200%200%200-3.42z%22%20%2F%3E%20%3Ccircle%20cx%3D%227.5%22%20cy%3D%227.5%22%20r%3D%22.5%22%20fill%3D%22currentColor%22%20%2F%3E%3C%2Fsvg%3E");
}
.bo-site .wpcf7-form-control-wrap[data-name="your-message"] {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2017a2%202%200%200%201-2%202H6.828a2%202%200%200%200-1.414.586l-2.202%202.202A.71.71%200%200%201%202%2021.286V5a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202z%22%20%2F%3E%3C%2Fsvg%3E");
}
.bo-site .wpcf7-form-control-wrap[data-name="your-company"] {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2012h4%22%20%2F%3E%20%3Cpath%20d%3D%22M10%208h4%22%20%2F%3E%20%3Cpath%20d%3D%22M14%2021v-3a2%202%200%200%200-4%200v3%22%20%2F%3E%20%3Cpath%20d%3D%22M6%2010H4a2%202%200%200%200-2%202v7a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2h-2%22%20%2F%3E%20%3Cpath%20d%3D%22M6%2021V5a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v16%22%20%2F%3E%3C%2Fsvg%3E");
}
.bo-site .wpcf7-form-control-wrap[data-name="your-website"] {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3Cpath%20d%3D%22M12%202a14.5%2014.5%200%200%200%200%2020%2014.5%2014.5%200%200%200%200-20%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2012h20%22%20%2F%3E%3C%2Fsvg%3E");
}
.bo-site .bqc .bqc-field--name {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%20%2F%3E%3C%2Fsvg%3E");
}
.bo-site .bqc .bqc-field--address {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%204.993-5.539%2010.193-7.399%2011.799a1%201%200%200%201-1.202%200C9.539%2020.193%204%2014.993%204%2010a8%208%200%200%201%2016%200%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%20%2F%3E%3C%2Fsvg%3E");
}
.bo-site .bqc .bqc-field--zip {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.106%205.553a2%202%200%200%200%201.788%200l3.659-1.83A1%201%200%200%201%2021%204.619v12.764a1%201%200%200%201-.553.894l-4.553%202.277a2%202%200%200%201-1.788%200l-4.212-2.106a2%202%200%200%200-1.788%200l-3.659%201.83A1%201%200%200%201%203%2019.381V6.618a1%201%200%200%201%20.553-.894l4.553-2.277a2%202%200%200%201%201.788%200z%22%20%2F%3E%20%3Cpath%20d%3D%22M15%205.764v15%22%20%2F%3E%20%3Cpath%20d%3D%22M9%203.236v15%22%20%2F%3E%3C%2Fsvg%3E");
}
.bo-site .bqc .bqc-field--city {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.106%205.553a2%202%200%200%200%201.788%200l3.659-1.83A1%201%200%200%201%2021%204.619v12.764a1%201%200%200%201-.553.894l-4.553%202.277a2%202%200%200%201-1.788%200l-4.212-2.106a2%202%200%200%200-1.788%200l-3.659%201.83A1%201%200%200%201%203%2019.381V6.618a1%201%200%200%201%20.553-.894l4.553-2.277a2%202%200%200%201%201.788%200z%22%20%2F%3E%20%3Cpath%20d%3D%22M15%205.764v15%22%20%2F%3E%20%3Cpath%20d%3D%22M9%203.236v15%22%20%2F%3E%3C%2Fsvg%3E");
}
.bo-site .bqc .bqc-field--email {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m22%207-8.991%205.727a2%202%200%200%201-2.009%200L2%207%22%20%2F%3E%20%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%20%2F%3E%3C%2Fsvg%3E");
}
.bo-site .bqc .bqc-field--phone {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13.832%2016.568a1%201%200%200%200%201.213-.303l.355-.465A2%202%200%200%201%2017%2015h3a2%202%200%200%201%202%202v3a2%202%200%200%201-2%202A18%2018%200%200%201%202%204a2%202%200%200%201%202-2h3a2%202%200%200%201%202%202v3a2%202%200%200%201-.8%201.6l-.468.351a1%201%200%200%200-.292%201.233%2014%2014%200%200%200%206.392%206.384%22%20%2F%3E%3C%2Fsvg%3E");
}
.bo-site .bqc .bqc-field--note {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2017a2%202%200%200%201-2%202H6.828a2%202%200%200%200-1.414.586l-2.202%202.202A.71.71%200%200%201%202%2021.286V5a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202z%22%20%2F%3E%3C%2Fsvg%3E");
}
.bo-site .bqc .bqc-step0__combo {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%204.993-5.539%2010.193-7.399%2011.799a1%201%200%200%201-1.202%200C9.539%2020.193%204%2014.993%204%2010a8%208%200%200%201%2016%200%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%20%2F%3E%3C%2Fsvg%3E");
}
/* tekst polja ne ide preko ikonice; korak 0 gubi svoju pozadinsku lupu (ikonica je sada maska na omotacu) */
.bo-site .wpcf7 .wpcf7-form-control-wrap :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea),
.bo-site .bqc .bqc-fields .bqc-field :is(input.bqc-input, textarea.bqc-input),
.bo-site .bqc input.bqc-input.bqc-step0__input {
	padding-left: 44px !important;
}
.bo-site .bqc input.bqc-input.bqc-step0__input {
	background-image: none !important;
}
/* Chrome autofill: tekst taman i citljiv na njegovoj svetloplavoj pozadini (ikonica je na omotacu, ne nestaje) */
.bo-site :is(.wpcf7, .bqc) input:-webkit-autofill {
	-webkit-text-fill-color: var(--beo-dark);
	caret-color: var(--beo-dark);
}

/* §47 Tekst 2/3 + 3D objekat 1/3 (sesija 09, nalog §2): sekcija koja je bila samo dug tekst u uskoj koloni
   (Telefonie „beOnline voice Telefonzentrale", Hosting „Vertrag"). Jedan objekat iz serije moudesain1; na telefonu slika
   ispod teksta i manja. Elementor pun kontejner u redu ima width: 100 % (--width) — kolone zato dobijaju width: auto. */
.bo-site .bo-split23 > .bo-split23__text {
	flex: 2 1 0%;
	width: auto;
	min-width: 0;
}
.bo-site .bo-split23 > .bo-split23__bild {
	flex: 1 1 0%;
	width: auto;
	min-width: 0;
}
/* tekst ide od leve ivice kolone (opsti .bo-textspalte je max 720 i centriran, specificnost 0,6,0) */
.bo-site .elementor.elementor .e-con.bo-split23__text > .elementor-widget.bo-textspalte {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
.bo-site .bo-split23__3d {
	width: 100%;
}
.bo-site .bo-split23__img {
	display: block;
	width: auto;
	max-width: min(100%, 340px);
	height: auto;
	max-height: 360px; /* uspravni predmeti (dokument 539 x 800) ne smeju da nadvise kratak tekst */
	margin: 0 auto;
	/* bez filter: drop-shadow — na slici sa transform (ulazna animacija) Chrome crta svetao pravougaonik (S07, §38) */
}
@media screen and (max-width: 1024px) {
	.bo-site .bo-split23__img {
		max-width: min(100%, 240px);
		max-height: 260px;
	}
}
@media screen and (max-width: 767px) {
	.bo-site .bo-split23 > .bo-split23__text,
	.bo-site .bo-split23 > .bo-split23__bild {
		flex: 0 0 auto;
		width: 100%;
	}
	.bo-site .bo-split23__img {
		max-width: min(100%, 200px);
		max-height: 220px;
	}
}

/* §48 Kontakt (sesija 09, nalog §4–§5, D44): blok Hauptsitz sa ikonicama (Lucide 20 px, zlatna, poravnata sa prvim redom)
   i staticna mapa. Od Markove odluke 26.09. na strani je Google mapa (§49); staticna mapa je samo REZERVA kad builder
   nema kljuc. Staticna: OSM podloga u sivim tonovima (scripts/s09/s09-static-map.py), 3D pin iz serije, oznaka iznad
   pina, atribucija u uglu, bez Google-a/kolacica/iframe-a. Centar slike = adresa, object-fit: cover drzi pin u sredini
   i na telefonu. Vrh pina: (59, 153) u slici 132 x 160 -> (29,5, 76,5) px na prikazu 66 x 80. */
.bo-site .bo-adresse__liste {
	display: grid;
	gap: 14px;
}
.bo-site .bo-adresse__red {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	line-height: 1.6;
}
.bo-site .bo-adresse__ikona {
	flex: 0 0 20px;
	display: inline-flex;
	height: 1.6em; /* visina prvog reda teksta — ikonica je centrirana na njemu */
	align-items: center;
	color: var(--beo-gold);
}
.bo-site .bo-adresse__ikona .bo-ikona__svg {
	display: block;
}
/* parking (26.09.) na desktopu je lomio „direkt vor / dem Gebäude" — ujednaceni redovi */
.bo-site .bo-adresse__text {
	text-wrap: balance;
}
.bo-site .bo-adresse__text a {
	display: inline-block;
	padding: 0; /* stari .bo-adresse a imao je padding 10px 0 — tekst je padao ispod ikonice */
	color: var(--beo-dark);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(200, 151, 5, 0.6);
	text-underline-offset: 4px;
}
.bo-site .bo-adresse__text a:hover,
.bo-site .bo-adresse__text a:focus-visible {
	text-decoration-color: var(--beo-gold);
}
@media screen and (max-width: 767px) {
	/* telefon i e-mail su mete dodira: samo red SA LINKOM je 44 px i centriran; redovi sa tekstom (adresa, parking —
	   mogu biti u dva reda) ostaju poravnati sa prvim redom (osnovno flex-start). Ranije je izuzetak bio :first-child,
	   pa je parking (drugi red, 26.09.) dobio ikonicu izmedju dva reda teksta. */
	.bo-site .bo-adresse__red:has(a) {
		min-height: 44px;
		align-items: center;
	}
	/* meta dodira >= 44 px (design review: link je bio 27 px), tekst ostaje u ravni sa ikonicom */
	.bo-site .bo-adresse__text a {
		padding: 9px 0;
		margin: -9px 0;
	}
}
.bo-site .bo-karte-static {
	position: relative;
	height: 420px;
	overflow: hidden;
	background: var(--beo-light);
	border: 1px solid var(--beo-line);
	border-radius: var(--beo-radius);
	box-shadow: var(--beo-shadow-card);
}
.bo-site .bo-karte-static__bild {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
.bo-site .bo-karte-static__marke {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 66px;
	height: 80px;
	transform: translate(-29.5px, -76.5px);
	pointer-events: none;
}
/* meka tamna senka na tlu, ispod vrha pina */
.bo-site .bo-karte-static__marke::after {
	content: "";
	position: absolute;
	left: 29.5px;
	top: 76.5px;
	width: 34px;
	height: 10px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(0, 1, 25, 0.35) 0%, rgba(0, 1, 25, 0) 70%);
	transform: translate(-50%, -50%);
	z-index: -1;
}
.bo-site .bo-karte-static__pin {
	display: block;
	width: 66px;
	height: 80px;
}
.bo-site .bo-karte-static__label {
	position: absolute;
	left: 29.5px;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	padding: 6px 12px;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--beo-dark);
	background: var(--beo-white);
	border-radius: var(--beo-radius-sm);
	box-shadow: 0 4px 14px rgba(0, 1, 25, 0.16);
}
.bo-site .bo-karte-static__label::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--beo-white);
}
.bo-site .bo-karte-static__attr {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 3px 8px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--beo-text);
	background: rgba(255, 255, 255, 0.85);
	border-top-left-radius: var(--beo-radius-sm);
}
.bo-site .bo-karte-static__attr a {
	color: inherit;
	text-decoration: underline;
}
@media screen and (max-width: 767px) {
	.bo-site .bo-karte-static {
		height: 320px;
	}
}

/* §49 Google mapa na Kontaktu (sesija 09, Codevz cz_google_map) — od S11 je mapa sopstveni OverlayView (§52 d, pa §56 od S16);
   pravila za .bo-gkarte .gmap uklonjena u S16 (nijedna strana ih nije koristila). Pin 3004 je 2x, prikazuje se u pola velicine. */

/* §50 Zavrsni efekti (sesija 09, nalog §6 — najvise tri; uradjena DVA, gde prazan prostor to trazi):
   (a) PDF kartice (Senderliste): na hover podizanje 2 px + zlatna ivica (kartice proizvoda i paketa vec imaju svoj hover
       iz S07; dokumenti na /docs/ su mreza sa razdelnim linijama, ne kartice — tamo se ne dodaje);
   (c) 3D slike sekcija tekst + slika (§47): ulaz fade + 8 px, jednom (js/beo-premium.js, isti IntersectionObserver kao
       kartice). (b) gradijent ivice paketa — ne: paketi su vec proizvodne kartice sa zlatnom linijom i podizanjem.
   Samo opacity/transform (bez pomeranja rasporeda); prefers-reduced-motion gasi oba. */
@media (hover: hover) {
	.bo-site .bo-pdf-karte {
		transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	}
	.bo-site .bo-pdf-karte:hover,
	.bo-site .bo-pdf-karte:focus-visible {
		transform: translateY(-2px);
		border-color: var(--beo-gold);
	}
}
.bo-site .bo-split23__img {
	transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.bo-site .bo-reveal.bo-reveal--3d {
	opacity: 0;
	transform: translateY(8px);
}
.bo-site .bo-reveal.bo-reveal--3d.is-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.bo-site .bo-pdf-karte:hover,
	.bo-site .bo-pdf-karte:focus-visible {
		transform: none;
	}
	.bo-site .bo-split23__img,
	.bo-site .bo-reveal.bo-reveal--3d {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
/* link ispod mape („Route planen" od S16) odmah ispod okvira (razmak sekcije je 48 px izmedju svih elemenata) */
.bo-site .elementor-widget.bo-gkarte-auto-wrap + .elementor-widget.bo-karte-wrap .bo-karte-osm__links {
	margin-top: -24px;
}


/* §51 Sesija 11 (Dejanov mejl 28.09.2026): TeamViewer u jedan klik. Gornja traka (desktop) dobija link „TeamViewer Fernwartung"
   uz telefon (Codevz opcija header_1_right, scripts/s11/s11-nav-logo.php); stavka menija „TeamViewer Fernwartung" (klasa
   bo-nav-mobil) postoji samo u mobilnom/offcanvas meniju — u desktop meniju je suvisna jer je link u traci. Ikonica je Lucide
   „screen-share" kao maska (isti nacin kao telefon i e-mail, §42). Vise nije potrebno: Support → Support → TeamViewer → link. */
.bo-site .header_1 a[href*="898.tv"] i,
.bo-site .header_4 a[href*="898.tv"] i {
	--beo-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%203H4a2%202%200%200%200-2%202v10a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2v-3%22%2F%3E%3Cpath%20d%3D%22M8%2021h8%22%2F%3E%3Cpath%20d%3D%22M12%2017v4%22%2F%3E%3Cpath%20d%3D%22m17%208%205-5%22%2F%3E%3Cpath%20d%3D%22M17%203h5v5%22%2F%3E%3C%2Fsvg%3E");
}
.bo-site .header_2 li.bo-nav-mobil {
	display: none !important;
}

/* §52 Sesija 11 (Dejanov mejl 28.09.2026 + nalog S11): (a) Support traka sa dva dugmeta (Wissensdatenbank | TeamViewer);
   (b) „Website aus dem KI-Baukasten – oder vom Profi?" (Webdesign): pregledna lista pitanje | odgovor, hairline, bez kartica;
   (c) reference (Webdesign): snimak u okviru, dugme „Website ansehen", red „Auch diese Website …";
   (d) Kontakt: mapa tek na klik („Karte anzeigen") — od S16 zamenjeno: mapa se ucitava sama (§56); ostala je samo oznaka
   .bo-gmarker (pin + „beOnline gmbh", svoj OverlayView) koju koristi i §56. */
.bo-site .bo-support-band > .bo-support__dugmad {
	--width: auto;
	width: auto;
	flex: 0 0 auto;
}
.bo-support-band > .bo-support__text {
	flex-basis: 280px; /* dva dugmeta stoje u istom redu sa tekstom (>= 1024 px) */
}
@media screen and (max-width: 767px) {
	.bo-site .bo-support-band > .bo-support__dugmad {
		--width: 100%;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}
	.bo-site .bo-support__dugmad > .elementor-widget {
		width: 100%;
	}
	.bo-site .bo-support__dugmad .elementor-widget-container div {
		display: block !important;
		float: none !important;
		width: 100% !important;
		text-align: center;
	}
	.bo-site .bo-support__dugmad .cz_btn {
		display: block;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		text-align: center;
	}
}
.bo-site .bo-vergleich {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}
.bo-site .bo-vergleich__kopf {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--beo-dark);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--beo-muted);
}
.bo-site .bo-vergleich__liste {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.bo-site .bo-vergleich__zeile {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
	margin: 0 !important;
	padding: 20px 0;
	border-bottom: 1px solid var(--beo-line);
}
.bo-site .bo-vergleich__frage {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--beo-dark);
}
.bo-site .bo-vergleich__antwort {
	position: relative;
	padding-left: 20px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--beo-text);
}
.bo-site .bo-vergleich__antwort::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.4em;
	width: 4px;
	height: 1em;
	border-radius: 2px;
	background: var(--beo-gold);
}
@media screen and (max-width: 767px) {
	.bo-site .bo-vergleich__kopf {
		display: none;
	}
	.bo-site .bo-vergleich__zeile {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 16px 0;
	}
}
.bo-site .bo-diese-website {
	margin: 0;
	text-align: center;
	font-weight: 600;
	color: var(--beo-dark);
}
.bo-site .bo-karte--referenz .bo-referenz__bild a {
	display: block;
}
.bo-site .bo-karte--referenz .bo-referenz__bild img {
	display: block;
}
.bo-site .bo-karte--referenz .bo-karte__cta {
	margin-top: auto;
}
.bo-site .bo-gmarker {
	position: absolute;
	transform: translate(-50%, -100%);
	pointer-events: none;
}
.bo-site .bo-gmarker__pin {
	display: block;
	width: 73px;
	height: auto;
	max-width: none;
}
.bo-site .bo-gmarker__label {
	position: absolute;
	left: 50%;
	bottom: calc(100% - 6px);
	transform: translateX(-50%);
	padding: 6px 12px;
	white-space: nowrap;
	font-family: var(--beo-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--beo-dark);
	background: var(--beo-white);
	border-radius: var(--beo-radius-sm);
	box-shadow: 0 4px 14px rgba(0, 1, 25, 0.16);
}
.bo-site .bo-gmarker__label::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--beo-white);
}

/* §53 Logo u mobilnom zaglavlju: SVG je nizi od starog PNG-a (160 x 41 px) — meta dodira >= 44 px (design review, tacka 12) */
.bo-site .header_4 a.logo_is_img {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.bo-site .header_4 a.logo_is_img img {
	display: block;
}

/* §54 Podnozje, donji red pravnih veza (sesija 11): cetiri veze (Über uns · AGB · Impressum · Datenschutzerklärung) se na telefonu
   lome u dva reda. Codevz grupa je `row-reverse` (prva veza skroz desno), pa prirodan prelom daje pogresan redosled citanja
   (Impressum, Datenschutz, pa Über uns, AGB). `wrap-reverse` stavlja prvu liniju dole: gore Über uns · AGB, dole Impressum ·
   Datenschutzerklärung. Razdelne kosine (`inner_line`) ne mogu da se poravnaju sa prelomom — na telefonu se gase, razmak ih zamenjuje. */
@media screen and (max-width: 767px) {
	.bo-site .footer_2_right {
		flex-wrap: wrap-reverse;
		justify-content: center;
		column-gap: 8px;
	}
	.bo-site .footer_2_right .cz_elm[class*="inner_line"] {
		display: none !important;
	}
	.bo-site .footer_2_right .cz_elm[class*="inner_icon"] {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	.bo-site .footer_2_right .cz_elm[class*="inner_icon"] .elm_icon_text {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 12px;
	}
}

/* §55 Sesija 12: Webdesign — tri reference u redu + diskretan red „Weitere Projekte in der Schweiz“ (samo linkovi);
   KI-Chatbot — centrirane liste (Admin-Panel, Für wen, Beratung) i sitna napomena uz formu. */
.bo-site .bo-weitere-projekte,
.bo-site .bo-hinweis-klein {
	margin: 0;
	text-align: center;
	font-size: 15px;
	line-height: 1.6;
	color: var(--beo-muted);
	opacity: 1;
}
.bo-site .bo-weitere-projekte a {
	color: var(--beo-dark);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}
.bo-weitere-projekte-wrap .cz_title_content,
.bo-hinweis-klein-wrap .cz_title_content {
	margin-left: auto;
	margin-right: auto;
}
.bo-site .bo-liste-mitte {
	width: 100%;
	max-width: 620px;
	margin: 0 auto;
}
.bo-site .bo-liste-mitte .bo-liste {
	width: 100%;
}

/* §56 Sesija 16 (Markov nalog): Kontakt — Google mapa se ucitava SAMA, bez klika (js/beo-premium.js -> karte(): posle `load`,
   IntersectionObserver rootMargin 800 px). Okvir drzi visinu od prvog iscrtavanja (420 / 320 px kao ranije, CLS 0); dok mapa ne
   stigne, pozadina je boja mape (#f5edd7 = kopno sa zlatnom nijansom, izmereno na S11 mapi; inline + data-bg za Google
   `backgroundColor`) sa pinom i oznakom tacno gde ce ih mapa nacrtati (vrh pina u centru = centar mape). Kad plocice stignu
   (`tilesloaded`) privremeni pin se sklanja — crta ga OverlayView na istom mestu. Greska ili bez JS-a: staticna mapa (§48) u okviru.
   Okvir mape je u toku dokumenta sa height 100 %: Google mu sam postavlja `position: relative` (apsolutni okvir bi ostao 0 px). */
.bo-site .bo-gkarte-auto {
	position: relative;
	height: 420px;
	overflow: hidden;
	background-color: #f5edd7;
	border: 1px solid var(--beo-line);
	border-radius: var(--beo-radius);
	box-shadow: var(--beo-shadow-card);
}
@media screen and (max-width: 767px) {
	.bo-site .bo-gkarte-auto {
		height: 320px;
	}
}
.bo-site .bo-gkarte-auto__map {
	width: 100%;
	height: 100%;
}
.bo-site .bo-gkarte-auto__platzhalter {
	left: 50%;
	top: 50%;
	z-index: 1;
}
.bo-site .bo-gkarte-auto.is-geladen .bo-gkarte-auto__platzhalter,
.bo-site .bo-gkarte-auto.is-rezerva .bo-gkarte-auto__platzhalter,
.bo-site .bo-gkarte-auto.is-rezerva .bo-gkarte-auto__map {
	display: none;
}
.bo-site .bo-gkarte-auto__rezerva {
	position: absolute;
	inset: 0;
	z-index: 2;
}
.bo-site .bo-gkarte-auto__rezerva[hidden] {
	display: none;
}
.bo-site .bo-gkarte-auto__rezerva .bo-karte-static {
	height: 100%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
/* link ispod mape i linkovi u pravnom tekstu (AGB, Impressum, Datenschutz — tekst doslovno, samo stil) izgledaju kao linkovi
   (podvuceni, kao .bo-weitere-projekte; inace iste boje kao tekst); u cookie traci tema daje linkovima margin 0 2px —
   pred tackom je to izgledalo kao razmak („Datenschutzerklärung .") */
.bo-site .bo-pravno a,
.bo-site .bo-karte-osm__links a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bo-site .xtra-cookie > span a {
	margin: 0;
}
/* duzi tekst trake (S16) sabija dugme — „Akzeptiere alle" ostaje u jednom redu */
.bo-site .xtra-cookie .xtra-cookie-button {
	flex-shrink: 0;
	white-space: nowrap;
}
/* telefon: Codevz cookie.css daje traci 11 px, dugmetu 10 px. Sa recenicom o Google Maps (S16) udeo citljivog teksta na strani
   je pao ispod praga Lighthouse-a (Kontakt 390: 55,7 % < 60 %, „font-size", BP 96) — tekst 12 px, dugme ispod teksta preko
   cele sirine, meta 44 px (bilo 36) */
@media screen and (max-width: 768px) {
	.bo-site .xtra-cookie {
		flex-direction: column;
		align-items: stretch;
		font-size: 12px;
		line-height: 1.5;
	}
	.bo-site .xtra-cookie span {
		margin: 4px 6px 12px;
	}
	.bo-site .xtra-cookie a.xtra-cookie-button {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 0 16px;
		box-sizing: border-box;
		font-size: 14px;
	}
}