/* =========================================================================
   SPUR -- Komponenten. Buttons/Karten/Chips/Bottom-Sheet/Tab-Bar/Fahrbahn-Trenner.
   Alle Komponenten nutzen ausschliesslich tokens.css-Variablen.
   ========================================================================= */

.phone{
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  position:relative;
  background:var(--oberflaeche);
  padding-bottom:96px; /* Platz fuer Tab-Bar */
}
.phone.desktop{max-width:1240px;padding-bottom:32px}

/* ---- Buttons: rund wie Fahrbahnreflektoren ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:12px 24px;
  border-radius:var(--radius-button);
  border:none;
  font-family:var(--font-text);
  font-weight:600;
  font-size:16px;
  cursor:pointer;
  text-decoration:none;
  position:relative;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:focus-visible{outline:none;box-shadow:var(--fokus-ring)}
.btn-primary{background:var(--primary);color:var(--primary-on);box-shadow:var(--schatten)}
.btn-primary:active{transform:scale(.98)}
.btn-primary[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none}
.btn-secondary{background:transparent;color:var(--primary-text);border:1.5px solid var(--rand)}
.btn-ghost{background:transparent;color:var(--oberflaeche-text);text-decoration:underline;min-height:44px;padding:8px 4px}
.btn-danger{background:transparent;color:#B23A3A;border:1.5px solid rgba(178,58,58,.35)}
.btn-block{width:100%}
/* Katzenauge-Glanzpunkt */
.btn-primary::after{
  content:"";
  position:absolute;top:6px;left:18px;
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.55);
}

/* ---- Karten ---- */
.karte{
  background:var(--oberflaeche-karte);
  border-radius:var(--radius-card);
  padding:20px;
  box-shadow:var(--schatten);
  border:1px solid var(--rand);
}
.karte + .karte{margin-top:16px}
.karte-flach{background:transparent;box-shadow:none;border:1px solid var(--rand)}

/* ---- Chips ---- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:8px 16px;
  border-radius:var(--radius-button);
  background:var(--oberflaeche-karte);
  border:1px solid var(--rand);
  font-size:14px;font-weight:600;
  color:var(--oberflaeche-text);
  white-space:nowrap;
}
.chip[aria-selected="true"]{background:var(--primary);color:var(--primary-on);border-color:var(--primary)}
.chip-reihe{display:flex;gap:8px;overflow-x:auto;padding:4px 0;scrollbar-width:none}
.chip-reihe::-webkit-scrollbar{display:none}

/* ---- Geschwindigkeits-Legende (mit Ink-Halo, s. design.md Lesson) ---- */
.tempo-legende{display:flex;flex-wrap:wrap;gap:8px}
.tempo-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;
  color:var(--ink-halo);
  background:color-mix(in srgb, var(--v-color) 88%, white 0%);
  border:2px solid var(--ink-halo);
}
.tempo-chip.c0{--v-color:var(--v-0-30)}
.tempo-chip.c1{--v-color:var(--v-30-50)}
.tempo-chip.c2{--v-color:var(--v-50-100)}
.tempo-chip.c3{--v-color:var(--v-100-130)}
.tempo-chip.c4{--v-color:var(--v-130-180)}
.tempo-chip.c5{--v-color:var(--v-180-plus)}
.tempo-chip::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--v-color)}

/* ---- Bottom-Sheet ---- */
.sheet-overlay{
  position:fixed;inset:0;background:rgba(20,17,14,.5);
  display:flex;align-items:flex-end;justify-content:center;
  z-index:50;
}
.sheet{
  width:100%;max-width:430px;
  background:var(--oberflaeche-karte);
  border-radius:24px 24px 0 0;
  padding:12px 20px 28px;
  box-shadow:0 -12px 32px rgba(20,17,14,.22);
}
.sheet-griff{
  width:40px;height:5px;border-radius:999px;
  background:var(--rand);margin:0 auto 16px;
}

/* ---- Tab-Bar ---- */
.tab-bar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;
  width:100%;max-width:430px;
  display:flex;justify-content:space-around;
  background:var(--oberflaeche-karte);
  border-top:1px solid var(--rand);
  padding:10px 4px calc(10px + env(safe-area-inset-bottom));
  z-index:40;
}
.tab-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:56px;min-height:44px;justify-content:center;
  font-size:11px;font-weight:600;color:var(--oberflaeche-text);
  opacity:.55;text-decoration:none;
}
.tab-item[aria-current="page"]{opacity:1;color:var(--primary-text)}
.tab-bar.gesperrt .tab-item{opacity:.28;pointer-events:none}

/* ---- Fahrbahn-Trenner: gestrichelte Mittellinie, animiert ---- */
.fahrbahn-trenner{
  height:3px;width:100%;
  background-image:repeating-linear-gradient(90deg, var(--sekundaer) 0 18px, transparent 18px 32px);
  background-size:32px 3px;
  animation:fahrbahn-dash 1.1s linear infinite;
  border-radius:2px;
  margin:16px 0;
}
@keyframes fahrbahn-dash{from{background-position-x:0}to{background-position-x:-32px}}

/* Ladebalken im selben Motiv */
.ladebalken{height:6px;border-radius:999px;background:var(--rand);overflow:hidden;position:relative}
.ladebalken::after{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg, var(--primary) 0 14px, transparent 14px 24px);
  animation:fahrbahn-dash .9s linear infinite;
}

/* ---- Touch-Ziele ---- */
a,button,input,select,.tap{min-height:44px}
input,select{
  width:100%;min-height:48px;padding:12px 16px;
  border-radius:14px;border:1.5px solid var(--rand);
  background:var(--oberflaeche);color:var(--oberflaeche-text);
  font-family:var(--font-text);font-size:16px;
}
input:focus-visible,select:focus-visible{outline:none;box-shadow:var(--fokus-ring);border-color:var(--primary)}

/* ---- Karten-/Bild-Slot ---- */
.map-slot{
  aspect-ratio:4/3;border-radius:var(--radius-card);
  background:var(--oberflaeche-karte);
  display:flex;align-items:center;justify-content:center;
  color:var(--oberflaeche-text);opacity:.5;font-size:13px;
  overflow:hidden;position:relative;
}

/* ---- Custom-Cursor auf Mobile deaktivieren (CLAUDE.md Pflicht) ---- */
@media (max-width:900px){
  .cursor-dot,.cursor-ring{display:none}
}

/* ---- Responsive ---- */
@media (max-width:480px){
  .phone{padding-left:0;padding-right:0}
  .karte{border-radius:16px;padding:16px}
}