/* ═══════════════════════════════════════════
   KOMPONENTEN – wiederverwendbare Bausteine
═══════════════════════════════════════════ */

/* KATEGORIE-BADGES (post-meta) */
.post-meta { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.post-cat { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 2rem; display: inline-flex; align-items: center; }
.cat-adhs   { background: var(--teal-light); color: var(--teal-dark); }
.cat-ass    { background: var(--sage-light); color: var(--sage-dark); }
.cat-audhs  { background: var(--terra-light); color: var(--terra-dark); }
.cat-eltern { background: var(--purple-light); color: var(--purple-dark); }
.cat-testberichte { background: var(--base-alt); color: var(--muted); }
.post-readtime { font-size: 0.75rem; color: var(--muted); margin-left: auto; }

/* ARTIKEL-PROSE (art-prose) – Artikel-Seiten */
.art-prose, .page-prose { max-width: var(--max-prose); margin: 0 auto; }
.art-eyebrow {
  display: inline-block; font-size: 0.8rem; font-weight: 600; text-transform: uppercase;
  color: var(--sage-dark); background: var(--sage-light); padding: 0.25rem 0.75rem;
  border-radius: 2rem; margin-bottom: 1rem;
}
.art-h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; color: var(--graphit); line-height: 1.2; margin-bottom: 1.25rem; }
.art-lead { font-size: 1.05rem; color: var(--muted); line-height: 1.65; margin-bottom: 1.75rem; }
.art-prose h2 { font-size: 1.3rem; font-weight: 600; color: var(--graphit); margin-top: 2.25rem; margin-bottom: 0.85rem; }
.art-prose h3 { font-size: 1.1rem; font-weight: 600; color: var(--graphit); margin-top: 1.5rem; margin-bottom: 0.5rem; }
.art-prose > p:not(.art-lead), .concept-card p { font-size: 1rem; color: var(--graphit); line-height: 1.7; margin-bottom: 1.25rem; }
.art-prose ul, .art-prose ol { padding-left: 1.2rem; color: var(--graphit); font-size: 1rem; line-height: 1.7; margin-bottom: 1.25rem; }
.art-prose li { margin-bottom: 0.5rem; }
.art-prose img { border-radius: var(--radius); margin-bottom: 2rem; border: 1px solid var(--border); }

/* GEMEINSAME PROSE-SELEKTOREN – Über uns, Ressourcen, rechtliche Seiten, Grundwissen-Artikel (reines Markdown) */
.page-prose h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; color: var(--graphit); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 1.5rem; }
.page-prose h2 { font-size: 1.25rem; font-weight: 600; color: var(--graphit); margin-top: 2.5rem; margin-bottom: 0.75rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border); }
.page-prose h3 { font-size: 1rem; font-weight: 600; color: var(--graphit); margin-top: 1.5rem; margin-bottom: 0.4rem; }
.page-lead { font-size: 1.05rem; color: var(--muted); line-height: 1.65; margin-bottom: 2rem; }
.page-prose p:not(.page-lead) { font-size: 0.95rem; color: var(--muted); line-height: 1.7; margin-bottom: 1rem; }
.page-prose ul, .page-prose ol { padding-left: 1.2rem; color: var(--muted); font-size: 0.95rem; line-height: 1.7; margin-bottom: 1rem; }
.page-prose li { margin-bottom: 0.4rem; }
.page-box, .page-box p { font-size: 0.95rem; }
.page-box { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.25rem; margin: 1.5rem 0; color: var(--muted); line-height: 1.7; }
.page-box strong { color: var(--graphit); }

/* TL;DR-BOX */
.tldr-box { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1.25rem; margin-bottom: 2.25rem; border-left: 4px solid; }
.tldr-box.tldr-teal   { background: var(--teal-light);   border-left-color: var(--teal); }
.tldr-box.tldr-sage   { background: var(--sage-light);   border-left-color: var(--sage); }
.tldr-box.tldr-terra  { background: var(--terra-light);  border-left-color: var(--terra); }
.tldr-box.tldr-purple { background: var(--purple-light); border-left-color: var(--purple-dark); }
.tldr-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; margin-bottom: 0.5rem; }
.tldr-teal .tldr-title, .tldr-teal .tldr-list li { color: var(--teal-dark); }
.tldr-teal .tldr-list li::before { color: var(--teal); }
.tldr-sage .tldr-title, .tldr-sage .tldr-list li { color: var(--sage-dark); }
.tldr-sage .tldr-list li::before { color: var(--sage-dark); }
.tldr-terra .tldr-title, .tldr-terra .tldr-list li { color: var(--terra-dark); }
.tldr-terra .tldr-list li::before { color: var(--terra); }
.tldr-purple .tldr-title, .tldr-purple .tldr-list li { color: var(--purple-dark); }
.tldr-purple .tldr-list li::before { color: var(--purple-dark); }
.tldr-list { list-style: none; }
.tldr-list li { font-size: 0.92rem; margin-bottom: 0.4rem; padding-left: 1.2rem; position: relative; }
.tldr-list li::before { content: '→'; position: absolute; left: 0; }

/* DISCLAIMER-BOX (medizinisch / affiliate) */
.disclaimer-box { background: var(--terra-light); border-left: 4px solid var(--terra); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1.25rem; margin-bottom: 2rem; }
.disclaimer-title { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; color: var(--terra-dark); margin-bottom: 0.4rem; }
.disclaimer-text { font-size: 0.85rem; color: var(--terra-dark); line-height: 1.55; }
.disclaimer-text a { color: var(--terra-dark); }

/* CONCEPT-CARD */
.concept-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin: 1.5rem 0; }
.concept-card p:last-child { margin-bottom: 0; }

/* VERGLEICHSTABELLEN (Markdown-Tabellen in Artikeln) */
.art-prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9rem; }
.art-prose th, .art-prose td { border: 1px solid var(--border); padding: 0.75rem 1rem; text-align: left; }
.art-prose th { background: var(--base-alt); font-weight: 600; color: var(--graphit); }
.art-prose td { background: var(--white); color: var(--graphit); }
@media (max-width: 900px) { .art-prose table { display: block; overflow-x: auto; } }

/* AKKORDEON (Startseite) */
.accordion { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 3rem; }
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-item:last-child { border-bottom: none; }
.accordion-trigger { width: 100%; background: var(--white); border: none; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--font); font-size: 0.95rem; font-weight: 500; color: var(--graphit); cursor: pointer; text-align: left; }
.accordion-trigger:hover { background: var(--base-alt); }
.accordion-trigger[aria-expanded="true"] { background: var(--sage-light); color: var(--sage-dark); }
.accordion-icon { font-size: 1.2rem; transition: transform var(--transition); flex-shrink: 0; color: var(--sage); }
.accordion-trigger[aria-expanded="true"] .accordion-icon { transform: rotate(45deg); }
.accordion-content { display: none; padding: 0 1.25rem 1.25rem; background: var(--base); font-size: 0.9rem; color: var(--muted); line-height: 1.6; }
.accordion-content.open { display: block; }

/* PRODUKT-STREIFEN (Startseite) */
.product-strip { margin-bottom: 3rem; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.product-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.product-card:hover { box-shadow: var(--shadow); }
.product-emoji { font-size: 2rem; line-height: 1; }
.product-name { font-size: 0.95rem; font-weight: 600; color: var(--graphit); }
.product-note { font-size: 0.8rem; color: var(--muted); line-height: 1.5; flex: 1; }
.product-cta { display: block; text-align: center; background: var(--terra-light); color: var(--terra-dark); border: 1px solid var(--terra); border-radius: var(--radius-sm); padding: 0.5rem; font-size: 0.85rem; font-weight: 500; text-decoration: none; }
.product-cta:hover { background: var(--terra); color: var(--white); }

/* ARTIKEL-KARTEN (post-grid, Startseite + Kategorie-Archiv) */
.post-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 3rem; }
.post-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all var(--transition); display: flex; flex-direction: column; }
.post-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.post-card-featured { grid-column: 1 / -1; }
.post-card-featured .post-card-body { padding: 1.5rem; }
.post-card-img { width: 100%; height: 180px; object-fit: cover; background: var(--sage-light); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; flex-shrink: 0; }
.post-card-featured .post-card-img { height: 240px; }
.post-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.post-card-title { font-size: 1rem; font-weight: 600; color: var(--graphit); line-height: 1.35; margin-bottom: 0.5rem; text-decoration: none; display: block; }
.post-card-featured .post-card-title { font-size: 1.25rem; }
.post-card-title:hover { color: var(--teal); }
.post-card-excerpt { font-size: 0.875rem; color: var(--muted); line-height: 1.55; flex: 1; }
.post-card-footer { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--base-alt); display: flex; align-items: center; justify-content: flex-end; }
.post-date { font-size: 0.75rem; color: var(--muted); }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } .post-card-featured { grid-column: auto; } .post-readtime { margin-left: 0; width: 100%; margin-top: 0.2rem; } }

/* NEWSLETTER-KARTE (Sidebar) */
.newsletter-card { background: linear-gradient(135deg, var(--sage-light), var(--teal-light)); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.newsletter-title { font-size: 1rem; font-weight: 600; color: var(--graphit); margin-bottom: 0.4rem; }
.newsletter-sub { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.75rem; line-height: 1.5; }
.newsletter-hint { font-size: 0.75rem; color: var(--sage-dark); font-weight: 500; }

/* KATEGORIE-PILLS (Sidebar) */
.cat-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cat-pill { font-size: 0.8rem; padding: 0.3rem 0.75rem; border-radius: 2rem; border: 1px solid var(--border); background: var(--base); color: var(--muted); text-decoration: none; cursor: pointer; transition: all var(--transition); }
.cat-pill:hover, .cat-pill.active { background: var(--sage-light); border-color: var(--sage); color: var(--sage-dark); font-weight: 500; }

/* HERZENS-BOX ("Ein Wort in eigener Sache") */
.heart-box { background: var(--terra-light); border: 1px solid var(--terra); border-radius: var(--radius); padding: 1.75rem 2rem; }
.heart-box-title { font-size: 1.2rem; font-weight: 600; color: var(--terra-dark); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.heart-box-text { font-size: 0.95rem; color: var(--graphit); line-height: 1.65; }
.heart-box-text p { margin-bottom: 1rem; }
.heart-box-text p:last-child { margin-bottom: 0; }

/* RESSOURCEN-SEITE */
.work-box { background: var(--sage-light); border: 1px solid var(--sage); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 2.5rem; }
.work-box-title { font-size: 1.05rem; font-weight: 600; color: var(--sage-dark); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.work-box-text { font-size: 0.9rem; color: var(--graphit); line-height: 1.6; }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.5rem; }
.res-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.25rem; }
.res-card-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.res-card-title { font-size: 1rem; font-weight: 600; color: var(--graphit); margin-bottom: 0.4rem; }
.res-card-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 800px) { .res-grid { grid-template-columns: 1fr; } }