@layer layout {
 .faq-page { gap:var(--s5); }
 .faq-heading,.faq-actions,.faq-results-heading,.faq-toolbar,.faq-access { display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap; }
 .faq-header { display:grid;gap:var(--s3); }
 .faq-heading { flex-wrap:nowrap; }
 .faq-heading > div { min-width:0; }
 .faq-heading h1 { margin:0;font-size:clamp(1.65rem,3vw,2.25rem); }
 .faq-plus-accent { color:var(--accent-text); }
 .faq-heading .eyebrow { margin-bottom:var(--s1);font-size:.72rem;color:var(--text-muted); }
 .faq-heading .info-popover { margin-inline-start:auto; }
 .faq-header > p { margin:0;color:var(--text-muted);font-size:.8125rem; }
 .faq-search-panel { display:grid;gap:var(--s3);padding:var(--s4);border:1px solid var(--gold-border);border-radius:var(--radius-card);background:var(--surface); }
 .faq-search-panel .field { position:relative;margin:0; }
 .faq-search-panel .field::after { content:'';position:absolute;inset-inline-start:var(--s3);bottom:var(--s3);width:var(--s5);height:var(--s5);background:var(--text-muted);pointer-events:none;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m21 21-4.3-4.3M10.8 18a7.2 7.2 0 1 1 0-14.4 7.2 7.2 0 0 1 0 14.4Z'/%3E%3C/svg%3E") center/contain no-repeat; }
 .faq-search-panel input[type='search'] { padding-inline-start:calc(var(--s4) + var(--s5));}
 .faq-page [data-faq-action='filters']::before { content:'';width:1.125rem;height:1.125rem;flex:none;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h7m4 0h5M4 12h3m4 0h9M4 17h11m4 0h1'/%3E%3Ccircle cx='12' cy='7' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E") center/contain no-repeat; }
 .faq-toolbar { justify-content:space-between; }
 .faq-search-panel [data-faq-active] { font-size:.8125rem;color:var(--text-muted); }
 .faq-page [data-faq-active]:empty,.faq-page [data-faq-access]:empty,.faq-page [data-faq-status]:empty,.faq-page [data-faq-clear]:empty { display:none; }
 .faq-access { justify-content:space-between;gap:var(--s4);padding:var(--s3) var(--s4);border-inline-start:var(--s1) solid var(--gold-border);background:var(--surface-muted);border-radius:var(--radius-control); }
 .faq-access p { flex:1 1 20rem;margin:0;font-size:.875rem;color:var(--text-muted); }
 /* UI-030: Free and Plus value side by side. */
 .faq-access__compare { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);flex:1 1 100%; }
 .faq-access__tier { display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface);font-size:.8125rem; }
 .faq-access__tier--plus { border-color:var(--gold-border);background:linear-gradient(135deg,var(--gold-soft),transparent 70%),var(--surface); }
 .faq-access--active { border-inline-start-color:var(--success); }
 /* Paket U (UI-030, Daniel 15.10.2026: "Das selbe gilt für FAQs!"): the question of the day stands on the Plus stage
    (components.css .plus-stage); its card opens up on the stage instead of a white card inside it. */
 .faq-daily-heading { display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4); }
 .faq-daily-heading h2 { margin:0; }
 .faq-daily .faq-card { padding:0;border:0;border-top:0;background:none;box-shadow:none; }
 .faq-daily .faq-card:hover { box-shadow:none; }
 .faq-daily .faq-card-heading h3 { font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);line-height:1.2; }
 .faq-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4); }
 /* UI-030 (Paket U): the card edge, the chips and the open answer carry the colour of the category (tokens.css
    --category-*), next to its r337 symbol; the Free/Plus badge stays the access mark. The card lifts on hover. */
 :is(.faq-card,.faq-detail,.faq-category) { --faq-tone:var(--category-foundation); }
 :is(.faq-card,.faq-detail,.faq-category)[data-tone='technology'] { --faq-tone:var(--category-technology); }
 :is(.faq-card,.faq-detail,.faq-category)[data-tone='markets'] { --faq-tone:var(--category-markets); }
 :is(.faq-card,.faq-detail,.faq-category)[data-tone='security'] { --faq-tone:var(--category-security); }
 :is(.faq-card,.faq-detail,.faq-category)[data-tone='defi'] { --faq-tone:var(--category-defi); }
 :is(.faq-card,.faq-detail,.faq-category)[data-tone='infrastructure'] { --faq-tone:var(--category-infrastructure); }
 :is(.faq-card,.faq-detail,.faq-category)[data-tone='psychology'] { --faq-tone:var(--category-psychology); }
 :is(.faq-card,.faq-detail,.faq-category)[data-tone='governance'] { --faq-tone:var(--category-governance); }
 :is(.faq-card,.faq-detail,.faq-category)[data-tone='metaverse'] { --faq-tone:var(--category-metaverse); }
 :is(.faq-card,.faq-detail,.faq-category)[data-tone='nft'] { --faq-tone:var(--category-nft); }
 :is(.faq-card,.faq-detail,.faq-category)[data-tone='regulation'] { --faq-tone:var(--category-regulation); }
 .faq-card { display:flex;flex-direction:column;gap:var(--s3);min-width:0;padding:var(--s4);border:1px solid var(--border);border-top:3px solid var(--faq-tone);border-radius:var(--radius-card);background:linear-gradient(180deg,color-mix(in srgb,var(--faq-tone) 6%,var(--surface)),var(--surface) 46%);transition:border-color var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard); }
 .faq-card:hover { border-color:color-mix(in srgb,var(--faq-tone) 45%,var(--border));box-shadow:var(--shadow-elevated);transform:translateY(-2px); }
 .faq-category .badge { border-color:color-mix(in srgb,var(--faq-tone) 45%,var(--border));background:color-mix(in srgb,var(--faq-tone) 10%,var(--surface));color:var(--text); }
 .faq-detail { padding-top:var(--s4);border-top:4px solid var(--faq-tone); }
 .faq-card-heading { display:flex;align-items:flex-start;gap:var(--s3); }
 .faq-card-heading h3 { flex:1;min-width:0;margin:0;font-size:1.125rem;line-height:1.4; }
 .faq-card-heading [data-faq-action='favorite'] { flex:none;width:var(--touch-target);padding:0; }
 .faq-page :is([data-faq-action='favorite'],[data-faq-action='focus'])[aria-pressed='true'],.faq-page [data-faq-action='related-tag'][aria-expanded='true'] { background:var(--gold-soft);border-color:var(--gold-border);color:var(--accent-text); }
 .faq-preview { margin:0;color:var(--text-muted);font-size:.875rem;line-height:1.65;white-space:pre-line; }
 /* UI-086 (Daniel 18.10.2026, Auszug 3 Zeilen): the overview shows the first three lines of an answer, "Antwort lesen"
    the whole; the question of the day (a Plus preview) stays complete. */
 .faq-grid .faq-preview { display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden; }
 .faq-daily .faq-preview { color:var(--text);font-size:1rem; }
 /* Paket AI _v2 (2c Variante B): the line „Plus · Heute als Vorschau komplett lesbar“ above the question of the day. */
 .faq-daily-preview { display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);margin:0;color:var(--accent-text);font-size:.875rem;font-weight:600; }
 .faq-tags { display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap; }
 .faq-tags .badge { letter-spacing:normal;text-transform:none;white-space:normal;max-width:100%;overflow-wrap:anywhere; }
 .faq-detail-tags { margin-top:var(--s4); }
 .faq-card-actions { margin-top:auto;padding-top:var(--s2); }
 .faq-card-actions .btn { flex:1 1 auto; }
 .faq-daily .faq-card-actions .btn { flex:none; }
 .faq-results-heading { margin-bottom:var(--s4); }
 .faq-results-heading h2 { margin:0;font-size:1.35rem; }
 .faq-results-heading p { margin:0;font-size:.8125rem;color:var(--text-muted); }
 .faq-results-heading [data-faq-clear] { margin-inline-start:auto; }
 .faq-page fieldset { border:0;padding:0;margin:0 0 var(--s5);min-width:0; }
 .faq-page legend { margin-bottom:var(--s3);font-weight:600; }
 .faq-categories { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3); }
 .faq-categories > button { width:100%;white-space:normal;text-align:start;justify-content:flex-start; }
 .faq-page mark { background:var(--gold-soft);color:var(--text); }
 .faq-answer { display:grid;gap:var(--s4);margin-block:var(--s5); }
 .faq-answer p { max-width:var(--reading-max);white-space:normal;overflow-wrap:anywhere;margin:0; }
 /* UI-086: the parts of the answer read as their own blocks: a larger title with its sign, body text at reading size. */
 .faq-answer .learning-section { padding:var(--s4) var(--s5); }
 .faq-answer .learning-section > h3 { margin-bottom:var(--s3);font-size:1rem;font-weight:700; }
 .faq-answer .learning-section > p { color:var(--text);font-size:1rem;line-height:1.7; }
 /* Related topics and related questions: two separate areas with title and sign; topics as chips, questions as rows. */
 .faq-more { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--s4);align-items:start;margin-block:var(--s6) var(--s4); }
 .faq-more__block { display:grid;gap:var(--s3);padding:var(--s4);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface-muted); }
 .faq-more__title { display:flex;align-items:center;gap:var(--s2);margin:0;font-size:1rem; }
 .faq-more__mark { display:inline-grid;place-items:center;flex:none;width:var(--s6);height:var(--s6);border:1px solid var(--gold-border);border-radius:var(--radius-pill);background:var(--surface);color:var(--accent-text); }
 .faq-more__mark svg { width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
 .faq-more__chips { display:flex;flex-wrap:wrap;gap:var(--s2); }
 .faq-more__list { display:grid;gap:var(--s2);margin:0;padding:0;list-style:none; }
 .faq-more__list .btn { display:grid;grid-template-columns:minmax(0,1fr) auto;justify-content:stretch;align-items:start;gap:var(--s2) var(--s3);width:100%;text-align:start;white-space:normal; }
 .faq-more__list .btn::after { content:'→' / '';grid-column:2;grid-row:1;color:var(--accent-text); }
 /* UI-106: the category marks of a related question, under its title (r337 related-question-meta). */
 .faq-more__meta { grid-column:1 / -1;grid-row:2;display:flex;flex-wrap:wrap;gap:var(--s1);font-weight:400; }
 .faq-more [data-faq-related-picker]:empty { display:none; }
 /* Paket AI (AH-05, r337 Fokusmodus): the reading view of the answer window. The window is the central .dialog-focus;
    here the category marks step back, the question grows, the answer reads larger and calmer, a gold line closes the
    action row (r337 .modal-meta) and the further reading sits quieter. The switch carries the r337 eye. */
 .faq-focus-icon { display:inline-flex;flex:none; }
 .faq-focus-icon svg { width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
 .faq-page .dialog-focus .faq-detail-tags { display:none; }
 .faq-page .dialog-focus .faq-detail-actions { padding-bottom:var(--s3);border-bottom:1px solid var(--gold-border); }
 .faq-page .dialog-focus .dialog-heading h2 { font-size:clamp(1.5rem,1.2rem + 1.6vw,2.25rem);line-height:1.24; }
 .faq-page .dialog-focus .faq-answer { margin-block-start:var(--s6); }
 .faq-page .dialog-focus .faq-answer p { max-width:82ch; }
 .faq-page .dialog-focus .faq-answer .learning-section > p { font-size:1.0625rem;line-height:1.78; }
 .faq-page .dialog-focus .faq-more__block { background:transparent;border-color:var(--gold-border); }
 .faq-page .dialog-focus .faq-more__title { color:var(--accent-text);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase; }
 /* r337 toggleRelatedTagPicker: the questions of one topic inside the window, with title and close. */
 .faq-picker { display:grid;gap:var(--s3);padding:var(--s3) var(--s4) var(--s4);border:1px solid var(--gold-border);border-radius:var(--radius-card);background:var(--surface); }
 .faq-picker__head { display:flex;align-items:center;justify-content:space-between;gap:var(--s3); }
 .faq-picker__head h4 { margin:0;font-size:.9375rem;line-height:1.4; }
 .faq-picker__empty { margin:0;color:var(--text-muted);font-size:.875rem; }
 .faq-page .dialog-heading { align-items:flex-start; }
 .faq-page .dialog-heading > .btn { flex:none; }
 .faq-page .dialog-heading h2 { min-width:0;overflow-wrap:anywhere;font-size:clamp(1.25rem,3vw,1.75rem); }
 @media (max-width:75rem) { .faq-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
 @media (max-width:60rem) { .faq-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
 @media (max-width:44rem) {
  .faq-grid { grid-template-columns:minmax(0,1fr); }
  .faq-page .dialog-heading { flex-direction:column; }
  .faq-page .dialog-heading > .btn { order:-1;align-self:flex-end; }
 }
 @media (max-width:760px) {
  .faq-daily { padding:var(--s4); }
  .faq-categories { grid-template-columns:minmax(0,1fr); }
  .faq-access__compare { grid-template-columns:minmax(0,1fr); }
  .faq-more { grid-template-columns:minmax(0,1fr); }
  .faq-heading .eyebrow { display:none; }
  .faq-toolbar > .faq-actions { flex:1 1 100%; }
  .faq-toolbar > .faq-actions > button { flex:1; }
  .faq-daily .faq-card-actions .btn { flex:1; }
 }
}