/* ==================== FLAVOR BASE — Envo Royal Look ==================== */

/* --- Reset --- */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
	--fl-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--fl-heading: #404757;
	--fl-text: #404757;
	--fl-muted: #858a96;
	--fl-blue: #64c0ff;
	--fl-blue-mid: #36adff;
	--fl-blue-dark: #429fff;
	--fl-blue-bg: #64c0ff1f;
	--fl-blue-border: #d1ecff;
	--fl-blue-deep: #00385e;
	--fl-orange: #ff9200;
	--fl-orange-dark: #e68300;
	--fl-white: #ffffff;
	--fl-light: #f7fbff;
	--fl-border: #e2e8f0;
	--fl-radius: 20px;
	--fl-radius-sm: 12px;
	--fl-shadow: 0 2px 12px rgba(100,192,255,0.08);
	--fl-shadow-lg: 0 8px 32px rgba(100,192,255,0.15);
	--fl-shadow-xl: 0 16px 48px rgba(100,192,255,0.18);
	--fl-container: 1200px;
}

html { font-size:16px; scroll-behavior:smooth; }

body {
	font-family:var(--fl-font); font-size:1rem; line-height:1.75;
	color:var(--fl-text); background:var(--fl-white);
	-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
	display:flex; flex-direction:column; min-height:100vh;
}
/* Hauptinhalt dehnt sich, Footer bleibt unten. */
.flavor-main, .kk-hub-page, .flavor-hero + .flavor-section, .flavor-hero ~ * { flex-shrink:0; }
.flavor-footer { margin-top:auto; }

h1,h2,h3,h4,h5,h6 { font-family:var(--fl-font); color:var(--fl-heading); line-height:1.3; font-weight:700; }
h1 { font-size:2.6rem; font-weight:800; }
h2 { font-size:1.7rem; font-weight:700; }
h3 { font-size:1.35rem; font-weight:600; }
h4 { font-size:1.05rem; font-weight:600; }

p { font-size:0.95rem; line-height:1.8; color:var(--fl-muted); }

a { color:var(--fl-blue-mid); text-decoration:none; transition:color 0.2s; }
a:hover { color:var(--fl-blue-dark); }
img { max-width:100%; height:auto; display:block; }

.flavor-container { max-width:var(--fl-container); margin:0 auto; padding:0 24px; }

/* --- Buttons: Orange primary, gerundete Ecken wie Envo Royal --- */
.flavor-btn {
	display:inline-block; padding:14px 34px; font-size:0.85rem; font-weight:700;
	border-radius:8px; text-decoration:none; cursor:pointer;
	transition:all 0.3s ease; border:2px solid transparent;
	line-height:1.4; letter-spacing:0.03em; text-transform:uppercase;
	font-family:var(--fl-font);
}
.flavor-btn {
	background:var(--fl-orange); color:var(--fl-white); border-color:var(--fl-orange);
}
.flavor-btn:hover {
	background:rgba(255,146,0,0.85); border-color:rgba(255,146,0,0.85); color:var(--fl-white);
	transform:translateY(-2px); box-shadow:0 6px 24px rgba(255,255,255,0.3);
}
.flavor-btn-outline {
	background:transparent; color:var(--fl-white); border:2px solid rgba(255,255,255,0.5);
}
.flavor-btn-outline:hover {
	background:rgba(255,255,255,0.15); border-color:var(--fl-white); color:var(--fl-white);
	box-shadow:0 6px 24px rgba(255,255,255,0.2);
}
.flavor-btn-blue {
	background:var(--fl-blue-mid); color:var(--fl-white); border-color:var(--fl-blue-mid);
}
.flavor-btn-blue:hover {
	background:rgba(54,173,255,0.85); border-color:rgba(54,173,255,0.85); color:var(--fl-white);
	box-shadow:0 6px 24px rgba(255,255,255,0.25);
}

/* ==================== HEADER ==================== */

.flavor-header {
	position:fixed; top:0; left:0; right:0; z-index:1000;
	background:transparent;
	transition:background 0.35s ease, box-shadow 0.35s ease;
}
.flavor-header-scrolled {
	background:rgba(255,255,255,0.97);
	backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
	box-shadow:0 2px 20px rgba(0,0,0,0.06);
}
/* Scrolled: Links werden dunkel */
.flavor-header-scrolled .flavor-menu-item > a { color:var(--fl-text); }
.flavor-header-scrolled .flavor-menu-item > a:hover,
.flavor-header-scrolled .flavor-current > a { color:var(--fl-blue-mid); background:var(--fl-blue-bg); }
.flavor-header-scrolled .flavor-logo { color:var(--fl-heading); }
.flavor-header-scrolled .flavor-burger { color:var(--fl-heading); }

.flavor-header-inner {
	display:flex; align-items:center; justify-content:space-between;
	height:76px;
}

.flavor-logo {
	font-size:1.45rem; font-weight:800; color:var(--fl-white); text-decoration:none;
	letter-spacing:-0.03em; transition:color 0.3s;
}
.flavor-logo:hover { opacity:0.85; }
.flavor-logo-suffix { font-weight:400; opacity:0.5; font-size:0.75em; }

/* Nav Links */
.flavor-menu { list-style:none; display:flex; gap:2px; margin:0; padding:0; }
.flavor-menu-item > a {
	display:block; padding:10px 16px; font-size:0.82rem; font-weight:300;
	font-family:var(--fl-font);
	color:rgba(255,255,255,0.85); text-decoration:none; border-radius:10px;
	transition:all 0.2s; text-transform:uppercase; letter-spacing:0.05em;
}
.flavor-menu-item > a:hover { color:var(--fl-white); background:rgba(255,255,255,0.12); }
.flavor-current > a { color:var(--fl-white); background:rgba(255,255,255,0.15); }

/* Dropdown */
.flavor-has-children { position:relative; }
.flavor-has-children > a::after {
	content:''; display:inline-block; width:6px; height:6px; margin-left:7px; vertical-align:middle;
	border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
	transform:rotate(45deg); transition:transform 0.2s;
	position:relative; top:-2px;
}
.flavor-has-children:hover > a::after { transform:rotate(225deg); top:1px; }

.flavor-submenu {
	display:none; position:absolute; top:100%; left:0; min-width:250px;
	background:var(--fl-white); border-radius:var(--fl-radius);
	box-shadow:var(--fl-shadow-xl); padding:10px 0; list-style:none; z-index:100;
	border:1px solid var(--fl-blue-border);
	animation:flavor-dd 0.25s ease;
}
/* Unsichtbare Brücke über dem Submenu damit :hover beim Runterbewegen nicht abreißt. */
.flavor-submenu::before {
	content:''; position:absolute; top:-12px; left:0; right:0; height:12px;
}
.flavor-has-children:hover > .flavor-submenu { display:block; }
@keyframes flavor-dd {
	from { opacity:0; transform:translateY(-10px); }
	to   { opacity:1; transform:translateY(0); }
}
.flavor-has-children:hover > .flavor-submenu { display:block; }
.flavor-submenu .flavor-menu-item > a {
	padding:12px 22px; font-size:0.85rem; font-weight:300; border-radius:0;
	color:var(--fl-text); text-transform:none; letter-spacing:0;
}
.flavor-submenu .flavor-menu-item > a:hover { background:var(--fl-blue-bg); color:var(--fl-blue-mid); }

/* Burger — wellenförmige SVG-Linien, bleiben immer 3 Wellen */
.flavor-burger {
	display:none; background:none; border:none; cursor:pointer; padding:4px;
	color:var(--fl-white);
}

/* ==================== HERO ==================== */

.flavor-hero {
	position:relative;
	padding:200px 0 160px;
	background-size:cover; background-position:center center; background-repeat:no-repeat;
	overflow:hidden;
}
.flavor-hero-overlay {
	position:absolute; inset:0;
	background:
		radial-gradient(ellipse 80% 90% at 50% 50%, transparent 20%, rgba(0,56,94,0.65) 80%),
		linear-gradient(135deg, rgba(0,56,94,0.7) 0%, rgba(54,173,255,0.3) 50%, rgba(100,192,255,0.2) 100%);
	z-index:1;
}
.flavor-hero-inner { position:relative; z-index:2; max-width:640px; }

.flavor-hero-tagline {
	display:inline-block;
	
	text-transform:uppercase; letter-spacing:0.2em;
	color:#fff; background:rgba(255,255,255,0.12);
	padding:7px 18px; border-radius:50px; margin-bottom:24px;
}
.flavor-hero h1,
.flavor-hero-h1 {
	color:var(--fl-white); font-size:3.4rem; font-weight:800; line-height:1.15;
	margin-bottom:1em; text-transform:uppercase; letter-spacing:0.12em;
}
.flavor-hero-framed {
	display:inline-block;
	border:3px solid rgba(255,255,255,0.9);
	padding:4px 18px 6px;
	margin-top:2px;
}
.flavor-hero p {
	display: inline-block;
	color: #fff;
	background: linear-gradient(to bottom, rgba(0, 70, 120, 0.82), transparent);
	padding: 7px 18px;
	border-radius: 6px;
	margin-bottom: 24px;
}
.flavor-hero-buttons { display:flex; gap:16px; flex-wrap:wrap; }

/* Hero-Welle */
.flavor-hero-wave {
	position:absolute; bottom:-1px; left:0; right:0; z-index:3;
	height:80px;
	background:url("../img/wave-hero.svg") no-repeat bottom center;
	background-size:100% 100%;
}

/* ==================== SEKTIONEN ==================== */

.flavor-section { padding:88px 0; position:relative; }
.flavor-section-alt { background:var(--fl-blue-bg); }

/* Wellen-SVG Daten (wiederverwendbar) */
/* Obere Kante: Welle die von der vorherigen Sektion überleitet */
/* Untere Kante: Welle die zur nächsten Sektion überleitet */

/*
 * Wellen-Übergänge wie Envo Royal:
 * Die Welle ragt von der NÄCHSTEN Sektion nach OBEN in die aktuelle hinein.
 * Füllung = Farbe der nächsten Sektion.
 *
 * Weiße Sektion → hellblaue CTA: hellblaue Welle ragt von unten ins Weiß
 * Hellblaue CTA → weiße Sektion: weiße Welle ragt von unten ins Hellblau
 */

/* Weiße Sektion → hellblau */
.flavor-waved { padding-bottom:80px; }
.flavor-waved::after {
	content:''; position:absolute; bottom:-1px; left:0; right:0; height:60px; z-index:1; pointer-events:none;
	background:url("../img/wave-to-blue.svg") no-repeat bottom center;
	background-size:100% 100%;
}

/* Hellblaue CTA → weiß */
.flavor-waved-alt { padding:64px 0 80px; position:relative; }
.flavor-waved-alt::after {
	content:''; position:absolute; bottom:-1px; left:0; right:0; height:60px; z-index:1; pointer-events:none;
	background:url("../img/wave-to-white.svg") no-repeat bottom center;
	background-size:100% 100%;
}

/* Letzter CTA: keine Welle nach unten (Footer übernimmt) */
.flavor-last-cta::after { display:none; }
.flavor-last-cta { padding-bottom:64px; }

.flavor-waved-alt .flavor-container { position:relative; z-index:2; }

.flavor-section-header { margin-bottom:52px; }
.flavor-section-header-center { text-align:center; }
.flavor-section-header-center p { margin-left:auto; margin-right:auto; }
.flavor-section-header h2 { margin-bottom:14px; font-size:1.8rem; }
.flavor-section-header p { color:var(--fl-muted); font-size:0.95rem; max-width:560px; line-height:1.8; }

/* ==================== CARDS ==================== */

.flavor-grid { display:grid; gap:28px; }
.flavor-grid-4 { grid-template-columns:repeat(4, 1fr); }
.flavor-grid-3 { grid-template-columns:repeat(3, 1fr); }
.flavor-grid-2 { grid-template-columns:repeat(2, 1fr); }

.flavor-card {
	display:block; text-decoration:none; color:inherit;
	background:var(--fl-white); border:1.5px solid var(--fl-blue-border);
	border-top:3px solid var(--fl-blue);
	border-radius:var(--fl-radius); padding:36px 24px; text-align:center;
	transition:all 0.35s ease;
}
.flavor-card:hover {
	border-color:var(--fl-blue); border-top-color:var(--fl-blue-mid);
	box-shadow:var(--fl-shadow-xl);
	transform:translateY(-8px); color:inherit;
}

.flavor-card-icon {
	width:72px; height:72px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	font-size:1.6rem; margin:0 auto 22px; color:var(--fl-white);
	background:linear-gradient(135deg, var(--fl-blue-mid) 0%, var(--fl-blue) 100%);
	box-shadow:0 4px 16px rgba(100,192,255,0.3);
	transition:transform 0.35s, box-shadow 0.35s;
}
.flavor-card:hover .flavor-card-icon {
	transform:scale(1.1);
	box-shadow:0 6px 24px rgba(100,192,255,0.4);
}

/* Alle Icon-Varianten im selben Blauton */
.flavor-icon-blue-dark { background:linear-gradient(135deg, var(--fl-blue-dark) 0%, var(--fl-blue-mid) 100%); }
.flavor-icon-green { background:linear-gradient(135deg, #36adff 0%, #64c0ff 100%); }
.flavor-icon-purple { background:linear-gradient(135deg, #429fff 0%, #64c0ff 100%); }
.flavor-icon-orange { background:linear-gradient(135deg, #4eaeff 0%, #64c0ff 100%); }

.flavor-card h4 { margin-bottom:10px; color:var(--fl-heading); font-weight:600; font-size:1.05rem; }
.flavor-card p { color:var(--fl-muted); font-size:0.88rem; line-height:1.7; margin-bottom:16px; }

.flavor-card-link {
	font-size:0.8rem; font-weight:700; color:var(--fl-blue-mid);
	display:inline-flex; align-items:center; gap:4px;
	text-transform:uppercase; letter-spacing:0.05em;
	transition:gap 0.25s;
}
.flavor-card-link::after { content:'→'; transition:transform 0.25s; }
.flavor-card:hover .flavor-card-link { gap:10px; }

/* ==================== CTA LIGHT ==================== */

.flavor-cta-light {
	padding:80px 0 100px; text-align:center;
	background:var(--fl-white); position:relative;
}
.flavor-cta-light-blue {
	background:#ddeefb;
}
.flavor-cta-light .flavor-container { position:relative; z-index:2; }
.flavor-cta-light .flavor-wave-top,
.flavor-cta-light .flavor-wave-bottom { z-index:1; }
.flavor-cta-light h2 { color:var(--fl-heading); font-size:1.5rem; font-weight:700; margin-bottom:10px; }
.flavor-cta-light p { color:var(--fl-muted); margin-bottom:24px; font-size:0.92rem; }
.flavor-cta-light .flavor-btn { margin-top:8px; }

/* ==================== SPLIT (Legacy) ==================== */

.flavor-split {
	display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start;
}
.flavor-split-text h3 { font-size:1.5rem; margin-bottom:20px; }
.flavor-split-text p { margin-bottom:16px; line-height:1.8; font-size:0.95rem; }

.flavor-sidebar-card {
	display:block; text-decoration:none; color:inherit;
	background:var(--fl-white); border:1.5px solid var(--fl-blue-border);
	border-top:3px solid var(--fl-blue);
	border-radius:var(--fl-radius); padding:22px 20px; margin-bottom:16px;
	transition:all 0.3s ease;
}
.flavor-sidebar-card:hover {
	border-color:var(--fl-blue); border-top-color:var(--fl-blue-mid);
	box-shadow:var(--fl-shadow-lg);
	transform:translateX(6px); color:inherit;
}
.flavor-sidebar-card h4 { margin-bottom:6px; font-size:0.95rem; color:var(--fl-heading); }
.flavor-sidebar-card p { color:var(--fl-muted); font-size:0.85rem; line-height:1.65; margin:0; }

/* ==================== FOOTER ==================== */

.flavor-footer {
	background:#1a2744; color:rgba(255,255,255,0.5); padding:48px 0 36px;
	position:relative;
}
.flavor-footer-wave {
	position:absolute; top:-59px; left:0; right:0; height:60px;
	pointer-events:none;
	background:url("../img/wave-to-dark.svg") no-repeat bottom center;
	background-size:100% 100%;
}
.flavor-footer-inner {
	max-width:var(--fl-container); margin:0 auto; padding:0 24px; text-align:center;
}
.flavor-footer-links {
	display:flex; flex-wrap:wrap; justify-content:center; gap:8px 28px; margin-bottom:24px;
}
.flavor-footer-links a {
	color:rgba(255,255,255,0.6); font-size:0.85rem; font-weight:500; text-decoration:none;
	transition:color 0.2s;
}
.flavor-footer-links a:hover { color:var(--fl-white); }
.flavor-footer-copy { font-size:0.8rem; margin:0; }

/* ==================== ALLGEMEIN ==================== */

.flavor-main { padding:124px 0 64px; }
.flavor-article h1 { margin-bottom:24px; }
.flavor-entry p { margin-bottom:16px; }

/* Nicht-Homepage: Header solid weiß */
body:not(.home) .flavor-header {
	background:rgba(255,255,255,0.97);
	backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
body:not(.home) .flavor-menu-item > a { color:var(--fl-text); }
body:not(.home) .flavor-menu-item > a:hover,
body:not(.home) .flavor-current > a { color:var(--fl-blue-mid); background:var(--fl-blue-bg); }
body:not(.home) .flavor-logo { color:var(--fl-heading); }
body:not(.home) .flavor-burger { color:var(--fl-heading); }

/* ==================== RESPONSIVE ==================== */

@media (max-width:900px) {
	.flavor-burger { display:block; }
	/* Mobile-Nav: weiß mit dunklem Text — bewusst hell, damit Text lesbar bleibt */
	.flavor-nav {
		display:none; position:fixed; top:76px; left:0; right:0; bottom:0;
		background:rgba(255,255,255,0.98); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
		padding:24px 0; overflow-y:auto; z-index:999;
		box-shadow:0 12px 32px rgba(0,0,0,0.12);
	}
	.flavor-nav-open { display:block !important; animation:flavor-nav-in 0.3s ease; }
	@keyframes flavor-nav-in { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }

	/* Burger-Farbe im Mobile-Kontext immer lesbar — auf Home zunächst weiß, bei offenem Menü dunkel */
	.flavor-burger-open { color:var(--fl-heading) !important; }

	.flavor-menu { flex-direction:column; gap:0; padding:0 24px; }
	.flavor-menu-item > a {
		padding:16px 0; border-radius:0; border-bottom:1px solid var(--fl-border);
		font-size:0.95rem; color:var(--fl-text) !important; background:transparent !important;
	}
	.flavor-menu-item > a:hover,
	.flavor-current > a { color:var(--fl-blue-mid) !important; background:transparent !important; }
	.flavor-submenu {
		position:static; box-shadow:none; border:none; border-radius:0; padding:0 0 0 24px;
		display:none; background:transparent; animation:none; min-width:0;
	}
	.flavor-submenu::before { display:none; } /* Desktop-Hover-Bridge im Mobile nicht nötig */
	.flavor-submenu .flavor-menu-item > a { color:var(--fl-muted) !important; border-bottom:1px solid #f0f0f0; }
	.flavor-submenu .flavor-menu-item > a:hover { color:var(--fl-blue-mid) !important; background:transparent !important; }
	.flavor-has-children.flavor-touch-open > .flavor-submenu { display:block; }
	/* Desktop-Hover-Aufklapp im Mobile deaktivieren — nur Klick öffnet */
	.flavor-has-children:hover > .flavor-submenu { display:none; }
	.flavor-has-children.flavor-touch-open:hover > .flavor-submenu { display:block; }

	.flavor-grid-4 { grid-template-columns:repeat(2, 1fr); }
	.flavor-grid-3 { grid-template-columns:1fr; }
	.flavor-split { grid-template-columns:1fr; gap:36px; }

	.flavor-hero { padding:160px 0 130px; }
	.flavor-hero h1 { font-size:2.4rem; }
}

@media (max-width:600px) {
	.flavor-grid-4, .flavor-grid-2 { grid-template-columns:1fr; }
	.flavor-hero { padding:130px 0 110px; }
	.flavor-hero h1 { font-size:2rem; }
	.flavor-hero-wave svg { height:50px; }
	.flavor-header-inner { height:64px; }
	.flavor-nav { top:64px; }
	.flavor-section { padding:56px 0; }
	.flavor-card { padding:28px 20px; }
	.flavor-card-icon { width:60px; height:60px; font-size:1.4rem; }
	.flavor-main { padding:100px 0 48px; }
}