/* sahin-e.com – Ergänzungen zu site.css: Mega-Menü in der Hauptnavigation, aufklappbare Gruppen im Drawer
   und der Umriss-Button auf dunklem Grund (fehlte im Tailwind-Build).
   Aufbau nach den Designsystem-Komponenten MegaNav, FlyoutMenu und Button („Sahin eCommerce“).
   Nur Token-Variablen aus site.css (:root), keine eigenen Farbwerte außer Bild-Overlay und Hover auf Dunkel. */

/* Umriss-Button auf dunklem Grund (Designsystem: Button secondary in .se-on-dark / .se-hero) */
.btn-outline-dark { background: transparent; color: var(--on-navy); border-color: var(--on-navy); }
.btn-outline-dark:hover { background: rgba(255, 255, 255, 0.12); color: var(--on-navy); }
.btn-outline-dark:focus-visible { outline-color: var(--focus-on-dark); }

/* Auslöser in der Hauptnavigation (wie .nav-link, aber als Button) */
.mega-toggle {
	display: inline-flex; align-items: center; gap: var(--space-1);
	border: 0; background: none; cursor: pointer;
	padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
	font: 600 15px/24px var(--font-display); color: var(--ink);
	transition: background-color var(--duration-fast), color var(--duration-fast);
}
.mega-toggle:hover, .mega-toggle[aria-expanded="true"] { color: var(--navy); background: var(--navy-050); }
.mega-toggle.is-current { color: var(--navy); box-shadow: inset 0 -2px 0 var(--navy); border-radius: 0; }
.mega-chevron { transition: transform var(--duration-fast); }
.mega-toggle[aria-expanded="true"] .mega-chevron { transform: rotate(180deg); }

/* Aufklappfläche unter dem Header */
.mega {
	position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-popover);
	background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow-popover);
	animation: mega-in var(--duration-base) ease-out;
}
.mega[hidden] { display: none; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .mega { display: none !important; } }

.mega-grid { display: grid; gap: var(--space-8); padding-top: var(--space-8); padding-bottom: var(--space-8); }
.mega-grid-leistungen { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.mega-grid-projekte { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); align-items: start; }

.mega-coltitle { margin: 0 0 var(--space-3); font: 700 14px/20px var(--font-display); color: var(--navy); }
.mega-text { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.mega-all {
	display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4);
	font: 600 14px/20px var(--font-display); color: var(--navy); text-decoration: none;
}
.mega-all:hover { text-decoration: underline; }

/* Leistungsbereiche: Einträge wie FlyoutMenu (Icon, Titel, Kurztext) */
.mega-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); }
.mega-item {
	display: flex; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md);
	text-decoration: none; transition: background-color var(--duration-fast);
}
.mega-item:hover, .mega-item[aria-current="page"] { background: var(--navy-050); }
.mega-icon {
	display: grid; place-items: center; width: 40px; height: 40px; flex: none;
	border-radius: var(--radius-md); background: var(--navy-100); color: var(--navy);
	transition: background-color var(--duration-fast), color var(--duration-fast);
}
.mega-item:hover .mega-icon { background: var(--navy); color: var(--on-navy); }
.mega-item-title { display: block; font: 600 15px/24px var(--font-display); color: var(--navy); }
.mega-item-text {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
	font-size: 14px; line-height: 20px; color: var(--ink-muted);
}

/* Hervorgehobene Fläche mit Bild (MegaNav „feature“), Overlay wie image-overlay */
.mega-feature {
	position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 280px;
	border-radius: var(--radius-lg); padding: var(--space-6); background: var(--navy-900); text-decoration: none;
}
.mega-feature > img, .mega-feature > picture, .mega-feature > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mega-feature::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(11, 27, 51, 0.18) 0%, rgba(11, 27, 51, 0.82) 62%, rgba(11, 27, 51, 0.82) 100%);
}
.mega-feature:focus-visible { outline-color: var(--focus-on-dark); }
.mega-feature-content { position: relative; z-index: 1; display: grid; gap: var(--space-2); }
.mega-feature-eyebrow { display: flex; align-items: center; gap: var(--space-2); font: 600 12px/16px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-navy); }
.mega-feature-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--accent); }
.mega-feature-title { font: 700 22px/30px var(--font-display); color: var(--on-navy); }
.mega-feature-text { font-size: 15px; line-height: 24px; color: var(--on-navy); }
.mega-feature-cta { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); font: 600 14px/20px var(--font-display); color: var(--on-navy); }
.mega-feature:hover .mega-feature-cta { text-decoration: underline; }

/* Projekte: Logo-Kacheln auf Markenfarbe */
.mega-projects { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.mega-project { display: grid; gap: var(--space-1); text-decoration: none; }
.mega-project .brand-tile { aspect-ratio: 4 / 3; margin-bottom: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-md); transition: box-shadow var(--duration-fast); }
.mega-project:hover .brand-tile { box-shadow: var(--shadow-md); }
.mega-project:hover .mega-item-title { text-decoration: underline; }
.mega-project[aria-current="page"] .brand-tile { box-shadow: 0 0 0 2px var(--navy); }

/* Drawer (mobil): Projekte und Leistungen als aufklappbare Gruppen */
.drawer-group summary {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
	padding: var(--space-3) 0; border-bottom: 1px solid var(--line);
	font: 600 19px/28px var(--font-display); color: var(--navy); cursor: pointer; list-style: none;
}
.drawer-group summary::-webkit-details-marker { display: none; }
.drawer-chevron { transition: transform var(--duration-fast); }
.drawer-group[open] .drawer-chevron { transform: rotate(180deg); }
.drawer-group ul { list-style: none; margin: 0; padding: var(--space-2) 0 var(--space-3); display: grid; border-bottom: 1px solid var(--line); }
.drawer-nav .drawer-group ul a {
	display: block; border: 0; box-shadow: none;
	padding: var(--space-2) 0 var(--space-2) var(--space-3);
	font: 400 16px/24px var(--font-sans); color: var(--ink);
}
.drawer-nav .drawer-group ul a.drawer-all { font: 600 15px/24px var(--font-display); color: var(--navy); }
.drawer-nav .drawer-group ul a[aria-current="page"] { color: var(--navy); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }

@media (prefers-reduced-motion: reduce) {
	.mega { animation: none; }
	.mega-chevron, .drawer-chevron, .mega-toggle, .mega-item, .mega-icon { transition: none; }
}