@font-face{font-family:"Bricolage";src:url(/assets/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Literata";src:url(/assets/fonts/literata.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url(/assets/fonts/literata-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}

:root{
  --clinic:#F4F7F8;   /* kühles Praxisweiß */
  --paper:#FFFFFF;
  --ink:#16262C;      /* Text */
  --physio:#0D5361;   /* tiefes Petrol */
  --physio-2:#0A3F4A;
  --neo:#C6CDD1;      /* Neopren-Grau */
  --mint:#E2F0EC;
  --signal:#F3A81E;   /* CTA */
  --signal-2:#E0950A;
  --muted:#53656C;
  --ok:#1F8A5B; --no:#C2412D;
  --r-lg:28px; --r-sm:10px;
  --wrap:1160px; --text:680px;
  --serif:"Literata",Georgia,"Times New Roman",serif;
  --sans:"Bricolage",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--clinic);color:var(--ink);font:400 1.1875rem/1.72 var(--serif);font-optical-sizing:auto}
img{max-width:100%;height:auto;display:block}
a{color:var(--physio);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--physio-2)}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);line-height:1.12;letter-spacing:-.015em;margin:0 0 .5em;font-weight:720;overflow-wrap:break-word;hyphens:manual}
@media (max-width:520px){h2,h3{hyphens:auto;-webkit-hyphens:auto}}
h1{font-size:clamp(2.1rem,1.4rem + 3.1vw,3.6rem);letter-spacing:-.03em;font-weight:780}
h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.35rem);letter-spacing:-.025em;margin-top:1.6em}
h3{font-size:1.32rem;margin-top:1.4em}
p{margin:0 0 1.05em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:8px 12px}

/* Hinweisleiste + Header */
.disclose{background:var(--physio-2);color:#d9e8ea;font:500 .82rem/1.4 var(--sans);text-align:center;padding:7px 14px}
.disclose a{color:#fff}
.hdr{background:var(--paper);border-bottom:1px solid #e1e7ea;position:sticky;top:0;z-index:20}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:66px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:780 1.22rem/1 var(--sans);letter-spacing:-.03em}
.logo svg{flex:none}
.logo b{font-weight:inherit}.logo span{color:var(--physio)}
.nav{display:flex;gap:4px;align-items:center;font:560 .95rem/1 var(--sans)}
.nav a{color:var(--ink);text-decoration:none;padding:10px 11px;border-radius:999px}
.nav a:hover,.nav a[aria-current=page]{background:var(--mint);color:var(--physio-2)}
.nav .navcta{background:var(--signal);color:var(--ink);font-weight:700;margin-left:6px}
.nav .navcta:hover{background:var(--signal-2);color:var(--ink)}
.menu{display:none}
@media (max-width:980px){
  .nav{display:none}
  .menu{display:block;position:relative}
  .menu summary{list-style:none;cursor:pointer;font:650 .95rem/1 var(--sans);padding:11px 14px;border:1px solid #d5dde0;border-radius:999px}
  .menu summary::-webkit-details-marker{display:none}
  .menu[open] .menu-panel{display:flex}
  .menu-panel{display:none;flex-direction:column;position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid #dbe3e6;border-radius:16px;padding:8px;min-width:260px;box-shadow:0 18px 40px -18px rgba(13,83,97,.35)}
  .menu-panel a{padding:11px 12px;border-radius:10px;text-decoration:none;color:var(--ink);font:560 1rem/1.2 var(--sans)}
  .menu-panel a:hover{background:var(--mint)}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;background:var(--signal);color:var(--ink);font:740 1.08rem/1.15 var(--sans);text-decoration:none;padding:17px 28px;border-radius:999px;box-shadow:0 2px 0 var(--signal-2);text-align:center;transition:background .15s,transform .15s}
.btn:hover{background:var(--signal-2);color:var(--ink);transform:translateY(-1px)}
.btn.big{font-size:1.2rem;padding:20px 34px}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 2px var(--physio);color:var(--physio)}
.btn.ghost:hover{background:var(--mint)}
.btn small{font-weight:500;font-size:.8em;opacity:.8}

/* Perforation – das Neopren-Lochmuster */
.perf{background-color:var(--physio);background-image:radial-gradient(circle,rgba(255,255,255,.16) 2.1px,transparent 2.6px);background-size:17px 17px}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--paper);border-bottom:1px solid #e1e7ea}
.hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;padding-top:58px;padding-bottom:64px}
.hero h1{max-width:17ch}
.lead{font-size:1.28rem;line-height:1.6;color:#2c3f46;max-width:36ch}
.ticks{list-style:none;padding:0;margin:22px 0 28px;font:560 1.05rem/1.45 var(--sans)}
.ticks li{position:relative;padding-left:36px;margin:0 0 11px}
.ticks li::before{content:"";position:absolute;left:0;top:.08em;width:24px;height:24px;border-radius:50%;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8' fill='none' stroke='%230D5361' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.pricehint{font:500 1rem/1.4 var(--sans);color:var(--muted);margin-top:14px}
.pricehint b{color:var(--ink)}
.window{position:relative;justify-self:center;width:min(100%,500px);aspect-ratio:5/6}
.window .perf{position:absolute;inset:0;border-radius:46% 46% 44% 44%/40% 40% 52% 52%}
.window .ring{position:absolute;inset:9%;border-radius:50%/46%;overflow:hidden;box-shadow:0 0 0 10px rgba(255,255,255,.9),0 30px 60px -20px rgba(10,63,74,.55)}
.window .ring img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.badge70{position:absolute;right:-6px;top:6%;width:122px;height:122px;border-radius:50%;background:var(--signal);display:grid;place-items:center;text-align:center;font:800 2.1rem/0.95 var(--sans);letter-spacing:-.04em;color:var(--ink);transform:rotate(-9deg);box-shadow:0 12px 26px -12px rgba(0,0,0,.45)}
.badge70 small{display:block;font-size:.85rem;font-weight:650;letter-spacing:0;margin-top:3px}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:34px;padding-top:34px}.window{width:min(70%,320px);order:-1}.badge70{width:96px;height:96px;font-size:1.65rem;right:-10px}}

/* Sektionen */
.sec{padding:76px 0}
.sec.white{background:var(--paper)}
.sec.tint{background:var(--mint)}
.sec h2:first-child{margin-top:0}
.intro{max-width:var(--text)}
.sec-head{max-width:760px;margin-bottom:34px}

.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 40px}
.feat h3{margin:.6em 0 .35em;font-size:1.2rem}
.feat p{font-size:1.04rem;line-height:1.62;margin:0;color:#2f4248}
.feat .ic{width:46px;height:46px;border-radius:50%;background:var(--physio);display:grid;place-items:center}
@media (max-width:860px){.feat{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.feat{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev>:first-child{order:2}
.split figure{margin:0 auto;width:100%}
.split img{border-radius:var(--r-lg)}
figcaption{font:500 .9rem/1.4 var(--sans);color:var(--muted);margin-top:10px}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:28px}.split.rev>:first-child{order:0}}

/* Schritte (echte Abfolge) */
.steps{counter-reset:s;list-style:none;padding:0;margin:26px 0;display:grid;gap:18px}
.steps li{counter-increment:s;position:relative;padding:4px 0 4px 64px;min-height:46px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:46px;height:46px;border-radius:50%;background:var(--physio);color:#fff;display:grid;place-items:center;font:760 1.2rem/1 var(--sans)}
.steps b{font-family:var(--sans);font-weight:700}

/* Preis-Tabelle */
.packs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:30px 0 18px}
.pack{background:#fff;border:1.5px solid #d7e0e3;border-radius:20px;padding:22px 18px 20px;text-align:center;position:relative;display:flex;flex-direction:column}
.pack.best{border:2.5px solid var(--physio);box-shadow:0 22px 40px -26px rgba(13,83,97,.6)}
.pack .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--physio);color:#fff;font:650 .8rem/1 var(--sans);padding:7px 12px;border-radius:999px;white-space:nowrap}
.pack .qty{font:780 1.5rem/1.1 var(--sans);margin:6px 0 2px}
.pack .per{font:780 2rem/1 var(--sans);color:var(--physio);margin:12px 0 2px;letter-spacing:-.03em}
.pack .per small{font-size:.9rem;font-weight:550;color:var(--muted);letter-spacing:0}
.pack .tot{font:500 .95rem/1.35 var(--sans);color:var(--muted);margin:8px 0 16px}
.pack .btn{margin-top:auto;padding:14px 16px;font-size:1rem}
@media (max-width:900px){.packs{grid-template-columns:1fr 1fr;gap:22px 14px}}
.small{font-size:.92rem;line-height:1.55;color:var(--muted)}

/* Kästen */
.box{background:#fff;border-radius:20px;padding:24px 26px;margin:28px 0;border-left:6px solid var(--physio)}
.box.warn{border-left-color:var(--signal)}
.box h3{margin-top:0}
.box p:last-child,.box ul:last-child{margin-bottom:0}
.procon{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:26px 0}
.procon>div{background:#fff;border-radius:20px;padding:22px 24px}
.procon h3{margin:0 0 .6em;font-size:1.15rem}
.procon ul{list-style:none;padding:0;margin:0}
.procon li{position:relative;padding-left:32px;margin:0 0 10px;font-size:1.02rem;line-height:1.5}
.procon li::before{position:absolute;left:0;top:.05em;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:800 .8rem/1 var(--sans);color:#fff}
.procon .pro li::before{content:"✓";background:var(--ok)}
.procon .con li::before{content:"✕";background:var(--no)}
@media (max-width:700px){.procon{grid-template-columns:1fr}}

table.spec{width:100%;border-collapse:collapse;margin:24px 0;background:#fff;border-radius:16px;overflow:hidden;font:450 1rem/1.45 var(--sans)}
.spec th,.spec td{text-align:left;padding:13px 16px;border-bottom:1px solid #e3e9eb;vertical-align:top}
.spec th{width:38%;font-weight:650;color:var(--physio-2);background:#f8fbfb}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.cmp{width:100%;min-width:560px;border-collapse:collapse;margin:24px 0;background:#fff;font:450 .98rem/1.45 var(--sans);border-radius:16px;overflow:hidden}
.cmp th,.cmp td{padding:12px 14px;border-bottom:1px solid #e3e9eb;text-align:left;vertical-align:top}
.cmp thead th{background:var(--physio);color:#fff;font-weight:650}
.cmp td:first-child{font-weight:600}

/* FAQ */
.faq{margin:26px 0}
.faq details{background:#fff;border-radius:16px;margin:0 0 12px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;font:680 1.1rem/1.35 var(--sans);padding:19px 34px 19px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:15px;font:500 1.6rem/1 var(--sans);color:var(--physio);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 0 18px;font-size:1.05rem}

/* CTA-Band */
.band{color:#fff;border-radius:var(--r-lg);padding:46px 44px;display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center;margin:40px 0}
.band h2,.band h3{color:#fff;margin:0 0 .3em}
.band p{margin:0;color:#d8eaec;font-size:1.06rem}
.band img{width:150px;height:150px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 6px rgba(255,255,255,.85)}
@media (max-width:860px){.band{grid-template-columns:1fr;text-align:center;padding:36px 24px;gap:20px}.band img{margin:0 auto;width:132px;height:132px}}

/* Artikel-Layout */
.phead{background:var(--paper);border-bottom:1px solid #e1e7ea;padding:42px 0 38px}
.crumbs{font:500 .88rem/1.4 var(--sans);color:var(--muted);margin-bottom:16px}
.crumbs a{color:var(--muted)}
.phead h1{max-width:22ch;font-size:clamp(2rem,1.4rem + 2.4vw,3.1rem)}
.phead .lead{max-width:56ch}
.meta{font:500 .9rem/1.4 var(--sans);color:var(--muted);margin-top:14px}
.article .wrap{display:grid;grid-template-columns:minmax(0,var(--text)) 300px;gap:60px;justify-content:space-between;padding-top:44px;padding-bottom:70px}
.prose>*:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1.1em}
.prose li{margin:0 0 .45em}
.prose figure{margin:30px auto}
.prose figure img{border-radius:22px}
.inline-cta{margin:30px 0;padding:22px 24px;background:#fff;border-radius:20px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.inline-cta p{margin:0;font:600 1.05rem/1.4 var(--sans);flex:1 1 260px}
.side{position:relative}
.sidebox{position:sticky;top:92px;background:#fff;border-radius:24px;padding:22px;text-align:center;border:1px solid #dfe6e9}
.sidebox img{width:180px;height:180px;margin:0 auto 6px;border-radius:50%;object-fit:cover}
.sidebox .t{font:760 1.15rem/1.25 var(--sans);margin:8px 0 6px}
.sidebox .p{font:500 .98rem/1.45 var(--sans);color:var(--muted);margin:0 0 14px}
.sidebox .p b{color:var(--physio);font-size:1.25rem}
.sidebox .btn{width:100%;padding:15px 12px}
.sidebox ul{list-style:none;padding:0;margin:14px 0 0;text-align:left;font:500 .9rem/1.4 var(--sans);color:#33474e}
.sidebox li{padding-left:22px;position:relative;margin:0 0 7px}
.sidebox li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
.toc{background:#fff;border-radius:18px;padding:18px 22px;margin:0 0 30px;font:500 1rem/1.5 var(--sans)}
.toc b{display:block;margin-bottom:6px}
.toc ol{margin:0;padding-left:1.2em}
@media (max-width:1020px){.article .wrap{grid-template-columns:minmax(0,1fr);gap:20px}.side{order:2}.sidebox{position:static;max-width:420px;margin:0 auto}}

/* Weiterlesen */
.more{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.more a{display:block;background:#fff;border-radius:18px;padding:20px 22px;text-decoration:none;color:var(--ink);border:1px solid #dde5e8}
.more a:hover{border-color:var(--physio)}
.more b{display:block;font:700 1.08rem/1.3 var(--sans);margin-bottom:6px;color:var(--physio-2)}
.more span{font-size:.98rem;line-height:1.5;color:#3b4f56}
@media (max-width:860px){.more{grid-template-columns:1fr}}

/* Footer */
.ftr{background:var(--physio-2);color:#cfe0e3;padding:54px 0 34px;font:450 .95rem/1.6 var(--sans)}
.ftr a{color:#fff}
.ftr .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.ftr h4{color:#fff;font-size:1rem;margin:0 0 10px}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin:0 0 6px}
.ftr .legal{border-top:1px solid rgba(255,255,255,.15);margin-top:34px;padding-top:20px;font-size:.86rem;color:#a9c3c8}
@media (max-width:760px){.ftr .cols{grid-template-columns:1fr}}

/* Mobile Sticky-CTA */
.mcta{display:none}
@media (max-width:760px){
  .mcta{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:30;background:var(--signal);color:var(--ink);border-radius:999px;justify-content:center;align-items:center;padding:15px 18px;font:740 1.02rem/1.1 var(--sans);text-decoration:none;box-shadow:0 10px 26px -8px rgba(0,0,0,.45)}
  body{padding-bottom:78px}
}
.legaltext h2{font-size:1.4rem;margin-top:1.5em}
@media (max-width:560px){body{font-size:1.0625rem;line-height:1.68}.lead{font-size:1.14rem}}
.prose .packs{grid-template-columns:1fr 1fr;gap:24px 16px}.pack .per small{display:block;margin-top:4px}
