/* Cem: Ergänzungen für WordPress. Komponenten stehen in components.css (aus design-system/), hier nur Seitenaufbau und Zustände. */

/* Ohne JavaScript: Theme-Umschalter ausblenden, Absenden-Button der FilterBar zeigen. */
html:not(.js) .c-switch--theme { visibility: hidden; }
html.js .c-filter__submit { display: none; }

/* SiteHeader: Menü unter 760px */
@media (max-width: 759px) {
  .c-header.is-open .c-header__nav { display: flex !important; flex-direction: column; align-items: flex-start; grid-column: 1 / -1; grid-row: 2; border-left: 0; border-top: var(--size-rule) solid var(--rule); }
}

/* FilterBar als Formular */
form.c-filter { margin: 0; }
.c-filter__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.c-filter__view .c-switch button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.c-filter + .c-grid, .c-filter + .c-table { margin-top: var(--space-12); }

/* Leere Übersicht und Blättern */
.cem-empty { margin: var(--space-12) var(--space-4) 0; }
.cem-pager { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin: var(--space-12) var(--space-4) 0; padding: var(--space-3) 0; border-top: var(--size-rule) solid var(--rule); border-bottom: var(--size-rule) solid var(--rule); font: 500 16px/22px var(--font-sans); }

/* Beitrag: Fließtext auf size-text begrenzt */
.cem-article { padding: var(--space-12) var(--space-4) 0; }
.cem-post-head { max-width: var(--size-text); margin: 0 auto var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.cem-post-head h1 { margin: 0; }
.cem-post-head .c-meta { margin: 0; }
.cem-prose { max-width: var(--size-text); margin-inline: auto; }
.cem-prose > * { margin-block: 0 var(--space-6); }
.cem-prose > :where(h2) { margin-block-start: var(--space-12); margin-block-end: var(--space-4); }
.cem-prose > :where(h3) { margin-block-start: var(--space-8); margin-block-end: var(--space-3); }
.cem-prose :where(.wp-block-image) img { display: block; max-width: 100%; height: auto; border: var(--size-rule) solid var(--rule); }
.cem-prose figure { margin-inline: 0; }
.cem-prose :where(.wp-block-image, .wp-block-table) figcaption { margin-top: var(--space-2); font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.cem-prose blockquote { margin-inline: 0; padding-left: var(--space-4); border-left: var(--size-rule) solid var(--rule); }
.cem-prose hr { border: 0; border-top: var(--size-rule) solid var(--rule); }
.cem-prose :where(code, pre) { font-family: var(--font-mono); font-size: 14px; }
.cem-prose pre { padding: var(--space-4); border: var(--size-rule) solid var(--rule); overflow-x: auto; }

@media (max-width: 639px) {
  h1, .h1 { font-size: 30px; line-height: 34px; }
}

/* ArticleToc: über dem Text eingeklappt, ab 1100px rechts daneben und klebend */
.cem-toc { max-width: var(--size-text); margin: 0 auto var(--space-8); }
.cem-toc summary { list-style: none; cursor: pointer; }
.cem-toc summary::-webkit-details-marker { display: none; }
.cem-toc:not([open]) .c-toc__head { border-bottom: var(--size-rule) solid var(--rule); }
@media (min-width: 1100px) {
  .cem-article:has(.cem-toc) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--size-text)) minmax(0, 1fr); column-gap: var(--space-8); align-items: start; }
  .cem-article:has(.cem-toc) > * { grid-column: 2; }
  .cem-article:has(.cem-toc) > .cem-post-head { grid-row: 1; }
  .cem-article:has(.cem-toc) > .cem-prose { grid-row: 2; }
  .cem-article:has(.cem-toc) > .cem-toc { grid-column: 3; grid-row: 2; position: sticky; top: calc(56px + var(--space-6)); width: 100%; max-width: 300px; margin: 0; }
  .cem-toc summary { pointer-events: none; }
}
.cem-prose :where(h2, h3)[id] { scroll-margin-top: calc(56px + var(--space-6)); }

/* MediaGrid */
.cem-gallery { margin-inline: 0; }
.cem-caption { margin: var(--space-2) 0 0; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.c-gallery__item { color: inherit; font: inherit; }
html.cem-no-scroll { overflow: hidden; }

/* VideoEmbed */
.cem-video { margin-inline: 0; }
.c-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-video--poster .c-video__consent .c-tags { align-self: flex-start; background: var(--bg); }
.c-video--poster .c-video__consent p, .c-video--poster .c-video__actions label, .c-video--poster .c-video__actions .c-btn--text { background: var(--bg); padding: var(--space-1) var(--space-2); }
.c-video__cap { color: var(--ink); }
.c-video__title { font: 500 16px/22px var(--font-sans); }
.c-video iframe { background: var(--scrim); }

/* Widerruf auf der Datenschutzseite */
.cem-consent { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-4); border: var(--size-rule) solid var(--rule); }
.cem-consent p { margin: 0; }