@charset "utf-8";
/* ------------------------------------------------------------------
   responsive.css  –  mobilni sloj preko postojeceg styleMain.css
   Ucitava se POSLE styleMain.css i samo ga nadjacava ispod 1000px.
   Desktop izgled ostaje netaknut.
   ------------------------------------------------------------------ */

/* Tekst koji je na desktopu skriven (nav je tamo slika),
   ali ga citaju Google i screen-readeri. */
.navText {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* NAPOMENA: globalni `img { max-width:100%; height:auto }` ovde NE sme da stoji.
   Nivo Slider racuna dimenzije slajdova iz stvarnih visina slika; `height:auto`
   mu ih obori i slider nestane. Zato se skaliranje slika radi samo u media
   upitu ispod, a slider je tamo posebno regulisan. */

/* ================================================================
   ispod 1000px: gasimo fiksne sirine i apsolutno pozicioniranje
   ================================================================ */
@media (max-width: 1000px) {

	body {
		background-image: none;
		background: #fff;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	/* inline height:1121px itd. sa strana mora da padne */
	.contentPage {
		width: auto !important;
		max-width: 100%;
		height: auto !important;
		min-height: 0 !important;
		box-shadow: none;
		padding: 16px;
		box-sizing: border-box;
		overflow: visible;
	}

	header,
	footer,
	nav {
		width: auto !important;
		max-width: 100%;
		height: auto !important;
		position: static !important;
	}

	.headerContainer {
		padding-top: 14px;
	}

	/* header: logo, naziv, titula – sve u normalan tok */
	h1 {
		margin: 0 auto !important;
		text-align: center;
	}

	h1 img {
		width: 90px;
		height: 90px;
	}

	.zaxarpraxis {
		display: block;
		position: static !important;
		right: auto !important;
		bottom: auto !important;
		font-size: 26px !important;
		text-align: center;
		margin-top: 6px;
	}

	/* ime prakse je na desktopu slika – na mobilnom prikazujemo tekst */
	.drRajkovic {
		background-image: none !important;
		position: static !important;
		left: auto !important;
		bottom: auto !important;
		width: auto !important;
		height: auto !important;
		text-align: center;
	}

	.drRajkovic .navText {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		clip: auto;
		overflow: visible;
		display: block;
		font-size: 30px;
		font-weight: bold;
		color: #606060;
		line-height: 1.2;
	}

	.master {
		display: block;
		position: static !important;
		bottom: auto !important;
		left: auto !important;
		font-size: 14px !important;
		text-align: center;
		margin: 4px 10px 0;
		line-height: 1.4;
	}

	/* styleMain.css ima globalno `ol { width:980px }` i `ul { width:980px }`,
	   plus `ol li / ul li { float:left; margin-right:28px }`.
	   Fiksna sirina je gurala nav i footer van ekrana, a float je rusio
	   visinu roditelja na 0 (zbog cega se mapa na Kontaktu podvlacila
	   ispod forme). Zato ovde gasimo i sirinu i float. */
	ol,
	ol li,
	ul,
	ul li {
		width: auto !important;
		position: static !important;
		bottom: auto !important;
		left: auto !important;
		top: auto !important;
		float: none !important;
		margin-right: 0 !important;
	}

	/* ---- navigacija: sprite slike napolje, tekst unutra ---- */
	nav {
		margin-top: 14px;
	}

	nav ol {
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
		padding: 0;
		margin: 0;
	}

	nav li {
		margin: 0 !important;
		float: none !important;
	}

	nav li a {
		display: block;
		text-decoration: none;
	}

	/* sve sprite-divove gasimo */
	nav li a div {
		display: none !important;
	}

	nav li a .navText {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		clip: auto;
		overflow: visible;
		display: block;
		padding: 11px 14px;
		background: #606060;
		color: #fff;
		font-size: 15px;
		border-radius: 3px;
	}

	nav li a:hover .navText {
		background: #39B788;
	}

	/* h1 logo tekst ostaje skriven i na mobilnom (slika ga vec pokriva) */
	h1 .navText {
		position: absolute;
		clip: rect(0 0 0 0);
	}

	.linija {
		display: none;
	}

	/* Strane imaju inline stilove tipa style="position:relative;left:86px;top:61.5px"
	   direktno na paragrafima – na mobilnom to pravi preklapanja. */
	.contentPage > p,
	.contentPage > h2,
	.contentPage > div,
	.contentPage > div > p,
	.contentPage > div > div,
	.tekstPraxis > * {
		position: static !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		width: auto !important;
		max-width: 100% !important;
		/* strane imaju inline margin-left:385px i slicno */
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-bottom: 12px;
	}

	/* ---- sadrzaj ---- */
	.tekstPocetna,
	.tekstPraxis,
	.levi,
	.desno,
	.anfahrt {
		width: auto !important;
		max-width: 100% !important;
		float: none !important;
		position: static !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		margin: 0 0 20px 0 !important;
		height: auto !important;
	}

	/* inline sirine tipa width:233px na <p> u Anfahrt bloku */
	.anfahrt p,
	.levi p,
	.desno p {
		width: auto !important;
	}

	/* slike koje su na desktopu float-ovane pored teksta */
	.tekstPraxis img,
	.tekstPocetna img {
		float: none !important;
		position: static !important;
		display: block;
		margin: 0 auto 14px !important;
		width: auto;
		max-width: 100%;
		height: auto;
	}

	/* dekorativni cvet – nema mesta na mobilnom */
	.cvet {
		display: none;
	}

	/* mapa na Kontakt strani */
	.maps {
		width: auto !important;
		max-width: 100%;
		position: static !important;
		left: auto !important;
		top: auto !important;
		background-size: cover;
		background-position: center;
		height: 220px !important;
		margin-bottom: 16px;
	}

	/* ---- tim na Praxis strani ---- */
	.white,
	.doktor,
	.doktorica,
	.radnik1, .radnik2, .radnik3, .radnik4,
	.profil, .profil2, .profil3, .profil4, .profil5, .profil6,
	.team, .team2, .weAre {
		position: static !important;
		float: none !important;
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
		left: auto !important;
		top: auto !important;
		bottom: auto !important;
		right: auto !important;
		background-position: center top;
		background-size: contain;
		background-repeat: no-repeat;
		/* .doktor ima margin-left:200px, .doktorica margin-right:200px –
		   na mobilnom to gura sadrzaj van ekrana */
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Fotografije tima su background-slike na divovima koji u sebi nose
	   karticu sa tekstom (.profil). Bez rezervisanog prostora kartica u
	   normalnom toku prekrije fotografiju. ::before rezervise visinu slike,
	   pa kartica tece ISPOD fotografije, a slika ostaje vidljiva. */
	/* Selektor mora biti .white .doktor itd. – opstiji reset
	   `.contentPage > div > div` (spec. 0,1,2) bi inace nadjacao
	   obican `.doktor` (0,1,0). */
	.white .doktor, .white .doktorica,
	.white .radnik1, .white .radnik2, .white .radnik3, .white .radnik4 {
		width: 100% !important;
		max-width: 240px !important;
		margin: 0 auto 18px !important;
		background-size: cover;
		background-position: center top;
		/* moderna kartica: fotografija i opis kao jedna celina */
		border-bottom: none !important;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
	}

	.white .doktor::before, .white .doktorica::before {
		content: "";
		display: block;
		padding-top: 97.9%; /* 236/241 – odnos stranica fotografije */
	}

	.white .radnik1::before, .white .radnik2::before,
	.white .radnik3::before, .white .radnik4::before {
		content: "";
		display: block;
		padding-top: 115.2%; /* 212/184 */
	}

	.white {
		padding: 14px;
		box-sizing: border-box;
	}

	.white ul {
		list-style: none;
		padding: 0;
		position: static !important;
		left: auto !important;
		top: auto !important;
	}

	.white ul li {
		margin: 0 0 18px 0 !important;
		float: none !important;
	}

	/* profil kartice: tekst mora da se vidi bez hovera.
	   Pricvrscene za fotografiju (isti zaobljeni okvir), bez odvojenih
	   ivica – zajedno sa foto-divom izgledaju kao jedna kartica. */
	.profil, .profil2, .profil3, .profil4, .profil5, .profil6 {
		display: block !important;
		background: #EDFAF5 !important;
		border: none;
		border-radius: 0;
		padding: 12px !important;
		margin-bottom: 0;
	}

	.profil div, .profil2 div, .profil3 div,
	.profil4 div, .profil5 div, .profil6 div {
		position: static !important;
		top: auto !important;
	}

	/* ---- Leistungen: tabovi ----
	   Desktop: lista naslova levo, panel apsolutno pozicioniran desno.
	   Mobilni: naslovi pune sirine, otvoreni panel tece ispod njih.
	   JS na strani postavlja inline width:264px i height:1700px, pa ide !important. */
	.ram {
		padding: 10px 0 0 0 !important;
	}

	.naslovRam1, .naslovRam2, .naslovRam3, .naslovRam4, .naslovRam5,
	.naslovRam6, .naslovRam7, .naslovRam8, .naslovRam9 {
		width: auto !important;
		height: auto !important;
		min-height: 44px;
		position: static !important;
		right: auto !important;
		left: auto !important;
		margin: 0 0 8px 0 !important;
		padding: 11px 14px;
		box-sizing: border-box;
		border-radius: 3px;
		cursor: pointer;
		display: flex;
		align-items: center;
	}

	.naslov {
		position: static !important;
		left: auto !important;
		top: auto !important;
		font-size: 17px !important;
		line-height: 1.3;
	}

	.okvirMenija {
		position: static !important;
		left: auto !important;
		bottom: auto !important;
		width: auto !important;
		height: auto !important;
		margin-top: 18px;
	}

	/* SVI paneli ram1-ram9 moraju biti static! Prethodno su ram4-ram9
	   ostali absolute/655px/429px – preklapali su listu tabova i
	   presretali klikove na druge tabove. */
	.ram1, .ram2, .ram3, .ram4, .ram5, .ram6, .ram7, .ram8, .ram9,
	.expander1, .expander2, .expander3, .expander4 {
		position: static !important;
		left: auto !important;
		top: auto !important;
		width: auto !important;
		height: auto !important;
	}

	/* slike u Leistungen panelima imaju inline float:left i fiksne
	   dimenzije – na mobilnom suzbijaju tekst u uzak stub pored slike */
	.okvirMenija img {
		float: none !important;
		position: static !important;
		display: block;
		margin: 0 auto 12px !important;
		max-width: 100%;
		height: auto;
	}

	/* .roditeljExpandera ima fiksnu visinu 692px – sadrzaj expandera je na
	   mobilnom visi i preliva se preko teksta ispod */
	.roditeljExpandera {
		width: auto !important;
		height: auto !important;
	}

	.dete {
		max-width: 100%;
		background-size: contain;
		margin: 0 auto 12px;
	}

	.ex1, .ex2, .ex3, .ex4 {
		display: inline-block;
		font-size: 17px !important;
		line-height: 1.4;
		margin-bottom: 6px;
		cursor: pointer;
	}

	/* .mediserve i .maps su divovi sa background slikom unutar <a>,
	   pa ih selektor .tekstPraxis > * ne hvata. */
	.mediserve {
		position: static !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		max-width: 230px;
		background-size: contain;
		margin: 6px 0 12px !important;
	}

	/* ---- forma ---- */
	.contact_form ul {
		list-style: none;
		padding: 0;
	}

	.contact_form li {
		margin-bottom: 14px;
	}

	.contact_form label,
	.contact_form .posalji {
		display: block;
		position: static !important;
		left: auto !important;
		top: auto !important;
		float: none !important;
		width: auto !important;
		text-align: left;
		margin-bottom: 4px;
	}

	.contact_form input,
	.contact_form textarea {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
		font-size: 16px; /* ispod 16px iOS zumira pri fokusu */
		padding: 10px;
	}

	/* checkbox ne sme da se razvuce preko cele sirine */
	.contact_form input[type="checkbox"] {
		width: auto !important;
		min-width: 18px;
		height: 18px;
		padding: 0;
		vertical-align: middle;
	}

	/* dugme je sprite-slika 128x76 (dva stanja: normalno/hover).
	   Skaliramo je na 128x88 tako da svako stanje bude 44px visoko –
	   inace bi se prikazala oba stanja odjednom (duplo SENDEN). */
	.contact_form .submit {
		position: static !important;
		left: auto !important;
		top: auto !important;
		width: 128px !important;
		height: 44px !important;
		background-size: 128px 88px !important;
		background-position: 0 0 !important;
		margin-top: 4px;
	}

	.form_hint,
	.sl, .sl22 {
		display: none !important;
	}

	/* ---- footer ---- */
	.footerContainer {
		padding: 18px 12px;
	}

	.fooMenu {
		position: static !important;
		left: auto !important;
		top: auto !important;
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 16px;
		padding: 0;
		margin: 0 0 22px 0;
	}

	.fooMenu li {
		float: none !important;
		margin: 0 !important;
	}

	/* footer tabela -> slog jedan ispod drugog */
	.taberaj {
		position: static !important;
		left: auto !important;
		top: auto !important;
	}

	.taberaj table,
	.taberaj tbody,
	.taberaj tr,
	.taberaj td {
		display: block !important;
		width: auto !important;
	}

	.taberaj td {
		margin-bottom: 26px;
	}

	.radnoVreme {
		width: auto !important;
		height: auto !important;
	}

	.boja {
		bottom: 0 !important;
	}

	/* ---- slider na pocetnoj ----
	   Nivo Slider (2011) nije responsive: racuna fiksne piksele i pravi
	   apsolutno pozicionirane slojeve. Na mobilnom ga svodimo na jednu
	   sliku koja se skalira, bez animacije. */
	#slider,
	.nivoSlider {
		width: 100% !important;
		height: auto !important;
		position: relative !important;
		overflow: hidden;
	}

	.nivoSlider .nivo-main-image {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		display: block !important;
	}

	/* slojevi animacije i strelice nemaju smisla na dodir */
	.nivo-slice,
	.nivo-box,
	.nivo-directionNav,
	.nivo-controlNav,
	.nivo-caption {
		display: none !important;
	}

	#content {
		margin-bottom: 16px;
	}
}

/* ================================================================
   telefoni
   ================================================================ */
@media (max-width: 600px) {

	.drRajkovic .navText {
		font-size: 24px;
	}

	.zaxarpraxis {
		font-size: 21px !important;
	}

	.master {
		font-size: 13px !important;
	}

	nav ol {
		gap: 5px;
	}

	nav li a .navText {
		padding: 10px 11px;
		font-size: 14px;
	}

	.contentPage {
		padding: 12px;
	}

	.contentPage p,
	.tekstPocetna p {
		font-size: 16px !important;
	}

	h1 img {
		width: 76px;
		height: 76px;
	}

	/* inline font-size:22px na telefonu u footeru */
	.fooTel {
		font-size: 24px !important;
	}
}

/* prsti, ne mis: klikabilne stvari dovoljno velike */
@media (hover: none) {
	nav li a .navText,
	.fooMenu li a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* ================================================================
   Kontakt forma: honeypot + statusna poruka
   ================================================================ */

/* Honeypot polje - nevidljivo coveku, botovi ga popune */
.hpZeile {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.datenschutzZeile label {
	display: block;
	max-width: 420px;
	color: #5F5F5F;
}

.datenschutzZeile a {
	color: #39B788;
}

.formStatus {
	max-width: 420px;
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: 4px;
	font-size: 15px;
	line-height: 1.5;
}

.formStatus.ok {
	background: #E4F6EC;
	border: 1px solid #28921f;
	color: #1d6b17;
}

.formStatus.fehler {
	background: #FBEAEA;
	border: 1px solid #C0392B;
	color: #922b21;
}

/* ================================================================
   Napomena o selidbi na pocetnoj strani
   (zamenila staru .jpg sliku koju Google nije mogao da procita)
   ================================================================ */
.umzugHinweis {
	max-width: 900px;
	margin: 22px auto 0;
	padding: 20px 24px;
	background: #EAF7F1;
	border: 1px solid #39B788;
	border-left: 5px solid #39B788;
	border-radius: 4px;
	color: #3d5a50;
	line-height: 1.6;
	box-sizing: border-box;
}

.umzugHinweis p {
	margin: 0 0 8px;
}

.umzugTitel {
	font-size: 20px;
	font-weight: bold;
	color: #27795c;
}

.umzugAdresse {
	font-size: 19px;
	font-weight: bold;
	color: #606060;
}

.umzugLinks {
	margin-top: 14px;
}

.umzugLinks a {
	display: inline-block;
	margin: 4px 10px 0 0;
	padding: 10px 16px;
	background: #39B788;
	color: #fff;
	text-decoration: none;
	border-radius: 3px;
	font-weight: bold;
}

.umzugLinks a:hover {
	background: #2d9a72;
}

@media (max-width: 600px) {
	.umzugHinweis {
		padding: 16px;
		margin-top: 16px;
	}
	.umzugTitel { font-size: 18px; }
	.umzugAdresse { font-size: 17px; }
	.umzugLinks a { display: block; margin: 6px 0 0; text-align: center; }
}