
/*
Theme Name: FAS Onepage
Description: Ein leichtes Onepage-Theme für F.A.S. – Frankensabrechnungsservice.
Version: 1.0.0
Text Domain: fas-onepage
*/
:root{--brand:#0d3b66;--brand-2:#00b3a4;--ink:#1b1f24;--muted:#5c6975;--bg:#ffffff;--section:#f5f7fa;--ring:rgba(13,59,102,.35);--radius:16px;--shadow:0 10px 24px rgba(13,59,102,.08), 0 2px 6px rgba(0,0,0,.04)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.55;color:var(--ink);background:var(--bg)}a{color:var(--brand);text-decoration:none}img{max-width:100%;display:block}.container{width:min(1200px, 92%);margin-inline:auto}.grid{display:grid;gap:24px}
header.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e6edf5}.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}.logo{display:flex;align-items:center;gap:12px}.logo img{height:auto;width:auto;max-height:none}nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0}nav a{display:inline-block;padding:8px 10px;color:var(--ink);border-radius:10px}nav a:hover{background:#f1f6fb}
.btn{display:inline-flex;align-items:center;gap:10px;border:none;border-radius:999px;padding:12px 18px;font-weight:600;cursor:pointer}.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow)}.btn-primary:hover{filter:brightness(1.05)}.btn-outline{background:#fff;border:1px solid #cfe0ef}.hamburger{display:none;background:transparent;border:none;padding:10px;border-radius:10px}.hamburger:focus{outline:3px solid var(--ring)}#menu{display:flex;align-items:center;gap:18px}
@media (max-width:900px){#menu{display:none;position:absolute;inset:58px 0 auto 0;background:#fff;border-bottom:1px solid #e6edf5;padding:14px 4%}#menu.open{display:grid}nav ul{flex-direction:column}.hamburger{display:inline-grid}}
.hero{position:relative;padding:72px 0 48px;background:radial-gradient(1000px 400px at 20% -10%, #e7f3ff, transparent), radial-gradient(1000px 400px at 120% 10%, #e8fffb, transparent)}
.hero-inner{display:grid;gap:32px;grid-template-columns:1.1fr .9fr;align-items:center}.kicker{color:var(--brand-2);font-weight:700;text-transform:uppercase;letter-spacing:.12em}.title{font-size:clamp(28px, 4.2vw, 48px);line-height:1.15;margin:8px 0 10px}.subtitle{font-size:clamp(16px,2.2vw,20px);color:var(--muted);max-width:54ch}.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero-card{background:#fff;border:1px solid #e6edf5;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);display:grid;gap:12px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.stat{background:var(--section);border-radius:12px;padding:16px;text-align:center}.stat b{font-size:20px}.illus{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;background:linear-gradient(145deg,#d6e8ff,#dffaf6)}
@media (max-width:900px){.hero-inner{grid-template-columns:1fr}}
section{padding:56px 0}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}.section-head h2{margin:0;font-size:clamp(22px,3.2vw,32px)}.section-head p{margin:0;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3, 1fr);gap:18px}.card{background:#fff;border:1px solid #e6edf5;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}.card h3{margin:6px 0 10px}.card p{margin:0;color:var(--muted)}.icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}.step{background:#fff;border:1px solid #e6edf5;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);position:relative}.step:before{counter-increment:step;content:counter(step);position:absolute;top:-14px;left:-14px;width:40px;height:40px;border-radius:12px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;box-shadow:var(--shadow)}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.quote{background:#fff;border:1px solid #e6edf5;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}.quote p{margin:0 0 10px}.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#cbd9ff,#e0fff9);display:inline-block;margin-right:10px}.byline{color:#667788}
@media (max-width:900px){.testimonials{grid-template-columns:1fr}}
.contact{display:grid;grid-template-columns:1fr;gap:24px}.contact .card{height:100%}form{display:grid;gap:14px;max-width:360px}label{font-weight:600;display:block;margin-bottom:6px}input, textarea, select{padding:12px;border:1px solid #d7e0ea;border-radius:12px;font:inherit;width:100%}input:focus, textarea:focus, select:focus{outline:3px solid var(--ring);border-color:var(--brand)}
footer.site-footer{background:var(--section);padding:28px 0;color:#44515e;border-top:1px solid #e6edf5}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}.small{font-size:14px;color:#667788}@media (max-width:900px){.footer-grid{grid-template-columns:1fr}}
.sticky-cta{position:fixed;right:20px;bottom:20px;z-index:40}.muted{color:var(--muted)}.badge{display:inline-block;background:#e9f7f5;color:#0b756b;border:1px solid #b8efe8;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}



/* === FAS mobile improvements (integrated) === */
/* Inputs at least 16px to prevent iOS zoom */
input, select, textarea { font-size: 16px; }
/* Ensure images never overflow */
img, video { max-width: 100%; height: auto; }
/* Avoid body horizontal scroll */
html, body { max-width: 100%; overflow-x: hidden; }
/* Sticky header safe area and scroll offset */
:root { --header-h: 72px; }
header.site-header { padding-top: env(safe-area-inset-top); }
section, .section, [id] { scroll-margin-top: calc(var(--header-h, 72px) + env(safe-area-inset-top)); }
/* Make elements with class .use-app-vh use dynamic viewport height */
:root { --app-vh: 100svh; }
.use-app-vh { min-height: var(--app-vh); }
/* Tap target size */
a, button { min-height: 44px; }
@supports not (height: 100dvh) {
  :root { --app-vh: 100vh; }
}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;overflow:visible;z-index:9999;background:#fff;padding:.5rem}
