/* ==========================================================
   Medizentrum Wien — main.css
   Self-hosted fonts, no external assets, mobile-first.
   ========================================================== */

/* -------- Fonts (locally hosted) -------- */
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/jost-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/jost-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/jost-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/poppins-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/poppins-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-400.woff2') format('woff2');
}

/* -------- Tokens -------- */
:root {
	--c-text: #241a17;
	--c-text-soft: #2e2e2e;
	--c-purple-deep: #1b0c3d;
	--c-purple: #2d0c7c;
	--c-blue-light: #9fccff;
	--c-blue: #1fa2ff;
	--c-bg-light: #f6fcfe;
	--c-white: #ffffff;
	--c-border: #9d9d9d;

	--ff-display: 'Jost', system-ui, sans-serif;
	--ff-body: 'Jost', system-ui, sans-serif;
	--ff-form: 'Jost', system-ui, sans-serif;

	--container: 1252px;
	--radius: 22px;
}

/* -------- Reset (light) -------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--ff-body);
	font-size: 17px;
	line-height: 1.5;
	color: var(--c-text);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3 { font-family: var(--ff-display); font-weight: 500; line-height: 1.25; margin: 0; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.4em; }
li { margin-bottom: .35em; }

.mz-container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

/* -------- Buttons & eyebrows -------- */
.mz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--c-blue);
	color: #000;
	font-family: var(--ff-body);
	font-weight: 700;
	font-size: 17px;
	padding: 18px 32px;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background .15s ease;
	min-height: 56px;
}
.mz-btn:hover, .mz-btn:focus-visible { background: #0f8de6; outline: none; }

.mz-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--c-blue);
	padding: 6px 14px;
	color: #323043;
	text-decoration: none;
	font-family: var(--ff-display);
	font-weight: 500;
}

.mz-eyebrow {
	font-family: var(--ff-display);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: .07em;
	color: var(--c-purple);
	text-transform: uppercase;
	margin: 0 0 12px;
}
.mz-eyebrow--light { color: var(--c-blue-light); }

/* -------- Header -------- */
.mz-header {
	padding: 24px 0;
	background: var(--c-white);
	position: sticky;
	top: 0;
	z-index: 100;
}
.mz-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.mz-header__logo img { height: 40px; width: auto; }
.mz-nav {
	display: flex;
	align-items: center;
	gap: 28px;
}
.mz-nav a {
	font-family: var(--ff-display);
	font-weight: 500;
	font-size: 17px;
	color: #323043;
	text-decoration: none;
}
.mz-nav a:hover { color: var(--c-blue); }
.mz-nav .mz-btn-outline:hover { color: var(--c-blue); }

.mz-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 28px;
	height: 22px;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.mz-nav-toggle span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--c-text);
	transition: transform .2s ease, opacity .2s ease;
}

/* -------- Hero -------- */
.mz-hero { padding: 32px 0 64px; }
.mz-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.mz-hero__copy h1 {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(28px, 3.5vw, 36px);
	margin-bottom: 16px;
	color: var(--c-text);
}
.mz-hero__lead {
	font-family: var(--ff-display);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.5;
	margin-bottom: 24px;
}
.mz-hero__bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
}
.mz-hero__bullets li {
	position: relative;
	padding-left: 28px;
	font-size: 18px;
	margin-bottom: 8px;
}
.mz-hero__bullets li::before {
	content: '';
	position: absolute;
	left: 0; top: 8px;
	width: 16px; height: 10px;
	border-left: 2px solid var(--c-blue);
	border-bottom: 2px solid var(--c-blue);
	transform: rotate(-45deg);
}

.mz-hero__images {
	position: relative;
	width: 100%;
	aspect-ratio: 700 / 505;
}
.mz-hero__img {
	position: absolute;
	object-fit: cover;
}
/* tall image, right column (Empfangsbereich) */
.mz-hero__img--1 {
	left: 52.88%;
	top: 0;
	width: 47.25%;
	height: 78.71%;
}
/* building, top-left, offset right (Standort) */
.mz-hero__img--3 {
	left: 8.68%;
	top: 4.98%;
	width: 42.14%;
	height: 47.13%;
}
/* reception desk, bottom-left (Empfangstresen) */
.mz-hero__img--2 {
	left: 0;
	top: 55.28%;
	width: 50.82%;
	height: 44.9%;
}

/* -------- Sections (light) -------- */
.mz-section { padding: 64px 0; }
.mz-section-head { text-align: center; margin-bottom: 40px; }
.mz-section-head h2 { font-size: clamp(28px, 4vw, 37px); }

.mz-side-by-side {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}
.mz-side-by-side--reverse > .mz-side-by-side__media { order: -1; }
.mz-side-by-side__copy h2 {
	font-size: clamp(26px, 3.5vw, 37px);
	margin-bottom: 16px;
}
.mz-side-by-side__media img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 8px;
}

/* dark variant — wrapped in card */
.mz-section--dark { padding: 24px 0; }
.mz-card { padding: 32px; border-radius: var(--radius); }
.mz-card--dark {
	background: var(--c-purple-deep);
	color: var(--c-white);
	padding: 45px 60px;
}
.mz-card--dark h2 { color: var(--c-white); }
.mz-card--dark a { color: var(--c-blue-light); }

/* -------- Prose -------- */
.mz-prose { font-size: 18px; line-height: 1.45; }
.mz-prose p { margin-bottom: 1em; }
.mz-prose ul { padding-left: 1.4em; }
.mz-prose li { margin-bottom: .4em; }
.mz-prose strong { font-weight: 700; }

/* -------- Members -------- */
.mz-members {
	background: var(--c-bg-light);
	padding: 80px 0;
}
.mz-members__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.mz-member {
	background: var(--c-white);
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0 15px 14.3px rgba(0,0,0,.06);
	display: flex;
	flex-direction: column;
}
.mz-member__media {
	margin: 0 0 20px;
	overflow: hidden;
	border-radius: 8px;
}
.mz-member__media img {
	width: 100%;
	aspect-ratio: 16/11;
	object-fit: cover;
}
.mz-member__title {
	font-family: var(--ff-display);
	font-weight: 500;
	font-size: 24px;
	color: #000;
	margin-bottom: 12px;
}
.mz-member__desc {
	color: var(--c-text-soft);
	font-size: 18px;
	flex: 1;
	margin-bottom: 18px;
}
.mz-member__links {
	display: flex;
	gap: 18px;
	align-items: center;
	color: var(--c-purple-deep);
}
.mz-member__links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	color: inherit;
	transition: color .15s ease;
}
.mz-member__links a:hover { color: var(--c-blue); }

/* -------- CTA banner -------- */
.mz-cta {
	background: var(--c-purple-deep);
	color: var(--c-white);
	text-align: center;
	padding: 72px 24px;
}
.mz-cta h2 { color: var(--c-white); font-size: clamp(28px, 4vw, 37px); margin-bottom: 16px; }
.mz-cta__text { max-width: 620px; margin: 0 auto 32px; font-size: 18px; }

/* -------- Impressionen slider -------- */
.mz-impressionen { padding: 80px 0; }
.mz-slider {
	position: relative;
	overflow: hidden;
	margin-top: 16px;
}
.mz-slider__track {
	display: flex;
	transition: transform .5s cubic-bezier(.4,0,.2,1);
	will-change: transform;
}
.mz-slider__slide {
	flex: 0 0 100%;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mz-slider__slide img {
	width: 100%;
	height: 100%;
	max-height: 560px;
	object-fit: contain;
}

/* desktop: show 4 at a time */
@media (min-width: 900px) {
	.mz-slider__slide { flex-basis: 33.3333%; padding: 0 6px; }
}
@media (min-width: 1200px) {
	.mz-slider__slide { flex-basis: 25%; }
}

.mz-slider__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px; height: 48px;
	border-radius: 50%;
	background: rgba(255,255,255,.9);
	border: 1px solid #ddd;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}
.mz-slider__btn:hover { background: #fff; }
.mz-slider__btn--prev { left: 12px; }
.mz-slider__btn--next { right: 12px; }
.mz-slider__dots {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 16px;
}
.mz-slider__dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: #ccc;
	border: 0;
	cursor: pointer;
	padding: 0;
}
.mz-slider__dot[aria-current="true"] { background: var(--c-purple-deep); }

/* -------- Footer -------- */
.mz-footer {
	background: var(--c-bg-light);
	padding: 56px 0 32px;
	color: var(--c-purple-deep);
	overflow: hidden;
}
.mz-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px;
	text-align: center;
	margin-bottom: 32px;
}
.mz-footer__col h3 {
	font-family: var(--ff-display);
	font-weight: 500;
	font-size: 32px;
	margin-bottom: 12px;
}
.mz-footer__col p, .mz-footer__col a {
	font-size: 18px;
	color: var(--c-purple-deep);
	text-decoration: none;
}
.mz-footer__col a:hover { text-decoration: underline; }
.mz-footer__bottom {
	position: relative;
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	font-family: var(--ff-display);
}
.mz-footer__bottom::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 1px;
	background: #d4d9e4;
}
.mz-footer__legal { display: flex; gap: 32px; }
.mz-footer__legal a { color: var(--c-purple-deep); text-decoration: none; }
.mz-footer__legal a:hover { text-decoration: underline; }

/* -------- Anfrage -------- */
.mz-anfrage { padding: 48px 0 96px; }
.mz-anfrage__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
}
.mz-anfrage__form-col h1 {
	font-size: clamp(28px, 4vw, 37px);
	margin-bottom: 32px;
}
.mz-anfrage__intro { font-size: 18px; margin-bottom: 24px; }
.mz-anfrage__media-col {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: sticky;
	top: 100px;
}
.mz-anfrage__media-col img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 4px;
}

/* -------- Form -------- */
.mz-form { display: flex; flex-direction: column; gap: 22px; }
.mz-form__field { display: flex; flex-direction: column; gap: 8px; }
.mz-form__field label {
	font-family: var(--ff-form);
	font-size: 16px;
	color: #000;
}
.mz-form__field input,
.mz-form__field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--c-border);
	border-radius: 5px;
	font-family: var(--ff-form);
	font-size: 16px;
	background: #fff;
	color: var(--c-text);
}
.mz-form__field input:focus,
.mz-form__field textarea:focus {
	outline: 2px solid var(--c-blue);
	outline-offset: 1px;
	border-color: var(--c-blue);
}
.mz-form__check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-family: var(--ff-form);
	font-size: 15px;
	color: #000;
}
.mz-form__check input {
	margin-top: 4px;
	width: 21px;
	height: 21px;
	accent-color: var(--c-blue);
	flex-shrink: 0;
}
.mz-form__check label { line-height: 1.4; }
.mz-form__check a { color: var(--c-purple); }

/* honeypot — visually & a11y hidden but in DOM */
.mz-form__hp {
	position: absolute !important;
	left: -10000px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.mz-alert {
	padding: 14px 18px;
	border-radius: 6px;
	margin-bottom: 24px;
	font-size: 16px;
}
.mz-alert--ok { background: #e6f7ec; color: #114e29; border: 1px solid #95d3a8; }
.mz-alert--err { background: #fdecec; color: #6a1414; border: 1px solid #e2a3a3; }

/* -------- Minimal pages -------- */
.mz-minimal { padding: 64px 0 96px; }
.mz-minimal__article { max-width: 760px; margin: 0 auto; }
.mz-minimal h1 { font-size: clamp(28px, 4vw, 37px); margin-bottom: 24px; }

/* ==========================================================
   Mobile (<= 900px) — stack side-by-side, hide images grid
   ========================================================== */
@media (max-width: 900px) {
	.mz-nav-toggle { display: flex; }
	.mz-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		flex-direction: column;
		padding: 16px 24px;
		gap: 16px;
		box-shadow: 0 8px 12px rgba(0,0,0,.08);
		display: none;
	}
	.mz-nav.is-open { display: flex; }

	.mz-hero { padding: 24px 0 48px; }
	.mz-hero__inner { grid-template-columns: 1fr; gap: 32px; }
	.mz-hero__images { min-height: auto; }

	.mz-side-by-side { grid-template-columns: 1fr; gap: 24px; }
	.mz-side-by-side > .mz-side-by-side__media { order: -1; }

	.mz-card--dark { padding: 32px 24px; }
	.mz-section { padding: 40px 0; }

	.mz-members__grid { grid-template-columns: 1fr; gap: 18px; }
	.mz-members { padding: 48px 0; }

	.mz-cta { padding: 48px 20px; }

	.mz-footer__cols { grid-template-columns: 1fr; gap: 24px; }
	.mz-footer__bottom { justify-content: center; text-align: center; }

	.mz-anfrage__inner { grid-template-columns: 1fr; gap: 32px; }
	.mz-anfrage__media-col { position: static; }
}


@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.mz-slider__track { transition: none; }
}