/* Grundlagen */
:root{color-scheme:light}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: schmale Kopfzeile, Inhalt in einer Spalte bis 72rem. Der Start öffnet mit Text links und einem Tischplan im Maßstab rechts. Darunter stehen Abschnitte in Rasterspalten. Drei Ansichten (Start, Historie, Impressum) werden über die Navigation umgeschaltet. */
@font-face{font-family:"Big Shoulders Display";font-weight:800;font-style:normal;font-display:swap;src:url(fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/public-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/public-sans-latin-600-normal.woff2) format("woff2")}

:root{
  --bg:#f2f6f9;
  --surface:#ffffff;
  --ink:#0e2235;
  --muted:#4f6478;
  --line:#d2dce5;
  --soft:#e4ecf3;
  --table:#17508f;
  --on-table:#ffffff;
  --link:#14508f;
  --ball:#f0731a;
  --on-ball:#0e2235;
  --font-display:"Big Shoulders Display","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --font-body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius:2px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b1826;
    --surface:#112335;
    --ink:#e8eff6;
    --muted:#9cb0c3;
    --line:#243b50;
    --soft:#15293c;
    --table:#1d5a9e;
    --on-table:#ffffff;
    --link:#86bdf5;
    --ball:#ff8a3d;
    --on-ball:#0b1826;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0b1826;
  --surface:#112335;
  --ink:#e8eff6;
  --muted:#9cb0c3;
  --line:#243b50;
  --soft:#15293c;
  --table:#1d5a9e;
  --on-table:#ffffff;
  --link:#86bdf5;
  --ball:#ff8a3d;
  --on-ball:#0b1826;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}
[id]{scroll-margin-top:6rem}
a{color:var(--link);text-underline-offset:.2em}
a:focus-visible,button:focus-visible{outline:3px solid var(--ball);outline-offset:2px}
abbr{text-decoration:none}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  line-height:1;
  letter-spacing:.01em;
  text-wrap:balance;
  margin:0;
}
h1{font-size:clamp(3rem,11vw,5.75rem)}
h2{font-size:clamp(2rem,6vw,3rem)}
h3{font-size:1.5rem}
p{margin:0}
.wrap{max-width:72rem;margin-inline:auto;padding-inline:1rem}
@media (min-width:48rem){.wrap{padding-inline:2rem}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Ansichten */
.js [data-view]{display:none}
.js [data-view].is-active{display:block}

/* Hinweis auf Beispielinhalte */
.hinweis{background:var(--ink);color:var(--bg);font-size:.85rem;line-height:1.45;padding-block:.6rem}

/* Kopfzeile */
.site-head{background:var(--bg);border-bottom:1px solid var(--line)}
@media (min-width:40rem){.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:10}}
.head-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1.5rem;padding-block:.6rem}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--ink);text-decoration:none;min-width:0}
.ball{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--ball)}
.brand b{display:block;font:800 1.5rem/1 var(--font-display);letter-spacing:.02em;text-transform:uppercase}
.brand small{display:block;font-size:.72rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-top:.15rem}
.site-head nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.25rem}
.site-head nav a{display:block;padding:.55rem .9rem;color:var(--ink);text-decoration:none;font-weight:600;border-bottom:3px solid transparent}
.site-head nav a:hover{background:var(--soft)}
.site-head nav a[aria-current="page"]{border-bottom-color:var(--ball)}
@media (max-width:39.99rem){
  .site-head nav{width:100%}
  .site-head nav ul{justify-content:space-between}
  .site-head nav a{padding-inline:.5rem}
}

/* Start: Hero */
.hero{display:grid;gap:2rem;align-items:center;padding-block:2.5rem 2.25rem}
@media (min-width:56rem){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:3rem;padding-block:4rem 3.5rem}}
.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem}
.lead{font-size:1.2rem;max-width:34rem;margin:1.25rem 0 1.75rem}
.btns{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-block;padding:.75rem 1.2rem;font-weight:600;text-decoration:none;border:2px solid var(--table);border-radius:var(--radius)}
.btn-primary{background:var(--table);color:var(--on-table)}
.btn-ghost{color:var(--link);border-color:var(--link)}
.btn:hover{filter:brightness(1.12)}
.figure{margin:0}
.figure svg{display:block;width:100%;height:auto}
.figure figcaption{font-size:.85rem;color:var(--muted);margin-top:.6rem}
.t-top{fill:var(--table)}
.t-edge{fill:none;stroke:#fff;stroke-width:4}
.t-mid{stroke:#fff;stroke-width:1.5;opacity:.8}
.net-base{stroke:var(--ink);stroke-width:4}
.net-mesh{stroke:var(--bg);stroke-width:1.5;stroke-dasharray:3 3}
.net-post{fill:var(--ink)}
.flight{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:6 6;opacity:.9}
.b-halo{fill:var(--ball);opacity:.28}
.b-core{fill:var(--ball)}
.dim{stroke:var(--muted);stroke-width:1.5;fill:none}
.dim-txt{fill:var(--muted);font:600 18px var(--font-body)}

/* Abschnitte */
.block{padding-block:3rem}
.block + .block{border-top:1px solid var(--line)}
.sec-head{display:grid;gap:.75rem;margin-bottom:1.75rem;max-width:44rem}
.sec-head p{color:var(--muted)}
.cols3{display:grid;gap:1.75rem}
@media (min-width:52rem){.cols3{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}}
.offer{border-top:2px solid var(--ink);padding-top:.9rem;display:grid;gap:.5rem;align-content:start}
.offer p{color:var(--muted)}

/* Training */
.groups{display:grid;gap:1.25rem}
@media (min-width:48rem){.groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
.group{background:var(--surface);border:1px solid var(--line);padding:1.25rem 1.25rem .5rem}
.group .age{color:var(--muted);font-size:.9rem;margin-top:.3rem}
.slots{list-style:none;margin:1rem 0 0;padding:0}
.slot{
  display:grid;
  grid-template-columns:3.4rem minmax(0,1fr);
  grid-template-areas:"day time" "day note";
  gap:0 1rem;
  align-items:center;
  padding:.85rem 0;
  border-top:1px solid var(--line);
}
.slot .day{grid-area:day;display:grid;place-items:center;height:3rem;background:var(--table);color:var(--on-table);font:800 1.55rem/1 var(--font-display);text-transform:uppercase;border-radius:var(--radius)}
.slot .time{grid-area:time;font-weight:600;font-variant-numeric:tabular-nums}
.slot .note{grid-area:note;color:var(--muted);font-size:.95rem}
.slot.today .day{background:var(--ball);color:var(--on-ball)}
.tag{display:inline-block;margin-left:.6rem;padding:.05rem .45rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;background:var(--ball);color:var(--on-ball);border-radius:var(--radius);vertical-align:.12em}
.try{margin-top:1.25rem;background:var(--table);color:var(--on-table);padding:1.5rem 1.25rem;display:grid;gap:.75rem 2rem}
@media (min-width:48rem){.try{grid-template-columns:minmax(0,14rem) minmax(0,1fr);align-items:start;padding:1.75rem 1.5rem}}

/* Halle und Kontakt */
.info{display:grid;gap:2rem}
@media (min-width:48rem){.info{grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem}}
.facts{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.5rem 1rem;margin:1rem 0 0}
.facts dt{color:var(--muted);font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding-top:.2rem}
.facts dd{margin:0;overflow-wrap:anywhere}

/* Historie */
.page-title{font-size:clamp(2.6rem,9vw,4.5rem)}
.page-head{padding-block:2.5rem 1rem;display:grid;gap:1rem}
.page-head p{max-width:40rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:.5rem 0 0;padding:0}
.chips a{display:block;padding:.45rem .85rem;border:1px solid var(--line);background:var(--surface);text-decoration:none;font-weight:600;border-radius:var(--radius)}
.chips a:hover{background:var(--soft)}
.timeline{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.timeline li{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:.25rem 1.5rem;padding:.9rem 0;border-top:1px solid var(--line);align-items:baseline}
.timeline .per{font:800 1.7rem/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.timeline .who{font-weight:600}
.timeline .who small{display:block;font-weight:400;color:var(--muted);font-size:.9rem}
.timeline .now .per::before{content:"";display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--ball);margin-right:.55rem;vertical-align:.14em}
@media (max-width:36rem){.timeline li{grid-template-columns:minmax(0,1fr)}}
.hist{width:100%;border-collapse:collapse}
.hist th,.hist td{text-align:left;padding:.8rem 1rem .8rem 0;border-top:1px solid var(--line);vertical-align:baseline}
.hist thead th{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;border-top:0;border-bottom:2px solid var(--ink)}
.hist tbody th{font:800 1.6rem/1 var(--font-display);width:5.5rem;font-variant-numeric:tabular-nums}
.hist tbody tr:last-child th,.hist tbody tr:last-child td{border-bottom:1px solid var(--line)}
.hist .win{font-weight:600}
.hist .score{font-variant-numeric:tabular-nums;white-space:nowrap}
.hist .none{color:var(--muted);font-style:italic}
@media (max-width:39.99rem){
  .hist thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hist,.hist tbody,.hist tr,.hist th,.hist td{display:block}
  .hist tr{padding:.9rem 0;border-top:1px solid var(--line)}
  .hist tbody tr:last-child{border-bottom:1px solid var(--line)}
  .hist th,.hist td,.hist tbody tr:last-child th,.hist tbody tr:last-child td{border:0;padding:.15rem 0}
  .hist tbody th{width:auto;padding-bottom:.4rem}
  .hist td{display:grid;grid-template-columns:6rem minmax(0,1fr);gap:.5rem}
  .hist td::before{content:attr(data-label);color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding-top:.2rem}
  .hist td[colspan]{grid-template-columns:minmax(0,1fr)}
  .hist td[colspan]::before{display:none}
}

/* Impressum */
.legal{max-width:44rem;padding-bottom:1rem}
.legal h3{font-size:1.4rem;margin:2rem 0 .5rem}
.legal p+p{margin-top:.5rem}
.ph{background:var(--soft);padding:0 .3rem;border-radius:var(--radius)}

/* Fußzeile */
.site-foot{border-top:1px solid var(--line);padding-block:1.5rem;color:var(--muted);font-size:.9rem}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem}