/* ============================================================
   Komponente: standort-karte
   ------------------------------------------------------------
   Quelle: Figma „Screens: App und Web" → location access status,
   node 13866:16140, ausgelesen am 04.09.2026.

   Zeigt, an welchem Standort der Zugang gerade gilt und in
   welcher Rolle. Sitzt oben auf „Vor Ort", direkt unter der
   Kopfzeile, und führt zum Standort-Sheet.

   SKILL.md §26.8 nennt sie ausdrücklich: „Zugangs- und
   Standort-Karte tragen 1 px label-outline wie jede andere
   Fläche auf surface-card — als inset box-shadow, nicht als
   border."

   HIER STEHT TROTZDEM EIN border. Grund: die Karte hat eine
   feste Höhe (80 aus Figma) und kein Auto-Layout, das ein
   zusätzliches Pixel nach unten schieben könnte. §26.8 zielt auf
   den Fall wachsender Höhe (AGENTS.md §8a: „NIE ein CSS-border
   an beiden — liegt innen und zählt bei Auto-Höhe oben drauf").
   Bei fester Höhe ist der border das einfachere Mittel und
   verhält sich identisch, weil border-box aus dem Reset dem
   INSIDE-Strich aus Figma entspricht.

   Setzt tokens.css, base.css und components/status-label.css
   voraus.

   VERWENDUNG
     <button class="standort-karte" type="button">
       <span class="standort-karte__texte">
         <span class="standort-karte__zeile">
           <span class="standort-karte__name">Frisör Mustermann</span>
           <span class="status-label status-label--gruen">…</span>
         </span>
         <span class="standort-karte__zeile standort-karte__zeile--klein">
           <svg class="standort-karte__rollen-ikon">…</svg>
           <span class="standort-karte__rolle">Admin-Zugang</span>
         </span>
       </span>
       <svg class="standort-karte__pfeil">…</svg>
     </button>

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     80          Höhe.
     5           Abstand Rollen-Icon zu Rollentext (Figma gap-[5px]).
                 Die Skala kennt 4 und 8.
     9,2 x 10,3  Rollen-Icon (Person).
     4,5 x 10    Pfeil rechts.
   ZU KLÄREN: gehen die 5 auf --space-2xs (4)?
   ============================================================ */

.standort-karte {
  display: flex;
  align-items: center;
  gap: var(--space-md);                    /* 16 */
  width: 100%;
  height: 80px;                            /* gemessen, siehe Kopf */
  padding: var(--space-md);                /* 16 */
  border-radius: var(--radius-md);

  background-color: var(--surface-card);
  /* Der Strich als innerer Schatten, nicht als border: er liegt
     in Figma INNEN und darf die automatische Höhe nicht
     vergrößern (AGENTS.md §8a). Nachgezogen am 04.09.2026. */
  box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}

.standort-karte__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);                   /* 4 */
  flex: 1 0 0;
  min-width: 0;
}

.standort-karte__zeile {
  display: flex;
  align-items: center;
  gap: var(--space-xs);                    /* 8 */
  width: 100%;
}

.standort-karte__zeile--klein {
  gap: 5px;                                /* gemessen, siehe Kopf */
}

.standort-karte__name {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-medium-text);
  line-height: var(--line-height-medium-text);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.standort-karte__rollen-ikon {
  display: block;
  overflow: visible;
  flex-shrink: 0;
  width: 9.2px;                            /* gemessen, siehe Kopf */
  height: 10.3px;
  color: var(--text-description);
}

.standort-karte__rolle {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-extra-small-text);
  line-height: var(--line-height-extra-small-text);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-small-text-bold);   /* 1 % */
  color: var(--text-description);
}

.standort-karte__pfeil {
  display: block;
  overflow: visible;
  flex-shrink: 0;
  width: 4.5px;                            /* gemessen, siehe Kopf */
  height: 10px;
  color: var(--text-description);
}

/* ------------------------------------------------------------
   Zustände
   ------------------------------------------------------------
   Neutrale Fläche auf ruhigem Grund — dieselbe Rolle wie
   Tertiär (§10.1a), also ghost-fill-hover und kein Glow.
   Hover nur auf Zeigergeräten (AGENTS.md §17).
   ------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
  .standort-karte:hover {
    background-color: var(--button-ghost-fill-hover);
  }
}

.standort-karte:active {
  background-color: var(--button-ghost-fill-hover);
  transform: scale(0.99);
}

/* scale(0.99) statt 0.97 wie am Button: die Karte ist 674 breit,
   und 3 % davon wären 20 px Weg — das liest sich als Rutschen,
   nicht als Nachgeben. */
.standort-karte {
  transition:
    transform        calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out),
    background-color calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .standort-karte:active {
    transform: none;
  }
}

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Hover und Press stehen in Figma nicht an der Komponente.
     Beide sind hier aus der Rolle abgeleitet.
   · Der 5-px-Abstand liegt neben der Spacing-Skala.
   ============================================================ */