/* Gemeinsame Grundlage aller Varianten: Reset, Barrierefreiheit, Karte, Präsentationsleiste. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
address { font-style: normal; }
fieldset { border: 0; min-width: 0; }

html.bk-open, html.nav-open { overflow: hidden; }

:focus-visible { outline: 2px solid var(--focus, #660000); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; background: #fff; color: #000; border-radius: 6px;
}
.skip-link:focus { top: 12px; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Kartenvorschau (2-Klick-Lösung) ---------- */

/* Die Leinwand hat immer das Seitenverhältnis des Vorschaubilds (3:2) und füllt den Rahmen wie
   object-fit: cover. So stimmen die Pin-Positionen (Prozent des Bildes) in jedem Rahmenformat. */
.map { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #e9e5e2; isolation: isolate; container-type: size; }
.map__canvas {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100cqw, 150cqh); height: max(100cqh, 66.667cqw);
}
.map__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__pin {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); z-index: 1;
  transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
.map__pin-label {
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
  padding: 5px 8px; border-radius: 999px; background: var(--pin-bg, #660000); color: #fff;
  box-shadow: 0 2px 8px rgb(0 0 0 / .25);
}
.map__pin::after {
  content: ""; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%;
  background: var(--pin-bg, #660000); box-shadow: 0 0 0 3px #fff, 0 2px 6px rgb(0 0 0 / .35);
}
/* Parkplatz-Pin mit Beschriftung unter dem Punkt, damit er den Salon-Pin nicht verdeckt */
.map__pin--parking { --pin-bg: #2b3a4a; flex-direction: column-reverse; transform: translate(-50%, -7px); }
.map__pin--parking::after { margin: 0 0 4px; }
.map__load {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 16px 12px; text-align: center;
  background: linear-gradient(to top, rgb(255 255 255 / .97) 70%, rgb(255 255 255 / 0));
}
.map__note { font-size: 11.5px; line-height: 1.4; max-width: 46ch; color: #555; }
@media (min-width: 720px) { .map { aspect-ratio: 3 / 2; } }
.map__attr { position: absolute; top: 6px; inset-inline-end: 6px; z-index: 2; font-size: 10px; padding: 2px 5px; background: rgb(255 255 255 / .8); color: #333; }
.map__frame { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; }
.map[data-loaded="true"] .map__load { display: none; }

/* ---------- Hinweis bei Links, die im Prototyp fehlen ---------- */

.toast {
  position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 60;
  max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px;
  background: #1c1c1e; color: #fff; font-size: 14px; line-height: 1.4; text-align: center;
  box-shadow: 0 8px 28px rgb(0 0 0 / .28);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Präsentationsleiste (nur für die Kundenpräsentation) ---------- */

.proto-bar {
  display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none;
  padding: 6px 10px; background: #1c1c1e; color: #d8d8dc;
  font: 500 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.proto-bar::-webkit-scrollbar { display: none; }
.proto-bar__label { padding: 4px 8px 4px 2px; color: #8e8e93; white-space: nowrap; }
.proto-bar a { padding: 5px 10px; border-radius: 999px; color: inherit; text-decoration: none; white-space: nowrap; }
.proto-bar a:hover { background: #2c2c2e; }
.proto-bar a[aria-current="page"] { background: #f2f2f7; color: #1c1c1e; }
.proto-bar__all { margin-inline-start: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}