/* =========================================================
   WASSER-CHECK · gemeinsames Stylesheet (mobile-first)
   Gehört zusammen mit: index.html, app.js, impressum.html, datenschutz.html
   Eigene Optik, bewusst NICHT im SWKA-Branding.
   Platzhalter im HTML sind coral-gestrichelt: .ph  -> [ ... ]
   ========================================================= */

/* ---- Lokale Schriften (Datenschutz: kein externes Nachladen von Google) ----
   Dateien gehören in den Unterordner /fonts neben die HTML-Seiten.
   Fraunces & Inter sind kostenlos unter der SIL Open Font License. */
@font-face{font-family:'Fraunces';src:url('fonts/Fraunces_72pt-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/Fraunces_72pt-SemiBoldItalic.ttf') format('truetype');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/Fraunces_72pt-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter_18pt-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter_18pt-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter_18pt-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter_18pt-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter_18pt-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}

:root{
  --ink:#0C2A30; --petrol:#0A3A42; --teal:#11707D;
  --aqua:#2BC4D6; --aqua-l:#D7F2F5; --ice:#F2FAFB;
  --coral:#FF7A59; --coral-d:#E8623F;
  --line:#D4E7EA; --mute:#5E7378;
  --soft:#6FD3C0; --med:#2BC4D6; --hard:#1B6470;
  --radius:20px; --radius-sm:13px;
  --shadow:0 18px 40px -22px rgba(10,58,66,.45);
  --shadow-soft:0 8px 24px -16px rgba(10,58,66,.35);
  --maxw:640px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;
  background:var(--ice);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--teal)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 18px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:700;font-size:16px;cursor:pointer;border:none;
  padding:15px 22px;border-radius:14px;color:#fff;background:var(--coral);
  box-shadow:0 12px 24px -10px rgba(232,98,63,.75);
  transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
  text-decoration:none;-webkit-tap-highlight-color:transparent;
}
.btn:hover{background:var(--coral-d)}
.btn:active{transform:translateY(2px)}
.btn:focus-visible{outline:3px solid var(--petrol);outline-offset:2px}
.btn.full{width:100%}
.btn.lg{padding:17px 24px;font-size:17px;border-radius:15px}
.btn.ghost{background:#fff;color:var(--teal);border:1.6px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--aqua);background:var(--ice)}
.btn .arr{transition:transform .15s}
.btn:hover .arr{transform:translateX(3px)}

@keyframes pulse{0%,100%{box-shadow:0 12px 24px -10px rgba(232,98,63,.75)}
  50%{box-shadow:0 12px 30px -6px rgba(232,98,63,.9)}}
.btn.pulse{animation:pulse 2.6s ease-in-out infinite}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;background:rgba(242,250,251,.85);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--petrol);font-size:16px;letter-spacing:-.01em}
.brand .logo{
  width:30px;height:30px;border-radius:9px;
  background:linear-gradient(140deg,var(--aqua),var(--teal));
  display:grid;place-items:center;color:#fff
}
.brand .logo svg{width:18px;height:18px}
.topbar .small{font-size:12px;color:var(--mute);font-weight:600}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;text-align:center;
  padding:46px 0 54px;
  background:
    radial-gradient(120% 90% at 50% -20%, #1A6E7C 0%, #0A3A42 60%, #082C33 100%);
  color:#fff;
}
.hero .bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero .bubbles i{
  position:absolute;bottom:-30px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), rgba(43,196,214,.18));
  animation:floatUp linear infinite;opacity:.5
}
@keyframes floatUp{
  from{transform:translateY(0) scale(1);opacity:.0}
  10%{opacity:.55}
  to{transform:translateY(-120vh) scale(1.15);opacity:0}
}
.eyebrow{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#CFF3F8;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);padding:7px 14px;border-radius:999px
}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--aqua);
  box-shadow:0 0 0 4px rgba(43,196,214,.3)}
.hero h1{
  position:relative;font-family:'Fraunces',serif;font-weight:600;
  font-size:clamp(34px,9vw,50px);line-height:1.05;letter-spacing:-.015em;
  margin:20px 0 12px;color:#fff
}
.hero h1 em{font-style:italic;color:#7FE3EF}
.hero .lede{position:relative;font-size:16.5px;color:#BFE3E8;max-width:42ch;margin:0 auto 26px}

/* PLZ-Box im Hero */
.checkbox{
  position:relative;background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;max-width:440px;margin:0 auto;text-align:left
}
.checkbox label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:7px}
.field-row{display:flex;flex-direction:column;gap:10px}
input[type=text],input[type=email]{
  width:100%;font:inherit;font-size:16px;padding:15px 16px;
  border:1.6px solid var(--line);border-radius:var(--radius-sm);
  background:var(--ice);color:var(--ink);transition:border-color .15s, box-shadow .15s
}
input:focus{outline:none;border-color:var(--aqua);box-shadow:0 0 0 4px rgba(43,196,214,.2);background:#fff}
input::placeholder{color:#9FB3B7}
.trust{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin-top:20px}
.trust span{font-size:13px;color:#A9D2D8;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.trust svg{width:15px;height:15px;color:var(--aqua)}
.err{color:var(--coral-d);font-size:13px;font-weight:600;margin-top:10px;min-height:1px}

/* Wellen-Abschluss */
.hero .wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0}
.hero .wave svg{width:100%;height:46px;display:block}

/* ---------- Sektionen ---------- */
section.block{padding:42px 0}
.kicker{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);text-align:center}
h2.sec{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(24px,6.5vw,30px);
  color:var(--petrol);text-align:center;line-height:1.12;letter-spacing:-.01em;margin:8px 0 6px}
.sec-sub{text-align:center;color:var(--mute);font-size:15px;max-width:46ch;margin:0 auto 26px}

/* Schritte */
.steps{display:flex;flex-direction:column;gap:14px}
.step{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-soft)}
.step .num{flex:0 0 38px;height:38px;border-radius:11px;font-weight:800;color:#fff;
  background:linear-gradient(140deg,var(--aqua),var(--teal));display:grid;place-items:center}
.step h3{font-size:16px;color:var(--petrol);margin-bottom:2px}
.step p{font-size:14px;color:var(--mute)}

/* Vorteils-Karten */
.cards{display:grid;grid-template-columns:1fr;gap:14px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow-soft)}
.tile .ic{width:46px;height:46px;border-radius:13px;background:var(--aqua-l);
  display:grid;place-items:center;color:var(--teal);margin-bottom:12px}
.tile .ic svg{width:24px;height:24px}
.tile h3{font-size:17px;color:var(--petrol);margin-bottom:5px}
.tile p{font-size:14.5px;color:var(--mute)}

/* Ergebnis-Karte */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px 20px}
.result{display:none}
.result.show{display:block;animation:rise .5s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.gaugeWrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:center}
.gauge{position:relative;width:120px;height:152px;flex:0 0 auto;
  border-radius:42% 42% 46% 46% / 30% 30% 60% 60%;
  border:3px solid var(--petrol);overflow:hidden;background:#EAF6F8;
  box-shadow:inset 0 4px 10px rgba(10,58,66,.12)}
.water{position:absolute;left:0;right:0;bottom:0;height:0%;
  background:linear-gradient(180deg,var(--aqua),var(--teal));
  transition:height 1.4s cubic-bezier(.5,.05,.2,1), background .6s}
.water::before,.water::after{content:"";position:absolute;top:-14px;left:-50%;width:200%;height:24px;
  background:radial-gradient(circle at 12px -2px, transparent 12px, var(--aqua) 12px) repeat-x;
  background-size:24px 24px;opacity:.9}
.water::after{top:-10px;animation:wave 5s linear infinite;opacity:.5}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-24px)}}
.gauge .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;z-index:2;font-family:'Fraunces',serif;color:var(--petrol);
  text-shadow:0 1px 0 rgba(255,255,255,.6)}
.gauge .val b{font-size:28px;font-weight:600;line-height:1}
.gauge .val span{font-size:12px;font-weight:600;color:var(--teal)}
.verdict{flex:1 1 200px;min-width:200px}
.badge{display:inline-block;font-weight:700;font-size:12.5px;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;padding:5px 12px;border-radius:999px;margin-bottom:8px}
.verdict h3{font-family:'Fraunces',serif;font-weight:600;font-size:24px;color:var(--petrol);line-height:1.1}
.verdict .src{font-size:12px;color:var(--mute);margin-top:6px}
.scale{display:flex;height:8px;border-radius:999px;overflow:hidden;margin:16px 0 6px}
.scale i{flex:1}.scale .s0{background:var(--soft)}.scale .s1{background:var(--med)}.scale .s2{background:var(--hard)}
.scaleLab{display:flex;justify-content:space-between;font-size:11px;color:var(--mute);font-weight:600}
.means{background:var(--aqua-l);border-radius:14px;padding:15px 16px;margin-top:16px;font-size:15px}
.means b{color:var(--petrol)}
.aside{font-size:13px;color:var(--mute);margin-top:12px;padding-left:14px;border-left:3px solid var(--line)}
.reco{margin-top:16px}
.reco h4{font-family:'Fraunces',serif;font-weight:600;font-size:18px;color:var(--petrol);margin-bottom:8px}
.feat{display:flex;gap:12px;align-items:flex-start;margin:10px 0;font-size:14.5px}
.feat .ic{flex:0 0 34px;height:34px;border-radius:10px;background:var(--aqua-l);display:grid;place-items:center;color:var(--teal)}
.feat svg{width:19px;height:19px}

/* Fallback Selbst-Eingabe */
.fallback{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line)}
.fallback p{font-size:13px;color:var(--mute);margin-bottom:12px}
.bands{display:flex;gap:8px}
.bands button{flex:1;font:inherit;font-weight:700;font-size:14px;cursor:pointer;
  padding:13px 6px;border-radius:12px;border:1.6px solid var(--line);background:#fff;color:var(--ink);transition:.15s}
.bands button:hover{border-color:var(--aqua);background:var(--ice)}

/* Testimonials */
.quotes{display:grid;gap:14px}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-soft)}
.quote .stars{color:#F4C542;font-size:15px;letter-spacing:2px;margin-bottom:8px}
.quote p{font-size:15px;color:var(--ink);font-style:italic}
.quote .who{font-size:13px;color:var(--mute);font-weight:600;margin-top:10px}

/* Newsletter */
.signup{position:relative;overflow:hidden;border-radius:var(--radius);
  background:radial-gradient(120% 120% at 90% 0%, #14507A 0%, #0A3A42 55%);
  color:#fff;padding:30px 22px;box-shadow:var(--shadow)}
.signup .gift{display:inline-flex;align-items:center;gap:8px;background:var(--coral);
  color:#fff;font-weight:700;font-size:13px;padding:6px 13px;border-radius:999px;margin-bottom:14px}
.signup h2{font-family:'Fraunces',serif;font-weight:600;font-size:25px;margin-bottom:8px}
.signup p.s{color:#BFE3E8;font-size:15px;margin-bottom:18px}
.signup input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.signup input::placeholder{color:#8FB7BD}
.consent{display:flex;gap:10px;align-items:flex-start;margin:14px 0 4px;font-size:12.5px;color:#A9D2D8}
.consent input{flex:0 0 auto;width:19px;height:19px;accent-color:var(--coral);margin-top:1px}
.consent a{color:#fff}
.doi-note{font-size:12px;color:#8FB7BD;margin-top:14px;text-align:center}
.success{display:none;text-align:center;padding:6px 0}
.success.show{display:block;animation:rise .4s ease both}
.success .ring{width:58px;height:58px;border-radius:50%;background:var(--coral);display:grid;place-items:center;margin:0 auto 14px}
.success .ring svg{width:30px;height:30px;color:#fff}
.success h3{font-family:'Fraunces',serif;font-weight:600;font-size:22px;margin-bottom:8px}
.success p{color:#BFE3E8}

/* FAQ */
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  margin-bottom:10px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:700;color:var(--petrol);
  font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{flex:0 0 auto;transition:transform .2s;color:var(--teal)}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq .ans{padding:0 18px 16px;color:var(--mute);font-size:14.5px}

/* Platzhalter-Markierung */
.ph{background:#FFF4E0;border:1.5px dashed var(--coral);border-radius:7px;
  padding:1px 7px;font-weight:600;color:var(--coral-d);font-size:.92em;white-space:nowrap}

/* Footer */
footer.site{background:#08272D;color:#9FBEC4;padding:30px 0 40px;margin-top:20px}
footer.site .vp{font-weight:700;color:#EAF6F8;font-size:13.5px}
footer.site .row{font-size:13px;margin-top:8px;line-height:1.8}
footer.site a{color:#BFE3E8;text-decoration:none;border-bottom:1px solid rgba(191,227,232,.3)}
footer.site .legal{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px}
footer.site .fine{font-size:11.5px;color:#6E9097;margin-top:14px;line-height:1.7}

/* Sticky Mobile-CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(242,250,251,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  transform:translateY(120%);transition:transform .3s ease}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .btn{width:100%}

/* Rechtsseiten */
.legalpage{padding:34px 0 50px}
.legalpage h1{font-family:'Fraunces',serif;font-weight:600;font-size:30px;color:var(--petrol);margin-bottom:6px}
.legalpage .lead{color:var(--mute);font-size:14px;margin-bottom:22px}
.legalpage h2{font-size:18px;color:var(--petrol);margin:24px 0 8px}
.legalpage p,.legalpage li{font-size:14.5px;color:var(--ink);margin-bottom:8px}
.legalpage ul{padding-left:20px}
.legalpage .note{background:#FFF4E0;border:1px solid var(--coral);border-radius:12px;
  padding:14px 16px;font-size:13.5px;color:var(--coral-d);margin:18px 0}
.back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--teal);text-decoration:none;margin-bottom:18px}

/* ---------- Desktop-Verbesserungen ---------- */
@media (min-width:760px){
  .hero{padding:64px 0 70px}
  .field-row{flex-direction:row}
  .field-row .btn{flex:0 0 auto;white-space:nowrap}
  .checkbox label{margin-left:2px}
  .cards{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr 1fr}
  .sticky-cta{display:none}  /* am Desktop nicht nötig */
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .sticky-cta{transition:none!important}
}