/* AS Dienstleistungen – Komponenten. Farben, Schriften und Abstände kommen aus theme.json. */

:root {
	--as-ink: var(--wp--preset--color--ink);
	--as-red: var(--wp--preset--color--red);
	--as-orange: var(--wp--preset--color--orange);
	--as-gold: var(--wp--preset--color--gold);
	--as-sand: var(--wp--preset--color--sand);
	--as-line: var(--wp--preset--color--line);
	--as-muted: var(--wp--preset--color--muted);
	--as-flame: var(--wp--preset--gradient--flame);
	--as-radius: 18px;
	--as-shadow: 0 1px 2px rgb(20 20 20 / 6%), 0 8px 24px rgb(20 20 20 / 6%);
	--as-shadow-lg: 0 2px 4px rgb(20 20 20 / 6%), 0 18px 40px rgb(20 20 20 / 12%);

	/* Icons (Strichgrafiken, als Maske eingefärbt) */
	--ico-hausmeisterservice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
	--ico-reinigung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3l1.9 5.6L17.5 10.5l-5.6 1.9L10 18l-1.9-5.6L2.5 10.5l5.6-1.9z'/%3E%3Cpath d='M18.5 14l.9 2.6 2.6.9-2.6.9-.9 2.6-.9-2.6-2.6-.9 2.6-.9z'/%3E%3Cpath d='M18 2.5v3M16.5 4h3'/%3E%3C/svg%3E");
	--ico-gartenpflege: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E");
	--ico-winterdienst: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M20.7 7 3.3 17'/%3E%3Cpath d='m9 4 3 2.5L15 4M9 20l3-2.5 3 2.5M3.6 10.6l3.8-.6-1.3-3.6M20.4 13.4l-3.8.6 1.3 3.6M6.1 17.6l1.3-3.6-3.8-.6M17.9 6.4l-1.3 3.6 3.8.6'/%3E%3C/svg%3E");
	--ico-entruempelung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5h12v11H2zM14 9h4.5L22 12.5V16h-8'/%3E%3Ccircle cx='6.5' cy='17.5' r='2'/%3E%3Ccircle cx='17.5' cy='17.5' r='2'/%3E%3C/svg%3E");
	--ico-montage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 12-8.5 8.5a2.12 2.12 0 0 1-3-3L12 9'/%3E%3Cpath d='M17.64 15 22 10.64'/%3E%3Cpath d='m20.91 11.7-1.25-1.25c-.6-.6-.93-1.4-.93-2.25v-.86L16.01 4.6a5.56 5.56 0 0 0-3.94-1.64H9l.92.82A6.18 6.18 0 0 1 12 8.4v1.56l2 2h2.47l2.26 1.91'/%3E%3C/svg%3E");
	--ico-innenausbau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='16' height='6' rx='2'/%3E%3Cpath d='M10 16v-2a2 2 0 0 1 2-2h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect x='8' y='16' width='4' height='6' rx='1'/%3E%3C/svg%3E");
	--ico-bautenschutz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M12 8.5c-1.7 2-2.5 3.3-2.5 4.4a2.5 2.5 0 0 0 5 0c0-1.1-.8-2.4-2.5-4.4z'/%3E%3C/svg%3E");
	--ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
	--ico-tools: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Cpath d='M17.5 14v7M14 17.5h7'/%3E%3C/svg%3E");
	--ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--ico-house: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9v12h14V9'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E");
	--ico-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01'/%3E%3C/svg%3E");
	--ico-briefcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2M2 13h20'/%3E%3C/svg%3E");
	--ico-dach: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 12.5 12 4l9.5 8.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 12.5h2.6v2.6H9zM12.4 12.5H15v2.6h-2.6zM9 15.9h2.6v2.6H9zM12.4 15.9H15v2.6h-2.6z'/%3E%3C/svg%3E");
	--ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
	--ico-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.2 20.8l1.3-4.4A9 9 0 1 1 7.8 19.6z' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M9 7.4c.3-.3.8-.3 1 .1l.8 1.6c.2.3.1.7-.2 1l-.5.5c.5 1.1 1.4 2 2.5 2.5l.5-.5c.3-.3.7-.4 1-.2l1.6.8c.4.2.4.7.1 1l-.7.8c-.6.6-1.6.7-2.4.3-1.9-1-3.4-2.5-4.4-4.4-.4-.8-.3-1.8.3-2.4z'/%3E%3C/svg%3E");
	--ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
	--ico-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}

.as-ico-hausmeisterservice { --ico: var(--ico-hausmeisterservice); }
.as-ico-reinigung { --ico: var(--ico-reinigung); }
.as-ico-gartenpflege { --ico: var(--ico-gartenpflege); }
.as-ico-winterdienst { --ico: var(--ico-winterdienst); }
.as-ico-entruempelung { --ico: var(--ico-entruempelung); }
.as-ico-montage { --ico: var(--ico-montage); }
.as-ico-innenausbau { --ico: var(--ico-innenausbau); }
.as-ico-bautenschutz { --ico: var(--ico-bautenschutz); }
.as-ico-check { --ico: var(--ico-check); }
.as-ico-tools { --ico: var(--ico-tools); }
.as-ico-pin { --ico: var(--ico-pin); }
.as-ico-house { --ico: var(--ico-house); }
.as-ico-building { --ico: var(--ico-building); }
.as-ico-briefcase { --ico: var(--ico-briefcase); }

/* Icon-Kachel: helles Quadrat (::before) mit Verlaufs-Icon darüber (::after) */
.as-card,
.as-value,
.as-audience,
.as-service {
	position: relative;
}
.as-card::before,
.as-value::before,
.as-audience::before,
.as-service::before {
	content: "";
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: #fff1e4;
	box-shadow: inset 0 0 0 1px #f6dcc4;
}
.as-card::after,
.as-value::after,
.as-audience::after,
.as-service::after {
	content: "";
	position: absolute;
	width: 30px;
	height: 30px;
	background: var(--as-flame);
	-webkit-mask: var(--ico) center / contain no-repeat;
	mask: var(--ico) center / contain no-repeat;
}

/* ---------- Allgemein ---------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.as-main {
	margin-block-start: 0;
}
:where(.wp-site-blocks) > * {
	margin-block-start: 0;
}
::selection {
	background: var(--as-gold);
	color: var(--as-ink);
}
a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}
:focus-visible {
	outline: 3px solid var(--as-orange);
	outline-offset: 2px;
}

.as-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8rem !important;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--as-red);
	margin-bottom: 0.4rem !important;
}
.as-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	color: var(--as-muted);
}
.as-intro {
	max-width: 46rem;
	/* bündig mit der linken Kante des breiten Inhaltsbereichs (wie Überschrift und Karten) */
	margin-left: max(0px, (100% - var(--wp--style--global--wide-size)) / 2) !important;
	color: var(--as-muted);
	font-size: 1.125rem;
}
.as-meta {
	color: var(--as-muted);
	font-size: 0.9rem;
}
.as-grad {
	background: linear-gradient(100deg, #ff4b3a 0%, var(--as-orange) 45%, var(--as-gold) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.as-placeholder {
	background: #fff36b;
	color: #3a3300;
	padding: 0 0.3em;
	border-radius: 4px;
	font-weight: 600;
}

/* Aufzählung mit dem Dach aus dem Logo als Spiegelstrich */
.as-checklist {
	list-style: none;
	padding-left: 0;
}
.as-checklist li {
	position: relative;
	padding-left: 2.25rem;
	margin-bottom: 0.55rem;
}
.as-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 1.6rem;
	height: 1.6rem;
	background: var(--as-flame);
	-webkit-mask: var(--ico-dach) center / contain no-repeat;
	mask: var(--ico-dach) center / contain no-repeat;
	transition: transform 0.2s;
}
.as-checklist li:hover::before {
	transform: translateY(-2px);
}

/* Buttons */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--as-ink);
	border: 2px solid currentColor;
	padding: calc(0.85rem - 2px) calc(1.6rem - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--as-ink);
	color: #fff;
	border-color: var(--as-ink);
}
.wp-block-button__link {
	transition: background-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
	box-shadow: 0 6px 16px rgb(181 18 27 / 22%);
}
.is-style-outline .wp-block-button__link {
	box-shadow: none;
}
.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* ---------- Kopfbereich ---------- */

.as-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .as-site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}
@media (max-width: 600px) {
	.admin-bar .as-site-header {
		top: 0;
	}
}
.as-topbar {
	background: var(--as-ink);
	color: #d8d3cc;
	font-size: 0.85rem;
	padding-block: 0.45rem;
}
.as-topbar p {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.6rem;
	justify-content: center;
}
.as-topbar a {
	color: #fff;
	text-decoration: none;
}
.as-topbar a:hover {
	color: var(--as-gold);
}
.as-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}
.as-topbar__item::before {
	content: "";
	width: 14px;
	height: 14px;
	background: var(--as-gold);
	-webkit-mask: var(--i) center / contain no-repeat;
	mask: var(--i) center / contain no-repeat;
}
.as-topbar__tel { --i: var(--ico-phone); }
.as-topbar__mail { --i: var(--ico-mail); }
.as-topbar__wa { --i: var(--ico-whatsapp); }
.as-topbar__zeit { --i: var(--ico-clock); }

.as-header {
	position: relative;
	isolation: isolate;
	border-bottom: 1px solid var(--as-line);
	transition: box-shadow 0.25s;
}
/* Unschärfe auf einer eigenen Ebene: backdrop-filter direkt am Kopfbereich würde das
   fixierte Handy-Menü auf die Höhe des Kopfbereichs beschneiden. */
.as-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(255 255 255 / 96%);
	backdrop-filter: saturate(1.4) blur(8px);
	-webkit-backdrop-filter: saturate(1.4) blur(8px);
}
.is-scrolled .as-header {
	box-shadow: 0 6px 24px rgb(20 20 20 / 8%);
}
.as-header__inner {
	padding-block: 0.6rem;
	gap: 1.5rem;
}
.as-logo {
	display: block;
	line-height: 0;
	flex-shrink: 0;
}
.as-logo picture,
.as-footer__logo picture {
	display: block;
}
.as-logo img {
	display: block;
	height: 76px;
	width: auto;
	max-width: 100%;
}
.as-header__nav {
	gap: 1.75rem;
}
.as-nav {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.98rem;
}
.as-nav .wp-block-navigation-item__content {
	color: var(--as-ink);
	white-space: nowrap;
	text-decoration: none;
	padding-block: 0.4rem;
	position: relative;
}
.as-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--as-flame);
	transform: scaleX(0);
	transition: transform 0.2s;
}
.as-nav .wp-block-navigation-item__content:hover::after,
.as-nav .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}
.as-header__cta .wp-block-button__link {
	padding: 0.7rem 1.3rem;
	font-size: 0.95rem;
}
.as-nav .wp-block-navigation__responsive-container-open,
.as-nav .wp-block-navigation__responsive-container-close {
	color: var(--as-ink);
}
.as-nav .wp-block-navigation__responsive-container-open svg {
	width: 30px;
	height: 30px;
}
.as-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
	background: #fff;
}
.as-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	position: relative;
}
/* Logo oben links im aufgeklappten Menü */
.as-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before {
	content: "";
	position: absolute;
	top: -0.3rem;
	left: 0;
	width: 190px;
	height: 45px;
	background: url("../images/as-logo-horizontal.webp") left center / contain no-repeat;
}
.as-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem;
	font-size: 1.5rem;
}
.as-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}
.as-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--as-line);
}
.as-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding-block: 0.9rem;
	font-size: 1.3rem;
}
.as-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* Auf Tablets reicht der Platz nicht für Logo, vier Menüpunkte und Button:
   dort ebenfalls das Hamburger-Menü (WordPress schaltet erst unter 600px um). */
@media (min-width: 600px) and (max-width: 1023px) {
	.as-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.as-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 781px) {
	.as-topbar__zeit {
		display: none !important;
	}
	.as-logo img {
		height: 54px;
	}
}
@media (max-width: 600px) {
	/* Auf dem Handy nur das Zeichen (Haus + AS) */
	.as-logo img {
		height: 52px;
	}
}
@media (max-width: 600px) {
	.as-header__cta {
		display: none !important;
	}
}
@media (max-width: 420px) {
	.as-topbar__mail {
		display: none !important;
	}
}

/* ---------- Abschnitte ---------- */

.as-section {
	padding-block: var(--wp--preset--spacing--60);
}
.as-section--tight {
	padding-block: var(--wp--preset--spacing--50);
}
.as-section--sand {
	background: var(--as-sand);
}
.as-section > h2 {
	margin-top: 0;
}

/* Hero */
.as-hero {
	position: relative;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(900px 500px at 92% 110%, rgb(232 101 15 / 45%), transparent 60%),
		radial-gradient(700px 420px at 70% -20%, rgb(181 18 27 / 50%), transparent 60%),
		linear-gradient(160deg, #1c1c1c 0%, #121212 60%, #1a0d0b 100%);
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.as-hero::before {
	/* Dachlinie wie im Logo */
	content: "";
	position: absolute;
	inset: auto -5% -2px auto;
	width: min(820px, 90vw);
	aspect-ratio: 820 / 360;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 820 360' fill='none' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23b5121b'/%3E%3Cstop offset='.6' stop-color='%23e8650f'/%3E%3Cstop offset='1' stop-color='%23f2a900'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='url(%23g)' stroke-width='14' opacity='.22'%3E%3Cpath d='M40 360 330 120 620 360'/%3E%3Cpath d='M170 360 400 170 630 360'/%3E%3Cpath d='M560 360V40h90v320M650 110h70v250'/%3E%3C/g%3E%3C/svg%3E") bottom right / contain no-repeat;
	pointer-events: none;
}
.as-hero .wp-block-columns {
	position: relative;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center !important;
}
.as-hero__cols > .wp-block-column:first-child {
	flex-basis: 62% !important;
}
.as-hero__cols > .wp-block-column:last-child {
	flex-basis: 38% !important;
}
.as-hero h1 {
	color: #fff;
	margin-top: 0.5rem;
	font-size: clamp(2.1rem, 4.6vw, 3.6rem);
	line-height: 1.08;
}
.as-hero .as-eyebrow {
	display: inline-block;
	color: var(--as-gold);
	border: 1px solid rgb(242 169 0 / 40%);
	background: rgb(242 169 0 / 8%);
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	letter-spacing: 0.08em;
}
.as-hero .as-lead {
	color: #d9d4ce;
	max-width: 38rem;
}
.as-hero .is-style-outline .wp-block-button__link {
	color: #fff;
}
.as-hero .is-style-outline .wp-block-button__link:hover {
	background: #fff;
	color: var(--as-ink);
	border-color: #fff;
}
.as-hero__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1.6rem;
	margin-top: 1.75rem;
	color: #e9e4dd;
	font-size: 0.95rem;
}
.as-hero__checks li {
	margin: 0;
}

.as-quickcard {
	background: #fff;
	color: var(--as-ink);
	border-radius: 22px;
	padding: 1.9rem;
	box-shadow: 0 30px 60px rgb(0 0 0 / 35%);
	position: relative;
	overflow: hidden;
}
.as-quickcard::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 5px;
	background: var(--as-flame);
}
.as-quickcard p {
	margin: 0 0 0.35rem;
}
.as-quickcard__label {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--as-red);
}
.as-quickcard__tel {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: clamp(1.4rem, 2.4vw, 1.75rem);
	margin-top: 0.4rem !important;
}
.as-quickcard__tel a,
.as-quickcard__mail a {
	color: var(--as-ink);
	text-decoration: none;
}
.as-quickcard__notdienst {
	margin-top: 0.5rem !important;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--as-red);
}
.as-quickcard__notdienst + .as-quickcard__tel {
	margin-top: 0.2rem !important;
}

/* Runder WhatsApp-Knopf neben der Telefonnummer */
.as-wa-knopf {
	flex-shrink: 0;
	display: inline-grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: #25d366;
	box-shadow: 0 6px 16px rgb(37 211 102 / 35%);
	transition: transform 0.2s, box-shadow 0.2s;
}
.as-wa-knopf::before {
	content: "";
	width: 1.35rem;
	height: 1.35rem;
	background: #fff;
	-webkit-mask: var(--ico-whatsapp) center / contain no-repeat;
	mask: var(--ico-whatsapp) center / contain no-repeat;
}
.as-wa-knopf:hover {
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 10px 22px rgb(37 211 102 / 45%);
}
.as-quickcard__mail {
	font-weight: 600;
}
.as-quickcard__zeiten {
	color: var(--as-muted);
	font-size: 0.92rem;
}
.as-quickcard .wp-block-buttons {
	margin-top: 1.2rem;
}
.as-quickcard .wp-block-button,
.as-quickcard .wp-block-button__link {
	width: 100%;
}

/* Werte */
.as-values {
	gap: 1.5rem;
}
.as-value {
	display: grid;
	align-content: start;
	grid-template-columns: 56px 1fr;
	column-gap: 1.1rem;
	align-items: start;
}
.as-value::before {
	grid-row: span 2;
}
.as-value::after {
	left: 13px;
	top: 13px;
}
.as-value h3 {
	margin: 0.15rem 0 0.2rem;
	font-size: 1.15rem;
}
.as-value p {
	margin: 0;
	color: var(--as-muted);
	font-size: 0.97rem;
}

/* Leistungskarten */
.as-grid {
	gap: 1.25rem;
	margin-top: 2.25rem;
}
.as-card {
	background: #fff;
	border: 1px solid var(--as-line);
	border-radius: var(--as-radius);
	padding: 1.75rem 1.6rem 1.5rem;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.as-card::after {
	left: calc(1.6rem + 13px);
	top: calc(1.75rem + 13px);
}
.as-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--as-shadow-lg);
	border-color: transparent;
}
.as-card h3 {
	margin: 1.1rem 0 0.5rem;
	font-size: 1.15rem;
}
.as-card p {
	margin: 0;
	color: var(--as-muted);
	font-size: 0.97rem;
}
.as-card .as-more {
	margin-top: auto;
	padding-top: 1rem;
}
.as-more a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.92rem;
	text-decoration: none;
	color: var(--as-red);
}
.as-more a::after {
	content: " →";
	transition: margin 0.2s;
}
.as-card:hover .as-more a::after {
	margin-left: 0.25rem;
}
/* ganze Karte klickbar */
.as-more a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--as-radius);
}

/* Zielgruppen */
.as-split {
	gap: clamp(2rem, 6vw, 5rem) !important;
	align-items: center;
}
.as-audiences {
	display: grid;
	gap: 1rem;
}
.as-audience {
	align-content: start;
	background: #fff;
	border-radius: var(--as-radius);
	padding: 1.4rem 1.5rem;
	display: grid;
	grid-template-columns: 56px 1fr;
	column-gap: 1.2rem;
	box-shadow: var(--as-shadow);
}
.as-audience::before {
	grid-row: span 2;
}
.as-audience::after {
	left: calc(1.5rem + 13px);
	top: calc(1.4rem + 13px);
}
.as-audience h3 {
	margin: 0.1rem 0 0.25rem;
	font-size: 1.08rem;
}
.as-audience p {
	margin: 0;
	color: var(--as-muted);
	font-size: 0.96rem;
}

/* Ablauf */
.as-steps {
	counter-reset: schritt;
	gap: 1.25rem;
	margin-top: 2.25rem;
}
.as-step {
	counter-increment: schritt;
	position: relative;
	padding: 1.6rem 1.5rem;
	border-radius: var(--as-radius);
	background: var(--as-sand);
	border: 1px solid var(--as-line);
}
.as-step::before {
	content: counter(schritt, decimal-leading-zero);
	display: inline-block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 2.6rem;
	line-height: 1;
	background: var(--as-flame);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.as-step h3 {
	margin: 0.8rem 0 0.35rem;
	font-size: 1.12rem;
}
.as-step p {
	margin: 0;
	color: var(--as-muted);
	font-size: 0.96rem;
}

/* CTA-Band */
.as-cta {
	background: var(--as-flame);
	color: #fff;
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.as-cta__inner {
	gap: 1.5rem 2rem;
	align-items: center;
}
.as-cta h2 {
	color: #fff;
	margin: 0 0 0.3rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
}
.as-cta p {
	margin: 0;
	color: rgb(255 255 255 / 90%);
}
.as-btn-light .wp-block-button__link {
	background: #fff;
	color: var(--as-red);
	box-shadow: 0 10px 24px rgb(0 0 0 / 18%);
}
.as-btn-light .wp-block-button__link:hover {
	background: var(--as-ink);
	color: #fff;
}
.seite-kontakt .as-cta {
	display: none;
}

/* Fußbereich */
.as-footer {
	background: var(--as-ink);
	color: #bdb7af;
	padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem;
	font-size: 0.95rem;
}
.as-footer a {
	color: #e9e4dd;
	text-decoration: none;
}
.as-footer a:hover {
	color: var(--as-gold);
}
.as-footer h3 {
	color: #fff;
	font-size: 1rem;
	letter-spacing: 0.04em;
	margin-bottom: 1rem;
}
.as-footer__cols {
	gap: 2.5rem;
}
.as-footer__cols > .wp-block-column:first-child {
	flex-basis: 40%;
}
.as-footer__logo {
	display: inline-block;
	margin-bottom: 1.25rem;
}
.as-footer__logo img {
	display: block;
	height: 72px;
	width: auto;
	max-width: 100%;
}
.as-footer__brand {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.6rem;
	color: #fff;
	line-height: 1.1;
	margin-bottom: 0.8rem;
}
.as-footer__brand span {
	display: block;
	font-size: 0.95rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	background: var(--as-flame);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.as-footer__links {
	list-style: none;
	padding: 0;
	columns: 1;
}
.as-footer__links li {
	margin-bottom: 0.4rem;
}
.as-footer__bottom {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid #2f2f2f;
	font-size: 0.85rem;
}
.as-footer__bottom p {
	margin: 0;
}

/* ---------- Unterseiten ---------- */

.as-pagehero {
	background:
		radial-gradient(600px 300px at 100% 0%, rgb(181 18 27 / 45%), transparent 70%),
		radial-gradient(500px 260px at 85% 120%, rgb(232 101 15 / 35%), transparent 70%),
		var(--as-ink);
	color: #fff;
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.as-pagehero h1 {
	color: #fff;
	margin: 0;
	font-size: clamp(2rem, 4.5vw, 3rem);
}
.as-pagehero .as-eyebrow {
	color: var(--as-gold);
}
.as-page-content {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}
.as-page-content > h2 {
	margin-top: 2.5rem;
	font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}

/* Leistungsseite */
.as-jumpnav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block: 1.5rem 1rem !important;
}
.as-jumpnav a {
	display: inline-block;
	padding: 0.45rem 0.95rem;
	border-radius: 999px;
	background: var(--as-sand);
	border: 1px solid var(--as-line);
	color: var(--as-ink);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
}
.as-jumpnav a:hover {
	border-color: var(--as-orange);
	color: var(--as-red);
}
.as-service {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.15fr);
	grid-template-areas:
		"icon titel liste"
		".    text  liste";
	grid-template-rows: auto 1fr;
	column-gap: 1.5rem;
	row-gap: 0.5rem;
	align-items: start;
	padding: 2.25rem 0;
	border-top: 1px solid var(--as-line);
	scroll-margin-top: 150px;
}
.as-service::before {
	grid-area: icon;
}
.as-service::after {
	left: 13px;
	top: calc(2.25rem + 13px);
}
.as-service > h2 {
	grid-area: titel;
	margin: 0.4rem 0 0;
	font-size: clamp(1.35rem, 2.4vw, 1.65rem);
}
.as-service > p {
	grid-area: text;
	margin: 0;
	color: var(--as-muted);
}
.as-service > ul {
	grid-area: liste;
	margin: 0;
	background: var(--as-sand);
	border-radius: var(--as-radius);
	padding: 1.4rem 1.5rem 0.9rem;
}
.as-note {
	margin-top: 2.5rem;
	padding: 2rem;
	border-radius: var(--as-radius);
	background: var(--as-sand);
	border-left: 5px solid var(--as-orange);
}
.as-note h3 {
	margin-top: 0;
}

/* Kontakt */
.as-contact {
	gap: clamp(2rem, 5vw, 4rem) !important;
}
.as-contact > .wp-block-column:first-child {
	flex: 1 1 60% !important;
}
.as-contact > .wp-block-column:last-child {
	flex: 0 1 360px !important;
}
.as-contact > .wp-block-column:first-child > h2 {
	margin-top: 0;
}
.as-contactbox {
	background: var(--as-sand);
	border: 1px solid var(--as-line);
	border-radius: var(--as-radius);
	padding: 1.75rem;
	position: sticky;
	top: 140px;
}
.as-contactbox h3 {
	font-size: 1.05rem;
	margin: 1.4rem 0 0.4rem;
}
.as-contactbox h3:first-child {
	margin-top: 0;
}
.as-contactbox p {
	margin: 0;
}

.as-form {
	display: grid;
	gap: 0.25rem;
}
.as-form p {
	margin: 0 0 0.85rem;
}
.as-form__reihe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	column-gap: 1rem;
}
.as-form label {
	display: block;
	font-weight: 600;
	font-size: 0.92rem;
	margin-bottom: 0.35rem;
}
.as-form input[type="text"],
.as-form input[type="email"],
.as-form input[type="tel"],
.as-form select,
.as-form textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 1rem;
	padding: 0.8rem 0.95rem;
	border: 1.5px solid #d9d2c7;
	border-radius: 12px;
	background: #fff;
	color: var(--as-ink);
	transition: border-color 0.2s, box-shadow 0.2s;
}
.as-form input:focus,
.as-form select:focus,
.as-form textarea:focus {
	outline: none;
	border-color: var(--as-orange);
	box-shadow: 0 0 0 4px rgb(232 101 15 / 15%);
}
/* Auswahlliste: eigener Pfeil; in Browsern mit anpassbarem <select> (Chrome, Edge)
   auch die aufgeklappte Liste im Stil der Website, sonst die des Systems. */
.as-form select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.8rem;
	cursor: pointer;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8650f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 0.95rem center / 1.15rem no-repeat;
}
.as-form select:hover {
	border-color: #c9bfb1;
}
@supports (appearance: base-select) {
	.as-form select,
	.as-form select::picker(select) {
		appearance: base-select;
	}
	.as-form select {
		display: flex;
		align-items: center;
		background-image: none;
		padding-right: 0.95rem;
	}
	.as-form select::picker-icon {
		content: "";
		width: 1.15rem;
		height: 1.15rem;
		margin-left: auto;
		background: var(--as-orange);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
		transition: transform 0.2s;
	}
	.as-form select:open::picker-icon {
		transform: rotate(180deg);
	}
	.as-form select::picker(select) {
		margin-top: 6px;
		padding: 0.4rem;
		border: 1px solid var(--as-line);
		border-radius: 14px;
		background: #fff;
		box-shadow: var(--as-shadow-lg);
	}
	.as-form option {
		padding: 0.65rem 0.8rem;
		border-radius: 9px;
		color: var(--as-ink);
		cursor: pointer;
	}
	.as-form option:hover,
	.as-form option:focus-visible {
		outline: none;
		background: var(--as-sand);
	}
	.as-form option:checked {
		font-weight: 600;
		color: var(--as-red);
	}
	.as-form option::checkmark {
		content: "";
		width: 1rem;
		height: 1rem;
		margin-left: auto;
		order: 1;
		background: var(--as-flame);
		-webkit-mask: var(--ico-dach) center / contain no-repeat;
		mask: var(--ico-dach) center / contain no-repeat;
	}
}

.as-form__check label {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	font-weight: 400;
	font-size: 0.9rem;
	color: var(--as-muted);
}
.as-form__check input {
	margin-top: 0.25rem;
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--as-red);
	flex-shrink: 0;
}
.as-form button {
	border: 0;
	cursor: pointer;
}
.as-form__hinweis {
	font-size: 0.82rem;
	color: var(--as-muted);
}
.as-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.as-form__meldung {
	padding: 1rem 1.2rem;
	border-radius: 12px;
	font-weight: 600;
}
.as-form__meldung--ok {
	background: #e8f6ec;
	color: #18602e;
	border: 1px solid #b9e2c5;
}
.as-form__meldung--fehler {
	background: #fdecec;
	color: #8f1c1c;
	border: 1px solid #f3c1c1;
}

/* ---------- Responsiv ---------- */

@media (max-width: 781px) {
	.as-hero__cols > .wp-block-column {
		flex-basis: 100% !important;
	}
	.as-service {
		grid-template-columns: 56px minmax(0, 1fr);
		grid-template-areas:
			"icon titel"
			"text text"
			"liste liste";
		grid-template-rows: auto;
		row-gap: 1rem;
	}
	.as-contactbox {
		position: static;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}

#kontaktformular {
	scroll-margin-top: 170px;
}