/* ==========================================================================
   Blog „Fragen & Antworten“ – Übersicht (blog) und Artikel im Thread-Look
   Nutzt die Farb-Tokens aus style.css (inkl. Dark Mode).
   ========================================================================== */

.qa-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------------------------------------------------------------- Board */
.qa-section { padding-top: 40px; }
.qa-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: start;
}

/* Toolbar */
.qa-toolbar { display:flex; flex-direction:column; gap:14px; margin-bottom:12px; }
.qa-search {
  position: relative; display:flex; align-items:center;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text-muted);
  padding: 0 14px; transition: border-color var(--transition);
}
.qa-search:focus-within { border-color: var(--color-accent); }
.qa-search input {
  flex:1; border:0; background:transparent; outline:none;
  font: 500 1rem/1.4 var(--font-sans); color: var(--color-text);
  padding: 14px 10px;
}
.qa-search input::placeholder { color: var(--color-text-muted); opacity:.8; }

.qa-chips { display:flex; gap:8px; flex-wrap:wrap; }
.qa-chip {
  --topic: var(--color-primary);
  display:inline-flex; align-items:center; gap:7px;
  padding: 6px 12px; border-radius: 999px;
  border: 1.5px solid var(--color-border); background: transparent;
  font: 500 .875rem/1.2 var(--font-sans); color: var(--color-text); cursor:pointer;
}
.qa-chip span { font-variant-numeric: tabular-nums; color: var(--color-text-muted); font-weight:600; }
.qa-chip:hover { border-color: var(--topic); }
.qa-chip.is-active { background: var(--topic); border-color: var(--topic); color:#fff; }
.qa-chip.is-active span { color: rgba(255,255,255,.8); }
[data-theme="dark"] .qa-chip[data-thema="alle"].is-active { background: var(--color-accent); border-color: var(--color-accent); }

.qa-count { font-size:.875rem; color: var(--color-text-muted); margin: 18px 0 0; }

/* Thread-Liste: Zeilen statt Karten */
.qa-list { list-style:none; margin: 8px 0 0; padding:0; border-top: 1px solid var(--color-border); }
.qa-thread {
  display:grid;
  grid-template-columns: 28px minmax(0,1fr) 120px;
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.qa-thread.is-pinned {
  background: var(--color-bg-soft);
  margin: 0 -20px; padding-left: 20px; padding-right: 20px;
  border-left: 3px solid var(--color-accent);
}
.qa-thread[hidden] { display:none; }

.qa-status {
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent); margin-top: 2px;
}

.qa-tags { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.qa-topic {
  --topic: var(--color-primary);
  font-size:.8125rem; font-weight:600; color: var(--topic);
  display:inline-flex; align-items:center; gap:6px;
}
.qa-topic::before { content:""; width:8px; height:8px; border-radius:2px; background: var(--topic); }
[data-theme="dark"] .qa-topic { color: color-mix(in srgb, var(--topic) 45%, #fff); }
.qa-flag {
  font-size:.75rem; font-weight:600; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent);
}
.qa-flag-pin { background: var(--color-primary); color:#fff; }
[data-theme="dark"] .qa-flag-pin { background: var(--color-accent); }

.qa-q { font-size: 1.1875rem; line-height: 1.35; font-weight: 700; margin: 0 0 12px; letter-spacing: -0.01em; }
.qa-q a { color: var(--color-heading); text-decoration: none; }
.qa-q a::after { content:""; position:absolute; inset:0; }           /* ganze Zeile klickbar */
.qa-thread:hover .qa-q a { color: var(--color-accent); }
.qa-q a:focus-visible { outline: none; }
.qa-thread:has(.qa-q a:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 4px; border-radius: 4px; }

.qa-a { display:flex; gap:10px; align-items:flex-start; max-width: 68ch; }
.qa-a img { width:28px; height:28px; border-radius:50%; object-fit:cover; flex:none; margin-top:1px; }
.qa-a p {
  margin:0; font-size:.9375rem; line-height:1.6; color: var(--color-text-light);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.qa-a strong { color: var(--color-text); font-weight:600; }

.qa-meta {
  display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right;
  font-size:.8125rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; padding-top: 2px;
}
.qa-meta time { font-weight:600; color: var(--color-text); }

.qa-empty { padding: 40px 0; border-bottom:1px solid var(--color-border); }
.qa-empty p { margin: 0 0 16px; color: var(--color-text-light); }

/* Seitenleiste */
.qa-aside { position: sticky; top: 96px; display:flex; flex-direction:column; gap:20px; }
.qa-aside h2 { font-size: 1rem; font-weight:700; color: var(--color-heading); margin: 0 0 8px; }
.qa-ask {
  background: var(--color-primary); color: #dbe6f3;
  border-radius: var(--radius-lg); padding: 24px;
}
.qa-ask h2 { color:#fff; font-size: 1.125rem; }
.qa-ask p { font-size:.9rem; line-height:1.6; margin: 0 0 18px; }
.qa-ask .btn { width:100%; justify-content:center; background: var(--color-accent); border-color: var(--color-accent); }
.qa-ask-alt { display:block; text-align:center; margin-top:10px; font-size:.85rem; color:#dbe6f3; }
[data-theme="dark"] .qa-ask { background: var(--color-surface); border: 1px solid var(--color-border); }

.qa-box { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; background: var(--color-surface); }
.qa-topics { list-style:none; margin:0; padding:0; }
.qa-topics button {
  --topic: var(--color-primary);
  width:100%; display:flex; align-items:center; gap:10px; padding: 8px 6px;
  border:0; background:transparent; border-radius: var(--radius-sm); cursor:pointer;
  font: 500 .9rem/1.3 var(--font-sans); color: var(--color-text); text-align:left;
}
.qa-topics button:hover, .qa-topics button.is-active { background: var(--color-bg-section); }
.qa-dot { width:8px; height:8px; border-radius:2px; background: var(--topic); flex:none; }
.qa-num { margin-left:auto; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

.qa-author { display:flex; gap:14px; align-items:flex-start; }
.qa-author img { width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none; }
.qa-author p { font-size:.875rem; line-height:1.55; color: var(--color-text-light); margin: 0 0 6px; }
.qa-author a { font-size:.875rem; font-weight:600; }

.qa-rss { display:flex; align-items:center; gap:8px; font-size:.875rem; color: var(--color-text-muted); text-decoration:none; padding: 0 4px; }
.qa-rss:hover { color: var(--color-accent); }

/* ------------------------------------------------------- Artikel (Thread) */
.qa-article { max-width: 760px; margin: 0 auto; }

.qa-question {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 22px 24px; background: var(--color-bg-soft); margin-bottom: 20px;
}
.qa-question-label { font-size:.8125rem; font-weight:600; color: var(--color-text-muted); margin:0 0 6px; }
.qa-question-text { font-size:1.125rem; line-height:1.55; color: var(--color-heading); margin:0; font-weight:500; }

.qa-answer-head { display:flex; gap:14px; align-items:center; margin: 32px 0 18px; }
.qa-answer-head img { width:48px; height:48px; border-radius:50%; object-fit:cover; }
.qa-answer-head p { margin:0; line-height:1.4; font-size:.9rem; color: var(--color-text-muted); }
.qa-answer-head strong { display:block; color: var(--color-heading); font-size:1rem; }

.qa-short {
  border-left: 4px solid var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 18px 22px; margin: 0 0 36px;
}
.qa-short h2 { font-size: 1rem !important; margin: 0 0 6px !important; color: var(--color-accent) !important; }
.qa-short p { margin:0; font-size: 1.0625rem; line-height:1.65; color: var(--color-text); }

.qa-faq { margin-top: 44px; }
.qa-faq details { border-bottom: 1px solid var(--color-border); padding: 4px 0; }
.qa-faq details:first-of-type { border-top: 1px solid var(--color-border); }
.qa-faq summary {
  cursor:pointer; list-style:none; padding: 14px 32px 14px 0; position:relative;
  font-weight:600; color: var(--color-heading);
}
.qa-faq summary::-webkit-details-marker { display:none; }
.qa-faq summary::after {
  content:""; position:absolute; right:6px; top:50%; width:9px; height:9px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.qa-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.qa-faq details p { margin: 0 0 16px; color: var(--color-text-light); line-height:1.7; }

.qa-sources { margin-top: 36px; font-size:.875rem; color: var(--color-text-muted); }
.qa-sources ul { padding-left: 18px; margin: 6px 0 0; }

.qa-related { list-style:none; padding:0; margin: 24px 0 0; border-top: 1px solid var(--color-border); }
.qa-related li { border-bottom: 1px solid var(--color-border); }
.qa-related a { display:flex; flex-direction:column; gap:4px; padding: 16px 0; text-decoration:none; }
.qa-related-q { font-weight:600; color: var(--color-heading); }
.qa-related a:hover .qa-related-q { color: var(--color-accent); }

/* ---------------------------------------------------------------- Mobil */
@media (max-width: 960px) {
  .qa-board { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .qa-aside { position: static; }
}
@media (max-width: 640px) {
  .qa-thread { grid-template-columns: 24px minmax(0,1fr); gap: 12px; }
  .qa-status { width:24px; height:24px; }
  .qa-meta { grid-column: 2; flex-direction:row; flex-wrap:wrap; gap: 4px 12px; align-items:center; text-align:left; padding:0; }
  .qa-thread.is-pinned { margin: 0 -16px; padding-left: 13px; padding-right: 16px; }
  .qa-q { font-size: 1.0625rem; }
  .qa-chips { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
  .qa-chip { flex:none; }
}
@media (prefers-reduced-motion: reduce) {
  .qa-faq summary::after { transition:none; }
}

/* Dark Mode auch bei System-Einstellung (ohne manuellen Schalter) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .qa-topic { color: color-mix(in srgb, var(--topic) 45%, #fff); }
  :root:not([data-theme="light"]) .qa-chip[data-thema="alle"].is-active { background: var(--color-accent); border-color: var(--color-accent); }
  :root:not([data-theme="light"]) .qa-flag-pin { background: var(--color-accent); }
  :root:not([data-theme="light"]) .qa-ask { background: var(--color-surface); border: 1px solid var(--color-border); }
}