/**
 * Elucio Theme – Haupt-Stylesheet
 *
 * Reihenfolge:
 *   1. Reset / Box-Model
 *   2. Layout-Grundlagen
 *   3. Site Header
 *   4. Site Main
 *   5. Site Footer
 *   6. Utility-Klassen
 */

/* =========================================================================
   1. Reset / Box-Model
========================================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

img,
video,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	list-style: none;
}

/* =========================================================================
   2. Layout-Grundlagen
========================================================================= */
:root {
	--container-max: 1280px;
	--container-pad: clamp(1.25rem, 5vw, 4rem);
	--section-max:   1440px; /* Figma-Sektionsbreite */


	/* -----------------------------------------------------------------------
	   Farb-Palette (aus Figma Styles.svg)
	----------------------------------------------------------------------- */

	/* Primäre Markentöne */
	--color-cream:        #FFFEF5; /* Hintergrund / Warm White */
	--color-dark:         #272727; /* Text / primäre UI-Elemente */
	--color-sand:         #DEC7AB; /* Akzent / Warm Sand */
	--color-gray:         #676767; /* Muted Text / Sekundärinhalte */
	--color-white:        #FFFFFF; /* Reines Weiß */

	/* Abgeleitete / UI-Töne */
	--color-sand-light:   #EBE9E0; /* Heller warmer Hintergrund (Secondary-Button) */
	--color-border:       #E2E2E2; /* Borders, Ghost-Button */
	--color-divider:      #E9E9E9; /* Trennlinien */
	--color-icon-muted:   #4C4949; /* Icons auf hellem Hintergrund */

	/* Semantische Aliase */
	--color-bg:     var(--color-cream);
	--color-fg:     var(--color-dark);
	--color-muted:  var(--color-gray);
	--color-accent: var(--color-sand);
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--color-bg);
	color:            var(--color-fg);
	-webkit-font-smoothing:  antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Selektion */
::selection {
	background-color: var(--color-sand);
	color:            var(--color-dark);
}

.container {
	width:          100%;
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-pad);
}

/* Breiterer Container für Footer / Section-Inner (entspricht Figma 1440px) */
.container-wide {
	width:          100%;
	max-width:      var(--section-max);
	margin-inline:  auto;
	padding-inline: var(--container-pad);
}

/* =========================================================================
   3. Site Header — Glassmorphismus (aus Figma: Navi Blur Solo.svg)
   backdrop-filter: blur(7.5px) · white 10% opacity · Höhe 88px
========================================================================= */
.site-header {
	position:         sticky;
	top:              0;
	z-index:          100;
	height:           88px;

	/* Glas-Effekt */
	background-color: rgba(255, 255, 255, 0.10);
	backdrop-filter:         blur(7.5px);
	-webkit-backdrop-filter: blur(7.5px);

	/* Subtile untere Trennlinie */
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* Auf Seiten ohne Hero-Bild hinter dem Header: volle Deckkraft */
body:not(.home) .site-header {
	background-color:        rgba(255, 254, 245, 0.97);
	backdrop-filter:         blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border-bottom:           1px solid var(--color-border);
}

.site-header__inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             2rem;
	height:          100%;
	padding-inline:  clamp(1.5rem, 3.89vw, 3.5rem);
}

/* Logo-Image (PNG-Fallback) */
.site-header__logo-img {
	height: 28px;
	width:  auto;
}

.site-header__logo-link {
	display: flex;
	align-items: center;
}

/* Utility-Icons rechts (Profil | EN | Warenkorb) */
.site-header__utilities {
	display:     flex;
	align-items: center;
	gap:         1.25rem;
	flex-shrink: 0;
}

.site-header__util-btn {
	display:    flex;
	align-items: center;
	position:   relative;
	background: none;
	border:     none;
	padding:    0;
	cursor:     pointer;
	color:      var(--color-gray);
	transition: opacity 0.2s ease;
}

.site-header__util-btn:hover {
	opacity: 0.7;
}

.site-header__util-btn img {
	height: auto;
}

.site-header__lang {
	display:     flex;
	align-items: center;
	gap:         0.4rem;
	font-family: var(--font-body);
	font-size:   0.875rem;
	letter-spacing: 0.03em;
	color:       var(--color-gray);
	cursor:      pointer;
	transition:  color 0.2s ease;
}

.site-header__lang:hover {
	color: var(--color-dark);
}

.site-header__lang-chevron {
	display: block;
	opacity: 0.7;
}

/* Warenkorb-Zähler-Badge */
.site-header__cart-count {
	position:         absolute;
	top:              -6px;
	right:            -6px;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	min-width:        16px;
	height:           16px;
	padding-inline:   3px;
	background-color: var(--color-dark);
	color:            #ffffff;
	font-family:      var(--font-body);
	font-size:        0.625rem;
	font-weight:      600;
	border-radius:    50%;
	line-height:      1;
}

/* Hamburger-Button — nur mobil */
.site-header__burger {
	display:    none;
	flex-direction: column;
	justify-content: center;
	gap:        6px;
	width:      40px;
	height:     40px;
	padding:    8px;
	background: none;
	border:     none;
	cursor:     pointer;
	z-index:    200;
}

.site-header__burger-bar {
	display:          block;
	width:            22px;
	height:           1.5px;
	background-color: var(--color-dark);
	transition:       transform 0.3s ease, opacity 0.3s ease;
	transform-origin: center;
}

/* Burger → X wenn offen */
.site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(1) {
	transform: translateY(7.5px) rotate(45deg);
}
.site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(3) {
	transform: translateY(-7.5px) rotate(-45deg);
}

/* Desktop-Navigation */
.site-nav__list {
	display:    flex;
	align-items: center;
	gap:         2rem;
}

.site-nav__list a {
	font-size:      0.9375rem;
	letter-spacing: var(--ls-nav);
	transition:     color 0.2s ease;
}

.site-nav__list a:hover {
	color:   var(--color-sand);
}

/* =========================================================================
   Mobile-Nav-Overlay
   Glassmorphismus, schiebt von oben rein (unter dem Header)
========================================================================= */
.mobile-nav-overlay {
	display:          none; /* JS setzt display:flex */
	position:         fixed;
	top:              80px; /* Höhe des mobilen Headers */
	left:             0;
	right:            0;
	z-index:          90;

	/* Gleicher Glaseffekt wie Header */
	background-color: rgba(255, 255, 255, 0.92);
	backdrop-filter:         blur(7.5px);
	-webkit-backdrop-filter: blur(7.5px);

	/* Animation */
	transform:  translateY(-8px);
	opacity:    0;
	transition: transform 0.3s ease, opacity 0.3s ease;
	pointer-events: none;
}

.mobile-nav-overlay.is-open {
	transform:      translateY(0);
	opacity:        1;
	pointer-events: auto;
}

.mobile-nav {
	padding: 1.5rem var(--container-pad) 2rem;
}

.mobile-nav__list {
	display:        flex;
	flex-direction: column;
	gap:            0;
}

.mobile-nav__list li {
	border-bottom: 1px solid var(--color-border);
}

.mobile-nav__list li:first-child {
	border-top: 1px solid var(--color-border);
}

.mobile-nav__list a {
	display:        block;
	padding:        1rem 0;
	font-family:    var(--font-body);
	font-size:      1.0625rem;
	letter-spacing: var(--ls-nav);
	color:          var(--color-dark);
	transition:     color 0.2s ease;
}

.mobile-nav__list a:hover {
	color: var(--color-sand);
}

/* Body-Scroll sperren wenn Menü offen */
body.nav-open {
	overflow: hidden;
}

/* =========================================================================
   Responsive — Mobile Header
   390px Viewport · 80px Höhe (aus Figma: Navi Bar Blur Solo.svg)
========================================================================= */
@media (max-width: 768px) {

	.site-header {
		height: 80px; /* Figma: 80px statt 88px Desktop */
	}

	.site-nav {
		display: none; /* Desktop-Nav ausblenden */
	}

	.site-header__utilities {
		display: none; /* Utility-Icons auf Mobil ausblenden */
	}

	.site-header__burger {
		display: flex; /* Hamburger einblenden */
	}

	.mobile-nav-overlay {
		display: flex;
		flex-direction: column;
	}

	/* Footer: 2-spaltig auf Tablet, 1-spaltig auf Mobil */
	.site-footer__upper-inner {
		flex-wrap: wrap;
		gap:       2.5rem;
	}

	.site-footer__brand {
		flex-basis: 100%; /* Volle Breite oben */
	}

	.site-footer__nav-col {
		flex-basis: calc(50% - 1.25rem);
	}

	.site-footer__social {
		flex-basis: 100%;
		justify-content: flex-start;
	}

	.site-footer__lower-inner {
		flex-direction: column;
		align-items:    flex-start;
		gap:            1rem;
	}

}

/* =========================================================================
   4. Site Main
========================================================================= */
.site-main {
	min-height: 60vh;
}

/* Seiteninhalt */
.page-content,
.single-post {
	padding-block: clamp(3rem, 6vw, 6rem);
}

.entry-title {
	margin-bottom: 1.5rem;
}

.entry-content {
	max-width: 72ch;
}

.entry-content p + p {
	margin-top: 1.25em;
}

/* Beitragsliste */
.post-list {
	display:        grid;
	gap:            2rem;
	padding-block:  clamp(3rem, 6vw, 6rem);
}

.post-list__item .entry-title {
	font-size: var(--fs-h3);
}

/* 404 */
.error-404 {
	padding-block: clamp(4rem, 8vw, 8rem);
	text-align: center;
}

.error-404 .entry-title {
	margin-bottom: 1rem;
}

.error-404 p {
	color:         var(--color-muted);
	margin-bottom: 2rem;
}

/* =========================================================================
   5. Site Footer (aus Figma: Footer.svg — 1443×216px)
   Struktur: obere Zone Logo+Nav+Social / Sand-Divider / untere Zone Copyright
========================================================================= */
.site-footer {
	margin-top:       auto;
}

/* =========================================================================
   Footer — 4-Spalten-Layout (Figma: Footer.svg 1440 × 216px)
   Spalten: [Brand+Tagline] [Nav Links] [Nav Service] [Social]
========================================================================= */

/* Obere Zone */
.site-footer__upper {
	padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

.site-footer__upper-inner {
	display:         flex;
	align-items:     flex-start;
	justify-content: space-between;
	gap:             2rem;
}

/* Spalte 1: Logo + Tagline */
.site-footer__brand {
	display:        flex;
	flex-direction: column;
	gap:            1rem;
}

.site-footer__logo-img {
	height: 37px;
	width:  auto;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.site-footer__logo-link:hover .site-footer__logo-img {
	opacity: 1;
}

.site-footer__tagline {
	font-family:    var(--font-body);
	font-size:      0.875rem;
	letter-spacing: 0.04em;
	color:          var(--color-gray);
	max-width:      24ch;
}

/* Spalten 2+3: Nav-Listen */
.site-footer__nav-col .site-footer__nav-list {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
}

.site-footer__nav-list a {
	font-family:    var(--font-body);
	font-size:      0.875rem;
	letter-spacing: 0.05em;
	color:          var(--color-dark);
	opacity:        0.8;
	text-transform: uppercase;
	transition:     opacity 0.2s ease, color 0.2s ease;
}

.site-footer__nav-list a:hover {
	opacity: 1;
	color:   var(--color-sand);
}

/* Spalte 4: Social Icons */
.site-footer__social {
	display:     flex;
	align-items: center;
	gap:         1.25rem;
	padding-top: 0.25rem;
}

.site-footer__social-link {
	display:    flex;
	align-items: center;
	color:      var(--color-gray);
	transition: opacity 0.2s ease;
}

.site-footer__social-link:hover {
	opacity: 0.7;
}

.site-footer__social-link img {
	height: auto;
}

/* --- Trennlinie (Sand, Figma: stroke="#DEC7AB") ----------------------- */
.site-footer__divider {
	height:           1px;
	background-color: var(--color-sand);
}

/* --- Untere Zone ----------------------------------------------------- */
.site-footer__lower {
	padding-block: 1.25rem;
}

.site-footer__lower-inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             2rem;
	flex-wrap:       wrap;
}

.site-footer__copy {
	font-family:    var(--font-body);
	font-size:      0.8125rem;
	letter-spacing: var(--ls-nav);
	color:          var(--color-gray);
}

/* Legal-Nav */
.site-footer__legal-list {
	display:  flex;
	gap:      1.5rem;
	flex-wrap: wrap;
}

.site-footer__legal-list a {
	font-size:      0.8125rem;
	letter-spacing: var(--ls-nav);
	color:          var(--color-gray);
	transition:     color 0.2s ease;
}

.site-footer__legal-list a:hover {
	color: var(--color-dark);
}

/* =========================================================================
   6. Utility-Klassen
========================================================================= */

/* -----------------------------------------------------------------------
   Buttons (aus Figma Styles.svg – 3 Varianten)
----------------------------------------------------------------------- */
.btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             0.5rem;
	padding:         0.75rem 2rem;
	font-family:     var(--font-body);
	font-size:       0.9375rem;
	letter-spacing:  0.04em;
	border:          none;
	border-radius:   0;
	cursor:          pointer;
	transition:      background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	text-decoration: none;
	line-height:     1;
}

/* Primary — Schwarz, weißer Text (Haupt-CTA) */
.btn--primary {
	background-color: var(--color-dark);
	color:            var(--color-white);
}

.btn--primary:hover {
	background-color: var(--color-sand);
	color:            var(--color-dark);
}

/* Secondary — Warmes Beige (Secondary-CTA) */
.btn--secondary {
	background-color: var(--color-sand-light);
	color:            var(--color-dark);
}

.btn--secondary:hover {
	background-color: var(--color-sand);
	color:            var(--color-dark);
}

/* Ghost — Gestrichelter Border, transparentes BG (Chips, Tags, Filter) */
.btn--ghost {
	background-color: transparent;
	color:            var(--color-fg);
	border:           1px dashed var(--color-border);
	border-radius:    4px;
	padding:          0.4rem 0.85rem;
	font-size:        0.875rem;
}

.btn--ghost:hover {
	border-color:     var(--color-gray);
	color:            var(--color-dark);
}

/* Legacy-Alias (rückwärtskompatibel) */
.btn--outline {
	background-color: transparent;
	color:            var(--color-fg);
	border:           1px solid var(--color-border);
}

.btn--outline:hover {
	background-color: var(--color-dark);
	color:            var(--color-white);
	border-color:     var(--color-dark);
}

/* Visually hidden (Barrierefreiheit) */
.sr-only {
	position:   absolute;
	width:      1px;
	height:     1px;
	padding:    0;
	margin:     -1px;
	overflow:   hidden;
	clip:       rect(0, 0, 0, 0);
	white-space: nowrap;
	border:     0;
}