/* Frontpage refresh — scoped under .fp, loaded only on the (logged-out) index page. */

.fp { display:block; --fp-gutter:max(64px, calc((100% - 1120px) / 2)); }  /* full-bleed backgrounds, content centred like the header */

/* ---------- header: same side gutter as the page content (toolbar lives outside .fp) ---------- */
ion-toolbar.fp-toolbar{--padding-start:max(48px, calc((100% - 1120px) / 2 - 16px));--padding-end:max(58px, calc((100% - 1120px) / 2 - 6px));}  /* minus menu/end button inner spacing */
@media (max-width: 768px){ion-toolbar.fp-toolbar{--padding-start:14px;--padding-end:14px;}}
/* phones: login/register buttons are hidden (ion-hide-sm-down), so centre the logo across the full toolbar */
@media (max-width: 575.98px){
  ion-toolbar.fp-toolbar ion-title{position:absolute;inset:0;padding:0 56px;pointer-events:none;}
  ion-toolbar.fp-toolbar ion-title a{pointer-events:auto;}
  ion-toolbar.fp-toolbar .header_logo{margin:0 auto;-webkit-mask-position:center !important;mask-position:center !important;}
}

/* ---------- HERO ---------- */
.fp .hero{position:relative;min-height:540px;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#0a6f93 0%,#0b84ad 55%,var(--ion-color-primary) 100%);}
/* echte Alsterrunde: feine Kontur am Übergang Block/Foto, über der Verlaufs-Ebene, ein Lichtpunkt läuft die Runde */
/* Kontur auf dem Bild, direkt an die Textspalte angrenzend (die endet bei 58 % − 40px) – bei jeder Breite gleich */
.fp .hero .route{position:absolute;z-index:2;top:7%;height:86%;width:auto;left:calc(58% - 24px);pointer-events:none;
  overflow:visible;}  /* Stationen am Rand (Alsterterrasse): der Ping-Ring ragt über den SVG-Rahmen hinaus */
.fp .hero .route-line{fill:none;stroke:rgba(255,255,255,.26);stroke-width:3;stroke-linejoin:round;}
.fp .hero .route{--fp-lap:16s;}
.fp .hero .route-runner{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-dasharray:1.2 98.8;
  animation:fp-run var(--fp-lap) linear infinite;filter:drop-shadow(0 0 4px rgba(255,255,255,.8));}
@keyframes fp-run{to{stroke-dashoffset:-100;}}
/* Messstationen: Punkt leuchtet auf + Ring breitet sich aus, sobald der Lichtpunkt vorbeikommt */
.fp .hero .station-dot{fill:rgba(255,255,255,.8);stroke:rgba(11,132,173,.9);stroke-width:3;transform-box:fill-box;transform-origin:center;
  animation:fp-station var(--fp-lap) linear infinite;animation-delay:calc(var(--t) * var(--fp-lap));}
.fp .hero .station-ping{fill:none;stroke:#fff;stroke-width:2.5;opacity:0;transform-box:fill-box;transform-origin:center;
  animation:fp-ping var(--fp-lap) ease-out infinite;animation-delay:calc(var(--t) * var(--fp-lap));}
@keyframes fp-station{0%{fill:#fff;transform:scale(1.5);}5%{fill:rgba(255,255,255,.8);transform:scale(1);}100%{fill:rgba(255,255,255,.8);transform:scale(1);}}
@keyframes fp-ping{0%{opacity:.9;transform:scale(1);}7%{opacity:0;transform:scale(3.4);}100%{opacity:0;transform:scale(3.4);}}
@media (prefers-reduced-motion: reduce){
  .fp .hero .route-runner,.fp .hero .station-ping{display:none;}
  .fp .hero .station-dot{animation:none;}
}
.fp .hero .photo{position:absolute;right:0;top:0;bottom:0;width:42%;overflow:hidden;z-index:1;}
.fp .hero .photo img{width:100%;height:100%;object-fit:cover;object-position:center 70%;}
/* nahtloser Übergang Block -> Foto: dieselbe Diagonale wie der Hero-Hintergrund als Ebene über dem
   Foto, deckend bis zur Bildkante (58 %), dann über ~die halbe Fotobreite ausgeblendet */
.fp .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:inherit;
  -webkit-mask-image:linear-gradient(90deg,#000 58%,transparent 78%);mask-image:linear-gradient(90deg,#000 58%,transparent 78%);}
.fp .hero .inner{position:relative;z-index:2;padding:52px calc(42% + 40px) 104px var(--fp-gutter);}
.fp .hero h1{font-size:46px;font-weight:800;line-height:1.1;letter-spacing:-1px;margin:0;
  color:#fff;text-decoration:none;text-shadow:0 1px 2px rgba(0,0,0,.12);}
.fp .hero h1 .hl{background:linear-gradient(transparent 64%,rgba(255,255,255,.2) 64%);padding:0 .06em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;}
.fp .hero .lead{margin-top:26px;font-size:20px;font-weight:500;line-height:1.4;opacity:.96;max-width:600px;}
.fp .hero .ctas{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:28px;}
.fp .hero .ctas ion-button{margin:0;--padding-start:22px;--padding-end:24px;}
.fp .hero .login-link{color:#fff !important;font-size:16px;text-decoration:none !important;opacity:.95;}
.fp .hero .login-link b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;}
.fp .hero ion-button{--border-radius:999px;}
.fp .hero .badges{display:flex;gap:10px;margin-top:24px;}
.fp .hero .badges img{height:40px;width:auto;display:block;}

/* ---------- "recording with" card, overlapping the hero's lower edge ---------- */
.fp .works{padding:0 var(--fp-gutter) 8px;position:relative;z-index:3;}
.fp .works-card{margin-top:-52px;background:#fff;border-radius:20px;padding:20px 24px 16px;
  box-shadow:0 14px 40px rgba(20,60,80,.14);border:1px solid var(--ion-background-color-step-100);}
.fp .works-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.fp .works .label{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--ion-color-medium);}
.fp .works .sync{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--ar-success-text);}
.fp .works .dot{width:8px;height:8px;border-radius:50%;background:var(--ion-color-success);animation:fp-pulse 2s ease-out infinite;}
@keyframes fp-pulse{0%{box-shadow:0 0 0 0 rgba(45,211,111,.55);}100%{box-shadow:0 0 0 10px rgba(45,211,111,0);}}
.fp .works .tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.fp .works .tile{height:72px;border-radius:14px;border:1px solid var(--ar-line);
  background:var(--ion-background-color-step-50);display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .2s,box-shadow .2s,border-color .2s,background .2s;}
.fp .works .tile:hover{transform:translateY(-3px);background:#fff;border-color:var(--ion-color-primary);
  box-shadow:0 8px 20px rgba(19,170,214,.18);}
.fp .works .tile img{width:auto;display:block;filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s;}
.fp .works .tile:hover img{filter:none;opacity:1;}
@media (hover:none){.fp .works .tile img{filter:none;opacity:1;}}  /* no hover on touch: show brand colours right away */
.fp .works .tile.garmin img{height:24px;}
.fp .works .tile.polar img{height:18px;}   /* bold wordmark reads heavier — keep smaller */
.fp .works .tile.suunto img{height:32px;}
.fp .works .tile svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;flex:0 0 auto;}
.fp .works .tile span{font-size:16px;font-weight:700;letter-spacing:-.2px;}
.fp .works .tile.apple{color:#222;}
.fp .works .tile.app{color:var(--ar-link);background:rgba(19,170,214,.08);border-color:rgba(19,170,214,.4);}
.fp .works-sub{text-align:center;color:var(--ion-color-medium);font-size:15px;margin-top:14px;}

/* ---------- generic section ---------- */
.fp .section{padding:56px var(--fp-gutter);}
.fp .section.alt{background:var(--ion-background-color-step-50);border-top:1px solid var(--ion-background-color-step-100);border-bottom:1px solid var(--ion-background-color-step-100);}
/* only the section's own heading — not the <h2> inside included ion-items (best_time_item) */
.fp .section > h2,.fp .challenge-card h2{font-size:32px;font-weight:800;letter-spacing:-.3px;margin:0 0 6px;color:var(--ar-ink);}
.fp .section > .sub{color:var(--ion-color-medium);font-size:18px;margin:0 0 28px;max-width:680px;line-height:1.45;}

/* ---------- current challenge ---------- */
.fp .challenge{padding-bottom:0;}
.fp .challenge-card{display:block;text-decoration:none;color:inherit;border-radius:18px;padding:28px 30px;
  background:linear-gradient(135deg,rgba(19,170,214,.10),rgba(19,170,214,.02));border:1px solid rgba(19,170,214,.35);}
.fp .challenge-card .tag{display:inline-block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;
  color:var(--ar-link);margin-bottom:8px;}
.fp .challenge-card h2{margin-bottom:10px;}
.fp .challenge-card .teaser{color:var(--ar-ink);font-size:16px;line-height:1.5;}
.fp .challenge-card .meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  margin-top:16px;color:var(--ion-color-medium);font-size:15px;}
.fp .challenge-card .more{color:var(--ar-link);font-weight:700;}

/* ---------- how it works ---------- */
.fp .howto .steps{display:flex;align-items:stretch;gap:14px;}
.fp .howto .step{flex:1;background:#fff;border:1px solid var(--ar-line);border-radius:18px;padding:28px 26px 24px;position:relative;box-shadow:0 6px 20px rgba(20,60,80,.09);}
.fp .howto .num{position:absolute;top:-15px;left:26px;width:32px;height:32px;border-radius:50%;background:var(--ion-color-primary);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;}
.fp .howto .ico{width:50px;height:50px;border-radius:14px;background:rgba(19,170,214,.12);display:flex;align-items:center;justify-content:center;margin:6px 0 14px;}
.fp .howto .ico svg{width:26px;height:26px;stroke:var(--ion-color-primary);fill:none;stroke-width:2;}
.fp .howto h3{font-size:19px;font-weight:700;margin:0 0 6px;color:var(--ar-ink);}
.fp .howto p{color:var(--ion-color-medium);font-size:16px;line-height:1.5;margin:0;}
.fp .howto .arrow{display:flex;align-items:center;color:var(--ar-link);font-size:26px;font-weight:700;}

/* ---------- feature cards ---------- */
.fp .feat ion-card{margin:0;height:100%;border-radius:18px;border:1px solid var(--ar-line);box-shadow:0 6px 20px rgba(20,60,80,.10);}
.fp .feat ion-card-content{padding:26px;}
.fp .feat .ico{width:54px;height:54px;border-radius:15px;background:rgba(19,170,214,.12);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.fp .feat .ico svg{width:28px;height:28px;stroke:var(--ion-color-primary);fill:none;stroke-width:2;}
.fp .feat h3{font-size:21px;font-weight:700;margin:0 0 6px;color:var(--ar-ink);}
.fp .feat p{color:var(--ion-color-medium);font-size:16px;line-height:1.5;margin:0;}

/* ---------- recurring campaigns ---------- */
.fp .campaigns{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.fp .campaign{background:#fff;border-radius:18px;
  border:1px solid var(--ar-line);border-top:4px solid var(--ion-color-primary);padding:24px 26px;
  box-shadow:0 6px 20px rgba(20,60,80,.09);}
.fp .campaign .ico{width:50px;height:50px;border-radius:14px;background:rgba(19,170,214,.12);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.fp .campaign .ico svg{width:26px;height:26px;stroke:var(--ar-link);fill:none;stroke-width:2;}
.fp .campaign h3{font-size:21px;font-weight:700;margin:0 0 6px;color:var(--ar-ink);}
.fp .campaign p{color:var(--ion-color-medium);font-size:16px;line-height:1.5;margin:0;}
.fp .actions .hint{color:var(--ion-color-medium);font-size:15px;margin:20px 0 0;}

/* ---------- top lap times ---------- */
.fp .toplaps ion-card{border-radius:18px;border:1px solid var(--ar-line);box-shadow:0 6px 20px rgba(20,60,80,.10);}
.fp .toplaps ion-card-header{background:var(--ar-link);padding:14px 16px;}
.fp .toplaps ion-card-title{color:#fff;font-size:17px;font-weight:700;}

/* swiper keeps the content width (so its snapping stays right) but may overflow into the gutter,
   so cards don't vanish behind the section padding while swiping; the full-width section clips instead */
.fp .section.toplaps{overflow:hidden;}
.fp .toplaps swiper-container::part(container){overflow:visible;}

/* ---------- testimonials ---------- */
.fp .testi .quotes{display:flex;gap:22px;}
.fp .testi .q{flex:1;margin:0;border-radius:18px;box-shadow:0 4px 18px rgba(20,60,80,.06);}
.fp .testi ion-card-content{padding:26px;}
.fp .testi .stars{color:#f5a623;font-size:16px;letter-spacing:3px;margin-bottom:10px;}
.fp .testi blockquote{margin:0 0 16px;font-size:17px;line-height:1.5;color:var(--ar-ink);}
.fp .testi .who{display:flex;align-items:center;gap:12px;}
.fp .testi .avatar{width:42px;height:42px;border-radius:50%;background:var(--ion-background-color-step-150);flex:0 0 auto;}
.fp .testi .who b{display:block;font-size:15px;}
.fp .testi .who span{color:var(--ion-color-medium);font-size:13px;}

/* ---------- footer ---------- */
.fp .fp-foot{padding:40px var(--fp-gutter);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;color:var(--ion-color-medium);font-size:15px;}

.fp .fp-foot ion-chip{font-size:15px;}

/* ---------- responsive ---------- */
@media (max-width: 768px){
  .fp{--fp-gutter:22px;}
  .fp .hero{min-height:0;}
  .fp .hero .photo{display:none;}
  .fp .hero .route{top:auto;bottom:-14%;height:98%;left:auto;right:-80px;opacity:.45;}
  .fp .hero .login-link{text-align:center;}
  .fp .hero .inner{padding:40px 22px;}
  .fp .hero h1{font-size:32px;}
  .fp .hero .lead{font-size:17px;}
  .fp .hero .ctas{flex-direction:column;align-items:stretch;gap:10px;}
  .fp .hero .ctas ion-button{width:100%;margin:0;font-size:14px;}
  .fp .hero .ctas ion-button::part(native){white-space:normal;}
  .fp .hero .inner{padding-bottom:80px;}
  .fp .works-card{margin-top:-40px;padding:16px;}
  .fp .works .tiles{grid-template-columns:repeat(2,1fr);gap:10px;}
  .fp .works .tile{height:60px;}
  .fp .works .tile.app{grid-column:span 2;}
  .fp .works,.fp .section,.fp .fp-foot{padding-left:22px;padding-right:22px;}
  .fp .howto .steps{flex-direction:column;}
  .fp .howto .arrow{transform:rotate(90deg);justify-content:center;}
  .fp .testi .quotes{flex-direction:column;}
  .fp .campaigns{grid-template-columns:1fr;gap:14px;}
  .fp .section > h2,.fp .challenge-card h2{font-size:26px;}
  .fp .fp-foot{flex-direction:column;align-items:flex-start;}
}