/* Header, navigation and footer. Loads after style.css; colours come from the tokens there. */

/* ---------------------------------------------------------------------------
   Header: a 4px club-blue line, crest and name as one wordmark, main menu.
   --------------------------------------------------------------------------- */
.sgh-header { position: relative; z-index: 30; background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); border-top: var(--sgh-brandline); view-transition-name: sgh-header; }
.sgh-header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 4.5rem; gap: 2rem; }
.sgh-header-inner > * { margin: 0; }
.sgh-header a { color: var(--wp--preset--color--ink); }
.sgh-header .sgh-brand { display: inline-flex; align-items: center; min-width: 0; flex-shrink: 1; gap: .75rem; padding-block: .75rem; text-decoration: none; }
.sgh-header .sgh-brand-crest { width: 42px; height: auto; flex: 0 0 42px; }
.sgh-header .sgh-brand-crest img { display: block; width: 42px; height: 48px; object-fit: contain; }
.sgh-header .sgh-brand-name { max-width: 12ch; margin: 0; font: 700 1.375rem/1 var(--wp--preset--font-family--heading); letter-spacing: .02em; text-transform: uppercase; }
.sgh-header .sgh-brand-name a { text-decoration: none; }
.sgh-header .sgh-brand:hover .sgh-brand-name a { color: var(--wp--custom--color--link); }

.sgh-header .sgh-main-navigation { margin: 0; font: 700 1.125rem/1.2 var(--wp--preset--font-family--heading); }
.sgh-header .sgh-main-navigation .wp-block-navigation__container { gap: clamp(1.25rem, 2.2vw, 2rem); }
.sgh-header .sgh-main-navigation .wp-block-navigation-item__content {
  position: relative; display: inline-flex; align-items: center; min-height: 4.5rem; padding: 0;
  color: var(--wp--preset--color--ink); text-decoration: none; transition: color var(--sgh-dur-1) var(--sgh-ease);
}
.sgh-header .sgh-main-navigation .wp-block-navigation-item__content:hover { color: var(--wp--custom--color--link); }
/* The active page is marked like a tab: a 3px bar on the header's bottom edge. */
.sgh-header .sgh-main-navigation .wp-block-navigation-item__content[aria-current="page"] { color: var(--wp--custom--color--link); }
.sgh-header .sgh-main-navigation > .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]::after {
  content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--wp--custom--color--link);
}
/* Where a page without an entry of its own belongs (inc/navigation.php): the area entry (aria-current="true", e.g.
   "Aktuelles" on a report) and the group holding the current page or the area ("Verein" on the Satzung) look like the
   active page, with the bar under a main entry. */
.sgh-header .sgh-main-navigation .wp-block-navigation-item__content:is([aria-current="true"], .sgh-nav-current-group) { color: var(--wp--custom--color--link); }
.sgh-header .sgh-main-navigation > .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:is([aria-current="true"], .sgh-nav-current-group)::after {
  content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--wp--custom--color--link);
}
/* Core renders a click-only submenu's icon after its button. Reserve a slot inside the
   button so the decorative icon stays clear of the label and clickable. */
.sgh-header .sgh-main-navigation .wp-block-navigation-item.open-on-click > .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle { padding-inline: 0 1.2em; }
.sgh-header .sgh-main-navigation .wp-block-navigation-item.open-on-click > .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon {
  flex: 0 0 .7em; width: .7em; height: .7em; margin: 0; margin-inline-start: -.7em; pointer-events: none;
}
.sgh-header .sgh-main-navigation .wp-block-navigation__submenu-container {
  min-width: 15rem; padding: .25rem 0; border: var(--sgh-hair); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); box-shadow: var(--sgh-shadow);
}
.sgh-header .sgh-main-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item + .wp-block-navigation-item { border-top: var(--sgh-hair); }
.sgh-header .sgh-main-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  width: 100%; min-height: var(--sgh-h-control); padding: .5rem 1rem; white-space: normal; overflow-wrap: anywhere;
  font: 600 var(--wp--preset--font-size--small)/1.3 var(--wp--preset--font-family--text);
}
.sgh-header .sgh-main-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--tint); }
@media (min-width: 1024px) {
  /* Dropdowns open under their item and never past the right edge. */
  .sgh-header .sgh-main-navigation .wp-block-navigation__container > .wp-block-navigation-item:last-child > .wp-block-navigation__submenu-container,
  .sgh-header .sgh-main-navigation .wp-block-navigation__container > .sgh-nav-departments > .wp-block-navigation__submenu-container { left: auto; right: 0; }
  /* "Abteilungen": one panel instead of a third level that opens sideways. The football
     teams stand as a two-column group under their label; Wasserball and Gymnastik follow. */
  .sgh-header .sgh-main-navigation.wp-block-navigation .sgh-nav-departments > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container { min-width: 24rem; padding: .5rem 0; }
  .sgh-header .sgh-main-navigation .sgh-nav-departments .sgh-nav-football { flex-direction: column; align-items: stretch; }
  .sgh-header .sgh-main-navigation.wp-block-navigation .sgh-nav-football > .wp-block-navigation-item__content.sgh-nav-group-label {
    display: block; min-height: 2rem; padding: .5rem 1rem .25rem; font: 700 var(--wp--preset--font-size--label)/1.3 var(--wp--preset--font-family--heading); letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--muted); pointer-events: none;
  }
  .sgh-header .sgh-main-navigation .sgh-nav-football > .wp-block-navigation__submenu-icon { display: none; }
  .sgh-header .sgh-main-navigation .sgh-nav-football > .wp-block-navigation__submenu-container {
    position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; min-width: 0; height: auto; padding: 0 0 .5rem; overflow: visible;
    visibility: inherit; opacity: inherit; border: 0; box-shadow: none; background: transparent;
  }
  .sgh-header .sgh-main-navigation .sgh-nav-football > .wp-block-navigation__submenu-container > .wp-block-navigation-item { border-top: 0; }
  .sgh-header .sgh-main-navigation .sgh-nav-football > .wp-block-navigation__submenu-container > :first-child { grid-column: 1 / -1; }
  .sgh-header .sgh-main-navigation .sgh-nav-football > .wp-block-navigation__submenu-container .wp-block-navigation-item__content { min-height: 2.5rem; padding-block: .375rem; }
  /* Board cells (inc/navigation.php): overview entries span both columns; a group start (class sgh-nav-group-start,
     e.g. "Schiedsrichter") opens a new row under a hairline across the board. */
  .sgh-header .sgh-main-navigation .sgh-nav-football > .wp-block-navigation__submenu-container > .sgh-nav-wide { grid-column: 1 / -1; }
  .sgh-header .sgh-main-navigation .sgh-nav-football > .wp-block-navigation__submenu-container > .sgh-nav-group-start { grid-column-start: 1; }
  .sgh-header .sgh-main-navigation .sgh-nav-football > .wp-block-navigation__submenu-container > :is(.sgh-nav-group-start, .sgh-nav-group-start + .sgh-nav-col-2) { margin-top: .375rem; padding-top: .375rem; border-top: var(--sgh-hair); }
}
.sgh-header .sgh-main-navigation .wp-block-navigation__responsive-container-open,
.sgh-header .sgh-main-navigation .wp-block-navigation__responsive-container-close { min-width: var(--sgh-h-control); min-height: var(--sgh-h-control); align-items: center; justify-content: center; color: var(--wp--preset--color--ink); }
.sgh-header .sgh-main-navigation .sgh-nav-information { display: none; }
/* "Mitglied werden" beside the menu from 1024px (parts/header.html): a quiet outlined button between "Kontakt" and the
   search, in this order for the keyboard too. In the phone sheet it is the fixed button at the bottom, so not here. */
.sgh-header .sgh-header-join { display: none; }
@media (min-width: 1024px) {
  .sgh-header .sgh-header-join { display: block; flex: none; margin-left: -.5rem; }
  .sgh-header .sgh-header-join a {
    display: inline-flex; align-items: center; min-height: var(--sgh-h-control); padding: 0 .875rem; border: 1px solid var(--wp--custom--color--link);
    color: var(--wp--custom--color--link); font: 700 1rem/1.2 var(--wp--preset--font-family--heading); text-decoration: none; white-space: nowrap;
    transition: background-color var(--sgh-dur-1) var(--sgh-ease);
  }
  .sgh-header .sgh-header-join a:hover { background: var(--wp--preset--color--tint); }
}

/* Team row: a quiet second line under the header. */
.sgh-header .sgh-football-bar { margin-block-start: 0; border-top: var(--sgh-hair); border-bottom: var(--sgh-hair); background: var(--wp--preset--color--paper); }
.sgh-header .sgh-football-desktop { display: flex; align-items: center; gap: 1.75rem; }
.sgh-header .sgh-football-label { margin: 0; font: 700 var(--wp--preset--font-size--label)/1.3 var(--wp--preset--font-family--heading); letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
/* The same wp_navigation supplies this row, the overlay and home-page links. */
.sgh-header .sgh-navigation-football { margin: 0; font: 600 .9375rem/1.2 var(--wp--preset--font-family--text); }
.sgh-header .sgh-navigation-football .wp-block-navigation__container { gap: 0 1.5rem; }
.sgh-header .sgh-navigation-football .wp-block-navigation-item__content { display: flex; align-items: center; min-height: var(--sgh-h-control); padding-block: .5rem; text-decoration: none; }
.sgh-header .sgh-navigation-football .wp-block-navigation-item__content:hover { color: var(--wp--custom--color--link); }
.sgh-header .sgh-navigation-football .wp-block-navigation-item__content[aria-current="page"] { color: var(--wp--custom--color--link); box-shadow: inset 0 -3px 0 var(--wp--custom--color--link); }
/* Groups in the shared menu start with class sgh-nav-group-start: a thin rule before them. */
.sgh-header .sgh-navigation-football .sgh-nav-group-start { padding-left: 1.5rem; border-left: var(--sgh-hair); }

.sgh-section-navigation a[aria-current="page"] { font-weight: 700; }
.sgh-header :is(a, button, summary):focus-visible, .sgh-footer a:focus-visible { outline: 2px solid var(--sgh-focus); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   Phone and tablet menu (the sheet, below 1024px): three levels that can be told apart.
   1. Sections begin under a strong rule with a blue label, like the section heads of the pages.
   2. The links of a section stand calm in the text face, in columns, without a line after every row.
   3. The teams form a complete board of nine cells: short name, below it league or birth years (inc/navigation.php).
   From 720px "Verein" and "Abteilungen" stand side by side. "Kontakt" lives in the fixed bar at the bottom of the sheet
   and is therefore not repeated in the list. Design chosen by the user on 11.11.2026.
   --------------------------------------------------------------------------- */
/* Short name and second line of a team link: only the cells of the sheet show them. */
.sgh-nav-team { display: none; }
@media (max-width: 1023px) {
  .sgh-header-inner { min-height: 4rem; gap: 1rem; }
  .sgh-header .sgh-brand-crest { width: 36px; flex-basis: 36px; }
  .sgh-header .sgh-brand-crest img { width: 36px; height: 41px; }
  .sgh-header .sgh-brand-name { font-size: 1.1875rem; }
  .sgh-header .sgh-football-bar { display: none; }
  .sgh-header .sgh-main-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
  .sgh-header .sgh-main-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  /* scroll-padding-bottom: a link reached with Tab stops above the fixed "Mitglied werden / Kontakt" bar (about 5.2rem high). */
  .sgh-header .sgh-main-navigation .wp-block-navigation__responsive-container.is-menu-open { padding: 1rem var(--sgh-gutter) 2rem; background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); overflow-y: auto; scroll-padding-bottom: 6.5rem; }
  .sgh-header .sgh-main-navigation .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 4.25rem; }
  /* Core shows every submenu in the overlay; here they are plain lists without a panel. */
  .sgh-header .sgh-main-navigation .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container { min-width: 0; width: 100%; margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
  .sgh-header .sgh-main-navigation .is-menu-open .wp-block-navigation-item,
  .sgh-header .sgh-main-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { border: 0; }

  /* Top level: one grid, every entry begins under a strong rule. */
  .sgh-header .sgh-main-navigation .is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 0; align-items: start; width: 100%;
  }
  .sgh-header .sgh-main-navigation .is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item {
    grid-column: 1 / -1; display: block; width: auto; border-top: var(--sgh-rule);
  }
  .sgh-header .sgh-main-navigation .is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item:has(> a[href$="/kontakt/"]) { display: none; }
  /* The desktop marker (a bar under a main entry) stays off in the sheet. */
  .sgh-header .sgh-main-navigation > .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:is([aria-current], .sgh-nav-current-group)::after { content: none; }

  /* Level 1: single destinations (Aktuelles, Sponsoren), large, with an arrow. The current one takes the link colour. */
  .sgh-header .sgh-main-navigation > .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-link > .wp-block-navigation-item__content {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 3.5rem; padding: .5rem 0;
    font: 700 1.5rem/1.1 var(--wp--preset--font-family--heading); box-shadow: none;
  }
  .sgh-header .sgh-main-navigation > .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-link > .wp-block-navigation-item__content::after {
    content: "→"; position: static; inset: auto; height: auto; background: none; font: 600 1.125rem/1 var(--wp--preset--font-family--text); color: var(--wp--custom--color--link);
  }

  /* Label of a section (Verein, Abteilungen): the submenu toggle, shown as a label. */
  .sgh-header .sgh-main-navigation .is-menu-open .wp-block-navigation-item.open-on-click > .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle {
    width: 100%; min-height: 0; padding: .875rem 0 .25rem; font: 700 var(--wp--preset--font-size--label)/1.3 var(--wp--preset--font-family--heading); letter-spacing: .1em; text-transform: uppercase;
    color: var(--wp--custom--color--link); pointer-events: none;
  }

  /* Level 2: the links of a section. */
  .sgh-header .sgh-main-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    width: 100%; min-height: 2.75rem; padding: .5rem 0; font: 600 1.0625rem/1.25 var(--wp--preset--font-family--text);
  }
  /* The current page (aria-current="page") and the area entry of a page without an entry of its own (aria-current="true"). */
  .sgh-header .sgh-main-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is([aria-current="page"], [aria-current="true"]) {
    padding-left: .75rem; font-weight: 700; color: var(--wp--custom--color--link); box-shadow: inset 3px 0 0 var(--wp--custom--color--link);
  }
  .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-club > .wp-block-navigation__submenu-container {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); column-gap: 1.5rem; padding: 0 0 .75rem;
  }

  /* Departments: football with its teams, below it Wasserball and Gymnastik side by side, on the same level. */
  .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-departments > .wp-block-navigation__submenu-container {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; padding: 0 0 .5rem;
  }
  .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-departments > .wp-block-navigation__submenu-container > .sgh-nav-football {
    grid-column: 1 / -1; display: block; margin-bottom: .25rem; padding-bottom: .875rem; border-bottom: var(--sgh-hair);
  }
  .sgh-header .sgh-main-navigation .is-menu-open .wp-block-navigation__submenu-container .sgh-nav-football > .sgh-nav-group-label,
  .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-departments > .wp-block-navigation__submenu-container > .wp-block-navigation-link > .wp-block-navigation-item__content {
    display: flex; align-items: center; min-height: 2.75rem; padding: .25rem 0; font: 700 1.375rem/1.15 var(--wp--preset--font-family--heading); letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--ink); box-shadow: none;
  }
  .sgh-header .sgh-main-navigation .is-menu-open .wp-block-navigation__submenu-container .sgh-nav-football > .sgh-nav-group-label { pointer-events: none; }
  .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-departments > .wp-block-navigation__submenu-container > .wp-block-navigation-link > .wp-block-navigation-item__content:is([aria-current="page"], [aria-current="true"]) { color: var(--wp--custom--color--link); }

  /* Football: two overview links, the board of teams, below it referees and tournaments (classes from inc/navigation.php). */
  .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-football > .wp-block-navigation__submenu-container {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 0; padding-right: 1px;
  }
  .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-football > .wp-block-navigation__submenu-container > .wp-block-navigation-item { grid-column: span 3; }
  .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-football > .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(:has(.sgh-nav-team)) > .wp-block-navigation-item__content { padding-right: .75rem; }
  /* Every cell has its four lines; the cells overlap by one line, so the board has no gaps whatever the number of teams. */
  .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-football > .wp-block-navigation__submenu-container > .wp-block-navigation-item:has(.sgh-nav-team) {
    grid-column: span 2; margin: 0 -1px -1px 0; border: var(--sgh-hair);
  }
  .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-football > .wp-block-navigation__submenu-container > .wp-block-navigation-item.sgh-nav-group-start,
  .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-football > .wp-block-navigation__submenu-container > .wp-block-navigation-item.sgh-nav-group-start + .sgh-nav-col-2 { margin-top: .5rem; }
  .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-football > .wp-block-navigation__submenu-container > .wp-block-navigation-item:has(.sgh-nav-team) > .wp-block-navigation-item__content {
    display: grid; align-content: center; min-height: 3.5rem; padding: .5rem .625rem; box-shadow: none; transition: background-color var(--sgh-dur-1) var(--sgh-ease);
  }
  .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-football .wp-block-navigation-item:has(.sgh-nav-team) .wp-block-navigation-item__label { display: none; }
  .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-team { display: grid; gap: .125rem; min-width: 0; }
  .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-team b { font: 700 1.125rem/1.1 var(--wp--preset--font-family--heading); color: var(--wp--preset--color--ink); }
  .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-team small { font: 400 .75rem/1.25 var(--wp--preset--font-family--text); color: var(--wp--preset--color--muted); }
  @media (hover: hover) { .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-football .wp-block-navigation-item:has(.sgh-nav-team) > .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--tint); } }
  /* The current team: a tinted cell with a blue top edge, like the key figures of the team pages. */
  .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-football > .wp-block-navigation__submenu-container > .wp-block-navigation-item:has(.sgh-nav-team) > .wp-block-navigation-item__content[aria-current="page"] {
    padding-left: .625rem; background: var(--wp--preset--color--tint); box-shadow: inset 0 3px 0 var(--wp--custom--color--link);
  }
  .sgh-header .sgh-main-navigation .is-menu-open .wp-block-navigation-item__content[aria-current="page"] .sgh-nav-team b { color: var(--wp--custom--color--link); }
  .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-football .wp-block-navigation-item:has(.sgh-nav-team) > .wp-block-navigation-item__content:focus-visible { outline-offset: -2px; }
}
/* Tablet: "Verein" on the left, "Abteilungen" beside it; the sponsors below across the full width. */
@media (min-width: 720px) and (max-width: 1023px) {
  .sgh-header .sgh-main-navigation .is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .sgh-nav-club { grid-column: span 4; }
  .sgh-header .sgh-main-navigation .is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .sgh-nav-departments { grid-column: span 8; }
  .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-club > .wp-block-navigation__submenu-container { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 359px) {
  .sgh-header .sgh-main-navigation .is-menu-open .sgh-nav-football > .wp-block-navigation__submenu-container > .wp-block-navigation-item:has(.sgh-nav-team) > .wp-block-navigation-item__content { padding-inline: .4375rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .sgh-header .sgh-main-navigation .wp-block-navigation__responsive-container.is-menu-open { animation: sgh-sheet var(--sgh-dur-2) var(--sgh-ease); }
  @keyframes sgh-sheet { from { opacity: 0; transform: translateY(-8px); } }
}
@media (max-width: 359px) {
  .sgh-header .sgh-brand-name { font-size: 1.0625rem; }
  .sgh-header-inner { gap: .5rem; }
}

/* ---------------------------------------------------------------------------
   Footer in club blue: contact, three link groups, membership.
   --------------------------------------------------------------------------- */
.sgh-footer { background: var(--sgh-brand-surface); color: var(--sgh-on-brand); }
.sgh-footer a { color: var(--sgh-on-brand); }
/* Kuppe (assets/footer-lines.js): die Oberkante ist eine Höhenlinie um das Wappen; --sgh-foot-rise ist die Höhe der Kuppe
   über dem geraden Teil. Die Spalten beginnen 2,5rem unter dem geraden Teil. */
/* --sgh-foot-crest: Breite des Wappens (so groß wie das gebaute der Startseite: 41,56 Zellen zu 3 Pixeln, am Handy zu 2). */
.sgh-footer { --sgh-foot-rise: 64px; --sgh-foot-crest: 124.7px; }
@media (max-width: 599px) { .sgh-footer { --sgh-foot-rise: 40px; --sgh-foot-crest: 83.1px; } }
.sgh-footer .sgh-footer-inner { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)) minmax(0, 2fr); gap: var(--wp--preset--spacing--60); padding-block: calc(var(--sgh-foot-rise) + 2.5rem) var(--wp--preset--spacing--60); }
.sgh-footer .sgh-footer-inner > * { min-width: 0; margin: 0; }
.sgh-footer .sgh-footer-crest { width: var(--sgh-foot-crest); height: auto; margin: 0 0 1rem; }
/* Höhenlinien und Herzschlag (assets/footer-lines.js): Linien als Canvas hinter dem Inhalt, Wappen mit ruhender Tiefe;
   beim Schlag hebt es sich ruhig zweimal („bumm-bumm“), der Schatten wird etwas tiefer, dahinter ein leiser Schein. */
.sgh-footer.has-lines { position: relative; isolation: isolate; overflow: hidden; }
.sgh-footer-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.sgh-footer.has-lines > :not(.sgh-footer-lines) { position: relative; z-index: 1; }
.sgh-footer.has-lines > .sgh-footer-pause { position: absolute; z-index: 2; top: calc(var(--sgh-foot-rise) + .5rem); right: calc(max(var(--sgh-gutter), (100% - 1240px) / 2) - .875rem); }
.sgh-footer .sgh-footer-crest { position: relative; isolation: isolate; }
.sgh-footer .sgh-footer-crest img { position: relative; z-index: 1; transform-origin: 50% 60%;
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / .3)) drop-shadow(0 3px 3px rgb(0 0 40 / .4)) drop-shadow(0 8px 12px rgb(0 0 40 / .3)); }
.sgh-footer .sgh-footer-crest::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; background: radial-gradient(closest-side, rgb(201 203 242 / .35), rgb(201 203 242 / .08) 60%, transparent); opacity: 0; pointer-events: none; }
.sgh-footer .sgh-footer-crest.is-beat img { animation: sgh-herz 1.5s cubic-bezier(.4, 0, .4, 1); }
.sgh-footer .sgh-footer-crest.is-beat::before { animation: sgh-herzschein 1.5s ease-out; }
@keyframes sgh-herz {
  0%, 62%, 100% { transform: none; filter: drop-shadow(0 1px 0 rgb(255 255 255 / .3)) drop-shadow(0 3px 3px rgb(0 0 40 / .4)) drop-shadow(0 8px 12px rgb(0 0 40 / .3)); }
  12% { transform: translateY(-1.5px) scale(1.045); filter: drop-shadow(0 1px 0 rgb(255 255 255 / .38)) drop-shadow(0 5px 4px rgb(0 0 40 / .38)) drop-shadow(0 13px 18px rgb(0 0 40 / .34)); }
  25% { transform: none; }
  37% { transform: translateY(-1px) scale(1.025); filter: drop-shadow(0 1px 0 rgb(255 255 255 / .34)) drop-shadow(0 4px 4px rgb(0 0 40 / .39)) drop-shadow(0 11px 15px rgb(0 0 40 / .32)); }
}
@keyframes sgh-herzschein { 0%, 100% { opacity: 0; scale: .85; } 14% { opacity: .9; scale: 1; } 40% { opacity: .6; scale: 1.05; } }
@media (prefers-reduced-motion: reduce) { .sgh-footer .sgh-footer-crest.is-beat img, .sgh-footer .sgh-footer-crest.is-beat::before { animation: none; } }
.sgh-footer .sgh-footer-crest img { display: block; width: 100%; height: auto; }
.sgh-footer .sgh-footer-title { margin: 0 0 1rem; font: 700 1.5rem/1.05 var(--wp--preset--font-family--heading); letter-spacing: .02em; text-transform: uppercase; color: var(--sgh-on-brand); }
/* Where the club plays, above the address: a label like the column headings, then one line. */
.sgh-footer .sgh-footer-place { margin: 0 0 .875rem; font: 700 1.0625rem/1.25 var(--wp--preset--font-family--heading); color: var(--sgh-on-brand); }
.sgh-footer .sgh-footer-place-k { display: block; margin-bottom: .1875rem; font: 700 var(--wp--preset--font-size--label)/1.3 var(--wp--preset--font-family--heading); letter-spacing: .1em; text-transform: uppercase; color: var(--sgh-on-brand-2); }
.sgh-footer .sgh-footer-contact { margin: 0; max-width: 24em; font-size: var(--wp--preset--font-size--small); line-height: 1.7; color: var(--sgh-on-brand-2); }
.sgh-footer .sgh-footer-contact a { color: var(--sgh-on-brand); }
.sgh-footer .sgh-footer-label { margin: 0 0 .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--sgh-on-brand-line); font: 700 var(--wp--preset--font-size--label)/1.3 var(--wp--preset--font-family--heading); letter-spacing: .1em; text-transform: uppercase; color: var(--sgh-on-brand-2); }
.sgh-footer .sgh-section-navigation { margin: 0; }
.sgh-footer .sgh-section-navigation .wp-block-navigation__container { gap: 0; align-items: flex-start; }
.sgh-footer .sgh-navigation-football .wp-block-navigation__container { flex-direction: column; }
.sgh-footer .sgh-section-navigation .wp-block-navigation-item__content {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding-block: .25rem; color: var(--sgh-on-brand);
  font-size: var(--wp--preset--font-size--small); font-weight: 400; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere;
}
.sgh-footer .sgh-section-navigation .wp-block-navigation-item__content:hover { text-decoration: underline; text-decoration-color: currentColor; }
.sgh-footer .sgh-section-navigation .wp-block-navigation-item__content[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; font-weight: 600; }
@media (pointer: coarse) { .sgh-footer .sgh-section-navigation .wp-block-navigation-item__content { min-height: var(--sgh-h-control); } }
.sgh-footer .sgh-footer-cta .wp-block-button__link { background: var(--sgh-on-brand); color: var(--wp--preset--color--brand); }
.sgh-footer .sgh-footer-cta .wp-block-button__link:hover { background: var(--sgh-on-brand-tint); color: var(--wp--preset--color--brand); }
.sgh-footer .sgh-footer-extra { margin: 1rem 0 0; font-size: var(--wp--preset--font-size--small); }
/* Baustelle am Wappen (nur Startseite, inc/founding.php, assets/founding.js): Die Fläche steht in der Markenspalte an der
   Stelle des Wappens und bekommt ihre Größe vom Skript (ganze Gerätepixel je Zelle, --bau-k ist eine Zelle). Das Wappen des
   Fußes liegt deckungsgleich über dem gebauten (Szene: Wappen ab Zelle 37,22/12, 41,56 Zellen breit) und bleibt verborgen,
   bis der letzte Stein sitzt. Ohne Skript gibt es keine Baustelle, das Wappen steht wie auf den übrigen Seiten. */
.sgh-footer .sgh-footer-brand { position: relative; }
.sgh-founding { display: none; margin: 0 0 1rem; }
.sgh-founding.is-js { display: block; }
.sgh-founding-cv { display: block; image-rendering: pixelated; }
.sgh-footer .sgh-footer-brand.has-bau > .sgh-footer-crest { position: absolute; left: calc(37.22 * var(--bau-k, 3px)); top: calc(12 * var(--bau-k, 3px)); width: calc(41.56 * var(--bau-k, 3px)); margin: 0; opacity: 0; }
.sgh-footer .sgh-footer-brand.has-bau.is-built > .sgh-footer-crest { opacity: 1; transition: opacity .25s linear; }
@media (prefers-reduced-motion: reduce) { .sgh-footer .sgh-footer-brand.has-bau.is-built > .sgh-footer-crest { transition: none; } }
.sgh-footer .sgh-footer-base { padding-block: 1rem 1.5rem; border-top: 1px solid var(--sgh-on-brand-line); font-size: var(--wp--preset--font-size--meta); color: var(--sgh-on-brand-2); }
.sgh-footer .sgh-footer-base > * { margin: 0; }
.sgh-footer .sgh-footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; }
.sgh-footer .sgh-footer-credit { white-space: nowrap; }
/* Appearance switch: three small segments on the footer's blue ground. */
.sgh-scheme { display: flex; align-items: center; gap: .75rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.sgh-scheme[hidden] { display: none; }
.sgh-scheme-legend { float: left; margin-right: .75rem; padding: 0; font: 700 var(--wp--preset--font-size--label)/1.3 var(--wp--preset--font-family--heading); letter-spacing: .1em; text-transform: uppercase; color: var(--sgh-on-brand-2); }
.sgh-scheme-options { display: inline-flex; padding: 3px; border: 1px solid var(--sgh-on-brand-line); }
.sgh-scheme-option { position: relative; display: inline-flex; align-items: center; gap: .375rem; min-height: 2.25rem; padding: 0 .75rem; color: var(--sgh-on-brand-2); cursor: pointer; transition: background-color var(--sgh-dur-1) var(--sgh-ease), color var(--sgh-dur-1) var(--sgh-ease); }
.sgh-scheme-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sgh-scheme-option svg { flex: none; }
.sgh-scheme-option:has(input:checked) { background: var(--sgh-on-brand); color: var(--wp--preset--color--brand); font-weight: 600; }
.sgh-scheme-option:hover:not(:has(input:checked)) { color: var(--sgh-on-brand); }
.sgh-scheme-option:has(input:focus-visible) { outline: 2px solid var(--sgh-on-brand); outline-offset: 2px; }
@media (max-width: 599px) {
  .sgh-scheme, .sgh-scheme-options { width: 100%; }
  .sgh-scheme { display: block; }
  .sgh-scheme-legend { float: none; margin: 0 0 .5rem; }
  .sgh-scheme-option { flex: 1 1 0; justify-content: center; padding: 0 .375rem; }
}

@media (max-width: 1023px) {
  .sgh-footer .sgh-footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sgh-footer .sgh-footer-brand, .sgh-footer .sgh-footer-action { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .sgh-footer .sgh-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }
}

/* The football links on the home page column (until the home page shows team tiles). */
.sgh-department .sgh-navigation-football .wp-block-navigation__container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 0 1rem; }
.sgh-department .sgh-navigation-football .wp-block-navigation-item__content { display: flex; align-items: center; min-height: var(--sgh-h-control); padding-block: .5rem; font-size: var(--wp--preset--font-size--meta); font-weight: 600; }
.sgh-department .sgh-navigation-football .wp-block-navigation-item { min-width: 0; }

/* Search in the header (inc/site-search.php): a button beside the menu, the field as a sheet. */
.sgh-header-inner:has(.sgh-site-search) { justify-content: flex-start; }
.sgh-header-inner:has(.sgh-site-search) > .sgh-brand { margin-right: auto; }
.sgh-site-search { display: flex; align-items: center; }
.sgh-search-toggle { display: grid; place-items: center; width: var(--sgh-h-control); height: var(--sgh-h-control); margin-right: -.6rem; padding: 0; border: 0; background: none; color: var(--wp--preset--color--ink); cursor: pointer; }
.sgh-search-toggle:hover { color: var(--wp--custom--color--link); }
.sgh-search-panel { position: fixed; inset: 0 0 auto; width: auto; max-width: none; margin: 0; padding: 1.5rem max(var(--sgh-gutter), (100% - 1240px) / 2) 1.75rem; border: 0; border-bottom: var(--sgh-rule); background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); box-shadow: var(--sgh-shadow); }
.sgh-search-panel::backdrop { background: rgb(20 21 31 / .35); }
.sgh-search-close { position: absolute; top: .75rem; right: max(var(--sgh-gutter), (100% - 1240px) / 2); min-height: var(--sgh-h-control); padding: 0; border: 0; background: none; color: var(--wp--custom--color--link); font: 600 var(--wp--preset--font-size--meta)/1 var(--wp--preset--font-family--text); cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  .sgh-search-panel { transition: transform var(--sgh-dur-2) var(--sgh-ease), opacity var(--sgh-dur-2) var(--sgh-ease), overlay var(--sgh-dur-2) allow-discrete, display var(--sgh-dur-2) allow-discrete; }
  @starting-style { .sgh-search-panel:popover-open { transform: translateY(-.75rem); opacity: 0; } }
  .sgh-search-panel:not(:popover-open) { transform: translateY(-.75rem); opacity: 0; }
}
@media (max-width: 1023px) {
  .sgh-site-search { order: 1; }
  .sgh-header-inner:has(.sgh-site-search) .sgh-main-navigation { order: 2; }
}
/* Below 360 px the header gap is .5rem: the search button reaches exactly up to the menu button instead of 2 px into it. */
@media (max-width: 359px) { .sgh-search-toggle { margin-right: -.5rem; } }

/* Phone menu sheet: club mark above, "Mitglied werden" and "Kontakt" fixed at the bottom. */
.sgh-sheet-brand, .sgh-sheet-cta { display: none; }
.sgh-header .sgh-main-navigation .is-menu-open .sgh-sheet-brand { position: absolute; top: 1rem; left: var(--sgh-gutter); display: flex; align-items: center; gap: .625rem; min-height: var(--sgh-h-control); color: var(--wp--preset--color--ink); font: 700 1rem/1.1 var(--wp--preset--font-family--heading); text-transform: uppercase; text-decoration: none; }
.sgh-header .sgh-main-navigation .is-menu-open .sgh-sheet-brand img { width: 32px; height: auto; }
.sgh-header .sgh-main-navigation .is-menu-open .sgh-sheet-cta { position: sticky; bottom: -2rem; z-index: 2; display: flex; align-items: center; gap: 1.25rem; width: 100%; margin: 1.5rem 0 -2rem; padding: .875rem 0 1.25rem; border-top: var(--sgh-rule); background: var(--wp--preset--color--paper); }
.sgh-header .sgh-main-navigation .is-menu-open .sgh-sheet-cta { order: 99; }
.sgh-header .sgh-main-navigation .is-menu-open .sgh-sheet-cta .wp-element-button { flex: 1; padding: .875rem 1rem; background: var(--wp--preset--color--brand); color: var(--sgh-on-brand); font: 700 1.0625rem/1.2 var(--wp--preset--font-family--heading); text-align: center; text-decoration: none; }
.sgh-header .sgh-main-navigation .is-menu-open .sgh-sheet-cta-link { font-weight: 600; }

/* Footer: the teams in two columns, as in the menu, wherever the column itself is wide enough for both (asked of the
   column, not of the window: between 600 and about 800 px the footer has three narrow columns, there "1. Herren" broke
   into two lines and "Schiedsrichter" ran into the next column). Both columns need 181 px; from 168 px on the
   longest name may reach a few pixels into the gap beside the column, below that the teams stand in one column. */
.sgh-footer nav.sgh-navigation-football { container: sgh-foot-teams / inline-size; }
@container sgh-foot-teams (min-width: 10.5rem) { .sgh-footer .sgh-navigation-football .wp-block-navigation__container { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 1.5rem; } }
/* A general page among the teams (class sgh-nav-no-bar, e.g. "Kinder- und Jugendfußball") spans both columns, as in the menu. */
.sgh-footer .sgh-navigation-football .sgh-nav-no-bar { grid-column: 1 / -1; }
/* The labels "Fußball" in the team bar and the footer lead to the football overview. */
.sgh-header .sgh-football-label a, .sgh-footer-label a { color: inherit; text-decoration: none; }
.sgh-header .sgh-football-label a { display: inline-flex; align-items: center; min-height: var(--sgh-h-control); }
.sgh-header .sgh-football-label a:hover, .sgh-footer-label a:hover { text-decoration: underline; text-underline-offset: .2em; }