/* Content blocks the theme has no styles for: the short answer under the hero and the FAQ. Theme tokens only,
   so the dark theme follows automatically. Header fixes for the old theme website_1.6 are in legacy-header.css. */

/* "Kurz gesagt": three sentences that answer the page's question before the long version. */
section.tldr-section { padding: clamp(40px, 5vw, 64px) 0 0; }
.tldr {
  border-left: 2px solid var(--indigo);
  background: var(--indigo-wash);
  padding: 28px 32px 30px;
  max-width: 880px;
}
.tldr h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--indigo-deep);
  margin-bottom: 14px;
}
.tldr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tldr li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}
.tldr li::before { content: "→"; font-family: var(--serif); color: var(--indigo); }

/* FAQ as native disclosure: readable without script, the same text feeds the FAQPage schema. */
.faq-list { border-top: 1px solid var(--rule); max-width: 880px; margin-top: 40px; }
details.faq { border-bottom: 1px solid var(--rule); }
details.faq summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 28px;
  gap: 16px;
  align-items: baseline;
  padding: 22px 0;
  font-family: var(--serif);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  font-size: 26px;
  font-weight: 300;
  color: var(--indigo);
  text-align: right;
  transition: transform 0.2s ease;
}
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq summary:hover { color: var(--indigo-deep); }
details.faq summary:focus-visible { outline: 2px solid var(--indigo); outline-offset: 4px; }
details.faq p { padding: 0 44px 26px 0; font-size: 17px; line-height: 1.6; max-width: 68ch; }

@media (max-width: 720px) {
  .tldr { padding: 22px 20px 24px; }
  .tldr li { font-size: 16px; }
  details.faq p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  details.faq summary::after { transition: none; }
}