/* Selbst gehostete Schriften - kein externer Request (DSGVO).
   Dateien per scripts/fetch-fonts.sh nach /assets/fonts/ laden. */
@font-face{font-family:"Saira Condensed";font-weight:600;font-display:swap;
  src:url("/assets/fonts/saira-condensed-600.woff2") format("woff2")}
@font-face{font-family:"Saira Condensed";font-weight:700;font-display:swap;
  src:url("/assets/fonts/saira-condensed-700.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;
  src:url("/assets/fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;
  src:url("/assets/fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;
  src:url("/assets/fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;
  src:url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2")}
/* Open Sans – ruhige, gut lesbare Fließtextschrift */
@font-face{font-family:"Open Sans";font-weight:400;font-display:swap;
  src:url("/assets/fonts/opensans-400.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-weight:500;font-display:swap;
  src:url("/assets/fonts/opensans-500.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-weight:600;font-display:swap;
  src:url("/assets/fonts/opensans-600.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-weight:700;font-display:swap;
  src:url("/assets/fonts/opensans-700.woff2") format("woff2")}

:root{
    --deep:#06283D; --pool:#15689E; --surface:#17B6CE; --rope:#F2B705;
    --deck:#EEF6F9; --ink:#0B2230; --muted:#3d5564; --white:#fff;
    --maxw:1180px;
    --display:"Open Sans","Saira Condensed",Impact,sans-serif;
    --body:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    --mono:"Open Sans",ui-monospace,SFMono-Regular,Menlo,monospace;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--body);color:var(--ink);background:var(--deck);line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}

  .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}

  /* ---- Schwimmbahn-Leine (Wettkampf-Norm, 50m) als Signatur-Trennlinie ----
     erste/letzte 5 m rot · dazwischen blau/weiß alle 40 cm · bei 15 m & 35 m
     schwarz · in der Mitte (25 m) 1 m rot. Längsmaßstab: 50 m = 100 % Breite. */
  .lane{height:16px;border:0;border-radius:0;
    background:
      linear-gradient(90deg,
        #d62828 0 10%,            /* 0–5 m rot */
        transparent 10% 29.6%,
        #161616 29.6% 30.4%,      /* 15 m schwarz */
        transparent 30.4% 49%,
        #d62828 49% 51%,          /* 25 m: 1 m rot */
        transparent 51% 69.6%,
        #161616 69.6% 70.4%,      /* 35 m schwarz */
        transparent 70.4% 90%,
        #d62828 90% 100%),        /* 45–50 m rot */
      repeating-linear-gradient(90deg,
        #1b5fa0 0 0.8%, #f4f7f9 0.8% 1.6%);  /* blau/weiß, je 40 cm */
    box-shadow:inset 0 1px 0 rgba(0,0,0,.18), inset 0 -1px 0 rgba(0,0,0,.18)}

  /* ---- Kopfzeile / Navigation ---- */
  header.site{position:sticky;top:0;z-index:50;background:rgba(6,40,61,.92);
    backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
  .nav{display:flex;align-items:center;gap:28px;height:68px}
  .brand{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--white);line-height:1;white-space:nowrap}
  .brand b{color:var(--surface)}
  nav.main{display:flex;align-items:center;gap:22px;margin-left:auto}
  nav.main a{font-family:var(--display);font-weight:500;font-size:17px;letter-spacing:.04em;
    text-transform:uppercase;color:#cfe3ee;transition:color .15s}
  nav.main a:hover,nav.main a:focus-visible{color:var(--white)}
  .intern{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--deep)!important;background:var(--rope);
    padding:8px 16px;border-radius:999px;transition:transform .15s,box-shadow .15s}
  .intern:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(242,183,5,.35)}
  .burger{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:26px;cursor:pointer}

  /* ---- Hero ---- */
  .hero{position:relative;overflow:hidden;color:var(--white);
    background:linear-gradient(160deg,#0a3552 0%,#06283D 55%,#041c2c 100%)}
  .hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background:
      radial-gradient(900px 380px at 75% -10%, rgba(23,182,206,.30), transparent 60%),
      radial-gradient(700px 320px at 10% 110%, rgba(21,104,158,.35), transparent 60%);
    animation:drift 14s ease-in-out infinite alternate}
  @keyframes drift{to{transform:translate3d(0,-12px,0) scale(1.04)}}
  .hero .wrap{position:relative;z-index:1;padding-block:96px 104px}
  .eyebrow{font-family:var(--body);font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
    color:#7fe0ef;margin-bottom:22px}
  .hero h1{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.005em;
    line-height:1.04;font-size:clamp(38px,6.5vw,84px);max-width:16ch}
  .hero h1 em{font-style:normal;color:var(--surface)}
  .hero p.lead{font-size:clamp(17px,2.2vw,21px);color:#d3e6f0;max-width:52ch;margin-top:26px}
  .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
  .btn{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.05em;text-transform:uppercase;
    padding:13px 26px;border-radius:8px;cursor:pointer;transition:transform .15s,box-shadow .15s;border:2px solid transparent}
  .btn-primary{background:var(--surface);color:var(--deep)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(23,182,206,.4)}
  .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
  .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}

  /* ---- Abschnittsraster ---- */
  section{padding-block:84px}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:42px;flex-wrap:wrap}
  .sec-head .label{font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:.1em;
    text-transform:uppercase;color:#14507a}
  .sec-head h2{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;
    font-size:clamp(30px,4.5vw,52px);line-height:1;color:var(--deep);margin-top:8px}

  /* Gruppen-Karten */
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px}
  .card{background:var(--white);border-radius:14px;padding:26px 24px 24px;
    border:1px solid #dceaf1;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s}
  .card::before{content:"";position:absolute;left:0;top:0;height:5px;width:100%;
    background:linear-gradient(90deg,var(--surface),var(--pool))}
  .card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(6,40,61,.12)}
  .card h3{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.03em;
    font-size:25px;color:var(--deep);margin-bottom:10px}
  .card p{font-size:15px;color:var(--muted)}
  .card .more{display:inline-block;margin-top:16px;font-family:var(--display);font-weight:600;
    letter-spacing:.05em;text-transform:uppercase;font-size:15px;color:var(--pool)}
  .card .more::after{content:" →";transition:margin .15s}
  .card:hover .more::after{margin-left:4px}

  /* Trainingszeiten / Wettkampf-Band */
  .band{background:var(--deep);color:#fff}
  .band .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding-block:72px}
  .band h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(28px,4vw,46px);
    line-height:1;margin-bottom:18px}
  .band p{color:#bcd4e2;max-width:46ch}
  .clock{font-family:var(--mono);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
    border-radius:14px;padding:26px}
  .clock .row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px dashed rgba(255,255,255,.14);font-size:15px}
  .clock .row:last-child{border-bottom:0}
  .clock .row span:first-child{color:#9fbccd}
  .clock .row span:last-child{color:var(--surface)}

  /* News */
  .news{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .post{background:var(--white);border:1px solid #dceaf1;border-radius:14px;padding:24px;transition:transform .18s,box-shadow .18s}
  .post:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(6,40,61,.1)}
  .post .date{font-family:var(--body);font-weight:600;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#14507a}
  .post h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:21px;color:var(--deep);margin:8px 0 8px}
  .post p{font-size:14.5px;color:var(--muted)}

  /* Trainerteam */
  .team{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
  .coach{background:var(--white);border:1px solid #dceaf1;border-radius:14px;padding:22px;
    border-top:4px solid var(--surface)}
  .coach .grp{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    font-size:22px;color:var(--deep);margin-bottom:4px}
  .coach .who{font-size:16px;color:var(--ink);font-weight:600}
  .coach .role{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--pool);margin-top:10px}

  /* Footer */
  footer.site{background:#041c2c;color:#9fbccd;padding-block:54px 30px}
  footer.site .top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:34px}
  footer.site .brand{font-size:24px}
  footer.site .links{display:flex;flex-wrap:wrap;gap:8px 22px;max-width:560px}
  footer.site .links a{font-size:14px;color:#9fbccd;transition:color .15s}
  footer.site .links a:hover{color:#fff}
  footer.site .legal{font-size:13px;color:#5d7e92;border-top:1px solid rgba(255,255,255,.08);padding-top:20px}

  @media (max-width:880px){
    nav.main{display:none;position:absolute;top:68px;left:0;right:0;background:var(--deep);
      flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 18px}
    nav.main.open{display:flex}
    nav.main a{padding:12px 0;width:100%;border-bottom:1px solid rgba(255,255,255,.06)}
    .intern{margin-top:12px}
    .burger{display:block}
    .grid{grid-template-columns:repeat(2,1fr)}
    .band .wrap{grid-template-columns:1fr}
    .news{grid-template-columns:1fr}
  }
  @media (max-width:520px){ .grid{grid-template-columns:1fr} }
  @media (prefers-reduced-motion:reduce){
    .hero::after{animation:none} *{scroll-behavior:auto}
  }
  :focus-visible{outline:3px solid var(--rope);outline-offset:2px;border-radius:3px}