:root {
	/* Farben am Logo orientiert */
	--bg-start: #0c1016;
	--bg-end: #111722;
	--card: #0e1522cc;
	--text: #eaf1f7;
	--muted: #9fb2c3;
	--brand: #0b5c79;
	/* Blau aus Logo */
	--brand-2: #cfa43d;
	/* Gold aus Logo */
	--accent: #85d3ff;
	/* helles Blau für Akzente */
	--shadow: 0 10px 30px rgba(0, 0, 0, .35);
	--radius: 18px;
}

* {
	box-sizing: border-box
}

html,
body {
	height: 100%
}

body {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
	background: radial-gradient(1200px 600px at 10% 0%, rgba(12, 92, 121, .18), transparent 60%),
		radial-gradient(900px 500px at 90% 10%, rgba(207, 164, 61, .12), transparent 60%),
		linear-gradient(180deg, var(--bg-start), var(--bg-end));
	color: var(--text);
	min-height: 100svh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.wrap {
	min-height: 100svh;
	display: flex;
	flex-direction: column
}

.container {
	max-width: 1100px;
	width: 100%;
	margin: 0 auto;
	padding: 24px;
	flex: 1;
	display: flex;
	flex-direction: column
}

header {
	padding: 22px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px
}

.logo {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--text)
}

.logo img {
	height: 42px;
	width: auto;
	display: block
}

.logo span {
	font-weight: 700;
	letter-spacing: .2px
}

.badge {
	border: 1px solid rgba(255, 255, 255, .15);
	background: rgba(255, 255, 255, .06);
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 12px;
	color: var(--muted)
}

/* Hero */
.hero {
	padding: 40px 0 20px
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 28px
}

.title {
	font-size: clamp(2rem, 5vw, 2rem);
	line-height: 1.12;
	margin: .2em 0 .35em;
	font-weight: 800
}

.lead {
	color: var(--muted);
	font-size: clamp(1.02rem, 2.2vw, 1.2rem);
	max-width: 60ch
}

.card {
	background: var(--card);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--radius);
	box-shadow: var(--shadow)
}

.card-pad {
	padding: 22px
}

.cta-row {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	margin: 22px 0 8px
}

.btn {
	appearance: none;
	border: none;
	cursor: pointer;
	padding: 14px 18px;
	border-radius: 14px;
	font-weight: 600;
	color: #0b0e14;
	background: linear-gradient(135deg, var(--brand), var(--accent));
	box-shadow: 0 8px 20px rgba(107, 227, 255, .28)
}

.btn:hover {
	transform: translateY(-1px)
}

.ghost {
	background: transparent;
	color: var(--text);
	border: 1px solid rgba(255, 255, 255, .18)
}

/* First-7 */
.first7 {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(12, 92, 121, .18), rgba(12, 92, 121, .06));
	border: 1px solid rgba(12, 92, 121, .35)
}

.price {
	font-weight: 800;
	font-size: 1.1rem
}

.progress {
	flex: 1;
	height: 10px;
	background: rgba(255, 255, 255, .08);
	border-radius: 20px;
	overflow: hidden
}

.bar {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

.tiny {
	font-size: 12px;
	color: var(--muted)
}

/* Sections */
section {
	padding: 34px 0
}

h2 {
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	margin: 0 0 14px
}

.grid {
	display: grid;
	gap: 16px
}

.grid-2 {
	grid-template-columns: repeat(2, 1fr)
}

.grid-3 {
	grid-template-columns: repeat(3, 1fr)
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .10);
	background: rgba(255, 255, 255, .04);
	color: var(--text);
	font-size: 14px
}

ul.clean {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 10px
}

ul.clean li {
	display: flex;
	gap: 10px;
	align-items: flex-start
}

.check {
	min-width: 18px;
	min-height: 18px;
	border-radius: 6px;
	background: linear-gradient(135deg, var(--brand), var(--accent));
	display: inline-block;
	margin-top: 2px
}

.feature {
	padding: 18px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, .08);
	background: rgba(255, 255, 255, .03)
}

.muted {
	color: var(--muted)
}

/* Footer */
footer {
	padding: 34px 0 60px;
	color: var(--muted);
	font-size: 14px
}

footer a {
	color: inherit
}

/* Modal */
dialog {
	border: none;
	background: var(--card);
	color: var(--text);
	border-radius: 18px;
	width: min(560px, 92vw);
	padding: 0;
	box-shadow: var(--shadow)
}

dialog::backdrop {
	background: rgba(5, 9, 14, .6)
}

.modal-head {
	padding: 18px 22px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	display: flex;
	justify-content: space-between;
	align-items: center
}

.modal-body {
	padding: 22px
}

.x {
	cursor: pointer;
	border: none;
	background: transparent;
	color: var(--muted);
	font-size: 22px
}

.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px
}

input,
textarea {
	background: #0b0f18;
	border: 1px solid rgba(255, 255, 255, .14);
	color: var(--text);
	border-radius: 12px;
	padding: 12px
}

/* Responsive */
@media (max-width: 1000px) {
	.hero-grid {
		grid-template-columns: 1fr
	}

	.grid-3 {
		grid-template-columns: 1fr
	}

	.grid-2 {
		grid-template-columns: 1fr
	}
}