/*
 * AVS – Bausteine
 *
 * Gestaltung der Seitenabschnitte. Werte aus tokens.css, die
 * wiederkehrenden Gestaltungsmittel aus elemente.css.
 *
 * Gliederungsprinzip: Die Seite wechselt zwischen drei Flaechen –
 * Papier, warmes Creme und Anthrazit. Dieser Wechsel uebernimmt die
 * Gliederung, deshalb brauchen die Elemente darin keine Rahmen.
 * Genau das unterscheidet eine gestaltete Seite von einer Ansammlung
 * umrandeter Kaesten.
 */

/* --- Grundelemente ------------------------------------------------------ */

.avs-icon {
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	display: inline-block;
	vertical-align: middle;
}

.avs-lead {
	max-width: 60ch;
	font-size: var(--avs-groesse-l);
	line-height: var(--avs-zeile-weit);
	color: var(--avs-graphit);
}

/* --- Raster ------------------------------------------------------------- */

.avs-raster {
	display: grid;
	gap: var(--avs-abstand-6);
}

@media (min-width: 640px) {
	.avs-raster--3,
	.avs-raster--5 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
	.avs-raster--3 { grid-template-columns: repeat(3, 1fr); }
	.avs-raster--5 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
	.avs-raster--5 { grid-template-columns: repeat(5, 1fr); }
}

/* --- Knoepfe ------------------------------------------------------------ */

.avs-knopf {
	display: inline-flex;
	align-items: center;
	gap: var(--avs-abstand-2);
	padding: 0.85rem 1.6rem;
	border: 2px solid transparent;
	border-radius: var(--avs-radius);
	font-size: var(--avs-groesse-s);
	font-weight: var(--avs-fett-halb);
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color var(--avs-dauer) var(--avs-verlauf),
		border-color var(--avs-dauer) var(--avs-verlauf),
		color var(--avs-dauer) var(--avs-verlauf);
}

.avs-knopf .avs-icon {
	width: 1.05rem;
	height: 1.05rem;
	transition: transform var(--avs-dauer) var(--avs-verlauf);
}

.avs-knopf--stark {
	background-color: var(--avs-akzent);
	border-color: var(--avs-akzent);
	color: var(--avs-papier);
}

.avs-knopf--stark:hover,
.avs-knopf--stark:focus-visible {
	background-color: var(--avs-akzent-dunkel);
	border-color: var(--avs-akzent-dunkel);
	color: var(--avs-papier);
}

.avs-knopf--stark:hover .avs-icon {
	transform: translateX(3px);
}

.avs-knopf--leise {
	border-color: var(--avs-linie);
	color: var(--avs-espresso);
}

.avs-knopf--leise:hover,
.avs-knopf--leise:focus-visible {
	background-color: var(--avs-creme);
	border-color: var(--avs-akzent);
	color: var(--avs-espresso);
}

.avs-knopf--klein {
	padding: 0.5rem 1rem;
	font-size: 0.78rem;
}

.avs-knopf--platzhalter {
	opacity: 0.5;
	cursor: default;
}

/* --- Einstieg ----------------------------------------------------------- */

.avs-hero {
	position: relative;
	background:
		radial-gradient(120% 90% at 88% 0%, var(--avs-creme) 0%, transparent 62%),
		var(--avs-papier);
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
	border-bottom: 1px solid var(--avs-linie);
}

.avs-hero__raster {
	display: grid;
	gap: var(--avs-abstand-7);
	align-items: center;
}

@media (min-width: 960px) {
	.avs-hero__raster {
		grid-template-columns: 1.1fr 0.9fr;
		gap: var(--avs-abstand-8);
	}
}

.avs-hero h1 {
	margin: 0 0 var(--avs-abstand-4);
	max-width: 18ch;
	hyphens: auto;
}

.avs-hero__lead {
	max-width: 48ch;
	margin: 0 0 var(--avs-abstand-6);
	font-size: var(--avs-groesse-l);
	line-height: var(--avs-zeile-weit);
	color: var(--avs-graphit);
}

.avs-hero__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--avs-abstand-3);
	margin-bottom: var(--avs-abstand-6);
}

.avs-hero__motiv svg {
	display: block;
	width: 100%;
	height: auto;
}

.avs-hero__leiste {
	margin-top: var(--avs-abstand-6);
}

/* --- Leistungsbereiche -------------------------------------------------- */

.avs-leistungen {
	background-color: var(--avs-creme);
}

.avs-leistung {
	padding-top: var(--avs-abstand-5);
	border-top: 2px solid var(--avs-espresso);
}

.avs-leistung__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--avs-abstand-3);
	margin-bottom: var(--avs-abstand-4);
}

.avs-leistung__icon {
	color: var(--avs-akzent);
}

.avs-leistung__icon .avs-icon {
	width: 2rem;
	height: 2rem;
}

.avs-leistung__nr {
	font-family: var(--avs-schrift-daten);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	color: var(--avs-stahl);
}

.avs-leistung h3 {
	margin: 0 0 var(--avs-abstand-2);
}

.avs-leistung p {
	margin: 0;
	font-size: var(--avs-groesse-s);
	line-height: var(--avs-zeile-weit);
	color: var(--avs-text-leise);
}

/* --- Vollservice -------------------------------------------------------- */

.avs-vollservice {
	background-color: var(--avs-anthrazit);
	color: rgba(255, 255, 255, 0.78);
}

.avs-vollservice .avs-lead {
	color: rgba(255, 255, 255, 0.68);
}

.avs-dienste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.avs-dienst {
	position: relative;
	margin: 0;
	padding: var(--avs-abstand-5) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.avs-dienst::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 2.5rem;
	height: 2px;
	background-color: var(--avs-akzent);
}

.avs-dienst__icon {
	display: block;
	margin-bottom: var(--avs-abstand-3);
	color: var(--avs-akzent);
}

.avs-dienst__icon .avs-icon {
	width: 1.75rem;
	height: 1.75rem;
}

.avs-dienst h3 {
	margin: 0 0 var(--avs-abstand-2);
	color: var(--avs-papier);
}

.avs-dienst p {
	margin: 0;
	font-size: var(--avs-groesse-s);
	line-height: var(--avs-zeile-weit);
	color: rgba(255, 255, 255, 0.62);
}

/* --- Unabhaengigkeit ---------------------------------------------------- */

.avs-unabhaengig {
	background-color: var(--avs-papier);
}

.avs-unabhaengig__raster {
	display: grid;
	gap: var(--avs-abstand-7);
	align-items: start;
}

@media (min-width: 960px) {
	.avs-unabhaengig__raster {
		grid-template-columns: 1.15fr 0.85fr;
	}
}

.avs-unabhaengig h2 {
	margin: 0 0 var(--avs-abstand-4);
	max-width: 20ch;
}

.avs-unabhaengig p {
	max-width: 56ch;
	line-height: var(--avs-zeile-weit);
	color: var(--avs-text-leise);
}

/* Kernsatz herausgehoben – ohne Anfuehrungszeichen, ohne Kasten. */
.avs-merksatz {
	margin: var(--avs-abstand-6) 0 0;
	padding-left: var(--avs-abstand-5);
	border-left: 3px solid var(--avs-akzent);
	font-size: var(--avs-groesse-l);
	line-height: var(--avs-zeile-normal);
	font-weight: var(--avs-fett-mittel);
	color: var(--avs-espresso);
}

/* --- Ablauf ------------------------------------------------------------- */

.avs-ablauf {
	background-color: var(--avs-creme);
}

.avs-schritte {
	display: grid;
	gap: var(--avs-abstand-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 720px) {
	.avs-schritte { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
	.avs-schritte { grid-template-columns: repeat(4, 1fr); }
}

.avs-schritt {
	position: relative;
	margin: 0;
	padding-top: var(--avs-abstand-5);
	border-top: 1px solid var(--avs-linie);
}

.avs-schritt::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 2.5rem;
	height: 2px;
	background-color: var(--avs-espresso);
}

.avs-schritt:first-child::before {
	background-color: var(--avs-akzent);
}

.avs-schritt__nummer {
	display: block;
	margin-bottom: var(--avs-abstand-3);
	font-family: var(--avs-schrift-daten);
	font-size: 0.7rem;
	font-weight: var(--avs-fett-kraeftig);
	letter-spacing: 0.12em;
	color: var(--avs-akzent);
}

.avs-schritt__icon {
	display: block;
	margin-bottom: var(--avs-abstand-3);
	color: var(--avs-graphit);
}

.avs-schritt__icon .avs-icon {
	width: 1.75rem;
	height: 1.75rem;
}

.avs-schritt:first-child .avs-schritt__icon {
	color: var(--avs-akzent);
}

.avs-schritt h3 {
	margin: 0 0 var(--avs-abstand-2);
}

.avs-schritt p {
	margin: 0;
	font-size: var(--avs-groesse-s);
	line-height: var(--avs-zeile-weit);
	color: var(--avs-text-leise);
}

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

.avs-bereiche {
	background-color: var(--avs-papier);
}

.avs-kachel {
	display: block;
	padding: var(--avs-abstand-5) 0;
	border-top: 1px solid var(--avs-linie);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--avs-dauer) var(--avs-verlauf);
}

.avs-kachel:hover,
.avs-kachel:focus-visible {
	border-top-color: var(--avs-akzent);
	color: inherit;
}

.avs-kachel__icon {
	display: block;
	margin-bottom: var(--avs-abstand-4);
	color: var(--avs-akzent);
}

.avs-kachel__icon .avs-icon {
	width: 1.85rem;
	height: 1.85rem;
}

.avs-kachel h3 {
	margin: 0 0 var(--avs-abstand-2);
	font-size: var(--avs-groesse-m);
}

.avs-kachel p {
	margin: 0;
	font-size: var(--avs-groesse-xs);
	line-height: var(--avs-zeile-weit);
	color: var(--avs-text-leise);
}

/* --- Einzugsgebiet ------------------------------------------------------ */

.avs-gebiet {
	background-color: var(--avs-creme);
}

.avs-gebiet__raster {
	display: grid;
	gap: var(--avs-abstand-7);
	align-items: center;
}

@media (min-width: 960px) {
	.avs-gebiet__raster {
		grid-template-columns: 1fr 1fr;
	}
}

.avs-gebiet h2 {
	margin: 0 0 var(--avs-abstand-4);
}

.avs-gebiet p {
	max-width: 52ch;
	line-height: var(--avs-zeile-weit);
	color: var(--avs-text-leise);
}

.avs-gebiet__motiv svg {
	display: block;
	width: 100%;
	max-width: 440px;
	height: auto;
	margin-inline: auto;
}

/* Ortsliste als Spaltensatz statt Etikettenwolke. */
.avs-staedte {
	margin: var(--avs-abstand-6) 0 0;
	padding: var(--avs-abstand-3) 0 0;
	list-style: none;
	columns: 2;
	column-gap: var(--avs-abstand-6);
	border-top: 1px solid var(--avs-linie);
}

@media (min-width: 720px) {
	.avs-staedte { columns: 3; }
}

.avs-staedte li {
	margin: 0;
	break-inside: avoid;
}

.avs-staedte a {
	display: flex;
	align-items: center;
	gap: var(--avs-abstand-2);
	padding: 0.35rem 0;
	font-size: var(--avs-groesse-s);
	text-decoration: none;
	color: var(--avs-graphit);
	transition: color var(--avs-dauer-kurz) var(--avs-verlauf);
}

.avs-staedte a:hover {
	color: var(--avs-akzent-dunkel);
}

.avs-staedte__marke {
	display: inline-flex;
	color: var(--avs-akzent);
	opacity: 0.7;
}

.avs-staedte__marke .avs-icon {
	width: 0.85rem;
	height: 0.85rem;
}

/* --- Kontakt ------------------------------------------------------------ */

.avs-kontakt {
	background-color: var(--avs-anthrazit);
	color: rgba(255, 255, 255, 0.78);
}

.avs-kontakt__raster {
	display: grid;
	gap: var(--avs-abstand-7);
	align-items: start;
}

@media (min-width: 960px) {
	.avs-kontakt__raster {
		grid-template-columns: 1.15fr 0.85fr;
	}
}

.avs-kontakt h2 {
	margin: 0 0 var(--avs-abstand-4);
	max-width: 22ch;
	color: var(--avs-papier);
}

.avs-kontakt__lead {
	max-width: 50ch;
	line-height: var(--avs-zeile-weit);
	color: rgba(255, 255, 255, 0.68);
}

.avs-kontakt__wege {
	margin: var(--avs-abstand-6) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--avs-groesse-s);
}

.avs-kontakt__wege li {
	display: flex;
	align-items: center;
	gap: var(--avs-abstand-3);
	margin: 0;
	padding: var(--avs-abstand-3) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.avs-kontakt__wege .avs-icon {
	color: var(--avs-akzent);
}

.avs-kontakt__wege a {
	color: var(--avs-papier);
	text-decoration: none;
}

.avs-kontakt__wege a:hover {
	color: var(--avs-akzent-hell);
}

.avs-kontakt__box {
	padding: var(--avs-abstand-6);
	background-color: rgba(255, 255, 255, 0.05);
	border-top: 3px solid var(--avs-akzent);
}

.avs-kontakt__box h3 {
	margin: 0 0 var(--avs-abstand-3);
	color: var(--avs-papier);
}

.avs-kontakt__box p {
	margin: 0 0 var(--avs-abstand-5);
	font-size: var(--avs-groesse-s);
	line-height: var(--avs-zeile-weit);
	color: rgba(255, 255, 255, 0.62);
}

/* --- Standortseiten ----------------------------------------------------- */

.avs-hero--standort {
	padding-block: clamp(2.25rem, 4vw, 3.5rem);
}

.avs-hero--standort h1 {
	max-width: 16ch;
}

.avs-ortsprofil {
	background-color: var(--avs-creme);
}

/*
 * Kein zweispaltiges Raster mehr. Ein kurzer Text neben zwei
 * gestapelten Bloecken erzeugt zwangslaeufig eine ungleich hohe
 * Spalte und damit ein totes Feld. Stattdessen laeuft der Text ueber
 * die volle Breite, die Fakten stehen als Band darunter.
 */

.avs-ortsprofil__raster {
	display: grid;
	gap: var(--avs-abstand-7);
	align-items: stretch;
	margin-bottom: var(--avs-abstand-7);
}

@media (min-width: 960px) {
	.avs-ortsprofil__raster {
		grid-template-columns: 1.05fr 0.95fr;
		gap: var(--avs-abstand-8);
	}
}

.avs-ortsprofil__text {
	max-width: 62ch;
}

/* Die Bildspalte wird gestreckt, statt neben dem Text zu schweben –
   damit bleibt kein totes Feld uebrig, egal wie lang der Text ist. */
.avs-ortsprofil__bild {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
}

.avs-ortsprofil__bild img {
	display: block;
	width: 100%;
	flex: 1;
	min-height: 300px;
	object-fit: cover;
	border-radius: var(--avs-radius);
}

.avs-ortsprofil__bild figcaption {
	display: flex;
	align-items: center;
	gap: var(--avs-abstand-3);
	margin-top: var(--avs-abstand-4);
	padding-left: var(--avs-abstand-4);
	border-left: 3px solid var(--avs-akzent);
	font-size: var(--avs-groesse-s);
	color: var(--avs-graphit);
}

.avs-ortsprofil__bild figcaption .avs-icon {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--avs-akzent);
}

.avs-ortsprofil h2 {
	margin: 0 0 var(--avs-abstand-5);
}

.avs-ortsprofil__text > p {
	margin: 0;
	font-size: var(--avs-groesse-l);
	line-height: var(--avs-zeile-weit);
	color: var(--avs-graphit);
}

.avs-ortsprofil__fakten {
	display: grid;
	gap: var(--avs-abstand-5);
	align-items: start;
}

@media (min-width: 900px) {
	.avs-ortsprofil__fakten {
		grid-template-columns: 1.7fr 1fr;
	}
}

/* Der breite Block nimmt die zweispaltige Fachbelegung auf. */
.avs-block--breit .avs-faecher {
	column-gap: var(--avs-abstand-7);
}

/* --- Nachbarorte -------------------------------------------------------- */

.avs-nachbarn {
	background-color: var(--avs-papier);
}

.avs-ortsliste {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--avs-linie);
}

@media (min-width: 720px) {
	.avs-ortsliste {
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--avs-abstand-7);
	}
}

.avs-ortsliste li {
	margin: 0;
}

.avs-ortsliste a {
	display: flex;
	align-items: center;
	gap: var(--avs-abstand-3);
	padding: var(--avs-abstand-4) 0;
	border-bottom: 1px solid var(--avs-linie);
	text-decoration: none;
	color: var(--avs-espresso);
	transition: color var(--avs-dauer-kurz) var(--avs-verlauf);
}

.avs-ortsliste a:hover,
.avs-ortsliste a:focus-visible {
	color: var(--avs-akzent-dunkel);
}

.avs-ortsliste__marke {
	display: inline-flex;
	color: var(--avs-akzent);
}

.avs-ortsliste__marke .avs-icon {
	width: 1rem;
	height: 1rem;
}

.avs-ortsliste__name {
	font-weight: var(--avs-fett-halb);
	font-size: var(--avs-groesse-s);
}

.avs-ortsliste__km {
	margin-left: auto;
	font-size: 0.75rem;
	color: var(--avs-stahl);
}

/* --- Arbeitsweise ------------------------------------------------------- */

.avs-arbeitsweise {
	background-color: var(--avs-papier);
}

.avs-arbeitsweise h2 {
	margin: 0 0 var(--avs-abstand-4);
	max-width: 20ch;
}

.avs-arbeitsweise p {
	max-width: 54ch;
	line-height: var(--avs-zeile-weit);
	color: var(--avs-text-leise);
}

.avs-arbeitsweise .avs-bohnen {
	margin-top: var(--avs-abstand-5);
	font-size: var(--avs-groesse-s);
	color: var(--avs-graphit);
}


/* --- Betriebstypen mit Icon --------------------------------------------- */

.avs-branchen {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0;
}

.avs-branchen li {
	display: flex;
	align-items: center;
	gap: var(--avs-abstand-3);
	margin: 0;
	padding: var(--avs-abstand-3) 0;
	border-bottom: 1px solid var(--avs-linie);
	font-size: var(--avs-groesse-s);
	color: var(--avs-graphit);
}

.avs-branchen li:last-child {
	border-bottom: 0;
}

.avs-branchen__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: var(--avs-radius);
	background-color: var(--avs-akzent-hell);
	color: var(--avs-akzent-dunkel);
}

.avs-branchen__icon .avs-icon {
	width: 1.1rem;
	height: 1.1rem;
}

/* --- Ortsprofil, neu komponiert ----------------------------------------- */

.avs-ortsprofil__raster {
	display: grid;
	gap: var(--avs-abstand-7);
	align-items: start;
	margin-bottom: 0;
}

@media (min-width: 960px) {
	.avs-ortsprofil__raster {
		grid-template-columns: 1.15fr 0.85fr;
		gap: var(--avs-abstand-8);
	}
}

.avs-ortsprofil__text .avs-branchen {
	margin-top: var(--avs-abstand-6);
}

/* --- Einsatzorte -------------------------------------------------------- */

.avs-gebiete {
	background-color: var(--avs-papier);
}

.avs-gebiete__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--avs-abstand-5);
	margin-bottom: var(--avs-abstand-6);
	padding-bottom: var(--avs-abstand-4);
	border-bottom: 2px solid var(--avs-espresso);
}

.avs-gebiete__kopf h2 {
	margin: 0;
}

.avs-gebiete__kopf p {
	margin: 0;
	max-width: 28ch;
	font-size: var(--avs-groesse-s);
	color: var(--avs-text-leise);
}

@media (min-width: 720px) {
	.avs-faecher--dreispaltig {
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--avs-abstand-7);
	}
}

@media (min-width: 1080px) {
	.avs-faecher--dreispaltig {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- Nachbarorte -------------------------------------------------------- */

.avs-nachbarn__kopf {
	margin-bottom: var(--avs-abstand-5);
}

.avs-nachbarn__kopf h2 {
	margin: 0;
	font-size: var(--avs-groesse-xl);
}


/* --- Korrekturen -------------------------------------------------------- */

/* Ueberschriften in dunklen Abschnitten. Ohne diese Regel greift die
   Espresso-Farbe der Tokens und der Titel verschwindet im Grund. */
.avs-vollservice h2,
.avs-vollservice h3,
.avs-kontakt h2,
.avs-kontakt h3,
.avs-zitatband h2 {
	color: var(--avs-papier);
}

.avs-vollservice .avs-lead,
.avs-vollservice p {
	color: rgba(255, 255, 255, 0.68);
}

/* Bildkopf braucht unten Platz, damit die angehobene Karte nicht die
   Schaltflaechen ueberdeckt. */
.avs-standort .avs-bildkopf {
	padding-bottom: clamp(5rem, 9vw, 8rem);
}

/* --- Betriebstypen als Reihe statt Liste -------------------------------- */

/* Untereinander in halber Spaltenbreite wirkte wie ein Formular und
   liess darunter eine leere Flaeche. Als umbrechende Reihe fuellt es
   die Breite und liest sich in einem Blick. */
.avs-branchen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--avs-abstand-3);
	margin: var(--avs-abstand-6) 0 0;
	padding: 0;
	list-style: none;
}

.avs-branchen li {
	display: inline-flex;
	align-items: center;
	gap: var(--avs-abstand-3);
	margin: 0;
	padding: var(--avs-abstand-2) var(--avs-abstand-4) var(--avs-abstand-2) var(--avs-abstand-2);
	background-color: var(--avs-papier);
	border: 1px solid var(--avs-linie);
	border-radius: 999px;
	font-size: var(--avs-groesse-s);
	font-weight: var(--avs-fett-mittel);
	color: var(--avs-graphit);
}

.avs-branchen__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background-color: var(--avs-akzent-hell);
	color: var(--avs-akzent-dunkel);
}

.avs-branchen__icon .avs-icon {
	width: 1rem;
	height: 1rem;
}

/* --- Rechtsseiten ------------------------------------------------------- */

.avs-rechtskopf {
	background-color: var(--avs-espresso);
	padding-block: clamp(2.5rem, 5vw, 4rem);
	border-bottom: 3px solid var(--avs-akzent);
}

.avs-rechtskopf h1 {
	margin: 0;
	color: var(--avs-papier);
	font-size: clamp(1.9rem, 3vw, 2.6rem);
}

.avs-rechtskopf__lead {
	max-width: 58ch;
	margin: var(--avs-abstand-4) 0 0;
	font-size: var(--avs-groesse-l);
	line-height: var(--avs-zeile-weit);
	color: rgba(255, 255, 255, 0.7);
}

.avs-krumen--dunkel {
	color: rgba(255, 255, 255, 0.5);
}

.avs-rechtsinhalt {
	background-color: var(--avs-papier);
}

.avs-rechtsinhalt__raster {
	display: grid;
	gap: var(--avs-abstand-7);
	align-items: start;
}

@media (min-width: 1000px) {
	.avs-rechtsinhalt__raster {
		grid-template-columns: 15rem minmax(0, 1fr);
		gap: var(--avs-abstand-8);
	}
}

/* --- Inhaltsverzeichnis ------------------------------------------------- */

.avs-inhaltsverzeichnis {
	position: sticky;
	top: var(--avs-abstand-6);
	padding: var(--avs-abstand-5);
	background-color: var(--avs-creme);
	border-top: 3px solid var(--avs-akzent);
}

.avs-inhaltsverzeichnis h2 {
	margin: 0 0 var(--avs-abstand-4);
	font-family: var(--avs-schrift-daten);
	font-size: 0.68rem;
	font-weight: var(--avs-fett-halb);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--avs-stahl);
}

.avs-inhaltsverzeichnis ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0;
}

.avs-inhaltsverzeichnis li {
	margin: 0;
}

.avs-inhaltsverzeichnis a {
	display: flex;
	gap: var(--avs-abstand-3);
	padding: var(--avs-abstand-2) 0;
	font-size: var(--avs-groesse-xs);
	line-height: var(--avs-zeile-normal);
	color: var(--avs-graphit);
	text-decoration: none;
	border-bottom: 1px solid var(--avs-linie);
}

.avs-inhaltsverzeichnis li:last-child a {
	border-bottom: 0;
}

.avs-inhaltsverzeichnis a:hover {
	color: var(--avs-akzent-dunkel);
}

.avs-inhaltsverzeichnis__nr {
	flex: none;
	font-family: var(--avs-schrift-daten);
	color: var(--avs-akzent);
}

/* --- Rechtstext --------------------------------------------------------- */

.avs-rechtstext {
	max-width: 68ch;
}

.avs-kapitel {
	padding-block: var(--avs-abstand-6);
	border-bottom: 1px solid var(--avs-linie);
	scroll-margin-top: var(--avs-abstand-7);
}

.avs-kapitel:first-of-type {
	padding-top: 0;
}

.avs-kapitel h2 {
	display: flex;
	align-items: baseline;
	gap: var(--avs-abstand-4);
	margin: 0 0 var(--avs-abstand-4);
	font-size: var(--avs-groesse-xl);
}

.avs-kapitel__nr {
	font-family: var(--avs-schrift-daten);
	font-size: 0.72rem;
	font-weight: var(--avs-fett-halb);
	letter-spacing: 0.1em;
	color: var(--avs-akzent);
}

.avs-kapitel__text p {
	margin: 0;
	line-height: var(--avs-zeile-weit);
	color: var(--avs-graphit);
}

.avs-kapitel__text a {
	color: var(--avs-akzent-text);
}

.avs-rechtstext__stand {
	margin-top: var(--avs-abstand-6);
	font-family: var(--avs-schrift-daten);
	font-size: var(--avs-groesse-xs);
	letter-spacing: 0.06em;
	color: var(--avs-stahl);
}

/* --- Hinweis ------------------------------------------------------------ */

.avs-hinweis {
	display: flex;
	align-items: flex-start;
	gap: var(--avs-abstand-4);
	margin: 0 0 var(--avs-abstand-6);
	padding: var(--avs-abstand-5);
	background-color: var(--avs-akzent-hell);
	border-left: 3px solid var(--avs-akzent);
	font-size: var(--avs-groesse-s);
	line-height: var(--avs-zeile-weit);
	color: var(--avs-espresso);
}

.avs-hinweis .avs-icon {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--avs-akzent-dunkel);
}

/* --- Rechtsseiten: sachliche Fassung ------------------------------------ */

/*
 * Rechtstexte sind Gebrauchstexte. Sie werden nicht gelesen, um
 * ueberzeugt zu werden, sondern um eine Angabe nachzuschlagen.
 * Deshalb durchgaengig die Grotesk statt der Antiqua und ein
 * deutlich kleineres Grundmass als im uebrigen Auftritt.
 */

.avs-rechtsseite h1,
.avs-rechtsseite h2,
.avs-rechtsseite h3 {
	font-family: var(--avs-schrift-text);
	letter-spacing: -0.005em;
}

.avs-rechtskopf {
	padding-block: clamp(1.75rem, 3vw, 2.75rem);
}

.avs-rechtskopf h1 {
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	font-weight: var(--avs-fett-halb);
}

.avs-rechtskopf__lead {
	max-width: 70ch;
	margin-top: var(--avs-abstand-3);
	font-size: var(--avs-groesse-s);
	line-height: var(--avs-zeile-normal);
	color: rgba(255, 255, 255, 0.62);
}

.avs-rechtsseite .avs-krumen {
	font-size: 0.6rem;
	margin-bottom: var(--avs-abstand-3);
}

/* Kapitel */

.avs-kapitel {
	padding-block: var(--avs-abstand-5);
}

.avs-kapitel h2 {
	gap: var(--avs-abstand-3);
	margin-bottom: var(--avs-abstand-3);
	font-size: var(--avs-groesse-m);
	font-weight: var(--avs-fett-halb);
	color: var(--avs-espresso);
}

.avs-kapitel__nr {
	font-size: 0.66rem;
	letter-spacing: 0.08em;
}

.avs-kapitel__text p {
	font-size: var(--avs-groesse-s);
	line-height: 1.7;
	color: var(--avs-graphit);
}

.avs-rechtstext {
	max-width: 74ch;
}

/* Inhaltsverzeichnis */

.avs-inhaltsverzeichnis {
	padding: var(--avs-abstand-4);
}

.avs-inhaltsverzeichnis h2 {
	font-size: 0.62rem;
	margin-bottom: var(--avs-abstand-3);
}

.avs-inhaltsverzeichnis a {
	font-size: 0.78rem;
	padding-block: 0.45rem;
}

.avs-inhaltsverzeichnis__nr {
	font-size: 0.66rem;
}

.avs-rechtstext__stand {
	font-size: 0.7rem;
}

/* --- Inhaltsseiten ------------------------------------------------------ */

.avs-flaeche--papier { background-color: var(--avs-papier); }
.avs-flaeche--creme  { background-color: var(--avs-creme); }

.avs-flaeche--dunkel {
	background-color: var(--avs-anthrazit);
	color: rgba(255, 255, 255, 0.78);
}

.avs-flaeche--dunkel h2,
.avs-flaeche--dunkel h3 {
	color: var(--avs-papier);
}

.avs-abschnittskopf {
	max-width: 46ch;
	margin-bottom: var(--avs-abstand-6);
}

.avs-abschnittskopf h2 {
	margin: 0;
}

.avs-textstrecke p {
	margin: 0 0 var(--avs-abstand-4);
	font-size: var(--avs-groesse-l);
	line-height: var(--avs-zeile-weit);
	color: var(--avs-graphit);
}

.avs-textstrecke p:last-child {
	margin-bottom: 0;
}

.avs-flaeche--dunkel .avs-textstrecke p {
	color: rgba(255, 255, 255, 0.68);
}

.avs-bildtext .avs-bohnen {
	margin-top: var(--avs-abstand-5);
	font-size: var(--avs-groesse-s);
}

/* --- Bildkarten, vierspaltig -------------------------------------------- */

@media (min-width: 640px) {
	.avs-bildkarten--vier { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1080px) {
	.avs-bildkarten--vier { grid-template-columns: repeat(4, 1fr); }
}

/* --- Fragen und Antworten ----------------------------------------------- */

/*
 * Umgesetzt mit details und summary: kein Skript noetig, von
 * Tastatur und Vorlesesoftware ohne Zusatzarbeit bedienbar, und die
 * Antworten stehen im Quelltext – also auch fuer Suchmaschinen
 * lesbar, ohne dass sie ausgeklappt werden muessten.
 */

.avs-faq {
	max-width: 74ch;
	border-top: 1px solid var(--avs-linie);
}

.avs-faq__eintrag {
	border-bottom: 1px solid var(--avs-linie);
}

.avs-faq__eintrag summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--avs-abstand-4);
	padding: var(--avs-abstand-4) 0;
	cursor: pointer;
	list-style: none;
	font-size: var(--avs-groesse-m);
	font-weight: var(--avs-fett-halb);
	color: var(--avs-espresso);
	transition: color var(--avs-dauer-kurz) var(--avs-verlauf);
}

.avs-faq__eintrag summary::-webkit-details-marker {
	display: none;
}

.avs-faq__eintrag summary:hover {
	color: var(--avs-akzent-dunkel);
}

/* Plus, das sich beim Aufklappen zum Minus dreht. */
.avs-faq__zeichen {
	position: relative;
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

.avs-faq__zeichen::before,
.avs-faq__zeichen::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 2px;
	background-color: var(--avs-akzent);
	transition: transform var(--avs-dauer) var(--avs-verlauf);
}

.avs-faq__zeichen::after {
	transform: rotate(90deg);
}

.avs-faq__eintrag[open] .avs-faq__zeichen::after {
	transform: rotate(0deg);
}

.avs-faq__antwort {
	padding: 0 0 var(--avs-abstand-5);
}

.avs-faq__antwort p {
	max-width: 68ch;
	margin: 0;
	font-size: var(--avs-groesse-s);
	line-height: 1.75;
	color: var(--avs-text-leise);
}

/* --- Kontaktkarten ------------------------------------------------------ */

.avs-kontaktkarten {
	display: grid;
	gap: var(--avs-abstand-5);
}

@media (min-width: 760px) {
	.avs-kontaktkarten { grid-template-columns: repeat(3, 1fr); }
}

.avs-kontaktkarte__wert {
	margin: 0 0 var(--avs-abstand-2);
	font-size: var(--avs-groesse-l);
	font-weight: var(--avs-fett-halb);
	color: var(--avs-espresso);
}

.avs-kontaktkarte__wert a {
	color: inherit;
	text-decoration: none;
}

.avs-kontaktkarte__wert a:hover {
	color: var(--avs-akzent-dunkel);
}

.avs-kontaktkarte__zusatz {
	margin: 0;
	font-size: var(--avs-groesse-xs);
	color: var(--avs-text-leise);
}

/* --- Standortgitter ----------------------------------------------------- */

.avs-standortgitter {
	display: grid;
	gap: var(--avs-abstand-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px)  { .avs-standortgitter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .avs-standortgitter { grid-template-columns: repeat(3, 1fr); } }

.avs-standortgitter li {
	margin: 0;
}

.avs-standortgitter a {
	position: relative;
	display: block;
	padding: var(--avs-abstand-5) var(--avs-abstand-6) var(--avs-abstand-5) var(--avs-abstand-5);
	background-color: var(--avs-papier);
	border-top: 2px solid var(--avs-linie);
	text-decoration: none;
	color: inherit;
	transition:
		border-top-color var(--avs-dauer) var(--avs-verlauf),
		background-color var(--avs-dauer) var(--avs-verlauf);
}

.avs-standortgitter a:hover,
.avs-standortgitter a:focus-visible {
	border-top-color: var(--avs-akzent);
	background-color: var(--avs-creme);
}

.avs-standortgitter__kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--avs-abstand-3);
	margin-bottom: var(--avs-abstand-2);
}

.avs-standortgitter__name {
	font-family: var(--avs-schrift-titel);
	font-size: var(--avs-groesse-l);
	font-weight: var(--avs-fett-halb);
	color: var(--avs-espresso);
}

.avs-standortgitter__km {
	font-family: var(--avs-schrift-daten);
	font-size: 0.7rem;
	font-variant-numeric: tabular-nums;
	color: var(--avs-akzent);
}

.avs-standortgitter__branchen {
	display: block;
	font-size: var(--avs-groesse-xs);
	line-height: var(--avs-zeile-normal);
	color: var(--avs-text-leise);
}

.avs-standortgitter__pfeil {
	position: absolute;
	right: var(--avs-abstand-4);
	bottom: var(--avs-abstand-4);
	display: inline-flex;
	color: var(--avs-linie);
	transition:
		color var(--avs-dauer) var(--avs-verlauf),
		transform var(--avs-dauer) var(--avs-verlauf);
}

.avs-standortgitter__pfeil .avs-icon {
	width: 1rem;
	height: 1rem;
}

.avs-standortgitter a:hover .avs-standortgitter__pfeil {
	color: var(--avs-akzent);
	transform: translateX(3px);
}

/* --- Formular ----------------------------------------------------------- */

.avs-formular {
	max-width: 46rem;
}

.avs-formular__raster {
	display: grid;
	gap: var(--avs-abstand-4) var(--avs-abstand-5);
}

@media (min-width: 620px) {
	.avs-formular__raster { grid-template-columns: repeat(2, 1fr); }
}

.avs-feld {
	margin: 0 0 var(--avs-abstand-4);
	display: flex;
	flex-direction: column;
	gap: var(--avs-abstand-2);
}

.avs-feld label,
.avs-feld legend {
	font-size: var(--avs-groesse-xs);
	font-weight: var(--avs-fett-halb);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--avs-stahl);
}

.avs-pflicht {
	color: var(--avs-akzent);
}

.avs-feld input[type="text"],
.avs-feld input[type="email"],
.avs-feld input[type="tel"],
.avs-feld textarea {
	width: 100%;
	padding: 0.8rem 0.9rem;
	background-color: var(--avs-papier);
	border: 1px solid var(--avs-linie);
	border-radius: var(--avs-radius);
	font-family: var(--avs-schrift-text);
	font-size: var(--avs-groesse-s);
	color: var(--avs-text);
	transition: border-color var(--avs-dauer-kurz) var(--avs-verlauf);
}

.avs-feld input:focus,
.avs-feld textarea:focus {
	border-color: var(--avs-akzent);
	outline: none;
	box-shadow: 0 0 0 3px var(--avs-akzent-hell);
}

.avs-feld textarea {
	resize: vertical;
	line-height: var(--avs-zeile-normal);
}

/* Auswahlfelder */

.avs-feld--auswahl {
	border: 0;
	padding: 0;
	margin-bottom: var(--avs-abstand-5);
}

.avs-auswahl {
	display: flex;
	flex-wrap: wrap;
	gap: var(--avs-abstand-3);
}

.avs-auswahl__feld {
	display: inline-flex;
	align-items: center;
	gap: var(--avs-abstand-2);
	padding: 0.5rem 0.9rem;
	background-color: var(--avs-papier);
	border: 1px solid var(--avs-linie);
	border-radius: 999px;
	font-size: var(--avs-groesse-s);
	font-weight: var(--avs-fett-normal);
	letter-spacing: 0;
	text-transform: none;
	color: var(--avs-graphit);
	cursor: pointer;
	transition: border-color var(--avs-dauer-kurz) var(--avs-verlauf);
}

.avs-auswahl__feld:hover {
	border-color: var(--avs-akzent);
}

.avs-auswahl__feld input {
	accent-color: var(--avs-akzent);
}

.avs-auswahl__feld:has(input:checked) {
	border-color: var(--avs-akzent);
	background-color: var(--avs-akzent-hell);
	color: var(--avs-espresso);
}

.avs-formular__hinweis {
	max-width: 60ch;
	margin: 0 0 var(--avs-abstand-5);
	font-size: var(--avs-groesse-xs);
	line-height: var(--avs-zeile-normal);
	color: var(--avs-text-leise);
}

.avs-formular__hinweis a {
	color: var(--avs-akzent-text);
}

/* Honigtopf: fuer Menschen unsichtbar, aber nicht mit display:none –
   manche Automaten pruefen genau darauf. */
.avs-honigtopf {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Meldungen */

.avs-meldung {
	display: flex;
	align-items: flex-start;
	gap: var(--avs-abstand-3);
	margin: 0 0 var(--avs-abstand-6);
	padding: var(--avs-abstand-4) var(--avs-abstand-5);
	font-size: var(--avs-groesse-s);
	line-height: var(--avs-zeile-normal);
}

.avs-meldung p {
	margin: 0 0 var(--avs-abstand-2);
}

.avs-meldung p:last-child {
	margin-bottom: 0;
}

.avs-meldung .avs-icon {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

.avs-meldung--gut {
	background-color: #eef5ef;
	border-left: 3px solid var(--avs-erfolg);
	color: #1f4a2c;
}

.avs-meldung--gut .avs-icon {
	color: var(--avs-erfolg);
}

.avs-meldung--fehler {
	background-color: var(--avs-akzent-hell);
	border-left: 3px solid var(--avs-fehler);
	color: #6e2418;
}

.avs-meldung--fehler .avs-icon {
	color: var(--avs-fehler);
}

/* Auf dunklem Grund */

.avs-kontakt .avs-feld label,
.avs-kontakt .avs-feld legend {
	color: rgba(255, 255, 255, 0.6);
}

.avs-kontakt .avs-formular__hinweis {
	color: rgba(255, 255, 255, 0.55);
}

.avs-kontakt .avs-auswahl__feld {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.8);
}

/* Kontaktabschnitt mit Formular: die Formularspalte bekommt mehr
   Breite als die Kontaktangaben daneben. */
@media (min-width: 960px) {
	.avs-kontakt__raster--formular {
		grid-template-columns: 0.85fr 1.15fr;
	}
}

.avs-kontakt .avs-formular {
	max-width: none;
}

.avs-kontakt .avs-kontakt__box {
	padding: var(--avs-abstand-6) var(--avs-abstand-6) var(--avs-abstand-5);
}

/* --- Zweifarbige Ueberschriften ----------------------------------------- */

/*
 * Zweite Zeile im Akzent. Der Umbruch ist Teil der Gestaltung,
 * deshalb steht der Akzentteil als eigener Block – so bricht die
 * Ueberschrift immer an derselben, gewollten Stelle und nicht dort,
 * wo die Zeile gerade voll ist.
 */
.avs-titel__akzent {
	display: block;
	color: var(--avs-akzent);
}

/* Auf dunklem Grund bleibt der Akzent, der Grundteil wird hell. */
.avs-flaeche--dunkel h2,
.avs-vollservice h2,
.avs-kontakt h2 {
	color: var(--avs-papier);
}

.avs-flaeche--dunkel .avs-titel__akzent,
.avs-vollservice .avs-titel__akzent,
.avs-kontakt .avs-titel__akzent {
	color: var(--avs-akzent);
}

/* Abschnittsueberschriften duerfen deutlich groesser und enger
   stehen als bisher. Zwei Zeilen im Wechsel der Farbe tragen die
   Groesse – einzeilig waere sie zu laut. */
.avs-abschnittskopf h2,
.avs-titelzeile h2,
.avs-kopfmitte h2,
.avs-unabhaengig h2,
.avs-gebiet h2,
.avs-kontakt h2,
.avs-vollservice h2,
.avs-ortsprofil h2,
.avs-arbeitsweise h2,
.avs-gebiete__kopf h2,
.avs-halbbild__text h2 {
	font-size: clamp(1.75rem, 3vw, 2.6rem);
	line-height: 1.06;
	letter-spacing: -0.03em;
	text-wrap: initial;
}

.avs-abschnittskopf {
	max-width: 34ch;
}

/* --- Korrekturen Runde 2 ------------------------------------------------ */

/*
 * 1. Meldungen im dunklen Kontaktbereich waren unlesbar: Die Regel
 *    fuer Absaetze im Kontaktkasten setzte weisse Schrift, die
 *    Meldung hat aber einen hellen Grund. Hoehere Spezifitaet statt
 *    !important – die Regel gehoert hierhin, nicht in eine Ausnahme.
 */
.avs-kontakt .avs-kontakt__box .avs-meldung--gut,
.avs-kontakt .avs-kontakt__box .avs-meldung--gut p,
.avs-kontakt .avs-kontakt__box .avs-meldung--gut span {
	color: #1c4028;
	font-weight: var(--avs-fett-mittel);
}

.avs-kontakt .avs-kontakt__box .avs-meldung--fehler,
.avs-kontakt .avs-kontakt__box .avs-meldung--fehler p,
.avs-kontakt .avs-kontakt__box .avs-meldung--fehler span {
	color: #6e2418;
	font-weight: var(--avs-fett-mittel);
}

/*
 * 2. Das Typenschild hatte auf dunklem Grund zu wenig Kontrast:
 *    graue Schrift auf Anthrazit. Reines Weiss und eine Stufe
 *    kraeftiger – bei 0.7rem und weiter Laufweite traegt eine
 *    zurueckhaltende Farbe nicht.
 */
.avs-schild {
	color: #ffffff;
	font-weight: var(--avs-fett-kraeftig);
}

.avs-schild--hell {
	background-color: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

/* Auf hellem Grund bleibt das Schild dunkel mit weisser Schrift. */
.avs-flaeche--papier .avs-schild,
.avs-flaeche--creme .avs-schild,
.avs-leistungen .avs-schild,
.avs-ablauf .avs-schild,
.avs-bereiche .avs-schild,
.avs-gebiet .avs-schild,
.avs-ortsprofil .avs-schild,
.avs-gebiete .avs-schild,
.avs-nachbarn .avs-schild,
.avs-unabhaengig .avs-schild,
.avs-arbeitsweise .avs-schild {
	background-color: var(--avs-espresso);
	color: #ffffff;
}

/* --- Fragen und Antworten: zweispaltig mit Icon -------------------------- */

.avs-faq {
	display: grid;
	gap: 0 var(--avs-abstand-7);
	max-width: none;
	border-top: 0;
}

@media (min-width: 900px) {
	.avs-faq { grid-template-columns: repeat(2, 1fr); }
}

.avs-faq__eintrag {
	border-bottom: 1px solid var(--avs-linie);
	border-top: 1px solid var(--avs-linie);
	margin-top: -1px;
}

.avs-faq__eintrag summary {
	gap: var(--avs-abstand-3);
	padding: var(--avs-abstand-4) 0;
	font-size: var(--avs-groesse-s);
	line-height: var(--avs-zeile-normal);
}

.avs-faq__frage {
	display: flex;
	align-items: center;
	gap: var(--avs-abstand-3);
	flex: 1;
}

.avs-faq__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: var(--avs-radius);
	background-color: var(--avs-akzent-hell);
	color: var(--avs-akzent-dunkel);
	transition: background-color var(--avs-dauer) var(--avs-verlauf);
}

.avs-faq__icon .avs-icon {
	width: 1.05rem;
	height: 1.05rem;
}

.avs-faq__eintrag[open] .avs-faq__icon {
	background-color: var(--avs-akzent);
	color: #ffffff;
}

.avs-faq__antwort {
	padding: 0 0 var(--avs-abstand-5) calc(2rem + var(--avs-abstand-3));
}

.avs-faq__antwort p {
	max-width: 52ch;
}

/*
 * Das Typenschild ist ein Absatz. Regeln wie .avs-vollservice p
 * setzen darin gedaempftes Weiss und gewinnen mit zwei Klassen gegen
 * .avs-schild mit einer – unabhaengig von der Reihenfolge im
 * Stylesheet. Deshalb hier gleichwertig spezifisch gegengesteuert.
 */
.avs-vollservice p.avs-schild,
.avs-kontakt p.avs-schild,
.avs-flaeche--dunkel p.avs-schild,
.avs-zitatband p.avs-schild,
.avs-halbbild__text p.avs-schild,
.avs-ortsprofil p.avs-schild,
.avs-gebiet p.avs-schild,
.avs-leistungen p.avs-schild,
.avs-ablauf p.avs-schild,
.avs-bereiche p.avs-schild,
.avs-unabhaengig p.avs-schild,
.avs-arbeitsweise p.avs-schild,
.avs-gebiete p.avs-schild,
.avs-nachbarn p.avs-schild,
.avs-abschnittskopf p.avs-schild,
.avs-kopfmitte p.avs-schild,
.avs-bildkopf p.avs-schild {
	color: #ffffff;
	font-weight: var(--avs-fett-kraeftig);
	letter-spacing: 0.12em;
}

/* --- Maßverhältnisse ---------------------------------------------------- */

/*
 * Uebernommen aus der Vergleichsvorlage – ohne Schriftwechsel, denn
 * diese Werte haengen nicht an der Schriftart:
 *
 *   Zeilenhoehe der Ueberschriften   0.95 statt 1.06
 *   Laufweite                        -0.035em statt -0.03em
 *   Textblock                        570px, Absatz 475px
 *   Lead                             1.0625rem bei Zeilenhoehe 1.6
 *
 * Der sichtbare Fehler vorher: Die Ueberschrift war auf 20 Zeichen
 * begrenzt und brach dadurch auf vier Zeilen. Bei zweifarbiger
 * Setzung sollen es genau zwei sein – der Umbruch steckt schon im
 * Markup, die Breite darf ihn nicht zusaetzlich erzwingen.
 */

.avs-abschnittskopf h2,
.avs-titelzeile h2,
.avs-kopfmitte h2,
.avs-unabhaengig h2,
.avs-gebiet h2,
.avs-kontakt h2,
.avs-vollservice h2,
.avs-ortsprofil h2,
.avs-arbeitsweise h2,
.avs-gebiete__kopf h2,
.avs-halbbild__text h2 {
	line-height: 0.95;
	letter-spacing: -0.035em;
	max-width: none;
}

/*
 * Textbreiten. Wichtig: Die Werte 570 und 475 Pixel stammen aus
 * einer einspaltigen Vorlage. In einem Zweispalter kommen sie zur
 * Spaltenbreite hinzu und ergeben dann eine Spalte, in der jedes
 * Wort umbricht. Deshalb wird hier nur nach oben begrenzt, wenn die
 * Spalte tatsaechlich breiter ist als die Lesegrenze – und nie
 * beides uebereinander.
 */
.avs-unabhaengig p,
.avs-arbeitsweise p,
.avs-gebiet p,
.avs-halbbild__text p,
.avs-textstrecke p {
	max-width: 52ch;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--avs-graphit);
}

/* Einspaltige Textstrecken duerfen die volle Lesebreite nutzen. */
.avs-textstrecke {
	max-width: 68ch;
}

.avs-flaeche--dunkel .avs-textstrecke p,
.avs-halbbild--dunkel .avs-halbbild__text p {
	color: rgba(255, 255, 255, 0.72);
}

/* Merksatz: naeher an den Text darueber, dunkler, enger. */
.avs-merksatz {
	margin-top: var(--avs-abstand-5);
	max-width: 46ch;
	font-size: 1.125rem;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: var(--avs-espresso);
	font-weight: var(--avs-fett-halb);
}

/* Bild neben Text: gleiche Hoehe statt schwebend mittig. Ein Bild,
   das kleiner als die Textspalte ist und mittig steht, laesst oben
   und unten Luft und wirkt eingesetzt statt gesetzt. */
.avs-bildtext {
	align-items: stretch;
}

.avs-bildtext__bild {
	display: flex;
}

.avs-bildtext__bild img {
	width: 100%;
	height: 100%;
	min-height: 340px;
	max-height: none;
	object-fit: cover;
}

/* Abschnittskopf mit Lead darunter. */
.avs-abschnittskopf h2 + p,
.avs-kopfmitte h2 + p {
	margin-top: var(--avs-abstand-4);
	font-size: 1.0625rem;
	line-height: 1.6;
}


/* Zweispalter mit Text und Bild: die Textspalte bekommt Vorrang,
   damit die Ueberschrift zweizeilig bleibt und nicht jedes Wort
   einzeln umbricht. */
@media (min-width: 960px) {
	.avs-unabhaengig__raster,
	.avs-bildtext {
		grid-template-columns: minmax(30rem, 1.15fr) minmax(0, 0.85fr);
	}
}

/*
 * Zeilenhoehe korrigiert. 0.95 war aus der Vergleichsvorlage
 * uebernommen – dort laeuft eine Grotesk mit kurzen Unterlaengen.
 * Fraunces hat als Antiqua deutlich laengere Unterlaengen, dadurch
 * beruehrte das g der einen Zeile das A der naechsten. Der Wert
 * gehoert zur Schrift, nicht zum Layout.
 */
.avs-abschnittskopf h2,
.avs-titelzeile h2,
.avs-kopfmitte h2,
.avs-unabhaengig h2,
.avs-gebiet h2,
.avs-kontakt h2,
.avs-vollservice h2,
.avs-ortsprofil h2,
.avs-arbeitsweise h2,
.avs-gebiete__kopf h2,
.avs-halbbild__text h2 {
	line-height: 1.04;
}

/* Zusaetzliche Luft vor dem Akzentteil – die Farbtrennung braucht
   einen Hauch Abstand, damit sie als zwei Zeilen gelesen wird. */
.avs-titel__akzent {
	margin-top: 0.08em;
}

/* --- Datenband: zentriert und ohne Überlappung -------------------------- */

/*
 * Die Werte stehen jetzt mittig unter- statt nebeneinander gedraengt.
 * Wortwerte wie "Wöchentlich" oder "Keine" lesen sich besser als
 * eine 0 oder ein "1× / Woche" – eine Null als Blickfang wirkt
 * unbeabsichtigt komisch.
 */
.avs-anhebung .avs-leiste li,
.avs-bildkopf .avs-leiste li {
	text-align: center;
	padding-inline: var(--avs-abstand-4);
}

.avs-leiste__wert {
	font-family: var(--avs-schrift-titel);
	font-size: clamp(1.25rem, 1.8vw, 1.6rem);
	font-weight: var(--avs-fett-halb);
	letter-spacing: -0.02em;
	color: var(--avs-espresso);
}

.avs-leiste__label {
	letter-spacing: 0.09em;
}

/*
 * Der Bildkopf braucht deutlich mehr Platz nach unten. Die
 * angehobene Karte ragt um 5rem hinein und ist selbst rund 7rem
 * hoch – der bisherige Wert reichte dafuer nicht und die Karte
 * schnitt in Text und Schaltflaeche.
 */
.avs-bildkopf--mit-leiste {
	padding-bottom: clamp(8rem, 13vw, 11rem);
}

/* --- Datenband unter dem Bildkopf --------------------------------------- */

/*
 * Die Ueberlappung selbst ist in komposition.css definiert, die
 * Breite der Ueberschriften in bild-hero.css. Beide Dateien laden
 * nach dieser hier – Regeln an dieser Stelle wuerden also nicht
 * greifen. Hier stehen nur die Werte, die nirgends sonst gesetzt
 * sind.
 */
.avs-bildkopf--mit-leiste {
	padding-bottom: calc(var(--avs-ueberlappung) + clamp(2.5rem, 5vw, 4rem));
}

.avs-container > .avs-anhebung {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.avs-bildkopf__spalten .avs-bildkopf__aktionen {
	margin-bottom: var(--avs-abstand-4);
}


/* --- Abstände im Abschnittskopf ----------------------------------------- */

/*
 * Zwischen Schild, Ueberschrift und Inhalt stand zu viel Luft: das
 * Schild hatte 1.5rem Abstand nach unten, der Kopf weitere 1.5rem –
 * zusammen fast vier Zeilen Leerraum vor dem ersten Inhalt.
 */
.avs-abschnittskopf .avs-schild,
.avs-kopfmitte .avs-schild {
	margin-bottom: var(--avs-abstand-3);
}

.avs-abschnittskopf {
	margin-bottom: var(--avs-abstand-5);
}

.avs-abschnittskopf h2 + p {
	margin-top: var(--avs-abstand-3);
}

/* --- Illustrationen ----------------------------------------------------- */

.avs-illu {
	display: block;
	width: 100%;
}

.avs-illu svg {
	display: block;
	width: 100%;
	height: auto;
}

/* In Bild-neben-Text-Abschnitten steht die Illustration frei, ohne
   Rahmen und ohne Beschnitt – anders als ein Foto, das eine Kante
   braucht, um als Bild gelesen zu werden. */
.avs-bildtext__bild .avs-illu,
.avs-hochbild .avs-illu {
	max-width: 480px;
	margin-inline: auto;
}

/* Kleinere Fassung in Karten. */
.avs-bildkarte .avs-illu {
	padding: var(--avs-abstand-5) var(--avs-abstand-5) 0;
	background-color: var(--avs-creme);
}

.avs-illu--klein {
	max-width: 320px;
}

/* Illustration in der halbseitigen Bildflaeche: mittig statt
   formatfuellend, weil eine Zeichnung keinen Beschnitt vertraegt. */
.avs-halbbild__bild--illu {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--avs-abstand-6);
	background-color: var(--avs-creme);
}

.avs-halbbild__bild--illu .avs-illu {
	max-width: 420px;
}

/* --- Textstrecke mit Illustration --------------------------------------- */

.avs-textbild {
	display: grid;
	gap: var(--avs-abstand-7);
	align-items: center;
}

@media (min-width: 900px) {
	.avs-textbild {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: var(--avs-abstand-8);
	}
}

.avs-textbild__illu {
	display: flex;
	justify-content: center;
}

.avs-textbild__illu .avs-illu {
	max-width: 420px;
}

/* Bei zweispaltigem Text laeuft die Ueberschrift ueber die volle
   Breite – sonst bricht sie unnoetig um, obwohl daneben Platz ist. */
.avs-abschnittskopf--breit {
	max-width: none;
}

.avs-abschnittskopf--breit h2 {
	max-width: 20ch;
}

/*
 * Silbentrennung in Ueberschriften abschalten. Sie hat zu Umbruechen
 * mitten im Wort gefuehrt ("Selbstverständli / chkeit"). In
 * Fliesstext ist sie sinnvoll, in grossen Graden nicht.
 */
h1, h2,
.avs-titel__akzent {
	hyphens: manual;
	overflow-wrap: normal;
}

/* Sehr lange Woerter duerfen trotzdem brechen, sonst laufen sie aus
   der Spalte heraus – aber erst als letzte Rettung. */
@media (max-width: 639px) {
	h1, h2 {
		overflow-wrap: break-word;
	}
}

/* --- Hochformatige Illustrationen --------------------------------------- */

/*
 * Die Automaten sind Standgeraete und damit hochformatig. In
 * Textspalten und Karten muessen sie deshalb anders begrenzt werden
 * als die querformatigen Motive – ueber die Hoehe, nicht die Breite.
 */
.avs-textbild__illu .avs-illu svg,
.avs-bildtext__bild .avs-illu svg,
.avs-hochbild .avs-illu svg {
	max-height: 440px;
	width: auto;
	margin-inline: auto;
}

.avs-bildkarte .avs-illu svg {
	max-height: 200px;
	width: auto;
	margin-inline: auto;
}

.avs-halbbild__bild--illu .avs-illu svg {
	max-height: 400px;
	width: auto;
}

/* Der Bildkopf zeigt keine Illustration – dort steht das Foto. */

/* --- Gerätekarten -------------------------------------------------------- */

/*
 * Herstellerfotos statt Illustration: Hier geht es um ein konkretes
 * Geraet, das der Kunde bekommt. Die Illustration steht fuer die
 * Kategorie, das Foto fuer das Modell – beide haben ihre Rolle.
 */

.avs-geraete__hinweis {
	max-width: 62ch;
	margin: 0 0 var(--avs-abstand-6);
	padding-left: var(--avs-abstand-4);
	border-left: 3px solid var(--avs-akzent);
	font-size: var(--avs-groesse-s);
	line-height: var(--avs-zeile-weit);
	color: var(--avs-text-leise);
}

.avs-geraete {
	display: grid;
	gap: var(--avs-abstand-5);
}

@media (min-width: 720px) {
	.avs-geraete { grid-template-columns: repeat(3, 1fr); }
}

.avs-geraet {
	display: flex;
	flex-direction: column;
	background-color: var(--avs-papier);
	border-top: 3px solid var(--avs-akzent);
	box-shadow: var(--avs-schatten-1);
}

/* Bildfeld mit warmem Grund: freigestellte Herstellerbilder brauchen
   eine Flaeche, sonst schweben sie im Weiss. */
.avs-geraet__bild {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--avs-abstand-5);
	background:
		linear-gradient(168deg, var(--avs-creme) 0%, var(--avs-grund) 100%);
	min-height: 220px;
}

.avs-geraet__bild img {
	display: block;
	max-height: 240px;
	width: auto;
	object-fit: contain;
}

.avs-geraet__bild .avs-illu svg {
	max-height: 200px;
	width: auto;
}

.avs-geraet__text {
	padding: var(--avs-abstand-5);
}

.avs-geraet h3 {
	margin: 0 0 var(--avs-abstand-3);
	font-size: var(--avs-groesse-l);
}

.avs-geraet p {
	margin: 0 0 var(--avs-abstand-4);
	font-size: var(--avs-groesse-s);
	line-height: var(--avs-zeile-weit);
	color: var(--avs-text-leise);
}

.avs-geraet .avs-bohnen {
	font-size: var(--avs-groesse-xs);
}

.avs-geraet .avs-bohnen li {
	margin-bottom: var(--avs-abstand-2);
	color: var(--avs-graphit);
}

/* Einzelnes Gerätefoto neben Text: warmer Grund, damit das
   freigestellte Bild nicht im Weiß schwebt. */
.avs-geraetefoto {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--avs-abstand-6);
	background:
		linear-gradient(168deg, var(--avs-creme) 0%, var(--avs-grund) 100%);
	border-top: 3px solid var(--avs-akzent);
}

.avs-geraetefoto img {
	display: block;
	max-height: 400px;
	width: auto;
	object-fit: contain;
}

/* --- Fragen und Antworten, überarbeitet ---------------------------------- */

/*
 * Vorher: zwei Spalten mit Haarlinien – das las sich wie eine
 * Tabelle. Jetzt sind es einzelne Felder mit eigener Flaeche, die
 * beim Aufklappen die Farbe wechseln. Der Wechsel ist das
 * eigentliche Mittel: geschlossen ruhig, offen farbig abgesetzt.
 */

.avs-faq {
	display: grid;
	gap: var(--avs-abstand-3);
	max-width: none;
	border-top: 0;
}

@media (min-width: 1000px) {
	.avs-faq {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--avs-abstand-4);
		align-items: start;
	}
}

.avs-faq__eintrag {
	margin: 0;
	border: 0;
	border-left: 3px solid var(--avs-linie);
	background-color: var(--avs-papier);
	box-shadow: var(--avs-schatten-1);
	transition:
		border-left-color var(--avs-dauer) var(--avs-verlauf),
		background-color var(--avs-dauer) var(--avs-verlauf);
}

.avs-faq__eintrag:hover {
	border-left-color: var(--avs-akzent);
}

/* Geoeffnet: warme Flaeche und Akzentkante – der Unterschied ist
   sofort sichtbar, auch beim Ueberfliegen der Seite. */
.avs-faq__eintrag[open] {
	background-color: var(--avs-creme);
	border-left-color: var(--avs-akzent);
	box-shadow: var(--avs-schatten-2);
}

.avs-faq__eintrag summary {
	gap: var(--avs-abstand-4);
	padding: var(--avs-abstand-4) var(--avs-abstand-5);
	font-size: var(--avs-groesse-s);
	font-weight: var(--avs-fett-halb);
	line-height: var(--avs-zeile-normal);
	color: var(--avs-espresso);
}

.avs-faq__icon {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: var(--avs-akzent-hell);
	color: var(--avs-akzent-dunkel);
}

.avs-faq__eintrag[open] .avs-faq__icon {
	background-color: var(--avs-akzent);
	color: #ffffff;
}

.avs-faq__antwort {
	padding: 0 var(--avs-abstand-5) var(--avs-abstand-5)
	         calc(2.25rem + var(--avs-abstand-4) + var(--avs-abstand-5));
}

.avs-faq__antwort p {
	max-width: none;
	font-size: var(--avs-groesse-s);
	line-height: 1.7;
	color: var(--avs-graphit);
}

/* Auf Creme-Flaechen bekommen die Felder Papier als Grund, damit sie
   sich absetzen – sonst verschwinden sie im Hintergrund. */
.avs-flaeche--creme .avs-faq__eintrag {
	background-color: var(--avs-papier);
}

.avs-flaeche--creme .avs-faq__eintrag[open] {
	background-color: #ffffff;
	border-left-color: var(--avs-akzent);
}

@media (max-width: 639px) {
	.avs-faq__eintrag summary {
		padding: var(--avs-abstand-3) var(--avs-abstand-4);
	}

	.avs-faq__antwort {
		padding: 0 var(--avs-abstand-4) var(--avs-abstand-4) var(--avs-abstand-4);
	}
}

/* Frage als Überschrift: gleiche Optik wie vorher, aber semantisch
   korrekt – Suchmaschinen erkennen die Gliederung dadurch. */
.avs-faq__frage h3 {
	margin: 0;
	font-family: var(--avs-schrift-text);
	font-size: var(--avs-groesse-s);
	font-weight: var(--avs-fett-halb);
	line-height: var(--avs-zeile-normal);
	letter-spacing: 0;
	color: inherit;
}

.avs-faq__eintrag:target {
	border-left-color: var(--avs-akzent);
	box-shadow: 0 0 0 3px var(--avs-akzent-hell), var(--avs-schatten-2);
	scroll-margin-top: var(--avs-abstand-7);
}

/* --- Verweis auf ein anderes Angebot ------------------------------------ */

.avs-verweis {
	max-width: 62ch;
	padding: var(--avs-abstand-6);
	background:
		linear-gradient(168deg, var(--avs-creme) 0%, var(--avs-grund) 100%);
	border-left: 3px solid var(--avs-akzent);
}

.avs-verweis p {
	margin: 0 0 var(--avs-abstand-5);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--avs-graphit);
}