/* ============================================================
   MOSAIC.CSS — André Gutzwiller Homepage
   Wird NUR in index_b.asp eingebunden, nach portfolio.css.
   Überschreibt alle alten body/div-Stile vollständig.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');

/* Reset alles */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* html-Hintergrund weiss — verhindert grauen Rand wenn body schmaler war */
html {
	background: #ffffff;
}

/* Body komplett neu setzen */
body {
	display: block !important;
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.6;
	color: #111;
}

/* Links */
a              { color: inherit; text-decoration: none; font-size: inherit; }
a:link         { color: inherit; text-decoration: none; }
a:hover        { color: inherit; text-decoration: none; }
a:active       { color: inherit; text-decoration: none; }
a:visited      { color: inherit; text-decoration: none; }
img            { display: block; width: 100%; height: auto; }

/* p-Padding zurücksetzen */
p { padding: 0; }

/* ============================================================
   TEASER — volle Breite, oben auf der Seite
   ============================================================ */
.mosaic-teaser {
	width: 100%;
	display: block;
}
.mosaic-teaser a {
	display: block;
	width: 100%;
	padding: 28px 10% 24px 10%;
	text-decoration: none;
	color: inherit;
	background: #ffffff;
	transition: background 0.2s;
}
.mosaic-teaser a:hover {
	background: #f5f5f5;
}
.mosaic-teaser-titel {
	font-family: 'Inter', sans-serif;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 700;
	color: #111;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin-bottom: 8px;
	padding: 0;
}
.mosaic-teaser-text {
	font-family: 'Inter', sans-serif;
	font-size: 0.9rem;
	font-weight: 300;
	color: #555;
	line-height: 1.6;
	padding: 0;
}

/* ============================================================
   SEITENÜBERSCHRIFT
   ============================================================ */
.page-header {
	width: 80%;
	margin: 0 10%;
	padding: 32px 10px 24px 10px;
}
.page-header h1 {
	font-family: 'Inter', sans-serif;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 700;
	color: #111;
	letter-spacing: -0.02em;
	line-height: normal;
}

/* ============================================================
   MOSAIC CONTAINER
   ============================================================ */
#mosaic {
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	column-count: 3;
	column-gap: 0;
}

/* ============================================================
   BLÖCKE
   ============================================================ */
.block {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	display: block;
	width: 100%;
	padding: 4px 4px 100px 4px;
	position: relative;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
	#mosaic { column-count: 2; width: 100%; margin-left: 0; margin-right: 0; }
}
@media (max-width: 600px) {
	#mosaic         { column-count: 1; width: 100%; margin-left: 0; margin-right: 0; min-width: 320px; }
	.page-header    { width: 100%; margin: 0; }
	.block          { padding-bottom: 0 !important; }
	.block-inner    { margin-left: 0 !important; margin-top: 0 !important; }
	.block-wide,
	.block-narrow   { padding-bottom: 0 !important; }
	.block-wide .block-inner,
	.block-narrow .block-inner { width: 100% !important; }
	.block-menu     { max-width: 100% !important; min-width: 320px; }
	.block-menu .block-inner { min-width: 320px; }
	.h1-trenner     { display: none; }
	.mosaic-teaser  { display: none; }
}

/* ============================================================
   BLOCK-INNER
   ============================================================ */
.block-inner {
	background: transparent;
	height: 100%;
	padding: 20px 20px 32px 20px;
	border: none;
	position: relative;
}
.block-inner:hover { background: rgba(0,0,0,0.02); }

/* ============================================================
   UNTERLINIE MIT BULLET RECHTS
   ============================================================ */
.block-rule {
	display: block;
	position: absolute;
	bottom: 14px;
	left: 10px;
	right: 10px;
	height: 1px;
	background: #bbb;
	pointer-events: none;
}
.block-rule::after {
	content: '';
	position: absolute;
	top: -3px;
	right: -3px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #bbb;
}

/* ============================================================
   BILD-WRAPPER
   ============================================================ */
.block-img {
	width: 100%;
	margin-bottom: 16px;
	overflow: hidden;
}
.block-img img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.5s ease;
}
.block-inner:hover .block-img img { transform: scale(1.03); }

/* ============================================================
   TYPOGRAFIE
   ============================================================ */
.block-thema {
	font-family: 'Inter', sans-serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #888;
	margin-bottom: 8px;
	display: block;
}
.block-titel {
	font-family: 'Inter', sans-serif;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 12px;
	color: #111;
}
.block-text {
	font-family: 'Inter', sans-serif;
	font-size: 0.82rem;
	font-weight: 400;
	color: #333;
	line-height: 1.65;
}
.block-datum {
	display: block;
	margin-top: 14px;
	font-size: 10px;
	color: #999;
	letter-spacing: 0.1em;
}

/* Werk-Block */
.block-werk .block-titel { font-size: 1.3rem; font-weight: 700; }

/* Kleiner Block */
.block-small .block-titel { font-size: 1.1rem; }
.block-small .block-text {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ============================================================
   BREITE CARD — 64%
   ============================================================ */
.block-wide {
	column-span: all;
	-webkit-column-span: all;
	padding: 4px 4px 100px 4px;
	display: flex;
	justify-content: flex-start;
}
.block-wide .block-inner        { width: 64%; flex-shrink: 0; }
.block-wide.block-wide-right    { justify-content: flex-end; }

/* ============================================================
   SCHMALE CARD — 16%
   ============================================================ */
.block-narrow {
	column-span: all;
	-webkit-column-span: all;
	padding: 4px 4px 100px 4px;
	display: flex;
	justify-content: flex-start;
}
.block-narrow .block-inner { width: 16%; flex-shrink: 0; }

/* ============================================================
   MENÜ-BLÖCKE
   ============================================================ */
.block-menu {
	column-span: all;
	-webkit-column-span: all;
	max-width: 16%;
	break-inside: avoid;
}
.block-menu .block-inner {
	display: flex;
	align-items: flex-end;
	padding: 16px 14px;
	min-height: 140px;
	border: none !important;
	background: transparent;
	position: relative;
	transition: background 0.25s;
}
.block-menu a {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 16px 14px;
	text-decoration: none;
	transition: background 0.25s;
}
.menu-label {
	font-family: 'Inter', sans-serif;
	font-size: clamp(0.9rem, 1.4vw, 1.4rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: rgba(255,255,255,0.95);
	word-break: break-word;
	position: relative;
	z-index: 1;
	pointer-events: none;
}

/* Hintergrundfarben */
.m-home .block-inner { background: #e63946 !important; }
.m-bio  .block-inner { background: #2ec4b6 !important; }
.m-werk .block-inner { background: #f4a261 !important; }
.m-serv .block-inner { background: #6a4fc8 !important; }

/* Rollover Komplementärfarben */
.m-home a:hover { background: #46e3d9; }
.m-bio  a:hover { background: #c43a2e; }
.m-werk a:hover { background: #61b4f4; }
.m-serv a:hover { background: #c8a74f; }

/* ============================================================
   FOOTER
   ============================================================ */
.mosaic-footer {
	padding: 24px;
	text-align: center;
	color: #999;
	font-size: 11px;
	letter-spacing: 0.1em;
}
.mosaic-footer a { color: #888; font-size: 11px; }