/* VCSLV home page (start.html → dist/index.html): tokens, header, intro and the first screen. Built from 18.10.2026.
   Brand: ink, paper, terra; Onest + JetBrains Mono, self-hosted. */

@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/onest-100-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/onest-100-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/jetbrains-mono-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/jetbrains-mono-500-latin.woff2') format('woff2'); }

/* Cyrillic for the Russian page (/ru/): loaded only where such letters appear */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/onest-100-900-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/onest-100-900-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/jetbrains-mono-400-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/jetbrains-mono-500-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

@property --glow { syntax: '<color>'; inherits: true; initial-value: #5f7fa8; }
@property --nudge { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

:root {
  --ink: #0A0A0B;
  --fg: #F2F2F0;
  --muted: #9A9A9F;
  --dim: #5E5E63;
  --line: rgba(255, 255, 255, .13);
  --terra: #A8452F;
  --terra-lit: #D2664A;
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --expo: cubic-bezier(.16, 1, .3, 1);
  --hdr: 84px;
  /* one type system */
  --t-h1: clamp(2.6rem, min(4.7vw, 8.6svh), 5.2rem);
  --t-lead: clamp(1.02rem, 1.25vw, 1.18rem);
  --t-body: 15px;
  --t-label: 11.5px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--fg);
  font: 400 var(--t-body)/1.5 var(--font); font-synthesis: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--terra-lit); outline-offset: 3px; }
/* no grey rectangle on a tap (iPhone): links and buttons give their own feedback (31.10.2026) */
a, button, label, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* dotted ground, fading towards the edges */
.grid-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .075) 1px, transparent 1.3px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 45%, #000 20%, transparent 75%);
          mask-image: radial-gradient(120% 90% at 70% 45%, #000 20%, transparent 75%);
}

/* ---------- Header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 20; height: var(--hdr);
  display: flex; align-items: center; gap: 32px; padding: 0 var(--gutter);
}
.hdr::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s var(--ease);
  background: rgba(10, 10, 11, .74); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.scrolled .hdr::before { opacity: 1; }
.logo { font: 700 clamp(20px, 1.75vw, 26px)/1 var(--font); letter-spacing: .1em; display: inline-flex; align-items: baseline; margin-right: auto; }
.logo i, .intro-dot { display: inline-block; width: .28em; height: .28em; border-radius: 50%; background: var(--terra-lit); margin-left: .12em; }
.nav { display: flex; align-items: center; gap: 28px; font-size: 15px; color: var(--muted); }
.nav > a { transition: color .2s; }
.nav > a:hover { color: var(--fg); }
.lang { display: inline-flex; gap: 12px; font: 400 12px/1 var(--mono); letter-spacing: .04em; margin-left: 8px; }
.lang a[aria-current] { color: var(--fg); }

/* ---------- Mobile menu button (31.10.2026; the sheet itself is built by assets/js/menu.js) ----------
   The button sits in the page from the first paint and the CSS alone swaps it with the language links,
   so nothing jumps while the script loads. The label follows the page language. */
.vm-btn { display: none; align-items: center; gap: 10px; height: 40px; margin: 0; padding: 0 6px; border: 0; background: none;
  color: var(--fg); font: 500 12px/1 var(--mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vm-lbl::after { content: 'Menü'; }
:lang(en) .vm-lbl::after { content: 'Menu'; }
:lang(ru) .vm-lbl::after { content: 'Меню'; }
.vm-ico { position: relative; width: 18px; height: 10px; }
.vm-ico i { position: absolute; left: 0; right: 0; top: 0; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .35s var(--ease, ease), top .35s var(--ease, ease); }
.vm-ico i + i { top: 8.5px; }
.vm-open .vm-ico i { top: 4.25px; transform: rotate(45deg); }
.vm-open .vm-ico i + i { transform: rotate(-45deg); }
.vm-btn:focus { outline: none; }
.vm-btn:focus-visible { outline: 2px solid #D2664A; outline-offset: 3px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 52px; padding: 0 24px; border-radius: 2px; font: 500 15.5px/1 var(--font); white-space: nowrap;
  transition: background-color .25s, border-color .25s, color .25s;
}
.btn-s { height: 40px; padding: 0 16px; font-size: 14px; }
.btn-primary { background: var(--fg); color: var(--ink); }
.btn-primary:hover { background: #fff; }
.btn-primary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform .35s var(--expo); }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-line { border: 1px solid var(--line); color: var(--fg); }
.btn-line:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); }
.magnet { will-change: transform; }

/* ---------- Hero ---------- */
main { position: relative; z-index: 1; }
.hero {
  min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center; gap: clamp(24px, 4vw, 72px);
  padding: calc(var(--hdr) + 8px) calc(var(--gutter) + max(0px, (100% - 1480px) / 2)) 24px;   /* full width, so nothing is cut at a 1480 px edge; content within 1480 */
  overflow-x: clip; overflow-y: visible;
}
.hero-copy { max-width: 700px; }
.eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 28px;
  font: 500 var(--t-label)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--terra-lit); box-shadow: 0 0 0 0 rgba(210, 102, 74, .5); }
.h1 { margin: 0; font: 500 var(--t-h1)/.98 var(--font); letter-spacing: -.035em; }
.h1 .ln { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }   /* room for Cyrillic descenders (у, д, р) */
.h1 .ln > span { display: inline-block; }
.h1 .ln-2 { color: var(--dim); }
.hero-lead { margin: 28px 0 0; max-width: 34em; font-size: var(--t-lead); line-height: 1.6; color: var(--muted); }
.sub, .facts-m { display: none; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.facts { display: flex; gap: 0; margin: 44px 0 0; border-top: 1px solid var(--line); }
.facts > div { flex: 1 1 0; padding: 18px 18px 0 0; }
.facts > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.facts dt { font: 500 var(--t-label)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.facts dd { margin: 10px 0 0; font-size: 16px; line-height: 1.35; }

/* ---------- Stage: the phone ---------- */
.stage {
  --ph: clamp(380px, calc(100svh - 200px), 680px);
  position: relative; display: flex; flex-direction: column; align-items: center;
  transition: --glow 1s var(--ease);
}
.stage[data-k="hotel"] { --glow: #5f7fa8; }
.stage[data-k="rest"] { --glow: #b47a3c; }
.stage[data-k="ski"] { --glow: #5aa2e6; }
.stage[data-k="golf"] { --glow: #4f8a5b; }
.stage[data-k="salon"] { --glow: #b4867a; }
.stage[data-k="zahn"] { --glow: #8fa486; }
.stage[data-k="taxi"] { --glow: #e0a636; }
.stage[data-k="hw"] { --glow: #b8742f; }
.glow {
  position: absolute; left: 50%; top: calc(var(--ph) * .48); width: calc(var(--ph) * 1.5); aspect-ratio: 1;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 55%, transparent) 0%, color-mix(in srgb, var(--glow) 18%, transparent) 45%, transparent 100%);
  opacity: .55;
}
.phone-wrap { position: relative; }
/* the perspective lives in the phone's own transform: on .phone-wrap (which fades and rises in) Safari flattened
   the phone during the reveal and drew it flat until the next mouse move */
.phone3d {
  --rx: 7deg; --ry: -16deg; --rz: 1.6deg; --nudge: 0deg;
  transform: perspective(1700px) rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--nudge))) rotateZ(var(--rz));
  transform-origin: 50% 40%; transform-style: preserve-3d; transition: --nudge .5s var(--expo);
}
.phone {
  position: relative; display: block; height: var(--ph); aspect-ratio: .487;
  padding: calc(var(--ph) * .0135); border-radius: calc(var(--ph) * .078);
  background: linear-gradient(152deg, #46464b 0%, #17171a 18%, #0b0b0c 55%, #1d1d20 82%, #3a3a3f 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 0 0 calc(var(--ph) * .006) #050506,
              0 calc(var(--ph) * .08) calc(var(--ph) * .14) calc(var(--ph) * -.04) rgba(0, 0, 0, .8);
  transform-style: preserve-3d;
}
/* the back plate gives the phone its thickness when it turns */
.phone::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: #1c1c1f;
  transform: translateZ(calc(var(--ph) * -.016)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.screen {
  position: relative; display: block; height: 100%; overflow: hidden; background: #000;
  border-radius: calc(var(--ph) * .064); transform: translateZ(.5px);
}
.shot { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.shot.is-on { opacity: 1; transform: none; transition: opacity .5s var(--ease) .3s, transform 1.1s var(--expo) .3s; }
.shot.is-off { opacity: 0; transform: scale(.985); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.island {
  position: absolute; left: 50%; top: calc(var(--ph) * .028); width: 29%; height: calc(var(--ph) * .032);
  transform: translate(-50%, 0) translateZ(1px); border-radius: 99px; background: #000;
}
.sheen {
  position: absolute; inset: calc(var(--ph) * .0135); border-radius: calc(var(--ph) * .064); overflow: hidden;
  pointer-events: none; transform: translateZ(1px);
}
.sheen::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 45%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .13) 45%, rgba(255, 255, 255, .03) 60%, transparent);
  transform: skewX(-14deg);
}
.stage.swap .sheen::after { animation: sheen 1.1s var(--ease) .15s both; }
@keyframes sheen { to { left: 125%; } }
.floor {
  position: absolute; left: 50%; bottom: calc(var(--ph) * -.06); width: calc(var(--ph) * .62); height: calc(var(--ph) * .07);
  transform: translateX(-46%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent); pointer-events: none;
}

.switch { display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; margin-top: calc(var(--ph) * .09); width: max-content; }
.switch button {
  position: relative; height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 2px;
  font-size: 13.5px; color: var(--muted); overflow: hidden; transition: color .2s, border-color .2s, background-color .2s;
}
.switch button:hover { color: var(--fg); border-color: rgba(255, 255, 255, .3); }
.switch button[aria-selected="true"] { background: var(--fg); border-color: var(--fg); color: var(--ink); }
/* while the tabs change on their own, the active one shows how long it stays */
.switch button::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--terra);
  transform: scaleX(0); transform-origin: left;
}
.try.auto .switch button[aria-selected="true"]::after { animation: tick var(--cycle, 3.6s) linear both; }
@keyframes tick { to { transform: scaleX(1); } }
.caption { display: flex; align-items: center; gap: 10px; margin: calc(var(--ph) * .1) 0 0; font-size: 13.5px; color: var(--muted); min-height: 22px; }
.caption b { color: var(--fg); font-weight: 500; }
.caption .tag { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); padding: 5px 7px; border-radius: 2px; }
.cap-tap { display: none; }

/* ---------- The name field ---------- */
.try { margin-top: 30px; }
.try-label { display: block; margin-bottom: 12px; font: 500 var(--t-label)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.try-field { position: relative; }
.try-field input {
  width: 100%; height: 58px; padding: 0 186px 0 18px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 2px;
  background: rgba(255, 255, 255, .04); color: var(--fg); font: 400 19px/1 var(--font); letter-spacing: -.01em; outline: none;
  transition: border-color .2s, background-color .2s;
}
.try-field input::placeholder { color: #7c7c82; opacity: 1; }
.try-field input:hover { border-color: rgba(255, 255, 255, .32); }
.try-field input:focus { border-color: var(--terra-lit); background: rgba(255, 255, 255, .06); }
.try-note { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 400 11px/1 var(--mono); letter-spacing: .02em; color: var(--dim); pointer-events: none; }
.try .switch { justify-content: flex-start; flex-wrap: wrap; width: auto; margin-top: 12px; }

/* ---------- Full-screen preview (touch phones) ---------- */
.stage.tap .apps { pointer-events: none; }
.stage.tap .phone { cursor: pointer; }
.locked, .locked body { overflow: hidden; }
.full { position: fixed; inset: 0; z-index: 70; background: #000; animation: fullin .35s var(--ease) both; }
.full .app { opacity: 1; }
/* full screen on a real phone: its own status bar replaces the drawn one, and the close button takes that row, clear of the name */
.full .app .sb { visibility: hidden; }
.full .app .menu { display: none; }
.full-x {
  position: fixed; z-index: 71; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 12px; height: 34px; padding: 0 14px;
  border-radius: 99px; background: rgba(10, 10, 11, .62); color: #fff; font: 500 13px/1 var(--font);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .18);
}
@keyframes fullin { from { opacity: 0; transform: scale(.97); } }

/* ---------- Intro: the dot, the drawn wordmark, the flight into the header ---------- */
.intro-layer { display: none; }
.intro .intro-layer {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 50; background: var(--ink);
  transition: background-color .7s var(--ease);
}
.intro .intro-layer.open { background-color: transparent; pointer-events: none; }
.intro-mark {
  position: relative; display: inline-flex; align-items: baseline;
  font: 700 clamp(40px, 13vw, 210px)/1 var(--font); letter-spacing: .1em; transform-origin: 0 0;
}
.intro-word { display: inline-flex; }
.intro-word > span { color: transparent; transition: color .5s var(--ease); }
.intro-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.intro-svg text {
  font: inherit; letter-spacing: 0; fill: none; stroke: var(--fg); stroke-width: 1.2;
  stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len);
}
.intro-dot { transform: scale(0); }
.intro-layer.run .intro-svg text { animation: draw 1s var(--ease) both; animation-delay: calc(var(--i) * 80ms); }
.intro-layer.run .intro-word > span { color: var(--fg); transition-delay: calc(.62s + var(--i) * 70ms); }
.intro-layer.run .intro-svg { animation: fadeout .35s ease 1.15s both; }
.intro-layer.run .intro-dot { animation: pop .55s var(--expo) 1.02s both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeout { to { opacity: 0; } }
@keyframes pop { 0% { transform: scale(0); } 55% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ---------- Reveal of the page ---------- */
.js .rv, .js .phone-wrap { opacity: 0; }
.js .rv { transform: translateY(14px); }
.js .h1 .ln > span { transform: translateY(115%); }   /* below the taller mask */
.js .phone-wrap { transform: translateY(70px); }
.revealed .rv { opacity: 1; transform: none; transition: opacity .8s var(--ease) var(--d, 0s), transform 1s var(--expo) var(--d, 0s); }
.revealed .h1 .ln > span { transform: none; transition: transform 1.1s var(--expo) var(--d, 0s); }
.revealed .phone-wrap { opacity: 1; transform: none; transition: opacity .9s var(--ease) .15s, transform 1.4s var(--expo) .1s; }
.js.replay .phone-wrap { opacity: 1; transform: none; transition: none; }   /* the logo's replay leaves the phone in place (Safari) */
.intro .logo { opacity: 0; }
.landed .logo { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .phone-wrap, .js .h1 .ln > span { opacity: 1; transform: none; }
  .shot, .shot.is-on, .shot.is-off { transition: opacity .2s; transform: none; }
  .stage.swap .sheen::after, .try.auto .switch button[aria-selected="true"]::after { animation: none; }
}

/* ---------- Smaller screens ---------- */
@media (min-width: 901px) and (max-height: 820px) {
  .facts { display: none; }
  .try { margin-top: 24px; }
  .cta { margin-top: 26px; }
}
@media (max-width: 1180px) {
  .nav > a { display: none; }
  .facts > div { padding-right: 12px; }
  .facts > div + div { padding-left: 12px; }
}
@media (max-width: 900px) {
  :root { --hdr: 60px; --t-h1: clamp(2.3rem, 10.4vw, 3.6rem); }
  .hero { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; padding-top: calc(var(--hdr) + 14px); padding-bottom: 10px; }
  .hero-copy { display: contents; }
  .eyebrow { order: 1; margin-bottom: 14px; font-size: 10.5px; letter-spacing: .14em; }
  .h1 { order: 2; }
  .hero-lead, .facts, .try-label, .try-note { display: none; }
  .stage { order: 3; --ph: clamp(260px, calc(100svh - 452px), 540px); margin-top: 16px; }
  .try { order: 4; margin-top: 10px; }
  .try-field input { height: 50px; padding: 0 14px; font-size: 17px; }
  .cap-text { display: none; }
  .stage.tap .cap-tap { display: inline; }
  .glow { opacity: .45; }
  .phone3d { --rx: 4deg; --ry: -10deg; --rz: 1.2deg; }
  .try .switch { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; width: auto; max-width: none; margin: 8px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity; }
  .switch::-webkit-scrollbar { display: none; }
  .switch button { flex: none; height: 36px; padding: 0 13px; scroll-snap-align: start; }
  .caption { font-size: 12.5px; margin-top: calc(var(--ph) * .07); }
  .cta { order: 5; margin-top: 14px; }
  .cta .btn-primary { flex: 1 1 auto; }
  .cta .btn-line { display: none; }
  .facts-m { display: block; order: 6; margin: 12px 0 0; font: 400 11.5px/1.3 var(--mono); letter-spacing: .02em; color: var(--muted); text-align: center; }
  .facts-m b { color: var(--fg); font-weight: 500; }
  .nav { gap: 0; }
  .lang { margin-left: 0; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .stage { --ph: clamp(320px, calc(100svh - 548px), 560px); }   /* the trades take two rows here */
  .try .switch { justify-content: center; flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; }
  .cta .btn-primary { flex: 0 0 auto; }
  .cta { justify-content: center; }
}
/* nine tabs (eight trades and "Andere Branche"): two rows, five and four, from tablets up; phones scroll one row */
@media (min-width: 601px) {
  .try .switch { display: grid; grid-template-columns: repeat(5, auto); justify-content: stretch; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .try .switch { justify-content: center; }
}
@media (max-width: 380px) {
  .lang { display: none; }
}

@media (max-width: 1180px) { .hdr .nav .lang { display: none; } .hdr .vm-btn { display: inline-flex; } }