/* Lucide Icons base */
.icon {
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: middle
}

.badge-icon .icon {
	width: 22px;
	height: 22px
}

.btn .icon,
.btn-primary .icon,
.btn-secondary .icon,
.btn-add .icon,
.btn-phone .icon {
	width: 18px;
	height: 18px;
	margin-right: 6px
}

.check-icon {
	display: grid;
	place-items: center
}

.check-icon .icon {
	width: 16px;
	height: 16px;
	color: #05313a
}

.faq-icon .icon {
	width: 18px;
	height: 18px
}

.faq-minus {
	display: none
}

.faq-item.active .faq-minus {
	display: inline-block
}

.faq-item.active .faq-plus {
	display: none
}

/* ===== Brand tokens ===== */
:root {
	--c-teal: #38bcb1;
	/* Brand Teal */
	--c-navy: #002a47;
	/* Brand Navy */
	--c-yellow: #f5ce01;
	/* Accent */
	--c-bg: #f6faf9;
	/* Light background */
	--c-text: #0f1b2a;
	/* Primary text */
	--radius: 18px;
	--shadow: 0 10px 30px rgba(0, 0, 0, .08);
	--max: 1120px;
}

/* Reset */
*,
*::before,
*::after {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

@media (prefers-reduced-motion:reduce) {
	html {
		scroll-behavior: auto
	}
}

body {
	margin: 0;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	color: var(--c-text);
	background: var(--c-bg);
	line-height: 1.55
}

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

a {
	color: inherit
}

.container {
	max-width: var(--max);
	padding-inline: clamp(16px, 4vw, 28px);
	margin-inline: auto
}

section {
	padding: clamp(28px, 6vw, 72px) 0
}

/* ===== Header ===== */
header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--c-navy);
	color: #e9f6f3;
	transition: box-shadow .2s ease
}

header.is-stuck {
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18)
}

.header-desktop {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 18px;
	align-items: center;
	padding: 12px 0
}

.logo-container img {
	width: 140px;
	height: auto
}

.nav-links-desktop {
	list-style: none;
	display: flex;
	gap: 22px;
	margin: 0;
	padding: 0
}

.nav-links-desktop a {
	color: #eaf7f4;
	text-decoration: none;
	padding: .5rem .7rem;
	border-radius: 999px
}

.nav-links-desktop a:hover {
	background: rgba(255, 255, 255, .1)
}

.nav-actions {
	display: flex;
	gap: 10px;
	align-items: center
}

.btn-phone,
.btn-request {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem .9rem;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700
}

.btn-phone {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .18)
}

.btn-request {
	background: #fff;
	color: var(--c-navy)
}

/* Mobile header */
.header-mobile {
	display: none
}

@media (max-width:920px) {
	.header-desktop {
		display: none
	}

	.header-mobile {
		display: block
	}

	.mobile-top-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 0
	}

	.mobile-top-row img {
		width: 130px
	}

	.mobile-menu-btn {
		background: #002a47;
		border: 0;
		border-radius: 3px;
		padding: .55rem .8rem;
		font-weight: 800;
		color: #fff
	}

	.mobile-buttons-row {
		display: flex;
		gap: 8px;
		padding: 0 0 10px
	}

	.mobile-buttons-row .btn-phone {
		flex: 1;
		justify-content: center
	}

	.mobile-buttons-row .btn-request {
		flex: 1;
		justify-content: center
	}

	.mobile-nav-dropdown {
		display: none;
		background: #012338;
		border-top: 1px solid rgba(255, 255, 255, .14)
	}

	.mobile-nav-dropdown.active {
		display: block
	}

	.mobile-nav-dropdown ul {
		list-style: none;
		margin: 0;
		padding: 8px
	}

	.mobile-nav-dropdown a {
		display: block;
		color: #eaf7f4;
		text-decoration: none;
		padding: .8rem;
		border-radius: 10px
	}

	.mobile-nav-dropdown a:hover {
		background: rgba(255, 255, 255, .08)
	}
}

/* ===== Event Banner ===== */
.event-banner {
	background: linear-gradient(90deg, var(--c-yellow), #ffd84a);
	color: #0e1726
}

.event-banner .container {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding-block: .75rem
}

.dates {
	display: flex;
	gap: 10px;
	flex-wrap: wrap
}

.date-chip {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	background: #0e1726;
	color: #fff;
	border-radius: 999px;
	padding: .45rem .7rem;
	font-weight: 800
}

.date-chip .cal {
	width: 18px;
	height: 18px;
	display: inline-grid;
	place-items: center;
	background: #fff;
	color: #0e1726;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 900
}

.event-cta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap
}

.event-cta a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	text-decoration: none;
	font-weight: 800;
	border-radius: 10px;
	padding: .6rem .85rem
}

.btn-add {
	background: #0e1726;
	color: #fff
}

.btn-more {
	background: #fff;
	color: #0e1726
}

@media (max-width:840px) {
	.event-banner .container {
		flex-direction: column;
		align-items: flex-start
	}
}

/* ===== Hero ===== */
.hero {
	background: linear-gradient(135deg, var(--c-navy) 0%, #01375d 50%, #034d7f 100%);
	color: white
}

.hero .container {
	padding-block: clamp(28px, 7vw, 72px)
}

.hero h1 {
	font-size: clamp(28px, 5vw, 44px);
	line-height: 1.05;
	margin: 0 0 8px
}

.hero h1 .highlight {
	color: var(--c-teal)
}

.hero p {
	max-width: 72ch;
	opacity: .94;
	margin: 0 0 14px
}

.hero .note {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 10px;
	padding: .5rem .7rem
}

.cta-buttons {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 12px
}

.btn-primary {
	background: #fff;
	color: var(--c-navy);
	padding: .9rem 1.1rem;
	border-radius: 12px;
	text-decoration: none;
	font-weight: 800
}

.btn-secondary {
	background: var(--c-teal);
	color: #06222a;
	padding: .9rem 1.1rem;
	border-radius: 12px;
	text-decoration: none;
	font-weight: 800
}

@media (max-width:560px) {
	.cta-buttons {
		flex-direction: column
	}

	.cta-buttons a {
		width: 100%;
		text-align: center
	}
}

/* ===== RSVP Card ===== */
.rsvp {
	background: #fff
}

.rsvp .wrap {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 18px
}

@media (max-width:980px) {
	.rsvp .wrap {
		grid-template-columns: 1fr
	}
}

.rsvp-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 16px;
	box-shadow: var(--shadow);
	padding: 16px
}

.rsvp small {
	color: #28465f
}

.chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 8px 0 12px
}

.chip {
	background: #eef8f6;
	border: 1px solid #d2ece8;
	color: #0b2a32;
	border-radius: 999px;
	padding: .35rem .7rem;
	font-weight: 700
}

.rsvp form .grid {
	display: grid;
	gap: 10px
}

.rsvp form .cols-2 {
	grid-template-columns: 1fr 1fr
}

@media (max-width:640px) {
	.rsvp form .cols-2 {
		grid-template-columns: 1fr
	}
}

.rsvp input[type="text"],
.rsvp input[type="tel"],
.rsvp input[type="email"] {
	width: 100%;
	padding: .82rem;
	border: 1px solid #d7e1e0;
	border-radius: 10px;
	background: #f9fcfb
}

.rsvp .submit-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 6px
}

.btn-dark {
	background: var(--c-navy);
	color: #fff;
	border-radius: 12px;
	padding: .85rem 1.1rem;
	font-weight: 800;
	text-decoration: none;
	border: 0;
	cursor: pointer
}

.btn-wa {
	background: var(--c-teal);
	color: #06222a;
	border-radius: 12px;
	padding: .85rem 1.1rem;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer
}

/* ===== Trust badges / highlights ===== */
.trust-badges {
	background: #fff
}

.badges-container {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px
}

@media (max-width:1000px) {
	.badges-container {
		grid-template-columns: repeat(3, 1fr)
	}
}

@media (max-width:640px) {
	.badges-container {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media (max-width:480px) {
	.badges-container {
		grid-template-columns: 1fr
	}
}

.badge-item {
	background: linear-gradient(180deg, white, #f3f8f7);
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 14px;
	box-shadow: var(--shadow);
	padding: 14px;
	display: grid;
	gap: 4px;
	justify-items: start
}

.badge-icon {
	font-size: 22px
}

/* ===== Benefits ===== */
h2 {
	font-size: clamp(22px, 3.6vw, 32px);
	margin: 0 0 12px
}

p.lead {
	max-width: 70ch
}

.benefits-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px
}

@media (max-width:900px) {
	.benefits-grid {
		grid-template-columns: 1fr
	}
}

.benefit-item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 14px;
	box-shadow: var(--shadow);
	padding: 14px
}

.check-icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--c-teal);
	color: #05313a;
	font-weight: 900
}

/* ===== FAQ ===== */
.faq-container {
	display: grid;
	gap: 12px
}

.faq-item {
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, .08);
	background: #fff;
	box-shadow: var(--shadow)
}

.faq-question {
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	padding: 14px 16px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: space-between
}

.faq-answer {
	display: none;
	padding: 0 16px 16px;
	color: #2a3d54
}

.faq-item.active .faq-answer {
	display: block
}

.faq-item.open .faq-answer {
	display: block;
}

.faq-item.open .faq-plus {
	display: none;
}

.faq-item.open .faq-minus {
	display: inline-block;
}

/* ===== CTA Section ===== */
.cta-section {
	background: var(--c-navy);
	color: #eaf7f4;
	text-align: center
}

/* ===== Sticky mobile CTA ===== */
.sticky-cta {
	position: fixed;
	inset: auto 0 0 0;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(8px);
	border-top: 1px solid rgba(0, 0, 0, .06);
	display: none;
	z-index: 60
}

.sticky-cta .inner {
	max-width: var(--max);
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: .6rem 1rem
}

.sticky-cta .btn {
	background: var(--c-teal);
	border-radius: 999px;
	padding: .8rem 1.1rem;
	font-weight: 800;
	color: #06222a;
	text-decoration: none
}

@media (max-width:760px) {
	.sticky-cta {
		display: block
	}
}

.cta-section {
	padding-bottom: calc(clamp(28px, 6vw, 72px) + 70px)
}

/* ===== Footer ===== */
footer {
	background: #041c2c;
	color: #cfe7e4;
	padding: 28px 0;
}

footer a {
	color: #cfe7e4
}

:focus-visible {
	outline: 3px solid var(--c-yellow);
	outline-offset: 2px;
	border-radius: 8px
}

/* Mobile menu icon toggle */
.mobile-menu-btn .icon-x {
	display: none
}

.mobile-menu-btn.is-open .icon-menu {
	display: none
}

.mobile-menu-btn.is-open .icon-x {
	display: inline-block
}

/* Mobile-Navi zeigen, wenn per JS aria-hidden auf false steht */
.mobile-nav-dropdown[aria-hidden="false"] {
	display: block;
}

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

/* Danke-Sektion soll ohne Änderungen an html/body die Höhe füllen */
#danke.cta-section {
	display: grid;
	min-height: 50svh;
}

@supports (height: 100dvh) {
	#danke.cta-section {
		min-height: 50dvh;
	}
}

#danke .container {
	min-height: inherit;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 8px;
	padding-block: 24px;
}