/* Variant B: not the app's look. Editorial: paper and ink, a serif headline, ONE accent colour, square corners, thin rules, a dark footer.
   Same content and structure as variant A; only this stylesheet differs (it builds on site.css and overrides). */
:root{
  --bg:#FDFBF8;--surface:#F5F1EA;--field:#F5F1EA;--rule:rgba(20,18,15,.28);--rule-weak:rgba(20,18,15,.14);
  --ink:#1A1412;--ink-2:#54483F;--ink-3:#6B6559;--ok:#2E6B4F;--accent:#7D1F2E;--accent-ink:#5E1622;
  --serif:"Source Serif 4","Iowan Old Style",Georgia,"Times New Roman",serif;
}
body{background:var(--bg);color:var(--ink)}
.grad{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--accent);font-style:italic}

/* header */
.top{background:rgba(248,244,238,.92);border-bottom:1px solid var(--rule)}
.brand{font:800 25px/1 'Manrope',sans-serif;letter-spacing:-.02em;color:var(--ink);position:relative;top:-2px}
.nav{font-size:13.5px;font-weight:500;letter-spacing:.01em}
.lang{border-radius:2px;border-color:var(--rule)}
.btn{border-radius:2px;font-weight:600;letter-spacing:.01em}
.btn.fill{background:var(--accent);color:#fff;box-shadow:none}
.btn.fill:hover{background:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}
.menu-btn{border-radius:2px;border-color:var(--ink)}
@media(max-width:1199px){.top.open .nav{background:var(--bg)}}

/* hero */
.hero{padding:84px 0 70px}
.halo{display:none}
.kicker::before{border-radius:0;background:var(--accent);width:9px;height:9px}
.mono{color:var(--ink-3);letter-spacing:.1em}
h1{font:400 clamp(38px,5.2vw,72px)/1.02 var(--serif);letter-spacing:-.025em}
.lead{font-size:19px;line-height:1.6;color:var(--ink-2)}
.reach{border-top:1px solid var(--rule);padding-top:16px;color:var(--ink-3)}
.c-dot{stroke:var(--ink)!important}
.c-target{stroke:var(--accent)!important}
.c-marker{stroke:var(--accent)!important}

/* strip */
.strip{border-block:1px solid var(--ink)}
.strip .cell{border-left:1px solid var(--rule)}
.strip .num{font:400 52px/1 var(--serif);letter-spacing:-.02em;background:none;color:var(--ink);-webkit-background-clip:initial;background-clip:initial}
.strip .txt{color:var(--ink-2)}

/* sections */
section.s{border-bottom:1px solid var(--rule)}
.s-head h2{font:400 clamp(30px,4vw,52px)/1.08 var(--serif);letter-spacing:-.02em}
.s-head p{color:var(--ink-2)}
.s-no::before{content:"";display:inline-block;width:8px;height:8px;background:var(--accent);margin-right:10px}
.pill-tag{border-radius:0;border-color:var(--accent);color:var(--accent-ink)}
.quote{font:italic 400 clamp(28px,3.8vw,50px)/1.12 var(--serif);letter-spacing:-.02em}
.quote .grad{font-style:italic}
.steps{border-top:1px solid var(--ink)}
.step{border-bottom:1px solid var(--rule)}
.step .n{font:400 64px/1 var(--serif);letter-spacing:-.03em;background:none;color:var(--ink);-webkit-background-clip:initial;background-clip:initial}
.step h3{font:500 25px var(--serif);letter-spacing:-.01em}
.steps-end{font:italic 400 clamp(24px,3vw,38px)/1.2 var(--serif)}
.steps-end .grad{font-style:italic}

/* offers matrix */

/* app tiles, trainer and gym packs */
.pack{border:1px solid var(--ink);border-radius:0;background:transparent}
.pack h3{font:500 30px var(--serif);letter-spacing:-.01em}
.pack li svg{color:var(--accent-ink)}
.pack .price{color:var(--accent-ink)}

/* about */
.about .ph{border-radius:0;border:0}
.about p{font:400 21px/1.55 var(--serif);color:var(--ink)}

/* contact */
.contact h2{font:400 clamp(30px,4vw,52px)/1.08 var(--serif);letter-spacing:-.02em}
.card{background:#FBF9F5;border:1px solid var(--ink);border-radius:0}
.f input[type=text],.f input[type=email],.f input[type=tel],.f input[type=number],.f input[type=date],.f select,.f textarea{border-radius:2px;border-color:var(--rule);background:#fff}
.chips label{border-radius:2px}
.chips label:has(input:checked){box-shadow:inset 0 0 0 1.5px var(--accent)}
.chips input,.consent input{accent-color:var(--accent)}
details.more{border-radius:2px}
.f input:focus,.f select:focus,.f textarea:focus{outline-color:var(--accent)}

/* footer: the one dark block */
footer{background:var(--ink);color:#BDB7AA}
footer a:hover{color:#fff}
footer .lang{border-color:#6B655A;color:#BDB7AA}footer .lang b{color:#fff}
:focus-visible{outline-color:var(--accent)}

/* palette 4: burgundy and sand */
.q-in{font:italic 400 clamp(22px,2.6vw,32px)/1.18 var(--serif);letter-spacing:-.01em;border-left-width:2px}
.q-in .grad{font-style:italic}

.fx .ft h3{font:400 clamp(28px,3.2vw,42px)/1.08 var(--serif);letter-spacing:-.02em}
.fx .ft>p{font-size:17.5px}
.fx ul li::before{border-radius:0;width:8px;height:8px}
.fx .ct{border-radius:2px}
.loop li{border-radius:0;border-color:var(--rule);font:600 18px var(--serif);background:transparent}
.loop .n{border-radius:0;font:600 13px var(--mono)}
.phone.sm{border-radius:28px}

.why-cols h3{font:400 24px/1.15 var(--serif);letter-spacing:-.01em}
.next li::before{border-radius:0;font:600 12px var(--mono)}

.offer{border-radius:0;background:transparent;border-color:var(--rule)}
.offer.hl{background:#EEE7DC;border-color:var(--ink);box-shadow:none}
.offer .bd{background:var(--accent);border-radius:0}
.offer h3{font:500 28px var(--serif)}
.offer .price b{font:500 40px var(--serif)}
.offer li svg{color:var(--accent-ink)}
.duo-ph .ph{border-radius:0;border:0}

.steps{border-top:1px solid var(--ink)}
.step{border-bottom:0}
.step .n{font-size:46px;margin-bottom:10px}
.step h3{font:500 22px var(--serif)}
@media(max-width:1000px){.step .n{font-size:38px}.step{border-bottom:1px solid var(--rule)}}
.offer .trial{border-radius:0;background:rgba(46,107,79,.08);border-color:rgba(46,107,79,.45)}

@media(max-width:560px){.brand{font-size:21px;top:-1px}}

/* five-column process: room for a wider serif (Georgia, Palatino) on Windows notebooks */
@media(min-width:1001px){.step{padding:22px 14px 6px 14px}.step:first-child{padding-left:0}.step h3{font-size:18px;white-space:nowrap}}

/* the strip on a phone: rows with a line above, not a vertical line at the left (alt.css loads after site.css and had put the left line back) */
@media(max-width:700px){.strip .cell{border-left:0;border-top:1px solid var(--rule)}.strip .cell:first-child{border-top:0}}

/* mobile header: the Kennenlernen button stays visible, Login moves into the menu */
.nav .nav-login{display:none}
@media(max-width:1199px){
  .top .btn.login{display:none}
  .top .btn.small:not(.login){display:inline-flex}
  .top.open .nav .nav-login{display:block}
}
@media(max-width:430px){
  .brand{font-size:19px}
  .top .wrap{gap:10px}
  .top .btn.small:not(.login){padding:0 12px;font-size:12.5px;min-height:40px;white-space:nowrap}
  .menu-btn{width:40px;height:40px;flex:none}
}
/* sticky button on phones once the hero has scrolled away */
.sticky-cta{position:fixed;left:16px;right:16px;bottom:16px;z-index:30;display:none;align-items:center;justify-content:center;min-height:50px;padding:0 18px;background:var(--accent);color:#fff;font:700 15px 'Inter',sans-serif;text-decoration:none;box-shadow:0 10px 30px rgba(20,18,15,.28)}
@media(max-width:860px){.sticky-cta.show{display:flex}}

@media(max-width:340px){.brand{font-size:17px}.top .wrap{gap:8px}.top .btn.small:not(.login){padding:0 10px;font-size:12px}.menu-btn{width:38px;height:38px}}

/* line breaks: no single orphan words (supported by current Chrome, Safari and Firefox; older browsers just wrap as before) */
h1,h2,h3,h4,blockquote,.sub,.txt,.kicker,.role,.pcap,.trial,.step h3{text-wrap:balance}
p,li{text-wrap:pretty}
.s-head p.role{max-width:none}
@media(max-width:430px){.kicker.mono{font-size:11px;letter-spacing:.05em}}

.kicker .kt{min-width:0}

.facts a{color:inherit;text-decoration:none;font-weight:600}.facts a:hover{color:var(--accent-ink)}

.price-note{margin:18px 0 0;font-size:13.5px;color:var(--ink-3)}

.price-note a{color:inherit;text-decoration:none;font-weight:600}.price-note a:hover{color:var(--accent-ink)}

/* an anchor must not land under the sticky header: the slim Trainer & Gyms section has less padding than the others */
.s.slim{scroll-margin-top:20px}

/* the form's topics: Privat and Business, a little apart */
.chip-group+.chip-group{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule-weak)}
.chip-group .grp{display:block;margin:0 0 8px}
.s[id]{scroll-margin-top:12px}
.s.slim[id]{scroll-margin-top:20px}

/* FAQ: questions that open (details), aligned with the text column of the section headings */
.faq{margin-left:232px;border-top:1px solid var(--rule);max-width:760px}
.faq .q{border-bottom:1px solid var(--rule-weak)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:18px 0;font:700 17px/1.35 'Manrope',sans-serif;letter-spacing:-.01em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex-shrink:0;font:400 24px/1 var(--serif);color:var(--accent)}
.faq .q[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--accent-ink)}
.faq .q p{margin:0 0 20px;max-width:40em;font-size:16px;line-height:1.6;color:var(--ink-2)}
.help-line{margin:26px 0 0;font:600 17px/1.45 'Manrope',sans-serif;color:var(--ink);max-width:40em}
@media(max-width:800px){.faq{margin-left:0}}
.lang{white-space:nowrap}

/* the five steps read as rows (number, then title and text): the longer descriptions need the full width, five narrow columns made a wall of text */
@media(min-width:1001px){
  .steps{display:block;border-top:1px solid var(--ink)}
  .step,.step:first-child{display:grid;grid-template-columns:96px minmax(0,1fr);gap:24px;padding:28px 0;border-left:0;border-bottom:1px solid var(--rule)}
  .step:first-child{padding-left:0}
  .step .n{margin:0;font-size:54px}
  .step h3{font-size:24px;white-space:normal;margin:0 0 10px}
  .step p{max-width:46em;font-size:16.5px;line-height:1.6}
}

.lead .lp{display:block;margin-top:.75em}
.ft p .lp{display:block;margin-top:.7em}
.btn:active,.sticky-cta:active{transform:translateY(1px);filter:brightness(.92)}
.btn,.sticky-cta{transition:transform .08s ease,filter .08s ease,background-color .15s ease}
.offer .trial{font-size:13px;text-wrap:wrap}
.top .btn,.ctas .btn{white-space:nowrap}
@media(max-width:380px){.offer .btn,.pack .btn{padding:0 12px;font-size:14px}.offer .trial{font-size:12px;padding:8px 10px}}
@media(max-width:340px){.offer .btn,.pack .btn{padding:0 8px;font-size:13px}.offer .trial{font-size:11.5px;padding:8px 8px}}

/* The three offer cards share their rows (badge, title, text, price, free week, list, button): a longer text in one card no longer pushes its price out of line with the others. */
.offer .trial.ph{visibility:hidden}
@media(min-width:901px){@supports (grid-template-rows:subgrid){
  .offer{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0}
  .offer .bd{align-self:start;justify-self:start}
  .offer .btn{align-self:end}
}}
.offer ul{align-content:start}

/* Links to a place on the page fade instead of scrolling (see site.js). */
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:ease}
main,footer{transition:opacity .18s ease}
main.fade-out,footer.fade-out{opacity:0}
/* The last sections must be able to scroll up to the top edge like the others, so a menu jump lands every heading at the same place on a tall window. */
#kontakt{min-height:100vh;min-height:100svh;box-sizing:border-box}
/* Every heading lands at the same height after a menu jump: the slim section has less padding, the contact heading sits under an eyebrow line. */
@media(min-width:861px){.s.slim[id]{scroll-margin-top:32px}#kontakt{scroll-margin-top:-21px}}
@media(max-width:860px){#kontakt{scroll-margin-top:15px}}

/* The hero's lead: paragraphs and two points instead of one paragraph. */
.lead p{margin:0 0 .75em}.lead p:last-child{margin-bottom:0}
.lead ul{margin:0 0 .75em;padding:0;list-style:none;display:grid;gap:.4em}
.lead li{position:relative;padding-left:1.1em}.lead li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--accent)}
.lead b{color:var(--ink);font-weight:600}
/* Two text sizes instead of six (it varied from 14 to 19 px): running text 17 px (16 px on a phone), short text in cards and lists 15 px. */
.lead,.s-head p:not(.mono),.fx .ft>p,.about p,.about2 .at p,.contact .info p,.step p,.faq .q p,.help-line{font-size:17px;line-height:1.6}
.fx ul li,.why-cols p,.offer .sub,.pack>p,.next li{font-size:15px;line-height:1.5}
@media(max-width:600px){.lead,.s-head p:not(.mono),.fx .ft>p,.about p,.about2 .at p,.contact .info p,.step p,.faq .q p,.help-line{font-size:16px}}
/* Three heading levels below the section title instead of five: block headlines of the App section (large), card titles (offers and the
   trainer and studio packages, 28 px) and small titles (steps, "Warum mit mir", 24 px; 22 px on a phone), all serif 500. */
.pack h3,.offer h3{font:500 28px/1.15 var(--serif);letter-spacing:-.01em}
.why-cols h3,.step h3{font-weight:500;font-size:24px;line-height:1.15}
@media(max-width:600px){.why-cols h3,.step h3{font-size:22px}.pack h3,.offer h3{font-size:26px}}