/* Firmenstil Schilder und Lichtwerbung Müller – erzeugt von musterseiten/werkzeuge/bauen.php */
:root {
	--primaer: #b00f66;
	--primaer-dunkel: #82084a;
	--akzent: #ffd60a;
	--auf-akzent: #1a1218;
	--flaeche: #f7f4f6;
	--dunkel: #17101a;
	--schrift-titel: "Barlow Condensed", system-ui, sans-serif;
	--schrift-text: "Work Sans", system-ui, sans-serif;
	--titel-gewicht: 700;
	--titel-transform: uppercase;
	--titel-abstand: 0.015em;
}

.kopf { border-bottom: 3px solid var(--akzent); }
.abschnitt.hero.geteilt { background: radial-gradient(120% 90% at 85% 40%, #2c1226 0%, var(--dunkel) 62%); color: #fff; }
.hero.geteilt .content-text h1 { color: #fff; font-size: clamp(2.7rem, 5.4vw, 5rem); line-height: 1.02; }
.hero.geteilt .content-text p { color: rgb(255 255 255 / .82); }
.hero.geteilt .oberzeile { color: var(--akzent); }
.hero.geteilt a.knopf.zweit { color: #fff; border-color: rgb(255 255 255 / .5); }
.hero.geteilt .content-image img { aspect-ratio: 1 / 1; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 30px 80px rgb(214 0 120 / .28); }
.oberzeile { letter-spacing: .2em; }
.seite-index .content-gallery ul { grid-template-columns: repeat(3, 1fr); }
.seite-referenzen .content-gallery ul { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .seite-referenzen .content-gallery ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .seite-index .content-gallery ul { grid-template-columns: repeat(2, 1fr); } }
.abschnitt.cta .knopf.zweit { color: #fff; }
.abschnitt.hero.geteilt { padding-left: max(var(--rand), (100% - var(--breite)) / 2); padding-right: max(var(--rand), (100% - var(--breite)) / 2); }
.hero.geteilt .content-image { justify-self: end; }
@media (min-width: 1000px) { #banner { grid-template-columns: repeat(4, 1fr); } }

#ueber-uns ul, #firmenschilder ul { columns: 2; column-gap: 2rem; }
@media (max-width: 640px) { #ueber-uns ul, #firmenschilder ul { columns: 1; } }