/**
 * CSS for every core block style class registered in includes/styles.php
 * (docs/phase1-spec.md section 6), plus .wp-block-uagb-faq (Spectra Legacy
 * FAQ, not ours to register a style on, styled directly per mockup A 08).
 *
 * Every selector is scoped to .is-style-mkb-<name> (the class WordPress adds
 * for a registered block style) or, for the FAQ block, to the plugin's own
 * .wp-block-uagb-faq / .mkb-scheme-9er wrapper classes named explicitly in
 * docs/phase1-spec.md section 5 ("content.css gestaltet .wp-block-uagb-faq
 * in beiden Schemata") - the one place this file reaches outside .mkb-/
 * .is-style-mkb- on purpose, because FAQ has no block of its own to carry
 * such a class (see docs/phase1-spec.md section 5, "FAQ ist bewusst kein
 * eigener Block"). Everything reads --mkb-* variables from tokens.css, no
 * literal color outside a var(), so every style works in both schemes
 * automatically; a handful of spacing/font-size values that mockup A uses
 * but tokens.json does not define (e.g. the 15px comparison table text)
 * stay as literal px, same as assets/css/blocks.css does for its button
 * padding.
 */

/* ------------------------------------------------------------------------ */
/* core/group: mkb-tipp, mkb-hinweis, mkb-warnung                           */
/* Shared shape: an icon/avatar pinned top left with ::before, the group's  */
/* own InnerBlocks (label paragraph first, then text) stacking to its       */
/* right in normal block flow, made room for with padding-left - see        */
/* docs/phase1-spec.md section 6, "der Stil erwartet als ersten Absatz das  */
/* Label". Plain padding/position instead of CSS Grid: a grid row shared by */
/* the icon and the label would size itself to the icon's height (56px for  */
/* the avatar), pushing the text down inside that row instead of tight      */
/* under the label.                                                        */
/* ------------------------------------------------------------------------ */

.is-style-mkb-tipp,
.is-style-mkb-hinweis,
.is-style-mkb-warnung {
  position: relative;
  border-radius: var(--mkb-radius-card);
}

.is-style-mkb-tipp > *,
.is-style-mkb-hinweis > *,
.is-style-mkb-warnung > * {
  /* Resets a theme's default block spacing (margin-block-start from
     --wp--style--block-gap): this styles' own rhythm is set explicitly
     below instead (label margin-bottom only). */
  margin: 0;
}

.is-style-mkb-tipp > *:first-child,
.is-style-mkb-hinweis > *:first-child,
.is-style-mkb-warnung > *:first-child {
  font: var(--mkb-font-heading-weight) 12px/1 var(--mkb-font-heading);
  letter-spacing: var(--mkb-eyebrow-tracking);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.is-style-mkb-tipp {
  /* assets/img/avatar-tobi.svg, referenced relative to this file, same
     pattern as tokens.css's own @font-face url()s. */
  --mkb-avatar-url: url('../img/avatar-tobi.svg');
  background: var(--mkb-color-sand);
  color: var(--mkb-color-sand-text);
}

/* Astra's ".entry-content > .wp-block-group { padding: 3em }" (0,2,0) is a
   direct child rule and beats a plain ".is-style-mkb-tipp" (0,1,0) as soon
   as the group sits directly in the content, overriding this padding and
   pushing the avatar (absolutely positioned at 24/24) over the label text.
   Doubling the class plus ".wp-block-group" raises specificity to 0,3,0
   without an !important. */
.is-style-mkb-tipp.is-style-mkb-tipp.wp-block-group {
  padding: var(--mkb-space-24) var(--mkb-space-24) var(--mkb-space-24) 100px;
}

.is-style-mkb-tipp::before {
  content: '';
  position: absolute;
  top: var(--mkb-space-24);
  left: var(--mkb-space-24);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mkb-avatar-url) center / cover no-repeat;
}

.is-style-mkb-tipp > *:first-child {
  color: var(--mkb-color-accent);
}

/* Same Astra child-padding override as .is-style-mkb-tipp above, same fix. */
.is-style-mkb-hinweis.is-style-mkb-hinweis.wp-block-group,
.is-style-mkb-warnung.is-style-mkb-warnung.wp-block-group {
  padding: 20px 24px 20px 60px;
}

.is-style-mkb-hinweis::before,
.is-style-mkb-warnung::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 24px;
  width: 22px;
  height: 22px;
  -webkit-mask: var(--mkb-icon-url) center / contain no-repeat;
  mask: var(--mkb-icon-url) center / contain no-repeat;
  background-color: currentColor;
}

.is-style-mkb-hinweis {
  /* Info circle, mockup A 12. Only the alpha channel matters (mask), the
     stroke color in the data URI itself is irrelevant. */
  --mkb-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
  background: var(--mkb-color-surface);
  color: var(--mkb-color-heading);
}

.is-style-mkb-warnung {
  /* Warning triangle, mockup A 12. */
  --mkb-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18h.01'/%3E%3C/svg%3E");
  background: var(--mkb-color-background);
  color: var(--mkb-color-heading);
  border: var(--mkb-border-warning);
}

.is-style-mkb-warnung::before {
  color: var(--mkb-color-accent);
}

.is-style-mkb-warnung > *:first-child {
  color: var(--mkb-color-accent);
}

/* ------------------------------------------------------------------------ */
/* core/group: mkb-cta - dark band, text left, button right, stacks mobile  */
/* ------------------------------------------------------------------------ */

.is-style-mkb-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  background: var(--mkb-color-dark);
  color: var(--mkb-color-dark-text);
  border-radius: var(--mkb-radius-card);
}

/* Astra's ".entry-content > .wp-block-group { padding: 3em }" (0,2,0) beats
   a plain ".is-style-mkb-cta" (0,1,0), same override as .is-style-mkb-tipp
   above; doubling the class plus ".wp-block-group" raises specificity. */
.is-style-mkb-cta.is-style-mkb-cta.wp-block-group {
  padding: var(--mkb-space-24);
}

.is-style-mkb-cta > * {
  margin: 0;
}

/* Mockup A 12: title/text stacked left, button fixed right. A fixed size
   figure (the podcast cover) must not grow past its own width, the text
   content next to it needs a flexible basis so it does not fall onto its
   own row for lack of one, and the buttons column always stays a fixed
   right hand side, never stretching to fill the row. Title and text are
   expected as one inner core/group (see patterns/inline/cta-box.html and
   the startseite pattern's podcast card), same shape either with or
   without a leading cover image. */
.is-style-mkb-cta > .wp-block-image,
.is-style-mkb-cta > .wp-block-buttons {
  flex: 0 0 auto;
}

.is-style-mkb-cta > .wp-block-group {
  flex: 1 1 200px;
  min-width: 0;
}

/* Headings carry their own color from the theme's global styles (unlike
   paragraphs, which do inherit it): without this, a heading nested inside
   the CTA box's own group stays heading-dark-on-dark and disappears. */
.is-style-mkb-cta h1,
.is-style-mkb-cta h2,
.is-style-mkb-cta h3,
.is-style-mkb-cta h4,
.is-style-mkb-cta h5,
.is-style-mkb-cta h6 {
  color: inherit;
}

/* Card sized heading (mockup D "Podcast"/"Newsletter": 28px), not the
   theme's fixed H2 size - same value as the cta-band card context in
   src/blocks/cta-band/style.css. */
.is-style-mkb-cta h1,
.is-style-mkb-cta h2 {
  font-size: 28px;
  line-height: 1.2;
}

@media (max-width: 600px) {
  .is-style-mkb-cta {
    align-items: flex-start;
  }
}

/* Equal height tiles: mockup D's "Podcast"/"Newsletter" pair (two of
   these card styles side by side in a core/columns row,
   content/page/startseite-neu/content.html) must always match height
   regardless of content - WordPress core already stretches every column
   in a row to match its tallest sibling ("wp-includes/blocks/columns/
   style.css": ".wp-block-columns { align-items: normal !important }",
   "normal" resolves to "stretch" for a flex item with an auto cross
   size), so a direct child of a column only needs to actually fill that
   already-stretched box instead of hugging its own content height.
   ":where(.wp-block-column > *)" (zero specificity, same trick as
   src/blocks/cta-band/style.css's own column card rule) scopes this to
   "placed directly in a column" only, so a full width .is-style-mkb-cta
   band used elsewhere on a page keeps sizing to its own content.
   box-sizing: border-box so the padding each style already sets does not
   push the box past that 100% height. Content stays at the top of
   whatever extra space this adds (plain block flow for tipp/hinweis/
   warnung, no vertical centering) except .is-style-mkb-cta, which
   already centers its own flex row ("align-items: center" above) and
   keeps doing so within the taller box - see mkb/cta-band's own parallel
   rule in src/blocks/cta-band/style.css for ".mkb-cta-band" itself,
   which stays top aligned because its outer wrapper is a plain block
   box, not a flex container. */
.is-style-mkb-cta:where(.wp-block-column > *),
.is-style-mkb-tipp:where(.wp-block-column > *),
.is-style-mkb-hinweis:where(.wp-block-column > *),
.is-style-mkb-warnung:where(.wp-block-column > *) {
  height: 100%;
  box-sizing: border-box;
}

/* ------------------------------------------------------------------------ */
/* core/table: mkb-vergleich - dark header, zebra, strong cells in accent   */
/* ------------------------------------------------------------------------ */

.is-style-mkb-vergleich {
  /* is-style- lands on the block's <figure> wrapper, not the <table>
     itself: scrolling here (rather than shrinking the table) keeps every
     column legible on narrow screens instead of squeezing text. */
  overflow-x: auto;
}

.is-style-mkb-vergleich table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
  /* core's own ".wp-block-table td, .wp-block-table th { border: 1px
     solid }" plus Astra's "table, td, th { border: 1px solid ... }" both
     draw the full cell grid the mockup does not have (row lines only, see
     tbody tr below); reset it here at table level too. */
  border: 0;
}

.is-style-mkb-vergleich thead tr {
  background: var(--mkb-color-dark);
  color: var(--mkb-color-dark-text);
}

/* core's "table td/th { border:1px solid; padding:.5em }" (0,1,1) loads
   after this file and wins at equal specificity; Astra's own "td, th"
   element rule adds a border too. The extra "table" in the selector and
   extra "table" element in the selector raises specificity to 0,1,2, high
   enough to beat both without !important, and border is reset explicitly
   since core's own border rule no longer applies at all. */
.is-style-mkb-vergleich table th,
.is-style-mkb-vergleich table td {
  padding: 12px 14px;
  text-align: left;
  border: 0;
}

.is-style-mkb-vergleich th {
  font: var(--mkb-font-heading-weight) 15px/1 var(--mkb-font-heading);
}

.is-style-mkb-vergleich tbody tr {
  border-bottom: 1px solid var(--mkb-color-line);
}

.is-style-mkb-vergleich tbody tr:nth-child(even) {
  background: var(--mkb-color-surface);
}

.is-style-mkb-vergleich tbody td:first-child {
  /* --mkb-font-body-strong: this weight (600) is the plugin's own self
     hosted cut, not one Astra already loads live, so it needs the
     privately named face - see tools/design/build-tokens.mjs's
     mkbFontFaceFamily(). */
  font-family: var(--mkb-font-body-strong);
  font-weight: var(--mkb-font-body-weight-strong);
}

.is-style-mkb-vergleich tbody td strong {
  color: var(--mkb-color-accent);
  font-family: var(--mkb-font-body-strong);
  font-weight: var(--mkb-font-body-weight-strong);
}

/* ------------------------------------------------------------------------ */
/* core/image: mkb-rahmen - radius from token, dimmed 14px caption          */
/* ------------------------------------------------------------------------ */

.is-style-mkb-rahmen img {
  display: block;
  border-radius: var(--mkb-radius-image);
}

.is-style-mkb-rahmen figcaption {
  font-size: var(--mkb-size-small);
  line-height: var(--mkb-lh-small);
  color: var(--mkb-color-text-subtle);
  margin-top: var(--mkb-space-8);
}

/* ------------------------------------------------------------------------ */
/* core/list: mkb-haken - accent check instead of a bullet                  */
/* ------------------------------------------------------------------------ */

/* ".wp-block-list" doubles the specificity to 0,2,0, needed to beat
   Astra's ".entry-content ul { padding-left: 20px; margin: revert }"
   (0,1,1 declared with a later cascade position), which otherwise
   indents every haken list 20px from the text above/below it. */
.is-style-mkb-haken.wp-block-list {
  list-style: none;
  margin: var(--mkb-space-16) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.is-style-mkb-haken > li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.is-style-mkb-haken > li::before {
  content: '\2713';
  flex: none;
  color: var(--mkb-color-accent);
  font-family: var(--mkb-font-body-strong);
  font-weight: var(--mkb-font-body-weight-strong);
}

/* ------------------------------------------------------------------------ */
/* core/button: mkb-primaer, mkb-leise                                      */
/* Mirrors .mkb-btn/-primary/-outline in assets/css/blocks.css, but targets */
/* core/button's own markup (.wp-block-button__link) instead of a mkb/*     */
/* block's plain anchor - see plugin/mkbaukasten/src/README.md.            */
/* ------------------------------------------------------------------------ */

.is-style-mkb-primaer .wp-block-button__link,
.is-style-mkb-leise .wp-block-button__link {
  font: var(--mkb-button-weight) var(--mkb-size-button) / var(--mkb-lh-button) var(--mkb-font-heading);
  border-radius: var(--mkb-radius-button);
  padding: 15px 26px;
  text-decoration: none;
}

.mkb-scheme-9er .is-style-mkb-primaer .wp-block-button__link,
.mkb-scheme-9er .is-style-mkb-leise .wp-block-button__link {
  font: var(--mkb-button-9er-weight) var(--mkb-size-button-9er) / var(--mkb-lh-button-9er) var(--mkb-font-heading);
  padding: 14px 26px;
}

.is-style-mkb-primaer .wp-block-button__link {
  background: var(--mkb-color-primary);
  color: var(--mkb-color-button-primary-text);
  border: 0;
}

.is-style-mkb-primaer .wp-block-button__link:hover,
.is-style-mkb-primaer .wp-block-button__link:focus-visible {
  background: var(--mkb-color-primary-hover);
  color: var(--mkb-color-button-primary-text);
}

.is-style-mkb-leise .wp-block-button__link {
  background: transparent;
  color: var(--mkb-color-heading);
  border: var(--mkb-border-outline-button);
  padding: 13px 24px;
}

.mkb-scheme-9er .is-style-mkb-leise .wp-block-button__link {
  padding: 12px 24px;
}

.is-style-mkb-leise .wp-block-button__link:hover,
.is-style-mkb-leise .wp-block-button__link:focus-visible {
  background: var(--mkb-color-heading);
  color: var(--mkb-color-background);
}

/* The dark outline (--mkb-color-heading, near black) is invisible on a
   dark background (mockup D hero "Das E-Book" and "Podcast" both put
   this style on dark grounds): flip border and text to the light
   dark-text color wherever a leise button sits on one of the plugin's
   dark backgrounds, same set of contexts as .mkb-eyebrow's dark override
   above resp. in assets/css/blocks.css. */
.mkb-hero--full .is-style-mkb-leise .wp-block-button__link,
.mkb-cta-band--dark .is-style-mkb-leise .wp-block-button__link,
.mkb-section--bg-dark .is-style-mkb-leise .wp-block-button__link,
.mkb-section--bg-image .is-style-mkb-leise .wp-block-button__link,
.is-style-mkb-cta .is-style-mkb-leise .wp-block-button__link {
  color: var(--mkb-color-dark-text);
  border-color: var(--mkb-color-dark-text);
}

.mkb-hero--full .is-style-mkb-leise .wp-block-button__link:hover,
.mkb-hero--full .is-style-mkb-leise .wp-block-button__link:focus-visible,
.mkb-cta-band--dark .is-style-mkb-leise .wp-block-button__link:hover,
.mkb-cta-band--dark .is-style-mkb-leise .wp-block-button__link:focus-visible,
.mkb-section--bg-dark .is-style-mkb-leise .wp-block-button__link:hover,
.mkb-section--bg-dark .is-style-mkb-leise .wp-block-button__link:focus-visible,
.mkb-section--bg-image .is-style-mkb-leise .wp-block-button__link:hover,
.mkb-section--bg-image .is-style-mkb-leise .wp-block-button__link:focus-visible,
.is-style-mkb-cta .is-style-mkb-leise .wp-block-button__link:hover,
.is-style-mkb-cta .is-style-mkb-leise .wp-block-button__link:focus-visible {
  background: var(--mkb-color-dark-text);
  color: var(--mkb-color-dark);
}

/* ------------------------------------------------------------------------ */
/* core/paragraph: mkb-eyebrow, mkb-lead                                    */
/* ------------------------------------------------------------------------ */

.is-style-mkb-eyebrow {
  display: block;
  font: var(--mkb-eyebrow-weight) var(--mkb-size-eyebrow) / var(--mkb-lh-eyebrow) var(--mkb-font-heading);
  letter-spacing: var(--mkb-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--mkb-color-accent);
}

/* Astra's ".entry-content p { margin-bottom: 1.6em }" (0,2,0) beats a
   plain ".is-style-mkb-eyebrow" (0,1,0), same fix as assets/css/blocks.css's
   .mkb-eyebrow.mkb-eyebrow. */
.is-style-mkb-eyebrow.is-style-mkb-eyebrow {
  margin: 0 0 var(--mkb-space-12) 0;
}

/* Same dark background exception as assets/css/blocks.css's .mkb-eyebrow
   (the frame class mkb/hero etc. use internally): the default accent barely
   reads on a dark section, mockup D/C use the lighter primary/copper-light
   tone there instead. */
.mkb-section--bg-dark .is-style-mkb-eyebrow,
.mkb-section--bg-image .is-style-mkb-eyebrow,
.mkb-cta-band--dark .is-style-mkb-eyebrow,
.is-style-mkb-cta .is-style-mkb-eyebrow {
  color: var(--mkb-color-primary-light, var(--mkb-color-primary));
}

.is-style-mkb-lead {
  font-size: var(--mkb-size-lead);
  line-height: var(--mkb-lh-lead);
  color: var(--mkb-color-text);
}

/* Small text link next to the "Neueste Beitraege" heading (mockup D),
   e.g. "<p class="mkb-karten-link"><a>Alle Beitraege -></a></p>" grouped
   with the heading in a flex row, see patterns/seiten/startseite.html. */
/* ".mkb-karten-link.mkb-karten-link" (0,2,0): beats Astra's
   ".entry-content p { margin-bottom: 1.6em }" (0,2,0, tie broken by the
   plugin's stylesheets loading after Astra's, see includes/assets.php). */
.mkb-karten-link.mkb-karten-link {
  margin: 0;
}

.mkb-karten-link a {
  font: var(--mkb-font-heading-weight) 16px / 1 var(--mkb-font-heading);
  color: var(--mkb-color-accent);
  text-decoration: none;
}

/* ------------------------------------------------------------------------ */
/* core/paragraph: mkb-themenzeile                                          */
/* Quiet inline link line ("Beliebte Themen: <a>...</a> · <a>...</a> ..."), */
/* used once directly under the homepage's three product cards              */
/* (content/page/bier-brauen-lernen-startseite/content.html) to carry the   */
/* internal links the old homepage had without adding a whole new section.  */
/* Small and muted so it reads as a footnote under the cards, not           */
/* competing with them; the links themselves stay in the accent color so    */
/* they are still visibly clickable. No wrap rule needed: the dot separated */
/* list already has ordinary spaces around "·", so it wraps at those word   */
/* boundaries on narrow screens like any other paragraph text.              */
/* ------------------------------------------------------------------------ */

.mkb-themenzeile {
  font-size: var(--mkb-size-small);
  line-height: var(--mkb-lh-small);
  color: var(--mkb-color-text-subtle);
}

.mkb-themenzeile a {
  color: var(--mkb-color-accent);
  text-decoration: underline;
}

/* ------------------------------------------------------------------------ */
/* core/latest-posts: mkb-karten                                            */
/* Card with a 16:9 image, small muted category and date, Barlow 22 title.  */
/* core/latest-posts has no category output of its own; the ".mkb-karten__  */
/* category" span is injected into the date's own markup by                */
/* includes/styles.php's add_category_to_karten() (a render_block filter).  */
/* ------------------------------------------------------------------------ */

/* ".wp-block-latest-posts" doubles the specificity to 0,2,0, needed to
   beat Astra's ".entry-content ul { padding-left: 20px }" (0,1,1), the
   same fix as .is-style-mkb-haken above. */
.is-style-mkb-karten.wp-block-latest-posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--mkb-space-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Astra's ".wp-block-latest-posts:not(.is-grid) > li { margin: 12px 0 }"
   (0,1,1 with a :not() pseudo-class) offsets every card but the first,
   staggering the row; ".is-style-mkb-karten.wp-block-latest-posts > li"
   (0,2,1) beats it. */
.is-style-mkb-karten.wp-block-latest-posts > li {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--mkb-color-background);
  border-radius: var(--mkb-radius-card);
  box-shadow: var(--mkb-shadow-card);
  overflow: hidden;
}

.is-style-mkb-karten > li > * {
  margin-inline: var(--mkb-space-card-padding-small);
}

.is-style-mkb-karten .wp-block-latest-posts__featured-image {
  order: -1;
  margin: 0;
  aspect-ratio: 16 / 9;
}

.is-style-mkb-karten .wp-block-latest-posts__featured-image a,
.is-style-mkb-karten .wp-block-latest-posts__featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.is-style-mkb-karten .wp-block-latest-posts__post-date {
  order: 0;
  display: block;
  font-size: var(--mkb-size-small);
  color: var(--mkb-color-text-subtle);
  margin-top: var(--mkb-space-24);
}

/* Category label prepended into the date's own markup by
   includes/styles.php's add_category_to_karten() (core/latest-posts has
   no category output of its own), "Kategorie · Datum" per Mockup D. */
.is-style-mkb-karten .mkb-karten__category {
  color: var(--mkb-color-accent);
  font-family: var(--mkb-font-body-strong);
  font-weight: var(--mkb-font-body-weight-strong);
}

.is-style-mkb-karten .wp-block-latest-posts__post-title {
  order: 1;
  display: block;
  font: var(--mkb-font-heading-weight) var(--mkb-size-h3-card) / var(--mkb-lh-h3-card) var(--mkb-font-heading);
  color: var(--mkb-color-heading);
  text-decoration: none;
  margin-top: var(--mkb-space-8);
}

.is-style-mkb-karten .wp-block-latest-posts__post-excerpt {
  order: 2;
  font-size: var(--mkb-size-small);
  line-height: var(--mkb-lh-body);
  color: var(--mkb-color-text-muted);
  margin-top: var(--mkb-space-8);
  margin-bottom: var(--mkb-space-24);
}

/* ------------------------------------------------------------------------ */
/* .mkb-faq.wp-block-uagb-faq (Spectra Legacy) - Malzknecht lines, 9er cards */
/* Interactivity (first item open, +/- icon swap) is Spectra's own JS/CSS;  */
/* this only sets the visual chrome per mockup A 08.                        */
/*                                                                          */
/* Scoped to ".mkb-faq" (added by the plugin's own FAQ patterns, see        */
/* patterns/sektionen/faq-malzknecht.html etc.), not to the bare            */
/* ".wp-block-uagb-faq" Spectra already puts on every uagb/faq block:       */
/* without that extra class this chrome - including six !important         */
/* declarations - would restyle every pre-existing FAQ on the site the      */
/* moment the plugin is active, not just the ones the plugin's own          */
/* patterns create (docs/phase1-spec.md section 2, "Bestandsinhalte         */
/* unveraendert"). tools/design/check-css-scope.mjs enforces the prefix.    */
/* ------------------------------------------------------------------------ */

.mkb-faq.wp-block-uagb-faq {
  border-top: 1px solid var(--mkb-color-line);
}

.mkb-faq.wp-block-uagb-faq .uagb-faq-child__outer-wrap {
  /* !important: Spectra emits a per-block-id <style> block with its own
     default border/radius/margin (frontend.css.php), at a specificity
     (a single .uagb-block-<id> class) this rule cannot otherwise beat. */
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--mkb-color-line) !important;
  padding: 20px 0 !important;
}

.mkb-faq.wp-block-uagb-faq .uagb-faq-questions-button {
  /* !important: Spectra's per-block-id <style> also sets its own padding
     on the button and the answer below, at a specificity this rule
     cannot otherwise beat either. */
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  padding: 0 !important;
}

/* Spectra always renders the icon markup before the question text
   (layout "icon-row"); the mockup wants the question flush left and the
   sign flush right, so re-order with flex instead of fighting the DOM. */
.mkb-faq.wp-block-uagb-faq .uagb-question {
  order: -1;
  flex: 1 1 auto;
  font: var(--mkb-font-heading-weight) var(--mkb-size-h4) / var(--mkb-lh-h4) var(--mkb-font-heading);
  color: var(--mkb-color-heading);
}

.mkb-faq.wp-block-uagb-faq .uagb-faq-icon-wrap {
  margin-left: auto;
}

.mkb-faq.wp-block-uagb-faq .uagb-faq-icon-wrap svg {
  width: 16px;
  height: 16px;
  fill: var(--mkb-color-accent);
}

.mkb-faq.wp-block-uagb-faq .uagb-faq-content {
  font-size: var(--mkb-size-body);
  line-height: var(--mkb-lh-body);
  max-width: var(--mkb-measure);
  margin-top: 12px;
  color: var(--mkb-color-text);
  padding: 0 !important;
}

.mkb-scheme-9er .mkb-faq.wp-block-uagb-faq {
  border-top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mkb-space-12);
}

.mkb-scheme-9er .mkb-faq.wp-block-uagb-faq .uagb-faq-child__outer-wrap {
  /* !important to win against the base rule above, itself !important for
     the reason noted there. Closed cards white, matching mockup A 08/C;
     the active (open) card gets the surface tint below. */
  background: #fff !important;
  border: var(--mkb-border-card) !important;
  border-radius: var(--mkb-radius-card) !important;
  border-bottom: var(--mkb-border-card) !important;
  padding: 20px 24px !important;
}

/* No separate open/closed tint here (unlike mockup A 08's #f3efe8 on
   #faf8f5): the one 9er FAQ pattern (patterns/sektionen/faq-9er.html)
   sits on a "sand" section, and for the 9er scheme --mkb-color-surface
   and --mkb-color-sand are the same value (#f3efe8, see tokens.css), so
   an open-card surface tint would be invisible against that background -
   every card stays white, matching mockup C's 9er hub FAQ instead. */

/* -------------------------------------------------------------------- */
/* core/gallery: mkb-logos                                              */
/* A quiet "Bekannt durch" logo row (docs/phase1-spec.md section 10, and */
/* Tobias' review of the first draft): the logo files are delivered      */
/* already muted (grayscale, low contrast), so this style renders them   */
/* as they are - no filter, no hover/focus color reveal, nothing reacts, */
/* nothing crops (imageCrop:false on the block already, this style never */
/* overrides that with e.g. object-fit).                                 */
/* Sized by GRID CELL, not by a fixed height: each figure gets an equal  */
/* share of the row's width (5 across desktop, 3 across at the standard  */
/* WordPress tablet breakpoint of 782px - docs/phase1-spec.md section 4  */
/* "Umbrueche bei 782 px" - and 2 across at 480px), the image inside is  */
/* width 100% / height auto so it keeps its natural ratio. All five      */
/* source PNGs share the same 500x281 canvas, so sizing by width alone   */
/* already lands every logo at the same height too, exactly like the OLD */
/* homepage's plain wp:gallery (columns:5, sizeSlug "full", no height    */
/* rule at all - see Tobias' measurement in the task notes). This only   */
/* reads as intended once the section around it is width "full" (see     */
/* assets/css/blocks.css's ".mkb-frame:has(> .mkb-inner--full)"), giving */
/* the row room to spread into; a fixed height row (the previous version */
/* of this rule) stayed small even at full width because height, not     */
/* available row width, was what capped every logo's size.               */
/* -------------------------------------------------------------------- */

.is-style-mkb-logos.wp-block-gallery.has-nested-images {
  align-items: center;
  justify-content: space-between;
}

/* Core's own ".wp-block-gallery.has-nested-images figure.wp-block-image
   { flex-grow: 1 }" (specificity 0,3,1) loads after this file regardless
   of enqueue order, so a plain 0,3,0 selector here never won: every logo
   kept stretching to its own natural width instead of sharing one grid
   cell size. ":not(#individual-image)" never excludes a real figure (no
   logo carries that id) but its negated ID selector counts as one ID's
   worth of specificity, raising this rule to 1,3,1 - enough to beat
   core's without an !important.
   width is an equal fifth of the row minus its share of the gaps
   (standard N-column flex formula: 100/N% - gap * (N-1)/N, same shape
   the 782px/480px steps below already used before this rewrite); with
   flex-grow:0 that width is also the rendered size, so - together with
   justify-content: space-between above - an incomplete last row (5 // 3
   leaves 2, 5 // 2 leaves 1) spaces its remaining items apart instead of
   stretching any single one of them to fill the row. */
.is-style-mkb-logos.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  flex-grow: 0;
  width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8);
  max-width: none;
}

/* Same specificity problem one level down: core's own "... figure.wp-block-image
   img { height: auto; width: auto; max-width: 100% !important }" is
   0,3,2; the same ":not()" trick raises this rule to 1,3,2, high enough
   to beat it. width:100% (of the figure sized above) / height:auto keeps
   each image's own natural aspect ratio, the same "size by width, let
   height follow" approach the old homepage's gallery relied on. */
.is-style-mkb-logos.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
  display: block;
  width: 100%;
  height: auto;
}

/* Tablet: 3 across, wraps 3 + 2 (5 // 3 leaves 2, never a lone item
   stretching the whole last row). 782px, not an arbitrary round number:
   the same WordPress tablet breakpoint every other mkb/* block in this
   codebase switches at (see e.g. src/blocks/hero/style.css,
   src/blocks/testimonials/style.css). */
@media (max-width: 782px) {
  .is-style-mkb-logos.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
    width: calc(33.3333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6667);
  }
}

/* Mobile: 2 across. 5 // 2 leaves a lone final item; the flex-grow:0
   above (rather than a 3rd width step) keeps it the same size as its
   siblings instead of stretching to fill the row - "even sizes, no
   oversized last logo". This block loads after the 782px one above, so
   for a viewport at or below 480px (matching both queries) these rules
   win the cascade at equal specificity. */
@media (max-width: 480px) {
  .is-style-mkb-logos.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
    width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5);
  }
}

/* -------------------------------------------------------------------- */
/* core/html: mkb-seal                                                  */
/* ShopVote review widget in the E-Book lead magnet hero's text column   */
/* (content/page/startseite-neu/content.html), placed as a plain         */
/* wp:html block right after a wp:paragraph carrying .mkb-hero__note -   */
/* the hero's own "note" attribute always renders after ALL InnerBlocks  */
/* content (src/blocks/hero/render.php), so the note text is authored    */
/* here as ordinary content instead of via that attribute, letting the   */
/* seal follow it in normal document order. The image itself             */
/* (widgets.shopvote.de's bn=48 badge) is ShopVote's, not ours: its      */
/* stars, score and review count come live from ShopVote, nothing here   */
/* is hand written (see docs/brand-voice.md's "keine Platzhalter").      */
/* The bn=48 PNG has a transparent background, so a white rounded box    */
/* keeps its black text legible on this hero's dark fill; the image is   */
/* scaled down from its native 360x115 so it reads as a small trust seal */
/* next to the CTA, not a full width banner.                             */
/* -------------------------------------------------------------------- */

.mkb-seal {
  display: inline-block;
  margin-top: var(--mkb-space-16);
  padding: 8px 12px;
  background: #fff;
  border-radius: var(--mkb-radius-card);
}

.mkb-seal img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
}

@media (max-width: 480px) {
  .mkb-seal {
    /* inline-block boxes ignore auto margins; "table" is a block level
       box that still shrinks to its content width, so margin-inline:
       auto actually centers it under the button on narrow screens. */
    display: table;
    margin-inline: auto;
  }

  .mkb-seal img {
    max-width: 220px;
  }
}