/* /Components/Account/Pages/Manage/Devices.razor.rz.scp.css */
.device-intro[b-qnhs7sl0zs] {
  margin: 0 0 4px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--fg-2);
}

.device-chip[b-qnhs7sl0zs] {
  margin-left: 6px;
  vertical-align: middle;
}

.device-note[b-qnhs7sl0zs] {
  margin: 6px 0 0;
}
/* /Components/Layout/AccountLayout.razor.rz.scp.css */
/* Split screen: the product on the left as a stage (car on a mirrored floor, three proofs), the form on the right.
   Under 960px the stage folds away and the sheet stands alone. */
.account[b-pb9zov1213] {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  max-width: 1560px;
  margin: 0 auto;
  background: var(--bg);
}

.account-stage[b-pb9zov1213] {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

.account-stage-glow[b-pb9zov1213] {
  position: absolute;
  inset: 20% -10% 0 -20%;
  pointer-events: none;
  background: radial-gradient(55% 55% at 55% 60%, color-mix(in srgb, var(--blue) 26%, transparent), transparent 70%);
  filter: blur(50px);
}

.account-stage-mark[b-pb9zov1213] {
  position: absolute;
  top: 26px;
  left: clamp(28px, 4vw, 56px);
  z-index: 2;
}

/* The stage hugs the form: its content sits at the right edge of the left column. */
.account-stage-inner[b-pb9zov1213] {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 88px clamp(20px, 3vw, 48px) 40px clamp(28px, 4vw, 56px);
  max-width: 700px;
  margin-left: auto;
}

.account-stage-copy[b-pb9zov1213] {
  animation: rise-b-pb9zov1213 900ms var(--ease-out) both;
}

.account-stage-copy h2[b-pb9zov1213] {
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
  margin: 0 0 14px;
}

.account-stage-copy p[b-pb9zov1213] {
  margin: 0;
  max-width: 40ch;
  color: var(--fg-2);
  font-size: 1.05rem;
  line-height: 1.45;
}

.account-stage-inner[b-pb9zov1213]  .astage {
  margin-top: clamp(24px, 5vh, 56px);
  animation: rise-b-pb9zov1213 1000ms var(--ease-out) 200ms both;
}

/* Right side: header, sheet, footer */
.account-side[b-pb9zov1213] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.account-head[b-pb9zov1213] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 18px var(--gutter);
}

.account-head-mark[b-pb9zov1213] {
  display: none;
  margin-right: auto;
}

.account-back[b-pb9zov1213] {
  color: var(--fg-3);
  text-decoration: none;
  font-size: 0.85rem;
}

@media (hover: hover) and (pointer: fine) {
  .account-back:hover[b-pb9zov1213] {
    color: var(--fg);
  }
}

.account-main[b-pb9zov1213] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 24px var(--gutter) 48px clamp(20px, 3vw, 48px);
}

.account-sheet[b-pb9zov1213] {
  width: 100%;
  max-width: 460px;
  background: color-mix(in srgb, var(--bg-1) 78%, transparent);
  border-radius: var(--radius-xl);
  padding: 40px 40px 34px;
  box-shadow: var(--shadow-tile), inset 0 0 0 1px var(--tint-07);
  animation: sheet-in-b-pb9zov1213 500ms var(--ease-out) both;
}

.account-foot[b-pb9zov1213] {
  display: flex;
  justify-content: center;
  gap: 22px;
  padding: 20px;
}

.account-foot a[b-pb9zov1213] {
  color: var(--fg-3);
  text-decoration: none;
  font-size: 0.78rem;
}

@media (hover: hover) and (pointer: fine) {
  .account-foot a:hover[b-pb9zov1213] {
    color: var(--fg);
  }
}

@keyframes sheet-in-b-pb9zov1213 {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rise-b-pb9zov1213 {
  from {
    opacity: 0;
  }
}

@media (max-width: 960px) {
  .account[b-pb9zov1213] {
    grid-template-columns: 1fr;
  }

  .account-stage[b-pb9zov1213] {
    display: none;
  }

  .account-head-mark[b-pb9zov1213] {
    display: block;
  }

  .account-main[b-pb9zov1213] {
    align-items: flex-start;
    justify-content: center;
    padding: 12px var(--gutter) 48px;
  }
}

@media (max-width: 600px) {
  .account-sheet[b-pb9zov1213] {
    padding: 28px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-sheet[b-pb9zov1213],
  .account-stage-copy[b-pb9zov1213],
  .account-stage-inner[b-pb9zov1213]  .astage {
    animation: none;
  }
}
/* /Components/Layout/GlobalSearch.razor.rz.scp.css */
kbd[b-h86iviaq96] {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  min-width: 20px;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--tint-09);
  color: var(--fg-2);
  text-align: center;
}

/* The palette: near the top of the window, where the eyes already are after pressing the key. */
.search-backdrop[b-h86iviaq96] {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--scrim);
  animation: search-fade-b-h86iviaq96 160ms var(--ease-out);
}

.search-palette[b-h86iviaq96] {
  position: fixed;
  top: min(14vh, 120px);
  left: 50%;
  z-index: 71;
  width: min(640px, calc(100vw - 32px));
  max-height: min(70vh, 620px);
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-1) 97%, transparent);
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  box-shadow: 0 50px 100px -30px var(--shadow-deep), inset 0 0 0 1px var(--tint-08);
  transform: translateX(-50%);
  overflow: hidden;
  animation: search-in-b-h86iviaq96 var(--dur-base) var(--ease-spring);
}

.search-field[b-h86iviaq96] {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px 0 18px;
  border-bottom: 1px solid var(--line);
}

.search-field[b-h86iviaq96]  .icon {
  flex: none;
  color: var(--fg-3);
}

/* The panel's own field styles would give this one a box of its own; here the palette is the box. */
.search-field input[b-h86iviaq96] {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--fg);
  font: inherit;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  outline: 0;
}

.search-field input[b-h86iviaq96]::placeholder {
  color: var(--fg-3);
}

.search-close[b-h86iviaq96] {
  flex: none;
  min-width: 40px;
  height: 40px;
  padding: 0 4px;
  border: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
}

.search-close:focus-visible[b-h86iviaq96] {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* A keyboard closes with the key the button names; a finger gets the cross. */
.search-close[b-h86iviaq96]  .icon {
  display: none;
}

.search-body[b-h86iviaq96] {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  scroll-padding: 34px 0 8px;
}

.search-group + .search-group[b-h86iviaq96] {
  margin-top: 6px;
}

.search-group-label[b-h86iviaq96] {
  display: block;
  padding: 8px 10px 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.search-option[b-h86iviaq96] {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.search-option:hover[b-h86iviaq96] {
  text-decoration: none;
}

/* One line is selected at a time, whether the arrows or the pointer chose it. */
.search-option.is-active[b-h86iviaq96] {
  background: var(--blue-soft);
}

.search-option-icon[b-h86iviaq96] {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--tint-07);
  color: var(--fg-2);
}

.search-option.is-active .search-option-icon[b-h86iviaq96] {
  color: var(--blue);
}

.search-option-text[b-h86iviaq96] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.search-option-title[b-h86iviaq96],
.search-option-detail[b-h86iviaq96] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-option-title[b-h86iviaq96] {
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.search-option-detail[b-h86iviaq96] {
  font-size: 0.8rem;
  color: var(--fg-2);
}

.search-option-kind[b-h86iviaq96] {
  flex: none;
  font-size: 0.74rem;
  color: var(--fg-3);
}

.search-empty[b-h86iviaq96] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 26px 22px 30px;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--fg-2);
}

.search-empty strong[b-h86iviaq96] {
  color: var(--fg);
  font-size: 1rem;
  font-weight: 600;
}

.search-foot[b-h86iviaq96] {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  font-size: 0.76rem;
  color: var(--fg-3);
}

.search-foot span[b-h86iviaq96] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.search-foot-busy[b-h86iviaq96] {
  margin-left: auto;
}

/* What a screen reader is told after each answer; nothing to look at. */
.search-live[b-h86iviaq96] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@keyframes search-in-b-h86iviaq96 {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px) scale(0.96);
  }
}

@keyframes search-fade-b-h86iviaq96 {
  from {
    opacity: 0;
  }
}

/* Phone: the palette fills the screen above the keyboard, and a cross closes it. */
@media (max-width: 700px) {
  .search-foot[b-h86iviaq96],
  .search-close kbd[b-h86iviaq96] {
    display: none;
  }

  .search-close[b-h86iviaq96]  .icon {
    display: block;
  }

  .search-palette[b-h86iviaq96] {
    top: 0;
    left: 0;
    width: 100%;
    max-height: none;
    height: 100dvh;
    padding-top: env(safe-area-inset-top);
    border-radius: 0;
    transform: none;
    animation: search-fade-b-h86iviaq96 160ms var(--ease-out);
  }

  .search-field[b-h86iviaq96] {
    padding: 0 8px 0 16px;
  }

  /* 16 px keeps the phone from zooming into the field. */
  .search-field input[b-h86iviaq96] {
    font-size: 1rem;
  }

  .search-body[b-h86iviaq96] {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .search-option[b-h86iviaq96] {
    min-height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-palette[b-h86iviaq96],
  .search-backdrop[b-h86iviaq96] {
    animation: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .search-palette[b-h86iviaq96] {
    background: var(--bg-1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
/* /Components/Layout/LandingLayout.razor.rz.scp.css */
.site[b-gusi5kn0hl] {
  /* The closed mobile menu sits a few pixels beyond the edge; without this the phone page scrolls sideways. */
  overflow-x: clip;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Translucent chrome: content scrolls under it. */
.site-nav[b-gusi5kn0hl] {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.site-nav-inner[b-gusi5kn0hl] {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 52px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-links[b-gusi5kn0hl] {
  display: flex;
  gap: 30px;
  margin-left: auto;
}

.site-links a[b-gusi5kn0hl] {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .site-links a:hover[b-gusi5kn0hl] {
    color: #fff;
    text-decoration: none;
  }
}

.site-actions[b-gusi5kn0hl] {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

.site-login[b-gusi5kn0hl] {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .site-login:hover[b-gusi5kn0hl] {
    color: #fff;
    text-decoration: none;
  }
}

.site-cta[b-gusi5kn0hl] {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--pill);
  background: var(--blue-fill);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 200ms ease, transform 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .site-cta:hover[b-gusi5kn0hl] {
    background: var(--blue-fill-hover);
    text-decoration: none;
  }
}

.site-cta:active[b-gusi5kn0hl] {
  transform: scale(0.96);
}

.site-menu[b-gusi5kn0hl] {
  display: none;
  margin-left: auto;
}

.site-menu summary[b-gusi5kn0hl] {
  list-style: none;
  cursor: pointer;
  color: var(--fg);
  padding: 8px;
}

.site-menu summary[b-gusi5kn0hl]::-webkit-details-marker {
  display: none;
}

.site-menu-panel[b-gusi5kn0hl] {
  position: absolute;
  left: 0;
  right: 0;
  top: 52px;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(20px);
  padding: 8px var(--gutter) 24px;
  display: grid;
  gap: 2px;
}

.site-menu-panel a[b-gusi5kn0hl] {
  color: var(--fg);
  text-decoration: none;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 1.1rem;
}

.site-menu-panel a.btn[b-gusi5kn0hl] {
  margin-top: 14px;
  border-bottom: 0;
  justify-content: center;
}

.site-main[b-gusi5kn0hl] {
  flex: 1;
}

.site-footer[b-gusi5kn0hl] {
  background: var(--bg-1);
  margin-top: 0;
}

.site-footer-inner[b-gusi5kn0hl] {
  max-width: 1024px;
  margin: 0 auto;
  padding: 26px var(--gutter) 30px;
}

.site-footer-legal[b-gusi5kn0hl] {
  color: var(--fg-3);
  font-size: 0.75rem;
  line-height: 1.55;
  max-width: none;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.site-footer-legal a[b-gusi5kn0hl] {
  color: inherit;
  text-decoration: underline;
}

.site-footer-row[b-gusi5kn0hl] {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  color: var(--fg-3);
  font-size: 0.75rem;
}

.site-footer-links[b-gusi5kn0hl] {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.site-footer-links a[b-gusi5kn0hl] {
  color: var(--fg-2);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer-links a:hover[b-gusi5kn0hl] {
    color: var(--fg);
    text-decoration: underline;
  }
}

@media (max-width: 900px) {
  .site-links[b-gusi5kn0hl],
  .site-actions[b-gusi5kn0hl] {
    display: none;
  }

  .site-menu[b-gusi5kn0hl] {
    display: block;
  }
}
/* /Components/Layout/NotificationBell.razor.rz.scp.css */
/* Die Glocke: ein runder Knopf rechts oben im Inhalt; auf schmalen Schirmen steht er fest in der oberen Leiste. */
.bell[b-q8bb4zwvjp] {
  position: absolute;
  top: 28px;
  right: 32px;
  z-index: 20;
}

.bell.is-open[b-q8bb4zwvjp] {
  z-index: 45;
}

.bell-btn[b-q8bb4zwvjp] {
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tint-08);
  color: var(--fg-1);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}

.bell-btn:active[b-q8bb4zwvjp] {
  transform: scale(0.96);
}

.bell-btn:focus-visible[b-q8bb4zwvjp],
.bell-close:focus-visible[b-q8bb4zwvjp],
.bell-item:focus-visible[b-q8bb4zwvjp] {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.bell.is-open .bell-btn[b-q8bb4zwvjp] {
  background: var(--blue-soft);
  color: var(--blue);
}

.bell-badge[b-q8bb4zwvjp] {
  position: absolute;
  top: -3px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  background: var(--blue-fill);
  box-shadow: 0 0 0 2px var(--bg);
  color: var(--on-accent);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
}

/* Fängt den Klick daneben ab; liegt unter Knopf und Liste, aber über der Seite. */
.bell-backdrop[b-q8bb4zwvjp] {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.bell-panel[b-q8bb4zwvjp] {
  position: absolute;
  top: 48px;
  right: 0;
  z-index: 2;
  width: min(400px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 110px));
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--bg-1);
  box-shadow: inset 0 0 0 1px var(--tint-08), 0 30px 70px -20px var(--shadow-deep);
  outline: 0;
  transform-origin: top right;
  animation: bell-in-b-q8bb4zwvjp var(--dur-base) var(--ease-spring);
}

@keyframes bell-in-b-q8bb4zwvjp {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-6px);
  }
}

.bell-head[b-q8bb4zwvjp] {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 14px 10px 18px;
}

.bell-head h2[b-q8bb4zwvjp] {
  margin: 0 0 2px;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.bell-head .muted[b-q8bb4zwvjp] {
  font-size: 0.82rem;
}

.bell-close[b-q8bb4zwvjp] {
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tint-08);
  color: var(--fg-2);
  cursor: pointer;
}

.bell-body[b-q8bb4zwvjp] {
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 10px;
}

.bell-group h3[b-q8bb4zwvjp] {
  margin: 10px 10px 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.bell-group ul[b-q8bb4zwvjp] {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bell-item[b-q8bb4zwvjp] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  color: var(--fg-2);
  text-decoration: none;
  transition: background-color 160ms ease;
  --tone: var(--fg-1);
  --tone-soft: var(--tint-08);
}

.bell-item.is-info[b-q8bb4zwvjp] {
  --tone: var(--blue);
  --tone-soft: var(--blue-soft);
}

.bell-item.is-good[b-q8bb4zwvjp] {
  --tone: var(--green);
  --tone-soft: color-mix(in srgb, var(--green) 16%, transparent);
}

.bell-item.is-warn[b-q8bb4zwvjp] {
  --tone: var(--orange);
  --tone-soft: color-mix(in srgb, var(--orange) 16%, transparent);
}

.bell-item.is-bad[b-q8bb4zwvjp] {
  --tone: var(--red);
  --tone-soft: color-mix(in srgb, var(--red) 16%, transparent);
}

.bell-item-icon[b-q8bb4zwvjp] {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--tone-soft);
  color: var(--tone);
}

.bell-item-text[b-q8bb4zwvjp] {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.bell-item-text strong[b-q8bb4zwvjp] {
  color: var(--fg);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.bell-item-text > span[b-q8bb4zwvjp] {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--fg-3);
}

.bell-item-count[b-q8bb4zwvjp] {
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--pill);
  display: inline-grid;
  place-items: center;
  background: var(--tone-soft);
  color: var(--tone);
  font-size: 0.82rem;
  font-weight: 600;
}

.bell[b-q8bb4zwvjp]  .bell-item-arrow {
  color: var(--fg-3);
}

.bell-empty[b-q8bb4zwvjp] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 28px 30px;
  text-align: center;
  color: var(--fg-3);
  font-size: 0.86rem;
  line-height: 1.45;
}

.bell-empty strong[b-q8bb4zwvjp] {
  color: var(--fg);
  font-size: 1rem;
}

.bell-empty-icon[b-q8bb4zwvjp] {
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--green) 16%, transparent);
  color: var(--green);
}

@media (hover: hover) and (pointer: fine) {
  .bell-btn:hover[b-q8bb4zwvjp],
  .bell-close:hover[b-q8bb4zwvjp] {
    background: var(--tint-14);
    color: var(--fg);
  }

  .bell-item:hover[b-q8bb4zwvjp] {
    background: var(--tint-06);
    text-decoration: none;
  }
}

/* Tablet: beside the rail the bell stands where it stands on the desktop, a little closer to the edge of the narrower page. */
@media (min-width: 701px) and (max-width: 1199px) {
  .bell[b-q8bb4zwvjp] {
    right: 24px;
  }
}

/* Telefon: die Seitenleiste ist die obere Leiste von 52 px; die Glocke sitzt fest in deren rechter Ecke und ist 40 px
   groß, die Liste füllt die Breite und endet über der Leiste unten. */
@media (max-width: 700px) {
  .bell[b-q8bb4zwvjp] {
    position: fixed;
    top: calc(6px + env(safe-area-inset-top));
    right: 14px;
    z-index: 31;
  }

  .bell-close[b-q8bb4zwvjp] {
    width: 40px;
    height: 40px;
  }

  .bell-panel[b-q8bb4zwvjp] {
    position: fixed;
    top: calc(56px + env(safe-area-inset-top));
    left: 8px;
    right: 8px;
    width: auto;
    max-height: calc(100dvh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .bell-panel[b-q8bb4zwvjp] {
    animation: none;
  }

  .bell-btn[b-q8bb4zwvjp] {
    transition-duration: 1ms;
  }

  .bell-btn:active[b-q8bb4zwvjp] {
    transform: none;
  }
}
/* /Components/Layout/PanelLayout.razor.rz.scp.css */
.panel[b-gu82w6fqnu] {
  min-height: 100vh;
  display: grid;
  /* minmax(0, …): sonst wächst die Spalte auf die Breite ihres breitesten Inhalts und die Seite rollt seitlich. */
  grid-template-columns: 240px minmax(0, 1fr);
  background: var(--bg);
}

/* A translucent sidebar material; the black ground shows through. */
.panel-side[b-gu82w6fqnu] {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--sunk) 82%, transparent);
  backdrop-filter: saturate(160%) blur(24px);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
  border-right: 1px solid var(--hairline);
}

.panel-side-top[b-gu82w6fqnu] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 12px 10px;
}

/* The logo keeps the indent of the entries below it; the search field spans the column like they do. */
.panel-side-top[b-gu82w6fqnu]  .wordmark {
  padding-left: 10px;
}

/* On a low window the list scrolls inside the sidebar; it fades out at the bottom, so the cut reads as "more below". */
.panel-nav[b-gu82w6fqnu] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 2px 12px 28px;
  gap: 10px;
  overflow-y: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}

.panel-nav[b-gu82w6fqnu]::-webkit-scrollbar {
  display: none;
}

/* The overview stands alone at the top; below it the categories, each under a header that folds it. */
.panel-nav-top[b-gu82w6fqnu],
.panel-nav-items-inner[b-gu82w6fqnu] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Whether a category is folded is told to its parts through these five values, so the rules that decide it (the
   choice of the person, the default on a low window) are written once and set nothing else. */
.panel-nav-group[b-gu82w6fqnu] {
  display: flex;
  flex-direction: column;
  --nav-rows: 1fr;
  --nav-fade: 1;
  --nav-turn: 90deg;
  --nav-news: none;
  --nav-vis: visible;
  --nav-vis-delay: 0s;
}

.panel-nav-head[b-gu82w6fqnu] {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 26px;
  margin-bottom: 2px;
  padding: 2px 8px 2px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg-3);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.panel-nav-head:focus-visible[b-gu82w6fqnu] {
  outline-offset: -2px;
}

.panel-nav-label[b-gu82w6fqnu] {
  flex: 1;
  min-width: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.panel-nav-head[b-gu82w6fqnu]  .panel-nav-chevron {
  flex: none;
  opacity: 0.7;
  transform: rotate(var(--nav-turn));
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) ease;
}

/* The category of the open page stays open; its header is a label, not a switch. */
.panel-nav-group.is-current > .panel-nav-head[b-gu82w6fqnu] {
  cursor: default;
}

.panel-nav-group.is-current > .panel-nav-head[b-gu82w6fqnu]  .panel-nav-chevron {
  opacity: 0.3;
}

@media (hover: hover) and (pointer: fine) {
  .panel-nav-group:not(.is-current) > .panel-nav-head:hover[b-gu82w6fqnu] {
    background: var(--tint-06);
    color: var(--fg-1);
  }
}

/* The entries of a category fold without their height being measured: the row of a grid goes from one fraction to
   none (the one place where something other than transform and opacity moves), and the entries fade with it. Folded
   entries are hidden once the movement is over, so the keyboard does not walk through what cannot be seen. */
.panel-nav-items[b-gu82w6fqnu] {
  display: grid;
  grid-template-rows: var(--nav-rows);
  opacity: var(--nav-fade);
  visibility: var(--nav-vis);
  transition: grid-template-rows var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--nav-vis-delay);
}

.panel-nav-items-inner[b-gu82w6fqnu] {
  min-height: 0;
  overflow: hidden;
}

/* The ring of the keyboard focus stays inside the entry; outside it the fold would cut it off. */
.panel-nav-items-inner[b-gu82w6fqnu]  a:focus-visible {
  outline-offset: -2px;
  border-radius: 10px;
}

/* What a folded category has waiting, as one number at its header. */
.panel-nav-badge.panel-nav-news[b-gu82w6fqnu] {
  display: var(--nav-news);
  min-width: 18px;
  height: 18px;
  margin-left: 0;
  padding: 0 5px;
  font-size: 0.66rem;
}

/* Folded by choice: the script keeps the choices of the person on the document (wwwroot/js/nav.js), the server
   writes them there from the cookie before the page is sent. */
html[data-nav~="einkauf-closed"] .panel-nav-group[data-nav-group="einkauf"]:not(.is-current)[b-gu82w6fqnu],
html[data-nav~="verkauf-closed"] .panel-nav-group[data-nav-group="verkauf"]:not(.is-current)[b-gu82w6fqnu],
html[data-nav~="nachrichten-closed"] .panel-nav-group[data-nav-group="nachrichten"]:not(.is-current)[b-gu82w6fqnu],
html[data-nav~="team-closed"] .panel-nav-group[data-nav-group="team"]:not(.is-current)[b-gu82w6fqnu],
html[data-nav~="konto-closed"] .panel-nav-group[data-nav-group="konto"]:not(.is-current)[b-gu82w6fqnu] {
  --nav-rows: 0fr;
  --nav-fade: 0;
  --nav-turn: 0deg;
  --nav-news: inline-grid;
  --nav-vis: hidden;
  --nav-vis-delay: var(--dur-base);
}

/* Folded by default: on a low window "Team" and "Konto" start folded until the person says otherwise, so the rest of
   the list is in sight without scrolling. */
@media (max-height: 999px) {
  html:not([data-nav~="team-open"]) .panel-nav-group[data-nav-group="team"]:not(.is-current)[b-gu82w6fqnu],
  html:not([data-nav~="konto-open"]) .panel-nav-group[data-nav-group="konto"]:not(.is-current)[b-gu82w6fqnu] {
    --nav-rows: 0fr;
    --nav-fade: 0;
    --nav-turn: 0deg;
    --nav-news: inline-grid;
    --nav-vis: hidden;
    --nav-vis-delay: var(--dur-base);
  }
}

.panel-nav-badge[b-gu82w6fqnu] {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  background: var(--blue-fill);
  color: var(--on-accent);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
}

/* What an entry says about itself: a dot and a word. Only "Schaufenster" has one: online, offline, or switched off. */
.panel-nav-state[b-gu82w6fqnu] {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-3);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}

.panel-nav-state[b-gu82w6fqnu]::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tint-35);
}

.panel-nav-state.is-online[b-gu82w6fqnu] {
  color: var(--green);
}

.panel-nav-state.is-online[b-gu82w6fqnu]::before {
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
}

.panel-nav-state.is-blocked[b-gu82w6fqnu] {
  color: var(--orange);
}

.panel-nav-state.is-blocked[b-gu82w6fqnu]::before {
  background: var(--orange);
}

.panel-nav[b-gu82w6fqnu]  a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  border-radius: 10px;
  color: var(--fg-1);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}

.panel-nav[b-gu82w6fqnu]  a:active {
  transform: scale(0.98);
}

.panel-nav[b-gu82w6fqnu]  a .icon {
  color: var(--fg-3);
  transition: color 160ms ease;
}

.panel-nav[b-gu82w6fqnu]  a.active {
  background: var(--blue-soft);
  color: var(--blue);
}

.panel-nav[b-gu82w6fqnu]  a.active .icon {
  color: var(--blue);
}

@media (hover: hover) and (pointer: fine) {
  .panel-nav[b-gu82w6fqnu]  a:hover {
    background: var(--tint-07);
    color: var(--fg);
  }
}

.panel-side-bottom[b-gu82w6fqnu] {
  margin-top: auto;
  flex: none;
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.panel-account[b-gu82w6fqnu] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--tint-06);
}

.panel-avatar[b-gu82w6fqnu] {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  color: var(--on-accent);
  font-weight: 600;
  font-size: 0.95rem;
}

.panel-account-text[b-gu82w6fqnu] {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.panel-account-name[b-gu82w6fqnu] {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-account-plan[b-gu82w6fqnu] {
  font-size: 0.74rem;
  color: var(--fg-3);
}

.panel-account-plan.is-expired[b-gu82w6fqnu] {
  color: var(--orange);
}

.panel-side-links[b-gu82w6fqnu] {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* The theme switch shares the row of the sign-out button, so the navigation above loses no height to it. */
.panel-side-theme[b-gu82w6fqnu] {
  flex: none;
  width: 96px;
}

.panel-side-link[b-gu82w6fqnu] {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fg-2);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}

.panel-side-link:active[b-gu82w6fqnu] {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .panel-side-link:hover[b-gu82w6fqnu] {
    color: var(--fg);
    background: var(--tint-07);
    text-decoration: none;
  }
}

.panel-logout[b-gu82w6fqnu] {
  margin: 0;
  flex: 1;
  display: flex;
}

/* Was breiter gerät als das Fenster, wird hier abgeschnitten, statt die ganze Seite seitlich rollen zu lassen. */
.panel-body[b-gu82w6fqnu] {
  min-width: 0;
  overflow-x: clip;
}

.panel-paywall[b-gu82w6fqnu] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 36px 0;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  color: var(--fg);
  font-size: 0.92rem;
}

.panel-paywall div[b-gu82w6fqnu] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.panel-paywall span[b-gu82w6fqnu] {
  color: var(--fg-1);
}

.panel-content[b-gu82w6fqnu] {
  position: relative;
  padding: 28px 32px 72px;
  max-width: 1280px;
  margin: 0 auto;
}

/* How wide a page may get is the page's own choice, made with one class on an element it puts directly into the
   content. Without one it keeps the reading width above: prose and forms do not get better with longer lines.
   "page-wide" (lists and tables whose columns use the room) widens it. "page-workspace" marks the element that is
   the page's working surface, such as the panes of the mail page: from 1200 px on, where the full sidebar stands, the
   content takes the whole width and exactly the height of the window, the marked element fills what the page head
   leaves, and its direct children (the panes) stretch to that height and scroll in themselves. */
.panel-content:has(> .page-wide)[b-gu82w6fqnu] {
  max-width: 1600px;
}

@media (min-width: 1200px) {
  .panel-body:has(> .panel-content > .page-workspace)[b-gu82w6fqnu] {
    display: flex;
    flex-direction: column;
    height: max(100dvh, 620px);
  }

  .panel-content:has(> .page-workspace)[b-gu82w6fqnu] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    max-width: 2400px;
    padding-bottom: 28px;
  }

  .panel-content[b-gu82w6fqnu]  > .page-workspace {
    flex: 1 1 0;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }

  .panel-content[b-gu82w6fqnu]  > .page-workspace > * {
    height: auto;
    min-height: 0;
  }
}

/* A laptop screen is low. Up to the height at which the whole list fits at its full size it stands a little closer,
   so more of it is in sight above the account card. */
@media (min-width: 1200px) and (max-height: 1120px) {
  .panel-nav[b-gu82w6fqnu] {
    gap: 6px;
  }

  .panel-nav-head[b-gu82w6fqnu] {
    min-height: 22px;
    margin-bottom: 0;
  }

  .panel-nav[b-gu82w6fqnu]  a {
    padding: 5px 12px;
  }
}

/* Rechts oben sitzt die Glocke in einem festen Platz von 40 px; die Knöpfe des Seitenkopfs stehen in derselben Zeile
   links daneben, mit dem Abstand, den sie auch untereinander haben. */
.panel-content[b-gu82w6fqnu]  > .page-head:not(.page-head-center) {
  padding-right: 52px;
}

/* Die Leiste unten und das Blatt hinter „Mehr“ gibt es nur auf dem Telefon. */
.panel-tabbar[b-gu82w6fqnu],
.panel-more[b-gu82w6fqnu],
.panel-more-backdrop[b-gu82w6fqnu],
.panel-rail-more[b-gu82w6fqnu] {
  display: none;
}

/* Tablets and narrow windows (701–1199 px): the sidebar becomes a rail. Every area stays one tap away, with its
   symbol and its name underneath, because a finger has no tooltip to ask what a symbol means; the page gets the
   width a full sidebar would take. Bell and assistant stay where they are on the desktop. */
@media (min-width: 701px) and (max-width: 1199px) {
  .panel[b-gu82w6fqnu] {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .panel-side-top[b-gu82w6fqnu] {
    align-items: stretch;
    gap: 8px;
    padding: 16px 6px 6px;
  }

  .panel-side-top[b-gu82w6fqnu]  .wordmark {
    justify-content: center;
    padding: 4px 0;
  }

  .panel-side-top[b-gu82w6fqnu]  .wordmark-text,
  .panel-side-top[b-gu82w6fqnu]  .wordmark-suffix {
    display: none;
  }

  .panel-nav[b-gu82w6fqnu] {
    padding: 2px 6px 26px;
    gap: 6px;
  }

  /* The rail has no room for headers and nothing folds here: a thin line stands where a category begins. */
  .panel-nav .panel-nav-head[b-gu82w6fqnu] {
    display: none;
  }

  .panel-nav .panel-nav-items[b-gu82w6fqnu] {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .panel-nav > * + .panel-nav-group[b-gu82w6fqnu] {
    padding-top: 6px;
    border-top: 1px solid var(--line);
  }

  .panel-nav > .panel-nav-group[b-gu82w6fqnu] {
    display: var(--rail-here, flex);
  }

  .panel-nav[b-gu82w6fqnu]  a,
  .panel-rail-more[b-gu82w6fqnu] {
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 6px 2px;
    font-size: 0.66rem;
    line-height: 1.15;
    letter-spacing: 0;
    text-align: center;
  }

  .panel-nav[b-gu82w6fqnu]  a .icon,
  .panel-rail-more[b-gu82w6fqnu]  .icon {
    width: 20px;
    height: 20px;
  }

  /* The last entry of the rail: what the window is too low for waits behind it. Which categories those are, and
     whether the entry is there at all, say the rules "rail-s-N" at the end of this file. */
  .panel-rail-more[b-gu82w6fqnu] {
    display: var(--rail-there, none);
    flex: none;
    align-items: center;
    margin: 0 6px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--fg-1);
    font: inherit;
    font-size: 0.66rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
  }

  .panel-rail-more:active[b-gu82w6fqnu] {
    transform: scale(0.98);
  }

  .panel-rail-more[b-gu82w6fqnu]  .icon {
    color: var(--fg-3);
  }

  .panel-rail-more.is-open[b-gu82w6fqnu] {
    background: var(--tint-07);
    color: var(--fg);
  }

  .panel-rail-more > span[b-gu82w6fqnu] {
    position: relative;
  }

  .panel-rail-icon[b-gu82w6fqnu] {
    display: grid;
    place-items: center;
  }

  /* Both are in the markup for every category they could speak for and shown only while that category is behind the entry. */
  .panel-rail-mark[b-gu82w6fqnu],
  .panel-rail-dot[b-gu82w6fqnu] {
    --rail-mark: none;
    display: var(--rail-mark);
    position: absolute;
  }

  .panel-rail-mark[b-gu82w6fqnu] {
    inset: 0;
    border-radius: 10px;
    background: var(--blue-soft);
  }

  .panel-rail-dot[b-gu82w6fqnu] {
    top: -2px;
    right: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 2px var(--sunk);
  }

  /* "Import & Export" and "Einstellungen" are the longest names: two lines for the first, the second fits at this size. */
  .panel-nav[b-gu82w6fqnu]  a > span:not(.panel-nav-badge, .panel-nav-state) {
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* In the rail there is no room for the word: the state is a dot at the corner of the icon, the word stays in the tooltip. */
  .panel-nav .panel-nav-state[b-gu82w6fqnu] {
    position: absolute;
    top: 6px;
    left: calc(50% + 7px);
    margin: 0;
  }

  .panel-nav .panel-nav-state[b-gu82w6fqnu]::before {
    box-shadow: 0 0 0 2px var(--sunk);
  }

  .panel-nav .panel-nav-state.is-online[b-gu82w6fqnu]::before {
    box-shadow: 0 0 0 2px var(--sunk);
  }

  .panel-nav .panel-nav-state-text[b-gu82w6fqnu] {
    display: none;
  }

  .panel-nav .panel-nav-badge[b-gu82w6fqnu] {
    position: absolute;
    top: 2px;
    left: calc(50% + 4px);
    min-width: 18px;
    height: 18px;
    margin: 0;
    padding: 0 5px;
    font-size: 0.66rem;
    box-shadow: 0 0 0 2px var(--sunk);
  }

  .panel-side-bottom[b-gu82w6fqnu] {
    align-items: center;
    padding: 8px 6px 12px;
  }

  .panel-side-bottom .panel-account[b-gu82w6fqnu] {
    padding: 0;
    background: transparent;
  }

  .panel-side-bottom .panel-account-text[b-gu82w6fqnu],
  .panel-side-theme[b-gu82w6fqnu],
  .panel-side-bottom .panel-side-link span[b-gu82w6fqnu] {
    display: none;
  }

  .panel-side-bottom .panel-side-link[b-gu82w6fqnu] {
    min-width: 44px;
    min-height: 44px;
  }

  .panel-content[b-gu82w6fqnu] {
    padding: 28px 24px 64px;
  }

  .panel-paywall[b-gu82w6fqnu] {
    margin: 20px 24px 0;
    flex-wrap: wrap;
  }
}

/* A tablet in landscape is wide but low: the entries of the rail stand closer and the avatar gives its place to them. */
@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px) {
  .panel-side-top[b-gu82w6fqnu] {
    padding-top: 12px;
  }

  .panel-nav[b-gu82w6fqnu] {
    gap: 4px;
  }

  .panel-nav > * + .panel-nav-group[b-gu82w6fqnu] {
    padding-top: 4px;
  }

  .panel-nav[b-gu82w6fqnu]  a,
  .panel-rail-more[b-gu82w6fqnu] {
    min-height: 46px;
    padding: 4px 2px;
    gap: 2px;
  }

  .panel-side-bottom .panel-account[b-gu82w6fqnu] {
    display: none;
  }

  .panel-side-bottom[b-gu82w6fqnu] {
    padding: 4px 6px 8px;
  }
}

/* Telefon: oben bleibt eine schmale Leiste mit Logo und Glocke, die Bereiche wandern in eine feste Leiste unten. */
@media (max-width: 700px) {
  .panel[b-gu82w6fqnu] {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel-side[b-gu82w6fqnu] {
    position: sticky;
    top: 0;
    z-index: 30;
    min-width: 0;
    height: auto;
    padding-top: env(safe-area-inset-top);
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  /* Rechts in dieser Zeile stehen Glocke und Assistent (fest positioniert); die Suche steht links daneben im Fluss. */
  .panel-side-top[b-gu82w6fqnu] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 62px 0 18px;
  }

  .panel-side-top[b-gu82w6fqnu]  .wordmark {
    padding-left: 0;
  }

  .panel-content[b-gu82w6fqnu]  > .page-head:not(.page-head-center) {
    padding-right: 0;
  }

  .panel-nav[b-gu82w6fqnu],
  .panel-side-bottom[b-gu82w6fqnu] {
    display: none;
  }

  /* Platz für die Leiste, damit der letzte Knopf einer Seite nicht unter ihr liegt. */
  .panel-content[b-gu82w6fqnu] {
    padding: 22px var(--gutter) calc(96px + env(safe-area-inset-bottom));
  }

  .panel-paywall[b-gu82w6fqnu] {
    margin: 16px var(--gutter) 0;
    flex-wrap: wrap;
  }

  .panel-tabbar[b-gu82w6fqnu] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--sunk) 86%, transparent);
    backdrop-filter: saturate(160%) blur(24px);
    -webkit-backdrop-filter: saturate(160%) blur(24px);
    border-top: 1px solid var(--tint-08);
  }

  .panel-tab[b-gu82w6fqnu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 50px;
    padding: 4px 2px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--fg-3);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 160ms ease, transform 160ms var(--ease-out);
  }

  .panel-tab:active[b-gu82w6fqnu] {
    transform: scale(0.96);
  }

  .panel-tab:focus-visible[b-gu82w6fqnu] {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--blue);
  }

  .panel-tab.is-active[b-gu82w6fqnu] {
    color: var(--blue);
  }

  .panel-tab-icon[b-gu82w6fqnu] {
    position: relative;
    display: grid;
    place-items: center;
    width: 28px;
    height: 24px;
  }

  .panel-tab-label[b-gu82w6fqnu] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Zahl und Punkt hängen am Symbol und nehmen keinen Platz ein: nichts verschiebt sich, wenn sie erscheinen. */
  .panel-tab-badge[b-gu82w6fqnu] {
    position: absolute;
    top: -5px;
    left: 15px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: inline-grid;
    place-items: center;
    background: var(--blue-fill);
    box-shadow: 0 0 0 2px var(--sunk);
    color: var(--on-accent);
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1;
  }

  .panel-tab-dot[b-gu82w6fqnu] {
    position: absolute;
    top: -1px;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 2px var(--sunk);
  }

}

/* The sheet behind "Mehr": on the phone every area, in the rail of a tablet the categories the rail is too low for.
   On the phone it comes from below and covers the bar; beside the rail it is a menu at the entry that opened it.
   Without a circuit it is a popover of the browser. */
@media (max-width: 1199px) {
  .panel-more-backdrop[b-gu82w6fqnu] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 41;
    background: var(--scrim);
    animation: panel-more-fade-b-gu82w6fqnu 160ms var(--ease-out);
  }

  .panel-more[b-gu82w6fqnu] {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 42;
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: none;
    max-height: min(88dvh, 760px);
    margin: 0;
    padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 22px 22px 0 0;
    background: var(--bg-1);
    color: inherit;
    box-shadow: 0 -30px 70px -20px var(--shadow-deep);
    overflow: hidden;
    outline: 0;
    animation: panel-more-in-b-gu82w6fqnu 280ms var(--ease-drawer);
  }

  .panel-more[popover]:not(:popover-open)[b-gu82w6fqnu] {
    display: none;
  }

  .panel-more[popover][b-gu82w6fqnu]::backdrop {
    background: var(--scrim);
  }

  .panel-more-grip[b-gu82w6fqnu] {
    flex: none;
    width: 36px;
    height: 5px;
    margin: 0 auto 6px;
    border-radius: 3px;
    background: var(--tint-24);
  }

  .panel-more-head[b-gu82w6fqnu] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 4px 8px 12px;
  }

  .panel-more-head h2[b-gu82w6fqnu] {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
  }

  .panel-more-close[b-gu82w6fqnu] {
    flex: none;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--tint-08);
    color: var(--fg-2);
    cursor: pointer;
  }

  .panel-more-close:focus-visible[b-gu82w6fqnu] {
    outline: 0;
    box-shadow: 0 0 0 3px var(--focus-ring);
  }

  .panel-more-nav[b-gu82w6fqnu] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .panel-more-nav .panel-nav-badge[b-gu82w6fqnu] {
    margin-left: auto;
  }

  .panel-more-nav[b-gu82w6fqnu]  a {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 46px;
    padding: 0 12px;
    border-radius: 12px;
    color: var(--fg);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: background-color 160ms ease, transform 160ms var(--ease-out);
  }

  .panel-more-nav[b-gu82w6fqnu]  a:active {
    transform: scale(0.98);
    background: var(--tint-07);
  }

  .panel-more-nav[b-gu82w6fqnu]  a .icon {
    color: var(--fg-3);
  }

  .panel-more-nav[b-gu82w6fqnu]  a.active {
    background: var(--blue-soft);
    color: var(--blue);
  }

  .panel-more-nav[b-gu82w6fqnu]  a.active .icon {
    color: var(--blue);
  }

  .panel-more-foot[b-gu82w6fqnu] {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }

  .panel-more-foot .panel-account[b-gu82w6fqnu] {
    flex: 1;
    min-width: 0;
    background: transparent;
    padding: 6px 8px;
  }

  .panel-more-theme[b-gu82w6fqnu] {
    order: -1;
    flex: 1 0 100%;
    display: flex;
    padding-bottom: 6px;
  }

  .panel-more-theme[b-gu82w6fqnu]  .theme-switch {
    flex: 1;
  }

  .panel-more-theme[b-gu82w6fqnu]  .theme-switch button {
    min-height: 40px;
  }

  .panel-more-foot .panel-logout[b-gu82w6fqnu] {
    flex: none;
  }

  .panel-more-foot .panel-side-link[b-gu82w6fqnu] {
    min-height: 44px;
    padding: 0 14px;
    background: var(--tint-08);
    border-radius: var(--pill);
    color: var(--fg);
  }

  /* The search of the frame as a field at the top of the sheet. */
  .panel-more-search[b-gu82w6fqnu] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0 0 8px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: var(--tint-07);
    color: var(--fg-2);
    font: inherit;
    font-size: 1rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .panel-more-search[b-gu82w6fqnu]  .icon {
    flex: none;
    color: var(--fg-3);
  }

  .panel-more-nav .panel-nav-head[b-gu82w6fqnu] {
    min-height: 40px;
    margin-bottom: 0;
    border-radius: 12px;
  }

  .panel-more-rest[b-gu82w6fqnu] {
    display: none;
  }
}

@media (min-width: 701px) and (max-width: 1199px) {
  .panel-more-backdrop[b-gu82w6fqnu] {
    background: transparent;
    animation: none;
  }

  .panel-more[b-gu82w6fqnu] {
    inset: auto auto 12px 92px;
    width: 320px;
    max-height: calc(100dvh - 24px);
    padding: 10px 10px 12px;
    border: 1px solid var(--hairline-strong);
    border-radius: 18px;
    box-shadow: 0 24px 60px -24px var(--shadow-deep);
    transform-origin: 0 100%;
    animation: panel-more-pop-b-gu82w6fqnu var(--dur-base) var(--ease-out);
  }

  .panel-more[popover][b-gu82w6fqnu]::backdrop {
    background: transparent;
  }

  .panel-more-grip[b-gu82w6fqnu],
  .panel-more-search[b-gu82w6fqnu],
  .panel-more-all[b-gu82w6fqnu] {
    display: none;
  }

  .panel-more-rest[b-gu82w6fqnu] {
    display: inline;
  }

  /* Only what is not in the rail: the rules "rail-s-N" below bring back the categories that left it. */
  .panel-more-nav > .panel-nav-top[b-gu82w6fqnu] {
    display: none;
  }

  .panel-more-nav > .panel-nav-group[b-gu82w6fqnu] {
    display: var(--rail-there, none);
  }
}

@keyframes panel-more-pop-b-gu82w6fqnu {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes panel-more-in-b-gu82w6fqnu {
  from {
    transform: translateY(100%);
  }
}

@keyframes panel-more-fade-b-gu82w6fqnu {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel-more[b-gu82w6fqnu],
  .panel-more-backdrop[b-gu82w6fqnu] {
    animation: none;
  }

  .panel-nav-items[b-gu82w6fqnu],
  .panel-nav-head[b-gu82w6fqnu]  .panel-nav-chevron {
    transition: none;
  }

  .panel-rail-more:active[b-gu82w6fqnu] {
    transform: none;
  }

  .panel-tab[b-gu82w6fqnu] {
    transition-duration: 1ms;
  }

  .panel-tab:active[b-gu82w6fqnu],
  .panel-more-nav[b-gu82w6fqnu]  a:active {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .panel-tabbar[b-gu82w6fqnu] {
    background: var(--sunk);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Hinter dem Blatt rollt die Seite nicht mit, wenn der Finger auf dem abgedunkelten Rest liegt. */
.panel-more-backdrop[b-gu82w6fqnu] {
  touch-action: none;
}

/* ---- The search field of the frame; the palette it opens is GlobalSearch. ---- */
/* On the desktop a field under the logo that says what it is and which key opens it. */
.search-trigger[b-gu82w6fqnu] {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--tint-07);
  color: var(--fg-2);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}

.search-trigger:active[b-gu82w6fqnu] {
  transform: scale(0.98);
}

.search-trigger:focus-visible[b-gu82w6fqnu] {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.search-trigger[b-gu82w6fqnu]  .icon {
  flex: none;
  color: var(--fg-3);
}

.search-trigger-text[b-gu82w6fqnu] {
  flex: 1;
  min-width: 0;
}

.search-trigger-key[b-gu82w6fqnu] {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  min-width: 20px;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--tint-09);
  color: var(--fg-2);
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .search-trigger:hover[b-gu82w6fqnu] {
    background: var(--tint-10);
    color: var(--fg);
    text-decoration: none;
  }
}

/* The rail of a tablet: the field shrinks to its symbol, with its name underneath like every other entry. */
@media (min-width: 701px) and (max-width: 1199px) {
  .search-trigger[b-gu82w6fqnu] {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 6px 2px;
    background: transparent;
    font-size: 0.66rem;
    font-weight: 500;
    text-align: center;
  }

  .search-trigger[b-gu82w6fqnu]  .icon {
    width: 20px;
    height: 20px;
  }

  .search-trigger-text[b-gu82w6fqnu] {
    flex: none;
  }

  .search-trigger-key[b-gu82w6fqnu] {
    display: none;
  }
}

/* Phone: the search is a round button in the top bar, beside the assistant and the bell. */
@media (max-width: 700px) {
  .search-trigger[b-gu82w6fqnu] {
    flex: none;
    width: 40px;
    min-height: 40px;
    margin-left: auto;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    background: var(--tint-08);
    color: var(--fg-1);
  }

  .search-trigger[b-gu82w6fqnu]  .icon {
    width: 18px;
    height: 18px;
    color: inherit;
  }

  .search-trigger-text[b-gu82w6fqnu],
  .search-trigger-key[b-gu82w6fqnu] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-trigger[b-gu82w6fqnu] {
    transition-duration: 1ms;
  }

  .search-trigger:active[b-gu82w6fqnu] {
    transform: none;
  }
}

/* ---- rail-s-N: what the rail has room for. ----
   A category carries the number of half entries the rail needs to show the list down to and including it, with a
   place left for "Mehr" (PanelLayout.razor counts them). Each number has the height of the window below which that
   is too much: 198 px + 24 px per half entry while the rail stands close (up to 880 px), 249 px + 27 px above. Below it
   the category leaves the rail and appears in the sheet behind "Mehr"; the entry "Mehr" carries the number of the
   whole list and appears as soon as that does not fit. Generated; the numbers follow from the sizes of the rail. */
@media (min-width: 701px) and (max-width: 1199px) and (max-height: 221px) {
  .rail-s-1[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 245px) {
  .rail-s-2[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 269px) {
  .rail-s-3[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 293px) {
  .rail-s-4[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 317px) {
  .rail-s-5[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 341px) {
  .rail-s-6[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 365px) {
  .rail-s-7[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 389px) {
  .rail-s-8[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 413px) {
  .rail-s-9[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 437px) {
  .rail-s-10[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 461px) {
  .rail-s-11[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 485px) {
  .rail-s-12[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 509px) {
  .rail-s-13[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 533px) {
  .rail-s-14[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 557px) {
  .rail-s-15[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 581px) {
  .rail-s-16[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 605px) {
  .rail-s-17[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 629px) {
  .rail-s-18[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 653px) {
  .rail-s-19[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 677px) {
  .rail-s-20[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 701px) {
  .rail-s-21[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 725px) {
  .rail-s-22[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 749px) {
  .rail-s-23[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 773px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 896px) {
  .rail-s-24[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 797px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 923px) {
  .rail-s-25[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 821px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 950px) {
  .rail-s-26[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 845px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 977px) {
  .rail-s-27[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 869px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1004px) {
  .rail-s-28[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1031px) {
  .rail-s-29[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1058px) {
  .rail-s-30[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1085px) {
  .rail-s-31[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1112px) {
  .rail-s-32[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1139px) {
  .rail-s-33[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1166px) {
  .rail-s-34[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1193px) {
  .rail-s-35[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1220px) {
  .rail-s-36[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1247px) {
  .rail-s-37[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1274px) {
  .rail-s-38[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1301px) {
  .rail-s-39[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1328px) {
  .rail-s-40[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1355px) {
  .rail-s-41[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1382px) {
  .rail-s-42[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1409px) {
  .rail-s-43[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1436px) {
  .rail-s-44[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1463px) {
  .rail-s-45[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1490px) {
  .rail-s-46[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1517px) {
  .rail-s-47[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1544px) {
  .rail-s-48[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1571px) {
  .rail-s-49[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1598px) {
  .rail-s-50[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1625px) {
  .rail-s-51[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1652px) {
  .rail-s-52[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1679px) {
  .rail-s-53[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1706px) {
  .rail-s-54[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1733px) {
  .rail-s-55[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}

@media (min-width: 701px) and (max-width: 1199px) and (max-height: 880px), (min-width: 701px) and (max-width: 1199px) and (min-height: 881px) and (max-height: 1760px) {
  .rail-s-56[b-gu82w6fqnu] {
    --rail-here: none;
    --rail-there: flex;
    --rail-mark: block;
  }
}
/* /Components/Layout/PrintLayout.razor.rz.scp.css */
/* Das Produkt ist dunkel, ein Blatt Papier nicht: diese Fläche liegt weiß über allem und rollt in sich. Beim Drucken
   wird sie zum gewöhnlichen Fluss der Seite, damit der Browser umbrechen kann. */
.print-page[b-tas3wew3yr] {
  position: fixed;
  inset: 0;
  overflow: auto;
  padding: 24px 16px 48px;
  background: #e9e9ec;
  color: #000;
  color-scheme: light;
}

@media print {
  .print-page[b-tas3wew3yr] {
    position: static;
    overflow: visible;
    padding: 0;
    background: #fff;
  }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-g0k74hst86],
.components-reconnect-repeated-attempt-visible[b-g0k74hst86],
.components-reconnect-failed-visible[b-g0k74hst86],
.components-pause-visible[b-g0k74hst86],
.components-resume-failed-visible[b-g0k74hst86],
.components-rejoining-animation[b-g0k74hst86] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-g0k74hst86],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-g0k74hst86],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-g0k74hst86],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-g0k74hst86],
#components-reconnect-modal.components-reconnect-retrying[b-g0k74hst86],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-g0k74hst86],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-g0k74hst86],
#components-reconnect-modal.components-reconnect-failed[b-g0k74hst86],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-g0k74hst86] {
    display: block;
}


#components-reconnect-modal[b-g0k74hst86] {
    background-color: var(--bg-1);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--hairline-strong);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-g0k74hst86 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-g0k74hst86 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-g0k74hst86 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-g0k74hst86]::backdrop {
    background-color: var(--scrim);
    animation: components-reconnect-modal-fadeInOpacity-b-g0k74hst86 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-g0k74hst86 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-g0k74hst86 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-g0k74hst86 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-g0k74hst86] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-g0k74hst86] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-g0k74hst86] {
    border: 0;
    background-color: var(--blue-fill);
    color: var(--on-accent);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-g0k74hst86] {
        background-color: var(--blue-fill-hover);
    }

    #components-reconnect-modal button:active[b-g0k74hst86] {
        background-color: var(--blue-fill);
    }

.components-rejoining-animation[b-g0k74hst86] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-g0k74hst86] {
        position: absolute;
        border: 3px solid var(--blue);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-g0k74hst86 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-g0k74hst86] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-g0k74hst86 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Hero: the offer on the left, the car with its finds on the right, the real dashboard beneath. */
.hero[b-0fpt38uo8h] {
  position: relative;
  padding: 56px var(--gutter) 24px;
}

.hero-inner[b-0fpt38uo8h] {
  display: grid;
  grid-template-columns: minmax(340px, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  max-width: 1440px;
  margin: 0 auto;
}

.hero-copy[b-0fpt38uo8h] {
  max-width: 560px;
}

.hero-title[b-0fpt38uo8h] {
  font-size: clamp(2.6rem, 4.4vw, 4.3rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
}

.hero-title span[b-0fpt38uo8h] {
  display: block;
  animation: rise-b-0fpt38uo8h 900ms var(--ease-out) both;
}

.hero-title span:nth-child(2)[b-0fpt38uo8h] {
  animation-delay: 80ms;
}

/* Das dritte Wort etwas zurückgenommen, wie auf den Visitenkarten. */
.hero-title span:nth-child(3)[b-0fpt38uo8h] {
  animation-delay: 160ms;
  color: var(--fg-2);
}

.hero-sub[b-0fpt38uo8h] {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--fg-2);
  max-width: 46ch;
  margin: 0 0 28px;
  animation: rise-b-0fpt38uo8h 900ms var(--ease-out) 140ms both;
}

.hero-actions[b-0fpt38uo8h] {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  animation: rise-b-0fpt38uo8h 900ms var(--ease-out) 200ms both;
}

.hero-status[b-0fpt38uo8h] {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 36px 0 0;
  padding: 6px 14px 6px 6px;
  border-radius: var(--pill);
  background: rgba(29, 29, 31, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  white-space: nowrap;
  animation: rise-b-0fpt38uo8h 900ms var(--ease-out) 300ms both;
}

.hero-status-text[b-0fpt38uo8h] {
  color: var(--fg-2);
  font-size: 0.86rem;
  letter-spacing: -0.005em;
}

.hero-stage[b-0fpt38uo8h] {
  position: relative;
  min-width: 0;
  animation: rise-b-0fpt38uo8h 1000ms var(--ease-out) 320ms both;
}

.hero-stage-glow[b-0fpt38uo8h] {
  position: absolute;
  inset: 10% 8% 0 0;
  pointer-events: none;
  background: radial-gradient(50% 55% at 45% 65%, rgba(41, 151, 255, 0.26), transparent 70%);
  filter: blur(40px);
}

.hero-visual[b-0fpt38uo8h] {
  position: relative;
  max-width: 1120px;
  margin: 72px auto 0;
  animation: window-in-b-0fpt38uo8h 1100ms var(--ease-out) 260ms both;
  transform-origin: 50% 100%;
}

.hero-glow[b-0fpt38uo8h] {
  position: absolute;
  inset: -10% -6% -20%;
  pointer-events: none;
  background: radial-gradient(55% 50% at 50% 55%, rgba(41, 151, 255, 0.28), transparent 70%);
  filter: blur(30px);
  animation: fade-b-0fpt38uo8h 1400ms var(--ease-out) 300ms both;
}

.hero-visual[b-0fpt38uo8h]  .demo-frame {
  position: relative;
}

/* Section rhythm */
section[b-0fpt38uo8h] {
  padding: 110px var(--gutter) 0;
}

.section-intro[b-0fpt38uo8h] {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

.section-intro h2[b-0fpt38uo8h] {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 12px;
}

.section-lead[b-0fpt38uo8h] {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--fg-2);
  line-height: 1.45;
  margin: 0 auto;
  max-width: 54ch;
}

/* Car carousel: one row, scroll-snap, pointer-driven. */
.carousel-section[b-0fpt38uo8h] {
  padding-left: 0;
  padding-right: 0;
}

.carousel-head[b-0fpt38uo8h] {
  max-width: var(--container);
  margin: 0 auto 28px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.carousel-head h2[b-0fpt38uo8h] {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 10px;
}

.carousel-head .section-lead[b-0fpt38uo8h] {
  margin: 0;
}

.carousel-nav[b-0fpt38uo8h] {
  display: flex;
  gap: 8px;
  flex: none;
}

.carousel-btn[b-0fpt38uo8h] {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--fg);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 200ms ease, transform 160ms var(--ease-out), opacity 200ms ease;
}

.carousel-btn:active[b-0fpt38uo8h] {
  transform: scale(0.94);
}

.carousel-btn:disabled[b-0fpt38uo8h] {
  opacity: 0.3;
  cursor: default;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .carousel-btn:not(:disabled):hover[b-0fpt38uo8h] {
    background: rgba(255, 255, 255, 0.18);
  }
}

.carousel-wrap[b-0fpt38uo8h] {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Fades on both edges: cards enter and leave under a soft shadow, and the row stays as wide as the heading. */
.carousel-wrap[b-0fpt38uo8h]::before,
.carousel-wrap[b-0fpt38uo8h]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 24px;
  width: 72px;
  z-index: 2;
  pointer-events: none;
}

.carousel-wrap[b-0fpt38uo8h]::before {
  left: var(--gutter);
  background: linear-gradient(90deg, var(--bg), transparent);
  opacity: 0;
  transition: opacity 250ms ease;
}

.carousel-wrap[b-0fpt38uo8h]::after {
  right: var(--gutter);
  background: linear-gradient(270deg, var(--bg), transparent);
  transition: opacity 250ms ease;
}

.carousel-wrap.at-start[b-0fpt38uo8h]::before,
.carousel-wrap.at-end[b-0fpt38uo8h]::after {
  opacity: 0;
}

.carousel-wrap:not(.at-start)[b-0fpt38uo8h]::before {
  opacity: 1;
}

.carousel[b-0fpt38uo8h] {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 0 24px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.carousel[b-0fpt38uo8h]::-webkit-scrollbar {
  display: none;
}

.car-card[b-0fpt38uo8h] {
  flex: none;
  scroll-snap-align: start;
  margin: 0;
  width: 320px;
  border-radius: 20px;
  background: var(--bg-1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.car-card img[b-0fpt38uo8h] {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: contain;
  padding: 14px 14px 0;
  transition: transform 400ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .car-card:hover img[b-0fpt38uo8h] {
    transform: scale(1.04);
  }
}

.car-card figcaption[b-0fpt38uo8h] {
  padding: 12px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.car-title[b-0fpt38uo8h] {
  color: var(--fg);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.car-spec[b-0fpt38uo8h] {
  color: var(--fg-3);
  font-size: 0.76rem;
}

.car-row[b-0fpt38uo8h] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.car-price[b-0fpt38uo8h] {
  color: var(--fg);
  font-weight: 500;
  font-size: 0.9rem;
}

.car-margin[b-0fpt38uo8h] {
  margin-left: auto;
  color: var(--green);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

/* Product areas: a numbered sequence. Copy and a framed excerpt of the panel sit side by side and swap sides
   from one area to the next, so the six do not read as a wall of identical boxes. */
.module-grid[b-0fpt38uo8h] {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.module[b-0fpt38uo8h] {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(28px, 6vw, 88px);
  padding: clamp(36px, 5vw, 64px) 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}

.module:first-child[b-0fpt38uo8h] {
  border-top: 0;
  padding-top: 8px;
}

.module:nth-child(even) .module-copy[b-0fpt38uo8h] {
  order: 2;
}

.module-copy[b-0fpt38uo8h] {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 30rem;
}

.module-step[b-0fpt38uo8h] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-size: 0.9rem;
  font-weight: 600;
}

.module-number[b-0fpt38uo8h] {
  color: var(--fg-3);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-right: 4px;
}

.module h3[b-0fpt38uo8h] {
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0;
}

.module-copy p[b-0fpt38uo8h] {
  margin: 0;
  color: var(--fg-2);
  font-size: 1.02rem;
  line-height: 1.55;
}

.module-facts[b-0fpt38uo8h] {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.module-facts li[b-0fpt38uo8h] {
  position: relative;
  padding-left: 20px;
  color: var(--fg-1);
  font-size: 0.94rem;
  line-height: 1.4;
}

.module-facts li[b-0fpt38uo8h]::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}

/* The excerpt as a small window: title bar on top, a soft glow behind it. */
/* Zwei Klassen im Selektor: die Liste selbst ist manchmal der Ausschnitt, und .mini-list setzt ihren Innenabstand auf null. */
.module .module-visual[b-0fpt38uo8h] {
  position: relative;
  margin: 0;
  padding: 50px 16px 16px;
  list-style: none;
  background: linear-gradient(180deg, var(--bg-1), #141416);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-tile), 0 0 90px -30px rgba(41, 151, 255, 0.35);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.module-visual[b-0fpt38uo8h]::before {
  content: attr(data-window);
  position: absolute;
  inset: 0 0 auto 0;
  height: 36px;
  padding: 0 14px 0 62px;
  display: flex;
  align-items: center;
  color: var(--fg-3);
  font-size: 0.78rem;
  border-bottom: 1px solid var(--line);
  /* Three window dots, drawn rather than added to the markup of every excerpt. */
  background:
    radial-gradient(circle at 16px 50%, #ff5f57 0 5px, transparent 5.5px),
    radial-gradient(circle at 32px 50%, #febc2e 0 5px, transparent 5.5px),
    radial-gradient(circle at 48px 50%, #28c840 0 5px, transparent 5.5px);
}

.module-visual .mini-list li[b-0fpt38uo8h],
.module-visual.mini-list li[b-0fpt38uo8h],
.module-visual .mini-message[b-0fpt38uo8h],
.module-visual .mini-scan[b-0fpt38uo8h] {
  background: rgba(255, 255, 255, 0.045);
}

.mini-list[b-0fpt38uo8h] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mini-list li[b-0fpt38uo8h] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-1);
  border-radius: 12px;
  min-width: 0;
}

.mini-main[b-0fpt38uo8h] {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.88rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-main small[b-0fpt38uo8h] {
  color: var(--fg-3);
  font-size: 0.76rem;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-value[b-0fpt38uo8h] {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.is-plus[b-0fpt38uo8h] {
  color: var(--green);
}

.mini-message[b-0fpt38uo8h] {
  margin: 0;
  padding: 12px 14px;
  background: var(--blue-soft);
  border-radius: 14px 14px 14px 4px;
  color: var(--fg-1);
  font-size: 0.86rem;
  line-height: 1.45;
}

.mini-foot[b-0fpt38uo8h] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mini-scan[b-0fpt38uo8h] {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(48, 209, 88, 0.12);
  color: var(--fg-1);
  font-size: 0.84rem;
  line-height: 1.4;
}

.mini-scan[b-0fpt38uo8h]  .icon {
  color: var(--green);
  flex: none;
  margin-top: 2px;
}

/* Das Bildstudio in Bewegung: sechs Bilder liegen übereinander, jedes ist ein Sechstel der Zeit zu sehen. */
.studio-show[b-0fpt38uo8h] {
  position: relative;
  aspect-ratio: 1200 / 549;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
}

.studio-show img[b-0fpt38uo8h] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: studio-frame-b-0fpt38uo8h calc(var(--frames) * 3.5s) infinite;
  animation-delay: calc(var(--i) * 3.5s);
}

.studio-chips .chip[b-0fpt38uo8h] {
  animation: studio-chip-b-0fpt38uo8h calc(var(--frames) * 3.5s) infinite;
  animation-delay: calc(var(--i) * 3.5s);
}

/* Sechs Bilder: jedes hält ein Sechstel (16,6 %), mit kurzem Überblenden an beiden Enden. */
@keyframes studio-frame-b-0fpt38uo8h {
  0% { opacity: 0; }
  3% { opacity: 1; }
  16.6% { opacity: 1; }
  20% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes studio-chip-b-0fpt38uo8h {
  0%, 16.6% { background: var(--blue-soft); color: var(--blue); }
  17%, 100% { background: rgba(255, 255, 255, 0.1); color: var(--fg-1); }
}

/* Ohne Bewegung: das erste Ergebnis steht, statt dass der Rahmen leer bleibt. */
@media (prefers-reduced-motion: reduce) {
  .studio-show img[b-0fpt38uo8h] { animation: none; }
  .studio-show img:nth-child(2)[b-0fpt38uo8h] { opacity: 1; }
  .studio-chips .chip[b-0fpt38uo8h] { animation: none; }
}

.mini-table[b-0fpt38uo8h] {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.mini-table td[b-0fpt38uo8h] {
  padding: 7px 4px;
  color: var(--fg-1);
}

.mini-table td.num[b-0fpt38uo8h] {
  text-align: right;
  white-space: nowrap;
}

.mini-table tfoot td[b-0fpt38uo8h] {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  font-weight: 600;
  color: var(--fg);
}

.mini-table tfoot td.is-plus[b-0fpt38uo8h] {
  color: var(--green);
}

/* The showroom excerpt: the one light surface on the page, because the public page it shows is light. */
.shop[b-0fpt38uo8h] {
  background: #fff;
  color: #111318;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shop-top[b-0fpt38uo8h] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.86rem;
}

.shop-top strong[b-0fpt38uo8h] {
  color: #111318;
}

.shop-call[b-0fpt38uo8h],
.shop-send[b-0fpt38uo8h] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--pill);
  background: #0b4a8f;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.shop-cars[b-0fpt38uo8h] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.shop-cars figure[b-0fpt38uo8h] {
  margin: 0;
  min-width: 0;
  border: 1px solid #e3e5ea;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f6f8;
}

.shop-cars img[b-0fpt38uo8h] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.shop-cars figcaption[b-0fpt38uo8h] {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 8px 8px;
  background: #fff;
  font-size: 0.72rem;
  line-height: 1.3;
}

.shop-cars figcaption span[b-0fpt38uo8h] {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-cars figcaption small[b-0fpt38uo8h] {
  color: #5c6370;
  font-size: 0.68rem;
}

.shop-cars figcaption b[b-0fpt38uo8h] {
  margin-top: 3px;
  font-size: 0.82rem;
}

.shop-enquiry[b-0fpt38uo8h] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shop-field[b-0fpt38uo8h] {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid #d5d8de;
  border-radius: 8px;
  color: #5c6370;
  font-size: 0.74rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-showroom .mini-foot .chip[b-0fpt38uo8h] {
  gap: 5px;
}

/* The remaining areas: a quiet grid of short entries under the five rows. Lines, not boxes, so it does not
   compete with the framed excerpts above or the tiles of the next section. */
.extras[b-0fpt38uo8h] {
  max-width: var(--container);
  margin: clamp(28px, 4vw, 48px) auto 0;
  padding-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--line);
}

.extras-title[b-0fpt38uo8h] {
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  letter-spacing: -0.03em;
}

.extras-grid[b-0fpt38uo8h] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 34px) clamp(20px, 2.6vw, 36px);
}

.extra[b-0fpt38uo8h] {
  min-width: 0;
}

.extra-head[b-0fpt38uo8h] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--fg);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.extra-head[b-0fpt38uo8h]  .icon {
  flex: none;
  color: var(--blue);
}

.extra p[b-0fpt38uo8h] {
  margin: 0;
  color: var(--fg-2);
  font-size: 0.9rem;
  line-height: 1.5;
}

.extra a[b-0fpt38uo8h] {
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}

.extras-foot[b-0fpt38uo8h] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  max-width: none;
  color: var(--fg-2);
  font-size: 0.9rem;
}

.extras-foot[b-0fpt38uo8h]  .icon {
  flex: none;
  color: var(--fg-3);
}

.modules-note[b-0fpt38uo8h] {
  max-width: 78ch;
  margin: 26px auto 0;
  text-align: center;
  color: var(--fg-3);
  font-size: 0.84rem;
  line-height: 1.5;
}

/* Countries the search covers, each with the portals read there. */
.country-list[b-0fpt38uo8h] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.country-list li[b-0fpt38uo8h] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  min-width: 0;
}

.country-list li:first-child[b-0fpt38uo8h] {
  border-top: 0;
}

.country-list[b-0fpt38uo8h]  .flag {
  flex: none;
  border-radius: 2px;
}

.country-name[b-0fpt38uo8h] {
  flex: none;
  color: var(--fg);
}

.country-portals[b-0fpt38uo8h] {
  margin-left: auto;
  color: var(--fg-3);
  font-size: 0.82rem;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Feature overview: icon, one line, two lines. */
.feature-grid[b-0fpt38uo8h] {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.feature[b-0fpt38uo8h] {
  background: var(--bg-1);
  border-radius: 22px;
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 300ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .feature:hover[b-0fpt38uo8h] {
    transform: translateY(-3px);
  }
}

.feature-icon[b-0fpt38uo8h] {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--blue-soft);
  color: var(--blue);
  margin-bottom: 6px;
}

.feature h3[b-0fpt38uo8h] {
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  margin: 0;
}

.feature p[b-0fpt38uo8h] {
  margin: 0;
  color: var(--fg-2);
  font-size: 0.93rem;
  line-height: 1.45;
}

/* Showcase: car plus the live-editable price cap. */
.showcase-grid[b-0fpt38uo8h] {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
  background: var(--bg-1);
  border-radius: 28px;
  padding: 48px 52px;
  overflow: hidden;
}

.showcase-copy h2[b-0fpt38uo8h] {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.showcase-copy .section-lead[b-0fpt38uo8h] {
  margin: 0 0 22px;
}

.showcase-points[b-0fpt38uo8h] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.showcase-points li[b-0fpt38uo8h] {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-1);
  font-size: 0.95rem;
}

.showcase-points[b-0fpt38uo8h]  .icon {
  color: var(--green);
  flex: none;
}

.showcase-visual[b-0fpt38uo8h] {
  position: relative;
  min-height: 380px;
}

.showcase-3d[b-0fpt38uo8h] {
  width: 100%;
  height: 400px;
  --poster-color: transparent;
  --progress-bar-color: transparent;
  background: radial-gradient(52% 30% at 50% 68%, rgba(41, 151, 255, 0.18), transparent 70%);
  border-radius: 20px;
}

.showcase-poster[b-0fpt38uo8h] {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 60%;
}

.cap[b-0fpt38uo8h] {
  position: absolute;
  left: 0;
  top: 8%;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: var(--pill);
  background: rgba(44, 44, 46, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.cap-second[b-0fpt38uo8h] {
  top: auto;
  bottom: 6%;
  left: 4%;
}

.cap-third[b-0fpt38uo8h] {
  top: 8%;
  left: auto;
  right: 0;
}

.cap-label[b-0fpt38uo8h] {
  font-size: 0.78rem;
  color: var(--fg-3);
}

.cap-value[b-0fpt38uo8h] {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  transition: color 300ms ease;
}

.cap-value.is-changing[b-0fpt38uo8h] {
  color: var(--blue);
}

.cap-chips[b-0fpt38uo8h] {
  display: inline-flex;
  gap: 6px;
}

.cap-chip-new[b-0fpt38uo8h] {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}

.cap-chip-new.is-on[b-0fpt38uo8h] {
  opacity: 1;
  transform: none;
}

/* Story: pinned phone, steps scroll past. */
.story-grid[b-0fpt38uo8h] {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

.story-sticky[b-0fpt38uo8h] {
  position: sticky;
  top: 100px;
  display: flex;
  justify-content: center;
}

.phone[b-0fpt38uo8h] {
  position: relative;
  width: 360px;
  max-width: 100%;
  min-height: 520px;
  border-radius: 40px;
  background: #101012;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 1), 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 6px #1a1a1c;
  padding: 26px 24px;
  overflow: hidden;
}

.phone-bar[b-0fpt38uo8h] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fg);
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.stage[b-0fpt38uo8h] {
  position: absolute;
  inset: 78px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out);
  pointer-events: none;
}

.phone[data-active="1"] .stage-1[b-0fpt38uo8h],
.phone[data-active="2"] .stage-2[b-0fpt38uo8h],
.phone[data-active="3"] .stage-3[b-0fpt38uo8h],
.phone[data-active="4"] .stage-4[b-0fpt38uo8h] {
  opacity: 1;
  transform: none;
}

.stage-title[b-0fpt38uo8h] {
  font-size: 0.75rem;
  color: var(--fg-3);
  font-weight: 500;
}

.stage-chips[b-0fpt38uo8h] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.stage-btn[b-0fpt38uo8h] {
  margin-top: auto;
  align-self: stretch;
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  background: var(--blue-fill);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
}

.stage-lines[b-0fpt38uo8h],
.stage-cars[b-0fpt38uo8h] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stage-lines li[b-0fpt38uo8h],
.stage-cars li[b-0fpt38uo8h] {
  display: flex;
  justify-content: space-between;
  padding: 11px 14px;
  border-radius: 12px;
  background: #1d1d1f;
  font-size: 0.86rem;
  color: var(--fg-1);
}

.stage-cars li span:first-child[b-0fpt38uo8h] {
  color: var(--fg);
  font-weight: 500;
}

.stage-table[b-0fpt38uo8h] {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.stage-table td[b-0fpt38uo8h] {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg-2);
}

.stage-table td.num[b-0fpt38uo8h] {
  text-align: right;
  color: var(--fg);
}

.stage-total td[b-0fpt38uo8h] {
  border-bottom: 0;
  padding-top: 12px;
  font-weight: 600;
  color: var(--fg);
}

.stage-total td.num[b-0fpt38uo8h] {
  color: var(--green);
  font-size: 1.15rem;
}

.is-strong[b-0fpt38uo8h] {
  color: var(--blue);
  font-weight: 600;
}

.is-good[b-0fpt38uo8h] {
  color: var(--green);
  font-weight: 600;
}

.story-steps[b-0fpt38uo8h] {
  display: flex;
  flex-direction: column;
  gap: 22vh;
  padding: 8vh 0 28vh;
}

.story-step[b-0fpt38uo8h] {
  opacity: 0.3;
  transition: opacity 500ms var(--ease-out);
}

.story-step.active[b-0fpt38uo8h] {
  opacity: 1;
}

.step-icon[b-0fpt38uo8h] {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--blue-soft);
  color: var(--blue);
  margin-bottom: 14px;
}

.story-step h3[b-0fpt38uo8h] {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

.story-step p[b-0fpt38uo8h] {
  font-size: 1rem;
  color: var(--fg-2);
  max-width: 40ch;
}

/* Margin section */
.margin-grid[b-0fpt38uo8h] {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: center;
}

.margin-copy h2[b-0fpt38uo8h] {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.margin-copy .section-lead[b-0fpt38uo8h] {
  margin: 0 0 24px;
}

.margin-points[b-0fpt38uo8h] {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.margin-points li[b-0fpt38uo8h] {
  position: relative;
  padding-left: 22px;
  color: var(--fg-2);
  font-size: 0.96rem;
}

.margin-points li[b-0fpt38uo8h]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}

.receipt[b-0fpt38uo8h] {
  position: relative;
  background: var(--bg-1);
  border-radius: 28px;
  padding: 28px 30px 22px;
  box-shadow: var(--shadow-tile);
  overflow: hidden;
}

.receipt-head[b-0fpt38uo8h] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.receipt-head strong[b-0fpt38uo8h] {
  display: block;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.receipt-head .muted[b-0fpt38uo8h] {
  font-size: 0.8rem;
}

.receipt-table[b-0fpt38uo8h] {
  position: relative;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin-top: 8px;
}

.receipt-table td[b-0fpt38uo8h] {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg-2);
}

.receipt-table td.num[b-0fpt38uo8h] {
  text-align: right;
  color: var(--fg);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.receipt-gap td[b-0fpt38uo8h] {
  padding-top: 18px;
}

.receipt-table tfoot td[b-0fpt38uo8h] {
  border-bottom: 0;
  padding-top: 16px;
  font-weight: 600;
  color: var(--fg);
  font-size: 1.05rem;
}

.receipt-table tfoot td.num[b-0fpt38uo8h] {
  color: var(--green);
  font-size: 1.5rem;
  letter-spacing: -0.03em;
}

.receipt-table tfoot small[b-0fpt38uo8h] {
  color: var(--fg-3);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0;
}

.receipt-note[b-0fpt38uo8h] {
  margin: 14px 0 0;
  font-size: 0.74rem;
  color: var(--fg-3);
  max-width: none;
}

/* Closing: the sentence alone on a quiet blue light. */
.closing[b-0fpt38uo8h] {
  position: relative;
  padding-bottom: 130px;
  overflow: hidden;
}

.closing[b-0fpt38uo8h]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 40%;
  width: 900px;
  height: 500px;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(41, 151, 255, 0.22), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.closing-inner[b-0fpt38uo8h] {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding-top: 40px;
}

.closing-inner h2[b-0fpt38uo8h] {
  font-size: clamp(2.2rem, 5vw, 4rem);
  letter-spacing: -0.04em;
  margin-bottom: 16px;
}

.closing-inner .section-lead[b-0fpt38uo8h] {
  margin-bottom: 30px;
}

.closing-inner .hero-actions[b-0fpt38uo8h] {
  justify-content: center;
  animation: none;
}

@keyframes rise-b-0fpt38uo8h {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-b-0fpt38uo8h {
  to {
    opacity: 1;
  }
}

@keyframes window-in-b-0fpt38uo8h {
  from {
    opacity: 0;
    transform: perspective(1600px) rotateX(12deg) translateY(50px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1100px) {
  .hero-inner[b-0fpt38uo8h] {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hero-copy[b-0fpt38uo8h] {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
  }

  .hero-sub[b-0fpt38uo8h] {
    margin-inline: auto;
  }

  .hero-actions[b-0fpt38uo8h] {
    justify-content: center;
  }
}

@media (max-width: 1080px) {
  .feature-grid[b-0fpt38uo8h] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .extras-grid[b-0fpt38uo8h] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .module[b-0fpt38uo8h] {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .module:nth-child(even) .module-copy[b-0fpt38uo8h] {
    order: 0;
  }

  .module-copy[b-0fpt38uo8h] {
    max-width: none;
  }

  .showcase-grid[b-0fpt38uo8h],
  .story-grid[b-0fpt38uo8h],
  .margin-grid[b-0fpt38uo8h] {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .story-sticky[b-0fpt38uo8h] {
    position: relative;
    top: auto;
  }

  .story-steps[b-0fpt38uo8h] {
    gap: 40px;
    padding: 0;
  }

  .story-step[b-0fpt38uo8h] {
    opacity: 1;
  }

}

@media (max-width: 700px) {
  .hero[b-0fpt38uo8h] {
    padding-top: 40px;
  }

  .hero-status-text[b-0fpt38uo8h] {
    font-size: 0.78rem;
  }

  .hero-status[b-0fpt38uo8h] {
    margin-top: 24px;
  }

  .hero-visual[b-0fpt38uo8h] {
    margin-top: 40px;
  }

  section[b-0fpt38uo8h] {
    padding-top: 76px;
  }

  .feature-grid[b-0fpt38uo8h] {
    grid-template-columns: 1fr;
  }

  .extras-grid[b-0fpt38uo8h] {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .extras-foot[b-0fpt38uo8h] {
    align-items: flex-start;
  }

  .shop-cars[b-0fpt38uo8h] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-cars figure:nth-child(3)[b-0fpt38uo8h] {
    display: none;
  }

  .shop-enquiry[b-0fpt38uo8h] {
    flex-wrap: wrap;
  }

  .shop-field[b-0fpt38uo8h] {
    flex-basis: 100%;
  }

  .module[b-0fpt38uo8h] {
    padding: 32px 0;
  }

  .module .module-visual[b-0fpt38uo8h] {
    padding: 46px 10px 10px;
  }

  /* Auf dem Telefon rückt die Einordnung unter den Text, statt ihn auf wenige Zeichen zu kürzen. */
  .mini-list li[b-0fpt38uo8h] {
    flex-wrap: wrap;
  }

  .mini-main[b-0fpt38uo8h] {
    flex-basis: 100%;
    white-space: normal;
  }

  .mini-main small[b-0fpt38uo8h] {
    white-space: normal;
  }

  .showcase-grid[b-0fpt38uo8h] {
    padding: 28px 22px;
  }

  .showcase-3d[b-0fpt38uo8h] {
    height: 280px;
  }

  .cap-third[b-0fpt38uo8h] {
    display: none;
  }

  .car-card[b-0fpt38uo8h] {
    width: 260px;
  }

  .phone[b-0fpt38uo8h] {
    width: 100%;
    min-height: 480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title span[b-0fpt38uo8h],
  .hero-sub[b-0fpt38uo8h],
  .hero-actions[b-0fpt38uo8h],
  .hero-glow[b-0fpt38uo8h],
  .hero-status[b-0fpt38uo8h],
  .hero-stage[b-0fpt38uo8h],
  .hero-visual[b-0fpt38uo8h] {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .carousel[b-0fpt38uo8h] {
    scroll-behavior: auto;
  }

  .cap-chip-new[b-0fpt38uo8h] {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .stage[b-0fpt38uo8h] {
    transform: none;
  }

  .feature:hover[b-0fpt38uo8h],
  .car-card:hover img[b-0fpt38uo8h] {
    transform: none;
  }
}
/* /Components/Pages/Panel/AssistantChat.razor.rz.scp.css */
/* The assistant: the earlier conversations on the left, the current one on the right. On a phone the list is a sheet. */
.asst[b-ohh57duz4t] {
  display: grid;
  grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.asst-side[b-ohh57duz4t],
.asst-main[b-ohh57duz4t] {
  display: flex;
  flex-direction: column;
  height: max(480px, calc(100dvh - 190px));
  min-width: 0;
  overflow: hidden;
}

.asst-history-toggle[b-ohh57duz4t],
.asst-side-close[b-ohh57duz4t],
.asst-backdrop[b-ohh57duz4t] {
  display: none;
}

.asst-side-head[b-ohh57duz4t] {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 8px;
}

.asst-side-head h2[b-ohh57duz4t] {
  margin: 0;
  color: var(--fg-2);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.asst-side-close[b-ohh57duz4t] {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  place-items: center;
  background: var(--tint-08);
  color: var(--fg-1);
  cursor: pointer;
}

.asst-list[b-ohh57duz4t] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 8px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.asst-list-empty[b-ohh57duz4t] {
  margin: 0;
  padding: 8px 10px;
  font-size: 0.84rem;
  line-height: 1.45;
}

.asst-row[b-ohh57duz4t] {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--fg-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.asst-row:active[b-ohh57duz4t] {
  transform: scale(0.99);
}

.asst-row:focus-visible[b-ohh57duz4t],
.asst-side-close:focus-visible[b-ohh57duz4t] {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.asst-row.is-open[b-ohh57duz4t] {
  background: var(--bg-2);
}

.asst-row:disabled[b-ohh57duz4t] {
  cursor: default;
  opacity: 0.6;
}

.asst-row-title[b-ohh57duz4t] {
  display: -webkit-box;
  overflow: hidden;
  color: var(--fg);
  font-size: 0.87rem;
  font-weight: 500;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.asst-row-meta[b-ohh57duz4t] {
  color: var(--fg-3);
  font-size: 0.72rem;
}

.asst-side-foot[b-ohh57duz4t] {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--hairline);
}

.asst-side-note[b-ohh57duz4t] {
  color: var(--fg-3);
  font-size: 0.72rem;
  line-height: 1.45;
}

.asst-side-buttons[b-ohh57duz4t] {
  display: flex;
  gap: 8px;
}

/* The example questions wrap on a wide screen; on a phone they stay one swipeable line. */
@media (min-width: 701px) {
  .asst-main[b-ohh57duz4t]  .chat-snippets {
    flex-wrap: wrap;
    overflow: visible;
  }
}

@media (hover: hover) and (pointer: fine) {
  .asst-row:not(.is-open):not(:disabled):hover[b-ohh57duz4t] {
    background: var(--tint-05);
  }

  .asst-side-close:hover[b-ohh57duz4t] {
    background: var(--tint-14);
  }
}

/* Narrow: the conversation fills the width, the list comes up as a sheet from the bottom. */
@media (max-width: 1000px) {
  .asst[b-ohh57duz4t] {
    grid-template-columns: minmax(0, 1fr);
  }

  .asst-history-toggle[b-ohh57duz4t] {
    display: inline-flex;
  }

  .asst-main[b-ohh57duz4t] {
    height: max(460px, calc(100dvh - 250px));
  }

  .asst-side[b-ohh57duz4t] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    height: auto;
    max-height: min(78dvh, 620px);
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: transform 320ms var(--ease-drawer), visibility 0s linear 320ms;
  }

  .asst.has-history .asst-side[b-ohh57duz4t] {
    visibility: visible;
    transform: none;
    transition: transform 320ms var(--ease-drawer), visibility 0s;
  }

  .asst.has-history .asst-backdrop[b-ohh57duz4t] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--scrim);
    animation: asst-fade-b-ohh57duz4t 200ms ease;
  }

  .asst-side-close[b-ohh57duz4t] {
    display: grid;
  }

  .asst-row[b-ohh57duz4t] {
    padding: 12px;
  }
}

@keyframes asst-fade-b-ohh57duz4t {
  from {
    opacity: 0;
  }
}

@media (max-width: 700px) {
  /* The head carries two buttons here and the bar below takes its share: the conversation ends above the bar. */
  .asst-main[b-ohh57duz4t] {
    height: max(420px, calc(100dvh - 330px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .asst.has-history .asst-backdrop[b-ohh57duz4t] {
    animation: none;
  }

  .asst-side[b-ohh57duz4t],
  .asst.has-history .asst-side[b-ohh57duz4t] {
    transition: none;
  }

  .asst-row[b-ohh57duz4t] {
    transition-duration: 1ms;
  }

  .asst-row:active[b-ohh57duz4t] {
    transform: none;
  }
}
/* /Components/Pages/Panel/CalculationSheet.razor.rz.scp.css */
/* Das Kalkulationsblatt: ein Blatt A4, schwarz auf weiß, ohne die Farben des Panels. Auf dem Schirm liegt es als
   Blatt auf grauem Grund; im Druck füllt es die Seite. */
.calc-sheet-bar[b-9oahqltvxw] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  max-width: 210mm;
  margin: 0 auto 12px;
}

.calc-sheet-btn[b-9oahqltvxw] {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid #b8b8be;
  border-radius: 980px;
  background: #fff;
  color: #000;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.calc-sheet-btn.is-primary[b-9oahqltvxw] {
  border-color: #000;
  background: #000;
  color: #fff;
}

.calc-sheet-btn:focus-visible[b-9oahqltvxw] {
  outline: 3px solid #0071e3;
  outline-offset: 2px;
}

.calc-sheet[b-9oahqltvxw] {
  box-sizing: border-box;
  max-width: 210mm;
  margin: 0 auto;
  padding: 16mm 15mm;
  background: #fff;
  color: #000;
  font-size: 10.5pt;
  line-height: 1.4;
  box-shadow: 0 10px 40px -20px rgba(0, 0, 0, 0.5);
}

.calc-sheet h1[b-9oahqltvxw] {
  margin: 0;
  color: #000;
  font-size: 17pt;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.calc-sheet p[b-9oahqltvxw] {
  margin: 0;
  max-width: none;
  color: #000;
}

/* Das Panel färbt Hervorhebungen hell; auf dem Blatt sind sie schwarz wie alles andere. */
.calc-sheet strong[b-9oahqltvxw],
.calc-sheet li[b-9oahqltvxw] {
  color: #000;
}

.calc-sheet-kicker[b-9oahqltvxw] {
  margin-bottom: 2pt;
  font-size: 8.5pt;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calc-sheet-head[b-9oahqltvxw] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8pt 20pt;
  padding-bottom: 10pt;
  border-bottom: 1.5pt solid #000;
}

.calc-sheet-meta[b-9oahqltvxw],
.calc-sheet-facts[b-9oahqltvxw] {
  margin: 0;
}

.calc-sheet-meta div[b-9oahqltvxw] {
  display: flex;
  justify-content: flex-end;
  gap: 6pt;
  font-size: 9pt;
}

.calc-sheet-meta dt[b-9oahqltvxw]::after {
  content: ":";
}

.calc-sheet dt[b-9oahqltvxw] {
  color: #444;
}

.calc-sheet dd[b-9oahqltvxw] {
  margin: 0;
  color: #000;
}

.calc-sheet-facts[b-9oahqltvxw] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6pt 16pt;
  margin: 12pt 0;
}

.calc-sheet-facts dt[b-9oahqltvxw] {
  font-size: 8.5pt;
}

.calc-sheet-facts dd[b-9oahqltvxw] {
  font-weight: 600;
}

.calc-sheet-table[b-9oahqltvxw] {
  width: 100%;
  margin-top: 10pt;
  border-collapse: collapse;
}

.calc-sheet-table th[b-9oahqltvxw] {
  padding: 4pt 0;
  border-bottom: 0.75pt solid #000;
  color: #444;
  font-size: 8.5pt;
  font-weight: 600;
  text-align: left;
}

.calc-sheet-table td[b-9oahqltvxw] {
  padding: 4.5pt 8pt 4.5pt 0;
  border-bottom: 0.5pt solid #bbb;
  color: #000;
  vertical-align: top;
}

.calc-sheet-table td:nth-child(2):not(.num)[b-9oahqltvxw] {
  color: #444;
  font-size: 9pt;
}

.calc-sheet-table .num[b-9oahqltvxw] {
  padding-right: 0;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.calc-sheet-table tfoot td[b-9oahqltvxw] {
  border-top: 1pt solid #000;
  border-bottom: 0;
  font-size: 12pt;
  font-weight: 700;
}

.calc-sheet .calc-sheet-line[b-9oahqltvxw] {
  margin-top: 8pt;
}

.calc-sheet-notes[b-9oahqltvxw] {
  margin: 12pt 0 0;
  padding-left: 14pt;
  color: #222;
  font-size: 8.5pt;
}

.calc-sheet-foot[b-9oahqltvxw] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4pt 16pt;
  margin-top: 14pt;
  padding-top: 6pt;
  border-top: 0.5pt solid #000;
  color: #222;
  font-size: 8pt;
}

@media (max-width: 640px) {
  .calc-sheet[b-9oahqltvxw] {
    padding: 20px 16px;
  }

  .calc-sheet-meta div[b-9oahqltvxw] {
    justify-content: flex-start;
  }
}

@media print {
  .calc-sheet-bar[b-9oahqltvxw] {
    display: none;
  }

  .calc-sheet[b-9oahqltvxw] {
    max-width: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }

  .calc-sheet-table tr[b-9oahqltvxw],
  .calc-sheet-notes li[b-9oahqltvxw] {
    break-inside: avoid;
  }
}
/* /Components/Pages/Panel/Company.razor.rz.scp.css */
/* What the data of this page are used for: four tiles in a row, each a link to where that use is set up. */
.company-uses[b-ue8lhh7wmu] {
  margin-bottom: 16px;
}

.company-uses h2[b-ue8lhh7wmu] {
  margin: 0 0 8px 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.company-uses ul[b-ue8lhh7wmu] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.company-uses li[b-ue8lhh7wmu] {
  display: flex;
  min-width: 0;
}

.company-use[b-ue8lhh7wmu] {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 14px 14px 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-1);
  box-shadow: var(--elevation);
  color: var(--fg);
  text-decoration: none;
  transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

a.company-use:active[b-ue8lhh7wmu] {
  transform: scale(0.99);
}

a.company-use:focus-visible[b-ue8lhh7wmu] {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

@media (hover: hover) and (pointer: fine) {
  a.company-use:hover[b-ue8lhh7wmu] {
    background: var(--bg-2);
    text-decoration: none;
  }
}

.company-use-icon[b-ue8lhh7wmu] {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue);
}

.company-use.is-missing .company-use-icon[b-ue8lhh7wmu] {
  background: color-mix(in srgb, var(--orange) 16%, transparent);
  color: var(--orange);
}

.company-use-text[b-ue8lhh7wmu] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  color: var(--fg-2);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.company-use-text strong[b-ue8lhh7wmu] {
  color: var(--fg);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.company-use-state[b-ue8lhh7wmu] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  color: var(--green);
  font-weight: 500;
}

.company-use-state.is-missing[b-ue8lhh7wmu] {
  display: block;
  color: var(--orange);
}

.company-use-go[b-ue8lhh7wmu] {
  flex: none;
  align-self: center;
  color: var(--fg-3);
}

/* The form has no third column of its own on a wide window: sections at the side, the form, the letterhead. */
.company-fields[b-ue8lhh7wmu] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.company-lead[b-ue8lhh7wmu] {
  margin: 4px 20px 12px;
  max-width: 78ch;
  font-size: 0.8125rem;
}

.company-req[b-ue8lhh7wmu] {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--pill);
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: 1px;
}

.company-lead .company-req[b-ue8lhh7wmu] {
  margin-left: 0;
  margin-right: 4px;
}

.setting-hint.is-warning[b-ue8lhh7wmu] {
  color: var(--orange);
}

/* ---- Logo ---- */
.company-logo[b-ue8lhh7wmu] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* The logo is shown as it prints: on white. */
.company-logo img[b-ue8lhh7wmu] {
  max-width: 220px;
  max-height: 56px;
  padding: 6px;
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--hairline);
}

.company-logo input[type="file"][b-ue8lhh7wmu] {
  display: none;
}

/* The converted picture before it is stored: on white, as it prints, with what it became beside it. */
.company-logo-pending[b-ue8lhh7wmu] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 4px 20px 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface-2);
}

.company-logo-pending img[b-ue8lhh7wmu] {
  max-width: 260px;
  max-height: 72px;
  padding: 8px;
  border-radius: 6px;
  background: var(--paper);
}

.company-logo-facts[b-ue8lhh7wmu] {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 0.8125rem;
}

.company-logo-facts span[b-ue8lhh7wmu] {
  overflow-wrap: anywhere;
}

.company-logo-actions[b-ue8lhh7wmu] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---- Accent colour ---- */
.company-colours[b-ue8lhh7wmu] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.company-swatch[b-ue8lhh7wmu] {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--bg-1);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px var(--line-strong);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.company-swatch:active[b-ue8lhh7wmu] {
  transform: scale(0.94);
}

.company-swatch.is-active[b-ue8lhh7wmu] {
  box-shadow: 0 0 0 2px var(--blue);
}

.company-swatch:focus-visible[b-ue8lhh7wmu] {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.company-custom[b-ue8lhh7wmu] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--fg-3);
  font-size: 0.8125rem;
}

.company-custom input[type="color"][b-ue8lhh7wmu] {
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 2px;
  border-radius: 8px;
  cursor: pointer;
}

.company-custom input[type="text"][b-ue8lhh7wmu] {
  width: 104px;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 0.9rem;
}

/* ---- The head of a letter, on paper: white in both themes, with the dealer's own colour. ---- */
.company-paper[b-ue8lhh7wmu] {
  /* theme-fixed: paper is white whatever the panel looks like */
  --company-ink: #1c1c1e;
  --company-ink-2: #5b5b60;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 4px 20px 12px;
  padding: 18px 18px 16px;
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--hairline-strong);
  color: var(--company-ink-2);
  font-size: 0.78rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.company-paper img[b-ue8lhh7wmu] {
  max-width: 150px;
  max-height: 44px;
  margin-bottom: 8px;
}

.company-paper strong[b-ue8lhh7wmu] {
  color: var(--company-ink);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.company-paper-contact[b-ue8lhh7wmu] {
  margin-top: 4px;
}

.company-paper-rule[b-ue8lhh7wmu] {
  align-self: stretch;
  height: 2px;
  margin: 12px 0 8px;
  border-radius: 1px;
  background: var(--company-accent);
}

.company-paper-title[b-ue8lhh7wmu] {
  color: var(--company-accent);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

@media (max-width: 1100px) {
  .company-uses ul[b-ue8lhh7wmu] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .company-uses ul[b-ue8lhh7wmu] {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .company-use[b-ue8lhh7wmu] {
    padding: 12px;
  }

  .company-custom[b-ue8lhh7wmu] {
    margin-left: 0;
  }

  .company-lead[b-ue8lhh7wmu],
  .company-paper[b-ue8lhh7wmu],
  .company-logo-pending[b-ue8lhh7wmu] {
    margin-inline: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .company-use[b-ue8lhh7wmu],
  .company-swatch[b-ue8lhh7wmu] {
    transition: none;
  }

  a.company-use:active[b-ue8lhh7wmu],
  .company-swatch:active[b-ue8lhh7wmu] {
    transform: none;
  }
}
/* /Components/Pages/Panel/Dashboard.razor.rz.scp.css */
.dash-skeleton[b-9eqawhu27c] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dash-skeleton .skeleton[b-9eqawhu27c] {
  border-radius: var(--radius-lg);
}

@media (max-width: 760px) {
  .dash-skeleton[b-9eqawhu27c] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* /Components/Pages/Panel/MarketsArbitrage.razor.rz.scp.css */
/* Transportart je Fund: Art, Kosten und Dauer in einer Zeile, daneben der Hinweis, falls die andere Art günstiger wäre. */
.ix-transport-line[b-7hcnl41jp2] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
/* /Components/Pages/Panel/MarketsCalculator.razor.rz.scp.css */
/* Die gewählte Transportart unter dem Ergebnis: eine Zeile, die sagt, wie der Wagen kommt und wie lange das dauert. */
.ix-transport[b-ctm2w7vbvz] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 24px 0;
  font-size: 0.88rem;
  color: var(--fg-2);
}

.ix-transport strong[b-ctm2w7vbvz] {
  color: var(--fg);
  font-weight: 600;
}
/* /Components/Pages/Panel/MarketsDocuments.razor.rz.scp.css */
/* Über den Punkten einer Liste: wer den Wagen bringt. Die Wahl bestimmt, welche Punkte darunter stehen. */
.ix-check-transport[b-wlocyoackc] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 4px 24px 12px;
  font-size: 0.86rem;
}
/* /Components/Pages/Panel/MarketsExport.razor.rz.scp.css */
/* Die Transportart gilt für alle Wagen der Ansicht; sie steht deshalb einmal über der Liste. */
.ix-transport-pick[b-wfvwob97su] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 16px;
  font-size: 0.86rem;
}
/* /Components/Pages/Panel/Results.razor.rz.scp.css */
.result-sold[b-nbfhmj4qm4] {
  margin-bottom: 12px;
  padding-bottom: 8px;
}

.result-empty[b-nbfhmj4qm4] {
  margin: 0;
  padding: 12px 24px 16px;
  font-size: 0.9rem;
}

.result-chip[b-nbfhmj4qm4] {
  margin-top: 4px;
}

.result-how h3[b-nbfhmj4qm4] {
  margin: 0 0 12px;
  font-size: 1rem;
}

.result-how ul[b-nbfhmj4qm4] {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--fg-2);
}

.result-how strong[b-nbfhmj4qm4] {
  color: var(--fg-1);
}
/* /Components/Pages/Panel/RunEditor.razor.rz.scp.css */
/* The alarm margin is one number; it does not need the width of the whole sheet. */
.alarm-margin[b-1rtim951je] {
  max-width: 280px;
}

/* Who loads mobile.de for this run: two cards with one honest sentence each, below the portals. */
.fetch-choice[b-1rtim951je] {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.fetch-choice-label[b-1rtim951je] {
  font-size: 0.82rem;
  color: var(--fg-2);
}
/* /Components/Pages/Panel/Runs.razor.rz.scp.css */
/* The line of a run that searches mobile.de through the dealer's browser, and the hint when that browser is missing. */
.run-browser[b-4cv2p5nh3n] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--fg-2);
}

.run-browser-line[b-4cv2p5nh3n] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.run-browser.is-hint .run-browser-hint[b-4cv2p5nh3n] {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  color: var(--fg);
  line-height: 1.45;
}

.run-browser-hint .btn[b-4cv2p5nh3n] {
  margin: 6px 0 0;
  display: flex;
}
/* /Components/Pages/Panel/Sales.razor.rz.scp.css */
.sales-scope[b-9c2lbxiz6d] {
  margin: 28px 0 0;
  font-size: 0.8125rem;
  max-width: 72ch;
}
/* /Components/Pages/Panel/SalesDocumentPage.razor.rz.scp.css */
.sales-doc[b-tzp40clm4f] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 20px;
  align-items: start;
}

.sales-doc-main[b-tzp40clm4f] {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.sales-doc-side[b-tzp40clm4f] {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sales-doc-sub[b-tzp40clm4f] {
  margin-left: 8px;
}

.sales-fields[b-tzp40clm4f] {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: grid;
  gap: 16px;
}

.sales-doc-main h3[b-tzp40clm4f] {
  margin: 0 0 12px;
}

.sales-doc-main .field + .field-row[b-tzp40clm4f],
.sales-doc-main .field-row + .field-row[b-tzp40clm4f],
.sales-doc-main .field-row + .field[b-tzp40clm4f],
.sales-doc-main .field + .field[b-tzp40clm4f] {
  margin-top: 12px;
}

/* Fields that stand side by side in a row share its top edge; the gaps above are for what follows below. */
.sales-doc-main .field-row > .field + .field[b-tzp40clm4f] {
  margin-top: 0;
}

.sales-inline-action[b-tzp40clm4f] {
  align-self: end;
}

.sales-suggest[b-tzp40clm4f] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.sales-suggest small[b-tzp40clm4f] {
  opacity: 0.7;
}

.sales-new-customer[b-tzp40clm4f] {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.sales-line[b-tzp40clm4f] {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.sales-line:first-of-type[b-tzp40clm4f] {
  border-top: 0;
  padding-top: 0;
}

.sales-line-head[b-tzp40clm4f] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.sales-line-total[b-tzp40clm4f] {
  justify-items: end;
  align-self: end;
  text-align: right;
}

.sales-add[b-tzp40clm4f],
.sales-actions[b-tzp40clm4f] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.sales-confirm[b-tzp40clm4f] {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.sales-confirm p[b-tzp40clm4f] {
  max-width: 70ch;
}

/* The steps of a draft: a number, the title and what is still open there. */
.sales-step h3[b-tzp40clm4f] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.sales-step-no[b-tzp40clm4f] {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--fg);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sales-step-state[b-tzp40clm4f] {
  margin-left: auto;
  font-weight: 500;
}

/* A step the checklist jumped to shows where the reader landed. */
.sales-step[b-tzp40clm4f] {
  scroll-margin-top: 16px;
}

.sales-step:focus[b-tzp40clm4f] {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.sales-step:focus:not(:focus-visible)[b-tzp40clm4f] {
  outline-color: var(--line-strong);
}

/* What keeps the draft from being finalised, on top where nobody has to look for it. */
.sales-check[b-tzp40clm4f] {
  border-left: 3px solid var(--orange);
}

.sales-check.is-complete[b-tzp40clm4f] {
  border-left-color: var(--green);
}

.sales-check h3[b-tzp40clm4f] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.sales-check.is-complete h3[b-tzp40clm4f] {
  color: var(--green);
}

.sales-check p[b-tzp40clm4f] {
  margin: 0;
}

.sales-check-list[b-tzp40clm4f] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.sales-check-item[b-tzp40clm4f] {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 12px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--fg-1);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms var(--ease-out);
}

.sales-check-item:hover[b-tzp40clm4f] {
  background: var(--bg-3);
}

.sales-check-item:active[b-tzp40clm4f] {
  transform: scale(0.995);
}

.sales-check-item:focus-visible[b-tzp40clm4f] {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.sales-check-where[b-tzp40clm4f] {
  color: var(--blue);
  font-weight: 500;
}

.sales-check-item small[b-tzp40clm4f] {
  color: var(--fg-3);
  white-space: nowrap;
}

.sales-texts-hint[b-tzp40clm4f] {
  margin: 0 0 12px;
}

.sales-finish .link-button[b-tzp40clm4f] {
  border: 0;
  padding: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  cursor: pointer;
}

.sales-finish .link-button:hover[b-tzp40clm4f] {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .sales-check-item[b-tzp40clm4f] {
    grid-template-columns: 1fr;
  }
}

.sales-pay-summary[b-tzp40clm4f] {
  margin-bottom: 12px;
}

.sales-pay-summary div[b-tzp40clm4f] {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.sales-payments[b-tzp40clm4f] {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 6px;
}

.sales-payment[b-tzp40clm4f] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}

.sales-payment-text[b-tzp40clm4f] {
  display: grid;
  gap: 2px;
  flex: 1 1 240px;
  min-width: 0;
  font-size: 0.875rem;
}

.sales-payment-form[b-tzp40clm4f] {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.sales-log[b-tzp40clm4f] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 0.875rem;
}

.sales-log li[b-tzp40clm4f] {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 12px;
}

.sales-sold[b-tzp40clm4f],
.sales-paper-note[b-tzp40clm4f] {
  margin: 0;
  font-size: 0.8125rem;
}

@media (max-width: 1200px) {
  .sales-doc[b-tzp40clm4f] {
    grid-template-columns: 1fr;
  }

  .sales-doc-side[b-tzp40clm4f] {
    position: static;
  }
}

/* Whether and when the document went out by e-mail, and how often its invoice was reminded of. */
.sales-mailed-line[b-tzp40clm4f] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.sales-mailed-line .chip[b-tzp40clm4f] {
  gap: 6px;
}

.sales-mailed p.muted[b-tzp40clm4f] {
  margin: 12px 0 0;
  max-width: 78ch;
  font-size: 0.875rem;
}
/* /Components/Pages/Panel/SalesDocuments.razor.rz.scp.css */
.sales-new[b-bqh01a5j3f] {
  display: flex;
  gap: 8px;
}

.sales-filter[b-bqh01a5j3f] {
  padding-bottom: 4px;
}

/* "gesendet am …" and the reminder count under the state chip. */
.sales-sent[b-bqh01a5j3f] {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .sales-sent[b-bqh01a5j3f] {
    justify-content: flex-end;
  }
}
/* /Components/Pages/Panel/SalesExport.razor.rz.scp.css */
.sales-export-quick[b-amitln7uu6] {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sales-export-note[b-amitln7uu6] {
  margin: 4px 20px 12px;
}

.sales-export-actions[b-amitln7uu6] {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 20px 20px;
}

.sales-export-actions .is-disabled[b-amitln7uu6] {
  opacity: 0.45;
  pointer-events: none;
}

.sales-export-how[b-amitln7uu6] {
  margin-top: 16px;
}

.sales-export-how ul[b-amitln7uu6] {
  margin: 12px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  max-width: 86ch;
}

.sales-export-incoming[b-amitln7uu6] {
  margin-top: 16px;
}

.sales-export-incoming .sales-export-note[b-amitln7uu6] {
  margin-top: 12px;
}
/* /Components/Pages/Panel/SalesIncoming.razor.rz.scp.css */
.instrument-value.is-red[b-0fe9mxp5nl] {
  color: var(--red);
}

.instrument-value.is-amber[b-0fe9mxp5nl] {
  color: var(--orange);
}

/* Taking a file in: the drop area on the left, where mail comes from on the right. */
.incoming-intake-body[b-0fe9mxp5nl] {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 16px;
  padding: 10px 20px 20px;
  align-items: stretch;
}

.incoming-drop[b-0fe9mxp5nl] {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  min-height: 132px;
  margin: 0;
  padding: 18px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  color: var(--fg-1);
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}

.incoming-drop:hover[b-0fe9mxp5nl],
.incoming-drop:focus-within[b-0fe9mxp5nl] {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.incoming-drop.is-busy[b-0fe9mxp5nl] {
  opacity: 0.6;
  cursor: progress;
}

.incoming-drop span[b-0fe9mxp5nl] {
  font-size: 0.8125rem;
  max-width: 44ch;
}

/* The file input covers the whole area, so a file dropped anywhere on it is taken. */
.incoming-drop[b-0fe9mxp5nl]  input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.incoming-source[b-0fe9mxp5nl] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-content: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--fg-2);
}

.incoming-source p[b-0fe9mxp5nl] {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: 60ch;
}

.incoming-head[b-0fe9mxp5nl] {
  align-items: center;
}

.incoming-table tr.is-muted td[b-0fe9mxp5nl] {
  color: var(--fg-3);
}

.incoming-table .vehicle-spec.is-red[b-0fe9mxp5nl] {
  color: var(--red);
}

.incoming-table .vehicle-spec.is-amber[b-0fe9mxp5nl] {
  color: var(--orange);
}

.incoming-iban[b-0fe9mxp5nl] {
  display: block;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.incoming-note[b-0fe9mxp5nl] {
  margin: 16px 0 0;
  font-size: 0.8125rem;
  max-width: 96ch;
}

@media (max-width: 860px) {
  .incoming-intake-body[b-0fe9mxp5nl] {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 16px 16px;
  }

  .incoming-drop[b-0fe9mxp5nl] {
    min-height: 112px;
  }

  .incoming-iban[b-0fe9mxp5nl] {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
/* /Components/Pages/Panel/SalesIncomingPage.razor.rz.scp.css */
/* The original on the left, its fields on the right. The file stays in view while the fields scroll. */
.incoming-review[b-4241ntd9sg] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.sales-doc-sub[b-4241ntd9sg] {
  margin-left: 8px;
}

.incoming-file[b-4241ntd9sg] {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.incoming-file .label[b-4241ntd9sg] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.incoming-file-frame[b-4241ntd9sg] {
  display: block;
  width: 100%;
  height: min(78vh, 980px);
  min-height: 520px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
}

.incoming-file-image[b-4241ntd9sg] {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  overflow: hidden;
}

.incoming-file-image img[b-4241ntd9sg] {
  display: block;
  width: 100%;
  height: auto;
}

.incoming-file-missing[b-4241ntd9sg] {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 48px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--fg-3);
  text-align: center;
}

.incoming-file-missing p[b-4241ntd9sg] {
  margin: 0;
  max-width: 46ch;
}

.incoming-file-note[b-4241ntd9sg] {
  margin: 0;
  font-size: 0.8125rem;
}

.incoming-fields[b-4241ntd9sg] {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.incoming-fields h3[b-4241ntd9sg] {
  margin: 0 0 12px;
}

.incoming-fields p[b-4241ntd9sg] {
  max-width: 72ch;
}

.incoming-origin p[b-4241ntd9sg] {
  margin: 0 0 6px;
  font-size: 0.9375rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.incoming-origin p.muted[b-4241ntd9sg] {
  font-size: 0.875rem;
}

.incoming-read[b-4241ntd9sg] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.incoming-read .field-hint[b-4241ntd9sg] {
  margin: 0;
}

.incoming-form[b-4241ntd9sg] {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: grid;
  gap: 12px;
}

.incoming-form .field[b-4241ntd9sg] {
  margin-bottom: 0;
}

.incoming-amounts[b-4241ntd9sg] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.incoming-form .field-hint[b-4241ntd9sg] {
  margin: 0;
}

/* What the check found: blocking findings in red, the changed bank account as loud as a blocking one, hints calm. */
.incoming-warnings[b-4241ntd9sg] {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.incoming-warnings li[b-4241ntd9sg] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  color: var(--fg-1);
  font-size: 0.875rem;
  line-height: 1.45;
}

.incoming-warnings li[b-4241ntd9sg]  svg {
  margin-top: 2px;
  color: var(--orange);
}

.incoming-warnings li.is-blocking[b-4241ntd9sg],
.incoming-warnings li.is-alert[b-4241ntd9sg] {
  background: color-mix(in srgb, var(--red) 12%, transparent);
}

.incoming-warnings li.is-blocking[b-4241ntd9sg]  svg,
.incoming-warnings li.is-alert[b-4241ntd9sg]  svg {
  color: var(--red);
}

.incoming-warnings li.is-alert[b-4241ntd9sg] {
  font-weight: 500;
}

.incoming-ok[b-4241ntd9sg] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  color: var(--green);
  font-size: 0.875rem;
}

.incoming-booking[b-4241ntd9sg],
.incoming-ack[b-4241ntd9sg] {
  margin-top: 16px;
}

.incoming-booking .field-hint[b-4241ntd9sg] {
  margin: 6px 0 0 28px;
  max-width: 70ch;
}

.incoming-booking > .field-hint:first-child[b-4241ntd9sg] {
  margin-left: 0;
}

.sales-actions[b-4241ntd9sg] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.sales-confirm[b-4241ntd9sg] {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.sales-inline-action[b-4241ntd9sg] {
  align-self: end;
  justify-self: start;
}

/* The transfer as the banking app asks for it, with the code to scan beside it. */
.incoming-pay-grid[b-4241ntd9sg] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
}

.incoming-transfer[b-4241ntd9sg] {
  margin: 0;
  display: grid;
  gap: 8px;
}

.incoming-transfer > div[b-4241ntd9sg] {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
}

.incoming-transfer dt[b-4241ntd9sg] {
  color: var(--fg-3);
  font-size: 0.875rem;
}

.incoming-transfer dd[b-4241ntd9sg] {
  margin: 0;
  overflow-wrap: anywhere;
}

.incoming-transfer dd.is-red[b-4241ntd9sg] {
  color: var(--red);
}

.incoming-qr[b-4241ntd9sg] {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
}

/* A code is scanned off the screen: it stands on white in every theme, with the quiet zone the format asks for. */
.incoming-qr img[b-4241ntd9sg] {
  display: block;
  padding: 8px;
  background: var(--paper);
  border-radius: var(--radius);
  image-rendering: pixelated;
}

.incoming-qr figcaption[b-4241ntd9sg] {
  font-size: 0.75rem;
  color: var(--fg-3);
}

.incoming-pay p[b-4241ntd9sg],
.incoming-iban-alert[b-4241ntd9sg] {
  margin-top: 14px;
}

.incoming-pay p.muted[b-4241ntd9sg] {
  font-size: 0.875rem;
  line-height: 1.5;
}

.incoming-paid-form[b-4241ntd9sg] {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

@media (max-width: 1100px) {
  .incoming-review[b-4241ntd9sg] {
    grid-template-columns: minmax(0, 1fr);
  }

  .incoming-file[b-4241ntd9sg] {
    position: static;
  }

  .incoming-file-frame[b-4241ntd9sg] {
    height: 62vh;
    min-height: 360px;
  }
}

@media (max-width: 720px) {
  .incoming-read[b-4241ntd9sg] {
    grid-template-columns: minmax(0, 1fr);
  }

  .incoming-amounts[b-4241ntd9sg] {
    grid-template-columns: minmax(0, 1fr);
  }

  .incoming-pay-grid[b-4241ntd9sg] {
    grid-template-columns: minmax(0, 1fr);
  }

  .incoming-qr[b-4241ntd9sg] {
    justify-items: start;
  }

  .incoming-transfer > div[b-4241ntd9sg] {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .sales-actions .btn[b-4241ntd9sg] {
    flex: 1 1 auto;
  }
}
/* /Components/Pages/Panel/SalesProfile.razor.rz.scp.css */
/* Two panes: the settings scroll, the sample document stays in view beside them. */
.tpl[b-svw99sc5j5] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 20px;
  align-items: start;
}

.tpl-settings[b-svw99sc5j5] {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.tpl-preview[b-svw99sc5j5] {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 10px;
  min-width: 0;
  /* A whole page is taller than most windows; the pane scrolls on its own instead of running out of sight. */
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 4px;
}

.tpl-preview-head[b-svw99sc5j5] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tpl-preview-note[b-svw99sc5j5] {
  margin: 0;
  font-size: 0.8125rem;
}

/* Where the other half of the template lives: one quiet line above everything else. */
.tpl-source[b-svw99sc5j5] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 4px;
  color: var(--fg-2);
  font-size: 0.875rem;
}

.tpl-source[b-svw99sc5j5]  .icon {
  flex: none;
  color: var(--fg-3);
}

.tpl-nav[b-svw99sc5j5] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* A jump lands below the edge of the window, not under it. */
.tpl-settings section[b-svw99sc5j5] {
  scroll-margin-top: 16px;
}

.tpl-fields[b-svw99sc5j5] {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: grid;
  gap: 16px;
}

/* Inside a group the rows follow each other without a gap, as everywhere in the settings. */
.settings-group > .tpl-fields[b-svw99sc5j5] {
  gap: 0;
}

.tpl-lead[b-svw99sc5j5] {
  margin: 4px 20px 12px;
  font-size: 0.8125rem;
  max-width: 78ch;
}

.tpl-req[b-svw99sc5j5] {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--pill);
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: 1px;
}

.tpl-lead .tpl-req[b-svw99sc5j5] {
  margin-left: 0;
  margin-right: 4px;
}

.setting-hint.is-warning[b-svw99sc5j5] {
  color: var(--orange);
}

.tpl-missing[b-svw99sc5j5] {
  display: block;
}

.tpl-missing ul[b-svw99sc5j5] {
  margin: 6px 0 0;
  padding-left: 18px;
}

.tpl-missing small[b-svw99sc5j5] {
  opacity: 0.75;
}

.tpl-missing .btn[b-svw99sc5j5] {
  margin-top: 10px;
}

.tpl-placeholders[b-svw99sc5j5] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.8125rem;
  color: var(--fg-2);
}

.tpl-placeholders li[b-svw99sc5j5] {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.tpl-placeholders code[b-svw99sc5j5] {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--fg);
  font-size: 0.8125rem;
}

.tpl-legal[b-svw99sc5j5] {
  margin: 12px 20px 16px;
}

.tpl-field[b-svw99sc5j5] {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto auto;
  gap: 8px;
  align-items: center;
}

.sales-number[b-svw99sc5j5] {
  display: flex;
  gap: 8px;
}

/* One step more specific than the settings' own width for text fields, which would make both fields equally wide. */
.sales-number .sales-number-pattern[b-svw99sc5j5] {
  width: 190px;
}

.sales-number .sales-number-start[b-svw99sc5j5] {
  width: 84px;
  flex: none;
}

.sales-number-help[b-svw99sc5j5] {
  margin: 12px 20px 16px;
}

@media (max-width: 1200px) {
  .tpl[b-svw99sc5j5] {
    grid-template-columns: 1fr;
  }

  /* On one column the sample comes first, at a height that leaves the settings in reach. */
  .tpl-preview[b-svw99sc5j5] {
    position: static;
    order: -1;
    max-height: 70vh;
  }
}

@media (max-width: 640px) {
  .tpl-field[b-svw99sc5j5] {
    grid-template-columns: 1fr;
  }
}

.tpl-mail-body[b-svw99sc5j5] {
  min-height: 220px;
  line-height: 1.5;
}
/* /Components/Pages/Panel/SalesTaxCalculator.razor.rz.scp.css */
.tax-compare[b-zwulv1qk4d] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.tax-note[b-zwulv1qk4d] {
  margin: 12px 20px 16px;
  font-size: 0.8125rem;
  max-width: 78ch;
}

.tax-verdict[b-zwulv1qk4d] {
  margin: 16px 0 0;
  font-size: 1rem;
}

@media (max-width: 900px) {
  .tax-compare[b-zwulv1qk4d] {
    grid-template-columns: 1fr;
  }
}
/* /Components/Pages/Panel/ServiceHistorySheet.razor.rz.scp.css */
/* Die Servicehistorie für den Käufer: ein Blatt A4, schwarz auf weiß, im Aufbau wie das Kalkulationsblatt. Auf dem
   Schirm liegt es auf grauem Grund; im Druck füllt es die Seite. */
.service-sheet-bar[b-koheiid6vl] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  max-width: 210mm;
  margin: 0 auto 12px;
}

.service-sheet-btn[b-koheiid6vl] {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid #b8b8be;
  border-radius: 980px;
  background: #fff;
  color: #000;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.service-sheet-btn.is-primary[b-koheiid6vl] {
  border-color: #000;
  background: #000;
  color: #fff;
}

.service-sheet-btn:focus-visible[b-koheiid6vl] {
  outline: 3px solid #0071e3;
  outline-offset: 2px;
}

.service-sheet[b-koheiid6vl] {
  box-sizing: border-box;
  max-width: 210mm;
  margin: 0 auto;
  padding: 16mm 15mm;
  background: #fff;
  color: #000;
  font-size: 10.5pt;
  line-height: 1.4;
  box-shadow: 0 10px 40px -20px rgba(0, 0, 0, 0.5);
}

.service-sheet h1[b-koheiid6vl] {
  margin: 0;
  color: #000;
  font-size: 17pt;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.service-sheet p[b-koheiid6vl] {
  margin: 0;
  max-width: none;
  color: #000;
}

/* Das Panel färbt Hervorhebungen hell; auf dem Blatt sind sie schwarz wie alles andere. */
.service-sheet strong[b-koheiid6vl],
.service-sheet li[b-koheiid6vl] {
  color: #000;
}

.service-sheet-kicker[b-koheiid6vl] {
  margin-bottom: 2pt;
  font-size: 8.5pt;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.service-sheet-head[b-koheiid6vl] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8pt 20pt;
  padding-bottom: 10pt;
  border-bottom: 1.5pt solid #000;
}

.service-sheet-meta[b-koheiid6vl],
.service-sheet-facts[b-koheiid6vl] {
  margin: 0;
}

.service-sheet-meta div[b-koheiid6vl] {
  display: flex;
  justify-content: flex-end;
  gap: 6pt;
  font-size: 9pt;
}

.service-sheet-meta dt[b-koheiid6vl]::after {
  content: ":";
}

.service-sheet dt[b-koheiid6vl] {
  color: #444;
}

.service-sheet dd[b-koheiid6vl] {
  margin: 0;
  color: #000;
}

.service-sheet-facts[b-koheiid6vl] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6pt 16pt;
  margin: 12pt 0;
}

.service-sheet-facts dt[b-koheiid6vl] {
  font-size: 8.5pt;
}

.service-sheet-facts dd[b-koheiid6vl] {
  font-weight: 600;
}

.service-sheet-table[b-koheiid6vl] {
  width: 100%;
  margin-top: 10pt;
  border-collapse: collapse;
}

.service-sheet-table th[b-koheiid6vl] {
  padding: 4pt 0;
  border-bottom: 0.75pt solid #000;
  color: #444;
  font-size: 8.5pt;
  font-weight: 600;
  text-align: left;
}

.service-sheet-table td[b-koheiid6vl] {
  padding: 4.5pt 8pt 4.5pt 0;
  border-bottom: 0.5pt solid #bbb;
  color: #000;
  vertical-align: top;
}

.service-sheet-table td:nth-child(2):not(.num)[b-koheiid6vl] {
  color: #444;
  font-size: 9pt;
}

.service-sheet-table .num[b-koheiid6vl] {
  padding-right: 0;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.service-sheet-table tfoot td[b-koheiid6vl] {
  border-top: 1pt solid #000;
  border-bottom: 0;
  font-size: 12pt;
  font-weight: 700;
}

.service-sheet .service-sheet-line[b-koheiid6vl] {
  margin-top: 8pt;
}

.service-sheet-notes[b-koheiid6vl] {
  margin: 12pt 0 0;
  padding-left: 14pt;
  color: #222;
  font-size: 8.5pt;
}

.service-sheet-foot[b-koheiid6vl] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4pt 16pt;
  margin-top: 14pt;
  padding-top: 6pt;
  border-top: 0.5pt solid #000;
  color: #222;
  font-size: 8pt;
}

@media (max-width: 640px) {
  .service-sheet[b-koheiid6vl] {
    padding: 20px 16px;
  }

  .service-sheet-meta div[b-koheiid6vl] {
    justify-content: flex-start;
  }
}

@media print {
  .service-sheet-bar[b-koheiid6vl] {
    display: none;
  }

  .service-sheet[b-koheiid6vl] {
    max-width: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }

  .service-sheet-table tr[b-koheiid6vl],
  .service-sheet-notes li[b-koheiid6vl] {
    break-inside: avoid;
  }
}
/* /Components/Pages/Panel/Settings.razor.rz.scp.css */
/* The way to "Firma & Logo" above the sections: one row, the whole of it a link. */
.settings-company[b-asuid3qfk1] {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-1);
  box-shadow: var(--elevation);
  color: var(--fg);
  text-decoration: none;
  transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

.settings-company:active[b-asuid3qfk1] {
  transform: scale(0.995);
}

.settings-company:focus-visible[b-asuid3qfk1] {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.settings-company[b-asuid3qfk1] >  .icon {
  flex: none;
  color: var(--blue);
}

.settings-company-text[b-asuid3qfk1] {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  color: var(--fg-2);
  font-size: 0.85rem;
}

.settings-company-text strong[b-asuid3qfk1] {
  color: var(--fg);
  font-size: 0.98rem;
  font-weight: 600;
}

.settings-company-go[b-asuid3qfk1] {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 500;
}

@media (hover: hover) and (pointer: fine) {
  .settings-company:hover[b-asuid3qfk1] {
    background: var(--bg-2);
    text-decoration: none;
  }
}

@media (max-width: 700px) {
  .settings-company-go[b-asuid3qfk1] {
    font-size: 0;
    gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .settings-company[b-asuid3qfk1] {
    transition: none;
  }
}
/* /Components/Pages/Panel/ShowroomSettings.razor.rz.scp.css */
/* The head says the three things at a glance: the state with its switch, the link with what to do with it, and what
   is still missing. Below it the tabs; "Aussehen" puts a sketch of the public page beside its options. */

/* ---- Head ---- */

.showroom-hero[b-ci5cf5yrnc] {
  display: grid;
  gap: 18px;
  padding: 22px 24px;
  margin-bottom: 16px;
}

.showroom-hero-main[b-ci5cf5yrnc] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}

.showroom-hero-state[b-ci5cf5yrnc] {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.showroom-hero-dot[b-ci5cf5yrnc] {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--tint-35);
  transition: background-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}

.showroom-hero.is-online .showroom-hero-dot[b-ci5cf5yrnc] {
  background: var(--green);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 20%, transparent);
}

.showroom-hero.is-blocked .showroom-hero-dot[b-ci5cf5yrnc] {
  background: var(--orange);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--orange) 20%, transparent);
}

.showroom-hero h2[b-ci5cf5yrnc] {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

.showroom-hero-state p[b-ci5cf5yrnc] {
  max-width: 72ch;
  margin: 4px 0 0;
  color: var(--fg-2);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* The one big switch of the page: the same control as every other switch, a size larger. */
.showroom-power[b-ci5cf5yrnc] {
  flex: none;
  gap: 12px;
  color: var(--fg);
  font-size: 1rem;
  font-weight: 600;
}

.showroom-power input[type="checkbox"][b-ci5cf5yrnc] {
  width: 64px;
  min-width: 64px;
  height: 36px;
  border-radius: 18px;
}

.showroom-power input[type="checkbox"][b-ci5cf5yrnc]::after {
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
}

.showroom-power input[type="checkbox"]:checked[b-ci5cf5yrnc]::after {
  transform: translateX(28px);
}

.showroom-power span[b-ci5cf5yrnc] {
  min-width: 2.2em;
}

.showroom-hero-link[b-ci5cf5yrnc] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.showroom-hero-link input[b-ci5cf5yrnc] {
  flex: 1 1 280px;
  min-width: 0;
}

.showroom-hero-actions[b-ci5cf5yrnc] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.showroom-hero-note[b-ci5cf5yrnc] {
  max-width: none;
  margin: -8px 0 0;
  font-size: 0.82rem;
}

/* What is missing, each line a way to where it is fixed. */
.showroom-todo[b-ci5cf5yrnc] {
  display: grid;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.showroom-todo h3[b-ci5cf5yrnc] {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.showroom-todo p[b-ci5cf5yrnc] {
  max-width: 84ch;
  margin: 0;
  font-size: 0.82rem;
}

.showroom-todo ul[b-ci5cf5yrnc] {
  display: grid;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.showroom-todo-item[b-ci5cf5yrnc] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--tint-04);
  color: var(--fg);
  text-decoration: none;
  transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

a.showroom-todo-item:active[b-ci5cf5yrnc] {
  transform: scale(0.99);
}

a.showroom-todo-item:focus-visible[b-ci5cf5yrnc] {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.showroom-todo-item[b-ci5cf5yrnc] >  .icon {
  flex: none;
  color: var(--orange);
}

.showroom-todo-text[b-ci5cf5yrnc] {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  color: var(--fg-2);
  font-size: 0.82rem;
}

.showroom-todo-text strong[b-ci5cf5yrnc] {
  color: var(--fg);
  font-size: 0.92rem;
  font-weight: 600;
}

.showroom-todo-go[b-ci5cf5yrnc] {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 500;
}

/* Options that were changed and not saved: the offer to save follows the dealer from tab to tab. */
.showroom-unsaved[b-ci5cf5yrnc] {
  position: sticky;
  top: 12px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px;
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--pop);
  box-shadow: var(--shadow-md);
  font-size: 0.88rem;
  animation: showroom-rise-b-ci5cf5yrnc var(--dur-base) var(--ease-spring);
}

.showroom-unsaved div[b-ci5cf5yrnc] {
  display: flex;
  gap: 8px;
}

@keyframes showroom-rise-b-ci5cf5yrnc {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.showroom-tab-count[b-ci5cf5yrnc] {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--pill);
  background: var(--tint-10);
  color: var(--fg-2);
  font-size: 0.72rem;
  font-weight: 600;
}

/* ---- Options ---- */

.showroom-look[b-ci5cf5yrnc] {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: start;
  gap: 20px;
}

.showroom-fields[b-ci5cf5yrnc] {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.showroom-narrow[b-ci5cf5yrnc] {
  max-width: 900px;
}

/* A text of several lines takes the whole row below its label. */
.setting-stack > :is(input, textarea)[b-ci5cf5yrnc] {
  width: 100%;
}

.showroom-colours[b-ci5cf5yrnc] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.showroom-swatch[b-ci5cf5yrnc] {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px var(--line-strong);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease;
}

.showroom-swatch:active[b-ci5cf5yrnc] {
  transform: scale(0.94);
}

.showroom-swatch.is-active[b-ci5cf5yrnc] {
  box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--blue);
}

.showroom-swatch:focus-visible[b-ci5cf5yrnc] {
  outline: 0;
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.showroom-custom[b-ci5cf5yrnc] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
  color: var(--fg-2);
  font-size: 0.85rem;
}

.showroom-custom input[type="color"][b-ci5cf5yrnc] {
  width: 40px;
  min-height: 34px;
  padding: 2px;
}

.showroom-custom input[type="text"][b-ci5cf5yrnc] {
  width: 104px;
}

.showroom-logo[b-ci5cf5yrnc] {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* A logo is shown as visitors see it: on paper. */
.showroom-logo img[b-ci5cf5yrnc],
.showroom-logo-pending img[b-ci5cf5yrnc] {
  max-width: 200px;
  max-height: 48px;
  padding: 6px;
  border-radius: 6px;
  background: var(--paper);
}

.showroom-logo input[type="file"][b-ci5cf5yrnc] {
  display: none;
}

.showroom-logo-pending[b-ci5cf5yrnc] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 20px 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--tint-05);
  font-size: 0.85rem;
}

.showroom-logo-pending div[b-ci5cf5yrnc] {
  display: flex;
  flex: 1 1 160px;
  flex-direction: column;
}

.showroom-never[b-ci5cf5yrnc] {
  max-width: none;
  margin: 0;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
}

/* ---- The sketch of the public page ---- */

.showroom-preview[b-ci5cf5yrnc] {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 10px;
  min-width: 0;
  /* Taller than a low window: the pane scrolls on its own instead of running out of sight. */
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 4px;
}

.showroom-preview-head[b-ci5cf5yrnc] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  font-size: 0.9rem;
}

.showroom-preview-note[b-ci5cf5yrnc] {
  max-width: none;
  margin: 0;
  font-size: 0.8125rem;
}

.srp[b-ci5cf5yrnc] {
  /* theme-fixed: the public page is light in both themes */
  --sr-page: #ffffff;
  --sr-ink: #111318;
  --sr-ink-2: #4a505c;
  --sr-ink-3: #6b7280;
  --sr-line: #e6e8ec;
  --sr-stage: #f3f4f6;
  --sr-surface: #f7f8fa;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--sr-page);
  box-shadow: var(--shadow-sm);
  color: var(--sr-ink);
  font-size: 11px;
  line-height: 1.45;
  container-type: inline-size;
}

.srp-top[b-ci5cf5yrnc] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--sr-line);
}

.srp-brand[b-ci5cf5yrnc] {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.srp-brand img[b-ci5cf5yrnc] {
  display: block;
  max-width: 120px;
  max-height: 26px;
}

.srp-brand-name[b-ci5cf5yrnc] {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.srp-actions[b-ci5cf5yrnc] {
  display: inline-flex;
  flex: none;
  gap: 6px;
}

.srp-btn[b-ci5cf5yrnc] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: var(--pill);
  background: var(--sr-stage);
  color: var(--sr-ink);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--dur-base) ease, color var(--dur-base) ease;
}

.srp-btn-primary[b-ci5cf5yrnc] {
  background: var(--sr-accent);
  color: var(--sr-accent-ink);
}

.srp-btn-outline[b-ci5cf5yrnc] {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--sr-accent-text);
  color: var(--sr-accent-text);
}

.srp-intro[b-ci5cf5yrnc] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px 12px;
}

.srp-headline[b-ci5cf5yrnc] {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.srp-lead[b-ci5cf5yrnc] {
  display: -webkit-box;
  overflow: hidden;
  color: var(--sr-ink-2);
  white-space: pre-line;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.srp-about[b-ci5cf5yrnc] {
  display: flex;
  flex-direction: column;
  color: var(--sr-ink-2);
}

.srp-about-title[b-ci5cf5yrnc] {
  color: var(--sr-ink-3);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.srp-stock[b-ci5cf5yrnc] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 14px 14px;
}

.srp-count[b-ci5cf5yrnc] {
  font-size: 12px;
  font-weight: 700;
}

.srp-grid[b-ci5cf5yrnc] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.srp-card[b-ci5cf5yrnc] {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.srp-card img[b-ci5cf5yrnc],
.srp-card-empty[b-ci5cf5yrnc] {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 3px;
  border-radius: 8px;
  background: var(--sr-stage);
  object-fit: cover;
}

.srp-card-empty[b-ci5cf5yrnc] {
  display: grid;
  place-items: center;
  color: var(--sr-ink-3);
}

.srp-card-title[b-ci5cf5yrnc] {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.srp-card-price[b-ci5cf5yrnc] {
  color: var(--sr-accent-text);
  font-weight: 700;
  transition: color var(--dur-base) ease;
}

.srp-enquiry[b-ci5cf5yrnc] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--sr-ink-3);
  font-size: 10px;
}

.srp-foot[b-ci5cf5yrnc] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--sr-line);
  background: var(--sr-surface);
  color: var(--sr-ink-3);
  font-size: 10px;
}

.srp-foot-links[b-ci5cf5yrnc] {
  display: inline-flex;
  gap: 10px;
}

.srp-credit[b-ci5cf5yrnc] {
  margin-left: auto;
}

@container (max-width: 340px) {
  .srp-grid[b-ci5cf5yrnc] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Fahrzeuge ---- */

.showroom-counters[b-ci5cf5yrnc] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.showroom-counters div[b-ci5cf5yrnc] {
  padding: 12px 16px;
}

.showroom-counters dt[b-ci5cf5yrnc] {
  color: var(--fg-3);
  font-size: 0.75rem;
  font-weight: 500;
}

.showroom-counters dd[b-ci5cf5yrnc] {
  margin: 2px 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.showroom-cars-all[b-ci5cf5yrnc] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 20px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}

.showroom-car-list[b-ci5cf5yrnc] {
  margin: 0;
  padding: 0;
  list-style: none;
}

.showroom-car[b-ci5cf5yrnc] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
}

.showroom-car-text[b-ci5cf5yrnc] {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  font-size: 0.82rem;
}

.showroom-car-text strong[b-ci5cf5yrnc] {
  font-size: 0.92rem;
}

.showroom-car-stats[b-ci5cf5yrnc] {
  font-variant-numeric: tabular-nums;
}

.showroom-car-actions[b-ci5cf5yrnc] {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
}

.showroom-car-actions .switch[b-ci5cf5yrnc] {
  margin: 0 0 0 6px;
}

.showroom-cars-empty[b-ci5cf5yrnc],
.showroom-cars-note[b-ci5cf5yrnc] {
  max-width: none;
  margin: 0;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
}

/* ---- Anfragen ---- */

.showroom-enquiry-list[b-ci5cf5yrnc] {
  margin: 0;
  padding: 0;
  list-style: none;
}

.showroom-enquiry[b-ci5cf5yrnc] {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 16px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  color: var(--fg);
  font-size: 0.86rem;
  text-decoration: none;
  transition: background-color var(--dur-fast) ease;
}

a.showroom-enquiry:focus-visible[b-ci5cf5yrnc] {
  outline: 0;
  box-shadow: inset 0 0 0 3px var(--focus-ring);
}

.showroom-enquiry-who[b-ci5cf5yrnc] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.showroom-enquiry-who strong[b-ci5cf5yrnc] {
  font-size: 0.92rem;
}

.showroom-enquiry-who > *[b-ci5cf5yrnc],
.showroom-enquiry-text[b-ci5cf5yrnc] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.showroom-enquiry-text[b-ci5cf5yrnc] {
  color: var(--fg-2);
}

.showroom-enquiry-meta[b-ci5cf5yrnc] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-3);
  font-size: 0.8rem;
  white-space: nowrap;
}

/* ---- The QR dialog ---- */

/* A code is scanned from a plate of paper, whatever the theme. */
.showroom-qr[b-ci5cf5yrnc] {
  display: grid;
  place-items: center;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--paper);
}

.showroom-qr img[b-ci5cf5yrnc] {
  display: block;
  width: min(232px, 100%);
  height: auto;
}

.showroom-qr-link[b-ci5cf5yrnc] {
  margin-top: 12px;
  font-size: 0.82rem;
  text-align: center;
  overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
  a.showroom-todo-item:hover[b-ci5cf5yrnc] {
    background: var(--tint-08);
    text-decoration: none;
  }

  a.showroom-enquiry:hover[b-ci5cf5yrnc] {
    background: var(--tint-04);
    text-decoration: none;
  }
}

@media (max-width: 1100px) {
  .showroom-look[b-ci5cf5yrnc] {
    grid-template-columns: 1fr;
  }

  /* On one column the sketch comes first, so a change is seen without scrolling past every option. */
  .showroom-preview[b-ci5cf5yrnc] {
    position: static;
    order: -1;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 700px) {
  .showroom-hero[b-ci5cf5yrnc] {
    padding: 18px 16px;
  }

  .showroom-hero h2[b-ci5cf5yrnc] {
    font-size: 1.25rem;
  }

  .showroom-hero-dot[b-ci5cf5yrnc] {
    margin-top: 7px;
  }

  .showroom-hero-actions[b-ci5cf5yrnc] {
    flex: 1 1 100%;
  }

  .showroom-hero-actions > *[b-ci5cf5yrnc] {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }

  .showroom-todo-go[b-ci5cf5yrnc] {
    display: none;
  }

  .showroom-counters[b-ci5cf5yrnc] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .showroom-car[b-ci5cf5yrnc] {
    flex-wrap: wrap;
  }

  .showroom-car-actions[b-ci5cf5yrnc] {
    flex-basis: 100%;
    justify-content: flex-end;
  }

  .showroom-enquiry[b-ci5cf5yrnc] {
    grid-template-columns: minmax(0, 1fr);
  }

  .showroom-enquiry-meta[b-ci5cf5yrnc] {
    justify-content: space-between;
  }

  .showroom-colours[b-ci5cf5yrnc] {
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .showroom-unsaved[b-ci5cf5yrnc] {
    animation: none;
  }

  .showroom-todo-item[b-ci5cf5yrnc],
  .showroom-swatch[b-ci5cf5yrnc] {
    transition: none;
  }
}
/* /Components/Pages/Panel/Team.razor.rz.scp.css */
/* Die Rechte eines Mitglieds klappen unter seiner Zeile auf: das Raster je Bereich, darunter Speichern. */
.team-row-rights[b-fujv8enbjo] {
  display: grid;
  gap: 14px;
  align-items: start;
  padding-top: 4px;
  border-top: 0;
}
/* /Components/Shared/AccessEditor.razor.rz.scp.css */
.access-editor[b-giugehpfb4] {
  display: grid;
  gap: 14px;
}

.access-presets[b-giugehpfb4] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.access-grid[b-giugehpfb4] {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.access-row[b-giugehpfb4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}

.access-area[b-giugehpfb4] {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--fg-2);
}

/* The icon keeps its size when the hint beside it wraps, so the names stand in one line. */
.access-area[b-giugehpfb4]  svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.access-row .segmented[b-giugehpfb4] {
  flex: none;
}

.access-area-text[b-giugehpfb4] {
  display: grid;
  min-width: 0;
}

.access-area-name[b-giugehpfb4] {
  color: var(--fg);
  font-weight: 500;
}

.access-area-hint[b-giugehpfb4] {
  color: var(--fg-3);
  font-size: 0.8rem;
  line-height: 1.35;
}

.access-note[b-giugehpfb4] {
  margin: 0;
  color: var(--fg-3);
  font-size: 0.82rem;
}

@media (max-width: 560px) {
  .access-row[b-giugehpfb4] {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* /Components/Shared/AccountStage.razor.rz.scp.css */
/* Sign-in stage: car on a mirrored floor, one overlay per proof, the proof list with a running bar.
   Everything moves on transform and opacity; entries use @starting-style so a swap never restarts from zero. */
.astage[b-vo68yodii1] {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 36px);
}

.astage-shots[b-vo68yodii1] {
  position: relative;
  aspect-ratio: 1400 / 760;
  width: 100%;
  margin-bottom: 10%;
}

.astage-shot[b-vo68yodii1] {
  position: absolute;
  inset: 0;
  opacity: 1;
  transform: none;
  transition:
    opacity 620ms var(--ease-out),
    transform 620ms var(--ease-out);
}

@starting-style {
  .astage-shot[b-vo68yodii1] {
    opacity: 0;
    transform: translateX(28px) scale(0.985);
  }
}

.astage-shot.is-out[b-vo68yodii1] {
  opacity: 0;
  transform: translateX(-28px) scale(0.985);
  transition-duration: 420ms;
}

.astage-photo[b-vo68yodii1] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

.astage-mirror[b-vo68yodii1] {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 34%;
  overflow: hidden;
  pointer-events: none;
}

.astage-mirror img[b-vo68yodii1] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% / 0.34);
  object-fit: contain;
  object-position: center bottom;
  transform: scaleY(-1);
  transform-origin: 50% 0;
  opacity: 0.4;
  filter: blur(2px);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 100%);
}

.astage-floor[b-vo68yodii1] {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 100%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--tint-16) 30%, var(--tint-16) 70%, transparent);
}

.astage-floor[b-vo68yodii1]::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: -40px;
  height: 120px;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--blue) 28%, transparent), transparent 70%);
  filter: blur(22px);
}

/* Overlays: one pill per proof, anchored to the car's upper right. */
.astage-overlay[b-vo68yodii1] {
  position: absolute;
  right: 0;
  top: 4%;
  z-index: 2;
  pointer-events: none;
}

.astage-pill[b-vo68yodii1] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-1) 82%, transparent);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 24px 50px -24px var(--shadow-deep), inset 0 0 0 1px var(--tint-09);
  opacity: 1;
  transform: none;
  transition:
    opacity 380ms var(--ease-out),
    transform 380ms var(--ease-out);
}

@starting-style {
  .astage-pill[b-vo68yodii1] {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
}

.astage-pill-text[b-vo68yodii1] {
  color: var(--fg-2);
  font-size: 0.84rem;
  white-space: nowrap;
}

.astage-pill-margin[b-vo68yodii1] {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  padding: 12px 18px 12px 16px;
  background: color-mix(in srgb, var(--green) 14%, transparent);
  box-shadow: 0 24px 50px -24px var(--shadow-deep), inset 0 0 0 1px color-mix(in srgb, var(--green) 25%, transparent);
}

.astage-pill-label[b-vo68yodii1] {
  grid-column: 1;
  color: var(--fg-3);
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  align-self: end;
}

.astage-pill-margin .astage-pill-label[b-vo68yodii1] {
  color: color-mix(in srgb, var(--green) 90%, transparent);
}

.astage-pill-value[b-vo68yodii1] {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--green);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}

.astage-pill-sub[b-vo68yodii1] {
  grid-column: 1;
  color: var(--fg-2);
  font-size: 0.8rem;
  white-space: nowrap;
}

.astage-pill-places[b-vo68yodii1] {
  gap: 8px;
  padding: 8px 10px 8px 14px;
}

.astage-pill-places .chip[b-vo68yodii1] {
  opacity: 1;
  transform: none;
  transition:
    opacity 320ms var(--ease-out),
    transform 320ms var(--ease-out);
}

@starting-style {
  .astage-pill-places .chip[b-vo68yodii1] {
    opacity: 0;
    transform: translateX(-6px);
  }
}

.astage-pill-places .astage-chip-2[b-vo68yodii1] {
  transition-delay: 240ms;
}

.astage-pill-places .astage-chip-3[b-vo68yodii1] {
  transition-delay: 480ms;
}

/* The proofs: a list where the active row is lit and its bar runs for one turn. */
.astage-steps[b-vo68yodii1] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.astage-step[b-vo68yodii1] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  border-radius: 16px;
  overflow: hidden;
  color: var(--fg-2);
  background: transparent;
  transition:
    background-color 300ms var(--ease-out),
    color 300ms var(--ease-out),
    transform 300ms var(--ease-out);
}

.astage-step.is-active[b-vo68yodii1] {
  background: var(--tint-06);
  color: var(--fg);
  transform: translateX(6px);
}

.astage-step-icon[b-vo68yodii1] {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--tint-06);
  color: var(--fg-3);
  transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out);
}

.astage-step.is-active .astage-step-icon[b-vo68yodii1] {
  background: var(--blue-soft);
  color: var(--blue);
}

.astage-step.is-done .astage-step-icon[b-vo68yodii1] {
  color: var(--green);
}

.astage-step-text[b-vo68yodii1] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.astage-step-title[b-vo68yodii1] {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.astage-step-line[b-vo68yodii1] {
  font-size: 0.82rem;
  color: var(--fg-3);
  opacity: 0.55;
  transition: opacity 300ms var(--ease-out), color 300ms var(--ease-out);
}

.astage-step.is-active .astage-step-line[b-vo68yodii1] {
  opacity: 1;
  color: var(--fg-2);
}

.astage-step-bar[b-vo68yodii1] {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
}

.astage-step.is-active .astage-step-bar[b-vo68yodii1] {
  opacity: 1;
  animation: astage-run-b-vo68yodii1 3600ms linear both;
}

@keyframes astage-run-b-vo68yodii1 {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.astage-preload[b-vo68yodii1] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.astage-preload img[b-vo68yodii1] {
  width: 1px;
  height: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .astage-shot[b-vo68yodii1],
  .astage-pill[b-vo68yodii1],
  .astage-pill-places .chip[b-vo68yodii1],
  .astage-step[b-vo68yodii1],
  .astage-step-line[b-vo68yodii1] {
    transition-duration: 200ms;
    transition-delay: 0ms;
    transition-property: opacity, background-color, color;
    transform: none;
  }

  @starting-style {
    .astage-shot[b-vo68yodii1],
    .astage-pill[b-vo68yodii1],
    .astage-pill-places .chip[b-vo68yodii1] {
      transform: none;
    }
  }

  .astage-step.is-active[b-vo68yodii1] {
    transform: none;
  }

  .astage-step.is-active .astage-step-bar[b-vo68yodii1] {
    animation: none;
    transform: scaleX(1);
  }
}
/* /Components/Shared/AssistantAnswer.razor.rz.scp.css */
/* An answer of the assistant: plain prose and short lists, with the sources as small chips in the line. */
.asst-answer[b-icwv5goep1] {
  max-width: 70ch;
  color: var(--fg);
  font-size: 0.95rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* Paragraphs and lists share the one measure of the answer. */
.asst-answer p[b-icwv5goep1] {
  max-width: none;
  margin: 0 0 10px;
  white-space: pre-line;
}

.asst-answer ul[b-icwv5goep1],
.asst-answer ol[b-icwv5goep1] {
  display: grid;
  gap: 7px;
  margin: 0 0 10px;
  padding-left: 20px;
}

.asst-answer > :last-child[b-icwv5goep1] {
  margin-bottom: 0;
}

.asst-answer li[b-icwv5goep1]::marker {
  color: var(--fg-3);
}

.asst-answer strong[b-icwv5goep1] {
  font-weight: 600;
  color: var(--fg);
}

.asst-source[b-icwv5goep1] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 28ch;
  margin: 0 1px;
  padding: 1px 8px 1px 6px;
  border-radius: var(--pill);
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.55;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: 1px;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}

.asst-source span[b-icwv5goep1] {
  overflow: hidden;
  text-overflow: ellipsis;
}

.asst-source[b-icwv5goep1]  .icon {
  flex: none;
}

.asst-source:active[b-icwv5goep1] {
  transform: scale(0.97);
}

.asst-source:focus-visible[b-icwv5goep1] {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

@media (hover: hover) and (pointer: fine) {
  .asst-source:hover[b-icwv5goep1] {
    background: color-mix(in srgb, var(--blue) 24%, transparent);
    text-decoration: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .asst-source[b-icwv5goep1] {
    transition-duration: 1ms;
  }

  .asst-source:active[b-icwv5goep1] {
    transform: none;
  }
}
/* /Components/Shared/AssistantAsk.razor.rz.scp.css */
/* The field on the dashboard that leads to the assistant: one line, as quiet as a search field. */
.asst-ask[b-pymi955059] {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 7px 7px 7px 16px;
  border-radius: var(--pill);
  background: var(--bg-1);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 160ms ease;
}

.asst-ask:focus-within[b-pymi955059] {
  box-shadow: inset 0 0 0 1px var(--blue), 0 0 0 3px var(--focus-ring);
}

.asst-ask-icon[b-pymi955059] {
  flex: none;
  display: grid;
  color: var(--blue);
}

.asst-ask input[b-pymi955059] {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--fg);
  font-size: 0.95rem;
}

.asst-ask input:focus-visible[b-pymi955059] {
  outline: 0;
  box-shadow: none;
}

.asst-ask .btn[b-pymi955059] {
  flex: none;
}

@media (max-width: 700px) {
  .asst-ask[b-pymi955059] {
    margin-bottom: 14px;
  }

  /* 16 px keeps iOS from zooming into the field. */
  .asst-ask input[b-pymi955059] {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .asst-ask[b-pymi955059] {
    transition-duration: 1ms;
  }
}
/* /Components/Shared/AssistantThread.razor.rz.scp.css */
/* The thread: questions as bubbles on the right, like the messages the dealer writes; answers as open text on the left. */
.asst-thread[b-336cxh1izj] {
  gap: 16px;
  padding: 20px 22px;
}

.asst-welcome[b-336cxh1izj] {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 56ch;
  margin: auto;
  padding: 16px 4px;
  text-align: center;
}

.asst-welcome-icon[b-336cxh1izj] {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
}

.asst-welcome h2[b-336cxh1izj] {
  margin: 4px 0 0;
  color: var(--fg);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.asst-welcome-text[b-336cxh1izj] {
  margin: 0;
  color: var(--fg-2);
  font-size: 0.93rem;
  line-height: 1.5;
}

.asst-privacy[b-336cxh1izj] {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 8px 0 0;
  padding: 11px 14px;
  border-radius: var(--radius);
  background: var(--tint-05);
  color: var(--fg-2);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: left;
}

.asst-privacy[b-336cxh1izj]  .icon {
  flex: none;
  margin-top: 2px;
  color: var(--fg-3);
}

.asst-turn[b-336cxh1izj] {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: min(100%, 720px);
  animation: asst-in-b-336cxh1izj var(--dur-base) var(--ease-out);
}

/* Questions and answers arrive with a few pixels of travel; a redraw of the thread does not replay it. */
.asst-thread[b-336cxh1izj] >  .chat-line {
  animation: asst-in-b-336cxh1izj var(--dur-fast) var(--ease-out);
}

@keyframes asst-in-b-336cxh1izj {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.asst-turn.is-failed[b-336cxh1izj]  .asst-answer {
  padding: 10px 14px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--orange) 10%, transparent);
  color: var(--fg-1);
  font-size: 0.9rem;
}

.asst-demo[b-336cxh1izj] {
  align-self: flex-start;
}

.asst-actions[b-336cxh1izj] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.asst-done[b-336cxh1izj] {
  color: var(--green);
}

.asst-confirm[b-336cxh1izj] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  width: 100%;
  padding: 11px 12px 11px 14px;
  border-radius: var(--radius);
  background: var(--bg-2);
}

.asst-confirm-text[b-336cxh1izj] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  font-size: 0.86rem;
  line-height: 1.4;
}

.asst-confirm-text strong[b-336cxh1izj] {
  color: var(--fg);
  font-weight: 600;
}

.asst-confirm-text .muted[b-336cxh1izj] {
  font-size: 0.76rem;
}

.asst-steps[b-336cxh1izj] {
  color: var(--fg-3);
  font-size: 0.76rem;
}

.asst-steps summary[b-336cxh1izj] {
  display: inline-block;
  padding: 2px 0;
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--fg) 18%, transparent);
  text-underline-offset: 3px;
}

.asst-steps summary[b-336cxh1izj]::-webkit-details-marker {
  display: none;
}

.asst-steps summary:focus-visible[b-336cxh1izj] {
  outline: 0;
  border-radius: 6px;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.asst-steps ul[b-336cxh1izj] {
  display: grid;
  gap: 3px;
  margin: 6px 0 0;
  padding-left: 18px;
}

.asst-steps li.is-failed[b-336cxh1izj] {
  color: var(--orange);
}

.asst-live[b-336cxh1izj] {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--fg-2);
  font-size: 0.86rem;
}

/* While the assistant looks something up the line shimmers softly; the dot beside it is the one looping motion. */
.asst-live-text[b-336cxh1izj] {
  animation: asst-breathe-b-336cxh1izj 1.4s var(--ease-in-out) infinite alternate;
}

@keyframes asst-breathe-b-336cxh1izj {
  from {
    opacity: 0.6;
  }

  to {
    opacity: 1;
  }
}

.asst-live-dot[b-336cxh1izj] {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  animation: asst-pulse-b-336cxh1izj 1.1s var(--ease-in-out) infinite alternate;
}

@keyframes asst-pulse-b-336cxh1izj {
  from {
    opacity: 0.35;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* While an answer is written, each new paragraph or list fades in as it starts. */
.asst-turn.is-live[b-336cxh1izj]  .asst-answer > * {
  animation: asst-in-b-336cxh1izj var(--dur-fast) var(--ease-out);
}

.asst-error[b-336cxh1izj] {
  flex: none;
  padding: 0 16px 8px;
}

.asst-context[b-336cxh1izj]  .icon {
  margin-right: 5px;
  vertical-align: -1px;
}

.asst-context[b-336cxh1izj] {
  background: var(--blue-soft);
  color: var(--blue);
}

/* The floating panel is narrow: tighter thread, smaller greeting, the answers use the whole width. */
.asst-thread.is-compact[b-336cxh1izj] {
  gap: 14px;
  padding: 16px 14px;
}

.asst-thread.is-compact .asst-turn[b-336cxh1izj] {
  width: 100%;
}

.asst-thread.is-compact .asst-welcome[b-336cxh1izj] {
  gap: 8px;
  padding: 4px 0;
}

.asst-thread.is-compact .asst-welcome-icon[b-336cxh1izj] {
  width: 40px;
  height: 40px;
}

.asst-thread.is-compact .asst-welcome h2[b-336cxh1izj] {
  margin-top: 0;
  font-size: 1.1rem;
}

.asst-thread.is-compact .asst-welcome-text[b-336cxh1izj] {
  font-size: 0.85rem;
  line-height: 1.45;
}

.asst-thread.is-compact .asst-privacy[b-336cxh1izj] {
  margin-top: 2px;
  padding: 9px 12px;
  font-size: 0.73rem;
  line-height: 1.45;
}

@media (max-width: 1000px) {
  .asst-thread[b-336cxh1izj] {
    padding: 16px 14px;
  }
}

@media (max-width: 700px) {
  .asst-turn[b-336cxh1izj] {
    width: 100%;
  }

  /* The thread is short here: the greeting is set tighter so that the note about the provider stands in view. */
  .asst-welcome[b-336cxh1izj] {
    gap: 8px;
    padding: 4px 0;
  }

  .asst-welcome-icon[b-336cxh1izj] {
    width: 40px;
    height: 40px;
  }

  .asst-welcome h2[b-336cxh1izj] {
    margin-top: 0;
    font-size: 1.15rem;
  }

  .asst-welcome-text[b-336cxh1izj] {
    font-size: 0.86rem;
    line-height: 1.45;
  }

  .asst-privacy[b-336cxh1izj] {
    margin-top: 2px;
    padding: 9px 12px;
    font-size: 0.74rem;
    line-height: 1.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .asst-turn[b-336cxh1izj],
  .asst-thread[b-336cxh1izj] >  .chat-line,
  .asst-live-dot[b-336cxh1izj],
  .asst-live-text[b-336cxh1izj],
  .asst-turn.is-live[b-336cxh1izj]  .asst-answer > * {
    animation: none;
  }
}
/* /Components/Shared/ContactSection.razor.rz.scp.css */
/* Kontakt: links das Formular auf einer Kachel, rechts die Ansprechpartner. Unter 900 px untereinander. */
.contact-grid[b-grviiz8dtp] {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.contact-card[b-grviiz8dtp],
.contact-aside[b-grviiz8dtp] {
  min-width: 0;
  background: var(--bg-1);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-tile);
}

.contact-card[b-grviiz8dtp] {
  padding: 32px 30px 30px;
}

.contact-aside[b-grviiz8dtp] {
  padding: 28px 28px 26px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(41, 151, 255, 0.16), transparent 60%),
    var(--bg-1);
}

.contact-group[b-grviiz8dtp] {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  min-width: 0;
}

.contact-group legend[b-grviiz8dtp] {
  padding: 0;
  margin-bottom: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* Lange Bezeichnungen brechen im Chip um, statt die Kachel zu sprengen. */
.contact-group .chip-check[b-grviiz8dtp] {
  max-width: 100%;
  height: auto;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.25;
}

.contact-optional[b-grviiz8dtp] {
  font-weight: 400;
  color: var(--fg-3);
}

.contact-check[b-grviiz8dtp] {
  align-items: flex-start;
  margin-top: 10px;
  line-height: 1.4;
}

.contact-check[b-grviiz8dtp]  input {
  flex: none;
  margin-top: 3px;
}

.contact-check a[b-grviiz8dtp] {
  color: var(--blue);
}

/* Die Falle für Skripte: im Dokument, aber außerhalb des Bildes. */
.contact-trap[b-grviiz8dtp] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-notice[b-grviiz8dtp] {
  margin-top: 16px;
}

.contact-actions[b-grviiz8dtp] {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.contact-promise[b-grviiz8dtp] {
  font-size: 0.86rem;
}

.contact-done h3[b-grviiz8dtp] {
  margin: 14px 0 8px;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.contact-done p[b-grviiz8dtp] {
  margin: 0 0 10px;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}

.contact-done-icon[b-grviiz8dtp] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(48, 209, 88, 0.16);
  color: var(--green);
}

.contact-done .contact-done-label[b-grviiz8dtp] {
  margin-top: 18px;
  font-size: 0.86rem;
  color: var(--fg-3);
}

.contact-done-chips[b-grviiz8dtp] {
  margin-bottom: 16px;
}

.contact-done-chips .chip[b-grviiz8dtp] {
  height: auto;
  min-height: 26px;
  padding-top: 4px;
  padding-bottom: 4px;
  white-space: normal;
}

.contact-done .contact-done-fact strong[b-grviiz8dtp] {
  color: var(--fg);
  font-weight: 600;
}

.contact-aside h3[b-grviiz8dtp] {
  margin: 0 0 6px;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

.contact-aside-lead[b-grviiz8dtp] {
  margin: 0 0 18px;
  color: var(--fg-2);
  font-size: 0.95rem;
}

.contact-people[b-grviiz8dtp] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-people li[b-grviiz8dtp] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.contact-person[b-grviiz8dtp] {
  font-size: 0.8rem;
  color: var(--fg-3);
}

.contact-people a[b-grviiz8dtp] {
  color: var(--fg);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
  .contact-people a:hover[b-grviiz8dtp] {
    color: var(--blue);
  }
}

@media (max-width: 900px) {
  .contact-grid[b-grviiz8dtp] {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .contact-card[b-grviiz8dtp] {
    padding: 24px 18px 22px;
  }

  .contact-aside[b-grviiz8dtp] {
    padding: 22px 18px 20px;
  }

  .contact-actions .btn[b-grviiz8dtp] {
    width: 100%;
  }
}

/* The choices as cards: what each area does stands right under its name. */
.contact-choices[b-grviiz8dtp] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}

.contact-choice[b-grviiz8dtp] {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}

.contact-choice:hover[b-grviiz8dtp] {
  background: rgba(255, 255, 255, 0.07);
}

.contact-choice input[b-grviiz8dtp] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.contact-choice-mark[b-grviiz8dtp] {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  color: transparent;
}

.contact-choice-text[b-grviiz8dtp] {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.contact-choice-text strong[b-grviiz8dtp] {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg);
}

.contact-choice-text span[b-grviiz8dtp] {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--fg-2);
}

.contact-choice:has(input:checked)[b-grviiz8dtp] {
  border-color: rgba(41, 151, 255, 0.7);
  background: rgba(0, 113, 227, 0.16);
}

.contact-choice:has(input:checked) .contact-choice-mark[b-grviiz8dtp] {
  border-color: var(--blue-fill, #0071e3);
  background: var(--blue-fill, #0071e3);
  color: #fff;
}

.contact-choice:has(input:focus-visible)[b-grviiz8dtp] {
  outline: 2px solid var(--blue, #2997ff);
  outline-offset: 2px;
}
/* /Components/Shared/DashboardView.razor.rz.scp.css */
.bento[b-lwnqjwtogo] {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.tile[b-lwnqjwtogo] {
  background: var(--bg-1);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  --glow: var(--tint-07);
  background:
    radial-gradient(120% 90% at 0% 0%, var(--glow), transparent 60%),
    var(--bg-1);
  box-shadow: inset 0 0 0 1px var(--hairline), inset 0 1px 0 var(--hairline);
  animation: tile-in-b-lwnqjwtogo 300ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

.tile-hero[b-lwnqjwtogo] {
  grid-column: span 2;
  --glow: color-mix(in srgb, var(--blue) 26%, transparent);
}

.tile-margin[b-lwnqjwtogo] {
  --glow: color-mix(in srgb, var(--green) 16%, transparent);
}

.tile-price[b-lwnqjwtogo] {
  --glow: var(--tint-09);
}

.tile-runs[b-lwnqjwtogo] {
  --glow: color-mix(in srgb, var(--blue) 16%, transparent);
}

.tile-garage[b-lwnqjwtogo] {
  --glow: color-mix(in srgb, var(--orange) 16%, transparent);
}

.tile-stat .tile-top[b-lwnqjwtogo] {
  margin-bottom: 0;
  align-items: center;
}

.tile-icon[b-lwnqjwtogo] {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--tint-07);
  color: var(--fg-2);
}

.tile-margin .tile-icon[b-lwnqjwtogo] {
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
}

.tile-runs .tile-icon[b-lwnqjwtogo] {
  background: var(--blue-soft);
  color: var(--blue);
}

.tile-garage .tile-icon[b-lwnqjwtogo] {
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  color: var(--orange);
}

.tile-stat[b-lwnqjwtogo] {
  grid-column: span 1;
  min-height: 150px;
}

.tile-half[b-lwnqjwtogo] {
  grid-column: span 3;
}

.tile-third[b-lwnqjwtogo] {
  grid-column: span 2;
}

.tile-map[b-lwnqjwtogo] {
  grid-column: span 4;
  padding-bottom: 0;
  overflow: hidden;
}

.tile-full[b-lwnqjwtogo] {
  grid-column: span 6;
}

.tile-third-wide[b-lwnqjwtogo] {
  grid-column: span 4;
}

.tile-top-right[b-lwnqjwtogo] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tile-hero .tile-icon[b-lwnqjwtogo] {
  background: var(--blue-soft);
  color: var(--blue);
}

/* Section headings carry a small tinted icon in front of the title, the same for every tile. */
.tile-top h3[b-lwnqjwtogo]  .tile-h-icon {
  color: var(--blue);
  vertical-align: -2px;
  margin-right: 2px;
}

.tile-top h3[b-lwnqjwtogo]  .tile-h-icon.is-orange {
  color: var(--orange);
}

.list-link-compact[b-lwnqjwtogo] {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  padding: 9px 20px;
}

.list-link-compact .list-thumb[b-lwnqjwtogo] {
  width: 48px;
  height: 36px;
}

.tile-empty[b-lwnqjwtogo] {
  padding: 56px 32px;
  text-align: center;
  align-items: center;
  animation: none;
}

.tile-empty h2[b-lwnqjwtogo] {
  font-size: 1.8rem;
}

.tile-empty p[b-lwnqjwtogo] {
  color: var(--fg-2);
  margin: 0 auto 20px;
}

.tile-top[b-lwnqjwtogo] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tile-top h3[b-lwnqjwtogo] {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tile-top .muted[b-lwnqjwtogo] {
  font-size: 0.78rem;
  white-space: nowrap;
}

.tile-label[b-lwnqjwtogo] {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--fg-3);
  letter-spacing: 0.005em;
}

.tile-big[b-lwnqjwtogo] {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fg);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

.tile-hero .tile-big[b-lwnqjwtogo] {
  font-size: 3.2rem;
  margin-top: 10px;
}

.tile-big small[b-lwnqjwtogo] {
  display: inline-block;
  font-size: 0.4em;
  font-weight: 500;
  color: var(--fg-3);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* The brands tile sits beside the map: its ring floats in the middle of the remaining height. */
.tile-third[b-lwnqjwtogo]  .chart-donut {
  margin: auto 0;
}

.tile-big.is-green[b-lwnqjwtogo],
.is-green[b-lwnqjwtogo] {
  color: var(--green);
}

.tile-big.is-red[b-lwnqjwtogo],
.is-red[b-lwnqjwtogo] {
  color: var(--red);
}

.tile-big.is-blue[b-lwnqjwtogo] {
  color: var(--blue);
}

.tile-sub[b-lwnqjwtogo] {
  font-size: 0.78rem;
  color: var(--fg-3);
  margin-top: 6px;
  line-height: 1.4;
}

.tile-link[b-lwnqjwtogo] {
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.82rem;
}

.tile-minis[b-lwnqjwtogo] {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 24px;
  margin-top: auto;
  padding-top: 14px;
}

.tile-minis div[b-lwnqjwtogo] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tile-minis span[b-lwnqjwtogo] {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.tile-minis small[b-lwnqjwtogo] {
  font-size: 0.72rem;
  color: var(--fg-3);
}

.tile-map-body[b-lwnqjwtogo] {
  margin: 4px -20px 0;
}

.tile-map-body[b-lwnqjwtogo]  .map {
  border-radius: 0;
}

/* Latest finds as an inset list. */
.list[b-lwnqjwtogo] {
  list-style: none;
  margin: 0 -20px -18px;
  padding: 0;
}

.list-row + .list-row[b-lwnqjwtogo] {
  border-top: 1px solid var(--line);
}

/* A freshly arrived row: enters on transform/opacity, its highlight is a fading layer, not an animated background. */
.list-row.is-new[b-lwnqjwtogo] {
  position: relative;
  animation: row-arrive-b-lwnqjwtogo 400ms var(--ease-out) both;
}

.list-row.is-new[b-lwnqjwtogo]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blue-soft);
  pointer-events: none;
  animation: row-glow-b-lwnqjwtogo 1000ms var(--ease-out) both;
}

@keyframes row-arrive-b-lwnqjwtogo {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes row-glow-b-lwnqjwtogo {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Compact variant for the landing page demo. */
.bento.is-compact .tile[b-lwnqjwtogo] {
  padding: 16px 18px;
  border-radius: 16px;
}

.bento.is-compact .tile-hero .tile-big[b-lwnqjwtogo] {
  font-size: 2.8rem;
}

.bento.is-compact .tile-big[b-lwnqjwtogo] {
  font-size: 1.9rem;
}

.bento.is-compact .tile-map-body[b-lwnqjwtogo] {
  margin: 4px -18px 0;
}

.bento.is-compact .list[b-lwnqjwtogo] {
  margin: 0 -18px -16px;
}

.bento.is-compact .list-link[b-lwnqjwtogo] {
  padding: 10px 18px;
}

.list-link[b-lwnqjwtogo] {
  display: grid;
  grid-template-columns: 56px minmax(0, 1.6fr) auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 11px 20px;
  color: inherit;
  text-decoration: none;
  transition: background-color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .list-link:hover[b-lwnqjwtogo] {
    background: var(--tint-04);
    text-decoration: none;
  }
}

.list-thumb[b-lwnqjwtogo] {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-2);
}

.list-thumb-empty[b-lwnqjwtogo] {
  display: grid;
  place-items: center;
  color: var(--fg-3);
}

.list-main[b-lwnqjwtogo] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.list-title[b-lwnqjwtogo] {
  color: var(--fg);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-spec[b-lwnqjwtogo] {
  font-size: 0.78rem;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-price[b-lwnqjwtogo] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  color: var(--fg);
  font-weight: 600;
  font-size: 0.95rem;
}

.list-margin[b-lwnqjwtogo] {
  min-width: 96px;
  text-align: right;
  font-size: 1rem;
}

.list-meta[b-lwnqjwtogo] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 0.78rem;
  color: var(--fg-3);
  min-width: 90px;
}

@keyframes tile-in-b-lwnqjwtogo {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1240px) {
  .bento[b-lwnqjwtogo] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tile-hero[b-lwnqjwtogo] {
    grid-column: span 2;
  }

  .tile-half[b-lwnqjwtogo] {
    grid-column: span 2;
  }

  .tile-third[b-lwnqjwtogo],
  .tile-third-wide[b-lwnqjwtogo],
  .tile-map[b-lwnqjwtogo],
  .tile-full[b-lwnqjwtogo] {
    grid-column: span 4;
  }
}

@media (max-width: 760px) {
  .bento[b-lwnqjwtogo] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile-hero[b-lwnqjwtogo],
  .tile-half[b-lwnqjwtogo],
  .tile-third[b-lwnqjwtogo],
  .tile-third-wide[b-lwnqjwtogo],
  .tile-map[b-lwnqjwtogo],
  .tile-full[b-lwnqjwtogo] {
    grid-column: span 2;
  }

  .list-link[b-lwnqjwtogo] {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .list-margin[b-lwnqjwtogo],
  .list-meta[b-lwnqjwtogo] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile[b-lwnqjwtogo] {
    animation: none;
  }
}

/* Dashboard tile: finds per market, count and average margin against the strongest market. */
.country-list[b-lwnqjwtogo] {
  list-style: none;
  margin: 0;
  padding: 0 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.country-list li[b-lwnqjwtogo] {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 54px auto auto;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
}

.country-list-name[b-lwnqjwtogo] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.country-list-bar[b-lwnqjwtogo] {
  height: 5px;
  border-radius: 3px;
  background: var(--tint-08);
  overflow: hidden;
}

.country-list-bar span[b-lwnqjwtogo] {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--blue);
  transform-origin: 0 50%;
  transition: transform 420ms var(--ease-out);

  @starting-style {
    transform: scaleX(0);
  }
}

.country-list-count[b-lwnqjwtogo] {
  min-width: 34px;
  text-align: right;
  font-weight: 600;
}

.country-list-margin[b-lwnqjwtogo] {
  min-width: 74px;
  text-align: right;
  font-size: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
  .country-list-bar span[b-lwnqjwtogo] {
    transition-duration: 1ms;
  }
}
/* /Components/Shared/DealChips.razor.rz.scp.css */
.deal-chips[b-9n1byq97v9] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.deal-chips-sm[b-9n1byq97v9] {
  margin-top: 4px;
}
/* /Components/Shared/Dropdown.razor.rz.scp.css */
.dd[b-kdq6skjcss] {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

.dd-trigger[b-kdq6skjcss] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  cursor: pointer;
  border: 0;
  color: var(--fg);
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 120ms var(--ease-out);
}

.dd-trigger:active[b-kdq6skjcss] {
  transform: scale(0.98);
}

.dd-trigger:disabled[b-kdq6skjcss] {
  opacity: 0.5;
  cursor: not-allowed;
}

.dd-trigger:focus-visible[b-kdq6skjcss] {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Field variant: looks like our inputs */
.dd-field .dd-trigger[b-kdq6skjcss] {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--bg-2);
  font-size: 0.95rem;
  font-weight: 500;
  width: 100%;
}

.dd-field[b-kdq6skjcss] {
  width: 100%;
}

.dd-field .dd-label[b-kdq6skjcss] {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chip variant: the status pill, exactly as wide as its text */
.dd-chip .dd-trigger[b-kdq6skjcss] {
  gap: 4px;
  padding-right: 8px;
  font-weight: 600;
}

.dd[b-kdq6skjcss]  .dd-caret {
  flex: none;
  transform: rotate(90deg);
  opacity: 0.7;
  transition: transform var(--dur-base) var(--ease-out);
}

.dd.is-open[b-kdq6skjcss]  .dd-caret {
  transform: rotate(-90deg);
}

@media (hover: hover) and (pointer: fine) {
  .dd-field .dd-trigger:hover[b-kdq6skjcss] {
    background: var(--bg-3);
  }
}

.dd-backdrop[b-kdq6skjcss] {
  position: fixed;
  inset: 0;
  z-index: 70;
}

/* The menu grows out of the trigger's top-left (or top-right) corner; transform and opacity only. */
.dd-menu[b-kdq6skjcss] {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 71;
  visibility: hidden;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--pop) 96%, transparent);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 24px 60px -20px var(--shadow-deep), inset 0 0 0 1px var(--tint-09);
  outline: 0;
  opacity: 1;
  transform: none;
  transform-origin: 0 0;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-spring);

  @starting-style {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
}

.dd-menu.is-placed[b-kdq6skjcss] {
  visibility: visible;
}

.dd-right .dd-menu[b-kdq6skjcss] {
  transform-origin: 100% 0;
}

.dd-item[b-kdq6skjcss] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--fg-1);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.dd-item.is-on[b-kdq6skjcss] {
  color: var(--fg);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .dd-item:hover[b-kdq6skjcss] {
    background: var(--tint-08);
    color: var(--fg);
  }
}

.dd-item:focus-visible[b-kdq6skjcss] {
  outline: 0;
  background: var(--blue-soft);
  color: var(--blue);
}

.dd-item-label[b-kdq6skjcss] {
  flex: 1;
}

.dd[b-kdq6skjcss]  .dd-check {
  color: var(--blue);
}

.dd-dot[b-kdq6skjcss] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tint-35);
  flex: none;
}

.dd-dot.chip-blue[b-kdq6skjcss] {
  background: var(--blue);
}

.dd-dot.chip-green[b-kdq6skjcss] {
  background: var(--green);
}

.dd-dot.chip-amber[b-kdq6skjcss] {
  background: var(--orange);
}

.dd-dot.chip-red[b-kdq6skjcss] {
  background: var(--red);
}

@media (prefers-reduced-motion: reduce) {
  .dd-menu[b-kdq6skjcss],
  .dd-trigger[b-kdq6skjcss],
  .dd-item[b-kdq6skjcss],
  .dd[b-kdq6skjcss]  .dd-caret {
    transition-duration: 1ms;
  }

  @starting-style {
    .dd-menu[b-kdq6skjcss] {
      transform: none;
    }
  }
}
/* /Components/Shared/Flag.razor.rz.scp.css */
.flag[b-maizs5a93z] {
  display: inline-block;
  vertical-align: -2px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  flex: none;
}
/* /Components/Shared/GarageMarketLine.razor.rz.scp.css */
.market-line[b-xqfijbvep7] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 6px;
  font-size: 0.76rem;
}

.market-line-facts[b-xqfijbvep7] {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px 0;
}

.market-line-facts > span + span[b-xqfijbvep7]::before {
  content: "·";
  margin: 0 6px;
}

/* In the garage table the line must not widen the vehicle column: it wraps within a readable width. */
.market-line[b-xqfijbvep7] {
  max-width: 340px;
}

.market-line .chip[b-xqfijbvep7] {
  white-space: normal;
}
/* /Components/Shared/GarageMarketPanel.razor.rz.scp.css */
.watch-head[b-y4i6api24v] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.watch[b-y4i6api24v] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.watch-notice[b-y4i6api24v] {
  margin: 0;
}

.watch-text[b-y4i6api24v] {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
}

.watch-strip[b-y4i6api24v] {
  margin: 0;
}

.watch-strip strong[b-y4i6api24v] {
  font-size: 1rem;
}

.watch-sub[b-y4i6api24v] {
  font-size: 0.74rem;
}

.watch-chart[b-y4i6api24v] {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.watch-chart svg[b-y4i6api24v] {
  width: 100%;
  height: 64px;
  overflow: visible;
}

.watch-chart polyline[b-y4i6api24v] {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.watch-median[b-y4i6api24v] {
  stroke: var(--blue);
}

.watch-own[b-y4i6api24v] {
  stroke: var(--fg-3);
  stroke-dasharray: 4 4;
}

.watch-chart figcaption[b-y4i6api24v] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.74rem;
}

.watch-key[b-y4i6api24v]::before {
  content: "";
  display: inline-block;
  width: 14px;
  margin-right: 6px;
  vertical-align: middle;
  border-top: 2px solid var(--blue);
}

.watch-key-own[b-y4i6api24v]::before {
  border-top: 2px dashed var(--fg-3);
}

.watch-table[b-y4i6api24v] {
  font-size: 0.82rem;
}

.watch-foot[b-y4i6api24v] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.76rem;
  line-height: 1.5;
}

.watch-foot .btn[b-y4i6api24v] {
  flex: none;
}
/* /Components/Shared/GermanyMap.razor.rz.scp.css */
.gmap[b-gxu5qdzevj] {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.gmap svg[b-gxu5qdzevj] {
  width: 100%;
  height: auto;
  display: block;
}

/* Fill and stroke only; the path never moves. */
.gmap-state[b-gxu5qdzevj] {
  fill: var(--tint-08);
  stroke: var(--bg-1);
  stroke-width: 1.2;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 160ms var(--ease-out);
}

.gmap-state.is-on[b-gxu5qdzevj] {
  fill: var(--blue-fill);
}

@media (hover: hover) and (pointer: fine) {
  .gmap:not(.is-readonly) .gmap-state:hover[b-gxu5qdzevj] {
    fill: var(--tint-18);
  }

  .gmap:not(.is-readonly) .gmap-state.is-on:hover[b-gxu5qdzevj] {
    fill: var(--blue);
  }
}

.gmap.is-readonly .gmap-state[b-gxu5qdzevj] {
  cursor: default;
}

.gmap-label[b-gxu5qdzevj] {
  font-size: 15px;
  font-weight: 600;
  fill: var(--tint-45);
  transition: fill 160ms var(--ease-out);
}

.gmap-label.is-on[b-gxu5qdzevj] {
  fill: var(--on-accent);
}

.gmap-side[b-gxu5qdzevj] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.gmap-hover[b-gxu5qdzevj] {
  font-size: 0.9rem;
  color: var(--fg-1);
  min-height: 1.4em;
}

.gmap-actions[b-gxu5qdzevj] {
  display: flex;
  gap: 6px;
}

.gmap-chips[b-gxu5qdzevj]  .chip-check-sm,
.gmap-chips .chip-check-sm[b-gxu5qdzevj] {
  min-height: 28px;
  padding: 0 11px;
  font-size: 0.8rem;
}

@media (max-width: 700px) {
  .gmap[b-gxu5qdzevj] {
    grid-template-columns: 1fr;
  }

  .gmap svg[b-gxu5qdzevj] {
    max-width: 260px;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gmap-state[b-gxu5qdzevj],
  .gmap-label[b-gxu5qdzevj] {
    transition-duration: 1ms;
  }
}
/* /Components/Shared/HeroStage.razor.rz.scp.css */
/* The car stands on a mirrored floor; the find cards stack over its lower right corner like notifications.
   Shots swap by key (enter via @starting-style, leave via .is-out); stack cards keep their DOM node and only
   change class, so every move is a retargetable transition. */
.stage[b-ke4dd2epgy] {
  position: relative;
  padding-bottom: 140px;
}

.stage-shots[b-ke4dd2epgy] {
  position: relative;
  aspect-ratio: 1400 / 820;
  width: 80%;
}

.stage-shot[b-ke4dd2epgy] {
  position: absolute;
  inset: 0;
  opacity: 1;
  transform: none;
  transition:
    opacity 620ms var(--ease-out),
    transform 620ms var(--ease-out);
}

@starting-style {
  .stage-shot[b-ke4dd2epgy] {
    opacity: 0;
    transform: translateX(28px) scale(0.985);
  }
}

.stage-shot.is-out[b-ke4dd2epgy] {
  opacity: 0;
  transform: translateX(-28px) scale(0.985);
  transition-duration: 420ms;
}

.stage-photo[b-ke4dd2epgy] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

/* Reflection: the same photo flipped, anchored to the floor, fading out fast. */
.stage-mirror[b-ke4dd2epgy] {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 34%;
  overflow: hidden;
  pointer-events: none;
}

.stage-mirror img[b-ke4dd2epgy] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% / 0.34);
  object-fit: contain;
  object-position: center bottom;
  transform: scaleY(-1);
  transform-origin: 50% 0;
  opacity: 0.4;
  filter: blur(2px);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 100%);
}

.stage-floor[b-ke4dd2epgy] {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 100%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16) 30%, rgba(255, 255, 255, 0.16) 70%, transparent);
}

.stage-floor[b-ke4dd2epgy]::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: -40px;
  height: 120px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(41, 151, 255, 0.28), transparent 70%);
  filter: blur(22px);
}

/* Off-screen but still fetched: display:none would let some browsers skip the download. */
.stage-preload[b-ke4dd2epgy] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.stage-preload img[b-ke4dd2epgy] {
  width: 1px;
  height: 1px;
}

/* Card stack */
.stage-stack[b-ke4dd2epgy] {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(360px, 100%);
  z-index: 3;
}

.stack-card[b-ke4dd2epgy] {
  position: absolute;
  inset: 0 0 auto;
  text-align: left;
  padding: 22px 24px 20px;
  border-radius: 24px;
  background: rgba(29, 29, 31, 0.86);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  opacity: 1;
  transform: none;
  transform-origin: 50% 0;
  transition:
    opacity 420ms var(--ease-out),
    transform 420ms var(--ease-out);
}

.stack-card.is-top[b-ke4dd2epgy] {
  position: relative;
  z-index: 3;
}

@starting-style {
  .stack-card.is-top[b-ke4dd2epgy] {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}

.stack-card.stack-1[b-ke4dd2epgy] {
  z-index: 2;
  opacity: 0.6;
  transform: translateY(-14px) scale(0.95);
}

.stack-card.stack-2[b-ke4dd2epgy] {
  z-index: 1;
  opacity: 0.3;
  transform: translateY(-28px) scale(0.9);
}

.stage-card-head[b-ke4dd2epgy] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.stage-when[b-ke4dd2epgy] {
  color: var(--fg-3);
  font-size: 0.8rem;
}

.stage-title[b-ke4dd2epgy] {
  margin: 0 0 5px;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--fg);
}

.stage-spec[b-ke4dd2epgy] {
  margin: 0 0 4px;
  color: var(--fg-2);
  font-size: 0.88rem;
  line-height: 1.4;
}

.stage-place[b-ke4dd2epgy] {
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-3);
  font-size: 0.84rem;
}

.stage-numbers[b-ke4dd2epgy] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stage-number[b-ke4dd2epgy] {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.05);
}

.stage-number-label[b-ke4dd2epgy] {
  color: var(--fg-3);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
}

.stage-number-value[b-ke4dd2epgy] {
  color: var(--fg);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.stage-number-margin[b-ke4dd2epgy] {
  grid-column: 1 / -1;
  background: rgba(48, 209, 88, 0.12);
}

.stage-number-margin .stage-number-label[b-ke4dd2epgy] {
  color: rgba(48, 209, 88, 0.85);
}

.stage-number-margin .stage-number-value[b-ke4dd2epgy] {
  color: var(--green);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.035em;
}

@media (min-width: 1560px) {
  .stage-stack[b-ke4dd2epgy] {
    right: -48px;
  }
}

@media (max-width: 1100px) {
  .stage[b-ke4dd2epgy] {
    padding-bottom: 0;
  }

  .stage-shots[b-ke4dd2epgy] {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }

  .stage-stack[b-ke4dd2epgy] {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 480px;
    margin: 64px auto 0;
  }
}

@media (max-width: 520px) {
  .stack-card[b-ke4dd2epgy] {
    padding: 18px 18px 16px;
  }

  .stage-title[b-ke4dd2epgy] {
    font-size: 1.1rem;
  }

  .stage-number-margin .stage-number-value[b-ke4dd2epgy] {
    font-size: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-shot[b-ke4dd2epgy],
  .stack-card[b-ke4dd2epgy] {
    transition-duration: 200ms;
    transition-property: opacity;
  }

  @starting-style {
    .stage-shot[b-ke4dd2epgy],
    .stack-card.is-top[b-ke4dd2epgy] {
      transform: none;
    }
  }

  .stage-shot.is-out[b-ke4dd2epgy] {
    transform: none;
  }
}
/* /Components/Shared/ImportCostPanel.razor.rz.scp.css */
.import-head[b-z4ai6p8kh7] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.import-head .chip[b-z4ai6p8kh7] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.import-table .import-note[b-z4ai6p8kh7] {
  display: block;
  color: var(--fg-3);
  font-size: 0.74rem;
  margin-top: 2px;
}

.import-table .num small[b-z4ai6p8kh7] {
  display: block;
  color: var(--fg-3);
  font-size: 0.74rem;
  font-weight: 500;
}

.import-table .is-good[b-z4ai6p8kh7] {
  color: var(--green);
}

.import-empty[b-z4ai6p8kh7] {
  color: var(--fg-3);
  line-height: 1.5;
}

.import-empty a[b-z4ai6p8kh7] {
  display: block;
}

.import-notes[b-z4ai6p8kh7] {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--fg-3);
  font-size: 0.78rem;
  line-height: 1.5;
}

.import-notes li[b-z4ai6p8kh7] {
  padding-left: 14px;
  position: relative;
}

.import-notes li[b-z4ai6p8kh7]::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--line-strong);
}
/* /Components/Shared/ListingDeliveryNote.razor.rz.scp.css */
.delivery-note[b-dpouz2uhz8] {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0;
  font-size: 0.86rem;
  color: var(--fg-2);
}

.delivery-note-text[b-dpouz2uhz8] {
  min-width: 0;
  overflow-wrap: anywhere;
}

.delivery-note strong[b-dpouz2uhz8] {
  color: var(--fg);
  font-weight: 600;
}
/* /Components/Shared/ListingStatsLine.razor.rz.scp.css */
.stats-line[b-voikduylzl] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 4px;
  font-size: 0.76rem;
}

.stats-line-facts[b-voikduylzl] {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px 0;
}

.stats-line-facts > span + span[b-voikduylzl]::before {
  content: "·";
  margin: 0 6px;
}

/* In the garage table the line must not widen the vehicle column: it wraps within a readable width. */
.stats-line[b-voikduylzl] {
  max-width: 340px;
}

.stats-line .chip[b-voikduylzl] {
  white-space: normal;
}
/* /Components/Shared/ListingStatsPanel.razor.rz.scp.css */
.stats-head[b-fn4bhmho0x] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.stats-head-sub[b-fn4bhmho0x] {
  font-size: 0.78rem;
  font-weight: 400;
}

.stats-portal + .stats-portal[b-fn4bhmho0x] {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.stats-portal-head[b-fn4bhmho0x] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-bottom: 8px;
  font-size: 0.86rem;
}

.stats-sub[b-fn4bhmho0x] {
  display: block;
  font-size: 0.76rem;
}

.stats-chart[b-fn4bhmho0x] {
  margin: 10px 0 0;
}

.stats-chart svg[b-fn4bhmho0x] {
  display: block;
  width: 100%;
  height: 40px;
}

.stats-chart polyline[b-fn4bhmho0x] {
  stroke: var(--blue);
  stroke-width: 1.5;
}

.stats-chart figcaption[b-fn4bhmho0x] {
  margin-top: 4px;
  font-size: 0.74rem;
}

.stats-text[b-fn4bhmho0x] {
  margin: 8px 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
}

.stats-hint[b-fn4bhmho0x] {
  margin: 8px 0 0;
  font-size: 0.84rem;
  line-height: 1.45;
}
/* /Components/Shared/ListingStatsTable.razor.rz.scp.css */
.stats-table-sheet[b-lztqax8tmz] {
  margin-top: 24px;
}

.stats-table-text[b-lztqax8tmz] {
  margin: 0;
  padding: 12px 18px 16px;
  font-size: 0.82rem;
  line-height: 1.5;
}

.stats-table td[b-lztqax8tmz] {
  vertical-align: top;
}

.stats-table th[b-lztqax8tmz],
.stats-table td[b-lztqax8tmz] {
  padding-left: 12px;
  padding-right: 12px;
}

.stats-table th:first-child[b-lztqax8tmz],
.stats-table td:first-child[b-lztqax8tmz] {
  padding-left: 18px;
}

.stats-table-hint[b-lztqax8tmz] {
  min-width: 180px;
  font-size: 0.82rem;
  line-height: 1.4;
}

.stats-sort[b-lztqax8tmz] {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.stats-sort.is-on[b-lztqax8tmz] {
  color: var(--blue);
  text-decoration: none;
}

.stats-sort:focus-visible[b-lztqax8tmz] {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Phone: the rows are cards and the column heads are gone, so the three sortable heads stay as one row of choices. */
@media (max-width: 700px) {
  .stats-table thead[b-lztqax8tmz] {
    position: static;
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .stats-table thead tr[b-lztqax8tmz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 12px 16px;
  }

  .stats-table thead tr[b-lztqax8tmz]::before {
    content: "Sortieren nach";
    font-size: 0.76rem;
    color: var(--fg-3);
  }

  .stats-table thead th[b-lztqax8tmz] {
    padding: 0;
    border: 0;
  }

  .stats-table thead th:not(:has(.stats-sort))[b-lztqax8tmz] {
    display: none;
  }

  .stats-sort[b-lztqax8tmz] {
    min-height: 36px;
    padding: 0 12px;
    border-radius: var(--pill);
    background: var(--tint-08);
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8rem;
  }

  .stats-sort.is-on[b-lztqax8tmz] {
    background: var(--blue-soft);
  }

  .stats-table-hint[b-lztqax8tmz] {
    min-width: 0;
  }

  .stats-portal[b-lztqax8tmz] {
    font-size: 0.8rem;
    color: var(--fg-2);
  }
}

/* Wide: long column heads break into two lines so the name of the listing keeps a readable width. */
@media (min-width: 701px) {
  .stats-table th[b-lztqax8tmz],
  .stats-table th.num[b-lztqax8tmz] {
    white-space: normal;
    vertical-align: bottom;
    line-height: 1.3;
  }

  .stats-table td:first-child[b-lztqax8tmz] {
    min-width: 190px;
  }
}
/* /Components/Shared/LiveDemo.razor.rz.scp.css */
.demo-frame[b-mhld0xr8q9] {
  position: relative;
  border-radius: 22px;
  background: #0b0b0c;
  box-shadow: 0 70px 140px -50px rgba(0, 0, 0, 1), 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  text-align: left;
}

.demo-bar[b-mhld0xr8q9] {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  padding: 0 16px;
  background: #161618;
}

.demo-lights[b-mhld0xr8q9] {
  display: flex;
  gap: 7px;
}

.demo-lights span[b-mhld0xr8q9] {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3a3a3c;
}

.demo-lights span:nth-child(1)[b-mhld0xr8q9] {
  background: #ff5f57;
}

.demo-lights span:nth-child(2)[b-mhld0xr8q9] {
  background: #febc2e;
}

.demo-lights span:nth-child(3)[b-mhld0xr8q9] {
  background: #28c840;
}

.demo-title[b-mhld0xr8q9] {
  font-size: 0.78rem;
  color: var(--fg-3);
  flex: 1;
}

.demo-full-btn[b-mhld0xr8q9] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 8px;
  border: 0;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.08);
  color: var(--fg-1);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}

.demo-full-btn:active[b-mhld0xr8q9] {
  transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
  .demo-full-btn:hover[b-mhld0xr8q9] {
    background: rgba(255, 255, 255, 0.14);
    color: var(--fg);
  }
}

/* Fullscreen: the frame takes the viewport, the body scrolls inside, the fade mask goes away. */
.demo-frame.is-full[b-mhld0xr8q9] {
  position: fixed;
  inset: 0;
  z-index: 100;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  outline: 0;
  animation: demo-full-in-b-mhld0xr8q9 260ms var(--ease-out) both;
}

.demo-frame.is-full .demo-bar[b-mhld0xr8q9] {
  flex: none;
  height: 52px;
  padding: 0 22px;
}

.demo-frame.is-full .demo-body[b-mhld0xr8q9] {
  flex: 1;
  max-height: none;
  overflow: auto;
  padding: 20px clamp(16px, 3vw, 40px) 40px;
  -webkit-mask-image: none;
  mask-image: none;
}

.demo-frame.is-full .demo-body[b-mhld0xr8q9]  .bento {
  max-width: 1440px;
  margin: 0 auto;
}

@keyframes demo-full-in-b-mhld0xr8q9 {
  from {
    opacity: 0;
    transform: scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.demo-body[b-mhld0xr8q9] {
  padding: 16px;
  max-height: 720px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
}

.demo-toast[b-mhld0xr8q9] {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 40px);
  padding: 10px 16px;
  border-radius: var(--pill);
  background: rgba(29, 29, 31, 0.86);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: var(--fg-1);
  font-size: 0.82rem;
  white-space: nowrap;
  animation: toast-in-b-mhld0xr8q9 500ms var(--ease-out) both;
}

.demo-toast strong[b-mhld0xr8q9] {
  color: var(--fg);
}

.demo-toast b[b-mhld0xr8q9] {
  font-weight: 600;
}

.demo-toast b.is-strong[b-mhld0xr8q9] {
  color: var(--blue);
}

.demo-toast b.is-good[b-mhld0xr8q9] {
  color: var(--green);
}

.demo-toast b.is-bad[b-mhld0xr8q9] {
  color: var(--red);
}

.demo-toast-dot[b-mhld0xr8q9] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}

@keyframes toast-in-b-mhld0xr8q9 {
  from {
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@media (max-width: 700px) {
  .demo-body[b-mhld0xr8q9] {
    padding: 10px;
    max-height: 560px;
  }

  .demo-toast[b-mhld0xr8q9] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-frame.is-full[b-mhld0xr8q9] {
    animation: none;
  }

  .demo-toast[b-mhld0xr8q9] {
    animation: none;
  }
}
/* /Components/Shared/MarketSpreadPanel.razor.rz.scp.css */
.spread-head[b-35gsw5wxb9] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.spread[b-35gsw5wxb9] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.spread-intro[b-35gsw5wxb9] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.spread-intro p[b-35gsw5wxb9] {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
}

.spread-notice[b-35gsw5wxb9] {
  margin: 0;
  align-self: stretch;
}

.spread-spin[b-35gsw5wxb9] {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--tint-14);
  border-top-color: var(--blue);
  animation: spread-spin-b-35gsw5wxb9 800ms linear infinite;
}

@keyframes spread-spin-b-35gsw5wxb9 {
  to {
    transform: rotate(360deg);
  }
}

.spread-best[b-35gsw5wxb9] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--green) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 20%, transparent);
  opacity: 1;
  transform: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);

  @starting-style {
    opacity: 0;
    transform: translateY(6px);
  }
}

.spread-best.is-down[b-35gsw5wxb9] {
  background: color-mix(in srgb, var(--orange) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange) 20%, transparent);
}

.spread-best[b-35gsw5wxb9]  .spread-best-flag {
  flex: none;
}

.spread-best-text[b-35gsw5wxb9] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.86rem;
}

.spread-best-text .muted[b-35gsw5wxb9] {
  font-size: 0.8rem;
}

.spread-list[b-35gsw5wxb9] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spread-row[b-35gsw5wxb9] {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) minmax(60px, 1.2fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 0.86rem;
  transition: background-color 140ms var(--ease-out);
}

.spread-row.is-here[b-35gsw5wxb9] {
  background: var(--tint-05);
}

.spread-row.is-target[b-35gsw5wxb9] {
  background: var(--blue-soft);
}

.spread-row.is-empty[b-35gsw5wxb9] {
  opacity: 0.55;
}

.spread-name[b-35gsw5wxb9] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spread-bar[b-35gsw5wxb9] {
  height: 6px;
  border-radius: 3px;
  background: var(--tint-07);
  overflow: hidden;
}

.spread-bar span[b-35gsw5wxb9] {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--fg-3);
  transform-origin: 0 50%;
  transition: transform 420ms var(--ease-out);

  @starting-style {
    transform: scaleX(0);
  }
}

.spread-bar span.is-up[b-35gsw5wxb9] {
  background: var(--green);
}

.spread-bar span.is-down[b-35gsw5wxb9] {
  background: var(--orange);
}

.spread-median[b-35gsw5wxb9],
.spread-delta[b-35gsw5wxb9] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 78px;
}

.spread-median .muted[b-35gsw5wxb9],
.spread-delta .muted[b-35gsw5wxb9] {
  font-size: 0.74rem;
}

.spread-foot[b-35gsw5wxb9] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.76rem;
}

.spread-foot[b-35gsw5wxb9]  .btn {
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .spread-best[b-35gsw5wxb9],
  .spread-bar span[b-35gsw5wxb9] {
    transition-duration: 1ms;
  }

  .spread-spin[b-35gsw5wxb9] {
    animation-duration: 2s;
  }
}

.spread-loading[b-35gsw5wxb9] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.spread-spin-sm[b-35gsw5wxb9] {
  width: 11px;
  height: 11px;
  border-width: 2px;
}
/* /Components/Shared/MileageChart.razor.rz.scp.css */
.mchart[b-0bd3efbdpm] {
  margin: 0;
  padding: 10px 10px 6px;
  border-radius: 12px;
  background: var(--tint-04);
}

.mchart svg[b-0bd3efbdpm] {
  display: block;
  width: 100%;
  height: 110px;
}

.mchart-grid[b-0bd3efbdpm] {
  stroke: var(--tint-08);
  stroke-width: 1;
}

.mchart-line[b-0bd3efbdpm] {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.mchart-point[b-0bd3efbdpm] {
  fill: var(--bg-1);
  stroke: var(--blue);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.mchart-point.is-rollback[b-0bd3efbdpm] {
  fill: var(--red);
  stroke: var(--red);
}

.mchart figcaption[b-0bd3efbdpm] {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--fg-3);
}
/* /Components/Shared/NoAccess.razor.rz.scp.css */
.no-access[b-iyqn3gawef] {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 460px;
  margin: 12vh auto 0;
  text-align: center;
}

.no-access-icon[b-iyqn3gawef] {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--fg-2);
}

.no-access h1[b-iyqn3gawef] {
  margin: 6px 0 0;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.no-access h2[b-iyqn3gawef] {
  margin: 18px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
}

.no-access p[b-iyqn3gawef] {
  margin: 0;
  color: var(--fg-2);
  line-height: 1.5;
}

.no-access-list[b-iyqn3gawef] {
  display: grid;
  gap: 6px;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.no-access-list a[b-iyqn3gawef] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bg-2);
  color: inherit;
  text-decoration: none;
  text-align: left;
  transition: background-color 160ms var(--ease-out);
}

.no-access-list a:active[b-iyqn3gawef] {
  transform: scale(0.99);
}

@media (hover: hover) {
  .no-access-list a:hover[b-iyqn3gawef] {
    background: var(--bg-3);
  }
}

.no-access-area-icon[b-iyqn3gawef] {
  display: grid;
  place-items: center;
  color: var(--fg-2);
}

.no-access-area[b-iyqn3gawef] {
  flex: 1;
  font-weight: 500;
}
/* /Components/Shared/PriceDropChip.razor.rz.scp.css */
.price-drop[b-4uw6lg4mdj] {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px 6px;
  font-size: 0.76rem;
}

.price-drop-was s[b-4uw6lg4mdj] {
  text-decoration-thickness: 1px;
}
/* /Components/Shared/PriceHistory.razor.rz.scp.css */
.price-history[b-dh3nf3d65k] {
  margin: 14px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.price-history-head[b-dh3nf3d65k] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.price-history-note + .price-history-head[b-dh3nf3d65k] {
  margin-top: 12px;
}

.price-history-line[b-dh3nf3d65k] {
  display: block;
  width: 100%;
  height: 44px;
  margin: 10px 0 6px;
}

.price-history-line polyline[b-dh3nf3d65k] {
  stroke: var(--blue);
  stroke-width: 1.5;
}

.price-history-list[b-dh3nf3d65k] {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
}

.price-history-list li[b-dh3nf3d65k] {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid var(--line);
}

.price-history-list li > .num[b-dh3nf3d65k] {
  text-align: right;
}

.price-history-list .is-down[b-dh3nf3d65k] {
  color: var(--green);
}

.price-history-note[b-dh3nf3d65k] {
  margin: 8px 0 0;
  font-size: 0.76rem;
  line-height: 1.45;
}

@media (max-width: 520px) {
  .price-history-list li[b-dh3nf3d65k] {
    grid-template-columns: 1fr 1fr;
  }
}
/* /Components/Shared/SalesDocumentPaper.razor.rz.scp.css */
/* Paper, not panel: ink on white whatever the theme around it. The sheet scales with the room it gets: its type size
   follows its width, and every measure inside is in em, so the proportions of the A4 page hold. */
.paper[b-ljr6schxcr] {
  container-type: inline-size;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  --paper-ink: #1a1d21;
  --paper-grey: #5f6772;
  --paper-hairline: #d4d9df;
  --paper-tint: #f3f5f7;
}

.paper-sheet[b-ljr6schxcr] {
  /* 9.5 pt on a page 210 mm wide is 1.6 % of its width. */
  font-size: clamp(10.5px, 1.6cqw, 16px);
  line-height: 1.4;
  color: var(--paper-ink);
  /* Top, right and left as on the page: 13, 20 and 25 mm of 210. */
  padding: 6.2cqw 9.5cqw 5cqw 11.9cqw;
  position: relative;
}

.paper-sheet[data-stamp][b-ljr6schxcr]::after {
  content: attr(data-stamp);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 7em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.07);
  transform: rotate(-35deg);
  pointer-events: none;
}

/* The panel colours its text elements for a dark ground; on paper everything is ink unless it says otherwise. */
.paper :is(p, strong, span, small, address, h2, th, td, dt, dd)[b-ljr6schxcr] {
  color: inherit;
}

.paper p[b-ljr6schxcr] {
  margin: 0 0 0.45em;
  max-width: none;
}

.paper-small[b-ljr6schxcr],
.paper .paper-small[b-ljr6schxcr] {
  font-size: 0.74em;
  color: var(--paper-grey);
}

.paper .paper-label[b-ljr6schxcr] {
  display: block;
  font-size: 0.74em;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--paper-accent);
  margin-bottom: 0.25em;
}

.paper-strong[b-ljr6schxcr] {
  font-weight: 700;
}

.paper .paper-gap[b-ljr6schxcr] {
  color: #b42318;
}

.paper-text[b-ljr6schxcr] {
  white-space: pre-line;
}

/* Letterhead: the room DIN 5008 leaves above the address field. */
.paper-head[b-ljr6schxcr] {
  display: flex;
  align-items: center;
  gap: 1.5em;
  min-height: 7.2em;
  margin-bottom: 2.2em;
}

.paper-head-right[b-ljr6schxcr] {
  flex-direction: row-reverse;
  justify-content: space-between;
}

.paper-head-center[b-ljr6schxcr] {
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.4em;
  text-align: center;
}

.paper-head-plain.paper-head-right[b-ljr6schxcr] {
  justify-content: flex-start;
}

.paper-head-plain.paper-head-center[b-ljr6schxcr] {
  justify-content: center;
}

.paper-seller[b-ljr6schxcr] {
  font-size: 1.16em;
}

.paper-head-plain .paper-seller[b-ljr6schxcr] {
  font-size: 1.79em;
}

.paper-logo[b-ljr6schxcr] {
  width: auto;
  max-width: 22em;
}

/* 12, 18 and 24 mm beside a line of 9.5 pt. */
.paper-logo-small[b-ljr6schxcr] {
  height: 3.6em;
}

.paper-logo-medium[b-ljr6schxcr] {
  height: 5.4em;
}

.paper-logo-large[b-ljr6schxcr] {
  height: 7.2em;
}

.paper-parties[b-ljr6schxcr] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: 1.5em 12%;
  margin-bottom: 2.4em;
  align-items: start;
}

.paper-address[b-ljr6schxcr] {
  display: grid;
  font-style: normal;
  font-size: 1.16em;
  line-height: 1.3;
}

.paper .paper-sender[b-ljr6schxcr] {
  font-size: 0.64em;
  color: var(--paper-grey);
  border-bottom: 1px solid var(--paper-hairline);
  padding-bottom: 0.3em;
  margin-bottom: 4.6em;
}

.paper-info[b-ljr6schxcr] {
  margin: 0;
  display: grid;
  gap: 0.28em;
  background: var(--paper-tint);
  padding: 0.7em 0.8em;
}

.paper-info div[b-ljr6schxcr] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
}

.paper .paper-info dt[b-ljr6schxcr] {
  margin: 0;
  font-size: 0.74em;
  color: var(--paper-grey);
  white-space: nowrap;
}

.paper-info dd[b-ljr6schxcr] {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.paper .paper-title[b-ljr6schxcr] {
  font-size: 1.79em;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.6em;
  color: var(--paper-accent);
}

/* A tinted block with a bar in the accent colour: the reference of a Stornorechnung, the tax notes. */
.paper-card[b-ljr6schxcr] {
  background: var(--paper-tint);
  border-left: 0.2em solid var(--paper-accent);
  padding: 0.6em 0.8em;
  margin: 0 0 1.1em;
}

.paper-card p:last-child[b-ljr6schxcr] {
  margin-bottom: 0;
}

.paper-lines[b-ljr6schxcr],
.paper-totals[b-ljr6schxcr] {
  width: 100%;
  border-collapse: collapse;
}

.paper-lines[b-ljr6schxcr] {
  margin-top: 0.9em;
}

.paper .paper-lines th[b-ljr6schxcr] {
  text-align: left;
  font-size: 0.74em;
  font-weight: 700;
  border-bottom: 0.11em solid var(--paper-accent);
  padding: 0.5em 0.6em;
  white-space: nowrap;
  vertical-align: bottom;
}

.paper-lines td[b-ljr6schxcr] {
  border-bottom: 1px solid var(--paper-hairline);
  padding: 0.42em 0.6em;
  vertical-align: top;
}

.paper .paper-pos[b-ljr6schxcr] {
  color: var(--paper-grey);
}

.paper .paper-lines small[b-ljr6schxcr] {
  display: block;
  font-size: 0.74em;
  color: var(--paper-grey);
}

.paper-lines .paper-has-block td[b-ljr6schxcr] {
  border-bottom: 0;
  padding-bottom: 0.2em;
}

.paper-lines .paper-block-row td[b-ljr6schxcr] {
  padding-top: 0.1em;
  padding-bottom: 0.6em;
}

.paper-zebra .paper-lines td[b-ljr6schxcr] {
  border-bottom: 0;
}

.paper-zebra .paper-lines .paper-odd td[b-ljr6schxcr] {
  background: var(--paper-tint);
}

.paper-zebra .paper-lines tbody tr:last-child td[b-ljr6schxcr] {
  border-bottom: 1px solid var(--paper-hairline);
}

/* Label over value in a grid: the vehicle's data and the details of the transfer. */
.paper-facts[b-ljr6schxcr] {
  margin: 0;
  display: grid;
  gap: 0.45em 1em;
}

.paper-facts-1[b-ljr6schxcr] {
  grid-template-columns: 1fr;
}

/* The transfer: recipient and IBAN share the first row, the short details stand in the second. */
.paper-facts-pay[b-ljr6schxcr] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.paper-facts-pay div:nth-child(-n + 2)[b-ljr6schxcr] {
  grid-column: span 2;
}

.paper-facts-3[b-ljr6schxcr] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.paper-facts-4[b-ljr6schxcr] {
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
}

.paper-block-row .paper-facts[b-ljr6schxcr] {
  background: var(--paper-tint);
  border-left: 0.2em solid var(--paper-accent);
  padding: 0.5em 0.8em;
}

/* On a striped row the block would vanish in the stripe. */
.paper-zebra .paper-odd .paper-facts[b-ljr6schxcr] {
  background: #fff;
}

.paper .paper-facts dt[b-ljr6schxcr] {
  margin: 0;
  font-size: 0.74em;
  color: var(--paper-grey);
}

.paper-facts dd[b-ljr6schxcr] {
  margin: 0;
  overflow-wrap: anywhere;
}

.paper-num[b-ljr6schxcr] {
  text-align: right !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.paper-sum[b-ljr6schxcr] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr);
  gap: 1em;
  align-items: start;
  margin: 0.5em 0 1em;
}

.paper-sum-side[b-ljr6schxcr] {
  padding: 0.5em 0.6em 0;
}

.paper-totals td[b-ljr6schxcr] {
  padding: 0.24em 0.6em;
}

.paper-totals td:first-child[b-ljr6schxcr] {
  white-space: normal;
}

.paper .paper-total-strong td[b-ljr6schxcr] {
  font-weight: 700;
  border-top: 0.08em solid var(--paper-ink);
  padding-top: 0.45em;
}

.paper .paper-total-highlight td[b-ljr6schxcr] {
  background: var(--paper-accent);
  color: #fff;
  font-weight: 700;
  font-size: 1.16em;
  padding-top: 0.48em;
  padding-bottom: 0.48em;
}

.paper-total-plain:has(+ :is(.paper-total-highlight, .paper-total-strong)) td[b-ljr6schxcr] {
  padding-bottom: 0.55em;
}

.paper-pay[b-ljr6schxcr] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5em;
  background: var(--paper-tint);
  padding: 0.7em 0.8em;
}

.paper-pay-main[b-ljr6schxcr] {
  flex: 1;
  min-width: 0;
}

.paper-code[b-ljr6schxcr] {
  flex: none;
  width: 6.6em;
  height: 6.6em;
}

.paper-closing[b-ljr6schxcr] {
  margin-top: 1.1em !important;
}

.paper-foot[b-ljr6schxcr] {
  margin-top: 3.2em;
  padding-top: 0.75em;
  border-top: 0.08em solid var(--paper-accent);
  font-size: 0.74em;
  line-height: 1.35;
  color: var(--paper-grey);
}

.paper-foot-columns[b-ljr6schxcr] {
  display: grid;
  grid-template-columns: 0.85fr 1.2fr 1.15fr 1.15fr;
  gap: 0 1em;
}

.paper-foot-columns div[b-ljr6schxcr] {
  display: grid;
  align-content: start;
  min-width: 0;
  overflow-wrap: anywhere;
}

.paper .paper-foot :is(span, div)[b-ljr6schxcr] {
  color: var(--paper-grey);
}

.paper .paper-foot strong[b-ljr6schxcr] {
  color: var(--paper-ink);
}

.paper-foot-line[b-ljr6schxcr] {
  display: flex;
  justify-content: space-between;
  gap: 2em;
  margin-top: 0.9em;
}

.paper-foot-line span:last-child[b-ljr6schxcr] {
  white-space: nowrap;
}

@container (max-width: 520px) {
  .paper-parties[b-ljr6schxcr],
  .paper-sum[b-ljr6schxcr] {
    grid-template-columns: 1fr;
  }

  .paper-foot-columns[b-ljr6schxcr] {
    grid-template-columns: 1fr 1fr;
    gap: 0.8em 1em;
  }

  .paper .paper-sender[b-ljr6schxcr] {
    margin-bottom: 1em;
  }

  .paper-pay[b-ljr6schxcr] {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* /Components/Shared/SalesMailComposer.razor.rz.scp.css */
.sales-mail-sender[b-3r9p242ohx] {
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-mail-body[b-3r9p242ohx] {
  min-height: 300px;
  line-height: 1.5;
}

.sales-mail-copy[b-3r9p242ohx] {
  margin-top: 14px;
  font-size: 0.875rem;
}

.sales-mail-setup[b-3r9p242ohx] {
  margin: 14px 0 0;
}

.sales-mail .notice + .mail-compose-line[b-3r9p242ohx],
.sales-mail .notice + .notice[b-3r9p242ohx] {
  margin-top: 12px;
}

/* A document of the vehicle that goes along: the chosen ones read like the fixed PDF chip, with a check. */
.sales-mail .chip-button.is-active[b-3r9p242ohx] {
  background: var(--blue-soft);
  color: var(--blue);
}

@media (max-width: 560px) {
  .sales-mail-body[b-3r9p242ohx] {
    min-height: 220px;
  }
}
/* /Components/Shared/ServiceEntryEditor.razor.rz.scp.css */
.service-fields[b-dj3gk1v9wy] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
  width: 100%;
}

.service-field-wide[b-dj3gk1v9wy] {
  grid-column: 1 / -1;
}

.service-field-wide .chip-check[b-dj3gk1v9wy] {
  margin-top: 6px;
  justify-self: start;
}

@media (max-width: 640px) {
  .service-fields[b-dj3gk1v9wy] {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* /Components/Shared/ServiceHistoryPanel.razor.rz.scp.css */
.service-print[b-fygf0zhfll] {
  float: right;
  font-size: 0.82rem;
  font-weight: 500;
}

.service-facts[b-fygf0zhfll] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0 0 12px;
}

.service-facts dt[b-fygf0zhfll] {
  color: var(--fg-3);
  font-size: 0.78rem;
}

.service-facts dd[b-fygf0zhfll] {
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: var(--fg);
}

.service-facts dd.is-warn[b-fygf0zhfll] {
  color: var(--orange);
}

.service-suggestion[b-fygf0zhfll] {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--bg-2);
}

.service-suggestion-head[b-fygf0zhfll] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.service-reasons[b-fygf0zhfll] {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--fg-2);
  font-size: 0.86rem;
}

.service-rule[b-fygf0zhfll] {
  margin: 0;
  font-size: 0.8rem;
}

.service-warnings[b-fygf0zhfll] {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  color: var(--orange);
}

.service-warnings li[b-fygf0zhfll] {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.service-warnings span[b-fygf0zhfll] {
  color: var(--fg-2);
}

.service-row[b-fygf0zhfll] {
  display: grid;
  /* One column: the row class it shares with documents lays out icon, text and action side by side. */
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: start;
}

.service-row-main[b-fygf0zhfll] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.service-date[b-fygf0zhfll] {
  font-weight: 600;
  color: var(--fg);
}

.service-km[b-fygf0zhfll] {
  color: var(--fg-2);
  font-size: 0.86rem;
}

.service-row-text[b-fygf0zhfll] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.service-row-actions[b-fygf0zhfll] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.service-edit[b-fygf0zhfll],
.service-proposals[b-fygf0zhfll] {
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
}

li.service-edit[b-fygf0zhfll] {
  margin: 0;
}

.service-proposals h4[b-fygf0zhfll] {
  margin: 0;
  font-size: 0.92rem;
}

.service-proposals h4 .muted[b-fygf0zhfll] {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 400;
}

.service-proposal[b-fygf0zhfll] {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--bg-2);
}

.service-proposal.is-off[b-fygf0zhfll] {
  opacity: 0.6;
}

.service-add[b-fygf0zhfll] {
  display: grid;
  gap: 10px;
  justify-items: start;
  margin-top: 12px;
}

.service-add .service-scan[b-fygf0zhfll] {
  width: 100%;
}

.service-disclosure[b-fygf0zhfll],
.service-noscan[b-fygf0zhfll] {
  margin: 10px 0 0;
  font-size: 0.82rem;
}
/* /Components/Shared/SetupCard.razor.rz.scp.css */
/* The setup card: one tile above the dashboard. Collapsed it is a single row; expanded, a numbered list. */
.setup[b-ffayao62z0] {
  margin: 0 0 20px;
  padding: 18px 22px 20px;
}

.setup-head[b-ffayao62z0] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
}

.setup-title[b-ffayao62z0] {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 260px;
}

.setup-title h2[b-ffayao62z0] {
  margin: 0;
  font-size: 1.15rem;
}

.setup-progress[b-ffayao62z0] {
  color: var(--fg-2);
  font-size: 0.9rem;
  white-space: nowrap;
}

.setup-bar[b-ffayao62z0] {
  flex: 1 1 80px;
  max-width: 180px;
  height: 6px;
  border-radius: var(--pill);
  background: var(--tint-10);
  overflow: hidden;
}

.setup-bar span[b-ffayao62z0] {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.setup-head-actions[b-ffayao62z0] {
  display: flex;
  align-items: center;
  gap: 6px;
}

.setup-next[b-ffayao62z0] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.setup-next-text[b-ffayao62z0] {
  flex: 1 1 320px;
  min-width: 0;
  font-size: 0.92rem;
  color: var(--fg-1);
}

.setup-done[b-ffayao62z0] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  color: var(--green);
  font-size: 0.92rem;
}

.setup-steps[b-ffayao62z0] {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.setup-step[b-ffayao62z0] {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.setup-step:last-child[b-ffayao62z0] {
  padding-bottom: 0;
}

.setup-mark[b-ffayao62z0] {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.82rem;
  font-weight: 600;
}

.setup-step.is-done .setup-mark[b-ffayao62z0] {
  background: color-mix(in srgb, var(--green) 16%, transparent);
  color: var(--green);
}

.setup-step-text h3[b-ffayao62z0] {
  margin: 3px 0 2px;
  font-size: 0.98rem;
  color: var(--fg);
}

.setup-step-text p[b-ffayao62z0] {
  margin: 0;
  max-width: 92ch;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--fg-2);
}

.setup-step.is-done .setup-step-text h3[b-ffayao62z0] {
  color: var(--fg-2);
  font-weight: 500;
}

/* A finished step keeps its title and loses its explanation: what is done needs no argument. */
.setup-step.is-done .setup-step-text p[b-ffayao62z0] {
  display: none;
}

.setup-step-text .setup-open[b-ffayao62z0] {
  margin-top: 4px;
  color: var(--orange);
}

.setup-step-action[b-ffayao62z0] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-width: 240px;
  text-align: right;
}

.setup-version[b-ffayao62z0] {
  font-size: 0.78rem;
  line-height: 1.35;
}

.setup-install[b-ffayao62z0] {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--tint-04);
}

.setup-install summary[b-ffayao62z0] {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--blue);
}

.setup-install[open] summary[b-ffayao62z0] {
  margin-bottom: 8px;
}

.setup-install h4[b-ffayao62z0] {
  margin: 10px 0 2px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fg-1);
}

.setup-install ol[b-ffayao62z0] {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--fg-2);
}

.setup-install li + li[b-ffayao62z0] {
  margin-top: 2px;
}

@media (max-width: 700px) {
  .setup[b-ffayao62z0] {
    padding: 16px 16px 18px;
  }

  .setup-bar[b-ffayao62z0] {
    display: none;
  }

  .setup-head-actions[b-ffayao62z0] {
    flex: 1 1 100%;
  }

  .setup-head-actions .btn-icon[b-ffayao62z0] {
    margin-left: auto;
  }

  .setup-step[b-ffayao62z0] {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .setup-step-action[b-ffayao62z0] {
    grid-column: 2;
    align-items: flex-start;
    max-width: none;
    text-align: left;
    margin-top: 6px;
  }

  .setup-next .btn[b-ffayao62z0] {
    width: 100%;
  }
}
/* /Components/Shared/ShowroomVehiclePanel.razor.rz.scp.css */
.showroom-head[b-y14n7ns9vy] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.showroom-panel[b-y14n7ns9vy] {
  display: grid;
  gap: 12px;
}

.showroom-lead[b-y14n7ns9vy] {
  margin: 0;
  font-size: 0.86rem;
}

/* The row of the drawer has no sheet around it: no inner padding, no rule above. */
.showroom-toggle[b-y14n7ns9vy] {
  padding: 0;
  border-top: 0;
}

.showroom-note textarea[b-y14n7ns9vy] {
  width: 100%;
}

.showroom-note-row[b-y14n7ns9vy] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.showroom-link[b-y14n7ns9vy] {
  display: flex;
  gap: 8px;
}

.showroom-link input[b-y14n7ns9vy] {
  flex: 1;
  min-width: 0;
}

.showroom-actions[b-y14n7ns9vy] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.showroom-qr-hint[b-y14n7ns9vy] {
  margin: -4px 0 0;
  font-size: 0.78rem;
}

.showroom-sub[b-y14n7ns9vy] {
  display: block;
  font-size: 0.76rem;
}
/* /Components/Shared/ThemeSwitch.razor.rz.scp.css */
.theme-switch[b-jbo4egmpc5] {
  display: inline-flex;
  padding: 3px;
  border-radius: 11px;
  background: var(--tint-06);
}

.theme-switch button[b-jbo4egmpc5] {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--fg-2);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-base) ease, color var(--dur-base) ease, transform 160ms var(--ease-out);
}

.theme-switch button:active[b-jbo4egmpc5] {
  transform: scale(0.97);
}

.theme-switch button:focus-visible[b-jbo4egmpc5] {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

@media (hover: hover) and (pointer: fine) {
  .theme-switch button:hover[b-jbo4egmpc5] {
    color: var(--fg);
  }
}

/* The chosen one is read from the document, where the theme itself is read from; an unset attribute means "System". */
:root[data-theme="system"] .theme-switch button[data-theme-set="system"][b-jbo4egmpc5],
:root:not([data-theme]) .theme-switch button[data-theme-set="system"][b-jbo4egmpc5],
:root[data-theme="light"] .theme-switch button[data-theme-set="light"][b-jbo4egmpc5],
:root[data-theme="dark"] .theme-switch button[data-theme-set="dark"][b-jbo4egmpc5] {
  background: var(--raised);
  color: var(--fg);
  box-shadow: var(--shadow-sm);
}

.theme-switch.is-compact[b-jbo4egmpc5] {
  display: flex;
}

.theme-switch.is-compact button[b-jbo4egmpc5] {
  min-height: 28px;
  padding: 0;
}

/* The words stay for screen readers. */
.theme-switch.is-compact span[b-jbo4egmpc5] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .theme-switch button[b-jbo4egmpc5] {
    transition: none;
  }
}
/* /Components/Shared/TodoLine.razor.rz.scp.css */
/* Eine Zeile, kein Block: Zahl und Titel je Aufgabe als Kapsel. Die Zahl trägt die Farbe, der Rest bleibt ruhig. */
.todo-line[b-334a8jbg23] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 20px;
  font-size: 0.86rem;
  color: var(--fg-2);
}

.todo-line-label[b-334a8jbg23] {
  color: var(--fg-3);
  font-weight: 500;
}

.todo-line-list[b-334a8jbg23] {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.todo-line-list li[b-334a8jbg23] {
  min-width: 0;
  max-width: 100%;
}

.todo-chip[b-334a8jbg23] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  height: 30px;
  padding: 0 12px 0 4px;
  border-radius: var(--pill);
  background: var(--tint-07);
  color: var(--fg);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
  --tone: var(--fg);
  --tone-soft: var(--tint-10);
}

.todo-chip.is-info[b-334a8jbg23] {
  --tone: var(--blue);
  --tone-soft: var(--blue-soft);
}

.todo-chip.is-good[b-334a8jbg23] {
  --tone: var(--green);
  --tone-soft: color-mix(in srgb, var(--green) 16%, transparent);
}

.todo-chip.is-warn[b-334a8jbg23] {
  --tone: var(--orange);
  --tone-soft: color-mix(in srgb, var(--orange) 16%, transparent);
}

.todo-chip.is-bad[b-334a8jbg23] {
  --tone: var(--red);
  --tone-soft: color-mix(in srgb, var(--red) 16%, transparent);
}

.todo-chip-count[b-334a8jbg23] {
  flex: none;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--pill);
  display: inline-grid;
  place-items: center;
  background: var(--tone-soft);
  color: var(--tone);
  font-size: 0.8rem;
  font-weight: 600;
}

.todo-chip-title[b-334a8jbg23] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.todo-chip:active[b-334a8jbg23] {
  transform: scale(0.98);
}

.todo-chip:focus-visible[b-334a8jbg23],
.todo-line-all:focus-visible[b-334a8jbg23] {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.todo-line-all[b-334a8jbg23] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--pill);
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
}

button.todo-line-all[b-334a8jbg23] {
  cursor: pointer;
}

.todo-line-done[b-334a8jbg23] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.todo-line-done[b-334a8jbg23]  .icon {
  color: var(--green);
}

@media (hover: hover) and (pointer: fine) {
  .todo-chip:hover[b-334a8jbg23] {
    background: var(--tint-12);
    text-decoration: none;
  }

  button.todo-line-all:hover[b-334a8jbg23] {
    text-decoration: underline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .todo-chip[b-334a8jbg23] {
    transition-duration: 1ms;
  }

  .todo-chip:active[b-334a8jbg23] {
    transform: none;
  }
}
/* /Components/Shared/TransportCompare.razor.rz.scp.css */
.transport-compare[b-dzjccpzn69] {
  display: grid;
  gap: 10px;
  padding: 4px 24px 18px;
}

.transport-table[b-dzjccpzn69] {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.transport-table th[b-dzjccpzn69],
.transport-table td[b-dzjccpzn69] {
  padding: 8px 10px 8px 0;
  text-align: left;
  vertical-align: middle;
  font-weight: 400;
}

.transport-table thead th[b-dzjccpzn69] {
  color: var(--fg-3);
  font-size: 0.78rem;
  font-weight: 500;
}

.transport-table .num[b-dzjccpzn69] {
  text-align: right;
  white-space: nowrap;
}

.transport-table tbody th[b-dzjccpzn69] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.transport-table tr.is-chosen .transport-way[b-dzjccpzn69] {
  color: var(--fg);
  font-weight: 600;
}

.transport-way[b-dzjccpzn69] {
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-2);
  font: inherit;
  text-align: left;
}

button.transport-way[b-dzjccpzn69] {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 160ms var(--ease-out);
}

button.transport-way:focus-visible[b-dzjccpzn69] {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

button.transport-way:disabled[b-dzjccpzn69] {
  cursor: default;
}

@media (hover: hover) {
  button.transport-way:not(:disabled):hover[b-dzjccpzn69] {
    text-decoration-color: currentColor;
  }
}

.transport-verdict[b-dzjccpzn69] {
  margin: 0;
  font-size: 0.9rem;
  color: var(--fg);
}

.transport-note[b-dzjccpzn69] {
  margin: 0;
  font-size: 0.8rem;
  color: var(--fg-3);
}

@media print {
  .transport-compare[b-dzjccpzn69] {
    padding: 0;
  }

  .transport-table thead th[b-dzjccpzn69],
  .transport-way[b-dzjccpzn69],
  .transport-verdict[b-dzjccpzn69],
  .transport-note[b-dzjccpzn69] {
    color: #000;
  }
}
/* /Components/Shared/ValueReportView.razor.rz.scp.css */
.value[b-ud4s9vj37i] {
  margin-bottom: 12px;
}

.value-head[b-ud4s9vj37i] {
  flex-wrap: wrap;
  gap: 10px 16px;
}

.value-head > div:first-child[b-ud4s9vj37i] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.value-head-actions[b-ud4s9vj37i] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.value-grid[b-ud4s9vj37i] {
  margin: 0;
  padding: 4px 24px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px 24px;
}

.value-grid > div[b-ud4s9vj37i] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.value-grid dt[b-ud4s9vj37i] {
  font-size: 0.8rem;
  color: var(--fg-2);
}

.value-grid dd[b-ud4s9vj37i] {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--fg);
}

.value-grid dd.is-green[b-ud4s9vj37i] {
  color: var(--green);
}

.value-grid dd.is-red[b-ud4s9vj37i] {
  color: var(--red);
}

.value-grid .muted[b-ud4s9vj37i] {
  font-size: 0.76rem;
  line-height: 1.4;
}

.value-note[b-ud4s9vj37i] {
  margin: 0;
  padding: 0 24px 20px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--fg-2);
}

.value-note strong[b-ud4s9vj37i] {
  color: var(--fg-1);
}

/* An empty period: one sentence and the next steps, instead of a grid of zeros. */
.value-empty[b-ud4s9vj37i] {
  padding: 4px 24px 22px;
}

.value-empty p[b-ud4s9vj37i] {
  margin: 0 0 14px;
  max-width: 70ch;
  color: var(--fg-2);
  font-size: 0.92rem;
}

.value-empty[b-ud4s9vj37i]  .empty-actions {
  justify-content: flex-start;
}
/* /Components/Shared/VehicleHistoryPanel.razor.rz.scp.css */
.hist-head[b-9neahjzbw7] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hist[b-9neahjzbw7] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hist-block[b-9neahjzbw7] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: var(--tint-04);
  box-shadow: inset 0 0 0 1px var(--hairline);
  opacity: 1;
  transform: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);

  @starting-style {
    opacity: 0;
    transform: translateY(6px);
  }
}

.hist-label[b-9neahjzbw7] {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.hist-related[b-9neahjzbw7] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hist-related li[b-9neahjzbw7] {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
}

.hist-related-text[b-9neahjzbw7] {
  flex: 1;
  min-width: 0;
  color: var(--fg-1);
}

.hist-related-link[b-9neahjzbw7] {
  color: var(--fg-3);
  display: inline-flex;
}

.hist-vin[b-9neahjzbw7] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.hist-vin[b-9neahjzbw7]  .field {
  margin: 0;
}

.hist-vin[b-9neahjzbw7]  .btn {
  height: 40px;
  white-space: nowrap;
}

.hist-vin[b-9neahjzbw7]  .btn .muted {
  font-weight: 400;
}

.hist-spin[b-9neahjzbw7] {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--tint-14);
  border-top-color: var(--blue);
  animation: hist-spin-b-9neahjzbw7 800ms linear infinite;
}

@keyframes hist-spin-b-9neahjzbw7 {
  to {
    transform: rotate(360deg);
  }
}

.hist-notice[b-9neahjzbw7] {
  margin: 0;
}

.hist-vehicle[b-9neahjzbw7] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hist-vehicle .muted[b-9neahjzbw7] {
  font-size: 0.82rem;
}

.hist-cats[b-9neahjzbw7] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 6px;
}

.hist-cat[b-9neahjzbw7] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--tint-04);
  color: var(--fg-3);
}

.hist-cat.is-found[b-9neahjzbw7] {
  color: var(--fg-1);
  background: var(--tint-07);
}

.hist-cat.is-warning[b-9neahjzbw7] {
  color: var(--orange);
  background: color-mix(in srgb, var(--orange) 12%, transparent);
}

.hist-cat-count[b-9neahjzbw7] {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
}

.hist-cat-label[b-9neahjzbw7] {
  font-size: 0.72rem;
}

.hist-warnings[b-9neahjzbw7] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hist-warnings li[b-9neahjzbw7] {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--orange);
}

.hist-warnings[b-9neahjzbw7]  .icon {
  flex: none;
  margin-top: 2px;
}

.hist-cta[b-9neahjzbw7] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hist-cta[b-9neahjzbw7]  .btn-primary {
  align-self: flex-start;
}

.hist-price[b-9neahjzbw7] {
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid var(--tint-35);
  font-weight: 500;
}

.hist-confirm-text[b-9neahjzbw7] {
  font-size: 0.86rem;
  color: var(--fg-1);
}

.hist-confirm-actions[b-9neahjzbw7] {
  display: flex;
  gap: 8px;
}

.hist-meta[b-9neahjzbw7] {
  font-size: 0.76rem;
}

.hist-risk[b-9neahjzbw7] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hist-risk-head[b-9neahjzbw7] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.hist-risk-bar[b-9neahjzbw7] {
  height: 6px;
  border-radius: 3px;
  background: var(--tint-08);
  overflow: hidden;
}

.hist-risk-bar span[b-9neahjzbw7] {
  display: block;
  height: 100%;
  transform-origin: 0 50%;
  border-radius: 3px;
  background: var(--green);
  transition: transform 420ms var(--ease-out);

  @starting-style {
    transform: scaleX(0);
  }
}

.hist-risk-bar span.is-orange[b-9neahjzbw7] {
  background: var(--orange);
}

.hist-risk-bar span.is-red[b-9neahjzbw7] {
  background: var(--red);
}

.hist-facts[b-9neahjzbw7] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px 12px;
}

.hist-facts > div[b-9neahjzbw7] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hist-facts strong[b-9neahjzbw7] {
  font-size: 0.95rem;
}

.is-orange[b-9neahjzbw7] {
  color: var(--orange);
}

.hist-damages[b-9neahjzbw7],
.hist-timeline[b-9neahjzbw7] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hist-damages li[b-9neahjzbw7] {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--red) 8%, transparent);
  border-left: 3px solid var(--red);
}

.hist-damages li.sev-minor[b-9neahjzbw7] {
  background: color-mix(in srgb, var(--orange) 8%, transparent);
  border-left-color: var(--orange);
}

.hist-damage-date[b-9neahjzbw7] {
  font-size: 0.78rem;
  color: var(--fg-3);
  padding-top: 2px;
}

.hist-damage-main[b-9neahjzbw7] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.86rem;
}

.hist-damage-main .muted[b-9neahjzbw7] {
  font-size: 0.78rem;
}

.hist-timeline[b-9neahjzbw7] {
  position: relative;
  padding-left: 18px;
}

.hist-timeline[b-9neahjzbw7]::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--tint-08);
}

.hist-timeline li[b-9neahjzbw7] {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  font-size: 0.84rem;
}

.hist-dot[b-9neahjzbw7] {
  position: absolute;
  left: -16px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fg-3);
}

.hist-timeline li.kind-registration .hist-dot[b-9neahjzbw7],
.hist-timeline li.kind-inspection .hist-dot[b-9neahjzbw7] {
  background: var(--blue);
}

.hist-timeline li.kind-ownerchange .hist-dot[b-9neahjzbw7],
.hist-timeline li.kind-listing .hist-dot[b-9neahjzbw7] {
  background: var(--fg-2);
}

.hist-timeline li.kind-import .hist-dot[b-9neahjzbw7],
.hist-timeline li.kind-recall .hist-dot[b-9neahjzbw7] {
  background: var(--orange);
}

.hist-timeline li.kind-theft .hist-dot[b-9neahjzbw7] {
  background: var(--red);
}

.hist-time-date[b-9neahjzbw7] {
  color: var(--fg-3);
  font-size: 0.78rem;
  padding-top: 1px;
}

.hist-time-main .muted[b-9neahjzbw7] {
  font-size: 0.8rem;
}

.hist-photos[b-9neahjzbw7] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.hist-photos img[b-9neahjzbw7] {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-2);
}

.hist-foot[b-9neahjzbw7] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .hist-block[b-9neahjzbw7],
  .hist-risk-bar span[b-9neahjzbw7] {
    transition-duration: 1ms;
  }

  .hist-spin[b-9neahjzbw7] {
    animation-duration: 2s;
  }
}
/* /Components/Shared/WizardServiceHistory.razor.rz.scp.css */
.wizard-service[b-d2kvexmuin] {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.wizard-service-facts[b-d2kvexmuin] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 0;
}

.wizard-service-facts dt[b-d2kvexmuin] {
  color: var(--fg-3);
  font-size: 0.78rem;
}

.wizard-service-facts dd[b-d2kvexmuin] {
  margin: 2px 0 0;
  font-size: 0.9rem;
}

.wizard-service-line[b-d2kvexmuin] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.86rem;
}

.wizard-service-list[b-d2kvexmuin] {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wizard-service-list li[b-d2kvexmuin] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 0.86rem;
}

@media (max-width: 640px) {
  .wizard-service-facts[b-d2kvexmuin] {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* /Components/Shared/Wordmark.razor.rz.scp.css */
.wordmark[b-gjr53b8tkj] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.wordmark:hover[b-gjr53b8tkj] {
  text-decoration: none;
}

.wordmark-mark[b-gjr53b8tkj] {
  flex: none;
}

.wordmark-suffix[b-gjr53b8tkj] {
  color: var(--fg-3);
  font-weight: 400;
  margin-left: 2px;
}