/* ==========================================================================
   TB Homepage – Styling v2
   --------------------------------------------------------------------------
   Geladen vom Plugin nur auf is_front_page() (siehe class-homepage-styling.php).

   Sections:
   1. Hero v2  (`.tb-hero`)              — komplettes Styling, Mobile-First
   2. Beliebte Kategorien (Mobile-Polish, `.mcb-section-562e50cca`)
   3. Beliebte T-Shirts Karussell        (`.mcb-section-d2c8a9558`)
   4. Icon-Boxen-Section                 (`.mcb-section-b83a6d59e`)
   5. Final-CTA                          (`.mcb-section-a0f54db19`)

   ⚠️  Section-IDs `.mcb-section-XXXXX` sind von BeTheme auto-generiert.
       Falls eine Section im Page-Builder neu gespeichert wird, kann die ID
       sich ändern. Dann hier anpassen.
   ========================================================================== */


/* ==========================================================================
   1. HERO v2 – komplettes Styling (Mobile-First, Desktop-Override)
   --------------------------------------------------------------------------
   Layout-Logik:
   • Mobile: Bild oben, Text + USPs + CTA + Trust-Strip darunter (vertikal)
   • Desktop ≥769px: 2-Spalten-Grid, Bild rechts, Text links

   Edge-to-edge Section-Wrapper (BeTheme-Padding raus) auf Mobile.
   ========================================================================== */

/* Edge-to-edge: BeTheme-Section-Wrapper resetten (gilt für alle Viewports,
   aber nur auf der Hero-Section). Falls die Section-ID sich ändert, hier
   anpassen oder im Page-Builder eine Custom-Class setzen. */
body.home .mcb-section-5fjjnuf .section_wrapper,
body.home .mcb-section-inner-5fjjnuf {
	padding: 0 !important;
	max-width: none !important;
	width: 100% !important;
}
body.home .mcb-section-5fjjnuf .wrap,
body.home .mcb-section-5fjjnuf .mcb-wrap-inner,
body.home .mcb-section-5fjjnuf .column,
body.home .mcb-section-5fjjnuf .mcb-column-inner,
body.home .mcb-section-5fjjnuf .desc {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}

/* Hero base – Mobile-First Defaults */
body.home .tb-hero {
	background: linear-gradient(180deg, #f6f9fc 0%, #ffffff 100%) !important;
	padding: 8px 20px 0 !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
}
body.home .tb-hero *,
body.home .tb-hero *::before,
body.home .tb-hero *::after {
	box-sizing: border-box !important;
}

body.home .tb-hero__inner {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	max-width: 560px !important;
	margin: 0 auto !important;
	align-items: stretch !important;
	text-align: center !important;
	min-height: 0 !important;
}

/* Bild: oben auf Mobile */
body.home .tb-hero__media {
	order: 1 !important;
	margin: 0 auto 12px !important;
	display: flex !important;
	justify-content: center !important;
	width: 100% !important;
}
body.home .tb-hero__image {
	max-height: 340px !important;
	width: auto !important;
	max-width: 82% !important;
	height: auto !important;
	filter: drop-shadow(0 22px 28px rgba(15, 18, 22, .06)) !important;
}

body.home .tb-hero__content {
	order: 2 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
	align-items: center !important;
	width: 100% !important;
}

/* Alte Hero-Bestandteile, die wir in v2 ausblenden (falls noch im Markup) */
body.home .tb-hero__eyebrow,
body.home .tb-hero__colors,
body.home .tb-hero__rating {
	display: none !important;
}

/* Headline – einheitliche Größe, "bedrucken" als blauer Inline-Akzent */
body.home .tb-hero__title {
	font-size: 30px !important;
	line-height: 1.15 !important;
	font-weight: 800 !important;
	letter-spacing: -.02em !important;
	color: #0f1216 !important;
	margin: 0 !important;
	text-align: center !important;
	width: 100% !important;
}
body.home .tb-hero__title em {
	font-style: normal !important;
	color: #0089f7 !important;
	display: inline !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	letter-spacing: inherit !important;
	margin: 0 !important;
}

body.home .tb-hero__sub {
	font-size: 16px !important;
	line-height: 1.4 !important;
	color: #3a414a !important;
	margin: 10px 0 0 !important;
	max-width: none !important;
	text-align: center !important;
	font-weight: 400 !important;
}

/* USP-Strip (3 Spalten, Icon + Text) */
body.home .tb-hero__usps {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 8px !important;
	width: 100% !important;
	margin: 18px 0 8px !important;
	padding: 0 !important;
}
body.home .tb-hero__usp {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 8px !important;
	text-align: center !important;
	min-width: 0 !important;
}
body.home .tb-hero__usp-icon {
	width: 38px !important;
	height: 38px !important;
	border-radius: 50% !important;
	background: rgba(0, 137, 247, .10) !important;
	color: #0089f7 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}
body.home .tb-hero__usp-icon svg {
	width: 20px !important;
	height: 20px !important;
	stroke-width: 2 !important;
}
body.home .tb-hero__usp-text {
	font-size: 12.5px !important;
	line-height: 1.25 !important;
	color: #3a414a !important;
	font-weight: 500 !important;
}

/* CTA-Block: Primary full-width Button + darunter Secondary Link */
body.home .tb-hero__cta-row {
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
	width: 100% !important;
	margin-top: 10px !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
}
body.home .tb-hero__cta {
	width: 100% !important;
	justify-content: center !important;
	padding: 18px 26px !important;
	font-size: 18px !important;
	border-radius: 14px !important;
	background: #0d4ee0 !important;
	box-shadow: 0 8px 22px rgba(13, 78, 224, .32) !important;
	font-weight: 700 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	color: #fff !important;
	text-decoration: none !important;
	transition: background-color .15s, transform .15s, box-shadow .15s !important;
}
body.home .tb-hero__cta:hover {
	background: #1a5be8 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 10px 26px rgba(13, 78, 224, .38) !important;
}
body.home .tb-hero__cta:active {
	transform: translateY(0) !important;
}
body.home .tb-hero__cta svg {
	transition: transform .15s !important;
}
body.home .tb-hero__cta:hover svg {
	transform: translateX(3px) !important;
}
body.home .tb-hero__cta-secondary {
	display: inline-flex !important;
	justify-content: center !important;
	color: #0d4ee0 !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	text-decoration: underline !important;
	text-underline-offset: 5px !important;
	text-decoration-color: #0d4ee0 !important;
	margin: 2px auto 0 !important;
}

/* Trust-Strip: 3 Items in hellgrauem Streifen, edge-to-edge auf Mobile */
body.home .tb-hero__trust {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 4px !important;
	background: #f5f7fa !important;
	padding: 14px 10px !important;
	margin: 18px -20px 0 !important;
	width: calc(100% + 40px) !important;
	border-top: 1px solid #eef1f5 !important;
	max-width: none !important;
}
body.home .tb-hero__trust-item {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 4px !important;
	text-align: center !important;
	padding: 0 2px !important;
	min-width: 0 !important;
	color: inherit !important;
	text-decoration: none !important;
	transition: transform .15s ease, opacity .15s ease !important;
}
body.home a.tb-hero__trust-item:hover {
	transform: translateY(-1px) !important;
}
body.home a.tb-hero__trust-item:hover .tb-hero__trust-icon {
	transform: scale(1.1) !important;
	transition: transform .15s ease !important;
}
body.home .tb-hero__trust-icon {
	width: 22px !important;
	height: 22px !important;
	color: #6b7280 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Pro Trust-Item eine eigene Icon-Farbe (harmonische Triade) */
body.home .tb-hero__trust-item--rating .tb-hero__trust-icon {
	color: #f59e0b !important;          /* Amber – gefüllter Stern */
}
body.home .tb-hero__trust-item--security .tb-hero__trust-icon {
	color: #10b981 !important;          /* Emerald – Schloss */
}
body.home .tb-hero__trust-item--support .tb-hero__trust-icon {
	color: #0089f7 !important;          /* Brand-Blau – Headset */
}
body.home .tb-hero__trust-icon svg {
	width: 20px !important;
	height: 20px !important;
	stroke-width: 1.8 !important;
}
body.home .tb-hero__trust-title {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #0f1216 !important;
	line-height: 1.2 !important;
}
body.home .tb-hero__trust-sub {
	font-size: 10.5px !important;
	color: #6b7280 !important;
	line-height: 1.3 !important;
	margin-top: 1px !important;
}

/* === Desktop Override (≥769px): 2-Spalten-Grid, Bild rechts === */
@media (min-width: 769px) {
	body.home .tb-hero {
		padding: 48px 40px 32px !important;
	}
	body.home .tb-hero__inner {
		flex-direction: row !important;
		max-width: 1200px !important;
		gap: 48px !important;
		align-items: center !important;
		text-align: left !important;
	}
	body.home .tb-hero__media {
		order: 2 !important;
		flex: 1 !important;
		margin: 0 !important;
	}
	body.home .tb-hero__image {
		max-height: 560px !important;
		max-width: 100% !important;
	}
	body.home .tb-hero__content {
		order: 1 !important;
		flex: 1 !important;
		text-align: left !important;
		align-items: flex-start !important;
	}
	body.home .tb-hero__title {
		font-size: 52px !important;
		text-align: left !important;
	}
	body.home .tb-hero__title em {
		font-size: inherit !important;
	}
	body.home .tb-hero__sub {
		text-align: left !important;
	}
	body.home .tb-hero__usps {
		grid-template-columns: repeat(3, auto) !important;
		justify-content: flex-start !important;
		gap: 24px !important;
	}
	body.home .tb-hero__usp {
		flex-direction: row !important;
	}
	body.home .tb-hero__usp-text {
		font-size: 14px !important;
		text-align: left !important;
	}
	body.home .tb-hero__cta-row {
		flex-direction: row !important;
		align-items: center !important;
		gap: 18px !important;
		justify-content: flex-start !important;
	}
	body.home .tb-hero__cta {
		width: auto !important;
	}
	body.home .tb-hero__trust {
		margin: 24px 0 0 !important;
		width: 100% !important;
		border-radius: 14px !important;
		padding: 18px 14px !important;
		border-top: none !important;
	}
	body.home .tb-hero__trust-title {
		font-size: 14px !important;
	}
	body.home .tb-hero__trust-sub {
		font-size: 12px !important;
	}
}


/* ==========================================================================
   2.–5. Mobile-Polish für die anderen Homepage-Sections
   --------------------------------------------------------------------------
   Geltungsbereich: ausschließlich `@media (max-width: 767px)`
   Desktop-Layout bleibt unangetastet.
   ========================================================================== */

@media (max-width: 767px) {

	/* 2. Beliebte Kategorien ============================================
	   Vorher: Cards 1/Reihe, ungleiche Höhen (348px–624px), Text liegt
	   ohne Overlay über Models-Gesichtern – schlechte Lesbarkeit.
	   Fix: Höhen via aspect-ratio normalisieren, Bottom-Gradient für
	   Lesbarkeit, abgerundete Ecken, Text+Button auf den unteren Drittel
	   absolut positionieren. */

	body.home .mcb-section-562e50cca .mcb-wrap-inner[class*="mcb-wrap-inner-"] {
		position: relative !important;
		aspect-ratio: 4 / 5 !important;
		height: auto !important;
		min-height: 0 !important;
		border-radius: 16px !important;
		overflow: hidden !important;
		margin-bottom: 14px !important;
		background-size: cover !important;
		background-position: center !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-end !important;
		padding: 0 0 22px !important;
	}

	/* Section-Heading „Beliebte Kategorien" NICHT als Card behandeln */
	body.home .mcb-section-562e50cca .mcb-wrap.mcb-wrap-8b485d0ef .mcb-wrap-inner {
		aspect-ratio: auto !important;
		display: block !important;
		background: none !important;
		border-radius: 0 !important;
		min-height: 0 !important;
		padding: 0 !important;
	}

	/* Gradient-Overlay (Fokus auf untere 2/3 für Lesbarkeit über hellen Fotos) */
	body.home .mcb-section-562e50cca .mcb-wrap:not(.mcb-wrap-8b485d0ef) .mcb-wrap-inner::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .45) 65%, rgba(0, 0, 0, .78) 100%);
		pointer-events: none;
		z-index: 1;
		border-radius: inherit;
	}

	/* Inhalte über Overlay legen + BeTheme-Float-Reset */
	body.home .mcb-section-562e50cca .mcb-wrap:not(.mcb-wrap-8b485d0ef) .mcb-wrap-inner > * {
		position: relative;
		z-index: 2;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		flex-shrink: 0 !important;
		text-align: center !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	body.home .mcb-section-562e50cca .mcb-wrap:not(.mcb-wrap-8b485d0ef) .mcb-wrap-background-overlay {
		display: none !important;
	}

	/* Headlines + Sub-Text auf den Cards: weiß, Schatten, ZENTRIERT. */
	body.home .mcb-section-562e50cca .mcb-wrap:not(.mcb-wrap-8b485d0ef) h1,
	body.home .mcb-section-562e50cca .mcb-wrap:not(.mcb-wrap-8b485d0ef) h2,
	body.home .mcb-section-562e50cca .mcb-wrap:not(.mcb-wrap-8b485d0ef) h3,
	body.home .mcb-section-562e50cca .mcb-wrap:not(.mcb-wrap-8b485d0ef) h4,
	body.home .mcb-section-562e50cca .mcb-wrap:not(.mcb-wrap-8b485d0ef) h5,
	body.home .mcb-section-562e50cca .mcb-wrap:not(.mcb-wrap-8b485d0ef) h6,
	body.home .mcb-section-562e50cca .mcb-wrap:not(.mcb-wrap-8b485d0ef) .title {
		color: #fff !important;
		text-shadow: 0 2px 8px rgba(0, 0, 0, .55) !important;
		text-align: center !important;
		margin-bottom: 4px !important;
	}

	body.home .mcb-section-562e50cca .mcb-wrap:not(.mcb-wrap-8b485d0ef) p,
	body.home .mcb-section-562e50cca .mcb-wrap:not(.mcb-wrap-8b485d0ef) .button_align {
		color: #fff !important;
		text-shadow: 0 2px 6px rgba(0, 0, 0, .55) !important;
		text-align: center !important;
		margin-bottom: 12px !important;
	}

	/* Button: zentriert, nicht volle Breite */
	body.home .mcb-section-562e50cca .mcb-wrap:not(.mcb-wrap-8b485d0ef) .button {
		margin: 0 auto !important;
		display: inline-block !important;
	}
	body.home .mcb-section-562e50cca .mcb-wrap:not(.mcb-wrap-8b485d0ef) .button_align {
		display: block !important;
	}

	/* 3. Beliebte T-Shirts → horizontales Karussell ==================== */
	body.home .mcb-section-d2c8a9558 ul.products {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory !important;
		scroll-padding: 16px !important;
		gap: 12px !important;
		padding: 0 16px 12px !important;
		margin: 0 -20px !important;
		-webkit-overflow-scrolling: touch;
	}

	body.home .mcb-section-d2c8a9558 ul.products::-webkit-scrollbar {
		display: none;
	}

	body.home .mcb-section-d2c8a9558 ul.products li.product {
		position: static !important;
		transform: none !important;
		left: auto !important;
		top: auto !important;
		flex: 0 0 70% !important;
		width: 70% !important;
		max-width: 70% !important;
		margin: 0 !important;
		scroll-snap-align: start !important;
	}

	/* 4. Icon-Boxen-Section → "Apple-Style" Premium Feature ============ */
	body.home .mcb-section-b83a6d59e .mfn-icon-box {
		background: transparent !important;
		padding: 0 16px !important;
		margin: 0 0 36px !important;
		display: block !important;
		text-align: center !important;
		grid-template-columns: none !important;
		gap: 0 !important;
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body.home .mcb-section-b83a6d59e .mfn-icon-box .icon-wrapper {
		width: 80px !important;
		height: 80px !important;
		margin: 0 auto 18px !important;
		background: rgba(0, 137, 247, 0.10) !important;
		border-radius: 50% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex: none !important;
		padding: 0 !important;
	}

	body.home .mcb-section-b83a6d59e .mfn-icon-box .icon-wrapper img {
		width: 44px !important;
		height: 44px !important;
		object-fit: contain !important;
	}

	body.home .mcb-section-b83a6d59e .mfn-icon-box .desc-wrapper {
		text-align: center !important;
		max-width: 340px !important;
		margin: 0 auto !important;
		width: auto !important;
	}

	body.home .mcb-section-b83a6d59e .mfn-icon-box .title,
	body.home .mcb-section-b83a6d59e .mfn-icon-box h1,
	body.home .mcb-section-b83a6d59e .mfn-icon-box h2,
	body.home .mcb-section-b83a6d59e .mfn-icon-box h3,
	body.home .mcb-section-b83a6d59e .mfn-icon-box h4,
	body.home .mcb-section-b83a6d59e .mfn-icon-box h5,
	body.home .mcb-section-b83a6d59e .mfn-icon-box h6 {
		font-size: 18px !important;
		font-weight: 700 !important;
		text-align: center !important;
		margin: 0 0 8px !important;
		color: #0f1216 !important;
		line-height: 1.25 !important;
	}

	body.home .mcb-section-b83a6d59e .mfn-icon-box .desc,
	body.home .mcb-section-b83a6d59e .mfn-icon-box p {
		font-size: 14px !important;
		line-height: 1.55 !important;
		text-align: center !important;
		color: #5a6270 !important;
		margin: 0 !important;
	}

	/* 5. Final-CTA „Bereit, dein T-Shirt zu gestalten?" ============= */
	body.home .mcb-section-a0f54db19 .section_wrapper,
	body.home .mcb-section-inner-a0f54db19 {
		padding: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}

	body.home .mcb-section-a0f54db19 .wrap,
	body.home .mcb-section-a0f54db19 .mcb-wrap-inner,
	body.home .mcb-section-a0f54db19 .column,
	body.home .mcb-section-a0f54db19 .mcb-column-inner {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
	}

	body.home .mcb-section-a0f54db19 .desc {
		padding: 36px 24px !important;
	}
}