@import "./demo-booking.css";

/* Zahnraum: gemeinsame Demo-Bausteine (Konzeptstudie). In allen drei Varianten byte-gleich;
   jede Variante setzt nur die --zr-* Variablen in ihrem eigenen Stylesheet.
   :where() hält die Vorgaben bei Spezifität 0, damit die Variante gewinnt, obwohl diese Datei zuletzt lädt. */
:where(:root) {
  --zr-accent: #1a6e56;
  --zr-accent-hover: #11503e;
  --zr-on-accent: #fff;
  --zr-ink: #10302a;
  --zr-muted: #52665f;
  --zr-surface: #fff;
  --zr-soft: #eef5f1;
  --zr-line: #dfe7e3;
  --zr-radius: 20px;
  --zr-radius-sm: 12px;
  --zr-display: inherit;
  --zr-logo-font: inherit;
  --zr-logo-weight: 700;
  --zr-plan-bg: #f2efe6;
  --zr-plan-block: #e7e2d4;
  --zr-plan-street: #fff;
  --zr-plan-green: #d6e8d9;
  --zr-plan-water: #cfe4e1;
  --zr-plan-text: #5b6f69;
  --zr-route-bus: #2f9e7a;
  --zr-route-bahn: #b88a4e;
  --zr-route-park: #3b5853;
  --zr-ribbon-active: #fff;
}

/* ribbon with variant switcher */
.zr-ribbon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.3rem 1.4rem;
}
.zr-ribbon p {
  margin: 0;
}
.zr-ribbon nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 0.9rem;
}
.zr-ribbon nav span {
  opacity: 0.75;
}
.zr-ribbon nav a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.zr-ribbon nav a:hover {
  color: var(--zr-ribbon-active);
}
.zr-ribbon nav a[aria-current] {
  font-weight: 700;
  text-decoration: none;
  color: var(--zr-ribbon-active);
}

/* logo */
.zr-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--zr-ink);
  line-height: 1;
}
.zr-mark {
  width: 40px;
  height: 40px;
  flex: none;
  color: var(--zr-accent);
}
.zr-word {
  font-family: var(--zr-logo-font);
  font-weight: var(--zr-logo-weight);
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  display: grid;
  gap: 4px;
}
.zr-word small {
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zr-muted);
}
.zr-logo.on-dark {
  color: #fff;
}
.zr-logo.on-dark small {
  color: rgba(255, 255, 255, 0.7);
}

/* buttons that read like links */
.zr-linkish {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

/* hint toast */
.zr-toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 200;
  width: min(520px, calc(100vw - 24px));
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 12px 14px 16px;
  border-radius: var(--zr-radius-sm);
  background: var(--zr-ink);
  color: #fff;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.45);
  font-size: 0.9rem;
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition:
    opacity 0.2s,
    transform 0.2s,
    visibility 0s linear 0.2s;
}
.zr-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.zr-toast p {
  margin: 0;
  flex: 1;
}
.zr-toast > .zr-ico {
  margin-top: 2px;
  opacity: 0.8;
}
.zr-toast-x {
  flex: none;
  width: 40px;
  height: 40px;
  margin: -10px -4px -10px 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* fictional plan */
.zr-plan {
  display: block;
  width: 100%;
  height: 100%;
  font-family: inherit;
}
.zr-plan-bg {
  fill: var(--zr-plan-bg);
}
.zr-plan-green {
  fill: var(--zr-plan-green);
}
.zr-plan-water {
  fill: none;
  stroke: var(--zr-plan-water);
  stroke-width: 26;
  stroke-linecap: round;
}
.zr-plan-blocks rect {
  fill: var(--zr-plan-block);
}
.zr-plan-lot {
  fill: var(--zr-plan-bg);
  stroke: var(--zr-plan-block);
  stroke-width: 3;
  stroke-dasharray: 8 6;
}
.zr-plan-streets path {
  fill: none;
  stroke: var(--zr-plan-street);
  stroke-width: 18;
  stroke-linecap: round;
}
.zr-plan-streets .minor {
  stroke-width: 9;
}
.zr-plan-labels text {
  fill: var(--zr-plan-text);
  font-size: 15px;
  font-weight: 600;
  text-anchor: middle;
}
.zr-plan-labels .street {
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
}
.zr-route path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.3s;
}
.zr-route .casing {
  stroke: #fff;
  stroke-width: 13;
}
.zr-route .line {
  stroke-width: 6;
  stroke-dasharray: 1 12;
}
.zr-route[data-route="bus"] .line {
  stroke: var(--zr-route-bus);
}
.zr-route[data-route="bahn"] .line {
  stroke: var(--zr-route-bahn);
}
.zr-route[data-route="park"] .line {
  stroke: var(--zr-route-park);
}
.zr-plan-home path {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linejoin: round;
}
[data-demo-plan][data-active] .zr-route path {
  opacity: 0.22;
}
[data-demo-plan][data-active] .zr-route .casing {
  opacity: 0;
}
[data-demo-plan][data-active="bus"] .zr-route[data-route="bus"] path,
[data-demo-plan][data-active="bahn"] .zr-route[data-route="bahn"] path,
[data-demo-plan][data-active="park"] .zr-route[data-route="park"] path {
  opacity: 1;
}
.zr-poi circle {
  fill: #fff;
  stroke: var(--zr-plan-text);
  stroke-width: 2;
}
.zr-poi text {
  fill: var(--zr-ink);
  font-size: 14px;
  font-weight: 800;
  text-anchor: middle;
}
.zr-poi .name,
.zr-plan-home .name {
  font-size: 13px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--zr-plan-bg);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.zr-plan-home circle {
  fill: var(--zr-accent);
  stroke: #fff;
  stroke-width: 3;
}
.zr-plan-home .pulse {
  fill: var(--zr-accent);
  stroke: none;
  opacity: 0.18;
  transform-origin: 460px 190px;
  animation: zr-pulse 2.4s infinite;
}
.zr-plan-home .name {
  fill: var(--zr-ink);
  font-size: 16px;
  font-weight: 800;
  text-anchor: middle;
}
@keyframes zr-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.35;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zr-book[open] {
    animation: none;
  }
  .zr-plan-home .pulse {
    animation: none;
  }
  .zr-toast {
    transition: none;
  }
}