:root{--ink:oklch(0.3 0.14 285);--text:oklch(0.25 0.03 275);--muted:oklch(0.35 0.03 275);--accent:oklch(0.45 0.14 285);--tint:oklch(0.93 0.04 285);--line:oklch(0.88 0.02 280);--card:oklch(0.955 0.015 280);--bg:oklch(0.98 0.006 275);--warm:oklch(0.83 0.15 82);--warm-d:oklch(0.77 0.15 78)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font:20px/1.55 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}a:hover{color:var(--ink)}
h1,h2,h3{font-weight:500;margin:0;line-height:1.2}h1{line-height:1.1}
header{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px clamp(20px,5vw,48px);border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:40}
.brand{font-size:26px;letter-spacing:.02em;text-decoration:none;color:inherit}
nav{order:2;margin-left:auto;display:flex;gap:28px;flex-wrap:wrap;align-items:center;font-size:19px}
.brand{order:1}
.btn-fs{order:3}
.menu-toggle{order:4}
.nav-check{order:4;position:absolute;opacity:0;width:44px;height:44px;margin:0;pointer-events:none}
.menu-toggle{display:none}
nav a{text-decoration:none;color:inherit}
nav .btn-nav{color:var(--ink);font-weight:600;border:2px solid var(--warm-d);background:var(--warm);border-radius:8px;padding:10px 18px}
nav .btn-nav:hover{background:var(--warm-d)}
section{padding:80px clamp(20px,5vw,48px);border-top:1px solid var(--line)}
section>*{max-width:1080px}
section h2{font-size:40px;margin-bottom:32px;font-weight:600}
section h2::before{content:"";display:block;width:56px;height:5px;border-radius:3px;background:var(--warm);margin-bottom:16px}
.sub{margin:-16px 0 40px;max-width:640px;color:var(--muted)}
.hero{border-top:0;padding-top:72px;padding-bottom:56px;background:radial-gradient(ellipse at 0% 0%,var(--tint),transparent 60%)}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;max-width:1080px}
.hero-art svg{display:block;width:100%;height:auto}
.hl{background:linear-gradient(transparent 62%,var(--warm) 62%,var(--warm) 92%,transparent 92%)}
h1{font-weight:600}
.kicker{font-size:18px;color:var(--accent);font-weight:500;margin:0 0 16px}
h1{font-size:60px;line-height:1.1;max-width:820px;margin-bottom:24px}
.lead{font-size:24px;max-width:640px;margin:0 0 40px;color:var(--muted)}
.actions{display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-block;font:inherit;font-size:22px;text-decoration:none;color:var(--ink);border:2px solid oklch(0.8 0.04 285);border-radius:8px;padding:16px 28px;background:none;cursor:pointer}
.btn:hover{background:var(--tint);color:var(--ink)}
.btn.primary{font-weight:600;border-color:var(--warm-d);background:var(--warm);color:var(--ink)}
.wa-link{display:inline-block;font-size:22px;font-weight:500;color:#0f5c35;margin:0 0 16px}
.btn.primary:hover{background:var(--warm-d);color:var(--ink)}
.grid{display:grid;gap:20px}
.cards{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ways{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px}
.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:56px}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:28px}
.card h3,.ways h3{font-size:24px;margin-bottom:8px;font-weight:600}
.card p,.ways p{margin:0;color:var(--muted);font-size:19px}
.tint{background:linear-gradient(180deg,oklch(0.95 0.025 285),var(--bg))}
#ueber-uns{background:var(--card)}
.num{display:block;font-size:56px;font-weight:500;color:oklch(0.55 0.13 285);line-height:1;padding-bottom:16px;margin-bottom:16px;border-bottom:2px solid oklch(0.55 0.13 285);width:48px;white-space:nowrap}
.price{margin:48px 0 0;max-width:720px;padding-top:24px;border-top:1px solid var(--line)}
.about{max-width:760px}.about p{margin:0 0 16px}.muted{color:var(--muted)}
.faq{max-width:800px}
details{border-top:1px solid var(--line);padding:20px 0}
summary{cursor:pointer;font-size:22px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent)}
details[open] summary::after{content:"–"}
details p{margin:12px 0 0;color:var(--muted)}
.contact{background:linear-gradient(180deg,var(--bg),oklch(0.94 0.04 285));padding-bottom:96px}
.small{font-size:18px;margin:0}
.bigtel{font-size:34px;font-weight:500;text-decoration:none;display:block;margin-bottom:16px}
form{display:grid;gap:20px}
form label{display:grid;gap:8px;font-size:19px}
input,textarea{width:100%;font:inherit;font-size:22px;padding:14px 16px;border:2px solid oklch(0.75 0.04 285);border-radius:8px;background:oklch(0.99 0.004 275);color:inherit}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:2px}
textarea{resize:vertical}
form .btn{justify-self:start}
footer{padding:28px clamp(20px,5vw,48px);font-size:17px;color:var(--muted);display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;border-top:1px solid var(--line)}
.legal{display:flex;gap:24px}
@media(max-width:700px){section{padding-top:48px;padding-bottom:56px}.hero{padding-top:48px}h1{font-size:36px}section h2{font-size:30px}nav{gap:14px;font-size:17px}nav .btn-nav{display:none}.btn{font-size:20px;padding:16px 20px;white-space:nowrap}}

/* Blog */
.prose-wrap{padding:32px clamp(20px,5vw,48px) 64px}
.prose{max-width:760px;margin:0 auto}
.prose h1{font-size:44px;margin-bottom:20px}
.prose h2{font-size:30px;margin:40px 0 12px}
.prose p,.prose li{max-width:70ch}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 16px}
.prose li{margin-bottom:8px}
.prose .lead{font-size:22px;color:var(--muted);margin:0 0 24px}
.crumbs{font-size:17px;color:var(--muted);margin:0 0 20px}
.compare{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:18px}
.compare{table-layout:fixed}
.compare th,.compare td{border:1px solid var(--line);padding:12px;text-align:left;vertical-align:top;overflow-wrap:anywhere;hyphens:auto}
.compare th{background:var(--card)}
.cta-box{margin:48px 0 0;padding:28px;background:var(--card);border:1px solid var(--line);border-radius:8px}
.cta-box h2{margin:0 0 8px;font-size:28px}
.cta-box p{margin:0 0 20px}
.posts{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.post{display:block;text-decoration:none;color:inherit}
.post:hover{border-color:var(--accent)}
.post h3{color:var(--ink)}
.post .more{display:inline-block;margin-top:12px;color:var(--accent);font-weight:500;font-size:18px}
@media(max-width:700px){.prose h1{font-size:32px}.prose h2{font-size:26px}.compare{font-size:16px}.compare th,.compare td{padding:8px}}

.meta{font-size:17px;color:var(--muted);margin:-8px 0 20px}
.post-list{display:grid;gap:0;margin:8px 0 8px}
.post-item{display:block;text-decoration:none;color:inherit;padding:24px 0;border-top:1px solid var(--line)}
.post-item:last-child{border-bottom:1px solid var(--line)}
.post-item time{display:block;font-size:17px;color:var(--muted);margin-bottom:6px}
.post-item h2{font-size:28px;margin:0 0 8px;color:var(--ink)}
.post-item p{margin:0;color:var(--muted)}
.post-item .more{display:inline-block;margin-top:12px;color:var(--accent);font-weight:500;font-size:18px}
.post-item:hover h2{text-decoration:underline}
@media(max-width:700px){.post-item h2{font-size:24px}}

/* Fester Anruf-Knopf (nur Handy) */
.call-fab{display:none}
@media(max-width:700px){
  .call-fab{display:block;position:fixed;left:16px;right:16px;bottom:16px;z-index:50;text-align:center;font-size:22px;font-weight:500;text-decoration:none;color:#fff;background:var(--accent);border:2px solid var(--accent);border-radius:12px;padding:16px 20px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
  .call-fab:hover,.call-fab:focus{color:#fff;background:var(--ink)}
  body{padding-bottom:88px}
}
/* Schriftgrössen-Knopf */
.btn-fs{font:inherit;font-size:18px;font-weight:600;color:var(--ink);background:none;border:2px solid var(--accent);border-radius:8px;padding:6px 14px;min-height:44px;min-width:52px;cursor:pointer}
.btn-fs:hover{background:var(--tint)}
.btn-fs[hidden]{display:none}
html.big body{font-size:24px}
html.big .lead,html.big .prose .lead{font-size:27px}
html.big nav,html.big .card p,html.big .ways p,html.big .post-item p,html.big .crumbs,html.big .small{font-size:22px}
html.big .btn,html.big summary,html.big input,html.big textarea,html.big .call-fab{font-size:24px}
html.big form label{font-size:22px}
html.big .compare{font-size:20px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
html.big .btn{white-space:normal;text-align:center}

.more-link{margin:12px 0 0!important;font-size:18px!important}
.related{padding-left:1.2em}

/* Icons, Karten, Vertrauensleiste */
.i{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:14px;background:var(--tint);color:var(--accent);margin-bottom:16px}
.way .ico{background:#fff}
.card{transition:border-color .15s,transform .15s,box-shadow .15s}
.cards .card:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(60,40,140,.10)}
.post:hover{transform:translateY(-2px)}
.trust{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;max-width:1080px}
.trust li{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.trust .ico{margin:0;flex:none;width:48px;height:48px;background:var(--warm);color:var(--ink)}
.trust strong{display:block;font-size:20px;font-weight:600;color:var(--ink)}
.trust span{font-size:18px;color:var(--muted);line-height:1.4}
.way h3{margin-bottom:8px}
.num{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--accent);color:#fff;font-size:30px;font-weight:600;line-height:1;padding:0;border:0;margin-bottom:20px}
.contact{background:var(--ink);color:#fff;border-top:0}
.contact h2{color:#fff}.contact .sub,.contact p{color:oklch(0.92 0.02 285)}
.contact a{color:#fff}.contact a:hover{color:var(--warm)}
.contact .bigtel{color:var(--warm);font-size:40px}
.contact .wa-link{color:#fff;text-decoration-thickness:2px}
.contact form label{color:#fff}
.contact .btn.primary{color:var(--ink)}
/* Menü (Handy) */
.menu-toggle,.btn-fs{font:inherit;font-size:18px;font-weight:600;color:var(--ink);background:#fff;border:2px solid var(--accent);border-radius:10px;padding:0 16px;min-height:46px;min-width:52px;cursor:pointer;align-items:center;justify-content:center}
.menu-toggle:hover,.btn-fs:hover{background:var(--tint)}
.nav-check:focus-visible+.menu-toggle{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr}.hero-art{max-width:420px;margin:8px auto 0}}
@media(max-width:700px){
  header{gap:12px;padding-top:12px;padding-bottom:12px}
  .brand{font-size:24px;font-weight:600}
  .btn-fs{margin-left:auto}
  .menu-toggle{display:inline-flex}
  nav{order:5;display:none;width:100%;margin:0;flex-direction:column;align-items:stretch;gap:0;font-size:21px;border-top:1px solid var(--line)}
  .nav-check:checked~nav{display:flex}
  .nav-check:checked+.menu-toggle{background:var(--tint)}
  nav a{padding:14px 4px;border-bottom:1px solid var(--line)}
  .hero{padding-bottom:40px}
  .actions .btn{width:100%;text-align:center}
  .trust{margin-top:32px}
  .contact .bigtel{font-size:34px}
  .call-fab{background:var(--warm)!important;border-color:var(--warm-d)!important;color:var(--ink)!important}
  .call-fab:hover,.call-fab:focus{background:var(--warm-d)!important;color:var(--ink)!important}
}
html.big .menu-toggle,html.big .btn-fs{font-size:20px}
html.big .trust span{font-size:21px}

/* Blog-Karten und -Liste mit Icon */
.post-art{display:grid;place-items:center;height:120px;margin:-28px -28px 20px;border-radius:8px 8px 0 0}
.post-art .i{width:72px;height:72px;padding:18px;border-radius:50%;background:#fff;color:var(--accent);box-shadow:0 2px 8px rgba(60,40,140,.12)}
.a1{background:linear-gradient(135deg,oklch(0.95 0.04 285),oklch(0.88 0.07 285))}
.a2{background:linear-gradient(135deg,oklch(0.96 0.06 90),oklch(0.89 0.11 82))}
.a3{background:linear-gradient(135deg,oklch(0.42 0.14 285),oklch(0.3 0.14 285))}
.a2 .i{color:var(--ink)}
.post-item{display:grid;grid-template-columns:72px 1fr;gap:20px;align-items:start}
.post-ico{display:grid;place-items:center;width:72px;height:72px;border-radius:16px;color:var(--accent)}
.post-ico .i{width:36px;height:36px}
.post-ico.a3{color:#fff}
.post-ico.a2{color:var(--ink)}
.post-body{min-width:0}
@media(max-width:700px){.post-item{grid-template-columns:56px 1fr;gap:14px}.post-ico{width:56px;height:56px;border-radius:12px}.post-ico .i{width:28px;height:28px}}
/* Hero auf Handy: Illustration direkt nach dem Einleitungstext */
@media(max-width:900px){
  .hero-inner{display:flex;flex-direction:column;gap:0}
  .hero-text{display:contents}
  .hero-text .kicker{order:1}.hero-text h1{order:2}.hero-text .lead{order:3}
  .hero-art{order:4;width:min(100%,300px);margin:0 auto 28px}
  .hero-text .actions{order:5;width:100%}
  .hero-text .lead{margin-bottom:20px}
}

.post-item time{display:inline}
.post-item .post-body{font-size:17px;color:var(--muted)}
.post-item .post-body time{font-size:inherit}
.post-item .post-body p{font-size:19px}

/* Knopf-Hierarchie: 1 Anrufen (Bernstein), 2 WhatsApp (grün), 3 Rückruf (dezent) */
.btn.wa{border-color:#1a7f4b;color:#0f5c35;background:#fff;font-weight:500}
.btn.wa:hover{background:#e3f6ec;color:#0f5c35}
.hero .btn:not(.primary):not(.wa){color:var(--accent);font-size:20px}
.btn.primary{box-shadow:0 2px 0 var(--warm-d)}

/* Mobile Navigation: nur Hamburger, A+ im Menü */
.menu-toggle .bars{position:relative;display:block;width:22px;height:2.5px;background:currentColor;border-radius:2px;transition:background .15s}
.menu-toggle .bars::before,.menu-toggle .bars::after{content:"";position:absolute;left:0;width:22px;height:2.5px;background:currentColor;border-radius:2px;transition:transform .2s}
.menu-toggle .bars::before{transform:translateY(-7px)}
.menu-toggle .bars::after{transform:translateY(7px)}
.nav-check:checked+.menu-toggle .bars{background:transparent}
.nav-check:checked+.menu-toggle .bars::before{transform:rotate(45deg)}
.nav-check:checked+.menu-toggle .bars::after{transform:rotate(-45deg)}
nav .btn-fs{min-height:44px}
@media(max-width:700px){
  .menu-toggle{margin-left:auto;min-width:48px;padding:0 13px}
  nav .btn-fs{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;margin:12px 0 4px;padding:0 16px;min-height:50px;font-size:19px}
  nav .btn-fs[hidden]{display:none}
  nav .btn-fs::after{content:"Schrift grösser";font-weight:500}
  html.big nav .btn-fs::after{content:"Schrift kleiner"}
  nav{padding-bottom:8px}
}

/* Blog-Karten: höhere Header, einheitliche weisse Icons, Hover */
.post-art{height:150px;margin:-28px -28px 20px}
.post-art .i{width:84px;height:84px;padding:20px;background:rgba(255,255,255,.16);color:#fff;box-shadow:none}
.a1,.a2,.a3{background:linear-gradient(135deg,oklch(0.52 0.15 285),oklch(0.4 0.14 285))}
.a2{background:linear-gradient(135deg,oklch(0.5 0.14 305),oklch(0.4 0.13 295))}
.a3{background:linear-gradient(135deg,oklch(0.4 0.14 285),oklch(0.28 0.13 285))}
.a2 .i{color:#fff}
.post-ico.a1,.post-ico.a2,.post-ico.a3{color:#fff}
.post{transition:transform .18s,box-shadow .18s,border-color .18s}
.post:hover,.post:focus-visible{transform:translateY(-4px);box-shadow:0 10px 24px rgba(60,40,140,.18);border-color:var(--accent)}
.post .more{transition:transform .18s}
.post:hover .more{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.post,.post .more{transition:none}.post:hover{transform:none}}

/* Ratgeber-Links in den Leistungs-Karten als dezente Tags */
.more-link{margin:16px 0 0!important}
.more-link a{display:inline-block;font-size:15px;line-height:1.35;color:var(--muted);text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:18px;padding:5px 12px}
.more-link a:hover{color:var(--accent);border-color:var(--accent)}

/* Kontakt: grössere Telefonnummer, Hinweis */
.contact .bigtel{font-size:48px;line-height:1.1;margin-bottom:20px}
.form-note{margin:0;font-size:17px;color:oklch(0.92 0.02 285)}
@media(max-width:700px){.contact .bigtel{font-size:40px}}

/* Mehr Luft zwischen den Abschnitten */
section{padding-top:96px;padding-bottom:96px}
@media(max-width:700px){section{padding-top:64px;padding-bottom:64px}.hero{padding-top:40px;padding-bottom:40px}}
.hero{padding-top:72px;padding-bottom:56px}
#blog,#fragen{padding-top:112px}
@media(max-width:700px){#blog,#fragen{padding-top:72px}}
section h2::before{flex:none}
html.big .more-link a{font-size:19px}

/* Glossar */
.az{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.az a{display:grid;place-items:center;min-width:44px;height:44px;padding:0 6px;font-weight:600;text-decoration:none;color:var(--accent);background:var(--tint);border:1px solid var(--line);border-radius:10px}
.az a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.gl-group h2{margin:48px 0 8px;padding-bottom:8px;border-bottom:3px solid var(--warm);display:inline-block;min-width:64px;scroll-margin-top:96px}
dl.glossary{margin:0}
.glossary dt{font-size:24px;font-weight:600;color:var(--ink);margin:28px 0 6px;scroll-margin-top:96px}
.glossary dd{margin:0}
.glossary dd p{margin:0 0 10px;max-width:70ch}
.glossary .gl-tip{padding:10px 14px;background:var(--card);border-left:4px solid var(--warm);border-radius:0 8px 8px 0}
.glossary .gl-see{font-size:17px;color:var(--muted)}
.glossary dt:target{background:linear-gradient(90deg,var(--tint),transparent);border-radius:6px;padding-left:8px;margin-left:-8px}
html.big .glossary dt{font-size:28px}
html.big .glossary .gl-see{font-size:20px}
@media(max-width:700px){.glossary dt{font-size:22px}.az a{min-width:42px;height:42px}}

.gl-group h2{font-weight:600;color:var(--ink)}
.glossary .gl-blog{margin-top:-4px;white-space:nowrap}
/* Navigation auf Tablet und kleinen Laptops: Menüpunkt "Glossar" braucht Platz */
@media(min-width:1011px) and (max-width:1180px){
  nav{gap:18px;font-size:18px}
  nav .btn-nav{padding:9px 14px}
}
@media(min-width:701px) and (max-width:1010px){
  header{gap:12px;padding-top:12px;padding-bottom:12px}
  .menu-toggle{display:inline-flex;margin-left:auto;min-width:48px;padding:0 13px}
  nav{order:5;display:none;width:100%;margin:0;flex-direction:column;align-items:stretch;gap:0;font-size:21px;border-top:1px solid var(--line);padding-bottom:8px}
  .nav-check:checked~nav{display:flex}
  .nav-check:checked+.menu-toggle{background:var(--tint)}
  nav a{padding:14px 4px;border-bottom:1px solid var(--line)}
  nav a.btn-nav{display:block;text-align:center;margin:14px 0 4px;padding:14px;border:2px solid var(--warm-d)}
  nav .btn-fs{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;margin:12px 0 4px;padding:0 16px;min-height:50px;font-size:19px}
  nav .btn-fs[hidden]{display:none}
  nav .btn-fs::after{content:"Schrift grösser";font-weight:500}
  html.big nav .btn-fs::after{content:"Schrift kleiner"}
}

/* Anruf-Knopf auf dem Handy: kleiner runder Knopf mit Telefon-Symbol */
@media(max-width:700px){
  .call-fab,html.big .call-fab{display:grid;place-items:center;left:auto;right:16px;bottom:16px;width:58px;height:58px;padding:0;border-radius:50%;font-size:0;box-shadow:0 4px 14px rgba(0,0,0,.28)}
  .call-fab .i{width:28px;height:28px;stroke-width:2}
  body{padding-bottom:84px}
}