/* Generated from legacy.css by tools/split-legacy.py; keep source order. */
/* =========================================================================
 * v0.3.0 — Mobile Drawer Conversion-Stack & Akkordeon-Submenüs
 * Top-Angebot · Best-Price-Trust · Telefon · 5 Top-Items mit details/summary
 * ========================================================================= */

/* Conversion-Stack ganz oben im Drawer */
.mobile-menu-conversion {
	padding: 22px;
	border-bottom: 1px solid var(--border-soft, #f2ece0);
	background: linear-gradient(180deg, rgba(167,144,196,0.04) 0%, rgba(255,255,255,0) 100%);
}

.mobile-conv-card {
	display: block;
	background: var(--wp--preset--color--ink, #1b1a1a);
	color: #ffffff;
	padding: 1.25rem 1.4rem;
	border-radius: 8px;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 4px 14px rgba(167,144,196,0.18);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Lila Akzent-Gradient rechts oben — z-index: 0 zwingt es UNTER den Inhalt
 * (sonst überdeckte es vorher das rechte Drittel des Titels und machte den
 * Text unlesbar). Der Card-Inhalt hat dank isolation:isolate auf der Karte
 * + z-index:1 auf den Children einen sauberen Stacking-Context. */
.mobile-conv-card::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 60%;
	height: 100%;
	background: linear-gradient(135deg, transparent 0%, rgba(167,144,196,0.20) 100%);
	pointer-events: none;
	z-index: 0;
}

.mobile-conv-card > * {
	position: relative;
	z-index: 1;
}

.mobile-conv-card:hover,
.mobile-conv-card:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(167,144,196,0.28);
	color: #ffffff;
}

.mobile-conv-eyebrow {
	font-family: var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-purple-text, #a790c4);
	margin-bottom: 0.5rem;
}

/* Explizite Farbe (vorher nur per inheritance von .mobile-conv-card) — schützt
 * vor globalen Resets wie `:where(.wp-site-blocks) > *` die das color-Inheritance
 * vom Card-Anker-Element brechen können. */
.mobile-conv-title {
	font-family: var(--wp--preset--font-family--spectral, 'Spectral', Georgia, serif);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.3;
	color: #ffffff;
	margin: 0 0 1rem;
	letter-spacing: -0.005em;
}

.mobile-conv-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--c-purple-ink, #a790c4);
	color: #ffffff;
	padding: 0.65rem 1.1rem;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.mobile-conv-trust {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.85rem;
	font-size: 0.78rem;
	color: var(--wp--preset--color--ash, #6b6967);
	padding: 0 0.25rem;
}

.mobile-conv-trust svg {
	color: #2a8a3c;
	flex-shrink: 0;
}

/* =========================================================================
 * v0.3.6 — Mobile-Drawer Top-Level-Items: einheitlich, fullscreen-tauglich
 *
 * Vorher (v0.3.0-0.3.5) gab es Konflikte zwischen `.mobile-menu-nav > a`
 * (italic Spectral 21px) und `.mobile-flat` (Sans-Serif 1rem) — Items hatten
 * unterschiedliche Schriftgrößen, der details-summary-SVG-Caret war ohne
 * Größenbegrenzung und wurde als Riesen-Pfeil gerendert.
 *
 * Jetzt: ein einheitliches Item-Design für Akkordeon-Header (mobile-acc
 * summary) UND Flat-Links (mobile-flat). Selbe Schriftgröße, selbe min-height,
 * selbe Tap-Target-Größe (≥56px für Touch-Accessibility-Standards).
 * ========================================================================= */

/* Gemeinsamer Top-Level-Item-Style (sowohl summary als auch mobile-flat) */
.mobile-acc summary,
.mobile-flat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	padding: 14px 22px;
	font-family: 'Spectral', Georgia, serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink, #2b2826);
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.15s ease, color 0.15s ease;
}

/* Akkordeon-Container */
.mobile-acc {
	border-bottom: 1px solid var(--border-soft, #f2ece0);
	list-style: none;
}

.mobile-flat {
	border-bottom: 1px solid var(--border-soft, #f2ece0);
}

.mobile-acc[open] {
	background: rgba(167, 144, 196, 0.04);
}

.mobile-acc summary {
	list-style: none;
}

/* Native Disclosure-Marker (Browser-▶) komplett deaktivieren */
.mobile-acc summary::-webkit-details-marker { display: none; }
.mobile-acc summary::marker { content: ''; }

.mobile-acc summary:hover,
.mobile-acc summary:focus-visible,
.mobile-flat:hover,
.mobile-flat:focus-visible {
	background: rgba(167, 144, 196, 0.06);
	color: var(--c-purple-text, #a790c4);
	outline: none;
}

/* SVG-Caret im summary — explizite Größe (war vorher fehlend, daher Riesen-Pfeil) */
.mobile-acc summary svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--c-purple-text, #a790c4);
	transition: transform 0.25s ease;
}

.mobile-acc[open] summary svg {
	transform: rotate(180deg);
}

/* Flat-Items bekommen einen statischen Pfeil rechts (visuelle Konsistenz) */
.mobile-flat::after {
	content: '→';
	display: inline-flex;
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight: 500;
	color: var(--c-purple-text, #a790c4);
	transition: transform 0.25s ease;
	flex-shrink: 0;
}

.mobile-flat:hover::after,
.mobile-flat:focus-visible::after {
	transform: translateX(4px);
}

/* Sub-Items (innerhalb des aufgeklappten Akkordeons) */
.mobile-acc ul {
	list-style: none;
	margin: 0;
	padding: 4px 0 14px;
}

.mobile-acc li {
	margin: 0;
}

.mobile-acc li a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-height: 52px;
	padding: 10px 22px 10px 36px;
	text-decoration: none;
	color: var(--wp--preset--color--ink, #2b2826);
	border-left: 3px solid transparent;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
	position: relative;
	justify-content: center;
}

.mobile-acc li a::before {
	content: '';
	position: absolute;
	left: 22px;
	top: 50%;
	width: 8px;
	height: 1px;
	background: var(--wp--preset--color--purple, #a790c4);
	transform: translateY(-50%);
	transition: width 0.15s ease;
}

.mobile-acc li a:hover,
.mobile-acc li a:focus-visible {
	background: rgba(167, 144, 196, 0.05);
	outline: none;
}

.mobile-acc li a:hover::before,
.mobile-acc li a:focus-visible::before {
	width: 12px;
}

/* Erstes Sub-Item (Übersichts-Link) hervorheben — visuell klar als Hub-Link */
.mobile-acc ul li:first-child a {
	font-weight: 500;
	background: rgba(167, 144, 196, 0.04);
	border-left-color: var(--wp--preset--color--purple, #a790c4);
	margin-bottom: 6px;
	padding-bottom: 14px;
	padding-top: 14px;
	border-bottom: 1px solid var(--border-soft, #f2ece0);
}

.mobile-acc ul li:first-child a::before {
	display: none;
}

.mobile-acc ul li:first-child a .mobile-acc-name {
	color: var(--wp--preset--color--ink, #2b2826);
}

.mobile-acc-eyebrow {
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-purple-text, #a790c4);
	line-height: 1.4;
}

.mobile-acc-name {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--ink, #2b2826);
}

.mobile-acc-price {
	font-family: 'Spectral', serif;
	font-size: 13px;
	font-weight: 400;
	color: var(--wp--preset--color--soft, #6F6C69);
	margin-top: 2px;
}

/* Top-Header Strip — Lage & Anfahrt erscheint jetzt links der Sprache */
.header-strip .strip-right .strip-link {
	color: var(--wp--preset--color--ink-soft, rgba(27,26,26,0.75));
	text-decoration: none;
	font-size: 0.82rem;
	transition: color 0.15s ease;
}

.header-strip .strip-right .strip-link:hover {
	color: var(--c-purple-text, #a790c4);
}

/* nav-flat (Top-Level ohne Submenü, z.B. Angebote, FAQ) */
.nav-flat {
	color: var(--wp--preset--color--ink, #1b1a1a);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif);
	font-size: 0.95rem;
	font-weight: 500;
	padding: 0.5rem 0;
	position: relative;
	transition: color 0.15s ease;
}

.nav-flat::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--wp--preset--color--purple, #a790c4);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.2s ease;
}

.nav-flat:hover::after,
.nav-flat:focus-visible::after {
	transform: scaleX(1);
}