/* ============================================================
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
------------------------------------------------------------
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). WLAN 11 x 7,8, Uhr 11 x 11.
4,5 x 10 Pfeil rechts.
16/8/16/16 Polster. Rechts nur 8, weil dort seit dem
11.09.2026 der Icon-Button sitzt: er bringt
seine 45 x 45 selbst mit, und die Summe ergibt
wieder den Abstand von vorher. Figma 11408:4071.
ZU KLÄREN: gehen die 5 auf --space-2xs (4)?
============================================================ */
.standort-karte {
display: flex;
align-items: center;
gap: var(--space-sm); /* 12 */
width: 100%;
height: 80px; /* gemessen, siehe Kopf */
/* Rechts 8 statt 16 — siehe Kopf. */
padding: var(--space-md) var(--space-xs) var(--space-md) var(--space-md);
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);
}
/* Der WLAN-Bogen ist breiter als hoch, das Personen-Zeichen
umgekehrt. Gemessen an 14056:41987 (Variante „wifi"):
10,985 x 7,785. Ergänzt am 10.09.2026. */
.standort-karte__rollen-ikon--wlan {
width: 11px;
height: 7.8px;
}
/* Die Uhr im QR-Zugang ist rund: 11 x 11 (Figma 11408:4062,
Variante „qr token time based"). Ergänzt am 11.09.2026. */
.standort-karte__rollen-ikon--uhr {
width: 11px;
height: 11px;
}
.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;
/* Die Farbe kommt vom Knopf: in Ruhe text-description, beim
Überfahren und Drücken text-primary. Stünde hier ein eigener
Wert, käme die Aufhellung nie an — eine gesetzte Farbe
schlägt jede geerbte. */
color: inherit;
}
/* ------------------------------------------------------------
DIE KARTE ZEIGT SICH ÜBER IHREN ICON-BUTTON
------------------------------------------------------------
Seit dem 11.09.2026 sitzt der Pfeil in Figma (11408:4071) im
„Chevron icon Button" — demselben, den die Einstellungen-Zeile
schon trägt. Und aus demselben Grund ist er auch hier KEIN
eigener Knopf: die ganze Karte ist der Knopf. Ein Button im
Button wäre ungültiges HTML und zerlegte die Karte in zwei
Tab-Stopps. Er ist ein mit dem Aussehen der Komponente,
und seine Zustände hängen an der Karte — wer irgendwo auf der
Karte ist, sieht den Knopf reagieren.
Werte aus icon-button.css (Abschnitt GHOST), nicht neu erfunden.
------------------------------------------------------------ */
.standort-karte__aktion {
/* Er ist Teil der Karte, kein eigenes Ziel. */
pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
button.standort-karte:hover .standort-karte__aktion {
background-color: var(--button-icon-button-fill-hover);
border-color: var(--button-icon-button-outline);
color: var(--text-primary);
}
}
/* 1 PX, NICHT 2. Hier stand zusätzlich ein innerer Schatten in
derselben Farbe — Rand und Schatten liegen aufeinander und
ergeben zusammen 2 px. In Figma ist der Press-Rand des
„Chevron icon Button" 1 px (Lisi, 11.09.2026: „sieht aus nach
2px, sollte aber 1px sein"). */
button.standort-karte:active .standort-karte__aktion {
background-color: var(--button-icon-button-fill-press);
border-color: var(--button-icon-button-outline-press);
color: var(--text-primary);
}
/* ------------------------------------------------------------
Zustände
------------------------------------------------------------
DIE KARTE WECHSELT IHRE FLÄCHE NICHT. Sie zeigt sich über
ihren Icon-Button — genau wie die Einstellungen-Zeile, die
dasselbe Muster trägt (Lisi, 11.09.2026: „nur der chevron
sollte ein hover und pressed bekommen").
Hier stand ghost-fill-hover an der Karte selbst. In Dark fiel
das kaum auf, in Light wurde die ganze Karte sichtbar dunkler
— und damit reagierten zwei Dinge auf eine Berührung, die
Karte und der Knopf darin.
Was bleibt, ist das Nachgeben beim Drücken: das ist Bewegung,
keine zweite Farbmeldung, und es gilt im System für jede
tappbare Fläche (§23).
------------------------------------------------------------ */
.standort-karte:active {
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.
============================================================ */