/* OnePromise site. CI: navy + gold, Playfair Display for headlines, Albert Sans for text, contour lines. */
@font-face{font-family:'Albert Sans';src:url(/assets/fonts/AlbertSans-var.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'Playfair Display';src:url(/assets/fonts/PlayfairDisplay-var.woff2) format('woff2');font-weight:400 700;font-display:swap}

:root{
  --navy:#0A0F21; --navy-2:#1A2031; --slate:#3D4356; --oxi:#959DBA;
  --maroni:#605133; --gold:#B2924D; --gold-l:#CEAF6D; --sun:#F4DCA8;
  --paper:#F7F4EC; --paper-2:#EFEADF; --white:#FFFFFF; --error:#9B2C2C;
  --ink:#0A0F21; --ink-2:#3D4356; --ink-3:#5E6680;
  --rule:rgba(10,15,33,.13); --rule-2:rgba(10,15,33,.3); --ctl:#5E6680; --focus:#0A0F21;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Albert Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --pad:clamp(20px,5vw,64px); --max:1240px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
/* dark bookends re-map the ink tokens */
.navy{
  --ink:#F3F0E8; --ink-2:rgba(243,240,232,.78); --ink-3:rgba(243,240,232,.62);
  --rule:rgba(243,240,232,.14); --rule-2:rgba(243,240,232,.3); --ctl:rgba(243,240,232,.62); --focus:#CEAF6D;
  background:var(--navy); color:var(--ink);
}
/* cool light field from the CI's Oxi Blue (#959DBA), so the check invitation stands apart from the warm paper */
.sun{--ink-3:#3D4356; --ctl:#3D4356; background:#E3E6EF}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px;scrollbar-color:#B9B3A5 var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);overflow-wrap:break-word;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal}
::selection{background:var(--sun);color:var(--navy)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.24em}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
input,textarea,button{font:inherit;color:inherit}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-80px;z-index:50;background:var(--navy);color:#F3F0E8;padding:12px 16px;text-decoration:none}
.skip:focus{top:12px}

/* type */
.h1{font-size:clamp(2.5rem,.6rem + 3.8vw,4.25rem);line-height:1.02;letter-spacing:-.018em}
.h2{font-size:clamp(2rem,1.3rem + 2.25vw,3.35rem);line-height:1.08}
.lead{font-size:clamp(1.125rem,1.02rem + .38vw,1.3125rem);line-height:1.55;color:var(--ink-2);max-width:40rem}
.muted{color:var(--ink-3)}
.nw{white-space:nowrap}
.deg{margin:0 -.07em 0 -.03em}
.num{font-family:var(--sans);font-weight:600;font-size:.8125rem;letter-spacing:.18em;color:var(--maroni);font-variant-numeric:tabular-nums}
.navy .num{color:var(--gold-l)}

/* buttons and links */
.btn{--b:var(--navy);--f:#F3F0E8;display:inline-flex;align-items:center;justify-content:center;gap:.8em;min-height:52px;padding:0 1.6em;border:1.5px solid var(--b);background:var(--b);color:var(--f);font-weight:500;font-size:1rem;letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.btn:hover{--b:var(--slate)}
.btn .arr{width:18px;height:10px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.navy .btn{--b:var(--gold-l);--f:var(--navy)}
.navy .btn:hover{--b:var(--sun)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ctl)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.small{min-height:44px;padding:0 1.15em;font-size:.9375rem}
.link{font-weight:500;text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:.32em;transition:text-decoration-color .3s var(--ease)}
.link:hover{text-decoration-color:currentColor}
.textbtn{background:none;border:0;padding:0;cursor:pointer;font-size:.9375rem;color:var(--ink-3);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:.3em}
.textbtn:hover{color:var(--ink)}

/* logo lockup: rings, bar, wordmark (the wordmark PNG is a mask, so it takes any CI colour) */
.lockup{display:inline-flex;align-items:center;gap:14px;color:var(--ink);text-decoration:none}
.lockup>*{flex:none}
.lockup .rings{height:30px;width:auto;fill:none;stroke:currentColor;stroke-width:22}
.lockup .bar{width:1.5px;height:38px;background:currentColor}
.lockup .wm{height:15px;aspect-ratio:4808/517;background:currentColor;-webkit-mask:url(/assets/img/wordmark.png) center/contain no-repeat;mask:url(/assets/img/wordmark.png) center/contain no-repeat}
@media (max-width:359px){.lockup{gap:10px}.lockup .rings{height:24px}.lockup .bar{height:30px}.lockup .wm{height:12px}}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:28px}
.nav{display:flex;align-items:center;gap:32px;font-size:.9375rem}
.nav a:not(.btn){color:var(--ink-2);text-decoration:none;transition:color .3s var(--ease)}
.nav a:not(.btn):hover{color:var(--ink)}
@media (max-width:860px){.nav a:not(.btn){display:none}}

/* contour lines (CD "Höhenlinien") */
.contours{position:absolute;pointer-events:none;fill:none;stroke:var(--gold);stroke-width:1.3;opacity:.5;overflow:visible}
.contours.soft{stroke:#F3F0E8;opacity:.07}
.c-hero{right:-22vw;top:-18vw;width:max(78vw,760px);height:max(78vw,760px)}
.c-hero-soft{left:-30vw;bottom:-44vw;width:max(62vw,560px);height:max(62vw,560px)}
.c-foot{right:-26vw;bottom:-38vw;width:max(70vw,680px);height:max(70vw,680px)}
/* phones: lift the footer field into the "Gemeinsam starten" area, above the navy base band */
@media (max-width:520px){.c-foot{right:-70vw;top:-20vw;bottom:auto;width:120vw;height:120vw}}
.js .contours path{stroke-dasharray:1;stroke-dashoffset:1}
.contours.in path{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s cubic-bezier(.3,0,.2,1);transition-delay:calc(var(--i,0)*110ms)}

/* hero */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero > .contours{z-index:-1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center;padding-block:clamp(40px,7vw,104px) clamp(56px,8vw,112px)}
.hero .h1{margin-bottom:28px}
.hero .lead{margin-bottom:44px}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
.hero-ring{--bleed:min(120px,max(0px,(100vw - var(--max)) / 2) + var(--pad) - 16px);position:relative;z-index:0;width:calc(100% + var(--bleed));margin-right:calc(-1 * var(--bleed))}
/* navy halo keeps the ring labels clear of the contour lines, as in the deck */
.hero-ring::before{content:"";position:absolute;inset:-4% 0;z-index:-1;background:radial-gradient(closest-side,var(--navy) 72%,rgba(10,15,33,0))}
.facts{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding-block:22px 30px;border-top:1px solid var(--rule);font-size:.875rem;letter-spacing:.02em;color:var(--ink-3)}
.facts span + span::before{content:"";display:inline-block;width:5px;height:5px;margin:0 16px 2px 0;background:var(--gold-l)}
@media (max-width:520px){.facts{flex-direction:column;gap:4px}.facts span + span::before{display:none}}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-ring{--bleed:0px;justify-self:center;max-width:400px;margin-top:8px}
}

/* the 360° ring */
.ring{width:100%;height:auto;overflow:visible}
.ring .seg{cursor:pointer;outline:none;transition:opacity .4s var(--ease)}
.ring .hit{fill:none;stroke:transparent;stroke-width:80;pointer-events:stroke}
.ring .arc{fill:none;stroke-width:10;transition:stroke-width .4s var(--ease)}
.ring .lbl{font-family:var(--serif);font-size:26px;fill:var(--ink)}
.ring .ln{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:.2em}
.ring .c-big{font-family:var(--serif);font-weight:500;font-size:132px;letter-spacing:-.02em;fill:var(--ink);text-anchor:middle}
.ring .c-sm{font-family:var(--sans);font-weight:500;font-size:19px;letter-spacing:.26em;fill:var(--gold-l);text-anchor:middle}
.ring.dim .seg{opacity:.32}
.ring.dim .seg.on{opacity:1}
.ring .seg.on .arc,.ring .seg:focus-visible .arc{stroke-width:18}
.js .ring .arc{stroke-dasharray:1;stroke-dashoffset:1}
.ring.in .arc{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ease) calc(var(--i,0)*90ms + 350ms),stroke-width .4s var(--ease)}
.ring .lab-m{display:none;font-family:var(--sans);font-size:30px;font-weight:600;letter-spacing:.06em;text-anchor:middle;dominant-baseline:central}
@media (max-width:700px){.ring .lab-d{display:none}.ring .lab-m{display:block}}
.ring-legend{display:none}
@media (max-width:700px){
  .ring-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;list-style:none;margin:20px 0 0;padding:0;font-size:.875rem}
  .ring-legend a{display:flex;align-items:baseline;gap:10px;min-height:28px;padding:4px 0;color:var(--ink-2);text-decoration:none}
  .ring-legend .num{flex:none;font-size:.75rem}
}

/* sections */
.sec{padding-block:clamp(80px,11vw,152px)}
.sec.alt{background:var(--paper-2)}
.sec-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(40px,6vw,72px)}
.sec-head .lead{max-width:36rem}
@media (max-width:900px){.sec-head{grid-template-columns:minmax(0,1fr)}}

/* hub diagram */
.hub{width:100%;height:auto;margin-bottom:clamp(40px,6vw,72px)}
.hub .node{fill:none;stroke:var(--ink);stroke-width:1.5}
.hub .wire{fill:none;stroke:var(--rule-2);stroke-width:1.2}
.hub .wire.main{stroke:var(--gold);stroke-width:2.4}
.hub .dot{fill:var(--gold)}
.hub .rings{fill:none;stroke:var(--gold);stroke-width:2.4}
.hub text{font-family:var(--sans);font-size:19px;fill:var(--ink)}
.hub .t-c{text-anchor:middle;font-weight:500;font-size:16px}
.hub .t-op{font-family:var(--serif);font-size:30px;text-anchor:middle;fill:#000}
.hub .t-k{font-size:12.5px;font-weight:600;letter-spacing:.2em;fill:var(--maroni)}
.hub .t-k.c{text-anchor:middle}
.hub-v{display:none;max-width:420px;margin-inline:auto}
@media (max-width:700px){.hub-h{display:none}.hub-v{display:block}}
.method{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);border-top:1px solid var(--rule-2);padding-top:28px}
.method h3{font-size:1.5rem;margin-bottom:8px}
.method p{color:var(--ink-2);max-width:30ch}
@media (max-width:760px){.method{grid-template-columns:1fr;gap:24px}}

/* module index (homepage) */
/* nine areas in two columns, read top to bottom: 01-05 left, 06-09 right */
.mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,72px);align-items:start;border-top:1px solid var(--rule-2)}
@media (max-width:860px){.mods{grid-template-columns:minmax(0,1fr)}}
.mod{border-bottom:1px solid var(--rule)}
.mod summary{display:grid;grid-template-columns:3.25rem minmax(0,1fr) 24px;align-items:baseline;gap:0 16px;padding:24px 0;cursor:pointer;list-style:none}
.mod summary::-webkit-details-marker{display:none}
.mod .t{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 32px}
.mod .name{font-family:var(--serif);font-size:clamp(1.375rem,1.1rem + .9vw,1.875rem);line-height:1.2;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.2em;transition:text-decoration-color .3s var(--ease)}
.mod summary:hover .name{text-decoration-color:var(--rule-2)}
.mod .tags{font-size:.9375rem;color:var(--ink-3)}
.mod .pm{width:16px;height:16px;align-self:center;fill:none;stroke:var(--ink);stroke-width:1.5}
.mod .pm .v{transition:transform .35s var(--ease);transform-origin:center}
.mod[open] .pm .v{transform:scaleY(0)}
.mod-body{padding:0 0 32px calc(3.25rem + 16px)}
.items{list-style:none;margin:0;padding:0;columns:2 15rem;column-gap:40px}
.items li{break-inside:avoid;position:relative;padding:5px 0 5px 20px;color:var(--ink-2)}
.items li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border:1.5px solid var(--gold)}
.mod-body .partner{margin-top:18px;font-size:.9375rem;color:var(--ink-2)}
@media (max-width:640px){.mod-body{padding-left:0}.mod summary{grid-template-columns:2.5rem minmax(0,1fr) 20px}}

/* KI section */
.ki{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(40px,6vw,96px);align-items:start}
.ki .partner{margin:14px 0 28px;font-weight:500;color:var(--maroni)}
.ki-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:48px}
.ki-cols h3{font-size:1.375rem;padding-top:16px;border-top:1px solid var(--rule-2);margin-bottom:10px}
.ki-cols ul{list-style:none;margin:0;padding:0}
.ki-cols li{padding:5px 0;font-size:.96875rem;line-height:1.5;color:var(--ink-2)}
.ki .more{margin-top:40px}
.chat{border-top:1px solid var(--rule-2);padding-top:16px}
.chat .cap{font-size:.8125rem;color:var(--ink-3);margin-bottom:16px}
.msg{max-width:88%;margin:10px 0;padding:12px 16px;font-size:.9375rem;line-height:1.5}
.msg.me{margin-left:auto;background:var(--sun);color:var(--navy)}
.msg.bot{background:var(--white);color:var(--ink-2)}
.msg.bot b{color:var(--ink);font-weight:600}
@media (max-width:980px){.ki{grid-template-columns:minmax(0,1fr)}.chat{max-width:34rem}}
@media (max-width:760px){.ki-cols{grid-template-columns:1fr;gap:8px;margin-top:32px}}

/* check invitation (Sunkiss field) */
.invite{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:start}
.invite .h2{margin-bottom:20px}
.invite .lead{color:var(--ink-2)}
.path{list-style:none;margin:40px 0 44px;padding:0;counter-reset:step}
.path li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;padding:16px 0;border-top:1px solid var(--rule-2);color:var(--ink-2);counter-increment:step}
.path li::before{content:counter(step);font:500 1.375rem/1.2 var(--serif);color:var(--maroni);font-variant-numeric:lining-nums}
.path b{color:var(--ink);font-weight:600}
.sheet{background:var(--paper);padding:clamp(24px,3vw,40px)}
html:not(.js) .sheet{display:none}
.sheet .status{margin-top:20px;font-size:.9375rem;color:var(--ink-2)}
@media (max-width:900px){.invite{grid-template-columns:minmax(0,1fr)}}

/* checklist module (homepage try-out + check) */
.mc{border:0;margin:0;padding:0;min-width:0}
.mc + .mc{margin-top:52px}
.mc legend{display:flex;align-items:baseline;gap:14px;padding:0;margin-bottom:8px;font-family:var(--serif);font-size:1.5rem;line-height:1.2}
.rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.sheet .rows{grid-template-columns:minmax(0,1fr)}
.row{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--rule)}
.chk{flex:1;display:flex;align-items:center;gap:14px;min-height:50px;padding:6px 0;cursor:pointer;position:relative}
.chk input{position:absolute;opacity:0;width:22px;height:22px;margin:0;cursor:pointer}
.box{flex:none;width:22px;height:22px;display:grid;place-items:center;border:1.5px solid var(--ctl);transition:background-color .2s,border-color .2s}
.box svg{width:13px;height:13px;fill:none;stroke:var(--paper);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:opacity .2s,transform .35s var(--ease)}
.chk:hover .box{border-color:var(--ink)}
.chk input:checked + .box{background:var(--navy);border-color:var(--navy)}
.chk input:checked + .box svg{opacity:1;transform:none}
.chk input:focus-visible + .box{outline:2px solid var(--focus);outline-offset:3px}
.chk .t{color:var(--ink-2);line-height:1.35}
.chk input:checked ~ .t{color:var(--ink);font-weight:500}
.star{flex:none;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer;color:var(--ctl)}
.star svg{width:21px;height:21px;fill:transparent;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;transition:transform .4s var(--ease),fill .2s}
.star:hover{color:var(--ink)}
.star[aria-pressed="true"]{color:var(--maroni)}
.star[aria-pressed="true"] svg{fill:var(--gold);transform:scale(1.12)}
.note{display:block;margin-top:14px}
@media (max-width:640px){.rows{grid-template-columns:minmax(0,1fr)}}

/* form fields */
.inp{display:block;width:100%;min-width:0;border:0;border-bottom:1.5px solid var(--ctl);border-radius:0;background:transparent;padding:10px 0;font-size:1.0625rem;outline:0;caret-color:var(--navy);transition:border-color .2s,box-shadow .2s}
.inp:focus{border-bottom-color:var(--navy);box-shadow:0 1.5px 0 var(--navy)}
.inp::placeholder{color:var(--ink-3);opacity:1}
.inp.sm{font-size:1rem;padding:8px 0}
textarea.inp{resize:vertical;min-height:88px;line-height:1.5}
.inp[aria-invalid="true"]{border-bottom-color:var(--error);box-shadow:0 1.5px 0 var(--error)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 40px}
.f{display:flex;flex-direction:column;gap:4px;min-width:0;border:0;margin:0;padding:0}
.f.full{grid-column:1/-1}
.f .lab,.f legend{padding:0;font-size:.875rem;font-weight:500;color:var(--ink-2)}
.f legend{margin-bottom:10px}
.f .req{color:var(--maroni)}
.err{font-size:.875rem;color:var(--error)}
.err:empty{display:none}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.opt span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--ctl);font-size:.9375rem;transition:background-color .2s,border-color .2s,color .2s}
.opt:hover span{border-color:var(--ink)}
.opt input:checked + span{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.opt input:focus-visible + span{outline:2px solid var(--focus);outline-offset:3px}
/* the seven optional company questions, folded (open by itself once one has an answer) */
.more-f{margin-top:36px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.more-f > summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;cursor:pointer;list-style:none;font-weight:500;color:var(--ink)}
.more-f > summary::-webkit-details-marker{display:none}
.more-f > summary:hover{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:.3em}
.more-f .pm{width:16px;height:16px;flex:none;fill:none;stroke:var(--ink);stroke-width:1.5}
.more-f .pm .v{transition:transform .35s var(--ease);transform-origin:center}
.more-f[open] .pm .v{transform:scaleY(0)}
.more-f > .fields{padding:12px 0 36px}
@media (max-width:640px){.fields{grid-template-columns:minmax(0,1fr)}}

/* check page */
.bar-top{border-bottom:1px solid var(--rule)}
.bar-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:80px}
.bar-top .right{display:flex;align-items:center;gap:24px;font-size:.9375rem}
.saved{font-size:.8125rem;color:var(--ink-3)}
/* phones: the save note gets its own line under the logo instead of disappearing */
@media (max-width:640px){
  .bar-top .wrap{flex-wrap:wrap;row-gap:0;padding-block:10px}
  .bar-top .right{display:contents}
  .saved{order:3;flex-basis:100%;padding-bottom:4px}
  .saved:empty{display:none}
}
.check-head{padding-block:clamp(40px,6vw,88px) clamp(32px,4vw,56px)}
.check-head .h1{font-size:clamp(2.4rem,1.5rem + 3vw,4.25rem);margin-bottom:20px}
.check-head .lead{max-width:44rem}
.check-head .muted{margin-top:16px;font-size:.9375rem;max-width:44rem}
.check-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(40px,5vw,88px);align-items:start;padding-bottom:clamp(64px,8vw,120px)}
.step{padding-block:36px 72px;border-top:1px solid var(--rule-2)}
.step > h2{display:flex;align-items:baseline;gap:16px;font-size:clamp(1.75rem,1.35rem + 1.3vw,2.5rem);margin-bottom:12px}
.step > .hint{color:var(--ink-2);margin-bottom:36px;max-width:40rem}
.key{display:flex;flex-wrap:wrap;gap:10px 28px;margin:-12px 0 40px;font-size:.9375rem;color:var(--ink-2)}
.key > span{display:inline-flex;align-items:center;gap:10px}
.key .box{background:var(--navy);border-color:var(--navy)}
.key .box svg{opacity:1;transform:none}
.key .star{width:auto;height:auto;color:var(--maroni)}
.key .star svg{fill:var(--gold);transform:none}
.aside{position:sticky;top:28px}
.aside .ring{max-width:272px;margin-inline:auto}
.aside .count{margin:22px 0 20px;text-align:center;font-size:.9375rem;color:var(--ink-2)}
.aside .count b{color:var(--ink);font-variant-numeric:tabular-nums}
.steps-nav{border-top:1px solid var(--rule-2);margin-bottom:24px}
.steps-nav a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule);text-decoration:none;font-size:.9375rem;color:var(--ink-2)}
.steps-nav a:hover{color:var(--ink)}
.steps-nav .st{font-size:.8125rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.aside .btn{width:100%}
.ring-s .track{fill:none;stroke:var(--rule);stroke-width:18}
.ring-s .fill{fill:none;stroke:var(--navy);stroke-width:18;stroke-dasharray:0 1;transition:stroke-dasharray .6s var(--ease)}
.ring-s .seg:hover .track{stroke:var(--rule-2)}
.ring-s .seg:focus-visible .track{stroke:var(--ink)}
.ring-s .seg:focus-visible .ln{fill:var(--ink)}
.ring-s .pri{fill:var(--gold);stroke:var(--maroni);stroke-width:2;opacity:0;transition:opacity .3s}
.ring-s .ln{font-family:var(--sans);font-size:36px;font-weight:600;letter-spacing:.06em;fill:var(--ink-3);text-anchor:middle;dominant-baseline:central}
.ring-s .c-big{font-family:var(--serif);font-weight:500;font-size:96px;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:none;align-items:center;justify-content:space-between;gap:12px;padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom))}
.mbar .btn{min-height:44px}
.mbar .count{font-size:.9375rem;color:var(--ink-2);white-space:nowrap}
@media (max-width:359px){.mbar{padding-inline:16px;gap:8px}.mbar .count{font-size:.8125rem}.mbar .btn.small{padding:0 .8em;font-size:.875rem}}
.mbar .count b{color:var(--ink)}
@media (max-width:1000px){
  html:has(.page-check){scroll-padding-bottom:96px}
  .check-grid{grid-template-columns:minmax(0,1fr)}
  .aside{display:none}
  .mbar{display:flex}
  .page-check .slim{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  .page-check:has(.inp:focus) .mbar{display:none}
}

/* summary */
.profile{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 28px;margin:0 0 36px}
.profile dt{font-size:.875rem;color:var(--ink-3);padding-top:2px}
.profile dd{margin:0}
/* long German words break at a syllable with a hyphen (lang="de-CH"), never at an arbitrary letter */
.profile dd,.sum-mod li,.sum-mod .nt{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.sum-mod{padding:18px 0;border-top:1px solid var(--rule)}
.sum-mod h3{display:flex;align-items:baseline;gap:14px;font-size:1.25rem}
/* one item per line, priority first (star + the word Priorität), the rest with a small gold square */
.sum-mod ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px}
.sum-mod li{display:flex;align-items:baseline;gap:10px}
.sum-mod li > svg{flex:none;width:15px;height:15px;align-self:center;fill:var(--gold);stroke:var(--maroni);stroke-width:1.4}
.sum-mod li:not(.p)::before{content:"";flex:none;width:7px;height:7px;margin-inline:4px;border:1.5px solid var(--gold);align-self:center}
.sum-mod li > span{min-width:0}
.sum-mod li.p{font-weight:600}
.sum-mod .pri-t{margin-left:6px;font-size:.8125rem;font-weight:500;letter-spacing:.04em;color:var(--maroni)}
.sum-mod .nt{margin-top:8px;font-size:.9375rem;color:var(--ink-2)}
.empty{padding:20px 0;color:var(--ink-2);border-top:1px solid var(--rule)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:40px}
.fine{margin-top:18px;font-size:.875rem;color:var(--ink-3);max-width:40rem}

/* send result: thank-you or error */
.send-st{margin-top:24px;padding:14px 18px;border:1px solid var(--rule-2);border-left:2px solid var(--gold);max-width:40rem}
.send-st:empty{display:none}
.send-st.bad{border-left-color:var(--error);color:var(--error)}

/* footer (navy close) */
.foot{position:relative;overflow:hidden;isolation:isolate}
.foot > .contours{z-index:-1}
.foot-base{position:relative;background:var(--navy)}
.close{padding-block:clamp(88px,11vw,152px) clamp(64px,8vw,104px);max-width:44rem}
.close .h2{margin-bottom:20px}
.close .lead{margin-bottom:40px}
.foot-row{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr)) auto;gap:32px;align-items:start;padding-block:36px 44px;border-top:1px solid var(--rule);font-size:.9375rem;color:var(--ink-2)}
.foot-row address{font-style:normal;line-height:1.6}
.foot-row nav{display:flex;flex-direction:column;gap:6px}
.foot-row nav a{text-decoration:none}
.foot-row nav a:hover{color:var(--ink);text-decoration:underline}
.foot-row .copy{color:var(--ink-3)}
@media (max-width:860px){.foot-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot-row{grid-template-columns:minmax(0,1fr)}}
.slim{border-top:1px solid var(--rule);font-size:.875rem;color:var(--ink-3)}
.slim.navy{border-top:0}
.slim .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-block:24px 32px}
.slim nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.slim nav a{display:inline-flex;align-items:center;gap:6px}   /* the outward arrow stays on the line of its link */

/* legal pages */
.legal{padding-block:clamp(48px,7vw,104px) clamp(80px,10vw,144px);max-width:46rem}
.legal .h1{font-size:clamp(2.4rem,1.6rem + 2.6vw,3.75rem);margin-bottom:40px}
.legal h2{font-size:1.5rem;margin:40px 0 12px}
.legal p{color:var(--ink-2);margin-bottom:12px}
.legal address{font-style:normal;line-height:1.7}
.legal .cta{margin-top:32px}
.noscript{margin:0 0 32px;padding:16px 20px;background:var(--sun);color:var(--navy);max-width:44rem}

/* phones: every link and button is at least 44px tall; only links inside running text of the legal pages are exempt */
@media (max-width:760px){
  .lockup,.sister a,.bar-top .right .link,.slim nav a,.foot-row nav a,.cta .link,.fine .link,.textbtn{min-height:44px}
  .bar-top .right .link,.cta .link,.fine .link{display:inline-flex;align-items:center}
  .foot-row nav a{display:flex;align-items:center}
  .sister a{padding-block:0}
  .slim nav,.foot-row nav{row-gap:0}
  .ring-legend a{padding-block:12px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important}
  .js .contours path,.js .ring .arc{stroke-dashoffset:0}
}

/* print: the check prints as a clean A4 summary */
.print-only{display:none}
/* sister sites (Leon, 2026-09-24: "the links to those two need to be more obvious"): a strip on top of every page,
   a block in the homepage footer, a button in the KI section */
.ext{width:10px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
.sister{background:#060A18;color:rgba(243,240,232,.62);font-size:.8125rem;letter-spacing:.02em;position:relative;z-index:2}
.sister .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0 24px;min-height:42px}
.sister a{display:inline-flex;align-items:center;gap:7px;padding-block:11px;color:#F3F0E8;font-weight:500;text-decoration:none}
.sister a .ext{color:var(--gold-l)}
.sister a:hover{text-decoration:underline;text-underline-offset:.3em}
.sister a:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
@media (max-width:520px){.sister-lab{display:none}.sister .wrap{justify-content:center}}
.sister-big{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;padding-bottom:clamp(56px,7vw,96px)}
.sister-big-lab{grid-column:1/-1;margin-bottom:14px;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sister-big a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:18px;padding-block:22px 24px;border-top:1px solid var(--rule-2);color:var(--ink);text-decoration:none}
.sister-big .n{font:500 clamp(1.45rem,1.15rem + 1vw,1.95rem)/1.15 var(--serif)}
.sister-big .u{grid-column:1;margin-top:4px;font-size:.9375rem;color:var(--ink-3)}
.sister-big .ext{grid-column:2;grid-row:1/3;width:18px;height:18px;color:var(--gold-l);stroke-width:1.3;transition:transform .35s var(--ease)}
.sister-big a:hover .n{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.sister-big a:hover .ext{transform:translate(3px,-3px)}
@media (max-width:700px){.sister-big{grid-template-columns:minmax(0,1fr)}}
.more .btn .ext{width:11px;height:11px}

@media print{
  @page{size:A4;margin:16mm 16mm 18mm}
  /* check PDF: no page margin, so the browser has no room for its own title/URL/page-number/date lines;
     the margin comes from the body padding instead, repeated on every page by box-decoration-break */
  @page check{size:A4;margin:0}
  html,body{background:#fff}
  body{font-size:10.5pt;color:#0A0F21}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sister,.bar-top,.check-head,#s-firma,#s-bausteine,.aside,.mbar,.actions,.fine,.send-st,.slim,.skip,#s-senden > h2,#s-senden > .hint{display:none!important}
  .print-only{display:block}
  .page-check{page:check;padding:14mm 16mm 16mm;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .wrap{padding:0;max-width:none}
  .check-grid{display:block;padding:0}
  .step{border:0;padding:0}
  .ph{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1.5px solid #0A0F21;padding-bottom:10px;margin-bottom:18px}
  .ph .lockup .rings{height:22px}
  .ph .lockup .bar{height:28px}
  .ph .lockup .wm{height:11px}
  .ph h1{font-size:20pt}
  .ph p{font-size:9pt;color:#3D4356;text-align:right}
  .sum-mod{break-inside:avoid;padding:10px 0}
  .pf{margin-top:24px;border-top:1px solid rgba(10,15,33,.3);padding-top:8px;font-size:8.5pt;color:#3D4356}
}