:root{
  --clay:#b24a26; --clay-d:#8f3a1c; --turf:#1d5a3a; --turf-d:#134029; --line:#fff; --ln:rgba(255,255,255,.55); --ball:#d6e43a; --ink:#101a14;
  --head:"Avenir Next Condensed","Bahnschrift","Roboto Condensed","Arial Narrow","Liberation Sans Narrow",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--turf-d);color:#fff;font:17px/1.5 var(--body)}
a{color:inherit}
:focus-visible{outline:3px solid var(--ball);outline-offset:3px}

.stage{position:relative;min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1fr 1fr}
.side{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:clamp(56px,9vh,96px) clamp(40px,6vw,88px) clamp(48px,9vh,88px);text-decoration:none;isolation:isolate;overflow:hidden;transition:filter .25s}
.plan{background:var(--clay);padding-right:40px}
.app{background:var(--turf);padding-left:40px}
/* Tennisfeld von oben: Netz in der Mitte, Maße nach Regelwerk (Einzelfeld 75 % der Breite, Aufschlaglinie 6,40 m vom Netz = 53,85 % der Feldhälfte) */
.plan::before,.app::before{content:"";position:absolute;z-index:-1;pointer-events:none;border:3px solid var(--ln);background-repeat:no-repeat}
.plan::before{inset:26px 0 26px 26px;border-right:0;background-image:linear-gradient(var(--ln),var(--ln)),linear-gradient(var(--ln),var(--ln)),linear-gradient(var(--ln),var(--ln)),linear-gradient(var(--ln),var(--ln));background-position:0 12.5%,0 87.5%,46.15% 50%,100% 50%;background-size:100% 3px,100% 3px,3px 75%,53.85% 3px}
.app::before{inset:26px 26px 26px 0;border-left:0;background-image:linear-gradient(var(--ln),var(--ln)),linear-gradient(var(--ln),var(--ln)),linear-gradient(var(--ln),var(--ln)),linear-gradient(var(--ln),var(--ln));background-position:0 12.5%,0 87.5%,53.85% 50%,0 50%;background-size:100% 3px,100% 3px,3px 75%,53.85% 3px}
/* Der Text steht im unteren Aufschlagfeld, so schneidet keine Linie hindurch */
.plate{position:absolute;container-type:inline-size;display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(6px,1.2vh,12px);padding:clamp(12px,2.6vh,24px) clamp(14px,1.6vw,26px) 0}
.plan .plate{left:calc(29px + .4615*(100% - 29px));right:clamp(14px,1.6vw,26px);padding-right:0;top:calc(29px + .5*(100% - 55px));bottom:calc(29px + .125*(100% - 55px))}
.app .plate{left:clamp(14px,1.6vw,26px);padding-left:0;right:calc(29px + .4615*(100% - 29px));top:calc(29px + .5*(100% - 55px));bottom:calc(29px + .125*(100% - 55px))}
.wm{font:800 clamp(22px,2.2vw,30px)/1 var(--head);letter-spacing:.14em}
.side h2{margin:0;font:800 clamp(24px,15.4cqw,104px)/.95 var(--head);letter-spacing:-.01em;padding-bottom:.08em}
.side p{margin:0;font-size:clamp(14px,1.2vw,17px);line-height:1.4}
.go{align-self:flex-start;margin-top:6px;display:inline-flex;align-items:center;gap:10px;border:3px solid #fff;padding:8px 16px;font:700 clamp(14px,1.2vw,17px)/1 var(--body);border-radius:999px;transition:background .15s,color .15s}
.plan:hover .go,.plan:focus-visible .go{background:#fff;color:var(--clay-d)}
.app:hover .go,.app:focus-visible .go{background:#fff;color:var(--turf-d)}
.stage:has(.plan:hover) .app,.stage:has(.app:hover) .plan,.stage:has(.plan:focus-visible) .app,.stage:has(.app:focus-visible) .plan{filter:brightness(.82)}
.plan:focus-visible,.app:focus-visible{outline-offset:-10px}

/* Netz: Mittellinie mit Pfosten, Ball sitzt oben darauf */
.net{position:absolute;left:50%;top:0;bottom:0;width:0;pointer-events:none;z-index:3}
.net::before{content:"";position:absolute;left:-2px;top:26px;bottom:26px;border-left:4px dotted #fff}
.net i{position:absolute;left:-9px;width:18px;height:18px;border-radius:50%;background:#fff}
.net i:first-of-type{top:17px}.net i:last-of-type{bottom:17px}
.ball{position:absolute;left:-58px;top:clamp(120px,24vh,220px);width:116px;height:116px;transition:transform .5s cubic-bezier(.3,1.5,.5,1);animation:drop .9s cubic-bezier(.3,0,.3,1) backwards .15s}
.stage:has(.plan:hover) .ball,.stage:has(.plan:focus-visible) .ball{transform:translateX(-54px) rotate(-200deg)}
.stage:has(.app:hover) .ball,.stage:has(.app:focus-visible) .ball{transform:translateX(54px) rotate(200deg)}
@keyframes drop{0%{transform:translateY(-70vh)}55%{transform:translateY(0)}70%{transform:translateY(-34px)}85%{transform:translateY(0)}93%{transform:translateY(-9px)}100%{transform:translateY(0)}}


.foot{position:absolute;z-index:4;left:0;right:0;bottom:0;display:flex;justify-content:flex-end;gap:20px;padding:4px 40px 5px;font-size:13px;line-height:17px}
.foot a{opacity:.85}
.foot a:hover{opacity:1}

@media (max-width:760px){
  .stage{grid-template-columns:1fr;grid-template-rows:1fr 1fr;min-height:100dvh}
  .side,.plan,.app{padding:0;justify-content:flex-end}
  .foot{justify-content:center}
  .plan::before{inset:26px 26px 0 26px;border-right:3px solid var(--ln);border-bottom:0;background-position:12.5% 0,87.5% 0,50% 46.15%;background-size:3px 100%,3px 100%,75% 3px;background-image:linear-gradient(var(--ln),var(--ln)),linear-gradient(var(--ln),var(--ln)),linear-gradient(var(--ln),var(--ln))}
  .app::before{inset:0 26px 26px 26px;border-left:3px solid var(--ln);border-top:0;background-position:12.5% 0,87.5% 0,50% 53.85%;background-size:3px 100%,3px 100%,75% 3px;background-image:linear-gradient(var(--ln),var(--ln)),linear-gradient(var(--ln),var(--ln)),linear-gradient(var(--ln),var(--ln))}
  .plan .plate,.app .plate{left:calc(26px + .125*(100% - 52px) + 3px);right:calc(26px + .125*(100% - 52px) + 3px);padding:6px 10px 0}
  .plan .plate{top:calc(26px + .4615*(100% - 26px) + 3px);bottom:10px}
  .app .plate{top:calc(.5385*(100% - 26px) + 3px);bottom:calc(26px + 6px)}
  .side p{font-size:13.5px;line-height:1.3}
  .plate{gap:5px;padding-top:4px}
  .net{left:0;right:0;top:50%;bottom:auto;width:auto;height:0}
  .net::before{left:26px;right:26px;top:-2px;bottom:auto;border-left:0;border-top:4px dotted #fff}
  .net i{top:-9px!important;bottom:auto!important}
  .net i:first-of-type{left:17px}.net i:last-of-type{left:auto;right:17px}
  .ball{left:auto;right:36px;top:-46px;width:92px;height:92px}
  .ball{animation:none}
  .stage:has(.plan:hover) .ball,.stage:has(.app:hover) .ball{transform:none}
  .foot{position:static;background:var(--turf-d);padding:12px 0 calc(12px + env(safe-area-inset-bottom))}
  body{display:flex;flex-direction:column;min-height:100dvh}
  .stage{flex:1}
}
@media (max-width:760px) and (max-height:760px){.side p{display:none}.ball{width:64px;height:64px;top:-32px;right:28px}}
@media (prefers-reduced-motion:reduce){.ball{animation:none;transition:none}.side,.go{transition:none}}

/* Rechtstexte */
.doc{max-width:760px;margin:0 auto;padding:28px 20px 64px;background:transparent}
.doc header{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.25);margin-bottom:26px}
.doc header img{width:40px;height:40px;border-radius:10px}
.doc header a{font:800 26px/1 var(--head);text-decoration:none}
.doc h1{font:800 44px/1 var(--head);margin:.2em 0 .4em}
.doc h2{font-size:20px;margin:1.8em 0 .3em}
.doc p,.doc li{max-width:68ch}
.doc a{color:var(--ball)}
.doc .back{margin-top:36px}