/**
 * TVW Theme & Template Styles
 * Zentrale CSS-Datei für Theme- und Template-Bereich (Marken, Hero, etc.)
 *
 * Design-Regel: border-radius überall 6px (Banner, Kacheln, Buttons, Bilder, etc.)
 */

/* Full-Bleed mit 100vw: Scrollbalken kann seitlich abschneiden/verschieben – stabilisieren */
html {
	scrollbar-gutter: stable;
}

/* Astra: horizontales Abschneiden von Breakouts vermeiden (wenn Theme overflow-x setzt) */
body.home #primary,
body.home .site-content#primary,
body.home .site-content {
	overflow-x: visible;
}

/* Startseite: Abstand zwischen Header und Hero entfernen (nur body.home) */
body.home #page,
body.home .site-content,
body.home #content,
body.home .ast-container,
body.home .entry-content,
body.home #primary {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Fallback: Hero nach oben ziehen, falls die Lücke trotzdem bleibt */
body.home .tvw-start-hero {
  margin-top: -80px !important;
}

/*
 * Startseiten-Hero – Band-Abstände ohne Code ändern (Customizer → Zusätzliches CSS):
 * .tvw-start-hero .tvw-start-hero-band {
 *   --tvw-start-hero-padding-y: 3rem;
 *   --tvw-start-hero-padding-x: 2rem;
 *   --tvw-start-hero-min-height: 280px;
 *   --tvw-start-hero-inner-gap: 2rem;
 *   --tvw-start-hero-margin-bottom: 1.5rem;
 * }
 */

/* ========== Marken-Section (Hero, Logo, Beschreibung, Banner) ========== */
.tvw-brand-section { margin-bottom: 2rem; }

/* Hero: full width (breakout), inner content max 1500px, linksbündig */
.tvw-brand-hero {
    min-height: 200px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem;
    background-color: #1f2937;
    box-sizing: border-box;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
/* Live/Browser: 100vw inkl. Scrollbalken-Breite → seitlicher Clip; svw schmaler, passt oft besser */
@supports (width: 1svw) {
    .tvw-brand-hero {
        width: 100svw;
        margin-left: calc(50% - 50svw);
        margin-right: calc(50% - 50svw);
    }
}
/* Nur Startseiten-Hero: Padding/Mindesthöhe/Abstand unten per CSS-Variablen steuerbar */
.tvw-start-hero .tvw-brand-hero.tvw-start-hero-band {
  --tvw-start-hero-padding-y: 2rem;
  --tvw-start-hero-padding-x: 1.5rem;
  --tvw-start-hero-min-height: 220px;
  --tvw-start-hero-inner-gap: 1.25rem;
  --tvw-start-hero-margin-bottom: 0;
  padding: var(--tvw-start-hero-padding-y) var(--tvw-start-hero-padding-x);
  min-height: var(--tvw-start-hero-min-height);
  margin-bottom: var(--tvw-start-hero-margin-bottom);
}
.tvw-brand-hero-inner {
    text-align: left;
    color: #fff;
    max-width: 1500px;
    width: 100%;
    padding: 0 1rem;
    margin: 0 auto;
}
/* Startseiten-Hero: Text + optionales Bild nebeneinander (ab Tablet) */
.tvw-start-hero .tvw-start-hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--tvw-start-hero-inner-gap);
  align-items: stretch;
}
/* Rechtes Hero-Bild: einzeln oder Crossfade (zwei Bilder) — Mobile First */
.tvw-start-hero .tvw-start-hero-side-link {
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  border-radius: 6px;
  vertical-align: bottom;
}
.tvw-start-hero .tvw-start-hero-side-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
@keyframes tvw-start-hero-crossfade-a {
  0%, 40% { opacity: 1; }
  50%, 90% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes tvw-start-hero-crossfade-b {
  0%, 40% { opacity: 0; }
  50%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
.tvw-start-hero .tvw-start-hero-side-stack--crossfade {
  --tvw-start-hero-crossfade-duration: 10s;
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  line-height: 0;
  isolation: isolate;
  z-index: 0;
}
/* Kein eigenes z-index auf den Bildern: sonst liegen sie bei negativem Margin der Infoblöcke über der Bananen-Leiste */
.tvw-start-hero .tvw-start-hero-side-stack--crossfade .tvw-start-hero-side-img--a {
  position: relative;
  animation: tvw-start-hero-crossfade-a var(--tvw-start-hero-crossfade-duration, 10s) ease-in-out infinite;
}
.tvw-start-hero .tvw-start-hero-side-stack--crossfade .tvw-start-hero-side-img--b {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  animation: tvw-start-hero-crossfade-b var(--tvw-start-hero-crossfade-duration, 10s) ease-in-out infinite;
}
/* Rechtes Hero-Motiv bleibt unter [tvw_info_banner] / .tvw-start-info-blocks (margin-top negativ) */
.tvw-start-hero .tvw-start-hero-media {
  position: relative;
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .tvw-start-hero .tvw-start-hero-side-stack--crossfade .tvw-start-hero-side-img--a,
  .tvw-start-hero .tvw-start-hero-side-stack--crossfade .tvw-start-hero-side-img--b {
    animation: none;
  }
  .tvw-start-hero .tvw-start-hero-side-stack--crossfade .tvw-start-hero-side-img--b {
    opacity: 0;
    pointer-events: none;
  }
}
@media (min-width: 768px) {
  .tvw-start-hero .tvw-start-hero-inner--with-side {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--tvw-start-hero-inner-gap);
  }
  .tvw-start-hero .tvw-start-hero-copy {
    flex: 1 1 0;
    min-width: 0;
    max-width: 38rem;
  }
  .tvw-start-hero .tvw-start-hero-media {
    flex: 0 1 42%;
    max-width: 26rem;
    align-self: center;
    display: flex;
    justify-content: flex-end;
  }
  .tvw-start-hero .tvw-start-hero-side-img {
    max-width: 400px;
    margin-left: auto;
  }
  .tvw-start-hero .tvw-start-hero-side-stack--crossfade {
    max-width: 400px;
    margin-left: auto;
  }
  .tvw-start-hero .tvw-start-hero-side-stack--crossfade .tvw-start-hero-side-img--a,
  .tvw-start-hero .tvw-start-hero-side-stack--crossfade .tvw-start-hero-side-img--b {
    margin-left: 0;
  }
}
.tvw-brand-headline { margin: 0; font-size: 1.75rem; color: inherit; }
.tvw-start-hero-headline { margin: 0 0 0.75rem; font-size: clamp(1.35rem, 4vw, 2rem); font-weight: 700; color: inherit; line-height: 1.2; }
/* Teaser unter H1: lesbar auf Foto, ~18–20px, nicht zu dünn */
.tvw-start-hero .tvw-start-hero-text.tvw-brand-description {
	font-size: clamp(1.125rem, 2.5vw, 1.25rem);
	font-weight: 600;
	line-height: 1.4;
	max-width: 38rem;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.tvw-start-hero-text p:first-child { margin-top: 0; }
.tvw-start-hero-text p:last-child { margin-bottom: 0; }
.tvw-brand-hero-text { margin-top: 0.5rem; font-size: 1rem; opacity: 0.9; }
.tvw-brand-logo-wrap { text-align: left; padding-bottom: 0.75rem; }
.tvw-brand-logo { max-height: 80px; width: auto; object-fit: contain; }
.tvw-brand-description { max-width: 100%; margin: 0; line-height: 1.6; color: #fff; }

/* Banner unter dem Hero */
.tvw-brand-banner-wrap { text-align: center; padding: 0 1rem 1.5rem; }
.tvw-brand-banner { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* ========== Hero + Buddy (Templates-Seite) ========== */
/* Aus dem Theme-Container ausbrechen, damit die Seite volle Breite nutzt (nicht links gepfercht) */
.tvw-hero-buddy-page {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-bottom: 3rem;
	box-sizing: border-box;
}
@supports (width: 1svw) {
	.tvw-hero-buddy-page {
		width: 100svw;
		max-width: 100svw;
		margin-left: calc(50% - 50svw);
		margin-right: calc(50% - 50svw);
	}
}
.tvw-hero-buddy-page-content { width: 100%; }
.tvw-buddy-block { padding: 2rem 1rem; }
.tvw-buddy-inner { max-width: 800px; margin: 0 auto; }
.tvw-buddy-title { font-size: 1.5rem; margin: 0 0 1rem; }
.tvw-buddy-content { line-height: 1.6; }
.tvw-buddy-content p { margin-bottom: 1rem; }
.tvw-buddy-cta { margin: 1.5rem 0 0; }
.tvw-buddy-cta-link { display: inline-block; padding: 0.5rem 1rem; background: #1f2937; color: #fff; text-decoration: none; border-radius: 6px; }
.tvw-buddy-cta-link:hover { opacity: 0.9; color: #fff; }

/* ========== Shortcode [tvw_marken_kacheln] – Marken-Kacheln (Alle Marken) ========== */
.tvw-marken-kacheln-intro {
	max-width: 1500px;
	margin: 0 auto 1.25rem;
	padding: 0.5rem 1rem 0;
	box-sizing: border-box;
}
.tvw-marken-kacheln-h1 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.35rem, 4vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	color: #0f172a;
}
.tvw-marken-kacheln-h2 {
	margin: 0;
	font-size: clamp(1rem, 2.5vw, 1.15rem);
	font-weight: 600;
	line-height: 1.45;
	color: #334155;
}
.tvw-marken-kacheln {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 1rem;
	max-width: 1500px;
	margin: 0 auto 2rem;
	padding: 0 1rem;
}
.tvw-marken-kacheln__kachel {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.06);
	padding: 20px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease;
	min-height: 100px;
}
.tvw-marken-kacheln__kachel:hover {
	transform: scale(1.03);
}
.tvw-marken-kacheln__logo {
	max-width: 100%;
	height: auto;
	max-height: 80px;
	object-fit: contain;
}
.tvw-marken-kacheln__name {
	font-weight: 600;
	font-size: 0.95rem;
	text-align: center;
}
@media (max-width: 1200px) {
	.tvw-marken-kacheln { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
	.tvw-marken-kacheln { grid-template-columns: repeat(2, 1fr); }
}

/* ========== Startseite: 6 Bildkacheln (lückenlos, Apple-Style) ========== */
.tvw-start-six-tiles {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0 0 2rem;
	width: 100%;
	box-shadow:   0 1px 3px rgba(0, 0, 0, 0.12),
  				0 8px 24px rgba(0, 0, 0, 0.08);
}
.tvw-start-six-tile {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border-radius: 0;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	transition: box-shadow 0.2s ease;
}
.tvw-start-six-tile:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.tvw-start-six-tile:first-child { border-radius: 6px 0 0 6px; }
.tvw-start-six-tile:last-child { border-radius: 0 6px 6px 0; }
.tvw-start-six-tile__top {
	aspect-ratio: 16 / 9;
	min-height: 100px;
	background-color: #2563eb;
	background-size: cover;
	background-position: center;
}
.tvw-start-six-tile__label {
	background: #fff;
	padding: 0.75em 0.5em;
	text-align: center;
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0.02em;
}

/* ========== Startseite: 3 Infoblöcke (dunkel, hell, Akzent) ========== */
/* Per Shortcode [tvw_info_banner]: max 1500px wie Hero/Seite, zentriert; kein Ãœberlappung nach oben */
.tvw-info-banner {
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -30px;
	padding: 0 1rem 1rem;
}
.tvw-info-banner .tvw-start-info-blocks { margin-top: 0; }
/* Mobile first: drei Infoblöcke untereinander; ab ca. Tablet/Desktop nebeneinander */
.tvw-start-info-blocks {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0;
	width: 100%;
	max-width: 100%;
	margin-top: -2rem;
	margin-right: 0;
	margin-bottom: 20px;
	position: relative;
	z-index: 2;
	border-radius: 6px;
	overflow: hidden;
	box-shadow:   0 1px 3px rgba(0, 0, 0, 0.12),
  				0 8px 24px rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
}
.tvw-start-info-block {
	flex: none;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 1rem 1.1em;
	text-align: center;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.4;
	color: #ffffff;
}
.tvw-start-info-block--dark {
	background: #202A34;
	border-radius: 0;
}
.tvw-start-info-block--light {
	background: #9A8D84;
	color: #ffffff;
	border-radius: 0;
}
.tvw-start-info-block--accent {
	background: #07362D;
	border-radius: 0;
}

/* Infoblöcke mit Modal: <button> — gleiche Typo wie .tvw-start-info-block (kein font:inherit vom Theme) */
button.tvw-start-info-block {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	border: none;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	color: #ffffff;
	cursor: pointer;
	text-align: center;
	box-sizing: border-box;
}
/* Inline-Markup im Block (Links o. ä.) nicht vom Theme einfärben */
.tvw-start-info-blocks .tvw-start-info-block a {
	color: #ffffff;
}
button.tvw-start-info-block:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}
.tvw-start-info-block--has-modal {
	cursor: pointer;
}

/* Modal Erklärungsgrafik */
.tvw-start-info-modal[hidden] {
	display: none !important;
}
.tvw-start-info-modal:not([hidden]) {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	box-sizing: border-box;
}
.tvw-start-info-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}
.tvw-start-info-modal__dialog {
	position: relative;
	z-index: 1;
	max-width: min(920px, 100%);
	max-height: min(90vh, 100%);
	padding: 0.75rem;
	background: #f5f5f5;
	border-radius: 6px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
	box-sizing: border-box;
	overflow: auto;
}
.tvw-start-info-modal__close {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	z-index: 2;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: rgba(32, 42, 52, 0.08);
	color: #202a34;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tvw-start-info-modal__close:hover {
	background: rgba(32, 42, 52, 0.14);
}
.tvw-start-info-modal__img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	vertical-align: middle;
}

@media (min-width: 992px) {
	.tvw-start-info-blocks {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		margin-top: -110px;
	}
	.tvw-start-info-block {
		flex: 1;
		min-width: 0;
		width: auto;
		padding: 1.25em 1.5em;
		font-size: 18px;
		line-height: 1.35;
	}
	.tvw-start-info-blocks button.tvw-start-info-block {
		width: 100%;
		font-size: 18px;
		line-height: 1.35;
	}
}

/* ========== Startseite: Über-uns-Teaser (H2/H3 + 3 Banner → /ueber-uns/) ========== */
/* Eigene „Schale“ wie .tvw-legal-article: halbtransparenter Weißton, hebt sich von FAQ / So funktioniert’s ab */
.tvw-start-ueber-teaser {
	max-width: 1500px;
	margin: 0 auto 0;
	padding: 0;
	box-sizing: border-box;
}
.tvw-start-ueber-teaser__inner {
	width: 100%;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 6px;
	padding: 20px 20px 12px 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.08);
}
.tvw-start-ueber-teaser__inner > *:last-child {
	margin-bottom: 0;
}
.tvw-start-ueber-teaser__title {
	margin: 0 0 0.35em;
	font-size: 1.5rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.25;
}
.tvw-start-ueber-teaser__subtitle {
	margin: 0 0 1rem;
	font-size: 1rem;
	font-weight: 600;
	color: #0f172a;
	line-height: 1.45;
}
.tvw-start-ueber-teaser__banners {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin: 0 0 1rem;
}
.tvw-start-ueber-teaser__banner {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.tvw-start-ueber-teaser__banner:hover {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14), 0 10px 28px rgba(0, 0, 0, 0.12);
	transform: translateY(-1px);
}
.tvw-start-ueber-teaser__banner:focus-visible {
	outline: 2px solid #0f4c81;
	outline-offset: 3px;
}
.tvw-start-ueber-teaser__banner-media {
	position: relative;
	aspect-ratio: 1600 / 480;
	background: #e2e8f0;
	border-radius: 6px 6px 0 0;
	overflow: hidden;
}
.tvw-start-ueber-teaser__banner-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	vertical-align: middle;
}
.tvw-start-ueber-teaser__banner-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100px;
	background: linear-gradient(135deg, #e8eef4 0%, #cbd5e1 50%, #94a3b8 100%);
}
.tvw-start-ueber-teaser__banner-label {
	padding: 0.55rem 0.65rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: #1e293b;
	background: rgba(255, 255, 255, 0.95);
	border-top: 1px solid rgba(148, 163, 184, 0.25);
}
.tvw-start-ueber-teaser__cta {
	margin: 0;
}
.tvw-start-ueber-teaser__cta-link {
	display: inline-block;
	font-weight: 600;
	font-size: 0.95rem;
	color: #0f4c81;
	text-decoration: none;
	border-radius: 6px;
	padding: 0.15rem 0;
}
.tvw-start-ueber-teaser__cta-link:hover {
	text-decoration: underline;
	color: #0c3d66;
}
@media (min-width: 768px) {
	.tvw-start-ueber-teaser__banners {
		grid-template-columns: repeat(3, 1fr);
		gap: 0.65rem;
	}
	.tvw-start-ueber-teaser__title {
		font-size: 1.65rem;
	}
	.tvw-start-ueber-teaser__subtitle {
		font-size: 1.05rem;
	}
}
@media (max-width: 767px) {
	.tvw-start-ueber-teaser__inner {
		padding: 16px 16px 12px 16px;
	}
}

/* ========== Startseite: So funktioniert's (H2 + 2 Spalten à 3 Schritte) ========== */
.tvw-start-so-funktionierts {
	margin: 0 0 2rem;
}
.tvw-start-so-funktionierts__title {
	margin: 0 0 0.5em;
	font-size: 1.5rem;
	color: #1f2937;
}
.tvw-start-so-funktionierts__subtitle {
	margin: 0 0 1.5rem;
	font-size: 1rem;
	color: #1f2937;
	line-height: 1.5;
}
.tvw-start-so-funktionierts__columns {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}
.tvw-start-so-funktionierts__col {
	flex: 1;
	min-width: 280px;
}
.tvw-start-so-funktionierts__step {
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
	border: 1px solid #f0f0f0;
}
.tvw-start-so-funktionierts__step-heading {
	margin: 0 0 0.4em;
	font-size: 1rem;
	font-weight: 600;
	color: #202A34;
}
.tvw-start-so-funktionierts__step-heading::before {
	content: "» ";
}
.tvw-start-so-funktionierts__step-text {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #4b5563;
}

/* Mobile: Spalten untereinander */
@media (max-width: 640px) {
	.tvw-start-so-funktionierts__columns {
		flex-direction: column;
		gap: 0;
	}
	.tvw-start-so-funktionierts__col {
		min-width: 100%;
	}
}

/* ========== Startseite: FAQ (gleicher Stil wie So funktioniert's, Accordions) ========== */
.tvw-start-faq {
	margin: 0 0 2rem;
}
.tvw-start-faq__title {
	margin: 0 0 0.5em;
	font-size: 1.5rem;
	color: #1f2937;
}
.tvw-start-faq__subtitle {
	margin: 0 0 1.5rem;
	font-size: 1rem;
	color: #1f2937;
	line-height: 1.5;
}
.tvw-start-faq__columns {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}
.tvw-start-faq__col {
	flex: 1;
	min-width: 280px;
}
.tvw-start-faq__item {
	margin-bottom: 1rem;
	padding: 0;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
	border: 1px solid #f0f0f0;
	overflow: hidden;
}
.tvw-start-faq__question {
	margin: 0;
	padding: 1rem;
	font-size: 1rem;
	font-weight: 600;
	color: #202A34;
	cursor: pointer;
	list-style: none;
	display: block;
}
.tvw-start-faq__question::-webkit-details-marker { display: none; }
.tvw-start-faq__question::before {
	content: "» ";
}
.tvw-start-faq__question::after {
	content: " +";
	float: right;
	font-weight: 400;
	opacity: 0.6;
}
.tvw-start-faq__item[open] .tvw-start-faq__question::after {
	content: " −";
}
.tvw-start-faq__answer {
	padding: 0 1rem 1rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #4b5563;
}
.tvw-start-faq__answer p { margin: 0 0 0.5em; }
.tvw-start-faq__answer p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
	.tvw-start-faq__columns { flex-direction: column; gap: 0; }
	.tvw-start-faq__col { min-width: 100%; }
}

/* ========== Startseite: Produktkategorie-Kacheln (6 pro Reihe; 2 Reihen Standard, optional 3.) ========== */
/* Bilder quadratisch (z. B. 500×500), aspect-ratio 1:1 – Höhe ergibt sich aus Spaltenbreite */
.tvw-start-categories-wrap {
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -0.65rem;
	padding: 0 1rem;
	box-sizing: border-box;
}
.tvw-start-categories__heading {
	margin: 0 0 0.45rem;
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.3;
	color: #1f2937;
	text-align: center;
}
@media (min-width: 783px) {
	.tvw-start-categories__heading {
		font-size: 1.5rem;
		text-align: left;
	}
}
.tvw-start-categories {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
	margin: 0 0 2rem;
}
.tvw-start-category {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	box-shadow:   0 1px 3px rgba(0, 0, 0, 0.12),
  				0 8px 24px rgba(0, 0, 0, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tvw-start-category:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}
.tvw-start-category__image {
	aspect-ratio: 1 / 1;
	width: 100%;
	background-color: #9A8D84;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 0;
	transition: transform 0.3s ease;
}
.tvw-start-category:hover .tvw-start-category__image {
	transform: scale(1.03);
}
.tvw-start-category__placeholder {
	font-size: 0.75rem;
	color: #9ca3af;
	text-align: center;
	padding: 0.5em;
}

/* Tablet: 4 Spalten */
@media (max-width: 1024px) {
	.tvw-start-categories {
		grid-template-columns: repeat(4, 1fr);
	}
}
/* Mobile: 2 Spalten */
@media (max-width: 640px) {
	.tvw-start-categories {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

/* ========== Vereins-Start: B2B-Layout-Kasten vs. B2C-Full-Bleed (tvw-b2b-global-layout-surface) ========== */
body.home .site-content > .ast-container,
body.home .ast-page-builder-template .site-content > .ast-container,
body.home .ast-separate-container .site-content > .ast-container,
body.home .ast-box-layout.ast-plain-container .site-content,
body.home .ast-padded-layout.ast-plain-container .site-content {
	background: transparent !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

body.home .site-content,
body.home .site-content #primary,
body.home .site-content .ast-container {
	overflow-x: visible !important;
}

/* Sechs-Kacheln: auf schmalen Screens umbrechen (B2C nutzt hier Desktop-Flex) */
@media (max-width: 921px) {
	.tvw-start-six-tiles {
		flex-wrap: wrap;
	}
	.tvw-start-six-tile {
		flex: 1 1 50%;
		min-width: 0;
		box-sizing: border-box;
		border: 1px solid rgba(0, 0, 0, 0.06);
	}
	.tvw-start-six-tile:first-child {
		border-radius: 6px 0 0 0;
	}
	.tvw-start-six-tile:nth-child(2) {
		border-radius: 0 6px 0 0;
	}
	.tvw-start-six-tile:nth-child(3) {
		border-radius: 0 0 0 6px;
	}
	.tvw-start-six-tile:nth-child(4) {
		border-radius: 0 0 6px 0;
	}
}

/* Redundanten WP-Seitentitel ausblenden (H1 kommt aus dem Hero) */
body.home article.page .entry-header {
	display: none !important;
}