/*
 * Font smoothing.
 * This is a niche setting that will not be available via Global Styles.
 * https://github.com/WordPress/gutenberg/issues/35934
 */

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  /* Smooth in-page anchor jumps (issue #16: the Ordnungen overview cards
   * scroll to their section with no JavaScript needed). */
  scroll-behavior: smooth;
}

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* Visually hides text while keeping it available to assistive technology
 * (the standard WordPress "screen-reader-text" convention). First needed
 * by the Sponsoren comparison table's tick/dash cells (issue #18, spec §6
 * Abb. 17), so a glyph is never the only thing conveying "included"/"not
 * included" to a screen reader. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link (issue #40): the first focusable element on every page
 * (parts/header.html), hidden via .screen-reader-text until it receives
 * keyboard focus, then shown above the sticky header (z-index 100). It
 * jumps to the `<main id="sck-main">` every template has. */
.sck-skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 20px;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border-radius: 6px;
  background-color: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--white);
  font-weight: 700;
  text-decoration: none;
  outline: 2px solid var(--wp--preset--color--white);
  outline-offset: -4px;
}

/* Keeps the skip link's target from landing under the sticky 74px header. */
#sck-main {
  scroll-margin-top: 74px;
}

/*
 * Link system (issue #133): one set of rest/hover/focus rules for every
 * plain text link (body copy, footer lists/contact/nav, mailto), so the
 * three footer columns and the rest of the site all animate the same way.
 * theme.json's `elements.link`/`:hover`/`:focus` supply the color swap on
 * light surfaces (blue -> navy, see ACCESSIBILITY.md); this block only
 * covers what that schema can't express: underline thickness/offset, the
 * shared transition (disabled below `prefers-reduced-motion`), and the
 * blue-pale swap navy surfaces need instead (blue/navy fail AA there).
 * `:focus` always mirrors `:hover` so keyboard and mouse users see the
 * same state change (WCAG 2.4.7). Necessary until theme.json can express
 * text-decoration-thickness/text-underline-offset natively:
 * https://github.com/WordPress/gutenberg/issues/27075
 */

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition:
    color 200ms,
    text-underline-offset 200ms;
}

a:hover,
a:focus {
  text-underline-offset: 0.25em;
}

a:active {
  text-decoration: none;
}

/* `blue-pale` only reaches AA (4.5:1) against navy surfaces (6.7:1) — on
 * white/ice it drops to ~2.3:1, so the hover/focus color swap above is
 * scoped to navy content instead of applying to every link site-wide. */
.has-navy-background-color a:hover,
.has-navy-background-color a:focus,
.has-navy-deep-background-color a:hover,
.has-navy-deep-background-color a:focus,
.sck-diagonal-surface a:hover,
.sck-diagonal-surface a:focus {
  color: var(--wp--preset--color--blue-pale);
}

.wp-block-overflow-hidden {
  overflow: hidden;
}

/*
 * Search and File Block button styles.
 * Necessary until the following issues are resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/36444
 * https://github.com/WordPress/gutenberg/issues/27760
 */

.wp-block-search__button,
.wp-block-file .wp-block-file__button {
  background-color: var(--wp--preset--color--gray-900);
  border-radius: 0;
  border: none;
  color: var(--wp--preset--color--dark);
  font-size: var(--wp--preset--font-size--medium);
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
}

/*
  * Button hover styles.
  * Necessary until the following issue is resolved in Gutenberg:
  * https://github.com/WordPress/gutenberg/issues/27075
  */

.wp-block-search__button:hover,
.wp-block-file .wp-block-file__button:hover,
.wp-block-button__link:hover {
  opacity: 0.9;
}

/* Blocks inside columns don't have negative margins. */
.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
/* We also want to avoid stacking negative margins. */
.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
.is-root-container .wp-block[data-align="full"]>*:not(.wp-block-group) .wp-block[data-align="full"] {
  margin-left: auto !important;
  margin-right: auto !important;
  width: inherit;
}

/* Full-bleed section groups (hero, ice/navy content bands, the Abteilung
 * shortcode sections) carry their own vertical padding and a background
 * color for separation. Without this, WordPress's default block-gap
 * margin between top-level blocks leaves a strip of the page's white
 * background showing between adjoining sections. Covers both the front
 * page, where patterns are direct children of `main.wp-block-group`
 * (templates/front-page.html), and every other page built from patterns
 * on the generic `templates/page.html` (Termine, Verantwortliche, Mitglied
 * werden, Archiv, Ordnungen & Regelwerke, Sponsoren), where the patterns
 * are direct children of `wp:post-content`'s own `.entry-content` wrapper
 * instead. `!important` because core's own block-gap CSS targets an
 * auto-generated per-block `.wp-container-content-*` class alongside
 * `.entry-content`/`main.wp-block-group`, which can match with equal or
 * higher specificity depending on generated class order — a plain
 * override isn't reliably guaranteed to win the cascade. */
main.wp-block-group > .alignfull,
.entry-content > .alignfull {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 1199px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
  }

  .wp-block-columns {
    align-items: normal !important;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap !important;
    margin-bottom: 1.75em;
  }

  body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 1200px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 0;
    flex-grow: 1;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*='flex-basis'] {
    flex-grow: 0;
  }

  .wp-block-columns {
    flex-wrap: nowrap !important;
  }
}

ul.wp-block-navigation-submenu {
  padding: 0;
}

/* Navigation links (header, footer "Seiten" unless overridden below): no
 * underline at rest, one appears on hover/focus. Kept as an always-present
 * transparent underline that fades in via `text-decoration-color` rather
 * than toggling `text-decoration-line`, so the appearance transitions
 * instead of snapping (issue #133). */
.wp-block-navigation .wp-block-navigation-item a {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 200ms;
}

.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}

/*
 * Header (spec §3, issue #8): sticky top bar, 74px tall. The nav collapses
 * to a burger + full-screen overlay below 1040px — the interactive
 * prototype's breakpoint, confirmed over the spec document's 900px (#8).
 */
.sck-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 74px;
  padding: 14px 32px;
  box-sizing: border-box;
  background-color: var(--wp--preset--color--white);
}

.sck-header__brand {
  flex-shrink: 0;
}

.sck-header__logo img {
  border-radius: 50%;
}

.sck-header__nav .wp-block-navigation-item > a,
.sck-header__nav .sck-abteilungen__trigger {
  font-family: var(--wp--preset--font-family--default);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--meta);
}

@media only screen and (max-width: 1039px) {
  .sck-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }

  .sck-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: block;
  }

  /* CTA shrinks in the collapsed bar (spec §3). */
  .sck-header__cta--bar .wp-block-button__link {
    padding: 10px 18px;
    font-size: var(--wp--preset--font-size--meta);
  }

  .sck-header__nav .wp-block-navigation__responsive-container.is-menu-open {
    padding: 32px;
  }

  .sck-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a,
  .sck-header__nav .wp-block-navigation__responsive-container.is-menu-open .sck-abteilungen__trigger {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 28px;
    font-weight: 600;
    color: var(--wp--preset--color--white);
  }

  .sck-header__nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--white);
  }

  /* Divisions become an always-expanded, indented list once inside the
   * overlay — there's no hover on touch, and Abb. 3 shows them open. */
  .sck-header__nav .wp-block-navigation__responsive-container.is-menu-open .sck-abteilungen__panel {
    position: static;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    background: none;
    padding: 12px 0 0 20px;
  }

  .sck-header__nav .wp-block-navigation__responsive-container.is-menu-open .sck-abteilungen__item > a,
  .sck-header__nav .wp-block-navigation__responsive-container.is-menu-open .sck-abteilungen__item > span {
    color: var(--wp--preset--color--white);
  }

  .sck-header__nav .wp-block-navigation__responsive-container.is-menu-open .sck-abteilungen__item--bald {
    opacity: 0.5;
  }
}

@media only screen and (min-width: 1040px) {
  .sck-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block;
  }

  .sck-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none;
  }
}

/* Abteilungen dropdown: CSS-only, opens on :hover/:focus-within so the
 * trigger <button> works without JavaScript (spec §3/§7, issue #8). */
.sck-abteilungen {
  position: relative;
}

.sck-abteilungen__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.sck-abteilungen__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  min-width: 200px;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  background-color: var(--wp--preset--color--white);
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(6, 30, 68, 0.18);
  pointer-events: none;
}

.sck-abteilungen:hover .sck-abteilungen__panel,
.sck-abteilungen:focus-within .sck-abteilungen__panel {
  pointer-events: auto;
}

.sck-abteilungen__item > a,
.sck-abteilungen__item > span {
  display: block;
  padding: 8px 20px;
  color: var(--wp--preset--color--text);
  font-weight: 400;
  white-space: nowrap;
}

.sck-abteilungen__item--bald > span {
  color: var(--wp--preset--color--text-muted);
  cursor: default;
}

.sck-abteilungen__badge {
  margin-left: 0.5em;
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 700;
  color: var(--wp--preset--color--blue);
}

/*
 * Sponsor strip (spec §3, issue #9): eyebrow, five logo slots and a centred
 * "Sponsor werden" outline button, shown above the footer proper on every
 * page.
 */
.sck-sponsor-strip {
  padding: var(--wp--custom--spacing--small) var(--wp--preset--spacing--gutter);
  text-align: center;
}

.sck-sponsor-strip__eyebrow {
  margin-bottom: var(--wp--preset--spacing--grid-gap);
}

.sck-sponsor-strip__logos {
  justify-content: center;
  align-items: center;
  gap: var(--wp--preset--spacing--grid-gap);
  margin-bottom: var(--wp--preset--spacing--grid-gap);
}

.sck-sponsor-strip__logo {
  width: 120px;
  margin: 0;
}

.sck-sponsor-strip__logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/*
 * Removes the root layout's blockGap (theme.json styles.spacing.blockGap)
 * from between .wp-site-blocks' direct children. WordPress applies that gap
 * as margin-block-start to every non-first child of .wp-site-blocks — not
 * just <footer>, but also <main> (a stray band above the navy page header on
 * every archive/single/search/404 template, issue-identical to the footer
 * one) and, on templates/category.html, the `sck/abteilung-header` pattern,
 * which templates insert directly between <header> and <main> rather than
 * inside it. Every one of these landmarks already carries its own
 * top/bottom padding via the "section"/"hero-top"/"gutter" spacing tokens,
 * so the extra margin is never load-bearing, only an unwanted seam of page
 * background between differently-colored full-bleed sections. `!important`
 * for the same reason as the `main.wp-block-group > .alignfull` block-gap
 * override earlier in this file: core's own `.wp-site-blocks > * + *` rule
 * carries equal specificity (one class), and being the later-printed rule
 * it would otherwise win the tie.
 */
.wp-site-blocks > * {
  margin-block-start: 0 !important;
}

/*
 * Footer (spec §3, issue #9): navy-deep, four columns that stack to one on
 * mobile via core's own default columns behaviour (no override needed here).
 * Headings/links/badges get their colors from these rules rather than from
 * theme.json's global element styles, which target the light-page palette
 * and would fail WCAG AA against navy-deep.
 * The footer group is "constrained" with contentSize 1180px (theme.json's
 * wideSize, issue #142): the background spans the viewport, the columns use
 * the full wide width and stay centred on large screens instead of being
 * capped at the 800px contentSize. The bottom padding is the fixed gutter —
 * --wp--custom--spacing--small is 5vw and grew to ~130px on wide screens.
 */
.sck-footer {
  padding: var(--wp--preset--spacing--section) var(--wp--preset--spacing--gutter) var(--wp--preset--spacing--gutter);
}

.sck-footer h1,
.sck-footer h2,
.sck-footer h3,
.sck-footer h4,
.sck-footer h5,
.sck-footer h6,
.sck-footer .sck-footer__club-name,
.sck-footer a {
  color: var(--wp--preset--color--white);
}

.sck-footer__heading {
  margin: 0 0 1rem;
  font-family: var(--wp--preset--font-family--default);
  font-size: var(--wp--preset--font-size--meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sck-footer__club-name {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  text-transform: uppercase;
}

.sck-footer .sck-footer__description,
.sck-footer .sck-footer__contact {
  color: var(--wp--preset--color--blue-pale);
}

.sck-footer__nav .wp-block-navigation-item > a {
  display: inline-block;
  padding: 4px 0;
  font-weight: 400;
  /* core's navigation-link styles win on element-vs-element specificity ties
   * in some contexts; !important guarantees the footer's white, underlined
   * text matches the Abteilungen/Kontakt columns at rest. */
  color: var(--wp--preset--color--white) !important;
  text-decoration: underline !important;
}

/* ...and the same !important is needed to bring the "Seiten" column's
 * hover/focus color in line with its sibling columns too (issue #133) —
 * left to core's own nav-link hover rule above, it stays white instead of
 * matching Abteilungen/Kontakt's blue-pale. Underline style is left to that
 * same core rule (text-decoration-style: solid) rather than overridden
 * here: this column and the plain-link columns both used to switch to a
 * dashed underline on hover, out of step with the solid one every other
 * link on the site (header nav, body copy) uses — removed so hover/focus
 * underlines look the same everywhere. */
.sck-footer__nav .wp-block-navigation-item > a:hover,
.sck-footer__nav .wp-block-navigation-item > a:focus {
  color: var(--wp--preset--color--blue-pale) !important;
}

.sck-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sck-footer__list-item > a,
.sck-footer__list-item > span {
  display: inline-block;
  padding: 4px 0;
}

.sck-footer__list-item--bald > span {
  color: var(--wp--preset--color--blue-pale);
  cursor: default;
}

.sck-footer__badge {
  margin-left: 0.5em;
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 700;
  color: var(--wp--preset--color--white);
}

.sck-footer__divider {
  margin: var(--wp--preset--spacing--grid-gap) 0 0;
  border-color: rgba(255, 255, 255, 0.15);
}

.sck-footer .sck-footer__copyright {
  margin-top: var(--wp--preset--spacing--grid-gap);
  color: var(--wp--preset--color--blue-pale);
}

/*
 * Neuigkeiten archive/home + single post templates (spec §5, issue #12):
 * the shared navy page header/breadcrumb, the division filter chips above
 * the archive/home grid, the four-column news grid itself, and the badge
 * pill reused by the grid cards and (in an on-navy variant) the single
 * post header.
 */
.sck-breadcrumb {
  margin: 0 0 1rem;
}

.sck-breadcrumb a {
  color: inherit;
}

.sck-breadcrumb__current {
  color: var(--wp--preset--color--white);
  font-weight: 700;
}

.sck-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* The term name is a link, and theme.json's link colour (blue) would
 * otherwise win over the pill's own text colour — blue on the on-navy pill's
 * blue background (issue #104). */
.sck-badge a,
.sck-badge a:hover,
.sck-badge a:focus {
  color: inherit;
  text-decoration: none;
}

/* Single post header badge on the navy surface: navy on white (16:1). A
 * blue pill vanished against the header's diagonal blue layers right
 * behind it (issue #158). */
.sck-badge--on-navy {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--navy);
}

/* Single post header meta row (issue #104): badge, date and
 * "· von <Autor>" on one line. core/post-author stacks its byline above the
 * name at half size; set both inline at the row's meta size instead. */
.sck-post-meta {
  align-items: center;
}

/* Inline text rather than flex items, so "· von" wraps together with a
 * long "Name, Funktion, …" byline (issue #158) instead of on its own line. */
.sck-post-meta__author .wp-block-post-author__content {
  display: block;
}

.sck-post-meta__author .wp-block-post-author__byline,
.sck-post-meta__author .wp-block-post-author__name {
  display: inline;
  margin: 0;
  width: auto;
  font-size: inherit;
}

.sck-post-meta__author .wp-block-post-author__byline {
  margin-right: 0.3em;
}

.sck-post-meta__author .wp-block-post-author__byline::before {
  content: '·';
  margin-right: 0.3em;
}

/* The author's name stands out from the pale meta row; a linked Person's
 * Funktionen (issue #158) stay in the row's pale color. */
.sck-post-meta__author .wp-block-post-author__name {
  color: var(--wp--preset--color--white);
  font-weight: 600;
}

.sck-post-meta__author-funktionen {
  color: var(--wp--preset--color--blue-pale);
  font-weight: 400;
}

/* Filter chips (Abb. 10): "Alle" plus one pill per live Abteilung above the
 * grid. The active chip (current category, or "Alle" outside any category)
 * is navy-filled; a coming-soon division is disabled with the same "BALD"
 * treatment as the header dropdown/footer list. */
.sck-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sck-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--wp--preset--color--ice-border);
  color: var(--wp--preset--color--text);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--meta);
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

a.sck-chip:hover,
a.sck-chip:focus {
  border-color: var(--wp--preset--color--blue);
  color: var(--wp--preset--color--blue);
}

.sck-chip.is-active {
  background-color: var(--wp--preset--color--navy);
  border-color: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--white);
}

a.sck-chip.is-active:hover,
a.sck-chip.is-active:focus {
  color: var(--wp--preset--color--white);
}

.sck-chip--bald {
  border-style: dashed;
  color: var(--wp--preset--color--text-muted);
  cursor: default;
}

.sck-chip__badge {
  margin-left: 0.5em;
  font-size: var(--wp--preset--font-size--eyebrow);
}

/* Four-column news grid (issue #12): a fixed four columns on desktop, then
 * an auto-fit/minmax reflow with a 360px minimum column once four no longer
 * fit. */
.sck-news-grid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--grid-gap);
}

@media (max-width: 1023px) {
  .sck-news-grid .wp-block-post-template {
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  }
}

/* Harmonised news cards (issue #160), shared by the index grid, the search
 * results and "Weitere Beiträge": the Query Loop's <li> grid items get no
 * flow-layout margin-block-start (it would push every item but the first
 * down, since the grid's own gap already spaces them), stretch to the row
 * height, and the card fills its cell as a flex column so the excerpt grows
 * and "Weiterlesen →" sits at the card's bottom edge. */
.sck-news-grid .wp-block-post-template,
.sck-weitere-beitraege .wp-block-post-template {
  align-items: stretch;
}

.sck-news-grid .wp-block-post-template > li,
.sck-weitere-beitraege .wp-block-post-template > li {
  display: flex;
  flex-direction: column;
  margin-block-start: 0;
}

.sck-news-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
}

.sck-news-card .wp-block-post-excerpt {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.sck-news-card .wp-block-post-excerpt__excerpt {
  margin-bottom: 0;
}

.sck-news-card .wp-block-post-excerpt__more-text {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 0.75em;
}

.post-category > a {
  padding: 0.5rem 1rem;
  color: var(--wp--preset--color--gray-50);
  background-color: var(--wp--preset--color--sck-primary);
  border-radius: 5px;
  text-decoration: none;
}

.post-category > a:hover {
  color: var(--wp--preset--color--gray-100);
  background-color: var(--wp--preset--color--blue-light);
}

.page-margin-0 {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}

/*
 * v2.0 button variants (spec §2.4) that theme.json's block style
 * variations cannot express on their own.
 */

/* Outline button on a navy surface: white 40% border/text instead of blue. */
.has-navy-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-navy-deep-background-color .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--wp--preset--color--white);
}

/* "Textlink mit Pfeil": plain link with a trailing arrow glyph. Its own
 * hover/focus (the arrow nudges right) instead of the generic button
 * opacity dim above, which reads as unrelated to the rest of the link
 * system on a link styled to look like plain text (issue #133). */
.wp-block-button.is-style-text-link-arrow .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.wp-block-button.is-style-text-link-arrow .wp-block-button__link:hover,
.wp-block-button.is-style-text-link-arrow .wp-block-button__link:focus {
  opacity: 1;
}

.wp-block-button.is-style-text-link-arrow .wp-block-button__link::after {
  content: '→';
  transition: transform 200ms;
}

.wp-block-button.is-style-text-link-arrow .wp-block-button__link:hover::after,
.wp-block-button.is-style-text-link-arrow .wp-block-button__link:focus::after {
  transform: translateX(4px);
}

/*
 * Interaction layer (spec §7): diagonal surfaces, card hover/lift, header
 * scroll shadow, scroll reveal, and the shared dropdown/overlay transition
 * utilities. Behaviour lives in assets/js/theme.js; see issue #5.
 */

/* Diagonal surfaces: two overlaid clip-path polygons (blue, blue-light) at
 * reduced opacity over a navy background, with a very slow floating drift.
 * Apply to the hero/page-header element alongside a navy background color
 * (e.g. has-navy-background-color); wrap the element's content so it stacks
 * above the shapes. */
.sck-diagonal-surface {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.sck-diagonal-surface::before,
.sck-diagonal-surface::after {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  animation: sck-diagonal-float 18s ease-in-out infinite alternate;
}

.sck-diagonal-surface::before {
  background-color: var(--wp--preset--color--blue);
  opacity: 0.35;
  clip-path: polygon(0 20%, 100% 0, 100% 65%, 0 100%);
}

.sck-diagonal-surface::after {
  background-color: var(--wp--preset--color--blue-light);
  opacity: 0.25;
  clip-path: polygon(0 45%, 100% 15%, 100% 100%, 0 85%);
  animation-delay: -9s;
}

.sck-diagonal-surface > * {
  position: relative;
  z-index: 1;
}

/* A block explicitly given the "White" preset text color must always
 * actually render white — that's the entire point of the `has-white-color`
 * utility class. In practice it silently loses to theme.json's global
 * text/heading color on a live site (confirmed visually, both on headings
 * and on plain paragraph/bold text, on the 404 header and the Ordnungen &
 * Regelwerke contact block): the two rules can land at the same
 * class-count specificity tier, and depending on how the current
 * WordPress version compiles and orders global styles, the theme.json
 * default wins the tie instead of the block's own explicit choice.
 * Enforced centrally, scoped to navy backgrounds (the only place this
 * theme ever asks for white text) rather than patched per element or per
 * pattern, so every current and future navy section is covered — headings,
 * paragraphs, and anything nested inside them (e.g. a <strong>) via normal
 * color inheritance. */
.has-navy-background-color .has-white-color,
.has-navy-deep-background-color .has-white-color {
  color: var(--wp--preset--color--white) !important;
}

@keyframes sck-diagonal-float {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 2.5%, 0);
  }
}

/* Card hover: lift 4px with a soft shadow, 0.2s. */
.sck-card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.sck-card:hover,
.sck-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(6, 30, 68, 0.18);
}

/* Header scroll shadow: toggled by assets/js/theme.js past ~20px of scroll. */
header.wp-block-template-part {
  transition: box-shadow 0.2s ease;
}

header.wp-block-template-part.is-scrolled {
  box-shadow: 0 4px 16px rgba(6, 30, 68, 0.12);
}

/* Scroll reveal: sections rise 26px and fade in on first entry into the
 * viewport, 0.7s. The "sck-reveal--pending" state is applied only by
 * assets/js/theme.js right before it starts observing an element, so content
 * marked "sck-reveal" stays fully visible if JavaScript never runs. */
.sck-reveal--pending {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.sck-reveal--pending.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Dropdown/mobile overlay shared timing utilities (spec §7); the header
 * issue (#8) toggles "is-open"/aria-expanded on the trigger. */
.sck-fade-in {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sck-fade-in.is-open,
.sck-fade-in.is-visible,
.sck-abteilungen:hover .sck-fade-in,
.sck-abteilungen:focus-within .sck-fade-in {
  opacity: 1;
}

.sck-chevron {
  display: inline-block;
  transition: transform 0.2s ease;
}

.is-open > .sck-chevron,
[aria-expanded='true'] > .sck-chevron,
.sck-abteilungen:hover .sck-chevron,
.sck-abteilungen:focus-within .sck-chevron {
  transform: rotate(180deg);
}

/*
 * Abteilungsseite (spec §5, issue #11): the single category archive
 * template (templates/category.html) that serves every Abteilung
 * and "Verein" term. Each section below is rendered by a shortcode in
 * inc/abteilung.php that omits itself when its term meta is empty, so
 * these rules only ever need to style present content, not hide absent
 * sections. `.sck-diagonal-surface`, `.sck-card` and `.sck-reveal` above
 * supply the navy header treatment, card hover/lift and scroll reveal —
 * including their prefers-reduced-motion handling — so nothing here
 * duplicates that.
 */

/* Page header: the shared navy page header (inc/page-header.php) with
 * an icon tile to the left of the H1. */
.sck-page-header__title-row {
  gap: 20px;
}

.sck-page-header__title-row h1 {
  margin: 0;
}

.sck-abteilung-header__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.12);
}

.sck-abteilung-header__icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* "Unsere Abteilung": description text with an image to the right,
 * stacking on narrow viewports. */
.sck-abteilung-about {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--grid-gap);
  padding: var(--wp--preset--spacing--section) 0;
}

.sck-abteilung-about__content {
  flex: 1 1 360px;
}

.sck-abteilung-about__title {
  margin: 8px 0 16px;
}

.sck-abteilung-about__image {
  flex: 1 1 360px;
}

.sck-abteilung-about__image img {
  width: 100%;
  height: auto;
  border-radius: 15px;
}

/* Key-figure row, e.g. "1910 Gegründet · 300+ Aktive · 12 Mannschaften". */
.sck-abteilung-key-figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--grid-gap);
  padding: var(--wp--preset--spacing--grid-gap) 0 var(--wp--preset--spacing--section);
  border-top: 1px solid var(--wp--preset--color--ice-border);
}

.sck-abteilung-key-figures__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}

.sck-abteilung-key-figures__value {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--h3);
  font-weight: 700;
  color: var(--wp--preset--color--blue);
}

.sck-abteilung-key-figures__label {
  font-size: var(--wp--preset--font-size--meta);
  color: var(--wp--preset--color--text-muted);
}

/* Mannschaftskarten: name, Liga, training time — no photo, no link
 * (resolved from the prototype over the live site's richer per-team-page
 * model, #11/#7). auto-fit/minmax reflows the grid at any width. */
.sck-abteilung-teams {
  padding: 0 0 var(--wp--preset--spacing--section);
}

.sck-abteilung-teams__title {
  margin: 0 0 var(--wp--preset--spacing--grid-gap);
}

.sck-abteilung-teams__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--wp--preset--spacing--grid-gap);
}

.sck-abteilung-team-card {
  padding: 24px;
  background-color: var(--wp--preset--color--ice);
  border: 1px solid var(--wp--preset--color--ice-border);
  border-radius: 15px;
}

.sck-abteilung-team-card__name {
  margin: 0 0 4px;
  font-size: var(--wp--preset--font-size--h3);
}

.sck-abteilung-team-card__liga {
  margin: 0;
  color: var(--wp--preset--color--blue);
  font-weight: 700;
}

.sck-abteilung-team-card__training {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--wp--preset--color--ice-border);
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--meta);
}

/* Extra sections (issue #147) sit inside one wrapper div, outside the
 * block-gap flow, so each gets the same bottom spacing as the other
 * Abteilung sections. */
.sck-abteilung-extra > * {
  padding-bottom: var(--wp--preset--spacing--section);
}

/* Vorteile (issue #148): benefit list (1 column on mobile, 2 from 700px)
 * with decorative check icons next to an optional highlight tile. */

.sck-abteilung-benefits__title {
  margin: 0 0 var(--wp--preset--spacing--grid-gap);
}

.sck-abteilung-benefits__body {
  display: grid;
  gap: var(--wp--preset--spacing--grid-gap);
  align-items: start;
}

.sck-abteilung-benefits__list {
  display: grid;
  gap: 16px var(--wp--preset--spacing--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sck-abteilung-benefits__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sck-abteilung-benefits__icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--wp--preset--color--blue);
}

.sck-abteilung-benefits__highlight {
  padding: 24px;
  background-color: var(--wp--preset--color--navy);
  border-radius: 15px;
  color: var(--wp--preset--color--white);
}

.sck-abteilung-benefits__highlight p {
  margin: 0;
}

.sck-abteilung-benefits__value {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--h2);
  font-weight: 700;
  line-height: 1.1;
}

.sck-abteilung-benefits__label {
  margin-top: 8px;
  font-weight: 700;
}

.sck-abteilung-benefits__note {
  margin-top: 8px;
  color: var(--wp--preset--color--blue-pale);
  font-size: var(--wp--preset--font-size--meta);
}

@media (min-width: 700px) {
  .sck-abteilung-benefits__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .sck-abteilung-benefits__body:has(.sck-abteilung-benefits__highlight):has(.sck-abteilung-benefits__list) {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  }
}

/* Division-specific Neuigkeiten: three post cards, the same
 * loop-filtered-by-category pattern the live site already uses (#7). */
.sck-abteilung-news {
  padding: 0 0 var(--wp--preset--spacing--section);
}

.sck-abteilung-news__title {
  margin: 0 0 var(--wp--preset--spacing--grid-gap);
}

.sck-abteilung-news__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--wp--preset--spacing--grid-gap);
}

.sck-abteilung-news-card {
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--ice-border);
  border-radius: 15px;
}

.sck-abteilung-news-card__image {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.sck-abteilung-news-card__body {
  padding: 20px;
}

.sck-abteilung-news-card__date {
  margin: 0 0 8px;
  font-size: var(--wp--preset--font-size--meta);
  color: var(--wp--preset--color--text-muted);
}

.sck-abteilung-news-card__title {
  margin: 0 0 8px;
  font-size: var(--wp--preset--font-size--h3);
}

.sck-abteilung-news-card__title a {
  color: var(--wp--preset--color--text);
}

.sck-abteilung-news-card__excerpt {
  color: var(--wp--preset--color--text-muted);
}

/* Ansprechpartner: person cards on navy, filtered to this term's
 * Personen (#7). */
.sck-abteilung-ansprechpartner {
  padding: var(--wp--preset--spacing--section) var(--wp--preset--spacing--gutter);
}

.sck-abteilung-ansprechpartner__inner {
  max-width: 1180px;
  margin-inline: auto;
}

.sck-abteilung-ansprechpartner__title {
  margin: 0 0 var(--wp--preset--spacing--grid-gap);
  color: var(--wp--preset--color--white);
}

.sck-abteilung-ansprechpartner__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--wp--preset--spacing--grid-gap);
}

/* Person card (issue #14): scktheme_render_person_card()'s markup, shared
 * by the Abteilungsseite's Ansprechpartner grid above and the
 * Verantwortliche page's Vorstand/Abteilungsverantwortliche grids below.
 * `--navy`/`--white` only switch colors for the two backgrounds it appears
 * on; the card structure is identical either way. A person with no photo
 * gets a placeholder silhouette circle instead of a broken <img>. */
.sck-person-card {
  padding: 24px;
  text-align: center;
  border-radius: 15px;
}

.sck-person-card--navy {
  background-color: rgba(255, 255, 255, 0.06);
}

.sck-person-card--white {
  background-color: var(--wp--preset--color--ice);
  border: 1px solid var(--wp--preset--color--ice-border);
}

.sck-person-card__photo {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto 16px;
  border-radius: 50%;
  object-fit: cover;
}

.sck-person-card__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sck-person-card--navy .sck-person-card__photo--placeholder {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--wp--preset--color--blue-pale);
}

.sck-person-card--white .sck-person-card__photo--placeholder {
  background-color: var(--wp--preset--color--ice-border);
  color: var(--wp--preset--color--text-muted);
}

.sck-person-card__photo--placeholder svg {
  width: 40px;
  height: 40px;
  fill: currentColor;
}

.sck-person-card__name {
  margin: 0 0 4px;
  font-size: var(--wp--preset--font-size--h3);
}

.sck-person-card--navy .sck-person-card__name {
  color: var(--wp--preset--color--white);
}

.sck-person-card__function {
  margin: 0 0 12px;
}

.sck-person-card--navy .sck-person-card__function {
  color: var(--wp--preset--color--blue-pale);
}

.sck-person-card--white .sck-person-card__function {
  color: var(--wp--preset--color--text-muted);
}

.sck-person-card__phone,
.sck-person-card__email {
  margin: 4px 0 0;
}

.sck-person-card--navy .sck-person-card__phone a,
.sck-person-card--navy .sck-person-card__email a {
  color: var(--wp--preset--color--white);
}

.sck-person-card--white .sck-person-card__phone a,
.sck-person-card--white .sck-person-card__email a {
  color: var(--wp--preset--color--blue);
}

/* Author card (issue #158): scktheme_render_author_card() below a
 * Neuigkeit's content when its author is linked to a Person — the person
 * card's ice surface, but wide and horizontal: a large round photo beside
 * name, Funktionen, phone and email, each line led by an icon. Stacks and
 * centres on narrow screens. */
.sck-author-card {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: var(--wp--preset--spacing--section);
  padding: 32px;
  border-radius: 15px;
  background-color: var(--wp--preset--color--ice);
  border: 1px solid var(--wp--preset--color--ice-border);
}

.sck-author-card__media {
  flex: 0 0 auto;
}

.sck-author-card__photo {
  display: block;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
}

.sck-author-card__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--wp--preset--color--ice-border);
  color: var(--wp--preset--color--text-muted);
}

.sck-author-card__photo--placeholder svg {
  width: 72px;
  height: 72px;
  fill: currentColor;
}

.sck-author-card__body {
  min-width: 0;
}

/* Same look as the "Eyebrow" paragraph style (theme.json). */
.sck-author-card__eyebrow {
  margin: 0 0 4px;
  color: var(--wp--preset--color--blue);
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* WordPress names the `h2-article` size's variable `h-2-article`. */
.sck-author-card__name {
  margin: 0 0 16px;
  font-size: var(--wp--preset--font-size--h-2-article);
}

.sck-author-card__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sck-author-card__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 10px 0 0;
  overflow-wrap: anywhere;
}

.sck-author-card__row:first-child {
  margin-top: 0;
}

.sck-author-card__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  fill: var(--wp--preset--color--blue);
}

.sck-author-card__row a {
  color: var(--wp--preset--color--blue);
}

@media (max-width: 600px) {
  .sck-author-card {
    flex-direction: column;
    text-align: center;
    padding: 24px;
  }

  .sck-author-card__photo {
    width: 120px;
    height: 120px;
  }

  .sck-author-card__rows {
    display: inline-block;
    text-align: left;
  }
}

/* Verantwortliche page (spec §5 Abb. 12, issue #14): "Der Vereinsvorstand"
 * and "Abteilungsverantwortliche" sections, each a fixed four-column person card
 * grid on desktop reflowing to one column at narrow widths — the same
 * fixed-then-auto-fit pattern as .sck-news-grid above, just with a smaller
 * per-card minimum since person cards carry far less content than a news
 * card. Abteilungsverantwortliche groups (one per Abteilung term,
 * inc/verantwortliche.php) stack with a heading above each division's own
 * grid. */
.sck-verantwortliche-section {
  padding: 0 0 var(--wp--preset--spacing--section);
}

.sck-verantwortliche-section__eyebrow {
  margin: 0 0 8px;
}

.sck-verantwortliche-section__title {
  margin: 0 0 var(--wp--preset--spacing--grid-gap);
}

.sck-verantwortliche-group {
  margin-top: var(--wp--preset--spacing--grid-gap);
}

.sck-verantwortliche-group:first-child {
  margin-top: 0;
}

.sck-verantwortliche-group__title {
  margin: 0 0 16px;
  font-size: var(--wp--preset--font-size--h3);
  color: var(--wp--preset--color--blue);
}

.sck-verantwortliche__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--grid-gap);
}

@media (max-width: 1023px) {
  .sck-verantwortliche__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  }
}

/* Termine row list (spec §5 Abb. 7/11, issues #10/#13): shared by the
 * front-page "Termine" section (navy) and the Termine page (white) via
 * scktheme_render_termine_list()/[sck_termine_rows] (inc/termine.php), so
 * this is the row structure's one styling source. `--navy` only swaps the
 * divider/text colors for the navy surface; the flex layout wraps onto two
 * lines (badge below the date/title/place) rather than overlapping once
 * the row is narrower than its content, down to 360px. */
.sck-termine-list {
  border-top: 1px solid var(--wp--preset--color--ice-border);
}

.sck-termine-list--navy {
  border-top-color: var(--wp--preset--color--navy-deep);
}

.sck-termine-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--wp--preset--color--ice-border);
}

.sck-termine-list--navy .sck-termine-row {
  border-bottom-color: var(--wp--preset--color--navy-deep);
}

.sck-termine-row__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.sck-termine-row__when {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}

.sck-termine-row__day {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--h3);
  color: var(--wp--preset--color--text);
}

.sck-termine-list--navy .sck-termine-row__day {
  color: var(--wp--preset--color--white);
}

.sck-termine-row__month {
  margin-top: 4px;
  font-size: var(--wp--preset--font-size--meta);
  color: var(--wp--preset--color--text-muted);
}

.sck-termine-list--navy .sck-termine-row__month {
  color: var(--wp--preset--color--blue-pale);
}

.sck-termine-row__info {
  min-width: 0;
}

.sck-termine-row__title {
  margin: 0;
  color: var(--wp--preset--color--text);
}

.sck-termine-list--navy .sck-termine-row__title {
  color: var(--wp--preset--color--white);
}

.sck-termine-row__place {
  margin: 4px 0 0;
  font-size: var(--wp--preset--font-size--meta);
  color: var(--wp--preset--color--text-muted);
}

.sck-termine-list--navy .sck-termine-row__place {
  color: var(--wp--preset--color--blue-pale);
}

.sck-termine-row__badge {
  margin: 0;
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--wp--preset--color--blue);
}

.sck-termine-list--navy .sck-termine-row__badge {
  color: var(--wp--preset--color--blue-pale);
}

.sck-termine-empty {
  padding: 32px 0;
  color: var(--wp--preset--color--text-muted);
  text-align: center;
}

.sck-termine-empty--navy {
  color: var(--wp--preset--color--blue-pale);
}

/*
 * Kontakt & Anfahrt map (spec §4 Abb. 8/§8 "Datenschutz", issues #10/#21):
 * a two-click privacy consent card, matching the border/background/
 * min-height the previous static placeholder used so loading the map causes
 * no layout shift. `assets/js/theme.js` swaps `.sck-map__consent` for a
 * `.sck-map__iframe` on click and adds `.is-loaded`, which only affects the
 * border treatment; the box's own size never changes.
 */
.sck-map {
  border: 2px dashed var(--wp--preset--color--ice-border);
  border-radius: 15px;
  background-color: var(--wp--preset--color--white);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sck-map.is-loaded {
  border-style: solid;
}

.sck-map__consent {
  padding: 24px;
  text-align: center;
}

.sck-map__consent-text {
  margin: 0 0 16px;
  color: var(--wp--preset--color--text-muted);
}

.sck-map__consent-button {
  cursor: pointer;
  border: none;
}

.sck-map__iframe {
  display: block;
  width: 100%;
  height: 280px;
  border: 0;
}

/*
 * Embeds (`core/embed`: YouTube, Vimeo, …) get the same two-click privacy
 * consent as the map above (spec §8, issue #105): inc/post-content.php
 * swaps the provider's markup for this placeholder and keeps it in an inert
 * `<template>` that `assets/js/theme.js` only inserts on click. While
 * pending, core's aspect-ratio spacer is switched off so the placeholder
 * sizes to its own content instead of overflowing a fixed 16:9 box on
 * narrow screens.
 */
.sck-embed--pending .wp-block-embed__wrapper::before {
  display: none;
}

.sck-embed-consent {
  padding: 24px;
  text-align: center;
  background-color: var(--wp--preset--color--ice);
  border: 2px dashed var(--wp--preset--color--ice-border);
  border-radius: 15px;
}

.sck-embed-consent__text {
  margin: 0 0 16px;
  color: var(--wp--preset--color--text-muted);
}

.sck-embed-consent__text strong {
  color: var(--wp--preset--color--text);
}

.sck-embed-consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
}

.sck-embed-consent__button {
  cursor: pointer;
  border: none;
}

.sck-embed-consent__link {
  font-size: var(--wp--preset--font-size--meta);
  color: var(--wp--preset--color--blue);
}

/*
 * Mitglied werden (spec §5 Abb. 13, issue #15): a PDF download plus a
 * step-by-step explanation, deliberately no online form. The eyebrow/H2/
 * intro copy and the download card itself are rendered by
 * [sck_mitgliedschaft_download] (inc/mitgliedschaft.php) from the
 * `sck_aufnahmeantrag_pdf_url` post meta on the "mitgliedschaft" Page; the
 * "Ausfüllen & Einreichen" step explanation below it is normal Page content
 * (templates/page-mitgliedschaft.html's `wp:post-content`), edited like any
 * other Page. `.sck-card` above supplies the hover lift.
 */
.sck-mitgliedschaft-download-section__eyebrow {
  margin: 0 0 8px;
}

.sck-mitgliedschaft-download-section__title {
  margin: 0 0 16px;
}

.sck-mitgliedschaft-download-section__intro {
  max-width: 640px;
  margin: 0 0 var(--wp--preset--spacing--grid-gap);
  color: var(--wp--preset--color--text-muted);
}

.sck-mitgliedschaft-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  background-color: var(--wp--preset--color--ice);
  border: 1px solid var(--wp--preset--color--ice-border);
  border-radius: 15px;
}

.sck-mitgliedschaft-download__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--blue);
}

.sck-mitgliedschaft-download__icon svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.sck-mitgliedschaft-download__info {
  flex: 1 1 220px;
  min-width: 0;
}

.sck-mitgliedschaft-download__filename {
  margin: 0;
  font-weight: 700;
  color: var(--wp--preset--color--text);
  overflow-wrap: break-word;
}

.sck-mitgliedschaft-download__filesize {
  font-weight: 400;
  color: var(--wp--preset--color--text-muted);
}

.sck-mitgliedschaft-download__caption {
  margin: 4px 0 0;
  font-size: var(--wp--preset--font-size--meta);
  color: var(--wp--preset--color--text-muted);
}

.sck-mitgliedschaft-download__button {
  flex-shrink: 0;
  margin: 0;
}

.sck-mitgliedschaft-download__missing {
  padding: 28px 32px;
  color: var(--wp--preset--color--text-muted);
  background-color: var(--wp--preset--color--ice);
  border: 1px solid var(--wp--preset--color--ice-border);
  border-radius: 15px;
}

.sck-mitgliedschaft-steps :where(ol, ul) {
  padding-left: 1.2em;
}

.sck-mitgliedschaft-steps li + li {
  margin-top: 8px;
}

/*
 * Archiv (spec §5, issue #16): every Neuigkeit grouped by year in a 900px
 * column (patterns/archiv-header.php, patterns/archiv-liste.php +
 * [sck_archiv_liste], inc/archiv.php). No card grid here — this is a plain
 * chronological list, so it only needs year headings, a fine-divider item
 * list and simple prev/numbers/next pagination for sites with several
 * years of content.
 */
.sck-archiv__year {
  margin: var(--wp--preset--spacing--section) 0 var(--wp--preset--spacing--grid-gap);
}

.sck-archiv__year:first-child {
  margin-top: 0;
}

.sck-archiv__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--wp--preset--color--ice-border);
}

.sck-archiv__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--wp--preset--color--ice-border);
}

.sck-archiv__item-date {
  flex-shrink: 0;
  min-width: 90px;
  font-size: var(--wp--preset--font-size--meta);
  color: var(--wp--preset--color--text-muted);
}

.sck-archiv__item-title {
  color: var(--wp--preset--color--text);
  font-weight: 700;
}

.sck-archiv-empty {
  padding: 32px 0;
  color: var(--wp--preset--color--text-muted);
  text-align: center;
}

.sck-archiv-pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: var(--wp--preset--spacing--section) 0 0;
  padding: 0;
  list-style: none;
}

.sck-archiv-pagination__item .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--wp--preset--color--text);
  font-weight: 700;
  text-decoration: none;
}

.sck-archiv-pagination__item .page-numbers.current {
  background-color: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--white);
}

.sck-archiv-pagination__item .page-numbers:not(.current):hover {
  color: var(--wp--preset--color--blue);
}

/*
 * Ordnungen & Regelwerke (spec §5/§9, issue #16): overview grid of anchor
 * cards above the always-visible full sections — an anchor-jump structure,
 * not an accordion (see inc/ordnungen.php's docblock for why). Reuses
 * .sck-card for hover/focus lift and .sck-badge for the "PDF verfügbar"/"In
 * Arbeit" pill. The Downloads page (inc/downloads.php, issues #149/#154)
 * shares the same overview/group/card classes plus the .sck-download-eintrag
 * ones below.
 */
.sck-ordnungen-uebersicht {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--wp--preset--spacing--grid-gap);
  margin: 0 0 var(--wp--preset--spacing--section);
}

.sck-ordnungen-uebersicht__card {
  display: block;
  padding: 24px;
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--ice-border);
  border-radius: 15px;
  text-decoration: none;
}

.sck-ordnungen-uebersicht__eyebrow {
  margin: 0 0 8px;
}

.sck-ordnungen-uebersicht__title {
  margin: 0 0 4px;
  color: var(--wp--preset--color--text);
}

.sck-ordnungen-uebersicht__count {
  margin: 0;
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--meta);
}

.sck-ordnungen-gruppe {
  padding: var(--wp--preset--spacing--section) 0 0;
  scroll-margin-top: 20px;
}

.sck-ordnungen-gruppe:first-of-type {
  padding-top: 0;
}

.sck-ordnungen-gruppe__eyebrow {
  margin: 0 0 8px;
}

.sck-ordnungen-gruppe__title {
  margin: 0 0 16px;
}

.sck-ordnungen-gruppe__intro {
  max-width: 640px;
  margin: 0 0 var(--wp--preset--spacing--grid-gap);
  color: var(--wp--preset--color--text-muted);
}

.sck-ordnungen-dokument {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  background-color: var(--wp--preset--color--ice);
  border: 1px solid var(--wp--preset--color--ice-border);
  border-radius: 15px;
}

.sck-ordnungen-dokument + .sck-ordnungen-dokument {
  margin-top: var(--wp--preset--spacing--grid-gap);
}

.sck-ordnungen-dokument__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--blue);
}

.sck-ordnungen-dokument__icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.sck-ordnungen-dokument__body {
  flex: 1 1 320px;
  min-width: 0;
}

.sck-ordnungen-dokument__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 8px;
}

.sck-ordnungen-dokument__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--h3);
}

.sck-ordnungen-dokument__badge--verfuegbar {
  background-color: var(--wp--preset--color--ice-border);
  color: var(--wp--preset--color--blue);
}

.sck-ordnungen-dokument__badge--in-arbeit {
  background-color: var(--wp--preset--color--ice);
  color: var(--wp--preset--color--text-muted);
}

.sck-ordnungen-dokument__description {
  margin: 0;
  color: var(--wp--preset--color--text-muted);
}

.sck-ordnungen-dokument__meta {
  margin: 8px 0 0;
  font-size: var(--wp--preset--font-size--meta);
  color: var(--wp--preset--color--text-muted);
}

.sck-ordnungen-dokument__pending {
  margin: 8px 0 0;
  font-size: var(--wp--preset--font-size--meta);
  font-style: italic;
  color: var(--wp--preset--color--text-muted);
}

.sck-ordnungen-dokument__action {
  flex-shrink: 0;
  margin: 0;
}

.sck-download-eintrag__preview {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  padding: 12px;
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--ice-border);
  border-radius: 12px;
}

.sck-download-eintrag__preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sck-download-eintrag__files {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.sck-download-eintrag__file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

/* Download button texts name entry and format ("Vereinslogo als Vektor
 * (ZIP) herunterladen ↓") and can be longer than a phone-width card: let
 * them wrap inside the card instead of overflowing it and making the page
 * scroll sideways (issue #154). */
.sck-download-eintrag__file .sck-ordnungen-dokument__action {
  max-width: 100%;
}

.sck-download-eintrag__file .wp-block-button__link {
  white-space: normal;
  text-align: center;
}

.sck-download-eintrag__file-meta {
  font-size: var(--wp--preset--font-size--meta);
  color: var(--wp--preset--color--text-muted);
}

/* Downloads page without any group with a valid file yet (issue #154):
 * a short note instead of an empty page, sitting where the overview grid
 * would otherwise start. */
.sck-downloads-leer {
  margin: 0;
  color: var(--wp--preset--color--text-muted);
}

/* Cross-link between Ordnungen & Regelwerke and Downloads (issue #154),
 * rendered below each page's list by scktheme_render_seitenverweis()
 * (inc/ordnungen.php). The link keeps theme.json's global link colour and
 * focus ring; inline-flex with a 44px minimum height gives it a full-size
 * touch target even though it sits inside a sentence. The spacing above
 * (grid gap, like the gap between cards) and below (a full section, before
 * the footer on the Downloads page) is padding on the outer element, not
 * margin: WordPress' flow layout zeroes a group's first/last child margins,
 * and this note is the last element of its group. */
.sck-seitenverweis {
  padding: var(--wp--preset--spacing--grid-gap) 0 var(--wp--preset--spacing--section);
}

.sck-seitenverweis__box {
  padding: 16px 24px;
  background-color: var(--wp--preset--color--ice);
  border: 1px solid var(--wp--preset--color--ice-border);
  border-radius: 15px;
}

.sck-seitenverweis__text {
  margin: 0;
}

.sck-seitenverweis__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

/* The closing "Fragen?" contact block (patterns/ordnungen-kontakt.php): its
 * mailto:/relative links otherwise pick up theme.json's global link color
 * (a medium blue meant for white/ice backgrounds), which reads as very
 * low-contrast against navy — the same fix `.sck-breadcrumb a` above
 * already applies for the page-header breadcrumb links. */
.sck-ordnungen-kontakt a {
  color: inherit;
}

/*
 * Sponsoren page, part 1 (spec §6, issue #17): the main-sponsor notice box
 * and the three package cards rendered by inc/sponsoren.php from the
 * "sponsoren" Page's post meta. Reuses .sck-card for hover/focus lift and
 * .sck-badge for the "EMPFOHLEN"/"VERGEBEN" pill; the featured package's
 * navy treatment comes from the has-navy-background-color/has-white-color
 * utilities inc/sponsoren.php applies directly, the same way
 * inc/abteilung.php's shortcode output already does.
 */
.sck-sponsoring-hinweis {
  display: flex;
  padding: 20px 24px;
  margin: 0 0 var(--wp--preset--spacing--grid-gap);
  background-color: var(--wp--preset--color--ice);
  border: 1px solid var(--wp--preset--color--ice-border);
  border-left: 4px solid var(--wp--preset--color--blue);
  border-radius: 12px;
}

/* `[sck_sponsoring_hauptsponsor_hinweis]`/`[sck_sponsoring_pakete]`
 * (patterns/sponsoren-pakete.php) are raw shortcode output with no
 * wrapping block of their own, so whichever one directly follows the
 * "Wählen Sie Ihr Paket" heading — the notice when the main-sponsor
 * toggle is on, the package grid itself when it's off — only ever got
 * the default block-gap before it, reading as cramped compared to every
 * other heading-to-content gap on the site. Give it the same generous
 * top margin explicitly, scoped to this page's two classes so it can't
 * affect any other heading on the site. `!important` because
 * `.sck-sponsoring-hinweis`'s own `margin-top: 0` (below) and the block
 * editor's generated block-gap rule for this section both need to lose
 * to it outright, not just out-specificity it. */
h2 + .sck-sponsoring-hinweis,
h2 + .sck-sponsoring-pakete {
  margin-top: var(--wp--preset--spacing--section) !important;
}

.sck-sponsoring-hinweis__text {
  margin: 0;
  color: var(--wp--preset--color--text);
}

/* Three fixed columns rather than auto-fit: the section sits in a
 * contentSize (800px) container, and three auto-fit columns with a
 * comfortable minimum (260px) don't quite fit inside it, so auto-fit was
 * silently dropping to two columns with the third wrapping onto its own
 * row. Below 900px it switches to the same fixed-then-auto-fit reflow
 * `.sck-news-grid` uses, cascading down to one column by 360px. */
.sck-sponsoring-pakete {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--grid-gap);
  align-items: stretch;
}

@media (max-width: 900px) {
  .sck-sponsoring-pakete {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  }
}

.sck-sponsoring-paket {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  border: 1px solid var(--wp--preset--color--ice-border);
  border-radius: 15px;
}

.sck-sponsoring-paket--featured {
  border-color: transparent;
}

.sck-sponsoring-paket__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sck-sponsoring-paket__name {
  margin: 0;
}

.sck-sponsoring-paket__badge--empfohlen {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--navy);
}

.sck-sponsoring-paket__badge--vergeben {
  background-color: var(--wp--preset--color--ice-border);
  color: var(--wp--preset--color--text-muted);
}

.sck-sponsoring-paket__subtitle {
  margin: 0;
  font-weight: 700;
  color: var(--wp--preset--color--blue);
}

.sck-sponsoring-paket--featured .sck-sponsoring-paket__subtitle {
  color: var(--wp--preset--color--blue-pale);
}

.sck-sponsoring-paket__pitch {
  margin: 0;
  color: var(--wp--preset--color--text-muted);
}

.sck-sponsoring-paket--featured .sck-sponsoring-paket__pitch {
  color: var(--wp--preset--color--blue-pale);
}

.sck-sponsoring-paket__benefits {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0;
  padding: 0;
  list-style: none;
}

.sck-sponsoring-paket__benefits li {
  position: relative;
  padding-left: 26px;
}

.sck-sponsoring-paket__benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--blue);
  font-weight: 700;
}

.sck-sponsoring-paket--featured .sck-sponsoring-paket__benefits li::before {
  color: var(--wp--preset--color--white);
}

.sck-sponsoring-paket__preis {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sck-sponsoring-paket__preis-hinweis {
  margin: 0;
  font-size: var(--wp--preset--font-size--meta);
  color: var(--wp--preset--color--text-muted);
}

.sck-sponsoring-paket--featured .sck-sponsoring-paket__preis-hinweis {
  color: var(--wp--preset--color--blue-pale);
}

.sck-sponsoring-paket__cta {
  margin-top: auto;
}

/* A `taken` package (e.g. Hauptsponsor while it's held by a named sponsor)
 * gets this plain status note in place of the CTA button — there is no
 * waitlist to sign up for, so it shares the button's margin-top:auto to
 * still sit at the bottom of the card. */
.sck-sponsoring-paket__vergeben-hinweis {
  margin-top: auto;
  margin-bottom: 0;
  font-size: var(--wp--preset--font-size--meta);
  font-style: italic;
  color: var(--wp--preset--color--text-muted);
}

.sck-sponsoring-paket--featured .sck-sponsoring-paket__vergeben-hinweis {
  color: var(--wp--preset--color--blue-pale);
}

/*
 * Sponsoren page, part 2: comparison table (spec §6 Abb. 17, issue #18). A
 * real <table> (acceptance criterion), wrapped in a horizontally
 * scrollable container so it scrolls on mobile without the whole page
 * scrolling sideways — the wrapper div owns the overflow, never <body>,
 * and the table gets a minimum width so columns stay readable instead of
 * being squeezed to illegibility.
 */
.sck-sponsoring-vergleich__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sck-sponsoring-vergleich__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.sck-sponsoring-vergleich__table th,
.sck-sponsoring-vergleich__table td {
  padding: 14px 16px;
  text-align: center;
  border-bottom: 1px solid var(--wp--preset--color--ice-border);
  font-size: var(--wp--preset--font-size--meta);
}

.sck-sponsoring-vergleich__table thead th {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--wp--preset--color--navy);
}

.sck-sponsoring-vergleich__leistung {
  text-align: left;
  font-weight: 700;
  color: var(--wp--preset--color--text);
}

.sck-sponsoring-vergleich__zelle--ja {
  color: var(--wp--preset--color--blue);
  font-weight: 700;
}

.sck-sponsoring-vergleich__zelle--nein {
  color: var(--wp--preset--color--text-muted);
}

/*
 * Sponsoren page, part 2: Abteilungs-Baukasten (spec §6 Abb. 18, issue
 * #18). Tabs, service cards and the selection bar always sit on the navy
 * surface patterns/sponsoren-baukasten.php wraps them in, so colors here
 * are fixed rather than switched via the has-navy-background-color/
 * has-white-color utilities the package cards above use conditionally.
 * Reuses .sck-card only for its hover-lift transition timing, not its
 * (light-background) color rules.
 */
.sck-baukasten__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--wp--preset--spacing--grid-gap);
}

.sck-baukasten__tab {
  padding: 10px 22px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background-color: transparent;
  color: var(--wp--preset--color--blue-pale);
  font-family: inherit;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--meta);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.sck-baukasten__tab:hover,
.sck-baukasten__tab:focus-visible {
  border-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--white);
}

.sck-baukasten__tab.is-active {
  background-color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--navy);
}

.sck-baukasten__services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--wp--preset--spacing--grid-gap);
  margin: 0 0 var(--wp--preset--spacing--section);
  padding: 0;
  list-style: none;
}

.sck-baukasten__service {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 20px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--wp--preset--color--white);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.sck-baukasten__service-category {
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--wp--preset--color--blue-pale);
}

.sck-baukasten__service-name {
  font-weight: 700;
}

.sck-baukasten__service[aria-pressed='true'] {
  border-color: var(--wp--preset--color--white);
  background-color: rgba(255, 255, 255, 0.15);
}

/* The selected checkmark: a visible, non-color signal of state (issue #18:
 * "not conveyed by colour alone") alongside aria-pressed, which already
 * announces it to assistive technology. */
.sck-baukasten__service[aria-pressed='true']::after {
  content: '✓';
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--navy);
  font-size: 13px;
  font-weight: 700;
}

.sck-baukasten__auswahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--grid-gap);
  padding: 24px;
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.08);
}

.sck-baukasten__auswahl-status {
  flex: 1 1 260px;
}

.sck-baukasten__counter {
  margin: 0 0 4px;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  color: var(--wp--preset--color--white);
}

.sck-baukasten__hilfe,
.sck-baukasten__summary {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--wp--preset--color--blue-pale);
  font-size: var(--wp--preset--font-size--meta);
}

.sck-baukasten__warnung {
  margin: 8px 0 0;
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--meta);
  font-style: italic;
}

.sck-baukasten__mailto[aria-disabled='true'] {
  opacity: 0.5;
}

/*
 * Sponsoren page, part 2: "Unsere Partner" wall (spec §6 Abb. 18, issue
 * #18), directly below the Baukasten and sharing its navy surface. The
 * heading and layout are plain page content in patterns/sponsoren-
 * baukasten.php now (issue #18 follow-up); only the highlighted
 * main-sponsor tile itself is still shortcode-rendered ([sck_sponsoring_
 * sponsorenwand], inc/sponsoren.php) — a plain named tile, not a logo
 * image, since there is no separate logo asset for it, derived instead
 * from existing post meta so it can't disagree with the package cards
 * above it.
 */
.sck-sponsoring-sponsorenwand__logo--hauptsponsor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 15px;
}

.sck-sponsoring-sponsorenwand__badge {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--navy);
}

.sck-sponsoring-sponsorenwand__name {
  color: var(--wp--preset--color--white);
  font-weight: 700;
}

/* Partner-Karte (patterns/sponsoren-partner-karte.php, issue #18
 * follow-up): a manually duplicable sponsor card built entirely from core
 * Group/Image/Paragraph blocks — an editor adds a sponsor by inserting or
 * duplicating one, no developer or shortcode involved. `.sck-card` (above)
 * already supplies the hover lift; this only fixes the card's width so
 * several sit evenly in the flex row .sck-sponsoring-partner-karten wraps
 * them in. */
.sck-sponsoring-partner-karte {
  width: 180px;
  text-align: center;
}

.sck-sponsoring-partner-karte__logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Visible focus states, on both light and navy backgrounds. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--blue);
  outline-offset: 2px;
}

.has-navy-background-color :focus-visible,
.has-navy-deep-background-color :focus-visible,
.sck-diagonal-surface :focus-visible {
  outline-color: var(--wp--preset--color--white);
}

/* Reduced motion: disable every transform/animation above outright rather
 * than merely shortening it; all content stays at its final position. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .sck-diagonal-surface::before,
  .sck-diagonal-surface::after {
    animation: none;
  }

  /* Link system (issue #133): color/underline-offset, the nav underline
   * fade-in, and the text-link-arrow nudge all disable outright. */
  a,
  .wp-block-navigation .wp-block-navigation-item a,
  .wp-block-button.is-style-text-link-arrow .wp-block-button__link::after {
    transition: none;
  }

  .sck-card {
    transition: none;
  }

  .sck-card:hover,
  .sck-card:focus-within {
    transform: none;
  }

  .sck-reveal--pending {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .sck-fade-in,
  .sck-chevron,
  header.wp-block-template-part {
    transition: none;
  }

  .sck-baukasten__tab,
  .sck-baukasten__service {
    transition: none;
  }
}

/* Social-Media-Links (issue #146): inc/social-media.php. Plain links with
 * inline SVG icons (no icon font, no embeds); 44px minimum touch target. */
.sck-social {
  padding: var(--wp--preset--spacing--section) var(--wp--preset--spacing--gutter);
}

/* Abteilungsseite: in the content column like the other sections; heading left-aligned, links centred. */
.sck-social--abteilung {
  padding: 0 0 var(--wp--preset--spacing--section);
}

.sck-social--abteilung .sck-social__list {
  justify-content: center;
}

.sck-social__inner {
  max-width: 1180px;
  margin-inline: auto;
}

.sck-social__title {
  margin: 0 0 var(--wp--preset--spacing--grid-gap);
}

.sck-social__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sck-social__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 20px;
  border: 2px solid var(--wp--preset--color--navy);
  border-radius: 999px;
  color: var(--wp--preset--color--navy);
  font-weight: 600;
  text-decoration: none;
}

.sck-social__link:hover,
.sck-social__link:focus {
  background-color: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--white);
  text-decoration: none;
}

.sck-social__icon {
  flex: none;
  width: 24px;
  height: 24px;
}

/* Footer variant: plain links on navy-deep, same look as the contact lines. */
.sck-footer .sck-social__list--footer {
  margin-top: 12px;
  flex-direction: column;
  gap: 0;
}

.sck-footer .sck-social__list--footer .sck-social__link {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--wp--preset--color--blue-pale);
  font-weight: 400;
}

.sck-footer .sck-social__list--footer .sck-social__link:hover,
.sck-footer .sck-social__list--footer .sck-social__link:focus {
  background: none;
  color: var(--wp--preset--color--white);
  text-decoration: underline;
}

/* Galerie als Slider (issue #145): a core/gallery with the "Slider" or
 * "Slider mit Autoplay" block style. Without JavaScript this is already a
 * usable, horizontally scrolling, scroll-snapping list of images; the
 * script (assets/js/theme.js) only wraps it in .sck-slider and adds the
 * buttons and position indicator. The selectors repeat classes to beat
 * core's own gallery rules (.wp-block-gallery.has-nested-images ...). */
.wp-block-gallery.has-nested-images.is-style-slider,
.wp-block-gallery.has-nested-images.is-style-slider-autoplay {
  position: relative;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 15px;
}

.wp-block-gallery.has-nested-images.is-style-slider::-webkit-scrollbar,
.wp-block-gallery.has-nested-images.is-style-slider-autoplay::-webkit-scrollbar {
  display: none;
}

.wp-block-gallery.has-nested-images.is-style-slider.is-dragging,
.wp-block-gallery.has-nested-images.is-style-slider-autoplay.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.wp-block-gallery.has-nested-images.is-style-slider figure.wp-block-image,
.wp-block-gallery.has-nested-images.is-style-slider-autoplay figure.wp-block-image {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.wp-block-gallery.has-nested-images.is-style-slider figure.wp-block-image img,
.wp-block-gallery.has-nested-images.is-style-slider-autoplay figure.wp-block-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  background-color: var(--wp--preset--color--ice);
  /* Core's .is-cropped rule (…:not(#individual-image) img) crops with
   * object-fit: cover and out-ranks any normal selector; the whole picture
   * has to stay visible, whatever its aspect ratio. */
  object-fit: contain !important;
  height: auto !important;
  flex: none !important;
  -webkit-user-drag: none;
}

/* Captions below the picture (not core's gradient overlay), so their
 * contrast is the plain text colour on the page background. */
.wp-block-gallery.has-nested-images.is-style-slider figure.wp-block-image figcaption.wp-element-caption,
.wp-block-gallery.has-nested-images.is-style-slider-autoplay figure.wp-block-image figcaption.wp-element-caption {
  position: static;
  max-height: none;
  padding: 8px 0 0;
  background: none;
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--meta);
  text-align: left;
}

/* The gallery's own caption is moved below the controls by the script;
 * without it, it stays one more (full-width) item of the list. */
.wp-block-gallery.has-nested-images.is-style-slider > figcaption.blocks-gallery-caption,
.wp-block-gallery.has-nested-images.is-style-slider-autoplay > figcaption.blocks-gallery-caption {
  flex: 0 0 100%;
}

.sck-slider > .blocks-gallery-caption {
  margin: 8px 0 0;
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--meta);
}

.sck-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.sck-slider__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--white);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.sck-slider__button:hover {
  background-color: var(--wp--preset--color--blue);
}

.sck-slider__button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.sck-slider__button .sck-slider__icon-play {
  fill: currentColor;
  stroke: none;
}

.sck-slider__status {
  min-width: 4.5em;
  font-size: var(--wp--preset--font-size--meta);
  font-weight: 700;
  color: var(--wp--preset--color--text);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .sck-slider__button {
    transition: none;
  }
}

/* Front page section photos (hero, Über den Verein): fill the column in a fixed ratio. */
.sck-section-photo {
  margin: 0;
}

.sck-section-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Hero key figures: large, count up on scroll-in (assets/js/theme.js) and
 * lift on hover/focus. Size is set here with !important so no inherited
 * heading rule can shrink it. */
.sck-stat {
  cursor: default;
}

.sck-stat .sck-count-up {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 48px) !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  transition:
    transform 0.25s ease,
    color 0.25s ease;
  transform-origin: left bottom;
}

.sck-stat:hover .sck-count-up,
.sck-stat:focus-within .sck-count-up {
  transform: scale(1.08);
  color: var(--wp--preset--color--blue-pale);
}

@media (prefers-reduced-motion: reduce) {
  .sck-stat .sck-count-up {
    transition: none;
  }

  .sck-stat:hover .sck-count-up,
  .sck-stat:focus-within .sck-count-up {
    transform: none;
  }
}

/* Hero motion: livelier diagonals that also follow the pointer.
 * --sck-mx / --sck-my are the pointer position (-1..1) set from JS. */
#hero.sck-diagonal-surface::before,
#hero.sck-diagonal-surface::after {
  animation: sck-hero-drift 11s ease-in-out infinite alternate;
  translate: calc(var(--sck-mx, 0) * -28px) calc(var(--sck-my, 0) * -16px);
}

#hero.sck-diagonal-surface::after {
  animation-duration: 15s;
  animation-delay: -6s;
  translate: calc(var(--sck-mx, 0) * 44px) calc(var(--sck-my, 0) * 24px);
}

@keyframes sck-hero-drift {
  from {
    transform: translate3d(-3%, -2%, 0) rotate(-1.2deg);
  }
  to {
    transform: translate3d(3%, 5%, 0) rotate(1.2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero.sck-diagonal-surface::before,
  #hero.sck-diagonal-surface::after {
    animation: none;
    translate: none;
  }
}