/* ==========================================================================
   POM Weimar · Fitness & Gesundheit seit 1997 · Vorschlag 3
   Dunkelgrau · Gold · Hellgrau · Weiß. 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) */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/anton-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}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url("../fonts/jetbrains-mono-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}

:root {
  /* Farben */
  --graphite: #2A2C30;      /* dunkles Grau statt Schwarz */
  --graphite-2: #33363B;
  --graphite-3: #41444A;
  --gold: #E2BF43;          /* Gold aus dem Logo (Mitte) */
  --gold-light: #FCE56A;     /* Glanzlicht */
  --gold-deep: #D4AB2F;      /* Schatten */
  --gold-text: #7E6310;     /* dunkle Goldstufe für kleine Schrift auf Hell (5:1) */
  --gold-grad: linear-gradient(115deg, #D1A82D 0%, #E4C144 32%, #FCE56A 64%, #EDCB4C 100%);   /* Verlauf wie im Logo */
  --gold-grad-deep: linear-gradient(115deg, #7E6310 0%, #9C7A14 55%, #86680F 100%);             /* dieselbe Goldfamilie, lesbar auf Hell */
  --bg: #EEEEEC;            /* neutrales Hellgrau */
  --surface: #FFFFFF;
  --surface-2: #F6F6F4;
  --text: #26282B;
  --muted: #5B5E64;         /* 6:1 auf Hellgrau */
  --line: rgba(38, 40, 43, .12);
  --on-dark: #F4F4F2;
  --on-dark-muted: #BABCC1;
  --line-dark: rgba(255, 255, 255, .13);
  --shadow: 0 30px 60px -34px rgba(20, 22, 26, .45);
  --shadow-s: 0 12px 30px -20px rgba(20, 22, 26, .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; }
@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%; color: var(--graphite); box-shadow: 0 10px 24px -14px rgba(176, 138, 20, .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(176, 138, 20, .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 { 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, #464950 0%, #2F3136 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, #E0E0DC 0%, #CFCFCA 100%); color: #6A6D72; }
.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; }
.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(42, 44, 48, .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(30, 32, 35, .82) 0%, rgba(30, 32, 35, .62) 22%, rgba(30, 32, 35, .3) 40%, rgba(30, 32, 35, 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(30,32,35,.92) 0%, rgba(30,32,35,.35) 50%, rgba(30,32,35,.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, #5A5D63, #3A3D42); 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(38, 40, 43, .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(20, 21, 24, .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(20, 21, 24, .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(91, 94, 100, .6), rgba(91, 94, 100, .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(38, 40, 43, .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(176, 138, 20, .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(176, 138, 20, .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(176, 138, 20, .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(42,44,48,.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: #1C1D20; 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: #1C1D20; 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; }
.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, #5A5D63, #3A3D42); box-shadow: 0 0 0 2px rgba(226, 191, 67, .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(226, 191, 67, .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); }
.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(226, 191, 67, .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__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(20, 21, 24, .1) 0%, rgba(20, 21, 24, 0) 30%, rgba(20, 21, 24, .55) 62%, rgba(20, 21, 24, .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(226, 191, 67, .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(226, 191, 67, .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(20, 21, 24, .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(226, 191, 67, .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-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(30,32,35,.78) 0%, rgba(30,32,35,.5) 30%, rgba(30,32,35,.12) 55%, rgba(30,32,35,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; }
.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 > img { 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 > img { width: 100px; } }
@media (max-width: 800px) { .apply { grid-template-columns: 1fr; } .apply > 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(20, 21, 24, .6); }
.fx__glow { position: absolute; width: 64vmax; height: 64vmax; right: -24vmax; top: -30vmax; border-radius: 50%; background: radial-gradient(circle, rgba(252, 229, 106, .5), rgba(226, 191, 67, .14) 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(226, 191, 67, .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(38, 40, 43, .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: #FFFBEA; }
.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: #FFF6E0; border: 1px solid #EBC45C; }
.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(238, 238, 236, .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; }
.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; }

/* ---------- 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(226, 191, 67, .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(226, 191, 67, .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(20, 21, 24, .88), rgba(20, 21, 24, .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(8, 8, 9, .5) 60%, rgba(8, 8, 9, .88) 100%), linear-gradient(0deg, rgba(8, 8, 9, .95) 0%, rgba(8, 8, 9, .25) 55%, rgba(8, 8, 9, .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(226, 191, 67, .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: #111112; padding-block: 16px; border-block: 9px solid transparent; border-image: repeating-linear-gradient(45deg, var(--gold) 0 14px, #111112 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(226, 191, 67, .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(226, 191, 67, .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: #151517; }
.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(8, 8, 9, .85), rgba(8, 8, 9, .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(226, 191, 67, .18), rgba(226, 191, 67, .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(226, 191, 67, .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: #151517; }
.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%, #121213 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, #121213 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(226, 191, 67, .5) 230deg, #FCE56A 310deg, #FFF3B0 330deg, #E4C144 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(226, 191, 67, 0); } 50% { box-shadow: 0 0 34px -2px rgba(226, 191, 67, .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, .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: 16px; }
  .vs__card--us .vs__list .vs__cell { padding-block: 10px; }

  /* 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; }