/*
 * Lokalbüro Relaunch, Phase 3: Startseite ([lb_startseite]) und Mega-Menü.
 * Stand: 25.09.2026
 */

.lb-home { display: grid; gap: 28px; font-family: var(--lb-sans); color: var(--lb-text); }
.lb-home a { color: inherit; text-decoration: none; }
.lb-home figure { margin: 0; overflow: hidden; background: var(--lb-stone); }
.lb-home figure img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lb-home a:hover figure img { transform: scale(1.03); }
.lb-home a:focus-visible { outline: 2px solid var(--lb-red); outline-offset: 3px; }
.lb-kicker { display: block; font: 700 11.5px/1.2 var(--lb-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--lb-red); }
.lb-meta { display: block; font: 500 13px/1.3 var(--lb-sans); color: var(--lb-muted); }
.lb-teaser { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--lb-muted); }
.lb-noimg { display: block; width: 100%; height: 100%; min-height: 60px; background: linear-gradient(135deg, var(--lb-stone), #E6E8E5); }

/* 1. Aufmacher: Bild mit Titel wie bisher im Slider */
.lb-hero a { position: relative; display: block; background: var(--lb-ink); }
.lb-hero-img { aspect-ratio: 16 / 9; }
.lb-hero-text {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 80px 28px 24px; display: grid; gap: 10px;
	background: linear-gradient(0deg, rgba(8, 12, 17, .92) 0%, rgba(8, 12, 17, .6) 60%, rgba(8, 12, 17, 0) 100%);
}
.lb-hero .lb-kicker { color: #F4C3CB; }
html body .lb-hero .lb-hero-title {
	margin: 0 !important; padding: 0 !important;
	color: #FFFFFF !important;
	font-size: clamp(26px, 3vw, 38px) !important; line-height: 1.1 !important;
}
.lb-hero .lb-teaser { color: #D8DEE4; font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 62ch; }
.lb-hero .lb-meta { color: #B9C2CC; }
.lb-hero a:hover .lb-hero-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.lb-hero--noimg .lb-hero-text { position: static; padding-top: 36px; }

/* 2. Zwei Karten */
.lb-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.lb-card a { display: grid; gap: 8px; align-content: start; height: 100%; background: var(--lb-paper); padding-bottom: 18px; }
.lb-card-img { aspect-ratio: 16 / 9; margin-bottom: 6px !important; }
.lb-card .lb-kicker, .lb-card .lb-card-title, .lb-card .lb-teaser, .lb-card .lb-meta { padding: 0 18px; }
html body .lb-card .lb-card-title { margin: 0 !important; padding-bottom: 0 !important; font-size: 22px !important; line-height: 1.18 !important; }
.lb-card .lb-teaser { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lb-card a:hover .lb-card-title { color: var(--lb-red); }

/* 3. Ressort-Raster */
.lb-clusters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lb-cluster { background: var(--lb-paper); padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 10px; border-top: 2px solid var(--lb-text); }
html body .lb-cluster .lb-cluster-head { margin: 0 !important; padding: 0 !important; font: 700 12px/1.2 var(--lb-sans) !important; letter-spacing: .14em !important; text-transform: uppercase !important; }
.lb-cluster-head a { color: var(--lb-red) !important; }
.lb-cluster-lead { display: grid; gap: 6px; }
.lb-cluster-img { aspect-ratio: 16 / 9; }
html body .lb-cluster-lead h3 { margin: 4px 0 0 !important; padding: 0 !important; font-size: 18px !important; line-height: 1.22 !important; }
.lb-cluster-lead:hover h3 { color: var(--lb-red); }
.lb-cluster-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.lb-cluster-list li { margin: 0 !important; padding: 9px 0 !important; border-top: 1px solid var(--lb-line); list-style: none !important; }
.lb-cluster-list li::before { display: none !important; }
.lb-cluster-list a { display: block; font: 600 14.5px/1.35 var(--lb-sans); color: var(--lb-text); }
.lb-cluster-list .lb-meta { font-size: 12px; font-weight: 500; margin-bottom: 2px; }
.lb-cluster-list a:hover { color: var(--lb-red); }
html body .lb-cluster .lb-cluster-more { align-self: flex-start; width: auto !important; max-width: 100%; white-space: nowrap; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px !important; border-radius: 999px; background: #C4122F !important; color: #fff !important; font: 600 13px/1.2 var(--lb-sans) !important; text-decoration: none !important; transition: background .15s; }
html body .lb-cluster .lb-cluster-more::after { content: "→"; }
html body .lb-cluster .lb-cluster-more:hover { background: #A30E27 !important; color: #fff !important; }
html body .lb-cluster .lb-cluster-more:focus-visible { outline: 2px solid var(--lb-text); outline-offset: 3px; }

@media (max-width: 1100px) {
	.lb-clusters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.lb-duo, .lb-clusters { grid-template-columns: 1fr; }
	.lb-hero-text { position: static; padding: 18px; }
	.lb-hero .lb-teaser { -webkit-line-clamp: 3; }
}
@media (prefers-reduced-motion: reduce) {
	.lb-home figure img { transition: none; }
	.lb-home a:hover figure img { transform: none; }
}

/* ---------- Mega-Menü (Extra "mega-featured-2" und "Mehr"-Spalten) ---------- */
html body #et-navigation li.mega-menu > ul.sub-menu,
html body #et-navigation li.mega-menu > ul.sub-menu[style] {
	border-top: 3px solid var(--lb-red) !important;
	border-top-color: var(--lb-red) !important;
	box-shadow: 0 18px 40px rgba(8, 12, 17, .18) !important;
}
html body #et-navigation .mega-menu .sub-menu .title,
html body #et-navigation .mega-menu-cols > ul > li > a {
	font: 700 11.5px/1.2 var(--lb-sans) !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: var(--lb-red) !important;
}
html body #et-navigation .mega-menu .featured-post h2,
html body #et-navigation .mega-menu .recent-post h3,
html body #et-navigation .mega-menu .recent-post h3 a {
	font-family: var(--lb-display) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--lb-text) !important;
	line-height: 1.25 !important;
}
html body #et-navigation .mega-menu .featured-post h2 { font-size: 17px !important; }
html body #et-navigation .mega-menu .recent-post h3 { font-size: 15px !important; }
html body #et-navigation .mega-menu .post-meta,
html body #et-navigation .mega-menu .post-meta a { font: 500 12px/1.3 var(--lb-sans) !important; color: var(--lb-muted) !important; text-transform: none !important; }
html body #et-navigation .mega-menu-cols > ul > li > ul > li > a {
	font: 500 14.5px/1.3 var(--lb-sans) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--lb-text) !important;
}
html body #et-navigation .mega-menu-cols > ul > li > ul > li > a:hover { color: var(--lb-red) !important; }
html body #et-navigation > ul > li { margin: 0 9px !important; }

html body .lb-cluster .lb-cluster-head a { font: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; }
/* Mega-Menü: volle Breite, helles Panel, 3 Spalten (überschreibt alte Regel ".nav li ul { width: 290px }") */
html body #et-navigation li.mega-menu > ul.sub-menu,
html body #et-navigation li.mega-menu > ul.sub-menu[style] {
	width: 100% !important;
	left: 0 !important;
	right: 0 !important;
	background: var(--lb-paper) !important;
	padding: 24px 28px !important;
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	box-sizing: border-box;
}
html body #et-navigation li.mega-menu:not(:hover):not(:focus-within) > ul.sub-menu { display: none !important; }
html body #et-navigation li.mega-menu > ul.sub-menu > li {
	width: auto !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
}
html body #et-navigation li.mega-menu .sub-menu a { color: var(--lb-text) !important; background: transparent !important; }
html body #et-navigation .mega-menu .featured-post { display: grid; gap: 8px; }
html body #et-navigation .mega-menu .featured-post .featured-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--lb-stone); }
html body #et-navigation .mega-menu .featured-post img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body #et-navigation .mega-menu .sub-menu .title { margin: 0 0 10px !important; padding: 0 !important; }
html body #et-navigation .mega-menu .recent-list { position: static !important; display: grid !important; gap: 0; padding: 0 !important; margin: 0 !important; width: auto !important; box-shadow: none !important; border: 0 !important; background: transparent !important; opacity: 1 !important; visibility: visible !important; }
html body #et-navigation .mega-menu .recent-post { padding: 10px 0 !important; border-top: 1px solid var(--lb-line) !important; width: auto !important; }
html body #et-navigation .mega-menu .recent-post .post-content { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: start; }
html body #et-navigation .mega-menu .recent-post img { width: 56px; height: 56px; object-fit: cover; }
html body #et-navigation .mega-menu .recent-post h3 { margin: 0 0 4px !important; padding: 0 !important; }

/* "Mehr": Spalten mit Unterpunkten */
html body #et-navigation li.mega-menu-cols > ul.sub-menu > li > a { padding: 0 0 10px !important; pointer-events: none; }
html body #et-navigation li.mega-menu-cols > ul.sub-menu > li > ul.sub-menu {
	position: static !important; display: grid !important; gap: 2px;
	width: auto !important; padding: 0 !important; margin: 0 !important;
	box-shadow: none !important; border: 0 !important; background: transparent !important;
	opacity: 1 !important; visibility: visible !important;
}
html body #et-navigation li.mega-menu-cols > ul.sub-menu > li > ul.sub-menu > li { padding: 0 !important; width: auto !important; }
html body #et-navigation li.mega-menu-cols > ul.sub-menu > li > ul.sub-menu > li > a { display: block; padding: 7px 0 !important; border-top: 1px solid var(--lb-line); }
html body #et-navigation li.mega-menu-cols > ul.sub-menu > li > a:after,
html body #et-navigation li.mega-menu-cols > ul.sub-menu > li > ul.sub-menu > li > a:after { display: none !important; }
/* Startseiten-Container ohne Divi-Innenabstände (sonst auf dem Handy seitlich versetzt) */
html body #main-content #content-area .et_pb_section:has(.lb-home),
html body #main-content #content-area .et_pb_row:has(.lb-home),
html body #main-content #content-area .et_pb_column:has(.lb-home),
html body #main-content #content-area .et_pb_code:has(.lb-home),
html body #main-content #content-area .et_pb_code:has(.lb-home) .et_pb_code_inner {
	width: 100% !important; max-width: 100% !important;
	margin: 0 !important; padding: 0 !important;
	left: auto !important; right: auto !important; transform: none !important;
	background: transparent !important; box-shadow: none !important;
}
/* "Alle Rubriken anzeigen" (25.09.2026) */
.lb-cluster--more[hidden] { display: none !important; }
.lb-cluster--in { animation: lbFadeUp .35s ease-out both; }
@keyframes lbFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lb-cluster--in { animation: none; } }
.lb-clusters-more { display: flex; justify-content: center; margin-top: 4px; }
.lb-clusters-more[hidden] { display: none !important; }
html body .lb-more-btn {
	display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
	background: var(--lb-red) !important; color: #FFFFFF !important; border: 0 !important; border-radius: 999px !important;
	padding: 13px 26px !important; font: 600 15px/1 var(--lb-sans) !important; text-transform: none !important; letter-spacing: 0 !important;
}
html body .lb-more-btn::after { content: "▾"; font-size: 13px; }
html body .lb-more-btn:hover { background: #A30E27 !important; }
html body .lb-more-btn:focus-visible { outline: 2px solid var(--lb-text); outline-offset: 3px; }