@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
/* Sport & Privat: verspielt. Matsch-Olive als Grund, Knochenweiß als zweite Fläche, Himmelblau als Akzent
   (Laufband, Ball, Countdown-Fläche). Kontraste: Knochen auf Olive 7,4:1, Himmel auf Olive 6,1:1, Tinte auf Himmel 9,6:1. */
.sport{
  --oliv:#4A4A24;--oliv-tief:#363619;--knochen:#EEE7D2;--himmel:#BCD6E6;--tinte:#2B2A12;--rost:#9C4E35;
  --bri:"Bricolage Grotesque",var(--text);
  --akzent-nav:var(--knochen);--mg-hover:var(--oliv);
  --lader-bg:#4A4A24;--lader-fg:#EEE7D2;--lader-font:var(--bri);--lader-gewicht:800;--lader-ball:#BCD6E6;
  background:var(--oliv);color:var(--knochen);--line:rgba(238,231,210,.25);
}
.sport :focus-visible{outline-color:var(--himmel)}
.kids :focus-visible,.party :focus-visible,.erfolge :focus-visible,.naechstes :focus-visible,.er-karte:nth-child(2) :focus-visible{outline-color:var(--tinte)}
.hb-titel,.er-titel,.er-karte h3,.h-lead,.k-text{text-wrap:balance}
.sport main{overflow-x:clip}
.sport main>section{padding-left:var(--pad);padding-right:var(--pad);overflow-x:clip}
.s-kopf{padding:18px var(--pad);position:relative;z-index:5}

/* Gemeinsames */
.hb-tag{font-size:.875rem;font-weight:600;letter-spacing:.02em;color:var(--himmel);margin-bottom:14px}
.hb-titel{font-family:var(--bri);font-weight:700;font-size:clamp(2rem,4.4vw,3.75rem);line-height:1;letter-spacing:-.03em}
.hb-titel.gross{font-size:clamp(2.75rem,8vw,7rem);font-weight:800;line-height:.92}
.hb-text p+p,.hb-text p+a{margin-top:18px}
.hb-text{max-width:42ch;font-size:clamp(1.0625rem,1.3vw,1.1875rem)}
.knopf{display:inline-flex;align-items:center;gap:.5em;margin-top:26px;padding:14px 24px;border-radius:999px;background:var(--knochen);color:var(--tinte);font-weight:600;text-decoration:none;transition:transform .25s cubic-bezier(.23,1,.32,1),background-color .25s}
.knopf.dunkel{background:var(--oliv);color:var(--knochen)}
@media (hover:hover) and (pointer:fine){.knopf:hover{transform:translateY(-3px) rotate(-2deg);background:var(--himmel);color:var(--tinte)}}
.knopf:active{transform:scale(.97)}

/* 1. Einstieg */
.held{position:relative;min-height:calc(100svh - 70px);display:grid;grid-template-columns:1fr minmax(240px,34%);grid-template-rows:1fr auto;gap:24px clamp(24px,4vw,64px);padding-top:clamp(20px,4vw,48px);padding-bottom:clamp(40px,6vw,80px)}
.h-titel{grid-column:1;align-self:end;font-family:var(--bri);font-weight:800;line-height:.8;letter-spacing:-.06em}
.h-wort{display:block;font-size:clamp(5rem,21vw,19rem)}
.h-klein{display:block;font-weight:300;font-size:clamp(2.25rem,7vw,6rem);letter-spacing:-.03em;margin-top:.15em}
.h-lead{grid-column:1;max-width:36ch;font-size:clamp(1.125rem,1.6vw,1.375rem)}
.h-foto{grid-column:2;grid-row:1/3;align-self:center;transform:rotate(3deg);position:relative;z-index:1}
.h-foto img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:22% 50%;border-radius:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.h-foto figcaption{margin-top:10px;font-size:.8125rem}
.h-sticker{position:absolute;inset:0;pointer-events:none;z-index:2}
.h-sticker a{position:absolute;pointer-events:auto;min-height:44px;display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;background:var(--himmel);color:var(--tinte);font-family:var(--bri);font-weight:700;font-size:clamp(.95rem,1.3vw,1.125rem);text-decoration:none;rotate:var(--r);box-shadow:0 10px 24px -12px rgba(0,0,0,.45);transition:scale .25s cubic-bezier(.23,1,.32,1)}
.h-sticker a:nth-child(2){background:var(--knochen)}
.h-sticker a:nth-child(4){background:var(--knochen)}
.h-sticker a:nth-child(1){left:52%;top:6%}
.h-sticker a:nth-child(2){left:60%;top:30%}
.h-sticker a:nth-child(3){left:57%;top:58%}
.h-sticker a:nth-child(4){right:3%;top:4%}
.h-sticker a:nth-child(5){right:6%;bottom:8%}
@media (hover:hover) and (pointer:fine){.h-sticker a:hover{scale:1.08}}

/* Laufband */
.band{background:var(--himmel);color:var(--tinte);rotate:-2deg;margin:clamp(20px,4vw,48px) -2vw;overflow:hidden;padding:14px 0;position:relative;z-index:2}
.b-spur{display:flex;width:max-content}
.b-spur p{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);padding-right:clamp(18px,2.4vw,36px);font-family:var(--bri);font-weight:800;font-size:clamp(1.75rem,4vw,3.5rem);letter-spacing:-.03em;white-space:nowrap}
.b-spur i{width:.45em;height:.45em;border-radius:50%;background:var(--oliv);flex:none}

.hobby{position:relative;padding-top:clamp(80px,12vw,160px);padding-bottom:clamp(80px,12vw,160px)}

/* 2. Trainer */
.riesig{font-family:var(--bri);font-weight:800;font-size:clamp(6rem,22vw,20rem);line-height:.85;letter-spacing:-.05em;white-space:nowrap;color:rgba(238,231,210,.1);margin:0 calc(var(--pad) * -1) clamp(32px,5vw,64px)}
.tr-foto{display:block;width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;margin-top:clamp(48px,7vw,96px);border-radius:clamp(16px,2.4vw,28px)}
.tr-raster{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,96px);align-items:start}

/* 3. Bewegte Kids */
.kids{background:var(--knochen);color:var(--tinte);text-align:center;border-radius:clamp(28px,5vw,64px) clamp(28px,5vw,64px) 0 0;min-height:85svh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.kids .hb-tag{color:var(--rost)}
.kids .hb-titel{max-width:12ch;position:relative;z-index:1}
.k-text{max-width:44ch;margin-top:24px;font-size:clamp(1.0625rem,1.3vw,1.1875rem);position:relative;z-index:1}
.kids .knopf{position:relative;z-index:1}
.baelle{position:absolute;inset:0;pointer-events:none}
.baelle i{position:absolute;border-radius:50%;width:var(--g);aspect-ratio:1;left:var(--x);bottom:var(--b)}
.baelle i:nth-child(1){--g:clamp(56px,8vw,110px);--x:6%;--b:12%;background:var(--himmel)}
.baelle i:nth-child(2){--g:clamp(28px,3.4vw,48px);--x:20%;--b:62%;background:var(--oliv)}
.baelle i:nth-child(3){--g:clamp(40px,5vw,72px);--x:82%;--b:18%;background:var(--rost)}
.baelle i:nth-child(4){--g:clamp(70px,10vw,140px);--x:86%;--b:58%;background:var(--himmel)}
.baelle i:nth-child(5){--g:clamp(22px,2.6vw,36px);--x:70%;--b:80%;background:var(--oliv)}
.baelle i:nth-child(6){--g:clamp(34px,4vw,56px);--x:30%;--b:8%;background:var(--oliv)}
.baelle i:nth-child(7){--g:clamp(24px,3vw,40px);--x:10%;--b:84%;background:var(--rost)}

/* 4. Kindergeburtstage */
.party{background:var(--knochen);color:var(--tinte);display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(32px,6vw,96px);align-items:center;padding-top:clamp(40px,6vw,80px)}
.party .hb-tag{color:var(--rost)}
.party .knopf{background:var(--oliv);color:var(--knochen)}
.p-buehne{position:relative}
.p-foto{display:block;width:min(220px,55%);height:auto;margin-bottom:28px;border-radius:14px;rotate:4deg;box-shadow:0 24px 48px -26px rgba(43,42,18,.55)}
.p-wort{font-family:var(--bri);font-weight:800;font-size:clamp(5rem,17vw,15rem);line-height:.85;letter-spacing:-.06em;display:inline-block;rotate:-4deg}
.p-wort b{display:inline-block;color:var(--rost);transform-origin:50% 90%}
.p-konfetti{position:relative;z-index:1;display:block;min-height:44px;margin-top:24px;padding:10px 18px;border:2px solid currentColor;border-radius:999px;background:none;color:inherit;font:600 .9375rem var(--text);cursor:pointer;transition:background-color .2s,color .2s}
@media (hover:hover) and (pointer:fine){.p-konfetti:hover{background:var(--tinte);color:var(--knochen)}}
.konfetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.konfetti i{position:absolute;left:0;top:0;width:10px;height:16px;border-radius:2px}

/* 5. Wakeboard */
.wake{padding-left:0!important;padding-right:0!important;padding-bottom:0;background:var(--knochen)}
.w-buehne{position:relative;height:100svh;overflow:hidden;color:var(--knochen)}
.w-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 64%;clip-path:inset(18% 22% round 28px)}
.w-buehne{--dunkel:1}
.w-buehne::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(30,30,12,.7),transparent 55%);opacity:var(--dunkel);pointer-events:none}
.w-wort{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(140px,22vh,220px);z-index:1;font-family:var(--bri);font-weight:800;font-size:clamp(3.5rem,14vw,13rem);line-height:.9;letter-spacing:-.05em;white-space:nowrap}
.w-welle{position:absolute;left:0;width:100%;height:clamp(24px,4vw,48px);bottom:clamp(110px,18vh,180px);z-index:1;fill:none;stroke:var(--himmel);stroke-width:3;vector-effect:non-scaling-stroke}
.w-text{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(24px,5vh,48px);z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px}
.w-text p{max-width:40ch;font-size:clamp(1.0625rem,1.3vw,1.1875rem)}
.w-text .knopf{margin-top:0}

/* 6. Triathlon */
.tri{background:var(--oliv-tief);padding:0!important;overflow:hidden}
.t-spur{display:flex;width:max-content;height:100svh}
.t-tafel{width:min(78vw,820px);flex:none;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(32px,5vw,80px);border-right:1px solid var(--line)}
.t-start{width:min(92vw,1000px);padding-left:var(--pad)}
.t-start .hb-titel{max-width:13ch;margin-bottom:24px}
.t-start p:last-child{max-width:40ch}
.t-art{font-family:var(--bri);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.25rem);color:var(--himmel)}
.t-zahl{font-family:var(--bri);font-weight:800;font-size:clamp(5rem,16vw,14rem);line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums;margin:12px 0 28px;white-space:nowrap}
.t-zahl small{font-size:.38em;font-weight:700;letter-spacing:-.02em}
.t-balken{height:14px;border-radius:999px;background:rgba(238,231,210,.15);overflow:hidden}
.t-balken i{display:block;height:100%;width:100%;background:var(--himmel);border-radius:inherit;transform-origin:left;transform:scaleX(var(--anteil))}
.t-ziel{margin-top:14px;font-size:1rem}
.t-ende p:last-child{max-width:34ch}

/* 7. Erfolge */
.erfolge{background:var(--knochen);color:var(--tinte);padding-top:clamp(80px,12vw,160px);padding-bottom:clamp(80px,12vw,160px)}
.er-titel{font-family:var(--bri);font-weight:800;font-size:clamp(3rem,9vw,8rem);line-height:.9;letter-spacing:-.05em;margin-bottom:clamp(40px,6vw,80px);max-width:10ch}
.er-stapel{list-style:none;padding:0;margin:0}
.er-karte{position:sticky;top:calc(12vh + var(--i,0) * 18px);display:grid;grid-template-columns:1fr;min-height:min(70vh,560px);border-radius:clamp(20px,3vw,36px);padding:clamp(28px,4vw,56px);background:var(--oliv);color:var(--knochen);margin-bottom:clamp(24px,4vw,48px);overflow:hidden;transform-origin:50% 0}
.er-karte:nth-child(1){--i:0}
.er-karte:nth-child(2){--i:1;background:var(--himmel);color:var(--tinte)}
.er-karte:nth-child(3){--i:2;background:var(--tinte)}
.er-karte:nth-child(4){--i:3;background:var(--rost)}
.er-bild{grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,56px);padding:0}
.er-bild img{width:100%;height:100%;object-fit:cover;object-position:35% 50%}
.er-bild .er-inhalt{padding:clamp(28px,4vw,56px) clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0}
.er-inhalt{display:flex;flex-direction:column;justify-content:flex-end}
.er-datum{font-weight:600;font-size:.9375rem}
.er-karte h3{font-family:var(--bri);font-weight:800;font-size:clamp(2rem,4.6vw,4rem);line-height:.95;letter-spacing:-.035em;margin:10px 0 16px;max-width:14ch}
.er-karte p:not(.er-datum){max-width:40ch}
.er-karte dl{display:flex;flex-wrap:wrap;gap:20px clamp(28px,4vw,56px);margin-top:clamp(24px,4vw,48px)}
.er-karte dt{font-size:.875rem;order:2}
.er-karte dl div{display:flex;flex-direction:column}
.er-karte dd{margin:0;font-family:var(--bri);font-weight:800;font-size:clamp(2.25rem,5vw,4.5rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}

/* 8. Als Nächstes */
.naechstes{background:var(--himmel);color:var(--tinte);padding-top:clamp(80px,12vw,160px);padding-bottom:clamp(80px,12vw,160px)}
.naechstes .hb-tag{color:var(--tinte)}
.n-countdown{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 20px;margin-bottom:clamp(20px,3vw,40px)}
.n-tage{font-family:var(--bri);font-weight:800;font-size:clamp(7rem,26vw,24rem);line-height:.8;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.n-einheit{font-weight:600;font-size:clamp(1.125rem,1.8vw,1.5rem)}
.n-text{max-width:44ch;margin-top:24px;font-size:clamp(1.0625rem,1.3vw,1.1875rem)}

.sport .footer{background:var(--oliv);color:var(--knochen)}

@media (max-width:820px){
  .held{grid-template-columns:1fr;grid-template-rows:auto;min-height:0}
  .h-foto{grid-column:1;grid-row:auto;width:min(72%,340px);justify-self:end;margin-top:-10px}
  .h-sticker{position:static;display:flex;flex-wrap:wrap;gap:10px;pointer-events:auto;margin-top:8px}
  .h-sticker a{position:static}
  .tr-raster,.party{grid-template-columns:1fr}
  .tri{overflow:visible}
  .t-spur{flex-direction:column;width:auto;height:auto}
  .t-tafel,.t-start{width:auto;padding:clamp(56px,14vw,96px) var(--pad);border-right:0;border-bottom:1px solid var(--line)}
  .er-bild{grid-template-columns:1fr}
  .er-bild img{height:220px}
  .er-bild .er-inhalt{padding:0 28px 28px}
  .er-karte{top:calc(80px + var(--i,0) * 12px);min-height:0}
}
@media (prefers-reduced-motion:reduce){.w-foto{clip-path:none}}