/* ----------------------------------------------------------------
	Canvas: ALARM4YOU
	Bereichs-Theme für alarm4you.at - wird NACH demos/css4you/css4you.css
	geladen und überschreibt nur Farbe + bereichsspezifische Bausteine.
	Header, Utility-Bar, Bereichsauswahl, FAQ, Referenzraster usw.
	kommen unverändert aus dem gemeinsamen css4you.css.
-----------------------------------------------------------------*/

:root {
	/* Bereichsfarbe ALARM4YOU (aus dem Bereichs-Icon ausgelesen, siehe --c4y-alarm4you im Hub-CSS) */
	--cnvs-themecolor: #df0005;
	--cnvs-themecolor-rgb: 223, 0, 5;

	/* Text auf Bereichsfarbe (Farbbalken, Buttons, Leiste): laut Vorgabe weiß.
	   Auf Wunsch dunkel: --a4y-on-brand: var(--a4y-ink) (besserer Kontrast). */
	--a4y-ink: #2b2c2e;
	--a4y-on-brand: #fff;

	/* Orange auch für Menü-Hover, Links, Icons und Kennzeichnungen (reines Markenrot) */
	--a4y-red-strong: var(--cnvs-themecolor);
	--a4y-link: var(--cnvs-themecolor);

	--a4y-gray: #636466;
	--a4y-gray-dark: #4f5052;

	/* Header-Höhe = tatsächliche Höhe der Menüzeile (siehe #header-wrap .header-row unten) */
	--cnvs-header-height-sm: 100px;

	--cnvs-link-color: var(--a4y-link);
	--cnvs-primary-menu-hover-color: var(--a4y-link);
	--cnvs-primary-menu-active-color: var(--a4y-link);
}

/* ---------- Header-Höhe korrigieren ----------
   Das Theme rechnet ab Desktop-Breite (>1300px) mit einer Header-Höhe von 60px, die
   Menüzeile war durch das Padding aus css4you.css aber 100px hoch. Folge: Die Menüzeile
   lag 40px über dem Seiteninhalt und schnitt bei den Farbbalken die Überschrift oben ab.
   Jetzt: Höhe 100px über die Variable, Padding entfällt (Logo bleibt mittig). */
@media (min-width: 1301px) {
	#header-wrap .header-row { padding: 0; }
}

/* ---------- Buttons ---------- */
.button:not(.button-border):not(.button-light):not(.button-dark) {
	color: var(--a4y-on-brand);
	font-weight: 600;
}
.button:not(.button-border):not(.button-light):not(.button-dark):hover {
	color: #fff;
}
.button.button-border.button-light:hover {
	color: var(--a4y-ink);
}
/* Kontur-Button auf Orange-Flächen: weiße Kontur, beim Hover weiß gefüllt */
.a4y-btn-outline {
	background: transparent !important;
	border: 2px solid #fff !important;
	color: #fff !important;
	font-weight: 600;
}
.a4y-btn-outline:hover {
	background: #fff !important;
	color: var(--a4y-ink) !important;
}

/* ---------- Brand-Leiste, Farbbalken: dunkle Schrift auf Orange ---------- */
.c4y-brand-strip-msg { color: var(--a4y-on-brand); }
.c4y-green-bar-title { color: var(--a4y-on-brand); }
.c4y-green-bar p { color: var(--a4y-on-brand) !important; }

/* ---------- Hauptmenü: aktive/Hover-Farbe lesbar (reines Markenrot) ---------- */
.primary-menu .menu-item.current > .menu-link,
.primary-menu .menu-item:hover > .menu-link,
.primary-menu .menu-item.current:hover > .menu-link {
	color: var(--a4y-link);
}

/* ---------- Hauptmenü: Unterstreichung NUR beim aktiven Punkt, nie beim Hover.
   Sitzt auf dem inneren <div>, nicht auf dem ca. 100px hohen <a>, sonst läge die
   Linie weit unter dem Text statt direkt darunter. width: fit-content, damit sich
   die Linie im Burger-Menü nicht über die ganze Zeilenbreite zieht. ---------- */
.primary-menu .menu-container > .menu-item.current > .menu-link > div {
	box-shadow: inset 0 -3px 0 0 var(--cnvs-themecolor);
	width: fit-content;
}

/* ---------- Untermenü: Hover-Farbe neutral statt Bereichsfarben-Reihenfolge des Hubs ---------- */
.c4y-submenu.a4y-submenu .menu-item:nth-child(n) .menu-link:hover {
	color: var(--a4y-link);
}
.c4y-submenu.a4y-submenu .menu-link { gap: 12px; }
.c4y-submenu.a4y-submenu .menu-link i {
	font-size: 20px;
	line-height: 1;
	width: 22px;
	text-align: center;
	color: var(--cnvs-themecolor);
	flex-shrink: 0;
}
/* Keine Zeilenumbrüche und keine Schriftgewicht-Änderung beim Hover (Text "sprang" in die nächste Zeile) */
.c4y-submenu.a4y-submenu .menu-link,
.c4y-submenu.a4y-submenu .menu-link:hover,
.c4y-submenu.a4y-submenu .menu-item:hover > .menu-link {
	white-space: nowrap;
	font-weight: 600;
}
/* Im Flyout nie eine Unterstreichung: nur das Icon ist farbig (siehe oben),
   der Text bleibt ohne Linie, auch wenn ein Untermenü-Punkt zufällig .current wäre. */
.c4y-submenu.a4y-submenu .menu-link > div {
	box-shadow: none;
	width: auto;
}
@media (min-width: 992px) {
	.primary-menu .menu-container .c4y-submenu.a4y-submenu {
		width: max-content !important;
		min-width: 0 !important;
	}
}

/* ---------- Links im Inhalt ---------- */
#content p a:not(.button),
#content li a:not(.button),
#content td a:not(.button),
#content .heading-block span a {
	color: var(--a4y-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}
#content p a:not(.button):hover,
#content li a:not(.button):hover,
#content td a:not(.button):hover {
	color: var(--a4y-ink);
}

/* ---------- Hero ---------- */
.a4y-hero {
	position: relative;
	margin: 0;
	padding-top: 190px;
	padding-bottom: 170px;
	background: #2f3032 url("../images/hero-alarm.jpg") center 32% / cover no-repeat;
	overflow: hidden;
}
.a4y-hero::before {
	/* Abdunkelung für die Lesbarkeit der weißen Schrift */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.42) 100%);
}
.a4y-hero .container { position: relative; z-index: 2; }
.a4y-hero-kicker {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.3px;
}
.a4y-hero h1 {
	color: #fff;
	font-weight: 800;
	font-size: clamp(1.9rem, 5vw + 0.8rem, 3.4rem);
	margin: 14px 0 0;
	line-height: 1.2;
}
.a4y-hero-ways {
	color: var(--cnvs-themecolor);
	font-weight: 700;
	font-size: clamp(1rem, 1.6vw + 0.5rem, 1.35rem);
	letter-spacing: 0.4px;
	margin: 22px 0 0;
}
.a4y-hero-text {
	color: rgba(255, 255, 255, 0.88);
	font-size: 1.15rem;
	max-width: 640px;
	margin: 12px auto 32px;
}

/* ---------- Übertragungswege (Raster mit Haarlinien wie im Referenzraster) ---------- */
.a4y-way-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 991px) { .a4y-way-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .a4y-way-grid { grid-template-columns: 1fr; } }
.a4y-way {
	display: block;
	text-align: center;
	padding: 44px 30px 40px;
	border: 1px solid var(--cnvs-contrast-200);
	margin: -1px 0 0 -1px;
	color: inherit;
	text-decoration: none;
}
a.a4y-way:hover { background: var(--cnvs-contrast-100); color: inherit; }
.a4y-way img {
	display: block;
	width: 120px;
	max-width: 100%;
	height: auto;
	margin: 0 auto 20px;
	mix-blend-mode: multiply; /* weißer Bildhintergrund verschwindet auch beim Hover */
}
.a4y-way h3 { font-size: 1.35rem; font-weight: 800; margin: 0 0 10px; }
.a4y-way p { margin: 0; color: var(--cnvs-contrast-700); line-height: 1.6; }

/* ---------- Ablauf: Planung → Errichtung → Betreuung (echte Reihenfolge) ---------- */
.a4y-step-no {
	display: inline-block;
	font-size: 3.2rem;
	font-weight: 800;
	line-height: 1;
	color: var(--a4y-gray);
	padding-bottom: 10px;
	margin-bottom: 18px;
	border-bottom: 5px solid var(--cnvs-themecolor);
}
.a4y-step h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; }
.a4y-step .a4y-step-lead { font-weight: 700; margin-bottom: 12px; }
.a4y-step p { line-height: 1.65; }
.a4y-more {
	font-weight: 700;
	color: var(--a4y-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Dunkler Block: Vorteile ---------- */
.a4y-dark {
	text-align: center;
	background: var(--a4y-gray);
	color: #fff;
	margin: 0;
	padding: 100px 0;
}
.a4y-dark h2 { color: #fff; font-weight: 800; }
.a4y-dark h3 { color: #fff; font-weight: 800; font-size: 1.25rem; margin: 18px 0 8px; }
.a4y-dark p { color: rgba(255, 255, 255, 0.92); line-height: 1.65; margin: 0; }
.a4y-dark .a4y-dark-icon { font-size: 44px; color: var(--cnvs-themecolor); line-height: 1; }

/* ---------- Kurz-Fakten unter dem Hero ---------- */
.a4y-fact i { font-size: 32px; color: var(--a4y-red-strong); }
.a4y-fact div { font-weight: 700; margin-top: 8px; }

/* ---------- Info-Leiste (Text links, Button rechts) ---------- */
.a4y-cta-bar { text-align: left; }
.a4y-cta-bar p { font-size: 1.15rem; line-height: 1.5; margin: 0; }

/* ---------- Zitate ---------- */
.a4y-quote {
	font-weight: 400;
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.6;
	color: var(--cnvs-contrast-800);
}
.a4y-quote-sm { font-size: 1.2rem; }

/* ---------- Referenzen: freie Zeile mittig zentriert (7 Logos) ---------- */
.a4y-ref-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.a4y-ref-flex .c4y-ref-cell { flex: 0 0 20%; box-sizing: border-box; padding: 30px 18px; }
@media (max-width: 991px) { .a4y-ref-flex .c4y-ref-cell { flex-basis: 33.3333%; } }
@media (max-width: 575px) { .a4y-ref-flex .c4y-ref-cell { flex-basis: 50%; } }

/* ---------- Leistungen: Schritte, Listen, Arbeitsgebiete ---------- */
.a4y-check-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	columns: 2;
	column-gap: 40px;
}
@media (max-width: 767px) { .a4y-check-list { columns: 1; } }
.a4y-check-list li {
	position: relative;
	padding: 7px 0 7px 32px;
	break-inside: avoid;
}
.a4y-check-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 13px;
	width: 16px;
	height: 9px;
	border-left: 3px solid var(--a4y-red-strong);
	border-bottom: 3px solid var(--a4y-red-strong);
	transform: rotate(-45deg);
}
.a4y-area h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 18px; }
.a4y-area h4 {
	font-size: 1rem;
	font-weight: 800;
	color: var(--cnvs-themecolor);
	margin: 26px 0 8px;
}
.a4y-area ul { list-style: none; margin: 0; padding: 0; }
.a4y-area li { padding: 5px 0; border-bottom: 1px solid var(--cnvs-contrast-200); }
.a4y-area-col { border-top: 5px solid var(--cnvs-themecolor); padding-top: 26px; }

/* ---------- Preistabelle ---------- */
.a4y-price-table {
	width: 100%;
	border-collapse: collapse;
	margin: 30px 0 14px;
}
.a4y-price-table th {
	text-align: left;
	font-weight: 700;
	color: var(--a4y-gray);
	padding: 12px 16px;
	border-bottom: 3px solid var(--cnvs-themecolor);
}
.a4y-price-table th:last-child,
.a4y-price-table td:last-child { text-align: right; white-space: nowrap; }
.a4y-price-table td {
	padding: 20px 16px;
	border-bottom: 1px solid var(--cnvs-contrast-200);
	vertical-align: middle;
}
.a4y-price-table td:last-child { font-weight: 800; font-size: 1.15rem; }
.a4y-price-table small { display: block; color: var(--cnvs-contrast-600); font-weight: 400; margin-top: 4px; }

/* ---------- Footer: Grau statt Orange (Lesbarkeit), Orange als Kante ---------- */
#footer.a4y-footer {
	background: var(--a4y-gray);
	border-top: 6px solid var(--cnvs-themecolor);
}
#footer.a4y-footer .a4y-footer-logo {
	display: inline-block;
	background: #fff;
	border-radius: 8px;
	padding: 10px 16px;
	margin-bottom: 26px;
}
#footer.a4y-footer .a4y-footer-logo img { display: block; max-height: 62px; }
#footer.a4y-footer a:hover { color: var(--cnvs-themecolor) !important; }
#copyrights.a4y-copyrights { background: var(--a4y-gray-dark) !important; }

/* Tastatur-Fokus sichtbar */
a:focus-visible, .button:focus-visible, summary:focus-visible {
	outline: 3px solid var(--a4y-link);
	outline-offset: 3px;
}
.a4y-dark a:focus-visible, #footer a:focus-visible, .a4y-hero a:focus-visible {
	outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.c4y-logo-link, .c4y-area-icon { transition: none; }
}

@media (max-width: 767px) {
	.a4y-hero { padding-top: 100px; padding-bottom: 90px; }
}
.a4y-nowrap { white-space: nowrap; }

/* Bootstrap-Zeilen mit großen Abständen (g-5 / 6rem im Footer) ragen am Handy und knapp
   über 1200px minimal über den Rand: kein seitliches Scrollen zulassen. */
#wrapper { overflow-x: clip; }

/* Am Handy nie bündig zum Bildschirmrand: Inline-Paddings der Inhaltsbereiche
   (z. B. "padding: 80px 0") überschreiben sonst den Container-Innenabstand. */
@media (max-width: 767px) {
	#content .container {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* ---------- Abstände: Inhalt beginnt direkt unter dem Farbbalken ----------
   Das Theme setzt 5rem Innenabstand oben auf .content-wrap; zusammen mit dem
   Abstand der Inhaltsblöcke ergab das viel zu viel Weiß unter der Überschrift. */
.content-wrap { padding-top: 0 !important; }

/* ---------- Preistabelle: Textzelle in der Wertespalte (z. B. "nach Zeitaufwand") ---------- */
.a4y-price-table td.a4y-price-text {
	white-space: normal;
	font-size: 1rem;
	font-weight: 600;
	max-width: 240px;
}
.a4y-price-table + .a4y-price-table,
.a4y-price-heading { margin-top: 50px; }
.a4y-price-heading { margin-bottom: 0; }

/* ---------- News-Karten (Aufbau wie css4you.at/news) ---------- */
.a4y-news-card summary { cursor: pointer; list-style: none; }
.a4y-news-card summary::-webkit-details-marker { display: none; }
.a4y-news-card summary::marker { content: ""; }
.a4y-news-card summary::after {
	content: "weiterlesen ▾";
	display: block;
	margin-top: 10px;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--a4y-link);
}
.a4y-news-card details[open] summary::after { content: "weniger ▴"; }
.a4y-news-card details {
	background: #fff;
	border-left: 4px solid var(--cnvs-themecolor);
	border-radius: 4px;
	padding: 26px;
	height: 100%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.a4y-news-card .a4y-news-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--cnvs-themecolor);
}
.a4y-news-card .a4y-news-tag img { display: block; width: 18px; height: 18px; object-fit: contain; }
.a4y-news-card h4 { font-size: 1.05rem; margin: 10px 0; }
.a4y-news-card p { font-size: 0.9rem; color: var(--cnvs-contrast-600); }
.a4y-news-card .a4y-news-lead { color: var(--cnvs-body-color); }

/* News-Raster: immer 3 Karten nebeneinander (Desktop), lädt per JS */
.a4y-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
@media (max-width: 991px) { .a4y-news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .a4y-news-grid { grid-template-columns: 1fr; } }
.a4y-news-grid .a4y-news-loading,
.a4y-news-empty {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--cnvs-contrast-600);
	padding: 30px 0;
}

/* ---------- Karte auf der Kontaktseite: kompakt ---------- */
.a4y-map {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	height: 300px;
}
.a4y-map iframe { display: block; width: 100%; height: 100%; border: 0; }


/* ---------- Porträt beim Zitat ---------- */
.a4y-portrait {
	width: 100%;
	height: auto;
	max-width: 210px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center 20%;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* ---------- Arbeitsgebiete: Bild oben, Überschrift in einer Zeile ---------- */
.a4y-area-col { border-top: 0; padding-top: 0; }
.a4y-area-img {
	display: block;
	width: 100%;
	height: 210px;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 22px;
}
.a4y-area h3 { font-size: 1.2rem; }

/* Startseite: "Mehr zu ..."-Links der drei Schritte auf einer Linie */
.a4y-step.col-lg-4 { display: flex; flex-direction: column; align-items: flex-start; }
.a4y-step.col-lg-4 .a4y-more { margin-top: auto; padding-top: 12px; }


/* ---------- Schmale Marken-Leiste ganz oben (ca. 28 px statt 49 px) ---------- */
.c4y-brand-strip { padding: 3px 0; }
.c4y-brand-strip-track { min-height: 1.8em; }


/* Größeres Logo (74 px): Menüzeile bleibt so hoch wie die Header-Höhe, kein Überlappen des Inhalts */
@media (max-width: 1300px) {
	#header-wrap .header-row { padding: 13px 0; }
}

/* Zwischen 1301 und 1399 px ist das Logo (74 px) mit Menü und Störungs-Button knapp:
   engerer Menüabstand, damit der Button nicht in eine zweite Zeile rutscht. */
@media (min-width: 1301px) and (max-width: 1399px) {
	.is-expanded-menu .primary-menu .menu-container > .menu-item > .menu-link { padding-left: 11px; padding-right: 11px; }
	.header-misc { margin-left: 14px; }
}


/* ---------- CSS4YOU als Muttermarke sichtbar machen ---------- */
#footer.a4y-footer .a4y-footer-parent { margin: 0 0 26px; }
#footer.a4y-footer .a4y-footer-parent span {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.3px;
	margin-bottom: 8px;
	color: rgba(255, 255, 255, 0.9);
}
#footer.a4y-footer .a4y-footer-logo-sm { margin-bottom: 0; padding: 8px 14px; }
#footer.a4y-footer .a4y-footer-logo-sm img { max-height: 40px; width: auto; }
.a4y-parent-logo-link { display: inline-block; margin-bottom: 22px; }
.a4y-parent-logo { display: block; height: 52px; width: auto; }


/* ================================================================
   ALARM4YOU-spezifische Bausteine (Rot als Markenfarbe)
   ================================================================ */

/* Hero: helleres Rot für die Zeile auf dem dunklen Foto (reines Markenrot wäre dort zu dunkel) */
.a4y-hero { background-position: center 24%; }
.a4y-hero-ways { color: #ff6a6a; }

/* Dunkler Vorteile-Block: Symbole als weiße Zeichen auf rotem Kreis (Rot direkt auf Grau wäre kaum lesbar) */
.a4y-dark .a4y-dark-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--cnvs-themecolor);
	color: #fff;
	font-size: 34px;
}

/* Footer: Hover weiß + Unterstreichung (Rot auf Grau hat zu wenig Kontrast) */
#footer.a4y-footer a:hover { color: #fff !important; text-decoration: underline; }

/* Leistungsbereiche: Symbol statt Foto */
.a4y-way { display: flex; flex-direction: column; align-items: center; }
.a4y-way-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: rgba(var(--cnvs-themecolor-rgb), 0.09);
	color: var(--cnvs-themecolor);
	font-size: 40px;
	margin: 0 auto 20px;
	transition: background 0.2s, color 0.2s;
}
a.a4y-way:hover .a4y-way-icon { background: var(--cnvs-themecolor); color: #fff; }
@media (prefers-reduced-motion: reduce) { .a4y-way-icon { transition: none; } }

/* Leistungen: Foto + Text */
.a4y-service { padding: 55px 0; border-top: 1px solid var(--cnvs-contrast-200); }
.a4y-service:first-of-type { border-top: 0; }
.a4y-service h2 { font-weight: 800; margin-bottom: 6px; }
.a4y-service-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 800;
	font-size: 0.8rem;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--cnvs-themecolor);
	margin-bottom: 8px;
}
.a4y-service-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.a4y-service-img-sm { max-width: 260px; aspect-ratio: auto; object-fit: contain; background: #fff; border: 1px solid var(--cnvs-contrast-200); padding: 6px; box-shadow: none; }
.a4y-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.a4y-actions .button { margin: 0; }
.a4y-check-list.a4y-one-col { columns: 1; }

/* Hinweis-Kasten (Preisinfo, Beratung) */
.a4y-note {
	background: var(--cnvs-contrast-100);
	border-left: 4px solid var(--cnvs-themecolor);
	border-radius: 4px;
	padding: 16px 22px;
	margin: 22px 0 0;
}
.a4y-note p { margin: 0; }
.a4y-note p + p { margin-top: 8px; }

/* Anwendungsbereiche (Videofied) */
.a4y-usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
@media (max-width: 991px) { .a4y-usecase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .a4y-usecase-grid { grid-template-columns: 1fr; } }
.a4y-usecase {
	background: #fff;
	border: 1px solid var(--cnvs-contrast-200);
	border-left: 4px solid var(--cnvs-themecolor);
	border-radius: 6px;
	padding: 20px 22px;
}
.a4y-usecase h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 6px; }
.a4y-usecase p { font-size: 0.92rem; color: var(--cnvs-contrast-700); margin: 0 0 10px; line-height: 1.55; }
.a4y-usecase a { font-weight: 700; font-size: 0.9rem; color: var(--a4y-link); text-decoration: underline; text-underline-offset: 2px; }

/* Mieten: Baustellen- und Parkplatzüberwachung */
.a4y-rent-card {
	position: relative;
	display: block;
	height: 100%;
	background: #fff;
	color: inherit;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.a4y-rent-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.a4y-rent-body { padding: 22px 24px 26px; }
.a4y-rent-body h3 { font-weight: 800; font-size: 1.3rem; margin: 0 0 8px; }
.a4y-rent-body p { margin: 0 0 12px; color: var(--cnvs-contrast-700); line-height: 1.6; }
.a4y-rent-body .a4y-more { font-weight: 700; color: var(--a4y-link); text-decoration: underline; text-underline-offset: 3px; }
.a4y-rent-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--cnvs-themecolor);
	color: var(--a4y-on-brand);
	font-weight: 800;
	font-size: 0.78rem;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 20px;
}
a.a4y-rent-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); color: inherit; }

/* Partner- und Herstellerlogos */
.a4y-brand-flex { display: grid; grid-template-columns: repeat(4, 1fr); }
.a4y-brand-flex .c4y-ref-cell { box-sizing: border-box; padding: 22px 16px; display: flex; align-items: center; justify-content: center; }
.a4y-brand-flex img { max-width: 100%; max-height: 70px; width: auto; height: auto; }
.a4y-brand-more {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 70px;
	color: var(--cnvs-themecolor);
	font-weight: 700;
	font-size: 1.05rem;
	text-align: center;
	line-height: 1.3;
	text-decoration: none;
}
.a4y-brand-more:hover { color: var(--a4y-red-strong); }
@media (max-width: 991px) { .a4y-brand-flex { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .a4y-brand-flex { grid-template-columns: repeat(2, 1fr); } }
/* Weniger als 4 Logos (typisch bei den Landingpages: 3 Partner) - mittig statt linksbündig */
.a4y-brand-flex.a4y-brand-flex-center { display: flex; flex-wrap: wrap; justify-content: center; }
.a4y-brand-flex.a4y-brand-flex-center .c4y-ref-cell { flex: 0 0 220px; }

/* Produkte */
.a4y-anchor-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.a4y-anchor-nav a {
	display: inline-block;
	padding: 8px 18px;
	border: 2px solid var(--cnvs-themecolor);
	border-radius: 30px;
	font-weight: 700;
	color: var(--cnvs-themecolor);
	text-decoration: none;
}
.a4y-anchor-nav a:hover { background: var(--cnvs-themecolor); color: var(--a4y-on-brand); }
.a4y-prod { padding: 38px 0; border-top: 1px solid var(--cnvs-contrast-200); scroll-margin-top: 130px; }
.a4y-prod:first-of-type { border-top: 0; }
.a4y-prod-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--cnvs-contrast-200);
	border-radius: 8px;
	padding: 6px;
}
.a4y-prod h3 { font-size: 1.45rem; font-weight: 800; margin: 0 0 4px; }
.a4y-prod-sub { color: var(--cnvs-themecolor); font-weight: 700; margin: 0 0 12px; }
.a4y-prod p { line-height: 1.65; }
.a4y-section-head { scroll-margin-top: 110px; }
.a4y-cam-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; margin-top: 28px; }
.a4y-cam { text-align: center; }
.a4y-cam img { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto 14px; border-radius: 8px; border: 1px solid var(--cnvs-contrast-200); }
.a4y-cam h3 { font-size: 1.1rem; font-weight: 800; margin: 0 0 6px; }
.a4y-cam p { font-size: 0.95rem; color: var(--cnvs-contrast-700); margin: 0 0 12px; line-height: 1.55; }
.a4y-cam a { font-weight: 700; font-size: 0.9rem; color: var(--a4y-link); text-decoration: underline; text-underline-offset: 2px; }

/* Lange Button-Texte am Handy umbrechen statt abschneiden */
@media (max-width: 767px) {
	#content .button,
	.a4y-actions .button {
		white-space: normal;
		height: auto;
		line-height: 1.4;
		padding-top: 0.6em;
		padding-bottom: 0.6em;
		max-width: 100%;
		text-align: center;
	}
}


/* ---------- Footer: beide Logos (ALARM4YOU und CSS4YOU) in weißer Box ----------
   Die Box ist so breit wie das Logo (nicht die ganze Spalte). */
#footer.a4y-footer .a4y-footer-logo-glow,
#footer.a4y-footer .a4y-footer-logo-sm {
	display: inline-block;
	width: auto;
	max-width: 100%;
	background: #fff;
	border-radius: 8px;
	padding: 10px 16px;
}
#footer.a4y-footer .a4y-footer-logo-glow { margin: 0 0 26px; }
#footer.a4y-footer .a4y-footer-logo-sm { margin: 0; padding: 8px 14px; }
#footer.a4y-footer .a4y-footer-logo-glow img,
#footer.a4y-footer .a4y-footer-logo-sm img {
	display: block;
	width: auto;
	max-width: 100%;
}
#footer.a4y-footer .a4y-footer-logo-glow img { height: 62px; }
#footer.a4y-footer .a4y-footer-logo-sm img { height: auto; max-height: 40px; }
/* Firmenname im Footer in einer Zeile (ab 1200 px; darunter darf er umbrechen) */
@media (min-width: 1200px) { .a4y-nowrap-xl { white-space: nowrap; } }

/* Untermenü: Zwischenüberschrift "Weitere Lösungen" */
.c4y-submenu .a4y-sub-head {
	margin-top: 6px;
	padding: 12px 20px 4px;
	border-top: 1px solid var(--cnvs-contrast-200);
}
.c4y-submenu .a4y-sub-head span {
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--cnvs-themecolor);
}

/* Sprungmarken unter der fixierten Menüzeile */
.a4y-service, .a4y-anchor { scroll-margin-top: 100px; }
#footer.a4y-footer .widget_links h4 { white-space: nowrap; }