/* Zwielicht Module. Farben kommen aus dem Theme (--zw-*), mit Ersatzwerten falls ein anderes Theme aktiv ist. */
.zw-tag {
	font: 500 .76rem/1.35 var(--wp--preset--font-family--mono, ui-monospace, monospace);
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--zw-muted, #61655f);
}
.zw-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--zw-line, #d6d6cf);
	background: transparent;
	color: var(--zw-fg, #121413);
	font-family: inherit;
	font-size: .9rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.zw-btn:hover { border-color: var(--zw-fg, #121413); }
.zw-btn[aria-pressed="true"] { background: var(--zw-fg, #121413); color: var(--zw-bg, #fafaf7); border-color: var(--zw-fg, #121413); }
.zw-btn--voll { border-color: var(--zw-fg, #121413); font-weight: 600; }
.zw-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zw-leer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 160px;
	background: var(--zw-surface, #efefea);
	color: var(--zw-muted, #61655f);
	font: 500 .8rem var(--wp--preset--font-family--mono, monospace);
}
.zw-hinweis { padding: 24px; background: var(--zw-surface, #efefea); color: var(--zw-muted, #61655f); }
.zw-t-titel { font-weight: 600; }
[data-zw] [hidden], .zw-werkindex [hidden], .zw-rasterblock [hidden] { display: none !important; }

/* Kaskade: ohne Bewegung ein ruhiges Raster, mit Bewegung Karten im Raum */
.zw-kaskade { position: relative; }
.zw-k-stage {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px 14px;
	padding: 36px max(16px, 4vw);
}
.zw-k-card { position: relative; display: block; color: inherit; text-decoration: none; }
.zw-k-bild { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--zw-surface, #efefea); outline: 1px solid var(--zw-line, #d6d6cf); }
.zw-k-nr { position: absolute; left: 0; top: -22px; color: var(--zw-fg, #121413); }
.zw-k-cap { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; }
.zw-k-now { display: none; }
.zw-kaskade.is-live { height: 340vh; }
.zw-kaskade.is-live .zw-k-stage {
	position: sticky;
	top: 0;
	display: block;
	height: 100vh;
	max-height: 880px;
	overflow: hidden;
	perspective: 1300px;
	padding: 0;
}
.zw-kaskade.is-live .zw-k-card {
	--cw: clamp(190px, 25vw, 320px);
	position: absolute;
	left: 30%;
	top: 50%;
	width: var(--cw);
	margin-left: calc(var(--cw) / -2);
	margin-top: calc(var(--cw) * -.66);
	transform-style: preserve-3d;
	will-change: transform;
}
.zw-kaskade.is-live .zw-k-cap { display: none; }
.zw-kaskade.is-live .zw-k-now {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	z-index: 60;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
	gap: 6px 16px;
	padding-inline: max(16px, 4vw);
}
.zw-k-titel { font-size: clamp(1.2rem, 2.4vw, 1.7rem); letter-spacing: -.02em; }
@media (max-width: 781px) {
	.zw-k-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.zw-kaskade.is-live .zw-k-card { left: 36%; }
}

/* Sucher */
.zw-sucher { margin: 0; }
.zw-s-rahmen { position: relative; overflow: hidden; background: var(--zw-surface, #efefea); }
.zw-s-rahmen img { display: block; width: 100%; height: auto; }
.zw-crop { position: absolute; inset: clamp(8px, 1.4vw, 16px); pointer-events: none; color: var(--zw-on-photo, #fff); }
.zw-crop i { position: absolute; width: clamp(14px, 2vw, 24px); height: clamp(14px, 2vw, 24px); border: 1.5px solid currentColor; opacity: .85; }
.zw-crop i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.zw-crop i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.zw-crop i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.zw-crop i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.zw-crop b {
	position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; opacity: .85;
	background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
}
.zw-s-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; padding-top: 10px; }
.zw-kamera { text-transform: none; }

/* Bild-Auftritt */
.zw-auftritt { margin: 0; }
.zw-a-rahmen { overflow: hidden; background: var(--zw-surface, #efefea); }
.zw-a-rahmen img { display: block; width: 100%; height: auto; max-height: 92vh; object-fit: cover; }
.zw-auftritt figcaption { padding: 10px max(16px, 4vw) 0; }
.zw-auftritt:not(.alignfull) figcaption { padding-inline: 0; }

/* Bildpaar */
.zw-bildpaar { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; padding-block: 24px; }
.zw-bildpaar figure { margin: 0; will-change: transform; }
.zw-bp-bild { display: block; overflow: hidden; background: var(--zw-surface, #efefea); }
.zw-bp-a .zw-bp-bild { aspect-ratio: 4 / 3; }
.zw-bp-b { margin-top: 48px !important; }
.zw-bp-b .zw-bp-bild { aspect-ratio: 3 / 4; }
.zw-bildpaar figcaption { padding-top: 8px; }
@media (max-width: 600px) { .zw-bildpaar { gap: 10px; } .zw-bp-b { margin-top: 24px !important; } }

/* Bilderraster */
.zw-chips, .zw-wi-ansicht { display: flex; flex-wrap: wrap; gap: 6px; }
.zw-rasterblock .zw-chips { margin-bottom: 14px; }
.zw-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 15vw, 240px); grid-auto-flow: dense; gap: 10px; }
.zw-tile { position: relative; display: block; overflow: hidden; background: var(--zw-surface, #efefea); color: var(--zw-on-photo, #fff); text-decoration: none; }
.zw-tile.w { grid-column: span 2; }
.zw-t-img { display: block; position: absolute; inset: 0; }
.zw-t-img img { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.zw-tile:hover .zw-t-img img, .zw-tile:focus-visible .zw-t-img img { transform: scale(1.04); }
.zw-t-cap {
	position: absolute; inset: auto 0 0; display: flex; flex-direction: column; gap: 2px;
	padding: 28px 12px 10px; background: linear-gradient(to top, var(--zw-shade, rgba(8, 10, 12, .66)), transparent);
}
.zw-t-cap .zw-tag { color: inherit; opacity: .85; }
.zw-raster--reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 24px 16px; }
.zw-raster--reihe .zw-tile { background: none; color: var(--zw-fg, #121413); display: flex; flex-direction: column; gap: 8px; }
.zw-raster--reihe .zw-t-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--zw-surface, #efefea); }
.zw-raster--reihe .zw-t-cap { position: static; padding: 0; background: none; }
.zw-raster--reihe .zw-t-cap .zw-tag { color: var(--zw-muted, #61655f); opacity: 1; }
@media (max-width: 781px) {
	.zw-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 36vw; }
	.zw-raster--reihe { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
}

/* Werk-Index */
.zw-wi-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.zw-wi-kopf, .zw-wi-row { display: grid; grid-template-columns: 3.6rem minmax(0, 3fr) minmax(0, 1.3fr) 3.6rem; gap: 16px; align-items: center; }
.zw-wi-kopf { padding-bottom: 8px; border-bottom: 1px solid var(--zw-line, #d6d6cf); }
.zw-wi-row {
	padding: 11px 0;
	border-bottom: 1px solid var(--zw-line, #d6d6cf);
	color: var(--zw-fg, #121413);
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 600;
	font-size: .92rem;
	letter-spacing: .01em;
	transition: opacity .25s;
}
.zw-wi-nr, .zw-wi-jahr { color: var(--zw-muted, #61655f); font-variant-numeric: tabular-nums; }
.zw-wi-kat { font-weight: 500; }
.zw-wi-liste:hover .zw-wi-row { opacity: .38; }
.zw-wi-liste .zw-wi-row:hover, .zw-wi-liste .zw-wi-row:focus-visible { opacity: 1; }
.zw-wi-thumb { display: none; }
.zw-wi-cover {
	position: fixed; left: 0; top: 0; z-index: 50;
	width: 280px; aspect-ratio: 4 / 3; overflow: hidden;
	background: var(--zw-surface, #efefea);
	opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.zw-wi-cover.on { opacity: 1; }
.zw-wi-cover img { position: absolute; inset: 0; visibility: hidden; }
.zw-wi-cover img.on { visibility: visible; }
@media (hover: none) {
	.zw-wi-cover, .zw-wi-kopf { display: none; }
	.zw-wi-row { grid-template-columns: 56px 2.8rem minmax(0, 1fr) minmax(0, 1fr) 3rem; gap: 12px; }
	.zw-wi-thumb { display: block; width: 56px; height: 42px; object-fit: cover; background: var(--zw-surface, #efefea); }
}
@media (max-width: 600px) {
	.zw-wi-kopf, .zw-wi-row { grid-template-columns: 2.8rem minmax(0, 1fr) 3rem; }
	.zw-wi-kat { display: none; }
}
@media (hover: none) and (max-width: 600px) {
	.zw-wi-row { grid-template-columns: 56px 2.6rem minmax(0, 1fr) 3rem; }
}

/* Video */
.zw-video { margin: 0; }
.zw-v-rahmen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--zw-surface, #efefea); }
.zw-v-play { all: unset; position: absolute; inset: 0; cursor: pointer; display: block; }
.zw-v-play:focus-visible { outline: 2px solid var(--zw-fg, #121413); outline-offset: 2px; }
.zw-v-play img { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.zw-v-play:hover img { transform: scale(1.03); }
.zw-v-icon {
	position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px;
	border: 2px solid var(--zw-on-photo, #fff); border-radius: 50%; background: rgba(0, 0, 0, .3);
	transition: transform .3s, background-color .3s;
}
.zw-v-icon::after { content: ""; position: absolute; left: 29px; top: 23px; border-style: solid; border-width: 13px 0 13px 20px; border-color: transparent transparent transparent var(--zw-on-photo, #fff); }
.zw-v-play:hover .zw-v-icon { transform: scale(1.07); background: rgba(0, 0, 0, .5); }
.zw-v-hinweis {
	position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 20px; text-align: center;
	background: var(--zw-shade, rgba(8, 10, 12, .66)); color: var(--zw-on-photo, #fff);
}
.zw-v-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.zw-v-meta { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; }
.zw-v-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.zw-v-text { color: var(--zw-muted, #61655f); }

/* Kontaktformular */
.zw-kontakt { display: flex; flex-direction: column; gap: 14px; }
.zw-kontakt p { margin: 0; }
.zw-kontakt label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
.zw-kontakt input, .zw-kontakt textarea {
	box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 12px;
	border: 1px solid var(--zw-muted, #61655f); background: var(--zw-bg, #fafaf7); color: var(--zw-fg, #121413);
	font: inherit; font-size: 1rem;
}
.zw-kontakt input:focus, .zw-kontakt textarea:focus { outline: 2px solid var(--zw-fg, #121413); outline-offset: 1px; }
.zw-k-falle { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zw-k-meldung { padding: 12px 14px; border: 1px solid var(--zw-line, #d6d6cf); background: var(--zw-surface, #efefea); }

/* Projektkopf und Navigation */
.zw-projektkopf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; align-items: end; padding-block: 48px 32px; }
.zw-pk-titel { margin: 10px 0 0; font-size: clamp(2.6rem, 6vw, 4.8rem); line-height: .98; letter-spacing: -.035em; }
.zw-pk-text { margin: 0; max-width: 60ch; }
.zw-projektnav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 40px 0; margin-top: 40px; border-top: 1px solid var(--zw-line, #d6d6cf); }
@media (max-width: 781px) { .zw-projektkopf { grid-template-columns: minmax(0, 1fr); padding-top: 28px; } }

/* Kopf und Fuss */
.zw-modus { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--zw-surface, #efefea); }
.zw-modus button {
	all: unset; cursor: pointer; padding: 6px 13px; border-radius: 999px;
	font-family: inherit; font-size: .8rem; font-weight: 500; line-height: 1.2; color: var(--zw-muted, #61655f);
	transition: background-color .3s, color .3s;
}
.zw-modus button[aria-pressed="true"] { background: var(--zw-fg, #121413); color: var(--zw-bg, #fafaf7); }
.zw-modus button:focus-visible { outline: 2px solid var(--zw-fg, #121413); outline-offset: 2px; }
.zw-ortszeit { white-space: nowrap; }
.zw-wortmarke-box { overflow: hidden; margin-top: 28px; }
.zw-wortmarke { display: inline-block; white-space: nowrap; font-weight: 700; line-height: .9; letter-spacing: -.045em; text-transform: uppercase; font-size: 12vw; }

/* Animationen aus */
html[data-motion="off"] .zw-t-img img, html[data-motion="off"] .zw-v-play img, html[data-motion="off"] .zw-v-icon { transition: none; }
html[data-motion="off"] .zw-tile:hover .zw-t-img img, html[data-motion="off"] .zw-v-play:hover img { transform: none; }
@media (prefers-reduced-motion: reduce) {
	html:not([data-motion="on"]) .zw-t-img img, html:not([data-motion="on"]) .zw-v-play img { transition: none; }
}