/* =======================================================================
   Leistungsseiten (template-leistung.php)
   -----------------------------------------------------------------------
   Gestaltung nach dem Prototyp v2. Baut auf projekte.css auf: Tokens,
   Kennzeile, Schaltflaechen, Anfrage-Block kommen von dort. Hier steht
   nur, was es ausschliesslich auf Leistungsseiten gibt.

   Grundsatz wie im Entwurf: Hairlines statt Kaesten, eine Flaeche nur
   fuer Bilder, Nummern in Mono, alles linksbuendig.
   ======================================================================= */

.imp-leistung {
	background: var(--imp-bg);
	color: var(--imp-text);
}

/* Abschnitte: Abstand nur nach oben, der letzte Block ist die Anfrage. */
.imp-lsec {
	padding-top: var(--imp-sec-pad);
}

.imp-lsec__h2 {
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.03em;
	margin: 18px 0 0;
	max-width: 22ch;
	text-wrap: pretty;
}

.imp-lsec__h2--klein {
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1.12;
	max-width: 20ch;
}

.imp-lsec__p {
	font-size: 17px;
	line-height: 1.75;
	color: var(--imp-text-muted);
	margin: 20px 0 0;
	max-width: 56ch;
}

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

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

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

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

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

.imp-lkopf 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-lkopf__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-lkopf__stichworte {
	font-family: var(--imp-mono);
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--imp-text-dim);
	margin: 24px 0 0;
}

.imp-lkopf__tun {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	margin-top: 40px;
}

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

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

.imp-lkopf__bild {
	flex: 0 1 420px;
	min-width: 0;
	margin: 0;
	aspect-ratio: var(--imp-ar, 3 / 2);
	background: var(--imp-surface);
	overflow: hidden;
}

/* Kurz beantwortet ------------------------------------------------------- */

.imp-kurz {
	border-top: 1px solid var(--imp-border);
	padding-top: 64px;
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
}

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

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

.imp-kurz__antwort {
	font-size: clamp(19px, 1.8vw, 24px);
	line-height: 1.55;
	color: var(--imp-text);
	margin: 24px 0 0;
	max-width: 50ch;
	text-wrap: pretty;
}

.imp-kurz__mehr {
	font-size: 17px;
	line-height: 1.75;
	color: var(--imp-text-muted);
	margin: 24px 0 0;
	max-width: 62ch;
}

.imp-merkmale {
	flex: 0 1 340px;
	margin: 0;
	align-self: start;
	border-top: 1px solid var(--imp-border-strong);
}

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

.imp-merkmale dt {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--imp-text);
	margin: 0;
}

.imp-merkmale dd {
	font-size: 15px;
	line-height: 1.6;
	color: var(--imp-text-muted);
	margin: 10px 0 0;
}

/* Leistungsumfang -------------------------------------------------------- */

.imp-umfang {
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
	align-items: flex-start;
}

.imp-umfang__text {
	flex: 1 1 480px;
	min-width: 0;
}

.imp-umfang__text h2 {
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.03em;
	margin: 0;
	max-width: 22ch;
}

.imp-umfang__text > p {
	font-size: 17px;
	line-height: 1.75;
	color: var(--imp-text-muted);
	margin: 20px 0 0;
	max-width: 56ch;
}

.imp-umfang__bild {
	flex: 0 1 360px;
	min-width: 0;
	margin: 0;
	aspect-ratio: var(--imp-ar, 3 / 2);
	background: var(--imp-surface);
	overflow: hidden;
	position: sticky;
	top: 120px;
}

/* Nummerierte Liste, wiederverwendet bei den Einsatzbereichen */
.imp-nummern {
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
	border-top: 1px solid var(--imp-border-strong);
}

.imp-nummern li {
	display: flex;
	gap: 20px;
	padding: 22px 0;
	border-bottom: 1px solid var(--imp-border);
	font-size: 16px;
	line-height: 1.65;
	color: var(--imp-text-muted);
}

.imp-nummern__nr {
	font-family: var(--imp-mono);
	font-size: 12px;
	line-height: 1.6;
	color: var(--imp-gold);
	flex: 0 0 20px;
}

/* Marken ------------------------------------------------------------------ */

.imp-marken {
	list-style: none;
	margin: 40px 0 0;
	padding: 32px 0 0;
	border-top: 1px solid var(--imp-border-strong);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px 48px;
}

.imp-marken li {
	font-size: 15px;
	line-height: 1.5;
	color: var(--imp-text-muted);
	padding: 8px 0;
	border-bottom: 1px solid var(--imp-border);
}

/* Servicegebiet ---------------------------------------------------------- */

.imp-gebiet {
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
	align-items: flex-start;
}

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

.imp-orte {
	list-style: none;
	margin: 36px 0 0;
	padding: 0;
	border-top: 1px solid var(--imp-border-strong);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.imp-orte li {
	padding: 16px 24px 16px 0;
	border-bottom: 1px solid var(--imp-border);
	font-size: 16px;
	line-height: 1.4;
	color: var(--imp-text-muted);
}

/* Karte: eine Flaeche mit Adresse. Eine eingebettete Google-Karte
   braeuchte die Einwilligung ueber Borlabs, das ist ein eigener Schritt. */
.imp-gebiet__karte {
	flex: 0 1 420px;
	min-width: 0;
	aspect-ratio: 4 / 3;
	background: var(--imp-surface);
	position: relative;
}

.imp-gebiet__adresse {
	position: absolute;
	left: 16px;
	top: 16px;
	right: 16px;
	background: var(--imp-text);
	color: var(--imp-accent-ink);
	padding: 14px 16px;
}

.imp-gebiet__adresse strong {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.imp-gebiet__adresse span {
	display: block;
	font-size: 12px;
	line-height: 1.5;
	color: #4a4a52;
	margin-top: 6px;
}

.imp-gebiet__route {
	position: absolute;
	left: 16px;
	bottom: 16px;
	font-family: var(--imp-mono);
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--imp-text-muted);
	text-decoration: none;
}

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

/* Einsatzbereiche -------------------------------------------------------- */

.imp-anlaesse {
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
}

.imp-anlaesse__text {
	flex: 1 1 260px;
	min-width: 0;
}

.imp-anlaesse__text h2 {
	max-width: 14ch;
}

.imp-anlaesse__liste {
	list-style: none;
	flex: 2 1 420px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--imp-border-strong);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0 40px;
}

.imp-anlaesse__liste li {
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding: 22px 0;
	border-bottom: 1px solid var(--imp-border);
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.4;
	color: var(--imp-text);
}

.imp-anlaesse__liste .imp-nummern__nr {
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: .14em;
	flex-basis: 24px;
}

/* Belege ------------------------------------------------------------------ */

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

.imp-belege__zeile {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: baseline;
	padding: 32px 0;
	border-bottom: 1px solid var(--imp-border);
	color: inherit;
	text-decoration: none;
	transition: border-color .2s ease;
}

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

.imp-belege__kicker {
	flex: 0 0 160px;
	font-family: var(--imp-mono);
	font-size: 11px;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--imp-text-dim);
}

.imp-belege__titel {
	flex: 1 1 320px;
	font-size: clamp(19px, 2vw, 24px);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--imp-text);
}

.imp-belege__ort {
	flex: 0 1 200px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--imp-text-muted);
}

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

/* Bewertungen ------------------------------------------------------------ */

.imp-stimmen {
	margin-top: 56px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 56px;
}

.imp-stimme {
	margin: 0;
}

.imp-stimme__sterne {
	display: block;
	font-size: 14px;
	line-height: 1;
	letter-spacing: .22em;
	color: var(--imp-gold);
	margin-bottom: 20px;
}

.imp-stimme blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-style: normal;
	font-size: clamp(18px, 1.7vw, 22px);
	line-height: 1.55;
	color: var(--imp-text);
	text-wrap: pretty;
}

.imp-stimme figcaption {
	position: relative;
	margin-top: 28px;
	padding-top: 20px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--imp-text);
}

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

.imp-stimme 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);
}

/* Textlink mit Unterstrich, fuer "Alle Rezensionen" */
.imp-textlink {
	display: inline-block;
	margin-top: 48px;
	padding: 6px 0;
	border-bottom: 1px solid var(--imp-border-hell);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	color: var(--imp-text);
	text-decoration: none;
	transition: color .2s ease, border-color .2s ease;
}

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

/* Haeufige Fragen -------------------------------------------------------- */

.imp-faq {
	margin-top: 40px;
	max-width: 820px;
	border-top: 1px solid var(--imp-border-strong);
}

.imp-faq__item {
	border-bottom: 1px solid var(--imp-border);
}

.imp-faq__item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	gap: 32px;
	padding: 26px 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--imp-text);
}

.imp-faq__item summary::-webkit-details-marker {
	display: none;
}

.imp-faq__plus {
	font-family: var(--imp-mono);
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	color: var(--imp-text-dim);
	flex: none;
	transition: transform .2s ease;
}

.imp-faq__item[open] .imp-faq__plus {
	transform: rotate(45deg);
}

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

/* Passend dazu ----------------------------------------------------------- */

.imp-weitere {
	margin-top: 56px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	max-width: 1000px;
	gap: 40px 32px;
}

.imp-weitere__karte {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: opacity .2s ease;
}

.imp-weitere__karte:hover {
	opacity: .86;
}

.imp-weitere__bild {
	display: block;
	position: relative;
	aspect-ratio: var(--imp-ar, 3 / 2);
	background: var(--imp-surface);
	overflow: hidden;
}

.imp-weitere__nr {
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(10, 10, 12, .72);
	font-family: var(--imp-mono);
	font-size: 11px;
	line-height: 1;
	letter-spacing: .16em;
	color: var(--imp-gold);
	padding: 10px 12px;
}

.imp-weitere__kopf {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: baseline;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--imp-border);
}

.imp-weitere__titel {
	font-size: clamp(19px, 1.8vw, 23px);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -.02em;
	color: var(--imp-text);
}

.imp-weitere__arr {
	font-family: var(--imp-mono);
	font-size: 14px;
	color: var(--imp-text-dim);
}

.imp-weitere__teaser {
	display: block;
	font-size: 15px;
	line-height: 1.6;
	color: var(--imp-text-muted);
	margin-top: 12px;
	max-width: 36ch;
}

.imp-mietshop {
	margin: 48px 0 0;
	font-family: var(--imp-mono);
	font-size: 13px;
	line-height: 1.7;
	letter-spacing: .04em;
	color: var(--imp-text-dim);
}

.imp-mietshop a {
	color: var(--imp-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

/* Uebersicht Veranstaltungstechnik (template-hub.php) -------------------- */

.imp-lsec__h2--gross {
	font-size: clamp(30px, 4vw, 52px);
	line-height: 1.08;
	max-width: 22ch;
}

.imp-bereiche {
	margin-top: 64px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 48px 32px;
}

.imp-weitere__stichworte {
	display: block;
	font-family: var(--imp-mono);
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: .04em;
	color: var(--imp-text-dim);
	margin-top: 14px;
}

.imp-weitere__teaser--lang {
	font-size: 16px;
	line-height: 1.65;
	margin-top: 14px;
	max-width: 42ch;
}

.imp-ablauf {
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
}

.imp-ablauf__kopf {
	flex: 0 1 320px;
}

.imp-ablauf__kopf h2 {
	max-width: 16ch;
}

.imp-ablauf__liste {
	list-style: none;
	flex: 1 1 480px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--imp-border-strong);
}

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

.imp-ablauf__nr {
	flex: 0 0 40px;
	font-family: var(--imp-mono);
	font-size: 12px;
	line-height: 1;
	letter-spacing: .16em;
	color: var(--imp-gold);
	padding-top: 6px;
}

.imp-ablauf__titel {
	flex: 0 0 180px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--imp-text);
}

.imp-ablauf__text {
	flex: 1 1 280px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--imp-text-muted);
}

.imp-gebiet__seite {
	flex: 0 1 340px;
	min-width: 0;
}

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

.imp-gebiet__daten > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--imp-border);
	font-size: 15px;
	line-height: 1.4;
}

.imp-gebiet__daten dt {
	color: var(--imp-text-muted);
	font-weight: 400;
	margin: 0;
}

.imp-gebiet__daten dd {
	color: var(--imp-text);
	margin: 0;
	text-align: right;
}

.imp-gebiet__seite .imp-gebiet__karte {
	flex: none;
	margin-top: 32px;
}

/* Startseite (front-page.php) -------------------------------------------- */

.imp-shero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--imp-border);
	background: var(--imp-bg);
}

.imp-shero__bild,
.imp-shero__veil {
	position: absolute;
	inset: 0;
}

.imp-shero__veil {
	background: radial-gradient(120% 90% at 78% 40%, rgba(10, 10, 12, 0) 0%, rgba(10, 10, 12, .35) 55%, rgba(10, 10, 12, .72) 100%);
}

.imp-shero__inner {
	position: relative;
	min-height: min(88vh, 860px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(48px, 6vw, 88px);
	padding-top: clamp(48px, 6vw, 88px);
	padding-bottom: clamp(32px, 4vw, 48px);
}

.imp-shero__text {
	max-width: 760px;
	padding-bottom: clamp(40px, 5vw, 72px);
}

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

.imp-shero__lead {
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.65;
	color: #c6c6ce;
	margin: 32px 0 0;
	max-width: 62ch;
}

.imp-shero__tun {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	margin-top: 44px;
}

.imp-textlink--hero {
	margin-top: 0;
}

.imp-shero__daten {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	margin: 0;
	padding-top: 28px;
	border-top: 1px solid var(--imp-border);
	max-width: 760px;
}

.imp-shero__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-shero__daten dd {
	font-size: 15px;
	line-height: 1.4;
	color: var(--imp-text);
	margin: 10px 0 0;
}

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

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

.imp-sintro {
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
}

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

.imp-sintro__antwort {
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.5;
	color: var(--imp-text);
	margin: 0;
	max-width: 44ch;
	text-wrap: pretty;
}

.imp-sintro__mehr {
	font-size: 17px;
	line-height: 1.75;
	color: var(--imp-text-muted);
	margin: 28px 0 0;
	max-width: 60ch;
}

.imp-szahlen {
	flex: 1 1 380px;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 40px 48px;
	align-content: start;
}

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

.imp-szahl__kopf {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.imp-szahl__kopf b {
	font-size: clamp(34px, 3.6vw, 46px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--imp-gold);
	font-variant-numeric: tabular-nums;
}

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

.imp-szahl p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--imp-text-muted);
	margin: 14px 0 0;
	max-width: 24ch;
}

.imp-lsec__p--gross {
	font-size: 18px;
	line-height: 1.7;
	max-width: 54ch;
}

.imp-bereiche--start {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 40px 32px;
}

.imp-more--start {
	margin-top: 64px;
}

.imp-more--start .imp-card__title {
	font-size: 21px;
}

.imp-warum {
	flex: 1 1 480px;
	min-width: 0;
	margin: 0;
	border-top: 1px solid var(--imp-border-strong);
}

.imp-warum > div {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	padding: 28px 0;
	border-bottom: 1px solid var(--imp-border);
}

.imp-warum dt {
	flex: 0 0 200px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--imp-text);
	margin: 0;
}

.imp-warum dd {
	flex: 1 1 280px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--imp-text-muted);
	margin: 0;
}

.imp-stimmen--start {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.imp-stimmen--start blockquote {
	font-size: clamp(20px, 1.8vw, 24px);
	line-height: 1.5;
}

/* Rezensionen (template-rezensionen.php) --------------------------------- */

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

.imp-feed--drei {
	columns: 3 320px;
	column-gap: 24px;
}

.imp-feed--drei .imp-feed__item {
	margin-bottom: 24px;
}

.imp-feedkopf__legende--rez {
	align-items: baseline;
}

.imp-rez-gesamt {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.imp-rez-gesamt b {
	font-family: var(--imp-font);
	font-size: 20px;
	font-weight: 300;
	line-height: 1;
	color: var(--imp-gold);
	font-variant-numeric: tabular-nums;
}

.imp-rez-gesamt span {
	letter-spacing: .2em;
	color: var(--imp-gold);
}

.imp-rez {
	margin: 0;
	background: var(--imp-surface);
	padding: 26px;
}

.imp-rez__kopf {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: center;
}

.imp-rez__wer {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.imp-rez__initial {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: var(--imp-surface-3);
	display: grid;
	place-items: center;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: var(--imp-gold);
	flex: none;
}

.imp-rez__name {
	display: block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--imp-text);
}

.imp-rez__quelle {
	display: block;
	font-family: var(--imp-mono);
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: .08em;
	color: var(--imp-text-dim);
	margin-top: 5px;
}

.imp-rez__sterne {
	font-size: 11px;
	line-height: 1;
	letter-spacing: .2em;
	color: var(--imp-gold);
	flex: none;
}

.imp-rez blockquote {
	margin: 20px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 16px;
	font-style: normal;
	line-height: 1.7;
	color: var(--imp-text);
	text-wrap: pretty;
}

.imp-rezvideo__medium {
	position: relative;
	background: var(--imp-surface);
}

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

.imp-rezvideo__medium .imp-video__datei {
	max-height: none;
	width: 100%;
}

.imp-rezvideo__body {
	background: var(--imp-surface);
	padding: 22px 26px 24px;
}

.imp-rezvideo__body strong {
	display: block;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--imp-text);
}

.imp-rezvideo__wer {
	display: block;
	font-size: 15px;
	line-height: 1.5;
	color: var(--imp-text-muted);
	margin-top: 10px;
}

.imp-rezvideo__quelle {
	display: block;
	font-family: var(--imp-mono);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: .08em;
	color: var(--imp-text-dim);
	margin-top: 8px;
	text-decoration: none;
}

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

/* Kontakt (template-kontakt.php) ----------------------------------------- */

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

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

.imp-kontakt 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-kontakt__wege {
	margin: 56px 0 0;
	border-top: 1px solid var(--imp-border-strong);
}

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

.imp-kontakt__wege > div:last-child {
	border-bottom: 0;
}

.imp-kontakt__wege 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-kontakt__wege dd {
	font-size: 19px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--imp-text);
	margin: 10px 0 0;
}

.imp-kontakt__wege dd a {
	color: inherit;
	text-decoration: none;
}

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

.imp-kontakt__wege dd small {
	display: block;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--imp-text-muted);
	margin-top: 12px;
}

.imp-kontakt__wege dd.imp-kontakt__klein {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--imp-text-muted);
}

.imp-kontakt__wa {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

.imp-kontakt__wege dd .imp-kontakt__chat {
	border: 1px solid var(--imp-gold);
	color: var(--imp-gold);
	font-family: var(--imp-mono);
	font-size: 10px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: 10px 14px;
	transition: background .2s ease, color .2s ease;
}

.imp-kontakt__wege dd .imp-kontakt__chat:hover {
	background: var(--imp-gold);
	color: var(--imp-accent-ink);
}

/* Das Anfrageformular -----------------------------------------------------
   Aufbau: eine Flaeche, darauf ein Raster aus Feldern. Ein Feld besteht
   aus Beschriftung (Mono, klein) und Eingabe (16px, damit iOS beim
   Antippen nicht hineinzoomt). Abstaende kommen ausschliesslich vom
   Raster, nicht von den Feldern selbst, deshalb sind sie ueberall gleich.
   Das Markup dazu baut inc/formular.php. */

.imp-kontakt__formular {
	flex: 1 1 420px;
	min-width: 0;
	background: var(--imp-surface);
	border: 1px solid var(--imp-border);
	padding: clamp(28px, 3.4vw, 44px);
}

.imp-formular__kopf {
	display: block;
	font-family: var(--imp-mono);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--imp-gold);
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--imp-border);
}

.imp-formular__raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 20px;
	align-items: start;
}

/* Alles, was kein Feld ist (verborgene Felder, Antwortzeile), laeuft
   ueber die volle Breite. */
.imp-formular__raster > * {
	grid-column: 1 / -1;
	min-width: 0;
}

.imp-feld--halb {
	grid-column: span 1;
}

.imp-formular__raster .hidden-fields-container {
	display: none;
}

.imp-feld label {
	display: block;
	cursor: pointer;
}

.imp-feld__kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.imp-feld__label {
	font-family: var(--imp-mono);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--imp-text-muted);
}

.imp-feld__optional {
	font-family: var(--imp-mono);
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: .12em;
	color: var(--imp-text-dim);
	flex: none;
}

.imp-feld__hinweis {
	display: block;
	font-size: 13px;
	line-height: 1.6;
	color: var(--imp-text-dim);
	margin-top: 10px;
}

/* Eingaben. 16px ist die Untergrenze, ab der Safari auf dem iPhone beim
   Antippen nicht mehr hineinzoomt. Die Hoehe von 52px liegt ueber der
   empfohlenen Mindestgroesse fuer Tippziele. */
.imp-feld input[type="text"],
.imp-feld input[type="email"],
.imp-feld input[type="tel"],
.imp-feld input[type="url"],
.imp-feld input[type="date"],
.imp-feld input[type="number"],
.imp-feld select,
.imp-feld textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 52px;
	background: var(--imp-bg);
	border: 1px solid var(--imp-border-strong);
	border-radius: 0;
	color: var(--imp-text);
	font-family: var(--imp-font);
	font-size: 16px;
	line-height: 1.4;
	padding: 14px 16px;
	box-shadow: none;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.imp-feld textarea {
	min-height: 150px;
	line-height: 1.65;
	resize: vertical;
}

.imp-feld ::placeholder {
	color: #5c5c66;
	opacity: 1;
}

.imp-feld input:hover,
.imp-feld textarea:hover {
	border-color: var(--imp-border-hell);
}

/* Sichtbarer Fokus, auch fuer Tastaturbedienung. Der Ring liegt aussen
   und verschiebt nichts. */
.imp-feld input:focus,
.imp-feld textarea:focus,
.imp-feld select:focus {
	outline: none;
	border-color: var(--imp-gold);
	box-shadow: 0 0 0 3px rgba(201, 153, 47, .18);
	background: var(--imp-surface-2);
}

/* Chrome faerbt automatisch ausgefuellte Felder sonst hellblau ein. */
.imp-feld input:-webkit-autofill,
.imp-feld input:-webkit-autofill:focus,
.imp-feld textarea:-webkit-autofill {
	-webkit-text-fill-color: var(--imp-text);
	-webkit-box-shadow: 0 0 0 1000px var(--imp-surface-2) inset;
	caret-color: var(--imp-text);
}

/* Fehlerfall: Contact Form 7 setzt die Klasse am Feld und haengt den
   Hinweis direkt dahinter. */
.imp-feld input.wpcf7-not-valid,
.imp-feld textarea.wpcf7-not-valid {
	border-color: #d9694a;
}

.imp-feld .wpcf7-not-valid-tip {
	display: block;
	font-size: 13px;
	line-height: 1.5;
	color: #e08a6f;
	margin-top: 8px;
}

/* Absenden */
.imp-feld--senden {
	margin-top: 6px;
}

.imp-feld--senden input[type="submit"] {
	width: 100%;
	min-height: 56px;
	background: var(--imp-gold);
	color: var(--imp-accent-ink);
	border: 0;
	border-radius: 0;
	font-family: var(--imp-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .01em;
	padding: 19px 32px;
	cursor: pointer;
	transition: background .2s ease;
}

.imp-feld--senden input[type="submit"]:hover,
.imp-feld--senden input[type="submit"]:focus-visible {
	background: var(--imp-accent-hell);
}

.imp-feld--senden input[type="submit"]:focus-visible {
	outline: 2px solid var(--imp-accent-hell);
	outline-offset: 3px;
}

.imp-feld--senden input[type="submit"]:disabled {
	opacity: .6;
	cursor: progress;
}

.wpcf7-spinner {
	margin: 12px auto 0;
	display: block;
}

/* Antwortzeile nach dem Absenden. Erfolg und Fehler unterscheiden sich
   in der Farbe der linken Kante, nicht nur im Text. */
.imp-kontakt__formular .wpcf7-response-output {
	margin: 4px 0 0;
	padding: 16px 18px;
	border: 1px solid var(--imp-border-strong);
	border-left-width: 2px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--imp-text);
}

.imp-kontakt__formular form.sent .wpcf7-response-output {
	border-left-color: var(--imp-gold);
}

.imp-kontakt__formular form.invalid .wpcf7-response-output,
.imp-kontakt__formular form.failed .wpcf7-response-output,
.imp-kontakt__formular form.spam .wpcf7-response-output {
	border-left-color: #d9694a;
}

.imp-kontakt__hinweis {
	font-size: 14px;
	line-height: 1.7;
	color: var(--imp-text-dim);
	margin: 20px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--imp-border);
}

.imp-kontakt__hinweis a {
	color: var(--imp-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.imp-kontakt .imp-lkopf {
	padding-bottom: var(--imp-sec-pad);
}

/* Unter 560px wird aus dem Zweispalter eine Spalte: nebeneinander
   stehende Felder werden auf dem Handy sonst zu schmal. */
@media (max-width: 560px) {

	.imp-formular__raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.imp-feld--halb {
		grid-column: 1 / -1;
	}
}

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

@media (max-width: 1000px) {

	.imp-umfang__bild {
		position: static;
	}

	/* Unter Tabletbreite steht das Bild nicht mehr hinter dem Text,
	   sondern der Hero auf dunklem Grund. Wie im Entwurf. */
	.imp-shero__bild,
	.imp-shero__veil {
		display: none;
	}

	.imp-shero__inner {
		min-height: 0;
	}
}

@media (max-width: 700px) {

	.imp-ablauf__titel {
		flex-basis: calc(100% - 64px);
	}

	.imp-ablauf__text {
		flex-basis: 100%;
	}

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

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

	.imp-lkopf__bild {
		flex-basis: 100%;
	}

	.imp-kurz {
		padding-top: 48px;
		gap: 40px;
	}

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


	.imp-belege__kicker {
		flex-basis: 100%;
	}

	.imp-belege__zeile {
		gap: 12px 32px;
	}

	.imp-stimmen {
		gap: 40px;
	}
}