/*
 * Projekte-Bereich: Übersicht (/projekte/) und Einzelprojekte.
 * Tokens kommen aus style.css.
 * Wird nur auf den betreffenden Seiten geladen, siehe functions.php.
 */

/* ==========================================================================
   Container von GeneratePress aufheben
   Die Sektionen sind vollflächig, der Theme-Container würde sie einschnüren.
   ========================================================================== */

.imp-fullwidth #page,
.imp-fullwidth .site-content,
.imp-fullwidth .content-area,
.imp-fullwidth .inside-article {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.imp-fullwidth .site-content {
	display: block;
	background: var(--imp-bg);
	color: var(--imp-text);
}

/* Ohne das blitzt beim Ueberscrollen und unterhalb kurzer Seiten das
   weisse Body-Weiss des Themes durch. */
body.imp-fullwidth {
	background: var(--imp-bg);
}

.imp-fullwidth .entry-content > :first-child {
	margin-top: 0;
}

/* ==========================================================================
   Grundelemente
   ========================================================================== */

.imp-wrap {
	max-width: var(--imp-maxw);
	margin-inline: auto;
	padding-inline: var(--imp-pad-x);
	width: 100%;
}

.imp-sec {
	padding-block: var(--imp-sec-pad);
}

.imp-sec--sm {
	padding-block: var(--imp-sec-pad-sm);
}

.imp-sec--alt {
	background: var(--imp-bg-alt);
}

.imp-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Kennzeile ueber einer Ueberschrift: 40px Goldlinie, dann Mono in
   Versalien. Im Entwurf das wiederkehrende Ordnungselement. */
.imp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	color: var(--imp-gold);
	font-family: var(--imp-mono);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .24em;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.imp-eyebrow::before {
	content: "";
	width: 40px;
	height: 1px;
	background: var(--imp-gold);
	flex: none;
}

/* Ohne Linie, fuer enge Stellen wie die Schiene */
.imp-eyebrow--nackt::before {
	display: none;
}

/* Abschnittskopf. Linksbuendig, wie im Entwurf durchgehend. */
.imp-head {
	max-width: 760px;
	margin: 0 0 56px;
	text-align: left;
}

.imp-head--tight {
	margin-bottom: 36px;
}

.imp-head h2,
.imp-cta h2 {
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.03em;
	color: var(--imp-text);
	margin: 0;
}

.imp-head p {
	color: var(--imp-text-muted);
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.65;
	margin: 20px 0 0;
	max-width: 60ch;
}

.imp-stars {
	color: var(--imp-accent);
	letter-spacing: 2px;
}

/* Buttons ---------------------------------------------------------------- */

/* Schaltflaechen: eckig, ohne Schatten, ohne Bewegung. */
.imp-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--imp-font);
	font-weight: 600;
	font-size: 15px;
	padding: 19px 32px;
	border-radius: 0;
	text-decoration: none;
	line-height: 1;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.imp-btn--primary {
	background: var(--imp-accent);
	color: var(--imp-accent-ink);
}

.imp-btn--primary:hover,
.imp-btn--primary:focus {
	background: var(--imp-accent-hell);
	color: var(--imp-accent-ink);
}

.imp-btn--ghost {
	border: 1px solid var(--imp-border-strong);
	color: var(--imp-text);
	font-weight: 400;
	font-size: 16px;
	padding: 18px 26px;
}

.imp-btn--ghost:hover,
.imp-btn--ghost:focus {
	border-color: var(--imp-accent);
	color: var(--imp-accent);
}

.imp-projekte-hub a:focus-visible,
.imp-projekt a:focus-visible {
	outline: 2px solid var(--imp-accent);
	outline-offset: 3px;
}

/* Breadcrumb ------------------------------------------------------------- */

.imp-crumbs {
	background: #0a0a0c;
	font-size: .85rem;
	color: var(--imp-text-dim);
}

.imp-crumbs .imp-wrap {
	padding-block: 16px;
}

.imp-crumbs a {
	color: var(--imp-text-muted);
	font-weight: 600;
}

.imp-crumbs a:hover {
	color: var(--imp-accent);
}

/* Im Hero: kein eigener Streifen, keine Hintergrundfarbe, etwas heller,
   damit die Zeile auf dem Bild lesbar bleibt. */
.imp-crumbs--hero {
	background: none;
	margin-bottom: 26px;
	font-size: .86rem;
	color: #cfcfd6;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.imp-crumbs--hero .imp-wrap {
	padding: 0;
}

.imp-crumbs--hero a {
	color: #e4e4ea;
}

.imp-crumbs--hero a:hover,
.imp-crumbs--hero a:focus {
	color: var(--imp-accent);
}

/* Direktantwort ---------------------------------------------------------- */

.imp-answer {
	background: var(--imp-surface);
	border: 1px solid var(--imp-border);
	border-left: 4px solid var(--imp-accent);
	border-radius: var(--imp-radius);
	padding: 34px 38px;
	box-shadow: var(--imp-shadow-sm);
}

.imp-answer__tag {
	display: block;
	color: var(--imp-gold);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.imp-answer p {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	color: #e9e9ee;
	line-height: 1.7;
	margin: 0;
}

.imp-answer strong {
	color: #fff;
}

.imp-answer__sub {
	margin-top: 14px !important;
	font-size: 1rem !important;
	color: var(--imp-text-muted) !important;
}

/* ==========================================================================
   Übersichtsseite
   ========================================================================== */

.imp-grid,
.imp-more {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.imp-empty {
	text-align: center;
	color: var(--imp-text-dim);
	padding-block: 40px;
}

/* ==========================================================================
   Einzelprojekt
   ========================================================================== */

.imp-phero {
	position: relative;
	min-height: clamp(600px, 74vh, 840px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(150deg, #16161b, #20161a 55%, #2e1c10);
}

.imp-phero__img,
.imp-phero__veil {
	position: absolute;
	inset: 0;
}

.imp-phero__img {
	z-index: -2;
}

.imp-phero__veil {
	z-index: -1;
	background: linear-gradient(180deg,
			rgba(11, 11, 14, .55) 0%,
			rgba(11, 11, 14, .2) 35%,
			rgba(11, 11, 14, .94) 100%);
}

.imp-phero__inner {
	position: relative;
	padding-block: 130px 64px;
}

.imp-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(0, 0, 0, .5);
	border: 1px solid var(--imp-border-strong);
	border-radius: var(--imp-radius-pill);
	padding: 7px 16px;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--imp-accent);
	margin-bottom: 20px;
}

.imp-phero__title {
	font-size: clamp(2.3rem, 4.6vw, 3.7rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
	max-width: 820px;
	color: var(--imp-text);
	margin: 0;
	overflow-wrap: break-word;
	hyphens: auto;
}

.imp-phero__tag {
	color: var(--imp-gold);
	font-weight: 700;
	font-size: clamp(1.05rem, 1.7vw, 1.3rem);
	margin: 16px 0 0;
}

/* Fakten ----------------------------------------------------------------- */

/* Flexbox statt festem Raster: Die Anzahl der Felder schwankt, weil leere
   Angaben wegfallen. Mit repeat(5,1fr) säßen drei Fakten linksbündig in
   einem Fünfer-Raster und zwei Spalten blieben leer. */

/* Aufgabe / Lösung / Ergebnis -------------------------------------------- */

/* Zwei schmale Karten oben, das Ergebnis darunter über die volle Breite.
   Aufgabe und Lösung sind der Weg, das Ergebnis ist der Grund zum Lesen. */

/* Steht nur eine der beiden Spalten zur Verfügung, soll sie nicht wie eine
   halb leere Zeile wirken. */

/* Ergebnis-Band ---------------------------------------------------------- */

/* Ohne Punkte braucht das Band keine zweite Spalte. */

/* Listen mit Pfeil und Haken --------------------------------------------- */

.imp-arrows,
.imp-checks {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.imp-checks {
	gap: 9px;
	margin-top: 0;
}

.imp-arrows li,
.imp-checks li {
	display: flex;
	gap: 11px;
	color: var(--imp-text-muted);
	font-size: .96rem;
}

.imp-arrows li::before {
	content: "\2192";
	color: var(--imp-accent);
	font-weight: 700;
	flex: none;
}

.imp-checks li::before {
	content: "\2713";
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: rgba(245, 179, 1, .14);
	color: var(--imp-accent);
	display: grid;
	place-items: center;
	font-size: .75rem;
	margin-top: 1px;
}

/* Technik ---------------------------------------------------------------- */

.imp-tech {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}

/* Galerie ---------------------------------------------------------------- */

.imp-gal {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 200px;
}

/* Ab vier Bildern bekommt das erste die doppelte Höhe, wie im Entwurf. */
.imp-gal--4 .imp-gal__shot:first-child,
.imp-gal--5 .imp-gal__shot:first-child {
	grid-row: span 2;
}

.imp-gal--4,
.imp-gal--5 {
	grid-template-columns: 2fr 1fr 1fr;
}

.imp-gal__shot {
	position: relative;
	margin: 0;
	border: 1px solid var(--imp-border);
	border-radius: var(--imp-radius);
	overflow: hidden;
	background: linear-gradient(150deg, #16161b, #221a14);
}

/* Kennzahlen-Band -------------------------------------------------------- */

.imp-kpi {
	background: var(--imp-grad);
}

/* Ebenfalls Flexbox: Manche Projekte haben vier Kennzahlen, manche zwei.
   Zentriert bleibt das Band in jedem Fall ausgewogen. */
.imp-kpi__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-block: 46px;
}

.imp-kpi__v {
	display: block;
	font-size: clamp(2.1rem, 3.8vw, 3rem);
	font-weight: 700;
	line-height: 1;
}

.imp-kpi__k {
	display: block;
	font-weight: 600;
	margin-top: 6px;
}

/* Kundenstimme ----------------------------------------------------------- */

.imp-quote {
	background: var(--imp-surface);
	border: 1px solid var(--imp-border);
	border-radius: var(--imp-radius);
	padding: 52px 48px;
	text-align: center;
	max-width: 880px;
	margin: 0 auto;
}

.imp-quote__mark {
	display: block;
	font-size: 4rem;
	color: var(--imp-accent);
	line-height: .6;
	font-weight: 700;
}

.imp-quote .imp-stars {
	display: block;
	font-size: 1.2rem;
	letter-spacing: 5px;
	margin: 18px 0 14px;
}

.imp-quote blockquote {
	margin: 0;
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	color: #fff;
	line-height: 1.55;
	font-weight: 600;
	border: 0;
	padding: 0;
}

.imp-quote figcaption {
	margin-top: 22px;
	font-weight: 700;
	color: #fff;
}

.imp-quote figcaption small {
	display: block;
	color: var(--imp-text-dim);
	font-weight: 400;
	font-size: .86rem;
	margin-top: 2px;
}

/* Interne Links ---------------------------------------------------------- */

.imp-links {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.imp-links__item {
	background: var(--imp-surface);
	border: 1px solid var(--imp-border);
	border-radius: 10px;
	padding: 18px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	color: var(--imp-text);
	font-weight: 600;
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease;
}

.imp-links__item:hover,
.imp-links__item:focus {
	border-color: var(--imp-accent);
	color: var(--imp-text);
	transform: translateX(3px);
}

.imp-links__arr {
	color: var(--imp-accent);
}

.imp-backlink {
	margin-top: 22px;
	text-align: center;
	color: var(--imp-text-muted);
	font-size: .95rem;
}

.imp-backlink a {
	color: var(--imp-accent);
}

/* CTA -------------------------------------------------------------------- */

.imp-cta {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding-block: var(--imp-sec-pad);
	background:
		linear-gradient(180deg, rgba(14, 14, 17, .72), rgba(14, 14, 17, .86)),
		radial-gradient(80% 120% at 70% 20%, rgba(255, 120, 30, .4), transparent 60%),
		#111015;
}

.imp-cta p {
	color: var(--imp-text-muted);
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	margin: 16px auto 30px;
	max-width: 560px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {

	.imp-grid,
	.imp-more {
		grid-template-columns: repeat(2, 1fr);
	}

	.imp-tech {
		grid-template-columns: 1fr;
	}

	.imp-links,

	.imp-gal,
	.imp-gal--4,
	.imp-gal--5 {
		grid-template-columns: 1fr 1fr;
	}

	.imp-gal--4 .imp-gal__shot:first-child,
	.imp-gal--5 .imp-gal__shot:first-child {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

@media (max-width: 768px) {

	.imp-phero {
		min-height: clamp(460px, 68vh, 620px);
	}

	.imp-phero__inner {
		padding-block: 96px 40px;
	}

	.imp-crumbs--hero {
		margin-bottom: 18px;
		font-size: .8rem;
	}

	.imp-kpi__grid {
		gap: 30px 0;
	}

	.imp-answer {
		padding: 26px 22px;
	}

	.imp-quote {
		padding: 34px 24px;
	}
}

@media (max-width: 480px) {

	.imp-grid,
	.imp-more,
	.imp-links {
		grid-template-columns: 1fr;
	}

	.imp-kpi__grid {
		gap: 24px 0;
	}

	.imp-gal,
	.imp-gal--4,
	.imp-gal--5 {
		grid-template-columns: 1fr;
		grid-auto-rows: 180px;
	}

	.imp-btn {
		justify-content: center;
	}
}

/* Video ------------------------------------------------------------------
   Zwei Zustaende: die Fassade (Bild plus Knopf) und, nach dem Klick, der
   eingesetzte iframe. Beide liegen im gleichen 16:9-Rahmen, damit beim
   Austausch nichts springt.

   Die Datei-Variante bekommt kein festes Verhaeltnis: hochkant gefilmtes
   Material wuerde in einem 16:9-Kasten zu zwei breiten schwarzen Balken
   fuehren. Stattdessen begrenzt max-height die Hoehe, die Breite ergibt
   sich aus dem Material. */

.imp-video {
	margin: 0;
	max-width: 960px;
	margin-inline: auto;
}

.imp-video__fassade,
.imp-video__rahmen {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	background: #000;
}

.imp-video__fassade {
	position: relative;
	padding: 0;
	cursor: pointer;
	appearance: none;
}

.imp-video__fassade:hover .imp-video__play,
.imp-video__fassade:focus-visible .imp-video__play {
	transform: translate(-50%, -50%) scale(1.06);
	background: rgba(10, 10, 12, .8);
}

.imp-video__fassade:focus-visible {
	outline: 2px solid var(--imp-accent);
	outline-offset: 3px;
}

/* Kreis mit Dreieck, rein aus CSS. Ein Icon-Font oder eine SVG-Datei
   waere ein zusaetzlicher Ladevorgang fuer eine Form. */
.imp-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(10, 10, 12, .55);
	border: 1px solid var(--imp-gold);
	transition: transform .18s ease, background .18s ease;
}

.imp-video__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 9px 0 9px 14px;
	border-color: transparent transparent transparent var(--imp-gold);
}

.imp-video__rahmen {
	border: 0;
}

.imp-video__datei {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 74vh;
	margin-inline: auto;
	border: 1px solid var(--imp-border);
	border-radius: var(--imp-radius);
	background: #000;
}

.imp-video__quelle {
	margin-top: 12px;
	color: var(--imp-text-dim);
	font-size: .84rem;
	text-align: center;
}

@media (max-width: 480px) {

	.imp-video__play {
		width: 58px;
		height: 58px;
	}

	.imp-video__play::before {
		border-width: 8px 0 8px 12px;
	}
}

/* Hochformat: YouTube Shorts und hochkant gedrehtes Material.
   Ein 9:16-Video in einem 16:9-Rahmen bestuende zur Haelfte aus schwarzen
   Balken. Die Breite wird begrenzt, sonst wuerde ein hohes Video die
   ganze Bildschirmhoehe fuellen und den Rest der Seite verdraengen. */

.imp-video--hoch {
	max-width: 400px;
}

.imp-video--hoch .imp-video__fassade,
.imp-video--hoch .imp-video__rahmen {
	aspect-ratio: 9 / 16;
}

/* Kundenstimme unter einem Video: Der Kasten mit dem grossen
   Anfuehrungszeichen wuerde direkt unter dem Player zu schwer wirken.
   Hier steht nur noch der Text mit dem Namen darunter. */

.imp-quote--zumvideo {
	max-width: 720px;
	margin: 26px auto 0;
	padding: 0;
	background: none;
	border: 0;
	text-align: center;
}

/* =======================================================================
   Bauform "Dossier" — Gestaltung nach IMP Prototyp v2
   -----------------------------------------------------------------------
   Aufbau unveraendert: Hero, dann Schiene links und Verlauf rechts.
   Alle Werte hier stammen aus dem Prototyp: Open Sans leicht fuer die
   H1, Mono-Labels, Hairlines statt Kaesten, eine Flaeche fuer das
   Ergebnis, sonst nichts Umrahmtes.
   ======================================================================= */

/* Hero, drei Bauformen ---------------------------------------------------- */

.imp-phero {
	position: relative;
	min-height: 440px;
	height: 64vh;
	max-height: 760px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
	background: var(--imp-surface);
	border-bottom: 1px solid var(--imp-border);
}

.imp-phero__img,
.imp-phero__veil {
	position: absolute;
	inset: 0;
}

.imp-phero__img {
	z-index: -2;
}

.imp-phero__veil {
	z-index: -1;
	background: linear-gradient(rgba(10, 10, 12, .4), rgba(10, 10, 12, .2) 45%, rgba(10, 10, 12, .96));
}

.imp-phero__inner {
	position: relative;
	padding-block: 120px 64px;
}

.imp-phero__text {
	max-width: none;
}

.imp-crumbs--hero {
	font-family: var(--imp-mono);
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--imp-text-muted);
	margin-bottom: 32px;
}

.imp-crumbs--hero a {
	color: inherit;
	text-decoration: none;
}

.imp-crumbs--hero a:hover {
	color: var(--imp-accent);
}

/* Die Kategorie wird zur Kennzeile, nicht mehr zur Pille. */
.imp-badge {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	color: var(--imp-gold);
	font-family: var(--imp-mono);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .24em;
	text-transform: uppercase;
}

.imp-badge::before {
	content: "";
	width: 40px;
	height: 1px;
	background: var(--imp-gold);
	flex: none;
}

.imp-phero__title {
	font-size: clamp(38px, 5.6vw, 68px);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -.04em;
	color: var(--imp-text);
	margin: 18px 0 0;
	max-width: 18ch;
	overflow-wrap: normal;
	hyphens: manual;
	text-wrap: pretty;
}

.imp-phero__tag {
	font-family: var(--imp-mono);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--imp-text);
	margin: 24px 0 0;
	max-width: none;
}

/* Hochformat: Text und Bild teilen sich den Rahmen. */
.imp-phero--geteilt {
	--imp-seite: clamp(280px, 30vw, 420px);
	display: block;
	height: auto;
	min-height: 440px;
	background: var(--imp-surface);
}

.imp-phero--geteilt .imp-phero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--imp-seite);
	gap: 64px;
	align-items: stretch;
	padding-block: 0;
	min-height: inherit;
}

.imp-phero--geteilt .imp-phero__text {
	align-self: end;
	padding-block: 120px 64px;
}

.imp-phero__seite {
	position: relative;
	overflow: hidden;
	background: var(--imp-surface);
}

.imp-phero__seite .imp-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Ohne Bild traegt das Video. */
.imp-phero--video,
.imp-phero--leer {
	height: auto;
	min-height: 0;
	background: var(--imp-surface);
}

.imp-phero--video .imp-phero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(240px, 28vw, 380px);
	gap: 64px;
	align-items: center;
	padding-block: 120px 64px;
}

.imp-phero--video .imp-phero__medium {
	max-width: none;
	margin: 0;
}

.imp-phero--leer .imp-phero__inner {
	padding-block: 120px 72px;
}

/* Zwei Spalten ----------------------------------------------------------- */

.imp-dossier {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 64px;
	align-items: start;
	padding-block: 80px 0;
}

.imp-rail__innen {
	position: sticky;
	top: 120px;
	display: grid;
	gap: 40px;
}

.imp-rail__gr {
	border-top: 1px solid var(--imp-border-strong);
	padding-top: 24px;
}

.imp-rail__gr:first-child {
	border-top: 0;
	padding-top: 0;
}

/* Gruppentitel in der Schiene: Kennzeile ohne Linie */
.imp-rail__h {
	font-family: var(--imp-mono);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--imp-gold);
	margin: 0;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--imp-border-strong);
}

.imp-rail__dl {
	margin: 0;
}

.imp-rail__dl > div {
	padding: 18px 0;
	border-bottom: 1px solid var(--imp-border);
}

.imp-rail__dl dt {
	font-family: var(--imp-mono);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--imp-text-dim);
	line-height: 1;
	margin: 0;
}

.imp-rail__dl dd {
	margin: 10px 0 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--imp-text);
}

/* Kennzahlen, in der Schiene wie die Projektdaten gesetzt */
.imp-rail__zahlen {
	display: grid;
	gap: 0;
}

.imp-rail__zahl {
	padding: 18px 0;
	border-bottom: 1px solid var(--imp-border);
}

.imp-rail__zahl b {
	display: block;
	font-size: 26px;
	line-height: 1;
	font-weight: 500;
	letter-spacing: -.02em;
	color: var(--imp-text);
	font-variant-numeric: tabular-nums;
}

.imp-rail__zahl span {
	display: block;
	margin-top: 10px;
	font-family: var(--imp-mono);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--imp-text-dim);
}

.imp-rail__nav {
	display: grid;
	gap: 0;
}

.imp-rail__nav a {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--imp-border);
	font-size: 15px;
	line-height: 1.4;
	color: var(--imp-text);
	text-decoration: none;
	transition: color .2s ease;
}

.imp-rail__nav a span:last-child {
	color: var(--imp-text-dim);
}

.imp-rail__nav a:hover {
	color: var(--imp-accent);
}

.imp-rail__gr--tun {
	border-top: 0;
	padding-top: 0;
	margin-top: -8px;
}

.imp-btn--voll {
	display: inline-flex;
	width: auto;
	padding: 17px 28px;
}

.imp-rail__zurueck {
	display: block;
	margin-top: 24px;
	font-size: 14px;
	color: var(--imp-text-muted);
	text-decoration: none;
}

.imp-rail__zurueck:hover {
	color: var(--imp-accent);
}

/* Der Verlauf rechts ----------------------------------------------------- */

.imp-lauf {
	display: block;
}

.imp-lauf__blk {
	margin: 72px 0 0;
}

.imp-lauf__blk:first-child {
	margin-top: 0;
}

.imp-lauf__h {
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -.03em;
	color: var(--imp-text);
	margin: 18px 0 0;
	max-width: 24ch;
}

.imp-lauf__blk p {
	font-size: 17px;
	line-height: 1.8;
	color: var(--imp-text-muted);
	margin: 20px 0 0;
	max-width: 62ch;
}

/* Die Direktantwort: gross, hell, ohne Rahmen */
.imp-dossier .imp-answer {
	background: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	text-align: left;
	max-width: none;
}

.imp-dossier .imp-answer p {
	color: var(--imp-text);
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.55;
	margin: 0;
	max-width: 52ch;
}

/* Video im Verlauf */
.imp-dossier .imp-head {
	margin-bottom: 28px;
	max-width: none;
}

.imp-dossier .imp-head h2 {
	font-size: 26px;
	line-height: 1.25;
	letter-spacing: -.02em;
	margin-top: 6px;
}

.imp-dossier .imp-video {
	margin-inline: 0;
}

.imp-dossier .imp-video__fassade,
.imp-dossier .imp-video__rahmen,
.imp-dossier .imp-video__datei {
	border: 0;
	border-radius: 0;
	background: var(--imp-surface);
}

.imp-dossier .imp-video__quelle {
	font-family: var(--imp-mono);
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--imp-text-dim);
	text-align: left;
	margin-top: 16px;
}

/* Galerie: Kacheln nach Verhaeltnis, Bildnachweis darunter */
.imp-lauf__blk--breit {
	margin-top: 56px;
}

.imp-dossier .imp-gal {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.imp-dossier .imp-gal__shot {
	--imp-reihe: 250px;
	flex: 1 1 calc(var(--imp-v, 1.5) * var(--imp-reihe));
	height: var(--imp-reihe);
	min-width: 150px;
	margin: 0;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	background: var(--imp-surface);
}

.imp-dossier .imp-gal::after {
	content: "";
	flex-grow: 999;
	min-width: 0;
}

.imp-dossier .imp-gal--1 .imp-gal__shot {
	--imp-reihe: 380px;
	max-width: 100%;
}

/* Ergebnis: die eine Flaeche auf der Seite */
.imp-dossier .imp-ergebnis {
	margin-top: 72px;
	display: block;
	background: var(--imp-surface);
	color: inherit;
	border: 0;
	border-radius: 0;
	padding: 44px 40px;
}

.imp-dossier .imp-ergebnis .imp-eyebrow::before {
	display: none;
}

.imp-dossier .imp-ergebnis .imp-lauf__h {
	font-size: 28px;
	line-height: 1.2;
	letter-spacing: -.025em;
	margin-top: 20px;
	max-width: none;
}

.imp-dossier .imp-ergebnis p {
	margin-top: 18px;
	max-width: 58ch;
}

.imp-dossier .imp-ergebnis .imp-checks {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	border-top: 1px solid var(--imp-border);
	display: block;
}

.imp-dossier .imp-ergebnis .imp-checks li {
	display: block;
	padding: 16px 0;
	border-bottom: 1px solid var(--imp-border);
	font-size: 16px;
	line-height: 1.5;
	color: var(--imp-text);
}

.imp-dossier .imp-ergebnis .imp-checks li::before {
	display: none;
}

/* Technik als Spalten ---------------------------------------------------- */

.imp-dossier .imp-tech {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 40px;
	margin-top: 36px;
	border-top: 1px solid var(--imp-border-strong);
	padding-top: 32px;
}

.imp-tech__sp h3 {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--imp-text);
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}

.imp-tech__sp h3 a {
	color: inherit;
	text-decoration: none;
}

.imp-tech__sp h3 a:hover {
	color: var(--imp-accent);
}

.imp-tech__sp ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.imp-tech__sp li {
	font-size: 15px;
	line-height: 1.55;
	color: var(--imp-text-muted);
}

/* Kundenstimme ------------------------------------------------------------ */

.imp-dossier .imp-sec {
	padding: 56px 0 0;
	margin-top: 72px;
	border-top: 1px solid var(--imp-border);
	background: none;
}

.imp-dossier .imp-sec .imp-wrap {
	padding-inline: 0;
	max-width: none;
}

.imp-dossier .imp-sec .imp-head {
	margin-bottom: 28px;
}

.imp-dossier .imp-sec .imp-eyebrow::before {
	display: none;
}

.imp-dossier .imp-quote {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	text-align: left;
	max-width: none;
}

.imp-dossier .imp-quote__mark {
	display: none;
}

.imp-dossier .imp-quote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.45;
	color: var(--imp-text);
	max-width: 52ch;
	text-wrap: pretty;
}

.imp-dossier .imp-quote figcaption {
	margin-top: 32px;
	padding-top: 20px;
	position: relative;
	font-size: 15px;
	font-weight: 500;
	color: var(--imp-text);
}

.imp-dossier .imp-quote figcaption::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 1px;
	background: var(--imp-gold);
}

.imp-dossier .imp-quote figcaption small {
	display: block;
	margin-top: 8px;
	font-family: var(--imp-mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .08em;
	color: var(--imp-text-dim);
}

.imp-dossier .imp-quote--zumvideo {
	margin-top: 28px;
}

/* Aehnliche Projekte ------------------------------------------------------ */

.imp-projekt .imp-sec--alt {
	background: none;
	padding-block: var(--imp-sec-pad) 0;
}

.imp-more {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 32px;
	margin-top: 0;
}

.imp-card {
	display: block;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
	color: inherit;
	transition: opacity .2s ease;
}

.imp-card:hover {
	opacity: .86;
	transform: none;
	box-shadow: none;
}

.imp-card__thumb {
	aspect-ratio: 4 / 3;
	background: var(--imp-surface);
	border-radius: 0;
	overflow: hidden;
	position: relative;
}

.imp-card__cat {
	display: none;
}

.imp-card__body {
	padding: 24px 0 0;
	border-top: 1px solid var(--imp-border);
	margin-top: 20px;
}

.imp-card__meta {
	display: block;
	font-family: var(--imp-mono);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--imp-text-dim);
}

.imp-card__title {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--imp-text);
	margin: 16px 0 0;
}

.imp-card__go {
	display: block;
	margin-top: 12px;
	font-size: 15px;
	color: var(--imp-text-muted);
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1000px) {

	.imp-dossier {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.imp-rail__innen {
		position: static;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 32px;
	}

	.imp-rail__gr:first-child {
		border-top: 1px solid var(--imp-border-strong);
		padding-top: 24px;
	}

	.imp-phero {
		height: auto;
		min-height: 420px;
	}

	.imp-phero--geteilt .imp-phero__inner {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.imp-phero--geteilt .imp-phero__text {
		padding-block: 108px 40px;
	}

	.imp-phero__seite {
		aspect-ratio: 3 / 2;
	}

	.imp-phero--video .imp-phero__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.imp-phero--video .imp-phero__medium {
		max-width: 340px;
	}
}

@media (max-width: 700px) {

	.imp-dossier .imp-gal__shot {
		flex: 1 1 100%;
		height: auto;
		aspect-ratio: var(--imp-v, 1.5);
	}

	.imp-dossier .imp-gal::after {
		display: none;
	}

	.imp-lauf__blk {
		margin-top: 56px;
	}

	.imp-dossier .imp-ergebnis {
		padding: 32px 24px;
	}

	.imp-phero__inner {
		padding-block: 96px 40px;
	}
}

/* =======================================================================
   Projektuebersicht, Bauform "Feed"
   -----------------------------------------------------------------------
   Kopf mit Kennzahlen, darunter der Feed in zwei Spalten: Projektkarten
   mit Medium im eigenen Verhaeltnis, dazwischen Textkarten. Aufbau und
   Werte aus dem Prototyp v2.
   ======================================================================= */

/* Kopf ------------------------------------------------------------------ */

.imp-hubkopf {
	padding-top: 80px;
}

.imp-hubkopf .imp-crumbs--hero {
	margin-bottom: 0;
}

.imp-hubkopf__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
	align-items: flex-start;
	margin-top: 56px;
}

.imp-hubkopf__text {
	flex: 1 1 460px;
	min-width: 0;
}

.imp-hubkopf h1 {
	font-size: clamp(38px, 5.6vw, 68px);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -.04em;
	margin: 0;
	max-width: 18ch;
	text-wrap: pretty;
}

.imp-hubkopf__lead {
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.65;
	color: var(--imp-text-muted);
	margin: 28px 0 0;
	max-width: 52ch;
}

.imp-hubkopf__lead strong {
	font-weight: 400;
	color: var(--imp-text);
}

.imp-hubkopf__zahlen {
	flex: 0 1 380px;
	margin: 0;
	border-top: 1px solid var(--imp-border-strong);
}

.imp-hubkopf__zahlen > div {
	display: flex;
	gap: 20px;
	align-items: baseline;
	padding: 20px 0;
	border-bottom: 1px solid var(--imp-border);
}

.imp-hubkopf__zahlen dt {
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--imp-gold);
	font-variant-numeric: tabular-nums;
	min-width: 100px;
	flex: none;
	margin: 0;
}

.imp-hubkopf__zahlen dd {
	font-size: 14px;
	line-height: 1.5;
	color: var(--imp-text-muted);
	margin: 0;
}

/* Showreel --------------------------------------------------------------- */

.imp-reel {
	padding-top: clamp(56px, 6vw, 88px);
}

.imp-reel .imp-video {
	max-width: none;
}

.imp-reel .imp-video__quelle {
	font-family: var(--imp-mono);
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--imp-text-dim);
	text-align: left;
	margin-top: 16px;
}

/* Feed ------------------------------------------------------------------- */

.imp-feedsec {
	padding-top: clamp(72px, 8vw, 120px);
}

.imp-feedkopf {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: baseline;
	justify-content: space-between;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--imp-border-strong);
}

.imp-feedkopf .imp-eyebrow {
	margin-bottom: 0;
}

.imp-feedkopf__legende {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	font-family: var(--imp-mono);
	font-size: 11px;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--imp-text-dim);
}

/* Zwei Spalten, jede Karte bleibt am Stueck. Unter 900px wird es eine. */
.imp-feed {
	margin-top: 32px;
	columns: 2 420px;
	column-gap: 32px;
}

.imp-feed__item {
	break-inside: avoid;
	margin-bottom: 32px;
}

/* Projektkarte */
.imp-fkarte__medium {
	position: relative;
	background: var(--imp-surface);
	aspect-ratio: var(--imp-ar, 3 / 2);
	overflow: hidden;
}

.imp-fkarte__medium > a,
.imp-fkarte__medium .imp-video,
.imp-fkarte__medium .imp-video__fassade,
.imp-fkarte__medium .imp-video__rahmen,
.imp-fkarte__medium .imp-video__datei {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	aspect-ratio: auto;
	display: block;
}

.imp-fkarte__medium .imp-video__datei {
	object-fit: cover;
}

.imp-fkarte__medium .imp-video__quelle {
	display: none;
}

.imp-fkarte__nr {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	font-family: var(--imp-mono);
	font-size: 10px;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--imp-gold);
	background: rgba(10, 10, 12, .78);
	padding: 9px 11px;
	pointer-events: none;
}

.imp-fkarte__body {
	background: var(--imp-surface);
	padding: 28px 28px 30px;
}

.imp-fkarte__kicker {
	display: block;
	font-family: var(--imp-mono);
	font-size: 11px;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--imp-gold);
}

.imp-fkarte__titel {
	font-size: clamp(21px, 2.2vw, 27px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -.025em;
	margin: 18px 0 0;
	max-width: 24ch;
	text-wrap: pretty;
}

.imp-fkarte__titel a {
	color: var(--imp-text);
	text-decoration: none;
}

.imp-fkarte__titel a:hover {
	color: var(--imp-accent);
}

.imp-fkarte__text {
	font-size: 16px;
	line-height: 1.7;
	color: var(--imp-text-muted);
	margin: 16px 0 0;
	max-width: 52ch;
}

.imp-fkarte__daten {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin: 26px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--imp-border);
}

.imp-fkarte__daten dt {
	font-family: var(--imp-mono);
	font-size: 10px;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--imp-text-dim);
	margin: 0;
}

.imp-fkarte__daten dd {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--imp-text);
	margin: 9px 0 0;
}

.imp-fkarte__go {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var(--imp-gold);
	text-decoration: none;
	margin-top: 26px;
}

.imp-fkarte__go:hover {
	color: var(--imp-accent-hell);
}

/* Textkarte */
.imp-ftext {
	border-top: 2px solid var(--imp-gold);
	padding: 28px 0 0;
}

.imp-ftext__marke {
	display: block;
	font-family: var(--imp-mono);
	font-size: 11px;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--imp-gold);
}

.imp-ftext h3 {
	font-size: clamp(20px, 2vw, 25px);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -.02em;
	margin: 18px 0 0;
	max-width: 24ch;
	text-wrap: pretty;
}

.imp-ftext p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--imp-text-muted);
	margin: 16px 0 0;
	max-width: 50ch;
}

/* Kuenstler als Zeilen je Land ------------------------------------------ */

.imp-namensec {
	padding-bottom: 0;
}

.imp-namensec .imp-head {
	margin-bottom: 56px;
}

.imp-namen {
	border-top: 1px solid var(--imp-border-strong);
}

.imp-namen__zeile {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	padding: 28px 0;
	border-bottom: 1px solid var(--imp-border);
}

.imp-namen__zeile h3 {
	flex: 0 0 140px;
	font-family: var(--imp-mono);
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--imp-text-dim);
	margin: 0;
	padding-top: 8px;
}

.imp-namen__zeile p {
	flex: 1 1 420px;
	font-size: clamp(18px, 1.8vw, 22px);
	line-height: 1.7;
	color: var(--imp-text);
	margin: 0;
}

/* Leistungsliste --------------------------------------------------------- */

.imp-techsec {
	padding-block: var(--imp-sec-pad) 0;
}

.imp-liste {
	margin-top: 32px;
	max-width: 720px;
	border-top: 1px solid var(--imp-border-strong);
}

.imp-liste__item {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
	border-bottom: 1px solid var(--imp-border);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--imp-text);
	text-decoration: none;
	transition: color .2s ease, border-color .2s ease;
}

.imp-liste__arr {
	font-family: var(--imp-mono);
	font-size: 15px;
	font-weight: 400;
	color: var(--imp-text-dim);
}

.imp-liste__item:hover,
.imp-liste__item:focus {
	color: var(--imp-accent);
	border-color: var(--imp-accent);
}

.imp-liste__item:hover .imp-liste__arr {
	color: var(--imp-accent);
}

/* Anfrage, unter jeder Seite des Bereichs ------------------------------- */

.imp-anfrage {
	margin-top: var(--imp-sec-pad);
	border-top: 1px solid var(--imp-border-strong);
	background: var(--imp-bg-alt);
}

.imp-anfrage__inner {
	padding-block: clamp(72px, 8vw, 120px);
	display: flex;
	flex-wrap: wrap;
	gap: 56px;
	align-items: flex-end;
}

.imp-anfrage__text {
	flex: 1 1 420px;
	min-width: 0;
}

.imp-anfrage h2 {
	font-size: clamp(30px, 4vw, 50px);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -.03em;
	margin: 0;
	max-width: 20ch;
	text-wrap: pretty;
}

.imp-anfrage p {
	font-size: 18px;
	line-height: 1.7;
	color: var(--imp-text-muted);
	margin: 20px 0 0;
	max-width: 48ch;
}

.imp-anfrage__tun {
	flex: 0 1 320px;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
}

.imp-anfrage .imp-btn--primary {
	font-size: 16px;
	padding: 20px 34px;
}

.imp-anfrage__tel {
	font-family: var(--imp-mono);
	font-size: 15px;
	line-height: 1;
	letter-spacing: .06em;
	color: var(--imp-text-muted);
	text-decoration: none;
}

.imp-anfrage__tel:hover {
	color: var(--imp-accent);
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 700px) {

	.imp-hubkopf {
		padding-top: 56px;
	}

	.imp-hubkopf__inner {
		margin-top: 40px;
		gap: 40px;
	}

	.imp-hubkopf__zahlen dt {
		min-width: 80px;
	}

	.imp-fkarte__body {
		padding: 24px 20px 26px;
	}

	.imp-namen__zeile {
		gap: 12px;
		padding: 22px 0;
	}

	.imp-namen__zeile h3 {
		flex-basis: 100%;
	}

	.imp-anfrage__inner {
		gap: 36px;
	}
}