/* === AMG Saison-App — Design nach Figma-Entwurf 1 (Motorsport-app) ===
   Foto-Look: Vollbild-Rennfoto, grosse Typo, pinkes CAMINO-Logo,
   iOS-Segmented-Control, Status mit Leader-Linien, pinke Timeline. */

/* Gotham Pro - Daniels Dateien in assets/typo/ */
@font-face {
  font-family: 'Gotham Pro';
  src: url('assets/typo/gothampro.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham Pro';
  src: url('assets/typo/gothampro_medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham Pro';
  src: url('assets/typo/gothampro_bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --pink: #ed76ac;            /* aus dem CAMINO-Logo gemessen */
  --red: #ae0000;             /* FEHLT (Figma 5:212) */
  --bg: #000;
  --white: #fff;
  --dim: rgba(255,255,255,.55);
  --line: rgba(255,255,255,.85);
  --overlay: rgba(0,0,0,.16);
  --font: 'Gotham Pro', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --sysfont: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Helvetica Neue', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--white);
  font-family: var(--font);
  font-size: 15px; line-height: 18px; letter-spacing: -1px;
  overflow: hidden; overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea {
  font-family: var(--font); font-size: 16px; letter-spacing: -0.5px;
  color: var(--white); background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 10px 12px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--pink); }
a { color: var(--white); }

/* === Foto-Hintergrund (Karte + Login) === */
.race-bg { position: absolute; inset: 0; overflow: hidden; background: #000; }
.race-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% top;
  filter: grayscale(1) contrast(1.08) brightness(1.02); /* Entwurf: S/W-Look */
}
.race-bg .shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 42%, rgba(0,0,0,.57) 62%, rgba(0,0,0,.92) 100%),
    var(--overlay);
}
.past .race-bg img { opacity: .55; }

/* === Login (Splash-Look) === */
#login { position: fixed; inset: 0; z-index: 100; background: var(--bg); }
#login .race-bg .shade { background: linear-gradient(to bottom, rgba(0,0,0,.05) 40%, rgba(0,0,0,.75) 100%); }
#login .inner {
  position: relative; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: calc(env(safe-area-inset-bottom) + 34px); gap: 22px;
}
#login .login-logo { width: 206px; max-width: 56%; height: auto; position: absolute; top: 27%; left: 50%; transform: translateX(-50%); }
#login .dots { display: flex; gap: 14px; height: 12px; }
#login .dots span { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.75); }
#login .dots span.on { background: var(--pink); border-color: var(--pink); }
#login .pad { display: grid; grid-template-columns: repeat(3, 68px); gap: 12px; }
#login .pad button {
  height: 68px; border-radius: 50%; background: rgba(255,255,255,.14);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 24px; letter-spacing: 0;
}
#login .pad button:active { background: rgba(255,255,255,.3); }
#login .err { color: var(--red); min-height: 18px; font-size: 14px; text-shadow: 0 1px 4px #000; }

/* === Shell === */
#app { display: none; height: 100%; position: relative; }
#app.on { display: block; }
header.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; justify-content: center;
  padding-top: calc(env(safe-area-inset-top) + 14px);
  pointer-events: none;
}
header.topbar button { pointer-events: auto; padding: 4px 10px; }
header.topbar img { width: 79px; height: auto; display: block; }

/* === Pager === */
#pager {
  height: 100%; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#pager::-webkit-scrollbar { display: none; }

/* === Rennseite === */
.race-page {
  flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
  position: relative; min-width: 0; height: 100%;
}
.race-scroll {
  position: relative; height: 100%; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 0 29px calc(env(safe-area-inset-bottom) + 64px);
}
.race-scroll::-webkit-scrollbar { display: none; }

.race-title .d { white-space: nowrap; }
.race-title {
  color: #fff;
  margin-top: calc(env(safe-area-inset-top) + 78px);
  font-weight: 700; font-size: 52px; line-height: 1.0;
  letter-spacing: -0.08em; text-transform: uppercase;
  overflow-wrap: break-word;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

/* === Segmented Control (iOS) === */
.seg {
  margin: clamp(36px, 8vh, 84px) auto 0; width: min(296px, 100%);
  display: flex; align-items: center; height: 26px;
  background: rgba(120,120,128,.24); border-radius: 9px; padding: 2px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.seg-btn {
  flex: 1 0 0; min-width: 0; height: 22px; border-radius: 7px;
  font-family: var(--sysfont); font-size: 13px; line-height: 18px;
  letter-spacing: -0.08px; color: #fff; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; padding: 0 6px;
}
.seg-btn.on {
  background: #fff; color: #000; font-weight: 600;
  box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04);
}
.seg-sep { width: 1px; height: 12px; background: #8e8e93; opacity: .3; border-radius: .5px; flex: 0 0 auto; }
.seg-btn.on + .seg-sep, .seg-sep:has(+ .seg-btn.on) { opacity: 0; }

/* === Status-Block (SOFORT ÜBERSICHT) === */
.status { margin: 32px 6px 0; }
.st-row {
  display: flex; align-items: baseline; gap: 8px;
  text-transform: uppercase; margin-bottom: 0; line-height: 18px;
}
.st-row i { flex: 1 0 12px; border-top: 1px solid var(--line); transform: translateY(-4px); }
.st-row .val { text-align: right; }
.st-row.st-r, .st-row.st-r .val { color: var(--red); }
.st-row.st-r i { border-color: var(--red); }
.st-row.st-y .val { color: var(--dim); }
.st-row.st-y i { border-color: rgba(255,255,255,.35); }

/* === Timeline (Zeitplan) === */
.tl { margin: 42px 0 0 11px; padding-left: 13px; border-left: 1.5px solid var(--pink); position: relative; }
.tl-item { position: relative; padding: 0 0 26px 0; }
.tl-item::before {
  content: ''; position: absolute; left: -17.5px; top: 5px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--pink);
}
.tl-item .t1 { text-transform: uppercase; }
.tl-item .t2 { color: var(--white); }
.tl-item .t2 a { text-decoration: underline; text-underline-offset: 2px; }
.tl-item .t2 em { color: var(--dim); font-style: normal; }
.tl-empty { color: var(--dim); text-transform: uppercase; margin: 42px 0 26px; }
.tl-actions { margin: 6px 0 0 24px; }
.tl-actions button, .tl-actions a {
  display: block; color: var(--dim); text-transform: uppercase; padding: 6px 0;
  text-decoration: none; text-align: left;
}

/* === Dunkler Fortsetzungs-Bereich (Budget, Belege, ...) === */
.deep { margin: 30px -29px 0; padding: 8px 29px 20px; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.85) 60px); }
.deep h3 {
  font-size: 15px; font-weight: 400; letter-spacing: -0.5px; text-transform: uppercase;
  color: var(--dim); margin: 34px 0 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.deep h3 button { color: var(--dim); font-size: 20px; line-height: 1; padding: 0 4px; }
.deep .st-row { margin-bottom: 2px; }
.deep .rowline { display: block; width: 100%; text-align: left; padding: 4px 0; text-transform: uppercase; }
.hintline { color: var(--dim); font-size: 13px; letter-spacing: -0.5px; margin-top: 8px; }
.filelink { color: var(--dim); font-size: 13px; letter-spacing: -0.5px; }

/* Belege-Galerie */
.rcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rcgrid .rc {
  aspect-ratio: 3/4; border-radius: 6px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14); overflow: hidden; position: relative;
}
.rcgrid .rc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcgrid .rc .amt {
  position: absolute; bottom: 0; left: 0; right: 0; font-size: 11px; letter-spacing: -0.3px;
  padding: 3px 6px; background: rgba(0,0,0,.7);
}
.rcgrid .rc .pdfmark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 12px; }

/* generische Buttons (Formulare, Aktionen) */
.btn {
  display: block; width: 100%; text-align: center; padding: 13px; border-radius: 10px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  text-transform: uppercase; margin-top: 10px;
}
.btn:active { background: rgba(255,255,255,.22); }
.btn.primary { background: var(--pink); border-color: var(--pink); color: #000; }
.btn.danger { color: var(--red); }
.editline { display: block; width: 100%; text-align: center; color: var(--dim); text-transform: uppercase; padding: 26px 0 8px; }

/* === Page Dots (unter dem Rennnamen, Figma 5:899) === */
.pagedots { display: flex; justify-content: center; gap: 9px; margin-top: 20px; }
.pagedots .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.35); border: none; padding: 0;
}
.pagedots .dot.cur { background: #fff; }

/* === Sheets (Übersicht, Formulare) === */
.sheet { position: fixed; inset: 0; z-index: 50; background: #000; display: none; flex-direction: column; }
.sheet.on { display: flex; }
.sheet > header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 14px) 22px 12px;
  border-bottom: 1px solid rgba(255,255,255,.14); flex: 0 0 auto;
}
.sheet > header h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.5px; text-transform: uppercase;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet > header button { color: var(--dim); flex: 0 0 auto; padding: 6px 0; text-transform: uppercase; font-size: 13px; letter-spacing: -0.3px; }
.sheet > .body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 18px 22px calc(env(safe-area-inset-bottom) + 32px); }

.section { margin-bottom: 26px; }
.section > h3 {
  font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--dim);
  margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;
}
.card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
  font-size: 14px; letter-spacing: -0.5px;
}
.card .row1 { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.card .row1 .t { font-weight: 700; }
.card .row1 .r { color: var(--dim); font-size: 13px; flex: 0 0 auto; }
.card .sub { color: var(--dim); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.card .sub a { color: var(--white); }
.card.tappable:active { background: rgba(255,255,255,.14); }
.ovnum { font-size: 28px; font-weight: 700; letter-spacing: -1.5px; }
.ovnum small { font-size: 13px; color: var(--dim); font-weight: 400; letter-spacing: -0.5px; }
.racelist .card { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.racelist .when { color: var(--dim); font-size: 13px; flex: 0 0 auto; }
.badge { display: inline-block; font-size: 11px; letter-spacing: 0; padding: 2px 8px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.25); color: var(--dim); vertical-align: 1px; }
.badge.g { color: var(--pink); border-color: var(--pink); }

/* Formulare */
.frm label { display: block; font-size: 12px; letter-spacing: 0; color: var(--dim); margin: 14px 0 5px; text-transform: uppercase; }
.frm .checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.frm .checks label {
  display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: var(--white);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 8px 12px;
}
.frm .checks input { width: auto; accent-color: var(--pink); }

/* Demo-Banner (Mock-Modus) */
#mockbanner {
  display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--pink); color: #000; font-size: 11px; letter-spacing: 0; text-align: center; padding: 2px;
  text-transform: uppercase;
}
body.mock #mockbanner { display: block; }

/* === Reisetag (Ebene 1): Stoerungen, Jetzt-Karte, Kette v2 === */
.issues { margin: 26px 6px 0; }
.iss-row { display: flex; gap: 8px; align-items: baseline; color: var(--red); text-transform: uppercase; padding: 3px 0; cursor: pointer; }
.iss-row .mark { flex: 0 0 12px; font-weight: 700; }
.iss-row .txt { flex: 1 1 auto; }
.iss-tel { margin-top: 8px; font-size: 13px; letter-spacing: -0.3px; color: var(--dim); text-transform: none; }
.iss-tel a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }

.nowcard { margin: 26px 6px 0; padding: 14px 16px 15px; border: 1px solid rgba(255,255,255,.3); border-radius: 14px; background: rgba(0,0,0,.38); cursor: pointer; }
.nowcard .k { font-size: 12px; letter-spacing: 0; color: var(--pink); text-transform: uppercase; }
.nowcard .t { font-size: 19px; line-height: 22px; font-weight: 700; text-transform: uppercase; margin-top: 5px; }
.nowcard .s { color: var(--dim); margin-top: 3px; }
.nowcard .links { margin-top: 7px; font-size: 13px; letter-spacing: -0.3px; color: var(--dim); }
.nowcard .links a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; margin-left: 6px; }

.tl-day { text-transform: uppercase; color: var(--dim); font-size: 12px; letter-spacing: 0; margin: 4px 0 14px; }
.tl-item.done { opacity: .45; }
.tl-item.done .t1::after { content: ' \2713'; }
.tl-trans { color: var(--dim); font-size: 13px; letter-spacing: 0; text-transform: uppercase; padding: 0 0 22px 0; }
.tl-trans.knapp { color: var(--red); }
.tl-item.hole { border: 1px dashed rgba(255,255,255,.45); border-radius: 10px; padding: 10px 12px; margin: 0 0 24px; }
.tl-item.hole::before { display: none; }
.tl-item.hole .t1 { color: var(--red); }

.foot { margin: 30px 0 16px; }
.deeplink { display: block; width: 100%; text-align: left; margin-top: 16px; padding: 12px 0; text-transform: uppercase; color: var(--dim); border-top: 1px solid rgba(255,255,255,.2); }

/* === Ebene 2: Etappen-Leseansicht === */
.bigref { font-size: 34px; font-weight: 700; letter-spacing: 0; text-align: center; padding: 16px 0 2px; cursor: pointer; user-select: all; -webkit-user-select: all; }
.bigref.copied { color: var(--pink); }
.hintline.center { text-align: center; }
.dt-segs { margin-top: 16px; }
.dt-seg { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.12); text-transform: uppercase; }
.dt-seg a { text-decoration: underline; text-underline-offset: 2px; }
.dt-seg .s { color: var(--dim); font-size: 13px; letter-spacing: -0.3px; text-transform: none; margin-top: 2px; }
.dt-rows { margin-top: 18px; }
.dt-rows .st-row { margin-bottom: 2px; }
.dt-note { color: var(--dim); font-size: 13px; letter-spacing: -0.3px; margin-top: 14px; }
.dt-iss { color: var(--red); font-size: 13px; letter-spacing: -0.3px; margin-top: 14px; cursor: pointer; }
.dt-iss.quiet { color: var(--dim); }
.dt-iss u { text-underline-offset: 2px; }
#detail h3 { font-size: 15px; text-transform: uppercase; margin: 24px 0 8px; letter-spacing: -0.5px; }
.shiftrow { display: flex; gap: 8px; }
.shiftrow button { flex: 1 1 0; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; padding: 9px 0; text-transform: uppercase; }
.shiftrow button:active { background: rgba(255,255,255,.2); }
.dt-actions { margin-top: 22px; }
.sheet > header .hspace { width: 60px; flex: 0 0 auto; }
#deep .deep { margin: 0; padding: 8px 0 20px; background: none; }