/* 1. VARIABLES & RESET */
:root {
	--accent: #67c5e5;	 /* FKB Hellblau (aus edelstahlpool-neu) */
	--bg-light: #f2f7fb;
	--whatsapp: #25D366;
	--whatsapp_h: #1ebc57;
	--radius: 8px;
	--shadow-card: 0 8px 24px rgba(0,0,0,0.08);
	--transition: all 0.3s ease;
}
h1, h2, h3 {letter-spacing: 0.5px;}
h1 {font-size: clamp(2rem, 5vw, 3.2rem) !important;}
h2 {font-size: clamp(1.8rem, 4vw, 2.4rem) !important;}
h3 {font-size: 1.4rem;}



p {hyphens: auto; -webkit-hyphens: auto;}

/* UTILITIES */
.section-padding {padding: 80px 0;}
@media (max-width: 768px) {.section-padding {padding: 48px 0;}}
.bg-light {background: var(--bg-light);}
.bg-primary {background: var(--primaer_1);}
.text-center {text-align: center;}
/*.text-white {color: var(--weiss);}*/
.subheadline {display: block; text-transform: uppercase; letter-spacing: 2px; font-size: 0.82rem; color: var(--accent); font-weight: 700; margin-bottom: 0.5rem;}
.subheadline.on-dark {color: var(--weiss); opacity: 0.85;}
.grid-3 {display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem;}

/* BUTTONS */
.btn {padding: 14px 28px; border-radius: var(--radius); font-weight: 700;}
@media (max-width: 768px) {.btn {padding: 12px 18px;}}
.btn-cta {background: var(--primaer_1); color: var(--weiss); box-shadow: 0 4px 12px rgba(0,107,173,0.35);}
.btn-cta:hover {background: var(--primaer_1_h); color: var(--weiss); transform: translateY(-2px);}
.btn-primary {background: transparent; border: 2px solid var(--primaer_1); color: var(--primaer_1);}
.btn-primary:hover {background: var(--primaer_1); color: var(--weiss); transform: translateY(-2px);}
.btn-outline {background: transparent; border: 2px solid var(--weiss); color: var(--weiss);}
.btn-outline:hover {background: var(--weiss); color: var(--primaer_1);}
.btn-ghost {background: transparent; border: 2px solid var(--primaer_1); color: var(--primaer_1);}
.btn-ghost:hover {background: var(--primaer_1); color: var(--weiss);}
.btn-whatsapp {background: var(--whatsapp); color: var(--weiss);}
.btn-whatsapp:hover {background: var(--whatsapp_h); transform: translateY(-2px);}

/* HERO */
.hero {position: relative; min-height: 640px; display: flex; align-items: center; overflow: hidden;}
.hero-bg {position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 1; z-index: 1;}
.hero::after {content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,53,82,0.82) 0%, rgba(0,107,173,0.55) 45%, rgba(0,107,173,0.05) 75%, rgba(0,0,0,0) 100%); z-index: 2;}
@media (max-width: 768px) {
	.hero::after {background: linear-gradient(180deg, rgba(0,53,82,0.35) 0%, rgba(0,53,82,0.85) 60%, rgba(0,53,82,0.9) 100%);}
}
.hero .container {z-index: 10;}
.hero-content {max-width: 780px; color: var(--weiss); position: relative;}
.hero-kicker {display: inline-block; background: var(--rot); color: var(--weiss); font-weight: 800; padding: 8px 18px; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem; margin-bottom: 18px;}
.hero h1 {color: var(--weiss); margin-bottom: 1.2rem; text-shadow: 0 2px 12px rgba(0,0,0,0.25);}
.hero h1 em {font-style: normal; color: var(--rot);}
.hero-sub {font-size: 1.15rem; color: rgba(255,255,255,0.92); max-width: 620px; margin-bottom: 1.5rem;}
.hero-ctas {display: flex; gap: 14px; flex-wrap: wrap;}
@media (max-width: 768px) {
	.hero {min-height: 520px;}
	.hero-sub {font-size: 1rem;}
}

/* INTRO / 3-SCHRITTE */
.steps-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 2.5rem;}
.step-card {background: var(--weiss); padding: 28px 24px; border-radius: var(--radius);}
.step-number {width: 52px; height: 52px; border-radius: 50%; background: var(--primaer_1); color: var(--weiss); font-family: var(--font_fam); font-size: 1.6rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;}
.step-card p {margin-bottom: 0;}
@media (max-width: 768px) {.steps-grid {grid-template-columns: 1fr;}}

/* OFFER CARDS */
.offers-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px;}
.offer-card {border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative;}
.offer-card:hover {transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,0.12);}
.offer-badge {position: absolute; top: 14px; right: 0; background: var(--rot); color: var(--weiss); font-family: var(--font_fam); font-size: 0.95rem; padding: 8px 16px; border-radius: 4px 0 0 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); letter-spacing: 0.5px; z-index: 3; text-transform: uppercase;}
.offer-badge.alert {background: var(--rot);}
.offer-img-wrap {position: relative; aspect-ratio: 4 / 3;}
.offer-img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.offer-code {position: absolute; bottom: 12px; right: 12px; display: inline-flex; align-items: stretch; border-radius: 4px; overflow: hidden; box-shadow: 0 3px 10px rgba(0,0,0,0.2); font-weight: 700; z-index: 3;}
.offer-code-label {background: var(--primaer_1); color: var(--weiss); padding: 7px 11px; text-transform: uppercase;  letter-spacing: 1.2px; display: flex; align-items: center; font-size: 13px;}
.offer-code-wert  {background: var(--weiss); color: var(--primaer_1); padding: 7px 14px; font-family: 'Courier New'; letter-spacing: 1.5px; display: flex; align-items: center; font-size: 18px;}
.offer-body {padding: 24px; flex-grow: 1; display: flex; flex-direction: column;}
.offer-body h3 {margin-top: 0 !important;}
ul.benefits {list-style: none; padding: 0;}
ul.benefits li {font-size: 1rem; padding-left: 22px; margin-bottom: 4px; position: relative; color: var(--dunkelgrau);}
ul.benefits li::before {content: "✓"; color: var(--accent); position: absolute; left: 0; font-weight: 900;}

/* Preisblock */
.preis-block {border-top: 1px dashed var(--grau); padding-top: 16px; margin-top: auto; margin-bottom: 14px;}
.preis-uvp {font-size: 0.85rem; color: var(--grau); text-decoration: line-through; font-weight: 600;}
.preis-aktion {font-weight: 800; font-size: 1.6rem; color: var(--schwarz); line-height: 1;}
.preis-zusatz {font-size: 0.78rem; color: var(--grau); margin-top: 4px; display: block;}
.preis-ersparnis {display: inline-block; background: var(--rot); color: var(--weiss); font-weight: 700; font-size: 0.82rem; padding: 4px 12px; border-radius: 999px; margin-left: 8px;}

/* TEILER / SPLIT */
.split-row {display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;}
.split-img-wrap img {width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); aspect-ratio: 4 / 3;}
.split-row.reverse .split-img-wrap {order: 2;}
@media (max-width: 768px) {.split-row {grid-template-columns: 1fr; gap: 28px;} .split-row.reverse .split-img-wrap {order: 1;}}

/* FAQ */
.lp-accordion {margin-top: 2rem; text-align: left; max-width: 900px; margin-left: auto; margin-right: auto;}
.lp-accordion-item {border-bottom: 1px solid var(--grau)}
.lp-accordion-trigger {color: var(--dunkelgrau); width: 100%; background: none; border: none; padding: 1.1rem 0; font-size: 1.02rem; font-weight: 700; cursor: pointer; text-align: left; position: relative;}
.lp-accordion-trigger::after {content: "+"; position: absolute; right: 0; font-size: 1.4rem; color: var(--primaer_1); transition: transform 0.3s ease;}
.lp-accordion-item.active .lp-accordion-trigger::after {content: "–";}
.lp-accordion-content {max-height: 0; overflow: hidden; transition: max-height 0.35s ease;}
.lp-accordion-content p {padding-bottom: 1.2rem; margin: 0; font-size: 0.95rem;}

@media (max-width: 768px) {.lp-footer-top, .lp-footer-bottom {flex-direction: column; text-align: center; gap: 14px;} .lp-footer-claim {text-align: center;}}

/* WHATSAPP FLOAT */
.float-wa {position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; background: var(--whatsapp); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 20px rgba(0,0,0,0.2); z-index: 1000; transition: transform 0.3s;}
.float-wa:hover {transform: scale(1.08);}