/* Shared UI on every page. 1) Header "Coachings" menu. On small screens the same
   button becomes the full menu, because the plain header links are hidden there. */
.dd{ position:relative; }
.dd-btn{ display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .8rem; border:0; background:none; border-radius:var(--r-sm);
  font:inherit; font-size:.95rem; font-weight:600; color:var(--on-dark-1); cursor:pointer; }
.dd-btn:hover, .dd-btn[aria-expanded="true"]{ background:rgba(255,255,255,.08); color:#fff; }
.dd-btn svg{ width:1rem; height:1rem; transition:transform .2s; }
.dd-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.dd-btn .dd-m{ display:none; }
.dd-pop{ position:absolute; z-index:100; top:calc(100% + .7rem); left:50%; transform:translateX(-50%); width:min(41rem, calc(100vw - 2rem));
  background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 30px 60px rgba(11,28,39,.28); padding:.8rem; }
.head .dd-pop :focus-visible{ outline-color:var(--accent-ink); }
.dd-h{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin:.3rem .7rem .5rem; }
.dd-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.15rem; }
.dd-grid a, .dd-mlinks a{ display:flex; gap:.75rem; align-items:center; padding:.55rem .7rem; border-radius:12px; color:var(--ink); text-decoration:none; font-weight:700; font-size:.95rem; line-height:1.25; }
.dd-grid a:hover, .dd-grid a[aria-current], .dd-mlinks a:hover{ background:var(--paper); }
.dd-grid .t{ width:2.2rem; height:2.2rem; border-radius:10px; display:grid; place-items:center; flex:none; background:rgba(var(--accent-rgb),.14); color:var(--accent-ink); }
.dd-grid .t svg{ width:1.15rem; height:1.15rem; }
.dd-all{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:.5rem; padding:.75rem .9rem; border-radius:12px;
  background:var(--sand); color:var(--ink); font-weight:700; text-decoration:none; font-size:.92rem; }
.dd-all svg{ width:1rem; height:1rem; }
.dd-mlinks{ display:none; }
/* the coral dot of "steps." wherever the name appears in text, like in the logo */
.sd{ color:var(--mint); }
/* language switch: one flag, the other language */
.lang{ display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:0 .55rem; border-radius:var(--r-sm); font-size:.82rem; font-weight:700; letter-spacing:.04em; color:var(--ink); text-decoration:none; }
.lang svg{ width:1.5rem; height:auto; border-radius:3px; box-shadow:0 0 0 1px rgba(11,28,39,.15); }
a.lang:hover{ background:rgba(11,28,39,.06); }
.lang--soon{ cursor:help; }
.lang .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:860px){
  .dd{ position:static; }
  .dd-btn .dd-d{ display:none; } .dd-btn .dd-m{ display:inline; }
  .dd-pop{ left:.75rem; right:.75rem; width:auto; transform:none; top:calc(100% + .4rem); max-height:calc(100vh - 6.5rem); max-height:calc(100dvh - 6.5rem); overflow:auto; }
  .dd-grid{ grid-template-columns:1fr; }
  .dd-mlinks{ display:grid; gap:.1rem; padding-bottom:.5rem; margin-bottom:.5rem; border-bottom:1px solid var(--line); }
}

/* 2) Contact bar. Slides in once the hero is out of view, steps aside where a page
   already shows booking (elements with data-cbar-hide). */
.cbar{ position:fixed; left:0; right:0; bottom:0; z-index:80; background:color-mix(in srgb, var(--deep) 94%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:2px solid var(--mint); color:#EAF4F2;
  padding:.75rem 0 calc(.75rem + env(safe-area-inset-bottom,0px)); transform:translateY(105%); visibility:hidden; transition:transform .35s var(--ease), visibility 0s .35s; }
.cbar[data-on="true"]{ transform:none; visibility:visible; transition:transform .35s var(--ease); }
@media (prefers-reduced-motion: reduce){ .cbar{ transition:none; } }
.cbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.cbar-txt{ min-width:0; line-height:1.3; }
.cbar-st{ display:flex; align-items:center; gap:.45rem; font-size:.8rem; font-weight:700; color:var(--on-dark-2); }
.cbar-st i{ width:.5rem; height:.5rem; border-radius:50%; background:#8FA3A8; flex:none; }
.cbar-st[data-open="true"]{ color:#6EE7B7; }
.cbar-st[data-open="true"] i{ background:#34D399; box-shadow:0 0 0 4px rgba(52,211,153,.18); }
.cbar-txt p{ margin:.15rem 0 0; font-size:.95rem; color:var(--on-dark-1); }
.cbar-acts{ display:flex; gap:.5rem; flex:none; }
.cbar-a{ display:inline-flex; align-items:center; gap:.5rem; min-height:2.9rem; padding:.55rem 1rem; border-radius:var(--r-md); font-weight:700; font-size:.95rem;
  text-decoration:none; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); white-space:nowrap; }
.cbar-a:hover{ background:rgba(255,255,255,.14); }
.cbar-a svg{ width:1.1rem; height:1.1rem; flex:none; }
.cbar-a.go{ background:var(--mint); color:var(--on-accent); border-color:transparent; }
.cbar-a.go:hover{ filter:brightness(1.06); }
.cbar :focus-visible{ outline-color:var(--mint); }
@media (max-width:860px){ .cbar-txt p{ display:none; } }
@media (max-width:640px){
  .cbar-txt{ display:none; }
  .cbar-acts{ width:100%; }
  .cbar-a{ padding:.55rem .8rem; }
  .cbar-a .lbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .cbar-a.go{ flex:1; justify-content:center; }
  .cbar-a.go .lbl{ position:static; width:auto; height:auto; overflow:visible; clip:auto; }
}
/* room for the contact bar, kept inside the footer so no strip of page colour shows under it */
html.cbar-on .foot{ padding-bottom:calc(2rem + 5.2rem); }

/* 3) LinkedIn link under the coach profiles (homepage and coaching pages) */
.li-link{ display:inline-flex; align-items:center; gap:.5rem; min-height:44px; margin-top:.4rem; font-size:.9rem; font-weight:700; color:#0A66C2; text-decoration:none; }
.li-link svg{ width:1.15rem; height:1.15rem; flex:none; }
.li-link:hover span:first-of-type{ text-decoration:underline; }
.li-link .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }


/* popup dialogs: AVGS check (index.html) and coaching finder (assets/finder.js, every page) */
.chk{ width:min(36rem, calc(100% - 2rem)); max-height:calc(100dvh - 2rem); border:0; border-radius:var(--r-xl); padding:clamp(1.3rem,4vw,2.2rem);
  background:var(--paper); color:var(--ink); box-shadow:0 40px 90px rgba(0,0,0,.35); overflow:auto; }
.chk::backdrop{ background:rgba(6,20,29,.62); backdrop-filter:blur(3px); }
.chk[open]{ animation:chkIn .35s var(--ease); }
@keyframes chkIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .chk[open]{ animation:none; } }
.chk h2{ font-size:clamp(1.45rem,1.1rem + 1.2vw,1.85rem); padding-right:2.4rem; }
.chk-x{ position:absolute; top:1rem; right:1rem; width:2.6rem; height:2.6rem; border:0; border-radius:50%; background:var(--sand); color:var(--ink); cursor:pointer; display:grid; place-items:center; }
.chk-x svg{ width:1.1rem; height:1.1rem; }
.chk fieldset{ border:0; padding:0; margin:0 0 1.2rem; display:grid; gap:.5rem; }
.chk legend{ font-weight:700; margin-bottom:.6rem; padding:0; }
.chk-o{ display:flex; gap:.7rem; align-items:center; padding:.75rem .95rem; border:1.5px solid var(--line); border-radius:var(--r-md); background:#fff; cursor:pointer; font-weight:600; font-size:.95rem; line-height:1.3; transition:border-color .2s, background-color .2s; }
.chk-o small{ display:block; font-weight:500; color:var(--ink-2); font-size:.8rem; }
.chk-o input, .chk-c input{ accent-color:var(--mint-deep); width:1.1rem; height:1.1rem; margin:0; flex:none; }
.chk-o:has(input:checked){ border-color:var(--mint-deep); background:rgba(var(--accent-rgb),.09); }
.chk-chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.chk-c{ position:relative; cursor:pointer; }
.chk-c input{ position:absolute; opacity:0; }
.chk-c span{ display:inline-flex; align-items:center; min-height:2.5rem; padding:.45rem .9rem; border:1.5px solid var(--line); border-radius:var(--r-pill); background:#fff; font-weight:600; font-size:.9rem; transition:border-color .2s, background-color .2s; }
.chk-c input:checked + span{ border-color:var(--mint-deep); background:var(--mint); color:var(--on-accent); }
.chk-c input:focus-visible + span{ outline:3px solid var(--mint); outline-offset:2px; }
.chk-err{ color:#B3261E; font-weight:600; font-size:.9rem; }
.chk-small{ font-size:.8rem; color:var(--ink-2); margin-top:.8rem; }
.chk-res{ outline:none; }
.chk .eyebrow{ color:var(--accent-ink); }
.chk-badge{ display:inline-flex; align-items:center; gap:.4rem; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.35rem .8rem; border-radius:var(--r-pill); margin-bottom:.9rem; background:var(--sand); color:var(--ink); }
.chk-badge[data-tone="good"]{ background:linear-gradient(155deg,#F3D27E,#C9962F); color:#2E2408; }
.chk-cta{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1.2rem 0 .6rem; }
.chk-cta .btn{ font-size:.98rem; }
.chk-again{ background:none; border:0; padding:.4rem 0; font:inherit; font-size:.9rem; font-weight:600; color:var(--ink-2); text-decoration:underline; cursor:pointer; }
/* coaching finder popup (built by assets/finder.js), self-contained so it looks the same on every page */
.fd fieldset{ outline:none; }
.fd-top{ display:flex; align-items:center; gap:.8rem; margin:0 0 1.2rem; }
.fd-bar{ flex:1; height:.4rem; background:var(--sand); border-radius:var(--r-pill); overflow:hidden; }
.fd-bar span{ display:block; height:100%; background:linear-gradient(90deg,var(--mint),var(--mint-deep)); transform-origin:left; transform:scaleX(var(--p,.33)); transition:transform .35s var(--ease); }
.fd-count{ margin:0; font-size:.8rem; font-weight:700; color:var(--ink-2); white-space:nowrap; }
.fd-nav{ display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.fd-nav [data-f-next]{ margin-left:auto; }
.fd-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:2.9rem; padding:.7rem 1.3rem; border:2px solid transparent; border-radius:var(--r-pill);
  background:var(--mint); color:var(--on-accent); font:inherit; font-size:.98rem; font-weight:700; text-decoration:none; cursor:pointer; transition:transform .2s var(--ease), opacity .2s; }
.fd-btn:hover{ transform:translateY(-1px); }
.fd-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.fd-btn--line{ background:transparent; border-color:var(--line); color:var(--ink); }
.fd-res h3{ font-size:clamp(1.35rem,1.1rem + 1vw,1.7rem); letter-spacing:-.02em; line-height:1.15; margin:0 0 .4rem; }
.fd-res p{ color:var(--ink-2); margin:0 0 .8rem; }
.fd-res a:not(.fd-btn){ color:var(--accent-ink); font-weight:700; }
.fd-res .eyebrow{ margin:1.3rem 0 .3rem; }
.fd{ width:min(46rem, calc(100% - 2rem)); }
.fd-opts{ display:grid; gap:.5rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); }
.chk [hidden]{ display:none !important; }
.fd-hint{ margin:-.3rem 0 .5rem; font-size:.85rem; color:var(--ink-2); }
.fd .chk-o b{ display:block; font-weight:700; }
.fd-go{ display:grid; grid-template-columns:minmax(0,1fr) 12.5rem; gap:1rem; align-items:end; }
.fd-go .eyebrow{ margin-top:1.3rem; }
.fd-us{ margin:0; text-align:center; }
.fd-us img{ display:block; width:100%; height:auto; padding-top:.6rem;
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent); mask-image:linear-gradient(to bottom,#000 72%,transparent); }
.fd-us figcaption{ margin-top:-.4rem; font-size:.8rem; line-height:1.35; color:var(--ink-2); }
.fd-us figcaption b{ display:block; color:var(--ink); font-size:.92rem; }
@media (max-width:560px){ .fd-go{ grid-template-columns:1fr; gap:.2rem; } .fd-us{ display:flex; align-items:flex-end; gap:.9rem; text-align:left; } .fd-us img{ width:9.5rem; flex:none; } .fd-us figcaption{ margin:0 0 1rem; } }
.fd-btn--big{ min-height:3.4rem; padding:.9rem 1.7rem; font-size:1.1rem; box-shadow:0 10px 26px rgba(var(--accent-rgb),.35); }
.fd-helper{ margin:.2rem 0 .8rem; font-size:.92rem; }
/* finder options: a blue tone per category (look A, chosen 2026-11-08) */
.fd .fd-opts .chk-o{ border-color:transparent; background:#EEF5FC; }
.fd .fd-opts .chk-o:nth-child(1){ background:#EEF5FC; }
.fd .fd-opts .chk-o:nth-child(2){ background:#E6F0FA; }
.fd .fd-opts .chk-o:nth-child(3){ background:#DEEBF8; }
.fd .fd-opts .chk-o:nth-child(4){ background:#D7E6F6; }
.fd .fd-opts .chk-o:nth-child(5){ background:#D0E2F4; }
.fd .fd-opts .chk-o:nth-child(6){ background:#C9DDF2; }
.fd .fd-opts .chk-o:nth-child(7){ background:#C2D9F0; }
.fd .fd-opts .chk-o:nth-child(8){ background:#BCD4EE; }
.fd .fd-opts .chk-o:nth-child(9){ background:#B5D0EC; }
.fd .fd-opts .chk-o b{ color:var(--ink); }
.fd .fd-opts .chk-o small{ color:#3E4C61; }
.fd .fd-opts .chk-o:has(input:checked){ border-color:var(--mint-deep); background:#fff; box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25); }
.chk :focus-visible{ outline-color:var(--accent-ink); }
.chk h2, .fd-res h3{ line-height:1.06; hyphens:manual; -webkit-hyphens:manual; }

/* booking (#termin, click-to-load Calendly), on index.html and antrag.html. JS in ui.js part 4 */
.final .glow2{ position:absolute; width:50vw; height:50vw; left:50%; top:25%; transform:translateX(-50%); background:radial-gradient(circle,rgba(var(--accent-rgb),.2),transparent 60%); filter:blur(45px); z-index:0; pointer-events:none; }
.final .wrap{ position:relative; z-index:1; }
.cal-gate{ max-width:680px; margin:clamp(2rem,4vw,2.75rem) auto 0; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 14px 36px rgba(11,28,39,.09); padding:clamp(1.75rem,4vw,2.75rem); text-align:center; }
.cal-gate .ic{ width:3.4rem; height:3.4rem; margin:0 auto 1.1rem; border-radius:16px; display:grid; place-items:center; background:linear-gradient(155deg,var(--tile-1),var(--tile-2)); color:var(--mint); box-shadow:0 10px 24px rgba(11,28,39,.2); }
.cal-gate .ic svg{ width:1.6rem; height:1.6rem; }
.cal-gate h3{ font-size:1.4rem; margin:0 0 .5rem; }
.cal-gate p{ color:var(--ink-2); max-width:34rem; margin:0 auto 1.4rem; font-size:1rem; }
.cal-gate .cal-consent{ font-size:.78rem; line-height:1.5; max-width:30rem; margin:1rem auto 0; }
.cal-gate .privacy{ font-size:.85rem; margin:.9rem auto 0; padding-top:.9rem; border-top:1px solid var(--line); }
.cal-frame{ position:relative; text-align:left; border-radius:22px; overflow:hidden; box-shadow:0 14px 36px rgba(11,28,39,.09); background:#fff; margin:clamp(2rem,4vw,3rem) auto 0; max-width:1000px;
  height:clamp(620px, calc(100svh - 6.5rem), 780px); }
.cal-frame .calendly-inline-widget{ height:100%; }
.cal-frame .calendly-inline-widget{ position:relative; z-index:1; }
.cal-loading{ position:absolute; inset:0; z-index:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem; text-align:center; color:var(--ink-2); background:var(--paper); }
.cal-loading p{ margin:0; font-weight:600; font-size:.95rem; }
.cal-loading .cal-pct{ font-size:2.4rem; font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.cal-loading .cal-bar{ width:min(22rem,70%); height:8px; border-radius:999px; background:rgba(11,28,39,.08); overflow:hidden; }
.cal-loading .cal-bar span{ display:block; height:100%; width:100%; border-radius:inherit; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg,var(--mint-deep),var(--mint)); box-shadow:0 0 12px rgba(var(--accent-rgb),.5); }
.cal-loading .cal-msg{ font-size:.92rem; color:var(--ink-2); min-height:1.4em; }
.cal-loading.is-done{ opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s .4s; }