/* The device bar (Live · iPhone · Android · Duo · Watch), device frames, tap targets and the screen tour around
   the real captures. Live puts the stop monitor (live.css) where the device stands and keeps only the options in
   the bar. */

/* Device column: the bar (device tabs, screen menu, night and fold), the device and the note. From M the bar
   stands above the device; on S the device comes first and the bar follows below it. The device size follows
   the step, the column and the window height:
   --us-phone-max  phone casing width of the step (S 300 · M 280 · L 340px), capped by the column (on L it
                   starts at 280px at 1024px, uhrschnell.css),
   --us-room       height the casing may take: on S header, line and device fit while the device is read; from
                   M the whole device shows once the stage stands at the top (header offset, the stage's top
                   padding of 32 or 40px, the bar, its 12px gap above the device and 4px to spare). The bar takes
                   one, two or three rows depending on the column and the device; js/simulator.js measures it
                   (--us-bar), so the room always matches the bar that stands above the device,
   --us-phone-min  floor for very short windows: 188px, so every device still shows whole from a window
                   640px high (Android under the two-row bar on L, with its 40px top padding, is the tightest). */
.uhrschnell-page .us-sim {
  --us-phone-max: 300px;
  --us-phone-min: 188px;
  --us-room: calc(100svh - var(--navigation-height, 64px) - 112px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}
@media (min-width: 640px) {
  .uhrschnell-page .us-sim { container: sim / inline-size; --us-phone-max: 280px; --us-room: calc(100svh - var(--header-offset, 80px) - 48px - var(--us-bar, 96px)); }
}
@media (min-width: 1024px) {
  .uhrschnell-page .us-sim { --us-phone-max: 340px; --us-room: calc(100svh - var(--header-offset, 80px) - 56px - var(--us-bar, 96px)); }
}

.uhrschnell-page .us-sim-bar { position: relative; z-index: 12; order: 2; display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; }
@media (min-width: 640px) {
  .uhrschnell-page .us-sim-bar { order: 0; }
}
.uhrschnell-page .us-sim-tabs {
  container: device-tabs / inline-size;
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 100%;
  min-width: 0;
  background: var(--surface-card);
  border: 2px solid var(--control-border);
  box-shadow: 3px 3px 0 var(--pixel-shadow);
}
/* Even tabs that still fit their label; with enlarged text they wrap instead of overflowing. */
.uhrschnell-page .us-sim-tabs [role="tab"] {
  flex: 1 1 0;
  min-width: max-content;
  min-height: 40px;
  padding: .5rem .375rem;
  background: transparent;
  color: var(--text);
  border: 0;
  border-inline-end: 1px solid var(--separator);
  font: 750 var(--fs-small)/1.2 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
}
.uhrschnell-page .us-sim-tabs [role="tab"]:last-child { border-inline-end: 0; }
.uhrschnell-page .us-sim-tabs [role="tab"]:hover { background: var(--surface-subtle); }
.uhrschnell-page .us-sim-tabs [role="tab"][aria-selected="true"] { background: var(--warm-action); color: var(--on-action); }
.uhrschnell-page .us-sim-tabs [role="tab"]:focus-visible { outline-offset: -5px; }
/* Short labels (Live · iPhone · Android · Duo · Watch, five in 280px) where the row is narrow; the full name stays
   the accessible name. */
.uhrschnell-page .us-tab-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@container device-tabs (min-width: 25rem) {
  .uhrschnell-page .us-tab-full { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
.uhrschnell-page .us-tour-wrap { flex: 1 1 8rem; min-width: 0; }
.uhrschnell-page .us-tour-wrap[hidden] { display: none; }
.uhrschnell-page .us-sim-tools { display: flex; flex: none; gap: .5rem; }
.uhrschnell-page .us-sim-tools:not(:has(> :not([hidden]))) { display: none; }
/* From M, a column of at least 30rem puts tabs, menu and night in one row (L from about 1230px); the Duo's fold
   button needs 39rem. The five tabs take 17rem, the menu 9rem (flex lines break on these bases). A narrower
   column keeps the rows of M: the tabs, then menu and tools (the Duo's tools take a third row in a column under
   about 20rem). Live carries the tabs only, always one row. */
@media (min-width: 640px) {
  @container sim (min-width: 30rem) {
    .uhrschnell-page .us-sim:not([data-device="duo"]) .us-sim-tabs { flex: 1 0 17rem; }
    .uhrschnell-page .us-sim:not([data-device="duo"]) .us-tour-wrap { flex: 0 1 9rem; }
  }
  @container sim (min-width: 39rem) {
    .uhrschnell-page .us-sim[data-device="duo"] .us-sim-tabs { flex: 1 0 17rem; }
    .uhrschnell-page .us-sim[data-device="duo"] .us-tour-wrap { flex: 0 1 9rem; }
  }
}
/* Both fold labels share the button's width (the other one hidden below it), so folding never changes the
   bar's rows and moves nothing. */
.uhrschnell-page [data-fold] > span { display: inline-flex; flex-direction: column; }
.uhrschnell-page [data-fold] > span::after { content: attr(data-alt) / ""; height: 0; overflow: hidden; visibility: hidden; }

.uhrschnell-page .us-sim-panel { container: sim-stage / inline-size; width: 100%; }
.uhrschnell-page .us-sim-note { order: 3; }
/* The monitor names its own data source; the note about real screens belongs to the devices. */
.uhrschnell-page .us-sim[data-device="live"] .us-sim-note { display: none; }

/* The stage holds one device; sizes below derive from the step and the room. --us-phone-ref is the iPhone
   casing width, the Duo and the Watch follow it. */
.uhrschnell-page .us-device-stage {
  --us-phone-ref: min(100cqw, var(--us-phone-max), max(var(--us-phone-min), (var(--us-room) - 18px) * 1080 / 2347 + 18px));
  display: grid;
  /* One column as wide as the stage: the monitor sizes against it and never pushes it wider (enlarged text). */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: start;
  width: 100%;
}
.uhrschnell-page .us-noscript { width: min(100%, 300px); height: auto; border: 9px solid #17191c; border-radius: 46px; }

/* Phones: width of the step, capped by the room for the casing height (screen ratio plus bezel).
   Casing radii follow the step: S and M use the compact casing, L the full one. */
.uhrschnell-page .us-device {
  --bezel: 9px;
  --radius: 46px;
  --ratio: 1080 / 2347;
  position: relative;
  isolation: isolate;
  width: min(100cqw, var(--us-phone-max), max(var(--us-phone-min), (var(--us-room) - 2 * var(--bezel)) * var(--ratio) + 2 * var(--bezel)));
}
.uhrschnell-page .us-device[data-kind="android"] { --ratio: 1080 / 2424; }
@media (min-width: 1024px) {
  .uhrschnell-page .us-device[data-kind="iphone"] { --bezel: 11px; --radius: 54px; }
  .uhrschnell-page .us-device[data-kind="android"] { --bezel: 9px; --radius: 40px; }
}
/* The Duo box keeps one height in both postures, so folding moves nothing around it. Folded it is a
   phone-sized half (95% of the iPhone), open it is as wide as the stage and the room allow. The box is 4%
   taller than the taller posture: the leaf swinging towards the viewer stays inside it. */
.uhrschnell-page .us-device[data-kind="duo"] {
  --bezel: 10px;
  --radius: 36px;
  --duo-closed-w: calc(var(--us-phone-ref) * .95);
  --duo-open-w: min(100cqw, 960px, (var(--us-room) / 1.04 - 20px) * 1600 / 1126 + 20px);
  --duo-h: calc(1.04 * max((var(--duo-closed-w) - 20px) * 1571 / 1080 + 20px, (var(--duo-open-w) - 20px) * 1126 / 1600 + 20px));
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--duo-h);
}
.uhrschnell-page .us-device[data-kind="duo"] > .us-frame { width: var(--duo-open-w); }
.uhrschnell-page .us-device[data-kind="duo"][data-posture="closed"] > .us-frame { width: var(--duo-closed-w); }
.uhrschnell-page .us-device[data-kind="duo"][data-folding] > .us-frame { opacity: 0; }
.uhrschnell-page .us-device[data-kind="watch"] { --bezel: 14px; --radius: 76px; width: calc(var(--us-phone-ref) * .88); }
@media (min-width: 1024px) {
  .uhrschnell-page .us-device[data-kind="watch"] { --bezel: 16px; --radius: 88px; }
}

.uhrschnell-page .us-frame {
  position: relative;
  padding: var(--bezel);
  border-radius: var(--radius);
  background: linear-gradient(150deg, #474d53 0%, #1b1e21 38%, #121416 62%, #3a4046 100%);
  box-shadow:
    inset 0 0 0 1.5px #6d747b,
    inset 0 0 0 4px #0b0c0e,
    0 34px 60px -24px rgba(12, 28, 24, .55),
    0 12px 24px -12px rgba(12, 28, 24, .4);
}
.uhrschnell-page .us-device[data-kind="android"] .us-frame { background: linear-gradient(160deg, #2c3134, #15181a 55%, #262b2e); }
.uhrschnell-page .us-device[data-kind="watch"] .us-frame { background: linear-gradient(150deg, #4a5056, #1c1f22 45%, #101214 70%, #3c4248); }
.uhrschnell-page .us-frame::before, .uhrschnell-page .us-frame::after {
  content: "";
  position: absolute;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #5a6168, #2a2e33);
}
.uhrschnell-page .us-device[data-kind="iphone"] .us-frame::before { right: -4px; top: 26%; height: 12%; }
.uhrschnell-page .us-device[data-kind="iphone"] .us-frame::after { left: -4px; top: 20%; height: 17%; box-shadow: 0 -38px 0 -1px #3b4046; }
.uhrschnell-page .us-device[data-kind="android"] .us-frame::before { right: -4px; top: 22%; height: 9%; }
.uhrschnell-page .us-device[data-kind="android"] .us-frame::after { right: -4px; top: 35%; height: 15%; }
.uhrschnell-page .us-device[data-kind="duo"] .us-frame::before { right: -4px; top: 14%; height: 9%; }
/* Folded, the button sits on the free edge, which is now on the left. */
.uhrschnell-page .us-device[data-kind="duo"][data-posture="closed"] > .us-frame::before { right: auto; left: -4px; }
.uhrschnell-page .us-device[data-kind="duo"] .us-frame::after { display: none; }
.uhrschnell-page .us-device[data-kind="watch"] .us-frame::before, .uhrschnell-page .us-device[data-kind="watch"] .us-frame::after { display: none; }

.uhrschnell-page .us-screen {
  position: relative;
  aspect-ratio: var(--screen-ratio, 1080 / 2347);
  overflow: hidden;
  isolation: isolate;
  border-radius: calc(var(--radius) - var(--bezel));
  background: #000;
  container: screen / inline-size;
}
.uhrschnell-page .us-screen:focus-visible { outline: 3px solid var(--parchment); outline-offset: 2px; }
.uhrschnell-page .us-viewport { position: absolute; inset: 0; overflow: hidden; transition: filter .3s ease-out; }
.uhrschnell-page .us-device[data-kind="watch"] .us-viewport { inset: 7%; }
.uhrschnell-page .us-device[data-kind="watch"] .us-screen { aspect-ratio: 416 / 496; }
.uhrschnell-page .us-layer { position: absolute; inset: 0; background: #000; }
.uhrschnell-page .us-layer img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.uhrschnell-page .us-hotspots { position: absolute; inset: 0; }
.uhrschnell-page .us-hotspot {
  position: absolute;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease-out, box-shadow .15s ease-out;
}
.uhrschnell-page .us-screen:hover .us-hotspot { box-shadow: inset 0 0 0 1.5px rgba(255, 243, 214, .45); }
.uhrschnell-page .us-hotspot:hover { background: rgba(255, 243, 214, .14); box-shadow: inset 0 0 0 2px rgba(255, 243, 214, .95), 0 0 0 2px rgba(28, 51, 49, .7) !important; }
.uhrschnell-page .us-hotspot:active { background: rgba(28, 51, 49, .16); }
.uhrschnell-page .us-hotspot:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; box-shadow: inset 0 0 0 3px var(--parchment); }
.uhrschnell-page .us-sim[data-debug-hotspots] .us-hotspot { outline: 2px dashed #f0f; outline-offset: -2px; background: rgba(255, 0, 255, .12); }
.uhrschnell-page .us-hotspot.is-hint::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 3px solid var(--parchment);
  box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px var(--ink);
  animation: us-hint 1.4s steps(4, end) infinite;
}
@keyframes us-hint {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: .55; }
}

/* Matches the island the simulator renders into its captures (35.8–64.2 % × 1.46–5.26 %), so a captured
   island (the "empty pill" artefact) never peeks out below the drawn one. */
.uhrschnell-page .us-island {
  position: absolute;
  z-index: 8;
  top: 1.3%;
  left: 50%;
  width: 29.4%;
  height: 4.1%;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #000;
  pointer-events: none;
}
.uhrschnell-page .us-punch {
  position: absolute;
  z-index: 8;
  top: 1.35%;
  left: 50%;
  width: 3.6%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 0 1.5px #1d2124;
  pointer-events: none;
}
/* Front camera of the Duo's outer display (some captures show it, so all get it). */
.uhrschnell-page .us-camera { position: absolute; z-index: 8; top: 5.02%; left: 85.6%; width: 7.8%; aspect-ratio: 1; border-radius: 50%; background: #000; box-shadow: 0 0 0 1.5px #1d2124; pointer-events: none; }
.uhrschnell-page .us-device[data-posture="open"] > .us-frame .us-camera { display: none; }

/* App destinations drawn by the website (settings, appearance, language). */
.uhrschnell-page .us-native-panel { position: absolute; z-index: 7; inset: 0; font-family: var(--font-ui); }
.uhrschnell-page .us-native-page {
  --native-bg: #f7f5ee; --native-card: #fff; --native-text: #1e332c; --native-muted: #607064; --native-line: #c5cfc2; --native-accent: #1680e4;
  position: absolute; inset: 0; overflow-y: auto; padding: 0 4% calc(17% + 16px); background: var(--native-bg); color: var(--native-text);
  scrollbar-width: none;
}
/* The Duo keeps its rail on the right; pages leave it free (closed rail from 85 %, open from 92 %). */
.uhrschnell-page .us-native-page[data-device="duo"] { padding: 2.5% 17% 4% 3%; }
.uhrschnell-page .us-native-panel[data-posture="open"] .us-native-page { padding: 1.5% 10% 3% 2%; }
/* Status bar like the captures: time left, Wi-Fi and battery right. */
.uhrschnell-page .us-statusbar { display: flex; align-items: center; justify-content: space-between; height: 12cqw; padding: 0 8% 0 7%; font: 600 clamp(.875rem, 3.8cqw, 1.1rem)/1 var(--font-ui); color: var(--native-text); font-variant-numeric: tabular-nums; }
.uhrschnell-page .us-statusbar[data-device="android"] { height: 7cqw; padding: 0 6%; font-size: .875rem; font-weight: 500; }
.uhrschnell-page .us-statusbar-icons { display: flex; align-items: center; gap: 1.4cqw; }
.uhrschnell-page .us-statusbar .us-icon { width: 4.6cqw; height: 4.6cqw; min-width: 14px; min-height: 14px; }
.uhrschnell-page .us-statusbar .us-icon[class] use { fill: none; }
.uhrschnell-page .us-statusbar[data-device="android"] .us-icon { width: 3.6cqw; height: 3.6cqw; }
.uhrschnell-page .us-native-page[data-tone="dark"] { --native-bg: #0e1620; --native-card: #18232f; --native-text: #eef2f5; --native-muted: #bcc9d4; --native-line: #3a4b5c; --native-accent: #64b6ff; }
.uhrschnell-page .us-native-page[data-palette="donau"] { --native-bg: #f3f6f6; --native-text: #14292e; --native-line: #c3d0d1; }
.uhrschnell-page .us-native-page[data-palette="melange"] { --native-bg: #f5eee2; --native-card: #fffbf4; --native-text: #33251b; --native-line: #d9cab3; }
.uhrschnell-page .us-native-page[data-palette="kiefer"] { --native-bg: #142720; --native-card: #20372e; --native-text: #f4f5e9; --native-line: #4f6a59; }
.uhrschnell-page .us-native-page[data-palette="kohle"] { --native-bg: #000; --native-card: #121412; --native-text: #f3f2ea; --native-line: #363a35; }
.uhrschnell-page .us-native-header { display: flex; align-items: center; min-height: 11cqw; margin: 1% 0 2%; gap: 3%; }
.uhrschnell-page .us-native-page[data-device="duo"] .us-native-header { margin-top: 2%; }
.uhrschnell-page .us-native-panel[data-posture="open"] .us-native-header { min-height: 6cqw; }
.uhrschnell-page .us-native-header h2 { margin: 0; font: 500 clamp(1.1rem, 6cqw, 1.8rem)/1.2 var(--font-pixel); }
.uhrschnell-page .us-native-panel[data-posture="open"] .us-native-header h2 { font-size: clamp(1rem, 2.8cqw, 1.5rem); }
.uhrschnell-page .us-native-page[data-device="android"] .us-native-header h2 { font-size: clamp(1.1rem, 5.6cqw, 1.7rem); }
.uhrschnell-page .us-native-back { display: grid; place-items: center; flex: none; width: 13%; aspect-ratio: 1; border: 1px solid var(--native-line); border-radius: 50%; background: var(--native-card); color: var(--native-text); cursor: pointer; }
/* Android draws a plain arrow instead of the round iOS button. */
.uhrschnell-page .us-native-page[data-device="android"] .us-native-back { width: 9%; border: 0; background: transparent; border-radius: 0; }
.uhrschnell-page .us-native-page[data-device="android"] .us-native-back .us-icon { display: none; }
.uhrschnell-page .us-native-page[data-device="android"] .us-native-back::before { content: ""; width: 55%; height: 55%; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateX(25%) rotate(45deg); }
.uhrschnell-page .us-native-note { margin: 0; padding: 3%; font-size: .875rem; line-height: 1.45; color: var(--native-muted); }
.uhrschnell-page .us-native-back .us-icon { width: 56%; height: 56%; }
:root .uhrschnell-page .us-native-main { width: 100%; max-width: none; margin: 0; padding: 3% 0 0; }
.uhrschnell-page .us-native-section { margin-bottom: 7%; }
.uhrschnell-page .us-native-section h3 { margin: 0 0 2%; color: var(--native-muted); font: 650 clamp(.875rem, 2.5cqw, .9rem)/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .035em; }
.uhrschnell-page .us-native-rows { overflow: hidden; background: var(--native-card); border: 1px solid var(--native-line); }
.uhrschnell-page .us-native-row, .uhrschnell-page .us-native-choice { display: flex; align-items: center; width: 100%; min-height: 11cqw; padding: 2.5% 3%; gap: 2%; border: 0; border-bottom: 1px solid var(--native-line); background: transparent; color: var(--native-text); text-align: left; font: 600 clamp(.875rem, 3.3cqw, 1rem)/1.25 var(--font-ui); cursor: pointer; }
.uhrschnell-page .us-native-row:last-child, .uhrschnell-page .us-native-choice:last-child { border-bottom: 0; }
/* The app's 16 × 16 pixel glyphs (`#us-g-*`), drawn crisp in the current colour: settings rows, tab bar, Duo rail and the live monitor's mast. */
.uhrschnell-page .us-glyph { flex: none; width: 1rem; height: 1rem; fill: currentColor; stroke: none; shape-rendering: crispEdges; image-rendering: pixelated; }
.uhrschnell-page .us-native-glyph { display: grid; place-items: center; flex: none; width: 8.5cqw; min-width: 26px; aspect-ratio: 1; border-radius: 2px; background: color-mix(in srgb, var(--native-accent) 14%, transparent); color: var(--native-accent); }
.uhrschnell-page .us-native-glyph .us-glyph { width: 58%; height: 58%; }
.uhrschnell-page .us-native-panel[data-posture="open"] .us-native-glyph { width: 4.4cqw; }
.uhrschnell-page .us-native-page[data-device="android"] .us-native-glyph { border-radius: 50%; }
.uhrschnell-page .us-native-row:focus-visible, .uhrschnell-page .us-native-choice:focus-visible { outline: 3px solid var(--native-accent); outline-offset: -3px; }
.uhrschnell-page .us-native-value { margin-left: auto; color: var(--native-muted); font-size: .875rem; text-align: right; }
.uhrschnell-page .us-native-chevron { color: var(--native-muted); font-size: 1.5em; line-height: .7; }
.uhrschnell-page .us-native-version { margin: 0; color: var(--native-muted); font-size: .875rem; }
.uhrschnell-page .us-native-check { margin-left: auto; color: var(--native-accent); }
.uhrschnell-page .us-native-choice[aria-pressed="true"] { box-shadow: inset 3px 0 var(--native-accent); }
.uhrschnell-page .us-native-swatch { flex: none; width: 10%; aspect-ratio: 1; border: 1px solid var(--native-line); background: var(--swatch-bg, var(--native-card)); }
.uhrschnell-page .us-native-choice[data-palette="papier"] { --swatch-bg: #f7f5ee; }
.uhrschnell-page .us-native-choice[data-palette="donau"] { --swatch-bg: #f3f6f6; }
.uhrschnell-page .us-native-choice[data-palette="melange"] { --swatch-bg: #f5eee2; }
.uhrschnell-page .us-native-choice[data-palette="kiefer"] { --swatch-bg: #142720; }
.uhrschnell-page .us-native-choice[data-palette="nacht"] { --swatch-bg: #0e1620; }
.uhrschnell-page .us-native-choice[data-palette="kohle"] { --swatch-bg: #000; }
/* Tab bar, in fixed light values: the device's appearance must not follow the page theme (a light device on the
   dark page). The floating iOS bar is opaque and stands on a plate in the page colour that reaches from just
   above the bar to the screen edges (::before; ::after draws the bar itself), so the list ends above the bar,
   never shows under or beside it and cannot be tapped there. The page's bottom padding lets the last row
   scroll clear of the plate. */
.uhrschnell-page .us-native-panel { --native-plate: #f7f5ee; }
.uhrschnell-page .us-native-panel[data-palette="donau"] { --native-plate: #f3f6f6; }
.uhrschnell-page .us-native-panel[data-palette="melange"] { --native-plate: #f5eee2; }
.uhrschnell-page .us-native-panel[data-palette="kiefer"] { --native-plate: #142720; }
.uhrschnell-page .us-native-panel[data-palette="nacht"] { --native-plate: #0e1620; }
.uhrschnell-page .us-native-panel[data-palette="kohle"] { --native-plate: #000; }
.uhrschnell-page .us-native-tabs { --bar-face: #fff; --bar-edge: #b6b9b4; position: absolute; z-index: 2; inset: auto 4% 2%; display: flex; justify-content: space-around; padding: 2%; }
.uhrschnell-page .us-native-tabs::before, .uhrschnell-page .us-native-tabs::after { content: ""; position: absolute; z-index: -1; }
.uhrschnell-page .us-native-tabs::before { inset: -10px -100vmax -100vmax; background: var(--native-plate); }
.uhrschnell-page .us-native-tabs::after { inset: 0; border: 1px solid var(--bar-edge); border-radius: 999px; background: var(--bar-face); }
.uhrschnell-page .us-native-panel[data-tone="dark"] .us-native-tabs { --bar-face: #222f3d; --bar-edge: #4b5b67; }
.uhrschnell-page .us-device[data-kind="android"] .us-native-tabs { inset: auto 0 0; padding: 2% 0 5%; background: #fff; }
.uhrschnell-page .us-device[data-kind="android"] .us-native-tabs::before, .uhrschnell-page .us-device[data-kind="android"] .us-native-tabs::after { content: none; }
.uhrschnell-page .us-device[data-kind="android"] .us-native-panel[data-tone="dark"] .us-native-tabs { background: #1b2833; }
.uhrschnell-page .us-native-tabs button { display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 1; min-width: 0; padding: 1% 0; border: 0; border-radius: 999px; background: transparent; color: #26302d; font: 600 .875rem/1 var(--font-ui); letter-spacing: -.02em; white-space: nowrap; cursor: pointer; }
/* Narrow screens keep the icons; the labels stay for assistive technology. */
@container screen (max-width: 330px) {
  .uhrschnell-page .us-native-tabs button span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .uhrschnell-page .us-native-tabs .us-glyph { width: 42%; }
}
.uhrschnell-page .us-native-panel[data-tone="dark"] .us-native-tabs button { color: #d5e0e8; }
.uhrschnell-page .us-device[data-kind="android"] .us-native-tabs button { border-radius: 0; }
.uhrschnell-page .us-native-tabs button[aria-current="page"] { background: rgba(20, 91, 149, .12); color: #1680e4; }
.uhrschnell-page .us-native-tabs .us-glyph { width: 36%; height: auto; aspect-ratio: 1; }
.uhrschnell-page .us-pixel-menu-backdrop { position: absolute; z-index: 9; inset: 0; background: rgba(0,0,0,.06); }
.uhrschnell-page .us-pixel-menu { position: absolute; top: 10%; right: 3%; width: 56%; overflow: hidden; padding: 2%; border: 1px solid #c5cfc2; border-radius: 14px; background: #f9f9f9; box-shadow: 0 8px 26px rgba(0,0,0,.25); color: #192329; }
.uhrschnell-page .us-pixel-menu-backdrop[data-tone="dark"] .us-pixel-menu { border-color: #48535e; background: #26313d; color: #f1f4f6; }
.uhrschnell-page .us-device[data-kind="android"] .us-pixel-menu { top: 14%; border-radius: 4px; }
.uhrschnell-page .us-device[data-kind="duo"][data-posture="open"] .us-pixel-menu { top: 8%; width: 38%; }
.uhrschnell-page .us-pixel-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 10cqw; padding: 3% 5%; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; font: 500 clamp(.875rem, 3.2cqw, 1rem) var(--font-ui); cursor: pointer; }
.uhrschnell-page .us-pixel-menu button:hover, .uhrschnell-page .us-pixel-menu button:focus-visible { background: #e7edf1; }
.uhrschnell-page .us-pixel-menu-backdrop[data-tone="dark"] button:hover, .uhrschnell-page .us-pixel-menu-backdrop[data-tone="dark"] button:focus-visible { background: #394958; }
.uhrschnell-page .us-device[data-kind="android"] .us-pixel-menu button { justify-content: flex-start; gap: 9%; }
.uhrschnell-page .us-pixel-menu-check { flex: none; width: 1em; font-weight: 700; }
.uhrschnell-page .us-pixel-menu-divider { height: 1px; margin: 2% 0; background: #c7d0d5; }

/* The Duo's rail on native pages: clock and battery ring, back button and the tab pill, at the positions of the captures. */
.uhrschnell-page .us-native-rail { position: absolute; inset: 0; z-index: 2; pointer-events: none; color: #1e332c; }
.uhrschnell-page .us-native-panel[data-tone="dark"] .us-native-rail { color: #eef2f5; }
.uhrschnell-page .us-native-rail > * { position: absolute; pointer-events: auto; }
/* The clock sits in the screen's corner: in a small Duo (from M the folded one may be 190px and the open one
   280px wide) the time shrinks with the screen, as in the captures, instead of running under the rounded edge. */
.uhrschnell-page .us-rail-clock { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12%; pointer-events: none; font: 700 min(clamp(.875rem, 2.6cqw, 1.1rem), 4.6cqw)/1 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: visible; }
.uhrschnell-page .us-native-panel[data-posture="open"] .us-rail-clock { font-size: min(clamp(.875rem, 1.6cqw, 1rem), 2.6cqw); }
.uhrschnell-page .us-rail-battery { width: 42%; aspect-ratio: 1; border-radius: 50%; border: 3px solid #34c759; box-sizing: border-box; }
.uhrschnell-page .us-rail-back { display: grid; place-items: center; padding: 0; border: 1px solid var(--native-line, #c5cfc2); border-radius: 50%; background: #fff; color: inherit; cursor: pointer; }
.uhrschnell-page .us-native-panel[data-tone="dark"] .us-rail-back { background: #18232f; border-color: #3a4b5c; }
.uhrschnell-page .us-rail-back .us-icon { width: 50%; height: 50%; }
.uhrschnell-page .us-rail-tabs { border-radius: 999px; background: #fff; border: 1px solid #c5cfc2; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); pointer-events: none; }
.uhrschnell-page .us-native-panel[data-tone="dark"] .us-rail-tabs { background: #1b2833; border-color: #3a4b5c; }
.uhrschnell-page .us-rail-tab { display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.uhrschnell-page .us-rail-tab .us-glyph { width: 46%; height: 46%; }
.uhrschnell-page .us-rail-tab[aria-current="page"] { background: rgba(20, 91, 149, .12); color: #1680e4; }
.uhrschnell-page .us-rail-tab:focus-visible, .uhrschnell-page .us-rail-back:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* iPhone Duo folding: a cosmetic rig of snapshots. The right half of the inner display swings over
   the left half around the hinge and shows the outer display on its back. No overflow, clip-path,
   opacity or filter on the rig or the leaf: they would flatten the 3D. */
.uhrschnell-page .us-fold-clip { position: absolute; z-index: 3; inset: calc(var(--fold-slack) * -1) 0; overflow: hidden; pointer-events: none; }
.uhrschnell-page .us-fold-rig { position: absolute; }
.uhrschnell-page .us-fold-base, .uhrschnell-page .us-leaf { position: absolute; top: 0; width: 50%; height: 100%; }
.uhrschnell-page .us-fold-base { left: 0; overflow: hidden; border-radius: var(--radius) 0 0 var(--radius); box-shadow: 0 34px 60px -24px rgba(12, 28, 24, .55); }
.uhrschnell-page .us-leaf { left: 50%; transform-origin: left center; transform-style: preserve-3d; }
.uhrschnell-page .us-leaf-front, .uhrschnell-page .us-leaf-back { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.uhrschnell-page .us-leaf-front { overflow: hidden; border-radius: 0 var(--radius) var(--radius) 0; box-shadow: 0 34px 60px -24px rgba(12, 28, 24, .55); }
.uhrschnell-page .us-leaf-back { transform: rotateY(180deg); border-radius: var(--radius); background: #121416; }
.uhrschnell-page .us-face { position: absolute; top: 0; left: 0; box-shadow: inset 0 0 0 1.5px #6d747b, inset 0 0 0 4px #0b0c0e; }
/* The outer-display face fills the leaf; the rig's horizontal stretch restores its proportions. */
.uhrschnell-page .us-face-fill .us-screen { aspect-ratio: auto; height: 100%; }
.uhrschnell-page .us-fold-shade { position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: 0; pointer-events: none; }

/* Folded, the hinge on the right edge opens the Duo with a click; the Aufklappen button does the same for keyboards. */
.uhrschnell-page .us-duo-hinge {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: calc(50% + var(--duo-closed-w, 436px) / 2 - 3px);
  width: 9px;
  height: calc(var(--duo-h, 600px) * .7);
  transform: translateY(-50%);
  border-radius: 0 6px 6px 0;
  background: linear-gradient(90deg, #2a2e33, #5a6168 55%, #2a2e33);
  box-shadow: inset 0 0 0 1px #15181b;
  cursor: pointer;
}
.uhrschnell-page .us-duo-hinge::after { content: ""; position: absolute; inset: 0 -10px 0 -4px; }
.uhrschnell-page .us-duo-hinge:hover { background: linear-gradient(90deg, #343940, #7a828a 55%, #343940); }
.uhrschnell-page .us-device:not([data-posture="closed"]) > .us-duo-hinge, .uhrschnell-page .us-device[data-folding] > .us-duo-hinge { display: none; }

/* Watch crown and button */
.uhrschnell-page .us-crown {
  position: absolute;
  z-index: -1;
  right: -14px;
  top: 25%;
  width: 26px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: repeating-linear-gradient(180deg, #6a7178 0 2px, #33383d 2px 4px);
  box-shadow: inset 0 0 0 1.5px #1a1d20;
  cursor: pointer;
}
.uhrschnell-page .us-crown:hover { background: repeating-linear-gradient(180deg, #858c93 0 2px, #3b4146 2px 4px); }
.uhrschnell-page .us-crown:focus-visible { z-index: 2; outline: 3px solid var(--focus); outline-offset: 3px; }
.uhrschnell-page .us-side-button { position: absolute; z-index: -1; right: -5px; top: 52%; width: 8px; height: 28%; border-radius: 3px; background: linear-gradient(90deg, #4f565c, #2a2e33); }

/* Bar controls: square, 44px, with the action offset. Night is a symbol button (aria-label, aria-pressed);
   Aufklappen keeps its label. */
.uhrschnell-page .us-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;
  padding: .5rem .85rem;
  background: var(--surface-card);
  color: var(--text);
  border: 2px solid var(--control-border);
  box-shadow: 3px 3px 0 var(--pixel-shadow);
  font: 750 var(--fs-small)/1.2 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
}
.uhrschnell-page .us-tool-icon { width: 44px; padding: 0; }
.uhrschnell-page .us-tool:hover { background: var(--surface-subtle); }
.uhrschnell-page .us-tool[aria-pressed="true"] { background: #0e1620; color: #eef2f5; border-color: #0e1620; }
.uhrschnell-page .us-tool[hidden] { display: none; }
/* The menu is positioned against the whole bar, so it is as wide as the bar and stays in the column. */
.uhrschnell-page .us-tour-picker { position: static; width: 100%; }
.uhrschnell-page .us-tour-summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .5rem .75rem;
  border: 2px solid var(--control-border);
  background: var(--surface-card);
  box-shadow: 3px 3px 0 var(--pixel-shadow);
  color: var(--text);
  font: 750 var(--fs-small)/1.2 var(--font-ui);
  list-style: none;
  cursor: pointer;
}
.uhrschnell-page .us-tour-summary::-webkit-details-marker { display: none; }
.uhrschnell-page .us-tour-summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.uhrschnell-page .us-tour-current { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uhrschnell-page .us-tour-summary::after { content: ""; flex: none; width: .5rem; height: .5rem; margin: -.25rem .15rem 0 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s ease-out; }
.uhrschnell-page .us-tour-picker[open] .us-tour-summary::after { margin-top: .25rem; transform: rotate(225deg); }
.uhrschnell-page .us-tour {
  position: absolute;
  top: calc(100% + .25rem);
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
  max-height: var(--tour-room, min(58vh, 28rem));
  overflow: auto;
  overscroll-behavior: contain;
  padding: .65rem;
  border: 2px solid var(--control-border);
  background: var(--surface-card);
  box-shadow: 5px 5px 0 var(--pixel-shadow);
}
/* Opened from a bar low in the window, the menu goes up (js/simulator.js measures the room). */
.uhrschnell-page .us-tour[data-up="true"] { top: auto; bottom: calc(100% + .25rem); }
.uhrschnell-page .us-tour-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: none;
  min-height: 44px;
  padding: .5rem .75rem;
  background: var(--surface-card);
  color: var(--text);
  border: 1.5px solid var(--control-border);
  font: 650 var(--fs-small)/1.3 var(--font-ui);
  text-align: left;
  cursor: pointer;
}
.uhrschnell-page .us-tour-chip:hover { background: var(--surface-subtle); }
.uhrschnell-page .us-tour-chip[aria-current="true"] { background: var(--action); color: var(--on-action); border-color: var(--action); }
.uhrschnell-page .us-tour-chip:focus-visible { outline-offset: 2px; }
.uhrschnell-page .us-tour-chip .us-icon { width: 1.05rem; height: 1.05rem; }
.uhrschnell-page .us-sim-note { margin: 0; max-width: 42ch; text-align: center; font-size: var(--fs-small); line-height: 1.6; color: var(--text-secondary); }

/* S: the screen menu opens as a sheet at the viewport bottom. */
@media (max-width: 639px) {
  .uhrschnell-page .us-tour-picker[open] .us-tour {
    position: fixed;
    top: auto;
    right: .75rem;
    bottom: calc(.75rem + env(safe-area-inset-bottom));
    left: .75rem;
    max-height: min(60dvh, 30rem);
  }
}
/* A column under 30rem (M's 280px, L up to about 1230px) takes the menu in one column. */
@media (min-width: 640px) {
  @container sim (width < 30rem) {
    .uhrschnell-page .us-tour { grid-template-columns: minmax(0, 1fr); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .uhrschnell-page .us-hotspot { transition: none; }
  .uhrschnell-page .us-hotspot.is-hint::after { animation: none; }
}
@media (forced-colors: active) {
  .uhrschnell-page .us-hotspot:focus-visible { outline-color: Highlight; }
  .uhrschnell-page .us-frame { forced-color-adjust: none; }
}