/* ==========================================================================
   POM MED · Physiotherapie Weimar
   Navy · Hellblau aus dem Logo · Hellgrau · Weiß (Variablennamen --gold* bleiben, Werte sind Blau). Schriften wie GYM ON: Sora + Inter + JetBrains Mono.
   ========================================================================== */

/* Schriften wie bei GYM ON (variable Dateien, alle Stärken) */
@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url("../fonts/sora-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Figtree (seit 18.09.2026 statt Inter): Fließtext und kleine Überschriften */
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url("../fonts/figtree-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Anton: statische Schrift ohne überlappende Konturen, sauber als Umriss (nur Hammer-Strength-Seite) */

:root {
  /* Farben */
  --graphite: #14253C;      /* dunkles Grau statt Schwarz */
  --graphite-2: #1B2F4A;
  --graphite-3: #28405F;
  --gold: #7DB6E6;          /* Gold aus dem Logo (Mitte) */
  --gold-light: #B5DDF6;     /* Glanzlicht */
  --gold-deep: #5B8FCB;      /* Schatten */
  --gold-text: #2C5C93;     /* dunkle Goldstufe für kleine Schrift auf Hell (5:1) */
  --gold-grad: linear-gradient(115deg, #5E8FCB 0%, #7DB6E6 34%, #B5DDF6 66%, #8CC2EC 100%);   /* Verlauf wie im Logo */
  --gold-grad-deep: linear-gradient(115deg, #24507F 0%, #2F66A3 55%, #27578C 100%);             /* dieselbe Goldfamilie, lesbar auf Hell */
  --bg: #EDF1F5;            /* neutrales Hellgrau */
  --surface: #FFFFFF;
  --surface-2: #F5F8FB;
  --text: #16263A;
  --muted: #4D5C6E;         /* 6:1 auf Hellgrau */
  --line: rgba(22, 38, 58, .12);
  --on-dark: #F2F6FA;
  --on-dark-muted: #B4C2D2;
  --line-dark: rgba(255, 255, 255, .13);
  --shadow: 0 30px 60px -34px rgba(12, 24, 40, .45);
  --shadow-s: 0 12px 30px -20px rgba(12, 24, 40, .45);

  /* Schrift */
  --display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-h1: clamp(2.2rem, 1.1rem + 4.7vw, 6.2rem);
  --fs-h2: clamp(2rem, 1.2rem + 2.6vw, 3.6rem);
  --fs-h3: clamp(1.1rem, 1rem + .45vw, 1.4rem);
  --fs-lead: clamp(1.12rem, 1.04rem + .3vw, 1.3rem);
  --fs-body: 1.0625rem;

  /* Raum */
  --inset: clamp(8px, 1vw, 14px);
  --gutter: clamp(20px, 4.5vw, 64px);
  --wrap: 1360px;
  --sec: clamp(88px, 10vw, 160px);
  --r-frame: clamp(20px, 2vw, 30px);
  --r: 20px;
  --r-s: 12px;

  /* Bewegung */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t: 450ms;

  --nav-h: 72px;
  color-scheme: light;
}
@media (max-width: 720px) { :root { --nav-h: 62px; --fs-body: 1.0625rem; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 30px); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: var(--fs-body); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
::selection { background: var(--gold-light); color: var(--graphite); }
:focus-visible { outline: 2.5px solid var(--gold-text); outline-offset: 3px; border-radius: 6px; }
.dark :focus-visible, .top :focus-visible, .nav :focus-visible, .menu :focus-visible, .foot :focus-visible { outline-color: var(--gold); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 1000; background: var(--graphite); color: var(--on-dark); padding: 12px 18px; border-radius: 10px; font-weight: 600; transition: top .2s; }
.skip:focus { top: 16px; }
main:focus { outline: none; }
@view-transition { navigation: auto; }

/* ---------- Grundlayout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: var(--sec); position: relative; }
.sec--tight { padding-block: clamp(56px, 7vw, 100px); }
.panel { margin-inline: var(--inset); border-radius: var(--r-frame); overflow: hidden; position: relative; }
.dark { background: var(--graphite); color: var(--on-dark); color-scheme: dark; }
.white { background: var(--surface); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 100px); align-items: center; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
.stack > * + * { margin-top: 1.25rem; }
.muted { color: var(--muted); }
.dark .muted { color: var(--on-dark-muted); }

/* ---------- Typografie ---------- */
.h1, .h2, .h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; hyphens: manual; overflow-wrap: break-word; }
.h2 { text-transform: none; letter-spacing: -.02em; font-weight: 600; }
.h1 { font-size: var(--fs-h1); line-height: 1.02; }
.h2 { font-size: var(--fs-h2); line-height: 1.08; }
.h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: 0; }
.gold { background: var(--gold-grad-deep); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dark .gold, .top .gold { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gold-fill { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Goldener Pinselstrich hinter einem Wort, das Wort selbst bleibt dunkel */
.brush { position: relative; z-index: 0; white-space: nowrap; color: var(--text); }
.brush { --brush-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M8 52C12 40 40 34 110 33C190 32 280 32 350 33C372 34 388 36 395 41C399 46 396 51 391 53C397 58 398 66 390 70C360 74 310 75 250 75C180 76 110 76 50 76C30 76 14 75 9 70C4 64 4 58 8 52Z'/%3E%3Cpath d='M22 38C80 30 180 27 300 27C340 27 368 28 386 31C360 32 320 33 280 33C200 34 110 35 40 40Z'/%3E%3Cpath d='M16 78C60 81 120 81 180 80C120 84 70 85 24 83Z'/%3E%3Cpath d='M372 64C384 66 394 69 399 73C390 72 380 71 370 70Z'/%3E%3C/svg%3E"); }
.brush::before { content: ""; position: absolute; z-index: -1; inset: -.52em -.2em -.31em -.16em; background: var(--gold-grad);
  -webkit-mask: var(--brush-shape) center / 100% 100% no-repeat; mask: var(--brush-shape) center / 100% 100% no-repeat; }
.brush:not(:last-child)::before { right: -.05em; }   /* folgt noch Text, Strich endet vor dem nächsten Wort */
.js [data-split] .brush::before { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease) .55s; }
.js [data-split].is-in .brush::before { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .js [data-split] .brush::before { clip-path: none; transition: none; } }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 .8rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }
.eyebrow::after { content: ""; width: 36px; height: 2px; border-radius: 2px; background: var(--gold-grad-deep); }
.dark .eyebrow::after, .top .eyebrow::after { background: var(--gold-grad); }
.dark .eyebrow, .top .eyebrow { color: var(--gold); }
.lead { font-size: var(--fs-lead); line-height: 1.6; max-width: 34em; }
.head { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 72px); }
.head--row { grid-template-columns: minmax(0, 1.2fr) auto; align-items: end; gap: 24px 60px; }
@media (max-width: 900px) { .head--row { grid-template-columns: 1fr; } }
.num { font-variant-numeric: tabular-nums; }

/* Wörter gleiten ein (JS setzt .w) */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js [data-split] .w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + var(--d, 0ms)); }
.js [data-split].is-in .w > span { transform: none; }
.js [data-reveal="up"] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal="up"].is-in { opacity: 1; transform: none; }
.js [data-reveal="scale"] { opacity: 0; transform: scale(.96); transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal="scale"].is-in { opacity: 1; transform: none; }

/* ---------- Buttons ---------- */
.btn { --bh: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: var(--bh); padding: 0 26px; border-radius: var(--r-s); font: 600 .95rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; border: 1.5px solid transparent; transition: transform .2s ease, background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); touch-action: manipulation; }
.btn svg { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: scale(.98); }
.btn--gold { background: var(--gold-grad); background-size: 140% 100%; background-position: 0% 50%; background-origin: border-box; background-repeat: no-repeat; border-color: transparent; color: var(--graphite); box-shadow: 0 10px 24px -14px rgba(47, 102, 163, .75); transition: transform .2s ease, background-position .8s var(--ease), box-shadow var(--t) var(--ease); }
.btn--gold:hover { background-position: 100% 50%; box-shadow: 0 16px 30px -14px rgba(47, 102, 163, .85); }
.btn--dark { background: var(--graphite); color: var(--on-dark); }
.btn--dark:hover { background: var(--graphite-3); }
.btn--line { border-color: currentColor; }
.btn--line:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.btn--sm { --bh: 46px; padding: 0 18px; font-size: .85rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 520px) { .btn-row .btn { width: 100%; } .btn { letter-spacing: .04em; padding: 0 16px; gap: 10px; font-size: .9rem; } }
.link { display: inline-flex; align-items: center; gap: 10px; font: 600 .9rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 8px 0; }
.link svg { width: 17px; height: 17px; transition: transform var(--t) var(--ease); }
.link:hover svg { transform: translateX(5px); }
.link--gold { color: var(--gold-text); }
.dark .link--gold, .scard .link--gold { color: var(--gold); }

/* ---------- Bildplatzhalter ---------- */
.ph { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: var(--r); background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 14px, transparent 14px 28px), linear-gradient(160deg, #2A3F5C 0%, #1B2F4A 100%); color: rgba(255,255,255,.62); }
.ph--light { background: repeating-linear-gradient(135deg, rgba(0,0,0,.035) 0 14px, transparent 14px 28px), linear-gradient(160deg, #DDE5EE 0%, #CBD6E2 100%); color: #55667B; }
.ph__label { display: inline-flex; align-items: center; gap: 8px; font: 600 .74rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; border: 1px dashed currentColor; padding: 9px 14px; border-radius: 999px; text-align: center; }
.ph__label svg { width: 16px; height: 16px; }
.r-43 { aspect-ratio: 4 / 3; }
.vid--cinema { aspect-ratio: 21 / 9; }
@media (max-width: 600px) { .vid--cinema { aspect-ratio: 4 / 3; } }
.r-45 { aspect-ratio: 4 / 5; }
.r-11 { aspect-ratio: 1; }
.r-169 { aspect-ratio: 16 / 9; }

/* ---------- Navigation (schwebender Balken) ---------- */
.nav { position: fixed; z-index: 100; top: var(--inset); left: var(--inset); right: var(--inset); transition: transform .6s var(--ease); }
.nav.is-hidden { transform: translateY(calc(-100% - var(--inset) - 4px)); }
.nav__bar { height: var(--nav-h); display: flex; align-items: center; gap: 26px; padding: 0 10px 0 22px; border-radius: 18px; background: rgba(20, 37, 60, .9); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); color: var(--on-dark); box-shadow: 0 16px 40px -24px rgba(0,0,0,.6); }
.nav__logo { margin-right: auto; display: block; }
.nav__logo img { height: 36px; width: auto; }
.nav__links { display: flex; gap: clamp(16px, 2vw, 30px); list-style: none; margin: 0; padding: 0; }
.nav__links a { font: 600 .84rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); padding: 10px 0; position: relative; transition: color .2s; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--gold-grad); transform: scaleX(0); transition: transform var(--t) var(--ease); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--on-dark); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__login { display: inline-flex; align-items: center; gap: 8px; font: 600 .84rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); padding: 10px 6px; }
.nav__login:hover { color: var(--on-dark); }
.nav__login svg { width: 18px; height: 18px; }
.nav__toggle { display: none; width: 50px; height: 50px; border-radius: 12px; background: var(--graphite-3); position: relative; }
.nav__toggle span { position: absolute; left: 15px; right: 15px; height: 2px; border-radius: 2px; background: var(--on-dark); transition: transform .45s var(--ease); }
.nav__toggle span:nth-child(1) { top: 20px; }
.nav__toggle span:nth-child(2) { top: 28px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
.nav__links a { white-space: nowrap; }
/* ab 8 Menüpunkten (mit "Hammer Strength") früher auf das Hamburger-Menü umschalten; main.js Abschnitt 5 nutzt dieselbe Grenze */
@media (max-width: 1240px) { .nav__links, .nav__login { display: none; } .nav__toggle { display: block; } }
@media (max-width: 520px) { .nav__cta { display: none; } .nav__logo img { height: 30px; } }

.menu { position: fixed; inset: 0; z-index: 200; background: var(--graphite); color: var(--on-dark); padding: 0 var(--gutter) max(26px, env(safe-area-inset-bottom)); display: grid; grid-template-rows: auto 1fr auto; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s; }
.menu__top { height: calc(var(--nav-h) + var(--inset) * 2); display: flex; align-items: center; justify-content: space-between; }
.menu__top img { height: 32px; width: auto; }
.menu__close { display: block !important; }
.menu__list { list-style: none; margin: 0; padding: 2vh 0; display: grid; align-content: center; }
.menu__list li { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 50ms + 100ms); }
.menu.is-open .menu__list li { opacity: 1; transform: none; }
.menu__list a { display: flex; align-items: baseline; gap: 16px; font: 600 clamp(1.7rem, 7vw, 3rem)/1.3 var(--display); text-transform: uppercase; padding: 4px 0; }
.menu__list a small { font: 600 .75rem/1 var(--sans); letter-spacing: .14em; color: var(--gold); }
.menu__list a[aria-current="page"] { color: var(--gold); }
.menu__foot { display: grid; gap: 14px; border-top: 1px solid var(--line-dark); padding-top: 22px; }
.menu__foot p { color: var(--on-dark-muted); font-size: 1rem; }
html.menu-lock { overflow: hidden; }

/* ---------- Hero (Rahmen) ---------- */
.top { margin: var(--inset); border-radius: var(--r-frame); min-height: calc(100svh - var(--inset) * 2); position: relative; overflow: hidden; color: var(--on-dark); display: grid; align-items: end; isolation: isolate; }
.top__media { position: absolute; inset: 0; z-index: -2; border-radius: 0; }
.top { background-color: var(--graphite); }
/* Desktop: dunkler Verlauf von rechts, damit Text, Knöpfe und Kärtchen rechts gut lesbar sind */
@media (min-width: 901px) { .top::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(270deg, rgba(16, 30, 48, .82) 0%, rgba(16, 30, 48, .62) 22%, rgba(16, 30, 48, .3) 40%, rgba(16, 30, 48, 0) 56%); } }
.top__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
/* Handy/Tablet: Bild nur oben, weicher Übergang ins Dunkle, damit die Gesichter nicht hinter der Überschrift liegen */
@media (max-width: 900px) { .top__img { height: 60%; object-position: 12% 18%; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); } }
/* Nur Handy: Bild dunkler, damit die Headline besser lesbar ist */
@media (max-width: 600px) { .top__img { filter: brightness(.66) saturate(.95); } }
.top__media .ph__label { position: absolute; top: calc(var(--nav-h) + 40px); left: 50%; transform: translateX(-50%); }
.top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(16, 30, 48,.92) 0%, rgba(16, 30, 48,.35) 50%, rgba(16, 30, 48,.15) 100%); }
.top__in { width: 100%; max-width: var(--wrap); margin-inline: auto; padding: calc(var(--nav-h) + 80px) var(--gutter) clamp(36px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); gap: 32px clamp(32px, 5vw, 80px); align-items: end; }
.top h1 .eyebrow { display: flex; margin-bottom: 22px; }
/* Optischer Randausgleich: F und D haben in Sora links ca. 0,082em Leerraum, sonst wirkt die Headline eingerückt */
.top h1 > [data-split] { margin-left: -.082em; }
.top__side { display: grid; gap: 22px; padding-bottom: 8px; }
.top__side p { color: var(--on-dark-muted); font-size: 1.1rem; }
.trust { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; padding-top: 26px; border-top: 1px solid var(--line-dark); font-size: .95rem; color: var(--on-dark-muted); }
.trust b { color: var(--on-dark); font-weight: 600; }
.avatars { display: flex; }
.avatars span { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--graphite); background: linear-gradient(160deg, #4D5C6E, #253B57); margin-left: -10px; }
.avatars span:first-child { margin-left: 0; }
.stars { display: inline-flex; gap: 3px; color: var(--gold); }
.stars svg { width: 18px; height: 18px; }
.float { position: absolute; z-index: 1; border-radius: 18px; background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.18); padding: 16px 18px; color: var(--on-dark); display: grid; gap: 6px; box-shadow: 0 20px 40px -24px rgba(0,0,0,.6); animation: bob 6s ease-in-out infinite; }
.float small { font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.float b { font: 600 1.05rem/1.2 var(--display); text-transform: uppercase; }
.float--a { right: calc(var(--gutter) + 10px); top: calc(var(--nav-h) + 70px); }
.float--b { right: calc(var(--gutter) + 180px); top: calc(var(--nav-h) + 190px); animation-delay: -3s; }
/* Laptops und niedrige Fenster: schwebende Kacheln würden den Hero-Text verdecken, deshalb beide in einer Reihe unter Überschrift und Text (18.09.2026) */
@media (min-width: 901px) and (max-width: 1400px), (min-width: 901px) and (max-height: 860px) {
  .top__in > .float { position: static; grid-row: 2; justify-self: start; margin-top: -8px; }
  .top__in > .float--a { grid-column: 1; }
  .top__in > .float--b { grid-column: 2; }
}
.float .open-now { font-size: .95rem; }
@keyframes bob { 50% { transform: translateY(-8px); } }
@media (max-width: 900px) { .top__in { grid-template-columns: 1fr; } .float { display: none; } .top__media .ph__label { top: calc(var(--nav-h) + var(--inset) + 18px); font-size: .66rem; white-space: nowrap; } }

/* Jetzt geöffnet */
.open-now { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.open-now i { width: 10px; height: 10px; border-radius: 50%; background: #6FA36A; box-shadow: 0 0 0 0 rgba(111,163,106,.5); animation: pulse 2.4s infinite; flex: none; }
.open-now.is-closed i { background: #C27C63; animation: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(111,163,106,0); } 100% { box-shadow: 0 0 0 0 rgba(111,163,106,0); } }

/* ---------- Leistungen ---------- */
.services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
@media (max-width: 1100px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .services { grid-template-columns: 1fr; } }
.svc { background: var(--surface); border-radius: var(--r); padding: 10px 10px 26px; display: grid; gap: 18px; text-align: center; box-shadow: var(--shadow-s); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.svc:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.svc .ph { border-radius: 14px; }
.svc__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: var(--bg); }
.svc__icon { width: 64px; height: 64px; margin: -50px auto 0; position: relative; z-index: 1; border-radius: 50%; background: var(--gold-grad); color: var(--graphite); display: grid; place-items: center; border: 5px solid var(--surface); }
.svc__icon svg { width: 24px; height: 24px; }
.svc h3 { padding-inline: 12px; font-size: clamp(.98rem, .86rem + .32vw, 1.18rem); hyphens: manual; }
.svc p { color: var(--muted); font-size: 1rem; padding-inline: 16px; }
.svc .link { justify-self: center; }

/* ---------- Willkommen mit Umrisswörtern ---------- */
.welcome { position: relative; overflow: hidden; }
.outline { position: absolute; left: 0; top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none; user-select: none; z-index: 0; font: 800 clamp(5rem, 15vw, 15rem)/.9 var(--display); text-transform: uppercase; color: var(--surface); -webkit-text-stroke: 3px rgba(22, 38, 58, .1); paint-order: stroke fill; }
.outline span { display: block; will-change: transform; }
.welcome .wrap { position: relative; z-index: 1; }
.welcome .stack > .btn-row { margin-top: 2.25rem; }
.welcome__img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); background: var(--bg); transform-origin: 60% 45%; }
/* Goldener Versatz-Rahmen + sanfte Einblend-Animation */
.welcome__media { position: relative; }
.welcome__frame { position: relative; z-index: 1; overflow: hidden; border-radius: var(--r); }
.welcome__media::before { content: ""; position: absolute; inset: 0; border-radius: var(--r); padding: 2px; background: var(--gold-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; transform: translate(16px, 16px); pointer-events: none; }
.js .welcome__media::before { transform: translate(0, 0); opacity: 0; transition: transform 1.3s var(--ease) .35s, opacity .9s ease .35s; }
.js .welcome__media.is-in::before { transform: translate(16px, 16px); opacity: 1; }
/* Langsame Kamerafahrt: startet automatisch, sobald der Bereich sichtbar wird */
.js .welcome__media.is-in .welcome__img { animation: welcome-zoom 24s cubic-bezier(.3, .1, .3, 1) .3s both; }
@keyframes welcome-zoom { from { transform: scale(1); } to { transform: scale(1.14); } }
@media (max-width: 600px) { .welcome__media::before, .js .welcome__media.is-in::before { transform: translate(10px, 10px); } }
@media (prefers-reduced-motion: reduce) { .welcome__media::before, .welcome__img { transition: none !important; } .js .welcome__media::before { transform: translate(16px, 16px); opacity: 1; } .js .welcome__media .welcome__img, .js .welcome__media.is-in .welcome__img { animation: none !important; transform: none; } }
/* Willkommen: Diashow mit 10 Fotos (18.09.2026), Überblenden mit leichtem Zoom, ohne Punkte; Pause-Knopf wegen Barrierefreiheit (WCAG 2.2.2) */
.welcome__frame[data-fade-slider] { aspect-ratio: 4 / 5; background: var(--bg); }
.welcome__frame[data-fade-slider] .welcome__img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; opacity: 0; transform: scale(1.07); animation: none !important; transition: opacity 1.3s ease, transform 7s linear; }
.welcome__frame[data-fade-slider] .welcome__img.is-on { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .welcome__frame[data-fade-slider] .welcome__img { transform: none; transition: opacity .01s; } }
@media (max-width: 900px) { .welcome__frame[data-fade-slider] { aspect-ratio: 4 / 3; } }
.fade__pause { position: absolute; z-index: 2; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(12, 24, 40, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: grid; place-items: center; cursor: pointer; opacity: .8; transition: opacity .3s, background-color .3s; }
.fade__pause:hover { opacity: 1; background: rgba(12, 24, 40, .6); }
.fade__pause span { width: 9px; height: 11px; border-inline: 3px solid #fff; }
.fade__pause[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 10px solid #fff; border-block: 6px solid transparent; margin-left: 3px; }
.fade__pause:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; opacity: 1; }
@media (max-width: 600px) { .welcome__frame[data-fade-slider] .welcome__img { transition: opacity .9s ease, transform 5s linear; } }   /* Tablet und Handy: Querformat, sonst sehr hoch */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(48px, 6vw, 80px); }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact { background: var(--surface); border-radius: var(--r); padding: clamp(20px, 2.4vw, 30px); display: grid; gap: 8px; box-shadow: var(--shadow-s); }
.fact__num { font: 700 clamp(2.2rem, 1.4rem + 2vw, 3.4rem)/1 var(--display); display: flex; flex-wrap: nowrap; align-items: baseline; gap: 2px 5px; letter-spacing: -.02em; white-space: nowrap; }
.fact__num--wrap { flex-wrap: wrap; white-space: normal; }
.fact__num sup { font-size: .42em; font-weight: 600; letter-spacing: 0; color: var(--gold-text); vertical-align: baseline; top: 0; }
.fact > p:not(.fact__num) { color: var(--muted); font-size: 1.05rem; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; overflow-wrap: break-word; }

/* ---------- Vergleich: POM vs. Discount-Studio ---------- */
.vs-sec { padding-bottom: clamp(40px, 5vw, 72px); }
#unterschied + #prinzip { padding-top: clamp(56px, 7vw, 100px); }
/* Desktop: zwei Karten nebeneinander, Zeilen per Subgrid auf gleicher Höhe. 8 Zeilen = Kopf + 7 Punkte (bei neuen Punkten anpassen) */
.vs { --vs-gap: clamp(14px, 2.4vw, 32px); --vs-pad: clamp(16px, 2.2vw, 30px); position: relative; max-width: 1080px; margin: 14px auto 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(8, auto); column-gap: var(--vs-gap); }
.vs__card { position: relative; isolation: isolate; grid-row: 1 / span 8; display: grid; grid-template-rows: subgrid; }
.vs__card::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: var(--r-frame); }
.vs__card--them::before { background: var(--surface); border: 1px solid var(--line); }
.vs__card--us::before { inset: -14px 0; background: linear-gradient(var(--graphite), var(--graphite)) padding-box, var(--gold-grad) border-box; border: 2px solid transparent; box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .5); transform-origin: 50% 0; }
.vs__list { list-style: none; margin: 0; padding: 0; grid-row: 2 / span 7; display: grid; grid-template-rows: subgrid; }
.vs__cell { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 18px var(--vs-pad); font-size: 1.02rem; line-height: 1.45; }
.vs__head { display: grid; gap: 6px; align-content: start; padding-top: clamp(24px, 3vw, 38px); padding-bottom: 20px; }
.vs__list .vs__cell { border-top: 1px solid var(--line); }
.vs__card--us .vs__list .vs__cell { border-top-color: var(--line-dark); }
.vs__list .vs__cell:last-child { padding-bottom: clamp(24px, 3vw, 36px); }
.vs__kicker { font: 600 .74rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vs__title { margin: 0; font: 600 clamp(1.2rem, 1rem + .9vw, 1.7rem)/1.1 var(--display); letter-spacing: -.01em; }
.vs__card--them { color: var(--muted); }
.vs__card--them .vs__title { color: var(--text); }
.vs__card--us { color: var(--on-dark); font-weight: 500; }
.vs__card--us .vs__kicker { color: var(--on-dark-muted); }
.vs__card--us .vs__title { font-weight: 800; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vs__t { background: linear-gradient(rgba(77, 92, 110, .6), rgba(77, 92, 110, .6)) 0 60% / 100% 1.5px no-repeat; }   /* Discount-Punkte werden durchgestrichen */
.vs__ico { flex: none; width: 24px; height: 24px; margin-top: .06em; overflow: visible; }
.vs__ico--no circle { fill: none; stroke: rgba(22, 38, 58, .22); stroke-width: 1.5; }
.vs__ico--no path { fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.vs__ico--yes circle { fill: var(--gold); }
.vs__ico--yes path { fill: none; stroke: var(--graphite); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.vs__badge { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-grad); color: var(--graphite); font: 700 .78rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 0 0 6px var(--bg), 0 12px 26px -12px rgba(47, 102, 163, .85); }
.vs__cta { display: flex; justify-content: center; margin-top: clamp(44px, 5vw, 68px); }
@media (max-width: 900px) { .vs__badge { width: 36px; height: 36px; font-size: .66rem; box-shadow: 0 0 0 4px var(--bg), 0 10px 22px -12px rgba(47, 102, 163, .85); } }
/* Handy: untereinander, zuerst Discount-Studio, dann "vs", darunter POM Weimar */
@media (max-width: 700px) {
  .vs { display: flex; flex-direction: column; }
  .vs__card, .vs__list { display: block; }
  .vs__card--them { order: 1; }
  .vs__badge { order: 2; position: relative; left: auto; top: auto; translate: none; align-self: center; margin: 16px 0; width: 44px; height: 44px; font-size: .72rem; box-shadow: 0 10px 22px -12px rgba(47, 102, 163, .85); }
  .vs__card--us { order: 3; }
  .vs__card--us::before { inset: 0; }
  .vs__cell { gap: 12px; padding: 12px 18px; font-size: .95rem; line-height: 1.4; }
  .vs__head { gap: 4px; padding-top: 32px; padding-bottom: 12px; }
  .vs__list .vs__cell:last-child { padding-bottom: 48px; }
  .vs__title { font-size: 1.2rem; }
  .vs__ico { width: 20px; height: 20px; }
}
/* Animation: Karten bauen sich auf, Discount-Punkte werden durchgestrichen, POM-Haken zeichnen sich */
.js .vs__card::before { transition: opacity .8s var(--ease), transform .9s var(--ease) .1s; }
.js .vs__card--them::before { opacity: 0; }
.js .vs__card--us::before { transform: scaleY(0); }
.js .vs__card.is-in::before { opacity: 1; transform: none; }
.js .vs__badge { opacity: 0; scale: .4; transition: opacity .4s ease .45s, scale .7s cubic-bezier(.34, 1.56, .64, 1) .45s; }
.js .vs__badge.is-in { opacity: 1; scale: 1; }
.js .vs__head { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease) .3s, transform .8s var(--ease) .3s; }
.js .vs__card.is-in .vs__head { opacity: 1; transform: none; }
.js .vs__list .vs__cell { opacity: 0; transition: opacity .7s var(--ease), transform .8s var(--ease); }
.js .vs__card--them .vs__list .vs__cell { transform: translateX(-14px); transition-delay: calc(var(--i, 0) * 90ms + .3s); }
.js .vs__card--us .vs__list .vs__cell { transform: translateX(18px); transition-delay: calc(var(--i, 0) * 90ms + .48s); }
.js .vs__list .vs__cell.is-in { opacity: 1; transform: none; }
.js .vs__t { background-size: 0% 1.5px; transition: background-size .7s var(--ease) calc(var(--i, 0) * 90ms + .8s); }
.js .vs__cell.is-in .vs__t { background-size: 100% 1.5px; }
.js .vs__ico--yes circle { transform-box: fill-box; transform-origin: center; scale: .3; transition: scale .6s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i, 0) * 90ms + .6s); }
.js .vs__cell.is-in .vs__ico--yes circle { scale: 1; }
.js .vs__ico--yes path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .55s var(--ease) calc(var(--i, 0) * 90ms + .85s); }
.js .vs__cell.is-in .vs__ico--yes path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .js .vs__card::before, .js .vs__badge, .js .vs__head, .js .vs__list .vs__cell, .js .vs__t, .js .vs__ico--yes circle, .js .vs__ico--yes path { transition: none !important; opacity: 1 !important; transform: none !important; scale: 1 !important; }
  .js .vs__t { background-size: 100% 1.5px !important; }
  .js .vs__ico--yes path { stroke-dashoffset: 0 !important; }
}

/* ---------- Gestapelte Karten ---------- */
.stack-cards { display: grid; gap: 24px; }
#prinzip { padding-bottom: clamp(24px, 3vw, 40px); }
#prinzip + .sec--tight { padding-top: clamp(40px, 5vw, 72px); }   /* Zitat "Seit fast 30 Jahren" näher an Karte 04 */
#prinzip-titel, #besuch-titel { text-wrap: balance; }
.scard { position: sticky; top: calc(var(--nav-h) + var(--inset) + 24px + var(--n) * 22px); border-radius: var(--r-frame); background: var(--graphite); color: var(--on-dark); padding: clamp(22px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; min-height: min(70vh, 560px); box-shadow: 0 -20px 50px -30px rgba(0,0,0,.5); border: 1px solid var(--line-dark); }
.scard:nth-child(even) { background: var(--graphite-2); }
.scard__n { font: 600 clamp(3rem, 2rem + 4vw, 6rem)/1 var(--display); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scard__copy { display: grid; gap: 18px; align-content: center; padding: clamp(6px, 2vw, 24px); }
.scard__copy p { color: var(--on-dark-muted); max-width: 30em; }
.scard .ph, .scard__media { height: 100%; min-height: 280px; }
.scard__media { position: relative; overflow: hidden; border-radius: var(--r); background: var(--graphite-2); }
.scard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.scard__media--top .scard__img { object-position: 50% 0%; }
.scard__media--hi .scard__img { object-position: 50% 8%; }
@media (max-width: 900px) { .scard { grid-template-columns: 1fr; min-height: 0; } .scard .ph, .scard__media { min-height: 220px; } }

/* ---------- Zitat ---------- */
.quote { text-align: center; max-width: 980px; margin-inline: auto; display: grid; gap: 26px; justify-items: center; }
.quote__mark { font: 800 clamp(6rem, 4rem + 5vw, 9rem)/1 var(--display); color: var(--gold); height: .5em; overflow: visible; display: block; margin-bottom: -12px; }
.quote blockquote { font: 500 clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem)/1.35 var(--sans); }
.quote cite { font: 600 .82rem/1 var(--sans); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }

/* ---------- Goldband mit Laufschrift ---------- */
.promo { background: var(--gold-grad); color: var(--graphite); }
.promo__in { padding: clamp(40px, 5vw, 64px) var(--gutter); max-width: 1180px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 26px 60px; align-items: center; }   /* Inhalt mittig im Goldfeld */
.promo .eyebrow { color: var(--graphite); }
/* Überschrift und Button auf einer Linie: kleine Zeile über volle Breite, darunter Titel links, Button rechts */
.promo__in { row-gap: 18px; }
.promo__in > .stack { display: contents; }
.promo__in > .stack > .eyebrow { grid-column: 1 / -1; }
.promo__in > .stack > .h2 { grid-column: 1; margin-top: 0; }
.promo__in > div:last-child { grid-column: 2; grid-row: 2; }
@media (max-width: 900px) { .promo__in { grid-template-columns: 1fr; } .promo__in > div:last-child { grid-column: 1; grid-row: auto; margin-top: 8px; } }
.marquee { overflow: hidden; border-top: 1px solid rgba(20, 37, 60,.2); padding-block: 14px; }
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__group span { font: 600 clamp(.95rem, .85rem + .4vw, 1.25rem)/1 var(--display); letter-spacing: .04em; text-transform: uppercase; padding-inline: clamp(14px, 1.6vw, 26px); white-space: nowrap; }
.marquee__group i { width: 7px; height: 7px; transform: rotate(45deg); background: currentColor; flex: none; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Großes CTA-Laufband */
.bigline { display: block; overflow: hidden; padding-block: clamp(16px, 2.2vw, 28px); border-block: 1px solid var(--line); }
.bigline .marquee__track { animation-duration: 36s; }
.bigline .marquee__group span { font-size: clamp(1.6rem, 1.15rem + 2.1vw, 3.3rem); font-weight: 700; letter-spacing: 0; }
.bigline .marquee__group span:nth-child(4n+3) { color: var(--bg); -webkit-text-stroke: 2.6px var(--gold-deep); paint-order: stroke fill; }
.bigline .marquee__group i { width: 12px; height: 12px; background: var(--gold-grad); }
.bigline:hover .marquee__track { animation-play-state: paused; }

/* ---------- Wechselbonus ---------- */
.bonus { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: center; background: var(--surface); border-radius: var(--r-frame); padding: clamp(28px, 5vw, 72px); box-shadow: var(--shadow-s); }
.bonus__big { background: var(--graphite); color: var(--on-dark); border-radius: var(--r); padding: clamp(24px, 3vw, 44px); display: grid; gap: 10px; }
.bonus__big b { font: 700 clamp(4rem, 3rem + 5vw, 8rem)/.9 var(--display); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bonus__big span { font: 600 1rem/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 900px) { .bonus { grid-template-columns: 1fr; } }

/* ---------- Kurse ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chips li { border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 11px 20px; font: 600 .9rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; transition: border-color .3s, background-color .3s; }
.chips li:hover { border-color: var(--gold); }
.duo { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(32px, 4vw, 56px); }
@media (max-width: 720px) { .duo { grid-template-columns: 1fr; } }

/* ---------- App ---------- */
.app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); align-items: center; padding: clamp(40px, 6vw, 96px) clamp(24px, 5vw, 80px); }
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.checks svg { width: 22px; height: 22px; color: var(--gold); margin-top: 2px; }
.phone { width: min(310px, 74vw); aspect-ratio: 9 / 19; margin-inline: auto; border-radius: 46px; background: #0F1D30; padding: 11px; box-shadow: 0 50px 90px -40px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.08); position: relative; }
.phone__notch { position: absolute; top: 21px; left: 50%; width: 88px; height: 24px; border-radius: 20px; background: #0F1D30; transform: translateX(-50%); z-index: 1; }
.phone__screen { height: 100%; border-radius: 36px; background: var(--bg); color: var(--text); overflow: hidden; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; padding: 46px 16px 16px; }
.phone__head { display: flex; justify-content: space-between; align-items: center; }
.phone__head img { height: 22px; width: auto; }
.phone__head span { font-size: .72rem; color: var(--muted); }
.phone__hi { font: 600 1.05rem/1.2 var(--display); text-transform: uppercase; }
.phone__live { border-radius: 16px; background: var(--graphite); color: var(--on-dark); padding: 13px 15px; display: grid; gap: 6px; font-size: .74rem; }
.phone__live b { font: 600 1.1rem/1 var(--display); text-transform: uppercase; color: var(--gold); }
.phone__bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.15); overflow: hidden; }
.phone__bar i { display: block; width: 36%; height: 100%; background: var(--gold-grad); }
.phone__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.phone__list li { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 12px; padding: 10px 12px; font-size: .72rem; }
.phone__list b { display: block; font-size: .8rem; }
.phone__list em { font-style: normal; font-weight: 700; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; background: var(--graphite); color: var(--on-dark); border-radius: 8px; padding: 6px 9px; }
.phone__tabs { display: flex; justify-content: space-around; padding-top: 8px; border-top: 1px solid var(--line); }
.phone__tabs i { width: 20px; height: 3px; border-radius: 3px; background: var(--line); }
.phone__tabs i:first-child { background: var(--gold); }
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 22px 0 16px; border-radius: 14px; border: 1.5px solid var(--line-dark); transition: border-color .3s, background-color .3s; }
.store:hover { border-color: var(--gold); background: rgba(255,255,255,.04); }
.store svg { width: 24px; height: 24px; }
.store span { display: grid; font-size: .72rem; line-height: 1.25; color: var(--on-dark-muted); }
.store b { color: var(--on-dark); font-size: 1rem; font-weight: 600; }

/* ---------- Standort ---------- */
.visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 1.4vw, 20px); }
@media (max-width: 900px) { .visit { grid-template-columns: 1fr; } }
.visit__card { background: var(--surface); border-radius: var(--r-frame); padding: clamp(26px, 4vw, 56px); display: grid; gap: 24px; align-content: start; box-shadow: var(--shadow-s); }
.visit .ph { min-height: 360px; border-radius: var(--r-frame); }
/* Außenbild: gleicher Effekt wie das Lounge-Bild (goldener Rahmen versetzt, langsamer Zoom) */
.visit__media { position: relative; min-height: 360px; }
.visit__frame { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: var(--r-frame); background: var(--bg); }
.visit__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 35%; transform-origin: 45% 38%; }   /* Banner mit Logo bleibt im Bild */
.visit__media::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-frame); padding: 2px; background: var(--gold-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; transform: translate(16px, 16px); pointer-events: none; }
.js .visit__media::before { transform: translate(0, 0); opacity: 0; transition: transform 1.3s var(--ease) .35s, opacity .9s ease .35s; }
.js .visit__media.is-in::before { transform: translate(16px, 16px); opacity: 1; }
.js .visit__media.is-in .visit__img { animation: welcome-zoom 24s cubic-bezier(.3, .1, .3, 1) .3s both; }
@media (max-width: 600px) { .visit__media::before, .js .visit__media.is-in::before { transform: translate(10px, 10px); } }
@media (prefers-reduced-motion: reduce) { .visit__media::before { transition: none !important; } .js .visit__media::before { transform: translate(16px, 16px); opacity: 1; } .js .visit__media .visit__img, .js .visit__media.is-in .visit__img { animation: none !important; transform: none; } }
.info { display: grid; gap: 18px; }
.info dt { font: 600 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 6px; }
.info dd { margin: 0; font-size: 1.08rem; }
.hours { width: 100%; border-collapse: collapse; font-size: 1.02rem; }
.hours th, .hours td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 700; }
.hours tr.is-today th::after { content: "Heute"; margin-left: 10px; font: 700 .66rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; background: var(--gold-grad); color: var(--graphite); border-radius: 6px; padding: 4px 7px; vertical-align: middle; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface); border-radius: var(--r); padding: 0 clamp(20px, 2.4vw, 30px); box-shadow: var(--shadow-s); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 600 1.15rem/1.35 var(--sans); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--bg); position: relative; transition: background-color .3s; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: currentColor; transform: translate(-50%, -50%); }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--t) var(--ease); }
.faq details[open] summary i { background: var(--gold-light); }
.faq details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.faq .answer { padding: 0 0 24px; color: var(--muted); max-width: 48em; }

/* ---------- Fuß ---------- */
.foot { margin: var(--inset); border-radius: var(--r-frame); background: var(--graphite); color: var(--on-dark); padding: clamp(56px, 7vw, 100px) 0 0; }
.foot__top { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 60px); padding-bottom: clamp(48px, 6vw, 80px); }
.foot__brand img { height: 50px; width: auto; }
.foot__brand p { margin-top: 22px; color: var(--on-dark-muted); max-width: 22em; }
.foot h3, .foot .foot__h { font: 600 .78rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot ul a, .foot address a { display: inline-block; padding: 6px 0; color: var(--on-dark-muted); transition: color .2s; }
.foot ul a:hover, .foot address a:hover { color: var(--on-dark); }
.foot address { font-style: normal; display: grid; gap: 2px; color: var(--on-dark-muted); }
.foot__hours { display: grid; grid-template-columns: auto auto; gap: 4px 16px; margin-top: 18px; color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
.foot__hours dd { margin: 0; color: var(--on-dark); }
.social { display: flex; gap: 10px; margin-top: 22px; }
.social a { width: 46px; height: 46px; border-radius: 12px; background: var(--graphite-3); display: grid; place-items: center; transition: background-color .3s, color .3s; }
.social a:hover { background: var(--gold-grad); color: var(--graphite); }
.social svg { width: 20px; height: 20px; }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding-block: 24px 30px; border-top: 1px solid var(--line-dark); color: var(--on-dark-muted); font-size: .92rem; }
.foot__bottom ul { display: flex; gap: 22px; flex-wrap: wrap; }
.foot__bottom a:hover { color: var(--on-dark); }
@media (max-width: 1024px) { .foot__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .foot__top { grid-template-columns: 1fr; } }

.to-top { position: fixed; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 90; width: 52px; height: 52px; border-radius: 14px; background: var(--gold-grad); color: var(--graphite); display: grid; place-items: center; box-shadow: var(--shadow-s); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .4s, transform .4s var(--ease); }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { width: 20px; height: 20px; }
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 101; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--gold-grad); transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-split] .w > span { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; }
}

/* ---------- Physio und Beckenboden ---------- */
.dark .fact { background: var(--graphite-2); box-shadow: none; border: 1px solid var(--line-dark); }
.dark .fact > p:not(.fact__num) { color: var(--on-dark-muted); }
.dark .fact__num sup { color: var(--gold); }
.dark .chips li { background: var(--graphite-2); border-color: var(--line-dark); }
.chips--sm li { padding: 9px 15px; font-size: .8rem; }
.split-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
@media (max-width: 600px) { .split-lists { grid-template-columns: 1fr; } }
.split-lists h3 { margin-bottom: 12px; }
.mini-info { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 1rem; color: var(--muted); }
.mini-info span { display: inline-flex; align-items: center; gap: 8px; }
ul.mini-info__zeiten { flex-basis: 100%; margin: -4px 0 0; padding: 0 0 0 26px; list-style: none; display: grid; gap: 4px; }
.mini-info svg { width: 18px; height: 18px; color: var(--gold-text); }
.dark .mini-info { color: var(--on-dark-muted); }
.dark .mini-info svg { color: var(--gold); }
.beckenboden { width: 100%; max-width: var(--wrap); margin-inline: auto; padding: var(--sec) var(--gutter); display: grid; gap: clamp(32px, 4vw, 56px); }
.beckenboden__top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
@media (max-width: 900px) { .beckenboden__top { grid-template-columns: 1fr; } }
.beckenboden .facts { margin-top: 0; gap: 10px; }
.beckenboden .fact { padding: clamp(16px, 1.6vw, 22px); gap: 6px; border-radius: 16px; }
.beckenboden .fact__num { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.3rem); }
.beckenboden .fact > p:not(.fact__num) { font-size: .92rem; line-height: 1.45; }
.note-s { font-size: .9rem; color: var(--muted); }
.dark .note-s { color: var(--on-dark-muted); }

/* ---------- Schriftvergleich (nur Vorschau) ---------- */
.fontpick { display: grid; gap: 22px; }
.fontpick__item { border-radius: var(--r-frame); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-s); }
.fontpick__demo { background: var(--graphite); color: var(--on-dark); padding: clamp(28px, 4vw, 56px); }
.fontpick__body { padding: clamp(24px, 3vw, 44px); display: grid; gap: 14px; }
.fontpick__tag { display: inline-flex; gap: 10px; align-items: center; font: 700 .8rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.fontpick__demo .eyebrow { color: var(--gold); margin-bottom: 18px; }

/* ---------- Team-Slider ---------- */
.slider__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 16px; }
.slider__track::-webkit-scrollbar { display: none; }
.member { flex: none; width: clamp(210px, 21vw, 262px); scroll-snap-align: start; background: var(--surface); border-radius: var(--r); padding: 10px 10px 22px; box-shadow: var(--shadow-s); display: grid; gap: 14px; text-align: center; }
.member img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 14px; background: var(--bg); }
.member h3 { font-size: 1.02rem; }
.member p { color: var(--muted); font-size: .95rem; margin-top: 7px; }
.member--soon .member__soon { aspect-ratio: 4 / 5; border-radius: 14px; }
.slider__nav { display: flex; gap: 10px; }
.slider__nav button { width: 54px; height: 54px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); display: grid; place-items: center; transition: border-color .3s, background-color .3s; }
.slider__nav button:hover { border-color: var(--gold); }
.slider__nav svg { width: 20px; height: 20px; }
.slider__nav button:first-child svg { transform: rotate(180deg); }

.fontgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .fontgrid { grid-template-columns: 1fr; } }
.fontgrid__group { grid-column: 1 / -1; margin-top: 28px; font: 700 .9rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); display: flex; gap: 12px; align-items: baseline; }
.fontgrid__group span { font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--muted); }
.fontgrid__group:first-child { margin-top: 0; }
.fontgrid__h1 { font-size: clamp(2rem, 1rem + 2.6vw, 3.6rem) !important; }
.fontgrid__h2 { font-size: clamp(1.5rem, 1rem + 1.3vw, 2.2rem) !important; }

/* Goldverlauf aus dem Logo auf weiteren Elementen */
.stars svg { filter: drop-shadow(0 0 0 transparent); }
.chips li:hover, .slider__nav button:hover { border-color: var(--gold-deep); }
.faq details[open] summary i { background: var(--gold-grad); }
.fact__num sup { background: var(--gold-grad-deep); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dark .fact__num sup { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.svc { border-top: 3px solid transparent; background-image: linear-gradient(var(--surface), var(--surface)), var(--gold-grad); background-origin: border-box; background-clip: padding-box, border-box; }
.quote__mark { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.avatars span { background: linear-gradient(160deg, #4D5C6E, #253B57); box-shadow: 0 0 0 2px rgba(125, 182, 230, .55); }

@media (max-width: 600px) { .fact__num { font-size: 2.05rem; } .fact { padding: 18px 16px; } }
@media (max-width: 600px) { .beckenboden .fact__num { font-size: 1.55rem; } .beckenboden .fact { padding: 14px 14px 16px; } }
/* Handy: Beckenboden kompakt, nur Text, Knöpfe und Video */
@media (max-width: 700px) { #beckenboden .facts, #beckenboden .split-lists, #beckenboden .note-s { display: none; } }

/* Verlaufsschrift pro Wort: Safari zeichnet Verlaufsschrift nicht über animierte Wortteile */
.js [data-split] .gold, .js [data-split].gold-fill, .js [data-split] .gold-fill { background: none; color: var(--gold-text); -webkit-text-fill-color: currentColor; }
.js [data-split] .gold .w > span { background: var(--gold-grad-deep); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.js .dark [data-split] .gold .w > span, .js .top [data-split] .gold .w > span, .js [data-split].gold-fill .w > span, .js [data-split] .gold-fill .w > span { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* Physio: mehr Luft bei den Leistungen */
#physio .chips--sm { margin-top: 22px; gap: 12px 10px; }
.chips--links li { padding: 0; }
.chips--links a { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 9px 15px; border-radius: inherit; color: inherit; text-decoration: none; transition: color .3s; }
.chips--links a svg { width: 11px; height: 11px; flex: none; color: var(--gold-deep); transition: transform .35s var(--ease, ease); }
.chips--links li:hover, .chips--links li:focus-within { border-color: var(--gold-deep); background: rgba(125, 182, 230, .12); }
.chips--links a:hover svg, .chips--links a:focus-visible svg { transform: translate(2px, -2px); }
.chips--links a:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

/* Rechtstexte */
.legal-page { padding-top: calc(var(--nav-h) + 90px); }
.rechner-page { padding-top: calc(var(--nav-h) + 56px); }
}
.legal { max-width: 860px; }
.legal h2 { font: 600 1.4rem/1.25 var(--display); margin: 40px 0 10px; }
.legal p { color: var(--muted); }
.legal p + p { margin-top: 10px; }
.legal h3, .legal__h3 { font: 600 1.05rem/1.35 var(--sans); margin: 24px 0 8px; }
.legal ul { color: var(--muted); margin: 10px 0 0; padding-left: 1.2em; }
.legal li + li { margin-top: 4px; }
.legal ul + p, .legal p + ul { margin-top: 10px; }
.legal a:not(.link) { text-decoration: underline; text-underline-offset: 3px; }
.note { border-left: 3px solid var(--gold-deep); background: var(--surface); padding: 14px 18px; border-radius: 0 12px 12px 0; font-size: .98rem; color: var(--text) !important; }

/* Sonderöffnungszeiten laut Google */
.hours tr.is-special td { font-weight: 700; color: var(--gold-text); }
.hours tr.is-special th::before { content: "Sonderzeit"; margin-right: 10px; font: 700 .64rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; border: 1.5px solid var(--gold-deep); color: var(--gold-text); border-radius: 6px; padding: 3px 6px; vertical-align: middle; }

/* ---------- Kursplan live ---------- */
.plan { margin-top: clamp(32px, 4vw, 56px); background: var(--surface); border-radius: var(--r-frame); box-shadow: var(--shadow-s); padding: clamp(22px, 3vw, 40px); display: grid; gap: 20px; }
.plan__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; }
.plan__stand { font-size: .92rem; }
.plan__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.plan__days::-webkit-scrollbar { display: none; }
.plan__day { min-width: 0; min-height: 58px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); text-align: left; display: grid; gap: 3px; font: 600 1rem/1.2 var(--sans); cursor: pointer; transition: border-color .3s, background-color .3s, color .3s; }
.plan__day small { font-weight: 500; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.plan__day .plan__count { color: var(--text); opacity: .7; }
.plan__day[aria-pressed="true"] .plan__count { color: var(--on-dark); }
.plan__day:hover { border-color: var(--gold-deep); }
.plan__day[aria-pressed="true"] { background: var(--graphite); color: var(--on-dark); border-color: var(--graphite); }
.plan__day[aria-pressed="true"] small { color: var(--gold); }
.plan__list { display: grid; }
.plan__item { display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.plan__time { font: 600 1rem/1.2 var(--display); font-variant-numeric: tabular-nums; }
.plan__name { font: 600 1.06rem/1.3 var(--display); }
.plan__trainer { display: block; margin-top: 3px; font: 400 .92rem/1.4 var(--sans); color: var(--muted); }
.plan__badge { font: 600 .74rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 8px 10px; border-radius: 8px; background: var(--bg); color: var(--muted); white-space: nowrap; }
.plan__badge--free { background: rgba(125, 182, 230, .22); color: var(--gold-text); }
.plan__badge--off { background: #F6E3DE; color: #9A3B24; }
.plan__item.is-canceled .plan__name { text-decoration: line-through; color: var(--muted); }
.plan__item.is-past { opacity: .5; }
.plan__empty { padding: 18px 0; color: var(--muted); border-top: 1px solid var(--line); }
.plan__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 6px; }
@media (max-width: 760px) {
  .plan__days { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 0 4px 4px; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .plan__day { flex: none; min-width: 84px; scroll-snap-align: start; }
}
@media (max-width: 600px) { .plan__item { grid-template-columns: minmax(0, 1fr) auto; } .plan__time { grid-column: 1 / -1; } }

/* ---------- Video (Beckenboden) ---------- */
.vid { width: 100%; border: 0; padding: 0; font: inherit; color: var(--on-dark); cursor: pointer; text-align: left; isolation: isolate; }
.vid picture { position: absolute; inset: 0; z-index: -2; }
.vid__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--ease); }
.vid::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(12, 24, 40, .1) 0%, rgba(12, 24, 40, 0) 30%, rgba(12, 24, 40, .55) 62%, rgba(12, 24, 40, .92) 100%); }
.vid:hover .vid__img, .vid:focus-visible .vid__img { transform: scale(1.035); }
.vid__play { width: clamp(72px, 7vw, 96px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--gold-grad); color: var(--graphite); box-shadow: 0 12px 40px rgba(0, 0, 0, .35), 0 0 0 10px rgba(125, 182, 230, .16); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.vid__play svg { width: 36%; height: 36%; margin-left: 6%; }
.vid:hover .vid__play, .vid:focus-visible .vid__play { transform: scale(1.07); box-shadow: 0 14px 44px rgba(0, 0, 0, .4), 0 0 0 16px rgba(125, 182, 230, .12); }
.vid:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.vid__txt { position: absolute; left: clamp(16px, 2vw, 26px); right: clamp(16px, 2vw, 26px); bottom: clamp(16px, 2vw, 24px); display: grid; gap: 7px; font: 600 clamp(1rem, .9rem + .4vw, 1.2rem)/1.3 var(--display); }
.vid__kicker { font: 600 .74rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.vbox { width: min(1100px, 92vw); max-width: none; max-height: 88vh; padding: 0; border: 0; border-radius: var(--r); background: #000; overflow: visible; }
.vbox::backdrop { background: rgba(12, 24, 40, .84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vbox[open] { animation: vbox-in .45s var(--ease); }
@keyframes vbox-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.vbox__video { display: block; width: 100%; max-height: 88vh; border-radius: var(--r); background: #000; }
.vbox__close { position: absolute; bottom: calc(100% + 12px); right: 0; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--surface); color: var(--graphite); display: grid; place-items: center; cursor: pointer; }
.vbox__close svg { width: 20px; height: 20px; transform: rotate(45deg); }
.vbox__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .vbox[open] { animation: none; } .vid__play { transition: none; } }

/* ---------- Auszeichnungen (Hero) ---------- */
.awards { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.awards__title { display: inline-flex; align-items: center; gap: 7px; }
.awards__title svg { width: 16px; height: 16px; color: var(--on-dark-muted); flex: none; }
.awards__title b { color: var(--on-dark-muted); font-weight: 300; }
.awards__seals { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.awards__seals img { height: 40px; width: auto; }
@media (max-width: 600px) { .awards__seals { gap: 8px; } .awards__seals img { height: 38px; } }
.trust:has(.awards) { align-items: flex-end; }
.rating-link { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: inherit; text-decoration: none; }
.rating-link u { text-decoration: underline; text-decoration-color: rgba(125, 182, 230, .5); text-underline-offset: 4px; transition: text-decoration-color .3s; }
.rating-link u + svg { display: inline-block; width: 13px; height: 13px; margin-left: 6px; vertical-align: -1px; color: var(--gold); transition: transform .35s var(--ease); }
.rating-link:hover u, .rating-link:focus-visible u { text-decoration-color: var(--gold); }
.rating-link:hover u + svg, .rating-link:focus-visible u + svg { transform: translate(2px, -2px); }
.rating-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
/* Handy: kleinerer Titel, Bewertung nur Sterne und 4,8 / 5 */
@media (max-width: 600px) {
  .awards__title { font-size: .8rem; gap: 6px; }
  .awards__title svg { width: 13px; height: 13px; }
  .rating-count { display: none; }
  /* Tippfläche bleibt 44 px hoch, nimmt optisch aber keinen Extra-Platz ein */
  .rating-link { min-height: 44px; margin-block: -11px; }
  .rating-link .stars { gap: 0; }
  .rating-link .stars svg { width: 22px; height: 22px; }
  .trust:has(.awards) { row-gap: 12px; }
  .top__in { padding-bottom: 34px; }
  /* Hero-Text sichtbar tiefer ansetzen, damit oben mehr vom Bild zu sehen ist (Wunsch des Inhabers 22.09.2026).
     .top__in hängt am unteren Rand fest (align-items:end); mehr Platz oben allein gleicht sich dadurch wieder
     aus. Erster Versuch über eine größere Hero-Fläche (min-height: 100svh + 90px) hat auf einem echten iPhone
     (Safari) nichts bewirkt, obwohl er im Simulator funktionierte. Deshalb stattdessen die Abstände im
     Text-Block selbst verkleinert: der Block wird dadurch von sich aus kürzer und rutscht, weil er unten
     hängt, ganz ohne Bildschirm-Einheiten von selbst weiter nach unten. */
  .top:not(.top--sub):not(.top--preise) .top__in { row-gap: 14px; }
  .top:not(.top--sub):not(.top--preise) h1 .eyebrow { margin-bottom: 10px; }
  .top:not(.top--sub):not(.top--preise) .top__side { gap: 14px; }
  .top:not(.top--sub):not(.top--preise) .trust { padding-top: 14px; }
  .top:not(.top--sub):not(.top--preise) .btn-row .btn { --bh: 48px; }
  /* Echtes iPhone (Safari) hat durch die Werkzeugleisten nur ~622px Höhe statt der angenommenen 812px.
     Messungen direkt auf dem Gerät (22.09.2026) zeigen: der Textblock hängt NICHT unten fest, sondern
     beginnt direkt nach diesem oberen Abstand. Um mehr Bild sichtbar zu machen, muss der Abstand oben
     deshalb größer werden (nicht kleiner) – die Vertrauens-Zeile ganz unten darf dafür knapp unter den
     ersten Bildschirm rutschen, das ist unproblematisch. */
  .top:not(.top--sub):not(.top--preise) .top__in { padding-top: calc(var(--nav-h) + 140px); }
  /* Hero-Headline auf dem Handy größer, wächst mit der Breite */
  .top h1.h1 { font-size: min(11.5vw, 2.9rem); }
}

/* ---------- Karriere (Unterseite) ---------- */
.top--sub { min-height: min(calc(100svh - var(--inset) * 2), 860px); }
@media (min-width: 901px) {
  /* Personen stehen rechts im Bild: Verlauf von links für die Überschrift, rechts frei */
  .top--sub::after { background: linear-gradient(90deg, rgba(16, 30, 48,.78) 0%, rgba(16, 30, 48,.5) 30%, rgba(16, 30, 48,.12) 55%, rgba(16, 30, 48,0) 70%); }
  .top--sub .float--a { right: auto; left: calc(var(--gutter) + 10px); }
  .top--sub .float--b { right: auto; left: calc(var(--gutter) + 190px); }
}
@media (max-width: 900px) { .top--sub .top__img { object-position: 74% 30%; } .top--sub .float { display: none; } }
.trust--list { list-style: none; margin: 0; }
/* Die Grundregel ul[role=list] { padding: 0 } ist stärker als .trust, dadurch klebte der erste Punkt an der Trennlinie */
ul.trust { padding-top: 26px; }
@media (max-width: 600px) { ul.trust { padding-top: 20px; } }
.trust--list li { display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark); }
.trust--list svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.reasons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.reason { background: var(--surface); border-radius: var(--r); padding: clamp(18px, 2vw, 26px); box-shadow: var(--shadow-s); display: grid; gap: 14px; align-content: start; min-height: 168px; transition: transform .35s var(--ease), box-shadow .35s; }
.reason:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .35); }
.reason__n { font: 600 clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem)/1 var(--display); background: var(--gold-grad-deep); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reason { grid-template-columns: minmax(0, 1fr); }
.reason p { font-weight: 600; line-height: 1.35; hyphens: auto; overflow-wrap: break-word; }
.reason small { display: block; margin-top: 4px; color: var(--muted); font-weight: 400; font-size: .92rem; }
@media (max-width: 999px) { .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .reason { min-height: 0; gap: 10px; } }
@media (max-width: 359px) { .reasons { grid-template-columns: minmax(0, 1fr); } }
.jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); align-items: start; }
@media (max-width: 900px) { .jobs { grid-template-columns: 1fr; } }
/* Desktop: beide Stellenkarten gleich hoch, Button unten bündig */
@media (min-width: 901px) { .jobs { align-items: stretch; } .job { grid-template-rows: auto auto auto 1fr auto; } .job__more { align-self: start; } }
.job { position: relative; overflow: hidden; background: var(--graphite); color: var(--on-dark); border: 1px solid var(--line-dark); border-radius: var(--r-frame); padding: clamp(24px, 3vw, 44px); display: grid; gap: 20px; align-content: start; }
.job { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 400px) { .job .btn { width: 100%; white-space: normal; text-align: center; } }
.job + .job { background: var(--graphite-2); }
.job::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--gold-grad); }
.job__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.job__tags li { border: 1px solid var(--line-dark); border-radius: 999px; padding: 8px 14px; font: 600 .74rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }
.job h3 { font: 700 clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem)/1.05 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
@media (max-width: 480px) { .job h3 { font-size: min(1.6rem, 6vw); } }
.job__intro { color: var(--on-dark-muted); }
.job details { border-top: 1px solid var(--line-dark); }
.job details:last-child { border-bottom: 1px solid var(--line-dark); }
.job summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font: 600 1.05rem/1.3 var(--sans); }
.job summary::-webkit-details-marker { display: none; }
.job summary i { flex: none; position: relative; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .08); transition: background-color .3s; }
.job summary i::before, .job summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; background: currentColor; transform: translate(-50%, -50%); }
.job summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--t) var(--ease); }
.job details[open] summary i { background: var(--gold-grad); color: var(--graphite); }
.job details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.job summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 8px; }
.checks { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; color: var(--on-dark-muted); }
.checks li { display: flex; align-items: flex-start; gap: 12px; hyphens: auto; overflow-wrap: anywhere; }
.checks svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--gold); }
.apply { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; background: var(--surface); border-radius: var(--r-frame); padding: clamp(20px, 3vw, 40px); box-shadow: var(--shadow-s); }
.apply > picture { display: block; }
.apply > picture > img { display: block; width: 120px; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 14%; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--gold); }
.apply__role { color: var(--muted); }
.apply .btn svg { width: 18px; height: 18px; }
@media (max-width: 1100px) { .apply > picture > img { width: 100px; } }
@media (max-width: 800px) { .apply { grid-template-columns: 1fr; } .apply > picture > img { width: 80px; } }
.apply .btn svg { flex: none; }
@media (max-width: 480px) { .apply .btn { width: 100%; white-space: normal; text-align: center; padding: 10px 18px; } }

/* ---------- Schnellbewerbung (Karriere): eine Frage pro Schritt ---------- */
.fx { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--text); overflow: hidden; }
.fx[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: fx-in .5s var(--ease); }
@keyframes fx-in { from { opacity: 0; transform: translateY(24px); } }
.fx::backdrop { background: rgba(12, 24, 40, .6); }
.fx__glow { position: absolute; width: 64vmax; height: 64vmax; right: -24vmax; top: -30vmax; border-radius: 50%; background: radial-gradient(circle, rgba(125, 182, 230, .45), rgba(125, 182, 230, .12) 45%, transparent 70%); pointer-events: none; }
.fx__top { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(14px, 3vw, 32px); padding: 14px var(--gutter); }
.fx__logo { width: 92px; height: auto; flex: none; }
.fx__progress { flex: 1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.fx__progress span { display: block; height: 100%; background: var(--gold-grad); transform-origin: 0 50%; transform: scaleX(var(--fp, 0)); transition: transform .6s var(--ease); }
.fx__count { font: 500 .8rem/1 var(--sans); color: var(--muted); min-width: 3.2em; text-align: right; }
.fx__close { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.fx__close svg { width: 20px; height: 20px; transform: rotate(45deg); }
.fx__close:focus-visible, .fx__back:focus-visible, .fx__edit:focus-visible, .fx__rm:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.fx__form { position: relative; z-index: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.fx__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fx__stage { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: clamp(16px, 4vh, 56px) var(--gutter) 28px; transition: opacity .3s ease, transform .5s var(--ease); }
.fx__stage.is-out-up { opacity: 0; transform: translateY(-28px); transition-duration: .2s; }
.fx__stage.is-out-down { opacity: 0; transform: translateY(28px); transition-duration: .2s; }
.fx__stage.is-in-up { opacity: 0; transform: translateY(36px); transition: none; }
.fx__stage.is-in-down { opacity: 0; transform: translateY(-36px); transition: none; }
.fx__step { width: min(720px, 100%); margin: auto; display: grid; gap: 14px; }
.fx__num { display: flex; align-items: center; gap: 8px; font: 600 .85rem/1 var(--sans); color: var(--gold-text); }
.fx__num svg { width: 16px; height: 16px; }
.fx__q { font: 600 clamp(1.55rem, 1.1rem + 1.9vw, 2.5rem)/1.16 var(--display); letter-spacing: -.02em; text-wrap: balance; outline: none; }
.fx__q--xl { font-size: clamp(2rem, 1.2rem + 3vw, 3.3rem); line-height: 1.08; }
.fx__hint { color: var(--muted); font-size: 1.05rem; }
.fx__opts { display: grid; gap: 10px; margin-top: 12px; }
.fx__opts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx__opt { position: relative; display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 12px 16px; border-radius: var(--r-s); background: var(--surface); border: 1.5px solid transparent; box-shadow: var(--shadow-s); cursor: pointer; transition: border-color .25s, background-color .25s, color .25s, transform .2s ease; }
.fx__opt:hover { border-color: var(--gold); transform: translateY(-1px); }
.fx__opt input { position: absolute; opacity: 0; pointer-events: none; }
.fx__key { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--line); font: 600 .8rem/1 var(--sans); color: var(--muted); transition: background-color .25s, color .25s, border-color .25s; }
.fx__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fx__txt b { font-weight: 600; }
.fx__txt small { color: var(--muted); font-size: .9rem; line-height: 1.35; }
.fx__tick { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-grad); color: var(--graphite); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s var(--ease); }
.fx__tick svg { width: 16px; height: 16px; stroke-width: 2.4; }
.fx__opt:has(input:checked) { background: var(--graphite); border-color: var(--graphite); color: var(--on-dark); }
.fx__opt:has(input:checked) .fx__txt small { color: var(--on-dark-muted); }
.fx__opt:has(input:checked) .fx__key { background: var(--gold-grad); border-color: transparent; color: var(--graphite); }
.fx__opt:has(input:checked) .fx__tick { opacity: 1; transform: none; }
.fx__opt:has(input:focus-visible) { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.fx__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.fx__field { display: grid; gap: 8px; align-content: start; }
.fx__field > span { font-weight: 600; font-size: .95rem; }
.fx__field input, .fx__field textarea { width: 100%; font: inherit; font-size: 1.12rem; color: var(--text); background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-s); padding: 15px 18px; box-shadow: var(--shadow-s); transition: border-color .25s, box-shadow .25s; }
.fx__field input:focus, .fx__field textarea:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 4px rgba(125, 182, 230, .28); }
.fx__field [aria-invalid="true"] { border-color: #B3261E; }
.fx__field--area { margin-top: 12px; }
.fx__field textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.fx__len { justify-self: end; color: var(--muted); font: 500 .75rem/1 var(--sans); }
.fx__err { font-style: normal; font-size: .9rem; color: #B3261E; }
.fx__err:empty { display: none; }
.fx__chips { border: 0; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fx__chips legend { padding: 0; margin-bottom: 10px; font-weight: 600; font-size: .95rem; }
.fx__chips legend small { font-weight: 400; color: var(--muted); }
.fx__chips label { position: relative; cursor: pointer; }
.fx__chips input { position: absolute; opacity: 0; pointer-events: none; }
.fx__chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); font-size: .95rem; transition: background-color .2s, color .2s, border-color .2s; }
.fx__chips input:checked + span { background: var(--graphite); border-color: var(--graphite); color: var(--on-dark); }
.fx__chips input:focus-visible + span { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.fx__drop { position: relative; margin-top: 12px; display: grid; justify-items: center; gap: 4px; padding: clamp(28px, 5vw, 44px) 20px; border: 2px dashed rgba(22, 38, 58, .25); border-radius: var(--r); background: var(--surface-2); text-align: center; cursor: pointer; transition: border-color .25s, background-color .25s; }
.fx__drop:hover, .fx__drop.is-over { border-color: var(--gold-deep); background: #EEF6FD; }
.fx__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fx__drop:has(input:focus-visible) { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.fx__drop-ic { width: 54px; height: 54px; margin-bottom: 8px; border-radius: 50%; background: var(--gold-grad); color: var(--graphite); display: grid; place-items: center; }
.fx__drop-ic svg { width: 24px; height: 24px; }
.fx__drop small { color: var(--muted); }
.fx__file { margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-s); background: var(--surface); box-shadow: var(--shadow-s); }
.fx__file > svg { flex: none; width: 24px; height: 24px; color: var(--gold-text); }
.fx__file span { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.fx__file small { margin-left: 6px; color: var(--muted); font-weight: 400; }
.fx__rm, .fx__edit { border: 0; background: none; cursor: pointer; min-height: 44px; padding: 0 4px; font: 600 .88rem/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.fx__rm { color: var(--muted); }
.fx__edit { color: var(--gold-text); }
.fx__sum { margin: 10px 0 0; padding: 4px 20px; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-s); }
.fx__sum > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.fx__sum > div:last-child { border-bottom: 0; }
.fx__sum dt { color: var(--muted); font-size: .9rem; }
.fx__sum dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fx__consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; font-size: .95rem; color: var(--muted); cursor: pointer; }
.fx__consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--graphite); }
.fx__consent a { color: var(--text); text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: 3px; }
.fx__alert { display: grid; gap: 8px; justify-items: start; padding: 16px 18px; border-radius: var(--r-s); background: #FDF1EF; border: 1px solid #E4A59C; }
.fx__alert span { color: var(--muted); }
.fx__intro { display: grid; gap: 16px; justify-items: start; }
.fx__ronny { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; object-position: 50% 16%; background: var(--surface-2); box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--gold); }
.fx__perks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; }
.fx__perks li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.fx__perks svg { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--gold-grad); color: var(--graphite); stroke-width: 2.6; }
.fx__nav { display: flex; align-items: center; gap: 16px; padding: 12px var(--gutter) max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(237, 241, 245, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fx.is-done .fx__nav { display: none; }
.fx__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; border: 0; background: none; font: 600 .95rem/1 var(--sans); color: var(--muted); cursor: pointer; }
.fx__back svg { width: 18px; height: 18px; transform: rotate(180deg); }
.fx__tip { margin-left: auto; font-size: .85rem; color: var(--muted); }
.fx__tip kbd { font: 600 .75rem/1 var(--mono); padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.fx__next svg { width: 18px; height: 18px; flex-shrink: 0; }
.fx__next.is-busy { opacity: .75; cursor: progress; }
.fx__done { position: relative; display: grid; justify-items: center; gap: 16px; text-align: center; }
.fx__seal { width: 120px; height: 120px; }
.fx__ring { fill: var(--surface); stroke: var(--gold); stroke-width: 4; stroke-dasharray: 327; stroke-dashoffset: 327; animation: fx-draw .9s var(--ease) .1s forwards; }
.fx__mark { fill: none; stroke: var(--graphite); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 70; stroke-dashoffset: 70; animation: fx-draw .5s var(--ease) .8s forwards; }
@keyframes fx-draw { to { stroke-dashoffset: 0; } }
.fx__burst { position: absolute; left: 50%; top: 60px; width: 0; height: 0; }
.fx__burst i { position: absolute; left: -4px; top: -7px; width: 8px; height: 14px; border-radius: 2px; background: var(--gold-grad); opacity: 0; transform: rotate(var(--a)); animation: fx-burst 1.1s var(--ease) calc(.75s + var(--d)) forwards; }
.fx__burst i:nth-child(3n) { width: 10px; height: 10px; border-radius: 50%; }
@keyframes fx-burst { 15% { opacity: 1; } to { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(160deg); } }
.fx__step.is-shake { animation: fx-shake .4s ease; }
@keyframes fx-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@media (max-width: 700px), (pointer: coarse) { .fx__tip { display: none; } .fx__next { margin-left: auto; } }
@media (max-width: 600px) {
  .fx__opts--grid, .fx__fields { grid-template-columns: minmax(0, 1fr); }
  .fx__sum { padding: 4px 16px; }
  .fx__sum > div { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 0; }
  .fx__sum dd { grid-column: 1; }
  .fx__edit { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 480px) { .fx__logo { width: 70px; } .fx__next { flex: 1; } .fx__opt { min-height: 56px; padding: 10px 14px; } }
@media (prefers-reduced-motion: reduce) {
  .fx[open], .fx__step.is-shake, .fx__burst i { animation: none; }
  .fx__stage, .fx__progress span { transition: none; }
  .fx__ring, .fx__mark { animation: none; stroke-dashoffset: 0; }
}
.fx [hidden] { display: none !important; }

/* ---------- Gehaltsrechner (Karriere, Modus bewerbung): links die Frage, rechts der blaue Kasten mit Auswahl und Gehalt ---------- */
.fx--calc .fx__form { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-rows: minmax(0, 1fr) auto; }
.fx--calc .fx__stage { grid-column: 1; grid-row: 1; }
.fx--calc .fx__nav { grid-column: 1 / -1; grid-row: 2; }
.fx__calc { grid-column: 2; grid-row: 1; align-self: start; margin: clamp(16px, 4vh, 56px) var(--gutter) 24px 0; padding: 26px 24px 22px; border-radius: var(--r); background: linear-gradient(160deg, #2F66A3 0%, var(--graphite) 100%); color: var(--on-dark); box-shadow: 0 30px 60px -30px rgba(12, 24, 40, .55); max-height: calc(100% - 40px); overflow-y: auto; }
.fx__calc-k { font: 600 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #B5DDF6; }
.fx__calc-t { margin-top: 10px; font: 600 1.35rem/1.2 var(--display); letter-spacing: -.01em; }
.fx__calc-rows { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .16); }
.fx__calc-rows > div { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; font-size: .92rem; }
.fx__calc-rows dt { color: rgba(242, 246, 250, .72); }
.fx__calc-rows dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.fx__calc-pay { margin-top: 18px; padding: 16px 18px; border-radius: var(--r-s); background: rgba(255, 255, 255, .1); border: 1px solid rgba(181, 221, 246, .35); display: grid; gap: 4px; }
.fx__calc-pay span { font-size: .85rem; color: rgba(242, 246, 250, .8); }
.fx__calc-sum { white-space: nowrap; font: 700 clamp(1.2rem, 1rem + .6vw, 1.45rem)/1.15 var(--display); letter-spacing: -.02em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx__calc-pay small { font-size: .75rem; line-height: 1.4; color: rgba(242, 246, 250, .65); }
.fx__calc-pay.is-locked .fx__calc-sum { font-size: 1.05rem; font-weight: 600; background: none; color: #B5DDF6; }
.fx__calc-pay.is-locked small { display: none; }
.fx__pay-end { display: grid; gap: 4px; margin-top: 6px; padding: 20px 22px; border-radius: var(--r); background: linear-gradient(160deg, #2F66A3 0%, var(--graphite) 100%); color: var(--on-dark); }
.fx__pay-end span { font-size: .9rem; color: rgba(242, 246, 250, .8); }
.fx__pay-end b, .fx__pay-done b { font: 700 clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem)/1.1 var(--display); letter-spacing: -.02em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx__pay-end em, .fx__pay-done em { font-style: normal; font-weight: 600; color: #B5DDF6; }
.fx__pay-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.fx__pay-done .fx__pay-row { justify-content: center; }
.fx__plus { font-style: normal; font-size: .85rem; font-weight: 600; color: #B5DDF6; white-space: nowrap; }
.fx__pay-end small { font-size: .8rem; color: rgba(242, 246, 250, .65); }
.fx__pay-done { display: grid; gap: 2px; justify-items: center; padding: 16px 28px; border-radius: var(--r); background: var(--graphite); color: rgba(242, 246, 250, .8); font-size: .9rem; }
.fx__pay-done small { font-size: .8rem; color: rgba(242, 246, 250, .65); }
.fx--calc .fx__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx--calc .fx__tiles .fx__pic { aspect-ratio: 16 / 7; }
.fx--calc .fx__tiles--2 .fx__pic, .fx--calc .fx__tiles.fx__tiles--2 .fx__pic { aspect-ratio: 1 / 1; }
.fx--calc .fx__pic > img { position: absolute; inset: 0; }
/* Stellen-Kacheln: kleiner, Bild unter einem leichten Verlauf wie bei den Knöpfen; beim Überfahren oder ausgewählt ganz sichtbar */
.fx--calc .fx__tiles--2 { grid-template-columns: repeat(2, minmax(0, 215px)); justify-content: center; column-gap: clamp(20px, 3vw, 40px); }
.fx--calc .fx__tiles--2 .fx__cap b { font-size: 1.1rem; line-height: 1.25; white-space: nowrap; }
@media (max-width: 600px) { .fx--calc .fx__tiles--2 { column-gap: 12px; } .fx--calc .fx__tiles--2 .fx__cap b { font-size: 1rem; white-space: normal; } }
.fx--calc .fx__tiles--2 .fx__pic::after { content: ""; position: absolute; inset: 0; background: var(--gold-grad); opacity: .6; mix-blend-mode: normal; transition: opacity .45s var(--ease); pointer-events: none; }
.fx--calc .fx__tiles--2 .fx__tile:hover .fx__pic::after, .fx--calc .fx__tiles--2 .fx__tile:has(input:checked) .fx__pic::after, .fx--calc .fx__tiles--2 .fx__tile:has(input:focus-visible) .fx__pic::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .fx--calc .fx__tiles--2 .fx__pic::after { transition: none; } }
.fx__navpay { display: none; }
/* Schritt 6 "Dein persönliches Angebot": eigene kleine Landingpage auf voller Breite */
.fx--offer .fx__form { grid-template-columns: minmax(0, 1fr); }
.fx--offer .fx__step { width: min(880px, 100%); }
.offer { display: grid; gap: clamp(26px, 3.4vw, 40px); }
.offer__head { position: relative; overflow: hidden; border-radius: var(--r); background: #2F66A3; }
.offer__head img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.offer__band { padding: clamp(22px, 3vw, 34px); background: linear-gradient(160deg, #2F66A3 0%, var(--graphite) 100%); color: var(--on-dark); }
.offer__k { font: 600 .74rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }
.offer__band .offer__k { color: #B5DDF6; }
.offer__t { margin-top: 12px; font: 600 clamp(1.6rem, 1.1rem + 2vw, 2.4rem)/1.12 var(--display); letter-spacing: -.02em; outline: none; }
.offer__meta { margin-top: 10px; color: rgba(242, 246, 250, .8); }
.offer__lead { font-size: 1.08rem; line-height: 1.6; color: var(--muted); }
.offer__sec h3, .offer__form h3 { margin-top: 8px; font: 600 clamp(1.3rem, 1.1rem + .8vw, 1.65rem)/1.2 var(--display); letter-spacing: -.01em; }
.offer__sec .fx__sum { margin-top: 14px; }
.offer__plain > div { grid-template-columns: 11em minmax(0, 1fr) auto; }
.offer__note, .offer__txt { margin-top: 10px; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.offer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.offer__cols > div { padding: 20px 22px; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-s); }
.offer__cols h4 { font: 600 1.02rem/1.3 var(--display); color: #2F66A3; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.offer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.offer__list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.offer__list svg { flex: none; width: 20px; height: 20px; margin-top: 1px; padding: 3px; border-radius: 50%; background: var(--gold-grad); color: var(--graphite); stroke-width: 2.6; }
.offer__transp .offer__list { margin-top: 14px; padding: 20px 22px; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-s); }
.offer__pay { display: grid; gap: 6px; padding: clamp(24px, 3vw, 34px); border-radius: var(--r); background: linear-gradient(160deg, #2F66A3 0%, var(--graphite) 100%); color: var(--on-dark); box-shadow: 0 30px 60px -30px rgba(12, 24, 40, .55); }
.offer__pay .offer__k { color: #B5DDF6; }
.offer__pay b { font: 700 clamp(2.2rem, 1.5rem + 3vw, 3.4rem)/1.05 var(--display); letter-spacing: -.02em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.offer__pay .fx__plus { font-size: 1rem; }
.offer__per { color: rgba(242, 246, 250, .8); font-size: .92rem; line-height: 1.35; }
/* Angebotsseite: mehr Luft vor "Urlaub & Fortbildung", "Benefit-Paket" und "So wächst dein Gehalt" */
.offer__sec + .offer__sec { margin-top: clamp(18px, 2.6vw, 30px); }
/* Angebotsseite: umbrechende Werte in den Übersichten enger setzen */
.offer .fx__sum dt, .offer .fx__sum dd { line-height: 1.3; }
@media (max-width: 600px) {
  .offer .fx__sum dd { font-size: .98rem; }
  .offer .fx__sum > div { padding: 10px 0; gap: 2px 14px; }
  .offer__per { font-size: .85rem; }
  .offer__band { padding: 18px 20px 20px; }
  .offer__t { margin-top: 8px; font-size: 1.35rem; line-height: 1.15; }
  .offer__meta { margin-top: 6px; font-size: .85rem; line-height: 1.35; }
}
.offer__form { display: grid; gap: 14px; padding: clamp(22px, 3vw, 32px); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-s); }
.offer__form .fx__fields, .offer__form .fx__field--area { margin-top: 0; }
.offer__form .fx__field textarea { min-height: 96px; }
.fx__contact { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-s); text-align: left; }
.fx__contact img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.fx__contact div { display: grid; gap: 2px; }
.fx__contact span { color: var(--muted); font-size: .9rem; }
.fx__contact a { font-weight: 600; color: var(--gold-text); }
@media (max-width: 700px) {
  .offer__cols { grid-template-columns: minmax(0, 1fr); }
  .offer__plain > div { grid-template-columns: minmax(0, 1fr); }
}
/* Karten "Was ist dir wichtig?": Symbol im hellblauen Feld, Überschrift, kurzer Satz */
.fx__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.fx__card { position: relative; display: grid; align-content: start; gap: 6px; padding: 20px 20px 22px; border-radius: var(--r); background: var(--surface); border: 1.5px solid var(--line); box-shadow: var(--shadow-s); cursor: pointer; transition: border-color .25s, background-color .25s, color .25s, transform .2s ease; }
.fx__card:hover { border-color: var(--gold); transform: translateY(-2px); }
.fx__card input { position: absolute; opacity: 0; pointer-events: none; }
.fx__card-ic { width: 46px; height: 46px; margin-bottom: 8px; border-radius: 12px; display: grid; place-items: center; background: #E4F0FA; color: #2F66A3; transition: background-color .25s, color .25s; }
.fx__card-ic svg { width: 24px; height: 24px; stroke-width: 1.6; }
.fx__card b { font: 600 1.12rem/1.25 var(--display); letter-spacing: -.01em; }
.fx__card small { color: var(--muted); font-size: .92rem; line-height: 1.45; }
.fx__card .fx__key { position: absolute; top: 16px; right: 16px; }
.fx__card .fx__tick { position: absolute; top: 18px; right: 18px; }
.fx__card:has(input:checked) { background: var(--graphite); border-color: var(--graphite); color: var(--on-dark); }
.fx__card:has(input:checked) small { color: var(--on-dark-muted); }
.fx__card:has(input:checked) .fx__card-ic { background: var(--gold-grad); color: var(--graphite); }
.fx__card:has(input:checked) .fx__key { opacity: 0; }
.fx__card:has(input:checked) .fx__tick { opacity: 1; transform: none; }
.fx__card:has(input:focus-visible) { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
@media (max-width: 600px) { .fx__cards { grid-template-columns: minmax(0, 1fr); } .fx__card { padding: 16px 16px 18px; } }
/* Eingebettet auf /gehaltsrechner: Karte im Seiteninhalt statt Vollbild-Fenster, Kasten klebt beim Scrollen */
.fx--inline { position: relative; inset: auto; height: auto; display: grid; grid-template-rows: auto auto; overflow: visible; margin-top: clamp(24px, 3vw, 40px); border-radius: var(--r-frame, 28px); background: var(--surface-2); box-shadow: var(--shadow-s); }
.fx--inline .fx__top { padding: 18px clamp(18px, 3vw, 36px) 0; }
.fx--inline .fx__stage { overflow: visible; min-height: 460px; padding: clamp(20px, 3vw, 40px) clamp(18px, 3vw, 36px) 28px; }
.fx--inline .fx__step { margin: 0 auto; }
.fx--inline .fx__calc { position: sticky; top: calc(var(--nav-h, 80px) + 16px); max-height: none; margin: clamp(20px, 3vw, 40px) clamp(18px, 3vw, 36px) 24px 0; }
.fx--inline .fx__nav { position: sticky; bottom: 0; z-index: 2; padding: 12px clamp(18px, 3vw, 36px); border-radius: 0 0 var(--r-frame, 28px) var(--r-frame, 28px); }
.transp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; padding: clamp(26px, 4vw, 56px); border-radius: var(--r-frame, 28px); background: var(--surface); box-shadow: var(--shadow-s); }
.transp__end { margin-top: 18px; font-weight: 600; }
.transp__list { display: grid; gap: 12px; margin: 0; color: var(--text); font-weight: 500; }
.transp__list svg { color: var(--gold-text); }
@media (max-width: 900px) { .transp { grid-template-columns: minmax(0, 1fr); } .fx--inline .fx__calc { display: none; } }
.fx__field--extra { margin-top: 18px; }
.fx__field--extra textarea { min-height: 80px; }
.fx__extra-note { color: var(--muted); font-size: .85rem; }
.fx__hours { display: grid; gap: 26px; margin-top: 14px; }
.fx__range { display: grid; gap: 12px; padding: 20px; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-s); }
.fx__range-top { display: flex; justify-content: space-between; align-items: baseline; }
.fx__hval { font: 700 1.6rem/1 var(--display); color: var(--gold-text); }
.fx__hpct { color: var(--muted); font-size: .9rem; }
.fx__range input { width: 100%; height: 32px; accent-color: #2F66A3; cursor: pointer; }
.fx__range input:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; }
.fx__days { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fx__days legend { padding: 0; margin-bottom: 12px; font-weight: 600; }
.fx__days label { position: relative; cursor: pointer; }
.fx__days input { position: absolute; opacity: 0; pointer-events: none; }
.fx__days span { display: grid; gap: 2px; justify-items: center; min-height: 64px; align-content: center; padding: 10px 6px; border-radius: var(--r-s); background: var(--surface); border: 1.5px solid var(--line); text-align: center; transition: background-color .2s, color .2s, border-color .2s; }
.fx__days small { font-size: .8rem; color: var(--muted); }
.fx__days label:hover span { border-color: var(--gold); }
.fx__days input:checked + span { background: var(--graphite); border-color: var(--graphite); color: var(--on-dark); }
.fx__days input:checked + span small { color: var(--on-dark-muted); }
.fx__days input:focus-visible + span { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
@media (max-width: 900px) {
  .fx--calc .fx__form { grid-template-columns: minmax(0, 1fr); }
  .fx__calc { display: none; }
  .fx--calc .fx__navpay:not([hidden]) { display: grid; gap: 2px; margin-left: auto; text-align: right; }
  .fx__navpay small { font-size: .7rem; color: var(--muted); }
  .fx__navpay b { font: 700 1rem/1.1 var(--display); color: var(--gold-text); white-space: nowrap; }
  .fx--calc .fx__next { margin-left: 0; flex: none; }
  .fx--calc .fx__navpay[hidden] + .fx__next { margin-left: auto; }
}
@media (max-width: 480px) {
  .fx__days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx--calc .fx__tiles .fx__pic { aspect-ratio: 16 / 9; }
  .fx--calc .fx__nav, .fx--offer .fx__nav { gap: 10px; }
  .fx--calc .fx__back span, .fx--offer .fx__back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fx--calc .fx__next, .fx--offer .fx__next { padding-inline: 16px; }
  .fx--offer .fx__next { margin-left: auto; flex: none; }
}

/* ---------- Preise (Unterseite): eigenes Formular im Hero, Versand über api/preisanfrage.php an StudioPartner ---------- */
.top--preise { min-height: min(calc(100svh - var(--inset) * 2), 920px); }
.top--preise .top__in { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); align-items: center; }
.top--preise .top__img { object-position: 50% 58%; }
.pq-lead { margin-top: 24px; max-width: 30em; font-size: 1.1rem; color: var(--on-dark-muted); }.pq-intro .trust { margin-top: 30px; padding-top: 22px; gap: 12px 28px; }
.pq { position: relative; overflow: hidden; background: var(--surface); color: var(--text); border-radius: var(--r-frame); padding: clamp(22px, 2.6vw, 34px); box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .7); }
.pq::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--gold-grad); }
.top .pq .eyebrow { color: var(--gold-text); }
.top .pq .eyebrow::after { background: var(--gold-grad-deep); }
.pq__title { margin-top: 10px; font: 600 clamp(1.35rem, 1.1rem + .9vw, 1.8rem)/1.15 var(--display); letter-spacing: -.02em; text-wrap: balance; outline: none; }
.pq__form, .pq__step { display: grid; gap: 14px; }
.pq__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pq__field { display: grid; gap: 6px; }
.pq__field > span { font-weight: 600; font-size: .9rem; }
.pq input[type="text"], .pq input[type="email"], .pq input[type="tel"], .pq select, .pq__ta { width: 100%; min-width: 0; font: inherit; font-size: 1.05rem; color: var(--text); background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-s); padding: 13px 15px; transition: border-color .25s, box-shadow .25s; }
.pq input:focus, .pq select:focus, .pq__ta:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 4px rgba(125, 182, 230, .28); }
.pq [aria-invalid="true"] { border-color: #B3261E !important; }
.pq__tel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.pq select { width: auto; padding-right: 36px; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5E64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.pq__consent { display: flex; gap: 12px; align-items: flex-start; font-size: .82rem; line-height: 1.45; color: var(--muted); cursor: pointer; }
.pq__consent input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--graphite); }
.pq__consent input[aria-invalid="true"] { outline: 2px solid #B3261E; outline-offset: 2px; }
.pq__consent a { color: var(--text); text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: 3px; }
.pq__err { font-style: normal; font-size: .92rem; color: #B3261E; }
.pq__err:empty { display: none; }
.pq__btn { width: 100%; }
.pq__btn.is-busy { opacity: .75; cursor: progress; }
.pq__note { font-size: .7rem; line-height: 1.4; color: var(--muted); text-align: center; }
.pq__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pq__count { font: 500 .8rem/1 var(--sans); color: var(--muted); }
.pq__progress { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pq__progress span { display: block; height: 100%; background: var(--gold-grad); transform-origin: 0 50%; transform: scaleX(0); transition: transform .5s var(--ease); }
.pq__q { display: grid; gap: 12px; }
.pq__qt { font: 600 1.15rem/1.3 var(--display); outline: none; }
.pq__opts { display: grid; gap: 8px; }
.pq__opt { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--r-s); background: var(--bg); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.pq__opt:hover { border-color: var(--gold); }
.pq__opt input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--gold-deep); }
.pq__opt:has(input:checked) { background: var(--graphite); border-color: var(--graphite); color: var(--on-dark); }
.pq__ta { resize: vertical; min-height: 110px; line-height: 1.5; }
.pq__done { display: grid; gap: 14px; justify-items: start; }
.pq__done-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-grad); color: var(--graphite); }
.pq__done-ic svg { width: 30px; height: 30px; stroke-width: 2; }
.pq [hidden] { display: none !important; }
.pq-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pq-steps .reason { min-height: 0; }
@media (max-width: 900px) {
  .top--preise .top__in { grid-template-columns: minmax(0, 1fr); }
  .top--preise .top__img { height: 52%; object-position: 50% 60%; }
  .top--preise .top__in { padding-top: calc(var(--nav-h) + 130px); }
}
@media (max-width: 700px) { .pq-steps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 380px) { .pq__row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Training (Startseite): Kurve wie auf dem Bildschirm am Gerät, Kugel läuft beim Scrollen ---------- */
.train { margin-top: clamp(14px, 1.4vw, 20px); }
.curve { position: relative; margin: clamp(26px, 3vw, 48px) 0 0; }
.curve__svg { width: 100%; height: auto; overflow: visible; }
.curve__line { stroke: rgba(255, 255, 255, .13); stroke-width: 10; stroke-linecap: round; }
.curve__prog { stroke: url(#curve-gold); stroke-width: 10; stroke-linecap: round; }
.curve__dots circle { fill: rgba(255, 255, 255, .22); }
.curve__ball .curve__halo { fill: rgba(125, 182, 230, .16); }
.curve__ball .curve__dot { fill: url(#curve-gold); }
.curve__cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font: 600 .74rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); }
@media (max-width: 700px) { .curve__cap span:nth-child(2), .curve__cap span:nth-child(3) { display: none; } .curve__line, .curve__prog { stroke-width: 14; } }
.train__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(30px, 3.4vw, 52px); }
.train__card { position: relative; overflow: hidden; border-radius: var(--r); background: var(--graphite-2); border: 1px solid var(--line-dark); display: grid; grid-template-rows: auto 1fr; }
/* Unsichtbarer Link über der ganzen Karte (Hammer Strength), ohne sichtbare Änderung an der Karte */
.train__hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.train__hit:focus-visible { outline: 2.5px solid var(--gold); outline-offset: -3px; }
.train__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.train__copy { padding: clamp(18px, 2vw, 26px); display: grid; gap: 10px; align-content: start; }
.train__copy p { color: var(--on-dark-muted); }
@media (max-width: 900px) { .train__grid { grid-template-columns: minmax(0, 1fr); } .train__img { aspect-ratio: 16 / 9; } }

/* ---------- Wellness (Startseite): Mosaik der Bereiche ---------- */
/* Links ein großer Block (Sauna), rechts vier kleine Kacheln im Quadrat */
.wells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(160px, 16vw, 240px); gap: 12px; }
.well { position: relative; overflow: hidden; margin: 0; border-radius: var(--r); background: var(--surface-2); }
.well--a { grid-column: span 2; grid-row: span 2; }
.well__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); background: var(--surface-2); }
.well:hover .well__img { transform: scale(1.06); }
.well figcaption { position: absolute; inset: auto 0 0; z-index: 1; display: grid; gap: 4px; padding: clamp(14px, 1.6vw, 22px); color: var(--on-dark); background: linear-gradient(0deg, rgba(12, 24, 40, .88), rgba(12, 24, 40, .45) 55%, transparent); }
/* Kleine Kacheln: dunkler Schleier und kräftigerer Verlauf, damit die Schrift gut lesbar bleibt */
.well:not(.well--a)::after { content: ""; position: absolute; inset: 0; background: rgba(16, 17, 20, .22); pointer-events: none; }
.well:not(.well--a) figcaption { padding-top: 34%; background: linear-gradient(0deg, rgba(16, 17, 20, .95) 0%, rgba(16, 17, 20, .78) 38%, rgba(16, 17, 20, .3) 72%, transparent 100%); }
.well figcaption b { font: 600 clamp(1.05rem, .95rem + .5vw, 1.35rem)/1.2 var(--display); overflow-wrap: anywhere; hyphens: auto; }
.well figcaption span { font-size: .92rem; line-height: 1.35; color: var(--on-dark-muted); }
/* Alle kleinen Kacheln gleich hoch beschriftet: immer Platz für zwei Zeilen */
.well:not(.well--a) figcaption span { min-height: 2.7em; }
@media (max-width: 900px) { .wells { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; } .well--a { grid-column: span 2; grid-row: span 1; } }
@media (max-width: 560px) { .well figcaption b { font-size: .95rem; } }
@media (max-width: 420px) { .well figcaption span { display: none; } }

/* ---------- Hammer Strength (Unterseite): dunkler, kerniger Kraft-Look, hebt sich bewusst vom Rest ab ---------- */
body:has(.hs) { background: #0C0C0D; }
.hs { --hs-line: rgba(255, 255, 255, .1); --hs-font: "Anton", "Arial Narrow", Impact, sans-serif; color: var(--on-dark); color-scheme: dark; overflow-x: clip; }
.hs .h2 { color: var(--on-dark); }
.hs .eyebrow { color: var(--gold); }
.hs .eyebrow::after { background: var(--gold-grad); }
.hs :focus-visible { outline-color: var(--gold); }
.hs-muted { color: var(--on-dark-muted); }
.hs-sec { position: relative; padding-block: var(--sec); }
.hs-sec--tight { padding-top: 0; }
.hs-btn-line { color: var(--on-dark); }
/* Filmkorn als SVG-Rauschen */
.hs-grain { position: absolute; inset: -50%; z-index: -1; pointer-events: none; opacity: .14; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: hs-grain 1s steps(6) infinite; }
@keyframes hs-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); } 60% { transform: translate(-2%, 6%); } 80% { transform: translate(5%, 2%); } 100% { transform: translate(0, 0); } }

/* Hero mit Hintergrundvideo */
.hs-hero { position: relative; isolation: isolate; overflow: hidden; margin: var(--inset); border-radius: var(--r-frame); min-height: calc(100svh - var(--inset) * 2); display: grid; align-items: end; background: #000; }
.hs-hero__media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hs-hero__video { width: 100%; height: 100%; object-fit: cover; animation: hs-zoom 30s ease-in-out infinite alternate; }
@keyframes hs-zoom { to { transform: scale(1.12); } }
.hs-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(120% 90% at 70% 30%, transparent 0%, rgba(6, 14, 26, .5) 60%, rgba(6, 14, 26, .88) 100%), linear-gradient(0deg, rgba(6, 14, 26, .95) 0%, rgba(6, 14, 26, .25) 55%, rgba(6, 14, 26, .4) 100%); }
.hs-hero__in { width: 100%; max-width: var(--wrap); margin-inline: auto; padding: calc(var(--nav-h) + 90px) var(--gutter) clamp(40px, 6vw, 84px); }
.hs-kicker { display: inline-flex; align-items: center; gap: 12px; font: 600 .78rem/1.35 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.hs-kicker span { flex: none; width: 34px; height: 3px; background: var(--gold-grad); }
.hs-title { margin-top: 18px; font: 400 clamp(3.4rem, 17vw, 12.5rem)/.92 var(--hs-font); letter-spacing: .005em; text-transform: uppercase; }
.hs-title__l { display: block; }
.hs-title__l--out { color: transparent; -webkit-text-stroke: 2px rgba(244, 244, 242, .92); paint-order: stroke fill; }
.hs-title__l--gold { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.js .hs-title__l { animation: hs-slam .9s cubic-bezier(.2, 1.4, .4, 1) var(--d, 0ms) both; }
@keyframes hs-slam { from { opacity: 0; transform: translateY(40%) scale(1.25); filter: blur(10px); } 60% { opacity: 1; filter: blur(0); } to { opacity: 1; transform: none; filter: none; } }
.hs-lead { margin-top: 26px; max-width: 34em; font-size: var(--fs-lead); color: var(--on-dark-muted); }
.hs-hero .btn-row { margin-top: 30px; }
/* Emblem als dezentes Wasserzeichen hinter der Überschrift; --p kommt beim Scrollen aus main.js 11g */
.hs-seal { position: absolute; z-index: 0; right: -3%; top: 12%; width: clamp(260px, 34vw, 520px); margin: 0; pointer-events: none;
  transform: rotate(calc(-5deg + var(--p, 0) * 12deg)) translateY(calc(var(--p, 0) * -80px)) scale(calc(1 + var(--p, 0) * .14));
  opacity: calc(.14 - var(--p, 0) * .11); will-change: transform, opacity; }
.hs-seal::before { content: ""; position: absolute; inset: -16%; border-radius: 50%; background: radial-gradient(circle, rgba(125, 182, 230, .1), transparent 62%); }
.hs-seal img { position: relative; width: 100%; height: auto; filter: grayscale(1) contrast(1.15) brightness(1.2); }
.js .hs-seal img { animation: hs-seal-in 1.6s var(--ease) .5s both; }
@keyframes hs-seal-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.hs-hero__in { position: relative; z-index: 1; }
.hs-scroll { position: absolute; z-index: 1; right: var(--gutter); bottom: clamp(40px, 6vw, 84px); display: grid; justify-items: center; gap: 12px; font: 600 .7rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-muted); }
.hs-scroll i { position: relative; overflow: hidden; width: 2px; height: 56px; background: rgba(255, 255, 255, .2); }
.hs-scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--gold); animation: hs-drop 1.8s ease-in-out infinite; }
@keyframes hs-drop { to { top: 100%; } }
@media (max-width: 900px) { .hs-seal { width: clamp(220px, 62vw, 340px); right: -12%; top: 16%; opacity: calc(.12 - var(--p, 0) * .09); } .hs-scroll { display: none; } .hs-hero__in { padding-top: calc(var(--nav-h) + 150px); } }

/* Schräges Warnband mit Laufschrift */
.hs-tape { position: relative; z-index: 2; margin: clamp(28px, 5vw, 60px) -3vw; transform: rotate(-2deg); overflow: hidden; background: #0B1624; padding-block: 16px; border-block: 9px solid transparent; border-image: repeating-linear-gradient(45deg, var(--gold) 0 14px, #0B1624 14px 28px) 9; }
.hs-tape .marquee__track { animation-duration: 28s; }
.hs-tape .marquee__group span { font: 400 clamp(1.6rem, 1.1rem + 2.2vw, 3.1rem)/1 var(--hs-font); letter-spacing: .02em; text-transform: uppercase; padding-inline: clamp(16px, 2vw, 30px); }
.hs-tape .marquee__group span:nth-child(4n+3) { color: transparent; -webkit-text-stroke: 1.5px var(--gold); }
.hs-tape .marquee__group i { width: 12px; height: 12px; background: var(--gold); }

/* Geräte-Karten */
.hs-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hs-card { position: relative; overflow: hidden; display: grid; gap: 12px; align-content: start; padding: clamp(24px, 3vw, 40px); border-radius: var(--r); border: 1px solid var(--hs-line); background: linear-gradient(160deg, #1D1D20, #121214); transition: transform .4s var(--ease), border-color .4s; }
.hs-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--gold-grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease) .25s; }
.hs-card.is-in::before { transform: none; }
.hs-card:hover { transform: translateY(-6px); border-color: rgba(125, 182, 230, .45); }
.hs-card__n { font: 400 clamp(3.2rem, 2.2rem + 3vw, 5.4rem)/.9 var(--hs-font); color: transparent; -webkit-text-stroke: 1.5px rgba(125, 182, 230, .85); }
.hs-card h3 { font: 700 clamp(1.3rem, 1.1rem + .8vw, 1.8rem)/1.1 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.hs-card p { color: var(--on-dark-muted); }
@media (max-width: 900px) { .hs-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; } .hs-card { grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; padding: 20px; } .hs-card__n { grid-row: span 2; font-size: 3rem; } }

/* Großes Bild mit Parallax und wandernder Umrissschrift */
.hs-wide { position: relative; isolation: isolate; overflow: hidden; margin: 0 var(--inset); border-radius: var(--r-frame); height: clamp(360px, 70vh, 720px); background: #0C1828; }
.hs-wide__img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; }
.hs-wide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 14, 26, .85), rgba(6, 14, 26, .1) 60%); }
.hs-wide__word { position: absolute; z-index: 1; left: 0; bottom: 5%; white-space: nowrap; pointer-events: none; font: 400 clamp(4.5rem, 14vw, 15rem)/.9 var(--hs-font); text-transform: uppercase; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .5); }
.hs-wide__word span { display: block; will-change: transform; }
.hs-wide__cap { position: absolute; z-index: 1; left: var(--gutter); top: clamp(20px, 3vw, 36px); padding: 10px 14px; border-radius: 999px; background: rgba(12, 12, 13, .72); font: 600 .74rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

/* Bereiche: große Zeilen, goldener Schimmer beim Überfahren, Vorschaubild folgt der Maus */
.hs-areas { position: relative; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hs-line); }
.hs-area { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 22em) auto; align-items: center; gap: clamp(16px, 2.5vw, 40px); padding: clamp(20px, 2.4vw, 32px) clamp(8px, 1.4vw, 22px); border-bottom: 1px solid var(--hs-line); }
.hs-area::before { content: ""; position: absolute; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(90deg, rgba(125, 182, 230, .18), rgba(125, 182, 230, .04) 55%, transparent 75%); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease); }
.hs-area:hover::before { transform: none; }
.hs-area__n { font: 500 .82rem/1 var(--mono); letter-spacing: .1em; color: var(--gold); }
.hs-area__t { font: 400 clamp(1.7rem, 1.1rem + 2vw, 3.2rem)/1 var(--hs-font); text-transform: uppercase; letter-spacing: .01em; transition: transform .5s var(--ease), color .4s ease; }
.hs-area:hover .hs-area__t { transform: translateX(14px); color: var(--gold-light); }
.hs-area__d { color: var(--on-dark-muted); font-size: .98rem; }
.hs-area__go { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--hs-line); color: var(--on-dark-muted); transition: background-color .4s ease, color .4s ease, border-color .4s ease, transform .5s var(--ease); }
.hs-area__go svg { width: 20px; height: 20px; }
.hs-area:hover .hs-area__go { background: var(--gold-grad); border-color: transparent; color: var(--graphite); transform: translateX(6px); }
.hs-area__img { position: absolute; z-index: 2; left: var(--mx, 50%); top: var(--my, 50%); width: 280px; margin: 0; border-radius: var(--r-s); overflow: hidden; pointer-events: none; opacity: 0; transform: translate(40px, -50%) scale(.92) rotate(-3deg); transition: opacity .35s ease, transform .5s var(--ease); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .9); }
.hs-area__img img { width: 100%; height: 190px; object-fit: cover; }
@media (hover: hover) { .hs-area:hover .hs-area__img { opacity: 1; transform: translate(40px, -50%) scale(1) rotate(-3deg); } }
/* Handy und Tablet: kein Überfahren, dafür ein festes Vorschaubild in der Zeile */
@media (hover: none), (max-width: 860px) {
  .hs-area { grid-template-columns: auto minmax(0, 1fr) 72px; column-gap: 14px; row-gap: 6px; padding-inline: 0; }
  .hs-area__n { grid-row: 1; }
  .hs-area__t { grid-row: 1; grid-column: 2; }
  .hs-area__d { grid-row: 2; grid-column: 1 / 3; }
  .hs-area__img { position: static; grid-row: 1 / 3; grid-column: 3; width: 72px; opacity: 1; transform: none; box-shadow: none; }
  .hs-area__img img { height: 72px; }
  .hs-area__go { display: none; }
  .hs-area:hover .hs-area__t { transform: none; color: inherit; }
}

/* Platz statt Gedränge */
.hs-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.hs-split__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); box-shadow: 14px 14px 0 var(--gold); }
.hs-split__img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); transition: transform 1.6s var(--ease); }
.hs-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Zwei Klassen, damit die allgemeine Regel ul[role="list"] { padding: 0 } nicht gewinnt */
.hs-vs .hs-vs__col { list-style: none; margin: 0; padding: clamp(22px, 2vw, 28px) clamp(20px, 1.8vw, 26px); display: grid; gap: 14px; align-content: start; border-radius: var(--r-s); font-size: .98rem; line-height: 1.4; }
.hs-vs__col--no { background: rgba(255, 255, 255, .04); border: 1px solid var(--hs-line); color: var(--on-dark-muted); }
.hs-vs__col--yes { background: #1A1A1D; border: 1px solid rgba(125, 182, 230, .5); }
.hs-vs__h { font: 600 .74rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); }
.hs-vs__col--yes .hs-vs__h { color: var(--gold); }
.hs-vs__col--yes li:not(.hs-vs__h) { display: flex; align-items: flex-start; gap: 10px; }
.hs-vs svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--gold); }
.hs-vs s { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 55% / 100% 1.5px no-repeat; }
.js .hs-vs s { background-size: 0% 1.5px; transition: background-size .7s var(--ease) .6s; }
.js .hs-vs li:nth-child(3) s { transition-delay: .8s; }
.js .hs-vs li:nth-child(4) s { transition-delay: 1s; }
.js .hs-vs.is-in s { background-size: 100% 1.5px; }
@media (max-width: 900px) { .hs-split { grid-template-columns: minmax(0, 1fr); } .hs-split__media { aspect-ratio: 4 / 3; box-shadow: 10px 10px 0 var(--gold); margin-right: 10px; } }
@media (max-width: 520px) { .hs-vs { grid-template-columns: minmax(0, 1fr); } }

/* Galerie-Mosaik */
.hs-gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 16vw, 250px); gap: 12px; }
.hs-shot { position: relative; overflow: hidden; margin: 0; border-radius: var(--r-s); background: #0C1828; }
.hs-shot img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55) contrast(1.1); transform: scale(1.04); transition: filter .6s ease, transform 1.2s var(--ease); }
.hs-shot:hover img { filter: none; transform: scale(1.1); }
.hs-shot--a { grid-column: 1 / span 4; grid-row: span 2; }
.hs-shot--b, .hs-shot--c { grid-column: 5 / span 2; }
.hs-shot--d { grid-column: 1 / span 3; }
.hs-shot--e { grid-column: 4 / span 3; }
@media (hover: none) { .hs-shot img { filter: contrast(1.05); } }
@media (max-width: 700px) {
  .hs-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; gap: 8px; }
  .hs-shot--a { grid-column: 1 / -1; grid-row: span 2; }
  .hs-shot--b, .hs-shot--c, .hs-shot--d, .hs-shot--e { grid-column: auto; grid-row: auto; }
}

/* Einblenden als Vorhang (von oben nach unten).
   Wichtig: der Vorhang liegt auf dem Bild, nicht auf dem Rahmen. Läge er auf dem Rahmen,
   hielte der Browser ihn für unsichtbar und würde die Einblendung nie starten. */
.js [data-reveal="clip"] img { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal="clip"].is-in img { clip-path: inset(0); }
.js .hs-split__media[data-reveal="clip"] { box-shadow: 0 0 0 var(--gold); transition: box-shadow .9s var(--ease) .4s; }
.js .hs-split__media[data-reveal="clip"].is-in { box-shadow: 14px 14px 0 var(--gold); }
@media (max-width: 900px) { .js .hs-split__media[data-reveal="clip"].is-in { box-shadow: 10px 10px 0 var(--gold); } }

/* Abschluss mit Hantelscheibe */
.hs-cta { position: relative; isolation: isolate; overflow: hidden; margin: var(--inset); border-radius: var(--r-frame); border: 1px solid var(--hs-line); background: radial-gradient(80% 120% at 20% 50%, #2A2410 0%, #0B1624 58%); padding-block: clamp(64px, 8vw, 120px); }
.hs-cta::before { content: ""; position: absolute; inset: 0 0 auto; height: 10px; background: repeating-linear-gradient(45deg, var(--gold) 0 14px, #0B1624 14px 28px); }
.hs-cta__in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.hs-plate { position: relative; width: clamp(220px, 28vw, 380px); aspect-ratio: 1; }
.hs-plate svg { width: 100%; height: 100%; will-change: transform; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.hs-plate__c { position: absolute; inset: 27%; border-radius: 50%; display: grid; place-content: center; text-align: center; color: var(--graphite); background: var(--gold-grad); box-shadow: inset 0 0 0 6px rgba(0, 0, 0, .15), 0 10px 30px -10px rgba(0, 0, 0, .6); }
.hs-plate__c small { font: 600 .72rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.hs-plate__c b { font: 800 clamp(1.4rem, 1rem + 1.8vw, 2.5rem)/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
@media (max-width: 800px) { .hs-cta__in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .hs-cta .btn-row { justify-content: center; } .hs-cta .eyebrow { justify-content: center; } .hs-plate { width: 220px; } }

@media (prefers-reduced-motion: reduce) {
  .hs-grain, .hs-hero__video, .hs-scroll i::after, .js .hs-title__l, .js .hs-seal img { animation: none !important; }
  .hs-seal { transform: rotate(-5deg); opacity: .13; }
  .js [data-reveal="clip"] img { clip-path: none; transition: none; }
  .js .hs-split__media[data-reveal="clip"] { box-shadow: 14px 14px 0 var(--gold); transition: none; }
  .js .hs-vs s { background-size: 100% 1.5px; transition: none; }
}

/* Button mit umlaufendem Goldlicht im Rahmen und sanftem Leuchten (Karriere-Hero) */
@property --spin-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.btn--spin { position: relative; border-color: rgba(255, 255, 255, .38); animation: btn-glow 3.6s ease-in-out infinite; }
.btn--spin::before { content: ""; position: absolute; inset: -2.5px; padding: 2.5px; border-radius: inherit; background: conic-gradient(from var(--spin-a), transparent 0deg 170deg, rgba(125, 182, 230, .5) 230deg, #B5DDF6 310deg, #E3F2FC 330deg, #7DB6E6 348deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; animation: btn-spin 3.6s linear infinite; }
.btn--spin:hover { border-color: var(--gold); color: var(--gold-light); }
@keyframes btn-spin { to { --spin-a: 360deg; } }
@keyframes btn-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(125, 182, 230, 0); } 50% { box-shadow: 0 0 34px -2px rgba(125, 182, 230, .62); } }
@media (prefers-reduced-motion: reduce) { .btn--spin, .btn--spin::before { animation: none; } .btn--spin { border-color: var(--gold); } .btn--spin::before { display: none; } }

/* ---------- Handy kompakt (18.09.2026): kürzer scrollen, Karten zum Wischen ---------- */
.swipe-hint { display: none; }
@media (max-width: 600px) {
  :root { --sec: 60px; }
  .sec--tight { padding-block: 44px; }
  #prinzip + .sec--tight { padding-top: 28px; }
  .head { margin-bottom: 28px; gap: 14px; }
  /* Figtree läuft breiter als die alte Mono-Schrift: kleine Überschriften bleiben so einzeilig */
  .eyebrow { font-size: .74rem; letter-spacing: .12em; }
  .eyebrow::after { width: 24px; }

  /* Hinweis unter den Wisch-Reihen */
  .swipe-hint { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 12px; font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
  .dark .swipe-hint { color: var(--gold); }
  .swipe-hint svg { width: 14px; height: 14px; }

  /* Gemeinsame Wisch-Reihe: randlos bis zum Bildschirmrand, nächste Karte schaut hervor */
  #prinzip .stack-cards, #ablauf .stack-cards, .train__grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scroll-padding-inline: var(--gutter); }
  .stack-cards::-webkit-scrollbar, .train__grid::-webkit-scrollbar { display: none; }

  /* Leistungen: 2 x 2, ganze Karte antippbar */
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .svc { position: relative; padding: 6px 6px 14px; gap: 10px; }
  .svc:hover { transform: none; }
  .svc__img { border-radius: 11px; }
  .svc__icon { width: 44px; height: 44px; margin-top: -30px; border-width: 4px; }
  .svc__icon svg { width: 18px; height: 18px; }
  .svc h3 { font-size: .86rem; padding-inline: 2px; }
  .svc p { display: none; }
  .svc .link { font-size: .7rem; padding: 2px 0; gap: 6px; }
  .svc .link svg { width: 13px; height: 13px; }
  .svc .link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }

  /* Vergleich: Discount-Seite knapper */
  .vs__card--them .vs__list .vs__cell { padding-block: 7px; border-top: 0; font-size: .9rem; }
  .vs__card--them .vs__list .vs__cell:last-child { padding-bottom: 32px; }
  .vs__card--us .vs__list .vs__cell { padding-block: 10px; }
  .vs__card--us .vs__list .vs__cell:last-child { padding-bottom: 32px; }

  /* Willkommen: Bild flacher */
  .welcome__img, .welcome__frame[data-fade-slider] { aspect-ratio: 4 / 3; }

  /* "Wir nehmen uns Zeit": Karten nebeneinander statt gestapelt */
  .scard { position: relative; top: auto; flex: 0 0 84%; scroll-snap-align: start; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; min-height: 0; padding: 10px 10px 20px; box-shadow: none; }
  .scard .ph, .scard__media { order: -1; height: auto; min-height: 0; aspect-ratio: 16 / 11; }
  .scard__copy { gap: 8px; padding: 2px 8px 0; align-content: start; }
  .scard__n { font-size: 2.1rem; }
  .scard h3.h2 { font-size: 1.45rem; }
  .scard__copy p { font-size: .95rem; }

  /* Training: Karten nebeneinander */
  .train__card { flex: 0 0 80%; scroll-snap-align: start; }
  .train__img { aspect-ratio: 16 / 10; }
  .train__copy { padding: 16px 18px 20px; gap: 8px; }
  .train__copy p { font-size: .95rem; }

  /* Physio-Leistungen: zwei Reihen zum Wischen */
  #physio .chips--sm { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: max-content; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 16px calc(var(--gutter) * -1) 0; padding: 2px var(--gutter) 6px; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  #physio .chips--sm::-webkit-scrollbar { display: none; }
  #physio .grid-2 > * { min-width: 0; }   /* sonst zieht die Wisch-Reihe die Spalte breit */
  #physio .h3[style] { margin-top: 20px !important; }

  /* Besuch: Bild flacher, Öffnungszeiten enger */
  .visit__media, .visit .ph { min-height: 220px; }
  .visit__card { gap: 18px; }
  .hours { font-size: .95rem; }
  .hours th, .hours td { padding: 8px 0; }

  /* Fragen enger */
  .faq summary { padding: 16px 0; font-size: 1.02rem; }
  .faq summary i { width: 34px; height: 34px; }

  /* Footer: Studio und Service nebeneinander */
  .foot { padding-top: 44px; }
  .foot__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 16px; padding-bottom: 32px; }
  .foot__brand, .foot__top > div:last-child { grid-column: 1 / -1; }
  .foot__brand p { margin-top: 14px; }
  .foot ul a, .foot address a { padding: 5px 0; font-size: .95rem; }
}

/* Überschriften mit Suchbegriff (18.09.2026, SEO): die goldene Zeile steht jetzt IN der h2/h1, sieht aber aus wie vorher */
.h2--kw > .eyebrow { display: flex; width: fit-content; margin-bottom: 1.25rem; }
.h2--kw > .h2__t { display: block; }
.hs-title > .hs-kicker { display: flex; width: fit-content; margin-bottom: 18px; }
.hs-title:has(> .hs-kicker) { margin-top: 0; }

/* Hammer Strength: Fragen-Block im dunklen Look */
.hs-faq .faq { margin-top: clamp(28px, 3vw, 44px); max-width: 880px; }
.hs .faq details { background: #161617; border: 1px solid var(--hs-line); box-shadow: none; color: var(--on-dark); }
.hs .faq .answer { color: var(--on-dark-muted); }
.hs .faq summary i { background: rgba(255, 255, 255, .08); color: var(--on-dark); }
.hs .faq details[open] summary i { background: var(--gold-grad); color: var(--graphite); }

/* Kontakt: E-Mail-Adressen nie mitten im Wort trennen; am Handy Telefon und E-Mail untereinander */
.nobr { white-space: nowrap; }
@media (max-width: 600px) { .sep { display: block; height: 0; overflow: hidden; } }

/* Fehlerseite: Knöpfe in .legal nicht unterstreichen */
.legal a.btn { text-decoration: none; }

/* ---------- POM MED: T-RENA Kennzahlen (heller Block) ---------- */
.trena-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.trena-facts > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 16px 14px; display: flex; flex-direction: column; gap: 2px; }
.trena-facts b { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); line-height: 1; background: var(--gold-grad-deep); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trena-facts small { font-size: .5em; margin-left: 3px; }
.trena-facts span { font-size: .9rem; color: var(--muted); line-height: 1.3; }
@media (max-width: 560px) { .trena-facts { grid-template-columns: repeat(2, 1fr); } }
.train .facts { margin: 0 0 clamp(28px, 3vw, 44px); }
.trena-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- POM MED: Schnellanmeldung als Quiz mit Bildkacheln (wie ein Funnel) ---------- */
.fx__step--tiles { width: min(980px, 100%); }
.fx__step--tiles .fx__q, .fx__step--tiles .fx__hint, .fx__step--tiles .fx__num { text-align: center; justify-self: center; }
.fx__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); margin-top: 14px; }
.fx__tiles--3, .fx__tiles--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(760px, 100%); justify-self: center; }
.fx__tile { position: relative; display: flex; flex-direction: column; border-radius: var(--r); background: var(--surface); border: 2px solid transparent; box-shadow: var(--shadow-s); cursor: pointer; overflow: hidden; transition: transform .35s var(--ease), border-color .25s, box-shadow .35s var(--ease); }
.fx__tile:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--shadow); }
.fx__tile input { position: absolute; opacity: 0; pointer-events: none; }
.fx__pic { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; background: linear-gradient(160deg, #E4EEF8, #CFE1F2); color: var(--gold-text); }
.fx__tiles--8 .fx__pic, .fx__tiles--6 .fx__pic { aspect-ratio: 16 / 10; }
.fx__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.fx__tile:hover .fx__pic img { transform: scale(1.06); }
.fx__pic--icon svg { width: 42%; height: 42%; stroke-width: 1.2; }
.fx__pic--num b { font: 700 clamp(2.6rem, 1.8rem + 3vw, 4.2rem)/1 var(--display); background: var(--gold-grad-deep); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx__cap { display: grid; gap: 1px; padding: 12px 14px 14px; text-align: center; }
.fx__cap b { font-weight: 700; font-size: 1.02rem; line-height: 1.25; }
.fx__cap small { color: var(--muted); font-size: .86rem; line-height: 1.3; }
.fx__tile .fx__key { position: absolute; top: 10px; left: 10px; background: rgba(255, 255, 255, .92); border-color: transparent; }
.fx__tile .fx__tick { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; }
.fx__tile:has(input:checked) { border-color: var(--gold-deep); background: var(--graphite); color: var(--on-dark); }
.fx__tile:has(input:checked) .fx__cap small { color: var(--on-dark-muted); }
.fx__tile:has(input:checked) .fx__key { background: var(--gold-grad); color: var(--graphite); }
.fx__tile:has(input:checked) .fx__tick { opacity: 1; transform: none; }
.fx__tile:has(input:focus-visible) { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
@media (max-width: 760px) {
  .fx__tiles, .fx__tiles--3, .fx__tiles--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx__tiles--6 .fx__pic, .fx__tiles--8 .fx__pic { aspect-ratio: 16 / 10; }
  .fx__tile .fx__key { display: none; }
  .fx__cap { padding: 10px 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { .fx__tile, .fx__pic img { transition: none; } }

/* ---------- POM MED: Schnellanmeldung, Hilfe zum Rezept (Lupe) und Kassen-Kacheln ---------- */
.fx__pikto { width: clamp(170px, 20vw, 230px); height: auto; }
.fx__pic--brand b { font: 800 clamp(1.3rem, 1rem + 1.2vw, 1.9rem)/1.05 var(--display); letter-spacing: -.01em; color: var(--graphite); text-align: center; padding: 0 8px; }
.fx__tile:has(input:checked) .fx__pic--brand { background: linear-gradient(160deg, #D6E7F7, #B9D6F0); }
.fx__help { justify-self: center; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; margin-top: 2px; border-radius: 999px; border: 1.5px solid rgba(94, 143, 203, .45); background: var(--surface); color: var(--gold-text); font: 600 .95rem/1 var(--sans); cursor: pointer; box-shadow: var(--shadow-s); transition: transform .3s var(--ease), border-color .2s, background-color .2s; }
.fx__help svg { width: 18px; height: 18px; stroke-width: 2; }
.fx__help:hover { transform: translateY(-2px); border-color: var(--gold-deep); background: #F3F8FD; }
.fx__help:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.fx__sheet { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(12, 24, 40, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fx-fade .3s ease; }
@keyframes fx-fade { from { opacity: 0; } }
.fx__sheet-in { position: relative; width: min(760px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; display: grid; gap: 10px; padding: clamp(20px, 3vw, 34px); border-radius: var(--r-frame); background: var(--surface); box-shadow: 0 40px 80px -30px rgba(6, 14, 26, .6); animation: fx-in .45s var(--ease); }
.fx__sheet-close { position: absolute; top: 14px; right: 14px; }
.fx__sheet-t { font: 600 clamp(1.35rem, 1.1rem + 1vw, 1.9rem)/1.15 var(--display); letter-spacing: -.02em; padding-right: 50px; }
.fx__sheet-txt { color: var(--muted); }
.fx__sheet-note { font-size: .82rem; color: var(--muted); }
.fx__sheet-ok { justify-self: start; }
.fx__rz { margin-top: 6px; border-radius: var(--r); background: linear-gradient(160deg, #E9F1F9, #D8E6F3); padding: clamp(8px, 1.6vw, 18px); }
.fx__rz-svg { display: block; width: 100%; max-height: 56vh; height: auto; overflow: hidden; border-radius: 10px; }
.rz-paper { opacity: .6; }
.rz-mark { animation: rz-pulse 1.8s ease-in-out .9s infinite; }
@keyframes rz-pulse { 50% { stroke-opacity: .35; } }
.rz-lens { transform-box: fill-box; transform-origin: 30% 30%; animation: rz-lens .9s var(--ease) .15s both; }
@keyframes rz-lens { from { opacity: 0; transform: translate(-70px, 50px) scale(.7) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .rz-lens, .rz-mark, .fx__sheet, .fx__sheet-in { animation: none; } }
.fx__tiles--8 .fx__pic--icon svg, .fx__tiles--6 .fx__pic--icon svg { width: auto; height: 50%; }

/* ---------- POM MED: Unterseiten der Behandlungen ---------- */
.crumbs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: .88rem; color: var(--on-dark-muted); }
.crumbs a { display: inline-block; min-height: 24px; line-height: 24px; color: var(--on-dark); text-decoration: underline; text-decoration-color: rgba(125, 182, 230, .6); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--gold-light); }
.lp-card { padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-s); display: grid; gap: 14px; }
.lp-card .checks { display: grid; gap: 10px; margin: 0; color: var(--text); }
.lp-card .checks svg { color: var(--gold-deep); }
.lp-prices { padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r); background: var(--graphite); color: var(--on-dark); display: grid; gap: 12px; }
.lp-prices dl { margin: 0; display: grid; }
.lp-prices dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-dark); }
.lp-prices dl > div:last-child { border-bottom: 0; }
.lp-prices dt { font-weight: 600; display: grid; gap: 2px; }
.lp-prices dt small { font-weight: 400; color: var(--on-dark-muted); font-size: .88rem; }
.lp-prices dd { margin: 0; text-align: right; white-space: nowrap; color: var(--gold-light); font-weight: 600; }
.lp-note { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r-s); background: #EAF3FB; border: 1px solid rgba(94, 143, 203, .3); font-size: .95rem; }
.lp-note span { color: var(--muted); }
.lp-more { margin-top: 16px; }
/* Unterseiten: lange Titel nur an den Trennstellen (&shy;) umbrechen, nie in die rechte Spalte ragen */
.top--sub .top__in > .h1 { min-width: 0; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
.top--sub .top__in > .h1 [data-split] { max-width: 100%; }
@media (min-width: 901px) {
  .promo__in { max-width: var(--wrap); }
  .promo .h2__t { font-size: clamp(1.8rem, .9rem + 1.55vw, 2.6rem); }
}

/* ---------- POM MED: Leistungskarten mit gleich hohem Text, Studio-Sektion POM Weimar ---------- */
@media (min-width: 1101px) { .services .svc > p { min-height: calc(3 * 1.55em); } }
.studio { align-items: center; }
.studio__facts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.studio__facts li { display: grid; gap: 2px; padding: 16px 14px; border-radius: var(--r-s); background: var(--surface); box-shadow: var(--shadow-s); }
.studio__facts b { font: 700 clamp(1.5rem, 1.1rem + 1vw, 2.1rem)/1 var(--display); background: var(--gold-grad-deep); -webkit-background-clip: text; background-clip: text; color: transparent; }
.studio__facts small { font-size: .55em; margin-left: 2px; }
.studio__facts span { font-size: .9rem; color: var(--muted); }
.studio__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.2vw, 16px); }
.studio__grid figure { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-s); }
.studio__grid figure:nth-child(2), .studio__grid figure:nth-child(4) { transform: translateY(clamp(16px, 3vw, 40px)); }
.studio__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.studio__grid figure:hover img { transform: scale(1.05); }
.studio__grid figcaption { position: absolute; left: 10px; bottom: 10px; padding: 6px 12px; border-radius: 999px; background: rgba(20, 37, 60, .78); color: var(--on-dark); font-size: .82rem; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 560px) { .studio__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .studio__facts li { padding: 12px 10px; } }
/* Studio-Sektion: gleichmäßige Innenabstände */
.studio > .stack { display: grid; gap: clamp(20px, 2.2vw, 30px); align-content: center; }
.studio > .stack > * { margin: 0; }
.studio > .stack .chips { margin: 0; }
.studio__grid { padding-bottom: clamp(16px, 3vw, 40px); }
#studio { padding-bottom: 60px; }

/* Karriere: einzelne Stelle über die volle Breite, links Text, rechts die Details */
.jobs:has(.job:only-child) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 901px) {
  .job:only-child { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(32px, 5vw, 72px); row-gap: 20px; }
  .job:only-child > .job__more { grid-column: 2; grid-row: 1 / span 4; align-self: start; }
  .job:only-child > :not(.job__more) { grid-column: 1; }
  .job:only-child > .btn-row { align-self: end; }
}
/* Schnellbewerbung: Ansprechpartner oben im Einstieg */
.fx__who { display: flex; align-items: center; gap: 14px; }
.fx__who img { width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 14%; background: var(--bg); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--gold); }
.fx__who p { margin: 0; font-size: .9rem; line-height: 1.35; color: var(--muted); }
.fx__who b { color: var(--text); font-weight: 700; }

/* Karriere-Hero: Schnittvideo über dem Standbild, blendet ein, sobald es läuft */
.top__video { opacity: 0; transition: opacity .8s ease; }
.top__video.is-playing { opacity: 1; }
.top--sub .top__video { object-position: 50% 30%; }
.top__pause { top: auto; right: calc(var(--gutter) * .6); bottom: calc(var(--gutter) * .5); z-index: 3; }
@media (max-width: 900px) { .top--sub .top__video { object-position: 50% 30%; } .top__pause { top: calc(var(--nav-h) + var(--inset) + 12px); bottom: auto; right: 16px; } }
.top__pause[hidden] { display: none; }
/* Karriere-Hero mit Video: Text links und rechts liegt über wechselnden Szenen, deshalb an beiden Seiten und unten abdunkeln */
@media (min-width: 901px) {
  .top--sub::after { background: linear-gradient(0deg, rgba(16, 30, 48, .6) 0%, rgba(16, 30, 48, 0) 38%), linear-gradient(90deg, rgba(16, 30, 48, .82) 0%, rgba(16, 30, 48, .58) 26%, rgba(16, 30, 48, .16) 46%, rgba(16, 30, 48, .3) 58%, rgba(16, 30, 48, .74) 72%, rgba(16, 30, 48, .84) 100%); }
}

/* Karriere: Einleitung "Warum wechseln" und Vertraulichkeits-Hinweis */
.wechsel__lead { max-width: 1080px; margin: 0 auto clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); font-size: var(--fs-lead); line-height: 1.55; }
.wechsel__lead p { margin: 0; }
.wechsel__lead p:first-child { color: var(--muted); }
.wechsel__lead p:last-child { color: var(--text); font-weight: 500; }
@media (max-width: 800px) { .wechsel__lead { grid-template-columns: 1fr; font-size: 1.08rem; } }
#wechsel .vs__cta { flex-direction: column; align-items: center; }
.wechsel__note, .apply__note { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; color: var(--gold-text); }
.wechsel__note { justify-content: center; margin-top: 14px; }
.wechsel__note svg, .apply__note svg { width: 20px; height: 20px; flex: none; }
.apply__note { margin-top: 6px; }

/* Karriere: Störer "KI-Doku-Assistent" (buchnerFLOW) auf Navy */
.doku { background: var(--graphite); color: var(--on-dark); margin-block: clamp(14px, 1.4vw, 20px); }
.doku::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--gold-grad); }
.doku::after { content: ""; position: absolute; inset: auto -10% -45% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(125, 182, 230, .22), transparent); pointer-events: none; }
.doku__in { position: relative; z-index: 1; max-width: 1240px; margin-inline: auto; padding: clamp(36px, 5vw, 72px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.doku__txt { display: grid; gap: clamp(14px, 1.6vw, 22px); justify-items: start; }
.doku__badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--gold-grad); color: var(--graphite); font: 700 .78rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.doku__badge svg { width: 18px; height: 18px; flex: none; }
.doku .lead { margin: 0; color: var(--on-dark-muted); max-width: 40em; }
.doku__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.doku__perks li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.4; }
.doku__perks svg { flex: none; width: 24px; height: 24px; padding: 4px; margin-top: 1px; border-radius: 50%; background: var(--gold-grad); color: var(--graphite); stroke-width: 2.6; }
.doku__perks b { color: #fff; font-weight: 700; }
.doku__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: none; }
.doku__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; padding: clamp(18px, 2vw, 26px); border-radius: var(--r); background: rgba(255, 255, 255, .06); border: 1px solid var(--line-dark); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.doku__n { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--gold-grad); color: var(--graphite); font: 800 1.1rem/1 var(--display); }
.doku__step h3 { margin: 0 0 6px; font: 700 1.12rem/1.2 var(--display); color: #fff; }
.doku__step p { margin: 0; color: var(--on-dark-muted); line-height: 1.5; font-size: .98rem; }
@media (max-width: 900px) { .doku__in { grid-template-columns: 1fr; } }

/* Karriere-Band: Überschrift mit kurzem Text links, Button rechts mittig zum gesamten Textblock */
.promo--karriere .promo__in > .stack { display: grid; gap: 14px; grid-column: 1; grid-row: 1; }
.promo--karriere .promo__in > div:last-child { grid-column: 2; grid-row: 1; align-self: center; margin-top: 0; }
.promo__text { margin: 0; max-width: 38em; font-size: 1.06rem; line-height: 1.5; color: var(--graphite); font-weight: 500; }
@media (max-width: 900px) { .promo--karriere .promo__in > div:last-child { grid-column: 1; grid-row: auto; margin-top: 8px; } }
/* Karriere: Abstand zwischen Leitsatz und "Dein nächster Schritt" verkleinert (war ca. 220 px) */
.sec--tight:has(+ #stellen) { padding-bottom: clamp(20px, 3vw, 40px); }
.sec--tight + #stellen { padding-top: clamp(40px, 4.5vw, 64px); }

/* Karriere, Handy: Hero ohne Fließtext, kein Störer-Sticker, mehr Innenabstand oben und unten in den Karten */
@media (max-width: 700px) {
  .top--sub .top__side > p { display: none; }
  .wechsel__note { font-size: .78rem; white-space: nowrap; gap: 6px; }
  .wechsel__note svg { width: 16px; height: 16px; }
  .doku__badge { display: none; }
  .doku__in { padding: 64px 24px; }
  .job { padding: 44px 24px; }
  .apply { padding: 44px 24px; }
  .promo--karriere .promo__in { padding-block: 52px; }
}

/* Karriere: Video in der Stellenanzeige, nur am Handy (zwischen den Tags und der Überschrift) */
.job__video { display: none; }
/* Zwei Stellenanzeigen nebeneinander: Titel gleich hoch, damit die Texte darunter auf einer Linie beginnen */
@media (min-width: 901px) {
  .jobs:has(.job + .job) { grid-template-rows: repeat(6, auto); }
  .jobs:has(.job + .job) .job { grid-row: span 6; grid-template-rows: subgrid; row-gap: 20px; }
  .jobs:has(.job + .job) .job > .btn-row { align-self: end; }
}
.job picture:has(.job__bild) { display: block; }
.job__bild { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }
.job__foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }
@media (max-width: 700px) { .job__video { display: block; } .job__video .vid { display: block; position: relative; overflow: hidden; border-radius: var(--r); } }
@media (max-width: 700px) { .job__video .vid__play { width: 56px; height: 56px; position: absolute; inset: 0; margin: auto; } .job__video .vid__txt { font-size: .95rem; } }

/* Karriere, Handy (Wunsch 20.09.2026): Video-Kärtchen nur mit Play-Knopf, Hero mit mehr Luft unten, "Mehr als Routine" ohne die beiden Textabsätze */
@media (max-width: 700px) {
  .job__video .vid__txt { display: none; }
  .top--sub .trust { margin-bottom: 28px; }
  .top--sub .top__in { padding-bottom: 28px; }
  .wechsel__lead { display: none; }
}

/* Handy: Durchstreichen pro Textzeile. Der Hintergrund-Strich lag bei umbrochenen Punkten nur einmal in der Mitte des ganzen Blocks */
@media (max-width: 700px) {
  .vs__t { background: none; text-decoration: line-through; text-decoration-color: rgba(77, 92, 110, .7); text-decoration-thickness: 1.5px; }
}

/* Handy: im Abschnitt "Nie wieder Doku" mehr Luft zwischen Text, Anstrichen und den drei Karten */
@media (max-width: 700px) {
  .doku .lead { margin-bottom: 26px; }
  .doku__perks { gap: 16px; }
  .doku__in { row-gap: 64px; }
}

/* Karriere: drei unterschiedliche, dezente Hinweis-Animationen (laufen je einmal, unter 5 Sekunden, WCAG 2.2.2; keine bei reduzierter Bewegung) */
/* 1. "Jetzt unverbindlich bewerben": kurzes Wackeln, zweimal */
@keyframes nudge-wiggle {
  0%, 34%, 56%, 100% { transform: none; }
  4% { transform: rotate(-2deg) scale(1.03); } 9% { transform: rotate(2deg) scale(1.03); } 14% { transform: rotate(-1.5deg) scale(1.02); } 19% { transform: rotate(1.2deg) scale(1.02); } 25% { transform: rotate(-.6deg); } 30% { transform: rotate(.4deg); }
  60% { transform: rotate(-2deg) scale(1.03); } 65% { transform: rotate(2deg) scale(1.03); } 70% { transform: rotate(-1.5deg) scale(1.02); } 75% { transform: rotate(1.2deg) scale(1.02); } 80% { transform: rotate(-.6deg); } 85% { transform: rotate(.4deg); }
}
[data-nudge="wiggle"].is-nudge { animation: nudge-wiggle 4.2s ease-in-out .3s 1; }
/* 2. "Als Physiotherapeut bewerben": weicher Lichtring, zweimal */
@keyframes nudge-pulse {
  0% { box-shadow: 0 10px 24px -14px rgba(47, 102, 163, .75), 0 0 0 0 rgba(181, 221, 246, .65); }
  70%, 100% { box-shadow: 0 10px 24px -14px rgba(47, 102, 163, .75), 0 0 0 20px rgba(181, 221, 246, 0); }
}
[data-nudge="pulse"].is-nudge { animation: nudge-pulse 1.7s ease-out .3s 2; }
/* 3. "Jetzt bewerben" im Band: Pfeil schiebt nach rechts, dreimal */
@keyframes nudge-arrow { 0%, 60%, 100% { transform: none; } 30% { transform: translateX(7px); } }
[data-nudge="arrow"].is-nudge svg { animation: nudge-arrow 1.3s ease-in-out .3s 3; }
@media (prefers-reduced-motion: reduce) { [data-nudge].is-nudge, [data-nudge].is-nudge svg { animation: none; } }

/* Stellenanzeige: Bewerben-Knopf größer und mit mehr Abstand */
.job .btn-row { margin-top: 18px; padding-top: 6px; }
.job .btn-row .btn { --bh: 68px; padding: 0 44px; font-size: 1rem; }
@media (max-width: 700px) { .job .btn-row { margin-top: 26px; } .job .btn-row .btn { --bh: 64px; padding: 0 28px; } }

/* Kontaktbereich: Vertraulichkeits-Hinweis deutlich kleiner */
.apply__note { font-size: .78rem; font-weight: 500; line-height: 1.35; gap: 6px; }
.apply__note svg { width: 14px; height: 14px; }
.apply__note { margin-top: 18px; }

/* Seitliche Reiter "Schnellanmeldung" und "Anrufen": kleben am rechten Rand und laufen beim Scrollen mit (nicht auf Karriere, Schnellanmeldung, 404) */
.sidetabs { position: fixed; right: 0; top: 50%; z-index: 80; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; animation: sidetab-in .7s var(--ease) 1.4s backwards; }
.sidetab { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 11px; border-radius: 8px 0 0 8px; background: var(--gold-grad); color: var(--graphite); box-shadow: -8px 12px 30px -14px rgba(12, 24, 40, .55); font: 700 .8rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: padding .3s var(--ease), box-shadow .3s; }
.sidetab--tel { background: #fff; color: var(--graphite); box-shadow: -8px 12px 30px -14px rgba(12, 24, 40, .45), inset 0 0 0 1px rgba(22, 38, 58, .1); }
.sidetab--tel .sidetab__ic { color: var(--gold-text); }
.sidetab__ic svg { display: block; width: 20px; height: 20px; }
.sidetab__txt { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.sidetab:hover { padding-right: 18px; box-shadow: -12px 14px 34px -12px rgba(12, 24, 40, .65); }
.sidetab:focus-visible { outline: 2px solid var(--graphite); outline-offset: -5px; }
@keyframes sidetab-in { from { transform: translate(100%, -50%); } to { transform: translate(0, -50%); } }
@media (max-width: 700px) { .sidetab { padding: 14px 8px; gap: 9px; font-size: .68rem; } .sidetab__ic svg { width: 17px; height: 17px; } .sidetabs { gap: 3px; } }
@media (max-height: 560px) { .sidetabs { top: 46%; } }
@media (prefers-reduced-motion: reduce) { .sidetabs { animation: none; } }
@media print { .sidetabs { display: none; } }

/* ---------- Online-Rezeption (Seitenleiste "Rezeption") ---------- */
button.sidetab { border: 0; cursor: pointer; }
.sidetab--rez { background: var(--graphite); color: var(--on-dark); box-shadow: -8px 12px 30px -14px rgba(12, 24, 40, .7), inset 0 0 0 1px var(--line-dark); }
.sidetab--rez .sidetab__ic { color: var(--gold); }
.sidetab--rez:focus-visible { outline-color: var(--gold); }
@media (max-height: 600px) { .sidetab--rez { display: none; } }

.rez { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(440px, 100vw); max-width: none; height: 100dvh; max-height: none; padding: 0; border: 0; border-radius: 0; background: var(--surface); color: var(--text); overflow: hidden; box-shadow: -24px 0 60px -24px rgba(12, 24, 40, .5); }
.rez[open] { display: flex; flex-direction: column; animation: rez-in .45s var(--ease); }
.rez::backdrop { background: rgba(12, 24, 40, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: rez-fade .35s ease; }
@keyframes rez-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes rez-fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 701px) { .rez { border-radius: 18px 0 0 18px; } }
.rez__top { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.rez__logo { display: block; height: 34px; width: auto; }
.rez__close { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--bg); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.rez__close svg { width: 18px; height: 18px; transform: rotate(45deg); }
.rez__close:hover { background: var(--gold-light); }
.rez__body { flex: 1; overflow-y: auto; padding: 24px 20px 28px; overscroll-behavior: contain; }
.rez__h { margin: 0 0 8px; font: 700 1.45rem/1.2 var(--display); letter-spacing: -.01em; }
.rez__h:focus { outline: none; }
.rez__sub { margin: 0 0 20px; color: var(--muted); line-height: 1.5; }
.rez__menu, .rez__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rez__item, .rez__contact a, .rez__row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-align: left; font: inherit; text-decoration: none; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.rez__row { cursor: default; }
.rez__item:hover, .rez__contact a:hover { border-color: var(--gold); box-shadow: var(--shadow-s); transform: translateY(-1px); }
.rez__item:focus-visible, .rez__contact a:focus-visible, .rez__tabs button:focus-visible, .rez__back:focus-visible, .rez__close:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.rez__ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(160deg, #E4EEF8, #CFE1F2); color: var(--gold-text); }
.rez__ic svg { width: 24px; height: 24px; }
.rez__t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.rez__t b { font: 700 1rem/1.25 var(--sans); color: var(--text); }
.rez__t small { color: var(--muted); font-size: .84rem; line-height: 1.35; }
.rez__ar { flex: none; width: 20px; height: 20px; color: var(--muted); }
.rez__ar svg { width: 20px; height: 20px; }
.rez__tabs { flex: none; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); background: var(--surface-2); padding-bottom: env(safe-area-inset-bottom); }
.rez__tabs button { display: grid; justify-items: center; gap: 4px; padding: 10px 8px 12px; border: 0; background: none; color: var(--muted); font: 600 .78rem/1 var(--sans); cursor: pointer; }
.rez__tabs button svg, .rez__tabs button span svg { display: block; width: 22px; height: 22px; }
.rez__tabs button[aria-current="page"] { color: var(--gold-text); box-shadow: inset 0 3px 0 var(--gold-deep); }
.rez__back { display: inline-flex; align-items: center; gap: 8px; margin: -4px 0 14px -6px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 600 .9rem/1 var(--sans); cursor: pointer; }
.rez__back svg { width: 18px; height: 18px; }
.rez__back:hover { color: var(--text); background: var(--bg); }
.rez__form { display: grid; gap: 16px; }
.rez__f { display: grid; gap: 6px; }
.rez__f > span, .rez__flab, .rez__seg legend { font: 600 .88rem/1.3 var(--sans); color: var(--text); }
.rez__f input, .rez__f textarea, .rez__f select { width: 100%; padding: 13px 14px; border: 1.5px solid rgba(22, 38, 58, .22); border-radius: 10px; background: #fff; color: var(--text); font: 1rem/1.4 var(--sans); }
.rez__f textarea { resize: vertical; min-height: 110px; }
.rez__f input:focus, .rez__f textarea:focus, .rez__f select:focus { outline: 0; border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(91, 143, 203, .25); }
.rez__err { color: #B3261E; font: 600 .84rem/1.35 var(--sans); font-style: normal; min-height: 0; }
.rez__err:empty { display: none; }
.rez__seg { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.rez__seg legend { padding: 0; margin-bottom: 8px; }
.rez__seg > div { display: flex; flex-wrap: wrap; gap: 8px; }
.rez__seg label { position: relative; }
.rez__seg input { position: absolute; opacity: 0; inset: 0; }
.rez__seg span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border: 1.5px solid rgba(22, 38, 58, .22); border-radius: 10px; background: #fff; font: 600 .95rem/1 var(--sans); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.rez__seg input:checked + span { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.rez__seg input:focus-visible + span { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.rez__check { display: flex; align-items: flex-start; gap: 12px; font-size: .92rem; line-height: 1.45; cursor: pointer; }
.rez__check input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--gold-deep); }
.rez__consent { color: var(--muted); font-size: .84rem; }
.rez__consent a { color: var(--gold-text); text-decoration: underline; }
.rez__hint { margin: -4px 0 0; color: var(--muted); font-size: .86rem; }
.rez__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rez__alert { padding: 14px 16px; border-radius: 10px; background: #FDECEA; color: #7A1712; display: grid; gap: 4px; font-size: .92rem; line-height: 1.4; }
.rez__alert[hidden], .rez__drop[hidden], .rez__picked[hidden] { display: none; }
.rez__send { width: 100%; justify-content: center; }
.rez__send svg { width: 18px; height: 18px; }
.rez__send.is-busy { opacity: .7; pointer-events: none; }
.rez__drop { display: grid; justify-items: center; gap: 4px; margin-top: 8px; padding: 26px 16px; border: 2px dashed rgba(22, 38, 58, .25); border-radius: 12px; background: var(--surface-2); text-align: center; cursor: pointer; position: relative; }
.rez__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rez__drop:hover, .rez__drop:has(input:focus-visible) { border-color: var(--gold-deep); background: #EEF6FD; }
.rez__dic svg { width: 28px; height: 28px; color: var(--gold-text); }
.rez__drop small { color: var(--muted); }
.rez__file { display: grid; gap: 4px; }
.rez__picked { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.rez__picked svg { flex: none; width: 22px; height: 22px; color: var(--gold-text); }
.rez__picked span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rez__rm { border: 0; background: none; color: var(--gold-text); font: 600 .88rem/1 var(--sans); text-decoration: underline; cursor: pointer; }
.rez__done { display: grid; justify-items: center; text-align: center; gap: 4px; padding-top: 24px; }
.rez__done .rez__sub { max-width: 26em; }
.rez__seal { width: 96px; height: 96px; margin-bottom: 8px; fill: none; stroke: var(--gold-deep); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.rez__seal circle { stroke-dasharray: 330; stroke-dashoffset: 330; animation: rez-draw .8s ease forwards; }
.rez__seal path { stroke-dasharray: 80; stroke-dashoffset: 80; animation: rez-draw .5s ease .5s forwards; }
@keyframes rez-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 700px) { .rez { width: 100vw; } .rez__body { padding: 20px 18px 24px; } }
@media (prefers-reduced-motion: reduce) { .rez[open], .rez::backdrop, .rez__seal circle, .rez__seal path { animation: none; stroke-dashoffset: 0; } }

/* Seitenreiter: "Schnellanmeldung" und "Anrufen" nur mit Symbol; Rezeption-Leiste mit drei Bereichen; leere Download-Ansicht */
.sidetab--icon { padding: 15px 12px; gap: 0; }
.sidetab--icon .sidetab__ic svg { width: 22px; height: 22px; }
@media (max-width: 700px) { .sidetab--icon { padding: 12px 8px; } .sidetab--icon .sidetab__ic svg { width: 20px; height: 20px; } }
@media (max-height: 460px) { .sidetab--rez { display: none; } }
.rez__tabs { grid-template-columns: repeat(3, 1fr); }
.rez__empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 34px 20px; border: 1.5px dashed rgba(22, 38, 58, .22); border-radius: 14px; background: var(--surface-2); }
.rez__empty b { font: 700 1.05rem/1.3 var(--sans); }
.rez__empty p { margin: 0; color: var(--muted); max-width: 22em; line-height: 1.45; }

/* Online-Rezeption: Kopf und untere Leiste in Navy mit heller Schrift */
.rez__top { background: var(--graphite); border-bottom: 0; }
.rez__close { background: rgba(255, 255, 255, .1); color: #fff; }
.rez__close:hover { background: rgba(255, 255, 255, .2); }
.rez__top .rez__close:focus-visible, .rez__tabs button:focus-visible { outline-color: var(--gold); }
.rez__tabs { background: var(--graphite); border-top: 0; }
.rez__tabs button { color: rgba(255, 255, 255, .78); }
.rez__tabs button:hover { color: #fff; }
.rez__tabs button[aria-current="page"] { color: #fff; box-shadow: inset 0 3px 0 var(--gold); }

/* Online-Rezeption: Hinweis (z. B. zur Berechnung kurzfristiger Absagen) */
.rez__notice { display: grid; gap: 4px; margin: 0 0 20px; padding: 14px 16px; border-left: 4px solid var(--gold-deep); border-radius: 4px 10px 10px 4px; background: #EAF3FB; color: var(--text); font-size: .92rem; line-height: 1.5; }
.rez__notice b { font: 700 .95rem/1.3 var(--sans); }

/* "Online-Rezeption" ragt weiter in die Seite und hebt sich so von den beiden kleinen Symbol-Reitern ab */
.sidetab--rez { padding: 24px 19px 24px 17px; gap: 14px; font-size: .86rem; border-left: 3px solid var(--gold); }
.sidetab--rez .sidetab__ic svg { width: 24px; height: 24px; }
.sidetab--rez:hover { padding-right: 25px; }
@media (max-width: 700px) { .sidetab--rez { padding: 18px 14px 18px 12px; gap: 11px; font-size: .74rem; } .sidetab--rez .sidetab__ic svg { width: 20px; height: 20px; } .sidetab--rez:hover { padding-right: 17px; } }

/* Feinjustierung: "Online-Rezeption" ragt nur noch etwas heraus, "Anrufen" in Grau */
.sidetab--rez { padding: 22px 16px 22px 14px; gap: 13px; font-size: .82rem; }
.sidetab--rez .sidetab__ic svg { width: 22px; height: 22px; }
.sidetab--rez:hover { padding-right: 22px; }
.sidetab--tel { background: #fff; color: var(--graphite); box-shadow: -8px 12px 30px -14px rgba(12, 24, 40, .45), inset 0 0 0 1px rgba(22, 38, 58, .1); }
.sidetab--tel .sidetab__ic { color: var(--gold-text); }
@media (max-width: 700px) { .sidetab--rez { padding: 16px 12px 16px 10px; gap: 10px; font-size: .72rem; } .sidetab--rez .sidetab__ic svg { width: 19px; height: 19px; } .sidetab--rez:hover { padding-right: 15px; } }

/* Online-Rezeption: Panel zu 90 % deckend mit weichem Weichzeichner dahinter (Lesbarkeit bleibt gewahrt: dunkle Schrift auf hellem Grund, weiße Schrift auf Navy; wer "Transparenz reduzieren" eingestellt hat, sieht es voll deckend) */
.rez { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); }
.rez__top, .rez__tabs { background: rgba(20, 37, 60, .92); }
@media (prefers-reduced-transparency: reduce) { .rez { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } .rez__top, .rez__tabs { background: var(--graphite); } }
@media (forced-colors: active) { .rez { background: Canvas; } }

/* Seitenreiter "Schnellanmeldung" und "Anrufen": zu ca. 80 % deckend mit leichtem Weichzeichner, damit die Seite beim Scrollen durchscheint; beim Darüberfahren und Fokussieren voll deckend */
.sidetab--icon { background: linear-gradient(115deg, rgba(94, 143, 203, .8) 0%, rgba(125, 182, 230, .8) 34%, rgba(181, 221, 246, .8) 66%, rgba(140, 194, 236, .8) 100%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sidetab--icon.sidetab--tel { background: rgba(255, 255, 255, .8); }
.sidetab--tel .sidetab__ic { color: #1F4A7A; }
.sidetab--icon:hover, .sidetab--icon:focus-visible { background: var(--gold-grad); }
.sidetab--icon.sidetab--tel:hover, .sidetab--icon.sidetab--tel:focus-visible { background: #fff; }
@media (prefers-reduced-transparency: reduce) { .sidetab--icon { background: var(--gold-grad); -webkit-backdrop-filter: none; backdrop-filter: none; } .sidetab--icon.sidetab--tel { background: #fff; } }

/* "Online-Rezeption": beim Darüberfahren ein kurzes Schimmern (Lichtstreifen läuft einmal über den Reiter) */
.sidetab--rez { position: relative; overflow: hidden; }
.sidetab--rez::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0%, transparent 38%, rgba(255, 255, 255, .06) 44%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, .06) 56%, transparent 62%, transparent 100%); transform: translateY(-110%); }
.sidetab--rez:hover::after, .sidetab--rez:focus-visible::after { animation: sidetab-shine 1.1s ease-in-out 1; }
@keyframes sidetab-shine { from { transform: translateY(-110%); } to { transform: translateY(110%); } }
@media (prefers-reduced-motion: reduce) { .sidetab--rez:hover::after, .sidetab--rez:focus-visible::after { animation: none; } }

/* "Online-Rezeption": beim Darüberfahren wird das Navy etwas heller */
.sidetab--rez { transition: padding .3s var(--ease), box-shadow .3s, background-color .3s; }
.sidetab--rez:hover, .sidetab--rez:focus-visible { background-color: #24405F; }

/* Footer: dezente Linkzeile zu den Themenseiten (Beschwerden) */
.foot__topics { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding-top: 22px; border-top: 1px solid var(--line-dark); font-size: .82rem; line-height: 1.5; color: var(--on-dark-muted); }
.foot__topics span { color: rgba(255, 255, 255, .55); }
.foot__topics a { display: inline-block; min-height: 24px; line-height: 24px; color: var(--on-dark-muted); text-decoration: none; }
main a[href^="tel:"]:not(.btn), main a[href^="mailto:"]:not(.btn) { display: inline-block; min-height: 24px; }
.foot__topics a:hover, .foot__topics a:focus-visible { color: #fff; text-decoration: underline; }
.foot__topics + .foot__bottom { border-top: 0; padding-top: 14px; }

/* Handy (bis 700 px): die drei Reiter werden zu einer Leiste ganz unten, wie bei einer App: volle Breite, bis zum unteren Rand, läuft immer mit.
   Tablet und Desktop behalten die Reiter am rechten Rand. */
.sidetab__lbl { display: none; }
@media (max-width: 700px) {
  .sidetabs { top: auto; right: 0; bottom: 0; left: 0; transform: none; flex-direction: row; align-items: stretch; gap: 0; padding-bottom: env(safe-area-inset-bottom); background: var(--graphite); box-shadow: 0 -10px 30px -12px rgba(12, 24, 40, .45); animation: sidebar-up .6s var(--ease) 1.2s backwards; }
  .sidetabs .sidetab { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 10px 6px 11px; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font: 700 .68rem/1.15 var(--sans); letter-spacing: .07em; text-align: center; }
  .sidetabs .sidetab + .sidetab { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .18); }
  .sidetabs .sidetab--icon:not(.sidetab--tel) { background: var(--gold-grad); }
  .sidetabs .sidetab--tel { background: #fff; color: var(--graphite); box-shadow: inset 1px 0 0 rgba(22, 38, 58, .12); }
  .sidetabs .sidetab--rez { display: flex; background: var(--graphite); color: #fff; padding: 10px 6px 11px; }
  .sidetabs .sidetab:hover { padding: 10px 6px 11px; }
  .sidetabs .sidetab--rez::after { display: none; }
  .sidetabs .sidetab__ic svg { width: 24px; height: 24px; }
  .sidetabs .sidetab__txt { display: none; }
  .sidetabs .sidetab__lbl { display: block; text-transform: uppercase; }
  .sidetabs .sidetab:focus-visible { outline-offset: -4px; }
  body:has(.sidetabs) .to-top { bottom: calc(76px + env(safe-area-inset-bottom)); }
  body:has(.sidetabs) .foot { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@keyframes sidebar-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sidetabs { animation: none !important; } }
@media (max-width: 700px) { .sidetabs .sidetab { font-size: .64rem; letter-spacing: .03em; padding-inline: 4px; } .sidetabs .sidetab:hover { padding-inline: 4px; } }

/* Handy-Leiste wie auf Tablet und Desktop: links nur das Symbol für die Anmeldung, rechts nur das Symbol für Anrufen, in der Mitte breit "Online-Rezeption" */
@media (max-width: 700px) {
  .sidetabs .sidetab--icon { flex: 0 0 23%; padding: 17px 4px; }
  .sidetabs .sidetab--icon .sidetab__lbl { display: none; }
  .sidetabs .sidetab--icon .sidetab__ic svg { width: 26px; height: 26px; }
  .sidetabs .sidetab--rez { flex: 1 1 auto; flex-direction: row; gap: 10px; padding: 17px 8px; font-size: .78rem; letter-spacing: .06em; }
  .sidetabs .sidetab--rez .sidetab__ic svg { width: 24px; height: 24px; }
  .sidetabs .sidetab:hover, .sidetabs .sidetab--rez:hover { padding: 17px 4px; }
  .sidetabs .sidetab--rez:hover { padding: 17px 8px; }
  body:has(.sidetabs) .to-top { bottom: calc(70px + env(safe-area-inset-bottom)); }
  body:has(.sidetabs) .foot { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}
@media (max-width: 700px) { .sidetabs .sidetab--icon { flex: 0 0 17%; padding-inline: 2px; } }

/* Handy-Leiste: links grau, Mitte im blauen Verlauf der Seite (dunkle Schrift), rechts weiß */
@media (max-width: 700px) {
  .sidetabs .sidetab--icon:not(.sidetab--tel) { background: #D5DAE0; color: var(--graphite); }
  .sidetabs .sidetab--icon:not(.sidetab--tel) .sidetab__ic { color: #1F4A7A; }
  .sidetabs .sidetab--rez { background: var(--gold-grad); color: var(--graphite); }
  .sidetabs .sidetab--rez .sidetab__ic { color: var(--graphite); }
  .sidetabs .sidetab + .sidetab { box-shadow: inset 1px 0 0 rgba(22, 38, 58, .14); }
}

/* Handy-Leiste: oben links und oben rechts leicht abgerundet, passend zu den übrigen Rundungen der Seite */
@media (max-width: 700px) { .sidetabs { border-radius: 14px 14px 0 0; overflow: hidden; background: transparent; } .sidetabs .sidetab:first-child { border-top-left-radius: 14px; } .sidetabs .sidetab:last-child { border-top-right-radius: 14px; } }
@media (max-width: 700px) { .sidetabs { background: var(--graphite); } }
@media (max-width: 700px) { .sidetabs { box-shadow: 0 -8px 26px -12px rgba(12, 24, 40, .2); } }
@media (max-width: 700px) { .to-top { display: none !important; } }

/* Handy-Leiste: bleibt zunächst unten versteckt und fährt ein, sobald der erste Inhaltsabschnitt erreicht ist (ohne JavaScript immer sichtbar) */
@media (max-width: 700px) {
  .js .sidetabs { animation: none; transform: translateY(105%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s linear .45s; }
  .js .sidetabs.is-on { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
}

/* ---------- Gehaltsrechner am Handy wie eine App: Karte füllt genau den Bildschirm unter der Menüleiste,
   Knopfleiste immer unten, Überschrift nur für Google/Vorleser, jeder Schritt möglichst ohne Scrollen ---------- */
@media (max-width: 600px) {
  .rechner-page { padding-top: calc(var(--nav-h) + 10px); padding-bottom: 40px; }
  .rechner-page .head { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rechner-page .wrap { padding-inline: 10px; }
  .rechner-page .fx--inline { margin-top: 0; height: calc(100svh - var(--nav-h) - 18px); min-height: 480px; display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: 22px; }
  .rechner-page .fx--inline .fx__form { min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
  .rechner-page .fx--inline .fx__top { padding: 12px 16px 0; }
  .rechner-page .fx--inline .fx__stage { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 12px 16px 16px; }
  .rechner-page .fx--inline .fx__nav { position: static; padding: 10px 16px; border-radius: 0 0 22px 22px; }
  .rechner-page .fx--inline .fx__step { gap: 8px; }
  .rechner-page .fx__num { display: none; }
  .rechner-page .fx__q { font-size: 1.3rem; line-height: 1.2; }
  .rechner-page .fx__hint { font-size: .88rem; line-height: 1.4; }
  /* Schritt 1: Stellen */
  .rechner-page .fx__tiles--2 .fx__pic, .rechner-page .fx--calc .fx__tiles.fx__tiles--2 .fx__pic { aspect-ratio: 1 / 1; }
  .rechner-page .fx--calc .fx__tiles--2 { margin-top: 6px; }
  /* Schritt 2: Erfahrung */
  .rechner-page .fx__opts { gap: 8px; margin-top: 6px; }
  .rechner-page .fx__opt { min-height: 54px; padding: 8px 12px; }
  /* Schritt 3: Arbeitszeit */
  .rechner-page .fx__hours { gap: 14px; margin-top: 6px; }
  .rechner-page .fx__range { padding: 14px 16px; gap: 8px; }
  .rechner-page .fx__days legend { margin-bottom: 8px; }
  .rechner-page .fx__days span { min-height: 52px; padding: 6px; }
  /* Schritt 4: Zertifikate */
  .rechner-page .fx--calc .fx__tiles--4 { gap: 8px; margin-top: 6px; }
  .rechner-page .fx--calc .fx__tiles--4 .fx__pic { aspect-ratio: 7 / 2; }
  .rechner-page .fx--calc .fx__tiles--4 .fx__cap { padding: 5px 8px 7px; }
  .rechner-page .fx--calc .fx__tiles--4 .fx__cap small { font-size: .72rem; line-height: 1.25; }
  .rechner-page .fx__field--extra { margin-top: 8px; gap: 4px; }
  .rechner-page .fx__field--extra textarea { min-height: 46px; height: 46px; padding: 10px 12px; font-size: 1rem; }
  .rechner-page .fx__extra-note { display: none; }
  /* Schritt 5: Was ist dir wichtig (2 x 2 statt untereinander, ohne Erklärsatz) */
  .rechner-page .fx__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
  .rechner-page .fx__card { padding: 12px; gap: 4px; }
  .rechner-page .fx__card small { display: none; }
  .rechner-page .fx__card-ic { width: 36px; height: 36px; margin-bottom: 4px; border-radius: 10px; }
  .rechner-page .fx__card-ic svg { width: 20px; height: 20px; }
  .rechner-page .fx__card b { font-size: .95rem; line-height: 1.25; }
  .rechner-page .fx__card .fx__key { top: 10px; right: 10px; }
  .rechner-page .fx__card .fx__tick { top: 12px; right: 12px; }
}

/* Massage: Gutschein-Bild */
.lp-gutschein { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; margin-bottom: 16px; }
.gutschein-bild { margin: 0; }
ul.gutschein-punkte { margin: 22px 0 26px; }

/* Online-Rezeption: Auswahlliste (Gutschein) */
.rez__f select { appearance: none; -webkit-appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316263A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; cursor: pointer; }
.rez__f textarea[name=adresse] { min-height: 80px; }

/* Schnellanmeldung: zweites Rezept */
.fx__file + .fx__file, .fx__file + .fx__drop--more { margin-top: 10px; }
.fx__drop--more { padding-block: 16px; }