/* ----------------------------------------------------------------
	Canvas: SPLEISS4YOU
	Bereichs-Theme für spleiss4you.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 SPLEISS4YOU (Türkis, wie im Logo) */
	--cnvs-themecolor: #00bfc2;
	--cnvs-themecolor-rgb: 0, 191, 194;

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

	/* Türkis auch für Menü-Hover, Links, Icons und Kennzeichnungen (reine Markenfarbe, kein abgedunkelter Ton) */
	--s4y-brand: var(--cnvs-themecolor);
	--s4y-link: var(--cnvs-themecolor);

	--s4y-gray: #636466;
	--s4y-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(--s4y-link);
	--cnvs-primary-menu-hover-color: var(--s4y-link);
	--cnvs-primary-menu-active-color: var(--s4y-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(--s4y-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(--s4y-ink);
}
/* Kontur-Button auf Türkis-Flächen: weiße Kontur, beim Hover weiß gefüllt */
.s4y-btn-outline {
	background: transparent !important;
	border: 2px solid #fff !important;
	color: #fff !important;
	font-weight: 600;
}
.s4y-btn-outline:hover {
	background: #fff !important;
	color: var(--s4y-ink) !important;
}

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

/* ---------- Hauptmenü: aktive/Hover-Farbe in Markenfarbe ---------- */
.primary-menu .menu-item.current > .menu-link,
.primary-menu .menu-item:hover > .menu-link,
.primary-menu .menu-item.current:hover > .menu-link {
	color: var(--s4y-link);
}

/* ---------- Hauptmenü: aktive Seite zusätzlich unterstrichen (nicht bei Hover) ---------- */
.primary-menu .menu-container > .menu-item > .menu-link > div {
	width: fit-content;
}
.primary-menu .menu-container > .menu-item.current > .menu-link > div {
	box-shadow: inset 0 -3px 0 0 var(--cnvs-themecolor);
}

/* ---------- Untermenü: Hover-Farbe neutral statt Bereichsfarben-Reihenfolge des Hubs ---------- */
.c4y-submenu.s4y-submenu .menu-item:nth-child(n) .menu-link:hover {
	color: var(--s4y-link);
}
.c4y-submenu.s4y-submenu .menu-link { gap: 12px; }
.c4y-submenu.s4y-submenu .menu-link > div { box-shadow: none; width: auto; }
.c4y-submenu.s4y-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.s4y-submenu .menu-link,
.c4y-submenu.s4y-submenu .menu-link:hover,
.c4y-submenu.s4y-submenu .menu-item:hover > .menu-link {
	white-space: nowrap;
	font-weight: 600;
}
@media (min-width: 992px) {
	.primary-menu .menu-container .c4y-submenu.s4y-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(--s4y-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(--s4y-ink);
}

/* ---------- Hero ---------- */
.s4y-hero {
	position: relative;
	margin: 0;
	padding-top: 190px;
	padding-bottom: 170px;
	background: #2f3032 url("../images/hero/hero-glasfaser.jpg") center 32% / cover no-repeat;
	overflow: hidden;
}
@media (max-width: 768px) {
	.s4y-hero { background-image: url("../images/hero/hero-glasfaser-mobil.jpg"); }
}
.s4y-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%);
}
.s4y-hero .container { position: relative; z-index: 2; }
.s4y-hero-kicker {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.3px;
}
.s4y-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;
}
.s4y-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;
}
.s4y-hero-text {
	color: rgba(255, 255, 255, 0.88);
	font-size: 1.15rem;
	max-width: 640px;
	margin: 12px auto 32px;
}

/* ---------- Leistungs-Kacheln (Raster mit Haarlinien wie im Referenzraster) ---------- */
.s4y-way-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 991px) { .s4y-way-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .s4y-way-grid { grid-template-columns: 1fr; } }
.s4y-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.s4y-way:hover { background: var(--cnvs-contrast-100); color: inherit; }
.s4y-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 */
}
.s4y-way h3 { font-size: 1.35rem; font-weight: 800; margin: 0 0 10px; }
.s4y-way p { margin: 0; color: var(--cnvs-contrast-700); line-height: 1.6; }

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 767px) {
	.s4y-hero { padding-top: 100px; padding-bottom: 90px; }
}
.s4y-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 (aktuell nicht verwendet): Textzelle in der Wertespalte (z. B. "nach Zeitaufwand") ---------- */
.s4y-price-table td.s4y-price-text {
	white-space: normal;
	font-size: 1rem;
	font-weight: 600;
	max-width: 240px;
}
.s4y-price-table + .s4y-price-table,
.s4y-price-heading { margin-top: 50px; }
.s4y-price-heading { margin-bottom: 0; }

/* ---------- News: live aus dem zentralen Google Sheet (js/news-sheet.js) ---------- */
/* 3 Karten nebeneinander (Desktop), 2 (Tablet), 1 (Handy); aufgeklappte Karte streckt die Nachbarn nicht */
.s4y-news-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	align-items: start;
}
@media (max-width: 991px) { .s4y-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .s4y-news-grid { grid-template-columns: minmax(0, 1fr); } }

.s4y-news-card {
	background: #fff;
	border: 2px solid var(--cnvs-themecolor);
	border-radius: 8px;
	text-align: left;
	transition: box-shadow .2s ease;
}
.s4y-news-card:hover, .s4y-news-card[open] { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09); }
.s4y-news-card summary {
	cursor: pointer;
	list-style: none;
	padding: 22px 24px;
	position: relative;
}
.s4y-news-card summary::-webkit-details-marker { display: none; }
.s4y-news-card summary::marker { content: ""; }
.s4y-news-card summary:focus-visible { outline: 3px solid var(--cnvs-themecolor); outline-offset: 2px; border-radius: 6px; }
.s4y-news-card summary::after {
	content: "weiterlesen ▾";
	display: block;
	margin-top: 12px;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--s4y-link);
}
.s4y-news-card[open] summary::after { content: "weniger ▴"; }
.s4y-news-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.s4y-news-meta img { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; }
.s4y-news-area {
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--s4y-link);
}
.s4y-news-title { font-size: 1.1rem; line-height: 1.35; margin: 0; }
.s4y-news-body { padding: 0 24px 24px; border-top: 1px solid var(--cnvs-contrast-200); padding-top: 18px; margin: 0 0 0; }
.s4y-news-body p { font-size: 0.92rem; line-height: 1.6; margin: 0 0 12px; }
.s4y-news-lead { font-weight: 700; color: var(--s4y-ink); }
.s4y-news-link { font-weight: 700; font-size: 0.9rem; }
.s4y-news-status { text-align: center; color: var(--cnvs-contrast-700); margin: 0; }

/* ---------- Foto mit Rahmen in Bereichsfarbe (Über uns) ---------- */
.s4y-photo-frame {
	position: relative;
	margin: 0 12px 12px 0;
	padding: 10px;
	background: #fff;
	border: 4px solid var(--cnvs-themecolor);
	border-radius: 8px;
	box-shadow: 12px 12px 0 rgba(var(--cnvs-themecolor-rgb), 0.22);
}
.s4y-photo-frame img { display: block; width: 100%; height: auto; border-radius: 3px; }
@media (max-width: 767px) {
	.s4y-photo-frame { max-width: 380px; margin-left: auto; margin-right: auto; }
	.s4y-photo-frame img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 68% 45%; }
}

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


/* ---------- Porträt beim Zitat ---------- */
.s4y-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 ---------- */
.s4y-area-col { border-top: 0; padding-top: 0; }
.s4y-area-img {
	display: block;
	width: 100%;
	height: 210px;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 22px;
}
.s4y-area h3 { font-size: 1.2rem; }

/* Startseite: "Mehr zu ..."-Links der drei Schritte auf einer Linie */
.s4y-step.col-lg-4 { display: flex; flex-direction: column; align-items: flex-start; }
.s4y-step.col-lg-4 .s4y-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.s4y-footer .s4y-footer-parent { margin: 0 0 26px; }
#footer.s4y-footer .s4y-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.s4y-footer .s4y-footer-logo-sm { margin-bottom: 0; padding: 8px 14px; }
#footer.s4y-footer .s4y-footer-logo-sm img { max-height: 40px; width: auto; }
.s4y-parent-logo-link { display: inline-block; margin-bottom: 22px; }
.s4y-parent-logo { display: block; height: 52px; width: auto; }


/* =================================================================
   SPLEISS4YOU-spezifisch
   ================================================================= */

/* Hinweis unter den Hero-Buttons: rein gewerbliche Ausrichtung */
.s4y-hero-note {
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.95rem;
	font-weight: 600;
	margin: 26px auto 0;
	max-width: 640px;
}
.s4y-hero-note i { color: var(--cnvs-themecolor); margin-right: 6px; }

/* Einsatzbereiche ohne Foto: Türkis-Kante oben (statt Bild) */
.s4y-area-col.s4y-area-text {
	border-top: 5px solid var(--cnvs-themecolor);
	padding-top: 26px;
}
.s4y-area-col.s4y-area-text p { margin-bottom: 14px; }
.s4y-area-col.s4y-area-text ul { margin-top: 6px; }

/* Vorteile-Liste: Fettdruck vorne, Text darunter */
.s4y-benefits li strong { display: block; }
.s4y-benefits li span { color: var(--cnvs-contrast-700); font-size: 0.95rem; line-height: 1.5; display: block; }
.s4y-benefits { columns: 3; }
@media (max-width: 991px) { .s4y-benefits { columns: 2; } }
@media (max-width: 575px) { .s4y-benefits { columns: 1; } }

/* Hinweis-Kasten (z. B. "Keine Einzelaufträge für private Haushalte") */
.s4y-notice {
	border-left: 5px solid var(--cnvs-themecolor);
	background: var(--cnvs-contrast-100);
	padding: 16px 22px;
	border-radius: 4px;
	margin: 26px 0 0;
}
.s4y-notice p { margin: 0; }

/* Logo im Kopf: Bild ist breiter als das TV-Logo, darf auf schmalen Bildschirmen schrumpfen */
#logo img { max-width: 100%; height: auto; }


/* =================================================================
   Footer-Symbole ohne Icon-Schrift (bleiben auch sichtbar, wenn eine Schriftdatei
   nicht geladen wird): Link-Pfeile als CSS-Dreieck, LinkedIn als SVG-Maske.
   ================================================================= */
#footer.s4y-footer .widget_links:not(.widget-li-noicon) li::before {
	content: "";
	font-family: inherit;
	display: inline-block;
	align-self: center;
	flex: 0 0 auto;
	width: 0.4rem;
	height: 0.6rem;
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.s4y-ico-linkedin::before {
	content: "";
	display: inline-block;
	width: 0.95em;
	height: 0.95em;
	vertical-align: -0.12em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3E%3Cpath d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'/%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 448 448'%3E%3Cpath d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* =================================================================
   Nach-oben-Button: Pfeil per CSS-Maske (keine Icon-Schrift nötig), Größe/Farbe wie bisher
   ================================================================= */
#gotoTop.s4y-gototop::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: currentColor;
	-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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E") center / 60% 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E") center / 60% no-repeat;
}
/* Etwas besser sichtbar als das Standard-Grau: Bereichsfarbe */
#gotoTop.s4y-gototop { --cnvs-gotoTop-bg: rgba(var(--cnvs-themecolor-rgb), 0.92); --cnvs-gotoTop-hover-color: var(--s4y-ink); }
#gotoTop.s4y-gototop:focus-visible { outline: 3px solid var(--s4y-ink); outline-offset: 2px; }