/* /de, the German front door — on the site system (r.css SYSTEM block, DESIGN.md), the same build as /how-it-works.
   Only what the system does not have lives here: the demo stage, the three step pictures, the Strg/⌥ swap.
   No own type sizes, section padding, radius or colour (DESIGN.md rule 1). Prefix de-. */

/* Windows keys by default, Mac keys on a Mac and on an iPhone (html.lf-os-mac / lf-os-ios are set in the head, as site.js) */
.de-mac{display:none}
html.lf-os-mac .de-mac,html.lf-os-ios .de-mac{display:inline}html.lf-os-mac kbd.de-mac,html.lf-os-ios kbd.de-mac{display:inline-flex}
html.lf-os-mac .de-win,html.lf-os-ios .de-win{display:none}
.de-pill .keys kbd.de-mac{display:none}html.lf-os-mac .de-pill .keys kbd.de-mac,html.lf-os-ios .de-pill .keys kbd.de-mac{display:inline}
html.lf-os-mac .de-pill .keys kbd.de-win,html.lf-os-ios .de-pill .keys kbd.de-win{display:none}

/* the demo sits in the hero, right under the head block (rule 5) */
.de-stage{max-width:var(--mid);margin-left:auto;margin-right:auto}
.de-rd.r-frame{padding:0;margin:0}
.de-rd .rd-desk{background:none;padding:clamp(40px,6vw,80px) clamp(16px,6vw,96px) clamp(104px,10vw,128px)}
.de-rd .rd-win{box-shadow:var(--sh-win)}
.de-rd .rd-bar b,.de-rd .rd-pill{font-size:var(--fs-small)}

/* three steps: three columns, hairlines between, a small real picture each */
.de-steps{list-style:none;margin:var(--in) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center}
.de-steps li{padding:8px clamp(20px,3vw,44px) 4px;display:flex;flex-direction:column;align-items:center}
.de-steps li+li{border-left:1px solid var(--line)}
.de-steps .r-h3{text-wrap:balance}
.de-steps .r-p{margin:12px auto 0;max-width:24ch;text-wrap:balance}
.de-pic{height:150px;width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:26px}
.de-sel{margin:0;max-width:270px;text-align:left;font:400 var(--fs-body)/1.55 var(--sans);color:var(--ink-3)}
.de-sel mark{background:var(--hl);color:var(--ink);padding:.06em .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* "Strg" and "Leertaste" are longer than "Ctrl" and "Space": a key never shrinks, so no word is cut */
.de-keys{display:flex;align-items:center;gap:10px;white-space:nowrap;font:500 var(--fs-body)/1 var(--sans);color:var(--ink-3)}
.de-keys kbd{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:66px;height:58px;padding:0 16px;border-radius:var(--r-btn);background:var(--sheet);border:1px solid var(--line-2);border-bottom-width:3px;font:500 var(--fs-body)/1 var(--sans);color:var(--ink)}
.de-keys kbd.de-mac{display:none}html.lf-os-mac .de-keys kbd.de-mac,html.lf-os-ios .de-keys kbd.de-mac{display:inline-flex}html.lf-os-mac .de-keys kbd.de-win,html.lf-os-ios .de-keys kbd.de-win{display:none}
.de-keys kbd.w{min-width:132px}
.de-mini{display:inline-flex;align-items:center;gap:11px;height:var(--chip-h);padding:0 20px 0 16px;border-radius:999px;background:var(--ink);color:var(--paper);font:500 var(--fs-body)/1 var(--sans)}
.de-mini .bars{display:flex;gap:3px;align-items:center;height:18px}
.de-mini .bars i{width:3px;height:6px;border-radius:2px;background:var(--paper);animation:deBar 1.1s ease-in-out infinite}
.de-mini .bars i:nth-child(2){animation-delay:-.25s}.de-mini .bars i:nth-child(3){animation-delay:-.5s}
.de-mini .bars i:nth-child(4){animation-delay:-.75s}.de-mini .bars i:nth-child(5){animation-delay:-.95s}
@keyframes deBar{0%,100%{height:5px}50%{height:16px}}
.de-aside{margin:var(--in) auto 0;max-width:none;text-align:center}

/* privacy: the promise in two lines, one link under it */
.de-l{display:block}
.de-more{margin:24px 0 0}

@media (max-width:820px){
  .de-steps{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
  .de-steps li{padding:40px 0}
  .de-steps li:first-child{padding-top:0}
  .de-steps li+li{border-left:0;border-top:1px solid var(--line)}
  .de-pic{height:auto;min-height:96px;margin-bottom:22px}
}
@media (max-width:520px){
  .de-br{display:none}
  .de-keys kbd{min-width:58px;height:52px;padding:0 12px}.de-keys kbd.w{min-width:112px}
}
@media (prefers-reduced-motion:reduce){.de-mini .bars i{animation:none}.de-mini .bars i:nth-child(odd){height:12px}}