@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url("../fonts/barlow-latin-700-normal.woff2") format("woff2"); }

:root {
  --navy: #0c1424;
  --green: #8db33a;
  --light: #f3f3f3;
  --text: #1a1f2b;
  --white: #fff;
  /* green for text on light grounds: --green only reaches 2.2:1 on chalk */
  --green-dark: #567516;
  --hairline: #d6d6d6;
  --condensed: "Barlow Condensed", "Arial Narrow", sans-serif;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  /* one content edge for every band: 72rem centered, never closer than the gutter */
  --edge: max(var(--gutter), (100% - 72rem) / 2);
  --section: clamp(3.5rem, 7vw, 6rem);
}

*, *::before, *::after { box-sizing: border-box; }
/* anchors and keyboard focus land below the sticky header */
html { scroll-padding-top: 9rem; }
body { margin: 0; font: 400 1.125rem/1.6 "Barlow", system-ui, sans-serif; color: var(--text); background: var(--light); --em: var(--green-dark); }
.site-header, .hero, .coaching-band, .band, .page-head, .site-footer { --em: var(--green); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--condensed); font-weight: 600; line-height: 1.05; margin: 0; }
em { font-style: normal; color: var(--em); }
svg { width: 1.5rem; height: 1.5rem; flex: none; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
::selection { background: var(--green); color: var(--navy); }

/* Header */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: .25rem var(--edge); background: var(--navy); color: var(--white); position: sticky; top: 0; z-index: 10; border-bottom: 3px solid var(--green); }
.logo img { height: 8rem; width: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; gap: 1.75rem; }
.nav a { display: flex; align-items: center; gap: .25rem; font-family: var(--condensed); font-size: 1.1rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.nav a:hover, .nav a.active { color: var(--green); }
.nav a svg { width: 1rem; height: 1rem; }
.has-sub { position: relative; }
.sub { display: none; position: absolute; top: 100%; left: -1rem; min-width: 10rem; padding: .75rem 1.25rem !important; background: var(--navy); border: 1px solid #ffffff55; }
.sub a { text-transform: none; font-family: "Barlow", sans-serif; font-weight: 400; letter-spacing: 0; font-size: 1rem; padding: .3rem 0; }
@media (min-width: 961px) { .has-sub:hover .sub, .has-sub:focus-within .sub { display: block; } }
.nav-toggle { display: none; background: none; border: 0; color: inherit; padding: .25rem; cursor: pointer; }
.nav-toggle svg { display: block; width: 2rem; height: 2rem; }
.site-header .header-cta, .sub-toggle { display: none; }

/* Buttons */
.buttons { display: flex; flex-wrap: wrap; gap: 1rem; }
.btn { display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.4rem; font-family: var(--condensed); font-size: 1.05rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; border: 2px solid var(--white); color: var(--white); }
/* navy on green: white on green is only 2.4:1 */
.btn-primary { background: var(--green); border-color: var(--green); color: var(--navy); }
.btn:hover { filter: brightness(1.1); }
.btn-outline:hover { border-color: var(--green); color: var(--green); }
.btn svg { transition: transform .2s; }
.btn:hover svg { transform: translateX(.25rem); }

/* Hero */
/* the edge goes on the hero itself: inside a grid cell, % padding would resolve against the cell, not the page */
.hero { display: grid; padding-left: var(--edge); grid-template-columns: minmax(30rem, 1fr) 1fr; background: var(--navy); color: var(--white); min-height: 34rem; }
.hero-text { padding: 4rem var(--gutter) 5rem 0; align-self: center; position: relative; z-index: 1; }
.hero h1 { font-size: clamp(3rem, 6.5vw, 5.5rem); font-weight: 700; line-height: .95; text-transform: uppercase; margin-right: -6rem; }
.hero h1::after { content: ""; display: block; width: 3.5rem; height: 2px; margin: 2rem 0 2.25rem; background: var(--green); }
/* green border along the diagonal: green background shows through the 6px gap between the two clip-paths */
.hero-media { position: relative; clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); background: var(--green); }
.hero-media::before, .hero-media img { content: ""; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: polygon(calc(30% + 6px) 0, 100% 0, 100% 100%, 6px 100%); }
.hero-media::before { background: linear-gradient(135deg, #2a3446, #121a2a); }

/* Pillars */
/* Why / How / What as rows between hairlines: the word with its logo slash left, the content right on the same baseline.
   The formula is the stage: its terms run as balanced display lines with the × leading each term, then a green sum
   line and the result, its = hanging in the gap like written arithmetic */
/* subgrid: every row shares one label column as wide as the longest word, so the content starts on one line */
.pillars { --hang: 2rem; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); padding: var(--section) var(--edge); }
.pillar { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; padding: clamp(2rem, 4vw, 3rem) 0; }
.pillar + .pillar { border-top: 1px solid var(--hairline); }
.pillar:first-child { padding-top: 0; }
.pillar:last-child { padding-bottom: 0; }
.pillar h2 { position: relative; padding-left: var(--hang); font-size: clamp(2.25rem, 3.5vw, 3rem); font-weight: 700; text-transform: uppercase; }
.pillar h2::before { content: ""; position: absolute; top: -.2em; left: calc(var(--hang) / 2); width: 3px; height: 1.4em; background: var(--green); transform: skewX(-20deg); }
.pillar p { margin: 0; max-width: 36rem; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.45; text-wrap: pretty; }
.pillar p + p { margin-top: 1rem; }
.pillar strong { font-weight: 700; }
.pillar ul, .pillar ul + p { font-family: var(--condensed); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.1; text-transform: uppercase; }
/* the sum line is the formula's own bottom edge, so it spans the terms, not the whole row */
.pillar ul { list-style: none; width: fit-content; margin: 0; padding: 0 0 .25em; border-bottom: 2px solid var(--green); text-wrap: balance; }
.pillar li { display: inline; }
/* the × leads its term and stays with it when the line breaks */
.pillar li + li::before { content: "×\00a0"; font-weight: 600; color: var(--em); }
.pillar ul + p { position: relative; max-width: none; margin-top: .2em; }
.pillar ul + p::before { content: "="; position: absolute; right: 100%; margin-right: .25em; font-weight: 600; color: var(--em); }
.icon-circle { display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; background: var(--navy); color: var(--green); }
.icon-circle svg { width: 2.5rem; height: 2.5rem; }

/* Coaching */
/* navy band, top and bottom edges both rising on the forward lean; same green-edge trick as the hero: navy layer clipped 4px short of the green one */
.coaching-band, .band { position: relative; padding: calc(var(--section) + 1.5rem) var(--edge); background: var(--green); color: var(--white); clip-path: polygon(0 2.5rem, 100% 0, 100% calc(100% - 2.5rem), 0 100%); }
.coaching-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); align-items: center; gap: 2.5rem 4rem; }
.coaching-band::before, .band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); clip-path: polygon(0 calc(2.5rem + 4px), 100% 4px, 100% calc(100% - 2.5rem - 4px), 0 calc(100% - 4px)); }
.coaching-band h2 { font-size: clamp(2rem, 3.5vw, 2.75rem); line-height: 1.15; max-width: 38rem; text-wrap: balance; }
.coaching-areas :is(h2, h3) { font-size: 1.1rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .75rem; }
.coaching-areas ul { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #ffffff33; }
.coaching-areas li { display: flex; align-items: center; gap: .9rem; padding: .8rem 0; border-top: 1px solid #ffffff33; font-family: var(--condensed); font-size: 1.5rem; font-weight: 600; letter-spacing: .02em; line-height: 1.1; text-transform: uppercase; }
.coaching-areas strong { font-weight: inherit; }
.coaching-areas svg { width: 1.6rem; height: 1.6rem; color: var(--green); }
.coaching-fields { padding: var(--section) var(--edge); }
.coaching-fields h3 { font-size: 2rem; text-transform: uppercase; margin-bottom: 2rem; }
.field-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1.25rem; margin: 0; padding: 0; }
/* only long compounds hyphenate, so narrow cards don't chop every second word */
.field-cards li { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: 1.75rem clamp(1rem, 1.5vw, 1.5rem) 2rem; background: var(--white); line-height: 1.2; hyphens: auto; hyphenate-limit-chars: 14 6 6; }
.field-cards .icon-ring { width: 3.5rem; height: 3.5rem; margin-bottom: .9rem; }
.field-cards .icon-ring svg { width: 2rem; height: 2rem; }
.field-cards strong { hyphens: manual; font-family: var(--condensed); font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.field-cards small { font-size: .9rem; font-weight: 700; color: var(--green-dark); }
.field-cards p { margin: .6rem 0 0; font-size: 1rem; line-height: 1.5; color: #4a5160; }
/* same short rule as under the pillar titles, left-aligned */
.field-cards p::before { content: ""; display: block; width: 2.5rem; height: 2px; margin-bottom: .9rem; background: var(--green); }
/* the cards climb parallel to the band's cut above: the row is sheared by the edge's angle and each card sheared back around its own corner, which nets out to a plain shift of x × slope, so every card stays upright and crisp whatever the card count */
@media (min-width: 961px) {
  .field-cards { transform: skewY(calc(-1 * atan2(2.5rem, 100vw))); transform-origin: 0 0; }
  .field-cards li { transform: skewY(atan2(2.5rem, 100vw)); transform-origin: 0 0; }
}
.icon-ring { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-bottom: .5rem; border-radius: 50%; border: 1.5px solid var(--green); background: var(--white); }
.icon-ring svg { width: 2.75rem; height: 2.75rem; }

/* Default page */
.page { max-width: 48rem; margin: 0 auto; padding: 4rem var(--gutter); min-height: 50vh; }
.page h1 { font-size: 3rem; text-transform: uppercase; margin-bottom: 1.5rem; }
.page h2 { font-size: 2rem; text-transform: uppercase; margin-bottom: 1rem; }

/* Kontakt: this page is the CTA target, so the call takes the footer band's job: a green tile like a large
   primary button; mail is the outline alternative next to it */
.contact { list-style: none; display: grid; gap: 1rem; margin: 0; padding: 0; }
.contact a { display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem 1.5rem; border: 2px solid var(--white); transition: color .2s, border-color .2s; }
.contact .icon-circle { width: 3.5rem; height: 3.5rem; }
.contact .icon-circle svg { width: 1.75rem; height: 1.75rem; }
.contact strong { display: block; font-family: var(--condensed); font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.contact small { display: block; margin-top: .35rem; font-size: 1rem; line-height: 1.4; }
/* a time range drops to the next line as a whole */
.contact small span { white-space: nowrap; }
.contact a > svg { width: 2rem; height: 2rem; margin-left: auto; transition: transform .2s; }
.contact a:hover > svg { transform: translateX(.4rem); }
.contact-phone { background: var(--green); color: var(--navy); }
.contact a.contact-phone { border-color: var(--green); }
.contact-phone:hover { filter: brightness(1.1); }
.contact-phone:focus-visible { outline-color: var(--white); }
.contact-mail .icon-circle { background: none; border: 1.5px solid var(--green); }
.contact a.contact-mail:hover { border-color: var(--green); color: var(--green); }
/* chalk between the last section and the footer's cut */
.kontakt .chapter:last-child { padding-bottom: var(--section); }
.faq { border-top: 1px solid var(--hairline); }
.faq:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { color: var(--green); transition: rotate .2s; }
.faq[open] summary svg { rotate: 180deg; }
.faq p { margin: 0 0 1rem; }

/* Page head (Events, Training, Team) */
/* bottom padding keeps chalk between the last section and the footer CTA */
.events, .training, .team, .premium, .therapie { padding-bottom: var(--section); }
/* navy head, bottom edge rising on the forward lean with a 4px green seam (same trick as the coaching band) */
.page-head { position: relative; display: grid; grid-template-columns: minmax(0, 48rem); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); padding: var(--section) var(--edge) calc(var(--section) + 2.5rem); background: var(--green); color: var(--white); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%); }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem - 4px), 0 calc(100% - 4px)); }
.page-head h1 { font-size: clamp(2.25rem, 9vw, 3rem); text-transform: uppercase; margin-bottom: 1.25rem; }
.page-head p { margin: 0 0 1rem; max-width: 48rem; }
.page-head p:last-child { margin-bottom: 0; }
.page-head p a { color: var(--green); text-decoration: underline; text-underline-offset: .2em; }
.page-head .buttons { margin-top: 1rem; }
/* error pages: no slant, so no light band before the footer (404) or below the head (500) */
.error, .error .page-head { background: var(--navy); clip-path: none; }
/* overview: title and intro left, list right, like the statement band */
.page-head-split { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }

/* Events */
.events-upcoming h2 { font-size: 1.1rem; letter-spacing: .04em; text-transform: uppercase; color: var(--green); margin-bottom: .75rem; }
.events-upcoming > p { padding: 1rem 0; border-block: 1px solid #ffffff33; }
/* date sheet left (day over month), title, meta and excerpt in one column, arrow right */
.event-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #ffffff33; }
.event-list a { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: center; padding: 1.25rem 0; border-top: 1px solid #ffffff33; }
.event-list a > span:not(.event-day) { grid-column: 2; }
.event-day { grid-row: span 3; align-self: start; display: flex; flex-direction: column; font-family: var(--condensed); font-size: 1.1rem; font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--green); }
.event-day strong { font-size: 3.25rem; font-weight: 700; letter-spacing: 0; color: var(--white); }
.event-title { font-family: var(--condensed); font-size: 1.75rem; font-weight: 600; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; transition: color .2s; }
.event-list .event-meta { margin-top: .2rem; font-size: 1rem; color: #ffffffcc; }
/* the time drops to the next line as a whole instead of breaking inside "10:00 – 16:00" */
.event-meta time + span { white-space: nowrap; }
.event-excerpt { margin-top: .35rem; font-size: 1rem; line-height: 1.5; color: #ffffffb3; }
.event-list svg { grid-column: 3; grid-row: 1 / span 3; color: var(--green); transition: transform .2s; }
.event-list a:hover .event-title { color: var(--green); }
.event-list a:hover svg { transform: translateX(.25rem); }
.event-back { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; font-family: var(--condensed); font-size: 1.05rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #ffffffb3; }
/* arrow-right mirrored; the hover nudge runs in mirrored space, so it moves backwards */
.event-back svg { width: 1.25rem; height: 1.25rem; scale: -1 1; transition: transform .2s; }
.event-back:hover { color: var(--green); }
.event-back:hover svg { transform: translateX(.25rem); }
.event-head .event-meta { display: flex; align-items: start; gap: .6rem; margin-bottom: 1.5rem; font-family: var(--condensed); font-size: 1.4rem; font-weight: 600; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; }
.event-head .event-meta svg { color: var(--green); }
/* past events as albums: white cards, cover cut on the forward lean with a green seam, hero gradient when there is no photo */
.albums, .photos, .coaches { padding: var(--section) var(--edge) 0; }
.albums h2 { font-size: 2rem; text-transform: uppercase; margin-bottom: 2rem; }
.albums ul, .coach-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.5rem; margin: 0; padding: 0; }
.albums a { display: flex; flex-direction: column; height: 100%; padding-bottom: 1.5rem; background: var(--white); transition: box-shadow .2s; }
.albums a:hover { box-shadow: 0 12px 32px rgba(12, 20, 36, .14); }
.album-cover { position: relative; aspect-ratio: 4 / 3; background: var(--green); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.5rem), 0 100%); }
.album-cover::before, .album-cover img { content: ""; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.5rem - 4px), 0 calc(100% - 4px)); }
.album-cover::before { background: linear-gradient(135deg, #2a3446, #121a2a); }
.albums time { margin: 1rem 1.5rem .35rem; font-family: var(--condensed); font-size: 1rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--green-dark); }
.albums strong { margin: 0 1.5rem; font-family: var(--condensed); font-size: 1.5rem; font-weight: 600; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; }
.album-count { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: auto 1.5rem 0; padding-top: 1rem; font-size: 1rem; color: #4a5160; }
.album-count svg { color: var(--green); transition: transform .2s; }
.albums a:hover .album-count svg { transform: translateX(.25rem); }
.photos ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; margin: 0; padding: 0; }
.photos a { display: block; overflow: hidden; background: var(--navy); }
.photos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: scale .3s, opacity .3s; }
.photos a:hover img { scale: 1.04; opacity: .85; }
/* full-screen photo viewer: the dialog itself is the navy backdrop, so a click on it closes */
.lightbox { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 4.5rem var(--gutter); border: 0; background: #0c1424f2; color: var(--white); }
.lightbox[open] { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
.lightbox::backdrop { background: none; }
body:has(.lightbox[open]) { overflow: hidden; }
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.lightbox button { position: absolute; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.lightbox button[hidden] { display: none; }
.lightbox button:hover { color: var(--green); }
.lightbox button svg { width: 2rem; height: 2rem; }
.lightbox-close { top: .75rem; right: calc(var(--gutter) - .75rem); }
.lightbox-prev, .lightbox-next { top: 50%; translate: 0 -50%; }
.lightbox-prev { left: calc(var(--gutter) - 1rem); }
.lightbox-prev svg { scale: -1 1; }
.lightbox-next { right: calc(var(--gutter) - 1rem); }

/* Training */
.offers { padding: var(--section) var(--edge) 0; }
.offers > h2 { font-size: 2rem; text-transform: uppercase; margin-bottom: 2rem; text-wrap: balance; }
.offer-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; margin: 0; padding: 0; }
.offer-cards > li, .coach-cards > li { display: flex; flex-direction: column; background: var(--white); }
/* navy head, bottom edge cut on the forward lean with a 4px green seam, like the album covers */
.offer-head { position: relative; padding: 1.75rem 1.75rem 3.25rem; background: var(--green); color: var(--white); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.5rem), 0 100%); }
.offer-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.5rem - 4px), 0 calc(100% - 4px)); }
.offer-head h3 { font-size: 1.4rem; letter-spacing: .04em; text-transform: uppercase; color: var(--green); }
.offer-head strong { display: block; margin-top: .35rem; font-family: var(--condensed); font-size: 3rem; font-weight: 700; line-height: 1; }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.75rem 2rem; font-size: 1rem; line-height: 1.5; color: #4a5160; }
.card-body p { margin: 0 0 1rem; }
/* the line right before a list ("Inhalte:") reads as its label */
.card-body p:has(+ ul) { margin: .5rem 0; font-family: var(--condensed); font-size: 1.05rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.card-body ul { list-style: none; margin: 0 0 1rem; padding: 0; border-bottom: 1px solid var(--hairline); }
.card-body li { position: relative; padding: .5rem 0 .5rem 1.5rem; border-top: 1px solid var(--hairline); color: var(--text); }
/* the logo slash as list marker */
.card-body li::before { content: ""; position: absolute; left: .4rem; top: .75rem; width: 2px; height: 1em; background: var(--green); transform: skewX(-20deg); }
.card-body .btn { align-self: flex-start; margin-top: .5rem; }

/* Team: a compact grid of white cards. Name and role sit on a Navy tag inside the photo,
   its top edge cut on the forward lean with a 4px green seam; the text follows in the card body. */
.coach-cards { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.coach-photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: linear-gradient(135deg, #2a3446, #121a2a); }
.coach-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* faint person icon centred in the part the tag leaves free */
.coach-photo > svg { position: absolute; inset: 0 0 5rem; margin: auto; width: 5rem; height: 5rem; color: #ffffff40; }
.coach-tag { position: absolute; inset: auto 0 0; padding: 2.25rem 1.75rem 1.1rem; background: var(--green); color: var(--white); clip-path: polygon(0 1.5rem, 100% 0, 100% 100%, 0 100%); }
.coach-tag::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); clip-path: polygon(0 calc(1.5rem + 4px), 100% 4px, 100% 100%, 0 100%); }
.coach-tag h2 { font-size: 1.6rem; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; }
.coach-tag p { margin: .3rem 0 0; font-family: var(--condensed); font-size: 1rem; font-weight: 600; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; color: var(--green); }
.card-body .coach-social { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding-top: .25rem; font-family: var(--condensed); font-size: 1.05rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.coach-social a { color: var(--green-dark); }
.coach-social a:hover { color: var(--text); }

/* Premium Coaching: one page, one section per subpage */
/* section index in the page head: rows between translucent lines, arrow turned down because the targets are on this page */
.toc ul { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #ffffff33; }
.toc a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-top: 1px solid #ffffff33; font-family: var(--condensed); font-size: 1.5rem; font-weight: 600; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; transition: color .2s; }
.toc svg { color: var(--green); rotate: 90deg; transition: transform .2s; }
.toc a:hover { color: var(--green); }
.toc a:hover svg { transform: translateX(.25rem); }
.chapter { padding: var(--section) var(--edge) 0; }
.chapter h2, .band h2 { font-size: 2rem; text-transform: uppercase; margin-bottom: 1.25rem; text-wrap: balance; }
.chapter-text, .band > p { max-width: 48rem; }
.chapter-text p, .band > p { margin: 0 0 1rem; }
.chapter-text > :last-child { margin-bottom: 0; }
.chapter-text p a { color: var(--green-dark); text-decoration: underline; text-underline-offset: .2em; }
.chapter-text p a:hover { color: var(--text); }
.chapter .faq { max-width: 48rem; }
.chapter-text + .faq { margin-top: 2rem; }
/* text beside a photo cut on the hero's diagonal, with the same green seam */
.chapter-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 2.5rem clamp(2.5rem, 6vw, 6rem); }
.chapter-photo { position: relative; aspect-ratio: 4 / 3; background: var(--green); clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%); }
.chapter-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: polygon(calc(15% + 6px) 0, 100% 0, 100% 100%, 6px 100%); }
/* statement band: the text column is wider than the home page's list column */
.premium .coaching-band { margin-top: var(--section); grid-template-columns: minmax(0, 1fr) minmax(15rem, 28rem); }
.coaching-band p { margin: 0 0 1rem; }
.coaching-band p:last-child { margin-bottom: 0; }
.premium .band { margin-top: var(--section); }
/* Betreuungsfelder in detail: ring left, text right, rows between hairlines */
.focus-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); margin: 2rem 0 0; padding: 0; }
.focus-list li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1.25rem; padding: 1.5rem 0; border-top: 1px solid var(--hairline); }
.focus-list .icon-ring { width: 3.5rem; height: 3.5rem; margin: 0; }
.focus-list .icon-ring svg { width: 2rem; height: 2rem; }
.focus-list h3 { margin: .55rem 0 .6rem; font-size: 1.5rem; letter-spacing: .02em; text-transform: uppercase; }
.focus-list small { font-family: "Barlow", sans-serif; font-size: .9rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--green-dark); }
.focus-list p { margin: 0 0 .75rem; font-size: 1rem; line-height: 1.5; color: #4a5160; }
.focus-list p:last-child { margin-bottom: 0; }
/* Ablauf: the step number carries the logo slash, like the Why / How / What words */
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 2.5rem clamp(1.5rem, 3vw, 2.5rem); margin: 2rem 0 0; padding: 0; }
.steps li { position: relative; counter-increment: step; padding: 1.5rem 0 0 2rem; border-top: 1px solid var(--hairline); }
.steps li::before { content: counter(step); display: block; margin-bottom: 1rem; font-family: var(--condensed); font-size: 4rem; font-weight: 700; line-height: .8; }
.steps li::after { content: ""; position: absolute; top: 1.2rem; left: .6rem; width: 3px; height: 3.9rem; background: var(--green); transform: skewX(-20deg); }
.steps h3 { margin-bottom: .6rem; font-size: 1.4rem; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; }
.steps p { margin: 0 0 .75rem; font-size: 1rem; line-height: 1.5; color: #4a5160; }
.steps p:last-child { margin-bottom: 0; }
/* Erfolgsgeschichten on navy: a double logo slash as quotation mark */
.stories ul { --gap: clamp(2rem, 4vw, 3.5rem); list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 2.5rem var(--gap); margin: 2.5rem 0 0; padding: 0; }
.stories li { display: flex; flex-direction: column; padding-top: 1.5rem; border-top: 1px solid #ffffff33; }
.stories blockquote { margin: 0 0 1.5rem; font-size: 1.2rem; line-height: 1.55; }
.stories blockquote::before { content: ""; display: block; width: 13px; height: 1.6rem; margin: 0 0 1rem .4rem; border-inline: 3px solid var(--green); transform: skewX(-20deg); }
.stories blockquote p { margin: 0 0 .75rem; }
.stories blockquote p:last-child { margin-bottom: 0; }
.story-by { display: flex; flex-direction: column; gap: .2rem; margin: auto 0 0; font-size: 1rem; color: var(--green); }
.story-by strong { font-family: var(--condensed); font-size: 1.25rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--white); }
/* three columns climb the band's slant: each sits higher by its column offset × the edge's slope (2.5rem over the band width), hairlines tilted by the same angle, so all of them lie on one line parallel to the band's top edge */
@media (min-width: 961px) {
  .stories ul { container-type: inline-size; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stories li { --step: calc((100cqw + var(--gap)) / 3 * tan(atan2(2.5rem, 100vw))); position: relative; border-top: 0; }
  .stories li::before { content: ""; position: absolute; inset: 0 0 auto; border-top: 1px solid #ffffff33; transform: skewY(calc(-1 * atan2(2.5rem, 100vw))); transform-origin: 0 0; }
  .stories li:nth-child(3n + 2) { translate: 0 calc(-1 * var(--step)); }
  .stories li:nth-child(3n) { translate: 0 calc(-2 * var(--step)); }
}

/* Footer */
/* the footer opens with the forward-lean cut: the CTA band's top edge, or on the CTA's own target page the footer itself */
.site-footer { position: relative; background: var(--navy); color: var(--white); clip-path: polygon(0 2.5rem, 100% 0, 100% 100%, 0 100%); }
/* no green band on the CTA's own target page: a 4px green seam drawn over the map instead */
.site-footer:not(:has(> .footer-cta))::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--green); clip-path: polygon(0 2.5rem, 100% 0, 100% 4px, 0 calc(2.5rem + 4px)); pointer-events: none; }
/* the conversion moment on every page: full-bleed green, both edges rising on the forward lean like the coaching band (the top cut comes from the footer) */
.footer-cta { position: relative; z-index: 1; display: block; padding: calc(2.25rem + 2.5rem) var(--edge); background: var(--green); color: var(--navy); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%); }
/* navy above the footer: the footer slides 2.5rem up so its cut meets the navy instead of leaving a light wedge; 2px more tucks it under a closing band, whose bottom edge would otherwise coincide with the cut and let chalk shimmer through the anti-aliasing */
main > .band:last-child { z-index: 2; }
main:has(> .band:last-child) + .site-footer, .error + .site-footer { margin-top: calc(-2.5rem - 2px); }
/* the cut edges would clip an outline around the whole band, so the label carries the focus ring */
.footer-cta:focus-visible { outline: none; }
.footer-cta:focus-visible .footer-cta-label { outline: 2px solid var(--navy); outline-offset: .4rem; }
/* the content row tilts by the edges' angle (2.5rem over the band width), so icon, label and arrow climb parallel to both cuts */
.footer-cta-row { display: flex; align-items: center; gap: 1.5rem; rotate: calc(-1 * atan2(2.5rem, 100vw)); }
.footer-cta .icon-circle { width: 4rem; height: 4rem; }
.footer-cta .icon-circle svg { width: 2rem; height: 2rem; }
.footer-cta-label { font-family: var(--condensed); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; line-height: 1.1; text-transform: uppercase; text-wrap: balance; }
.footer-cta-row > svg { width: 2.5rem; height: 2.5rem; margin-left: auto; transition: transform .2s; }
.footer-cta:hover .footer-cta-row > svg { transform: translateX(.4rem); }
/* Anfahrt band: text on the shared edge, the map bleeding right and down to the legal bar, its left edge cut like the hero image.
   It runs up under the CTA band, so the map's top follows the band's green diagonal */
.footer-cta + .visit { margin-top: -2.5rem; }
.visit { display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); column-gap: clamp(2.5rem, 6vw, 6rem); padding-left: var(--edge); }
.visit-text { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-content: start; gap: 2.5rem clamp(2rem, 4vw, 3.5rem); padding: calc(var(--section) + 2.5rem) 0 var(--section); }
.visit h2 { font-size: 2rem; text-transform: uppercase; margin-bottom: 1.25rem; }
.visit address { margin-bottom: 1rem; font-style: normal; font-family: var(--condensed); font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.visit-link { display: flex; align-items: start; gap: .6rem; padding: .2rem 0; font-size: 1rem; overflow-wrap: anywhere; }
/* icon sits on the first line when the link text wraps */
.visit-link svg { width: 1.15rem; height: 1.15rem; margin-top: .23rem; color: var(--green); }
.visit .buttons { margin-top: 1.5rem; }
.visit-social { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.5rem 0 0; font-family: var(--condensed); font-size: 1.05rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.hours { margin: 0; border-bottom: 1px solid #ffffff33; font-variant-numeric: tabular-nums; }
.hours div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-top: 1px solid #ffffff33; }
.hours dt { font-family: var(--condensed); font-size: 1.25rem; font-weight: 600; line-height: 1.4; letter-spacing: .03em; text-transform: uppercase; }
.hours dd { margin: 0; text-align: right; }
/* the 2x map keeps its own size (centred, cropped by the frame), so street names stay legible at every width;
   the studio sits at its centre. The green seam is drawn over it along the cut */
.visit-map { position: relative; overflow: hidden; min-height: 24rem; margin: 0; background: #283040; clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%); }
.visit-map::after { content: ""; position: absolute; inset: 0; background: var(--green); clip-path: polygon(25% 0, calc(25% + 6px) 0, 6px 100%, 0 100%); }
.visit-map img { position: absolute; top: 50%; left: 50%; width: 1800px; max-width: none; height: 1000px; translate: -50% -50%; }
.map-pin { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; gap: .6rem; translate: -.6rem -50%; font-family: var(--condensed); font-size: 1.1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.map-pin::before { content: ""; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--green); outline: 4px solid var(--navy); }
.visit-map figcaption { position: absolute; right: 0; bottom: 0; padding: .2rem .6rem; background: #0c1424cc; font-size: .75rem; color: #ffffffb3; }
.footer-legal { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-inline: var(--edge); padding: 1rem 0; border-top: 1px solid #ffffff33; font-size: .9rem; color: #ffffffb3; }
.footer-legal span { margin-right: auto; }
.visit a:not(.btn):hover, .footer-legal a:hover { color: var(--green); }

/* Mobile */
@media (max-width: 960px) {
  .site-header { flex-wrap: wrap; row-gap: 1rem; }
  .site-header:has(.nav-toggle[aria-expanded="true"]) { position: fixed; inset: 0; align-content: flex-start; overflow-y: auto; overscroll-behavior: contain; }
  body:has(.nav-toggle[aria-expanded="true"]) { overflow: hidden; }
  html { scroll-padding-top: 7rem; }
  /* one column: a shorter portrait keeps the text closer */
  .coach-photo { aspect-ratio: 4 / 5; }
  .logo img { height: 6rem; }
  .nav-toggle { display: block; padding: .5rem; margin-right: -.5rem; }
  .nav-toggle[aria-expanded="true"] svg:first-child, .nav-toggle:not([aria-expanded="true"]) svg + svg { display: none; }
  .nav, .header-cta { display: none; flex-basis: 100%; }
  .nav-toggle[aria-expanded="true"] ~ .nav { display: block; }
  .nav-toggle[aria-expanded="true"] ~ .header-cta { display: flex; justify-content: center; margin: 1rem 0 2rem; }
  .nav > ul { flex-direction: column; gap: 0; }
  .nav > ul > li > a { font-size: 1.75rem; line-height: 1.1; padding: .6rem 0; }
  .has-sub { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .sub-toggle { display: grid; place-items: center; width: 3rem; height: 3rem; margin-right: -.75rem; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; }
  .sub-toggle svg { transition: rotate .2s; }
  .sub-toggle[aria-expanded="true"] { color: var(--green); }
  .sub-toggle[aria-expanded="true"] svg { rotate: 180deg; }
  .sub { grid-column: 1 / -1; position: static; border: 0; border-left: 1px solid var(--green); margin: 0 0 .75rem; padding: 0 0 0 1rem !important; }
  .sub-toggle[aria-expanded="true"] + .sub { display: block; }
  .sub a { padding: .7rem 0; }
  .nav a svg { display: none; }

  .hero { grid-template-columns: 1fr; }
  .hero h1 { margin-right: 0; font-size: clamp(2.5rem, 12.5vw, 4rem); }
  .buttons .btn { flex: 1 1 auto; justify-content: center; }
  .hero-media { min-height: 20rem; order: -1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%); }
  .hero-media::before, .hero-media img { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 0 calc(85% - 6px)); }
  /* without a photo the empty slab would only push the headline below the fold */
  .hero-media:not(:has(img)) { display: none; }
  .hero { padding-left: 0; }
  .hero-text { padding: 2.5rem var(--gutter) 3.5rem; }

  .coaching-band { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillar { row-gap: 1rem; }
  .pillar > div { padding-left: var(--hang); }
  .field-cards { grid-template-columns: 1fr; gap: .75rem; }
  /* compact rows: ring left, text column right */
  .field-cards li { display: grid; grid-template-columns: 3rem 1fr; gap: .25rem 1rem; padding: 1.25rem; }
  .field-cards li > * { grid-column: 2; }
  .field-cards .icon-ring { grid-column: 1; grid-row: span 3; width: 3rem; height: 3rem; margin: 0; }
  .field-cards .icon-ring svg { width: 1.75rem; height: 1.75rem; }
  .field-cards strong { font-size: 1.25rem; }
  .field-cards p { margin-top: .4rem; }
  .field-cards p::before { display: none; }
  .footer-cta-row { gap: 1rem; }
  .footer-cta .icon-circle { display: none; }
  .visit-link { padding: .4rem 0; }
  .footer-legal span { flex-basis: 100%; }

  .page-head-split { grid-template-columns: 1fr; }
  .contact a { gap: 1rem; padding: 1rem 1.1rem; }
  .contact .icon-circle { width: 3rem; height: 3rem; }
  .contact .icon-circle svg { width: 1.5rem; height: 1.5rem; }
  .contact a > svg { width: 1.5rem; height: 1.5rem; }
  /* map below the text, its top edge rising on the forward lean like the band's */
  .visit { grid-template-columns: 1fr; padding-left: 0; }
  .visit-text { padding: calc(var(--section) + 2.5rem) var(--gutter) 3rem; }
  .visit-map { min-height: 22rem; clip-path: polygon(0 2.5rem, 100% 0, 100% 100%, 0 100%); }
  .visit-map::after { clip-path: polygon(0 2.5rem, 100% 0, 100% 6px, 0 calc(2.5rem + 6px)); }
  .event-list a { grid-template-columns: 3.25rem minmax(0, 1fr) auto; column-gap: 1rem; }
  .event-day strong { font-size: 2.6rem; }
  .event-title { font-size: 1.4rem; }
  .event-head .event-meta { font-size: 1.2rem; }
  .photos ul { grid-template-columns: 1fr 1fr; gap: .35rem; }
  .toc a { font-size: 1.35rem; }
  .chapter-media, .premium .coaching-band { grid-template-columns: 1fr; }
  /* steps as rows: number left, text right */
  .steps li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: .75rem; padding-left: 1.5rem; }
  .steps li > * { grid-column: 2; }
  .steps li::before { grid-row: span 3; margin: 0; font-size: 3rem; }
  .steps li::after { left: .35rem; height: 3rem; }
  /* prev/next under the photo, where thumbs can reach them */
  .lightbox-prev, .lightbox-next { top: auto; bottom: .75rem; translate: none; }
}