/* English-first introduction, live matrix preview and installation priority. */
.header-inner{gap:28px}.header-actions{display:flex;align-items:center;gap:15px;margin-left:auto;order:3}
.header #navigation{gap:25px}.header .language-switch{display:flex;gap:2px;background:#f3f6f3;padding:3px;border:1px solid #e4ebe6;border-radius:7px;font-size:.75rem}
.language-switch a{padding:4px 8px;border-radius:4px;color:var(--muted);line-height:1.5;font-weight:600}.language-switch a[aria-current]{background:#fff;color:var(--teal);box-shadow:0 1px 3px #12351d10}
.hero{grid-template-columns:.95fr 1.15fr;gap:55px;padding-block:66px 48px;align-items:center}.hero h1{font-size:clamp(2.5rem,3.5vw,3.6rem)}
.hero .hero-description{font-size:1.04rem;line-height:1.85}.hero-copy{padding-bottom:12px}.hero .eyebrow{font-size:.68rem}.hero-actions{flex-wrap:wrap;gap:18px}.hero-actions .text-link{gap:8px;font-size:.875rem}
.button-primary{background:var(--teal);border-color:var(--teal)}.button-primary:hover{background:#065e53}.hero .button-primary{font-size:1rem;min-height:58px;box-shadow:0 5px 18px #087c6b18}
.hero-install-hint{font-size:.8rem;color:var(--teal);margin-top:13px}.hero-note{font-size:.77rem;margin-top:25px}.hero-caveat{font-size:.73rem;line-height:1.7;max-width:420px;margin-top:12px}
.preview-panel{border:1px solid #dfe8e3;border-radius:18px;background:#f5f8f5;padding:24px;min-width:0;scroll-margin-top:110px}.preview-topline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:23px}.preview-topline .tag{font-size:.63rem;letter-spacing:.05em}.demo-label{font-size:.66rem;color:#748379}.matrix-surface{padding:28px 20px 14px;background:#0e1516;border:1px solid #182324;border-radius:13px;box-shadow:0 12px 22px #13262012}.matrix-surface canvas{display:block;width:100%;height:auto;aspect-ratio:4;image-rendering:pixelated}.matrix-caption{display:flex;justify-content:space-between;padding:14px 2px 0;letter-spacing:.14em;font-size:.58rem;color:#718280}.preview-controls{display:flex;flex-wrap:wrap;gap:7px;margin-top:23px}.preview-controls button{padding:7px 10px;min-height:35px;border:1px solid #dce6df;background:transparent;border-radius:6px;font-size:.76rem;color:#65746b;line-height:1.3;transition:background .15s,color .15s}.preview-controls button:hover{background:#e4f2e9;color:var(--teal)}.preview-controls button[aria-pressed=true]{color:#fff;background:var(--teal);border-color:var(--teal)}.preview-caption{margin-top:22px;min-height:131px}.preview-caption h2{font-size:1.05rem;letter-spacing:-.025em;margin-bottom:8px}.preview-caption #preview-reading{font-size:.8rem;line-height:1.65;color:#425a4e}.preview-caption #preview-description{font-size:.78rem;line-height:1.8;margin-top:7px}.preview-play{display:block;border:0;background:none;text-decoration:underline;text-underline-offset:3px;font-size:.75rem;color:var(--teal);padding:11px 0 0}.preview-footnote{font-size:.67rem;line-height:1.8;margin-top:15px;color:#7c8b81}.preview-panel [data-preview-fallback] img{border-radius:10px}.preview-panel [data-preview-fallback] p{font-size:.85rem;margin-top:15px}
#installieren{padding-top:78px}.installer-layout{gap:80px;grid-template-columns:.85fr 1.15fr}#flash-title span{color:var(--teal)}.flash-panel{background:#edf8f2;border:1px solid #b6dace;box-shadow:0 16px 46px #145a3b07}.button-flash{min-height:61px;font-size:1.03rem;box-shadow:0 4px 12px #087c6b14}.flash-panel-top .tag{font-size:.78rem;font-weight:650}.flash-panel h3{font-size:1.8rem}.flash-panel .flash-intro{font-size:1rem}.flash-warning{color:#566c5d}.promise-strip{font-size:.81rem}.hero-caveat a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:1150px){.header-inner{gap:16px}.header #navigation{gap:17px}.header #navigation>a:not(.button){font-size:.8rem}.hero{gap:32px}.hero h1{font-size:2.8rem}.hero .hero-description{font-size:1rem}.hero .eyebrow{font-size:.6rem}.preview-panel{padding:20px}.installer-layout{gap:60px}}
@media(max-width:900px){.header #navigation>a:first-child{display:none}.hero{grid-template-columns:1fr;gap:35px}.hero h1{font-size:3.4rem}.hero-copy{max-width:640px}.hero .hero-description{max-width:580px}.hero .eyebrow{font-size:.72rem}.preview-panel{max-width:680px;width:100%;padding:27px}.preview-topline .tag{font-size:.73rem}.demo-label{font-size:.75rem}.preview-controls button{font-size:.875rem;padding:8px 13px}.preview-caption{min-height:105px}.preview-caption #preview-reading,.preview-caption #preview-description{font-size:.875rem}.preview-footnote{font-size:.75rem}.installer-layout{grid-template-columns:1fr;gap:35px}#installieren{padding-top:65px}.section-copy>p:not(.eyebrow){max-width:600px}.requirements{max-width:600px}}
@media(max-width:540px){.header-actions{order:initial;margin-left:auto;gap:9px}.header .language-switch{position:static;flex-direction:row!important;border:1px solid #e4ebe6!important;padding:3px!important;font-size:.75rem;gap:2px!important}.header .language-switch a{display:inline-block!important;font-size:.75rem!important;padding:4px 7px!important}.header #navigation>a:first-child{display:block}.header #navigation{gap:4px}.header .brand img{width:124px}.hero{padding-top:40px;gap:27px}.hero h1{font-size:clamp(2rem,8.5vw,2.8rem)}.hero .eyebrow{font-size:.59rem}.hero .hero-description{font-size:.98rem}.hero .button-primary{min-height:54px;font-size:.9rem}.hero-actions{gap:15px}.hero-install-hint{font-size:.7rem}.hero-note{font-size:.74rem;margin-top:20px}.hero-caveat{font-size:.69rem}.preview-panel{padding:18px;border-radius:12px}.preview-topline{margin-bottom:17px;gap:5px}.preview-topline .tag{font-size:.59rem}.demo-label{font-size:.6rem}.matrix-surface{padding:22px 11px 12px;border-radius:9px}.matrix-caption{font-size:.5rem}.preview-controls{gap:6px;margin-top:18px}.preview-controls button{font-size:.77rem;padding:8px 9px;min-height:36px}.preview-caption{min-height:142px;margin-top:20px}.preview-caption #preview-reading,.preview-caption #preview-description{font-size:.8rem}.preview-caption h2{font-size:1rem}.preview-footnote{font-size:.69rem}.flash-panel-top .tag{font-size:.68rem}.button-flash{font-size:.95rem;min-height:58px}.flash-panel h3{font-size:1.65rem}}

/* Keep primary navigation and controls legible on narrow screens. */
.header #navigation>a.button{display:inline-flex}
.hero-caveat,.preview-footnote{font-size:.8rem;color:#58695f}
@media(max-width:620px) and (min-width:541px){.header #navigation>a:not(.button){display:none}.header #navigation>.button{font-size:.75rem;padding-inline:12px;gap:8px}}
@media(max-width:540px){.hero-caveat,.preview-footnote{font-size:.8rem}.hero-install-hint{font-size:.8rem}.preview-topline .tag,.demo-label{font-size:.7rem}}

/* A real product image leads; the interactive example follows immediately. */

.preview-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center;padding-block:25px 65px;scroll-margin-top:110px}.preview-intro h2{font-size:clamp(2.1rem,3vw,2.9rem)}.preview-intro>p:not(.eyebrow){max-width:350px;margin-top:22px;font-size:.94rem;line-height:1.85}.preview-intro>.text-link{margin-top:17px}.preview-section .preview-panel{width:100%;max-width:none}.preview-controls button,.preview-caption #preview-reading,.preview-caption #preview-description,.preview-play{font-size:.875rem}.preview-caption{min-height:110px}
@media(max-width:900px){.preview-section{grid-template-columns:1fr;gap:25px;padding-block:12px 48px}.preview-intro>p:not(.eyebrow){max-width:580px}.preview-section .preview-panel{max-width:680px}}
@media(max-width:540px){.hero{padding-bottom:35px}.preview-section{padding-bottom:40px}.preview-intro .eyebrow{margin-bottom:15px}.preview-intro>p:not(.eyebrow){font-size:.88rem}.preview-caption{min-height:130px}}

/* Bedside scene: the copy stays left of the clock; the image fills the hero. */
.hero.hero-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  min-height: 720px;
  padding: 76px 0 86px;
  margin-bottom: 62px;
  background: #181d19;
}
.hero-scene .hero-background { position: absolute; inset: 0; margin: 0; }
.hero-scene .hero-background img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: scale(1.5);
  transform-origin: left center;
}
.hero-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #101814f2 0%, #101814e6 25%, #101814c2 40%, #10181426 64%, transparent 100%),
    linear-gradient(0deg, #11150f70, transparent 38%);
}
.hero-scene .hero-content { position: relative; z-index: 2; }
.hero-scene .hero-copy { width: 44%; max-width: 540px; padding: 0; }
.hero-scene h1 { color: #fffaf2; font-size: clamp(2.65rem, 3.65vw, 3.85rem); text-shadow: 0 2px 20px #0003; }
.hero-scene h1 span { color: #8ce8cd; }
.hero-scene .eyebrow { color: #b4d4c5; font-size: .72rem; }
.hero-scene .pixel-cluster { color: #8ce8cd; }
.hero-scene .hero-description { max-width: 470px; color: #eee9df; font-size: 1rem; line-height: 1.8; }
.hero-scene .button-primary { color: #133b2e; background: #8ce8cd; border-color: #8ce8cd; box-shadow: 0 4px 20px #0002; }
.hero-scene .button-primary:hover { background: #b2f4df; border-color: #b2f4df; }
.hero-scene .text-link { color: #fff5e4; }
.hero-scene .text-link:hover { color: #8ce8cd; }
.hero-scene .hero-install-hint { color: #c5e2d5; font-size: .8rem; }
.hero-scene .hero-note { color: #e0dfd3; font-size: .8rem; }
.hero-scene .tiny-dot { background: #8ce8cd; }
.hero-scene .hero-caveat { max-width: 455px; color: #d2cdc3; font-size: .8rem; }
.hero-scene a:focus-visible { outline-color: #b2f4df; }
.hero-scene .hero-background figcaption {
  position: absolute;
  right: max(24px, calc((100% - var(--container)) / 2));
  bottom: 25px;
  z-index: 2;
  margin: 0;
  padding: 5px 9px;
  color: #e8dfd0;
  background: #171b1766;
  border-radius: 4px;
  font-size: .72rem;
}
@media (min-width: 901px) and (max-width: 1150px) {
  .hero-scene .hero-background img { transform: scale(1.65); }
  .hero-scene .hero-copy { width: 46%; }
  .hero-scene h1 { font-size: 2.65rem; }
}
@media (max-width: 900px) {
  .hero.hero-scene { min-height: 0; padding: 52px 0 340px; margin-bottom: 45px; }
  .hero-scene .hero-copy { width: 100%; max-width: 620px; }
  .hero-scene .hero-description { max-width: 580px; }
  .hero-scene .hero-background { top: auto; height: 540px; }
  .hero-scene .hero-background img { transform: none; object-position: 50% 55%; }
  .hero-scene::before {
    background: linear-gradient(180deg, #181d19 0%, #181d19 44%, #181d19eb 55%, #181d1900 76%, #11150f55 100%);
  }
  .hero-scene .hero-caveat { max-width: 560px; }
  .hero-scene .hero-background figcaption { right: 22px; bottom: 18px; }
}
@media (max-width: 540px) {
  .hero.hero-scene { padding-top: 38px; padding-bottom: 310px; margin-bottom: 32px; }
  .hero-scene h1 { font-size: clamp(2.05rem, 8.5vw, 2.8rem); }
  .hero-scene .eyebrow { font-size: .65rem; }
  .hero-scene .hero-description { font-size: .95rem; line-height: 1.75; }
  .hero-scene .hero-background { height: 430px; }
  .hero-scene .hero-background img { transform: scale(1.2); transform-origin: center; }
  .hero-scene::before {
    background: linear-gradient(180deg, #181d19 0%, #181d19 49%, #181d19f2 60%, #181d1900 80%, #11150f55 100%);
  }
  .hero-scene .hero-background figcaption { right: 19px; font-size: .68rem; }
}

/* A quiet buying guide, directly after the USB installer. */
.hardware-section { padding-block: 88px; background: var(--pale); border-block: 1px solid #dcebe3; }
.hardware-heading { margin-bottom: 48px; }
.hardware-heading > p { font-size: 1rem; max-width: 355px; }
.shop-region { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 32px; padding-block: 22px; margin-bottom: 38px; border-block: 1px solid #cddfd5; }
.shop-region-control { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.shop-region label { font-size: .9375rem; font-weight: 550; }
.shop-region select { max-width: 100%; min-height: 46px; padding: 10px 36px 10px 14px; border: 1px solid #b8d3c5; border-radius: 7px; background: #fff; color: var(--ink); font: inherit; font-size: .9375rem; cursor: pointer; }
.shop-region select:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.shop-region > p { max-width: 400px; font-size: .875rem; line-height: 1.7; }
.shop-support-note { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 38px; padding: 22px 24px; border: 1px solid #c5dfd1; border-radius: 10px; background: #fff; }
.shop-support-note > img { flex-shrink: 0; margin-top: 3px; }
.shop-support-note strong { font-size: 1rem; font-weight: 600; }
.shop-support-note p { margin-top: 6px; font-size: .9375rem; line-height: 1.7; }
.shop-support-note small { display: block; margin-top: 10px; font-size: .8125rem; color: var(--muted); line-height: 1.6; }
.hardware-links .hardware-shop-link { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.shop-affiliate-badge { grid-column: 1 / -1; justify-self: start; font-size: .75rem; line-height: 1.5; font-weight: 500; color: var(--teal); background: var(--pale); border-radius: 4px; padding: 3px 6px; }
.shop-fallback { margin-top: 32px; font-size: .875rem; }
.shop-fallback summary { cursor: pointer; color: var(--teal); padding-block: 12px; }
.shop-fallback > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-block: 16px; }
.shop-fallback h3 { margin-bottom: 14px; }
.shop-fallback a { display: block; padding-block: 7px; text-decoration: underline; text-underline-offset: 3px; }
.hardware-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hardware-item { display: flex; flex-direction: column; min-width: 0; padding-inline: 36px; }
.hardware-item:first-child { padding-left: 0; }
.hardware-item:last-child { padding-right: 0; }
.hardware-item + .hardware-item { border-left: 1px solid #cddfd5; }
.hardware-visual { margin-bottom: 25px; }
.hardware-picture { overflow: hidden; aspect-ratio: 4 / 3; background: #fff; border: 1px solid #dcebe3; border-radius: 12px; }
.hardware-picture img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.hardware-picture--clock img, .hardware-picture--film img { object-fit: cover; padding: 0; }
.hardware-visual figcaption { margin-top: 9px; font-size: .75rem; line-height: 1.6; color: var(--muted); }
.hardware-label { font-size: .875rem; font-weight: 550; color: var(--teal); margin-bottom: 18px; }
.hardware-item h3 { font-size: 1.55rem; line-height: 1.25; margin-bottom: 18px; }
.hardware-item > p:not(.hardware-label) { font-size: 1rem; line-height: 1.75; }
.hardware-item > p.hardware-detail { font-size: .875rem; margin-top: 16px; }
.hardware-links { display: grid; justify-items: start; gap: 5px; margin-top: auto; padding-top: 22px; }
.hardware-links .text-link { font-size: .9375rem; color: var(--teal); gap: 12px; }
.hardware-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hardware-links a > span { flex-shrink: 0; }
.hardware-secondary { font-size: .875rem; padding-block: 8px; }
.hardware-accessory .hardware-label { color: var(--muted); }
.hardware-partner { flex-wrap: wrap; gap: 14px; padding: 16px; margin-top: 24px; background: #fff; border: 1px solid #cddfd5; border-radius: 8px; }
.hardware-partner strong { overflow-wrap: anywhere; }
.hardware-partner small { font-size: .8125rem; }
#hardware-copy-status:not(.sr-only) { font-size: .875rem; margin-top: 12px; }
.hardware-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; border-top: 1px solid #cddfd5; margin-top: 42px; padding-top: 24px; }
.hardware-notes p { font-size: .875rem; line-height: 1.75; }
.hardware-notes p:first-child { color: var(--ink); }
@media (max-width: 1100px) {
  .hardware-item { padding-inline: 24px; }
}
@media (max-width: 800px) {
  .hardware-section { padding-block: 60px; }
  .hardware-heading { display: block; margin-bottom: 36px; }
  .hardware-heading > p { margin-top: 20px; max-width: 560px; }
  .hardware-grid { grid-template-columns: 1fr; gap: 30px; }
  .shop-region { align-items: flex-start; }
  .shop-fallback > div { grid-template-columns: 1fr; }
  .hardware-item { padding-inline: 0; }
  .hardware-item + .hardware-item { border-left: 0; border-top: 1px solid #cddfd5; padding-top: 30px; }
  .hardware-item h3 { margin-bottom: 14px; }
  .hardware-picture { max-height: 340px; }
  .hardware-picture--film img { object-fit: contain; }
  .hardware-label { margin-bottom: 12px; }
  .hardware-links { padding-top: 16px; }
  .hardware-notes { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
}