/* ==========================================================================
   Prolatiq Website – Designsystem «Apple-Minimalismus» (Master-Prompt, Nov 2026)
   Hell zuerst, dunkel umschaltbar. Abstände in 4-px-Schritten. Rundungen fest:
   Knöpfe Pille · Felder 14 · Karten 20 · grosse Flächen 28/32 · Bilder 20.
   Schriften (alle SIL Open Font License 1.1, lokal): Sora (Titel), Inter (Text), Space Grotesk (Zahlen).
   styles.css bleibt für Golfdex-Anmeldung und Admin unverändert.
   ========================================================================== */
@font-face { font-family: "Sora"; src: url("/assets/fonts/sora-var.woff") format("woff"); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-var.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/spacegrotesk-var.woff") format("woff"); font-weight: 300 700; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Marke */
  --white: #FFFFFF; --soft: #F5F6F8; --platinum: #E8EAED; --silver: #D1D5DB; --graphite: #343A40; --black: #111318;
  --gold: #B9A36A;
  /* Golfdex */
  --g-soft: #A6C77B; --g-fairway: #607D50; --g-forest: #263B2D;
  /* Rollen (hell) */
  --bg: var(--white); --surface: var(--soft); --surface-2: var(--platinum); --line: var(--platinum); --line-strong: var(--silver);
  --fg: var(--black); --fg-2: #4A5058; --muted: #5F6670; --accent-green: var(--g-fairway);
  --btn-bg: var(--black); --btn-fg: var(--white);
  --shadow-card: 0 24px 48px -24px rgba(17, 19, 24, .28), 0 4px 12px -6px rgba(17, 19, 24, .12);
  /* Schrift */
  --f-display: "Sora", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-num: "Space Grotesk", "Inter", sans-serif;
  /* Rundungen */
  --r-field: 14px; --r-card: 20px; --r-premium: 24px; --r-box: 32px; --r-img: 20px;
  /* Abstände */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px; --s20: 80px; --s30: 120px;
  --ease: cubic-bezier(.2, .7, .2, 1); --t: 240ms;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: var(--black); --surface: #1A1D23; --surface-2: #23272E; --line: #262A31; --line-strong: var(--graphite);
  --fg: #F5F6F8; --fg-2: #C9CDD3; --muted: #A3A9B2; --accent-green: var(--g-soft);
  --btn-bg: #F5F6F8; --btn-fg: var(--black);
  --shadow-card: 0 28px 56px -28px rgba(0, 0, 0, .8), 0 4px 12px -6px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* ---------- Grundlage ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.6 var(--f-text); -webkit-font-smoothing: antialiased; overflow-x: clip; transition: background-color var(--t), color var(--t); }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3, h4 { font-family: var(--f-display); margin: 0; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; }
.w, .container { width: 100%; max-width: 1300px; margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
@media (min-width: 760px) { .w, .container { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); } }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 30; background: var(--fg); color: var(--bg); padding: 12px 16px; border-radius: 999px; }
.skip:focus { left: 16px; }

/* Typografie */
.display { font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 600; }
.h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.08; letter-spacing: -.03em; }
.h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.25; letter-spacing: -.015em; }
.lead { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.5; color: var(--fg-2); max-width: 40em; }
.kicker { font: 600 15px/1.4 var(--f-text); color: var(--muted); }
.kicker.green { color: var(--accent-green); }
.small { font-size: 15px; color: var(--muted); }
.note { margin-top: var(--s8); font-size: 15px; color: var(--muted); text-align: center; }
.head { display: grid; gap: var(--s4); max-width: 820px; }
.head .h2 { margin-bottom: var(--s1); }

/* Abschnitte */
main section { padding-block: clamp(80px, 11vw, 140px); }
main section.tint { background: var(--surface); }

/* ---------- Kopfzeile ---------- */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.top .w { display: flex; align-items: center; gap: var(--s6); height: 68px; }
.home { display: flex; align-items: center; color: var(--fg); padding: var(--s3) 0; border-radius: 8px; }
.wm { width: 116px; height: 20px; }
nav.links { display: flex; gap: var(--s1); margin-inline: auto; }
nav.links a { font: 500 15px var(--f-text); text-decoration: none; color: var(--fg-2); padding: 10px 14px; border-radius: 999px; transition: background-color var(--t), color var(--t); }
nav.links a:hover { background: var(--surface); color: var(--fg); }
nav.links .only-menu { display: none; }
.tools { display: flex; align-items: center; gap: var(--s2); }
.top .w > .home + .tools { margin-left: auto; }
.tbtn { display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 40px; padding-inline: 12px; background: none; border: 0; border-radius: 999px; color: var(--fg-2); font: 600 14px var(--f-text); text-decoration: none; cursor: pointer; transition: background-color var(--t), color var(--t); }
.tbtn:hover { background: var(--surface); color: var(--fg); }
.tbtn svg { width: 18px; height: 18px; }
.pill { display: inline-flex; align-items: center; height: 40px; padding-inline: 18px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font: 600 14px var(--f-text); text-decoration: none; white-space: nowrap; border: 1px solid var(--btn-bg); transition: opacity var(--t), background-color var(--t); }
.pill:hover { opacity: .86; }
.pill.secondary { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.pill.secondary:hover { opacity: 1; background: var(--surface); }
.menu-btn { display: none; }
@media (max-width: 1080px) {
  .menu-btn { display: inline-flex; }
  nav.links { display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; padding: var(--s3) max(20px, env(safe-area-inset-left, 0px)) var(--s6); background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(17, 19, 24, .25); }
  nav.links.open { display: flex; }
  nav.links a { font-size: 18px; padding: 14px 12px; border-radius: var(--r-field); }
  nav.links .only-menu { display: block; }
  .hide-s { display: none; }
}
@media (max-width: 400px) { .wm { width: 92px; } .tools { gap: 2px; } .pill { padding-inline: 14px; } .tbtn { padding-inline: 10px; } }

/* ---------- Knöpfe ---------- */
.cta { display: flex; gap: var(--s3); flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 52px; padding-inline: 28px; border-radius: 999px; border: 1px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); font: 600 16px var(--f-text); text-decoration: none; cursor: pointer; transition: opacity var(--t), background-color var(--t), border-color var(--t), transform var(--t) var(--ease); }
.btn:hover { opacity: .88; }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-busy="true"] { opacity: .5; cursor: wait; transform: none; }
.btn.secondary { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn.secondary:hover { opacity: 1; background: var(--surface); border-color: var(--fg-2); }
.btn.green { background: var(--g-forest); border-color: var(--g-forest); color: var(--white); }
:root[data-theme="dark"] .btn.green { background: var(--g-soft); border-color: var(--g-soft); color: var(--g-forest); }
.btn-primary { display: inline-flex; align-items: center; min-height: 52px; padding-inline: 28px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg) !important; font: 600 16px var(--f-text); text-decoration: none; }

/* ---------- Bausteine ---------- */
.panel { background: var(--surface); border-radius: var(--r-card); padding: var(--s8); }
.tint .panel { background: var(--bg); }
.num { font: 500 15px var(--f-num); color: var(--muted); letter-spacing: .02em; }
.badge { display: inline-flex; align-items: center; gap: var(--s2); height: 28px; padding-inline: 12px; border-radius: 999px; background: var(--surface-2); color: var(--fg-2); font: 600 13px var(--f-text); white-space: nowrap; }
.badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green); }
.badge.live { background: color-mix(in srgb, var(--g-soft) 28%, transparent); color: var(--g-forest); }
:root[data-theme="dark"] .badge.live { color: var(--g-soft); }

/* ---------- 1 Hero ---------- */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(80px, 9vw, 120px) !important; overflow: hidden; }
.hero-g { display: grid; gap: var(--s12); align-items: center; }
.hero-copy { display: grid; gap: var(--s6); justify-items: start; }
.hero-copy .display { font-size: clamp(2.4rem, 4.5vw, 4.5rem); }
.hero-copy .display span { display: block; }
.hero-copy .cta { margin-top: var(--s2); }
.hero-stage { position: relative; aspect-ratio: 1 / 1; width: min(100%, 560px); justify-self: center; border-radius: var(--r-box); background: radial-gradient(120% 90% at 50% 0%, var(--white), var(--soft) 55%, var(--platinum)); }
:root[data-theme="dark"] .hero-stage { background: radial-gradient(120% 90% at 50% 0%, #2A2E36, #1A1D23 60%, #15171C); }
.hs-card, .hero-stage .foilcard { position: absolute; width: 42%; aspect-ratio: 5 / 7; top: 50%; left: 50%; }
.hs-card { border-radius: 4.5% / 3.2%; box-shadow: var(--shadow-card); }
.hs-l { transform: translate(-108%, -46%) rotate(-9deg); }
.hs-r { transform: translate(8%, -46%) rotate(9deg); }
.hero-stage .foilcard { transform: translate(-50%, -54%) perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); z-index: 2; }
@media (min-width: 960px) { .hero-g { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s16); } .hero-stage { justify-self: end; } }

/* Signet als Folienkarte */
@property --a { syntax: "<angle>"; inherits: true; initial-value: 20deg; }
.foilcard { --mx: 62%; --my: 28%; border-radius: 4.5% / 3.2%; overflow: hidden; box-shadow: 0 40px 70px -30px rgba(17, 19, 24, .45); transition: transform 350ms var(--ease); touch-action: pan-y; }
.foilcard > * { position: absolute; inset: 0; }
.fc-holo { background: conic-gradient(from var(--a) at var(--mx) var(--my), #aebfd6, #d7c6e6, #efdcbc, #c0e4d3, #a9c6e6, #dfc7dc, #f1e4c6, #b5d3df, #aebfd6); }
.fc-shards { background: url("/assets/foil/shards.webp") center / cover; mix-blend-mode: overlay; opacity: .9; }
.fc-glare { background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 45%); }
.foilcard svg { width: 100%; height: 100%; fill: var(--black); }

/* ---------- 2 Vision ---------- */
.steps { list-style: none; margin: var(--s12) 0 0; padding: 0; display: grid; gap: var(--s4); }
.steps li { display: grid; gap: var(--s3); align-content: start; }
.steps p { color: var(--fg-2); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } .steps li { padding: var(--s8) var(--s8) var(--s12); } }

/* ---------- 3 Sportarten ---------- */
.eco { display: grid; gap: var(--s4); margin-top: var(--s12); }
.sport { background: var(--bg); border-radius: var(--r-card); padding: var(--s6); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4); min-height: 132px; }
.sport .h3 { font-size: 1.25rem; }
.sport-live { text-decoration: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s6); padding: var(--s8); border-radius: var(--r-premium); transition: transform var(--t) var(--ease), box-shadow var(--t); }
.sport-live:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.sport-copy { display: grid; gap: var(--s3); justify-items: start; align-self: stretch; align-content: space-between; }
.sport-live .h3 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.03em; }
.sport-live p { color: var(--fg-2); }
.sport-live img { width: clamp(96px, 22vw, 200px); border-radius: 4.5% / 3.2%; box-shadow: var(--shadow-card); transform: rotate(4deg); }
.sports { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.sports .badge { align-self: flex-start; }
.sport-more { background: transparent; border: 1px dashed var(--line-strong); }
.sport-more a { font-weight: 600; color: var(--fg); text-underline-offset: 4px; }
@media (min-width: 960px) { .eco { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s6); } .sports { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sport-live { grid-template-columns: minmax(0, 1fr); align-content: space-between; } .sport-live img { justify-self: end; } }

/* ---------- 4 Sammelkarten ---------- */
.levels { list-style: none; margin: var(--s12) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s12) var(--s4); }
.levels li { display: grid; gap: var(--s2); align-content: start; }
.lv { margin: 0 0 var(--s3); padding: 12%; border-radius: var(--r-premium); background: radial-gradient(110% 80% at 50% 0%, var(--white), var(--soft) 70%); border: 1px solid var(--line); transition: transform var(--t) var(--ease); }
:root[data-theme="dark"] .lv { background: radial-gradient(110% 80% at 50% 0%, #262A31, #1A1D23 70%); }
.lv img { border-radius: 4.5% / 3.2%; box-shadow: var(--shadow-card); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 300ms var(--ease); }
.levels h3 { font-size: 1.125rem; }
.levels p { color: var(--muted); font-size: 15px; }
@media (min-width: 760px) { .levels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s12) var(--s6); } }
@media (min-width: 1180px) { .levels { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s6) var(--s4); } }

/* ---------- 5 Leistung ---------- */
.perf { display: grid; gap: var(--s12); align-items: center; }
.perf-card { margin: 0; justify-self: center; width: min(78%, 400px); }
.perf-card img { border-radius: 4.5% / 3.2%; box-shadow: var(--shadow-card); transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, -6deg)); transition: transform 300ms var(--ease); }
.perf-copy { display: grid; gap: var(--s8); }
.stats { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.stats > div { background: var(--bg); border-radius: var(--r-card); padding: var(--s4) var(--s4) var(--s6); }
.stats dt { font: 500 13px var(--f-text); color: var(--muted); }
.stats dd { margin: var(--s1) 0 0; font: 600 clamp(1.5rem, 2.6vw, 2.25rem)/1.1 var(--f-num); letter-spacing: -.02em; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); color: var(--fg-2); }
.facts li { padding-left: 28px; position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: .62em; width: 14px; height: 2px; border-radius: 2px; background: var(--gold); }
@media (max-width: 520px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .perf { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s20); } }

/* ---------- 6 Golfdex ---------- */
.gdx { display: grid; gap: var(--s12); border-radius: var(--r-box); padding: clamp(28px, 5vw, 64px); background: linear-gradient(160deg, #F2F6EC, #E6EEDC 60%, #DCE7CF); color: var(--g-forest); overflow: hidden; }
:root[data-theme="dark"] .gdx { background: linear-gradient(160deg, #1F2B22, #19231C 60%, #142019); color: #E9F0E1; }
.gdx .lead, .gdx .small { color: currentColor; opacity: .82; }
.gdx-copy { display: grid; gap: var(--s6); align-content: center; justify-items: start; }
.gdx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.gdx-list li { padding-left: 32px; position: relative; }
.gdx-list li::before { content: ""; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: var(--g-fairway) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.gdx .btn.secondary { color: currentColor; border-color: color-mix(in srgb, currentColor 35%, transparent); }
.gdx .btn.secondary:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.gdx-cards { position: relative; min-height: 340px; }
.gdx-cards img { position: absolute; width: min(44%, 220px); top: 50%; left: 50%; border-radius: 4.5% / 3.2%; box-shadow: var(--shadow-card); }
.gdx-cards img:nth-child(1) { transform: translate(-112%, -44%) rotate(-10deg); }
.gdx-cards img:nth-child(2) { transform: translate(-50%, -54%); z-index: 2; }
.gdx-cards img:nth-child(3) { transform: translate(12%, -44%) rotate(10deg); }
@media (min-width: 960px) { .gdx { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .gdx-cards { min-height: 460px; } }

/* ---------- 7 Zukunft ---------- */
.future { display: grid; gap: var(--s4); justify-items: center; text-align: center; max-width: 900px; }
.future .lead { margin-top: var(--s2); }

/* ---------- 8 Warteliste ---------- */
.join { display: grid; gap: var(--s12); }
.join .head { align-content: start; }
.join .small a { color: var(--fg); font-weight: 600; text-underline-offset: 4px; }
@media (min-width: 960px) { .join { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s16); } }
.form { display: grid; gap: var(--s6); align-content: start; border-radius: var(--r-premium); }
.field { display: grid; gap: var(--s2); border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font: 600 15px var(--f-text); color: var(--fg); padding: 0; }
.field legend { margin-bottom: var(--s3); }
.field input[type="email"] { width: 100%; height: 52px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-field); color: var(--fg); padding-inline: var(--s4); font: 400 17px var(--f-text); transition: border-color var(--t), box-shadow var(--t); }
.field input[type="email"]:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg) 12%, transparent); }
.field input::placeholder { color: var(--muted); }
.checks { display: flex; flex-wrap: wrap; gap: var(--s2); }
.field .check { position: relative; flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg); font: 500 15px var(--f-text); color: var(--fg); cursor: pointer; transition: background-color var(--t), border-color var(--t); }
.field .check:has(input:checked) { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.check input { accent-color: var(--fg); width: 16px; height: 16px; margin: 0; flex: none; }
.check:has(input:checked) input { accent-color: var(--bg); }
.check:has(input:focus-visible) { outline: 2px solid var(--fg); outline-offset: 2px; }
.form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 15px; }
.form-status:empty { display: none; }
.form-status.ok { color: var(--accent-green); font-weight: 600; }
.form-status.err { color: #B4372A; }
:root[data-theme="dark"] .form-status.err { color: #FF8A7A; }
.form-note { font-size: 14px; color: var(--muted); }

/* ---------- Fusszeile ---------- */
.foot { background: var(--surface); padding-block: var(--s16) var(--s12); }
.fg { display: grid; gap: var(--s8); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fg > * { min-width: 0; }
.fg .md { font: 600 1.25rem/1.35 var(--f-display); letter-spacing: -.015em; max-width: 18ch; }
.fg .mono { font: 600 14px var(--f-text); color: var(--muted); }
.fg ul { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); font-size: 15px; }
.fg a { text-decoration: none; color: var(--fg-2); }
.fg a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.fwm { margin-top: var(--s16); color: var(--line-strong); }
.fwm svg { width: 100%; height: auto; }
@media (min-width: 760px) { .fg { grid-template-columns: 2fr 1fr 1fr 1fr; } }

/* ---------- Rechtsseiten und Danke-Seite ---------- */
.legal { max-width: 760px; padding-block: var(--s16) var(--s30); }
.legal h1 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.1; margin-bottom: var(--s8); }
.legal h2 { font-size: 1.375rem; margin: var(--s12) 0 var(--s3); }
.legal h3 { font-size: 1.125rem; margin: var(--s8) 0 var(--s2); }
.legal p, .legal li { color: var(--fg-2); margin: 0 0 var(--s3); }
.legal strong { color: var(--fg); font-weight: 600; }
.legal a { color: var(--fg); text-underline-offset: 3px; }
.legal ul.credits { columns: 2; column-gap: var(--s8); padding-left: 18px; font-size: 15px; }
.legal ul.credits li { break-inside: avoid; margin-bottom: var(--s2); }
@media (max-width: 559px) { .legal ul.credits { columns: 1; } }
.thanks { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; }
.thanks .eyebrow { font: 600 15px var(--f-text); color: var(--muted); margin-bottom: var(--s4); }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  .fc-holo { animation: drift 24s linear infinite; }
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
@keyframes drift { to { --a: 380deg; } }


/* ==========================================================================
   Karten auf der Startseite (06.11.2026): Booster-Pack, Sportarten, Galerie, 3D-Holo, Golf Buddies
   ========================================================================== */
@font-face { font-family: "Unbounded"; src: url("/assets/fonts/unbounded-var.woff") format("woff"); font-weight: 200 900; font-display: swap; }

/* Hero: Holo links, Pack Mitte, R Holo rechts */
.hs-l { transform: translate(-112%, -44%) rotate(-10deg); }
.hs-r { transform: translate(12%, -44%) rotate(10deg); }
.pk-stage { position: absolute; z-index: 2; left: 50%; top: 50%; width: 40%; aspect-ratio: 200 / 310; transform: translate(-50%, -52%); perspective: 1000px; touch-action: pan-y; }
/* Pack aus der App (Teile wie in Golfdex) */
.bp-shadow{position:absolute;left:12%;right:12%;bottom:-7%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.62),rgba(0,0,0,.25) 55%,transparent);filter:blur(5px);transform:scaleX(calc(1 - var(--fy,0) * .012));opacity:calc(.9 + var(--fy,0) * .02);pointer-events:none}
.mp-pack{position:absolute;inset:0;transform-style:preserve-3d;transform:translateY(calc(var(--fy,0) * 1px)) rotateX(calc(var(--rx,0) * 1deg)) rotateY(calc(var(--ry,0) * 1deg));will-change:transform}
.bp-back,.bp-body{position:absolute;inset:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 310%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 0 L5 3.2 L10 0 L15 3.2 L20 0 L25 3.2 L30 0 L35 3.2 L40 0 L45 3.2 L50 0 L55 3.2 L60 0 L65 3.2 L70 0 L75 3.2 L80 0 L85 3.2 L90 0 L95 3.2 L100 0 L105 3.2 L110 0 L115 3.2 L120 0 L125 3.2 L130 0 L135 3.2 L140 0 L145 3.2 L150 0 L155 3.2 L160 0 L165 3.2 L170 0 L175 3.2 L180 0 L185 3.2 L190 0 L195 3.2 L200 0 L200 22 L196.5 24.5 L200 27 L200 306.8 L200 310 L195 306.8 L190 310 L185 306.8 L180 310 L175 306.8 L170 310 L165 306.8 L160 310 L155 306.8 L150 310 L145 306.8 L140 310 L135 306.8 L130 310 L125 306.8 L120 310 L115 306.8 L110 310 L105 306.8 L100 310 L95 306.8 L90 310 L85 306.8 L80 310 L75 306.8 L70 310 L65 306.8 L60 310 L55 306.8 L50 310 L45 306.8 L40 310 L35 306.8 L30 310 L25 306.8 L20 310 L15 306.8 L10 310 L5 306.8 L0 310 L0 27 L3.5 24.5 L0 22 Z%22/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 310%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 0 L5 3.2 L10 0 L15 3.2 L20 0 L25 3.2 L30 0 L35 3.2 L40 0 L45 3.2 L50 0 L55 3.2 L60 0 L65 3.2 L70 0 L75 3.2 L80 0 L85 3.2 L90 0 L95 3.2 L100 0 L105 3.2 L110 0 L115 3.2 L120 0 L125 3.2 L130 0 L135 3.2 L140 0 L145 3.2 L150 0 L155 3.2 L160 0 L165 3.2 L170 0 L175 3.2 L180 0 L185 3.2 L190 0 L195 3.2 L200 0 L200 22 L196.5 24.5 L200 27 L200 306.8 L200 310 L195 306.8 L190 310 L185 306.8 L180 310 L175 306.8 L170 310 L165 306.8 L160 310 L155 306.8 L150 310 L145 306.8 L140 310 L135 306.8 L130 310 L125 306.8 L120 310 L115 306.8 L110 310 L105 306.8 L100 310 L95 306.8 L90 310 L85 306.8 L80 310 L75 306.8 L70 310 L65 306.8 L60 310 L55 306.8 L50 310 L45 306.8 L40 310 L35 306.8 L30 310 L25 306.8 L20 310 L15 306.8 L10 310 L5 306.8 L0 310 L0 27 L3.5 24.5 L0 22 Z%22/%3E%3C/svg%3E") center/100% 100% no-repeat}
.bp-back{background:linear-gradient(90deg,#3A3F48,#0C0D10 30%,#0C0D10 70%,#3A3F48);transform:translateZ(-6px) scale(.995)}
.bp-body{overflow:hidden;transform:translateZ(0)}
.bp-body>*{position:absolute;inset:0;pointer-events:none}
.bp-base{background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),linear-gradient(172deg,#22262D 0%,#101216 34%,#0A0B0D 62%,#16191E 100%)}
.bp-seal{height:8.4%;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.18)),repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,rgba(0,0,0,.3) 1px 2.6px),linear-gradient(90deg,#2B3038,#1A1D22 50%,#2B3038)}
.bp-seal-t{bottom:auto;box-shadow:0 1px 0 rgba(255,255,255,.1),0 4px 8px rgba(0,0,0,.45)}
.bp-seal-b{top:auto;box-shadow:0 -1px 0 rgba(255,255,255,.08),0 -4px 8px rgba(0,0,0,.45)}
.bp-art{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:19% 12% 19%;text-align:center;font-family:var(--f-display);color:#F5F7FA}
.bp-top{font:700 clamp(7px,2vw,9px)/1 var(--f-display);letter-spacing:.42em;text-transform:uppercase;color:rgba(245,247,250,.62);margin-bottom:auto}
.bp-v{position:relative;width:52%;aspect-ratio:1;filter:drop-shadow(0 1px 0 rgba(255,255,255,.18)) drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.bp-v i{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.bp-vl{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 80%22%3E%3Cpath d=%22M6 10 L23 10 L43 60 L35 74 Z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 80%22%3E%3Cpath d=%22M6 10 L23 10 L43 60 L35 74 Z%22/%3E%3C/svg%3E");background:url(/assets/foil/shards.webp) calc(var(--mx,.5) * 220px) calc(var(--my,.5) * 220px)/120px,linear-gradient(125deg,#7CF7E4,#8A7CFF 30%,#FF7CC8 55%,#FFD27C 78%,#7CF7E4) calc(var(--mx,.5) * 100%) calc(var(--my,.5) * 100%)/260% 260%;background-blend-mode:overlay;filter:saturate(calc(.85 + var(--a,0) * .5)) brightness(calc(.95 + var(--a,0) * .15))}
.bp-vr{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 80%22%3E%3Cpath d=%22M57 10 L74 10 L46 74 L39 58 Z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 80%22%3E%3Cpath d=%22M57 10 L74 10 L46 74 L39 58 Z%22/%3E%3C/svg%3E");background:linear-gradient(115deg,#7E8794 0%,#C9CFD8 calc(var(--mx,.5) * 70%),#FFFFFF calc(var(--mx,.5) * 70% + 10%),#AEB6C1 calc(var(--mx,.5) * 70% + 26%),#6F7782 100%)}
.bp-word{margin-top:7%;font-weight:700;font-size:clamp(17px,5.4vw,23px);letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(110deg,#9BA3AF 0%,#E9EDF2 calc(var(--mx,.5) * 80%),#FFFFFF calc(var(--mx,.5) * 80% + 8%),#A9B1BC calc(var(--mx,.5) * 80% + 22%),#8A929E 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.bp-sub{font:600 clamp(7px,2vw,8.5px)/1.2 Inter,system-ui,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:rgba(245,247,250,.55)}
.bp-count{margin-top:auto;display:flex;align-items:baseline;gap:6px;font:700 clamp(8px,2.3vw,10px)/1 Inter,system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,247,250,.8)}
.bp-count b{font:700 clamp(14px,4vw,17px)/1 var(--f-display);letter-spacing:0;color:#F5F7FA}
.bp-ser{margin-top:6px;font:600 clamp(6px,1.7vw,7.5px)/1 Inter,system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,247,250,.38)}
.bp-pillow{background:radial-gradient(ellipse 80% 55% at calc(35% + var(--mx,.5) * 30%) 46%,rgba(255,255,255,.06),transparent 62%),linear-gradient(90deg,rgba(255,255,255,calc(.02 + (1 - var(--mx,.5)) * .1)),rgba(0,0,0,.5) 1.5%,rgba(0,0,0,0) 10%,rgba(0,0,0,0) 90%,rgba(0,0,0,.5) 98.5%,rgba(255,255,255,calc(.02 + var(--mx,.5) * .1))),linear-gradient(180deg,transparent 8.4%,rgba(0,0,0,.42) 9%,transparent 15%,transparent 85%,rgba(0,0,0,.42) 91%,transparent 91.6%)}
.bp-spec{mix-blend-mode:screen;background:radial-gradient(ellipse 55% 34% at calc(var(--lx,.5) * 100%) calc(var(--ly,.3) * 100%),rgba(255,255,255,.26),transparent 70%),linear-gradient(102deg,transparent calc(var(--mx,.5) * 100% - 22%),rgba(255,255,255,.07) calc(var(--mx,.5) * 100% - 6%),rgba(255,255,255,.12) calc(var(--mx,.5) * 100%),rgba(255,255,255,.05) calc(var(--mx,.5) * 100% + 8%),transparent calc(var(--mx,.5) * 100% + 22%))}
.bp-base { background: #0B0C0F; }
.bp-seal { background: url(/assets/foil/shards.webp) calc(var(--mx, .5) * 160px) 0/150px, linear-gradient(115deg, #AEBFD6, #D7C6E6 25%, #EFDCBC 50%, #C0E4D3 75%, #AEBFD6) calc(var(--mx, .5) * 100%) 50%/300% 100%; background-blend-mode: overlay; box-shadow: none !important; }
.bp-art { font-family: var(--f-display); color: #ECEBE6; padding: 17% 12% 15%; }
.bp-top { margin: 0 0 auto; width: 62%; color: #ECEBE6; }
.bp-top svg { display: block; width: 100%; height: auto; }
.bp-v { width: 46%; aspect-ratio: 5 / 7; filter: none; overflow: hidden; border-radius: 3%; }
.bp-v .bp-foil { position: absolute; inset: 0; -webkit-mask: none; mask: none; background: url(/assets/foil/shards.webp) calc(var(--mx, .5) * 120px) calc(var(--my, .5) * 120px)/120px, conic-gradient(from calc(var(--mx, .5) * 180deg) at calc(var(--mx, .5) * 100%) calc(var(--my, .5) * 100%), #AEBFD6, #D7C6E6, #EFDCBC, #C0E4D3, #A9C6E6, #DFC7DC, #F1E4C6, #B5D3DF, #AEBFD6); background-blend-mode: overlay; }
.bp-v svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #15171B; }
.bp-word { margin-top: 8%; font-family: var(--f-display); font-weight: 500; font-stretch: 122%; font-size: clamp(17px, 5.4vw, 22px); letter-spacing: .01em; text-transform: none; background: none; -webkit-text-fill-color: #ECEBE6; color: #ECEBE6; }
.bp-sub { margin-top: 5%; font: 400 clamp(6.5px, 1.9vw, 8px)/1.2 var(--f-text); letter-spacing: .06em; color: #979CA3; }
.bp-count { font: 400 clamp(8px, 2.2vw, 9.5px)/1 var(--f-text); letter-spacing: .06em; color: #ECEBE6; }
.bp-count b { font: 500 clamp(12px, 3.6vw, 15px)/1 var(--f-display); }
.bp-ser { font: 400 clamp(6px, 1.7vw, 7.5px)/1 var(--f-text); letter-spacing: .06em; color: #979CA3; }
.bp-art { padding: 17% 12% 15%; }
.bp-top svg { color: #ECEBE6; }
.bp-shadow { bottom: -6%; }
/* Kanten im Licht: feiner heller Saum innen, Streiflicht an der dem Licht zugewandten Seite, heller Umriss gegen dunklen Grund */
.bp-rim { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), inset 0 2px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(255, 255, 255, .12);
  background: linear-gradient(90deg, rgba(255, 255, 255, calc(.10 + (1 - var(--mx, .5)) * .30)) 0, rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, 0) 96%, rgba(255, 255, 255, calc(.10 + var(--mx, .5) * .30)) 100%),
              linear-gradient(180deg, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, 0) 2.5%, rgba(255, 255, 255, 0) 97.5%, rgba(255, 255, 255, .14) 100%); }
.mp-pack { filter: drop-shadow(0 0 .6px rgba(255, 255, 255, .55)) drop-shadow(0 26px 30px rgba(17, 19, 24, .35)); }
:root[data-theme="dark"] .mp-pack { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .7)) drop-shadow(0 0 18px rgba(190, 200, 255, .16)) drop-shadow(0 26px 30px rgba(0, 0, 0, .55)); }

/* Sportarten: Golf mit Erklärung, 9 Kacheln, Text passt immer */
.sport-live .sport-sub { font-weight: 600; color: var(--fg); }
.sport-live .more { font-weight: 600; color: var(--fg); margin-top: var(--s2); }
.sport-live:hover .more { text-decoration: underline; text-underline-offset: 4px; }
.sports .sport { min-width: 0; min-height: 116px; padding: var(--s4) var(--s4) var(--s4); }
.sports .h3 { font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
@media (min-width: 960px) { .sports { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 380px) { .sports { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); } .sports .sport { padding: var(--s3); } }

/* Galerie mit Auswahl Sportart */
.pick { display: grid; gap: var(--s2); margin-top: var(--s8); max-width: 420px; }
.pick label { font: 600 15px var(--f-text); }
.select { position: relative; }
.select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--fg); border-bottom: 2px solid var(--fg); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.select select { width: 100%; height: 52px; padding: 0 44px 0 18px; border-radius: var(--r-field); border: 1px solid var(--line-strong); background: var(--bg); color: var(--fg); font: 500 17px var(--f-text); -webkit-appearance: none; appearance: none; cursor: pointer; }
.select select:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.levels { margin-top: var(--s8); }
.levels li { justify-items: center; text-align: center; }
button.lv { display: block; width: 100%; margin: 0 0 var(--s3); cursor: zoom-in; font: inherit; color: inherit; transition: transform var(--t) var(--ease), box-shadow var(--t); }
button.lv:hover { transform: translateY(-3px); }
button.lv svg { display: block; width: 100%; height: auto; border-radius: 4.72% / 3.37%; box-shadow: var(--shadow-card); }
/* Vergrössern */
.zoom { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgba(17, 19, 24, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity 200ms var(--ease); }
.zoom.in { opacity: 1; }
.zoom[hidden] { display: none; }
.zoom-box { display: grid; gap: var(--s3); justify-items: center; width: min(440px, 100%); max-height: 100%; padding: var(--s4) var(--s4) var(--s6); border-radius: var(--r-box); background: radial-gradient(120% 80% at 50% 0%, var(--white), var(--soft) 70%); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .zoom-box { background: radial-gradient(120% 80% at 50% 0%, #2A2E36, #1A1D23 70%); }
.zoom-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-left: var(--s2); font-weight: 600; }
.zoom-x { font-size: 18px; }
.zoom-card { width: min(100%, calc((100dvh - 180px) * .714)); touch-action: none; }
.zoom-card svg { display: block; width: 100%; height: auto; border-radius: 4.72% / 3.37%; box-shadow: var(--shadow-card); }
.zoom-open, .zoom-open body { overflow: hidden; }

/* Leistung: 3D-Karte */
.perf-stage { display: grid; justify-items: center; gap: var(--s4); }
.perf-card { position: relative; width: min(78vw, 380px); aspect-ratio: 635 / 889; perspective: 1600px; touch-action: pan-y; }
.perf-card > img { width: 100%; border-radius: 4.72% / 3.37%; box-shadow: var(--shadow-card); }
.card3d {
  --t: 3px;                 /* Kartendicke, setzt HOLO3D passend zur Grösse */
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.card3d:focus-visible::after { content: ""; position: absolute; inset: -10px; border-radius: 24px; border: 2px solid #8A7CFF; pointer-events: none; }
.card3d-rot { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.card3d-face {
  position: absolute; inset: 0;
  border-radius: 4.72% / 3.37%;
  overflow: hidden;
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(calc(var(--t) / 2));
  background: #0D0C1A;
  box-shadow: 0 28px 60px rgba(0, 0, 0, .5);
}
.card3d-face.is-back { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }
.card3d-face > svg { display: block; width: 100%; height: 100%; }
.card3d-face > span { position: absolute; inset: 0; pointer-events: none; }
/* Folienebenen erst zeigen, wenn ihre Maske fertig ist (sonst läge die Folie kurz über der ganzen Karte) */
.card3d .cf-foil, .card3d .cf-glint, .card3d .cf-fairway { visibility: hidden; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.card3d.has-mask .cf-foil, .card3d.has-mask .cf-glint, .card3d.has-mask .cf-fairway { visibility: visible; }
/* Folie: Beugungsfarben, die sich mit dem Winkel verschieben; die Facetten der Prägung brechen sie auf */
.cf-foil {
  opacity: var(--fi, 0);
  mix-blend-mode: overlay;
  background-image: url("/assets/foil/facets.webp"),
    repeating-linear-gradient(118deg, #FF8FBA 0%, #B79DFF 7%, #7FCBFF 14%, #6CEBC6 21%, #F6E58A 28%, #FF8FBA 35%);
  background-size: 30% auto, 260% 260%;
  background-position: 0 0, var(--fx, 50%) var(--fy, 50%);
  background-blend-mode: overlay, normal;
}
/* Reverse Holo: Kartenfläche um die Landschaft mit Fairway-Folie (Mähstreifen), dezent wie im Album.
   Nur die Streifen, ohne zusätzlichen Regenbogen (der färbte die ganze Fläche statt die Streifen zu zeigen). */
.cf-fairway {
  opacity: calc(var(--fi, 0) * .35);
  mix-blend-mode: screen;
  background-image: url("/assets/foil/fairway.webp");
  background-size: 70% auto;
}
/* Glitzer: einzelne Facetten blitzen auf, wenn ein schmales Lichtband über sie wandert (nur im Spiegelwinkel) */
.cf-glint {
  opacity: var(--gi, 0);
  mix-blend-mode: screen;
  background-image: url("/assets/foil/glints.webp"),
    linear-gradient(118deg, rgba(255,255,255,0) 44%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 56%);
  background-size: 30% auto, 300% 300%;
  background-position: 0 0, var(--bx, 50%) var(--by, 50%);
  background-blend-mode: multiply, normal;
}
/* Glanz der Laminierung: weiches Studiolicht, wandert gegenläufig zur Drehung */
.cf-gloss {
  opacity: var(--go, 0);
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 62% 48% at var(--gx, 30%) var(--gy, 20%),
    rgba(255, 255, 255, .30), rgba(255, 255, 255, .09) 45%, rgba(255, 255, 255, 0) 72%);
}
/* Schattierung: Seite wird dunkler, je weiter sie sich vom Licht wegdreht */
.cf-shade { background: #000; opacity: var(--sh, 0); }
/* Kartenkante: dünne Lagen zwischen den Seiten, sichtbar beim Neigen */
.card3d-edge { position: absolute; inset: 0; transform-style: preserve-3d; }
.card3d-edge i { position: absolute; inset: 0; border-radius: 4.72% / 3.37%; background: linear-gradient(90deg, #6E747C, #8F959D 50%, #6E747C); }


.card3d { cursor: default; }
.card3d-face { box-shadow: 0 30px 60px -24px rgba(17, 19, 24, .45); }

/* Golf Buddies */
.buddies { display: grid; gap: var(--s6); margin-top: var(--s12); }
.buddies .head p { color: var(--fg-2); }
.pc { margin: 0; display: grid; gap: var(--s3); justify-items: center; text-align: center; }
.pc-card { width: min(70vw, 280px); }
.pc-card svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 26px rgba(17, 19, 24, .3)); }
.pc figcaption { display: grid; gap: var(--s1); }
.pc figcaption span { color: var(--muted); font-size: 15px; max-width: 30ch; }
@media (min-width: 860px) { .buddies { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s8); } }

/* Feinschliff 06.11. */
.stats { grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr)); }
.stats dd { white-space: nowrap; font-size: clamp(1.25rem, 2.2vw, 2rem); }
@media (max-width: 520px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .sport-live { grid-template-columns: minmax(0, 1fr); padding: var(--s6); }
  .sport-live img { width: 128px; justify-self: end; margin-top: calc(-1 * var(--s4)); }
}

/* ==========================================================================
   PROLATIQ-Marke (07.11.2026): Zeichen «Rang» (Holo-Karte mit drei Rangwinkeln
   und Raute) neben dem Schriftzug; Hauptknöpfe in Perlmutt-Holofolie.
   ========================================================================== */
:root {
  --holo-btn: linear-gradient(115deg, #C3CAD4 0%, #EEF1F5 16%, #D8D1EE 32%, #F6F7F9 46%, #F0D9E4 60%, #D3ECE4 76%, #E3E9F1 88%, #C3CAD4 100%);
  --holo-ink: #0E1014;
}
.home { gap: 10px; text-decoration: none; }
.home .mk { width: 20px; height: 28px; flex: none; filter: drop-shadow(0 1px 2px rgba(17, 19, 24, .2)); }
.wm { width: auto; height: auto; font: 700 15px/1 var(--f-display); letter-spacing: .2em; margin-right: -.2em; color: var(--fg); }
@media (max-width: 460px) { .home { gap: 7px; } .wm { font-size: 13px; letter-spacing: .1em; margin-right: 0; } .home .mk { width: 16px; height: 22px; } .top .w { gap: var(--s3); } }
@media (max-width: 360px) { .wm { display: none; } }
.bp-top { width: auto; font: 700 clamp(7px, 2.1vw, 9.5px)/1 var(--f-display); letter-spacing: .42em; margin-right: -.42em; color: #ECEBE6; }
.fwm { font: 700 clamp(40px, 12vw, 168px)/1 var(--f-display); letter-spacing: .14em; margin-right: -.14em; text-align: center; white-space: nowrap; overflow: hidden; color: var(--line-strong); user-select: none; }

/* Holo-Knöpfe: Regenbogenfolie, die langsam wandert; Glanzstreifen beim Darüberfahren */
.btn:not(.secondary), .pill:not(.secondary), .btn-primary {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--holo-btn) 0% 50% / 260% 100%; border-color: transparent; color: var(--holo-ink) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), 0 0 0 1px rgba(94, 102, 114, .28), 0 10px 22px -14px rgba(17, 19, 24, .45);
  animation: holoBtn 9s ease-in-out infinite;
}
:root[data-theme="dark"] .btn.green { background: var(--holo-btn) 0% 50% / 260% 100%; border-color: transparent; color: var(--holo-ink); }
.btn:not(.secondary)::after, .pill:not(.secondary)::after, .btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .7) 48%, transparent 64%);
  transform: translateX(-130%); transition: transform .9s var(--ease, ease);
}
.btn:not(.secondary):hover, .pill:not(.secondary):hover, .btn-primary:hover { opacity: 1; filter: saturate(1.2) brightness(1.03); }
.btn:not(.secondary):hover::after, .pill:not(.secondary):hover::after, .btn-primary:hover::after { transform: translateX(130%); }
@keyframes holoBtn { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .btn:not(.secondary), .pill:not(.secondary), .btn-primary { animation: none; }
  .btn:not(.secondary)::after, .pill:not(.secondary)::after, .btn-primary::after { display: none; }
}
@media (max-width: 440px) { .wm { font-size: 12px; letter-spacing: .06em; } .home { gap: 6px; } .tools { gap: 0; } .tbtn { padding-inline: 8px; min-width: 34px; } .pill { padding-inline: 12px; } }

/* Perlmutt-Folie und gekipptes Zeichen (07.11.2026, ersetzt «Rang») */
.home .mk { width: 26px; height: 26px; }
@media (max-width: 460px) { .home .mk { width: 22px; height: 22px; } }
.bp-v { width: 58%; aspect-ratio: 1; border-radius: 0; }
.bp-v svg { fill: #0B0C0F; }
:root[data-theme="dark"] .btn.green { background: var(--holo-btn) 0% 50% / 260% 100%; }

/* Über Prolatiq: Herkunft des Namens (07.11.2026) */
.name-roots { display: flex; align-items: center; justify-content: center; gap: var(--s4); margin: var(--s4) 0 var(--s2); flex-wrap: wrap; }
.name-roots > span:not(.plus) { display: grid; gap: 6px; justify-items: center; padding: 18px 26px; border-radius: var(--r-card); background: var(--bg); border: 1px solid var(--line); min-width: 160px; }
.name-roots b { font: 600 clamp(22px, 3vw, 28px)/1 var(--f-display); letter-spacing: -.01em; font-style: italic; }
.name-roots i { font: 500 14px/1.3 var(--f-text); font-style: normal; color: var(--muted); }
.name-roots .plus { font: 300 28px/1 var(--f-display); color: var(--muted); }
.name-more { margin: var(--s6) 0 0; max-width: 640px; color: var(--muted); font-size: 16px; line-height: 1.6; }
@media (max-width: 520px) {
  .name-roots { gap: var(--s2); flex-wrap: nowrap; }
  .name-roots > span:not(.plus) { min-width: 0; flex: 1 1 0; padding: 14px 10px; }
  .name-roots b { font-size: 20px; }
  .name-roots i { font-size: 12px; text-align: center; }
  .name-roots .plus { font-size: 20px; }
}
.bp-v svg { inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); }
@media (max-width: 400px) { .name-roots b { font-size: 17px; } .name-roots > span:not(.plus) { padding: 12px 8px; } }