/* Albano – Webseite. Gestaltung aus der Regattabahn: Wasserblau, Bahnlinien, Bojenketten, Bahnnummern-Tafeln,
   Orange nur für das eigene Boot. Keine externen Schriften, System-Schrift wie in der App. */
:root{
  --bg:#f3f7fb; --surface:#ffffff; --ink:#0b2035; --ink-2:#44596e; --line:#d4dfea;
  --water-deep:#0a2f4f; --water:#14598c; --water-lane:rgba(255,255,255,.16);
  --on-water:#ffffff; --on-water-2:#bcd5ea;
  --orange:#f28a1e; --orange-ink:#a14e00; --buoy:#e5383b; --link:#135a96;
  --board:#ffffff; --board-ink:#0b2035;
  --note-bg:#fff4e5; --shadow:0 18px 50px rgba(6,28,48,.18);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#061320; --surface:#0d1f31; --ink:#e6eef6; --ink-2:#a3b6c9; --line:#1c3550;
    --water-deep:#04182a; --water:#0b3a5e; --water-lane:rgba(255,255,255,.10);
    --orange-ink:#ffb25e; --link:#8cc4f2; --note-bg:#2a2013; --shadow:0 18px 50px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:1.0625rem/1.6 system-ui,-apple-system,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--link);text-underline-offset:.15em}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--orange);color:#0b2035;padding:.5rem 1rem;z-index:20;font-weight:700}
.skip:focus{left:0}
.wrap{max-width:72rem;margin:0 auto;padding:0 1rem}
.num{font-variant-numeric:tabular-nums}

/* Wasser: Bahnlinien und Bojenketten als Hintergrund */
.water{background-color:var(--water-deep);color:var(--on-water);
  background-image:
    radial-gradient(circle at 50% 50%,rgba(229,56,59,.75) 0 2.5px,transparent 3px),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.28) 0 1.5px,transparent 2px),
    linear-gradient(var(--water-lane) 0 1px,transparent 1px),
    linear-gradient(180deg,var(--water) 0%,var(--water-deep) 100%);
  background-size:200px 96px,40px 96px,100% 96px,100% 100%;
  background-position:30px 0,10px 0,0 48px,0 0}
.water.calm,.pagehead.water{background-image:linear-gradient(var(--water-lane) 0 1px,transparent 1px),linear-gradient(180deg,var(--water) 0%,var(--water-deep) 100%);
  background-size:100% 96px,100% 100%;background-position:0 48px,0 0}

/* Kopf */
header.site{position:relative;z-index:10;background:var(--water-deep);color:var(--on-water);
  box-shadow:0 1px 0 rgba(255,255,255,.06)}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1rem;
  padding-top:.6rem;padding-bottom:.6rem}
.brand{display:flex;align-items:center;gap:.55rem;color:#fff;text-decoration:none;font-weight:800;font-size:1.15rem;letter-spacing:.01em}
.brand img{width:32px;height:32px;border-radius:8px}
nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 .85rem}
nav a{color:var(--on-water-2);text-decoration:none;padding:.35rem 0;display:inline-block;font-size:.88rem;font-weight:600;
  border-bottom:2px solid transparent}
nav a:hover{color:#fff}
nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--orange)}
/* Strecke 0–1000 m als Lesefortschritt (nur Startseite, Boot fährt beim Scrollen) */
.course{position:relative;height:6px;margin:0;
  background:radial-gradient(circle,rgba(255,255,255,.55) 0 1.5px,transparent 2px) 0 50%/24px 6px repeat-x}
.course::before{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--p,0)*100%);
  background:linear-gradient(90deg,transparent,rgba(242,138,30,.55));}
.course .boat{position:absolute;top:50%;left:calc(var(--p,0)*100%);width:28px;height:6px;margin-left:-28px;transform:translateY(-50%);
  background:var(--orange);border-radius:50%/50%;box-shadow:0 0 0 1px rgba(0,0,0,.25)}

/* Startseite: Kopfbereich */
.hero{padding:3rem 0 2.5rem;overflow:hidden}
.hero .eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--on-water-2);margin:0 0 .9rem}
.hero .eyebrow::before{content:"";width:22px;height:6px;border-radius:50%;background:var(--orange)}
.hero h1{font-size:clamp(2.1rem,7.4vw,4.4rem);line-height:1.02;letter-spacing:-.025em;margin:0 0 1rem;font-weight:850;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero .lead{font-size:clamp(1.05rem,2.4vw,1.3rem);line-height:1.5;color:var(--on-water-2);max-width:40rem;margin:0 0 1.6rem}
.hero .lead strong{color:#fff;font-weight:650}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin:0 0 2.5rem}
.status{display:inline-flex;align-items:center;gap:.6rem;background:#fff;color:#0b2035;font-weight:750;
  padding:.65rem 1.1rem .65rem .8rem;border-radius:999px;font-size:1rem}
.status svg{width:20px;height:20px;flex:none}
.status small{font-weight:600;color:#44596e;font-size:.85rem}
.ghost{color:#fff;font-weight:650;text-decoration:none;padding:.65rem .4rem;border-bottom:2px solid rgba(255,255,255,.35)}
.ghost:hover{border-bottom-color:var(--orange)}

/* iPhone quer, per CSS gezeichnet */
.device{margin:0 auto;max-width:62rem}
.phone{position:relative;aspect-ratio:2622/1206;border-radius:clamp(22px,6.2vw,64px);padding:clamp(6px,1.3vw,14px);
  background:linear-gradient(145deg,#3b4652,#11161c 40%,#2a323b 70%,#0c1014);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 0 0 2px #05080b,0 30px 80px rgba(0,0,0,.45)}
.phone::before,.phone::after{content:"";position:absolute;background:#1a2028;border-radius:3px}
.phone::before{top:-3px;left:18%;width:9%;height:4px}
.phone::after{top:-3px;left:30%;width:6%;height:4px}
.screen{position:relative;height:100%;border-radius:clamp(16px,5vw,52px);overflow:hidden;background:#5aaee0}
.screen img{display:block;width:100%;height:100%;object-fit:cover}
.screen .island{position:absolute;left:clamp(6px,1.6vw,16px);top:50%;transform:translateY(-50%);width:clamp(9px,2vw,22px);height:30%;
  background:#000;border-radius:999px}
.device figcaption{color:var(--on-water-2);font-size:.85rem;margin-top:.9rem;text-align:center}

/* Abschnitte */
main{display:block}
.section{padding:4rem 0}
.section + .section{padding-top:0}
.kicker{font-size:.8rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-ink);margin:0 0 .5rem}
.section h2{font-size:clamp(1.7rem,4.2vw,2.6rem);line-height:1.1;letter-spacing:-.02em;margin:0 0 1rem;font-weight:800}
.intro{max-width:44rem;color:var(--ink-2);font-size:1.1rem;margin:0 0 2.5rem}

/* Bojenkette als Trenner */
.buoys{height:14px;margin:0;border:0;
  background:
    radial-gradient(circle,var(--buoy) 0 4px,transparent 4.6px) 0 50%/120px 14px repeat-x,
    radial-gradient(circle,var(--line) 0 2.5px,transparent 3px) 30px 50%/30px 14px repeat-x}

/* Funktionen: je Bahn ein Block */
.lanes{list-style:none;margin:0;padding:0}
.lane{display:grid;gap:1.2rem 2.5rem;padding:2.2rem 0;border-top:1px solid var(--line)}
.lane:first-child{border-top:0;padding-top:0}
.lane h3{display:flex;align-items:center;gap:.8rem;font-size:1.45rem;line-height:1.2;margin:0 0 .6rem;letter-spacing:-.01em}
.board{flex:none;display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;background:var(--board);color:var(--board-ink);
  border:3px solid var(--board-ink);border-radius:4px;font-weight:850;font-size:1.25rem;font-variant-numeric:tabular-nums;line-height:1}
@media (prefers-color-scheme:dark){.board{border-color:#fff;background:#fff;color:#0b2035}}
.lane p{margin:0 0 .8rem;color:var(--ink-2)}
.lane p strong{color:var(--ink)}
.lane .facts{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.lane .facts li{font-size:.85rem;font-weight:650;padding:.2rem .6rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.shot{margin:0}
.shot .frame{border-radius:18px;overflow:hidden;background:#0c1014;padding:5px;box-shadow:var(--shadow)}
.shot img{display:block;width:100%;border-radius:14px}
.shot figcaption{font-size:.85rem;color:var(--ink-2);margin-top:.6rem}

/* Splitzeit als typografisches Element */
.sechead{display:grid;gap:0 2rem;align-items:end}
.sechead .split{margin:0 0 2.2rem;color:var(--ink)}
.split i{font-style:normal;color:var(--orange)}
.split{display:flex;align-items:baseline;gap:.35rem;font-variant-numeric:tabular-nums;font-weight:850;letter-spacing:-.03em;line-height:1}
.split b{font-size:clamp(3.4rem,12vw,8rem);font-weight:900}
.split span{font-size:clamp(1.2rem,3vw,2rem);color:var(--ink-2);font-weight:700;letter-spacing:0}

/* So funktioniert's: Startklar – Achtung – Los */
.start{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.start li{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.3rem 1.2rem}
.start .cmd{display:block;font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink);margin-bottom:.35rem}
.start h3{margin:0 0 .4rem;font-size:1.2rem;line-height:1.25}
.start p{margin:0;color:var(--ink-2)}
.start li::after{content:"";position:absolute;left:1.3rem;right:1.3rem;top:0;height:4px;border-radius:0 0 4px 4px;
  background:radial-gradient(circle,var(--buoy) 0 2px,transparent 2.5px) 0 50%/16px 4px repeat-x;opacity:.8}
.start li:last-child::after{background:var(--orange);opacity:1}
.needs{margin:1.5rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;color:var(--ink-2);font-size:.95rem}
.needs li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--buoy);margin-right:.5rem;vertical-align:.1em}

/* Außerdem */
.extras{display:grid;gap:1rem;margin:0;padding:0;list-style:none}
.extras li{padding:1.1rem 1.2rem;border-left:4px solid var(--water);background:var(--surface);border-radius:0 12px 12px 0}
@media (prefers-color-scheme:dark){.extras li{border-left-color:#5aaee0}}
.extras strong{display:block;margin-bottom:.2rem}
.extras span{color:var(--ink-2);font-size:.95rem}

/* Status unten */
.finish{border-radius:24px;padding:2.2rem 1.4rem;text-align:left}
.finish h2{color:#fff}
.finish p{color:var(--on-water-2);max-width:40rem;margin:0 0 1rem}
.finish a{color:#fff}
.en{color:var(--ink-2);font-size:.95rem;max-width:48rem}
.note-shots{color:var(--ink-2);font-size:.85rem;margin:1.5rem 0 0}

/* Unterseiten */
.pagehead{padding:2.6rem 0 2.2rem}
.pagehead .wrap{max-width:48rem}
.pagehead h1{font-size:clamp(1.8rem,5vw,2.8rem);line-height:1.1;letter-spacing:-.02em;margin:0;font-weight:800;max-width:30ch}
.doc{padding:2.5rem 0 4rem}
.doc .wrap{max-width:48rem}
.doc h1{font-size:2rem;line-height:1.2}
.doc h2{font-size:1.35rem;line-height:1.25;margin:2.4rem 0 .6rem;letter-spacing:-.01em}
.doc h2::before{content:"";display:block;width:4.5rem;height:6px;margin-bottom:.7rem;
  background:radial-gradient(circle,var(--buoy) 0 3px,transparent 3.5px) 0 50%/18px 6px repeat-x}
.doc h3{font-size:1.1rem;margin:1.6rem 0 .4rem}
.doc .pagehead-note{color:var(--ink-2)}
ul.features{padding-left:1.2rem}
ul.features li{margin:.4rem 0}
.note{background:var(--note-bg);border-left:5px solid var(--orange);padding:.8rem 1rem;border-radius:6px;margin:1.2rem 0}
.note p{margin:.4rem 0}
.draft{background:#7a1f1f;color:#fff;padding:.9rem 1rem;border-radius:6px;font-weight:700;margin:0 0 1.5rem}
.open{background:var(--note-bg);border:1px dashed var(--orange);padding:0 .3em;border-radius:4px;font-weight:600;color:var(--orange-ink)}
details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.1rem 1.1rem;margin:.7rem 0}
details[open]{box-shadow:var(--shadow)}
summary{cursor:pointer;font-weight:650;padding:.85rem 0;list-style-position:outside}
summary::marker{color:var(--orange)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.95rem}
th,td{border:1px solid var(--line);padding:.5rem .7rem;text-align:left;vertical-align:top}
th{background:var(--surface)}
ul.credits{list-style:none;padding:0;margin:0}
ul.credits li{margin:0 0 1.2rem}
ul.credits h3{margin:0 0 .3rem;font-size:1.1rem}
.muted{color:var(--ink-2)}

/* Fuß */
footer.site{border-top:1px solid var(--line);padding:2rem 0 2.5rem;color:var(--ink-2);font-size:.92rem}
footer.site .wrap{display:grid;gap:.8rem}
footer.site ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem 1.3rem}
footer.site a{color:var(--ink);text-decoration:none;font-weight:600}
footer.site a:hover{text-decoration:underline}
footer.site p{margin:0}

nav .wide{display:none}
@media (min-width:48rem){
  header.site{position:sticky;top:0}
  nav ul{gap:0 1.2rem}
  nav a{font-size:.95rem}
  nav .wide{display:list-item}
  .hero{padding:4.5rem 0 3.5rem}
  .start{grid-template-columns:repeat(3,1fr)}
  .sechead{grid-template-columns:1fr auto}
  .extras{grid-template-columns:repeat(2,1fr)}
  .finish{padding:3rem 3rem}
}
@media (min-width:64rem){
  .lane{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);align-items:center}
  .lane:nth-child(even){grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
  .lane:nth-child(even) .copy{order:2}
  .extras{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}