/* meinemediathek.de, theme "kinosaal" (2026-10): a dark cinema, like the skills' own pages.
   Contrast targets: body text 7:1 (WCAG AAA), large text and UI 4.5:1; tools/screenshots/check-site.mjs checks.
   Motion only without prefers-reduced-motion; every moving thing can be paused. */

/* ---------- fonts (self-hosted, SIL OFL; no third-party requests) ---------- */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  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: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
}
/* the voice: spoken commands in a warm serif italic, like the skills' "Film ab: „Alexa, Film 3“" in Bookerly */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #0c0b09;            /* the dark of the hall, warm */
  --bg-raised: #15130f;
  --card: #1b1914;
  --line: #3a352b;
  --text: #f6f3ec;          /* 18.5:1 on --bg */
  --text-2: #cfc8bb;        /* 12:1 on --bg, 10:1 on --card */
  --accent: #ffdd00;        /* Meine Mediathek's signal yellow, 15:1 on --bg */
  --on-accent: #17150f;
  --focus: #ffffff;
  --beam: 255, 221, 0;      /* the projector's light */
  --radius: 18px;
  --radius-s: 10px;
  --max: 1200px;
  /* text measure: about 70 characters (75 at most) of Atkinson per line (WCAG 1.4.8 asks for at most 80); 1ch is the width of
     a "0", and German text in Atkinson fits about 1.45 characters into it, so 72ch gave 100 or more */
  --measure: 32em;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --voice: "Fraunces", Georgia, "Times New Roman", serif;
  --step--1: clamp(0.94rem, 0.9rem + 0.2vw, 1.03rem);
  --step-0: clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  --step-1: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.3vw, 2.4rem);
  --step-3: clamp(2.1rem, 1.5rem + 2.8vw, 3.8rem);
  --step-4: clamp(2.6rem, 1.6rem + 4.8vw, 5.6rem);
}
@media (prefers-contrast: more) {
  :root { --text-2: #ece6da; --line: #8a8170; --bg: #000; --card: #111; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--step-0)/1.6 var(--font);
  font-feature-settings: "kern"; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { text-decoration-thickness: 0.14em; }
h1, h2, h3, h4 { line-height: 1.12; margin: 0 0 0.5em; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
ul, ol { padding-left: 1.3em; }
strong, b { font-weight: 750; }
::selection { background: var(--accent); color: var(--on-accent); }

/* the focus: white, thick, with a dark halo, so it shows on the yellow and on photos (like the skills' white frame) */
:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.85);
}
:focus:not(:focus-visible) { outline: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100; padding: 0.8rem 1.2rem;
  background: var(--accent); color: var(--on-accent); font-weight: 800; border-radius: var(--radius-s); text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: clamp(3.5rem, 7vw, 6rem); position: relative; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em; margin: 0 0 1rem;
  font-size: var(--step--1); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2);
}
.eyebrow::before { content: ""; width: 4px; height: 1.2em; border-radius: 2px; background: var(--skill-accent, var(--accent)); }
/* "Kostenlos · ohne Abo · ohne Konto · ohne Werbung" (about 545 px): a row of its own across the hero, above text and
   device, so it stays on one line wherever the page has room (the text column next to the device is only 400-530 px);
   on phones two even lines, never "· ohne Werbung" alone */
.hero .wrap { container-type: inline-size; }
.hero .eyebrow-split { grid-column: 1 / -1; justify-self: start; margin-bottom: calc(1rem - clamp(2rem, 5vw, 4.5rem)); } /* the grid gap is meant for the columns */
.eyebrow-split > span { display: flex; flex-direction: column; }
.eyebrow-split > span > span { white-space: nowrap; }
.eyebrow-split .sep { display: none; }
.eyebrow-split::before { align-self: stretch; height: auto; }
@container (min-width: 560px) {
  .eyebrow-split > span { display: block; }
  .eyebrow-split .sep { display: inline; }
}
@container (max-width: 300px) { .eyebrow-split { letter-spacing: 0.06em; } }
.lead { font-size: var(--step-1); color: var(--text-2); line-height: 1.5; }

/* spoken commands */
.voice { font-family: var(--voice); font-style: italic; font-weight: 420; letter-spacing: 0; }
q.voice, .voice-quote { quotes: "„" "“"; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 48px;
  padding: 0.75em 1.35em; border-radius: 999px; border: 2px solid transparent;
  font: 800 var(--step-0)/1.1 var(--font); text-decoration: none; cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.btn-primary { background: var(--skill-accent, var(--accent)); color: var(--skill-on-accent, var(--on-accent)); }
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
/* outlined buttons (ghost, pause, menu): the same light rim and faint fill, text centred by line-height 1 */
.btn-ghost { background: rgba(255, 255, 255, 0.05); color: var(--text); border-color: rgba(255, 255, 255, 0.32); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.1); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
@media (forced-colors: active) { .btn { border-color: ButtonText; } }

/* ---------- header ---------- */
/* anchors and the keyboard focus stay clear of the sticky header (up to 104 px when the menu is a row of its own) */
html { scroll-padding-top: 120px; }
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12, 11, 9, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); text-decoration: none; font-size: 1.3rem; }
.brand svg { width: 34px; height: 34px; }
.wordmark { white-space: nowrap; }
.wordmark-hl { color: var(--brand, #ffdd00); }
.skill-card .wordmark-hl { color: inherit; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; flex-wrap: wrap; }
.nav a {
  display: block; padding: 0.55rem 0.85rem; border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 650;
}
.nav a:hover { background: rgba(255, 255, 255, 0.07); }
.nav a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.nav-toggle { display: none; }
/* the menu in three steps as the window narrows, so it folds only when it has to: next to the brand with less
   room between the entries, then on a row of its own below the brand, then behind the menu button.
   Measured 2026-10-13 on the home page, the skill pages and the landing pages, each with about 30 px to spare: one
   row with the usual room down to 1190 px, with less room down to 1100, the row below the brand down to 840 */
@media (max-width: 1219px) and (min-width: 870px) {
  .nav ul { gap: 0; }
  .nav a { padding-inline: 0.55rem; }
}
@media (max-width: 1129px) and (min-width: 870px) {
  .site-header .wrap { flex-wrap: wrap; row-gap: 0.25rem; padding-top: 0.6rem; }
  .nav { flex-basis: 100%; margin-inline: -0.55rem; padding-bottom: 0.45rem; }
}
/* a skill's own address has "aus der Familie von Meine Mediathek" next to the brand: the menu is always below it */
@media (min-width: 870px) {
  .site-header.is-landing .wrap { flex-wrap: wrap; row-gap: 0.25rem; padding-top: 0.6rem; }
  .site-header.is-landing .nav { flex-basis: 100%; margin-inline: -0.85rem; padding-bottom: 0.45rem; }
}
@media (max-width: 1219px) and (min-width: 870px) { .site-header.is-landing .nav { margin-inline: -0.55rem; } }
@media (max-width: 869px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0 1.1rem;
    background: rgba(255, 255, 255, 0.05); color: var(--text); border: 2px solid rgba(255, 255, 255, 0.32); border-radius: 999px; font: 700 1rem/1 var(--font); cursor: pointer;
  }
  .nav-toggle svg { width: 1.25em; height: 1.25em; flex: none; }
  .nav-toggle:hover, .nav-toggle[aria-expanded="true"] { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.1); }
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg-raised); border-bottom: 1px solid var(--line); display: none; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; padding: 0.75rem var(--gutter) 1.25rem; }
  .nav a { padding: 0.9rem 0.5rem; border-radius: var(--radius-s); font-size: 1.15rem; }
}
/* without JS the menu is always there */
.no-js .nav { display: block; position: static; }
.no-js .nav-toggle { display: none; }

/* ---------- hero: the hall, the beam, the screen ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem); isolation: isolate; }
.hero::before {
  /* the projector's beam from the top right onto the screen */
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 120%; height: 140%; z-index: -2;
  background:
    radial-gradient(ellipse 40% 30% at 72% 52%, rgba(var(--beam), 0.16), transparent 70%),
    conic-gradient(from 200deg at 96% -6%, transparent 0deg, rgba(var(--beam), 0.07) 14deg, rgba(var(--beam), 0.12) 22deg, rgba(var(--beam), 0.05) 32deg, transparent 44deg);
  filter: blur(6px);
}
.hero::after {
  /* film grain, very faint */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.07; pointer-events: none; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 960px) { .hero .wrap { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: 0.35em; }
.hero h1 .line2 { display: block; color: var(--accent); }
.hero-voice { font-size: var(--step-2); line-height: 1.25; margin: 0 0 1.4rem; color: var(--text); }
.hero-voice .term { color: var(--accent); white-space: nowrap; display: inline-block; min-width: 4ch; }
.hero-voice .term.is-changing { animation: term-in 0.6s cubic-bezier(.2, .7, .2, 1); }
@keyframes term-in { from { opacity: 0; transform: translateY(0.35em); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.hero .lead { margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.6rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: var(--step--1); }
.hero-meta li { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-meta svg { width: 1.1em; height: 1.1em; color: var(--accent); }
/* the stance under the facts: whom the skill is built for (review C10, 2026-10-13) */
.hero-for { margin: 0.9rem 0 0; max-width: 34rem; color: var(--text); font-weight: 600; line-height: 1.45; }

/* the Echo Show, drawn: bezel, screen, the fabric wedge behind */
.device { position: relative; margin: 0; }
.device-show { aspect-ratio: 1280 / 800; width: 100%; }
.device-frame {
  position: relative; height: 100%; padding: 3.2%; border-radius: 4.5% / 7%;
  background: linear-gradient(160deg, #26241f, #0b0b0a 60%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 120px -20px rgba(var(--beam), 0.25);
}
.device-frame::after {
  /* the camera dot */
  content: ""; position: absolute; top: 1.2%; left: 50%; width: 0.9%; aspect-ratio: 1; border-radius: 50%; background: #1d1c19; transform: translateX(-50%);
}
.device-screen { position: relative; height: 100%; overflow: hidden; border-radius: 1.4% / 2.2%; background: #000; }
.device-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.device-screen img.is-shown { opacity: 1; }
.device-screen::after {
  /* the glass */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 35%);
}
.device-base {
  position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -7%; height: 16%; border-radius: 0 0 40% 40% / 0 0 100% 100%;
  background: repeating-linear-gradient(90deg, #22201b 0 2px, #1a1915 2px 4px); filter: brightness(0.9);
}
.device-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1rem; margin-top: 2.6rem; color: var(--text-2); font-size: var(--step--1); }
.device-caption > span:first-child { flex: 1 1 16rem; }
.device-caption .skill-dots { margin-left: auto; }
.device-caption .skill-dots { display: flex; gap: 0.45rem; }
.skill-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--dot); opacity: 0.35; transition: opacity 0.3s, transform 0.3s; }
.skill-dot.is-active { opacity: 1; transform: scale(1.25); }
.pause-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 44px; padding: 0 1rem; border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); color: var(--text); font: 700 var(--step--1)/1 var(--font); cursor: pointer;
}
.pause-btn svg { width: 1em; height: 1em; }

/* ---------- family ---------- */
/* the home page shows the six as a strip; the cards are on /skills/ (2026-10-13) */
.family-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 0.8rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.family-strip li { display: flex; }
.family-strip a {
  flex: 1; display: flex; align-items: center; gap: 0.75rem; min-height: 64px; padding: 0.7rem 1rem; border-radius: var(--radius-s);
  background: var(--card); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text); font-weight: 750; text-decoration: none;
}
.family-strip a:hover { border-color: var(--skill-accent); }
.family-strip svg { flex: none; width: 40px; height: 40px; }
.family-more { margin: 1.6rem 0 0; }
.skills-page .family-grid { margin-top: 0; }
.family-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1.2rem; margin-top: 2.5rem; padding: 0; list-style: none; }
.skill-card {
  --skill-accent: var(--accent);
  position: relative; display: flex; flex-direction: column; gap: 0.9rem; padding: 1.6rem 1.6rem 1.4rem; min-height: 100%;
  border-radius: var(--radius); background: var(--skill-page, var(--card)); border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden; isolation: isolate; transition: transform 0.25s ease, border-color 0.25s ease;
}
.skill-card::before {
  /* the skill's light falls on the card when it is pointed at */
  content: ""; position: absolute; inset: -40% -20% auto; height: 120%; z-index: -1; opacity: 0.18; transition: opacity 0.35s ease;
  background: radial-gradient(ellipse 60% 55% at 50% 0%, var(--skill-accent-text), transparent 70%);
}
.skill-card:hover, .skill-card:focus-within { border-color: var(--skill-accent-text); transform: translateY(-3px); }
.skill-card:hover::before, .skill-card:focus-within::before { opacity: 0.38; }
.skill-card .emblem { width: 64px; height: 64px; }
.skill-card h2 { margin: 0; font-size: var(--step-1); }
.skill-card h2 a { color: var(--text); text-decoration: none; }
.skill-card h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* the whole card is the link */
.skill-card .genre { margin: 0; color: var(--skill-accent-text); font-weight: 750; }
.skill-card .claim { margin: 0; color: var(--text-2); }
.skill-card .say { margin: auto 0 0; padding-top: 0.6rem; font-size: var(--step-1); color: var(--text); }
.skill-card .store { position: relative; z-index: 2; align-self: flex-start; font-weight: 700; color: var(--skill-accent-text); }

/* ---------- how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.2rem; margin: 2.5rem 0 0; padding: 0; list-style: none; counter-reset: step; }
.step { position: relative; padding: 1.8rem; border-radius: var(--radius); background: var(--card); border: 1px solid rgba(255, 255, 255, 0.06); counter-increment: step; }
.step::before {
  content: counter(step); display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1rem; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-weight: 900; font-size: 1.5rem;
}
.step h3 { margin-bottom: 0.4rem; }
.step .voice { display: block; font-size: var(--step-1); color: var(--accent); margin: 0.6rem 0 0.4rem; }
.wave { display: flex; align-items: center; gap: 4px; height: 36px; margin-top: 0.8rem; }
.wave[hidden] { display: none; }
.search-progress { display: flex; align-items: center; gap: 0.9rem; margin-top: 1rem; }
.search-progress .search-status { margin-top: 0; }
.wave-sm { height: 26px; gap: 3px; margin: 0; flex: none; }
.wave-sm span { width: 4px; }
.wave-start { justify-content: center; height: 40px; margin: 0.3em 0 0; }
.wave span { width: 5px; border-radius: 3px; background: var(--accent); opacity: 0.8; height: calc(var(--h) * 1%); }
@media (prefers-reduced-motion: no-preference) {
  .wave.is-live span { animation: wave 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.13s); }
  @keyframes wave { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
}

/* the note for Alexa+ (scripts/alexa-plus.js): a warning in amber, the same on every skill's page */
.warn, .warn-line { --warn: #ffb547; }
.warn {
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem 1.2rem; align-items: start; margin: 2rem 0 0; padding: 1.4rem 1.6rem;
  border-radius: var(--radius); background: #241a0a; border: 2px solid var(--warn); border-left-width: 8px; color: var(--text);
}
.warn .warn-icon { width: 34px; height: 34px; color: var(--warn); }
.warn h3, .warn > div > h3:first-child { margin: 0 0 0.5rem; font-size: var(--step-1); color: var(--warn); }
.warn li { color: var(--text); }
.warn p { margin: 0 0 0.6rem; max-width: var(--measure); }
.warn ol { margin: 0 0 0.8rem; padding-left: 1.3rem; display: grid; gap: 0.6rem; max-width: var(--measure); }
.warn li::marker, .warn ol > li::marker { color: var(--warn); font-weight: 800; }
.warn .voice { display: block; margin-top: 0.3rem; font-family: var(--voice); font-style: italic; font-size: 1.15em; }
.warn p:last-child { margin: 0; color: var(--text-2); }
@media (max-width: 520px) { .warn { grid-template-columns: 1fr; padding: 1.2rem; } }
.warn-line {
  display: flex; gap: 0.7rem; align-items: flex-start; margin: 1.6rem 0 0; padding: 0.9rem 1.1rem; max-width: none;
  border-radius: var(--radius-s); background: #241a0a; border-left: 6px solid var(--warn); color: var(--text);
}
.warn-line .warn-icon { flex: none; width: 24px; height: 24px; margin-top: 0.1em; color: var(--warn); }
.warn-line .voice { font-family: var(--voice); font-style: italic; }
.warn-line a { color: var(--warn); }
.note {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.2rem; align-items: start; margin-top: 2rem; padding: 1.4rem 1.6rem;
  border-radius: var(--radius); background: #1f1c10; border: 2px solid rgba(var(--beam), 0.55);
}
.note svg { width: 32px; height: 32px; color: var(--accent); }
.note h3 { margin: 0 0 0.3rem; font-size: var(--step-0); }
.note p { margin: 0 0 0.4rem; }
.note p:last-child { margin: 0; }

/* ---------- live search ---------- */
.try { background: linear-gradient(180deg, transparent, var(--bg-raised) 18%, var(--bg-raised) 82%, transparent); }
.search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.8rem; align-items: end; margin-top: 2rem; }
@media (max-width: 720px) { .search-form { grid-template-columns: 1fr; } }
.field label { display: block; margin-bottom: 0.4rem; font-weight: 750; }
.field input, .field select {
  width: 100%; min-height: 56px; padding: 0 1.1rem; border-radius: var(--radius-s); border: 2px solid #6b6455;
  background: #0d0c0a; color: var(--text); font: 500 var(--step-0) var(--font);
}
.field input::placeholder { color: #a39b8c; }
/* "Alexa, suche nach" stands in the field before the typed term, in the voice of spoken sentences */
.voice-field { display: flex; align-items: center; min-height: 56px; border-radius: var(--radius-s); border: 2px solid #6b6455; background: #0d0c0a; }
.voice-field:focus-within { border-color: var(--accent); }
.voice-field label { flex: none; margin: 0; padding-left: 1.1rem; font: italic 500 var(--step-1) var(--voice); color: var(--text); white-space: nowrap; }
.voice-field input { flex: 1; min-width: 0; min-height: 52px; padding: 0 1.1rem 0 0.4em; border: 0; background: transparent; font-size: var(--step-1); }
.voice-field input:focus-visible { outline: none; box-shadow: none; }
/* the focus ring around the whole field, so it never covers "Alexa, suche nach" */
.voice-field:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.85); }
.field input:focus-visible, .field select:focus-visible { border-color: var(--accent); }
.search-form .btn { min-height: 56px; }
.privacy-hint { margin-top: 0.9rem; font-size: var(--step--1); color: var(--text-2); max-width: var(--measure); }
/* the suggestions are terms to say: the voice's type, quotes and a tint in the skill's accent; the quotes stay in the
   text colour, in yellow and bold the low „ and the high “ drew a diagonal that made the italic buttons look skewed */
.suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin: 1.2rem 0 0; }
.suggest-label { margin: 0; color: var(--text-2); font-weight: 650; }
.suggestions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.suggestions button {
  min-height: 46px; padding: 0 1.15rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text);
  font: italic 500 var(--step-0) var(--voice);
}
.suggestions button:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
.suggestions button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .suggestions button { transition: background 0.15s, border-color 0.15s, transform 0.15s; }
  .suggestions button:hover { transform: translateY(-2px); }
}

/* the results like the Echo Show draws them: header, a detail box and 2x3 tiles, the footer with "Film ab".
   From 1000 px inside an Echo Show 8 (16:10, the screen scales with the frame: container query units);
   below as a plain list, readable at any size */
.results { margin-top: 2.2rem; }
.results[hidden] { display: none; }
.apl-screen { --scr-page: var(--bg-raised); --scr-card: var(--card); display: flex; flex-direction: column; gap: 1rem; background: var(--scr-page); }
.apl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; color: var(--text-2); }
.apl-head h3 { margin: 0; color: var(--text); font-size: var(--step-1); }
.apl-bar { width: 4px; align-self: stretch; min-height: 1.4em; border-radius: 2px; background: var(--accent); }
.apl-brand { display: none; align-items: center; gap: 0.45em; margin-left: auto; font-weight: 700; color: var(--text); }
.apl-brand svg { width: 1.6em; height: 1.6em; }
.apl-clock { display: none; font-weight: 800; color: var(--text); }
.results-stage { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr); gap: 1rem; min-height: 0; }
@media (max-width: 900px) { .results-stage { grid-template-columns: 1fr; } }
.detail { padding: 1.4rem; border-radius: var(--radius); background: var(--scr-card); border: 1px solid rgba(255, 255, 255, 0.07); align-self: start; }
.detail .meta { color: var(--text-2); font-weight: 650; margin-bottom: 0.3rem; }
.detail h4 { font-size: var(--step-1); margin: 0 0 0.6rem; }
.detail p { color: var(--text); }
.detail-video {
  margin: 0 0 1rem; border-radius: var(--radius-s); overflow: hidden; aspect-ratio: 16 / 9; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 120%, rgba(var(--beam), 0.25), #000 70%);
}
.detail-video video { width: 100%; height: 100%; background: #000; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.detail-actions .btn { min-height: 44px; font-size: var(--step--1); }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; align-content: start; }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } }
.tile {
  display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 120px; padding: 0; text-align: left; cursor: pointer;
  border-radius: 14px; background: var(--scr-card); color: var(--text); border: 3px solid transparent; overflow: hidden; font: inherit;
  border-left: 8px solid var(--chan, #555);
}
.tile[aria-pressed="true"] { border-color: #fff; border-left-color: var(--chan, #555); }
.tile-top { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem; background: rgba(127, 127, 127, 0.12); color: var(--text-2); font-weight: 650; font-size: var(--step--1); }
.tile-num { display: grid; place-items: center; width: 2.1em; height: 2.1em; flex: none; border-radius: 50%; background: var(--mark, var(--accent)); color: var(--on-accent); font-weight: 900; box-shadow: 0 0 0 2px rgba(255,255,255,0.85); }
/* margin, not padding: overflow clips at the padding edge, a padding would show the next line */
.tile-title { margin: 0.6rem 0.9rem 0.8rem; font-weight: 750; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: calc(3 * 1.3em); }
.apl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.2rem; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.pager[hidden] { display: none; }
.pill {
  min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06);
  color: var(--text); font: 700 var(--step--1) var(--font); cursor: pointer;
}
.pill:disabled { opacity: 0.45; cursor: default; }
.pager-status { color: var(--text-2); font-weight: 650; }
.say-it { margin: 0; color: var(--text-2); max-width: none; }
.say-it .voice { color: var(--text); font-size: var(--step-1); }
.search-status { min-height: 1.6em; margin-top: 1rem; color: var(--text-2); }
.search-status.is-error { color: #ffb4a8; }

/* ---------- the Echo Show 8 (hero and results): bezel, camera, buttons, fabric body ---------- */
.show8 { position: relative; width: 100%; padding-top: 1.2%; isolation: isolate; }
.show8-bezel {
  position: relative; padding: 3.1% 3.3% 3.4%; border-radius: 3.4% / 5.4%;
  background: linear-gradient(170deg, #1c1c1d 0%, #0a0a0b 35%, #050506 100%);
  /* the light grey edge of the housing round the black glass */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 3px #cfcfca, 0 0 0 4px #9d9d98, 0 40px 70px -28px rgba(0, 0, 0, 0.95), 0 0 120px -30px rgba(var(--beam), 0.28);
}
.show8-bezel::before {
  /* the glass: a soft reflection over bezel and screen */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 22%, transparent 40%);
}
.show8-cam {
  /* the camera top right, shutter open: the lens in its ring */
  position: absolute; top: 0.9%; right: 8%; width: 1.5%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #6d7f9c 0 9%, #233149 22%, #0a0e16 55%, #1a1a1c 62%, #2b2b2e 70%, #111 74%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.show8-buttons { position: absolute; top: 0; right: 11%; display: flex; gap: 1.4%; width: 16%; height: 1.6%; z-index: -1; }
.show8-buttons span { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(#e4e4e0, #b9b9b4); }
.show8-buttons span:last-child { flex: 0.8; }
.show8-body {
  /* the fabric body behind the screen: a wedge that shows below and at the sides */
  position: absolute; z-index: -1; left: 3%; right: 3%; top: 18%; bottom: -5.5%; border-radius: 6% / 12%;
  /* light grey fabric, as the Echo Show 8 in its light colour */
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.10) 0 1px, transparent 1px 3px),
    linear-gradient(#d9d9d5, #c6c6c1 55%, #a9a9a4);
  box-shadow: 0 30px 40px -20px rgba(0, 0, 0, 0.9);
}
.show8-body::after { /* its shadow on the table */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -10%; height: 14%; border-radius: 50%; background: rgba(0, 0, 0, 0.55); filter: blur(10px); z-index: -1;
}
.show8-screen { position: relative; aspect-ratio: 1280 / 800; overflow: hidden; border-radius: 0.6% / 1%; background: #000; }
.show8-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.show8-screen > img.is-shown { opacity: 1; }
.show8-hero { margin-bottom: 3%; }

/* "DEMO" across the top right corner: it is a re-creation */
.demo-ribbon { position: absolute; top: -6px; right: -6px; width: 130px; height: 130px; overflow: hidden; z-index: 4; pointer-events: none; }
.demo-ribbon span {
  position: absolute; top: 30px; right: -40px; width: 190px; padding: 6px 0; transform: rotate(45deg); text-align: center;
  background: #f59e0b; color: #111; font: 900 0.95rem/1 var(--font); letter-spacing: 0.22em; text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}
.demo-note { margin: 1.4rem auto 0; max-width: var(--measure); color: var(--text-2); font-size: var(--step--1); text-align: center; }

/* the results without the device below 1000 px: a plain, readable list */
.show8-results .show8-screen { aspect-ratio: auto; overflow: visible; background: none; }
@media (max-width: 999px) {
  .show8-results { padding: 0; }
  .show8-results .show8-bezel { padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .show8-results .show8-bezel::before, .show8-results .show8-cam, .show8-results .show8-buttons, .show8-results .show8-body { display: none; }
  .show8-results .demo-ribbon { display: none; }
}
@media (min-width: 1000px) {
  .show8-results { max-width: 1180px; margin-inline: auto; }
  .show8-results .show8-screen { aspect-ratio: 1280 / 800; overflow: hidden; container-type: size; background: var(--scr-page); }
  .apl-screen { padding: 2.2cqh 2.2cqw; gap: 2cqh; font-size: max(15px, 1.5cqw); }
  .apl-screen .apl-head { flex-wrap: nowrap; font-size: 1.05em; }
  .apl-screen .apl-head h3 { font-size: 1.15em; white-space: nowrap; }
  .apl-screen .apl-count { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .apl-screen .apl-brand, .apl-screen .apl-clock { display: inline-flex; }
  .apl-screen .results-stage { flex: 1; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 1.6cqw; }
  .apl-screen .detail { height: 100%; padding: 1.4cqw; overflow: hidden; display: flex; flex-direction: column; }
  .apl-screen .detail h4 { font-size: 1.15em; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: calc(2 * 1.2em); flex: none; }
  .apl-screen .detail .meta, .apl-screen .tile-top { font-size: 0.85em; }
  .apl-screen .detail p:not(.meta) { font-size: 0.9em; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: calc(3 * 1.45em); flex: none; margin-bottom: 0.6em; }
  .apl-screen .detail .meta { flex: none; }
  .apl-screen .detail-video { flex: none; margin-bottom: 1.2cqh; }
  .apl-screen .detail-actions { margin-top: auto; }
  .apl-screen .tiles { grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 1.4cqw; height: 100%; }
  .apl-screen .tile { min-height: 0; }
  .apl-screen .tile-title { -webkit-line-clamp: 2; max-height: calc(2 * 1.3em); font-size: 0.95em; }
  .apl-screen .pill-text { min-height: 44px; font-size: 0.85em; }
  .apl-screen .say-it { font-family: var(--voice); font-style: italic; }
  .apl-screen .say-it .voice { font-size: 1.1em; }
  .apl-screen .tiles-col { display: flex; flex-direction: column; gap: 1.2cqh; min-height: 0; }
  .apl-screen .tiles-col .tiles { flex: 1; }
}

/* sort menu in the header, as on the device ("neue Filme zuerst ⌄") */
.apl-sort { position: relative; }
.apl-sort-btn { display: inline-flex; align-items: center; gap: 0.35em; min-height: 44px; padding: 0 0.3em; border: 0; background: none; color: var(--text-2); font: inherit; cursor: pointer; border-radius: 8px; }
.apl-sort-btn:hover { color: var(--text); }
.chev { width: 0.5em; height: 0.5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); }
.apl-sort-menu { position: absolute; top: 100%; left: 0; z-index: 6; display: grid; min-width: 14em; padding: 0.4em; border-radius: 12px; background: var(--scr-card, var(--card)); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.12); }
.apl-sort-menu[hidden] { display: none; }
.apl-sort-menu button { min-height: 44px; padding: 0 0.9em; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.apl-sort-menu button:hover, .apl-sort-menu button[aria-current="true"] { background: rgba(255, 255, 255, 0.08); }
.apl-sort-menu button[aria-current="true"]::before { content: "✓ "; color: var(--accent); }

/* page bars under the tiles: one per page, the current one filled (the device fills it while it waits) */
.page-bars { display: flex; gap: 1.2%; margin-top: 0.8rem; }
.page-bars button { flex: 1; min-height: 24px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.page-bars button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 2px; background: rgba(255, 255, 255, 0.18); }
.page-bars button[aria-current="true"]::before { height: 4px; background: linear-gradient(90deg, var(--accent) 35%, rgba(255, 255, 255, 0.45) 35%); }
.page-bars button:not([aria-current="true"]):hover::before { background: rgba(255, 255, 255, 0.4); }

/* the dark pill bottom left: info, homepage, quit */
.apl-pill { display: inline-flex; gap: 0.3em; padding: 0.3em 0.5em; border-radius: 999px; background: var(--scr-card, var(--card)); border: 1px solid rgba(255, 255, 255, 0.09); }
.apl-pill > * { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--text); opacity: 0.85; cursor: pointer; }
.apl-pill > *:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.apl-pill svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pill-i { font: 900 1.25rem/1 Georgia, serif; }
.apl-foot { display: flex; align-items: center; gap: 1.2rem; }
.apl-foot .say-it { flex: 1; text-align: center; }

/* info box and good-bye page inside the screen */
.apl-info, .apl-finish, .apl-start { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: var(--scr-page, var(--bg-raised)); }
.apl-info[hidden], .apl-finish[hidden], .apl-start[hidden] { display: none; }
/* the start screen: the skill's emblem, a greeting, the sentence to say; header, tiles and footer wait for a search */
.apl-start { align-items: center; justify-content: center; text-align: center; gap: 0.5em; padding: 4% 10%; }
.apl-start svg { width: 96px; height: 96px; }
.start-title { font-size: 1.6em; font-weight: 800; margin: 0.3em 0 0; }
.apl-start .say-it { font-family: var(--voice); font-style: italic; font-size: 1.35em; margin: 0; }
.start-hint { color: var(--text-2); margin: 0.4em 0 0; max-width: 34em; }
.results.is-start .apl-head, .results.is-start .results-stage, .results.is-start .apl-foot { display: none; }
.apl-info { justify-content: center; padding: 4% 12%; gap: 0.4em; }
.apl-info h4 { font-size: 1.3em; margin: 0 0 0.4em; }
.apl-info p { margin: 0 0 0.4em; color: var(--text); max-width: none; }
.apl-finish { align-items: center; justify-content: center; text-align: center; gap: 0.6em; }
.apl-finish svg { width: 96px; height: 96px; }
.finish-title { font-size: 1.6em; font-weight: 800; margin: 0.3em 0 0; border-left: 4px solid var(--accent); padding-left: 0.5em; }
.finish-home { color: var(--text-2); margin: 0; }
.pill-text { align-self: center; min-height: 44px; margin-top: 0.6em; padding: 0 1.3em; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); color: var(--text); font: 700 1em var(--font); cursor: pointer; }
@media (max-width: 999px) {
  .apl-info, .apl-finish, .apl-start { position: static; padding: 1.4rem; border-radius: var(--radius); background: var(--card); margin-top: 1rem; }
  .apl-start { background: none; margin-top: 0; }
  .apl-start svg { width: 64px; height: 64px; }
}

/* ---------- features ---------- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.2rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.feature { padding: 1.6rem; border-radius: var(--radius); background: var(--card); border: 1px solid rgba(255, 255, 255, 0.06); }
.feature svg { width: 40px; height: 40px; color: var(--accent); margin-bottom: 0.9rem; }
.feature h3 { margin-bottom: 0.4rem; }
.feature p { color: var(--text-2); margin: 0; }
.feature .voice { color: var(--text); }
.showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.4rem; margin-top: 3rem; }
.shot { margin: 0; }
.shot img { border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9); }
.shot figcaption { margin-top: 0.7rem; color: var(--text-2); font-size: var(--step--1); }

/* ---------- accessibility block ---------- */
.a11y { background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(var(--beam), 0.08), transparent 60%); }
.a11y-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .a11y-grid { grid-template-columns: 1fr; } }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.checklist li { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; padding: 1rem 1.2rem; border-radius: var(--radius-s); background: var(--card); }
.checklist svg { width: 26px; height: 26px; color: var(--accent); margin-top: 0.15rem; }
.checklist strong { display: block; }
.checklist span { color: var(--text-2); }

/* ---------- press ---------- */
.press-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem; }
.press-list a { display: block; height: 100%; padding: 1.3rem 1.4rem; border-radius: var(--radius-s); background: var(--card); color: var(--text); text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.06); }
.press-list a:hover { border-color: var(--accent); }
.press-list .outlet { display: block; color: var(--accent); font-weight: 800; margin-bottom: 0.3rem; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 3rem 2.5rem; color: var(--text-2); font-size: var(--step--1); }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 2rem; }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr; } }
.site-footer h2 { font-size: var(--step-0); color: var(--text); margin-bottom: 0.6rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.site-footer a { color: var(--text); }
.site-footer p { margin: 0 0 0.7rem; }

/* ---------- content pages ---------- */
.page-hero { padding-block: clamp(3rem, 7vw, 5.5rem) 1rem; position: relative; overflow: hidden; isolation: isolate; }
.page-hero::before {
  content: ""; position: absolute; inset: -60% -20% auto; height: 160%; z-index: -1;
  background: radial-gradient(ellipse 50% 45% at 70% 10%, rgba(var(--beam), 0.12), transparent 70%);
}
.page-hero h1 { font-size: var(--step-3); max-width: 22ch; }
.prose { padding-block: 1rem 6rem; }
.section .prose { padding-block: 0; }
.prose > * { max-width: var(--measure); }
.prose { overflow-wrap: anywhere; }
.prose pre { white-space: pre-wrap; }
.prose h2 { font-size: var(--step-2); margin-top: 2.2em; }
.prose h3 { font-size: var(--step-1); margin-top: 1.8em; }
.prose li { margin-bottom: 0.45em; }
.prose li::marker { color: var(--accent); }
.prose blockquote {
  margin: 1.4em 0; padding: 1rem 1.4rem; border-left: 4px solid var(--accent); background: var(--card); border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-family: var(--voice); font-style: italic; font-size: var(--step-1);
}
.prose blockquote p { margin: 0; }
.prose em { font-family: var(--voice); font-size: 1.06em; }
.prose img { border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); margin-block: 1rem; }
.prose table { border-collapse: collapse; width: 100%; max-width: 72ch; }
.prose th, .prose td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose code { font-size: 0.92em; background: var(--card); padding: 0.1em 0.35em; border-radius: 5px; }

/* skill pages: the skill's own colours */
.skill-page { --accent: var(--skill-accent-text); --on-accent: var(--skill-on-accent); --beam: var(--skill-beam); background: var(--skill-page); }
.skill-page .site-header { background: color-mix(in srgb, var(--skill-page) 85%, transparent); }
.skill-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 960px) { .skill-hero .wrap { grid-template-columns: 1fr; } }
.skill-hero .emblem { width: clamp(84px, 10vw, 120px); height: auto; margin-bottom: 1.4rem; }
.skill-hero h1 { font-size: var(--step-4); }
.commands { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0.8rem; }
.commands li { padding: 1rem 1.2rem; border-radius: var(--radius-s); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); }
.commands .lead-in { display: block; color: var(--text-2); font-size: var(--step--1); font-weight: 650; }
.commands .voice { color: var(--text); font-size: var(--step-0); }
.activate { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin-top: 2rem; }
.activate > div { padding: 1.5rem; border-radius: var(--radius); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); }
.activate h3 { font-size: var(--step-0); }

/* ---------- reveal on scroll (only with motion allowed and JS) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2, .7, .2, 1); }
  .reveal-ready .reveal.is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media print {
  .site-header, .hero::before, .hero::after, .try, .pause-btn { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; }
}

/* ---------- the skills' own addresses (landing pages) ---------- */
.brand-family { margin-left: 0.4rem; padding-left: 0.8rem; border-left: 1px solid var(--line); font-size: 0.8rem; color: var(--text-2); line-height: 1.2; max-width: 10rem; }
@media (max-width: 520px) { .brand-family { display: none; } }
.siblings { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 0.9rem; }
.siblings a {
  display: flex; align-items: center; gap: 0.9rem; height: 100%; padding: 1rem 1.2rem; border-radius: var(--radius-s); text-decoration: none; color: var(--text);
  background: var(--skill-page); border: 1px solid rgba(255, 255, 255, 0.08); transition: border-color 0.2s ease, transform 0.2s ease;
}
.siblings a:hover, .siblings a:focus-visible { border-color: var(--skill-accent-text); transform: translateY(-2px); }
.siblings svg { width: 44px; height: 44px; flex: none; }
.siblings strong { display: block; }
.siblings span span { color: var(--skill-accent-text); font-size: var(--step--1); font-weight: 650; }

/* the detail box like on the device: channel in the video's corner, play button, badges, "▶ Ansehen" */
.detail { position: relative; }
.detail-video { position: relative; }
.detail-channel { position: absolute; top: 0.5em; right: 0.7em; font-weight: 800; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); z-index: 1; }
.preview-btn {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer;
}
.preview-btn svg { width: 28px; height: 28px; margin-left: 4px; }
.preview-btn:hover { background: rgba(0, 0, 0, 0.7); }
.detail .meta b { color: var(--accent); }
.badge { display: inline-block; margin-left: 0.5em; padding: 0.05em 0.45em; border-radius: 5px; background: var(--mark, var(--accent)); color: var(--on-accent); font-weight: 800; font-size: 0.85em; }
.tile-top .badge { margin-left: 0.2em; background: none; color: var(--text); padding: 0; }
.watch-btn {
  display: inline-flex; align-items: center; gap: 0.4em; align-self: flex-end; min-height: 44px; margin-top: 0.4em; padding: 0 1.1em;
  border: 0; border-radius: 999px; background: #fff; color: #111; font: 800 1em var(--font); cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.watch-btn svg { width: 1em; height: 1em; }
@media (min-width: 1000px) {
  .apl-screen .detail .desc { flex: 1 1 auto; }
  .apl-screen .watch-btn { position: absolute; right: 1.4cqw; bottom: 1.4cqw; margin: 0; }
}

/* ---------- the player inside the device's screen (as APLmovie.json) ---------- */
.apl-player { position: absolute; inset: 0; z-index: 7; background: #000; color: #fff; overflow: hidden; }
.apl-player[hidden] { display: none; }
.apl-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.player-tap { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: none; cursor: pointer; z-index: 1; }
.player-tap:focus-visible { outline-offset: -6px; }
.player-card, .player-controls, .player-pause { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.player-card { display: flex; flex-direction: column; justify-content: flex-end; padding: 3.2%; opacity: 0; transition: opacity 0.3s ease;
  background: linear-gradient(transparent 45%, rgba(0, 0, 0, 0.75)); }
.player-card.is-shown { opacity: 1; }
.player-kicker { display: flex; align-items: center; gap: 0.5em; margin: 0; color: var(--accent); font-weight: 800; }
.player-kicker::before { content: ""; width: 4px; height: 1.2em; border-radius: 2px; background: var(--mark, var(--accent)); }
.player-title { margin: 0.2em 0 0.15em; font-size: 2.2em; font-weight: 800; line-height: 1.1; max-width: none; }
.player-meta { display: block; margin: 0; font-weight: 700; color: rgba(255, 255, 255, 0.82); max-width: none; }
.player-end { margin: 0.2em 0 0; color: rgba(255, 255, 255, 0.82); }
.player-controls { display: flex; flex-direction: column; justify-content: space-between; opacity: 0; transition: opacity 0.3s ease;
  background: linear-gradient(rgba(0, 0, 0, 0.6), transparent 22%, transparent 70%, rgba(0, 0, 0, 0.7)); }
.player-controls.is-shown, .player-controls:focus-within { opacity: 1; }
.player-controls.is-shown *, .player-controls:focus-within * { pointer-events: auto; }
.player-top { display: flex; align-items: center; gap: 1.4%; padding: 2.4% 3%; }
.player-title-s { display: block; font-weight: 800; font-size: 1.2em; }
.player-mid { display: flex; align-items: center; justify-content: center; gap: 6%; }
.player-bottom { padding: 0 3% 2.6%; }
.player-times { display: flex; justify-content: space-between; margin-top: 0.5em; font-weight: 700; }
.round { display: grid; place-items: center; position: relative; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(0, 0, 0, 0.45); }
.round svg { width: 50%; height: 50%; fill: currentColor; }
.round.small { width: 3.6em; height: 3.6em; flex: none; }
.round.main { width: 6.2em; height: 6.2em; background: #fff; color: #111; }
.round.jump { width: 4.4em; height: 4.4em; background: rgba(120, 120, 120, 0.55); }
.round.jump svg { width: 78%; height: 78%; }
.round.jump b { position: absolute; font-size: 0.95em; }
.round.mirror svg { transform: scaleX(-1); }
.player-range { width: 100%; height: 28px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.player-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--pos, 0%), rgba(255, 255, 255, 0.35) var(--pos, 0%)); }
.player-range::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); }
.player-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
.player-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #fff; border: 0; }
.player-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 0; }
.player-pause { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 0 4%; padding: 2.4% 3% 3%; background: rgba(0, 0, 0, 0.88); pointer-events: auto; }
.player-pause[hidden] { display: none; }
.player-pause > .round.small { grid-column: 1; grid-row: 1; }
.pause-text { grid-column: 1; grid-row: 2; align-self: center; }
.pause-text .player-title { font-size: 1.9em; }
.pause-desc { margin: 0.6em 0 0; color: rgba(255, 255, 255, 0.88); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; max-height: calc(5 * 1.5em); max-width: 62ch; }
.pause-pos { position: relative; margin: 1.4em 0 0; padding-top: 1.2em; font-weight: 600; max-width: 62ch; }
.pause-pos::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) var(--pos, 0%), rgba(255, 255, 255, 0.3) var(--pos, 0%)); }
.pause-tip { margin: 0.6em 0 0; color: rgba(255, 255, 255, 0.7); font-family: var(--voice); font-style: italic; }
.pause-tip .voice { color: #fff; }
.player-pause > .round.main { grid-column: 2; grid-row: 2; align-self: center; margin-right: 6%; }
@media (max-width: 999px) {
  /* without the device: the player as a 16:10 picture in the list */
  .apl-player { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); margin-top: 1rem; font-size: 0.8rem; }
  .apl-player .round.main { width: 4.4em; height: 4.4em; }
}
@media (prefers-reduced-motion: reduce) { .player-card, .player-controls { transition: none; } }
/* the muted preview in the detail box; its button stays reachable, faint while the preview plays */
.detail-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail-video .preview-btn { position: relative; z-index: 1; transition: opacity 0.2s; }
.detail-video.is-playing .preview-btn { opacity: 0.35; }
.detail-video.is-playing:hover .preview-btn, .detail-video .preview-btn:focus-visible { opacity: 1; }
.preview-btn svg { fill: currentColor; }

/* sizes inside the device follow its screen (container units), as the device's dp */
@media (min-width: 1000px) {
  .apl-player .round.small { width: 5.4cqw; height: 5.4cqw; }
  .apl-player .round.main { width: 11cqw; height: 11cqw; }
  .apl-player .round.jump { width: 7.6cqw; height: 7.6cqw; }
  .apl-player .round.jump b { font-size: 1.9cqw; }
  .apl-player .player-title { font-size: 3.6cqw; }
}
.round.jump b { z-index: 1; color: #fff; font-weight: 900; }
/* paused: only the pause view, as on the device */
.apl-player.is-paused .player-controls, .apl-player.is-paused .player-card { display: none; }

/* the player's type and spacing exactly as APLmovie.json on an Echo Show 8 (1280 x 800, 1 dp = 1 px; the large
   sizes of tools/mockups/build_player.py DIMENSIONS/NUMBERS), as shares of the screen width; APL's line height 125 % */
@media (min-width: 1000px) {
  .apl-player { line-height: 1.25; }
  .apl-player p { line-height: 1.25; }
  .apl-player .player-card { padding: 0 3.125cqw 2.5cqw; }
  .apl-player .player-card .player-kicker { font-size: 1.562cqw; }
  .apl-player .player-card .player-kicker::before { height: 1.875cqw; width: 0.3125cqw; }
  .apl-player .player-card .player-title { font-size: 3.438cqw; margin: 0.625cqw 0 0.4688cqw; font-weight: 750; }
  .apl-player .player-card .player-meta { font-size: 1.562cqw; }
  .apl-player .player-card .player-end { font-size: 1.562cqw; margin-top: 0.3125cqw; }
  .apl-player .player-top { padding: 2.188cqw 3.125cqw 0; gap: 1.25cqw; }
  .apl-player .player-title-s { font-size: 2.031cqw; font-weight: 750; }
  .apl-player .player-top .player-meta { font-size: 1.562cqw; }
  .apl-player .player-mid { gap: 4.375cqw; }
  .apl-player .round.small { width: 6.562cqw; height: 6.562cqw; }
  .apl-player .round.main { width: 12.19cqw; height: 12.19cqw; }
  .apl-player .round.jump { width: 8.438cqw; height: 8.438cqw; }
  .apl-player .round.jump b { font-size: 1.719cqw; }
  .apl-player .player-bottom { padding: 0 3.125cqw 2.5cqw; }
  .apl-player .player-times { font-size: 1.562cqw; margin-top: 0.4688cqw; }
  .apl-player .player-pause { padding: 2.188cqw 3.125cqw 2.5cqw; }
  .apl-player .pause-text .player-kicker { font-size: 1.875cqw; }
  .apl-player .pause-text .player-kicker::before { height: 2.188cqw; width: 0.3125cqw; }
  .apl-player .pause-text .player-title { font-size: 3.125cqw; margin: 0.7812cqw 0 0.4688cqw; font-weight: 750; }
  .apl-player .pause-text .player-meta { font-size: 1.875cqw; }
  .apl-player .pause-desc { font-size: 2.031cqw; margin-top: 1.25cqw; -webkit-line-clamp: 6; max-height: calc(6 * 1.25em); max-width: none; }
  .apl-player .pause-pos { font-size: 1.875cqw; margin-top: 1.875cqw; padding-top: 2.344cqw; max-width: none; }
  .apl-player .pause-tip { font-size: 2.188cqw; margin-top: 1.406cqw; }
}

/* the light Echo Show 8: the wide bezel in the same light grey as the housing, the screen black glass */
.show8-bezel {
  background: linear-gradient(170deg, #ecece8 0%, #dcdcd7 45%, #cdcdc8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 0 0 1px #b4b4ae, 0 40px 70px -28px rgba(0, 0, 0, 0.9), 0 0 120px -30px rgba(var(--beam), 0.25);
}
.show8-bezel::before { background: linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.08) 25%, transparent 45%); }
.show8-screen { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }
.show8-cam { background: radial-gradient(circle at 36% 34%, #6d7f9c 0 9%, #233149 22%, #0a0e16 55%, #2a2a2c 62%, #55554f 70%, #a3a39d 76%); box-shadow: none; }
.show8-buttons span { background: linear-gradient(#efefeb, #c3c3be); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12); }

/* pause view and texts measured against the device (2026-10-12): Ember's line boxes are taller than
   Atkinson's, so 1.35 matches the device's lines; the text sits under the back button, 845 dp wide; the
   play button 12 % from the right edge; the progress with its knob */
@media (min-width: 1000px) {
  .apl-player p, .apl-player .player-title-s, .apl-player .player-meta { line-height: 1.35; }
  .apl-player .pause-desc { max-height: calc(6 * 1.35em); }
  .apl-player .player-pause { grid-template-columns: minmax(0, 66.02cqw) 1fr; grid-template-rows: auto auto 1fr; gap: 0; }
  .apl-player .pause-text { grid-row: 2; align-self: start; margin-top: 1.562cqw; }
  .apl-player .player-pause > .round.main { grid-column: 2; grid-row: 1 / 4; justify-self: end; margin-right: 8.906cqw; }
}
.pause-pos::after {
  content: ""; position: absolute; top: -5px; left: calc(var(--pos, 0%) - 7px); width: 14px; height: 14px; border-radius: 50%; background: #fff;
}

@media (min-width: 1000px) {
  .apl-player .pause-pos { margin-top: 6.25cqw; padding-top: 2.344cqw; }
  .apl-player .round.jump { background: rgba(150, 150, 150, 0.78); }
  .apl-player .round.jump svg { width: 88%; height: 88%; }
  .apl-player .round.jump b { font-size: 2.031cqw; }
}
/* the jump icon: its ring fills about 85 % of the button, as on the device (the path uses 2/3 of its box) */
@media (min-width: 1000px) {
  .apl-player .round.jump { width: 8.4375cqw; height: 8.4375cqw; }
  /* the ring's centre is at y 13 of the path's 24 (viewBox shifted by 1); ring 18 of 24 → 75 % of the button */
  .apl-player .round.jump svg { width: 100%; height: 100%; position: absolute; inset: 0; }
}
@media (min-width: 1000px) { .apl-player .round.jump { background: rgba(110, 110, 110, 0.88); } .apl-player .round.main svg { width: 46%; height: 46%; } }

/* the light Echo Show 8, closer to the original (review 2026-10-12): a wide glass bezel (the device is about
   20 cm wide, the screen 17.2 cm: about 7 % on each side), a fine dark gap between it and the narrow rim of the
   housing, two slightly different greys, and the bezel reflecting like glass */
.show8-bezel {
  padding: 6.4% 6.6%;
  border-radius: 4.2% / 6.4%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 7%),
    linear-gradient(160deg, #f1f1ee 0%, #e2e2de 38%, #d6d6d1 70%, #cbcbc6 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.65),
    0 0 0 1.5px #3b3b39,
    0 0 0 5px #c4c4bf,
    0 0 0 6px #a2a29d,
    0 40px 70px -28px rgba(0, 0, 0, 0.9), 0 0 120px -30px rgba(var(--beam), 0.25);
}
.show8-bezel::before {
  /* glass: a broad soft reflection across the bezel, and a sharper streak */
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0.55) 16%, rgba(255, 255, 255, 0.12) 24%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) 61%, rgba(255, 255, 255, 0.28) 63%, rgba(255, 255, 255, 0) 66%),
    radial-gradient(ellipse 70% 40% at 30% 0%, rgba(255, 255, 255, 0.35), transparent 70%);
  mix-blend-mode: screen;
}
.show8-screen { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(255, 255, 255, 0.25); }
.show8-cam { top: 3.4%; right: 9%; width: 1.6%; }
.show8-buttons { right: 12%; }
.demo-ribbon { top: -7px; right: -7px; }

/* the current page bar fills while the page waits (search.js sets --fill) */
.page-bars button[aria-current="true"]::before { height: 4px; background: linear-gradient(90deg, var(--accent) var(--fill, 0%), rgba(255, 255, 255, 0.45) var(--fill, 0%)); }
/* muted and full-screen icons bottom right of the preview, as on the device */
.detail-icons { position: absolute; right: 0.5em; bottom: 0.4em; z-index: 2; display: flex; gap: 0.4em; align-items: center; }
.detail-icon { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: none; color: #fff; }
.detail-icon svg { width: 26px; height: 26px; fill: currentColor; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8)); }
button.detail-icon { cursor: pointer; }
button.detail-icon:hover { background: rgba(0, 0, 0, 0.35); }
/* the glass reflection over the screen: present, but never in the way of reading */
.show8-bezel::before {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0.28) 16%, rgba(255, 255, 255, 0.06) 24%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) 61%, rgba(255, 255, 255, 0.10) 63%, rgba(255, 255, 255, 0) 66%),
    radial-gradient(ellipse 70% 40% at 30% 0%, rgba(255, 255, 255, 0.3), transparent 70%);
}

/* the pause view's progress is a slider too (as on the device: tap and drag) */
.pause-range { display: block; width: 100%; margin-top: 0.6em; }
.pause-pos { padding-top: 0.3em !important; margin-top: 0.2em !important; }
.pause-pos::before, .pause-pos::after { display: none; }
@media (min-width: 1000px) { .apl-player .pause-range { margin-top: 3.5cqw; max-width: 66cqw; } }
.player-range:focus-visible { outline-offset: 2px; }

/* ---------- the results page exactly as APLresults.json on an Echo Show 8 (2026-10-12): 1280 x 800, 1 dp = 1 px,
   the large sizes of tools/mockups/build_variant4.py, as shares of the screen width (1 dp = 1/12.8 cqw); line
   heights as there (titles 1.15, description 1.35), else APL's 1.25 ---------- */
@media (min-width: 1000px) {
  .show8-results .apl-screen { padding: 0 2.188cqw; gap: 0; font-size: 1.562cqw; line-height: 1.25; }
  .show8-results .apl-screen p, .show8-results .apl-screen h3, .show8-results .apl-screen h4 { line-height: 1.25; }
  .show8-results .apl-screen .apl-head { height: 5cqw; flex: none; gap: 0 0.9375cqw; font-size: 1.875cqw; }
  .show8-results .apl-screen .apl-head h3 { font-size: 1.875cqw; }
  .show8-results .apl-screen .apl-bar { width: 0.3906cqw; min-height: 0; height: 2.344cqw; align-self: center; }
  .show8-results .apl-screen .apl-sort-btn { min-height: 0; height: 3.438cqw; font-size: 1.875cqw; }
  .show8-results .apl-screen .apl-brand { gap: 0.7812cqw; font-size: 1.719cqw; }
  .show8-results .apl-screen .apl-brand svg { width: 2.5cqw; height: 2.5cqw; }
  .show8-results .apl-screen .apl-clock { font-size: 1.719cqw; margin-left: 1.094cqw; }
  .show8-results .apl-screen .results-stage { height: 50cqw; flex: none; grid-template-columns: 38.25cqw minmax(0, 1fr); gap: 1.25cqw; }
  .show8-results .apl-screen .detail { height: 48.91cqw; padding: 0; border-radius: 1.094cqw; gap: 0; }
  .show8-results .apl-screen .detail-video { height: 21.48cqw; aspect-ratio: auto; margin: 0; border-radius: 1.094cqw 1.094cqw 0 0; flex: none; }
  .show8-results .apl-screen .detail-channel { font-size: 1.562cqw; top: 0.9375cqw; right: 1.094cqw; }
  .show8-results .apl-screen .preview-btn { width: 5cqw; height: 5cqw; }
  .show8-results .apl-screen .detail-icons { right: 0.4688cqw; bottom: 0.4688cqw; gap: 0.3125cqw; }
  .show8-results .apl-screen .detail-icon { width: 3.438cqw; height: 3.438cqw; }
  .show8-results .apl-screen .detail-icon svg { width: 2.344cqw; height: 2.344cqw; }
  .show8-results .apl-screen .detail .meta { font-size: 1.484cqw; margin: 1.094cqw 1.406cqw 0; }
  .show8-results .apl-screen .badge { font-size: 1.25cqw; }
  .show8-results .apl-screen .detail h4 { font-size: 2.031cqw; line-height: 1.15; max-height: calc(2 * 1.15em); margin: 0.625cqw 1.406cqw 0; }
  .show8-results .apl-screen .detail p.desc { font-size: 1.562cqw; line-height: 1.35; -webkit-line-clamp: 9; max-height: calc(9 * 1.35em); margin: 0.7812cqw 1.406cqw 0; }
  .show8-results .apl-screen .watch-btn { height: 3.594cqw; min-height: 0; padding: 0 1.562cqw 0 0.9375cqw; font-size: 1.562cqw; right: 0.9375cqw; bottom: 0.9375cqw; }
  .show8-results .apl-screen .tiles-col { gap: 0; }
  .show8-results .apl-screen .tiles { gap: 1.641cqw 1.562cqw; height: 48.28cqw; flex: none; margin-top: 0.3125cqw; }
  .show8-results .apl-screen .tile { border-radius: 1.094cqw; border-width: 0.2344cqw; border-left-width: 0.7812cqw; }
  .show8-results .apl-screen .tile-top { padding: 0.9375cqw 1.094cqw 0.9375cqw 1.406cqw; gap: 0.9375cqw; font-size: 1.641cqw; }
  .show8-results .apl-screen .tile-num { width: 4.062cqw; height: 4.062cqw; font-size: 2.031cqw; }
  .show8-results .apl-screen .tile-title { font-size: 1.875cqw; line-height: 1.15; max-height: calc(2 * 1.15em); -webkit-line-clamp: 2; margin: 0.7812cqw 1.094cqw 0 1.406cqw; }
  .show8-results .apl-screen .page-bars { margin-top: 0.4688cqw; gap: 1.562cqw; }
  .show8-results .apl-screen .page-bars button { min-height: 1.875cqw; }
  .show8-results .apl-screen .apl-foot { height: 7.5cqw; flex: none; gap: 1.25cqw; }
  .show8-results .apl-screen .apl-pill { padding: 0.4688cqw 0.7812cqw; gap: 0.625cqw; }
  .show8-results .apl-screen .apl-pill > * { width: 4.062cqw; height: 4.062cqw; }
  .show8-results .apl-screen .apl-pill svg { width: 2.031cqw; height: 2.031cqw; }
  .show8-results .apl-screen .pill-i { font-size: 2.031cqw; }
  .show8-results .apl-screen .say-it { font-size: 2.344cqw; }
  .show8-results .apl-screen .say-it .voice { font-size: 1em; }
}

/* "Anhalten" and "Weiter" have different widths: the button keeps the wider one, so the dots stay put */
.pause-btn { min-width: 9.2em; justify-content: center; }

/* every bar shows its --fill: pages already shown full, the current one filling, the next ones empty */
.page-bars button::before { background: linear-gradient(90deg, var(--accent) var(--fill, 0%), rgba(255, 255, 255, 0.22) var(--fill, 0%)); }
.page-bars button[aria-current="true"]::before { height: 4px; background: linear-gradient(90deg, var(--accent) var(--fill, 0%), rgba(255, 255, 255, 0.45) var(--fill, 0%)); }

/* the skill cards: store and quick link side by side, above the card's own link */
.card-links { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.skill-card .card-links .store { align-self: auto; }
.hero-quick { margin: -0.4rem 0 1.4rem; color: var(--text-2); }

/* ---------- the site search ---------- */
.nav-icon { display: inline-flex !important; align-items: center; gap: 0.4em; }
.nav-icon svg { width: 1.05em; height: 1.05em; }
/* in the open menu row only the magnifier, its name for screen readers and as a tooltip on hover and focus;
   in the folded menu the word stays visible */
.nav-tip { display: none; }
@media (min-width: 870px) {
  .nav-icon { position: relative; justify-content: center; min-width: 48px; min-height: 44px; padding-inline: 0.7rem !important; }
  .nav-icon svg { width: 1.3em; height: 1.3em; }
  .nav-icon .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav-tip {
    display: block; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 0.3rem 0.65rem;
    background: var(--text); color: var(--bg); border-radius: 6px; font-size: 0.875rem; font-weight: 650; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity 0.12s;
  }
  .nav-icon:hover .nav-tip, .nav-icon:focus-visible .nav-tip { opacity: 1; }
}
.site-search { padding-bottom: 6rem; }
.site-search-form { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 720px) { .site-search-form { grid-template-columns: 1fr; } }
.site-results { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; max-width: var(--measure); }
.site-hit { padding: 1.2rem 1.4rem; border-radius: var(--radius-s); background: var(--card); border: 1px solid rgba(255, 255, 255, 0.06); }
.site-hit h2 { font-size: var(--step-1); margin: 0 0 0.4rem; }
.site-hit h2 a { color: var(--text); text-decoration-color: var(--accent); }
.site-hit-section { color: var(--text-2); font-weight: 600; }
.site-hit p { margin: 0; color: var(--text-2); }
.site-hit mark { background: none; color: var(--accent); font-weight: 750; }

/* AAA: text links on the skill pages in the light text colour, the skill's colour in the underline (the accent
   colours as text reach AA, not 7:1); footer links at least 24 px high (target size) */
.skill-page .prose a, .skill-page .activate a { color: var(--text); text-decoration-color: var(--accent); text-decoration-thickness: 0.12em; }
.site-footer a { display: inline-block; min-height: 24px; padding-block: 2px; }

/* ---------- press ---------- */
.press-cards { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1.1rem; }
.press-card { position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem 1.6rem; border-radius: var(--radius); background: var(--card); border: 1px solid rgba(255, 255, 255, 0.07); transition: border-color 0.2s ease, transform 0.2s ease; }
.press-card:hover, .press-card:focus-within { border-color: var(--accent); transform: translateY(-2px); }
.press-card.has-badge { background: linear-gradient(160deg, rgba(var(--beam), 0.14), var(--card) 55%); border-color: rgba(var(--beam), 0.5); }
.press-badge { display: inline-flex; align-items: center; gap: 0.45em; align-self: flex-start; margin: 0; padding: 0.3em 0.8em; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: var(--step--1); }
.press-badge svg { width: 1em; height: 1em; fill: currentColor; }
.press-meta { margin: 0; color: var(--text-2); font-size: var(--step--1); font-weight: 650; }
.press-outlet { color: var(--accent); font-weight: 800; letter-spacing: 0.02em; }
.press-card h3 { margin: 0; font-size: var(--step-1); line-height: 1.25; }
.press-card h3 a { color: var(--text); text-decoration: none; }
.press-card h3 a::after { content: ""; position: absolute; inset: 0; }
.press-teaser { margin: 0.3rem 0 0; padding: 0; border: 0; background: none; font-family: var(--voice); font-style: italic; color: var(--text-2); font-size: var(--step-0); }
.press-teaser p { margin: 0; }
.press-page { padding-bottom: 6rem; }
.press-page h2 { font-size: var(--step-2); margin-top: 2.5em; }
.press-page h2:first-child { margin-top: 0.5em; }
.reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1.1rem; margin-top: 1.5rem; }
.review { margin: 0; padding: 1.5rem 1.6rem; border-radius: var(--radius); background: var(--card); border: 1px solid rgba(255, 255, 255, 0.07); }
.review blockquote { margin: 0; }
.review blockquote p { margin: 0 0 0.6em; }
.review-title { font-size: var(--step-0); }
.review figcaption { color: var(--text-2); font-size: var(--step--1); }
.stars { margin: 0 0 0.6rem; font-size: 1.3rem; letter-spacing: 0.1em; color: #6b6455; }
.stars .on { color: var(--accent); }
.press-home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1.4rem; align-items: start; margin-top: 2rem; }
@media (max-width: 960px) { .press-home { grid-template-columns: 1fr; } }
.press-home .press-cards { margin: 0; grid-template-columns: 1fr; }
.review-big { padding: 2rem; background: radial-gradient(ellipse 90% 70% at 0% 0%, rgba(var(--beam), 0.16), var(--card) 70%); border-color: rgba(var(--beam), 0.4); }
.review-big blockquote p:not(.review-title) { font-family: var(--voice); font-style: italic; font-size: var(--step-2); line-height: 1.3; color: var(--text); }
.press-more { margin-top: 1.6rem; }

/* ---------- the project page's timeline ---------- */
.timeline { list-style: none; margin: 1.6rem 0 2rem; padding: 0; display: grid; gap: 0; }
.timeline li { position: relative; display: grid; grid-template-columns: minmax(10rem, 13rem) 1fr; gap: 1rem; padding: 0.9rem 0 0.9rem 1.6rem; border-left: 3px solid var(--line); }
.timeline li::before { content: ""; position: absolute; left: -9px; top: 1.25rem; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.timeline time { font-weight: 700; color: var(--text); }
.timeline span { color: var(--text-2); }
@media (max-width: 640px) { .timeline li { grid-template-columns: 1fr; gap: 0.2rem; } }