/* ABfit Webseite – Design an die App angepasst (Farbwerte aus /opt/abfit/public/style.css) */
:root{--gelb:#FFD400;--gelb-hell:#FFF4B8;--gelb-txt:#E0A800;--gelb-braun:#7a5c00;--eiweiss:#FF6B5B;--kh:#1CB5A8;--fett:#8B5CF6;
--txt:#1C1C1E;--grau:#6B6B70;--linie:#ECECEF;--bg:#FFFFFF;--flaeche:#F6F6F8;--r:16px;
--schatten:0 1px 3px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.05)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Arial,"Noto Sans","Noto Sans Thai",Tahoma,sans-serif;color:var(--txt);background:var(--bg);font-size:17px;line-height:1.55;overflow-x:hidden}
:lang(th) body,body:lang(th){line-height:1.7}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,li,td,th,figcaption,summary,small,b,span{overflow-wrap:break-word;hyphens:manual}
.wrap{max-width:1080px;margin:0 auto;padding:0 max(18px,env(safe-area-inset-left))}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
/* Kopf */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linie)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:21px;letter-spacing:-.5px}
.brand img{width:34px;height:34px;border-radius:9px}
.nav{display:none;gap:6px 22px;margin-left:12px;font-weight:600;font-size:15px;color:var(--grau)}.nav a{text-decoration:none;padding:6px 0}.nav a:hover{color:var(--txt)}
.sp{flex:1}
.lang{display:flex;gap:4px;order:5;width:100%;background:var(--flaeche);border-radius:12px;padding:3px}
.lang a{flex:1 1 0;text-align:center;text-decoration:none;font-weight:600;font-size:13px;padding:6px 2px;border-radius:9px;min-width:0;color:#444}
.lang a[aria-current]{background:#fff;color:var(--txt);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.12)}
/* Buttons: gelb = Hauptaktion wie in der App, sonst ruhig */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 22px;border-radius:14px;background:var(--gelb);color:var(--txt);font-weight:700;font-size:16.5px;text-decoration:none;border:1px solid transparent;text-align:center;line-height:1.25;transition:background .15s,box-shadow .15s}
.btn:hover{background:#f5c900;box-shadow:var(--schatten)}
.btn.alt{background:#fff;color:var(--txt);border-color:#DDD}.btn.alt:hover{background:var(--flaeche)}
.btn.sm{min-height:38px;padding:6px 16px;font-size:14.5px;border-radius:12px}
.btn.ghost{background:transparent;color:var(--txt)}
/* Hero: heller Verlauf wie im App-Hintergrund */
.hero{background:linear-gradient(170deg,#FFF6CC 0%,#FFFBE8 30%,#FFFFFF 78%);padding:34px 0 0;overflow:hidden;position:relative}
.hero .wrap{display:grid;gap:26px}
.eyebrow{display:inline-block;background:var(--gelb-hell);color:var(--gelb-braun);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin:0 0 14px}
:lang(th) .eyebrow{letter-spacing:0;text-transform:none;font-size:15px}
h1{font-size:clamp(34px,10vw,64px);line-height:1.05;margin:0 0 16px;font-weight:800;letter-spacing:-.03em}
:lang(th) h1{letter-spacing:0;line-height:1.25}
h1 span{display:block}h1 .mk{display:inline-block;background:linear-gradient(transparent 60%,var(--gelb) 60%);padding:0 .06em}
.sub{font-size:clamp(17px,4.4vw,21px);line-height:1.45;margin:0 0 22px;max-width:34em;font-weight:400;color:#3a3a3d}
.ctas{display:flex;flex-wrap:wrap;gap:12px}.ctas .btn{flex:1 1 220px}
.note{font-size:14px;color:var(--grau);margin:14px 0 0}
.phones{display:flex;justify-content:center;align-items:flex-end;gap:0;margin-top:6px}
.ph{width:min(32vw,230px);flex:0 0 auto;border-radius:26px 26px 0 0;border:1px solid var(--linie);border-bottom:0;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.12);display:block;margin:0 -2%}
.ph.mid{width:min(38vw,270px);z-index:2}
.ph.l{transform:translateY(14px) rotate(-2deg)}.ph.r{transform:translateY(14px) rotate(2deg)}
/* Stats */
.stats{background:#fff;border-block:1px solid var(--linie)}
.stats ul{list-style:none;margin:0;padding:22px 0;display:grid;grid-template-columns:1fr 1fr;gap:16px 12px}
.stats li{text-align:center;min-width:0}
.stats b{display:block;color:var(--txt);font-size:clamp(30px,8.5vw,44px);line-height:1;font-weight:800;letter-spacing:-.02em}
.stats li:nth-child(4n+1) b{color:var(--eiweiss)}.stats li:nth-child(4n+2) b{color:var(--kh)}.stats li:nth-child(4n+3) b{color:var(--fett)}.stats li:nth-child(4n) b{color:#c99a00}
.stats span{font-size:14px;line-height:1.3;display:block;margin-top:6px;color:var(--grau)}
/* Sektionen */
section{padding:52px 0}
h2{font-size:clamp(26px,6.4vw,40px);line-height:1.12;margin:0 0 10px;font-weight:800;letter-spacing:-.02em}
:lang(th) h2{letter-spacing:0;line-height:1.3}
.lead{font-size:18px;color:var(--grau);margin:0 0 26px;max-width:40em}
.tiles{display:grid;grid-template-columns:1fr;gap:14px;list-style:none;margin:0;padding:0}
.tile{background:#fff;border-radius:var(--r);padding:18px 18px 16px;min-width:0;box-shadow:var(--schatten);border:1px solid #F1F1F4}
.tile .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--flaeche);font-size:22px;margin-bottom:10px}
.tile h3{font-size:18.5px;line-height:1.25;margin:0 0 6px;font-weight:700}
.tile p{margin:0;font-size:15.5px;color:#4a4a4e}
.tile.hot .ic{background:var(--gelb-hell)}
.tile.hot{border-color:#F3E7A0}
/* Spotlight */
.spot{background:#fff}
.spot.alt{background:var(--flaeche)}
.spot .wrap{display:grid;gap:26px;align-items:center}
.spot h2{font-size:clamp(25px,6vw,36px)}
.spot ul{padding-left:0;list-style:none;margin:14px 0 0}
.spot li{padding:4px 0 4px 32px;position:relative}
.spot li:before{content:"✓";position:absolute;left:0;top:4px;width:23px;height:23px;border-radius:50%;background:var(--gelb-hell);color:var(--gelb-braun);display:grid;place-items:center;font-weight:800;font-size:13px;line-height:1}
.pair{display:flex;gap:12px;justify-content:center}
.pair figure{margin:0;flex:0 1 230px;min-width:0;text-align:center}
.pair img{width:100%;border-radius:24px;border:1px solid var(--linie);box-shadow:0 8px 28px rgba(0,0,0,.12);display:block;background:#fff}
.pair figcaption{font-size:13px;color:var(--grau);margin-top:10px}
/* Vergleich */
.cmp{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;box-shadow:var(--schatten)}
.cmp th,.cmp td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--linie);font-size:16px}
.cmp thead th{background:var(--flaeche);color:var(--grau);font-size:14px;font-weight:700}
.cmp td:nth-child(2),.cmp th:nth-child(2){background:#FFFDF0;font-weight:700}
.cmp thead th:nth-child(2){background:var(--gelb-hell);color:var(--txt)}
.cmp td:nth-child(3){color:var(--grau)}
.cmp tbody tr:last-child td{border-bottom:0}
.fine{font-size:13.5px;color:var(--grau);margin:12px 0 0}
/* Schritte */
.steps{display:grid;gap:14px;list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;background:#fff;border:1px solid #F1F1F4;box-shadow:var(--schatten);border-radius:var(--r);padding:16px 18px 16px 68px;position:relative;min-width:0}
.steps li:before{content:counter(s);position:absolute;left:14px;top:14px;width:38px;height:38px;border-radius:50%;background:var(--gelb);color:var(--txt);display:grid;place-items:center;font-weight:800;font-size:18px}
.steps h3{margin:0 0 4px;font-size:18px}.steps p{margin:0;font-size:15.5px;color:#4a4a4e}
/* Sprachen */
.langs{background:var(--flaeche);text-align:center}
.langs p{margin:0 auto 20px;max-width:34em;color:var(--grau)}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;list-style:none;margin:0;padding:0}
.chips a{display:block;background:#fff;color:var(--txt);text-decoration:none;font-weight:600;padding:10px 18px;border-radius:999px;font-size:16.5px;box-shadow:var(--schatten)}
.chips a:hover{background:var(--gelb-hell)}
/* FAQ */
.faq details{background:#fff;border:1px solid var(--linie);box-shadow:var(--schatten);border-radius:14px;margin:0 0 10px;padding:0}
.faq summary{cursor:pointer;font-weight:700;padding:14px 16px;font-size:16.5px;list-style:none;position:relative;padding-right:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:16px;top:9px;font-size:26px;line-height:1;color:var(--grau)}
.faq details[open] summary:after{content:"–"}
.faq details p{margin:0;padding:0 16px 16px;color:#4a4a4e}
/* CTA */
.final{background:linear-gradient(170deg,#FFF6CC 0%,#FFFBE8 40%,#FFFFFF 100%);text-align:center}
.final .lead{color:#4a4a4e}
.final .ctas{justify-content:center;max-width:560px;margin:0 auto}
/* Fuss */
footer{background:var(--flaeche);color:var(--grau);padding:28px 0 36px;font-size:14.5px;border-top:1px solid var(--linie)}
footer a{color:var(--txt);text-decoration:none;font-weight:600}footer a:hover{text-decoration:underline}footer .row{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:12px}
footer p{margin:0 0 8px}
/* Unterseiten */
.pagehead{background:linear-gradient(170deg,#FFF6CC 0%,#FFFBE8 40%,#FFFFFF 100%);padding:26px 0 22px;border-bottom:1px solid var(--linie)}
.pagehead h1{font-size:clamp(28px,7.4vw,44px);margin:6px 0 6px;line-height:1.1}
.pagehead p{margin:0 0 14px;font-size:18px;color:#3a3a3d}
.pagehead .ctas .btn{flex:0 1 auto}
.crumb{font-size:14px;font-weight:600;text-decoration:none;display:inline-block;padding:4px 0;color:var(--grau)}
.doc{padding:28px 0 56px;max-width:900px}
.doc h1{display:none}
.doc h2{font-size:clamp(20px,5.2vw,26px);margin:34px 0 12px;padding:10px 12px 10px 16px;border-left:4px solid var(--gelb);background:var(--flaeche);border-radius:0 12px 12px 0;line-height:1.25;scroll-margin-top:110px;font-weight:700}
.doc h3{font-size:18.5px;margin:20px 0 6px}
.doc p{margin:0 0 12px}
.doc ol.toc{columns:1;padding-left:26px}.doc ol.toc li{margin:3px 0}.doc ol.toc a{text-decoration:none;font-weight:600}.doc ol.toc a:hover{text-decoration:underline}
.doc ol.schritte{padding-left:0;list-style:none;counter-reset:s;margin:10px 0}
.doc ol.schritte li{counter-increment:s;position:relative;padding:3px 0 8px 40px}
.doc ol.schritte li:before{content:counter(s);position:absolute;left:0;top:3px;width:28px;height:28px;border-radius:50%;background:var(--gelb);font-weight:800;font-size:14px;display:grid;place-items:center}
.doc .tipp{background:#FFF9D6;border-radius:12px;padding:12px 14px;margin:12px 0;font-size:16px}.doc .tipp b{color:var(--gelb-braun)}
.doc .warn{background:#FFE9E6;border-radius:12px;padding:12px 14px;margin:12px 0;font-size:16px;color:#7a1d14}
.doc .zwei{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
.doc .bilder{display:flex;flex-wrap:wrap;gap:16px 12px;justify-content:center;margin:12px 0}
.doc .bilder figure{margin:0;flex:0 1 210px;min-width:0;text-align:center}
.doc .bilder img{width:100%;border-radius:22px;border:1px solid var(--linie);box-shadow:0 4px 16px rgba(0,0,0,.1);display:block;background:#fff}
.doc .bilder figcaption{font-size:13.5px;color:var(--grau);margin-top:6px;line-height:1.35}
.doc .raster{display:grid;grid-template-columns:1fr;gap:10px;margin:12px 0}
.doc .kachel{border:1px solid var(--linie);border-radius:14px;padding:10px 14px;background:#fff;box-shadow:var(--schatten);min-width:0}
.doc .kachel.full{grid-column:1/-1}.doc .kachel b{display:block;font-size:16.5px;margin-bottom:2px}.doc .kachel span{font-size:15px;color:#4a4a4e;line-height:1.45}
.doc .fuss{font-size:14px;color:var(--grau);margin-top:30px;border-top:1px solid var(--linie);padding-top:10px}
.doc img{max-width:100%}
.pdfbox{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:0 0 18px}
.pdfbox small{color:var(--grau)}
.hint{background:var(--gelb-hell);border-radius:12px;padding:12px 14px;font-size:15px;margin:0 0 20px}
.legal{max-width:760px;padding:30px 0 60px}.legal h1{font-size:clamp(28px,7.4vw,40px);margin:0 0 16px}.legal h2{font-size:21px;margin:26px 0 8px}
.legal .draft{background:#FFE9E6;border:1px solid #e8a39b;border-radius:12px;padding:12px 14px;color:#7a1d14;font-weight:600;margin:0 0 18px}
.legal .ph-mark{background:var(--gelb-hell);color:var(--gelb-braun);border-radius:6px;padding:1px 7px;font-weight:700;white-space:nowrap}
.legal a{text-decoration:underline}
@media(min-width:560px){.stats ul{grid-template-columns:repeat(4,1fr)}.tiles{grid-template-columns:1fr 1fr}.doc .zwei{grid-template-columns:1fr 1fr}.doc .raster{grid-template-columns:1fr 1fr}}
@media(min-width:900px){
 .doc .raster.r3{grid-template-columns:repeat(3,1fr)}
 .nav{display:flex}.lang{order:0;width:auto;background:none;padding:0}.lang a{flex:0 0 auto;padding:6px 11px}
 .hero{padding-top:56px}.hero .wrap{grid-template-columns:1.05fr .95fr;align-items:end}.hero .txt{padding-bottom:56px}
 .ph{width:min(11.5vw,160px)}.ph.mid{width:min(14vw,200px)}.phones{justify-content:flex-end}.hero .wrap>*{min-width:0}
 .tiles{grid-template-columns:repeat(4,1fr)}
 .spot .wrap{grid-template-columns:1fr 1fr}.spot.rev .pair{order:-1}
 .steps{grid-template-columns:repeat(3,1fr)}
 .doc ol.toc{columns:2}
 section{padding:72px 0}
}
@media(max-width:640px){
 .cmp,.cmp tbody,.cmp tr,.cmp td{display:block;width:100%}.cmp thead{display:none}
 .cmp tr{border-bottom:1px solid var(--linie);padding:10px 0}.cmp tr:last-child{border-bottom:0}
 .cmp td{border:0!important;padding:3px 14px!important;background:none!important}
 .cmp td:first-child{font-weight:700;font-size:17px}
 .cmp td:nth-child(2):before,.cmp td:nth-child(3):before{content:attr(data-l) ": ";font-weight:600;font-size:13px;color:var(--grau)}
 .cmp td:nth-child(2){background:#FFFDF0!important;font-weight:700}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}