/* ----------------------------------------------------------------
	Canvas: TV4you
	Bereichs-Theme für tv4you.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 TV4you (aus dem Bereichs-Icon ausgelesen, siehe --c4y-tv4you) */
	--cnvs-themecolor: #f19c32;
	--cnvs-themecolor-rgb: 241, 156, 50;

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

	/* Orange auch für Menü-Hover, Links, Icons und Kennzeichnungen (reines Markenorange, kein Braun) */
	--tv-orange-strong: var(--cnvs-themecolor);
	--tv-link: var(--cnvs-themecolor);

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

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

/* ---------- Hauptmenü: aktive/Hover-Farbe lesbar (dunkleres Orange) ---------- */
.primary-menu .menu-item.current > .menu-link,
.primary-menu .menu-item:hover > .menu-link,
.primary-menu .menu-item.current:hover > .menu-link {
	color: var(--tv-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.tv-submenu .menu-item:nth-child(n) .menu-link:hover {
	color: var(--tv-link);
}
.c4y-submenu.tv-submenu .menu-link { gap: 12px; }
.c4y-submenu.tv-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.tv-submenu .menu-link,
.c4y-submenu.tv-submenu .menu-link:hover,
.c4y-submenu.tv-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.tv-submenu .menu-link > div {
	box-shadow: none;
	width: auto;
}
@media (min-width: 992px) {
	.primary-menu .menu-container .c4y-submenu.tv-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(--tv-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(--tv-ink);
}

/* ---------- Hero ---------- */
.tv-hero {
	position: relative;
	margin: 0;
	padding-top: 190px;
	padding-bottom: 170px;
	background: #2f3032 url("../images/hero/hero-tv.jpg") center 32% / cover no-repeat;
	overflow: hidden;
}
.tv-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%);
}
.tv-hero .container { position: relative; z-index: 2; }
.tv-hero-kicker {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.3px;
}
.tv-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;
}
.tv-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;
}
.tv-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) ---------- */
.tv-way-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 991px) { .tv-way-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .tv-way-grid { grid-template-columns: 1fr; } }
.tv-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.tv-way:hover { background: var(--cnvs-contrast-100); color: inherit; }
.tv-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 */
}
.tv-way h3 { font-size: 1.35rem; font-weight: 800; margin: 0 0 10px; }
.tv-way p { margin: 0; color: var(--cnvs-contrast-700); line-height: 1.6; }

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

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

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

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

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

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

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

/* ---------- Preistabelle ---------- */
.tv-price-table {
	width: 100%;
	border-collapse: collapse;
	margin: 30px 0 14px;
}
.tv-price-table th {
	text-align: left;
	font-weight: 700;
	color: var(--tv-gray);
	padding: 12px 16px;
	border-bottom: 3px solid var(--cnvs-themecolor);
}
.tv-price-table th:last-child,
.tv-price-table td:last-child { text-align: right; white-space: nowrap; }
.tv-price-table td {
	padding: 20px 16px;
	border-bottom: 1px solid var(--cnvs-contrast-200);
	vertical-align: middle;
}
.tv-price-table td:last-child { font-weight: 800; font-size: 1.15rem; }
.tv-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.tv-footer {
	background: var(--tv-gray);
	border-top: 6px solid var(--cnvs-themecolor);
}
#footer.tv-footer .tv-footer-logo {
	display: inline-block;
	background: #fff;
	border-radius: 8px;
	padding: 10px 16px;
	margin-bottom: 26px;
}
#footer.tv-footer .tv-footer-logo img { display: block; max-height: 62px; }
#footer.tv-footer a:hover { color: var(--cnvs-themecolor) !important; }
#copyrights.tv-copyrights { background: var(--tv-gray-dark) !important; }

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

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

@media (max-width: 767px) {
	.tv-hero { padding-top: 100px; padding-bottom: 90px; }
}
.tv-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") ---------- */
.tv-price-table td.tv-price-text {
	white-space: normal;
	font-size: 1rem;
	font-weight: 600;
	max-width: 240px;
}
.tv-price-table + .tv-price-table,
.tv-price-heading { margin-top: 50px; }
.tv-price-heading { margin-bottom: 0; }

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


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

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


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

.tv-news-card {
	background: #fff;
	border-left: 4px solid var(--cnvs-themecolor);
	border-radius: 4px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
	text-align: left;
}
.tv-news-card summary {
	list-style: none;
	cursor: pointer;
	display: block;
	padding: 24px 24px 22px;
}
.tv-news-card summary::-webkit-details-marker { display: none; }
.tv-news-card summary::marker { content: ""; }
/* Symbol + Bereich in EINER Zeile */
.tv-news-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tv-news-icon { width: 22px; height: 22px; border-radius: 50%; display: block; flex: none; }
.tv-news-area {
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cnvs-themecolor);
	line-height: 1.2;
}
.tv-news-title {
	display: block;
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cnvs-contrast-900);
	overflow-wrap: anywhere;
}
/* HEADER (Untertitel) immer sichtbar */
.tv-news-lead {
	display: block;
	margin-top: 10px;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cnvs-contrast-900);
}
.tv-news-card summary::after {
	content: "weiterlesen \25BE";
	display: block;
	margin-top: 14px;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--cnvs-themecolor);
}
/* aufgeklappt: nur der TEXT (+ Link) */
.tv-news-body { padding: 0 24px 24px; font-size: 0.92rem; line-height: 1.7; color: var(--cnvs-contrast-600); }
.tv-news-body p { margin-bottom: 0; }
.tv-news-link { margin-top: 26px !important; }
.tv-news-body a { font-weight: 600; text-decoration: none; color: var(--cnvs-themecolor); }
.tv-news-body a:hover { text-decoration: underline; text-underline-offset: 2px; }
.tv-news-note { text-align: center; color: var(--cnvs-contrast-700); margin: 0 auto 24px; max-width: 720px; }

/* ---------- Über uns: Foto mit Rahmen in der Bereichsfarbe ---------- */
.tv-frame {
	margin: 0;
	padding: 10px;
	background: #fff;
	border: 5px solid var(--cnvs-themecolor);
	border-radius: 16px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}
.tv-frame img { display: block; width: 100%; height: auto; border-radius: 8px; }
.tv-about-photo { max-width: 340px; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .tv-about-photo { margin-left: 0; margin-right: 0; max-width: none; } }