/* Paket BC: the Krypto-Überblick (apps/public/krypto-ueberblick.mjs). FINAL v18 tokens and the central components only
   (.card, .btn, .chip, .metric, .mood-card, .market-story, .news-image, .section-head, .r4x-stage, .r4x-collection-card,
   .table-scroll); this sheet places them. The feature card of Wissen is dark in both themes (data-theme-scope="dark"). */
@layer components, layout;
@layer layout {
  .kue { display: grid; gap: var(--section-gap); padding-block: var(--s5) var(--s8); min-width: 0; }
  .kue .eyebrow { margin: 0; }
  .kue-section { display: grid; gap: var(--s5); min-width: 0; }
  .kue-note, .kue-stand { margin: 0; color: var(--text-muted); font-size: .8125rem; }
  .kue-attribution { margin: 0; color: var(--text-muted); font-size: .75rem; }
  .kue-attribution a { color: inherit; }

  /* Einstieg */
  .kue-entry { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; gap: var(--s5) var(--s7); padding-bottom: var(--s6); border-bottom: 1px solid var(--border-soft); }
  .kue-entry__copy { display: grid; gap: var(--s3); min-width: 0; }
  .kue-entry h1 { margin: 0; }
  .kue-lead { margin: 0; max-width: 46ch; color: var(--text-muted); font-size: 1.0625rem; line-height: 1.6; }
  .kue-search { display: grid; gap: var(--s2); min-width: 0; }
  .kue-search__field { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: calc(var(--touch-target) + var(--s3)); padding: 0 var(--s4); border: 1px solid var(--input-border); border-radius: var(--radius-control); background: var(--input); color: var(--text-muted); font-size: 1rem; text-align: start; box-shadow: var(--shadow-card); transition: border-color var(--motion-fast) var(--ease-standard); }
  .kue-search__field svg { flex: none; color: var(--accent-text); }
  .kue-search__field:hover { border-color: var(--gold); }
  .kue-search__help { margin: 0; color: var(--text-muted); font-size: .8125rem; }
  /* Paket BO (Hinweis A): „R4X · Dein digitaler Krypto-Helfer“ below the search; „Mehr erfahren“ opens the window. */
  .kue-companion { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s2); padding: var(--s3) var(--s4); border: 1px solid var(--gold-border); border-left: 3px solid var(--gold); border-radius: var(--radius-control); background: var(--surface); }
  .kue-companion > img { width: var(--s6); height: var(--s6); }
  .kue-companion__copy { display: grid; gap: var(--s1); margin: 0; min-width: 0; }
  .kue-companion__title { color: var(--text); font-size: .9375rem; }
  .kue-companion__text { color: var(--text-muted); font-size: .875rem; line-height: 1.4; }
  .kue-companion__more { white-space: nowrap; }
  /* The window about Mein Bereich (central dialog, stage): benefits and the four parts side by side, below each other on phones. */
  .kue-companion-window { display: grid; gap: var(--s4); }
  .kue-companion-window__title { margin: 0; font-size: 1.35rem; }
  .kue-companion-window__lead { margin: 0; color: var(--text-muted); line-height: 1.6; }
  .kue-companion-window__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
  .kue-companion-window__grid section { display: grid; align-content: start; gap: var(--s3); }
  .kue-companion-window__grid ul { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
  .kue-companion-window__benefits li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s2); color: var(--text); font-size: .9375rem; line-height: 1.45; }
  .kue-companion-window__benefits svg { margin-top: calc(var(--s1) / 2); color: var(--accent-text); }
  .kue-companion-window__parts li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s3); }
  .kue-companion-window__parts strong, .kue-companion-window__parts small { display: block; }
  .kue-companion-window__parts strong { font-size: .9375rem; }
  .kue-companion-window__parts small { color: var(--text-muted); font-size: .8125rem; line-height: 1.45; }
  .kue-companion-window__icon img { display: block; width: var(--s7); height: var(--s7); }
  /* The brain of the R4X-Gedächtnis as in Mein Bereich: a gold framed field with a soft glow. */
  .kue-companion-window__icon--brain { display: grid; place-items: center; width: var(--s7); height: var(--s7); border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: radial-gradient(circle at 30% 25%, var(--surface), var(--gold-soft)); color: var(--accent-text); box-shadow: 0 0 0 var(--s1) var(--gold-soft), 0 0 var(--s5) var(--gold-glow); }
  .kue-companion-window__icon--brain .memory-icon { width: var(--s5); height: var(--s5); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .kue-companion-window__cta { display: grid; justify-items: start; gap: var(--s2); }
  .kue-companion-window__note { margin: 0; color: var(--text-muted); font-size: .8125rem; }

  /* Markt heute (Paket BN, the prototype's strip): the head names title, time of the data, sources, currency and pause; the
     values below stand side by side and fill the width, or run when they do not fit. */
  .kue-market { gap: var(--s2); }
  .kue-ticker { display: grid; padding: 0; overflow: hidden; }
  .kue-ticker__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--s2) var(--s4); padding: var(--s2) var(--s4); border-bottom: 1px solid var(--border); background: var(--surface-muted); }
  .kue-ticker__title { margin: 0; font-size: 1.125rem; white-space: nowrap; }
  .kue-ticker__stand { margin: 0; color: var(--text-muted); font-size: .75rem; line-height: 1.5; }
  .kue-ticker__stand .kue-stand, .kue-ticker__stand .kue-attribution { font-size: inherit; }
  .kue-ticker__toggle[hidden] { display: none; }
  .kue-ticker__viewport { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
  .kue-ticker__viewport::-webkit-scrollbar { height: 0; }
  .kue-ticker__viewport:is([data-motion='paused'], [data-motion='still']) { scrollbar-width: thin; }
  .kue-ticker__viewport:focus-visible { outline-offset: calc(var(--s1) * -1); }
  .kue-ticker__track { display: flex; width: max-content; }
  .kue-ticker__viewport[data-motion='still'] .kue-ticker__track { min-width: 100%; }
  .kue-ticker__group { display: flex; flex: 1 0 auto; margin: 0; padding: 0; list-style: none; }
  .kue-ticker__group[hidden] { display: none; }
  .kue-tick { display: flex; flex: 1 0 auto; align-items: center; gap: var(--s2); min-height: calc(var(--s7) + var(--s1)); padding: var(--s2) var(--s5); border-right: 1px solid var(--border-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
  /* The original logos stand in their light field in both themes, as on the coin cards (Paket BI): the Ethereum diamond is black. */
  .kue-tick__mark img { display: block; width: var(--s5); height: var(--s5); padding: calc(var(--s1) / 2); border: 1px solid var(--paper-border); border-radius: var(--radius-pill); background: var(--paper); }
  .kue-tick__name { color: var(--text-muted); font-size: .8125rem; }
  .kue-tick__value { color: var(--text); font-size: .9375rem; }
  .kue-tick__change { font-size: .75rem; font-weight: 700; }
  .kue-tick__change small { color: var(--text-muted); font-size: .72rem; font-weight: 400; }
  .kue-tick__change[data-tone='success'] { color: var(--success); }
  .kue-tick__change[data-tone='danger'] { color: var(--danger); }
  .kue-tick__extra { color: var(--text-muted); font-size: .75rem; }
  .kue-market[data-kue-state='stale'] .kue-stand { color: var(--warning); }

  /* Fragekarten */
  .kue-asks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
  .kue-ask { display: grid; grid-template-rows: auto auto auto 1fr auto; align-content: start; gap: var(--s2); }
  .kue-ask__icon { display: grid; place-items: center; width: calc(var(--s8) + var(--s4)); height: calc(var(--s8) + var(--s4)); margin-bottom: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-muted); }
  .kue-ask__icon img { width: var(--s8); height: var(--s8); }
  .kue-ask h3 { margin: 0; font-size: 1.15rem; }
  .kue-ask__text { margin: 0 0 var(--s3); color: var(--text-muted); font-size: .9375rem; line-height: 1.55; }
  .kue-ask .btn { justify-self: start; }

  /* Krypto in 60 Sekunden: the pick as the lead card of Mein Bereich (.market-story) with its motif; Paket BN: below it four
     small cards with picture, kind (crypto gold, markets blue as in the columns of News), title, source and time. */
  .kue-news__body { display: grid; gap: var(--s4); min-height: calc(var(--s8) * 4); align-content: start; }
  .kue-briefs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
  .kue-brief { --tone: var(--news-crypto); display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s2); padding: 0; overflow: hidden; border-block-start: 3px solid var(--tone); color: var(--text); text-decoration: none; }
  .kue-brief[data-kind='market'] { --tone: var(--news-market); }
  a.kue-brief:hover { border-color: var(--gold); background: var(--surface-strong); color: var(--text); }
  .kue-brief .news-image img { border-radius: 0; }
  .kue-brief__kind, .kue-brief__title, .kue-brief__meta { margin: 0; padding-inline: var(--s4); }
  .kue-brief__kind { color: var(--tone); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .kue-brief__title { font-size: .9375rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .kue-brief__meta { padding-block-end: var(--s4); color: var(--text-muted); font-size: .75rem; }

  /* Coins entdecken: the coin cards of /wissen/ratgeber/ by kind, the logo field as there (Paket BI) */
  .kue-coin-group { display: grid; gap: var(--s3); }
  .r4x-collection-icon.r4x-collection-icon--logo { border-color: var(--paper-border); background: var(--paper); }
  .r4x-collection-icon--logo img { display: block; width: var(--s6); height: var(--s6); object-fit: contain; }
  /* Paket BN: Bitcoin large, the other coins small beside it (wide screens) as rows with logo, name, price, change, text and
     line; „Alle 8 Coins anzeigen“ below them opens the further groups. On phones the small cards are a row to swipe. */
  .kue-coins-lead { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s4); align-items: stretch; }
  .kue-minis { display: grid; gap: var(--s3); }
  .kue-mini { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'logo name price' 'logo name change' '. text text' '. trend trend' '. action action'; align-items: center; gap: var(--s1) var(--s3); padding: var(--s3) var(--s4); border-left: 3px solid var(--gold); color: var(--text); text-decoration: none; }
  a.kue-mini:hover { border-color: var(--gold); background: var(--surface-strong); color: var(--text); }
  .kue-mini__cover { grid-area: logo; position: relative; margin: 0; }
  .kue-mini__cover > img { display: none; }
  .kue-mini__name { grid-area: name; display: grid; gap: var(--s1); min-width: 0; }
  .kue-mini__name b { font-size: 1rem; }
  .kue-mini__name small { color: var(--accent-text); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .kue-mini__text { grid-area: text; color: var(--text-muted); font-size: .875rem; line-height: 1.45; }
  .kue-mini__data { display: contents; }
  .kue-mini__data[hidden] { display: none; }
  .kue-mini__price { grid-area: price; justify-self: end; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  .kue-mini__change { grid-area: change; justify-self: end; font-size: .75rem; font-weight: 700; white-space: nowrap; }
  .kue-mini__change[data-tone='success'] { color: var(--success); }
  .kue-mini__change[data-tone='danger'] { color: var(--danger); }
  .kue-mini__trend { grid-area: trend; display: block; height: calc(var(--s6) + var(--s1)); }
  .kue-mini__trend:empty { display: none; }
  /* Daniel 26.10.2026: „Bei Coins entdecken fehlt das kennen lernen -> auf den kleineren Karten“. */
  .kue-mini .r4x-collection-card-action { grid-area: action; padding-top: var(--s1); }
  .kue-mini__group, .kue-coins-lead .kue-mini--extra { display: none; }
  .kue-coins-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: 0; color: var(--text-muted); font-size: .8125rem; }
  .kue-coins-more { display: grid; gap: var(--s5); }
  .kue-coins-more[hidden] { display: none; }
  .kue-coins-more .kue-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Wide screens (Daniel 26.10.2026: „Der CTA Alle Coins anzeigen hätte doch genau den richtigen Platz unter den 3 Kleineren
     Karten“): the button closes the column of small cards, which ends flush with the Bitcoin card; the cards share its height. */
  @media (min-width: 768px) {
    .kue-coins-lead > .kue-minis { display: flex; flex-direction: column; }
    .kue-coins-lead .kue-mini { flex: 1 1 auto; align-content: center; }
  }
  /* Paket BN: the Investment Hub as a tool below the comparison, its r337 picture with the Plus mark. */
  .kue-hub { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); padding: 0; overflow: hidden; border-left: 3px solid var(--gold); }
  .kue-hub__media { position: relative; margin: 0; background: var(--brand-page); }
  .kue-hub__media img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  .kue-hub__badges { position: absolute; top: var(--s3); left: var(--s3); display: flex; gap: var(--s2); }
  .kue-hub__body { display: grid; align-content: center; justify-items: start; gap: var(--s3); padding: var(--s5); }
  .kue-hub__title { display: flex; align-items: center; gap: var(--s3); margin: 0; font-size: 1.35rem; }
  .kue-hub__title img { width: var(--s6); height: var(--s6); }
  .kue-hub__lead, .kue-hub__text { margin: 0; }
  .kue-hub__lead { color: var(--text); font-size: 1.0625rem; font-weight: 600; }
  .kue-hub__text { color: var(--text-muted); }
  /* Paket BL (K3): the cover of the portrait on top with the logo in it, below the copy price, 7-day change and line. The copy
     takes the free height, so price rows and actions of cards side by side stand on one line. */
  .kue-coin { grid-template-rows: auto auto auto 1fr; }
  .kue-coin__cover { position: relative; margin: 0 0 var(--s2); overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-control); background: var(--surface-strong); }
  .kue-coin__cover > img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .kue-coin__cover .r4x-collection-icon { position: absolute; left: var(--s3); bottom: var(--s3); box-shadow: var(--shadow-card); }
  .kue-coin__data { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3); margin-top: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--border-soft); }
  .kue-coin__data[hidden] { display: none; }
  .kue-coin__figures { display: grid; gap: var(--s1); min-width: 0; }
  .kue-coin__price { color: var(--text); font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  .kue-coin__change { font-size: .8125rem; font-weight: 700; white-space: nowrap; }
  .kue-coin__change[data-tone='success'] { color: var(--success); }
  .kue-coin__change[data-tone='danger'] { color: var(--danger); }
  .kue-coin__trend { display: block; width: calc(var(--s8) * 2); height: calc(var(--s6) + var(--s2)); }
  /* The 7-day line (krypto-ueberblick-runtime.mjs trendSvg): gold line, its start level, the last price as a point; strokes keep
     their width when the picture is stretched. Direction never rests on colour: the change beside it carries arrow and sign. */
  .kue-trend { display: block; width: 100%; height: 100%; overflow: visible; }
  .kue-trend path { vector-effect: non-scaling-stroke; }
  .kue-trend__area { fill: var(--gold-soft); }
  .kue-trend__base { fill: none; stroke: var(--border); stroke-width: 1; }
  .kue-trend__line { fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .kue-trend__end { fill: none; stroke: var(--accent-text); stroke-width: 8; stroke-linecap: round; }
  .kue-compare { display: grid; gap: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
  .kue-compare > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: var(--touch-target); padding: var(--s4) var(--s5); color: var(--text); list-style: none; }
  .kue-compare > summary::-webkit-details-marker { display: none; }
  .kue-compare > summary span:first-child { display: grid; gap: var(--s1); }
  .kue-compare > summary small { color: var(--text-muted); font-size: .8125rem; }
  .kue-compare > summary:hover { color: var(--accent-text); }
  .kue-more__mark { flex: none; width: var(--s2); height: var(--s2); border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg) translateY(-2px); transition: transform var(--motion-fast) var(--ease-standard); }
  .kue-compare[open] .kue-more__mark { transform: rotate(-135deg); }
  .kue-compare__body { display: grid; gap: var(--s3); padding: 0 var(--s5) var(--s5); }
  .kue-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  .kue-table :is(th, td) { padding: var(--s3) var(--s2); border-bottom: 1px solid var(--border-soft); text-align: end; white-space: nowrap; }
  .kue-table :is(thead th, tbody th) { text-align: start; }
  .kue-table thead th { color: var(--text-muted); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .kue-table__coin { display: flex; align-items: center; gap: var(--s3); font-weight: 600; }
  .kue-table__coin .r4x-collection-icon { flex: none; width: var(--s6); height: var(--s6); }
  .kue-table__coin .r4x-collection-icon--logo img { width: var(--s5); height: var(--s5); }
  .kue-table__coin small { color: var(--text-muted); font-size: .75rem; font-weight: 600; }
  .kue-table td[data-tone='success'] { color: var(--success); }
  .kue-table td[data-tone='danger'] { color: var(--danger); }
  /* Paket BL (V1): the 7-day line as its own column and a bar for the market value against the largest of the eight coins. */
  .kue-table td[data-kue-cell='trend'] .kue-trend { width: calc(var(--s8) + var(--s6)); height: calc(var(--s5) + var(--s1)); margin-inline-start: auto; }
  .kue-cap { display: inline-grid; justify-items: end; gap: var(--s1); min-width: calc(var(--s8) * 2); }
  .kue-cap__bar { display: block; width: 100%; height: var(--s1); border-radius: var(--radius-pill); }
  .kue-cap__track { fill: var(--border-soft); }
  .kue-cap__fill { fill: var(--accent-text); }

  /* Wissen */
  .kue-topics { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); gap: var(--s4); }
  /* Paket BO: the row of the four topics is a row to swipe on phones only; on wider screens its cards stay places of the grid. */
  .kue-topic-row { display: contents; }
  .kue-feature { position: relative; isolation: isolate; display: grid; grid-row: span 2; align-content: end; min-height: calc(var(--s8) * 6); overflow: hidden; border: 1px solid var(--brand-border); border-radius: var(--radius-card); background: var(--brand-page); color: var(--brand-text); text-decoration: none; box-shadow: var(--shadow-card); }
  .kue-feature > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; mask-image: linear-gradient(0deg, transparent 22%, var(--brand-page) 82%); }
  .kue-feature__copy { display: grid; gap: var(--s2); padding: var(--s5); }
  .kue-feature__title { font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
  .kue-feature__text { color: var(--brand-muted); }
  .kue-feature__label { color: var(--brand-muted); font-size: .72rem; }
  .kue-feature .r4x-collection-card-action { color: var(--gold); }
  .kue-feature:hover { border-color: var(--gold); color: var(--brand-text); }
  .kue-trails { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; color: var(--text-muted); font-size: .875rem; }
  .kue-trails .chip { color: var(--text); text-decoration: none; }

  /* Vom Verstehen ins Anwenden: three trainings with their pictures and access */
  .kue-trainings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
  .kue-train { display: grid; grid-template-rows: auto 1fr; padding: 0; overflow: hidden; }
  .kue-train__media { position: relative; margin: 0; background: var(--brand-page); }
  .kue-train__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
  .kue-train__badges { position: absolute; top: var(--s3); left: var(--s3); display: flex; gap: var(--s2); }
  .kue-train__body { display: grid; align-content: start; justify-items: start; gap: var(--s2); padding: var(--s5); }
  .kue-train__body h3 { margin: 0; font-size: 1.2rem; }
  .kue-train__body p { margin: 0 0 var(--s3); color: var(--text-muted); font-size: .9375rem; }

  /* Brücke zu Mein Bereich */
  .kue-bridge { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: var(--s6); padding: var(--s7); }
  .kue-bridge__copy { display: grid; justify-items: start; gap: var(--s3); }
  .kue-bridge__copy h2 { margin: 0; }
  .kue-bridge__copy > p:not([class]) { margin: 0; max-width: 50ch; color: var(--text-muted); }
  .kue-bridge__note { margin: 0; color: var(--text-muted); font-size: .8125rem; }
  .kue-memory { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
  .kue-memory li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
  .kue-memory__icon { display: grid; place-items: center; width: var(--s7); height: var(--s7); border-radius: var(--radius-control); background: var(--surface-muted); }
  .kue-memory__icon img { width: var(--s6); height: var(--s6); }
  .kue-memory strong, .kue-memory small { display: block; }
  .kue-memory small { color: var(--text-muted); font-size: .875rem; line-height: 1.45; }

  @media (max-width: 1099px) {
    .kue-briefs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kue-asks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kue-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kue-feature { grid-column: 1 / -1; grid-row: auto; min-height: calc(var(--s8) * 5); }
  }
  @media (max-width: 767px) {
    .kue { padding-top: var(--s4); }
    .kue-entry, .kue-bridge { grid-template-columns: minmax(0, 1fr); }
    .kue-companion { grid-template-columns: auto minmax(0, 1fr); }
    .kue-companion__more { grid-column: 2; justify-self: start; }
    .kue-companion-window { gap: var(--s3); }
    .kue-companion-window__title { font-size: 1.15rem; }
    .kue-companion-window__lead { font-size: .9375rem; line-height: 1.5; }
    .kue-companion-window__grid { grid-template-columns: minmax(0, 1fr); }
    .kue-bridge { padding: var(--s5) var(--s4); }
    /* Paket BO (Daniel 26.10.2026: „auf Mobile selbe prinzip machen (swipen) wie bei coins entdecken für Verstehen, Prüfen,
       Entscheiden - Wissen das zusammenhänge schafft - Vom verstehen ins Anwenden“): questions, topics and trainings as rows to
       swipe, the icon above the copy; the large article of Wissen stays above its row. */
    .kue-topics { grid-template-columns: minmax(0, 1fr); }
    .kue-asks, .kue-topic-row, .kue-trainings { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-block-end: var(--s2); scrollbar-width: none; }
    .kue-ask { flex: 0 0 72%; scroll-snap-align: start; }
    .kue-ask__icon { width: calc(var(--s8) + var(--s2)); height: calc(var(--s8) + var(--s2)); margin-bottom: var(--s2); }
    .kue-ask__icon img { width: var(--s7); height: var(--s7); }
    .kue-topic-row .kue-topic { flex: 0 0 66%; scroll-snap-align: start; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; }
    /* The same form as the central rule of the cards with an icon (components.css), so the copy sits below the icon. */
    .kue-topic-row .kue-topic[data-icon] > :not(.r4x-collection-icon) { grid-column: 1; }
    .kue-topic-row .kue-topic > .r4x-collection-icon { grid-row: auto; margin-bottom: var(--s1); }
    .kue-topic-row .kue-topic > .r4x-collection-card-action { align-self: end; }
    .kue-train { flex: 0 0 80%; scroll-snap-align: start; }
    /* Phones: the picture above, the copy below on the brand ground, so the text never stands on the bright metal. */
    .kue-feature { min-height: 0; align-content: start; }
    .kue-feature > img { position: static; z-index: auto; height: auto; aspect-ratio: 16 / 9; mask-image: linear-gradient(0deg, transparent, var(--brand-page) 45%); }
    .kue-feature__copy { position: relative; margin-top: calc(var(--s6) * -1); }
    /* Phones: flatter training pictures, so the three trainings stay one short sequence. */
    .kue-train__media img { aspect-ratio: 21 / 9; }
    .kue-train__body { padding: var(--s4); }
    .kue-compare > summary { padding: var(--s4); }
    .kue-compare__body { padding: 0 var(--s4) var(--s4); }
    /* Kurse vergleichen on phones: one block per coin, every value with its name, nothing hidden sideways. */
    .kue-table table, .kue-table tbody, .kue-table tr, .kue-table th, .kue-table td { display: block; }
    .kue-table thead { display: none; }
    .kue-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1) var(--s4); padding-block: var(--s3); border-bottom: 1px solid var(--border-soft); }
    .kue-table tbody th { grid-column: 1 / -1; padding: 0 0 var(--s1); border: 0; }
    .kue-table td { display: flex; justify-content: space-between; gap: var(--s2); padding: var(--s1) 0; border: 0; white-space: normal; }
    .kue-table td::before { content: attr(data-label); color: var(--text-muted); font-size: .75rem; }
    /* Paket BN (Daniel 26.10.2026, phones „Variante B (Wischen)“): the strip head on two lines, the small news as a row to
       swipe; the seven small coin cards as one row, each named by its group, the groups below the button stay away. */
    /* Touch screens give the currency switch its full touch size: title and currency share the first line, time of the
       data and pause the second, so the switch never covers the title; the time of the data reaches up to the pause. */
    .kue-ticker__head { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'title switch switch' 'stand stand toggle'; gap: var(--s1) var(--s2); padding: var(--s2) var(--s3); }
    .kue-ticker__title { grid-area: title; font-size: 1rem; white-space: normal; }
    .kue-ticker__head > .currency-switch { grid-area: switch; }
    .kue-ticker__stand { grid-area: stand; }
    .kue-ticker__toggle { grid-area: toggle; }
    .kue-tick { padding-inline: var(--s4); }
    .kue-briefs, .kue-minis { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-block-end: var(--s2); scrollbar-width: none; }
    .kue-brief { flex: 0 0 72%; scroll-snap-align: start; }
    .kue-coins-lead { grid-template-columns: minmax(0, 1fr); }
    .kue-mini { flex: 0 0 62%; scroll-snap-align: start; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(5, auto) 1fr; grid-template-areas: 'logo' 'group' 'name' 'price' 'change' 'action'; align-content: start; padding: 0 0 var(--s3); border-left-width: 1px; border-top: 3px solid var(--gold); }
    .kue-coins-lead .kue-mini--extra { display: grid; }
    .kue-mini__group { grid-area: group; display: block; padding-top: var(--s1); color: var(--accent-text); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .kue-mini__cover { overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface-strong); }
    .kue-mini__cover > img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .kue-mini__cover .r4x-collection-icon { position: absolute; left: var(--s2); bottom: var(--s2); width: var(--s6); height: var(--s6); }
    .kue-mini__cover .r4x-collection-icon--logo img { width: var(--s5); height: var(--s5); }
    .kue-mini :is(.kue-mini__group, .kue-mini__name, .kue-mini__price, .kue-mini__change, .r4x-collection-card-action) { justify-self: start; padding-inline: var(--s3); }
    .kue-mini :is(.kue-mini__name small, .kue-mini__text, .kue-mini__trend) { display: none; }
    .kue-mini .r4x-collection-card-action { align-self: end; }
    .kue-coins-toggle, .kue-coins-more { display: none; }
    .kue-hub { grid-template-columns: minmax(0, 1fr); }
    .kue-hub__body { padding: var(--s4); }
    /* Paket BL: the central table keeps every table at least 620 px wide (.table-scroll table); stacked, that pushed "24 h" and
       "Marktkapitalisierung" out of sight. Below Kurs and 24 h every value has its own line, the line and the bar their room. */
    .kue-table table { min-width: 0; }
    .kue-table td:is([data-kue-cell='change7d'], [data-kue-cell='trend'], [data-kue-cell='marketCap'], [data-kue-cell='volume']) { grid-column: 1 / -1; align-items: center; }
    .kue-table td[data-kue-cell='trend'] .kue-trend { width: calc(var(--s8) * 2 + var(--s4)); }
    .kue-cap { min-width: 0; width: 55%; }
  }
}