/* BOB Büro landing page (ADR-0022). Loaded after the shared marketing CSS. The Büro page has no
   3D scenes and no product screenshots yet: the screens below are drawn in HTML from the tokens,
   with the Büro wording, so they follow light/dark and never show Baustelle data.
   Breakpoints are the token values (30/40/48/64em). This file loads before the bundled CSS, so
   rules that override it carry an extra `html`. */

html:root {
  /* Base marketing uses onPrimary as the "dark stripe" (phone frames); Büro's onPrimary is white. */
  --m-stripe-dark: var(--bob-color-border-strong);
  /* Accent text on the ink field: petrol is too dark on slate, so light mode uses onAccent. */
  --b-ink-accent: var(--bob-color-on-accent);
}
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]) {
    --m-stripe-dark: var(--bob-color-surface-sunken);
    --b-ink-accent: var(--bob-color-primary);
  }
}
html .step__time time,
html .section-time time,
html .hero__clock-time,
html .queue__item time,
html .logo--footer {
  color: var(--b-ink-accent);
}
html .evening .section-time time {
  color: var(--bob-color-on-primary);
}
html .closing .btn--primary {
  background: var(--bob-color-surface);
  border-color: var(--bob-color-surface);
  color: var(--bob-color-text);
}
html .closing .btn--primary:hover {
  background: var(--bob-color-surface-sunken);
}
html .closing :focus-visible {
  outline-color: var(--bob-color-surface);
}

/* No hazard tape in the office: a calm rule instead. */
.b-rule {
  height: 6px;
  background: var(--bob-color-primary);
}
.b-rule--ink {
  background: var(--m-ink);
}

/* Logo: BOB with a solid underline, "Büro" next to it. */
.logo .logo__edition {
  fill: var(--bob-color-primary);
}
.logo--footer .logo__edition {
  fill: currentColor;
}
html .btn--primary {
  border-color: transparent;
}

/* ---------- hero visual (static) ---------- */

.b-hero .hero__clock {
  display: grid;
}
.b-hero__visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 40px);
  padding: var(--bob-space-xl) var(--m-gutter) clamp(72px, 12vw, 96px);
}
.b-hero__visual .phone {
  width: clamp(150px, 34vw, 280px);
  transform: rotate(-3deg);
}
.b-hero__card {
  width: clamp(150px, 34vw, 300px);
  padding: var(--bob-space-lg);
  border-radius: var(--bob-radius-lg);
  background: var(--bob-color-surface);
  border: var(--bob-size-border-width) solid var(--bob-color-border);
  box-shadow: var(--bob-elevation-raised);
  transform: rotate(2deg) translateY(24px);
  font-size: clamp(0.75rem, 0.6rem + 0.6vw, 1rem);
}
@media (min-width: 64em) {
  .b-hero__visual {
    left: auto;
    width: 58%;
    padding-bottom: var(--bob-space-xxl);
  }
}

/* ---------- drawn screens ---------- */

.phone,
.browser,
.laptop-frame {
  container-type: inline-size;
}
.b-screen {
  aspect-ratio: 720 / 1600;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  padding: 1.4em 1em 1em;
  border-radius: 26px;
  background: var(--bob-color-bg);
  color: var(--bob-color-text);
  font-family: var(--bob-font-body);
  font-size: 5.6cqi;
  line-height: 1.3;
  text-align: left;
}
.phone--short .b-screen {
  aspect-ratio: 720 / 1558;
}
.b-screen__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--bob-font-display);
  font-weight: 800;
  font-size: 1.6em;
  line-height: 1.1;
}
.b-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.65em;
  border-radius: var(--bob-radius-pill);
  border: var(--bob-size-border-width) solid var(--bob-color-border);
  background: var(--bob-color-surface);
  color: var(--bob-color-text);
  font-family: var(--bob-font-body);
  font-size: max(0.55em, 9px);
  font-weight: 600;
  white-space: nowrap;
}
.b-screen__top .b-chip {
  font-size: 0.45em;
}
.b-chip--ok::before,
.b-chip--work::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--bob-color-success);
}
.b-chip--on {
  background: var(--bob-color-primary);
  border-color: var(--bob-color-primary);
  color: var(--bob-color-on-primary);
}
.b-state {
  padding: 0.8em;
  border-radius: var(--bob-radius-md);
  background: var(--bob-color-primary);
  color: var(--bob-color-on-primary);
}
.b-state__label {
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.b-state__time {
  display: block;
  font-family: var(--bob-font-display);
  font-weight: 800;
  font-size: 2.6em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.b-state__job {
  font-weight: 600;
}
.b-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4em;
}
.b-actions span {
  display: grid;
  place-items: center;
  min-height: 2.6em;
  border-radius: var(--bob-radius-sm);
  border: var(--bob-size-border-width-strong) solid var(--bob-color-border-strong);
  background: var(--bob-color-surface);
  font-weight: 700;
  font-size: 0.8em;
}
.b-label {
  margin-top: 0.3em;
  font-family: var(--bob-font-display);
  font-weight: 700;
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bob-color-text-muted);
}
.b-item {
  display: grid;
  gap: 0.15em;
  padding: 0.65em 0.8em;
  border-radius: var(--bob-radius-md);
  background: var(--bob-color-surface);
  border: var(--bob-size-border-width) solid var(--bob-color-border);
}
.b-item--active {
  border-left: 0.3em solid var(--bob-color-primary);
}
.b-item strong {
  font-weight: 700;
}
.b-item small,
.b-muted {
  color: var(--bob-color-text-muted);
  font-size: 0.8em;
}
.b-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5em;
}
.b-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
}
.b-chips .b-chip {
  font-size: 0.75em;
}
.b-photo {
  flex: 1;
  min-height: 0;
  border-radius: var(--bob-radius-md);
  background: var(--bob-color-surface);
  border: var(--bob-size-border-width) solid var(--bob-color-border);
  color: var(--bob-color-text-muted);
  overflow: hidden;
}
.b-photo svg {
  width: 100%;
  height: 100%;
  display: block;
}
.b-mark {
  stroke: var(--bob-color-danger);
}
.b-accent {
  stroke: var(--bob-color-primary);
}
.b-mic {
  align-self: center;
  display: grid;
  place-items: center;
  width: 5.5em;
  height: 5.5em;
  margin-block: 0.6em;
  border-radius: 50%;
  background: var(--bob-color-primary);
  color: var(--bob-color-on-primary);
  font-weight: 700;
  font-size: 0.8em;
  text-align: center;
  line-height: 1.15;
}
.b-sig {
  flex: 1;
  min-height: 6em;
  border-radius: var(--bob-radius-md);
  border: var(--bob-size-border-width-strong) dashed var(--bob-color-border);
  background: var(--bob-color-surface);
  color: var(--bob-color-text);
}
.b-sig svg {
  width: 100%;
  height: 100%;
  display: block;
}
.b-done {
  display: grid;
  place-items: center;
  width: 3.2em;
  height: 3.2em;
  margin: 1.5em auto 0.4em;
  border-radius: 50%;
  background: var(--bob-color-success-bg);
  color: var(--bob-color-success);
  font-weight: 800;
  font-size: 1.4em;
}
.b-center {
  text-align: center;
}
.b-big {
  font-family: var(--bob-font-display);
  font-weight: 800;
  font-size: 1.5em;
  line-height: 1.1;
}
.b-bar {
  height: 0.55em;
  border-radius: var(--bob-radius-pill);
  background: var(--bob-color-surface-sunken);
  overflow: hidden;
}
.b-bar i {
  display: block;
  height: 100%;
  background: var(--bob-color-primary);
}
.b-bar--amber i {
  background: var(--bob-color-warning);
}
.b-bar--red i {
  background: var(--bob-color-danger);
}
.b-btn {
  display: grid;
  place-items: center;
  min-height: 2.6em;
  margin-top: auto;
  border-radius: var(--bob-radius-sm);
  background: var(--bob-color-primary);
  color: var(--bob-color-on-primary);
  font-weight: 700;
}
.b-grid4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4em;
}
.b-grid4 span {
  display: grid;
  place-items: center;
  min-height: 3em;
  border-radius: var(--bob-radius-sm);
  border: var(--bob-size-border-width-strong) solid var(--bob-color-border-strong);
  background: var(--bob-color-surface);
  font-weight: 700;
}
.b-grid4 span:first-child {
  background: var(--bob-color-primary);
  border-color: var(--bob-color-primary);
  color: var(--bob-color-on-primary);
}

/* Desktop (dashboard) screens inside .laptop-frame / .browser. */
.b-desk {
  aspect-ratio: 1440 / 900;
  display: grid;
  grid-template-columns: 17% 1fr;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bob-color-bg);
  color: var(--bob-color-text);
  font-family: var(--bob-font-body);
  font-size: 1.45cqi;
  line-height: 1.3;
  text-align: left;
}
.browser .b-desk {
  border-radius: 11px;
  font-size: 1.7cqi;
}
.b-desk__nav {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 1.4em 1em;
  background: var(--bob-color-surface);
  border-right: var(--bob-size-border-width) solid var(--bob-color-border);
}
.b-desk__nav b {
  font-family: var(--bob-font-display);
  font-weight: 800;
  font-size: 1.6em;
  margin-bottom: 0.6em;
}
.b-desk__nav span {
  padding: 0.35em 0.6em;
  border-radius: var(--bob-radius-sm);
  color: var(--bob-color-text-muted);
}
.b-desk__nav span.is-on {
  background: var(--bob-color-surface-sunken);
  color: var(--bob-color-text);
  font-weight: 700;
  border-left: 0.25em solid var(--bob-color-primary);
}
.b-desk__main {
  display: grid;
  align-content: start;
  gap: 1em;
  padding: 1.4em 1.6em;
  min-width: 0;
}
.b-desk__title {
  font-family: var(--bob-font-display);
  font-weight: 800;
  font-size: 2.1em;
  line-height: 1.1;
}
.b-desk__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1em;
}
.b-card {
  display: grid;
  align-content: start;
  gap: 0.55em;
  padding: 1em 1.1em;
  border-radius: var(--bob-radius-md);
  background: var(--bob-color-surface);
  border: var(--bob-size-border-width) solid var(--bob-color-border);
  min-width: 0;
}
.b-card h4 {
  font-family: var(--bob-font-display);
  font-weight: 700;
  font-size: 1.15em;
}
.b-card--money {
  background: var(--bob-color-primary);
  border-color: var(--bob-color-primary);
  color: var(--bob-color-on-primary);
}
.b-card--money .b-big {
  font-size: 2.4em;
}
.b-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5em;
}
.b-thumbs span {
  aspect-ratio: 4 / 3;
  border-radius: var(--bob-radius-sm);
  background: var(--bob-color-surface-sunken);
  border: var(--bob-size-border-width) solid var(--bob-color-border);
}
.b-thumbs span:nth-child(2n) {
  background: color-mix(in srgb, var(--bob-color-primary) 18%, var(--bob-color-surface));
}

/* Bar fills (no inline styles: the site's CSP allows style-src 'self' only). */
.b-w69 {
  width: 69%;
}
.b-w78 {
  width: 78%;
}
.b-w92 {
  width: 92%;
}
.b-w94 {
  width: 94%;
}
.b-w98 {
  width: 98%;
}
.b-w100 {
  width: 100%;
}
.b-gap {
  margin-top: 0.8em;
}
.b-actions--2 {
  grid-template-columns: 1fr 1fr;
}

/* The evening section colours its own text for the ink field; the drawn screens keep theirs. */
html .evening .b-desk p,
html .evening .b-screen p,
html .evening .b-desk h4,
html .evening .b-screen h4 {
  color: inherit;
}
html .evening .b-desk .b-muted,
html .evening .b-screen .b-muted,
html .evening .b-screen .b-label {
  color: var(--bob-color-text-muted);
}

/* =====================================================================================
   Dokumente, Sicherheit, Team-App, Erste Schritte.
   Facts: docs/adr/0023-document-store-encryption.md, docs/product/EDITION-BUERO.md §8.
   Motion: src/buero/demos.ts adds .is-replay / .is-saved / .is-done …; without those classes
   (no JS, reduced motion) every demo shows its final state.
   ===================================================================================== */

.d-ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html .topnav__extra {
  display: none;
}
@media (min-width: 72em) {
  html .topnav__extra {
    display: list-item;
  }
}

/* ---------- hero: the offer being edited ---------- */

.d-desk {
  container-type: inline-size;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.d-window {
  position: relative;
  width: min(94%, 680px);
  margin-inline: auto;
  border-radius: var(--bob-radius-lg);
  background: var(--bob-color-surface);
  border: var(--bob-size-border-width) solid var(--bob-color-border);
  box-shadow: var(--bob-elevation-overlay);
  overflow: hidden;
  font-family: var(--bob-font-body);
  font-size: clamp(8px, 2.15cqi, 14.5px);
  line-height: 1.35;
  text-align: left;
  transform: rotate(-1.2deg);
}
.d-window__bar {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.75em 1em;
  border-bottom: var(--bob-size-border-width) solid var(--bob-color-border);
}
.d-window__file {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-width: 0;
  font-family: var(--bob-font-display);
  font-weight: 700;
  font-size: 1.15em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.d-window__file .d-ico {
  color: var(--bob-color-primary);
}
.d-window__max {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: var(--bob-radius-sm);
  border: var(--bob-size-border-width) solid var(--bob-color-border);
  color: var(--bob-color-text-muted);
}
.d-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.2em 0.75em;
  border-radius: var(--bob-radius-pill);
  background: var(--bob-color-success-bg);
  color: var(--bob-color-success);
  font-weight: 700;
  font-size: 0.85em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition:
    background-color var(--bob-motion-base) var(--bob-motion-easing),
    color var(--bob-motion-base) var(--bob-motion-easing);
}
.d-status::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: currentColor;
}
.is-replay:not(.is-saved) .d-status {
  background: var(--bob-color-surface-sunken);
  color: var(--bob-color-text-muted);
}
.d-status.is-saving::before {
  animation: d-pulse 0.6s var(--bob-motion-easing) infinite alternate;
}
@keyframes d-pulse {
  to {
    transform: scale(0.4);
    opacity: 0.4;
  }
}
.d-tools {
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.5em 1em;
  border-bottom: var(--bob-size-border-width) solid var(--bob-color-border);
  color: var(--bob-color-text-muted);
}
.d-tool {
  display: inline-grid;
  place-items: center;
  min-width: 1.9em;
  height: 1.9em;
  padding-inline: 0.3em;
  border-radius: var(--bob-radius-sm);
  font-weight: 700;
}
.d-tool--i {
  font-style: italic;
}
.d-tool--u {
  text-decoration: underline;
}
.d-tool--wide {
  padding-inline: 0.7em;
  border: var(--bob-size-border-width) solid var(--bob-color-border);
  font-weight: 600;
}
.d-tool--sep {
  min-width: 0;
  width: 1px;
  padding: 0;
  margin-inline: 0.3em;
  background: var(--bob-color-border);
}
.d-paper {
  padding: 1.4em 1.6em 1.8em;
  background: var(--bob-color-surface-sunken);
}
.d-sheet {
  display: grid;
  gap: 0.75em;
  max-width: 34em;
  margin-inline: auto;
  padding: 1.8em 2em 2.2em;
  border-radius: 3px;
  background: var(--bob-color-surface);
  box-shadow: var(--bob-elevation-card);
}
.d-sheet__meta {
  font-size: 0.8em;
  font-weight: 600;
  color: var(--bob-color-text-muted);
}
.d-sheet__title {
  font-family: var(--bob-font-display);
  font-weight: 800;
  font-size: 1.9em;
  line-height: 1.05;
}
.d-sheet__p {
  font-size: 0.95em;
}
.d-typing {
  display: grid;
}
.d-typing::before,
.d-typing__live {
  grid-area: 1 / 1;
}
.d-typing::before {
  content: attr(data-full);
  visibility: hidden;
}
.d-typing__live [data-doc-type] {
  border-radius: 2px;
  background: color-mix(in srgb, var(--bob-color-primary) 14%, transparent);
  box-decoration-break: clone;
}
.d-caret {
  display: none;
  width: 2px;
  height: 1.15em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: var(--bob-color-primary);
}
.is-replay:not(.is-saved) .d-caret {
  display: inline-block;
  animation: d-blink 1s steps(1) infinite;
}
@keyframes d-blink {
  50% {
    opacity: 0;
  }
}
.d-sheet__table {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35em 1em;
  padding-block: 0.6em;
  border-block: var(--bob-size-border-width) solid var(--bob-color-border);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
}
.d-sheet__table span:nth-child(2n) {
  font-weight: 700;
  text-align: right;
}
.d-sheet__line {
  display: block;
  height: 0.5em;
  border-radius: var(--bob-radius-pill);
  background: var(--bob-color-surface-sunken);
}
.d-sheet__line--90 {
  width: 90%;
}
.d-sheet__line--70 {
  width: 70%;
}

/* The version stack, pinned to the window's lower right. */
.d-versions {
  position: absolute;
  right: 3%;
  bottom: 7%;
  width: min(54%, 300px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--bob-font-body);
  font-size: clamp(8px, 1.95cqi, 13.5px);
  line-height: 1.25;
  text-align: left;
  transform: rotate(1.8deg);
}
.d-version {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.6em;
  margin-bottom: 0.4em;
  padding: 0.6em 0.8em;
  border-radius: var(--bob-radius-md);
  background: var(--bob-color-surface);
  border: var(--bob-size-border-width) solid var(--bob-color-border);
  box-shadow: var(--bob-elevation-raised);
  max-height: 4em;
  transition:
    max-height var(--bob-motion-slow) var(--bob-motion-easing),
    opacity var(--bob-motion-slow) var(--bob-motion-easing),
    transform var(--bob-motion-slow) var(--bob-motion-easing),
    margin var(--bob-motion-slow) var(--bob-motion-easing),
    padding var(--bob-motion-slow) var(--bob-motion-easing);
}
.d-version strong {
  font-family: var(--bob-font-display);
  font-weight: 800;
  font-size: 1.1em;
  white-space: nowrap;
}
.d-version span {
  color: var(--bob-color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.d-version--new {
  border-left: 0.3em solid var(--bob-color-primary);
}
.d-version__now {
  padding: 0.1em 0.6em;
  border-radius: var(--bob-radius-pill);
  background: var(--bob-color-primary);
  color: var(--bob-color-on-primary);
  font-style: normal;
  font-weight: 700;
  font-size: 0.85em;
}
.d-version__now--prev {
  display: none;
}
.d-version--locked {
  grid-template-columns: auto auto minmax(0, 1fr);
  background: var(--bob-color-surface-sunken);
  box-shadow: none;
}
.d-version--locked .d-ico {
  color: var(--bob-color-primary);
}
.d-version--locked span {
  color: var(--bob-color-text);
  font-weight: 600;
}
/* Replay: version 8 is not there yet, version 7 is the current one. */
.is-replay:not(.is-saved) .d-version--new {
  max-height: 0;
  margin-bottom: 0;
  padding-block: 0;
  border-width: 0 0 0 0.3em;
  opacity: 0;
  transform: translateY(-0.8em) scale(0.94);
  overflow: hidden;
}
.is-replay:not(.is-saved) .d-version__now--prev {
  display: inline;
}

@media (min-width: 64em) {
  .d-desk {
    padding-inline: var(--bob-space-xl)
      max(var(--m-gutter), calc((100vw - var(--bob-size-content-max-width)) / 2));
  }
  .d-window {
    width: min(100%, 600px);
    margin-right: 0;
  }
  .d-versions {
    right: calc(max(var(--m-gutter), calc((100vw - var(--bob-size-content-max-width)) / 2)) - 32px);
    bottom: 13%;
    width: min(42%, 310px);
  }
}

/* ---------- section: Dokumente ---------- */

.d-docs {
  padding-block: var(--m-section-y);
}
.d-formats {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--bob-space-xxl) var(--bob-space-xl);
}
@media (min-width: 48em) {
  .d-formats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.d-format__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 8% 12% 0;
  overflow: hidden;
  border-radius: var(--bob-radius-lg);
  background: var(--bob-color-surface-sunken);
  container-type: inline-size;
}
.d-format__media::after {
  position: absolute;
  top: var(--bob-space-md);
  right: var(--bob-space-md);
  padding: 2px 10px;
  border-radius: var(--bob-radius-pill);
  background: var(--m-ink);
  color: var(--b-ink-accent);
  font-family: var(--bob-font-display);
  font-weight: 700;
  font-size: 0.9rem;
}
.d-formats li:nth-child(1) .d-format__media::after {
  content: ".docx";
}
.d-formats li:nth-child(2) .d-format__media::after {
  content: ".xlsx";
}
.d-formats li:nth-child(3) .d-format__media::after {
  content: ".pdf";
}
.d-mini {
  align-self: end;
  width: 100%;
  height: 92%;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  padding: 1.4em 1.4em 0;
  border-radius: var(--bob-radius-md) var(--bob-radius-md) 0 0;
  background: var(--bob-color-surface);
  border: var(--bob-size-border-width) solid var(--bob-color-border);
  border-bottom: 0;
  box-shadow: var(--bob-elevation-raised);
  font-size: 4.4cqi;
  line-height: 1.25;
  text-align: left;
}
.d-mini__h {
  font-family: var(--bob-font-display);
  font-weight: 800;
  font-size: 1.35em;
  line-height: 1.05;
}
.d-mini__l {
  display: block;
  flex: none;
  height: 0.55em;
  border-radius: var(--bob-radius-pill);
  background: var(--bob-color-surface-sunken);
}
.d-mini__l--100 {
  width: 100%;
}
.d-mini__l--92 {
  width: 92%;
}
.d-mini__l--85 {
  width: 85%;
}
.d-mini__l--70 {
  width: 70%;
}
.d-mini__l--60 {
  width: 60%;
}
.d-mini__l--50 {
  width: 50%;
}
.d-mini__bullet {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.d-mini__bullet i {
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--bob-color-primary);
}
.d-mini__edit {
  align-self: start;
  padding: 0.15em 0.4em;
  margin-left: -0.4em;
  border-radius: 3px;
  outline: 2px solid var(--bob-color-primary);
  font-weight: 600;
}
.d-mini__edit .d-caret {
  display: inline-block;
}
.d-mini__page {
  margin-top: auto;
  padding-bottom: 0.8em;
  font-size: 0.8em;
  color: var(--bob-color-text-muted);
}
.d-mini--grid {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 1fr;
  align-content: start;
  gap: 0;
  padding: 0;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.d-cell {
  padding: 0.55em 0.6em;
  border-right: var(--bob-size-border-width) solid var(--bob-color-border);
  border-bottom: var(--bob-size-border-width) solid var(--bob-color-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.d-cell:nth-child(3n) {
  border-right: 0;
}
.d-cell--head {
  background: var(--bob-color-surface-sunken);
  font-weight: 700;
  color: var(--bob-color-text-muted);
}
.d-cell--num {
  text-align: right;
}
.d-cell--focus {
  outline: 2px solid var(--bob-color-primary);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--bob-color-primary) 12%, var(--bob-color-surface));
}
.d-cell--sum {
  font-weight: 800;
  border-bottom: 0;
}
.d-format__title {
  margin-top: var(--bob-space-xl);
  font-family: var(--bob-font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.05;
}
.d-format p {
  margin-top: var(--bob-space-sm);
  line-height: 1.55;
  max-width: 40ch;
}

.d-versionfacts {
  display: grid;
  gap: var(--bob-space-xxl);
  margin-block: clamp(72px, 10vw, 136px);
}
@media (min-width: 56em) {
  .d-versionfacts {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
    gap: clamp(40px, 6vw, 96px);
  }
}
.d-dl {
  margin: 0;
  display: grid;
  gap: var(--bob-space-xl) var(--bob-space-xxl);
}
@media (min-width: 40em) {
  .d-dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.d-dl > div {
  padding-top: var(--bob-space-lg);
  border-top: 4px solid var(--bob-color-primary);
}
.d-dl dt {
  font-family: var(--bob-font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
}
.d-dl dd {
  margin: var(--bob-space-sm) 0 0;
  line-height: 1.55;
}

/* Folder import: the ink panel, like the offline queue. */
.d-import {
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  padding: var(--bob-space-xl);
  border-radius: var(--bob-radius-lg);
  background: var(--m-ink);
  color: var(--m-on-ink);
  box-shadow: var(--bob-elevation-overlay);
}
.d-import__drop {
  display: flex;
  align-items: center;
  gap: var(--bob-space-md);
  padding: var(--bob-space-md) var(--bob-space-lg);
  border: 2px dashed var(--b-ink-accent);
  border-radius: var(--bob-radius-md);
  color: var(--m-on-ink-muted);
}
.d-import__drop strong {
  color: var(--m-on-ink);
}
.d-import__folder {
  width: 40px;
  height: 34px;
  flex: none;
  fill: color-mix(in srgb, var(--b-ink-accent) 22%, transparent);
  stroke: var(--b-ink-accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.d-import.is-running .d-import__folder {
  animation: d-drop 0.5s var(--bob-motion-easing);
}
@keyframes d-drop {
  from {
    transform: translateY(-10px) scale(1.08);
  }
}
.d-import__list {
  margin: var(--bob-space-md) 0 0;
  padding: 0;
  list-style: none;
}
.d-file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name state" "bar bar";
  align-items: center;
  column-gap: var(--bob-space-md);
  row-gap: 6px;
  padding-block: 10px;
  border-bottom: var(--bob-size-border-width) solid var(--m-ink-line);
  transition:
    opacity var(--bob-motion-base) var(--bob-motion-easing),
    transform var(--bob-motion-base) var(--bob-motion-easing);
}
.d-file__name {
  grid-area: name;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.d-file__bar {
  grid-area: bar;
  height: 3px;
  border-radius: var(--bob-radius-pill);
  background: var(--m-ink-line);
  overflow: hidden;
}
.d-file__bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--b-ink-accent);
  transform-origin: left;
  transition: transform 320ms var(--bob-motion-easing);
}
.d-file__state {
  grid-area: state;
  padding: 2px 10px;
  border-radius: var(--bob-radius-pill);
  background: var(--m-ink-line);
  color: var(--m-on-ink);
  font-size: var(--bob-type-caption-size);
  font-weight: 600;
  white-space: nowrap;
  transition: opacity var(--bob-motion-base) var(--bob-motion-easing);
}
.d-file__state--ok {
  background: var(--bob-color-success-bg);
  color: var(--bob-color-success);
}
.d-file__state--dup {
  background: var(--bob-color-info-bg);
  color: var(--bob-color-info);
}
.d-import__sum {
  margin-top: var(--bob-space-lg);
  font-family: var(--bob-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  transition: opacity var(--bob-motion-slow) var(--bob-motion-easing);
}
.d-import.is-replay .d-file {
  opacity: 0.35;
  transform: translate(-12px, -8px);
}
.d-import.is-replay .d-file__bar i {
  transform: scaleX(0);
}
.d-import.is-replay .d-file__state,
.d-import.is-replay .d-import__sum {
  opacity: 0;
}
.d-import.is-replay .d-file.is-done {
  opacity: 1;
  transform: none;
}
.d-import.is-replay .d-file.is-done .d-file__bar i {
  transform: none;
}
.d-import.is-replay .d-file.is-done .d-file__state,
.d-import.is-replay.is-complete .d-import__sum {
  opacity: 1;
}
@media (min-width: 56em) {
  .d-import-pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ---------- section: Sicherheit (ink field) ---------- */

.d-sec {
  padding-block: var(--m-section-y);
  background: var(--m-ink);
  color: var(--m-on-ink);
}
html .d-sec .section-lede,
html .d-sec p {
  color: var(--m-on-ink-muted);
}
.d-seal {
  margin: 0 0 clamp(64px, 9vw, 120px);
}
.d-seal__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--bob-space-xxl);
}
@media (min-width: 56em) {
  .d-seal__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 56px;
  }
}
.d-seal__step {
  position: relative;
  display: flex;
  flex-direction: column;
}
/* Arrows between the steps: down on phones, right on wide screens. */
.d-seal__step + .d-seal__step::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--bob-space-xxl) + 6px);
  width: 14px;
  height: calc(var(--bob-space-xxl) - 12px);
  transform: translateX(-50%);
  background: var(--b-ink-accent);
  clip-path: polygon(
    6px 0,
    8px 0,
    8px calc(100% - 9px),
    14px calc(100% - 9px),
    7px 100%,
    0 calc(100% - 9px),
    6px calc(100% - 9px)
  );
}
@media (min-width: 56em) {
  .d-seal__step + .d-seal__step::before {
    left: -46px;
    top: calc(50% + 1rem);
    width: 36px;
    height: 14px;
    transform: translateY(-50%);
    clip-path: polygon(
      0 6px,
      calc(100% - 9px) 6px,
      calc(100% - 9px) 0,
      100% 7px,
      calc(100% - 9px) 14px,
      calc(100% - 9px) 8px,
      0 8px
    );
  }
}
html .d-sec .d-seal__label {
  margin-bottom: var(--bob-space-md);
  font-family: var(--bob-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--m-on-ink);
}
.d-seal__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--bob-space-sm);
  min-height: 168px;
  padding: var(--bob-space-xl);
  border-radius: var(--bob-radius-lg);
  background: color-mix(in srgb, var(--m-on-ink) 7%, var(--m-ink));
  border: var(--bob-size-border-width) solid var(--m-ink-line);
}
.d-seal__card--doc {
  background: var(--bob-color-surface);
  border-color: var(--bob-color-border);
  color: var(--bob-color-text);
}
.d-seal__doctitle {
  font-family: var(--bob-font-display);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1.1;
}
.d-seal__text {
  line-height: 1.5;
}
.d-seal__card--key {
  align-items: flex-start;
}
.d-seal__lock {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--b-ink-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.d-seal__shackle {
  transition: transform 420ms cubic-bezier(0.3, 1.6, 0.5, 1);
}
.d-seal.is-replay:not(.is-sealed) .d-seal__shackle {
  transform: translateY(-3px);
}
.d-seal__keyname {
  font-family: var(--bob-font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  line-height: 1;
  color: var(--b-ink-accent);
}
.d-seal__keynote {
  color: var(--m-on-ink-muted);
  line-height: 1.45;
}
.d-seal__cipher {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--b-ink-accent);
  word-spacing: 0.1em;
  overflow-wrap: anywhere;
}
.d-seal__where {
  margin-top: auto;
  padding-top: var(--bob-space-md);
  font-weight: 600;
  color: var(--m-on-ink);
}
.d-seal__vault {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--bob-space-lg);
  max-width: 40rem;
  margin: var(--bob-space-xxl) auto 0;
  padding: var(--bob-space-lg) var(--bob-space-xl);
  border: 2px dashed var(--m-ink-line);
  border-radius: var(--bob-radius-lg);
}
.d-seal__vault svg {
  width: 40px;
  height: 40px;
  flex: none;
  fill: none;
  stroke: var(--b-ink-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html .d-sec .d-seal__vault strong {
  color: var(--m-on-ink);
}
.d-trust {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--bob-space-xxl) var(--bob-space-xl);
}
@media (min-width: 40em) {
  .d-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64em) {
  .d-trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.d-trust__item svg {
  width: 48px;
  height: 48px;
  padding: 10px;
  border-radius: var(--bob-radius-sm);
  border: var(--bob-size-border-width) solid var(--m-ink-line);
  fill: none;
  stroke: var(--b-ink-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.d-trust__item h3 {
  margin-top: var(--bob-space-lg);
  font-family: var(--bob-font-display);
  font-weight: 800;
  font-size: 1.625rem;
  line-height: 1.05;
  color: var(--m-on-ink);
}
.d-trust__item p {
  margin-top: var(--bob-space-sm);
  line-height: 1.55;
  max-width: 42ch;
}
.d-sec__note {
  margin-top: clamp(48px, 6vw, 80px);
  padding: var(--bob-space-lg) var(--bob-space-xl);
  border-left: 4px solid var(--b-ink-accent);
  max-width: 70ch;
}

/* ---------- section: Team-App ---------- */

.d-team {
  padding-block: var(--m-section-y);
}
.d-team__stage {
  display: grid;
  justify-items: center;
}
.d-team__browser,
.d-team__phone {
  margin: 0;
}
.d-team__browser {
  width: 100%;
}
.d-team__phone {
  justify-self: end;
  margin: -10% 4% 0 0;
  width: clamp(150px, 44vw, 260px);
}
.d-team__phone .phone {
  width: 100%;
}
@media (min-width: 56em) {
  .d-team__stage {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .d-team__browser {
    grid-area: 1 / 1 / 2 / 3;
    width: 78%;
    justify-self: start;
  }
  .d-team__phone {
    grid-area: 1 / 2;
    margin: 0 0 -48px;
    width: clamp(200px, 21vw, 270px);
  }
}
.d-tabs {
  display: flex;
  gap: 0.4em;
  border-bottom: var(--bob-size-border-width) solid var(--bob-color-border);
}
.d-tabs span {
  padding: 0.45em 0.9em;
  color: var(--bob-color-text-muted);
  font-weight: 600;
}
.d-tabs .is-on {
  color: var(--bob-color-text);
  font-weight: 700;
  box-shadow: inset 0 -0.2em var(--bob-color-primary);
}
.d-todo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 7.5em;
  align-items: center;
  gap: 0.8em;
  padding: 0.55em 0;
  border-top: var(--bob-size-border-width) solid var(--bob-color-border);
}
.d-check {
  position: relative;
  width: 1.2em;
  height: 1.2em;
  border-radius: 0.3em;
  border: 0.14em solid var(--bob-color-border-strong);
  transition:
    background-color var(--bob-motion-base) var(--bob-motion-easing),
    border-color var(--bob-motion-base) var(--bob-motion-easing);
}
.d-check::after {
  content: "";
  position: absolute;
  left: 0.32em;
  top: 0.08em;
  width: 0.3em;
  height: 0.6em;
  border: solid var(--bob-color-on-primary);
  border-width: 0 0.14em 0.14em 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--bob-motion-base) var(--bob-motion-easing);
}
.d-todo.is-done .d-check {
  background: var(--bob-color-primary);
  border-color: var(--bob-color-primary);
}
.d-todo.is-done .d-check::after {
  transform: rotate(45deg) scale(1);
}
.d-todo > span:nth-child(2) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: line-through transparent;
  transition:
    color var(--bob-motion-base) var(--bob-motion-easing),
    text-decoration-color var(--bob-motion-base) var(--bob-motion-easing);
}
.d-todo.is-done > span:nth-child(2) {
  color: var(--bob-color-text-muted);
  text-decoration-color: currentColor;
}
.d-who {
  padding: 0.15em 0.7em;
  border-radius: var(--bob-radius-pill);
  background: color-mix(in srgb, var(--bob-color-primary) 14%, var(--bob-color-surface));
  font-weight: 600;
  font-size: 0.9em;
}
.d-who--none {
  background: var(--bob-color-surface-sunken);
  color: var(--bob-color-text-muted);
}
.d-due {
  font-size: 0.9em;
  color: var(--bob-color-text-muted);
  white-space: nowrap;
}
.d-due--late {
  color: var(--bob-color-danger);
  font-weight: 700;
}
.d-todos__done {
  padding-top: 0.5em;
  border-top: var(--bob-size-border-width) solid var(--bob-color-border);
  color: var(--bob-color-text-muted);
  font-weight: 600;
}
.d-team__points {
  margin: clamp(80px, 10vw, 128px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--bob-space-xxl) var(--bob-space-xl);
}
@media (min-width: 40em) {
  .d-team__points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64em) {
  .d-team__points {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.d-team__points li {
  padding-top: var(--bob-space-lg);
  border-top: 4px solid var(--bob-color-primary);
}
.d-team__points h3 {
  font-family: var(--bob-font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
}
.d-team__points p {
  margin-top: var(--bob-space-sm);
  line-height: 1.55;
}
.d-team__points .d-soon {
  margin-top: var(--bob-space-lg);
  font-size: var(--bob-type-label-size);
  color: var(--bob-color-text-muted);
}
.d-soon__badge {
  display: inline-block;
  margin-right: var(--bob-space-xs);
  padding: 1px 10px;
  border-radius: var(--bob-radius-pill);
  background: var(--bob-color-info-bg);
  color: var(--bob-color-info);
  font-weight: 700;
}

/* ---------- section: Erste Schritte ---------- */

.d-start {
  padding-block: var(--m-section-y);
  background: var(--bob-color-surface-sunken);
}
.d-invite__dialog {
  width: min(100%, 460px);
  display: grid;
  gap: var(--bob-space-md);
  padding: var(--bob-space-xl);
  border-radius: var(--bob-radius-lg);
  background: var(--bob-color-surface);
  border: var(--bob-size-border-width) solid var(--bob-color-border);
  box-shadow: var(--bob-elevation-overlay);
  font-size: 0.9375rem;
}
.d-invite__title {
  font-family: var(--bob-font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
}
.d-invite__paste {
  padding: var(--bob-space-md);
  border-radius: var(--bob-radius-md);
  border: var(--bob-size-border-width-strong) solid var(--bob-color-primary);
  background: var(--bob-color-bg);
  color: var(--bob-color-text-muted);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.d-invite__rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px var(--bob-space-md);
}
.d-invite__rows > span:nth-child(odd) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.d-flag {
  padding: 1px 10px;
  border-radius: var(--bob-radius-pill);
  background: var(--bob-color-surface-sunken);
  color: var(--bob-color-text-muted);
  font-size: var(--bob-type-caption-size);
  font-weight: 700;
  white-space: nowrap;
}
.d-flag--ok {
  background: var(--bob-color-success-bg);
  color: var(--bob-color-success);
}
.d-invite .b-btn {
  margin-top: var(--bob-space-sm);
  min-height: 48px;
}
.d-steps {
  margin: var(--bob-space-xxl) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: d-step;
  display: grid;
  gap: var(--bob-space-md);
}
.d-steps li {
  counter-increment: d-step;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--bob-space-md);
  font-size: 1.125rem;
  line-height: 1.45;
}
.d-steps li::before {
  content: counter(d-step);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bob-color-primary);
  color: var(--bob-color-on-primary);
  font-family: var(--bob-font-display);
  font-weight: 800;
  line-height: 1;
}
.d-start__note {
  margin-top: var(--bob-space-xl);
  font-size: var(--bob-type-label-size);
  color: var(--bob-color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .d-version,
  .d-file,
  .d-file__bar i,
  .d-seal__shackle,
  .d-check,
  .d-check::after {
    transition: none;
  }
}