/* =====================================================================
   TV 03 Ramstein — Variante 4 "Arena Light"
   Die sportliche Arena-Optik (Versal-Kursiv, schräge Kanten, nummerierte
   Kacheln) in hell und frisch: Weiß, Himmelblau, Vereinsblau.
   ===================================================================== */
:root {
  --background: #f6fafd;
  --foreground: #0b2236;
  --card: #ffffff;
  --tint: #e7f1f8;
  --tint-2: #d4e4ed;
  --sky: #8fd0f5;
  --primary: #3498db;
  --icon-tint: brightness(0) saturate(100%) invert(64%) sepia(30%) saturate(5756%) hue-rotate(177deg) brightness(91%) contrast(87%); /* färbt schwarze Icons in --primary */
  --primary-deep: #1f6fa8;
  --secondary: #d4e4ed;
  --muted: #56697a;
  --accent: #2980ac;
  --red: #d00000;
  --border: #d3e2ec;
  --line: rgba(52, 152, 219, .16);
  --shadow: 0 18px 40px -22px rgba(20, 70, 120, .35);
  --glow: 0 0 0 1px rgba(52,152,219,.35), 0 18px 40px -14px rgba(52,152,219,.55);
  --font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --cut: 3.5vw;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 7.5rem; }
body { margin: 0; overflow-x: hidden; background: var(--background); color: var(--foreground); font-family: var(--font); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 800; }
::selection { background: var(--primary); color: #fff; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.wrap { width: 100%; max-width: 82rem; margin: 0 auto; padding: 0 20px; }
.icon { width: 1rem; height: 1rem; flex: none; }
.icon-lg { width: 1.6rem; height: 1.6rem; margin-bottom: 1.25rem; color: var(--primary); }

/* ---------- buttons (slanted) ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  height: 2.5rem; padding: 0 1.3rem; border: 0;
  clip-path: polygon(.6rem 0, 100% 0, calc(100% - .6rem) 100%, 0 100%);
  font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, color .2s, transform .2s;
}
.btn-lg { height: 3.25rem; padding: 0 2.1rem; font-size: .9rem; }
.btn-club { background: var(--primary); color: #fff; }
.btn-club:hover { background: var(--red); }
.btn-outline { background: rgba(255,255,255,.7); color: var(--primary-deep); box-shadow: inset 0 0 0 2px rgba(52,152,219,.45); }
.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-light { background: #fff; color: var(--primary-deep); }
.btn-light:hover { background: var(--red); color: #fff; }
.btn .icon { transition: transform .2s; }
.btn:hover .icon { transform: translate(2px, -2px); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .86); border-bottom: 1px solid var(--border); backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--primary), var(--sky), transparent); opacity: .8; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .7rem; padding-bottom: .7rem; }
.brand { display: flex; align-items: center; gap: .75rem; flex: none; text-decoration: none; }
.brand img { width: 2.8rem; height: 2.8rem; object-fit: contain; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.brand:hover img { transform: rotate(-8deg) scale(1.06); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { color: var(--primary); font-size: 1.05rem; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.brand-text span { color: var(--muted); font-size: .7rem; letter-spacing: .04em; }
.nav-desktop { display: none; align-items: center; gap: 2.2rem; }
.nav-desktop a { position: relative; padding: .4rem 0; color: var(--foreground); font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: color .2s; }
.nav-desktop a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--primary); transform: scaleX(0) skewX(-20deg); transform-origin: right; transition: transform .3s ease; }
.nav-desktop a:hover { color: var(--primary); }
.nav-desktop a:hover::after, .nav-desktop a[aria-current]::after { transform: scaleX(1) skewX(-20deg); transform-origin: left; }
.nav-desktop a[aria-current] { color: var(--primary); }
.header-cta { display: none; gap: .6rem; align-items: center; }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.menu-button { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--border); background: #fff; color: var(--primary-deep); cursor: pointer; }
.menu-button:hover { background: var(--tint); }
.nav-toggle:focus-visible ~ .site-header .menu-button { outline: 2px solid var(--primary); }
.icon-close { display: none; }
.nav-toggle:checked ~ .site-header .icon-open { display: none; }
.nav-toggle:checked ~ .site-header .icon-close { display: block; }
.menu-button .icon { width: 1.25rem; height: 1.25rem; }
.nav-mobile { display: none; padding: .5rem 20px 1.5rem; border-top: 1px solid var(--border); background: #fff; }
.nav-toggle:checked ~ .site-header .nav-mobile { display: block; }
.nav-mobile a { display: block; padding: .95rem 0; border-bottom: 1px solid var(--border); font-size: 1.1rem; font-style: italic; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.nav-mobile a[aria-current] { color: var(--primary); }
.nav-mobile a.nav-mobile-cta { border-bottom: 0; color: var(--primary); }

/* ---------- type helpers ---------- */
.kicker { display: inline-flex; align-items: center; gap: .6rem; color: var(--primary); font-size: .75rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.kicker::before { content: ""; width: 1.8rem; height: 3px; background: currentColor; transform: skewX(-20deg); }
.kicker-light { color: var(--primary); }
.lead { max-width: 34rem; margin-top: 1.5rem; color: var(--muted); font-size: 1.15rem; line-height: 1.7; }
h2 { color: var(--foreground); font-size: clamp(2.3rem, 5.5vw, 4rem); font-style: italic; font-weight: 900; line-height: .98; letter-spacing: -.02em; text-transform: uppercase; }
h2 em, h1 em { font-style: inherit; color: var(--primary); }
.kicker + h2 { margin-top: 1rem; }

/* ---------- hero (full bleed, light wash) ---------- */
.hero {
  position: relative; display: flex; align-items: flex-end; min-height: min(90vh, 54rem); overflow: hidden; isolation: isolate;
  background: var(--tint);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.18) translate(-2%, -1%); } }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(246,250,253,.97) 0%, rgba(246,250,253,.88) 38%, rgba(246,250,253,.35) 70%, rgba(246,250,253,.05) 100%),
  linear-gradient(0deg, rgba(246,250,253,.9) 0%, transparent 35%),
  radial-gradient(36rem 26rem at 90% 10%, rgba(143,208,245,.45), transparent 60%); }
.hero::after { content: "TV 03"; position: absolute; right: 4.5vw; top: 50%; z-index: -1; transform: translateY(-55%); white-space: nowrap; word-spacing: .08em;
  color: transparent; -webkit-text-stroke: 3px rgba(255,255,255,.85); font-size: clamp(7rem, 16vw, 16rem); font-style: italic; font-weight: 900; line-height: 1; letter-spacing: -.05em;
  filter: drop-shadow(0 6px 20px rgba(20,70,120,.25)); }
.hero-inner { width: 100%; padding-top: 6rem; padding-bottom: calc(4.5rem + var(--cut)); }
.hero-text { max-width: 48rem; }
h1 { margin-top: 1.25rem; color: var(--foreground); font-size: clamp(3.2rem, 10vw, 7.5rem); font-style: italic; font-weight: 900; line-height: .9; letter-spacing: -.035em; text-transform: uppercase; }
h1 em { background: linear-gradient(100deg, var(--primary) 20%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .2em; margin-right: -.2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero .lead { color: #33475a; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.scroll-cue { position: absolute; right: 2rem; bottom: calc(var(--cut) + 2rem); display: none; flex-direction: column; align-items: center; gap: .6rem; color: #fff; font-size: .65rem; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; writing-mode: vertical-rl; text-decoration: none; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.scroll-cue::after { content: ""; width: 2px; height: 3.5rem; background: linear-gradient(#fff, transparent); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (max-width: 767px) {
  .hero::before { background: linear-gradient(180deg, rgba(246,250,253,.72) 0%, rgba(246,250,253,.93) 40%, rgba(246,250,253,.97) 100%); }
  .hero::after { display: none; }
}

/* ---------- stats strip ---------- */
.stats { position: relative; z-index: 2; margin-top: calc(-1 * var(--cut) - 2.5rem); }
.stats-row { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--primary); color: #fff; box-shadow: 0 26px 50px -24px rgba(31,111,168,.6); clip-path: polygon(1.25rem 0, 100% 0, calc(100% - 1.25rem) 100%, 0 100%); }
.stat { padding: 1.5rem 1.4rem; border-right: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(255,255,255,.25); }
.stat strong { display: block; font-size: clamp(2rem, 4vw, 2.9rem); font-style: italic; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.stat span { display: block; margin-top: .4rem; color: rgba(255,255,255,.85); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.stat:first-child { padding-left: 2.1rem; }
.stat-dark { background: #fff; color: var(--primary); }
.stat-dark span { color: var(--muted); }

/* ---------- sections ---------- */
.section { position: relative; padding: 5.5rem 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.section-note { max-width: 24rem; color: var(--muted); }

/* sport: light tinted band with grid */
#sport { clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%); padding: calc(6rem + var(--cut)) 0 calc(6rem + var(--cut)); margin-top: 3rem;
  background: radial-gradient(45rem 28rem at 0% 0%, rgba(143,208,245,.45), transparent 60%), radial-gradient(40rem 25rem at 100% 100%, rgba(52,152,219,.14), transparent 60%), linear-gradient(var(--tint), #f1f7fb); }
#sport::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 4rem 4rem; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 50% 30%, #000, transparent 70%); pointer-events: none; }
.cards { position: relative; display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 3rem; }
.card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 14rem; padding: 1.6rem;
  overflow: hidden; isolation: isolate;
  border: 1px solid var(--border); background: #fff; color: var(--foreground); text-decoration: none; box-shadow: 0 2px 6px rgba(20,70,120,.05);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s, color .3s;
}
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, var(--primary), var(--accent)); clip-path: circle(0% at 100% 0%); transition: clip-path .55s cubic-bezier(.7,0,.2,1); }
.card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--glow); color: #fff; }
.card:hover::before { clip-path: circle(150% at 100% 0%); }
.card-top { display: flex; align-items: flex-start; justify-content: flex-end; }
.card-top .icon { width: 1.5rem; height: 1.5rem; color: var(--primary); transition: transform .3s, color .3s; }
.card:hover .card-top .icon { transform: rotate(45deg); color: #fff; }
.card h3 { font-size: 1.9rem; font-style: italic; font-weight: 900; letter-spacing: -.01em; text-transform: uppercase; }
.card p { margin-top: .25rem; color: var(--muted); font-size: .85rem; font-weight: 600; letter-spacing: .04em; transition: color .3s; }
.card:hover p { color: rgba(255,255,255,.9); }
.card-icon { position: absolute; left: 1.4rem; top: 1.3rem; width: 6.25rem; height: 6.25rem; object-fit: contain; filter: var(--icon-tint); transition: opacity .3s, transform .45s cubic-bezier(.3,1.6,.5,1), filter .3s; }
.card:hover .card-icon { transform: scale(1.1) rotate(-6deg); filter: brightness(0) invert(1); }
.card-icon-logo { width: 8.3rem; height: auto; filter: hue-rotate(170deg); }
.card:hover .card-icon-logo { filter: grayscale(1) invert(1); }
.card-join { background: var(--primary); border-color: transparent; color: #fff; }
.card-join::after { content: "→"; position: absolute; right: 1.2rem; bottom: -1.5rem; z-index: -1; color: rgba(255,255,255,.22); font-size: 9rem; font-weight: 900; line-height: 1; }
.card-join::before { background: linear-gradient(160deg, var(--red), #a00000); }
.card-join h3 { font-size: 2.6rem; }
.card-join p, .card-join .card-top .icon { color: #fff; }
.card-hall { background: linear-gradient(180deg, rgba(31,111,168,.55), rgba(11,34,54,.92)), url("../../images/aussenansicht.jpg") center / cover; }
.card-hall .card-top { justify-content: space-between; align-items: center; }
.card-hall h3 { line-height: 1; }
.card-hall p { font-weight: 500; letter-spacing: 0; line-height: 1.45; }
.card-badge { padding: .25rem .55rem; background: var(--red); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transform: skewX(-10deg); }
.card-cta { display: inline-block; margin-top: .9rem; padding-bottom: 2px; border-bottom: 2px solid #fff; font-size: .85rem; font-weight: 800; }

/* club */
.club-grid { display: grid; gap: 3rem; }
.club-image { position: relative; }
.club-image img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; clip-path: polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%); }
.club-image::before { content: ""; position: absolute; left: -1rem; top: -1rem; width: 40%; height: 40%; border-left: 4px solid var(--primary); border-top: 4px solid var(--primary); }
.club-image::after { content: "Seit 1903"; position: absolute; right: 0; bottom: 0; padding: .7rem 1.2rem; background: var(--primary); color: #fff; font-size: .8rem; font-style: italic; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.text-link { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.9rem; color: var(--foreground); font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.text-link .icon { display: grid; width: 2.2rem; height: 2.2rem; padding: .55rem; background: var(--primary); color: #fff; clip-path: polygon(.35rem 0, 100% 0, calc(100% - .35rem) 100%, 0 100%); transition: background-color .2s, transform .2s; }
.text-link:hover { color: var(--primary); }
.text-link:hover .icon { background: var(--red); transform: translateX(3px); }
.link-row { display: flex; flex-wrap: wrap; gap: 0 2.25rem; }

/* teamshop */
.teamshop { position: relative; overflow: hidden; isolation: isolate; padding: 5rem 0; background: linear-gradient(110deg, var(--primary), #45aee8); color: #fff; clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); }
.teamshop::before { content: "JAKO × TV 03 · JAKO × TV 03 · JAKO × TV 03 · "; position: absolute; left: 0; top: 50%; z-index: -1; transform: translateY(-50%); white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.3); font-size: clamp(5rem, 14vw, 11rem); font-style: italic; font-weight: 900; line-height: 1; animation: slide 30s linear infinite; }
@keyframes slide { to { transform: translate(-50%, -50%); } }
.teamshop-row { display: flex; flex-direction: column; gap: 1.75rem; }
.teamshop .kicker { color: #fff; }
.teamshop h2 { margin-top: .6rem; color: #fff; font-size: clamp(2rem, 5vw, 3.5rem); }
.teamshop p:last-child { margin-top: .6rem; color: rgba(255,255,255,.9); }

/* contact */
#kontakt { padding-bottom: 6rem; background: linear-gradient(180deg, #fff, var(--background)); }
.contact-grid { display: grid; gap: 3rem; }
.contact-grid .lead { max-width: 28rem; }
.contact-details { display: grid; gap: 1rem; }
.contact-details > div { position: relative; padding: 2rem; border: 1px solid var(--border); border-top: 4px solid var(--primary); background: #fff; box-shadow: var(--shadow); transition: transform .3s, box-shadow .3s; }
.contact-details > div:hover { transform: translateY(-4px); box-shadow: var(--glow); }
.contact-details h3 { color: var(--foreground); font-size: 1.1rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.contact-details address, .contact-details a { display: block; margin-top: .75rem; color: var(--muted); font-style: normal; line-height: 1.6; text-underline-offset: 4px; overflow-wrap: anywhere; }
.contact-details a:hover { color: var(--primary); text-decoration: underline; }

/* footer */
.site-footer { position: relative; padding: 2.25rem 0; background: var(--tint); color: var(--muted); font-size: .85rem; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--sky)); }
.footer-row { display: flex; flex-direction: column; gap: 1.25rem; }
.footer-row > span { color: var(--primary-deep); font-style: italic; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.footer-links a { font-weight: 600; text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--primary); }

/* ---------- scroll reveal (only when JS is active) ---------- */
.js .reveal { opacity: 0; transform: translateY(30px) skewY(1.5deg); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.js .hero .reveal { transform: translateX(-40px); }
.js .hero .reveal.in { transform: none; }

/* ---------- responsive ---------- */
@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .stats-row { grid-template-columns: repeat(4, 1fr); }
  .stat { border-bottom: 0; }
  .contact-details { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .wrap { padding-left: 2rem; padding-right: 2rem; }
  .nav-mobile { padding-left: 2rem; padding-right: 2rem; }
  .footer-row { flex-direction: row; align-items: center; justify-content: space-between; }
  .scroll-cue { display: flex; }
}
@media (min-width: 1024px) {
  .wrap { padding-left: 3rem; padding-right: 3rem; }
  .nav-mobile { padding-left: 3rem; padding-right: 3rem; }
  .nav-desktop, .header-cta { display: flex; }
  .menu-button, .nav-toggle:checked ~ .site-header .nav-mobile { display: none; }
  .section { padding: 7rem 0; }
  .cards { grid-template-columns: repeat(4, 1fr); }
  .card { min-height: 16rem; }
  .club-grid { grid-template-columns: 1.1fr .9fr; gap: 6rem; align-items: center; }
  .teamshop-row { flex-direction: row; align-items: center; justify-content: space-between; }
  .contact-grid { grid-template-columns: 1fr 1.1fr; gap: 5rem; align-items: center; }
}

/* ---------- sub navigation ---------- */
.subnav { background: #fff; border-bottom: 1px solid var(--border); }
.subnav .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.75rem; padding-top: .6rem; padding-bottom: .6rem; }
.subnav a { padding: .3rem 0; border-bottom: 3px solid transparent; color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: color .2s, border-color .2s; }
.subnav a:hover { color: var(--primary); }
.subnav a.current { border-bottom-color: var(--primary); color: var(--primary-deep); }
.subnav-home { display: none; position: sticky; top: 4.3rem; z-index: 25; }
body:has(#sport:target) .subnav-sport,
body:has(#verein:target) .subnav-verein { display: block; }

/* ---------- subpages: hero ---------- */
.page { position: relative; padding: 0 0 5rem; }
.page-hero {
  position: relative; overflow: hidden; isolation: isolate; margin-bottom: 1rem;
  padding: clamp(3rem, 7vw, 5rem) 0 calc(3.5rem + var(--cut));
  background: linear-gradient(120deg, #f6fbff 0%, #dcedf9 55%, #bfe0f6 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(38rem 22rem at 88% 0%, rgba(143,208,245,.65), transparent 65%),
  repeating-linear-gradient(115deg, rgba(52,152,219,.07) 0 2px, transparent 2px 26px); }
.page-hero::after { content: "TV 03"; position: absolute; right: 2vw; bottom: calc(var(--cut) + .5rem); z-index: -1; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.9); white-space: nowrap;
  font-size: clamp(5.5rem, 15vw, 13rem); font-style: italic; font-weight: 900; line-height: 1; letter-spacing: -.05em; filter: drop-shadow(0 6px 18px rgba(20,70,120,.18)); }
.page-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.page-hero-text { min-width: 0; max-width: 46rem; }
.page-hero h1 { width: fit-content; max-width: 100%; margin-top: 1rem; font-size: clamp(2.6rem, 9vw, 5.6rem); line-height: .92; overflow-wrap: anywhere; }
.page-hero h1::after { content: ""; display: block; width: 100%; height: 6px; margin-top: 1.1rem; background: var(--primary); transform: skewX(-20deg); }
.page-tagline { margin-top: 1.4rem; max-width: 36rem; color: var(--primary-deep); font-size: clamp(1.1rem, 2.6vw, 1.55rem); font-style: italic; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.page-lead { max-width: 34rem; margin-top: 1rem; color: #33475a; font-size: 1.15rem; line-height: 1.65; }
.page-hero-badge { display: none; flex: none; place-items: center; width: clamp(9rem, 18vw, 12.5rem); aspect-ratio: 1; margin-right: 2vw;
  background: linear-gradient(150deg, var(--primary), var(--accent)); clip-path: polygon(24% 0, 100% 0, 76% 100%, 0 100%); }
.page-hero-badge img { width: 56%; height: auto; filter: invert(1); }
.page-hero-badge .badge-logo { width: 64%; filter: grayscale(1) invert(1); }
@media (min-width: 768px) { .page-hero-badge { display: grid; } }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.chips a { max-width: 100%; padding: .5rem 1rem; overflow: hidden; background: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1px rgba(52,152,219,.35); color: var(--primary-deep);
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  clip-path: polygon(.45rem 0, 100% 0, calc(100% - .45rem) 100%, 0 100%); transition: background-color .2s, color .2s; }
.chips a:hover { background: var(--primary); color: #fff; }

/* ---------- subpages: content ---------- */
.article { position: relative; display: grid; gap: 1.25rem; max-width: 58rem; margin: 0 auto; }
.article > * { min-width: 0; }
.intro { padding: 1.75rem 1.5rem; border-left: 5px solid var(--primary); background: linear-gradient(135deg, rgba(212,228,237,.75), rgba(255,255,255,.95)); box-shadow: var(--shadow); font-size: 1.08rem; }
.intro > :last-child, .sec > :last-child { margin-bottom: 0; }
.intro-title { margin: 0 0 1rem; font-size: clamp(1.25rem, 3vw, 1.8rem); font-style: italic; font-weight: 900; line-height: 1.15; text-transform: uppercase; }
.article-bare .intro { padding: 0; border: 0; background: none; box-shadow: none; }
.plain > :last-child { margin-bottom: 0; }
.sec { position: relative; padding: 2rem 1.5rem 1.6rem 1.75rem; border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow); }
.sec::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 5px; background: linear-gradient(var(--primary), var(--sky)); }
.sec h2 { display: flex; align-items: baseline; gap: .9rem; margin: 0 0 1.1rem; color: var(--foreground); font-size: clamp(1.3rem, 3.2vw, 1.95rem); font-style: italic; font-weight: 900;
  letter-spacing: -.01em; line-height: 1.1; overflow-wrap: anywhere; text-transform: uppercase; }
.article h3 { margin: 1.6em 0 .45em; color: var(--primary); font-size: 1.05rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.article h4 { margin: 1.2em 0 .3em; color: var(--accent); font-size: 1.05rem; }
.article p, .article li { line-height: 1.75; }
.article p { margin: 0 0 1em; }
.article ul, .article ol { margin: 0 0 1em; padding-left: 1.4rem; }
.article li::marker { color: var(--primary); }
.article a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.article a:hover { color: var(--red); }
.article img { max-width: 100%; height: auto; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .75rem; margin: 1rem 0; }
.gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%); }
.gallery:has(> img:only-child) img { height: auto; aspect-ratio: auto; }
.table-wrap { margin: 1rem 0; overflow-x: auto; border: 1px solid var(--border); -webkit-overflow-scrolling: touch; }
.article table { width: 100%; max-width: none; border-collapse: collapse; }
.article th { padding: .7rem 1rem; background: var(--primary); color: #fff; font-size: .8rem; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.article td { padding: .7rem 1rem; border-top: 1px solid var(--border); vertical-align: top; text-align: left; }
.article tbody tr:nth-child(even) { background: #f6fafd; }
.article table img { max-width: 100%; }
.table-wrap:not(:has(th)) { border: 0; }
.table-wrap:not(:has(th)) tbody tr:nth-child(even) { background: none; }
.table-wrap:not(:has(th)) td { padding: .5rem .75rem .5rem 0; border-top: 0; }

.benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; margin: 1rem 0; }
.benefit { padding: 1.25rem 1.25rem .5rem; border-top: 4px solid var(--primary); background: var(--tint); transition: transform .3s, box-shadow .3s; }
.benefit:hover { transform: translateY(-4px); box-shadow: var(--glow); }
.benefit h3 { margin-top: 0; }
.sec-cta { border: 0; background: linear-gradient(110deg, var(--primary), #45aee8); color: #fff; }
.sec-cta::before { display: none; }
.sec-cta h2 { margin-bottom: .6rem; color: #fff; }
.sec-cta a { color: #fff; }
.sec-cta a:hover { color: var(--foreground); }
.sec-cta p { margin-bottom: .5rem; }

/* closing call-to-action band */
.page-cta::before { content: attr(data-marquee); }
.cta-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.btn-ghost:hover { background: #fff; color: var(--primary-deep); }

.offer-overview { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.25rem 0; }
.offer-card { position: relative; padding: 1.5rem; border: 1px solid var(--border); border-top: 4px solid var(--primary); background: var(--tint); text-align: center; transition: transform .3s, box-shadow .3s; }
.offer-card:hover { transform: translateY(-4px); box-shadow: var(--glow); }
.offer-card h4 { margin: 0 0 .25rem; color: var(--primary); font-size: 1.3rem; font-style: italic; font-weight: 900; text-transform: uppercase; }
.offer-card p { margin: 0 0 .6rem; }
.offer-when { color: var(--muted); font-style: italic; }
.offer-card ul { margin: 0 0 .75rem; padding: 0; list-style: none; }
.offer-times li span { display: inline-block; min-width: 5.5em; font-weight: 700; text-align: right; }
.offer-card .offer-trainer { margin: .75rem 0 0; padding-top: .6rem; border-top: 1px solid var(--border); font-weight: 700; }
@media (min-width: 640px) {
  .offer-overview { grid-template-columns: repeat(2, 1fr); }
  .offer-card-wide { grid-column: 1 / -1; }
}

/* flag */
.flag { width: 1.3rem; height: .87rem; flex: none; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.nav-mobile a .flag { display: inline-block; margin-left: .4rem; vertical-align: 0; }

/* blog (Neubau Turnhalle) */
.blog-intro { max-width: 40rem; color: var(--muted); font-size: 1.125rem; }
.film { margin: 1.75rem 0 .5rem; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0b1b2b; clip-path: polygon(0 0, 100% 0, 100% 94%, 94% 100%, 0 100%); }
.posts { margin-top: 2.25rem; }
.post { position: relative; margin: 0 0 2.5rem; padding: 1.75rem 1.75rem 1rem; border: 1px solid var(--border); background: #f8fbfd; }
.post::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 5px; background: linear-gradient(var(--primary), var(--sky)); }
.post-head { margin-bottom: 1rem; }
.post-meta { display: inline-block; margin: 0 0 .7rem !important; padding: .3rem .8rem; background: var(--primary); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; clip-path: polygon(.35rem 0, 100% 0, calc(100% - .35rem) 100%, 0 100%); }
.article .post h2 { margin: 0; font-size: clamp(1.5rem, 3.5vw, 2rem); font-style: italic; font-weight: 900; line-height: 1.1; text-transform: uppercase; }
.post-lead { font-size: 1.1rem; }
.article .post h3:first-child { margin-top: .5rem; }
@media (max-width: 640px) { .post { padding: 1.25rem 1.1rem .5rem; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}